/* Co zazijes v2 */

.hero-background{

    height: 70vh;

    width: 100%;

    position: relative;

}

.hero-background video{

    width: 100%;

    height: 70vh;

    object-fit: cover;

}

.hero-background .hero-info-holder{

    background-color: #22212A;

    border-radius: 50px;

    position: absolute;

    width: 993px;

    top: 2rem;

    padding: 1rem 5rem;

    left: calc(50vw - (993px / 2));

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.hero-background .hero-divider{

    width: 58px;

    height: 3px;

    background-color: #FF9B70;

}

.hero-background .hero-info-holder .hero-info{

    font-size: 1.5rem;

    color: white;

    font-family: "Acorn";

}

.orange-wave,

.logo-hero,

.vica-hero{

    position: absolute;

}

.orange-wave{

    bottom: -5rem;

    left: 0;

    width: 100%;

}

.logo-hero{

    bottom: 10rem;

    width: 60vw;

    left: calc(50vw - 30vw);

}

.vica-hero{

    bottom: 0;

    width: 35vw;

    left: calc(50vw - 17.5vw);

}

.what-to-expect{

    display: flex;

    flex-direction: column;

    gap: 2rem;

    background-color: #000000;

    padding: 5rem 0;

}

.what-to-expect-content{

    display: flex;

    flex-direction: column;

    align-items: center;

    max-width: 993px;

    margin: auto;

    width: 100%;

}

.what-to-expect h1{

    display: flex;

    gap: 1rem;

    font-size: 3rem;

    align-items: center;

    justify-content: center;

    color: white;

    font-family: "Acorn";

    text-align: center;

    text-transform: uppercase;

    margin-bottom: 3rem;

}

.what-to-expect h1 .divider-wide{

    width: 160px;

    height: 5px;

    background-color: #FF9B70;

}

.what-to-expect-grid{

    display: grid;

    width: 100%;

    grid-template-columns: repeat(3, 1fr);

    gap: 0;

}

.what-to-expect-grid .element{

    border-radius: 68px;

}

.what-to-expect-grid .element.text{

    border: 1px solid white;

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    align-items: center;

    line-height: 1.0;

    font-size: 1.25rem;

    font-family: "Lufga-Bold";

    color: white;

    text-transform: uppercase;

    padding: 7rem 4rem;

    text-align: center;

}

.what-to-expect-grid .element.text .divider{

    width: 40px;

    height: 2px;

    display: block;

    background-color: #FF9B70;

    margin: 0 0.5rem;

}.what-to-expect-grid .element.text .languages{

    display: flex;

    align-items: center;

}

.what-to-expect-grid .element.text.column{

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    font-size: 3rem;

    padding: 0rem 4rem;

}

.what-to-expect-grid .element.text .highlight{

    color: #FF9B70;

}

.what-to-expect-grid .element.text .highlight.small{

    margin-top: 0.5rem;

    color: white;

    font-size: 1rem;

}

.what-to-expect-grid .element.text .highlight.small a{

    color: #FF9B70;

    text-decoration: underline;

}

.what-to-expect-grid .element.text .big{

    font-size: 7rem;

}

.what-to-expect-grid .element img{

    height: 345px;

}

.button-buy{

    display: flex;

    border: 1px solid black;

    border-radius: 100px;

    padding-left: 4rem;

    color: black;

    font-size: 2rem;

    margin-top: 3rem;

    background-color: white;

    text-transform: uppercase;

    font-family: "Lufga-Medium";

    text-decoration: none;

    justify-content: center;

    align-items: center;

}

.button-buy:hover{

    animation: whiteToBlack 0.3s forwards;

}

.button-buy.inverted{

    background-color: white;

    color: black;

}

.button-buy.inverted:hover{

    animation: whiteToBlack 0.3s forwards;

}

.venue-and-accommodation{

    display: flex;

    flex-direction: column;

    background-color: black;

    padding: 6rem 6rem;

}

.venue{

    display: flex;

    max-width: 1047px;

    width: 100%;

    margin: auto;

}

.venue-content{

    display: flex;

    align-items: flex-start;

    gap: 2rem;

    justify-content: center;

    height: 640px;

    width: 60%

}

.venue-content h2{

    font-size: 3rem;

    color: white;

    font-family: "Acorn";

    text-transform: uppercase;

    margin-bottom: 1rem;

}

.venue-content h2::after{

    content: "";

    display: inline-block;

    width: 97px;

    margin-left: 1rem;

    height: 5px;

    position: relative;

    top: -14px;

    background-color: #FF9B70;

}

.orange-border{

    border: 1px solid #FF9B70;

    border-radius: 80px;

    height: 100%;

}

.white-border{

    border: 1px solid white;

    border-radius: 208px;

    padding: 6rem 4rem;

    gap: 3rem;

    display: flex;

    flex-direction: column;

    justify-content: center;

    height: 100%;

    align-items: flex-start;

}

p.ticket-recommendation{

    margin: 0;

    margin-top: 2rem;

    font-family: "Lufga-Semibold";

    font-size: 1.25rem;

}

.white-border h2{

    margin-bottom: 0;

}

.white-border .button-buy{

    border: 1px solid white

}

.white-border .venue-description{

    color: #D0D0D3;

    font-family: "Lufga-Light";

    margin-bottom: 0;

}

.venue-image{

    height: 640px;

    width: 40%

}

.venue-image img{

    border-radius: 80px;

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.accommodation-col{

    display: flex;

    flex-direction: column;

    gap: 1rem;

    background-color: black;

    justify-content: center;

    align-items: center;

    padding: 6rem 4rem;

    max-width: 1047px;

    width: 100%;

    margin: auto;

}

.accommodation-col.has-image {

    padding: 0;

}

.accommodation-col.has-image > img{

    width: 100%;

}

.accommodation-col h2{

    font-size: 3rem;

    color: white;

    font-family: "Acorn";

    text-transform: uppercase;

    margin-bottom: 1rem;

}

.accommodation-col h2::after{

    content: "";

    display: inline-block;

    width: 97px;

    margin-left: 1rem;

    height: 5px;

    position: relative;

    top: -14px;

    background-color: #FF9B70;

}

.accommodation-col h2::before{

    content: "";

    display: inline-block;

    width: 97px;

    margin-right: 1rem;

    height: 5px;

    position: relative;

    top: -14px;

    background-color: #FF9B70;

}

.accommodation-description{

    color: #D0D0D3;

    font-family: "Lufga-Light";

    text-align: center;

}

.floor-one{

    text-align: center;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}

.floor-one .divider{

    width: 97px;

    height: 5px;

    background-color: #FF9B70;

    position: relative;

    top: 20px;

    margin-left: 1.5rem;

    margin-right: 1.5rem;

}

.floor-one h2{

    display: flex;

    font-size: 3rem;

    color: black;

    font-family: "Acorn";

    text-transform: uppercase;

    margin-bottom: 0;

    text-align: center;

    justify-content: center;

}

.floor-switchers{

    display: flex;

    justify-content: center;

    align-items: center;

    max-width: 800px;

    margin: auto;

    width: 100%;

}

.floor-one-switcher{

    width: 100%;

    border: 1px solid black;

    border-radius: 80px;

    text-align: center;

    height: 80px;

    display: flex;

    justify-content: center;

    align-items: center;

    font-family: "Acorn";

    font-size: 1.25rem;

    text-transform: uppercase;

    cursor: pointer;

}

.floor-one-switcher.active{

    background-color: #FF9B70;

    color: white;

    border: 1px solid #FF9B70;

}

.floor-one h3{

    font-size: 2rem;

}

.floor-one-element{

    display: none;

}

.floor-one-element:nth-child(1){

    display: flex;

}

.swiper-memories .swiper-slide{

    border-radius: 40px;

    }

.swiper-memories .swiper-slide img{

    object-fit: cover;

    max-height: 550px;

    height: 100%;

    width: 100%;

    border-radius: 40px;

}

.button-buy .buy-orange-holder{

    height: 64px;

    width: 64px;

    display: flex;

    margin-left: 2rem;

    border: 1px solid #FF9B70;

    border-radius: 60px;

    justify-content: center;

    align-items: center;

}

.button-buy .buy-orange-holder img{

    width: 26px;

}

/* Co zazijes */

.background-image{

    height: 470px;

    width: 100%;

    background-position: center;

    background-size: cover;

    display: flex;

    align-items: center;

}

.background-image p{

    font-family: "Lufga-Regular";

}

.background-image-2{

    height: 700px;

}

.flex-box{

    max-width: 1100px;

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.timeline{

    max-width: 1100px;

    margin: auto;

}

.timeline-content{

    display: flex;

    gap: 2rem;

    flex-direction: column;

    justify-content: center;

    width: 100%;

}

.timeline-switcher{

    width: 100%;

}

.timeline-content > *{

    max-width: 1037px;

    margin: auto;

}

.timeline-holder{

    width: 100%;

    max-width: unset;

    display: flex;

    flex-direction: column;

    gap: 2rem;

    padding: 0 1rem;

    align-items: center;

}

.timeline-holder > h3{

    font-size: 2.5rem;

    font-family: "Acorn";

    color: #22212A;

    text-transform: uppercase;

    font-weight: 400;

}

.timeline-by-stages{

    width: 100%;

    display: flex;

    gap: 2rem;

    justify-content: center;

    align-items: flex-start;

    border-top: 1px solid #FF9B70;

    margin-top: 1rem;

}

.timeline-stage{

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 2rem;

    width: 100%;

    max-width: 345px;

    position: relative;

}

.timeline-stage > .straight-line{

    width: 1px; 

    height: calc(100% - 80px);

    background-color: #FF9B70;

    position: absolute;

    top: 0;

    left: 50%;

}

.timeline-stage > h4{

    font-size: 1.5rem;

    font-family: "Acorn";

    color: #22212A;

    text-transform: uppercase;

    font-weight: 400;

    margin-bottom: 1rem;

    text-align: center;

    height: 80px;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 260px;

    border-radius: 50px;

    border: 1px solid #FF9B70;

    position: relative;

    top: -40px;

    background-color: white;

}

.timeline-artist{

    width: 310px;

    height: 124px;

    background-color: #D9D9D9;

    border-radius: 24px;

    padding: 2rem;

    z-index: 1;

    text-decoration: none;

}

.timeline-artist.active{

    background-color: #22212A;

}

.timeline-artist.placeholder{

    background-color: transparent;

}

.timeline-artist .timeline-artist-name{

    width: 100%;

    text-align: left;

    font-size: 1.25rem;

    font-family: "Acorn";

    text-transform: uppercase;

    color: #444350;

}

.timeline-artist.active .timeline-artist-name{

    color: white

}

.timeline-artist .timeline-artist-time{

    width: 100%;

    display: block;

    text-align: right;

    font-size: 1.25rem;

    font-family: "Acorn";

    color: #22212A;

}

.timeline-artist.active .timeline-artist-time{

    color: #FF9B70

}

.timeline-artist > .timeline-artist-name a{

    text-decoration: none;

    color: white;

}

.faq{

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: white;

    padding: 5rem;

}

.faq-holder{

    display: flex;

    gap: 2rem;

    width: 100%;

    justify-content: space-between;

    align-items: flex-start;

}

.faq-content-holder{

    max-width: 1400px;

    width: 100%;

    padding: 3rem 0;

}

.faq-content-holder h2{

    font-size: 2rem;

    text-align: left;

    color: #FF9B70;

    font-family: "Acorn";

    text-transform: uppercase;

    margin-bottom: 1rem;

}

.faq-content-holder h3{

    font-size: 3rem;

    text-align: left;

    color: #22212A;

    font-family: "Acorn";

    text-transform: uppercase;

    margin-bottom: 1rem;

    width: 450px;

}

.faq-image-holder{

    width: 35%;

}

.faq-image-holder img{

    width: 100%;

}

.faq-content-holder{

    width: 55%;

}



/* Accordion */

.accordion-button{

    font-size: 1.5rem;

    padding: 2rem;

}

.accordion-button:not(.collapsed){

    background-color: #FF9B70;

    color: #22212A

}

.accordion-header{

    margin-bottom: 0!important;

}

.accordion-button:focus{

    box-shadow: none;

}

.accordion-body{

    font-family: "Lufga-Light";

    color: #22212A;

    padding: 1rem 2rem;

}

.accordion-body a{

    color: #FF9B70;

    text-decoration: underline;

}

.map{

    background-color: white;

    padding: 5rem 0;

    display: flex;

    flex-direction: column;

    align-items: center;

}

.map h2{

    font-size: 3rem;

    text-align: center;

    color: #22212A;

    font-family: "Acorn";

    text-transform: uppercase;

    margin-bottom: 1rem;

}

.map img{

    width: 100%;

}

.map-description{

    max-width: 700px;

    width: 100%;

    margin: auto;

    text-align: center;

    margin-bottom: 3rem;

    font-family: "Lufga-Light";

}

.map-image-holder{

    width: 100%;

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

}

.map-legend{

    width: 100%;

    padding: 2rem 6rem;

    display: grid;

    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;

    grid-auto-flow: column;

    font-family: "Lufga-SemiBold";

    font-size: 1.5rem;

    color: white;

    background: rgb(34,33,42);

    background: linear-gradient(90deg, rgba(34,33,42,1) 0%, rgba(53,53,53,1) 100%);

}

.map-legend > .map-legend-item{

    font-size: 1.5rem;

    font-family: "Lufga-SemiBold";

    color: white;

}

.map-legend > .map-legend-item > span{

    color: #FF9B70;

    margin-right: 1rem;

}

.spectra-memories{

    background-color: white;

    padding-bottom: 6rem;

}

.spectra-memories h2{

    font-size: 3rem;

    text-align: center;

    color: #22212A;

    font-family: "Acorn";

    text-transform: uppercase;

    margin-bottom: 3rem;

}
.mapka-arealu h2{

    font-size: 3rem;

    text-align: center;

    color: #22212A;

    font-family: "Acorn";

    text-transform: uppercase;

    margin-bottom: 3rem;

}

.timeline-content iframe{

    width: 100%!important;

    height: 600px!important;

    max-width: 1037px;

    position: relative;

    top: -2rem;

    border-radius: 50px;

}

.timeline .divider{

    width: 97px;

    display: inline-block;

    height: 5px;

    background-color: #FF9B70;

    margin-left: 1.5rem;

    margin-right: 1.5rem;

    position: relative;

    top: -14px;



}

.flex-box p{

    font-family: "Lufga-Regular";

}

.timeline h2{

    font-size: 3rem;

    text-align: center;

    color: #22212A;

    font-family: "Acorn";

    text-transform: uppercase;

    margin-bottom: 1rem;

}

.timeline p{

    max-width: 800px;

    color: #444350;

    font-family: "Lufga-Regular";

    margin: auto;

}

.timeline-button{

    font-size: 1.25rem;

    color: #22212A;

    height: 80px;

    font-family: "Lufga-Medium";

    width: 250px;

    text-align: center;

    background-color: white;

    border: 1px solid #FF9B70;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 60px;

    cursor: pointer;

    text-transform: uppercase;

}

.timeline-button:nth-of-type(1){

    position: relative;

    left: 2rem;

}

.timeline-button:nth-of-type(2){

    position: relative;

    right: 2rem;

}

.timeline .lineup h3{

    text-align: center;

    position: relative;

    top: -6rem;

    padding: 1rem 3rem;

    width: fit-content!important;

    background-color: white;

    border-radius: 50px;

    border: 1px solid #FF9B70;

    font-family: "Acorn";

    color: #22212A;

    font-size: 1.5rem;

    text-transform: uppercase;

}



.timeline-button.active{

    background-color: #FF9B70;

    font-family: "Lufga-Medium";

    color: white;

    z-index: 1;

}

.background-image > .content{

    width: 1100px;

    margin: auto;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 0.75rem;

}

.background-content-box{

    max-width: 660px;

    width: 95%;

    margin-right: auto;

    background-color: #FFFFFF;

    display: flex;

    flex-direction: column;

    gap: 2rem;

    padding: 4rem;

    border-radius: 48px;

}

.big-heading{

    font-size: 4rem;

}

.light{

    font-family: "Lufga-Light";

}

.culture-zone-element{

    display: flex;

    height: 400px;

}

.culture-zone-element .image-holder{

    border-radius: 40px;

}

.culture-zone-element .image-holder > img{

    width: 400px;

    height: 400px;

    aspect-ratio: 1/1;

}

.culture-zone-element .content{

    padding: 4rem;

    display: flex;

    flex-direction: column;

    gap: 0.5rem;

    justify-content: center;

    background-color: white;

    border-radius: 40px;

}

.culture-zone-element .content .label{

    color: #FF9B70;

    font-family: "Lufga-Medium";

    font-size: 1.25rem;

    text-transform: uppercase;

    margin: 0;

}

.culture-zone-element .content h3{

    font-size: 2.5rem;

    font-family: "Lufga-Medium";

    margin: 0;

}

.culture-zone-element .content h3 i{

    color: #FF9B70;

}

.orange-bigger{

    color: #FF9B70;

    font-weight: 400;

    font-size: 1.5rem;

    text-transform: uppercase;

}

.food-subheading{

    font-size: 3rem;

}

#tab-1 > h3{

    width: calc(100% - 1.5rem);

    margin: auto;

    z-index: 1;

}

.stage-desc{

    max-width: 800px;

    margin: 1rem auto;

    text-align: center;

}

#tab-1 .stage-desc{

    position: relative;

    top: -8rem;

    padding-top: 3rem;

    margin-bottom: 0;

}



.grid-artists{

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 2rem;

    width: calc(100% - 1.5rem);

    margin: auto;

}

.grid-artists.grid-artists-artesia{

    grid-template-columns: repeat(4, 1fr);



}

.grid-artists a{

    text-decoration: none;

}

.grid-artists > a,

.grid-artists > div{

    position: relative;

}

.grid-artists .artist-special-label{

    position: absolute;

    bottom: 46px;

    border-bottom-left-radius: 20px;

    text-transform: uppercase;

    background-color: #FF9B70;

    color: white;

    padding: 6px 12px;

    font-family: "Lufga-Medium";

    font-size: 0.85rem;

}

.grid-artists img{

    width: 100%;

    margin-bottom: 1rem;

    border-radius: 32px;

}

.grid-artists span{

    margin-left: 1rem;

    color: #22212A;

    font-family: "Lufga-Regular";

    font-size: 1.25rem;

}



#tab-1 .grid-artists{

    position: relative;

    top: -5rem;

    padding: 0!important;

    padding-bottom: 2rem!important;

}







