@import url('https://fonts.googleapis.com/css2?family=National+Park:wght@200..800&display=swap');

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    transition: all .2s linear;
    border: none;
    outline: none;
    text-decoration: none;
    list-style: none;
    font-family: "National Park", sans-serif;
}


:root{
    --black:#17202a;
    --textBlack:#273746;
    --text:#566573;
    --softWhite:#f9f9f9;
    --white:#fff;

}

html{
    scroll-behavior: smooth;
}



section{
    padding: 2rem 6%;
    min-height: 50vh;
}

html{
    overflow-x: hidden;
}

/*Banner Inicio Empieza*/
.bannerStart{
    position: fixed;
    top: 0;
    left: 0;
    min-height: 100vh;
    background: url(../images/events/backgroundenvasadas.png) no-repeat;
    background-position: center;
    background-size: cover;
    height: 100%;
    width: 100%;
    flex-direction: column;
    display: flex;
    z-index: 5;
}

.bannerStart.active{
    top: -150%;
}

.bannerStart .logoCont .home{
    padding: 5px 2rem;
    border-radius: 2px;
    background: orangered;
    color: var(--white);
    font-size: 1.2rem;
    margin-bottom: 1rem;
    font-weight: 600;
}
.bannerStart .logoCont .home:hover{
    background: orange;
    color: var(--white);
}



.bannerStart .logoCont{
    display: flex;
    justify-content: center;
    flex-direction: column;
    background: rgba(0,0,0, .5);
    backdrop-filter: blur(7px);
    border-bottom: 3px solid #3c3c3c;
    box-shadow: 0 3px 5px rgba(0,0,0, .8);
    width: 100%;
    padding: .5rem;
}
.bannerStart .logoCont img{
    width: 4rem;
}
.bannerStart .logoCont a{
    color: orange;
    font-size:clamp(.8rem, 3vw, 1rem);
    font-weight: 100;
    width: max-content;

}

.bannerStart .logoCont a:hover{
    color: orangered;
}

.bannerStart .textCont{
    padding: 1rem 2%;
    font-weight: lighter;
}

.bannerStart .textCont p{
    color: var(--white);
    font-size: clamp(1rem, 3vw, 1.5rem);
    text-shadow: -3px 3px 3px rgba(0,0,0, .8);
    backdrop-filter: blur(3px);
    padding: .5rem;
    outline: 2px solid rgb(61, 61, 61);
    box-shadow: -5px 5px 7px rgba(0,0,0, .5);
}

