/****************************************************
	Design: Autosoft BV - www.autosoft.eu
	Code & CSS: Autosoft BV - www.autosoft.eu
	Copyright 2025 Autosoft BV
	 
****************************************************/


			

/* = MEDIAQUERIES 
-------------------------------------------------------------- */

/* huge */
@media screen and (min-width: 1200px) {

	.wrapper  { width: 1170px;}
	
}

/* Large */
@media screen and (min-width: 1025px) and (max-width: 1199px) {

	.wrapper  { width: 980px;}
	
}

/* Basic */
@media screen and (max-width: 1024px) {

	.wrapper  { width: 960px;}

		#mainvisual { height: 500px; }
		#mainvisual img { min-width: 1024px; margin-top: 0%}
		#mainvisual .featuredtext { height: 500px!important; }
		
		#personeelbar .block.onefourth { width: 32.5%;}
		
		.AutoCommerceAvdwWidget ul li .avdwfoto,
		.autovdweek ul li .avdwfoto { width: 90%; height: 110px; }
		.AutoCommerceAvdwWidget ul li .avdwfoto img,
		.autovdweek ul li .avdwfoto img { width: auto!important; margin: 0 auto!important; float: none!important; }
		.AutoCommerceAvdwWidget ul li, .autovdweek ul li {text-align: center; }
		.AutoCommerceAvdwWidget ul li .avdwgegevens, .autovdweek ul li .avdwgegevens { padding-left: 5%; width: 90%; box-sizing: border-box; }
		.AutoCommerceAvdwWidget ul li .avdwmerkmodel, .autovdweek ul li .avdwmerkmodel,
		.AutoCommerceAvdwWidget ul li .avdwuitvoering, .autovdweek ul li .avdwuitvoering,
		.AutoCommerceAvdwWidget ul li .avdwprijs, .autovdweek ul li .avdwprijs,
		.AutoCommerceAvdwWidget ul li .avdwbouwjaar, .AutoCommerceAvdwWidget ul li .avdwkmstand, 
		.autovdweek ul li .avdwbouwjaar, .autovdweek ul li .avdwkmstand {padding-left: 5%; width: 90%; box-sizing: border-box;  }
		
		.autovdweek ul li .avdwfoto img { width: auto!important; margin: 0 auto!important; float: none1important; }

}

/* Tablet */
@media screen and (max-width: 820px) {

	.wrapper  { width: 760px; }

		#mainvisual { height: 420px; }
		#mainvisual img { min-width: 820px; margin-top: 0%}
		#mainvisual .featuredtext { height: 440px!important;}
		
		#personeelbar .block.onefourth {margin: 0px 10px 30px 10px; box-sizing: border-box; width: 47%}
		
		.bericht { 
		box-sizing: border-box; width: 47.5%;
		min-height: 220px; max-height: 220px;}
		
		#topcontent .widget {
		width: 48%;
		margin-top: 0px;
		height: 320px;
		}
		
		#bottomcontent .widget a.nieuwslink {  margin-top: 26px; }

		#maincontent.sidebar-left #inhoud,
		#maincontent.sidebar-right #inhoud  { width: 100%; box-sizing: border-box;}
		#maincontent #sidebar { width: 100%; box-sizing: border-box; margin-top: 20px;}
			
		#maincontent.sidebar-left #inhoud  { float: none;}
		#maincontent.sidebar-right #inhoud  { float: none;}
		#maincontent.sidebar-left #sidebar  { float: none; margin-right: 0%}
		#maincontent.sidebar-right #sidebar  { float: none; margin-left: 0%}
		
		#maincontent #sidebar .block { width: 48%; margin: 0 1% 2.5em 1%;}
	
		#footerwidgets iframe { max-width: 98%!important;}
		
		#sharebar { display: none;}
		
}

