*{
    margin: 0px;
    padding: 0px;
}

:root{
	--color1: #FFF7E7;
	--color2: #000;
	--color3: #000;
	--color4: #FFF;
	--radius: 0px;
}

body{
    overflow: hidden;
}

body.loading .about__button,
body.loading .role{
	opacity: 0;
	margin: -20px 0px 0px;
	-webkit-transition: opacity 0.3s ease-out, margin 0.3s ease-out;
    -moz-transition: opacity 0.3s ease-out, margin 0.3s ease-out;
    -ms-transition: opacity 0.3s ease-out, margin 0.3s ease-out;
    -o-transition: opacity 0.3s ease-out, margin 0.3s ease-out;
	pointer-events: none;
}

body .about__button,
body .role{
	opacity: 1;
	margin: 0px 0px 0px;
	-webkit-transition: opacity 0.3s ease-out, margin 0.3s ease-out;
    -moz-transition: opacity 0.3s ease-out, margin 0.3s ease-out;
    -ms-transition: opacity 0.3s ease-out, margin 0.3s ease-out;
    -o-transition: opacity 0.3s ease-out, margin 0.3s ease-out;
	transition-delay: 0s;
	pointer-events: all;
}

@media screen and (min-width: 900px){
.about__button.fade,
	.role.fade{
		opacity: 0;
		margin: -20px 0px 0px;
		-webkit-transition: opacity 0.3s ease-out, margin 0.3s ease-out;
		-moz-transition: opacity 0.3s ease-out, margin 0.3s ease-out;
		-ms-transition: opacity 0.3s ease-out, margin 0.3s ease-out;
		-o-transition: opacity 0.3s ease-out, margin 0.3s ease-out;
		pointer-events: none;
	}
}

.overlay{
	position: fixed;
	background-image: url(/img/overlay.png);
	background-repeat: repeat;
	width: 100%;
	height: 100%;
	pointer-events: none;
	opacity: 0.03;
	z-index: 9;
}

/* TRANSITION  TRANSITION  TRANSITION  TRANSITION  TRANSITION */
/* TRANSITION  TRANSITION  TRANSITION  TRANSITION  TRANSITION */

body.home .app{
	background-color: var(--color1);
	
	-webkit-transition: background 0.5s ease-out;
    -moz-transition: background 0.5s ease-out;
    -ms-transition: background 0.5s ease-out;
    -o-transition: background 0.5s ease-out;
	transition-delay: 1s;
}

body.home .app .work__item{
	opacity: 1;
	-webkit-transition: opacity 0.3s ease-out;
    -moz-transition: opacity 0.3s ease-out;
    -ms-transition: opacity 0.3s ease-out;
    -o-transition: opacity 0.3s ease-out;
	transition-delay: 0s;
}

body.home canvas{
	opacity: 1;
	-webkit-transition: opacity 0.3s ease-out;
    -moz-transition: opacity 0.3s ease-out;
    -ms-transition: opacity 0.3s ease-out;
    -o-transition: opacity 0.3s ease-out;
	transition-delay: 0s;
}

/* TO HOME */

body.projects.transition-to-home{
	background: var(--color1);
	-webkit-transition: background 0.5s ease-out;
    -moz-transition: background 0.5s ease-out;
    -ms-transition: background 0.5s ease-out;
    -o-transition: background 0.5s ease-out;
	transition-delay: 0.5s;
}

body.projects{
	background-color: var(--color4);
	overflow: auto;
	overflow-x: hidden;
	
	-ms-overflow-style: none;
  	scrollbar-width: none;
	
	-webkit-transition: background 0.5s ease-out;
    -moz-transition: background 0.5s ease-out;
    -ms-transition: background 0.5s ease-out;
    -o-transition: background 0.5s ease-out;
	transition-delay: 0.5s;
}

body.projects::-webkit-scrollbar {
    display: none;
}

body.projects.transition-to-home .project{
	opacity: 0;
	-webkit-transition: opacity 0.5s ease-out;
    -moz-transition: opacity 0.5s ease-out;
    -ms-transition: opacity 0.5s ease-out;
    -o-transition: opacity 0.5s ease-out;
	transition-delay: 0s;
}

