#main{background: url(../images/auto/header-bg.png) no-repeat; background-size: 100%;}
img {
  vertical-align: middle;
  max-width: 100%;
}
/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
#hero {width: 100%;padding-bottom:0;}
#hero .container {padding-top: 50px;position: relative;}
#hero h1 {margin: 0 0 10px 0;font-size: 32px;line-height: 56px;  color: #fff;text-transform: uppercase;}
.banner-content-1{  float: left; margin-top: 40px;}
.banner-content-1 p{font-size: 18px;color:#F9D4F7;text-align:left;margin-right:60px;}
.hero-img{position: absolute;top:50px;right:-60px;max-width:52%;}

.banner-content-2{margin: 125px 160px 0 0;text-align: right; float: right;max-width: 320px;}
.banner-content-2 p{color:#fff;font-size: 18px;}

.brochure-block{margin-top:40px;}
.brochure{width: 300px;  float: left;    text-align: center;}
.brochure-block p{color:#1D404B;margin: 130px 0 0 20px;max-width: 600px;float:left;}

#hero .animated {
  animation: up-down 2s ease-in-out infinite alternate-reverse both;
}

@media (max-width: 991px) {
  #hero {text-align: center;}
  #hero .animated {-webkit-animation: none;animation: none;}
}

@media (max-width: 700px) {
  #hero .container{    padding-top: 30px;}
  #hero h1 {font-size: 28px;line-height: 36px;}  
  #hero h2 {margin-bottom: 10px;}
  .hero-img img{margin-top: 15px;margin-left:0px;}
  .banner-content-1 p {font-size: 16px;text-align: center;margin-right: 0px;}
  .banner-content-1 { margin-top: 0px;}
  .banner-content-2 {margin: 10px 0;text-align: center;float: right;max-width: 100%;}
  #main{background: url(../images/auto/header-bg-mobile.png) no-repeat;background-size: 100%;}
  .hero-img{position: relative; right: 0;top: 0;max-width: 100%;}
  .features h2 {font-size: 24px;}
  .brochure-block {margin-top: 0px;}
  .brochure {float: none;margin: 0 auto;}
  .brochure-block p {margin: 15px 0;max-width: 100%;}
}
@media screen and (min-width:760px) and (max-width:949px) {
  .banner-content-1 {margin-top: 0px;width: 70%;text-align: left;}
  #hero h1 {font-size: 22px;line-height: 22px;}
  .banner-content-1 p {font-size: 14px;}
  #main {background-size: 110%;}
  .banner-content-2 {margin: 75px 45% 0 0;max-width: 250px;}
  .banner-content-2 p {font-size: 14px;}
  .brochure-block {margin-top: 0;}
.brochure {width: 230px;}
.brochure-block p {margin: 60px 0 0 20px;width: calc(100% - 260px);}

}
@media screen and (min-width:950px) and (max-width:1050px) {
  .banner-content-1 {margin-top: 0px;}
  #hero h1 {font-size: 28px;line-height: 30px;}
  .banner-content-2 {margin: 110px 120px 0 0;}
  .brochure-block { margin-top: 0px;}

}

.Four-blocks{padding-bottom: 0;}
.Four-blocks .col-lg-3{position: relative;padding: 0;}
.Four-blocks .col-lg-3 p{ position: absolute;top: 50%;left: 15%;color: #fff;text-align: center;padding: 20px 0;width:70%;}

@media (max-width: 700px) {
  .Four-blocks {padding: 20px 0;}
  .Four-blocks .col-lg-3 {margin: 0 auto;width: 320px;}
}

@media screen and (min-width:760px) and (max-width:949px) {

.Four-blocks .col-lg-3 {margin: 0 auto;width:25%;}
.Four-blocks .col-lg-3 p {top: 45%;left: 9%;width: 82%;font-size: 12px;}
}
@media screen and (min-width:950px) and (max-width:1050px) {
  .Four-blocks .col-lg-3 p {top:46%;left: 9%;width: 82%;}

}
/*--------------------------------------------------------------
# features
--------------------------------------------------------------*/
.features{padding: 10px 0;
  background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #cccccc 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #cccccc));
background: -webkit-linear-gradient(top, #ffffff 0%, #cccccc 100%);
background: -o-linear-gradient(top, #ffffff 0%, #cccccc 100%);
background: -ms-linear-gradient(top, #ffffff 0%, #cccccc 100%);
background: linear-gradient(to bottom, #ffffff 0%, #cccccc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#cccccc', GradientType=0 );
}
.features h2{text-align: center;margin:20px 0 50px;color:#1D404B;text-transform: uppercase;font-size: 32px;}
.features .box{background-color: #fff;border-radius: 30px;padding:25px; border:1px solid #E8DBEF;margin-bottom:30px;
box-shadow:0px 6px 6px rgba(0,0,0, 0.1);}
.features .box img{width:90px;margin-bottom:20px;float:left;}
.features .box h3{font-size: 20px;font-family: 'Nunito Sans', sans-serif;margin: 36px 20px;float: left;}
.features .box ul{list-style: none;clear:both;margin: 0;  }
.features ul li {padding: 0px 0 15px 30px;position: relative;font-family: 'Nunito Sans', sans-serif;font-size: 16px;}
.features .bx {position: absolute;top: 0;left: 0;background-color: #E9194B;color: #fff;border-radius: 10px;}
.Lower-Loss-Ratio.box h3{color: #8F34BF;}
.features .Lower-Loss-Ratio .bx {background-color:#8F34BF; }
.Improve-Retention.box h3{color: #085990;}
.features .Improve-Retention .bx {background-color:#085990; }
.Top-line-Growth.box h3{color: #55963C;}
.features .Top-line-Growth .bx {background-color:#55963C; }
.Reduce-Expenses.box h3{color: #C78F11;}
.features .Reduce-Expenses .bx {background-color:#C78F11; }
 
@media (max-width: 700px) {
  .Four-blocks {padding: 20px 0;}
  .Four-blocks .col-lg-3 {margin: 0 auto;width: 320px;}
  #features{padding:0;}
}
@media screen and (min-width:760px) and (max-width:949px) {
  #features{padding:0;}
.features h2 {margin: 30px 0 20px;}
#features .col-lg-6{width:50%}
.features .box {padding: 15px;}
.features .box img {width: 60px;}
.features .box h3 {margin: 20px 20px;}
.features .box ul {padding: 0;}

}


/*    styles for big screens    */
@media screen and (min-width:1400px){
   .section nav.navbar .container1 {max-width: 1280px;}
  .container, .container-lg, .container-md, .container-sm, .container-xl {max-width: 1280px; }
  #main {background-position: center -90px;background-size: 1920px;}

  .hero-img {right: -150px;max-width: 55%;}
  #hero h1 {font-size:40px;}
  .banner-content-1 p {font-size: 24px;width: 800px;}
  .button {font-size: 25px;padding: 10px 50px;}
  .banner-content-2 {margin: 100px 0 0 233px;float: left;max-width: 450px;}
  .banner-content-2 p {font-size: 30px;line-height:40px;}
  .brochure-block {margin-top: 48px;}
  .brochure { width: 370px;}
  .brochure-block p {margin: 150px 0 0 20px;max-width: 840px;font-size: 30px;font-weight: 100;line-height: 40px;}
  .Four-blocks .col-lg-3 p {left: 8.5%;line-height: 30px;width: 83%;font-size: 22px;}
  .features h2 {font-size: 40px;}
  .features .box img {width: 150px;}
  .features .box h3 {font-size: 36px;margin: 48px 20px 0 30px;  }
  .features ul li {font-size: 30px;padding: 0px 0 15px 50px}
  .features .bx {border-radius: 15px;top: 8px;}
  .features .box ul {padding-left: 60px;}
  }

  /*=== new modification ===*/

  @media screen and (min-width:1200px) and (max-width:1399px) {
    .banner-content-2 {
      margin: 100px 255px 0 0;
  }
  
  }
  @media screen and (min-width:992px) and (max-width:1199px) {
    .xemplar_auto .banner-content-2 {
      margin: 50px 200px 0 0 !important;
  }
  
  }