/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/




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;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

#POPUP_CONTENT{
	display:none;
}


/* DEFAULT STYLE SETTINGS */

.modal {
		display:    none;
		position:   fixed;
		z-index:    1000;
		top:        0;
		left:       0;
		height:     100%;
		width:      100%;
		background: rgba( 255, 255, 255, .8 ) 
		            url('http://i.stack.imgur.com/FhHRx.gif') 
		            50% 50% 
		            no-repeat;
		opacity: 0.80;
		-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 80);
		filter: alpha(opacity = 80)
	};
	
	body.loading {
	    overflow: hidden;   
	}

		
	body.loading .modal {
	    display: block;
	}

@media screen and (min-width: 0px)  {

	html{
		margin:0 auto;
		background-color:#ffffff;
		color:#000000;
		font-family:Raleway, sans-serif;
		margin:0px;
		padding:0px;
		position:relative;
		height:100%;
	}
	
	body{
		height:100%;
	}
	
	.no-js #loader { display: none;  }
	
	.js #loader { display: block; position: absolute; left: 100px; top: 0; }
	
	.preloader{
		position: fixed;
		left: 0px;
		top: 0px;
		width: 100%;
		height: 100%;
		z-index: 9999;
		background: url(../img/preloader.gif) center no-repeat #fff;
	}

	
	
	.modal {
		display:    none;
		position:   fixed;
		z-index:    1000;
		top:        0;
		left:       0;
		height:     100%;
		width:      100%;
		background: rgba( 255, 255, 255, .8 )
		            url('https://i.stack.imgur.com/FhHRx.gif')
		            50% 50%
		            no-repeat;
		opacity: 0.80;
		-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 80);
		filter: alpha(opacity = 80)
	}

	body.loading {
	    overflow: hidden;
	}

	body.loading .modal {
	    display: block;
	}


	input,textarea{
		padding:5px 10px;
		border-radius:5px;
		font-size:1em;
		border:0px;
	}

	textarea{
		font-family:inherit;
		font-size:0.8em:
	}

	.auto_select input, .auto_select textarea{
		padding:5px;
		border-radius:5px;
		border:1px solid #c9c9c9;
	}

	.auto_select .frm_focus{

	}

	.auto_select .button, .button{
		width:auto;
		cursor:pointer;
		-webkit-transition: .5s ease-in-out;
	 	 -moz-transition: .5s ease-in-out;
	  	-o-transition: .5s ease-in-out;
	  	transition: .5s ease-in-out;
        outline:none;
		border:1px solid #3366be;
		border-radius: 5px;
		background:none;
		padding:10px 15px;
		text-transform: uppercase;
		color:#3366be;
	}

	.button:hover{
		color:#ffffff;
		background-color:#3366be;
		outline:none;
	}

	.button:active{
		position:relative;
		top:1px;
		outline:none;
	}

	.button-white{
		border:1px solid #ffffff;
		color:#ffffff;
	}	
	
	.button-white:hover{
		background-color:#ffffff;
		color:#3366be;
	}	

	#popup-content{

		min-width:140px;
		color:#000000;
		border-radius:5px ;
		opacity: 0;
   	 	transform: translateY(-50px);
    	transition: all .3s;

	}

	.fancybox-container a, .fancybox-controls, .fancybox-buttons , .fancybox-button--close{
		outline: none;
	}

	.fancybox-slide--complete #popup-content {
		opacity: 1;
		transform: translateY(0);
	}

	.btn-popup {
		display: inline-block;
		text-align:right;
		float:right;
		border:0px;
		background-color:#ad2100;
		border-radius:12px;
		color:#ffffff;
		padding:8px 15px;
		font-size:10px;
		outline:none;

	}



	.frmerror{
		
		font-style: italic;
	}


	.formfeedback{
		
		font-style: italic;
	}



	.point{
		cursor:pointer;
	}


	a{
		outline: none;
		text-decoration:underline;
		color:inherit;
	}


	p, ul, ol{
		line-height:1.8em;
		margin-bottom:20px;
	}


	h1,h2,h3,h4{
		margin-bottom:30px;
		font-family: Montserrat;
	}

	h1{
		font-size:1.9em;
		text-transform: uppercase;
		font-weight: bold;
	}

	h2{
		font-size:1.6em;
		text-transform: uppercase;
		font-weight: bold;
		color:#288dca;
	}

	h3{
		font-size:1.3em;
		text-transform: uppercase;
		font-weight: bold;
		color:#288dca;
	}

	strong{
		font-weight:bold;
	}

	small{
		font-size:0.8em;
	}

	em{
		font-style:italic;
	}


	ul, ol{
		list-style-type:disc;
		position:relative;
	}

	ol{
		list-style-type:decimal;
	}

	li{

	}


	.clear{
		clear:both;
	    height:0;
	    font-size: 1px;
	    line-height: 0px;
	}

	#cookiebanner{
		height:310px;
		position:fixed;
		color:#000000;
		width:230px;
		right:20px;
		top:20px;
		z-index:9997;
		-webkit-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.75);
		-moz-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.75);
		box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.75);
		background-color:#ffffff;
		overflow:hidden;
		font-size:0.8em;
		text-align:center;
		border-radius:5px;
	}
	

	
	
	#cookiebanner a{
		color:inherit;
	}
	
	#cookiebanner-header {
		padding:8px 5px 0px 5px;
	}
	
	#cookiebanner-header h3{
		margin-bottom:7px;
		color:#000000;
		text-transform:uppercase;
		font-weight:bold;
		font-size:1.1em;
	}
	
	#cookiebanner-image img{
		width:100%;
		height:auto;
	}


	#cookiebanner-tekst{
		padding:10px;
		font-weight:lighter;
		line-height:1.5em;
		margin-bottom:5px;
	}

	#cookiebanner-accept{
	
	}

	#cookiebanner-accept button{
		width:auto;
		cursor:pointer;
		-webkit-appearance: none;
		border:0px;
		background-color:#ad2100;
		color:#ffffff;
		font-size:11px;
		border-radius:10px;
		font-size:12px;
		padding:5px;
		margin-bottom:0px;
	}
	#cookiebanner-accept button:hover{
		background-color:#d72900;
	}

	#trigger-nav{
		
    	color:#ffffff;
    	-webkit-transition: .5s ease-in-out;
	 	 -moz-transition: .5s ease-in-out;
	  	-o-transition: .5s ease-in-out;
	  	transition: .5s ease-in-out;
	  	cursor:pointer;
	  	width:auto;
	  	height:32px;
	  	font-size:1.85em;
	  	padding:19px;
	  	position:absolute;
	  	top:0px;
	  	right:0px;
	  	z-index:901;
	}

	#trigger-nav:hover{
		background-color:#0c244d;
	}

	#nav-icon{
		width: 30px;
		height: 10px;
		position: relative;
		margin: 3px auto;
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
		-webkit-transition: .5s ease-in-out;
		-moz-transition: .5s ease-in-out;
		-o-transition: .5s ease-in-out;
		transition: .5s ease-in-out;
		cursor: pointer;
		display:inline-block;
		vertical-align:top;
	}

	#nav-icon span{
		display: block;
		position: absolute;
		height: 4px;
		width: 100%;
		background: #ffffff;
		border-radius: 4px;
		opacity: 1;
		left: 0;
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
		-webkit-transition: .25s ease-in-out;
		-moz-transition: .25s ease-in-out;
		-o-transition: .25s ease-in-out;
		transition: .25s ease-in-out;
	}

	#nav-icon span:nth-child(1) {
	  top: 0px;
	}

	#nav-icon span:nth-child(2) {
	  top: 8px;
	}

	#nav-icon span:nth-child(3) {
	  top: 16px;
	}

	#nav-icon.open span:nth-child(1) {
	  top: 8px;
	  -webkit-transform: rotate(135deg);
	  -moz-transform: rotate(135deg);
	  -o-transform: rotate(135deg);
	  transform: rotate(135deg);
	}

	#nav-icon.open span:nth-child(2) {
	  opacity: 0;
	  left: -60px;
	}

	#nav-icon.open span:nth-child(3) {
	  top: 8px;
	  -webkit-transform: rotate(-135deg);
	  -moz-transform: rotate(-135deg);
	  -o-transform: rotate(-135deg);
	  transform: rotate(-135deg);
	}
	
	header{
		background-color:#3366be;
		position: relative;
	}
	
	nav{
		color:#ffffff;
		text-transform: uppercase;
	}
	
	.nav-item{
		-webkit-transition: .5s ease-in-out;
	 	 -moz-transition: .5s ease-in-out;
	  	-o-transition: .5s ease-in-out;
	  	transition: .5s ease-in-out;
		cursor:pointer;
		border-bottom:2px solid #3366be;
		padding-bottom:10px;
	}
	
	.nav-item:hover, .nav-selected{
		color:#6aa1ff;
		border-bottom:2px solid #ffffff;
	}
	
	
	#banner{
		background-image:url("../img/automatenshop.jpg");
		background-repeat: no-repeat;
		background-size: cover;
		background-position: top center;
		position:relative;
		color:#ffffff;
	}
	
	.container{
		max-width:1000px;
		width:90%;
		margin:0 auto;
		padding:70px 0px;
	}
	
	#home-contact{
		background-color:#3366be;
		padding:20px;
		color:#ffffff;
		border-radius:5px;
	}
	
	#home-contact h3{
		color:#ffffff;
	}
	
	#home-contact img{
		width:40px;
		height:auto;
		margin-right:10px;
	}
	
	#subcontact, #subherstelling{
		background-color:#3366be;
		color:#ffffff;
		text-align:center;
	}
	
	#inner-subcontact{
		max-width:800px;
		margin:0 auto;
	}
	
	#subcontact label, #subherstelling label{
		display:block;
		line-height:1.9em;
	}
	
	
	
	.form-row{
		margin-bottom:15px;
	}
	
	footer a{
		color:#ffffff;
	}
	
	
	footer{
		background-color:#0c244d;
		color:#ffffff;
		text-align:center;
	}
	
	#subautomaat{
		background-color:#dfdfdf;
		text-align:center;
	}
	
	.automaat-item{
		vertical-align:top;
		width:140px;
		padding:15px;
		background-color:#ffffff;
		margin: 12px;
		-webkit-transition: .5s ease-in-out;
	 	-moz-transition: .5s ease-in-out;
	  	-o-transition: .5s ease-in-out;
	  	transition: .5s ease-in-out;
		border-radius: 5px;
		text-align:center;
	}
	
	.automaat-item h4{
		color: #3366be;
	}
	
	
	.automaat-item img{
		width:140px;
		height:auto;
		margin-bottom:15px;
	}
	
	.automaat-item p{
		font-size:0.9em;
		line-height:1.4em;
	}
	
	.automaat-item:hover{
		-webkit-box-shadow: 0px 0px 27px -5px rgba(0,0,0,0.75);
		-moz-box-shadow: 0px 0px 27px -5px rgba(0,0,0,0.75);
		box-shadow: 0px 0px 27px -5px rgba(0,0,0,0.75);
	}
	.automaatcategorie-item {
		border:1px solid #dfdfdf;
	}
	
	.automaatcategorie-item:hover {
		border:1px solid #dfdfdf;
	}
	
	
	.automaatcategorie-item-omschrijving{
		height:80px;
		overflow: auto;
		margin-bottom:10px;
	}
	
	#subgalerij{
		text-align: center;
		padding:50px;
		background-color:#dfdfdf;
	}
	
	#subgalerij-slick{
		width:80%;
		max-width:1200px;
		margin:10px auto 40px auto;
		text-align: center;

	}
	
	.subgalerij-item{
		padding:20px;
		text-align:center;

	}
	
	.subgalerij-item img{
		width:200px;
		margin:auto;
	}
	
	.slick-arrow{
		height:200px;
		background-color:#0c244d;
		color:#ffffff;
		padding:0px 10px;
		width:30px;
		font-weight:bold;
		 -webkit-transition: background-color .15s ease-in-out;
        -moz-transition: background-color .15s ease-in-out;
        -ms-transition: background-color .15s ease-in-out;
        -o-transition: background-color .15s ease-in-out;
        transition: background-color .15s ease-in-out;
	
	}
	

	.slick-arrow:hover{
		background-color:#3366be;
		color:#ffffff;
	}
	
	.slick-next::before {
		content: '>';
			
	}
	
	.slick-prev::before {
		content: "<";
	}
	
	#service{
		margin-bottom:40px;
	}
	
	.tarief-item-kleur{
		width:30px;
		height:30px;
	}
	
	#tarief-licht{
		background-color:#3a65ae;
	}
	
	#tarief-donker{
		background-color:#46398e;
	}
	
	#lbl-bestand{
		font-size:0.8em;	
	}
	
	#frm-row-bestand{
		
		padding:5px;
	
	}
	
	#frm-herstelling-bestand{
		font-size:0.9em;
		border:1px solid #ffffff;
		border-radius:5px;
	}
	#contact-info img{
		height:30px;
		width:auto;
	}
	
	#contact-info{
		margin-bottom:30px;
	}
	
	#map{
		height:350px;
	}
	
	.breadcrump{
		margin:30px 30px 0px 30px;
	}
	
	.automaat-foto{
		margin-bottom:50px;	
	}
	
	
	.automaat-hoofdfoto{
		border:1px solid #dfdfdf;
		border-radius:5px;
		margin-bottom:10px;
		width:250px;
		-webkit-transition: .5s ease-in-out;
	 	-moz-transition: .5s ease-in-out;
	  	-o-transition: .5s ease-in-out;
	  	transition: .5s ease-in-out;
	}
	
	.automaat-hoofdfoto img{
		width:249px;
		height:auto;
		border-radius:5px;
	}
	
	.automaat-thumbs{
		width:50px;
		display:inline-block;
		border:1px solid #dfdfdf;
		margin-right:5px;
		border-radius:2px;
		cursor:pointer;
		-webkit-transition: .5s ease-in-out;
	 	-moz-transition: .5s ease-in-out;
	  	-o-transition: .5s ease-in-out;
	  	transition: .5s ease-in-out;
	}
	
	.automaat-thumbs img{
		width:50px;
		height:auto;
	}
	
	.selected-thumb, .automaat-thumbs:hover{
		border:1px solid #3a65ae;
	}
	
	.automaat-download h3,.automaat-foto h3{
		width:250px;
		background-color:#3366be;
		color:#ffffff;
		padding:10px;
		font-size:1.1em;
		border-radius:5px;
	}
	
	.automaat-download h4{
		margin-bottom:6px;
		font-size:0.9em;
	}
	
	.automaat-download-icon{
	
		margin-right:10px;
		margin-bottom:5px;
	}
	
	.automaat-download-icon img{
		width:60px;
		height:auto;
	}
	
	.automaat-model{
		display:inline-block;
		border-radius: 5px;
		background-color:#dfdfdf;
		width:150px;
		height:50px;
		margin:10px 25px 25px 0px;
		padding:10px;
		text-align:center;
		vertical-align: top;
		overflow:hidden;
	}
	
	.automaat-model h4{
		font-weight:bold;
		text-transform: uppercase;
		color:#3366be;
		margin-bottom:5px;
	}
	
	.automaat-model p{
		margin-bottom:0px;
		font-size:0.9em;
		
	}
	
	.automaat-model-info{
		display:none;
	}
	
	.opt-item{
		padding:5px;
		font-size:0.9em;

	}
	
	#referenties{
		display:flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	
	.referenties-item-foto a img{
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-transition: .3s ease-in-out;
		transition: .3s ease-in-out;
		
	}
	
	
	.referenties-item-foto a:hover img{
		-webkit-transform: scale(1.3);
		transform: scale(1.3);
	}
	
	
	.referenties-item{
		width:200px;
		height:200px;
		overflow:hidden;
	}
	
	
	.referenties-item-foto{
		width:180px;
		height:180px;
		overflow:hidden;
	}
	
	.referenties-item img{
		width:180px;
		height:180px;
	}
	
	
}





