/* Primary Stylesheet
 * Thomas Sullinger
 * Created: 8/17/2023
 * Modified: 9/8/2023
 */


/*     Colors     */

.blue {color: rgb(38,56,129)}
.dkBlue {color: rgb(4,13,69)}
.red {color: rgb(188,24,35)}
.yellow {color: rgb(245,213,50)}
.white {color: rgb(255,255,255)}




/*     CLEAR EVERYTHING     */

html,body,div,span,object,iframe,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,h1,h2,h3,h5,h6,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-size:100%;vertical-align:baseline}html,body,form,fieldset,p,div,h1,h2,h3,h4,h5,h6{-webkit-text-size-adjust:none}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1.2}ol{padding-left:1.4em;list-style:decimal}ul,li{padding-left:0;list-style-type:none}table{border-collapse:collapse;border-spacing:0}h1{font-size:2.0em;line-height:1.32;padding-top:10px;padding-bottom:10px}h2{font-size:1.7em;padding-top:10px;padding-bottom:10px}h3{font-size:1.5em;padding-top:7px;padding-bottom:4px}h4{font-size:1em;margin:0;padding-top:10px;padding-bottom:10px}h5{font-size:0.83em;padding-top:10px;padding-bottom:10px}h6{font-size:0.75em}




/*     WEBFONTS     */

@font-face {
  font-family: 'robotobold';
  src: url('../fonts/robotobold/roboto-bold-webfont.woff2') format('woff2'),
       url('../fonts/robotobold/roboto-bold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'montserrat';
  src: url('../fonts/montserrat/montserrat-bold.woff2') format('woff2'),
       url('../fonts/montserrat/montserrat-bold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'montserratblack';
  src: url('../fonts/montserrat/montserrat-black.woff2') format('woff2'),
       url('../fonts/montserrat/montserrat-black.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}




/*     FONT APPLICATION     */

h1, h2, h3, h5, #closeMenu {
  font-family: 'montserrat', Arial, sans-serif;
  font-weight: bold;
  font-style: normal
}
h1 {
  padding:0 13px;
  font-size: 40px;
  text-align: center;
  color: #fff
}
h1 .black {
  font-family: 'montserratblack', Arial, sans-serif;
}
h2 {
  font-size: 26px;
  font-weight: normal;
  padding: 10px 0 25px 0;
}
h3 {
  font-size: 20px;
  font-weight: normal;
  padding-bottom: 13px;
}
h4 {
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 18px;
}
h5 {
  padding: 0;
}

body, p, span a, footer, .button, form, form input, form textarea, #relText li, .contentWrapper, select {
  font-family: Arial, sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 18px
}

footer, footer .contentWrapper {
  font-size: 16px;
}

a.pageLink:link, a.pageLink:visited {
  color:#5A90BF;
  text-decoration:underline
}

a.pageLink:hover, a.pageLink:active {color:#000000}

a.pageLink2:link, a.pageLink2:visited {
  color:#dadada;
  font-size:24px;
  font-weight:bold;
  text-decoration:underline
}

a.pageLinkw:link, a.pageLinkw:visited {
  color:#5A90BF;
  text-decoration:underline
}

a.pageLink2:hover, a.pageLink2:active,
a.pageLinkw:hover, a.pageLinkw:active {color:#fff}

button {font-size:18px;line-height:35px;border:1px solid rgb(118, 118, 118);border-radius:2px}


/*     LINK FORMAT     */

a, .button, button, #headPhone {
  text-decoration: none;

  -o-transition-property:color, background;
  -ms-transition-property:color, background;
  -moz-transition-property:color, background;
  -webkit-transition-property:color, background;
  transition-property:color, background;

  -o-transition-duration:.3s;
  -ms-transition-duration:.3s;
  -moz-transition-duration:.3s;
  -webkit-transition-duration:.3s;
  transition-duration:.3s;

  -o-transition-timing-function:ease;
  -ms-transition-timing-function:ease;
  -moz-transition-timing-function:ease;
  -webkit-transition-timing-function:ease;
  transition-timing-function:ease
}
a:active, a:focus, button:active, button:focus {
  outline: none;
}



body {}



.pageIdent {
  display:none;
  padding:15px 15px 7px 15px;
  background-color:rgba(0,0,0,.7);
  color:#fff;
  text-align:center
}
.pageIdent h1 {
  padding:0;
  font-size:24px
}
@media screen and (min-width:830px) {
  .pageIdent {display:block}
  #introSection {display:none}
}



.noScroll {
  height:100vh;
  overflow-y:hidden
}
.container {
  position:relative;
  background-color:rgba(0,0,0,.4);
}
.contentContOuter {
  position:relative
}
.contentContInner {
  position:relative;
  padding-bottom:0;
  background-color:rgb(4,13,69);
  background: -moz-linear-gradient(90deg, rgba(2,6,38,1) 0%, rgba(4,19,69,1) 50%, rgba(2,6,38,1) 100%);
  background: -webkit-linear-gradient(90deg, rgba(2,6,38,1) 0%, rgba(4,19,69,1) 50%, rgba(2,6,38,1) 100%);
  background: linear-gradient(90deg, rgba(2,6,38,1) 0%, rgba(4,19,69,1) 50%, rgba(2,6,38,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#020626",endColorstr="#020626",GradientType=1);
}
.contentContOuter#home .contentContInner {}

.section {
  position:relative;
  margin-top:125px;
  padding:0;
  z-index:2
}








/* LOADING AND FORM STATUS LIGHTBOX */

#loadingImage {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100vh;
  visibility:visible;
  opacity:1;
  text-align:center;
  background-color: rgba(255,255,255,0.95);
  z-index:999
}
#loadingImage.loading {
  visibility: hidden;
  opacity: 0;
  padding-top: 40%;
  background-color: rgba(255,255,255,0.95);
}
#loadingImage.loading.active {
  visibility: visible;
  opacity: 1;
}
#loadingImage #formResults {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 30px;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
}
#loadingImage.loading img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
}
#loadingImage.loading h2 {
  display: block;
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
}
#loadingImage .button,
#formResults .button {
  position: relative;
  padding: 10px 16px;
  margin-top: 45px;
}
.hide {display:none;}

