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

.selector-for-some-widget {
    box-sizing: content-box;
}

.rounded-3 {
    border-radius: 30px !important;
}

h1 {
    font-family: 'Comfortaa', cursive;
    font-style: normal;
    font-weight: bold;
    font-size: 3rem;
    line-height: 54px;
    margin: 2vw 0;
}

h2 {
    font-family: 'Comfortaa', cursive;
    font-style: normal;
    font-weight: bold;
    font-size: 2rem;
    line-height: 54px;
    letter-spacing: -0.02em;
}


h3 {
    font-family: 'Comfortaa', cursive;
    font-style: normal;
    font-weight: bolder;
    font-size: 1.3rem;

}

h4 {
    font-family: 'Comfortaa', cursive;
    font-style: normal;
    font-weight: normal;
    font-size: 1.3rem;
}

body {
    font-family: 'Raleway', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 150%;
}

.small {
    font-family: 'Raleway', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 1rem;
    line-height: 150%;
}

.h4 {
    font-family: 'Comfortaa', cursive;
    font-style: normal;
    font-weight: bolder;
    font-size: 1.5rem;
}

.thin {
    font-weight: normal;
}

.parigicolor {
    color: #DF375B;
    font-weight: bold;
}

.parigicolorlight {
    color: #DF375B;
    font-weight: normal;
}

.zafferanocolor {
    color: #F5C042;
    font-weight: bold;
}

.zafferano {
    background-color: #F5C042;
}

.smeraldocolor {
    color: #298D9F;
    font-weight: bold;
}

.lightcolor {
    color: #F3F9FA;
    font-weight: bold;
}

.darkcolor {
    color: #333C3F;
}

.subtitleBold {
    font-family: Raleway, sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 24px;
    line-height: 28px;
}

.text24 {
    font-size: 18px;
    font-weight: normal;
    line-height: 28px;
}

@media only screen and (min-width: 720px) {
    .text24 {
        font-size: 24px;
    }
}

.btn-primary:hover {
    background: #F9DCE2;
    border: 1px solid #DF375B;
    box-shadow: 0 6px 16px rgba(223, 55, 91, 0.5);
    color: #DF375B;
}

.btn-light {
    background-color: #F5C042;
    font-weight: bold;
}

.btnYellow {
    border-radius: 40px;
    box-shadow: 0 5px 15px rgba(250, 182, 13, 0.5);
    background-color: #F5C042;
    font-family: Comfortaa, cursive;
    font-style: normal;
    font-size: 18px;
    line-height: 22px;
    color: #F3F9FA;
    position: relative;
    z-index: 100; /* in maniera tale che i div sottostanti non coprano la sua ombra*/
}

.btnYellow:hover {
    background: #FFF8E7;
    border: 1px solid #F5C042;
    box-shadow: 0 6px 16px rgba(250, 182, 13, 0.5);
    color: #F5C042;
}

.btnBlu {
    border-radius: 40px;
    box-shadow: 0 6px 16px rgba(41, 141, 159, 0.5);
    background-color: #298D9F;
    font-family: Comfortaa, cursive;
    font-style: normal;
    font-size: 18px;
    color: #F3F9FA;
    position: relative;
    z-index: 100; /* in maniera tale che i div sottostanti non coprano la sua ombra*/
}

.btnBlu:hover {
    background: #BED9DE;
    border: 1px solid #298D9F;
    box-shadow: 0 6px 16px rgba(41, 141, 159, 0.5);
    color: #298D9F;
}

.btnFucsia {
    border-radius: 40px;
    background: #DF375B;
    padding: 5px 30px;
    box-shadow: 0 6px 16px rgba(223, 55, 91, 0.5);
    font-family: Comfortaa, cursive;
    font-style: normal;
    font-size: 18px;
    line-height: 22px;
    color: #F3F9FA;
    position: relative;
    z-index: 100; /* in maniera tale che i div sottostanti non coprano la sua ombra*/
}

.btnFucsia:hover {
    background: #F9DCE2;
    border: 1px solid #DF375B;
    box-shadow: 0 6px 16px rgba(223, 55, 91, 0.5);
    color: #DF375B;
}

