html, body {
    width:100%;
    height:100%;
    margin:0;
    height:0;
}
.container {
    width:90%;
    max-width: 1004px;
    padding: 10px;
    background-color: white;
    margin:auto;
}

.menu {
    width:100%;
    position: fixed;
    background-color: white;

    box-shadow: -1px 10px 8px 0px rgba(0,0,0,0.24);
    -webkit-box-shadow: -1px 10px 8px 0px rgba(0,0,0,0.24);
    -moz-box-shadow: -1px 10px 8px 0px rgba(0,0,0,0.24);
}

nav {
    width:100%;
    display:flex;
    justify-content:space-between;
}

nav .menu-logo img {
    width:40px;
}

nav .menu-lista ul {
    margin:0;
    padding: 0;
}

nav .menu-lista ul li{
    margin:0;
    padding: 0;
    list-style-type: none;
    float: left;
    margin-left:10px;
    
}

nav .menu-lista ul li a{
    text-decoration: none;
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    color: black;
    border-bottom: 5px solid white;
}

@media(max-width: 768px){
    .menu {
        position: unset;
    }
    nav {
        display: block;
        text-align: center;
    }
    nav .menu-logo img {
        width:80px;
    }
    nav .menu-lista ul li {
        display: block;
        float: unset;
        margin: 0;
        margin-top: 10px;
        text-align: center;
    }
    nav .menu-lista ul li a {
        font-size: 20px;
        width:100%;
        color: black;
    }
}

nav .menu-lista ul li a:hover {
    border-bottom: 5px solid #da0647;
}    

.break {
    height:70px;
}











.glowny-naglowek {
    
    background-image: url(../grafika/baner_top.png);
    background-size: contain;
    height:463px;
    border-radius: 10px;
}
header h1 {
    margin-top:20px;
    margin-left:20px;
    font-family: 'Lato', sans-serif;
    color:white;
    font-size: 52px;
}
@media(max-width: 768px){
    header h1 {
        font-size: 38px;
    }
}
.button {
    background-color: #fdb606;
    padding: 10px;
    color: white;
    font-family: 'Lato', sans-serif;
    text-decoration: none;
    border-radius:5px;
    font-size: 28px;
    margin-left:20px;
    padding-left: 30px;
    padding-right: 30px;
}

#zdjeciaenergetyka, #zdjeciaszkoly {
    width:100%;
    height:700px;
    background-size:contain;
    background-repeat: no-repeat;
    background-position: top center;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media(max-width: 768px){
    #zdjeciaenergetyka, #zdjeciaszkoly  {
        height:300px;
    }
}

.next, .prev {
    margin-top:20px;
    background-color:#A0C633;
    border:2px solid #A0C633;
    padding: 10px;
    color: white;
    font-family: 'Lato', sans-serif;
    text-decoration: none;
    border-radius:5px;
    font-size: 28px;
    margin-left:20px;
    padding-left: 30px;
    padding-right: 30px;
}

#next-opis-szkola-na-zdjeciach, #next-zdjecia-szkoly {
    z-index:1;
    position: relative;
    margin-right: 10px;
    background-color: white;
    color: black;
    margin-top: 0;
    font-weight: 900;
    background-color: rgba(255,255,255,0.8);
    border: 2px solid rgba(0,0,0,0.4);
}

#prev-opis-szkola-na-zdjeciach, #prev-zdjecia-szkoly {
    z-index:1;
    position: relative;
    margin-top: 0;
    margin-left: 10px;
    background-color: rgba(255,255,255,0.8);
    color: black;
    font-weight: 900;
    border: 2px solid rgba(0,0,0,0.4);
}
#galeriazdjec {
    width:100%;
    background-color: #d10037;
}




@media(max-width: 768px){
    .glowny-naglowek {
        height:230px;
        background-size: cover;
    }
}

.krok {
    width:100%;
}
.krok .naglowek-kroku {
    display:flex;
    color: #da0647;
    font-size: 32px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 900;
    padding-top: 20px;
}