body.projects .project{
	opacity: 1;
	-webkit-transition: opacity 0.5s ease-out;
    -moz-transition: opacity 0.5s ease-out;
    -ms-transition: opacity 0.5s ease-out;
    -o-transition: opacity 0.5s ease-out;
	transition-delay: 0s;
}

/* FROM PROJECT TO PROJECT */

body.transition .project{
	opacity: 0;
	-webkit-transition: opacity 0.5s ease-out;
    -moz-transition: opacity 0.5s ease-out;
    -ms-transition: opacity 0.5s ease-out;
    -o-transition: opacity 0.5s ease-out;
	transition-delay: 0s;
}

body .project{
	opacity: 1;
	-webkit-transition: opacity 0.5s ease-out;
    -moz-transition: opacity 0.5s ease-out;
    -ms-transition: opacity 0.5s ease-out;
    -o-transition: opacity 0.5s ease-out;
	transition-delay: 0s;
}

/* FONTS  FONTS  FONTS  FONTS  FONTS */
/* FONTS  FONTS  FONTS  FONTS  FONTS */

@font-face {
    font-family: 'hireme';
    src: url('hireme.woff2') format('woff2'),
         url('hireme.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'lemure';
    src: url('LeMurmure-Regular.woff2') format('woff2'),
         url('LeMurmure-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* CURSOR  CURSOR  CURSOR  CURSOR  CURSOR */
/* CURSOR  CURSOR  CURSOR  CURSOR  CURSOR */

.work__item:hover~.cursor{
	mix-blend-mode: normal!important;
}

iframe:hover~.cursor{
	display: none;
}

#cursor {
	position: fixed;
	z-index: 99;
	left: 0px;
	top: 0px;
	pointer-events: none;
	will-change: transform;
	/*mix-blend-mode: difference;*/
}

@media (hover: hover) and (pointer: fine) {
	.cursor__circle{
		width: 40px;
		height: 40px;
		margin-top: -50%;
		margin-left: -50%;
		border-radius: 50%;
		border: solid 1px var(--color2);
		
		transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1),
		background-color 0.3s cubic-bezier(0.25, 1, 0.5, 1),
		border-color 0.3s cubic-bezier(0.25, 1, 0.5, 1),
		width 0.3s cubic-bezier(0.25, 1, 0.5, 1),
		height 0.3s cubic-bezier(0.25, 1, 0.5, 1);
	}
	
	body.projects .cursor__circle{
		border: solid 1px var(--color2);
	}
	
	body.open-about .cursor__circle{
		border: solid 1px var(--color1)!important;
	}

	#cursor.arrow{
		mix-blend-mode: normal;
	}
  
	#cursor.arrow .cursor__circle{
		width: 68px;
		height: 68px;
		background-color: var(--color2);
		border-color: transparent;	
	}
	
	body.open-about #cursor.arrow .cursor__circle{
		background-color: var(--color1)!important;
	}
	
	#cursor.shrink .cursor__circle{
		width: 0px;
		height: 0px;
		background-color: var(--color2);
		border-color: transparent;	
	}
	
	body.open-about #cursor.shrink .cursor__circle{
		background-color: var(--color1);
	}

	#cursor.arrow::after{
		content: 'open';
		position: absolute;
		left: -20%;
		top: -20%;
		width: 40%;
		height: 40%;
		
		font-family: sofia-pro, sans-serif;
		font-weight: 300;
		font-style: normal;
		text-align: center;
		font-size: 12px;
		line-height: 12px;
		color: var(--color1);

	}
	
	#cursor.subtle .cursor__circle{
		opacity: 0.16;
	}

	#cursor.overlay .cursor__circle{
		width: 48px;
		height: 48px;
		background-color: rgba(227, 222, 193, 0.0);
		border-color: transparent;
	}
}

/* BUTTON  BUTTON  BUTTON  BUTTON  BUTTON */
/* BUTTON  BUTTON  BUTTON  BUTTON  BUTTON */

