@charset "utf-8";
/* ---------------------PAGE LOAD ANIMATIONS-------------- */

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

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

/* Hometitle p */
.loaded #hometitle p{
   animation: moveUp 1s ease-in-out 0.1s 1 forwards;
} 
@keyframes moveUp {
  100% { margin-top: 10px; opacity: 1; }
}
/* Casetitle */
.loaded .casetitle{
   animation: casetitleUp 1s ease-in-out 0.15s 1 forwards;
} 
@keyframes casetitleUp {
  100% { top: 34vw; opacity: 1; }
}

lottie-player{
	display: none;
}
/* ----------------------------------------------------- */

#clientbar, #socials{ display: none;
}
#clientbar2{
	display: block;
}
span.extra{display: none;}

#orpetron{
    bottom: 40px;
}
#orpetron img{
	max-height: 60px;
}


#animation #dots, #background{
	display: none;
}
#indexfooter img{
	top: -120px;
}
#blackbar02{
	height: 240px;
	margin-top: -230px;
}
#container{
	max-width: 86%;
}
#backgroundmobile{
    display: block;
    width: 100%;
    height: auto;
    z-index: -2;
}
#status{ 
	top: 8px;
	z-index: -1;
}
#statusbar p{
	font-size: 12px;
	line-height: 22px;
}
#statusbar{
	padding: 4px 10px;
}

#topbar {
	opacity: 0;
    left: 20px;
    top: 40px;
    right: 20px;
}
nav li:nth-child(1){
	margin-right: 7px;
}
.logo-slider{
	margin-top: 6px;
}
.logo-slider > div{
	background-size: 75%;
}
#clientbar2{
	height: 48px;
	padding: 10px 0;
	top: -38px;
}
h2{
	width: 100%;
    font-size: 22px;
    line-height: 24px;
}
#casesection{
	margin-top: -10px;
}
#casesection h3 {
	margin-bottom: 15px;
}
.cases img {
    max-width: 100%;
    max-height: 100%;
    z-index: -1;
    right: 0 !important;
}
.cases .title {
	z-index: 2;
	padding: 12px 20px 0 20px;
}
.cases .subtitle{
	padding: 20px 0 0 20px;	
}
.instacases img{
	width: 100%;
    padding: 0 !important;
    margin-bottom: 15px;
}
#instasection {
    margin-top: 34px;
}
#animationsection iframe {
    width: 100%;
    height: 49vw;
}
#animationsection {
	width: 100%;
}
#animationsection h4{
	padding: 30px 20px 0 20px;
	font-size: 18px;
}
#animationlist ul{
	padding-left: 20px;
	padding-bottom: 30px;
}
#animationsection iframe{
	width: 100%;
}
#animationlist{
	width: 100%;
    margin: 0;
    padding: 0;
    margin-top: -1px;
}
#animationsection {
    margin-top: 14px;
}
h5{
	font-size: 30px;
	line-height: 38px;
}
#quote{
	width: 100%;
	margin-top: 40px;
}
#quotetekst #line{
	height: 130px;
}
#quote img{
	width: 100%;
}
#quotetekst{
    width: 100%;
    top: 0;
    position: relative;
    transform: none;
    margin: 0;
    margin-top: 20px;
}
#quotetekst h5{
	margin-right: 10px;
}
#quotetekst img{
	width: 53px;
	margin-left: 0;
}
#ctablock{
	margin-top: 40px;
	width: 100% !important;
}
#ctablock h3{
	font-size: 24px;
	line-height: 28px;
}
#ctablock p{
	width: 85% !important;
}
#aboutintro p, #caseintro p, .artifycontainer p{
	width: 95%;
}

nav li a{
	font-size: 14px;
}
h1 {
	font-size: 35px;
	line-height: 40px;  
    text-align: center !important;
}

#hometitle p{
	opacity: 0;
    font-size: 13px;
    margin-top: 25px;
	text-align: center;
}
.logo img:nth-child(1){
	display: none;
}
.logo img:nth-child(2){
	display: block;
	width: 35px;
	margin: 0 auto;
}
#hometitle {
	top: 25vw;
}
.projectimgleft{
    width: 80vw !important;
    position: relative;
    margin-left: -40vw !important;
    left: 50%;
}
.projectimgright{
    width: 80vw !important;
    position: relative;
    margin-right: -40vw !important;
    right: 50%;
}
.projects, #project01, #project02, #project03, #project04{
	display: none;
}

.cases{
	width: 100%;
	margin: 0;
	z-index: 1;
	height: 335px;
}
#case02{
	margin: 20px 0;
}

