/* ------------------------------------------------------------------------------------------------------------------------------ */ 
/* --- 1024 ADJUSTMENTS (all) --- concept: saving some room  -------------------------------------------------------------------- */ 
/* ------------------------------------------------------------------------------------------------------------------------------ */ 
@media only screen and 	(max-width: 1024px) {
/* --------------------------------------------------------------- */ 

/* ---------------------------------------- */
/*-----------   MENUS       --------------- */


.cookiealert {
	
	padding-left: 4.125rem;
}	

.menubutton {

	margin-left: 4.125rem;

}



.menubutton2 {
	
	left: calc( 100% - 7rem - 2rem );
}	

.mainmenu .languagemenu {
	
	margin-left: calc( 4.125rem + 7rem + 2rem );
	margin-top: calc( 1rem );
	
}	

.mainmenu .socialmenu {
	
	margin-left: calc( 4.125rem + 7rem + 2rem );
	
}


.mainmenu .socialmenu ul li {
	
	margin-right: 0.8rem;	
}	

	

.mainmenu .navmenu {
	
	margin-left: 4.125rem;
	
}

/* ---------------------------------------- */	
/*----------- TYPOGRAPHY      ------------- */
/* ---------------------------------------- */


h1 {
	
	margin: 0px;
	padding: 0px;
	/* padding & margin is position specific */
		
	font-size: 4.5vw;
	line-height: 4.5vw;	
	
} 

/* ---------------------------------------- */
/*-----------   CONTENT     --------------- */

div.topblock {

	
	padding-top: 0;  /* REMOVE 16:9 Aspect Ratio / 56.25%; */
	height: calc(100vh - 2rem);
	
}

div.textblock_bg_topblock {

	height: 50vh;
	
}

div.textblock_topblock {
	
	padding-bottom: 2rem;
	
}


div.textblock_topblock h3, div.textblock_topblock h1, div.textblock_topblock p {
	
	padding-left: 4.125rem;
}



div.textblock_topblock h1.mobile {
		
		display: none;
	} 


div.contentblock {
	
	padding-top: 3rem;
	padding-left: 1.5rem;
	padding-right: 3rem;

}



div.contentblock.fullscreen div.textblock h1, div.contentblock.fullscreen div.textblock p, div.contentblock.nextproject div.textblock h1, div.contentblock.nextproject div.textblock p  {
	
	padding-left: calc( 4.125rem + 7rem + 3rem );
	padding-right: 2rem;
	

}


/* ---------------------------------------- */
/*----------- PORTFOLIO     --------------- */


.portfolio.home h1{
	
	margin-top: 6rem;
	
	padding-left: calc( 4.125rem + 7rem + 3rem );
	padding-right: 4rem;
	padding-bottom: 5rem;

}

.portfoliocontainer {
	
	width: calc( 100% - 4.125rem - 7rem - 3rem - 6rem );

	margin-top: 2rem;
	margin-left: calc( 4.125rem + 7rem + 3rem );
	margin-right: 6rem;
	margin-bottom: 4rem;

	
}


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

div.contentblock.footerblock div.col1 div.logocontainer {

} 	



/* --------------------------------------------------------------- */ 
}
/* ------------------------------------------------------------------------------------------------------------------------------ */ 
/* --- 820 ADJUSTMENTS ALL --- concept: vertical view        -------------------------------------------------------------------- */ 
/* ------------------------------------------------------------------------------------------------------------------------------ */ 
@media only screen and 	(max-width: 820px) {
/* --------------------------------------------------------------- */ 


/* -- SPLASH -- */

.splash-content div {  

	height: 70vw;
	width: 70vw;		
}


.cookiealert {
	
	padding-left: 3rem;
}	

/*----------- MENU ---*/

.menubutton {
	
	margin-left: 3rem;

}

.menubutton2 {
	
	left: calc( 100% - 7rem - 3rem );
}		

.mainmenu .languagemenu {
	
	margin-left: calc( 3rem + 7rem + 2rem );
	margin-top: calc( 1rem );
	
}	

.mainmenu .socialmenu {
	
	margin-left: calc( 3rem + 7rem + 2rem );
	
}


.mainmenu .navmenu {
	
	width: calc( 100vw - 1rem ); 	

	margin-left: 3rem;
	
	top: calc( 7rem + 3rem );
	
	
}

.mainmenu .navmenu  ul {
	width: 85%;
	
	border-right: 1px dotted #2e2a2c;
	
}

.mainmenu .navmenu  ul  ul {
	width: 100%;
	border-right: 0px solid red;
}


/* ---------------------------------------- */	
/*----------- TYPOGRAPHY      ------------- */
/* ---------------------------------------- */


h1 {
	
	/* padding & margin is position specific */
	
} 




/*----------- TOP IMAGE BLOCK ---*/

div.topblock {

	
	padding-top: 0;  /* REMOVE 16:9 Aspect Ratio / 56.25%; */

}

div.textblock_topblock h3, div.textblock_topblock h1, div.textblock_topblock p {
	
	padding-left: 3rem;
}

div.textblock_topblock {
	
	padding-bottom: 4rem;


}



/* -- CONTENT -- */




div.contentblock {
	
	padding: 0rem;
	
}


div.contentblock.white {
	
	padding-left: 0rem;
	padding-bottom: 4rem;
	
}


div.photoblock {
	
	position: relative;

	width: 100%;
	
}

	

div.textblock {
	
	width: 100%;
	
	padding-top: 5rem;
	padding-left: calc( 3rem + 7rem + 2rem );
	padding-right: 5rem;
	padding-bottom: 2rem;
	
	border: 0px;
	

}



div.contentblock.white div.textblock  {
	
	padding-top: 3rem;
	color: #191718;
	border-left: 1px solid white;
}	







div.textblock_topblock h1, div.contentblock.fullscreen div.textblock h1, div.contentblock.nextproject div.textblock h1 {
	
	
	padding-left: 3rem;
	padding-right: 3rem;
	
	margin-bottom: 1rem;


	
	
}

div.textblock_topblock p, div.contentblock.fullscreen div.textblock p, div.contentblock.nextproject div.textblock p {
	
	width: 100%;
	max-width: 100%;
	padding: 0;	
	
	line-height: 1.2rem;
	margin-bottom: 2rem;
	
	padding-left: 3rem;
	padding-right: 3rem;
}

div.contentblock.nextproject div.textblock h1, div.contentblock.nextproject div.textblock p {
	margin-bottom: 0rem;
}




/* ---------------------------------------- */
/*----------- PORTFOLIO     --------------- */
/*----------- THUMBS VIEW   --------------- */


.contentblock.portfolio {
	padding: 0px;
}

.portfolio.home h1{
	
	padding: 0px;
	
	padding-left: calc( 3rem + 7rem + 2rem );
	padding-right: 3rem;
	margin-bottom: 1rem;
	
	border: 0px solid red;
}

.outer-portfoliocontainer {
	position: relative;
	
	width: calc( 100% - 3rem - 7rem - 2rem - 5rem );
	height: calc( 100vw - 3rem - 7rem - 2rem - 5rem + 6rem ); /* width = height + content of the textblock */
	
	margin-top: 2rem;
	margin-left: calc( 3rem + 7rem + 2rem );
	margin-right: 5rem;
	margin-bottom: 0rem;
	
}

.portfoliocontainer {
	
	
	width: 100%;
	height: 100%;
  
	margin:0;
	padding:0;
	
	
	display: flex;
	flex-direction: column;
	
	white-space: nowrap;

	overflow-x: scroll;
 
	scroll-snap-stop: always; 
	scroll-behavior: smooth;
  
	-ms-scroll-snap-type: x mandatory;
	scroll-snap-type: x mandatory;
	
	/* older spec implementation */
	-ms-scroll-snap-destination: 0% 100%;
	scroll-snap-destination: 0% 100%;
	-ms-scroll-snap-points-x: repeat(100%);
	scroll-snap-points-x: repeat(100%);

	-webkit-overflow-scrolling: touch;	 
}

.portfoliocontainer .child { 

  scroll-snap-align: start;
  
  width: 100%;
  height: 100%;
  display: inline-block;
}



.portfoliocontainer .child .pf-small-image {


display: block;

	width: 100%;
	max-width: 100%;
	padding-top: calc( 1 / 1 * 100%);  /* 1:1 Aspect Ratio / 100%; */

	border: none;
	box-shadow: none;
	
	
}

.portfoliocontainer .child:hover .pf-small-image {
	
	border: none;
	box-shadow: none;
	
}				



.portfoliocontainer .child .pf-description {
	
	padding-top: 1rem;
	padding-bottom: 0rem;
	
	color: #857f74;

	
}

.portfoliocontainer .child .pf-description a span.viewproject {
	display: block;
}	

.hide-link-on-mobile {
	display: block;
	
	position: absolute;
	
	z-index: 300;
	
	left: 0px;
	top: 0px;
	bottom: 0px;
	right: 0px;
	
}

.pf-indicatorbox {
	
	position: absolute;
	z-index: 400;
	
	left: 0px;
	right: 0px;
	bottom: 6rem;
	
	
}

#indicator {
	
	display: flex;
	align-items: center;
    justify-content: center;
	
	flex-direction: row;
	
	
	max-width:50%;
	margin: auto;
	
	
}

