@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Work+Sans:300,400,500,600,700&display=swap');

body{ 
	font-family:"Work Sans";  
	background-color: #ffffff; 
	margin: 0;
 	background-repeat: no-repeat;
 	background-position: 0 100%;
}
p{
	font-size: 16px;
	line-height: 26px;
	color: #676B70;
	margin: 0;
	font-weight: 300;
}	
#container{ 
	max-width: 1170px;
 	text-align: center;
 	margin: 0 auto;
 	position: relative;
}	
/* ------------------------PAGE LOAD ANIMATIONS----------------------------- */

/* Menu */
.loaded #topbar {
   animation: menuIn 0.7s ease-in-out 0s 1 forwards;
} 
@keyframes menuIn {
  100% { top: 30px; opacity: 1;}
}

/* Hometitle */
.loaded #hometitle, .loaded #hometitle p {
   animation: scaleIn 0.7s ease-in-out 0.1s 1 forwards;
} 
@keyframes scaleIn {
  100% { top: 98px; opacity: 1;}
}

/* Social */
.loaded #socials {
   animation: socialIn 0.7s ease-in-out 0.1s 1 forwards;
} 
@keyframes socialIn {
  100% { bottom: 65px; opacity: 1;}
}

/* Casetitle */
.loaded .casetitle{
   animation: casetitleUp 1s ease-in-out 0.1s 1 forwards;
} 
@keyframes casetitleUp {
  100% { top: 19vw; opacity: 1; }
}

/* Clients */
#clientbar img:nth-child(2){
	animation: clientIn 0.4s ease-in-out 1.35s 1 forwards;
}
#clientbar img:nth-child(4){
	animation: clientIn 0.4s ease-in-out 1.43s 1 forwards;
}
#clientbar img:nth-child(6){
	animation: clientIn 0.4s ease-in-out 1.51s 1 forwards;
}
#clientbar img:nth-child(8){
	animation: clientIn 0.4s ease-in-out 1.59s 1 forwards;
}
#clientbar img:nth-child(10){
	animation: clientIn 0.4s ease-in-out 1.67s 1 forwards;
}
@keyframes clientIn {
  100% { margin-top: 0; opacity: 1; }
}

/* Artify */
.loaded img.artify{
  animation: caseUp 0.7s ease-in-out forwards;
} 
@keyframes caseUp {
  100% { top: -340px; opacity: 1; }
}

/* Bandenimg */
.loaded img.bandenthuis{
  animation: caseUp 0.7s ease-in-out forwards;
} 
@keyframes caseUp {
  100% { top: -340px; opacity: 1; }
}

/* Snooze */
.loaded img.philipssnooze{
  animation: caseUp 0.7s ease-in-out forwards;
} 
@keyframes caseUp {
  100% { top: -340px; opacity: 1; }
}

/* ------------------------HOMEPAGE----------------------------- */
#background{
	width: 100%;
	height: auto;
	z-index: -2;

}
#topbar{
	position: absolute;
    left: 40px;
    top: 40px;
    right: 30px;
    opacity: 0;
}
.logo{
	float: left;
	padding-top: 8px;	
}
.logo img:nth-child(1){
	width: 125.5px;
}
.logo img:nth-child(2){
	display: none;
}

.logofadeout{
	opacity: 0;
	transition: opacity .2s ease-in-out;
    -moz-transition: opacity .2s ease-in-out;
    -webkit-transition: opacity .2s ease-in-out;
}
lottie-player{
	display: inline-block;
	position: absolute;
	top: -54.6px;
    left: -12.7px;
	cursor: pointer;
}
footer lottie-player{
	display: inline-block;
	position: absolute;
	top: -31.6px;
    left:25.7px;
	cursor: pointer;
}
#status{
	position: absolute; 
	left: 50%; 
	top: 4px;
}
#statusbar{
    padding: 4px 15px;
    font-size: 13px;
    border: 1.5px solid #3D3D3D;
    line-height: 0;
    font-weight: bold;
    position: absolute;
    left: 50%;
    border-radius: 90px;
}
#statusbar img{ 
	display: inline;
	vertical-align: text-top;
    max-height: 14px;
    max-width: 14px;
    padding-right: 2px;
}
#statusbar p {
	color: #fff; 
	display: inline;
	font-weight: 400; 
	font-size: 13px;
	cursor: default;
}
#statusbar p span{ 
	color: #0BDA07;
}
#statusbar .extra{
	color: #fff;
	padding-left: 5px;
}
.status {
  display: inline-block;
  background: black;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
  height: 13px;
  width: 13px;
  transform: scale(0.8);
  animation: pulse-black 2s infinite;
  margin-right: 3px;
  vertical-align: text-top;  
}

