@media screen and (min-width:1024px){
	header{width:30%;background-size:auto}
	header .button::after{display: none;}
	h1{font-size:.8em;margin-top:.8em}
	h2,h3{font-size:.6em}
	img.face{width:60%}
	header .button{
		display: block;
		background: url(../img/menu-roll.svg) center no-repeat;
		top: 7px;
		width: 38px;
		height: 60px;
		right: 6px;}
		header.open .button {
			background: url(../img/menu-unroll.svg) center no-repeat;
	}
	header .button i{margin-top:0;position:relative}
	header .button i:before,header .button i hr{position:absolute;background:#fff;width:30px;height:2px;margin:0}
	header .button i:before{content:'';display:block}
	header .button i:before,
	header .button i hr:nth-child(1){transform:rotate(-50deg);top:19px}
	header .button i hr:nth-child(2),
	header .button i hr:nth-child(3){transform:rotate(50deg);top:41px}
	header .button i hr:nth-child(1),
	header .button i hr:nth-child(3){left:-12px}
	.social a{width:60px;height:60px}
	.header-footer p{margin:0}
	.header-footer img{width:50px}
	.social a:hover img{transform:perspective(1000px) rotateY(-190deg)}
	header.open .social a img{width:auto}
	header.open{height:100%;width:60px;overflow:hidden}
	header.open h1{font-size:0}
	header.open .social{height:170px;width:60px;margin-top:0}
	header.open .social a svg{width:50px;height:50px;margin:0}
	header.open .social a{margin:0}
	header.open .social a i{font-size:1em}
	header.open .social a.fb i{left:20px;top:10px}
	header.open .social a.vk i{left:16px;top:9px}
	header.open .social a.email i{left:9px;top:5px}
	header.open .button i:before,
	header.open .button i hr:nth-child(1){transform:rotate(230deg)}
	header.open .button i hr:nth-child(2),
	header.open .button i hr:nth-child(3){transform: rotate(-230deg)}
	header.open .header-footer img,header.open h3 + hr{width:45px;margin: 0 auto;}
	header.open h3 + hr +p{margin:10px 0 0 0}
	header.open .header-footer h3{font-size:.6em}
	header.open .header-footer h3 span{font-size:0}
	header.open .face{width:54px;margin-top:70px}
	header.open .studio-services{display:flex;margin:15px 5px}
	header.open .studio-service{justify-content:center;padding:5px}
	header.open .studio-service-label,header.open .studio-service-arrow{display:none}
	.main{position:absolute;right:0;width:70%;margin:0}
	header.open + .main{width:calc(100% - 60px)}
	header.open ~ .main section a{top: 5px;height:20px;width:auto;right:10px;padding:16px}
	.portfolio-card-title{min-height:60px}
	.portfolio-card-title:after{right:auto;left:0;transform:none;top:0}
	.main section{position:relative}
	.main section.portfolio-card-animating:not(.portfolio-content-visible){
		height:70px!important;
		min-height:0!important;
	}
	.main section .portfolio-card-title{
		grid-template-columns:50px minmax(0,1fr);
	}
	.main section .portfolio-card-title img{
		width:50px;
		height:50px;
		margin:5px 0 5px 5px;
	}
	.main section div:hover{z-index:1000;transform:scale(1.1)}
	.main section div,.main section .portfolio-card-title.active ~ div{position:absolute;border:1vw solid;box-shadow:0 6px 40px rgba(255, 255, 255, 0.5)}
	.main section .portfolio-card-title ~ div ~ hr {display:block;background:none}
	.main section .pc,.main section .portfolio-card-title.active ~ .pc{width:45vw}
	.main section .tablet,.main section .portfolio-card-title.active ~ .tablet{border-bottom:3vw solid;width:29vw;margin-left:14%;top:9vw}
	.main section .mob,.main section .portfolio-card-title.active ~ .mob
	{background-size:cover;margin-left:1%;top:15vw;border-bottom:3vw solid}
	.main section a{display:block;position:absolute;bottom:2vw}
	.main section div.pc:after{width:0.6vw;height:0.6vw;bottom:-1.3vw;right:0;border-radius:0.6vw}
	.main section div.tablet:after, .main section div.mob:after{width:1.1vw;height:1.1vw;bottom:-2vw;margin-right:-0.5vw;border-radius:1.1vw}
	footer{
		z-index:9999;
		left: auto;
		width: auto;
	}
	.social p{font-size:1em}
	header.open ~ .main section div,header.open ~ .main section .portfolio-card-title.active ~ div{top:3.5em;transform: scale(.93,.93)}
	.main section{height:43vw}
	header.open ~ .main section{height:31vw}
	.main section .pc,.main section .portfolio-card-title.active ~ .pc
	{right:1%;height:21vw;border-bottom:2vw solid}
	.main section .tablet,.main section .portfolio-card-title.active ~ .tablet{height:19vw}
	.main section .mob,.main section .portfolio-card-title.active ~ .mob{height:22vw;width:16vw;z-index:5}
	header.open ~ .main section div,header.open ~ .main section .portfolio-card-title.active ~ div{top:3.5em;transform: scale(.93,.93)}
	.main section{height:43vw}
	header.open ~ .main section{height:31vw}
	.main section .pc,.main section .portfolio-card-title.active ~ .pc
	{right:1%;height:21vw;border-bottom:2vw solid}
	.main section .tablet,.main section .portfolio-card-title.active ~ .tablet{height:19vw}
	.main section .mob,.main section .portfolio-card-title.active ~ .mob{height:22vw;width:16vw;z-index:5}
	header.open ~ .main section div,header.open ~ .main section .portfolio-card-title.active ~ div{top:3.5em;transform: scale(.93,.93)}
	header.open ~ .main section div,header.open ~ .main section .portfolio-card-title.active ~ div{top:3.5em;transform: scale(.93,.93)}
	header.open ~ .main section div,header.open ~ .main section .portfolio-card-title.active ~ div{top:3.5em;transform: scale(.93,.93)}
	header.open ~ .main section div,header.open ~ .main section .portfolio-card-title.active ~ div{top:3.5em;transform: scale(.93,.93)}
	header.open ~ .main section div,header.open ~ .main section .portfolio-card-title.active ~ div{top:3.5em;transform: scale(.93,.93)}
	header.open ~ .main section .tablet,header.open ~ .main section .portfolio-card-title.active ~ .tablet{margin-left:19%}
	}
	@media screen and (min-width:1200px){
	header{width:25%}
	.main{width:75%}
	h1{font-size:1em;margin-top:.6em}
	h2,h3{font-size:0.8em}
	img.face{width:45%}
	.social a{width:5vw;height:5vw;border-radius:6vw}
	.social a i{font-size:2.5vw;left:50% !important;top:50% !important;transform:translate(-50%,-50%)}
	.social a.email i{margin-top:-0.3vw}
	.header-footer img{width:12%}
	}
	@media screen and (max-height:675px){
	.header-footer p{margin:0 0 10px 0}
	header.open .header-footer img, header.open h3 + hr{width:30px}

	}
	/* admin-bar */
	@media screen and (max-width: 1023px){
	.admin-bar header:not(.open){
    height:calc(100% - 45px);
	}
	.admin-bar header{
		top: 45px;
	}
}
	@media screen and (min-width: 1024px){
		.admin-bar header{
			height: calc(100% - 30px);
			margin-top: 30px;
		}
	}

/* Studio panel desktop */
@media screen and (min-width:1024px){
	.studio-panel{
		width:360px;
		min-height:100vh;
		padding:18px 22px 96px 34px;
		overflow-y:auto;
	}
	.studio-language-switcher{
		top:14px;
		left:18px;
		width:42px;
		height:42px;
	}
	header.studio-panel .studio-panel-toggle{
		top:14px;
		right:18px;
		width:42px!important;
		min-width:42px;
		max-width:42px;
		height:42px!important;
		min-height:42px;
		max-height:42px;
		padding:0;
		aspect-ratio:1/1;
		border-radius:999px;
		background:#07111ccc!important;
	}
	.studio-panel-toggle:after{content:none!important;display:none!important;background:none!important}
	.studio-panel-toggle:before{
		content:'';
		position:absolute;
		top:50%;
		left:50%;
		width:12px;
		height:12px;
		border-top:3px solid #fff;
		border-right:3px solid #fff;
		transform:translate(-35%,-50%) rotate(225deg);
	}
	.studio-panel .face{
		width:136px;
		height:136px;
		margin:0 auto 14px;
	}
	.studio-panel h1{font-size:1.95em;line-height:1.1}
	.studio-tagline{margin:9px 0 14px;font-size:.76em}
	.studio-panel .social{gap:14px;margin-bottom:14px}
	.studio-panel .social a{width:60px;height:60px;border:0!important;background:transparent!important}
	.studio-panel .social a img{width:45px;height:45px;max-width:none}
	.studio-phone{
		min-height:0;
		margin:0 0 10px;
		padding:0;
		border:0;
		background:transparent;
		font-size:.95em;
	}
	.studio-service{min-height:44px;font-size:.95em}
	.studio-service-icon{width:31px;height:31px}
	.studio-panel .header-footer{
		position:absolute;
		right:22px;
		bottom:24px;
		left:34px;
		width:auto;
		margin:0;
		padding-top:0;
	}
	.studio-panel .header-footer p{gap:10px}
	.studio-panel .header-footer img{width:46px;height:46px}
	.main{width:calc(100% - 360px)}
	.studio-panel.open{
		width:70px;
		height:100%;
		padding:0 7px 12px;
		overflow:visible;
		z-index:1000;
	}
	.studio-panel.open .studio-language-switcher{
		top:58px;
		left:50%;
		transform:translateX(-50%);
		width:42px;
		height:42px;
	}
	header.studio-panel.open .studio-panel-toggle{
		top:12px;
		right:14px;
		width:42px!important;
		min-width:42px;
		max-width:42px;
		height:42px!important;
		min-height:42px;
		max-height:42px;
		padding:0;
		aspect-ratio:1/1;
		border-radius:999px;
		background:#07111ccc!important;
	}
	.studio-panel.open .studio-panel-toggle:before{transform:translate(-65%,-50%) rotate(45deg)}
	.studio-panel.open .studio-panel-brand{
		display:block;
		margin-top:112px;
	}
	.studio-panel.open .studio-panel-brand h1,.studio-panel.open .studio-tagline{display:none}
	.studio-panel.open .face{
		display:block;
		width:34px;
		height:34px;
		margin:0 auto 18px;
	}
	.studio-panel.open .social{
		display:flex;
		flex-direction:column;
		gap:7px;
		width:auto;
		height:auto;
		margin:0 0 10px;
		padding:10px 0;
		border-top:1px solid #ffffff55;
		border-bottom:1px solid #ffffff55;
	}
	.studio-panel.open .social a{
		width:44px;
		height:44px;
		margin:0 auto;
	}
	.studio-panel.open .social a img{display:block;width:34px;height:34px;margin:auto;object-fit:contain;max-width:none}
	.studio-panel.open .studio-services{
		display:flex;
		gap:3px;
		margin:0;
		border-top:0;
	}
	.studio-panel.open .studio-service{
		justify-content:center;
		min-height:36px;
		padding:3px;
		border:0;
		background:transparent;
	}
	.studio-panel.open .studio-service-icon{display:block;width:31px;height:31px;margin:auto}
	.studio-panel.open .social a[data-tooltip],
	.studio-panel.open .studio-service[data-tooltip]{
		position:relative;
		overflow:visible;
	}
	.studio-panel.open .social a[data-tooltip]:before,
	.studio-panel.open .studio-service[data-tooltip]:before{
		content:attr(data-tooltip);
		position:absolute;
		top:50%;
		left:calc(100% + 14px);
		z-index:50;
		min-width:max-content;
		max-width:220px;
		padding:10px 15px;
		border:1px solid #69cfff66;
		border-radius:999px;
		background:linear-gradient(135deg,#07111cf2,#0b2439ed);
		box-shadow:0 0 18px #46cfff33,0 8px 22px #0009;
		color:#fff;
		font-size:13px;
		font-weight:600;
		letter-spacing:.02em;
		line-height:1.2;
		text-align:left;
		text-shadow:0 1px 4px #000;
		white-space:nowrap;
		pointer-events:none;
		opacity:0;
		transform:translate(-8px,-50%) scale(.96);
		transition:opacity .22s ease,transform .22s ease;
	}
	.studio-panel.open .social a[data-tooltip]:after,
	.studio-panel.open .studio-service[data-tooltip]:after{
		content:none;
		display:none;
	}
	.studio-panel.open .social a[data-tooltip]:hover:before,
	.studio-panel.open .social a[data-tooltip]:focus-visible:before,
	.studio-panel.open .studio-service[data-tooltip]:hover:before,
	.studio-panel.open .studio-service[data-tooltip]:focus-visible:before{
		opacity:1;
		transform:translate(0,-50%) scale(1);
	}
	.studio-panel.open .header-footer{
		display:block;
		position:absolute;
		right:7px;
		bottom:12px;
		left:7px;
		margin:0;
		padding-top:8px;
		border-top:0;
	}
	.studio-panel.open .header-footer p{
		flex-direction:column;
		align-items:center;
		gap:5px;
	}
	.studio-panel.open .header-footer img{
		display:block;
		width:34px;
		height:34px;
		margin:0 auto;
	}
	.studio-panel.open + .main{width:calc(100% - 70px)}
}

@media screen and (min-width:1024px) and (max-height:700px){
	.studio-panel{padding-top:12px}
	.studio-panel .face{width:96px;height:96px;margin-bottom:8px}
	.studio-panel h1{font-size:1.45em}
	.studio-tagline{margin:6px 0 10px;font-size:.58em}
	.studio-panel .social{gap:10px;margin-bottom:8px}
	.studio-panel .social a{width:50px;height:50px}
	.studio-panel .social a img{width:45px;height:45px;max-width:none}
	.studio-phone{min-height:0;margin-bottom:7px;font-size:.85em}
	.studio-service{min-height:38px;font-size:.85em}
	.studio-service-icon{width:28px;height:28px}
	.studio-panel .header-footer{margin-top:10px}
	.studio-panel .header-footer img{width:36px;height:36px}
	.studio-panel.open .studio-panel-brand{margin-top:96px}
	.studio-panel.open .face{width:32px;height:32px;margin-bottom:12px}
	.studio-panel.open .social{gap:5px;margin-bottom:7px;padding:7px 0}
	.studio-panel.open .social a{width:40px;height:40px}
	.studio-panel.open .social a img{width:31px;height:31px;max-width:none}
	.studio-panel.open .studio-service{min-height:31px}
	.studio-panel.open .studio-service-icon{width:27px;height:27px}
	.studio-panel.open .header-footer img{width:29px;height:29px}
}