@charset "UTF-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

@font-face {
  font-family: 'proxima_nova_rg';
  src: url("fonts/proximanova_regular_macroman/ProximaNova-Reg-webfont.eot");
  src: url("fonts/proximanova_regular_macroman/ProximaNova-Reg-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/proximanova_regular_macroman/ProximaNova-Reg-webfont.woff") format("woff"), url("fonts/proximanova_regular_macroman/ProximaNova-Reg-webfont.ttf") format("truetype"), url("fonts/proximanova_regular_macroman/ProximaNova-Reg-webfont.svg#proxima_nova_rgregular") format("svg");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'proxima_nova_rg';
  src: url("fonts/proximanova_bold_macroman/ProximaNova-Bold-webfont.eot");
  src: url("fonts/proximanova_bold_macroman/ProximaNova-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/proximanova_bold_macroman/ProximaNova-Bold-webfont.woff") format("woff"), url("fonts/proximanova_bold_macroman/ProximaNova-Bold-webfont.ttf") format("truetype"), url("fonts/proximanova_bold_macroman/ProximaNova-Bold-webfont.svg#proxima_nova_rgbold") format("svg");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'proxima_nova_rg';
  src: url("fonts/proximanova_semibold_macroman/ProximaNova-Sbold-webfont.eot");
  src: url("fonts/proximanova_semibold_macroman/ProximaNova-Sbold-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/proximanova_semibold_macroman/ProximaNova-Sbold-webfont.woff") format("woff"), url("fonts/proximanova_semibold_macroman/ProximaNova-Sbold-webfont.ttf") format("truetype"), url("fonts/proximanova_semibold_macroman/ProximaNova-Sbold-webfont.svg#proxima_nova_ltsemibold") format("svg");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'proxima_nova_cond';
  src: url("fonts/proximanovacondensed_semibold_macroman/ProximaNovaCond-Sbold-webfont.eot");
  src: url("fonts/proximanovacondensed_semibold_macroman/ProximaNovaCond-Sbold-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/proximanovacondensed_semibold_macroman/ProximaNovaCond-Sbold-webfont.woff") format("woff"), url("fonts/proximanovacondensed_semibold_macroman/ProximaNovaCond-Sbold-webfont.ttf") format("truetype"), url("fonts/proximanovacondensed_semibold_macroman/ProximaNovaCond-Sbold-webfont.svg#ProximaNovaCnLtSemibold") format("svg");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'proxima_nova_rg';
  src: url("fonts/proximanova_semibolditalic_macroman/ProximaNova-SboldIt-webfont.eot");
  src: url("fonts/proximanova_semibolditalic_macroman/ProximaNova-SboldIt-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/proximanova_semibolditalic_macroman/ProximaNova-SboldIt-webfont.woff") format("woff"), url("fonts/proximanova_semibolditalic_macroman/ProximaNova-SboldIt-webfont.ttf") format("truetype"), url("fonts/proximanova_semibolditalic_macroman/ProximaNova-SboldIt-webfont.svg#proxima_novasemibold_italic") format("svg");
  font-weight: 600;
  font-style: italic;
}
.devTimeStamp {
  font-family: Arial;
  position: absolute;
  font-size: 12px;
  top: 1px;
  right: 10px;
  color: #929292;
}

/** UPGRADE NOTICE **/
.upgrade {
  text-align: center;
  width: 100%;
}
.upgrade .upHead {
  margin-top: 80px;
  padding-top: 40px;
  font-size: 25px;
  color: #858889;
  width: 100%;
  line-height: 34px;
}
.upgrade .upHead em {
  font-style: normal;
  color: #C06637;
}
.upgrade .upSubhead {
  font-size: 20px;
  color: #888;
  width: 100%;
  padding-top: 57px;
  padding-bottom: 9px;
}
.upgrade .links {
  margin: 0 auto 0 auto;
}
.upgrade .links a {
  display: inline-block;
}
.upgrade .links .ff {
  background: url(../img/upgrade/firefox.jpg);
  width: 94px;
  height: 88px;
}
.upgrade .links .chrome {
  background: url(../img/upgrade/chrome.jpg);
  width: 126px;
  height: 88px;
}
.upgrade .links .ie {
  background: url(../img/upgrade/ie.jpg);
  width: 146px;
  height: 88px;
}
.upgrade .links .safari {
  background: url(../img/upgrade/safari.jpg);
  width: 102px;
  height: 88px;
}
.upgrade .upCaption {
  color: #999;
  font-size: 11px;
  padding-top: 10px;
}

.clickable:not([disabled]), .landing-view .landing-control-button:not([disabled]), .rank-yourself .control-button:not([disabled]), .main-question .control-button:not([disabled]), .summary-view .control-button:not([disabled]), .main-question .did-you-know:not([disabled]) {
  cursor: pointer;
}
.clickable:disabled, .landing-view .landing-control-button:disabled, .rank-yourself .control-button:disabled, .main-question .control-button:disabled, .summary-view .control-button:disabled, .main-question .did-you-know:disabled {
  cursor: auto;
}

.landing-view .h1, .rank-yourself .h1, .main-question .progressx, .summary-view .h1 {
  font-family: "proxima_nova_rg";
  font-weight: 600;
  color: #6a96d2;
  text-transform: uppercase;
  font-kerning: normal;
  -webkit-font-kerning: normal;
  -moz-font-kerning: normal;
  letter-spacing: 1px;
}

