/* Toegevoegde styles */
.gen {
    transition: opacity 0.15s;
}

.filtered {
    opacity: 0;
}

.filtered:not(.is-shown) a {
    pointer-events: none;
}
	
.is-shown {
    opacity: 1 !important;
}

.menublock a.is-active span,
.tagblock a.is-active span {
    opacity: 1;
}

* { /*alles*/
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    font-family: 'Playfair Display', serif;
    box-sizing: border-box;
}

body { /*alles*/
    background: white;
 }
 
body.dragscroll {
    cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

/* (Optional) Apply a "closed-hand" cursor during drag operation. */
body.dragscroll.is-dragging { 
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}

#bodywrap { /*1e rand*/
	margin: 10px;
}

.sample #wrapper {
    min-width: 100vw; 
    min-height: 100vh; 
    position: relative;
	width: 180vw;
	justify-content:center;
    align-content:center;
    align-items: center;
}

.portfolio #wrapper { /*2e rand*/
    min-width: 100vw; 
    min-height: 100vh; 
    position: relative;
	width: 300vw;
    justify-content:center;
    align-content:center;
    align-items: center;
}

#container {
}

#liner {
	display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.sample .l-grid-item { 
    padding: 20px;
    width: 33%;
    min-height: 70vh;
	display: flex;
}

.portfolio .l-grid-item { /*general grid*/
    padding: 20px;
    width: 20%;
    min-height: 70vh;
	display: flex;
}

.gen { /*tiles rand*/
    display: flex;
    position: relative;
    background: White;
}

.label-start { /*start tile*/
	padding: 20px;
	margin:20px 5px 10px 5px;
}

.logo { /*start tile logo*/
	width: 440px;
	height: 180px; 
	margin: auto;
	margin-top:60px;
}

a {
	text-decoration: none;
	color: black;
}

#bold-eelke { /*start tile logo*/
	font-family: 'Roboto', sans-serif;
    position: relative;
	font-weight: 500;
	font-size: 175px;
	letter-spacing: -6px;
	line-height:-20px;
}

#italic-tm { /*start tile logo*/
	font-family: 'Playfair Display', serif;
	font-weight: 400;
	font-style:Italic;
	font-size: 42px;
	position: absolute;
	right: 24px;
	top: 23px;
	letter-spacing:-1px;
}

.sublogo { /*start tile*/
}

#graphic-design { /*start tile*/
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: 24px;
	letter-spacing: 36px;
	text-align:center;
}

#start { /*start tile*/
    background-color: #fff;
    position: relative;
    height: auto;
    flex-direction: column;
    width: 100%;
}
#start--footer {
    position: absolute;
    bottom: 0;
}

.menublock { /*start tile black menu buttons*/
	margin:160px 100px 50px 100px;
    display: flex;
    justify-content: space-between;
    align-content:center;
    align-items: center;
}

.menublock a { /*start tile black menu buttons*/
   	display : block;
    background:black;
	font-family: 'Playfair Display', serif;
	font-weight: 400;
	font-style:Italic;
	font-size: 18px;
	text-decoration: none;
}

.menublock a img, /*start tile black menu buttons*/
.menublock a span {
    color: #fff;
    opacity: 1;
	display : block;
    transition: opacity 0.15s;
}

.menublock a span { /*start tile black menu buttons*/
    padding: 10px; 
}

.menublock a:hover img, /*start tile black menu buttons*/
.menublock a:hover span {
    opacity: 0;
}

.email { /*start tile email*/
	font-family: 'Playfair Display', serif;
	font-weight: 400;
	font-style:Italic;
	font-size: 21px;
	text-align: center;
}

.disclaimer { /*start tile disclaimer*/
	font-family: 'Roboto', sans-serif;
	font-weight: 100;
	font-size: 12px;
	letter-spacing: 8px;
	text-align:center;
	margin-top: 5%;
	margin-bottom: 3%;
}

.date { /* start tile year disclaimer*/
	font-family: 'Playfair Display', serif;
	font-weight: 400;
	font-size: 14px;
}

#js-year { /*start tile year disclaimer*/
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: 12px;
	letter-spacing: 8px;
	text-align:center;
}

.project-info { /*project tile*/
	padding: 5px;
 }

