/* 
    Created on : 15 gru 2022, 18:53:17
    Author     : krzysiek
*/

*,
*::after,
*::before {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    /*width: 100%;*/
    height: 100%;
    border: solid 0 red;
    background-color: #333333;
    margin: 0;
}

@font-face {
    font-family: FootLight-MT-Light_18259;
    src:url('../FootLight-MT-Light_18259.ttf');
    font-display: swap;
}

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

/*XXXXXXXXX         ORIENTACJA LANDSCAPE    XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
.grid-container {
    display: grid;
    height: 100vh;
    grid-template-columns: 0.27fr 1.73fr;
    grid-template-rows: 0.66fr 2.14fr 0.2fr;
    overflow: auto;
    /*gap: 5px 0;*/
}

.grid-item {
    display: flex;
    justify-content: center;
    align-items: center;
}

strong {
    /*color: darkred;*/
    color: #8B0000;
}

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

/*OBRAZEK*/

.grid-item0 img{
    width: 100%;
    height: auto;
    /*background-color: #4B371F;*/
}

.grid-item0 {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    /*background-color: #4B371F;*/
}

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

/*HEADER*/

.grid-item1 {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    font-family: footlight;
    color: #FFFFFF;
    background-color: #4B371F;
}

p.przedmiot {
    border: solid 0px white;
    font-size: 4.2vw;
    text-align: center;
    margin: 0;

}
    
p.egzamin {
    border: solid 0px yellow;
    font-size: 3vw;
    text-align: center;
    }

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

/*NAV*/
.grid-item2 {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    display: block;
    color: #FFFFFF;
    background-color: #6D5332;
}

#nawigacja {
    background-color: #6D5332;

}

div.linki {
    width: 80%;
    border: solid 1px #FFFFFF;
    font-size: 1.4vw;
    color: #FFFFFF;
    text-align: center;
    text-decoration: none;
    margin: 0.5rem auto 0 auto;
}

.linki:link {
    background-color: #4B371F;
    font-size: 1.4vw;
    color: #FFFFFF;
    text-align: center;
    text-decoration: none;
    margin: 1.5rem auto 0 auto;
}

.linki:hover {
    background-color: #4B371F;
    font-size: 1.4vw;
    color: #FFFFFF;
    text-align: center;
    text-decoration: none;
}

.linki:visited {
    background-color: #4B371F;
    font-size: 1.4vw;
    color: #FFFFFF;
    text-align: center;
    text-decoration: none;
    margin-top: 0.5rem;
}



/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

/*MAIN*/
.grid-item3 {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    height: 100%;
    background-color: #CBA34C;
}

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

#glowna {
    height: 100%;
    background-color: #CBA34C;
    overflow: auto;
}
        
.center {
    display: flex;
    border: solid 0px #FFFFFF;
    overflow: auto;
/*  wyśrodkowuje diva w pionie i poziomie*/
    justify-content: center;
    align-items: center;
    height: 100%;

}

.center1 {
    overflow: auto;
    
}
        
p.strona {
    font-size: 1.4vw;
    text-indent: 2.7rem;
    padding: 0 1rem 0 1rem;
    margin-bottom: 0px;
    text-align: justify;
}

p.serwis {
/*  font-size: 1.187rem;*/
/*  font-size: 0.8333rem;*/
/*  border: solid 1px white;*/
    font-size: 1.4vw;
    /*text-indent: -4rem;*/
/*  padding-left: 7.6rem;*/
    padding: 0 1rem 0 1rem;
}

* ul {
    font-size: 1.4vw;
    padding-left: 9rem;
    padding-right: 2rem;
}

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

div.oferta, div.forma, div.cennik {
    width: 100%;
    height: 100%;
    border: solid 0px mediumaquamarine;
    overflow: auto;
    padding-bottom: 1rem;
    /*display: flex;*/            /* wyśrodkowuje diva w pionie
    /*justify-content: center;*/
    /*align-items: center;*/
}


h2 {
    border: solid 0 blue;
    font-size: 2.2vw;
    color : black;
    font-weight: bold;
    /*text-indent: 5.4em;*/
    text-align: center;
}

/*p.cennik {
    border: solid 0 blue;
    font-size: 2.5rem;
    color : black;
    font-weight: bold;
    text-indent: 11.8rem;
}*/

p.oferta1, p.forma1, p.cennik1 {
    border: solid 0px blue;
/*  font-size: 1.187rem;*/
    font-size: 1.4vw;
    color : black;
/*  text-indent: 5.9rem;*/
    text-indent: 2.7rem;
    text-align: justify;
    padding: 0 1rem 0 1rem;
}

