@charset "utf-8";
/* CSS Document */
html{
	width:1024px;
	height:768px;
}
body{
	background-color:#CCC;
	width:100%;	
	height:100%;
}

#logotipo{
	width:25%;
	height:20%;
	left:5%;
	top:5%;
}

/*   Video   */
#pantalla{
	height: 100px;
	width: 305px;
	position: absolute;
	z-index: 2;
	border:thin solid #F00;
	border-radius:10px;
	background-color:#191313;
	top: 365px;
	left: 37%;
}
	
#mivideo{
	align-content:center;
	height:100px;
	width:285px;
}

/*   Audio   */
#musica{
	position: absolute;
	z-index: 2;
	top: 0%;
	left: 75%;
	background-color:#CCC;
	border:#F00 solid medium;
	padding-left:5px;
	padding-right:5px;
}

#botones button{
	margin-top: 1%;;
	height: 23%;	
	position:absolute;
	width:12%;
	z-index:2;	
	opacity:.5;
}

#botones button[id="rest"]{margin-left: 26%;}
#botones button[id="copas"]{margin-left: 41%;}
#botones button[id="cenas"]{margin-left: 56%;}

#botones_rest button {	
	z-index:1;
	width: 6%;
	background-color:red;
	position: absolute;
}

#botones:hover{
	
}
 #botones_rest button[id="mediterraneo"]{height:10%;margin-left: 53%;margin-top:7%;}
 #botones_rest button[id="americano"]{height:10%;margin-left: 53%; margin-top:0%;}
 #botones_rest button[id="mexicano"]{height:10%; margin-left:45%;	margin-top:7%;}
 #botones_rest button[id="italiano"]{height:10%;margin-left: 45%; margin-top:0%;}


#capa2{
	background-color: #92AFD6;
	transition-duration: 3s;
		transition-property: width, height, border-radius, background-color;
		-webkit-transition-duration: 3s;
		-webkit-transition-property: width, height, border-radius;
		
padding:15px;
border:#000 3px solid;
display:block;
position:absolute;

left: 37%;
  top:7%;
visibility:hidden;
z-index:2;
}

	
 #imagen{
	margin-left:25%;
	position: absolute;
	z-index: 1;
}
 #imagen_rest{
	 margin-left:40%;
	 top:15%;
	margin-top:-2%;
	position: absolute;
	z-index: 1;	
}

#imagen_copas{
	 margin-left:40%;
	 margin-top:-2%;
	 z-index: 1;
	}
		
#imagen_cenas{
	margin-top:-2%;
	margin-left:40%;
	z-index: 1;
	}

#correo{
	position: absolute;
	z-index: 4;
	left: 5%;
	top: 80%;
}

/**************************/
#telefonovisible{
	position: absolute;
	z-index: 3;
	left:85%;
	top: 80%;

}

#telefonoopcion{
	position: absolute;
	z-index:1;				
	height: 75px;
	width: 200px;
	left:75%;
	top:70%;
	padding:20px;
	border: black 1px solid;
	background-color: grey;
}

/***************/
#descripcion {
	/*background-color: #FF0;*/
	background-image:url(fondos.png);
	border: thin solid #F00;
	height: 200px;
	width: 500px;
	top:60%;
	left:20%;
	
	position:absolute;
}

#relleno_descripcion
{
	
	margin-left:3%;
	margin-top:2%;
	height:160px;
	width:470px;
	border-color:#FFF;
	visibility:hidden;
}
#mapa {
	/*background-image:url(fondos.png);*/
	z-index:3;
	background-color: #FF0;
	border: thin solid #F00;
	height: 200px;
	width: 250px;
	top:60%;
	margin-left:60%;
	position:absolute;
}

#map{
	position: absolute;
	z-index: 3;
	left:55%;
	top: 80%;
}

#relleno_mapa{
	
	margin-left:3%;
	margin-top:2%;
	height:160px;
	width:230px;
	border-color:#FFF;
	visibility:hidden;
}

#capa2 p:first-letter{text-transform:uppercase; color:#92AFD6;
/*font-weight bold font-size 24 color*/}
#capa2 p:first-line{}
#capa2 p:nth-child(even){background-color:#FFF; color:#000;}
#capa2 p:nth-child(odd){background-color:#000; color:#FFF;}
#capa2 p:hover{background-color:#F0F}




/*   Estilo formulario   */
#formulario{
	text-align: center;
	position: absolute;
	float: center;
	background-color: #CCC;
	border: thin solid #666;
	border-radius: 10px;
	left:40%;
	top:5%;
	padding-right: 20px;
	padding-left: 20px;
}

#formulario input {
	background-color: #CCC;
	height: 30px;
	width: 100px;
	color: #333;
	border-color: #F00;
	border-radius:20px;
	box-shadow:5px 3px 10px #000;
}

input:focus{
	outline:none;
}

input[name="email"]{
	width:200px;
	}

fieldset[name="mensaje"]{
	background:#FFF;
	text-align:left; 
}
textarea{
	resize:both;
}

#formulario button{
background-color: blue;
}
/*  estilo pagina contactos  */
#contactos{
	position:absolute;
	background-color:#CCC;
	width:25%;	
	height:25%;
	top:35%;
	left:35%;
	padding:3%;
	border:solid 2px #000000;
	border-radius:10px;
	
}
#miCanvas{
z-index:2;
	left:20%;
	top:10%;
	position:absolute;
	visibility:hidden;
	border:solid 2px #FF0000;
}


iframe{
	transition-duration: 3s;
		transition-property: width, height, position;
		-webkit-transition-duration: 3s;
		-webkit-transition-property: width, height, position;
}
iframe:hover
{
	position:absolute;
	top:-50%;left:-50%;
	width:680px;
	height:340px;
}