/*Nasze style CSS*/

/*FONT*/
@import url('https://fonts.googleapis.com/css2?family=BBH+Hegarty&family=Cabin+Condensed:wght@400;500;600;700&display=swap');



/*KOLORY*/
:root{
    --kolor-glowny: #ffffff; 
    --kolor-dodatkowy: #FFFD77; 
    --kolor-czerwony: #E54130; 
    --kolor-niebieski: #4A9AD3; 
    --kolor-ciemny: #2E2E2E; 

}

/*GLOBALNE*/

*{
    transition: 1s ease-out;
    box-sizing: border-box;

}
html{ 
    scroll-behavior: smooth;
    font-size: 10px;
}
body{
   font-family: "Cabin Condensed", sans-serif;
    font-size: 1.6rem;
    color: var(--kolor-ciemny);
}


h1, h2, h3, h4, h5, h6{
   
 font-family: "Cabin Condensed", sans-serif;
    font-weight: 1000;
    text-align: center;
}

h1{
    font-size: 6.4rem;
    font-weight: 400;
    text-transform: uppercase;
    font-family: "BBH Hegarty", sans-serif;
}
h2{
    font-size: 3.2rem;
    font-weight: 400;
    margin-bottom: 2rem;
    text-transform: uppercase;
    font-family: "BBH Hegarty", sans-serif;
}
h3{
    
    font-size: 2.4rem;
     font-weight: 400;
    margin-bottom: 1rem;
    text-transform: uppercase;
    font-family: "BBH Hegarty", sans-serif;
}
h4{
    
}
h5{}
h6{}

a {
    text-decoration: none;
    color: inherit;
}

ol,
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sekcja
.stopka {
    /* scroll-margin-top: 90px; */
}
p{
    line-height: 150%;
}

img{
    max-width: 100%;
    display: block;
}


/*NAV MOBILE*/

/*WSZYSTKIE SEKCJE*/
.sekcja {
    width: 100%;
    position: relative;
}

.zawartosc {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

/* NAV DESKTOP */


.nawigacja {
    width: 100%;
    height: 90px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;

    background-color: rgba(74, 154, 211, 0.2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    color: var(--kolor-glowny);
}

.nawigacja .zawartosc {
    height: 100%;
    max-width: 1440px;
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 8vw;
}

.nawigacja a {
    font-family: "BBH Hegarty", sans-serif;
    font-size: 1.6rem;
    color: var(--kolor-glowny);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;

    padding: 0.4rem 0.9rem;
    border-radius: 999px;

    transition: 0.2s;
}

.nawigacja a:hover,
.nawigacja a:active {
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--kolor-ciemny);
}

.menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3vw;
}

/* NAV MOBILE */

.burger {
    display: none;
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 300;
    color: var(--kolor-dodatkowy);
    font-size: 3rem;
    line-height: 1;
    cursor: pointer;
}



.nakladka {
    background-color: #4A8DD380;backdrop-filter: blur(12px);
    position: fixed;
    top: 0;
    right: 0;
    z-index: 400;
    width: 0;
    height: 100%;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.zamknijX {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    color: var(--kolor-ciemny);
    font-size: 5rem;
    line-height: 1;

    cursor: pointer;
}

.nakladka h1 {
    width: 100%;
    margin-top: -1rem;
    margin-bottom: 8rem;

    font-size: 8.4rem;
    line-height: 1;
    color: var(--kolor-glowny);
    text-align: center;
}

.menu-mobile {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5rem;
    text-align: center;
}

.menu-mobile a {
    font-family: "BBH Hegarty", sans-serif;
    font-size: 3.8rem;
    line-height: 1;
    color: var(--kolor-glowny);
    text-transform: uppercase;
    text-decoration: none;
}

/* SEKCJA 1 */

#pierwsza {
    padding: 0;
    min-height: auto;
}

#pierwsza .zawartosc {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
}

#pierwsza img {
    width: 100%;
    height: auto;
    display: block;
}

#pierwsza .mobile {
    display: none;
}

/* SEKCJA 2 */

#druga {
    background: url(../img/sekcja-2desktop.png) no-repeat center right;
    background-size: 50%;
    min-height: 70vh;
    display: flex;
}

#druga .zawartosc {
    padding: 4rem;
}

#druga .tekst {
    width: 40vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
@media (min-width: 1200px){
    #druga .tekst {
        width: 25vw;
    }
}

