@charset "UTF-8";
#container {
	position: absolute;
	width: 1100px;
	height: 600px;
	z-index: 1;
	top: 0px;
	margin:0 auto;
	background-color: #FFFFFF;
}
#sites {
	position: absolute;
	width: 174px;
	height: 57px;
	z-index: 7;
	left: 73px;
	top: 64px;
}
#N {
	position: absolute;
	width: 105px;
	height: 109px;
	z-index: 8;
	left: 206px;
	top: 79px;
}
#such {
	position: absolute;
	width: 173px;
	height: 57px;
	z-index: 8;
	left: 270px;
	top: 132px;
}
#Photography {
	position: absolute;
	width: 224px;
	height: 45px;
	z-index: 6;
	left: 492px;
	top: 14px;
	-webkit-transition: all 1s ease-in 0s;
	-moz-transition: -moz-transform 1s ease-in 0s;
	-ms-transition: all 1s ease-in 0s;
	-o-transition: all 1s ease-in 0s;
	transition: transform 1s ease-in 0s;
}
#Website {
	position: absolute;
	width: 140px;
	height: 34px;
	z-index: 6;
	left: 490px;
	top: 105px;
	-webkit-transition: all 1s ease-in 0s;
	-moz-transition: -moz-transform 1s ease-in 0s;
	-ms-transition: all 1s ease-in 0s;
	-o-transition: all 1s ease-in 0s;
	transition: transform 1s ease-in 0s;
}
#Print {
	position: absolute;
	width: 87px;
	height: 31px;
	z-index: 6;
	left: 679px;
	top: 108px;
	opacity:0;
	-webkit-transition: all 1s ease-in 0s;
	-moz-transition: -moz-transform 1s ease-in 0s;
	-ms-transition: all 1s ease-in 0s;
	-o-transition: all 1s ease-in 0s;
	transition: transform 1s ease-in 0s;
}
#Identity {
	position: absolute;
	width: 160px;
	height: 45px;
	z-index: 6;
	left: 490px;
	top: 60px;
	-webkit-transition: all 1s ease-in 0s;
	-moz-transition: -moz-transform 1s ease-in 0s;
	-ms-transition: all 1s ease-in 0s;
	-o-transition: all 1s ease-in 0s;
	transition: transform 1s ease-in 0s;
}
#About {
	position: absolute;
	width: 112px;
	height: 34px;
	z-index: 6;
	left: 678px;
	top: 146px;
	-webkit-transition: all 1s ease-in 0s;
	-moz-transition: -moz-transform 1s ease-in 0s;
	-ms-transition: all 1s ease-in 0s;
	-o-transition: all 1s ease-in 0s;
	transition: transform 1s ease-in 0s;
}
#Contact {
	position: absolute;
	width: 138px;
	height: 32px;
	z-index: 6;
	left: 493px;
	top: 148px;
	opacity:0;
	-webkit-transition: all 1s ease-in 0s;
	-moz-transition: -moz-transform 1s ease-in 0s;
	-ms-transition: all 1s ease-in 0s;
	-o-transition: all 1s ease-in 0s;
	transition: transform 1s ease-in 0s;
}