.landing-view .h2, .rank-yourself .h2, .main-question .question-text, .summary-view .h2 {
  color: #e4d138;
  font-family: "proxima_nova_cond";
  font-weight: 600;
  line-height: 100%;
  text-transform: uppercase;
  font-kerning: normal;
  -webkit-font-kerning: normal;
  -moz-font-kerning: normal;
  letter-spacing: 1px;
}

.landing-view .p, .rank-yourself .p, .main-question .desktop-main-question-explanation, .summary-view .p, .mobile .main-question .mobile-main-question-explanation {
  color: #d4e6ea;
  font-family: "proxima_nova_rg";
  font-weight: 400;
}

.landing-view .landing-control-button, .rank-yourself .control-button, .main-question .control-button, .summary-view .control-button {
  color: #081b26;
  font-family: "proxima_nova_rg";
  font-weight: 600;
  background-color: #e4d138;
  text-transform: uppercase;
  border: none;
  letter-spacing: 2px;
  -moz-transition: background-color 0.2s ease-in-out;
  -o-transition: background-color 0.2s ease-in-out;
  -webkit-transition: background-color 0.2s ease-in-out;
  transition: background-color 0.2s ease-in-out;
  cursor: pointer;
}
.landing-view .landing-control-button:disabled, .rank-yourself .control-button:disabled, .main-question .control-button:disabled, .summary-view .control-button:disabled {
  background: #4e643e;
  color: #062947;
}
.landing-view .landing-control-button:hover:enabled, .rank-yourself .control-button:hover:enabled, .main-question .control-button:hover:enabled, .summary-view .control-button:hover:enabled {
  background: #d0b900;
}

.main-question .person-icon, .change-answer .person-icon {
  background: url(../img/person-sm.png) no-repeat center center;
  background-size: contain;
  min-width: 56px;
  min-height: 56px;
}

.main-question .answer-checkbox, .change-answer .answer-checkbox {
  border-radius: 50%;
  background: #e4d138;
}

.about-popup-window .logo, .change-answer .question-text, body:not(.mobile) .question-first,
body:not(.mobile) .rank-yourself-first,
body:not(.mobile) .summary-first, body:not(.mobile) .rank-yourself-second,
body:not(.mobile) .summary-second,
body:not(.mobile) #summary-second, body:not(.mobile) .question-second, body:not(.mobile) .main-question .question-first, body:not(.mobile) .main-question .answer-text, body:not(.mobile) .rank-yourself .rank-yourself-first, body:not(.mobile) .summary-view .summary-second, .mobile #container, .mobile .change-answer .footer {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body:not(.mobile) .main-question .answer-text:before, body:not(.mobile) .rank-yourself-second .number-tip:before {
  content: '';
  display: block;
  border: 8px solid transparent;
  border-right-color: #90A7B4;
  position: absolute;
  top: 11px;
  left: -16px;
}

