body.debug{
	/* visibility: visible; */
}

/* ============================================================================
   Media Queries: LAYOUT 1: 1-599px
   ========================================================================= */

/**
 *
 * LAYOUT 1 - Full width, one column main section (small device). 
 * Button primary menu (touch) Width, between 1 and 599	
 *
 */
@media screen and (max-width:599px){
	.box-title {
		font-size:var(--font-size-box-title-mobile);
		line-height: var(--line-height-box-title-mobile);
	}
	.box-layout-a-feature-value {
		font-size:var(--font-size-tag-mobile) ;
		line-height:var( --line-height-tag-mobile);
	}


	/*
	.not-layout[1-3] 	- added on block or inline that are not to be displayed on that layout
	.hide-layout[1-3] 	- added on block or inline that you want to be hidden by default but be able to toggle display with a trigger/button
	*/
	.not-layout1{
		display:none!important;
	}

	.block-layout1,
	.id-wrapper-bottombar{
		display:block!important;
	}
	
	

	.hide-layout1{
		max-height:0;
		padding-top:0!important;
		padding-bottom:0!important;
		margin:0!important;
		overflow:hidden;
	}

	.startpage .hide-layout1{
		max-height:100%;
		padding-top:1.5em!important;
		padding-bottom:1.5em!important;
		margin:0!important;
	}
	
	.hotel-back-navigation .back-navigation-button {
		margin-left: auto;
	}
	.category .id-wrapper-hero-header-cta-button {
		margin-left: 0;
	}

	/****************************/
	
	/*
	* GRID LOGIC
	* Four-column grid active
	*/
	
	/* ----- 
	STRUCTURE
	min-width:1px
	max-width:599px
	----- */

	.box{
		/*font-size:16px;*/
		/*font-size:14px;*/
		font-size:1em;
		font-size:calc( 12px + (14 - 12) * ((100vw - 320px) / (599 - 320)) );
		font-size:calc( 1.2rem + (14 - 12) * ((100vw - 320px) / (599 - 320)) );
	}

	.main-header {
	font-size:var(--font-size-h1-mobile);
	line-height:var(--line-height-h1-mobile);

}

.main-subheader {
	font-style:var(--font-style-h2-mobile);
	line-height:var(--line-height-h2-mobile);

}


	.main-subheader
	/*,
	.grid-col-xs-12 .box-title*/{
		/*font-size:30px;*/
		/*font-size:23px;*/
		font-size:1.5em;
		font-size:calc( 21px + (28 - 21) * ((100vw - 320px) / (599 - 320)) );
		font-size:calc( 2.1rem + (28 - 21) * ((100vw - 320px) / (599 - 320)) );
	}
.attached-page-toggler,
	.id-destination-included-box .box-inner .box-title{
		font-size: var(--font-size-h2-mobile);
	}
	.id-wrapper-hero-header-titlewrap-inner .main-header {
		font-size: 32px;
	}
		.id-destination-included-box .box-title,

	.id-wrapper-hero-header-titlewrap-inner .main-subheader{
		font-size: 18px;
	}

	.box-title,
	.id-anchormenu .box-title{
		/*font-size:23px;*/
		/*font-size:20px;*/
		font-size:1.286em;
		font-size:calc( 18px + (21 - 18) * ((100vw - 320px) / (599 - 320)) );
		font-size:calc( 1.8rem + (21 - 18) * ((100vw - 320px) / (599 - 320)) );
	}

	/** iOS issue Zoom in fix - Zooms in on form elements that have a font-size less than 16px */
	/*
		.ios .ui-widget
	*/
	.searchbox,
	.ui-multiselect{
		/* font-size:1.8rem; */
		font-size:16px!important;
	}

	img.left,
	img.right{
		margin:1em auto;
		padding: 0;
		float: none;
		clear: both;
		display: block;
	}

	.grid-row {
		/*margin-right:0!important;*/
		/*margin-left:0!important;*/
	}

	[class^="grid-col-"],
	[class*="grid-col-"]{
		/* padding-top:15px; */
		/* padding-bottom:15px; */
	}

	[class^="grid-col-"]:not([class^="grid-col-xs-"]):not([class*="grid-col-xs-"]),
	[class*="grid-col-"]:not([class^="grid-col-xs-"]):not([class*="grid-col-xs-"]),
	.grid-col-xs-12{
		/*padding-left:3%;*/
		/*padding-right:3%;*/
		/* padding-left:15px; */
		/* padding-right:15px; */
	}
	
	/**/


	/**/

	.inlay-image{
		background-image:none;
	}
	
	/**/	

	.main-figure,
	.box-inner,
	.ckeditor-content{
		/* max-width:600px; */
		margin-left:auto;
		margin-right:auto;
	}

	.category-item-horizontal-box .box-inner{
		/* max-width:320px; */
	}

	.box,
	.box-section{
		/*border-top:1px solid var(--color-lightgray-dark);*/
		/*background-image:-webkit-linear-gradient(top,rgba(var(--color-lightgray-rgb),0.55) 0,transparent 0.75em);*/
		/*background-image:linear-gradient(to bottom,rgba(var(--color-lightgray-rgb),0.55) 0,transparent 0.75em);*/
	}

	[class^="box-skin-"],
	[class*=" box-skin-"]{
		/*background-image:none;*/
		border-radius:0;
	}

	/* style:box width:*/
	div:not(.banner-columns) .box.box-skin-a,
	div:not(.banner-columns) .box.box-skin-b,
	div:not(.banner-columns) .box.box-skin-c,
	html .box-skin-price{
		background-color:transparent;
		/*padding-top:0;*/
		/*padding-left:0;*/
		/*padding-right:0;*/
	}

	div:not(.banner-columns) .box.box-skin-a .box-inner,
	div:not(.banner-columns) .box.box-skin-b .box-inner,
	div:not(.banner-columns) .box.box-skin-c .box-inner,
	html .box-skin-price .box-inner{
		/*border-radius:0;*/
	}

	/* style:Full width bg color:*/
	div:not(.banner-columns) .box.box-skin-d,
	div:not(.banner-columns) .box.box-skin-e,
	html .box-skin-alert,
	html .box-skin-warning{
		/*background-color:transparent;*/
		padding-top:0;
		padding-left:0;
		padding-right:0;
	}

	div:not(.banner-columns) .box.box-skin-d .box-inner,
	div:not(.banner-columns) .box.box-skin-e .box-inner,
	html .box-skin-alert .box-inner,
	html .box-skin-warning .box.inner{
		border-radius:0;
	}

	.banner-columns [class^="box-skin-"],
	.banner-columns [class*=" box-skin-"]{
		background-color:transparent;
	}

	.box-section .box,
	.box-section-title + .box-section,
	h1 + .box,
	h1 + .box-section,
	.id-header .box,
	.id-header .box-section,
	.toggableDiv .box,
	.box.section-welcome,
	.box.main-figure,
	.box.searchbox,
	body.search .id-content .searchbox-text{
		border-top-style:none;
		background-image:none;
	}

	#attached-page-tourlist .destination-extrainfo{
		border-top-style:solid;
	}

	.box-section .box{
		max-width:100%;
	}

	.id-header .box,
	.id-header .box-section{
		background-color:transparent;
	}

	.box-section .box,
	.box-section .box:first-child,
	.no-text1 .box-section .box,
	.no-text1 .box-section .box:first-child{
		padding-top:1.5em;
	}

	.box-section .box:first-child,
	.no-text1 .box-section .box:first-child{
		/*padding-top:inherit;*/
	}

	[class^="grid-col-"] .box-section .box,
	[class*="grid-col-"] .box-section .box,
	[class^="grid-col-"] .no-text1 .box-section .box,
	[class*="grid-col-"] .no-text1 .box-section .box{
		padding-top:0;
	}

	.box-section .box{
		padding-bottom:1.5em;
	}

	.box-title{
		/*margin-bottom:9px;*/
		/*margin-bottom:0.9rem;*/
	}

	/*
		* (2017-08-31 LS) Deactivated default horizontal padding as the grid should take care of this
	*/
	.breadcrumbs-inner,
	.box,
	.box-section-title,
	.main-header,
	.main-subheader,
	.attached-page-toggler,
	.attached-page,
	.sharebar,
	.main-desc,
	.id-footer .main-section-inner{
		/*padding-left:9px;*/
		/*padding-right:9px;*/
		/*padding-left:0.9rem;*/
		/*padding-right:0.9rem;*/
		/*width:auto;*/
	}

	.main-figure{
		/* padding-top:1.5em; */
		/* padding-bottom:1.5em; */
	}

	
	[class^="grid-col-"] .breadcrumbs-inner,
	[class*=" grid-col-"] .breadcrumbs-inner{
		/*padding-left:0.75em;*/
		/*padding-right:0.75em;*/
	}

	.main-figure,
	.main-figure .box-inner{
		padding-left:0;
		padding-right:0;
	}

	.box{
		/* padding-top:1.5em; */
		/* padding-bottom:1.5em; */
	}

	[class^="grid-col-"] .box:only-child,
	[class*=" grid-col-"] .box:only-child,
	.id-header .box{
		padding-top:0;
		padding-bottom:0;
	}

	/*pages without '.box' inside '.id-content'*/
	.error404 .id-content .main-section-inner{
		padding-left:1.5em;
		padding-right:1.5em;
		padding-bottom:1.5em;
	}

	.error404 .id-content .main-section-inner .main-header,
	.error404 .id-content .main-section-inner p,
	.error404 .id-content .main-section-inner h1,
	.error404 .id-content .main-section-inner h2,
	.error404 .id-content .main-section-inner h3,
	.error404 .id-content .main-section-inner form{
		padding-left:0;
		padding-right:0;
	}

	.box-section{
		padding-top:0;
	}

	.box.anchormenu-box{
		/* padding-top:0.75em; */
		/* padding-bottom:0.75em; */
		/* margin-top:0.75em; */
		/* margin-bottom:0.75em; */
		padding-top:0;
		padding-bottom:0;
		margin-top:0.75em;
		margin-bottom:0;
	}

	h1 + .box{
		padding-top:0;
	}

	.box .box{
		background-image:none;
		/*filter:none;*/
		padding-top:0;
		padding-bottom:0;
	}

	.box-inner{
		text-align:center;
	}

	.box-title{
		text-align:left;
	}

	.box-desc,
	.box-nav{
		display:block;
		max-width:100%;
		/* text-align:left; */
	}

	.id-languageswitcher .box-desc{
		text-align:center;
	}

	/**/
	
	/**
	 * HOVERBOX (Box style - text on top of image on hover for tablet and desktop)
	 reset for mobile (no hover needed to display content)
	*/
	/*
	.hoverbox-over{
		position:relative;
	}

	.hoverbox .hoverbox-over,
	.hoverbox .box-title{
		-webkit-transform: translateY(0);
		transform: translateY(0);

	}

	.hoverbox .box-desc{
		margin-bottom:0;
	}

	.hoverbox .box-title,
	.hoverbox .box-image,
	.hoverbox .box-desc,
	.hoverbox .box-nav{
		visibility: visible;
		opacity: 1;
		-webkit-transition:none;
		transition:none;
	}

	.hoverbox-over .box-title:before{
		display:none;
		
	}

	.hoverbox .box-inner{
		background-color:var(--color-under);
	}
	*/
	/**/
	
	.langswitch-wrap{
		/*padding:0 0.375em;*/
		padding:0;
		max-width: 33.333%;
	}

	.langswitch-item{
		line-height:10;
		width: 42px;
		height:0;
		padding-top:100%;
	}

	.db-news .box-nav{
		text-align:left;
	}

	.box-desc .box-nav{
		display:block;
	}

	.banner-section .box-nav,
	.hotellist-section .box-nav{
		display:block;
		text-align:left;
	}

	.db-news-box .box-desc,
	.db-news-box .box-nav{
		display:block;
	}

	.category-item-horizontal-box .box-title,
	.category-item-horizontal-box .box-preamble{
		text-align:left;
	}

	.main-section-inner + .box,
	.box-section .box{
		border-top:0 none;
	}

	/**/
	.utilitybar-list,
	.utilitybar .box-desc{
		text-align:center;
	}

	/**
		* Box style implementation on small devices (box-skin-a type)
	**/
	.destination-priceinfobox{
		background:transparent;
	}

	.box.destination-priceinfobox,
	.box.searchbox{
		padding-top:1.5em;
		padding-bottom:1.5em;
	}

	.destination-priceinfobox .box-desc,
	.searchbox .desc{
		padding-left:1.5em;
		padding-right:1.5em;
	}

	html .destination-priceinfobox .box-inner .box-title,
	html .searchbox .box-inner .box-title{
		/*border:none;*/
	}

	.box-image,
	.main-figure-image .box-inner{
		background-image:none;
	}
	/* Remove placeholder (full width boxes) */
	.box-image:before,
	.main-figure-image .box-inner:before{
		display:none;
	}
	/** 
	 * Remove fill out image container with image when there is no placeholder
	 */
	@supports (object-fit:cover){	
		.box-image img, 
		.main-figure-image .box-inner img,
		.box-image-inner,
		.box-image a{
			position:static;
			width: auto;
			height: auto;
			max-width: 100%;
		}
	}
	.hoverbox .box-image:before{
		display:block;
	}

	.itype-130 .id-content{
		padding:1.5em;
	}

	/* =====
	OFFCANVAS NAV ACTIVE PAGE (page / function / bodyClass / device)
	===== */
	
	.secondary-menu,
	.primary-menu,
	.box.id-search-box-text,
	.box.searchbox,	
	.offcanvas-nav-footer .offcanvas-nav-item{
		/*display:none;*/
	}

	.id-search-box-text-header{
/* 		display:none!important; */
	}

	/**/	
	.offcanvas-nav-mobile-header{
		display:block!important;
	}

	@supports(display: flex) {
		.id-header .main-section-inner {
			align-items:stretch;
		}
	}
	/**/

	/* ----- 
	HEADER (main section)
	min-width:1px
	max-width:599px
	----- */ 
	
	/* ----- 
	SEARCH ENGINE PACKAGE (sidebar,
	content on startpage)
	min-width:1px
	max-width:599px
	----- */
	
	
	/* -----
	MAIN FIGURE - SLIDESHOW (main section)
	min-width:1px
	max-width:599px
	----- */
	html .banner-pos-header-slider .inlay/*,
	max-599 .banner-pos-header-slider .inlay*/{
		box-shadow:none;
		border-top: 2px solid #fff;
	}

	html .banner-pos-header-slider.mode-caption-below .inlay{
		-webkit-transform: translateY(0);
		transform: translateY(0);
		/*box-shadow:none;*/
	}

	/* ----- 
	CONTENT (main section)
	min-width:1px
	max-width:599px
	----- */
	.startpage .main-header,
	.system-page .main-header,
	.no-leftmenu-id .main-header{
		padding-top:18px;
		padding-top:1.8rem;
	}

	.slides .slides-inlay{
		position:static!important;
	}

	/**/

	.mode-caption-below .slider-navigation,
	.mode-caption-below .slider-pager{
		line-height:1;
		height:auto;
		min-height:0;
	}

	.mode-caption-below .slider-navigation-button,
	.mode-caption-below .slider-pager a{
		height:48px;
		line-height: 32px;
		min-height:0;
	}

	.mode-caption-below .slider-navigation-button [class^="icon-"],
	.mode-caption-below .slider-navigation-button [class^="icon-"]:before,
	.mode-caption-below .slider-navigation-button [class*=" icon-"],
	.mode-caption-below .slider-navigation-button [class*=" icon-"]:before,
	.mode-caption-below .slider-pager a span{
		display:inline-block;
		vertical-align:top;
	}

	/**/
	.banner-columns:before{
		display:none; /*(border-top)*/
	}

	.banner-columns .box-title{
		font-size:20px;
		font-size:2rem;
	}

	.id-smalldevice-content-destination-infobox{
		text-align:center;
	}

	.attached-page-toggler:after{
		float:right;
	}

	/**	PAGINATION (mobile)	*/
	#pagination .nav-page,
	#pagination .separator{
		display:none;
	}

	#pagination .nav-page.active{
		display:block;
	}

	#pagination .btn-nav .txt{
		display:none;
	}

	#pagination .wrap-nav{
		max-width:27em;
	}

	#pagination .nav-page{
		width:auto;
	}

	#pagination .nav-step{
		width:25%;
	}

	#pagination .nav-page-list{
		width:45%;
	}

	.anchormenu-box-title{
		font-size:1.218em;
	}

	.anchormenu-box-desc{
		display:block;
	}

	/*create space for arrow*/
	.attached-page .attached-page-toggler{
		padding-right:1.3em;
		position:relative;
	}

	.attached-page .attached-page-toggler:after{
		position:absolute;
		right:0;
		margin-top:0.2em;
		margin-right:0.2em;
	}

	/**/
	.anchormenu-box-itemcount-1 .anchormenu-box-item{
		width:100%;
	}

	/**/
	.banner-columns:not(.grid-row),
	.hotellist-section:not(.grid-row){
		margin-left:auto;
		margin-right:auto;
	}

	/* ----- 
	SIDEBAR (main section)
	min-width:1px
	max-width:599px
	----- */
	.sidebar .box:not([class^="box-skin-"]):not([class*=" box-skin-"]) .box-title{
		border:none;
		padding:0;
		margin:0 0 4px 0;
		margin-bottom:0.4rem;
	}

	.id-destination-sidebarbox{
		display:none;
	}

	.contact-box-item-inner .key{
		min-width:26%;
	}

	.contact-box-item-inner .value{
		max-width:73%;
	}

	/* ----- 
	SECONDARY MENU (main section)
	min-width:1px
	max-width:599px
	----- */
	
	
	/* ----- 
	FOOTER (main section)
	min-width:1px
	max-width:599px
	----- */
	
	.id-footer ul.list-tel{
		margin-top:0.75em;
		margin-bottom:0.75em;
	}

	.id-footer-secondary-menu-item:first-child a{
		padding-top:0;
		margin-top:0;
	}

	/* ----- 
	WRAPPER BOTTOM BAR (wrap)
	min-width:1px
	max-width:599px
	----- */
	.destination-hotel-item-inner {
		flex-direction: column;
		gap: 0;

	
	}

	.banner-grid-wholes-imageright-box .box-title,
