@charset "UTF-8";
/* CSS portrait */

body { 
	margin:0; 
	padding:0; 
}
#intro { 
	position:fixed; 
	left:-40vw; 
	top:0; 
	width:180vw; 
	z-index:1;
}
.calle { 
	position:absolute; 
	top:0; 
	width:100vw; 
	cursor:s-resize;
}
#soplo {
	position:absolute; 
	top:0vw; 
	left:0vw;
	width:29vw; 
	height:28vw; 
	cursor:pointer;
 -webkit-transition:all 2s ease-in-out;
 -webkit-animation:blink normal 3s infinite ease-in-out;
 transition:all 2s ease-in-out;
 animation:blink normal 3s infinite ease-in-out;
}
#afiche {  background-color:#FF0;
	position:absolute; 
	top:0; left:0; 
	width:28.5vw;
	height:20vw;
	text-align:center;
	display:none; 
	cursor:pointer;
}
.año{ 
	z-index:20;
 animation:menos linear 7s;
 animation-iteration-count:7s;
 -webkit-animation:menos linear 7s;
 -webkit-animation-iteration-count:7s;
 height:3vw;
 width:3vw;
 position:absolute;
 -webkit-border-radius: 1vw 1vw 1vw 1vw;
 border-radius:1.5vw 1.5vw 1.5vw 1.5vw;
 background:-webkit-radial-gradient(center, ellipse cover, rgba(206,238,255,1) 0%,rgba(0,169,255,1) 100%);
 background:radial-gradient(ellipse at center, rgba(206,238,255,1) 0%,rgba(0,169,255,1) 100%);
 top:-3vw;
 left:48.5vw;
}
@keyframes menos{
 0% { transform:translate(0,0) scale(1);}
 50% { transform:translate(0,42vw) scale(0.1);}
 100% {transform:translate(0,75vw) scale(1);}
}
@-webkit-keyframes menos {
 0% {transform:translate(0,0) scale(1);}
 50% {transform:translate(0,42vw) scale(0.1);}
 100% {transform:translate(0,75vw) scale(1);}
}
#buzon {
	position:absolute; 
	top:18vw; 
	left:47.2vw; 
	width:5.3vw; 
	height:8vw;
}
.fuente { 
	position:absolute; 
	top:14.3vw; 
	left:39vw; 
	width:5vw; 
	height:13.2vw;
}
.rio { width:5vw;}
@-webkit-keyframes blink { 
	0% {opacity:1;} 
	50% {opacity:0;} 
	100% {opacity:1;}
}
@keyframes blink { 
	0%	{opacity:1;} 
	50% {opacity:0;} 
	100% {opacity:1;} 
}