@font-face {
    font-family: 'kremlin_bolshevikbold';
    src: url('font/kremlin-webfont.eot');
    src: url('font/kremlin-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/kremlin-webfont.woff2') format('woff2'),
         url('font/kremlin-webfont.woff') format('woff'),
         url('font/kremlin-webfont.ttf') format('truetype'),
         url('font/kremlin-webfont.svg#kremlin_bolshevikbold') format('svg');
    font-weight: normal;
    font-style: normal;

}


html {
	margin: 0;
	background: black;
	height: 100%;
  background: url(images/bgtile.png);
}

  body {
    margin: 0 auto;
    width: 900px;
    height: inherit;
    position: relative;
  }

.thumb p {
  font-family: 'kremlin_bolshevikbold';
  padding: 20px;
  font-size: 20px;
  letter-spacing: 2px;
  text-align: center
}

  /* code to style the 3 x 3 lattice of windows,
     and the animations applied to each */

  body > div {
    height: 300px;
  }

  .thumb {
  	float: left;
  	width: 300px;
  	height: 100%;
    outline:none;

    position: relative;

    -webkit-transition: 0.6s all;
    -moz-transition: 0.6s all;
    -ms-transition: 0.6s all;
    transition: 0.6s all;

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }

  .thumb > img {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;

    opacity: 0.8;

    top: 0;
    left: 0;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;

    -webkit-transform-origin: center;
    -moz-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;

    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);

    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    transition: all 0.4s;

    z-index: 2;
    cursor: pointer;
  }

  .backface {
    width: 100%;
    height: 100%;
    background: black;
    color: white;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;

    cursor: pointer;
  }

  .thumb > img:hover {
    opacity: 1;

    -webkit-transform: scale(1.04);
    -moz-transform: scale(1.04);
    -ms-transform: scale(1.04);
    transform: scale(1.04);

    z-index: 10;
  }

  .rotated {
    -webkit-animation: rotate 1s both;
    -moz-animation: rotate 1s both;
    -ms-animation: rotate 1s both;
    animation: rotate 1s both;
  }

  .rotated-back {
    -webkit-animation: rotate-back 1s both;
    -moz-animation: rotate-back 1s both;
    -ms-animation: rotate-back 1s both;
    animation: rotate-back 1s both;
  }

  @keyframes rotate {
    from {transform: rotateY(0deg);}
    to {transform: rotateY(180deg);}
  }

  @keyframes rotate-back {
    from {transform: rotateY(180deg);}
    to {transform: rotateY(0deg);}
  }

  @-webkit-keyframes rotate {
    from {-webkit-transform: rotateY(0deg);}
    to {-webkit-transform: rotateY(180deg);}
  }

  @-webkit-keyframes rotate-back {
    from {-webkit-transform: rotateY(180deg);}
    to {-webkit-transform: rotateY(0deg);}
  }

  @-moz-keyframes rotate {
    from {-moz-transform: rotateY(0deg);}
    to {-moz-transform: rotateY(180deg);}
  }

  @-moz-keyframes rotate-back {
    from {-moz-transform: rotateY(180deg);}
    to {-moz-transform: rotateY(0deg);}
  }

  @-ms-keyframes rotate {
    from {-ms-transform: rotateY(0deg);}
    to {-ms-transform: rotateY(180deg);}
  }

  @-ms-keyframes rotate-back {
    from {-ms-transform: rotateY(180deg);}
    to {-ms-transform: rotateY(0deg);}
  }


/* 1. top left corner:
   code to style the video */

.first-row > .thumb:nth-child(1) video {
  width: 100%;
  margin-top: 30px;
}

/* 3. top right corner:
   code to stop the iframe breaking out of the container */

.backface iframe {
  max-width: 100%;
}

/* 6. and 7. - center right and bottom left
   code to style the video */

.second-row > .thumb:nth-child(3) video,
.third-row > .thumb:nth-child(1) video {
  width: 100%;
  margin-top: 30px;
}

.second-row > .thumb:nth-child(3) video + .video-overlay,
.third-row > .thumb:nth-child(1) video + .video-overlay {
  width: 64px;
  height: 64px;
  top: 118px;
  left: 118px;
  position: absolute;
  background: url(images/play-icon-64.png) center no-repeat;
  opacity: 0.5;
  transition: all 0.6s;
  cursor: pointer;
}

.second-row > .thumb:nth-child(3) video + .video-overlay:hover,
.third-row > .thumb:nth-child(1) video + .video-overlay:hover {
  opacity: 1;
}

/* 4. and 8.: center and bottom right
   code to style static images */

.backface > img {
  width: 100%;
  height: 100%;
}

/* facebook icon */

a[href="https://www.facebook.com/vulturiceye"] {
  display: block;
  position: absolute;
  top: 3px;
  left: 3px;
  z-index: 3000;
  opacity: 0.3;

  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  transition: all 0.4s;
}

a[href="https://www.facebook.com/vulturiceye"] img {
  width: 70%;
}

a[href="https://www.facebook.com/vulturiceye"]:hover {
  opacity: 1;
}