*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    width: 100%;
    height: auto;
    margin: 0 auto;
    max-width: 1920px; 
    min-width: 320px;} 
html{
    scroll-behavior: smooth;
}
@font-face{
	font-family:Tangie-Black;
	src: url(../fonts/Tangie-Black.ttf);}
/*----------------------------botonera*/
nav{
    width: 100%;
    height: 70px;
    max-width: 1920px;
    float: left;
    background: rgba(0, 0, 0, 0.728);
    z-index: 100;
    position: fixed;
	line-height: 70px;}
nav label, nav input{
    display: none;}
.logo-nav{
    float: left;
    width: auto;
    height: 60px;
    margin: 5px;}
#menu{
    width: 50%;
    height: auto;
    position: relative;
    transition: .3s;
    float: right;}
#menu ul li{
    padding: 0% 5%;
    float: right;
    text-align: center;
    list-style: none;
    font-family: Montserrat;
    font-weight: 600;
    text-transform: uppercase;}
#menu ul a{
    color: white;}
#menu ul li:hover{
    color: white;
    background: #a3835c;}
nav label{        
    width: 30px;
    height: 50px;
    margin-right: 20px;
    margin-top: 5px;}
.linea1{
    width: 30px;
    height: 3px;
    margin-top: 5px;
    float: left;
    transition: .3s;
    background: white;
    opacity: .8;}
.linea2{
    width: 30px;
    height: 3px;
    margin-top: 5px;
    float: left;
    transition: .3s;
    background: white;
    opacity: .8;}
.btnmovil{
    display: none;}
/*----------------------------footer*/
footer{
    width: 100%;
    height: auto;
    float: left;
    background: linear-gradient(0deg, #a3835c ,#e1c59e);
    text-align: center;}
footer a{
    text-decoration: none;}
.logo-footer{
    width: 15%;
    margin: 2% 40% 0%;}
.iconos-footer{
    width: 25px;
    margin: 2% 2% 1%;} 
.txt-footer{
    font-family: Montserrat;
    font-size: 16px;
    color: white;
    margin: 1% 0%;}
.txt-footer2{
    font-family: Montserrat;
    font-size: 12px;
    color: white;}
/*--------------------------------------------------header*/
header{
    width:100%;
    height: auto;
    float: left;}
video{
    width:100%;
    max-width: 1920px;
    height: auto;
    position: fixed;
    z-index: -1000;
    float: left;}
.logo-header{
    width:50%;
    margin: 15% 25%;
    float: left;}
/*--------------------------------------------------conte-frases*/
#conte-frases{
    background: white;
    width:100%;
    height: auto;
    padding: 15% 0%;
	font-family:Tangie-Black;
    text-align: center;
    font-size: 60px;
    float: left;}
/*--------------------------------------------location*/
#location{
    width:100%;
    height: 300px;
    float: left;}
/*--------------------------------------------contact*/
#contact{
    background: white;
    width:100%;
    height: auto;
    float: left;
    padding: 5% 10%;}
.conte-contact{
    width:50%;
    float: left;
    text-decoration: none;
    color: black;
    font-family: Montserrat;
    text-align: center;}
.ico-contact{
    width:70px;
    margin: 5px;}
.txt-contact{
    width:100%;
    padding: 20px 2%;
    font-size: 20px;
    text-align: center;}
/*--------------------------------------------------service*/
#salon-prices{
    background: white;
    width:100%;
    height: auto;
    float: left;}
#img-service{
    width:100%;
    float: left;
    padding: 18% 0%;
    background-image: url(../img/skin.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: top right;}
#titu-service{
    width:100%;
    float: left;
    padding: 8% 5% 2%;
    background: linear-gradient(180deg, #e1c59e,white);
    text-align: center;
    font-size: 80px;
    color: black;
	font-family:Tangie-Black;}
#titu-service2{
    width:100%;
    float: left;
    padding: 8% 5% 2%;
    text-align: center;
    font-size: 80px;
    color: black;
	font-family:Tangie-Black;}
.dere{
    width:70%;
    float: left;
    margin: 1% 20% 0% 10%;
    background-color: #e1c59eb5;
    border-radius: 20px;
    text-align: left;
    padding: 2% 5%;}