#IDEA {
	position: absolute;
	width: 251px;
	height: 326px;
	top: 268px;
	z-index: 2;
	opacity:0;
	-moz-transition: -moz-transform 1.25s ease-in-out 0s;
	-ms-transition: all 1.25s ease-in-out 0s;
	-o-transition: all 1.25s ease-in-out 0s;
	transition: transform 1.25s ease-in-out 0s;
	-webkit-transition: all 1.25s ease-in-out 0s;
	left:42px;
}
#Marks {
	position: absolute;
	width: 284px;
	height: 166px;
	z-index: 2;
	left: 654px;
	top: 254px;
	opacity:0;
	-webkit-transition: all 1.25s ease-in-out 0s;
	-moz-transition: -moz-transform 1.25s ease-in-out 0s;
	-ms-transition: all 1.25s ease-in-out 0s;
	-o-transition: all 1.25s ease-in-out 0s;
	transition: transform 1.25s ease-in-out 0s;
}
#CMDCPunch {
	position: absolute;
	width: 284px;
	height: 166px;
	z-index: 2;
	left: 642px;
	top: 439px;
	opacity:0;
	-webkit-transition: all 1.25s ease-in-out 0s;
	-moz-transition: -moz-transform 1.25s ease-in-out 0s;
	-ms-transition: all 1.25s ease-in-out 0s;
	-o-transition: all 1.25s ease-in-out 0s;
	transition: transform 1.25s ease-in-out 0s;
}
#Limo {
	position: absolute;
	width: 284px;
	height: 167px;
	z-index: 2;
	left: 624px;
	top: 261px;
	opacity:0;
	-webkit-transition: all 1.25s ease-in-out 0s;
	-moz-transition:-moz-transform 1.25s ease-in-out 0s;
	-ms-transition: all 1.25s ease-in-out 0s;
	-o-transition: all 1.25s ease-in-out 0s;
	transition: transform 1.25s ease-in-out 0s;
}
#Disco {
	position: absolute;
	width: 251px;
	height: 326px;
	z-index: 2;
	left: 727px;
	top: 269px;
	opacity:0;
	-webkit-transition: all 1.25s ease-in-out 0s;
	-moz-transition: -moz-transform 1.25s ease-in-out 0s;
	-ms-transition: all 1.25s ease-in-out 0s;
	-o-transition: all 1.25s ease-in-out 0s;
	transition: transform 1.25s ease-in-out 0s;
}
#Phil {
	position: absolute;
	width: 284px;
	height: 167px;
	z-index: 2;
	left: 714px;
	top: 443px;
	opacity:0;
	-webkit-transition: all 1.25s ease-in-out 0s;
	-moz-transition: -moz-transform 1.25s ease-in-out 0s;
	-ms-transition: all 1.25s ease-in-out 0s;
	-o-transition: all 1.25s ease-in-out 0s;
	transition: transform 1.25s ease-in-out 0s;
}
#PPA {
	position: absolute;
	width: 234px;
	height: 361px;
	z-index: 2;
	left: 620px;
	top: 253px;
	opacity:0;
	-webkit-transition: all 1.25s ease-in-out 0s;
	-moz-transition: -moz-transform 1.25s ease-in-out 0s;
	-ms-transition: transform 1.25s ease-in-out 0s;
	-o-transition: all 1.25s ease-in-out 0s;
	transition: transform 1.25s ease-in-out 0s;
}
#Arakawa {
	position: absolute;
	width: 182px;
	height: 304px;
	z-index: 2;
	left: 658px;
	top: 280px;
	opacity:0;
	-webkit-transition: all 1.25s ease-in-out 0s;
	-moz-transition: -moz-transform 1.25s ease-in-out 0s;
	-ms-transition: all 1.25s ease-in-out 0s;
	-o-transition: all 1.25s ease-in-out 0s;
	transition: transform 1.25s ease-in-out 0s;
}
#Pilates {
	position: absolute;
	width: 179px;
	height: 304px;
	z-index: 2;
	left: 460px;
	top: 290px;
	opacity:0;
	-webkit-transition: all 1.25s ease-in-out 0s;
	-moz-transition: -moz-transform 1.25s ease-in-out 0s;
	-ms-transition: all 1.25s ease-in-out 0s;
	-o-transition: all 1.25s ease-in-out 0s;
	transition: transform 1.25s ease-in-out 0s;
}

@-webkit-keyframes drift {
  0% {
    left: 0px;
	opacity:0;
  }
  10% {
	  opacity:1.0;
  }
  41% {
	  opacity:1.0;
  }
  45% {
	  left:850px;
	  opacity:0.0;
  } 
  55% {
	  opacity:0.0;
  } 
  100% {
	  opacity:0.0;
  }
}

