@charset "utf-8";
/* Website Algemeen */

html,body {
	margin:0;
	padding:0;
	overflow: hidden;
	overflow-y: hidden;
	height: 100%;
	font-family: 'Roboto', sans-serif;
}

table, th, td {
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: 14px;
}

.showimg{
	display: none;
}

#moblinks{
	display: none;
	z-index: 15;
	position: absolute;
}

.mobilelink{
	display: block;
	z-index: 15;
	width: 100vw;
	height: 10vw;
	line-height: 10vw;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-size: large;
	color: rgba(0,120,255,1.00);
	background-color: rgba(135,229,0,1.00);
	border: 2px solid rgba(135,200,0,1.00);
	text-align: center;
	text-decoration: none;
}

#leftblock{
	width:37vw; 
	display:inline-block; 
	padding-right: 3vw;
}

#rightblock{
	width:30vw; 
	float:right; 
	display:inline; 
	padding-top:20px; 
	padding-bottom:10px;
}

#pagetekst{
	position:absolute;
	top: 80px;
	overflow: hidden;
	overflow-y: auto;
	width: 100vw;
	height: calc(100vh - 80px);
}

/* Hoofding DIV */
#top{
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 2;
	height: 80px;
	width: 100vw;
	padding-left: 10vw;
	padding-right: 10vw;
	background-color:rgba(255,255,255,1.00);
	box-shadow: 2px 2px 10px rgba(150,150,150,1.00);
	
	/* background-color: rgba(150,255,0,1.00); */
	/* border-bottom: 1px solid rgba(0,120,255,1.00); */
	overflow: hidden;
}

#logo{
	height: 70px;
	margin-top: 5px;
	width: 200px;
	background-image: url(../img/logo_gray.png);
	background-size: 200px 70px;
	background-repeat:no-repeat;
	display:inline-block;
	align-content: center;
	margin-left: 70px;
}

#mobilelinken{
	height: 12vw;
	margin-left: 10vw;
	margin-top: 5px;
	width: 15vw;
	background-image: url(../img/threelines.png);
	background-size: cover;
	background-repeat:no-repeat;
	display:none;
	align-content: center;
}

#linken{
	margin-top: 5px;
	height: 70px;
	text-align: right;
	float:right;
	margin-right: 20vw;
}

#linken a{
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-size: 25px;
	text-decoration:none;
	line-height: 80px;
	/*color: rgba(0,120,255,1.00);*/
	color: rgba(99,117,255,1.00);
	padding-left: 25px;
	text-align: center;
	padding-right: 25px;
	display:inline-block;
}

#linken a:hover{
	background-color:rgba(255,255,255,0.50);
}

/* Ondermenu DIV */
#Bottom{
	position: relative;
	left: 0px;
	z-index: 1;
	height: 80px;
	width: 100vw;
	background-color: rgba(135,229,0,1.00);
	border-top: 3px solidb rgba(7,0,108,1.00);
	text-align:center;
	box-shadow: 5px 5px 15px rgba(190,190,190,1.00)
}

#Bottomlinken{
	position: absolute;
	left: 0px;
	z-index: 1;
	width: 80vw;
	top: calc(70vh - 80px);
	text-align:center;
	padding-left: 10vw;
	padding-right: 10vw;
}

#Bottomlinken a{
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-size: 18px;
	font-style:italic;
	text-decoration:none;
	color: rgba(0,120,255,1.00);
	padding-left: 15px;	
	padding-right: 15px;
	width: 20vw;
	text-align:left;
	min-width: 200px;
	display:inline-block;
	z-index: 12;
	line-height: 30px;	
}

knop{
	color: rgba(0,120,255,1.00);
	line-height: 50px;
	font-size: 28px;
	font-style: normal;
}

#Bottomlinken a:hover{
	background-color:rgba(255,255,255,0.30);
	-webkit-filter: opacity(0.8); 
}

#btnspanten{
	width: 20vw;
	min-width: 200px;
	height: 100px;
	background-image:url(../img/btn_spanten.jpg);
	background-size:cover;
	padding-left: 15px;
	padding-right: 15px;
	z-index:8;
	margin-left: -15px;
	box-shadow: 5px 5px 15px rgba(190,190,190,1.00);
	-webkit-filter: grayscale(1)opacity(0.8); 
	border-right: 1px solid rgba(7,0,108,0.50);
}

