* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "comfortaa", sans-serif;
}

html {
    font-size: 10px;
    max-width: 1920px;
}

/*rozmiar fontu*/
body h1 {
    font-size: 115px;
    color: #222222;
}

body h2 {
    font-size: 55px;
    font-weight: normal;
    line-height: 100%;
    color: #222222;
}

body h3 {
    font-size: 35px;
    color: #222222;
    font-weight: normal;
}

body h4 {
    font-size: 25px;
    color: #222222;
    font-weight: normal;
}

body h5 {
    font-size: 18px;
    color: #222222;
    font-weight: normal;
}

body p {
    font-size: 17px;
    color: #222222;
    font-weight: normal;
    line-height: 180%;
}



/*header*/
header {
    position: fixed;
    width: 100%;
    height: 180px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 0.5px solid #a4a4a4;
    padding-bottom: 15px;
    padding-left: 40px;
    padding-top: 20px;
    padding-right: 20px;
    top: 0;
    background: #fff;
}

/*logotyp*/
header .logotyp img {
    max-width: 100%;
    height: auto;
}

header nav {
    padding-top: 80px;
}

header ul {
    position: relative;
}

header ul li {
    position: relative;
    list-style: none;
    float: left;
}

header ul li a {
    color: black;
    font-size: 160%;
    padding: 15px;
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    text-transform: uppercase;
}

header ul li a:hover {
    color: #004225;
}

/*pierwszy*/
.pierwszy {
    padding-top: 320px;

}

/*p-tytul*/
.p-tytul {
    text-align: center;
    padding-left: 8%;
    padding-right: 8%;
}

.p-tytul h1 {

    text-align: center;
    text-transform: uppercase;
}

.p-tytul p {

    padding-top: 60px;
}

/*p-bok*/
.p-bok {
    writing-mode: vertical-lr;
    text-orientation: mixed;
    padding-left: 60px;
    margin-top: -20%;

}

.p-bok h5 {
    color: #004225;
    text-decoration: underline;

}

.strz {
    padding-top: 4%;
}

/*drugi*/
.drugi {
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: -80px;
    padding-top: 180px;
    padding-left: 60px;
    padding-right: 60px;
    padding-bottom: 120px;
    background-color: #f0f2f1;
}


/*odmiany*/
.odmiany {
    padding-right: 80px;
}

.odmiany p {
    padding-top: 100px;
}

.odmiany h5 {
    padding-bottom: 40px;
    text-transform: uppercase;
}

/*drugi2*/
.drugi2 {
    margin-top: -80px;
    padding-top: 160px;
    padding-left: 60px;
    padding-right: 60px;
    padding-bottom: 120px;
    background-color: #f0f2f1;
}

.odmiany2 li {
    padding-top: 2%;
    font-size: 17px;
    color: #222222;
    font-weight: normal;
    line-height: 180%;
}



/*rodzaje*/
.rodzaje {
    padding-left: 200px;
}



.rodzaje p {
    padding-bottom: 40px;
    line-height: 200%;
    margin-left: 60px;
    margin-top: -38px;
    font-weight: 350;

}



/*trzeci*/
.trzeci {
    padding-top: 180px;
    padding-left: 120px;
    padding-right: 120px;
    padding-bottom: 120px;
}

/*powstaje*/
.powstaje h4 {
    padding-top: 60px;
    text-decoration: underline;
}

