body {
    padding: 0;
    margin: 0;
    font-family: 'Rubik', sans-serif;
    transition: backdrop-filter 0.5s ease;
}

/*<---------------------------------logos--------------------------------------------->*/
#logos {
    border-bottom: 0.159659393vw solid black;
    background-color: #f4f4f4;
    width: 100%;
}

#logos #logo3 {
    width: 15.965939329%;
    padding-left: 41.51144225%;
}
/*
#logos li a {
    text-decoration: none;
    color: black;
    font-size: 1.064395955%;
}

#logos ul {
    list-style: none;
    margin-left: 10.643959553%;
    margin-top: 3.193187865%;
    padding: 0;
    display: flex;
    gap: 2.12879191vw;
    align-items: center;
    float: left;
}

#logos ul li {
    padding: 0 0.532197977vw; 
    width: auto; 
}
*/
/*<---------------------------------top--------------------------------------------->*/
#top {
    height: 9.04736562%;
    width: 100%;
    float: left;
    margin-bottom: 1.064395955%;
}
#top ul {
    list-style: none;
    margin-left: 30.867482703%;
    padding-top: 4.257583821%;
    margin-top: 3.193187865%;
    padding: 0;
    display: flex;
    gap: 1.064395955%; 
}

#top li {
    margin: 0;
    padding: 0;
}

#top li a {
    text-decoration: none;
    color: black;
    transition: border-bottom 0.4s ease;
    font-size: 1.17083555vw;
    padding: 0px 1.064395955vw; 
    border-bottom: 0.106439595vw solid transparent;
    position: relative;
}

#top li a:hover {
    border-bottom: 0.106439595vw solid black;
}

/*<---------------------------------menu--------------------------------------------->*/
#menu {
    background-image: url(obrazy/pattern4-1.png);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    width: 100%;
    height: 37.253858435vw;
    margin-top: 9.04736562vw;
    border-radius: 0.532197977vw;
}



 .blok {
    width: 13.304949441vw;
    height: 18.626929217vw;
    margin: 0.798296966vw;
    outline: white 0.159659393vw solid;
    border-radius: 0.266098988vw;
    float: left;
    background-color: white;
    overflow: hidden;
    position: relative;
    margin-left: 3.991484832vw;
    margin-top: 5.321979776vw;
    margin-bottom: 2.12879191vw;
    transition: transform 0.25s ease-in;
}

 .blok img {
    width: 100%;
    height: 100%;
}


 #bloki {
    margin-left: 20.755721128vw;
}




.karuzela {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.karuzela-srodek {
    display: flex;
    width: 100%;
    height: 100%;
}

.karuzela-srodek img {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
}

.blok1 .karuzela-srodek {
    animation: slide 12s infinite;
    animation-delay: 0s;
}

.blok2 .karuzela-srodek {
    animation: slide 12s infinite;
    animation-delay: 2s;
}

.blok3 .karuzela-srodek {
    animation: slide 12s infinite;
    animation-delay: 1s;
}

@keyframes slide {
    0% { transform: translateX(0); }
    33.33% { transform: translateX(0); }
    40% { transform: translateX(-100%); }
    73.33% { transform: translateX(-100%); }
    80% { transform: translateX(-200%); }
    100% { transform: translateX(-200%); }
}


/*<---------------------------------section1--------------------------------------------->*/
#section1 {
    margin: 0;
    height: 3.991484832vw;
    padding-bottom: 3.193187865vw;
    text-decoration: none;
}

#section1 ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    text-decoration: none;
    white-space: nowrap;
    width: 70%;
    margin-bottom: 2.660989888vw;
    margin-left: 21.287919105vw;
}

#section1 ul li {
    display: inline-block;
    padding: 0.532197977vw;
    white-space: nowrap;
    box-sizing: border-box;
    margin-top: 0.798296966vw;
}

#section1 ul li a {
    text-decoration: none;
    font-size: 0.957956359vw;
    color: white;
    padding: 0.532197977vw 0.798296966vw;
    padding-left: 4.789781798vw;
    padding-right: 4.789781798vw;
}

#section1 a {
    margin-top: 5.321979776vw;
    text-decoration: none;
    color: black;
    font-size: 1.064395955vw;
}

#section1 ul li  {
    border-bottom: 2px solid transparent;
    position: relative;
    transition: border-bottom 0.3s ease;
}

#section1 ul li:hover {
    border-bottom: 2px solid white;
}



/*<---------------------------------main--------------------------------------------->*/
#main {
    height: 26.609898882vw;
    background-color: #E6E6E6;
    justify-content: center;
    position: relative;
}

