@media (max-width:1500px) {
    body {
        background-size: 200px
    }
}

@media (max-width:1450px) {


    .foot_btn {
        width: 100%
    }

    .caption {
        padding-bottom: 0
    }

    .captionSummary {
        font-size: 1em;
        line-height: 1.2em;
        margin-top: 15px
    }
}

@media (max-width:1280px) {

    .search-box {
        position: relative;
           display: flex;
           width: calc(100% - 900px);
          
       }
    .catalog_list {
        grid-template-columns: repeat(3, 1fr)
    }

    .main-navi {
        margin-right: 20px
    }

    .navigation {
        font-size: 13px
    }

    body {
        background-size: 100px
    }
    

}

@media (max-width:1100px) {
    .brands img{
        width: 110px;
        height: 90px;
        object-fit: cover;
        margin: 5px;
    }
    

.search-box {
   
    display: flex;
    width: calc(100% - 70px);
  
}

#slider {
    width: 100%;
    height: 400px;
   



}
  
    .slide {
        height: 400px;
    }

    #slideNav {
        position: absolute;

        bottom: 20px;
        right: 10px;
        display: flex;
    }

    #prevBtn,
    #nextBtn {
        width: 25px;
        height: 25px;
        font-size: 15px;
        cursor: pointer;
        border: 2px solid #fff;
        color: #fff;
        background-color: transparent;
        transition: .5s all;
        margin-right: 10px;
        border-radius: 50%;
        line-height: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;

    }

    header .marg {
        flex-wrap: wrap;

        align-items: flex-start;
    }

    .drop_storitve {
        display: none;
    }

    main {

        margin-top: 120px;
        /*transition: .1s all;   animation: fadeInAnimation ease .6s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;*/

    }

    .start-nav {
        cursor: pointer;
        display: block;
    }

    .lanSelect {
        margin-left: auto;
        margin-top: -50px;
    }

    .headIcon {
        position: fixed;
        top: 10px;
        right: 120px;

    }

    .headIcon a {
        font-size: 10px !important;
    }

    .bsk {
        right: 60px;
    }

    .logo {
        padding: 0 0 15px 0;
    }

    .logo img {
        height: 35px;
        transition: .5s all;
    }

    .haedRight {
        width: 100%;
        flex-basis: 100%;
        margin-left: 0 !important;
        align-items: center;
    }


    .izpo {
        width: 100% !important;
          
    }

    body {
        background-image: none
    }

    .p3 {
        grid-template-columns: repeat(2, 1fr)
    }

    .main-navi {
        display: none
    }

    .section {
        float: left;
        width: 100%;
        margin-top: 50px
    }

    .j1,
    .j2 {
        flex-basis: 100%
    }

    .j1 {
        border-radius: 0;
        margin-bottom: 20px
    }

    .j1::after {
        display: none
    }

    .fr {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px
    }

    .searchList {
        width: 100%
    }

    .hide_links {
        display: none
    }

    .intro_grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px
    }

    .fg {
        grid-column: -1/1
    }

    .grid_item h3 {
        font-size: 16px !important
    }

    .objava h3 {
        font-size: 16px !important
    }

    .traja h3 {
        font-size: 20px !important
    }

    .navigation {
        display: none
    }

    .filters{
        justify-content: space-between;
    }
    .filter_item {
        width: 32%;
        margin-right: 0;
        font-weight: 500;
    }

    .responsive-nav {
        width: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        cursor: pointer
    }

    .panel {
        display: block
    }

    .panel .lan {
        width: 100%;
        margin-bottom: 35px
    }

    .panel {
        background-color: #fff;
        z-index: 10001;
        position: fixed;
        overflow-y: scroll;
        overflow-x: hidden;
        width: 100%;
        top: 60px;
        border-top: 1px solid #fff;
        min-height: 100vh;
        height: 100vh;
        padding-bottom: 250px;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        right: -100%;
        transition: all .2s ease;
        -webkit-transition: all .2s ease;
        -moz-transition: all .2s ease;
        -ms-transition: all .2s ease;
        -o-transition: all .2s ease
    }

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

    .search-close {
        height: 15px;
        cursor: pointer;
        margin-left: 40px
    }

    .panelVis {
        right: 0;
        transition: .2s ease;
        -webkit-transition: .2s ease;
        -moz-transition: .2s ease;
        -ms-transition: .2s ease;
        -o-transition: .2s ease;
        overflow-y: scroll;
        overflow-x: hidden
    }

    .flex-nav {
        display: flex;
        color: #242331;
        flex-direction: column;
        margin-top: 25px;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center
    }

    .closeP {
        font-size: 30px;
        cursor: pointer
    }

    .m-navi {
        width: 340px
    }

    .mid-navi .fElement {
        width: 100%
    }

    .mid-navi .foot_btn {
        padding: 20px 15px;
        border: 1px solid #ddd;
        border-radius: 8px;
        margin: 10px 0;
        display: block;
        width: 100%;
        color: #fff;
        text-decoration: none;
        font-weight: 500;
        transition: .5s all;
        display: flex;
        align-items: center;
        font-size: 1em;
        line-height: 1.2em
    }

    .mid-navi .foot_btn:hover {
        color: #d61f29 !important
    }

    .mid-navi {
        margin: 25px 0 0 0;
        line-height: 1.9em;
        height: auto;
        font-size: .9em;
        font-weight: 500;
        padding-top: 0;
        order: 2;
        width: 340px
    }

    .c2 {
        width: 100%;
        line-height: 0;
        display: flex;
        margin: 20px 0
    }

    .c2 a {
        width: 35px;
        height: 35px;
        border: 1px solid #fff;
        background-color: #306a5e;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 8px 0 0
    }

    .frNavi {
        padding: 20px 0;
        margin-bottom: 15px;
        border-bottom: 1px solid #ddd;
        font-size: 1em;
        font-weight: 600;
        text-align: left
    }

    .panel-contact>a {
        display: flex;
        align-items: center;
        font-weight: 600;
        font-size: 1.1em;
        margin-bottom: 10px
    }

    .panel-contact img {
        height: 15px;
        margin-right: 10px
    }

    .c2 img {
        width: 15px;
        margin: 0
    }

    .mid-navi a {
        text-decoration: none;
        color: #242331 !important;
        text-align: center
    }

    .panel-fav {
        display: flex;
        align-items: center;
        text-decoration: none;
        font-size: 1.2em;
        font-weight: 500;
        margin-top: 20px
    }

    .panel-fav img {
        height: 15px;
        margin-right: 8px
    }

    .mid-navi a:hover {
        color: #242331 !important
    }

    .end-navi {
        font-size: .9em
    }

    .end-navi a {
        color: #242331 !important
    }

    .panel ul {
        margin: 0;
        padding: 0;
        width: auto;
        width: auto
    }

    .subRole {
        display: none
    }

    .rNav li {
        margin: 0 0;
        padding: 0;
        display: flex;
        align-items: center;
        padding: 0 0;
        justify-content: space-between;
        flex-wrap: wrap;
        border-bottom: 1px solid #ddd;
    }

    .rNav li a {
        color: #242331;
        text-decoration: none;
        font-weight: 600;
        display: inline-block;
        width: calc(100% - 60px);
        text-align: left
    }

    .mainRole img {
        height: 15px;
        margin-right: 10px;
        margin-top: 5px !important
    }


    .subRole li {
        width: 100%
    }

    .subRole li a {
        font-size: 14px !important;
        font-weight: 500;
        color: #000 !important
    }

    .rNav li :hover a {
        color: #242331 !important;
        text-decoration: none
    }

    .rNav a:link,
    .rNav a:visited {
        color: #242331
    }

    .rwdMore {
        width: 40px !important;
        overflow: hidden;
        cursor: pointer;
        margin-left: auto;
        text-align: right;
        font-size: 20px
    }

    .rNav li div:first-child {
        text-align: left;
        height: auto
    }

    .subRole {
        height: 0;
        overflow: hidden
    }

    .shown {
        display: block;
        height: auto;
        margin-bottom: 1.2em;
        flex-basis: 100%
    }

    .subRole a {
        font-weight: 300;
        padding-left: 15px;
        font-size: 1em !important;
        color: #242331 !important
    }

    .finRole {
        background-color: #fff;
        margin-left: 30px !important;
        padding: 0 10px !important
    }

    .finRole a {
        display: block;
        font-weight: 500;
        margin: 0 0;
        padding-left: 15px;
        font-size: 14px !important
    }

    .sub-show h1 {
        font-size: 25px;
        font-weight: 700;
        margin: 0 0 10px 0;
        padding: 0
    }

    .user_style h1,
    .content_read h1 {
        font-size: 1.2em;
        line-height: 1em;
        font-weight: 500;       
    }

    .captionTitle h2,
    .nzs h3 {
        font-size: 2em
    }

    .intro_grid h2 {
        font-size: 2em !important;
        margin-bottom: 20px !important;
        margin-top: 0 !important;
        width: 100%;
        float: left
    }

}

