/* Fonts */

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=PT+Sans&display=swap');

@font-face {
	font-family: 'Kenteken';
	src: url('Kenteken.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
  }

  
  /* 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: 100%;
	position: absolute;
	overflow: hidden;
}

.clickLayer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

.container {
	position: absolute;
	width: 300px;
	height: 335px;
	top:50%;
	left: 50%;
	transform:translate(-50%, -50%);
	background-color: #ffffff;
	overflow: hidden;
}

header {
	position: relative;
	height: 50px;
	width: 100%;
	background-color: #333333;
}

.logo {
	position: absolute;
	left: 25px;
	height: 100%;
}

/* .title {
	position: absolute;
	font-family: 'Roboto Condensed', sans-serif;
	top: 57px;
	left: 0;
	font-size: 18px;
	width: 100%;
	text-align: center;
} */

.title {
	position: absolute;
	font-family: 'Roboto Condensed', sans-serif;
	top: 66px;
	left: 0px;
	font-size: 20px;
	width: 100%;
	text-align: center;
}

/* .subTitle {
	position: absolute;
	font-family: 'PT Sans', sans-serif;
	text-align: center;
	font-size: 13px;
	left: 0;
	top: 80px;
	width: 100%;
	font-weight: 400;
	line-height: 17px;
} */

.subTitle {
	position: absolute;
	font-family: 'PT Sans', sans-serif;
	font-size: 13px;
	left: 0px;
	top: 100px;
	width: 100%;
	text-align: center;
}

.mainContainer {
	position: absolute;
	width: 278px;
	height: 204px;
	top: 120px;
	left: 11px;
}

.background {
	background-image: url('background.jpg');
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 90%;
}

.subContainer {
	position: absolute;
	top: 16px;
	height: 172px;
	left: 14px;
	width: 250px;
	background-color: rgba(255, 255, 255, 0.9);
	border-radius: 4px;
}

.kenteken {
	position: absolute;
	width: 220px;
	left: 15px;
	top: 32px;
}

.kentekenClick {
	position: absolute;
	top: 36px;
	left: 38px;
	height: 40px;
	width: 195px;
	border: none;
	outline: none;
	background-color: rgba(255, 255, 255, 0);
	cursor: text;
	text-align: center;
	text-transform: uppercase;
	font-family: 'Kenteken';
	font-size: 20px;
}

/* .cta {
	position: absolute;
	background-color: #DF0700;
	transition: background-color .2s ease;
	text-align: center;
	color: white;
	font-size: 16px;
	font-family: 'Roboto Condensed', sans-serif;
	width: 220px;
	left: 15px;
	height: 42px;
	top: 96px;
	line-height: 46px;
	border-radius: 4px;
	vertical-align: center;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
	cursor: pointer;
} */

.cta {
	position: absolute;
	background-color: #DF0700;
	transition: background-color .2s ease;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 14px;
	font-weight: 500;
	width: 220px;
	left: 15px;
	height: 42px;
	top: 96px;
	color: white;
	text-align: center;
	border: none;
	border-radius: 4px;
	box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.25);
}

.cta:hover {
	background-color: #C10000;
	transition: background-color .2s ease;
}

.text {
	display: none;
}

@media (min-width: 370px){

	.container {
		width: 370px;
	}

	.mainContainer {
		width: 350px;
		left: 10px;
	}

	.subContainer {
		width: 320px;
	}

	.title {
		top: 66px;
	}
	
	.kenteken {
		left: 50px;
	}
	
	.cta {
		left: 50px;
	}

	.kentekenClick {
		left: 73px;
	}
}

@media (min-width:600px) {

	.bg {
		display: none;
	}
	
	#stage {
		width: 100%;
		height: 100%;
		position: absolute;
		cursor: pointer;
		overflow: hidden;
	}

	.container {
		position: absolute;
		width: 600px;
		height: 320px;
		top:50%;
		left: 50%;
		transform:translate(-50%, -50%);
		background-color: #ffffff;
	}

	/* .title {
		width: 600px;
		top:61px;
		left: 0;
		font-size: 38px;
		line-height: 41px;
	} */

	/* .subTitle {
		top: 99px; 
		left: 0;
		width: 600px;
	} */

	.title {
		top:67px;
		font-size: 38px;
	}

	.subTitle {
		font-size: 15px;
		top: 112px; 
	}
	
	.smallWindowTekst {
		display: none;
	}

	.mainContainer {
		width: 570px;
		left: 15px;
		height: 184px;
		top: 125px;
	}

	.subContainer {
		top: 13px;
		height: 158px;
		width: 520px;
		left: 25px;
	}

	.kenteken {
		top: 25px;
		left: 40px;
	}

	.kentekenClick {
		left: 63px;
		top: 30px;
	}

	.cta {
		top: 94px;
		left: 40px;
	}

	.text {
		display: block;
		position: absolute;
		height: 120px;
		top: 19px;
		left: 300px;
	}
	
}