body
	{
	background-attachment: fixed;
	
	background-color:black;
	background-image: radial-gradient(circle closest-side, rgba(255,10,10,0.4), rgba(255,100,100,0.3) 30%, rgba(255,100,255,0.2) 80%, rgba(255,200,200,0)), 
									radial-gradient(circle closest-side, rgba(100,255,100,0.4), rgba(100,255,100,0.3) 20%, rgba(100,255,100,0.2) 50%, rgba(255,255,255,0)),
									radial-gradient(circle closest-side, rgba(0,0,255,0.4), rgba(255,255,0,0.2) 30%, rgba(0,0,100,0.4) 50%, rgba(255,255,255,0)),
									radial-gradient(circle closest-side, rgba(100,100,255,0.3), rgba(100,100,255,0.4) 20%, rgba(100,100,255,0.2) 50%, rgba(255,255,255,0)),
									radial-gradient(circle closest-side, rgba(0,0,0,1), rgba(0,0,0,1) 80%, rgba(0,0,0,0.9) 90%, rgba(255,255,255,0));
	background-size:0% 0%, 0% 0%, 0% 0%, 0% 0%, 1000% 1000%;
	background-position: left top, left bottom, right bottom, right top, center center;
	background-repeat:no-repeat;
	padding:0px;
	margin:0px;
	
	-webkit-animation-iteration-count:infinite;
	animation-iteration-count:infinite;
	
	-webkit-animation-duration:100s;
	animation-duration:100s;
	
	-webkit-animation-delay: 7s;
    animation-delay: 7s;
	
	-webkit-animation-name:anim-fondo;
	animation-name:anim-fondo;
}
	
@-webkit-keyframes anim-fondo
	{
	from{background-color:black;
			background-size:200% 200%, 0% 0%, 50% 50%, 70% 70%, 1000% 1000%;
			background-position: -200vw -200vh, left bottom, 10vw -25vh, right top, center center;}
	10%{background-size:100% 100%, 0% 0%, 100% 100%, 80% 80%, 0% 0%;
			background-position: -60vw center, right bottom, 50vw -50vh, left top, center center;}
	30%{background-size:300% 300%, 0% 0%, 300% 300%, 40% 40%, 0% 0%;
			background-position: -40vw 50vh, right bottom, 50vw 50vh, left bottom, center center;}
	50%{background-size:200% 200%, 0% 0%, 500% 500%, 120% 120%, 0% 0%;
			background-position: 70vw 60vh, right bottom, left top, left bottom, center center;}
	70%{background-size:100% 100%, 0% 100%, 200% 200%, 140% 140%, 0% 0%;
			background-position: 50vw -40vh, left bottom, -100vw 50vh, left top, center center;}
	90%{background-size:400% 400%, 100% 100%, 70% 70%, 500% 500%, 0% 0%;
			background-position: center -40vh, right bottom, 5vw -5vh, left bottom, center center;}
	to{background-color:black; 
			background-size:200% 200%, 0% 100%, 50% 50%, 70% 70%, 1000% 1000%;
			background-position: -200vw -200vh, right bottom, 10vw -25vh, right top, center center;}
	}	
				
@keyframes anim-fondo
	{
	from{background-color:black;
			background-size:200% 200%, 0% 0%, 50% 50%, 70% 70%, 1000% 1000%;
			background-position: -200vw -200vh, left bottom, 10vw -25vh, right top, center center;}
	10%{background-size:100% 100%, 0% 0%, 100% 100%, 80% 80%, 0% 0%;
			background-position: -60vw center, right bottom, 50vw -50vh, left top, center center;}
	30%{background-size:300% 300%, 0% 0%, 300% 300%, 40% 40%, 0% 0%;
			background-position: -40vw 50vh, right bottom, 50vw 50vh, left bottom, center center;}
	50%{background-size:200% 200%, 0% 0%, 500% 500%, 120% 120%, 0% 0%;
			background-position: 70vw 60vh, right bottom, left top, left bottom, center center;}
	70%{background-size:100% 100%, 0% 100%, 200% 200%, 140% 140%, 0% 0%;
			background-position: 50vw -40vh, left bottom, -100vw 50vh, left top, center center;}
	90%{background-size:400% 400%, 100% 100%, 70% 70%, 500% 500%, 0% 0%;
			background-position: center -40vh, right bottom, 5vw -5vh, left bottom, center center;}
	to{background-color:black; 
			background-size:200% 200%, 0% 100%, 50% 50%, 70% 70%, 1000% 1000%;
			background-position: -200vw -200vh, right bottom, 10vw -25vh, right top, center center;}
	}	

	
