@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap');

@font-face{
    font-family: 'Historical-FellTypeRoman';
    src: url("./fonts/Historical-FellTypeRoman.otf");


}
.up{
    z-index: 99;
}

   
/*Keyframes*/
    
    /*izquierdos*/
    @keyframes snow {        /* x,y) */
        0% {background-position: 5vw 0vh;}
        100% {background-position: 10vw 100vh, 500px 100vh, 400px 100vh;}
        }
        
        /* movil*/
         @keyframes petalos {
        0% {background-position: 90vw 0vh;}
        100% {background-position:1020px 100vh, 600px 100vh, 840px 100vh;}
        }
            
        /*medios*/
        @keyframes fugaces {
        0% {background-position: 40vw 0vh;}
        100% {background-position: 20vw 100vh, 60vw 100vh,90vw 100vh;}
        }
            
        /* movil*/
        #nieve {
            max-width:100vw;
            position:absolute;
            z-index: 5;
            width:40vw;
            height:150vh;
            background-size: 2em;
            background-repeat:no-repeat;
        background-image: url('./img/petalo1.png'), url('./img/petalo3.png'), url('./img/petalo2.png');
        animation: snow 50s linear infinite;
        }
        #petalos {
            position:absolute;
            z-index: 4;
            width:100vw;
            min-height: 150vh;
            background-size: 2em;
            background-repeat:no-repeat;
        background-image: url('./img/petalo3.png'), url('./img/petalo2.png'), url('./img/petalo1.png');
        animation: petalos 30s linear infinite;
        }
        /* movil*/
        #fugaces{
            position:absolute;
                max-width:100vw;
            z-index: 5;
            width:50vw;
            min-height: 150vh;
            background-size: 2em;
            background-repeat:no-repeat;
        background-image: url('./img/petalo2.png'), url('./img/petalo1.png'), url('./img/petalo3.png');
        animation: fugaces 55s linear infinite;
            animation-delay:500ms; 
        }
        

body{
    background-image: url("./img/background.jpg");
    background-repeat: repeat-y;
    background-size: cover;
}