p.oferta2, p.forma2, p.cennik2{
    border: solid 0 blue;
/*  font-size: 1.187rem;*/
    font-size: 1.4vw;
    font-weight: bold;
    color : black;
/*  text-indent: -9.3rem;*/
    padding: 0 1rem 0 1rem;
}

p.forma3 {
    border: solid 0 blue;
/*  font-size: 1.187rem;*/
    font-size: 1.4vw;
    font-weight: normal;
    color : black;
    padding: 0 1rem 0 1rem;
    margin-bottom: 1rem;
}

p.forma4 {
    border: solid 0 blue;
/*  font-size: 1.187rem;*/
    font-size: 1.4vw;
    font-weight: bold;
    text-align: right;
    color : black;
    padding-right: 1rem;
/*  text-indent: -9.3rem;*/

}

p.cennik3 {
    border: solid 0 red;
/*  font-size: 1.187rem;*/
    font-size: 1.4vw;
    color : black;
    padding: 1rem 1rem 0 1rem;
    margin-bottom: 0;
}

/*        p.cennik2 {
            border: solid 0 blue;
            font-size: 2rem;
            font-weight: bold;
            color : black;
            text-indent: -9.3rem;
            padding-left: 2rem;
        }*/


p.cennik4 {
    font-size: 1.7rem;
    text-align: center;
    color : black;
}

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

/*    KONTAKT*/

        div.kontakt {
            width: 100%;
            height: 100%;
            padding: 0.5rem;
            /*border: solid 1px blue;*/
            overflow: auto;
        }

/*----------------------------------------------------------------------------*/

        /*    OBRAZEK*/

        div.picture {
            width: 43%;
            height: 100%;
            /*border: solid 1px blue;*/
            float: left;
        }
                
        img {
            width: auto;
            height: 100%;
            float: left;
        }

/*----------------------------------------------------------------------------*/
        
        div.adres {
            width: 57%;
            height: 100%;
            /*border: solid 1px #FFFFFF;*/
            display: flex;
            align-items: center;
            text-align: center;
            float: right;
        }
        
        div.adres1 {
            width: 100%;
            font-size: 1.4vw;
            /*border: solid 1px aqua;*/
        }

/*----------------------------------------------------------------------------*/
        
        div.adres2 {
            /*border: solid 1px red;*/
            /*padding: 1rem 0 1rem 0;*/
            margin: 1vh 0 0 0;
        }
        
/*        p.adres {
            border: solid 1px blue;
            padding-left: 20px;
            font-size: 1.1vw;
            text-align: center;
            font-weight: bolder;
            color: #FFFFFF;
            margin: 0;
        }*/

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

/*FOOTER*/
.grid-item4 {
    grid-column: 1 / 3;
    grid-row: 3 / 4;
    color: #FFFFFF;
    background-color: #4B371F;
    /*border: solid 1px blue;*/
}

div.stopka {
    font-size: 1.4vw;
    text-align: center;
}


/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/


@media screen and (max-width: 768px) and (orientation: portrait) {
    
    .grid-container {
        display: grid;
        grid-template-columns: 0.4fr 1.6fr;
        /*grid-template-rows: 0.2fr 0.15fr 3.35fr 0.3fr;*/
        grid-template-rows: 0.2fr 0.03fr 0.15fr 3.35fr 0.3fr;  /* dodatkowa pusta przestrzeń 0.2fr między header a nav */
        overflow: auto;
        background-color: #4B371F;
        /*border: solid 1px white;*/
    }
    
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
    
/*    HEADER   */

p.przedmiot {
    /*border: solid 1px white;*/
    font-size: 9.5vw;
    text-align: center;
}
    
p.egzamin {
    /*border: solid 1px yellow;*/
    font-size: 4.5vw;
    text-align: center;
}

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

/*    PUSTY WIERSZ   */

.grid-item-empty {
    grid-column:  1 / 3;
    grid-row: 2 / 3;
}

.empty {
  grid-row: span 1; /* Pusty wiersz zajmuje 1 miejsce, aby dodać przestrzeń */
  height: 30px; /* Możesz dostosować wysokość pustego wiersza */
}

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
    
    /*NAV*/
.grid-item2 {
    grid-column: 1 / 3;
    grid-row: 3 / 4;
}
    
#nawigacja {
    width: 100%;
  /*background-color: #6D5332;*/
    background-color: #4B371F;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
}