#indicator span.fas, #indicator span.far {
	padding: 0.250rem;
	padding-bottom: 0.5rem;
}

#indicator span.fas.fa-circle {
	font-size: 0.350rem;
}

#indicator span.far.fa-circle {
	font-size: 0.350rem;
	
}

/*----------- PORTFOLIO     --------------- */
/*----------- IMAGES VIEW   --------------- */

/*----------- HORIZONTALS & VERTICALS full screen   --------------- */


/*----------- PHOTO HORIZONTALS --------------- */



div.contentblock.black.single-project > div.photoblock.horizontal {
	
	max-width: calc(100vw - 2rem);

}

div.contentblock.black.single-project div.photoblock.horizontal div.photoblockphoto {
	
	max-width: 100%;
	
	
}

div.contentblock.black.single-project div.photoblock.horizontal div.photoblockphoto > img {
	
	max-width: 100%;
	
	margin-left: 1rem;
	margin-right: 1rem;
}


/*----------- PHOTO VERTICALS --------------- */

div.contentblock.black.single-project div.photoblock.vertical {
	
	width: 100%;

}

div.contentblock.black.single-project div.photoblock.vertical div.photoblockphoto {
	
	width: 100%;
	text-align: center;
	

}

div.contentblock.black.single-project div.photoblock.vertical div.photoblockphoto > img {
	
	max-height: calc(100vh - 2rem);
	max-width: calc(100vw - 2rem);
	
	margin-left: 1rem;
	margin-right: 1rem;
}