/* Flipdown countdown */

.flipdown-countdown {

    font-family: 'Roboto', sans-serif;

    max-width: 550px;

    width: 100%;

    margin: auto;

    margin-top: 3rem;

    padding: 20px;

    box-sizing: border-box;

}



.flipdown-countdown .flipdown {

margin: auto;

}



.flipdown-countdown h3 {

    text-align: center;

    font-size: 2rem;

    margin-top: 0;

    margin-bottom: 10px;

    color: white;

    font-family: "Acorn";

    text-transform: uppercase;

}





.flipdown .rotor-group:nth-child(1) .rotor-group-heading:before{

    content: "Dní"!important;

    font-family: "Acorn";

}

.flipdown .rotor-group:nth-child(2) .rotor-group-heading:before{

    content: "Hodín"!important;

    font-family: "Acorn";

}

.flipdown .rotor-group:nth-child(3) .rotor-group-heading:before{

    content: "Minút"!important;

    font-family: "Acorn";

}

.flipdown .rotor-group:nth-child(4) .rotor-group-heading:before{

    content: "Sekúnd"!important;

    font-family: "Acorn";

}

.swiper-memories .swiper-pagination-bullet-active{

    background-color: #FF9B70;

}



#food-box,

#stores-box,

#influencers-box{

    display: none;

}



