@import url("framework.less");
@import url("fonts.less");
@import url("icomoon.less");
@import url("venobox.css");

body											{ font-family: 'Ubuntu'; font-weight: normal !important; background: @background; -webkit-text-size-adjust: none; overflow-x: hidden;
	&.no-scroll 								{ overflow:hidden;}
}
iframe:nth-of-type(1) 							{ .absolute; z-index:-1; }

/* ----------------------
Colors
---------------------- */
@orange:										#EF7B0B;
@gray:											#F8F8F8;
@line:											#D3D3D3;
@linedarker:									#F0F0F0;
@green:											#06D144;
@text:											#53585F;
@background:									#E7E7E7;
@sidebar:										#EEEEEE;
@black:											#515151;

/* ----------------------
Fonts / Text
---------------------- */
.ubuntu											{ font-family: 'Ubuntu'; font-weight: normal !important; }
.ubuntumedium									{ font-family: 'Ubuntu Medium'; font-weight: normal !important; }
.ubuntubold										{ font-family: 'Ubuntu Bold'; font-weight: normal !important; }
.icomoon										{ font-family: 'icomoon'; font-weight: normal !important; }

p												{ font-size: 14px; line-height: 30px; margin-bottom: 30px; color: @text;
	a											{ color: @orange; text-decoration: none; }
}

h1, h2, h3, h4, h5, h6							{ .ubuntubold; color: @text;
	strong										{ color: @orange; }
}

