* {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;

	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-tap-highlight-color: transparent;

	outline: 0 !important;
}

html {
	height: 100%;
}

body, html {
	margin: 0;
	padding: 0;
}

body {
	cursor: default;

	font-family: 'Open Sans', Helvetica, Tahoma, Arial;
	font-size: 10pt;

	padding: 0;

	min-height: 100%;

	overflow-y: auto;
	overflow-x: hidden;

	background-color: transparent;
}
	body.standalone .window {
		padding: 10px;
	}

	@media(min-width: 700px) {
		body.standalone {
			background-color: #F7F7F7;
		}

		body.standalone #wrapper {
			background-color: #FFF;
			box-shadow: 0 0 10px rgba(0,0,0,.3);

			min-height: 100vh;
		}
	}

h1, h2 {
	font-family: 'Open Sans', Helvetica;
	font-weight: 400;
	text-shadow: 0 0 1px rgba(0,0,0,.3);

	padding: 0;
	margin: 0;
	margin-bottom: 12px;
}

h1 {
	font-size: 18pt;
	font-weight: 500;
}

h2 {
	font-size: 16pt;
}

small {
	font-size: 75%;
	color: #808080;
}

.text-ucfirst {
	text-transform: capitalize;
}
.text-uppercase {
	text-transform: uppercase;
}
.text-lowercase {
	text-transform: lowercase;
}


#wrapper {
	width: 700px;
	max-width: 100%;

	margin: 0 auto;

	transition: opacity .3s ease-in-out;
}
	@media(max-width: 699px) {
		#wrapper {
				width: 1px;
				min-width: 100%;
				max-width: none;
		}
	}

header {
	display: none;

	padding: 10px;

	justify-content: space-between;
	-webkit-justify-content: space-between;

	align-items: center;
	-webkit-align-items: center;

	border-bottom: 1px solid #E1E1E1;

	margin-bottom: 10px;
}
	header h1,
	header h2 {
		margin: 0;
		font-weight: 300;

		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	header h1 {
		font-weight: 500;

		min-width: 100px;
	}

	body.standalone header {
		display: -webkit-flex;
		display: flex;
	}

	header > div.logo {
		min-width: 100px;
		display: none;

		-webkit-flex: 0 10 auto;
		flex: 0 10 auto;
	}
		body.standalone header > div.logo {
			display: block;
		}

		header > div.logo > img {
			max-width: 100%;
			max-height: 30px;

			vertical-align: middle;
		}

	header > div.language {
		margin-left: 10px;
		-webkit-flex: 0 0 auto;
		flex: 0 0 auto;

		display: -webkit-inline-flex;
		display: inline-flex;

		-webkit-align-items: center;
		align-items: center;

		padding: 6px 0;

		position: relative;

		cursor: pointer;
	}
		header > div.language::after {
			font-family: 'intranet';
			content: '\e95b';

			display: inline-block;
		}

		header > div.language > ul {
			visibility: hidden;
			opacity: 0;
			transform: translateY(20px);

			background-color: #FFF;

			list-style-type: none;
			margin: 0;
			padding: 0;

			width: 170px;

			box-shadow: 0 0 5px rgba(0,0,0,.3);

			position: absolute;
			right: 0;
			top: 100%;
			z-index: 99;

			transition: visibility .3s ease-in-out,
						opacity .3s ease-in-out,
						transform .3s ease-in-out;
		}
			header > div.language:active > ul,
			header > div.language:focus > ul {
				visibility: visible;
				opacity: 1;
				transform: translateY(0);
			}

			header > div.language > ul > li {
				cursor: pointer;

				display: block;
			}
				header > div.language > ul > li:hover {
					background-color: #F4F4F4;
				}
				header > div.language > ul > li:active {
					background-color: #E1E1E1;
				}

				header > div.language > ul > li > a {
					color: inherit;
					text-decoration: none;

					display: block;

					padding: 6px;
				}

		header > div.language .flag {
			vertical-align: middle;
		}
			header > div.language .flag::before {
				display: inline-block;
				width: 25px;
				height: 20px;

				vertical-align: middle;

				background-position: 0px 50%;
				background-repeat: no-repeat;

				margin-right: 6px;

				content: '';
			}


	header > div.title {
		margin-left: 10px;
		-webkit-flex: 1 1 400px;
		flex: 1 1 400px;

		overflow: hidden;

		text-align: right;
	}

.vspacer,
.vspacer-child > *:not(:first-child) {
	margin-top: 3px;
}

.vspacer-bottom,
.vspacer-bottom-child > *:not(:last-child) {
	margin-bottom: 3px;
}

.hspacer,
.hspacer-child > *:not(:first-child) {
	margin-left: 3px;
}

.hspacer-right,
.hspacer-right-child > *:not(:last-child) {
	margin-right: 3px;
}

@media (max-width: 500px) {
	body {
		font-size: 10pt;
	}

	header h1 {
		font-size: 16pt;
	}

	header h2 {
		font-size: 14pt;
	}
}

::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}
::-webkit-scrollbar-track {
	background-color: #e0e0e0;
}
::-webkit-scrollbar-thumb {
	width: 8px;
	background-color: #808080;
}