.banner-grid-wholes-imageright-box .box-desc,
.banner-grid-wholes-imageright-box .box-nav {
	color: var(--color-white);
	text-align: left;
	width:90%;
	/* width:calc(100% - 15px); */
	max-width:100%;
	}

	.banner-grid-wholes-imageleft-box .box-title,
	.banner-grid-wholes-imageleft-box .box-desc,
	.banner-grid-wholes-imageleft-box .box-nav {
		/* 'color: var(--color-white);' */
		width:90%;
		/* width:calc(100% - 15px); */
		max-width:100%;
			text-align: left;
		}
	.banner-grid-heading-mini{
		margin-top: 0;
	}
	.banner-grid-heading-mini .box-title {
		font-size: 14px;
	}
	.banner-grid-heading-inner{
		font-size:32px;
		text-align: center;
	}

	.banner-grid-thirds-box .box-inner-white .box-title a,
	.banner-grid-thirds-box .box-inner-beige .box-title a,
	.current-trips-box .box-layout-a-inner span,
	.current-trips-box .box-layout-a-inner ul,
	.category-tourlist-box .box-layout-a-inner .box-layout-a-title-inner,
	.category-tourlist-box .box-layout-a-inner .box-layout-a-desc-list
		{
		text-align: left;
	}


	.footer-org {
		flex-direction: column;
		align-items: flex-start;
		margin-left: 1.5rem;
		
	}
	.id-footer-secondary-menu {
		text-align: left;
	}



	.id-wrapper-footer-secondary-menu .secondary-menu-list{
		display: flex;
		flex-direction: row;
		gap: 1rem;
		
	}

	.id-wrapper-footer-secondary-menu .secondary-menu-list a {
		text-decoration: underline;

	} 
	.menu-multicol:not(.menu-multicol-offcanvas) .box-inner {
		width:100%;
		width:calc(100% - 15px);
		max-width:80%;
	}
	.box-layout-a-inner{
		padding-top: 1.2rem;
		
	}
	/* Hotel on destinationpage */
	.attributes-left {
		padding-top: 18px;
		display: grid;
		grid-template-columns: none; 
		gap: 12px 32px;
	}


	nav.id-menu-multicol .menu-multicol-box .box-inner {
		margin-left: 1.5em;
	}

	footer.id-footer .main-section-inner {
		padding-left: 0;
	}

	.layout-1 .wrapper-destination-info {
		box-shadow: 0 0 15px 0 #606C3833;
	}
	.layout-1 .id-wrapper-breadcrumbs, .id-wrapper-breadcrumbs:nth-child(1n) {
		display: none;
	}
	.layout-1 .id-wrapper-destination-info {
		border-bottom: 1px solid transparent;
	}

	.layout-1 .wrapper-destination-info-pageanchor-button {
		box-shadow: none;
		align-items: center;

		&::after {
			content: none !important;
		}
	}

	.wrapper-destination-info-subject-item .wrapper-destination-info-key {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		 a {
		margin-right: 0;
		 }
	}
	.banner-grid-wholes-imageright-box h2 {
		color:var(--color-white) ;
	}
	.banner-grid-wholes-imageright-box .box-inner .box-image {
		margin: 1rem;
	    border: 10px solid var(--color-almostblack);
        border-radius: 10px;
	}
	.banner-grid-wholes-imageright-box .box-inner {
		display: flex;
		flex-direction: column-reverse;
	}

	.banner-grid-wholes-imageleft-box .box-inner .box-image {
		margin: 1rem;
	    border: 10px solid var(--color-beige);
        border-radius: 10px;
	}
	.banner-grid-wholes-imageright-box .box-inner .box-image img,
	.banner-grid-wholes-imageleft-box .box-inner .box-image img /*.main-figure img,*/
	{
		border-radius:unset;
	}

	.hotel-roomtypes .banner-grid-wholes-imageright-box .box-title {
		padding: 10px 0;
		width:100%;
		max-width:100%;
		text-align: left;
	}
	.hotel-roomtypes .banner-grid-wholes-imageright-box .box-inner {
		align-items: start;
	}
	.hotel-roomtypes .banner-grid-wholes-imageright-box .box-inner .box-image {
		border: none;
	}

	.moreimages-slideshow-inner-button {
		left:50%;
		top: 50%;
		bottom: auto;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		right: auto;
	}

	.facts-box {
		.attributes-grid {
			grid-template-columns: repeat(1, 1fr);
		}
		
		.attributes-row:nth-of-type(3n) {
			margin-bottom: 48px;
		}
	}

	.three-images-block .picture-2 {

	padding-top: 5px;
}
		.three-images-block .picture-3 {
			padding: 10px;
	
	}


}

