html, body{
position: absolute;
font-size: 18px;
-webkit-font-size: 18px;
-webkit-text-size-adjust: none;
border: 0;
height: 100%;
width: 100%;
margin: 0;
background: #fff;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
}



#nav{
	font-family: 'Roboto Light', sans-serif;
	font-weight: 400;
	float: right;
	margin-top: 9px;
}

	.menu{
		color: #888;
		margin-left: 8px;
	}
	
	.menu:visited{
		color: #888;
	}
	
	.current:visited{
		color:black;
	}
	
	.menu:hover{
		color: #444;
	}
	
	.current{
		color: black;
	}

#container{
width:100%;
height:auto;
overflow: hidden;
background: #fff;
}


#peek{
	display: none;
	position: fixed;
	height: 250px;
	bottom: 0;
	left: 0;
	width: 600px;
	overflow: hidden;
	background: #ff4d2e;
	z-index: -10;
}

#header{
width: 90%;
max-width: 700px;
margin: 10px auto;
padding-top: 100px;
height: auto;
clear: both;
}	

	header h1{
		float: left;
		margin-bottom: 5px;
		overflow: hidden;
	}
	
	header a:visited, header a{
		color: #000;
	}
	
	.biggie{
	  font-size: 50px !important;
  }
		
	.header{
		padding-left: 60px;
	}
	
	.myname{
	padding-left: 0;
	}
	
	.backarrow{
		position:relative;
		display: inline-block;
		width:60px;
		margin-left: -60px;
		//margin-right: 10px;
		color: #999 !important;
		top: -.1em;
		//height: 3.2em;
	}
		
		.backarrow:hover{
			cursor: pointer;
			color: black !important;
		}

.content{
width: 90%;
max-width:700px;
height: auto;
margin: 0 auto;
padding: 1em;
clear: both;
}

#content{
opacity: 0;
-webkit-transition: 0.5s ease;
}


.myface{
	width: 70px;
	margin-bottom: -10px;
}

.flourish{
	display:inline-block; 
	margin:0; 
	transform: translateY(-5px);
	-webkit-transform: translateY(-5px);
}

.topic{
padding-top: 10px;
margin-bottom: 4em;
clear: both;
height: auto;
}


	
	.about{
	position: relative;
	width: 28%;
	padding-right: 8%;
	float: left;
	}
		
		.about ul{
			margin-top: 5px;
		}
	
		.about li{
			padding-left: 33px;
		}
		
		.about .busy{
			margin-left: -33px;
		}
	
	.third{
		padding: 0;
	}
	
	.topictitle{
		font-size: 2em;
		padding-bottom: 20px;
		padding-top: 1em;

	}

	

.scrollsection{
	width: 100%;
	margin-top: 0;
	margin-bottom: 1em;
	background: #fcfcfc;
}

	.scrollenvelope{
		margin: 0 auto;
		max-width: 800px;
		position: relative;
		overflow-x: auto;
		background: #fcfcfc;
		padding-left: 50px;
		padding-top: 65px;
		box-sizing: border-box;
	}

		.scrollpane{
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			align-items: center;
		}
	
		.homecarrousel{
			top: 0;
			position: relative;
			width: 300px;
			flex-shrink: 0;
			padding-right: 50px;
			padding-bottom: 65px;
			transition: all 0.1s;
		}

		.begin{
			margin-left: auto;
		}

		.end{
			margin-right: auto;
		}
		
		.homecarrousel > a > .photo{
			display: flex;
			align-items: center;
			justify-content: center;
			aspect-ratio: 1 / 1;
		}

		.photo img{
			margin: 0;
			aspect-ratio: 1 / 1;
			object-fit: cover;
		}

		.sw{
			background: rgb(255, 249, 215);
		}

		.bm{
			background: rgb(255, 180, 225);;
		}

		.hero-icon{
			position: relative;
			font-size: 6em;
		}



	
	.scrollenvelope::-webkit-scrollbar {
    height: 50px;
    width: 25px;
}

	.scrollenvelope::-webkit-scrollbar-thumb {
		background: #ddd;
		border-radius: 25px;
		border: 20px #fcfcfc solid;
	}
	
	.scrollsection .button{
		display:none;
	}
	
	.scrollsection .homecarrousel:hover{
		transform: translateY(-5px);
	}
		
		.pijltje{
			opacity: 0;
			//margin-left: 3px;
			transition: all 0.1s;
		}
		
		.homecarrousel:hover .pijltje{
			opacity: 1;
		}
	
	.scrollsection h2{
		margin-top:-10px;
		margin-left: 0px;
		padding-left: 5px;
		padding-top: 15px;
	}
	
.galleryitem{
	margin-bottom: 70px;
	-webkit-transition: 0.5s ease;
}
	
	.workoverview{
			clear: both;
	}
	
.suggestion{
	width: 50%;
	float: left;
	padding: 15px;
	box-sizing: border-box;
}

#spacer{
	width: 100%;
	height: 10px;
	clear: both;
}

#footer{
	background:rgb(122, 44, 246);
	width: 100%;
	padding-top: 25px;
	color: white;
	clear: both;
	scroll-behavior: smooth;
}

