@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 flores rosas*/
		  background-size: cover;
		  
		  
		  }
		  
		  .maps{
			  height:100%;
			  width:15%;
			 display:flex;
			  
			  }

			  .maps p{
				color:black;
			  }
			  
		.telefono{
			margin-left:5px;
			width:20%;
			height:100%;
			display:flex;
			
			}

			.telefono p{
				color:black;
				
				
			}
			
		.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: 15px 15px; /*arriba, izquierda*/
		 margin-top:13px;
		 margin-left:35px;
		 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;
				
				
				
				}
				
			
	
				
	.fondo {                       /*div que contiene la palabra servicios*/
		width: 100%;
        height: 25vh;
		background-image: url(../img/verano/costa.gif);
		background-repeat: no-repeat;
		background-size: cover;
	}

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

	}
		
	    
		
		
	
		
	.container_service{
		     height:80vh;
	        display:flex;
	        
		}
		
	
		aside, main{
			
		width:50%;
		font-family:martel;
		font-size:22px;
		
		
		}
		
		aside{
			padding:5px;
	       text-align:center;
		  background-image:url(../img/textura-otono.png);
	       
	}
	
aside img{
	float:left;
	margin-left:140px;
	
	}
	
	aside p{
		float:left;
		margin-left:10px;
		margin-top:24px;
		
		}
		
		 main{
			  padding:5px;
	         text-align:center;
	        background-image:url(../img/textura-otono1.png);
	  
	
	}
	
	main img{
		float:left;
	    margin-left:140px;
		}
		
	main p{
		float:left;
		margin-left:10px;
		margin-top:18px;	
		
		}

		.completar{
			width: 100%;
            height: 100%;
		}
	 
	 .completar img{
		
		 width:100%;
		 height:75vh;
		
		 
		  }
		
	
		
	
		  
							 	/*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:0px;
		 display:flex;
		 width:100%;
		 height:100%;
		 font-weight:bold;
		
		}
		
		
		.logo_footer{
			   width:820px;
			   height: 180px;
			    display:flex;
			    text-align:center;
				margin-left: 20px;
				
				
			}
			
			
		.logo_footer h3{
			color: black;
			margin-top:30px;

			}
		 
			.logo_footer h5{

				color:black;
			}
		
	   .logo_footer img{
		         margin-left:10px;
		
		}
		
		.rt {
			margin-left:40px;
				width:650px;
				   height:180px;
				   display: flex;
				
				
			}
				
			.rt p{                          /* parrafos reserva telefonica*/
				margin-top:20px;
				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:13px;
			margin-left:30px;
			width:500px;
			height:150px;
			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:50px;
			        border-radius:15px;
			        width:25%;
			        height:58%;
			
			}
			
			a.maps:hover{
				opacity:0.8;  /*brilla al pasar por la img del enlace*/
				
				}
				
			.redes{	
				    /*justify-items: center;*/
				    margin-left:25px;
				    margin-top:5px;
				    width:70%;
				    height:85%;
					
				    
				
				}
				
			.redes img{
				margin-left: 35px;
				width:50px;
				height:50px;
				margin-top:30px;
				
				}
				
				
		.autor{
			width:500px;
			height:180px;		
			padding:1px;
			top:1px;
			display:flex;
			margin-left:0px;
			
		
		 }
			   
	  .autor img{
		  margin-top:25px;
		  width:60px;
		  height:60px;
		  
		  
		  }
		  
	  .autor p{
		  text-align:center;
		  margin-top:30px;
		  color: black;	
		  
		  }

		  .what{

			width: 500px;
			height: 180px;
			margin-left: 50px;
		  }
		  
	 .what img{
		    margin-top:7px;
		     margin-left:0px;
		      width:65%;
		       height:65%;
		 
		
		 }	       


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

			html, body{
				width: 100%;
				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{
					font-size:35px;
					margin-top: 50px;
					color: black;
				}

				.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{
			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{
			display: grid;
			grid-template-columns: 100%;
			grid:gap 10px;
			width:31vh;
			font-size: 53px;
			margin-left: 0%;
			
		 }

		 .fondo{

			width: 100%;
		   height: 10vh;
		  
		 } 

		 .fondo h1{

			left: 39%;
			font-size: 80px;
			top:910px;
			
		 }
        
		
        
		
		 .container_service {   /*contenedor de texto de los servicios*/
			width: 100%;
			height: 30vh;
			

	         }

			 aside, main{
                 width: 100%; 
				font-size: 35px;
				padding: 15px;
				
			 }

			 aside{

				
				text-align: center;
			 }
           aside img{
			background-repeat: no-repeat;
             margin-left: 10px;
			float:left ;
		   }
            
		   main{

			text-align: center;
		   }

		   main img{

			background-repeat: no-repeat;
			float: left;
			margin-left: 10px;
		   }
            
		   .completar{

			width: 100%;
			height: 100%;
		   }

		 .completar img{

             background-image: url(../img/primavera/HH.jpg);			
		 } 
				 

		
		
		
		
		

		   /*formateo de footer a 1080*/

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

		 .pie .logo_footer{
			margin-left: 0px;
			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;
		 }

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

		 .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;
		 }


		  .redes{

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


		  .redes img{

			margin-left:280px;
			align-items: center;
			margin-top: 0px;
			padding: 3px;
			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{
			width: 250px;
			height: 120px;
			font-size: 25px;
		   }

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

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










		 }