/*main_responsive hanzepad */
/* ===== Initializr Styles ==================================================
   thanks to Jonathan Verrecchia - verekia.com/initializr/responsive-template.invisible
   ========================================================================== */

/* 	===========================  [to edit | public css: replace border:0.0rem solid => border:0.1rem solid | viceversa]
	[green] MOBILE Positioning:  [bigger viewport will be overwritten in following sections]
	=========================== */
@media only screen and (min-width:320px){ 
#headers{border:0px solid green;}
#retour{border:0px solid green;}
	
.belevenis p {font-size:1.2rem;}
.dagroute p  {font-size:1.1rem;}
.gedachten p {font-size:1.1rem;}

.belevenis 	{font-weight:400;}
.dagroute  	{font-weight:600;}
.image  	{font-weight:600;}
.gedachten 	{font-weight:600;}
figcaption  {font-weight:600;}

#lefter {display: none;}	
#righter {display: none;}	
#headers, #retour 	{width:90%;height:auto;left:5%;margin:2rem 0 1rem 0;}
#containers	{width:90%;height:auto;left:5%;}
#retourcontainers	{width:90%;height:auto;left:5%;}
#fotos		{width:90%;height:70%; left:5%;}
#fotos_2	{width:90%;height:70%; left:5%;}
#media		{width:90%;height:auto;left:5%;}
#footer  	{width:90%;left:5%;}				 

html, p, a	{font-size:1.0rem; line-height:1.4;}
body		{font-size:1.0rem; line-height:1.4rem;}
h1 			{font-size:5vw; line-height:1.0rem; /*margin:4rem 0 0 0;*/}
h2 			{font-size:1.0rem; line-height:1.5rem;}
#header2	{font-size:0.8rem; line-height:1.0;}
#retourheader2	{font-size:0.8rem; line-height:1.0;}

/* hier stond tot 11.1 min-width:320px*/
#header2, #retourheader2 {height:4rem; margin:0; margin-top:0rem; padding:0;}
		#traject1, #retourtraject1{left:0;margin:0 0 0 0;}
		#traject1 ul, #retourtraject1 ul {padding:0; margin:0.2rem 0 0 0;}
		#traject2, #retourtraject2{width:66%;} 
			#traject2 figure, #retourtraject2 figure {margin:0.2rem; padding:0; float:left;}
			#traject2 figure img, #retourtraject2 figure img{width:2rem;}
		#traject3{width:10%; right:0;}
			#traject3 figure {margin:0.2rem; margin-top:0.5rem; padding:0; float:left;}
			#traject3 figure img{width:1.5rem;}
}
/* END GREEN */ 
    
/* ===================================
   [yellow] INTERMEDIATE: Positioning:
   =================================== */
@media only screen and (min-width:480px){ 
#headers{border:0px solid yellow;}

#lefter {display: none;}	
#righter {display: none;}	
#headers, #retour 	{width:90%;height:auto;left:5%;}
#containers	{width:90%;height:auto;left:5%;}
#retourcontainers	{width:90%;height:auto;left:5%;}
#fotos 		{width:90%;height:75%;left:5%;}
#fotos_2	{width:90%;height:75%;left:5%;}
#media		{width:90%;height:auto;left:5%;}
#footer  	{width:90%;left:5%;}
#traject1, #retourtraject1	{margin:0 0 0 0;}

html, p, a	{font-size:1.0rem; line-height:1.4;}
body		{font-size:1.0rem; line-height:1.4rem;}
h1 			{font-size:4vw; line-height:2rem;margin:0;}
h2 			{font-size:1.2rem; line-height:2rem;}
#traject1, #retourtraject1   {font-size:0.9rem; line-height:1.0; border:0.0px solid red; }
.videos video {width: 100%; height:auto;left: 0; top:0; margin:0;}
img.landscape_tall{width:15rem;}
}  /* END YELLOW*/

/* ======================================
   [blue] INTERMEDIATE-PLUS: Positioning:
   ====================================== */