/* ============================================================================
   Media Queries: LAYOUT 1: 1-319px
   ========================================================================= */
 
@media screen and (max-width:319px){

	.main-header,
	.main-subheader,
	.box-title,
	.offcanvas-nav{
		/* word-wrap:anywhere; */
		overflow-wrap:anywhere;
		/* word-break:break-all; */
		-webkit-hyphens:auto;
		-ms-hyphens:auto;
		hyphens:auto;
	}
	
	/**/
	
	.id-languageswitcher .box-inner{
		text-align:center;
	}

	.button{
		/*display:block;*/
		/* width:100%; */
		margin:0.333em auto;
		/* padding-left:0; */
		/* padding-right:0; */
	}

	.col-button .button{
		display:inline-block;
		vertical-align:top;
		width:auto;
	}

	.newsletter-box .box-desc{
		display:block;
	}

	.newsletter-box .form-input-text,
	.newsletter-box .box-desc .button{
		display:inline-block;
		vertical-align:top;
	}

	.newsletter-box .form-input-text{
		/*width:78%;*/
	}

	.newsletter-box .box-desc .button{
		/*width:20%;*/
	}

	/**/
	.slides-inlay{
		width:100%!important;
		padding-left:0!important;
		padding-right:0!important;
	}

	.slides .slides-inlay,
	.slides-inlay .fromprice{
		text-align:center;
	}

	/**/	
	.banner-section .box:first-child{
		padding-top:1.5em;
	}

	.banner-section .box:last-child{
		padding-bottom:1.5em;
	}

	/**/
	.destination-priceinfobox .box-inner,
	.searchbox .box-inner{
		padding:0;
	}

	/**/
	.offcanvas-nav-mobile-header-item{
/* 		display:block; */
/* 		width:auto; */

	}

	.offcanvas-nav-mobile-header-item span{
		display:none;
	}
	.offcanvas-nav-button:before,
	.offcanvas-nav-button:after{
		margin:0;
	}

	.vcard,
	.adr {
		/* display: flex; */
		gap: 1rem;
	}



}



