.header {
	position: fixed;
	z-index: 9999;
	width: 100%;
	top: 0;
	left: 0;
	background: $color--gray;
	color: $color--white;
	padding: 1rem 1.5rem;
}

.header__hamburger {
	display: none;
	@media(max-width: $small-width) {
		display: inline-block;
		float: left;
		width: 3rem;
		height: 3rem;
		margin: -0.5rem 2rem -0.5rem -0.3rem;
		cursor: pointer;
		svg {
			color: $color--white;
			font-weight: 100;
			font-size: 2.6rem;
			display: inline-block;
		}
		svg.arr {
			display: none;
		}
		.menu--show & {
			svg.ham {
				display: none;
			}
			svg.arr {
				display: inline-block;
			}
		}
	}
}

.header__left {
	float: left;
	text-align: left;
	line-height: 15px;
	height: 15px;
	font-size: 1.2rem;

	&:before {
		background: url('../../../project/static/imgs/logo.png');
		background-size: contain;
		background-position: center center;
		background-repeat: no-repeat;
		content: '';
		display: inline-block;
		float: left;
		margin-right: 0.8rem;
		height: 1.5rem;
		width: 1.5rem;
	}
}

.header__countries {
	display: inline-block;
	float: right;
	font-size: 1.2rem;
	height: 1.5rem;
	position: relative;
	cursor: pointer;
	width: 5.5rem;
	margin: 0 3rem 0 0;
}

.header__countries__popup {
	position: absolute;
	top: 2.8rem;
	left: -2rem;
	display: none;
	background: lighten($color--seashell, 20%);
	box-shadow: 0 0 10px -5px rgba(#000, 0.2);
	color: $color--black;
	padding: 1rem 1.5rem;
	font-weight: 600;
	border-radius: 5px;

	&:before {
		content: "";
		display: block;
		border-top: none;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-bottom: 11px solid lighten($color--seashell, 20%);
		position: absolute;
		top: -10px;
		left: calc(50% - 10px);
		z-index: 4;
	}	
}

.header__country {
    display: block;
    float: none;
    margin: 0 0.5rem;
    width: 5.5rem;
    height: 1.5rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    box-shadow: 0 0 5px -2px rgba(0,0,0,0.3);
	opacity: 0.9;
	margin: 0.5rem;
	padding-left: 3.5rem;
	&:hover {
		opacity: 1;
	}
}

.header__country--active {
	@extend .header__country;
	margin: 0;
}

.header__userbox {
	display: inline-block;
	float: right;
	font-size: 1.2rem;
	height: 1.5rem;
	line-height: 1.5rem;
	position: relative;
	cursor: pointer;
}
.header__userbox__img {
	display: inline-block;
	width: 2rem;
	//height: 2rem;
	margin: 0 1rem 0 0;
	float: left;
	opacity: 0.5;
	transition: 0.1s all linear;
	.svg-inline--fa {
		display: inline-block;
		width: 2rem;
		height: 2rem;
		margin: -0.2rem 0.6rem 0.2rem 0;
	}
}

.header__userbox__name {
	display: inline-block;
	float: right;
	font-size: 1.2rem;
	color: rgba($color--white, 0.8);
}

.header__userbox__popup {
	position: absolute;
	top: 2.8rem;
	right: 0;
	display: none;
	background: lighten($color--seashell, 20%);
	box-shadow: 0 0 10px -5px rgba(#000, 0.2);
	color: $color--black;
	padding: 15px 20px;
	font-weight: 600;
	border-radius: 5px;

	&:before {
		content: "";
		display: block;
		border-top: none;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-bottom: 11px solid lighten($color--seashell, 20%);
		position: absolute;
		top: -10px;
		left: calc(50% - 10px);
		z-index: 4;
	}

	a {
		display: inline-block;
		width: 100%;
		clear: both;
		opacity: 0.7;
		position: relative;
		z-index: 99;
		min-width: 11rem;
		&:after {
			content: "";
			display: inline-block;
			float: right;
			width: 15px;
			height: 15px;
			background-image: url(imgs/exit.svg);
			background-size: contain;
			margin-left: 2rem;
			opacity: 0.9;
		}
		&:hover {
			opacity: 1;
			text-decoration: none;
		}
	}
}

.header__userbox.active,
.header__userbox:hover {
	.header__userbox__img { opacity: 1; }
	.header__userbox__name { text-decoration: none; color: $color--white; }
}