@-webkit-keyframes driftnav {
  0% {
    left: 472px;
	opacity:0;
  }
  25% {
	  opacity:1.0;
  }
  95% {
	  opacity:1.0;
  } 
  100% {
    left: 900px;
	opacity:0;
  }
}

@-webkit-keyframes grow_sites{
   0%{
      -webkit-transform: scale(1);
   }
   3.0% {
      -webkit-transform: scale(1.15);
   }
   4.0%{
      -webkit-transform: scale(1.15);
   }
   7.0%{
      -webkit-transform: scale(1.0);
   }
   16.66% {
      -webkit-transform: scale(1.0);
   }
   100.00% {
      -webkit-transform: scale(1.0);
   }
}

@-webkit-keyframes grow_such{
   0%{
      -webkit-transform: scale(1);
   }
   17% {
      -webkit-transform: scale(1);
   }
   20.5%{
      -webkit-transform: scale(1.15);
   }
   21.5%{
      -webkit-transform: scale(1.15);
   }
   24.00% {
      -webkit-transform: scale(1.0);
   }
   100.00% {
      -webkit-transform: scale(1.0);
   }
}

@-webkit-keyframes spin{
   0%{
      -webkit-transform: rotateY(0deg);
   }
   9% {
      -webkit-transform: rotateY(0deg);
   }
   16.00% {
	  -webkit-transform: rotateY(360deg);
   }
   100.00% {
      -webkit-transform: rotateY(360deg);
   }
}


@keyframes grow_sites{
   0%{
      transform: scale(1);
   }
   3.0% {
      transform: scale(1.15);
   }
   4.0%{
      transform: scale(1.15);
   }
   7.0%{
      transform: scale(1.0);
   }
   16.66% {
      transform: scale(1.0);
   }
   100.00% {
      transform: scale(1.0);
   }
}

@keyframes grow_such{
   0%{
      transform: scale(1);
   }
   17% {
      transform: scale(1);
   }
   20.5%{
      transform: scale(1.15);
   }
   21.5%{
      transform: scale(1.15);
   }
   24.00% {
      transform: scale(1.0);
   }
   100.00% {
      transform: scale(1.0);
   }
}

@keyframes spin{
   0%{
      transform: rotateY(0deg);
   }
   9% {
      transform: rotateY(0deg);
   }
   16.00% {
	  transform: rotateY(360deg);
   }
   100.00% {
      transform: rotateY(360deg);
   }
}

@keyframes drift {
  0% {
    left: 0px;
	opacity:0;
  }
  10% {
	  opacity:1.0;
  }
  41% {
	  opacity:1.0;
  }
  45% {
	  left:850px;
	  opacity:0.0;
  } 
  55% {
	  opacity:0.0;
  } 
  100% {
	  opacity:0.0;
  }
}

@keyframes driftnav {
  0% {
    left: 472px;
	opacity:0;
  }
  25% {
	  opacity:1.0;
  }
  95% {
	  opacity:1.0;
  } 
  100% {
    left: 900px;
	opacity:0;
  }
}

#sites{
	-webkit-animation: grow_sites 6s linear infinite;
	 animation: grow_sites 6s linear infinite;	
}
#N    {
	-webkit-animation: spin 6s linear infinite;	
	animation: spin 6s linear infinite;	
}
#such{
	-webkit-animation: grow_such 6s linear infinite;
	animation: grow_such 6s linear infinite;	
}

#Website {	-webkit-animation: driftnav 15s 0s backwards linear infinite;
			animation: driftnav 15s 0s backwards linear infinite;
}			
#Print {-webkit-animation: driftnav 15s 5s backwards linear infinite;
		 animation: driftnav 15s 5s backwards linear infinite;
}
#About {-webkit-animation: driftnav 20s 0s backwards linear infinite;
		    animation: driftnav 20s 0s backwards linear infinite;
}
#Contact {-webkit-animation: driftnav 20s 8.5s backwards linear infinite;
		    animation: driftnav 20s 8.5s backwards linear infinite;		
}
#Identity {-webkit-animation: driftnav 10s 0s backwards linear infinite;
		    animation: driftnav 10s 0s backwards linear infinite;
}
#Photography{ -webkit-animation: driftnav 15s 0s backwards linear infinite;
			  animation: driftnav 15s 0s backwards linear infinite;
}

