@import (less) "variables.less";
@import (less) "standards.less";
@import (less) "cssloader.less";

#main-navbar{
	background-color: lighten(@main-color, 3%);
	font-family: @sec-font;
	font-size: @font-size-h4;
	text-transform: uppercase;
	position: relative;
	color: @font-white;
	padding: 10px 0;
	font-weight: 300;

	ul{

		li{
			float: left;

			a{
				display: block;
				line-height: 40px;
				padding: 0 20px;

				&:hover{
					color: @sec-color;
				}
			}

			&.home{
				font-size: @font-size-large;
				a:hover{
				}
			}
			&:last-child{
				background-color: @sec-color;

				a:hover{
					color: @main-color;
				}
			}
			ul{
				display: none;
			}
		}
		&#mobile-main-nav{
			display: none;
		}
	}
	.open-menu{
		display: none;
		line-height: 40px;
		padding: 0 20px;
		cursor: pointer;

			a:hover{
				background-color: lighten(@main-color, 10%);
			}
	}
	.open-subcat{
		display: none;
	}
}
#mobile-nav-d{
	display: none;
}
#main-nav{
	font-family: @sec-font;
	ul{
		line-height: 30px;

		li{
			a{
				display: block;
				padding: 0 10px;

				&:hover{
					color: @main-color;
				}
			}
			ul{
				display: none;
			}

			&.active{
				a{
					color: @main-color;
				}
				> ul{
					display: block;
					li{
						a{
							color: @stan-color;

							&:hover{
								color: @sec-color;
							}
						}
						&.active{
							a{
								color: @sec-color;
							}
							> ul{
								li{
									a{color: @stan-color;}

									&.active{
										a{
											color: @sec-color;
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
	.open-subcat{
		display: none;
	}
}
.main-banner-slider{
	border: 4px solid @main-color;
}
.main-banner-slider, .main-banner-slider.owl-theme{
	position: relative;
	.banner-text{
		font-family: @sec-font;
		position: absolute;
		right: 0;
		left: 0;
		top: 50%;
		text-align: center;
		color: @font-white;
		text-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
		-webkit-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	.owl-controls{
		margin: 0;
		.owl-buttons{
			font-size: @font-size-h1;
			>*{
				display: inline-block;
				font-family: 'FontAwesome';
				font-feature-settings: normal;
				font-kerning: auto;
				font-language-override: normal;
				font-size: inherit;
				font-size-adjust: none;
				font-stretch: normal;
				font-style: normal;
				font-synthesis: weight style;
				font-variant: normal;
				font-weight: normal;
				line-height: 1;
				text-rendering: auto;
			}
			.owl-prev{
				left: 0;
			}
			.owl-next{
				right: 0;

			}
			.owl-prev:before{
				content:"";
			}
			.owl-next:before{
				content:"";
			}
			div{
				position: absolute;
				background: none;
				top: 50%;
				margin: 0;
				-webkit-transform: translateY(-50%);
				-moz-transform: translateY(-50%);
				-ms-transform: translateY(-50%);
				-o-transform: translateY(-50%);
				transform: translateY(-50%);
			}
		}
	}
}
.view-mode{
	>*{
		float: left;
		margin-right: 10px;

		&:last-child{
			margin-right: 0;
		}
	}
}
.frame{
	.panel{
		display: none;

		&.open{
			display: block;
		}
	}
}
.button-group{
	.btn{
		padding: 8px 30px;
		margin-bottom: 20px;

		&:last-child{
			margin-bottom: 0;
		}
	}
	.row{
		>*{
			margin-bottom: 20px;

			&:last-child{
				margin-bottom: 0;
			}
		}
	}
}
.ico-btn{
	font-size: @font-size-h3;
	text-align: center;
	color: @main-color;
	.transition(color);
	i{
		text-align: center;
		width: 100%;

		span{
			display: inline-block;
			padding-left: 10px; 
			font-family: @sec-font;
			font-size: @font-size-h4;
		}
	}

	&:hover{
		color: @font-color;
	}
}
#header{
	background-color: @main-color;
	#main-header{
		padding: 20px 0;
	}
	#subhead{
		background-color: darken(@main-color, 5%);
		color: @font-white;
		font-size: @font-size-small;
		padding: 5px;

		.recall{
			//background-color: @sec-color;
			color: @sec-color;
			padding: 5px;
			font-weight: bold;
		}
	}
	#logo{
		
	}
	#logo-claim{
		position: absolute;
		right: 15px;
		bottom: 0;
	}
	#search{
		position: relative;
		padding: 15px 0;
		.input-group{
			position: relative;

			input{
				height: 36px;
				width: 100%;
			}
			.btn{
				width: 36px;
				height: 36px;
				position: absolute;
				right: 0;
				top: 0;
			}
		}
	}
	#cart-sm{
		font-family: @sec-font;
		padding: 15px 0;
		span{
			display: block;
		}
		.ico-cart{
			position: relative;


			span{
				position: absolute;
				.br(10px);
				height: 20px;
				width: 20px;
				text-align: center;
				top: 14px;
				left: 13px;
				background-color: @white-base;
				font-weight: 800;
			}
			i{
				font-size: 36px;
				color: @main-color;
			}
		}
		.cart-total{
			font-weight: 800;

			.price{
				color: @main-color;

			}
		}
	}
}
.collateral{
	padding: 40px 0 0;
}
.price-info{
	font-size: @font-size-small;
	color: @gray-light3;
}
#main{
	padding: 20px 0 60px;

	&.start{
		padding: 0;
	}
	.welcome{
		background-color: @sec-color;
		font-size: @font-size-large;
		color: @font-white;
		text-align: center;
		padding: 30px;

		.headline{
			
		}
		p{
			padding-bottom: 20px;

			&:last-child{
				padding-bottom: 0;
			}
		}
	}
	iframe{
		width: 100% !important;
	}
	.informations{
		margin-top: 40px;
		border-top: 3px solid @main-color;
		padding: 40px 0;
		text-align: center;
		.image{
			border: 4px solid @main-color;
			margin-bottom: 30px;
			img{
				width: 100%;
			}
		}
		.info-theme{
			font-size: @font-size-h2;
			color: @sec-color;
			padding: 10px;
		}
		.info-btn{
			display: block;
			background-color: @neutral-color;
			padding: 50px;
			font-size: @font-size-large;
			.br(4px);

			&:hover{
				color: @font-white;
				background-color: @sec-color;
			}
		}
		.row{
			> div{
				margin-bottom: 60px;
			}
		}
	}
	.referenzen-prod-bild{
		display: block;
		position: relative;
		z-index: 1;
		.hovere{display: none;}
		&:hover{
			.hovere{
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: @rgba-sec-08;
				z-index: 2;
		
				.ht{
					position: absolute;
					font-size: @font-size-h2;
					text-align: center;
					font-weight: 300;
					text-transform: uppercase;
					color: @font-white;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%); 
				}
			}
		}
	}
}
#event{
	.panel-frame{
		.panel{
			display: none;
			&.open{
				display: block;
				padding: 20px;
			}
			> p{
				padding-bottom: 30px;
			}
		}
		&:nth-child(2n){
			.panel.open{background-color: lighten(@neutral-color, 10%);}
		}
		&:nth-child(2n+1){
			.panel.open{background-color: lighten(@neutral-color, 8%);}
		}
		.autodaten{
			background-color: @white-base;
			padding: 10px;
			-webkit-box-shadow: 0 0 4px 0 @rgba-black-base-02;
			box-shadow: 0 0 4px 0 @rgba-black-base-02;
		}
		.headline{
			padding-top: 0;
		}
		.image{
			text-align: center;
			padding: 10px;
		}
	}
	.type{
		display: none;

		&.open{
			display: block;
		}
	}
	.info-txt{
		background-color: lighten(@sec-color, 30%);
		border: 1px solid @sec-color;
		.br(5px);
		padding: 10px;
		color: @sec-color;

		.headline.h4{
			padding: 0;
			font-weight: bold;
			font-size: @font-size-base;
		}
		p{
			&:last-child{
				padding-bottom: 0;
			}
		}
	}
}
#footer{
	background-color: @main-color;
	padding: 10px;
	color: @font-white;

	.row{

		&:first-child{
			padding-top: 0;
		}
		&:last-child{
			padding-bottom: 0;
		}
	}
	.pipe-menu{
		text-align: center;

		li{
			a{
				&:hover{color: @sec-color;}
			}
		}
	}
	.copy{
		padding: 5px 0;
		font-family: @sec-font;

		em{
			font-style: normal;
		}
		a{
			text-decoration: underline;
			&:hover{
				text-decoration: none;
			}
		}
	}
}
@media (min-width: @screen-desktop){
	#main-nav{
		ul{

			li{
				a{
					padding: 0 10px;
				}
				ul li{
					a{
						padding: 0 20px;

						&:before{
							content:"-";
							margin-right: 10px;
						}
					}
					ul li{
						a{
							padding: 0 30px;
						}
						ul li{
							a{
								padding: 0 40px;
							}
						}
					}
				}
			}
		}
	}
}
@media (min-width: @screen-lg-desktop){

}
// viewport 0px - 959px
@media (min-width: 0px) and (max-width: @screen-sm-max){
	#main-nav{
		display: none;
	}
	#mobile-nav-d{
		display: block;
		position: static;
	}
	#mobile-nav{

		.open-menu{
			text-align: center;
			line-height: 50px;
			padding: 0 20px;
			cursor: pointer;

			a:hover{
				background-color: lighten(@main-color, 10%);
			}
		}
	}
	#mobile-nav-layer{
		display: block;
		background-color: @main-color;
		position: fixed;
		z-index: 100;
		bottom: 0;
		top: 0;
		left: -70%;
		width: 70%;

		&.active-menu{
			-webkit-box-shadow: 10px 0 0 0 @rgba-black-base-02;
			box-shadow: 10px 0 0 0 @rgba-black-base-02;
		}

		.headline{
			padding: 10px;
			background-color: darken(@main-color, 10%);
			color: @font-white;
			position: fixed;
			width: 70%;
			z-index: 101;
		}
		.open-subcat{
			display: none;
		}
		&.open{
			background-color: @neutral-color;
		}
		.open-menu{
			cursor: pointer;
			i{margin-right: 10px;}
		}
		.scroll{
			overflow-y: auto;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			padding-top: 62px;

			.mCSB_dragger_bar{
				background-color: fade(@sec-color, 50%);

				&:hover{
					background-color: @sec-color;
				}
			}
			ul.group{
				color: @font-white;
				padding: 5px;

				.home{
					display: none;
				}
				ul{
					display: none;
				}

				li{
					border-bottom: 1px solid lighten(@main-color, 8%);

					&:hover{
						background-color: lighten(@main-color, 2%);

						li{
							background-color: transparent;
						}
					}

					&:last-child{
						border-bottom: none;
					}

					a{
						float: left;
						width: 80%;
					}
					.open-subcat{
						display: block;
						float: left;
						width: 20%;
						text-align: right;
						padding: 11px;
						font-size: 18px;
						cursor: pointer;
					}
					> ul{
						clear: left;
						li{
							background-color: darken(@main-color, 2%);
							a{
								padding-left: 20px;
							}

							ul li{
								color: @font-white;
								a{
									padding-left: 30px;
								}
								ul li{
									a{
										padding-left: 40px;
									}
									ul li{
										a{
											padding-left: 50px;
										}
									}
								}
							}
						}
					}
					a{
						line-height: 1;
						padding: 15px 5px;
					}
					&:after {
						visibility: hidden;
						display: block;
						content: "";
						clear: both;
						height: 0;
					}
				}
			}
		}
		ul{
			display: table;
			table-layout: fixed;
			width: 100%;

			a{
				display: table-cell;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				word-break: break-all;
				word-wrap: break-word;
			}
		}
	}
	#main-navbar{

		&.open{
			background-color: @neutral-color;
		}
		.open-menu{
			display: block;
		}
		.container > ul{
			display: none;
			position: absolute;
			top: 40px;
			left: 0;
			right: 0;
			z-index: 100;
			background-color: @white-base;
			padding: 15px;
			border-bottom: 6px solid @main-color;
			-webkit-box-shadow: 0 10px 0 0 @rgba-black-base-02;
			box-shadow: 0 10px 0 0 @rgba-black-base-02;

			.home{
				display: none;
			}

			li{
				float: none;
				border-bottom: 1px solid @gray-light3;

				&:last-child{
					border-bottom: none;
				}

				a{
					float: left;
					width: 80%;
				}
				.open-subcat{
					display: block;
					float: left;
					width: 20%;
					text-align: right;
					padding: 11px;
					font-size: 18px;
					cursor: pointer;
				}
				> ul{
					clear: left;
					
					
					li{
						background-color: @neutral-color;
						a{
							padding-left: 20px;
						}

						ul li{
							a{
								padding-left: 30px;
							}
							ul li{
								a{
									padding-left: 40px;
								}
								ul li{
									a{
										padding-left: 50px;
									}
								}
							}
						}
					}
				}
				a{
					line-height: 1;
					padding: 15px 0;
				}
				&:after {
					visibility: hidden;
					display: block;
					content: "";
					clear: both;
					height: 0;
				}
			}
		}
		ul{
			display: table;
			table-layout: fixed;
			width: 100%;

			a{
				display: table-cell;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				word-break: break-all;
				word-wrap: break-word;
			}
		}
	}
}
@media (min-width: @screen-desktop){
	#main-navbar{
		.container > ul{
			display: block !important;
		}
	}
	#mobile-nav-d{
		display: none !important;
	}
	#mobile-nav-layer{
		display: none !important;
		left: -70% !important;
	}
}
// viewport 960px - 1199px
@media (min-width: @screen-desktop) and (max-width: @screen-md-max){

}
// viewport 768px - 959px
@media (min-width: @screen-tablet) and (max-width: @screen-sm-max){
}
// viewport 0px - 767px
@media (max-width: @screen-xs-max){
	#header{
		#logo{
			text-align: center;
		}
		#logo-claim{
			display: none;
		}
		#subhead{

			.support{
				text-align: center;
			}
			.shop-links{
				text-align: center;
				ul{
					float: none;
				}
			}
		}
	}
	#main{
		.welcome{
			margin-bottom: 30px;
			font-size: @font-size-base;
		}
		.informations{
			.image{

			}
		}
	}
	ul.tabs{
		li{
			height: 52px;
			float: none;
			margin: 0 0 1px 0;
		}
	}
}
@media (max-width: @screen-phone){

}