.explanation-popup-window, .mobile .main-question .mobile-main-question-overlay {
  display: none;
  position: absolute;
  top: 50px;
  left: 15px;
  right: 15px;
  background: #ffffff;
  z-index: 30;
  border-radius: 2px;
}
.explanation-popup-window .explanation-popup-window-close, .mobile .main-question .mobile-main-question-overlay .explanation-popup-window-close {
  width: 15px;
  height: 15px;
  margin-top: 10px;
  margin-right: 10px;
  float: right;
  color: #e4d138;
  background: url(../img/close-results.png) no-repeat center center;
  background-size: contain;
  background-size: contain;
}
.explanation-popup-window emph, .mobile .main-question .mobile-main-question-overlay emph {
  font-family: "proxima_nova_rg";
  font-style: italic;
  font-weight: 700;
  color: #113850;
}
.explanation-popup-window .big-light-bulb, .mobile .main-question .mobile-main-question-overlay .big-light-bulb {
  background: radial-gradient(closest-side at center, #eaea9c 0%, rgba(234, 234, 156, 0.3) 40%, #ffffff 100%);
  padding-top: 5px;
  width: 60px;
  height: 60px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.explanation-popup-window .big-light-bulb div, .mobile .main-question .mobile-main-question-overlay .big-light-bulb div {
  background: url(../img/lightbulb_20x38.png) no-repeat center center;
  background-size: contain;
  min-width: 20px;
  min-height: 38px;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  top: 11px;
  left: 20px;
}
.explanation-popup-window div:nth-child(4), .mobile .main-question .mobile-main-question-overlay div:nth-child(4) {
  padding-top: 15px;
  font-family: "proxima_nova_rg";
  font-weight: 700;
  font-size: 18px;
  color: #113850;
  text-align: center;
}
.explanation-popup-window div:nth-child(5), .mobile .main-question .mobile-main-question-overlay div:nth-child(5) {
  padding-top: 30px;
  font-family: "proxima_nova_rg";
  font-size: 14px;
  color: #113850;
  padding-left: 45px;
  padding-right: 45px;
  padding-bottom: 50px;
  line-height: 140%;
}

html, body {
  height: 100%;
  background-color: #123751;
}

.main-question .small-light-bulb, .header .small-light-bulb {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 30px;
}
.main-question .small-light-bulb img, .header .small-light-bulb img {
  display: block;
  position: relative;
  top: 8px;
  left: 8px;
}

.glow {
  background: radial-gradient(closest-side at center, rgba(230, 255, 200, 0.5) 0%, rgba(230, 255, 200, 0.15) 60%, rgba(230, 255, 200, 0) 100%);
}

.easel-DOM-element {
  top: 0;
  left: 0;
}

.clearer {
  clear: both;
}

.landing-view {
  position: relative;
  height: 100%;
}
.landing-view .landing-highlight {
  font-style: italic;
  font-family: "proxima_nova_rg";
  font-weight: 600;
  color: #6a96d2;
}

.rank-yourself-second .stage {
  position: relative;
}
.rank-yourself-second .number-tip {
  position: relative;
  font-family: "proxima_nova_rg";
  font-weight: 600;
}
.rank-yourself-second .mobile-rank-yourself-tooltip {
  background-color: #123751;
  font-size: 40px;
  font-weight: 600;
  color: #e5f5f6;
  width: 200px;
  text-align: left;
}

.main-question .main-radio-button-and-label {
  position: relative;
}
.main-question .main-radio-button-and-label:after {
  content: '';
  display: block;
  clear: both;
}
.main-question .did-you-know {
  font-family: "proxima_nova_rg";
  font-weight: 400;
  font-style: italic;
  color: #6a96d2;
}
.main-question .did-you-know .small-light-bulb {
  position: relative;
}
.main-question .did-you-know div {
  display: inline-block;
}
.main-question .answer-text {
  font-weight: 600;
  position: relative;
  font-family: "proxima_nova_rg";
  float: left;
}
.main-question .desktop-main-question-explanation {
  display: none;
}
.main-question .control-button {
  display: block;
  clear: both;
  letter-spacing: 0;
}
.main-question .person-icon-container {
  float: left;
  display: block;
}
.main-question .answer-checkbox {
  float: left;
}
.main-question .selected-checkbox {
  background: #e4d138 url("../img/lg-checkmark.png") no-repeat 70% 70%;
}
.main-question .answer-choices {
  float: left;
}

.change-radio-button-and-label {
  display: inline-block;
}

.summary-view {
  background-color: #123751;
  z-index: 10;
  position: relative;
}
.summary-view .summary-second {
  position: relative;
}
.summary-view .summary-second .labels {
  width: 82%;
  margin: 25px auto 0 auto;
  height: 20px;
}
.summary-view .summary-second .labels:after {
  content: '';
  display: block;
  clear: both;
}
.summary-view .summary-second .heading {
  font-size: 14px;
  width: 100px;
}
.summary-view .summary-second .heading.leftLabel {
  float: left;
  margin-left: -50px;
}
.summary-view .summary-second .heading.rightLabel {
  float: right;
  margin-right: -50px;
}
.summary-view .summary-second .stage {
  max-width: 335px;
  margin: 0 auto;
  padding: 0 12px;
}
.summary-view .summary-second .stage #canvas {
  margin: 8px 0;
  width: 100%;
}
.summary-view .horizontal-line {
  display: block;
  height: 1px;
  border: 0;
  background: #1f4562;
}
.summary-view .heading {
  text-transform: uppercase;
  font-family: "proxima_nova_rg";
  font-weight: 600;
  color: white;
  text-align: center;
}
.summary-view quote {
  quotes: '“' '”';
}
.summary-view quote:before {
  content: open-quote;
}
.summary-view quote:after {
  content: close-quote;
}
.summary-view .comparison-string {
  font-style: italic;
  color: #e5f5f6;
}
.summary-view .horizontal-line {
  display: block;
  position: absolute;
}

.about-popup-window,
.about-popup-overlay,
.data-popup-window,
.data-popup-overlay {
  display: none;
}

.share-facebook {
  background: url(../img/facebook.png) no-repeat center center;
  background-size: contain;
  min-width: 7px;
  min-height: 15px;
  min-height: 12px;
}
.share-facebook:hover {
  background: url(../img/facebook-hover.png) no-repeat center center;
  background-size: contain;
  min-width: 7px;
  min-height: 15px;
  min-height: 12px;
}

.share-twitter {
  background: url(../img/twitter.png) no-repeat center center;
  background-size: contain;
  min-width: 16px;
  min-height: 14px;
  min-height: 12px;
}
.share-twitter:hover {
  background: url(../img/twitter-hover.png) no-repeat center center;
  background-size: contain;
  min-width: 16px;
  min-height: 14px;
  min-height: 12px;
}

.divider {
  background: url(../img/pipe.png) no-repeat center center;
  background-size: contain;
  min-width: 1px;
  min-height: 12px;
}

.about-project, .data-source {
  color: #e4d138;
  text-transform: uppercase;
  font-family: "proxima_nova_rg";
  font-size: 14px;
  text-decoration: none;
}
.about-project:hover, .data-source:hover {
  color: #d0b900;
}

.about-and-share {
  height: 35px;
  background: #0b2534;
  border-radius: 2px;
}
.about-and-share li {
  display: inline-block;
}
.about-and-share li:not(.divider) {
  padding-left: 10px;
  padding-right: 10px;
  line-height: 35px;
  font-size: 12px;
}

.about-popup-window, .data-popup-window {
  background: #0b2534;
  position: absolute;
  z-index: 40;
  color: #d4e6ea;
  font-family: "proxima_nova_rg";
}
.about-popup-window h3, .data-popup-window h3 {
  margin: 30px 0 0 0;
  font-size: 24px;
  color: #e4d138;
  text-align: center;
  clear: both;
}
.about-popup-window p, .data-popup-window p {
  padding: 30px;
  font-size: 14px;
  line-height: 18px;
}
.about-popup-window .close, .data-popup-window .close {
  width: 6px;
  height: 6px;
  padding: 15px;
  background: url(../img/close-about.png) no-repeat center center;
  background-size: contain;
  background-size: auto;
  float: right;
}

.about-popup-window .logo {
  margin: 0 auto;
  display: block;
}
.about-popup-window quote {
  quotes: '“' '”';
  color: #6a96d2;
  font-style: italic;
  font-weight: 600;
}
.about-popup-window quote:before {
  content: open-quote;
}
.about-popup-window quote:after {
  content: close-quote;
}

.about-popup-overlay, .data-popup-overlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(15, 51, 72, 0.5);
  z-index: 39;
}