h1{
font-family: 'Oswald';
font-style: normal;
font-weight: 400;
font-size: 40px;
text-align:left;
margin: 0;
clear: both;
}

h2{
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-size: 1.15em;
line-height: 1.3em;
margin: 0;
padding: .6em 0 .6em 0;
margin-left: 1px;
color: #444;
}

	.year{
		font-weight: 300;
		margin-left: 8px;
		margin-bottom: 5px;
		color: #aaa;
		color: #aaa;
	}
	

h3{
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-size: 1em;
margin: 0;
margin-bottom: -10px;
color: #444;
clear: both;
}

	h3{
		margin-top: .6em;
	}

	.about h3{
		padding-bottom: 5px;
	}

p{
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 1em;
color: #444;
line-height: 26px;
//padding: 5px 0;
clear: both;
}

	p{
		//margin-bottom: 3em;
	}

	.copyright{
	color: #fff; 
	//text-align: center;
	font-size: 0.9em;
	}
	
	#seemore{
		display: inline-block;
		font-weight: 400;
	}
	
	
	#thoughts{
		display: none;
		background: FloralWhite;
		box-sizing: content-box;
		border: 40px solid FloralWhite;
		margin-bottom: 1em;
	}
	
		.whitespace{
			width: 120%;
			height: 40px;
			position: relative;
			top: -40px;
			left: -40px;
			background: white;
			z-index:100;
		}
	
	p a, p a:visited{
		color: #444;
	}

ol, ul{
padding-left: 1.1em;
font-family: 'Roboto', sans-serif;
font-weight: 300;
color: #444;
}

	ol li{
	padding-left: 10px;	
	}
	

	.project ol,ul{
		margin-bottom: 2.5em;
	}
	
	.inlinelist{
		margin-top: -2.5em;
	}

li{
line-height: 1.6em;
padding: 3px;
//overflow: hidden;
clear: both;
list-style-position: outside;
}


.wis{
	 color: #655d56;  
}

.buttons{
		//height: 65px;
		margin-bottom: 15px;
		padding: 0;
		overflow: visible;
	}

.button{
display: inline-block;
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: .9em;
padding: 15px;
border-radius: 4px;
-webkit-box-shadow: inset 0px -4px 0px 0px rgba(0,0,0,0.15);
-moz-box-shadow: inset 0px -4px 0px 0px rgba(0,0,0,0.15);
box-shadow: inset 0px -4px 0px 0px rgba(0,0,0,0.15);
clear: both;
//transition: ease all 0.04s;
}
	
	.button:hover{//box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05), 0 3px 20px 0 rgba(0, 0, 0, 0.05);
	transform: translateY(-2px);
	padding-bottom: 17px;
	margin-bottom: -2px;
	-webkit-box-shadow: inset 0px -6 0px 0px rgba(0,0,0,0.15);
-moz-box-shadow: inset 0px -6px 0px 0px rgba(0,0,0,0.15);
box-shadow: inset 0px -6px 0px 0px rgba(0,0,0,0.15);
	}
	.button:active{ 
	transform: translateY(2px);
	margin-bottom: 0px;
	padding-bottom: 15px;
	-webkit-box-shadow: inset 0px -1px 0px 0px rgba(0,0,0,0.15);
-moz-box-shadow: inset 0px -1px 0px 0px rgba(0,0,0,0.15);
box-shadow: inset 0px -1px 0px 0px rgba(0,0,0,0.15);
	}

	.normal{
		//display:none;
		color: white;
		opacity: 0.7;
		margin-right: 5px;
	}
	
		.normal:hover{
			opacity: 0.8;
		}
	
	.white{
		background-color: rgba(255,255,255,0.97);
		color: rgb(122, 44, 246)
	}
		/* .white:hover{ */
			/* background-color: white; */
			/* //box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.07), 0 3px 20px 0 rgba(0, 0, 0, 0.07); */
			/* transform: translateY(-2px); */
	/* padding-bottom: 17px; */
	/* margin-bottom: 0px; */
	/* -webkit-box-shadow: inset 0px -4px 0px 0px rgba(0,0,0,0.15); */
/* -moz-box-shadow: inset 0px -4px 0px 0px rgba(0,0,0,0.15); */
/* box-shadow: inset 0px -4px 0px 0px rgba(0,0,0,0.15); */
			/* } */
	

	.totop{
		color: white;
		opacity: 0.7;
		background: transparent;
		box-shadow: none;
		text-align: left;
		box-shadow: none;
		padding: 1em 5px;
	}
	
	.totop:hover{
		box-shadow: none;
		opacity: 1;
	}
	
	.go{
		display: inline-block;
		
	}
	
	.essay{
	margin-top: 10px
	}
	
	.home{
		margin: -10px 10px 0 0;
	}
	
	
a{
text-decoration: none;
cursor: pointer;
clear: both;

}

li a{
	color: #444;
}

li a:visited,{
	color: #444;
}