/* STATUS AVAILABLE */
.status.green {
  background: rgba(11, 218, 7, 1);
  box-shadow: 0 0 0 0 rgba(11, 218, 7, 1);
  animation: pulse-green 2s infinite;
  margin-top: 1px;
}

@keyframes pulse-green {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(11, 218, 7, 0.7);
  }
  
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(11, 218, 7, 0);
  }
  
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(11, 218, 7, 0);
  }
}

/* STATUS AVAILABLE */
.status.yellow {
  background: rgba(255, 138, 0, 1);
  box-shadow: 0 0 0 0 rgba(255, 138, 0, 1);
  animation: pulse-yellow 2s infinite;
  margin-top: 1px;
}

@keyframes pulse-yellow {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 138, 0, 0.7);
  }
  
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(255, 138, 0, 0);
  }
  
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 138, 0, 0);
  }
}

#clientbar img, #clientbar div{
    vertical-align: middle;
    max-height: 40px;
    max-width: 146px;
    padding: 0 50px;
}
#clientbar img:nth-child(2), #clientbar img:nth-child(4), #clientbar img:nth-child(6), #clientbar img:nth-child(8), #clientbar img:nth-child(10){
	margin-top: 20px;
	opacity: 0;
}
.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

#clientbar{
	height: 80px;
	background-color: #fff;
	border: 1px solid #E5E5E5;
	border-radius: 3px;	
    z-index: 10;
    position: relative;
    margin: 0 auto;
    top: -45px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#clientbar2{display: none;}
#clientbar2{
	height: 48px;
	background-color: #fff;
	border: 1px solid #E5E5E5;
	border-radius: 3px;	
    z-index: 10;
    position: relative;
    margin: 0 auto;
    top: -45px;
	padding: 15px 0;
}

.logo-slider {
  height: 49px;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.logo-slider > div {
  height: 50px;
  width: 3383px;
  background: url(../images/clients.jpg);
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  transform: translate3d(0, 0, 0);
  background-repeat: no-repeat !important;
}
.logo-slider .mover {
  animation: moveSlideshow 90s linear infinite;
}

@keyframes moveSlideshow {
  100% { 
    transform: translateX(-66.6666%);  
  }
}

/* ------------------------NAVIGATION--------------------------- */
#backgroundmobile{
	display: none;
}
header nav{
	float: right;
}
nav li{
	display: inline;
}
nav ul{
	margin: 0;
	padding: 0;
}
nav li:nth-child(1){
	margin-right: 15px;
    vertical-align: top;
    padding-top: 15px;
    display: inline-block;	
}
nav li:nth-child(2){
	list-style: none;
	display: inline-block;
	width: 50px;
	height: 50px;
	background-size: 50px 50px;
	background-repeat: no-repeat;
	cursor: pointer;
}
nav li a{
	text-decoration: none;
	color:#676B70;
	font-weight: 600;
}
nav li a:hover{
	color: #fff;
	transition: all .15s ease-in-out;
}
#socials{
	position: absolute;
    right: 30px;
    bottom: 35px;
    width: 50px;
    padding: 0;
    margin: 0;
    z-index: 1;
    opacity: 0;
}
#socials li{
	list-style: none;
	width: 50px;
	height: 50px;
	background-size: 50px 50px;
	background-repeat: no-repeat;
	cursor: pointer;
	padding-top: 8px;
}

/* -------------------------------------------------------------- */
#hometitle span{
	color: #676B70;
}
#hometitle p{
	opacity: 0;
	color: #fff;
	text-transform: uppercase;
	text-align: center;
	letter-spacing: 1.5px;
	font-weight:600;
	font-size: 14px;
}

#hometitle{
	position: absolute;
	opacity: 0;
	top: 135px;
	width: 100%;
}
h1{
	font-size: 50px;
	line-height: 65px;
	margin: 0;
	color: #252525;
	text-shadow: 0px 0px 15px rgba(37,37,37,0.1);
}
#hometitle h1{
	text-align: center;
	color: #fff;
	text-shadow: none;
}

h3{
	color: #20272F;
	font-size: 22px;
	font-weight: 400;
	margin: 0;
	text-align: left;
}
h3 span{
	font-weight: 600;
}
#awwwards{
	position: absolute; 
	z-index: 999; 
	left: 0;
	border-top:3px solid #333; 
	transform: translateY(-50%); 
	bottom: 80px;  
}

