/*Po dodaniu nowej zmieniej która wpływa na cała stronę należy ją dodać do @media*/
/*Po każdej zmianie w kodzie "główny"(czyli bez @media) należy sprawdzić na wszystkich rozdziezościach czy zmiana nie musi być skorygwoana w odpowiednim @media */
/*Parametry margin , width wpływające na wielkośc położenie itp. dla każej rozdzieloczości są  różne w 99% przydpaków*/
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/lato/v20/S6uyw4BMUTPHjxAwXjeu.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/lato/v20/S6uyw4BMUTPHjx4wXg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/lato/v20/S6u9w4BMUTPHh6UVSwaPGR_p.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/lato/v20/S6u9w4BMUTPHh6UVSwiPGQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  src: url(https://fonts.gstatic.com/s/lato/v20/S6u9w4BMUTPHh50XSwaPGR_p.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  src: url(https://fonts.gstatic.com/s/lato/v20/S6u9w4BMUTPHh50XSwiPGQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*html-ustawienia dla całej storny efekt płynnego scrolowania*/
html{
   scroll-behavior: smooth; 
  
}
/*body-ustawienia dla zawartości strony czcionka dla wszystkich obszarów widocznych na stronie*/
body{
    
    margin:0.1%;
    font-family: 'Lato';
}




/*header-kontener w którym znajduje się logo oraz informacje kontakowe na górze strony - width odpowiada za zajęcie całej szczerokości storny border-top i bottom - szare paski*/

header{
    width: 100%;
 border-top:5px solid  #878988;
border-bottom:5px solid  #878988;
}

/* pod parametrem a znajduje sie odnośnik do kontaktu na samym dole strony text-decoration i color usuwa nie potrzebne ozanecznie nadane przez html*/
header a {
    
  text-decoration: none;
    color: black;
   
   
}
/*logo BioSys lewy górny róg - width-wielkość obrazka padding-top oraz margin-left pozcjonują obrazek względem napisu*/
header  img {
  width: 10%;
    padding-top:1%; 
    margin-left: 2%;
}


/*pozycjonowanie- tekstu w prawym górnym rogu*/
#kont{
  
     float: right;
    padding-top: 2%;
    font-size: 18px;
    margin-right: 2%;

}

/*Pogrubienie napisu Kontakt*/
#WT{
    font-weight: bold;
    
}
/* main- w nim znajduą się wszystkie pozostałe konternery z treścią - margin odpowiada za wyśrodkowanie width- zajmuje cała szerokośc strony*/

main{

   
    margin: 0 auto;
    
    width: 100%;
}
/*selektor section-dzieli main na sekcje w nim znajudje się koljeny kontener w którym już zawrte są treści jest odpowiedzialny za zmiane tła na całej szerkości i wysokosci podanej niżej (width,min-height), margin top -powoduje odstęp od góry jeśli wartość jest ujemna działa w odwrotną stronę, min-height - odpowiada za wysokość sekcji-im większa wartość tym skecja sie wydłuża*/
section{
    
    background-color: white;
    width: 100%;
    margin:0 auto;
    min-height: 1100px;
    margin-top: -252px;
  
  
}

/*Za pomocą id- oraz słownym zapisaniu liczby są opisane wewnętrzne kontenery każdej osonej skecji (section2,section3,itd.) odpowiadją one za układ elementów. najwązniejsze parametry to width odpiwada za szerkości z wartością 80 daje równe odstepy po bokach. backgroud-color powinien być taki sam jak kolor tła jego sekecji (section) margin wyśrodkowuje kontener.*/
#jeden{
    
    width: 80%;
    background-color: white;
    margin:0 auto;
    min-height: 900px;
    z-index: 3;
    
}
/*klasa .haslo odpiwada za kontener w kótrym znajduje się  napis BioSys wspiera.....
    padding-top odpowiada za odstęp od góry- zrównuje go to z obrazkiem po prawej 
    margin-left- powoduje odsunięcie od lewej krawędzi napisu oraz zdjęcia obok - wyśrodkowanie 
    font-size - wielkośc czcionki
    width- szerkośc kontenera
    text-align- z parametrem center  centruje tekst - gdy tekst złamie sie ustawi sie on na środku pod spodem. 
    float:left - ustawia kontener po lewej stronie co paramterem widdth pozwala ustawić obok siebie dwa kontenery 
*/
.haslo{
padding-top: 10%; 
 margin-left: 8%;
    font-size: 30px;
     width: 50%;
     text-align: center;
    float: left;
}


/*#zdj123 -id- odpowiada za kontener w którym jest  zdjęcie obok napisu BioSys wspiera... float:left wraz z wartością width odpowiada za ułożenia zdjęcia obok napisu margin-left nadaje odstęp */
#zdj123{
    
    float: left;
    width: 30%;
    margin-left: 2%;
}
/*ID z img regulją wielkość  zdj za pomocą parametru width*/
#zdj123 img {
    
    width: 90%;
}

/* id #mb - mega box - w nim znajduą się kwadraty z napisaem RCP i KD 
    margin- wyśrodkowuje całość; 
     margin-left oraz top ustwiają w odpownienim miejscu
*/

/*
    kontener  opowiadający za tekst o firmie pcontrol 
    float - ustawienie do lwej 
    width - szerkośc pełna 
    text-align - wycentrowanie tekstu
*/
#info{
     float: left;
    width: 100%;
    text-align: center;
    
}
#mb{
     margin: 0 auto;
    
    margin-left: 23%;
    margin-top: 20%;
    
    /*klasa box- odpowiada za niebiseki kwadraty ,
    backgorund-color- kolor kwadratów
    height i width - wysokość i szerokość 
    margin- wyśrodkowuje całość 
    float-left pozwala na ustawienie kwadratów obok siebie 
    margin 2% odstęp od siebie kwadratów 
    box-shadow- cień dla kwadratów 
    -webki- umozliwia działanie dla każdej przeglądarki*/
}
.box{
    
    background-color:white; 
    height: 350px;
    width: 350px;
    margin: 0 auto;
    float: left;
    margin: 2%;
-webkit-box-shadow: 5px 2px 50px 3px rgba(0,0,0,0.48); 
box-shadow: 5px 2px 50px 3px rgba(0,0,0,0.48);
  
    
    
    
}


