@charset "UTF-8";

#zp-burger {
	pointer-events: auto;
	width: 50px;
	height: 50px;
	position: absolute;
	z-index: 999;
	right: 30px;
	top: 26px;
	cursor: pointer;
	transition: all 0.2s ease-out;
	-webkit-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	border-radius: 50%;
}

#zp-burger-before {
	pointer-events: auto;
	width: 62px;
	height: 50px;
	position: absolute;
	z-index: 999;
	right: 80px;
	padding-right: 22px;
	top: 26px;
	cursor: pointer;
	transition: all 0.2s ease-out;
	-webkit-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	color: #ffffff;
	font-size: 0.8em;
	line-height: 50px;
}


#zp-burger .zp-burger-line
{
	position: absolute;
	display: block;
	width: 30px;
	height: 3px;
	background: #fff;
	left: 10px;
	transition: all 0.2s ease-out;
	-webkit-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	border-radius: 3px;

}
#zp-burger:hover .zp-burger-line, #zp-burger.hover .zp-burger-line
{
transition: all 0.1s ease-out;
	-webkit-transition: all 0.1s ease-out;
	-o-transition: all 0.1s ease-out;
	-moz-transition: all 0.1s ease-out;
	-ms-transition: all 0.1s ease-out;
}

#zp-burger:hover, #zp-burger.hover {
	background: rgba(255,255,255,0.2);
	border-radius: 5%;
}

#zp-burger #zp-burger-line-1
{
	top: 8px;
}

#zp-burger:hover #zp-burger-line-1, #zp-burger.hover #zp-burger-line-1
{
	-webkit-transform: rotate(-8deg);
	-o-transform: rotate(-8deg);
	-moz-transform: rotate(-8deg);
	-ms-transform: rotate(-8deg);
	transform: rotate(-8deg);
	
	-moz-transform-origin: 0% 100%;
	-ms-transform-origin: 0% 100%;
	-o-transform-origin: 0% 100%;
	-webkit-transform-origin: 0% 100%;
	transform-origin: 0% 100%;
}

#zp-burger.active #zp-burger-line-1
{
	top: 18px;
	-webkit-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	
	-moz-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}

#zp-burger #zp-burger-line-2
{
	top: 18px;
}

#zp-burger #zp-burger-line-3
{
	top: 28px;
}

#zp-burger:hover #zp-burger-line-3, #zp-burger.hover #zp-burger-line-3
{
	-webkit-transform: rotate(8deg);
	-o-transform: rotate(8deg);
	-moz-transform: rotate(8deg);
	-ms-transform: rotate(8deg);
	transform: rotate(8deg);
	
	-moz-transform-origin: 0% 0%;
	-ms-transform-origin: 0% 0%;
	-o-transform-origin: 0% 0%;
	-webkit-transform-origin: 0% 0%;
	transform-origin: 0% 0%;
}

#zp-burger.active #zp-burger-line-2
{
	opacity:0;
}

#zp-burger.active #zp-burger-line-3
{
	top: 18px;
	-webkit-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	
	-moz-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}

#zp-burger.active 
{
	/* background-color: rgba(255,255,255,0.05); */
	border-radius: 50%;
	border: 1px solid #ffffff;
}



#zp-burger.active:hover, #zp-burger.hover:hover 
{
	background-color: rgba(255,255,255,0.55);
	border-radius: 50%;
}

.zp-mobile-open #zp-burger #zp-burger-line-1
{
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	top: 23px;
}

.zp-mobile-open #zp-burger #zp-burger-line-3
{
	transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	top: 23px;
}

.zp-mobile-open #zp-burger #zp-burger-line-2
{
	opacity: 0;
}

.zp-mobile-open #zp-burger
{
	top: 35px;
}


#zp-home {
	pointer-events: auto;
	width: 50px;
	height: 50px;
	position: absolute;
	z-index: 998;
	right: 30px;
	top: 36px;
	cursor: pointer;
	transition: all 0.2s ease-out;
	-webkit-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	background-color: #193076;
}

#zp-home .zp-home-line
{
	position: absolute;
	display: block;
	width: 37px;
	height: 3px;
	background: #fff;
	left: 8px;
	transition: all 0.2s ease-out;
	-webkit-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
}

#zp-home #zp-home-line-1
{
	top: 23px;
	transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
}

#zp-home #zp-home-line-2
{
	top: 23px;
	transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
}

#zp-home:hover
{
	border: 2px solid #ddd;
}

#zp-home:hover #zp-home-line-1, #zp-home:focus #zp-home-line-1
{
	transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	width: 46px;
	height: 2px;
	left: 0px;
	top:22px;
	transition: all 0.1s ease-out;
}

#zp-home:hover #zp-home-line-2, #zp-home:focus #zp-home-line-2
{
	transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	width: 46px;
	height: 2px;
	left: 0px;
	transition: all 0.1s ease-out;
}


@media screen and (max-width: 950px)
{
	#zp-burger
	{
		display: block !important;
	}
}