#orpetron{
	position: absolute;
	z-index: 999;
	transform: translateY(-50%); 
    bottom: 35px;
    left: 35px;
}
#orpetron img{
	max-height: 70px;
}
#orpetron img:hover{
	animation: orpetronTurn 25s forwards;
}
@keyframes orpetronTurn {
  100% { transform: rotate(1080deg) scale(1.05,1.05);}
}

/* ------------------------HOVER CASES--------------------------- */
/*
#project01 h1, #project02 h1, #project03 h1, #project04 h1, .projectimgleft, .primary_btn, .projectimgright, .primary_btn_left{
	-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;	
}
.hover01h1{
	margin-left: 15px !important;
}
.hover02h1{
	margin-right: 15px !important;
}
.hover03h1{
	margin-left: 15px !important;
}
.hoverbtn{
*/
/* 	border: 2px solid #FF9500 !important; */
/*
}
.hovertop{
	transform: scale(1.05);
}
*/

/* ------------------------PROJECTS----------------------------- */
#casesection{
	margin-top: 10px;
}
.cases{
	width: 370px;
	height: 400px;
	border-radius: 3px;
	margin-top: 15px;
	position: relative;
	display: inline-table;
	text-align: left;
	cursor: pointer;
	transform-origin: 50% 50%;
	transition: transform .25s, visibility .25s ease-in;
}
.cases:hover{
	transform: scale(1.02,1.02);

}
.instacases img:hover{
	transform: scale(1.02,1.02);
}
.cases .title{
	font-size: 26px;
	line-height: 30px;
	font-weight: bold;
    padding: 12px 30px 0 30px;
    display: block;	
    letter-spacing: 0.5px;
}
.cases img{
	max-width: 100%;
    max-height: 100%;
    position: absolute;
    bottom: 0;
    right: -1px;
    border-radius: 0 0 3px 0;
}
.cases .subtitle{
	font-weight: 400;
	font-size: 13px;
	text-transform: uppercase;
	padding: 30px 0 0 30px;
	display: block;
	letter-spacing: 1px;
}
#case01, #case02, #case03{
	background: linear-gradient(318.45deg, #120813 0%, #2E2E2E 81.77%);
}
#case01 .title, #case02 .title, #case03 .title{
	color: #fff;
}
#case01 .subtitle, #case02 .subtitle, #case03 .subtitle{
	color: #767676;
}
#case02{
	margin: 0 24px;
}
/* ------------------------INSTACASES----------------------------- */
#instasection{
	margin-top: 54px;
}
.instacases{
	width: 270px;
	height: 270px;
	border-radius: 3px;
	margin-top: 15px;
	display: inline;
	text-align: left;
	cursor: pointer;
}
#instasection h3{
	display: block;
	margin-bottom: 15px;
}
#instasection span{
	margin-left: 7px;
}
#instasection h3 a{
	text-decoration: none;
	color: #676B70;
	font-size: 16px;
	font-weight: 400;
	margin-left: 7px;
}
#instasection h3 a:hover{
	text-decoration: underline;
}
.instacases img{
	width: 270px;
	transform-origin: 50% 50%;
	transition: transform .25s, visibility .25s ease-in;
}
.instacases img:nth-child(1), .instacases img:nth-child(2), .instacases img:nth-child(3){
	padding-right: 24px;
}
/* ------------------------ANIMATION----------------------------- */
#animationsection{
	margin-top: 50px;
	display: inline-block;
}
#animationsection h3{
	font-weight: 700;
	margin-bottom: 15px;
}
#animationsection h4{
	font-weight: 600;
}

#animationsection iframe{
	width: 775px;
	height: 435px;
	border-radius: 3px;
	border: 1px solid #E5E5E5;
	float: left;
}
#animationlist{
	width: 335px;
	border-radius: 3px;
	border: 1px solid #E5E5E5;
	background: linear-gradient(92.54deg, #FFFFFF 0.09%, #FCFCFC 100%);
	text-align: left;
    padding: 25px 20px;
    display: inline-block;		
    margin-left: 16px;
}
h4{
	font-size: 20px;
	font-weight: 700;
	line-height: 28px;
	margin: 0;
}
#animationlist ul{
	margin-top: 12px;
	margin-bottom: 0;
	padding: 0;
	display: inline-block;
}
#animationlist ul li{
	list-style: none;
	line-height: 45px;
	font-size: 15px;
	font-weight: 400;
	color: #20272F;
	list-style-image: url(../images/check.svg);
	margin-left: 30px;	
	padding-left: 8px;
}
#animationlist img{
    width: 18px;
    padding-right: 12px;	
}