#IDEA{
	-webkit-animation: drift 32s 1s backwards linear infinite;
	animation: drift 32s 1s backwards linear infinite;
}
#Marks{-webkit-animation: drift 32s 6.5s backwards linear infinite;
	    animation:        drift 32s 6.5s backwards linear infinite; 
}
#Limo {-webkit-animation: drift 32s 16.75s backwards linear infinite;
	    animation:        drift 32s 16.75s backwards linear infinite;
}
#Disco {-webkit-animation: drift 32s 11.5s backwards linear infinite;				   
	    animation:    	   drift 32s 11.5s backwards linear infinite;
}
#Phil {-webkit-animation: drift 32s 16.5s backwards linear infinite;				  
	    animation:    	  drift 32s 16.5s backwards linear infinite;
}
#CMDCPunch{-webkit-animation: drift 32s 7.0s backwards linear infinite;						      
	  	    animation:        drift 32s 7.0s backwards linear infinite;
}
#PPA {-webkit-animation: drift 32s 21.0s backwards linear infinite;
	   animation:    	 drift 32s 21.0s backwards linear infinite;
}
#Arakawa {-webkit-animation: drift 32s 24.25s backwards linear infinite;
		   animation:    	 drift 32s 24.25s backwards linear infinite;
}
#Pilates {-webkit-animation: drift 32s 27.5s backwards linear infinite;
		   animation:    	 drift 32s 27.5s backwards linear infinite;
}

#Photography:hover {
	-webkit-transform: scale(1.25);
	-moz-transform: scale(1.25);
	-ms-transform: scale(1.25);
	-o-transform: scale(1.25);
	transform: scale(1.25);
}
#Website:hover{	
	-webkit-transform: scale(1.25);
	-moz-transform: scale(1.25);
	-ms-transform: scale(1.25);
	-o-transform: scale(1.25);
	transform: scale(1.25);
}
#Print:hover{
	-webkit-transform: scale(1.25);
	-moz-transform: scale(1.25);
	-ms-transform: scale(1.25);
	-o-transform: scale(1.25);
	transform: scale(1.25);
}
#About:hover {
	-webkit-transform: scale(1.25);
	-moz-transform: scale(1.25);
	-ms-transform: scale(1.25);
	-o-transform: scale(1.25);
	transform: scale(1.25);
}
#Identity:hover {
	-webkit-transform: scale(1.25);
	-moz-transform: scale(1.25);
	-ms-transform: scale(1.25);
	-o-transform: scale(1.25);
	transform: scale(1.25);
}
#Contact:hover {
	-webkit-transform: scale(1.25);
	-moz-transform: scale(1.25);
	-ms-transform: scale(1.25);
	-o-transform: scale(1.25);
	transform: scale(1.25);
}
#Portfolio:hover {
	-webkit-transform: scale(1.25);
	-moz-transform: scale(1.25);
	-ms-transform: scale(1.25);
	-o-transform: scale(1.25);
	transform: scale(1.25);
}
#IDEA:hover {
	-webkit-transform:  translate3D(0,-40px,1px) scale(1.25) rotateY(360deg);
	-moz-transform: rotateY(360deg);
	-ms-transform: scale(1.5) rotateY(360deg);
	-o-transform: scale(1.5) rotateY(360deg);
	transform: translate3D(0,-40px,1px) scale(1.25) rotateY(360deg);
	z-index:7;
}