/* MEDIA QUERIES */

@media(max-width: 1450px){

    .map-legend{

        padding: 2rem;

        left: 1rem;

        bottom: 1rem;

        font-size: 1.25rem;

    }

}

@media(max-width: 1366px){

    .map-legend{

        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

    }

}

@media(max-width: 1200px){

    .venue-and-accommodation{

        padding: 4rem 1rem;

    }

}

@media(max-width: 1100px){

    .what-to-expect-content{

        padding: 0 1rem

    }

    .what-to-expect-grid{

        grid-template-columns: repeat(2, 1fr);

    }

    .hero-background .hero-info-holder{

        max-width: 993px;

        width: calc(100% - 2rem);

        padding: 1rem;

        left: 1rem;

    }

    .what-to-expect-grid .element img{

        width: 100%;

        object-fit: cover;

        border-radius: 68px;

    }

    .what-to-expect-grid .element.text .highlight{

        margin-left: 0.5rem;

    }

    .what-to-expect-grid .element.text .languages{

        margin-right: 0.5rem;

    }

    .what-to-expect-grid .element.text .highlight.small{

        margin-top: 0;

            font-size: 1rem;

    }

}



@media(max-width: 1024px){

    .map-legend{

        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

    }

    .background-image{

        height: 300px;

    }

    .background-image-2{

        height: 500px;

    }

    .venue{

        flex-direction: column;

    }

    .venue > *{

        width: 100%;

    }

    .accommodation-col h2{

        font-size: 2rem;

    }

    .faq-image-holder{

        display: none;

    }

    .faq-content-holder{

        width: 100%

    }

    .faq{

        padding: 4rem 1rem;

    }

    .hero-background .hero-info-holder .hero-info{

        font-size: 1.25rem;

    }

    .what-to-expect h1{

        font-size: 2.5rem;

    }

    .timeline > .timeline-content > *{

        padding-left: 1rem;

        padding-right: 1rem;

    }

    .grid-artists{

        width: 100%

    }

    .grid-artists.grid-artists-artesia{

        grid-template-columns: repeat(3, 1fr);

    }

    .grid-artists.grid-artists-artesia img{

        margin-bottom: 0.5rem;

    }

    .grid-artists.grid-artists-artesia span{

        font-size: 0.85rem;

        margin-left: 0;

    }

    .accommodation-col h2::before{

        width: 50px;

        top: -10px;

    }

    .accommodation-col h2::after{

        width: 50px;

        top: -10px;

    }

    .floor-one{

        padding-left: 1rem;

        padding-right: 1rem;

    }

    .floor-switchers{

        padding: 0 1rem;

    }

    .timeline > .timeline-content > .timeline-holder{

        padding-left: 0;

        padding-right: 0;

    }

    .timeline-by-stages{

        flex-direction: column;

    }

    .timeline-stage{

        width: 100%;

        max-width: unset;

        margin-bottom: 2rem;

    }

    .timeline-stage > h4{

        width: calc(100% - 2rem);

    }

    .timeline-artist.placeholder{

        display: none;

    }

    .timeline-artist{

        width: calc(100% - 2rem);

        position: relative;

        top: -40px;

    }

}



