/* @import url(https://fonts.googleapis.com/css?family=Open+Sans);  /* Google free font */
/* @import url(https://fonts.googleapis.com/css?family=Bree+Serif); /* Google free font */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;600&family=Open+Sans:wght@300&display=swap');

/* **************************************************************************************************************************************** */
/* Constants and variables for the whole page                                                                                               */
/* **************************************************************************************************************************************** */

:root{
  /* --bodyforecol: #000000;
  --bodybackcol: #ffffff;
  --navforecol: #000000;
  --navbackcol: #76d7c4;
  --navelforecol: #000000;
  --navelbackcol: #76d7c4;
  --drop1forecol: #000000;
  --drop1backcol: #76d7c4;
  --drop2forecol: #000000;
  --drop2backcol: #76d7c4; */

  --bodyforecol: #000000;
  --bodybackcol: #ffffff;
  --navforecol: #000000;
  --navbackcol: #ffffff;
  --navelforecol: #000000;
  --navelbackcol: #ffffff;
  --drop1forecol: #000000;
  --drop1backcol: #ffffff;
  --drop2forecol: #000000;
  --drop2backcol: #ffffff;

  /* --drop1elforecol: #000000; */
  /* --drop1elbackcol: #76d7c4; */

}

/* **************************************************************************************************************************************** */
/* Gerneral styles for the whole page                                                                                                       */
/* **************************************************************************************************************************************** */

body {                                                           /* Description of main body */
  color: var(--bodyforecol);
  background: var(--bodybackcol);
	font-size:20px;
  line-height: 32px;
	margin: 0;
	padding: 0;
	word-wrap:break-word !important;                              /* Break word and wrap onto the next line line */
	font-family: 'Open Sans', sans-serif;
}

h1 {                                                            /* Description of heading 'h1' */
	text-align:center;                                            /* Alignment of text inside an element */
	font-size:50px;
	line-height: 50px;
	color: black;
}

h3 {
  text-align: center;
  font-size: 30px;
	line-height: 34px;
	color: #FFF;
}

h4 {
	font-size: 16px;
	line-height: 20px;
	text-align: left;
	color: black;
}

h3 a {                                                           /* Description of 'a' (link) inside heading 'h1' */
	color: #FFF;
}

a {                                                              /* Description of 'a' (link) */
	color: #FFF;
}

p {                                                              /* Description of 'p' (paragraph) */
	text-align: center;
}

  li {
    list-style: none;
}

/* **************************************************************************************************************************************** */
/* Styles depending on the resolution                                                                                                       */
/* **************************************************************************************************************************************** */

#slogan {                                  /* Description of id 'slogan' */
  display: inline;
  padding: 0 10px;
  font-size:15px;
  position: absolute;
  left: 300px;
  top:20px;
}

.logo {                                     /* Description of id 'logo' */
  display: inline;
	padding: 0 30px;
	float:none;
  font-size:20px;
	line-height: 80px;
}

.logo img{
  display: inline;
  vertical-align:middle;
  width:321px;
  height:45px;
}

li .langbutton a{
  display: inline-block;
  list-style: none;
  padding: 0px;
  margin: 0px;
  position: absolute;
  top: 20px;
  height: 40px;
  width: 40px;
}

li .langbutton a img{
  position: relative;
  height: 40px;
  width: 40px;
}

li .langbutton a:hover {                                         /* Zoom effect when hovering language icons */
  color: var(--bodyforecol);
  background-color: var(--bodybackcol);
  padding: 0px;
  margin: 0px;
  transform: scale(1.3);
}

li .langbutton a#LangDEpos{
  right: 15px;
}

li .langbutton a#LangENpos{
  right: 60px;
}

li .langbutton a#LangFRpos{
  right: 105px;
}

.LangSelDarkDE{
  display:none;
}

.LangSelDarkEN{
  display:none;
}

.LangSelDarkFR{
  display:none;
}

ul li ul#drop-1,
ul li ul#drop-1 li{
  width: 150px;
  text-align: center;
}

nav i.material-icons {
  font-size: 28px;
  vertical-align: middle;
  position: relative;
  float: right;
  top: 2px;
}

.hidden{
  display: none;
}

.menutoggle{
  display: none;
}

[id^="drop"] {
	display: none;
}

/* ******************************************************************************************************************************************* */

