/* ********************************************************************** general stuf */
html           { height:    100%; }
html, body     { min-height:100%; margin:0px; padding:0px; width:100%;}
img.pngfix     { behavior: url(js/iepngfix.htc) }
div, header, nav, article, footer, main, aside { position: relative; } /* default for HTML5 tags */
img {border: 0px; vertical-align: middle; }

img[align='right'] { margin: 0 0    10px 10px;  } /* ipv LeftRightMarginFix */
img[align='left']  { margin: 0 10px 10px 0; }  /* ipv LeftRightMarginFix */

html { box-sizing: border-box; } /* force border-box model. Now width:300px is REALY 300px in all browsers. */
*, *:before, *:after {  box-sizing: inherit; }

.content img,                                     /* verklein afbeeldingen */
.content table { max-width: 100%; height: auto; } /* en tabellen als ze groter zijn dan de breedte van de content */
.content #container_map img { max-width: none; }  /* BEHALVE BIJ GOOGLE MAPS!!!!! */

@font-face {
	font-family: 'roboto_slabbold';
	src: url('fonts/robotoslab-bold-webfont.eot');
	src: url('fonts/robotoslab-bold-webfont.eot?#iefix') format('embedded-opentype'),
			 url('fonts/robotoslab-bold-webfont.woff2') format('woff2'),
			 url('fonts/robotoslab-bold-webfont.woff') format('woff'),
			 url('fonts/robotoslab-bold-webfont.ttf') format('truetype'),
			 url('fonts/robotoslab-bold-webfont.svg#roboto_slabbold') format('svg');   font-weight: normal;
  font-weight: normal;
  font-style: normal;
}

body.betonputten {
	background-image: url('img/bg.png');
	background-size: contain;
}
/************************************************************************** top-afbeelding */
#header {
	width: 100%;
	font-family: 'roboto_slabbold', "Times New Roman", Georgia, Serif;
}
#caption {
	width: 40%;
	left: 30%;
	/*line-height: 110px;*/
	height: 1px;
	color: #5D9631;
	font-weight: bold;
	font-size: 22px;
	text-align: right;
  bottom: 80%;
  position: absolute;  
}

#logo {
	width: 30%;
	left: 2%;
	height: auto;
	overflow: hidden;
	position: relative;
	/* background-color: white; */
	z-index: 100;
	/* text-align: right;
	padding-right: 10px; */
}
#logo img {
	max-height: 100%;
	max-width: 100%;
	margin: 0% 0;
}

#top_uitvul { width: 100%; }

#contact {
/*	background-image: url('img/betonput-contact.png');
	background-size: contain;
	background-position: right top; */
	width: 295px;
	position: absolute;
	top:29px;
	right:15px;
	padding: 5px 0 0 60px;
	color: #00205A;
	font-weight: bold;
	font-size: 18px;
}
#contact a {
	color: #00205A;
	text-decoration: none;
}
#contact a:hover {
	text-decoration: underline;
}
	

/* ********************************************************************************** nav */
.container_nav {
	left: 0;
	background-color: #5D9631;
/*  width: 92%; */
  width: 100%;
  height:  40px;
	float: left;
}
#content_nav {
	padding-left: 8%;
}
.container_navbg {
	height: 40px;
	margin-bottom: -40px !important;

  width: 100%;
	max-width: 1180px;
	margin: 0 auto;
}
/********************************************************************* container + content */
.container {
  width: 100%;
  max-width:1180px;
	margin: 0 auto;
	background-color: white;
}
.betonputten .container {
	-webkit-box-shadow: 0 0 15px rgba(0,0,0,0.25);
	-moz-box-shadow:    0 0 15px rgba(0,0,0,0.25);
	-ms-box-shadow:     0 0 15px rgba(0,0,0,0.25);
	-o-box-shadow:      0 0 15px rgba(0,0,0,0.25);
	box-shadow:         0 0 15px rgba(0,0,0,0.25);	
}

#container {
	margin-top: 40px;
}

#container_content   {
	clear: both;
  width: 100%;
	padding: 0;
}

main {
	width: 735px;
	width: 100%;
	float: left;
	padding: 30px 30px 0 0;
	line-height: 1.5em
}
.navgroup_home {
	overflow-x: hidden;
}

.navgroup_home h1 {
	text-transform: uppercase;
	border-bottom: 3px solid #b3dc94;
	display: inline-block;
}
.navgroup_home h1,
.navgroup_home h2,
.navgroup_home .kop,
.navgroup_home .subkop,
.navgroup_home a {
	color: #5D9631;
}
.navgroup_home h1 {
	text-shadow: 1px  0px 0 #5D9631;  
}