.izqu{
    width:70%;
    float: left;
    margin: 1% 10% 0% 20%;
    background-color: #e1c59eb5;
    border-radius: 20px;
    text-align: right;
    padding: 2% 5%;}
.conte-service{
    width: 100%;
    float: left;
    background: white;
    padding-bottom: 5%;}

/*--------------------------------------------------salon prices*/
.titu-ser{
    width: 100%;
    font-family: Montserrat;
    font-weight: 600;
    font-size: 20px;
    text-transform: uppercase;
    background: black;
    color: #e1c59e;}
.conte-ser{
    width:100%;
    float: left;
    font-family: Roboto;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    margin-top: 10px;}
#service{
    width: 100%;
    text-align: center;
    float: left;
    font-size: 60px;
    padding: 15% 5%;
    background: white;}
#service .btn-prices{
    width: 15%;
	font-family:Tangie-Black;
    font-weight: 300;
    float: left;
    text-align: center;
    padding: 1%;
    letter-spacing: 2px;
    text-decoration: none;
    color:black;
    cursor: pointer;
    transition: .3s;}
.punto{
    float: left;
    line-height: 110px;}
#btn-prices a:hover{
    border-top: 4px solid black;
    opacity: 1;}
#btn-prices #btn-priceskin{
    background: black;
    color: white;
    opacity: 1;}
table{
    width:100%;
    padding: 0% 5%;
    float: left;}
table tr td{
    width: 28%;
    margin: 0% 2.5%;
    float: left;
    font-family: Roboto;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    background: rgba(5, 6, 0, 0.783);
    border-radius: 20px;
    padding: 2%;
    color:white;}
.tdmovil{display: none;} 

/*--------------------------------------------------fotos*/
#fotos{
    background: white;
    width:100%;
    max-width: 1920px;
    height: auto;
    float: left;
    padding-top: 5%;}

#fotos1, #fotos2{
    width:100%;
    max-width: 1920px;
    float: left;}
#fotos2{
    position: absolute;}
.img-fot{
    width:33.33%;
    float: left;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    opacity: 0;}
.foto1{
    animation-name: ani1;
    animation-delay: 1s;}
.foto2{
    animation-name: ani1;
    animation-delay: 2s;}
.foto3{
    animation-name: ani1;
    animation-delay: 3s;}
.foto4{
    animation-name: ani2;
    animation-delay: 1s;}
.foto5{
    animation-name: ani2;
    animation-delay: 2s;}
.foto6{
    animation-name: ani2;
    animation-delay: 3s;}

@keyframes ani1 {
    0%{opacity: 0;}
    10%{opacity: 1;}
    40%{opacity: 1;}
    50%{opacity: 0;}
    100%{opacity: 0;}
}
@keyframes ani2 {
    0%{opacity: 0;}
    50%{opacity: 0;}
    60%{opacity: 1;}
    80%{opacity: 1;}
    100%{opacity: 0;}
}
#conte-imgheader{
    display: none; 
}
@media (max-width:1200px){ 
    #service{
        padding: 15% 0%;}
}
@media (max-width:1080px){
    #menu{
        width: 40%;
        height: auto;
        margin-top: 70px;
        position:relative;
        text-decoration: none;
        transition: .5s;
        margin-right: -100%;
        background: black;}
    #menu ul li{
        width: 100%;
        height: 60px;
        line-height: 60px;
        letter-spacing: 2px;
        text-decoration: none;
        font-weight: 400;
        float: left;
        font-size: 18px;
        border-bottom: 2px solid #9a9a9a; }
    nav label{
        float: right;
        height: 100%;
        display: block;
        width: 50px;
        padding: 19px 0%;}
    #btn-menu:checked ~ #menu{
        margin-top: 70px;
        margin-right: -70px;}
    #btn-menu:checked ~ label .apagar{
        display: none;}
    #btn-menu:checked ~ label .linea1{
        transform: rotate(45deg);
        margin-top: 15px;
        float: left;}
    #btn-menu:checked ~ label .linea2{
        transform: rotate(-45deg);
        float: left;
        margin-top: -3px;}
    .pc-precio{
        display: none; }

    .btnmovil{
        display: block;}
    .btnpaga{ 
        display: none;}
    .movil-precio{
        display: block;
        float: left;
        width: 70%;
        margin: 1% 15% 5%;}
    #img-service{
        background-image: url(../img/skin2.jpg);}

    .dere, .izqu{
        width:90%;
        margin: 1% 5% 0%;
        padding: 2%;
        text-align: left;}
    .titu-ser{
        font-size: 20px;}
    .conte-ser{
        font-size: 14px;
        line-height: 20px;}
    table tr td{
        display: none;} 
    .tdmovil{
        display: block;
        width: 60%;
        margin: 0% 20%;
        float: left;
        font-family: Roboto;
        font-size: 16px;
        line-height: 24px;
        text-align: center;
        background: rgba(5, 6, 0, 0.783);
        border-radius: 20px;
        padding: 2%;
        color:white;}
    #btn-prices{
        font-size: 16px;}
    .punto{
        text-align: center;
        width: 100%;}
    #service .btn-prices{
        width: 100%;
        padding: 0%;}
    .tdmovil strong{
        width: 100%;
        float: left;
        text-align: center;
        font-size: 17px;
        background: black;
        margin-top: 20px;}
    .tdmovil{
        width: 80%;
        margin: 0% 10%;
        float: left;
        font-family: Roboto;
        font-size: 15px;
        line-height: 30px;
        text-align: center;
        background: rgba(5, 6, 0, 0.783);
        border-radius: 20px;
        padding: 0% 5% 5%;
        color:white;}
}

