html, body {
  height: 100%;
  width: 100%;
  margin: 0;

}

.split {

  width: 50%;
  height: 100vh;
  float:left;
  display: grid;
  background: #ECE9E6;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #FFFFFF, #D7D7D7);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #FFFFFF, #D7D7D7); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.centered {
  margin: auto;
  text-align: center;
}

a {
  color: #000;
  text-decoration: none;
}

.left, .right {
  width:50%;
  height:100vh;
  position: fixed;
  z-index: 1000;
  background-repeat: no-repeat;
  background-position: center; 
  float:left;
  
}

p {
  margin-top: 5rem;
  text-transform: uppercase;
}

img {
  width: 300px;
  max-width: 300px;
  margin-top: 2rem;
}

.left{
  background-image: url("img/heroLeft.jpg");
}

.right{
  left: 50%;
  background-image: url("img/heroRight.jpg");
}

@media screen and (max-width:992px) {

  a {
        color: white;

        text-shadow: 2px 2px 4px #000000;
  }

  p {
    margin-top: 2rem;
    color: white;
  }

  .left, .right {
    display: none;
    
  }

.centered {
  margin: auto;
  text-align: center;
 
    background: rgba(0,0,0,0.5);
    padding: 24px;
    border: 1px solid white;
}


  .split {
    width: 100%;
    height: 100vh;
    display: grid;
    background-image: url("img/heroRight.jpg");
    background-repeat: no-repeat;
    background-position: center; 



  }

  .banner {
    display: none;
  }

  .banner .centered {
    display: none;
  }



}