* {
    margin: 0px;
    padding: 0px;
}
body {
    margin: auto;
    margin-top: 10px;
    background-image: url(imagenes/madera.png);
    background-attachment:fixed;
    max-width: 1024px;
    font-family: Open Sans;
    }
/*Centrar video*/
/* video {
    width: 80%;
    margin: auto;
    display: block;
} */
/*para que se quede en el centro*/
.presentacion{
    position: relative;
    }
.fadeInDown {
    position: absolute;
    top: 20%;
    left: 20%;
    right: 20%;
}

.fadeInUp {
    position: absolute;
    top: 50%;
    left: 20%;
    right: 20%;
    }
.presentacion img{
    width: 100%;
    }
 
/*texto centrado*/
.fadeInDown {
    color: white;
    text-align: center;
    font-family: 'Orbitron', sans-serif;
    font-size: 2em;
    text-shadow: -2px -2px 1px #000;
    }

.fadeInUp {
    color: white;
    text-align: center;
    font-family: 'Orbitron', sans-serif;
    font-size: 2em;
    text-shadow: -2px -2px 1px #000;
    }        
       
p {
    color: white;
    }

/*informacion de nosotros*/
#negocio {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    padding: 20px;
    }
#negocio img {
    margin: auto;
    }
#negocio p {
    padding: 10px;
    color: white;
    text-align: center;
    }
#negocio h2 {
    color: white;
    margin: auto;
    text-align: center;
    }
#negocio h1{
    color: white;
    text-align: center;
    margin: auto;
    }
/*servicios*/
#servicios {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    padding: 20px;
    }
#servicios img {
    margin: auto;
    max-width: 100%;
    }
#servicios p {
    padding: 10px;
    color: white;
    text-align: center;
    }
#servicios h2 {
    color: white;
    margin: auto;
    text-align: center;
    }
#servicios h1{
    color: white;
    text-align: center;
    margin: auto;
    }
#maquinas {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
#maquinas img {
    padding: 20px;
    margin: auto;
}
/*contactos*/
#contactar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    padding: 20px;
    }

#contactar p {
    padding: 10px;
    color: white;
    text-align: center;
    }
#contactar h2 {
    color: white;
    margin: auto;
    }
#contactar h1{
    color: white;
    text-align: center;
    margin: auto;
    }




/*fadeInUp InDown eslogan publicitario*/
    
-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    }
}

    .fadeInUp {
        -webkit-animation-name: fadeInUp;
        animation-name: fadeInUp;
        -webkit-animation-duration: 5s;
        animation-duration: 5s;
        }

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    }
}

    .fadeInDown {
        -webkit-animation-name: fadeInDown;
        animation-name: fadeInDown;
        -webkit-animation-duration: 5s;
        animation-duration: 5s;
        }

@media (min-width:769px){
    body {
        padding-top: 120px;
    }
    
    header {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        margin: auto;
        max-width: 1024px;
        -webkit-box-shadow: 0px 5px 10px 0px rgba(000,000,000,1);
        box-shadow: 0px 5px 10px 0px rgba(000,000,000,1);
        background-image: url(imagenes/madera2.png);
         /* Posicionamos la cabecera al lado izquierdo */
	    top: 0; /* Posicionamos la cabecera pegada arriba */
	    position: fixed; /* Hacemos que la cabecera tenga una posición fija */
        z-index: 999;
        }
    

    #cabecera {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-flow: wrap;
        flex-flow: wrap;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        margin: auto;
        padding-left: 30px;
        padding-right: 30px;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        width: 100%;
        }


    #logo {
        width: 100px;
        padding-top: 10px;
        -webkit-filter:drop-shadow(1px 1px 5px #000);
        filter:drop-shadow(1px 1px 5px #000);
        }

    h1 {
        color: white;
        font-size: 3em;
        text-shadow: 5px 5px 5px #000;
        }

    .menu {
        margin: auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-flow: wrap;
        flex-flow: wrap;
        font-size: 1.2em;
        }
    .menu a {
        color: #0033FF;
        font-family: sans-serif;
        padding: 10px;
        text-decoration: none;
        font-weight: bold;
        }
    .menu a:hover{
        color: #0099FF;
        }

}

/*Fin min @mediaquery*/



 /*menu fotos salones*/

.img_salon {
    -webkit-transition: -webkit-transform .2s;
    transition: -webkit-transform .2s;
    transition: transform .2s;
    transition: transform .2s, -webkit-transform .2s; /* Animation */
    width: 160px;
    height: 160px;
    margin: 0 auto;
    }

