/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 20.12.2016, 18:16:47
    Author     : Rhodan59
*/

*  {
	outline:		0; /* entfernt blauen Rahmen um Eingabefelder (beim Safari) */
	margin:			0; /* entfernt alle Randabstände von Tags */
	padding:		0; /* entfernt alle Randabstände von Tags */
	border:			0; /* entfernt alle Rahmen z.B. bei einem Input-Feld */
	
}

html, body {
    height: 100%;
}

BODY {
    background: #BB7C5D;
    background-size: cover; /* damit wird das Hintergrundbild immer an das Browserfenster angepaßt */
    font-family: 'Arima Madurai', Tahoma, Arial, sans-serif, cursive;
    color: darkgreen;
    font-size: 1.1em;
	/* fixed verhindert, dass das Bild bei scrollen verschoben wird */
	/* no-repeat verhindert, dass das Bild gekachelt wird */
}


h1, h2, h3, h4 {
    font-family: 'Arima Madurai', Tahoma, Arial, sans-serif, cursive;
    color: darkgreen;
    text-align: center;
}

h1 {
    font-size: 2.1em;
}
h2 {
    font-size: 1.6em;
}
h3 {
    font-size: 1.4em;
}

h4 {
    font-size: 1.2em;
    text-align: left;
}

P {
    ~moz-hyphens: auto;		/* für Mozilla */
    ~webkit-hyphens: auto;	/* für Chrome und Safari */
    ~o-hyphens: auto;		/* für Opera */
    ~ms-hyphens: auto;		/* für MS Internet Explorer */
    hyphens: auto;			/* für den Rest */
    
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
    text-align: justify;
}

a {
	text-decoration: none;
}

#toprand {
    width: 100%;
    height: 70px;
    background: url(../pic/slider_01_toprand.jpg) no-repeat ;
    position: fixed; 		/* Box wird auf eine bestimmte Position fixiert in absoluten Positionsangaben */
    z-index: 1000;
}
header:hover h1 {
	text-shadow: 5px 5px 8px #333;
}
header:hover hgroup {
	transform: rotateX(180deg);
}

header hgroup {
	/* transform: skew(-20deg,0); */
	transition: all 0.4s;

}

.td_kopf {
    font-family: 'Arima Madurai', Tahoma, Arial, sans-serif, cursive;
    color: darkorange;
    font-size: 3.5em;
    text-shadow: 2px 2px 1px black, 1px -1px 1px white, -2px 2px 1px white, -1px -1px 1px white; /* erzeugt schwarzen Rand um den Text */
}

#hamburger_box {
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 20; /* funktioniert nur im Zusammenhang mit "position" */
}

#hamburger {
	width: 50px;
	height: 50px;
	background: url(../pic/hamburger_multi.png) no-repeat top right;
	border:	1px solid darkgreen;
	border-radius: 5px;
	transition: all 0.3%s;
	position: fixed;
	top: 18px;
	left: 10px;
	transition: all 0.4s;
	
}

#hamburger:hover {
	background-position:  top left; /* damit wird der rechte Teil des PNG angezeigt */
}


#daymenu {
    color: white;
    width: 400px;
    border-top: 1px solid steelblue;
    border-right: 1px solid steelblue;
    border-bottom: 1px solid steelblue;
    box-shadow: 0 2px 5px 2px steelblue; 
    position: fixed;
    top: 73px;
    left: -400px;
    border-radius: 0 100px 100px 0;
    padding-right: 30px;
    box-sizing: border-box;
    background: url(../pic/tbd.png) no-repeat center right rgba(21,109,26,0.7);
    transition: all 0.4s;
    z-index: 1000;
}

#daymenu:hover {
    left: 0px;
}

#daymenu P {
    margin: 0;
    width: 100%;
}

.daymenu_liste {
    background: rgba(21,109,26,0.7);
    font-size: 0.7em;
    padding: 10px 10% 10px 10%;
    border-radius: 0 70px 70px 0;
    line-height: 1.2em;
    list-style: url(../pic/bullet.png);
}

.daymenu_liste a:link, .daymenu_liste a:visited {
    color: white;
    text-decoration: none;
}

.daymenu_liste a:hover, .daymenu_liste a.aktuell{
    text-decoration: underline;
    color: darkorange;
}

#slider {
	height: 450px;
	
}

#wrapper {
	width: 1200px;
	position: relative;
	left: 50%;
	margin-left: -600px;
	z-index: 10;
	float: left;
	background: rgba(0,0,0,0);
}


#quadratpic {
	position: relative;
	min-height: 200px;
	overflow: hidden;
	box-sizing: border-box;

}

article h1, h2, h3, h4 {
	color: white;
	text-align: center;
}

article h1 {
	color: snow;
    font-size: 1.6em;
	padding-top: 200px;
	text-shadow: 1px 1px 1px black, 1px -1px 1px black, -1px 1px 1px black, -1px -1px 1px black;
}
article h2 {
    font-size: 1.2em;
}
article h3 {
    font-size: 1.0em;
}

article h4 {
    font-size: 0.8em;
    
}

	
article {
	color: white;
	width: 200px;
    height: 300px;
    overflow: hidden;
    box-sizing: border-box;
    float: left;
    top: 0;
    left: 0;
    margin-left: 0;
	position: relative;
    z-index: 4;
}

#links {
    background: url(../pic/hgmain_iran_200x200_3.jpg) no-repeat top left;
	border-radius: 100px 100px 0 0;
}

