* {
	margin:0;
	padding:0;
	box-sizing:border-box;
}
header {
	width:100vw;
	height:100vh;
	background:url('6.jpg') center center;
	background-size:cover;
}
nav {
	position:absolute;
	top:0;
	left:0;
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:0 5vw;
	width:100vw;
	height:80px;
	background-color:rgba(65,81,101,0.9);
	color:white;
}
.logo {
	font-size:24px;
	font-weight:600;
	flex:1;
	min-width:100px
}
.nav-menu {
	flex:1;
	display:flex;
	justify-content:space-between;
	max-width:350px;
}
.nav-menu li {
	list-style:none;
	color:#dadbdd;
	font-weight:600;
}
.burger div {
	width:25px;
	height:3px;
	background-color:#dadbdd;
	margin:4px;
}
.burger {
	display:none;
}
@media screen and (max-width:760px) {
	.nav-menu {
	position:absolute;
	top:80px;
	right:0;
	width:45vw;
	height:calc(100vh - 80px);
	background-color:rgba(65,81,101,0.9);
	flex-direction:column;
	align-items:center;
	justify-content:flex-start;
	transform:translateX(100%);
}
.nav-menu li {
	margin:3vh;
	opacity:0.3;
	position:relative;
	transform:translateX(20vw);
}
.burger {
	display:block;
}
.active div {
	transition:0.3s  ease-in-out 0.3s;
}
.active .top-line {
	transform:rotate(45deg) translate(4px,6px);
}
.active .bottom-line {
	transform:rotate(-45deg) translate(4px,-6px);
}
.active .middle-line {
	opacity:0;
	transform:translateX(10px);
	transition:0.3s ease-in-out;
}
.nav-menu.open {
	transform:translateX(0);
}
@keyframes slideIn {
	from {
	transform:translateX(20px);
	opacity:0;
}
to {
	transform:translateX(0);
	opacity:1;
}
}}