<style type="text/css">

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

}

body {

	position:relative;
	left:0;
	-webkit-transition:left .2s ease-in-out;
	transition:left .2s ease-in-out;
	overflow-x:hidden;
	font-family:"Open Sans",sans-serif;
	font-size:14px;line-height:1.6

}

.body--fly {

	left:25%

}

.site-menu {

	position:fixed;
	top:0;
	left:-25%;
	width:25%;
	height:100%;
	background:#FFF;
	padding-top:25px;
	z-index: 100;
	-webkit-transition:left .2s ease-in-out;
	transition:left .2s ease-in-out

}

@media screen and (min-width: 800px) {
	.site-menu {
		display: none;
	}
}

@media (max-width: 30em) {

	.site-menu {

		left:-45%;
		width:45%

	}

}

@media (min-width: 30em) and (max-width: 43em) {

	.site-menu {

		left:-40%;
		width:40%

	}

}

.site-menu--fly {

	left:0

}

.site-menu__trigger {

	position:absolute;
	top:-5px;
	right:-80px;
	width:30px;
	height:30px;
	margin:30px;
	/*border-top:2px solid #555;
	border-bottom:2px solid #555;*/
	cursor:pointer;
	background: transparent url(images/icon-menu.svg) no-repeat 0 0;
	background-size: 60px 30px;
	-webkit-transition:.3s;
	transition:.3s

}

@media screen and (min-width: 800px) {
	.site-menu__trigger {
		display: none;
	}
}

.site-menu__trigger:after {

	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	content:"";
	width:80%;
	height:2px;
	background: transparent url(images/icon-menu.svg) no-repeat 0 0;
	background-size: 60px 30px;

}

.site-menu__list {

	list-style:none;
	padding:5px 25px

}

.site-menu__link {

	color:#FFF;
	text-decoration:none;
	font-size:1.5em;
	font-weight:100;
	color:#777;
	-webkit-transition:color .3s;
	transition:color .3s

}

.site-menu__link:hover {

	color:#000

}

</style>
