.header {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
}
.top-banner {
	flex-basis: 100%;
	text-align: right;
	width: 100%;
	height: 36px;
	background: @color-background;
}
.lang-switcher {
	float: left;
	height: 36px;
	&__items {
		margin-top: 0;
		margin-bottom: 0;
	}
	&__item {
		display: inline-block;
		vertical-align: bottom;
		list-style: none;
		width: 36px;
		height: 36px;
		padding-bottom: 0;
		padding-top: 4px;
		transition: all 100ms ease;
		opacity: .5;
		.link {
			color: @color-white;
			.regular(13);
			text-transform: uppercase;
			text-decoration: none;
		}
		&--active {
			opacity: 1;
		}
		&:hover {
			background-position: 0 -36px;
			opacity: 1;
			cursor: pointer;
		}
	}
}
.shares {
	&__items {
		display: inline-block;
		position: relative;
		padding: 0;
		font-size: 0;
	}
	&__item {
		display: inline-block;
		vertical-align: bottom;
		width: 36px;
		height: 36px;
		padding-bottom: 0;
		padding-top: 4px;
		list-style: none;
		background-position: top left;
		background-repeat: no-repeat;
		transition: all 100ms ease;
		opacity: .5;
		&--bandcamp {
			background-image: url('../images/bandcamp.png');
		}
		&--instagram {
			background-image: url('../images/instagram.png');
		}
		&--youtube {
			background-image: url('../images/youtube.png');
		}
		.link {
		    display: block;
		    width: 36px;
		    height: 36px;
		    margin: 0;
		    margin-top: -4px;
		}
		&:hover {
			opacity: 1;
		}
	}
	&--header {
		.shares__item {
			&:after {
				content: attr(data-content);
				position: absolute;
				.bold(11);
				color: @color-white;
				text-align: center;
				text-transform: uppercase;
				width: 100%;
				left: 50%;
				bottom: 0px;
				padding: 4px 0;
				background: @color-background;
				opacity: 0;
				transform: translateX(-50%);
				transition: all 100ms ease;
				pointer-events: none;
				z-index: 1;
			}
			&:hover {
				background-position: 0 -36px;
				cursor: pointer;
				&:after {
					bottom: -30px;
					opacity: 1;
				}
			}
		}			
	}
}
.navigation {
	display: flex;
	justify-content: space-between;
	padding: 12px 24px;
	background: @color-white;
	&__logo {
		line-height: 1;
		.link {
			color: @color-background !important;
			.title(40);
			text-decoration: none;
		}
	}
	&__links {
		margin-top: -12px;
    	margin-bottom: -12px;
    	padding-left: 0;
	}
	&__item {
		display: inline-block;
		vertical-align: middle;
		list-style: none;
		padding: 24px 16px;
		position: relative;
    	.link {
			color: @color-background;
			.bold(13);
			text-transform: uppercase;
			text-decoration: none;
			transition: all 150ms ease;
			&:hover {
				opacity: .5;
			}
		}
    	&--active {
    		> .link {
    			opacity: .5;
    		}
    	}
    	&:hover {
    		.navigation__submenu {
    			display: block;
    			opacity: 1;
    			visibility: visible;
    			a.link {
    				padding: 4px 0;
    				pointer-events: all;
    			}
    		}
    	}
	}
	&__submenu {
		background: @color-white;
    	display: none;
    	padding: 0 16px 12px 16px;
    	position: absolute;
    	left: 0px;
    	top: 100%;
    	white-space: nowrap;
    	opacity: 0;
    	visibility: hidden;
    	transition: all 350ms ease;
    	> .link {
    		padding-top: 4px;
    		padding-bottom: 4px;
    	}
    	a.link {
    		pointer-events: none;
    	}
	}
}

.burger {
	display: block;
	position: relative;
	width: 20px;
	height: 20px;
	&__line {
		display: block;
		position: absolute;
		width: 24px;
		height: 2px;
		background: @color-background;
		transition: all 150ms ease;
		&:first-child {
			top: 10px;
			opacity: 1;
		}
		&:nth-child(2),
		&:nth-child(3) {
			top: 15px;
			transform: rotateZ(0);
		}
		&:last-child {
			top: 20px;
			opacity: 1;
		}
	}
	&--active {
		.burger__line {
			&:first-child,
			&:last-child {
				opacity: 0;
			}
			&:nth-child(2) {
				transform: rotateZ(45deg);
			}
			&:nth-child(3) {
				transform: rotateZ(-45deg);
			}
		}
	}
}

@media all and (min-width: @screen-m + 1) {

	.burger {
		display: none !important;
	}

}

@media all and (max-width: @screen-m) {

	.navigation {
		&__logo {
			.link {
	   			font-size: 36px;
			}
    	}
    	&__links {
    		opacity: 0;
    		visibility: hidden;
    		display: none;
    		transition: all 350ms ease;
    		&--active {
    			opacity: 1;
    			visibility: visible;
    			display: flex;
    		}
    	}
    	&__submenu {
			position: static;
			padding: 0;
			a.link {
				font-size: 12px;
				padding-left: 12px;
				&:before {
					content: '- '; 
				}
			}
		}
		&__item {
			.link.parent {
				display: block;
				width: 100%;
				&.active + .submenu {
					display: block !important;
	    		}
			}
		}
	}

}

@media all and (max-width: @screen-s) {

	.lang-switcher {
		&__items {
			padding-left: 0;
		}
	}

	.navigation {
		flex-direction: row;
    	align-items: flex-start;
    	text-align: left;
    	height: 60px;
    	justify-items: center;
		&__logo {
			.link {
	    		font-size: 28px;
			}
    	}
		&__links {
			padding-left: 0;
			display: flex;
			position: fixed;
		    right: 0;
		    top: 108px;
		    background: #FFF;
		    flex-direction: column;
		}
		&__item {
			padding: 8px 16px;
		}
	}

}