* {
	padding: 0;
	margin: 0;
}

html {
	width: 100%;
	height: 100%;
}

body {
	color: #231f20;
	font-size: 14px;
	font-family: 'Open Sans', sans-serif;
	line-height: 20px;
}

h1 {font-size: 36px;line-height: 40px}
h2 {font-size: 29px;line-height: 32px}
h3 {font-size: 24px;line-height: 26px}
h4 {font-size: 20px;line-height: 21px}
h5 {font-size: 17px}
h6 {font-size: 14px}

a, a img {outline: none; border: none; text-decoration: none}
li {list-style: none}

.clearfix {
	clear: both !important; 
	float: none !important;
	width: 100% !important; 
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

header {
	width: 100%;
	height: 170px;
	
	background-color: #2d2d2d;
}

header .screen {
	width: 980px;
	margin: 0 auto;
	
	position: relative;
}

header .screen nav h1 a {
	width: 170px;
	height: 170px;
	
	display: block;
	
	background-image: url('../img/logo.jpg');
	background-repeat: no-repeat;
	background-color: #ffffff;
}
header .screen nav h1 a span {
	position: absolute;
	top: -9999px;
}
header .screen nav ul#main-menu {
	position: absolute;
	bottom: 36px;
	right: 0;
}

header .screen nav ul#main-menu li:first-child {padding: 0}
header .screen nav ul#main-menu li {
	float: left;
	padding: 0 2px 0 38px;
}
header .screen nav ul#main-menu li a {
	color: #ffffff;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 1px;
	
	padding: 7px 0;
	border-bottom: 3px solid #2d2d2d;
}
header .screen nav ul#main-menu li.active a,
header .screen nav ul#main-menu li a:hover {
	border-bottom: 3px solid #007eab;
}

header .screen nav ul#contact-menu {
	position: absolute;
	top: 5px;
	right: 0;
}

header .screen nav ul#contact-menu li {
	float: left;
	margin-left: 2px;
}
header .screen nav ul#contact-menu li a {
	width: 115px;
	padding: 2px 0;
	color: #ffffff;
	font-size: 12px;
	text-align: center;
	
	display: block;
	background-color: #575757;
}

header .screen nav ul#contact-menu li a:hover {
	color: #575757;
	font-weight: bold;
	background-color: #ffffff;
}

/*** iOS Slider ***/
section#custom-slider {
	width: 100%;
	height: 370px;
	
	overflow: hidden;
	position: relative;
}

section#custom-slider .fluid-height {position: absolute}
section#custom-slider .fluid-height,
section#custom-slider .fluid-height .slider,
section#custom-slider .fluid-height .slider .item {
	width: 100%;
	height: 100%;
}

section#intro .bullets {	

	width: 85px;
	margin: 20px auto 0 auto;
}

section#intro .bullets .item.selected {background-color: #007eab}
section#intro .bullets .item {
	width: 12px;
	height: 12px;
	
	float: left;
	margin: 0 3px;
	
	border-radius: 12px;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	
	cursor: pointer;
	background-color: #dfdfdf;
}

section#custom-slider .fluid-height .slider .item {	
	overflow: hidden;
	text-align: center;
	
	background-color: #2b2b2b;
	background-repeat: no-repeat;
	background-position: center center;
}

section#custom-slider .fluid-height .slider .item .content {
	width: 980px;
	height: 100%;
	
	margin: 0 auto;
	position: relative;
}

section#custom-slider .slider #item-1 .content h3 {
	position: absolute;
	right: -50px;
	top: 130px;
	
	opacity: 0;
	filter: alpha(opacity = 0);
	
	color: #ffffff;
	font-size: 36px;
	
	line-height: 40px;
	letter-spacing: 1;
	
	text-align: right;
	text-transform: uppercase;
}

section#custom-slider .slider #item-1 {background-image: url('../img/slide-01.jpg')}
section#custom-slider .slider #item-2 {background-image: url('../img/slide-02.jpg')}
section#custom-slider .slider #item-3 {background-image: url('../img/slide-03.jpg')}
section#custom-slider .slider #item-4 {background-image: url('../img/slide-04.jpg')}

/*** INTRO ***/
section#intro .screen {
	width: 980px;
	margin: 0 auto;
}

section#intro .screen h2 {
	font-size: 17px;
	font-weight: normal;
	line-height: 30px;
	text-align:justify;	
	text-justify:trim;
	
	padding: 10px 0 40px 0;
}

section#intro {
	padding-bottom: 70px;
	border-bottom: 5px solid #a6c9cd;
}
section#intro .screen nav {height: 130px}
section#intro .screen nav ul#inline-menu {
	width: 682px;
	margin: 0 auto;
}
section#intro .screen nav ul#inline-menu li {
	float: left;
	padding: 0 20px;
}

section#intro .screen nav ul#inline-menu li a {
	width: 130px;
	height: 130px;
	
	overflow: hidden;
	display: block;
	
	position: relative;
}

