@charset "utf-8";
/* CSS Document */


*{
	margin: 0;
	padding: 0;
	box-sizing:border-box;
	
	}

  body{
	  box-sizing: border-box;
	   width: 100%;
	   background-image:url(../img/arena-fondo.png);
       background-size: cover;
	 
	  }
	
	
   
	  .arriba{
		  width:100%;
		  height:8vh;
		  display:flex;
		  background-image:url(../img/otono/otono_arriba.gif); /*imagen de hojas*/
		  background-size: cover;
		  
		  
		  }
		  
		  .maps{
			  height:100%;
			  width:15%;
			  display:flex;
			  
			  }

			  .maps p{
				color:black;
			  }
			  
		.telefono{
			margin-left:5px;
			width:20%;
			height:100%;
			display:flex;
			
			}
			
		.whatarriba{
			margin-left:5px;
			width:15%;
			height:100%;
			display:flex;
			}
			
	    
			
		.correo{
			margin-left:1%;
			height:100%;
			width:20%;
			display:flex;
			
			}	
		
		
     .arriba img{
		 display:groud;
		 max-width:200px;
	     margin: 0px 15px; /*arriba, izquierda*/
		 margin-top:13px;
		 margin-left:25px;
		 width:20px;
		 height:20px;
		 }
		 
			
			
			
		 
	.arriba p{
		font-weight:bold; /*texto en negrita*/	  
		margin-top:15px;
		
		
	           }
			   
		
		.container{
			width:100%;
			height:12vh;
			display:flex;		
			}
		
	  .hg{
		  
		  width:140px;
		   margin-left:5px;
		  margin-top:25px;
			text-align:left;
			
			
			}
			
	  .logo{
		  
		  width:10%;
		  
		  
		  }
			
		
	 .logo img{
		 float:left;
		 width:65px;
		 height:65px;
		 margin-top:8px;
		 margin-left:60px;
		
		 }
		 

		 .menu{                            /*enlaces*/
			
			text-align:center;
			margin-left:65px;
			width:60%;
			padding:15px;
			font-family:"Prince Valiant";
			font-size:21px;
			
			
			}
			
	      .menu li{
			  
			 
			      margin-left:17px;
			     display:inline;
				 list-style:none;
			    z-index:100;
			     padding:10px 10px;
			
			        }
			
			.menu ul li:hover{
				opacity:0.5;
				border-bottom-style:groove;
				
				
				
				}
				
			
				
	.service{
		
		background-image:url(../img/verano/costa.gif);
		background-size: cover;
	    width:100%;
		height:25vh;
		
		
		}

		.service p{
		font-family: cursive;
	 	font-size: 42px;
		color: white;
        position: absolute;
		text-align: center;
		left: 45%;
		top: 29%;

		}
		
	.container_contacto{
	  background-size:100% 100%;       /*establece el tamaño de la imagen de fondo*/
	  font-family:martel;
	 background-attachment:fixed;
	 margin:0;
	 
	            }




            form{
				
			width:450px;
			margin:auto;
			padding:10px 20px; /*espacio entre los items-*/
			background-image:url(../img/verano/mar.webp);
			margin-top:80px;
			box-sizing:border-box; /*para que no se desborde el DIV*/
			border-radius:10px;  /*redondea las esquinas del formulario*/
			box-shadow: 0 0 25px rgba(255,204,51,1);  /*sombra alrededor del formulario*/
			
			
			
			
			
	                           }
				
				
		form img{                     /*logo de HH en el formulario*/
			margin-left:175px;
			width:50px;
			height:50px;
			
			
			             }
						 
		h2{
			
			font-size:30px;
			color:black;
			text-align:center;
			margin:0;
			margin-bottom:2px;
			
			}
			
		input, textarea{
			width:100%;
			margin-bottom:15px;
			padding:7px;
			box-sizing:border-box;
			font-size:15px;
			border-radius:20px;
			border:none;
			outline:none; /*al seleccionar el box no pone bordes*/
			
			           }
					   
			textarea{
				min-height:100px;
				max-height:140px;
				max-width:100%;
				
				}
				
		  #btn{
			  background-color:#FC9;
			  padding:10px;
			  font-weight:bolder;
			  
			  }
			  
		 #btn:hover{
			 cursor:pointer;
			 background-color:#F60;
			 }
			 

			 	