/* pod parametrem a znajduje sie odnośnik do poszczegołnych artykółow  text-decoration i color usuwa nie potrzebne ozanecznie nadane przez html*/


.box a{
    text-decoration: none;
    color: #5e93b5;
    
    /* klasa ikonki jest przezanczona dla zdj w środku kwadratów 
    paddin-left - sterowanie lewo prawo obrazkiem 
    margin-top - sterowanie góra dół */
    
}
.ikonki{
 padding-left: 25%;
    margin-top: 20%;
    width: 50%;
}

   
    /* napisy pod ikonkami  */
.box h2{
    text-align: center;
}

   
    /* sekcja 2  w którym znajudą się Zalety systemów BioSys */
#section2{
    
    background-color: #5e93b5;
    width: 100%;
    margin:0 auto;
    min-height: 1200px;
}
  
#dwa{
       width: 80%;
    background-color: #5e93b5;
    margin: 0 auto;
    min-height: 1200px;
    font-size: 30px;
    
    
    
}
#dwa p{
    
    
    text-align: center;
    color: white;
    width: 100%;
    margin: 0 auto;
    padding: 2%;
}

#tp{
    margin: 0 auto;
    width: 60%;
    margin-right: 22%;
}


/*ustawienie obrazka 
    białe tło dla obrazka jest ustawione bezpośrednio w index.html
*/
#dwa img{
    margin-left: 19%;
    margin-top: -2%;
}

/*chybaa nie aktywane */
#kolo{
  
  
      margin: 0 auto;
    width: 60%;
    margin-top: 5%;
   
}
/*ustawianie napisu Zalety systemów Biosys 
    float:left - ustawia do lewej 
     margin-left koryguje jak bardzo ma być przesuniety w bok 
     color - kolor czcionki 
     font-size - wielkość czcionki

*/
#dwa h1{
    font-size: 70px;
    float: left;
    color: white;
    margin-left: 24%;
}
/*chyba nie akywne*/
#pdwa{
    
    float: left;
    color: white;
    font-size: 30px;
    
    
}

 
/*zmiana wielkości czcionki paragrafu pod zdjęciem */
#dwa div p{
    
    font-size: 24px;
}
/*sekcja nie aktywna */
.section3{
  background-color: white;
    width: 100%;
    margin: 0 auto;
    min-height: 500px;

    z-index: 10;
}
/*nie aktywna */
#trzy
{
    width: 80%;
    background-color: white;
    margin: 0 auto;
    min-height: 500px;
 
   
}

/*nei akwywne*/

.nag{
    float: left;
    width: 80%;
    text-align: center;
    font-size: 30px;
    margin-left: 9%;
    margin-top: 5%;
   
    
}
/* nie aktywne */
#bio{
    
    color: white;
    background-color: #878988;
    width: 30%;
    margin: 0 auto;
    padding: 1%;
    
    
}
/*nieaktywne*/
#bio a{
    color: white;
 text-decoration: none;
    
}

/* chyba nieaktywne*/
.lista{
    
    float: left;
    font-size: 20px;
    
}/*nieaktywne */

.okr{
        border-radius: 50%;
    height: 500px;
    width: 500px;
    background-color:#878988 ;
    
  
    
    
}

   
/* Li odstęp pomiędzy tekstami pomiedzy listy */
li{
    padding-top:20px;
}
/*nieaktywne */

.zdj{
    padding-left: 15%; 
    padding-top: 8%;
}


/*Rejesetracja czasu pracy  */
.section4{
    background-color: white;
    width: 100%;
    margin:0 auto;
    min-height: 1300px;
    color: black;

}
#Rejestracja-Czasu-Pracy{
 width: 80%;
    background-color: white;
    margin:0 auto;
   min-height: 400px;  
}
/* ułozenie teksty/listy w kontenerze  */
.bt{
    
    float: left;
    width: 50%;
    color: black;
    font-size: 30px;
    margin-top: 10%;  
    padding: 5px;
    
}
/*ułożenie obrazka po prawej storny od listy  w skecji 4  */
#kolo2{
    
    float: right;
    width: 40%;
    margin-top: 15%;
}
/*ułożenie obrazka po prawej storny od listy   w skecji 5 */
#kolo21{
    float: right;
    width: 40%;
    margin-top: 15%;
    border-radius: 50%;
    
}

/* konfiguracja przycisku czytaj wiecej oraz przycisku dowedz sie wiecej w sekcji 5  */
.przycisk{
   
background-color:#878988;
    width: 28%;
    text-align: center;
    font-size: 16px;
    color: white;
}
.przycisk a{
    
    text-decoration: none;
    color: white;
    
}
.przycisk:hover{
    background-color: #eff8fc;
    color:#878988;
    transition: 1s;
}

.przycisk a:hover{
    background-color: #eff8fc;
    color:#878988;
    transition: 1.5s;
}


/*Kontrola dostępu - sekcja 5 - kopia sekcji 4 z innymi kolorami  */
.section5{
    background-color: #5e93b5;
    width: 100%;
    margin:0 auto;
    min-height: 1200px;

}
#Kontrola-Dostepu
{
 width: 80%;
    background-color: #5e93b5;
    margin:0 auto;
   min-height: 400px;  
}
/* kopia #bt - zmienione kolory */
#bt2{
   float: left;
    width: 50%;
    color: white;
    font-size: 30px;
    margin-top: 10%;  
    padding: 5px;  
    
}