.wysiwyg										{ margin-top: 30px !important;
	h1											{ font-size: 28px; margin-bottom: 40px; }
	h2											{ font-size: 24px; margin-bottom: 24px; }
	h3											{ font-size: 22px; margin-bottom: 22px; }
	h4											{ font-size: 20px; margin-bottom: 20px; }
	h5											{ font-size: 18px; margin-bottom: 18px; }
	h6											{ font-size: 16px; margin-bottom: 16px; }
	&.first-paragraph							{
		p										{
			&:first-of-type						{ font-size: 16px; }
		}
	}
	ul											{ .fl; width: 100%; margin-bottom: 30px;
		li										{ .fl; .relative; width: 100%; font-size: 14px; line-height: 30px; color: @text;
			&:before							{ .fl; .icomoon; width: 15px; height: 15px; color: #FFF; margin-top: 7px; margin-right: 10px; font-size: 8px; line-height: 15px; text-indent: 4px; content: "\e601"; background: @green; .border-radius(100%); }
			a									{ color: @orange; }
		}
	}
	ol.table-havi								{ .fl; width: 100%; margin-bottom: 60px; border-bottom: 1px solid darken(#f0f0f0,5%);

		li										{ .fl; width: 100%; border-top: 1px solid darken(#f0f0f0,5%); background: @gray; color: @text; padding: 10px; font-size: 13px;
// 			a									{ .fl; width: 100%; color: @text; padding: 10px; font-size: 13px;
// 				&:hover							{ color: @orange; }
// 			}

            &:first-child                       { font-weight: bold;
                &:hover                         { color: @text; }
            }
		}
	}

	&.side										{ margin-top: 110px !important; }
}

	/* ------------------
	Mobile / Tablet
	------------------ */
	@media only screen and (max-width: 640px) {

		.wysiwyg								{ width: 100%;
			&.side								{ margin-top: 0 !important; margin-bottom: 20px; }
			&.ac								{ .al; }
			ol.table-havi						{ margin-left: -20px; width: ~"calc(100% + 40px)";
				li								{ font-size: 10px;
					&:first-child				{ .none; }
					div							{
						&:before				{ .fl; width: 100%; font-weight: bold; margin-bottom: 4px; }
						&:nth-child(1):before	{ content: "Datum"; }
						&:nth-child(2):before	{ content: "Prijs"; }
						&:nth-child(3):before	{ content: "Tickets vrij"; }
						&:nth-child(4):before	{ content: "Toelichting"; }
					}
				}
			}
		}

	}
	@media only screen and (min-width: 640px) and (max-width: 905px) {

		.wysiwyg								{
			&.side								{ margin-top: 0 !important; margin-bottom: 20px; }
			&.ac								{ .al; }
		}

	}

/* ----------------------
Transitions
---------------------- */
.easeInOut										{ .transition(all .2s ease-in-out); }
.easeInOutSlow									{ .transition(all .3s ease-in-out); }

/* ----------------------
Border radius
---------------------- */
.border-radius									{ overflow: hidden; .border-radius(3px); }

/* ----------------------
Buttons
---------------------- */
a.button										{ .inlineblock; .ubuntubold; .relative; .easeInOut; .al; background: @orange; color: #FFF; font-size: 12px; text-decoration: none; padding: 19px 50px 17px 20px; overflow: hidden; min-width: 180px; .border-radius(44px);

	&.green										{ background: @green;
		&:hover									{ background: lighten(@green, 3%); }
	}
	&:hover										{ padding: 19px 20px 17px 50px; background: lighten(@orange, 5%);
		&:before								{ .opacity(1); .transform(translateX(0) scale(1)); }
		&:after									{ .opacity(0); .transform(translateX(200%) scale(.5)); }
	}
	&:before									{ .icomoon; .absolute; .easeInOut; left: 20px; width: 20px; height: 20px; margin-top: -6px; line-height: 21px; text-indent: 5px; content: "\e601"; border: 1px solid #FFF; .opacity(0); .transform(translateX(-200%) scale(.5)); .border-radius(100%); }
	&:after										{ .icomoon; .absolute; .easeInOut; right: 20px; width: 20px; height: 20px; margin-top: -6px; line-height: 21px; text-indent: 5px; content: "\e601"; border: 1px solid #FFF; .opacity(1); .transform(translateX(0) scale(1)); .border-radius(100%); }

	&.full										{ width: 100%; }
	&.square									{ .border-radius(2px); }
	&.neg-margin								{ margin-top: -75px; margin-bottom: 30px; }

	&.disabled									{ pointer-events: none; opacity: .5; }

	&--new										{ .ac; padding: 20px 30px; font-size: 15px; margin-top: 0px;
		&:hover									{ padding: 20px 30px; background: darken(@orange, 5%); }
		&:before,
		&:after									{ .none; }
	}

}

.button--new									{ .ac; .inlineblock; .ubuntubold; .relative; .easeInOut; background: @orange; color: #FFF; padding: 20px 30px; font-size: 15px; margin-top: 0px; overflow: hidden; min-width: 180px; .border-radius(44px);

	&:hover										{ padding: 20px 30px; background: darken(@orange, 5%); }

	&:before,
	&:after										{ .none; }
}

	/* ------------------
	Mobile / Tablet
	------------------ */
	@media only screen and (max-width: 640px) {

		a.button								{ width: 100%; margin-bottom: 10px;
			&.neg-margin						{ width: 100%; margin-top: 0; margin-bottom: 30px; }
		}

	}

/* ----------------------
Padding / Margin
---------------------- */
.padding-top									{ padding-top: 20px; }
.padding-right									{ padding-right: 20px; }
.padding-bottom									{ padding-bottom: 20px; }
.padding-left									{ padding-left: 20px; }

.margin-top										{ margin-top: 60px !important; }
.margin-right									{ margin-right: 20px !important; }
.margin-bottom									{ margin-bottom: 60px !important; }
.margin-left									{ margin-left: 20px !important; }

	/* ------------------
	Mobile / Tablet
	------------------ */
	@media only screen and (max-width: 640px) {

		.margin-bottom							{ margin-bottom: 30px !important; }
		.margin-top								{ margin-top: 30px !important; }

	}


.line-top:before								{ .absolute; left: 0; top: 0; content: ""; height: 1px; background: @line; width: 100%; max-width: 1300px; }
	/* ------------------
	Large screens
	------------------ */
	@media only screen and (min-width: 1130px) {

		.line-top:before						{ left: 50%; margin-left: -650px; }

	}

/* ----------------------
Main
---------------------- */
.wrapper										{ .fl; .relative; width: 100%; max-width: 1600px; margin: 0 auto; background: #FFF; padding-top: 73px;
	
	&:before									{ .fixed; margin-left: -800px; left: 50%; content:""; top: 0; width: 100%; height: 100%; max-width: 1600px; background: @black; z-index: 777; opacity: 0; visibility: hidden; transition: all .2s ease-in-out; }

	.section									{ .fl; .relative; .cb; width: 100%; max-width: 1600px; overflow: hidden;
		.cntr									{ width: 100%; max-width: 1300px; margin: 0 auto; padding: 0 20px;
			&.narrow							{ max-width: 860px; }
			&.medium							{ max-width: 1180px; }
		}
		&.gray									{ background: @gray; }
	}
	.right										{ float: right !important }

	.bloks-front								{ .fl; width: 100%; margin-top: 30px; }
	
	&.has-dark-overlay							{
		&:before								{ opacity: 0.6; visibility: visible; }
	}
}

	/* ------------------
	Large screens
	------------------ */
	@media only screen and (min-width: 1600px) {

		.wrapper								{ margin-left: -800px; left: 50%;
			.section							{ margin-left: -800px; left: 50%; }
		}

	}
	/* ------------------
	Large screens
	------------------ */
	@media only screen and (max-width: 768px) {

		.wrapper								{
			.section							{
				.cntr							{
					&.no-padding				{ padding: 0; }
				}
			}
		}

	}

	/* ----------------------
	Header
	---------------------- */
	.header										{ .fixed; top: 0; left: 0; background: #FFF; width: 100%; max-width: 1600px; z-index: 999; border-bottom: 1px solid #eee;
		.cntr									{ width: 100%; max-width: 1300px; margin: 0 auto; padding: 0 20px;
			.logo								{ .fl; width: 220px; height: 43px; overflow: hidden; text-indent: -999px; margin-top: 14px; background: url('../images/retina/logo-x2.png') top left no-repeat; background-size: 220px; }
			.nav								{ .fr;
				> ul							{ .fl;
					> li						{ .fl; .relative; overflow: hidden;
						> a						{ .fl; color: @text; font-size: 13px; padding: 30px 23px; border-right: 1px solid @linedarker; text-decoration: none;
							&:hover				{ color: #FFF; background: @orange; }
						}
						&:first-child			{
							> a					{ border-left: 1px solid @linedarker; }
						}
						&.current_page_item		{
							&:before			{ .absolute; top: 0; left: -1px; content: ""; height: 3px; background: @orange; width: 100%; }
						}
					}
				}
			}
		}
	}
	
	#menu-hoofdmenu-2018						{ .fn; display: flex;
		> li 									{ .fn; position: unset; overflow: visible; 
			> ul 								{ .absolute; .fn; display: flex; flex-direction: row; width: 100%; max-width: 1300px; bottom: 0; left: 50%; transform: translateY(100%) translateX(-50%); background: white; 
				> li 							{ .fn; 
					> a							{ .block; .fn; border-left: 0; border-right: 0; }
				}
			}
		}
	}

	.header-sub									{ height: 115px; background: url('../images/header-sub.jpg') top left no-repeat;

	}
	
	@media only screen and (max-width: 1140px) {
	
	.header										{ 
		.cntr									{
			.nav								{
				> ul 							{
					> li 						{
						> a 					{ padding: 30px 12px; }
					}
				}
			}
		}
	}
	
	}
	
	/* ----------------------
	Submenu 2019
	---------------------- */
	.submenu									{ position: fixed; width: 100vw; max-width: 1300px; left: 50%; top: 73px; z-index: 888; opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(10px); transition: all .3s ease-in-out;
		&__wrapper								{ .relative; display: flex; flex-direction: row; overflow: hidden; background: white; } 
		
		&__title								{ .ubuntubold; font-size: 24px; line-height: 32px; color: @orange; margin-bottom: 12px; text-decoration: none; pointer-events: none }
		
		&__content								{ flex-basis: 66.666667%; max-width: 66.666667%; padding: 72px 124px; }
		
		.submenu-cta							{ flex-basis: 33.333333%; max-width: 33.333333%; }
		
		ul 										{ .fn; display: flex; flex-direction: row; flex-wrap: wrap;
			li 									{ flex-basis: 50%; max-width: 50%; padding: 20px 0px;
				a								{ color: @black; opacity: 0.8; text-decoration: none; transition: opacity .3s ease-in-out;
					span						{ margin-left: 16px; 
						svg						{ transition: transform .2s ease-in-out; }
					}
					
					&:hover						{ opacity: 1; 
						span 					{ 
							svg					{ transform: translateX(4px); }
						}
					}
				} 
			}
		} 
	}

	@media only screen and (min-width: 992px) {
		#menu-hoofdmenu-2018						{
			> li 									{
				&:hover								{
					> .submenu						{ opacity: 1; visibility: visible; transform: translateX(-50%) translateY(1px); }
				}
			}
		}
	}

	.submenu-cta								{ .relative; 
		&__background							{ .absolute; width: 100%; height: 100%;
			img									{ width: 100%; height: 100%; object-fit: cover; }
			
			&:before							{ .absolute; content:""; width: 100%; height: 100%; background-color: @black; top: 0; left: 0; opacity: 0.4; }
		}
		
		&__title,
		&__text									{ color: white; }
		
		&__title								{ .ubuntubold; font-size: 24px; line-height: 32px; margin-bottom: 16px; }
		&__text									{ font-size: 18px; opacity: 0.8; }
		
		&__content								{ .relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; z-index: 2; padding: 64px; }
	}

	/* ----------------------
	Trigger
	---------------------- */
	.trigger									{ .none; .absolute; width: 25px; right: 20px; top: 25px; z-index: 999; .transition(all .5s cubic-bezier(0.175,0.885,0.335,1));
		div										{ height: 3px; .transition(all .3s cubic-bezier(0.175,0.885,0.335,1)); background: @orange; margin: 4px auto; backface-visibility: hidden; }
		span									{ .fl; .relative; font-size: 16px; text-transform: uppercase; margin-top: 50%; left: -10px; transform: translate(-100%, -50%); color: @orange; }
		&.on									{ opacity: .5;
			.one { transform: rotate(45deg) translate(5px, 5px); visibility: visible; opacity: 1;}
			.two { transform: rotate(-45deg) translate(0, 0);}
			.three 								{ opacity: 0; .transform(translate(0px,-5px)); }
		}
	}

	/* ------------------
	Large screens
	------------------ */
	@media only screen and (min-width: 1600px) {

		.header									{ left: 50%; margin-left: -800px; }

	}
	/* ------------------
	Mobile / Tablet
	------------------ */
/*
	@media only screen and (min-width: 768px) and (max-width: 830px) {

		.header									{
			.cntr								{
				.nav							{
					ul							{
						li						{
							a					{ padding: 30px 16px; }
						}
					}
				}
			}
		}

	}
*/
	@media only screen and (max-width: 991px) {

		.header									{
			&.sub-nav{
				.cntr .nav .submenu {transform: translateX(0);}
				.trigger {
					div {  width: 50%; position: relative; left: 4px;}
					.one { transform: rotate(45deg) translate(-1px, 5px); visibility: visible; opacity: 1;}
					.two { transform: rotate(-45deg) translate(-6px, 0);}
					.three {}
				}
			}
			.cntr								{
				.logo							{ margin-bottom: 6px; margin-top: 22px; width: 160px; background-size: 160px; }
				.nav							{ .easeInOut; width: 100vw; height: ~"calc(100vh - 72px)"; position: fixed; top: 72px;left:0; transform: translateX(100%); background-color: white;
					ul							{ .fl; width: 100%; flex-direction: column;
						li						{ .fl; width: 100%;
							a					{ .fl; width: 100%; border-right: none; border-bottom: 1px solid @linedarker; padding: 18px 10px;
								&:hover			{ background: #FFF; color: @text; }
							}
							&:first-child		{
								a				{ border-left: none; }
							}
							&.current_page_item	{
								&:before		{ .none; }
							}
							.submenu { top:0; left: 0; height: ~"calc(100vh - 72px)"; background: white; transform: translateX(100%); opacity: 1; visibility: visible;
								&__wrapper { overflow: visible; background: white;}
								&__content { max-width: 100%; flex-basis: 100%; padding: 0;
									> a { text-decoration: none; }
								}
								&-cta { display: none;}
								&__title { padding: 15px; margin-bottom: 0; pointer-events: all; }
								&__items {
									li { padding:15px; border-bottom: 1px solid @linedarker; max-width:100%; flex-basis: 100%;
										&:first-of-type { border-top: 1px solid @linedarker; }
										a { padding: 0; border: none !important;
											span { float:right;}
										}
									}
								}
							}
						}
					}
					&.show						{ transform: translateX(0) }
				}
			}

		}
		.trigger								{ .block; }

	}

.home-slider									{
	.bxslider									{
		li										{ .relative; height: 488px;
			a.absolute-wrap						{ .absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 1; }
			&:before							{ .gradient-left; .absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; .opacity(.3); }
			&:after								{ .gradient; .absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; .opacity(.7); }
			
			img 								{ height: 100%; object-fit: cover; }
		}
	}
	.cntr										{ .absolute; width: 100%; max-width: 1300px; padding: 0 20px; margin: 0 auto; z-index: 2;
		.text									{ .fl; width: 350px;
			span								{ .fl; .ubuntubold; font-size: 15px; right: 0; background: @orange; color: #FFF; padding: 7px 7px 5px; margin-bottom: 10px; line-height: 1; .border-radius(12px); }
			h2									{ .fl; width: 100%; color: #FFF; font-size: 44px; }
			h3									{ .fl; .ubuntumedium; width: 100%; color: #FFF; font-size: 38px; }
			p									{ .fl; width: 100%; color: #FFF; font-size: 20px; margin: 10px 0px; }
		}
	}
	&.half										{ .relative;
		.bx-wrapper								{
			.cntr								{ left: 0; margin-left: 0 !important; bottom: 50px;
				.text							{ width: 100%; }
			}
			.bx-controls						{ left: 0; margin-left: 0 !important; }
			li									{
				&:before						{ .none; }
				&:after							{ .gradient; .absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; .opacity(.6); }
			}
		}
		&:before								{ .none; .absolute; content: ""; width: 100px; height: 100px; background: url('../images/stipt-logo.png') top center no-repeat; top: 20px; right: 20px; z-index: 1; }
	}
}

	/* ------------------
	Mobile / Tablet
	------------------ */
	@media only screen and (max-width: 640px) {

		.home-slider							{ .none;
			.cntr								{
				.text							{
					h2							{ font-size: 34px; }
					h3							{ font-size: 24px; }
					p							{ .none; }
				}
			}
			.bx-wrapper 						{
				.bx-controls					{ .none; }
			}
			&.half								{ .col-1-1; .block;
				.bx-wrapper						{
					.bx-controls				{ .block; }
				}
				.cntr							{
					.text						{
						p						{ .block; font-size: 18px; line-height: 22px; }
					}
				}
				&:before						{ .none; }
			}
		}

	}
	@media only screen and (min-width: 640px) and (max-width: 768px) {

		.home-slider							{
			.cntr								{
				.text							{
					h2							{ font-size: 34px; }
					h3							{ font-size: 24px; }
				}
				.button							{ .none; }
			}
			&.half								{ .col-1-1;
				.bx-wrapper						{
					.bx-controls				{ .block; }
				}
				.cntr							{
					.text						{
						p						{ .block; font-size: 18px; }
					}
				}
				&:before						{ .none; }
			}
		}

	}

	@media only screen and (max-width: 1250px) {
		.home-slider.half 						{ width: 100%; max-height: 500px; }
		.bx-wrapper 							{ max-height: 500px;
			img 								{ max-height: 500px; }
		}
	}

.galerij										{ .fl; width: 100%;
	.bx-wrapper									{
		.cntr									{ left: 0; margin-left: 0 !important; bottom: 50px;
			.text								{ width: 100%; }
		}
		.bx-controls							{ left: 0; margin-left: 0 !important; }
		li										{
			&:before							{ .none; }
			&:after								{ .gradient; .absolute; bottom: 0; left: 0; width: 100%; height: 50%; content: ""; .opacity(.6); }
		}
	}
}

@media only screen and (max-width: 640px) {

	.galerij									{ margin-left: -20px; width: ~"calc(100% + 40px)"; }

}

.bx-wrapper 									{ .relative; width: 100%; margin: 0 auto; padding: 0; *zoom: 1;
	img											{ .block; width: 100%; height: auto;}
	.bx-controls								{ .absolute; width: 100%; max-width: 1300px; padding: 10px 20px 0; margin: 0 auto; bottom: 18px; z-index: 3;
		.bx-controls-direction					{ .fl;
			.bx-prev							{ .fl; .relative; width: 20px; height: 20px; font-size: 0; color: #FFF;
				&:after							{ .icomoon; .absolute; right: 0; top: 0; width: 20px; height: 20px; font-size: 12px; line-height: 21px; text-indent: 4px; content: "\e600"; border: 1px solid #FFF; .opacity(1); .border-radius(100%); }
			}
			.bx-next							{ .fl; .relative; width: 20px; height: 20px; font-size: 0; color: #FFF; margin-left: 8px;
				&:after							{ .icomoon; .absolute; right: 0; top: 0; width: 20px; height: 20px; font-size: 12px; line-height: 21px; text-indent: 5px; content: "\e601"; border: 1px solid #FFF; .opacity(1); .border-radius(100%); }
			}
		}
		.bx-pager								{ .fr;
			.bx-pager-item						{ .fl; margin-left: 5px;
				a								{ .fl; .relative; width: 20px; height: 20px; font-size: 0; color: #FFF; border: 1px solid #FFF; .border-radius(100%);
					&.active					{
						&:after					{ .opacity(1) !important; .transform(scale(1)) !important; }
					}
					&:hover						{
						&:after					{ .opacity(.5); .transform(scale(.5)); }
					}
					&:after						{ .absolute; .easeInOutSlow; background: #FFF; width: 12px; height: 12px; top: 3px; left: 3px; content: ""; .opacity(0); .transform(scale(0)); .border-radius(100%); }
				}
			}
		}
		&:before								{ .absolute; content: ""; height: 1px ; top: -1px; left: 20px; width: 50%; max-width: 1260px; background: #FFF; }
		&:after									{ .absolute; content: ""; height: 1px ; top: -1px; right: 20px; width: 50%; max-width: 1260px; background: #FFF; }
	}
}
.bestemmingen-slider							{
	.bx-wrapper									{
		.bx-controls							{ .fl; .relative; left: auto !important; bottom: auto !important; margin-left: 0 !important;
			.bx-prev							{ .fl; .relative; width: 20px; height: 20px; font-size: 0; color: @orange;
				&:after							{ .icomoon; .absolute; right: 0; top: 0; width: 20px; height: 20px; font-size: 12px; line-height: 21px; text-indent: 4px; content: "\e600"; border: 1px solid @orange; .opacity(1); .border-radius(100%); }
			}
			.bx-next							{ .fl; .relative; width: 20px; height: 20px; font-size: 0; color: @orange; margin-left: 8px;
				&:after							{ .icomoon; .absolute; right: 0; top: 0; width: 20px; height: 20px; font-size: 12px; line-height: 21px; text-indent: 5px; content: "\e601"; border: 1px solid @orange; .opacity(1); .border-radius(100%); }
			}
		}
	}
}
.bestemmingen-slider-controls					{ .fl; width: 100%; margin-bottom: 20px;
	.pager										{
		a										{ .fr; }
		&.bestemmingen-prev						{
			a									{ .ar; .fl; padding: 19px 20px 17px 50px;
				&:hover							{ padding: 19px 50px 17px 20px;
					&:before					{ .transform(translateX(0) scale(1)); }
					&:after						{ .transform(translateX(-200%) scale(.5)); }
				}
				&:before						{ .al; right: 20px; left: auto; content: "\e600"; .transform(translateX(200%) scale(.5)); }
				&:after							{ .al; left: 20px; right: auto; content: "\e600"; }
			}
		}
	}
}

	/* ------------------
	Large screens
	------------------ */
	@media only screen and (min-width: 1300px) {

		.bx-wrapper								{
			.cntr,
			.bx-controls						{ margin-left: -650px !important; left: 50%; }
		}
		.galerij								{
			.bx-wrapper							{
				.cntr,
				.bx-controls					{ margin-left: 0 !important; left: 0; }
			}
		}

	}

	/* ------------------
	Large screens
	------------------ */
	@media only screen and (max-width: 1300px) {

		.bx-wrapper								{
			.bx-controls						{
				&:before						{ left: 0; max-width: 100%; }
				&:after							{ right: 0; max-width: 100%; }
			}
		}

	}

/* ------------------
Stipt home
------------------ */
.stipt-home										{ padding: 20px 50px; max-width: 785px;

}
	/* ------------------
	Mobile / Tablet
	------------------ */
	@media only screen and (max-width: 1250px) {
	.stipt-home 								{ width:100%; }
	}
	@media only screen and (max-width: 768px) {

		.stipt-home								{ .col-1-1; padding: 20px; }

	}

/* ------------------
Stipt home
------------------ */
.list											{ .fl; width: 100%; padding-top: 20px; border-top: 1px solid @line;
	ul											{ .fl; width: 100%;
		li										{ .fl; width: 50%; margin-bottom: 10px; padding-right: 20px;
			a									{ .fl; .relative; text-decoration: none; width: 100%; color: @text; font-size: 16px; margin-bottom: 10px; padding-left: 30px; padding-right: 75px; padding-bottom: 10px; border-bottom: 1px solid @line; line-height: 25px;
				span							{ .absolute; .ubuntubold; font-size: 15px; right: 0; background: @orange; color: #FFF; padding: 7px 7px 5px; line-height: 1; .border-radius(12px); }
				&:after							{ .icomoon; .absolute; color: @orange; left: 0; top: 0; width: 20px; height: 20px; font-size: 12px; line-height: 21px; text-indent: 5px; content: "\e601"; border: 1px solid @orange; .opacity(1); .border-radius(100%); }
			}
			&:before							{ .none; }
		}
	}
}

	/* ------------------
	Mobile / Tablet
	------------------ */
	@media only screen and (max-width: 640px) {

		.list									{
			ul									{
				li								{ .col-1-1; padding-right: 0; }
			}
		}

	}

/* ------------------
Testimonials
------------------ */
.testimonials									{ background: url('../images/testimonials-back.jpg') top center no-repeat; background-size: cover; padding: 70px 0 90px;
	.cntr										{ max-width: 780px !important;
		.bxslider								{
			li									{ .relative;
				.text							{ .fl; .relative; top: 20px; width: 100%; padding: 10px 0 30px 130px;
					p							{ color: #FFF; margin-bottom: 0; line-height: 25px;
						&.author				{ .ubuntubold; font-size: 12px; }
					}
					&:before					{ .absolute; content: ""; top: -20px; left: 130px; color: #FFF; width: 30px; height: 20px; background: url('../images/quotes.png') top center no-repeat; background-size: 30px; }
				}
				img.profile						{ .absolute; left: 0; width: 100px; height: 100px; border: 2px solid #FFF; .border-radius(100%); }
			}
		}
		.bx-wrapper .cntr						{ left: 0 !important; margin-left: 0 !important; }
		.bx-wrapper .bx-controls				{ left: 0 !important; margin-left: 0 !important; padding: 10px 0 0; bottom: -40px;
			&:before							{ left: 0; }
			&:after								{ right: 0; }
		}
	}
}

	/* ------------------
	Mobile / Tablet
	------------------ */
	@media only screen and (max-width: 640px) {

		.testimonials							{ padding: 20px 0 60px;
			.cntr								{
				.bxslider						{
					li							{
						.text					{ padding: 10px 0 20px;
							&:before			{ left: 0; }
						}
						img.profile				{ .none; }
					}
				}
			}
		}

	}

/* ------------------
Bloks
------------------ */
a.blok											{ .relative; padding: 0 5px; margin-bottom: 10px;
	.inner-wrap									{ .relative; .border-radius; width: 100%; /* height: 100%; */ left: 0; top: 0; overflow: hidden; background: @orange; height: 230px; overflow: hidden;
		.inner									{ .absolute; padding: 15px; width: 100%; bottom: 0; z-index: 1;
			h3									{ .relative; color: #FFF; z-index: 1; padding-top: 13px; padding-right: 30px; line-height: 20px;
				&:before						{ .absolute; content: ""; height: 1px ; top: -1px; left: 0; width: 100%; background: #FFF; }
				&:after							{ .icomoon; .absolute; right: 0; top: 10px; width: 20px; height: 20px; font-size: 12px; line-height: 21px; text-indent: 5px; content: "\e601"; border: 1px solid #FFF; .opacity(1); .border-radius(100%); }
			}
			p									{ .relative; .easeInOut; color: #FFF; margin-bottom: 10px; z-index: 1; line-height: 22px; .opacity(0); .transform(translateY(10px)); }
			&:after								{ .gradient; .absolute; .border-radius; .easeInOutSlow; top: 0; left: 0; width: 100%; height: 100%; content: ""; }
			&.no-gradient						{
				&:after							{ .none; }
			}
		}
		.thumbnail-image						{ .absolute; .border-radius; width: 100%; height: 100%; top: 0; left: 0; z-index: 0; }
		img										{ .fl; .border-radius; width: 100%; /* height: auto; */ height: 100%; object-fit: cover; }
	}
	&.line										{
		.inner-wrap								{ border: 1px solid @line;  }
	}
	&.grid-blok									{ height: 181px;
		&:nth-child(3),
		&:nth-child(4),
		&:nth-child(8)							{ width: 50%;
			img									{ margin-top: -100px; }
		}
		&.bus									{
			&:nth-child(3),
			&:nth-child(4),
			&:nth-child(8)						{ width: 25%;
				img								{ margin-top: 0; }
			}
			img									{ width: 110%; }
		}
	}
	/* ------------------
	Hover
	------------------ */
	&:hover										{
		.inner-wrap								{
			.inner								{
				p								{ .opacity(1); .transform(translateY(0)); }
				&:after							{ .opacity(.5); }
			}
			img									{ .opacity(.1); }
			.thumbnail-image					{ .opacity(.1); }
		}
	}
}

	
	/* ------------------
	Tablet
	------------------ */
	@media only screen and (max-width: 768px) {

		a.blok									{
			&.col-1-4							{ .col-1-2; } 
		}

	}
	
	/* ------------------
	Mobile
	------------------ */
	@media only screen and (max-width: 580px) {

		a.blok									{
			&.col-1-4							{ .col-1-1; } 
		}

	}
	
	

	/* ------------------
	Mobile / Tablet
	------------------ */
	@media only screen and (max-width: 640px) {

		a.blok									{
			&.col-1-5							{ .col-1-1; margin-bottom: 20px; }
			&.grid-blok							{ width: 100% !important; }
		}

	}
	@media only screen and (min-width: 640px) and (max-width: 768px) {

		.news									{
			a.blok								{
				&.col-1-5						{ .col-1-1; margin-bottom: 20px; }
				&.grid-blok						{ width: 50% !important; }
			}
		}
		a.blok									{
			&.col-1-5							{ .col-1-3; margin-bottom: 20px; }
		}

	}
	@media only screen and (min-width: 768px) and (max-width: 880px) {

		a.blok									{
			&.col-1-5							{ .col-1-3; margin-bottom: 20px; }
		}

	}
	@media only screen and (min-width: 880px) and (max-width: 1024px) {

		a.blok									{
			&.col-1-5							{ .col-1-4; margin-bottom: 20px; }
		}

	}

/* ------------------
Bestemmingen
------------------ */
.bestemmingen									{ .relative; padding: 20px 0 20px 365px; min-height: 985px;
	.feedback-msg								{ .fl; width: 100%; background: @gray; padding: 10px; }
	a.blok										{
		.inner-wrap								{ background: #FFF; }
		&:hover									{
			.inner-wrap							{ background: @orange; }
		}
	}

	&.aanbiedingen								{ padding: 20px 0 20px 0;

	}
}

.loader-overlay									{ .absolute; background: rgba(255, 255, 255, 0.5); width: 100%; height: 100%; padding: 20px 0 20px 365px; left: 0; z-index: 1;

}
.loader {
  font-size: 10px;
  margin: 5em auto;
  text-indent: -9999em;
  width: 11em;
  height: 11em;
  border-radius: 50%;
  background: #FFF;
  background: -moz-linear-gradient(left, @orange 10%, rgba(255, 255, 255, 0) 42%);
  background: -webkit-linear-gradient(left, @orange 10%, rgba(255, 255, 255, 0) 42%);
  background: -o-linear-gradient(left, @orange 10%, rgba(255,255,255,0) 42%);
  background: -ms-linear-gradient(left, @orange 10%, rgba(255, 255, 255, 0) 42%);
  background: linear-gradient(to right, @orange 10%, rgba(255, 255, 255, 0) 42%);
  position: relative;
  -webkit-animation: load3 1.4s infinite linear;
  animation: load3 1.4s infinite linear;
}
.loader:before {
  width: 50%;
  height: 50%;
  border-radius: 100% 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
}
.loader:after {
  background: rgba(255, 255, 255, 0.5);
  width: 75%;
  height: 75%;
  border-radius: 50%;
  content: '';
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
@-webkit-keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

	/* ------------------
	Mobile / Tablet
	------------------ */
	@media only screen and (max-width: 640px) {

		.bestemmingen							{ padding: 20px; width: 100%;
			a.blok								{ width: 100%; }
		}

	}
	@media only screen and (min-width: 640px) and (max-width: 768px) {

		.bestemmingen							{
			a.blok								{ width: 100%; }
		}

	}
	@media only screen and (min-width: 768px) and (max-width: 1180px) {

		.bestemmingen							{
			a.blok								{ width: 50%; }
		}

	}

/* ------------------
Sidebar
------------------ */
.sidebar										{ .absolute; padding: 20px 40px 20px 20px; left: 0; top: 0; background: @sidebar; width: 325px;
	.wysiwyg									{ .relative; z-index: 1;
		h3										{ padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid @line; }
	}
	&:before									{ .absolute; right: 0; top: 0; background: @sidebar; min-height: 200%; width: 700px; content: ""; z-index: 0; }
}
.filter											{ .fl; .relative; width: 100%; z-index: 10; margin-bottom: 30px;
	.selectricWrapper							{ .fl; width: 100%; margin: 0;
		.selectric								{ margin-bottom: 10px;
			.button								{ height: 38px; width: 39px; pointer-events: none;
				&:after							{ .icomoon; .absolute; .easeInOut; top: 14px; font-size: 12px; color: @black; right: 20px; width: 20px; height: 20px; margin-top: -6px; line-height: 21px; text-indent: 4px; content: "\e601"; border: 1px solid @black; .opacity(1); .transform(translateX(0)); .border-radius(100%); }
			}
			.label								{ padding: 11px 10px 9px 10px; }
		}
		.selectricItems							{ top: 39px; }
		&.datepicker							{
			.selectric							{
				.label							{ padding: 0; }
			}
		}
	}
	#datepicker									{ .fl; .relative; width: 100%; padding: 11px 10px 9px 10px; background: none; border: none; cursor: pointer; font-size: 12px; color: #444; line-height: 18px; .placeholder(#444);
		&:after									{ .icomoon; .absolute; .easeInOut; height: 38px; width: 39px; top: 14px; font-size: 12px; color: @black; right: 20px; width: 20px; height: 20px; margin-top: -6px; line-height: 21px; text-indent: 4px; content: "\e601"; border: 1px solid @black; .opacity(1); .transform(translateX(0)); .border-radius(100%); }
	}
}

.selectricItems									{
	li											{
		&:before								{ .none; }
	}
}

	/* ------------------
	Banner Box
	------------------ */
	.banner-box									{ .fl; .relative; width: 100%; padding: 20px; background: @black; color: #FFF; z-index: 3;
		h4										{ color: #FFF; font-size: 20px; }
		p										{ color: #FFF; margin-bottom: 10px; }
		a.button								{ padding: 19px 48px 17px 18px;
			&:hover								{ padding: 19px 18px 17px 48px; }
		}
	}

	/* ------------------
	Mobile / Tablet
	------------------ */
	@media only screen and (max-width: 640px) {

		.sidebar								{ .fl; .relative; padding: 20px; width: 100%;
			input								{ width: 50%; }
			.selectricWrapper					{
				.selectric						{
					.button						{
						&:after					{  }
					}
					.label						{  }
				}
				.selectricItems					{  }
				&.datepicker					{
					.selectric					{
						.label					{  }
					}
				}
			}
			&:before							{ .none; }
		}

	}

/* ------------------
Bestemming
------------------ */
.call-to-action									{ .fl; width: 100%; padding: 0 0 20px 20px; border-bottom: 1px solid @linedarker; border-left: 1px solid @linedarker; overflow: hidden; .transition(all .5s ease-in-out);
	&.off										{ padding: 0; border-bottom: none;
		.button									{ opacity: 0; visibility: hidden; padding: 9px 50px 7px 20px; }
		p										{ visibility: hidden; opacity: 0; max-height: 0; overflow: hidden; margin: 0; }
	}
	p											{ .fl; width: 100%; margin: 10px 0 0; .transition(all .5s ease-in-out); }
}
.selling-points									{ .fl; width: 100%; padding: 20px 20px 0; border-left: 1px solid @linedarker; }
.bottom-buttons									{ padding-top: 30px; border-top: 1px solid @linedarker; }
.price-box										{ .fl; .ubuntubold; width: 100%; color: #FFF; font-size: 22px; padding: 15px 15px 13px; background: @orange; border: 1px solid @orange; .border-radius(4px);
	span.text	                                { .fl; width: 100%; color: @text; font-size: 14px; margin-bottom: 10px; }
}

/* ------------------
Contact
------------------ */
.contact-block									{ background: @gray;
	.map										{ height: 100%;
		.gmnoprint,
		.gm-style-cc							{ .none; }
// 		&:after									{ .gradient-orange; .absolute; bottom: 0; left: 0; width: 100%; height: 80%; content: ""; pointer-events: none; .opacity(.9); }
	}
	.vestigingen-wrap							{ .absolute; bottom: 0; left: 0; z-index: 10; width: 100%;
		.col-1-2								{ padding: 10px;
			h4									{ color: #FFF; }
			p									{ color: #FFF; margin-bottom: 0; font-size: 12px; line-height: 20px;
				a								{ color: #FFF; }
			}
		}
	}
}

.three-column									{ display: flex; flex-direction: row; 
	&__column									{ flex-basis: 33.333333%; max-width: 33.333333%; 
		h4										{ margin-bottom: 10px; }
	}
	&__title									{ font-size: 24px; margin-bottom: 30px; }
}

.three-column-wrapper							{ margin-top: 40px; }


@media only screen and (max-width: 767px) {
.three-column									{ flex-direction: column; 
	&__column									{ flex-basis:100%; max-width: 100%; }
}	
}

/* ------------------
Contact 2018
------------------ */
.contact-2018									{ background: white;
	& .coverage-map__contact a svg 				{ margin-right: 10px; }
	& .wpcf7 form .wpcf7-submit 				{ float: left; }
	& .contactform 								{ padding: 0; padding-right: 30px; }
	p 											{ margin-bottom: 10px; padding: 0 10px; }
	span.voorwaarden 							{ margin-right: 4px; }
	& .grey-card								{ background: #EEEEEE; padding-top: 50px; padding-left: 50px; padding-bottom: 50px; margin-bottom: 25px;}
	& .map 										{ height: 600px; margin-top: 50px; margin-bottom: -50px;
		.gmnoprint 								{ display: none; }
		.gm-control-active						{ display: none; }
		a[title='Open this area in Google Maps (opens a new window)'] { display: none!important; }
	}
	input 										{ -webkit-appearance: none!important; }
	@media (max-width: 680px)					{ margin-top: 30px;
		& .contactform 							{ width: 100%; padding-right: 0; }
		& .col-2-5, .col-3-5					{ width: 100%; margin-bottom: 15px; margin-top: 15px;}
		& .map 									{ margin-bottom: 40px; margin-top: 0; height: 300px; }
	}
}


/* ------------------
Vragenlijst
------------------ */
.vragenlijst									{ .ac;
	#surveyMonkeyInfo							{ .inlineblock;
		iframe									{ .inlineblock; .relative; width: 100%; z-index: 0; height: 3200px; }
	}
}

/* ------------------
Internationaal
------------------ */
.internationaal									{ padding: 30px 50px; background: url('../images/map.png') center center no-repeat; background-size: cover;
	.wysiwyg									{ margin-top: 10px !important; }
}
.internationaal-image							{
	img											{ .fl; width: 100%; height: auto; .opacity(0); }
}

	/* ------------------
	Mobile / Tablet
	------------------ */
	@media only screen and (max-width: 640px) {

		.contact-block							{
			[class*='col-']						{ width: 100%; }
			.vestigingen-wrap					{ width: 100%; }
			.map								{ left: 0; top: 0; width: 100%; height: 400px;
				&:after							{ height: 100%; background: @orange !important; .opacity(.8); }
			}
			.contactform						{ padding: 40px 20px; }
		}
		.internationaal							{ padding: 20px 20px 0; }
		.internationaal-image					{ background: none;
			img									{ .opacity(1); }
		}

	}
	@media only screen and (min-width: 640px) and (max-width: 768px) {

		.contact-block							{
			[class*='col-']						{ width: 100%; }
			.vestigingen-wrap					{ width: 100%; }
			.map								{ left: 0; top: 0; width: 100%; height: 400px;
				&:after							{ height: 100%;  }
			}
			.contactform						{ padding: 40px 20px; }
		}
		.internationaal							{ padding: 20px 20px 0; }
		.internationaal-image					{ background: none;
			img									{ .opacity(1); }
		}

	}

/* ------------------
Forms
------------------ */
form											{ .relative;
	input[type="text"],
	input[type="email"],
	input[type="date"]							{ .fl; .ubuntu; width: 100%; padding: 13px; margin-bottom: 10px; border: 1px solid @line; font-size: 13px; .border-radius; }
	input[type="date"]							{ color: #ABABAB; padding: 12px 13px 11px; }
	textarea									{ .fl; .ubuntu; width: 100%; padding: 13px; margin-bottom: 10px; border: 1px solid @line; font-size: 13px; resize: none; .border-radius; }

	.submit										{ .absolute; top: 18px; right: 10px; color: #FFF; font-size: 14px; width: 25px; height: 25px; cursor: pointer; background: #FFF; border: 1px solid #FFF;
		&:after									{ .icomoon; .absolute; .easeInOut; width: 23px; height: 23px; line-height: 24px; top: 0; left: 0; text-indent: 5px; opacity: 1; cursor: pointer; content: "\e601"; background: @orange; border: 1px solid @orange; .opacity(1); .transform(translateX(0)); .border-radius(100%); }
	}


	label										{ .fl; .relative; margin-top: -20px; text-indent: 24px;
		&.date-label							{ margin-top: 0; text-indent: 0; font-size: 14px; margin-top: -5px; color: @text; }
	}
}

.wpcf7											{ .fl; width: 100%;
	form										{ position: inherit;
		.wpcf7-submit							{ .fr; .ubuntubold; .relative; .easeInOut; cursor: pointer; background: @orange; color: #FFF; font-size: 12px; text-decoration: none; padding: 19px 20px 17px 20px; overflow: hidden; min-width: 180px; border: none; .border-radius(44px);
			&:hover								{ background: lighten(@orange, 5%); }
		}
		.wpcf7-not-valid						{ border: 1px solid red; }

		.wpcf7-response-output					{ .absolute; .ar; top: 0; left: 0; width: 100%; color: #FFF; padding: 7px 50px; font-size: 12px;
			&.wpcf7-validation-errors			{ background: red; }
			&.wpcf7-mail-sent-ok				{ background: @green; }
		}
	}
	.screen-reader-response,
	.wpcf7-not-valid-tip						{ display: none !important; }
}

.payment-status									{ width: 100%; padding: 15px; border: 1px solid @green; background: fade(@green,40%); margin-bottom: 30px; .border-radius(4px);
	h3											{ color: darken(@green,10%); }
	p											{ color: darken(@green,10%); margin-bottom: 0; }

	&.open                                      { border: 1px solid darken(@gray, 5%); background: @gray;
    	h3, p                                   { color: darken(@gray, 60%); }
	}
	&.cancelled                                 { border: 1px solid #e72020; background: fade(#e72020, 40%);
    	h3, p                                   { color: darken(#e72020, 10%); }
    }
}

.contactform									{ .relative; overflow: hidden; padding: 40px 40px 20px;
	h3											{ .fl; width: 100%; padding: 0 10px; margin-bottom: 20px; font-size: 24px; }
	.row										{ .fl; width: 100%;
		.col-1-2,
		.col-1-3,
		.col-3-5,
		.col-2-5,
		.col-1-5								{ padding: 5px 10px;
			span								{ color: @text; font-size: 12px; }
			.col-1-2							{ padding: 5px 10px; }
			&.no-padding						{ padding: 0; }
		}
		.col-1-1								{ padding: 5px 10px; }
			label								{ .fl; font-size: 14px; padding-left: 25px; line-height: 24px; margin-bottom: 20px; color: @text; margin-top: 0; text-indent: 0; }
			input[type="checkbox"]				{ .absolute; margin-top: 5px; margin-right: 8px; }
	}
	&.col-1-1									{ background: #f8f8f8; @media only screen and (max-width: 640px) { padding: 40px 10px 20px }


		.row									{
			.col-1-2							{ @media only screen and (max-width: 640px) { width: 100%; } }
		}
	}

	&.aanbieding-form 							{ padding: 0; margin-left: -10px; margin-bottom: 40px;
		.submit-form							{ .fr; .ubuntubold; .relative; .easeInOut; -webkit-appearance: none; margin-bottom: 20px; height: auto; cursor: pointer; background: @orange; color: #FFF; font-size: 12px; text-decoration: none; padding: 19px 20px 17px 20px; overflow: hidden; min-width: 180px; border: none; .border-radius(44px);
			&:hover								{ background: lighten(@orange, 5%); }
		}
		h2										{ padding: 0 10px; }
	}

	.validation 								{
		&.validation-error						{ color: red !important; }
	}

	.selectricWrapper							{ width: 250px;
		li										{ font-size: 12px; }
	}

}

@media only screen and (max-width: 640px) {

	.contactform								{ width: ~"calc(100% + 40px)";
		.row									{
			.col-1-2,
			.col-1-3,
			.col-3-5,
			.col-2-5,
			.col-1-5							{ width: 100%; }
		}
	}

}

.timely-widget									{
	.ai1ec-agenda-widget-view					{ .ac; /* border-left: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; */ margin: 0; width: 100%; max-width: 100%;
		.ai1ec-date								{ width: 25%; background: #FFF; border-top: none !important; }
		.ai1ec-day								{ font-size: 20px; padding: 5px 0 0; }
		.ai1ec-event > a						{ padding: 16px 0; }
		.ai1ec-event							{  }
	}
	.ai1ec-dropdown								{ display: none !important; }
}

@media only screen and (max-width: 768px) {

	.timely-widget								{
		.ai1ec-agenda-widget-view				{
			.ai1ec-date							{ width: 50%; }
		}
	}

}

@media only screen and (max-width: 640px) {

	.timely-widget								{
		.ai1ec-agenda-widget-view				{
			.ai1ec-date							{ width: 100%; }
		}
	}

}

.ai1ec-modal-content							{ .box-shadow(none) !important;
	.ai1ec-field-label,
	.ai1ec-calendar-link						{ .none; }
}

/* ------------------
Footer
------------------ */
.footer											{ padding: 50px 0;
	.cntr										{
		h4										{ color: @orange; margin-bottom: 5px; }
		p										{ font-size: 12px; line-height: 24px; margin-bottom: 0;
			&.bold								{ .ubuntumedium; }
		}
		form									{
			input[type="submit"]				{ .absolute; top: 20px; right: 12px; width: 30px; height: 30px; visibility: hidden; }
			input[type="email"]					{ margin-top: 10px; }
		}
		.row									{ .fl; width: 100%;
			label								{ .fl; font-size: 12px; line-height: 24px; margin-bottom: 0; color: @text; margin-top: 0; text-indent: 0; }
			input[type="checkbox"]				{ .fl; margin-top: 5px; margin-right: 8px; }
		}
	}
	
	.vestiging-lith								{ margin-top: 30px; }
}

	/* ------------------
	Mobile / Tablet
	------------------ */
	@media only screen and (max-width: 768px) {

		.footer									{
			.cntr								{
				.company-block					{ width: 100%; margin-bottom: 30px; }
				.newsletter-block				{ }
			}
 		}

	}
	@media only screen and (max-width: 640px) {

		.footer									{
			.cntr								{
				.company-block					{ margin-bottom: 0;
					.col-1-4					{ width: 100%!important; margin-bottom: 30px; }
				}
				.newsletter-block				{ width: 100%; }
			}
		}

	}




.gradient										{
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjMwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk5JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjk5Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  rgba(0,0,0,0) 1%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.99) 99%, rgba(0,0,0,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(0,0,0,0)), color-stop(30%,rgba(0,0,0,0)), color-stop(99%,rgba(0,0,0,0.99)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 1%,rgba(0,0,0,0) 30%,rgba(0,0,0,0.99) 99%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(0,0,0,0) 1%,rgba(0,0,0,0) 30%,rgba(0,0,0,0.99) 99%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(0,0,0,0) 1%,rgba(0,0,0,0) 30%,rgba(0,0,0,0.99) 99%,rgba(0,0,0,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 1%,rgba(0,0,0,0) 30%,rgba(0,0,0,0.99) 99%,rgba(0,0,0,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-8 */
}

.gradient-orange								{
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIzMCUiIHN0b3AtY29sb3I9IiNlZjdiMGIiIHN0b3Atb3BhY2l0eT0iMCIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZWY3YjBiIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
	background: -moz-linear-gradient(top,  rgba(239,123,11,0) 30%, rgba(239,123,11,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(30%,rgba(239,123,11,0)), color-stop(100%,rgba(239,123,11,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(239,123,11,0) 30%,rgba(239,123,11,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(239,123,11,0) 30%,rgba(239,123,11,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(239,123,11,0) 30%,rgba(239,123,11,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(239,123,11,0) 30%,rgba(239,123,11,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ef7b0b', endColorstr='#ef7b0b',GradientType=0 ); /* IE6-8 */
}

.gradient-left									{
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(left,  rgba(0,0,0,1) 0%, rgba(0,0,0,0) 50%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,1)), color-stop(50%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%); /* IE10+ */
background: linear-gradient(to right,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=1 ); /* IE6-8 */


}


/* ------------------
Base 2018
------------------ */
.base-grid						{ width: 100%; max-width: 1300px; margin: 0 auto; padding: 0px 20px; }

.section						{
	&--new						{ padding: 50px 0px;}
	&--cta						{ background: #eeeeee; margin-bottom: 50px; }
	&--intro					{ padding: 100px 0px 50px 0px; }
	&--footer-testimonials		{ padding-bottom: 0px; }
	&--gallery					{ .relative; padding-bottom: 0px;
		&:before				{ .absolute; content:""; bottom: 0; height: 70px; width: 100%; left: 0; background: #eee; }
	}
	&--dates					{ background: #eee; }
	&--tickets					{ padding: 100px 0px 50px 0px;
		.aanbieding-form		{ margin-bottom: 0px; }
	}
	&--smart-concepts			{ background: #eee; padding: 100px 0px; margin: 50px 0px; }
	&--onze-toppers				{ background: #eee; padding: 100px 0px; }

	&--repeater					{ background: #eee; padding: 100px 0px; } 
	
	&--52585f					{ background: #52585f; color: white; padding: 120px 0px; }
	
	&--double-cta				{
		&:before				{ .absolute; content:""; top: 0; left: 50%; width: 50%; height: 100%; background-color: darken(#52585f,5%); } 
	}
	
	&--footer-testimonials 				{
		+ .section--national-coverage 	{ margin-top: 50px; } 
	}
	
	&--eee						{ background: #eee; }
	
	&--our-drivers				{
		.wysiwyg				{ margin-top: 0 !important; }
		
	}
	
	&--destinations				{
		+ .section--footer-testimonials { margin-top: -40px; }
	}
	
	&--brochure					{ margin-top: 100px; } 
} 


@media (max-width: 1023px) 		{ 
	.section					{
		&--52585f				{ padding: 60px 0px; 
			.offerte-cta		{ padding: 0; }
		} 
	}
}

@media (max-width: 768px) 		{ 
	.section					{ 
		
		&--new 					{ padding: 20px 0; }
		
		&--cta 					{ margin-bottom: 0; } 
		
		&--cta,
		&--national-coverage	{ padding: 20px 0px; }
		
		&--gallery:before 		{ display: none; }
		
		&--eee					{ margin: 50px 0px; padding: 50px 0px; }
		
		&--52585f				{ padding: 40px 0; }
		
		&--double-cta			{  
			&:before			{ left: 0; width: 100%; top: 50%; height: 50%; } 
		}
		
		&--intro				{ padding: 80px 0px 20px 0px; }
		
		&--footer-testimonials 	{ padding: 0; }
	}
}

/* ------------------
Header slider 2018
------------------ */
.header-slider					{ overflow: visible !important;
	body.page-template-front-page-new & { padding-bottom: 0px; overflow: hidden !important; }
	
	
	&__image					{ .relative; height: 650px; width: 100%;
		&:before				{ .absolute; content:""; width: 100%; height: 100%; top: 0; left: 0; background: fade(black, 20%); }

		img						{ width: 100%; height: 100%; object-fit: cover; }

		&--small				{ height: 550px; }
	}
	&__image-description		{ .absolute; bottom: 30px; z-index: 1; left: 50%; width: 100%; max-width: 1300px; transform: translate(-50%,0%); padding: 0px 20px; font-size: 13px; color: white; font-style: italic; }

	&__tag						{ .ubuntubold; .absolute; .ac; display: flex; justify-content: center; align-items: center; top: 40px; right: 40px; z-index: 2; color: white; font-size: 18px; line-height: 24px; padding: 20px; height: 130px; width: 130px; transform: rotate(14deg); text-decoration: none; transition: all .2s ease-in-out; 
		span					{ .relative; z-index: 3; }
		&:before				{ .absolute; content:""; top: 0; left: 0; width: 100%; height: 100%; background: #ef7b0b; border-radius: 100%; z-index: 2; }
		&:after					{ .absolute; content:""; left: 50%; transform: translateX(-50%); z-index: 5; width: 110px; height: 110px; border-radius: 100%; background: #fff; opacity: .6; z-index: 1; }
		
		&:hover					{ transform: rotate(14deg) scale(1.06);
			&:after				{ transition: all .6s ease-in-out; transform: translateX(-50%) scale(1.6); opacity: 0; }
		}
	}
	&__content					{ .ac; .absolute; top: 0; width: 100%; height: 100%; display: flex; align-items: center; 
		&--with-usps			{ .al;
			.base-grid			{ .relative; height: 100%; display: flex; align-items: center; }
		}
		&--align-left			{ .al; }
	}
	&__title					{ width: 100%; max-width: 640px; color: #FFF; font-size: 56px; line-height: 62px;
		&--center				{ .ac; margin: 0 auto; }
		&--subpage				{ .al; font-size: 52px; }
	}
	&__button					{ margin-top: 30px; }
	&__video-slide				{ width: 100%; height: 100%; object-fit: cover; }
	&__video					{ overflow: hidden;
		&:before				{ .absolute; content:""; width: 100%; height: 100%; top: 0; left: 0; background: fade(black, 30%); }
		&--small				{ height: 550px; }
	}
	&__view-video				{ .relative; margin-top: 20px; padding-left: 70px;
		span					{ .absolute; display: flex; justify-content: center; align-items: center; height: 100%; width: 55px; background: darken(@orange, 5%); left: 0; top: 0; border-radius: 100%; }
		&:hover					{ cursor: pointer; padding-left: 70px;  }
	}
}

@media (max-width: 950px) 		{ 
	
	.header-slider				{ max-height: 550px; height: auto; 	
		&__title 				{ font-size: 32px; line-height: 40px; padding: 0; max-width: 100%;  /* height: 210px; */ }
		&__image 				{ 
			&-description 		{ bottom: 15px; }
			
			&--small			{ max-height: 300px; }
		}
		
		&__content--with-usps	{ 
			.base-grid			{ flex-direction: column; justify-content: center; }
		}
		
		
	} 
	
}

@media (max-width: 370px) 		{ 
	
	.header-slider				{ 
		&__tag 					{ display: none; }
	}

}


/* ------------------
Usps in slider 2018
------------------ */
.usps							{ .absolute; width: 100%; max-width: 450px; bottom: -75px; right: 20px;

	&--content					{ .relative; bottom: 0; right: 0;
		.usps__inner			{ background: transparent; padding: 0px; border-radius: 0px; }
	}

	&__inner					{ background: #EEEEEE; padding: 50px 60px; border-radius: 3px;
		h3						{ font-size: 22px; margin-bottom: 20px; }
		ul 						{
			li 					{ .relative; padding: 10px 0px; font-size: 16px; color: fade(#52585F, 80%); padding-left: 30px;
				&:before		{ .absolute; content:""; left: 0; top: 11px; background-image: url('../images/orange-checkmark.svg'); background-repeat: no-repeat; background-size: 15px 12px; width: 15px; height: 12px; }
			}
		}
	} 
}

@media(max-width: 950px) {

.usps 							{ max-width: 100%; bottom: 0; right: inherit; left: 0px; transform: translateY(100%);
	&__inner					{ padding: 20px; overflow-X: scroll; -webkit-overflow-scrolling: touch;
		h3						{ .none; }
		
		ul 						{ display: flex; 
			li 					{ padding: 0; padding-left: 20px; margin-right: 20px; white-space: nowrap; font-size: 14px;
				&:before		{ top: 0px; }
			}
		}
	}
}

}


/* ------------------
CTA in slider 2018
------------------ */
.cta							{
	&__text						{ .ac; .ubuntubold; font-size: 22px; color: #53585f;
		a 						{ text-decoration: none; color: #53585f; transition: all .2s ease-in-out; border: 2px solid #53585f; padding: 9px 25px; border-radius: 50px; font-size: 18px; margin: 0px 10px;
			&:hover				{ color: white; background: #ef7b0b; border-color: #ef7b0b;  }
		}
	}
	@media (max-width: 768px) 	{
		&__text 				{ font-size: 18px; line-height: 2;
			a 					{ padding: 3px 20px; display: inline-block; margin: 0; margin-top: 10px; }
		}
	}
	@media (max-width: 335px)	{
		&__text 				{
			a 					{ margin-top: 0;}
		}
	}
}

.tiles							{ display: flex; flex-direction: row; flex-wrap: wrap; width: ~"calc(100% + 20px)"; margin-left: -10px; }

.tile							{ flex-basis: 33.333333%; max-width: 33.333333%; padding: 10px; height: 280px; overflow: hidden;
	&:hover						{
		.tile__background			{
			img					{ transform: scale(1.04); }
		}
		.tile__arrow			{ transform: translateX(0px); }
		.tile__link				{ transform: translateX(30px); opacity: 1; }
	}

	&--destination				{
		.tile__inner			{ .relative;
			//&:before			{ .absolute; content:""; left: 0; top: 0; width: 100%; height: 100%; background: fade(#ef7b0b, 90%); z-index: 2; opacity: 0; visibility: hidden; transition: all .2s ease-in-out; }
		}
		.tile__arrow			{ .none; }
		.tile__title			{ font-size: 21px; }
		&:hover					{
/*
			.tile__inner		{
				&:before		{ opacity: 1; visibility: visible; }
			}
*/
			.tile__link			{ transform: translateX(0px); opacity: 1; }
			.tile__view			{ transform: translateX(0); }
		}

	}
	&__inner					{ .relative; background: grey; border-radius: 3px; overflow: hidden; height: 100%;
		&:after					{ .gradient; .absolute; .border-radius; .easeInOutSlow; top: 0; left: 0; width: 100%; height: 100%; content: ""; }
	}
	&__background				{ height: 100%; width: 100%;
		img						{ width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: all .35s ease-in-out; }
	}
	&__tag						{ .absolute; .ubuntubold; background: #fe7400; color: white; z-index: 10; top: 30px; right: 30px; border-radius: 3px; padding: 7px 12px; font-size: 13px; }
	&__content					{ .absolute; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; width: 100%; top: 0; left: 0; color: white; z-index: 2;  padding: 30px; }
	&__title					{ .ubuntubold; font-size: 25px; line-height: 30px; margin-bottom: 10px; }
	&__link						{ .relative; font-size: 16px; opacity: 0.7; transform: translateX(0px); transition: all .2s ease-in-out; line-height: 20px; }
	&__arrow					{ .absolute; transform: translateX(-50px); left: -25px; transition: all .2s ease-in-out; }
	&__view						{ .absolute; display: flex; align-items: center; justify-content: center; right: 0; top: 0; background: #ef7b0b; width: 50px; height: 50px; border-radius: 0px 0px 0px 13px; transform: translateX(100%); transition: all .2s ease-in-out; }
	@media (max-width: 768px) 	{ flex-basis: 100%; max-width: 100%; }
}

.having-fun						{ display: flex; flex-direction: row; align-items: flex-start;
	&__title					{ .ac; width: 100%; margin-bottom: 50px !important; }
	&__left-col					{ flex-basis: 33.333333%; max-width: 33.333333%;
		p 						{
			&:last-child		{ margin-bottom: 0px; }
		}
	}
	&__right-col				{ display: flex; flex-direction: row; flex-basis: 67.777777%; max-width: 67.777777%; } 
}
 

@media (max-width: 775px) 	{ 

.having-fun					{ .ac; flex-wrap: wrap;
	&__left-col 			{ flex-basis: 100%; max-width: 100%; flex-shrink: 0; }
	&__right-col			{ flex-basis: 100%; max-width: 100%; flex-shrink: 0; flex-wrap: wrap; margin-top: 20px; }
	
	&__title				{ margin-bottom: 20px !important; }
}

}

.testimonial					{ flex-basis: 50%; max-width: 50%; align-items: center; padding: 0px 10px;
	&__inner					{ display: flex; flex-direction: row; align-items: center; padding: 20px; background: #f5f5f5; border-radius: 3px; width: 100%; height: 100%; }
	&__profile-img				{ width: 90px; height: 90px; min-width: 90px; border-radius: 100%; overflow: hidden;
		img						{ width: 100%; height: 100%; object-fit: cover; }
	}
	&__testimonial-info			{ padding-left: 20px; }
	&__testimonial-content		{
		p 						{ margin-bottom: 5px; font-size: 14px; line-height: 23px; color: #080808; }
	}
	&__testimonial-name			{ color: #52585f; font-size: 14px; margin-bottom: 5px; margin-top: 10px; }
	@media (max-width: 768px) 	{ flex-basis: 100%; max-width: 100%; padding: 0;
		&__inner 				{ flex-direction: column; align-items: flex-start; }
		&__profile-img 			{ margin-bottom: 20px; margin-left: 20px; }
	}

}

@media (max-width: 775px) 	{ 

.testimonial					{ margin-bottom: 20px; max-width: 50%; flex-basis: 50%;
	&:first-child				{ padding-right: 10px; } 
	&:last-child				{ padding-left: 10px; }
	
	&__inner					{ align-items: center; }
}

}


@media (max-width: 640px) 	{ 

.testimonial					{ margin-bottom: 20px; max-width: 100%; flex-basis: 100%;
	&:first-child				{ padding-right: 0px; } 
	&:last-child				{ margin-bottom: 0; padding-left: 0px; } 
}

}

.destinations					{
	&__title					{ margin-bottom: 50px !important; }
	&__all						{ margin-top: 40px; }
	@media(max-width: 768px) 	{
		&__title 				{ margin-bottom: 20px!important; }
	}
}

.busses							{
	&__title					{ margin-bottom: 50px !important; }
	@media(max-width: 768px) 	{
		&__title 				{ margin-bottom: 20px!important; }
	}
} 


.intro							{ display: flex; flex-direction: row;
	p							{ font-size: 15px; margin-bottom: 25px; }
	h2							{ font-size: 32px; line-height: 42px; margin-bottom: 20px; }
	&__left-col					{ flex-basis: ~"calc(100% - 450px)"; max-width: ~"calc(100% - 450px)"; padding-right: 150px; }
	&__right-col				{ flex-basis: 450px; max-width: 450px; }
	@media(max-width: 920px) 	{ flex-direction: column; flex-wrap: wrap;
		&__left-col 			{ flex-basis: 100%; max-width: 100%; padding-right: 0; }
		&__right-col 			{ flex-basis: 100%; max-width: 100%;
			.cta 				{ margin-left: 0; margin-top: 20px;
				&__inner 		{ padding: 30px 40px; padding-top: 55px; }
			}
		}
	}
}
	
	
.cta							{
	&__inner					{ .relative; background: #52585F; color: white; padding: 50px 60px; border-radius: 3px; transition: all .2s ease-in-out; }
	&__image					{ .absolute; display: flex; align-items: center; justify-content: center; left: -36.5px; top: 35px; height: 73px; width: 73px; background: fade(#52585F, 30%); border-radius: 100%; overflow: hidden; }
	&__image-wrapper			{ height: 55px; width: 55px; border-radius: 100%; overflow: hidden;
		img						{ width: 100%; height: 100%; object-fit: cover; }
		&:after					{ .absolute; background: #52585F; content:""; width: 73px; height: 73px; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: -1;  }

	}
	&__online					{ .absolute; display: flex; align-items: center; justify-content: center; border-radius: 100%; width: 21px; height: 21px; background: fade(#EF7B0B, 20%); bottom: 8px; right: 7px;
		&:after					{ .absolute; content:""; width: 9px; height: 9px; background: #EF7B0B; border-radius: 100%; }
	}
	&__content					{
		h3						{ color: white; font-size: 22px; margin-bottom: 10px; }
		p						{ color: fade(white, 90%); font-size: 16px; margin-bottom: 30px; }
		svg						{ transform: rotate(90deg); }
	}

	&--light					{ .block; text-decoration: none; margin-bottom: 20px;
		.cta__inner				{ .ubuntubold; font-size: 16px; background: #eee; color: #52585F; width: 100%; padding: 30px 40px; }
		.cta__content			{ display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
		&:hover					{
			.cta__inner			{ background: darken(#eee, 5%); }
		}
	}
	@media(max-width: 768px) 	{
		.intro__right-col
		&--light 				{ margin-left: 0;}
		&__image				{ top: -35px; left:0; }
	}
}

.pagination						{ padding-top: 30px; padding-bottom: 40px;
	&__inner					{ .relative; display: flex; flex-direction: row; align-items: center; justify-content: center;
		.page-numbers			{ .easeInOut; width: 50px; height: 50px; background: #f5f5f5;  border-radius: 50px; display: flex; justify-content: center; align-items: center; color: #111111; text-decoration: none; margin: 0px 5px; font-size: 12px;
			&.current			{ .ubuntumedium; background: #50585f; color: white;
				&:hover			{ background: #50585f; }
			}
			&:hover				{ background: darken(#f5f5f5,3%); }
		}
		.prev,
		.next					{ .absolute; .inlineblock; .ubuntubold; .easeInOut; .al; background: @orange; color: #FFF; width: auto; font-size: 12px; text-decoration: none; padding: 20px 50px; overflow: hidden; .border-radius(44px); margin: 0px;
			&:hover				{ background: darken(@orange,5%); }
		}
		.next					{ right: 0; }
		.prev					{ left: 0; }
	}
	@media(max-width: 768px) 	{
		.next, .prev 			{ display: none; }
	}
}

.our-drivers					{ //display: flex; flex-direction: row;
	
	&--no-slider				{ display: flex; justify-content: center; 
		.our-drivers__wrapper	{ padding: 0px 40px; }
		
		@media(max-width: 768px) 	{ flex-direction: column; 
			.our-drivers__wrapper { padding: 10px 0px; }
		}

	}
	
    
	&__profile-img				{ width: 140px; height: 140px; min-width: 140px; border-radius: 100%; overflow: hidden;
		img						{ width: 100%; height: 100%; object-fit: cover; }
	}
	
	&__inner					{ display: flex; flex-direction: column; align-items: center; }
	
	&__name						{ .ubuntubold; color: #52585f; font-size: 16px; margin-top: 20px; }
	
	&__text						{ margin-bottom: 50px; }
	
	&__title					{ margin-bottom: 12px; }
	
} 

.section--our-drivers				{
	
	.bx-wrapper						{ 
		.bx-controls				{ margin-left: 0 !important; left: 0; top: 50%; transform: translateY(-50%);
			
			&:before,
			&:after					{ .none; }
			
			.bx-controls-direction	{ width: 100%; display: flex; justify-content: space-between;
				.bx-next,
				.bx-prev			{ color: @black; width: 40px; height: 40px;
					&:after			{ border: 0px; top: 50%; transform: translateY(-50%); font-size: 16px; }
				}
				
				.bx-next			{ 
					&:after 		{ right: 0; }
				}
				.bx-prev			{  
					&:after 		{ left: 0; }
				}
			}
			
			.bx-pager				{ .none;
				.bx-pager-item		{ 
					> a				{ border: 0px; 
						&:after		{ width: 8px; height: 8px; background: @black; opacity: 1 !important; transform: scale(1) !important; }
					} 
				}
			}
			
		}
	}
}

.newsletter						{ .absolute; top: -100px; //  background: #eeeeee; padding: 60px 20px;
	&__inner					{ display: flex; flex-direction: row; align-items: center; background: #52585f; padding: 60px; border-radius: 3px; }
	&__title,
	&__form						{ flex-basis: 50%; max-width: 50%; }
	&__title					{ .ubuntumedium; font-size: 32px; line-height: 46px; color: white; }
	&__form						{
		input[type="email"]		{ margin-bottom: 0px; margin-top: 0px !important; height: 70px; border: 0px; border-radius: 50px; padding-left: 40px; }
		.submit					{ .ubuntubold; background: #fe7400; color: white; height: 100%; height: 64px; top: 3px; border-radius: 50px; width: 160px; right: 4px; font-size: 14px; line-height: 64px;
			&:after				{ .none; }
		}
	}
	@media(max-width: 850px) 	{
		&__inner 				{ flex-direction: row; flex-wrap: wrap; padding: 30px;}
		&__title 				{ max-width: 100%; flex-basis: 100%; flex-shrink: 0; flex-wrap: wrap; margin-bottom: 20px; line-height: 1.2; }
		&__form 				{ max-width: 400px; flex-basis: 100%; flex-shrink: 0; flex-wrap: wrap; }
	}
	@media (max-width: 400px) 	{
		&__title 				{ font-size: 28px; line-height: 34px; margin-bottom: 20px; }
		&__form 				{
			input[type="email"]	{ height: 50px; padding-left: 25px; }
			.submit				{ border: none; line-height: 45px; height: 50px; margin-top: 5px; position: relative; width: 100%; }
		}
	}
}

.footer-testimonials			{ display: flex; flex-direction: row; flex-wrap: wrap; width: ~"calc(100% + 20px)"; margin-left: -10px;
	//@media(max-width: 768px) 	{ flex-direction: column; }
}

.footer							{
	&--bg						{ .relative; margin-top: 150px; background: #eeeeee; padding: 0px 0px 70px 0px; overflow: visible !important;
		.cntr					{
			h4					{ color: #52585f; margin-bottom: 15px; font-size: 18px; }
		}
	}
	&__klantenservice-content	{
		p 						{ font-size: 15px !important; line-height: 32px !important; color: fade(#53585f,80%); }
	}
	&__klantenservice-title,
	&__keurmerken-title,
	&__socials-title			{ .ubuntubold; color: #52585f; margin-bottom: 15px; font-size: 18px; }
	&__socials					{ margin-top: 30px; }
	&__socials-content			{ display: flex; flex-direction: row;
		li 						{ margin-right: 10px;
			&:last-child		{ margin-right: 10px; }
			a 					{ display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 2px solid fade(#52585f,20%); border-radius: 3px;
				svg				{ transform: scale(0.8); }
			}
		}
	}
	@media(max-width: 720px) 	{
		&--bg 					{ margin-top: 120px; }
		.nav 					{ flex-direction: column; flex-wrap: wrap; display: flex; margin-top: -70px;
			> .col-1-2			{ max-width: 100%; flex-basis: 100%; flex-shrink: 0; flex-wrap: wrap; width: 100%;
				> .col-1-2		{ max-width: 100%; flex-basis: 100%; flex-shrink: 0; width: 100%; }
			}
		}
		&__keurmerken 			{
			margin-top: 15px;
		}
	}
}

#menu-footermenu				{ display: flex; flex-direction: row; width: ~"calc(100% + 20px)"; margin-left: -10px;
	> li 						{ padding: 0px 10px; flex-basis: 50%; max-width: 50%;
		> a						{ .block; .ubuntubold; color: #52585f; margin-bottom: 15px; font-size: 18px; text-decoration: none;  }
		ul						{
			li					{ padding: 5px 0px;
				a				{ text-decoration: none; color: fade(#53585f,80%); font-size: 15px; line-height: 22px; }
			}
		}
	}
	@media(max-width: 720px) 	{ flex-direction: column;
		> li 					{ flex-basis: 100%; max-width: 100%; margin-bottom: 20px;
			> a 				{ margin-bottom: 8px; }
		}
	}
}

/* ------------------
Bestemming stijl 2018
------------------ */
.two-column							{ display: flex; flex-direction: row; align-items: center;
	&__left-col						{ flex-basis: ~"calc(100% - 450px)"; max-width: ~"calc(100% - 450px)"; padding-right: 70px; }
	&__right-col					{ flex-basis: 450px; max-width: 450px; padding-left: 80px;
		.usps						{ margin-top: -80px; }
	}
	&--intro						{ align-items: flex-start;
		.two-column__left-col		{ flex-basis: 40%; max-width: 40%; padding-right: 70px; }
		.two-column__right-col		{ flex-basis: 60%; max-width: 60%; }
	}
	&--over-havi					{ padding: 50px 0px;
		&:first-child				{ padding-top: 0px; }
		&:last-child				{ padding-bottom: 0px; }

		&.wysiwyg					{ margin-top: 0px !important; }

		&:nth-child(even)			{
			.two-column__right-col	{ order: 1; padding-left: 0; padding-right: 70px; }
			.two-column__left-col	{ order: 2; padding-right: 0; padding-left: 70px; }
		}
		.two-column__right-col,
		.two-column__left-col		{ flex-basis: 50%; max-width: 50%;
			p						{
				&:last-child		{ margin-bottom: 0px; }
			}
		}
	}
	&__image						{ .relative; width: 100%; height: 100%; border-radius: 3px; height: 300px; overflow: hidden;
		img							{ .absolute; width: 100%; height: 100%; object-fit: cover;
		}
	}

	@media(max-width: 900px) 		{ flex-direction: column; flex-wrap: wrap;
		&__left-col, &__right-col 	{ flex-basis: 100%; max-width: 100%; flex-shrink: 0; padding: 75px 0 75px 0;}
		&__right-col .usps 			{ margin-top: -10px; margin-bottom: 15px; }
		&--intro					{ flex-direction: column;
			.two-column__left-col,
			.two-column__right-col 	{ flex-basis: 100%; max-width: 100%; padding: 0; }
		}
		&--over-havi				{ padding: 0px; margin-bottom: 25px;
			.two-column__right-col,
			.two-column__left-col	{ flex-basis: 100%; max-width: 100%; padding: 0; }
		}
		&__image 					{ margin-bottom: 15px;
			img 					{ position: relative; }
		}
	}
	@media(max-width: 400px) 		{
		.bx-prev, .bx-next			{ width: 50px!important; height: 50px!important; }
	}
}
@media(max-width: 900px) 			{
	.section--repeater
	.two-column__right-col			{ order: 1; padding: 0!important; margin-bottom: 15px;}
	.section--repeater
	.two-column__left-col			{ order: 2; padding: 0!important; }
}

.gallery							{ .relative;
	.bx-wrapper						{ overflow: hidden; border-radius: 3px; max-height: 450px;

		.bx-pager					{ .none; }

		.bx-controls				{ margin-left: 0px !important; left: 0; padding: 0; bottom: 0;
			&:before,
			&:after					{ .none; }

			.bx-controls-direction	{ .fr;
				.bx-prev,
				.bx-next			{ .relative; width: 70px; height: 70px; background: #eee;
					&:after			{ .none; }
					&:before		{ .absolute; content:""; top: 50%; left: 50%; transform: translate(-50%,-50%); background-image: url('../images/icons/slider-arrow-grey.svg'); background-repeat: no-repeat; background-size: 11px 8px; width: 11px; height: 8px; opacity: 0.4; transition: all .2s ease-in-out; }
					&:hover			{
						&:before	{ opacity: 1; }
					}
				}
				.bx-next			{ margin-left: 0px; }
				.bx-prev			{
					&:before		{ transform: translate(-50%,-50%) rotate(180deg); }
				}
			}
		}

	}
}

.wysiwyg							{
	ol.table-havi--new				{ border-bottom: 0px;
		li 							{ background: transparent; font-size: 15px; line-height: auto; padding: 20px 0px; border-bottom: 1px solid fade(#4A4A4A, 30%);
			&:first-child			{ font-size: 16px; border-top: 0px; }
		}
	}
	@media(max-width: 768px)		{
		ol.table-havi--new { padding-left: 20px; padding-right: 20px;
			li > div.col-1-6, div.col-2-3 { width: 33.33333%; }
		}
	}
}

.order-tickets						{ position: fixed; background: #eee; padding: 10px 0px; top: 73px; z-index: 5; width: 100%; max-width: 1600px; margin: 0 auto; .box-shadow(rgba(50, 50, 50, 0.2) 0px 0px 2px); transform: translateY(-100%); transition: all .2s ease-in-out;
	&--scrolled						{ transform: translateY(0); }
	&__inner						{ display: flex; flex-flow: row; justify-content: space-between; align-items: center; }
	&__back							{ font-size: 13px; opacity: 0.4; text-decoration: none; color: #4A4A4A; transition: all .2s ease-in-out;
		&:hover						{ opacity: 1; }
		svg							{ transform: rotate(180deg); margin-right: 15px; }
	}
	&__order-btn					{ padding: 17px 30px !important; margin-bottom: 0; }
	&__title						{ .ubuntubold; font-size: 17px; color: #53585f; }
	@media(max-width: 620px) 		{
		&__title 					{ display: none; }
	}
	@media(max-width: 951px)		{ top: 70px;
		&__order-btn				{ width: auto!important; margin-bottom: 0!important;}
	}
}

.tickets							{
	&__available					{
		svg							{ margin-right: 15px; }
	}
	&__available-inner				{ .ubuntubold; display: flex; flex-direction: row; align-items: center; font-size: 13px; color: #EF7B0B; background: fade(#EF7B0B,10%); border-radius: 3px; padding: 10px 15px; margin-bottom: 15px; }
	&__inner						{ display: flex; flex-direction: row; width: 100%; }
	&__form							{ flex-basis: ~"calc(100% - 450px)"; max-width: ~"calc(100% - 450px)";
		form						{
			input[type="text"],
			[type="email"],
			[type="date"]			{ height: 50px; font-size: 14px; }
			.selectricWrapper		{ width: 100%; }
			.selectric				{ width: 100%; height: 50px;
				.label				{ padding: 0px 13px; font-size: 14px; line-height: 50px; height: 100%; }
				.button				{ height: 100%; }
			}

			.submit-form			{ float: left !important; margin-bottom: 0px !important; text-align: center !important; padding: 20px 30px !important; font-size: 15px !important; }
		}
	}
	&__sidebar						{ flex-basis: 450px; max-width: 450px; padding-left: 80px; }
	&__sidebar-inner				{ background: #eee; border-radius: 3px; border-radius: 3px; padding: 30px;
		h4							{ margin-bottom: 15px; font-size: 18px; }
	}
	@media(max-width: 1000px) 		{
		&__inner 					{ flex-direction: column; padding-right: 20px;}
		&__form 					{ flex-basis: 100%; max-width: 100%; order: 2; }
		&__sidebar 					{ flex-basis: 100%; max-width: 100%; padding-left: 10px; padding-right: 10px; margin-top: -5px; order: 1; margin-bottom: 25px;}
		&__available-inner 			{ padding-top: 15px; }
	}
	@media(min-width: 1000px) 		{
		&__sidebar 					{ margin-top: 49px;}
	}
}

.jobs								{ display: flex; flex-direction: row; width: ~"calc(100% + 20px)"; margin-left: -10px;
	&__tile							{ flex-basis: 33.333333%; max-width:: 33.333333%; padding: 0px 10px; }
	@media(max-width: 768px) 		{ flex-direction: column; flex-wrap: wrap; }
}

.smart-concepts						{
	&--schoolreisje					{
		.smart-concepts__content	{ margin-bottom: 50px; }
	}
	&.wysiwyg						{ margin-top: 0px !important; }
	&__content						{ max-width: 800px; margin: 0 auto;
		p 							{ font-size: 15px; margin-bottom: 25px; }
	}
	@media(max-width: 768px) 		{
		&__content 					{ padding-top: 20px; }
	}
}

.national-coverage					{
	&.wysiwyg						{ margin-top: 0px !important; }
	&__content						{ max-width: 800px; margin: 0 auto;
		p 							{ font-size: 15px; margin-bottom: 25px; }
	}
}

.coverage-map						{ .relative; margin: 50px 0px;
	.cls-2							{ fill: lighten(#52585f, 30%); }
	svg								{ max-width: 430px; }
	&__location						{ .al; .absolute; background: #F5F5F5; padding: 40px 50px; color: #525860;
		&--schiphol					{ left: 0; top: 110px;
			.coverage-map__logo		{ right: -27px;
				&:before			{ left: 20px; width: 220px; transform: rotate(5deg); transform-origin: top left; }
			}
		}
		
		&--goor						{ right: 0; top: 60px;
			.coverage-map__logo		{ left: -27px;
				&:before			{ right: 20px; width: 150px; transform: rotate(-23deg); transform-origin: top right; }
			}
		}
		
		&--lith						{ right: 80px; bottom: -30px;
			.coverage-map__logo		{ left: -27px;
				&:before			{ right: 20px; width: 120px; transform: rotate(15deg); transform-origin: top right; }
			}
		}
	}
	&__logo							{ .absolute; top: 40px; 
		&:before					{ .absolute; content:""; top: 50%; transform: translate(0,-50%); border-bottom: 2px dashed @orange; height: 2px; z-index: 2; }
	}
	
	&__logo-logo					{ .relative; display: flex; justify-content: center; align-items: center; background: white; width: 55px; height: 55px; border-radius: 100%; -webkit-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.07); -moz-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.07); box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.07);  z-index: 10; }
	&__title						{ .ubuntubold; font-size: 18px; margin-bottom: 10px; }
	&__content						{ line-height: 24px; }
	&__contact						{ margin-top: 20px;
		a 							{ .block; color: @orange; text-decoration: none; font-size: 15px;
			&:first-child			{ margin-bottom: 10px; }
			svg						{ margin-right: 20px; }
		}
	}
	@media (max-width: 1050px) 		{
		svg							{ display: none; }
		&__location					{ .relative; top: 0; transform: none; padding: 40px 30px; margin-bottom: 20px; right: 0; bottom: 0; 
			&:last-child 			{ margin-bottom: 0; }
		}
		&__logo 					{ display: none; }
	}
	
	@media (max-width: 1050px) 		{ margin: 0; }
}

.logo-gallery						{ display: flex; flex-direction: row; margin-top: 40px; width: ~"calc(100% + 20px)"; margin-left: -20px;
	&__logo							{ flex-basis: 33.333333%; max-width: 33.333333%; padding: 0px 10px; }
	&__inner						{ display: flex; justify-content: center; align-items: center; /* border: 1px solid #eee; */ background: white; padding: 30px; height: 100%;
		img							{ max-height: 60px; max-width: 120px; }
	}
	&__title						{ margin-bottom: -10px !important; font-size: 18px !important; }
	@media(max-width: 768px) 		{ flex-wrap: wrap; flex-direction: column; margin-left: -10px; margin-top: -10px;
		&__logo 					{ flex-basis: 100%; max-width: 100%; margin-bottom: 15px; }
	}
	
	//&--slider						{ flex-wrap: wrap; }
}

.dmc-gallery						{ display: flex;
	&__inner						{ display: flex; justify-content: center; align-items: center; /* border: 1px solid #eee; */ background: white; padding: 30px; height: 100%;
		img							{ max-height: 60px; max-width: 120px; width: auto; height: auto; }
	}
}


.smart-concepts						{ padding: 40px 0px;
	.bx-wrapper						{
		.bx-controls 				{ bottom: inherit; top: 50%; transform: translateY(-50%); width: ~"calc(100% + 44px)"; margin-left: -22px !important; left: 0; padding: 0 !important; margin-top: 0px; 
			&:before,
			&:after					{ .none; }
			
			.bx-controls-direction	{ .fn; display: flex; justify-content: space-between; 
				.bx-prev,
				.bx-next			{ background-color: #52585f; width: 44px; height: 44px; 
					&:after			{ left: 50%; top: 50%; transform: translate(-50%,-50%); border: 0; font-size: 16px; color: white; width: 16px; text-indent: 0; }
				}
			}
		}
		.bx-pager					{ .none; }
	}
}

/* ------------------
Schoolreisjes
------------------ */

.daltarieven						{
	&__table						{ display: flex; flex-direction: row; flex-wrap: wrap; }
	&__table-row					{ display: flex; flex-direction: row; flex-basis: 33.333333%; max-width: 33.333333%; border-bottom: 1px solid rgba(74, 74, 74, 0.3);  }
	&__table-cell					{ font-size: 15px; padding: 20px 0px; color: #52585F;
		&:first-letter				{ text-transform: capitalize; }
		&:last-child				{ margin-left: auto; padding-right: 45%; }
	}
	@media(max-width: 768px) 		{
		&__table-cell 				{ width: 80%;
			&:last-child 			{ width: 20%; padding-right: 0;}
		}
		&__table-row 				{ flex-basis: 100%; max-width: 100%; }
	}
	@media(max-width: 1075px) 		{
		&__table-cell 				{ width: 80%;
			&:last-child 			{ width: 20%; padding-right: 0;}
		}
	}
}

/* ------------------
Vacatures
------------------ */

.editor								{ color: #53585f;
	h3								{ font-size: 22px; margin-bottom: 20px; }
	ul 								{ font-size: 15px; line-height: 30px; margin-bottom: 25px;
		li 							{ .relative; padding: 4px 5px 4px 20px;
			&:before				{ .absolute; content:""; width: 5px; height: 5px; background: @orange; border-radius: 100%; top: 16px; left: 0; }
		}
	}
}


/* ------------------
Offerte aanvragen
------------------ */
.offerte-cta 						{
	&__content						{ .relative; z-index: 10; text-align: center; }
	
	&__title,
	&__text p						{ color: white; }
	
	&__text							{
		p 							{ font-size: 18px; opacity: 0.9; }
	}
	
	&__title						{ font-size: 38px; margin-bottom: 16px; }
	
	&--row 							{ .relative; z-index: 10; display: flex; flex-direction: row; align-items: center; background: #f5f5f5; padding: 40px 0 40px 100px;
		
		.offerte-cta__content		{ padding-right: 60px; text-align: left; }
		.offerte-cta__title			{ color: @black; font-size: 28px; line-height: 36px; } 
		.offerte-cta__text p 		{ color: @black; opacity: 0.8; }
		
		&:after						{ .absolute; width: 160px; height: 100%; top: 0; right: 0; content:""; background-color: white; }
	} 
	
	&__brochure						{ margin-top: 0px; z-index: 10;
		img							{ max-width: 360px; max-height: 360px; }
	}
}

@media(max-width: 1250px) 			{
	
	.section--brochure				{ margin-top: 80px; }
	
	.offerte-cta					{
		&--row						{ padding: 0px 60px 40px 60px; }
		
		&__brochure					{  
			img						{ max-width: 340px; max-height: 340px; }
		}
	}
}

@media(max-width: 1024px) 			{
	
	.section--brochure				{ margin-top: 80px; }
	
	.offerte-cta					{
		&--row						{ align-items: center; padding: 40px 60px 40px 60px; }
		
		&__brochure					{ margin-top: 0; 
			img						{ max-width: 280px; max-height: 280px; }
		}
	}
}

@media(max-width: 1023px) 			{
	
	.section--brochure				{ margin-top: 100px; overflow: visible !important; }
	
	.offerte-cta					{ padding: 0px 40px 40px 40px;
		&--row						{ flex-direction: column; 
			.offerte-cta__content	{ order: 2; text-align: center; margin-top: 50px; padding-right: 0; }
			
			&:after					{ .none; }
		}
		
		&__brochure					{ margin-top: -50px; } 
	}
}


.section-background					{ .absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0.3;
	img								{ width: 100%; height: 100%; object-fit: cover;}
}

/* ------------------
Dubbele CTA 2019
------------------ */
.double-cta							{ display: flex; flex-direction: row; 
	&__col							{ .ac; flex-basis: 50%; max-width: 50%; padding: 0 20px; }
	
	&__content						{ .relative; z-index: 10;
		h3,
		p 							{ color: white; }
		
		h3							{ font-size: 32px; line-height: 42px; }
		p 							{ opacity: 0.8; font-size: 16px; }
	}
}

@media(max-width: 768px) 			{

.double-cta							{ flex-wrap: wrap;
	&__col							{ flex-basis: 100%; max-width: 100%; 
		&:first-child				{ padding-bottom: 60px; margin-bottom: 60px; }
	}
}

}

/* ------------------
Cookie notice
------------------ */

@dev_mode                                           : false;

@content_width                                      : 1300px;
@content_padding                                    : 20px;

@custom_breakpoint                                  : true; // Use true if @content_width = 100%
@custom_breakpoint_value                            : 767px;

// Text settings (colors are defined @ plugin settings)
@text_size                                          : 13px;
@text_size_mobile                                   : 12px;

// Button settings
@button_color                                       : #ef7b0b;
@button_text_color                                  : #fff;
@button_padding                                     : 20px 30px;
@button_font_size                                   : 14px;
@button_radius                                      : true;
@button_radius_value                                : 44px;

#cookie-notice 									    {
	& when (@dev_mode = true)                       { display: none !important; }

	.cookie-notice-container                        { display: flex; overflow: hidden; flex-flow: row nowrap; align-items: center; justify-content: center; margin: 0 auto; max-width: @content_width; width: 100%; padding: @content_padding;
		& when (@custom_breakpoint = false)         { @media (max-width: @content_width) { flex-flow: row wrap; } }
		& when (@custom_breakpoint = true)          { @media (max-width: @custom_breakpoint_value) { flex-flow: row wrap; } }
	}

	#cn-notice-text 							    { flex: 0 1 @content_width; font-size: @text_size; text-align: left; line-height: 18px; padding-right: 40px;
		a 										    { font-size: @text_size; color: inherit; text-decoration: underline;
			&:hover 							    { text-decoration: none; }
		}
		& when (@custom_breakpoint = true)          { @media (max-width: @custom_breakpoint_value) { padding-right: 0px; } }
	}

	#cn-accept-cookie                               { text-decoration: none;
		& when (@custom_breakpoint = true)          { @media (max-width: @custom_breakpoint_value) { width: 100%; } }
	}

	#cn-accept-cookie,
	#cn-more-info 			                        { background: @button_color; color: @button_text_color; padding: @button_padding; font-size: @button_font_size; border: 1px solid transparent; line-height: 100%; transition: all .2s ease;

		& when (@button_radius = true)              { border-radius: @button_radius_value; }

		&:hover 								    { background: lighten(@button_color, 5%); }
	}
	#cn-more-info 								    { background: none; color: inherit; text-decoration: underline;
		&:hover 								    { text-decoration: none; background-color: @button_color; color: @button_text_color; }
	}

	& when (@custom_breakpoint = false)             {
		@media(max-width: @content_width)           {
			#cn-notice-text 						{ width: 100%; margin-bottom: 10px; font-size: @text_size_mobile;
				a 									{ font-size: @text_size_mobile; }
			}
			#cn-accept-cookie 						{ margin-left: 0; }
		}
	}
	& when (@custom_breakpoint = true)              {
		@media(max-width: @custom_breakpoint_value) {
			#cn-notice-text 						{ width: 100%; margin-bottom: 10px; font-size: @text_size_mobile;
				a 									{ font-size: @text_size_mobile; }
			}
			#cn-accept-cookie 						{ margin-left: 0; }
		}

	}
}

.cookie-settings-modal 							    { position: fixed; display: inline-block; vertical-align: top; width: 100%; max-width: 800px; top: 50%; left: 50%; transform: translateX(-50%) translateY(-60%); background: white; z-index: 0; padding: 50px; box-shadow: 0 0 20px 0 rgba(0,0,0,0.2); opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s ease, transform .4s ease;
	.cookie-close 								    { position: absolute; width: 40px; height: 40px; top: 20px; right: 20px; padding: 0; background: none; cursor: pointer; border: 0; appearance: none; -webkit-appearance: none; -moz-appearance: none;
		&::before,
		&::after 						            { position: absolute; width: 34px; height: 3px; left: 0; top: 19px; content: ""; background: black; }

		&::before  								    { transform: rotate(-45deg); }
		&::after  								    { transform: rotate(45deg); }
	}
	form 										    { display: inline-block; vertical-align: top; width: 100%;}
	ul 											    { padding: 20px; border: 1px solid fade(black, 20%);
		li 										    { padding-left: 0; margin-bottom: 15px;
			&::after,
			&::before 					            { display: none; }

			&:last-child 						    { margin-bottom: 0; }
			label 								    { cursor: pointer; }
			&.analytic 	 						    { position: relative;
				&:before 						    { position: absolute; display: block; left: 0; top: 0; width: 16px; height: 16px; background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjMDBFNjc2IiBkPSJNMjAuMjg1IDJsLTExLjI4NSAxMS41NjctNS4yODYtNS4wMTEtMy43MTQgMy43MTYgOSA4LjcyOCAxNS0xNS4yODV6Ii8+PC9zdmc+') top left / 16px no-repeat; content: ""; }
				strong 							    { padding-left: 22px; }
			}
			p                                       { margin: 8px 0 0; padding-left: 22px; }
		}
	}

	h3 										        { margin-top: 0; margin-bottom: 20px; font-weight: bold !important; }
	p 										        { margin-bottom: 16px; }
	.button 								        { line-height: 100%; padding: 13px 30px; font-family: inherit; background: @button_color; color: @button_text_color; border: 0; cursor: pointer; margin: 32px 0 0; text-decoration: none; font-size: @button_font_size; transition: all .2s ease;

		& when (@button_radius = true)              { border-radius: @button_radius_value; }

		&:hover 								    { background: lighten(@button_color, 5%); }
	}

	&.show 										    { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(-50%); }

	@media only screen and (max-width: 640px),
	screen and (max-height: 768px) 		            { padding: 20px; left: 0; top: 2%; transform: translateX(0%) translateY(0%); max-height: ~"calc(100vh - 4%)"; overflow-y: scroll; -webkit-overflow-scrolling: touch;
		.cookie-settings-scroll-inner 			        { margin-bottom: 80px; }
		.cookie-close 							    { top: 5px; right: 5px; }
		ul 										    { padding: 10px; }
		&.show 									    { left: 0; top: 2%; transform: translateX(0%) translateY(0%); z-index: 100001 !important; }
		&.editor 								    {
			h3 									    { margin-bottom: 10px; }
			p 									    { margin-bottom: 10px; }
		}
	}
}