@charset "UTF-8";
/**
* BOOTSTRAP EXTENDED CUSTOMIZED MENU - CSS INITIALIZE
* BY: Zul Zolkaffly (02/11/2016)
*/

/**
* MENU
*/
.menu {
	position: fixed;
	left: 0;
	top: 0;
	opacity: 1;
	-webkit-transform: translateX(0);
	transform: translateX(0);
	-webkit-transition: width .5s ease;
	transition:  width .5s ease;
	font-size: 16px;
	z-index: 10001;
	width: 0;
}
.menu ul { list-style: none; margin: 0; padding: 0; }

/**
* NAVIGATION
*/
.menu .menu-nav {
	background-color: #EEE;
	height: 100vh;
	width: 25%;
	overflow: auto;
	float: left;
	transition:  margin .5s ease;
}
.menu .menu-nav .menu-nav-logo {
	display: block;
	width: 100%;
	padding: 1% 5%;
}
.menu .menu-nav .menu-nav-list {
	margin-top: 15px;
	display: block;
	list-style: none;
	padding: 1%;
	overflow: auto;
}
.menu .menu-nav .menu-nav-list * { transition: none !important; }
.menu .menu-nav .menu-nav-list li {
	width: 100%;
	border-bottom: 1px solid #FFF;
}
.menu .menu-nav .menu-nav-list li:last-child { border: none; }
.menu .menu-nav .menu-nav-list li a {
	display: block;
	width: 100%;
	color: #333;
	margin: 0;
	padding: 2%;
	text-decoration: none;
	font-size: 16px;
}
.menu .menu-nav .menu-nav-list li.menu-dropdown ul.menu-dropdown-menu { display:none; }
.menu .menu-nav .menu-nav-list li.menu-dropdown ul.menu-dropdown-menu li a { padding-left: 20px; }

.menu .menu-nav .menu-nav-list li a {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.menu .menu-nav .menu-nav-list li a:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.05);
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.menu .menu-nav .menu-nav-list li a:hover, .menu .menu-nav .menu-nav-list li a:focus, .menu .menu-nav .menu-nav-list li a:active {
  color: #333;
}
.menu .menu-nav .menu-nav-list li a:hover:before, .menu .menu-nav .menu-nav-list li a:focus:before, .menu .menu-nav .menu-nav-list li a:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

