@font-face {
  font-family: 'AvantGardeC_Regular';
    src: url('fonts/AvantGardeCRegular.eot');
    src: url('fonts/AvantGardeCRegular.eot?#iefix') format('embedded-opentype'),
         url('fonts/AvantGardeCRegular.woff2') format('woff2'),
         url('fonts/AvantGardeCRegular.woff') format('woff'),
         url('fonts/AvantGardeCRegular.ttf')  format('truetype'),
         url('fonts/AvantGardeCRegular.svg#AvantGardeC') format('svg');
}

/* CSS Document */
html,body{height:100%; font-family: 'AvantGardeC_Regular', sans-serif;}
p{padding-bottom:18px;}
a{color:#fff;outline:none;cursor:pointer;text-decoration:none;}
a:hover{ }
/* Header styles */
h1,h2,h3,h4,h5,h6{line-height:1.3em;color:#fff;}
h1 a{font-size:55px; color: #000;}
h1{ padding-top: 22px;}
h2{font-size:28pt;}
h3{font-size:20pt;} 
h3 a {color:#FFF; font-family: 'AvantGardeC_Regular', sans-serif} 
h4{font-size:27px;} 
h5{font-size:18px;}
h6{font-size:16px;}
/* Global Structure---------------------------------------- */
/*----- txt,links,lines,titles -----*/
.extra-wrap{overflow:hidden;display:block;}
.fleft{float:left}
.fright{float:right !important;}
.alignright{text-align:right}
.aligncenter{text-align:center}
.alignmiddle *{vertical-align:middle}
.color1{color:#ff2100;}


.p1 {margin-bottom:8px;}
.p2 {margin-bottom:15px;}
.p3 {margin-bottom:30px;}
.p4 {margin-bottom:40px;}
.p5 {margin-bottom:50px;}

.reg {text-transform:uppercase;}

.title {margin-bottom:18px;}

.it {font-style:italic;}

.letter {letter-spacing:-1px;}

/*********************************boxes**********************************/
.margin-bot {margin-bottom:35px;}

.spacing {margin-right:35px;}

.indent {padding:0 0 0px 30px;}
.indent2 {padding-left:50px;}
.indent-bot {margin-bottom:20px;}
.indent-bot2 {margin-bottom:30px;}
.indent-bot3 {margin-bottom:45px;}

.img-indent-bot {margin-bottom:25px;}
.img-indent {float:left; margin:0 20px 0px 0;}	
.img-indent2 {float:left; margin:0 13px 0px 0;}	
.img-indent-r {float:right; margin:0 0px 0px 40px;}	

.prev-indent-bot {margin-bottom:10px;}	

.buttons a:hover {cursor:pointer;}
.clear {
 clear: both;
 display: block;
 overflow: hidden;
 visibility: hidden;
 width: 0;
 height: 0;
}
* { 
	margin:0; padding:0;
	border:0;
}

body{ 
	/*background:url(../images/fon.jpg) no-repeat fixed center #0F024A;*/
	background-color: #34399E;
	border:0;
	line-height:18px;
	-moz-background-size: 100%; /* Firefox 3.6+ */
    -webkit-background-size: 100%; /* Safari 3.1+ ? Chrome 4.0+ */
    -o-background-size: 100%; /* Opera 9.6+ */
    background-size: 100%; /* ??????????? ???????? */
}

.top-r {
	padding-top:30px; 
	float:right;
	text-align:right;
	
	position:relative;
	/*font-family:"Times New Roman", Times, serif;*/
	font-size:28px;
	/*font-weight:bold;*/
	line-height:30px;
	/*text-shadow:0 0 10px #fff;*/
	z-index:100;
}
.top-r a {color:#000}
.main { width:100%;max-width: 1920px; margin:0 auto;background-color:#EBEBEB;}
#page5 .color-p {background-color: #FEFEFE;}
#page5 .color-f {background-color: #F7F8F7;color:#34399E}
#page5 .color-f .pad_bot3 {color:#34399E}
#page5 .color-f .pad_bot3 h2 {color:#34399E; text-align:center}
#page5 .color-f .pad_bot3 h3 {color:#34399E; text-transform: none;font-size:24pt}
#page5 .color-f iframe {width: 95%;height: stretch;border: 2px solid #3B2A98;height:-webkit-fill-available;}
#page5 .color-f #content {width: 70%;margin: 0 auto;}
.header-color {background-color: #34399E;}
.header-color h1 img {width: stretch; max-width: 330px;width: -webkit-fill-available;}
.container {
  display: flex;
  gap: 20px; /* Расстояние между блоками */
  font-size: 20pt;
  line-height: 1.4;
  margin-top: 30px;
}
.center-k {display: flex;align-items: center;}
.container a {color: #34399E}
.box {
  flex: 1; /* Блоки займут равную ширину */
}
.container-2 {
  display: grid;
  grid-template-columns: 1fr 13fr; /* Два блока по 50% ширины */
  padding-bottom: 15px;
}
.container-v {margin: 15px 0;}
.container-v .container-2 {padding-bottom: 5px;}
.pad_bot3 .container img {margin: 0px;width: 25px;}



.white {
  /*height: 44px;*/
  width: max-content;
  background: #fff;
  text-align: center;
  margin: 10px auto;
  position: relative;
  padding: 0 8px 0 8px;
  border-radius:40px;
}
.white a {
  outline:none;
  height: 40px;
  text-align: center;
  width: max-content;
  border-radius:40px;
  background: #4DF4FA !important;
  border: 2px solid #fff;
  color:#3B2A98;
  text-transform: uppercase;
  margin: 0 auto;
  padding: 0 8px 0 8px;
  line-height: 40px;
  font-weight:100;
  display: block;
  font-size: 18px;
}

#content{ margin-bottom:20px; padding:0 30px; color: #34399E}
.tovary #content { margin-bottom:0px;}
#footer { background:#34399E; padding:15px 25px; color:#FFF;font-size:16pt;align-items: center;display: flex;}
#footer .r-footer img {width:20px}
.l-footer {width:20%}
.r-footer {text-align: right;width: stretch;width:-webkit-fill-available;}
.wrapper {width:100%; overflow:hidden; z-index:99; position:relative;}
.wrapper2 {max-width:350px; overflow:hidden; z-index:99; position:relative;min-width:300px;}
.hlavna {display: inline-block;}
.start .ramka {background:none}
.left{ float:left;}
.right{ float:right}

.col1{ width:95%; /*text-align: justify;*/ font-family: 'AvantGardeC_Regular', sans-serif; margin: 0 auto;}
.pos {background-color:#34399E}
.pos h3 {text-align:center;line-height: 3.5;padding-top: 20px;}
.ramka {background: white;margin: 20px;padding: 20px;border-radius: 10px;line-height: normal;font-size:16pt}
.hol-h1 {
    text-align:center; 
    color: #3B2A98; 
    text-transform: uppercase;
    font-size: 45pt;
}
.hol-h1-img {margin-top: 30px; width: 100%; text-align:center;bottom: -5px;}
.hol-h1-img-baner {position: absolute;}
.hol-h2-img {margin: 0; width: 100%; text-align:center}
.liv-kol {width:45%;float: left;text-align: center;}
.pr-kol {    
    padding: 20PX 10px 40px 10px;
    float: right;
    width: 53%;
    font-size: 21pt;
    line-height: 1.1;
}
.ramka img {border: 2px solid #3B2A98;}
.liv-kol img {width:80%; box-shadow: 0 0 15px 5px rgba(59, 42, 152, 0.7); border: 2px solid #3B2A98;}

/* ============================= main layout ====================== */
.photo img {
			top:10px;
            bottom:10px;
            left:0;
            right:50%;
            -webkit-box-shadow:0 0 15px rgba(0,0,0,0.6);
            -moz-box-shadow:0 0 15px rgba(0,0,0,0.6);
            box-shadow:0 0 15px rgba(0,0,0,0.6);
            -moz-border-radius:10px / 100px;
            border-radius:10px / 100px;
}
li{ list-style:none}
h3{ text-transform:uppercase; color:#fff; }
h5{ font-size:18px; text-transform:uppercase; color:#4e4845}
p{ padding-bottom:18px;}
img{ vertical-align:top}

/* ============================= header ====================== */
#top{ background:#000; height:49px;}
#search{ float:right; background:url(../images/search.jpg) top right no-repeat; margin-top:8px; margin-right: 20px;}
#search .submit{ float:right; font:12px Arial, Helvetica, sans-serif; font-weight:bold; color:#fff; width:36px; height:32px; background:none; cursor:pointer}
#search .submit:hover{color:#ff0000;}
#search .input{ float:right; width:173px; outline:none; padding:9px 5px; height:14px; line-height:14px; font:12px Arial, Helvetica, sans-serif; color:#fff; background:none}
#home{ margin:16px 0 0 17px; float:left; opacity:1;}
#home:hover{opacity:0.5;}
#icon{ margin:14px 12px 0 11px; float:right;opacity:1;}
#icon:hover{opacity:0.5;}
#top_banner{ float:right; font-size:12px; color:#96c60a; text-align:right; padding-top:10px;}
#top_banner img{ padding-top:5px; vertical-align:text-top}
#banner{ background:url(../images/banner.html) top left no-repeat; margin-top:7px; height:496px;}
#banner .h1{ padding-left:47px; font-size:65px; color:#fff; padding-top:188px; line-height:normal}
#banner .h2{ padding-left:67px; font-size:24px; color:#fff; display:block; margin-top:-11px; line-height:normal}

/* --- ??????? ???˲ --- */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*background-color: #333;*/
    padding: 15px 20px;
    position: relative;
    z-index: 1000;
}

.menu {
    display: flex;
    list-style: none;
    margin: 0;
    text-transform: uppercase;
}

/* ???? ??????????? ?????? ?? ?? */
.has-dropdown { position: relative; }

.submenu {
    display: none; /* ?????? ?????? */
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #444;
    min-width: 390px;
    list-style: none;
    /*padding: 10px 0;*/
}

.has-dropdown:hover .submenu {
    display: block; /* ???????? ??? ????????? */
}

.menu li a {
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    display: block;
    font-size: clamp(16px, 1.4vw, 30px);
}

.submenu li a { padding: 8px 20px; font-size: 14pt; }
.menu li a:hover { background-color: #555; }
/* ???? ??????-?????????? */
.menu-toggle {
    display: none; /* ?????? ?? ?? */
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1100; /* ??? ?????? ???? ?????? ???? */
}

/* ??????? ??? ???? */
.menu-toggle .bar {
    width: 100%;
    height: 3px;
    background-color: white;
    border-radius: 10px;
    transition: all 0.3s ease-in-out;
}
/* --- ???????? ???Ѳ? --- */
@media (max-width: 768px) {
    .menu-toggle { display: flex; z-index: 1100; }

    .menu {
        display: none; 
        flex-direction: column;
        justify-content: flex-start; /* ???????? ?????? */
        align-items: stretch; /* ?????? ?? ??? ?????? */
        position: fixed; 
        top: 0;
        left: 0;
        width: 100%;
        height: 85vh; 
        background-color: #222;
        padding-top: 80px; /* ³????? ?????? ??? ?????? */
        overflow-y: auto; /* ?????????? ????? ?????? ????, ???? ?????? ?????? */
    }

    .menu.active { display: flex; }

    .menu li {
        border-bottom: 1px solid #333; /* ????? ???? ????????? */
    }
    .menu li a {
        padding: 20px;
        font-size: 20px;
        text-align: left;
        width: 100%;
    }
/* ????????? ???????? (Dropdown) */
    .submenu {
        display: block; /* ? ???????? ???? ???????? ????? ????????? */
        background-color: #2a2a2a; /* ????? ????? ??? ??? ?????????? ???????? */
        padding: 0;
        position: static;
    }

    .submenu li {
        border-bottom: 1px solid #3a3a3a;
    }

    .submenu li a {
        padding: 15px 40px; /* ????????? ?????? ???? ??? ???????? */
        font-size: 16px;
        color: #bbb;
    }

    /* ???????? ???????? (????????, ??? ?? ????? ???????? ? JS) */
    .menu-toggle.is-active .bar:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }
    .menu-toggle.is-active .bar:nth-child(2) {
        opacity: 0;
    }
    .menu-toggle.is-active .bar:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }
}

#header h1 {margin-top:39px;}
/* ============================= content ====================== */
.marg_right1{ margin-right:22px;}
.marg_right2{ margin-right:30px;}
.pad_bot1{ padding-bottom:40px;}
.tovary .pad_bot1{ padding-bottom:0px;}
.pad_bot2{ padding-bottom:30px;}
.color-p .pad_bot3 { padding-bottom:20px; line-height: 1.1; color:white;width: 65%; margin: 0 auto;}
.color-b .pad_bot3 { padding-bottom:20px; line-height: 1.1; margin: 0 auto;}
.sh .pad_bot3{ padding-bottom:20px; line-height: 1.1; width: 65%; margin: 0 auto;}
.sh .ramka img{ width: 30%; margin: 5px;}
/*.pad_bot3 a{color:#FFF;}*/
.pad_bot3 img{margin: 20px;}
.pad_left1{ padding-left:61px;}
.marg_top1{ margin-top:37px}
.marg_left1{ margin-left:30px;}


.bloky {width:100%; display: flex;}
.bloky img { }
.color-p .bloky img {border-radius: 50%;object-fit: cover;  box-shadow: 0 0 15px 5px rgba(59, 42, 152, 0.7);border: 2px solid #3B2A98;}
.color-b .bloky img {border-radius: 50%;object-fit: cover;  box-shadow: 0 0 15px 5px rgba(59, 42, 152, 0.7);border: 2px solid #3B2A98;}
.blok {width:25%; text-align:center}
.blok .tekst {    
    background-color: #34399E;
    margin: 0 20px;
    font-size: 19px;
    color: white;
    height: 60px;
    vertical-align: bottom;
    padding-top: 35px;
    margin-top: -50px;
}
.blok .tekst2{    
    margin: 0 20px;
    font-size: 26px;
    color: #3B2A98;
    height: 90px;
    vertical-align: bottom;
    padding-top: 50px;
    margin-top: -50px;
    line-height: 1.2;
}
.xfieldimagegallery {
    width:90%; 
    display: flex;
    flex-wrap: wrap; 
    margin:20px auto;
    box-shadow: 0 0 15px 5px rgba(59, 42, 152, 0.7);
    border: 2px solid #3B2A98;
}
.xfieldimagegallery li {width: 20%;box-sizing: border-box;}
.xfieldimagegallery li img {width: -webkit-fill-available;margin:0;object-fit: cover; }
.works-list .button{ float:left; font-size:12px; font-weight:bold; color:#fff; background: #C4540C; line-height:39px; padding-left:16px; padding-right:26px; margin-top:1px; text-decoration:none; display:inline-block;}
.works-list .button:hover{background:url(../images/button2_right.jpg) right top no-repeat #2a2523;}

.carousel-box {position:relative; width:920px; border-bottom:1px solid #171412; padding-bottom:40px;}
.next1 {display:block; width:32px; height:32px; position:absolute; right:20px; top:-62px; outline:none; background:url(../images/marker_right2.gif) no-repeat 0 0;}
.prev1 {display:block; width:32px; height:32px; position:absolute; right:53px; top:-62px; outline:none; background:url(../images/marker_left2.html) no-repeat 0 0;}
.next1:hover,
.prev1:hover {background-position:0 -98px; text-decoration:none;}
.gallery2{}
.gallery2 li{ float:left; margin-right:21px; width:285px; position:relative; min-height:190px; overflow:hidden;}
.work-list {width:100%; overflow:hidden; }


.line1{ }

.button{ float:left; font-size:12px; font-weight:bold; color:#fff; line-height:39px;background: #C4540C; padding-left:16px; padding-right:16px; margin-top:1px; text-decoration:none}
.button:hover{ background: #000000; text-decoration:none;}

.link1{ color:#ffffff; text-decoration:underline;}
.link1:hover{ text-decoration:none;}
.link2{ color:#fff; text-decoration:none; font-size:18px;}
.link2:hover{ color:#70ad01;}
.font1{ font-size:18px; color:#fff;}

.list1{ margin-top:-19px;}
.list1 li{ border-bottom:1px solid #171412; width:100%; padding-top:19px; padding-bottom:19px; width:100%; overflow:hidden}
.list1 li span{ font-size:51px; line-height:normal; color:#70ad01; float:left; padding-right:23px; margin-top:-18px;}
.list2 li{ line-height:24px}
.list2 li a{ color:#ffffff; text-decoration:underline;}
.list2 li a:hover{ text-decoration:none;}
/* ============================= footer ====================== */
#footer a{ text-decoration: none}
#footer a:hover{ text-decoration: underline}

.top_img
{
min-height: 736px;
/*margin-bottom: 20px;*/
position:relative;
width:100%;
z-index:10;
background: url(../images/fon-banera.png) no-repeat 50% 50% #34399E;
height: 736px;
}
.tovary {background:#34399E;padding-top:20px;}
.tovary #content .wrapper { width: 65%;margin: 0 auto;background-image: url(../images/fon-tov.jpg);background-size: 115%;}
.tovary h1 {text-align:center;text-transform: uppercase;line-height:60pt;padding-top: 5px;color:#4DF4FA }
.tovary h2 {text-align:center;text-transform: uppercase;}
.tovary h3 {font-size:18pt;font-weight: 100;}
.tovary #content {}

.image-frame {display: flex;justify-content: center;}
.image-frame img {
  border: 10px solid transparent;
  border-image: linear-gradient(
    45deg,
    #000000 0%,
    #333333 25%,
    #666666 50%,
    #333333 75%,
    #000000 100%
  );
  border-image-slice: 1;
/* Об'єм через тіні */
  box-shadow: 
    0 10px 20px rgba(0, 0, 0, 0.5),
    0 6px 6px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -2px 0 rgba(0, 0, 0, 0.3);
  
  /* Легке заокруглення для реалістичності */
  border-radius: 8px;
}





    .container-tov {
        display: grid;
        grid-template-columns: 1fr 5fr; /* Лівий блок шириною 2/3, правий 1/3 */
        gap: 20px;
        margin: 0 auto;
        /*padding: 20px;*/
    }

    .container-tov::before,
    .container-tov::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 4px; /* Толщина полосы */
        /* Градиент: прозрачный сверху, черный в центре, прозрачный снизу */
        background-image: linear-gradient(to bottom, transparent, #A7E1F2, transparent);
    }
    
    /* Левая полоса */
    .container-tov::before {
      left: 0;
    }
    
    /* Правая полоса */
    .container-tov::after {
      right: 0;
    }    
    /* ========================================================
   ВЕРХНЯЯ И НИЖНЯЯ ПОЛОСЫ (на внутреннем блоке)
   ======================================================== */
    .my-block-inner::before,
    .my-block-inner::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      height: 2px; /* Толщина горизонтальных линий */
      /* Градиент слева направо: прозрачный -> цвет -> прозрачный */
      background-image: linear-gradient(to right, transparent, #A7E1F2, transparent);
    }

.my-block-inner::before { top: 0; }
.my-block-inner::after { bottom: 0; }
    
    
    
    
    
    .block-left {
        padding: 20px;
        border-radius: 8px;
        color: white;
        min-width: 220px;
    }
    .price {
    display: inline-block;
    text-align: center;
    width: 100%;
    margin-top: 10px;
    font-size: 18pt;
    font-weight: bold;
        
    }
    .blocks-right {
        display: grid;
        gap: 20px;
    }
    
    .block-right {
        
        padding: 20px;
        border-radius: 8px;
        color: white;
    }
    
    @media (max-width: 768px) {
        .container-tov {
            grid-template-columns: 1fr;
        }
    }

@media (max-width: 768px) {
   .top_img {max-height: 350px;min-height:350px;} 
}
/*=================================*/
/* Nivo Slider Demo
/* November 2010
/* By: Gilbert Pellegrom
/* http://dev7studios.com
/*=================================*/


#slider-wrapper {
 
  width: 702px;
  height: 311px;
  margin:0 auto;
	z-index:10;
	position:relative;
	top:25%;
}
@media (max-width: 768px) {
  #slider-wrapper {  width: 300px;
  height: auto;}  
}
#slider {
	position:relative;
    width: 702px;
    height: 311px;
	background:url(../images/loading.gif) no-repeat 50% 50%;
	z-index:99;
}
@media (max-width: 768px) {
  #slider {  width: 300px;
  height: auto;}  
}
#slider img {
	position:absolute;
	top:0px;
	left:0px;
	display:none;
}
#slider a {
	/*border:0;*/
	display:block;
}

.nivo-controlNav {
	position:absolute;
	left: 440px;
	bottom:-42px;

}
.nivo-controlNav a {
	display:block;
	background:url(../images/bullets.png) no-repeat;
	text-indent:-9999px;
	border:0;
	margin-right:3px;
	float:left;
	display: none
}
.nivo-controlNav a.active {
	background-position:0 -22px;
}

.nivo-directionNav a {
	display:block;
	width:57px;
	height:111px;
	background:url(../images/arrows-n.png) no-repeat;
	text-indent:-9999px;
	border:0;
}
a.nivo-nextNav {
	background-position:-57px 0;
	right:-100px;
}
a.nivo-prevNav {
	left:-100px;
}
@media (max-width: 768px) {
.nivo-directionNav a {
	display:block;
	width:20px;
	height:40px;
	background:url(../images/arrows-mob.png) no-repeat;
	text-indent:-9999px;
	border:0;
}
  a.nivo-nextNav {
	background-position:-20px 0;
	right:-15px;

}
a.nivo-prevNav {
	left:-15px;

}  
}
.nivo-caption {
  text-shadow:none;
  font-family: Helvetica, Arial, sans-serif;
}


.submit {
	width: 120px;
	height: 32px;
	padding: 0 0 2px;
	font: 16px "Trebuchet MS", Tahoma, Arial, sans-serif;
	outline: none;
	position: relative;
	cursor: pointer;
	border-radius: 3px;
	color: #437B7D;
	text-shadow: 1px 1px #BEF3F5;
	border: 1px solid #65B3B6;
	border-top: 1px solid #87D3D5;
	border-bottom: 1px solid #47989B;
	box-shadow:
		inset 0 1px #D4F8F8,
		inset 1px 0 #B1F1F3,
		inset -1px 0 #B1F1F3,
		inset 0 -1px #98ECEE,
		0 2px #4FA7AA,
		0 3px #47989B,
		0 4px 2px rgba(0,0,0,0.4)
	;
	background: -moz-linear-gradient(top,  #b7f2f4 0%, #81e8eb 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b7f2f4), color-stop(100%,#81e8eb)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #b7f2f4 0%,#81e8eb 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #b7f2f4 0%,#81e8eb 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #b7f2f4 0%,#81e8eb 100%); /* IE10+ */
	background: linear-gradient(top,  #b7f2f4 0%,#81e8eb 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7f2f4', endColorstr='#81e8eb',GradientType=0 ); /* IE6-9 */
	background-color: #9BEDEF;
}
.submit::-moz-focus-inner{border:0}
.submit:hover {
	border-top: 1px solid #79C5C7;
	box-shadow:
		inset 0 1px #B9F2F5,
		inset 1px 0 #B1F1F3,
		inset -1px 0 #B1F1F3,
		inset 0 -1px #B2F1F3,
		0 2px #4FA7AA,
		0 3px #47989B,
		0 4px 2px rgba(0,0,0,0.4)
	;
	background: -moz-linear-gradient(top,  #8deaed 0%, #9fedf0 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8deaed), color-stop(100%,#9fedf0)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #8deaed 0%,#9fedf0 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #8deaed 0%,#9fedf0 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #8deaed 0%,#9fedf0 100%); /* IE10+ */
	background: linear-gradient(top,  #8deaed 0%,#9fedf0 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8deaed', endColorstr='#9fedf0',GradientType=0 ); /* IE6-9 */
	background-color: #9BEDEF;
}
.submit:active {
	top: 3px;
	border: 1px solid #6EBDC0;
	border-top: 1px solid #58999B;
	border-bottom: 1px solid #78CFD2;
	background: #87E9EC;
	box-shadow: inset 0 1px 2px #4DBABD;
}

/*?????? ????????? ?? ?????????*/
.basenavi {top:-10px; position:relative;}
.navigation {color:#111; border:0px;font-size:15px;padding-bottom:15px; text-align:center}
.navigation a:link,
.navigation a:visited,
.navigation a:hover,
.navigation a:active {text-decoration:none;color:#000;background:#F9F9F9;border:1px solid #E6E6E6;padding:3px 6px;font-size:15px}
.navigation a:hover {background:#799AE3;color:#FFFFFF;border-color:#E6E6E6;}
.navigation span {text-decoration:none;color:#555;font-size:15px;background:#F9F9F9;border:1px solid #E6E6E6;padding:3px 6px;}
.navigation span a {color:#000}

.bnnavi a {color:#000;}
.toptop {
    background-position: 0 -116px;
    width: 29px;
}

.toptop:hover {
    background-position: 0 -145px;
}

.line-botom {
    width: 65%;
    margin: 0 auto;
    position: relative;
    padding-bottom: 20px;
}
.line-botom img {
    width: stretch;
    width: -webkit-fill-available;
    padding: 0 30px;
}
@media (max-width: 768px) {
    .header-color h1 img {max-width:220px}
    #content {padding: 0 10px;}
    .col1 {width:100%;}
    .hol-h1 {font-size: 30pt;padding-top: 0px;}
    .wrapper2 {width:auto; overflow:hidden; z-index:99; position:relative;}
    .wrapper2 img{width:80%}
    .liv-kol {width:100%;float: none;}
    .hlavna { display: inline;}
    .pr-kol {    
    padding: 0px;
    float: none;
    width: 100%;
    font-size: 16pt;
    }
    .container-tov {padding: 20px;}
    .tovary #content .wrapper {width:100%}
    #page5 .color-f .pad_bot3 h2 {font-size: 23pt;width: 100%;}
    #page5 .sh .pad_bot3 {width:95%;}
    .tovary #content .wrapper {background-size: cover;}
    .sh .ramka img {width:90%}
    .container-2 {grid-template-columns: 2fr 16fr;}
    .container-2 .center-k img {    width: 25px;}
    .block-right {padding: 0px;}
    .tovary h2 {font-size: 16pt;}
    .pad_bot3 img { margin-top: 20px;margin-bottom: 20px;width: 75%;}
    .ramka img {width:90%}
    .l-footer {width:66%}
    .r-footer {text-align: right;width: auto;}
    #footer .r-footer img {width: 20px;margin-right: 2px;}
    .bloky {display: inline-block;}
    .blok {width: auto;margin-bottom: 30px;}
    .pos h3 {
        font-size: 20px;
        line-height: 1.5;
        padding-top: 20px;
    }
    #page5 .color-f #content {width: 95%;}
    #page5 .color-f .pad_bot3 h3 {text-align:center;}
    #content .container {display:block}
    .xfieldimagegallery li {width: 33%;}
    #closeBtn {
    z-index: 10000;
    width: max-content;
    }
    .line-botom {width:auto;}
}

/* Стили для самого окна */
#videoModal {
  border: none;
  border-radius: 12px;
  padding: 0;
  width: 90%;          /* Ширина на мобильных */
  max-width: 400px;    /* Макс. ширина для Shorts */
  background: #000;
  overflow: visible;
  margin: 0 auto;
}

/* Центрирование через pseudo-element (для старых браузеров) и fix для dialog */
#videoModal::backdrop {
  background: rgba(0, 0, 0, 0.8); /* Затемнение фона */
}

/* Контейнер для видео, чтобы сохранять пропорции 9:16 */
.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 177.77%; /* Соотношение 9:16 */
  height: 0;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Кнопка закрытия поверх видео */
#closeBtn {
  position: absolute;
  top: 55px;
  right: 2px;
  background: #fff;
  border: none;
  padding: 5px 15px;
  cursor: pointer;
  border-radius: 5px;
}