.about__button{
	position: fixed;
	top: 30px;
	right: 6%;

	border-radius: 50px;
	padding: 10px 20px 15px 20px;

	border: 1px solid var(--color2);
	
	-webkit-transition: opacity 0.2s ease-out;
    -moz-transition: opacity 0.2s ease-out;
    -ms-transition: opacity 0.2s ease-out;
    -o-transition: opacity 0.2s ease-out;
	
	font-family: sofia-pro, sans-serif;
	font-weight: 300;
	color: var(--color2);
	font-style: normal;
	text-align: center;
	font-size: 13px;
	text-decoration: none;
}

body.projects .about__button{
	border: 1px solid var(--color1);
	color: var(--color1);
}

body.projects.transition-to-home .button__wrapper{
	top: 10px;
	opacity: 0;
	
	-webkit-transition: opacity 0.3s ease-out, top 0.3s ease-out;
    -moz-transition: opacity 0.3s ease-out, top 0.3s ease-out;
    -ms-transition: opacity 0.3s ease-out, top 0.3s ease-out;
    -o-transition: opacity 0.3s ease-out, top 0.3s ease-out;
	transition-delay: 0s;
}

.button__wrapper{
	position: fixed;
	top: 30px;
	left: 6%;
	
	z-index: 99;
	opacity: 1;
}

.back__button,
.next__button,
.close{
	float: left;
	border-radius: 50px;
	padding: 10px 20px 15px 20px;

	border: 1px solid var(--color2);
	
	-webkit-transition: opacity 0.2s ease-out;
    -moz-transition: opacity 0.2s ease-out;
    -ms-transition: opacity 0.2s ease-out;
    -o-transition: opacity 0.2s ease-out;
	
	font-family: sofia-pro, sans-serif;
	font-weight: 300;
	color: var(--color2);
	font-style: normal;
	text-align: center;
	font-size: 13px;
	text-decoration: none;
}

.back__button span,
.next__button span{
	display: none;
}

.next__button{
	margin-left: 15px;
}

body.projects .back__button,
body.projects .next__button,
body.projects .about__button{
	border: 1px solid var(--color2);
	color: var(--color2);
}

body.open-about .close{
	border: 1px solid var(--color1);
	color: var(--color1);
}

.about__button:hover{
	background-color: var(--color2);
	color: var(--color1);
}

body.projects .back__button:hover,
body.projects .next__button:hover,
body.projects .about__button:hover{
	background-color: var(--color2);
	color: var(--color4);
	cursor: pointer!important;
}

body.open-about .close:hover{
	background-color: var(--color1);
	color: var(--color2);
	cursor: pointer!important;
}

.about__button,
.back__button,
.next__button,
.close{
	z-index: 9;
	cursor: pointer;
}

/* DESKTOP */

@media screen and (min-width: 900px){
	.button__wrapper{
		left: 3%;
	}
	
	.about__button{
		right: 3%;
	}
	
	.back__button span,
	.next__button span{
		display: inline-block;
	}
}

/* NAME & ROLE  NAME & ROLE  NAME & ROLE  NAME & ROLE  NAME & ROLE */
/* NAME & ROLE  NAME & ROLE  NAME & ROLE  NAME & ROLE  NAME & ROLE */

body.loading .name h1 img.krul,
body.loading .name h1 img.streep,
body.loading .name h1 img.punt{
	visibility: hidden;
}

.name h1 img{
	position: absolute;
}

.krul,
.streep,
.punt{
	display: none;
}

.krul{
	visibility: visible;
	width: 3.5vw;
    left: 5.5vw;
    top: -0.4vw;
	-webkit-transition: visibility 0.3s;
    -moz-transition: visibility 0.3s;
    -ms-transition: visibility 0.3s;
    -o-transition: visibility 0.3s;
	transition-delay: 0.5s;
}

.streep{
	visibility: visible;
	width: 5.5vw;
    right: 14vw;
    bottom: 10.6vw;
	-webkit-transition: visibility 0.3s;
    -moz-transition: visibility 0.3s;
    -ms-transition: visibility 0.3s;
    -o-transition: visibility 0.3s;
	transition-delay: 1.2s;
}

.punt{
	visibility: visible;
	width: 2vw;
    left: 15vw;
    bottom: -2vw;
	-webkit-transition: visibility 0.3s;
    -moz-transition: visibility 0.3s;
    -ms-transition: visibility 0.3s;
    -o-transition: visibility 0.3s;
	transition-delay: 2.5s;
}

