/* CSS Document */

@font-face {

    font-family: '8bit_wondernominal';

    src: url('8-bit_wonder-webfont.eot');

    src: url('8-bit_wonder-webfont.eot?#iefix') format('embedded-opentype'),

         url('8-bit_wonder-webfont.woff2') format('woff2'),

         url('8-bit_wonder-webfont.woff') format('woff'),

         url('8-bit_wonder-webfont.ttf') format('truetype'),

         url('8-bit_wonder-webfont.svg#8bit_wondernominal') format('svg');

    font-weight: normal;

    font-style: normal;



}

body {

    background:#000;

    font-family: '8bit_wondernominal' ;

	color: white;

}



.wrapper {

	width:1000px;

    height:640px;

    position:relative;

    margin: 0px auto; /*centers image*/

}



.bg {

	width: 1000px;

	height: 640px;

	background: url("rightopen.jpg");	

}



       



/* Chrome, Safari, Opera */

@-webkit-keyframes fadep {

    from {opacity: 0;}

    to {opacity: 1;}

}





/* Standard syntax */

@keyframes fadep {

    from {opacity: 0;}

    to {opacity: 1;}

} 



p {

	font-size: 20px;

	line-height: 30px;

	color: black;

	width: 800px;

	position: absolute;

	top: -202px;

	left: 142px;

	z-index: 0;

	opacity: 0;

	-webkit-animation: fadep 0s; /* Chrome, Safari, Opera */

	animation: fadep 0s;

	-webkit-animation-delay: 0s;

	animation-delay: 02s;

	-webkit-animation-fill-mode: forwards;

	animation-fill-mode: forwards;

	 

}





.left {

	position: absolute;

	display: block;

	text-indent: -99999px;

	background: url("arrowleft.png");

	background-size: cover;

	width: 100px;

	height: 100px;

	top: -393px;

	left: 14px;

	z-index: 1;

	-webkit-transition: 2s;

	transition: 2;

	opacity: 0;

	-webkit-animation: fadep 2s; /* Chrome, Safari, Opera */

	animation: fadep 3s;

	-webkit-animation-delay: 3s;

	animation-delay: 3s;

	-webkit-animation-fill-mode: forwards;

	animation-fill-mode: forwards;







s;

		

}



.left:hover{

    background-size: cover;

		width: 110px;

    height: 110px;  

    z-index: 3;

        

}





/* Chrome, Safari, Opera */

@-webkit-keyframes fadeSplinter {

    from {opacity: 0;}

    to {opacity: 1;}

}



/* Standard syntax */

@keyframes fadeSplinter {

    from {opacity: 0;}

    to {opacity: 1;}

} 



/* Chrome, Safari, Opera */

@-webkit-keyframes transSplinter {

    from {left: 0px;}

    to {left: 500px;}

}



/* Standard syntax */

@keyframes transSplinter {

    from {left: 0px;}

    to {left: 500px;}

} 



.link {

        display: block;

        text-indent: -99999px;

        position: absolute;

        top: 270px;

        left: 0px;

        z-index: 2;

        opacity: 0;

        -webkit-animation: fadeSplinter 0s, transSplinter 15s; /* Chrome, Safari, Opera */

        animation: fadeSplinter 0s,transSplinter 15s;

        -webkit-animation-delay: 1s;

        animation-delay: 1s;

        -webkit-animation-timing-function: ease;

        animation-timing-function: ease;

        -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/

	      animation-fill-mode:forwards;

        -webkit-transition: -webkit-transform 1s;

        transition: transform 1s;

}

.open {

        position: absolute;

        display: block;

        text-indent: -99999px;

	      background: url("black.jpg");

        background-size: cover;

	      width: 60px;

		    height: 60px;

        top: -440px;

        left: 485px;

        z-index: 1;

 

        -webkit-transition: 2s;

        transition: 2s;

}

}