/* MAIN */

#steps {
	position: relative;

	overflow: hidden;

	display: -webkit-flex;
	display: flex;

	-webkit-align-items: flex-start;
	align-items: flex-start;
}


#steps > .window {
	-webkit-flex: 0 0 100%;
	flex: 0 0 100%;
	width: 100%;
	max-width: 100%;
	max-height: 50px;

	visibility: hidden;
	opacity: 0;

	transition: opacity .5s ease-in-out,
	            transform .5s ease-in-out,
	            visibility .5s ease-in-out;
}

		#steps.step1 > .window:nth-child(1),
		#steps.step2 > .window:nth-child(2),
		#steps.step3 > .window:nth-child(3) {
			opacity: 1;
			transform: translate(0);
			visibility: visible;
			max-height: initial;
		}

		#steps.step1 > .window:nth-child(1),
		#steps.step1 > .window:nth-child(2),
		#steps.step1 > .window:nth-child(3) {
			transform: translate(0);
		}

		#steps.step2 > .window:nth-child(1),
		#steps.step2 > .window:nth-child(2),
		#steps.step2 > .window:nth-child(3) {
			transform: translate(-100%);
		}

		#steps.step3 > .window:nth-child(1),
		#steps.step3 > .window:nth-child(2),
		#steps.step3 > .window:nth-child(3) {
			transform: translate(-200%);
		}


div.loading {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;

	text-align: center;

	z-index: 100;

	background-color: transparent;

	display: none;
}
	div.loading:before {
		position: fixed;

		top: 25%;
		left: 50%;

		margin-top: -25px;
		margin-left: -25px;

		width: 50px;
		height: 50px;
		border: 5px solid rgba(0,0,0,.08);
		border-right-color: #0074b0;

		display: inline-block;
		border-radius: 50%;

		content: '';

		animation: spinner .5s linear infinite;
	}

body.loading {
	overflow: hidden;
}
	body.loading > #wrapper {
		opacity: .2;
	}
		body.loading > div.loading {
			display: block;
		}

.window {
	left: 0;
	right: 0;

	transition: transform .5s ease-in-out,
				opacity .5s ease-in-out;

	transform: translateX(0);
}

body.show-times:before {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(255,255,255,.85);
	z-index: 3;

	content: '';
}