.content,
.content2 {
	background-image: url('img/bg-content.png');
	background-size: auto;
	background-repeat: no-repeat;
	border-top-right-radius: 10px;
	
  padding: 10px 10px 30px 40px;
}
.betonputten .content,
.betonputten .content2 {
	box-shadow: inset 7px 0 9px -7px rgba(0,0,0,0.4);
}
.afmitech .content,
.afmitech .content2 {
	background-image: url('img/bg-content-afmitech.png');
}
.top-gradient {
  display: none;
}
.betonputten .top-gradient {
  display: block;
  position: absolute;
  width: 10px;
  height: 60px;
  top: -60px;
  box-shadow: inset 7px 0 9px -7px rgb(0 0 0 / 40%);
  left: 0;
}
  
.content {
	width: 80%;
	float: left;
}
.content img {
	border-radius: 4px;
}
.content2 { /* 2e kolom */
	width: 20%;
	float: left;
	overflow-x: hidden;
}

.navgroup_home .content,
.navgroup_home .content2 {
	width: 100%;
	float: none;
	text-align: center;
	min-height: 100px !important;
}
.navgroup_home .content2 {
	background-image: none;
}

.content2 h1             { font-size: 22px; margin-top: 8px; }
.content2 ul.list .image { height: 100px; }
.content2 ul.list li     { width: 100%; margin-top: 10px; }
.content2 ul.list h1     { font-size: 16px; margin-top: 0; line-height: 1.4em; }

#list_home {
	background-color: #EBEBEB;
	padding: 0 35px 0 35px;
	width: 103%;
}

#buttons {
	position: absolute;
	right:1%;
	top:5px;
	width:70px;
	text-align: right; 
}

.list {
	margin: 0;
	padding: 0;
}
.list a,
.list a:link,
.list a:visited,
.list a:active,
.list a:hover             {color: black; text-decoration: none; }
.list li {
	list-style: none;
	list-style-type: none;
	list-style-image: none;
	list-style-position: inside;	
	float: left;
	margin: 30px 1% 0 0;
	width: 49%;
	border-radius: 5px;

	-moz-transition:    all 0.3s ease-in;
	-webkit-transition: all 0.3s ease-in;
	-o-transition:      all 0.3s ease-in;
	transition:         all 0.3s ease-in;
}
.list li:hover {
 background-color: #ECECEC;
}
.list li:nth-child(2n+2) {	margin-right: 1%; }
.list li:nth-child(2n+3) {	clear: both; }

.listsmall li,
.listsmall2 li {
	text-align: center;
}
.list .image {
	/*background-image: url('img/betonput.jpg');*/
	background-size: cover;
	background-position: 50% 50%;
	border-radius: 5px;

	width: 40%;
	height: 130px;
	float: left;
	margin-right: 5px;
}
.listlarge .image,
.listsmall .image,
.listsmall2 .image {
	width: 100%;
	height: 170px;
	float: none;
	margin-right: 0;
}
.list .info {
	float: left;
	width: 55%;
}
.listsmall .info,
.listsmall2 .info {
	float: none;
	width: auto;
}

.list h1 {
	text-transform: uppercase;
	margin: 10px 0 3px 0;
	padding: 0;
	font-size: 18px;
	border-bottom: none;
	text-shadow : none;
/*	color: #00205A; */
}

.list li:hover h1 {
	text-decoration: underline;
}

.listsmall h1 {
	font-size: 24px;
}
.listsmall li,
.listsmall2 li {
	width: 24.25%;
	margin: 20px 4% 20px 0;
}
.listsmall li {
	width: 22%;
}
.listsmall2 li {
	width: 30%;
	margin: 20px 4% 20px 0;
}

.navgroup_home .listsmall li {
	margin: 30px 4% 0 0;
}


.listsmall li:nth-child(2n+2) {	margin-right: 4%; }
.listsmall li:nth-child(2n+3) {	clear: none; }
.listsmall li:nth-child(4n+4) {	margin-right: 0; }
.listsmall li:nth-child(4n+5) {	clear: both; }

.listsmall2 li:nth-child(2n+2) {	margin-right: 4%; }
.listsmall2 li:nth-child(2n+3) {	clear: none; }
.listsmall2 li:nth-child(3n+3) {	margin-right: 0; }
.listsmall2 li:nth-child(3n+4) {	clear: both; }

.betonputten .titel {
	background-color:#5D9631;
	padding: 4px 0 4px 5%;
	width: 100%;
	height: 32px;
	margin: -32px 0 32px 0;
}

.betonputten .titel h1 {
	position: absolute;
	white-space: nowrap;
  font-size: 18px;
}
.betonputten .titel img {
	position: absolute;
	right:-35%;
	bottom:0;
	height:200% !important;
	z-index: 0;
}
.betonputten .info {
	width: 100%;
	top: 0px;
/*	background-color: #00205A; */
	background: rgba(0,32,90,0.5);
	bottom: 10px;
	font-weight: bold;
	text-align: center;
	height: 0;
	overflow: hidden;
}

