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

html {
    font-size: 10px;
    font-family: "Roboto", serif;
    max-width: 1920px;
}

body {
    background: #ebebeb;
}

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;
    top: 0;
    background: #ebebeb;
}

header .logo {
    height: 100%;
    padding-top: 4em;
    padding-left: 60px;
}

/*menu*/

header nav {
    padding-top: 8em;
    padding-right: 60px;

}

header nav ul li span {
    padding-left: 10px;
}

header ul {
    position: relative;
}

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

header ul li a {
    color: black;
    font-size: 2em;
    padding: 20px 20px;
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    text-transform: uppercase;


}

header ul li a:hover {
    color: #2e9c47;

}

header ul li ul {
    position: absolute;
    left: 0;
    width: 500px;
    display: none;
}

header ul li:hover ul {
    display: block;
    background: #ebebeb;

}

header nav ul li b {
    padding-left: 10px;
    font-weight: normal;
}



/* haslo*/
.haslo h1 {
    text-transform: uppercase;
    font-size: 10em;
    font-weight: 300;
    line-height: 100%;
    margin-top: 2.5em;
    margin-left: 0.5em;
}

/* zdjecie */
.header img {
    margin-top: 2em;
    width: 100%;
}

/*uslugi*/

.uslugi {

    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;

}

/* energia elektryczne */
.opis-prad {
    background: #2e9c47;
    padding-bottom: 10rem;
}

.opis-prad h2 {
    padding-top: 4em;
    padding-left: 2em;
    font-size: 5em;
    color: white;
    text-transform: uppercase;
    font-weight: normal;
}

.opis-prad h3 {
    padding-top: 4em;
    padding-left: 5em;
    padding-right: 10em;
    font-size: 2em;
    color: white;
    font-weight: 300;
    line-height: 200%;
    padding-bottom: 6em;
}

.opis-prad p {
    padding-top: 2em;
    padding-bottom: 2em;
    font-size: 1.8em;
    color: white;
    font-weight: 300;
    margin-left: 6em;
    margin-right: 8em;
    border-top: 0.5px solid #fff;

}

.odkup {
    padding-top: 2em;
    padding-bottom: 2em;
    font-size: 1.8em;
    color: white;
    font-weight: 300;
    margin-left: 6em;
    margin-right: 8em;
    border-bottom: 1px solid #fff;

}

.znacznik {
    padding-left: 10em;
    margin-top: 8em;
}

/* gaz */
.gaz {
    padding-bottom: 10rem;
}

.gaz h2 {
    padding-top: 4em;
    padding-left: 2em;
    font-size: 5em;
    text-transform: uppercase;
    font-weight: normal;
}

.gaz h3 {

    padding-top: 4em;
    padding-left: 5em;
    padding-right: 10em;
    font-size: 2em;
    font-weight: 300;
    line-height: 200%;
    padding-bottom: 4em;
}

.gaz p {
    padding-top: 2em;
    padding-bottom: 2em;
    font-size: 1.8em;
    font-weight: 300;
    margin-left: 6em;
    margin-right: 8em;
    border-top: 0.5px solid #a4a4a4;
}

.kontrola {
    padding-top: 2em;
    padding-bottom: 2em;
    font-size: 1.8em;
    font-weight: 300;
    margin-left: 6em;
    margin-right: 8em;
    border-bottom: 0.5px solid #a4a4a4;
}

/* sekcja - korzysci*/


.haslo-przyszlosc h2 {
    padding: 4em;
    font-size: 4em;
    font-weight: normal;
    margin-bottom: 4em;
    text-align: center;
    text-transform: uppercase;
    margin: 0 auto;

}

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

}

.suma h3 {
    font-size: 2.8em;
    text-transform: uppercase;
    font-weight: normal;
    border: 0.5px solid #a4a4a4;
    padding: 3em;
    margin-left: 8em;
    margin-right: 8em;
    margin-top: 15em;
}

.prawa-strona {
    padding: 3em;
    margin-left: 10em;
    margin-right: 10em;
}

.rachunki {
    border: 0.5px solid #a4a4a4;
    margin-bottom: 3em;
}

.rachunki h3 {
    font-size: 2.8em;
    text-transform: uppercase;
    font-weight: normal;
    margin-bottom: 2em;
    padding: 3em 3em 0 2em;
}

.rachunki p {
    font-size: 1.8em;
    font-weight: 300;
    line-height: 200%;
    padding: 0em 3em 3em 3em;
}