/* timeout message */

	#info-time-limit {
		opacity: 0;
		overflow: hidden;
		max-height: 0;

		transition: opacity 1s ease-in-out, max-height 1s ease-in-out;
	}
		#info-time-limit.show {
			max-height: 200px;
			opacity: 1;
		}

		#info-time-limit .btn {
			opacity: 1;
			transition: opacity 1s ease-in-out;
		}

		#info-time-limit.hide-button .btn {
			opacity: 0;
			pointer-events: none;
			cursor: default;
		}

	#info-time-limit > .msg,
	#info-time-limit > .msg > div.actions {
		display: -webkit-flex;
		display: flex;

		-webkit-align-items: center;
		align-items: center;

		-webkit-justify-content: flex-end;
		justify-content: flex-end;
	}

		#info-time-limit > .msg > div.actions {
			margin-right: -20px;
		}

		#info-time-limit > .msg .time {
			display: inline-block;
			margin-left: 15px;
			margin-right: 5px;

			font-size: 14pt;
			font-weight: bold;

			transition: color .2s ease-in-out, transform .2s ease-in-out;
		}
			#info-time-limit > .msg .time:after {
				content: ' ' attr(data-after);
			}

			#info-time-limit > .msg .time.highlight {
				color: #CC0000;
				transform: scale(1.1);
			}

		@media(max-width: 700px) {
			#info-time-limit > .msg {
				display: block;
			}
		}


/* TYPE SELECTION */
	#reservation-guest-type {
		-webkit-justify-content: flex-start;
		justify-content: flex-start;
	}
		#reservation-guest-type > input {
			visibility: hidden;
			position: absolute;
			left: -100px;
		}

		#reservation-guest-type label.switch {
			display: -webkit-inline-flex;
			display: inline-flex;

			-webkit-flex-grow: 0;
			flex-grow: 0;

			margin: 0 8px;
		}

		#reservation-guest-type .btn.btn-selected {
			font-weight: bold;
			color: #000;

			pointer-events: none;
		}

/* FLEX */

	form section div.label {
		display: -webkit-flex;
		display: flex;

		-webkit-flex-direction: column;
		flex-direction: column;
	}
		form section div.label > span {
			display: block;
		}

		form section div.label > span.info {
			font-size: 85%;
			color: #808080;
			margin-top: 1px;
		}

/*@media (max-width: 400px) {
	form section label {
		width: auto !important;
		margin-right: 30px;

		-webkit-flex-grow: 1;
		flex-grow: 1;
	}
}*/


form label.fixed {
	width: 150px !important;
}

form label.width {
	width: 150px !important;
}

@media (max-width: 500px) {
	form label.fixed,
	form label.width {
		width: 110px !important;
	}
}

@media (max-width: 500px) {
	form label.fixed {
		display: none;
	}
}

form section.flex {
	justify-content: space-between;
	align-items: center;

	min-height: 40px;
}

	form section.company label[data-contactperson] {
		overflow: hidden;
	}
		form section.company label[data-contactperson]:before {
			content: attr(data-contactperson) ":";
			display: block;
		}

	#reservation-form section.flex input,
	#reservation-form section.flex select {
		flex: initial !important;
		-moz-flex: initial !important;
		-webkit-flex: initial !important;
	}

	#reservation-form section.flex .flex-select {
		-webkit-flex: 0 1 250px;
		flex: 0 1 250px;
	}


.flex {
	display: -webkit-flex;
	display: flex;
}

.flex-wrap {
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}

.flex-inline {
	display: -webkit-inline-flex;
	display: inline-flex;
}

.flex-grow {
	flex-grow: 1;
	-webkit-flex-grow: 1;
}
	.flex-grow-2 {
		flex-grow: 2 !important;
		-webkit-flex-grow: 2 !important;
	}

.flex-no-grow {
	-webkit-flex-grow: 0;
	flex-grow: 0;
}
	.flex-no-grow-force {
		-webkit-flex-grow: 0 !important;
		flex-grow: 0 !important;
	}

.flex-shrink-0 {
	flex-shrink: 0;
	-webkit-flex-shrink: 0;
}
	.flex-shrink-1 {
		flex-shrink: 1 !important;
		-webkit-flex-shrink: 1 !important;
	}

.flex-wrapper {
	height: 0;
	flex-basis: 0;
	flex-grow: 0;
	flex-shrink: 1;
}

