@import url('animation.css');
@import url('reset.css');

body {

	background-color	: #000;	
	overflow		: -moz-scrollbars-vertical;
}

#ontwerp-background {
	width			: 100%;
	height			: auto;
	margin 			: 0px auto;
	background-image	: url("../images/ontwerp/sketch5.jpg");
	background-position	: bottom left;
	background-attachment	: fixed;
}
#contact-background {
	width			: 100%;
	height			: auto;
	margin 			: 0px auto;
	background-image	: url("../images/ontwerp/sketch5.jpg");
	background-position	: bottom left;
	background-attachment	: fixed;
}

.container {
	width			: 850px;
	margin			: 0px auto;
	height			: auto;

}
.adres-container {
	width			: 850px;
	margin			: 0px auto;
	height			: auto;
	background-color	: #162213;
}
		/* menu */
#menu-container {
	width			: 850px;
	height			: 30px;
	margin-top		: 60px;
}
.menu {
	float		 	: left;
	margin			: 0px auto;
	text-align		: center;
	list-style-type		: none;
	list-style-postition	: inside;	
}
.menu ul {
	float			: left;
	background-color	: #000000;
	width			: 850px;
	height			: 30px;
	padding-top		: 15px;
	margin			: 0px;
	border			: 0px ;
}
.menu ul li {
	display			: inline;
}
.menu ul li a {
	padding			: 10px;
	margin-right		: 12px;
	font-size		: 14px;
	font-family		: Arial, Helvetica, sans-serif;
	text-decoration		: none;
	color			: #FFFFFF;
	text-transform		: uppercase;
	height			: 80px;
}
.menu ul li a:hover {
	padding			: 10px;
	color			: #FFFFFF;
	background-color	: #162213;
}
.menu ul li a.active {
	color			: #FFFFFF;
	background-color	: #162213;
}

		/* logo en adres */

#header-container {
	float			: left;
	width			: 850px;
	height 			: 160px;
	background-color	: #162213;

}
.header-tekst {
	float			: right;
	width			: 200px;
	height			: 100px;
	margin			: 40px 80px 0px 0px;
	text-align		: right;
}	
.header-pic {
	float			: left;
	height			: 350px;
	width			: 370px;
	padding			: 20px 0px 0px 80px;
}
.contact-pic {
	float			: left;
	height			: 260px;
	width			: 860px;
	margin			: 10px 2px 10px 2px;
}
.adres-left {
	float 			: left;
	width			: 260px;
	height			: 100px;
	padding			: 4px 0px 0px 70px;
}
.adres-right {
	float 			: right;
	width			: 260px;
	height			: 100px;
	padding			: 4px 80px;
	text-align		: right;
}

.h-pic {
	position		: fixed;
	top			: 300px;
	left			: 100px;
	height			: 120px;
	padding			: 20px 0px 0px 80px;
}
#header-ontwerp-container {
	float			: left;
	width			: 850px;
	height 			: 350px;
	background-image	: url("../images/ontwerp/sketch4.jpg");
	background-position	: bottom left;
}
#header-contact-container {
	float			: left;
	width			: 850px;
	height 			: 350px;
	background-image	: url("../images/contact/woudenberg.png");
	background-position	: bottom left;
}

		/* maincontent */

#maincontent {
	float			: left;
	margin			: 0px;
	width			: 690px;
	height			: auto;
	padding			: 40px 80px 40px 80px;
	background-color	: #162213;
	text-align		: justify;
}
#ontwerpcontent {
	float			: left;
	margin			: 0px;
	width			: 690px;
	height			: auto;
	padding			: 40px 80px 40px 80px;
	text-align		: justify;
}
#adrescontent {
	float			: left;
	margin			: 0px;
	width			: 840px;
	height			: 120px;
	padding			: 10px 0px 0px 10px;
	background-color	: #162213;
	text-align		: justify;
}

		/* footer*/

