/* 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("startmap.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: 30px;

    line-height: 30px;

    color: black; 

    width:800px;

	  position:absolute;

    top:-170px;

    left:170px;

    z-index: 0;

    opacity: 0;

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

    animation: fadep 2s;

    -webkit-animation-delay: 2s;

    animation-delay: 2s;

    -webkit-animation-fill-mode:forwards;

    animation-fill-mode:forwards;

	 

}

.up {

        position: absolute;

        display: block;

        text-indent: -99999px;

	      background: url("arrowup.png");

        background-size: cover;

	      width: 100px;

		    height: 100px;

        top: -580px;

        left: 400px;

        z-index: 1;  

        -webkit-transition: 2s;

        transition: 2s;

		   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;

}



.up:hover{

    background-size: cover;

		width: 110px;

    height: 110px;  

    z-index: 3;

        

}

.right {

        position: absolute;

        display: block;

        text-indent: -99999px;

	      background: url("arrowright.png");

        background-size: cover;

	      width: 100px;

		    height: 100px;

        top: -380px;

        left: 700px;

        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;

		

}



.right: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;