@media screen and (max-width: 900px)  {		/* DIT IS VOOR DE MOBIELE BROWSERS */
	#cookiebanner{
		height:auto;
	}

	#cookiebanner-accept{
		top:55px;
		left:10px;
	}

	
	header{
		background-color:#3366be;
		height:70px;
	}
	
	#logo{
		position:absolute;
		top:5px;
		left:20px;
		z-index:100;
	}
	
	#logo img{
		height:60px;
		width:auto;
	}
	
	
	
	nav{
		display:none;
		position:absolute;
		top:0px;
		left:0px;
		width:100%;
		background-color:#0c244d;
		z-index:900;
		padding:20px 0px;
	}

	.nav-item{
		text-align:center;
		width:80%;
		margin:20px auto;
		color:#ffffff;
		padding:10px;
		
	}

	.home-list{
		text-align:center;
	}

	.home-list ul{
		left:0px;
		list-style-type:none;
	}
	
	#banner{
		height:250px;
		position:relative;
	}
	
	#banner h1{
		position:absolute;
		left:0px;
		text-align:center;
		width:100%;
		bottom:140px;
		font-size:2.3em;
		text-transform: uppercase;
		font-weight: bold;
	}
	
	#banner p{
		position:absolute;
		bottom:120px;
		font-size:1.1em;
		left:0px;
		text-align:center;
		width:100%;
	}
	
	#banner-cta{
		position:absolute;
		left:0;
		width:100%;
		bottom:50px;
		z-index:100;
		text-align:center;
	}
	
	#banner-cta button{
		display:inline-block;
	}
	
	.page-part2{
		margin-bottom:50px;
	}
	
	#subcontact textarea, #subcontact input, #frm-herstelling textarea, #frm-herstelling input{
		max-width:300px;
		width:80%;
		
	}
	
	#frm-herstelling  #frm-herstelling-privacy, #subcontact #frm-contact-privacy{
		width:auto;
	}
	
	.automaat-download,.automaat-foto {
		margin:40px auto;
		width:250px;
	}
	
	.automaat-item{
		display:inline-block;
		max-width:200px;
		width:40%;
		padding:15px;
	}
}




