@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400&family=Roboto:ital,wght@0,300;0,400;0,500;1,300&display=swap');


html {}

body {background: #fafafa; color: rgba(0, 0, 0, 0.9); font-family:"Roboto",sans-serif; margin: 0; padding: 0;}

header {width: 100%; }

.top_menu {position: fixed; top: 0; left: 0; width: 100%; height: 60px; background-color: #00ccff; display: block; padding:0; z-index: 999;}
.bot_menu {width: 100%; background-color: #aaa; display: block; padding:24px 0; margin-top: 24px}
.bot_menu p {color: #fff}

.w999 {max-width: 999px; margin: 0 auto; padding: 0 10px; position: relative;}

.home-block {display: inline-block; position: relative; float: left; font-family: "Roboto", sans-serif; margin: 4px 0 0;}
.home-block a {text-transform: uppercase; font-size: 16px; font-weight: 700; line-height: 1; padding: 18px 8px 18px; text-decoration: none; border-bottom: solid 2px rgba(240, 240, 240, 0.2); transition: border-bottom 0.1s ease-out 0s; color: rgba(33, 33, 33, 0.7);}
.home-block a:hover {border-bottom: solid 2px #fff; color: #fff;}
.home {position: absolute; top: 0; left: 72px;}
.back {content: url("/back-b.svg"); position: absolute; top: 15px; left: 18px; display: block; padding: 2px 12px; cursor: pointer;}
.back:hover {content: url("/back-w.svg");}

nav {position: absolute; top: 0; right: 32px;}
#menu-checkbox {display: none;}
.toggle-button {display: none;}

.menu {display: inline-block; font-size: 0; list-style: outside none none; font-family: "Roboto", sans-serif; margin: 4px 0 0; padding: 0; white-space: nowrap;}
.menu:after {clear: both; content: "";}
.menu li {display: inline-block; position: relative; float: left;}

.menulink {display: inline-block; text-transform: uppercase; font-size: 16px; font-weight: 700; line-height: 1; padding: 18px 8px 18px; text-decoration: none; border-bottom: solid 2px rgba(240, 240, 240, 0.2); transition: border-bottom 0.1s ease-out 0s; color: rgba(33, 33, 33, 0.7);}
.menulink:hover {border-bottom: solid 2px #fff; color: #fff;}

article {  margin-top: 80px; z-index: 100}		
h1, h2, h3, h4 {font-family:"Roboto Condensed",sans-serif; margin:15px 0 10px; padding:0}
h1, h3 {color: #00BEED; font-weight:400; } 
h1 {font-size:48px;}
h2 {font-size:30px; color: #111; font-weight:400;}
h3 {font-size:24px;}
h4 {font-size:20px; font-weight:400;}

.comm {font-family:"Roboto Condensed",sans-serif; font-weight:300; font-size:20px; text-indent:0;}
.pdf_link {text-indent:0; margin: 0 20px}
p {font-size:20px; line-height: 1.4; margin:0; padding:0}
a {text-decoration:none; color:#00ccff; cursor: pointer}
a:hover {color: rgb(166,28,17);}

img, img a {border:none 0; padding:0}

article p {text-indent:24px; margin:7px 0;}
#logo {margin-top: 5px; width: 300px; height: auto}

td {padding: 10px; font-family:"Roboto",sans-serif; font-size:22px;}
.anchor {position: relative}
.anchor #matrix {position: absolute; top: -56px;}

.box_ambi {width: 100%; background-color: #eee; margin: 10px 0 -70px; padding: 5px 10px 50px}

.box_video {max-width:620px; z-index:1; margin: 20px auto; padding: 0; }
.box_youtube {max-width:800px; z-index:1; margin: 20px auto; padding: 0; position: relative}
iframe {width: 100%; height: 441px; }

video {background: rgba(0, 0, 0, 0) none repeat scroll 0 0; margin:0 10px; width: calc(100% - 20px);}


.f-container-1, .f-container-2, .f-container-3 {width: 100%; display: flex; flex-wrap: nowrap; justify-content: space-between; }
.f-container-1, .f-container-2 {align-items: center;}
.f-container-3 {align-items: flex-start; background: #FFFFFF; border-top: #eee 10px solid; border-bottom: #eee 1px solid; padding: 10px 5px; margin: 15px 0;}
.f-container-3 p {text-decoration:none; color:#111}
.f-container-1, .f-container-3 {flex-direction: row}
.f-container-2 {flex-direction: row-reverse}

.f-item-1 {width: calc(100% - 480px);}
.f-item-2, .f-item-3 {width: 424px; border: 0}
.f-item-2 img, .f-item-3 img {width: 100%; height: auto}

.f-item-5 {width: calc(100% - 320px);}
.f-item-6 {width: 270px; border: 0}
.f-item-6 img {width: 100%; height: auto}

/* Кнопки */
.actBts {
    display: flex;                
    justify-content: center;      
    gap: 10px;                    /* Задаём расстояние между кнопками */
    margin-top: 10px;             
}
.buton50 {margin: 0px 10px 8px 10px; padding: 6px; align-content: center; font-size:20px; font-family:"Roboto Condensed",sans-serif; color: #00BEED; font-weight:300; border:#0cf 2px solid; border-radius: 10px; background-color: #fff; transition: background-color 0.3s ease; width: 195px; cursor: pointer;}
.buton50:hover {color: #fff; background-color: #00BEED;}

.more {width: 180px; height: 40px; font-size:20px; border: #0CF 2px solid; border-radius: 20px; display: flex; color: #00BEED; align-items: center; justify-content: center; background: transparent;
    transition: all 0.3s ease;}
.more:hover {color: #fff; background: #0cf; transform: scale(1.05); 
    box-shadow: 0 8px 15px rgba(0, 204, 255, 0.3);}
.mo-center {margin: auto; }

/*SLIDER*/
.swiper-pagination {width: 80px !important}


@media only screen and (max-width:800px), only screen and (max-device-width:800px) {
    nav a{font-family:"Roboto Condensed",sans-serif;} 
    p {font-size:20px;}

    .f-item-1 {width: calc(100% - 410px);}
    .f-item-2, .f-item-3 {width: 360px; border: 0}
    
    .mo-center {font-size:20px;}

}

@media only screen and (max-width:720px), only screen and (max-device-width:720px) {
	li.nema {display:none}
	td{font-size: 18px}
    
    iframe {height: 400px; }
    
    .f-container-1, .f-container-2, .f-container-3 {flex-direction: column}
    .f-item-1 {width: 100%;}
    .f-item-2, .f-item-3 {width: 60%; border: 0}
    
    .f-item-5 {width: 100%;}
    .f-item-6 {width: 60%; border: 0}

    .more {margin-bottom: 10px}    
    
    .swiper-button-next, .swiper-button-prev {opacity: 0 !important}

}

@media only screen and (max-width:600px), only screen and (max-device-width:600px) {
h1, h2 {margin:5px 0;}
h1 {font-size:26px;}
h2 {font-size:24px;}
h3 {font-size:24px;}
.comm {font-size:16px;}

p {font-size:18px; line-height: 1.3; font-weight:400; margin:0 2vw; padding:0}
	
img, img a {border:none 0; padding:0}
li {list-style:square outside;}

nav {display: block; position:fixed; top:62px; left:auto; right: 0; width: auto; height: auto; font-family:"Roboto",sans-serif; z-index: 2222;}
    
.menu {padding: 20px; position:relative; margin-top: 0; left: 100%; width:0; height: auto; display:block; background-color: rgb(240, 240, 240); overflow:auto; border-bottom:#999 1px solid; transition: left 0.3s ease-in-out 0s; }/* пункты меню скрыты */
.menu li {display: block; width: 80%; padding:6px;}/* пункты меню расположены вертикально ширину 80%*/
li.nema {display: block}

.menulink {display: block; padding: 6px 32px; margin: 8px 16px; border-left:solid 4px #00ccff; border-bottom:none;}
.menulink:hover {border-bottom:none; color: #000;}    
    
/* кнопки: не забываем явно указать каким должен быть курсор */	
.toggle-button 	{position:fixed; top:0; right:4px; font-size: 48px; display: block; cursor: pointer; color: #fff; padding:0; margin:0; line-height:1; width: 62px}
.toggle-button:after 	{content: url("/i2-menu.svg"); display: block; padding: 2px 12px;}/* гамбургег */
	
#menu-checkbox:checked + nav .toggle-button:after 	{content: "\2715"; font-size:32px; padding: 12px 16px;}
/* когда чекбокс активен меню становится видимым */	
#menu-checkbox:checked + nav .menu {left: 0; width:100%; margin: 0 ; box-shadow:0 2px 10px rgba(0,0,0,0.5);} 

.w999 {width: auto; padding: 0 10px}
#logo, #logo-w {width: 60%}
    
.home {position:fixed; top:2px; left:25%; }
.home-block {display: inline-block; position:relative; float:left; font-family:"Roboto",sans-serif; margin: 4px 0 0; }
.home-block a {display: block; padding: 4px 32px; border:none; color: #fff; font-size: 24px; font-weight: 500; } 
.back-block a {display: block; padding: 4px 32px; border:none; color: #fff; font-size: 42px; font-weight: 500; } 
.home-block a:hover {border:none}
.back {content: url("/back-w.svg");}

.box_ambi {padding: 5px 5px 50px}
#box_video {width:100vw; z-index:1; margin:4vw auto;}
video {width:100%; margin:0}

iframe {height: 300px; }
    
.f-item-3 {width: 80%; border: 0}
.f-item-6 {width: 80%; border: 0}
    
.nomobi {display: none}
    
}