/* ============================================================================
   Media Queries: LAYOUT 1: 320-599px
   ========================================================================= */

/**
 *
 * LAYOUT 1 - HEADER - offcanvas-nav and TOGGLE-BUTTON media queries 
 * (only ff supports media queries inside media queries)
 *
 */

@media screen and (min-width:320px) and (max-width:599px){
	/*ckeditor*/
	.table-skin-a,
	.list-skin-a{
		width:96%;
	}

	/**
	 * (2017-11-20) Deactivated default horizontal padding as the grid should take care of this.
	 */	
	form p,
	form h1,
	form h2,
	form h3,
	.box p,
	.box h1,
	.box h2,
	.box h3,
	.attached-page-toggler p,
	.attached-page-toggler h1,
	.attached-page-toggler h2,
	.attached-page-toggler h3,
	.attached-page p,
	.attached-page h1,
	.attached-page h2,
	.attached-page h3,
	.main-desc p,
	.main-desc h1,
	.main-desc h2,
	.main-desc h3,
	.slides-inlay p,
	.slides-inlay h1,
	.slides-inlay h2,
	.slides-inlay h3{
		/* padding-left:0; */
		/* padding-right:0; */
	}

	.main-figure{
		padding-left:0;
		padding-right:0;
	}

	.breadcrumbs-inner,
	.main-desc,
	.attached-page,
	.category-item-horizontal-box{
		/*padding-left:18px;*/
		/*padding-right:18px;*/
		/*padding-left:1.8rem;*/
		/*padding-right:1.8rem;*/
		padding-left:5px;
		padding-right:5px;
	}

	
	.main-header{
		text-align: left;
	}

	.main-header,
	.main-subheader,
	.box-title{
		/*word-wrap:break-word;*/
		overflow-wrap:break-word;
		word-break:break-word;
		-webkit-hyphens:manual;
		-ms-hyphens:manual;
		hyphens:manual;
	}

	.id-languageswitcher{
		float:right;
		clear:right;
		max-width:100%;
		padding-left:0;
		padding-right:0;
		width: 50%;
		width: calc(100% - 170px);
	}

	.show-slideshow-banner-wide .id-languageswitcher{
		/*width:68.75%;*/
		width: calc(100% - 145px);
		position:absolute;
		right:0;
		top:0;
	}

	html .id-languageswitcher .box-desc{
		text-align:right;
	}
}

