/***************STRUCTURE***************************/
html, body{
      background: #000;
      height: 100%;

}

p{
  font-family: Helvetica, Arial;
}

/* Viewmaster Picture */
img.viewty {
	   position: absolute; 
	   left: -200px; 
	   top: -125px;
}

img.beast {
	  position: absolute; 
	  left: 550px; 
	  top: 55px;
}

p.caption {
	  line-height: 1.13em;
	  position: absolute; 
	  top: 580px; 
	  left: 230px; 
	  font-size: 50px; 
	  font-family: Helvetica, Arial; 
	  color: #fff; 
	  width: 1050px;
	  padding-bottom: 100px;
}

a.lastDino{
	position: absolute;
        font-family: Helvetica, Arial;
        top: 35px;
	left: 1100px;
	text-decoration: none;
	color: #fff;
	z-index: 2;
	font-size: 20px;
	width: 50px;
	height: 50px;
}

a.nextDino{
	position: absolute;
	font-family: Helvetica, Arial;
	top: 35px;
	left: 550px;
        text-decoration: none;
	color: #fff;
	z-index: 2;
	font-size: 20px;
	width: 50px;
	height: 50px;
}

.square{
        position: absolute;
        left: 550px;
        top: 55px;
	background-color: #000;
	display: block;
	height: 560px;
	width: 626px;
}


/*****************/
/* ANIMATIONS */
p.caption{
     -webkit-animation-name: fade-in;                                                                        
     -webkit-animation-duration: 4s;                                                                         
     -webkit-animation-timing-function: linear;                                                             
     -webkit-animation-iteration-count: 1;"
}

.square{
     -webkit-animation-name: fade-in;
     -webkit-animation-duration: 1.8s;
     -webkit-animation-timing-function: linear;
     -webkit-animation-iteration-count: 1;"
}

img#b1{
     -webkit-animation-name: slide-in;                                                                       
     -webkit-animation-duration: 1.8s;                                                                       
     -webkit-animation-timing-function: ease-in-out;                                                         
     -webkit-animation-iteration-count: 1;
}

img#b2{
      filter: alpha(opacity=75);                                                                            
      -moz-opacity: 0.75;                                                                                   
      opacity: 0.75;                                                                                        
     -webkit-animation-name: slide-in2;                                                                     
     -webkit-animation-duration: 1.8s;                                                                       
     -webkit-animation-timing-function: ease-in-out;                                                         
     -webkit-animation-iteration-count: 1;"
}

img#o1{
     -webkit-animation-name: slide-out;
     -webkit-animation-duration: 1.8s;
     -webkit-animation-timing-function: ease-in-out;
     -webkit-animation-iteration-count: 1;
}

img#o2{
      filter: alpha(opacity=75);
      -moz-opacity: 0.75;
      opacity: 0.75;
     -webkit-animation-name: slide-out2;
     -webkit-animation-duration: 1.8s;
     -webkit-animation-timing-function: ease-in-out;
     -webkit-animation-iteration-count: 1;
}

img.viewty{
     -webkit-animation-name: rotation;                                                                       
     -webkit-animation-duration: 2s;                                                                         
     -webkit-animation-timing-function: ease-in-out;                                                         
     -webkit-animation-iteration-count: 1;"

}

/* FRAME ANIMATION */
   @-webkit-keyframes slide-out{
        0% {-webkit-transform: rotate(0deg) translate(0px, 0px);}
        100% {-webkit-transform: rotate(80deg) translate(100px, 2000px);}
   }

   @-webkit-keyframes slide-out2{
        0% {-webkit-transform: rotate(0deg) translate(0px, 0px);}
        100% {-webkit-transform: rotate(-80deg) translate(200px, -2000px);}
   }

   @-webkit-keyframes slide-in{
      0% {-webkit-transform: rotate(80deg) translate(100px, 2000px);}
      100% {-webkit-transform: rotate(0deg) translate(0px, 0px);}
   }

   @-webkit-keyframes slide-in2{
      0% {-webkit-transform: rotate(-80deg) translate(200px, -2000px);}
      100% {-webkit-transform: rotate(0deg) translate(0px, 0px);}
   }

   @-webkit-keyframes fade-in{
      0% {opacity: 0;}
      50% {opacity: 0;}
      100% {opacity: 1;}
   }