.slide2{

	background: rgb(0,127,181);
background: -moz-linear-gradient(-45deg,  rgba(0,127,181,1) 0%, rgba(0,139,199,1) 30%, rgba(0,139,199,1) 100%);
background: -webkit-linear-gradient(-45deg,  rgba(0,127,181,1) 0%,rgba(0,139,199,1) 30%,rgba(0,139,199,1) 100%);
background: linear-gradient(135deg,  rgba(0,127,181,1) 0%,rgba(0,139,199,1) 30%,rgba(0,139,199,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007fb5', endColorstr='#008bc7',GradientType=1 );

}
.slide2 .bgwrap{
	display: block;
	width:100%;
	height:100%;
	position: absolute;
	top:0;
	left:0;
	z-index: 2;
	background: -moz-linear-gradient(-45deg,  rgba(0,127,181,0) 0%, rgba(0,115,165,0) 30%, rgba(0,115,165,1) 30%, rgba(0,158,225,1) 100%);
	background: -webkit-linear-gradient(-45deg,  rgba(0,127,181,0) 0%,rgba(0,115,165,0) 30%,rgba(0,115,165,1) 30%,rgba(0,158,225,1) 100%);
	background: linear-gradient(135deg,  rgba(0,127,181,0) 0%,rgba(0,115,165,0) 30%,rgba(0,115,165,1) 30%,rgba(0,158,225,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00007fb5', endColorstr='#009ee1',GradientType=1 );
}

.slide2 img{
	display:none;
	left:5%;
position: absolute;
top: 15px;
height: calc(100% - 15px);
width: auto;
z-index: 1;
}
.slide2.active img{
	display: block;
}
.slide3{
background: #a20059;
background: -moz-linear-gradient(-45deg,  #a20059 1%, #e6007e 100%);
background: -webkit-linear-gradient(-45deg,  #a20059 1%,#e6007e 100%);
background: linear-gradient(135deg,  #a20059 1%,#e6007e 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a20059', endColorstr='#e6007e',GradientType=1 );
display:table;
}
.slide3 .bgwrap{
	display: block;
	width:100%;
	height:100%;
	position: absolute;
	top:0;
	left:0;
	z-index: 2;


	}
.slide3.active .bgwrap{
	background:url('../images/spetters1_50.png'), url('../images/spetters2_50.png');
	background-repeat: no-repeat;
background-position: top left, center bottom;
}

.slide4 .slide{
	position: relative;
}
.wom-project{
	background:url('../images/wandopmaat-project_75.jpg') no-repeat center center;
   -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
    z-index:3;
}
.ba-project{
	background:url('../images/tvliftmeubel-small.jpg') no-repeat center center;
   -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

    z-index:3;
}
.wpc-project{
	background:url('../images/wpcompleet-project_75.jpg') no-repeat center center;
   -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
    z-index:3;
}


.bgwrap{
	opacity:0;

}
.slide4 .active .bgwrap {
    opacity: 1;
    animation: fade 0.5s linear;
}


@keyframes fade {
  0% { opacity: 0 }
  100% { opacity: 1 }
}



@media only screen and (min-width: 760px) {
	.slide3.active .bgwrap{
	background-image:url('../images/spetters1.png'), url('../images/spetters2.png');
	}
	
	.wom-project{
		background-image:url('../images/wandopmaat-project.jpg');
	
	}
	.ba-project{
		background-image:url('../images/tvliftmeubel.jpg');
	}
	.wpc-project{
		background-image:url('../images/wpcompleet-project.jpg');
	}
}


.slide4 .bgwrap{
	display: block;
	width:100%;
	height:100%;
	content:"";
	position: absolute;
	top:0;
	left:0;
	z-index: 2;
background: -moz-linear-gradient(-45deg,  rgba(0,0,0,0.5) 0%, rgba(250,232,0,0) 40%, rgba(255,237,0,0.7) 40%, rgba(255,237,0,0.7) 100%);
background: -webkit-linear-gradient(-45deg,  rgba(0,0,0,0.5) 0%,rgba(250,232,0,0) 40%,rgba(255,237,0,0.7) 40%,rgba(255,237,0,0.7) 100%);
background: linear-gradient(135deg,  rgba(0,0,0,0.5) 0%,rgba(250,232,0,0) 40%,rgba(255,237,0,0.7) 40%,rgba(255,237,0,0.7) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d000000', endColorstr='#b3ffed00',GradientType=1 );
}
.modal {
  height: calc(100% - 145px);
  width:  calc(100% - 85px);
  position: absolute;
  top: 15px;
  bottom: 15px;
  left: 15px;
  right: 15px;
  background:rgba(0, 0, 0, 0.9);
  margin: auto;
  z-index: 9999;
  padding:60px 30px;
  line-height:1.6em;
  font-size:18px;
  overflow-y: auto;
display:none;
}
.modal ul,.modal ul li{
	list-style: disc;
	margin-left:10px;
}
.modal ul{
	margin-left:30px;
}
.close {
  position: absolute;
   cursor: pointer;
  right: 15px;
  top: 15px;
  width: 32px;
  height: 32px;
  opacity: 0.6;
   z-index: 999;
}
.close:hover {
  opacity: 1;
}
.close:before, .close:after {
  position: absolute;
  left: 15px;
  content: ' ';
  height: 33px;
  width: 2px;
  background-color: #fff;
}
.close:before {
  transform: rotate(45deg);
}
.close:after {
  transform: rotate(-45deg);
}


*{
padding:0;
margin:0;
}

#logowrap{
	display:block;
	width:800px;
	position: fixed;
left: 50%;
top:15px;

-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
@media only screen and (max-height: 800px) {#logowrap{width:700px;}.slide4 .fp-controlArrow{top:75px;}body:not(.fp-viewing-intro) .contact span{display:none;}body:not(.fp-viewing-intro) #diagonal-box{height:250px;} }
@media only screen and (max-height: 700px) {#logowrap{width:600px;}.slide3 img{width:60% !important;}.projects .fp-tableCell{height:30% !important;}.modal{padding:15px;height: calc(100% - 50px);width:  calc(100% - 50px);}}
@media only screen and (max-height: 600px) {#logowrap{width:500px;}.projects .fp-tableCell{height:30% !important;}}
@media only screen and (max-height: 500px) {#logowrap{width:400px;}}

#logo{
	background:url('../images/bg_25.jpg') -25px -50px;
	background-size: calc(100% + 50px);
	max-width:100%;
	max-height:100%;
	display: block;
	transition: all 0.3s ease;
}

@media only screen and (min-width: 600px) {
	#logo{
	background-image:url('../images/bg.jpg');
	}
}

	#logowrap,#logo{
	display:block !important;
	touch-action: manipulation !important;
		z-index:-2;

}
#diagonal-box{
	z-index:-1;
}

.slide1{
background:transparent;
z-index: 2;
}

#diagonal-box{
	touch-action: none;
	height:400px;
	width:auto;
	display: block;
	position:fixed;
	bottom:0px;
	right:0;
	text-align: right;
}

.contact p{

	position: absolute;
	right:30px;
	bottom:30px;
	font-size:12px;
	line-height:16px !important;
	z-index: 1;
  color:#fff;
text-align: right;
}
.contact p a{
	text-decoration: underline;
	font-weight: normal;
}
.contact p a{
	position: relative;
	display: inline-block;
	z-index:9;
}
.contact p a:hover{
	text-decoration: none;
}
body:not(.fp-viewing-intro) #logowrap{
	width:200px;
	height:200px;
	z-index:3;
}
body:not(.fp-viewing-intro) #diagonal-box{
	z-index: 3;
}
body:not(.fp-viewing-intro)  .contact p{
	z-index: 4;
}
body:not(.fp-viewing-intro) #logo{
	background:transparent;
	color:#000;
}
body:not(.fp-viewing-intro) #logo path,
body:not(.fp-viewing-intro) #logo rect{
	fill:#000;
}

.contact strong{
	font-size:14px;
}
.contact a{
	color:#fff;
}
.fp-viewing-over .contact *{
	 color:#009fe3;
	 transition: all 0.3s ease;
}
.fp-viewing-webdesign .contact *,
.fp-viewing-webdesign-0 .contact *,
.fp-viewing-webdesign-1 .contact *,
.fp-viewing-webdesign-2 .contact *,
.fp-viewing-webdesign-3 .contact *,
.fp-viewing-webdesign-4 .contact *,
.fp-viewing-webdesign-5 .contact *,
.fp-viewing-webdesign-6 .contact *,
.fp-viewing-webdesign-7 .contact *,
.fp-viewing-webdesign-8 .contact *,
.fp-viewing-webdesign-9 .contact *{
	 color:#e6007e;
	 transition: all 0.3s ease;
}
.fp-viewing-projecten-0 .contact *,
.fp-viewing-projecten-1 .contact *,
.fp-viewing-projecten-2 .contact *{
	 color:#ffed00;
	 transition: all 0.3s ease;
}
html,body{
	margin:0;
	padding:0;
	width:100%;
	height:100%;
	display:block;
	 font-family: 'Lato', sans-serif;

}

.wrap{
	width:100%;
	height:100%;
}
body{
	position: relative;
	height:100%;
	color:#fff;
}
.slide4{
	color:#000;
}
.slide4 h1{
	color:#000;
}

a.btn{
	font-size:14px;
	color: #fff;
	cursor: pointer;
	font-weight: 600;
	display: block;
	float:left;
	text-transform: uppercase;
	margin:0 15px 15px 0;
	position: relative;
	
	padding:20px;
	transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
0s;
overflow: hidden;
background: rgba(0, 0, 0, 0.3);
}
a.btn:hover {
	color: #fff !important;
	background-color: transparent;
	padding-right:40px;
}
a.btn:hover:before {
	left: 0%;
	right: auto;
	width: 100%;
}
a.btn:before {
	display: block;
	position: absolute;
	top: 0px;
	right: 0px;
	height: 100%;
	width: 0px;
	z-index: -1;
	content: '';
	color: #000 !important;
background: -moz-linear-gradient(-45deg,  rgba(0,0,0,1) 0%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 90%, rgba(0,0,0,0) 100%);
background: -webkit-linear-gradient(-45deg,  rgba(0,0,0,1) 0%,rgba(0,0,0,1) 90%,rgba(0,0,0,0) 90%,rgba(0,0,0,0) 100%);
background: linear-gradient(135deg,  rgba(0,0,0,1) 0%,rgba(0,0,0,1) 90%,rgba(0,0,0,0) 90%,rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=1 );
	transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
0s;
}
.modal a.btn{
	margin-top:1em;
	background:rgba(255, 255, 255, 0.3);
}
.modal a.btn:hover{
	color:#000 !important;
}
.modal a.btn:before{
	
	background: -moz-linear-gradient(-45deg,  rgba(255,255,255,1) 0%, rgba(255,255,255,1) 90%, rgba(255,255,255,0) 90%, rgba(255,255,255,0) 100%);
background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 90%,rgba(255,255,255,0) 90%,rgba(255,255,255,0) 100%);
background: linear-gradient(135deg,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 90%,rgba(255,255,255,0) 90%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=1 );
	transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
0s;
}
.contentbox{
    display: inline-block;
    vertical-align: middle;
    text-align: left;
    position: relative;
    z-index:5;
    width: 39%;
    padding: 0 5% 0 5%;
    }

.contentbox.boxright{
width: 40%;
padding-top:50px;
padding-bottom:50px;
padding-right:5%;
padding-left:5%;
}
 .slide3 .spacer{
	 display: none !important;
 }
 .slide3 .contentbox.projects, .slide3 .contentbox.boxright{
	padding-left:0;
	padding-right:0;
	width:50%;
}
 .slide3 .contentbox.boxright{
padding-right:5%;
width:45%;
 }

.slide2 .contentbox.boxright{
	padding-right:0;
}
.slide2 .contentbox.boxright{
	width: 50%;
	padding-top:250px;
	padding-bottom:25px;
}
.slide4 .contentbox.boxright{
	float:right;
}
p,strong,li{
	font-size:22px;
	line-height:2.5em;
}
p a{
	display: inline-block;
	color:#000;
	text-decoration: underline;
	font-weight: normal;
}

p a:hover{
	text-decoration: none;
}
p a:after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #000;
    transition: width .3s;
}

p a:hover::after {
    width: 100%;
    transition: width .3s;
}
.slide2 p a{
	color:#fff;
	text-decoration: underline;
	font-weight: normal;
	
}
.slide2 p a:hover{
	text-decoration: none;
}
.slide2 p a:after{
	background:#fff;
	text-decoration: none;
}

h1{
	font-size:40px;
	font-weight: 900;
	color:#fff;
	padding-bottom:0.5em;
}


#fp-nav ul li a span,.fp-slidesNav ul li a span{
	background:#ccc;
}
#fp-nav ul li a span:hover,.fp-slidesNav ul li a span:hover{
	background:#000;
}
body:not(.fp-viewing-intro) .fp-slidesNav ul li a span,
body:not(.fp-viewing-intro) #fp-nav ul li a span{
	background:#fff;
}