.wydatki {
    border: 0.5px solid #a4a4a4;
    margin-bottom: 3em;
}

.wydatki h3 {
    font-size: 2.8em;
    text-transform: uppercase;
    font-weight: normal;
    margin-bottom: 2em;
    padding: 3em 3em 0 2em;
}

.wydatki p {
    font-size: 1.8em;
    font-weight: 300;
    line-height: 200%;
    padding: 0em 3em 3em 3em;
}

.komunikacja {
    border: 0.5px solid #a4a4a4;
    margin-bottom: 3em;
}

.komunikacja h3 {
    font-size: 2.8em;
    text-transform: uppercase;
    font-weight: normal;
    margin-bottom: 2em;
    padding: 3em 3em 0 2em;
}

.komunikacja p {
    font-size: 1.8em;
    font-weight: 300;
    line-height: 200%;
    padding: 0em 3em 3em 3em;
}

/* sekcja- dodatkowe informacje */
.informacje h2 {
    padding-top: 4em;
    padding-bottom: 1em;
    font-size: 5em;
    text-transform: uppercase;
    font-weight: normal;
    border-bottom: 0.5px solid #a4a4a4;
    margin-left: 2em;
    margin-right: 2em;

}

.dodatkowe {
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 10em;
}

.roznice h3 {
    padding-top: 4em;
    padding-left: 5em;
    padding-right: 10em;
    font-size: 2.5em;
    font-weight: normal;
    line-height: 200%;
    padding-bottom: 3em;
    text-transform: uppercase;
}

.roznice p {
    font-size: 1.8em;
    margin-left: 6.5em;
    margin-right: 7em;
    font-weight: 300;
    line-height: 200%;
}

.oszczednosc h3 {
    padding-top: 4em;
    padding-left: 5em;
    padding-right: 10em;
    font-size: 2.5em;
    font-weight: normal;
    line-height: 1.5em;
    padding-bottom: 3em;
    text-transform: uppercase;

}

.oszczednosc p {
    margin-top: 1.5em;
    font-size: 1.8em;
    margin-left: 6.5em;
    margin-right: 7em;
    font-weight: 300;
    line-height: 1.5em;
}

/* sektor nagrody*/
.nagrody {
    background: #ffffff;
}

.naglowek-nagrody h2 {

    padding-top: 4em;
    padding-bottom: 1em;
    font-size: 5em;
    text-transform: uppercase;
    font-weight: normal;
    margin-left: 2em;


}

.logotypy-nagrody {
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    padding-left: 5em;
    padding-right: 5em;
    padding-top: 4em;
    padding-bottom: 15em;


}

.gazela {
    height: 70%;
}

.efektywna {
    height: 70%;
}

.cwb {
    height: 70%;
}

.gepard {
    height: 70%;
}

.laureat {
    height: 70%;
}

.credit {
    height: 70%;

}


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

    header {
        position: absolute;
    }

    header nav {
        padding-top: 2em;
    }

    header ul li a {
        color: #fff;

    }

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

    header {
        padding: 10px 20px;

    }

    header nav {
        position: absolute;
        width: 100%;
        top: 120px;
        left: 0;
        background: #2e9c47;
        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);

    }

}