.width-auto-force {
	width: auto !important;
}

@media (max-width: 500px) {
	.flex-mobile-wrap {
		flex-wrap: wrap;
	}

	.flex-mobile-wrap .flex-wrapper {
		flex-basis: 100%;
		margin: 1px;
		height: 1px;
		flex-shrink: 0;
	}
}

#reservation-guest .flex > input,
#reservation-guest .flex > select {
	width: 0;
}

/* END FLEX */

input[type="date"] {
	-webkit-appearance: none;
}

.big-button {
	width: 300px;
	max-width: 100%;

	margin: 0 auto;

	position: relative;

	margin-top: 10px;
}
	.big-button .btn {
		padding: 0 15px;
		width: 100%;
	}

#available-times {
	position: fixed;
	top: 0;
	bottom: 0;
	margin-bottom: 2px;
	left: 50%;
	margin-left: -200px;

	width: 400px;
	max-width: 100%;

	padding: 15px 10px;

	display: none;

	z-index: 10;

	flex-direction: column;
	-webkit-flex-direction: column;

	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
}

	@media (max-width: 400px) {
		#available-times {
			left: 0;
			right: 0;
			margin-left: 0;
		}
	}

	#available-times > div.msg,
	#available-times > div.close {
		margin-bottom: 8px;

		flex: 0 0 auto;
		-webkit-flex: 0 0 auto;

		width: 100%;
	}

	#available-times > div.close {
		text-align: right;
	}

		#available-times > div.close > span {
			display: -webkit-inline-flex;
			display: inline-flex;

			-webkit-align-items: center;
			align-items: center;

			color: #848484;

			cursor: pointer;
		}
			#available-times > div.close > span > u {
				text-decoration: none;
			}

			#available-times > div.close > span::after {
				display: inline-block;

				font-size: 16px;

				margin-left: 8px;

				font-family: 'intranet';
				content: '\e91b';
			}
				#available-times > div.close > span:hover {
					color: #CC0000;
				}
					#available-times > div.close > span:hover > u {
						text-decoration: underline;
					}

	#available-times > #no-available-times,
	#available-times > #no-available-times-max-pax {
		display: none;
	}
		#available-times.no-available-times > #no-available-times {
			display: block;
		}

		#available-times.no-available-times-max-pax > #no-available-times-max-pax {
			display: block;
		}

		#available-times.no-available-times #available-times-info,
		#available-times.no-available-times-max-pax #available-times-info {
			display: none;
		}

	/*#available-times:before,
	#available-times:after {
		display: block;
		position: absolute;
		height: 40px;
		left: 0;
		right: 8px;
		z-index: 1;
		pointer-events: none;
	}
		#available-times.show-top:before,
		#available-times.show-bottom:after {
			content: '';
		}


		html.touchevents #available-times:before,
		html.touchevents #available-times:after {
			right: 0;
		}

		#available-times:before {
			top: 0;
			background-image: linear-gradient(#FFF, rgba(255,255,255,0));
		}
		#available-times:after {
			bottom: 0;
			background-image: linear-gradient(rgba(255,255,255,0), #FFF);
		}*/