.navgroup_producten table {
	border-spacing: 0;
}
.navgroup_producten table th {
  background-color: #4c8423;
  color: #fff;
  padding: 3px 5px;
	border-right: 1px solid white;	
	border-bottom: 1px solid white;	
}
.navgroup_producten table th:last-child {
	border-right: 1px solid #4c8423;	
}	
.navgroup_producten table td:first-child {
	border-left: 1px solid #c8e3b4;
}
.navgroup_producten table td {
	border-right: 1px solid #c8e3b4;
	border-bottom: 1px solid #c8e3b4;
	padding: 3px 5px 3px 8px;
}
.navgroup_producten table tr:first-child td {
	border-top: 1px solid #c8e3b4;
}

.lazyShow {
  background-repeat: no-repeat;
  background-position: 50% 50%;;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeInRight {
  0%   { opacity: 0; -webkit-transform: translateX(9px); background-position: 00% 50%; }
  100% { opacity: 1; -webkit-transform: translateX(0px); background-position: 50% 50%; }
}
@keyframes fadeInRight {
  0%   { opacity: 0; transform: translateX(9px); background-position: 00% 50%; }
  100% { opacity: 1; transform: translateX(0px); background-position: 50% 50%; }
}
.lazy {
  -webkit-transform: translateX(9px);
  transform: translateX(9px);
}
.lazyShow {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}


/* ************************************************************************* foto album */
div#foto_album {
	width: 100%;
	margin-top: 10px;
}

.foto_klein,
.foto_groot {
	width: 100%;
	max-width: 880px;
	height: 550px;
	border: 1px solid black;
	float: left;
	overflow: hidden;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.foto_klein {
	width: 24%;
	max-width: 214px;
	height: 133px;
	margin: 8px 0 0 1%;
}
.klein_pos1 {
	margin-left: 0 !important;
}


@media only screen and (max-width: 910px) { .foto_klein { margin-left: 0.9%; height: 120px;} .foto_groot { height: 450px; } }
@media only screen and (max-width: 705px) { .foto_klein { margin-left: 0.8%; height: 110px;} .foto_groot { height: 400px; } }
@media only screen and (max-width: 550px) { .foto_klein { margin-left: 0.7%; height: 100px;} .foto_groot { height: 350px; } }
@media only screen and (max-width: 465px) { .foto_klein { margin-left: 0.6%; height:  90px;} .foto_groot { height: 300px; } }
@media only screen and (max-width: 400px) { .foto_klein { margin-left: 0.5%; height:  70px;} .foto_groot { height: 250px; } }
@media only screen and (max-width: 360px) { .foto_klein { margin-left: 0.4%; height:  60px;} .foto_groot { height: 225px; } }
@media only screen and (max-width: 300px) { .foto_klein { margin-left:   0%; height:  50px;} .foto_groot { height: 200px; } }

/* ************************************************* klikbare elementen (zie footer.js) */
.addChildClick,
.addChildClickNew,
.addLastChildClick,
.addLastChildClickNew { cursor: pointer; }

/* ****************************************************************************** footer */
footer {
	position: relative;
	color: white;
	clear: both;
	width: 100%;
	font-size: 14px;
	background-color: #5D9631;
	overflow: hidden;
	font-weight: bold;
	text-align: center;
}
footer .container {
	background-color: transparent;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	-ms-box-shadow: none;
	-o-box-shadow: none;
	box-shadow: none;
	padding-left: 10px;
}
.footer {
	height: 50px;
	padding-top: 16px;
}

.footer2 {
	background-color: #d8d8d8;
	padding: 15px;
	overflow: auto;
}
.footer2 img {
	float: left;
	min-width: 150px;
	width: 25%;
}
.footer2 .waarom {
	width: 8%;
	float: left;
	line-height: 1.3em;
	font-size: 1.5em;
	padding-top: 7px;
}
.footer2 .daarom {
	width: 90%;
	float: right;
}
.blauw {
  width:100% !important;
}
.blauw,
.blauw td,
.blauw a, .blauw a:link, .blauw a:visited, .blauw a:active, .blauw a:hover {
  color: #00205A !important;
  text-decoration: none;
}

.footer2 ul {
  list-style: none;
  padding: 0;
}
.footer2 li {
  padding: 0;
	margin: 0;
	float: left;
	width: 33%;
	min-width: 150px;
	white-space: nowrap;
	text-align: left;
	padding-left: 1.4em;
}
.xxfooter2 li:nth-child(3n+3) {	margin-right: 0; }
.xxfooter2 li:nth-child(3n+4) {	clear: both; }

.footer2 li:before {
  content: "\f00c"; /* FontAwesome Unicode */
  font-family: var(--fa-style-family,"Font Awesome 6 Free");;
  display: inline-block;
  margin-left: -1.4em; /* same as padding-left set on li */
  width: 1.4em; /* same as padding-left set on li */
	color: #5D9631;
	font-size: 2em;
}

footer a, footer a:link, footer a:visited, footer a:active, footer a:hover {
	color: white;
	text-decoration: none;
	font-weight: bold;
}
footer a:hover { text-decoration: underline; }

.footer2 a, .footer2 a:link, .footer2 a:visited, .footer2 a:active, .footer2 a:hover {
	color: #616161;
}

#footer_copy {
	position: absolute;
	right: 5px;
	bottom: 5px;
}
#footer_copy,
#footer_copy a {
	font-weight: normal !important;
	color: #616161 !important;
}
/* ****************************************************************************** list */
.date {
	margin: 0px;
	float: right;
	white-space: nowrap;
}
div.multipage {
	width:100%;
	float: left;
	text-align:center;
	font-weight: bold;
	margin-bottom:5px;
}