#formResults {
  width: 100%;
  padding: 20px;
}
#loadingImage p {
  position: relative;
  padding: 30px 0 0 0;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  font-weight: bold;
  color: #000;
  text-shadow: 2px 1px 2px rgba(0,0,0,0.45);
}
#loadingImage h2 {
  font-size: 30px;
  text-shadow: 2px 1px 2px rgba(0,0,0,0.45);
}
@media screen and (min-width:815px) {
  #loadingImage h2 {
    font-size: 55px;
  }
  #loadingImage p {
    font-size: 25px;
  }
}

#formResults u {
  position: relative;
  text-decoration: none;
}

#loadingImage .button.hideContactPopup {
  width: 100px;
  height: 100px;
  padding: 0;
  background-color: #fff;
  border-radius: 8px;
  border: 8px solid #000;
  font-size: 50px;
  cursor: pointer;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}









/*     SITE-WIDE     */

html * {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
body {}

p {
  margin-bottom: 15px;
}
p:last-of-type {margin-bottom:0;}


.col-2 > dl,
.col-2 > div {
  /* padding-top:15px */
}

.col-2 {position:relative}
.col-2 > div {position:relative}
@media screen and (min-width:777px) {
  .col-2 > div {
    display:inline-block;
    width:50%;
    vertical-align:top
  }
  .col-2 > div:nth-of-type(odd) {
    padding-right:20px
  }
  .col-2 > div:nth-of-type(even) {
    padding-left:20px
  }
}








#titleArea {
  position:relative;
  padding:25px;
  background: rgb(38,56,129);
  background: -moz-linear-gradient(90deg, rgba(8,22,53,1) 0%, rgba(29,46,121,1) 50%, rgba(8,22,53,1) 100%);
  background: -webkit-linear-gradient(90deg, rgba(8,22,53,1) 0%, rgba(29,46,121,1) 50%, rgba(8,22,53,1) 100%);
  background: linear-gradient(90deg, rgba(8,22,53,1) 0%, rgba(29,46,121,1) 50%, rgba(8,22,53,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#081635",endColorstr="#081635",GradientType=1);
  overflow:hidden
}
/* 864x1020 approx at max*/
#titleArea #reaveshead {
  display:none;
  position:absolute;
  width:27%;
  max-width:265px;
  bottom:-5px;
  left:0
}
#reaveshead img {
  width:100%;
  max-width:345px;
  height:auto
}

#mainTitle {
  text-align:center
}
/* 1000x500 approx at max*/
#mainTitle .logoCont {
  width:100%;
  max-width:550px;
  height:auto;
  margin:0 auto;
  padding:38px;
  border:5px solid #fff;
  overflow:hidden
}
#mainTitle .logoCont img {
  width:100%;
  height:auto
}
#titleArea #voteCont {
  display:none;
  position:absolute;
  width:18%;
  height:auto;
  top:50px;
  right:25px
}
#titleArea #voteCont img {
  width:100%
}