/* ------------------------QUOTE----------------------------- */
#quote{
	width: 790px;
	margin: 0 auto;
	margin-top: 60px;
	position: relative;
	display: inline-block;
}
#quote img{
	width: 370px;
}
h5{
	font-size: 34px;
	line-height: 42px;
	font-weight: 700;
	text-align: left;
}
#quotetekst{
	width: 360px;
	margin: 0;
    position: absolute;
    display: inline-block;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    margin-left: 35px;
}
#quotetekst h5{
	margin: 0;
    margin-left: 20px;	
    z-index: 1;
    margin-top: 10px;
}
#quotetekst #line{
	border-left: 4px solid #2D2D2D;
	height: 109px;
	position: absolute;
	top: 58px;
}
#quotetekst img{
	margin-left: 20px;
	z-index: -1;
	display: block;
	width: 53px;
}
#quotetekst span{
	display: block;
	text-align: left;
	margin-left: 20px;
	color: #676B70;
	font-weight: 400;
	margin-top: 7px;
}
/* ------------------------CTA BLOCK----------------------------- */
#ctablock{
	width: 100%;
    padding: 30px 0 40px 0;	
	border-radius: 3px;
	border: 1px solid #E5E5E5;
	background: linear-gradient(92.54deg, #FFFFFF 0.09%, #FCFCFC 100%);
	text-align: center;
	margin: 0 auto;
	margin-top: 60px;	
}
#ctablock h3{
	text-align: center;
	font-weight: 700;
	margin-top: 5px;
}
#ctablock p{
	width: 40%;
	margin: 0 auto;
	margin-top: 9px;
}
#ctablock .mailbtn{
	border: 1.5px solid #ccc;
}
.mailbtn{
	transition: all 0.4s;
	position: relative;	
	cursor: pointer;
	display: inline-block;
	background-color: rgba(255, 255, 255, 0);
	color: #20272F;
	border-radius: 30px;
	padding: 0px 25px;
	margin-top: 19px;
	line-height: 0;
}

/* Mail hover effect */

.mailbtn:hover::before{
	opacity: 0 ;
	transform: scale(0.8,0.8);
}
.mailbtn:hover::after{
	opacity: 1;
	transform: scale(1,1);
}
.mailbtn:hover{
	transform: scale(0.95,0.95);
}
.mailbtn::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	border-radius:50px;
	transition: all 0.3s;	
}
footer .mailbtn::before{
	background-color: rgba(255, 255, 255, 0);
}
.mailbtn::after{
	content: '';
	position: absolute;
	top: -2px;
	left: -2px;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0;
	transition: all 0.3s;
	transform: scale(1.15,1.15);
	border-radius:60px;	
}
#ctablock .mailbtn::after{
	border: 1.5px solid rgba(000, 000, 000, 1);
}
footer .mailbtn::after{
	border: 1.5px solid rgba(255, 255, 255, 1);
}






/*
#mailbtn:hover .mailicon-small{
	background-image: url(../images/mailiconfill.svg);
	width: 22px;
	height: 20px;
	transition: .25s ease;
}
*/
.mailicon-small{
	background-image: url(../images/mailiconblack.svg);
	width: 19px;
	height: 17px;
	display: inline-block;
    vertical-align: middle;
}
.mailbtn a{
	vertical-align: middle;
	line-height: 50px; 
	padding-right: 8px;
}

.btnarrowhover{
	background-image: url(../images/buttonarrow_active.svg) !important;
	transition: all .15s ease-in-out;
}
.btnarrow{
	background-image: url(../images/buttonarrow.svg);
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    display: inline-block;
    position: relative;
    right: 0px;
    top: 5px;
    margin-left: 20px;
}
#blackbar02 {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    height: 130px;
    background: #000;
    width: 100vw;
    z-index: -2;
    margin-top: -160px;
}
#blackbar04 {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    height: 130px;
    background: #000;
    width: 100vw;
    z-index: -2;
    margin-top: -30px;
}
#animation span{
	color:#FF9500;
}

/* --------------------- ABOUTPAGE -------------------- */

h2{
	font-size: 32px;
    line-height: 40px;
    margin: 0 auto;
    margin-bottom: 10px;
    font-weight: bold;
    width: 400px;
}
#aboutintro{
	margin-top: 25px;
    display: inline-block;
}
#aboutintro p, #caseintro p, .artifycontainer p{
	width: 600px;
	margin: 0 auto;
}
#experience{
	width: 100%;
    margin-top: 60px;
}
#education{
	position: relative;
    width: 100%;
    display: inline-block;
    margin-top: 70px;
}

