@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

body {
	font-family: 'Open Sans', sans-serif;
}

p {
	letter-spacing: 0.8px;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "museo-slab", serif;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 0.5px;
}

a:focus, a:active {
	outline: none;
}

 h3 {
	font-size: 18px;
}

h1.website-title {
	text-align: center;
	margin: auto 25%;
}

h1.website-title img {
	width:100%;
}

.no-visible {
	display:none;
}

.section.intro {
	background-image: url('../img/intro-back.jpg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

nav.bullet {
	position: fixed;
	display:block;
	top:20%;
	left: -10px;
	z-index: 1;
	width: 8px;
	margin-left: 30px;
}

nav.bullet a {
	height: 8px;
	width: 8px;
	background: #536363;
	display: block;
	margin-top: 20px;
	border-radius: 4px;
}

nav.bullet li.active a {
	background: #fff;
}

nav.text {
position: absolute;
bottom: 30px;
left: 0;
width:100%;
}

nav.text ul.main-nav li {
	height:30px;
}

nav.text ul.main-nav li:hover a  {
	border-bottom: 2px solid #fff;
}

nav ul.main-nav {
	list-style: none;
	padding:0 20%;
}

nav ul.main-nav li {
	display: inline-block;
	width:24%;
	text-align: center;
}

nav ul.main-nav li a {
	color:#fff;
	font-size: 18px;
	text-transform: uppercase;
}

nav ul.main-nav li a:hover {
	text-decoration: none;
}

.section.over-ons {
	background-image: url('../img/BACKOVERONS.jpg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	color: #fff;
}

.section.over-ons article {
	border-left: 1px solid #fff;
	padding-left:20px;
}

.section.over-ons h2 {
	padding-top: 0;
	margin-top: 0;
	text-transform: uppercase;
}

.section.over-ons p {
	padding-bottom: 0;
	margin-bottom: 0;
	margin-top: 20px;
}

.section.over-ons p.last {
	margin-top: 52px;
}

.section.projecten {
	background: #1d1d1d;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	color: #fff;
}

.section.projecten article {
	text-align: right;
	border-right: 1px solid #fff;
	padding-right: 20px;
	margin-right: 8px;
	margin-top: 50px;
	margin-bottom: 40px;
}

.section.projecten .slide {
	padding: 0 5%;
}

.section.projecten h2 {
	padding-top: 0;
	margin-top: 0;
	text-transform: uppercase;
}

.section.projecten p {
	padding-bottom: 0;
	margin-bottom: 0;
}


.project-item img {
	width:100%;
}

.section.werkwijze {
	background-image: url('../img/BACKWERKWIJZE.jpg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	color: #fff;
}

.stripe {
	border-left: 1px solid #fff;
	padding-left: 15px;
}

.section.werkwijze h2 {
	padding-top: 0;
	margin-top: 0;
	padding-left: 15px;
	text-transform: uppercase;
}

.section.werkwijze p {
	padding-bottom: 0;
	margin-bottom: 0;
	padding-right: 10px;
}

.section.aan-de-slag {
	background-image: url('../img/BACKCONTACT.jpg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	color: #fff;
}

.section.aan-de-slag a {
	color:#fff;
	display: block;
}

.section.aan-de-slag footer p a {
	color:#535353;
	display:inline-block;
}

.section.aan-de-slag a.button {
	margin-top:80px;
}

.section.aan-de-slag a.button, .button {
	text-transform: uppercase;
	border: 4px solid #fff;
	padding: 5px 10px;
	cursor: pointer;
	display: inline-block;
	color: #fff;
}

.section.aan-de-slag a.button:hover {
	color:#aaa;
	text-decoration: none;
}

.text-center {
	text-align: center;
}

.imi-title {
	display: inline-block;
	border-bottom: 1px solid #fff;
	margin: 0 auto;
	font-family: "museo-slab", serif;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 30px;
	margin-bottom: 50px;
}

.container.slim {
	padding:0 10%;
}

footer {
	text-align: center;
	background:#000;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 25px;
}

.project-item {
	position: relative;
	overflow: hidden;
	margin-top: 30px;
}

.project-item figcaption {
	color:#fff;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	overflow:hidden;
	width: 100%;
	height: 100%;
	background:rgba(0, 0, 0, 0.5);
	transition: 0.3s opacity linear;
}

.project-item figcaption h4, .project-item figcaption p {
	margin-left: 20px;
	position: relative;
	top: 100%;
	transition: 0.3s top linear;
}

.project-item:hover figcaption h4, .project-item:hover figcaption p {
	position: relative;
	top: 20px;
}

.project-item.test:hover figcaption h4, .project-item.test:hover figcaption p {
	position: relative;
	top: 10%;
}

.project-item:hover figcaption {
	opacity: 1;
}


.slide .fp-tableCell
  {
  	vertical-align: top;
}

.control {
  position: absolute;
  bottom: 10%;
  text-align: center;
  width: 100%;
}

.controls {
	position: relative;
	display: inline-block;
	z-index: 5;
}

.arrow-right {
	background: url('../img/next.png');
	width: 16px;
	height: 26px;
	margin-left: 50px;
	cursor: pointer;
}

.arrow-right:hover {
	background: url('../img/next-dark.png');
	cursor: pointer;
}

.arrow-left {
	background: url('../img/prev.png');
	width: 16px;
	height: 26px;
	margin-right: 50px;
}

.arrow-left:hover {
	background: url('../img/prev-dark.png');
	cursor: pointer;
}

.sphere {
	top: -8px;
	width: 8px;
	height: 8px;
	background: #536363;
	border-radius: 4px;
	margin-left: 10px;
}

.sphere.active {
	background: #fff;
}

.sphere.first {
	margin-left: 0;
}

.button-container {
	text-align: center;
}

.no-mobile {
	display: block;
}

 .mobile {
    display: none;
  }

@media (max-width: 600px) {

  	.mobile {
   		display: block;
  	}

  	.no-mobile {
		display: none!important;
	}

	.button {
		border-radius: 4px;
		border:1px solid #fff;
	}

	.button.reference {
		padding: 5px 25px;
	}

	.button.reference:hover, .button.reference:active, .button.reference:focus {
		color:#aaa;
		text-decoration: none;
	}

	.intro .button-container {
		position:absolute;
		bottom: 30px;
		left: 0;
		width: 100%;
	}

	h1.website-title {
	text-align: center;
	margin: auto 10%;
}


.section.over-ons article {
	border-left: 0px;
	padding-left:0px;
	text-align: center;
	margin: 80px 0;
}

.section.over-ons h2 {
	padding-top: 0;
	text-transform: uppercase;

}

.section.over-ons p {
	padding-left:25px;
	padding-right: 25px;
	margin-top: 20px;
}

.section.over-ons p.last {
	margin-top: 20px;
	margin-bottom: 40px;
}

.section.projecten article {
	text-align: center;
	border-right: 0px;
	padding-right: 15px;
	margin-right: 0px;
	margin-top: 80px;
	margin-bottom: 40px;
}

.section.projecten {
	padding-bottom: 80px;
}

.section.projecten .slide {
	padding: 0 5%;
}


.section.projecten .col-md-4 {
	padding-right: 30px;
	padding-left: 30px;
}

.stripe {
	border-left: 0px;
	padding-left: 0px;
	text-align: center;
	margin: 80px 0;
}

.section.werkwijze h2 {
	padding-top: 0;
	margin-top: 0;
	padding-left: 0px;
	text-transform: uppercase;
}

.section.werkwijze h3 {
	margin-bottom: 25px;
}

.section.werkwijze p {
	padding-bottom: 0;
	margin-bottom: 0;
	padding-right: 15px;
	padding-left: 15px;
	margin-bottom: 40px;
}

.section.aan-de-slag  {
	text-align: center;
	padding: 80px 0;
}

.section.aan-de-slag .col-md-5, .section.aan-de-slag .col-md-3 {
	padding-bottom: 20px;
}

.section.aan-de-slag .col-md-4 {
	padding-bottom: 40px;
}

.section.aan-de-slag h3 {
	margin-bottom: 20px;
}

.imi-title {
	border-bottom: 0px;
}

.section.aan-de-slag .fp-tableCell {
	vertical-align: top;
}

footer {
	text-align: center;
	background:#000;
	position: relative;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 25px;
}

}