@font-face{
    font-family: RobotoMedium;
    src: url(Fonts/Roboto-Medium.ttf);
}
@font-face{
    font-family: RobotoThin;
    src: url(Fonts/Roboto-Thin.ttf);
}

@keyframes arrow{
    0%{transform: translateY(-6pt);
        opacity: 0;}
    100%{transform: translateY(6pt);
        opacity: 1;}
}

@keyframes opacity{
    0%{opacity: 0;}
    25%{opacity: 0;}
    75%{opacity: 1;}
}

@keyframes opacitydelay{
    0%{opacity: 0;}
    50%{opacity: 0;}
    100%{opacity: 1;}
}

@keyframes preloader{
    0%{opacity: .25;}
    40%{opacity: .25;}
    50%{opacity: 1;}
    60%{opacity: .25;}
    100%{opacity: .25;}
}

*{
    color: white;
    margin: 0;
    font-family: RobotoThin;
}

body{
    background: black;
    font-size: 1.1vw; 
    letter-spacing: calc(1.1vw/8);
}

.hidden{
    overflow: hidden;
}
.preloader{
    position: fixed;
    width: 100%;
    height: 100%;
    background: black;
    z-index: 1;
}

.preloader p{
    font-size: 2.5vw;
    text-align: center;
    margin: 50vh 0 0 0;
    animation: opacity 1s;
    user-select: none;
}

span{
    margin: 0 .5vw;
    opacity: 0;
}

span:nth-child(1){
     animation: preloader 1.5s linear 0s infinite;   
}

span:nth-child(2){
     animation: preloader 1.5s linear .25s infinite;   
}

span:nth-child(3){
     animation: preloader 1.5s linear .50s infinite;   
}

span:nth-child(4){
     animation: preloader 1.5s linear .75s infinite;   
}


h1{
    animation: opacity 4s;
}

h2, h3, h4, a, p, main, footer, .scroll{
    animation: opacitydelay 4s;
}

*::selection{
    background: rgb(160,0,0);
    color: white;
}

h1{
    font-size: 4.4vw; 
    font-size-adjust: auto;
    letter-spacing: calc(4.4vw/8);
    font-family: RobotoMedium;
    user-select: none;
}

h2{ 
    font-family: RobotoThin;
    font-size: 2.2vw; 
    text-transform: uppercase;    
    letter-spacing: calc(2.2vw/8);    
}

h3{
    font-family: RobotoMedium;
    text-transform: uppercase;
}

h4{
    font-family: RobotoThin;
    font-size: .73vw;
}

a{
    text-decoration: none;
    color: #a0a0a0;
    transition: color .3s;
}

a:hover{
    color: #ffffff;
    transition: color .3s;
}

header{
    height: 100vh;
    position: relative;
}

header div{
    position: absolute;
}

header h1{
    margin: 20vh 0 0 10vw;
}

header h3{
    margin: 10vh 0 0 20vw;
}

header p{
    margin: 0 0 0 20vw;
    width: 30vw; 
}

#homevideo{
    position: absolute;
    height: inherit;
    width: 100%;
    object-fit: cover;
    opacity: 1;
}

/*REVISAAAAAAAAAAAAAAAAAAAAAAAAR*/
.language{
    margin: 10vh 20vw 0 0;
    padding: 0;
    position: relative;    
    float: right;
}

.language p{
    margin: 0;
    padding: 0;
    width: auto;
}

.language a{
    margin: 0;
    padding: 0;
    font-family: RobotoMedium;
    user-select: none;
    font-size: .73vw;
}

.scroll{
    bottom: 10vh;
    left: 48vw;
    position: absolute;
    opacity: .65;
}

.scroll div{
    width: 3vw;
    height: 3vw;
}

.mouse{
    background: url(Resources/mouse.svg);
}

.arrow{
    background: url(Resources/scroll.svg);
    animation: arrow 1s linear infinite;
}

/*----------------------------------------*/

main{
    position: relative;
    display: inline-block;
}

main h4{
    text-transform: uppercase;
    margin: 1em 0 .5em 0;
    width: calc(95vw/3);
}

main>div{
    float: left;
    margin: 0 0 0 1vw; /*Compensa margin h4, si no se compensa se mezcla con el footer*/
}

main>div div{
    width: calc(95vw/3);
    height: calc((95vw/3)/1.6);
    background-size: contain;
    background-repeat: no-repeat;
    transition: opacity .25s;
}

main a>div>div:hover{ /*pause hover*/
    transition: opacity .25s;
    opacity: 0;
}

@media not all and (min-resolution:.001dpcm) { 
    @media {
        main a>div>div:hover{ 
            opacity: .6;
        }
    }
}

.pause1{
    background-image: url(IMG/1.jpg?v=2);
}
.play1{
    background-image: url(VID/1.webp?v=2);
}
.pause2{
    background-image: url(IMG/2.jpg?v=2);
}
.play2{
    background-image:url(VID/2.webp?v=2);
}
.pause3{
    background-image: url(IMG/3.jpg?v=2);
}
.play3{
    background-image:url(VID/3.webp?v=2);
}
.pause4{
    background-image: url(IMG/4.jpg?v=2);
}
.play4{
    background-image: url(VID/4.webp?v=2);
}
.pause5{
    background-image: url(IMG/5.jpg?v=2);
}
.play5{
    background-image: url(VID/5.webp?v=2);
}
.pause6{
    background-image: url(IMG/6.jpg?v=2);
}
.play6{
    background-image: url(VID/6.webp?v=2);
}
.pause7{
    background-image: url(IMG/7.jpg?v=2);
}
.play7{
    background-image:url(VID/7.webp?v=2);
}
.pause8{
    background-image: url(IMG/8.jpg?v=2);
}
.play8{
    background-image:url(VID/8.webp?v=2) ;
}
.pause9{
    background-image: url(IMG/9.jpg?v=2);
}
.play9{
    background-image:url(VID/9.webp?v=2) ;
}
.pause10{
    background-image: url(IMG/10.jpg?v=2);
}
.play10{
    background-image:url(VID/10.webp?v=2) ;
}
.pause11{
    background-image: url(IMG/11.jpg?v=2);
}
.play11{
    background-image:url(VID/11.webp?v=2) ;
}
.pause12{
    background-image: url(IMG/12.jpg?v=2);
}
.play12{
    background-image:url(VID/12.webp?v=2) ;
}