#druga .tekst h1 {
    line-height: 1;
    text-align: left;
}
#druga .tekst article{
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
#druga .foto-druga {
    display: none;
}
#druga .tekst p {
   
    line-height: 1;
    text-transform: uppercase;

}

#druga .tekst h3 {
    font-size: 2.4rem;
    line-height: 1;
    text-align: left;
}


#druga .zdjecie img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* SEKCJA 3 DESKTOP */

#trzecia {
    padding: 100px 0;
    position: relative;
    min-height: 760px;
    overflow: hidden;
    color: var(--kolor-glowny);

    background: url(../img/sekcja-3-desktop.png) no-repeat center fixed;
    background-size: cover;
}
#trzecia .zawartosc {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    padding: 2rem;
}
#trzecia h1 {
    padding: 4rem;
    flex: 1 1 600px;
    font-size: 6.4rem;
    line-height: 1;
    text-align: left;
    color: var(--kolor-glowny);
}
#trzecia .scena {
    padding: 28px 36px;

    background-color: rgba(255, 255, 255, 0.2);
    color: var(--kolor-glowny);
}
#trzecia .scena h3 {
    font-size: 4rem;
    line-height: 1;
    text-align: left;
    margin-bottom: 30px;
    color: var(--kolor-glowny);
}
#trzecia .lista {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 42px;
}
#trzecia .lista li {
    margin-bottom: 20px;
    line-height: 1.3;
    text-transform: uppercase;
}

#trzecia .main {
    flex: 1 1 600px;
    min-height: 390px;

    top: 42px;
    right: 220px;
}

#trzecia .b {
   flex: 1 1 600px;
    min-height: 300px;

    right: 220px;
    bottom: 55px;
}

#trzecia .c {
    flex: 1 1 600px;
    min-height: 300px;

    left: 110px;
    bottom: 55px;
}

/* SEKCJA 4 DESKTOP */

#czwarta {
    padding: 100px 0;
    background-color: var(--kolor-glowny);
}

#czwarta .zawartosc {
    max-width: 1440px;
    min-height: 620px;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
}

#czwarta h1 {
    margin-top: 60px;
    margin-bottom: 150px;
    text-align: center;
}

#czwarta .lineup {
    display: flex;
    flex-wrap: nowrap;
    gap: 40px;

    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 70px 30px 70px;
    scroll-behavior: smooth;
}

#czwarta .artysta {
    flex: 0 0 185px;
}

#czwarta .artysta img {
    width: 185px;
    height: 185px;
    object-fit: cover;
}

#czwarta .artysta h4 {
    margin-top: 14px;
    text-align: left;
}

#czwarta .artysta p {
    margin-top: 2px;
}

/* SEKCJA 5 DESKTOP */


#piata {
    padding: 0;
    background-color: var(--kolor-glowny);
    overflow-x: hidden;
}

#piata .zawartosc {
    max-width: 1440px;
    width: 100%;
    min-height: 520px;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
}

#piata h1 {
    text-align: left;
    margin: 5rem 4rem;
}

#piata .faq {
    width: 100%;

    display: flex;
    flex-wrap: wrap;
}

#piata .faq article {
    flex: 1 1 520px;
    min-width: 0;

    min-height: 220px;
    padding: 4rem clamp(2rem, 7vw, 11rem);

    display: flex;
    flex-direction: column;
    justify-content: center;
}

#piata .faq article h2 {
    margin-bottom: 3.5rem;
    text-align: left;
}

#piata .faq article p {
    max-width: 520px;
    line-height: 1.2;
}



#piata .czarny {
    background-color: var(--kolor-ciemny);
    color: var(--kolor-glowny);
}

#piata .zolty {
    background-color: var(--kolor-dodatkowy);
    color: var(--kolor-ciemny);
}

#piata .czerwony {
    background-color: var(--kolor-czerwony);
    color: var(--kolor-glowny);
}

#piata .niebieski {
    background-color: var(--kolor-niebieski);
    color: var(--kolor-glowny);
}
/* SEKCJA 6 DESKTOP */


#szosta {
    background-color: var(--kolor-glowny);
    overflow: hidden;
    scroll-margin-top: 90px;
}


#szosta .zawartosc {
    --odstep-boczny: clamp(4rem, 14vw, 21rem);

    max-width: 1440px;
    min-height: 260px;
    margin: 0 auto;
    padding: 7rem var(--odstep-boczny) 0;

    position: relative;

    display: flex;
    align-items: flex-start;
}

