body {
  padding-top: 50px;
  padding-bottom: 20px;
  height: 100%; }

html {
  height: 100%; }

/* Set padding to keep content from hitting the edges */
.body-content {
  background-color: #16d9e3;
  background-image: radial-gradient(circle 248px at center, #16d9e3 0%, #30c7ec 47%, #46aef7 100%);
  padding: 0; }

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
  white-space: normal; }

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
  /*max-width: 280px;*/ }

section .container {
  /*min-height:100%;
    padding:0;
    max-width:100%;*/
  font-family: 'Roboto', sans-serif;
  padding: 3em; }

.navbar-nav {
  float: right; }

.body-content .container {
  background-color: #fff;
  width: 100%;
  padding: 2em auto; }

.flex1 {
  flex: 1; }

.flexColumn {
  display: flex;
  flex-direction: column;
  min-height: 91%; }

.img-responsive {
  margin: 0 auto; }

.col-100 {
  width: 100%; }

.col-50 {
  width: 50%; }

.col-30 {
  width: 30%;
  margin: 1%; }

/*===================================Main slide=====================================================*/
/*.mainContainer {
    background-repeat: no-repeat;
    background-position: 0 -20px;
    background-image: url('/img/bgHomepage.jpg');
    min-height: 100%;
    padding: 2em 2em 0;
    background-attachment: fixed;
    background-position: center;
    webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
    width: 100%;
}*/
#arrowDown {
  height: 50px;
  width: 50px;
  position: absolute;
  left: calc(50% - 25px);
  bottom: 5px;
  border: 2px solid #000;
  border-radius: 50%;
  text-align: center;
  cursor: pointer; }
  #arrowDown img {
    position: absolute;
    height: 40px;
    left: 3px;
    top: 5px; }

.mainContainer {
  background-repeat: no-repeat;
  background-image: url("../img/bgHomepage.jpg");
  padding: 2em 2em 0;
  background-position: center;
  webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%;
  position: relative; }

#frontPageOverlay {
  position: absolute;
  width: 100%;
  left: 0;
  min-height: 100%;
  top: 0;
  background-color: rgba(129, 220, 212, 0.3); }

.box {
  width: 90%;
  background-color: rgba(255, 255, 255, 0.7);
  padding: 1em;
  margin: 0 auto 0 auto; }

.flexDiv {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center; }

.textCenter {
  text-align: center; }

h1, h2, h3, h4, h5 {
  color: #000;
  font-weight: 700;
  font-family: 'Roboto', sans-serif; }

.difFont {
  font-family: 'Open Sans';
  font-weight: 700; }

.navbar-brand {
  font-family: 'open sans', sans-serif;
  color: #fff !important;
  transition: all 0.5s; }

.navbar-brand:hover, .navbar-brand:focus, .navbar-brand:active {
  color: #16d9e3 !important; }
#logoContainer h1 {
	margin-top: 0;
	margin-bottom: .5rem;
	
}
#logoContainer h1, #logoContainer h2, #logoContainer h1 a {
  color: #000 !important; }
#logoContainer h1 a {
	text-decoration: none;
}
#logoContainer h2 {
  font-family: "Roboto";
  font-size: 2.5em;
  font-weight: 600; 
  margin-top: 1.3rem;
  margin-bottom: 1rem;
  }

h1 {
  padding-left: 50px;
  color: #000;
  font-size: 3em;
  font-size: 5em; }

h2 {
  color: #000;
  font-size: 1.4em;
  line-height: normal;
  text-align: center;
  margin: 1em auto;
  width: 100%;
  font-family: Arial;
  font-weight: 300; }

h3 {
  width: 100%;
  text-align: center;
  font-weight: 300;
  color: #000;
  font-family: 'Source Sans Pro';
  font-size: 2em; }

h5 {
  font-weight: 700;
  padding-left: 1em;
  font-size: 1.3em;
  padding-left: 0; }