/*----------- CAPTION  --------------- */
div.single-project div.project-caption.horizontal, div.single-project div.project-caption.vertical {
	margin-top: 2rem;
	margin-left: 1rem;
	
	max-width: calc(100% - 2rem);
	
}

div.textblock.project-caption.horizontal, div.textblock.project-caption.vertical {
	
	padding-top: 0.5rem;
	padding-left: 1rem;
	padding-right: 3rem;
	padding-bottom: 0.5rem;	

}

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



div.contentblock.footerblock div.col3 ul {
	display: flex;
	justify-content: flex-start;
	
	width: 100%;
	
}	

div.contentblock.footerblock div.col1 div.logocontainer {
	display: none;
} 	


div.contentblock.footerblock div, div.contentblock.footerblock div.col3 {
	
	padding: 0;
	margin: 0;
	width: 100%;
	
}

div.contentblock.footerblock div.col3 {
	margin-top: 2rem;
	padding-left: 3rem;
}	



div.contentblock.footerblock div.col3 ul.socialmenu li a {
	padding-right: 0.3rem;
}




	

/* --------------------------------------------------------------- */ 
}
/* ------------------------------------------------------------------------------------------------------------------------------ */ 
/* --- 820 ADJUSTMENTS LANDSCAPE --- */
/* ------------------------------------------------------------------------------------------------------------------------------ */ 
@media only screen and (max-width: 820px) and (orientation: landscape) {
/* --------------------------------------------------------------- */ 

	/* -- SPLASH -- */

	.splash-content div {  

		height: 50vw;
		width: 50vw;
			
	}
	
	.cookiealert {
	
	padding-left: 2rem;
	
	}	


	/*----------- MENU ---*/

	.menubutton {
		
	margin-left: 2rem;
		
	width: 15vw;
	height: 15vw;
	
	}
	
	
	.menubutton2 {
	
	left: calc( 100% - 7rem - 2rem );
}	

	
	div.textblock_topblock {
	
	padding: 0;

	}
	
	div.textblock_topblock p.mobile, div.textblock_topblock h1.mobile {
	display: block;	
	}


	div.textblock_topblock h1.large {
		
		display: none;
	} 	
	
	div.textblock_topblock h3  span, div.textblock_topblock p.large {
		display: none;
	}


	div.textblock {
	
	width: 100%;
	
	padding-left: 2.5rem;
	padding-right: 1rem;
	
	
	
	}
	
	div.contentblock.black.single-project div.photoblock.horizontal {
		width: 100%;
		max-width: 100%;
	}
	
	div.contentblock.black.single-project div.photoblock.horizontal div.photoblockphoto {
	width: 100%;
	
	max-width: 100vw;
	max-height: none;
	}
	
	div.contentblock.black.single-project div.photoblock.horizontal div.photoblockphoto > img {
	max-width: calc(100vw - 2rem);
	max-height: 100vh;
	}
	
	
/* ---------------------------------------- */
/*----------- FOOTER BLOCKS --------------- */

	div.contentblock.footerblock div.col3 {
		padding-left: 1rem;
	}	
	
	
	

	
	
/* --------------------------------------------------------------- */ 
}
/* ------------------------------------------------------------------------------------------------------------------------------ */ 
/* --- 420 ADJUSTMENTS portrait --- */
/* ------------------------------------------------------------------------------------------------------------------------------ */ 
@media only screen and (max-width: 420px) {
/* --------------------------------------------------------------- */ 


.cookiealert {
	
	padding-left: 1rem;
}	



.menubutton {
	
	margin-left: 1rem;
	
	width: 5rem;
	height: 5rem;
}

.menubutton2 {
	
	left: calc( 100% - 7rem - 1rem );
}	


.mainmenu .languagemenu {
	
	margin-left: calc( 0.5rem + 5rem + 2rem );
	margin-top: calc( 1rem );
	
}	

.mainmenu .socialmenu {
	
	margin-left: calc( 0.5rem + 5rem + 2rem );
	
}


	

.mainmenu .navmenu {
	
	top: calc( 5rem + 2rem );
	margin-left: 1rem;
		
}

/* ---------------------------------------- */	
/*----------- TYPOGRAPHY      ------------- */
/* ---------------------------------------- */


h1 {
	

	/* padding & margin is position specific */
	
	padding-top: 0rem;
	padding-bottom: 0rem;
	
	font-size: 1.6rem;
	line-height: 1.8rem;
	font-weight: 200;
	
	overflow: hidden;

}



div.textblock_topblock h1 {
	

}

div.textblock_topblock p.mobile, div.textblock_topblock h1.mobile  {
	display: block;	
}	

div.textblock_topblock h3  span, div.textblock_topblock p.large, div.textblock_topblock h1.large {
		display: none;
}

div.textblock_topblock h3, div.textblock_topblock h1, div.textblock_topblock p {
	
	padding-left: 1rem;
} 

div.contentblock.white div.textblock h2  {

	display: none;

}

/* -- Show H2 in photo's on small screens -- */
div.photoblock h2 {
	
	display: inline;
	
	position: absolute;
	z-index: 500;
	

	left: 0px;
	right: 0px;
	bottom: 0px;

	vertical-align: bottom;
	
	padding-top: 2rem;
	padding-left: 2rem;
	padding-bottom: 1rem;
	
	font-size: 1.2rem;
	line-height: 1.5rem;
	font-weight: 200;
	
	text-transform: uppercase;

	
	
	background-image: linear-gradient(rgba(25,23,24,0), rgba(25,23,24,0.75));
	

}


	
/* ---------------------------------------- */

button.readmore {
	
	padding-left: 1.5rem;
	padding-right: 1.5rem;

}	

/* ---------------------------------------- */

div.textblock_topblock {
	
	padding-bottom: 0rem;
	
}

div.textblock_topblock p {
	
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;
	
}


div.textblock {
	
	width: 100%;
	
	padding-top: 5rem;
	padding-left: 2rem;
	padding-right: 2rem;
	padding-bottom: 2rem;
	
	border: 0px;
	

}


div.textblock_topblock h1, div.textblock_topblock p, div.contentblock.fullscreen div.textblock h1, div.contentblock.fullscreen div.textblock p, 
div.contentblock.nextproject div.textblock h1, div.contentblock.nextproject div.textblock p {
	
	padding-left: 1rem;
	padding-right: 1rem;
	
	padding-bottom: 0px;
	

}

div.contentblock.fullscreen div.textblock p span.text {
	display: none;
}

/* ---------------------------------------- */
/*----------- PORTFOLIO     --------------- */

.portfolio.home h1{
	
	
	padding-left: calc( 1rem + 0rem + 0rem );
	padding-right: 1rem;
	margin-bottom: 0rem;

}

.outer-portfoliocontainer {

	width: calc( 100% - 1rem - 0rem - 0rem - 1rem );
	height: calc( 100vw - 1rem - 0rem - 0rem - 1rem + 4rem ); /* width = height + content of the textblock */
  
	margin-top: 2rem;
	margin-left: calc( 1rem + 0rem + 0rem );
	margin-right: 1rem;
	margin-bottom: 0rem;

}

.portfoliocontainer {
	
}	
	



.pf-indicatorbox {

	bottom: 4rem;

}

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

.g-recaptcha {
	
	width: calc(90vw - 2rem );
	overflow: hidden;
}


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

div.contentblock.footerblock div.col3 {
		padding-left: 1rem;
	}	
	


/*----------- FOOTER NAV SERVICE -- */
div.contentblock.footerblock div.col3 ul.servicemenu {
	
		display: block;
		margin-bottom: 2rem;

}

div.contentblock.footerblock div.col3 ul.servicemenu li::after {
	

	
	content: "";
	padding-left: 0rem;
	
}

div.contentblock.footerblock div.col3 ul.servicemenu li:last-child::after {
	content: "";
	padding-left: 0rem;
}
	
	
	

/* --------------------------------------------------------------- */ 
}
/* ------------------------------------------------------------------------------------------------------------------------------ */ 
/* ------------------------------------------------------------------------------------------------------------------------------ */