#animation{
	display: inline-block;
	margin-top: -10px;
}
#animation h1{
	width: auto;
	margin-top: 25px;
}
#animationlist ul li{
	margin-right: 20px;
	line-height: 36px;
    font-size: 12px;
}
#animation #character {
	display: none;
}
#animation iframe{
	width: 100%;
	height: 50vw;
}
#photos{ display: none;}

#photomobile{ 
	display: block;
	width: 100vw;
	position: relative;
	z-index: -1;
	margin-left: -50vw;
	left: 50%;
	height: auto;
}
#photography {
    margin-top: 18vw;
}
#photography #phototitle {
    top: 122vw;
}
footer {
	margin-top: 60px;
	height: auto;
}
#footermail{
	margin-top: 16px;
	width: 236px;
	padding: 0;
}
footer li:nth-child(1){
	display: none;
}
footer .logo{
	float:none;
	padding: 0;
	display: inline-block;
	margin-top: 30px;
}
footer nav{
	position: relative;
	margin: 0px;
	margin-top: 20px;
	width: auto;
	padding: 0;
}
nav ul{
	padding: 0;
}
.copyright{
    margin-top: -5px;	
}
/* --------------------- ABOUTPAGE -------------------- */

#aboutintro p{
	width: 100%;
}
#aboutintro{
	margin-top: -20px;
}
img.graduate{
	width: 75px;
	z-index: 1;
}
img.school{
	width: 55% !important;
}

#education #title, #experience #title{
	width: 100%;
	position: initial;
	float: none;
}
#education #title h2, #experience #title h2, #education #title p, #experience #title p{
	text-align: center;
}
#education, #experience{
	margin-top: 36px;
}
#education #blocks, #experience #blocks{
	width: 100%;
	left: 0;
	height: auto;
	float: none;
}
#experienceblock{
	width: 100%;
	margin: 10px 0;
	height: 225px;
}
p.blocktitle{
	top:160px;
}
p.blockyear{
	top: 185px;
}
.educationblock{
	position: relative;
	width: 100%;
	margin-top: 20px;
	height: 225px;
}
#education02, #experience02, #experience01, #education03, #experience03, #experience04{
	top: 0px;
	right: 0;
	left: 0;
}
.experience06 img, .experience07 img{ 
	width: 25% !important;
	transform: translateY(-70%);
}
#experience #title{
	float: none;
}

/* --------------------- PHILIPS SNOOZE -------------------- */
.snoozecontainer img.phone{
	width: 80%;
	margin: 0 auto;
	margin-top: 40px;
}
.snoozecontainer #casezoom02 img{
	width: 90%;
	margin: 0 auto;
}
.snoozecontainer #casezoom02 #blackbar03{
	height: 205%;
	top: 40%;
}
.philipssnooze, .tussenblok{
	display: none;
}
.philipssnoozemobile {
	display: block;
	opacity: 0;
	margin-top: 8vw;
}
.primary_btn_mobile{
	display: block;
	position: absolute;
    top: -25px;
    transform: rotate(90deg);
	left: 0; 
	right: 0; 
	margin-left: auto; 
	margin-right: auto; 
	width: 50px;  
	border: none;   
}
#casezoom02 .primary_btn_artify01{
    top: -75px;
}
.interactiondesign .primary_btn_artify01{
	top: -70px;
}

.caseimg .primary_btn, .caseimg .primary_btn_left{
	display: none;
}

img.philipssnoozemobile {
    width: 118.2%;
    z-index: 1;
    position: absolute;
    left: 50%;
    margin-left: -60%;
}
.caseimg{
	top: 70vw;
}
.casetitle, .vinsensecontainer .casetitle{
    width: 86%;
    left: 50%;
    margin-left: -43%;
    top: 38vw;
}    
#casezoom01{
	margin-top: 60px;
}
.snoozezoom01, .snoozecontainer .snoozezoom02{
	display: none;
}
#casezoom01 .phone, #casezoom02 .mobilewireframe{
	display: block;
}
#caseintro{
    margin-top: 40px;
    width: 100%;
}
#casezoom02{
	margin-top: 36px;
}
.snoozecontainer #blackbar03{
    top: 60%;
    height: 134%;
}
#blackbar04 {
    margin-top: -70px;
}
.snoozecontainer .casetitle{
	width: 76%;
	margin-left: -38%;
}

/* --------------------- VINSENSE -------------------- */

img.bandenthuis, img.artify{
	display: none;
}
.vinsensecontainer .philipssnooze, .tussenblok, .snoozezoom02{
	display: block;
}
.vinsensecontainer img.philipssnooze{
	width: 100%;
	margin-left: -50%;
}