#szosta .zawartosc > h2 {
    margin: 0;
    text-align: left;
}


#szosta .bilet {
    width: 250px;
    position: absolute;
    right: var(--odstep-boczny);
    top: 125px;
    z-index: 5;
    display: flex;
    flex-direction: column;
}
#szosta .cena {
    background-color: var(--kolor-ciemny);
    padding: 2rem;
    border-radius: 1.4rem 1.4rem 0 0;
}

#szosta .cena h2 {
    margin: 0 0 1rem 0;
    font-weight: 100;
    font-size: 1.1rem;
    line-height: 1.1;
    text-align: left;
    color: var(--kolor-dodatkowy);
}

#szosta .cena p {
    margin: 0;
    font-family: "BBH Hegarty", sans-serif;
    font-size: 3.2rem;
    line-height: 1;
    color: var(--kolor-dodatkowy);
}

#szosta .bilet .tekst {
    background-color: var(--kolor-czerwony);
    padding: 8rem 2rem 2rem;
    color: var(--kolor-glowny);
    border-radius: 0 0 1.4rem 1.4rem;
}

#szosta .bilet .tekst ul {
    margin-bottom: 2.5rem;
    padding-left: 1.5rem;
    list-style: disc;
}

#szosta .bilet .tekst li {
    line-height: 1.2;
    text-transform: uppercase;
}

#szosta .przycisk {
    display: inline-block;

    background-color: var(--kolor-glowny);
    color: var(--kolor-ciemny);

    padding: 1rem 1.6rem;

    font-family: "BBH Hegarty", sans-serif;
    font-size: 2.4rem;
    line-height: 1;
    text-transform: uppercase;
}



.szosta-tlo {
    height: 520px;
    width: 100%;

    position: relative;
    overflow: hidden;

    background: url("../img/sekcja-6-esktop.png") no-repeat center fixed;
    background-size: cover;
}

.animacja {
    --rozmiar-animacji: 2.4rem;

    position: absolute;
    left: 0;
    bottom: 45px;

    width: 100%;

    font-family: "BBH Hegarty", sans-serif;
    font-size: var(--rozmiar-animacji);
    line-height: 1;
    color: var(--kolor-glowny);
    text-transform: uppercase;
    white-space: nowrap;
}



/* STOPKA DESKTOP */


/* STOPKA DESKTOP */

#stopka {
    width: 100%;
    aspect-ratio: 1440 / 680;

    position: relative;
    overflow: hidden;

    background-image: url("../img/stopka-desktop.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;

    color: var(--kolor-glowny);
}


#stopka .newsletter {
    position: absolute;
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: min(360px, 70vw);

    text-align: center;
    text-transform: uppercase;
    color: var(--kolor-glowny);
}

#stopka .newsletter p {
    margin-bottom: 1rem;

    font-size: clamp(1.6rem, 1vw, 1.8rem);
    line-height: 1;
}

#stopka .newsletter form {
    width: 100%;
    display: flex;
}

#stopka .newsletter input[type="email"] {
    width: 70%;
    height: clamp(26px, 2.2vw, 32px);
    border: none;
    padding: 0 1.5rem;
    background-color: rgba(255, 255, 255, 0.55);
    color: var(--kolor-glowny);
    text-transform: uppercase;
}

#stopka .newsletter input[type="email"]::placeholder {
    color: var(--kolor-glowny);
    opacity: 1;
}

#stopka .newsletter input[type="submit"] {
    width: 30%;
    height: clamp(26px, 2.2vw, 32px);

    border: none;
    cursor: pointer;
    background-color: var(--kolor-glowny);
    color: var(--kolor-ciemny);
    text-transform: uppercase;
}


#stopka .info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 11%;
    padding: 0 clamp(3rem, 13vw, 22rem);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem 3rem;
    text-transform: uppercase;
    color: var(--kolor-glowny);
}

#stopka .info p {
    font-size: clamp(1.6rem, 1vw, 1.8rem);
    line-height: 1;
    white-space: nowrap;
}


/*RWD*/

