@charset "UTF-8";


@font-face {
    font-family: 'futura-mediumregular';
    src: url('/_fonts/futura_medium-webfont.eot');
    src: url('/_fonts/futura_medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('/_fonts/futura_medium-webfont.woff') format('woff'),
         url('/_fonts/futura_medium-webfont.ttf') format('truetype'),
         url('/_fonts/futura_medium-webfont.svg#futura-mediumregular') format('svg');
    font-weight: light;
    font-style: light;

}





body {
	background-color: #dfdfdf;
    font-family: "Century Gothic", "Trebuchet MS", Arial, Verdana;
	color: #666;
	font-size: 12px;
    margin: 0px;
    padding: 0px;
}

#menu ul {
	align: right;
}



#menu li {
	float: left;
	list-style-type: none;
	margin-right: 20px;
	margin-top: 0px;
}

#menu {
	width: 610px;
	height: 35px;
	background-color: #215b92;
}


.contact {
color: #fff;

	background-color: #215b92;
}

A.menu:link ,A.menu:visited, A.menu:active { 
display: block;
height: 15px;
line-height: 15px;
padding: 10px;
font-size: 14px; 
color: #FFF;
text-decoration: none;
}
A.menu:hover { 
color: #000; 
}

A.menu2:link ,A.menu2:visited, A.menu2:active { 
display: block;
height: 15px;
line-height: 15px;
padding: 10px;
background-color: #144572;
	background-image: url(/pics/menu.gif);
	background-repeat: no-repeat;
	background-position: bottom center;
color: #fff;
font-size: 14px; 
text-decoration: none;
}
A.menu2:hover { 
color: #000; 
}



a:link { color: #666666; text-decoration: underline; }
a:visited { color: #666666; text-decoration: underline; }
a:active { color: #666666; text-decoration: underline; }
a:hover { color: #000000; text-decoration: underline;}





.brdboven {
	background-color: #FFFFFF;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 0px;
	padding-left: 5px;
	border: 0px;
	
}
.brdonder {
	background-color: #FFFFFF;
	padding: 5px;
	border: 0px;
}



h1 {
font-family: 'futura-mediumregular', "Century Gothic", "Trebuchet MS", Arial, Verdana;
color: #215b92;
font-weight: bold;
font-size: 36px;
margin: 0px;
}

h2 {
font-family: "Century Gothic", "Trebuchet MS", Arial, Verdana;
color: #666;
font-weight: bold;
font-size: 24px;
margin: 0px;
}


.categorie {
font-family: 'futura-mediumregular', "Century Gothic", "Trebuchet MS", Arial, Verdana;
color: #000;
font-size: 42px;
letter-spacing:4px;
text-shadow: 2px 2px 2px #ccc;
margin: 0px;
}



.bck1 {
	background-color: #FFF;
	background-image: url(/pics/foto-.jpg);
	background-repeat: no-repeat;
	background-position: top left;
	width: 850px;
	border: 10px solid #FFF;	
}


#bck0 {
	background-color: #FFF;
	width: 850px;
	border-top-width: 10px;
	border-right-width: 10px;
	border-bottom-width: 0px;
	border-left-width: 10px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: none;
	border-left-style: solid;
	border-top-color: #FFF;
	border-right-color: #FFF;
	border-left-color: #FFF;
  
    
   
    
}




.bckbedrijf {
	background-color: #FFF;
	background-image: url(/pics/maral.jpg);
	background-repeat: no-repeat;
	background-position: top left;
	width: 850px;
	border: 10px solid #FFF;	
}


.logo {
position: relative;
z-index:14;
	background-color: #fff;
	border-top-width: 0px;
	border-right-width: 10px;
	border-bottom-width: 10px;
	border-left-width: 0px;
	border-top-style: solid;
	border-top-color: #FFF;
	border-right-color: #FFF;
	border-bottom-color: #FFF;
	border-left-color: #FFF;
    
}

.logostart {
position: relative;
z-index:14;
margin-top: -10px;
	background-color: #fff;
	border-top-width: 0px;
	border-right-width: 10px;
	border-bottom-width: 10px;
	border-left-width: 0px;
	border-top-style: solid;
	border-top-color: #FFF;
	border-right-color: #FFF;
	border-bottom-color: #FFF;
	border-left-color: #FFF;
    
}




.backwit {
background-color: #fff;
}


.st1 {
display: block;
}



.homezin {
position: absolute;
margin-top: 5px;
}



.homezin1 {

font-size: 14px;
z-index: 9;
color: #666;

}


#menulefthome a .contenthome .homezin 
{ 
margin-top: 20px;
  
}

#menulefthome a:hover .contenthome .homezin  
{ 
margin-top: 10px;
}



#menulefthome a .contenthome .homezin1 
{ 
visibility: hidden;

   


}

#menulefthome a:hover .contenthome .homezin1  
{ 
display: block;
visibility: visible;

}





#menulefthome a { 
display: block; 
position: relative;
display: block;
font-size: 24px;
z-index: 9;

}

#menulefthome a:hover 
{ 
font-size: 24px;


}



a.st1:link, a.st1:visited, a.st1:active {

zoom: 1;
width: 100%;

  filter: alpha(opacity=70);
	opacity: 0.5; 
   
}


a.st1:hover {

zoom: 1;
width: 100%;

  filter: alpha(opacity=100);
	opacity: 1.0; 
    z-index: 9;
}



#menulefthome a .contenthome 
{ 
display: block; 
visibility: visible;
height: 60px; 

}

#menulefthome a:hover .contenthome 
{ 
height: 65px;

}


#menuleft a { display: block;


 }
#menuleft a .content { display: block; visibility: hidden; }
#menuleft a:hover { background-color: transparent; }
#menuleft a:hover .content { visibility: visible; }


#leftmenu {
position:relative;
width: 65px;
}