#kolo3{
    
    background-color: #878988;
    width: 100px;
    height: 100px;
    margin: 0 auto;
    border-radius:50%;
}
/*nieaktywne */
.section6{
     background-color: #5e93b5;
    width: 100%;
    margin:0 auto;
    min-height: 1400px;
    
}
/*nieaktywne */
#szesc{
    float: left;
 width: 80%;
    background-color: #5e93b5;
    margin-left: 10%;
    text-align: center;
    
  
    color: white;
}
/*nieaktywne */
#kolo4{
    
  margin: 0 auto;
    width: 60%;
    margin-left: 5%;
}
/*nieaktywne */
#KD{
    width: 50%;
    font-size: 35px
}
/*nieaktywne */
#KD2{
    width: 30%;
    float: right;
    margin-top: 12%;
    font-size: 14px
    
}
/*nieaktywne */
#przycisk2{
    
    background-color: #878988;
    width: 50%;
    margin: 0 auto;
    padding: 2%;
}
/*sekcja z kontaktem */
.section7{
       background-color: white;
    width: 100%;
    margin:0 auto;
    min-height: 220px;
    float: left;
}

#siedem{
    width: 80%;
    background-color: white;
    margin: 0 auto;
    min-height: 200px;
    font-size: 30px;
    padding-bottom: 3%;

    
}

/*ustawienie mapy do lewej storny tak aby informacje kontkatowe oraz formualrz były obok siebie */
#form{
    
    
    float: right;
}


/* kontener wktórym znajduja się informacje kontaktowe  */
#kontakt{
    
    width: 50%;
     font-size: 20px;
  
    padding-top: 5%;
}

#kontakt a{
    color: black;
    text-decoration: none;
    font-weight: bold;
}

/*stopka strony 

    float left - odpowiada za brak przeryw pomiedzy skecjami 
    min-height reugluja wyskoksc 
    margin-top: 0 - musi być wpisane niweluje  to zmieną z sekcji section margin-top:-250px;
*/
.section8{
    float: left;
    min-height: 100px;
    background-color: #5e93b5;
    text-align: center;
    color: white;
    margin-top: 0;
    
}


/*ustawia napis copyright na środku 
 za pomocą margin - wysrodkowanie 
  margin-top: odstęp od górnej krawędzi
 
*/
.section8 h1{
    margin: 0 auto;
    margin-top: 2.5%; 
}

/*@media odpowiada za zmiane wygląda strony wzgledem szerokości/rozdzieloczsci okna przeglądarki  
W każdym z zakresów jest skopiwany cały kod css lecz ustawiony tak aby strona po zmianie szerokości wyglądała dobrze. Zmienne margin width height float , font-size itp są w 90% unikatowe dla każdego zakresu. 


*/
/*mapa dla mniejszych urządzeń - tutaj jest wyłączona w @media jest uzyte display:block i width:100%;*/
.contact__map{
    
    display: none;
}
/*Mapa na duże rozdieloczści*/
#g{
    padding-top: 5%;
    
}
@media (min-width:1401px){
    
    
}
@media (min-width:1281px) and (max-width:1400px){
   

body{
    
    
    font-family: 'Century Gothic';
    width: 100%;
}





header{
    width: 100%;
   
     
     
  
}

header img{
    
    width: 10%;
    
   
}
    
    nav{
        
        
    }




main{

   
    margin: 0 auto;
  
    width: 100%;
}

section{
    
  
    width: 100%;
    margin:0 auto;
    min-height: 1100px;
    margin-top: -15%;
  
}



#jeden{
    
    width: 80%;
   
    margin:0 auto;
   min-height: 1100px;
    
    
}

.haslo{
padding-top: 0%; 
    font-size: 50px;
     width: 50%;
     text-align: center;
   margin-left: 0;
}
    
    #zdj123{
        width: 50%;
        
    }
    #zdj123{
        
        width: 48%;
        margin-top: -8%;
    }
#bio-pco{
    width: 40%;
    float: right;
    padding-top: 13%; 
    padding-right: 6%;
    position: relative;
    z-index: 5;
}
#mb{
     margin: 0 auto;
    
    margin-left: -2%;
    margin-top: 20%;
    
    
}
.box{
    
   
        height: 300px;
    width: 300px;
    margin: 0 auto;
    float: left;
   margin: 1%;
-webkit-box-shadow: 5px 2px 50px 3px rgba(0,0,0,0.48); 
box-shadow: 5px 2px 50px 3px rgba(0,0,0,0.48);
    margin-left: 15%;
    
    
}

.box a{
    text-decoration: none;
    
    
}
.ikonki{
 padding-left: 26%;
    margin-top: 14%;
}


.box h2{
    text-align: center;
}
#section2{
    
   
    width: 100%;
    margin:0 auto;
    min-height: 1150px;
}
#dwa{
       width: 79%;
   
    margin: 0 auto;
    min-height: 700px;
    font-size: 30px;
    margin-left: 21%;
    
    
}

#info{
     float: left;
    width: 100%;
    text-align: center;
 
}


#kolo{
  
       float: none;
    margin-left: -3%;
    width: 71%;
    margin-top: -4%;
   
}
#dwa h1{
    font-size: 70px;
    float: left;
    color: white;
    margin-left: 2%;
}
    
    #dwa img{
        margin-left: 4%;
    }

#pdwa{
    
    float: left;
    color: white;
    font-size: 30px;
    text-align: center;
    margin-right: 24%;
    
    
}
 #dwa p{
    
    
    text-align: center;
    color: white;
    width: 100%;
    margin: 0 auto;
    padding: 2%;
}

#tp{
    margin: 0 auto;
    width: 72%;
    margin-left:2%;
   
}
 

#dwa div p{
    
    font-size: 29px;
}

.section3{
 
    width: 100%;
    margin: 0 auto;
    min-height: 500px;

    z-index: 10;
}
#trzy
{
    width: 80%;
   
    margin: 0 auto;
    min-height: 500px;
 
   
}

.nag{
      float: left;
    width: 80%;
    text-align: center;
         font-size: 30px;
 margin-left: 9%;
    margin-top: 5%;
   
    
}

#bio{
    
    color: white;
   
    width: 100%;
    margin: 0 auto;
    padding: 1%;
    
    
}

#bio a{
    color: white;
 text-decoration: none;
    
}


.lista{
    
    float: left;
    font-size: 20px;
    
}

