@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,600');

body {
  font-family: Source Sans Pro, Helvetica, Arial, sans-serif;
  color: #444;
}

header img {
  width: 100%;
  max-width: 300px;
  display: block;
  margin: auto;
}

h2 {
  font-family: Source Sans Pro, Helvetica, Arial, sans-serif;
  display: inline-block;
  width: 97.5%;
  color: #fff;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  margin-top: 2em;
  margin-bottom: 1em;
  padding: 0 .5em;
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
}

div[id^="pp"] {
  display: flex;
  align-items: flex-start; 
  gap: 8px; 
  margin-bottom: 10px;
}

div[id^="pp"] input[type="checkbox"] {
  margin-top: 2px; 
  flex-shrink: 0;
}

div[id^="pp"] .questionlabel {
  margin: 0;
  line-height: 1.4;
  width: auto;
  flex: 1;
}

.addresslabel {
  width: 50%;
  display: inline-block;
}

sup {
  font-size: xx-small;
}

p.lang {
  text-align: right;
  margin-bottom: 2em;
}

.required {
  font-size: x-small;
}

.questionlabel {
  font-weight: 600;
}


.addresslabel input, .addresslabel select {
  margin-bottom: 0px;
  margin-left: 0px;
  width: 97.5%;
}

@media only screen and (min-width: 480px) {
.addresslabel .questionlabel {
  display: inline-block;
  width: 32%;
}
.addresslabel input, .addresslabel select {
  display: inline-block;
  width: 64%;
}  
}

.otherfillin {
  display: inline-block;
}

.otherfillin input {
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
  border-radius: 0px;
  margin-left: 8px;
  padding: 0px;
  margin-bottom: 0px;
}

.otherfillin input:focus {
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
  box-shadow: none;
}

input[type="submit"] {
  font-size: large;
  color: #fff;
  background-color: #cc8f33;
  text-shadow: none;
  padding: 15px 30px;
  border: 0px;
  border-radius: 0px;
}

input[type="submit"]:hover {
  color: #fff;
  background-color: #cc8b2f;
  border: 0px;
}

.spancd118 ul {
  display: flex;
  margin: 5px 0;
}

.spancd118 #pd118 {
  margin: 0;
}

footer {
  border-top: 1px solid #ccc;
  margin-top: 2em;
  padding-top: 2em;
}

.footer-left img {
  width: 66%;
}

.footer-left, .footer-right {
  width: 49.5%;
  display: inline-block;
  vertical-align: bottom;
}

.footer-left p, .footer-right p {
  font-size: x-small;
  line-height: 1.5em;
}

.footer-bottom {
  border-top: 1px solid #ccc;
  margin-top: 2em;
  padding-top: 2em;
  width: 99%;
  clear: both;
  text-align: center;
  font-size: x-small;
}

@media only screen and (max-width: 480px) {
  .footer-left, .footer-right {
    width: 92%;
    display: inline-block;
    vertical-align: bottom;
}
}

ul.validation {
  position: fixed;
  bottom: 0px;
  left: 0px;
  background: #ff0000;
  width: 100%;
  margin-bottom: 0px;
  max-height: 5em;
  overflow: auto;
}

ul.validation li {
  color: #fff;
  text-align: center;
}

ul.validation li:first-of-type {
  padding-top: .25em;
}

ul.validation li:last-of-type {
  padding-bottom: : .5em;
}

ul.validation li:only-of-type {
  padding-top: .25em;
  padding-bottom: .5em;
}


h2 {
  font-family: Source Sans Pro, Helvetica, Arial, sans-serif;
  display: inline-block;
  width: 97.5%;
  color: #fff;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  margin-top: 2em;
  margin-bottom: 1em;
  padding: 0 .5em;
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
}

p.lang {
  text-align: right;
  margin-bottom: 2em;
}

.required {
  font-size: x-small;
}

span p {
  margin-bottom: 0px;
}

span p.addresslabel {
  margin-bottom: 20px;
}

.questionlabel {
  font-weight: 600;
}

/* address block styles */

.addresslabel input,
.addresslabel select {
  margin-bottom: 0px;
  margin-left: 0px;
  width: 97.5%;
}

@media only screen and (min-width: 480px) {

  .addresslabel .questionlabel {
    display: inline-block;
    width: 32%;
  }
  
  .addresslabel input,
  .addresslabel select {
    display: inline-block;
    width: 64%;
  }
  
}



.otherfillin {
  display: inline-block;
}