.busy{
display: inline-block;
width: 33px;
//float: left;
//height: 40px;
}
	
	.details li{
		padding-left: 100px;
	}
	
	.detail{
		width: 100px;
		margin-left: -99px;
		//height: 30px;
		font-weight: 400;
	}
	
		
	
	.photo{
	width: 100%;
	height: auto;
	margin: 10px 0 0;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05), 0 3px 20px 0 rgba(0, 0, 0, 0.05);
	outline: 0;
	border: 0;
	}
		
		
		.story{
			margin: 30px 0;
		}
		
		.start{
			margin-bottom: 10px;
		}

		.sug{
			margin: 0 0 10px 0;
		}
		
		.support{
			display: none;
		}
		
		.mockupleft{
			width: 47%;
			height: auto;
			float: left;
			margin-right:6% !important;
		}
		
		.mockupright{
			width: 47%;
			height: auto;
			float: left;
		}
		
		.newtab{
			width: 20px;
			height: 20px;
			margin-bottom: -4px;
			margin-left:1px; 
			opacity: 0.75;
		}

	.hideondesktop{
	  display: none;
  }

.blck{
	color: black;
}

/* mobile */
@media screen and (max-width: 600px) {
  html,body{
	font-size: 100%;
  }
  
  h1 {
    font-size: 30px;
  }
  
  h2{
	  line-height: 1.45em;
  }
  
  h3{
		margin-top: 1em;
	}	
	
	p{
		margin-bottom: 2em;
	}	
  
  .flourish{
	display:inline-block; 
	margin:0; 
	transform: translateY(-2px);
	-webkit-transform: translateY(-2px);
}
  
  .vis{
	  font-size: 26px !important;
	  line-height: 1.4em;
  }
  
  .biggie{
	  font-size: 45px !important;
	  margin-bottom: -.2em;
  }
  
  .hideondesktop{
	  display: inline;
  }
  
  #header{
	padding-top: 40px;
  }	
  
  
  .busy{
	  //height: 30px;
  }
  
  a .busy{
	  height: auto;
  }

  
  .galleryitem{
	margin-bottom: 40px;
	}
	
	.year{
		display:none;
	}

#footer{
	padding-top: 10px;
}

.header{
line-height: 1.1em;
padding-left: 45px;
}

.myname{
	padding-left: 0;
}

.myface{
	width: 50px;
	margin-bottom: -5px;
}

.backarrow{
	width: 45px;
	margin-left: -45px;
}

#nav{
	margin-top: 2.95em;
}

.about{
	width: 100%;
	padding: 0;
	margin-bottom: 10px;
	margin-left: 0px;
	}

.intro{
	margin: 10px 0 15px 	0;
}

.normal{
	//display: none;
}

.exception{
	display: inline-block;
	margin: 10px 3px;
}

.galleryitem h2{
	padding: .5em 0;
}

.projectnav{
	display: none;
}



.story{
	margin: 15px 0;
}

.flick{
	margin: 30px 0;
}

.suggestion{
	width: 50%;
	padding: 5px;
	margin-top: 20px;
}

.project p{
	padding: 1px;
}

.main-carousel{
	height: 230px;
	background-size: cover;
}

.act{
	height: 80px;
}

.square{
	height: 350px;
}

.go{
	display: inline-block;
	//width: 100%;
	//box-sizing: border-box;
	//text-align: center;
}

.ani{
	display: none;
}

.support{
display: block;	
}

.film{
	height: 200px;
}

#thoughts{
		display: none;
		background: FloralWhite;
		box-sizing: content-box;
		border: 20px solid FloralWhite;
	}

.home{
		margin: -20px 10px 0 0;
	}

.inlinelist{
		margin-top: -1.5em;
	}

ol, ul{
padding-left: 23px;
}


	
		.homecarrousel{
			top: 0;
			position: relative;
			//width: 265px;
			padding-right: 20px;
			margin-bottom: 10px;
			transition: all 0.1s;
			padding-bottom: 20px;
			
		}
		
.scrollsection{
	width: 100%;
	border-bottom: 10px solid #fcfcfc;
}

.scrollenvelope{
	margin-right:0;
	padding-left: 5vw;
	padding-top: 20px;
}

.scrolltitle{
	width: 90%;
	margin: 0 auto;
}

}	

/* iphone 678SE */
@media screen and (max-width: 375px) {
  .biggie{
	 font-size: 40px !important;
	 margin-bottom: 0 !important;
	 padding-bottom: 1rem !important;
  }

	.vis{
		//padding-top: 0 !important;
	}

.myface{
	width: 60px;
	//margin-bottom: -5px;
}


.scrollsection{
	width: 100%;
	
}

.scrollenvelope{
		position: relative;
		overflow-x: scroll;
		background: #fcfcfc;
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 10px;
		left: 0;
		//box-sizing: border-box;
	}
	

.scrollpane.selection{
	min-width:900px;
	}
	
	.scrollpane.otherworks{
	min-width:1200px;
	}
	
		.homecarrousel{
			top: 0;
			position: relative;
			float: left;
			width: 280px;
			padding-right: 20px;
			margin-bottom: 10px;
			transition: all 0.1s;
			padding-bottom: 10px;
			
		}

.scrolltitle{
	width: 90%;
	margin: 0 auto;
}	

.rotatefast{
	line-height: 0;
}