a.multipage.on:link,
a.multipage.on:active,
a.multipage.on:visited,
a.multipage.on:hover,
a.multipage:link,
a.multipage:active,
a.multipage:visited,
a.multipage:hover,
a.multipagearrow:link,
a.multipagearrow:active,
a.multipagearrow:visited,
a.multipagearrow:hover {
	display: inline-block;
	text-align: center;
	font-size: larger;
	line-height: 150%;
	background-color: #FFFFFF;
 	text-decoration: none;
	border:1px solid #5D9631;
	padding: 0 5px 0 5px;
	color: #5D9631;	
}
a.multipagearrow.hide {
	color: #FFFFFF;
}
div.multipage a:not(:last-child) { /*  */
	border-right: none !important;
}
a.multipagearrow:link,
a.multipagearrow:active,
a.multipagearrow:visited,
a.multipagearrow:hover {
	padding: 0 10px 0 10px;
}
a.multipagearrow.prev {
	-moz-border-radius-topright: 20px;	
	-moz-border-radius-bottomright: 20px;	
	border-bottom-left-radius: 20px;
	border-top-left-radius:    20px;
}
a.multipagearrow.next {
	-moz-border-radius-topleft: 20px;	
	-moz-border-radius-bottomleft: 20px;	
	border-bottom-right-radius: 20px;
	border-top-right-radius:    20px;
}
a.multipage.on:link,
a.multipage.on:active,
a.multipage.on:visited,
a.multipage.on:hover {
  background-color: #EEEEEE;
	color: #BEBEBE;
}
/* ***************************************************************************** forms */
#contactform,
#reactieform {
	width:90%;
}
#contactform p,
#reactieform p {
	clear: left;
}
#contactform label,
#reactieform label {
  text-align: left;
  margin: 5px 1px 5px 0px;
	color: black;	
}

#contactform select,
#contactform input,
#contactform textarea,
#reactieform select,
#reactieform input,
#reactieform textarea,
input,
textarea {
  border: 1px solid #aaa;
  margin: 5px auto;
  width: 97%;
	padding: 4px
}

input[type='submit'] {
	background-color: #014B17;
	color: white;
	cursor: pointer;
	width:40%;
	float:right;
	margin-right: 10px;
	padding: 3px 0;
	font-weight: bold;
}
#contactform select {
		width : 97%;
    font-size: 11px;
		border: 1px solid #777777;
		margin: 1px;
		padding-right:2px;
		padding-left: 2px;
}
#contactform button,
#contactform select,
#contactform .autowidth {
		width : auto;
}

#contactform select {
		padding-right:0px;
}
#contactform textarea {
		margin-left: 0px;
		height:100px;
		
}
#contactform .checkbox {
		height: auto;
		width : auto;
		background: none;
		border: none;
		margin: 2px 2px 0px 2px;
}

#contactform p { clear: both; }

p[required] {
	display: inline-block;
	float: none;
	padding-right: 15px;
	background-image: url(img/required.gif);
	background-repeat: no-repeat;
	background-position: right center;
}

/* let op linkjes, inputs etc. in deze laag: position:relative; ! */
a {position: relative; }

/* ***************************************************************** guestbook/respond */
.respond_header,
.respond_body,
.respond_footer {
  width:100%;
  padding:2px;
  background-color:#EFF1D8;
/*  border:1px solid blue;/* */
}
.respond_header {
  margin-top:10px;
}
.respond_body {
  background-color:#DFF1C8;
/*  border:1px solid red;/* */
}
.respond_footer {
/*  border:1px solid yellow;/* */
}