@media(max-width: 800px){

    .culture-zone-element{

        flex-direction: column;

        height: unset;

    }

    .swiper-memories .swiper-slide img{

        max-height: 400px;

    }

    .culture-zone-element .image-holder > img{

        width: 100%;

        object-fit: cover;

        border-radius: 40px;

    }

    .culture-zone-element .content{

        padding: 2rem;

    }

    .big-heading{

        font-size: 2.5rem;

    }

}



@media(max-width: 768px){

    .map-legend > .map-legend-item{

        font-size: 1rem;

    }

    .map-legend > .map-legend-item > span{

        margin-right: 0.5rem;

    }

    .hero-background .hero-info-holder{

        flex-direction: column;

        width: 360px;

        gap: 0.5rem;

        left: calc(50vw - 180px);

    }

    .grid-artists{

        grid-template-columns: repeat(2, 1fr);

        gap: 1rem;

    }

    .what-to-expect h1{

        flex-direction: column;

        gap: 0.5rem;

    }

    .map-description{

        padding: 0 1rem;

    }

    .logo-hero{

        bottom: 40vw;

        width: 95vw;

        left: calc(50vw - 47.5vw);

    }

    .vica-hero{

        width: 70vw;

        left: calc(50vw - 35vw);

    }

    .white-border{

        border: none;

        padding: 3rem

    }

    .accommodation-col{

        padding: 3rem;

    }

    .accommodation-col h2::before{

        display: none;

    }

    .accommodation-description{

        text-align: left;

    }

    .faq-content-holder{

        padding: 0;

    }

    .timeline h2,

    .venue-content h2,

    .floor-one h2,

    .map h2,

    .spectra-memories h2,

    .mapka-arealu h2,

    .faq-content-holder h3{

        font-size: 2rem;

    }

    .button-buy{

        font-size: 1.5rem;

        padding-left: 2rem;

    }

    .accommodation-col.has-image > img{

        border-radius: 86px;

    }

    .map-legend{

        bottom: 0;

        left: 0;

        padding: 1rem;

        border-radius: 0;

        font-size: 0.875rem;

    }

    .what-to-expect-grid .element{

        width: 100%;

    }

    .what-to-expect-grid .element.text{

        padding: 8rem 2rem;

    }

    .what-to-expect-grid{

        display: flex;

        flex-direction: column;

        align-items: center;

    }

}