#education #blocks{
    left: 110px;
    position: inherit;
    width: 620px;
    height: 620px;
    float: left;
}
#education #title{
	width: 295px;
	float: right;
    position: relative;
    top: 245px;
    display: inline-block;
    right: 70px;
}
#experience #blocks{
    margin-top: 30px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    margin: 10px auto;
    position: relative;
    text-align: center;
}
#experienceblock:hover{
/*
	box-shadow: 0px 30px 40px -5px rgba(0,0,0,0.12);
	-webkit-box-shadow: 0px 30px 40px -5px rgba(0,0,0,0.12);
	-moz-box-shadow: 0px 30px 40px -5px rgba(0,0,0,0.12);
*/
	border: 1px solid #20272F;
	cursor: pointer;
	transition: all .15s ease-in-out;
}

#experienceblock{
	width: 295px;
	height: 295px;
	border-radius:3px;
	margin: 15px;
	float: left;
	position: relative;
	background: #fff;
	border: 1px solid #E5E5E5;
}
#experience #title{
	width: 405px;
	margin: 0 auto;
}
#experience .educationblock{
	position: relative;
}
#education #title p, #education #title h2{
	text-align: left;
}

.educationblock{
	width: 295px;
	height: 295px;
	background: #fff;
	border-radius: 3px;
	position: absolute;
	border: 1px solid #E5E5E5;
}

#education02{
 	top: 325px;
}
#education03{
	left: 325px;
    top: 170px;
}
/*
#experience01{
	top: 80px;
	right: 0;
}
#experience02{
    top: 0;
    right: 325px;
}
#experience03{
	right: 324px;
    top: 320px;
}
#experience04{
	right: 0;
    top: 400px;
}
*/
	
img.graduate{
    position: absolute;
    width: 90px;
    left: 50%;
    transform: translatex(-50%);
    top: 20px;
}
img.school{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
p.blocktitle{
	font-weight: bold;
	font-size: 14px;
	color: #252525;
	position: absolute;
	top: 220px;
	width: 100%;
}
p.blockyear{
	position: absolute;
	font-weight: 100;
	font-size: 14px;
	color: #CCCCCC;
	top: 245px;
    width: 100%;
}


/* --------------------- PHILIPS SNOOZE -------------------- */
.philipssnoozemobile{ display: none;}
.casetitle{
    position: absolute;
    width: 700px;
    margin: 0 auto;
    left: 50%;
    top: 21vw;
    opacity: 0;
    margin-left: -350px;
}
.casetitle h1{
	color: #fff;
	font-size: 90px;
    line-height: 70px;
}
.casetitle span {
    color: #FF9500;
}
img.artify{
    width: 55%;
    z-index: 1;
    position: absolute;
    left: 50%;
    margin-left: -27.5%;
    opacity: 0;
    top: -3vw;
}
img.bandenthuis{
    width: 66%;
    z-index: 1;
    position: absolute;
    left: 50%;
    margin-left: -33%;
    opacity: 0;
    top: -260px;
}

img.philipssnooze{
    width: 70%;
    z-index: 1;
    position: absolute;
    left: 50%;
    margin-left: -35%;
    opacity: 0;
    top: -260px;
}
.caseimg{
    position: relative;
    width: 100%;
    left: 50%;
    margin-left: -50%;
}
.caseimg .primary_btn{
	position: absolute;
    top: -30px;
    right: 0;	
}


/* BTN HOVER LINE */
.primary_btn, .primary_btn_left {
	color: #FFF;
	transition: all 0.4s;
	position: relative;
}
.primary_btn::before, .primary_btn_left::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	border-radius:50px;
	background-color: rgba(255,255,255,0.1);
	transition: all 0.3s;
}
.primary_btn:hover::before, .primary_btn_left:hover::before, .mailicon:hover::before, .dribbbleicon:hover::before, .instaicon:hover::before, .linkedicon:hover::before, footer .mailbtn:hover::before{
	opacity: 0 ;
	transform: scale(0.5,0.5);
}
.primary_btn::after, .primary_btn_left::after {
	content: '';
	position: absolute;
	top: -2px;
	left: -2px;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0;
	transition: all 0.3s;
	border: 1.5px solid rgba(0, 0, 0, 1);
	transform: scale(1.35,1.35);
	border-radius:60px;
}
.primary_btn:hover::after, .primary_btn_left:hover::after, .mailicon:hover::after, .dribbbleicon:hover::after, .instaicon:hover::after, .linkedicon:hover::after {
	opacity: 1;
	transform: scale(1,1);
}
.primary_btn:hover, .caseimg .primary_btn_left:hover, .mailicon:hover, .dribbbleicon:hover, .instaicon:hover, .linkedicon:hover{
transform: scale(0.85,0.85);
}

