.header#hd {
  background: url("https://www.apsnet.org/Style%20Library/Images/PH2025_RegBanner.jpg") no-repeat center;
  border-bottom: none;
  height: 257px !important;
  background-size: 65%;
  position: absolute;
  background-position-y: 0;
  border-top: 20px solid #23AA4A;
  border-bottom: 20px solid #23AA4A;
}

div.col-primary {
  margin-top:  15%;
}

div.functions div.header,
div.functions div.header div.key,
div.checkOutContent div.section label.header,

div.popup > div.titleBar,
div.dialog > div.titleBar {
    background-color: #F89957;
    color: white;
}

 div.functions div.header div.key {
   background-color:#e8e8e8 !important;
   color: #000 !important;
 }

div.createContact.dialog .content {
  max-height: unset;
  overflow-x:hidden;
}

.btn, input[type="button"], input[type="reset"], input[type='submit']{
    background-color: #F04F46;
    color: #fff;
}

.btn:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type='submit']:hover {
  background-color:#FCE7C9;
  color: #000;
}

#ctl00_TemplateBody_registrantsDisplay_dlRegistrants {
  margin: 5px 0px 10px 30px;
}

.registrantsDisplay {
  margin-top: 10px;
}

@media only screen and (max-width: 2500px) {

  .header#hd { 
    background-size: 75%;
    height: 245px !important;
  }

}

@media only screen and (max-width: 2300px) {

  .header#hd { 
    background-size: 75%;
    height: 235px !important;
  }

}

@media only screen and (max-width: 2200px) {

  .header#hd { 
    background-size: 75%;
    height: 220px !important;
  }

}

@media only screen and (max-width: 2100px) {

  .header#hd { 
    background-size: 75%;
  }

}


@media only screen and (max-width: 1800px) {

  .header#hd { 
    background-size: 88%;
  }

}

@media only screen and (max-width: 1600px) {

  .header#hd {
      height: 240px !important;
      background-size: 100%;
  }

}

@media only screen and (max-width: 1500px) {

  .header#hd {
      height: 230px !important;
      background-size: 98%;
  }

}

@media only screen and (max-width: 1400px) {

  .header#hd {
      height: 220px !important;
  }

}

@media only screen and (max-width: 1300px) {

  .header#hd {
      height: 200px !important;
  }

}

@media only screen and (max-width: 1200px) {

  .header#hd {
      height: 195px !important;
  }

}

@media only screen and (max-width: 1100px) {

  .header#hd {
      height: 175px !important;
  }

}

@media only screen and (max-width: 1000px) {

  .header#hd {
      height: 160px !important;
      border-top: 13px solid #23AA4A;
      border-bottom: 13px solid #23AA4A;
      background-size: 112%;
      overflow: hidden;
  }

  .container {
    padding-left: 0px !important;
  }

}


@media only screen and (max-width: 900px) {

  .header#hd {
      height: 145px !important;
  }

  div.col-primary {
    margin-top:  10%;
  }

}

@media only screen and (max-width: 800px) {

  .header#hd {
      height: 130px !important;
  }

}


@media only screen and (max-width: 700px) {

  .header#hd {
      height: 120px !important;
      background-size: 120%;
  }

}

@media only screen and (max-width: 600px) {

  .header#hd {
      background-size: 140%;
  }

}


@media only screen and (max-width: 500px) {

 .header#hd {
    background-size: 160%;
  }

  div.createContact label, div.demographicsValidation label {
    font-size: 11pt;
  }

  div.content div.createContact span, div.createContact label {
      width: 200px;
      margin-right: 0;
  }

  .createContact .field .label {
    width: 210px;
  }

  div.billTo .label {
    width: 85px !important;
  }

  .creditCard .field .label {
    width: 85px !important;
  }
}

@media only screen and (max-width: 450px) {

  div.createContact.popup.selfCenter {
    width: 95% !important;
  }

   .header#hd {
      background-size: 180%;
      height: 100px !important;
  }


}

@media only screen and (max-width: 390px) {

  div.createContact .field {  
    display: flex;
    flex-direction: column;
  }

  div.createContact div.field div.label {
    width: 100%;
  }

  div.createContact label {
    width: 100%;
    text-align: center;
  }

  div.content div.createContact span.value, div.content div.createContact select.value {
      width: 100%;
      text-align: center;
  }

  div.createContact .field input { 
    width: 100%;
  }
}