.okr{
        border-radius: 50%;
    height: 500px;
    width: 500px;
    
    
  
    
    
}
li{
    padding-top:20px;
}
.zdj{
    padding-left: 15%; 
    padding-top: 8%;
}
.section4{
  
    width: 100%;
    margin:0 auto;
    min-height: 1200px;

}
#Rejestracja-czasu-pracy
{
 width: 80%;
  
    margin:0 auto;
   min-height: 1200px;  
}

.bt{
    
    float: left;
    width: 52%;
    color: black;
         font-size: 27px;
margin-top: 10%;  
    padding: 5px;
    
}
    
    .bt h3{
        font-size: 41px;
        
    }
    
    #s4t{
        font-size: 16px;
    }

#kolo2{
    
    float: right;
    width: 38%;
    margin-top: 15%;
}
    
    #kolo21{
        
        width: 38%;
    }
.przycisk{
    

    width: 50%;
    text-align: center;
    
    margin-left: 23%;
}
.section5{

   width: 100%;
    margin:0 auto;
    min-height: 1100px; 
    
}
#Kontrola-Dostepu
{
     width: 80%;
  
    margin:0 auto;
   min-height: 1100px;     

    
}
    
    #bt2{
        
         float: left;
    width: 52%;
    color: white;
         font-size: 27px;
margin-top: 10%;  
    padding: 5px;
    }
    
    #bt2 h3{
        
         font-size: 41px;
    }

#kolo3{
    
    
    width: 100px;
    height: 100px;
    margin: 0 auto;
    border-radius:50%;
}

.section6{
    
    width: 100%;
    margin:0 auto;
    min-height: 1200px;
    color: white;
    
}

#szesc{
    float: left;
 width: 80%;
    
    margin-left: 10%;
    text-align: center;
    
  
    
}

#kolo4{
    
      margin: 0 auto;
    width: 55%;
    margin-left: -2%;
}

#KD{
        width: 100%;
    font-size: 21px;
}

#KD2{
       width: 100%;
    float: right;
    margin-top: 1%;
    font-size: 17px;
}
    
    
    #przycisk2{
    
  
    width: 50%;
    margin: 0 auto;
    padding: 2%;
        color:white;
}

.section7{
    
    width: 100%;
    margin:0 auto;
    min-height: 300px;
    float: left;
}

#siedem{
    width: 80%;
 
    margin: 0 auto;
    min-height: 300px;
    font-size: 30px;

    
}
#siedem h1{
    
    
}

#form{
    
       margin: 0 auto;
    margin-left: 30%;
    float: right;
}

input{
    width:  50%;
    float: left;
    height: 50px;
    font-size: 20px;
    
}
textarea{
     height: 50px;
    width:  50%;
    float: left;
     height: 50px;
}

#kontakt{
    
    width: 100%;
    text-align: center;
    font-size: 30px;
}


.section8{
    float: left;
    min-height: 100px;
     color: white;
    background-color: #5e93b5;
    text-align: center;
    
}

.section8 h1{
    margin: 0 auto;
    margin-top: 2.5%; 
}

    #g{
       display: none; 
    }
    .contact__map{
        
        display: block;
        width: 100%;
    }
    
}
@media (min-width: 1024px) and (max-width:1280px){
   

body{
   
    
   font-family: 'Century Gothic';
    width: 100%;
}

#wyl{
     display: none;   
        
    }



header{
    width: 100%;
    
     
     
  
}

header img{
    
    width: 30%;
    margin-left: 35%;
   
}




main{

   
    margin: 0 auto;
    
    width: 100%;
}

section{
    
  
    width: 100%;
    margin:0 auto;
    min-height: 2000px;
    margin-top:-16%;
  
}



#jeden{
    
    width: 80%;
  
    margin:0 auto;
   min-height: 1100px;
    
    
}
    
    #zdj123{
        
        width: 100%;
        
    }
    
    #zdj123{
        
        width: 100%;
        margin-top: -20%;
    }
    
    #kont{
        
        font-size: 30px;
    }

.haslo{

    font-size: 50px;
     width: 100%;
     text-align: center;
    margin-left: 0;
}
#bio-pco{
    width: 40%;
    float: right;
    padding-top: 13%; 
    padding-right: 6%;
    position: relative;
    z-index: 5;
}
#mb{
     margin: 0 auto;
    
    margin-left: -2%;
    margin-top: 20%;
    
    
}
.box{
    
     
    /* height: 320px; */
    /* width: 383px; */
    margin: 0 auto;
    float: left;
    margin: 1%;
    margin-left: 7%;
    -webkit-box-shadow: 5px 2px 50px 3px rgb(0 0 0 / 48%);
    box-shadow: 5px 2px 50px 3px rgb(0 0 0 / 48%);
    
    
}

.box a{
    text-decoration: none;
    color: #5e93b5;
    
}
.ikonki{
 padding-left: 26%;
    margin-top: 10%;
}


.box h2{
    text-align: center;
}
#section2{
    
   
    width: 100%;
    margin:0 auto;
    min-height: 950px;
}
#dwa{
       width: 79%;
   
    margin: 0 auto;
    min-height: 700px;
    font-size: 30px;
    margin-left: 21%;
    
    
}

#info{
     float: left;
    width: 100%;
    text-align: center;
    
}


#kolo{
  
         float: none;
    margin-left: 2%;
    width: 70%;
    margin-top: -2%;
   
}
#dwa h1{
        font-size: 70px;
    float: left;
    color: white;
    margin-left: -10%;
}
    
    #dwa img{
        
        margin-left: 4%;
    }

#pdwa{
    
      float: left;
    color: white;
    font-size: 44px;
    text-align: center;
    margin-right: 24%;
    
    
}
 #dwa p{
    
    
    text-align: center;
    color: white;
    width: 100%;
    margin: 0 auto;
    padding: 2%;
}

#tp{
    margin: 0 auto;
    width: 78%;
    margin-left:-2%;
   
}
 

#dwa div p{
    
    font-size: 30px;
}

.section3{

    width: 100%;
    margin: 0 auto;
    min-height: 500px;

    z-index: 10;
}
#trzy
{
    width: 80%;
   
    margin: 0 auto;
    min-height: 500px;
 
   
}