/* MAILICON HOVER LINE */
.mailicon, .dribbbleicon, .instaicon, .linkedicon, footer .mailbtn {
	color: #FFF;
	transition: all 0.4s;
	position: relative;
}
.mailicon::before, .dribbbleicon::before, .instaicon::before, .linkedicon::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	border-radius:50px;
	background-color: rgba(255, 255, 255, 0);
	transition: all 0.3s;
}
.mailicon::after, .dribbbleicon::after, .instaicon::after, .linkedicon::after {
	content: '';
	position: absolute;
	top: -2px;
	left: -2px;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0;
	transition: all 0.3s;
	border: 1.5px solid rgba(255, 255, 255, 1);
	transform: scale(1.2,1.2);
	border-radius:60px;
}






.caseimg .primary_btn_left{
	position: relative;
    top: -30px;
    left: 0;
}

.primary_btn_mobile{
	display: none;
}
.mailicon, .dribbbleicon, .instaicon, .linkedicon{
    height: 48px;
    width: 48px;
    border-radius: 60px;
    background: rgba(0, 0, 0, 0);
    cursor: pointer;
    background-repeat: no-repeat;
    border: 1.8px solid #3D3D3D;		
}
.mailicon{ 
	background-image: url(../images/openmail.svg);
	background-position: bottom 14px right 15px;
}
.dribbbleicon{
    background-image: url(../images/dribbbleicon.svg);
	background-position: bottom 12px right 12px;
    background-size: 24px 24px;	
}
.instaicon{
    background-image: url(../images/instaicon.svg);
    background-position: bottom 13px right 13px;
    background-size: 23px 23px;	
}
.linkedicon{
    background-image: url(../images/linkedicon.svg);
	background-position: bottom 14px right 13px;
    background-size: 21px 21px;	
}
.primary_btn_left{
    height: 50px;
    width: 50px;
    border-radius: 60px;
    background: white;
    cursor: pointer;
    background-image: url(../images/arrow_left.svg);
    background-repeat: no-repeat;
    background-position: center;
    border: 1px solid #E5E5E5;		
}
.primary_btn, .primary_btn_mobile, .primary_btn_artify01{
    height: 50px;
    width: 50px;
    border-radius: 60px;
    background: white;
    cursor: pointer;
    background-image: url(../images/arrow.svg);
    background-repeat: no-repeat;
    background-position: center;
    border: 1px solid #E5E5E5;	
}

.primary_btn_artify01{
	display: block;
	position: absolute;
    top: -12px;
    transform: rotate(90deg);
	left: 0; 
	right: 0; 
	margin-left: auto; 
	margin-right: auto; 
	width: 50px;    
	border: none; 
}
.interactiondesign .primary_btn_artify01{
	top:-108px;
}

/*
.caseimg .primary_btn:hover, .caseimg .primary_btn_left:hover{
	border: 1px solid #000;
	transition: all .20s ease-in;
}
*/
#caseintro{
	margin-top: 80px;
    display: inline-block;
}

#caseintro ul{
	display: inline-block;
    padding: 0;
    margin-top: 24px;
    margin-bottom: 0;
}
#caseintro .tags{
    background: #fff;
    display: inline-block;
    font-size: 14px;
    line-height: 40px;
    padding: 0 20px;
    border-radius: 30px;
    color: #20272F;
    margin: 7.5px 4px;
    border: 1px solid #E5E5E5;
    letter-spacing: 0.2px;	
}
#caseintro .year{
	color: #CCCCCC;
	margin-top: 10px;
}
#casezoom01{
	margin-top: 100px;
}
.snoozecontainer img.snoozezoom02, .snoozecontainer img.phone, .snoozecontainer img.mobilewireframe, .postercontainer img.snoozezoom01, .postercontainer img.snoozezoom02{
	width: 100%;
	margin-top: 60px;
}
.snoozezoom01{
	width: 70%;
	margin-top: 40px;
}
#casezoom01 .phone, #casezoom02 .mobilewireframe{
	display: none;
}
#casezoom02{
	margin-top: -7vw;
	position: relative;
}