/*comienzo de pie de pagina*/
		    	
 footer.pie{
	background-image:url(../img/otono/otono_pie_media.gif);
	background-size: 1366px 230px;
	border-style:groove double groove double;
	border-width:thin;
	border-color:#666;
	margin-top:150px;
	display:flex;
	width:100%;
	height:vh100;
	font-weight:bold;
   
   }
   
   
   .logo_footer{
		  width:18%;
		   display:flex;
		   text-align:center;
	   }
	   
	   
   .logo_footer h3{
	            color:black;
				margin-top:30px;
	   }

	   .logo_footer h5{

		color:black;
	   }
   
   
  .logo_footer img{
			margin-left:10px;
   
   }
   
   .rt {
	   margin-left:10px;
		   width:20%;
			  height:20%;
		   
		   
	   }
		   
	   .rt p{                          /* parrafos reserva telefonica*/
		   margin-top:7px;
		   margin-left:10px;
		   color:black;
		   text-align:center;
		   display:block;
		   font-family:Martel, "Martel DemiBold", "Martel ExtraBold", "Martel Heavy", "Martel Light", "Martel UltraLight";
		   font-size:15px;
		   
		   }
		   
		   
	   .ubica{
	   margin-top:6px;
	   margin-left:5px;
	   width:15%;
	   height:13vh;
	   font-family:Martel, "Martel DemiBold", "Martel ExtraBold", "Martel Heavy", "Martel Light", "Martel UltraLight";
	   
	   }
	   
   
	   
   .ubica p{
	   
	   
	   margin-right:5px;
	   text-align:center;
	   color: black;
	   
	   }
	   
	   
   .ubica img{
			   margin-top:3px;
			   margin-left:70px;
			   border-radius:15px;
			   width:25%;
			   height:58%;
	   
	   }
	   
	   a.maps:hover{
		   opacity:0.8;  /*brilla al pasar por la img del enlace*/
		   
		   }
		   
	   .redes{	
			   margin-left:10px;
			   margin-top:5px;
			   width:100%;
			   height:85%;
			   
		   
		   }
		   
	   .redes img{
		   width:50px;
		   height:50px;
		   margin-top:30px;
		   
		   }
		   
		   
   .autor{
	   width:15%;
	   height:18vh;		
	   padding:1px;
	   top:1px;
	   display:flex;
	   margin-left:45px;
   
	}
		  
 .autor img{
	 margin-top:25px;
	 width:60px;
	 height:60px;
	 
	 
	 }
	 
 .autor p{
	 text-align:center;
	 margin-top:30px;
	 color: black;	
	 
	 }
	 