#leftmenu2 {
top: 148px; 
position: fixed;
width: 65px;
}


.contenthome {
	position: absolute;
    
     font-family: 'futura-mediumregular', "Century Gothic", "Trebuchet MS", Arial, Verdana;
color: #000;
letter-spacing:2px;
    
    display: block;
	left: 65px;
	width: 830px;
	z-index: 10px;
	background-color: #FFFFFF;
	padding-left: 30px;
	
	
	
}

.content {
	position: absolute;
    
    font-family: 'futura-mediumregular', "Century Gothic", "Trebuchet MS", Arial, Verdana;
color: #000;
font-size: 24px;
letter-spacing:2px;
text-shadow: 2px 2px 2px #ccc;
    
    
	left: 65px;
	width: 150px;
	z-index: 10px;
	background-color: #FFFFFF;
	padding-left: 30px;
height: 65px;
line-height:65px;
	
	
	
}


.home1 {
	display: block;
    position: relative;
	width: 250px;
     color: #FFF;
     height: 100px;
	padding: 20px;
	background-color: #215b92;
}

.home1 h2 {
	font-size: 24px;
	font-weight:lighter;
	color: #FFF;
	margin-bottom: 10px;
	margin-top: 0px;
	margin-right: 0px;
	margin-left: 0px;
}



a:link div.home1, a:visited div.home1, a:active div.home1  {
	background: #215b92;
    color: #FFF;
}




a:hover div.home1  {
background: #144572;
color: #000;
-webkit-box-shadow: 0 8px 6px -6px #666;
	   -moz-box-shadow: 0 8px 6px -6px #666;
	        box-shadow: 0 8px 6px -6px #666;
}




.tel1 {
	display: block;
    position: relative;
	width: 234px;
     color: #FFF;
     height: 100px;
	padding: 20px;
	background-color: #215b92;
}



a:link div.tel1, a:visited div.tel1, a:active div.tel1  {
	background: #fff;
    color: #666;
}




a:hover div.tel1  {
background: #215b92;
color: #FFF;
-webkit-box-shadow: 0 8px 6px -6px #666;
	   -moz-box-shadow: 0 8px 6px -6px #666;
	        box-shadow: 0 8px 6px -6px #666;
}



.categoriestart {
font-family: 'futura-mediumregular', "Century Gothic", "Trebuchet MS", Arial, Verdana;
color: #000;
font-size: 24px;
letter-spacing:4px;
text-shadow: 2px 2px 2px #ccc;
margin: 0px;
}


.start {
display: block;
background: #ffffff;
width: 180px;
height: 224px;
text-align: center;
vertical-align: middle;
font-size: 14px;
filter: alpha(opacity=100);
opacity: 1.0;
border: 5px solid #dfdfdf;
}



.start1a {
display: block;
width: 180px;
height: 224px;
text-align: center;
vertical-align: middle;
font-size: 14px;
filter: alpha(opacity=100);
opacity: 1.0;
}



a:link div.start1, a:visited div.start1, a:active div.start1  {
display: block;
background: #ffffff;
padding: 5px;
width: 180px;
height: 224px;
background-image: url(/pics/start-retail2.jpg);
background-repeat: no-repeat;
background-position: center center;
color: #666;
}

