/* ---------------------------------------------------
Title: IDEENWERKSTATT TINTIFAX - Main Navigation CSS
Author: Pierpaolo Federici - IDEENWERKSTATT TINTIFAX

------------------- Color Palette --------------------

		orange	-	rgb(249,178,51);
		gray 	- 	rgb(177,167,158);

		NEW!!!
		gray 	- 	rgb(135,122,116);

*/



/* Main Navigation
–––––––––––––––––––––––––––––––––––––––––––––––––– */
	#nav-main 			{background-color: rgb(249,178,51); display: none;}
	#nav-main ul 		{margin: 0;}
	#nav-main li		{list-style: none; margin: 0;}
	#nav-main a 		{text-decoration: none; color: #fff; position: relative;}
	#nav-main a.main 	{font-size: 1.4em; cursor: pointer;}
	#nav-main span.border{display: none;}

	#nav-sub 			{display: none;}
	#nav-sub img 		{display: none;}

	#nav-main.compact ul li 		{border: 1px solid #fff; border-width: 1px 0px 1px 0px;}
	#nav-main.compact li a.main		{padding:10px 0 10px 7%; display: block;}
	#nav-main.compact ul li br 		{display: none;}
	#nav-main.compact ul ul li 		{border-width:1px 0; border-style: solid; border-color: rgb(249,178,51); padding:2px 0; background-color: rgba(255,255,255, 0.2);}
	#nav-main.compact li.head 		{font-size: 1.4em; padding-left: 10%;}
	#nav-main.compact li.head li 	{padding-left: 13%; margin-left: -10%;}
	#nav-main.compact li.head li a 	{color: rgb(219,138,0); font-size:0.9em;}

	#nav-main.compact #nav-sub 	{margin-top: 0px;}


/* Leftside Navigation
–––––––––––––––––––––––––––––––––––––––––––––––––– */
	#leftside-menu 			{margin-top: 5%;}
	#leftside-menu li 		{list-style: none; margin:0;}
	#leftside-menu li:first-child, 
	#leftside-menu a		{background-color: rgb(253,235,196); color: rgb(249,178,51); font-weight: 700; text-decoration: none; display: block; font-size: 1em; padding:12px 0 12px 8%; line-height: 17px; border-bottom: 1px solid; transition: all 800ms ease;}
	#leftside-menu a:before {content:'>'; float: right; margin-right: 15px; font-size: 0.9em; transition: all 200ms;}
	#leftside-menu li:first-child {background-color: rgba(255,255,255, 0.2); color: #fff; font-size: 1.2em; font-weight: 300; padding-left: 0; text-align: center;} 
	#leftside-menu a:hover,
	#leftside-menu a.active {background-color: rgb(255,255,255); color: rgb(249,178,51);}
	#leftside-menu a.active:before {display: none;}
	#leftside-menu a:hover:before {margin-right: 10px;}
	
	/* toggler (Hamburger) */
	.toggler	{width: 93%; cursor: pointer; background-color: rgb(177,167,158); color: #fff; padding:10px 0 10px 7%; font-size: 1.4em;}

	#nav-toggle {cursor: pointer; position: absolute; right:18%; margin-top:15px;}
	#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
	  cursor: pointer;
	  border-radius: 1px;
	  height: 5px;
	  width: 35px;
	  background: white;
	  position: absolute;
	  display: block;
	  content: '';
	}
	#nav-toggle span:before {
	  top: -10px; 
	}
	#nav-toggle span:after {
	  bottom: -10px;
	}

	#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
	  transition: all 500ms ease-in-out;
	}
	#nav-toggle.active span {
	  background-color: transparent;
	}
	#nav-toggle.active span:before, #nav-toggle.active span:after {
	  top: 0;
	}
	#nav-toggle.active span:before {
	  -webkit-transform: rotate(45deg);
	  -ms-transform: rotate(45deg);
	  transform: rotate(45deg);
	}
	#nav-toggle.active span:after {
	  -webkit-transform: rotate(-45deg);
	  -ms-transform: rotate(-45deg);
	  transform: rotate(-45deg);
	}




/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Larger than mobile */
@media (min-width: 400px) {

}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {


}