.name{    
    position: fixed;
	z-index: 4;
	top: 50vh;
	left: 50vw;
	transform: translateY(-50%) translateX(-50%);
	margin: 0px 0px 0px 0px;
    
    text-align: center;
	pointer-events: none;
	
	opacity: 1;
	-webkit-transition: opacity 0.5s ease-out;
    -moz-transition: opacity 0.5s ease-out;
    -ms-transition: opacity 0.5s ease-out;
    -o-transition: opacity 0.5s ease-out;
}

.name.hide-on-mobile{
	z-index: 1;
	opacity: .1;
	-webkit-transition: opacity 0.5s ease-out;
    -moz-transition: opacity 0.5s ease-out;
    -ms-transition: opacity 0.5s ease-out;
    -o-transition: opacity 0.5s ease-out;
}

body.about .name{
	position: absolute;
}

body.about .name h1{
	color: var(--color1);
}

.name h1{
    font-family: 'hireme';
    color: var(--color2);
	font-size: 20vw;
    line-height: 17vw;
	font-weight: normal;
	
	perspective: 1000px;
	-webkit-perspective: 1000px;
}

body.loading .name h1 span,
body.loading .name h1 span{
	opacity: 0;
	transform-origin: center top;
    transform-style: preserve-3d;
    transform: translateY(40%) rotateX(-50deg);
    transition: opacity 0s cubic-bezier(.215,.61,.355,1),transform 0s cubic-bezier(.215,.61,.355,1);
}

.name h1 span{
	display: block;
	transform: none;
    opacity: 1;
    transition-duration: 1s;
}

.name h1 span.top{
	transition-delay: .0s;
}

.name h1 span.middle{
	transition-delay: .05s;
}

.name h1 span.bottom{
	margin-top: -1.5vw;
	transition-delay: .1s;
}

/**/

.role{
	display: none;
    position: fixed;
	z-index: 9;
	top: 42px;
	left: 6%;
    
    text-align: left;
	pointer-events: none;
}

.role h3{
	font-family: sofia-pro, sans-serif;
	font-weight: 300;
	font-style: normal;
	color: var(--color2);
	
	/*font-family: forma-djr-banner, sans-serif;
	font-weight: 200;
	font-style: normal;*/
	font-size: 14px;
	line-height: auto;
	letter-spacing: 1px;
	text-transform: uppercase;
}

/* DESKTOP */

@media screen and (min-width: 900px){
	.krul,
	.streep,
	.punt{
		display: block;
	}

	.name{    
		margin: -20px 0px 0px 0px;
	}
	
    .name h1{
        font-size: 15vw;
        line-height: 12vw;
    }
	
	.role{
		display: block;
		left: 3%;
	}
	
	.name.hide-on-mobile{
		z-index: 4;
		opacity: 1;
	}
	
	.name.fade{
		-webkit-transition: opacity 0.5s cubic-bezier(.215,.61,.355,1);
		-moz-transition: opacity 0.5s cubic-bezier(.215,.61,.355,1);
		-ms-transition: opacity 0.5s cubic-bezier(.215,.61,.355,1);
		-o-transition: opacity 0.5s cubic-bezier(.215,.61,.355,1);
		opacity: 0.02!important;
	}
}

/* WORK  WORK  WORK  WORK  WORK */
/* WORK  WORK  WORK  WORK  WORK */

.app.wait{
	overflow-y: hidden;
}

.app{
	z-index: 2;
	width: 100%;
	height: 100vh;
	overflow-y: scroll;
	
	-ms-overflow-style: none;
  	scrollbar-width: none;
}

.app::-webkit-scrollbar {
    display: none;
}

.scrolloverlay{
	width: 100%;
    height: 50vh;
	margin-top: 50vh;
	opacity: 0;
	z-index: 1;
}

.scrolloverlay.hide{
	pointer-events: none;
}

.grid {    
	position: relative;
    z-index: 3;
    height: auto;
}

canvas {
    display: none;
}

.link {
    cursor: pointer;
}

.link img {
    display: none;
}

.work{
	position: relative;
}

