.trigger
{
	display: none;
	position: fixed;
	width: 40px; 
	height: 40px;
	top: 5px; 
	left: 0;
	background-color: #BBBBBB; 
	color: #FFFFFF; 
	border-radius: 0 5px 5px 0;
	-webkit-transition: 0.5s;
	-o-transition:  0.5s;
	-moz-transition:  0.5s;
	transition:  0.5s;
}

.trigger label
{
	display: block;
	position: absolute; 
	width: 40px; 
	height: 40px;
	top: 0;
	left: 0;
	background: url('../images/menu-icon.png') no-repeat center center; 
	cursor: pointer;
} 

.trigger label span
{
	position: absolute; 
	left: -9999px;
}

input.submenus,
input#toggle
{
	position: absolute; 
	display: none;
}

.menuHolder
{
	z-index: 400;
}

.menu
{
	float: right; 
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
	-ms-touch-action: none;
}

.menu ul
{
	margin: 0; 
	padding: 0; 
	list-style: none; 
	white-space: nowrap; 
	text-align: left;
}

.menu li
{
	display: block; 
	position: relative;
	padding-right: 5px;
}

.menu ul ul
{
	position: absolute; 
	left: -9999px; 
	top: 50px; 
	padding: 10px 0;
	background-color: #0192CF;
	z-index: 0; 
	-webkit-transition: opacity 0.5s;
	-o-transition: opacity 0.5s;
	-moz-transition: opacity 0.5s;
	transition: opacity 0.5s;
}

.menu ul li.left > ul
{
	left: auto; 
	right: 0; 
	top: 50px;
}

.menu ul li.left ul li > ul
{
	left: auto; 
	right: 100%; 
	top: auto; 
	margin-top: -35px;
}

.menu > ul
{
	margin: 0 auto;
}

.menu > ul > li
{
	float: left; 
	position: relative;
}

.menu ul
{
	width: 230px;
	margin-top: -10px;
	background-color: #FFFFFF;
}

.menu a
{
	display: block;  
	font-family: Verdana, Geneva, sans-serif;
	font-size: 16px;
	color: #0192CF;
	text-transform: none;
	text-decoration: none; 
	padding: 0 5px 0 5px; 
	position: relative; 
	z-index: 10;
}

.menu a.hassub
{
	display: block; 
	text-transform: none; 
	font-family: Verdana, Geneva, sans-serif;
	font-size: 16px;
	color: #0192CF; 
	text-decoration: none; 
	padding: 0 40px 0 5px;
	position: relative; 
	z-index: 10;
}

.menu a.hassub .selected
{
	display: block; 
	text-transform: none; 
	font-family: Verdana, Geneva, sans-serif;
	font-size: 16px;
	color: #0F0; 
	text-decoration: none; 
	padding: 0 40px 0 5px;
	position: relative; 
	z-index: 10;
}

.menu > ul > li > a
{
	line-height: 50px;
	text-decoration: none;
}

.menu > ul > li > label
{
	display: block; 
	position: relative; 
	width: 100%;
	margin-top: -50px; 
	height: 50px; 
	background:  url('../images/trans.gif'); 
	z-index: 100;
	-webkit-transition: 0s 0.5s;
	-o-transition: 0s 0.5s;
	-moz-transition: 0s 0.5s;
	transition: 0s 0.5s;
}

.menu ul ul > li > label
{
	display: block;
	position: relative;
	margin-top: -25px;
	width: 100%;
	height: 25px;
	background:  url('../images/trans.gif'));
	z-index: 100;
	-webkit-transition: 0s 0.5s;
	-o-transition: 0s 0.5s;
	-moz-transition: 0s 0.5s;
	transition: 0s 0.5s;
}

.menu ul li.back
{
	display: none;
}

.menu li: hover > label
{
	width: 0;
}

.menu li.left ul a
{
	text-align: right; 
	padding: 0 5px 0 5px;
}

.menu li:hover > a,
.menu ul li > a.selected,
.menu ul li.home a.selected,
.menu ul li.home a.selected:visited,
.menu ul li.last-child a.selected,
.menu ul li.last-child a.selected:visited
{
	color: #E5097F;
	text-decoration: none;
}

.menu ul ul li > a
{ 
	color: #FFFFFF;
	line-height: 30px;
	text-decoration: none;
}

.menu ul ul li:hover > a
{ 
	color: #FFFFFF;
	text-decoration: none;
}

.menu ul li a.hassub
{
	background:  url('../images/arrow-down.png') no-repeat right center;
}