.nag{
        float: left;
    width: 80%;
    text-align: center;
    font-size: 30px;
    margin-left: 11%;
    margin-top: 12%;
}
   
 #bio{
    
    color: white;
   
    width: 100%;
    margin: 0 auto;
    padding: 1%;
    
    
}

#bio a{
    color: white;
 text-decoration: none;
    
}


.lista{
    
    float: left;
    font-size: 20px;
    
}

.okr{
        border-radius: 50%;
    height: 500px;
    width: 500px;
   
    
  
    
    
}
li{
    padding-top:20px;
}
.zdj{
    padding-left: 15%; 
    padding-top: 8%;
}
.section4{
   
    width: 100%;
    margin:0 auto;
    min-height: 2100px;

}
#Rejestracja-czasu-pracy
{
 width: 80%;
   
    margin:0 auto;
   min-height: 800px;  
}

.bt{
    
    float: left;
    width: 100%;
    color: black;
         font-size: 30px;
margin-top: 10%;  
    padding: 5px;
    
}
    
    .bt h3{
        font-size: 71px;
        
    }
    
    #s4t{
        font-size: 16px;
    }

#kolo2{
    
    float: right;
    width: 99%;
    margin-top: 6%;
}
    
      #kolo21{
        float: right;
    width: 99%;
    margin-top: 15%;
    border-radius: 50%;
        
    }
.przycisk{
    

    width: 50%;
    text-align: center;
    
    margin-left: 23%;
}
.section5{
 
    width: 100%;
    margin:0 auto;
    min-height: 2100px;
    
}
#Kontrola-Dostepu
{
  width: 80%;
   
    margin:0 auto;
   min-height: 800px;     

    
}

    
    #bt2{
          float: left;
    width: 100%;
    color: white;
         font-size: 30px;
margin-top: 10%;  
    padding: 5px; 
        
    }
    
    #bt2 h3{
        
        font-size:71px;
    }
#kolo3{
    
  
    width: 100px;
    height: 100px;
    margin: 0 auto;
    border-radius:50%;
}

.section6{
      background-color: white;
    width: 100%;
    margin:0 auto;
    min-height: 1250px;
    
}

#szesc{
    float: left;
 width: 80%;
    background-color: white;
    margin-left: 10%;
    text-align: center;
    
  
    color: black;
}

#kolo4{
    
      margin: 0 auto;
    width: 60%;
    margin-left: 2%;
}

#KD{
        width: 100%;
    font-size: 21px;
}

#KD2{
       width: 100%;
    float: right;
    margin-top: 1%;
    font-size: 17px;
}
    
    
    #przycisk2{
    
   
    width: 50%;
    margin: 0 auto;
    padding: 2%;
        color: white;
}

.section7{
        background-color: white;
    width: 100%;
    margin:0 auto;
    min-height: 300px;
    float: left;
}

#siedem{
    width: 80%;
    background-color: white;
    margin: 0 auto;
    min-height: 300px;
    font-size: 30px;

    
}
#siedem h1{
    
    
}

#form{
    
       margin: 0 auto;
    margin-left: 30%;
    float: right;
}

input{
    width:  50%;
    float: left;
    height: 50px;
    font-size: 20px;
    
}
textarea{
     height: 50px;
    width:  50%;
    float: left;
     height: 50px;
}

#kontakt{
    
    width: 100%;
    text-align: center;
    font-size: 25px;
    
}


.section8{
    float: left;
    min-height: 70px;
    color: white;
    text-align: center;
      background-color: #5e93b5;
    
}

.section8 h1{
    margin: 0 auto;
    margin-top: 2.5%; 
}

    #g{
        
        display: none;
        
    }
    
    .contact__map{
        
        display: block;
        width: 100%;
    }
   
}
@media (min-width: 768px) and (max-width:1023px){
   

body{

    
    font-family: 'Century Gothic';
    width: 100%;
}


#wyl{
     display: none;   
        
    }


header{
    width: 100%;
  
     
     
  
}

header img{
    
    width: 30%;
    margin-left: 35%;
   
}




main{

   
    margin: 0 auto;
   
    width: 100%;
}

section{
    
    background-color: white;
    width: 100%;
    margin:0 auto;
    min-height: 2000px;
    margin-top: -15%;
    
  
}

    #zdj123{
        width: 100%;
    }
    #zdj123 img {
        width: 100%;
        margin-top: -30%;
    }


#jeden{
    
    width: 80%;
    background-color: white;
    margin:0 auto;
   min-height: 1100px;
    
    
}

.haslo{
padding-top: 15%; 
    font-size: 50px;
     width: 100%;
     text-align: center;
    margin-left: 0;
    
}
#bio-pco{
    width: 40%;
    float: right;
    padding-top: 13%; 
    padding-right: 6%;
    position: relative;
    z-index: 5;
}
#mb{
    margin: 0 auto;
    margin-left: 20%;
    margin-top: 20%;
    
    
}
.box{
    
        
    height: 300px;
    width: 300px;
    margin: 0 auto;
    float: left;
    margin: 6%;
    -webkit-box-shadow: 5px 2px 50px 3px rgb(0 0 0 / 48%);
    box-shadow: 5px 2px 50px 3px rgb(0 0 0 / 48%);
    
    
}

.box a{
    text-decoration: none;
    color: #5e93b5;
    
}
.ikonki{
 padding-left: 27%;
    margin-top: 14%;
}


.box h2{
    text-align: center;
}
#section2{
    
   
    width: 100%;
    margin:0 auto;
    min-height: 850px;
}
#dwa{
    width: 79%;
   
    margin: 0 auto;
    min-height: 700px;
    font-size: 30px;
    margin-left: 18%;
    
    
}

#info{
     float: left;
    width: 100%;
    text-align: center;
   
}


#kolo{
  
         float: none;
    margin-left: -4%;
    width: 89%;
    margin-top: -7%;
}
    #dwa h1{
    font-size: 55px;
    float: left;
    color: white;
        text-align: center;
        margin-left: -10%;
}

    #dwa img{
        
        margin-left: -4%;
        margin-top: 2%;
    }
