*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
html {
  overflow: hidden;
}
a{
  color: inherit;
  text-decoration: none;
}
a img {
  border: 0;
}
.group:after {
  content: "";
  display: table;
  clear: both;
}
html{
  background: transparent;
}
body{
  font: normal normal 400 100%/1.2;
  font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif;;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
.question-card{
  width: 100%;
}

/*Header*/
.question-header{
  margin: 0;
  padding: .625em;
  width: 100%;
  border-bottom: 1px solid rgb(219,219,219);
  text-align: left;
}
.owner-image{
  float: left;
  width: 3.75em;
  height: 3.75em;
  margin: 0 .75em 0 0;
  background-size: contain;
  background-repeat: no-repeat;
  border-radius: .25em;
  background-color: rgb(236,236,236);
  box-shadow: 0 0 0 2px rgb(236,236,236);
}
.owner-name{
  font-size: 1em;
  font-weight: 400;
  color: rgb(150,150,150);
  margin: .25em 0 0;
}
.question-text{
  font-size: 1.5em;
  font-weight: 400;
  color: rgb(50,50,50);
  line-height: 1.2;
  margin: 0 0 0 3em;
}

main{
  position: relative;
  border-bottom: 1px solid rgb(219,219,219);
  min-height: 16.25em;
}

/*Media*/
.media{
  width: 16.25em;
  height: 16.25em;
  float: left;
  margin: 0;
}
.media[data-media="image"]{
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.media[data-media="image"] .view-results{
  position: relative;
  top: 14.25em;
  text-align: center;
  display: block;
  width: 16.25em;
  padding: .5em 0 .25em;
  height: 2em;
  color: rgb(249,249,249);
  text-decoration: none;
  background: -moz-linear-gradient(bottom,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
  background: -webkit-linear-gradient(bottom,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
  background: -ms-linear-gradient(bottom,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
  background: linear-gradient(to top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */
}
.media[data-media="text"] .view-results{
  display: block;
  text-align: center;
  width: 15em;
  margin: 7em 0 0 .5em;
  color: rgb(179,179,179);
  background: rgb(238,238,238);
  height: 2.5em;
  padding: .6em 0 0;
  border-radius: 1.25em;
}

.stats{
  color: rgb(255,255,255);
  height: 16.25em;
  width: 16.25em;
  padding: 1px;
  display: table;
  height: 100%;
  -webkit-transition: opacity .4s ease;
  -moz-transition: opacity .4s ease;
  -ms-transition: opacity .4s ease;
  transition: opacity .4s ease;
}
.stats:hover{
  opacity: 0;
}
.stats p{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.stats var{
  display: block;
  font-size: 3.75em;
  font-style: normal; 
  font-weight: 700;
  line-height: 1;
}
.stats small{
  display: block;
  font-weight: 400;
  font-size: 1em;
  line-height: 1.2;
}
.stats small:first-of-type{
  margin: 0 0 1em;
}


/*Choices*/
.choices{
  padding: 0 .625em;
  margin: 0 0 0 16.25em;
  background: rgb(255,255,255);
  min-height: 16.25em;
  border-left: 1px solid rgb(219,219,219);
  border-top: 0px;
  text-align: center;
}
.choices::before{
  content: "";
  display: inline-block;
  min-height: 16.25em;
  vertical-align: middle;
  margin-right: -.25em;
  width: 0px;
}
.choices ul{
  list-style: none;
  margin: 0;
  padding: .625em 0;
  display: inline-block;
  vertical-align: middle;
  text-align: left;
  width: 98%;
}

/*Options - PreVote*/
.option{
  color: rgb(249,249,249);
  height: 2.25rem;
  font-size: 1.125em;
  padding: 0 .5em;
  line-height: 1.8;
  margin: 0 0 .825rem 0;
  border-radius: .25rem;
  box-shadow: inset 0px -.2em 0px 0px rgba(0,0,0,.2), inset 0px 0px 0px 100px rgba(0,0,0,0), 0px .2em 0px 0px rgba(0,0,0,.2);
  cursor: pointer;
}
.option:hover{
  box-shadow: inset 0px -.2em 0px 0px rgba(0,0,0,.25), inset 0px 0px 0px 100px rgba(0,0,0,.1), 0px .2em 0px 0px rgba(0,0,0,.2);
}
.option:active{
  -webkit-transform: translate(0,2px);
  -moz-transform: translate(0,2px);
  -ms-transform: translate(0,2px);
  -o-transform: translate(0,2px);
  transform: translate(0,2px);
  box-shadow: inset 0px -.1em 0px 0px rgba(0,0,0,.25), inset 0px 0px 0px 100px rgba(0,0,0,.1), 0px .1em 0px 0px rgba(0,0,0,.2);
}
.option:last-of-type{
  margin: 0;
}

/*Results - PostVote*/
.result{
  margin: 0 0 .825rem 0;
  height: 2.25em;
  color: rgb(151,151,151);
  cursor: pointer;
}
.highlighted{
  color: rgb(34,34,34);
}
.result:last-of-type{
  margin: 0;
}
.result span, .result var{
  font-size: 1.125em;
  font-style: normal;
  margin: .125rem 0;
}
.result span{
  float: left;
}
.result var{
  float: right;
}
.bar-back{
  height: .625em;
  width: 100%;
  background: rgb(219,219,219);
  position: relative;
  clear: both;
}
.bar{
  left: 0;
  top: 0;
  height: .625em;
  background: rgb(177,177,177);
}

/*Text Specific Styles*/
.text-totals{
  display: none;
  padding: .625em;
}
.text-totals .view-results{
  display: block;
  text-align: center;
  width: 100%;
  color: rgb(179,179,179);
  background: rgb(238,238,238);
  height: 2.5em;
  padding: .6em 0 0;
  border-radius: 1.25em;
}
.text-totals span{
  display: block;
  text-align: center;
  width: 100%;
  color: rgb(179,179,179);
  font-size: 3em;
  line-height: .85;
  padding: 0;
  border-radius: 1.25em;
}
/*Footer*/
.colophon{
  color: rgb(179,179,179);
  padding-top: 1px;
  position: relative;
  float: left;
  height: 3.75em;
}
.wendell{
  display: block;
  position: absolute;
  bottom: 0px;
  left: .5em;
  max-width: 3em;
}
.colophon p{
  font-size: .75em;
  margin: 2em 0 2em 5.5em;
}

/*Social*/
.social-menu{
  float: right;
  margin: 1.125em .25em 1.5em;
  border-top: 0px;
}
.social-cta{
  font-family: "ff-din-web";
  font-size: 1em;
  color: rgb(177,177,177);
  text-transform: uppercase;
  letter-spacing: .1em;
  text-align: center;
  display: none;
  font-weight: 400;
  margin: 0 0 1em;
}
.social-button{
  color: #fff;
  background: #3990e5;
  font-weight: 600;
  letter-spacing: .1em;
  padding: .5em 1em .625em;
  margin: 0 .25em 0 0;
  border-radius: 5px;
  cursor: pointer;
  text-transform: uppercase;
}
.social-button:hover{
  background: #369; 
}
.social-button:active{
  -webkit-transform: translate(0,2px); 
  -moz-transform: translate(0,2px); 
  -ms-transform: translate(0,2px); 
  -o-transform: translate(0,2px); 
  transform: translate(0,2px); 
  box-shadow: inset 0px -.1em 0px 0px rgba(0,0,0,.25), inset 0px 0px 0px 100px rgba(0,0,0,.1), 0px .1em 0px 0px rgba(0,0,0,.2);
}
.social-button .icon{
  display: inline-block;
  height: 1em;
  margin-bottom: -.125em; 
}
.facebook{
  background: rgb(53,101,160);
}
.twitter{
  background: rgb(44,170,225);
}

/*Privacy Screen*/
.private{
  text-align: center;
  padding-bottom: 10px;
}
.private::before{
  content: "";
  display: inline-block;
  
  margin-right: -.25em;
  width: 0px;
}
.private p{
  -webkit-margin-before: 0em;
  color: #666666;
  font-size: 1.25em;
  display: inline-block;
  margin: 1em;
}

.private p a{
  color: #3990e5;
}

a.quizReturnLink {
  text-transform: uppercase;
  color: #3990e5;
}

.modal{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.9);
  text-align: center;
  min-height: 154px;
}
#close{
  position: absolute;
  top: .5em;
  right: .5em;
  opacity: .6;
  cursor: pointer;
}
.modal p:first-of-type{
  color: rgb(151,151,151);
  font-size: 1.25em;
}
.modal p{
  color: rgb(151,151,151);
  font-size: 1em;
}

/*************
 Media Queries
 *************/

/*Large*/
@media(min-width: 540px){
  .large{
    display: block;
  }
}

/*Medium*/
@media(max-width: 480px){
  .question-header{
    text-align: center;
  }
  .owner-image{
    float: none;
    margin: 0 auto .75em;
  }
  .question-text{
    margin: 0;
  }
  main{
    min-height: 0px;
  }
  .choices{
    margin: 0;
    min-height: 0px;
    border-left: none;
    border-top: 0px;
    padding: 0 .625em .25em;
  }
  .choices::before{
    display: none;
  }
  .choices ul{
    display: block;
    width: 100%;
  }
  .media[data-media="text"]{
    display: none;
  }
  .media[data-media="image"]{
    float: none;
    border: none;
    margin: 0 auto;
  }
  .text-totals{
    display: block;
  }
  .colophon{
    width: 100%;
    text-align: center;
    margin: 1em 0 .75em;
  }
  .social-cta{
    display: block;
    width: 100%;
    text-align: center;
  }
  .social-menu{
    display: block;
    /*width: 100%;*/
    width: auto;
    float: none;
    text-align: center;
    margin: 0 1em .5em;
    padding: .5em 0 0;
    border-top: 0px;
  }
  .social-button{
    float: none;
    display: inline-block;
    text-align: center;
    font-size: 1em;
  }
  .colophon{
    clear: both;
    margin: 0 auto;
    width: intrinsic;
    width: -moz-max-content;
    float: none;
  }
  .colophon p{
    font-size: 1em;
    text-align: left;
    margin: 1em 0 2em 4.5em;
  }
}

/*Small*/
@media(max-width: 320px){
  html{
    font-size: 14px;
  }
}
@media(max-width: 540px){
  html{
    font-size: 14px;
  }
}
/*Text Increases*/
@media(min-width: 640px){
  html{
    font-size: 18px;
  }
}

input[type=submit] {
  color: rgb(249,249,249);
  background-color: #336699;
  border: 0;
  font-weight: 600;
  font-size: 1em;
  letter-spacing: .1em;
  padding: .5em 1em .625em;
  margin: 0 .25em 1em 0;
  border-radius: .25rem;
  box-shadow: inset 0px -.2em 0px 0px rgba(0,0,0,.2), inset 0px 0px 0px 100px rgba(0,0,0,0), 0px .2em 0px 0px rgba(0,0,0,.2);
  cursor: pointer;
  text-transform: uppercase;
}

input:hover {
  color: #3990e5;
}

.poll-select {
  position: relative;
  display:block;
  margin-top:0.5em;
  padding:0;
  background: rgb(249,249,249);
  border: 1px solid rgb(219,219,219);
  border-radius: 3px;
  font-weight: normal;
}

.poll-select select {
  width:100%;
  margin:0;
  background:none;
  border: 1px solid transparent;
  outline: none;
  /* Prefixed box-sizing rules necessary for older browsers */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  /* Remove select styling */
  appearance: none;
  -webkit-appearance: none;
  /* Font size must the 16px or larger to prevent iOS page zoom on focus */
  font:700 1em "ff-din-web";
  /* General select styles: change as needed */
  padding: .6em 1.9em .5em .8em;
  line-height: 1.3;
}

.poll-select::after {
  content: "";
  position: absolute;
  width: 13px;
  height: 12px;
  top: 50%;
  right: 1em;
  margin-top:-5px;
  background-image: url(../img/down-notch.png);
  background-repeat: no-repeat;
  background-size: 100%;
  z-index: 2;
  /* This hack make the select behind the arrow clickable in some browsers */
  pointer-events:none;
}


/* Hover style */
.poll-select:hover {
  border: 1px solid @gray;
}

/* Focus style */
.poll-select select:focus {
  outline:none;
  box-shadow: 0 0 1px 3px rgba(180,222,250, 1);
  background-color:transparent;
  color: #222;
  border:1px solid @gray;
}

/* Set options to normal weight */
.poll-select option {
  font-weight:normal;
}

/* OPERA - Pre-Blink nix the custom arrow, go with a native select button to keep it simple. Targeted via this hack http://browserhacks.com/#hack-a3f166304aafed524566bc6814e1d5c7 */
x:-o-prefocus, .poll-select::after {
  display:none;
}    

 /* IE 10/11+ - This hides native dropdown button arrow so it will have the custom appearance, IE 9 and earlier get a native select - targeting media query hack via http://browserhacks.com/#hack-28f493d247a12ab654f6c3637f6978d5 - looking for better ways to achieve this targeting */
/* The second rule removes the odd blue bg color behind the text in the select button in IE 10/11 and sets the text color to match the focus style's - fix via http://stackoverflow.com/questions/17553300/change-ie-background-color-on-unopened-focused-select-box */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
  .poll-select select::-ms-expand {
    display: none;
  }
  .poll-select select:focus::-ms-value {
    background: transparent;
    color: #222;
  }
}  

/* FIREFOX won't let us hide the native select arrow, so we have to make it wider than needed and clip it via overflow on the parent container. The percentage width is a fallback since FF 4+ supports calc() so we can just add a fixed amount of extra width to push the native arrow out of view. We're applying this hack across all FF versions because all the previous hacks were too fragile and complex. You might want to consider not using this hack and using the native select arrow in FF. Note this makes the menus wider than the select button because they display at the specified width and aren't clipped. Targeting hack via http://browserhacks.com/#hack-758bff81c5c32351b02e10480b5ed48e */
/* Show only the native arrow */
@-moz-document url-prefix() { 
  .poll-select {
    overflow: hidden;
  }
  .poll-select select {
    width: 120%;
    width: -moz-calc(100% + 3em);
    width: calc(100% + em);
  }
  
}

/* Firefox focus has odd artifacts around the text, this kills that. See https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-focusring */
.poll-select select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}

#dropdown-form {
  display: inline-block;
  vertical-align: middle;
  width: 90%;
}

#dropdown-form .poll-select {
  margin-bottom: 1em;
}