#casezoom02 h2, #finalposter h2, #casezoom03 h2, .interfacedesign h2{
	color: #fff;
}
#casefooter, #casefootermobile{
	position: relative;
    display: inline-block;
    margin-top: -120px;	
}
#casefooter img, #casefootermobile img{
	width: 100vw;
    position: relative;
    z-index: -1;
    margin-left: -50vw;
    left: 50%;
    height: auto;	
}
#blackbar03 {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    height: 70em;
    top: 35em;
    background: #000;
    width: 100vw;
    z-index: -2;
}
.tussenblok{
	height: 50px; 
	display: inline-block; 
	width: 100%;
}
/* --------------------- VINSENSE -------------------- */

.vinsensecontainer #caseintro ul{
	width: 70%;
}

.vinsensecontainer .casetitle{
	width: 830px;
	margin-left: -415px;
}
.vinsensecontainer .tussenblok {
    height: 80px;
}
.vinsensecontainer h2{
	width: 100%;
}
.orderof{
	margin-top: 20px;
}
.orderof img{
	width: 190px;
	margin-top: 10px;
	cursor: pointer;
}
.vinsensecontainer #casezoom01{
	margin-top: 45px;
}
.artifyorder img{
	width: 200px;
	margin-top: -20px;
}
img.vinframe01, img.vinframe02{
	width: 48.6%;
	margin-top: 35px;
	position: relative;
	border-radius: 10px;
	margin: 45px 0 0 0;
}
img.vinframe01{
	margin-right: 11px;
}
img.vinframe02{
	top: 80px;
	margin-left: 11px;
}
.vinsensecontainer img.snoozezoom02{
	width: 50%;
	margin-top: 45px;
}
.bandencontainer img.snoozezoom02{
	width: 100%;
}
.vinsensecontainer img.snoozezoom03{
    width: 100%;
    margin-top: -160px;
    z-index: -1;
}
.vinsensecontainer #casezoom02{
	margin-top: -2vw;
}
.snoozecontainer #casezoom02{
	margin-top: 0;
}
.vinsensecontainer #casezoom02 #blackbar03{
	height: 74em;
}
.vinsensecontainer #casefooter{
	margin-top: -105px;
}

.vinsensecontainer #casezoom02 h2, .vinsensecontainer #casezoom03 h2{
	width: 50%;
}
.vinsensecontainer #casezoom02 h2{
	padding-top: 160px;
}
.artifycontainer #casezoom02 h2{
	padding-top: 100px;	
}
.snoozecontainer #casezoom02 h2{
	padding-top: 30px;
}
.vinsensecontainer #casezoom03{
	margin-top: 30px;
	position: relative;
	z-index: -1;
}
.vinsensecontainer #casezoom03 #blackbar03{
	height: 120%;
}
.vinsensecontainer #casezoom03 .overflow{
   
}

/* --------------------- BANDENTHUIS -------------------- */

.bandencontainer .orderof img {
    width: 60px;	
}

.bandencontainer img.snoozezoom03 {
    width: 53.3%;
    margin: 0;
    margin-top: 50px;
}
.bandencontainer span{
	color: #FF9500;
}

/*
h3{
	color: #fff;
	font-size: 30px;
	margin: 0;
}
*/
.bandaction01, .bandaction02 {
	width: 48.6%;
    display: inline-block;
    position: relative;
    margin-top: 45px;
}
.bandaction01{
	margin-right: 11px;
}
.bandaction01 span, .bandaction02 span{
	color: #fff;
    font-size: 30px;
    margin: 0;
    font-weight: bold;
}
.bandaction02{
	top: 80px;
	margin-left: 11px;
}
.snoozecontainer #casezoom02 img{
	width: 70%;
}
.bandencontainer img.snoozezoom02{
	margin-top: 40px;
}
.snoozecontainer img.snoozezoom02{
	margin-top: -10px;
}
.bandencontainer #casezoom02 #blackbar03 {
    height: 273%;
    top: 100%;
}
.snoozecontainer #casezoom02 #blackbar03{
	height: 140%;
	top:325px;
}
.visualcircle{
	position: absolute;
    left: 50%;
    margin-left:-258px;
	border-radius: 50%;
	background: rgb(0,0,0);
	background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(255, 255, 255, 1) 100%);
	width: 516px;
    height: 516px;
    opacity: 0.4;
    z-index: -1;
    top: 155px;
}
#bandenpresentatie{
	margin-top: 190px;
	position: relative;
}
#bandenpresentatie h2{
	color: #fff;
}

.iframe-container {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
  margin-top: 70px;
}
 
.iframe-container iframe {
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
   z-index: 1;
   border-radius: 10px;
}

#bandenpresentatie #dots{
	right: -30px;
    top: 85px;
    position: absolute;
    z-index: -1;
    opacity: 0.2;
}
#bandenpresentatie #bandelement{
    left: 2px;
    top: 336px;
    position: absolute;
    z-index: -1;
    opacity: 1;
}

