@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@400;600&display=swap');
/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

body{
  background: #ffffff !important;
  font-family: 'Noto Sans', sans-serif !important;
  font-size: 18px !important;
  line-height: 28px !important;
  color: #3F464E !important;
  margin: 0 !important;
}

a {
color: #3F464E !important; 
font-family: 'Noto Sans', sans-serif !important;
text-decoration: underline !important;
}

a:hover {
color: #0074e5 !important;
}
a:focus {
text-decoration: underline !important;
border: solid 2px #eb1c2d  !important;
}

button:focus {
border: solid 2px #eb1c2d  !important;
}

p{
  font-size: 18px !important;
  line-height: 28px !important;
}

h1 {
font-family: 'Noto Sans', sans-serif !important;
font-weight: 600 !important;
font-size:48px !important;
line-height:48px !important;
}

h2, h2 span {
font-family: 'Noto Sans', sans-serif !important;
font-weight: 600 !important;
font-size:30px !important;
line-height:40px !important;
margin: 0 0 34px 0 !important;
}


h3, h3 span {
font-family: 'Noto Sans', sans-serif !important;
font-weight: 600 !important;
font-size:35px !important;
line-height:48px !important;
margin: 0 0 30px 0 !important;
padding: 0 !important;
}

h4{
display: block;
font-weight: 700 !important;
font-size:22px !important;
line-height:28px !important;
margin: 0 0 20px 0; padding: 0;
}

ul {
padding: 100px 100px !important;  
}

.hbvcontainer{
  max-width: 1100px !important;
  margin: 0 auto !important;
  float: none !important;
}

.headerhbv{
  padding: 25px 0 0 0 !important;
}

.toplogo{
  margin: 30px 0 20px 0 !important;
}

.toplogo img{
  max-width: 220px !important;
}

.col1head{
  padding: 30px 20px 30px 0 !important;
}

.col2head{
  margin-left: 0px !important;
}


.realtop{
  padding: 0px 200px 30px 200px !important;
  text-align: center !important;
}

.realtop p{
  font-size: 24px !important; 
  line-height: 40px !important;
  }

.realimg{
  margin: 0px auto 24px auto !important;
  max-width: 600px !important;
  float: none !important;
}
.realtier2{
  padding: 0 0 0 0 !important;
  max-width: 650px !important;
  margin: 0 auto !important;
  float: none !important;
}
.realtier3{
  padding: 100px 0 100px 0 !important;
}
.realcol1{
  padding-right: 44px !important;
}
.realcol2{
  padding-top: 56px !important;
  padding-left: 44px !important;
}
.infocol{
  padding-top: 56px !important;
  padding-left: 44px !important;
}

.infocol p{
  font-size: 16px !important; 
  line-height: 24px !important;
  background-color: background-color: #f8f9fb !important;
  }  

.q2line{
  padding: 56px 0 56px 0 !important;
}

.q2line hr{
  border-bottom-color: #b0b9c7 !important;
}


.split2{
  padding-top: 80px !important;
}

.endblock{
  margin: 0 auto 300px !important;
  float: none !important;
  max-width: 580px !important;
  text-align: center !important;
}
.endblock p{
  font-size:20px !important;
  line-height:30px !important;
}


.vidcol2{
  padding-left: 90px !important;
}

iframe{
  border-radius: 10px;
}

.copywrite p{
  font-size:12px !important;
  line-height:20px !important;
  text-align: center !important;
}

.copywrite{
  max-width: 700px !important;
  margin: 0 auto !important;
  float: none !important;
  text-align: center !important;
}



.thumbsup{
  margin-bottom: 24px !important;
  padding: 0 !important;
  border-bottom: 1px solid #ccc !important;
}

.chartgroup{
  float: none !important;
  margin: 56px auto 0 auto !important;
  padding: 0 !important;
}

.chartcol1{
  width: 30% !important;
  padding: 110px 30px 0 0 !important;
}

.chartcol2{
  width: 66% !important;
  padding: 0 !important;
}

.charttable td{
  border-bottom: 1px solid #DADFE8 !important;
  text-align: center !important;
  padding: 11px 0 6px 0 !important;
}

.charttable td.td1{
  text-align: left !important;
}

.charttable td.wd{
  width: 50% !important;
}

.charttable td.thn{
  width: 25% !important;
}

.charttable td.chartheadtd{
  border-bottom: 20px solid #ffffff !important;
}

.chartheader, .chartheaderfr{
  border-bottom: 5px solid #0658CE !important;
  display: block !important;
  margin-right: 5px !important;
}

.chartheadergrey, .chartheadergreyfr{
  border-bottom: 5px solid #8B96A7 !important;
  display: block !important;
  margin-left: 5px !important;
}


.chartheadtd{
  border-bottom: 0px !important;
}

.vidgroup{
  text-align: center !important;
  max-width: 700px !important;
  float: none !important;
  margin: 30px auto 10px auto !important;
}

.impactgroup{
  text-align: center !important;
  max-width: 600px !important;
  float: none !important;
  margin: 64px auto 72px auto !important;
}

.hbvid{
  margin: 36px 0 20px 0 !important;
}

.hbvform {
  padding: 100px 0 !important;
}

.formgroup{
  margin: 0 auto !important;
  max-width: 500px !important;
  text-align: center !important;
  display: block !important;
  float: none !important;
}

.grecaptcha-badge{
  margin: 10px auto 10px auto !important;
}

.formgroup input[type="text"],.formgroup input[type="email"]{
  width: 300px !important;
  font-size: 17px !important;
  margin: 5px 0 5px 0 !important;
  padding: 10px !important;
  border: 1px solid #ddd !important;
}