a:hover div.start1  {
background: #ffffff;
padding: 5px;
color: #FFF;
background-image: url(/pics/start-retail.jpg);
background-repeat: no-repeat;
background-position: center center;
-webkit-box-shadow: 0 8px 6px -6px #666;
-moz-box-shadow: 0 8px 6px -6px #666;
box-shadow: 0 8px 6px -6px #666;
}




a:link div.start2, a:visited div.start2, a:active div.start2  {
display: block;
background: #ffffff;
padding: 5px;
width: 180px;
height: 224px;
background-image: url(/pics/start-wallpaint2.jpg);
background-repeat: no-repeat;
background-position: center center;
color: #666;
}

a:hover div.start2  {
background: #ffffff;
padding: 5px;
color: #FFF;
background-image: url(/pics/start-wallpaint.jpg);
background-repeat: no-repeat;
background-position: center center;
-webkit-box-shadow: 0 8px 6px -6px #666;
-moz-box-shadow: 0 8px 6px -6px #666;
box-shadow: 0 8px 6px -6px #666;
filter: alpha(opacity=100);
opacity: 1.0;
}

a:link div.start3, a:visited div.start3, a:active div.start3  {
display: block;
background: #ffffff;
padding: 5px;
width: 180px;
height: 224px;
background-image: url(/pics/start-professional2.jpg);
background-repeat: no-repeat;
background-position: center center;
color: #666;
}

a:hover div.start3  {
background: #ffffff;
padding: 5px;
color: #FFF;
background-image: url(/pics/start-professional.jpg);
background-repeat: no-repeat;
background-position: center center;
-webkit-box-shadow: 0 8px 6px -6px #666;
-moz-box-shadow: 0 8px 6px -6px #666;
box-shadow: 0 8px 6px -6px #666;
}

a:link div.start4, a:visited div.start4, a:active div.start4  {
display: block;
background: #dfdfdf;
padding: 5px;
width: 180px;
height: 224px;
background-image: url(/pics/start-antigraffiti2.jpg);
background-repeat: no-repeat;
background-position: center center;
color: #666;
}

a:hover div.start4  {
background: #ffffff;
padding: 5px;
color: #FFF;
background-image: url(/pics/start-antigraffiti.jpg);
background-repeat: no-repeat;
background-position: center center;
-webkit-box-shadow: 0 8px 6px -6px #666;
-moz-box-shadow: 0 8px 6px -6px #666;
box-shadow: 0 8px 6px -6px #666;

}

a:link div.start5, a:visited div.start5, a:active div.start5  {
display: block;
background: #dfdfdf;
padding: 5px;
width: 180px;
height: 224px;
background-image: url(/pics/start-floor2.jpg);
background-repeat: no-repeat;
background-position: center center;

color: #666;
}

a:hover div.start5  {
background: #ffffff;
padding: 5px;
color: #FFF;
background-image: url(/pics/start-floor.jpg);
background-repeat: no-repeat;
background-position: center center;
-webkit-box-shadow: 0 8px 6px -6px #666;
-moz-box-shadow: 0 8px 6px -6px #666;
box-shadow: 0 8px 6px -6px #666;

}

a:link div.start6, a:visited div.start6, a:active div.start6  {
display: block;
background: #dfdfdf;
padding: 5px;
width: 180px;
height: 224px;
background-image: url(/pics/start-industrial2.jpg);
background-repeat: no-repeat;
background-position: center center;

color: #666;
}

a:hover div.start6  {
background: #ffffff;
padding: 5px;
color: #FFF;
background-image: url(/pics/start-industrial.jpg);
background-repeat: no-repeat;
background-position: center center;
-webkit-box-shadow: 0 8px 6px -6px #666;
-moz-box-shadow: 0 8px 6px -6px #666;
box-shadow: 0 8px 6px -6px #666;

}

a:link div.start7, a:visited div.start7, a:active div.start7  {
display: block;
background: #dfdfdf;
padding: 5px;
width: 180px;
height: 224px;
background-image: url(/pics/start-specials2.jpg);
background-repeat: no-repeat;
background-position: center center;

color: #666;
}

a:hover div.start7  {
background: #ffffff;
padding: 5px;
color: #FFF;
background-image: url(/pics/start-specials.jpg);
background-repeat: no-repeat;
background-position: center center;
-webkit-box-shadow: 0 8px 6px -6px #666;
-moz-box-shadow: 0 8px 6px -6px #666;
box-shadow: 0 8px 6px -6px #666;
filter: alpha(opacity=100);
opacity: 1.0;
}