/* ============================================================================
   Media Queries: LAYOUT 1: 320-479px
   ========================================================================= */

@media screen and (min-width:320px) and (max-width:479px){
		
	/**/
	.anchormenu-box-item{
		/* width:50%; */
		max-width:100%;
	}
	.anchormenu-box-list{
		text-align: left;
	
	}

	.anchormenu-box-itemcount-3 .anchormenu-box-item{
		/* width:100%; */
	}

	/**/
	
	.offcanvas-nav-header .offcanvas-nav-list{
		width:400px;
	}

	.offcanvas-nav-mobile-header-item span{
		/* display:none; */
	}

	.readmore:after{
		width: 30px;
		height: 30px;
	}
}

/* ============================================================================
   Media Queries: LAYOUT 1: 480-599px
   ========================================================================= */

 
@media screen and (min-width:480px) and (max-width:599px){
	[class^="box-skin-"] .box-inner,
	[class*=" box-skin-"] .box-inner{
		padding:18px 0;
		padding:1.8rem 0;
	}

	[class^="box-skin-"] .box-title,
	[class*=" box-skin-"] .box-title,
	[class^="box-skin-"] .box-inner > .box-image:first-child,
	[class*=" box-skin-"] .box-inner > .box-image:first-child{
		margin-top:-18px;
		margin-top:-1.8rem;
	}

	[class^="box-skin-"] .box-title,
	[class*=" box-skin-"] .box-title{
		margin-bottom:0;
		padding-top:18px;
		padding-top:1.8rem;
		padding-bottom:18px;
		padding-bottom:1.8rem;
	}

	.sidebar .box-title,
	.sidebar .box-desc,
	.sidebar .box-nav,
	[class^="box-skin-"] .box-title,
	[class*=" box-skin-"] .box-title,
	[class^="box-skin-"] .box-desc,
	[class*=" box-skin-"] .box-desc,
	[class^="box-skin-"] .box-nav,
	[class*=" box-skin-"] .box-nav{
		padding-left:18px;
		padding-right:18px;
		padding-left:1.8rem;
		padding-right:1.8rem;
	}

	/**/
	
	.slides-inlay .slide-title,
	.slides-inlay .price{
		font-size:1.666em;
	}

	.anchormenu-box-item{
		/* width:33.333%; */
		max-width:33.333%;
	}

	.anchormenu-box-itemcount-1 .anchormenu-box-item{
		/* width:100%; */
		max-width:100%;
	}

	.anchormenu-box-itemcount-2 .anchormenu-box-item{
		/* width:50%; */
		max-width:50%;
	}

	.anchormenu-box-itemcount-4 .anchormenu-box-item{
		/* width:50%; */
		/* width:25%; */
		max-width:25%;
	}
	
	
}

/* ============================================================================
   Media Queries: LAYOUT 1: 1-429px
   ========================================================================= */

@media screen and (max-width:429px){
	.box-section:not(.grid-row) .box:nth-of-type(odd){
		/* background-color:var(--color-under); */
		background-color:rgba(var(--color-lightgray-rgb),0.35);
	}

	.id-wrapper-footerbar .box-section:not(.grid-row) .box:nth-of-type(odd){
		background-color:var(--color-almostblack);
	} 
	.id-wrapper-footerbar .box-title {
		text-align: left;
	}

	.footer-logo {
		width: 25%;
	}
	.menu-multicol:not(.menu-multicol-offcanvas) li{
		text-align: left;
	}

	.box-section:not(.grid-row) .box:nth-of-type(even){
		background-color:var(--color-lightgray);
		background-color:rgba(var(--color-lightgray-rgb),0.15);
	}

	.box-section:not(.grid-row) .category-item.even{
		background-color:rgba(var(--color-under-rgb),0.5);
	}

	.hotellist-item:last-child{
		border-bottom:none;
	}
	.vcard,
	.adr {
		display: flex;
		gap: 1rem;
	}
}