#main #opis{
    border: 0.266098988vw solid black;
    border-radius: 1.064395955vw;
    width: 42.575838211vw;
    height: 15.965939329vw;
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    justify-content: center; 
    align-items: center;
}

#main #opis p{
    margin: 1.064395955vw;
    font-size: 1.064395955vw;
    text-align:  center;
    padding: 1.330494944vw;
}




#main .akcesoria{
    text-align: center;
    padding-top: 5.321979776vw;
}


#main .akcesoria h2{
    font-size: 1.703033528vw;
}

#main .akcesoria h4{
    font-size: 1.011176157vw;
}


#main2 #bloki{
    margin-left: 39%;
}
#main2 .blok{
    outline: black 0.159659393vw solid;
}

#main2 .blok1 .karuzela-srodek {
    animation: slide 8s infinite;
}



#main2  {
        height: 55vw;
        color: black;
    }

#main2 #tematy{
        width: 79.829696647vw;
        height: 47.897817988vw;
        margin-left: 5.321979776vw;
        margin-top: 6.65247472vw;
    }
    
.temat{
        width: 53.219797764vw;
        height: 200px;
        border: 0.159659393vw solid black;
        border-radius: 30px;
        margin-left: 18.626929217vw;
        margin-top: 3.991484832vw;
        text-align: center;
        transition: transform 0.3s ease-in-out;
    }

 .temat:hover{

    transform: scale(1.1);
 }


 #main3 {
    height: 63.863757317vw;
    background-color: #E6E6E6;
    display: flex;
    justify-content: center;
    position: relative;
}

#main3 #karta {
    width: 53.219797764vw;
    height: 53.219797764vw;
    background-color: white;
    border-radius: 2.12879191vw;
    margin-top: auto;
    margin-bottom: auto;
}

#karta #logowanie i{
    color: grey;
    font-size: 0.798296966vw;
}


#main4{
    height: 55.880787653vw;
}

#main4 #kontakt{
    border: 0.266098988vw solid black;
    border-radius: 1.064395955vw;
    width: 42.575838211vw;
    height: 18.626929217vw;
    position: relative; 
    top: 20%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    text-align: center;
    justify-content: center; 
    align-items: center;
}


#main4 #sociale{
    border: 0.266098988vw solid black;
    border-radius: 1.064395955vw;
    width: 42.575838211vw;
    height: 26.609898882vw;
    position: relative; 
    top: 35%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    text-align: center;
    justify-content: center; 
    align-items: center;
    float: left;
}


#main2 #oboz{
    border: 0.266098988vw solid black;
    border-radius: 1.064395955vw;
    width: 42.575838211vw;
    height: 15.965939329vw;
    position: relative; 
    top: 30%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    text-align: center;
    justify-content: center; 
    align-items: center;
    float: left;
}

#main2 #oboz p{
    margin: 1.064395955vw;
    font-size: 20px;
    text-align:  center;
    padding: 1.330494944vw;
}

#main2 #camp p{
    font-size: 22px;
}

#main2 #camp h5{
    font-size: 23px;
}


#main2 #camp{
    text-align: center;
    float: left;
    margin-top: 10.643959553vw;
    margin-left: 80px;
}



#main2 #opis2{
    width: 42.575838211vw;
    height: 42.575838211vw;
    position: relative; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    justify-content: center; 
    align-items: center;
}

#main2 #opis2 p{
    margin: 1.064395955vw;
    font-size: 1.064395955vw;
    text-align:  center;
    padding: 1.330494944vw;
}

#main5{
    height: 74.50771687vw;
    text-align: center;
}

#main5 #opis{
    border: 0.266098988vw solid black;
    border-radius: 1.064395955vw;
    width: 42.575838211vw;
    height: 47.897817988vw;
    position: relative; 
    top: 40%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    justify-content: center; 
    align-items: center;
}

#main5 #opis p{
    margin: 1.064395955vw;
    font-size: 1.064395955vw;
    text-align:  center;
    padding: 1.330494944vw;
}

#main5  #guzik {
    width: 5.321979776vw;
    height: 1.330494944vw;
    border: black;
    color: #B2B0FF;
    border-radius: 2.660989888vw;
    font-size: 0.745077168vw;
    transition: color 0.25s ease, background-color 0.25s ease-in-out;
}

#main5  #guzik:hover {
    border: black;
    color: #A092E5;
}

#main5 #plan{
    margin-top: 15.965939329vw;
    font-size: 0.957956359vw;
}


/*<---------------------------------midsection--------------------------------------------->*/

#midSection{
    height: 26.609898882vw;
    width: 100%;
    background-color: #D9D9D9;
    justify-content: center;
    position: relative;
}


