/* Fonts */
  
  /* 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;
	font-family: Arial, Helvetica, sans-serif;
	color: #6D6D6D;
	font-size: 14px;
}

.container {
	position: absolute;
	width: 300px;
	height: 337px;
	left: 50%;
	transform:translate(-50%);
	background-color: #0F5E9B;
	overflow: hidden;
}

.top {
	position: absolute;
	height: 80px;
	top: 0;
	width: 100%;
	left: 0;
}

.textXL {
	display: none;
}

.textXS {
	position: absolute;
	top: 22px;
	left: 17px;
	width: 205px;
}

.main {
	position: absolute;
	top: 80px;
	width: calc(100% - 20px);
	left: 10px;
	height: 140px;
}

.inputContainer {
	position: absolute;
	height: 39px;
	background-color: #fff;
	border-radius: 4px;
}

.IPMerk {
	top: 2px;
	width: 	calc(50% - 3.5px);
	left: 0px;
}

.IPCarro {
	top: 2px;
	width: 	calc(50% - 3.5px);
	left: calc(50% + 3.5px);
}

.IPPrijs {
	width: 100%;
	top: 49px;
}

.IPBrandstof {
	width: 100%;
	top: 95px;
}

.input {
	position: absolute;
	top: 0;
	height: 100%;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: none;
	background-color: rgba(255,255,255,0);
	width: 100%;
	color: #6D6D6D;
	font-size: 14px;
	border-radius: 4px;
	padding-left: 13px;
}

option {
	background-color: #fff;
}

.down {
	position: absolute;
	right: 15px;
	top: 16px;
}

.prijs {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	padding-left: 15px;
	line-height: 39px;
	width: 80px;
	background-color: #E5E5E5;
	border-radius: 4px 0 0 4px;
}

#min {
	width: 100px;
	left: 80px;
	border-right: 1px solid #E5E5E5;
	border-radius: 0;
}

#down1 {
	right: 115px;
}

#max {
	width: 100px;
	left: 180px;
}

.arrowContainer {
	position: absolute;
	top: 224px;
	height: 39px;
	width: calc(100% - 22px);
	left: 11px;
	overflow: hidden;
}

.arrow {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	cursor: pointer;
}

.zoeken {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	cursor: pointer;
}

.bottom {
	position: absolute;
	top: 276px;
	width: 100%;
	height: 61px;
	background-color: #fff;
}

.bottomLine {
	position: absolute;
	bottom: 0;
	height: 10px;
	width: 100%;
	background-color: #EB5A0A;
}

.logo {
	position: absolute;
	bottom: 5px;
	left: 11px;
	width: 48px;
}



@media (min-width: 375px){

	.container {
		width: 375px;
	}

	.prijs {
		width: 98px;
	}

	#min {
		left: 98px;
		width: 128.5px;
	}

	#max {
		left: 226.5px;
		width: 128.5px;
	}

	#down1 {
		right: 143.5px
	}

}

@media (min-width:600px) {

	.container {
		width: 600px;
		height: 270px;
	}

	.top{
		height: 50px;
	}

	.textXS {
		display: none;
	}

	.textXL {
		position: absolute;
		display: block;
		width: 346px;
		left: 14px;
		top: 22px;
	}

	.main {
		top: 54px;
		width: calc(100% - 28px);
		left: 14px;
	}

	.inputContainer {
		height: 37px;
		width: 284px;
	}

	.IPCarro {
		left: 289px;
	}

	.IPPrijs {
		top: 46px;
	}

	.IPBrandstof {
		top: 46px;
		left: 289px
	}

	.prijs {
		line-height: 37px;
		width: 84px;
	}

	#min {
		left: 84px;
		width: 100px;
	}

	#max {
		left: 184px;
		width: 100px;
	}

	#down1 {
		right: 115px;
	}

	.arrowContainer {
		width: 284px;
		left: 303px;
		top: 149px;
	}

	.bottom {
		top: 204px;
		height: 70px;
	}
	
	
}