/* The original version of this stylesheet and the associated (x)html
is available at www.cssplay.co.uk/menus/cssplay-responsive-multi-level-menu-three.html
Copyright (c) Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any way to fit your requirements. */
nav {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: #f5f5f5;
	background: rgba(221, 221, 221, 0.9);
	text-align: center;
	height: 45px;
	z-index: 100;
}
nav > span { display: none }
nav label, nav ul li b { display: none }
nav input {
	position: absolute;
	display: none;
}
nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	white-space: nowrap;
	text-align: left;
}
nav ul { display: inline-block }
nav li {
	margin: 0;
	padding: 0;
	list-style: none;
}
nav li {
	display: inline-block;
	display: inline;
}
nav ul ul {
	position: absolute;
	left: -9999px;
}
nav > ul { margin: 0 auto }
nav > ul > li {
	float: left;
	display: block;
	position: relative;
}
nav ul ul li a { border-top: 1px solid rgba(255, 255, 255, .7) }
nav > ul > li.has-sub > a, nav ul ul > li.has-sub > a, nav ul li.left ul > li.has-sub > a {
	background-repeat: no-repeat;
	text-decoration: none;
	cursor: text;
}
nav > ul > li.has-sub > a { background-image: url(../pic/nav-main-down.png) }
nav ul ul > li.has-sub > a { background-image: url(../pic/nav-main-re.png) }
nav > ul > li.has-sub > a, nav ul ul > li.has-sub > a {	background-position: right center }
nav ul li.left ul > li.has-sub > a {
	background-image: url(../pic/nav-main-li.png);
	background-position: left center;
}
nav ul li b {
	display: block;
	width: 100%;
	height: 45px;
	background: transparent;
	position: relative;
	z-index: 10;
	transition: 0s 0.5s;
}
nav ul ul li b { margin-top: -45px }
nav ul { background: rgba(255, 255, 255, 0) }
#p1, #p2, #p3, #p4, #p5, #p6, #p7, #p8, #p9, #p10, #p11, #p23 { background: rgba(204, 204, 255, 1) }
#p12, #p13, #p14 { background: rgba(195, 232, 244, 1) }
#p15, #p16, #p17, #p18 { background: rgba(200, 242, 158, 1) }
#p19 { background: rgba(251, 244, 156, 1) }
#p20, #p21, #p22 { background: rgba(255, 204, 204, 1) }

#p1 li:hover > a, #p2 li:hover > a, #p3 li:hover > a, #p4 li:hover > a, #p5 li:hover > a, #p6 li:hover > a, #p7 li:hover > a, #p8 li:hover > a, #p9 li:hover > a, #p10 li:hover > a, #p11 li:hover > a, #p23 li:hover > a { background: rgba(153, 153, 204, 1) }
#p12 li:hover > a, #p13 li:hover > a, #p14 li:hover > a { background: rgba(128, 179, 198, 1) }
#p15 li:hover > a, #p16 li:hover > a, #p17 li:hover > a, #p18 li:hover > a { background: rgba(153, 204, 102, 1) }
#p19 li:hover > a { background: rgba(204, 204, 102, 1) }
#p20 li:hover > a, #p21 li:hover > a, #p22 li:hover > a { background: rgba(204, 153, 153, 1) }

