/* Parametros */
    @font-face {
        font-family: 'Poppins Regular';
        src: url(../fonts/Poppins-Regular.ttf);
    }

    @font-face {
        font-family: 'Poppins Light';
        src: url(../fonts/Poppins-Light.ttf);
    }

    @font-face {
        font-family: 'Poppins Extralight';
        src: url(../fonts/Poppins-ExtraLight.ttf);
    }

    @font-face {
        font-family: 'Poppins ExtraLight Italic';
        src: url(../fonts/Poppins-ExtraLightItalic.ttf);
    }
    

/* Normalizadores */
    *{
        padding: 0px;
        margin: 0px;
        box-sizing: border-box;
        /* outline: 2px dashed lime; */
    }

    body{
        background-color: #000000;
    }

    ul{
        list-style: none;
    }

    a{
        text-decoration: none;
        color: #ffffff;
        font-family: 'Poppins Regular';
        /*flex*/
        display: flex;
        justify-content: center;
        align-items: center;
    }

    h1{
        font-family: 'Poppins Light';
        color: #ffffff;
        font-size: 17vw;
    }

    h2{
        font-family: 'Poppins Regular';
        color: #ffffff;
        font-size: 30px;
        line-height: 35px;
    }

    p{
        font-family: 'Poppins Extralight';
        font-size: 14px;
        color: #ffffff;   
    }

    button{
        border: none;
    }

    .btn-white{
        width: 100px;
        height: 30px;
        background-color: #ffffff;
        color: #000000;
        border-radius: 15px;
        font-family: 'Poppins Light';
        font-size: 12px;  
        transition: 0.4s;      
    }

    .btn-white:hover{
        background-color: transparent;
        color: #ffffff;
        border: 1px solid #ffffff;
    }


/* Reglas recursivas */
/* Bar MenuNav */
    .bar1{
        transform: rotate(45deg) !important;
        -webkit-transform: rotate(45deg) !important;
        -moz-transform: rotate(45deg) !important;
        -ms-transform: rotate(45deg) !important;
        -o-transform: rotate(45deg) !important;
    }

    .bar2{
        transform: rotate(-45deg) !important;
        -webkit-transform: rotate(-45deg) !important;
        -moz-transform: rotate(-45deg) !important;
        -ms-transform: rotate(-45deg) !important;
        -o-transform: rotate(-45deg) !important;
        position: relative;
        top: -8px;
    }

/* Logo */
    .img-logo{
        transform-origin: bottom left;
        -webkit-transform-origin: bottom left;
        -moz-transform-origin: bottom left;
        -ms-transform-origin: bottom left;
        -o-transform-origin: bottom left;
    }

    .img-logo-vertical{
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
    }

/* Circulo giratorio instagram */
    .circle-rolling img{
        width: 120px;
        animation: rolling 8s linear infinite;
        -webkit-animation: rolling 8s linear infinite;
        -moz-animation: rolling 8s linear infinite;
        -ms-animation: rolling 8s linear infinite;
        -o-animation: rolling 8s linear infinite;
    }

    @keyframes rolling {
        0%{
            transform: rotate(-0deg);
            -webkit-transform: rotate(-0deg);
            -moz-transform: rotate(-0deg);
            -ms-transform: rotate(-0deg);
            -o-transform: rotate(-0deg);
        }
        100%{
            transform: rotate(-360deg);
            -webkit-transform: rotate(-360deg);
            -moz-transform: rotate(-360deg);
            -ms-transform: rotate(-360deg);
            -o-transform: rotate(-360deg);
        }
    }


