/* 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');
/* 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;
	cursor: pointer;
	overflow: hidden;
}

.container {
	position: absolute;
	width: 300px;
	height: 400px;
	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: 63px;
	left: 22px;
	font-size: 20px;
	line-height: 25px;
}

.subTitle {
	position: absolute;
	font-family: 'PT Sans', sans-serif;
	font-size: 13px;
	left: 22px;
	top: 118px;
	padding-right: 5px;
	font-weight: 400;
	line-height: 17px;
}

select {
	position: absolute;
	width: 162px;
	height: 35px;
	border: 1px solid #C4C4C4;
	font-family: 'PT Sans', sans-serif;
	font-size: 13px;
	color: #333333;
	padding-left: 6px;
	left: 125px;
	border-radius: 2px;
	box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.05);
	-webkit-appearance:none;
	appearance: none;
	cursor: pointer;
	background-image: url('pijl.svg');
	background-repeat: no-repeat;
	background-position: calc(100% - 8px)center;
}

.copy {
	position: absolute;
	font-family: 'PT Sans', sans-serif;
	font-size: 14px;
	line-height: 40px;
	left: 22px;
}

.copy1 {
	top: 165px;
}
.copy2 {
	top: 208px;
}
.copy3 {
	top: 250px;
}
.copy4 {
	top: 292px;
}

.pijl {
	position: absolute;
	left: 270px;
}

.pijl1 {
	top:184px;
}
.pijl2 {
	top:227px;
}
.pijl3 {
	top: 270px;
}
.pijl4 {
	top: 310px;
}

#breedte {
	top: 168px;
}
#hoogte {
	top: 211px;
}
#diameter {
	top: 254px;
}
#seizoen {
	top: 294px;
}

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

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

.band1, .band2 {
	display: none;
}

.bg {
	position: absolute;
	width: 100%;
	height: 42px;
	background-color: #F7F7F7;
	z-index: -1;
}

.bg1 {
	top: 165px;
}
.bg2 {
	top: 251px;
}
@media (min-width: 370px){

	.title {
		top: 63px;
		line-height: 30px;
	}
	
	.subTitle {
		top: 123px;
		padding-right: 5px;
		line-height: 17px;
	}

	select {
		left: 187px;
	}

	.send {
		left: 187px;
	}
	
	.container{
		width: 370px;
	}

	.title {
		font-size: 26px;
	}

	.subTitle {
		padding-right: 5px;
	}
	
}

@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 {
		top:61px;
		font-size: 35px;
		line-height: 41px;
	}

	.subTitle {
		top: 99px; 
	}

	select {
		width: 89px;
	}

	#breedte {
		top: 149px;
		left: 35px;
	}

	#hoogte {
		top: 149px;
		left: 144px;
	}

	#diameter {
		top: 149px;
		left: 253px;
	}

	#seizoen {
		width: 307px;
		left: 35px;
		top: 212px;
	}

	.copy {
		top: 118px;
	}

	.copy1 {
		lefT: 35px;
	}
	.copy2 {
		left: 149px;
	}
	.copy3 {
		left: 253px;
	}
	.copy4 {
		left: 35px;
		top: 181px;
	}

	.send {
		top:257px;
		left: 35px;
		width: 162px;
	}

	.band1 {
		display: block;
		position: absolute;
		height: 258px;
		top: 72px;
		left: 421px;
		z-index: 2;
	}
	.band2 {
		display: block;
		position: absolute;
		height: 210px;
		top: 97px;
		left: 343px;
	}
}