/* Eventos */

/*navbar*/

.itemHidden{
    display: none;
}

#actividades{
    display: flex;
    flex-direction: column;
}

.actividadesHidden{
    position: absolute;
    width: auto;
    background: #98795A;
    margin: 5px 0px 0px 0px;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px;
    top: 60px;
}

.triangle{
    width: 5%;
    border-right: 10px solid transparent;
    border-top: 10px solid transparent;
    border-left: 10px solid transparent;
    border-bottom: 10px solid #98795A;
    position: absolute;
    top: -20px;
}

.actividadesHidden a{
    color: #fff;
    font-size: 0.9rem;
    font-family: 'Open Sans', sans-serif;
    text-align: center;
    margin: 10px;
}

.actividadesHidden a:hover{
    color: #000;
    transition: all 300ms ease-in-out;
}

.line{
    width: 85%;
    height: 1px;
    background: #fff;
    align-self: center;
}

#actividades:hover .actividadesHidden{
    display: flex;
    transition: all 300ms ease-in-out;
}

#eventsP1{
    font-size: 1.7rem;   
}

#eventiP1{
    font-size: 1.7rem;
}

/* Cards */

.cardsSection{
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin: 0px 0px 80px 0px;
    padding: 0px 3% 0 3%;
}

.card{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 10px;
    transition: 200ms;
    padding: 0px 0px 30px 0px;
    overflow: hidden;
    z-index: 1;
}

.card:hover{
    box-shadow: -1px 1px 5px 8px rgba(0,0,0,0.14);
    -webkit-box-shadow: -1px 1px 5px 8px rgba(0,0,0,0.14);
    -moz-box-shadow: -1px 1px 5px 8px rgba(0,0,0,0.14);
    transition: 200ms;
}

.imgCardBox{
    width: 83%;
    overflow: hidden;
}

.cardImg{
    width: 95%;
    border-top: 5px solid #c19b76;
    margin: 10px 8px 8px 8px;
    transition: 0.5s all ease-in-out;; 
    overflow: hidden;
}

#card1:hover .card-btn1{
    opacity: 1;
}

#card2:hover .card-btn2{
    opacity: 1;
}

#card3:hover .card-btn1{
    opacity: 1;
}

#card3:hover .card-btn2{
    opacity: 1;
}

.titleCard{
    font-size: 1.5vw;
    width: 80%;
}

.card-btn1{
    opacity: 0;
    color: #fff;
    background: #c19b76;
    padding: 5px 30px 5px 30px;
    margin: 10px 0px 10px 0px;
    font-size: 0.8vw;
}

.card-btn2{
    opacity: 0;
    color: #fff;
    background: #000;
    padding: 5px 30px 5px 30px;
    margin: 10px 0px 10px 0px;
    font-size: 0.8vw;
}

.fa-arrow-down{
    margin: 0px 5px 0px 0px;
}

/* Experiencias */


.cardsSectionEv1{
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin: 0px 0px 80px 0px;
}

.cardsSectionEv2{
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin: 0px 0px 80px 0px;
}

.cardsSectionEv1 .card{
    width: 40%;
}

.cardsSectionEv2 .card{
    width: 40%;
}

#card2:hover .card-btn1{
    opacity: 1;
}

#card4:hover .card-btn1{
    opacity: 1;
}

#card5:hover .card-btn1{
    opacity: 1;
}

#card6:hover .card-btn1{
    opacity: 1;
}

.cardsSectionEv1 .card:hover .cardImg{
    transform: scale(1.1);
    overflow: hidden;
}

.cardsSectionEv2 .card:hover .cardImg{
    transform: scale(1.1);
    overflow: hidden;
}

/* Gastronomia toscana */

#astronomicP1{
    font-size: 1.4vw;
}

.eventDescription{
    width: 100%;
    display: flex;
    align-items: center;
    font-family: 'Crimson Text', serif;
    background: #fff;
}

