:root {

	--font-default-family: 'Source Sans 3', sans-serif;
	--font-default-weight: 300; /* also italic */
	--font-default-weight-bold: 400;

	--color-blue-dark: #223355;

	--color-beige: #F8F3EE;
	--color-sand: #D1C5B9;

	--color-white: #fff;
	--color-black: #000;
	--color-grey: #AAAAA6;

	--color-blue: #5599CC;
	--color-yellow: #FFAA11;
	--color-green: #AACC44;

}


/* @group Clear Stylesheet */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;background-image:none;}body{line-height:1;color:black;background:white;text-align:left;}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0;}caption,th,td{text-align:left;font-weight:normal;}blockquote:before,blockquote:after,q:before,q:after{content:""}blockquote,q{quotes:"" "";}
/* @end */


body {
	font-family: var(--font-default-family);
	font-size: 20px;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	font-weight: var(--font-default-weight);
	color: var(--color-blue-dark);
	background: var(--color-beige);
}

	@media( max-width: 480px ) {

		body {
			font-size: 18px;
		}

	}

	@media( max-width: 360px ) {

		body {
			font-size: 16px;
		}

	}

a {
	text-decoration: none;
}

b, strong {
	font-weight: var(--font-default-weight-bold);
}

i, em {
	font-style: italic;
}

h1, h2, h3, h4, h5 {
	font-weight: var(--font-default-weight-bold);
}

	h1 {
		font-size: 2em;
	}

	h2 {
		font-size: 1.8em;
	}

	h3 {
		font-size: 1.5em;
	}

	h4, h5, h6 {
		font-size: 1.3em;
	}

sup {
	vertical-align: super;
	font-size: 0.6em;
}

.width {
	max-width: 1020px;
	padding: 0 20px;
	box-sizing: border-box;
	margin: 0 auto;
	position: relative;
}

.content {
	line-height: 1.5;
}

	.content p,
	.content ul,
	.content ol,
	.content h1,
	.content h2,
	.content h3,
	.content h4,
	.content h5,
	.content h6 {
		margin-top: 1em;
	}

		.content *:first-child  {
			margin-top: 0;
		}

	.content ul,
	.content ol {
		padding-left: 20px;
	}

		.content ul {
			list-style-type: disc;
		}

		.content ol {
			list-style-type: decimal;
		}

	.content a {
		color: var(--color-green);
	}

.columns {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

	.columns-2 .column { width: calc(100% / 2 - 20px); }
	.columns-3 .column { width: calc(100% / 3 - 20px); }
	.columns-4 .column { width: calc(100% / 4 - 20px); }
	.columns-5 .column { width: calc(100% / 5 - 20px); }

input,
textarea {
	border-radius: 0;
	border: 0;
	background: #eee;
	padding: 6px 12px;
	font-size: 16px;
	font-family: var(--font-default-family);
}

.button {
	display: inline-block;
	background: var(--color-blue-dark);
	color: var(--color-white) !important;
	text-align: center;
	padding: 10px 30px;
	font-weight: var(--font-default-weight-bold);
	border: 0;
	border-radius: 0;
	cursor: pointer;
	font-size: 16px;
}

	.button:hover {
		background: var(--color-blue);
	}

#lightbox {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 300;
	background: rgba(0,0,0,.9) no-repeat center center / 16px auto;
	opacity: 0;
	pointer-events: none;
}

	#lightbox.loading {
		background-image: url(../img/icons/loading.gif);
	}

	body.transition #lightbox {
		-webkit-transition: opacity 400ms ease-in-out;
		-moz-transition: opacity 400ms ease-in-out;
		-o-transition: opacity 400ms ease-in-out;
		-ms-transition: opacity 400ms ease-in-out;
		transition: opacity 400ms ease-in-out;
	}

	#lightbox:after {
		content: "×";
		font-size: 40px;
		color: var(--color-white);
		position: absolute;
		right: 10px;
		top: 5px;
		cursor: pointer;
		z-index: 400;
	}

	#lightbox:before {
		content: "";
		position: absolute;
		display: block;
		right: 0;
		top: 0;
		width: 60px;
		height: 60px;
		z-index: 400;
	}

	#lightbox.visible {
		opacity: 1;
		pointer-events: auto;
	}

	#lightbox-content {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

		#lightbox-content img {
			max-width: calc(100% - 40px);
			max-height: calc(100% - 40px);
			height: auto;
		}

	#lightbox .navigation div {
		position: absolute;
		z-index: 20;
		width: 33%;
		height: 100%;
		top: 0;
		cursor: pointer;
	}

		#lightbox .navigation div:after {
			content: "";
			display: block;
			width: 20px;
			height: 20px;
			margin-top: -10px;
			background: no-repeat center center / contain;
			position: absolute;
			top: 50%;
		}

		#lightbox .navigation .prev {
			left: 0;
		}

			#lightbox .navigation .prev:after {
				left: 40px;
				background-image: url(../img/icons/arrow-left.svg);
				background-position: left center;
			}

		#lightbox .navigation .next {
			right: 0;
		}

			#lightbox .navigation .next:after {
				right: 40px;
				background-image: url(../img/icons/arrow-right.svg);
				background-position: right center;
			}