#pdwa{
    
       float: left;
    color: white;
    font-size: 35px;
    text-align: center;
    margin-right: 18%;
    margin-top: 7%;
    
    
}

  #dwa p{
    
    
    text-align: center;
    color: white;
    width: 100%;
    margin: 0 auto;
    padding: 2%;
}

#tp{
    margin: 0 auto;
    width: 90%;
    margin-left:-6%;
   
}

#dwa div p{
    
    font-size: 23px;
}

.section3{
  background-color: white;
    width: 100%;
    margin: 0 auto;
    min-height: 500px;

    z-index: 10;
}
#trzy
{
      width: 80%;
    background-color: white;
    margin: 0 auto;
    min-height: 500px;
    margin-left: 11%;
 
   
}

.nag{
      float: left;
    width: 80%;
    text-align: center;
         font-size: 30px;
 margin-left: 9%;
    margin-top: 5%;
   
    
}

#bio{
    
    color: white;
  
    width: 100%;
    margin: 0 auto;
    padding: 1%;
    
    
}

#bio a{
    color: white;
 text-decoration: none;
    
}


.lista{
    
    float: left;
    font-size: 20px;
    
}

.okr{
        border-radius: 50%;
    height: 500px;
    width: 500px;
 
    
  
    
    
}
li{
    padding-top:20px;
}
.zdj{
    padding-left: 15%; 
    padding-top: 8%;
}
.section4{
 
    width: 100%;
    margin:0 auto;
    min-height: 1600px;

}
#Rejestracja-czasu-pracy
{
 width: 80%;
  
    margin:0 auto;
   min-height: 800px;  
}

.bt{
    
    float: left;
    width: 100%;
    color: black;
         font-size: 23px;
margin-top: 10%;  
    padding: 5px;
    
}
    
    .bt h3{
        font-size: 42px;
        
    }
    
    #s4t{
        font-size: 16px;
    }

#kolo2{
    
        float: right;
    width: 101%;
    margin-top: 5%;
}
    
      #kolo21{
        float: right;
    width: 99%;
    margin-top: 15%;
    border-radius: 50%;
        
    }
.przycisk{
    

    width: 50%;
    text-align: center;
    
    margin-left: 23%;
}
.section5{
 
   width: 100%;
    margin:0 auto;
    min-height: 1600px;
    
}
#Kontrola-Dostepu
{
    width: 80%;
  
    margin:0 auto;
   min-height: 800px;   

    
}
    
    #bt2{
        
        float: left;
    width: 100%;
    color: white;
         font-size: 23px;
margin-top: 10%;  
    padding: 5px;
    }
    
    #bt2  h3{
        font-size: 42px;
        
    }

#kolo3{
    
  
    width: 100px;
    height: 100px;
    margin: 0 auto;
    border-radius:50%;
}

.section6{
    
    width: 100%;
    margin:0 auto;
    min-height: 1100px;
    background-color: white;
    
}

#szesc{
    float: left;
 width: 80%;
    background-color: white;
    margin-left: 10%;
    text-align: center;
    
  
    color: black;
}

#kolo4{
    
      margin: 0 auto;
    width: 60%;
    margin-left: -2%;
}

#KD{
        width: 100%;
    font-size: 21px;
}

#KD2{
       width: 100%;
    float: right;
    margin-top: 1%;
    font-size: 17px;
}
    
    
    #przycisk2{
    
      
    width: 50%;
    margin: 0 auto;
    padding: 2%;
    margin-left: 24%;
        color: white;
}

.section7{
        background-color: white;
    width: 100%;
    margin:0 auto;
    min-height: 320px;
    float: left;
}

#siedem{
    width: 80%;
  background-color: white;
    margin: 0 auto;
    min-height: 300px;
    font-size: 30px;

    
}
#siedem h1{
    
    
}

#form{
    
       margin: 0 auto;
    margin-left: 30%;
    float: right;
}

input{
    width:  50%;
    float: left;
    height: 50px;
    font-size: 20px;
    
}
textarea{
     height: 50px;
    width:  50%;
    float: left;
     height: 50px;
}

#kontakt{
    
    width: 100%;
    text-align: center;
    font-size: 24px;
}


.section8{
    float: left;
    min-height: 60px;
   background-color: #5e93b5;
    text-align: center;
    color: white;
    
}

.section8 h1{
    margin: 0 auto;
    margin-top: 2.5%; 
}

    #g{
        display: none;
        
    }  
    
    .contact__map{
        display: block;
        width: 100%;
    }
    
}
@media (min-width: 481px) and (max-width:767px) {
   

body{
  
    
    font-family: 'Century Gothic';
    width: 100%;
}

#wyl{
     display: none;   
        
    }



header{
    width: 100%;
  
     
     
  
}

header img{
    
    width: 30%;
    margin-left: 35%;
   
}




main{

   
    margin: 0 auto;
    
    width: 100%;
}

section{
    
  
    width: 100%;
    margin: 0 auto;
    min-height: 1805px;
    margin-top: -16%;
  
}

    #zdj123{
        
        width: 100%;
    }
    #zdj123 img{
        
        width: 100%;
        margin-top:-35%;
    }

#jeden{
    
    width: 80%;
  
    margin:0 auto;
   min-height: 1100px;
    
    
}

.haslo{
padding-top: 15%; 
    font-size: 50px;
     width: 100%;
     text-align: center;
    margin-left: 0;
}
#bio-pco{
    width: 40%;
    float: right;
    padding-top: 13%; 
    padding-right: 6%;
    position: relative;
    z-index: 5;
}
#mb{
     margin: 0 auto;
    
    margin-left: -2%;
    margin-top: 20%;
    
    
}
.box{
    

    height: 209px;
    width: 209px;
    margin: 0 auto;
    float: left;
    margin: 2%;
    margin-left: 5%;
    -webkit-box-shadow: 5px 2px 50px 3px rgb(0 0 0 / 48%);
    box-shadow: 5px 2px 50px 3px rgb(0 0 0 / 48%);
}
    .box a{
    text-decoration: none;
    color: #5e93b5;
    
}
.ikonki{

    padding-left: 26%;
    margin-top: 8%;

}


