body{
    margin: 0;
    font-family:'Lobster Two', cursive;
    font-weight: 400;
    color: #A0522D;
    text-decoration: none;
     
      
    
}


main { background-image: url(/E0XSPl.jpg);
     background-color:#F4A460;
    background-blend-mode: ;
    

    
}



header {
    width: 100%;
    height: auto;
      background-image: url(/imagenes/full-bloom.png);
     background-color:#F4A460;
    background-blend-mode: hard-light;
    
    padding-bottom: 20px;

}

    


#btn-menu{
    display: none;
   
    
}

header label {
    display: none;
    width: 40px;
    height: 40px;
    padding: 10px;
    box-shadow: 1px solid grey;
    
    
}

header label:hover {
    cursor: pointer;
    background: rgba(0,0,0,0.3);
}


.menu ul {
    margin: 0;
    list-style: none;
    padding: 0;
    display: flex;
    z-index: 999;
    color: #A0522D;
    text-decoration: none;
    text-align: left;
    
 
    
    
}


.menu li:hover {
    background: rgba (0,0,0,0.3);
}
.menu li {
    display: inline-flex;
    justify-content: space-around;
    padding: 10px 5px;
    color: #A0522D;
    text-decoration: none;
    border-bottom: solid;
    text-align: left;
    

    
    
    
}

.menu li {
    text-align: left;
    flex-grow: 1;
    padding-bottom: 0.7em;
    color: #A0522D;
    text-decoration: none;
}

main {
    padding: 20px;
       background-image: 
     

    
}

@media (max-width:500px){
    
    header label {
        display: block;
        }
    .menu {
        position: absolute;
        background:#FAF0E6;
        margin-left: -70%;
        transition: all 0.4s;
        padding-left: 2em;
        padding-right: 2em;
        z-index: 100;
        text-decoration: none;
        text-align: center;
    
        
          }
    
    .menu ul{ 
        flex-direction: column; 
        
    }
    
   
    #btn-menu:checked ~ .menu {
        
        margin: 0;
        width: 70%;
        
            
    }
    
    .prueba { ;
    width: 100%;}
    
    
    
    .conteiner1 p{
   margin: 1em;
        font-size: 13px;
}
    h1 {
        font-size: 17px;
        font-family:Lobster Two, cursive;
    font-weight: 800;
    }
    
    h2{
        font-size: 15px;
        font-family:Lobster Two, cursive;
    font-weight: 400;
        
    }
    
     #cabañas2 {font-size: 14px;}

}


a {
    text-decoration: none;
    text-decoration-color: none;
    text-decoration-line: none;
    color: #A0522D;
}


@media (max-width: 320px)
{
    .textoinicio {
    margin-top: 8px !important;
}
    
    
  h3 { font-size: 13px
        
    }
    
    h4{font-size: 12px;}


    
   
       
    
}





@media (max-width:400px){
    
    
    .textoinicio {
        
    font-family: Lobster Two, cursive;
    font-weight: 400;
    display: flex;
    font-size: 16px;
    padding-left: 1em;
    padding-right: 1em;
    background-color: #FFF8DC; 
    filter: alpha (opacity=70);
    opacity: 0.7;
    margin-top: -80px;
    font color: #A0522D;
    
        
        
    }
    
    

}




#logo {
    max-width: 100%;
    
    
}

.contenedor {
    display: flex;
    margin-left: 20px;
    justify-content: center;
   align-items: baseline;
    z-index: 2;
     
}

#reserva {
    width: 100px;
    height: auto;
        float: right;
    margin-top: 10px;
    margin-right: 10px;
    z-index:1;
    
    
    
  
}

.reservadirecta {
    
    position: fixed;
    float: right;
    width: 100%;
    z-index: 1; 
    
    
    
}


.slider {
    width: 100%;
    margin:10px;
    max-height: 50%;
    overflow: hidden;
    

    
}

.slider ul {
    padding: 0;
    display: flex;
    width: 800%;
    
    
    animation: cambio 20s infinite;
    animation-direction:alternate;
    animation-timing-function: ease-in-out;
  
    
    
}

.slider li {
    
    list-style: none;
    width: 100%;
    background-color: #FAF0E6;
    
    
}

