/* Banner CSS */
section.content_form .form-title {
  display:block !important;
  font-size: 25px;
  margin: auto;
  text-align: center;
  width:100%;
}
a.cta.yellow:hover {
    background: #ce8300 !important;
    color: #232323;
}
.herocentraliser {
  max-width: 90%;
  width: 1440px;
  margin-left: auto; 
  margin-right: auto; 
}

section.hero{
  background-repeat: no-repeat;
  padding: 0;
  background-size: cover;
  max-height: 99%; 
}

  section.hero .flexy{
    display: flex;
    align-items: stretch;
    margin-left: -7%;
}

    section.hero div.hero-mobile-image {
      display: none;
  }

section.hero .flexy .herobanner-text{
  width: 50%; 
  float: left;
  min-width: 50%;
  display: flex;
  align-items: center;
  padding-left: 7%;
  background:#EEF2F4 !important;
}
          
.herobanner-blank {
 width: 50%; 
  float: right;
  min-width: 50%;
/*  overflow: hidden; */
}

.herobanner-blank img {
  margin-left: -2px; 
  min-height: 100% !important;
  max-height: 100% !important;
  height: 100%;
  z-index: 30;
}

.video-player {
  margin: auto;
  width: 95%;
  align-items: center;
}

.herobanner-text .hero-vertical-aligner {

}

section.hero .flexy .herobanner-text h5 {
  font-family: 'century-gothic', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 18px;
  line-height: 28px;
  text-transform: uppercase;
  color:#1D3C70;
}
section.hero .flexy .herobanner-text h1 {
  font-family: 'century-old-style-std', serif;
  font-style: normal;
  font-weight: 400;
  font-size: 50px;
  line-height: 50px;
  color:#1B1A26;
  margin:20px 0;
}
section.hero .flexy .herobanner-text div.body p {
  font-family: 'century-gothic', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 17px;
  line-height: 24px;
  color:#1b1a26;
}
/* Mobile herobanner Image */
section.hero div.hero-mobile-image {
  display:none !important;
}
/* Hero Module - END */

@media screen and (min-width: 2400px) {
/*   section.hero .herobanner-blank img {
    display: none !important;  
  } */
  
  section.hero .herobanner-text {
   padding-right: 25px !importat; 
  }

 section.hero .flexy {
  margin-left: 100% !important;
  
  } 
}

@media screen and (min-width: 2180px) {
  section.hero .flexy {
    margin-left: 35% !important; 
  }
}

@media screen and (min-width: 1850px) {
  section.hero .flexy {
    margin-left: 1% !important; 
  }
}

@media screen and (max-width: 1439px) {
 .herocentraliser {
   width: 100% !important;
  }
}
  
@media (max-width: 991px) {
  section.hero .flexy div.hero-mobile-image {
    display:block;
} 
}

  

  
@media screen and (max-width: 767px) {
 /* We need to insert code that transitions the hero section to the mobile design here */ 
.herobanner-text .hero-vertical-aligner {
  padding-top: 25px; 
  padding-bottom: 25px;
 /* margin: 0 4% auto;
    max-width: 99%; */
}


  section.hero div.hero-mobile-image {
    display:block !important;    
    margin: 0 4% auto;
    max-width: 99%;

}
    section.hero {
   background-image: none !important; 
          max-height: 100% !important;
      padding-bottom: 4%;
  }
  
  .herobanner-text {
   width: 100% !important;
   min-width: 100% !important;
  }
  .herobanner-blank {
   display: none; 
  }
  


  
    section.hero .hero-mobile-image img{
    width:100% !important;
    margin-bottom: 25px;
} 
}

@media screen and (max-width: 550px) {
 .herobanner-text h1 {
   font-size: 40px !important;
   line-height: 45px !important;
  }
}
  
@media (max-width: 375px) {
  section.hero .flexy .col a.cta_button.transp {
    margin-left: 0;
  }
  section.hero .flexy .herobanner-text h1 {
    font-size:40px;
    line-height:45px;
  } 
}

  
@media screen and (min-width: 1600px) {
  section.hero {
    background-size: contain !important; 
  } 
}
/* Banner CSS END */
/************************/
/* Content and Form CSS */
.col_image_box {
  margin: 25px auto;
  width: 1444px;
  max-width: 100%;
}


.col_image_box .text-flex {
  display: inline-flex; 
 align-items: flex-start;
  max-width: 100%;
  flex-wrap: wrap;
}

.col_image_box .text-flex .imgage-container {
  width: 40%;
  flex-shrink: 3;
}

.col_image_box .text-flex .text {
    width: 60%;
  padding-top:25px;
}

.col_image_box .text-flex .image-container img {
  display: block;
  max-width: 100%;
  flex-shrink: 3;
}

.text-flex .cta {
}
section.content_form .form-wrapper {
    background-color: #eef2f4;
    margin: -250px auto 0px 25px;
    padding: 40px;
    border-radius: 0px;
    box-shadow: 0px 0px 65px 0px #00000039;
    width:600px;
}

section.content_form form{
  width: 100%;
  background-color: #eef2f4;
  border-radius: 20px;
  margin: 25px auto;
  padding: 0px;
}
section.content_form .text-flex-second {
  align-items: center;
    display: inline-flex;
    max-width: 60%;
}
section.content_form .text-flex-second .col_2 {
  padding:20px;
}
section.content_form .text-flex-second .col_1 img {
  max-width: 250px;
  height: auto;
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  .col_image_box .text-flex {
  display: block !important; 
    text-align: center;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
  
  .col_image_box .text-flex .text ul {
       padding-left: 0 !important; 
  }
  
  .col_image_box .text-flex .text li {
    list-style-position: inside !important; 
  }
  
  .col_image_box .text-flex .text {
    width: 100% !important;
}
  .col_image_box .text-flex .imgage-container {
    margin-left: auto;
    margin-right: auto;
    width: 90%;
  }
}

/* Content and Form CSS END */

/* MISC Mobile and Tablet Breakpoints */
@media only screen and (max-width: 1149px) {
  .col_image_box .text-flex .imgage-container, .col_image_box .text-flex .text {
    width:90%;
    margin:auto;
    margin-bottom:15px;
  }
  section.content_form .text-flex-second {
    max-width: 100%;
    margin: 40px;
  }
  section.content_form form {
    margin:-60px auto 0 0px;
  }
  section.content_form .form-title {
    margin-bottom:80px;
  }
}
@media only screen and (max-width: 767px) {
  section.content_form .form-wrapper {
    margin:-80px auto 0px auto;
    width:100%;
  }
}

@media only screen and (max-width: 770px) {
 section.content_form form {
    margin: -55px auto 0 0;
    text-align: left;
  } 
  section.content_form .form-title {
    display: block !important;
    font-size: 25px;
    margin: auto;
    text-align: center;
    width: 100%;
    margin-bottom: 80px;
  }
}
@media only screen and (max-width: 600px) {
  section.content_form .text-flex-second {
    flex-wrap: wrap;
    justify-content: center;
  }
}
@media only screen and (max-width: 670px) {
  section.midpage .flexer {
    flex-wrap: wrap;
  }
  section.midpage .mid-banner-blank {
   width:100%;
  }
  section.midpage div.mid-banner-blank form .actions {
    width: 60% !important;
    margin: auto !important;
}
  }
}