@font-face { font-family:"Ubuntu"; font-style:normal; font-weight:normal; src:url("/css/fonts/Ubuntu.woff") format('woff'); }

html, body, div, span, h1, h2, h3, p, a, em, img, strong, b, u, i, form, label, table, tr, th, td { margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline; }
body { line-height:1; }
table { border-collapse:collapse; border-spacing:0; }
input:focus, textarea { outline:none !important; }

body { font-family:'Ubuntu',sans-serif; font-size:16px; color:#666666; height:100%; background-color:#DDD; padding:0; margin:0 10%; line-height:1.8em; }
b, strong { font-weight:bold; }
table { margin:auto; }
  table tr td { vertical-align:middle; padding:5px; }
i, em, .italic { font-style:italic; }
img { vertical-align:middle; }
.textRight { text-align:right; }
.textCenter { text-align:center; }
.clearfix:after { visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0; }

.stickybar { position:sticky; top:0; background-color:#2175B5; padding:15px; font-size:20px; color:#FFF; margin:0; }
.footerbar { background-color:#222; text-align:center; font-size:12px; color:#CCC; padding:10px 0; }
  .footerbar a { color:#CCC; text-decoration:none; }
    .footerbar a:hover { opacity:0.8; }
    .footerbar a.abandone { margin-right:50px; }
    .footerbar a.privacy { margin-right:50px; }
    .footerbar .privacynote { text-align:left; font-size:10px; line-height:1.1em; padding:0 15px; }
      .footerbar .privacynote br { display:none; }
      .privacynote b::after { content:": "; }

#container { min-height:400px; padding:15px 15px 50px; background-color:#FFFFFF; }
  h1 { font-size:28px; /* text-align:left; */ margin-bottom:25px; font-weight:bold; }
  h2 { font-size:20px; /* text-align:left; */ margin-bottom:25px; }
    h2 iframe { width:100%; max-width:560px; }
    h2 p { margin:0 0 20px 0; }
  input, select, textarea { font-size:18px; color:#666666; margin:5px 0; }
    input[type=text], input[type=email], select { padding:10px; border:1px solid #CCC; }
	textarea{ padding:10px; border:1px solid #CCC; }
  select { padding:8px; }
  div.buttons { text-align:; margin-top:40px; line-height:60px; }
    div.buttons input { padding:25px; border:0; width:350px; color:#DDDDDD; background:url(/img/webSurvey/gndButton.png) repeat-x; }
      div.buttons input.submit { background-color:#2175B5; }
      div.buttons input.abandon { background-color:#2175B5; }
        div.buttons input:hover { background-color:#F0BD16; color:#FFF; }
  .question { min-width:540px; margin:0 auto; text-align:; font-style:italic; line-height:1.4em; }
    .question .tip { font-style:italic; font-size:12px; color:#999999; line-height:1.3em; margin-top:5px; }
    .question .matrixScrollNote { display:none; text-align:center; font-size:12px; color:#333; }
    .question select { max-width:100%; }
    .question .choose { width:60%; max-width:400px; /* text-align:left; */ }
      .question .choose.vertical { width:100%; text-align:; max-width:none; }
      .question .choose .option { display:block; border:1px solid #CCC; padding:3px; margin:5px 0; cursor:pointer; }
        .question .choose.vertical .option { display:inline-block; padding:5px; margin:3px; width:min-content; }
	  		.question .choose .option:hover { border:1px solid #AAA; background-color:#E0E0E0;}
        .question .choose .option input[type=radio] { vertical-align:text-top; }
        .question .choose .option input[type=checkbox] { vertical-align:text-bottom; margin-right:5px; }
          .question .choose.bubbles input[type=radio] { display:none; }
          .question .choose.bubbles input[type=checkbox] { display:none; }
          .question .choose.bubbles .option { display:inline-block; padding-left:15px; padding-right:15px; border-radius:50px; }
            .question .choose.bubbles input[type=radio]:checked+label { background-color:rgb(165, 214, 167) !important; }
            .question .choose.bubbles input[type=checkbox]:checked+label { background-color:rgb(165, 214, 167) !important; }
    .question .option.smile { background-color:#FFF; display:inline-block; padding:5px; margin:3px; cursor:pointer; border:5px solid #FFF; text-align:center; }
      .question .option.smile:active { border-color:#CCC !important; }
    .question .matrixContainer { overflow-x:scroll; }
    .question .matrix { margin:auto; text-align:center; }
      .question .matrix tr:first-of-type th { text-align:center; }
      .question .matrix th { text-align:left; font-style:normal; padding:10px; font-weight:bold; background-color:#CCC; border:2px solid white; }
      .question .matrix td { padding:5px; background-color:#EEE; border:2px solid white; }
        .question .matrix td input { display:block; width:100%;}
  .error { text-align:left; font-style:italic; font-size:12px; color:#C00; }
  .endMessage { margin:0 auto; text-align:; line-height:1.4em; }
    .endMessage p { margin:0 0 20px 0; }

table.radios { }
  table.radios tr { }
    table.radios tr:nth-of-type(even) { background-color:#EEE; }
    table.radios tr th { padding:10px; }
    table.radios tr td { padding:10px; }

@media only screen and (max-width:900px) {
  body { height:auto; background-color:#FFF; margin:0; }
  #container { display:block; height:auto; padding:10px 0 40px; margin:10px 5%; }
  input, select, textarea { font-size:16px; }
  textarea { width:80%; }
  div.buttons input { width:100%; max-width:300px; }
  .question { width:100%; min-width:auto; margin:0; }
    .question .tip { font-style:normal; font-size:14px; color:#666; }
    .question .choose { width:100%; max-width:none; text-align:left; font-size:20px; }
      .question .choose .option { padding:10px; margin:5px 0; }
        .question .choose .option input[type=radio] { vertical-align:text-bottom; }
  .error { font-style:normal; }
  .footerbar { width:100%; }
}

@media only screen and (max-width:767px) {
  .footerbar a.abandone { margin-right:10px; }
  .footerbar a.privacy { margin-right:10px; }
  #container h2 img { width:90%; }
}

@media only screen and (max-width:550px) {
  .question .matrixScrollNote { display:block; }
}