.labelhead { /*project tile label section*/
    font-family: 'Playfair Display', serif;
	font-weight: 700;
	font-size: 24px;
}

.purpose { /*project tile label section*/
	font-family: 'Playfair Display', serif;
	font-weight: 400;
	font-style:Italic;
	font-size: 18px;
}

.text { /*project tile label section*/
	font-family: 'Playfair Display', serif;
	font-weight: 400;
	font-size: 14px;
	margin-top: 15px;
}

.tagblock { /*project tile black menu buttons*/
	margin-top:10px;
    display: flex;
 	flex-direction: row;
}

.tagblock a { /*project tile black menu buttons*/
   	display : block;
    background: black;
	font-family: 'Playfair Display', serif;
	font-weight: 400;
	font-style:Italic;
	font-size: 12px;
	text-decoration: none;
	margin-right:5px;
}

.tagblock a img, /*project tile black menu buttons*/
.tagblock a span {
    color: #fff;
    opacity: 1;
	display : block;
    transition: opacity 0.15s;
}

.tagblock a span { /*project tile black menu buttons*/
    padding: 5px; 
}

.tagblock a:hover img, /*project tile black menu buttons*/
.tagblock a:hover span {
    opacity: 0;
}

.home {
}

.homeblock { /*home black menu buttons*/
	margin-top:5px;
    display: flex;
 	flex-direction: row;
	
}

.homeblock a { /*home black menu buttons*/
   	display : block;
    background: black;
	font-family: 'Playfair Display', serif;
	font-weight: 400;
	font-style:Italic;
	font-size: 12px;
	text-decoration: none;
	margin-right:5px;
}

.homeblock a img, /*home black menu buttons*/
.homeblock a span {
    color: #fff;
    opacity: 1;
	display : block;
    transition: opacity 0.15s;
}

.homeblock a span { /*home black menu buttons*/
    padding: 5px; 
}

.homeblock a:hover img, /*home black menu buttons*/
.homeblock a:hover span {
    opacity: 0;
}

.l-wrapper { /*project tile image rand*/
    background: #fff;
    max-width: 1000px;
    padding: 10px;
    overflow: hidden;
}

.project-image { /*project tile image*/
    display: flex;
    align-items: flex-start;
}

.project-image img { /*project tile image*/
    width: 100%;
}
.background { /*project tile image*/
    position: absolute;
    opacity: 0.4;
    top: -10%;
    left: 10%;
}

.foreground { /*project tile image*/
    position: relative;
}

.clearfix:after { /*project tile orientatie */
    content:"";
    display:block;
    clear:both;
}

.imageblock {
    position: absolute;
    top: 0;
    left: 0;
    width: 95%;
    height: 70%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    margin: 5% 0 0 5%;
}
.imageblock:before {
    content: " ";
	display: block;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0;
    transition: opacity 0.15s;
}
.imageblock:hover:before {
    opacity: 1;
}

.imageblock a:first-child {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.imageblock a {
    display: block;
}

.imageblock a img {
    opacity: 1;
	display : block;
}

.imageblock a:hover img {
    opacity: 0;
}

@media (max-width:800px) { /*responsive code*/
    #wrapper {
        width: auto;
        height: auto;
    }
    .l-grid-item {
        width: 100%;
    }
}


@media (min-width: 800px) { /*responsive code */
    body {
        margin: 0 20px;
    }
    .l-wrapper {
        margin: 100px auto 0;
        margin-left: calc(auto - 20px);
        padding: 8% 0 0 8%;
    }
    .project-image {
        width: 67%;
        position: relative;
    }
    .project-info {
        width: 33%;
        padding: 5% 4%;
    }
}

.hidden {
    display: none;
}

#01_06mi {
}

#02_07wl {
}

#03_27tg {
}

#04_21hv {
}

#05_13no {
}

#06_19sh {
}

#07_04ip {
}

#08_09wi {
}

#09_12fc {
}

#10_17lc {
}

#11_20td {
}

#12_08kr {
}

#14_02ow {
}

#15_15tr {
}

#16_11db {
}

#17_03wp {
}

#18_01fu {
}

#19_05im {
}

#20_28so {
}

#21_10rs {
}

#22_14kd {
}

#23_18tf {
}

#24_25fw {
}

#25_16eb{
}

#00_24lb {
}

#00_21si {
}