@media (max-width:950px) {
    .cCats {
        grid-template-columns: repeat(3, 1fr);
    }

    .izpo {
        width: 100% !important;
          
    }


    .minGap a h3 {
        font-size: 13px !important;
        line-height: 17px;
    }

    .a_icons .amb_icon:last-child {
        margin-bottom: 0
    }

    .cont_split {
        margin-top: 50px
    }

    .sub-show {
        display: none
    }

    .sub-show-resp {
        display: block;
        float: left;
        width: 100%;
        padding: 20px;
        background-color: #f2f2f2;
        margin-top: 80px
    }

    .counters {
        margin-top: 1px
    }

    .sub-show-resp a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: .9em;
        margin: 10px 0;
        text-decoration: none
    }

    .zdravniki_list {
        grid-template-columns: repeat(2, 1fr)
    }

    .oddelek_split {
        flex-wrap: wrap
    }

    .odd_img {
        width: 100%;
        line-height: 0;
        margin-bottom: 25px
    }

    .odd_info {
        width: 100%
    }

    .a_icons {
        flex-wrap: wrap;
        margin-bottom: 80px
    }

    .amb_icon {
        margin-bottom: 15px;
        width: 100%
    }

    .color-product-bar {  
       font-size: 12px;   
       padding: 5px;

      }

     .price-product-bar {  
        font-size: 12px;
        padding: 5px;        
    }
    .price-product-bar .old-price {
        color: red;
        padding-right: 10px;  /* 25% paddinga na desni, če je .old-price prisoten */
        font-size: 12px;
       }

       .img-container {
        display: grid;    
        width: 25%;
        justify-items: center; /* Center horizontally in the grid */
        align-items: center;
     }
       .img-container img {
        max-height: 100px !important;   
     }
         
       .size-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 5px;
        width: 75%;
      }

      .add-to-cart-container {
        display: flex;    
        gap: 5px;
        width: 100%;        
        margin: 0 auto;
        margin-top:25px;
      }

    
}