.work__item{
	position: relative;
	background-color: var(--color2);
	border-radius: var(--radius);
	
	-webkit-transition: opacity 0.2s ease-out;
    -moz-transition: opacity 0.2s ease-out;
    -ms-transition: opacity 0.2s ease-out;
    -o-transition: opacity 0.2s ease-out;
	opacity: 1;
	
	background-repeat: no-repeat;
	background-size: cover;
}

.work__item.large,
.work__item.small{
    width: 88%;
	height: 88vw;
}

.one,
.three,
.five,
.seven,
.nine,
.eleven,
.two,
.four,
.six,
.eight,
.ten,
.twelve{
	float: left;
	margin-left: 6%;
	margin-top: 50%;
}

.one{
	background-image: url(/img/work/tweetakt.jpg);
}

.two{
	background-image: url(/img/work/briq.jpg);
}

.three{
	background-image: url(/img/work/mtg.jpg);
}

.four{
	background-image: url(/img/work/september.jpg);
}

.five{
	background-image: url(/img/work/vpro.jpg);
}

.six{
	background-image: url(/img/work/nmland.jpg);
}

.seven{
	background-image: url(/img/work/trees.jpg);
}

.eight{
	background-image: url(/img/work/setup.jpg);
}

.nine{
	background-image: url(/img/work/edukans.jpg);
}

.ten{
	background-image: url(/img/work/wur.jpg);
	margin-bottom: 42%;
}

.spacer{
	float: left;
	width: 100%;
	height: 120vh;
}

h2{
	position: absolute;
	width: 100%;
	top: 104%;
	
    font-family: 'lemure';
    color: var(--color2);
	font-size: 13vw;
    line-height: 13vw;
	font-weight: normal;
	
	text-transform: uppercase;
	text-align: left;
	pointer-events: none;
}

.work__item.large.left h2{
	text-align: left;
}

.work__item.large.right h2{
	text-align: left;
}

.allclients{
	display: none;
	position: relative;
	float: left;
	
	width: 60vw;
	height: auto;
	
	margin-left: 20vw;
	margin-bottom: 13vh;
}

.allclients h2{
	position: relative;
	top: 0px;
	margin-bottom: 50px;
	
	width: 100%;
	float: left;
	text-align: center;
}

.allclients img{
	width: 100%;
	float: left;
}

/* DESKTOP */

@media screen and (min-width: 900px){
	.work__item.large{
		width: 26%;
		height: 26vw;
	}

	.work__item.small{
		width: 20%;
		height: 20vw;
	}
	
	.one{
		float: left;
		margin-left: 10%;
		margin-top: 0%;
	}
	
	.two{
		float: right;
		margin-right: 10%;
		margin-top: 32%;
	}
	
	.three,
	.five,
	.seven,
	.nine{
		float: left;
		margin-left: 10%;
		margin-top: 35%;
	}
	
	.eleven{
		float: left;
		margin-left: 10%;
		margin-top: 45%;
	}
	
	.four,
	.six,
	.eight,
	.ten,
	.twelve{
		float: right;
		margin-right: 10%;
		margin-top: 35%;
	}
	
	.ten{
		margin-bottom: 32%;
	}
	
	.six{
		float: right;
		margin-right: 10%;
		margin-top: 45%;
	}
	
	.work__item.large.right h2{
		text-align: right;
	}	

	h2{
		font-size: 4.5vw;
		line-height: 4.5vw;
	}
	
	canvas {
		display: block;
		position: absolute;
		top: 0px;
		left: 0px;
		z-index: 5;
		pointer-events: none;
	}
	
	.allclients{
		display: block;
	}
}

/* PROJECT  PROJECT  PROJECT  PROJECT  PROJECT */
/* PROJECT  PROJECT  PROJECT  PROJECT  PROJECT */

.project{
	position: relative;
	width: 100%;
	float: left;
	
	margin-bottom: 15vw;
	
	z-index: -1;
	overflow-x: hidden;
	
	font-family: sofia-pro, sans-serif;
	font-style: normal;
	text-align: left;
	color: var(--color2);
}

.project p{
	font-size: 14px;
	font-weight: 300;
	line-height: 20px;
}

.project ul{
	margin-top: 15px;
}

.project ul li{
	list-style: none;
	width: 100%;
	
	font-size: 14px;
	font-weight: 700;
	line-height: 24px;
}

