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


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

	
	
   
	  .arriba{
		 
		  height:8vh;
		  width:100%;
		  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)	;
	    width:100%;
		height:25vh;
		
		}
		
	.construccion {
		background-image: url(../img/verano/mar.webp);
		width:100%;
		height:30%;
		
		
		}
		
	.construccion h1{
		text-align:center;
		margin-top:15px;
		
		
		}
		
		.construccion img{
			width:20%;
			height:20%;
			margin-left:534px;
			
			
			
			}
		
	
		
	
		  
							 
			
		
		  
		
		
     
		    
					
		/*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{
			         margin-top:30px;
					 color: black;
			}

			.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) {

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

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

			
			.arriba{                 
				background-image: url(../img/otono/hoja.png);
				background-size: 100% 100%;      /*contenedor de maps-telefono-what y correo*/
				display: grid;
				justify-items:left;
				width: 100%;
				height: 28%;
				
				
				}

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

				.maps p{
					color: black;
					font-size:35px;
					margin-top: 50px;
				}

				.maps img{
				margin-left: 200px;
				width: 120px;
				height: 120px;
			}

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


			.telefono img{

				width: 110px;
				height: 110px;
				margin-left: 200px;
			}

			.telefono p{

			  margin-top: 70px;
			  font-size: 35px;

			}

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

		   .whatarriba img{

			   width: 120px;
			   height: 120px;
			   margin-left: 200px;
		   }

		   .whatarriba p{
			   font-size: 35px;
			   margin-top: 50px;
		   }

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

		.correo img{

			width: 100px;
			height: 100px;
			margin-left: 135px;
			margin-top: 26px;
		}

		.correo p{
		  font-size: 35px;
		  margin-top: 80px;

		}

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

		.logo img{
			top: 0%;
			width:120px;
			height:120px;
		}

		.hg{
			width: 25vw;
			margin-top: 0px;
			height:10vh;
			
		}

		.hg H3{
			font-size: 28px;
			margin-left: 80px;
			margin-top: 19px;
		}

		.hg H5{
			font-size: 21px;
			margin-left: 80px;
		}

		.menu{                                      /*menu de navegacion*/
			display: grid;
			grid-template-columns: 100%;
			grid:gap 10px;
			width:31vh;
			font-size: 53px;
			margin-left: 0%;
			
			
			
		 }

		 .service {

			display: none;
		 }

		 .construccion{
			width: 100%;
			height: 35vh;
			top: 0%;
			background-color: aquamarine;
		 }

		 .construccion h1{

			font-size: 55px;
		 }
 
		 .construccion img{
            margin-left: 190px;
			width: 600px;
			height: 600px;
		 }


		 /*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: 110px;
			  height: 110px;
			  margin-left: 50px;
			  
		   }

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

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

		   .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:32px;
			color: black;
		 }

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

		 .ubica img{

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

		 .ubica p{

			width: 17vh;
			margin-left: 10px;
			font-size: 30px;
			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:260px;
			justify-items: center;
			margin-top: 0px;
			height: 100px;
			width: 100px;
		  }

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

		  .autor img{
			margin-left: 300px;
			width: 100px;
			height: 100px;
			
			
		}

		   .autor p{
			color:black;
			width: 250px;
			height: 120px;
			font-size: 25px;
		   }

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

		 .pie .what img{
			margin-left: 440px;
			width: 130px;
			height: 130px;
			
			
		 }

		 
	 }