@import "https://fonts.googleapis.com/css?family=Lato";

.nav {
	position: relative;
	width: auto;
	display: inline-block;
	border: none;
	display: none;
}

@media (max-width:1200px) {
	.nav {
		display: inline-block;
	}
}

.nav .zi{
	    position: fixed;
       top: 56px;
    right: 107px;
    border: none;
    padding: 10px;
    z-index: 99999;
    color: #fff;
}


.btn-nav {
	    position: fixed;
        top: 48px;
    right: 48px;
    width: 53px;
    height: 53px;
    background: 0 0;
    border: none;
    padding: 10px;
    transition: all .5s ease;
    cursor: pointer;
    z-index: 99999;
    background-color: #b72721;
    border-radius: 50%;
}
.btn-nav:focus {
	outline: 0
}
.icon-bar {
	display: block;
    margin: 5px 3px;
    width: 26px;
    height: 2px;
    background-color: #fff;
}
.btn-nav:hover .icon-bar {
	transition: all 1s ease;
	background-color: #fff
}
.nav-content {
	position: fixed;
    top: -20%;
    bottom: 0;
	/* right: 110px; */
	right: -30px;
    margin-left: 283px;
    width: 468px;
    display: block;
    height: 0%;
    z-index: 9;
}
.nav-list {
	list-style: none;
	padding: 0;
	position: relative;
	top: 30%
}
.item-anchor:after {
	content: "";
	position: absolute;
	width: 3px;
	height: 3px;
	left: 0;
	bottom: 0;
	z-index: 9;
	background: 0 0;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease
}
.item-anchor {
	color: #fff;
	font-size: 30px;
	text-transform: uppercase;
	position: relative;
	text-decoration: none;
	padding: 10px
}
.item-anchor:hover, .item-anchor:focus {
	color: #fca311;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease
}
.item-anchor:hover:after, .item-anchor:focus:after {
	width: 100%;
	background: #fca311;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease
}
.nav-item {
	margin: 40px auto;
	text-align: center
}

.animated:hover .icon-bar, .animated:focus .icon-bar {
	background-color: #fff;
}
.animated:focus {
	cursor: pointer;
	z-index: 9999
}
.middle {
	
}
.icon-bar {
	-webkit-transition: all .7s ease;
	-moz-transition: all .7s ease;
	-ms-transition: all .7s ease;
	-o-transition: all .7s ease;
	transition: all .7s ease;
	z-index: 999999
}
.animated .icon-bar {
	z-index: 999999;
    background-color: #ffffff;
    margin: 8px 5px;
    width: 28px;
}
.animated .top {
	-webkit-transform: translateY(10px) rotateZ(45deg);
	-moz-transform: translateY(10px) rotateZ(45deg);
	-ms-transform: translateY(10px) rotateZ(45deg);
	-o-transform: translateY(10px) rotateZ(45deg);
	transform: translateY(10px) rotateZ(45deg)
}
.animated .bottom {
	-webkit-transform: translateY(-11px) rotateZ(-45deg);
	-moz-transform: translateY(-11px) rotateZ(-45deg);
	-ms-transform: translateY(-11px) rotateZ(-45deg);
	-o-transform: translateY(-11px) rotateZ(-45deg);
	transform: translateY(-11px) rotateZ(-45deg)
}
.animated .middle {
	width: 0
}


@keyframes showNav {
from {
/* top:-30%; */
top:0%;
}
to {
top:0;
}


}

@media (max-width:1200px) {
	@keyframes showNav {
		from {
		top:-30%;
		}
		to {
		top:0;
		}
		}
}


.showNav {
	-webkit-animation: showNav 1s ease forwards;
	-moz-animation: showNav 1s ease forwards;
	-o-animation: showNav 1s ease forwards;
	animation: showNav 1s ease forwards
}

@keyframes hideNav {
from {
top:0;
}
to {
/* top:-50%; */
top:0%;
}


}


@media (max-width:1200px) {
	@keyframes hideNav {
		from {
		top:0;
		}
		to {
		top:-50%;
		}
		
		
		}
}



.hideNav {
	-webkit-animation: hideNav 1s ease forwards;
	-moz-animation: hideNav 1s ease forwards;
	-o-animation: hideNav 1s ease forwards;
	animation: hideNav 1s ease forwards
}
.hidden {
	display: block;
}



@media (max-width:1200px) {
	.btn-nav {
    top: 18px;
    right: 10px;
	}
	
	.nav .zi {
    top: 21px;
    right: 58px;
    font-size: 20px;
}
	.nav-content {
    right: 0;
    margin-left: -146px;
    width: 295px;
    height: 20%;
}
	.nav-list {
    top: 46%;
}
}