.slideshow {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

	.slideshow .slides {
		position: relative;
		width: 100%;
		height: 100%;
		z-index: 1;
	}

		.slideshow .slides .slide {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			display: none;
			background: #eee no-repeat center center / cover;
		}

			.slideshow .slides .slide:first-child,
			.slideshow.inited .slides .slide {
				display: block;
			}

			.slideshow.inited .slides .slide {
				opacity: 0;
			}

			.slideshow.inited .slides .slide.active {
				opacity: 1;
				z-index: 10;
			}

			.slideshow.inited .slides .slide.next {
				z-index: 11 !important;
			}

			body.transition .slideshow.inited .slides .slide {
				-webkit-transition: opacity 500ms ease-in-out;
				-moz-transition: opacity 500ms ease-in-out;
				-o-transition: opacity 500ms ease-in-out;
				-ms-transition: opacity 500ms ease-in-out;
				transition: opacity 500ms ease-in-out;
			}

			.slideshow.inited .slides .slide.video {
				overflow: hidden;
			}

				.slideshow.inited .slides .slide.video video {
					width: 100%;
					height: auto;
					position: absolute;
					left: 0;
					top: 0;
				}

				.slideshow.inited .slides .slide.image img {
					display: block;
					height: auto;
				}

	.slideshow .lightbox-opener {
		position: absolute;
		top: 0;
		left: 40%;
		width: 20%;
		z-index: 25;
		height: 100%;
		cursor: pointer;
	}

		.slideshow .lightbox-opener:after {
			content: "";
			display: block;
			width: 30px;
			margin-left: -15px;
			height: 30px;
			margin-top: -15px;
			background: url(../img/icons/fullscreen.svg) no-repeat center center / contain;
			position: absolute;
			left: 50%;
			top: 50%;
			opacity: 0;
		}

			body.transition .slideshow .lightbox-opener:after {
				-webkit-transition: opacity 500ms ease-in-out;
				-moz-transition: opacity 500ms ease-in-out;
				-o-transition: opacity 500ms ease-in-out;
				-ms-transition: opacity 500ms ease-in-out;
				transition: opacity 500ms ease-in-out;
			}

			.slideshow:hover .lightbox-opener:after {
				opacity: 1;
			}

	.slideshow .navigation div {
		position: absolute;
		z-index: 20;
		width: 33%;
		height: 100%;
		top: 0;
		cursor: pointer;
	}

		.slideshow .navigation div:after {
			content: "";
			display: block;
			width: 20px;
			height: 20px;
			margin-top: -10px;
			background: no-repeat center center / contain;
			position: absolute;
			top: 50%;
			opacity: 0;

			-webkit-transition: opacity 250ms ease-in-out;
			-moz-transition: opacity 250ms ease-in-out;
			-o-transition: opacity 250ms ease-in-out;
			-ms-transition: opacity 250ms ease-in-out;
			transition: opacity 250ms ease-in-out;
		}

			.slideshow .navigation div:hover:after {
				opacity: 1;
			}

		.slideshow .navigation .prev {
			left: 0;
		}

			.slideshow .navigation .prev:after {
				left: 40px;
				background-image: url(../img/icons/arrow-left.svg);
				background-position: left center;
			}

		.slideshow .navigation .next {
			right: 0;
		}

			.slideshow .navigation .next:after {
				right: 40px;
				background-image: url(../img/icons/arrow-right.svg);
				background-position: right center;
			}

	.slideshow .handles {
		position: absolute;
		top: 20px;
		width: 100%;
		text-align: center;
		z-index: 21;
		height: 0;
	}

		.slideshow .handles .handle {
			position: relative;
			display: inline-block;
			margin: 0 3px;
			width: 8px;
			height: 8px;
			border-radius: 50%;
			cursor: pointer;
			border: 1px solid var(--color-white);
			background: rgba(255,255,255,.3);
		}

			.slideshow .handles .handle.active,
			.slideshow .handles .handle:hover {
				background: var(--color-white);
			}

.header {
	height: 60px;
	background: var(--color-white);
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100;
	width: 100%;
	box-sizing: border-box;
	font-size: 16px;
}

	.header:not(:first-child) { /* we assume, the google translate header is visible */
		margin-top: 56px;
	}

	.header .width {
		max-width: 100%;
		text-align: right;
	}

	.header .logo {
		display: block;
		width: 160px;
		padding-top: 40px;
		height: 0;
		overflow: hidden;
		line-height: 2;
		background: url(../img/logo_dark-blue.svg) no-repeat left center / contain;
		position: absolute;
		left: 20px;
		top: 10px;
	}

	.header .menu {
		display: inline-block;
		list-style-type: none;
	}

		.header .menu li {
			display: inline;
		}

			.header .menu a {
				display: inline-block;
				padding: 20px 10px;
				color: var(--color-blue-dark);
				font-weight: var(--font-default-weight-bold);
			}

				.header .menu a:hover,
				.header .menu .current-menu-item a {
					color: var(--color-blue);
				}

			.header .menu li:after {
				content: "";
				display: inline-block;
				width: 1px;
				height: 1em;
				background: #DDD;
				vertical-align: middle;
			}

				.header .menu li:last-child:after {
					display: none;
				}

	.header .burger {
		display: none;
	}

	.header .language-switcher {
		margin-left: 40px;
	}
	
		.header .language-switcher li:first-child:after {
			display: none;
		}

		html[lang="de"] .header .language-switcher li.lang-de a,
		html[lang="it"] .header .language-switcher li.lang-it a,
		html[lang="en"] .header .language-switcher li.lang-en a,
		html[lang="nl"] .header .language-switcher li.lang-nl a,
		html[lang="fr"] .header .language-switcher li.lang-fr a,
		html[lang="es"] .header .language-switcher li.lang-es a {
			color: var(--color-blue);
		}

	@media ( max-width: 1040px ) {

		.header .menu a {
			padding-left: 7px;
			padding-right: 7px;
		}

		.header .language-switcher {
			margin-left: 20px;
		}

	}

	@media( max-width: 900px ) {

		.header {
			height: 60px;
			overflow: hidden;
		}

			.header.open {
				height: auto;
			}

		.header .burger {
			display: block;
			width: 30px;
			height: 40px;
			position: absolute;
			right: 20px;
			top: 11px;
			cursor: pointer;
			z-index: 120;
		}

			.header .burger .icon {
				pointer-events: none;
			}

			.header .burger .icon,
			.header .burger:before,
			.header .burger:after {
				content: "";
				display: block;
				width: 20px;
				height: 2px;
				position: absolute;
				right: 0;
				top: 50%;
				margin-top: -2px;
				-webkit-transition: all 200ms ease-in-out;
				-moz-transition: all 200ms ease-in-out;
				-o-transition: all 200ms ease-in-out;
				-ms-transition: all 200ms ease-in-out;
				transition: all 200ms ease-in-out;
				background: var(--color-blue-dark);
			}

				.header.top .burger .icon,
				.header.top .burger:before,
				.header.top .burger:after {
					background: var(--color-blue-dark);
				}

				.header .burger:before {
					margin-top: -8px;
				}

				.header .burger:after {
					margin-top: 4px;
				}

				.header.open .burger .icon {
					opacity: 0;
				}

				.header.open .burger:before {
					margin-top: -4px;

					-moz-transform: rotate(-45deg);
					-ms-transform: rotate(-45deg);
					-o-transform: rotate(-45deg);
					-webkit-transform: rotate(-45deg);
					transform: rotate(-45deg);
				}

				.header.open .burger:after {
					margin-top: -4px;

					-moz-transform: rotate(45deg);
					-ms-transform: rotate(45deg);
					-o-transform: rotate(45deg);
					-webkit-transform: rotate(45deg);
					transform: rotate(45deg);
				}

		.header #menu-main {
			padding: 53px 0 9px;
			display: block;
		}

			.header #menu-main a {
				display: block;
				text-align: center;
				padding: 14px 10px;
				box-sizing: border-box;
			}

			.header #menu-main li:after {
				display: none;
			}

		.header .language-switcher {
			text-align: center;
			display: block;
		}

	}