/* ============================================================================
   Media Queries: LAYOUT 1: 430-599px
   ========================================================================= */

@media screen and (min-width:430px) and (max-width:599px){	
	/**/
	
	.banner-columns .box{
		float:left;
		width: 50%;
	}
	
	.banner-columns .box:nth-of-type(1n){
		clear: none;
	}
	
	.banner-columns .box.item-1,
	.banner-columns .box:nth-of-type(2n+3){
		clear:left;
	}
}

/* ============================================================================
   Media Queries: LAYOUT 1: LANDSCAPE e.g iPhone
   ========================================================================= */
@media screen and (max-width:599px) and (max-height:429px){
	.id-languageswitcher{
		width:auto;
		padding-left:0.375em;
	}

	.destination-priceinfobox .box-inner,
	.searchbox .box-inner,
	.box,
	.main-figure{
		padding-top:0.75em;
		padding-bottom:0.75em;
	}

	[class^="grid-col-"] .box:only-child,
	[class*=" grid-col-"] .box:only-child{
		padding-top:0;
		padding-bottom:0;
	}
}

/* ============================================================================
   Media Queries: LAYOUT 2: 600-1199px
   ========================================================================= */
/**
 * LAYOUT 2 - Two column main section (medium device).
 *
 * .not-layout[1-3] - added on block or inline that are not to be displayed on 
 * that layout.
 *
 * .hide-layout[1-3] - added on block or inline that you want to be hidden by 
 * default but be able to toggle display with a trigger/button
 *
 */
 
 
 
@media screen and (min-width:600px) and (max-width:1199px){
	.not-layout2{
		display:none!important;
	}

	.block-layout2{
		display:block!important;
	}

	.hide-layout2{
		max-height:0;
		overflow:hidden;
	}

	/* ----- 
	STRUCTURE
	min-width:600px
	max-width:1199px
	----- */
	
	
		
	/* ----- 
	HEADER (main section)
	min-width:600px
	max-width:1199px
	----- */
	.id-header .box-inner{
		/* padding-bottom:0.75em; */
	}
	
	.id-languageswitcher{
		/*min-height:4.3em;*/
	}

	.id-languageswitcher,
	.header-secondary-menu{
		/* max-width:72%; */
		/* max-width: calc(100% - 170px); */
		/* clear:right; */
	}

			
	.header-secondary-menu{
		/*offcanvas-nav height:*/
		/*padding-bottom:62px;*/
		/*padding-bottom:6.2rem;*/
	}

	.show-slideshow-banner-wide .id-languageswitcher,
	.show-slideshow-banner-wide .header-secondary-menu{
		/* max-width:100%; */
	}

		
	/* ----- 
	SEARCH ENGINE PACKAGE (sidebar,
	content on startpage)
	min-width:600px
	max-width:1199px
	----- */
	
	/* ----- 
	MAIN FIGURE - IMAGE (main section)
	min-width:600px
	max-width:1199px
	----- */
	
	/* ----- 
	MAIN FIGURE - SLIDESHOW (main section)
	min-width:600px
	max-width:1199px
	----- */


	/* ----- 
	HEADER - SLIDESHOW WIDE
	min-width:600px
	max-width:1199px
	----- */

	.banner-pos-header-slider .slider-navigation-button{
		/* font-size:54px; */
		/* font-size:5.4rem; */
		/* font-size:8vw; */
	}

	/* ----- 
	CONTENT (main section)
	min-width:600px
	max-width:1199px
	----- */


	/**	PAGINATION (Tablet)	*/
	#pagination .nav-page-step2{
		display:none;
	}

	#pagination .btn-nav .txt{
		display:none;
	}

	#pagination .nav-step{
		width:21%;
	}

	#pagination .nav-step{
		margin-left:0;
		margin-right:0;
	}

	#pagination .nav-step-prev{
		margin-left:0;
	}

	#pagination .nav-step-next{
		margin-right:0;
	}

	#pagination .nav-step-prev,
	#pagination .nav-step-next{
		display:inline-block;
		vertical-align:top;
	}

	#pagination .nav-page-list{
		width:56%;
		margin-left:auto;
		margin-right:auto;
	}

	#pagination .nav-page-lastchild{
		margin-right:0;
	}

	#pagination .nav-page{
		width:7%;
	}

	#pagination .separator,
	#pagination .nav-page{
		margin-left:1%;
		margin-right:1%;
	}

	#pagination .separator{
		width:4%;
	}

	#pagination.pagination-mini .nav-step{
		width:29%;
	}

	#pagination.pagination-mini .nav-page-list{
		width:42%;
	}

	/**/
	
	.banner-columns .box{
		float:left;
		width: 50%;
	}
	
	.banner-columns .box:nth-of-type(1n){
		clear: none;
	}
	
	.banner-columns .box.item-1,
	.banner-columns .box:nth-of-type(2n+3){
		clear:left;
	}

	/* ----- 
	SIDEBAR (main section)
	min-width:600px
	max-width:1199px
	----- */
	
	/* ----- 
	SECONDARY MENU (main section)
	min-width:600px
	max-width:1199px
	----- */
	
	
	/* ----- 
	FOOTER (main section)
	min-width:600px
	max-width:1199px
	----- */
	.id-footer .vcard,
	.id-footer ul.list-tel,
	.id-footer ul.list-sitelink{
		display:block!important;
	}

	.id-footer ul.list-tel li:last-child:after,
	.id-footer .list-sitelink:before,
	.id-footer .adr .adr-item:last-child:after{
		display:none!important;
	}

	.id-footer .vcard .adr-item,
	.id-footer .org-number,
	.id-footer .copyright{
		padding-top:0.143em;
		padding-bottom:0.143em;
	}
	
	.layout-2 .wrapper-destination-info-pageanchor-button {
		box-shadow: none;
		height: 100%;
		align-items: center;
		&::before {
			border: 1px solid var(--color-darkorange);
			border-radius: 50% !important;
			margin-bottom: 0 !important;
			width: 36px;
            height: 36px;
            text-align: center;
            align-content: center;
		}
		&::after {
			content: none !important;
		}
	}
	/* ----- 
	WRAPPER BOTTOM BAR (wrap)
	min-width:600px
	max-width:1199px
	----- */
	.banner-grid-wholes-imageright-box .box-title, 
	.banner-grid-wholes-imageright-box .box-desc, 
	.banner-grid-wholes-imageright-box .box-nav, 
	.banner-grid-wholes-imageright-box .box-image,
	.banner-grid-wholes-imageleft-box .box-title, 
	.banner-grid-wholes-imageleft-box .box-desc, 
	.banner-grid-wholes-imageleft-box .box-nav, 
	.banner-grid-wholes-imageleft-box .box-image {
		float: unset;
	}

	.banner-grid-wholes-imageright-box h2 {
		color:var(--color-white) ;
	}
	.banner-grid-wholes-imageright-box .box-inner .box-image {
		margin: 1rem;
	    border: 10px solid var(--color-almostblack);
        border-radius: 10px;
	}
	.banner-grid-wholes-imageright-box .box-inner {
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
	}
	.banner-grid-wholes-imageleft-box .box-title,