.what img{
	   margin-top:7px;
		margin-left:55px;
		 width:65%;
		  height:65%;
	
   
	}
	


  


			 /*comienzo de media query a 1080px*/
			 
		@media (max-width:1080px) {

			*{
				margin: 0%;
				padding: 0%;
				box-sizing: border-box;
			}

			html, body{
				width: 100%;
				margin: 0 auto;
				overflow-x: hidden;
               }


			.arriba{
				background-image: url(../img/otono/hoja.png);
				background-size: 100% 100%;
				display: grid;
				justify-items:left;
				width: 100%;
				height: 28%;
				
			}

			.maps{
				height: 25%;
				width: 100%;
				
				}

			.maps p{
				color:black;
				font-size:18px;
				margin-top: 40px;
			}

			.maps img{
			margin-left: 60px;
			width: 45px;
			height: 45px;
		}

		.telefono{
			height: 25%;
			width: 100%;
			
			}


		.telefono img{

			width: 45px;
			height: 45px;
			margin-left: 60px;
		}

		.telefono p{

		  margin-top: 37px;
		  font-size: 18px;

		}

		.whatarriba{
			width: 100%;
			height: 25%;
		   
	   }

	   .whatarriba img{

		   width: 45px;
		   height: 45px;
		   margin-left: 60px;
	   }

	   .whatarriba p{
		   font-size: 18px;
		   margin-top: 37px;
	   }

	   .correo{
		height: 25%;
		width: 100%;
		margin-top: 0px;
		
	}

	.correo img{

		width: 45px;
		height: 45px;
		margin-left: 60px;
		margin-top: 26px;
	}

	.correo p{
	  font-size: 18px;
	  margin-top: 45px;

	}

	.container{                     /*contiene el logo y el menu de navegacion*/
		width: 100%;
		height:14vh;
		margin-top: 0%;
		
		}

		.logo img{
			top: 0%;
			width:50px;
			height:50px;
			margin-left: 8px;
		}

		.hg{
			align-content: center;
			margin-left: 0%;
			width: 25%;
			margin-top: 0px;
			height:9vh;
			
			
		}

		.hg H3{
			font-size: 15px;
			margin-left: 30px;
			margin-top: 0%;
		}

		.hg H5{
			font-size: 11px;
			margin-left: 17px;
			
		}

		.menu{                                      /*menu de navegacion*/
			display:grid;
			grid-template-columns: 100%;
			grid:gap 20px;			
			height: 100%;
			width:100%;
			font-size: 22px;
			margin-left: 0%;
			margin-top: 5px;
			
			
			
		 }


		 .service{

			width: 100%;
			height: 9vh;
			
		 }

		 .service p{

		                left: 35%;
						top:400px;
						font-size: 40px;
		 }

		  /*formateo de footer a 1080px*/


		  footer.pie{
            background-image: url(../img/otono/otono_pie_media.gif);
			background-size: 100% 100%;
			display: inline-block;
			height: 60%;
			width: 100%;
			margin-top: 0%;
			
			
		 }


		 .pie .logo_footer{
			width: 100%;
			height: 8vh;
			align-items: center;
			justify-content: center;
			

			}

		   .logo_footer img{

			  width: 45px;
			  height: 45px;
			  margin-left: 50px;
			  
		   }

		   .logo_footer h3{
			  color:black;
			  font-size: 20px;
			  margin-top: 5px;
		   }

		   .logo_footer h5{
			color:black;
			  font-size: 15px;
			  text-align: center;
		   }

		   .rt{

			display: grid;
			width: 100%;
			height: 8vh;
			margin-left: 0%;
			margin-top: 0px;
			align-items: center;
			text-align: center;
			justify-items: center;
			
			
		 }

		 .rt p{
			top:10px;
			margin-left: 60px;
			font-size:17px;
			color: black;
		 }

		 .ubica{
			display: grid;
			align-items: center;
			justify-items: center;
			width: 100%;
			height: 8vh;
			margin-top: 0%;
			
		 }

		 .ubica img{

			margin-left: 10px;
			width: 45px;
			height: 45px;
			margin-top: 3px;
		 }

		 .ubica p{

			width: 17vh;
			margin-left: 10px;
			font-size: 17px;
			margin-top: 10px;
			color:black;
		 }


		 .box .redes{

			width: 100%;
			height: 8vh;
			align-content: center;
			margin-left:0%;
			margin-top: 0px;
			box-sizing: border-box;
			

		 }


		 .box .redes img{
			margin-left:130px;
			justify-items: center;
			margin-top: 0px;
			height: 45px;
			width: 45px;
		  }

		  .autor{
			display: flex;
			margin-left: 0%;
			width:100%;
			height: 8vh;
			margin-top: 0%;
			align-items: center;
			
			
		  }

		  .autor img{
			margin-left: 140px;
			width: 45px;
			height: 45px;
			
			
		}

		   .autor p{
			margin-left: 0px;
			margin-top: 40px;
			justify-content: center;
			width: 200px;
			height: 60px;
			font-size: 14px;
			
		   }

		   .pie .what{
			align-content: center;
		   width: 100%;
		   height: 8vh;
		   
		 }

		 .pie .what img{
			margin-left: 200px;
			width: 55px;
			height: 55px;
			
			
		 }










		}