.footer {
	background: var(--color-blue-dark);
	color: var(--color-white);
	height: 120px;
	font-size: 16px;
}

	.footer .width {
		max-width: 100%;
		text-align: right;
	}

	.footer .logo {
		display: block;
		width: 160px;
		padding-top: 40px;
		height: 0;
		overflow: hidden;
		line-height: 2;
		background: url(../img/logo_white.svg) no-repeat left center / contain;
		position: absolute;
		left: 20px;
		top: 10px;
	}

	.footer .menu li {
		display: inline;
	}

		.footer .menu a {
			display: inline-block;
			padding: 20px 10px;
			color: var(--color-white);
			font-weight: var(--font-default-weight-bold);
		}

			.footer .menu a:hover,
			.footer .menu .current-menu-item a {
				color: var(--color-blue);
			}

		.footer .menu li:after {
			content: "";
			display: inline-block;
			width: 1px;
			height: 1em;
			background: rgba(255,255,255,.5);
			vertical-align: middle;
		}

			.footer .menu li:last-child:after {
				display: none;
			}

	@media( max-width: 900px ) {

		.footer .width {
			padding-top: 17px;
		}

		.footer .logo {
			position: static;
			margin: 0 auto;
		}

		.footer .menu {
			text-align: center;
		}

	}

	@media( max-width: 680px ) {

		body {
			background: var(--color-blue-dark);
		}

		.main {
			min-height: 380px !important;
			background: var(--color-beige);
		}

		.footer {
			height: auto;
		}

			.footer .menu a {
				display: block;
				padding: 14px;
			}

			.footer .menu li:after {
				display: none;
			}

	}