nav {                                         /* Description of the nav bar container */
  color: var(--navforecol);
  background-color: var(--navbackcol);                    /* Background color for the nav container */
  margin:0;
	padding: 0;
  /* box-shadow: 5px 5px 5px 0 rgba(0,0,0,.2); */
  border-style: none;
  border-top: 1px solid var(--navforecol);                /* Single px line above nav container */
  position: relative;
}

nav a{                                        /* Styling the links in nav */
  color:var(--navforecol);
  background-color: var(--navbackcol);                    /* Background color for the nav container */
  display:block;
  padding:4px 20px;
  margin: 10px 0px;
	font-size:20px;
	text-decoration:none;
}

nav a:hover {                               /* Background color change on hover every menu items*/
	/* background-color: red; */
  padding-bottom: 3px;
  border-style: none;
  border-bottom: 1px solid red;
  /* background-color: lightgrey; */
  /* border-radius: 20px; */
}

nav::after {                                  /* Since we'll have the "ul li" "float:left" we need to add a clear after the nav container. */
	/* content:"";
	display:table;
	clear:both;

	background-color: white; */
}

nav ul {                                      /* General description of the elements in nav bar */
	padding:0;                                  /* Space around elements content */
	margin:0;                                   /* Space around element */
  text-align: center;                         /* Position of links inside nav bar */
	list-style: none;                           /* Disable former 'list-style' definitions */
  position: relative;                         /* Element has to be positioned 'relative' to it's normal position */
}

nav ul li {                                   /* Positioning the nav bar items inline */
  color: var(--navelforecol);
  background-color: var(--navelbackcol);
  display:inline-block;
  position: relative;
}

nav ul li ul {                                 /* Description of 1st level dropdown */
  display: none;
  color:var(--drop1forecol);
  background-color: var(--drop1backcol);
	position: absolute;
  /* position: relative; */
  top: 60px;                                /* has to be the same number as the "line-height" of "nav a" */
  left: 0px;
  text-align: middle;
  box-shadow: 10px 10px 10px 0 rgba(0,0,0,.2);
}

nav ul li ul li {                              /* 1st level dropdown elements */
  width:220px;
	display:list-item;
	text-align: left;
	/* box-shadow: 10px 10px 10px 0 rgba(0,0,0,.2);                 Shadow below 1st level dropdown */
  position: relative;
}

nav ul li ul li:hover {                     /* Background color change of 1st level dropdown item when hover on 2nd level dropdown items*/
  /* background-color: green; */
  /* background-color: yellow; */
  border-radius: 0px;
}

nav ul li ul li ul{                      /* Description of 2nd level dropdown */
  color:var(--drop2forecol);
  background-color: var(--drop2backcol);
  top:-10px;
  left: 220px;
}

nav ul li ul li ul li {                  /* 2nd level dropdown elements */
  top:0px;
  left:0px;
  width:220px;
	display:list-item;
	text-align: left;
	/* box-shadow: 10px 10px 10px 0 rgba(0,0,0,.2);                 Shadow below 1st level dropdown */
  position: relative;
}

nav li:hover {                              /* Background color change of nav bar item when hover on 1st level dropdown items */
	/* background-color: yellow; */
  border-style: none;
}

nav ul li:hover > ul {
	display:inherit;
}

/* **************************************************************************************************************************************** */


/* li > a           Nur wenn a das direkte child von li ist*/
/* li a             Nur wenn a innerhalb von li ist */
/* Li + a           Nur wenn a direkt auf 'beendetes' li folgt */
/* Li ~ a           Nur wenn a innerhalb von li ist ohne anderes style davor */


/* **************************************************************************************************************************************** */
/* Media Queries for Responsive Design                                                                                                      */
/* **************************************************************************************************************************************** */

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

#slogan{
  display: none;
}

.toggle + a {
  /* display: none; */
}

.menutoggle{
  display: block;
  cursor: pointer;
  line-height: 40px;
  border-top: 1px solid black;
}

.hidden{
    display: none;
}

.hiddendiv {
  display: none;
  /* height: 200px; */
  background-color: green;
}

.menutoggle:focus+.hiddendiv {
  display: block;
}

.menutoggle i{
  padding:4px 20px;
	color:black;
	text-decoration:none;
  vertical-align: middle;
}

li .langbutton a:hover {                                         /* Zoom effect when hovering language icons */
  transform: none;
}

input#menonoff:checked + label + div{
  display:block;
}

/* *************************************************************************************************************************************** */

