body {
  margin: 0;
  padding: 0;
  background-color: #000;
  -webkit-transform:translate3d(0,0,0);
}
.wrapper{
  display: flex;
}
.link-sect {
  width:50%;
  height: 100vh;
}
.sect{
  width: 100%;
  height: 100%;
}
.sect:hover > .sect-image{
  cursor: pointer;
  opacity: .6;
}
.sect-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  -webkit-transition: opacity .5s ease-in-out;
  -moz-transition: opacity .5s ease-in-out;
  -ms-transition: opacity .5s ease-in-out;
  -o-transition: opacity .5s ease-in-out;
  transition: opacity .5s ease-in-out;

  -webkit-backface-visibility: hidden;

  /*-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  /*filter: grayscale(100%);*/
}
#gf-sect-image{
  background-image: url("../splash-assets/img/gf-bg-03.jpg");
}
#hhk-sect-image{
  background-image: url("../splash-assets/img/hhk-bg.jpg");
}
.logo{
  z-index: 10;
  align-self: center;
  width: 70%;
  -webkit-transition: width .5s ease-in-out;
  -moz-transition: width .5s ease-in-out;
  -ms-transition: width .5s ease-in-out;
  -o-transition: width .5s ease-in-out;
  transition: width .5s ease-in-out;

  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform:translate3d(0,0,0);
  transform:translate3d(0,0,0);
}
.logo-wrapper{
  display: flex;
  height: 100%;
  align-content: center;
  justify-content: center;
  position: absolute;
  top: 0;
  width: 50%;
}
.logo-wrapper:hover{
  cursor:pointer;
}
#hhk-logo{
}
.sect:hover > .logo-wrapper > #hhk-logo{
  width: 72%;
}
#gf-logo{
}
.sect:hover > .logo-wrapper > #gf-logo{
  width: 72%;
}