/*--
    File idh-mob-Verdana.css
	Date: 25.09.2020
	Fonts: Verdana, Arial, sans-serif
	Styles for the MOBILE version (below 768px)
	Container font-size set to 1.1em
--*/


h1, h2, h3 {font-family: Verdana, Arial, sans-serif; font-weight:700; color:brown} 
h1 {font-size:1.3em; margin-top:-0.5em; margin-bottom:0.5em; line-height:1.3em}   
h2 {font-size:1.2em; margin-bottom:0.5em; line-height:1.2em} 
h3 {font-size:0.9em; margin-bottom:0.5em;}

html, body {
  margin: 0;
  padding: 0;
  background: white;
  color: black;
  font-family: Verdana, Arial, sans-serif;
}

#container {           
	margin: 0.5% auto; 
	padding: 0 10px;
	max-width: 767px;  
	overflow: auto;
	overflow-x: hidden;  /*-- This became necessary when applying alernative "desktop" and "mobile" - versions for TOCs --*/
	background: white;
	font-size: 1.1em !important;				/*-- OLD: 1.2em --*/
	line-height: 1.3em !important;
	-webkit-text-size-adjust: none;				/*-- Hopefully Chrome for Android will stop rendering text randomly --*/	
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
}

.welcome {
	text-align:center;
	font-size:1.2em;
	font-weight:700; 
	color:brown;
	margin-top:-1.5em;
	margin-bottom:0.5em;
	line-height:1.3em;	
}

.wrapper, .wraprev {                                /*-- The wrapper around article.left/.right ensures equal height --*/
	float: left;
	width: 100%;
}

article.left {
/*  background-color:#2196F3; --*/
	margin: 0.25%;
	padding: 0;
	float: left;
	width: 49%;
	text-align: justify;
}

article.right { 
/*  background-color:#4CAF50; --*/
	margin: 0.25% 0% 0.25% 0.25%;
	padding: 0;
	float: right;
	width: 49%;
	text-align: justify;
}

article.all {					/*-- if there is no article.left / .right  --*/
	margin: 0.25%;
	padding: 5px 0;
	text-align: justify;
	font-size: 1em;
	line-height: 1.3em;
}

.mobilespacer {         /*-- close a gap in the mobile version --*/
	margin-top: 0;   	/*-- needs individual adjustment in the html; the class will not be shown in the desktop-version --*/
}

/*-- Use a media query to add a break point at 767px: --*/
@media screen and (max-width:767px) {
article.left, article.right {
	width:100%; 					/*-- The width is 100%, when the viewport is 767px or smaller --*/
	}
	.dtpspacer {
	display: none;
	}
 }

/*-- HEADER PICTURE etc. --*/
/*-- Fix Header-Pic at the top --*/
.stickydiv {
	position: fixed;
	height: 60px;
    top: 0;
	left: 0;
    width: 100%;
   	z-index: 100;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;  /*--  "cover" has not the desired effect  --*/
}	

hr {
	margin-top:40px;
	height: 3px;
	border: 0;
	box-shadow:inset 0 3px 3px -3px rgba(0,0,0,0.5); /*-- 2px 3px 2px 0 rgba(0, 0, 0, 0.25); --*/
	text-align:center;
}
	
/* Clear floats after the columns */
.stickydiv:after {
  content: "";
  display: table;
  clear: both;
}
/*-- END - HEADER PICTURE etc. --*/

@media screen and (max-width: 767px) {
.desktop {
	display: none;
	}
}

/*--																	--*/
/*--	 HAMBURGER MENU													--*/
/*--	 Original by Erik Terwan, 24th of November 2015, MIT License	--*/
/*--	 https://www.cssscript.com/pure-css-fold-out-navigation-menu	--*/
/*--	 Hamburger Button 												--*/
/*-- 																	--*/

#menuToggle {
  display: block;
  position: relative;
  top: 13px;
  left: 20px;
  
  z-index: 1;
  
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle input {
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}

