@font-face {
  font-family: 'Cabin';
  font-style: normal;
  font-weight: 400;
  src: local('Cabin Regular'), local('Cabin-Regular'), url(fonts/cabin-regular.woff2) format('woff2'), url(fonts/cabin-regular.woff) format('woff');
}



html {
  	box-sizing: border-box;
	font-family: 'Cabin', sans-serif;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: subpixel-antialiased;
}

*, *:before, *:after {
  	box-sizing: inherit;
}

header {
	height: 100px;
	background-color: #fff;
	position: fixed;
	z-index: 999;
	width: 100vw;
	top: 0px;
	border-bottom: 1px solid #ccc;
}

header .logo {
	padding: 20px 0px 0px 10px;
    font-size: 17px;
    color: white;
    display: block;
    text-decoration: none;
    text-indent: -9999px;
    background-image: url("../images/logo.svg");
    background-size: cover;

    width: 280px;
    height: 90px;

}

header .favicon {
	width: 50px;
	height: 49px;
	display: none;
	background-size: cover;
	background-image: url("../images/favicon.png");
}
@media (max-width: 668px) {
	header {
		height: 50px;
	}

	header .logo {
		display: none;
	}
	header .favicon {
		display: block;
	}

}



.container {
	width:960px;
	margin: 0px auto 0px auto;
}

@media (max-width: 961px) {
	.container {
		width: 100%;
	}
}

#menu ul{
	position: relative;
    float: right;

}
#menu li{
    float: left;
	height: 99px;
    border-left: 1px solid #000;
}

#menu li:last-child {
    border-right: 1px solid #000;

}
#menu .contact {
	background-color: #fff !important;
}

#menu li a {
    height: inherit;
    width: 100px;
    display: block;
    padding-top: 37px;
	text-align: center;    
    
    text-decoration: none;
    font-size: 20px;
    transition: background .5s ease-in-out;
}

@media (max-width: 668px) {
	#menu li{
		height: 50px;
	}
	#menu li a {
	    padding-top: 13px;		
	}
}



@media (max-width: 415px) {
	#menu li a{
		width: 83px;
	}

}

#menu li a:hover{
    background: #ccc;
    transition: background .5s ease-in-out;
    }

#menu .active a{
    background-color: red;
    background: #ccc;
    }



.head {
	margin-top: 100px;
	width: 100%;
	height: 540px;
	height: 65vh;
	background-image: url("../images/head.jpg");
	background-position: center;
	background-size: cover;
}

@media (max-width: 668px) {
	.head {
		margin-top: 50px;
	}
}

/* NAsty code: ; */
@media (max-width: 500px) {
	.head {
		height: 60vh;
		background-image: url("../images/head-500.jpg");
	}
}

.werk {
	background-position: center;
	background-size: cover;	
}



.text,
.intro {
	margin-top: 50px;
}
.intro {
	width: 66%;
}
@media (max-width: 1000px) {
	.intro {
		margin-left: auto;
		margin-right: auto;
		width: 95%;

	}
}

.text p,
.intro p {
	margin-top: 10px;
	line-height: 1.3;	
}
.intro hr {
	margin-top: 28px;
	margin-bottom: 28px;
	display: none;
}

.text {
	margin-bottom: 50px;

}
.text h2 {
	margin-top: 2px;
}

hr {
	border: 0px solid black;
	height: 1px;
	background-color: #629db2;
}


h1 {
	font-size: 30px;
	line-height: 1.2;	
}

h2 {
	font-size: 22px;
	line-height: 1.2;	
}

h3 {
	font-size: 20px;
	line-height: 1.2;	
}

h4 {
	font-size: 16px;
}

span,
ul,
p{
	font-size: 16px;
	line-height: 1.2;	
}

a {
	color: black;
}

.button {
    display: inline-block;
    border: 0px;
    color: white;
    font-size: 16px;
    font-weight: normal;
    margin: 5px 5px 5px 0px;
    padding: 8px;
    border-radius: 3px;
    text-decoration: none;
    transition: background-color .5s ease-in-out;
    cursor: pointer;
    background-position: center left;
    background-repeat:no-repeat; 	
}

.button:hover {
    background-color: #302D2B;
    color: white;	
}

.duo {
	min-height: 290px;

	background-repeat: no-repeat;
}
.duo:nth-child(2n+0) {
	background-position: left bottom;
}
.duo:nth-child(2n+1) {
	background-position: right bottom;
}