.navbar-light .navbar-nav .nav-link {
    font-weight: 600;
    color: #333C3F;
}

.navbar-light .navbar-nav .nav-link.active {
    color: rgb(223 55 91) !important;
    text-decoration-line: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 0.15em;
    font-weight: bolder;
}

.navbar-light .navbar-nav .nav-link:hover {
    color: #DF375B;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 0.15em;

}

.nav-link {
    margin-right: 10px;
}

.dropdown-item {
    color: #333C3F;
}

.dropdown-item:hover {
    color: #DF375B;
    text-decoration: none;
    background-color: #FDF3F5;
}

.nextphoto {
    content: url("../images/Icons/nextphoto.svg");
}

.prevphoto {
    content: url("../images/Icons/prevphoto.svg");
}

.whereblu::before {
    content: url("../images/Eventi/position.svg");
    height: 30px;
    margin-right: 10px;
}

.whereyellow::before {
    content: url("../images/Icons/positionyellow.svg");
    height: 30px;
    margin-right: 10px;
}

.whereFucsia::before {
    content: url("../images/Icons/posizionefucsia.svg");
    height: 30px;
    margin-right: 10px;
}

.calendaryellow::before {
    content: url("../images/Icons/calendaryellow.svg");
    height: 30px;
    margin-right: 10px;
}

.calendarfucsia::before {
    content: url("../images/Icons/calnderiofucsia.svg");
    height: 30px;
    margin-right: 10px;
}

.calendarblu::before {
    content: url("../images/Icons/calendarblu.svg");
    height: 30px;
    margin-right: 10px;
}

.splide__pagination__page.is-active {
    background: #DF375B;
}

.splide__pagination__page {
    background: grey;
}

/* icona calendario blu n1/2____________________________________*/
.when::before {
    content: url("../images/Eventi/calendar.svg");
    height: 30px;
    margin-right: 10px;

}

.emailYellow_icon, .phoneYellow_icon {
    height: 4vh;
}

.positionimpress::before {
    content: url("../images/Icons/Vector.svg");
    height: 30px;
    margin-right: 10px;
}

.calendarimpress::before {
    content: url("../images/Icons/calendarioarancio.svg");
    height: 30px;
    margin-right: 10px;
}

.positionsurr::before {
    content: url("../images/Icons/posizionesurrealismo.svg");
    height: 30px;
    margin-right: 10px;
}

.calendarsurr::before {
    content: url("../images/Icons/calendariosurrealismo.svg");
    height: 30px;
    margin-right: 10px;
}

.positionstreet::before {
    content: url("../images/Icons/posiztionverde.svg");
    height: 30px;
    margin-right: 10px;
}

.calendarstreet::before {
    content: url("../images/Icons/calendarverde.svg");
    height: 30px;
    margin-right: 10px;
}

.cardShadow {
    border-radius: 40px;
    box-shadow: 0 10px 50px 0 #91A8D533;
    border-style: hidden;
}

