@charset "windows-874";
/* CSS Document */


/*** Shy menu ***/

ul#hamburger-menu {
	list-style: none;
	margin: 0; padding: 0;	padding-bottom: 17px;
}
ul.hamburger-menu-style li {
	margin: 0 30px; padding: 10px 0;
	font-size: 20px; color: #fff;
}
ul.hamburger-menu-style li .sub-text { font-size: 15px; }
ul.hamburger-menu-style li a:link {
	width:100%; display: inline-block;
	color: #fff;
}
ul.hamburger-menu-style li a:visited { color: #fff;}
ul.hamburger-menu-style li a:active { color: #fff;}
ul.hamburger-menu-style li a.active { color: #fecb03; font-weight:600;}
ul.hamburger-menu-style li a:hover { color: #fecb03; letter-spacing: 2px;}

.shy-menu { 
	width: 90px; height: 90px; margin: 0; padding: 0; display: block;
	color: #fff;
	background-color: rgba(51,34,88,.75);
}
.shy-menu.is-open, .shy-menu:hover {
	height: 845px;
	background-color: rgba(51,34,88,.75);
}

.text-menu {
	top: 25px; left: 91px; position:absolute; visibility:visible;
	font-family: 'MS Sans Serif', 'Tahoma', 'Verdana'; font-size: 28px; font-weight:300; color: #fff; text-shadow: 0 0 4px rgba(0,0,0,.3);
	cursor: default;
}

.shy-menu.is-open, .shy-menu:hover ~ .text-menu { color: #6626a9; text-shadow: none !important;}

.shy-menu.is-open {
	width: 335px; height: 845px;
	background-color: rgba(51,34,88,.85);
}

.shy-menu-panel { 
	margin-left: -280px; visibility: hidden;
}
.shy-menu-panel ul#hamburger-menu  li { 
	border-bottom:solid 1px rgba(255,255,255,0);
	animation-name: hide-line;
	animation-duration: .1s;
}
.is-open .shy-menu-panel { 
	margin-left: 0; visibility:visible;
}
.is-open .shy-menu-panel ul#hamburger-menu  li { 
	border-bottom:solid 1px rgba(255,255,255,.2);
	animation-name: hide-line;
	animation-duration: .4s;
}
.is-open .shy-menu-panel ul#hamburger-menu  li:last-child { border-bottom: none;}

@keyframes hide-line {
  from {border-bottom:solid 1px rgba(255,255,255,.2)}
  to {border-bottom:solid 1px rgba(255,255,255,0)}
}

/*** Hamburger ***/
.shy-menu-hamburger {
	 width: 90px;height: 90px; display: block; position: relative; overflow: hidden; left: 0px; top: 0px;
	cursor: pointer;
}

.shy-menu-hamburger > .layer {
	width: 32px; height: 2px; display: block; overflow: hidden; position: absolute; left: 29px; top:0;
	background-color: #fff;
}

.shy-menu-hamburger .layer.top { top: 35px; }
.is-open .shy-menu-hamburger .layer.top { 
	top: 45px; left: 29px;
	transform: rotate(45deg);
}
.shy-menu-hamburger .layer.mid { top: 45px; }
.is-open .shy-menu-hamburger .layer.mid {
	left: 29px; opacity: 0;
}
.shy-menu-hamburger .layer.btm { top: 55px; }
.is-open .shy-menu-hamburger .layer.btm { 
	top: 45px; left: 29px;
	transform: rotate(-45deg);
}

@media (max-width: 1024px) {	
	.shy-menu.is-open,
	.shy-menu:hover { height: 90px; }
	.shy-menu.is-open { width: 335px; height: auto;}
	.text-menu { visibility: hidden;}
	.h-navigator { height: 845px;}
}

@media (max-width: 1023px) {	
	.shy-menu { width: 64px; height: 64px;}
	.shy-menu.is-open,
	.shy-menu:hover { height: 64px; }
	.shy-menu.is-open { width: 335px; height: auto;}
	
	.shy-menu-hamburger { width: 64px;height: 64px; }
	.shy-menu-hamburger > .layer { width: 24px; left: 20px;}
	.shy-menu-hamburger .layer.top { top: 24px; }
	.is-open .shy-menu-hamburger .layer.top { 
	  top: 31px;
	  left: 20px;
	  transform: rotate(45deg);
	}
	.shy-menu-hamburger .layer.mid { top: 31px; }
	.is-open .shy-menu-hamburger .layer.mid {
	  opacity: 0;
	  left: 20px;
	}
	.shy-menu-hamburger .layer.btm { top: 38px; }
	.is-open .shy-menu-hamburger .layer.btm { 
	  top: 31px;
	  left: 20px;
	  transform: rotate(-45deg);
	}
}
@media (max-width: 768px) {
	
}
@media (max-width: 430px) {	
	.shy-menu.is-open { width: 100vw ; height: 100vh; }
	.h-navigator { height: 100vh; max-height: 768px !important;}
}

/**
.shy-menu-hamburger .layer.top { top: 9px; }
.is-open .shy-menu-hamburger .layer.top { 
  top: 17px;
  left: 5px;
  transform: rotate(45deg);
}
.shy-menu-hamburger .layer.mid { top: 16px; }
.is-open .shy-menu-hamburger .layer.mid {
  opacity: 0;
  left: 0;
}
.shy-menu-hamburger .layer.btm { top: 23px; }
.is-open .shy-menu-hamburger .layer.btm { 
  top: 17px;
  left: 5px;
  transform: rotate(-45deg);
}
*/