@charset "utf-8";
/* CSS Document

german-language.lu
------------------------------------------------

colors
------------------------------------------------*/
:root {
	--color-1: #e1dd00; /* gelbgrün
	
	--color-1-l2: #F1C541; /* Maize 2 Stufen heller*/
	--color-2: #fff; /* weiß */
	--color-3: #0564a4; /* blau / Green Blue Crayola*/
	--color-3-l2: #0785DA; /* blau 2 Stufen heller */
	--color-4: #aacde5; /* hellblau / Uranian Blue */ 
	--color-5: #f7fafc; /* hellgraublau */
	--color-6: #383838; /* dunkelgrau */
	--color-7: #6BBF59; /* hellgrün / Mantis (Gottesanbeterin)*/
}
body {background-color: var(--color-1);}
/* fonts
--------------------------------------------------- */
@font-face {font-family: 'montserrat-regular'; src: url('montserrat-regular-webfont.woff2') format('woff2'); font-weight: normal; font-style: normal;}
@font-face {font-family: 'montserrat-semibold'; src: url('montserrat-semibold-webfont.woff2') format('woff2'); font-weight: normal; font-style: normal;}
@font-face {font-family: 'montserrat-bold'; src: url('montserrat-bold-webfont.woff2') format('woff2'); font-weight: normal; font-style: normal;}
@font-face {font-family: 'montserrat-italic'; src: url('montserrat-italic-webfont.woff2') format('woff2'); font-weight: normal; font-style: normal;}
body{font-family:'montserrat-regular';}
strong{font-family:'montserrat-semibold';}
nav a {font-family:'montserrat-semibold';}
h1, h2, .button-1{	font-family:'montserrat-bold';}

/* font-size
--------------------------------------------------- */
body {font-size: 19px; line-height: 160%;}
h1{font-size: 28px;}
h2{font-size: 26px;}
.h1big{font-size: 36px;}
.text30{font-size: 30px;}
.text24{font-size: 24px; line-height: 200%;}

@media screen and (max-width: 500px) {
	body {font-size: 16px;}
	h1{font-size: 24px;}
	h2{font-size: 21px;}
	.h1big{font-size: 28px;}
}

/* width
--------------------------------------------------- */
.centerwidth1, .centerwidthindex{ margin: 0 auto; max-width: 820px;}
.centerwidth2{ margin: 0 auto;	max-width: 1200px;	padding: 0 50px; }
.centerfull{ width: 100%; padding: 15px 0; margin: 15px 0; }

@media screen and (max-width: 1280px) {
	.centerwidth1{ margin: 0; padding: 0 40px; max-width: 1200px; }
	.centerwidth2{ margin: 0 40px; max-width: 1200px; padding: 0 50px; }
	.centerwidthindex{ margin: 0 auto; max-width: 400px;}
}

/* basics
------------------------------------------------------------------------- */
 *{ margin:0; padding:0; }
/* scroll-behavior */ html {scroll-behavior: smooth;} 
/* Firefox-Bug */ a {outline:none;} a img {border:none;}
/* img responsive */  img {max-width: 100%; height: auto;}

body { text-align: center; margin-top: 40px;}

/* headings
------------------------------------------------------------------------- */

h1{color: var(--color-1); margin-bottom: 10px;}
h2{color: var(--color-1);}
.h1big{ display: inline-block; margin-bottom: 10px;}

/* links
------------------------------------------------------------------------- */
footer a{color: var(--color-2); text-decoration: none;}
footer a:hover{color: var(--color-4);}

/* navigation
------------------------------------------------------------------------- */
nav{ width:1260px; margin: 0 auto; }

nav ul {  list-style-type: none;}

nav li{display: inline; float:left;}
nav a {
  display: block;
  padding: 0px 16px;
  background-color: #fff;
	text-decoration: none;
	color: #000;
	line-height: 38px;
}

.a1{padding: 0 16px 0 0;}
.a2{display: inline-block !important; padding: 0 10px;}

