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

/* Common styles of menus */
.cbp-hsinner ul, .cbp-hsinner ol {
    margin: 0;
}
.clear-mobile{
	clear:both;
	margin:0;
	padding:0;
}
.cbp-hsinner {
	width: 100%;
	max-width: 600px;
	height:70px;
	float: left;
	position: relative;
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	perspective: 1000px;
	-webkit-perspective-origin: 50% 200%;
	-moz-perspective-origin: 50% 200%;
	perspective-origin: 50% 200%;
	top:-74px;
	font-family:"DIN-Condensed", arial, helvetica, sans-serif;
	color:#d9e0d3;
}

.cbp-hsinner:first-child {
	margin-right: 100px;
}

.cbp-hsinner button {
    font-family: "DIN-Condensed", Arial, helvetica, sans-serif;
	background: url(../img/nav/hhn_mobile_menuBG.png) no-repeat 18px;
	border: none;
	width: 65px;
	min-height: 68px;
	text-indent: -900em;
	overflow: hidden;
	position: relative;
	cursor: pointer;
	outline: none;
    float: left;
	color: #fff;
    font-size:17px;
    text-transform:uppercase;
	top:-55px;
}

.cbp-hsinner ul {
	background: #171717;
}

.cbp-hsinner ul {
	padding: 0;
	list-style: none;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
    /*
	position:relative;
	top:-74px;
    */
}

.cbp-hsinner li {
	position: relative;
	border-bottom:2px solid #000;
	border-top: 1px solid #d9e2d4;
}

.cbp-hsinner li a {
	display: block;
	position: relative;
	padding: 17px 20px 11px 20px;
	font-size: 24px;
	line-height: 20px;
	font-weight: bold;
	color: #d9e0d3;
	outline: none;
    text-transform:uppercase;
}

.no-touch .cbp-hsinner li a:hover {
	background: rgba(255,248,213,0.1);
}

.cbp-hsinner li.dl-back > a {
	padding-left: 30px;
    background: rgba(0,0,0,1);
	/* background: rgba(0,0,0,0.1); */
}
.cbp-hsinner li.dl-back > a:hover {
	padding-left: 30px;
    background: rgba(0,0,0,1);
	/* background: rgba(0,0,0,0.1); */
}

.cbp-hsinner li.dl-back:after{
	position: absolute;
	color:#d9e0d3;
	font-size:10px;
	top: 0;
	line-height: 50px;
	font-family: 'iconic';
	speak: none;
	-webkit-font-smoothing: antialiased;
	content: "\e001";
}
.cbp-hsinner li > a:not(:only-child):after {
	position: absolute;
	color:#d9e0d3;
	font-size:10px;
	top: 0;
	line-height: 50px;
	font-family: 'iconic';
	speak: none;
	-webkit-font-smoothing: antialiased;
	content: "\e000";
}

.cbp-hsinner li.dl-back:after {
	left: 10px;
	color: rgba(212,204,198,0.3);
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	transform: rotate(180deg);
}

.cbp-hsinner li > a:after {
	right: 10px;
	color: rgba(0,0,0,0.15);
}

.cbp-hsinner .cbp-hsmenu {
	margin: 1px 0 0 0;
	width: 100%;
	opacity: 0;
	pointer-events: none;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px);
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}

.cbp-hsinner .cbp-hsmenu.dl-menu-toggle {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.cbp-hsinner .cbp-hsmenu.dl-menuopen {
	opacity: 1;
	pointer-events: auto;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px);
}

/* Hide the inner submenus */
.cbp-hsinner li .mobile-hssubmenu {
	display: none;
}

/* 
When a submenu is openend, we will hide all li siblings.
For that we give a class to the parent menu called "dl-subview".
We also hide the submenu link. 
The opened submenu will get the class "dl-subviewopen".
All this is done for any sub-level being entered.
*/
.cbp-hsmenu.dl-subview li,
.cbp-hsmenu.dl-subview li.dl-subviewopen > a,
.cbp-hsmenu.dl-subview li.dl-subview > a {
	display: none;
}

.cbp-hsmenu.dl-subview li.dl-subview,
.cbp-hsmenu.dl-subview li.dl-subview .mobile-hssubmenu,
.cbp-hsmenu.dl-subview li.dl-subviewopen,
.cbp-hsmenu.dl-subview li.dl-subviewopen > .mobile-hssubmenu,
.cbp-hsmenu.dl-subview li.dl-subviewopen > .mobile-hssubmenu > li {
	display: block;
}

