/*
Theme Name: 
Theme URI: dankanic.com
Author:  Kiril Dankanic  
Author URI: https://dankanic.com
Description: Theme specially designet for Pesticid only

Version: 1.0
License: Private theme, All rights reserved.
License URI: LICENSE
Text Domain: theme-folder


This theme is exclusively made for Kiril Dankanic only.

The main theme color is 

*/



html {font-family: 'Exo 2', sans-serif; margin:0; padding:0; background-color:#fff; color:#000;}

h1, h2, h3, h4, h5, h6, p, a {font-family: 'Exo 2', sans-serif; margin:0; padding:0;}
h1, h2, h3, h4, h5, h6 {font-weight: 600; color:#339425;}
h1, h2 {margin:0 0 20px 0;}

/* default font-size*/
p, a {font-size: 13px;}

.relative {position: relative;}
.absolute {position: absolute;}
.absolute-bottom {position: absolute; bottom:0; left:0;}
.fixed {position: fixed;}

.z-high {z-index: 50;}
em {color:#000;}



.preloader-container {z-index: 200; top:0; left: 0; width: 100%; height: 100%; background-color: #000; display: flex; justify-content: center; align-items: center; position: fixed;}
.preloader-box {width:154px; height: 154px;}
.logo-shape {top:0; left: 0; width:154px; height: 154px;} 
.loader {top:0; left: 0; width:154px; height: 154px;}
.loader svg {animation: dash 3s linear infinite;}

@keyframes dash {
	0% {stroke-dasharray: 800 100; transform: rotate(0deg); stroke: #339425; stroke-width: 1; stroke-dashoffset: 0;}
	40% {stroke-width: 3; stroke: #dda600;}
	50% {stroke-dasharray: 50 750; stroke: #009ee3; stroke-width: 8; stroke-dashoffset: -800;}
	60% {stroke-width: 3; stroke: #da1c3b;}
	100% {stroke-dasharray: 800 100; transform: rotate(1440deg); stroke: #339425; stroke-width: 1; stroke-dashoffset: 0;}
}





.full-width {width:100%; height: auto;}
.fixed-1200 {width:1200px; margin: 0 auto;}

.flex-s-b-c {display: flex; justify-content: space-between; flex-wrap: wrap; align-items:center;}
.flex-s-b {display: flex; justify-content: space-between; flex-wrap: wrap; align-items:flex-start; }
.flex-s-b-stretch {display: flex; justify-content: space-between; flex-wrap: wrap; align-items:stretch;}
.flex-f-s {display: flex; justify-content: flex-start; flex-wrap: wrap; align-items:flex-start; }
.flex-s-a {display: flex; justify-content: space-around; flex-wrap: wrap; align-items:flex-start;}

.flex-100 {flex:0 0 100%;}
.flex-60 {flex:0 0 60%;}
.flex-55 {flex:0 0 55%;}
.flex-50 {flex:0 0 50%;}
.flex-49 {flex:0 0 49%;}
.flex-48 {flex:0 0 48%;}
.flex-42 {flex:0 0 42%;}
.flex-36 {flex:0 0 36%;}
.flex-28 {flex:0 0 28%;}
.flex-26 {flex:0 0 26%;}

.catalog-box {flex:0 0 30%; margin-bottom: 30px;}
.catalog-box img {opacity: 0.85; box-shadow: 2px 2px 6px rgba(0,0,0,0.3); transition: all 200ms;}
.catalog-box img:hover {opacity: 1; box-shadow: 4px 4px 8px rgba(0,0,0,0.5); transition: all 200ms;}

.separator p {font-size: 50px; text-align: right; color: rgba(0,0,0,0.4); margin-top: 20px;}
.separator .sep {margin:0 0 20px 0;}

.header-desktop {z-index: 100; display: initial;}
.header-mobile {display: none;}
.header-container {height: 100px; transition: all 300ms;}

.white-back {background-color: #fff; background-color: rgba(0,0,0,0.8);}
.grey-back {background-color: #e8e8e8;}
.black-opacity {background-color: rgba(0,0,0,0.4); transition: all 300ms; backdrop-filter: blur(5px);}
.small {height: 65px; transition: all 300ms;}
.new-black {background-color: rgba(0,0,0,0.8);}

.bottom-line {height: 1px;}
.bottom-line-absolute {height: 1px; position: absolute; bottom:0;}
.line {height: 3px;}
.gradient {background: linear-gradient(90deg, rgba(218,28,59,1) 0%, rgba(53,73,156,1) 25%, rgba(0,134,186,1) 50%, rgba(51,148,37,1) 75%, rgba(236,185,31,1) 100%);}
.gradient-vertical {background: linear-gradient(0deg, rgba(218,28,59,1) 0%, rgba(53,73,156,1) 25%, rgba(0,134,186,1) 50%, rgba(51,148,37,1) 75%, rgba(236,185,31,1) 100%);}
.top-line {height: 8px; border-radius: 0 0 8px 8px; top:0; left:0;}



.logo-container {flex:0 0 20%; margin: 5px 0 0 0; transition: all 300ms;}
.logo-small {flex:0 0 15%; margin: 5px 0 0 0; transition: all 300ms;}
.menu-container {flex:0 0 70%; margin: 5px 0 0 0;}

.menu-container .menu-item {color:#fff; padding:5px 15px; box-sizing: border-box; border-radius: 0 0 0 14px; font-weight: 600;}
.menu-container .menu-item:hover {color:#fff; text-decoration: none;}
.menu-container .hover_red:hover {background-color: #da1c3b;}
.menu-container .hover_blue:hover {background-color: #35499c;}
.menu-container .hover_blue2:hover {background-color: #0086ba;}
.menu-container .hover_green:hover {background-color: #339425;}
.menu-container .hover_orange:hover {background-color: #dda600;}

.menu-container .rounded-link {border-radius: 15px; padding:5px 15px;}
.menu-container .rounded-link:hover {text-decoration: none;}
.menu-container .mypesticid {background-color: #0086ba; color:#fff; font-weight: 600;}
.menu-container .mypesticid:hover {background-color: #27a3d5; color:#fff;}
.menu-container .facebook {color:#7aa7e9; border:solid 1px #7aa7e9;}
.menu-container .facebook:hover {color:#fff; border:solid 1px #fff;}
.menu-container .youtube {color:#f3526d; border:solid 1px #f3526d;}
.menu-container .youtube:hover {color:#fff; border:solid 1px #fff;}

.home-image {width:100%; height: 100vh; max-width: 100%; overflow: hidden !important;}
.news-home-image {width:100%; height: 60vh; max-width: 100%; overflow: hidden !important;}
.img-back {top:0; left:0; width: 100%; height: 100%; object-fit: cover; position: absolute;}
.img-back-home {top:0; left:0; width: 100%; height: 100%; object-fit: cover; position: absolute;

    animation: zoom 8s ease-in-out infinite alternate-reverse;

}

@keyframes zoom {
    0% {transform: scale(1);}
    100% {transform: scale(1.1);}
}

.success {height: 270px; width:auto;}

.margin-20 {margin: 20px 0;}
.margin-40 {margin: 40px 0;}
.margin-60 {margin: 60px 0;}
.margin-80 {margin: 80px 0;}

.bottom-right-border {border-radius: 0 0 60px 0; overflow: hidden;}

.align-center {text-align: center;}
.footer-logo img {width:200px; height: auto;}

.footer-links a {color: #646464; padding:0 15px;}
.allrights a, .allrights p {color:#646464; font-size: 11px;}

.footer {padding-bottom: 5px; box-sizing: border-box;}

.last-news {font-size: 26px; font-weight: 600; color: #0086ba; text-align: center;}

.post-container {margin-top: -50px; z-index: 2;}
.post-container p {font-size: 14px; margin-bottom: 20px;}

.single-news-heading {color: #fff; padding:15px 20px 30px 20px; box-sizing: border-box; background: linear-gradient(90deg, #619c42 0%, #b8c833 100%); border-radius: 0 0 0 50px;}

.news-heading {font-size: 30px; color: #fff; padding:25px 20px 30px 20px; box-sizing: border-box; background: linear-gradient(90deg, #619c42 0%, #b8c833 100%); border-radius: 0 0 0 50px; display: block;}

.post-box {flex:0 0 48%; margin: 20px 0 60px 0; padding:0 0 40px 0; box-sizing: border-box;}
.post-box-three {flex:0 0 31%; margin: 0 0 50px 0; padding:0 0 40px 0; box-sizing: border-box;}
.post-news-thumb {width:100%; height: 250px; border-radius: 0 0 0 40px; overflow: hidden;}

.news-info-box {width:100%; height: auto; padding:0 20px 0 0; box-sizing: border-box;}
.news-info-box h2 {font-size: 20px; margin:10px 0 0 0; text-align: right; color: #000;}
.news-info-box p {text-align: right;}

.read-more {background-color: #d71d3d; color:#fff; padding:5px 25px; box-sizing: border-box; border-radius: 5px; bottom:0; right:20px; transition: all 300ms;}
.read-more:hover {color: #fff; text-decoration: none; padding:5px 30px; transition: all 300ms;}

.vertial-deco {position: absolute; top:50px; right: 0; width: 3px; height: 300px; background: linear-gradient(180deg, rgba(218,28,59,1) 0%, rgba(53,73,156,1) 25%, rgba(0,134,186,1) 50%, rgba(51,148,37,1) 75%, rgba(236,185,31,1) 100%); z-index: 22;}

.all-news {margin-bottom: 60px;}
.all-news a {color: #339425; padding:10px 20px; font-size: 16px; border:solid 1px #339425; border-radius: 20px;}
.all-news a:hover {color: #0086ba; border:solid 1px #0086ba; text-decoration: none;}
.all-news a i {margin:0 5px 0 0;}

.products-menu {top:0; left:0; width:100%; height: 0; background-color: rgba(0,0,0,1); overflow: hidden; transition: all 300ms;}
.active {height: 100vh; transition: all 300ms; }

.absolute-back {position: absolute; width: 100%; height: 100%; top:0; left: 0; opacity: 0.15;}
.absolute-back-sidebar {position: absolute; width: 100%; height: 100%; top:0; left: 0; opacity: 0.4;}
.menu-opacity {opacity: 0.1;}

.products-menu-container {margin-top: 150px;}
.products-menu-container p {color:#fff;}
.products-menu-heading {font-size: 30px; font-weight: 200;}
.products-menu-heading span {font-weight: 600;}

.product-buttons {margin-top: 60px;}
.product-buttons a {flex:0 0 24.5%; margin-bottom: 10px; opacity: 0.8;}
.product-buttons a:hover {opacity: 1;}
.product-buttons a img {width:100%;}

.close-menu-button {top:0; right: 0; font-size: 30px; color: #c5c5c5;}
.close-menu-button:hover {color: #fff; text-decoration: none;}

.hisun, .sun, .corn, .rapeseed, .sorgo, .wheat, .torove, .preparati {display: none;}

.show {display: initial;}


.p-heading {font-size: 34px; color: #fff; padding:25px 20px 30px 30px; box-sizing: border-box; background: linear-gradient(-90deg, #da1c3b 0%, #35499c 100%); border-radius: 0 0 0 50px; display: block;}

.pesticid-contacts {width: 100%; height: auto; background: linear-gradient(-90deg, #0086ba 0%, #339425 100%); padding: 20px 30px 10px 10px; box-sizing: border-box; text-align: right;}

.pesticid-contacts h3, .pesticid-contacts p {color: #fff;}
.pesticid-contacts p {margin-bottom: 40px;}
.googlelocation {border:solid #fff; border-width:0 2px 0 0; color: #fff; padding: 0 10px; box-sizing: border-box; margin: 20px 0; display: block; font-size:16px; transition: all 300ms;}
.googlelocation:hover {padding: 0 20px; transition: all 300ms; color: #fff; text-decoration: none;}


.hisun-heading {font-size: 30px; color: #fff; padding:25px 20px 30px 20px; box-sizing: border-box; background: linear-gradient(90deg, #c79500 0%, #f5b906 100%); border-radius: 0 0 0 50px; display: block;}

.sidebar-contaier, .sidebar-contaier-visible {flex:0 0 24%;}

.sidebar-products {background-color: rgba(0,0,0,1);}
.sidebar-products a, .sidebar-products a img {width: 100%; margin-top: 1px;}
.sidebar-products a {opacity: 1; }
.sidebar-products a:hover {opacity: 0.93;}

.products-btns {z-index: 22;}

.content-container {flex:0 0 74%;}

.hisun-product {width: 100%; height: auto; padding:10px 20px 10px 0; box-sizing: border-box; border-style:solid; border-width:1px 1px 1px 3px; border-color: #f5b906; border-radius: 0 0 50px 0; margin-bottom: 30px;}

.preparat-product {width: 100%; height: auto; padding:30px 300px 30px 30px; box-sizing: border-box; border-radius: 0 0 50px 0; margin-bottom: 30px; background: linear-gradient(-90deg, #0086ba 0%, #339425 100%);}

.name h2 {font-weight: 700; color:#000; padding:5px 20px; box-sizing: border-box; background-color: #f5b906; margin: 0; font-size: 45px;}
.name p {padding: 10px 20px; box-sizing: border-box; font-size: 14px;}

.logo {margin-left: 20px;}
.logo img {width: auto; height: 70px;}

.magni {font-size:18px; top:10px; right:0; padding: 10px 20px; box-sizing: border-box; color:#fff; background-color: #f5b906;}

.hisun-products-container a {color: inherit;}
.hisun-products-container a:hover {text-decoration: none;}
.hisun-products-container a:hover h2 {color: #fff;} 

.bottom-left-radius {border-radius: 0 0 0 50px; overflow: hidden;}
.my-pesticid {margin-top: 40px; margin-bottom: 40px;}

.torove-products {font-size: 16px; font-weight: 600;}

.logo-buffer {position: relative; height: 147px;}

.gr-torove .flex-48 {margin-bottom: 40px;}


.aktualno {margin: 0 0 30px 0; flex:0 0 100%;}
.aktualno h2, .aktualno p {color: #fff; margin: 0;}
.aktualno h2 {font-size: 40px;}
.aktualno p {font-size: 14px;}
.small-news-box {box-sizing: border-box; border:solid 1px; border-color: rgba(255,255,255,0.5); padding: 10px; background-color: rgba(0,0,0,0.65);}
.s-thumb {flex:0 0 25%;}

.s-info {flex:0 0 74%; padding: 5px 0 30px 10px; box-sizing: border-box; color: #fff;}
.s-info .title {font-size: 16px; font-weight: 700; color: #fff;}

.s-read-more {position:absolute; bottom:10px; right:10px; color: #fff;}

.small-news {left:0; bottom: 60px; opacity: 0; animation: sn-anim 7s ease-in-out infinite;}
.known {left:0; bottom: 60px; opacity: 0; animation: known-anim 7s ease-in-out infinite;}

@keyframes known-anim {
    0% {opacity: 0; margin-bottom: -40px;}
    5% {opacity: 1; margin-bottom: 0;}
    48% {opacity: 1; margin-bottom: 0;}
    52% {opacity: 0; margin-bottom: -40px;}
    100% {opacity: 0; margin-bottom: -40px;}
}

@keyframes sn-anim {
    0% {opacity: 0; margin-bottom: -40px;}
    5% {opacity: 0; margin-bottom: -40px;}
    48% {opacity: 0; margin-bottom: -40px;}
    52% {opacity: 1; margin-bottom: 0;}
    98% {opacity: 1; margin-bottom: 0;}
    100% {opacity: 0; margin-bottom: -40px;}
}

.predstaviteli {align-items: stretch; display: flex; justify-content: flex-start; flex-wrap: wrap;}

.contact-container {
    flex: 0 0 23%;
    margin: 0 10px 20px 0;
    flex-wrap: wrap;
    background-color: #f9f9f9;
    border-style: solid;
    border-width: 1px 1px 1px 3px;
    border-color: #dfdfdf;
}

.contact_group {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; width: 100%; gap: 10px;}
.contact_box {margin-bottom: 20px;}

.map {margin-top: 20px;}



.cont-image-box {flex:0 0 100%;}
.cont-info {padding: 10px; box-sizing: border-box;}
.cont-info .name {font-size: 14px; font-weight: 600;}
.cont-info .region {font-size: 12px; font-weight: 400; text-transform: uppercase;}
.cont-info .phone {font-size: 16px; font-weight: 600; color: #339425;}

.loader-box {bottom:30px; left: 0;}
.loader-back {width: 150px; height: 1px; background-color: rgba(255,255,255,0.3);}
.loader-line {top:0; left: 0; height: 1px; background-color: #fff; animation: loader-anim 7s linear infinite;}

@keyframes loader-anim {
    0% {width:0; }
    49% {width: 100%; }
    50% {width: 0; }
    100% {width: 100%;}
}

.green-key {font-size: 46px; font-weight: 400; color:#339425; line-height: 0.8;}

.empty-phone {font-size:30px;}

.display-on-footer-mobile {display: none;}



.not-found {margin:100px 0; width:100%; height: auto;}
.not-found p {font-size: 30px; font-weight: 600; text-align: center;}
.not-found a {text-align: center; display: block; margin: 20px 0;}

.proizv_logo {flex:0 0 23%;}

.text-block { margin-bottom: 20px; padding:10px 15px; box-sizing: border-box; background-color: #f4f4f4; border-top: solid 1px #c4c4c4;}
.elemet_icon {padding:10px 0; background-color:#bfbfbf; border-radius: 30px; width: 60px; height: 60px; box-sizing: border-box; margin-bottom: 5px;}
.elemet_icon p { font-size: 26px; color: #fff; font-weight: 700; text-align: center;}

.icon-e {flex:0 0 8%;}
.text {display: block; flex: 0 0 91%;}
.text p {font-size: 15px;}

.podhranvane-text {margin: 20px 0 40px 0;}

.white_link {color: #fff; font-size: 16px; text-decoration: underline;}
.white_link:hover {color: #c4c4c4;}

.black_link {color: #249ce6; font-size: 16px; text-decoration: underline;}
.black_link:hover {color: #000;}





@media only screen and (min-width: 1600px) {

    

    .logo-buffer {position: relative; height: 184px;}

    .header-container {height: 120px; transition: all 300ms;}
    .small {height: 80px; transition: all 300ms;}

    .success {height: 350px; width:auto;}
    .news-home-image {width:100%; height: 50vh; max-width: 100%; overflow: hidden !important;}

    .active {height: 65vh; transition: all 300ms; }

    .fixed-1200 {width:1550px; margin: 0 auto;}
    .products-menu-container {margin-top: 150px;}
    .menu-container .menu-item {font-size: 16px;}
    .post-box {flex:0 0 31%; margin: 20px 0 60px 0; padding:0 0 40px 0; box-sizing: border-box;}

    .post-container {margin-top: -50px; z-index: 2;}

    .menu-container {flex:0 0 65%; margin: 5px 0 0 0;}

    .display-on-footer-mobile {display: none;}

}


.tablica-100 {margin: 0 0 40px 0;}
.tablica-100 h2 {display: block; flex: 0 0 100%;}
.element {padding: 10px 25px; box-sizing: border-box; background-color: #f4f4f4; text-align: center;}
.element-name, .element-data {width: 100%;}
.element-name p {font-size: 16px; font-weight: 600; border-bottom: solid 1px #c9c9c9;}
.element-data p {font-size: 20px; font-weight: 600; color:#619c42;}


.obqvlenie {margin: 30px 0; background-color: #fff; padding: 30px 40px; box-sizing: border-box; border: solid 1px #339425;}
.obqvlenie p {font-size: 18px; color: #000;}
.obqvlenie h2 {font-size: 26px; font-weight: 600; color: #000;}
.eu_logo {width: 50%;}


.obqvlenie_green {margin: 30px 0; background-color: #339425; padding: 30px 40px; box-sizing: border-box; border: solid 1px #339425;}
.obqvlenie_green p {font-size: 18px; color: #fff;}
.obqvlenie_green h2 {font-size: 26px; font-weight: 600; color: #fff;}

































/*-----------------MOBILE------------------MOBILE------------------MOBILE------------------*/


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

    .eu_logo {width: 100%;}

    .fixed-1200 {width:100%; padding: 0 10px; box-sizing: border-box;}


    .header-desktop {display: none;}
    .header-mobile {z-index: 100; position: fixed; display: block; width: 100%; height: auto;}

    .top-line-mobile {height: 8px; border-radius: 0 0 8px 8px; width:90%; left:5%;}

    .mobile-logo-container {flex:0 0 60%;}
    .mobile-logo-container img {width:100%; margin: 10px 0 5px 0;}
    .mob-navbtn-cont {flex:0 0 30%; display: flex; justify-content: flex-end; padding-right: 10px;}
    .mob-navbtn-cont img {width: 30px; height: 24px;}

    .pad-lr {padding: 0 10px; box-sizing: border-box;}

    .home-image {width:100%; height: 70vh; max-width: 100%; overflow: hidden !important;}
    .news-home-image {width:100%; height: 30vh; max-width: 100%; overflow: hidden !important;}

    .success {height: auto; width:70%;}

    .loader-box {bottom:30px; left: 0; width: 100%;}
    .loader-back {width: 100%; height: 1px; background-color: rgba(255,255,255,0.3);}
    .loader-line {top:0; left: 0; height: 1px; background-color: #fff; animation: loader-anim 7s linear infinite;}

    .flex-60 {flex:0 0 100%;}
    .flex-49 {flex:0 0 100%;}
    .flex-50, .flex-42 {flex:0 0 100%;}

    .small-news-box {box-sizing: border-box; border:solid 1px; border-color: rgba(255,255,255,0.5); padding: 10px; background-color: rgba(0,0,0,0.65); margin-top:10px;}

    .aktualno {margin: 0 0 10px 0; flex:0 0 100%;}

    .green-key {font-size: 36px; font-weight: 400; color:#339425; line-height: 0.8;}

    .home-green-image {height: 200px; margin-top: 20px;}

    .mobile-hide {display: none;}

    .post-box-three {flex:0 0 100%; margin: 0 0 50px 0; padding:0 0 40px 0; box-sizing: border-box;}

    .allrights div {flex:0 0 100%; text-align: center;}

    .mobile-nav-container {height: 0; overflow: hidden; transition: all 500ms; margin-top:0;}
    .m-active {height: auto; transition: all 500ms; margin-top:10px;}

    .mobile-nav-container .menu-item {color:#fff; padding:15px 10px; box-sizing: border-box; border-radius: 0 0 0 14px; font-weight: 600; text-align: right; font-size: 16px; flex:0 0 100%;}

    .mobile-nav-container .menu-item:hover {color:#fff; text-decoration: none;}
    .mobile-nav-container .hover_red:hover {background-color: #da1c3b;}
    .mobile-nav-container .hover_blue:hover {background-color: #35499c;}
    .mobile-nav-container .hover_blue2:hover {background-color: #0086ba;}
    .mobile-nav-container .hover_green:hover {background-color: #339425;}
    .mobile-nav-container .hover_orange:hover {background-color: #dda600;}

    .mobile-nav-container .rounded-link {border-radius: 17px; padding:5px 15px; font-size: 16px; text-align: center; margin:10px 0 20px 0;}
    .mobile-nav-container .rounded-link:hover {text-decoration: none;}
    .mobile-nav-container .mypesticid {background-color: #0086ba; color:#fff; font-weight: 600;}
    .mobile-nav-container .mypesticid:hover {background-color: #27a3d5; color:#fff;}
    .mobile-nav-container .facebook {color:#7aa7e9; border:solid 1px #7aa7e9;}
    .mobile-nav-container .facebook:hover {color:#fff; border:solid 1px #fff;}
    .mobile-nav-container .youtube {color:#f3526d; border:solid 1px #f3526d;}
    .mobile-nav-container .youtube:hover {color:#fff; border:solid 1px #fff;}

    .more-padding-bottom {padding-bottom: 20px;}
    
    .close-menu-button {top:0; right: 10px; font-size: 30px; color: #c5c5c5;}

    .product-buttons a {flex:0 0 49%; margin-bottom: 10px; opacity: 0.8;}

    .p-heading {font-size: 26px; color: #fff; padding:25px 20px 30px 30px; box-sizing: border-box; background: linear-gradient(-90deg, #da1c3b 0%, #35499c 100%); border-radius: 0 0 0 50px; display: block;}

    .sidebar-contaier {display: none;}

    .content-container {flex:0 0 100%; margin-bottom: 40px;}

    .name h2 {font-weight: 700; color:#000; padding:5px 20px; box-sizing: border-box; background-color: #f5b906; margin: 0; font-size: 30px;}

    .empty-phone {font-size:18px;}

    .p-heading span {display: block;}

    .post-box {flex:0 0 100%; margin: 20px 0 60px 0; padding:0 0 40px 0; box-sizing: border-box;}

    .products-menu {top:0; left:0; width:100%; height: 0; background-color: rgba(0,0,0,1); overflow: hidden; transition: all 600ms;}
.active {height: 100vh; transition: all 600ms; }

.preparat-product {width: 100%; height: auto; padding:5% 10% 5% 5%; box-sizing: border-box; border-radius: 0 0 50px 0; margin-bottom: 30px; background: linear-gradient(-90deg, #0086ba 0%, #339425 100%);}

.magni {font-size:16px; top:10px; right:0; padding: 5px 10px; box-sizing: border-box; color:#fff; background-color: #f5b906;}

.sidebar-contaier-visible {flex:0 0 100%;}

.predstaviteli {align-items: stretch; display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 20px;}
.contact-container {
    flex: 0 0 48%;
    margin: 0 0 10px 0;
    flex-wrap: wrap;
    background-color: #f9f9f9;
    border-style: solid;
    border-width: 1px 1px 1px 3px;
    border-color: #dfdfdf;
}

.display-on-footer-mobile {display: block; margin: 40px 0;}

.contact_group {display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 10px;}


}