@media screen and (min-width: 320px) and (max-width: 767px) {
    header {
        height: 80px;
        top: 0px;
    }



    header ul li a {
        font-size: 1.5em;
        font-weight: 300;
    }

    header nav {
        top: 140px;
        padding-left: 10px;
    }


    header .logo {
        width: 50%;
        padding-top: 2em;
        padding-left: 10px;
    }


    .haslo h1 {
        font-size: 3em;
        line-height: 1em;
        margin-top: 4em;
        margin-left: 0.5em;
    }

    .header img {
        width: 100%;
        margin-top: 1em;
    }



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

    /*telefon - energia*/
    .opis-prad {

        background: #2e9c47;
        margin-bottom: 1em;

    }

    .opis-prad h2 {
        padding-top: 1em;
        padding-left: 0.5em;
        font-size: 2.5em;
    }

    .opis-prad h3 {
        padding-top: 1.5em;
        padding-left: 1em;
        padding-right: 2em;
        font-size: 1.5em;
        line-height: 1.5em;
        padding-bottom: 4em;
    }

    .opis-prad p {
        padding-top: 1.5em;
        padding-bottom: 1.5em;
        font-size: 1.3em;
        margin-left: 1em;
        margin-right: 2em;
    }

    .znacznik {
        padding-left: 1em;
        margin-top: 2em;
    }

    /*telefon - gaz*/
    .gaz {
        padding-bottom: 5rem;
    }

    .gaz h2 {
        padding-top: 1em;
        padding-left: 0.5em;
        font-size: 2.5em;
    }

    .gaz h3 {
        padding-top: 1.5em;
        padding-left: 1em;
        padding-right: 2em;
        font-size: 1.5em;
        line-height: 1.5em;
        padding-bottom: 4em;
    }

    .gaz p {
        padding-top: 1.5em;
        padding-bottom: 1.5em;
        font-size: 1.3em;
        margin-left: 1em;
        margin-right: 2em;
    }

    .znacznik {
        padding-left: 1em;
        margin-top: 2em;
    }

    /*telefon - korzysci*/
    .przyszlosc {
        grid-template-columns: 1fr;
    }

    /* przyszlosc h2*/

    .haslo-przyszlosc h2 {
        font-size: 2em;
        padding-left: 0.5em;
        padding-right: 0.5em;
        padding-top: 1em;
        margin-bottom: 1em;
        text-align: left;
    }

    /* telefon - korzysci*/

    .przyszlosc {
        grid-template-columns: 1fr;
    }

    /* telefon - przyszlosc h2*/

    .haslo-przyszlosc h2 {
        font-size: 2em;
        padding-left: 0.5em;
        padding-right: 0.5em;
        padding-top: 1em;
        margin-bottom: 1em;
        text-align: left;
    }

    .suma h3 {
        font-size: 1.8em;
        padding: 2em;
        margin: 0 auto;
        width: 14em;

    }

    .prawa-strona {
        padding: 2em;
        margin-left: 0.5em;
        margin-right: 0.5em;
        width: 100%;
        margin: 0 auto;

    }

    .rachunki {

        margin-bottom: 2em;
    }

    .rachunki h3 {
        font-size: 1.8em;
        margin-bottom: 2em;
        padding: 2em 2em 0 1em;
    }

    .rachunki p {
        font-size: 1.5em;
        font-weight: 300;
        line-height: 1.5em;
        padding: 0em 2em 2em 1em;

    }

    .wydatki {

        margin-bottom: 2em;
    }

    .wydatki h3 {
        font-size: 1.8em;
        margin-bottom: 2em;
        padding: 2em 2em 0 1em;
    }

    .wydatki p {
        font-size: 1.5em;
        font-weight: 300;
        line-height: 1.5em;
        padding: 0em 2em 2em 1em;

    }

    .komunikacja {

        margin-bottom: 2em;
    }

    .komunikacja h3 {
        font-size: 1.8em;
        margin-bottom: 2em;
        padding: 2em 2em 0 1em;
    }

    .komunikacja p {
        font-size: 1.5em;
        font-weight: 300;
        line-height: 1.5em;
        padding: 0em 2em 2em 1em;

    }

    /* telefon - dodatkowe informacje*/

    .dodatkowe {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .informacje h2 {

        padding-top: 2em;
        padding-bottom: 1em;
        font-size: 2em;
        margin-left: 0.5em;
        margin-right: 2em;

    }

    .roznice h3 {
        font-size: 2em;
        padding: 0.5em;
        margin-top: 2em;

        margin-right: 1em;
        margin-bottom: 1em;
    }

    .roznice p {
        font-size: 1.3em;
        margin-left: 1em;
        margin-right: 1em;

    }

    .oszczednosc h3 {
        font-size: 2em;
        padding: 0.5em;
        margin-top: 2em;

        margin-right: 1em;
        margin-bottom: 1em;
    }

    .oszczednosc p {
        font-size: 1.3em;
        margin-left: 1em;
        margin-right: 1em;

    }

    /* telefon - nagrody*/
    .logotypy-nagrody {
        grid-template-columns: 1fr 1fr;
        padding-left: 2em;
        padding-top: 2em;
        padding-bottom: 2em;
    }


    .naglowek-nagrody h2 {

        padding-top: 3em;
        padding-bottom: 1em;
        font-size: 2em;
        margin-left: 0.5em;
        margin-right: 2em;

    }

    .gazela {
        margin-left: 0.5em;
        margin-bottom: 2em;
        height: 50%;
    }

    .efektywna {
        height: 50%;
    }

    .cwb {
        padding-top: 2em;
        height: 60%;
    }

    .gepard {
        height: 60%;
        padding-top: 2em;

    }

    .laureat {
        height: 60%;
        padding-top: 2em;

    }

    .credit {
        height: 60%;
        padding-top: 2em;

    }

}

@media screen and (min-width: 768px) and (max-width: 1199px) {

    .header img {
        width: 100%;
        margin-top: 15px;
    }

    header nav {
        top: 140px;
        padding-left: 40px;

    }

    header ul li a {
        font-size: 1.5em;
        font-weight: 300;
    }

    header {
        height: 120px;
        top: 0px;

    }

    header ul li a {
        font-size: 2em;
        font-weight: 300;
    }

    header .logo {
        width: 70%;
        padding-top: 3em;
        padding-left: 40px;
    }

    .haslo h1 {
        font-size: 6em;
        line-height: 0.9em;
        margin-top: 3em;
        margin-left: 40px;
        margin-right: 20px;
    }

    /*tablet - uslugi*/
    .uslugi {

        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr;

    }

    /*tablet - energia*/
    .opis-prad {
        width: 100%;
        left: 0;
        background: #2e9c47;
        margin-bottom: 1em;
    }

    .opis-prad h2 {
        padding-top: 2em;
        padding-left: 1em;
        font-size: 4em;
        color: white;
    }

    .opis-prad h3 {
        padding-top: 3em;
        padding-left: 2em;
        padding-right: 5em;
        font-size: 1.5em;
        padding-bottom: 4em;
    }

    .opis-prad p {
        padding-top: 2em;
        padding-bottom: 2em;
        font-size: 1.3em;
        margin-left: 2em;
        margin-right: 5em;
    }

    .odkup {
        padding-top: 2em;
        padding-bottom: 2em;
        font-size: 1.8em;
        margin-left: 6em;
        margin-right: 8em;
    }

    /* tablet - gaz*/

    .gaz {
        width: 100%;
        right: 0;
        margin-bottom: 1em;
    }

    .gaz h2 {
        padding-top: 2em;
        padding-left: 1em;
        font-size: 4em;
        margin-bottom: 1.2em;
    }

    .gaz h3 {
        padding-top: 3em;
        padding-left: 2em;
        padding-right: 5em;
        font-size: 1.5em;
        padding-bottom: 4em;
    }

    .gaz p {
        padding-top: 2em;
        padding-bottom: 2em;
        font-size: 1.3em;
        margin-left: 2em;
        margin-right: 5em;
    }

    .kontrola {
        padding-top: 2em;
        padding-bottom: 2em;
        font-size: 1.8em;
        margin-left: 6em;
        margin-right: 8em;
    }

    .znacznik {
        padding-left: 2.5em;
        margin-top: 4em;
    }

    /*tablet - korzysci*/
    .przyszlosc {
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .haslo-przyszlosc h2 {
        font-size: 4em;
        padding-left: 1em;
        padding-right: 1em;
        padding-top: 3em;

    }

    /*tablet - korzysci*/


    .haslo-przyszlosc h2 {
        font-size: 4em;
        padding-left: 1em;
        padding-right: 1em;
        padding-top: 3em;

    }

    .suma h3 {
        font-size: 2.5em;
        padding: 3em;
        margin-left: 1em;
        margin-right: 1em;
        margin-top: 15em;

    }

    .rachunki {
        padding: 2em;
        margin-left: 1em;
        margin-right: 1em;
        margin-bottom: 3em;
    }

    .rachunki h3 {
        font-size: 2.5em;
        margin-bottom: 2em;
        padding: 1em 1em 0 1em;

    }

    .rachunki p {
        font-size: 1.5em;
        padding: 0em 2em 2em 2em;

    }

    .wydatki {
        padding: 2em;
        margin-left: 1em;
        margin-right: 1em;
        margin-bottom: 3em;
    }

    .wydatki h3 {
        font-size: 2.5em;
        margin-bottom: 2em;
        padding: 1em 1em 0 1em;
    }

    .wydatki p {
        font-size: 1.5em;
        padding: 0em 2em 2em 2em;

    }

    .komunikacja {
        padding: 2em;
        margin-left: 1em;
        margin-right: 1em;

    }

    .komunikacja h3 {
        font-size: 2.5em;

        margin-bottom: 2em;
        padding: 1em 1em 0 1em;
    }

    .komunikacja p {
        font-size: 1.5em;
        padding: 0em 2em 2em 2em;

    }

    /*tablet - dodatkowe informacje*/

    .dodatkowe {
        grid-template-columns: 1fr 1fr;
        width: 100%;

    }

    .informacje h2 {
        font-size: 4em;
        margin-left: 1em;
        margin-right: 1em;
        padding-bottom: 0.5em;


    }

    .roznice h3 {
        padding-top: 3em;
        padding-left: 2em;
        padding-right: 2em;
        font-size: 2em;
        padding-bottom: 2em;
    }

    .roznice p {
        padding-top: 2em;
        padding-bottom: 2em;
        font-size: 1.3em;
        margin-left: 3em;
        margin-right: 2em;
    }

    .oszczednosc h3 {
        padding-top: 3em;
        padding-left: 2em;
        padding-right: 1em;
        font-size: 2em;
        padding-bottom: 2em;
    }

    .oszczednosc p {
        padding-top: 2em;
        padding-bottom: 2em;
        font-size: 1.3em;
        margin-left: 3em;
        margin-right: 2em;
    }

    /*tablet - nagrody*/
    .logotypy-nagrody {
        margin-left: 2em;
        margin-right: 2em;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;

    }


    .naglowek-nagrody h2 {
        padding-bottom: 2em;
        font-size: 4em;
        margin-left: 1em;
        margin-right: 2em;

    }

    .gazele {
        height: 50%;
    }

    .efektywna {

        height: 50%;

    }

    .cwb {
        height: 50%;
    }

    .gepard {
        height: 50%;


    }

    .laureat {
        height: 50%;
    }

    .credit {
        height: 50%;
    }

}

@media screen and (min-width: 1201px) and (max-width: 1500px) {
    header .logo {
        height: 80%;
        padding-top: 4em;
        padding-left: 40px;
    }

    .haslo h1 {
        font-size: 8em;
        margin-top: 3em;
        margin-left: 40px;
    }

    header ul li ul {
        width: 400px;
    }



    header ul li a {
        font-size: 1.8em;
        padding: 15px 15px;
    }


    header nav {
        padding-top: 10em;
        padding-right: 40px;
    }

    /* deskop - korzysci*/

    .haslo-przyszlosc h2 {
        font-size: 4em;
        padding-left: 1em;
        padding-right: 1em;
        padding-top: 3em;
    }

    .suma h3 {
        font-size: 2.5em;
        padding: 3em;
        margin-left: 1em;
        margin-right: 1em;
        margin-top: 15em;

    }

    /* deskop - energia elektryczne*/
    .opis-prad h2 {

        padding-left: 40px;

    }

    .opis-prad p {
        margin-left: 40px;
    }

    .opis-prad h3 {

        padding-left: 40px;
        padding-right: 7em;
    }

    .odkup {
        margin-left: 40px;
        margin-right: 7em;
    }

    .znacznik {
        padding-left: 40px;
    }

    /* deskop - gaz */


    .gaz h2 {
        padding-left: 40px;
    }

    .gaz h3 {

        padding-left: 40px;
        padding-right: 7em;
    }

    .gaz p {
        margin-left: 40px;
        margin-right: 7em;
    }

    .kontrola {
        margin-left: 40px;
        margin-right: 7em;
    }
}


/* sekcja- footer*/
.stopka {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin-top: 15em;
    border-top: 0.5px solid #a4a4a4;
    border-bottom: 1px solid #a4a4a4;
    padding-top: 6em;
    margin-left: 4em;
    margin-right: 4em;
    padding-bottom: 4em;
}

.napisz h2 {

    font-size: 4em;
    font-weight: normal;
}

.napisz p {
    font-size: 1.8em;
    font-weight: 300;
    padding-top: 2em;
    padding-right: 2em;
    line-height: 200%;
}


.icons {
    border-right: 0.5px solid #a4a4a4;
    border-left: 0.5px solid #a4a4a4;
    padding-left: 10em;
}

.wrapper {
    display: flex;
    justify-content: left;
    padding-left: 2em;

}

.kwadrat {
    height: 20px;
    float: left;
}

.wrapper_2 {
    display: flex;
    justify-content: left;
    padding-left: 2em;

    padding-top: 5em;
}

.wrapper_3 {
    display: flex;
    justify-content: left;
    padding-left: 2em;

    padding-top: 5em;
}

.kolo {
    height: 20px;
    float: left;

}

.trojkat {
    height: 20px;
    float: left;

}

.telefon p {
    padding-left: 2em;
    font-size: 1.8em;
    font-weight: 300;
    line-height: 1.5em;
}

.mail p {
    padding-left: 2em;
    font-size: 1.8em;
    font-weight: 300;
}


.adres p {
    padding-left: 2em;
    font-size: 1.8em;
    font-weight: 300;
    line-height: 200%;
}

.footer-img {

    padding-left: 10em;
}

.akedo p {
    font-size: 1.2em;
    font-weight: 300;
    text-transform: uppercase;
    color: #666;
    margin-left: 3em;
}

.copright p {
    padding-top: 2em;
    padding-bottom: 0.5em;
}

.created a {
    padding-bottom: 4em;
    font-size: 1.2em;
    font-weight: 300;
    text-transform: uppercase;
    color: #666;
    padding-left: 3em;
}




/* telefon-footer*/
@media screen and (min-width: 320px) and (max-width: 767px) {

    .stopka {
        display: grid;
        grid-template-columns: 1fr;
        margin-bottom: 4em;
        margin-right: 4em;
        margin-top: 4em;
    }

    .napisz h2 {
        padding-bottom: 1em;
        font-size: 2em;
        font-weight: normal;
        margin-left: 0.5em;
        margin-right: 0.5em;

    }

    .napisz p {
        font-size: 1.5em;
        margin-left: 0.5em;
        padding-top: 1em;
        padding-right: 0.5em;
        line-height: 1.5em;
        padding-bottom: 2em;
    }

    .wrapper_2 {
        display: flex;
        justify-content: left;
        padding-left: 0.5em;

    }

    .wrapper_3 {
        display: flex;
        justify-content: left;
        padding-left: 0.5em;

        padding-top: 5em;
    }

    .wrapper {
        display: flex;
        justify-content: left;
        padding-left: 0.5em;


    }

    .icons {

        padding-left: 1em;
        padding-right: 1em;
        padding-top: 1em;

    }

    .telefon p {
        padding-left: 1em;
        font-size: 1.5em;
    }

    .mail p {
        padding-left: 1em;
        font-size: 1.5em;
    }


    .adres p {
        padding-left: 1em;
        font-size: 1.5em;
    }

    .footer-img {
        height: 80%;
        padding-left: 1em;
        padding-top: 6em;
    }

    .kolo {
        height: 15px;
    }

    .trojkat {
        height: 15px;
    }

    .kwadrat {
        height: 15px;
    }

    .akedo p {
        font-size: 1.2em;
        font-weight: 300;
        text-transform: uppercase;
        color: #666;
        margin-left: 4em;
    }

    .copright p {
        padding-top: 1em;
        padding-bottom: 1em;
    }

    .created a {
        padding-bottom: 4em;
        font-size: 1.2em;
        padding-left: 4em;
    }
}

/*tablet - footer*/
@media screen and (min-width: 768px) and (max-width: 1199px) {
    .stopka {
        margin-top: 10em;
        padding-top: 6em;
        margin-left: 4em;
        margin-right: 6em;
        padding-bottom: 4em;
    }

    .napisz h2 {

        font-size: 3em;
        font-weight: normal;
        padding-right: 2em;
    }

    .napisz p {
        font-size: 1.2em;
        padding-right: 2em;
    }

    .icons {
        padding-left: 4em;
        padding-right: 4em;
    }

    .telefon p {
        padding-left: 2em;
        font-size: 1.2em;
    }

    .mail p {
        padding-left: 2em;
        font-size: 1.2em;
    }


    .adres p {
        padding-left: 2em;
        font-size: 1.2em;
    }

    .footer-img {
        width: 90%;
        padding-left: 5em;
    }

    .akedo p {
        font-size: 1.2em;
        margin-left: 3.5em;
    }

    .copright p {
        padding-top: 2em;
        padding-bottom: 1em;
    }

    .created a {
        padding-bottom: 4em;
        font-size: 1.2em;
        padding-left: 3.5em;
    }

}

/*footer - desktop*/
@media screen and (min-width: 1200px) and (max-width: 1500px) {



    .napisz p {
        padding-right: 3em;
    }


    .icons {
        padding-left: 2em;
    }


    .footer-img {
        width: 70%;
        padding-left: 4em;
    }
}