/* Mobile */
@media screen and (max-width: 480px) {

	#inhoud { padding: 10px 0px 20px 0px; }
	
		/* Alignment */
		.alignleft, img.alignleft {
			clear: both;
			display: block;
			margin-left: auto;
			margin-right: auto;
			float: none;
		}
		.alignright, img.alignright {
			clear: both;
			display: block;
			margin-left: auto;
			margin-right: auto;
			float: none;
		}
		.aligncenter, img.aligncenter {
			clear: both;
			display: block;
			margin-left: auto;
			margin-right: auto;
			float: none;
		}

		a.zoomLink {
			display: block!important;
		}

		img.alignleft, img.alignright, img.aligncenter, img.alignnone {margin-top: 10px;}

		header#navigatie, header#navigatie.scrollmenu {
			background: #cccccc;
			background-color: rgba(125, 125, 125, 0.8);
			position: fixed; top: 0;
			height: 80px;
			border-bottom: 1px solid rgba(0, 0, 0, 0.8);
			-webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.3);
			box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.3);
			}
			
		a.logo , header#navigatie.scrollmenu  a.logo { 
			width: 137px; height: 60px;
			margin-top: 10px;
			}
			
		
		/*.wrapper  { width: 280px; }*/
		.wrapper  { width: 90%; }
				
			#sitecontainer.pull-up { margin-top: 80px; }	
				
			#access { display: none;}

			#mainvisual { display: none; }
			#mainvisual-sticky-wrapper {display: none;}
			
			h1, h2, h3, h4, h5, h6 { text-align: center!important;}
		
			#topcontent { margin-top: 100px; }
			#topcontent .widget {
			width: 98%;
			margin-top: 20px;
			height: auto;
			}
			
			#topcontent .widget h3 {padding-left: 0px; }

		
		.AutoCommerceAvdwWidget ul li,
		.autovdweek ul li { width: 240px;}
		.AutoCommerceAvdwWidget ul li .avdwfoto,
		.autovdweek ul li .avdwfoto { width: 100%; height: auto; }
		.AutoCommerceAvdwWidget ul li .avdwgegevens,
		.autovdweek ul li .avdwgegevens {padding-left: 0px; width: 100%;}
		.AutoCommerceAvdwWidget ul li .avdwmerkmodel,
		.autovdweek ul li .avdwmerkmodel { padding-left: 0px; width: 100%;}
		.AutoCommerceAvdwWidget ul li .avdwmerkmodel strong,
		.autovdweek ul li .avdwmerkmodel strong {	padding-left: 0px; width: 100%;	}
		.AutoCommerceAvdwWidget ul li .avdwuitvoering,
		.autovdweek ul li .avdwuitvoering { padding-left: 0px; width: 100%;	}
			
		#maincontent #sidebar .block { width: 100%; margin: 0 0% 2.5em 0%;}
		
		#nav-single.foot{display: block!important;}
		
		.bericht { 
			width: 98%; 
			box-sizing: border-box; 
			margin: 10px 0px;
			min-height: 230px; 
			max-height: none;
		}
		
		.bericht h2 { margin-top: 0px!important; }
		.bericht img.thumb { margin-right: 6px; }	
		
		.bericht img.thumb.alignleft {
			clear: none;
			display: inline-block;
			float: left;
			margin-left: auto;
			margin-right: 6px;
			margin-bottom: 6px;
		}
			
		#personeelbar .block.onefourth { margin: 0px auto 30px auto;  width: 98%; }
		#personeelbar .block img { box-sizing: border-box; max-width: 100%; height: auto!important;}
		
		#medewerker  img.staandthumb { float: none; margin: 0px auto; border: 1px solid #cccccc; max-width: 100%!important; height: auto!important; box-sizing: border-box;}
		
			#bottomcontent .widget {
			width: 98%;
			margin-bottom: 20px;
			}
			
			#bottomcontent .widget img { float: none; margin-right: 0px; max-width: 100%; height: auto!important;}
			#bottomcontent .widget a.nieuwslink { width: 96%; display: block; }
			
			#footerwidgets .widget {
			width: 98%;
			margin-bottom: 20px;
			text-align: center!important;
			}
			
			#colofon { line-height: 18px!important;} 
			#colofon .spacer.first { display: block; clear: both; height: 1px; visibility: hidden;}
			
			form.wpcf7-form .links { display: block; float: none; width: 100%;}
			form.wpcf7-form input,
			form.wpcf7-form textarea { width: 96% }
			form.wpcf7-form .wpcf7-checkbox  input { width: 20px; }
			
			form.wpcf7-form img { float: none; }
			form.wpcf7-form input.wpcf7-captchar { clear: both; float: none; margin-left: 0px; margin-top: 10px;}

			form.wpcf7-form input.wpcf7-submit { float: none; margin: 0 auto; margin-left: 10px; margin-top: 10px; }
			
			
			form.wpcf7-form .links { 
			  display: block; 
			  float: none; 
			  width: 100%;
			  margin: 0 0;
			}
			
			form.wpcf7-form .wpcf7-checkbox { width: 95%;  -webkit-column-count: 1;  -moz-column-count: 1;  column-count: 1;}
			form.wpcf7-form input.wpcf7-submit { margin-left: 0px; margin-top: 10px; width: 100%; }
		
		#sitecontainer.not-found #maincontent {
				padding-top: 80px;
				}

			#sitecontainer.not-found h1 {
				font-size: 88px !important;
				margin-left: 10px;
				margin-top: 520px;
			}
			#sitecontainer.not-found h5 {
				font-size: 28px !important;
				margin-left: 10px;
				margin-top: -16px;
			}
			
}


/* Mobile landscape */
@media screen  and (orientation: landscape) {
  html { min-width: 960px!important; }
}

@media screen and (max-width: 800px) and (orientation: landscape) {
  html { min-width: 720px!important; }
}