@media (max-width:850px) {

    .flex-container {
        flex-direction: column;         
    }

    .izpo {
        margin-bottom: 5px;
    }

    .iContIzpo small {
        font-size: 16px;
    }

    .iContIzpo p{
       font-size: 14px;
    }


    .captionSummary {
       width: 100%;
    }

    .details_split {

        flex-wrap: wrap;
    }

    .catalog_details_image {
        width: 100%;
        line-height: 0;
        text-align: center;
        margin-bottom: 25px;
    }

    .catalog_details_info {
        width: 100%;
        position: relative;
    }

    .prijava_place .form-place>div {
        flex-basis: 100%;
        padding: 0
    }

    .obrazec_prew {
        width: 100%
    }

    .contact_item {
        width: 100%
    }

    .row h2 {
        background-size: 15px;
        align-items: center;
        font-size: 1.1em
    }

    .row h2 i {
        margin-right: 10px
    }

    .other-list {
        grid-template-columns: 1fr 1fr;
        margin-top: 40px
    }

    .other_item h2 {
        font-size: 1.2em;
        line-height: 1.1em
    }

    .intro-list {
        grid-template-columns: 1fr 1fr
    }

    .fElement {
        width: 100%
    }

    .frst {
        text-align: center;
        margin-bottom: 20px;
    }

    .frst img {
        height: 30px;
    }

    .flx {
        display: none
    }

    .izpo {
        width: 100% !important;
          
    }

    .izpo25 {
        flex-basis: 33.3%;
        margin: 10px 0
    }

    .izpo25 i {
        font-size: 20px
    }

    .fig-number {
        font-size: 20px
    }

    .nzs i {
        display: none
    }

    .nzs_info {
        width: calc(100%);
        padding-right: 0
    }

    .nzs_links {
        flex-basis: 100%;
        margin-top: 20px
    }

    .ambSel {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-wrap: wrap;
        flex-direction: column
    }

    .zdravnik h3 {
        font-size: 1.1em;
        margin: 20px 0
    }

    .zd_img {
        flex-basis: 100px;
        line-height: 0
    }

    .zd_info {
        flex-basis: calc(100% - 100px)
    }

    .zd_info h1 {
        font-size: 1.2em
    }

    .zd_img img {
        width: 80px;
        height: 80px
    }

    .oddelek_split {
        margin-bottom: 0
    }
}

