/* -----------------------------------------------------------------------------
This website is powered by indual
Copyright (c) 2005-2014 indual GmbH (www.indual.ch)
-------------------------------------------------------------------------------- */

/* @group navigation */

/* ------------ overlay ------------- */

.overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.3);
	z-index: 70;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: all 0.3s ease-out;
	   -moz-transition: all 0.3s ease-out;
	     -o-transition: all 0.3s ease-out;
	        transition: all 0.3s ease-out;
}
.navi_open .overlay {
	opacity: 1;
	visibility: visible;
}

/* ------------ main navigation ------------- */

.responsive_navigation_toggle {
	display: block;
}
body.navi_open .page_wrap {
	max-height: 100%;
	overflow: hidden;
}
nav#rwdnav {
	overflow: scroll;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: -ms-autohiding-scrollbar;
	display: block;
	visibility: hidden;
	position: fixed;
	z-index: 90;
	top: 0;
	left: 0;
	width: 400px;
	height: 100%;
	opacity: 1;
	background: #fff;
	border-right: 2px solid #2a2a2a;
	box-shadow: 5px 0px 35px 0px rgba(18, 13, 10, 0.22);
	box-sizing: border-box;
	-webkit-transform: translate3d(-100%,0,0);
	   -moz-transform: translate3d(-100%,0,0);
	   	-ms-transform: translate3d(-100%,0,0);
	   	 -o-transform: translate3d(-100%,0,0);
	   	 	transform: translate3d(-100%,0,0);
	-webkit-transition: all 0.3s ease-out;
	   -moz-transition: all 0.3s ease-out;
	     -o-transition: all 0.3s ease-out;
	        transition: all 0.3s ease-out;
}
.navi_open nav#rwdnav {
	visibility: visible;
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	   -moz-transform: translate3d(0,0,0);
	   	-ms-transform: translate3d(0,0,0);
	   	 -o-transform: translate3d(0,0,0);
	   	 	transform: translate3d(0,0,0);
}

.rwd_navigation {
	display: block;
	list-style: none;
}
.rwd_navigation li a {
	display: block;
	text-decoration: none;
	color: #000;
	-webkit-transition: all 0.25s ease-out;
	   -moz-transition: all 0.25s ease-out;
	     -o-transition: all 0.25s ease-out;
		 	transition: all 0.25s ease-out;
}
.rwd_navigation li:hover > a,
.rwd_navigation li.current > a {
	color: #E2001A;
}

/* ------------ Level 0 ------------- */

.rwd_navigation > li:first-child {
	display: none;
}
.rwd_navigation > li:last-child {
	border-bottom: 1px solid #e4e4e4;
	box-shadow: inset 0 -1px 0 #2b2b2b;
}
.rwd_navigation > li > a {
	padding: 10px 30px 3px 50px;
	font-size: 26px;
	line-height: 36px;
	font-weight: 400;
	font-family: 'Ocras';
	text-transform: uppercase;
	border-top: 1px solid #2b2b2b;
	box-shadow: inset 0 1px 0 #e4e4e4;
}
.rwd_navigation > li:hover > a,
.rwd_navigation > li.current > a {
	color: #E2001A;
}

/* ------------ Level 1 ------------- */

.rwd_navigation ul.level1 {
	position: static;
	width: auto;
	visibility: hidden;
	opacity: 0;
	margin: 0;
	padding: 4px 0;
	border-top: 1px solid #2b2b2b;
	box-shadow: inset 0 1px 0 #e4e4e4;
}
.navi_open .rwd_navigation ul.level1 {
	opacity: 1;
	visibility: visible;
}
.rwd_navigation ul.level1 > li > a {
	font-size: 16px;
	line-height: 22px;
	padding: 3px 50px;
	font-weight: 700;
	text-transform: uppercase;
	position: relative;
}
.rwd_navigation ul.level1 > li > a:before {
	content: '';
	position: absolute;
	top: 0;
	left: 21px;
	bottom: 0;
	background: url(../img/dot.png) no-repeat center center;
	background-size: 20px;
	width: 20px;
	z-index: 5;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: all 0.25s ease-out;
	   -moz-transition: all 0.25s ease-out;
	     -o-transition: all 0.25s ease-out;
		 	transition: all 0.25s ease-out;
}
.rwd_navigation ul.level1 > li:hover > a:before,
.rwd_navigation ul.level1 > li.current > a:before {
	visibility: visible;
	opacity: 1;
}
.rwd_navigation ul.level3,
.rwd_navigation ul.level2 {
	display: none;
}

/* @end */

/* @group subnavigation */

.subnavigation ul {
	list-style: none;
	text-align: right;
	margin: 0 20px 0 0;
}
.subnavigation li a,
.subnavigation li a:before {
	-webkit-transition: all 0.3s ease-out;
	   -moz-transition: all 0.3s ease-out;
	     -o-transition: all 0.3s ease-out;
	        transition: all 0.3s ease-out;
}
.subnavigation li a {
	color: #000;
	font-weight: 700;
	text-decoration: none;
	text-transform: uppercase;
	display: block;
	font-size: 14px;
	line-height: 20px;
	margin: 0 0 6px;
	position: relative;
}
.subnavigation li a:before {
	content: '';
	position: absolute;
	top: -5px;
	right: -29px;
	width: 18px;
	height: 30px;
	background: url(../img/dot.png) no-repeat center center #fff;
	background-size: 17px;
	opacity: 0;
	visibility: hidden;
}
.subnavigation li:hover a:before,
.subnavigation li.current a:before {
	opacity: 1;
	visibility: visible;
}
.subnavigation li:hover a,
.subnavigation li.current a {
	color: #e30613;
}

/* @end */