.banner-grid-wholes-imageright-box .box-title,
.banner-grid-wholes-imageleft-box .box-desc,
.banner-grid-wholes-imageright-box .box-desc {
	      width: 100%; 
       width: calc(100% - 15px); 
        max-width: 100%;
}

	.banner-grid-wholes-imageleft-box .box-inner{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.banner-grid-wholes-imageleft-box .box-inner .box-image {
		margin: 1rem;
	    border: 10px solid var(--color-beige);
        border-radius: 10px;
	}
	.banner-grid-wholes-imageleft-box .box-inner .box-image,
	.banner-grid-wholes-imageright-box .box-inner .box-image,
	.banner-grid-wholes-imageleft-box .box-inner .box-inner-container,
	.banner-grid-wholes-imageright-box .box-inner .box-inner-container {
	width: 50%;
	}


	.banner-grid-wholes-imageright-box .box-inner .box-image img,
	.banner-grid-wholes-imageleft-box .box-inner .box-image img /*.main-figure img,*/
	{
		border-radius:unset;
	}
	.hotel-roomtypes .banner-grid-wholes-imageright-box .box-inner {
		align-items: start;
	}
	.hotel-roomtypes .banner-grid-wholes-imageright-box .box-inner .box-image {
		border: none;
	}
	#hotel-roomtypes .box-image a.moreimages-button{
	display: flex;
	align-items: center;
		position: absolute;
    height: 31px;
    width: 144px;
    top: 10px;
    bottom: auto;
    left: 10px;
    right: auto;
    font-size: 15px;
    padding: 0.2em 0.7em;
    background-color: var(--color-beige);
    color: var(--color-almostblack);
    border-radius: 10px;
    font-family: var(--font-family-body);
	}
		.hotel-roomtypes .banner-grid-wholes-imageright-box .banner-container {
		width: 50%;
	}




}

/* ============================================================================
   Media Queries: LAYOUT 3: 1200-99999px
   ========================================================================= */

/**
 *
 * LAYOUT 3 - Three column main section (desktop device).
 * Vertical primary menu (sidebar)
 * Width, between 1200 and 99999											
 *
 * CONTENT MOVED TO 'desktop.css'
 * ( @media screen and (min-width:1200px) and (max-width:99999px),print{}
 )
 *
 */


/* ============================================================================
   Media Queries: LAYOUT 1: 0-545px
   MY BOOKING TEMPLATE
   ========================================================================= */
  
@media screen and (max-width:545px){


	.bookingbox-key,.bookingbox-value,.BookingLabel{
		width:100%;
		padding:0px;
		text-align:left;
	}

	.booking-info,
	p.booking-info{
		width:100%;
		padding:0px;
	}

	.classinput{
		width:90%;
		padding:4px;
	}

	.bookingbox-row select{
		width:90%;
	}

	.classinput.form-item-error{
		width:90%;
		padding:4px;
	}

	.bookingbox-row .validationerror{
		display:block;
		margin-left:0;
	}

	.bookingbox-row select.form-item-error{
		width:90%;
	}

	.bookingbox-row-indent{
		margin-left:0!important;
		padding-left:0;
	}
}

/* ============================================================================
   Media Queries: LAYOUT 1: 0-330px
   MY BOOKING TEMPLATE
   ========================================================================= */
   
@media screen and (max-width:330px){
	.classinput{
		width:85%;
		padding:4px;
	}

	.classinput.form-item-error{
		width:85%;
		padding:4px;
	}

	.bookingbox-row select.form-item-error{
		width:85%;
	}
}

/* ============================================================================
   Media Queries: LAYOUT 2: 430-897px
   MISCELLANEOUS QUERIES: banner columns - Two column
   ========================================================================= */

@media screen and (min-width:430px) and (max-width:897px){
	.banner-columns .box.item-1,
	.banner-columns .box:nth-of-type(2n+3),
	.hotellist-section .box.item-1,
	.hotellist-section .box:nth-of-type(2n+3){
		clear:left;
		margin-left:0;
	}
}

/* ============================================================================
   Media Queries: LAYOUT: ALL
   MISCELLANEOUS QUERIES: Retina - pixel-ratio 2+ (2.0 dpr)
   ========================================================================= */
@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){

}

@media screen and (min-width:320px) and (min-height:320px){

	.id-wrapper-anchormenu{
		position:-webkit-sticky;
		position:sticky;
		top:-1px;
		z-index:12;
	}

	.show-cookie-notice .id-wrapper-anchormenu{
		position:static;
	}
}

@media screen and (min-width:600px) and (min-height:600px){
	.id-wrapper-header{
/* 		position:-webkit-sticky; */
/* 		position:sticky; */
/* 		top:-1px; */
/* 		z-index:13; */
	}	

	.show-cookie-notice .id-wrapper-header{
/* 		position:static; */
	}


}

