/*----------------------------------------------------------------- */
/* HEADER
/*----------------------------------------------------------------- */

header
{
	position: relative;
}

.home header
{
	height: 400px;
}

header:before
{
	position: absolute;
	z-index: 7;
	top: 0;
	left: 0;

	display: block;

	width: 100%;
	height: 100%;

	content: '';

	background: transparent linear-gradient(180deg, #00357f 0%, #006bff1f 100%) 0 0 no-repeat padding-box;
}

.blog header:before,
.single-post header:before,
.category header:before
{
	background: transparent linear-gradient(180deg, #00357f 0%, #e45f0080 100%) 0 0 no-repeat padding-box;
}

header > .row
{
	flex-wrap: nowrap;

	margin-bottom: calc(2 * var(--padding__default));
}

.header__title
{
	padding-left: var(--padding__default);

	border-left: 2px solid var(--color__white);
}

.home .header__title
{
	position: absolute;
	top: 60%;
	left: 0;

	-webkit-transform: translateY(-60%);
	        transform: translateY(-60%);

	border: none;
}

.home .header__title h2
{
	font-size: 3.4rem;
	line-height: 3.8rem;

	color: var(--color__yellow);
}

.home .header__title a
{
	color: var(--color__yellow);
	border-color: var(--color__yellow);
}

.home .header__title a:hover
{
	color: var(--color__blue);
	background: var(--color__yellow);
}

header .container
{
	z-index: 10;

	height: auto;
}

header .container.row
{
	padding-right: 0;
}

header .header__title.container
{
	z-index: 9;
}

.header__stake
{
	position: absolute;
	z-index: 9;
	bottom: -20px;
	left: 0;

	display: block;

	width: 1px;
	height: 40px;

	background: var(--color__blue);
	background: linear-gradient(to top, var(--color__blue) 0%, var(--color__blue) 50%, var(--color__white) 50%, var(--color__white) 100%);
}

.header__stake:nth-of-type(1)
{
	left: var(--width__1-7);
}

.header__stake:nth-of-type(2)
{
	left: var(--width__2-7);
}

.header__stake:nth-of-type(3)
{
	left: var(--width__3-7);
}

.header__stake:nth-of-type(4)
{
	left: var(--width__4-7);
}

.header__stake:nth-of-type(5)
{
	left: var(--width__5-7);
}

@media(max-width: 960px)
{
	.home .header__title
	{
		top: 70%;

		-webkit-transform: translateY(-70%);
		        transform: translateY(-70%);
	}

	.home .header__title h2
	{
		font-size: 2.7rem;
		line-height: 3.1rem;
	}
}

@media(max-width: 760px)
{
	.home header
	{
		height: 300px;
	}

	.header__title
	{
		border-left: none;
	}

	.home .header__title h2
	{
		font-size: 2rem;
		line-height: 2.4rem;
	}
}

/* LOGO
----------------------------------------- */
.logo
{
	margin-right: 30px;
	padding: var(--padding__default) 0 0 var(--padding__default);
}

.logo h1
{
	font-family: var(--font-family__noto-sans);
	font-size: 0;
	font-weight: var(--font-weight__normal);
	line-height: 0;

	margin: 0;
}

.logo a
{
	font-family: var(--font-family__noto-sans);

	display: block;

	width: 265px;

	color: var(--color__white);
}

.header__site-title
{
	font-size: 3rem;
	font-weight: var(--font-weight__normal);
	line-height: 3.2rem;

	display: block;

	margin: 0 0 7px 0;
}

.header__site-subtitle
{
	font-size: 1.7rem;
	line-height: normal;

	display: block;

	text-transform: uppercase;
}

@media(max-width: 760px)
{
	.logo
	{
		margin-right: 0;
	}

	.logo a
	{
		width: 215px;
	}

	.header__site-title
	{
		font-size: 1.8rem;
		line-height: 2rem;
	}

	.header__site-subtitle
	{
		font-size: 1rem;
	}
}

/* TITLE
----------------------------------------- */
.header__title h1
{
	margin: 0;
	padding-bottom: 12px;
}

/* IMAGE
----------------------------------------- */
.header__image
{
	position: absolute;
	z-index: 5;
	top: 0;
	left: 0;

	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center top;
}

/* NAVIGATION
----------------------------------------- */
.nav-wrapper
{
	padding-top: var(--padding__default);
	padding-right: var(--padding__default);
	padding-bottom: 25px;

	border-right: 2px solid var(--color__white);
}

.nav-wrapper > .nav_main
{
	margin-bottom: 15px;
}

.main-menu
{
	justify-content: flex-end;
}

.main-menu,
.sub-menu
{
	margin: 0;
}

.main-menu > li
{
	position: relative;
}

.main-menu a
{
	font-family: var(--font-family__noto-sans);
	font-size: 1.4rem;

	display: block;

	margin: 0 10px 10px 10px;

	text-transform: uppercase;

	color: var(--color__white);
}

.main-menu > li:first-child > a
{
	margin-left: 0;
}
/*
.main-menu > li:last-child > a
{
	margin-right: 0;
}
*/
.main-menu > li:hover > a,
.main-menu a:hover,
.main-menu .active-item > a,
.main-menu .active-item_archive-ancestor > a
{
	color: var(--color__yellow);
}

.main-menu .active-item > a
{
	cursor: default;
	pointer-events: none;
}

.main-menu .sub-menu
{
	position: absolute;
	z-index: 999;
	top: 0;
	left: 100%;

	visibility: hidden;

	padding: 5px 0;

	transition: 0.3s linear;
	white-space: nowrap;

	opacity: 0;
	background-color: var(--color__white);
}

.main-menu > li > .sub-menu
{
	top: 28px;
	left: -5px;
}

.main-menu li:hover > .sub-menu
{
	visibility: visible;

	opacity: 1;
}

.main-menu .sub-menu li
{
	position: relative;
}

.main-menu .sub-menu a
{
	display: block;

	margin: 0;
	padding: 5px 15px;

	color: var(--color__blue-dark);
}

.main-menu .sub-menu > li:hover > a
{
	color: var(--color__red);
}

@media (max-width: 760px)
{
	.nav-wrapper
	{
		padding-right: 0;
		padding-bottom: 61px;
	}

	.nav-wrapper > .nav_main
	{
		display: none;
	}

	.tools
	{
		display: none;
	}
}

/* FIXED SIDEBAR
----------------------------------------- */
.fixed-wrapper
{
	position: absolute;
	z-index: 1000;
	top: 0;
	right: 0;

	width: var(--width__1-7);
}

.nav-btn
{
	position: fixed;

	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: flex-start;

	width: inherit;
	height: 100%;
	padding: 20px 10px;

	text-align: center;

	color: var(--color__white);
	background: transparent;
}

.nav-btn:hover
{
	color: var(--color__white);
	background: var(--color__blue-dark);
}

.nav-btn img
{
	display: inline-block;

	width: 100%;
	max-width: 95px;
	height: auto;
	margin-bottom: 70px;
}

.nav-btn .icon-menu
{
	display: none;

	width: 16px;
	height: 17px;
	margin-bottom: 20px;
}

.nav-btn .icon-magnifier
{
	display: none;

	width: 17px;
	height: 17px;
}

@media (max-width: 760px)
{
	.nav-btn
	{
		padding-top: 10px;
	}

	.nav-btn .icon-menu,
	.nav-btn .icon-magnifier
	{
		display: inline-block;
	}
}

@media (max-width: 440px)
{
	.nav-btn
	{
		padding: 10px 4px;
	}
}

/* TOOLS
----------------------------------------- */
.tools
{
	margin-right: 10px;
}

.tools .row
{
	flex-direction: row-reverse;
}

.tools .search-button:hover
{
	text-decoration: none;
}

.tools .search-button svg
{
	position: absolute;
	top: 50%;
	right: calc(100% + 5px);

	display: block;

	width: 10px;
	height: 11px;

	transform: translateY(-50%);
}

.tools .search-button svg path
{
	transition: var(--transition-delay__default);

	fill: var(--color__white);
}

.tools .search-button:hover svg path
{
	fill: var(--color__blue);
}

/* LANGUAGES */
.languages
{
	font-size: 2rem;
	line-height: 20px;

	position: relative;

	margin: 0 0 0 20px;

	text-align: center;

	color: var(--color__white);
}

.lang-btn
{
	font-size: 2rem;
	line-height: 20px;

	width: inherit;
	height: inherit;

	text-transform: uppercase;

	color: var(--color__white);
}

.lang-btn:hover,
.lang-btn.active
{
	text-decoration: none;

	color: var(--color__blue);
}

.lang-box
{
	position: absolute;
	z-index: 999;
	top: 50px;
	left: -5px;

	display: none;

	background: var(--color__black);
}

.lang-box ul
{
	margin: 0;
}

.lang-box .lang-item-active
{
	display: none;
}

.lang-box a
{
	line-height: normal;

	display: block;

	padding: 0 5px;

	text-transform: uppercase;

	color: var(--color__white);
}

.lang-box a:hover
{
	color: var(--color__blue);
}

@media (max-width: 960px)
{
	.languages
	{
		position: static;
		position: relative;

		padding: 0;
	}

	.lang-btn
	{
		background: none;
	}

	.lang-box
	{
		top: 35px;

		background: var(--color__black);
	}
}