@media (max-width:780px) {
    .catalog_list {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (max-width:580px) {
   
    .filter_item {
        width: 48%;
        margin-right: 0;
        font-weight: 500;
    }
    .cCats {
        grid-template-columns: repeat(2, 1fr);

    }

    .cCats a {
        align-items: flex-start;
    }

    .va {
        width: 100%;
        margin-bottom: 5px
    }

    .wx {
        width: 50%
    }

    .imgLeft,
    .imgRight {
        float: left;
        width: 100%;
        max-width: 100%;
        height: auto;
        clear: right;
        box-sizing: border-box;
        margin: 1em 0 1em 0;
        border-radius: 8px
    }

    .j1 h2 {
        font-size: 25px
    }

    .j1 {
        font-size: 1em
    }

    .other-list {
        grid-template-columns: 1fr
    }

    .content_read .other-list {
        grid-template-columns: 1fr
    }

    .intro_grid {
        grid-template-columns: repeat(1, 1fr) !important;
        gap: 20px
    }

    .traja {
        grid-column: unset !important
    }

    .intro-list {
        grid-template-columns: 1fr;
        gap: 0
    }

    .intro_item {
        height: auto;
        padding: 20px
    }

    .j1 {
        margin-bottom: 0
    }

    .grid_item {
        border-radius: 0
    }

    .grid_item img {
        border-radius: 0
    }

    .grid_item_img {
        border-radius: 0 !important
    }

    .grid_item_info {
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0
    }

    .p3 {
        grid-template-columns: repeat(1, 1fr)
    }

    .provider_list {
        grid-template-columns: repeat(1, 1fr)
    }

    .provider_list h2 {
        font-size: 1.2em;
        line-height: 1.1em
    }

    .zdravniki_list {
        grid-template-columns: repeat(1, 1fr)
    }

    .sFlex {
        flex-direction: column
    }

    .shipp_info_free{
       font-size: 12px;
       line-height: 15px;
    }
    .shipp_info_free b{
        font-size: 1.2em;
    }
}

@media (max-width:480px) {
    .cCats {
        grid-template-columns: repeat(1, 1fr);

    }

    .catalog_list {
        grid-template-columns: repeat(1, 1fr)
    }

    .grid_item img {
        width: 100%;
        height: 200px;
        object-fit: cover;

        line-height: 0;
        transition: .5s all;
    }
}

@media (max-width:380px) {
    .brand_img {
        padding: 0 0 15px 0 !important;
        width: 100%;
    }
}