.main {
	padding: 120px 0 80px;
	box-sizing: border-box;
	min-height: calc(100vh - 120px); /* 100vh - .footer.height() */
}

.block {
	margin: 40px 0;
}

	.block .width {
		background: var(--color-white);
	}

.block.intro {
	margin: -120px 0 -120px;
	z-index: 0;
	position: relative;
	background: no-repeat center center / cover;
	min-height: 400px;
	height: 70vh;
}

	body.home .block.intro {
		height: 80vh;
	}

	.block.intro .slideshow {
		width: 100%;
		height: 100%;
	}

	@media( max-width: 900px ) {

		.block.intro {
			margin-bottom: -70px;
			height: 50vh !important;
		}

	}

.block.text {
}

	.block.text .width {
		padding: 40px;
	}

	@media( max-width: 900px ) {

		.block.text .width {
			padding: 20px;
		}

	}

.block.map {
	padding: 40px 0;
	position: relative;
}

	.block.map img {
		display: block;
		width: 100%;
		height: auto;
		margin: 0 auto;
		max-width: 1200px;
	}

	.block.map .label {
		text-align: center;
		padding-top: 20px;
	}

		.block.map .label ol {
			display: inline;
		}

			.block.map .label ol li {
				display: inline-block;
				margin: 0 20px;
				font-weight: var(--font-default-weight-bold);
				font-size: 18px;
			}

				.block.map .label ol li em {
					font-style: normal;
					color: var(--color-white);
					background: var(--color-blue-dark);
					border-radius: 50%;
					width: 1em;
					height: 1em;
					padding: 5px 6px 7px;
					line-height: 1;
					text-align: center;
					display: inline-block;
				}

				.block.map .label ol li a {
					color: inherit;
					position: relative;
				}

					.block.map .label ol li a:before {
						content: "";
						display: block;
						width: 40px;
						height: 40px;
						position: absolute;
					}

					.block.map .label ol li a.link-1:before {
						top: -385px;
						left: 781px;
					}

					.block.map .label ol li a.link-2:before {
						top: -456px;
						left: 229px;
					}

					.block.map .label ol li a.link-3:before {
						top: -456px;
						left: 153px;
					}

					.block.map .label ol li a.link-4:before {
						top: -456px;
						left: 85px;
					}

	.block.map .info {
		text-align: center;
		display: block;
		font-size: 0.8em;
		margin-top: 1em;
	}

	@media( max-width: 1200px ) {

		.homepage .block.map {
			max-width: 1060px;
			margin-left: auto;
			margin-right: auto;
			padding: 0;
		}

			.block.map .label ol li a.link-1:before {
				top: -345px;
				left: 731px;
			}

			.block.map .label ol li a.link-2:before {
				top: -406px;
				left: 225px;
			}

			.block.map .label ol li a.link-3:before {
				top: -406px;
				left: 142px;
			}

			.block.map .label ol li a.link-4:before {
				top: -406px;
				left: 65px;
			}

	}

	@media( max-width: 1060px ) {

		.block.map {
			padding: 0;
			margin: 20px -20px;
			overflow: hidden;
		}

		.homepage .block.map {
			margin-left: -20px;
			margin-right: -20px;
		}

		.homepage .block.map .label ol li a:before {
			display: none;
		}

	}

	@media( max-width: 940px ) {

		.block.map .label ol {
			display: block;
			margin-bottom: 5px;
		}

		.homepage .block.map .label ol li {
			margin: 0 7px 10px;
		}

		.block.map .label ol li em {
			width: 0.8em;
			height: 0.8em;
			padding: 1px 3px 5px;
			font-size: 0.8em;
		}

	}

	@media( max-width: 640px ) {

		.homepage .block.map .label ol li {
			font-size: 0.8em;
			margin-left: 5px;
			margin-right: 5px;
		}

	}

	@media( max-width: 540px ) {

		.homepage .block.map .label ol li {
			font-size: 0.6em;
			margin-left: 3px;
			margin-right: 3px;
		}

	}