.answers {
  margin-top: 27px;
}

.header {
  position: relative;
  padding: 0 8px 0 8px;
}
.header .why-significant {
  float: left;
}
.header .small-light-bulb {
  display: inline-block;
  float: left;
  margin-right: 5px;
}
.header .why-significant-text {
  font-family: "proxima_nova_rg";
  font-weight: 600;
  font-size: 12px;
  line-height: 23px;
  color: #6a96d2;
  display: inline-block;
  float: right;
  font-style: italic;
  -moz-transform: translateY(40%);
  -ms-transform: translateY(40%);
  -webkit-transform: translateY(40%);
  transform: translateY(40%);
  letter-spacing: 0.05em;
}
.header .close {
  float: right;
  position: relative;
  top: 9px;
}
.header .close div {
  display: inline-block;
}
.header .close div:first-child {
  color: #e4d138;
  font-family: "proxima_nova_rg";
  font-weight: 600;
  font-size: 11px;
  line-height: 23px;
  text-transform: uppercase;
}
.header .close div:last-child {
  background: url(../img/done.png) no-repeat center center;
  background-size: contain;
  width: 7px;
  height: 7px;
  padding-left: 5px;
  background-size: contain;
}

.dropdown-box {
  display: none;
  position: absolute;
  z-index: 30;
}
.dropdown-box .dropdown-box-element {
  background: #fcfcfc;
  text-transform: uppercase;
  font-family: "proxima_nova_rg";
  font-weight: 600;
  color: #113850;
}
.dropdown-box .dropdown-box-element:hover {
  background: #d4e6ea;
}

.change-answer {
  background: #14435f;
}
.change-answer .h-line-1 {
  display: block;
  height: 1px;
  background: #0f3449;
}
.change-answer .question-x-of-y {
  text-transform: uppercase;
  color: #e4d138;
  font-family: "proxima_nova_rg";
  font-weight: 600;
  display: inline-block;
  letter-spacing: 0.05em;
}
.change-answer .triangle {
  background: url(../img/triangle.png) no-repeat center center;
  background-size: contain;
  min-width: 11px;
  min-height: 8px;
}
.change-answer .triangle-container {
  display: inline-block;
  position: relative;
}
.change-answer .person-icon-container {
  float: left;
  display: block;
}
.change-answer .answer-checkbox {
  float: left;
}
.change-answer .answer-checkbox.selected-answer {
  opacity: 1;
  background: #e4d138 url("../img/sm-checkmark.png") no-repeat 70% 70%;
}
.change-answer .answer-checkbox:not(.selected-answer) {
  opacity: 0.2;
}
.change-answer .answer-text {
  color: #113850;
  font-family: "proxima_nova_rg";
  font-weight: 600;
  color: #e5f5f6;
  float: left;
}
.change-answer .answer-text span {
  vertical-align: middle;
  line-height: normal;
}
.change-answer .answer-text.selected-answer {
  opacity: 1;
}
.change-answer .answer-text:not(.selected-answer) {
  opacity: 0.2;
}
.change-answer .change-radio-button-and-label {
  position: relative;
  display: block;
}
.change-answer .change-radio-button-and-label:after {
  content: '';
  clear: both;
  display: block;
}
.change-answer .question-text {
  color: #e5f5f6;
  font-family: "proxima_nova_cond";
  font-weight: 600;
  text-transform: uppercase;
}
.change-answer .footer {
  width: auto;
  position: absolute;
}
.change-answer .footer .h-line-2 {
  display: block;
  height: 1px;
  background: #0f3449;
}
.change-answer .previous-question,
.change-answer .next-question {
  font-family: "proxima_nova_rg";
  font-weight: 600;
  color: #e4d138;
  white-space: nowrap;
  overflow: hidden;
  text-transform: uppercase;
}
.change-answer .previous-question div,
.change-answer .next-question div {
  display: inline-block;
}
.change-answer .previous-question {
  float: left;
}
.change-answer .previous-question div {
  float: right;
}
.change-answer .previous-question:before {
  content: '';
  display: block;
  float: left;
  margin-right: 6px;
  margin-left: -8px;
  border: 8px solid transparent;
  border-right-color: #e4d138;
}
.change-answer .next-question {
  float: right;
}
.change-answer .next-question div {
  float: left;
}
.change-answer .next-question:before {
  content: '';
  display: block;
  float: right;
  margin-left: 6px;
  margin-right: -8px;
  border: 8px solid transparent;
  border-left-color: #e4d138;
}

body:not(.mobile) .main-question .control-button, body:not(.mobile) .landing-view .landing-control-button, body:not(.mobile) .rank-yourself .control-button, body:not(.mobile) .summary-view .control-button {
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  padding: 12px 12px 10px 12px;
  font-size: 16px;
}

body:not(.mobile) .main-question .desktop-main-question-explanation, body:not(.mobile) .main-question .p, body:not(.mobile) .landing-view .p, body:not(.mobile) .rank-yourself .p {
  font-size: 15px;
  line-height: 20px;
  letter-spacing: 0.04em;
}
body:not(.mobile) .main-question .desktop-main-question-explanation p + p, body:not(.mobile) .main-question .p p + p, body:not(.mobile) .landing-view .p p + p, body:not(.mobile) .rank-yourself .p p + p {
  margin-top: 7px;
}