@media only screen and (min-width:601px){
#headers{border:0px solid  blue;}

#lefter {display: none;}	
#righter {display: none;}	
#headers, #retour 	{width:90%;height:auto;left:5%;}
#containers	{width:90%;height:auto;left:5%;}
#retourcontainers	{width:90%;height:auto;left:5%;}
#fotos		{width:90%;height:100%;left:5%;}
#fotos_2	{width:90%;height:100%;left:5%;}
#media		{width:90%;height:auto;left:5%;}
#footer  	{width:90%;left:5%;}

html, p, a	{font-size:1.0rem; line-height:1.4;}
body		{font-size:1.0rem; line-height:1.4rem;}
h1 			{font-size:5vw; line-height:2rem;margin:0;}
h2 			{font-size:1.2rem; line-height:2rem;}
#traject1, #retourtraject1   {font-size:0.9rem; line-height:1.0; border:0.0px solid red; }
.videos video {width: 100%; height:auto;left: 0; top:0; margin:0;}

} /* END BLUE*/

/* ==========================
   [lime]  WIDE: Positioning:
   ========================== */
@media only screen and (min-width:769px){
#headers{border:0px solid  lime;}	
.hidden {display:inline;}
#lefter {display: none;}	
#righter {display: block;}	

#headers, #retour 	{width:75%;height:auto;left:2%;}
#containers	{width:75%;height:auto;left:2%;}
#retourcontainers	{width:75%;height:auto;left:2%;}
#fotos		{width:75%;height:100%;left:2%;}
#fotos_2	{width:75%;height:100%;left:2%;}
#media		{width:75%;height:auto;left:2%;}
#footer  	{width:75%;left:2%;}	

/* ==================================
   [orange]  EXTRA WIDE: Positioning:
   ================================== */
@media only screen and (min-width:993px){
#headers{border:0px solid orange;}	

#lefter {display: block;}	
#righter {display: block;}	
#headers, #retour 	{width:50%;height:auto;left:25%;}
#containers	{width:50%;height:auto;left:25%;}
#retourcontainers	{width:50%;height:auto;left:25%;}
#fotos		{width:50%;height:100%;left:25%;}
#fotos_2	{width:50%;height:100%;left:25%;}
#media		{width:50%;height:auto;left:25%;}	
#footer  	{width:50%;left:24.5%;}		

html, p, a	{font-size:1.0rem; line-height:1.4;}
body		{font-size:1.0rem; line-height:1.4rem;}
h1 			{font-size:3.5vw; line-height:2rem;margin:0;}
h2 			{font-size:1.2rem; line-height:2rem;}
#traject1, #retourtraject1   {font-size:0.9rem; line-height:1.0; border:0.0px solid red; }
#traject1, #retourtraject1	{width:50%;margin:0 0 0 0.1rem;}
#traject1 ul li, #retourtraject1 ul li{width:100%;margin:0 0 0 0;}

.videos video {width: 100%; height:auto;left: 0; top:0; margin:0;}
.gedachten p {font-size:1.0rem;}
} /* END LIME*/

} /* END ORANGE*/

/* =================================
   [red]  MAXIMAL WIDE: Positioning:
   ================================= */