.actie1 {
color: #FFF;
font-size:14px;
background-color: #215b92;
}




/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; top: -100px; } to { opacity:1; top: 0px;  } }
@-moz-keyframes fadeIn { from { opacity:0; top: -100px; } to { opacity:1; top: 0px;  } }
@keyframes fadeIn { from { opacity:0; top: -100px; } to { opacity:1; top: 0px;  } }
 
.fade-in {
    opacity:0;  /* make things invisible upon start */
    -webkit-animation:fadeIn ease 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation:fadeIn ease 1;
    animation:fadeIn ease 1;
 

 
    -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
 
    -webkit-animation-duration:1.0s;
    -moz-animation-duration:1.0s;
    animation-duration:1.0s;
}



 
.fade-in.one {
-webkit-animation-delay: 0.1s;
-moz-animation-delay: 0.1s;
animation-delay: 0.1s;
}
 
.fade-in.two {
-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
animation-delay: 0.3s;
}
 
.fade-in.three {
-webkit-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
animation-delay: 0.6s;
}

.fade-in.four {
-webkit-animation-delay: 0.8s;
-moz-animation-delay: 0.8s;
animation-delay: 0.8s;
}

.fade-in.five {
-webkit-animation-delay: 1.0s;
-moz-animation-delay: 1.0s;
animation-delay: 1.0s;
}


/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn2 { from { opacity:0;  } to { opacity:1;  } }
@-moz-keyframes fadeIn2 { from { opacity:0; } to { opacity:1;  } }
@keyframes fadeIn2 { from { opacity:0; } to { opacity:1;  } }
 
.fade-in2 {
    opacity:0;  /* make things invisible upon start */
    -webkit-animation:fadeIn2 ease 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation:fadeIn2 ease 1;
    animation:fadeIn2 ease 1;
 

 
    -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
 
    -webkit-animation-duration:1.0s;
    -moz-animation-duration:1.0s;
    animation-duration:1.0s;
}


.fade-in2.five {
-webkit-animation-delay: 1.0s;
-moz-animation-delay: 1.0s;
animation-delay: 1.0s;
}


 
/*---make a basic box ---*/
.box{
width: 200px;
height: 200px;
position: relative;
margin: 10px;
float: left;
border: 1px solid #333;
background: #999;
 
}




.nawinput {
width: 250px;
height: 25px;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
border-radius:5px;
border: 1px solid #cccccc;
}

.nawopmerking {
width: 250px;
height: 70px;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
border-radius:5px;
border: 1px solid #cccccc;
}

.nawgeslacht {
width: 70px;
height: 25px;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
border-radius:5px;
border: 1px solid #cccccc;
}


.nawnaam1 {
width: 85px;
height: 25px;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
border-radius:5px;
border: 1px solid #cccccc;
}

input {
width: 150px;
height: 25px;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
border-radius:5px;
border: 1px solid #cccccc;
}


.nawinput {
width: 250px;
height: 25px;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
border-radius:5px;
border: 1px solid #cccccc;
}

.nawopmerking {
width: 250px;
height: 70px;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
border-radius:5px;
border: 1px solid #cccccc;
}



#slideshow {
    position:relative;
    height:0px;    
    background-color: #FFF;
	width: 850px;

    
    
    border-top-width: 10px;
	border-right-width: 10px;
	border-bottom-width: 0px;
	border-left-width: 10px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: none;
	border-left-style: solid;
	border-top-color: #FFF;
	border-right-color: #FFF;
	border-left-color: #FFF;
  
    
}

#slideshow DIV {
    position:absolute;
    top:0;
    left:0;
    z-index:1;
    opacity:0.0;
}

#slideshow DIV.active {
    z-index:3;
    opacity:1.0;
}

#slideshow DIV.last-active {
    z-index:2;
}



.stippel {
	border-top-width: 1px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: dashed;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-top-color: #999;
}



a.trans1:link, a.trans1:visited, a.trans1:active {
filter: alpha(opacity=100);
opacity: 1.0;
}

a.trans1:hover  {
zoom: 1;
filter: alpha(opacity=60);
opacity: 0.6;
}


a.trans2:link, a.trans2:visited, a.trans2:active {
zoom: 1;
filter: alpha(opacity=60);
opacity: 0.6;
padding: 2px;
padding-bottom: 1px;
background-color: #fff;
}

a.trans2:hover  {
zoom: 1;
filter: alpha(opacity=100);
opacity: 1.0;
}