body:not(.mobile) {
  top: 0;
  left: 0;
}
body:not(.mobile) #container {
  height: 100%;
}
body:not(.mobile) .question-first,
body:not(.mobile) .rank-yourself-first,
body:not(.mobile) .summary-first {
  width: 50%;
  float: left;
}
body:not(.mobile) .rank-yourself-second,
body:not(.mobile) .summary-second,
body:not(.mobile) #summary-second {
  width: 50%;
  float: right;
}
body:not(.mobile) .question-second {
  width: 50%;
  float: right;
  position: relative;
  height: 100%;
  padding-top: 80px;
}
body:not(.mobile) .main-question {
  height: 100%;
  position: relative;
}
body:not(.mobile) .main-question .progressx {
  font-size: 19px;
  margin-bottom: 5px;
}
body:not(.mobile) .main-question .question-text {
  font-size: 40px;
}
body:not(.mobile) .main-question .control-button {
  position: absolute;
  bottom: 30px;
  right: 25px;
}
body:not(.mobile) .main-question .answer-choices {
  width: 275px;
  margin-left: 20px;
}
body:not(.mobile) .main-question .answer-checkbox {
  width: 37px;
  height: 37px;
}
body:not(.mobile) .main-question .main-radio-button-and-label {
  margin: 0 0 12px 0;
}
body:not(.mobile) .main-question .desktop-main-question-explanation {
  margin-top: 10px;
}
body:not(.mobile) .main-question .person-icon {
  margin-top: -9px;
}
body:not(.mobile) .main-question .stage {
  width: 352px;
  margin: 0 auto;
}
body:not(.mobile) .main-question .question-first {
  padding: 50px 0px 0px 25px;
}
body:not(.mobile) .main-question .answer-text {
  background-color: #e5f1f6;
  color: #113850;
  max-width: 217px;
  border-radius: 2px;
  padding: 12px 11px 10px 11px;
  font-size: 18px;
  margin-left: 21px;
}
@media (max-width: 760px) {
  body:not(.mobile) .main-question .stage {
    width: 290px;
  }
  body:not(.mobile) .main-question .answer-choices {
    width: 214px;
  }
  body:not(.mobile) .main-question .answer-text {
    max-width: 156px;
    font-size: 15px;
  }
}
body:not(.mobile) .did-you-know {
  font-size: 18px;
  margin-top: 7px;
}
body:not(.mobile) .did-you-know .small-light-bulb {
  top: 5px;
}
body:not(.mobile) .landing-view .landing-header {
  padding-top: 55px;
  padding-left: 25px;
  width: 50%;
}
body:not(.mobile) .landing-view .landing-header .h1 {
  margin-bottom: 3px;
  font-size: 19px;
}
body:not(.mobile) .landing-view .landing-header .h2 {
  font-size: 40px;
}
body:not(.mobile) .landing-view .p {
  padding-top: 35px;
  padding-left: 25px;
  width: 50%;
}
body:not(.mobile) .landing-view #canvas {
  position: absolute;
  top: 0;
  right: 0;
  max-width: 45%;
  margin-top: 30px;
}
body:not(.mobile) .landing-view .landing-control-button {
  font-size: 18px;
  margin-left: 25px;
  margin-top: 25px;
}
body:not(.mobile) .rank-yourself {
  height: 100%;
}
body:not(.mobile) .rank-yourself .h1 {
  font-size: 19px;
  margin-bottom: 5px;
}
body:not(.mobile) .rank-yourself .h2 {
  font-size: 40px;
}
body:not(.mobile) .rank-yourself .p {
  margin-top: 10px;
}
body:not(.mobile) .rank-yourself .rank-yourself-first {
  padding: 50px 0px 0px 25px;
}
body:not(.mobile) .rank-yourself .control-button {
  position: absolute;
  bottom: 25px;
  right: 20px;
}
body:not(.mobile) .rank-yourself-second {
  height: 100%;
  position: relative;
}
body:not(.mobile) .rank-yourself-second .stageWrap {
  width: 100%;
  margin-top: 40px;
}
body:not(.mobile) .rank-yourself-second .stage {
  width: 240px;
  display: block;
  margin: 0 auto;
}
body:not(.mobile) .rank-yourself-second .number-tip {
  background-color: #e5f1f6;
  color: #113850;
  font-size: 18px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  padding: 5px 10px;
  border-radius: 2px;
}
body:not(.mobile) .summary-view {
  height: 100%;
}
body:not(.mobile) .summary-view .h1 {
  font-size: 24px;
  padding-top: 20px;
  padding-left: 20px;
}
body:not(.mobile) .summary-view .h2 {
  font-size: 40px;
  padding-top: 20px;
  padding-left: 20px;
}
body:not(.mobile) .summary-view .summary-second {
  padding: 0 8px;
  height: 100%;
}
body:not(.mobile) .summary-view .summary-second .horizontal-line {
  display: none;
}
body:not(.mobile) .summary-view .horizontal-line {
  margin-left: 20px;
  width: 95%;
  top: 45px;
}
body:not(.mobile) .summary-view .p {
  padding-left: 20px;
}
body:not(.mobile) .summary-view .p p:first-child {
  padding-top: 20px;
  font-size: 15px;
  line-height: 20px;
  letter-space: .04em;
}
body:not(.mobile) .summary-view .p p:last-child {
  margin-top: 20px;
  font-size: 12px;
  line-height: 15px;
  letter-spacing: .05em;
  color: #6A90B9;
}
body:not(.mobile) .summary-view .control-button {
  font-size: 18px;
  margin-left: 20px;
  margin-top: 20px;
}
body:not(.mobile) .dropdown-box {
  top: 69px;
  bottom: 0;
  left: 33px;
  height: 414px;
}
body:not(.mobile) .dropdown-box div:first-child {
  width: 0px;
  height: 0px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 8px solid #fcfcfc;
  margin-left: 169px;
}
body:not(.mobile) .dropdown-box .dropdown-box-element {
  height: 29px;
  font-size: 12px;
  padding: 0 15px;
  line-height: 29px;
  letter-spacing: 0.045em;
}
body:not(.mobile) .change-answer {
  z-index: 20;
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  right: 50%;
}
body:not(.mobile) .change-answer .h-line-1 {
  margin-top: 5px;
  margin-bottom: 20px;
}
body:not(.mobile) .change-answer .question-x-of-y {
  font-size: 18px;
  min-width: 162px;
  margin-left: 25px;
}
body:not(.mobile) .change-answer .triangle {
  position: absolute;
  top: 0;
}
body:not(.mobile) .change-answer .triangle-container {
  width: 13px;
  height: 12px;
}
body:not(.mobile) .change-answer .answers {
  margin-top: 25px;
}
body:not(.mobile) .change-answer .person-icon-container {
  padding-left: 25px;
}
body:not(.mobile) .change-answer .answer-checkbox {
  width: 30px;
  height: 30px;
}
body:not(.mobile) .change-answer .answer-choices {
  width: 70%;
  float: right;
}
body:not(.mobile) .change-answer .answer-text {
  font-size: 16px;
  line-height: 30px;
  margin-left: 14px;
}
body:not(.mobile) .change-answer .change-radio-button-and-label {
  margin-top: 5px;
  margin-bottom: 15px;
}
body:not(.mobile) .change-answer .question-text {
  line-height: 100%;
  font-size: 26px;
  padding: 0 25px;
  padding-top: 5px;
}
body:not(.mobile) .change-answer .footer {
  bottom: 10px;
  left: 8px;
  right: 8px;
}
@media (max-width: 800px) {
  body:not(.mobile) .change-answer .footer {
    font-size: 14px;
    line-height: 16px;
  }
  body:not(.mobile) .change-answer .footer .qNum {
    display: none;
  }
}
body:not(.mobile) .change-answer .h-line-2 {
  margin-bottom: 10px;
}
body:not(.mobile) .change-answer .previous-question,
body:not(.mobile) .change-answer .next-question {
  /* div:first-child {
      height: $arrow-div-height;
      width: $arrow-div-width;
      margin-right: 5px;
  } */
}
body:not(.mobile) .change-answer .previous-question div,
body:not(.mobile) .change-answer .next-question div {
  font-size: 11px;
  letter-spacing: .04em;
}
body:not(.mobile) .about-popup-window {
  margin-left: -256.5px;
  top: 25px;
  left: 50%;
  width: 513px;
  padding-bottom: 28px;
}
body:not(.mobile) .about-popup-window .logo {
  margin: 35px auto 0 auto;
  width: 455px;
  height: 155px;
  clear: both;
}
body:not(.mobile) .about-popup-window .copy {
  padding-top: 30px;
  padding-left: 30px;
  padding-right: 30px;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: 0.04em;
}
body:not(.mobile) .about-and-share {
  position: absolute;
  bottom: 0;
  right: 20px;
}
body:not(.mobile) .data-source, body:not(.mobile) .data-source + .divider {
  display: none;
}