section#intro .screen nav ul#inline-menu li a span {
	width: 100%;
	color: #2b2b2b;
	
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 20px;
	font-weight: 700;
	
	text-align: center;
	text-transform: uppercase;
	
	top: 52px;
	display: none;
	position: absolute;
}
section#intro .screen nav ul#inline-menu li a[href="#metaalconstructies"] span {top: 40px}
section#intro .screen nav ul#inline-menu li a:hover img {display: none}
section#intro .screen nav ul#inline-menu li a:hover span {display: block}

/*** PARALLAX ***/
section.slide {
	width: 100%;
	height: 670px;
	
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

section#machinebouw {background-image: url('../img/bg-machinebouw.jpg')}
section#metaalconstructies {background-image: url('../img/bg-metaalconstructie.jpg')}
section#automatisatie {background-image: url('../img/bg-automatisatie.jpg')}
section#onderhoud {background-image: url('../img/bg-onderhoud.jpg')}

section .screen {
	width: 960px;
	height: 100%;
	
	padding: 0 10px;
	margin: 0 auto;
	
	position: relative;
}

section .screen .content {width: 250px}
section .screen .content h2 {
	font-family: 'Open Sans Condensed', sans-serif;
	text-transform: uppercase;
}

section .screen .content h3 {
	color: #00769f;
	
	font-family: "Times New Roman", Times, serif;
	font-weight: normal;
	font-style: italic;
	
	padding: 20px 0;
}

section .screen .content ul {padding: 15px 0 0 15px}
section .screen .content li {
	font-size: 10px;
	list-style: disc;
}

section .screen .content li span {font-size: 14px}

section .screen .content i.icon {
	width: 100%;
	height: 190px;
	
	display: block;
	
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

section .screen .parallax {background-repeat: no-repeat}

/*** MACHINEBOUW ***/
section#machinebouw .screen .content {padding-top: 20px}
section#machinebouw .screen .content i.icon {
	background-image: url('../img/icon-machinebouw.png');
	background-position: 15px 50%;
}
section#machinebouw .screen .parallax {
	position: absolute;
	top: 160px;
	right: 15px;
	
	width: 406px;
	height: 490px;
	
	background-image: url('../img/parallax-machinebouw.png');
}

/*** METAALCONSTRUCTIE ***/
section#metaalconstructies .screen .content {
	position: absolute;
	left: 620px;
	
	width: 280px;
	padding: 50px 0 0 30px;
}
section#metaalconstructies .screen .content i.icon {
	background-image: url('../img/icon-metaalconstructie.png');
	background-position: 0px 50%;
}
section#metaalconstructies .screen .parallax {
	position: absolute;
	top: -387px;
	right: 12px;
	
	width: 721px;
	height: 1058px;
	
	background-image: url('../img/parallax-metaalconstructie.png');
}

/*** AUTOMATISATIE ***/
section#automatisatie .screen .content {
	width: 320px;
	padding-top: 50px;
}
section#automatisatie .screen .content i.icon {
	background-image: url('../img/icon-automatisatie.png');
	background-position: 6px 50%;
}
section#automatisatie .screen .parallax {
	position: absolute;
	top: 320px;
	right: 40px;
	
	width: 433px;
	height: 336px;
	
	background-image: url('../img/parallax-automatisatie.png');
}

/*** ONDERHOUD ***/
section#onderhoud .screen .content {
	position: absolute;
	left: 620px;
	
	width: 275px;
	padding: 50px 0 0 50px;
}

section#onderhoud .screen .content h2 {padding-bottom: 15px}
section#onderhoud .screen .content i.icon {
	background-image: url('../img/icon-onderhoud.png');
	background-position: 0px 50%;
}
section#onderhoud .screen .parallax {
	position: absolute;
	top: 350px;
	left: 400px;
	
	width: 218px;
	height: 219px;
	
	background-image: url('../img/parallax-onderhoud.png');
}

/*** ONDERHOUD ***/
footer {
	width: 100%;
	height: 380px;
	
	display: block;
	background: #2d2d2d;
}

footer .screen {
	width: 960px;
	padding: 0 10px;
	margin: 0 auto;
	
	position: relative;
}

footer .screen .content em {
	position: absolute;
	top: 5px;
	right: 10px;
	
	font-weight: 300;
	font-size: 9px;
	font-style: normal;
}

footer .screen .content em a {color: #bcbcbc}
footer .screen .content em a:hover strong {color: #ea640c}

footer .screen .content address {
	padding-top: 65px;
	text-align: right;
}
footer .screen .content address,
footer .screen .content address a {
	font-style: normal;
	font-size: 12px;
	color: #bcbcbc;
}
footer .screen .content address .blue,
footer .screen .content address a:hover {color: #007eab}

/* STICKY BUTTON */
.btn-scrollto.back-to-top {background-image: url('../img/btn-scroll-top.png')}
.btn-scrollto {
	position: absolute;
	left: 50%;
	right: 50%;
	
	z-index: 20;
	margin-left: -85px;
	
	width: 169px;
	height: 26px;
	
	cursor: pointer;
	
	display: block;
	background-image: url('../img/btn-scroll-down.png');
	background-repeat: none;
}