.main{
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin-top: 0;
}

/*video {
  position: fixed;
  left: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}
*/

#top,
#bottom{
  width: 100%;
  height: 45%;
  position: fixed;
  left: 0;
  background-color: black;
  z-index: 100;
  transition-duration: 1s;
}

#top{
  top: 0;
  transform: translateY(-100%);
}

#logo:hover ~ #top{
  transform: translateY(0);
  transition-duration: .2s;
}

#logo:hover ~ #bottom{
  transform: translateY(0);
  transition-duration: .2s;
}

#bottom{
  bottom: 0;
  transform: translateY(100%);
}

@keyframes logob {
  0% {
    -webkit-transform: translate(-50%,-50%) scale(1);
    transform: translate(-50%,-50%) scale(1);

  }

  50% {
    -webkit-transform: translate(-50%,-50%) scale(.9);
    transform:translate(-50%,-50%) scale(.9);
  }

  100% {
    -webkit-transform: translate(-50%,-50%) scale(1);
    transform: translate(-50%,-50%) scale(1);
  }
  }



        .video-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
                iframe {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100vw;
            height: 62vw; 
            min-height: 100vh;
            min-width: 177.77vh;
            transform: translate(-50%, -50%);
            border: none;
        }

#logo{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 25%;
  animation: logob 3s ease ;
  transform-origin: center;
}

.header{
  display: none;
}

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

  

  #logo{
    width: 80%;
  }

  .header{
    display: none;
  }

  iframe{
    pointer-events: none;
  }

  


  }