/* 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("up.jpg");	

}





/* Chrome, Safari, Opera */

@-webkit-keyframes fadep {

    from {opacity: 1;}

    to {opacity: 0;}

}





/* Standard syntax */

@keyframes fadep {

    from {opacity: 1;}

    to {opacity: 0;}

} 



.boom{

	z-index: 0;

    opacity: 1;

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

    animation: fadep 0s;

    -webkit-animation-delay: .8s;

    animation-delay: .8s;

    -webkit-animation-fill-mode:forwards;

    animation-fill-mode:forwards;

}



p {

  font-size: 15px;

    line-height: 14px;

    color: black; 

    width:500px;

	  position:absolute;

    top:-600px;

    left:110px;

}

/* Chrome, Safari, Opera */

@-webkit-keyframes fade {

    from {opacity: 0;}

    to {opacity: 1;}

}





/* Standard syntax */

@keyframes fade {

    from {opacity: 0;}

    to {opacity: 1;}

}

.down {

        position: absolute;

        display: block;

        text-indent: -99999px;

	      background: url("arrowdown.png");

        background-size: cover;

	      width: 100px;

		    height: 100px;

        top: -180px;

        left: 450px;

        z-index: 1;  

        -webkit-transition: 2s;

        transition: 2s;

		   opacity: 0;

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

    animation: fade 3s;

    -webkit-animation-delay: 2s;

    animation-delay: 2s;

    -webkit-animation-fill-mode:forwards;

    animation-fill-mode:forwards;

}

.down:hover{

    background-size: cover;

		width: 110px;

    height: 110px;  

    z-index: 3;

}