/*	#available-times::-webkit-scrollbar {
		height: 8px;
		width: 8px;
	}

	#available-times::-webkit-scrollbar-thumb {
		width: 8px;
		background-color: #808080;
	}

	#available-times::-webkit-scrollbar-track {
		background-color: #e0e0e0;
	}*/

	#available-times > div.msg {
		box-shadow: 0 0 5px rgba(188, 232, 241,.2);
	}

	body.show-times {
		overflow: hidden;
	}
		body.show-times #available-times {
			display: -webkit-flex;
			display: flex;
		}

	body.hide-time-end #reservation-overview-time-end {
		display: none;
	}

	#available-times > ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
		overflow-y: scroll;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;

		background-color: #FFF;
		box-shadow: 0 0 5px rgba(0,0,0,0.2);

		-webkit-flex: 0 1 auto;
		flex: 0 1 auto;

		min-height: 1px;
		max-height: 100%;
	}
		#available-times > ul:empty {
			display: none;
		}

		#available-times > ul li {
			padding: 10px 7px;
			position: relative;

			border-top: 1px solid #EFEFEF;

			cursor: pointer;
		}
			#available-times > ul li.hour {
				border-top-color: #C0C0C0;
			}

			#available-times > ul li:first-child {
				border-top: 0;
			}
			html.no-touchevents #available-times > ul li:hover {
				background-color: #F5F5F5;
			}
			#available-times > ul li:active {
				background-color: #E1E1E1 !important;
			}

			#available-times > ul li div.times {
				display: -webkit-flex;
				display: flex;

				-webkit-align-items: center;
				align-items: center;
			}
				#available-times > ul li div.times:before {
					display: inline-block;
					width: 25px;
					text-align: center;
					margin-right: 7px;
				}

				#available-times > ul li div.times time {
				}
					#available-times > ul li div.times time.start {
						-webkit-flex-grow: 1;
						flex-grow: 1;

						font-size: 120%;
					}

					#available-times > ul li div.times time.end {
						-webkit-align-self: flex-end;
						align-self: flex-end;

						color: #C0C0C0;
					}
						body.hide-end-time #available-times > ul li div.times time.end {
							display: none;
						}

				#available-times > ul li.duration-warning div.times time.end {
					color: #FF8800;
					font-size: 110%;

					display: inline-block;
				}
					#available-times > ul li.duration-warning div.times time.end:after {
						display: inline-block;

						font-family: 'intranet';
						content: '\f069';

						font-size: 9pt;

						margin-left: 5px;
					}

			#available-times > ul li div.duration-info,
			#available-times > ul li div.status {
				font-size: 9pt;

				margin-left: 30px;
				margin-top: 3px;

				color: #808080;
			}
				#available-times > ul li div.duration-info {
					font-style: italic;
					color: #FF8800;
				}

				#available-times > ul li div.status.status-1,
				#available-times > ul li div.status.status-4 {
					color: #008800;
				}

				#available-times > ul li div.status.status-5,
				#available-times > ul li div.status.status-6 {
					color: #0074b0;
				}

				#available-times > ul li div.status.status-2,
				#available-times > ul li div.status.status-0 {
					color: #CC0000;
				}

/*
	Info messages
*/

	#restaurant-menu-info,
	#restaurant-menu-type-info {
		white-space: pre-line;
	}

#reservation-form .collapse-section {
	overflow: hidden;

	visibility: hidden;
	max-height: 0;
	opacity: 0;

	pointer-events: none;

	transition: visibility .4s ease-in-out,
				max-height .4s ease-in-out,
				opacity .4s ease-in-out;
}
	#reservation-form .collapse-section.show {
		visibility: visible;
		max-height: 500px;
		opacity: 1;

		pointer-events: all;
	}

	#reservation-form > div > div.msg.msg-info {
		margin-top: 3px;
		margin-bottom: 8px;

		transition-property: visibility, opacity, max-height, padding, margin;
		transition-duration: .3s;
		transition-timing-function: ease-in-out;
	}

	#reservation-form > div.success > div.msg.msg-info {
		visibility: hidden;
		opacity: 0;
		max-height: 0;
		padding: 0 25px;
		margin: 0;
	}

#reservation-overview {
	margin-bottom: 10px;

	height: 55px;
	overflow: hidden;

	align-items: flex-start;
}

	#reservation-overview button {
		height: 50px;
		line-height: 50px;
	}

	#reservation-overview span {
		height: 50px;
		border: 1px solid #E1E1E1;
		border-radius: 3px;
		margin-left: 3px;

		background-image: linear-gradient(#FFF, #F4F4F4);

		flex-grow: 1;
		flex-shrink: 0;

		overflow: hidden;
	}