.box h2{
    text-align: center;
}
#section2{
    
   
    width: 100%;
    margin:0 auto;
    min-height: 700px;
}
#dwa{
       width: 79%;
  
    margin: 0 auto;
    min-height: 700px;
    font-size: 30px;
    margin-left: 21%;
    
    
}

#info{
     float: left;
    width: 100%;
    text-align: center;
    
}


#kolo{
  
    float: none;
    margin-left: -14%;
    width: 102%;
    margin-top: -4%;
   
}
#dwa h1{
       font-size: 51px;
    float: left;
    color: white;
    margin-left: -24%;
    text-align: center;
}
    
    #dwa img{
        
        margin-left: -13%;
    }
    
     #dwa p{
    
    
    text-align: center;
    color: white;
    width: 100%;
    margin: 0 auto;
    padding: 2%;
}

#tp{
    margin: 0 auto;
    width: 100%;
    margin-left:-14%;
   
}
    
    
    

#pdwa{
    
    float: left;
    color: white;
    font-size: 30px;
    text-align: center;
    margin-right: 24%;
    
    
}

 

#dwa div p{
    
    font-size: 20px;
}

.section3{
  
    width: 100%;
    margin: 0 auto;
    min-height: 500px;

    z-index: 10;
}
#trzy
{
    width: 80%;
   
    margin: 0 auto;
    min-height: 500px;
 
   
}

.nag{
        float: left;
    width: 80%;
    text-align: center;
    font-size: 30px;
    margin-left: 9%;
    margin-top: 15%;
    
}

#bio{
    
    color: white;

    width: 100%;
    margin: 0 auto;
    padding: 1%;
    
    
}

#bio a{
    color: white;
 text-decoration: none;
    
}


.lista{
    
    float: left;
    font-size: 20px;
    
}

.okr{
        border-radius: 50%;
    height: 500px;
    width: 500px;
  
    
  
    
    
}
li{
    padding-top:20px;
}
.zdj{
    padding-left: 15%; 
    padding-top: 8%;
}
.section4 {
   
    width: 100%;
    margin: 0 auto;
    min-height: 1475px;
}
    Rejestracja-czasu-pracy
{
 width: 80%;
   
    margin:0 auto;
   min-height: 800px;  
}

.bt{
    
    float: left;
    width: 100%;
    color: black;
         font-size: 17px;
margin-top: 10%;  
    padding: 5px;
    
}
    
    .bt h3{
        font-size: 32px;
        
    }
    
    ul{
        
        font-size: 20px;
    }
    
    #s4t{
        font-size: 16px;
    }

#kolo2{
    
    float: right;
    width: 99%;
    margin-top: 15%;
}
    
    
    
    #kolo21{
        float: right;
    width: 99%;
    margin-top: 15%;
    border-radius: 50%;
        
    }
.przycisk{
    

    width: 50%;
    text-align: center;
    
    margin-left: 23%;
}
    
    
    
.section5{
 
    width: 100%;
    margin: 0 auto;
    min-height: 1400px;
   
}
#Kontrola-Dostepu
{
    width: 80%;
   
    margin:0 auto;
   min-height: 800px;     

    
}
    
    #bt2{
        
        float: left;
    width: 100%;
    color: white;
         font-size: 17px;
margin-top: 10%;  
    padding: 5px;
    }
    
    #bt2 h3{
        
        font-size: 32px;
    }

#kolo3{
    
   
    width: 100px;
    height: 100px;
    margin: 0 auto;
    border-radius:50%;
}

.section6{
   background-color: white;
    width: 100%;
    margin:0 auto;
    min-height: 1000px;
    
}

#szesc{
    float: left;
 width: 80%;
   background-color: white;
    margin-left: 10%;
    text-align: center;
    
  
    color: black;
}

#kolo4{
    
         margin: 0 auto;
    width: 60%;
    margin-left: 3%;
}

#KD{
        width: 100%;
    font-size: 21px;
}

#KD2{
       width: 100%;
    float: right;
    margin-top: 1%;
    font-size: 17px;
}
    
    
    #przycisk2{
    
   
    width: 50%;
    margin: 0 auto;
    padding: 2%;
        color:white;
}

.section7{
          background-color: white;
    width: 100%;
    margin:0 auto;
    min-height: 300px;
    float: left;
}

#siedem{
    width: 80%;
     background-color: white;
    margin: 0 auto;
    min-height: 320px;
    font-size: 30px;

    
}
#siedem h1{
    
    
}

#form{
    
       margin: 0 auto;
    margin-left: 30%;
    float: right;
}

input{
    width:  50%;
    float: left;
    height: 50px;
    font-size: 20px;
    
}
textarea{
     height: 50px;
    width:  50%;
    float: left;
     height: 50px;
}

#kontakt{
     width: 100%;
   
    font-size: 25px;
    text-align: center;
}


.section8{
    float: left;
    min-height: 60px;
background-color: #5e93b5;
    text-align: center;
    color: white;
    
}

.section8 h1{
    margin: 0 auto;
    margin-top: 2.5%;
     
}
    #g{
        display: none;
        
    }
    .contact__map{
    
    display: block;
    width: 100%;
}

}
@media (min-width: 320px) and (max-width:480px){
   

body{
   
    
    font-family: 'Century Gothic';
    width: 100%;
}



    #wyl{
     display: none;   
        
    }

header{
    width: 100%;
  
     
     
  
}

header img{
    
    width: 30%;
    margin-left: 35%;
   
}




main{

   
    margin: 0 auto;
  
    width: 100%;
}
    
    #zdj123{
        
        width: 100%;
        margin-top: -30%;
    }
    #zdj123 img {
        
        width: 100%;
    }

section{
    
   
    width: 100%;
    margin:0 auto;
    min-height: 2100px;
    
  
}



#jeden{
    
    width: 80%;

    margin:0 auto;
   min-height: 1100px;
    
    
}

