*{
padding: 0;
border: 0;
margin: 0;
}

.wrapper{
  position: absolute;
  height: 100%;
  width: 100%;
}

/*.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{
  margin-bottom: 5px;

}/*


/* IMAGE LEFT  */
#sideLeft, #sideRight{
  width: 50%;
  height: 100%;
  background-size: cover;
  /* background-attachment: fixed; */
  background-repeat: no-repeat;
  float: left;
  text-align: center;
  vertical-align: middle;
   filter: grayscale(1);
   -webkit-filter: grayscale(1);
   cursor: pointer;
}

#sideLeft{
background-image: url('../img/p2.jpg');
left: 0;
background-position: 63% 20%;



}
#sideRight{
  background-image: url('../img/p1.jpg');
  right: 0;

}

#ttlLeft, #ttlRight {

  font-size: 35px;
  color: white;
  /* text-shadow: 0px 0px 3px #800000; */
}


.subTtlRight, .subTtlLeft {

  font-size: 20px;
  color: white;
  /* text-shadow: 0px 0px 3px #800000; */

}

#ttlLeft{



}

#subTtlLeft{


}

/*IMAGE RIGHT */


#ttlRight{



}

#subTtlRight{


}


/* ANIMATIONS */

#sideLeft:hover, #sideRight:hover{
  transition: all 0.3s ease-in;
  filter: grayscale(0);
  -webkit-filter: grayscale(0);

}

#sideLeft:hover{
   z-index: 10;
   position: relative
  -webkit-box-shadow: 11px 0px 16px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 11px 0px 16px 0px rgba(0,0,0,0.75);
  box-shadow: 11px 0px 16px 0px rgba(0,0,0,0.75);
}


/* RESPONSIVE */
@media screen and (max-width: 900px){


  #ttlLeft, #ttlRight {

    font-size: 25px;

  }


  .subTtlRight, .subTtlLeft {

    font-size: 15px;

  }



}



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


  #ttlLeft, #ttlRight {

    font-size: 20px;

  }


  .subTtlRight, .subTtlLeft {

    font-size: 12px;

  }



}