body{
  font-family: "Sofia", sans-serif;
}

.wrapper .left,
.wrapper .right{
  width:100%;
  height:50vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow:hidden;
  /* background: rgba(0,0,255,1); */
}

.logo{
  margin: 0;
     position: absolute;
     top: 50%;
     left: 50%;
     margin-right: -50%;
     transform: translate(-50%, -50%);
     z-index:8;

}

.logo img{
  display:block;
      width:50%;
      height:50%;
      margin:auto auto;
      max-width:80%;
      transition: .5s ease all;
}

.wrapper .image{
  width:100%;
  height:100%;
  background-size:cover;
  background-position:center;
  position: absolute;
  top: 0;
  left: 0;
  transition: .5s ease all;
}

.littleoaks{
  background:url('images/LittleOaksNursery.png');
}

.firestation{
  background:url('images/OldFireStation.png');
}

.wrapper .caption{
  position: relative;
  z-index: 10;
  color:white;
  text-align: center;
  filter:drop-shadow(0rem 0rem 1.5em black);
}

.wrapper .caption h1{
  text-transform: uppercase;
  letter-spacing: 0.25em;
  padding: .5em;
  margin-top: -2em;
  filter:drop-shadow(0rem 0rem .2em black);
}
.wrapper .caption .button2,
.wrapper .caption .button{
  background: white;
  color: black;
  margin:1em,2em;
  padding: 1em 2em;
  text-decoration: none;
  font-weight: 600;
  font-size:1em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: .5s ease all;
  z-index:15;
}

.wrapper .caption .button:hover{
  background: #16CF00;
  color: white;
  margin:1em,2em;
  padding: 1em 2em;
  text-decoration: none;
  font-weight: 600;
  font-size:1em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: .5s ease all;
  z-index:15;
}

.wrapper .caption .button2:hover{
  background: #D2042D;
  color: white;
  margin:1em,2em;
  padding: 1em 2em;
  text-decoration: none;
  font-weight: 600;
  font-size:1em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: .5s ease all;
  z-index:15;
}





.wrapper .caption .button,
.wrapper .caption .button2:active{
  background: white;
  color: black;
  margin:1em,2em;
  padding: 1em 2em;
  text-decoration: none;
  font-weight: 600;
  font-size:1em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: .5s ease all;
  z-index:15;
}

.wrapper .left:hover .littleoaks{
  opacity:75%;
}
.wrapper .right:hover .firestation{
  opacity:75%;
}

.wrapper .side::before{
  /* background:rgba(0,0,255,0.125); */
  width:100%;
  height:100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  content: '';
  display: block;

}

.wrapper .left:hover .image,
.wrapper .right:hover .image{
  transform: scale(1.2);
}

@media screen and (min-width:1200px) {

    .wrapper{
    display:flex;
    }
    .wrapper .caption h1{
      margin-top: 0em;
    }

    .wrapper .left,
    .wrapper .right{
      width:50%;
      height:100vh;
    }
    /* .logo img{
      max-width:100%;
    } */
}