.block.text-image {

}

	.block.text-image .columns .column {
		width: 50%;
		box-sizing: border-box;
	}

	.block.text-image .width {
		padding: 0;
	}

	.block.text-image .columns {
		align-items: center;
	}

	.block.text-image .text {
		padding: 40px;
	}

		.block.text-image .text .info + h1,
		.block.text-image .text .info + h2 {
			margin-top: 0;
		}

	.block.text-image .images {
		align-self: center;
		padding: 20px;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
	}

		.block.text-image .images img {
			display: block;
			width: 50%;
			height: auto;
		}

	.block.text-image.yellow .images {
		background: var(--color-yellow);
	}

	.block.text-image.blue .images {
		background: var(--color-blue);
	}

	.block.text-image.green .images {
		background: var(--color-green);
	}

	.block.text-image.sand .images {
		background: var(--color-sand);
	}

	.block.text-image.grey .images {
		background: var(--color-grey);
	}

	.block.text-image.reverse .text {
		order: 2;
	}

	.block.text-image.reverse .images {
		order: 1;
	}

	@media( max-width: 740px ) {

		.block.text-image .columns {
			flex-wrap: wrap;
		}

		.block.text-image .columns .column {
			width: 100%;
		}

		.block.text-image .images {
			order: 1 !important;
			max-width: 400px;
			margin: 0 auto;
		}

		.block.text-image .text {
			order: 2 !important;
		}

		.block.text-image .text {
			padding: 20px;
		}

	}

.block.columns {
	padding: 0;
	margin-left: auto;
	margin-right: auto;
}

	.block.columns .content {
		background: var(--color-white);
		padding: 40px;
	}

		.block.columns .content + .content {
			margin-top: 40px;
		}

	@media( max-width: 900px ) {

		.block.columns {
			flex-wrap: wrap;
		}

			.block.columns .column {
				width: 100%;
			}

			.block.columns .column + .column {
				margin-top: 40px;
			}

			.block.columns .content {
				padding: 20px;
			}

	}

.facilities-list {
	padding: 0 !important;
	list-style-type: none !important;
	margin: 1em 0 0 !important;

	-webkit-columns: 2;
	-moz-columns: 2;
	columns: 2;
}

	.facilities-list li {
		padding-left: 10px;
	}

		.facilities-list li:first-letter {
			margin-left: -10px;
		}

