/* General Page Styles */

#content1 img:first-of-type {
  display: block;
  margin: 20px auto;
  max-width: 100%;
}

h2 {
  color: #c41424;
}

h3 {
  border-bottom: 1px solid #555;
}

h3 span {
  background-color: #c41424;
  color: #fff;
}

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,300;1,400;1,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@500&display=swap');

@font-face { 
  font-family: 'Dragon Glyphs Display';
  src: url('https://cdn.omeda.com/hosted/images/dragon/generic/316.eot'); /* IE9 */
  src: url('https://cdn.omeda.com/hosted/images/dragon/generic/316.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */
  src: local('na:)none'),
    url('https://cdn.omeda.com/hosted/images/dragon/generic/316.woff') format('woff'),
    url('https://cdn.omeda.com/hosted/images/dragon/generic/316.ttf') format('truetype'),
    url('https://cdn.omeda.com/hosted/images/dragon/generic/316.svg#DragonGlyphsDisplay') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}


/* General Page Styles */

span.questionlabel {
    color: #111;
    font-size: 16px;
}


html { margin-left: calc(100vw - 100%); }

body {
  font-family: 'Roboto', sans-serif;
}

.container {
  top: auto !important;
}

input[type="submit"] {
    -webkit-appearance: none;
    background: #fff;
    text-shadow: none;
    color: #c41424;
    border: 1px solid #c41424;
    font-size: 18px;
    font-weight: normal;
    margin: 20px;
    padding: 10px 60px;
}

input[type="submit"]:hover {
    background: #c41424;
    text-shadow: none;
    color: #fff;
    border: 1px solid #c41424;
    font-size: 18px;
    font-weight: normal;
    margin: 20px;
    padding: 10px 60px;
}

h2 {
  font-family: 'Roboto', sans-serif;
  font-size: 26px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 1.5em;
}

h3 {
  font-family: 'Roboto', sans-serif;
  font-size: 30px;
  margin-bottom: .5em;
  margin-top: .75em;
}

h3 span {
  text-transform: uppercase;
  padding: 4px 15px;
  display: inline-block;
}

form {
  margin-bottom: 8em;
}

.forminstructions {
  font-size: 16px;
  text-align: center;
}


/* Check-all Button Group */

#checkall {
  text-align: center;
  margin: 40px 0;
}

.selectall {
  font-family: 'Roboto', sans-serif;
  text-shadow: none;
  margin: 10px 20px;
  padding: 10px 15px;
  font-size: 15px;
  width: 220px;
  max-width: 100%;
  display: inline-block;
  cursor: pointer;
  transition: color .3s;
}

.selectall::before {
  font-family: "Dragon Glyphs Display";
	white-space: pre-wrap;
}

#suball::before {
  content: "\ec02\0020";
}

#unsuball::before {
  content: "\ec01\0020";
}

.selectall:hover {
  background: #555;
  color: #fff;
  transition: color .3s;
}

/* Address Block */

div[id^="disp"][style=""],
div[id^="disp"][style="display: block;"] {
  display: inline !important;
}

input[type="text"], input[type="password"], input[type="email"], textarea, select {
  max-width: none;
}

@media only screen and (min-width: 768px) {
  .addresslabel {
    width: 50%;
    padding-left: 20px;
    margin-bottom: 20px;
    display: inline-block;
  }

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

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

@media only screen and (max-width: 767px) {
  .addresslabel {
    width: 100%;
    padding-left: 0px;
  }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
  .addresslabel .questionlabel {
    width: 100%;
  }

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

  #p13.addresslabel {
    display: block;
  }
}

@media only screen and (max-width: 479px) {
  .addresslabel {
    margin-bottom: 10px;
    width: 100%;
    display: block;
  }
  
  .addresslabel input,
  .addresslabel select {
    margin-bottom: 0px;
    width: 100%;
    display: block;
  }
}

.addresslabel {
  box-sizing: border-box;
  display: inline-block;
}

.addresslabel input,
.addresslabel select {
  box-sizing: border-box;
  display: inline-block;
}


/* Newsletters & Deployments */

div[id^="pp"],
div[id^="pd"] {
  margin-bottom: 1em;
  vertical-align: top;
}

@media only screen and (min-width: 768px) {
  div[id^="pp"],
  div[id^="pd"] {
    box-sizing: border-box;
    display: inline-block;
    width: 33.333%;
  }
}

div[id^="pp"] .questionlabel,
div[id^="pd"] .questionlabel {
  width: calc(100% - 24px);
  display: inline-block;
}

div[id^="pp"] input,
div[id^="pd"] input {
  vertical-align: top;
}


/* Demographics */

.spanc283 { /*hide single select for unsub all */
  display: none;
}

.spanc1130 { /*hide single select for unsub pub */
  display: none;
}


/* Submit Button */

#custombtn {
  text-align: center;
  padding: 40px 0px;
}

#custombtn input[type="submit"] {
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: #fff;
  border: none;
  border-radius: 0px;
  padding: 5px 15px;
  text-shadow: none;
  background: #4b7897;
  margin: 0 auto;
  width: 100%;
  max-width: 400px;
  transition: background .3s;
}

#custombtn input[type="submit"]:hover {
  background: #ed1c24;
  transition: background .3s;
}

/* Fixed-Position Validation */

.highlight {
  color: red;
}

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

.validation ul li {
  color: #fff;
  display: block;
  margin-right: 0px;
  margin-bottom: 0px;
}

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

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

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



/* Newsletters & Deployments */

@media only screen and (min-width: 768px) {
  div[id^="pp"],
  div[id^="pd"] {
    width: 50%;
  }
}


/* Check-all Button Group */

#checkall {
  border: 1px solid black;
  background: #c41424;
}

.selectall {
  border: 1px solid black;
  background: #fff;
  color: #111;
}

.selectall:hover {
  background: #555;
  color: #fff;
}


/* Submit Button */

#custombtn input[type="submit"] {
  color: #fff;
  background: #4b7897;
}

#custombtn input[type="submit"]:hover {
  background: #ed1c24;
}