/* Home____________________________________________*/
.bgrhome {
    background-image: url("../images/index/onda_home.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    margin-top: 48px;
    height: 750px;
    color: #DF375B;
}

/* La città____________________________________________*/

.statue {
    position: relative;
    z-index: 0;
    top: 30vh;
    left: 0;
    width: 50%;
}

.bgrCity {
    background-image: url("../images/LaCitta/header_LaCitta1.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    margin-top: 48px;
    height: 500px;
}

.lineleft {
    margin-top: -100px;
    z-index: 1;
}

@media only screen and (min-width: 1200px) {
    .lineleft {
        margin-top: -150px;
    }
}

.zindex1 {
    z-index: 2;
}

.lineleft2 {
    margin-top: -50px;
    z-index: 1;
}

.cardcity {
    background-color: #FCFCFC;
    border-radius: 40px;
    margin-top: -80px;
    box-shadow: 0 10px 50px 0 #91A8D533;
}

.noborder {
    border-style: none;
}

@media screen and (max-width: 320px) {
    .statue {
        display: none;
    }
}

/* Vivere la città____________________________________________*/
.bgrVivere {
    background: url("../images/ViverelaCitta/Header_VivereLaCitta1.png") no-repeat bottom;
    background-size: cover;
    margin-top: 48px;
    height: 500px;
}

/* Occasioni____________________________________________*/
.bgrOccasioni {
    background: url("../images/occasioni/Header_occasioni.png") no-repeat bottom;
    background-size: cover;
    margin-top: 48px;
    height: 670px;
}

.accordionstyleBlu {
    color: #298D9F;
    font-weight: bold;

}

.accordionButton {
    border-style: none;
    background-color: #FFFFFF;

}

.accordionHeader {
    border-style: none;
    background: #FFFFFF;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.icontitle::after {
    content: url("../images/Icons/frecciaaccordion.svg");
}

.icontitle.active::after {
    content: url("../images/Icons/frecciasuaccordion.svg");
}

.accordionBody {
    border-style: none;
    background-color: #FFFFFF;
}

.btnoffer {
    background: #FFFFFF;
    border: 2px solid #298D9F;
    box-sizing: border-box;
    border-radius: 40px;
    font-family: Comfortaa, cursive;
    font-style: normal;
    font-size: 16px;
}

.btnoffer:focus {
    border: 2px solid #298D9F;
    box-shadow: 0 6px 16px rgba(41, 141, 159, 0.5);
}

@media only screen and (max-width: 320px ) {
    .splide__arrow--next {
        right: -0.5em;
    }

    .splide__arrow--prev {
        left: -0.5em;
    }
}

/* Didattica____________________________________________*/

@media screen and (max-width: 320px) {
    .accordiontitle {
        font-size: 20px !important;
    }
}

.bgrDidattica {
    background: url("../images/didattica/SFONDO_DIDATTICA.png") no-repeat bottom;
    background-size: cover;
    margin-top: 48px;
    height: 600px;
}

.accordionstyleFucsia {
    color: #DF375B;
    font-weight: bold;
}


.icontitle2::after {
    content: url("../images/Icons/frecciafucsia2.svg");
}

.icontitle2.active::after {
    content: url("../images/Icons/frecciasu2.svg");
}

/* Come raggiungerci____________________________________________*/


.line-height {
    line-height: initial;
}

.bgrRaggiungere {
    background: url("../images/ComeRaggiungerci/header_COMERAGGIUNGERCI1.png") no-repeat bottom;
    background-size: cover;
    margin-top: 48px;
    height: 617px;
}

.googlemap {
    width: 75%;
}

.bordermaps {
    border-radius: 40px;
    box-shadow: 0 4px 30px 0 #00000033;
}

/* Eventi____________________________________________*/
.bgrEventi {
    background: url("../images/Eventi/Header_Eventi1.png") no-repeat bottom;
    background-size: cover;
    margin-top: 48px;
    height: 617px;
}

.timeline {
    position: absolute;
    z-index: 1000;
    right: 50vw;
}

.fit-content-height {
    height: fit-content
}

/* Quartieri____________________________________________*/

/* impressionismo*/
.impressionismo {
    background-image: url("../images/Quartieri/header_impressionismo.png");
    background-size: cover;
    height: 80vh;
    position: relative;
    z-index: -10;
}

.gradient-impressionismo {
    background: rgb(255, 255, 255);
    background: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0) 77%, rgba(230, 103, 71, 1) 94%);
    background: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0) 77%, rgba(230, 103, 71, 1) 94%);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 77%, rgba(230, 103, 71, 1) 94%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#e66747", GradientType=1);
    height: inherit;
}

.impressionismowawe {
    height: 85vh;
    background-size: cover;
}

.section-impressionismo, .section-street-art, .section-surrealismo {
    position: relative;
}

.section-impressionismo .container-fluid {
    background: linear-gradient(
            180deg, rgb(230 103 71) 0%, rgb(241, 154, 94) 100%);
}

.child {
    position: absolute;
    right: 0;
    top: 70vh;
    height: 70vh;
    z-index: 100;
    transform: translateY(-90vh);
}

@media only screen and (max-width: 1000px) {
    .child {
        top: 60vh;
        height: 60vh;
    }
}