.project p.credits{
	width: 100%;
	float: left;
	margin-top: 25px;
	
	font-size: 12px;
	font-weight: 300;
	line-height: 15px;
	opacity: 0.5;
}

.project p.credits a{
	color: var(--color2);
}

.project p.credits a:hover{
	color: var(--color2);
}

.project p.info{
	width: 100%;
	float: left;
	margin-bottom: 20px;
	text-align: left;
	
	font-size: 14px;
	font-weight: 300;
	line-height: 20px;
	opacity: 1;
}

.project p.subtitle{
	font-weight: 700;
	margin-bottom: 5px;
}

.project__top-left{
	position: relative;
	float: left;
	width: 100%;
	height: auto;
	
	margin-left: -16%;
	margin-top: -20%;
}

.project__top-left img{
	width: 100%;
}

.project__top-right{
	position: relative;
	float: left;
	width: 88%;
	
	margin-left: 6%;
	margin-top: 50px;
}

.project__top-right .content h1{
	margin-bottom: 15px;
	
	font-family: 'lemure';
    color: var(--color2);
	font-size: 23vw;
    line-height: 22vw;
	font-weight: normal;
	
	text-transform: uppercase;
	text-align: left;
}

.project__mobile-row{
	position: relative;
    width: 140%;
    height: auto;
	padding: 0px 1.5%;
    margin-top: 15vw;
	margin-left: -20%;
    float: left;
}

.mobile{
	width: 16.4%;
	float: left;
	margin: 0px 1.5%;
	
	border-radius: 15px;
	overflow: hidden;
	
	-webkit-box-shadow: 0px 10px 40px 0px rgba(0,0,0,0.1);
	-moz-box-shadow: 0px 10px 40px 0px rgba(0,0,0,0.1);
	box-shadow: 0px 10px 40px 0px rgba(0,0,0,0.1);
}

.mobile img{
	display: block;
	width: 100%;
	height: auto;
}

.project__desktop-explain-r{
	position: relative;
	float: left;
	width: 88%;
	
	margin-top: 15vw;
	margin-left: 6%;
}

.desktop{
	position: relative;
	float: left;
	width: 100%;
	
	border-radius: 15px;
	overflow: hidden;
	
	-webkit-box-shadow: 0px 10px 40px 0px rgba(0,0,0,0.1);
	-moz-box-shadow: 0px 10px 40px 0px rgba(0,0,0,0.1);
	box-shadow: 0px 10px 40px 0px rgba(0,0,0,0.1);
}

.desktop img{
	display: block;
	width: 100%;
	height: auto;
}

.explain-r{
	position: relative;
	float: left;
	width: 100%;
	margin-top: 15vw;
}

.project__desktop{
	position: relative;
	width: 88%;
	float: left;
	
	margin-top: 15vw;
	margin-left: 6%;
}

.project__desktop iframe{
	width: 100%;
	height: 53vw;
	border-radius: 15px;
	overflow: hidden;
	display: block;
	
	-webkit-box-shadow: 0px 10px 40px 0px rgba(0,0,0,0.1);
	-moz-box-shadow: 0px 10px 40px 0px rgba(0,0,0,0.1);
	box-shadow: 0px 10px 40px 0px rgba(0,0,0,0.1);
}

.project__desktop.small iframe{
	width: 100%;
	height: 87.7vw;
}

.project__desktop.low iframe{
	width: 100%;
	height: 43.5vw;
}

.player .vp-video-wrapper object, .player .vp-video-wrapper video{
    border-radius: 30px;
}

.project__desktop .desktop{
	width: 100%;
	margin-left: 0px;
}

.project__mobile-explain-l{
	position: relative;
	width: 88%;
	float: left;
	
	margin-top: 15vw;
	margin-left: 6%;
}

.project__mobile-explain-r{
	position: relative;
	width: 88%;
	float: left;
	
	margin-top: 15vw;
	margin-left: 6%;
}

.project__mobile-explain-r .mobile{
	position: relative;
	float: left;
	width: 48%;
	margin: 0px 4% 0px 0px;
}

.project__mobile-explain-l .mobile{
	position: relative;
	float: right;
	width: 48%;
	margin: 0px 0px 0px 4%;
}