.vinsensecontainer #caseintro ul {
    width: 100%;
}
#caseintro ul{
	margin-top: 14px;
}
.vinsensecontainer #casezoom01 {
    margin-top: 50px;
}
img.vinframe01, img.vinframe02 {
    width: 100%;
    margin: 0;
}
img.vinframe02 {
    top: 16px;
}
.vinsensecontainer #casezoom02 h2, .vinsensecontainer #casezoom03 h2 {
    width: 100%;
    padding: 0;
}
.vinsensecontainer img.snoozezoom02 {
    width: 100%;
}
.vinsensecontainer #casezoom02 h2{
	margin-top: 70px;
}
.vinsensecontainer #casezoom03 {
    margin-top: 25px;
}
.vinsensecontainer #casezoom03 .overflow{
    overflow-y: hidden;
}
.vinsensecontainer img.snoozezoom03 {
    width: 150%;
    margin-left: -25%;
}
.vinsensecontainer #casezoom03 #blackbar03 {
	height: 110%;
    top: 50%;
}
.vinsensecontainer #casezoom02 #blackbar03 {
	height: 120%;
    top: 51%;
}
.artifycontainer #casezoom02 {
    margin-top: 60px;
}



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


.bandencontainer .caseimg{
	top: 70vw;
}
.bandencontainer .philipssnooze, .bandencontainer .visualcircle{
	display: none;
}
.bandencontainer #caseintro{
	margin-top: 40px;
}
.bandencontainer .bandaction01, .bandencontainer .bandaction02{
	margin: 0;
	width: 100%;
}
h3{
	font-size: 20px;
	line-height: 22px;
}
.bandencontainer .bandaction02{
	top: 40px;
}
.bandencontainer #casezoom02 h2{
	margin-top: 65px;
	margin-bottom: 25px;
}
.bandencontainer img.snoozezoom02 {
    margin-top: 10px;
}
#bandenpresentatie {
    margin-top: 100px;
}
.bandencontainer #casezoom02 #blackbar03 {
    height: 225%;
    top: 50%;
}
.snoozecontainer #casezoom02 #blackbar03 {
    height: 280vw;
    top: 35vw;
}
.bandaction01 span, .bandaction02 span{
	font-size: 18px;
}
.iframe-container {
    margin-top: 13px;
}
.bandencontainer #casezoom03{
    margin-top: 73px;
}
#bandenpresentatie #dots {
display: none;
}
#bandenpresentatie #bandelement {
    left: -274px;
	top: -111px;
    transform: scale(0.35);
}
.bandencontainer img.snoozezoom03 {
    width: 110%;
    margin-left: -5%;
}
.bandencontainer .casefooter {
    margin-top: 64px;
}
.bandencontainer #casezoom03 #blackbar03 {
    height: 120%;
    top: 58%;
}



/* --------------------- ARTIFY -------------------- */


.artifycontainer .intromobile{
	display: block;
}
.artifycontainer .introdesktop{
	display: none;
}
.artifycontainer .philipssnooze{
	display: none;
}
.artifycontainer .philipssnoozemobile{
	left: 43%;
}

.artifycontainer .caseimg{
	top: 62vw;
}

.artifycontainer #casezoom01{
	margin-top: 130px;
}

.artifycontainer #casefooter{
	display: none;
}
.casefootermobile{
	display: block;
}
#casezoom02 .visuallogo{
	width: 100%;
}
.artifycontainer #casezoom02 h2 {
    margin-top: 20px;
}

#casezoom02 .font, #casezoom02 .colors, #casezoom02 .visual{
	width: 90%;
}

#casezoom02 .colors {
    padding: 40px 0;
}
.artifycontainer #casezoom02 #blackbar03{
	height: 110%;
}
.interactionmobile{
	display: block;
	margin-top: 60px;
}
.artifycontainer .interaction{
	display: none;
}
.artifycontainer .interactiondesign{
	margin-top: 120px;
}
.artifycontainer .interfacedesign {
    margin-top: 80px;
}
.interfacedesign h2{
	width: 90%;
	margin-top: 30px;
}
#casefootermobile{
	display: inline-block;
}
.screens{
	display: none;
}
.screensmobile{
	width: 100%;
	display: block;
	margin-top: -100px;
	z-index: -1;
    position: relative;
}
.artifyorder img{
	width: 150px;
}
.artifycontainer .interfacedesign #blackbar03 {
    height: 200vw;
    margin-top: -10vw;
}
.interfacep{
	margin-top: -40px;
	background: #000;
}
.interfacep p, .interfacep h2{
	width: 85% !important;
}
.interfacep h2{
	padding-top: 50px;
}
.artifycontainer .interfacedesign #blackbar03{
display: none;
}
.artifycontainer footer {
    margin-top: -153px;
}