/*----------------------------------------*/

footer{
    position: relative;
    height: 60vh;
    background: black;

}

footer div{
    float: left;
}

footer div:nth-child(1){
    margin: 10vh 0 0 10vw;
}

footer div:nth-child(2){
    position: absolute;
    margin: 10vh 0 0 50vw;
}

footer div:nth-child(3){
    position: absolute;
    margin: 0 0 0 10vw;
    bottom: 1em;
}

footer p, footer a{
    margin: 1em 0 0 0;
}


footer>div>h2{
    margin: 0 0 1em 0;
    padding: 0 150px 1em 0;
    user-select: none;
    border-bottom: 1px solid #ffffff;
}


.disclaimer a, .disclaimer h4{
    font-size: 10pt;
    text-transform: uppercase;
    letter-spacing: calc(10pt/8);
}

/*@media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 16/10){*/
@media (min-width: 540px) and (max-width: 1023px){
    
    .preloader p{
        font-size: 5vw;
    }
    
    body, a{
        font-size: 1.5vw;
        letter-spacing: calc(1.5vw/8);
    }
    
    h1{
        font-size: 6vw;
        letter-spacing: calc(6vw/8);
    }
    
    header h1{
        margin: 25vh 0 0 10vw;
    }
    
    header h3{
        margin: 12vh 0 0 20vw;
    }
    
    header p{
        width: 50vw;
    }
    
    .language{
        margin: 15vh 10vw 0 0;
    }
    
    .language>p>a{
        font-size: 1vw;
        letter-spacing: calc(1vw/8);
    }
    
    main>div div{
        width: calc(94.9vw/2);
        height: calc((94.9vw/2)/1.6);
    }
    
    main h4{
    width: calc(90vw/2);
    }
    
    main>div:nth-child(9){
        display: none;
    }
    
    footer{
        height: 45vh;
    }
    
    .disclaimer>h4, .disclaimer>h4>a, h4{
        font-size: 1vw;
        letter-spacing: calc(1.1vw/8);
    }
    
}

/*@media (max-aspect-ratio: 1/1){*/
@media (max-width: 539px){
    
    .preloader p{
        font-size: 5vw;
    }
    
    body{
        overflow: auto;
        font-size: 4vw;
        letter-spacing: calc(4vw/8);
    }
    
    h1{
        font-size: 11.5vw;
        letter-spacing: calc(11.5vw/8);
    }    
    
    h2{
    }
    
    h3{
        font-size: 3.5vw;
        letter-spacing: calc(3.5vw/8);
    }
    h4{
        font-size: 3vw;
        letter-spacing: calc(2vw/8);
    }
    
    header div:nth-child(1){
        width: 100%;
    }

    header h1{
        margin: 20vh 0 0 2.5vw;
    }

    header h3{
        margin: 10vh 0 0 2.5vw;
        padding: 0;
    }

    header p{
        margin: 0 2vw 0 2.5vw;
        width: auto;
    }
    
    .scroll{
        opacity: 0;
        position: absolute;
    }
    
    .language{
        float: none;
        margin: 0vh 0 0 0;
        width: 100%;
        text-align: center;
    }
    
    .language a{
        font-size: 2vw;
    }
    
    main h4{
        margin: 1em 0 .25em 2.5vw;
        width: 93vw;

    }
    
    main>div{
        margin: 0;
    }
    
    main>div div{
        width: calc(98vw/1);
        height: calc((98vw/1)/1.6);
        background-size: contain;
}
    
    footer{
        position: relative;
        height: 100vh; 
        background: black;
        opacity:;
    }   

    footer div{
        width: 100%;
    }

    footer div:nth-child(1){
        margin: 0vh 0 0 0vw;
    }

    footer div:nth-child(2){
        margin: 35vh 0 0 0vw;
    }

    footer div:nth-child(3){
        margin: 0 0 0 0vw;
        bottom: 1em;
    }
    
    footer p, footer a{
        font-size: 4vw;
        letter-spacing: calc(4vw/8);
    }

    footer a{
        margin: 1em 0 0 0vw;
        color: rgb(192,192,192);
    }

    footer p{
        margin: 1em 0 0 2.5vw;
    } 

    footer>div>h2{
        margin: 15vh 0 0 2.5vw;
        padding: 0;
        font-size: 8vw;
        letter-spacing: calc(8vw/8);
        user-select: none;
        width: 50%;
        border-bottom: 1px solid #ffffff;
    }

    .disclaimer h4{
        margin: 0 0 0 2.5vw;
    }    
    
    .disclaimer a, .disclaimer h4{
        font-size: 2vw;
        text-transform: uppercase;
        letter-spacing: calc(2vw/8);
    }

}