/**
* OVERLAY
*/
.menu .menu-overlay {
	padding: 0;
	background-color: rgba(255,255,255,0.5);
	box-shadow: -3px 0 3px -1px #AAA;
	height: 100vh;
	width: 75%;
	float: left;
	transition:  margin .5s ease, background .5s ease;
}
.menu .menu-overlay .menu-header { width: 65px; }
.menu .menu-overlay .menu-header ul { background-color: #c02026; }
.menu .menu-overlay .menu-header ul>li {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid #FFF;
	line-height: 0;
	height: 65px;
	max-height: 65px;
	background-color: #c02026;
	transition: 500ms all ease-in-out;
}
.menu .menu-overlay .menu-header.horizontal { width: 100vw; height: 65px; position: relative; }
.menu .menu-overlay .menu-header.horizontal ul>li {
	float: left;
	border-bottom: none;
	border-right: 1px solid #FFF;
}
.menu .menu-overlay .menu-header ul>li:last-child { border: none; }
.menu .menu-overlay .menu-header ul>li a {
	margin: 0;
	padding: 10px;
	color: #fff;
	display: block;
	clear: both;
	text-align: center;
	text-decoration: none;
	line-height: 80px;
	width: 65px;
	height: 65px;
	background-color: #C02026;
	-webkit-transition-duration: .5s;
	transition-duration: .5s;
	-webkit-transition-timing-function: ease;
	transition-timing-function: ease;
	-webkit-transition-property: all;
	transition-property: all;
}
.menu .menu-overlay .menu-header ul>li a:hover { background-color: rgba(0,0,0,0.35); }
.menu .menu-overlay .menu-header ul>li a img { width: 100%; height: 100%; display: block; }
.menu .menu-overlay .menu-header .icon-bar {
	background-color: #FFF;
	display: block;
	width: 70%;
	height: 3px;
	margin: 5px auto;
	border-radius: 1px;
}
.menu .menu-overlay .menu-header .menu-toggle-btn {
	padding: 20px 10px;
}
.menu .menu-overlay .menu-header .menu-toggle-search {
	padding: 0;
	width: 65px;
}
.menu .menu-overlay .menu-header .menu-search-form {
	display: block;
	position: absolute;
	height: 65px;
	width: 100vw;
	background-color: rgba(0,0,0,0.5);
	margin-top: -65px;
	margin-left: 65px;
	padding: 0 10px;
	left: -300vw;
	overflow: hidden;
	-webkit-transition-duration: .5s;
	transition-duration: .5s;
	-webkit-transition-timing-function: ease;
	transition-timing-function: ease;
	-webkit-transition-property: all;
	transition-property: all;
	z-index: 10;
}
.menu .menu-overlay .menu-header .menu-search-form input[type="text"],
.menu .menu-overlay .menu-header .menu-search-form button[type="submit"],
.menu .menu-overlay .menu-header .menu-search-form a {
	float: left;
	display: inline-block;
	padding: 0 5px;
	margin: 7.5px 2px;
	font-size: 16px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	vertical-align: middle;
}
.menu .menu-overlay .menu-header .menu-search-form input[type="text"] {
	width: 30vw;
	background-color: #FFF;
	border: 1px solid #CCC;
	text-align: left;
	padding-left: 20px;
}
.menu .menu-overlay .menu-header .menu-search-form button[type="submit"],
.menu .menu-overlay .menu-header .menu-search-form a {
	background-color: rgba(255,255,255,0.75);
	color: #333;
	border: none;
	clear: none;
}
.menu .menu-overlay .menu-header .menu-search-form button[type="submit"]:hover,
.menu .menu-overlay .menu-header .menu-search-form a:hover { background-color: rgba(192, 32, 38, 0.75); color: #FFF; }

.menu .menu-overlay .menu-header .menu-search-form input[type="text"]:focus { outline: none !important; }
.menu .menu-overlay .menu-header .menu-search-form input[type="text"]::-webkit-input-placeholder { color: #DDD; font-style: italic; font-weight: normal; }
.menu .menu-overlay .menu-header .menu-search-form input[type="text"]::-moz-placeholder { color: #DDD; font-style: italic; font-weight: normal; }
.menu .menu-overlay .menu-header .menu-search-form input[type="text"]:-ms-input-placeholder { color: #DDD; font-style: italic; font-weight: normal; }
.menu .menu-overlay .menu-header .menu-search-form input[type="text"]:-moz-placeholder { color: #DDD; font-style: italic; font-weight: normal; }

.menu .menu-overlay .menu-header.horizontal ul { float: left; position: relative; z-index: 99; }
.menu .menu-overlay .menu-header .menu-page-title { opacity: 1; transition: 500ms opacity ease-in-out; }
.menu .menu-overlay .menu-header.horizontal .menu-page-title {
	position: absolute;
	display: block;
	background-color: #FFF;
	/*padding-left: 210px;*/
	padding-right: 30px;
	width: 100%;
	height: 65px;
  line-height: 65px;
	text-align: right;
	font-size: 125%;
}
.menu .menu-overlay .menu-header.horizontal .menu-page-title span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
	color: #999;
}

.menu .menu-overlay .menu-header.horizontal ul,
.menu .menu-overlay .menu-header.horizontal ul>li,
.menu .menu-overlay .menu-header.horizontal ul>li a { background-color: #FFF; color: #111; }
.menu .menu-overlay .menu-header.horizontal .icon-bar { background-color: #111; }

/**
* INITIALIZE
*/
.menu .menu-nav { margin-left: -25%; }
.menu .menu-overlay { background: none; background-color: rgba(255,255,255,0); }

/**
* MEDIA QUERIES
*/
@media only screen and (max-width: 1023px) {
	.menu .menu-overlay { width: 60%; }
	.menu .menu-nav { width: 40%; }
	.menu .menu-nav { margin-left: -40%; }
}

@media only screen and (max-width: 767px) {
	.menu .menu-overlay { width: 25%; }
	.menu .menu-nav { width: 75%; margin-left: -75%; }
	.menu .menu-nav * { font-size: 90% !important; }
	
		
	.menu .menu-overlay .menu-header { width: 100vw; height: 65px; position: relative; }
	.menu .menu-overlay .menu-header ul>li { float: left !important; }
	.menu .menu-overlay .menu-header ul { float: left; position: relative; z-index: 99; }
		
	.menu.menu-open .menu-overlay .menu-header,
	.menu.menu-open .menu-overlay .menu-header.horizontal { width: 65px; }
	.menu.menu-open .menu-overlay .menu-header ul>li,
	.menu.menu-open .menu-overlay .menu-header.horizontal ul>li {
		float: none; 
		border-right: none;
		border-bottom: 1px solid #FFF;
	}
	
	.menu .menu-overlay .menu-header.horizontal .menu-page-title { font-size: 80%; padding: 5px; }
}