* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}



header {

    background-image: url(baner.jpg);
    width: 100%;
    min-height: 80px;
    max-height: 150px;
}
header h1 {
    display: flex;
    align-content: center;
    justify-content: center;
    color: rgb(255, 0, 0);
    font-size: 8vw;
   
 box-shadow: 10px 5px 5px black;
}

.naglowek {
    display: flex;
    flex-direction: column;
    background-image: url(baner2.jpg);
    min-height: 340px;
    box-shadow: 10px 5px 5px red;
    justify-content: center;
    align-content: center;
    background-attachment: fixed;
    background-size: contain;
    background-size: cover;
}

.naglowek img {
    display: flex;
    flex-direction: column;
    width: 25vh;
    max-width: 180px;
    height: 100%;
    justify-content: center;
    align-content: center;
    margin-left: auto;
    margin-right: auto;
}

.opis {
    color: white;
    background-color: rgba(0, 0, 0, 0.651);
}
.tytul {
    color: white;

    text-align: center;
    line-height: 8vh;
    font-size: 1.3rem;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}

.opis {
    text-align: center;
    margin: 6%;
    font-size: 2vh;
}


.content {

    background-image: url(baner3.jpg);
    background-size: contain;
    background-attachment: fixed;
    min-height: 500px;
    background-size: cover;
}


.content h1 {
    text-align: center;
    padding-top: 8%;
    line-height: 6vh;
    font-size: 3vh;
    color: rgb(255, 0, 0);
    background-color: rgba(0, 0, 0, 0.337);
}

.kolumny {
    display: flex;
    font-size: 2.2vh;
    justify-content: center;
    align-items: center;
    line-height: 5vh;
    padding-top: 7%;
    flex-wrap: wrap;
    color: white;
}

.kolumna1 {
    display: flex;
    flex-direction: column;
    flex-basis: 60%;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    font-size: 4vh;
    line-height: 4vh;
    text-align: center;
    
}



.kolumna2 {
    display: flex;
    flex-direction: column;
    flex-basis: 60%;
    flex-grow: 1;
    font-size: 4vh;
    line-height: 4vh;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: 4vh;
}

.obrazek img {
    display: flex;
    height: 20vh;
    margin-top: 3vh;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-bottom: 3vh;

}

.wybierz {

    display: flex;
    background-image: url(baner33.jpg);
    background-size: contain; 
 background-attachment: fixed;
    min-height: 1000px;
    max-height: 1500px;
    justify-content: space-around;
    align-content: space-around;
    flex-wrap: wrap;
    flex-grow: 1;

;
}

.wybierz>div {

    flex-basis: 51%;
}



.zestaw1 img{

    background-color: black;
     width: 140%;
    flex-grow: 1;
    max-width: 300px;
    max-height: 300px;
    background-image: url(wybieram2.png);
}

.zestaw2 img{

    background-color: black;
    width: 140%;
    flex-grow: 1;
    max-width: 300px;
    max-height: 300px;
}

.zestaw3 img{

    background-color: black;
    width: 140%;
    flex-grow: 1;
    max-width: 300px;
    max-height: 300px;
}

.zestaw1, .zestaw2, .zestaw3 {
    display: flex;
    align-items: end;
  justify-content: center;

}


.wybierz h1 {
    display: flex;
    text-align: center;
    justify-content: center;
    font-size: 22px;
    flex-basis: 100%;
    flex-grow: 1;
    color: white;
}

.przycisk {

    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2%;
    font-size: 151%;
    max-width: 150px;
    max-height: 50px;
    font-family: 'Open Sans', sans-serif;
    padding: 2%;
    background-color: rgb(255, 36, 36);

}


.statystyki {
 display: flex;
 flex-direction: column;
 align-items: center;
 width: 100%;
 background-image: url(tlo.jpg);
 background-size: contain; 
 background-attachment: fixed;

}

.wyslanych {
    display: flex;
    flex-direction: column;
    flex-basis: 20%;
    flex-grow: 1;
   

    
}

.wyslanych img, .zadowoleni img, .dostepne img  {

    display: flex;
    flex-direction: column;
    width: 25vh;
    max-width: 180px;
    height: 100%;
    justify-content: center;
    align-content: center;
}



.zadowoleni {

    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
    align-content: center;
    text-align: center;

}

.zadowoleni img {
    padding-left: 2%;
}

.dostepne {

    display: flex;
    flex-direction: column;
    flex-basis: 40%;
    flex-grow: 1;
    justify-content: center;
    align-content: center;


}

.wyslanych span, .dostepne span, .zadowoleni span{
    line-height: 5vh;
    text-align: center;
    font-size: 2.5vh;
    color: white;
    background-color: rgba(0, 0, 0, 0.559);
}

.wyslanych span:last-child, .dostepne span:last-child, .zadowoleni span:last-child {
    font-size: 4vh;
    color: rgb(219, 15, 15);
}

.opinie {
    background-size: contain; 
    display: flex;
    flex-direction: column;
    background-color: black;
    min-height: 1000px;
    color: white;
    text-align: center;
    line-height: 22px;
    background-image: url(bann2.jpg);
    background-size: cover;
 background-attachment: fixed;




}

.nick {
    display: flex;
    flex-direction: column;
    font-size: 24px;
    flex-basis: 60%;
    line-height: 52px;
    
}


.tytul {
    line-height: 55px;
}