.livingspace {
}

	.livingspace .infos {
		margin-top: 1em;
	}

	.livingspace .infolist {
		margin-top: 1em;
	}

	.livingspace .infos + .infolist {
		margin-top: 40px;
	}

	.livingspace .bedroom {
	}

		.livingspace .bedroom .bedroom-content {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

			.livingspace .bedroom .text {
				display: block;
				position: relative;
				order: 2;
				width: calc(100% - 140px - 20px);
			}

			.livingspace .bedroom .icons {
				width: 140px;
				order: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-wrap: wrap;
			}


				.livingspace .bedroom .icons .icon {
					width: 40px;
					height: 40px;
					background: no-repeat center center / contain;
				}

					.livingspace .bedroom .icons .icon-double {
						background-image: url(../img/room/bed_double.svg);
					}

					.livingspace .bedroom .icons .icon-child {
						background-image: url(../img/room/bed_child.svg);
					}

					.livingspace .bedroom .icons .icon-couch {
						background-image: url(../img/room/bed_couch.svg);
					}

	@media( max-width: 400px ) {

		.livingspace .bedroom .bedroom-content {
			flex-wrap: wrap;
		}

		.livingspace .bedroom .icons {
			width: 100%;
			justify-content: flex-start;
			margin-bottom: 5px;
		}

		.livingspace .bedroom .text {
			width: 100%;
		}

	}

.infolist ul {
	list-style-type: none !important;
	padding: 0 !important;
}

	.infolist ul li:after {
		content: "";
		display: block;
		width: 100%;
		height: 1px;
		background: var(--color-blue-dark);
		margin: 20px 0;
	}

		.infolist ul li:last-child:after {
			display: none;
		}

.homepage {
}

	@media( max-width: 1060px ) {

		.main.homepage {
			padding-left: 20px;
			padding-right: 20px;
		}

		.homepage .intro {
			margin-left: -20px;
			margin-right: -20px;
		}

	}

.single-mphb_room_type .booking {
	background: var(--color-white);
	margin-top: 120px;
	margin-bottom: -80px;
	box-sizing: border-box;
	padding: 80px 0;
	position: relative;
	overflow: hidden;
}

	.single-mphb_room_type .booking h2 {
		margin-bottom: 20px;
	}

	.single-mphb_room_type .booking .mphb-calendar-title {
		display: none;
	}

	.single-mphb_room_type .booking .mphb-calendar .datepick {
		width: 100% !important;
	}

	.single-mphb_room_type .booking .mphb-reservation-form-title {
		display: none;
	}

	.single-mphb_room_type .booking .mphb-booking-form abbr {
		display: none;
	}

	.mphb-booking-form {
		margin-top: 0;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		flex-wrap: wrap;
	}

		.mphb-booking-form p {
			width: 100%;
		}

		.mphb-booking-form .mphb-check-in-date-wrapper,
		.mphb-booking-form .mphb-check-out-date-wrapper,
		.mphb-booking-form .mphb-reserve-btn-wrapper {
			width: calc(100% / 3 - 20px);
			position: relative;
		}

			.mphb-booking-form .mphb-reserve-btn-wrapper .mphb-preloader {
				position: absolute;
				right: 10px;
				top: 11px;
			}

		.mphb-booking-form input {
			box-sizing: border-box;
			width: 100%;
		}

		.mphb-booking-form label {
			font-size: 0.8em;
		}

		.mphb-booking-form .mphb-reserve-btn-wrapper {
			text-align: right;
		}

		.mphb-booking-form .mphb-errors-wrapper {
			width: 100%;
			background: var(--color-yellow);
			margin-top: 30px;
			padding: 20px 0;
			position: relative;
			margin-bottom: -80px;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

			.mphb-booking-form .mphb-errors-wrapper:before {
				content: "";
				display: block;
				background: var(--color-yellow);
				width: 200vw;
				height: 100%;
				position: absolute;
				left: -50vw;
				top: 0;
				z-index: 0;
			}

			.mphb-booking-form .mphb-errors-wrapper p,
			.mphb-booking-form .mphb-errors-wrapper input {
				margin-top: 0;
				position: relative;
				z-index: 1;
			}

		.mphb-booking-form .mphb-reserve-room-section {
			width: 100%;
			background: var(--color-green);
			margin-top: 30px;
			padding: 20px 0;
			position: relative;
			margin-bottom: -80px;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

			.mphb-booking-form .mphb-reserve-room-section:before {
				content: "";
				display: block;
				background: var(--color-green);
				width: 200vw;
				height: 100%;
				position: absolute;
				left: -50vw;
				top: 0;
				z-index: 0;
			}

			.mphb-booking-form .mphb-reserve-room-section p,
			.mphb-booking-form .mphb-reserve-room-section input {
				margin-top: 0;
				position: relative;
				z-index: 1;
			}

		.mphb-booking-form .mphb-required-fields-tip {
			display: none;
		}

	@media( max-width: 1060px ) {

		.single-mphb_room_type .main {
			padding-left: 20px;
			padding-right: 20px;
		}

		.single-mphb_room_type .intro {
			margin-left: -20px;
			margin-right: -20px;
		}

		.single-mphb_room_type .booking {
			margin-left: -20px;
			margin-right: -20px;
			margin-top: 80px;
		}

	}

	@media( max-width: 860px ) {

		.mphb-booking-form .mphb-check-in-date-wrapper,
		.mphb-booking-form .mphb-check-out-date-wrapper {
			width: calc(50% - 10px);
		}

		.mphb-booking-form .mphb-reserve-btn-wrapper {
			width: 100%;
			text-align: center;
		}

			.mphb-booking-form .mphb-reserve-btn-wrapper .button {
				width: auto;
			}

		.mphb-booking-form .mphb-reserve-room-section {
			flex-wrap: wrap;
			text-align: center;
		}

		.mphb-booking-form .mphb-reserve-room-section input {
			width: auto;
			margin: 10px auto 0;
		}

		.single-mphb_room_type .booking {
			margin-top: 40px;
		}

	}

	@media( max-width: 766px ) {

		.single-mphb_room_type .booking .mphb-datepick .datepick-month.last {
			display: none;
		}

	}

	@media( max-width: 380px ) {

		.mphb-booking-form .mphb-check-in-date-wrapper,
		.mphb-booking-form .mphb-check-out-date-wrapper {
			width: 100%;
		}

		.mphb-booking-form .mphb-reserve-btn-wrapper {
			text-align: left;
		}

	}

.fixed-bar {
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 100;
	background: var(--color-blue-dark);
	text-align: center;
	width: 100%;
	padding: 20px 0;
}

	.fixed-bar .content {
		color: var(--color-white);
	}

	.fixed-bar .button {
		background: var(--color-white);
		color: var(--color-blue-dark) !important;
	}

		.fixed-bar .button:hover {
			color: var(--color-white) !important;
			background: var(--color-blue);
		}

	body.transition .fixed-bar {
		-webkit-transition: opacity 250ms ease-in-out;
		-moz-transition: opacity 250ms ease-in-out;
		-o-transition: opacity 250ms ease-in-out;
		-ms-transition: opacity 250ms ease-in-out;
		transition: opacity 250ms ease-in-out;
	}

	.fixed-bar.hidden {
		opacity: 0;
		pointer-events: none;
	}

	.fixed-bar .button {
		margin-left: 40px;
	}

	@media( max-width: 600px ) {

		.fixed-bar {
			padding: 10px 0;
		}

			.fixed-bar .text {
				display: none;
			}

			.fixed-bar .button {
				margin: 0;
				padding-top: 5px;
				padding-bottom: 5px;
			}

	}

.surroundings {
}

	.surroundings .map {
		margin-bottom: -40px;
	}

	.surroundings .list {
		margin-left: auto;
		margin-right: auto;
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		justify-content: space-between;
	}

		.surroundings .list .content {
			width: calc(100% / 3 - 20px);
			margin-top: 40px;
			background: var(--color-white);
			padding: 20px;
			box-sizing: border-box;
			font-size: 0.8em;
		}

		.surroundings .list .image {
			margin: -20px -20px 20px;
			padding: 20px;
			box-sizing: border-box;
		}

			.surroundings .list .image.yellow {
				background: var(--color-yellow);
			}

			.surroundings .list .image.blue {
				background: var(--color-blue);
			}

			.surroundings .list .image.green {
				background: var(--color-green);
			}

			.surroundings .list .image.sand {
				background: var(--color-sand);
			}

			.surroundings .list .image img {
				display: block;
				width: 100%;
				height: auto;
			}

		.surroundings .list h3 {
		}

			.surroundings .list h3 .counter {
				font-size: 1rem;
				font-style: normal;
				color: var(--color-white);
				background: var(--color-blue-dark);
				border-radius: 50%;
				width: 1em;
				height: 1em;
				padding: 5px 6px 7px;
				margin-top: -5px;
				line-height: 1;
				text-align: center;
				display: inline-block;
				vertical-align: middle;
			}

		.surroundings .text {
			display: block;
			margin-top: 1em;
		}

	@media( max-width: 1060px ) {

		.main.surroundings {
			padding-left: 20px;
			padding-right: 20px;
		}

			.surroundings .intro {
				margin-left: -20px;
				margin-right: -20px;
			}

		.surroundings .list {
			padding-left: 0;
			padding-right: 0;
			margin-top: 20px;
		}

			.surroundings .list .content {
				width: calc(100% / 3 - 12px);
				margin-top: 20px;
			}

		.surroundings .block.text {
			margin: 0;
		}

	}

	@media( max-width: 840px ) {

		.surroundings .list .content {
			width: calc(50% - 10px);
		}

	}

	@media( max-width: 540px ) {

		.surroundings .list .content {
			width: 100%;
		}

	}

	@media( max-width: 480px ) {

		.surroundings .list .content {
			font-size: 1em;
		}

	}

.mphb_sc_checkout-wrapper {
}

	.mphb_sc_checkout-wrapper .mphb_sc_checkout-form {
		position: relative;
	}

	.mphb_sc_checkout-wrapper section {
		background: var(--color-white);
		padding: 40px;
		box-sizing: border-box;
		margin-top: 40px !important;
	}

	.mphb_sc_checkout-wrapper #mphb-booking-details {
		width: calc(50% - 20px);
	}

	.mphb_sc_checkout-wrapper #mphb-price-details {
		width: calc(50% - 20px);
	}

	.mphb_sc_checkout-wrapper #mphb-customer-details {
		width: calc(50% - 20px);
		position: absolute;
		top: 0;
		right: 0;
		margin-top: 0 !important;
	}

		.mphb_sc_checkout-wrapper #mphb-customer-details .mphb-required-fields-tip {
			display: none;
		}

	.mphb_sc_checkout-wrapper #mphb-billing-details {
		width: calc(50% - 20px);
	}

	.mphb_sc_checkout-wrapper .mphb-room-number {
		display: none;
	}

	.mphb_sc_checkout-wrapper .mphb-price-breakdown {
		width: 100%;
	}

		.mphb_sc_checkout-wrapper .mphb-price-breakdown .mphb-price-breakdown-rate {
			display: none;
		}

		.mphb_sc_checkout-wrapper .mphb-price-breakdown td,
		.mphb_sc_checkout-wrapper .mphb-price-breakdown th {
			padding: 2px 5px 2px 0;
		}

			.mphb_sc_checkout-wrapper .mphb-price-breakdown th {
				padding-top: 15px;
				text-decoration: underline;
			}

	.mphb_sc_checkout-wrapper .mphb-total-price,
	.mphb_sc_checkout-wrapper .mphb-deposit-amount {
		background: var(--color-white);
		padding: 10px 40px;
		margin: 0;
		width: calc(50% - 20px);
		box-sizing: border-box;
	}

		.mphb_sc_checkout-wrapper section#mphb-billing-details {
			padding-bottom: 20px;
		}

		.mphb_sc_checkout-wrapper section.mphb-checkout-terms-wrapper {
			margin-top: 0 !important;
			padding-top: 20px;
			width: calc(50% - 20px);
		}

			.mphb_sc_checkout-wrapper section.mphb-checkout-terms-wrapper p {
				margin-top: 0;
			}

			.mphb_sc_checkout-wrapper section.mphb-checkout-terms-wrapper .mphb-terms-and-conditions-accept label {
				padding-left: 30px;
				display: block;
				position: relative;
			}

				.mphb_sc_checkout-wrapper section.mphb-checkout-terms-wrapper .mphb-terms-and-conditions-accept label input {
					position: absolute;
					left: 0;
					top: 7px;
				}

	.mphb_sc_checkout-wrapper .mphb-gateways-list {
		padding: 0;
	}

		.mphb_sc_checkout-wrapper .mphb-gateways-list .mphb-gateway-description {
			padding-left: 30px;
			margin-top: 0;
		}

	.mphb_sc_checkout-wrapper .mphb-errors-wrapper {
		width: calc(50% - 20px);
		padding: 20px 40px;
		box-sizing: border-box;
		background: var(--color-yellow);
		margin-top: 0;
	}

	.mphb_sc_checkout-wrapper label {
		font-size: 0.8em;
	}

	.mphb_sc_checkout-wrapper input,
	.mphb_sc_checkout-wrapper select,
	.mphb_sc_checkout-wrapper textarea {
		width: 100%;
		box-sizing: border-box;
	}

		.mphb_sc_checkout-wrapper input[type="submit"],
		.mphb_sc_checkout-wrapper input[type="checkbox"],
		.mphb_sc_checkout-wrapper input[type="radio"] {
			width: auto;
		}

		.mphb_sc_checkout-wrapper textarea {
			height: 180px;
		}

	@media( max-width: 900px ) {

		.mphb_sc_checkout-wrapper #mphb-booking-details,
		.mphb_sc_checkout-wrapper #mphb-price-details,
		.mphb_sc_checkout-wrapper #mphb-billing-details,
		.mphb_sc_checkout-wrapper .mphb-total-price,
		.mphb_sc_checkout-wrapper .mphb-deposit-amount,
		.mphb_sc_checkout-wrapper #mphb-customer-details,
		.mphb_sc_checkout-wrapper section.mphb-checkout-terms-wrapper,
		.mphb_sc_checkout-wrapper .mphb-errors-wrapper,
		.mphb_sc_checkout-wrapper #mphb-price-details {
			width: 100%;
		}

		.mphb_sc_checkout-wrapper #mphb-customer-details {
			position: static;
			width: 100%;
		}

	}