.project__mobile-explain-l .mobile iframe{
	width: 100%;
	height: 85.6vw;
	border-radius: 15px;
	overflow: hidden;
	display: block;
}

.project__mobile-explain-r .mobile iframe{
	width: 100%;
	height: 85.6vw;
	border-radius: 15px;
	overflow: hidden;
	display: block;
}

.project__mobile-explain-r .mobile.longvid iframe{
	width: 100%;
	height: 91.4vw;
	border-radius: 15px;
	overflow: hidden;
	display: block;
}

.nom{
	margin-left: 0px!important;
}
.nomr{
	margin-right: 0px!important;
}

.explain-l{
	position: relative;
	width: 100%;
	margin-bottom: 15vw;
}

/* DESKTOP */

@media screen and (min-width: 900px){
	.project{
		margin-bottom: 10vw;
	}
	.project ul li{
		width: 50%;
		float: left;
	}
	
	.project p{
		font-size: 16px;
		line-height: 22px;
	}

	.project ul li{
		font-size: 16px;
		line-height: 26px;
	}

	.project p.credits{
		font-size: 12px;
		line-height: 15px;
		opacity: 0.5;
	}

	.project p.info{
		font-size: 12px;
		line-height: 15px;
		text-align: center;
		opacity: 0.5;
	}
	
	.project p.credits{
		font-size: 12px;
		line-height: 15px;
		opacity: 0.5;
		margin-top: 50px;
	}
	
	.project__top-left{
		width: 37%;
		height: 100vh;
		margin-right: 3%;
		margin-left: 10%;
		margin-top: 0px;
	}

	.project__top-left img{
		position: absolute;
		top: 50%;
		margin-top: 0vw;
		transform: translateY(-50%);
	}

	.project__top-right{
		width: 35%;
		height: 100vh;

		margin-left: 5%;
		margin-top: 0px;
	}
	
	.project__top-right .content h1{
		font-size: 13vw;
		line-height: 12vw;
	}

	.project__top-right .content.center-vert{
		position: absolute;
		width: 100%;
		top: 50%;
		margin-top: 1vw;
		transform: translateY(-50%);
	}
	
	.project__mobile-row{
		width: 100%;
		margin-top: 10vw;
		margin-left: 0px;
	}	
	
	.project__desktop{
		width: 70%;
		margin-top: 15vw;
		margin-left: 15%;
	}	
	
	.project__desktop.small{
		width: 41.75%;
		margin-top: 15vw;
		margin-left: 29.12%;
	}	
	
	.project__desktop.small iframe{
		border-radius: 30px;
		height: 41.7vw;
	}
	
	.project__desktop.low iframe{
		border-radius: 30px;
		height: 35.4vw;
	}
	
	.project__desktop-explain-r{
		width: 70%;

		margin-top: 15vw;
		margin-left: 15%;
	}
	
	.project__desktop-explain-r.first{
		width: 70%;

		margin-top: 10vw;
		margin-left: 15%;
	}

	.desktop{
		width: 65.5%;
		margin-right: 3.5%;
		border-radius: 30px;
	}
	
	.mobile{
		border-radius: 30px;
	}
	
	.project__desktop iframe{
		border-radius: 30px;
		height: 41.7vw;
	}

	.explain-r{
		position: absolute;
		width: 28%;
		right: 0px;
		bottom: 50px;
		margin-top: 0px;
	}
	
	.project__mobile-explain-l{
		width: 70%;
		margin-top: 15vw;
		margin-left: 15%;
	}
	
	.project__mobile-explain-r{
		width: 70%;
		margin-top: 15vw;
		margin-left: 15%;
	}

	.project__mobile-explain-l .mobile{
		float: right;
		width: 31%;
		margin: 0px 0px 0px 3.5%;
	}
	
	.project__mobile-explain-r .mobile{
		float: left;
		width: 31%;
		margin: 0px 0px 0px 3.5%;
	}
	
	.project__mobile-explain-l .mobile iframe{
		height: 44.1vw;
		border-radius: 30px;
	}

	.project__mobile-explain-r .mobile iframe{
		height: 44.1vw;
		border-radius: 30px;
	}
	
	.project__mobile-explain-r .mobile.longvid iframe{
		height: 46.9vw;
		border-radius: 30px;
	}
	
	.nom{
		margin-left: 3.5%;
	}

	.explain-l{
		position: absolute;
		width: 28%;
		left: 0px;
		bottom: 50px;
		margin-bottom: 0px;
	}
}