.bandencontainer #casezoom03 {
    margin-top: 145px;
}

.bandencontainer #casezoom03 #blackbar03 {
    height: 125%;
    top: 54%;
}

.bandencontainer .casefooter{
	margin-top: 110px;
	z-index: 1;
}


/* --------------------- ARTIFY -------------------- */
.artifycontainer img.artify {
    width: 50%;
    margin-left: -23%;
    top: -280px;
}
.artifycontainer #casezoom02{
	margin-top: 20px;	
}
.artifycontainer #casezoom01{
	margin-top: 0;
}
.artifycontainer .intromobile{
	display: none;
}

#casezoom02 .font, #casezoom02 .colors, #casezoom02 .visual{
	width: 29%;
	display: inline-block;
	margin-top: 60px;
}
#casezoom02 .font img{
	width: 85%;
}
#casezoom02 .colors{
	padding: 0 0px;
}
#casezoom02 .colors img{
	width: 42%;
	margin: 0 auto;
    display: block;
}
#casezoom02 .visual img{
	width: 57%
}
#casezoom02 .visuallogo{
	width: 838px;
	margin: 0 auto;
	margin-top: 120px;
}
#casezoom02 .visuallogo img{
	width: 100%;
}
#casezoom02 .tag{
	color: #de1c62;
	background: #420137;
	display: inline-block;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0.5px;
    margin-top: 40px;
}
.artifycontainer #casezoom02 #casefooter{
	margin-top: -170px;
    z-index: -1;
}
.artifycontainer #casezoom02 #blackbar03{
	height: 68em;
	top: 35em;
}
.artifycontainer #casezoom02 p, .interfacedesign p{
	color: #c89dad;
}
.artifycontainer .interactiondesign{
	margin-top: 170px;
	position: relative;
}
.artifycontainer .interactiondesign strong{
	color: black;
	font-weight: 500;
}
.artifycontainer .interactiondesign img{
	width: 100%;
}

.artifycontainer .interfacedesign{
	margin-top: 200px;
	position: relative;
}
.artifycontainer .interfacedesign #blackbar03{
    margin-top: -16vw;
}
.artifycontainer .interfacedesign{
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    z-index: -1;
 }   
.artifycontainer .interfacedesign img.screens{
 	width: 100%;
 	margin-top: -50px;
 	z-index: -1;
    position: relative;
 }
 .interfacedesign h2{
	 margin-top: -12vw;
 }
.interfacedesign p{
	position: relative;
	z-index: 1;
}
.artifycontainer footer{
	margin-top: -120px;
}
#casefootermobile, .interactionmobile{
	display: none;
}
.screensmobile{
	display: none;
}




























/* --------------------- FOOTER -------------------- */

footer{ 
	margin-top: 80px;
	background: #000000;
	height: 90px;
    width: 100vw;
    position: relative;
    margin-left: -50vw;
    left: 50%;	
}
footer nav{
	position: absolute;
	margin-left: auto; 
    width: 230px;
    padding-top: 20px;
    padding-right:20px;
    right: 0;
    top: 0;
}
footer nav ul li a{
	font-size: 16px;
}
footer p{
	color: #ededed;;
}
footer .logo{
    padding-top: 31px;
    padding-left: 38px;
}
footer li:nth-child(2), footer li:nth-child(3), footer li:nth-child(4){
	list-style: none;
	display: inline-block;
	width: 50px;
	height: 50px;
	background-size: 50px 50px;
	background-repeat: no-repeat;
	cursor: pointer;
}

footer .mailbtn{
	color: #fff;
	border: 1.5px solid #3D3D3D;
}
footer .mailicon-small{
	background-image: url(../images/mailiconwhite.svg);
}







.copyright{
	width: 100% !important;
	color: #545454;
	font-size: 14px;
	font-style: italic;
    margin: 0 auto;
    padding: 10px 0;
	margin-top: 1px;
    background: #000000;
}
#references{
	width: 100vw;
    position: relative;
    z-index: -1;
    margin-left: -50vw;
    left: 50%;
    background: #141414;
    height: 40px
}
#references p{
	font-size: 14px;
	line-height: 21px;
	padding: 0;
	padding-top: 9px;
	color: #424242;
	margin: 0;
}
.bronicon{
	cursor: pointer;
}
.bronvermelding{
	width: 100vw;
    position: relative;
    margin-left: -50vw !important;
    left: 50%;
    background: #141414;
    padding: 10px 0 !important;	
}