@charset "UTF-8";
/* ! ================================================*/
/* !Header */
/* ! ================================================*/
#site-header{position: relative;}
#header{width: 100%;height: 48px;margin: 0 0 0px;padding: 0 3%;background: #fff;border-bottom: 1px solid var(--color-border);}
.header-fixed #header{position: fixed;top:0;left: 0;width: 100%;}
#site-navigation{background: #fff;}

@media screen and (min-width:992px) {
	#site-header{display: flex;padding: 0.2rem var(--padding-base);position: relative;background: var(--color-white,#fff);}
	#masthead{}
	#header{position: static;width: 260px;height: auto;padding: 0;border: none;}
	.header-fixed #page #site-header{position: fixed;top:0;left: 0;width: 100%;}
	#site-navigation{width: calc( 100% - 260px );background:#fff;}
}

/* ! -------------------------------------------------------------- */
/* ! Mast Header */
/* ! -------------------------------------------------------------- */
/* ! #masthead ================================================ */
#masthead{}
/* .disc ==================== */
.desc{}

/* ! #topics bar ================================================ */
#topicsbar{}

/* ! -------------------------------------------------------------- */
/* ! Header */
/* ! -------------------------------------------------------------- */
/* ! #header ================================================ */
#header{}

/* #site-title ==================== */
#site-title{width: calc( 100% - 120px );height: 100%;}
#site-title a{
	display:flex;align-items:center;
	width: 100%;height: 100%;padding: 0 0px;
	font-size: 32px;font-weight: 700;
}
#site-title img{width: 32px;height: 32px;margin: 0 10px 0 0;display: none;}

@media screen and (min-width:992px) {
	#site-title{width: auto;height: 100%;}
	#site-title a{font-size: 36px;line-height: 1;}
	#site-title img{width: 60px;height: 60px;}
}

/* #site-search ================================================ */
#site-search{
	display: flex;justify-content: center;align-items: center;
	position: absolute;top:8px;right: 55px;
	width: 30px;max-width: 30px;height: 30px;border-radius: 30px;
	padding: 2px 0px 0px 0px;margin: 0;
	transition: all 0.5s;
	background: var(--color-base-7);
}
.icon-site-search{width: 18px;height: 18px;fill:#fff;cursor: pointer;}
#site-search:hover{background: var(--color-secondary);}
#search-area-button{display: none;}

/* search-form.site ==================== */
#site-search .search-form.site{
	display: flex;position: absolute;top:-8px;right: 33px;z-index: 1;
	width: 0;height: auto;overflow: hidden;padding: 0;
	visibility: hidden;opacity: 0;
	background: #fff;transition: all 0.3s;transition: ease-in 0.3s;
}
#search-area-button:checked + .search-form.site{
	width: calc( 100vw - 33px );max-width:100vw;
	visibility: visible;opacity: 1;
}
/* search-box ==================== */
.search-box{display: flex;justify-content: flex-end;align-items: center;height: 45px;}
.search-box>label{margin: 0;padding: 0;}
/* input[type="text"]#search-form-site */
.search-box>label #search-form-site{background: #fff;border: 1px solid var(--color-border);padding: 5px;margin: 0;width: 100%;}
.search-box>label #search-form-site::placeholder {color: #ccc;}
/* input[type="submit"].search-submit */
.search-box input[type="submit"].search-submit{margin: 0;padding: 7px 10px;border-radius: 0px 5px 5px 0px;box-shadow: none;width: 60px;}
form.search-form.site .search-box:before{display: none;}

@media screen and (min-width:992px) {
	#site-search{position: static;margin: 14px 10px 0 0px;opacity: 1;}
	/* form.search-form.site */
	#site-search form.search-form.site{top:0px;right: calc(  var(--padding-base) + 75px );height: 100%;}
	#search-area-button:checked + form.search-form.site{width: calc( 100% - 100px );max-width:730px;}
	.search-box{justify-content: center;height: 100%;}
	.search-box>label #search-form-site{padding: 6px;width: 300px;}
	.search-box input[type="submit"].search-submit{padding: 8px 10px;max-width: 100px;}
}

/* #site-favorite ================================================ */
#site-favorite{
	display: flex;justify-content: center;align-items: center;
	position: absolute;top:8px;right: 90px;
	width: 30px;max-width: 30px;height: 30px;
	padding: 4px 0px 0px 2px;
	border-radius: 30px;
	background: var(--color-base-7);
}
#site-favorite:hover{background: var(--color-primary);}
#site-favorite .icon-favorite{width:  18px;height: 18px;fill:#fff;cursor: pointer;}
@media screen and (min-width:992px) {
	#site-favorite{
		position: static;
		margin: 14px 0px 0 0px;
		background: var(--color-base-7);
	}
}