#btnhsb{
	width: 20vw;
	min-width: 200px;
	height: 100px;
	background-image:url(../img/btn_hsb.jpg);
	background-size:cover;
	padding-left: 15px;
	padding-right: 15px;
	z-index:7;
	margin-left: -15px;
	box-shadow: 5px 5px 15px rgba(190,190,190,1.00);
	-webkit-filter: grayscale(1)opacity(0.8);  
	border-right: 1px solid rgba(7,0,108,0.50);
}

#btnwoodco{
	width: 20vw;
	min-width: 200px;
	height: 100px;
	background-image:url(../img/btn_woodco.jpg);
	background-size:cover;
	padding-left: 15px;
	padding-right: 15px;
	z-index:9;
	margin-left: -15px;
	box-shadow: 5px 5px 15px rgba(190,190,190,1.00);
	-webkit-filter: grayscale(1)opacity(0.8); 
}

/* Ondermenu op type 2 Pagina pagina zonder hoofd foto*/
#Bottom2{
	position: fixed;
	left: 0px;
	z-index: 1;
	height: 50px;
	width: 100vw;
	top: 80px;
	background-color: rgba(135,229,0,1.00);
	border-top: 3px solidb rgba(7,0,108,1.00);
	text-align:center;
	box-shadow: 5px 5px 15px rgba(190,190,190,1.00)
}

#Bottomlinken2{
	position: fixed;
	left: 0px;
	z-index: 1;
	width: 80vw;
	top: 80px;
	text-align:center;
	padding-left: 10vw;
	padding-right: 10vw;
}

#Bottomlinken2 a{
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-size: 18px;
	font-style:italic;
	text-decoration:none;
	color: rgba(0,120,255,1.00);
	padding-left: 15px;	
	padding-right: 15px;
	width: 20vw;
	text-align:left;
	min-width: 200px;
	display:inline-block;
	z-index: 12;
	line-height: 30px;	
}

#Bottomlinken2 a:hover{
	background-color:rgba(255,255,255,0.30);
	-webkit-filter: opacity(0.8); 
}


/* Midden afbeelding */

.Midden{
	position: relative;
	left: 0px;
	height: calc(70vh - 80px);
	width: 100vw;
	background-size: 100vw auto;
	padding-left: 10vw;
	padding-right: 10vw;
}

#ArrL{
	position:absolute;
	top:30vh;
	left:1vw;
}

#ArrR{
	position:absolute;
	top:30vh;
	left:96vw;
}

/* Voetnoot */
#footer{
	position:relative;
	height: 60px;
	width: 100vw;
	bottom: 0px;
	left: -10px;
	margin: 50px 10px 0px 0px;
	padding-top: 20px;
	padding-left: 12vw;
	background-color: rgba(80,80,80,1.00);
	color:rgba(200,200,200,1.00);
}

#footadres{
	position:relative;
	height: 300px;
	width: 100vw;
	left: -10px;
	bottom: -50px;
	margin: 50px 10px 0px -15vw;
	padding-top: 20px;
	padding-left: 12vw;
	background-color: rgba(0,120,255,1.00);
	color:rgba(200,200,200,1.00);
}

#footadres2{
	position:relative;
	height: 200px;
	width: 100vw;
	left: -10px;
	bottom: -50px;
	margin: 0px 0px 0px -15vw;
	padding-top: 20px;
	padding-left: 15vw;
	background-color: rgba(0,120,255,1.00);
	color:rgba(200,200,200,1.00) !important;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	display: none;
}

#policy{
	position: relative;
	margin: 10px 0px 0px -12vw;
	padding: 6px 0px 5px 15vw;
	color:rgba(135,135,135,1.00);
	border-top: 1px solid rgba(100,100,100,1.00);
}

#policy a{
	text-decoration: none;
	color:rgba(135,135,135,1.00);
}

#policy a:hover{
	text-decoration: underline;
}

