.banner-area .content-wrapper--vertical-spacing,
.banner-area .dnd-section {
  padding: 0;
}

.banner-area .dnd-section>.row-fluid {
  padding: 0; !important
}

.custom-banner-group {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  background-position: 50%;
  background-size: cover;
  background-repeat: no-repeat;
}

.banner-inner {
  position: relative;
  border: 0 solid #333;
  flex-wrap: wrap;
  max-width: 1170px;
  border-style: none;
  height: 396px;
  min-height: auto;
  max-height: none;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0px;
  padding-right: 0px;
  padding-left: 0px;
  margin-top: 0px;
}

.banner-col-left {
  -ms-flex-order: 1;
  order: 1;
  width: 50%;
  margin-right: 0;
}

.banner-col-left {
  margin-top: auto;
  margin-bottom: auto;
  padding-left: 15px;
  position: relative;
  z-index: 2;
  min-height: 1px;
  margin-top: auto;
  margin-bottom: auto;
  float: left;
}

.banner-col-right {
  position: relative;
  z-index: 2;
  mix-blend-mode: unset;
  min-height: 1px;
  margin-top: auto;
  margin-bottom: auto;
}

.banner-inner:after,.banner-inner:before {
  clear: both;
  display: block;
  content: '';
}

.banner-title h1 {
  margin-top: 0px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 20px;
  font-family: 'Roboto',Helvetica,Arial,Lucida,sans-serif;
  padding-bottom: 10px;
}

.banner-title {
  max-width: 420px;
  margin-bottom: 0;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-duration: .2s;
  animation-duration: .2s;
  position: relative;
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
}

.banner-title h2 {
  font-size: 50px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
  font-family: 'Roboto',Helvetica,Arial,Lucida,sans-serif;
  color: #000000;
  padding-bottom: 10px;
}

.banner-button a {
  color: #ffffff;
  border-width: 0px;
  border-radius: 3px;
  font-size: 14px;
  font-family: 'Roboto',Helvetica,Arial,Lucida,sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  background-color: #8e548d;
  padding-top: 6px;
  padding-right: 30px;
  padding-bottom: 6px;
  padding-left: 30px;
  border-color: #03c1ff;
  display: inline-block;
  transition: all 300ms ease 0ms;
  line-height: 1.7em;
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
  transition-property: all;
}

.banner-button a:hover {
  background-color: #b867b7;
}

.custom-banner-group::after {
  background-image: linear-gradient(180deg,#e2e2e2 0px,#ffffff 10px)!important;
  position:absolute;
  left:0;
  width:100%;
  content:"";
  display: block;
  height: 10px;
}

.banner-area .dnd-section>.row-fluid {
  max-width: 100%;
}



@media (min-width:981px){
  .banner-inner{
    display: -ms-flexbox;
    display: flex;
    direction: ltr;
  }
  .banner-col-right {
    -ms-flex-order: 1;
    order: 1;
    margin-right: 0;
    width: 50%;
    float: left;
  }

}


@media (max-width:980px){
  .banner-inner {
    padding-top: 70px;
    padding-right: 0px;
    padding-bottom: 70px;
    padding-left: 0px;
    background-image: initial;
    background-color: initial;
    height: 391px;
    min-height: auto;
    max-height: none;
  }

  .banner-col-left {
    padding-top: 0px;
    padding-bottom: 70px;
    padding-left: 40px;
    width: 500px;
  }

  .banner-button a {
    font-size: 13px;
  }

}


@media (max-width:767px){
  .banner-inner {
    padding-top: 60px;
    padding-bottom: 80px;
    background-image: initial;
    height: auto;
    min-height: auto;
    max-height: none;
  }

  .banner-col-right {
    display: none;
  }

  .banner-col-left {
    padding-top: 0%;
    padding-right: 3%;
    padding-bottom: 0px;
    padding-left: 4%;
    width: 500px;
  }
}


@media (max-width:479px){
  .banner-col-left {
    width: auto;
  }
}