#midSection #spolecznosc {
    border: 0.266098988vw solid black;
    border-radius: 1.064395955vw;
    width: 37.253858435vw;
    height: 15.965939329vw;
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    justify-content: center; 
    align-items: center;
}

#midSection #spolecznosc p{
    margin: 1.064395955vw;
    font-size: 1.064395955vw;
    text-align:  center;
    padding: 1.330494944vw;
}

#midSection #spolecznosc a{
    text-decoration: none;
    text-align: center;
    color: #A092E5;
    transition: color 0.2s ease-in-out;
}

#midSection #spolecznosc h3{
    font-size: 0.957956359vw;
}

#midSection #spolecznosc a:hover{
    color: #B2B0FF;
}


/*<---------------------------------footer--------------------------------------------->*/
footer {
    height: 7.982969664vw;
    width: 100%;
    background-color: #101012;
    overflow: hidden;
    clear: both;
    justify-content: center;
}

footer li a {
    text-decoration: none;
    color: #A092E5;
    transition: color 0.4s, font-size 0.4s;
    font-size: 1.064395955vw;
}

footer li a:hover {
    color: #B2B0FF;
    font-size: 1.064395955vw;
}

footer ul {
    list-style: none;
    margin-left: 10.643959553vw;
    margin-top: 3.193187865vw;
    padding: 0;
    display: flex;
    gap: 2.12879191vw;
    align-items: center;
}

footer ul li {
    padding: 0 0.532197977vw; 
    width: auto; 
}

footer #insta {
    width: 4.52368281vw;
    float: right;
    margin-top: -5.055880787vw;
    margin-right: 7.982969664vw;
}

footer #facebook {
    width: 2.12879191vw;
    margin-top: -3.193187865vw;
    margin-right: 3.991484832vw;
    float: right;
}

footer #x {
    width: 2.12879191vw;
    float: right;
    margin-top: -2.927088877vw;
    margin-right: 11.974454497vw;
}




@media only screen and (max-width: 767px) {
    
    #logos #logo3 {
        width: 30%;
        padding-left: 35%;
    }

    #top ul {
        list-style: none;
        margin-left: 17%;
        padding-top: 4.257583821%;
        margin-top: 3.193187865%;
        padding: 0;
        display: flex;
        gap: 1.064395955%; 
    }
    
    
    #top li a {
        text-decoration: none;
        color: black;
        transition: border-bottom 0.4s ease;
        font-size: 8px;
        padding: 0px 1.064395955vw; 
        border-bottom: 0.106439595vw solid transparent;
        position: relative;
    }
    
    #top li a:hover {
        border-bottom: 0.106439595vw solid black;
    }
    
    
    #main {
    height: 500px;
    background-color: #E6E6E6;
    justify-content: center;
    position: relative;
}

#main #opis{
    border: 0.266098988vw solid black;
    border-radius: 1.064395955vw;
    width: 80vw;
    height: 55vw;
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center; 
    align-items: center;
    padding: 0 20px;
}

#main #opis p{
    margin: 1.064395955vw;
    font-size: 10px;
    text-align:  center;
    padding: 1.330494944vw;
}



#main .akcesoria h2{
    font-size: 20px;
}

#main .akcesoria h4{
    font-size: 16px;
}


#midSection{
    height: 55vw;
    width: 100%;
    background-color: #D9D9D9;
    justify-content: center;
    position: relative;
}


#midSection #spolecznosc {
    border: 0.266098988vw solid black;
    border-radius: 1.064395955vw;
    width: 80vw;
    height: 45vw;
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    justify-content: center; 
    align-items: center;
}

#midSection #spolecznosc p{
    margin: 1.064395955vw;
    font-size: 10px;
    text-align:  center;
    padding: 1.330494944vw;
}

#midSection #spolecznosc h3{
    font-size: 9px;
}



#section1 ul li a {
    text-decoration: none;
    font-size: 7px;
    color: white;
    padding: 0.532197977vw 0.798296966vw;
    padding-left: 2vw;
}

#section1 a {
    margin-top: 5.321979776vw;
    text-decoration: none;
    color: black;
    font-size: 1.064395955vw;
}

#section1 ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    text-decoration: none;
    white-space: nowrap;
    width: 70%;
    margin-bottom: 2.660989888vw;
    margin-left: 17vw;
}



#menu {
    background-image: url(obrazy/pattern4-1.png);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    width: 100%;
    height: 45vw;
    margin-top: 9.04736562vw;
    border-radius: 0.532197977vw;
}