@media (max-width:1000px){}
@media (max-width:600px){

    h1{
    font-size: 3.2rem;
}

h2{
    font-size: 2.4rem;
}

/*SEKCJA 1*/

    #pierwsza {
        padding: 0;
        min-height: auto;
    }

    #pierwsza .zawartosc {
        width: 100%;
        display: block;
    }

    #pierwsza .desktop {
        display: none;
    }

    #pierwsza .mobile {
        display: block;
        width: 100%;
        height: auto;
    }

/*NAV*/
    .nawigacja {
        display: none;
    }

    .burger {
        display: block;
    }

    /*SEKCJA 2*/

 /* SEKCJA 2 MOBILE */

#druga {
    padding: 0;
    min-height: auto;
    background: var(--kolor-glowny);
    display: block;
}

#druga .zawartosc {
    width: 100%;
    max-width: 100%;
    padding: 0;
}

#druga .tekst {
    width: 100%;
    height: auto;
    padding: 2rem;
    display: block;
}

#druga .tekst h1 {
    font-size: 3.2rem;
    line-height: 1.05;
    text-align: left;
    margin-bottom: 3rem;
}

#druga .tekst article {
    display: block;
}

#druga .tekst p {
    font-size: 1.6rem;
    line-height: 1.35;
    text-transform: none;
    margin-bottom: 0;
}

#druga .foto-druga {
    display: block;
    position: relative;
    width: 100%;
}

#druga .foto-druga img {
    width: 100%;
    height: auto;
    display: block;
}

#druga .foto-druga h3 {
    position: absolute;
    left: 2rem;
    bottom: 6rem;

    max-width: 85%;

    color: var(--kolor-dodatkowy);
    font-size: 2.4rem;
    line-height: 1.1;
    text-align: left;
}

/*SEKCJA 3*/

#trzecia {
    padding: 0;
    min-height: auto;
    overflow: hidden;
    color: var(--kolor-glowny);
}

#trzecia .tlo {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
    object-fit: cover;

    z-index: 1;
}

#trzecia .tlo-mobile {
    display: none;
}

#trzecia .tlo-desktop {
    display: none;
}

#trzecia .tlo-mobile {
    display: block;
}

#trzecia .zawartosc {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 100%;
    min-height: auto;

    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

#trzecia .zawartosc > h1 {
    width: 100%;
    flex: none;

    padding: 0;
    margin: 0 0 2rem 0;

    font-size: 3.2rem;
    line-height: 1;
    text-align: left;

   
}

#trzecia .Schedule {
    position: static;
    width: 100%;
    min-height: auto;

    display: flex;
    flex-direction: column;
    gap: 2rem;
}

#trzecia .scena {
    position: static;
    width: 100%;
    min-height: auto;
    padding: 3rem 3rem;
    background-color: rgba(255, 255, 255, 0.3);
    color: var(--kolor-glowny);
}

#trzecia .scena h3 {
    font-size: 2.4rem;
    line-height: 1;
    text-align: left;
    margin-bottom: 2.5rem;
    color: var(--kolor-glowny);
}

#trzecia .lista {
    display: flex;
    flex-direction: column;
    gap: 0;
}

#trzecia .lista li {
    margin-bottom: 1.8rem;

    font-size: 1.4rem;
    line-height: 1.2;
    text-transform: uppercase;
}

/* SEKCJA 5*/

#piata {
    padding: 0;
    background-color: var(--kolor-glowny);
}

#piata .zawartosc {
    width: 100%;
    max-width: 100%;
    min-height: auto;
    display: flex;
    flex-direction: column;
}

#piata h1 {
    margin-top: 3rem;
    margin-bottom: 3rem;
    font-size: 3.2rem;
    line-height: 1;
    text-align: left;
}

#piata .faq {
    width: 100%;
    display: flex;
    flex-direction: column;
}

#piata .faq article {
    min-height: 270px;
    padding: 4rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#piata .faq article h2 {
    margin-bottom: 3rem;
    font-size: 2.4rem;
    line-height: 1.2;
    text-align: left;
}

#piata .faq article p {
    max-width: 100%;
    font-size: 1.8rem;
    line-height: 1.2;
}

#piata .czarny {
    order: 1;
}

#piata .zolty {
    order: 2;
}

#piata .niebieski {
    order: 3;
}

#piata .czerwony {
    order: 4;
}


#szosta {
    position: relative;
    padding: 0;
    min-height: auto;

    background: url("../img/sekcja-6-esktop.png") no-repeat center top fixed;
    background-size: cover;

    overflow: hidden;
}