@media(max-width: 600px){

    .background-image{

        height: 200px;

    }

    .background-image-2{

        height: 700px;

        display: flex;

        flex-direction: column;

        justify-content: flex-end;

    }

    .background-content-box{

        width: 100%;

        padding: 2rem;

    }

    .background-image-2 > .content{

        height: 100%;

        display: flex;

        flex-direction: column;

        width: 100%;

        justify-content: flex-end

    }

    .timeline{

        width: calc(100% - 1.5rem);

    }

    .timeline-switcher{

        padding-bottom: 2rem;

    }

    .timeline-button{

        width: 100%;

        font-size: 1.25rem;

    }

    .timeline-button:nth-of-type(1){

        position: relative;

        left: 0;

        border-top-right-radius: 0;

        border-bottom-right-radius: 0;

    }

    .timeline-button:nth-of-type(2){

        position: relative;

        right: 0;

        border-top-left-radius: 0;

        border-bottom-left-radius: 0;

    }

    .what-to-expect-grid{

        grid-template-columns: repeat(1, 1fr);

    }

    .what-to-expect-grid .element.text.column{

        padding: 2rem;

    }

    .what-to-expect-grid .element.text .languages{

        margin: 0 0.5rem;

    }

    .accordion-button{

        font-size: 1.25rem;

        padding: 2rem 1rem;

    }

    .accordion-body{

        padding: 1rem;

    }

}



