/* In the name of GOD */

.grid {
    display: flex;
    max-width: fit-content;
    margin: auto;
    flex-wrap: wrap;
    justify-items: flex-start;

}

.filtr-crd {

   margin: 30px;
   width: 300px;
   height: 450px;
   display: none;


}

.filtr-crd  h2 {
    font-size: 23px;
    cursor: pointer;
}

.filtr-crd img {
   height: 220px;
   cursor: pointer;
}

.show {
   display: block;
}




#mySidebar {
    position: fixed;
    float: right;
    width: 95%;
    border-radius: 10px;
    background: rgba(255,255,255,0.25);
    box-shadow: 0 8px 32px 0 rgba(22,22,23,0.37);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.18);
    padding: 10px 30px;
    z-index: 9;
    height: fit-content;
}


img {
    width: 100%;
    height: 350px;
    border-radius: 8px;
    z-index = 2;

}

.titr {
    justify-items: anchor-center;

}

/*.toSlides {display:none;}*/
.toSlides {
    width:40%;
    height: 40%;
    border-radius: 10px;
    justify-self: anchor-center;
}

.SamShoe {
    display: flex;
    white-space: nowrap;
    /*overflow-x: auto;*/
    gap: 20px;
    padding-bottom: 10px;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */

}

.mySlides {display:none;}


/* Horizontal scroll container */
    .scroll-container {
        display: flex;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none; /* Firefox */
        direction: ltr;
        margin: 50px 150px 50px 150px;
    }
    .scroll-container::-webkit-scrollbar {
        display: none; /* Chrome, Safari */
        direction: ltr;
    }
    /* Card style */
    .card {
        flex: 0 0 auto;
        width: 200px;
        margin: 10px;
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        text-align: center;
    }
    .card img {
        width: 100%;
        height: 150px;
        object-fit: cover;
        border-radius: 8px 8px 0 0;
    }
    .card p {
        margin: 0;
        padding: 8px;
        font-size: 14px;
    }


@media (max-width: 1016px) {
   .scroll-container{
      margin: 30px 50px 30px 50px;
   }
}
@media (max-width: 922px) {
   .scroll-container{
      margin: 20px 20px 20px 20px;
   }
}



.hSlides {
     flex: 0 0 auto;
     width: 300px;
     height: 400px;
     margin: 10px;
     background: white;
     border-radius: 8px;
     box-shadow: 0 2px 6px rgba(0,0,0,0.1);
     text-align: center;

}

.hSlides img{
   width: 100%;
   height: 250px;

}

.w3-badge {cursor:pointer}
.w3-badge {height:13px;width:13px;padding:0}

@media (max-width: 3000px) {
   span.indx3.w3-badge.dot.w3-border { display: none;}
   span.indx4.w3-badge.dot.w3-border { display: none;}
   span.indx5.w3-badge.dot.w3-border { display: none;}
   span.indx6.w3-badge.dot.w3-border { display: none;}
}

@media (max-width: 1016px) {
   span.indx3.w3-badge.dot.w3-border { display: inline-block}
   span.indx4.w3-badge.dot.w3-border { display: none;}
   span.indx5.w3-badge.dot.w3-border { display: none;}
   span.indx6.w3-badge.dot.w3-border { display: none;}
}

@media (max-width: 922px) {
   span.indx4.w3-badge.dot.w3-border { display: inline-block}
   span.indx5.w3-badge.dot.w3-border { display: none;}
   span.indx6.w3-badge.dot.w3-border { display: none;}
}

@media screen and (max-height: 724px) {
    span.indx4.w3-badge.dot.w3-border { display: inline-block}
    span.indx5.w3-badge.dot.w3-border { display: inline-block}
    span.indx6.w3-badge.dot.w3-border { display: none;}
}