.hero:not(.remove-gradient):before{
 content:"";
 position: absolute;
 left:0;
 top:0;
 width:70%;
 height: 100%;
 z-index: 1;
 background: rgb(255,255,255);
 background: -moz-linear-gradient(90deg, rgba(255,255,255,1) 10%, rgba(255,255,255,0) 100%);
 background: -webkit-linear-gradient(90deg, rgba(255,255,255,1) 10%, rgba(255,255,255,0) 100%);
 background: linear-gradient(90deg, rgba(255,255,255,1) 10%, rgba(255,255,255,0) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1);
}

.hero .content-area {
 padding: 6vh 0;
}

.hero p {
 font-size: 1.15em;
 color:var(--darkBlue);
}

.hero .button{
 font-size:0.75em;
}

.hero .align-center .cols{
    flex: auto;
    width: 100%;
}

.hero .align-center .content-area{
    max-width: 900px;
    width: 100%;
    margin: auto;
}

@media(max-width:768px){
 section.hero{
  background-color: var(--lorange);
  padding-bottom: 0;
 }

 section.hero:before{
  display: none;
 }

 .hero .cols{
  -webkit-box-flex: 1;-ms-flex: auto;flex: auto;max-width: none;min-width: initial;
 }

 .hero .content-area{
  padding: 0;
  text-align: center;
 }

 .hero .content-area .button {
  margin: 0.25em 0.5em;
 }

 .hero .bg-image {
  position: relative;
  height: 16em;
  margin-top: 2em;
 }
}


@media(max-width:480px){
 .hero .bg-image {
  height: 11em;
 }
}