#Marks:hover {
	-webkit-transform: translate3D(0,50px,1px) scale(1.25) rotateX(360deg);
	-moz-transform: scale(1.5) rotateX(360deg);
	-ms-transform: scale(1.5) rotateX(360deg);
	-o-transform: scale(1.5) rotateX(360deg);
	transform: translate3D(0,50px,1px) scale(1.25) rotateX(360deg);
	z-index: 7;
}
#Phil:hover {
	-webkit-transform: translate3D(0,-50px,1px) scale(1.25) rotateX(360deg);
	-moz-transform: translate3D(0,-50px,1px) scale(1.5) rotateX(360deg);
	-ms-transform: translate3D(0,-50px,1px) scale(1.5) rotateX(360deg);
	-o-transform: translate3D(0,-50px,1px) scale(1.5) rotateX(360deg);
	transform: translate3D(0,-50px,1px) scale(1.25) rotateX(360deg);
	z-index: 7;
}
#Arakawa:hover {
	-webkit-transform: translate3D(0,-50px,1px) scale(1.25) rotateY(360deg);
	-moz-transform: translate3D(0,-50px,1px) scale(1.5) rotateY(360deg);
	-ms-transform: translate3D(0,-50px,1px) scale(1.5) rotateY(360deg);
	-o-transform: translate3D(0,-50px,1px) scale(1.5) rotateY(360deg);
	transform: translate3D(0,-50px,1px) scale(1.25) rotateY(360deg);
	z-index: 7;
}
#Pilates:hover {
	-webkit-transform: translate3D(0,-50px,1px) scale(1.25) rotateY(360deg);
	-moz-transform: translate3D(0,-50px,1px) scale(1.5) rotateY(360deg);
	-ms-transform: translate3D(0,-50px,1px) scale(1.5) rotateY(360deg);
	-o-transform: translate3D(0,-50px,1px) scale(1.5) rotateY(360deg);
	transform: translate3D(0,-50px,1px) scale(1.25) rotateY(360deg);
	z-index: 7;
}
#PPA:hover {
	-webkit-transform: translate3D(0,-50px,1px) scale(1.25) rotateX(360deg);
	-moz-transform: translate3D(0,-50px,1px) scale(1.5) rotateX(360deg);
	-ms-transform: translate3D(0,-50px,1px) scale(1.5) rotateX(360deg);
	-o-transform: translate3D(0,-50px,1px) scale(1.5) rotateX(360deg);
	transform: translate3D(0,-50px,1px) scale(1.25) rotateX(360deg);
	z-index: 7;
}
#CMDCPunch:hover {
	-webkit-transform: translate3D(0,-50px,1px) scale(1.25) rotateX(360deg);
	-moz-transform: translate3D(0,-50px,1px) scale(1.5) rotateX(360deg);
	-ms-transform: translate3D(0,-50px,1px) scale(1.5) rotateX(360deg);
	-o-transform: translate3D(0,-50px,1px) scale(1.5) rotateX(360deg);
	transform: translate3D(0,-50px,1px) scale(1.25) rotateX(360deg);
	z-index: 7;
}
#Disco:hover {
	-webkit-transform: translate3D(0,-50px,1px) scale(1.25) rotateX(360deg);
	-moz-transform: translate3D(0,-50px,1px) scale(1.5) rotateX(360deg);
	-ms-transform: translate3D(0,-50px,1px) scale(1.5) rotateX(360deg);
	-o-transform: translate3D(0,-50px,1px) scale(1.5) rotateX(360deg);
	transform: translate3D(0,-50px,1px) scale(1.25) rotateX(360deg);
	z-index: 7;
}

#Limo:hover {
	-webkit-transform: translate3D(0,50px,1px) scale(1.25) rotateX(360deg);
	-moz-transform: translate3D(0,50px,1px) scale(1.5) rotateX(360deg);
	-ms-transform: translate3D(0,50px,1px) scale(1.5) rotateX(360deg);
	-o-transform: translate3D(0,50px,1px) scale(1.5) rotateX(360deg);
	transform: translate3D(0,50px,1px) scale(1.25) rotateX(360deg);
	z-index: 7;
}