open.navy.mil fix

by mrjordy

HTML

<body class="open-text">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <div class="open-header">
        <div class="mobileFog"></div>
        <div class="mastheadImage"></div>
        <div class="header--text d-none d-md-block">
            <h1><strong>Online Public Enterprise, Navy (OPEN)</strong></h1>
            <p>Helping you adopt Cloud Computing to support the Warfighter</p>
            <div class="header--text-subtitle"><i>Looking to implement the Department of Defense's 
                and Department of Navy's "Cloud First" directive? OPEN is a cost-effective option 
                that provides a quick transition to the Cloud.</i></div>
        </div>
    </div>
    <div class="container">
        <div class="d-sm-block d-md-none mx-auto header--alt row">
            <h1><strong>Online Public Enterprise, Navy (OPEN)</strong></h1>
            <p>Helping you adopt Cloud Computing to support the Warfighter</p>
            <div><i>Looking to implement the Department of Defense's 
                and Department of Navy's "Cloud First" directive? OPEN is a cost-effective option 
                that provides a quick transition to the Cloud.</i></div>
        </div>
    </div>
</body>

CSS

/* ---------- new ---------*/
.open-header { /*----- html line 9 -----*/
    width: 100%;
    height: 40vw;
    height: calc(35vw + 60px);
    background: linear-gradient(to top right, #000d1b, #00438b); 
    position: relative;
}
.mastheadImage { /*----- html line 8 -----*/
  background-image: url('http://falconwood.us/wp-content/uploads/2018/08/header.png');
  background-size: calc(35vw + 60px);
  height: calc(35vw + 60px);
  width: auto;
  background-repeat: no-repeat;
  margin-left: calc(65% - 60px);
}
.mobileFog {
  display: none;
}
@media only screen and (max-width: 767px) {
    .mastheadImage {
        background-size: 100vw;
        background-position: 50%;
        margin-left: 0;
    }
    .mobileFog {
      display: block;
      width: 100%;
      height: 100%;
      background: linear-gradient(to top, white, transparent); 
      position: absolute;
    }
}
/* ---------- from style.css ---------*/
.open-header {
    width: 100%;
}

.open-section {
    padding-top: 1em;
    padding-bottom: 1em;
}

.section-colored {
    background-color: rgb(230, 240, 252)
}

.section-colored-gray {
    background-color: rgb(240, 240, 240)
}

.open-text {
    color: rgb(28, 76, 147);
}

.open-list li {
    font-size: smaller;
    margin: 5px;
}

.open-image {
    height: 80px !important;
    margin-bottom: 20px;
}

.column-image {
    width: 50%;
}

.section-subheading {
    color: rgb(241, 148, 46);
    font-style: italic;
}

.header--text {
    position: absolute;
    top: 10%;
    left: 5%;
    max-width: 55%;
    color: whitesmoke;
    font-size: 1vw;
}

.header--text h1 {
    font-size: 4vw;
}

.header--image {
    width: 100%;
}

@media(max-width: 767px) {
    .header--image::after{
        display: block;
        position: relative;
        background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #fff 100%);
        margin-top: -200px;
        height: 200px;
        width: 100%;
        content: '';
    }
}

.header--text-subtitle {
   ...