.standardButton {
  width: 150px;
  height: 50px;
  background-color: #000;
  border: none;
  color: #fff;
  font-size: 1.3em;
  outline: none;
  cursor: pointer;
  transition: all 0.5s;
  margin: 2em auto; }

.backHomeBtn {
  background-color: #a2a7a7; }

.backHomeBtn:hover, .backHomeBtn:focus, .backHomeBtn:active {
  background-color: #000; }

.standardButton:hover, .standardButton:focus, .standardButton:active {
  background-color: #12c0eb;
  color: #000; }

.smallFont {
  font-size: 0.8em;
  margin: 0 0 10px !important; }

.blueFont {
  color: #12c0eb; }

/*================Main slide============================*/
#parentStudentBox .flexColumn {
  text-align: center;
  width: 50%; }

#parentStudentBox p {
  margin: .8em 1em 1em;
  font-size: 1.2em; }

#parentStudentBox h4 {
  color: #000;
  font-size: 1.9em;
  font-family: Arial;
  font-weight: 500; }

#parentStudentBox .standardButton {
  margin-top: auto; }

/*================Stat section 1============================*/
#statsSection {
  display: flex;
  align-items: center;
  min-height: auto !important;
   }
  #statsSection.box {
  margin-top:0; 
  margin-bottom:0; 
  padding-bottom:0;
  }
#statsSection h2 {
	margin: 0 0 2rem 0;
}
#statsSection .container {
background:transparent;
padding:1.5rem 0 0 0;
}
.column {
  padding: 2em; }

section p {
  font-size: 1.5em; }

.smallerFont {
  font-size: 1em; }

section .divider {
  width: 200px;
  height: 1px;
  background-color: red;
  margin: 2em auto; }

.snippet {
  background-color: #16d9e3;
  background-image: radial-gradient(circle 248px at center, #16d9e3 0%, #30c7ec 47%, #46aef7 100%);
  padding: 1em;
  margin: .4em;
  min-height: 150px;
  font-family: "Source Sans Pro", sans-serif;
  text-align: center;
  font-size: 1.2em; }


/*==================Stat section 2=============================*/
#statsSection2 {
  background-repeat: no-repeat;
  background-image: url("../img/globe.jpg");
  background-size: cover;
  height: 100%;
  padding: 1em;
  text-align: center;
  display: flex;
  align-items: center; }
  #statsSection2 .overlay {
    padding: 3em; }
  #statsSection2 h2 {
    font-size: 1.5em;
    margin-bottom: 20px; }
  #statsSection2 h3 {
    font-family: "Karla", sans-serif;
    color: #ef4949;
    font-size: 1.5em; }
  #statsSection2 p {
    font-size: 18px;
    padding-bottom: 10px;
    line-height: 30px; }
  #statsSection2 .standardButton {
    margin-top: 1em; }
  #statsSection2 .col-3 {
    width: 28%;
    margin: .4em;
    padding: 1em;
    font-size: 2em;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    color: #000;
    background-color: lightpink;
    background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%); }

/*==================Screenshots section=============================*/
#screenshotsSection {
  padding: 3em; }
  #screenshotsSection .col-4 {
    width: 22.5%;
    margin: 1%; }

#careerPathSection {
  background-color: #16d9e3;
  background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
  text-align: center;
  padding: 3em;
  display: flex;
  align-items: center;
  flex-direction: column; }
  #careerPathSection .imageWrapper {
    padding: 2em;
    background-color: #fff;
    width: 70%;
    margin: 0 auto; }

/*=======================================Questionnaire======================================================*/
.questionnairePage {
  padding: 1em; }
  .questionnairePage h2 {
    margin: 20px auto; }

#logoContainer {
  width: 80%;
  margin: 0 auto 0 auto;
  padding: 1% 0;
  align-items: center;
  justify-content: flex-start; }

