@font-face {
    font-family: 'silka';
    src: url('../assets/fonts/silk_flower.otf');
}

@font-face {
    font-family: 'QuickBook';
    src: url('../assets/fonts/Quicksand_Book.otf');
}

@font-face {
    font-family: 'QuickBold';
    src: url('../assets/fonts/Quicksand_Bold.otf');
}

a{
    text-decoration: none;
}
/*
.navbar{
    position:fixed;
    width: 100%;
    height: 70px;
    background-color:#1C1B1B;
    z-index: 99;
    display:none;
}
*/

.head{
    position: relative;
}

.capaHeader{
    position:absolute;
    top:0;
    width:100%;
    height: 100%;
    opacity: 0.71;
    background: #FF6601;  
    mix-blend-mode: multiply; 
}

.header{
    position: relative;
    top: 0px;
    width: 100%;
    height: 100vh;
    background: transparent url('../assets/img/header1.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    opacity: 0.49;
}

.vertical{
    position:absolute;
    left:50%;
    top:45%;
    transform: translate(-50%, -50%);
    text-align:center;
    z-index:3;
}

.logo{
    width: 100%;
}

.bottomHead{
    position: absolute;
    bottom:30px;
}

.bottomHead p{
    font-family: 'QuickBold';
    color: white;
}

.flecha{
    position:absolute;
    bottom:30px;
    left:50%;
    transform: translate(-50%, -50%);
    animation: down forwards 1s ease-in-out infinite;
}

@keyframes down {
    0%{
        bottom:30px;
    }
    50%{
        bottom:0px;
    }
    100%{
        bottom:30px;
    }
}

.flecha2{
    width:50%;
    height: 100%;
}

.main{
    position:relative;
}

.menu{
    position:absolute;
    top:0px;
    left:-35%;
    width:30%;
    background-color:#171616;
    height: 120vh;
    color:white;
    z-index:98;
    transition:all ease 0.5s;
}

.menuOpen{
    left:0%;
}

.menuFix{
    position:fixed;
}

.pMenu{
    padding-top:140px;
}

.pMenu ul a li{
    padding:10px;
    background-color:#141313;
    color:white;
    text-decoration: none;
    list-style: none;
    font-family: 'silka';
    font-size:18px;
    text-transform: uppercase;
    margin-top:10px;
    transition: all ease-in-out 0.2s;
    cursor:pointer;
}

.pMenu ul a li:hover{
    background-color:#24E271;
}

.coming{
    text-decoration: line-through !important;
}

/*===================
== NAVBAR DESKTOP ==
===================*/

.navbar{
    position:relative;
    height: 120px;
    padding:20px;
    color:white;
    background-color:#79CCF3;
    z-index: 99;
    transition: all ease 0.5s;
}

.navbarFix{
    position:fixed;
    width:100%;
    height: 80px;
    top:0;
    background-color:#1C1B1B;
}


.logoSVG,.ticketSVG{
    width:50%;
    height: 100%;
    transition: all ease 0.5s;
}

.logoSVGFix, .ticketSVGFix{
    width:27%;
}

/*===================
== SPONSOR DESKTOP ==
===================*/

.sponsor{
    background-color: #79CCF3;
    color:white;
    font-family: 'QuickBook';
    position:relative;
}

.tablero{
    position: relative;
    padding:0;
}

.spons{
    position:absolute;
    width:100%;
    top:40px;
    text-align: center;
}

.spons img{
    width:80%;
}

.pasto{
    margin-top:-80px;
}

.nube{
    position:absolute;
    top:190px;
    left:10px;
}

.nube2{
    position:absolute;
    top:270px;
    right:15px;
}

.silver img{
    width:70%;
}


/*================
== EXPO DESKTOP ==
================*/

.expo{
    position:relative;
    background-color: #79CCF3;
    color:white;
    min-height: 700px;
    overflow: hidden;
}

.ventana{
    position: absolute;
    top:150px;
    z-index:2;
}

.ventanaText{
    position:absolute;
    top:20px;
    padding:50px;
}

.ventanaText h3{
    font-family: 'silka';
    color:white;
    line-height: 40px;
}

.ventanaText h3 span{
    background:#24E271;
    padding:5px;
}

.ventanaText p{
    color:black;
    font-family: 'QuickBook';
    font-size:18px;
    text-align:center;
}

.sol{
    position:absolute;
    top:10px;
    transform: translate(106%, 8%);
    z-index:3;
}

.mano{
    position:absolute;
    top:80px;
    transform: translate(-80%, 15%);
    z-index:3;
}

.nube3{
    position:absolute;
    top:80px;
    transform: translate(-130%, 150%);
    z-index:3;
}

.nube4{
    position:absolute;
    top:80px;
    transform: translate(134%, 130%);
    z-index: 1;
}


/*=================
== STAGE DESKTOP ==
=================*/

.stage{
    position:relative;
    background-color: #79CCF3;
    color:white;
    overflow:hidden;
}

.logoStage{
    width:70%;
}

.stageIntro{
    font-family: 'QuickBold';
    text-align: center;
    font-size: 22px;
}

.day,
.dayS{
    font-family: 'silka';
    color:#3C6B81;
    text-align: center;
}

.dayS2{
    position:relative;
}

.dayS{
    position:absolute;
    color:white;
    font-size:40px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.art1, 
.art2, 
.art3,
.art11,
.art22,
.art33{
    text-align: center;
    margin-top:10px;
    transition:all ease 0.5s;
}

.art1:hover, .art2:hover, .art3:hover{
    transform: rotate(25deg);
}

.art1 h3 span,
.art11 h3 span{
    font-family: 'silka';
    color:white;
    background: #24E271;
    padding: 10px 10px 5px 10px;
}

.art2 h3 span,
.art22 h3 span{
    font-family: 'silka';
    color:white;
    background:#FFAF22;
    padding: 10px 10px 5px 10px;
}

.art3 h3 span,
.art33 h3 span{
    font-family: 'silka';
    color:white;
    background:#FF6601;
    padding: 10px 10px 5px 10px;
}

.art11 p,
.art22 p,
.art33 p{
    font-family: 'QuickBold';
    color:white;
    font-size: 16px;
}

.nubeStage1{
    position:absolute;
    top:204px;
    left:160px;
}

.luna{
    position:absolute;
    top: 405px;
    left: 230px;
}

.nube5{
    position:absolute;
    top:290px;
    right:180px;
}

.nube6{
    position:absolute;
    bottom:20px;
    right:100px;
    z-index:1;
}

.weed{
    position:absolute;
    bottom:200px;
    right:220px; 
    z-index:2;
}

.weedS{
    position:absolute;
    bottom:70px;
    left:-190px; 
    z-index:3;
}

.imgArt{
    position:relative;
}

.imgArt img{
    width:60%;
    border-radius:50%;
    border: 5px solid black;
}

.nubeStg,
.nubeStg1,
.nubeStg2,
.nubeStg3{
    bottom: 0px;
    position: absolute;
    z-index: 3;
}

.nubeStg{
    left:0;
    transform: translate(-111%, 15%);
}


.nubeStg1{
    left:0;
    transform: translate(-111%, 15%);
}

.nubeStg2{
    right:0;
    transform: translate(95%, 15%);
}

.nubeStg3{
    left:0;
    transform: translate(-90%, 25%);
}

.insta,
.insta2{
    position:absolute;
    bottom:0px;
    cursor:pointer;
}

.insta{
    left:25%;
}

.insta2{
    right:25%;
}

.instaSVG{
    width:60%;
    animation: zoom forwards 1.5s ease-in-out infinite;
}

@keyframes zoom {
    0%{
        width:60%;
    }
    50%{
        width:70%;
    }
    100%{
        width:60%;
    }

}



/*===============
== FAQ DESKTOP ==
===============*/


.titleFaq h2 span{
    font-family: 'silka';
    color:black;
    background: #24E271;
    padding: 10px 10px 5px 10px;
}

.faq{
    position: relative;
}

.faqText{
    position:absolute;
    top:25%;
    padding:20px 25px 20px 20px;
    font-size:14px;
    font-family: 'QuickBold';
    text-transform: uppercase;
    text-align: center;
}

.faqTextInfo{
    position:absolute;
    top:25%;
    left:20%;
    padding:20px 25px 20px 20px;
    font-size:14px;
    font-family: 'QuickBold';
    text-transform: uppercase;
    text-align: center;
}

/*=================
== PROTO DESKTOP ==
=================*/

.virus{
    position:absolute;
    top: 70px;
    left: -48px;
}

.cov{
    position:absolute;
    top:25%;
}

.cov h4 span{
    font-family:'silka';
    color:white;
    background:#FFAF22;
    font-size:35px;
    padding:7px 7px 0px 7px;
}

.cov p span{
    font-family: 'QuickBold';
    text-transform: uppercase;
    color:white;
    background:#FFAF22;
    padding:5px 5px 5px 5px;
}

/*=================
== FORUM DESKTOP ==
=================*/

.forum{
    background: #24E271;
}

.titleForum h2 span{
    font-family: 'silka';
    color:white;
    background: #FF6601;
    padding: 10px 10px 5px 10px;
}

.subtit{
    color:white;
    font-family: 'QuickBold';
    font-size: 18px;
}

/*=================
== ZONAS DESKTOP ==
=================*/

.zonas{
    position:relative;
    min-height: 700px;
}

.titleZonas h2 span{
    font-family: 'silka';
    color:white;
    background: #24E271;
    padding: 10px 10px 5px 10px;
}

.zonas2 span{
    position:relative;
    font-family: 'QuickBold';
    margin-top:20px;
}

.zonas2 span h4{
    margin-bottom: 1.5rem;
}

.bril{
    position:absolute;
    top:0;
    left:-25px;
}

.zonaMap{
    position:relative;
}

.zonaTxt{
    position:absolute;
    width:100%;
    top:0px;
}

.zonaTxt h3{
    font-family: 'QuickBold';
    padding-top:20px;
    margin-top:-50px;
    color:white;
}

.zonaTxt p{
    font-family: 'QuickBold';
    font-size:17px;
}

.imgZona{
    width:70%;
}

.mapZ{
    display:block;
}

.mapZFix{
    display:none;
}

.mapZsal{
    width:100%;
    opacity:1;
    animation: salida forwards 1s ease-in-out;
}

@keyframes salida {
    to{
        width:0%;
        opacity:0;
    }
}

.mapZent{
    width:0%;
    animation: entrada forwards 1s ease-in-out;
}

@keyframes entrada {
    to{
        width:100%;
        opacity:1;
    }
}

.bikeB,
.patioB,
.dayaB,
.kidsB,
.cultivaB,
.expoB,
.forumB,
.standsB,
.stageB{
    cursor:pointer;
    transition:all ease 0.5s;
}

.bikeB:hover,
.patioB:hover,
.dayaB:hover,
.kidsB:hover,
.cultivaB:hover,
.expoB:hover,
.forumB:hover,
.standsB:hover,
.stageB:hover{
    padding:5px;
    background:#FF6601;
    color:white;
}

.zonaPlace{
    display:none; 
}

.zonaPlaceFix{
    display:block;
    opacity:0;
    animation: entrada forwards 1s ease-in-out;
}

.closed{
    position:absolute;
    top:20px;
    right: 30px;
    background: red;
    color:white;
    padding:10px;
    width:100px;
    text-align:center;
    cursor:pointer;
    opacity:0;
    transition: all ease 0.5s;
    z-index:2;
}

.closedFix{
    opacity:1;
}


/*==================
== FOOTER DESKTOP ==
==================*/

footer{
    height: 150px;
    background: #272727;
    color:white;
    overflow: hidden;
}

footer a {
    color:white;
}

.logoFooter{
    padding:40px;
}

.separator{
    font-size: 50px;
    font-family: 'QuickBook';
    font-weight: 200;
    margin: 0px -20px;
}

.footDesk{
    display:flex;
}

.footMob{
    display:none;
}



/*==================
== MARCAS DESKTOP ==
==================*/

.mundo{
    z-index:2;
}

.nubeMarca{
    margin-top:-10%;
}

.marcas h2{
    font-family:'silka';
}

.marcas p{
    font-family: 'QuickBold';
}

.marcas{
    padding: 60px 0px;
}

/*====================================================================
====    RESPONSIVE MOBILE      =======================================
====================================================================*/

@media (max-width:767px){

    .vertical{
        left: 50%;
        top: 40%;
    }

    .bottomHead{
        font-size:11px;
    }

    .flecha2{
        width: 13%;
        height: 70%;
    }

    .menu{
        left:-100%;
        width: 100%;
    }

    .menuOpen{
        left:0%;
    }

    /*=================
    == NAVBAR MOBILE ==
    =================*/

    .logoSVG{
        width:100%;
        height: 100%;
        transition: all ease 0.5s;
    }

    .ticketSVG{
        width:90%;
        height: 100%;
        transition: all ease 0.5s;
    }

    .logoSVGFix, .ticketSVGFix{
        width:70%;
    }

    /*==================
    == SPONSOR MOBILE ==
    ==================*/

    .nube{
        top: 120px;
        left: -30px;
    }

    .nube2{
        top: 163px;
        right: 6px;
    }

    .pasto{
        margin-top:-15px;
    }

    .spons{
        top:13px;
    }

    .silver img{
        width:100%;
    }

    /*===============
    == EXPO MOBILE ==
    ===============*/

    .expo{
        min-height: 370px;
    }

    .ventana{
        top:80px;
    }

    .ventanaText{
        top: 0px;
        padding: 29px;
    }

    .ventanaText h3{
        line-height: 23px;
        font-size: 12px;
    }

    .ventanaText h3 span{
        background:#24E271;
        padding:5px;
    }

    .ventanaText p{
        font-size:10px;
    }

    .nube3{
        top: 15px;
        left: 0px;
        transform: translate(2%, 220%);
    }

    .nube4{
        left:85px;
    }

    .mano{
        top:105px;
    }

    /*================
    == STAGE MOBILE ==
    ================*/

    .logoStage{
        width:100%;
    }

    .stageIntro {
        font-size: 14px;
    }

    .nube5 {
        top: 163px;
        right: -80px;
    }

    .nubeStage1{
        top: 170px;
        left: -70px;
    }

    .luna{
        top: 370px;
        left: -11px;
    }

    .weed{
        bottom: 66px;
        right: 0;
    }

    .nube6{
        bottom: 0px;
        right: -36px;
    }

    .dayS{
        font-size:20px;
    }

    .nubeStg{
        transform: translate(-45%, 15%);
    }

    .nubeStg1{
        transform: translate(-47%, 15%);
    }

    .nubeStg2{
        transform: translate(30%, 15%);
    }

    .nubeStg3{
        transform: translate(-55%, 25%);
    }

    .weedS{
        bottom: 17px;
        left: -17px;
    }

    /*==============
    == FAQ MOBILE ==
    ==============*/

    .faqText{
        top:20%;
    }

    /*================
    == PROTO MOBILE ==
    ================*/

    .virus{
        top: 36px;
        left: -28px;
    }

    .cov{
        position:absolute;
        top:25%;
    }

    .cov h4 span{
        font-size:25px;
    }

    .cov p span{
        font-size: 9px;
    }

    .cov p{
        margin:0;
    }
    

    /*================
    == ZONAS MOBILE ==
    ================*/

    .zonas2{
        margin-top:20px;
    }

    .zonas2 span h4{
        margin-left:5px;
    }

    .zonaMap{
        margin-top:20px;
        min-height: 500px;
    }

    /*=================
    == FOOTER MOBILE ==
    =================*/

    footer{
        height: auto;
        min-height: 150px;
        font-family: 'QuickBold';
    }

    .textoFoot{
        text-align: center;
    }

    .footDesk{
        display:none;
    }

    .footMob{
        display:flex;
    }

    

}