.new_menu {width:100%; background:#ccc; text-align:center; height:45px; position:relative; z-index:100;}
.new_menu > span {display:none;}
.new_menu input {position:absolute; display:none;}
.new_menu label {display:none;}
.new_menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left;}
.new_menu ul {display:inline-block;} 
.new_menu ul {*display:inline;}

.new_menu li {margin:0; padding:0; list-style:none;}
.new_menu li {display:inline-block; display:inline;}
.new_menu ul ul {position:absolute; left:-9999px; border-left:1px solid #ddd; border-right:1px solid #ddd;}
.new_menu > ul {margin:0 auto;}
.new_menu > ul > li {float:left; display:block; position:relative;}
.new_menu ul ul li a {border-top:1px solid #ddd}
.new_menu > ul > li.has-sub > a {background-image:url(down.png); background-repeat: no-repeat; background-position: right center;}
.new_menu ul ul > li.has-sub > a {background-image:url(right.png); background-repeat: no-repeat; background-position: right center;}
.new_menu ul li.left ul > li.has-sub > a {background-image:url(left.png); background-repeat: no-repeat; background-position:left center;}

.new_menu ul li b {display:block; width:100%; height:45px; background:transparent; position:relative; z-index:10;
-webkit-transition: 0s 0.5s;
transition: 0s 0.5s;
}
.new_menu ul ul li b {margin-top:-45px;}

.new_menu ul li b {*display:none;}

.new_menu ul {background:#ccc;}

.new_menu a {display:block; font:bold 16px "allerbold", arial, sans-serif; color:#000; line-height:45px; text-decoration:none; padding:0 10px 0 10px;}
.new_menu > ul > li > a {float:left; text-transform:uppercase;}

.new_menu ul li:hover > ul {visibility:visible; left:-1px; top:45px; opacity:1;}
.new_menu ul ul li:hover > ul {visibility:visible; left:100%; top:auto; margin-top:-46px;}
.new_menu li.left:hover > ul {visibility:visible; left:auto; right:-1px; top:45px;}
.new_menu li.left ul li:hover > ul {visibility:visible; left:auto; right:100%; top:auto; margin-top:-46px;}
.new_menu ul li:hover > b {width:0;}

.new_menu li.left ul a {text-align:right; padding:0 10px 0 30px;}

.new_menu li:hover > a,
.new_menu li.left ul li:hover > a {background-color:#bbb; text-decoration:underline;}

.backimage {display:block; width:707px; height:315px; background:url(screenshot.jpg) no-repeat center center; background-size:cover;}

@media only screen and (max-width:768px){
.new_menu ul li b {display:none;}
.new_menu {height:0; padding-top:45px; background:#bbb; position:relative;}
.new_menu > label {display:block; width:36px; height:36px; background:#ddd; border-radius:5px; position:absolute; right:10px; top:5px; cursor:pointer;}
.new_menu > label:before {display:block; content:""; width:18px; height:2px; background:#000; position:absolute; left:50%; top:50%; margin-left:-9px; margin-top:-1px;
-webkit-transition:0.25s;
transition:0.25s
}
.new_menu > label:after {display:block; content:""; width:2px; height:18px; background:#000; position:absolute; left:50%; top:50%; margin-left:-1px; margin-top:-9px;
-webkit-transition:0.25s;
transition:0.25s
}
.new_menu > span {display:block; font:normal 18px "allerbold", arial,sans-serif; color:#000; position:absolute; left:10px; top:15px;}

.new_menu li {display:block;}
.new_menu ul, 
.new_menu ul ul {margin:0; display:block; position:static; max-height:0; overflow:hidden;
-webkit-transition:0.25s;
transition:0.25s;
}
.new_menu > ul > li.has-sub > a {background-image:none;}
.new_menu ul ul > li.has-sub > a {background-image:none;}
.new_menu ul li.left ul > li.has-sub > a {background-image:none;}

.new_menu ul li {float:none; display:block; position:relative;}
.new_menu ul li label {display:block; width:36px; height:36px; background:#ddd; border-radius:5px; position:absolute; right:10px; top:5px; cursor:pointer;}
.new_menu ul ul li label {margin-top:0;}

.new_menu 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;
-webkit-transition:0.25s;
transition:0.25s
}
.new_menu 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;
-webkit-transition:0.25s;
transition:0.25s
}

.new_menu ul {background:#ccc; border:0;}

.new_menu a {display:block; font:normal 14px arial,sans-serif; color:#000; line-height:45px; text-decoration:none;padding:0 20px 0 10px;}
.new_menu ul li a {float:none; border-top:1px solid #aaa;}
.new_menu ul ul li a:before {content:""; display:block; width:15px; height:45px; background:url(right.png) no-repeat left 15px; float:left;}

.new_menu ul ul li > ul {margin-top:0;}
.new_menu li.left ul li > ul {margin-top:0;}

.new_menu ul ul li:hover > ul {margin-top:0;}
.new_menu li.left ul li:hover > ul {margin-top:0;}

.new_menu li.left ul a {text-align:left; padding:0 20px 0 10px;}

.new_menu li:hover > a,
.new_menu li.left ul li:hover > a {background-color:#ccc; text-decoration:none;}

.new_menu input:checked ~ label:before {
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
}
.new_menu input:checked ~ label:after {
-webkit-transform:rotate(270deg);
transform:rotate(270deg);
}

.new_menu input:checked ~ ul {max-height:3000px;}

.new_menu ul ul {border:0; margin:0px 15px;}
}

@media only screen and (max-width:920px){
.new_menu {width:100%; }
.new_menu a {font:bold 0.80em "allerbold", arial, sans-serif; color:#000; line-height:45px; text-decoration:none; padding:0 10px 0 10px;}
}