#logoContainer h1, #logoContainer h2 {
  padding-left: 20px; }

.displayInline {
  display: inline; }

#logo {
  width: 140px;
  height: 140px; }

.borderBox {
  border: 1px solid #000;
  margin-top: 20px; }

.column span p {
  font-size: 1.2em;
  padding-left: 2em !important; }

.goBackButton {
  width: 100px;
  background-color: #a2a7a7;
  text-align: center;
  cursor: pointer;
  float: left;
  border: 0;
  height: 50px;
  margin: 20px 20px 20px 0;
  color: #fff;
  transition: all 0.5s; }

.goBackButton:hover, .goBackButton:focus, .goBackButton:active {
  background-color: #000; }

.displayError {
  color: red !important;
  padding: 0 !important;
  font-size: 1em;
  text-align: center; }

#continueBtn {
  margin: 1em; }

.parentQuestions {
  display: none; }
  .parentQuestions h2 {
    padding: 0;
    font-weight: 300;
    font-family: "Source Sans Pro";
    text-align: center;
    margin: 20px auto;
    font-size: 30px; }
  .parentQuestions h3 {
    font-size: 1.5em;
    margin-bottom: 1em; }
  .parentQuestions p {
    padding-left: 2em; }
  .parentQuestions .column p {
    padding-left: 4em; }
  .parentQuestions .standardButton {
    margin: 20px auto; }

#parentContactInformation {
  display: block; }

#studentContactInformation1 {
  display: block; }

#termsQuestion {
  width: 100%;
  margin: 0 auto; }
  #termsQuestion h2 {
    padding: 0;
    margin: 20px auto 10px; }
  #termsQuestion padding {
    margin: 0; }

.optionsWrapper {
  padding: 20px;
  border: 1px solid #12c0eb;
  cursor: pointer; }
  .optionsWrapper:hover {
    background-color: #12c0eb; }

.optionBox h3 {
  font-size: 20px;
  margin-top: 0;
  font-size: 20px;
  font-weight: 600; }

.optionBox h3:first-child {
  background-color: #12c0eb;
  color: #fff;
  text-transform: uppercase;
  font-size: 18px; }

.optionBox h4 {
  font-weight: 600;
  font-size: 16px;
  margin-top: 20px; }

.optionBox h5 {
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 5px; }

.optionBox ul {
  padding-left: 15px; }

.optionBox li {
  font-size: 12px; }

.optionBox .smallText {
  font-size: 10px;
  color: gray;
  text-align: center;
  text-transform: uppercase;
  padding: 0; }

.displayError, #termsQuestion {
  display: none; }

.formContainer {
  width: 80%;
  margin: 0 auto; }

#contactInformation, #contactInformationStudent, #contactInformationStudent2 {
  width: 70%;
  margin: 0 auto; }

#contactInformation h2, #contactInformationStudent h2, #contactInformationStudent2 h2 {
  margin-bottom: 1em;
  padding: 0; }

#contactInformationStudent2 h3 {
  text-align: left;
  margin-bottom: 1em;
  font-size: 1.6em; }

.form-control {
  max-width: initial; }

.backNextButtonsWrapper .column {
  width: 50%; }

.radioBox {
  background-color: #000;
  width: 3em;
  height: 3em;
  text-align: center;
  line-height: 3em;
  margin: 0 auto;
  padding: 2px; }

.parentQuestions .radioButtonsColumn p {
  padding: 0 !important; }

.radioButtonsColumn span {
  display: inline-block;
  width: 120px;
  text-align: center; }

#contactInformationStudent .flexDiv {
  margin-top: 2em; }

#contactInformationStudent .column {
  padding: 0 1em; }

#contactInformationStudent h3 {
  text-align: left;
  margin: 1em 0;
  font-size: 20px; }

#contactInformationStudent .smallFont {
  padding-left: 0 !important;
  text-align: left; }

.termsRow {
  margin-bottom: 0; }

