header {
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
	position: relative;
	z-index: 1001;
}



header .bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	background-color: transparent;
	box-shadow: none;
	padding: 0.7rem 0;
}



header .bar .infos {
	display: flex;
	align-items: center;
}

header .bar .infos.infos-left { justify-content: flex-start; }
header .bar .infos.infos-left .item { margin-right: 0.8rem; }

header .bar .infos.infos-right { justify-content: flex-end; }
header .bar .infos.infos-right .item { margin-left: 0.8rem; }

header .bar .item {
	color: #333;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: pointer;
}


header .bar .item:hover { color: #000; }


header .bar .item:after {
	display: block;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 0.55em;
}

header .bar .item.quicksearch {
	background-color: #b5163f;
	color: #FFF;
	font-weight: bold;
	padding: 0.2rem 0.3rem;
}

header .bar .item.quicksearch:after { content: "Suchen & Buchen"; }
header .bar .item.favorites:after { content: "Planer"; }
header .bar .item.webcam:after { content: "Erlebnisse"; }
header .bar .item.login:after { content: "Login"; }
header .bar .item.cart:after { content: "Warenkorb"; }

/* Übersetzungen */
header:lang(en) .bar .item.quicksearch:after { content: "Booking"; }
header:lang(en) .bar .item.cart:after { content: "Cart"; }
header:lang(en) .bar .item.webcam:after { content: "Adventures"; }


header .bar .item i { font-size: 1.25em; margin-bottom: 0.2rem; }


header .bar .item.red i { color: #b5163f; }

header .bar .item .counter { display: none; }
header .bar .item.red .counter {
	display: block;
	position: absolute;
	top: 15px;
	left: 11px;
	background-color: #b5163f;
	color: #FFF;
	font-size: 10px;
	font-weight: bold;
	padding: 1px 4px;
	border-radius: 3px;
}

header .bar .infos { 
	flex-grow: 1;
	flex-shrink: 0;
	min-width: 30%;
	max-width: 30%;
}
header .bar .logo_wrapper { 
	flex-grow: 1;
	flex-shrink: 0;
	min-width: 40%;
	max-width: 40%;
}

header .bar a.logo { 
	display: block;

	margin: 0 auto;
	width: 90%;
	z-index: 1;	
	background-color: #b5163f;
	-webkit-print-color-adjust: exact;
	padding: 0.7rem 0.6rem 0.3rem 0.6rem;
	border-radius: 0.2em;
}



/* Scroll */


body.scrolled header { 
	position: absolute;
	top: 0;
	left: auto;
	right: auto;
	margin-top: 0em;
}


body.scrolled.header-transitions header {
	position: fixed;
	left: 0;
	right: 0;
}

body.scrolled header .bar {
	background-color: #F6F6F6;
	padding: 0.7rem 1.5rem;
	box-shadow: 0 .6rem 2rem -.03rem rgba(0,0,0,0.3);
}
body.scrolled header .bar .item::after { display: none; }


#body.scrolled header .bar a.logo {
	width: 141px;
	padding: 7px 14px 0px 12px;
}



/* Cart */

#header-cart {
	position: absolute;
	right: 0px;
	top: 22px;
}

#cart-sum {
	color: #000;
	/*font-size: 19px;*/
	line-height: 23px;
	/*line-height: 28px;*/
	
	/*padding-left: 40px;*/

	height: 28px;
	cursor: pointer;
	background-size: 17px auto;
	background-position: top 2px left 0;
	padding-left: 25px;
}

#cart-sum i { margin: 0 5px 0 0; font-size: 21px; }

#cart-text {
	color: #000;
	display: none;
}

#cart-content {
	box-sizing: content-box;
	z-index: 10000;
	position: absolute;
	top: 55px;
	right: 0px;
	width: 450px;
	background-color: #FFFFFF;
	box-shadow: 1px 1px 5px rgba(0,0,0,0.3);
	-webkit-transition: max-height 250ms;
	-moz-transition: max-height 250ms;
	transition: max-height 250ms;
	max-height: 0;
	overflow:hidden;
}