div.linki {
    width: 20%;
    height: 100%;
/*  background-color: #4B371F;*/
    background-color: #6D5332;
    display: flex;
    font-size: 3vw;
    color: #FFFFFF;
    text-align: center;
    padding: 0;
    margin: 0;
    border: solid 1px white;
    border-radius: 15px 15px 0 0;
    justify-content: center;
    align-items: center;
}

.linki:hover {
    background-color: #6D5332;
    font-size: 3vw;
    color: #FFFFFF;
    padding: 0;
}

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
    
/*MAIN*/
.grid-item3 {
    grid-column: 1 / 3;
    grid-row: 4 / 5;
    background-color: #CBA34C;
/*  border: solid 1px blue;*/
}



#glowna {
    height: 100%;
    background-color: #CBA34C;
    overflow: auto;
}
        
.center {
    /*border: solid 0 mediumaquamarine;*/
    /*overflow: auto;*/
    /*display: flex;*/
/*  wyśrodkowuje diva w pionie*/
    /*justify-content: center;
    align-items: center;*/
}
        
p.strona {
    font-size: 3vw;
    text-indent: 2.7rem;
    padding: 0.5rem 1rem 0 1rem;
    margin-bottom: 10px;
}

p.serwis {
    font-size: 3vw;
    text-indent: -4rem;
    padding-left: 5.1rem;
    padding-right: 1rem;
}
        
* ul {
    font-size: 3vw;
    padding-left: 3.125rem;
    padding-right: 1rem;
}


h2 {
    font-size: 4.2vw;
}

p.oferta1, p.forma1, p.cennik1 {
    border: solid 0 blue;
    font-size: 3vw;
    color : black;
    text-indent: 2.7rem;
    text-align: justify;
    padding: 0 1rem 0 1rem;
}

p.oferta2, p.forma2, p.cennik2{
    border: solid 0 blue;
    font-size: 3.7vw;
    font-weight: bold;
    color : black;
    padding: 0 1rem 0 1rem;
}

p.cennik3 {
    border: solid 0 red;
    font-size: 3vw;
    color : black;
    padding: 1rem 1rem 0 1rem;
    margin-bottom: 0;
}

/*        p.cennik2 {
            border: solid 0 blue;
            font-size: 2rem;
            font-weight: bold;
            color : black;
            text-indent: -9.3rem;
            padding-left: 2rem;
        }*/

p.forma3 {
    border: solid 0 blue;
    font-size: 3vw;
    font-weight: normal;
    color : black;
    padding: 0 1rem 0 1rem;
    margin-bottom: 1rem;
}

p.forma4 {
    border: solid 0 blue;
    font-size: 3vw;
    font-weight: bold;
    text-align: right;
    color : black;
    padding: 0 2rem 0 0;
}

p.cennik4 {
    font-size: 2rem;
    text-align: center;
    color : black;
}

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

/*KONTAKT*/

div.kontakt {
    /*border: solid 1px aqua;*/
    /*overflow: auto;*/
}


div.picture {
    width: 100%;
    height: auto;
    /*border: solid 1px red;*/
}
        
img {
    width: 100%;
    margin: 0;
}
        
div.adres {
    width: 100%;
    height: auto;
    display: block;
}
        
div.adres1 {
    width: 100%;
    font-size: 2.2vh;
}
        
div.adres2 {
    /*margin: 0.5vh 0 0 0;*/
}
        
/*p.adres {
    padding-left: 20px;
    font-size: 3vw;
  color: #FFFFFF;
    margin: 0;
}*/

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
    
    /*FOOTER*/
    .grid-item4 {
        grid-column: 1 / 3;
        grid-row: 5 / 6;
        background-color: #4B371F;
    }
    
    div.stopka {
        font-size: 4.5vw;
        /*border: solid 1px yellow;*/
    }
    
}

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/





    





/*--xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

/*            PUNKTY PRZERWAŃ
    320px - 480px: urządzenia mobilne
    481px - 768px: iPady, tablety
    769px - 1024px: małe ekrany, laptopy
    1025px - 1200px: komputery stacjonarne, duże ekrany
    1201px i więcej - bardzo duże ekrany, telewizor*/


/*@media all and (max-width: 599px){...}
@media all and (min-width: 600px) and (max-width:799px){...}
@media all and (min-width: 800px) and (max-width:1024px){...}
@media all and (min-width: 700px) and (max-width: 1024px){...}
@media all and (min-width: 1025px) and (max-width: 1399px){...}
@media all and (min-width: 1400px){...}*/