.otherfillin input {
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
  border-radius: 0px;
  margin-left: 8px;
  padding: 0px;
  margin-bottom: 0px;
}

.otherfillin input:focus {
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
  box-shadow: none;
}

/* footer styles */

input[type="submit"] {
  font-size: large;
  color: #fff;
  background-color: #cc8f33;
  text-shadow: none;
  padding: 15px 30px;
  border: 0px;
  border-radius: 0px;
}

input[type="submit"]:hover {
  color: #fff;
  background-color: #cc8b2f;
  border: 0px;
}

/* 3rd party optin */
.spancd118 ul {
    display: flex;
    margin: 5px 0;
}

.spancd118 #pd118 {
    margin: 0;
}

footer {
  border-top: 1px solid #ccc;
  margin-top: 2em;
  padding-top: 2em;
}

.footer-left img {
  width: 66%
}

.footer-left, .footer-right {
  width: 49.5%;
  display: inline-block;
  vertical-align: bottom;
}

.footer-left p, .footer-right p {
  font-size: x-small;
  line-height: 1.5em;
}

.footer-bottom {
  border-top: 1px solid #ccc;
  margin-top: 2em;
  padding-top: 2em;
  width: 99%;
  clear: both;
  text-align: center;
  font-size: x-small;
}

@media only screen and (max-width: 480px) {
  .footer-left, .footer-right {
    width: 92%;
    display: inline-block;
    vertical-align: bottom;
}
}


/* Button */

#custombtn.submit {
    clear: both;
    text-align: center;
    margin: 20px 0;
}


/* Fixed-Position Validation */

ul.validation {
  position: fixed;
  bottom: 0px;
  left: 0px;
  background: #ff0000;
  width: 100%;
  margin-bottom: 0px;
  max-height: 5em;
  overflow: auto;
}

ul.validation li {
  color: #fff;
  text-align: center;
}

ul.validation li:first-of-type {
  padding-top: .25em;
}

ul.validation li:last-of-type {
  padding-bottom: : .5em;
}

ul.validation li:only-of-type {
  padding-top: .25em;
  padding-bottom: .5em;
}


header {
  text-align: right;
}

h2 {
  background-color: #00a650;
}

#p24 {
  display: none;
}

.spanc24 ul li input {
  margin-left: 0px;
  margin-right: 8px;
}

.spanc24 .checkboxlabel {
  font-weight: 600;
}

.drg-element-type-product.drg-element-sub-type-type-2 input {
  display: inline-block;
  margin-left: 0px;
  margin-right: 8px;
  vertical-align: top;
  margin-top: 6px;
}

.drg-element-type-product.drg-element-sub-type-type-2 .questionlabel {
  display: inline-block;
  width: 90%;
  margin-top: 0px;
}

.spanc1642 ul li {
  display: inline-block;
  width: 25%;
}

.spanc1700 ul li, 
.spanc1690 ul li, 
.spanc1698 ul li, 
.spanc1671 ul li, 
.spanc1682 ul li, 
.spanc1691 ul li, 
.spanc1699 ul li, 
.spanc1678 ul li, 
.spanc1696 ul li, 
.spanc1703 ul li, 
.spanc1695 ul li, 
.spanc1683 ul li, 
.spanc1702 ul li, 
.spanc1685 ul li, 
.spanc1676 ul li, 
.spanc1670 ul li, 
.spanc1697 ul li, 
.spanc1675 ul li, 
.spanc1673 ul li, 
.spanc1686 ul li, 
.spanc1680 ul li, 
.spanc1672 ul li, 
.spanc1689 ul li, 
.spanc1677 ul li, 
.spanc1684 ul li, 
.spanc1687 ul li, 
.spanc1688 ul li {
  display: inline-block;
}

.spanc1701 ul li {
  display: inline-block;
}

.spanc1644 ul li {
  display: inline-block;
}

.spanc1817 ul li {
  display: inline-block;
}

.spanc1643 ul li {
  display: inline-block;
}

.spanc1669 ul li {
  display: inline-block;
}

.spanc1679 .questionlabel {
  display: none;
}

.spanc1679 input {
  margin-left: 0px;
  margin-right: 8px;
}

.spanc1679 .checkboxlabel {
  font-weight: 600;
}

@media only screen and (max-width: 480px) {
.spanc1642 ul li {
  display: block;
  width: 100%;
}
}

@media only screen and (max-width: 767px) {
.addresslabel {
  width: 100%;
  display: inline-block;
}
}

@media only screen and (max-width: 480px) {
header img {
  width: 100%;
}
}