/* Larger than tablet */
@media (min-width: 750px) {
	#nav-main 				{width: 100%; display: block;}
	#nav-main a 			{color: rgb(135,122,116);}
	#nav-main a.main		{float:left; text-decoration: none; height: 35px; padding:60px 11px 0 7px; font-size:0.9em; overflow: hidden;}
	#nav-main a.main:hover 	{color: rgb(249,178,51);}

	#nav-main span.icon		{position: absolute; z-index: -1; display: block; margin:auto; top: 0; left: 0; right: 0; width: 75px; height: 190px; background: url('../images/menu/main-menu-icons.svg'); background-size: 300px 190px;}
	#nav-main span.border 	{display:block; right: 0; top: -15px; position: absolute; width: 2px; height:100%; background: url('../images/menu/border.png') no-repeat 0 100%;}

	#nav-main li a.first .icon 	{background-position: 0px 0px;}
	#nav-main li a.second .icon {background-position: -75px 0px;}
	#nav-main li a.third .icon 	{background-position: -150px 0px;}
	#nav-main li a.fourth .icon {background-position: -225px 0px;}

	#nav-main .contact-mob, #nav-main .shop {display: none;}
	.toggler 	 				{display: none;}

	#nav-sub	{position: absolute; margin-top: 105px; z-index: 20; font-size: 1.1em; background-color: #fff; border:1px solid rgb(249,178,51); border-top: 3px solid rgb(249,178,51);
				-webkit-box-shadow: 0px 1px 5px 0px rgba(50, 50, 50, 0.35);
				-moz-box-shadow:    0px 1px 5px 0px rgba(50, 50, 50, 0.35);
				box-shadow:         0px 1px 5px 0px rgba(50, 50, 50, 0.35);}

	#nav-sub.right {right:3%;}
	#nav-sub.right-margin {right: 14%;}

	#nav-sub ul 		{margin:20px; float: left;}
	#nav-sub li.head::before{content: url('../images/list-square.png'); margin: -1px -20px 0;  position: absolute;} /* square symbol */
	#nav-sub li.head 	{font-weight: bold; padding-left: 20px;}
	#nav-sub li 		{line-height: 1.2em; margin:10px 0;}
	#nav-sub ul ul 		{margin:8px 0 0; float: none;}
	#nav-sub ul ul li 	{font-size: 1.05em; font-weight: normal; margin:5px 0; padding-left: 15px;}
	#nav-sub ul ul li::before{content: '\003E'; font-size: 0.8em; position: absolute; margin-left: -15px; color:rgb(177,167,158);}

	/* image */
	#nav-sub img 	{float: right; height: 120px; margin: 30px 10px 20px 20px; display: none;}

	/* hover */
	#nav-sub a:hover,
	#nav-sub ul ul li:hover::before	{color:rgb(249,178,51);}
	#nav-sub li.head:hover::before 	{content: url('../images/list-square-full.png');}

	a.third + div.right  {margin-right: 80px;}



/* Leftside Navigation
–––––––––––––––––––––––––––––––––––––––––––––––––– */
	#leftside-menu  			{font-size: 0.85em;}
	#leftside-menu a:before 	{display: none;}
	#leftside-menu.standort		{margin-top: 30%;}
	#leftside-menu.wohnen-leben	{margin-top: 10%;}
	#leftside-menu.service-infos{margin-top: 10%;}
	#leftside-menu.service-infos a {padding:11px 0 11px 8%;}
	#leftside-menu.karriere-ausbildung	{margin-top: 26%;}
	#leftside-menu.spenden-helfen {margin-top: 40%;}

	@media (max-width: 1200px) {
		#leftside-menu.wohnen-leben	a{
			padding-top: 10px;
			padding-bottom: 10px;
		}
	}


	/*
	#leftside-menu.service-infos{margin-top: 0;}
	#leftside-menu.service-infos li:first-child {background-color: rgb(177,167,158);}
	#leftside-menu.service-infos a {background-color: rgba(177,167,158, 0.5); color: rgb(130,130,130);}
	#leftside-menu.service-infos a:hover,
	#leftside-menu.service-infos a.active {background-color: rgba(177,167,158, 0.3); color: rgb(100,100,100);}
	*/


	.contrast-black #nav-sub {background-color: #000;}
	.contrast-black #nav-sub a {color: #fff;}
	.contrast-black #leftside-menu a {background-color: #000;}
}

/* Larger than desktop */
@media (min-width: 1000px) {
	#nav-main a.main 			{height: 35px; padding:60px 27px 0 27px; font-size: 1em;}
	#nav-main li a.first .icon 	{background-position: 0px 0px;}
	#nav-main li a.second .icon {background-position: -75px 0px;}
	#nav-main li a.third .icon 	{background-position: -150px 0px;}
	#nav-main li a.fourth .icon {background-position: -225px 0px;}

	#nav-main img 	{display: block;}

	#leftside-menu  			{font-size: 0.9em;}
	#leftside-menu a:before 	{display: block;}
}

/* Larger than Desktop HD */
@media (min-width: 1200px) {
	#nav-main 					{margin-top: 3px;}
	#nav-main a.main 			{height: 60px; padding:35px 25px 0 65px;}
	#nav-main span.icon 		{right: auto;}
	#nav-main li a.first .icon 	{background-position: 0px 0px;}
	#nav-main li a.second .icon {background-position: -75px 0px;}
	#nav-main li a.third .icon 	{background-position: -150px 0px;}
	#nav-main li a.fourth .icon {background-position: -225px 0px;}

	#nav-main img 	{height: 220px;}

}