#reservation-overview-wrapper {
	overflow-x: auto;
	overflow-y: hidden;

	padding-bottom: 25px;

	flex-grow: 1;
	-webkit-flex-grow: 1;

	-webkit-overflow-scrolling: touch;

	position: relative;
}
	#reservation-overview-wrapper:before,
	#reservation-overview-wrapper:after {
		width: 0;

		position: absolute;

		left: 0;
		top: 0;
		bottom: 0;

		box-shadow: -10px 10px 0px 1px rgba(0,0,0,.3);
	}

	#reservation-overview-wrapper:after {
		right: 0;

		box-shadow: -10px 0px 10px 1px rgba(0,0,0,.3);
	}


	#reservation-overview-wrapper::-webkit-scrollbar {
		height: 2px;
		width: 2px;
	}

	#reservation-overview span:before,
	#reservation-overview span:after {
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		display: block;
		text-align: center;
		padding: 0px 3px;
	}

	#reservation-overview span:before {
		content: attr(data-title);
		font-size: 75%;
		color: #808080;
		height: 20px;
		line-height: 20px;
		margin-top: -1px;
	}

	#reservation-overview span[data-value]:after {
		margin-top: -1px;
		font-weight: 500;
		font-size: 110%;
		content: attr(data-value);
		height: 30px;
		line-height: 30px;

		letter-spacing: -.5px;
	}

	#reservation-overview-menu,
	#reservation-overview-location {
		flex-shrink: 1;
		flex-basis: 90px;
	}

	body.hide-end-time #reservation-overview-time-end {
		display: none;
	}

/* TOGGLE EXPAND */
	.toggle-expand {
		display: none;

		opacity: 0;
		max-height: 0;
		padding: 0;
		overflow: hidden;

		transition: all .3s ease-in-out;
	}
		form section.flex.toggle-expand {
			display: none;
			min-height: 0;
		}

		.toggle-expand.visible {
			display: block;
		}
			.toggle-expand.flex.visible {
				display: -webkit-flex;
				display: flex;
			}

		.toggle-expand.show {
			max-height: 500px;
			opacity: 1;
		}

/*
	Reservation pax toggle
*/

#reservation-pax > div {
	max-height: 0;
	opacity: 0;
	visibility: hidden;

	transition: max-height .3s ease-in-out,
				opacity .3s ease-in-out,
				visibility .3s ease-in-out;

	overflow: hidden;
	pointer-events: none;
}
	#reservation-pax > div.show {
		max-height: 100px;
		opacity: 1;
		visibility: visible;

		pointer-events: all;
	}

/* CALENDAR */

	#calendar-date-wrapper {
		border: 1px solid #C0C0C0;
		border-radius: 3px;
		position: absolute;

		background-color: #FFF;
		box-shadow: 0 0 5px rgba(0,0,0,.3);

		width: 300px;

		z-index: 10;

		display: none;
	}
		body.show-calendar #calendar-date-wrapper {
			display: block;
		}

/* RESERVATION COMPLETE */

#reservation-complete h2 {
	display: -webkit-flex;
	display: flex;

	-webkit-align-items: center;
	align-items: center;
}
	#reservation-complete h2::before {
		display: inline-block;
		margin-right: 10px;

		font-family: 'intranet';
	}
		#reservation-complete.success h2::before {
			content: '\e91a';

			color: #008800;
		}

		#reservation-complete.info h2::before {
			content: '\f05a';

			color: #0074b0;
		}

#reservation-complete div.buttons {
	margin-top: 10px;
	text-align: center;
}


/* SPINNER */
	@keyframes spinner {
		0% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(360deg);
		}
	}

	@-moz-keyframes spinner {
		0% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(360deg);
		}
	}

	@-webkit-keyframes spinner {
		0% {
			transform: rotate(0deg);
			-webkit-transform: rotate(0deg);
		}
		100% {
			transform: rotate(360deg);
			-webkit-transform: rotate(360deg);
		}
	}