/* teksten */
#tekstveld_home{
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: 14px;
	position: relative;
	left: 15vw;
	width: 70vw;
	display: inline-block;
	padding-top: 110px;
}

form{
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: 14px;
}

#tekstveld_t1{
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: 14px;
	position: relative;
	left: 15vw;
	width: 70vw;
	display: inline-block;
	padding-top: 190px;
}

a{
	text-decoration:underline;
	color: rgba(0,120,255,1.00);
}

a:hover{
	text-decoration: none;
}

.quote{
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: 28px;
	font-style:italic;
	color:rgba(79,79,79,1.00);
	padding-left: 5vw;
	width: 60vw;
	margin: 30px 0px 30px 0px
}

.mobilepics{
	width: 70vw;
	margin: 30px 0px 30px 0px;
	display: none;
}

blockquote {
  background: rgba(230,230,230,1);
  border-left: 5px solid rgba(0,120,255,0.50);
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
  box-shadow: 5px 5px 15px rgba(190,190,190,1.00);
}

blockquote:before {
  color: rgba(79,79,79,1.00);
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}

blockquote p {
  display: inline;
  color: rgba(0,120,255,1.00);
}

blockquote img {
	display:block;
	margin-left: auto;
	margin-right: auto;
	border-style: solid;
    border-width: 1px;
	border-color: rgba(150,150,150,1.00);
}

h1{
	font-size:24px;
	font-weight:400;
	margin-left: -10px;
	color:rgba(79,79,79,1.00);
}

h3{
	font-size:16px;
	font-weight:400;
	margin-left: 5px;
	margin-top: -22px;
	color:rgba(0,120,255,1.00);
}

h2{
	font-size:16px;
	font-weight:400;
	margin: 25px 5vw 10px 5px;
	border-bottom: 1px solid rgba(0,120,255,1.00);
}

h4{
	font-size:16px;
	font-weight:400;
	margin-left: 5px;
}

ti1{
	font-size:16px;
	font-weight:400;
	margin-left: -3px;
	color:rgba(0,120,255,1.00);
}


.nieuwstitel{
	font-size:24px;
	font-weight:400;
	color:rgba(79,79,79,1.00);
}

#referenties{
	display: inline-block;
	margin: 50px -15vw 50px -15vw;
	padding: 0px 15vw 30px 15vw;
	width: 84vw;
	background-color:rgba(240,240,240,1.00);
	box-shadow: 5px 5px 15px rgba(190,190,190,1.00);
	
}

.refbox{
	border: 1px solid rgba(150,150,150,1);
	margin: 10px;
	display: block;
	background-repeat:no-repeat;
	float: left;
	background-color: #FFFFFF;
	
}

.refbox2{
	margin: 0px;
	display: block;
	background-repeat:no-repeat;
	float: left;
	background-color: #FFFFFF;
	
}

.smallbox{
	background-size: 16vw 9vw;
	width: calc(16vw - 8px); 
	padding-top: calc(9vw + 10px);
	height: 4vw;
	padding-left: 8px;
}

.widebox{
	background-size: 19vw 13vw;
	width: calc(24vw - 8px); 
	padding-left: calc(20vw + 8px);
	height: 6vw;
	padding-top: 8px;
}

.mediumbox{
	background-size: 18vw auto;
	background-position: center;
	width: calc(18vw); 
	height: 5vw;
	color:#FFFFFF;
	font-weight:bold;
}

#refsidedif{
	position: fixed; 
	right:19vw; 
	top: 250px;
	z-index:0;
	width: calc(18vw);
	border: 1px solid rgba(150,150,150,1);
	background: rgba(230,230,230,1);
	margin-bottom: 200px auto;
}

.minibox{
	background-size: 5vw 3vw;
	width: calc(5vw - 3px); 
	padding-left: 3px;
	height: calc(3vw - 3px);
	padding-top: 3px;
}

.maxibox{
	background-size: 40vw 25vw;
	width: calc(40vw - 3px); 
	padding-left: 3px;
	height: calc(25vw - 3px);
	padding-top: 3px;
}

.bigbox{
	background-size: 32vw 18vw;
	width: calc(30vw - 10px); 
	padding-top: calc(19vw + 10px);
	height: calc(7vw + 33px);
	padding-left: 10px;
}