@media only screen and (min-width:1206px){
#headers{border:0px solid red;}

#page		{width:100%; height:100%; top:0.0rem; left:0.0rem;}
#lefter 	{width:20%; height:100%; top:0.0rem; left:1.5rem;}
#righter 	{width:20%; height:100%; top:0.0rem; right:1.5rem;}	
#headers, #retour 	{width:50%;height:auto;left:25%;}
#containers	{width:50%;height:auto;left:25%;border:0.0px solid red;}
#retourcontainers	{width:50%;height:auto;left:25%;border:0.0px solid red;}
#fotos		{width:50%;height:100%; left:25%;}
#fotos_2	{width:50%;height:100%; left:25%;}
#media		{width:50%;height:auto;left:25%;border:0.0px solid blue;}
#footer  	{width:50%; left: 24.5%;}

html, p, a	{font-size:1.0rem; line-height:1.6;}
body		{font-size:1.0rem; line-height:1.6rem;}
h1 			{font-size:3.4vw; line-height:3rem;margin:0;}
h2 			{font-size:1.2rem; line-height:3rem;}
#traject1, #retourtraject1   {font-size:1.0rem; line-height:1.6;}
	#header1 {} 
		#titel1 {margin-top:0rem;}  
		#titel2 {}
	#header2, #retourheader2 {height:6rem; margin:0; margin-top:-1rem; padding:0;}
		#traject1, #retourtraject1 {width:30%; left:0; margin:1rem 0 0 0rem; float:left;}
		#traject2, #retourtraject2 {width:50%; left:30%;} 
			#traject2 figure, #retourtraject2 figure {margin:0.2rem; margin-top:1.3rem; padding:0; float:left;}
			#traject2 figure img, #retourtraject2 figure img{width:3rem;}
		#traject3{width:10%; right:0;}
			#traject3 figure {margin:0.2rem; margin-top:1.3rem; padding:0; float:left;}
			#traject3 figure img{width:3rem;}
	
} /* END RED*/

/* ==========================================================================
   Print styles
   ========================================================================== */
   @media print{
    *,
    *:before,
    *:after{
        background-color:transparent !important;
        color:black !important;
        box-shadow:none !important;
        text-shadow:none !important;}
html{width:100%;}
body{background-color:transparent!important;color:black!important;text-align:left;font-family: "Calibri", "Arial", "Helvetica" , sans-serif;font-size:9pt!important;border:0.0rem;margin:0.0rem;padding:0.0rem;width:100%;}
    a,
    a:link,
    a:visited{color:black !important;background-color:transparent;font-weight:normal;text-decoration:none/*underline*/;}

    a[href]:after{content:" (" attr(href) ") ";font-size:6pt!important;}
    abbr[title]:after{content:" (" attr(title) ")";font-size:6pt!important;}  /*<abbr title="World Health Organization">WHO</abbr> wordt (WHO (World Health Organization))*/

    a[href^="#"]:after,
    a[href^="javascript:"]:after{content:"";}


    pre,
    blockquote{border:1pt solid #000;page-break-inside:avoid;}
    /*.item_work,
    .list_events li {page-break-inside:avoid;}
	*/
    .item_work li {page-break-inside:avoid;}
	.list_events li {page-break-inside:avoid;}
    thead{display:table-header-group;}

    tr,
    img{page-break-inside:avoid;}

    img{max-width:100% !important;}
    /*img{width:35% !important;}*/
    .printbild img{width:100% !important;}
	.printbild {padding-left:0.32rem !important;}

	ul.list_works li ul li ul.linkarray {display:block; margin-left:2rem;}
	ul.list_works li ul li ul.linkarray li {display:block;margin:0.32rem;}
	ul.list_works li ul li ul li ul.linkarray {display:block; margin-left:2rem;}
	ul.list_works li ul li ul li ul.linkarray li {display:block;margin:0.32rem;}
	
	#page { margin: 0.5cm; }   
    p, h3, h4{orphans:3;widows:3;}
    h3, h4{page-break-after:avoid;}
     
	header,
	#works_main-container .media audio,
    #index_main-container .media audio,
	.iframe-container,iframe,
	.arrow_work, .arrow_archive, .media{display:none;}  /*.media{display:inline;}*/

	#lefter {display: none;}	
	#righter {display: none;}	
	#headers, #retour 	{width:90%;height:auto;left:5%;}
	#containers	{width:90%;height:auto;left:5%;}
	#retourcontainers	{width:90%;height:auto;left:5%;}
	#fotos		{width:90%;height:auto;left:5%;}
	#fotos_2	{width:90%;height:auto;left:5%;}
	#media		{width:90%;height:auto;left:5%;}
	#footer  	{width:90%;}
} /* END PRINT */

    
/* ==========================================================================
   temporary
   ========================================================================== */