/* Fonts */
@import url("https://use.typekit.net/ujx6xwi.css");
/* Reset */

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	outline: none;
	text-rendering: optimizeLegibility !important;
	-webkit-font-smoothing: antialiased !important;
}

body {
	background: none;
}

#stage {
	width: 100%;
	height: 544px;
	background: #ffffff;
	position: absolute;
	cursor: pointer;
	overflow: hidden;
}

.hiddenOnload {
	opacity:0;
}

.logo {
	position: absolute;
	width: 100px;
	left: 14px;
	top: 16px;
}

.wooninspiratie {
	position: absolute;
	width: 122px;
	left: 115px;
	top: 25px;
}

.container {
	position: absolute;
	width: 300px;
	height: 544px;
	top: 0;
	left: calc(50% - 150px)
}

.card {
	position: absolute;
	background-color: #F5F5F2;
	transition: all 3 ease;
}

.card1{
	top: 52px;
	left: 13px;
	width: calc(100% - 26px);
	height: 282px;
}

.card2, .card3 {
	top: 346px;
	width: calc(50% - 18px);
	height: 186px;
}

.card2 {
	left: 13px;
}

.card3 {
	right: 13px;
}

.button {
	position: absolute;
	top: 175px;
	height: 38px;
	width: 204px;
	font-family: 'proxima-nova', sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	text-align: center;
	font-size: 16px;
	line-height: 38px;
	position: absolute;
	background-color: #F8C85D;
	z-index: 3;
	transition: all 3 ease;
}

.card:hover .button {
	background-color: #E9A817;
}

.image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

.image1 {
	height: 213px;
}

.image2, .image3 {
	height: 111px
}

.text {
	position: absolute;
	width: 100%;
	font-size: 15px;
	line-height: 15px;
	height: 48px;
	overflow: hidden;
	font-family: 'proxima-nova', sans-serif;
	font-weight: 300;
	font-size: 15px;
	position: absolute;
	padding: 0 7px;
}

.text1 {
	top: 222px;
}

.text2, .text3 {
	top: 124px;
}

.title {
	text-transform: uppercase;
	font-size: 10px;
	font-weight: 600;
}


@media (min-width: 375px){
	.logo {
		position: absolute;
		width: 136px;
		left: 14px;
		top: 13px;
	}
	
	.wooninspiratie {
		position: absolute;
		width: 166px;
		left: 160px;
		top: 23px;
	}
	.container {
		width: 375px;
		left: calc(50% - 187.5px)
	}
}


@media (min-width:580px) {

	#stage {
		height: 347px;
	}

	.container {
		width: 600px;
		left: calc(50% - 300px);
		height: 347px;
	}

	.card {
		top: 50px;
		height: 248px;
	}

	.card1 {
		left: 15px;
		width: 272px;
	}

	.card2 {
		left: 296px;
		width: 140px;
	}

	.card3 {
		left: 445px;
		width: 140px;
	}

	.image {
		height: 180px
	}

	.text {
		top: 187px;
	}

	.button {
		top: 153px;
		height: 27px;
		width: 170px;
		font-size: 14px;
		line-height: 27px;
	}
	
}