.angled-hero-top {
    background-color: #000f29;
    min-height: 600px;
    margin: 0 auto;
    width: 100%;
}

.angled-hero-top .content-wrapper .left-content {
  width:66%;
  max-width:650px;
  padding:190px 0 250px 0;
}

.angled-hero-top h1, .angled-hero-top p {
  color:#fff;
  margin-bottom:15px;
}

.angled-hero-top h3 {
  color:#00d5d9;
  margin-bottom:15px;
}

.angled-hero-top .content {
  margin-bottom:30px;
  padding-right:40px;
  color:#fff;
}

.angled-hero-top .primary-cta {
  margin-bottom:30px;
}

.angled-hero-top .primary-cta a {
  background-color:#ff4a00;
  color:#fff;
  padding:8px 12px;
  text-decoration:none;
  border-radius:6px;
}

.angled-hero-top .secondary-cta a {
  color:#ff4a00;
  font-size:16px;
  text-transform:uppercase;
  text-decoration:none;
  border-radius:6px;
}

.angled-hero-bottom {
  min-height:300px;
  padding:330px 0 60px 0;
  margin:0 auto;
  margin-top:-300px;    
}

.angled-hero-bottom h2 {
  text-align:center;
  max-width:800px;
  margin:auto;
}

.angled-hero-top {
  background-position: bottom 100px right;
  background-size: 45%;
  background-repeat: no-repeat;
} 

@media screen and (max-width: 767px) {
  .angled-hero-top .content-wrapper .left-content {
    padding-left:15px;
    width:90%;
    padding-bottom: 650px;
  }
  
.angled-hero-top {
  background-size: 90%;
}
  
@media screen and (max-width: 680px) {
  .angled-hero-top .content-wrapper .left-content {
    padding-bottom: 550px;
  }
}
  
@media screen and (max-width: 450px) {
  .angled-hero-top .content-wrapper .left-content {
    padding-bottom: 400px;
  }
}