@media screen and (min-width:870px) {
  #titleArea #reaveshead {
    display:block
  }
  #mainTitle .logoCont {
    margin:0 0 0 27%
  }
}
@media screen and (min-width:1075px) {
  #titleArea #reaveshead {
    width:25%;
    max-width:305px
  }
  #mainTitle .logoCont {
    width:65%;
    max-width:620px
  }
}
@media screen and (min-width:1230px) {
  #titleArea #voteCont {
    display:block
  }
}
@media screen and (min-width:1373px) {
  #mainTitle .logoCont {
    margin:0 auto
  }
}








/* FOOTER */
footer {
  display:block;
  position:relative;
  font-size:18px;
  color:#bbb
}
footer div, footer a, footer li {
  font-size:16px
}

#footAddress {padding:15px;background-color:#111;text-align:center}
#footAddress address {max-width:1700px;margin:0 auto}
#footAddress address div {margin-top:15px;vertical-align:top}
#footAddress address div:first-of-type {margin-top:0}
#footAddress a {color:#bbb}
@media screen and (min-width:690px) {
  #footAddress address > div.col-3 {
    display:inline-block;
    width:33%;
    margin-top:0;
    padding:0
  }
}

footer .copyr {
  position: relative;
  width:100%;
  padding:15px 0;
  text-align:center;
  color:#888;
  /*background-color:rgb(241,236,227)*/
  background-color:#222
}
footer .copyr div {
  width:100%;
  padding:0 15px;
  font-size:16px
}
footer .copyr div .paidFor {
  display:block;
  margin:0 auto 12px auto;
  padding:6px;
  /*border:3px solid #888*/
}
footer .footFB {opacity:.7}


















/*     HOME PAGE     */

#home h1 span {display:block}
/*.section {
  padding-right:13px;
  padding-left:13px
}*/
#tagSection {
  position:relative;
  padding-top:50px;
  padding-bottom:50px;
  border-top:5px solid #fff;
  border-bottom:5px solid #fff
}
#tagSection .flagCont {
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  background-image:url(../img/flag.webp);
  background-position:center;
  background-size:cover;
  opacity:.2;
  z-index:1
}
#tagSection h1 {
  position:relative;
  z-index:3
}
.section .contentWrapper {
  position:relative;
  width:100%;
  max-width:2000px;
  margin:0 auto;
  overflow:hidden
}

.videoSection .contentWrapper {
  width:100%;
  height:auto;
  padding-right:50px;
  padding-left:50px
}
.videoSection .contentWrapper video {
  width:100%
}

.pointCont {/*margin-top:33px*/}
.explainerSection {}
.explainerSection h2 em,
.experienceSection h2 em {font-size:28px}
.explainerSection .points,
.experienceSection p {font-size:22px}
.experienceSection p b {font-size:24px}
.explainerSection p:last-of-type {
  margin-bottom:15px
}
.experienceSection p:last-of-type {
  margin-bottom:0
}

.explainerSection .col-2 > div:nth-of-type(odd) {
  padding-right:25px;
  padding-left:50px
}
.explainerSection .col-2 > div:nth-of-type(even) {
  margin-top:100px
}

.section .starsDiv {
  content:' ';
  position:relative;
  width:100%;
  height:100%;
  background-image:url(../img/white_stars.webp);
  background-size:250px
}
.explainerSection .starsDiv {
  height:1030px;
  padding-top:75px;
  padding-bottom:75px;
  text-align:center
}
.quoteSection .starsDiv {
  height:1030px;
  padding-top:75px;
  padding-bottom:75px;
  text-align:center
}

.starImg {
  content:' ';
  background-size:cover;
  vertical-align:middle;
  background-position:center
}
.explainerSection .starImg:first-of-type {
  width:50%;
  height:400px;
  margin:0 auto;
  background-image:url(../img/walking.webp)
}
.explainerSection .starImg:last-of-type {
  width:90%;
  height:450px;
  margin:25px auto 0 auto;
  background-image:url(../img/water-tower.webp);
  background-position:center
}

.quoteSection .starImg:first-of-type {
  width:90%;
  height:400px;
  margin:0 auto;
  background-image:url(../img/talking.webp);
  background-position:center
}
.quoteSection .starImg:last-of-type {
  width:90%;
  max-width:360px;
  height:450px;
  margin:25px auto 0 auto;
  background-image:url(../img/students.webp)
}

