@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);
@import url('https://fonts.googleapis.com/css?family=Slabo+27px&display=swap');
@import url('https://fonts.googleapis.com/css?family=Pompiere&display=swap');

* {
	box-sizing: border-box;
	margin: 0em;
	padding: 0em;
	list-style-type: none;
}
html {
	font-family: 'Open Sans', sans-serif;
	font-size: 1em;
}

body {
	background-color: rgb(222, 185, 134);
}
p {
	padding: 1em;
}
.fa {
  font-family: 'FontAwesome';
  font-style: normal;
}
p.company-sub {
    color: #888888;
    font-style: italic;
    padding-top: 0;
    font-size: 12px;
}
nav {
	position: fixed;
	background-color: rgba(255,255,255,1);
	left: -13.1em;
	height: 100vh;
	padding: 2em;
	-webkit-transition: left 0.6s; /* For Safari 3.1 to 6.0 */
    transition: left 0.6s;
    font-family: 'Open Sans', sans-serif;
    font-weight: lighter;
    letter-spacing: 0.2em;
    line-height: 1.6em;
    z-index: 990;
    -webkit-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.34);
	-moz-box-shadow:    2px 2px 5px 0px rgba(50, 50, 50, 0.34);
	box-shadow:         2px 2px 5px 0px rgba(50, 50, 50, 0.34);
}
nav a {
	text-decoration: none;
	color: rgb(35,32,27);
}
nav a:hover {
	color: rgb(57,42,17);
}
.brand {
	text-align: center;
	margin-bottom: 1.5em;
}
.brand h1 {
	font-size: 1em;
	font-family: 'Pompiere', cursive;
	letter-spacing: 0.2em;
	/*color: rgb(240, 240, 242);*/
	padding-bottom: 0.1em;
	border-bottom: 1px solid rgb(240, 240, 242);
}
.brand h2 {
	font-size: 0.5em;
	/*font-family: 'Slabo 27px', serif;*/
	font-family: 'Slabo 27px', serif;
	letter-spacing: 0.2em;
	/*color: rgb(240, 240, 242);*/
	margin-top: -0.2em;
}
body > span:first-of-type {
	position: fixed;
	left: -0.2em;
	background: #fff;
	border: none;
	padding: 10px 17px;
	cursor:pointer;
	z-index: 999;
	-webkit-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.34);
	-moz-box-shadow:    2px 2px 5px 0px rgba(50, 50, 50, 0.34);
	box-shadow:         2px 2px 5px 0px rgba(50, 50, 50, 0.34);
	-webkit-transition: left 0.6s; /* For Safari 3.1 to 6.0 */
    transition: left 0.6s;
}
.menushow {
	left: 0em;
	-webkit-transition: left 0.555s; /* For Safari 3.1 to 6.0 */
    transition: left 0.555s;
}
.menubutton {
	left: 12.1em !important;
}
header {
	height: 90vh;
	width: 100%;
	padding-top: 30vh;
	background-image: url("/media/images/portfolio-header.jpg");
background-size: cover;
}
header > div {
	text-align: center;
	/*z-index: -10;*/
	width: 17em;
	position: fixed;
	left: 29%;
	position: absolute;
}
header > div > h1 {
	font-size: 2em;
	margin-left: -132px;
	font-family: 'Pompiere', cursive;
	letter-spacing: 0.2em;
	color: rgb(240, 240, 242);
/*	padding-bottom: 0.1em;
*/}
header > div > h2 {
	font-size: 1em;
	margin-left: -126px;
	font-family: 'Slabo 27px', serif;
	letter-spacing: 0.2em;
	color: rgb(240, 240, 242);
	border-top: 1px solid rgb(240, 240, 242);
	padding-top: 0.5em;
}

#bgvideo {
position: fixed;
right: 0; 
bottom: 0;
min-width: 100%; 
min-height: 100%;
width: auto; 
height: auto; 
z-index: -100;
/*background: url("/media/images/portfolio-header.jpg");
background-size: cover;*/
background-repeat: no-repeat;
opacity: 0.5;
}
main {
	background-color: rgb(255,255,255);
	padding: 2em;
	font-family: 'Slabo 27px', serif;
	color: rgb();
}
main > h1 {
	float: left;
	display: flex;
}
#tags {
	float: left;
	margin-bottom: 3em;
}
#tags ul li {
	display: inline-block;
	padding: 0.5em 1em 0em 3em;
}
#tags ul li a {
	text-decoration: none;
	font-family: 'Slabo 27px', serif;
	color: rgb(80,76,70);
}
#tags ul li a:hover {
	color: rgb(40,40,40);
}
#concepten > h2, #design > h2, #ontwikkeling > h2 {
	margin: 0em 2em 0.5em;
}
#concepten {
	clear: left;
	background-color: rgba(180,182,191,0.2);
	margin: 0em -2em;
	padding: 1em 0em;
}
#design {
	clear: left;
	background-color: rgba(180,182,191,0);
	margin: 0em -2em;
	padding: 1em 0em;
}
#ontwikkeling {
	clear: left;
	background-color: rgba(180,182,191,0.2);
	margin: 0em -2em;
	padding: 1em 0em;
}
#iam, #vaardigheden {
	clear: left;
	background-color: rgba(180,182,191,0.2);
	margin: 0em -2em;
	padding: 2em 0em;
}
#iam, #vaardigheden h1 {
	padding-left: 1em;
}
#ervaring {
	clear: left;
	background-color: rgba(180,182,191,0);
	margin: 0em -2em;
	padding: 2em 4em;
}
#vaardigheden ul li {
	display: inline-flex;
	flex-wrap: wrap;
	padding: 0.5em 3em;
}
.portfolio-items {
	display: inline-flex;
	flex-wrap: wrap;
}
.portfolio-items li {
	/*margin: 1em 3.8em;*/
}
.thumb {
	z-index: -1;
}
.second-effect .overlay {
   opacity: 0;
   overflow:visible;
   border:0px solid rgba(0,0,0,0.7);
   box-sizing:border-box;
   transition: all 0.4s ease-in-out;
}