.bannerStart .flexCont{
    padding: 1rem 2%;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.bannerStart .flexCont a{
    flex: 1 1 10rem;
    height: 10rem;
    box-shadow: -3px 3px 5px #000;
    border-radius: 3px;
    width: 100%;
    display: flex;
    border: 1px solid gray;
}

.bannerStart .flexCont a span{
    padding: .5rem;
    background: rgba(0,0,0, .8);
    color: white;
    height: max-content;
    width: 100%;
    box-shadow: 0 5px 7px #000;
    border-bottom: 2px solid yellowgreen;
}

.bannerStart .flexCont a:nth-child(1){
    background: url(../images/events/event001.jpg) no-repeat;
    background-position: center;
    background-size: cover;
}

.bannerStart .flexCont a:nth-child(2){
    background: url(../images/events/event004.jpg) no-repeat;
    background-position: top;
    background-size: cover;
}
.bannerStart .flexCont a:nth-child(3){
    background: url(../images/events/event002.jpg) no-repeat;
    background-position: center;
    background-size: cover;
}
.bannerStart .flexCont a:nth-child(4){
    background: url(../images/events/event005.jpg) no-repeat;
    background-position: top;
    background-size: cover;
}
.bannerStart .flexCont a:nth-child(5){
    background: url(../images/events/event006.jpg) no-repeat;
    background-position: top;
    background-size: cover;
}


.bannerStart .btnCont{
    width: 100%;
    text-align: center;
    margin-top: auto;
    margin-bottom: 2rem;
    padding: 0 5%;
}

.bannerStart .btnCont .btn{
    padding: .3rem 5rem;
    cursor: pointer;
    background: orangered;
    color: #fff;
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    border-radius: 50px;
    border: 2px solid var(--white);
}

.bannerStart .btnCont .btn:hover{
   background: rgb(255, 111, 0); 
}

/*Banner Inicio Termina*/



/*Menú Rápido Empieza*/
.quickMenu{
    position: fixed;
    top: 0;
    left: -100%;
    height: 100%;
    width: 100%;
    background: var(--textBlack);
    border: 1px solid var(--text);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    z-index: 1;
}

.quickMenu.active{
    left:0;
}

.quickMenu .arrowContainer{
    position: relative;
    height: 3rem;
    width: 100%;
    margin-bottom: 2rem;
}
.quickMenu .arrowContainer .sideA{
    position: absolute;
    top: 2rem;
    left: 0;
    color: var(--text);
    padding: 3px;
    border-radius: 0 3px 3px 0;
    border: 1px solid var(--text);
    height: 100%;
    width: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: var(--black);
    box-shadow: -3px 3px 5px rgba(0,0,0, .5);
}
.quickMenu .arrowContainer .sideB{
    position: absolute;
    top: 0;
    left: 100%;
    color: var(--white);
    padding: 3px;
    border-radius: 0 3px 3px 0;
    border: 1px solid var(--text);
    height: 100%;
    width: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: var(--black);
    box-shadow: 3px 3px 5px rgba(0,0,0, .5);
}

.quickMenu .linksContainer{
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    padding: .5rem;
    height: 100%;
}

.quickMenu .linksContainer a{
    font-size: clamp(1rem, 3vw, 1.5rem);
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 1rem;
    color: #b3b3b3;
}
.quickMenu .linksContainer a:hover{
    color: var(--softWhite);
}

.quickMenu .linksContainer a:nth-child(1){
    width: max-content;
    padding: .3rem 1rem;
    background: orangered;
    border-radius: 3px;
    color: var(--white);
    height: max-content;
}

/*Menú Rápido Termina*/

/*Banner Inicio Empieza*/
.start{
    background: var(--black);
}
.start .banner{
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.start .banner img{
    width: 35%;
}

.start .banner p{
    flex:1 1 35rem;
    width: 50%;
    color: var(--white);
    font-size: clamp(.9rem, 3vw, 1.2rem);
}

.start .banner p strong{
    color: orangered;
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    font-weight: 300;
}

.start .banner p i{
    color: yellowgreen;
}

.start .banner p a{
    color: orange;
}

.start .banner p a:hover{
    color: orangered;
}
/*Banner Inicio Termina*/

/*Sección Enventos Empieza*/
.allEvents{
    background: var(--softWhite);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.allEvents .event{
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
    overflow: hidden;
    border-radius: 7px;
    box-shadow: 0 3px 7px rgba(0,0,0, .5);
    cursor: default;
    background: var(--white);
}

.allEvents h1{
    font-size: clamp(rem, 3vw, 2rem);
    padding: .3rem 1rem;
    background: orangered;
    text-align: center;
    box-shadow: 0 -3px 5px rgba(0,0,0);
    font-weight: 500;
    color: var(--white);
    width: 15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 3px solid var(--textBlack);
}


.allEvents .textCont{
    flex: 1 1 20rem;
    padding: 1rem;
    
}



.allEvents .textCont p{
    padding: .5rem;
    color: var(--text);
    font-size: clamp(1.1rem, 3vw, 1.3rem);
    margin-bottom: 2rem;
}

.allEvents .textCont ul li{
    color: var(--text);
    margin-bottom: 1rem;
    line-height: 1.7rem;
}

.allEvents .textCont ul li strong{
    list-style: disc;
    margin-bottom: 1rem;
    font-size: clamp(1rem, 3vw, 1.5rem);
    color:var(--white);
    padding: .1rem 1rem;
    background: var(--text);
    font-weight: 200;
    border-radius: 20px 5px 20px 5px;
    border-right:2px solid yellowgreen ;
    border-bottom:2px solid yellowgreen ;
}

.allEvents .enlace{
    color: var(--text);
    font-size: clamp(1rem, 3vw, 1.2rem);
    padding: .2rem 1rem;
    background: var(--softWhite);
    border-radius: 0 5px 0 5px;
    height: max-content;
    box-shadow: 0 0 3px rgba(0,0,0, .5);
    background: rgb(103, 129, 133);
    color: var(--white);
}

.allEvents .enlace:hover{
    background: orangered;
}
/*Sección Enventos Termina*/









@media (max-width:1200px){
    .bannerStart .logoCont img{
        width: 3rem;
    }


    .bannerStart .flexCont a{
        flex: 1 1 8rem;
        height: 7rem;
    }




    
}

@media (max-width:770px){
    .bannerStart .btnCont .btn{
        width: 100%;
    }
}