.hero__container {
 min-height:75vh;
 padding:3rem 0;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align:center;
      -ms-flex-align:center;
          align-items:center;
      background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
  position:relative;
}


.hero__wrapper {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align:center;
      -ms-flex-align:center;
          align-items:center;
  -webkit-box-pack:start;
      -ms-flex-pack:start;
          justify-content:flex-start;
  -webkit-box-flex:0;
      -ms-flex:0 1 100%;
          flex:0 1 100%;
}


.hero {
 position:relative;
  -webkit-box-flex:0;
      -ms-flex:0 1 65%;
          flex:0 1 65%;
      padding: 2rem 6rem;
    color: #FFF;
  margin-left:-6rem;
}

.hero h1 {
  font-size:3.5rem;
 <!-- text-transform:uppercase; -->
}

.hero > * {
 position:relative; 
}

@media screen and (max-width:1400px) {
 .hero {
   -webkit-box-flex:0;
       -ms-flex:0 1 85%;
           flex:0 1 85%;
  }
}

@media screen and (max-width:1024px) {
  .hero {
   -webkit-box-flex:0;
       -ms-flex:0 1 100%;
           flex:0 1 100%;
    margin-left:0;
  }
  
  .hero h1 {
   font-size:2.5rem; 
  }
}

@media screen and (max-width:767px) {
 .hero {
   padding:1.5rem;
  }
  
  
}

@media screen and (max-width:500px) {
  .hero {
   padding:1rem; 
  }
  
 .hero h1 {
   font-size:2rem;
  }
}