/* main hanzepad */

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Initializr Styles
# Colors
	## GENERAL 
# Visibility Clear Display Cursor
	## GENERAL 
# Typography
	## GENERAL
	## LOCAL
# Positioning
	## GENERAL
	## LOCAL
# Media??
	## Captions
	## Galleries
	
--------------------------------------------------------------*/  
/* 	===== Initializr Styles ==================================================
	thanks to Jonathan Verrecchia - verekia.com/initializr/responsive-template.invisible
	========================================================================== */
body, html{width:100%; height:100vh; margin:0; overflow:hidden;}
body{overflow-y:scroll;}

/* 	===============
	Colors:
	============== */
html{background-color:#D6A685; color:#882222;}
a{text-decoration:none; color:#681A1A;}  
::-moz-selection{background-color:#681A1A;text-shadow:none;}
::selection{background-color:#681A1A;text-shadow:none;}

.belevenis 	{background-color:#D6A685; color:#882222;}
.dagboek 	{background-color:#FFF8F2; color:#fefefe;}
.dagroute  	{background-color:#A40303; color:#fefefe;}
.dagroute a 	{background-color:#A40303; color:#fefefe;}
.fotos  	{background-color:#681A1A; color:#fefefe;}
.gedachten 	{background-color:#FFCC66; color:#882222;}
.link		{background-color:#B3C7D7; color:#512373;}
#footer		{background-color:#D6A685; color:#882222;}
ul li a, a  {background-color:transparent; color:#882222;}
nav a.currentpage{background-color:transparent;}
nav a:hover{background-color:#681A1A;}

/* 	==========================================================================
	Visibility
	========================================================================== */
.hidden, [hidden]{display:none;}  /* Hide visually and from screen readers *//*only for mobile*/
.invisible{visibility:hidden;} 				 /* Hide visually and from screen readers, but maintain layout */	 
.clearfix::before,.clearfix::after {content:" ";display:table;}
.clearfix::after {clear:both;}
.clear {clear:left;}


#foto, #foto_2 {z-index:10; }
#footer {z-index:16; } 
.gallery ul.innergallery {z-index:14; }
.gallery ul.innergallery li:hover ul li a:focus img,
.gallery ul.innergallery li:hover ul li a:active img,
.gallery ul.innergallery li a:hover ul li a:active img {z-index:10; }

/* 	==========================================================================
	Typography
	========================================================================== */
html, p, a{font-size:1.0rem; line-height:1.6;}
body{font-family:'Source Sans Pro', 'Calibri', sans-serif; font-weight:600; font-style:normal; font-size:1.0rem; line-height:1.6rem;}
h1 	{font-family:Castellar; font-size:3.4vw; line-height:3rem; /*margin:0; padding:0;*/}
h2 	{font-size:1.2rem; font-weight:600; line-height:3rem; margin:0; padding:0;}
p {margin:0; padding:0;}
#footer {font-weight:400;}

.belevenis p, .belevenis p a {font-size:1.3rem;}
.dagroute p, .dagroute p a  {font-size:1.1rem;}
.gedachten p {font-size:1.2rem;}

.belevenis 	{font-family:'Calibri Light'; font-weight:500;}
.dagboek 	{font-family:'Times New Roman';}
.dagroute  	{font-family:'Courier New'; font-weight:600; text-align:justify;}
/*.fotos  	{font-family:'Courier New'; font-weight:600; text-align:justify;}*/
.gedachten	{font-family:'Source Sans Pro', 'Lato', 'Architects Daughter', cursive;}
p.technical {font-family:'Viner Hand ITC','Calibri Light';} 
/* 	====================
	Elements:
	==================== */
a{text-decoration:none;}
ul {list-style-type:none;}
#footer {text-align: center;}
#footer p a {margin: 2.5em 1.5rem;}
/* 	====================
	Positioning + Borders:
	==================== */
#page		{position:relative; width:100%;height:100%; top:0.0rem; left:0.0rem;}
#lefter 	{position:absolute; width:20%; height:100%; top:0.0rem; left:1.5rem;}
#righter 	{position:absolute; width:20%; height:100%; top:0.0rem; right:1.5rem;}	
#headers 	{position:relative; width:50%; height:auto; top:0;left:25%; margin:0 0 1rem 0; padding:0;}
#retour 	{position:relative; width:50%; height:auto; top:0;left:25%; margin:0 0 1rem 0; padding:0;}
#containers	{position:relative; width:50%; height:auto;	left:25%;border:0.0px solid red;}
#retourcontainers	{position:relative; width:50%; height:auto;	left:25%;border:0.0px solid red;}
#fotos 		{position:relative; width:50%; height:100%;	left:25%; }
#fotos_2	{position:relative; width:50%; height:100%;	left:25%; }
#fotos_2	{/*top:-10rem;*/}
#media		{position:relative; width:50%; height:auto;	left:25%;border:0.0px solid blue; }
#media .link, #containers .link, #retourcontainers .link{text-align: center; border:3px solid #555E66;}
#media .link a img, #containers	a img, g, #retourcontainers	a img{width:90%; height:auto;  } 
#media .youtube	a img, #containers .youtube	a img, #retourcontainers .youtube	a img{width:45%; height:auto;} 
#media .youtube span, #containers .youtube span, #retourcontainers .youtube span {position:relative; display:none; }  /* to prevent image with direct link youtube in opera*/

#footer {position: fixed; display: block; bottom: 0; left: 24.5%; width: 50%; /*height:3.5rem;*/ border-top: 0.3rem solid #882222;}
#overview   {position:relative; width:50%; height:auto;	left:25%;}
#overview figure {float: left; width: 11rem; height:11rem; margin: 0.2rem; padding: 0; border: 1px solid black;  text-align: center; }
#overview figure img{width: 10rem; height:6rem;}
#overview figure figcaption ul{position:relative; height:4rem; margin:0; padding: 0.0rem;border: 0px solid green; line-height:1.1;}
.stripe {border-top:0.4rem solid #882222;} 

.videos video {width:100% !important; height:auto !important; background-color:#BEC6DB!important;}

#lefter img	{width:100%; height:100%;}
#righter img{width:100%; height:100%;}
	#header1 {position:relative; text-align:center; border-bottom:0.4rem solid #882222;} /*titels*/
		#titel1 {position:relative; margin-top:0rem;}  
		#titel2 {position:relative;}
	#header2 {position:relative; height:6rem; margin:0; margin-top:-1rem;padding:0; border-bottom:0.4rem solid #882222;}	/*traject*/
	#retourheader2 {position:relative; height:6rem; margin:0; margin-top:-1rem;padding:0; border-bottom:0.4rem solid #882222; border-top:0.4rem solid #882222}	/*traject*/
		#traject1, #retourtraject1{position:absolute; width:33%; left:0; margin:0 0 0 -2rem; float:left;}/*list*/
		#traject2, #retourtraject2{position:absolute; width:66%; left:33%;}  /*icons*/
			/*#traject2 figcaption {margin-top:-0.5rem;}*/
			#traject2 figure img, #retourtraject2 figure img{width:3rem;}
			#traject2, #retourtraject2{position:absolute; width:66%; left:33%;}  /*icons*/
			#traject2 figure, #retourtraject2 figure {position:relative; margin:0.1rem; margin-top:1.3rem; padding:0; float:left;}
			/*#traject2 figcaption {margin-top:-0.5rem;}*/
			#traject2 figure img, retourtraject2 figure img{width:3rem;}
		#traject3{position:absolute; width:10%; right:0; display:none}  /*menu*/
			#traject3 figure {position:relative; margin:0.8rem; margin-top:1.3rem; padding:0; float:left;}
			/*#traject3 figcaption {margin-top:-0.5rem;}*/
			#traject3 figure img{width:3rem; display: none;}
	#header3 {position:relative;}
  /*#containers*/
		.belevenis {position:relative; margin-bottom:2rem;}
		.belevenis_icon {position:relative; top:0.5rem; float:left;}
		.belevenis_icon img {height:4rem;}
		.belevenis_text img{width:30%; float:right;}	
		
		.dagboek {position:relative; margin-bottom:2rem; border:1.0px solid #882222;}
		.dagboek img {display:block; width:95%; margin-left:auto; margin-right:auto;}
		
		.dagroute {position:relative; margin-bottom:2rem;border:3.0px solid #882222;}
		.dagroute_text {padding:0 1.0rem;}
		/*

*/
		.gedachten {position:relative; margin-bottom:2rem; border:2.0px solid #882222;}
		.gedachten_text {position:relative;}
		.gedachten_text{ text-align:center;} 
		.gedachten_icon {position:relative; top:0.5rem; float:left;}
		.gedachten_icon img {height:4rem;}
		.gedachten_text img{width:30%; float:right;}	/*Minimum Paragraph Widths in Fluid Layouts*/
p:before {
  content: "";width: 10em;display: block;overflow: hidden;}	
		
/* 	====================
	 Media:
	==================== */
img {margin:0.5rem;}
img.left  {float: left;}
img.right {float: right;}
#header2 img, #retourheader2 img{margin:0.0rem;}

img.portret_smal  {width:auto; height:10rem; padding:0;}
img.portret_tall  {width:auto; height:15rem; padding:0;}
img.landscape_smal{width:10rem; height:auto; padding:0;}
img.landscape_tall{width:100%/*15rem*/; height:auto; padding:0;}
#foto img.portret, #foto_2 img.portret {width:auto; height:25rem; margin:0; padding:0;}
.dagroute_detailkaart img.landscape	{width:100%;margin:0; padding:0;}
.dagroute_detailkaart img.portret	{height:25rem;margin:0; padding:0;}
/* ===================== */