.img_salon:hover {
    -webkit-transform: scale(1.2);
    transform: scale(1.2); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
    }
    
.img_salon:active {
    -webkit-filter: opacity(90%);
    filter: opacity(90%);
    -webkit-box-shadow: 0px 0px 100px 1px rgba(0, 51, 255, 0.8);
    box-shadow: 0px 0px 100px 1px rgba(0, 51, 255, 0.8);
    }

#salones {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-top: 20px;
    }
#leyen_salon p{
    color: white;
    padding: 10px;
    text-align: center;
    padding-left: 50px;
    padding-right: 50px;        
    }
#leyen_salon h2{
    padding-top: 20px;
    color: white;
    font-size: 2em;
    font-family: sans-serif;
    padding: 20px;
    text-align: center;
    }
        
.desc_salon {
    padding: 15px;
    text-align: center
    }

.img_salon {
    width: 100%;
    margin: auto;        
    border-radius: 50%;
    border:1px white;
    -webkit-box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.8);
    box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.8);  
    }

h3 {
    color: white;
    text-align: center;
    margin-top: 10px;
    }

p {
    color: white;
    margin-top: 10px;
    }
 

 /*informacion salones*/
.info_salones {
    color: white;
    list-style-type: none;
    font-size: 2em;
    padding: 10px;
    text-align: center;
    margin: auto;
    }
.info_salones a{
    text-decoration: none;
    color: white;
    }
.info_salones a:hover{
    color: gray;
    }
.salones {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    }

.mapa {
    margin: auto;
    padding: 10px;
    }

footer {
    color: white;
    font-family: sans-serif;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background: rgba(0,0,0,0.4);
    }

footer ul {
    margin: auto;
    padding-top: 10px;
    list-style: none;
    }

footer li {
    text-align: center;
    padding: 10px;
    }
footer li a {
    color: white;
    text-decoration: none;
    }
footer li a:hover{
    color: grey;
    }

/*hamburgesa*/
@media (max-width:768px){
    *{
        padding: 0;
        margin: 0;
        }
    .contenedor{
        position: absolute;
        width: 200px;
        height: 200px;
        top:-70px;
        left: -70px; /*top left posicion hamburguesa*/
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient:horizontal;
        -webkit-box-direction:normal;
        -ms-flex-direction:row;
        flex-direction:row;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-transform: scale(.2);
        transform: scale(.2);
        }
    
    .MenuAmburguesa:after,
    .MenuAmburguesa:before,
    .MenuAmburguesa{
        -webkit-transition: 1s;
        transition: 1s;
        position: absolute;
        width: 100%; 
        content: '';
        background-color: white;
        }
    
    .MenuAmburguesa{
        height: 15%;
        }
    
    .MenuAmburguesa:before{
        height: 100%;
        top: 50px;
        }
    .MenuAmburguesa:after{
        height: 100%;
        top: -50px;
        }
    
    
    .cruz{
        -webkit-transition: 1s;
        transition: 1s;
        -webkit-transform: rotateZ(45deg);
        transform: rotateZ(45deg);
        } 
    
    .cruz:before{
        -webkit-transition: 1s;
        transition: 1s;
        top:0px;
        -webkit-transform: rotateZ(90deg);
        transform: rotateZ(90deg);
        }
    .cruz:after{
        -webkit-transition: 1s;
        transition: 1s;
        top:0px;
        -webkit-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
        }
    
    .menu{
        -webkit-transition: 1s;
        transition: 1s;
        width: 0vw;
        height: 0vh;
        background: rgba(0,0,0,0.4);
        font-family:fantasy;
        overflow: hidden;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        }
    .menu>div{
        font-size: 3.5vh;
        font-family: Open Sans;
        }
     .menu>div:hover{
        font-size: 6vh;
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
        }
    .menu>div>a{
        color: #0033FF;
        text-decoration:none;
        }
    
    .menu>div>a:hover{
        -webkit-transition: 1s;
        transition: 1s;
        color:#0000AF;
        font-size: 5vh;
        }
    .fondo{
        -webkit-transition: 1s;
        transition: 1s;
        width: 100vw;
        height:25vh;
        }

/*Fin hamburguesa*/
    body{
        padding-top: 150px;
    }  
    header{
        width: 100%;
        -webkit-box-shadow: 0px 5px 10px 0px rgba(000,000,000,1);
        box-shadow: 0px 5px 10px 0px rgba(000,000,000,1);
        background-image: url(imagenes/madera2.png);
         /* Posicionamos la cabecera al lado izquierdo */
	     /* Posicionamos la cabecera pegada arriba */
	    /* Hacemos que la cabecera tenga una posición fija */
        position: fixed;
        top: 0px;
        z-index: 999;
        }
        #cabecera {
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        text-align: center;
            
        }
    
    #logo {
        width: 100px;
        margin: auto;
        padding-top: 10px;
        -webkit-filter:drop-shadow(1px 1px 5px #000);
        filter:drop-shadow(1px 1px 5px #000);
        }

    #cabecera h1 {
        color: white;
        font-size: 2.5em;
        text-shadow: 5px 5px 5px rgba(0, 0, 0);
        }
    
    .presentacion h2 { 
        font-size:1.5em;
        }
    footer {
        color: white;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        }

    footer ul {
        margin: auto;
        padding-top: 20px;
        list-style-type: none;
        }

    footer li {
        text-align: center;
        padding: 5px;
        }

