@charset "UTF-8";


/* NAVIGATION
----------------------------------------------------- */

#overlay{
	width:100%;
	height:200%;
	background:rgba(0,0,0,.6);
	position:fixed;
	top:0px;
	right:-100%;
	opacity:0;
	z-index: 9500 !important;
	}
#overlay.openedBg{
	opacity:1;
	right:0;
	}
#toggle {
	z-index: 9699 !important;
	position:fixed;
	top:-50px;
	right:-50px;
	width:50px;
	height:50px;
	cursor: pointer;
	
	-webkit-transition: 250ms ease all;
	-moz-transition: 250ms ease all;
	transition: 250ms ease all;
	}
.scrollDown #toggle {

	top:0px;
	right:0px;
}
	#toggle.open{
		top:0px;
		right:0px;
	}

#toggleBg{
	position:absolute;
	top: -180px;
	right:-190px;
	z-index: 9700 !important;
	background:url(../images/menu_bg.png) left bottom no-repeat;
	background-size: auto 170px;
	width:170px;
	height:170px;
	-webkit-transition: 250ms ease all;
	-moz-transition: 250ms ease all;
	transition: 250ms ease all;
  	animation: rotate 5s linear infinite;
}
#toggle.open #toggleBg{
	width:170px;
	height:170px;
	top: -130px;
	right:-135px;
	border-radius: 0px;
	border:0px solid #fff;
	background-size: auto 100%;

  	animation: rotate 5s linear infinite;
}
.scrollDown #toggle.open #toggleBg{
	top:-80px;
	right:-80px;
}
.scrollDown #toggle #toggleBg{
	top:-80px;
	right:-80px;
}
#toggle #xlink{
	width:18px;
	height:18px;
	position:absolute;
	display:block;
	top:9px;
	right:39px;
	background: url(../images/x_logo.svg) center center no-repeat;
	background-size:100% auto;
	z-index: 9701 !important;
}
#toggle.open #xlink{
	display:none;
}
#toggle span {
	display: block;
	position: absolute;
	top:15px !important;
	left:20px !important;
	width:22px !important;
	height: 2px;
	background:#fff ;
	-webkit-transition: 250ms ease all;
	-moz-transition: 250ms ease all;
	transition: 250ms ease all;
	z-index: 9701 !important;
	}
	.scrollDown #toggle span{
	left:0px;
	top:0px;
	}
#toggle p{
	position:absolute;
	top:22px !important;
	left:18px !important;
	font-size:10px;
	letter-spacing: 0;
	color:#fff ;
	font-family:'Times New Roman', Times, serif;
	z-index: 9701 !important;
	text-align:center;
	letter-spacing:1px;
}
.scrollDown #toggle p{
}
#toggle.open p{ display:none; }

#toggle span:before,
#toggle span:after {
	content: " ";
	position: absolute;
	width: 100%;
	left:0;
	height: 2px;
	background: #fff ;
	-webkit-transition: 200ms ease all;
	-moz-transition: 200ms ease all;
	transition: 200ms ease all;
	}
	
	#toggle span:before { margin: -6px 0 0 0; width:100%; }
	#toggle span:after { margin: 6px 0 0 0; width:100%; }

#toggle.open{ 
	border:none;
	}
#toggle.open span {
	background-color: transparent;
	top:16px !important;
	right:5px !important;
	background: none;
	}
	
#toggle.open span:before,
#toggle.open span:after {
	margin: 2px 0 0 0 ;
	background: #fff;
	height: 2px;
	}
#toggle.open span:before {
	width:100%;
	-webkit-transform: rotate(135deg);
	-moz-transform: rotate(135deg);
	transform: rotate(135deg);
	}
#toggle.open span:after {
	width:100%;
	-webkit-transform: rotate(-135deg);
	-moz-transform: rotate(-135deg);
	transform: rotate(-135deg);
	}
	
#globalnav {

	z-index: 9701 !important;
	position: fixed;
	width: 100%;
	max-width:400px;
	height: 110%;
	top: 40px;
	right: -401px;
    opacity:1;
    -webkit-transition: all 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
	-moz-transition: all 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
	transition:         all 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
	opacity:0;
    visibility:visible;
	overflow:hidden;
	}
	
#globalnav.opened {
	
	width:100%;
	max-width:400px;
	height:110%;
	top: 40px;
	right: 0;
    opacity:1;
    -webkit-transition: all 600ms cubic-bezier(0.165, 0.84, 0.44, 1);
	-moz-transition: all 600ms cubic-bezier(0.165, 0.84, 0.44, 1);
	transition:         all 600ms cubic-bezier(0.165, 0.84, 0.44, 1);
	
	}
	
#globalnav nav > ul#menu{
	position:relative;
	text-align:center;
	width:100%;
    margin:0px auto 0 auto;
	opacity:0;
	display:block;
	}
	#globalnav.opened  nav > ul#menu{
		opacity:1;
	}
#globalnav nav ul#menu li{
	position:relative;
	background:none;
    width:100%;
	height:auto;
	-webkit-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
 	transition:         all 200ms linear;
}

#globalnav nav ul#menu li a{
	color:#fff;
	letter-spacing:1px;
	font-size:16px !important;
	line-height:0;
	width:200px;
	margin:20px auto;
	cursor:pointer;
	display:block;
	position:relative;
	opacity:1;
	padding:24px 0 28px 0;
	background:#53844c;
	border-radius: 10px;
	-webkit-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
 	transition:         all 200ms linear;
	}
	#globalnav nav ul#menu li a:hover,
	#globalnav nav ul#menu li a:active{
	color:fff !important;
	}
#globalnav nav ul#menu li a.xl{
	padding:5px 0 10px 0 !important;
	}

/* ANIMAtTION
----------------------------------------------------- */

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}