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

*{
	padding:0;     /*esto hace que ocupe toda la pagina*/
	margin:0;
	box-sizing: border-box;
                              }

	body{

		width: 100%;
		overflow-x: hidden; /*controla el contenido que excede el ancho eje X de su
		contenedor*/												
	}



 header{
		
	     width:100vw;
		 height:100%;
	     top: 0; 
		 box-sizing:border-box;
		 
	
	     }

		 .adorno{	
			
			margin-right: 30px;
			float: right;
			width: 20%;
			height: 30vh;
           
		 }

		 .adorno img{
			margin-left: 45px;
			margin-top: 0;
			width: 140px;
			height: 180px;
			
		}


		
	 /*contiene el logo y los H3/H5 */
 .contenedor{
                  
	              width:35%;
			      height:30vh;
				  margin: auto;
                  text-align: center;
				  align-items:center;
				  box-sizing:border-box;
				  			
				 
				  
			      }
				
 
			  
			  
	h1, h3{
	        text-align:center;
			box-sizing: border-box;
			
			   }
			   
			   
				   
		#btn-cerrar{
			display:none;
			
			}
			
	.contenedor-llave	{
	position: absolute;
	width: 17%;
	height: 29%;
	left:38px;
	transition: all 1500ms ease;
	box-sizing: border-box;
	top:5px;
		 
		 }


		 
	.llave img{
				
			 
			  height:auto;
			  /*left:6px;*/
			  width:100%;
		      height:100%;
	 	      cursor:pointer;
			  box-sizing: border-box;
		 
		       }


		 
		.container-menu{                     /*contenedor del menu*/
			top:0;
			left:0;
			position:absolute;
			border-style :double; color:#1c0d02;
			border-radius:5px;
			background:#ffff; 
			height:55vh;
	        width:100%;
			max-width:200px;
		    transition: all 2000ms ease;
			opacity:0;
			visibility:hidden;
			box-sizing:border-box;
			
			}
			
			#btn-cerrar:checked ~ .container-menu{
				opacity:1;
			    visibility:visible;
				}
			
		.container-menu .menu{
			height:48vh;
			width:100%;
			max-width:200px;
			position:relative; /*es para que la x de cerrar se quede dentro de este div*/
			transition: all 1000ms ease;
						
			}
			
			
			
		.menu nav{
			
			transform:translateY(10%) /*acomoda el menu + arriba o mas abajo segun el %*/
			}
			
	     .menu nav a{
			display:block; /*la lista se ordena de forma vertical*/
			font-size:18px;
			font-family:lucida calligraphy, lucida console, ms serif;
			text-decoration:none;
			padding:6px;  /*espacio entre las items*/
			color:#333; /*color de las letras del menu*/
			border-left:5px solid trasnparent;
			transition: all 700ms ease;
			
			
			}
			
			.menu nav a:hover{
				border-left:5px solid #999;
				background:#E0E0E0;
				}
				
			.menu img{      /*boton cerrar*/
				position:absolute;
				width:20px;
				height:24px;
				right:5px;
				top:1px;
			    cursor:pointer;
				
				}

				
			    
				
	  
 
            
.linea{
	 background-color:#E4E4E4;
	 width:100%;
	 height:4px;
	 margin-top:2px;
	 
	 }

	 .navidad{

        display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 30%;

	 }

	 .navidad p{
		margin-top: 2px;
       font-size: 23px;
		color:black;
	 }