@media (max-width:800px){ 
    #titu-service, #titu-service2{
        font-size: 40px;}
}
@media (max-width:600px){ 
    #btn-prices{
        width: 90%;
        margin: 0% 5% 2%;}
    

    .movil-precio{
        width: 80%;
        margin: 1% 10% 5%;}
    .conte-contact{
        width:100%;}
    video{
        display: none;}
    header{ 
        width: 100%;}
    .logo-header{
        width:60%;
        margin: 50% 20%;}
    .logo-nav{
        height:40px;
        margin: 15px;}
    #menu{
        width:50%;}      

    #conte-imgheader{
        display: block;
        width:100%;
        float: left;}
    .img-header{
        width:100%;
        float: left;
        position: absolute;
        animation-iteration-count: infinite;
        z-index: -1000;
    }

    @keyframes anih1 {
        0%{opacity: 0;}
        4%{opacity: 1;}
        25%{opacity: 1;}
        100%{opacity: 0;}
    }
    @keyframes anih2 {
        0%{opacity: 0;}
        25%{opacity: 0;}
        30%{opacity: 1;}
        50%{opacity: 1;}
        100%{opacity: 0;}
    }
    @keyframes anih3 {
        0%{opacity: 0;}
        50%{opacity: 0;}
        55%{opacity: 1;}
        70%{opacity: 1;}
        100%{opacity: 0;}
    }
    @keyframes anih4 {
        0%{opacity: 0;}
        70%{opacity: 0;}
        75%{opacity: 1;}
        99%{opacity: 1;}
        100%{opacity: 0;}
    }

    .fotoheader1{
        animation-name: anih1;
        animation-duration: 10s;
        animation-delay: 0;
    }
    .fotoheader2{
        animation-name: anih2;
        animation-duration: 10s;
        animation-delay: 0;
    }
    .fotoheader3{
        animation-name: anih3;
        animation-duration: 10s;
        animation-delay: 0;
    }
    .fotoheader4{
        animation-name: anih4;
        animation-duration: 10s;
        animation-delay: 0;
    }
}
@media (max-width:500px){ 
    table{
        padding: 0% 2%;}
    
    .tdmovil{
        width: 90%;
        margin: 0% 5%;
        font-size: 13px;}
}

#botonbooking{
    width: 100%;
    bottom: 0;
    height: 50px;
    background: rgba(0, 0, 0, 0.765);
    position: fixed;
    text-align: center;
    font-size: 20px;
    color:white;
    text-decoration: none;
    font-family: Roboto;
    font-weight: lighter;
    letter-spacing: 2px;
    line-height: 50px;
    transition: .3s;
}
#botonbooking:hover{
    background: rgba(255, 255, 255, 0.746);
    color:black;
    font-weight: 400;
}