@charset "utf-8";

/*----------------------------------------------------------------------> ▼ .smart_menu <----------*/

.wrap_smart_menu {
	display: none;
	position: fixed;
	top: var(--header_height);
	width: 100%;
	height: calc(100vh - var(--header_height));
	background: var(--blue);
	opacity: 0.95;
	z-index: 1100;
}

.smart_menu {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	height: 80vh;	
	opacity: 0.95;
	z-index: 1200;
}

.smart_menu a {
	width: 100%;
	line-height: calc((100vh - var(--header_height)) / 7);
	border-bottom: 1px solid #fff;
	font-size: 16px;
	font-weight: bold;
	color: #fff;
	text-align: center;
}

/*----------------------------------------------------------------------> ▼ .category_menu <----------*/

.category_menu {
	display: flex;
	justify-content: center;
	border-bottom: 1px solid #eee;
	background: linear-gradient(#fff, #fff 75%, #fff);
}

.category_menu div:first-of-type {
	text-align: center;
}

.category_menu a div:nth-of-type(2) {
	text-align: center;
	font-family: Montserrat;
	color: #aaa;
}

body.en .category_menu a div:first-of-type {
	font-family: Montserrat;
}

@media (1025px <= width) {
	.category_menu a {
		padding: 45px 40px 40px;
	}

	.category_menu a:nth-child(n+2) {
		margin-left: 100px;
	}	

	.category_menu a div:nth-of-type(2) {
		display: block;
		font-size: 10px;
		letter-spacing: 2px;
	}
}

@media (769px <= width <= 1024px) {
	.category_menu a {
		font-size: 20px;
		padding: 40px;
	}

	.category_menu a:nth-child(n+2) {
		margin-left: 50px;
	}	
	
	.category_menu a div:nth-of-type(2) {
		display: block;
		font-size: 10px;
		letter-spacing: 2px;
	}
}

@media (width <= 768px) {
	.category_menu {
		flex-wrap: wrap;
		border: none;
	}

	.category_menu a {
		width: 100%;
		padding: 10px 0;
		border-bottom: 1px solid #eee;
	}

	.category_menu a div:nth-of-type(2) {
		display: block;
		font-size: 10px;
		letter-spacing: 2px;
	}
}

@media (hover: hover) and (pointer: fine) {
	.category_menu a {
		transition: var(--transition);
	}

	.category_menu a:hover {
		background: #226;
	}

	.category_menu a:hover div {
		color: #fff;
	}
}