.questionProgress {
  background-color: #efac17;
  margin: 5px;
  padding: 3px; }

.navbar-inverse .navbar-nav > li > a, .navbar-inverse .navbar-brand {
  color: #fff; }

.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-brand:hover {
  color: #64cfda; }

#aboutUs h2 {
  text-align: center;
  margin: 1em 0; }

footer {
  background-color: #000;
  color: #fff; }
  footer p {
    text-align: center;
    margin: 0;
    padding: 0.5em;
    background-color: #000;
    color: #fff; }

/*=========================Slide 2=========================================*/
/*=========================How it works slide=========================================*/
#howItWorksWrapper {
  width: 80%;
  margin: 0 auto; }

#howItWorksWrapper h3 {
  margin-bottom: 1em;
  font-family: Arial;
  font-size: 4em; }

#howItWorksWrapper p {
  margin-bottom: 2em;
  font-size: 1.3em;
  font-weight: 300; }

.parentColumn h4, .parentColumn h3 {
  color: #000; }

.studentColumn h4, .studentColumn h3, .studentColor {
  color: #000 !important; }

#howItWorksWrapper .column {
  padding: 0 2em; }

#howWorks .container {
  padding: 2em; }

#aboutUs {
  background-image: url(/Content/images/ryan-vitter.jpg);
  background-repeat: no-repeat;
  background-position: 0 -20px;
  background-size: cover;
  min-height: 100%;
  padding: 2em 2em 0;
  background-attachment: fixed; }

#aboutUs .container {
  color: #000;
  font-size: 1.4em;
  background-color: rgba(255, 255, 255, 0.7);
  padding: 1em 2em;
  font-weight: 300; }

#aboutUs p {
  font-size: 1em; }

#signUpLink {
  font-weight: 600; }

/*=============================Thank you page=========================================*/
.thankyouPage {
  width: 70%;
  margin: 2em auto; }
  .thankyouPage p {
    font-family: 'Roboto';
    font-size: 1.3em;
    padding-left: 0; }
  .thankyouPage h2 {
    padding-left: 0; }
  .thankyouPage h3 {
    text-align: left; }
  .thankyouPage .standardButton {
    width: auto;
    font-size: 14px;
    padding: 10px; }

.divider {
  width: 100px;
  height: 1px;
  margin: 0.5em auto;
  background-color: #16d9e3; }

/*===================================privacy policy=================================== */
.privacy h2 {
  text-align: center; }

.aboutContainer {
  background-color: #fff;
  padding: 50px 0 0; }

.aboutContainer .container {
  background-color: #fff;
  padding: 30px 60px 60px;
  font-size: 20px; }

.lowerAlpha {
  list-style-type: lower-alpha; }

.lowerRoman {
  list-style-type: lower-roman; }

.aboutContainer h2 {
  margin: 5px 0;
  text-align: center;
  font-weight: 700;
  font-size: 34px; }

.aboutContainer h3 {
  text-align: center; }

.aboutContainer h4 {
  font-weight: 600;
  font-size: 26px;
  display: inline;
  margin-left: 15px; }

.addressDiv {
  padding: 0 10px 20px; }

.aboutContainer p {
  margin: 0 0 20px; }

.addressDiv p {
  margin-bottom: 10px; }

.nomargin {
  margin: 0; }

.italic {
  font-style: italic; }

.aboutContainer li {
  padding-bottom: 15px; }

.aboutContainer ul {
  padding-top: 15px; }

ol.mainNumberList {
  list-style-type: none;
  counter-reset: ol-counter; }

ol.mainNumberList > li:before {
  content: counter(ol-counter);
  counter-increment: ol-counter;
  display: inline-block;
  width: 40px;
  height: 40px;
  background-color: #000;
  color: #fff;
  line-height: 40px;
  font-size: 34px;
  text-align: center;
  margin-left: -20px; }

.record {
  border: 1px solid #16d9e3;
  margin: 10px;
  padding: 20px;
  border-radius: 10px; }

#sandbox {
  min-height: 400px;
  padding: 2em;
  text-align: center; }