/* ABOUT  ABOUT  ABOUT  ABOUT  ABOUT */
/* ABOUT  ABOUT  ABOUT  ABOUT  ABOUT */

.about{
	position: absolute;
	width: 100vw;
	height: 0vh;
	
	background-color: var(--color2);
	opacity: 1;
	z-index: 9;
	
	overflow-y: scroll;
	
	-ms-overflow-style: none;
  	scrollbar-width: none;
	
	-webkit-transition: height 0.3s ease-in;
    -moz-transition: height 0.3s ease-in;
    -ms-transition: height 0.3s ease-in;
    -o-transition: height 0.3s ease-in;
	transition-delay: 0s;
}

.close{
	visibility: hidden;
}

body.open-about .about{
	height: 100vh;

	-webkit-transition: height 0.3s ease-out;
    -moz-transition: height 0.3s ease-out;
    -ms-transition: height 0.3s ease-out;
    -o-transition: height 0.3s ease-out;
}

body.open-about .close{
	visibility: visible;
}

.about::-webkit-scrollbar {
    display: none;
}

.about .name{
	position: absolute;
}

.about .name h1{
	color: var(--color1);
}

.about .name.hide-on-mobile{
    z-index: 4;
    opacity: 1;
}

.foto1{
	position: absolute;
    width: 40vw;
    height: auto;
    z-index: 1;
    top: 25vh;
    left: 6vw;
    transform: rotate(-4deg);
}

.foto2{
	position: absolute;
    width: 30vw;
    height: auto;
    z-index: 1;
    top: 44vh;
    right: 6vw;
    transform: rotate(4deg);
}

.foto1 img,
.foto2 img{
	width: 100%;
}

.cv{
	position: relative;
	float: left;
	width: 88vw;
	height: auto;
	
	margin-top: 100vh;
	margin-left: 6vw;
	padding-bottom: 10vw;
}

.cv__left{
	position: relative;
	float: left;
	
	width: 100%;
	margin-top: 7vw;
	margin-right: 20%;
}

.cv__right{
	position: relative;
	float: left;
	
	width: 100%;
	margin-top: 7vw;
}

.cv__item-small{
	font-size: 14px;
	line-height: 20px;
	font-family: sofia-pro, sans-serif;
	font-weight: 100;
	text-align: left;
	color: var(--color1);
	
	border-top: solid 1px var(--color1);
	padding: 20px 0px;
}

.cv__full{
	position: relative;
	float: left;
	
	width: 100%;
	margin-top: 7vw;
}

.cv__item-large{
	font-size: 14px;
	line-height: 20px;
	font-family: sofia-pro, sans-serif;
	font-weight: 100;
	text-align: left;
	color: var(--color1);
	
	border-top: solid 1px var(--color1);
	padding: 20px 0px;
}

.first{
	border-top: none;
}

h4{
	font-family: 'lemure';
    color: var(--color1);
	font-size: 40px;
    line-height: 40px;
	font-weight: normal;
	
	text-transform: uppercase;
	text-align: left;
}

/* DESKTOP */
@media screen and (min-width: 900px){
	.cv{
		width: 60vw;
		
		margin-left: 20vw;
		padding-bottom: 10vw;
	}
	
	.foto1{
		width: 28vw;
		top: 11vh;
		left: 18vw;
	}
	
	.foto2{
		width: 20vw;
    	top: 32vh;
    	right: 17vw;
	}

	.cv__left{
		width: 40%;
		margin-top: 5vw;
	}

	.cv__right{
		width: 40%;
		margin-top: 5vw;
	}
	
	.cv__item-small{
		font-size: 16px;
		line-height: 22px;

		padding: 20px 0px;
	}

	.cv__full{
		margin-top: 7vw;
	}

	.cv__item-large{
		font-size: 16px;
		line-height: 22px;

		padding: 20px 0px;
	}
	
	h4{
		font-size: 80px;
		line-height: 80px;
	}
}