@media only screen and (max-width: 600px) {
    .child, .child_surrealismo {
        display: none;
    }
}

.wave-impressionismo, .wave-surrealismo, .wave-street-art {
    position: absolute;
    top: 0;

}

.wave, .img-fluid {
    width: 100%;
}

.text-orange {
    color: #E66848;
}

.wrap-surrealismo {
    background-color: #E66848;
}

/* surrealismo*/

.section-surrealismo {
    position: relative;
}

.surrealismo {
    background-image: url("../images/Quartieri/header_surrealismo.png");
    background-size: cover;
    height: 80vh;
    position: relative;
    z-index: 0;
}

.surrealism-gradient {
    background: rgb(54, 99, 160);
    background: -moz-linear-gradient(0deg, rgba(54, 99, 160, 1) 0%, rgba(255, 255, 255, 0) 34%);
    background: -webkit-linear-gradient(0deg, rgba(54, 99, 160, 1) 0%, rgba(255, 255, 255, 0) 34%);
    background: linear-gradient(0deg, rgba(54, 99, 160, 1) 0%, rgba(255, 255, 255, 0) 34%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3663a0", endColorstr="#ffffff", GradientType=1);
    height: inherit;
}

.section-surrealismo {
    background-color: #3663a0;
}

.blue-text {
    color: #3663A0;
}

.child_surrealismo {
    position: absolute;
    top: 60vh;
    right: 9vw;
    height: 57vh;
    z-index: 99;
    transform: translateY(-90vh);
}

@media only screen and (max-width: 1200px) {
    .child_surrealismo {
        top: 63vh;
        height: 50vh; /* child si rimpicciolisce leggermente su schermi più piccoli*/
    }
}

.littlewave-surr {
    position: absolute;
    top: 24px;
    left: 0;
    z-index: 100;
}

/*__________ street art__________________*/

.section-street-art {
    background: rgb(102, 123, 40);
    background: -moz-linear-gradient(180deg, rgba(102, 123, 40, 1) 0%, rgba(102, 123, 40, 1) 42%, rgba(150, 158, 64, 1) 88%);
    background: -webkit-linear-gradient(180deg, rgba(102, 123, 40, 1) 0%, rgba(102, 123, 40, 1) 42%, rgba(150, 158, 64, 1) 88%);
    background: linear-gradient(180deg, rgba(102, 123, 40, 1) 0%, rgba(102, 123, 40, 1) 42%, rgba(150, 158, 64, 1) 88%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#667b28", endColorstr="#969e40", GradientType=1);
}

.wave-form {
    position: relative;
    margin-top: -11px;
}

.wawe {
    position: relative;
    top: -1px;
}

.street-art {
    background-image: url("../images/Quartieri/streetart.png");
    background-size: cover;
    height: 100vh;
    position: relative;
}

.street-art-gradient {
    position: relative;
    height: inherit;
    background: rgb(103, 125, 42);
    background: -moz-linear-gradient(0deg, rgba(103, 125, 42, 1) 0%, rgba(255, 255, 255, 0) 34%);
    background: -webkit-linear-gradient(0deg, rgba(103, 125, 42, 1) 0%, rgba(255, 255, 255, 0) 34%);
    background: linear-gradient(0deg, rgba(103, 125, 42, 1) 0%, rgba(255, 255, 255, 0) 34%);
}

p.d-block {
    width: 50vw;
}

.green-text {
    color: #677D2A;
}

@media only screen and (max-width: 1000px) {
    p.d-block {
        width: 90vw;
    }

    p.d-block-tight {
        width: 40vw;
    }

    .street-art {
        background-position: bottom;
        height: 74vh;
    }
}

/*form*______________*/
.form-impressionismo {
    background-image: url("../images/Quartieri/sfondo.png");
    position: relative;
}

.kiss {
    position: absolute;
    top: 2vh;
    right: 3vw;
    height: 150vh;
}

#back-to-top {
    display: inline-block;
    height: 30px;
    width: 30px;
    margin-right: 15px;
}

.text-form {
    position: relative;
    z-index: 1000;
    height: 200px;
}

.form-border {
    border-radius: 40px;
    border: 3px solid;
}

.parigi-border {
    border-color: #DF375B;
}

.yellow-border {
    border-color: #F5C042;
}

.blu-border {
    border-color: #298D9F;
}

.form-impressionismo label {
    margin-left: 20px;
    margin-top: 25px;
    font-weight: bold;
}

.form-impressionismo button {
    border-radius: 40px;
    background-color: #DF375B;
    border-color: #DF375B;
    width: 90px;

}

footer {
    background-color: #DF375B;
    position: relative;
    z-index: 1000;
}

/*____________mobile_______*/
@media only screen and (max-width: 320px) {
    .kiss {
        display: none;
    }

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.5em;
    }

    .wave-formv {
        top: 30px
    }

    p.d-block-tight {
        width: 100vw;
    }

    .littlewave-surr {
        top: 12px;
    }

    .wave {
        position: absolute;
        top: -3px;
    }
}

