.preloader {position:fixed;width:100%;height:100%;top:0;left:0;background:#000;width:100%;color:#fff;z-index:9999999}
.cssload-container {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.rotate{display:none}
@media (orientation:landscape) and (max-device-width: 900px){
.rotate{display:block;position:fixed;width:100%;height:100%;top:0;left:0;background:#01040b url(../img/left-fon2.webp) 50%;z-index:9999999}
.rotate img{display:block;height:30%;position:absolute;top:3%;left:3%}
.rotate p{margin:15px 0;color:#fff;width:100%;text-align:center;font-size:2em}
}

@media screen and (max-width: 1023px){head{min-width:320px}}
@media screen and (min-width: 1024px){head{min-width:1024px}}
/*iPone5*/
body{font-family: Arial, Helvetica, sans-serif;overflow-x:hidden;background:#fff}
header{position:fixed;top:0;left:0;height:100%;background:#010818 url(../img/left-fon2.webp) 50% no-repeat;width:100%}
header,a,h1,h2,h3,hr,div,img,p,.main section div,header .button i:before,header .header-footer h3 span,.main section a{transition:color .7s,background-color .7s,background-position .7s,width .7s,height .7s,min-height .7s,margin .7s,padding .7s,font-size .7s,opacity .7s,transform .7s,border-color .7s,border-width .7s,box-shadow .7s}
img.face{transition:width .4s,height .4s,margin .4s,opacity .4s,transform .4s,box-shadow .4s;border-radius:200px}
header.open{height:45px}
header.open .face,header.open h3 + hr,header.open .header-footer img{width:0}
header.open .social p{display:none}
header.open .social,header.open .face{margin-top:-20%}
header.open .social,header.open .social a svg{height:0;width:0}
header.open .social a img{width:0}
header.open h2,header.open .social a i,header.open h3{font-size:0}
header .button{position:absolute;cursor:pointer;top:10px;right:0;width:60px;height:30px;margin:0;padding:0;background:url(../img/bottom-m5.png) 0 0 no-repeat;background-size:34px;z-index:9}
header.open .button{background-position-y:-37px}
header .button i{margin-top:-2px;right:0;position:absolute;width:25px;height:25px}
header .button i hr{display:block;width:3px;height:3px;background:#fff;border:none;margin:6px 6px 6px 9px}
header .button::after{
	content: '';
	display: block;
	position: absolute;
	top: 3px;
	right: 7px;
	width: 10px;
	height: 23px;
	background-color: transparent;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="50" viewBox="0 0 10 50"><circle cx="5" cy="10" r="5" fill="white"/><circle cx="5" cy="25" r="5" fill="white"/><circle cx="5" cy="40" r="5" fill="white"/></svg>');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

header,a,h1,h2,h3{color:#fff;text-decoration:none;text-transform:uppercase;font-weight:700;text-align:center;z-index:2}
h1{margin:0.5em 0 0 0;font-size:1.6em;z-index:8;position:relative}
h2{font-size:1.1em}
h3{margin-bottom:0}
h3 + hr{width:90%}
.header-footer{position:absolute;bottom:0;width:100%}
.header-footer img{width:45px}
.face{width:155px;margin-top:0.5em}
.social{width:100%;margin:auto}
.social p{margin:15px 0 0;font-size:1.4em}
.social a{font-weight:100;margin:0 10px}
.social a img{max-width:50px}
.social a span{font-size:0;display:none}
.social a i{font-style:normal;text-transform:none;font-size:2em;position:absolute;top:12px}
.social a.fb i{left:26px}
.social a.vk i{left:21px}
.social a.email i{left:13px;top:10px}
.main{margin-top:50px;z-index:1}
.portfolio-filter,.portfolio-load-more{cursor:pointer;border:1px solid #000;background:#fff;padding:10px;text-transform:uppercase}
.portfolio-filter.active{background:#000;color:#fff}
.portfolio-load-more,.portfolio-load-more[hidden]{display:none}
.portfolio-status{margin:10px;text-align:center}
.portfolio-scroll-sentinel{height:1px}
.portfolio-results.is-loading{min-height:120px}
.portfolio-card-animating .portfolio-card-title{
	opacity:0;
	transform:translateY(16px);
	transition:opacity .35s ease,transform .35s ease;
}
.portfolio-card-animating.portfolio-title-visible .portfolio-card-title{
	opacity:1;
	transform:translateY(0);
}
.portfolio-card-animating > :not(.portfolio-card-title){
	opacity:0;
	visibility:hidden;
	transition:opacity .45s ease;
}
.portfolio-card-animating:not(.portfolio-content-visible){
	height:70px!important;
	min-height:0!important;
	margin-bottom:0!important;
	overflow:hidden;
}
.portfolio-card-animating:not(.portfolio-content-visible) > :not(.portfolio-card-title){
	display:none!important;
}
.portfolio-card-animating.portfolio-content-visible > :not(.portfolio-card-title){
	opacity:1;
	visibility:visible;
}
.portfolio-card-animating.portfolio-slide-opening{
	overflow:hidden;
}
.portfolio-card-animating.portfolio-slide-opening > :not(.portfolio-card-title){
	overflow:hidden;
	transition:none!important;
}
.studio-tagline{color:#fff;text-align:center;text-transform:uppercase}
.studio-phone{display:flex;align-items:center;justify-content:center;gap:10px;margin:15px;padding:10px;border:1px solid #fff}
.studio-phone img{width:30px}
.studio-services{display:flex;flex-direction:column;gap:5px;margin:15px}
.studio-service{display:flex;align-items:center;gap:10px;color:#fff;background:#010818cc;border-color:#ffffff80;text-align:left}
.studio-service-icon{display:block;width:28px;height:28px;object-fit:contain}
.studio-service-label{flex:1}
.studio-service-arrow{width:10px;height:10px;border-top:1px solid #fff;border-right:1px solid #fff;transform:rotate(45deg)}
.studio-panel.open .studio-tagline,.studio-panel.open .studio-phone,.studio-panel.open .studio-services{display:none}
.portfolio-card-title{
	display:grid;
	grid-template-columns:45px minmax(0,1fr);
	align-items:center;
	column-gap:12px
	;position:relative;
	min-height:45px;
	margin:5px;
	padding:0;
	font-size:1em;text-align:left;
	text-transform:uppercase;
	font-weight:100;
	border:1px #000 solid;
	background:#fff;
	color:#000;
}
.portfolio-card-title-text{display:block;padding:6px 10px 6px 0;line-height:1.12;overflow-wrap:anywhere}
.main section:last-child{margin-bottom:50px}
.main section img{width:100%;height:100%}
.main section .portfolio-card-title img{
	display:block;
	width:45px;
	height:45px;
	margin:0;
	object-fit:contain;
}
.main section a{display:none;color:#000;text-decoration:underline;background:#fff;width:100%;text-align:center}
.main section .portfolio-card-title.active ~ a{display:block;padding-top:5px}
.main section div{position:relative;width:calc(100% - 20px);height:0;margin:auto;background-size:cover;border-radius:10px}
.main section div p{
	margin: 0;
	height: 100%;
	overflow: hidden;
}
.main section div p img{
	object-fit:cover;
	object-position:top center;
}
.main section .portfolio-card-title ~ div ~ hr{display:none;width:50%;height:11px;margin:-1px auto 5px auto;background:#000;border:0}
.main section div:after{content:'';display:block;position:absolute;background:#fff}
.main section div.pc:after{width:4px;height:4px;bottom:-6px;right:0;border-radius:2px}
.main section div.tablet:after,
.main section div.mob:after{width:8px;height:8px;bottom:-15px;border-radius:4px;right:50%;margin-right:-4px}
.main section .portfolio-card-title.active ~ div{border:5px solid;border-bottom:10px solid}
.main section .portfolio-card-title.active ~ .tablet,
.main section .portfolio-card-title.active ~ .mob{border-bottom:20px solid}
.main section .portfolio-card-title.active ~ div ~ hr{display:block}
.portfolio-card-title:after{display:block;position:absolute;top:-8px;right:auto;left:-7px;transform: scale(0.7)}
section .pc{background-image:url(/img/bezopasnosdelka.ru-1920-m.jpg)}
section .tablet{background-image:url(/img/bezopasnosdelka.ru-768-m.jpg);margin-bottom:5px}
section .mob{background-image:url(/img/bezopasnosdelka.ru-425.jpg)}
.main section .portfolio-card-title.active ~ .pc{height:182px;height:47.5vw}
.main section .portfolio-card-title.active ~ .tablet{height:208px;height:65vw}
.main section .portfolio-card-title.active ~ .mob{height:525px;height:116vw}

footer{
	width:100%;z-index:1;
	position: fixed;
	bottom: 0;
	right: 0;
	left: 0;
	margin: 0;
	padding: 10px;
	text-align:center;
	color:#000;
	font-weight:500;
	text-transform:uppercase;
  background: #fff;
	background: #ffffffe3;
}

/* Studio panel */
.studio-panel{
	box-sizing:border-box;
	overflow-y:auto;
	padding:18px 22px 26px;
	background-position:center;
	background-size:cover;
	box-shadow:8px 0 24px #0008;
	font-size:16px;
}
.studio-panel *{box-sizing:border-box}
.studio-panel:before,.studio-panel::before{content:none!important;display:none!important}
.studio-panel-toggle{
	top:14px;
	right:14px;
	width:46px;
	height:46px;
	border:1px solid #ffffff66;
	border-radius:50%;
}
.studio-language-switcher{
	position:absolute;
	top:14px;
	left:14px;
	z-index:11;
	width:46px;
	height:46px;
}
.studio-language-link{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:100%;
	padding:0;
	border:0;
	border-radius:50%;
	background:#07111ccc;
	box-shadow:0 0 14px #0006;
	color:#fff;
	font-size:.84em;
	font-weight:700;
	letter-spacing:.08em;
	text-decoration:none;
	text-transform:uppercase;
}
.studio-language-link:hover,.studio-language-link:focus-visible{background:#ffffff;box-shadow:0 0 16px #ffffff55;color:#000000}
.studio-panel-brand{text-align:center}
.studio-panel .face{
	display:block;
	width:145px;
	height:145px;
	margin:8px auto 18px;
	border:1px solid #69d7ff;
	object-fit:cover;
	box-shadow:0 0 14px #42c7ff55;
}
.studio-panel h1{
	margin:0;
	color:#fff;
	font-size:1.65em;
	letter-spacing:.04em;
	text-shadow:0 2px 8px #000;
}
.studio-tagline{
	margin:12px 0 18px;
	color:#d7dde4;
	font-size:.82em;
	font-weight:400;
	letter-spacing:.2em;
}
.studio-panel .social{
	display:flex;
	justify-content:center;
	gap:20px;
	width:auto;
	margin:0 0 18px;
}
.studio-panel .social a{
	display:flex;
	align-items:center;
	justify-content:center;
	width:60px;
	height:60px;
	margin:0;
	border:0!important;
	border-radius:50%;
	background:transparent!important;
}
.studio-panel .social a img{
	width:45px;
	max-width:none;
	height:45px;
	object-fit:contain;
}
.studio-phone{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:12px;
	min-height:0;
	margin:-1px 0 10px;
	padding:0;
	border:0;
	background:transparent;
	color:#fff;
	font-size:.98em;
	font-weight:700;
	letter-spacing:.04em;
	text-transform:none;
	pointer-events:none;
}
.studio-phone:before,.studio-phone:after{
	content:'';
	flex:1;
	height:1px;
	max-width:74px;
	background:#ffffff44;
}
.studio-phone span{white-space:nowrap}
.studio-services{
	gap:0;
	margin:0;
	border-top:1px solid #ffffff33;
}
.studio-service{
	min-height:57px;
	padding:8px 6px;
	border:0;
	border-bottom:1px solid #ffffff33;
	border-radius:0;
	background:#07111c99;
	color:#fff;
	font-size:.9em;
	font-weight:400;
	text-transform:none;
}
.studio-service:hover,.studio-service.active{
	background:#143452aa;
	box-shadow:inset 0 0 20px #48bcff22;
}
.studio-service-icon{width:38px;height:38px}
.studio-service-arrow{margin-right:6px}
.studio-panel .header-footer{
	position:static;
	margin-top:20px;
	padding-top:18px;
	border-top:0;
}
.studio-panel .header-footer p{
	display:flex;
	justify-content:center;
	gap:12px;
	margin:0;
}
.studio-panel .header-footer img{
	width:46px;
	height:46px;
	border:0;
	border-radius:50%;
	object-fit:contain;
}
.studio-panel.open{
	height:54px;
	padding:0;
	overflow:hidden;
}
.studio-panel.open .studio-panel-toggle{top:4px;right:8px}
.studio-panel.open .studio-panel-brand,.studio-panel.open .social,.studio-panel.open .studio-phone,.studio-panel.open .studio-services,.studio-panel.open .header-footer{display:none}
@media screen and (max-width:1023px){
	.studio-panel.open + .main{margin-top:54px}
	.studio-panel.open .studio-language-switcher{
		top:6px;
		left:12px;
		width:42px;
		height:42px;
	}
	.studio-panel.open .studio-panel-brand{
		display:block;
		padding:11px 64px 0 64px;
		text-align:left;
	}
	.studio-panel.open .studio-panel-brand h1{
		display:block;
		margin:0;
		font-size:1.1em;
		line-height:1.1;
		text-align:left;
	}
	.studio-panel.open .face,.studio-panel.open .studio-tagline{display:none}
	.studio-panel .studio-panel-toggle{
		top:10px;
		right:0;
		width:60px;
		height:30px;
		border:0;
		border-radius:0;
		background:url(../img/bottom-m5.png) 0 0/34px no-repeat!important;
	}
	.studio-panel .studio-language-switcher{top:10px;left:10px;width:42px;height:42px;z-index:20}
	.studio-panel .studio-language-link{font-size:.76em}
	.studio-panel.open .studio-panel-toggle{background-position-y:-37px!important}
}
/*iPad*/
@media screen and (min-width:600px){
	header .button{top:28px;width:115px;height:50px;background-size:60px;background-position-y:-2px}
	header .button::after{
		top: 0;
		right: 22px;
		height: 46px;
	}
	header{font-size:2em}
	header.open{height:90px}
	header.open .button {
		background: url(../img/bottom-m5.png) 0 -67px no-repeat;
		background-size: 60px;
}
.header-footer img{width:80px}
.main{margin-top:95px}
.portfolio-card-title{font-size:1.30em;line-height:1}
.main section .portfolio-card-title.active ~ div{border-bottom:20px solid}
.main section div.pc:after{width:8px;height:8px;bottom:-14px;right:3px;border-radius:4px}
.main section .portfolio-card-title ~ div ~ hr{height:18px}
.main section .portfolio-card-title.active ~ .tablet, .main section .portfolio-card-title.active ~ .mob{border-bottom:35px solid}
.main section div.tablet:after, .main section div.mob:after{width:12px;height:12px;bottom:-24px;border-radius:6px;margin-right:-6px}
/*portf*/
section.monaco .mob,section .mob,section.udobnie-sati .mob,section.videogusev .mob,section.at76 .mob{width:425px;background-size:424px}

/*bezopasnosdelka.ru*/
section .pc{background-image:url(/img/bezopasnosdelka.ru-1920.jpg)}
section .tablet{background-image:url(/img/bezopasnosdelka.ru-768.jpg)}
.main section .portfolio-card-title.active ~ .pc{height:182px;height:47.5vw}
.main section .portfolio-card-title.active ~ .tablet{height:208px;height:65vw}
.main section .portfolio-card-title.active ~ .mob{height:720px}
/*bezopasnosdelka.ru*/
}

@media screen and (max-width:1023px){
	header.studio-panel{
		display:flex;
		flex-direction:column;
		width:100%;
		max-width:100%;
		height:100vh;
		height:100dvh;
		min-height:100vh;
		min-height:100dvh;
		font-size:16px;
		overflow-y:auto;
		position:fixed;
		top:0;
		left:0;
		z-index:10;
		padding-bottom:18px;
	}
	header.studio-panel.open{
		height:60px;
		min-height:60px;
		overflow:hidden;
	}
	.studio-panel.open + .main{margin-top:70px}
	.studio-panel .face{
		width:112px;
		height:112px;
	}
	.studio-panel h1{font-size:1.65em}
	.studio-panel .social a{
		width:60px;
		height:60px;
	}
	.studio-panel .social a img{width:45px;height:45px}
	.studio-panel .studio-panel-toggle{
		top:0;
		right:0;
		left:0;
		width:100%;
		height:60px;
		background:none!important;
		z-index:20;
	}
	.studio-panel .studio-panel-toggle:after{
		display:block!important;
		content:''!important;
		top:15px;
		right:10px;
		width:10px;
		background-color:transparent;
		background-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="50" viewBox="0 0 10 50"><circle cx="5" cy="10" r="5" fill="white"/><circle cx="5" cy="25" r="5" fill="white"/><circle cx="5" cy="40" r="5" fill="white"/></svg>');
		background-repeat:no-repeat;
		background-position:center;
		background-size:contain;
	}
	.studio-panel.open .studio-panel-toggle{background:none!important}
	.studio-panel.open .studio-panel-brand{
		display:flex;
		align-items:center;
		justify-content:center;
		height:60px;
		padding:0 54px;
		text-align:center;
		pointer-events:none;
		position:relative;
		z-index:1;
	}
	.studio-panel.open .studio-panel-brand h1{
		display:block;
		margin:0;
		font-size:1.2em;
		line-height:1;
		text-align:center;
	}
	.studio-panel .header-footer{
		position:static;
		width:auto;
		margin:auto 0 0;
		padding-top:14px;
	}
	.portfolio-card-animating:not(.portfolio-content-visible){
		height:55px!important;
	}
}

@media screen and (max-width:380px) and (max-height:700px){
	header.studio-panel{
		padding:10px 20px 12px;
	}
	.studio-panel .face{
		width:82px;
		height:82px;
		margin:4px auto 10px;
	}
	.studio-panel h1{font-size:1.35em}
	.studio-tagline{
		margin:7px 0 10px;
		font-size:.72em;
		letter-spacing:.18em;
	}
	.studio-phone{
		margin:0 0 8px;
		font-size:.88em;
	}
	.studio-panel .social{
		gap:16px;
		margin-bottom:12px;
	}
	.studio-panel .social a{
		width:48px;
		height:48px;
	}
	.studio-panel .social a img{
		width:40px;
		height:40px;
	}
	.studio-service{
		min-height:51px;
		padding:6px;
		font-size:.88em;
	}
	.studio-service-icon{
		width:34px;
		height:34px;
	}
	.studio-panel .header-footer{
		padding-top:10px;
	}
	.studio-panel .header-footer img{
		width:38px;
		height:38px;
	}
}

/*404*/
.p404,
.m404{
	width: 100%;
	height: 100%;
	position: absolute;
	background-size: cover;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	background-position: center;
}
.m404 a,
.p404 a{
	font-size: 1.2em;
	background: #ffffffc9;
	padding: 10px 28px;
	border-radius: 35px 0;
	color: #000000;
	z-index: 1;
	margin-bottom: 20%;
	font-weight: 100;
}
.p404 a{
	font-size: 1.45em;
	margin-bottom: 7%;
}