/* =Menu MOBILE
-------------------------------------------------------------- */
			.mean-container { text-shadow:none;}
			
			/* hide the link until viewport size is reached */
				a.meanmenu-reveal { display: none;}
				
			/* when under viewport size, .mean-container is added to body */
			.mean-container .mean-bar {
					float: left;
					width: 100%;
					position: fixed;
					padding: 0;
					z-index: 999999;
					top: 0px;
					background: transparent;
				}

			.mean-container a.meanmenu-reveal {
				width: 22px;
				height: 22px;
				padding: 13px 13px 11px 13px;
				position: absolute; margin-top: 8px;
				top: 0;
				right: 0;
				cursor: pointer;
				color: #fff;
				text-decoration: none;
				font-size: 16px;
				text-indent: -9999em;
				line-height: 22px;
				font-size: 1px;
				display: block;
				font-family: Arial, Helvetica, sans-serif;
				font-weight: 700;
				 background: #222; /* Show a solid color for older browsers */
				background: -moz-linear-gradient(#525252, #383838);
				background: -o-linear-gradient(#525252, #383838);
				background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#525252), to(#383838)); /* older webkit syntax */
				background: -webkit-linear-gradient(#525252, #383838);
				-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
				-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
				box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
				-webkit-transition: all 0ms ease-in-out;
				-moz-transition: all 0ms ease-in-out;
				-ms-transition: all 0ms ease-in-out;
				-o-transition: all 0ms ease-in-out;
				transition: all 0ms ease-in-out;
			}
			
			.mean-container a.meanmenu-reveal span {
				display: block;
				background: #fff;
				height: 3px;
				margin-top: 3px;
			}

			.mean-container .mean-nav {
				float: none;
				width: 234px;
				margin: 0 auto!important;
			}

			.mean-container .mean-nav ul {
				padding: 0;
				margin: 0;
				width: 100%;
				list-style-type: none;
				margin-left: 10px;
				margin-top: 20px;
			}

			.mean-container .mean-nav ul li {
				background: #222; /* Show a solid color for older browsers */
				background: -moz-linear-gradient(#525252, #383838);
				background: -o-linear-gradient(#525252, #383838);
				background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#525252), to(#383838)); /* older webkit syntax */
				background: -webkit-linear-gradient(#525252, #383838);
				-webkit-box-shadow: rgba(0, 0, 0, 0.6) 0px 1px 10px;
				-moz-box-shadow: rgba(0, 0, 0, 0.6) 0px 1px 10px;
				box-shadow: rgba(0, 0, 0, 0.6) 0px 1px 10px;
				position: relative;
				float: left;
				width: 90%;
				list-style: none;
				margin-left: 0px;
			}
			
			.mean-container .mean-nav ul li li {
				background: #383838; /* Show a solid color for older browsers */
			width: 99%;
			}


			.mean-container .mean-nav ul li a {
				display: block;
				float: left;
				width: 100%;
				padding: 1em 10px;
				box-sizing: border-box;
				margin: 0;
				text-align: left;
				border-top: none;
				text-decoration: none;
				color: #ffffff;
			}

				.mean-container .mean-nav ul ul { width: 90%!important;}
				.mean-container .mean-nav ul ul li a { width: 100%!important;}
				.mean-container .mean-nav ul li li a {
					font-size: 0.9em;
					padding: 6px 5%;
					border-top: none;
					text-shadow: none !important;
					visibility: visible;
				}

				.mean-container .mean-nav ul li.mean-last a {
					border-bottom: none;
					margin-bottom: 0;
				}

				.mean-container .mean-nav ul li li li a {
					width: 70%;
					padding: 1em 15%;
				}

				.mean-container .mean-nav ul li li li li a {
					width: 60%;
					padding: 1em 20%;
				}

				.mean-container .mean-nav ul li li li li li a {
					width: 50%;
					padding: 1em 25%;
				}

				.mean-container .mean-nav ul li a:hover {
					background: #252525;
					background: rgba(255,255,255,0.1);
				}

			.mean-container .mean-nav ul li a.mean-expand,
			.mean-container .mean-nav ul li ul li a.mean-expand {
				margin-top: 1px;
				width: 42px!important;
				height: 40px;
				text-align: center;
				position: absolute;
				right: 0;
				top: 0;
				z-index: 2;
				font-weight: 700;
				border: none !important;
				padding: 0!important;
				line-height: 40px!important;
				background: tranparent!important;
			}
			
			.mean-container .mean-nav ul li ul li a.mean-expand  { height: 30px; line-height: 30px!important;}

			.mean-container .mean-nav ul li a.mean-expand:hover,
			.mean-container .mean-nav ul li ul li a.mean-expand:hover  {
				background: #383838;
			}
			.mean-container .mean-push {
				float: left;
				width: 100%;
				padding: 0;
				margin: 0;
				clear: both;
			}

			.mean-nav .wrapper {
				width: 100%;
				padding: 0;
				margin: 0;
			}

			/* Fix for box sizing on Foundation Framework etc. */
			.mean-container .mean-bar, .mean-container .mean-bar * {
				-webkit-box-sizing: content-box;
				-moz-box-sizing: content-box;
				box-sizing: content-box;
			}



/****************************************************
	Design: Autosoft BV - www.autosoft.eu
	Code & CSS: Autosoft BV - www.autosoft.eu
	Copyright 2025 Autosoft BV
	
****************************************************/