@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;600&display=swap');

:root {
	--ratufa-color-1: #57c9c0;
	--ratufa-color-2: #f28c00;
}

body{
	margin:0; padding:0;
	font-family:'Inter', sans-serif;
	background-color:#0b0f1a; color:#fff;
}

h1	{
	color:var(--ratufa-color-1);
	font-size:2.22em;
	font-weight:100;
}
h2	{
	color:var(--ratufa-color-2);
	font-size:1.5em;
	font-weight:100;
}

a	{ text-decoration:none; }

error { display:none; color:#f00; }

header{
	padding:0 5%;
	display:flex; flex-wrap:nowrap; align-items:flex-start; justify-content:space-between; align-content:flex-start; flex-direction:row; align-items:center;
	border-bottom: 1px solid; border-image: linear-gradient(-90deg, var(--ratufa-color-2), var(--ratufa-color-1)); border-image-slice: 1;
}

header logo{
	display:flex; gap:8px;
}

ui-cover{
	position:absolute; top:0; right:0; left:0; z-index:10;
}

ui-cover.act{
	bottom:0;
}

menu{
	padding:0; margin:0;
	z-index:20;
	border:1px solid #ddd0;
	background-color:#fef0; backdrop-filter:blur(0px); -webkit-backdrop-filter:blur(0px);
	transition: all 2.4s ease;
}

menu.act{
	background-color:#fefc; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
	border-color:#dddf;
}

footer{
	margin-top:3%; padding:3% 5%;
	display:grid; gap:32px;
	background:#101624;
}

footer h3{
	font-size:1em; font-weight:400;
	color:var(--ratufa-color-2);
}
footer a{
	color:#a8b4c4;
	font-size:.9em; text-decoration:none;
}
footer a:hover{
	color:#ddd;
}

section{
	width:90%; margin-left:5%; margin-right:5%;
}

@media(max-width:999px){
	header>ul{
		display:none;
	}
	ui-hamb, ui-hamb::before, ui-hamb::after{
		width:32px; height:3px;
		border-top:2px solid var(--ratufa-color-1); border-bottom:2px solid var(--ratufa-color-1);
		cursor:pointer;
	}
	ui-hamb{
		margin:32px 0;
	}
	ui-hamb::before{
		position:relative; top:8px;
		display: block; content:'';
	}
	ui-hamb::after{
		position:relative; bottom:19px;
		display: block; content:'';
	}

	menu{
		width:75%; height:100%;
		position:fixed; top:0; right:-75%;
		display:flex; justify-content:space-around; flex-direction:column; flex-wrap:wrap;
		font-size:2.2em;
	}
	
	menu.act{
		right:0;
	}

	menu>div{ line-height:60px; padding:0 16px; cursor:pointer; font-weight:600; }
	menu>block{ height:0; padding:0 32px; overflow-y:hidden; transition: all 1.666s ease;}
	menu>block.act{ height:calc(50% - 90px); }
	menu>block>ul{ line-height:32px; }
	menu>block>ul>li{ margin:40px 0; }

	section.banner{
		width:100%; margin-left:0; margin-right:0;
	}

	footer{
		height:360px;
		grid-template-columns:3fr 1fr; grid-template-rows:1fr 1fr; grid-auto-flow:column;
	}
	footer>nav.w66{
		width:66.6%;
	}
	footer>nav.w33{
		width:33.3%;
	}
}
@media(min-width:1000px){
	header>ul{
		width:480px; margin:29px 0 29px 0; padding:0;
		position:relative; z-index:12;
		list-style:none;
		display:flex; flex-wrap:nowrap; align-items:flex-start; justify-content:space-evenly; align-content:flex-start; flex-direction:row;
	}
	
	header>ul>li{
		margin:0 0 2px 0; padding:0;
		cursor:pointer;
		color:#eee;
	}
	header>ul>li.act{
		margin:0;
		border-bottom:2px solid var(--ratufa-color-2);
		color:var(--ratufa-color-2);
	}

	header>ul>li::before{
		width:4px; height:4px; margin:0 6px 4px 0;
		border-left:1px solid #eee; border-top:1px solid #eee;
		content:''; display:inline-block;
		transform:rotate(135deg);
		transition:transform 2.4s, border-color, 2.4s;
	}
	header>ul>li:hover{
		color:var(--ratufa-color-2);
	}
	header>ul>li.act::before{
		border-color:var(--ratufa-color-2);
	}
	header>ul>li.op::before{
		transform:rotate(225deg);
	}
	ui-hamb{
		display:none;
	}

	menu{
		width:800px; height:0;
		position:absolute; top:64px; left: calc(50% - 400px);
		flex-direction:row; gap:32px;
		overflow-y:hidden;
	}
	
	menu::before{
		width:800px; height:2px;
		background:#f00;
		display:block; content:'';
		position:absolute; top:60px; z-index:3;
	}
	
	menu.act{
		height:400px;
	}

	menu>div{ display:none; }

	menu>block{
		display:inline-block; width:0; height:400px;
		transition:all 0.1s linear;
		overflow:hidden;
	}

	menu>block.act{
		width:348px; margin:0 20px;
	}

	[columns="2"]{
		columns:2; column-gap:5%;
	}

	footer{
		grid-auto-flow:column;
	}
}

block{
	margin:0; padding:0;
}

menu h6{
	font-size: 1em;
	color:#a00;
}

menu ul{
	line-height:32px; margin-left:8px; padding:0;
	list-style: none;
}

menu a{
	cursor:pointer;
	color:#333;
}

menu a:hover{
	color:#666;
}

header>button{
	width:128px; height:24px; line-height:24px; margin:24px 0 24px 0;
	text-align:center;
	background:#0008; color:var(--ratufa-color-1);
	border:1px solid var(--ratufa-color-1); border-radius:6.66px;
	cursor:pointer;
}

section>p	{ text-indent:3%; text-align:justify; }

section.banner{ margin-bottom:2%; position:relative; }
section.banner>img	{ width:100%; }
section.banner>h1	{ position:absolute; margin:0; font-size:2em;}
section.banner>p	{ position:absolute; top:25%; left:10%; width:33%; }
section.banner>cite	{ position:absolute; bottom:16px; right:16px; width:12px; height:16px; color:#0000; background-image:url('/ico/fact.svg'); cursor:pointer;}
section.banner>cite.act	{ position:absolute; bottom:10%; right:10%; width:33%; font-size:0.666em; text-indent:5%; text-align:justify; background-image:url('/ico/fact.svg');}
section.banner>h6	{ position:absolute; bottom:6.66%; left:4%; width:66%; font-style:italic; font-weight:100; margin:0; font-family:'Dancing Script', cursive; font-size: 2em; filter:drop-shadow(0 0 4px #008); color: #fff; }

section.desc { padding-bottom:2%; }
section.desc *:first-child { margin-top:0; }
section.desc p:last-child { margin-bottom:0; }
@media(max-width:999px){ section.desc { columns:1; } }
@media(min-width:1000px) and (max-width:1399px){ section.desc { columns:2; gap:5%; } }
@media(min-width:1400px) and (max-width:1799px){ section.desc { columns:3; gap:5%; } }
@media(min-width:1800px) and (max-width:2099px){ section.desc { columns:4; gap:5%; } }
@media(min-width:2100px){ section.desc { columns:5; gap:5%; } }

@media(min-width:1279px){
	section.blocks-2{ display:grid; grid-template-columns:1fr 1fr; justify-content:space-between; align-items:start; gap:2%; }
}

@media(min-width:1680px){
	section.blocks-3{ display:grid; grid-template-columns:1fr 1fr 1fr; justify-content:space-between; align-items:start; gap:2%; }
}

@media(min-width:960px) and (max-width:1799px){
	section.blocks-4{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; justify-content:space-between; align-items:start; gap:2%; }
}
@media(min-width:1800px){
	section.blocks-4{ display:grid; grid-template-columns:1fr 1fr 1fr 1fr; justify-content:space-between; align-items:start; gap:2%; }
}

@media(min-width:960px) and (max-width:1599px){
	section.blocks-6{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr 1fr; justify-content:space-between; align-items:start; gap:2%; }
}
@media(min-width:1600px) and (max-width:2199px){
	section.blocks-6{ display:grid; grid-template-columns:1fr 1fr 1fr; grid-template-rows:1fr 1fr; justify-content:space-between; align-items:start; gap:2%; }
}
@media(min-width:2200px){
	section.blocks-6{ display:grid; grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr; grid-template-rows:1fr; justify-content:space-between; align-items:start; gap:2%; }
}


section.desc, section.blocks-3, section.blocks-4, section.blocks-6{
	border-bottom: 2px solid; border-image: linear-gradient(90deg, var(--ratufa-color-2), var(--ratufa-color-1)); border-image-slice: 1;
}

#carousel {
	margin-top:16px; margin-bottom:16px;
	display:flex; gap:32px; justify-content:space-between;
}

#carousel ui-icon{
	position:sticky; top:160px; z-index:3;
	font-size:56px;
	cursor:pointer;
}

#carousel nav{
	position:relative;
	width:320px; height:380px; padding:15px;
	border:1px solid var(--ratufa-color-1); border-radius:6.66px;
	box-shadow: 0 0 6px #6666;
}
#carousel nav::after{
	content:''; display:inline-block;
	position:absolute; bottom:0; left:calc(50% - 6px); width:10px; height:10px;
	border-top:2px solid var(--ratufa-color-2); border-left:2px solid var(--ratufa-color-2); border-top-left-radius:6.66px;
	transform: rotate(45deg);
}
#carousel nav:hover::after{
	border-color:#f000;
}

#carousel h3 {height:48px; margin:0; font-size:1em; font-weight:400; color:#a8b4c4;}
#carousel img {width:320px; height:240px;}
#carousel p {
	height:64px; padding:13px;
	overflow-y: hidden;
	position:absolute; bottom:-13px; left:0;
	font-size:.85em;
	transition:all .5s;
	background:#101624;
	mask-image:linear-gradient(to bottom, black 50%, transparent);
	border-bottom-left-radius:6.66px; border-bottom-right-radius:6.66px;
}

#carousel nav:hover p {
	height:auto;
	mask-image:linear-gradient(to bottom, black 100%, transparent);
}

label{
	display:block;
}
input[type="text"]{
	padding:4px;
	font-size:12px;
	border-width:1px; border-radius:4px;
}

input[type="text"][required]{
	border-left:1px solid var(--ratufa-color-2);
}