@import url(http://fonts.googleapis.com/css?family=Raleway:100,200,300,400,700,800,900);
@import url(http://fonts.googleapis.com/css?family=Volkhov:400,400italic);
*,
*:before,
*:after {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
			box-sizing: border-box;
}
html {
	height: 100%;
}
body {
	height: 100%;
	color: #333;
	background: #ffffff;
	font-family: 'Raleway', Helvetica, Arial, sans-serif;
	font-size: 15px;
	line-height: 25px;
	text-align: center;
	margin:0;
}
::selection {
	background: #1a1a1a;
	color: #ffffff;
}
::-moz-selection {
	background: #1a1a1a;
	color: #ffffff;
}
p {
	margin-bottom: 25px;
	line-height: 22px;
}
h1,h2,h3,h4,h5,h6 {
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
h1 {
	font-size: 24px;
	line-height: 30px;
}
h2 {
	font-size: 18px;
	line-height: 30px;
	padding-top: 12px;
}
h3 {
	font-size: 14px;
	margin-top: 40px;
	line-height: 25px;
}
h4 {
	font-size: 15px;
	line-height: 25px;
}
h5 {
	font-size: 14px;
	line-height: 25px;
}
h6 {
	font-size: 12px;
	line-height: 25px;
}
b,strong {
	font-weight: 900;
}
em {
	font-style: italic;
}
small {
	font-size: 80%;
}
ol,ul {
	line-height: 25px;
	margin-bottom: 25px;
  margin-left: -24px;
  font-size: 15px;
}
input, textarea {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
}
.text-left {
	text-align: left;
}
.text-right {
	text-align: right;
}
.text-center {
	text-align: center;
}
a,a:hover,a:focus {
	text-decoration: none;
	outline: 0;
}
a {
	color: #e3481e;
}
a:hover {
	color: #84370c !important;
}
a img {
	text-decoration: none;
	vertical-align: bottom;
}
@media only screen and (max-height: 800px) {
	h1 {
		line-height: 20px;
	}
	h2 {
		line-height: 20px;
		padding-top: 6px;
	}
	h3 {
		margin-top: 20px;
	}
	p {
		margin-bottom: 5px;
		line-height: 20px;
	}
}

#imagelightbox {
    position: fixed;
    z-index: 9999; 
    -ms-touch-action: none;
    touch-action: none;
}

/*header*/
.header {
	position:fixed;
	top:25px;
	left:25px;
	z-index:1;
}
.header .menu {
	background:rgba(0,0,0,0.4);
	padding:0 40px;
	margin: 20px 0 0 20px;
	border-radius:30px;
	transition: all 0.5s ease;
}
.header .menu a {
	display:inline-block;
	padding:20px;
	font-weight:bold;
	color:#ffffff;
	text-transform: uppercase;
}
.header .menu a.active {
	color:#ffffff;
}

/*hamburger*/
.hamburger {
	position:absolute;
	top:20px;
	right:20px;
	width: 50px;
	height: 50px;
	display:none;
	cursor:pointer;
}
.hamburger span {
	display: block;
	width: 38px;
	height: 6px;
	margin-bottom: 6px;
	position: relative;
	background: #fff;
	border-radius: 4px;
	z-index: 1;
	transform-origin: 4px 0px;
	transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
				background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
				opacity 0.55s ease;
}
.hamburger span:first-child {
	transform-origin: 0% 0%;
}
.hamburger span:nth-last-child(2) {
	transform-origin: 0% 100%;
}
.hamburger.close span {
	opacity: 1;
	transform: rotate(45deg) translate(4px, 1px);
	background: #FFF;
  width: 40px !important;
  height: 6px !important;
}

.hamburger.close span:nth-last-child(2) {
	opacity: 0;
	transform: rotate(0deg) scale(0.2, 0.2);
}
.hamburger.close span:nth-last-child(1) {
	transform: rotate(-45deg) translate(-6px, 1px);	
}

@media only screen and (max-width: 950px) {
	.header {
		top:0;
		left:0;
		right:0;
	}
	.header .menu {
		display:none;
		height:100%;
		position:fixed;
		width: 100%;
		margin:0;
		border-radius:0;
		padding:40px 0;
	}
	.header .menu a {
		display:block;
		font-size:1.5em;
		line-height:1em;
      margin-top: 40px;
	}
	.hamburger {
		display:block;
	}
}



/*lint*/
.lint {
	height:100%;
	position:fixed;
	width:25000px;
	bottom: 0;
	left:0;
}
.page {
	position:relative;
	height:100%;
	float:left;
	transition: all 0.5s ease;
}
@media only screen and (max-width: 950px) {
	.lint {
		width:100%;
		height:none;
		position:relative;
		padding:0 15px;
	}
	.page {
		clear:both;
		width:100%;
		float:none;
		height:auto;
		overflow:hidden;
	}
}

/*homepage*/
.homepage {
	overflow:hidden;
	height:100%;
/*	
	height:100vh;
	background-repeat: no-repeat;
	-webkit-backgound-size: cover;
    -o-backgound-size: cover;
    -moz-backgound-size: cover;	
	background-size: cover;
	background-attachment: fixed;
	background-position: center top;	
*/	
}
.homepage .background {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:-1;
	object-fit: cover;
}
.homepage .border {
	position:relative;
	width:50%;
	height:100%;
	border:18px solid #FFF;
}
.homepage .pullright {
	position:absolute;
	top:0;
	right:25px;
	height:100%;
	padding:25px 0;
}
.homepage  .canvas {
	background-color:#FFF;
	width:478px;
	height:100%;
}
.homepage  .titleimage {
	margin-top:25%;
	margin-left:-10px !important;
}
.homepage  .content {
	margin-top:10%;
	line-height:34px;
  padding: 0px 50px 0px 50px !important;
}

@media only screen and (max-width: 1023px) {
	.homepage {
		height:auto;
	}
    .homepage .border {
		display:none;
	}
}
@media only screen and (max-width: 950px) {
	.homepage .background {
		padding: 0 15px;
	}
	.homepage .pullright {
		position:relative;
		width:100%;
		right:0;
		margin-top:350px;
	}
	.homepage  .canvas {
		width:100%;
		margin:auto;
	}
	.homepage  .titleimage {
		margin-left:0;
		max-width:90%;
	}
	.homepage  .content  img {
		max-width:90%;
	}
}
@media only screen and (max-height: 800px) {
	.homepage  .titleimage {
		margin-top:50px;
      margin-left: 10px;
	}
	.homepage  .content {
		margin-top:5px;
		line-height:16px;
	}
}

/*gallery*/
.gallery {
	position:relative;
	width:700px;
	background-color: #FFF;
}
.gallery .imagebox {
	position:relative;
	width:350px;
	height: 33.3%;
	float:left;
}
.gallery .imagebox:last-child {
	height: 33.4%;
}
.gallery .imagebox img {
	width:100%;
	height:100%;
	object-fit: cover;
}
.gallery.cnt1,
.gallery.cnt2,
.gallery.cnt3 {
	width:350px;
}


.project-hover {
	cursor:pointer;
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	color: rgba(255,255,255,0.0);
	background: rgba(0,0,0,0.0);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 20px;
	text-transform: uppercase;
	visibility: visible;
	-webkit-transition: all .3s ease-in-out;
	   -moz-transition: all .3s ease-in-out;
		-ms-transition: all .3s ease-in-out;
		 -o-transition: all .3s ease-in-out;
			transition: all .3s ease-in-out;
}

.gallery .imagebox a:hover > .project-hover {
	color: rgba(255,255,255,1);
	background: rgba(0,0,0,0.5);
	-webkit-transition: all .3s ease-in-out;
	   -moz-transition: all .3s ease-in-out;
		-ms-transition: all .3s ease-in-out;
		 -o-transition: all .3s ease-in-out;
			transition: all .3s ease-in-out;
}

.project-hover span {
	cursor:pointer;
	display: inline-block;
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
}

.project-hover b {
	color: rgba(255,255,255,0.0);
	font-family: 'Volkhov', Georgia, Times, serif;
	font-size: 14px;
	font-style: italic;
	font-weight: normal;
	letter-spacing: 0;
	text-transform: none;
	padding-top: 0;
	display: inline-block;
	-webkit-transition: all .3s ease-in-out;
	   -moz-transition: all .3s ease-in-out;
		-ms-transition: all .3s ease-in-out;
		 -o-transition: all .3s ease-in-out;
			transition: all .3s ease-in-out;
}

.project-hover span.plus {
	font-size: 120px;
	font-weight: 100;
}

.gallery .imagebox a:hover > .project-hover b {
	color: rgba(255,255,255,1);
	-webkit-transition: all .3s ease-in-out;
	   -moz-transition: all .3s ease-in-out;
		-ms-transition: all .3s ease-in-out;
		 -o-transition: all .3s ease-in-out;
			transition: all .3s ease-in-out;
}
@media only screen and (max-width: 950px) {
	.gallery {
		width:100%;
		margin-right:0;
	}
	.gallery .imagebox,
	.gallery .imagebox:last-child {
		width:50%;
		height: 350px
	}
	.gallery.cnt1,
	.gallery.cnt2,
	.gallery.cnt3 {
		width:100%;
		margin-right:0;
	}
	.gallery.cnt1 .imagebox,
	.gallery.cnt1 .imagebox:last-child,
	.gallery.cnt2 .imagebox,
	.gallery.cnt2 .imagebox:last-child,
	.gallery.cnt3 .imagebox,
	.gallery.cnt4 .imagebox:last-child {
		width:100%;
	}	
}
@media only screen and (max-width: 400px) {
	.gallery .imagebox,
	.gallery .imagebox:last-child {
		width:100%;
	}
}

/*columns*/
.page .column {
	float:left;
}
.page .column1 {
}
.page .column2 {
	width:0;
	overflow:hidden;
	webkit-transition: width .3s; /* Safari */
    transition: width .3s;	
}
.page .bottom {
	position:absolute;
	bottom:25px;
	right:25px;
}
.page a.more {
	position:relative;
	z-index:1;
	display:inline-block;
	width:75px;
	height:75px;
	text-indent:-9999px;
	overflow:hidden;
	cursor:pointer;
	background-image: url("../images/pijl_oranje.png");
	transition: .5s ease-in-out;
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
}
.page a.more:hover {
	background-image: url("../images/pijl_oranje_hover.png");
}
.page a.more.groen {
	background-image: url("../images/pijl_groen.png");
}
.page a.more.groen:hover {
	background-image: url("../images/pijl_groen_hover.png");
}
.page a.more.rotate {
	transform: rotate(180deg);
	-webkit-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
}

@media only screen and (max-width: 950px) {
	.page .column {
		width:100%;
	}	
	.page .column {
		float:none;
	}
	
	.mobile-closed .column {
		padding-bottom:30px;
	}	
	.mobile-closed .column2 {
		height:0;
	}
	.mobile-closed  .bottom {
		bottom:20px;
		right:0;
		left:0;
	}
	.mobile-closed a.more {
		transform: rotate(90deg);
		-webkit-transform:rotate(90deg);
		-moz-transform:rotate(90deg);
	}	
	.mobile-closed a.more.rotate {
		transform: rotate(270deg);
		-webkit-transform:rotate(270deg);
		-moz-transform:rotate(270deg);
	}	
	
	.mobile-open a.more {
		display:none;
	}
	.mobile-open .column1 .content {
		padding-bottom:0;
	}
	.mobile-open .column2 .content {
		padding-top:0;
	}
}


/*kleuren*/
.bg-wit {
	background-color:#FFF;
}
.bg-oranje {
	background-color:#81b8bf;
	color:#FFF;
}
.bg-oranje a {
	color:#FFF;
}
.bg-oranje a.more {
	background-image: url("../images/pijl_wit.png") !important;
}
.bg-oranje a.more:hover {
	background-image: url("../images/pijl_wit_hover.png") !important;
}
.bg-groen {
	background-color:#99cc99;
	color:#FFF;
}
.bg-groen a {
	color:#FFF;
}
.bg-groen a.more {
	background-image: url("../images/pijl_wit.png") !important;
}
.bg-groen a.more:hover {
	background-image: url("../images/pijl_wit_hover.png") !important;
}

/*whatwedo*/
.whatwedo {
}
.whatwedo .content {
	position:relative;
	width:400px;
	padding: 50px 60px 0px 50px;
	text-align:left;
  margin-top: 50px;
}
/*.whatwedo a.more {
	position:relative;
	background:rgba(255,255,255,0.4);
	width:60px;
	height:60px;
	line-height:60px;
	border-radius:50%;
	cursor:pointer;
	z-index:1;
}*/
@media only screen and (max-width: 950px) {
	.whatwedo .content {
		width:100%;
	}
}
@media only screen and (max-height: 800px) {
	.whatwedo .content {
		padding-top:10px;
      padding-bottom: 100px;
	}
}


/*aboutme*/
.aboutme {
	background-color:#FFF;
	width:500px;
}
.aboutme .image {
	margin-top:50px;
}
.aboutme .content {
	height:50%;
	text-align:left;
	padding:0 18%;
	font-size:14px;
	line-height: 20px;
}
.aboutme .social {
	text-align:left;
	padding:20px 18% 0px 18%;
}
.aboutme .social a {
	font-size:30px;
	color: #333;
	margin-right:10px;
}
@media only screen and (max-width: 950px) {
	.aboutme {
		width:100%;
	}
}
@media only screen and (max-height: 800px) {
	.aboutme .image {
		margin-top:10px;
	}
}

/*workfor*/
.workfor {
	background-color:#FFF;
}
.workfor .content {
	float:left;
	width:290px;
	padding: 10% 25% 20% 5%;
	text-align:left;
	margin-top: 75px;
}
@media only screen and (max-height: 800px) {
	.workfor .content {
		width:90%;
		padding-top:10px;
	}
}

/*contact*/
.contact {
}
.contact .padding {
	width:400px;
	margin-top:50px;
	padding:50px 40px;
}
.contact .formel {
	width: 100%;
    height: 40px;
    display: block;
    border: 2px solid #ffffff;
    background: #ffffff;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 15px;
    padding-left: 6px;
    border-radius: 0;
    margin: 0 0 10px 0;
  color: #84370c !important;
}
.contact textarea.formel  {
    padding-top: 9px;
    overflow: auto;
    vertical-align: top;
    resize: none;
	height: 140px;
}
.contact .sendbutton input {
    padding: 11px 12px 11px;
	background: transparent;
    color: #FFF;
    border: 2px solid #FFF;
	display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
	border-radius: 0;
    margin: 25px 5px;
	cursor:pointer;
}
.contact .sendbutton input:hover  {
    background:rgba(255,255,255,0.2);
}
.contact input.error,
.contact textarea.error {
	background:#E9E9E9;
}
@media only screen and (max-width: 950px) {
	.contact .padding {
		width:100%;
	}
}
@media only screen and (max-height: 800px) {
	.contact .padding {
		margin-top:10px;
	}
}

/*fullimage*/
.fullimage img {
	width:700px;
	height:100%;
	object-fit: cover;
}
@media only screen and (max-width: 950px) {
	.fullimage img {
		width:100%;
	}
}

/*modal*/
.modal-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.4);
	z-index: 9999;
	display:none;
}
.modal {
	width: 460px;
	background: #fff;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-left: -230px;
	z-index: 1000;
	-webkit-box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.2);
	border: 0;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 40px 0 70px 0;
	text-align: center;
	height: 228px;
	margin-top: -114px;
}
.modal div.modal-close {
	color: #b2b2b2;
	cursor: pointer;
}
.modal div.modal-close:hover {
	color: #333;
}


/*modal*/
.popup-container .modal {
	top: 3%;
	height: 80%;
	margin-top:0;
	padding-top:0;
	max-width: 600px;
	width: 70%;
}
.popup-container #modalContent {
	height:100%;
}

.popup-container .scroll {
	height:100%;
	overflow-y:scroll;
	text-align:left;
	padding:0 10px;
}