.quoteSection .pointCont {
  margin-top:100px;
  padding:0 50px 25px 50px;
  padding-bottom:25px;
  overflow:visible
}
.quoteSection quote {
  position:relative;
  font-size:20px;
  z-index:2
}
.quoteSection quote {
  display:block;
  margin-top:55px
}
.quoteSection quote:first-of-type {
  margin-top:0
}
.quoteSection quote span {
  display:block;
  margin-top:21px;
  text-align:right;
  color:#aeaeae
}
.quoteSection quote::before,
.quoteSection quote::after {
  content:' ';
  position:absolute;
  width:55px;
  height:55px;
  background-image:url(../img/quotew.svg);
  background-repeat:no-repeat;
  background-position:center;
  background-size:50px;
  opacity:.3;
  z-index:1
}
.quoteSection quote::before {
  top:-30px;
  left:-50px
}
.quoteSection quote::after {
  right:-33px;
  bottom:15px;
  -webkit-transform:rotate(180deg);
  -moz-transform:rotate(180deg);
  -ms-transform:rotate(180deg);
  transform:rotate(180deg)
}

.quoteSection .starsDiv > div {}

.experienceSection {
  position:relative;
  margin-top:100px;
  padding-top:75px;
  padding-bottom:100px;
  border-top:12px solid rgb(245,213,50);
  border-bottom:12px solid rgb(245,213,50)
}
.experienceSection .contentWrapper {
  padding-right:50px;
  padding-left:50px
}
.experienceSection .flagCont {
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  background-image:url(../img/flag.webp);
  background-position:center;
  background-size:cover;
  opacity:.2
}
.experienceSection .col-2 > div:nth-of-type(even) {
  margin-top:15px
}
.experienceSection .points span {
  display:block;
  margin-top:9px
}

.contactSection {
  margin-top:0;
  padding:75px 50px;
  color:#000;
  background-color:#eaeaea
}
.contactSection h2 {
  padding-top:0
}
.contactSection .phone {
  display:block;
  margin-bottom:12px;
  color:#000
}
.contactSection .contentWrapper > .col-2 > div:nth-of-type(even) {
  margin-top:33px
}


@media screen and (min-width:777px) {
  h1 {
    font-size: 54px
  }
  .explainerSection .starsDiv {}

  .explainerSection .col-2 > div,
  .quoteSection .col-2 > div,
  .contactSection .contentWrapper > .col-2 > div {display:block;width:100%}

  .contactSection .contentWrapper > .col-2 > div {
    padding:0
  }

  .explainerSection .col-2 > div:nth-of-type(even) {
    padding-left:0;
  }
  .quoteSection .col-2 > div:nth-of-type(odd) {
    padding-right:0;
  }
  .quoteSection .col-2 > div:nth-of-type(even) {
    padding-left:50px
  }

  .quoteSection quote {
    font-size:30px
  }
  .quoteSection quote::after {
    bottom:72px
  }
  .quoteSection quote:nth-of-type(1)::after,
  .quoteSection quote:nth-of-type(2)::after {
    bottom:33px
  }

  .experienceSection .col-2 > div:nth-of-type(even) {
    margin-top:0
  }
}
@media screen and (min-width:870px) {
  .videoSection .contentWrapper {
    padding-right:75px;
    padding-left:75px
  }
  .explainerSection .col-2 > div:nth-of-type(odd) {
    padding-right:25px;
    padding-left:75px
  }
  .quoteSection .pointCont {
    padding-right:75px;
    padding-left:75px
  }
  .quoteSection .col-2 > div:nth-of-type(even) {
    padding-left:75px
  }
  .experienceSection .contentWrapper {
    padding-right:75px;
    padding-left:75px
  }
  .contactSection {
    padding:75px
  }

  .explainerSection .starsDiv,
  .quoteSection .starsDiv {
    height:600px
  }

  .starImg {
    display:inline-block
  }
  .explainerSection .starImg:first-of-type {
    width:35%;
    height:400px;
    margin-right:25px
  }
  .explainerSection .starImg:last-of-type {
    width:40%;
    height:450px;
    margin-top:0
  }
  .quoteSection .starImg:first-of-type {
    width:50%;
    height:400px;
    margin-right:25px
  }
  .quoteSection .starImg:last-of-type {
    width:30%;
    height:450px;
    margin-top:0
  }
}
@media screen and (min-width:966px) {
  #home h1 span {display:inline}
  .videoSection .contentWrapper {
    width:85%
  }
}
@media screen and (min-width:1025px) {
  .contactSection .contentWrapper > .col-2 > div {
    display:inline-block;
    width:50%
  }
  .contactSection .contentWrapper > .col-2 > div:nth-of-type(even) {
    margin-top:0;
    padding-left:20px
  }
}
@media screen and (min-width:1130px) {
  h1 {
    font-size: 65px
  }

  .quoteSection .pointCont {
    margin-top:0;
    padding-left:25px
  }
  .explainerSection .col-2 > div:nth-of-type(odd) {
    padding-left:75px
  }
  .quoteSection .col-2 > div:nth-of-type(even) {
    padding:110px
  }

  .quoteSection quote::before {
    top:80px;
    left:65px
  }
  .quoteSection quote::after {
    right:75px;
    bottom:141px
  }
}

