html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;
}

html, body { height: 100%; width: 100%; }

body {
	line-height: 1;
}


@font-face {
  font-family: "OtypicalText-Medium";
  src: url("../fonts/OtypicalText-Medium.woff");
}


img {
  -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none;
  image-rendering: auto;
}

.banner {
	--bannerWidth: 970px;
	--bannerHeight: 250px;
	--bgColor: #000000;
	--borderColor: #ff7621;
	--butBorderColor:#000000;

	width: var(--bannerWidth);
	height: var(--bannerHeight);

	--buttonWidth: 102px;
	--buttonHeight: 30px;

	--subButtonWidth: 78px;
	--subButtonHeight: 30px;

	--leftRadius: 20px 20px;
	--rightRadius: 20px 20px;

	--leftSubRadius: 20px 20px;
	--rightSubRadius: 0px 0px;

	box-sizing: border-box;
	visibility: hidden;
	position: relative;
	overflow: hidden;
	cursor: pointer;
}

.asset, svg { position: absolute;}

#border {
	position: absolute;
	top:0px;
	left:0px;
	width:var(--bannerWidth);
	height:var(--bannerHeight);
  border: 1px solid var(--borderColor);
  box-sizing: border-box;
  pointer-events:none;
}

.cover {
	position: absolute;
	top: 0px;
	left: 0px;
	width: var(--bannerWidth);
	height: var(--bannerHeight);
	background-color: var(--bgColor);
}

.full { position: absolute; top: 0px; left: 0px; }
.full img { width:var(--bannerWidth); height:var(--bannerHeight); }

/************* BUTTON *************/

#buttonHolder {
	position: absolute;
	bottom: var(--globalMargin);
	bottom: 56px;
	left: 708px;
	width:var(--buttonWidth);
	height:var(--buttonHeight);
}

#button {
	position: absolute;
	top: 0px;
	left: 0px;
  overflow: hidden;
  border-radius: 20px;
 	border-bottom-left-radius: var(--leftRadius);
  border-top-right-radius: var(--rightRadius);
  background-color: #444444;
 	width:var(--buttonWidth);
	height:var(--buttonHeight);
}

#butBack{
	position: absolute;
	top: 0px;
	left: 0px;
  border-radius: 20px;
  background-color: #000000;
  width:var(--buttonWidth);
  width:calc(var(--buttonWidth) + 20px);
  
	height:var(--buttonHeight);
}

.arrows{
	position: absolute;
	top: 8px;
	left: 88px;
	width:12px;
	height:12px;
	overflow: hidden;
}


#arrow_1 svg{
	left: 0px;
}

.arrow1Style{}

#klikhierCopy{
	position: absolute;
	top: 0px;
	left: 3px;
	width:var(--buttonWidth);
	height:var(--buttonHeight);
}

#buttonHolder,  #button, { width: var(--buttonWidth); height: var(--buttonHeight); }
#button { position: absolute; top: 0px; left: 0px; }

#urlHolder{
	position: absolute;
	top: 0px;
	left: 0px;
		width:var(--buttonWidth);
	height:var(--buttonHeight);
}
/************* LEGALLINE *****************/

#legalLineSmall {
	position: absolute;
	width: calc(var(--bannerWidth) - (2 * 10px));
	height: 8px;
	background-color: rgaba(0,0,0,.1);
	left: 0;
	bottom: 0;
	padding-left: 28px;
	padding-right: 10px;
}

#legalLineSmall span {
	position: absolute;
	display: block;
	top: 0;
	bottom: 0;
	font-size: 6px;
	font-family:arial;
	text-align: left;
	line-height: 1.1;
	font-weight: 300;
}

#iconIBg {
	border-bottom-right-radius: 6px;
	border-top-left-radius: 6px;
	/*border-radius: 6px;*/
}
#iconI {
	font-size: 12px;
	font-family:arial;
	color:#ffffff;
	font-style: italic;
	font-weight:900;
}
.no-break {
	white-space: nowrap;
}
.dont-break-out {
	/* Adds a hyphen where the word breaks, if supported (No Blink), use in skyscrapers or when shortage in xspace*/

  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  word-break: break-word;

  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.hyphenate {
  word-wrap: break-word;
  overflow-wrap: break-word;

	-webkit-hyphens: auto;
	   -moz-hyphens: auto;
	        hyphens: auto;
}
.shadow {
  -webkit-filter: drop-shadow( -20px 20px 20px rgba(0, 0, 0, .3));
  filter: drop-shadow( -20px 20px 20px rgba(0, 0, 0, .3));
}

/************* POSTCODE *************/
#clickArea {
	position: absolute;
	width: var(--bannerWidth);
	height: var(--bannerHeight);
	top: 0;
	left: 0;
}


#postcodeBack{
	position: absolute;
	top:160px;
	left:586px;
	width:240px;
	height:38px;
	border-radius: 20px;
	background-color: #ffffff;
	border: 1px solid #dddddd;
	box-sizing: border-box;
}

input[type = text] {

	box-sizing: border-box;
	
	color:#757575;
	/*box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.27);*/
	border: none;
	background: transparent;
	padding: 15px;
	font-size: 15px;
	font-family: "OtypicalText-Medium";
	box-sizing: border-box;
	height: 100%;
	width: 100%;
	-webkit-appearance: none;
	will-change: transform;
	border-radius: 8px;
	-webkit-writing-mode: horizontal-tb !important;
	text-rendering: auto;
	letter-spacing: normal;
	word-spacing: normal;
	text-transform: none;
	text-indent: 0px;
	text-shadow: none;
	display: inline-block;
	text-align: start;
	-webkit-appearance: textfield;
	background-color: transparent;
	-webkit-rtl-ordering: logical;
	cursor: text;
	margin: 0em;
	/*text-transform: uppercase;*/
}
input[type = text]:focus {
 /* border: 2px solid #ccc;*/
}
input:focus {
    outline: none;
}

#error_text {
	position: absolute;
  top: 202px;
   left: 598px;
  width: 180px;
  font-family: "OtypicalText-Medium";
  font-size: 10px;
  text-align: left;
  color: #000000;
}

.postcode_txt {
	position: absolute;
	top:152px;
	left:48px;
	width:160px;
	font-family: "OtypicalText-Medium";
	font-size: 14px;
	color:#757575;
	text-align: left;
}
/*.huisnummer_txt {
	position: absolute;
	top:170px;
	left:127px;
	width:160px;
	font-family: "TeleNeoWeb-Regular";
	font-size: 11px;
	color:#ffffff;
	text-align: left;
}
.toevoeging_txt {
	position: absolute;
	top:170px;
	left:230px;
	width:160px;
	font-family: "TeleNeoWeb-Regular";
	font-size: 11px;
	color:#ffffff;
	text-align: left;
}*/
#postcode {
	position: absolute;
	top:157px;
	left:594px;
	width:110px;
	height:42px;
	/*visibility: hidden;
	z-index:99999;*/
}
/*#huisnummer {
	position: absolute;
	top:184px;
	left:123px;
	width:90px;
	height:42px;
	z-index:99999;
}
#toevoeging {
	position: absolute;
	top:184px;
	left:226px;
	width:90px;
	height:42px;
	z-index:99999;
}*/

#postcodeInput {
	box-sizing: border-box;
}
.intro{
	top:20px;
}