/* HEADER */
header {
	background-color:#0082c8;
	font-size:0;
	padding:0 100px;
}

header div.contentBox {
	position:relative;
	width:100%;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-flow: row nowrap;
	padding:20px 0;
}

header div.contentBox .contentBoxLeft #logoBox {
	position:relative;
	width:300px;
}
header div.contentBox .contentBoxLeft #logo img {
	display:inline-block;
	width:100%;
	max-width:100%;
	height:auto;
}

header .trenner {
	display:block;
	background-color:#80b9d7;
	width:1px;
	height:25px;
	margin:0 5px;
	float:left;
}

header div.contentBox .contentBoxRight {
	flex:1 1 100%;
}

header div.contentBox .contentBoxRight .contentBoxRightTop {
}

/*  Sprachwahl */
#sprachwahlBox {
	font-family: 'Roboto Condensed', sans-serif;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-end;
}

header div.contentBox .contentBoxRight .contentBoxRightBottom {
	display: flex;
	justify-content: flex-end;
}

header .menuButton {
	background-position:center;
	background-repeat:no-repeat;
	background-size:20px;
	margin-top:2px;
	width:20px;
	height:20px;
	float:right;
	display:block;
	cursor:pointer;
	padding:0 6px;
}
header #headSearchButtonPop {
	background-image:url('/page/_webpics/buttons/lupe-search.svg');
}

#sprachwahlBox .sprachwahl a {
	font-size:13pt;
	line-height:25px;
	display:inline-block;
	margin:0 5px 0 5px;
	color:#9ecbe6;
}
#sprachwahlBox .sprachwahl.akt a, #sprachwahlBox .sprachwahl a:hover  {
	color:#fff;
}

#headerTopBox {
	position: relative;
	overflow: hidden;
}


#shopButton {
	position:absolute;
	display:block;
	right:0;
	top:40px;
	z-index:1000;
	width:120px;
}
#shopButton img {
	width:100%;
	height:auto;
}

#onlineButton {
	position:absolute;
	display:block;
	right:0;
	top:180px;
	z-index:1000;
	width:120px;
}
#onlineButton img {
	width:100%;
	height:auto;
}

#homeButton, #homeZollButton, #backButton {
	position:absolute;
	width:107px;
	height:107px;
	display:block;
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	z-index:100;
	left:50%;
	right:50%;
	margin-left:-53px;
	bottom:-53px;
}

#homeButton.buttonDE {
	background-image:url('/page/_webpics/buttons/kontakt-button-DE.svg');
}
#homeButton.buttonFR {
	background-image:url('/page/_webpics/buttons/kontakt-button-FR.svg');
}
#homeButton.buttonIT {
	background-image:url('/page/_webpics/buttons/kontakt-button-IT.svg');
}

#homeZollButton {
	background-image:url('/page/_webpics/buttons/zoll-authorized-distributor-button.png');
}
#backButton.backbuttonDE {
	background-image:url('/page/_webpics/buttons/back-button-DE.png');
}
#backButton.backbuttonFR {
	background-image:url('/page/_webpics/buttons/back-button-FR.png');
}
#backButton.backbuttonIT {
	background-image:url('/page/_webpics/buttons/back-button-IT.png');
}

/* BOX OVERLAYS */
#kapitelbild::after,
.intro.video-container::after {
	content:"";
	position: absolute;
	top:0;
	right:0;
	left:0;
	bottom:0;
	background:black;
	z-index:1;
	opacity: .3;
}
#kapitelbild {
	position:relative;
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	height:500px;
}


#headPicSurround {
	position:relative;
}



/* RESPONSIVE */
@media  only screen and (max-width: 1620px) {
	header {
		padding:0 50px;
	}
}

@media  only screen and (max-width: 1000px) {
	header {
		padding:0 20px;
	}
	header div.contentBox .contentBoxLeft #logoBox {
		width:395px;
	}
}

@media  only screen and (max-width: 710px) {
	header div.contentBox .contentBoxLeft #logoBox {
		margin:0 auto;
		width:395px;
	}
	header div.contentBox {
		flex-flow: row wrap;
	}
	header div.contentBox .contentBoxLeft {
		flex:1 1 100%;
	}
	header div.contentBox .contentBoxRight {
		display:flex;
		flex:1 1 100%;
	}
	#sprachwahlBox {
		justify-content: center;
	}
}

@media  only screen and (max-width: 945px) {
	#homeButton, #homeZollButton, #backButton {
		width:80px;
		height:80px;
		margin-left:-40px;
		bottom:-40px;
	}
	#kapitelbild {
		height:300px;
	}
}
@media  only screen and (max-width: 630px) {
	#shopButton {
		top:15px;
		width:80px;
	}
	#onlineButton {
		top:100px;
		width:80px;
	}
	#homeButton, #homeZollButton, #backButton {
		width:60px;
		height:60px;
		margin-left:-30px;
		bottom:-30px;
	}
	#kapitelbild {
		height:200px;
	}
}
@media  only screen and (max-width: 500px) {
	#shopButton {
		top:15px;
		width:60px;
	}
	#onlineButton {
		top:80px;
		width:60px;
	}

	header div.contentBox .contentBoxLeft #logoBox {
		margin:0 auto;
		width:300px;
	}
}