@media only screen and (max-width: 1024px) {

     .home-container {
         max-width: 100%;
     }

     .sidenav {
         display: flex;
         flex-direction: column;
         height: 100%;
         width: 0;
         position: fixed;
         z-index: 1;
         top: 0;
         right: 0;
         background-color: #fff;
         overflow-x: hidden;
         padding-top: 60px;
         transition: 0.5s;
         -webkit-box-shadow: var(--shadow);
         -moz-box-shadow: var(--shadow);
         box-shadow: var(--shadow);
     }

     .sidenav ul {
         padding: 0;
     }

     .navbar-light .navbar-toggler {
         color: #7B7B7B;
         border: 0;
     }

     .sidenav a {
         text-decoration: none;
         font-size: 15px;
         color: #B6B6B6;
         display: block;
         transition: 0.3s;
     }

     .nav-item.active {
         background: #DB2340;
     }

     .nav-item.active a {
         color: #fff;
     }

     .sidenav .nav-item .nav-icon img {
         width: 15px;
         margin: auto 10px;
         background-repeat: no-repeat;
         background-size: cover;
     }

     .sidenav .closebtn {
         position: absolute;
         top: 0;
         right: 25px;
         font-size: 36px;
         margin-left: 50px;
     }

     .sidenav ul {
         list-style: none;
     }

     .dropdown-menu {
         border: 0;
         padding: 0;
     }

     .dropdown-menu .dropdown-item {
         font-size: 14px;
         padding: 0 0 0 15px;
         color: #B6B6B6;
     }

     .badge-green {
         background: var(--green);
     }

     .nav-item .nav-badge {
         position: absolute;
         display: inline-block;
         height: 5px;
         width: 5px;
         border-radius: 50%;
         background: var(--green);
         top: 7px;
         left: 106px;
     }

     .dropdown-menu .dropdown-item .nav-badge {
         position: absolute;
         display: inline-block;
         height: 5px;
         width: 5px;
         border-radius: 50%;
         background: var(--green);
         top: 40px;
         left: 109px;
     }

     .col-md-4.text-center {
         margin-bottom: 20px;
     }


     .flex {
         flex-direction: column;
     }

     .main-container-footer {
         justify-content: center;
     }

     .p-all-5 {
         padding: 15px !important;
     }

     .col-md-2.p-all-5 {
         width: 50%;
     }

     .flipbook {
         margin: auto;
         margin-bottom: 30px;
         max-width: 360px;
         max-height: 500px;
         object-fit: contain;
         width: 100% !important;
         height: 300px !important;
         z-index: 0;
     }

     .turn-page-wrapper {
         width: 50% !important;
         height: 100% !important;
         height: 350px !important;
         object-fit: contain;
     }

     .katalog-slike {
         max-width: 500px;
         width: 100%;
         height: 300px;
         object-fit: contain;
         z-index: 1 !important;
     }

     #mySidenav {
         z-index: 9999 !important;
     }
 }


 @media only screen and (max-width: 840px) {
    .pl-m-5 {
        padding-left: 5px !important;
    }
    .markice-content {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between; 
        row-gap: 7px;
        column-gap: 0px !important;
    }
     
.pr-m-5 {
    padding-right: 5px !important;
}

     .tab {
         display: flex;
         justify-content: space-between;
         flex-direction: column;
     }

     .tab button {
         width: 100% !important;
     }

     .form-field {
         position: relative;
         width: 100%;
         margin-top: 5px;
     }

     .form-group {
         margin-bottom: 5px;
         align-self: left;
         align-items: flex-start;
         justify-content: left;
         position: relative;
     }



     .single-markica {
         content: url("/images/markice.svg");
         height: 25px;
         width: 25px;
         margin-top: 0px !important;
     }
 

     .izvestaj-row .col {
         width: 100%;
         flex-basis: auto;
     }

     .mobile-top-margin-10 {
         margin-top: 10px !important;
     }

     .big-heading {
         font-family: Axiforma-medium;
         font-size: 18px;
         font-weight: 600;
         text-transform: none;
         line-height: 1.6em;
         color: var(--headline-color);
     }

     i {
         height: 20px !important;
         width: 20px !important;
     }

     main {
         padding: 0px;

         max-width: 1240px;
         margin: 20px;
         padding-bottom: 70px;
     }

     .dmt-20 {
         margin-top: 0px;
     }

     .home-container-product {
         margin-bottom: 20px;
     }


     .page-item.active {
         display: none;
     }

     .slika-proizvoda {
         margin: auto;
         width: 70px;
     }

     .placeholder-image-product {
         text-align: center;
     }

     .footer {
         background-color: var(--white);
         padding: 10px;
         border-top-left-radius: 20px;
         border-top-right-radius: 20px;
         min-height: 60px;
         position: fixed;
         bottom: 0;
         width: 100%;
         height: 2.5rem;
         box-shadow: var(--shadow);
         left: 0;
     }

     .mobile-margin {
         margin-top: 15px;
     }

     .placeholder-image-product {
         text-align: center;
     }

     .sidenav {
         display: flex;
         flex-direction: column;
         height: 100%;
         width: 0;
         position: fixed;
         z-index: 1;
         top: 0;
         right: 0;
         background-color: #fff;
         overflow-x: hidden;
         padding-top: 60px;
         transition: 0.5s;
         -webkit-box-shadow: var(--shadow);
         -moz-box-shadow: var(--shadow);
         box-shadow: var(--shadow);
     }

     .sidenav ul {
         padding: 0;
     }

     .navbar-light .navbar-toggler {
         color: #7B7B7B;
         border: 0;
     }

     .sidenav a {
         text-decoration: none;
         font-size: 15px;
         color: #B6B6B6;
         display: block;
         transition: 0.3s;
     }

     .nav-item.active {
         background: #DB2340;
     }

     .nav-item.active a {
         color: #fff;
     }

     .sidenav .nav-item .nav-icon img {
         width: 15px;
         margin: auto 10px;
         background-repeat: no-repeat;
         background-size: cover;
     }

     .sidenav .closebtn {
         position: absolute;
         top: 0;
         right: 25px;
         font-size: 36px;
         margin-left: 50px;
     }

     .sidenav ul {
         list-style: none;
     }

     .dropdown-menu {
         border: 0;
         padding: 0;
     }

     .dropdown-menu .dropdown-item {
         font-size: 14px;
         padding: 0 0 0 40px;
         color: #B6B6B6;
         padding-top: 5px !important;
         padding-bottom: 5px !important;
     }

     .badge-green {
         background: var(--green);
     }

     .nav-item .nav-badge {
         position: absolute;
         display: inline-block;
         height: 5px;
         width: 5px;
         border-radius: 50%;
         background: var(--green);
         top: 7px;
         left: 106px;
     }

     .dropdown-menu .dropdown-item .nav-badge {
         position: absolute;
         display: inline-block;
         height: 5px;
         width: 5px;
         border-radius: 50%;
         background: var(--green);
         top: 40px;
         left: 109px;
     }

     .big-th {
         line-height: 10px;
     }

     .big-td {
         line-height: 15px;
     }

     .ponude-slika {
         margin-top: 20px;
     }

     .pl-60 {
         padding-left: 15px !important;
         padding-top: 50px !important;
     }
     
     .mmt-20 {
         margin-top: 20px;
     }
 }