.menu li ul li a.hassub
{ 
	background: url('../images/arrow-right.png') no-repeat right center;
}

.menu li.left ul li a.hassub
{
	background: url('../images/arrow-left.png') no-repeat left center;
}

.menu ul li:hover > a.hassub
{
	color: #E5097F; 
	text-decoration: none;
}

.menu li.left ul li:hover > a.hassub
{
	color: #E5097F; 
	text-decoration: none;
}

.menu > ul
{
	display: inline;
}

.menu ul ul,
.menu ul ul ul,
.menu ul li.left > ul,
.menu ul li.left ul li > ul
{
	left: -9999px;
	right: auto;
	opacity: 0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	-moz-opacity: 0;
	-webkit-opacity: 0;
	-khtml-opacity: 0;
	filter: alpha(opacity=0);
}

.menu ul li:hover > ul
{
	left: 0; 
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	-moz-opacity: 1;
	-webkit-opacity: 1;
	-khtml-opacity: 1;
	filter: alpha(opacity=100);
}

.menu ul ul li:hover > ul
{
	left: 100%; 
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	-moz-opacity: 1;
	-webkit-opacity: 1;
	-khtml-opacity: 1;
	filter: alpha(opacity=100);
}

.menu ul li.left:hover > ul
{
	left: auto; 
	right: 0; 
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	-moz-opacity: 1;
	-webkit-opacity: 1;
	-khtml-opacity: 1;
	filter: alpha(opacity=100);
}

.menu ul li.left ul li:hover > ul
{
	left: auto; 
	right: 100%; 
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	-moz-opacity: 1;
	-webkit-opacity: 1;
	-khtml-opacity: 1;
	filter: alpha(opacity=100);
}

