@charset "UTF-8";

#trigger,
#trigger span {
	transition: all 0.3s;
}

#trigger {
	display: none;
	width: 24px;
	height: 17px;
	position: absolute;
	right: 40px;
	top: 40px;
}

#trigger span {
	width: 100%;
	height: 3px;
	position: absolute;
	left: 0;
	background-color: #A0A0A0;
}

#trigger span:nth-of-type(1) {
	top: 0;
}

#trigger span:nth-of-type(2) {
	top: 7px;
}

#trigger span:nth-of-type(3) {
	bottom: 0;
}

.active #trigger span:nth-child(1) {
	-webkit-transform: translateY(7px) rotate(-45deg);
	transform: translateY(7px) rotate(-45deg);
}

.active #trigger span:nth-child(2) {
	opacity: 0;
}

.active #trigger span:nth-child(3) {
	-webkit-transform: translateY(-6px) rotate(45deg);
	transform: translateY(-6px) rotate(45deg);
}

@media screen and (max-width: 700px) {
header nav {
	width: 30%;
	text-align: left;
	position: absolute;
	right: 10px;
    top: -300px;
	background: rgba(255,255,255,.9);
	transition: 0.2s ease;
}

header nav ul {
	display: block;
	border-top: solid 1px #A0A0A0;
}

header nav ul li {
	font-size: 70%;
	line-height: 3;
	padding: 0 0 0 10px;
	margin: 0;
	display: block;
	border-bottom: solid 1px #A0A0A0;
}

header nav ul li a {
	display: block;
}

.active nav {
	-webkit-transform: translateY(330px);
	transform: translateY(370px);
}

#trigger {
	display: block;
}
}