/*
.mobile {

    #container {
        background: $blue-background;
    }

    .question-first,
    .rank-yourself-first {
        clear: both;
    }
    .question-second,
    .rank-yourself-second {
        clear: both;
        overflow: auto;
    }

    .control-button {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        width: 500px;
    }

    .landing-view {

        #canvas {
            position: static;
            width: 100%;

            .p {
                width: 100%
            }
        }


        .landing-header {
            padding-top: 5px;
            padding-left: 5px;
            

            .h1 {
                margin-bottom: 3px;
            }


        }
    }

    .answer-choices {
        padding-top: 20px;
    }

    .person-icon {
        margin-top: 20px;
    }

    .main-question {
        position: static;
    }

    .rank-yourself {
        height: auto;
        .control-button {
            bottom: 20px;
        }
    }

    .rank-yourself-second {
        height: auto;
    }
}

.mobile-main-question-overlay {
    position: absolute;
    top: 100px;
    bottom: 100px;
    left: 20px;
    right: 20px;
    background: $white-background;
    width: 90%;
    height: 60%;
    z-index: 20;
    float: left;
}

.mobile-main-question-explanation {
    font-family: $proxima-nova;
    font-size: 25px;
    font-weight: $semibold-weight;
    color: $blue-text;
    padding-left: 60px;
    padding-right: 60px;
}
.mobile-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: $mobile-overlay;
    display: none;
    z-index: 20;
}

.mobile-close-overlay {
    background: $mobile-overlay;
    color: $yellow;
    font-family: Arial;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    line-height: 30px;
    float: right;
    text-align: center;
    span {
        vertical-align: middle;
        line-height: normal;
        display: inline-block;
    }
}

.mobile-overlay-lightbulb {
    content: url('../img/lightbulb_13x23.png');
    margin: 0 auto;
}
*/
.mobile .landing-view .landing-header .h1, .mobile .rank-yourself .h1 {
  margin-bottom: 5px;
  font-size: 16px;
}
@media (max-width: 427px) {
  .mobile .landing-view .landing-header .h1, .mobile .rank-yourself .h1 {
    margin-bottom: 4px;
    font-size: 14px;
  }
}

