/*
 ________  __       __       __    __  _____      __
|   __   ||  |     /  \     |  |  |  ||  __ \    |  |
|  |__|  ||  |    /    \    |  |\ |  || |__) |   |  |
|   _____||  |   /  /\  \   |  | \|  ||      /   |  |____ ___      ___
|  |      |  |  /  /__\  \  |  |\ |  ||  __  \   |  ___  |\  \    /  /
|  |      |  | /  /    \  \ |  | \|  || |__)  |_ | |___| | \  \__/  /
|__|      |__|/__/      \__\|__|  |__||_______(_)|_______|  \      /
                                                            _|    /
                                                           |     /
                                                           |____/
*/
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,dialog,div,dl,dt,em,embed,fieldset,figcaption,figure,font,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,meter,nav,object,ol,output,p,pre,progress,q,rp,rt,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video,xmp{border:0;margin:0;padding:0;font-size:100%}body,html{height:100%}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}b,strong{font-weight:700}img{color:transparent;font-size:0;vertical-align:middle;max-width:100%;max-height:100%;width:auto;height:auto;-ms-interpolation-mode:bicubic}ol,ul{list-style:none}li{display:list-item}table{border-collapse:collapse;border-spacing:0}caption,td,th{font-weight:400;vertical-align:top;text-align:left}q{quotes:none}q:after,q:before{content:'';content:none}small,sub,sup{font-size:75%}sub,sup{line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}svg{overflow:hidden}.clear,.clr{display:block;clear:both;overflow:hidden;line-height:0!important;height:0!important;font-size:0;margin:0;padding:0}.clearfix:after,.clearfix:before{content:"";display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both}.clearfix{zoom:1}html{overflow-x:hidden}hr{border:0 #ccc solid;border-top-width:1px;clear:both;height:0}ol{list-style:decimal}ul{list-style:disc}li{margin-left:30px}address,dl,fieldset,figure,hr,ol,p,pre,table,ul{margin-top:0}
.hr-shadow{position:relative;overflow:hidden;height:25px}.hr-shadow:after{position:absolute;content:'';z-index:1;height:20px;top:-20px;left:50%;width:100%;margin-left:-50%;-webkit-border-radius:200px/10px;-moz-border-radius:200px/10px;border-radius:200px/10px;box-shadow:0 0 30px rgba(0,0,0,.28)}
.swal2-popup {width: 40rem !important;}
.swal2-popup.swal2-toast {padding: 2rem !important;font-size: 2rem !important;}
h2#swal2-title {line-height: 2rem !important;}
.gridzyItem img {width: 100%;}
.small {font-size: 1.45rem;line-height: 2rem;}

/* Верстка ---------------------- */
.main {max-width: 1220px;clear: both;box-sizing: border-box;margin: 0 auto;padding: 0 10px;position: relative;}

.before-line {position: relative;color: var(--hcolor);padding: 0 0 0 130px;}
.before-line:before {display: inline-block;height: 2px;width: 100px;background: var(--hcolor);content: "";position:  absolute;top: 50%;transform: translateY(-50%);left: 0;}

.fw {position: relative;}
.fw:before,.fw:after {content: '';display: block;background: inherit;position: absolute;height: 100%;width: 10000px;top: 0;}
.fw:before{right: 100%;} .fw:after{left: 100%;}

.dark:after {width: 100%;height: 100%;top: 0;left: 0;position: absolute;display: block;content: '';background: #00000065;z-index: 1;}

.soti {position: relative;}
.soti:before {background-image: url('/assets/img/icons/miel.svg');background-size: 40px 40px;display: inline-block;width: 40px;height: 40px;margin-right: 5px;content:"";}




/* Modal ---------------------- */
    /*behavior*/
    .fon_modal {z-index: 10001;top: 0;left: 0;bottom: 0;right: 0;position: fixed;display: none;}
    .modalwrapper {-webkit-overflow-scrolling: touch;perspective: 1000px;overflow-y: scroll;z-index: 1000;top: 0;right: 0;width: 100%;height: 100%;display: none;position: fixed;}
    .modal {left: 50%;transform: translate(-50%, 0%) rotateX(50deg) scale(.6);bottom: auto;opacity: 0;z-index: 10002;box-sizing: border-box;transition: 1s;display: none;position: absolute;}
    .modal.poehali {transform: translate(-50%, -50%);opacity: 1;margin-top: 0;}
    .modal .close_modal {position: absolute;z-index: 999999;text-align: center;cursor: pointer;transition: .5s;}

    /*modal width & position*/
    .modal {width: 600px;top: 50%;}
    .modal.poehali {transform: translate(-50%, -50%);opacity: 1;margin-top: 0;}

    /*style*/
    .modalwrapper {background: rgba(0, 0, 0, 0.7);}
    .modal {background: #fff;box-shadow: 5px 5px 15px #000;padding: 40px;}
    .modal .close_modal {color: var(--textcolor);background: transparent;width: 35px;height: 35px;line-height: 35px;font-size: 30px;border-radius: 5px;right: 15px;top: 15px;}
    .modal .close_modal:hover {transform: rotate(90deg);}
    .modal h3 {color: var(--textcolor);font-weight: 700;font-size: 20px;line-height: 24px;padding: 20px 0;}



/* Список - галочки  ---------------------- */
    ul.check-list li {list-style-type: none;padding-left: 40px;position: relative;margin-bottom: 5px;margin-left: 0;}
    ul.check-list li:before {color: var(--yellow);position: absolute;font-family: 'FontAwesome';content: "\f00c";display: inline-block;left: 0px;}

/* Список кружочки  ---------------------- */
    .circle-list li {list-style-type: none;margin-bottom: 8px;position: relative;}
    .circle-list li:before {right: calc(100% + 12px);top: 50%;transform: translateY(-50%);border: 3px solid var(--yellow);width: 10px;height: 10px;border-radius: 100px;position: absolute;display: block;content:'';}

/* ol li customization ---------------------- */
    ol.numbered {counter-reset: myCounter;}
    ol.numbered li {margin-bottom: 5px;list-style-type: none;padding-left: 20px;position: relative;}
    ol.numbered li:before {background:var(--maincolor);counter-increment:myCounter;content:counter(myCounter);position:absolute;left:-14px;top:0;color:#fff;display:inline-block;text-align:center;margin:5px 10px;width:17px;height:17px;line-height:17px;border-radius:20px;font-size:.7em}

/* Fancybox    ---------------------- */  
    a[data-fancybox] {position: relative;display: block;}
    a[data-fancybox]:after {background: url(/assets/img/icons/zoom.svg) 50% 50%/20px no-repeat, rgb(0 0 0 / 0.2);display: block;content:"";position: absolute;left: 0;top: 0;width: 100%;height: 100%;opacity: 0;transition:.5s;}
    a[data-fancybox]:hover:after {opacity: 1;}


/* OWL Carousel    ------------------- */

    /* arrows 1 */
    .owl-arrows1 .owl-nav button {width: 40px;height: 40px;background: rgba(255, 255, 255, .5) !important;color: #000;border-radius: 5px;top: 50%;transform: translateY(-50%);outline: none;position: absolute;}
    .owl-arrows1 .owl-nav .owl-prev {left: 5px;}
    .owl-arrows1 .owl-nav .owl-next {right: 5px;}
    .owl-arrows1 .owl-nav button:hover {background: #fdd403 !important;color: #fff !important}


/* arrows 2 */
    .owl-arrows2 {padding: 0 40px;margin: 0;box-sizing: border-box;}
    .owl-arrows2 .owl-prev, 
    .owl-arrows2 .owl-next {background: #ecbf07 !important;color: #fff;height: 30px;width: 30px;border-radius: 5px;padding: 0;box-sizing: border-box;font-size: 0;position: absolute;transition: 0.3s;top: 50%;transform: translateY(-50%);outline: none;}
    .owl-arrows2 .owl-prev {left: 0px}
    .owl-arrows2 .owl-next {right: 0px;}


/* arrows 3 */
    .owl-arrows3 .owl-nav {top: -50px;right: 0;position: absolute;}
    .owl-arrows3 .owl-nav button {width: 40px;height: 40px;line-height: 40px !important;background: var(--grey) !important;border-radius: 5px;margin-left: 10px;outline: none;}
    .owl-arrows3 .owl-nav button.disabled {background: var(--grey) !important;cursor: initial;}
    
/* dots 1 */
    .owl-dots1 .owl-dots {margin-top: 10px;text-align: center;}
    .owl-dots1 .owl-dots button {background: var(--maincolor2) !important;width: 10px;height: 10px;margin: 0 5px;border-radius: 30px;transition: .2s;outline: none;display: inline-block;}
    .owl-dots1 .owl-dots button.active, 
    .owl-dots1 .owl-dots button:hover {background: var(--yellow) !important;}


/* dots 2 */
    /*
        <div class="owl-dots2-wrapper">
            <div class="owl-dots2"></div>
        </div>
        dotsContainer: '.owl-dots2',
    */
    .owl-dots2-wrapper {text-align: center;line-height: 10px;}
    .owl-dots2 {background: #dadada;padding: 10px;border-radius: 25px;margin: 10px 0;text-align: center;display: inline-block;line-height: 0px;}
    .owl-dots2 button {background: var(--grey) !important;width: 10px;height: 10px;margin: 0 5px;border-radius: 30px;transition: .2s;outline: none;display: inline-block;border: 0;padding: 0;}
    .owl-dots2 button.active, 
    .owl-dots2 button:hover {background: var(--maincolor) !important;}




/*------------------ -------------------*/
/*                COMMON                */
/*------------------ -------------------*/
:root {
    --maincolor: #f6f3ef;
    --maincolor2: #3c3c3c;
    --textcolor: #000;
    --hcolor: #3c3c3c;
    --red: #e84118;
    --blue: #546de5;
    --green: #44bd32;
    --grey:  #fcfaf9;
    --sky: #f2f7fd;
    --white: #fff;
    --dark: #1d1d1d;
    --yellow: #c64817;
    --headerHeight: 65px
}


.maincolor {color: var(--maincolor)}
.maincolor2 {color: var(--maincolor2)}
.textcolor {color: var(--textcolor)}
.hcolor {color: var(--hcolor)}
.red {color: var(--red)}
.blue {color: var(--blue)}
.green {color: var(--green)}
.grey {color: var(--grey)}
.sky {color: var(--sky)}
.white {color: var(--white)}
.yellow {color: var(--yellow)}
.dark {color: var(--dark)}

.bg-maincolor {background: var(--maincolor);}
.bg-maincolor2 {background: var(--maincolor2);}
.bg-textcolor {background: var(--textcolor);}
.bg-hcolor {background: var(--hcolor);}
.bg-red {background: var(--red);}
.bg-blue {background: var(--blue);}
.bg-green {background: var(--green);}
.bg-grey {background: var(--grey);}
.bg-sky {background: var(--sky);}
.bg-white {background: var(--white);}
.bg-yellow {background: var(--yellow) !important;}
.bg-dark {background: var(--dark);}


body::-webkit-scrollbar {width: 10px;background: transparent;}
body::-webkit-scrollbar-track {background: transparent;}
body::-webkit-scrollbar-thumb {background-color: var(--yellow);border-radius: 10px;}
::selection {background: var(--yellow);color: #fff;}
    



html {font-size: 9px;}
body {font-size: 2.0rem;color: var(--maincolor);font-family: 'Open Sans', sans-serif;color: var(--hcolor);background: var(--maincolor);}
a {font-weight:400;color: var(--blue);outline: none;text-decoration: none;}
a:hover {text-decoration: underline;}
p {margin-bottom: 20px;}
h1 {font-size: 5rem;line-height: 6rem;margin-bottom: 40px;color: var(--hcolor)}
h2 {font-size: 4.0rem;line-height: 4.5rem;margin-bottom: 35px;color: var(--hcolor)}
h3 {font-size: 3.2rem;line-height: 3.2rem;margin-bottom: 25px;color: var(--hcolor)}
h4 {font-size: 2.6rem;line-height: 3rem;margin-bottom: 25px;color: var(--hcolor)}
h5 {font-size: 2.3rem;line-height: 2.6rem;margin-bottom: 25px;color: var(--hcolor)}
h6 {font-size: 2.1rem;line-height: 2.4rem;margin-bottom: 25px;color: var(--hcolor)}


.bshad {box-shadow: 0 12px 30px 0 rgb(96 45 43 / 52%);}

/* FORM  ---------------------- */
input[type="text"],input[type="number"], textarea {line-height: 40px;min-height: 40px;padding: 0 20px;font-weight: 400;color: #222222;border-radius: 10px;width: 100%;margin: 0 0 10px 0;background: #f3f4f8;border: 0;font: inherit;outline: none;box-sizing: border-box;display: block;transition:.5s;}
input[type="text"].error, input[type="number"].error {background: #f7ebeb;}
textarea {padding: 20px;line-height: normal;resize: vertical;}
input:focus, textarea:focus {background: #e0e2e8;}
/* radio*/
input[type=radio] {visibility: hidden;position: absolute;}
input[type=radio] + label {cursor:pointer;}
input[type=radio] + label:before {height:16px;margin-right: 4px;content: " ";display:inline-block;vertical-align: baseline;transition: 0.3s;border:1px solid #ccc;box-shadow: inset 0 -3px 6px #e4e4e4;transition: 0.3s;}
input[type=radio] + label:before{border-radius:50%;width:16px;}
input[type=radio]:checked + label:before{box-shadow: inset 0 -1px 3px #4c4c4c, inset 0 0 1px #222, inset 0 0 0 3px var(--yellow);}
/*plus minus*/
.number span {cursor:pointer; }
.minus, .plus{width: 40px;height: 40px;font-size: 26px;line-height: 40px;background:var(--yellow);color: #fff;margin-top: 4px;display: inline-block;text-align: center;}
.number input{width: 70px;height: 40px;text-align: center;font-size: 20px;border-radius: 0;margin: 0;display: inline-block;}
.number {-webkit-touch-callout: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}		




.labelFile{padding:0;line-height: 50px;text-align: center;max-width: 250px;margin: 10px 0 20px;display:block;border: 2px solid var(--yellow);position: relative;}
.input-file{width:.1px;height:.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1}
.input-file + .labelFile{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 10px;cursor:pointer}
.labelFile:before {content: "";background: url(/assets/img/icons/upload.svg) 50% 50%/100% no-repeat;color: var(--maincolor);font-family: 'FontAwesome';display: inline-block;left: 10px;width: 13px;height: 13px;margin-right: 5px}
.bigbutton {font-size: 1.8rem;line-height: 60px;border: none;padding: 0 50px;background: var(--yellow);color: #fff;font-weight: 600;text-transform: uppercase;white-space: nowrap;cursor: pointer;font-family: inherit;outline: none;border-radius: 0;display: inline-block;transition: .5s}
.bigbutton.bg-yel {background: #ecbf07;}
.bigbutton:hover {box-shadow: 0 0 5px #602d2b;}

    /*blik*/
    .blik{position:relative;overflow:hidden}    
    .blik:before{content:'';width:100%;height:60px;display:block;position:absolute;z-index:3;border-left:100px solid rgba(255,255,255,.2);box-shadow:-20px 30px 30px rgba(255,255,255,.1);background:0 0;top:0;left:-100px;margin-left:-1px;transition:all 0s ease-in-out;transform:translate(0,0)}
    .blik:hover:before{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out;-webkit-transform:translate(115%,0);-moz-transform:translate(115%,0);-ms-transform:translate(115%,0);-o-transform:translate(115%,0);transform:translate(115%,0)}


   


/* HEADER ----------------------------- */
    .global-wrapper {padding-top: var(--headerHeight)}
    #header {background: transparent;color: #222;height: var(--headerHeight);z-index:11;position:fixed;top: 0;left: 0;width: 100%;transition:.5s;}
    #header .main {height: var(--headerHeight);}
    #header .logo {height: var(--headerHeight);left: 10px;position: absolute;top: 50%;transform: translateY(-50%);transition:.5s;}
    #header #mainmenu {position: absolute;right: 250px;height: 50px;top: 50%;transform: translateY(-50%);transition:.5s;}
    #header .tels {right: 10px;position: absolute;top: 50%;transform: translateY(-50%);transition:.5s;}
    #header .tels a {color: var(--hcolor);font-weight: 700;display: block;font-size: 16px;line-height: 18px;}
    #header p {left: 85px;position: absolute;max-width: 220px;top: 50%;transform: translateY(-50%);transition:.5s;}
   
   /* min*/
    .min #header {background: #fff;box-shadow: 0 12px 30px 0 rgb(96 45 43 / 52%);}
    
/* Main menu ---------------------- */
#mainmenu {background: transparent;box-sizing: border-box;}
#mainmenu ul.desktop-mainmenu {margin-right: 0;transition:.5s;}  
.mobile-mainmenu-button, .mobile-mainmenu-outer {display: none;}

    /* DESKTOP  ---------------------- */
    /* STYLE */
        /* common */
            ul.desktop-mainmenu {margin-bottom: 0;text-align: left;}
            ul.desktop-mainmenu li {margin: 0;padding: 0;list-style-type: none;box-sizing: border-box;}
            ul.desktop-mainmenu a {color: var(--hcolor);font-size: 17px;font-weight: 400;text-decoration: none;}
                /* submenu */
                ul.desktop-mainmenu ul.submenu {width: 300px;background: #fff;box-shadow: 0 0 10px #464646;padding: 15px;border-radius: 0 0 5px 5px;margin: 0;box-sizing: border-box;}


        /* 1 level */
            li.menu-level-1 {margin-right: 28px !important;list-style-type: none;transition: 1s;display: inline-block;}
            li.menu-level-1:last-child {margin-right: 0 !important;}
                /* hover-active-decoration */
                    li.menu-level-1 > a {color: var(--hcolor);line-height: 50px;font-weight: 600;font-size: 15px;}
                    li.menu-level-1 > a:after {background: var(--hcolor);height: 1px;bottom: -2px;width: 0;left: 50%;transition: .5s;transform: translateX(-50%);display: block;content: '';position: absolute;}
                    li.menu-level-1.active > a:after, li.menu-level-1 > a:hover:after {width: 100%;} 
                /* parent */
                    li.menu-level-1.parent {padding-right: 20px;}
                    li.menu-level-1.parent:after{width: 10px;height: 10px;background: url(/assets/images/icons/menu-down-arrow.svg) 50% 50%/100% no-repeat;top: 50%;right: 5px;transform:translateY(-50%);position: absolute;content: '';display: block;transition:.5s;}
                    li.menu-level-1.parent.hover:after {transform: translateY(-50%) rotate(180deg);}
        /* 2 level */
            li.menu-level-2 {padding: 10px !important;text-align: left;}
            li.menu-level-2 > a {color: #000;font-size: 13px;line-height: 20px;text-transform: uppercase;font-weight: 600;}
            li.menu-level-2.active a {text-decoration: underline;}

            /* parent */
                li.menu-level-2.parent {padding-right: 20px;}
                li.menu-level-2.parent:after{width: 10px;height: 10px;background: url(/assets/images/icons/menu-right-arrow.svg) 50% 50%/100% no-repeat;top: 50%;right: 5px;transform:translateY(-50%);position: absolute;content: '';display: block;transition:.5s;}

        /* 3 level */
            li.menu-level-3 {padding: 10px !important;}
            li.menu-level-3 > a {color: #000;}

    /* BEHAVIOR */
        /* common */
            ul.desktop-mainmenu li {position: relative;}ul.desktop-mainmenu a {position: relative;}
        /* 2 level */
            li.menu-level-1> ul.submenu {top: calc(100% + 20px);left: 0;z-index: 2;position: absolute;transition: .35s;opacity: 0;visibility: hidden;z-index: 10;}
            li.menu-level-1.parent:hover > ul.submenu {top: 100%;opacity: 1;visibility: visible;}
        /* 3 level */
            li.menu-level-2 > ul.submenu  {top: -20px;left: 100%;position: absolute;transition: .35s;opacity: 0;visibility: hidden;z-index: 1;}
            li.menu-level-2.parent:hover > ul.submenu  {top: 0;opacity: 1;visibility: visible;z-index: 3;}





/* BANNER -------------*/
    #banner {position: relative;}
    #banner h2 {font-size: 3.0rem;line-height: 4rem;color: var(--hcolor);}
    #banner h1 {font-size: 15rem;line-height: 15rem;font-weight: 800;}
    #banner a.bigbutton:hover {text-decoration: none;}
    
    #banner .img1, #banner .img2,#banner .img3,#banner .img4,#banner .img5,#banner .img6,#banner .img7,#banner .img8, #banner .img9, #banner .img10 {position: absolute;}
    #banner .img1 {top: -50px;right: -230px;}
    #banner .img2 {top: calc(100% - 50px);right: 418px}
    #banner .img3 {top: 300px;right: 0;width: 150px;}
    #banner .img4 {top: 500px;left: 0;width: 100px;}
    #banner .img5 {top: 100px;left: 0;width: 100px;}
    #banner .img6 {top: 90px;right: 180px;}
    #banner .img7 {top: 40px;right: 35px;}
    #banner .img8 {top: 320px;left: 35px;}
    #banner .img10 {top: 200px;left: 50%;}
    #banner .img9 {top: 60px;right: -100px;width: 230px;}    
    
    @keyframes animation { 
        0% {transform: translateY(0)}
        40% {transform: translateY(15px)}
        45% {transform: translateY(17px)}
        50% {transform: translateY(18px)}
        55% {transform: translateY(17px)}
        60% {transform: translateY(15px)}
        80% {transform: translateY(0px)}
        95% {transform: translateY(-3px)}
        97% {transform: translateY(-1px)}
        100% {transform: translateY(0px)}
    }
    
    #banner .img6  {animation: animation 2.5s linear infinite;}
    #banner .img10 {animation: animation 2s linear infinite;animation-delay: 1s;}
    
    
    
/* TEASER */    
.vibor_med img {transition: .5s}
.vibor_med:hover img {transform: translateY(-10px)}
    /* stock */
    .med .stock {position: absolute;left: 0;z-index: 2;background: #ecbf07;color: #fff;text-transform: uppercase;padding: 8px 10px;font-weight: 700;top: 0;font-size: .65em;}
    .med .stock.out-stock {background: var(--yellow);}
    

/* Мед помогает организму быть сильнее -------------*/    
    #block1 {position: relative;background-image: url(/assets/img/02.banner/h1-img4.jpg);background-position: top top;background-position: 100% 100%!important;background-repeat: no-repeat;background-size: 100% auto;}
    #block1 .hexagon .text{position: absolute;z-index: 5;width: 100%;text-align: center;}
    #block1 .text h4 {font-size: 18px; line-height: 22px;}
    #block1 .hexagon {position: relative;width: 200px; height: 115px;margin: 57px 0;border-left: solid 2px var(--yellow);border-right: solid 2px var(--yellow);}
    #block1 .hexagon:before,
    #block1 .hexagon:after {content: "";position: absolute;z-index: 1;width: 141px;height: 141px;transform: scaleY(0.5774) rotate(-45deg);background-color: inherit;left: 28px;}
    #block1 .hexagon:before {top: -72px;border-top: solid 2.8284px var(--yellow);border-right: solid 2.8284px var(--yellow);}
    #block1 .hexagon:after {bottom: -72px;border-bottom: solid 2.8284px var(--yellow);border-left: solid 2.8284px var(--yellow);}
    
    #block1 .imgleft, #block1 .imgright {position: absolute;width: 150px;z-index: -1;}
    #block1 .imgleft {left: 0;top: 50px;}
    

/* Именно такой мед  -------------*/    
    #block2 .owl_block {width: 48%;}
    #block2 {position: relative;background-image: url(/assets/img/02.banner/h1-img13.jpg);background-position: center center;background-position: 50% 50%!important;background-repeat: no-repeat;background-size: 100% auto;}
/* Хороший мед практически невозможно купить -------------*/        
    #block3 {position: relative;}
    #block3 .text, #block3 .image {position: relative;}
    #block3 .quote {position: absolute;left: -70px;top: 22%;max-width: 60px;}
    #block3 .info {position: absolute;right: -35px;bottom: -28px;max-width: 240px;background: #ffffffc7;font-size: 14px;color: #000;}
    #block3 .info span {font-size: 17px; font-weight: 700;}
    #block3 .info img.star {width: 20px;margin-right: 3px;} 

/* Каталог меда -------------*/
    #block4 {position: relative;background-image: url(/assets/img/02.banner/h1-img12.jpg);background-position: center center;background-position: 50% 50%!important;background-repeat: no-repeat;background-size: 100% auto;}

    #block4 .vibor_med p, #block4 .vibor_med li, #katalog-meda .vibor_med p, #katalog-meda .vibor_med li {font-size: 16px;}
    #block4 .bigbutton, #katalog-meda .bigbutton {font-size: 1.5rem;line-height: 45px;padding: 0 40px;}
    #block4 .vibor_med50 img, #block4 .vibor_med img, #katalog-meda .vibor_med50 img {max-width: 300px; display: block;}
    #block4 .vibor_main img {max-width: none;width: 100%;border: 5px solid #dadada;box-sizing: border-box;}
    #block4 h2.soti, #katalog-meda h2.soti {font-size: 2.8rem;line-height: 3.4rem;}
    #katalog-meda .img, #katalog-meda .vibor_med {width: 100% !important;}

/* Вы получите натуральный мед без добавок и примесей  -------------*/    
    #block5 {position: relative;background: url(/assets/img/fon/block5_fon.jpg) 50% 50%/cover no-repeat;background-attachment: fixed;}
    #block5 .text, #block5 .text h2, #block5 .text h6 {color: #fff;z-index: 2;}

/* В глиняных горшочках мед сохранит полезные свойства  -------------*/
    #block6 {position: relative;background-image: url(/assets/img/02.banner/h1-img3.jpg);background-position: center center;background-position: 50% 50%!important;background-repeat: no-repeat;background-size: 100% auto;}
    #block6 .text img {width: 40px;}
    #block6 .info {position: absolute;right: -35px;top: -28px;max-width: 240px;background: #ffffffc7;font-size: 14px;color: #000;}
    
/* Доставка и оплата любым удобным способом  -------------*/  
    #block7 .imgright {right: 0px;bottom: 120px;}
    #block7 .imgleft, #block7 .imgright {position: absolute;width: 150px;z-index: -1;}
    #block7 .imgleft {left: 0;top: 50px;}
    .delivery img {width: 80px; display: block;margin: 0 auto;}
/* Документально подтверждаем качество меда  -------------*/    
    #block8 {position: relative;background-image: url(/assets/img/02.banner/h1-img5.jpg);background-position: center center;background-position: 50% 50%!important;background-repeat: no-repeat;background-size: 100% auto;}
    #block8 .owl-carousel-docs img {background: #fff; padding: 15px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
   
   
       
/* Contacts */
    #contacts_block {position: relative;background: #fff;}
    #contacts_block h5 {text-transform: uppercase;color: var(--yellow);margin-bottom: 0;font-size: 14px;font-weight: 600;}
    #contacts_block h2 {text-transform: uppercase;color: #222;font-size: 28px; line-height: 38px;margin: 10px 0 40px;font-weight: 900;}
    #contacts_block h4 {font-size: 24px; line-height: 34px;}
    #contacts_block .form_contacts {padding: 55px 55px 0;border-right: 0;}
    #contacts_block input#name {margin-right: 2%;}
    #contacts_block input[type="text"], #contacts_block textarea {background: #f3f4f8;}
    
    #contacts_block .details {padding: 55px 55px 25px; color: #222;transform: translateX(-26px);}
    #contacts_block .details_box {margin-bottom: 60px}
    #contacts_block .details_box a, #contacts_block .details_box p {color: #222;margin: 0;font-weight: 600;}
    
    /* MAP */
    #map_box, #map {height: 600px;position: relative;}
    #map_box .contacts {width: 340px;background: #fff;padding: 40px;right: 50%;top: 50%;transform: translate(-100px, -50%);position: absolute;z-index: 10;}
    #map_box .contacts img {width: calc(100% + 80px);margin: -40px -40px 0;display: block;max-width: none;}
    #map_box .contacts a > img {width: 40px;margin: 0;display: inline-block;}
    #map_box .contacts a, #map_box .contacts p {color: var(--maincolor2); margin: 10px 0;}



/* -------------*/  
/* PAGES -------------*/  
/* -------------*/  


h1.pagetitle,
h1.blogtitle {
    padding-top: 40px;
}



/* Оптовые цены на мед */
.opt-conditions {font-size: .8em;}
.opt-conditions img {width: 80px;margin-bottom: 20px;display: inline-block;}

.opt-price {overflow-x: auto;}
table.style {width: 100%;}
table.style thead td {background: var(--yellow);color: #fff;font-size: .8em;white-space: nowrap}
table.style td {vertical-align: middle;text-align: center;padding: 10px 5px;border-bottom: 1px solid var(--maincolor);}
table.style tr td:first-child {text-align: left;}


#content .img, #content .vibor_med  {width: 30%;}

/* -------------*/  
/* BLOG -------------*/  
/* -------------*/  


.blog-full .blogtitle {padding-top: 0;}
.blog-text-wrapper {max-width: 800px;margin: auto;}
.blog-full h1 {left: 30px;width: calc(100% - 60px);top: 50%;transform: translateY(-50%);position: absolute;z-index: 2;}
.blog-image:after {background: linear-gradient(0deg, rgb(96 45 43 / 40%), rgb(101 45 43 / 52%));width: 100%;height: 100%;left: 0;top: 0;display: block;position: absolute;content: "";z-index: 1}
   



@media all and (max-width: 1220px) {
    .main {width: 990px;}
    
    #header p {left: 135px;}
    #header .tels {right: 5px;}
    #header .logo {left: 55px;z-index: 1;}
    
    .bigbutton {font-size: 1.4rem;padding: 0 40px}
    #banner h1 {font-size: 8rem;line-height: 10rem;}
    #banner .img5, #banner .img1, #banner .img2, #banner .img4, #banner .img8 {z-index: -1;}
    #banner .img3, #banner .img5 {display: none;}
    #banner .img9 {top: -25px;right: 0;width: 150px;} 

    
    
    .desktop-mainmenu {display: none;}
    .mobile-mainmenu-button {position: absolute;display: block;top: 50%;transform: translateY(-50%);left: 5px;right: auto;width: 40px;transition: .5s;z-index: 95;cursor: pointer;}
    .mobile-mainmenu-button img {width: 100% !important;}
    /*MOBILE MENU */
      #header #mainmenu {border: none;left: auto;top: auto;height: 100%;transform: none;position: initial;}
      #mainmenu .bigbutton {bottom: 0;top: auto;right: auto;position: fixed;border: none;font-size: 1.0em;padding: 8px 45px;left: 50%;background: var(--maincolor2);transform: translateX(-50%);z-index: 4;}
      #mainmenu li.id1 > a {background: rgb(255 255 255 / 0.2);padding: 12px 20px;}
      .mobile-mainmenu {text-align: left;}
       #mainmenu.min {display: none;}
       #block3 .info {right: 0;}
    /* wrapper */
        .mobile-mainmenu-outer {background: #fff;border-right: 2px solid var(--maincolor2);top: 0;width: 290px;left: -290px;transition: .5s;height: 100%;z-index: 1000;position: fixed;display: block;overflow-y: auto;box-sizing: border-box;}
        .mobile-mainmenu-active .mobile-mainmenu-outer {left: 0;}
        /* close */
            .mobile-mainmenu-close { width: 25px;padding: 10px; right: 0px;top: 0;cursor:  pointer;position: absolute;}
        	.mobile-mainmenu-close img {width: 100%}
        	.mobile-mainmenu-close:hover {transform:rotate(180deg); transition: .7s;}
        /* top block */
            .mobile-mainmenu-topBlock {margin: 30px 15px;text-align: center;display: block;position: relative;}
            .mobile-mainmenu-topBlock .logo_m {margin: 45px auto 20px;display: block;max-width: 195px;}
        	.mobile-mainmenu-topBlock .tel_m {margin: 0 auto 25px; display: block;}
            .mobile-mainmenu-topBlock .tel_m a {font-size: 20px;line-height: 28px;font-weight: 600;color: var(--yellow);text-decoration: none;display: inline-block;}
    /* Style */
        /* common */
        .mobile-mainmenu ul {margin: 0;}
        .mobile-mainmenu li {border-bottom: 1px solid #f1f1f1;margin: 0;list-style: none;}
        .mobile-mainmenu li:last-child {border: none;}
        .mobile-mainmenu li a {color: #000;padding: 12px 20px;font-size: 14px;font-weight: 400;line-height: 20px;text-decoration: none;display: block;}

            /* parent */
            .mobile-mainmenu li.parent > a {padding-right: 35px;position: relative;}
            .mobile-mainmenu li.parent > a:after {width: 15px;height: 15px;background: url(/assets/img/icons/mobile-mainmenu-plus.svg) 50% 50%/100% no-repeat;top: 50%;right: 15px;transform: translateY(-50%);position: absolute;display: block;content: '';}
            .mobile-mainmenu li.parent > a.opened:after {background-image: url(/assets/img/icons/mobile-mainmenu-minus.svg);}
            
        #block4 .bigbutton, #katalog-meda .bigbutton {padding: 0 20px;font-size: 1.2rem;line-height: 40px;}


}

@media all and (max-width: 980px) {
    .main {width:770px;}

    h2 {font-size: 3.5rem;line-height: 4.0rem;}
    h3 {font-size: 2.5rem;line-height: 3.0rem;}
    h5 {font-size: 2.0rem;line-height: 2.5rem;}
    
    
    #banner h1 {font-size: 7rem;line-height: 10rem;}
    #banner .text {padding: 50px;}
    #banner .img4, #banner .img8 {display: none;}
    
    .med .stock {font-size: .5em;display: inline-block;}
    
    #block4 h2.soti, #katalog-meda h2.soti {font-size: 2.5rem;line-height: 3.5rem;}
    
    #map_box .contacts {width: 280px;transform: translate(35px, -50%);}
    #content .bigbutton {font-size: 1.3rem;padding: 0 15px;}
    

}

@media all and (max-width: 768px) {
    .main {width: 100%;}
    h2 {font-size: 3.0rem;line-height: 3.5rem;}
    h3 {font-size: 2.0rem;line-height: 2.5rem;}
    h5 {font-size: 1.8rem;line-height: 2.4rem;}
    
    #banner h1 {font-size: 4rem;line-height: 4.5rem;-webkit-text-stroke-width: 1px;}
    #banner .text {padding: 20px;}
    #banner {margin-top: 0;}
    #banner .img6 {top: 50px;}
    
    #banner h2 {font-size: 2.5rem;line-height: 3.5rem;}

    
    #block4 .bigbutton, #katalog-meda .bigbutton {padding: 0 30px;font-size: 1.4rem;line-height: 50px;}    
    #block5 .img img {width: 50px;display: block;}

    #map_box .contacts {width: 280px;padding: 20px;transform: translate(60px, -50%);}
    #map_box .contacts img {width: calc(100% + 40px);margin: -20px -20px 0;}
    
    #banner .img3, #banner .img4, #banner .img5, #banner .img8 {display: none;}


    /* modal*/
        .modal {padding: 20px;left: 0;top: 0;transform: none !important;width: 100%;min-height: 100%;border-radius: 0;}
        .modal .close_modal {top: 5px;right: 5px;}
        .modal .comment {text-align: left;}


}

@media all and (max-width: 570px) {
    .main {width: auto;}
    h1 {font-size: 3.0rem;line-height: 3.5rem;}
    h2 {font-size: 2.8rem;line-height: 3.4rem;}
    h3 {font-size: 1.8rem;line-height: 2.2rem;}
    h4 {font-size: 2.0rem;line-height: 3.0rem;margin-bottom: 15px;}
    h5 {font-size: 1.9rem;line-height: 2.3rem;}
    
    #banner h1 {font-size: 7rem;line-height: 10rem;}
    #banner h2 {font-size: 2.0rem;line-height: 2.5rem;}
    h1.pagetitle, h1.blogtitle {padding-top: 15px;margin-bottom: 15px;-webkit-text-stroke-width: 0;}
    table.style td {padding: 5px;}
    
    .med .stock {font-size: .5em;padding: 3px 5px;top: 10px;}
    
    #header .tels a {font-size: 15px;line-height: 17px;}
    #header .tels {right: 10px;}

    #banner .img7, #banner .img1 {display: none;}
    #banner .img6 {top: auto;bottom: 280px;right: 30px;width: 50px;}
    #banner .img8 {display: block;top: auto;bottom: 250px;left: 15px;width: 40px;}
    
    #header p {display: none;}
    #banner .text {padding: 0;}
    
    #block1 .hexagon {margin: 65px auto;}
    #block3 .info, #block6 .info {right: 0;}
    #block3 .image img {max-width: 200px;margin: 0 auto;}
    #block4 .bigbutton, #katalog-meda .bigbutton {padding: 0 35px;font-size: 1.3rem;line-height: 45px;}
    
    #block4 .vibor_med50 img, #block4 .vibor_med img, #katalog-meda .vibor_med50 img {max-width: none;width: 100%;display: block;}
    
    #block4 h2.soti, #katalog-meda h2.soti {font-size: 1.5rem;line-height: 2.2rem;}
    #block4 .price, #block4 h5 {font-size: 1.65rem;line-height: 2.0rem;}
    
    .soti:before {content: none;}
    #block4 .vibor_med p, #block4 .vibor_med li, #katalog-meda .vibor_med p, #katalog-meda .vibor_med li {font-size: 15px;}
    #block4 .bigbutton, #katalog-meda .bigbutton {padding: 0 10px;font-size: 1.2rem;line-height: 35px;}

    .delivery img {width: 60px;}
    #block5, #block3 {background-attachment: initial;}
    
    #block6 .text img {width: 30px;margin-right: 8px;}

    #contacts_block .form_contacts {padding: 35px 35px 0;}
    #map_box, #map {height: 100%;}
    #map_box .contacts {margin: 35px auto 15px;transform: none;position:  relative;width: 80%;right: auto;top:  auto;padding: 20px 25px;}
    #map_box .contacts img {float: none;width: 150px;margin: 0 auto 15px;}
    #map_box .contacts a, #podval .contacts p {font-size: 18px;line-height: 22px;width: 100%;margin: 15px 0;float: none;}
    #map {height: 400px !important;display: block;}
    .opt-conditions img {width: 55px;margin-bottom: 15px;}
    
    #block1, #block2, #block4, #block6, #block8 {background-image: none;}
    #block7 .imgleft, #block7 .imgright {display: none}
    /* Мед помогает организму быть сильнее -------------*/    
    #block1 .text h4 {font-size: 14px;line-height: 22px;margin-bottom: 10px;}
    #block1 .text p {font-size: 13px;}
    #block1 .hexagon {width: 153px;height: 70px;margin: 48px 0;}
    #block1 .hexagon:before,
    #block1 .hexagon:after {width: 100px;height: 110px;left: 26px;}
    #block1 .hexagon:before {top: -68px;}
    #block1 .hexagon:after {bottom: -68px;}
    #block1 .imgleft {left: -30px;top: -75px;}
    #block1 .imgright {right: 0px;bottom: 20px;}
    #contacts_block .details_box {margin-bottom: 40px;}
    #kontaktyi .bigbutton {font-size: 1.5rem;padding: 0 45px;}
    #footer-main {position: relative;height: 25px;background: #f7f7f7;}

}