/*===================================Media queries========================================*/
@media (min-width: 768px) {
  .container {
    max-width: 90%; } }

/*height*/
@media only screen and (max-height: 700px) {
  h3 {
    margin: 10px; }
  #logoContainer {
    width: 80%;
    padding: 0; }
  .standardButton {
    margin: 1em auto; }
  #parentStudentBox p {
    margin: 1em 1em .5em 1em; } }

/*width*/
@media only screen and (max-width: 1150px) {
  h1 {
    font-size: 4em; }
  #statsSection2 .col-3 {
    font-size: 25px; }
  .column {
    width: 50%;
    padding: 1em; }
  #logoContainer {
    margin: 0 auto;
    padding: 1% 0; }
  #parentStudentBox h4 {
    font-size: 1.9em; }
  #parentStudentBox p {
    margin: 1em;
    font-size: 16px; }
  .standardButton {
    margin: 0 auto 1em auto; } }

@media only screen and (max-width: 1000px) {
  #logoContainer {
    width: 90%;
    margin: 0 auto; }
  .box {
    width: 90%;
    margin: 1% auto 1% auto; }
  section .container {
    padding: 2em; }
  section p {
    font-size: 18px; }
  #statsSection2 h2 {
    font-size: 1.3em; }
  #statsSection2 p {
    font-size: 18px; }
  #statsSection2 .overlay {
    padding: 2em; }
  #careerPathSection {
    padding: 2em; }
  #screenshotsSection {
    padding: 2em; }
  #parentStudentBox h4 {
    font-size: 2em; } }

@media only screen and (max-width: 850px) {
  #parentStudentBox p {
    margin: 1em 1em 1.2em 1em; }
  h1 {
    font-size: 3em; }
  .box {
    width: 95%; }
  #parentStudentBox p {
    FONT-SIZE: 0.9EM; }
  #howItWorksWrapper h3 {
    font-size: 2em; } }

@media only screen and (max-width: 768px) {
  .sm-100 {
    width: 100% !important; }
  .sm-50 {
    width: 48% !important; }
  h1 {
    font-size: 2em; }
  h2 {
    font-size: 1.4em; }
  .aboutContainer {
    font-size: 12px; }
  .aboutContainer .container {
    padding: 15px;
    font-size: 18px; }
  .aboutContainer h2 {
    font-size: 24px; }
  .aboutContainer h3 {
    font-size: 16px;
    margin: 10px; }
  .aboutContainer h4 {
    font-size: 22px; }
  ol {
    padding-left: 20px !important; }
  #logoContainer {
    margin: 1% auto 0 auto;
    width: 100%;
    justify-content: center; }
  .column {
    margin-bottom: 0;
    padding-bottom: 0;
    padding-top: 0; }
  .mainContainer {
    padding: 0; }
  #parentStudentBox p {
    FONT-SIZE: 1EM; }
  h3 {
    margin-bottom: 1em; }
  .mainContainer {
    /* background-position: 70% 50%;*/
    background-position: 88% 50%; }
  .box {
    margin: 0 auto 0 auto; }
  #statsSection2 .col-3 {
    font-size: 20px; }
  h5 {
    text-align: center; }
  .radioButtonsColumn {
    text-align: center; }
  .navbar-nav {
    float: none;
    text-align: center; }
  #termsQuestion label {
    line-height: initial; }
  .thankyouPage p, .thankyouPage h2 {
    font-size: 1.4em;
    margin-bottom: 0.5em;
    font-family: 'Source Sans Pro'; }
  .thankyouPageStudent h3 {
    margin-bottom: 0.5em; }
  #contactInformationStudent2 h3 {
    font-size: 1.4em; }
  section .container {
    padding: 1em; }
  .continueButtonWrapper {
    text-align: right; }
  .record {
    width: 100%;
    padding: 10px; }
  #dashboardContainer .container {
    padding-bottom: 2em; } }