#footer {
	float			: left;
	margin			: 10px 0px 10px 0px;
	padding			: 20px;
	width			: 810px;
	height			: 200px;
	background-color	: #162213;
}
#footer-pic {
	float			: left;
	margin			: 0px 0px 0px 60px;
}
#footer-tekst {
	float			: right;
	width			: 260px;
	height			: 100px;
	margin			: 40px 60px 0px 0px;
	text-align		: right;
}
#ontwerp-footer {
	float			: left;
	margin			: 10px 0px 10px 0px;
	padding			: 40px 20px;
	width			: 810px;
	height			: 20px;
	background-color	: #162213;
	text-align		: center;
}
		/* copyright */
#copyright {
	float			: left;
	width			: 850px;
	height			: 20px;
	margin			: 10px 0px 80px 0px;
	text-align		: center;
}

		/* li opmaak */
li {
	font-size		: 14px;
	color			: #FFFFFF;
	font-family		: verdana;
	font-weight		: normal;
	font-style		: normal;
	line-height		: 18px;
}
a {
	color			: #CCCCCC;
	font-size		: 14px;
	font-weight		: normal;
	font-style		: normal;
	line-height		: 18px;
	text-decoration		: none;	
}
a:hover {
	color			: #000000;
}

/* contactformulier */

#naam, #onderwerp, #mail {
	color			: #FFFFFF;
	font-family		: verdana;
	font-size		: 14px;
	line-height		: 20px;
	background-color	: #324229;
	width			: 400px;
	border			: 2px inset #333333;
	overflow		: hidden;
}
#bericht {
	color			: #FFFFFF;
	font-family		: verdana;
	font-size		: 14px;
	line-height		: 20px;
	background-color	: #324229;
	width			: 400px;
	border			: 2px inset #333333;
	overflow		: hidden;
}
label {
	line-height		: 40px;
	color			: #FFFFFF;
	font-family		: verdana;
	font-size		: 14px;
	overflow		: hidden;
}

  		/* tekst opmaak */

P { 
        font-size		: 14px; 
        font-family		: Verdana, Arial, Helvetica, sans-serif;
        font-weight		: normal;
        font-style		: normal;
        line-height		: 18px;
        color			: #FFFFFF;
}
H1 {
	font-family		: Verdana, Arial, Helvetica;
	font-size		: 20px;
	font-weight		: normal;
        font-style		: normal;
	line-height		: 20px;
	color			: #FFFFFF;
}

H2 {
	
	font-family		: verdana, Arial, Helvetica;
	font-size		: 18px;
	font-weight		: normal;
	font-style 		: normal;
	line-height		: 20px;
	color			: #FFFFFF;
}

H3 {
	font-family	: verdana, Arial, Helvetica;
	font-size	: 15px;
	font-weight	: normal;
	font-style 	: italic;
	line-height	: 20px;
	color		: #FFFFFF;
	margin-bottom	: 10px;
}

H4 {
	font-family	: verdana, Arial, Helvetica;
	font-size	: 15px;
	font-weight	: normal;
	font-style 	: normal;
	line-height	: 20px;
	color		: #FFFFFF;
	margin-bottom	: 10px;
}

H5 {
	font-family	: verdana, Arial, Helvetica;
	font-size	: 17px;
	font-weight	: normal;
	font-style 	: italic;
	line-height	: 25px;
	color		: #FFFFFF;
	margin-top	: 10px;
}

H6 {
	font-family	: verdana;
	font-size	: 10px;
	font-weight	: normal;
	font-style 	: normal;
	line-height	: 50px;
	color		: #333333;
	margin-bottom	: 0px;
}
	/* SLIDER LAYOUT */

.container-slider {
	width			: 850px;
	margin			: 0px auto;
	border-top		: 5px solid #999999;
}

.slider-container {
	overflow:hidden;
	width:850px;
}

	/* CONTENT SLIDER */

#content-slider {
	width:920px;
	height:400px;

}


/* Slider
/*-----------------------------------------------------------------------------------*/
.slider_container{ 
	width:		920px;
	height: 	400px; 
	margin:		top; 
	clear:		both; 
	background:	no-repeat top center; 
	padding:	10px 0px 10px 0px;
}
.flex-caption{ 
	position: 	absolute; 
	right:		11px; 
	bottom:		20px;
}
.caption_title_line{ 
	width:		450px; 
	height:		75px; 
	padding:	5px 15px 10px 15px;
	background:	url('../images/slider_caption_bg.png') repeat;
	color: 		#303030;
}
.flex-caption h2{ 
	color:		#303030;
	font-size:	20px; 
	padding:	5px 0 5px 0; 
	margin:		0px;
	font-family: 	'Ovo', serif;
}