@media screen and (min-width:1130px) {
  h2 {font-size:22px}
  .explainerSection h2 em {font-size:24px}
  .explainerSection .points {font-size:18px}
  .quoteSection quote {font-size:22px}
  .section {
    padding-right:0;
    padding-left:0
  }

  .contactSection {
    padding:75px
  }

  .explainerSection .starsDiv {height:635px}

  .explainerSection .contentWrapper {
    max-width:100%;
    margin-right:0
  }
  .explainerSection .starsDiv {
    height:550px;
    /* was 50px*/
    margin-top:0;
    padding:50px 0 0 0;
    border-left:7px solid rgb(38,56,129)
  }
  .quoteSection .starsDiv {
    height:550px;
    margin-top:50px;
    border-right:7px solid rgb(38,56,129)
  }

  .explainerSection .starImg:first-of-type {
    width:40%;
    height:330px;
    background-position:center
  }
  .explainerSection .starImg:last-of-type {
    width:35%;
    margin-top:0
  }

  .quoteSection .starImg:first-of-type {
    margin-top:0
  }
  .quoteSection .starImg:last-of-type {
    height:310px
  }

  .explainerSection .col-2 > div,
  .quoteSection .col-2 > div {display:inline-block;width:50%}
  .explainerSection .col-2 > div:nth-of-type(odd) {
    /* was 75px*/
    padding-right:0;
    padding-left:75px
  }
  .explainerSection .col-2 > div:nth-of-type(even) {
    margin-top:0;
    padding-right:13px;
    padding-left:75px
  }
  .quoteSection .col-2 > div:nth-of-type(odd) {
    width:calc(50% + 157px);
    padding-top:35px;
    padding-right:75px
  }
  .quoteSection .col-2 > div:nth-of-type(even) {
    width:calc(50% - 157px);
    padding:40px 80px 0 45px
  }

  .quoteSection quote::before {
    top:-25px;
    left:-50px
  }
  .quoteSection quote::after {
    right:-50px;
    bottom:21px
  }

  .experienceSection {
    margin-top:200px
  }
}

@media screen and (min-width:1520px) {
  h2 {font-size:26px}
  .explainerSection h2 em {font-size:28px}
  .explainerSection .points {font-size:22px}
  .quoteSection quote {font-size:30px}

  .explainerSection .starsDiv {
    margin-top:50px
  }

  .quoteSection .col-2 > div:nth-of-type(odd) {
    padding-top:120px
  }

  /*.section {
    padding-right:0;
    padding-left:0
  }

  .contactSection {
    padding:75px
  }

  .explainerSection .starsDiv {height:635px}

  .explainerSection .contentWrapper {
    max-width:100%;
    margin-right:0
  }
  .explainerSection .starsDiv {
    height:550px;
    margin-top:50px;
    padding:50px 0 0 0;
    border-left:7px solid rgb(38,56,129)
  }
  .quoteSection .starsDiv {
    height:550px;
    margin-top:50px;
    border-right:7px solid rgb(38,56,129)
  }

  .explainerSection .starImg:first-of-type {
    width:50%;
    height:330px;
    background-position:center
  }
  .explainerSection .starImg:last-of-type {
    width:25%;
    margin-top:0
  }

  .quoteSection .starImg:first-of-type {
    margin-top:0
  }
  .quoteSection .starImg:last-of-type {
    height:310px
  }

  .explainerSection .col-2 > div,
  .quoteSection .col-2 > div {display:inline-block;width:50%}
  .explainerSection .col-2 > div:nth-of-type(odd) {
    padding-right:75px;
    padding-left:75px
  }
  .explainerSection .col-2 > div:nth-of-type(even) {
    margin-top:0;
    padding-right:13px;
    padding-left:75px
  }
  .quoteSection .col-2 > div:nth-of-type(odd) {
    width:calc(50% + 157px);
    padding-right:75px
  }
  .quoteSection .col-2 > div:nth-of-type(even) {
    width:calc(50% - 157px);
    padding:80px 80px 0 45px
  }*/
}