#cart-content.open { 
	max-height: 500px;
	padding: 20px; 
	-webkit-transition: max-height 500ms;
	-moz-transition: max-height 500ms;
	transition: max-height 500ms;
}

#cart-content .close {
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
	font-size: 22px;
	line-height: 22px;
	background-color: #000; 
	color: #fff;
	text-align: center;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	width: 22px;
	height: 22px;
}

#cart-button-next { float: right; background-color: #b5163f;  }

.cart-list {
	overflow-y: scroll;
	width: 450px;
	max-height: 400px;
	overflow-x: hidden;
	margin-bottom: 1em;
}
.cart-list .notification {
	padding: 20px 30px;
	text-align: center;
	border: 1px dashed rgba(0,0,0,0.1);
	font-size: 28px;
	line-height: 1.2;
	font-style: italic;
	color: #888;
	margin: 0 0 20px 0;
}

.cart-items h3 { display: none; }
.cart-item { position: relative; overflow: hidden;	margin: 0px 0px 10px 0px;	padding: 10px 0px 0px 0px;	border-top: 1px solid rgba(0,0,0,0.1); }
.cart-item .image { float: left; width: 20%; height: 60px; }
.cart-item .image img { width: 100%; height: auto; }
.cart-item .info { float: left; width: 50%; padding-left: 15px; font-size: 13px; font-size: 15px; }
.cart-item .info h5 { color: #666666; font-size: 12px; font-weight: normal; margin: 0px 0px 2px 0px; }
.cart-item .info h4 { color: #000; font-size: 14px; font-weight: normal; margin: 2px 0px 1px 0px; }
.cart-item .info .details { color: #666666; font-size: 12px; line-height: 1.1;  }
.cart-item .info .period { color: #666666; font-size: 12px; line-height: 1.1;  }
.cart-item .info .facts { color: #666666; font-size: 12px; line-height: 1.1;  }
.cart-item .info .inkl { color: #666666; font-size: 12px; line-height: 1.1; }
.cart-item .info .expires { color: #262; }
.cart-item .info .expires.expired { color: #966; }

.cart-item .price { float: left; width: 30%; font-size: 12px; line-height: 1.2; color: #666666; text-align: right; }
.cart-item .price .amount {
	font-size: 20px;
	line-height: 1.2;
	font-weight: bold;
	color: #BD2631;
}


.cart-item .items-remove { cursor: pointer; }
.cart-item .items-remove:hover { text-decoration: underline; }

#cart-items-container { margin: 20px 0 0 0; }



@media all and (min-width: 1024px) and (max-width: 1279px) {
	#header-cart { top: 19px; }
}

@media all and (min-width: 768px) and (max-width:1023px) {
	#header-cart { top: 16px; right: 60px; }

	#cart-sum {
		background-size: 18px auto;
		background-position: 0px 3px;
		padding-left: 30px;
	}
}

@media all and (min-width: 568px) and (max-width: 767px) {
	#header-cart { top: 14px; right: 60px; }


	#cart-sum {
		background-size: 18px auto;
		background-position: 0px 3px;
		padding-left: 30px;
	}
	header .bar .item.quicksearch:after { content: "Buchen"; }
}

@media all and (max-width: 567px) {
	#header-cart { top: 15px; right: 60px; }

	#cart-items-container { margin: 25px 0 0 0 !important; }

	#cart-sum {
		background-size: 18px auto;
		background-position: 0px 3px;
		padding-left: 30px;
	}

	#cart-content {
		background-color: #eee;
		box-sizing: border-box;
		position: relative;
		width: 100%;
		top: auto;
		left: auto;
		right: auto;
		box-sizing: border-box;
		box-shadow: none;
		padding: 0px 15px 0px 15px;
		margin: 0px -15px 0px -15px;
		width: calc(100% + 30px); 
		box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
	}

	#cart-content.open {
		padding: 0px 10px 20px 15px;
		margin: 0px -15px 0px -15px;
		width: calc(100% + 30px); 
		position: relative;
	}

	#cart-content .close { 
	    position: absolute;
	    top: 4px;
	    right: 4px;
	    font-size: 15px;
	    width: 18px;
	    height: 18px;
		line-height: 17px;
	}


	#cart-content .cart-items h5 { display: none; }
	#cart-content .cart-item .image { display: none; }
	#cart-content .cart-item .info { width: 70%; padding-left: 0px; }
	#cart-content .cart-item .image { display: none; }
	#cart-content .cart-item .price .amount { font-size: 16px; margin: 5px 0px; }

	.cart-list  { width: 100%; }
	.cart-list .notification { padding: 0px; font-size: 18px; margin: 0 0 15px 0; }

	header .bar .item.quicksearch:after { content: "Buchen"; }
}




.sidemenu {
	position: fixed;
	bottom: 2rem;
	z-index: 201;
	width: 14rem;
	background-color: #FFF;
	
	box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);

	border-radius: 0 1rem 1rem 0;

}

#rightmenu { right: -14rem; transition: right 250ms, box-shadow 250ms, background-color 250ms; border-radius: 1rem 0 0 1rem; }
#leftmenu { left: -14rem; transition: left 250ms, box-shadow 250ms, background-color 250ms; border-radius: 0 1rem 1rem 0;  }

@media (min-width: 350px) {
	.sidemenu { width: 16rem; }
	#rightmenu { right: -16rem; }
	#leftmenu { left: -16rem; }
}






.sidemenu .sidemenu_inner {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	/*padding-top: 1.5rem;*/
	padding-bottom: 1.5rem;
}


#rightmenu .sidemenu_inner { padding-left: 1rem; }
#leftmenu .sidemenu_inner { padding-right: 1rem; }



.sidemenu .close {
	position: absolute;
	top: 1.3em;
	right: 1.3em;
	font-size: 1.5em;
	cursor: pointer;
}



/* Boxen */
.sidemenu .box { font-size: 1rem; margin: 0 0 0 0; }
.sidemenu .box .headline {
	position: relative;
	margin: 0 0 .25em 0;
	padding-left: 1.5rem;
}
.sidemenu .box .headline i {
	position: absolute;
	top: 0;
	left: 0;
}


.sidemenu .box .content {
	font-size: 0.75em;
}

.sidemenu .box .content.new {
	font-size: 1.45rem;
	margin-left: 0.8rem;
}

.sidemenu .box .content.new ul li a { padding: 0.15em 0;}

.sidemenu .box a { color: #444; }
.sidemenu .box a:hover { color: #000; }

body.sidemenu-open #leftmenu {
	left: 0 !important;
	box-shadow: 4px 0px 38px 5px rgba(0,0,0,0.4);
}

.navstyling {
	font-size: 1.45rem;
	padding-top: 1.5rem;
}

#leftmenu .navstyling { padding-left: 0.7rem; }
#rightmenu .navstyling { padding-right: 0.7rem; }

.navstyling a { display: block; }

.navstyling ul li {
	margin: 0 0 0 0;
}

.navstyling ul li ul li a { position: relative; }
.navstyling ul li ul li a:before { 
	position: absolute;
	top: 0.65em;
	left: 1.75em;
	display: inline-block;
	content: "";
	background-color: #AAA;
	width: 4px;
	height: 4px;
	border-radius: 50%;
}

.navstyling ul li ul li a:hover:before {
	background-color: #b5163f;
	width: 5px;
	height: 5px;
	left: 1.7em;
} 

.navstyling ul li a { 
	text-decoration: none;
	color: #444;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
	padding-left: 1.2em;
}

.navstyling ul li a:hover { 
	color: #000;
}

.navstyling ul li ul {
	display: none;
	padding: 0 0 0.8em 0;
	font-size: 0.8em;
	line-height: 1.1em;
}

.navstyling ul li ul li {
	padding: 0 0 0 0;
}
.navstyling ul li ul li a {
	padding: 0.25rem 0 0.15rem 2.5em;
	line-height: 1.2;
}


.navstyling ul li.active > a { 
	color: #C40909;
	font-weight: 600;
}

.navstyling ul li.open > a { 
	font-weight: 600;
}

.navstyling ul li.open ul { display: block; }



body.sidemenu-right-open #rightmenu {
	right: 0 !important;
	box-shadow: 4px 0px 38px 5px rgba(0,0,0,0.4);
}


#rightmenu ul.nostyling li a { display: block; }



#rightmenu .TraminoMemoryButton {
	display: inline-flex;
	align-items: center;
	font-size: 0.7rem;
	padding: 0.2rem 0.3rem;
	border: 1px solid #333;
	color: #333;
	border-radius: .5rem;
	cursor: pointer;

}

#rightmenu .TraminoMemoryButton i { font-size: .9rem; padding-right: 0.5rem;}

#rightmenu .TraminoMemoryButton:hover { color: #b5163f; border-color: #b5163f; }



div:is(#leftmenu,#rightmenu) .extrainfos {
	color: #888;
	margin-top: 0.7rem;
	margin-left: 2.4rem;
}


div:is(#leftmenu,#rightmenu) .extrainfos a { display: block; padding-top: 0.2rem; padding-bottom: 0.2rem; }
div:is(#leftmenu,#rightmenu) .extrainfos .item i { margin-right: 0.5rem; }

div:is(#leftmenu,#rightmenu) .extrainfos form.open a.search {
	display: none;
}
div:is(#leftmenu,#rightmenu) .extrainfos .search_wrapper {
	display: flex;
	align-items: center;
	max-height: 0;
    /*transition: max-height 0.15s ease-out;*/
    overflow: hidden;
}

div:is(#leftmenu,#rightmenu) .extrainfos form.open .search_wrapper {
	max-height: 500px;
}

div:is(#leftmenu,#rightmenu) .extrainfos form.open .search_wrapper i {
	flex-shrink: 0;
	flex-grow: 0;
	margin-right: 0.5rem;
	color: #000;
}

div:is(#leftmenu,#rightmenu) .extrainfos form.open .search_wrapper input[type=text] {
	width: 100%;
	background-color: #EEE;
	border-width: 0;
	padding: 0.2rem 0.5rem;
	color: #000;
}


#rightmenu .extrainfos { margin-left: 1.8rem !important; }
div:is(#leftmenu,#rightmenu) .extrainfos a.item { color: #666; font-size: 0.9em; }
div:is(#leftmenu,#rightmenu).extrainfos a.item i { margin-right: 0.3rem; }
/*#rightmenu .extrainfos a { margin-left: -0.2rem; }*/




/* Mobile fixed */

header .sidemenu .item.mobile-fixed {
	display: flex; 
	justify-content: center;
	align-items: center;
	color: #FFF;
	cursor: pointer;
	margin: 0;
	flex-grow: 0;
	flex-shrink: 0;
	
	position: absolute;
	bottom: 3.5em;
	z-index: 5;

	width: 48px;
	height: 45px;
	font-size: 24.48px;

	background-color: #b5163f;
	
}

header .sidemenu .item.mobile-fixed i { margin: 0; font-size: 0.85em; }

header .sidemenu .item.mobile-fixed-left {
	right: -48px;
	border-radius: 0 0.6rem 0.6rem 0;
	box-shadow: -0.1em 0.1em 0.3em 0em rgba(0, 0, 0, 0.3);
	transition: left 250ms, border-radius 250ms;
}

header .sidemenu .item.mobile-fixed-right {
	left: -48px;
	box-shadow: -0.1em 0.1em 0.3em 0em rgba(0, 0, 0, 0.3);
	border-radius: 0.6rem 0 0 0.6rem;
	transition: right 250ms, border-radius 250ms;
}


body.sidemenu-open header .sidemenu .item.mobile-fixed-left {
	right: -24px;
	z-index: 1000;
	margin-right: 0;
	border-radius: 0.6rem;
	box-shadow: none;
}

body.sidemenu-right-open header .sidemenu .item.mobile-fixed-right { 
	left: -24px;
	z-index: 1000;
	margin-left: 0;
	border-radius: 0.6rem;
	box-shadow: none;
}



/*del */@media (min-width: 380px) {

	header .bar .item:after {
		font-size: 0.7em;
	}
	
	header .bar .item i { font-size: 1.35em; margin-bottom: 0.2rem; }

}


@media (max-width: 567px) {
	#body.scrolled header .maxwidth {
		margin-left: 0;
		margin-right: 0;
	}

	#rightmenu .extrainfos { margin-left: 1.8rem !important; }

}

@media (min-width: 567px) {
	

	#body.scrolled header .maxwidth {
		margin-left: 0;
		margin-right: 0;
	}
	

	header .bar a.logo { width: 211px; }

	header .bar .infos { 
		min-width: calc( (100% - 211px) / 2 );
		max-width: calc( (100% - 211px) / 2 );
	}
	header .bar .logo_wrapper { 
		min-width: 211px;
		max-width: 211px;
	}

	header .bar .item.quicksearch { padding: 0.4rem 0.8rem; }

	header .bar .item.favorites:after { content: "Urlaubsplaner"; }
	header:lang(en) .bar .item.favorites:after { content: "Holiday planner"; }


	.sidemenu {
		
		padding-bottom: 0;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}

	.sidemenu .box  { font-size: 0.9rem; }

	div:is(#leftmenu,#rightmenu) .extrainfos {margin-left: 1.9rem;}
	#rightmenu .extrainfos { margin-left: 1.2rem !important; }


}

@media (min-width: 768px) {

	#body.scrolled header .maxwidth {
		margin-left: auto;
		margin-right: auto;
	}
	
	#body header .bar { position: relative; }

	#body.scrolled header .bar {
		top: -7rem;
	}

	#body.header-transitions header .bar, #body.header-transitions-force header .bar {
		transition: top 250ms;
	}

	#body.header-transitions header .bar { top: 0; }
	#body.header-transitions-force header .bar { top: -7rem; }

	header .bar .infos.infos-left { justify-content: space-evenly;  }
	header .bar .infos.infos-right { justify-content: space-evenly; }



	body.scrolled header .bar {
		width: calc(100% - 120px);
		margin: 0 auto;
	}
	body.scrolled header .bar .item::after { display: block; }

	header .bar a.logo { 
		padding: 0.8rem 1rem 0.4rem 1rem;
	}

	.navstyling {
	    font-size: 1.15rem;
	    padding-top: 2rem;
	}

	.navstyling ul li ul {
		font-size: 0.8em;
	}

	.navstyling ul li ul li a { padding-bottom: 0.10rem; line-height: 1.1; }

	
	#leftmenu .extrainfos { margin-left: 1.2em; }
	.sidemenu .box .content.new ul li a { font-size: 1rem; }


	body.scrolled header { 
		top: 1.3rem;
	}

	header .wrapper {
		width: calc( 100% - 210px - 210px);
		max-width: 1240px;
		margin-left: auto;
		margin-right: auto;
	}
	header .bar { 
		border-radius: 0.6rem;
		margin-left: -30px;
		margin-right: -30px;
		padding-left: 30px;
		padding-right: 30px;
	}

	


	#body.scrolled header .sidemenu .item.mobile-fixed { display: flex; }


	header .sidemenu .item.mobile-fixed {
		top: 1.7rem;
		bottom: auto;
	}

	.sidemenu {
		top: 0px;
		bottom: auto;
		width: 13.5rem;
	}



	#leftmenu { left: -13.5rem; border-top-right-radius: 0px; }
	#rightmenu { right: -13.5rem; border-top-left-radius: 0px; }
	
	.sidemenu-open header .bar { position: relative; z-index: 200; box-shadow: none; }
	.sidemenu-right-open header .bar { position: relative; z-index: 200; box-shadow: none; }



}

@media (min-width: 1024px) {
	header .bar .item { flex-direction: row;  }
	header .bar .item i { margin: 0 0.3em 0 0; }

	.sidemenu {
		width: 15rem;
	}



	#leftmenu { left: -15rem; }
	#rightmenu { right: -15rem; }

}


@media (min-width: 1366px) {

	body.scrolled header .bar {
		width: 100%;
		margin: 0 auto;
	}

	header .bar .infos.infos-left { justify-content: flex-start; padding: 0;}
	header .bar .infos.infos-left .item { margin-right: 2rem; }
	header .bar .infos.infos-right { justify-content: flex-end; padding: 0;}
	header .bar .infos.infos-right .item { margin-left: 2rem; }

	header .sidemenu .item.mobile-fixed { width: 58px; height: 55px; }
	header .sidemenu .item.mobile-fixed i { font-size: 1.15em; }
	header .sidemenu .item.mobile-fixed-right { left: -58px; }
	header .sidemenu .item.mobile-fixed-left { right: -58px; }

	header .sidemenu .item.mobile-fixed i:after {
		display: block;
		position: absolute;
		bottom: -15px;
		color: #000;
		font-size: 0.6rem;
		font-family: 'Source Sans Pro', sans-serif;
		
	}
	header .sidemenu .item.mobile-fixed-right i:after {
		/* content: "Service"; */
		right: 9px;
	}

	header .sidemenu .item.mobile-fixed-left i:after {
		/* content: "Men\00FC"; */
		left: 9px;
	}

	body.sidemenu-open header .sidemenu .item.mobile-fixed i:after { display: none; }
	body.sidemenu-right-open header .sidemenu .item.mobile-fixed i:after { display: none; }
	
	
}

@media (min-width: 1700px) {

	body:not(.scrolled):not(.S8049) .sidemenu {
		display: block;
		background-color: transparent;
		box-shadow: none !important;
		/*padding-top: 5em;*/
		/*top: 0;*/
		top: 6.5rem;
		bottom: auto;
		z-index: 0;
		position: absolute;
		width: 210px;
		margin: 0;
		max-height: none;
		padding-left: 0;
		padding-right: 0;
	}



	body:not(.scrolled):not(.S8049) #leftmenu { left: 0; }
	body:not(.scrolled):not(.S8049) #rightmenu { right: 0; left: auto; }

	body:not(.scrolled):not(.S8049) header .sidemenu .item.mobile-fixed { display: none; }
	body.header-transitions-force header .sidemenu .item.mobile-fixed { display: flex; }

	#leftmenu { transition: none; }
	#rightmenu { transition: none; }

	#leftmenu .navstyling { padding-right: 0rem; }
	#rightmenu .navstyling { padding-left: 0rem; }

	header .sidemenu .item.mobile-fixed { width: 58px; height: 55px; }
	header .sidemenu .item.mobile-fixed i { font-size: 1.15em; }
	header .sidemenu .item.mobile-fixed-right { left: -58px; }
	header .sidemenu .item.mobile-fixed-left { right: -58px; }

	header .sidemenu .item.mobile-fixed i:after {
		top: 50%;
		bottom: auto;
		transform: translate(0, -50%);
		opacity: 0;
		transition: opacity 250ms;
		font-size: 0.9rem;
	}

header .sidemenu .item.mobile-fixed-right i:after {
	right: 68px;
}
	header .sidemenu .item.mobile-fixed-left i:after { left: 68px; }

	body.header-transitions header .sidemenu .item.mobile-fixed i:after { opacity: 1 }

	body.scrolled #leftmenu { left: -18rem; }
	body.scrolled #rightmenu { right: -18rem; }

	body.header-transitions #leftmenu, body.header-transitions-force #leftmenu { transition: left 250ms; }
	body.header-transitions #rightmenu, body.header-transitions-force #rightmenu { transition: right 250ms; }

	body.header-transitions #leftmenu { left: -15rem; }
	body.header-transitions #rightmenu { right: -15rem; }

	body.header-transitions-force #leftmenu { left: -18rem; }
	body.header-transitions-force #rightmenu { right: -18rem; }

	.navstyling {
	    font-size: 1rem;
	}

	.navstyling ul li ul {
		font-size: 0.75em;
	}	


}