@media(max-width: 500px){

    .timeline .divider{

        background-color: white;

        width: 0px;

        margin-left: 0.25rem;

        margin-right: 0.25rem;

    }

    .floor-one h3{

        font-size: 1.5rem;

        margin-top: 1rem;

    }

    .floor-one-switcher{

        font-size: 1rem;

        height: 60px;

        border-radius: 50px;

        padding: 0.5rem

    }

    .faq-content-holder h3{

        width: 100%;

    }

    .grid-artists span{

        margin-left: 0.5rem;

        font-size: 1rem;

    }

    .grid-artists .artist-special-label{

        bottom: 41px;

    }

    .orange-border{

        border-radius: 40px;

    }

    .accommodation-col{

        padding: 2rem;

    }

    .accommodation-col.has-image > img{

        border-radius: 40px;

    }

    .floor-one h2{

        flex-direction: column;

        align-items: center;

    }

    .floor-one .divider{

        top: 0;

        margin-top: 0.5rem;

        margin-bottom: 0.5rem;

    }

    .hero-background .hero-info-holder{

        border-radius: 40px;

    }

    .white-border{

        padding: 2rem;

        gap: 1rem;

        align-items: center;

    }

    .stage-desc{

        padding: 0;

    }

    p.ticket-recommendation{

        font-size: 1rem;

    }

    .venue-content{

        height: unset;

    }

    .button-buy{

        padding-left: 3rem;

        font-size: 1.25rem;

    }

    .button-buy .buy-orange-holder{

        height: 60px;

        width: 60px;

    }

}

@media(max-width: 410px){

    .map-legend > .map-legend-item{

        font-size: 0.85rem;

    }

}

@media(max-width: 390px){

    .what-to-expect-grid .element{

        border-radius: 40px;

        max-width: calc(360px - 2rem);

    }

    .what-to-expect-grid .element img{

        border-radius: 40px;

        max-width: calc(360px - 2rem);

    }

}



/* KEYFRAMES */

@keyframes blackToWhite{

    0%{

        background-color: #000000;

        color: white

    }

    100%{

        background-color: white;

        color: black;

    }

}



@keyframes whiteToBlack{

    0%{

        background-color: white;

        color: black;

    }

    100%{

        background-color: #000000;

        color: white

    }

}