.opinia1 span, .opinia2 span, .opinia3 span  {

    flex-grow: 50%;
    flex-basis: 50%;
    line-height: 25px;
    margin-bottom: 3vh;
    
}

.opinia1 img, .opinia2 img, .opinia3 img {
    width: 30%;
    border-radius: 50%;
    border: 2px red solid;
    margin-top: 5vh;

}


.komentarz {

    background-color: rgba(0, 0, 0, 0.651);
}

.opinia2 {

    flex-basis: 1;
}

.opinia3 {

    flex-basis: 1;
    
}





.stopka {
    display: flex;
    flex-direction: column;
    background-color: red;
    min-height: 600px;
    text-align: center;
    background-image: url(graff2.jpg);
    background-size: cover;
 background-attachment: fixed;
 align-items: center;
}

.stopkatytul {

    font-size: 4vh;
    line-height: 6vh;
    color: red;
    background-color: rgba(0, 0, 0, 0.383);
}

.stopkaopis {
    line-height: 25px;
    margin-top: 5vh;
    color: white;
}

.stopka img {
    display: flex;
    width: 50%;
    
}

.stopkaopis {

    margin: 5%;
    font-size: 115%;
}
.regulamin {


background-color: rgb(10, 10, 10);
min-height: 40px;
min-width: 40px;
width: 100%;
text-align: center;
color: gray;



} 


.zestaw1 img, .zestaw2 img, .zestaw3 img {

    transition: 0.2s;
}

.przycisk:hover {

    scale: 1.2;
}




@media (min-width: 960px) {



header h1 {

font-size: 8vh;

}

.naglowek {

    flex-direction: row;
    flex-wrap: wrap;
}

.naglowek img {
    display: flex;
    flex-direction: row;
    flex-basis: 30%;
    max-width: 400px;

}


.opis {
    display: flex;
    flex-direction: row;
    flex-basis: 40%;
    font-size: 4vh;
    
}

.tytul {

    font-size: 5vh;
   flex-basis: 100%;
}



    .kolumna1 {
        flex-basis: 25%;
  
    }
      
    .kolumna2 {
        flex-basis: 25%;
        margin-bottom: 4%;
       
    }

    .obrazek img {
       
        flex-basis: 20%;
        height: 40vh;
    }


.content h1 {

    padding-top: 2%;
    padding-bottom: 2%;
    font-size: 4vh;
}

.kolumny {

    padding-top: 1%;
}

.wybierz {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    min-height: 800px;
    align-items: center;
    background-image: url(zaw1.png);
}

.zestaw1, .zestaw2, .zestaw3 {
    display: flex;
    flex-direction: row;
    flex-basis: 11%;
    flex-wrap: nowrap;
    margin-bottom: 5%;
}

.zestaw1 img, .zestaw2 img, .zestaw3 img {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    flex-basis: 22%;
    max-width: 450px;
    max-height: 450px;
  
}

.wybierz h1 {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex-wrap: nowrap;
    font-size: 4vh;
}

.wybierz>div {

    flex-basis: 22%;
}

.przycisk {

    width: 80%;
    max-width: 250px;
    padding: 1.5%;
    transition: 0.2s;
 
    
    
}
.statystyki  {

    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-grow: 0;
    background-image: url(zaw2.png);
    
}


.zadowoleni, .wyslanych, .dostepne {
    flex-direction: column;
    align-items: center;
    padding-left: 15%;
    flex-wrap: wrap;
    max-width:500px;
    /* background-color: rgba(0, 0, 0, 0.346); */
    
  
    
}



.wyslanych {

    flex-basis: 30%;
   
}

.zadowoleni {

    flex-basis: 30%;
   
}


.dostepne, .zadowoleni, .wyslanych {
    flex-basis: 30%;
   
}

.wyslanych span, .dostepne span, .zadowoleni span {

    flex-direction: column;
    font-size: 26px;
    background-color: rgba(0, 0, 0, 0);
}



.opinie {
    display: flex;
    flex-direction: row;
    max-height: 1200px;
    flex-wrap: wrap;
    min-height: 600px;
    justify-content: center;
    align-items: center;
    text-align: center;

}

.opinia1, .opinia2, .opinia3 {

    display: flex;
    flex-direction: column;
    flex-basis: 30%;
    min-width: 520px;
    max-width: 820px;
    align-items: center;
    flex-wrap: wrap;

}

div.opinia1 {

    flex-direction: column;
}

.opinia1 img, .opinia2 img, .opinia3 img {

    max-width: 250px;

}

.tytul {
   
    flex-wrap: wrap;
    flex-direction: row;
    flex-basis: 100%;
    text-align: center;
}

.komentarz {

    display: flex;
    flex-basis: 130%;
    flex-wrap: wrap;
    flex-direction: column;
    font-size: 22px;
}


.nick {
    flex-wrap: wrap;
    flex-direction: column
}

.stopka {

    align-items: center;
}

.stopka img {
display: flex;
width: 30%;
margin: 0;
margin-top: 3%;
}


.stopkaopis {
    font-size: 34px;
    margin: 12%;
    margin-top: 3%;
    margin-bottom: 3%;
    line-height: 43px;
}

.headerh1 {

    font-size: 44px;
    border:0;
}


.numer {

    font-size: 44px;
}

.wyslanych span:last-child, .dostepne span:last-child, .zadowoleni span:last-child {
    font-size: 54px;
    margin-bottom: 12%;
    margin-top: 12%;
    color: rgb(219, 15, 15);
    
}

.stopkatytul {

    margin-top: 3%;
}




}