.section-hero-backgrounds{
  padding:0px;
  background-size: 100% auto!important;
  background-repeat: no-repeat!important;
  background-position: center center!important;
  display:block;
  position:relative;
  margin-top:94px;
  width:100%;
  height:350px;
}

.cta-slider{
  padding:10px 15px;
  display:inline-block;
  margin:5px 0px;
  text-decoration:none;
  position:relative;
  transition:0.1s linear all;
  top:0;
  font-weight:700;
  border-radius:4px; 
}

.cta-slider:hover{
  top:-5px;
}

.cta-light{
    background: transparent;
    color: #0467BE;
    border: 2px solid #0467BE;
    border-radius: 70px;
    font-weight: 500;
    padding: 10px 25px;
}

.banner-one .cta-light{
    background: #0467BE;
    color: #fff;
    border: 2px solid #0467BE;
    border-radius: 70px;
    padding: 12px 30px;
    font-weight: 600;
}
}

.banner-two .cta-light {
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 70px;
    font-weight: 500;
    padding: 10px 25px;
}

.banner-two .cta-light i{
    opacity:0;
    font-size:0;
    transition:0.2s linear all;
    position:relative;
}

.banner-two .cta-light:hover i{
    opacity:1;
    font-size:initial;
}

.banner-two .cta-light:hover {
    top:0;
    color:#fff;
    background:#0467BE;
}

.cta-dark{
  background:#000;
  color:#fff;
}

.cta-orange{
  background:orange;
  color:#fff;
}

.cta-green{
  background:green;
  color:#fff;
}

.section-toggleable-tabs-detail {
    position: absolute;
    width: 100%;
    height: 120%;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: bottom center;
    top: 0;
    z-index:1;
}

  

.section-hero-backgrounds .banner-one, .section-hero-backgrounds .banner-two { 
    display: inline-block;
    position: relative;
    width: 41%;
    vertical-align: middle;
    text-align: left;
    position: absolute;
    height: 100%;
    background-position: top center;
    /*background-size: auto 100%;*/
    background-size: cover;
    background-repeat: no-repeat;
}

.section-hero-backgrounds .banner-one {
    width: 64%;
    border-right: 15px solid #fff;
    left:0;
}

.section-hero-backgrounds .banner-two {
    width: 36%;
    right:0;    
  background-position: bottom center;
}

.content-hero-header-wrapper {
    width: 800px;
    text-align: left;
    position: relative;
    float: right;
    max-width: 90%;
    height: 100%;
    padding: 20px;
    vertical-align: middle;
}

.banner-one .content-hero-header-wrapper{
  float: right;
}

.banner-two .content-hero-header-wrapper{
  float: left;
}

.content-box {
    padding: 20px 30px;
    width: 450px;
    max-width: 100%;
    text-align: left;
    border-radius: 7px;
    margin-top: 20px;
}
.banner-one .content-box {
    /*background: #6a4bd3eb;*/
    /*background: #ffffffeb;*/
}

.banner-two .content-box {
    /*background: #6a4bd3eb;*/
    /*background: #ffffffeb;*/
    margin-left: 40px;
    width:400px;
}

.content-box h1, .content-box h2 {
    text-align: left;
    font-weight: 700;
    margin-top: 0;
    font-size: 35px;
    line-height: initial;
    color: #333;
    line-height: 32px;
}


.content-box h1 {
    font-size: 30px;
}

.content-wrapper{
    text-align: center;
    width: 1170px;
    max-width: 100%;
    margin: 0 auto;
    z-index:2;
    position:relative;
}

.section-section-hero-backgrounds h1 {
    font-weight: 300;
    line-height:30px;
}

@media screen and (max-width: 900px) {

  .section-hero-backgrounds{
    height:400px;
  }

  
  .title-section-hero-backgrounds{
    margin-left:0px;
    text-align:center;
}
  

  
.banner-two .content-box, .banner-one .content-box {
    margin: 0px auto;
    border-radius: 0;
    /*box-shadow: 0px 0px 0px #fff;*/
    padding: 20px 10%;
    width: 100%;
    max-width: 100%;
    margin-top:20px;
}
  
  
    .content-box h1 {
    font-size: 22px;
}
  
  .cta-slider {
    padding: 7px 10px; 
  }

}

@media screen and (max-width: 768px) {
  .section-hero-backgrounds {
    margin-top: 80px!important;
    height:auto;
}
  
  .content-box h1 {
    font-size: 20px;
    text-align:center;
    margin-bottom:10px;
}
  
  
.content-box h2 {
    font-size: 20px;
    text-align:center;
    margin-bottom:10px;
}
  
  .content-box p {
    margin: 0 0 5px;
    font-size: 15px;
    font-weight: 500;
}
  
  .banner-two .cta-light {
    color: #0467be;
    border-radius: 40px;
    padding: 5px 20px;
    background:transparent;
}

  .banner-two .content-box, .banner-one .content-box {
    padding: 20px 15px;
    margin-top:0;
    text-align:center;
    width:100%;
    background: #ffffffcf;
}
  
    .banner-one .content-box {
    /*background: #6a4bd38c;*/
}
  
  .banner-two .content-box {
    /*background: #50b3be9e;*/
}
    
.section-hero-backgrounds .banner-one, .section-hero-backgrounds .banner-two {
    width: 100%;
    padding: 0 0px;
    position:relative;
    display:block;
    border:0;
    background-size: 100% auto;
}
  
   
  .banner-two .content-hero-header-wrapper, .banner-one .content-hero-header-wrapper{
  float:none;
  max-width:100%;
  padding: 0;
  }
  
  .banner-two .content-hero-header-wrapper, .banner-one .content-hero-header-wrapper{
    width:100%;
    padding:0;
  }
  
  .cta-slider {
    padding: 7px 10px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    display: inline-block;
}
  
  .banner-one .cta-light{
        background: #0467BE;
    color: #fff;
    border: 2px solid #0467BE;
    border-radius: 70px;
    padding: 10px 30px;
    font-weight: 600;
}
  
  .banner-one{
    background-size: auto 100%!important;
  }
}