.clr{
	clear:	both;
	float:none;
	display: table;
content: " ";
}

.slide3 img{
	width:100%;
	height:auto;
	max-width:800px;
}
.slide3 .contentbox{
	vertical-align: middle;
	display: table-cell;
}
.projects{
	text-align: center;

}
.slide2 .fp-tableCell,.slide2 .contentbox{
	vertical-align: middle;
}
.fp-controlArrow.fp-next{
	right:30px;
}
.fp-controlArrow.fp-prev{
	left:30px;
}
.scroll-downs {
  position: absolute;
  bottom: 40px;
  left: calc(50% - 35px);
width:70px;
  display: none;
}
.mousey {

  border-radius: 25px;
  opacity: 0.75;
  box-sizing: content-box;
}
.scroller {
text-align: center;
color:#000;
  animation-name: scroll;
  animation-duration: 1.8s;
  animation-timing-function: cubic-bezier(.15,.41,.69,.94);
  animation-iteration-count: infinite;
}
.scroller:before {
	content: '';
	display: inline-block;

	width: 2em;
	height: 2em;

	vertical-align:-.0625em;
	border: 5px solid currentColor;
	border-top: none;
	border-right: none;
	transform: rotate(-45deg); 
}

.slide1.fp-completely.active .scroll-downs{
	display: block;
 animation:signup-response 5s 1;
    animation-fill-mode: forwards;

    animation-delay:1.5s;
    -webkit-animation-delay:1s; /* Safari and Chrome */
    -webkit-animation-fill-mode: forwards;
opacity :0;
} 