@media (min-width: 300px) {
    h1{
        font-family: 'Historical-FellTypeRoman';
        text-align:center;
        font-size: large;
        letter-spacing: 0.8em;
    }


    .flowers{
        position: absolute;
        top:-10px;
        left:0;
        width:51%;
    }
    .flowers_r{
        position: absolute;
        top:-10px;
        right:0;
        width:50%;
    }

    .container-fluid-off{
        
        overflow-y:scroll ;
        overflow-x:hidden;
        max-width:100vw;
        position:relative;
        bottom:3rem;
        color:white;
        display:flex;
        flex-wrap:wrap;
        align-items: center;
        justify-content: space-around;
        padding-top:5rem;    
    }

    .row{
        margin:auto;
    }


    .col-4{
        width:22.2rem;
        margin:auto;
    }

    .container-fluid-off img{
        width:100%;
        box-sizing: border-box;
    }

    .text-container{
        background-color: rgba(0,0,0,0.9);
        padding:1.5rem 1.5rem 0 1.5rem;
        text-align: justify;
        position:fixed;
        z-index:2;
        left:0;    
        bottom:0rem;
        width:100vw;
        min-height:50vh;
        color:white;
        font-family: 'Montserrat';
        font-size: xx-small;
        line-height: 1.1rem;
    }
    .hide{
        display:none;
    }




}
@media (min-width: 370px) {
    h1{
        font-family: 'Historical-FellTypeRoman';
        text-align:center;
        font-size: large;
        letter-spacing: 0.8em;
    }

    .flowers{
        position: absolute;
        top:-10px;
        left:0;
        width:51%;
    }
    .flowers_r{
        position: absolute;
        top:-10px;
        right:0;
        width:50%;
    }

    .container-fluid-off{
    
        overflow-y:scroll ;
        overflow-x:hidden;
        max-width:100vw;
        position:relative;
        bottom:5rem;
        color:white;
        display:flex;
        flex-wrap:wrap;
        align-items: center;
        justify-content: space-around;
        padding-top:5rem;    
    }

    .row{
        margin:auto;
    }


    .col-4{
        width:22.2rem;
        margin:auto;
    }

    .container-fluid-off img{
        width:100%;
        box-sizing: border-box;
    }

    .text-container{
        background-color: rgba(0,0,0,0.9);
        padding: 1.5rem 2rem;
        text-align: justify;
        position:fixed;
        z-index:2;
        left:0;    
        bottom:0rem;
        right:2rem;
        width:100vw;
        min-height:40vh;
        color:white;
        font-family: 'Montserrat';
        font-size: xx-small;
        line-height: 1.1rem;
    }
    .hide{
        display:none;
    }

    .cerrar{
        cursor:pointer;
        color:transparent;
    }


}
@media (min-width:  576px) {
    h1{
        font-family: 'Historical-FellTypeRoman';
        text-align:center;
        font-size: xx-large;
    }

    .flowers{
        position: absolute;
        top:-15px;
        left:0;
        width:51%;
    }
    .flowers_r{
        position: absolute;
        top:-15px;
        right:0;
        width:50%;
    }

    .container-fluid-off{
    
        overflow-y:scroll ;
        overflow-x:hidden;
        max-width:100vw;
        position:relative;
        bottom:20rem;
        color:white;
        display:flex;
        flex-wrap:wrap;
        align-items: center;
        justify-content: space-around;
        padding-top:20rem;    
    }

    .row{
        margin:auto;
    }


    .col-4{
        width:22.2rem;
        margin:auto;
    }

    .container-fluid-off img{
        width:100%;
        box-sizing: border-box;
    }

    .text-container{
        background-color: rgba(0,0,0,0.9);
        padding: 1rem 2rem;
        text-align: justify;
        position:fixed;
        z-index:2;
        left:0;    
        bottom:0rem;
        right:2rem;
        width:100vw;
        min-height: 40vh;
        color:white;
        font-family: 'Montserrat';
        font-size: x-small;
        line-height: 1.3rem;
    }
    .hide{
        display:none;
    }

    .cerrar{
        cursor:pointer;
        color:transparent;
    }


}
@media (min-width:  768px) {
    h1{
        font-family: 'Historical-FellTypeRoman';
        text-align:center;
        font-size: xx-large;
        letter-spacing: 0.8em;
    }


    .container-fluid-off{
    
        overflow-y:scroll ;
        overflow-x:hidden;
        max-width:100vw;
        position:relative;
        bottom:5rem;
        color:white;
        display:flex;
        flex-wrap:wrap;
        align-items: center;
        justify-content: space-around;
        padding-top:5rem;    
    }

    .row{
        margin:auto;
    }


    .col-4{
        width:22.2rem;
        margin:auto;
    }

    .container-fluid-off img{
        width:100%;
        box-sizing: border-box;
    }
    .text-container{
        background-color: rgba(0,0,0,0.9);
        padding: 2rem 2rem 0 2rem;
        text-align: justify;
        position:fixed;
        z-index:2;
        left:0;    
        bottom:0rem;
        right:2rem;
        width:100vw;
       min-height: 35vh;
        color:white;
        font-family: 'Montserrat';
        font-size: x-small;
        line-height: 1.3rem;
    }
    .hide{
        display:none;
    }

    .cerrar{
        cursor:pointer;
        color:transparent;
    }


}
@media (min-width: 992px) {
    h1{
        font-family: 'Historical-FellTypeRoman';
        text-align:center;
        font-size: xx-large;
        letter-spacing: 0.8em;
    }
    .flowers{
        position: absolute;
        top:-30px;
        left:0;
        width:51%;
    }
    .flowers_r{
        position: absolute;
        top:-30px;
        right:0;
        width:50%;
    }
    .container-fluid-off{
    
        overflow-y:scroll ;
        overflow-x:hidden;
        max-width:100vw;
        position:relative;
        color:white;
        display:flex;
        flex-wrap:wrap;
        align-items: center;
        justify-content: space-around;
        padding-top:8rem;  
        bottom:5rem;    
    }

    .row{
        margin:auto;
    }


    .col-4{
        width:22.2rem;
        margin:auto;
    }

    .container-fluid-off img{
        width:100%;
        box-sizing: border-box;
    }

    .text-container{
        background-color: rgba(0,0,0,0.9);
        padding: 2rem 3rem;
        text-align: justify;
        position:fixed;
        z-index:2;
        left:0;    
        bottom:0rem;
        right:2rem;
        width:100vw;
        min-height: 45vh;
        color:white;
        font-family: 'Montserrat';
        font-size: small;
        line-height: 1.3rem;
    }
    .hide{
        display:none;
    }

  


}

@media (min-width: 1200px) {
    h1{
        font-family: 'Historical-FellTypeRoman';
        text-align:center;
        font-size: xx-large;
        letter-spacing: 0.8em;
    }
    .flowers{
        position: absolute;
        top:-50px;
        left:0;
        width:51%;
    }
    .flowers_r{
        position: absolute;
        top:-50px;
        right:0;
        width:50%;
    }
    .container-fluid-off{
    
        overflow-y:scroll ;
        overflow-x:hidden;
        max-width:100vw;
        position:relative;
        color:white;
        display:flex;
        flex-wrap:wrap;
        align-items: center;
        justify-content: space-around;
        padding-top:5rem;  
        bottom:2rem;    
    }

    .row{
        margin:auto;
    }


    .col-4{
        width:22.2rem;
        margin:auto;
    }
    .container-fluid-off img{
        width:100%;
        box-sizing: border-box;
    }
    .fonte{
        color:white;
    }
    .text-container{
        background-color: rgba(0,0,0,0.9);
        padding: 2.5rem 5rem 1rem 5rem;
        text-align: justify;
        position:fixed;
        z-index:2;
        left:0;    
        bottom:0rem;
        right:2rem;
        width:100vw;
        min-height: 50vh;
        color:white;
        font-family: 'Montserrat';
        font-size: 1rem;
        line-height: 1.8rem;
    }



}