.refbox:hover{
	-webkit-filter: opacity(0.5);
}

.refbox2:hover{
	-webkit-filter: opacity(0.5);
}


/* computer  kleiner als 1240px*/
@media screen 
  and (max-width: 1240px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
  
knop{
	font-size:24px;
	line-height: 35px;
}
#Bottomlinken{
	top: calc(50vh - 80px);
}
#Bottomlinken a{
	font-size:14px;
	line-height: 25px;
}
#Bottomlinken2 a{
	font-size:14px;
	line-height: 25px;
}
#Bottom {
	height: 60px;
}
#Bottom2 {
	height: 35px;
}
#logo {
	margin-left:10px;
}
.Midden {
	height: calc(50vh - 80px);
}
#linken a{
	font-size:18px;
}
}


/* ipad */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {

knop{
	font-size:24px;
	line-height: 35px;
}
#Bottomlinken{
	top: calc(55vh - 80px);
}
#Bottomlinken a{
	font-size:14px;
	line-height: 25px;
}
#Bottomlinken2 a{
	font-size:14px;
	line-height: 25px;
}
#Bottom {
	height: 60px;
}
#Bottom2 {
	height: 35px;
}
#logo {
	margin-left:10px;
}
.Midden {
	height: calc(55vh - 80px);
}
#linken a{
	font-size:18px;
}
}

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {

knop{
	font-size:24px;
	line-height: 35px;
}
#Bottomlinken{
	top: calc(40vh - 80px);
}
#Bottomlinken a{
	font-size:14px;
	line-height: 25px;
}
#Bottomlinken2 a{
	font-size:14px;
	line-height: 25px;
}
#Bottom {
	height: 60px;
}
#Bottom2 {
	height: 35px;
}
#logo {
	margin-left:10px;
}
.Midden {
	height: calc(40vh - 80px);
}
#linken a{
	font-size:18px;
}
}

/* GSM */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 768px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) { 
knop{
	font-size:24px;
	line-height: 35px;
}
#Bottomlinken{
	top: calc(30vh - 80px);
}
#Bottomlinken a{
	font-size:14px;
	line-height: 25px;
}
#Bottomlinken2 a{
	font-size:14px;
	line-height: 25px;
}
#Bottom {
	height: 60px;
}
#Bottom2 {
	height: 35px;
}
#logo {
	margin-left:10px;
}
.Midden {
	height: calc(30vh - 80px);
}
#quotediv {
	display: none !important;
}
#refsidedif{
	display: none !important;
}
#tekstveld_home{
	left: 10vw;
	width: 80vw;
}
#tekstveld_t1{
	left: 10vw;
	width: 80vw;
}	
#tekstveld_t1_left {
	display: block !important;
	width: 100% !important;
}
#linken a{
	font-size:18px;
}
.quote{
	padding-left: 10vw;
	width: 80vw;
	font-size:22px;
}
}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 768px) 
  and (-webkit-min-device-pixel-ratio: 1)
  and (orientation: landscape) { 

knop{
	font-size:24px;
	line-height: 35px;
}
#Bottomlinken{
	top: calc(70vh - 80px);
}
#Bottomlinken a{
	font-size:14px;
	line-height: 25px;
}
#Bottomlinken2 a{
	font-size:14px;
	line-height: 25px;
}
#Bottom {
	height: 60px;
}
#Bottom2 {
	height: 35px;
}
#logo {
	margin-left:10px;
}
#quotediv {
	display: none !important;
}
#refsidedif{
	display: none !important;
}
#tekstveld_home{
	left: 10vw;
	width: 80vw;
}
#tekstveld_t1{
	left: 10vw;
	width: 80vw;
}	
#tekstveld_t1_left {
	display: block !important;
	width: 100% !important;
}
.Midden {
	height: calc(70vh - 80px);
}
#linken a{
	font-size:18px;
}
.quote{
	padding-left: 10vw;
	width: 80vw;
	font-size: 22px;
}

}

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 300px) 
  and (max-device-width: 415px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) { 
knop{
	font-size:24px;
	line-height: 35px;
}
#Bottomlinken{
	top: calc(30vh - 80px);
}
#Bottomlinken2{
	top: 145px;
}
#Bottomlinken a{
	line-height: 25px;
}
#Bottomlinken2 a{
	line-height: 25px;
	top: 150px;
}
#Bottom {
	height: 60px;
}
#Bottom2 {
	height: 35px;
	top: 80px;
}
#pagetekst{
	top: 140px;
}
#top{
	height: 140px;
}
#logo {
	margin-left:10px;
	height: 140px;
	width: 400px;
	background-size: 400px 140px;
}
.Midden {
	height: calc(30vh - 80px);
}
#quotediv {
	display: none !important;
}
#tekstveld_home{
	left: 10vw;
	width: 80vw;
}
#tekstveld_t1{
	left: 10vw;
	width: 80vw;
}	
#tekstveld_t1_left {
	display: block !important;
	width: 100% !important;
}
.quote{
	padding-left: 10vw;
	width: 80vw;
}
#linken{
	display: none !important;
}
#refsidedif{
	display: none !important;
}
#footadres{
	display: none;
}
#footadres2{
	display: block;
}
#leftblock{
	width: 100%; 
}
#rightblock{
	width: 100%; 
}
#mobilelinken{
	display: inline-block;
}
#btnhsb{
	display: none;
}
#btnspanten{
	display: none;
}
#btnwoodco{
	display: none;
}
.hideimg{
	display: none !important;
}
.showimg{
	display: block;
}
.mediumbox{
	margin-left: -30vw;
	background-size: 80vw auto;
	width: 80vw; 
	height: 25vw;
	margin-bottom: -30px;
}
.maxibox{
	background-size: 90vw 56vw;
	width: calc(90vw - 3px); 
	height: calc(56vw - 3px);
	margin-left: -5vw;
}