@keyframes signup-response{
    from {opacity :0;}
    to {opacity :1;}
}

@keyframes scroll {
  0% { opacity: 0; }
  10% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(10px); opacity: 0;}
}
	.projects{
		height:50% !important;
	}
	.slide3 img{width:70% !important;}

@media only screen and (max-width: 1920px) {
	.fp-controlArrow.fp-next{
		right:30px;
	}
	.fp-controlArrow.fp-prev{
		left:30px;
	}
	body:not(.fp-viewing-intro) #logowrap{
		max-width:180px !important;
		max-height:180px !important;
	}
	p,strong,li{
		line-height:1.6em;
	}
	
}
@media only screen and (max-width: 1600px) {
	
	body:not(.fp-viewing-intro) #logowrap{
		max-width:150px !important;
		max-height:150px !important;
	}
	.slide2 .contentbox{
	padding-bottom:100px;
	}
	h1{font-size:34px;	}
	p,strong,li{font-size:18px;}
}

@media only screen and (max-width: 1400px) {
	#logowrap{
		max-width:600px;
	}
	body:not(.fp-viewing-intro) #logowrap{
		max-width:150px !important;
		max-height:150px !important;
	}
	.spacer{
	display:block;
	content:" ";
	height:150px;

	}


		
	h1{font-size:32px;	}
	p,strong,li{font-size:16px;}
	body:not(.fp-viewing-intro) .contact span{display:none;}body:not(.fp-viewing-intro) #diagonal-box{height:250px;}
}