.mobile .main-question .question-text, .mobile .landing-view .landing-header .h2, .mobile .rank-yourself .h2 {
  margin-bottom: 4px;
  font-size: 26px;
  line-height: 33px;
}
@media (max-width: 427px) {
  .mobile .main-question .question-text, .mobile .landing-view .landing-header .h2, .mobile .rank-yourself .h2 {
    margin-bottom: 3px;
    font-size: 22px;
    line-height: 28px;
  }
}

.mobile .main-question .control-button, .mobile .landing-view .landing-control-button, .mobile .rank-yourself .control-button, .mobile .summary-view .control-button {
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  padding: 9px 12px 7px 12px;
  font-size: 16px;
  width: 100%;
  position: relative;
  display: table-row;
}

.mobile .main-question .mobile-main-question-explanation, .mobile .landing-view .p, .mobile .rank-yourself .p {
  font-size: 15px;
  line-height: 20px;
}
.mobile .main-question .mobile-main-question-explanation p + p, .mobile .landing-view .p p + p, .mobile .rank-yourself .p p + p {
  margin-top: 7px;
}
@media (max-width: 427px) {
  .mobile .main-question .mobile-main-question-explanation, .mobile .landing-view .p, .mobile .rank-yourself .p {
    font-size: 12px;
    line-height: 15px;
  }
  .mobile .main-question .mobile-main-question-explanation p + p, .mobile .landing-view .p p + p, .mobile .rank-yourself .p p + p {
    margin-top: 5px;
  }
}

