@charset "UTF-8";
body {
	background-image: url(pattern.gif);
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}



img { 
   width:100%; 
   height:100%;
   
     transition:all .5s ease-out; 
    -o-transition:all .5s ease-out; 
    -moz-transition:all .5s ease-out; 
    -webkit-transition:all .5s ease-out;
}
@media screen and (max-width:800px) { 

    img{ 
        width:75%; 
		height:75%;
    }
}


a {
    color: yellow;
    text-decoration: none;
}
    
a:hover {
    color: yellow;
    text-shadow: none;
    border: none;
    border-radius: 2px;
}

.timing {
	transition: all.25s ease-out ;
    -moz-transition: all .25s ease-out ;
    -webkit-transition: all .25s ease-out ;
    -o-transition: all .25s ease-out ;
	}

.logo {
	position: absolute;
	top: 180px;
	left: 125px;
}

.creativemind {
	position: absolute;
	top: 259px;
	left: 125px;
}

.artdirector {
	position: absolute;
	top: 330px;
	left: 125px;	
}

.motion {
	position: absolute;
	top: 400px;
	left: 175px;
	
}

.webguy {
	position: absolute;
	top: 470px;
	left: 125px;
	
}

.copyblock {
	position: absolute;
	top: 600px;
	left: 125px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 8pt;
	color: #999;	
	
	}


.logo:hover {
opacity:0.3;
}
.creativemind:hover {
opacity:0.3;   
 transform: scaleZ(2) translateZ(100px);
}
.artdirector:hover {
opacity:0.3;
}
.motion:hover {
opacity:0.3;
}
.webguy:hover {
opacity:0.3;
}


@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
 
.fade-in {
    opacity:0; 
    -webkit-animation:fadeIn ease-in 1;  
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;
 
    -webkit-animation-fill-mode:forwards;  
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
 
    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;
}
 
.fade-in.one {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
}
 
.fade-in.two {
-webkit-animation-delay: 1.2s;
-moz-animation-delay:1.2s;
animation-delay: 1.2s;
}
 
.fade-in.three {
-webkit-animation-delay: 1.6s;
-moz-animation-delay: 1.6s;
animation-delay: 1.6s;
}

.fade-in.four {
-webkit-animation-delay: 1.9s;
-moz-animation-delay: 1.9s;
animation-delay: 1.9s;
}
 
 .fade-in.five {
-webkit-animation-delay: 2.2s;
-moz-animation-delay: 2.2s;
animation-delay: 2.2s;
}

 .fade-in.six {
-webkit-animation-delay: 2.4s;
-moz-animation-delay: 2.4s;
animation-delay: 2.4s;
}

/*********************************************
 * ROLLING LINKS
 *********************************************/

.roll {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;

    -webkit-perspective: 300px;
       -moz-perspective: 300px;
        -ms-perspective: 300px;
            perspective: 300px;

    -webkit-perspective-origin: 50% 50%;
       -moz-perspective-origin: 50% 50%;
        -ms-perspective-origin: 50% 50%;
            perspective-origin: 50% 50%;
}
.roll:hover {
    background: none;
    text-shadow: none;
}
.roll span {
    display: block;
    position: relative;
    padding: 0 2px;
    pointer-events: none;

    -webkit-transition: all 600ms ease;
       -moz-transition: all 400ms ease;
        -ms-transition: all 400ms ease;
            transition: all 400ms ease;
    
    -webkit-transform-origin: 50% 0%;
       -moz-transform-origin: 50% 0%;
        -ms-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
.roll:hover span {


    -webkit-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
       -moz-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
        -ms-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
            transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
}
.roll span:after {
    content: attr(data-title);

    display: block;
    position: absolute;
    left: 0;
    top: 0;
    padding: 0 2px;
    white-space: nowrap;

    color: #666;
    background: yellow; 

    -webkit-transform-origin: 50% 0%;
       -moz-transform-origin: 50% 0%;
        -ms-transform-origin: 50% 0%;
            transform-origin: 50% 0%;

    -webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
       -moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
        -ms-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
            transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
}