/* Dynamically added submenu outside of the menu context */
.cbp-hsinner > .mobile-hssubmenu {
	position: absolute;
	width: 100%;
	top: 193px;
	left: 0;
	margin: 0;
}

/* Animation classes for moving out and in */


.cbp-hsmenu.dl-animate-out-2 {
	-webkit-animation: MenuAnimOut2 0.3s ease-in-out;
	-moz-animation: MenuAnimOut2 0.3s ease-in-out;
	animation: MenuAnimOut2 0.3s ease-in-out;
}

@-webkit-keyframes MenuAnimOut2 {
	100% {
		-webkit-transform: translateX(-100%);
		opacity: 0;
	}
}


@-moz-keyframes MenuAnimOut2 {
	100% {
		-moz-transform: translateX(-100%);
		opacity: 0;
	}
}

@keyframes MenuAnimOut2 {
	100% {
		transform: translateX(-100%);
		opacity: 0;
	}
}

.cbp-hsmenu.dl-animate-in-2 {
	-webkit-animation: MenuAnimIn2 0.3s ease-in-out;
	-moz-animation: MenuAnimIn2 0.3s ease-in-out;
	animation: MenuAnimIn2 0.3s ease-in-out;
}

@-webkit-keyframes MenuAnimIn2 {
	0% {
		-webkit-transform: translateX(-100%);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateX(0px);
		opacity: 1;
	}
}

@-moz-keyframes MenuAnimIn2 {
	0% {
		-moz-transform: translateX(-100%);
		opacity: 0;
	}
	100% {
		-moz-transform: translateX(0px);
		opacity: 1;
	}
}

@keyframes MenuAnimIn2 {
	0% {
		transform: translateX(-100%);
		opacity: 0;
	}
	100% {
		transform: translateX(0px);
		opacity: 1;
	}
}

.cbp-hsinner > .mobile-hssubmenu.dl-animate-in-2 {
	-webkit-animation: SubMenuAnimIn2 0.3s ease-in-out;
	-moz-animation: SubMenuAnimIn2 0.3s ease-in-out;
	animation: SubMenuAnimIn2 0.3s ease-in-out;
}

@-webkit-keyframes SubMenuAnimIn1 {
	0% {
		-webkit-transform: translateX(50%);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateX(0px);
		opacity: 1;
	}
}

@-webkit-keyframes SubMenuAnimIn2 {
	0% {
		-webkit-transform: translateX(100%);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateX(0px);
		opacity: 1;
	}
}

@-moz-keyframes SubMenuAnimIn2 {
	0% {
		-moz-transform: translateX(100%);
		opacity: 0;
	}
	100% {
		-moz-transform: translateX(0px);
		opacity: 1;
	}
}

@keyframes SubMenuAnimIn2 {
	0% {
		transform: translateX(100%);
		opacity: 0;
	}
	100% {
		transform: translateX(0px);
		opacity: 1;
	}
}

.cbp-hsinner > .mobile-hssubmenu.dl-animate-out-2 {
	-webkit-animation: SubMenuAnimOut2 0.3s ease-in-out;
	-moz-animation: SubMenuAnimOut2 0.3s ease-in-out;
	animation: SubMenuAnimOut2 0.3s ease-in-out;
}

@-webkit-keyframes SubMenuAnimOut2 {
	0% {
		-webkit-transform: translateX(0%);
		opacity: 1;
	}
	100% {
		-webkit-transform: translateX(100%);
		opacity: 0;
	}
}

@-moz-keyframes SubMenuAnimOut2 {
	0% {
		-moz-transform: translateX(0%);
		opacity: 1;
	}
	100% {
		-moz-transform: translateX(100%);
		opacity: 0;
	}
}

@keyframes SubMenuAnimOut2 {
	0% {
		transform: translateX(0%);
		opacity: 1;
	}
	100% {
		transform: translateX(100%);
		opacity: 0;
	}
}

/* No JS Fallback */
.no-js .cbp-hsinner .cbp-hsmenu {
	position: relative;
	opacity: 1;
	-webkit-transform: none;
	-moz-transform: none;
	transform: none;
}

.no-js .cbp-hsinner li .mobile-hssubmenu {
	display: block;
}

.no-js .cbp-hsinner li.dl-back {
	display: none;
}

.no-js .cbp-hsinner li > a:not(:only-child) {
	background: rgba(0,0,0,0.1);
}

.no-js .cbp-hsinner li > a:not(:only-child):after {
	content: '';
}

.dl-subviewopen, .dl-subview{
	border-top: none !important;
}
.hhn_mobile_logo{
	max-width:100%;
	float:left;
}
.hhn_mobile_logo img{
	margin-top:5px
}