nav {                                         /* Description of the nav bar container */
  color: var(--navforecol);
  background-color: var(--navbackcol);                    /* Background color for the nav container */
  margin:0;
	padding: 0;
  /* box-shadow: 5px 5px 5px 0 rgba(0,0,0,.2); */
  border-style: none;
  /* border-top: 1px solid var(--navforecol);  */
  position: relative;
}

nav a{                                        /* Styling the links in nav */
  color:var(--navforecol);
  background-color: var(--navbackcol);                    /* Background color for the nav container */
  display:block;
  padding:4px 20px;
  margin: 10px 0px;
	color:black;
	font-size:20px;
	text-decoration:none;
}

nav a:hover {                               /* Background color change on hover every menu items*/
	/* background-color: red; */
  border-style: none;
  background-color: lightgrey;
  border-radius: 20px;

/* visibility: visible !important; */
/* display: block !important; */

}

/* nav a:hover::after { */
  /* visibility: visible !important; */
  /* display: block !important; */
/* visibility: visible !important; */
/* display: block !important; */
/* display: none; }*/

/* nav::after { */
   /* Since we'll have the "ul li" "float:left" we need to add a clear after the nav container. */
	/* content:"";
	display:table;
	clear:both;
	background-color: white; */
/* } */

nav i.material-icons {
  font-size: 28px;
  vertical-align: middle;
  position: relative;
  top: 2px;
}

nav i.material-icons-r {
  font-size: 28px;
  vertical-align: middle;
  position: relative;
  top: -2px;
}

nav ul {                                      /* General description of the elements in nav bar */
	padding:0;                                  /* Space around elements content */
	margin:0;                                   /* Space around element */
  /* text-align: center;                          */
  text-align: left;
	list-style: none;                           /* Disable former 'list-style' definitions */
  position: relative;                         /* Element has to be positioned 'relative' to it's normal position */
  width: 230px;
  left: 40px;
}

nav ul li {                                   /* Positioning the nav bar items inline */
  color: var(--navelforecol);
  background-color: var(--navelbackcol);
  display:block;
  position: relative;
}

nav ul li ul {                                 /* Description of 1st level dropdown */
  display: none;
  color:var(--drop1forecol);
  background-color: var(--drop1backcol);
  position: relative;
  top: -10px;
  left: 20px;
  text-align: middle;
  box-shadow: 5px 5px 5px 5px rgba(0,0,0,.2);
}

nav ul li ul li {                              /* 1st level dropdown elements */
	width:220px;
	display:list-item;
	text-align: left;
  position: relative;
/* top:-10px; */
}

nav ul li ul li:hover {                     /* Background color change of 1st level dropdown item when hover on 2nd level dropdown items*/
  /* background-color: green; */
  /* background-color: white; */
}

nav ul li ul li ul{                      /* Description of 2st level dropdown */
  color:var(--drop2forecol);
  background-color: var(--drop2backcol);
  top:-10px;
  left: 20px;
  position: relative;
}

nav ul li ul li ul li {                  /* 2nd level dropdown elements */
  top:0px;
  left:0px;
  width:220px;
	display:list-item;
	text-align: left;
}

nav li:hover {                              /* Background color change of nav bar item when hover on 1st level dropdown items */
	/* background-color: yellow; */
  border-style: none;
  border-radius: 20px;
}

nav ul li:hover > ul {
	/* display:inherit; */
  /* display:none; */
}

nav ul li ul#drop-1{
  left:20px;
  }

nav ul li ul#drop-1 li{
  width: inherit;
  text-align: center;
}

}

/* **************************************************************************************************************************************** */
/* Media Queries for Responsive Design                                                                                                      */
/* **************************************************************************************************************************************** */

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

#slogan {
  display: none;
}

.logo {                                     /* Description of id 'logo' */
  display: inline;
	padding: 0 0;
	float:none;
  font-size:20px;
	line-height: 50px;
}

.logo img{
  display: inline;
  vertical-align:middle;
  padding: 0 10px;
  width:160px;
  height:23px;
}

li .langbutton a{
  display: inline-block;
  list-style: none;
  padding: 0px;
  margin: 0px;
  position: absolute;
  top: 10px;
  height: 30px;
  width: 30px;
}

li .langbutton a img{
  position: relative;
  height: 30px;
  width: 30px;
}

li .langbutton a#LangDEpos{
  right: 15px;
}

li .langbutton a#LangENpos{
  right: 50px;
}

li .langbutton a#LangFRpos{
    right: 85px;
}
}