.flex-container a:active,
.flexslider a:active {
	outline: 	none;
}
.slides,
.flex-control-nav,
.flex-direction-nav {
	margin: 	0; 
	padding: 	0; 
	list-style: 	none;
} 

/* FlexSlider Necessary Styles
*********************************/ 
.flexslider {
	width: 		100%; 
	margin: 	0; 
	padding: 	0 0 28px 0;
	background:	url('../images/shadow_bottom.png') no-repeat center bottom;
}
.flexslider .slides > li {
	display: 	none;
} 
/* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {
	max-width: 	100%; 
	display: 	block; 
	border:		0px #ededed solid;
}
.flex-pauseplay span {text-transform: capitalize;}
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} 
html[xmlns] .slides {display: block;} 
* html .slides {height: 1%;}
.no-js .slides > li:first-child {display: block;}
.flexslider {position: relative; zoom: 1;}
.flexslider .slides {zoom: 1;}
.flexslider .slides > li {position: relative;}
.flex-container {zoom: 1; position: relative;}

/* Direction Nav */
.flex-direction-nav li a {width:45px; height:42px; margin:0; display: block; position: absolute; right:11px; cursor: pointer; text-indent: -9999px;}
.flex-direction-nav li a.next {background:url('../images/next.png') no-repeat center; bottom:84px; right: 80px;}
.flex-direction-nav li a.prev {background:url('../images/prev.png') no-repeat center;bottom:41px; right: 80px;}
.flex-direction-nav li a.next:hover {background:url('../images/next_a.png') no-repeat center;}
.flex-direction-nav li a.prev:hover {background:url('../images/prev_a.png') no-repeat center;}
.flex-direction-nav li a.disabled {opacity: .3; filter:alpha(opacity=30); cursor: default;}

/* Control Nav */
.flex-control-nav {width: 100%; position: absolute; bottom: -30px; text-align: center;}
.flex-control-nav li {margin: 0 0 0 5px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-nav li:first-child {margin: 0;}
.flex-control-nav li a {width: 13px; height: 13px; display: block; cursor: pointer; text-indent: -9999px;}
.flex-control-nav li a:hover {background-position: 0 -13px;}
.flex-control-nav li a.active {background-position: 0 -26px; cursor: default;}

/* Media Queries
/*-----------------------------------------------------------------------------------*/

@media screen and (max-width: 1000px) {
.slider_container{ width:90%; margin:0 0 0 2%; clear:both; background:none; padding:30px 0 0 0;}
.flexslider {width: 100%; margin: 0; padding:0 0 30px 0;background:none;}
.flex-direction-nav li a {width:45px; height:42px; margin:0; display: block; position: absolute; right:-10px; cursor: pointer; text-indent: -9999px;}
.flex-direction-nav li a.next {background:url(images/next.png) no-repeat center; bottom:85px;}
.flex-direction-nav li a.prev {background:url(images/prev.png) no-repeat center;bottom:40px;}
.flex-caption { display:none;}
}

 	/* PROGRESS BAR */

.progress-bar { 
	position:relative;
	top:-5px;
	width:680px; 
	height:5px;
	background:#000;
	-moz-animation:fullexpand 25s ease-out infinite;
	-webkit-animation:fullexpand 25s ease-out infinite;
}


			.wrapper {
				background-color: white;
				width: 480px;
				margin: 40px auto;
				padding: 50px;
				box-shadow: 0 0 5px #999;
			}
			.list_carousel {
				background-color: #ccc;
				margin: 0 0 30px 60px;
				width: 360px;
			}
			.list_carousel ul {
				margin: 0;
				padding: 0;
				list-style: none;
				display: block;
			}
			.list_carousel li {
				font-size: 40px;
				color: #999;
				text-align: center;
				background-color: #eee;
				border: 5px solid #999;
				width: 50px;
				height: 50px;
				padding: 0;
				margin: 6px;
				display: block;
				float: left;
			}
			.list_carousel.responsive {
				width: auto;
				margin-left: 0;
			}
			.clearfix {
				float: none;
				clear: both;
			}