#menu .blok {
    width: 13.304949441vw;
    height: 18.626929217vw;
    margin: 0.798296966vw;
    outline: white 0.159659393vw solid;
    border-radius: 0.266098988vw;
    float: left;
    background-color: white;
    overflow: hidden;
    position: relative;
    margin-left: 10vw;
    margin-top: 5.321979776vw;
    margin-bottom: 2.12879191vw;
    transition: transform 0.25s ease-in;
}



#menu #bloki {
    margin-left: 10vw;
}


#main2 {
    height: 600px;
    background-color: #E6E6E6;
    justify-content: center;
    position: relative;
} 

#main2 #opis2{
    width: 80vw;
    height: 55vw;
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center; 
    align-items: center;
    padding: 0 20px;
}

#main2 #opis2 p{
    margin: 1.064395955vw;
    font-size: 10px;
    text-align:  center;
    padding: 1.330494944vw;
}



#main2  {
    height: 600px;
    color: black;
}

#main2 #tematy{
    width: 79.829696647vw;
    height: 47.897817988vw;
    margin-left: 5.321979776vw;
    padding-top: 6.65247472vw;
    margin-top: 0;
    padding-bottom: 10px;
}

.temat{
    width: 70vw;
    height: 170px;
    border: 0.159659393vw solid black;
    border-radius: 10px;
    margin-left: 11vw;
    text-align: center;
    transition: transform 0.3s ease-in-out;
    
}

.temat h2{
    font-size: 14px;
}

.temat h4{
    font-size: 12px;
}

.temat h6{
    font-size: 10px;
}

.temat p{
    font-size: 8px;
}

#main .akcesoria{
    text-align: center;
    padding-top: 100px;
}


#main .akcesoria h2{
    font-size: 13px;
}

#main .akcesoria h4{
    font-size: 11px;
}


#main3 {
    height: 500px;
    background-color: #E6E6E6;
    display: flex;
    justify-content: center;
    position: relative;
}

#main3 #karta {
    width: 53.219797764vw;
    height: 400px;
    background-color: white;
    border-radius: 2.12879191vw;
    margin-top: auto;
    margin-bottom: auto;
}

#karta #logowanie i{
    color: grey;
    font-size: 9px;
}

#karta #logowanie input{
    width: 75px;
    height: 5px;
}

#karta  h2{
    font-size: 15px;
}
#karta #logowanie label{
    font-size: 10px;
}

#karta #logowanie #guzik{
    width: 80px;
    height: 15px;
    font-size: 8px;
}

#main4{
    height: 550px;
}

#main4 #kontakt{
    border: 0.266098988vw solid black;
    border-radius: 1.064395955vw;
    width: 42.575838211vw;
    height: 150px;
    position: relative; 
    top: 20%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    text-align: center;
    justify-content: center; 
    align-items: center;
}


#main4 #sociale{
    border: 0.266098988vw solid black;
    border-radius: 1.064395955vw;
    width: 42.575838211vw;
    height: 270px;
    position: relative; 
    top: 35%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    text-align: center;
    justify-content: center; 
    align-items: center;
    float: left;
}

#main4 h1{
    font-size: 12px;
}

#main4 h3{
    font-size: 10px;
}

#main4 p{
    font-size: 8px;
}


#main2 #oboz{
    border: 0.266098988vw solid black;
    border-radius: 1.064395955vw;
    width: 300px;
    height: 200px;
    position: relative; 
    top: 30%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    text-align: center;
    justify-content: center; 
    align-items: center;
    float: left;
}

#main2 #oboz p{
    margin: 1.064395955vw;
    font-size: 10px;
    text-align:  center;
    padding: 20px;
}


#main2 #camp{
    text-align: center;
    float: left;
    margin-top: 10.643959553vw;
}

#main2 #camp h5{
    font-size: 12px;
    padding-top: 50px;
    width: 80%;
    margin-left: 10%;
}

#camp p{
    font-size: 11px;
}



#main5{
    height: 1000px;
    text-align: center;
}

#main5 #opis{
    border: 0.266098988vw solid black;
    border-radius: 1.064395955vw;
    width: 200px;
    height: 800px;
    position: relative; 
    top: 40%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    justify-content: center; 
    align-items: center;
}

#main5 #opis p{
    margin: 1.064395955vw;
    font-size: 10px;
    text-align:  center;
    padding: 1.330494944vw;
}

#main5  #guzik {
    width: 80px;
    height: 17px;
    border: black;
    color: #B2B0FF;
    border-radius: 2.660989888vw;
    font-size: 12px;
    transition: color 0.25s ease, background-color 0.25s ease-in-out;
}

#main5  #guzik:hover {
    border: black;
    color: #A092E5;
}

#main5 #plan{
    margin-top: 15.965939329vw;
    font-size: 10px;
    margin-left: 10%;
    width: 80%;
}

  }