*{
    margin:0;
    padding:0;
}
@font-face {
    font-family: 'NankiPooNFRegular';
    src: url('nankipoonf-webfont.eot');
    src: url('nankipoonf-webfont.eot?#iefix') format('embedded-opentype'),
         url('nankipoonf-webfont.woff') format('woff'),
         url('nankipoonf-webfont.ttf') format('truetype'),
         url('nankipoonf-webfont.svg#NankiPooNFRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

body {
    height: 100vh;
    width: 100vw;
    font-family: 'NankiPooNFRegular';

}

.wrapper {
	-webkit-overflow-scrolling: touch;
  	overflow-y: scroll;
    height: 100vh;
    width: 100vw;
	/* important:  dimensions or positioning here! */
}

.wrapper iframe {
width:100vw; 
    height: 100vh;
}

i {
    display: block;
    position: absolute;
    width: 30px;
    height:30px;
    top: 30px;
    left: 30px;
    background: url(g0.png);
    -webkit-animation: barrelRoll 2s infinite linear;
 //   -webkit-animation-play-state: paused;
}

i:last-of-type {
    top: 22px;
    left: 56px;
    -webkit-animation-name: invertBarrelRoll;
}

div:hover > i {
    -webkit-animation-play-state: running;
}

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

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

header {
    background-color:#ff0000;
    box-shadow: 0 -1px 2px #0000ff;
    color:#fff;
    display:block;
    height:70px;
    width:100%;
    z-index:100;
}
.head  {
       position: absolute;
        top: 3vh;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
}
header h2{
    font-size:22px;
    font-weight:normal;
    left:50%;
    margin-left:-400px;
    padding:22px 0;
    position:absolute;
    width:540px;
}
th  {
    padding: 64px;
   
}
video#bgvid	{
position: fixed; left: 0; top: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
background: url('11.png') no-repeat;
background-size: cover;

}

.container {
 //   background: url('http://1mycloud.com/myCTE/images/bg.jpg') repeat scroll 0 0 transparent;
    height: 50vh;
    margin: 10px auto;
    width: 30vw;
       position: absolute;
        top: 120px;
        left: 0px;
       // margin-right: -50%;
       // transform: translate(-50%, -50%);
}
.container1 {
 //   background: url('http://1mycloud.com/myCTE/images/bg.jpg') repeat scroll 0 0 transparent;
    height: 50vh;
    margin: 10px auto;
    width: 30vw;
        position: absolute;
        top: 120px;
        left:322px;
      //  margin-right: -50%;
       // transform: translate(-50%, -50%);
}
.container11 {
    height: 50vh;
    margin: 10px auto;
    width: 30vw;
       position: absolute;
        top: 540px;
        left: 22px;
}
.container12 {
    height: 50vh;
    margin: 10px auto;
    width: 30vw;
       position: absolute;
        top: 540px;
        left: 322px;
}
.container2 {
 //   background: url('http://1mycloud.com/myCTE/images/bg.jpg') repeat scroll 0 0 transparent;
    height: 50vh;
    margin: 10px auto;
    width: 30vw;
       position: absolute;
        top: 128px;
        left: 640px;
       // margin-right: -50%;
        //transform: translate(-50%, -50%);
}
.container3 {
 //   background: url('http://1mycloud.com/myCTE/images/bg.jpg') repeat scroll 0 0 transparent;
    height: 50vh;
    margin: 10px auto;
    width: 30vw;
       position: absolute;
        top: 484px;
        left: 624px;
      // margin-right: -50%;
    //    transform: translate(-50%, -50%);
}
/* CSS3 keyframes */
@-webkit-keyframes ckw {
    0% {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}
@-moz-keyframes ckw {
    0% {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}
@-webkit-keyframes cckw {
    0% {
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
    100% {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
}
@-moz-keyframes cckw {
    0% {
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
    100% {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
}

/* gears */
.gear {
    float: none;
    position: absolute;
    text-align: center;

    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;

    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
}
#gear1 {
	
	  background-image: url(66.png), url(g3.png);
  background-position: cover, center;
	background-size: 100%, 75%;
  background-repeat: no-repeat, repeat-y;
   // background: url('66.png') no-repeat 0 0;
    height: 372px;
    left: 1vw;
    top: 1vh;
    width: 256px;
//vertical-align: text-bottom;
    
    -moz-animation-name: ckw;
    -moz-animation-duration: 10s;

    -webkit-animation-name: ckw;
    -webkit-animation-duration: 10s;
}
#gear2 {
		  background-image: url(67.png), url(g4.png);
  background-position: cover, center;
	background-size: 100%, 75%;
  background-repeat: no-repeat, repeat-y;
   // background: url('67.png') no-repeat 0 0;
    height: 376px;
    left: 30vw;
    top: 12vh;
    width: 256px;
    
    -moz-animation-name: cckw;
    -moz-animation-duration: 16.84s;

    -webkit-animation-name: cckw;
    -webkit-animation-duration: 16.84s;
}
#gear3 {
			  background-image: url(68.png), url(g2.png);
  background-position: cover, center;
	background-size: 100%, 75%;
  background-repeat: no-repeat, repeat-y;
  //  background: url('68.png') no-repeat 0 0;
    height: 376px;
    left: 59vw;
    top: 20vh;
    width: 256px;
    
    -moz-animation-name: ckw;
    -moz-animation-duration: 13.5s;

    -webkit-animation-name: ckw;
    -webkit-animation-duration: 13.5s;
}
#gear4 {
    background: url('g4.png') no-repeat 0 0;
    height: 144px;
    right: 5vw;
    top: 35vh;
    width: 144px;
    
    -moz-animation-name: cckw;
    -moz-animation-duration: 20.2s;

    -webkit-animation-name: cckw;
    -webkit-animation-duration: 20.2s;
}
#gear4a {
    background: url('g4.png') no-repeat 0 0;
    height: 8vw;
    right: .1vh;
    top: 31vh;
    width: 8vw;
    
    -moz-animation-name: cckw;
    -moz-animation-duration: 20.2s;

    -webkit-animation-name: cckw;
    -webkit-animation-duration: 20.2s;
}
#gear5a {
    background: url('g1.png') no-repeat 0 0;
    height: 85px;
    right: .2vw;
    top: 49vh;
    width: 85px;
    
    -moz-animation-name: ckw;
    -moz-animation-duration: 10s;

    -webkit-animation-name: ckw;
    -webkit-animation-duration: 10s;
}
#gear6a {
    background: url('g2.png') no-repeat 0 0;
    height: 125px;
    right: 5.25vw;
    top: 52.75vh;
    width: 125px;
    
    -moz-animation-name: cckw;
    -moz-animation-duration: 16.84s;

    -webkit-animation-name: cckw;
    -webkit-animation-duration: 16.84s;
}
#gear7a {
    background: url('g3.png') no-repeat 0 0;
    height: 103px;
    right: .01vh;
    top: 62.25vh;
    width: 103px;
    -moz-animation-name: ckw;
    -moz-animation-duration: 13.5s;

    -webkit-animation-name: ckw;
    -webkit-animation-duration: 13.5s;
}
    
#gear8 {
    background: url('http://1mycloud.com/myCTE/images/Gear-icon.png') no-repeat 0 0;
    height: 256px;
    left: 31px;
    top:5px;
    width: 256px;    
    
    -moz-animation-name: ckw;
    -moz-animation-duration: 22.5s;

    -webkit-animation-name: ckw;
    -webkit-animation-duration: 22.5s;
}
#gear9 {
    background: url('http://1mycloud.com/myCTE/images/g9.png') no-repeat 0 0;
    height: 256px;
    left: 31px;
    top:5px;
    width: 256px;  
    text-align: center;
    vertical-align:middle;
    
    -moz-animation-name: cckw;
    -moz-animation-duration: 22.5s;

    -webkit-animation-name: cckw;
    -webkit-animation-duration: 22.5s;
}