:root {
	--color-bg-main: #F7EAE4;
	/*--color-title-main: #4B0F0F;*/
	--color-text-main: #171717;

	--color-bg-alt: #4B0F0F;
	--color-title-alt: #FFFFFF;
	--color-text-alt: #FFFFFF;

	--color-bg-responsive1: #4B0F0F;
	--color-bg-responsive2: #691111;
	
	--width-logo: 40px;
	--height-logo-screen: 75px;
	--height-logo-screen: 100px;
	--height-logo-tablet: 60px;
	--height-logo-tablet: 80px;
	--height-logo-mobile: 40px;
	--height-logo-mobile: 60px;

	--transition-none: 0s;
	--transition-fast: 0.25s;
	--transition-regular: 0.5s;
	--transition-slow: 1s;
}

/*============================================================================================*/
/*                                           HEADER                                           */
/*============================================================================================*/
#header{
	padding:3px 0 0 0;
	width:100%;

	position:fixed;

    background-color:var(--color-bg-main);
	color:var(--color-text-main);

	text-align:center;
    font-family:monospace, system-ui, sans-serif;
    font-family:'Timeless';
    font-weight:normal;
	font-size:0.875rem;

	z-index:9;

	transition:var(--transition-regular) all;

	box-shadow:0px 0px 2px var(--color-bg-alt);

	/*border-bottom:1px solid var(--color-bg-alt);*/

}
	#header a,
	#header a:visited{
		display:inline-block;
		float:left;
		height:100%;
		color:var(--color-text-main);
	}
	#header a:hover,
	#header a:visited:hover{
		color:var(--color-primary-hover);
	}

	#header #logo{
		display:inline-block;
		float:left;

		margin:0px 10px 6px 10px;

		background-size:100% 100%;
		background-repeat:no-repeat;
		background-position:center center;;
	}
		#header #logo .logo_image{
			object-fit:contain;
			float:left;
			margin-right:20px;
			transition:var(--transition-regular);
		}
			#header #logo .logo_image img{
				object-fit:contain;
				transition:var(--transition-regular);
			}
		#header #logo .logo_text{
			float:left;
			position:relative;
		}
			#header #logo .logo_text .logo_name{
				font-family: 'Empire';
			}
				#header #logo .logo_text .logo_name .logo_name_jn{
					font-weight:900;
					color:var(--color-title-main);
					transition:var(--transition-regular);
				}
				#header #logo .logo_text .logo_name .logo_name_title{
					font-weight:900;
					color:var(--color-text-main);
					transition:var(--transition-regular);

					
					display: inline-block;
					vertical-align: bottom;
				}
			#header #logo .logo_text .logo_subtitle{
				position:absolute;
				transition:var(--transition-regular);
			}
	#header #navigation{
		display:inline-block;
		float:right;
		text-align: right;
		padding-right:10px;
	}
		#header #navigation .links{
			width: fit-content;
			height: auto;
			transition:var(--transition-regular);
		}
		#header #navigation .links .link{
			text-align:center;
			position:relative;
		}


@media screen and (max-width:800px){
	#header #logo .logo_image{
		height:var(--height-logo-mobile);
	}
	#header #logo .logo_image img{
		height:var(--height-logo-mobile);
	}

	#header #logo .logo_text{
		margin-top:15px;
	}
	#header #logo .logo_text .logo_name .logo_name_jn{
		font-size:1.666rem;
	}
	#header #logo .logo_text .logo_name .logo_name_title{
		font-size:1.0rem;
		height:1.66rem;
	}
	#header #logo .logo_text .logo_subtitle{
		display:inline-block;
		opacity: 0;
		font-size:0.58rem;
		left: 0;
		top: 40px;
	}

	#header #navigation{
		max-width:calc(100% - 250px);
	}
	#header #navigation .links{
		display:none;
		line-height:var(--height-logo-mobile);
		font-size:0.75rem;
	}
	#header #navigation .links .link{
		padding:0px 10px;
	}
}
@media screen and (min-width:800px){
	#header #logo .logo_image{
		height:var(--height-logo-tablet);
	}
	#header #logo .logo_image img{
		height:var(--height-logo-tablet);
	}

	#header #logo .logo_text{
		margin-top:10px;
	}
	#header #logo .logo_text .logo_name .logo_name_jn{
		font-size:2.0rem;
	}
	#header #logo .logo_text .logo_name .logo_name_title{
		font-size:1.2rem;
		height:2.0rem;
	}
	#header #logo .logo_text .logo_subtitle{
		display:inline-block;
		opacity: 1;
		font-size:0.75rem;
		left: 0;
		top: 40px;
	}

	#header #navigation{
		max-width:calc(100% - 300px);
	}
	#header #navigation .links{
		display:inline-block;
		line-height:var(--height-logo-tablet);
		font-size:0.8125rem;
	}
	#header #navigation .links .link{
		padding:0px 11px;
	}
}
@media screen and (min-width:1024px){
	#header #logo .logo_image{
		height:var(--height-logo-screen);
	}
	#header #logo .logo_image img{
		height:var(--height-logo-screen);
	}

	#header #logo .logo_text{
		margin-top:16px;
	}
	#header #logo .logo_text .logo_name .logo_name_jn{
		font-size:2.5rem;
	}
	#header #logo .logo_text .logo_name .logo_name_title{
		font-size:1.5rem;
		height:2.5rem;
	}
	#header #logo .logo_text .logo_subtitle{
		display:inline-block;
		opacity: 1;
		font-size:0.875rem;
		left: 0;
		top: 45px;
	}

	#header #navigation{
		max-width:calc(100% - 385px);
	}
	#header #navigation .links{
		display:inline-block;
		line-height:var(--height-logo-screen);
		font-size:0.875rem;
	}
	#header #navigation .links .link{
		padding:0px 15px;
	}
}

/******************************************************************************
 * SEPARATOR
 ******************************************************************************/
.header_separator{
	position:absolute;
	top:52%;
	width:calc(100% - 30px);
}
	.header_separator span{
		width:calc(50% - 1px);
	}
	.header_separator i{
		width: 4px;
		height: 4px;
	}

.link.active{
	color:var(--color-active-page) !important;
}
.link:not(.active) .header_separator{
	display:none;
}