@import 'https://fonts.googleapis.com/css?family=Roboto';

@font-face {
	font-family: 'century-gothic';
	src: url('../fonts/century-gothic.eot');
	src: url('../fonts/century-gothic.eot?#iefix') format('embedded-opentype'),url('../fonts/century-gothic.woff2') format('woff2'),url('../fonts/century-gothic.woff') format('woff'),url('../fonts/century-gothic.ttf') format('truetype');
}

@font-face {
	font-family: 'Verdana';
	src: url('../fonts/Verdana.eot');
	src: url('../fonts/Verdana.eot?#iefix') format('embedded-opentype'),url('../fonts/Verdana.woff2') format('woff2'),url('../fonts/Verdana.woff') format('woff'),url('../fonts/Verdana.ttf') format('truetype');
}

@font-face {
	font-family: 'Oranienbaum';
	src: url('../fonts/Oranienbaum.eot');
	src: url('../fonts/Oranienbaum.eot?#iefix') format('embedded-opentype'),url('../fonts/Oranienbaum.woff2') format('woff2'),url('../fonts/Oranienbaum.woff') format('woff'),url('../fonts/Oranienbaum.ttf') format('truetype');
}

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

#header{
	height: 30px;
	/*background: #282828;*/
	color: #fff;
	font-family: 'Roboto';
	text-align: center;
}

#btn-menu{
	display: none;
}

#header label{
	font-size: 20px;
	cursor: pointer;
	display: none;
	position: relative;
	top: 5px;
	float: left;
}

.menu ul{
	background: #fff;
	display: flex;
	list-style: none;
}

.menu ul ul {
	display: none;
}

.menu a{
	display: block;
	padding: 10px 20px;
	color: #2e5eb9;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 12pt;
	font-weight: 600;
}

.menu a:hover{
	background: rgba(53, 122, 228, 0.8);
	color: #fff;
}

.menu a span{
	margin-left: 10px;
}

.menu ul li:hover ul{
	display: block;
	position: absolute;
}


@media (max-width: 1024px){
	#header{
		display: flex;
		justify-content: flex-end;
	}
	
	#header label{
		display: block;
	}
	
	.menu{
		position: absolute;
		top: 30px;
		left: 0;
		width: 100%;
		transform: translateX(-150%);
		transition: all 0.3s;
		
	}
	
	.menu ul{
		display: block;
		background: #2f2f2f;
	}
	
	.menu ul li:hover ul{
		display: none;
		position: static;
	}
	
	.menu a{
		color: #fff;
		font-size: 10pt;
	}
	
	.menu a span{
		position: absolute;
		right: 5px;
	}
	
	#btn-menu:checked ~ .menu{
		transform: translateX(0%);
	}
	
	.menu a{
		font-size: 14px;
	}
	
}