@media only screen and (max-width: 1150px)
{
	.trigger
	{
		display: block;
	}
	
	.menuHolder
	{
		position: fixed; 
		left: -240px; 
		width: 240px; 
		top: 0;
		bottom: 0; 
		height: auto; 
		overflow-x: hidden; 
		background: #BBBBBB;
		-webkit-transition: left 0.5s;
		-o-transition: left 0.5s;
		-moz-transition: left 0.5s;
		transition: left 0.5s;
	}
	
	.menu
	{
		width: 240px; 
		text-align: center; 
		position: absolute; 
		z-index: 100; 
		background: #BBBBBB; 
		left: 0; 
		top: 0;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		-o-user-select: none;
		user-select: none;
		-ms-touch-action: none;
		-webkit-transition: 0.5s;
		-o-transition: 0.5s;
		-moz-transition: 0.5s;
		transition: 0.5s;
	}
	
	.menu ul
	{
		margin: 0; 
		padding: 0; 
		width: 240px; 
		list-style: none; 
		white-space: nowrap; 
		text-align: left; 
		border-radius: 0; 
		background: #bbb; 
	}
	
	.menu li
	{
		display: block; 
		position: static; 
		width: 240px; 
		height: 50px; 
	}
	
	.menu ul li.back
	{
		display: block;
	}
	
	.menu ul ul
	{
		position: absolute; 
		left: 240px; 
		top: -5000px; 
		padding: 0; 
		z-index: 0; 
		background: #bbb;
		-webkit-transition: 0s 0.5s;
		-o-transition: 0s 0.5s;
		-moz-transition: 0s 0.5s;
		transition: 0s 0.5s;
		opacity: 1; 
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
		-moz-opacity: 1;
		-webkit-opacity: 1;
		-khtml-opacity: 1;
		filter: alpha(opacity=100);
	}
	
	.menu ul li.left > ul
	{
		left: 240px; 
		right: auto; 
		top: -5000px;
	}
	
	.menu ul li.left ul li > ul
	{
		left: 240px; 
		right: auto; 
		top: -5000px; 
		margin-top: 0;
	}
	
	.menu > ul {
		margin: 0;
	}
	.menu > ul > li
	{
		float: left; 
		position: static;
	}
	
	.menu ul
	{
		background: #bbb;
	}
	
	.menu a
	{
		display: block; 
		font: Verdana, Geneva, sans-serif;
		font-size: 14px;
		color: #FFFFFF;
		text-decoration: none; 
		padding: 0 0 0 5px; 
		margin-right: 10px; 
		position: relative; 
		z-index: 10; 
		background: transparent;
	}
	
	.menu > ul > li > a
	{
		line-height: 50px;
		text-decoration: none;
		color: #FFFFFF;
	}
	
	.menu ul li > a.hassub
	{
		color: #FFFFFF; 
		text-decoration: none;
	}
	
	.menu ul li li > a
	{
		color: #FFFFFF; 
		text-decoration: none;
	}
	
	.menu > ul > li > label
	{
		display: block; 
		position: relative; 
		margin-top: -46px; 
		margin-right: 4px;
		width: 40px; 
		height: 40px;
		float: right; 
		background: url('../images/arrow-right.png') no-repeat center center; 
		z-index: 100; 
		cursor: pointer;
		-webkit-transition: 0s;
		-o-transition: 0s;
		-moz-transition: 0s;
		transition: 0s;
	}
	
	.menu li:hover > label
	{
		width: 40px;
	}

	.menu li.left ul a
	{
		text-align: left; 
		padding: 0 40px 0 20px;
	}
	
	.menu ul li:hover > a
	{
		color: #E5097F; 
		text-decoration: none;
	}
	
	.menu ul li a:hover
	{
		color: #E5097F;  
		text-decoration: none;
	}
	
	.menu ul li a.hassub:hover
	{
		color: #E5097F; 
		text-decoration: none;
	}
	
	.menu ul li a.hassub,
	.menu li.left ul li a.hassub,
	.menu li ul li a.hassub
	{
		color: #FFFFFF;
		background: none;
		text-decoration: none;
	}
	
	.menu ul li.back label
	{
		display: block;
		float: right;  
		width: 40px; 
		height: 40px; 
		margin-top: 4px; 
		background: url('../images/arrow-left.png') no-repeat center center; 
		z-index: 100; 
		cursor: pointer;
	}
	
	.menu ul li.back span
	{
		display: block;
		float: left; 
		line-height: 35px;
		width: 180px; 
		font: Verdana, Geneva, sans-serif;
		font-size: 12px; 
		color: #FFFFFF;
		font-weight: bold;	
		white-space: normal; 
		text-transform: uppercase;
		padding: 5px 0 0 5px; 
	}
	
	.menu ul ul,
	.menu ul ul ul,
	.menu ul li.left > ul,
	.menu ul li.left ul li > ul
	{
		left: 240px;
		top: -5000px; 
		right: auto; 
		opacity: 1;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
		-moz-opacity: 1;
		-webkit-opacity: 1;
		-khtml-opacity: 1;
		filter: alpha(opacity=100);
	}
	
	.menu ul li:hover > ul,
	.menu ul ul li:hover > ul,
	.menu ul li.left:hover > ul,
	.menu ul li.left ul li:hover > ul
	{
		left: 240px; 
		right: auto; 
		opacity: 1;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
		-moz-opacity: 1;
		-webkit-opacity: 1;
		-khtml-opacity: 1;
		filter: alpha(opacity=100);
	}
	
	.menu ul li:hover > a.hassub,
	.menu li.left ul li:hover > a.hassub
	{
		background: none; 
		color: #E5097F;
		text-decoration: none;
	}
	
	.menu ul ul li a.hassub:hover,
	.menu li.left ul li a.hassub:hover
	{
		color: #E5097F;
		text-decoration: none;
	}
	
	#submenu1:checked ~ .menu #p1,
	#submenu2:checked ~ .menu #p2,
	#submenu3:checked ~ .menu #p3,
	#submenu4:checked ~ .menu #p4,
	#submenu5:checked ~ .menu #p5,
	#submenu6:checked ~ .menu #p6,
	#submenu7:checked ~ .menu #p7,
	#submenu8:checked ~ .menu #p8,
	#submenu9:checked ~ .menu #p9,
	#submenu10:checked ~ .menu #p10,
	#submenu11:checked ~ .menu #p11
	{
		top: 0;
		-webkit-transition: 0s;
		-o-transition: 0s;
		-moz-transition: 0s;
		transition: 0s;
	}
	
	#submenu1:checked ~ .menu,
	#submenu2:checked ~ .menu,
	#submenu7:checked ~ .menu,
	#submenu8:checked ~ .menu
	{
		left: -240px;
	}
	
	#submenu3:checked ~ .menu,
	#submenu5:checked ~ .menu,
	#submenu6:checked ~ .menu,
	#submenu9:checked ~ .menu,
	#submenu11:checked ~ .menu
	{
		left: -480px;
	}
	
	#submenu4:checked ~ .menu,
	#submenu10:checked ~ .menu
	{
		left: -840px;
	}
	
	#toggle:checked ~ .wrapper
	{
		left: 240px;
	} 
	#toggle:checked ~ .wrapper .menuHolder
	{
		left: 0;
	} 
	#toggle:checked ~ .wrapper .trigger
	{
		left: 240px;
	} 
}