@keyframes flashButton		{0%			{border: 1px solid #FFA500;}
							 50%		{border: 1px solid #FFFFFF;}
							 100%		{border: 1px solid #FFA500;}}
@keyframes shiver			{2%			{transform: translate(1px, 0px) rotate(0.5deg);}
							 4%			{transform: translate(1px, 0px) rotate(0.5deg);}
							 6%			{transform: translate(1px, 1px) rotate(0.5deg);}
							 8%			{transform: translate(0px, 0px) rotate(0.5deg);}
							 10%		{transform: translate(1px, 0px) rotate(0.5deg);}
							 12%		{transform: translate(0px, 0px) rotate(0.5deg);}
							 14%		{transform: translate(1px, 1px) rotate(0.5deg);}
							 16%		{transform: translate(0px, 1px) rotate(0.5deg);}
							 18%		{transform: translate(1px, 0px) rotate(0.5deg);}
							 20%		{transform: translate(0px, 1px) rotate(0.5deg);}
							 22%		{transform: translate(0px, 0px) rotate(0.5deg);}
							 24%		{transform: translate(0px, 0px) rotate(0.5deg);}
							 26%		{transform: translate(1px, 1px) rotate(0.5deg);}
							 28%		{transform: translate(0px, 1px) rotate(0.5deg);}
							 30%		{transform: translate(0px, 0px) rotate(0.5deg);}
							 32%		{transform: translate(1px, 1px) rotate(0.5deg);}
							 34%		{transform: translate(0px, 1px) rotate(0.5deg);}
							 36%		{transform: translate(0px, 1px) rotate(0.5deg);}
							 38%		{transform: translate(0px, 0px) rotate(0.5deg);}
							 40%		{transform: translate(1px, 0px) rotate(0.5deg);}
							 42%		{transform: translate(0px, 1px) rotate(0.5deg);}
							 44%		{transform: translate(0px, 1px) rotate(0.5deg);}
							 46%		{transform: translate(0px, 0px) rotate(0.5deg);}
							 48%		{transform: translate(1px, 0px) rotate(0.5deg);}
							 50%		{transform: translate(1px, 1px) rotate(0.5deg);}
							 52%		{transform: translate(0px, 0px) rotate(0.5deg);}
							 54%		{transform: translate(1px, 1px) rotate(0.5deg);}
							 56%		{transform: translate(0px, 1px) rotate(0.5deg);}
							 58%		{transform: translate(1px, 0px) rotate(0.5deg);}
							 60%		{transform: translate(1px, 1px) rotate(0.5deg);}
							 62%		{transform: translate(0px, 1px) rotate(0.5deg);}
							 64%		{transform: translate(0px, 0px) rotate(0.5deg);}
							 66%		{transform: translate(1px, 0px) rotate(0.5deg);}
							 68%		{transform: translate(0px, 0px) rotate(0.5deg);}
							 70%		{transform: translate(1px, 0px) rotate(0.5deg);}
							 72%		{transform: translate(1px, 1px) rotate(0.5deg);}
							 74%		{transform: translate(1px, 1px) rotate(0.5deg);}
							 76%		{transform: translate(0px, 0px) rotate(0.5deg);}
							 78%		{transform: translate(0px, 0px) rotate(0.5deg);}
							 80%		{transform: translate(1px, 0px) rotate(0.5deg);}
							 82%		{transform: translate(1px, 1px) rotate(0.5deg);}
							 84%		{transform: translate(0px, 1px) rotate(0.5deg);}
							 86%		{transform: translate(1px, 1px) rotate(0.5deg);}
							 88%		{transform: translate(1px, 1px) rotate(0.5deg);}
							 90%		{transform: translate(0px, 1px) rotate(0.5deg);}
							 92%		{transform: translate(1px, 0px) rotate(0.5deg);}
							 94%		{transform: translate(1px, 0px) rotate(0.5deg);}
							 96%		{transform: translate(1px, 0px) rotate(0.5deg);}
							 98%		{transform: translate(1px, 1px) rotate(0.5deg);}
							 0%, 100%	{transform: translate(0, 0) rotate(0);}}
@keyframes flashButtonBG	{0%			{background-color: #FFA500;}
							 50%		{background-color: #FFC722;}
							 100%		{background-color: #FFA500;}}
@keyframes flashNavBlock	{50%		{background: #FFFFFF; left: -1%; width: 102%; box-shadow: 0 0 3rem rgba(255, 255, 255, 0.5), 0 0 1.5rem rgba(255, 255, 255, 0.75), 0 0 0.75rem rgba(255, 255, 255, 1); letter-spacing: 0.1rem;}}
@keyframes flashBorder		{0%			{border: 1px solid rgba(255, 255, 255, 0.1);}
							 50%		{border: 1px solid #FFFFFF;}
							 100%		{border: 1px solid rgba(255, 255, 255, 0.1);}}
@keyframes flashImg			{0%			{border-color: rgba(255, 255, 255, 0.1);}
							 50%		{border-color: #FFFFFF;}
							 100%		{border-color: rgba(255, 255, 255, 0.1);}}

@media screen and (min-width: 0px){
/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*								algemeen voor hele site													    */
/*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.mobile						{display: none; position: absolute; left: 0; right: 0; top: 1.5rem; width: 1.5rem; height: 2rem; margin: auto; color: #000000; font-size: 0.8rem; cursor: pointer; z-index: 10000;}
	.mobile span					{position: absolute; left: 0.25rem; width: 100%; height: 0.25rem; background-color: #000000;
							 -webkit-transition: 0.25s ease-in-out; -moz-transition: 0.25s ease-in-out; -o-transition: 0.25s ease-in-out; transition: 0.25s ease-in-out;}
	.mobile span:nth-child(1)			{top: 0%;}
	.mobile span:nth-child(2)			{top: 25%;}
	.mobile span:nth-child(3)			{top: 50%;}
	.mobile div					{position: absolute; bottom: -2px; width: 100%;}

	.mobile.open span:nth-child(1)		{top: 25%; transform: translateY(-50%); -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg);}
	.mobile.open span:nth-child(2)		{opacity: 0;}
	.mobile.open span:nth-child(3)		{top: 25%; transform: translateY(-50%); -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg);}

*							{margin: 0px; padding: 0px; border: 0px; outline: none;}

html							{font-size: 18px; width: 100%; height: 100%; -webkit-text-size-adjust: 100%;}
body							{overflow-X: hidden; overflow-Y: scroll; text-align: center; font-family: "Lato", "Arial", sans-serif; font-weight: 400;
							 cursor: default; color: #000000; width: 100%; height: 100%; background-color: #FFFFFF;}

a							{text-decoration: none; outline: none; border: none;}
a:link							{color: #000000;}
a:visited						{color: #000000;}
a:hover						{color: #000000;}
a:active						{color: #000000;}

a[href^="tel"]					{cursor: default;}

input, textarea					{font-family: inherit; font-size: inherit; font-weight: inherit;}
input.hidden						{position: absolute; left: -99999px; top: -99999px;}

h1							{font-weight: bold; font-size: 1.5rem; margin-bottom: 0.25rem;}
h2							{font-weight: normal; font-size: 1.5rem;}
h3							{font-weight: normal; font-size: 1.25rem;}
h4							{font-weight: normal; font-size: 7rem; display: inline;}
h5							{font-weight: normal; font-size: 4.5rem; display: inline;}

.close							{position: absolute; right: 0.25rem; top: 0.25rem; cursor: pointer; border: 1px solid #AAAAAA; border-radius: 50%; text-align: center;}
	.close:after					{content: "x"; display: block; font-size: 1rem; width: 1rem; height: 1rem; line-height: 0.78rem;}


.ED							{position: relative; width: 100%; height: 2rem; line-height: 2rem; color: #000000; background-color: #AAAAAA;}

.vertCenter						{position: relative; display: inline-block; width: 5vw; height: 100%; vertical-align: middle;}

.button						{position: relative; vertical-align: middle; border: 1px solid #000000; margin-left: 1rem; padding: 0.25rem 1rem 0.25rem 1rem; cursor: pointer; border-radius: 0.25rem;
							 background-color: #FFA500; z-index: 20;}
	.button:hover 			{-webkit-animation-name: flashButtonBG; -webkit-animation-duration: 0.75s; animation-name: flashButtonBG; animation-duration: 0.75s;}

/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*								top / menu																																    */
/*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.fixedTop						{}
	.sneekPeek					{position: fixed; right: 0; top: 0; width: 5rem; height: 5rem; z-index: 9999; transition: 0.5s; font-size: 1rem;}
		.sneekPeek:after		{content: ""; position: absolute; right: calc(100% - 0.35rem); top: 0; width: 1rem; height: 4rem; background-color: #EEEEEE; transform: rotate(-10deg); transition: 1s;}
		.sneekPeek .corner		{position: absolute; right: 0; top: 0; width: 100%; height: 100%; transform: rotate(-10deg); transform-origin: left top; background-image: linear-gradient(to right top, #FFFFFF 20%, #EEEEEE 40%, #CCCCCC 45%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.1) 60%, transparent 70%); box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5); transition: 0.5s; z-index: 100;}
		.sneekPeek .contentContainer	{position: absolute; right: 0; top: 0; width: 100%; height: 3.75rem; overflow: hidden; transition: 1s;}
		.sneekPeek .contents	{position: absolute; right: 0; top: 0; width: 20rem; height: 100%; padding: 1rem 1rem 0 0; text-align: right; transition: 0.5s;}
		.sneekPeek .contents:after	{content: ""; position: absolute; right: 0; top: 0; width: 5rem; height: 5rem; transform: rotate(-10deg); transform-origin: top left; background-color: #FFFFFF; z-index: -1; transition: 0.5s;}
		.sneekPeek .contents b	{color: #FFA500;}
		.sneekPeek .contents b span	{color: #000000;}
		.sneekPeek img			{width: 5rem; margin-top: 0.25rem;}
		.sneekPeek a			{position: absolute; right: 1rem; top: 6.5rem; z-index: 99999;}
		.sneekPeek:hover		{width: 20rem; height: 16rem;}
		.sneekPeek:hover:after	{width: 0; transition: 0.25s;}
		.sneekPeek:hover .corner	{height: 20rem; box-shadow: -1rem -4rem 2rem rgba(0, 0, 0, 0.25), 4rem 1rem 2rem rgba(0, 0, 0, 0.25);}
		.sneekPeek:hover .contentContainer	{height: 100%; transition: 0.25s;}
		.sneekPeek:hover .contents:after	{width: 20rem; height: 20rem;}

	.quickContactTop			{position: fixed; left: 0; top: 0; width: 100%; height: 1.5rem; background-color: #EEEEEE; z-index: 1000;}
		.quickContactTop .content	{margin-left: 20vw; line-height: 1.5rem;}
		.quickContactTop .phone	{display: inline; margin: 0 1.5rem 0 1.5rem;}
		.quickContactTop img	{height: 1rem; vertical-align: -0.15rem; padding-right: 0.25rem; opacity: 0.25;}
		.quickContactTop a		{-webkit-transition-duration: 0.15s; -moz-transition-duration: 0.15s; -o-transition-duration: 0.15s; transition-duration: 0.15s;}
		.quickContactTop a:hover	{letter-spacing: 1px; -webkit-transition-duration: 0.15s; -moz-transition-duration: 0.15s; -o-transition-duration: 0.15s; transition-duration: 0.15s;}
		.quickContactTop .Facebook	{display: inline; margin: 0 1.5rem 0 1.5rem;}
		.quickContactTop .Facebook img	{height: 1.2rem; vertical-align: -0.25rem; opacity: 1;}

	.overlayTop					{position: fixed; left: 0; top: 1.5rem; width: 100%; z-index: 100;}
	.logo						{position: fixed; left: 1.5vw; top: 1.25vw; width: 10vw; z-index: 1001;}

	.menu						{position: fixed; top: 1.5rem; right: 0; z-index: 99; font-variant: small-caps; text-align: right;}
		.menuItem				{display: inline-block; padding: 1.75rem 0.75rem 0.5vw 0.75rem; background-color: #FFFFFF; border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem;
							 box-shadow: 0 0 30px rgba(0, 0, 0, 0.25), 0 0 10px rgba(0, 0, 0, 0.5);
							 -webkit-transition-duration: 0.1s; -moz-transition-duration: 0.1s; -o-transition-duration: 0.1s; transition-duration: 0.1s;}
			.menuItem.hover		{background-color: #FFA500;}
			.menuItem.selected		{background-color: #FFA500;}

/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*								voorpagina																																    */
/*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.themeOverlay					{display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(50, 50, 50, 0.85); z-index: 10000;}
	.themeOverlay .LinkedIn		{position: relative; left: 0; top: 50%; transform: translateY(-50%); width: 100%; background-color: #FFFFFF; padding: 1vw; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);}
	.themeOverlay .LinkedIn div	{position: relative; display: inline-block; vertical-align: top; margin: 0 1rem 0 1rem;}
	.themeOverlay .LinkedIn .choice	{border: 1px solid #AAAAAA; border-radius: 0.5rem; transition: 0.5s; height: 25vw;}
	.themeOverlay .LinkedIn .choice:hover	{transform: scale(1.03);}
	.themeOverlay .button.contactUs		{position: absolute; left: 0; right: 0; top: 80%; xbottom: 1rem; height: auto; margin: auto;}
	.themeOverlay .button.toSite		{position: relative; top: 0; bottom: 0; margin: auto;}

.inspiration						{position: relative; left: 0; top: 0; width: 100%; height: 100%; text-align: left;}
	.inspiration .subjBlock			{position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; opacity: 0;}
	.inspiration .subjBlock .BG			{position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
	.inspiration .subjBlock:nth-child(1) .BG	{background: url("/inc/IMG/IJsberen.jpg") no-repeat center; background-size: cover;}
	.inspiration .subjBlock:nth-child(2) .BG	{background: url("/inc/IMG/AfrikaanseBraai.jpg") no-repeat bottom center; background-size: cover;}
	.inspiration .subjBlock:nth-child(3) .BG	{background: url("/inc/IMG/evenementen.jpg") no-repeat center; background-size: cover;}
	.inspiration .subjBlock:nth-child(4) .BG	{background: url("/inc/IMG/catering.jpg") no-repeat center; background-size: cover;}
	.inspiration .subjBlock:nth-child(5) .BG	{background: url("/inc/IMG/verhuur.jpg") no-repeat center; background-size: cover;}
	.inspiration .subjBlock:nth-child(6) .BG	{background: url("/inc/IMG/tenten.jpg") no-repeat center; background-size: cover;}
	.inspiration .subjBlock.showFirst		{z-index: 2; opacity: 1;}
	.inspiration .subjBlock.dontShow		{display: none;}
	.inspiration .content			{position: relative; display: inline-block; overflow: hidden; vertical-align: middle;}
	.inspiration a				{color: #FFFFFF; border-bottom: 1px solid orange;}
	.text						{position: relative; display: inline-block; vertical-align: middle; border-radius: 0.5rem; color: #FFFFFF; background-color: #000000; box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
							 text-align: center; padding: 2rem; font-size: 2rem; background-color: #000000; z-index: 1; border: 1px solid rgba(255, 255, 255, 0.2);}
		.orderNow				{display: none; width: 7rem; margin-top: 2rem; border: 1px solid #FFA500; padding: 1rem; cursor: pointer; border-radius: 0.25rem; background-color: #000000;}
		.orderNow:hover 			{-webkit-animation-name: flashButton; -webkit-animation-duration: 0.75s; animation-name: flashButton; animation-duration: 0.75s;}
		.shiver				{display: inline-block; animation-name: shiver; animation-duration: 175ms; animation-timing-function: ease-in-out; animation-iteration-count: infinite;}
		.quotationForm			{position: absolute; left: 100%; top: 50%; transform: translateY(-50%); width: 50%; border-radius: 0.5rem; color: #FFFFFF; background-color: black;
							 box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); padding: 0 2vw 1.5vw 2vw; z-index: 10; border: 1px solid rgba(255, 255, 255, 0.2);}
			.quotationForm label				{display: block; color: #AAAAAA; margin-bottom: 0.15rem;}
			.quotationForm input				{width: 20rem; margin-bottom: 0.25rem;}
			.quotationForm input[type=checkbox]	{width: auto; margin-right: 0.25rem;}
			.quotationForm .checkbox			{display: inline-block; margin-right: 2rem;}
			.quotationForm textarea			{width: 25rem; height: 9.6rem;}
			.quotationForm label span			{margin-left: 1rem; font-size: 0.65rem;}

		.quotationForm .middlePart		{display: inline-block; vertical-align: top; margin-right: 2vw;}
			.quotationForm .yes:before	{content: "\2713"; font-size: 3rem; font-weight: bold; color: #CCFF00;}
			.quotationForm .yes		{font-size: 2rem;}
		.quotationForm .rightPart		{position: relative; display: inline-block; vertical-align: top;}
			.send				{position: absolute; right: 2vw; bottom: 1vw; width: 7rem; border: 1px solid #FFA500; padding: 0.5rem 1rem 0.5rem 1rem; cursor: pointer; border-radius: 0.25rem;}
			.send:hover 			{-webkit-animation-name: flashButton; -webkit-animation-duration: 0.75s; animation-name: flashButton; animation-duration: 0.75s;}

		.quotationForm.otherPages		{left: 50%; transform: translateX(-50%); top: auto; transform: transLateY(0); bottom: -1000px; z-index: 0; box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.35);}

	.overlayBottom				{position: absolute; left: 0; bottom: 0; width: 100%; z-index: 10;}
	.timer						{position: absolute; left: 0; bottom: 0; width: 0; height: 15%; z-index: 11; overflow: hidden;}
		.timer	img				{position: absolute; left: 0; bottom: 1.5vh; width: 99vw;}

.block							{position: relative; left: 0; top: 0; width: 100%; padding-bottom: 5rem;}
	.welcome					{background-color: #CCCCCC; padding-bottom: 8rem;}
		.welcome .light			{position: absolute; right: -25%; top: -25%; width: 100%; height: 150%; background: url("/inc/IMG/light.png") no-repeat center; background-size: 100% 100%; z-index: 11;}
		.welcome .content			{position: relative; z-index: 12; padding: 0 1rem 0 1rem;}
	.navigation					{background-color: #888888;}
		.navigation .light1			{position: absolute; left: -25%; top: -25%; width: 100%; height: 100%; background: url("/inc/IMG/light.png") no-repeat center; background-size: 100% 75%;}
		.navigation .light2			{position: absolute; right: -25%; bottom: -25%; width: 100%; height: 100%; background: url("/inc/IMG/light.png") no-repeat center; background-size: 100% 75%; z-index: 1;}
	.media						{position: relative; background-color: #888888;}
		.media .light1			{position: absolute; left: -25%; top: -25%; width: 100%; height: 100%; background: url("/inc/IMG/light.png") no-repeat center; background-size: 100% 75%;}
		.media .light2			{position: absolute; right: -25%; bottom: -25%; width: 100%; height: 100%; background: url("/inc/IMG/light.png") no-repeat center; background-size: 100% 75%;}
		.media .slogan			{font-size: 2rem; padding-top: 2rem;}
	.contact					{padding-top: 3rem; background-color: #FFFFFF;}
	.title						{position: relative; display: inline-block; width: 100%; padding: 3rem 0 1rem 0; font-size: 1.5rem; font-variant: small-caps;}

.waveTop						{position: absolute; left: 0; bottom: 0; width: 100%;}

.navBlock						{position: relative; display: inline-block; width: 45%; margin: 2% 1% 0 1%; z-index: 1; cursor: pointer;}
	.navBlock .content				{width: 100%; height: 100%; border-radius: 1rem; overflow: hidden; box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.1); font-size: 0;}
	.navBlock .content img			{width: 104%;}
	.navBlock .content span			{position: absolute; left: 0.12%; top: 75%; width: 100%; font-size: 1.75rem; font-variant: small-caps; background-color: rgba(255, 255, 255, 0.7); font-weight: 700;
							 border-top: 1px solid rgba(255, 255, 255, 0.5); border-bottom: 1px solid rgba(255, 255, 255, 0.5); box-shadow: none; padding: 0.2rem 0 0.2rem 0;}
	.navBlock .content .keywords		{position: absolute; left: 0; top: 1rem; width: 100%; height: 80%; font-size: 2vw; font-weight: 400; color: rgba(255, 255, 255, 0.5); text-shadow: 0 0 0.22rem rgba(255, 255, 255, 0.5);}
	.navBlock .content .keywords .key		{display: inline-block; margin: 0 4rem 0 1rem; filter: blur(3px);}

	.navBlock .content:hover > span		{-webkit-animation-name: flashNavBlock; -webkit-animation-duration: 0.75s; animation-name: flashNavBlock; animation-duration: 0.75s;}
	.navBlock .content:hover 			{-webkit-animation-name: flashBorder; -webkit-animation-duration: 0.75s; animation-name: flashBorder; animation-duration: 0.75s;}

.waveBottom						{position: absolute; left: 0; top: 0; width: 100%;}

.quickContact						{position: relative; display: inline-block; vertical-align: top; margin: 0 2vw 0 2vw; z-index: 1;}
	.callMeBack					{position: relative; z-index: 1;}
	.callMeBack label				{margin-right: 0.25rem;}
	.callMeBack input				{display: inline-block; width: 15rem; border: 1px solid #AAAAAA; vertical-align: middle;}
	.callMeBack input:first-of-type		{margin-right: 1rem;}
	.callMeBack textarea				{display: inline-block; width: 29.75rem; height: 6rem; border: 1px solid #AAAAAA; vertical-align: middle; margin-top: 1rem;}
	.callMeBack .callMe			{margin: 0.5rem 1rem 0.5rem 1rem;}
	.quickContact .quickContactLogo		{width: 50%;}
	.quickContact label				{width: 5rem; display: inline-block; text-align: right; margin-right: 0.5rem; font-weight: 700;}
	.quickContact span				{width: 12rem; display: inline-block; text-align: left;}
	.quickContact a				{-webkit-transition-duration: 0.15s; -moz-transition-duration: 0.15s; -o-transition-duration: 0.15s; transition-duration: 0.15s; margin-right: 0.25rem;}
	.quickContact a:hover			{letter-spacing: 1px; -webkit-transition-duration: 0.15s; -moz-transition-duration: 0.15s; -o-transition-duration: 0.15s; transition-duration: 0.15s;}
	.quickContact b				{font-weight: 700;}


/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*								Afrikaans braaien															    */
/*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.page							{position: relative; left: 0; top: 0; width: 100%; height: 100%; text-align: left;}
	.page .video					{position: fixed; left: 0; top: 0; width: 100%; height: 100%;}
	.page .video #videoSRC			{position: absolute; left: 0; top: 0; width: 116%; height: 116%;}
	.page .overlayCover				{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #000000;}
	.page .overlayText				{position: relative; max-width: 90%; display: inline-block; vertical-align: middle; color: #FFFFFF; font-size: 2vw; text-shadow: 0.1vw 0.1vw 0.5vw #000000;}
	.page .overlayText span			{font-size: 5vw;}
	.page .overlayText b				{font-size: 3vw;}
	.page .overlayText .orderNow		{display: block; display: none;}
	.page .content				{display: inline-block; overflow: hidden; vertical-align: middle;}
	.page .quotationForm				{position: absolute; left: 50%; transform: translateX(-50%); top: 100%; bottom: auto;}

	.Africa					{display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
		.Africa:after				{content: ""; position: absolute; left: 0%; top: 0; width: 100%; height: 100%; background: url("/inc/IMG/leopard.png") no-repeat; background-size: 40%;}

	.media .img						{position: relative; display: inline-block; width: 25vw; height: calc(25vw / 16 * 9); background: no-repeat center / cover; margin: 2% 1% 0 1%; cursor: pointer;
									 border-radius: 1rem; box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5); border: 2px solid transparent; z-index: 12;}
	.media img						{position: relative; display: inline-block; width: 25vw; height: calc(25vw / 16 * 9); margin: 2% 1% 0 1%; cursor: pointer;
									 border-radius: 1rem; box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5); border: 2px solid transparent; z-index: 12;}
	.media .img:hover				{-webkit-animation-name: flashImg; -webkit-animation-duration: 0.75s; animation-name: flashImg; animation-duration: 0.75s;}

.photoOverlay						{position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); z-index: 10000; display: none;}
	.photoOverlay .content			{position: absolute; left: 10%; top: 5%; width: 80%; height: 90%;}
	.photoOverlay	img				{position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: none;}
	.photoOverlay iframe				{position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: none;}
	.photoOverlay .close				{top: -1rem; right: -1rem; border: 2px solid #FFFFFF; background-color: #FF0000; box-shadow: 0 0 5px 1px #000000;}
	.photoOverlay .close:after			{color: #FFFFFF; font-size: 1.5rem; line-height: 0.7rem; padding: 0.25rem;}
	.photoOverlay .prev				{position: absolute; left: -1rem; top: 50%; cursor: pointer; border: 1px solid #AAAAAA; background-color: #CCCCCC; border-radius: 50%;
							 text-align: center; box-shadow: 0 0 10px 1px #000000;}
	.photoOverlay .prev:after			{content: "\02039"; display: block; font-size: 3rem; width: 1.5rem; height: 1.5rem; line-height: 0.75rem; padding: 0.25rem;}
	.photoOverlay .next				{position: absolute; right: -1rem; top: 50%; cursor: pointer; border: 1px solid #AAAAAA; background-color: #CCCCCC; border-radius: 50%;
							 text-align: center; box-shadow: 0 0 10px 1px #000000;}
	.photoOverlay .next:after			{content: "\0203A"; display: block; font-size: 3rem; width: 1.5rem; height: 1.5rem; line-height: 0.75rem; padding: 0.25rem;}



/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*								evenementen																																    */
/*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
	.page .openingBlock				{position: fixed; left: 0; top: 0; width: 100%; height: 100%;}
	.navigation.index				{padding-top: 7vw; padding-bottom: 9vw;}
		.navigation.index .navBlock		{width: 30%; height: auto; margin: 2% 1.5% 1% 1.5%;}
		.navigation.homeIndex .navBlock	{width: 30%; height: auto; margin: 2% 1.5% 1% 1.5%;}

	.xBGimg						{position: absolute; left: -3%; top: 0; width: 106%;}
}






/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*								set background-images according to orientation																							    */
/*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (orientation: landscape){
	.BGimg						{position: absolute; left: -3%; top: 0; width: 106%;}
}
@media screen and (orientation: portrait){
	.BGimg						{position: absolute; left: 0; top: 0; width: auto; height: 100%;}
}

/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*								media-queries / breaking-points																											    */
/*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------*/
/*								1200									    */
/*-------------------------------------------------------------------------*/
@media screen and (max-width: 1200px){
.mobile					{display: block; left: auto; right: 1rem; top: 1rem;}
.menu						{display: none; left: 5%; right: auto; top: 3.55rem; width: 100%; text-align: center;}
	.menuItem				{display: inline-block; width: 25%; padding: 1rem 0 1rem 0; background-color: #FFFFFF; border-radius: 0.5rem; z-index: 10;}
		.menuItem:first-child	{padding-left: 0;}
		.menuItem:last-child	{padding-right: 0;}
.navigation.index .navBlock		{width: 45%; height: auto; margin: 5% 1.5% 1% 1.5%;}
.media .slogan					{font-size: 1.5rem; padding-top: 4rem;}
.page .overlayText				{font-size: 1.5rem;}
}
/*---------------------------------------------------------------------------*/
/*								1000									    */
/*-------------------------------------------------------------------------*/
@media screen and (max-width: 1000px){
.quickContactTop .Facebook	{display: none;}
.logo						{left: 0.5rem; top: 0.5rem; width: 7rem;}
.vertCenter					{width: 2%;}
.page .overlayText				{text-align: center; width: 95%;}
	.page .overlayText span			{padding-top: 2rem; font-size: 2.5rem;}
		.xmedia .light1		{top: -10%;}
		.media .light2		{bottom: -5%;}
}
/*---------------------------------------------------------------------------*/
/*								900										    */
/*-------------------------------------------------------------------------*/
@media screen and (max-width: 900px){
.mobile						{right: 1rem; top: 0.5rem;}
.quickContactTop .mail		{display: none;}
.logo						{width: 6rem;}
}
/*---------------------------------------------------------------------------*/
/*								790										    */
/*-------------------------------------------------------------------------*/
@media screen and (max-width: 790px){
.logo						{width: 5rem;}
.navBlock					{width: 95%; height: 62vw; margin-bottom: 2rem;}
	.navBlock .content span		{text-shadow: 0 0 2px #FFFFFF;}

.callMeBack input				{display: block; margin: 0 5% 0.25rem 5%; height: 1.5rem; width: 90%;}
	.callMeBack label			{display: block; width: 100%; margin: auto;}
	.callMeBack .callMe			{margin-top: 0.5rem;}
	.callMeBack textarea		{width: 90%; height: 10rem; margin: auto;}
.media img						{width: 45vw; height: 30vw;}
}
/*---------------------------------------------------------------------------*/
/*								668										    */
/*-------------------------------------------------------------------------*/
@media screen and (max-width: 668px){
.mobile						{right: 1rem; top: 1rem;}
.logo						{width: 7rem;}

.quickContactTop				{position: fixed; left: 0; top: 0; width: 100%; height: 3.5rem; background-color: #EEEEEE; z-index: 1000;}
	.quickContactTop .content		{margin-left: 18%; text-align: center;}
	.quickContactTop .content span	{display: none;}
	.quickContactTop .phone		{position: absolute; left: 3rem; right: 0; top: 1rem; margin: auto;}
	.overlayTop				{position: fixed; left: 0; top: 3.5rem; width: 100%; z-index: 100;}
.menu						{left: auto;}
	.menuItem				{width: 50%; padding: 1rem 2vw 1rem 2vw;}
		.menuItem:first-child	{padding-left: 2vw;}
		.menuItem:last-child	{padding-right: 2vw;}

.inspiration					{left: 0; width: 100%; height: 100%; overflow: hidden;}
	.inspiration .BG			{background-position: center 0; background-size: auto 100vh;}
	.inspiration .content		{display: none; position: relative; left: 0; top: 0; width: 100%; height: auto; text-align: center;}
	.inspiration .content .text		{margin: 80vh 0 1rem 0; padding: 0.5rem 1rem 0.5rem 1rem;}
	.quotationForm			{position: relative; left: 2.5%; top: 10px; width: 90%; padding: 0 0.5rem 0 0.5rem; display: none;}
		.quotationForm input		{width: 95%;}
		.quotationForm textarea	{width: 95%; height: 9.6rem;}
		.quotationForm .checkbox	{width: 100%; text-align: left; padding-left: 1rem; margin-right: 0;}
		.quotationForm .middlePart	{width: 100%; display: block; margin-right: 0;}
		.quotationForm .rightPart	{width: 100%; display: block;}
			.send			{position: relative; right: auto; bottom: auto; margin: 1rem 0 1.5rem 0;}
	.overlayBottom			{position: absolute; left: 0; bottom: 0; width: 100%;}

.block						{padding-left: 1%; padding-right: 1%; width: 98%; overflow: hidden;}
	.welcome				{padding-bottom: 4rem;}
		.welcome .light		{right: -50%; top: 0; width: 150%; height: 100%;}
	.navigation				{padding-bottom: 2rem;}
	.navBlock .content .keywords .key		{display: none;}
		.navigation .light1		{left: -25%; top: 0; width: 125%; height: 50%;}
		.navigation .light2		{right: -25%; bottom: -10%; width: 100%; height: 75%;}
	.contact				{padding-top: 0; padding-bottom: 0;}


.quickContact					{width: 100%; margin: 0 0 2rem 0;}
	.quickContact label			{width: 35%;}
	.quickContact span			{width: 44%;}

.page .openingBlock				{position: fixed; left: 0; top: 0; width: 100%; height: 100%;}
	.page .overlayText span			{padding-top: 2rem; font-size: 2rem;}
	.navigation.index				{padding-top: 7vw; padding-bottom: 9vw;}
		.navigation.index .navBlock		{width: 90%; height: auto; margin: 5% 1.5% 1% 1.5%;}

.media img						{width: 45vw; height: 30vw;}
}
/*---------------------------------------------------------------------------*/
/*								650										    */
/*-------------------------------------------------------------------------*/
@media screen and (max-width: 650px){
.media img						{width: 80vw; height: 50vw;}
}