nav a:hover {color: #666;}

.dropdown { position: relative; display: inline-block; }

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  /*display: none;*/
  visibility: hidden;
	opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 400px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
 display: block;
   
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1;	color: #000;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  /* display: block;*/
visibility: visible;
  opacity: 1;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn { background-color: #3e8e41; }


.menufr li a{font-size: 16px; padding: 0 8px;}
.menufrsecond a{line-height: 19px; padding: 14px 12px!important;}

/* hr
------------------------------------------------------------------------- */

.hr1 { margin-top: 1rem; margin-bottom: 1rem; border: 0; border-top: 1px solid rgba(0,0,0,.1);}

.hrcontainer { max-width: 70%;  margin: 50px auto; }

.hr-text { line-height: 1em; position: relative;  outline: 0;  border: 0;  color: black;  text-align: center;  height: 1.5em;}

.hr-text:before {
    content: '';
    /* use the linear-gradient for the fading effect
       use a solid background color for a solid bar */
    background: linear-gradient(to right, transparent, var(--color-4), transparent);
    position: absolute; left: 0;   top: 50%;   width: 100%;   height: 1px; }
.hr-text:after {
    content: attr(data-content); position: relative; display: inline-block;   color: black;  padding: 0 .5em;   line-height: 1.5em;
    /* this is really the only tricky part, you need to specify the background color of the container element... */
    color: var(--color-4);
    background-color: #fcfcfa;
  }


/* buttons
------------------------------------------------------------------------- */
.button-1 {
	background-color:var(--color-7);
	border-radius:28px;
	display:inline-block;
	cursor:pointer;
	color:var(--color-2);
	font-size:15px;
	font-weight:bold;
	padding:12px 31px;
	margin: 20px 0 0 0;
	text-decoration:none;
	border: solid 3px var(--color-2);
	letter-spacing: 0.15em;
}
.button-2{ background-color:var(--color-3-l2);}
.button-1:hover { background-color:var(--color-1-l2);	color:var(--color-2);}
.button-2:hover { background-color: #555;}
.button-1:active {position:relative; top:1px;}
.m-bottom{margin-bottom: 30px;}

/* sections
------------------------------------------------------------------------- */
#intro{text-align: center;}
footer{
	background-color: var(--color-3);
	padding: 50px;
	color: var(--color-2);
}

/* properties
------------------------------------------------------------------------- */
.centertext{text-align: center;}
.bg1{background-color:var(--color-5);}
.round {border-radius: 100%;}
.lineheight0{line-height: 0px;}
.textleft{text-align: left;}
.spacer80{margin-bottom: 80px;}
.margin1{margin: 40px 0;}
.divider-h-1{height: 40px;}
.divider-ver-1{float: left; width: 25px;}

/* boxes
------------------------------------------------------------------------- */
.box-1{
	background-color: #f5f5f5;
	background-color: var(--color-1);
	text-align: center;
	border-radius: 5px;
	padding: 25px;
	float: left;
	width: 340px;
}
@media screen and (max-width: 1280px) {
	.box-1{ float:none; margin-bottom: 30px; width: auto;}
	.m-bottom{margin-bottom: 0;}
}
.box-1 h2{color: var(--color-2);}

.box-2{ background-color: var(--color-3);}
.box-2 h2{color: var(--color-2);}
      
.clear{clear: both;}

.box3{margin-top: 10px; border-radius: 10px; padding: 20px 30px 20px 100px; border: solid 1px var(--color-1);}
.box3b{ padding: 20px 30px 30px 70px; margin-top: 30px;}

.box4{margin-top: 30px; border-radius: 10px; padding: 40px 50px 40px 50px; border: solid 1px var(--color-1); text-align: left;}
.box5{ border: solid 0px var(--color-3-l2); background-color: #f1f8fd;}
.box6{
-webkit-box-shadow: 2px 5px 16px 0px #0B325E, 3px 3px 15px 5px rgba(0,0,0,0); 
box-shadow: 2px 5px 16px 0px #0B325E, 3px 3px 15px 5px rgba(0,0,0,0);
}

/* mobile menu
------------------------------------------------------------------------- */
#mobilemenubutton{
	display:none;
}
@media screen and (max-width: 1280px) {
  #mobilemenubutton{
	display:block;
	}
	nav{ display: none;}
}
 /* The Overlay (background) */
.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */   
  height: 100%;
  width: 0;
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
   
  background-color: #2b8a16; 
	background-color: #1d7a0a;
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
  position: relative;
  top: 7%; /* 7% from the top */
  width: 100%; /* 100% width */
  text-align: center; /* Centered text/links */
  margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.overlay a {
  padding: 10px;
  text-decoration: none;
  font-size: 20px;
	line-height: 150%;
  color: #fff;
  display: block; /* Display block instead of inline */
  transition: 0.3s; /* Transition effects on hover (color) */
	/* border-bottom: solid 1px #91cd84; */
	
	
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
  color: #91cd84;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
  position: absolute;
  top: 0px;
  right: 45px;
  font-size: 60px;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
} 
.mobile-nav-divider{
	margin: 0 auto; max-width: 550px; height: 1px; background-color: #91cd84; border-right: solid 10px #1d7a0a; border-left: solid 10px #1d7a0a;
}

/* Accordion
------------------------------------------------------------------------- */
.accordion {
  background-color:  var(--color-7);
  color: #fff;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.15em;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: center;
  outline: none;
  font-size: 20px;
  transition: 0.4s;
	border-radius: 7px;
}

.active, .accordion:hover {
  background-color:var(--color-1-l2);
}

.panel {
  padding: 0 18px;
  background-color: #F7F7F7;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.panel a{
	text-decoration: none;
	color: var(--color-7);
	display: inline-block;
	padding: 5px 0;
	font-family:'montserrat-semibold';
	transition: color 0.5s;
}
.panel a:hover{
	text-decoration: none;
	color: var(--color-1);

}

/* form
------------------------------------------------------------------------- */
.intext, textarea{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    width: 100%;
	padding: 20px;
	font-family:'montserrat-semibold';
	font-size:100%;
	color: #4b4237;
	border: solid 0px #bccf00;
}
.intext2{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	padding: 3px;
	font-family:'montserrat-semibold';
	font-size:100%;
	color: #4b4237;
	border: solid 0px #bccf00;
}
.intext{ margin-bottom: 12px;}
.insubmit{padding: 22px; background-color: #fff; font-size: 20px;
	font-family:'montserrat-semibold';
	color:#002e5f;font-weight: bold;font-size:100%; border: none; border-radius: 7px;}
		
		input[type="submit"]:hover {

			cursor: pointer; 
}
.request{
			color: #fff; background-color: #002e5f; padding:50px; text-align: center; font-weight: bold; max-width: 800px; margin: 20px auto; border: solid 7px #fff; border-radius: 8px;
		}

/* to top button
------------------------------------------------------------------------- */
#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #6BBF59;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {background-color: #555;}