@media (max-width: 800px) {
    #intro {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateY(-50%) translateX(-50%);
	width:142vw;
	height:60vw;
	background-image: url('../bundles/spaceshopsettings/images/intro1bis.png');
	background-repeat:  no-repeat;
	background-size: cover;
	margin:auto;
	animation-name: initSmart, goSmart;
	animation-duration: 1000ms, 2500ms;
	animation-delay: 0ms, 1500ms;
	animation-timing-function: linear, steps(29);
	animation-iteration-count: 1,1;
	animation-direction: normal, normal;
	animation-fill-mode: forwards,forwards;
    }
    
    .planet {
	animation-name: planetSmart;
	animation-duration: 1000ms;
	animation-delay: 3500ms;
	animation-timing-function: linear;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
    }
    
    #page {
	width:100vw;
	height:100vh;
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	overflow:hidden;
    }
}

@media (min-width: 801px) {
    #intro {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateY(-50%) translateX(-50%);
	width:237vh;
	height:100vh;
	background-image: url('../bundles/spaceshopsettings/images/intro1bis.png');
	background-repeat:  no-repeat;
	background-size: cover;
	margin:auto;
	animation-name: init, go;
	animation-duration: 1000ms, 2500ms;
	animation-delay: 0ms, 1500ms;
	animation-timing-function: linear, steps(29);
	animation-iteration-count: 1,1;
	animation-direction: normal, normal;
	animation-fill-mode: forwards,forwards;
    }
    
    .planet {
	animation-name: planet;
	animation-duration: 1000ms;
	animation-delay: 3500ms;
	animation-timing-function: linear;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
    }
    
    #page {
	width:100vw;
	height:100vh;
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	overflow:hidden;
    }
    
}

#masque {
    position:absolute;
    z-index:10000;
    top:0;
    left:0;
    background-color:transparent;
    width:100vw;
    height:100vh;
}

@keyframes planet {
    0% { top:20px;left:25px;width:150px;height:76px;opacity:100%; }
    100% { top:20px;left:25px;width:150px;height:76px;opacity:100%; }
}

@keyframes planetSmart {
    0% { top:13px;left:13px;width:150px;height:30px;opacity:100%; }
    100% { top:13px;left:13px;width:150px;height:30px;opacity:100%; }
}

@keyframes go {
    0% { background-position: center 0px; }
    100% { background-position: center -2900vh; }
}

@keyframes goSmart {
    0% { background-position: center 0px; }
    100% { background-position: center -1737.7vw; }
}

@keyframes initSmart {
    0% { width:142vw; height:60vw;-webkit-opacity: 0%; filter: alpha(opacity=0);opacity:0%; }
    100% { width:142vw;height:60vw;-webkit-opacity: 100%; filter: alpha(opacity=100);opacity:100%; }
}

@keyframes init {
    0% { width:237vh; height:100vh;-webkit-opacity: 0%; filter: alpha(opacity=0);opacity:0%; }
    100% { width:237vh;height:100vh;-webkit-opacity: 100%; filter: alpha(opacity=100);opacity:100%; }
}