/* Reglas generales */
    /* Marco */
    .marco{
        width: 100%;
        max-width: 1920px;
        margin: auto;
        background-color: #000000;
    }


    /* Header */
    header{
        width: 100%;
        height: 60px;
        background-color: transparent;
        padding: 20px 4%;
        position: fixed;
        top: 0px;
        right: 0px;
        left: 0px;
        z-index: 2000;
        margin: auto;
        max-width: 1920px;
        /*flex*/
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }


    /* Btn Menu Mobile */
    .btn-menu-mobile{
        width: 26px;
        height: 26px;
        background-color: transparent;
        border: none;
        cursor: pointer;
        /*flex*/
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .btn-menu-mobile div{
        width: 90%;
        height: 3px;
        background-color: white;
        border-radius: 2px;
        margin: 2.5px 0px;
        transition: transform .2s linear;
    }

    /* MenuNav Desplegable */
    .menu-nav{
        width: 100%;
        height: 100vh;
        background-color: #000000;
        padding-top: 50%;
        display: none;
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 1999;
    }

    .menu-nav a{
        padding: 10px 0px;
        font-size: 30px;
    }
  
    /* Footer */
    footer{
        width: 100%;
        color: #ffffff;
        padding: 25px;
        /*flex*/
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .circle-rolling{
        margin-bottom: 40px;
    }

    footer a{
        display: inline-block; 
        font-family: 'Poppins Extralight';
        font-size: 10px;
    }

    .rrss{
        margin-bottom: 2px;
    }

    .copyright p{
        font-size: 8px;
        margin-top: 3px;
    }


/* Reglas Especificas */
    /* Section 1 */
    .s1{
        width: 100%;
        padding: 90vh 4% 20px;
        position: relative;
    }

    /* Logo */
    .img-logo{
        width: 89%;
        position: fixed;
        top: 190px;
        left: 4px;
        z-index: 20;
        transition: 2s;
    }

    /* Texto introductorio */
    .text-intro{
        width: 100%;
        padding: 60vh 12% 80px 4%;
        /*flex*/
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .text-intro p{
        width: 65%;
        text-align: end;
    }


    /* Section 2 */
    .s2{
        width: 100%;
        padding: 20px 4%;
        overflow-x: hidden;
        /*flex*/
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

    /* Miniexpo de fotos alternativas */
    .s2 img{
        margin: 0px 10px 30px 0px;
    }

    .img1{
        height: 186px;
        padding-right: 80px;
        position: relative; 
        z-index: 2;      
    }

    .img2{
        height: 186px;
        padding-left: 120px;
        position: relative; 
        z-index: 3;
    }

    .img3{
        height: 320px;
        padding-left: 100px;
        position: relative; 
        z-index: 4;  
    }

    .img4{
        height: 320px;
        position: relative;
        z-index: 5;
        display: none;
    }

    .img5{
        height: 240px;
        position: relative;
        z-index: 6;
    }

    .img6{
        height: 186px;
        padding-left: 124px;
        position: relative;
        z-index: 7;
    }

    .img7{
        height: 186px;
        padding-right: 104px;
        position: relative;
        z-index: 8;
    }

    .img8{
        height: 186px;
        position: relative;
        z-index: 9;
    }    

    .img9{
        height: 266px;
        position: relative;
        z-index: 11;
        display: none;
    }

    .img9{
        height: 266px;
        position: relative;
        z-index: 11;
        display: none;
    }
    
    .img10{
        height: 240px;
        position: relative;
        z-index: 10;
    }  

    /* Section 3 */
    .s3{
        width: 100%;
        padding: 80px 12% 80px 4%;
        background-color: #000000;
        /*flex*/
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .s3 article{
        width: 70%;
    }

    .s3 p{
        margin: 8px 0px 20px;
    }


    /* Section 4 */
    .s4{
        width: 100%;
        padding: 80px 12% 80px 4%;
        background-color: #000000;
        /*flex*/
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .s4 article{
        width: 70%;
    }

    .s4 p{
        margin: 8px 0px 10px;
    }





    /* ----------Galería----------- */
    /* Home Gallery */
    .sectiongallery{
        width: 100%;
        height: 100vh;
        padding: 220px 4% 20px;
    }

    .sectiongallery h1{
        width: 100%;
    }

    /* Exposicion de fotos */
    .exposicion-de-fotos{
        width: 100%;
        padding: 20px 4%;
        /*flex*/
        display: flex;  
        flex-wrap: wrap;     
    }

    .exposicion-de-fotos figure{
        width: 50%;
    }

    .exposicion-de-fotos img{
        width: 100%;
        height: 100%;
        padding: 10px;
        object-position: center; 
        object-fit: cover;  
        cursor: pointer; 
    }


    /* Overlay */
    .overlay{
        width: 100%;
        height: 100vh;
        background-color: rgba(0, 0, 0, .9);
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 3000;
        display: none;
    }

    /* Img Grande */
    .modal-img{
        width: 90%;
        height: 200px;
        position: fixed;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        margin: auto;
        z-index: 3001;
        display: none;
    }

    .modal-img img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .cierre-img{
        position: absolute;
        top: -30px;
        right: 0px;
        background-color: transparent;
        cursor: pointer;
    }

    .cierre-img i{
        color: #ffffff;
        font-size: 20px;
    }


    

    /* -----------Contacto----------- */
    .sectionhome{
        width: 100%;
        height: 100vh;
        padding: 220px 4% 20px;
    }

    .sectionhome h1{
        width: 100%;
    }

    .datos-contacto{
        width: 100%;
        margin-top: 35%;
        /*flex*/
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
    }

    .datos-contacto ul{
        width: 70%;
    }

    .datos-contacto li{
        margin-bottom: 10px;
        /*flex*/
        display: flex;
        align-items: center;
    }

    .datos-contacto i{
        color: #ffffff;
        margin-right: 20px;
    }

    .datos-contacto a {
        font-family: 'Poppins Extralight';
        justify-content: flex-start;   
    }

























    
/* Responsive */
/* Landscapes */
/* Telefono Landscape */
    @media (orientation:landscape) and (min-width:320px) {
        /* Reglas generales */
            /* MenuNav Desplegable */
            .menu-nav{
                padding-top: 12%;
            }

        /* Reglas específicas */
            /* Home */
            /* Section 1 */
            .img-logo{
                width: 60%;
                z-index: 1;
            }

            .img-logo-vertical{
                transform: none;
            }

            .text-intro p{
                width: 30%;
            }

            .s3 article, 
            .s4 article{
                width: 30%;
            }
    }

/* Landscape Telefono Intervalo para H1  */
    @media (orientation:landscape) and (min-width:320px) and (max-width:768px){
        /* Reglas específicas */
            /* Galería y Contacto */
            .sectiongallery,
            .sectionhome{
                padding: 120px 4% 20px;
            }
    }

/* Tablet Landscape */
    @media (orientation:landscape) and (min-width:950px) {
        /* Reglas generales */
            /* MenuNav Desplegable */
            .menu-nav{
                padding-top: 28%;
            }
    }

/* Verticals */
/* Telefono + Grande (400px) */
    @media (min-width: 400px) {
        /* Reglas especificas */
            /* Galeria */
            .modal-img{
                height: 250px;
            }
    }

/* Telefono + Grande (490px) */
    @media (min-width: 490px) {
        /* Reglas especificas */
            /* Galeria */
            .modal-img{
                height: 260px;
            }
    }


/* Tablet Pequeña (585px) */
    @media (min-width: 585px) {
        /* Reglas especificas */
            /* Home */
            /* Section 2 */
            .s2 img{
                margin: 0px 10px 90px 0px;
            }

            .img4{
                padding-right: 190px;
                display: flex;
            }

            .img9{
                display: flex;
                padding-left: 80px;
            }

            /* Galeria */
            .modal-img{
                width: 70%;
                height: 300px;
            }
    }

/* Otra Tablet (680px) */
    @media (min-width: 680px) {
        /* Reglas especificas */
            /* Home */
            /* Section 2 */
            .img4{
                padding-right: 230px;
            }

            .img7{
                padding: 0px 104px 0px 80px;
            }
    }
        
    
/* Tablet Media (768px) */
    @media (min-width: 768px) {
        /* Reglas Específicas */
            /* Home */
            /* Section 2 */
            .img4{
                padding-right: 126px;
            }
            
            /* Galería */
            .modal-img{
                height: 370px;
            }

            /* Contacto */
            .datos-contacto{
                margin-top: 8%;
            }
            
            .datos-contacto ul{
                width: 50%;
            }
    }

/* Tablet + grande (828) */
    @media (min-width: 828px) {
        /* Reglas especificas */
            /* Home */
            /* Section 2 */
            .img1{
                padding: 0px 160px 0px 172px;
            }

            .img6{
                padding-left: 230px;
            }

            .img9{
                padding: 0px 100px 0px 250px;
            }
    }

/* Tablet + + grande (1024) */
    @media (min-width: 1024px) {
        /* Reglas especificas */
            /* Home */
            /* Section 2 */
            .img10{
                padding-left: 200px;
            }

            /* Galeria */
            .modal-img{
            height: 460px;
            }
}


/* Pantalla HD 1280px */
    @media (min-width: 1280px) {
        /* Normalizadores */
        h1{
            font-size: 14vw;
        }

        /* Reglas Generales */
        header{
            height: 100px;
        }
        
        .btn-menu-mobile{
            width: 30px;
            height: 30px;
        }

        .menu-nav{
            padding-top: 20%;
        }
        
        /* Reglas Específicas */
            /* Home */
            /* section 1 */
            .img-logo{
                width: 60%;
                left: 30px;  
                z-index: 1;
            }
            .img-logo-vertical{
                transform: none;
            }

            /* section 1 - texto */
            .text-intro{
                padding: 10vh 8% 300px 4%;;
            }

            .text-intro p{
                width: 28%;
            }

            /* section 2 */
            .s2 img{
                margin: 0px 10px 120px 0px;
            }

            .img4{
                padding: 0px 190px 0px 115px;
            }

            .img7{
                height: 202px;
                padding:0px 104px 0px 160px;
            }

            .img9{
                padding: 0px 20px 0px 350px;
            }

            .img10{
                height: 300px;
            }

            /* section 3, section 4 - textos */
            .s3 article, 
            .s4 article{
                width: 28%;
            }

            /* Galería */   
            .exposicion-de-fotos figure{
                width: 33.33%;
            }

            .modal-img{
                width: 60%;
                height: 500px;
            }
        
            /* Contacto */
            .datos-contacto{
                margin-top: 0px;
            }

            .datos-contacto ul{
                width: 32%;
            }

            .datos-contacto a{
                font-size: 20px;
            }


    }

/* Full HD (1920px) */
@media (min-width: 1920px) {
    /* Reglas especificas */
        /* Home */
        /* section 2 */
        .img8{
            padding: 0px 200px 0px 180px;
        }

        /* Galeria */
        .modal-img{
            width: 56%;
            height: 660px;
        }
}