.slider img {
    
    width: 100%;
    height: 100%;
    background-color: #FAF0E6;
    
    
}


@keyframes cambio {
    0% {margin-left: 0;}
    10% {margin-left: 0;}
    
    10% {margin-left: -100%;}
    20% {margin-left: -100%;}
    
    30% {margin-left: -200%;}
    40% {margin-left: -200%;}
    
        40% {margin-left: -300%;}
    50% {margin-left: -300%;}
    
      50% {margin-left: -400%;}
    60% {margin-left: -400%;}
    
      60% {margin-left: -500%;}
    70% {margin-left: -500%;}
    
       80% {margin-left: -600%;}
    90% {margin-left: -600%;}
    
       90% {margin-left: -700%;}
    100% {margin-left: -700%;}
       
    
}


.conteinerprincipal { 
   
    background-color: #FAF0E6;
    padding-right: 20px
    
    
    
}


.conteiner1 {
    background-color: #FAF0E6;
     padding-left: 1em;
    padding-right: 1em;
    border-radius: 10px; 
    
}

.textoinicio {
    
   font-family: ;
    font-size: 17px;
    padding-left: 1em;
    padding-right: 1em;
    background-color: #FAF0E6; 
    margin-top: -80px;
    filter: alpha (opacity=100);
    opacity: 10;
    border-radius: 10px;
    padding-bottom: 1em;
    display:inline-block;
    
     
}

h1 {
   
    padding-top: 0.2em;
    color: #A0522D;
    text-align: center;
    font-family:Lobster Two, cursive;
    font-weight: 800;

}
    
    
#texto {
    color: #8B4513;
    font-weight: 400;
    
}



@media screen and (max-width: 700px){
#texto{
font-size:18px;
}
h1{
font-size:20px;
    font-family:Lobster Two, cursive;
    font-weight: 800;;
    
    
    
}
    
   
    
    .cabañas{
        font-size: 17px;
    }
    
    #reserva {
        width: 80px;}
    
    
}


@media screen and (max-width: 400px){
#texto
    
    {
font-size:15px;
}
h1{
font-size:17px;
}

    .textoinicio {
         margin-top: -35px;
    }
    
     h3 { font-size: 14px
        
    }
    
    h4{font-size: 12px;}


    
   
    
   
    
    
}



.slider2 {
    
    width:100%;
    margin-left: -15px;
    overflow: hidden;
    
}



.slider2 li {
    
    list-style: none;
    width: 100%;
    
    
}

.slider2 img {
    
    width: 100%;
    height: 100%;
    
    
}




#cabañas2{
    text-decoration: none;
    font-family:Lobster Two, cursive;
    color: #A0522D;
    font-weight: 900;
    font-size: 25px;
       

}

#cabañas2: hover {
       background: rgba(0,0,0,0.7)
}
    


.cabañas {
    display: flex;
    justify-content: center; 
    text-decoration: none;

}


#facebook{
    width: 100%;
    margin-bottom: 50%;
    
}

#instagram {
    
    width: 100%;
    
    
    
}



.footerimg {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin: 10px;
    padding: 0 10px;
    width: 40%;
}

.footerinfo{
    display: flex;
    flex-direction: column;
    justify-content: right;
    color: #A0522D;
    padding: 0 10px;
    margin-left:10px
}

.footerLogo{
    padding: 0 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}


.imgLogo{
    max-width: 100%;
    height: auto;
    align-self: center;
}

footer {
     background-image: url(/imagenes/full-bloom.png);
     background-color:#F4A460;
    background-blend-mode: hard-light;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around; 


}




@font-face {
  font-family: 'flexslider-icon';
  src: url('fonts/flexslider-icon.eot');
  src: url('fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'), url('fonts/flexslider-icon.woff') 
  format('woff'), url('fonts/flexslider-icon.ttf') format('truetype'), url('fonts/flexslider-icon.svg#flexslider-icon') format('svg');
  font-weight: normal;
  font-style: normal;
}



.flexslider{
	width: 100%;
	position: relative;
    z-index: 0;
}

.slides{
	overflow: hidden;
}

.slides img{
	width: 100%;
    
}

