/* sources:
http://vivekarora.com/blog/simple-responsive-horizontal-slide-out-menu/
http://rosea.jpn.org/demo/css3/TriangleBreadcrumbs.html */

#menu-icon {
	display: none;
    background-color: #ff4100;
    background-image: url(/grfx/menu-icon.png);
    background-position: 6px center;
    background-repeat: no-repeat;
    background-size: 30px 30px;
    /*height: 54px;*/
    height: 44px;
    width: 40px;
    color: #fff;
	}

.nav > .special-buttons > a 	{ color: #da7a1c; }

.nav-wrapper					{ position:relative; }
.nav-wrapper .nav-inner {
	background: #323232;
	position: relative;
	z-index: 100;
	}

.nav-wrapper ul {
	list-style: none;
	margin: 0 auto;
	}

.nav-wrapper .nav {
	width: 100%;
	max-width: 1076px;
	margin: 0 auto;
	list-style: none;
	}

.nav > li						{ display: inline-block; }
.nav > li:first-child {
	background: url(/grfx/home-btn.png) transparent no-repeat center center;
	background-size: 20px 18px;
	text-indent: -9999px;
	min-width: 24px;
	margin-left: 0px;
	margin-right: 0px;
	}

.nav > li .nav-large,
.nav > li .subnav-large {
	display: block;
	}

.nav > li .nav-small,
.nav > li .subnav-small {
	display: none;
	}

.nav > li span > a,
.nav > li > a {
	color: #fff;
	font-size: 1em;
	text-transform: uppercase;
	line-height: 3em;
	padding:0 0.7em 0 0.7em;
	display: inline-block;
	position: relative;
	z-index: 100;
	text-decoration:none;
	}

.nav > li:first-child > a {
	height: 3em;
	display: block;
	}

.nav li .nav-submenu {
	position: absolute;
	left: 0;
	top: 100%;
	width: 100%;
	background:#b1b1b1;
	border-top: 1px solid #fff;
	display:none;
	}

.nav > li.nav-open				{ background:#ff4100; }
.nav > li.nav-open a			{ color:#fff; }
.nav > li.nav-open .nav-submenu {
	z-index: 1000;
	display:block;
	}

.nav > li.nav-open:first-child	{ background-color: transparent; }


/* crumb */
.navcrumb {
	list-style: none;
	padding-top: 8px;
	padding-bottom: 8px;
	overflow: hidden;
	}

.navcrumb li {
	float: left;
	line-height: 26px;
	}

.navcrumb li a {
	border-right: 1px solid #b1b1b1;
	font-size: 0.9em;
	color: #323232 !important;
	text-decoration: none;
	padding: 0px 8px 0px 8px;
	display: block;
	float: left;
	}

.navcrumb li a:hover			{ color: #fff !important; }

.navcrumb li:first-child a,
.navcrumb li:nth-child(2) a {
	background: #ddd;
	border: 0;
	font-size: 0.8em;
	color: #ff4100 !important;
	padding: 0 10px 0 15px;
	}

.navcrumb li:first-child a		{ padding-left: 10px; }
.navcrumb li:nth-child(3)		{ padding-left: 18px; }

.navcrumb li:first-child a::after,
.navcrumb li:nth-child(2) a::after {
	position: relative;
	display: block;
	margin-top: -13px;
	margin-left: auto;
	margin-right: -15px;
	height: 13px;
	width: 10px;
	content: " ";
	-webkit-transform: skew(-30deg);
	background: #ddd;
	border-right: 1px solid #b1b1b1;
	-moz-transform: skew(-30deg);
	-o-transform: skew(-30deg);
	transform: skew(-30deg);
	}

.navcrumb li:first-child a::before,
.navcrumb li:nth-child(2) a::before {
	float: right;
	display: block;
	margin-bottom: -13px;
	margin-left: auto;
	margin-right: -15px;
	height: 13px;
	width: 10px;
	content: " ";
	-webkit-transform: skew(30deg);
	background: #ddd;
	border-right: 1px solid #b1b1b1;
	-moz-transform: skew(30deg);
	-o-transform: skew(30deg);
	transform: skew(30deg);
	}

.navcrumb li:last-child a		{ border: 0; }


/* --------------------------------------- */
/* TABLET - mediaqueries css */
/* --------------------------------------- */

/* screens */
@media only screen and (max-width: 1152px) {

	.nav-wrapper .nav			{ max-width: 964px; }

	.nav > li span > a,
	.nav > li > a {
		font-size: 0.9em;
		padding:0 0.65em 0 0.65em;
		}

}

/* notebooks, tablets */
@media only screen and (max-width: 1024px) {

	.nav-wrapper .nav			{ max-width: 900px; }

	.nav > li .nav-large,
	.nav > li .subnav-large {
		display: none;
		}

	.nav > li .nav-small,
	.nav > li .subnav-small {
		display: block;
		}

	.navcrumb li:nth-child(4)	{ padding-left: 18px; }

}

/* notebooks, tablets */
@media only screen and (max-width: 960px) {

	.nav-wrapper .nav			{ max-width: 740px; }

	.nav > li span > a,
	.nav > li > a {
		font-size: 0.93em;
		}

	.navcrumb li:nth-child(4)	{ padding-left: 10px; }

}

/* ==> breakpoint notebooks, tablets */
@media only screen and (max-width: 800px) {

	.nav-wrapper .nav			{ max-width: 736px; }

	.nav > .special-buttons		{ display: none; }

	#menu-icon {
		display: block;
		/*line-height: 54px;*/
		line-height: 44px;
		margin-left: 20px;
		padding-left: 40px;
		cursor: pointer;
		}

	.nav-wrapper				{ background: #323232; position: static; display: block; }
	.nav-wrapper .nav-inner {
		position: relative;
		z-index: 100;
		width: 776px;
		margin: auto;
		}

	#nav {
		z-index: 10000;
		display: none;
		}

	.nav > li {
		display: block;
		padding:0em;
		}

	.nav > li:first-child {
		background: none;
		text-indent: 0px;
		min-width: 24px;
		margin-left: 0;
		margin-right: 0px;
		}

	.nav > li .nav-large,
	.nav > li .subnav-large		{ display: block; }

	.nav > li .nav-small,
	.nav > li .subnav-small		{ display: none; }

	.nav > li > a				{ display: block; }

	.nav li .nav-submenu {
		left: 0;
		top: 4em;
		width: 100%;
		background: #b1b1b1;
		display: none;
		position: static;
		}

	.nav li .nav-submenu li.subnav-large {
		width: 100%;
		height:100%;
		display:block;
		}

	.nav-submenu .wrapper		{ padding: 0px; }

	.nav > li.nav-open {
		background: #ff4100;
		padding:0;
		}

	.nav > li.nav-open a		{ display: block; }

	/* crumb */
	.navcrumb li {
		float: none;
		line-height: 26px;
		}

	.navcrumb li a {
		border-right: 0px;
		padding: 5px 10px 5px 10px;
		display: block;
		float: none;
		}

	.navcrumb li:first-child a,
	.navcrumb li:nth-child(2) a {
		display: none;
		}

	.navcrumb li:nth-child(3)	{ padding-left: 0px; }

}

/* ==> breakpoint tablets */
@media only screen and (max-width: 768px) {

	.nav-wrapper .nav			{ max-width: 420px; }
	.nav-wrapper .nav-inner 	{ width: 460px; }

}

@media screen and (max-width:480px) {

	.nav-wrapper .nav			{ width: 300px; }
	.nav-wrapper .nav-inner 	{ width: 340px; }

}

/* mobiles */
@media only screen and (max-width: 360px) {

	.nav-wrapper .nav			{ max-width: 260px; }
	.nav-wrapper .nav-inner 	{ width: 300px; }

}