@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@400;700&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: #0074E5;
font-family: 'Noto Sans', sans-serif !important;
}

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

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

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

h1 {
font-family: 'Libre Franklin', sans-serif !important;
font-weight: 700 !important;
font-size:35px !important;
line-height:45px !important;
}

h2, h2 span {
font-family: 'Libre Franklin', sans-serif !important;
font-weight: 700 !important;
font-size:20px !important;
line-height:28px !important;
margin: 0 0 20px 0 !important;
}


h3, h3 span {
font-family: 'Noto Sans', sans-serif !important;
font-weight: 700 !important;
font-size:30px !important;
line-height:40px !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;
}


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

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

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

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

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

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


.realtop{
  padding: 30px 0 30px 0 !important;
  text-align: center !important;
}
.realimg{
  margin: 120px auto 64px auto !important;
  max-width: 850px !important;
  float: none !important;
}
.realtier2{
  padding: 0 0 0 0 !important;
  max-width: 650px !important;
  margin: 0 auto !important;
  float: none !important;
}
.realtier3{
  padding: 40px 0 100px 0 !important;
}
.realcol1{
  padding-right: 32px !important;
}
.realcol2{
  padding-top: 24px !important;
}

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

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


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

.testimonial{
  margin: 0 auto !important;
  float: none !important;
  max-width: 700px !important;
}
.testimonial 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) {
.realtop{
  padding: 30px 0 0 0 !important;
}
.realimg{
  margin: 80px auto 20px auto !important;
  max-width: none !important;
}
.realtier2{
  padding: 0 0 0 0 !important;
  max-width: none !important;
}
  .realcol1{
  text-align: center !important;
  padding-right: 0 !important;
  }
.realcol2{
  padding-top: 0 !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;
}
  
}





@media (max-width: 639px) {

body{
  font-size: 17px !important;
  line-height: 28px !important;
}
  
p{
  font-size: 17px !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: 28px !important;
line-height: 34px !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;
}

.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;
}

  
}