.haslo{

    font-size: 44px;
     width: 100%;
     text-align: center;
    margin-left: 0;
}
#bio-pco{
    width: 40%;
    float: right;
    padding-top: 13%; 
    padding-right: 6%;
    position: relative;
    z-index: 5;
}
#mb{
     margin: 0 auto;
    
    margin-left: -2%;
    margin-top: 20%;
    
    
}
.box{
    
   
        height: 300px;
    width: 300px;
    margin: 0 auto;
    float: left;
   margin: 2%;
-webkit-box-shadow: 5px 2px 50px 3px rgba(0,0,0,0.48); 
box-shadow: 5px 2px 50px 3px rgba(0,0,0,0.48);
    
    
}

.box a{
    text-decoration: none;
    color: #5e93b5;
    
}
.ikonki{
 padding-left: 26%;
    margin-top: 10%;
}


.box h2{
    text-align: center;
}
#section2{
    
 
    width: 100%;
    margin:0 auto;
    min-height: 800px;
}
#dwa{
       width: 79%;
   
    margin: 0 auto;
    min-height: 700px;
    font-size: 30px;
    margin-left: 21%;
    
    
}
    #dwa p{
    
    
    text-align: center;
    color: white;
    width: 100%;
    margin: 0 auto;
    padding: 2%;
}

#tp{
    margin: 0 auto;
    width: 100%;
    margin-left:-14%;
   
}

#info{
     float: left;
    width: 100%;
    text-align: center;
    
}


#kolo{
  
       float: none;
    margin-left: -23%;
    width: 123%;
    margin-top: -22%;
   
}
    

#dwa h1{
    font-size: 55px;
    float: left;
    color: white;
    margin-left: -22%;
    text-align: center;
}
    #dwa img{
        margin-top: 2%;
        margin-left: -25%;
    }

#pdwa{
    
    float: left;
    color: white;
    font-size: 30px;
    text-align: center;
    margin-right: 24%;
    
    
}

 

#dwa div p{
    
    font-size: 20px;
}

.section3{
 
    width: 100%;
    margin: 0 auto;
    min-height: 500px;

    z-index: 10;
}
#trzy
{
    width: 80%;
   
    margin: 0 auto;
    min-height: 500px;
 
   
}

.nag{
      float: left;
    width: 80%;
    text-align: center;
         font-size: 30px;
 margin-left: 9%;
    margin-top: 5%;
   
    
}

#bio{
    
    color: white;
  
    width: 100%;
    margin: 0 auto;
    padding: 1%;
    
    
}

#bio a{
    color: white;
 text-decoration: none;
    
}


.lista{
    
    float: left;
    font-size: 20px;
    
}

.okr{
        border-radius: 50%;
    height: 500px;
    width: 500px;
   
    
  
    
    
}
li{
    padding-top:20px;
}
.zdj{
    padding-left: 15%; 
    padding-top: 8%;
}
.section4{
  
    width: 100%;
    margin:0 auto;
    min-height: 1300px;

}
#Rejestracja-czasu-pracy
{
 width: 80%;
   
    margin:0 auto;
   min-height: 800px;  
}

.bt{
    
    float: left;
    width: 100%;
    color: black;
         font-size: 17px;
margin-top: 10%;  
    padding: 5px;
    
}
    
    .bt h3{
        font-size: 22px;
        
    }
    
    #s4t{
        font-size: 16px;
    }

#kolo2{
    
    float: right;
    width: 99%;
    margin-top: 15%;
}
    
    #kolo21{
        float: right;
    width: 99%;
    margin-top: 15%;
        border-radius: 50%;
        
    }
.przycisk{
    

    width: 64%;
    text-align: center;
    font-size: 17px;
    margin-left: 14%;
}
.section5{

  width: 100%;
    margin:0 auto;
    min-height: 1300px; 
    
}
#Kontrola-Dostepu
{
  width: 80%;
   
    margin:0 auto;
   min-height: 800px;  
}   
#bt2{
     
    float: left;
    width: 100%;
    color: white;
         font-size: 17px;
margin-top: 10%;  
    padding: 5px;
    
}
#bt2 h3{
        font-size: 22px;
        
    }


#kolo3{
    
  
    width: 100px;
    height: 100px;
    margin: 0 auto;
    border-radius:50%;
}

.section6{
   background-color: white;
    width: 100%;
    margin:0 auto;
    min-height: 1200px;
    
}

#szesc{
    float: left;
 width: 80%;
   background-color: white;
    margin-left: 10%;
    text-align: center;
    
  
    color: black;
}

#kolo4{
    
      margin: 0 auto;
    width: 60%;
    margin-left: -2%;
}

#KD{
        width: 100%;
    font-size: 21px;
}

#KD2{
       width: 108%;
    float: right;
    margin-top: 1%;
    font-size: 13px;
}
    
    
    #przycisk2{
    
   
    width: 50%;
    margin: 0 auto;
    padding: 2%;
        color: white;
        margin-left: 29%;
}

.section7{
     background-color: white;
    width: 100%;
    margin:0 auto;
    min-height: 300px;
    float: left;
}

#siedem{
    width: 80%;
   background-color: white;
    margin: 0 auto;
    min-height: 300px;
    font-size: 30px;

    
}
#siedem h1{
    
    
}

#form{
    
       margin: 0 auto;
    margin-left: 30%;
    float: right;
}
    iframe{
        width: 200px;
        height: 100px;
        
    }

input{
    width:  50%;
    float: left;
    height: 50px;
    font-size: 20px;
    
}
textarea{
     height: 50px;
    width:  50%;
    float: left;
     height: 50px;
}

#kontakt{
    
    width: 100%;
   
    text-align: center;
}


.section8{
    float: left;
    min-height: 40px;
      background-color: #5e93b5;
    text-align: center;
    color: white;
   
    
}

.section8 h1{
    margin: 0 auto;
    margin-top: 2.5%; 
     font-size: 15px;
}

.contact__map{
    
    display: block;
    width: 100%;
}
    
    #g{
        display: none;
    }
    
}