/* Forms */
/* All Forms */
input, select, option, textarea {font-family:Arial,sans-serif}
form div, .requiredField, optgroup, form div p {font-size:18px;line-height:24px}
/*optgroup {-webkit-appearance:none}*/
.cannotContain {font-size:16px}


.fieldContainer input,
.fieldContainer label {display:block}

form label {color:#000}


.fieldContainer input:focus, .fieldContainer select:focus, select option:focus, textarea:focus, .slider:focus, .switch input:focus + .slider {
  border:3px solid #0B80D6!important;outline:none
}

p.requiredField {margin-top:15px}


.inputForm .fieldContainer {position:relative;margin-top:12px;box-shadow:none}

.fieldContainer input[type="text"],
.fieldContainer input[type="tel"],
.fieldContainer input[type="email"] {
  padding:0 6px 0 12px;
  width:100%;
  line-height:35px;
  border-radius:4px;
  border:3px solid #bbb;
}

.fieldContainer textarea {
  padding:8px 6px 8px 12px;
  width:100%;
  line-height:20px;
  border-radius:4px;
  border:3px solid #bbb;
}

.fieldContainer input.invalid {border:3px solid #be2b28}
.fieldContainer textarea.invalid {border:3px solid #be2b28}

.fieldContainer input.valid {border:3px solid #00dd00;box-shadow:none}


/* Select fields */
.fieldContainer select {
  background-image:url('../img/dropdown.svg');
  background-repeat:no-repeat;
  background-position:right;
  background-size:33px
}
.fieldContainer select {
  position:relative;
  width:100%;
  padding:0 45px 0 12px;
  line-height:35px;
  border-radius:4px;
  border:3px solid #bbb;
  -webkit-appearance:none;
  -moz-appearance:none;
  box-shadow:none
}

.fieldContainer select.invalid,
.updateInStack.invalid {border:3px solid #be2b28;box-shadow:none}
.fieldContainer select.valid {border:3px solid #00dd00}



.formInstruction {
  width: 100%;
  font-size: 18px;
  line-height: 20px
}


.requiredField span, label span.reqAst {color:#ff0000}

.cannotContain {margin-top:2px;padding-top:0!important}
.cannotContain div {
  padding: 8px;
  background-color: #ffeeee;
  border: 1px solid #ddcccc;
  font-size: 12px;
  line-height: 14px;
  border-radius: 2px;
  font-size: 1em;
  line-height: 1.2em
}

#emailField, .emailField {text-transform:lowercase}



/* Form Checkboxes */
form .checkbox {line-height:18px;vertical-align:top}
form .checkbox input[type='checkbox'] {
  width:30px;
  height:24px;
  margin:3px 3px 3px 0;
  line-height:24px;
  padding-right:10px;
  -moz-appearance:none;
  -webkit-appearance:none
}
form input[type='checkbox']:focus {outline:3px solid #0B80D6}
form .checkbox label {
  display:inline-block;
  padding-left:8px;
  vertical-align:top;
  line-height:30px
}



/* Select Buttons */
form > .selectionCont {margin-bottom:10px}
form > .selectionCont p,
form > .selectionCont label {line-height:1.5em}




.inputForm {}

.inputForm .buttonCont {margin-top:30px}


#submitButton {
  padding:0 12px;
  font-size:21px;
  line-height:40px;
  color:#fff;
  background-color:rgb(38,56,129);
  border:1px solid rgb(118, 118, 118);
  border-radius:2px;
  cursor:pointer
}
#submitButton:disabled {
  opacity:.3;
  cursor:default
}





form {font-size:18px;line-height:24px}






#messageBox {
  background-color:#fff;
  width:100%;
  max-width:1000px;
  margin:50px auto 0 auto;
  padding:50px
}

@media screen and (min-width:830px) {
  #messageBox {
    margin:100px auto 0 auto
  }
}

@media screen and (min-width:1300px) {
  #messageBox {
    margin:50px auto 0 auto
  }
}