@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700,700i);

p {margin-top:1em;}

/* Qualtrics Overrides */
body.score .Skin .SkinInner,body#SurveyEngineBody.score {}
#SurveyEngineBody {background-color:#fff!important; font-family: "Open Sans", Helvetica, Arial, sans-serif;}
.Skin {font-family: "Open Sans", Helvetica, Arial, sans-serif;} 
.Skin #Questions {text-align: center;}
.Skin #Footer {font-size: .65em;}
.Skin .QuestionText {line-height:1.5;}
.Skin .ProgressBarFill, .Skin #Buttons #NextButton, .Skin #Buttons #PreviousButton {background-color:#338291}
.Skin #Buttons #NextButton, .Skin #Buttons #PreviousButton {background-color:#DE614B;}
.Skin #Logo {height:0px;}
.Skin #Buttons {margin:0 auto;}
#Header h1 {font-size: 1em; font-weight:normal; text-align:center; text-transform:uppercase;}
#Buttons.LaunchButtons {text-align:center; margin-top:0px;}
#Buttons.LaunchButtons #NextButton {font-size: 24px;padding: 18px 60px;}

.Skin select {width:50%;}
.intro h1 {text-align:center; width: 60%; line-height:1.1em; margin:0 auto;}

.section-findings {margin-bottom: 30px; padding: 20px;
    background: #f5f5f5;}
.aside {float:right;}
.aside h3 {color:#3070b4;margin-top:20px}
.aside h2 {color: #43464d; font-weight:500; margin-top:20px}
/* Custom */

.jsCharts {/* background-color: #f5f5f5;*/ padding: 20px;}
.jsCharts-header h3 {font-weight:normal; text-transform:uppercase;}
.jsCharts-header p {font-size:.8em;}
.jsCharts .chart-disclaimer {font-size:.65em;font-style:italic; margin-top: 20px;}
.jsCharts a.button {
  display:block;
  width:100%;
  height:40px;
  margin-top:10px;
  background-color:transparent;
  color:#a9a9a9;
  border: 1px solid #a9a9a9;
  line-height:38px;
  text-align:center;
  text-decoration: none;
  font-size: .9em;
  text-transform:uppercase;
  font-weight:bold;
  transition: 0.3s;
}

.jsCharts a.active, .jsCharts a:hover {
  background-color:#a9a9a9;
  color:#fff;
}

.jsCharts .jsCharts-content {
  margin-top:30px;
  min-height:300px;
  font-size:16px; 
  font-weight:bold;
}

.jsCharts div[class*="jsCharts-content-"] { 
  display:none;
}

.jsCharts div.active { 
  display:block;
}

.button-advance-helper {color: #DE614B; font-size:.65em; font-weight:bold; text-align:right;}

.button-advance-helper > img {max-width: 20px;float: right;margin-left:10px}
@media screen and (min-width: 1150px) {
.Skin .SkinInner {width: 1150px;max-width: 1150px;} 
.Skin .QuestionOuter {width: 810px;max-width: 810px;margin:0 auto}
.Skin .QuestionOuter#QID9, .Skin .QuestionOuter#QID13, .Skin .QuestionOuter#QID17, .Skin .QuestionOuter#QID19, .Skin .QuestionOuter#QID25,.Skin .QuestionOuter#QID27  {width: 1150px;max-width: 1150px;} 
#Buttons {max-width: 810px;}
}

@media screen and (min-width: 980px) {
.section-findings {    float: right;width: 35%;text-align: left; padding: 20px;}
.jsCharts {width: 65%;float:left}	

.jsCharts a.button {
  display:inline-block;
  width:80px;
  height:30px;
  line-height:28px;
	font-size: .65em;

}
.jsCharts .jsCharts-content {
  min-height:200px;
}

.aside {width:35%; margin: 20px 0;padding:20px; float:right; border:1px solid #e7e9eb;    font-size: 14px;}

}