nav a {
	display: block;
	font: normal normal 14px "PT Sans", arial, sans-serif;
	color: #000;
	line-height: 45px;
	text-decoration: none;
	padding: 0 30px 0 10px;
}
nav > ul > li > a {
	float: left;
	text-transform: uppercase;
}
nav ul li:hover > ul {
	visibility: visible;
	left: -1px;
	top: 45px;
}
nav ul ul li:hover > ul {
	visibility: visible;
	left: 100%;
	top: auto;
	margin-top: -46px;
}
nav li.left:hover > ul {
	visibility: visible;
	left: auto;
	right: -1px;
	top: 45px;
}
nav li.left ul li:hover > ul {
	visibility: visible;
	left: auto;
	right: 100%;
	top: auto;
	margin-top: -46px;
}
nav ul li:hover > b { width: 0 }
nav li.left ul a {
	text-align: right;
	padding: 0 10px 0 60px;
}
nav li.left ul ul a { padding-left: 30px }
nav li:hover > a, nav li.left ul li:hover > a {
	background: rgba(204, 204, 204, 0.9);
	text-decoration: underline;
	color: #000;
}
a.blass {
	opacity: .6;
	background: #fff;
	cursor: text;
}
a.blass:hover { text-decoration: none }
.left a.blass:hover { text-decoration: none }
nav > ul { margin-left: -40px }
/* ==================================================== MAX-WIDTH 768px .740. ================ */
@media only screen and (max-width:768px) {
nav ul { opacity: 1 }
nav ul li b { display: none }
nav {
	position: relative;
	height: 0;
	padding-top: 45px;
	background: #dfdfdf;
}
nav > label {
	display: block;
	width: 36px;
	height: 36px;
	background: #ddd;
	border-radius: 5px;
	position: absolute;
	right: 10px;
	top: 5px;
	cursor: pointer;
}
nav > label.sub0:before {
	display: block;
	content: "";
	width: 18px;
	height: 18px;
	border-style: double none none none;
	border-width: 9px;
	border-color: #000;
	position: absolute;
	left: 50%;
	margin-left: -9px;
	margin-top: 11px;
	transition: 0.25s;
}
nav > label.sub0:after {
	display: block;
	content: "";
	width: 18px;
	height: 18px;
	border-style: solid none none none;
	border-width: 3px;
	border-color: #000;
	position: absolute;
	left: 50%;
	margin-left: -9px;
	margin-top: 23px;
	transition: 0.25s;
}
nav > span {
	display: block;
	font: normal normal 14px "PT Sans", arial, sans-serif;
	color: #000;
	position: absolute;
	left: 50px;
	top: 15px;
}
nav li {
	display: block;
	z-index: inherit;
}
nav ul, nav ul ul {
	margin: 0;
	display: block;
	position: static;
	max-height: 0;
	overflow: hidden;
	transition: 0.25s;
}
nav > ul > li.has-sub > a { background-image: none }
nav ul ul > li.has-sub > a { background-image: none }
nav ul li.left ul > li.has-sub > a { background-image: none }
nav ul li {
	float: none;
	display: block;
	position: relative;
}
nav ul li label {
	display: block;
	width: 36px;
	height: 36px;
	background: #ddd;
	border-radius: 5px;
	position: absolute;
	right: 10px;
	top: 5px;
	cursor: pointer;
}
nav ul ul li label { margin-top: 0 }
nav ul li label:before {
	display: block;
	content: "";
	width: 18px;
	height: 2px;
	background: #000;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -9px;
	margin-top: -1px;
	transition: 0.25s;
}
nav ul li label:after {
	display: block;
	content: "";
	width: 2px;
	height: 18px;
	background: #000;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -1px;
	margin-top: -9px;
	transition: 0.25s;
}
nav ul { background: #efefef }
nav a {
	display: block;
	font: normal normal 14px "PT Sans", arial, sans-serif;
	color: #000;
	line-height: 45px;
	text-decoration: none;
	padding: 0 20px 0 10px;
}
nav ul li a {
	float: none;
	border-top: 1px solid #aaa;
}
nav ul ul li a:before {
	content: "";
	display: block;
	width: 15px;
	height: 45px;
	background: url(../pic/nav-main-re.png) left 15px no-repeat;
	float: left;
}
nav > ul > li.has-sub > a:before, nav ul ul > li.has-sub > a:before, 
nav ul li.left ul > li.has-sub > a:before, a.blass:before {
	background-image: none;
	margin-left: -15px;
}
a.blass { border-radius: .2rem }
nav ul ul li > ul { margin-top: 0 }
nav li.left ul li > ul { margin-top: 0 }
nav ul ul li:hover > ul { margin-top: 0 }
nav li.left ul li:hover > ul { margin-top: 0 }
nav li.left ul a {
	text-align: left;
	padding: 0 20px 0 10px;
}
nav li:hover > a, nav li.left ul li:hover > a {
	background: #e3e3e3;
	text-decoration: none;
}
nav input:checked ~ label:before, nav input:checked ~ label.sub0:after {
	-webkit-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	transform: rotate(360deg);
}
nav input:checked ~ label:after {
	-webkit-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	transform: rotate(270deg);
}
nav input:checked ~ label.sub0:before {
	display: block;
	content: "";
	width: 18px;
	height: 18px;
	border-style: none none none double;
	border-width: 9px;
	border-color: #000;
	position: absolute;
	left: 50%;
	margin-left: -8px;
	margin-top: 10px;
	transition: 0.25s;
}
nav input:checked ~ label.sub0:after {
	display: block;
	content: "";
	width: 18px;
	height: 18px;
	border-style: none solid none none;
	border-width: 3px;
	border-color: #000;
	position: absolute;
	margin-left: -14px;
	margin-top: 10px;
	transition: 0.25s;
	-webkit-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	transform: rotate(360deg);
}
nav input:checked ~ ul { max-height: 3000px }
nav ul ul {
	border: 0;
	margin: 0 15px;
 }
}