@media screen and (min-width: 900px)  {		/* DIT IS VOOR DE STANDAARD BROWSERS */
	#trigger-nav{
		display:none;
	}
	
	header{
		background-color:#3366be;
		height:100px;
	}
	
	#logo{
		position:absolute;
		top:10px;
		left:20px;
		z-index:100;
	}
	
	#logo img{
		height:80px;
		width:auto;
	}
	
	nav{
		position:absolute;
		top:40px;
		right:20px;
		z-index:101;
	}
	
	.nav-item{
		float:left;
		margin-left:15px;
		font-size:0.95em;
	}
	
	#banner{
		height:400px;
	}
	
	#banner h1{
		position:absolute;
		left:40px;
		bottom:200px;
		font-size:3.2em;
		text-transform: uppercase;
		font-weight: bold;
	}
	
	#banner p{
		position:absolute;
		left:40px;
		bottom:180px;
		font-size:1.5em;
	}
	
	#banner-cta{
		position:absolute;
		left:40px;
		bottom:100px;
		z-index:100;
	}
	
	.page-part2{
		float:left;
		width: 60%
	}
	
	.page-part1{
		float:right;
		width: 30%
	}
	
	.form-1{
		vertical-align: top;
		display:inline-block;
		width:260px
	}
	
	.form-2{
		vertical-align: top;
		display:inline-block;
		width:340px
	}
	
	
	
	#subcontact textarea{
		width:300px;
		height:245px;
	}
	
	#frm-herstelling-toestel, #frm-herstelling-omschrijving{
		width:300px;
	}
	
	#frm-herstelling-omschrijving{
		height:93px;	
	}
	
	#tarieven img{
		float:left;
	}
	
	
	#tarieven-prijslijst{
		float:right;
	}
	
	#contact-info{
		display:flex;
		justify-content: space-between
	}
	
	.contact-info-item{
		display:inline-block;
	}

	.automaat-overzicht{
		display:flex;
		justify-content:space-between;
		flex-wrap: wrap;
	}
	
	.automaat-item{
		display:inline-block;
		width:150px;
		padding:15px;
	}
	
	.automaatcategorie-item{
		width:220px;
	}
	
	.automaatcategorie-item img{
		width:180px;
		height:auto;
	}
	
	.automaat-detail{
		float:left;
		width:550px;
	}
	
	.automaat-media{
		float:right;
		width:250px;
	}
	
	
}


@media screen and (min-width: 1200px)  {	
	.automaat-item{
		width:180px;
		padding:20px;
	}
	
	.nav-item{
		font-size:1.0em;
		margin-left:20px;
	}
}