*{
  margin:0;
  padding:0;
}

  ::selection{
    background: none;
  }

  p::selection{
    background:hsla(74,52%,70%,0.99);
    color:black;
    opacity: 1;
  }

  img::selection{
    background:none;
  }

html, body {
  overflow:hidden;
  background:black;
}




  .overlay{
    z-index:8;
    opacity:0.4;
    position: absolute;
    top:0;left:0;
    width:100vw;height:100vh;
    pointer-events:none; 
    background:radial-gradient(transparent 15%, black 30%);
  }

  .mirror{
    width:30px;
    position: absolute;
    z-index:9;
    top:0;right:0;
    margin:15px;
    opacity:0.7;
    -webkit-transition:50ms;
            transition:50ms;
    -webkit-animation:spin 30s linear infinite;
  }

    @-webkit-keyframes spin{
      0%{-webkit-transform:rotate(0deg)}
      100%{-webkit-transform:rotate(360deg)}
    }

  .mirror:hover{
    opacity: 0.8;
  }

    h1{
      position: absolute;
      top:50%;left:50%;
      -webkit-transform:translate(-50%,-50%);
              transform:translate(-50%,-50%);
      color:black;
      font:500 18px/22px helvetica;
      letter-spacing: 0.5px;
      cursor: default
    }

  .logo{
      position: absolute;
      z-index:5;
      top:52.5%;left:50%;
      -webkit-transform:translate(-50%,-50%);
              transform:translate(-50%,-50%);
      height:10vw;
      width:36%;
      z-index:5;
      -webkit-filter:blur(0px);
              filter:blur(0px);
      transform-style: preserve-3d;
      transform-origin:50% 0%;

  }

    .logo img{
        position: absolute;
        mix-blend-mode:screen;
        width:100%;
        opacity: 1;
    }

  video{
    position:absolute;
    height:70vh;
    top:50%;left:50%;
    -webkit-transform:translate(-50%,-50%);
            transform:translate(-50%,-50%);
    -webkit-filter:blur(5px);
            filter:blur(5px);
     mix-blend-mode:screen;
  }

  footer{
    position:absolute;
    z-index: 10;
    left:50%; bottom:2vw;
    -webkit-transform:translateX(-50%);
            transform:translateX(-50%);
    height:5.25vw;width:80vw;

  }
    .films{
      position:relative;
      float:left;
      z-index: 10;
      width:100%;
      height:100%;
    }

    .films a {
      position: relative;
      float: left;
      height:100%;
      width:8vw;
      padding-right:7vw;
      opacity:0;
    }
    
    	@keyframes hover {
			from {
			    opacity:0;
			}
			to {
			    opacity:0.7;
			}
		}
		
		@keyframes fadein {
			from {
			    opacity:0;
			}
			to {
			    opacity:1;
			}
		}
		
video{opacity:0;}
video,.logo img{
	 animation: fadein 1s normal forwards; 
}

     .films a:nth-child(1){
        background:url(../_assets/filmsw/01.png) center no-repeat;
        background-size: contain;
        width:0vw;
        animation: hover 1s normal forwards; 
		animation-delay: 100ms;
      }
      
      .films a:nth-child(2){
        background:url(../_assets/filmsw/02.png) center no-repeat;
        background-size: contain;
        animation: hover 1s normal forwards; 
		animation-delay: 200ms;
      }
      .films a:nth-child(3){
        background:url(../_assets/filmsw/03.png) center no-repeat;
        background-size: contain;
        animation: hover 1s normal forwards; 
		animation-delay: 300ms;
      }
      
      .films a:nth-child(4){
        background:url(../_assets/filmsw/05.png) center no-repeat;
        background-size: contain;
        animation: hover 1s normal forwards; 
		animation-delay: 400ms;
      }
      .films a:nth-child(5){
        background:url(../_assets/filmsw/04.png) center no-repeat;
        background-size: contain;
        animation: hover 1s normal forwards; 
		animation-delay: 500ms;
      }
      .films a:nth-child(6){
        background:url(../_assets/filmsw/06.png) center no-repeat;
        background-size: contain;
        width:5vw;
        animation: hover 1s normal forwards; 
		animation-delay: 600ms;
      }
      
      
      

    .films a:hover {
      opacity:1!important;
/*       animation:none;; */
    }

    .contact{
      position:relative;
      float: left;
      clear: both;
      bottom:0;left:0;
      font:100 9px/10px helvetica;
      letter-spacing: 1.5px;
      color:white;
    }

      .contact a {
        color:white;
        text-decoration: none;
      }


@media only screen and (max-width: 600px) {
  /*@media only screen and (max-device-width: 600px) {*/

  body{
    position: relative;
    float: left;
    width:100%;
    height:90vh;
    overflow: hidden;
  }

    .overlay{
      display: none;
    }

    footer{
      bottom:5%;
      width:55vw;
      text-align: center;
    }

    #video,
    .films,
    .mirror {
      display: none!important;
    }

    #video-m{
      position:absolute;
      top:50%;left:50%;
      -webkit-transform:translate(-50%,-50%);
      transform:translate(-50%,-50%);
      display: block!important;
      -webkit-filter:blur(10px);
      -webkit-transition:1s;
      width:100vw;
    }

      .mobile-video img{
        width:100%;
      }

    .logo{
      width:80%;
      -webkit-transition:1s;
    }


}

.credits{
	position: absolute;
	opacity:0;
	pointer-events:none;
}