/* ipad*/
@media only screen and (max-width: 1200px) {

    .wave {
        position: absolute;
        top: -4px;
    }

    .kiss {
        height: 32vh;
        top: -22px;
        right: 4px;
    }

    .child {
        top: 812px;
        height: 33vh;
    }

    .child_surrealismo {
        height: 40vh;
        top: 698px;

    }
}


/* ________________pagina eventi_______________*/
.margin-left-h3 {
    margin-left: 9vw;
}

.margin-left-timeline {
    margin-left: -1vw;
}

.margin-right-timeline {
    margin-right: -1vw;
}

.fit-content {
    width: fit-content;
}

.icon {
    max-width: 35px;
}

/*______________________________________________desktop*/
@media screen and (min-width: 1000px) {
    .left-row {
        position: relative;
        left: 7vw;
        max-width: 43.5vw;
    }

    .w40vw {
        max-width: 43.5vw;
    }
}

/*__________________________________tablet*/
@media screen and (min-width: 768px) and (max-width: 1000px) {

    .column::before {
        left: 8vw;
    }

    .title {
        margin-left: 14vw;
        text-align: left;
    }


    .margin-left-timeline {
        margin-left: 4.5vw;
    }

    .margin-right-timeline {
        margin-left: 4.5vw;
    }

    .months-span-column {
        margin-right: 42vw;
    }
}

/* _________________________________________mobile*/
@media screen and (max-width: 320px) {
    .column2::before {
        content: url("../images/Eventi/line.svg");
        display: block;
        position: absolute;
        z-index: -100;
        top: -700px;
        left: 8vw;
    }

    .column::before {
        left: 8vw;
    }

    .title {
        margin-left: 12vw;
        text-align: left;
    }

}

/*-----*/

.column::before {
    content: url("../images/Eventi/line.svg");
    display: block;
    position: absolute;
    z-index: -100;
    top: 17px;
}

.timeline-element-r {
    position: relative;
    left: -1vw;
    top: 40px;
    z-index: 1000;
}

.timeline-element-l {
    position: relative;
    transform: translateX(36.1vw);
}

.event {
    max-width: 75%;
}

.months-span {
    display: inline-block;
    font-family: 'Comfortaa', cursive;
    width: 170px;
    text-align: center;
}

.january, .april {
    background-color: #298D9F;
}

.february {
    background-color: #DF375B;
}


.march {
    background-color: #F5C042;
}

.event-title-r {
    margin-right: 9vw;
    margin-bottom: 3vh;
    text-align: end;
}

.event-title-l {
    margin-left: 9vw;
    margin-bottom: 3vh;
    text-align: start;
}


.when::before {
    content: url("../images/Eventi/calendar.svg");
    height: 30px;
    margin-right: 10px;

}

.where::before {
    content: url("../images/Eventi/position.svg");
    height: 30px;
    margin-right: 10px;
}

.splide__arrow {
    background-color: #F5C042;
}

.prevphoto {
    height: 45px;
    margin-left: -60px;
}

.nextphoto {
    height: 45px;
    margin-right: -50px;
}

@media only screen and (min-width: 768px) {
    .prevphoto {
        margin-left: -160px;
    }

    .nextphoto {

        margin-right: -150px;
    }
}