/* Reset */
* { margin: 0; padding: 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
ol, ul { list-style-type: circle; margin: 10px 0 0; padding: 10px 10px 10px 40px; }
ul li { margin: 0; padding: 0; }
img { line-height: 0; padding: 0; margin: 0; outline: none; border: none; text-decoration: none; }
a { outline: none; border: none; text-decoration: none; color: inherit; transition: all 0.5s; }
a:hover { text-decoration: none; }
p { padding-bottom: 15px; }

/* FONTS */
@font-face {
	font-family: 'DM Mono Regular';
	src: url('../fonts/DMMono-Regular.ttf');
	font-weight: 400;
	font-style: normal;
}

/* BODY */
html, body {
	height: 100%;
}
html {
	overflow-x: hidden;
}
body {
	position: relative;
	min-height: 400px;
	margin: 0;
	padding: 40px 45px;
	font-family: 'DM Mono Regular', sans-serif;
	font-size: 20px;
	font-weight: 400;
	-webkit-text-size-adjust: none;
	-webkit-overflow-scrolling: touch;
}
body.croft-green {
	background-color: #183a26;
	color: #f0efdd;
}
body.croft-green .st0 {
	fill: #f0efdd;
}
body.croft-green .wlink:before {
	background-color: #f0efdd;
}

body.croft-orange {
	background-color: #ffd033;
	color: #183a26;
}
body.croft-orange .st0 {
	fill: #183a26;
}
body.croft-orange .wlink:before {
	background-color: #183a26;
}

body.croft-beige {
	background-color: #f0efdd;
	color: #e6b157;
}
body.croft-beige .st0 {
	fill: #e6b157;
}
body.croft-beige .wlink:before {
	background-color: #e6b157;
}

body.croft-khaki {
	background-color: #adb47f;
	color: #183a26;
}
body.croft-khaki .st0 {
	fill: #183a26;
}
body.croft-khaki .wlink:before {
	background-color: #183a26;
}

/* TABLES */
.table {
	display: table;
	width: 100%;
	border-collapse: collapse;
}
.table-auto {
	height: auto;
}
.table-full {
	height: 100%;
}
.table-row {
	display: table-row;
}
.table-cell {
	display: table-cell;
}
.table-cell-t {
	vertical-align: top;
}
.table-cell-m {
	vertical-align: middle;
}
.table-cell-b {
	vertical-align: bottom;
}
.table-nheight {
	height: auto;
}

/* SCROLL BAR */
@media screen and (min-width: 603px) {
	::-webkit-scrollbar {
		width:8px;
	} 
	::-webkit-scrollbar-track {
		border-left: 1px solid #eeeeee;
		-webkit-border-radius: 0;
		border-radius: 0;
		background: #eeeeee;
	}
	::-webkit-scrollbar-thumb {
		-webkit-border-radius: 0;
		border-radius: 0;
		background: #bbbbbb;
	}
	::-webkit-scrollbar-thumb:window-inactive {
		background: #eeeeee;
	}
}

/* GENERAL */
a.wlink {
	position: relative;
	display: inline-block;
}
a.wlink:before {
	content: '';
	position: absolute;
	z-index: 1;
	bottom: -2px;
	left: 0;
    width: 0;
	height: 1.5px;
	transition: 0.4s all;
}
@media (hover: hover) {
	a.wlink:hover:before {
		width: 100%;
	}
}
sup {
	font-size: 0.6em;
}
.tright {
	text-align: right;
}
.logo {
	display: inline-block;
	animation-name: logoAnimate;
	animation-duration: 1.3s;
}
@keyframes logoAnimate {
	from {
		transform: translateX(-150%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}
.logo svg {
	width: 160px;
}
.address {
	display: inline-block;
	animation-name: addressAnimate;
	animation-duration: 1.5s;
}
@keyframes addressAnimate {
	from {
		transform: translateX(150%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}
.times {
	display: inline-block;
	animation-name: timesAnimate;
	animation-duration: 1.7s;
}
@keyframes timesAnimate {
	from {
		transform: translateX(-150%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}
.icon {
	display: inline-block;
	animation-name: iconAnimate;
	animation-duration: 1.9s;
}
@keyframes iconAnimate {
	from {
		transform: translateX(150%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}
.icon svg {
	width: 100px;
}
.lekker {
	position: absolute;
	z-index: 1;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 160px;
	height: 190px;
	animation-name: lekkerAnimate;
	animation-duration: 3s;
}
@keyframes lekkerAnimate {
	from {
		transform: translateY(6%);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@media screen and (max-width: 520px), (max-height: 480px) {
	body {
		padding: 30px;
		font-size: 14px;
	}
	.logo svg {
		width: 120px;
	}
	.icon svg {
		width: 70px;
	}
	.lekker {
		width: 120px;
		height: 140px;
	}
}