@charset "utf-8";
/* CSS Document */


.button_container {position: relative; height: 25px; width: 30px; cursor: pointer; z-index: 100; transition: opacity 0.25s ease;}

.button_container.active .top {transform: translateY(11px) translateX(0) rotate(45deg);	background: #000000;}
.button_container.active .middle {opacity: 0; background: #000000;}
.button_container.active .bottom {transform: translateY(-11px) translateX(0) rotate(-45deg); background: #000000;}

.button_container span {background: #000000; border: none; height: 2px; width: 100%; position: absolute; top: 0; left: 0; transition: all 0.35s ease; cursor: pointer;}
.button_container span:nth-of-type(2) {top: 10px;}
.button_container span:nth-of-type(3) {top: 20px;}

.overlay						{position: fixed; background: #00aeee; top: 0; left: 0; width: 100%; height: 0%; opacity: 0; visibility: hidden; transition: opacity 0.35s, visibility .35s, height 0.35s;	overflow: hidden;}

.overlay-menu .collapse ul 			{margin-bottom: 0;}
.overlay-menu .collapse ul li 		{padding: .5rem 0;}
.overlay-menu .collapse ul li a  	{margin-bottom: 0;}


.nav-itemx:after 				{font-family: 'FontAwesome'; content: "\f056"; font-weight: 900; display: inline-block; margin-left: .5rem; font-size: 75%;}
.nav-itemx.collapsed:after 		{content: "\f055"; font-weight: 900;}

.catogory-link::after 							{font-family: 'Font Awesome 5 Free'; content: "\f0b0"; font-weight: 900;}
.whitepanelWrap.opened .catogory-link::after	{font-family: 'Font Awesome 5 Free'; content: "\f057"; font-weight: 900;}


.overlay.open					{opacity: 1; visibility: visible; height: 100%;}

.overlay.open li				{animation: fadeInRight 0.5s ease forwards; animation-delay: 0.35s;}
.overlay.open li:nth-of-type(2)	{animation-delay: 0.4s;}
.overlay.open li:nth-of-type(3)	{animation-delay: 0.45s;}
.overlay.open li:nth-of-type(4)	{animation-delay: 0.5s;}
.overlay.open li:nth-of-type(5)	{animation-delay: 0.55s;}
.overlay.open li:nth-of-type(6)	{animation-delay: 0.6s;}
.overlay.open li:nth-of-type(7)	{animation-delay: 0.65s;}
.overlay.open li:nth-of-type(8)	{animation-delay: 0.70s;}

.overlay nav 			{position: relative; height: 70%; top: 50%; transform: translateY(-50%); font-size: 1.5rem; text-align: center;}
.overlay ul 			{list-style: none; padding: 0; margin: 0 auto; display: inline-block; position: relative; height: 100%;}
.overlay ul li 			{display: block; position: relative; opacity: 0; padding: .75rem 0;}
.overlay ul li a 		{display: block; position: relative; color: #FFF; text-decoration: none; overflow: hidden;}
.overlay ul li a:hover	{color: #000000;}

@keyframes fadeInRight {
0% 		{opacity: 0;	left: 20%;}
100% 	{opacity: 1; left: 0;}
}