.duo h2,
.duo p {
	width: 500px;
}

@media (max-width: 750px) {
	.duo {
		width: 100%;
	}

	.duo h2,
	.duo p {
		width: 100%;
		text-align: center;
	}	

	.duo:nth-child(2n+0),
	.duo:nth-child(2n+1) {
		background-position: center top;
	}

}


.duo:nth-child(2n+1) h2,
.duo:nth-child(2n+1) p {/*eerste*/
	margin-right: 250px;
}

.duo:nth-child(2n+0) h2,
.duo:nth-child(2n+0) p {/*2nd*/
	margin-left: 250px;
}

@media (max-width: 750px) {
	.duo:nth-child(2n+1) h2,
	.duo:nth-child(2n+1) p {/*eerste*/
		margin-right: 0px;
	}

	.duo:nth-child(2n+0) h2,
	.duo:nth-child(2n+0) p {/*2nd*/
		margin-left: 0px;
	}

}


.duo h2 {
	padding-top: 100px;
}

@media (max-width: 750px) {
	.duo h2 {
		padding-top: 350px;
	}
}

.clear {
	clear: both;
}
.portfolio h1,
.portfolio h2 {
	margin-bottom: 8px;
}

.portfolio {
	background-color: #fff;
	background-position: top center;
	width: 100%;
	margin-top: 25px;
	margin-bottom: 80px;

	position: relative;
}

.werk {
	margin-top: 0px;
}




.chart .container,
.technical-skills .container,
.portfolio .container {
	width: 960px;
	padding-top: 50px;

}
@media (max-width: 1000px) {
	.chart .container,
	.technical-skills .container,
	.portfolio .container {
		width: 650px;
	}
}
@media (max-width: 750px) {
	.chart .container,
	.technical-skills .container,
	.portfolio .container {
		width: 100%;
	}
}

@media (max-width: 670px) {
	.portfolio .thumbnail,
	.portfolio .container{
		width: 95%;
	}
}


.thumbnail {
	display: inline-block;
	text-align: left;
	margin-right: 54px;
	margin-top: 25px;
	margin-bottom: 25px;
	width: 272px;

}

.thumbnail img {
	width: 272px;
	height: 171px;
}
@media (max-width: 590px) {
	.portfolio img {
		width: 100%;
		height: 100%;

	}
}


.thumbnail a {
	text-decoration: none;
}
.thumbnail h3 {
	margin-top: 11px;
}

.thumbnail p,
.thumbnail h4 {
	margin-top: 3px;
}

.portfolio .container .thumbnail:nth-child(3n+1){
	margin-right: 0px;
}

@media (max-width: 1000px) {
	.portfolio .container .thumbnail:nth-child(3n+1){
		margin-right: 45px;
	}
	.portfolio .container .thumbnail:nth-child(2n+1){
		margin-right: 0px;
	}
}

@media (max-width: 670px) {
	.portfolio .container .thumbnail{
		margin-right: 0px !important;
	}
}




.contact,
.about {
	background-color: #ccc;
	background-position: top center;	
	background-image:  url("../images/grey-bg.svg");
	background-size: 50%;
}

.contact .image,
.about .image {
	width: 605px;
	height: 80vh;
	background-image: url("../images/about.jpg");
	background-size: cover;
	background-position: center;
}

.about .text {
	width: 31%;
	float: right;
}

.contact #map {

	width: 605px;
	width: 66%;

	height: 80vh;	
}

.contact #map,
.contact .image {
	float: right;
}

.contact .text {
	width: 31%;
	height: 80vh;
	margin-bottom: 0px;
}

.contact .text h1 {
	padding-top: 50px;

}
.contact{
	padding-bottom: 0px !important;
}

.contact .at {
	font-family: sans-serif;
}


@media (max-width: 960px) {

	.contact .image,
	.about .image {
		width: 50vw;
	}	

	.about .text {
		width: 45%;
		margin-right: 15px;
	}
	.contact #map {
		width: 48vw;
	}
	.contact .text {
		margin-left: 15px;
		width: 55%;
	}

}


@media (max-width: 670px) {
	.about .image {
		float: none;
		width: 100%;
	}

	.contact #map,
	.contact .text {
		height: 100vh;
	}


	.contact .text,
	.about .text {
		width: 95%;
		float: none;
		margin-left: 15px;
	}


	.about .text h1 {
		padding-top: 50px;
	}



}