.minibox{
	background-size: 20vw 12vw;
	width: calc(20vw - 3px); 
	height: calc(12vw - 3px);
}

.mobilepics{
	display: block;
	padding-left: 5vw;
}
#footer{
	font-size: x-small;
}
#logo{
	width: 50vw;
	height: 17vw;
	background-size: 50vw 17vw;
	
}
knop{
	line-height: 25px;
	font-size: 18px;
	z-index: 2;
}
#hide1{
	display: none !important;
}
#hide2{
	display: none !important;
}
#hide3{
	display: none !important;
}
#top{
	height: 80px;
}
#pagetekst{
	top: 18vw;
}
#ArrL{
	display: none;
}
#ArrR{
	display: none;
}
#Bottom{
	height: 90px !important;
}
#Bottom2{
	height: 90px !important;
}
#Bottomlinken2{
	top: 80px;
}
#btnhsb{
	display: none !important;
}
#btnspanten{
	display: none !important;
}
#btnwoodco{
	display: none !important;
}
#hsbtop{
	width: 80vw;
	display: block;
	min-width: 200px;
	height: 30px;
	margin-left: -10vw;
	color: #FFFFFF;
	padding: 3px 5px 2px 5px;
	background-image:url(../img/btn_hsb.png);
	background-size:cover;
	-webkit-filter: grayscale(1)opacity(0.95);  
	border-right: 1px solid rgba(7,0,108,0.50);
}
#spantentop{
	width: 80vw;
	margin-left: -10vw;
	display: block;
	min-width: 200px;
	height: 30px;
	color: #FFFFFF;
	padding: 3px 5px 2px 5px;
	background-image:url(../img/btn_spanten.png);
	background-size:cover;
	-webkit-filter: grayscale(1)opacity(0.95);  
	border-right: 1px solid rgba(7,0,108,0.50);
}
#woodcotop{
	width: 80vw;
	margin-left: calc(-10vw + -2px);
	display: block;
	min-width: 200px;
	height: 30px;
	color: #FFFFFF;
	padding: 3px 5px 2px 5px;
	background-image:url(../img/btn_woodco.png);
	background-size:cover;
	-webkit-filter: grayscale(1)opacity(0.95);  
	border-right: 1px solid rgba(7,0,108,0.50);
}

#tekstveld_t1{
	padding-top: 100px;
}

}