.promo{
	text-align:center;
	width:100%;
	height:30%;
	background-color:#E0E0E0;
	}
	
	
   .promo p{
	font-size:24px;
	
	}
	
	/*formateo del slider*/
	
	.slider{
		width:100%;
		height: 100%;
		overflow:hidden;  /*oculta todo lo que este fuera del div padre */
		
		}

	.slider ul{
		
		display:flex;
		animation: cambio 18s infinite alternate linear;
		width:400%;
		
	    }
		
		
	.slider li{
		height: 100%;
		width: 100%;
		list-style:none;
		
		}
		
	.slider img{
		width:100%;
		height:100%;
		
		}
		
		@keyframes cambio{
			0%{margin-left: 0;}
			20%{margin-left: 0;}
			
	        25%{margin-left: -100%;}
	        45%{margin-left: -100%;}
		 
		    50%{margin-left: -200%;}
            70%{margin-left: -200%;}

            75%{margin-left: -300%;}
            100%{margin-left: -300%;}
			
		}
		
		

      .info h3{
		  
		  margin-left:20px;
		  font-family:Martel;
		  font-size:24px;
		  margin-top:5px;
		  text-shadow:#CCC 5px 8px 3px; /*le da sombra a un texto*/
		 
		
		  
		  }
		  
		
			
			.p{
				
				font-family:Martel, "Martel DemiBold", "Martel ExtraBold", "Martel Heavy", "Martel Light", "Martel UltraLight";
				margin-top:13px;
				font-size:16px;
				}


		.reel{

			margin-left: 350px;
			width: 65%;
			height: 65%;
			margin-top: 25px;
		}


     
	.premio {
		
		display:flex;
		justify-content:center;
		width:100%;
		
		          }
	

	.distincion img{
	    margin: 50px;
	   width: 200px;
	   height: 200px;
	 
	  }
		
	article p{
		font-family:Martel, "Martel DemiBold", "Martel ExtraBold", "Martel Heavy", "Martel Light", "Martel UltraLight";
		font-size:16px;
	 }

	 .informe p{
		font-size: 24px;
		margin-top: 45px;
		text-align: center;

	 }
	 
	 
	.fila{
		
		display:flex;
		height:60vh;
		width:100%;
		margin: 10px 10px; /*arriba, izquierda*/
		box-sizing: border-box;
		
		
		
		}

		
		
		.hab{
			box-sizing: border-box;
			margin-left:15px;
			width:100%;
			
			
		
			
				}
			
		
			
	.hab .item{
		
        max-width:380px;
		padding:20px;
		height:325px;
		text-align:center;
		margin: 0 10px;
		cursor:pointer; /* aparece la mano al pasar por los productos*/
		justify-content: space-around;
		margin-bottom:40px; /*separacion entre los productos*/
		
		
		
		}
		
		.hab .item:hover{
		box-shadow:0 10px 20px #D8D2E9;
		
		}
		
	.hab .item .foto img {
		
	    width:100%;
		margin: 10px 0;
		border-radius:10px;
		
		
		}
		

		
		/*comienzo de pie de pagina footer*/
		    	
 footer.pie{
	      left: 0%;
	      display:flex;
		  padding: 0 0 0 0px;
		  background-image: url(../img/otono/otono_pie_media.gif);
		  background-repeat:no-repeat;
          background-size: 1366px 230px;
	      border-style:groove double groove double;
		  border-width:thin;
		  border-color:#666;	
	      margin-top:40px;
		  width:100%;
		  height:30%;	
		  font-weight:bold;
		 
		
		}
		
		
		.logo_footer{
			
			   width:18%;
			   max-width:18%;
			    display:inline-flex;
				align-items: center;
				box-sizing: border-box;
				
			   
			}
			
			
		.logo_footer h3{
			         margin-top:30px;
					 color: black;
					 
					 
			}

		.logo_footer h5{
             
			color:black;
			
		}
		
		
	   .logo_footer img{
		         margin-left:10px;
		
		}
		
		.rt {

			align-content: center;		
			margin-top: 15px;
            margin-right: 15px;
			padding: 0px 2px;
			width:100vw;
			max-width:20%;

				   
		}   	
				  

			.reserva_telefono { 
				width: 100%;
				height: 3vh;  
				align-content:center;
				margin-bottom: 3px;
				color:black;
				text-align:center;
				display:block;
				font-family:Martel, "Martel DemiBold", "Martel ExtraBold", "Martel Heavy", "Martel Light", "Martel UltraLight";
				font-size:15px;
				box-sizing: border-box;
				
				}

				.numeros{
					margin-top:5px;
					text-align: center;
				}

								
				
			.ubica{
				
				align-content:center;
				width:15%;
				height:25vh;
				font-family:Martel, "Martel DemiBold", "Martel ExtraBold", "Martel Heavy", "Martel Light", "Martel UltraLight";
				
			   
			}
			
		
			
		.ubica p{
			text-align:center;
			color: black;
			
			
			}
			
			
		.ubica img{
			        margin-left: 20px;
			        border-radius:15px;
			        width:75%;
					max-width: 100%;
			        height:40%;
					box-sizing: border-box;
			
			}
			
			a.maps:hover{
				opacity:0.8;  /*brilla al pasar por la img del enlace*/
				
				}
				
			.box .redes{	
				   				    
				    align-items: center;
				   	 display: flex;
				    width:100%;
				    height:100%;
					box-sizing: border-box;
					
				    
				
				}
				
			.box .redes img{
				width:50px;
				height:50px;
				margin-top:30px;
				box-sizing: border-box;
				
				}
				
				
		.autor{
			
			align-items: center;
		    justify-content: center;
			width:30%;
			height:30vh;		
			display:flex;
			box-sizing: border-box;
			
			
		
		 }
			   
	  .autor img{
		  margin-top:10px;
		  width:60px;
		  height:60px;
		  text-decoration-line: none;
		  
		  
		  
		  }
		  
	  .autor p{
		 	text-decoration-line: none;
		    text-align:center;
			color:black;
		  	
		  
		  }

		 .pie .what{
			
			margin-right: 2px;
			align-content: center;
            width:16%;
			height:30vh;
			box-sizing: border-box;
			
			
			
			
		  }
		  
	 .what img{
		       margin-left:40px;
		       width:50%;	
		       height:50%;
			   box-sizing: border-box;
		 
		
		 }
		
		
	
		
		
		
		


			/* comienzo de media queri*/

			
			@media (max-width: 1080px) {

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


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

					 }


				header{
				width: 100%;
				margin:0 auto;
				justify-content:center ;
				align-items: center;
				padding: 15px 0;
				box-sizing:border-box ;

					 

					 }


				.adorno{
                    
					width: 23%;
					height: 8%;
					margin-right: 8px;
				}

				.adorno img{
                    
					max-width: 100%;
					max-height: 100%;
					margin-left: auto;


				}

					 

					.contenedor-llave{

						margin-left: 0;
						justify-items: center;
						
					}

					.llave img{	
						
		                
					    margin-right: 0;
						width: 150px;
						height: 210px;		
                        
					}

					.navidad{

						text-align: center;
					}


				.container-menu{

					height: 30vh;
				}

				.promo{
                   margin-top:0%; 
					

				}

				.slider{
					width: 100%;
					background-color:antiquewhite;
					overflow: hidden;
				}
				
				main .p{

					text-align: center;
					

				}

				.reel{
                    
					margin-left:auto;
					width: 100%;
					height: 65%;
					margin-top: 15px;

				}

				  video{
                     
					width: 100%;

				  }

				

				.distincion img{
                    display: block;
					justify-content:center ;
					margin-left: auto;
					margin-left: auto;

				}

                 .fila {
					width:100%;
					height: 100%;
					margin:5px ;
                    display:inline-block;
					
					
				    }
                      
					/*formateo de footer a 1080*/

					
					
					 footer.pie{ 
                    box-sizing: border-box;
					background-image:url(../img/otono/otono_pie_media.gif);     
					background-size:100% 100%;
					display:flex;
					flex-direction: column;
					align-items: center;
					 width: 100%;
					 height: auto;
					 padding: 15px 0;
					 margin-top: 5px;
					 

					
					           }

                       .pie .logo_footer{
                        
						display:block;
						width: 100%;
						height: 30%;
						justify-items: center;
                    	
						
					}

					.logo_footer img{

						width:60px;
						height: 60px;
						
					}
					
					.logo_footer h3{   /*hotel hawaii*/
						
						margin-top: 0;
						color: black;
						font-size:20px ;
						

						
					}

					
				.logo_footer h5{      /*mar del plata*/
					text-align: center;
					width: 100%;
					color:black;
					font-size:18px;
					white-space: nowrap; /*se mantiene en linea horizontal*/
				
				}

				

				

				 .rt{
					width: 100%;
					height: auto;
					margin-top: 20%;
					text-align: center;
					
					
					}


				 .reserva_telefono {
					display: flex;
					color:black;
					justify-content: center;
					margin-top:20%;
					font-size:19px;
					white-space: nowrap;
					margin-left: 15%;

				 }

				 .numeros{
                       white-space: nowrap;
                       text-align: center;
				 }

				    .ubica {
						display:flex;
						 flex-direction: column;
						 align-items: center;
						width:100%;
						margin-top: 20%;
						
						
						
					  }

					  .ubica img{
						margin-left:0;
						width: 55px;
						height: 55px;
						
					  }

					  .ubica p{
						
						color: black;
						width: auto;
						padding: 5px 15px;
						font-size: 20px;
						margin-top: 10px;

					  }

					  .box .redes{
						display: flex;
						justify-content:center;
						gap:20px ;
						width: 100%;
						margin-left:0px;
						margin-top: 0;
						
						
						
						}

					 .box .redes img{
						margin-left:0;
					    margin-top: 0px;
						width: 45px;



					  }

					  

					 footer .autor{
						display: flex;
						justify-content: center;
						align-items: center;
                        margin-top: 0px;
						width: 100%;
					
						
					  }

				    .autor img{
					margin-left: 0;
					margin-top:0;
					/*width: 50px;
                    height: 50px;*/
					
					
				}

				.autor p{
					color:black;
					font-size: 15px;
					margin-top: 0px;
					margin-left:10px;
				}
				
				   .pie .what{
					display: flex;
					justify-content: center;
					margin-top: 20px;
				    width: 100%;
		
						
					   
					}

                  .pie .what img{
					margin-left: 0;
					width: 80px;
                    height: 80px;
					
					
				 }


				}
			     
				

				
				
				
	
		
           @media (max-width: 720px) {
            
			*{
				padding: 0%;
				margin: 0%;
			   box-sizing: border-box;   
			  
			 }

			 body{

				height: 100%;
				width: 100%;
				overflow-x: hidden;
			 }
      
			 header{

				width: 100%;
				height: 100%;
				
			 }
           
			  footer{

				width: 100%;
			  }





		   }