/*tabela*/
.tabela {
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.tabela {
    padding-top: 100px;
}

.tabela1 {
    padding-right: 100px;
}

.tabela2 {
    padding-left: 100px;
}

/*trzeci*/
.trzeci-tck {
    padding-top: 180px;
    padding-left: 120px;
    padding-right: 120px;
}

/*powstaje*/
.powstaje h4 {
    padding-top: 60px;
    text-decoration: underline;
}

.powstaje2 h4 {
    padding-top: 8%;
    padding-bottom: 2%;
    text-align: center;
    line-height: 140%;
}

/*tabela*/
.tabela {
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.tabela {
    padding-top: 80px;
}

.tabela1 {
    padding-right: 80px;
}

.tabela2 {
    padding-left: 80px;
}


.strz2 {
    padding-top: 40px;
}


/*sekacja-czwarta*/
.czwarty {
    background-color: #004225;
    padding-left: 60px;
    padding-right: 60px;
}

/*naglowek-h3*/
.naglowek-trzeci h3 {
    padding-top: 120px;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
}

/*naglowek-h2*/
.naglowek-tytul h2 {
    padding-top: 120px;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    padding-left: 300px;
    padding-right: 300px;
}

/*naglowek-p*/
.naglowek-tytul p {
    padding-top: 100px;
    text-align: center;

    color: #fff;
    padding-left: 5%;
    padding-right: 5%;
}

/*kolumny*/
.kolumny {
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    padding-top: 120px;
    padding-bottom: 60px;
}

/*kolumny2*/
.kolumny2 {
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding-top: 120px;
    padding-bottom: 60px;
}

.naglowek-p p {
    color: #fff;
    padding-bottom: 120px;
}



.kolumna-tytul h3 {
    color: #fff;
    text-align: center;
    padding-bottom: 60px;
}

.kolumna-tytul h4 {
    color: #fff;
    text-align: center;
    padding-bottom: 60px;
    text-decoration: underline;
    line-height: 140%;

}

.kolumna p {
    color: #fff;
    text-align: center;
    padding-bottom: 60px;

}

.naglowek-kolumny {
    padding-right: 4%;
    padding-left: 4%;
}



/*sekcja-piaty*/
.piaty {
    margin-top: 120px;
    background-color: #f0f2f1;
    padding-top: 120px;
    padding-bottom: 120px;

}

.teraz h2 {
    text-transform: uppercase;
    text-align: center;
    padding-left: 60px;
    padding-right: 60px;
}

.telefon h3 {
    text-transform: uppercase;
    text-align: center;
    padding-top: 60px;
    padding-left: 60px;
    padding-right: 60px;
}

/*sekcja-szosta*/

.znaczenie {
    margin-top: -80px;
    padding-left: 180px;
    padding-right: 180px;
    padding-bottom: 120px;
    background-color: #f0f2f1;
}



.znaczenie h5 {
    text-transform: uppercase;
    padding-bottom: 10px;
    padding-top: 120px;
}

.znaczenie p {
    padding-top: 80px;
}

.znaczenie span {
    text-decoration: underline;
}

.znaczenie_dwa {
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-top: 120px;
    padding-left: 60px;

}

.znaczenie_dwa_tresc h5 {
    padding-bottom: 20px;
}

.znaczenie_dwa_tresc h3 {
    padding-bottom: 60px;
}

.znaczenie_dwa_tresc p {
    padding-right: 100px;
}

/*img-3*/
.img-zy {
    padding-left: 60px;
    padding-right: 60px;
    max-width: 100%;
    height: auto;
}

/*sekcja-siodma*/

.znaczenie- {
    margin-top: -80px;
    padding-top: 180px;
    padding-left: 180px;
    padding-right: 180px;
}

.znaczenie- p {
    padding-top: 100px;
}



/*sekcja - osma*/
.osmy {
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: -80px;
    padding-top: 10%;
    padding-bottom: 120px;
    background-color: #f0f2f1;
}

/*img-2*/
.img-z {
    padding-left: 60px;
    padding-right: 60px;
    max-width: 100%;
    height: auto;
}

/*naglowek*/
.osmy-tresc h2 {
    text-transform: uppercase;
    padding-top: 100px;
    padding-bottom: 80px;
    padding-left: 0px;
}

.osmy-tresc p {
    padding-right: 100px;

    margin-top: -30px;
    padding-bottom: 60px;
}






@media screen and (min-width: 320px) and (max-width: 767px) {

    /*rozmiar fontu - telefon*/
    body h1 {
        font-size: 28px;

    }

    body h2 {
        font-size: 25px;
    }

    body h3 {
        font-size: 20px;
    }

    body h4 {
        font-size: 17px;
    }

    body h5 {
        font-size: 15px;
    }

    body p {
        font-size: 14px;
    }

    header {
        height: 110px;
    }

    /*logotyp - telefon*/
    header .logotyp {
        width: 70%;
        padding-left: 15px;
    }

    /*menu -telefon*/
    header ul li a {

        font-weight: normal;
    }

    header nav {
        padding-top: 40px;
        padding-left: 5px;
        padding-right: 5px;
    }

    /*pierwszy*/
    .pierwszy {
        padding-top: 150px;
        padding-left: 5px;
        padding-right: 5px;
    }



    .p-tytul p {
        padding-top: 40px;
        padding-left: 0px;
        padding-right: 0px;
    }


    /*p-bok*/
    .p-bok {
        writing-mode: horizontal-tb;
        padding-left: 20px;
        text-align: center;
        margin-top: 15%;

    }




    /*drugi*/
    .drugi {
        grid-template-columns: 1fr;
        margin-top: -80px;
        padding-top: 120px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 40px;
    }

    /*drugi2*/
    .drugi2 {
        margin-top: -80px;
        padding-top: 120px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 40px;

    }

    /*drugi2*/
    .drugi2 li {
        font-size: 14px;
        padding-top: 4%;
    }

    /*drugi2*/
    .drugi2 h3 {
        padding-bottom: 4%;
    }


    /*odmiany*/
    .odmiany {
        padding-right: 20px;
    }

    .odmiany p {
        padding-top: 60px;
    }

    .odmiany h4 {
        padding-bottom: 20px;
    }

    /*odmiany2*/
    .odmiany2 {
        padding-right: 20px;
        padding-left: 0px;

    }

    .odmiany2 p {
        padding-top: 0px;
    }

    .odmiany2 h4 {
        padding-bottom: 20px;
    }

    /*rodzaje*/
    .rodzaje {
        padding-left: 0px;
        padding-top: 40px;
    }

    .rodzaje h3 {
        padding-bottom: 40px;
        line-height: 200%;
        padding-left: 20px;
        margin-left: 20px;
        margin-top: -32px;
    }

    .rodzaje p {
        padding-bottom: 40px;

        margin-left: 35px;
        margin-top: -30px;
    }


    /*trzeci*/
    .trzeci {
        padding-top: 40px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 40px;
    }

    /*powstaje*/
    .powstaje h4 {
        padding-top: 40px;
    }

    /*tabela*/
    .tabela {
        grid-template-columns: 1fr;
    }

    .tabela {
        padding-top: 40px;
    }

    .tabela1 {
        padding-right: 20px;
    }

    .tabela2 {
        padding-top: 40px;
        padding-left: 0px;
    }

    /*trzeci*/
    .trzeci-tck {
        padding-top: 40px;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 40px;
    }

    /*powstaje*/
    .powstaje h4 {
        padding-top: 40px;
    }

    /*tabela*/
    .tabela {
        grid-template-columns: 1fr;
    }

    .tabela {
        padding-top: 40px;
    }

    .tabela1 {
        padding-right: 20px;
    }

    .tabela2 {
        padding-top: 40px;
        padding-left: 0px;
    }

    .strz2 {
        margin-top: 0%;
    }

    /*czwarty-telefon*/
    .czwarty {
        margin-top: 40px;
        padding-left: 20px;
        padding-right: 20px;
    }

    /*naglowek-h3*/
    .naglowek-trzeci h3 {
        padding-top: 60px;

    }

    /*naglowek-h2*/
    .naglowek-tytul h2 {
        padding-top: 40px;
        padding-left: 20px;
        padding-right: 20px;
    }

    /*kolumny-telefon*/
    .kolumny {
        grid-template-columns: 1fr;
        padding-top: 40px;
        padding-bottom: 0px;
    }

    .naglowek-kolumny p {
        padding-left: 15px;
        padding-right: 15px;
    }

    .naglowek-p p {

        padding-left: 0px;
        padding-right: 0px;
        padding-bottom: 40px;
    }

    /*piaty*/
    .piaty {
        padding-top: 40px;
        padding-bottom: 40px;

    }

    .teraz h2 {
        padding-left: 20px;
        padding-right: 20px;
    }

    .telefon h3 {
        padding-top: 5px;
        padding-left: 20px;
        padding-right: 20px;
    }

    /*sekcja-szosta*/

    .znaczenie {
        margin-top: -80px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 40px;
    }

    .znaczenie h5 {
        padding-top: 120px;
    }

    .znaczenie_dwa {
        grid-template-columns: 1fr;
        padding-top: 60px;
        padding-left: 20px;

    }

    .znaczenie_dwa_tresc p {
        padding-right: 20px;
    }

    .znaczenie_dwa_tresc h3 {
        padding-bottom: 40px;
    }

    /*img-3*/
    .img-zy {
        padding-top: 40px;
        padding-left: 0px;
        padding-right: 15px;
    }

    /*sekcja-siodma*/

    .znaczenie- {
        margin-top: -80px;
        padding-top: 120px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .znaczenie- p {
        padding-top: 60px;
    }



    /*sekcja-osma-telefon*/
    .osmy {
        grid-template-columns: 1fr;

    }

    /*img-2*/


    /*img-z*/
    .img-z {
        padding-top: 100px;
        padding-left: 15px;
        padding-right: 15px;

    }

    .osmy-tresc h2 {
        padding-top: 40px;
        padding-bottom: 40px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .osmy-tresc p {
        padding-right: 20px;
        padding-left: 20px;
        margin-top: -30px;
        padding-bottom: 0px;
    }

}


@media screen and (min-width: 768px)and (max-width: 1279px) {
    header {
        height: 200px;
    }

    /*rozmiar fontu*/
    body h1 {
        font-size: 60px;
    }

    body h2 {
        font-size: 45px;
    }

    body h3 {
        font-size: 30px;
    }

    body h4 {
        font-size: 20px;
    }

    body h5 {
        font-size: 18px;
    }

    body p {
        font-size: 17px;
    }

    /*menu */
    header ul li a {

        font-weight: normal;
    }

    header nav {
        margin-top: 100px;
        padding-left: 60px;
        padding-bottom: 60px;
    }

    /*logotyp - telefon*/
    header .logotyp {
        width: 100%;
        padding-left: 60px;
        padding-right: 350px;
    }

    /*p-bok*/
    .p-bok {
        padding-left: 40px;
        margin-top: -66%;

    }


    .strz {
        padding-top: 160px;

    }

    /*drugi*/
    .drugi {
        grid-template-columns: 1fr;
        margin-top: -80px;
        padding-top: 120px;
        padding-left: 40px;
        padding-right: 40px;
        padding-bottom: 60px;
    }

    /*drugi2*/
    .drugi2 {
        margin-top: -80px;
        padding-top: 120px;
        padding-left: 40px;
        padding-right: 40px;
        padding-bottom: 100px;

    }

    .odmiany2 li {
        padding-top: 2%;
        font-size: 17px;
        color: #222222;
        font-weight: normal;
        line-height: 180%;
    }

    /*odmiany*/
    .odmiany h4 {
        padding-bottom: 20px;
    }

    /*rodzaje*/
    .rodzaje {
        padding-left: 40px;
        padding-top: 100px;
    }

    .rodzaje h3 {
        padding-bottom: 40px;
        line-height: 200%;
        margin-top: -42px;
    }

    /*trzeci*/
    .trzeci {
        padding-top: 100px;
        padding-left: 80px;
        padding-right: 80px;
        padding-bottom: 100px;
    }

    /*powstaje*/
    .powstaje h4 {
        padding-top: 60px;
    }

    /*tabela*/
    .tabela {
        grid-template-columns: 1fr;
    }

    .tabela {
        padding-top: 80px;
    }

    .tabela1 {
        padding-right: 80px;
    }

    .tabela2 {
        padding-top: 60px;
        padding-left: 0px;
        padding-right: 80px;
    }

    /*trzeci*/
    .trzeci-tck {
        padding-top: 100px;
        padding-left: 80px;
        padding-right: 80px;
        padding-bottom: 100px;
    }

    /*powstaje*/
    .powstaje h4 {
        padding-top: 60px;
    }

    /*tabela*/
    .tabela {
        grid-template-columns: 1fr;
    }

    .tabela {
        padding-top: 80px;
    }

    .tabela1 {
        padding-right: 80px;
    }

    .tabela2 {
        padding-top: 60px;
        padding-left: 0px;
        padding-right: 80px;
    }

    .strz2 {
        padding-top: 0%;

    }

    /*czwarty*/
    .czwarty {

        padding-right: 60px;
        padding-left: 60px;
    }

    /*naglowek-h3*/
    .naglowek-trzeci h3 {
        padding-top: 100px;
    }

    /*naglowek-h2*/
    .naglowek-tytul h2 {
        padding-top: 100px;
        padding-left: 0px;
        padding-right: 0px;
    }

    /*kolumny*/
    .kolumny {
        grid-template-columns: 1fr 1fr;
        padding-top: 60px;
        padding-bottom: 80px;
        padding-right: 60px;
        padding-left: 60px;
    }

    .naglowek-kolumny p {
        padding-left: 40px;
        padding-right: 40px;
    }

    .naglowek-p p {

        padding-left: 0px;
        padding-right: 40px;
        padding-bottom: 100px;
    }

    .kolumna-tytul h3 {
        padding-bottom: 60px;
    }

    /*sekcja - piaty*/
    .piaty {
        padding-top: 100px;
        padding-bottom: 60px;

    }

    .teraz h2 {
        padding-left: 60px;
        padding-right: 60px;
        line-height: 120%;
    }

    .telefon h3 {
        padding-top: 40px;
        padding-left: 60px;
        padding-right: 60px;
    }

    /*sekcja-szosta*/

    .znaczenie {
        margin-top: -80px;
        padding-top: 120px;
        padding-left: 80px;
        padding-right: 80px;
        padding-bottom: 60px;
    }

    .znaczenie h5 {
        padding-bottom: 30px;
    }

    .znaczenie p {
        padding-top: 100px;
    }

    .znaczenie_dwa {
        grid-template-columns: 1fr;
        padding-top: 100px;
        padding-left: 60px;

    }

    .znaczenie_dwa_tresc p {
        padding-right: 60px;
    }

    .znaczenie_dwa_tresc h3 {
        padding-bottom: 40px;
    }

    /*img-3*/
    .img-zy {
        padding-left: 0px;
        width: 80%;
        padding-top: 80px;
    }


    /*sekcja-szosta*/

    .znaczenie- {
        margin-top: 40px;
        padding-top: 80px;
        padding-left: 80px;
        padding-right: 80px;
        padding-bottom: 10px;
    }

    /*sekcja - osiem*/

    .osmy {
        grid-template-columns: 1fr;
        margin-top: 100px;
        padding-bottom: 20px;
    }

    /*img-2*/
    .img-z {
        padding-left: 60px;
        width: 80%;
    }

    .osmy-tresc h2 {
        padding-top: 100px;
        padding-bottom: 80px;
        padding-left: 60px;
    }

    .osmy-tresc p {
        padding-right: 60px;
        padding-left: 60px;
        margin-top: -30px;

    }

}

@media screen and (min-width: 1280px) and (max-width: 1650px) {

    /*menu*/

    header ul li a {
        font-size: 119%;
        padding-top: 26px;
        padding-right: 10px;
        padding: 10px;
    }

    header nav {

        padding-left: -80px;
    }

    /*rozmiar fontu*/
    body h1 {
        font-size: 80px;
    }

    body h2 {
        font-size: 40px;
    }

    body h3 {
        font-size: 28px;
    }

    body h4 {
        font-size: 22px;
    }

    body h5 {
        font-size: 18px;
    }

    body p {
        font-size: 17px;
    }

    /*p-bok*/
    .p-bok {
        writing-mode: vertical-lr;
        text-orientation: mixed;
        padding-left: 45px;
        margin-top: -30%;

    }


    /*logotyp - telefon*/
    header .logotyp {
        max-width: 90%;
    }

    /*rodzaje*/
    .rodzaje {
        padding-left: 100px;
    }


    /*trzeci*/
    .trzeci {
        padding-top: 120px;
        padding-left: 100px;
        padding-right: 100px;
        padding-bottom: 40px;
    }

    /*powstaje*/
    .powstaje h4 {
        padding-top: 40px;
    }

    /*tabela*/

    .tabela {
        padding-top: 100px;
    }

    .tabela1 {
        padding-right: 80px;
    }

    .tabela2 {
        padding-left: 80px;
    }

    /*trzeci-tck*/
    .trzeci-tck {
        padding-top: 120px;
        padding-left: 100px;
        padding-right: 100px;
    }

    /*powstaje*/
    .powstaje h4 {
        padding-top: 40px;
    }

    /*tabela*/

    .tabela {
        padding-top: 100px;
    }

    .tabela1 {
        padding-right: 80px;
    }

    .tabela2 {
        padding-left: 80px;
    }

    /*czwarty*/
    .czwarty {
        margin-top: 120px;
        padding-left: 60px;
        padding-right: 60px;
    }

    /*naglowek-h3*/
    .naglowek-trzeci h3 {
        padding-top: 120px;
        text-align: center;
        text-transform: uppercase;
        color: #fff;
    }

    /*naglowek-h2*/
    .naglowek-tytul h2 {
        padding-top: 100px;
        text-align: center;
        text-transform: uppercase;
        color: #fff;
        padding-left: 200px;
        padding-right: 200px;
    }

    .naglowek-p p {
        margin-top: -80px;
        padding-bottom: 100px;
    }

    /*kolumny*/
    .kolumny {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        padding-top: 120px;
        padding-bottom: 120px;
    }

    .naglowek-kolumny p {
        padding-left: 60px;
        padding-right: 60px;
    }

    .cyfra p {
        font-size: 14px;
        padding-bottom: 60px;
    }

    .kolumna-tytul h3 {
        padding-bottom: 60px;
    }

    /*piaty*/
    .piaty {
        padding-top: 120px;
        padding-bottom: 100px;

    }

    .teraz h2 {
        padding-left: 60px;
        padding-right: 60px;
    }

    .telefon h3 {
        padding-top: 50px;
        padding-left: 60px;
        padding-right: 60px;
    }

    /*sekcja-szosta*/

    .znaczenie {
        margin-top: -80px;
        padding-top: 160px;
        padding-left: 60px;
        padding-right: 60px;
        padding-bottom: 100px;
        background-color: #f0f2f1;
    }

    .znaczenie h5 {
        text-transform: uppercase;
        padding-bottom: 30px;
    }

    .znaczenie p {
        padding-top: 100px;
    }

    .znaczenie span {
        text-decoration: underline;
    }

    .znaczenie_dwa_tresc p {
        padding-right: 80px;
    }

    /*sekcja osiem*/

    .osmy {
        grid-template-columns: 1fr 1fr;
        margin-top: -80px;

        padding-bottom: 100px;
    }

    /*img-2*/
    .img-2 {

        padding-left: 40px;
    }

    /*img-z*/
    .img-z {
        width: 90%;
    }

    .osmy-tresc h2 {
        padding-top: 80px;
        padding-bottom: 60px;
        padding-right: 60px;

    }


    .osmy-tresc p {
        padding-right: 60px;
        margin-top: -30px;
        padding-bottom: 40px;
    }

}





/* zamiana menu*/
@media (max-width:1279px) {

    header {
        position: absolute;
        padding: 10px 15px;
    }



    header ul li a {
        font-size: 150%;
        font-weight: normal;
        color: #222222;
    }

    header ul li a:hover {
        text-decoration-line: overline;
    }



    header nav {
        position: absolute;
        width: 100%;
        top: 110px;
        left: 0;
        background: #fff;
        display: none;
    }


    header.active nav {
        display: initial;
    }


    header nav ul li {
        width: 100%;
    }

    header nav ul li ul {
        position: relative;
        width: 100%;
    }

    .menuToggle {
        position: relative;
        width: 40px;
        height: 50px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;

    }

    .menuToggle::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 2px;
        background: #000;
        transform: translateY(-12px);
        box-shadow: 0 12px #000;
    }

    .menuToggle::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 2px;
        background: #000;
        transform: translateY(12px);
    }

    header.active .menuToggle::before {
        transform: rotate(45deg);
        box-shadow: 0 0 #000;
    }

    header.active .menuToggle::after {
        transform: rotate(315deg);


    }

}

/*footer*/
.stopka {
    text-align: center;
    margin-top: 120px;
}

/*logo*/
.logo {
    margin: 0 auto;
    padding-bottom: 100px;
}

/*dane*/
.dane {
    border-top: 0.5px solid #c8c8c8c8;
    padding-top: 80px;
    padding-bottom: 80px;
    text-transform: uppercase;
}

/*mail*/
.mail {
    padding-top: 60px;
}

.mail a {
    text-decoration: none;
    color: #004225;
    font-size: 18px;
}


/*akedo*/
.akedo {
    border-top: 0.5px solid #c8c8c8c8;
    padding-top: 40px;
}

.akedo p {
    margin-left: 60px;
    font-size: 14px;
    text-transform: uppercase;
    color: #666;
}

.created a {
    margin-left: 60px;
    font-size: 14px;
    text-transform: uppercase;
    color: #666;
    padding-bottom: 40px;
}

@media screen and (min-width: 320px) and (max-width: 767px) {

    /*footer*/
    .stopka {
        margin-top: 60px;
    }

    /*logo*/
    .logo {
        padding-bottom: 40px;
    }

    /*dane*/
    .dane {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    /*mail*/
    .mail {
        padding-top: 40px;
    }

    .mail a {
        font-size: 14px;
    }

    /*akedo*/
    .akedo p {
        margin-left: 20px;
        font-size: 12px;
    }

    .created a {
        margin-left: 20px;
        font-size: 12px;
        padding-bottom: 40px;
    }
}