#szosta .zawartosc {
    width: 100%;
    max-width: 100%;
    min-height: auto;

    padding: 5rem 2rem 0;

    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

#szosta .zawartosc > h2 {
    margin: 0 0 10rem 0;

    font-size: 3.2rem;
    line-height: 1.15;
    text-align: left;
    color: var(--kolor-ciemny);
}

#szosta .bilet {
    width: 100%;
    max-width: 410px;
    position: static;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

#szosta .cena {
    background-color: var(--kolor-czerwony);

    padding: 4rem;
    min-height: 185px;

    border-radius: 3rem;

    position: relative;
    z-index: 2;
}

#szosta .cena h2 {
    margin: 0 0 2rem 0;
    font-family: "Cabin Condensed", sans-serif;
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.15;
    text-align: left;
    color: var(--kolor-glowny);
}

#szosta .cena p {
    margin: 0;
    font-family: "BBH Hegarty", sans-serif;
    font-size: 5rem;
    line-height: 1;
    color: var(--kolor-glowny);
}

#szosta .bilet .tekst {
    background-color: var(--kolor-ciemny);
    margin-top: 1rem;
    padding: 15rem 4rem 4rem;
    min-height: 390px;
    color: var(--kolor-glowny);
    border-radius: 2.4rem;
}

#szosta .bilet .tekst ul {
    margin-bottom: 3.5rem;
    padding-left: 1.8rem;
    list-style: disc;
}

#szosta .bilet .tekst li {
    font-size: 1.4rem;
    line-height: 1.25;
    text-transform: uppercase;
}

#szosta .przycisk {
    display: block;
    width: 100%;
    padding: 2rem;

    background-color: var(--kolor-dodatkowy);
    color: var(--kolor-ciemny);

    font-family: "BBH Hegarty", sans-serif;
    font-size: 3.2rem;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
}


.szosta-tlo {
    width: 100%;
    height: 130px;

    position: relative;
    z-index: 2;
    background: none;
    overflow: hidden;
}

.animacja {
    --rozmiar-animacji: 2.4rem;

    position: absolute;
    left: 0;
    bottom: 2rem;
    display: flex;
    width: max-content;

    font-family: "BBH Hegarty", sans-serif;
    font-size: var(--rozmiar-animacji);
    line-height: 1;

    color: var(--kolor-glowny);
    text-transform: uppercase;
    white-space: nowrap;

    animation: przesuwanie-tekstu 22s linear infinite;
}

.animacja span {
    display: block;
    flex-shrink: 0;
}


/* STOPKA MOBILE */

/* STOPKA MOBILE */

#stopka {
    width: 100%;
    aspect-ratio: 462 / 810;
    position: relative;
    overflow: hidden;
    background-image: url("../img/stopka-media.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;

    color: var(--kolor-glowny);
}


#stopka .newsletter {
    position: absolute;

    top: 44%;
    left: 37%;
    transform: none;

    width: 58%;
    text-align: left;
    text-transform: uppercase;
    color: var(--kolor-dodatkowy);
}

#stopka .newsletter p {
    margin-bottom: 1.5rem;
    font-size: 1.6rem;
    line-height: 1.15;
}

#stopka .newsletter form {
    width: 100%;
    display: flex;
}

#stopka .newsletter input[type="email"] {
    width: 70%;
    height: 4.4rem;
    border: none;
    padding: 0 1.6rem;
    background-color: rgba(255, 255, 255, 0.65);
    color: var(--kolor-glowny);
    font-size: 1.6rem;
    text-transform: uppercase;
}

#stopka .newsletter input[type="email"]::placeholder {
    color: var(--kolor-dodatkowy);
    opacity: 1;
}

#stopka .newsletter input[type="submit"] {
    width: 30%;
    height: 4.4rem;
    border: none;
    cursor: pointer;
    background-color: var(--kolor-dodatkowy);
    color: var(--kolor-ciemny);

    font-size: 1.6rem;
    text-transform: uppercase;
}


#stopka .info {
    position: absolute;

    left: 37%;
    right: auto;
    bottom: 5.5%;
    width: 58%;
    padding: 0;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.4rem;
    text-transform: uppercase;
    color: var(--kolor-dodatkowy);
}

#stopka .info p {
    margin: 0;
    font-size: 1.6rem;
    line-height: 1;
    white-space: nowrap;
}

}