@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,700);

body { margin: 0; padding: 0; font-family:"Poppins",Arial,Tahoma,sans-serif; font-size:15px; font-weight:300; background: #fff;  color:#202020;}

p { line-height: 1.6em; padding: 5px 0; margin: 5px 0; }

h1{font-weight:300; color:#0b233f ;}

h2 { font-weight:300; color:#0b233f ; font-size: 30px; margin:0;}

h3 { font-size: 20px; font-weight:300; color:#0b233f ; margin-bottom:0; }

a { color: #666; text-decoration: underline; /*color: #fff;*/ }


/*select{
        width: 100%;
    text-align: left !important;
    vertical-align: middle;
    cursor: pointer;
    background: #f7f7f7;
    border: 1px solid #e0e0e0;
    margin: 0;
    font-size: 20px;
    position: relative;
    margin-top: 10px;
    display: block;
}*/
 
.rank,.perce {
    display: inline-block;
    margin: -2px;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background: #f7f7f7;
    border: 1px solid #e0e0e0;
    margin: 0;
    font-size: 20px;
    position: relative;
}

 
/*----------------------------------------------------------------------------------
    Global Layout styles
-----------------------------------------------------------------------------------*/

.header { background: #0b233f none repeat scroll 0 0; box-shadow: 0 -1px 8px -2px #222; color: white; display: block; height: 130px; position: fixed; width: 100%; z-index: 99; }

.header-content { max-width: 1280px; width: auto; margin: 0 auto; display: table; position: relative; }


@media all and (min-width: 768px) {

    .header { height: 88px; }

    .header-content { width: 100%; }
}

/*mobile modified*/
@media all and (max-width: 736px) {

    .header { height: 75px; }

    .header-content { float: left; margin-left: 15px; }
}




.logo { float: left; margin-left: 0px; margin-top: 25px; }

.logo img { max-width: 180px; margin: 0; padding: 0; width: 100%; }


@media all and (min-width: 768px) {

    .logo { margin-left: 20px; }
}



@media all and (min-width: 1280px) {

    .logo { margin-left: 65px; margin-top: 25px; }

    .logo img { max-width: 180px; margin: 0; padding: 0; width: 100%; }
}

/*mobile modified*/
@media all and (max-width: 736px) {

    .logo { }

    .logo img { max-width: 120px; }
}


.main { padding-top: 128px; padding-bottom: 150px; background: url(images/featured-bg-environment-2.jpg) no-repeat fixed center 0 #fdfdfd; background-size: cover;    max-height: 208vh;min-height: 100vh;}


@media all and (min-width: 768px) {

    .main {   padding-bottom: 150px; }
}


/*mobile modified*/
@media all and (max-width: 736px) {

    .main { padding-top: 70px; padding-bottom: 100px; }
}


@media all and (max-width: 414px) {

    .main {  padding-bottom: 200px; }
}




.container { max-width: 840px; width: 90%; position: relative; margin: 0 auto; display: table; background: #fff;  border:1px solid #e0e0e0; }


@media all and (min-width: 768px) {

    .container { width: 90%; }
}



/*error main wrapper*/

.errorMain{background:none;}

.errorMain > .container{border:none;}
/* padding: 20% 0px; */
.errorMain > .container > .main-content > div{  text-align:center;}

.errorMain > .container > .main-content > div h1{margin-bottom:0;}

.errorMain > .container > .main-content > div p{margin-top:0;}


@media all and (max-width: 768px) {

  .errorMain > .container > .main-content > div{padding: 45px 0px; }
}

/*.errorMain + .footer { box-shadow: none; }*/

.errorMain + .footer .footer-legal { margin-left: 0; text-align: center; width: 100%; max-width:none; }


@media all and (max-width: 736px) {

    .errorMain + .footer{position:relative;}
    }

@media all and (max-width: 768px) {

    .errorMain > .container > .main-content > div a.button { display: block; margin: 0 auto; width: 90%; }
}




/*----------------------------------------------------------------------------------
    Footer Styles
-----------------------------------------------------------------------------------*/


.footer {
bottom: 0;
 display: block;
  /* position: fixed;  */
width: 100%;
 background: white;
height: 75px;
/* box-shadow: 0 0 8px -2px #666; */
}

.footer-content { color: #666; height: 75px; margin: 0 auto; max-width: 840px; text-align: center; }


.footer-legal { text-align: left; margin: 0 0 0 15px;   width: 60%; margin-top: 8px; }

.footer-legal p { font-size: 10px; font-weight: normal; line-height: normal; margin: 0; padding: 0; }




@media all and (min-width: 850px) {

    .footer-legal { margin: 0 auto; width: 100%; margin-top: 8px; }
    .footer-legal p { font-size: 12px; }
}



/*mobile modified*/
@media all and (max-width: 736px) {

    .footer-legal { margin-left: 10px; width: 66%; }
    .footer-legal p { font-size: 10px; }
}

@media all and (max-width: 320px) {

    .footer-legal { width: 63%; }
    .footer-legal p { font-size: 9px; }
}




/*----------------------------------------------------------------------------------
    Footer Naviation buttons
-----------------------------------------------------------------------------------*/

.arrow-navigation {  bottom: 15px; position: absolute; right: 20px; }

.arrow-nav-btn { background: #0d73ba none repeat scroll 0 0; border: 2px solid white; border-radius: 5px; box-shadow: -1px 0 6px -2px #666; color: white; font-size: 32px; padding: 2px; width: 43px; margin-left:3px;}

.arrow-nav-btn:hover { background: #005692 none repeat scroll 0 0; color: #ffd520; }



.arrow-nav-btn_back { background: #0d73ba none repeat scroll 0 0; border: 2px solid white; border-radius: 5px; box-shadow: -1px 0 6px -2px #666; color: white; font-size: 14px; padding: 2px; width: 43px; margin-left:3px;}

.arrow-nav-btn_back:hover { background: #005692 none repeat scroll 0 0; color: #ffd520; }

/*mobile modified*/
@media all and (max-width: 736px) {

     .arrow-navigation{right:10px; bottom:15px;}
    }



/*----------------------------------------------------------------------------------
    Presidents introduction blurb
-----------------------------------------------------------------------------------*/

.intro-section{}

.main-content{}

.welcome-message{ padding:35px; padding-top:45px; padding-bottom:0; display:table; margin-bottom:20px; border-bottom:1px solid #ccc;}


/*mobile modified*/
@media all and (max-width: 736px) {

   .welcome-message{ padding:20px; padding-top:35px;}
    }


.welcome-message p { clear: left;  padding-right: 20px; }

@media all and (min-width: 768px) {

   .welcome-message p{ text-align:justify;}
    }

/*mobile modified*/
@media all and (max-width: 414px) {
    .welcome-message { padding-top: 20px; }
}


.president-block {  }


.president-block h2 { float: left; }

.president-responsive-img { float: right; margin-left: 20px; max-width: 180px; margin-top: 10px; }

@media all and (min-width: 768px) {

    .president-responsive-img { margin-top: -20px; }
}


/*mobile modified*/
@media all and (max-width: 414px) {

    .president-block { clear: both; display: table; float: none; vertical-align: middle; }

    .president-block h2 { display: table-cell; font-size: 30px; float: none; line-height: 32px; position: relative; width: auto; vertical-align: middle; }

    .president-responsive-img { max-width: 140px; float: right; margin-left: 0; margin-top: 0; }
}


@media all and (max-width: 320px) {


    .president-block h2 { margin-top: 13px; width: auto; }

    .president-responsive-img { max-width: 100px; float: right; }
}


.requiredMsg{font-weight:normal;}

@media all and (max-width: 320px) {

    .requiredMsg{font-size:12px;}
   
}


/*----------------------------------------------------------------------------------
   Action Section block
-----------------------------------------------------------------------------------*/


.action-section-block{padding:20px 15%; }





/*mobile modified*/
@media all and (max-width: 736px) {

.action-section-block{padding:20px 20px;}
}




/*----------------------------------------------------------------------------------
    General Btn
-----------------------------------------------------------------------------------*/


.text-center{display:block; margin:0 auto; text-align:center;}

.no-wrap{white-space:nowrap;}

.button, a.button { background: #0b233f  none repeat scroll 0 0; border: 0 none;  color: #ffd520; color:white; font-size: 16px; font-weight: bold; padding: 20px 40px; line-height:16px; transition: background-color 300ms ease-out; outline:0; letter-spacing:0.03em; text-decoration:none;}

.button:hover,.button:active, .button:focus{background: #0b233f none repeat scroll 0 0; color: #ffd520; }





.small-round-button{  padding: 12px 13px; border-radius:5px;     margin-top: 7px;}


.padding-remove-below{padding-bottom:0;}

.icon-below-space { color: white; font-size: 30px; height: 29px; line-height: 0; margin-top: -5px; }




/*----------------------------------------------------------------------------------
    Survey form questions styles
-----------------------------------------------------------------------------------*/


.question-block{ padding:20px 15%;}


/*mobile modified*/
@media all and (max-width: 736px) {

 .question-block{ padding:20px 20px;}
}

@media all and (max-width: 320px) {

 .question-block{ padding:20px 15px;}
}



.errorBlock{border:1px solid red;}

.form1a { padding: 10px 4px; width: 40%; font-weight: bold; width:auto;}

.form1b { padding: 10px 4px; width: 60%; width:100%; font-weight: bold; }

.form_text { padding: 10px 4px; width: 60%; width:100%; padding:0 4px; }

.form4 { padding: 10px 4px; text-align: center; width: 15%; width:100%;  }

.form5 { padding: 10px 4px; text-align: center; width: 12%; font-size: 10px; }
.form5-L { padding: 0 0 0 30px; }
.form5-R { padding: 0 30px 0 0; }



.form_text { text-align: center; }
.form_text textarea,
.form_text input { width: 92%; width:100%; margin-left: 14px; margin-left:0; padding: 5px;  background:#f7f7f7; border:1px solid #e0e0e0;

font-size:20px; color:#006bb6;


}

/*mnumbers table*/
.numbers_table{ display:table;}

.numbers_table td{display:table-cell; width:10%;}


.numbers_table td input[type="radio"] + label { border-left: 0 none; color: #006bb6; display: block; font-weight: bold; font-size:17px; padding: 15px 12px; }


.numbers_table td:first-child input[type="radio"] + label{border-left:1px solid #e0e0e0;}

.numbers_table td input[type="radio"]:checked + label::after{content:"";}

.numbers_table td input[type="radio"]:checked + label{background:#006bb6; color:white;}


 
@media all and (max-width: 414px) {

    .numbers_table td input[type="radio"] + label { font-size: 16px; min-width: 18px; padding: 10px 0; }
}








/*----------------------------------------------------------------------------------
    Styles for validation helpers
-----------------------------------------------------------------------------------*/

/*.field-validation-error { background: #be1e2d none repeat scroll 0 0; border-radius: 3px; color: white; font-size: 13px; margin: 3px; padding: 3px; }


.field-validation-error:before{width: 0;
height: 0;
border-style: solid;
border-width: 0 5px 7px 5px;
border-color: transparent transparent #be1e2d transparent;
}*/




.field-validation-error {
	position: relative;
	background: #be1e2d;
    color:white;
    font-size:13px;
    padding:3px 5px; 
    border-radius:3px;
    top:0px;
    margin-left:10px;
    font-weight:400;
    box-shadow: 1px 1px 2px -1px #666;
}

.field-validation-error:after {
	bottom: 100%;
	left: 0;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(190, 30, 45, 0);
	border-bottom-color: #be1e2d;
	border-width: 5px;
	margin-left: 10px;
}







.field-validation-valid { display: none; }

.input-validation-error { /*border: 1px solid #ff0000;
    background-color: #ffeeee;*/ }

.validation-summary-errors { font-weight: bold; color: #ff0000; }

.validation-summary-valid { display: none; }


/*----------------------------------------------------------------------------------
    Survey form styles
-----------------------------------------------------------------------------------*/

input[type=radio] { display: none; }

input[type=radio] + label { display: inline-block; margin: -2px; padding: 6px 12px; margin-bottom: 0; font-size: 14px; line-height: 20px; text-align: center; vertical-align: middle; cursor: pointer; background: #f7f7f7; border: 1px solid #e0e0e0; margin: 0; font-size: 20px; position: relative; }
input[type=checkbox] + label { display: inline-block; margin: -2px; padding: 6px 12px; margin-bottom: 0; font-size: 14px; line-height: 20px; text-align: center; vertical-align: middle; cursor: pointer; background: #f7f7f7; border: 1px solid #e0e0e0; margin: 0; font-size: 20px; position: relative; }


@media all and (max-width: 414px) {

   input[type=radio] + label { font-size:13px; }
   input[type=checkbox] + label { font-size:13px; }
   h3{font-size:16px; margin-top:0;}
   
   
   .radioblock label {font-size: 13px;}
   .radioblock1 label {font-size: 13px!important;}
}
.rank  div
{
	width:85%!important;
}


/*@media all and (width: 360px) {

   input[type=radio] + label { font-size:16px; }
   h3{font-size:18px; }
}*/



input[type=radio]:checked + label { background-image: none; outline: 0; -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05); -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05); box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05); box-shadow: none; background-color: #eeeeee; }

input[type=radio]:checked + label:after { font-family: Ionicons; content: "\f122"; font-size: 32px; padding: 0; color: #006bb6; position: absolute; display: block; border: 0; width: auto; float: right; padding-left: 10px; top: 0; margin-top: 15px; right: 0; margin-right: 15px; }


.checkbox-for-checked { background-image: none; outline: 0; -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05); -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05); box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05); box-shadow: none; background-color: #eeeeee; }

.checkbox-for-checked:after { font-family: Ionicons; content: "\f122"; font-size: 32px; padding: 0; color: #006bb6; position: absolute; display: block; border: 0; width: auto; float: right; padding-left: 10px; top: 0; margin-top: 15px; right: 0; margin-right: 15px; }




/*special buton thing for textareas*/
.form_text textarea + .button_wrap, .form_text input[type=text] + .button_wrap { background: #f7f7f7 none repeat scroll 0 0; border: 1px solid #e0e0e0; display: block; font-size: 20px; line-height: 20px; margin: 10px 0 0; padding: 7px 7px; position: relative; text-align: left; vertical-align: middle; min-width: 80px; display:table;}


.button_wrap > span { color: #006bb6; font-size: 14px; padding-left: 3px; }

.button_wrap{ margin-top:5px; margin-left:5px}
.radioblock { padding: 4px; text-align: left; max-width: 700px; font-size: 10px; }

.radioblock label { width: 100%; text-align: left !important; }

.radioblock label span:first-child { border: 1px solid #a8cae2; padding: 8px; display: table-cell; line-height: 11px; font-weight: bold; color: #4585c1; text-align: center; font-size: 17px; vertical-align: middle; float: left; margin-top: 3px; }


.radioblock label span:nth-child(2) { padding: 7px 7px; display: table-cell; line-height: 25px; padding-right: 35px; }



.radioblock input[type=radio]:checked + label span:first-child{background:#006bb6;  border: 1px solid #006bb6;  color:#ffd520;color:white;}




.radioblock1 { padding: 4px; text-align: left; max-width: 700px; font-size: 10px; }

.radioblock1 label { width: 100%; text-align: left !important;    display: inline-block;
    margin: -2px;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background: #f7f7f7;
    border: 1px solid #e0e0e0;
    margin: 0;
    font-size: 20px;
    position: relative; }

.radioblock1 label span:first-child { border: 1px solid #a8cae2; padding: 8px; display: table-cell; line-height: 11px; font-weight: bold; color: #4585c1; text-align: center; font-size: 17px; vertical-align: middle; float: left; margin-top: 3px; }


.radioblock1 label span:nth-child(2) { padding: 7px 7px; display: table-cell; line-height: 25px; padding-right: 35px; }



.checkbox-for-checked span:first-child{background:#006bb6!important;  border: 1px solid #006bb6!important;  color:#ffd520!important;color:white!important;}


input[type=checkbox] {
    display: none;
}

/*----------------------------------------------------------------------------------
    Fixed Progress Bar styles
-----------------------------------------------------------------------------------*/


.question { opacity: .30;  outline:0; margin: 20px 0; }


/*mobile modified*/

/*@media all and (max-width: 414px) {

    .question { margin: 48% 0 0; min-height: 500px; }
}

@media all and (max-width: 320px) {

    .question {  margin: 40% 0 0; min-height: 400px; }
}*/


#Q1.question{margin-top:0;}



@media all and (max-width: 320px) {

   #Q1.question{}
}



.increaseopacity { opacity: 1; }

.progress-block { color: #ffd520; display: block; font-size: 16px; font-weight: 500; margin-top: 75px; max-width: 840px; position: fixed; top: 0; width: 90%; z-index: 100; }


@media all and (min-width: 768px) {

    .progress-block { margin-top: 22px; width: 100%; }
}

/*mobile modified*/
@media all and (max-width: 736px) {

    .progress-block { margin-top: 20px; font-size: 14px; width: 93%; }
}


#fixed-progress { }

#progressholder { text-align: center; max-width: 250px; width: 100%; margin: 0 auto; }


.bar { background-color: #fff; border-radius: 4px; box-shadow: 4px 10px 8px -11px #000 inset; height: 8px; margin: 3px auto auto; width: 250px; z-index: 1; }


/*mobile modified*/
@media all and (max-width: 736px) {

    #progressholder { float: right; margin: 0; max-width: 170px; }

    .bar { max-width: 140px; }
}


#progress { height: 8px; border-radius: 4px 0 0 4px; z-index: 2; background-color: #05a3c6; background: url(images/progress-bar.png) repeat-x 0 0 transparent; transition: 0.4s linear; transition-property: width, background-color; }

#log { display: none; }

#content {
  width: 100%;
}

@media (max-width: 480px) {
  .main {
    height: auto !important;
  }
  #content {
    position: static !important;
    height: auto !important;
      top: auto;
  left: auto;;
  transform: none;
  }
  .question-block {
    padding: 20px 10% 0 3% !important;
  }
  .footer {
    position: static !important;
    box-shadow:none!important;
  }
.footer-legal {
    padding: 0px;
    width: 90%!important;;
}
#Q9 .perce div:first-child
{
width: 72%;
}
.button_wrap {
    margin-top: 25px;
   
}
a.button {
  width: auto
}

*{
  box-sizing: unset !important
}
 
}


.main {
padding-top: 150px;
/*padding-bottom: 200px;*/
background: url(images/featured-bg-environment-2.jpg) no-repeat fixed center 0 #FDFDFD;
background-size: cover;
/*height: 100%;*/
}