body{
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 120%;
	padding: 0;
	margin: 0;
	background-color: rgb(222,220,0);
}
body::before {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	right: 0;
	height: 100vh;
	width: 50vw;
	background-color: #4dbdc6;
}

a {
	text-decoration: none;
	color: #fff;
	font-weight: 400;
}

a.btn {
	display: inline-block;
	height: 48px;
	background-color: rgba(95,202,242,1);
	padding: 0 32px;
	border-radius: 24px;
	font-size: 18px;
	font-family: 'Roboto Slab', serif;
	line-height: 46px;
	transition: background-color 0.25s ease;
}
a.btn:hover { background-color: rgba(0,0,0,0.8);}

.full{
	width: 100vw;
	height: 100vh;
	position: relative;
}
.full .table{
	display: table;
	position: relative;
	float: left;
	overflow: hidden;
	width: 50vw;
	height: 100vh;
	margin: 0;
	padding: 0;
}
.full .table .center {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	color: #fff;
	width: 45vw;
}
.full .kinetic.table .center { padding-left: 5vw; }
.full .swedice.table .center { padding-right: 5vw; }

.kinetic { 
	background-color: rgb(222,220,0);
}
.swedice {
	background: #49ad33;
	background: -moz-linear-gradient(top,  #49ad33 0%, #4dbdc6 80%);
	background: -webkit-linear-gradient(top,  #49ad33 0%,#4dbdc6 80%);
	background: linear-gradient(to bottom,  #49ad33 0%,#4dbdc6 80%);
}
.img-container { 
	position: relative; 
	margin-bottom: 48px;
}
.img-container img {
	width: 25vw;
	border-width: 2px;
	border-color: #fff;
	border-style: dotted;
}
.img-container .function {
	position: absolute;
	bottom: -14px;
	left: 50%;
	transform: translate(-50%, 0);
	display: block;
	height: 40px;
	width: auto;
	padding: 0 24px;
	margin: 0;
	border-radius: 2px;
	font-size: 18px;
	text-transform: uppercase;
	font-family: 'Montserrat', serif;
	line-height: 40px;
	background-color: #fff;
	color: rgba(0,0,0,0.6);
}

.illustratie {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 30vh;
	background-image: url('http://www.swedicegroup.com/img/illustratie.svg');
	background-size: cover;
	background-position: center bottom;
	background-repeat: no-repeat;
	mix-blend-mode: multiply;
}

/* FADE */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; margin-left: 0px; } to { opacity:1; margin-left: 0px; } }
.fade-in {
	opacity:0;
	-webkit-animation:fadeIn ease-out 0.5s;
	-moz-animation:fadeIn ease-out 0.5s;
	animation:fadeIn ease-out 0.5s;
	-webkit-animation-fill-mode:forwards;
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
	-webkit-animation-duration: 0.5s;
	-moz-animation-duration: 0.5s;
	animation-duration: 0.5s;
}
.fade-in.one {
	-webkit-animation-delay: 0.5s;
	-moz-animation-delay: 0.5s;
	animation-delay: 0.5s;
}
.fade-in.two {
	-webkit-animation-delay: 1s;
	-moz-animation-delay: 1s;
	animation-delay: 1s;
}

/* MOBILE */
@media (max-width: 960px) { 
	body { font-size: 14px; }
	body::before {
		height: 50vh;
		width: 100vw;
	}
	.full .table{
		width: 100vw;
		height: 50vh;
	}
	.full .table .center { width: 100vw; }
	.full .kinetic.table .center { padding: 0 10vw; }
	.full .swedice.table .center { padding: 0 10vw; }
	.img-container { margin-bottom: 24px; }
	.img-container img { width: 60vw; }
	.img-container .function {
		bottom: -8px;
		height: 24px;
		padding: 0 12px;
		font-size: 12px;
		line-height: 24px;
	}
	.illustratie { 
		background-size: contain;
		height: 12vh;
	}
}