@media only screen and (max-width: 1024px) {


}
@media only screen and (max-width: 768px) {
	.scroll-downs{
	bottom:50%;	
	}
	.mousey{
		border-color:#ccc;
	}

	.scroller:before{
		width:1em;
		height:1em;
	}
	#logowrap{
		max-width:350px;
		
	}
	body:not(.fp-viewing-intro) #logowrap{
		max-width:125px !important;
		max-height:125px !important;
	}
	.spacer{
	display:block;
	content:" ";
	height:180px;
	}
	.projects{
		height:50% !important;
	}
	.slide3 img{width:60% !important;}
	.projects .fp-tableCell{
		height: 30% !important;
	}
	
		a.btn{
		font-size:12px;
		padding:15px 10px;
		margin:0 5px 5px 0;
	}


	
	.contentbox{
		width:90% !important;
		padding-top:0;
		padding-bottom:20px;
		padding-left:15px;
		padding-righjt:15px;
		vertical-align: bottom;
	}
	
	.slide3 .contentbox{
		width:100% !important;
	 
	  }
		.contentbox.boxright{
		width: 90% !important;
		padding-left:5% !important;
		padding-right:5% !important;
		
		margin-left:0 !important;
	}
	.slide2 .fp-tableCell,.slide2 .contentbox{
	vertical-align: bottom;
	}
	.slide3 .contentbox.boxright,.slide4 .contentbox.boxright{
		position: absolute;
		bottom:0;
		left:0;
	}
	.slide3 img{
		width:70%;
		height:auto;
	}

	.slide2 .contentbox{
		padding-bottom:15px;
	}
	body:not(.fp-viewing-intro) .contact a,body:not(.fp-viewing-intro) .contact p{display: none;}
	body:not(.fp-viewing-intro) #diagonal-box{height:70px;width:auto;}
	 
	
	h1{font-size:28px;	}
	p,strong,li{font-size:14px;line-height:1.2em;}


	.slide4 .fp-controlArrow{top:45%;}
	
	
}
@media only screen and (max-width: 425px) {
	#logowrap{
		max-width:200px;
		height:auto;
		
	}
	body:not(.fp-viewing-intro) #logowrap{
		max-width:100px !important;
		max-height:100px !important;
	}
	.spacer{
	display:block;
	content:" ";
	height:120px;
	}

	.slide2 .contentbox{
		padding-top:150px;
	}
	/*.content-box{bottom:30px;text-align: left;}*/
}
 @media screen and (orientation:portrait) {
	 	.slide3 .contentbox.boxright,.slide4 .contentbox.boxright{
		position: absolute;
		bottom:0;
		left:0;
	}
	
	
	.contentbox{
		width:90% !important;
		padding-top:0;
		padding-bottom:20px;
		padding-left:15px;
		padding-righjt:15px;
		vertical-align: bottom;
	}
	.slide3 .contentbox{
		width:100% !important;
	 
	  }
	.contentbox.boxright{
			width: 90% !important;
			padding-left:5% !important;
			padding-right:5% !important;
			
			margin-left:0 !important;
		}
}
@media only screen and (max-height: 600px) {


}
@media only screen and (min-height: 1000px) and (orientation:portrait){
	.slide3 .contentbox.boxright, 
	.slide4 .contentbox.boxright{
		width:70% !important;
	}
}