.mobile {
  top: 0;
  left: 0;
    /*.question-first,
    .rank-yourself-first,
    .summary-first {
        @include left-panel($width: 50%);
    }

    .rank-yourself-second,
    .summary-second,
    #summary-second {
        @include right-panel($width: 380px);
    }

    .question-second {
        @include right-panel($width: 50%);
        position: relative;
        height: 100%;
    }*/
    /*
    .dropdown-box {
        top: 85px;
        bottom: 0;
        $dropdown-box-element-height: 30px;
        left: 15px;
        height: $dropdown-box-element-height * 14; // 14 questions in dropdown box


        div {
            height: $dropdown-box-element-height;
            font-size: 12px;
            padding: 0 15px;
        }

        div:first-child {
            padding-top: 10px;
        }
    }
*/
}
.mobile #container {
  padding: 8px;
  width: 100%;
  height: 100%;
}
.mobile .main-question, .mobile .change-answer {
  /*  .answers {
       width: 200px;
       margin: 27px auto 0 auto;
   } */
}
.mobile .main-question .answer-choices, .mobile .change-answer .answer-choices {
  margin-left: 8px;
  float: left;
}
.mobile .main-question .answer-checkbox, .mobile .change-answer .answer-checkbox {
  width: 37px;
  height: 37px;
}
.mobile .main-question .main-radio-button-and-label, .mobile .change-answer .main-radio-button-and-label {
  margin: 0 0 6px 0;
}
@media (min-height: 500px) {
  .mobile .main-question .main-radio-button-and-label, .mobile .change-answer .main-radio-button-and-label {
    margin: 0 0 12px 0;
  }
}
.mobile .main-question .changeStageRow, .mobile .change-answer .changeStageRow {
  display: table-row;
  height: 100%;
}
.mobile .main-question .stageWrap, .mobile .change-answer .stageWrap {
  vertical-align: middle;
  display: table-cell;
}
.mobile .main-question .stage, .mobile .main-question .answers, .mobile .change-answer .stage, .mobile .change-answer .answers {
  width: 350px;
  margin: 0 auto;
}
.mobile .main-question .answer-text, .mobile .change-answer .answer-text {
  color: #d4e6ea;
  padding: 12px 0 10px 0;
  max-width: 237px;
  margin-left: 12px;
}
@media (max-width: 427px) {
  .mobile .main-question .stage, .mobile .main-question .answers, .mobile .change-answer .stage, .mobile .change-answer .answers {
    width: 260px;
  }
  .mobile .main-question .person-icon, .mobile .change-answer .person-icon {
    display: none;
  }
  .mobile .main-question .answer-text, .mobile .change-answer .answer-text {
    max-width: 190px;
    font-size: 14px;
  }
  .mobile .main-question .answer-choices, .mobile .change-answer .answer-choices {
    width: 248px;
  }
}
.mobile .main-question .person-icon, .mobile .change-answer .person-icon {
  margin-top: -9px;
}
.mobile .main-question {
  height: 100%;
  width: 100%;
        /*
        .answer-choices {
            width: 274px;
            margin-left: 20px;
        }

        .answer-checkbox {
            width: 37px;
            height: 37px;
        }

        .main-radio-button-and-label {
            margin: 0 0 6px 0;

            @media (min-height: $v-small-breakpoint){
                margin: 0 0 12px 0;
            }
        }

        .stage {
            width: 350px;
            margin: 0 auto;
        }


        .answer-text {
            color: $pale-blue;
            padding: 12px 0 10px 0;
            max-width:166px;
            margin-left: 21px;
        }

         @media (max-width: $small-breakpoint) {
            .stage {
                width: 290px;
            }
                
            .answer-text {
                max-width: 130px;
                font-size: 14px;
            }

            .answer-choices{
                width: 214px;
            }

         }

         .person-icon {
            margin-top: -9px;
        }

        .person-icon-container {
        }
        */
}
.mobile .main-question .progressx {
  font-size: 19px;
  margin-bottom: 5px;
}
.mobile .main-question .mobile-close-overlay {
  float: right;
  width: 10px;
  height: 10px;
  padding: 20px;
  position: relative;
  background: url(../img/close_10x10.png) no-repeat center center;
  background-size: contain;
  background-size: auto;
}
.mobile .main-question .mobile-main-question-explanation {
  padding: 0 20px 20px 20px;
}
.mobile .did-you-know {
  font-size: 16px;
}
.mobile .did-you-know .small-light-bulb {
  top: 3px;
}
.mobile .landing-view .p {
  padding-top: 5px;
}
.mobile .landing-view #canvas {
  width: 100%;
}
.mobile .landing-view .landing-control-button {
  font-size: 18px;
  position: absolute;
  bottom: 0;
}
@media (min-height: 500px) {
  .mobile .landing-view #canvas {
    padding-top: 15px;
  }
  .mobile .landing-view .p {
    padding-top: 20px;
  }
}
.mobile .main-question {
  display: table;
}
.mobile .main-question .question-first {
  display: table-row;
}
.mobile .main-question .question-second {
  display: table-row;
  height: 100%;
}
.mobile .rank-yourself {
  height: 100%;
  position: relative;
  display: table;
}
.mobile .rank-yourself .rank-yourself-first {
  display: table-row;
}
@media (min-height: 500px) {
  .mobile .rank-yourself .p {
    padding-top: 20px;
  }
}
.mobile .rank-yourself .down {
  display: block;
  border: 23px solid transparent;
  border-top-color: #e4d138;
}
.mobile .rank-yourself .up {
  display: block;
  border: 23px solid transparent;
  border-bottom-color: #e4d138;
}
.mobile .rank-yourself .control-button {
  position: relative;
  display: table-row;
}
.mobile .rank-yourself-second {
  display: table-row;
  height: 100%;
}
.mobile .rank-yourself-second .number-tip {
  color: #d4e6ea;
  font-size: 22px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  padding: 5px 10px;
}
.mobile .rank-yourself-second .stageWrap {
  display: table-cell;
  vertical-align: middle;
}
.mobile .rank-yourself-second .stage {
  position: relative;
  margin: 0 auto;
  width: 300px;
}
.mobile .summary-view {
  height: 100%;
  width: 100%;
  display: table;
}
.mobile .summary-view .summary-first {
  display: none;
}
.mobile .summary-view .summary-second {
  display: table-row;
  height: 100%;
}
.mobile .summary-view .summary-second .horizontal-line {
  left: 0;
  right: 0;
}
.mobile .summary-view .control-button {
  display: table-row;
}
.mobile .summary-view .about-and-share {
  display: table-row;
  text-align: center;
  float: left;
  width: 100%;
  margin-bottom: 8px;
}
.mobile .change-answer {
  z-index: 20;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
        /*
        .answers {
            margin-top: 25px;
        }

        .person-icon-container {
            padding-left: 25px;
        }

        .answer-checkbox {
            width: 30px;
            height: 30px;
        }

        .answer-choices {
            width: 70%;
        }

        .answer-text {
            font-size: 16px;
            line-height: 30px;
            width: 160px;
            margin-left: 14px;
        }

        .change-radio-button-and-label {
            margin-top: 5px;
            margin-bottom: 15px;
        }
    
        .question-text {
            line-height: 100%;
            font-size: 26px;
            padding: 0 15px;
        }
        */
}
.mobile .change-answer .changeWrap {
  display: table;
  width: 100%;
  height: 100%;
}
.mobile .change-answer .h-line-1 {
  margin-top: 5px;
  margin-bottom: 20px;
}
.mobile .change-answer .question-x-of-y {
  font-size: 18px;
  min-width: 162px;
  margin-left: 15px;
}
.mobile .change-answer .triangle {
  width: 13px;
  height: 8px;
}
.mobile .change-answer .question-text {
  margin-left: 15px;
}
.mobile .change-answer .footer {
  position: relative;
  display: table-row;
  padding: 8px;
  float: left;
  width: 100%;
  font-size: 13px;
}
.mobile .change-answer .footer .qNum {
  display: none;
}
.mobile .change-answer .h-line-2 {
  margin-bottom: 10px;
}
.mobile .change-answer .previous-question div:first-child {
  height: 16px;
  margin-right: 5px;
}
.mobile .change-answer .previous-question:before {
  border-width: 6px;
  margin-left: -6px;
  margin-right: 4px;
}
.mobile .change-answer .next-question div:last-child {
  height: 16px;
  margin-left: 5px;
}
.mobile .change-answer .next-question:before {
  border-width: 6px;
  margin-right: -6px;
  margin-left: 4px;
}
.mobile .data-popup-window {
  top: 0;
  left: 0;
  right: 0;
  position: absolute;
}
.mobile .about-popup-window {
  top: 0;
  left: 0;
  right: 0;
  padding-bottom: 28px;
}
.mobile .about-popup-window .logo {
  margin-top: 35px;
  width: 100%;
  padding: 0 30px;
}
.mobile .about-popup-window .copy {
  padding-top: 30px;
  padding-left: 30px;
  padding-right: 30px;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: 0.04em;
}