.krok .naglowek-kroku .nr-kroku {
    width:25%;
    padding-left: 25%;
    background-image: url(../grafika/tlo_nr_kroku.jpg);
    background-repeat: no-repeat;
    background-position: bottom left;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    
}
#nb {
    background-image: url(../grafika/tlo_nr_kroku_nb.jpg);
}

.krok .naglowek-kroku .nazwa-kroku {
    width:50%;
    text-align: right;
    font-family: 'Lato', sans-serif;
}
@media(max-width: 768px){
    .krok .naglowek-kroku  {
        flex-direction: column;
    }
    .krok .naglowek-kroku .nr-kroku  {
        width:100%;
        text-align: center;
        padding-left: 0;
        background-image:none;
    }
    .krok .naglowek-kroku .nazwa-kroku  {
        width:100%;
        text-align: center;
        padding-bottom: 10px;
        border-bottom: 2px solid #d10037;
    }
    .krok .naglowek-kroku .nazwa-kroku span {
        display:none;
    }
}











.krok .zawod {
    margin-top: 20px;
    display:flex;
    border-radius: 10px;
    height:420px;
}

.krok .zawod .opis-zawodu {
    width:30%;
    padding: 5%;
    padding-left: 15%;
    font-size: 18px;
    font-family: 'Lato', sans-serif;
    color: white;
    background-repeat: no-repeat;
    background-position: top left;
    border-top-left-radius: 10px;
    text-align: left;
}

@media(max-width: 768px){
    .krok .zawod .opis-zawodu {
        width:100%;
        background-repeat: no-repeat;
        background-position: top center;
        border-top-left-radius: 10px;
        padding-top: 150px;
        font-size: 16px;
        text-align: center;
        padding-left: 5%;
    }
}

@media(max-width: 768px){
    .krok .zawod .opis-zawodu h2{
        font-size: 18px;
    }
}