@media only screen and (max-width: 650px) {
	    #logoContainer {
    	padding: 1rem 0;
    }
  .lowerAlpha {
    padding-top: 15px; }
  .aboutContainer h4 {
    margin-left: 4px;
    font-size: 20px; }
  ol.mainNumberList > li:before {
    height: 30px;
    width: 30px;
    line-height: 30px;
    font-size: 24px; }
  #parentStudentBox .column {
    text-align: center;
    width: 100%; }
  #parentStudentBox .flexColumn {
    width: 100%;
    text-align: center; }
  section .container {
    padding: 2em; }
  section p {
    font-size: 18px; }
  #statsSection .flexDiv {
    flex-direction: column; }
  #statsSection .snippet {
    margin: 0 0 1em; }
  #statsSection2 .overlay {
    padding: 1em; }
  #careerPathSection {
    padding: 1em; }
    #careerPathSection .imageWrapper {
      width: 100%; }
  #screenshotsSection {
    padding: 1em; } }

@media only screen and (max-width: 414px) {
  #logo {
    width: 70px;
    height: 70px; }
    #logoContainer {
    	padding: .7rem 0;
    } 
  #logoContainer h1, #logoContainer h2 {
    padding-left: 0; }
  #logoContainer h1 {
    font-size: 2.3rem;
    margin-top: 1rem;
    margin-bottom: 0.4rem; }
  #logoContainer h2 {
    font-size: 1.8rem;
    /*margin-top: 0;*/ }
  h3 {
    font-size: 1.3em;
    margin: 1em 1em 0;
    margin: 0.5em auto; }
  .box {
    margin: 1% auto 1% auto;
    width: 96%;
    padding: 5px; }
  #logoContainer {
    margin: 0 auto;
   /* display: none;*/ }
  #parentStudentBox h4 {
    font-size: 1.8em;
    margin: 0.5em 0.5em 0; }
  #parentStudentBox p {
    margin: .8em 1em 1.2em 1em; }
  h5 {
    text-align: left; }
  .column span p {
    font-size: 0.9em; }
  .radioButtonsColumn span {
    width: 94px; }
  h4, .h4 {
    font-size: 16px; }
  #howItWorksWrapper p {
    margin-bottom: 1em; }
  #aboutUs {
    padding: 2%; }
  footer p {
    font-size: 0.8em; }
  .standardButton {
    font-size: 1.5em; }
  #howItWorksWrapper .column {
    padding: 0; }
  #aboutUs h2 {
    margin-bottom: 1em; }
  #aboutUs .container {
    padding: 1em; }
  #howWorks .container {
    padding: 0em; }
  #thankyouPageStudent p, #thankyouPage p, #thankyouPageStudent h2, #thankyouPage h2 {
    font-size: 1.4em; }
  #thankyouPageStudent h3, #thankyouPage h3 {
    font-size: 1.4em;
    font-weight: 300; }
  .mobileHide {
    display: none; }
  #thankyouPage, #thankyouPageStudent {
    width: 90%;
    position: static; }
  #contactInformation, #contactInformationStudent, #contactInformationStudent2 {
    width: 98%;
    margin: 0 auto 1em; }
  .mainContainer {
   /* margin-bottom: 1em;*/ }
  #termsQuestion h2 {
    font-family: 'Source Sans Pro';
    font-weight: 300;
    margin-top: 5px; }
  #termsQuestion {
    width: 98%;
    margin: 0 auto;
    padding-bottom: 1em; }
  #termsQuestion label {
    font-size: 0.9em;
    margin-bottom: 0; }
  .radioBox {
    padding: 2px 0 2px 3px;
    width: 3.5em;
    height: 3.5em;
    line-height: 3.5em; } }