@media screen and (min-width:960px) and (min-height:840px){

	.id-wrapper-search{
		/* position:-webkit-sticky; */
		/* position:sticky; */
		/* top:-1px; */
		/* z-index:13; */
	}
	.id-wrapper-menu-tabs:hover{
		z-index:14;
	}
	.itype-3 .id-wrapper-search{
		/* z-index:1; */
	}
	.show-cookie-notice .id-wrapper-search,
	.show-cookie-notice .id-wrapper-menu-tabs,
	.no-leftmenu-id .id-wrapper-menu-tabs{
		position:static;
	}
}

@media screen and (min-width:1380px){
	.id-offcanvas-nav-desktop-header-top{
		display: none!important;
	}
}

/** ACTIVATE to position wrappers on large device screens on left and right side. '.id-wrapper-section-body' is used to group the main body content (start tag in 'dom-start.asp' and end tag in dom-end.asp).  */
@media screen and (min-width:1800px){
	.id-wrapper-section-body{
		/* position:relative; */
	}
	
	.id-wrapper-footerbar,
	.id-wrapper-menu-multicol{
		/* position:absolute; */
		/* top: 0; */
		/* overflow: auto; */
		/* max-height: 100%; */
		/* background:none transparent; */
		/* width: 17.5%; */
		/* width:calc( (100% - 1200px) / 2 ); */
		/* background:none var(--color-under)!important; */
	}
	
	.id-wrapper-footerbar [class^="grid-col-"], 
	.id-wrapper-footerbar [class*=" grid-col-"],
	.id-wrapper-menu-multicol [class^="grid-col-"], 
	.id-wrapper-menu-multicol [class*=" grid-col-"]{
		/* margin:0; */
		/* width:100%; */
		/* clear:both; */
	}
	
	.id-wrapper-menu-multicol{
		/* left:0; */
	}
	
	.id-wrapper-menu-multicol .box-inner{
		/* margin-right:0; */
	}
	
	.id-wrapper-footerbar{
		/* right:0;		 */
	}
	
	.id-wrapper-footerbar .box-inner{
		/* margin-left:0; */
	}
}


 @media screen and (max-width:599px){
	.show-offcanvas .block-layout1 [class^="grid-col-"], 
	.show-offcanvas .block-layout1	[class*=" grid-col-"],
	.show-offcanvas	.offcanvas-section [class^="grid-col-"], 
	.show-offcanvas .offcanvas-section [class*=" grid-col-"]{
		/* display:block!important; */
	}

	.show-offcanvas .not-offcanvas,
	.show-offcanvas	.searchresults-pager,
	.show-offcanvas .id-wrapper-bottombar{
		/* display:none!important; */
	}
	.show-offcanvas .offcanvas-visible{
		/* display:block!important; */
	}

.show-offcanvas .wrapper,
	.show-offcanvas .wrapper:nth-of-type(1n){
		/* background-color:transparent; */
	}

	.show-offcanvas .id-wrapper-breadcrumbs .wrapper-inner{
		/*visibility:hidden;*/
	}

	.show-offcanvas .searchbox,
	.show-offcanvas	.secondary-menu,
	.show-offcanvas .box.id-search-box-text,
	.show-offcanvas .main-section,
	.show-offcanvas .box-section,
	.show-offcanvas .box{
		/*display:none;*/
	}
	
	.show-offcanvas	.wrapper,
	.show-offcanvas	[class^="grid-col-"], 
	.show-offcanvas	[class*=" grid-col-"],
	.show-offcanvas .id-smalldevice-search-engine-package{
		/* display:none!important; */
	}
	
	.show-offcanvas .id-offcanvas-nav-mobile-footer,
	.show-offcanvas .offcanvas-visible,
	.show-offcanvas-search .id-offcanvas-search-section,
	.show-offcanvas-search .offcanvas-item-search,
	.show-offcanvas-search .offcanvas-nav-mobile-footer-search-item,
	.show-offcanvas-menu .offcanvas-item-menu,
	.show-offcanvas-menu .offcanvas-nav-mobile-footer-menu-item,
	.show-offcanvas-menu .id-offcanvas-menu-section{
		/* display:block!important; */
	}

	.show-offcanvas .main-section-inner,
	.show-offcanvas-search .id-footer .main-section-inner{
		/*padding-top:0;*/
		/*padding-bottom:0;*/
		/*border:none;*/
	}

	/**
	 * Space for calendar expanded
	 */
	body.show-offcanvas-search{
		/* padding-bottom: 9em; */
	}

	/**/
	
	
	.show-offcanvas .id-header{
		/*max-width:none;*/
		/*position:relative;*/
	}

	.show-offcanvas .id-wrapper-body{
		/*min-height:180px;*/
	}

	.show-offcanvas .wrapper-inner{
		/*box-shadow:1px 1px 3px rgba(var(--color-over-rgb),.25);*/
		
	}

	.show-offcanvas .offcanvas-nav{
		/*margin-bottom:0.75em;*/
	}

	.show-offcanvas .offcanvas-nav-footer{
		/*margin-bottom:0;*/
	}

	.show-offcanvas .id-page{
		/*background-color:var(--color-under);
		/*position:relative;*/
	}

	.show-offcanvas .box,
	.show-offcanvas .box-section{
		/*background-image:none;
		/*border-top:0 none;*/
	}

	.show-offcanvas .main-section,
	.show-offcanvas .main-section-inner{
		/*float:none;*/
		/*clear:none;*/
	}

	.show-offcanvas .sidebar{
			
		/*margin-left:auto;*/
		/*margin-right:auto;*/
	}

	.show-offcanvas .id-wrapper-bottombar .jump-nav-trigger{
		/*float:none;*/
		/*text-align:center;*/
	}

	.show-offcanvas .offcanvas-nav-item-inner{
		/*display:block;*/
	}

	.show-offcanvas-search .box{
		/* background-color:var(--color-under); */
	}

}
@media screen and (min-width:430px) and (max-width:599px){
	.show-offcanvas .sidebar .box{
		/* width:100%; */
		/* clear:both; */
	}
}
@media screen and (min-width:1980px){
	.show-offcanvas-menu .id-page .grid-row{
		/* opacity:1; */
	}
}

@supports (-webkit-touch-callout: none) {
  h2 {
    letter-spacing: -0.3px;
  }
}