.eventDescription .descriptionBox{
    width: 70%;
    margin: 30px 0px 30px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.descriptionBox p{
    width: 50%;
    height: 100%;
    font-size: 1.5vw;
}

.eventDescription .infoBox{
    width: 20%;
    margin: 10px;
    background: #232323;
    border-top: 5px solid #c19b76;
    color: #fff;
    position: relative;
    bottom: 50px;
}

.infoBox .box1{
    display: flex;
    margin: 15px 30px 15px 30px;
}

.infoBox .box1 img{
    width: 20%;
    margin: 0px 5px 0px 5px;
}

.infoBox .box1 div{
    margin: 10px;
}

.border-bottom{
    border-bottom: 1px solid #fff;
    padding: 0px 0px 5px 0px;
}

.infoBox .box1 div p{
    margin: 0px;
}

div .card-btn1{
    opacity: 1;
}

/* spacing section */

.spacingSection{
    width: 100%;
    height: 240px;
    display: flex;
}

.spacingSection .box1{
    width: 25%;
    background: #474747;
}

.spacingSection .box1 img{
    width: 100%;
    height: 100%;
}

.spacingSection .box2{
    width: 25%;
    background: #9B9B9B;
}

.spacingSection .box2 img{
    width: 100%;
    height: 100%;
}

.spacingSectionCena{
    width: 100%;
    height: 240px;
    display: flex;
}

.spacingSectionCena .box1{
    width: 33%;
}

.spacingSectionCena .box2{
    width: 34%;
}

.spacingSectionCena .box1 img{
    width: 100%;
    height: 100%;
}

.spacingSectionCena .box2 img{
    width: 100%;
    height: 100%;
}

/**/

.spacingSectionPasta{
    width: 100%;
    height: 240px;
    display: flex;
}

.spacingSectionPasta .box1{
    width: 33%;
    background: #7b7b7b;
}

.spacingSectionPasta .box2{
    width: 34%;
    background: #333333;
}

.spacingSectionPasta .box1 img{
    width: 100%;
    height: 100%;
}

.spacingSectionPasta .box2 img{
    width: 100%;
    height: 100%;
    background: #333333;
}

/* Exp incluye section */

.exp-incluye-section{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    padding: 5% 0% 5% 0;
    background: #EEEEEE;
    margin: 0 0 5% 0;
}

.exp-title{
    font-size: 2vw;
    font-family: 'Crimson Text', serif;
    margin: 0px;
    text-align: start;
}

.exp-box1{
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.exp-box2{
    width: 50%;
    display: flex;
    flex-direction: column;
    border-left: 3px solid #c19b76;
    margin: 10px 0px 10px 0px;
}

.exp-box2 p{
    width: 60%;
    margin: 5px 0px 5px 5%;
}

/* ver mas exp */

.ver-mas-section{
    display: grid; 
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
    height: 100%;
    margin: 0 10% 5% 10%;
}

.ver-mas-title{
    font-size: 2.5vw;
    font-family: 'Crimson Text', serif;
    text-align: center;
    margin: 0px 0px 30px 0px;
}

.ver-mas{
    color: #000;
    margin: 10px;
}

.ver-mas-card{
    padding: 0px;
    margin: 0px;
    height: 80%;
}

.ver-mas-card img{
    width: 100%;
    height: 100%;
    border-top: 5px solid #c19b76;
}

.ver-mas-text{
    font-size: 1.5vw;
    margin: 10px 0px 0px 0px;
}

/* Footer */

.footerIcon{
    color: #fff;
    margin: 2%;
    font-size: 1.8vw;
}

.footerIcon:hover{
    color: #a2784f;
}

.newsletterBox{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    font-family: 'Open Sans', sans-serif;
}

.newsletterInput{
    background: #000;
    color: #fff;
    border: none;
    padding: 3%;
    font-size: 0.9vw;
}

.newsletterInput::placeholder{
    color: #fff;
}

.newsletterSubmit{
    background: #a2784f;
    color: #fff;
    border: none;
    padding: 3%;
    font-size: 0.9vw;
}

.newsletterSubmit:hover{
    
}

/* Responsive */

@media screen and (max-width: 992px) {
    
    /* navbar */
    
    .itemHidden{
        display: block;
    }
    
    #actividades{
        display: none;
    }
    
    /* Eventos */
    
    .cardsSection{
        flex-direction: column;    
        align-items: center;
    }
    
    .cardImg{
        width: 95%;
    }
    
    .titleCard{
        font-size: 5vw;
    }
    
    .card-btn1{
        opacity: 1;
        font-size: 3.5vw;
        margin: 35px 0px 0px 0px;
    }
    
    .card-btn2{
        opacity: 1;
        font-size: 3.5vw;
    }
    
    /* Experiencias */
    
    .cardsSectionEv1{
        flex-direction: column;
        align-items: center;
    }
    
    .cardsSectionEv1 .card{
        width: 90%;
    }
    
    .cardsSectionEv2{
        flex-direction: column;
        align-items: center;
    }
    
    .cardsSectionEv2 .card{
        width: 90%;
    }
    
    .imgCardBox{
        width: 90%;
    }
    
    .cardsSectionEv1 .card{
        margin: 0px 0px 50px 0px;
    }
    
    .card span{
        font-size: 4vw;
    }
    
    /* */
    
    .eventDescription{
        flex-direction: column;   
    }
    
    .eventDescription .descriptionBox{
        width: 85%;
        margin: 65px 0px 80px 0px;
    }
    
    .descriptionBox p{
        width: 100%;
        text-align: center;
        font-size: 5vw;
    }
    
    .eventDescription .infoBox{
        width: auto;
        
    }
    
    .infoBox .box1 div p{
        font-size: 5vw;
    }
    
    /* Spacing */
    
    .spacingSection{
        height: auto;
        display: grid;
        grid-template-rows: 1fr;
        grid-template-columns: 1fr 1fr;
    }
    
    .spacingSection .box1{
        width: 100%;
        height: 240px;
    }
    
    .spacingSection .box2{
        width: 100%;
        height: 240px;
    }
    
    .spacingSectionCena{
        flex-direction: column;
        height: auto;
    }
    
    .spacingSectionCena .box1{
        width:100%;
    }
    
    .spacingSectionCena .box2{
        width:100%;
    }
    
    
    .exp-incluye-section{
        flex-direction: column;
        padding: 8% 0% 5% 0;
    }
    
    .exp-title{
        font-size: 6vw;
        text-align: center;
    }
    
    .exp-box2{
        width: 80%;
        align-items: center;
        border-left: none;
        border-top: 3px solid #c19b76;
    }
    
    .exp-box2 p{
        font-size: 4.5vw;
        margin: 70px 0 0 0;
        width: 100%;
        text-align: center;
    }
    
    .ver-mas-title{
        font-size: 6vw;
        margin: 80px 0px 70px 0px;
    }
    
    .ver-mas-section{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .ver-mas-card{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .ver-mas-card img{
        width: 100%;
    }
    
    .ver-mas-text{
        font-size: 4.5vw;
        margin: 10px 0px 50px 0px;
    }
    
    /* footer */
    
    .footerIcon{
        font-size: 6vw;
    }
    
    .newsletterBox{
        justify-content: center;
    }
    
    .newsletterInput{
        font-size: 3vw;
    }
    
    .newsletterSubmit{
        font-size: 3vw;
    }
    
}