#links:hover {
    background: url(../pic/hgmain_iran_200x200.jpg) no-repeat top left;
	box-shadow: inset 0px -2px 0px 0px red, 0px 2px 0px 0px yellow;
    text-shadow: 1px 1px 1px black, 1px -1px 1px black, -1px 1px 1px black, -1px -1px 1px black;
}

#mitte1 {
    background: url(../pic/hgmain_namibia_200x200_3.jpg) no-repeat top center;
	border-radius: 100px 100px 0 0;
}

#mitte1:hover {
    background: url(../pic/hgmain_namibia_200x200.jpg) no-repeat top center;
	box-shadow: inset 0px -2px 0px 0px red;
	text-shadow: 1px 1px 1px black, 1px -1px 1px black, -1px 1px 1px black, -1px -1px 1px black;
}

#mitte2 {
    background: url(../pic/hgmain_usa_200x200_3.jpg) no-repeat top center;
	border-radius: 100px 100px 0 0;
}

#mitte2:hover {
    background: url(../pic/hgmain_usa_200x200.jpg) no-repeat top center;
	box-shadow: inset 0px -2px 0px 0px red;
	text-shadow: 1px 1px 1px black, 1px -1px 1px black, -1px 1px 1px black, -1px -1px 1px black;
}

#mitte3 {
    background: url(../pic/hgmain_thailand_200x200_3.jpg) no-repeat top center;
	border-radius: 100px 100px 0 0;
}

#mitte3:hover {
    background: url(../pic/hgmain_thailand_200x200.jpg) no-repeat top center;
	box-shadow: inset 0px -2px 0px 0px red;
	text-shadow: 1px 1px 1px black, 1px -1px 1px black, -1px 1px 1px black, -1px -1px 1px black;
}

#mitte4 {
    background: url(../pic/hgmain_tansania_200x200_3.jpg) no-repeat top center;
	border-radius: 100px 100px 0 0;
}

#mitte4:hover {
    background: url(../pic/hgmain_tansania_200x200.jpg) no-repeat top center;
	box-shadow: inset 0px -2px 0px 0px red;
	text-shadow: 1px 1px 1px black, 1px -1px 1px black, -1px 1px 1px black, -1px -1px 1px black;
}

#rechts {
    background: url(../pic/hgmain_aegypten_200x200_3.jpg) no-repeat top right;
	border-radius: 100px 100px 0 0;
}

#rechts:hover {
    background: url(../pic/hgmain_aegypten_200x200.jpg) no-repeat top right;
	box-shadow: inset 0px -2px 0px 0px red;
	text-shadow: 1px 1px 1px black, 1px -1px 1px black, -1px 1px 1px black, -1px -1px 1px black;
}


/* Definition des 3-Spaltigen Teils */


#dreispalter {
	color: white;
	position: inherit;
	overflow: hidden;
	box-sizing: border-box;
	clear: both;
	border: 1px, solid red;
	margin-top: 50px;
}

#dreispalter h1 {
	color: snow;
    font-size: 1.6em;
	padding-top: 1px;
	text-shadow: 1px 1px 1px black, 1px -1px 1px black, -1px 1px 1px black, -1px -1px 1px black;
}
#dreispalter h2 {
    font-size: 1.2em;
	padding-top: 10px;
}
#dreispalter h3 {
    font-size: 1.0em;
	padding-top: 10px;
}

#dreispalter h4 {
    font-size: 0.8em;
    padding-top: 10px;
}

#w2_links {
	width: 20%;
	float: left;
	padding-right: 10px;
	box-sizing: border-box;
}

#w2_content {
	width: 60%;
	float: left;
	background: rgba(0,0,0,0.02);
	padding-left: 10px;
	padding-right: 10px;
	box-sizing: border-box;
	border-left: 1px solid maroon;
	border-right: 1px solid maroon;
}

#w2_rechts {
	width: 20%;
	float: left;
	box-sizing: border-box;
	padding-left: 10px;
}


.menu_links {
    font-size: 0.7em;
    padding: 10px 10% 10px 10%;
    line-height: 1.2em;
    list-style: url(../pic/bullet.png);
	line-height: 1.5em;
}

.menu_links a:link, .menu_links a:visited {
    color: white;
    text-decoration: none;
}

.menu_links a:hover, .menu_links a.aktuell{
    text-decoration: underline;
	text-shadow: 1px 1px 1px black, 1px -1px 1px black, -1px 1px 1px black, -1px -1px 1px black;

}



footer {
	color: maroon;
	text-align: center;
	width: 100%;
	min-height: 20px;
	background: #BB7C5D;
	border-top: 1px solid lightblue;
	border-bottom: 1px solid lightblue;
	clear: both; /* damit werden die "Floats" von oben gelöscht */
	bottom: 0;
	position: fixed;
	z-index:100;
}






/* --- erster Schritt unter 1230 sollen drei Bilder nebeneinander stehen --- */

@media screen and (max-width: 1230px) {

	#wrapper {
		width: 600px;
		left: 50%;
		margin-left: -300px;
		background: rgba(0,200,0,0.3);
	}



}

/* --- zweiter Schritt unter 700px sollen die Bilder alle untereinander --- */

@media screen and (max-width: 700px) {

	#wrapper {
		width: 400px;
		left: 50%;
		margin-left: -200px;
		background: rgba(0,200,0,0.3);
	}

	article {
		height: 200px;
	}

	#dreispalter {
		width: 100%;
		clear: both;
	}

	#w2_links {
		width: 100%;
	}

	#w2_content {
		width: 100%;
	}

	#w2_rechts {
		width: 100%;
	}

}