/* ! -------------------------------------------------------------- */
/* ! Site Navigation */
/* ! -------------------------------------------------------------- */
/* ! #site-navigation ================================================ */
/* #navigation ==================== */
#navigation{
	position: fixed;top:0px;right:-100%;z-index:4;
	width: 100%;height: calc( 100vh - 0px );overflow-y: scroll;overflow: hidden;
	padding: 50px 0 2em;
	background: var(--color-white);
	transition: all 0.5s;
}
#menu-toggle:checked ~ #navigation {right: 0px;}

@media screen and (min-width:992px) {
	#navigation{
		display: block;
		position: static;
		width: auto;height:100%;overflow:visible;
		margin: 0;padding: 0;
		transition:none;
	}
}

/* .nav-main ==================== */
.nav-main{}
.nav-main li a{
	display:flex;flex-flow:row wrap;justify-content:center;align-items:center;
	padding: 1rem;
	font-size: var(--font-size,16px);line-height: 1.2;font-weight: 700;text-transform:uppercase;
	border-bottom: 1px solid var(--color-border);
	color: var(--color-text);
}
.nav-main li a span{font-size: 11px;}
.nav-main li small{
	padding: 0 0 0 0rem;font-size: 13px;line-height: 2;text-transform:lowercase;}
/* 2 */
.nav-main .sub-menu a{padding: 1rem 2rem;font-size: 0.9em;background: var(--color-base-1);}
/* 3 */
.nav-main .sub-menu .sub-menu{
	display: grid;grid-gap: 0;grid-template-columns: repeat(auto-fill,minmax(50%, 1fr));
	border-bottom: 1px solid var(--color-border);background: var(--color-base-3);
}
.nav-main .sub-menu .sub-menu a{background: none;}
.nav-main li .sub-menu .sub-menu li:nth-of-type(odd) a{border-right: 1px solid var(--color-border);}
.nav-main li .sub-menu .sub-menu li:last-child a{border-bottom: none;}

@media screen and (min-width:992px) {
	.nav-main{
		display: grid;grid-gap: 0;grid-template-columns: repeat(auto-fit, minmax(110px, 1fr) );
		width: 100%;height: 100%;
	}
	.nav-main li{position: relative;width: auto;border: none;}
	.nav-main li a{
		display:flex;flex-flow:column wrap;justify-content:center;align-items:center;
		height: 100%;padding: 0.5rem;
		border: none;
	}
	.nav-main li small{padding: 0;font-size: 0.75em;line-height: 1;opacity: 0.5;}
	/* 2 */
	.nav-main li .sub-menu{display: none;position: absolute;top:100%;left: 0;z-index: 1;width: 100%;background: var(--color-white);}
	.nav-main li:hover>.sub-menu{display: block;}
	.nav-main .sub-menu a{padding: 0.5rem;}
	/* 3 */
	.nav-main li:hover>.sub-menu li .sub-menu{display: none;top:0;left: 100%;height: auto;background: var(--color-white);}
	.nav-main li:hover>.sub-menu li:hover .sub-menu{display: block;}
	.nav-main .sub-menu .sub-menu a{padding: 0.3rem;}
}

/* .btn-menu ==================== */
#menu-toggle{display: none;}
.btn-menu{
	display: block;
	position: absolute;top:14px;right: 10px;z-index: 5;
	width: 36px;height: 20px;
	text-align: center;
	cursor: pointer;
}
.btn-menu span{position: absolute;left: 5px;width: calc( 100% - 10px );height: 3px;margin: 0;background: var(--color-base-7);transition:all 0.3s;}
.b-top{top: 0px;}
.b-mid {top: calc( 50% - 2px );}
.b-bot {bottom: 0px;}
#menu-toggle:checked ~ .btn-menu .b-top{top: 0px;transform-origin:left top;transform: rotate(45deg);width:75%;}
#menu-toggle:checked ~ .btn-menu .b-mid {opacity: 0;}
#menu-toggle:checked ~ .btn-menu .b-bot {bottom: 0px;transform-origin:left bottom;transform: rotate(-45deg);width:75%;}
/* .menu-close */
.menu-close{display: block;padding: 5px;text-align: right;font-weight: 700;}

@media screen and (min-width:992px) {
	.btn-menu{display: none;}
	.menu-close{display: none;}
}