/*---------------------------------------------------*/
/** --- MOBILE BASIC LAYOUT < 1024 ---------------- **/
/*---------------------------------------------------*/

/*-- MAKING STUFF FIT ~ 100vw --*/

	
	
	iframe {		/* FIT YOUTUBE etc. in container */
		
		max-width: 100%;

	}
	
	#hoofdmenu li, #hoofdmenu li.notselected a, #hoofdmenu li.selected a {
		margin-left: 5px;
		margin-right: 0px;
		font-size: 1em;	
	}
	
	#hoofdmenu li+li:before {			/* solution for failing li:last-child::after */

	margin-left: 0px;
	margin-right: 0px;
		
	}


/*-------------------------------------------------*/
/*-----------  SMALL SCREENS < 770  ---------------*/
/*-------------------------------------------------*/

/*-- ALL CONTAINERS  =< 100vw NO FLOATS --*/

@media only screen and (max-width: 770px) {
	#wrapper {

	display: block;
	background-color: #ffffff;
	
	}
	
	
	
	#footerblock {

		
		height: 100%;
		min-height: 260px;
		
		background-position: 50% 2em;
		background-size: 90%;

	}
	
	#hoofdmenublok {
		display: none;	/* turn off regular menu */	
	}
	
	#servicemenu {	/* fix in place on mobile */
		
		float: none;
		
		display: block;
		position: absolute;
		
		height: 30px;
		width: 200px;
		
		top: -10px;
		right: 1em;
		
		z-index: 500;
		
	}
	
	#mobilemenublok {	/* turn on mobile menu */	
		
	
		display: block;
		position: absolute;
		
		height: 30px;
		width: 100px;
		
		bottom: 20px;
		right: 1em;
		
		z-index: 600;
		
		text-align: right;
		
	}
	

	#mobilehamburger {
	
	position: absolute;

	width: 0vw;			/*test*/
	overflow: hidden; 	/*test*/
	

	height: 152px;

	padding: 0px;
	margin: 0px;	
	
	
	margin-top: -126px;
	z-index: 700;

	text-align: left;
	background-color: rgba(0, 0, 0, 0.85);

   

	}
		


	@keyframes mymove {
		from {left: 100vw;}
		to {left: calc(-100vw + 100px + 1em);}
		
		from {width: 0vw;}							/*test*/
		to {width: 100vw;}							/*test*/
		
	}
	

	
	@keyframes mymove2 {
		from {left: calc(-100vw + 100px + 1em);}
		to {left: 100vw;}
		
		from {width: 100vw;}							/*test*/
		to {width: 0vw;}								/*test*/
		
	}


	
	.nav-trigger {
	position: absolute;
	clip: rect(0, 0, 0, 0);
	
	}

	#mobilemenublok label {		/* ON SWITCH */
		display: block;
		
		color: white;
		font-family: 'Alegreya Sans', sans-serif;
		font-weight: 400;
		font-size: 1.25em;
		cursor: pointer
	}
	
	#mobilemenublok #mobilehamburger label  {
		display: block;
		position: absolute;
		
		bottom: 27px;
		right: 1em;
		
		font-size: 1em;	
	}
	
	.nav-trigger ~ #mobilehamburger   {
		

	
		-webkit-animation: mymove2 1s; /* Chrome, Safari, Opera */
		animation: mymove2 1s;
		
	}

	.nav-trigger:checked ~ #mobilehamburger   {  /* show mobile hamburger menu -  Toggled State  */

		left: calc(-100vw + 100px + 1em);
		width: 100vw;
	
		-webkit-animation: mymove 1s; /* Chrome, Safari, Opera */
		animation: mymove 1s;
	}

	.nav-trigger:checked ~ label {
		display: block;
	}
	
	#mobilehamburger {

	}

	#mobilehamburger li {
		font-size: 1.2em;	
		line-height: 1.2em;
		padding-left: 1.2em;

	}
	
	#mobilehamburger > li:nth-child(3){
		margin-top: 0.3em;
	}

	#mobilehamburger li.notselected a{
		color: white;
		text-decoration: none;
	} 
	
	#mobilehamburger li.selected a{
		color: #218efc;				/* HOFKAMP BLAUW BRIGHT */
	} 
	
	
	/*  ---- CONTENTS ---- */
	
	section.deflexboxhome {
	
	}
	
	#tekstinhoud.flextext, #tekstinhoud	{

		width: 100%;
		max-width: 100%
	}

	div.home_content_image_box_container {
		
		width: 100%;
	}
	
	
	div.quoteblock div.quote i.fa { 
		display: inline-block;
		width: calc( 100% - 2em);
		
		margin: 0;

	}
	
	div#fotoboekholder {
			
		width: 100%;
		max-width: 100%;
	}
	
	/* Projecten */
	
	div.moreprojects-item {

	 width: 32%;
	
	}
	
	div.moreprojects-item-tekst {
	
		height: 6.5em;

	}
	
	div.fullproject div#tekstinhoud {
		width: 100%;
		max-width: 100%;

	}
	
	
	div.fullproject div#tekstinhoud  span.blue{
		width: 100%;
		padding-top: 0.2em;
	}
	
	div.photobookwithfullproject.leftblock {
	
	width: 100%;
	margin-bottom: 0.5em;
	}

	div.photobookwithfullproject.rightblock {
		position: relative;
		
		
		width: 100%;

	}
	
	div.photobookwithfullproject .thumbcontainer {
	
	width: calc(100% / 3 - 0.5em);

	margin-bottom: 0.5em;

	}
	
	
	#footertxt {
		width: 100%;
		
	}

	div.socialfooter {
		width: 100%;
		 
	}

	
	.showonsmall {
		display: inline;
	}
	
	.hideonsmall {
		display: none;
	}
	
	/* HOME */
	#tekstinhoud.uitgelicht p:first-child {
		
		margin-top: 1em;
		
	}
	
}

/*-------------------------------------------------*/
/*-----------  SMALL SCREENS < 360  ---------------*/
/*-------------------------------------------------*/

@media only screen and (max-width: 360px) {
	
	
	/* Projecten */
	
	div.moreprojects-item {

	 width: 100%;
	
	}
	
	div.moreprojects-item-tekst {
	
	height: 4em;

	}

}