.krok .zawod .zdjecie-zawodu, .krok .zawod .projekty-unijne {
    background-size: cover;
    width:51%;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

@media(max-width: 768px){
    .krok .zawod .zdjecie-zawodu, .krok .zawod .projekty-unijne {
        display:none;
    }
}
.wiecej-o-zawodzie {
    color: white;
    font-size: 18px;
    font-family: 'Lato', sans-serif;
    text-decoration: none;
}

.zd-elektryk {
    background-image: url("../grafika/tloelektryk.jpg");
}
.elektryk {
    background-image: url("../grafika/zarowka.png");
}
.ele {
    background-color:#fdb606;
}

.zd-informatyk {
    background-image: url("../grafika/tloinformatyk.jpg");
}
.informatyk {
    background-image: url("../grafika/mysz.png");
}
.inf {
    background-color:#50cde6;
}

.zd-fototechnik {
    background-image: url("../grafika/tlofototechnik.jpg");
}
.fototechnik {
    background-image: url("../grafika/aparat.png");
}
.fot {
    background-color:#d10037;
}

.zd-oze {
    background-image: url("../grafika/tlooze.jpg");
}
.technikoze {
    background-image: url("../grafika/wiatrak.png");
}
.oze {
    background-color:#A0C633;
}

.zd-elektronik {
    background-image: url("../grafika/tloelektronik.jpg");
}
.elektronik {
    background-image: url("../grafika/chip.png");
}
.ele {
    background-color:#fdb606;
}









.nasze-plusy {
    width:100%;
    text-align:center;
}

.nasze-plusy .nasze-plusy-ikona {
    margin-top: 40px;
    width:100px;
}

.nasze-plusy .opis h2 {
    font-family: 'Lato', sans-serif;
    font-size:28px;
}

@media(max-width: 768px){
    .nasze-plusy .opis h2 {
        font-size:24px;
    }
}

.nasze-plusy .opis .opis-plusa {
    width:60%;
    margin:auto;
    font-family: 'Lato', sans-serif;
    font-size:22px;
}

@media(max-width: 768px){
    .nasze-plusy .opis .opis-plusa {
        font-size:20px;
    }
}

@media(max-width: 768px){
    .nasze-plusy img {
        width:30%;
    }
}


.po-lekcjach {
    margin-top: 20px;
    width:100%;
    background-color: #fdb606;
}
.po-lekcjach .container {
    background-color: #fdb606;
    display:flex;
}
.po-lekcjach .container .po-lekcjach-ikona{
    padding-top:20px;
    width:16%;
    margin: 2%;
}
.po-lekcjach .container .po-lekcjach-ikona img{
    width:100%;
}

.po-lekcjach .container po-lekcjach-tytul {
    width:30%;
}

.po-lekcjach .container .po-lekcjach-tytul h2 {
    font-family: 'Lato', sans-serif;
    font-size: 48px;
}
.po-lekcjach .container .po-lekcjach-tytul h2 span {
    color: white;
}

.po-lekcjach .container .po-lekcjach-lista {
    width:50%;

}
.po-lekcjach .container .po-lekcjach-lista ul li {
    font-family: 'Lato', sans-serif;
    font-size: 18px;
}
.po-lekcjach .krok {
    width:90%;
    max-width: 1004px;
    padding: 10px;
    margin:auto;
    
}
.po-lekcjach .krok .nr-kroku {
    background-image: url(../grafika/tlo_nr_kroku_b.jpg);
}
.po-lekcjach .krok .naglowek-kroku {
    color:white;
}

@media(max-width: 768px){
    .po-lekcjach .container {
        display:flex;
        flex-direction: column;
    }
    .po-lekcjach .container .po-lekcjach-ikona{
        width:100%;
        text-align: center;
    }
    .po-lekcjach .container .po-lekcjach-ikona img{
        width:150px;

    }
    .po-lekcjach .container po-lekcjach-tytul {
        width:100%;
    }
    .po-lekcjach .container .po-lekcjach-lista {
        width:100%;
    
    }

    .po-lekcjach  .krok .naglowek-kroku  {
        flex-direction: column;
    }
    .po-lekcjach .krok .naglowek-kroku .nr-kroku  {
        width:100%;
        text-align: center;
        padding-left: 0;
        background-image:none;
    }
    .po-lekcjach .krok .naglowek-kroku .nazwa-kroku  {
        width:100%;
        text-align: center;
        padding-bottom: 10px;
        border-bottom: 2px solid white;
    }
    .krok .naglowek-kroku .nazwa-kroku span {
        display:none;
    }
}








.krok .zawod .projekty {
    background-color: #d10037;
}
.projekty-unijne {
    background-image: url("../grafika/unijne.jpg");
}












.szkola-na-zdjeciach img, #zdjecia-szkoly img {
    width:100%;
}


.container .krok .opis-szkola-na-zdjeciach, .container .krok .opis-zdjecia-szkoly{
    height:40px;
    display:block;
    color: #da0647;
    padding-top: 10px;
    padding-bottom: 10px;
    font-family: 'Lato', sans-serif;
    font-size: 18px;
    font-style: italic;
}
.container .krok article {
    text-align: center;
}












.krok .po-szkole {
    display:flex;
}

.krok .po-szkole .praca-zawodowa {
    width:30%;
    padding: 5%;
    margin:5%;
    border-radius: 10px;
    background-color: #A0C633;
    color: white;
    font-family: 'Lato', sans-serif;
    font-size: 20px;
}

.krok .po-szkole .studia-wyzsze {
    width:30%;
    padding: 5%;
    margin:5%;
    border-radius: 10px;
    background-color: #50cde6;
    color: white;
    font-family: 'Lato', sans-serif;
    font-size: 20px;
}
@media(max-width: 768px){ 
    .krok .po-szkole {
        flex-direction: column;
    }
    .krok .po-szkole .praca-zawodowa, .krok .po-szkole .studia-wyzsze {
        width:80%;
    }
}    
#poszkole {
    color: #50cde6;
}











footer {
    padding-top: 40px;
    width:100%;
    background-color: #A0C633;
    color: white;
    font-family: 'Lato', sans-serif;
    font-size: 20px;
}

footer .container {
    background-color: #A0C633;
    text-align: center;
}