/*menu salones */
    #salones {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        max-width: 300px;
        margin: auto;
        padding-top: 20px;
        }
/*maquinas*/
    #maquinas {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        }
/*para que quepa en una sola linea*/
    #servicios h2{
        font-size: 1.4em;
        }
}
/*Fin @mediaquery max*/

/*reducir texto pantalla pequeña*/
@media (max-width:375px){
   
    #cabecera h1 {
        font-size: 2em;
        }
    .presentacion h2 {
        font-size: 0.9em;
        }
}




/*pagina salones*/
.titulo_salon {
    text-align: center;
    padding: 10px;
    color: white;
    }
.contenedor_salon p {
    padding: 10px;
    }

/*formulario*/
#formulario {width: 400px;
    background: rgba(0,0,0,0.4);
    padding: 10px 20px 0px 20px;
    margin: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 7px;
    font-family: sans-serif;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    }

#formulario h2 {
    text-align: center;
    margin: 0;
    margin-bottom: 20px;
    color: white;
    }

input, textarea {
    width: 100%;
    margin-bottom: 20px;
    padding: 7px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: none;
    border-radius: 7px;
    }

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

#boton {
    background: #31384A;
    color: #fff;
    padding: 20px;
    border-radius: 7px;
    }
#boton:hover{
    cursor: pointer;
    }
#aceptar {
    width: auto;
    margin: auto;
    }
#politica {
    font-size: 0.7em;
    display: inline;
    margin-left: 5px;
    line-height: 0;
    color: white;
    }

.text-recaptcha {
    text-align: center;
}
.g-recaptcha {
    -webkit-transform: scale(0.85);
    transform: scale(0.85);
    -webkit-transform-origin: 1 0;
    transform-origin: 1 0;
    display: inline-block;
}

#contacto_web {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 10px;
    }
#contacto_web ul{
    font-size: 1.4em;   
    color: white;
    padding: 70px 10px;
    list-style: none;
    margin: auto;
    text-align: center;
    }
#contacto_web a{
    color: white;
    text-decoration: none;
    }
#contacto_web a:hover{
    color: gray;
    }

.legalidad {
    padding: 10px;
    color: white;
    }
.legalidad h4{
    text-align: center;
    font-size: 1.4em;
}


/*MODAL  ~ */
.modal{
    z-index: 49;
    width: 100%;
    height: 100vh;
    background: rgb(0,0,0,0.8);

    position: absolute;
    top: 0;
    left: 0;

    display: flex;

    animation: modal 2s 3s forwards;
    visibility: hidden;
    opacity: 0;
}

.contenido{
    margin: auto;
    width: 60%;
    height: 70%;
    background: white;
    border-radius: 10px;
}

#cerrar{
    display: none;
}
#cerrar + label{
    position: absolute;
    color: #fff;
    font-size: 25px;
    z-index: 50;
    background: darkred;
    height: 40px;
    width: 40px;
    line-height: 40px;
    border-radius: 50%;
    right: 400px;
    cursor:pointer;

    animation: modal 2s 3s forwards;
    visibility: hidden;
    opacity: 0;
}

#cerrar:checked + label, #cerrar:checked ~ .modal{
    display: none;
}

@keyframes modal{
    100%{
    visibility: visible;
    opacity: 1;
    }
}