.formgroup label{
  font-size: 17px !important;
}

.formgroup input[type="submit"]{
  padding: 15px !important;
  margin-top: 30px !important;
  background-color:#227FD1 !important;
  border:none !important;
  color:#fff !important;
  font-size: 20px !important;
  border-radius: 4px !important;
}

.formgroup input[type="submit"]:hover{
  background-color:#ddd !important;
  color:#fff;
}

.hs_recaptcha{
  margin-top: 20px !important;
}

.clickdform .maxSize2{
  width: 250px !important;
  padding: 15px !important;
}
.clickdform .maxSize1{
  width: 250px !important;
  padding: 10px !important;
}

.footer{
 color: #ffffff !important;
 padding: 60px 0 !important;
 background-color: #111 !important;
}

.footer p{
  font-size: 12px !important;
  line-height: 20px !important;
}

.footer a{
  color: #fff !important;
  text-decoration: none !important;
}

.footer a:hover{
  color: #ddd !important;
}

.footcol2{
  text-align: right !important;
}

.cta_button{
  margin-top: 5px;
}





@media (max-width: 1180px) {
  
.hbvcontainer{
  padding: 0 40px; !important;
  float: none !important;
}
  
.langnav{
  padding-right: 40px !important;
  padding-left: 40px !important;
  padding-bottom: 0 !important;
  font-size: 17px !important;
}
.vidcol2{
  padding-left: 20px  !important;
  }
  
}

@media (max-width: 950px) {
  
.chartheadergrey, .chartheader, .chartheadergreyfr, .chartheaderfr{
  width: 100px !important;
  margin: 0 auto !important;
}
  
}



@media (max-width: 800px) {
body{
  font-size: 17px !important;
  line-height: 28px !important;
}
  
p{
  font-size: 17px !important;
  line-height: 26px !important;
}  
    
.realtop{
  padding: 30px 0 0 0 !important;
}
.realtop p{
  font-size: 22px !important; 
  line-height: 36px !important;
  }

.realimg{
  margin: 0px auto 20px auto !important;
  max-width: none !important;
}
.realtier2{
  padding: 0 0 0 0 !important;
  max-width: none !important;
}
.realcol1{
  text-align: left !important;
  padding-right: 0 !important;
  }
.realcol2{
  padding-top: 40 !important;
  padding-left: 0 !important;
}
.infocol{
  padding-top: 40 !important;
  padding-left: 0 !important;
}
.infocol p{
  font-size: 16px !important; 
  line-height: 24px !important;
  }  
  
.realtier2 p,   .realtier2 h1{
   text-align: center !important;
  }
.realtier3{
  padding: 20px 0 40px 0 !important;
}
.vidcol2{
  padding-left: 0  !important;
  padding-top: 40px  !important;
  text-align: center  !important;
  }
  
.q2line{
  padding: 30px 0 30px 0 !important;
}
  
.chartcol1{
  width: 100% !important;
  padding: 0 0 30px 0 !important;
  float: none !important;
  text-align: center !important;
} 
.chartcol2{
  width: 100% !important;
  float: none !important;
}
  
.chartgroup{
  margin: 28px auto 0 auto !important;
}
.impactgroup{
  max-width: none !important;
  margin: 40px auto 40px auto !important;
}
.toplogo{
  margin: 30px 0 16px 0 !important;
  text-align: center !important;
}

.col1head{
  padding: 20px 20px 30px 0 !important;
  text-align: center !important;
}

.col2head{
  text-align: center !important;
}
  
.chartheadergreyfr, .chartheaderfr{
  font-size: 15px !important;
  line-height: 18px !important;
  padding-bottom: 8px !important;
}
.chartheadergrey, .chartheader{
  line-height: 22px !important;
  padding-bottom: 8px !important;
}
  
.charttable{
  font-size: 17px !important;
}
.charttable td.wd{
  width: auto !important;
}

.charttable td.thn{
  width: auto !important;

}
.endblock p{
  font-size: 18px !important;
  line-height: 26px !important;
}    







@media (max-width: 639px) {

body{
  font-size: 17px !important;
  line-height: 26px !important;
}
  
p{
  font-size: 17px !important;
  line-height: 26px !important;
}
.realcol2{
  padding-top: 0 !important;
  padding-left: 0 !important;
  }

.infocol{
  padding-top: 10px !important;
  padding-left: 0 !important;
  }
  
.realtop p{
  font-size: 20px !important; 
  line-height: 28px !important;
  }  
  
.copywrite{
  font-size: 12px !important;
  line-height: 18px !important;
}
  
.hbvcontainer{
  padding: 0 30px; !important;
  float: none !important;
}
  

h1 {
font-size: 30px !important;
line-height: 36px !important;
}

h2, h2 span {
font-size: 25px !important;
line-height: 32px !important;
margin: 0 0 10px 0 !important;
padding: 0 !important;
}

h3, h3 span {
font-size:26px !important;
line-height:32px !important;
}

h4{
font-size:20px !important;
line-height:28px !important;
margin: 0 0 20px 0; padding: 0;
}

.endblock{
  margin: 0 auto 300px !important;
  float: none !important;
  max-width: none !important;
  text-align: center !important;
  }
  
 .endblock img{
  max-width: 130px !important;
  }

.formgroup{
  padding-right: 0px !important;
  padding-bottom: 20px !important;
}

.formgroup input[type="text"],.formgroup input[type="email"]{
  width: 100% !important;
  font-size: 18px !important;
}
  
.formgroup input[type="text"],.formgroup input[type="email"]{
  width: 100% !important;
  font-size: 18px !important;
}
.footcol2{
  text-align: left !important;
}