.second-effect a.info {
   position:relative;
   top:-10px;
   opacity:0;
   transform:scale(0,0);
   transition: transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;
}

.second-effect:hover .overlay {
   opacity: 1;
   background-color: rgba(0,0,0,0.7);
}

.second-effect:hover a.info {
   opacity:1;
   transform:scale(1,1);
   transition-delay:0.3s;
}
.view {
   width: auto;
   height: auto;
   float: left;
   overflow: hidden;
   position: relative;
   cursor: pointer;
}
.view .overlay, .view .content {
   width: 100%;
   height: 100%;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view img {
   display: block;
   position: relative;
   width: 200%;
	left: -20em;
}

.overlay h1 {
	padding: 2em 0em 0em 1em;
	color: rgb(180,182,191);
	font-family: 'Slabo 27px', serif;
	font-size: 1.5em;
}
.overlay h2 {
	padding: 0em 0em 0em 1em;
	color: rgb(180,182,191);
	font-family: 'Slabo 27px', serif;
	font-size: 1.5em;
	line-height: 2em;
}
.overlay p {
	padding: 0em 0em 0em 12em;
	color: rgb(180,182,191);
	font-family: 'Slabo 27px', serif;
	font-size: 1em;
	max-width: 35em;
	display: none;
	visibility: hidden;
}
.text {
	max-width: 35em;
	text-align: justify;
}
.social {
	bottom: 0em;
	position: absolute;
	width: 100%;
	left: 0em;
}
.social li {
	padding: 0.5em 5em;
}
#facebook {
	background-color: rgba(59, 89, 152, 0.5);
	color: rgb(255,255,255);
	cursor: pointer;
}
#facebook:hover {
	background-color: rgba(59, 89, 152, 1);
}
#twitter {
	background-color: rgba(43, 123, 185, 0.5);
	color: rgb(255,255,255);
	cursor: pointer;
}
#twitter:hover {
	background-color: rgba(43, 123, 185, 1);
}
#linkedin {
	background-color: rgba(0, 119, 181, 0.5);
	color: rgb(255,255,255);
	cursor: pointer;
}
#linkedin:hover {
	background-color: rgba(0, 119, 181, 1);
}
#github {
	background-color: rgba(51, 51, 51, 0.5);
	color: rgb(255,255,255);
	cursor: pointer;
}
#github:hover {
	background-color: rgba(51, 51, 51, 1);
}
fieldset {
	border: none;
	font-family: 'Open Sans', sans-serif;
}
form {
}
input {
	padding: 1em;
	border: 1px solid rgb(200,200,200);
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	font-family: 'Slabo 27px', serif;
	font-size: 1em;
	width: 100%;
	margin-bottom: 1em;
}
textarea {
	padding: 1em;
	border: 1px solid rgb(200,200,200);
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	font-family: 'Slabo 27px', serif;
	font-size: 1em;
	width: 100%;
	height: 10em;
	margin-bottom: 1em;

}
button[type="submit"]{
	width: 100%;
	padding: 1em;
	border: 1px solid rgb(200,200,200);
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	background-color: rgb(200,200,200);
	font-size: 1.2em;
	font-family: 'Slabo 27px', serif;
}
button[type="submit"]:hover{
	width: 100%;
	padding: 1em;
	border: 1px solid rgb(150,150,150);
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	background-color: rgb(150,150,150);
	font-size: 1.2em;
	font-family: 'Slabo 27px', serif;
	transition: all 0.2s;
}
label {
	display: none;
	visibility: hidden;
}
address {
	display: block;
	-webkit-border-radius: 14px;
	-moz-border-radius: 14px;
	border-radius: 14px;
	border: 1px solid rgb(35,32,27);
	float: right;
	max-width: 15em;
	display: none;
	visibility: hidden;
}
address a:first-of-type {
	font-size: 2em;
	margin-left: -132px;
	font-family: 'Pompiere', cursive;
	letter-spacing: 0.2em;
	text-decoration: none;
	color: rgb(35,32,27);
	text-transform: uppercase;
}
@media (min-width: 740px) {
	header > div {
		left: 40%;
	}
	#iam, #vaardigheden h1 {
		padding-left: 2em;
	}
	#iam, #vaardigheden {
		clear: left;
		background-color: rgba(180,182,191,0.2);
		margin: 0em -2em;
		padding: 2em 4em;
	}
	button[type="submit"]{
		margin-bottom: 2em;
	}
	main {
		padding-left: 2em;
	}
	form {
		margin-left: 1em;
	}
	.view img {
   display: block;
   position: relative;
   width: 150%;
	left: -22em;
	}
	.overlay h1 {	
		padding: 2em 0em 0em 8em;
	}
	.overlay h2 {
		padding: 0em 0em 0em 8em;
	}
	.overlay p {
		display: block;
		visibility: visible;
	}
}
@media (min-width: 1000px) {
	header > div {
		left: 43%;
	}
	input {
		width: 40%;
		margin-right: 60%;
	}
	textarea {
		width: 60%;
		margin-right: 40%;
	}
	button[type="submit"] {
		width: 60%;
	}
	button[type="submit"]:hover {
		width: 60%;
	}
	.view img {
   display: block;
   position: relative;
   width: 100%;
	left: 0em;
	}
	.overlay h1 {
		padding: 2em 0em 0em 8em;
	}
}