.fr {
	float: right
}

.fl {
	float: left
}


.other {
	margin: 20px 20px 0 0;
	background: #ccc;
	position: absolute;
	z-index: 999;
	right:50px;
	top: 40px;
}

.other i {
	transition: .4s;
	-ms-transition: .4s;
	-o-transition: .4s;
	-webkit-transition: .4s;
	-moz-transition: .4s
}

.other.change .menu {
	background: rgba(0, 0, 0, .2)
}

.other.change .menu i:nth-child(1) {
	transform: rotate(-135deg);
	-ms-transform: rotate(-135deg);
	-o-transform: rotate(-135deg);
	-webkit-transform: rotate(-135deg);
	-moz-transform: rotate(-135deg);
	top: 25px
}

.other.change .menu i:nth-child(2) {
	opacity: 0;
	right: 30px
}

.other.change .menu i:nth-child(3) {
	top: 25px;
	width: 28px;
	transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	-o-transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	-moz-transform: rotate(135deg)
}


.other.set_color .menu i {
	background: #fff
}


.menu {
	width: 55px;
	height: 50px;
	background: rgba(255, 255, 255, .25);
	transition: .4s;
	-ms-transition: .4s;
	-o-transition: .4s;
	-webkit-transition: .4s;
	-moz-transition: .4s;
	position: relative;
	cursor: pointer;
}

.menu i {
	background: #fff;
	height: 2px;
	display: inline-block;
	position: absolute;
	transition: cubic-bezier(.43, .13, .08, 1.01) .6s;
	-ms-transition: cubic-bezier(.43, .13, .08, 1.01) .6s;
	-o-transition: cubic-bezier(.43, .13, .08, 1.01) .6s;
	-webkit-transition: cubic-bezier(.43, .13, .08, 1.01) .6s;
	-moz-transition: cubic-bezier(.43, .13, .08, 1.01) .6s
}

.menu i:nth-child(1) {
	width: 28px;
	right: 15px;
	top: 17px
}

.menu i:nth-child(2) {
	width: 28px;
	right: 15px;
	top: 24px
}

.menu i:nth-child(3) {
	width: 19px;
	right: 15px;
	top: 31px
}


nav {
	font-size: 0;
	position: absolute;
	z-index:99;
	right: 0;
	top: 0;
	/*width: 33%;*/
	width: 400px;
	height: 100vh;
	/*z-index: -1;*/
	transition: cubic-bezier(.6, -.02, 0, .99) .6s;
	-ms-transition: cubic-bezier(.6, -.02, 0, .99) .6s;
	-o-transition: cubic-bezier(.6, -.02, 0, .99) .6s;
	-webkit-transition: cubic-bezier(.6, -.02, 0, .99) .6s;
	-moz-transition: cubic-bezier(.6, -.02, 0, .99) .6s;
	visibility: hidden;
	transform: translateX(100%);
	-ms-transform: translateX(100%);
	-o-transform: translateX(100%);
	-webkit-transform: translateX(100%);
	-moz-transform: translateX(100%);
}

nav.open {
	visibility: visible;
	transform: translateX(0);
	-ms-transform: translateX(0);
	-o-transform: translateX(0);
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0)
}


.nav-item {
	width: 100%;
	padding-top: 19.5vh;
	height: 100%;
	background: #fff;
	position: relative;
	box-shadow: -3px 0 27px 7px #e5e5e5
}

.nav-list {
	display: block!important;
	padding: 22px 0 22px 40px;
	border-bottom: 1px solid #f1f1f1;
	position: relative
}

.nav-list:first-child {
	border-top: 1px solid #f1f1f1
}

.nav-list:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #3e51b0;
	z-index: 0;
	transition: ease .65s;
	-ms-transition: ease .65s;
	-o-transition: ease .65s;
	-webkit-transition: ease .65s;
	-moz-transition: ease .65s;
	transform: translateX(100%);
	-ms-transform: translateX(100%);
	-o-transform: translateX(100%);
	-webkit-transform: translateX(100%);
	-moz-transform: translateX(100%)
}

.nav-list.this:before {
	transform: none;
	-ms-transform: none;
	-o-transform: none;
	-webkit-transform: none;
	-moz-transform: none
}

.nav-list.this a {
	transform: translateX(20px);
	-ms-transform: translateX(20px);
	-o-transform: translateX(20px);
	-webkit-transform: translateX(20px);
	-moz-transform: translateX(20px);
	color: #fff;
	transition: .3s .15s;
	-ms-transition: .3s .15s;
	-o-transition: .3s .15s;
	-webkit-transition: .3s .15s;
	-moz-transition: .3s .15s
}


.nav-list:hover a {
	transform: translateX(20px);
	-ms-transform: translateX(20px);
	-o-transform: translateX(20px);
	-webkit-transform: translateX(20px);
	-moz-transform: translateX(20px)
}

.nav-list a {
	display: inline-block;
	font-size: 18px;
	color: #555;
	position: relative;
	z-index: 1;
	transition: ease .6s;
	-ms-transition: ease .6s;
	-o-transition: ease .6s;
	-webkit-transition: ease .6s;
	-moz-transition: ease .6s
}