#menuToggle span {
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;  		/*--  Distance between horizontal lines  --*/
  position: relative;
  line-height: 60px;
  background: green;		/*--  green Hamburger-color  --*/
  border-radius: 3px;
  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

	#menuToggle span:first-child {
	  transform-origin: 0% 0%;
	}

	#menuToggle span:nth-last-child(2) {
	  transform-origin: 0% 100%;
	}

	/* 
	 * Transform all the slices of hamburger
	 * into a crossmark.
	 */
	#menuToggle input:checked ~ span {
	  opacity: 1;
	  transform: rotate(45deg) translate(-2px, -1px);
	  background: red;   /*-- red cross --*/
	}

	/*
	 * But let's hide the middle one.
	*/
	#menuToggle input:checked ~ span:nth-last-child(3) {
	  opacity: 0;
	  transform: rotate(0deg) scale(0.2, 0.2);
	}

	/*
	 * The last one should go the other direction
	 */
#menuToggle input:checked ~ span:nth-last-child(2) {
  transform: rotate(-45deg) translate(0, -1px);
}

	/*--
	 *--  
		The following Menu slides in from the Left
		when pressing the Hamburger Button
		
		Make the Menu absolute positioned
		at the top left of the screen
	 *--	
	--*/
#menu {
  position: absolute;
  width: 250px;       /*-- 11.12.2019 von 300px auf 310px for iphones--*/
  height: 370px;  
  margin: -100px 0 0 -30px;
  padding: 20px;
  padding-top: 105px;
  
  background: #e9e9e6;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li {
  padding: 5px 0;
  font-size: 1em;						/*-- 1em instead of 0.95em because "container" set to 1.1em from 1.2em --*/
  line-height: 1.25em;  
 }

#menu a {
  text-decoration: none;
  color: black;
  transition: color 0.3s ease;
}

	#menu a:visited {color: green;}
	#menu a:hover {padding: 5px; background: #f8f2bc;}  /*-- #ffff80; --*/
	#menu a.active {color: blue;}

	/*
	 * And let's slide it in from the left
	 */
#menuToggle input:checked ~ ul {
  transform: none;
}

/*-- Box containing explanation of the Link-colours --*/
#menuinset {
	position: absolute;
	top: 370px;
	left: 20px;
	width: 180px;
	height: 95px;
	background:#d1d1d1;
/*--	font-size: 0.8em;         -- has no effect here; needs to be applied in the html  --*/
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
	-ms-border-radius: 4px;
	-khtml-border-radius: 4px;
	border-radius: 4px;
	border:1px solid #bbb;
}

#menuinheader {
	position: absolute;
	top: 0px;
	left: 5px;
	width: 62px;
	height: 59px;
	background:#d1d1d1;
}
/*--
 *-- 
	 END HAMBURGER MENU
 *--	 
--*/		

/* ---- Pictures - Radius:10px ---- */
.picr10 {
	display: block;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	height: auto;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-o-border-radius: 10px;
	-ms-border-radius: 10px;
	-khtml-border-radius: 10px;
	border-radius: 10px;
}

/*-- Grey boxes and a styled quote --*/

.grey, .green {-webkit-border-radius: 15px; -moz-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; zoom: 1; border-top: 1px solid #fff; border-bottom: 1px solid #fff; margin-bottom: 0.5em!important;} 
.green {background-color: #EAFFC4;}
.grey {background-color: #EFEFEF;}
.grey p {padding: 0 10px;}
.grey h1 {border-bottom: 5px solid #fff; margin-top: -0.1em; padding: 0px 30px; font-size:1.2em; line-height: 1.6em; text-align:center;}

.quote, .quote1, .quote2 {font-family: Verdana, Arial, sans-serif; font-style: italic; font-size: 1.1em; line-height: 1.3em;}
.quote1 {font-size:1em; line-height:1.3em}
.quote2 {font-size: 0.9em;}

/* --- END --- */