.slides,
.flex-control-nav,
.flex-direction-nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

.flex-control-nav{
	width: 100%;
	text-align: center;
	position: absolute;
	bottom: 5%;
	z-index: 999;
}

.flex-control-nav li{
	display: inline-block;
	margin: 0 6px;
}

.flex-control-nav li a{
	display: block;
	background: #777777;
	width: 12px;
	height: 12px;
	border-radius: 12px;
	text-indent: -9999px;
}

.flex-control-nav li a:hover{
	background: #2E2E2E;
}

.flex-control-nav li a.flex-active{
	background: #2E2E2E;	
}

.flex-direction-nav a{
	display: block;
	text-decoration: none;
	position: absolute;
	top: 50%;
	z-index: 999;
	width: 40px;
	height: 40px;
	overflow: hidden;
	opacity: 0;
	-webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.flex-direction-nav .flex-prev{
	left: 0;
}

.flex-direction-nav .flex-next{
	right: 0;
}

.flex-direction-nav a:before {
  font-family: "flexslider-icon";
  font-size: 40px;
  display: inline-block;
  content: '\f001';
  color: #fff;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
}
.flex-direction-nav a.flex-next:before {
  content: '\f002';
}

.flex-caption p{
	font-family: ;
	position: absolute;
	top: 70%;
    width: 100%;
	text-align: center;
	font-size: 30px;
	color: #fff;
	font-weight: bold;
    margin: auto;
    background: rgba(0,0,0,0.2);
    padding: 10px 20px;
    box-sizing: border-box;
    
   
}



.flexslider:hover .flex-direction-nav .flex-prev{
	opacity: 0.7;
	left: 10px;
}

.flexslider:hover .flex-direction-nav .flex-prev:hover{
	opacity: 1;
}

.flexslider:hover .flex-direction-nav .flex-next{
	opacity: 0.7;
	right: 10px;
}

.flexslider:hover .flex-direction-nav .flex-next:hover{
	opacity: 1;
}



.conteiner1 { 

       background-color: ;
    display: flex;
    margin: 0;
    flex-direction: column;
    padding-bottom: 1em;
    
    
}

.conteiner1 p{
   margin: 1em;
    font-family: 'lobster two';
    color: #A0522D;
    font-weight: 400;
    
    
}

.conteiner1 h2{
    
    padding-top: 0.2em;
    color: #A0522D;
    text-align: center;
    font-family: 'lobster two';
    font-weight: 900; 
    font-size: 18px;
}


form {
    width: 450px;
    margin: auto;
    background: rgba(0,0,0,0.5);
    padding: 10px 20px;
    box-sizing: border-box;
    margin-top: 20px;
    border-radius: 7px;

}

input, textarea {
    
    width: 100%;
    margin-bottom: 20px;
    padding: 7px;
    box-sizing: border-box;
    font-family: 'lobster two';
    border: none;
}

textarea {
    min-height: 100px;
    max-height: 200px;
    max-width: 100%;
    min-width: 100%
}

#boton {
    background: #31384A;
    color: white;
    padding: 20px;
       
}

#boton:hover {
    cursor: pointer;
}

@media screen and  (max-width: 480px) {
    
    form { width: 100%;}
    
    h5{
        font-size: 20px;
    }
    
} 

h5 { text-align: center;
font-size: 40px;
background: rgba(0,0,0,0.6);
margin-top: 20px;}

h2{ text-align: center;}



.ubicacion { 
    
    width: 100%;
    
    display: flex; flex-direction:row; justify-content: center;

align-content: center; align-items: center;
}

.ubicacion img {
    margin top: 1em;
    width: 60%;
    height: 100%;
    
    -webkit-transform: scale(1,1);
        -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 250ms;
    -moz- transform: scale (1,1);
    -moz-transition-timing-function: ease-out;
    -moz- transition-duration: 250ms;
    
}

.ubicacion img:hover {
    
       -webkit-transform: scale(1.12,1.12);
        -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 100ms;
    -moz- transform: scale (1.12,1.12);
    -moz-transition-timing-function: ease-out;
    -moz- transition-duration: 100ms;
    
}

#separador { max-width: 100%;

}