/**********************************************
 Presentacion	
**********************************************/	
#presentacion
	{
	position:fixed;
	top:0px;
	left:0px;
	background-color:black;
	opacity:0;
	
	background-image: 	linear-gradient(rgba(255,0,0,0.9), rgba(255,255,0,0.9)), 
									linear-gradient(to right bottom, rgba(255,255,255,0.0),rgba(255,255,0,0.3)),
									radial-gradient(circle closest-side, red, yellow 10%, #1E90FF 50%, rgba(255,255,255,0)),
									radial-gradient(circle closest-side, rgba(100,100,255,0.4), rgba(100,100,255,0.6) 20%, rgba(100,100,255,0.2) 50%, rgba(255,255,255,0)),
									url("../img/logo.png");
	background-size:0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
	background-position: left top, left bottom, right bottom, right top, center center;
	background-repeat:no-repeat;
	
	max-width:0vw;
	max-height:0vh;
	
	-webkit-animation-iteration-count:1;
	animation-iteration-count:1;
	
	-webkit-animation-duration:7s;
	animation-duration:7s;
	
	-webkit-animation-delay: 0s;
    animation-delay: 0s;
	
	-webkit-animation-name:anim-presentacion;
	animation-name:anim-presentacion;
	
	/*-webkit-animation-timing-function: cubic-bezier(0.2,0.8,0.5,0.4);
    animation-timing-function: cubic-bezier(0.2,0.8,0.5,0.4);*/
	}			
	
@-webkit-keyframes anim-presentacion
	{
	from{background-color:#004;
			min-width:100vw; min-height:100vh; max-width:100vw; max-height:100vh;
			background-size:10% 0%, 100% 100%, 50% 50%, 70% 70%, 0% 0%;
			background-position: left top, left bottom, right bottom, right top, center center;
			opacity:1;}
	15%{background-size:10% 100%, 100% 100%, 40% 40%, 30% 30%, 15% 15%;
			background-position: left top, right bottom, right top, left top, center center;}
	30%{background-size:1% 100%, 100% 100%, 10% 10%, 50% 50%, 15% 15%;
			background-position: right bottom, right bottom, left top, left bottom, center center;}
	45%{background-size:0% 0%, 100% 100%, 90% 90%, 20% 20%, 15% 15%;
			background-position: right bottom, right bottom, left center, left center, center center;}
	70%{background-size:0% 0%, 0% 100%, 50% 50%, 70% 70%, 15% 15%;
			background-position: center center, left bottom, left bottom, left top, center center;}
	80%{background-size:0% 0%, 0% 0%, 10% 10%, 20% 20%, 15% 15%;
			background-position: center center, right bottom, center top, center bottom, center center;}
	90%{opacity:1;}
	to{background-color:black; 
			min-width:100vw; min-height:100vh; max-width:100vw; max-height:100vh;
			background-size:0% 0%, 0% 0%, 0% 0%, 0% 0%, 500% 500%;
			background-position: left top, right bottom, left top, left bottom, center center; 
			opacity:0;}
	}	
				
@keyframes anim-presentacion
	{
	from{background-color:#004;
			min-width:100vw; min-height:100vh; max-width:100vw; max-height:100vh;
			background-size:10% 0%, 100% 100%, 50% 50%, 70% 70%, 0% 0%;
			background-position: left top, left bottom, right bottom, right top, center center;
			opacity:1;}
	15%{background-size:10% 100%, 100% 100%, 40% 40%, 30% 30%, 15% 15%;
			background-position: left top, right bottom, right top, left top, center center;}
	30%{background-size:1% 100%, 100% 100%, 10% 10%, 50% 50%, 15% 15%;
			background-position: right bottom, right bottom, left top, left bottom, center center;}
	45%{background-size:0% 0%, 100% 100%, 90% 90%, 20% 20%, 15% 15%;
			background-position: right bottom, right bottom, left center, left center, center center;}
	70%{background-size:0% 0%, 0% 100%, 50% 50%, 70% 70%, 15% 15%;
			background-position: center center, left bottom, left bottom, left top, center center;}
	80%{background-size:0% 0%, 0% 0%, 10% 10%, 20% 20%, 15% 15%;
			background-position: center center, right bottom, center top, center bottom, center center;}
	90%{opacity:1;}
	to{background-color:black; 
			min-width:100vw; min-height:100vh; max-width:100vw; max-height:100vh;
			background-size:0% 0%, 0% 0%, 0% 0%, 0% 0%, 500% 500%;
			background-position: left top, right bottom, left top, left bottom, center center; 
			opacity:0;}
	}
/**********************************************
 Header	
**********************************************/	
#cabecera
	{
	display:block;
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:12vw;
	/*background-color:rgba(100,100,100,0.3);*/
	text-align:center;
	z-index:1000;
	}	
	
#cabecera p
	{
	display:inline-block;
	
	font-size:4vw;
	font-family: "Comic Sans MS", cursive, sans-serif;
	color:white;
	
	height:6vw;
	min-height:6vw;
	max-height:6vw;
	
	margin-left:1vw;
	margin-right:1vw;
	
	text-shadow:0.4vw 0.4vw 0.4vw rgba(50,150,255,0.7);
	
	position:relative;
	z-index:-1;
	
	-webkit-animation-iteration-count:1;
	animation-iteration-count:1;
	}
	
.title_comidas
	{
	width:15vw;
	
	-webkit-animation-duration:2s;
	animation-duration:2s;
	
	-webkit-animation-name:anim-comidas;
	animation-name:anim-comidas;
	}
				
@-webkit-keyframes anim-comidas
	{
	from{top:100vw; opacity:0; }
	to {top:0vw; opacity:1; }
	}	
				
@keyframes anim-comidas
	{
	from{top:100vw; opacity:0; }
	to {top:0vw; opacity:1; }
	}		
	
.title_bebidas
	{		
	width:15vw;
	
	-webkit-animation-duration:2s;
	animation-duration:2s;
	
	-webkit-animation-name:anim-bebidas;
	animation-name:anim-bebidas;
	}
				
@-webkit-keyframes anim-bebidas
	{
	from{top:-100vw; opacity:0; }
	to {top:0vw; opacity:1; }
	}	
				
@keyframes anim-bebidas
	{
	from{top:-100vw; opacity:0; }
	to {top:0vw; opacity:1; }
	}	
	
	
.title_y
	{		
	width:7vw;
	min-width:7vw;
	max-width:7vw;
	
	opacity:0.1;
	-webkit-animation-name:anim-y;
	animation-name:anim-y;
	
	-webkit-animation-duration:4s;
	animation-duration:4s;
	}
				
@-webkit-keyframes anim-y
	{
	from{opacity:0; }
	80%{font-size:2vw; opacity:0;}
	90%{font-size:4vw; opacity:1;}
	to {font-size:4vw; opacity:1; }
	}	
				
@keyframes anim-y
	{
	from{opacity:0; }
	80%{font-size:1vw; opacity:0;}
	90%{font-size:4.2vw; opacity:1;}
	to {font-size:4vw; opacity:1; }
	}
	
.img_cocktail
	{
	position:absolute;
	top:4vw;
	left:47.2%;
	max-width:6vw;
	
	-webkit-animation-iteration-count:1;
	animation-iteration-count:1;
	
	-webkit-animation-duration:5s;
	animation-duration:5s;
	
	-webkit-animation-name:anim-cocktail;
	animation-name:anim-cocktail;
	}	
	
@-webkit-keyframes anim-cocktail
	{
	from{opacity:0; }
	80%{opacity:0;}
	to {opacity:1; }
	}	
				
@keyframes anim-cocktail
	{
	from{opacity:0; }
	80%{opacity:0;}
	to {opacity:1; }
	}	
	
/**********************************************
 Nav
**********************************************/	
nav
	{
	display:block;
	position:fixed;
	top:12vw;
	
	width:100%;
	margin:0px;
	
	background-color:rgba(200,200,200,0.5);
	padding:0px;
	box-shadow:0.0vw 0.4vw 0.8vw #222;
	
	z-index:1000;
	}
	
nav ul
	{
	width:100%;
	display:block;
	
	text-align:center;
	
	/*background-color:blue;*/
	padding:0px;
	margin:0px;
	}	
	
nav ul li
	{
	display:inline-block;
	color:darkblue;
	text-shadow:1px 1px 1px cyan;
	padding:0px;
	margin:0px;
	font-size:2.5vw;	
	font-family:Impact, Charcoal, sans-serif;
	padding:0.5vw;
	}	
	
.platos
	{
	float:left;
	background-color:rgba(255,255,255,0.7);
	border-top-right-radius:1vw;
	border-bottom-right-radius:1vw;
	}	
.vinos
	{
	float:right;
	background-color:rgba(255,255,255,0.7);
	border-top-left-radius:1vw;
	border-bottom-left-radius:1vw;
	}	
	
.menu_contacto a
	{
	text-decoration:none;
	}	
#mapa
	{
	display:block;
	position:absolute;
	width:30vw;
	height:0.1vw;
	left:50%;
	margin-left:-15vw;
	opacity:0;
	transition:opacity 2s, height 2s;
	box-shadow:0.5vw 0.5vw 0.5vw black;
	}	
.icon-location:hover ~ #mapa,
#mapa:hover
	{
	opacity:1;
	height:30vh;
	}	
/**********************************************
 Footer
**********************************************/
footer
	{
	display:block;
	position:fixed;
	bottom:0px;
	height:2vw;
	width:100%;
	background-color:rgba(200,200,200,0.5);
	box-shadow:0.0vw -0.4vw 0.8vw #222;
	font-size:1.7vw;
	text-align:center;
	padding:0.5vw;
	}
	
footer a
	{
	text-decoration:none;
	color:darkblue;
	text-shadow:1px 1px 1px cyan;
	padding:1vw;
	}	
/**********************************************
 Sections
**********************************************/
section
	{
	display:inline-block;
	padding-bottom:4vw;
	padding-top:18vw;
	position:absolute;
	top:0px;
	}	
section a
	{
	list-style-type:none;
	display:block;
	margin-left:0px;
	}	
section img
	{
	width:20vw;
	max-width:20vw;
	}	
#comidas
	{
	left:0px;
	}
#vinos
	{
	right:0px;
	}	
#bienvenida
	{
	position:fixed;
	width:34vw;
	left:33vw;
	}
#bienvenida p
	{
	text-align:center;
	font-family: "Comic Sans MS", cursive, sans-serif;
	font-size:2vw;
	color:yellow;
	text-shadow:1px 1px 1px darkblue;
	}
#bienvenida p::first-letter
	{
	font-size:4vw;
	text-shadow:2px 2px 2px blue;
	}	
	
#bienvenida:hover > p::first-letter
	{
	color:white;
	font-weight:bold;
	font-size:8vw;
	}	
#bienvenida:hover > p::after
	{
	content:"¡Hasta pronto!";
	}