@import url('https://fonts.googleapis.com/css2?family=Cabin&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&family=Quicksand&display=swap');

@keyframes fadeInIso{
    0%{
        opacity: 0%;
        margin-bottom: 0%;
        
    }

    100%{
        opacity: 100%;
        margin-bottom: 20%;
        
    }

}

@keyframes fadeInText{
    0%{
        opacity: 0%;
        top: 0%;
        
    }

    100%{
        opacity: 100%;
        top: 50%;
        
    }

}



.portrait-cont{/*CONTENEDOR DE IMAGEN DE PORTADA Y ELEMENTOS DE PORTADA*/
    width: 100%;
    height: auto;
    background-color: #1e1e1e00;
    display: inline-block;
    justify-content: center;
    text-align: center;
    
}
.img-content{ /*CONTENEDOR DE IMAGEN DE PORTADA*/
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    overflow: hidden;
    z-index: -2;
}

.img-element{ /*IMAGEN DE PORTADA*/
    width: 1920px;
    height: 1080px;
    opacity: 100%; 
    z-index: -2;

    
}

.elements-cont{/*CONTENEDOR DE ELEMENTOS DE PORTADA*/
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(0%,-50%);
    z-index: -2;

    
    
}

.text-element{ /*ELEMENTO DE TEXTO*/
    font-family: 'Comfortaa', sans-serif;
    position: absolute;
    
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);    
    color:white;
    font-size: 3em;
    text-shadow: 2px 0px 5px #1e1e1e;
    z-index: -1;

    animation-name: fadeInText;
    animation-duration: 3s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

.iso-image{ /*ELEMENTO ISO*/
    opacity: 0%;
    margin-bottom: 25%;
    z-index: -1;

    animation-name: fadeInIso;
    animation-duration: 3s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    animation-delay: 3s;

}

.gsm{/*BARRA DE MOVIL*/
    width: 100%;
    height: 150px;
    background-color: #1e1e1e;
    margin: 0 auto;
    display: none;
   
}

.image-gsm{ /*IMAGEN CONTENIDA EN BARRA DE MOVIL*/
    width: 10%;
   }

@media screen and (max-width: 320px) {
    
    @keyframes fadeInText{
        0%{
            opacity: 0%;
            top: 0%;
            
        }
    
        100%{
            opacity: 100%;
            top: 60%;
            
        }
    }
    
    .text-element{
        top: 70%;
        left: 50%;
        transform: translate(-50%,-40%);    
    } 
   }

@media screen and (max-width: 750px) {

    .gsm{
        display: flex;
        align-items: center;
        justify-content: right;
        margin-right: 5%;
    }

    .image-gsm{
        width: 200px;
    }


    .text-element{
        font-size: 3em;
        margin-top: 25%;
        z-index: -2;
    }

    .iso-image{
        margin-bottom: 40%;
        animation-delay: 0s;
    }

    }

@media screen and (max-width: 1022px) {

    .gsm{
        display: flex;
        align-items: center;
        justify-content: right;
        margin-right: 5%;

    }

    .image-gsm{
        width: 200px;
    }

    .text-element{
        font-size: 2em;
    }





    }