/* ------------------------------------------------------------------------------------------------------------------------------------------------------
                                                                      Container                              
 --------------------------------------------------------------------------------------------------------------------------------------------------------*/
body 
{
  color: #7A7A7A;
  background-color: white; /* Neutral */
  font-family: sans-serif;
  width: 100%;
  margin: 0px;
  line-height: 1.5;
  text-align: center;
  font-size: medium;
  letter-spacing: -0.010em;
}
nav {
  width: 100%;
  font-weight: 600;
  font-family: sans-serif;
  display: flex;
  position: sticky;
  top: 0;
  background-color: white;
  padding-bottom: 10px;
}
.nav_navbar {
  width: 70%;
  float: left;
  padding-left: 10%;
  display: flex;
  justify-content: space-around;
  text-align: left;
}
.nav_login {
  padding-top: 10px;
  width: 30%;
  text-align: right;
  padding-right: 1.1%;
}
.content_bg_img{
  width: 100%;   
  display: flex;  
}
.content_bg_img_btn_placeholder{
  background-color: transparent;
  justify-content: flex-end;
  width: 1.5%;
}
.content_bg_img_slideshow{
  width: 97%;
  justify-content: flex-start;
}
.content_match{
  width: 90%;
  margin: 5%;
}
.title{
  margin-top: 5%;
  width: 100%;
}
main{
  width: 100%;
  display: flex;
  text-align: justify;
}
.content_justify{
  text-align: justify;
  width: 60%;
  margin-left: 20%;
  margin-right: 20%;
}
.content_center{
  text-align: center;
  width: 60%;
  margin-left: 20%;
  margin-right: 20%;
}
.content_btn_placeholder{
  background-color: transparent;
  justify-content: flex-end;
  width: 5%;
  height: 100%;
  padding-top: 50%;
}
.content_admin{
  width: 96%;
  text-align: center;
  overflow: auto;
  margin-left: 2%;
  margin-right: 2%;
}
.content_left{
  width: 55%;
  text-align: justify;
  float: left;
  margin-left: 0px;
  margin-right: 5%;
  margin-top: 0px;
}
.content_right{
  width: 40%;
  float: left;
  text-align: center;
  margin-top: 0px;
}
.content_popup{
  width: 80%;
  font-size: small;
  margin-left: 10%;
  margin-top: 5%;
}
.content_slideshow_main{
  display: block;
}
.content_slideshow_sub{
  margin-top: 2%;
  display: flex;
  justify-content: space-around;
}
.mitarbeiter_slide{
  width: 90%;
}
.content_register_done
{
  margin-left: 30%;
  width: 40%;
}
.content_footer_images{
  width: 100%;
  margin-top: 6%;
  display: flex;
  justify-content: space-around;
}
footer{
  margin-top: 0.5%;
  background-color: #365B6D;
  width: 98%;
  display: flex;
  min-height: 200px;
  padding-top: 0.5%;
  text-align: left;
  padding-left: 2%;
  color: white;
}
.footer_left{
  width: 60%;
}
.footer_right{
  width: 40%;
  text-align: right;
}
/* ------------------------------------------------------------------------------------------------------------------------------------------------------
                                                                      Überschriften                              
 --------------------------------------------------------------------------------------------------------------------------------------------------------*/
 h1{
   color:#41C1BA;
   font-size: 280%;
   letter-spacing: -0.040em;
 }
 h2{
   color:#41C1BA;
   font-size: 130%;
   letter-spacing: -0.040em;
 }
 .content_bg_img h1{
   color: white;
   font-weight: 500;
   font-family: Arial, Helvetica, sans-serif;
   line-height:110%
 }
 .content_popup h1{
    text-align: center;
    padding-bottom: 2%;
 }
/* ------------------------------------------------------------------------------------------------------------------------------------------------------
                                                              Links, Navigation & Dropdown                             
 --------------------------------------------------------------------------------------------------------------------------------------------------------*/
a{
  font-size: large;
  color: #7B7F88;
  background: 
    linear-gradient(to right, rgb(255, 255, 255), rgb(238, 236, 235)),
    linear-gradient(to right, rgb(241, 223, 206), rgb(5, 99, 146), rgb(1, 12, 22));
  background-size: 100% 0.1em, 0 0.1em;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 1500ms;
}
a:hover {
  color:#41C1BA;
  background-size: 0 0.1em, 100% 0.1em;
}
a.standard{
  color:#41C1BA;
  text-decoration:none;
  background: 0vmax;  
}
a.table{
  color: #41C1BA;
  font-size: 100%;
}
a.img{
  text-decoration: none;
  background: 0vmax;
}
.nav_navbar a {
  float: left;
  text-align: center;
  text-decoration: none;
}
a.help{
  text-decoration: none;
  color: white;
  font-weight: lighter;
}
.dropdown {
  float: left;
  overflow: hidden;
  color: #7B7F88;
}
.linkbtn {
  font-weight: 600;
  font-family: Arial, Helvetica, sans-serif;
  font-size: medium;
  color: inherit;
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding-left: 21px;
  padding-right: 21px;
  padding-top: 13px;
  padding-bottom: 13px;
} 
.dropdown .dropbtn {
  font-weight: inherit;
  font-family: inherit;
  font-size: medium;
  color: inherit;
  border: none;
  background-color: transparent;
  padding-left: 21px;
  padding-right: 21px;
  padding-top: 13px;
  padding-bottom: 13px;
}
.navbar a:hover, .dropdown:hover .dropbtn {
  cursor: pointer;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 152px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  margin-top: 40px;
}
.dropdown-content a {
  float: none;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  font-size: small;
  margin-left: 0;
}
.dropdown-content a:hover {
  background-color: #55595C;
  color: white;
}
.dropdown:hover .dropdown-content {
  display: block;
}
.content_center a{
  font-size: medium;
  text-decoration: none;
}
.sidebar {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #264D3F;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}
.sidebar a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 20px;
  color: #818181;
  display: block;
  transition: 0.3s;
}
.sidebar a:hover {
  color: #f1f1f1;
}
.sidebar .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
}
.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: #264D3F;
  color: white;
  padding: 10px 15px;
  border: none;
}
.openbtn:hover {
  background-color: #444;
}
#main {
  transition: margin-left .5s;
  padding: 16px;
  display: none;
}
/* ------------------------------------------------------------------------------------------------------------------------------------------------------
                                                                      Bilder                             
 --------------------------------------------------------------------------------------------------------------------------------------------------------*/
 img {
  transition: transform 0.7s;
 }
 img:hover {
  filter: brightness(0.6);
  transition: 1000ms;
 }
img.avatar{
  border-radius: 100%;
}
img.no_effect {
  transition: none;
 }
img.no_effect:hover {
  transition: none;
  filter: none;
 }

/* ------------------------------------------------------------------------------------------------------------------------------------------------------
                                                            Formulare / Buttons                     
 --------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------
                Allgemein
------------------------------------*/
input{
  border-color:#41C1BA;
}
input[type=submit], input[type=button]{
  background-color:#41C1BA;
  color: white;
  cursor: pointer;
  width: 100%;
  border-radius: 1em;
  height: 40px;
 }
input[type=submit]:hover, input[type=button]:hover {
  color: white;
  cursor: pointer;
  background-color: #55595C;
}
input[type=checkbox]{
  cursor: pointer;
}
input:hover, textarea:hover, select:hover{
  background: white;
  box-shadow: 0 0 10px#41C1BA;
  cursor: auto;
  border-color:#41C1BA;
  resize: none;
}
select{
  /* ... */
  position: center;
  width: 100%;
  border-radius: 8px;
  background-color: white;
}
select:hover{
  /* ... */
  border-radius: 8px;
}
/*------------------------------------
              Content-BG-Img
------------------------------------*/
button.content_bg_img_slide_btn{
  border: 0;
  height: 100%;
  width: 100%;
  padding-top: 50%;
  background-color: white;
  color: #55595C;
}
button.content_bg_img_slide_btn:hover{
  background-color: #41C1BA;
  transition: background-color 3s;
  color: white;
  cursor: pointer;
  box-shadow: 0px 0px 90px grey;
}
/*------------------------------------
              MA-Slide
------------------------------------*/
button.content_ma_img_slide_btn{
  border: 0;
  height: 100%;
  width: 100%;
  padding-top: 50%;
  background-color: white;
  color: #55595C;
}
button.content_ma_img_slide_btn:hover{
  cursor: pointer;
}
/*------------------------------------
              Navigation
------------------------------------*/
button.linkbtn:hover{
  background-color: transparent;
  color:#41C1BA;
}
/*------------------------------------
          Login / Logout
------------------------------------*/
input.login_nav{
  width: 32%;
  margin-right: 1%;
  border-radius: 1em;
  height: 30px;
  background-color: white;
  font-size: 80%;
  padding-left: 3%;
}
input[type=submit].login_nav{
  width: 18%;
  height: 35px;
  background-color:#41C1BA;
  border: 0em;
  padding-left: 0%;
  text-align: center;
}
input[type=submit].login_nav:hover{
  background-color: #55595C;
  transition: all 2s ease 0s;
}
button.logout{
  width: 20%;
  border-radius: 5px;
  height: 100%;
  color: #000E28;
  border-color: transparent;
  margin-right: 1.5%;
  margin-left: 1.5%;
  font-size: smaller;
}
button.logout:hover{
  background-color: #7a1624;
  color: white;
  cursor: pointer;
  transition: all 2s ease 0s;
}
button.match{
  width:70%;
  border-radius: 5px;
  height: 25px;
  color: #000E28;
  border-color: transparent;
  margin-right: 1.5%;
  margin-left: 1.5%;
}
button.match:hover{
  background-color: #7da082;
  color: black;
  cursor: pointer;
  transition: all 2s ease 0s;
}
a.match{
  color: black;
  text-decoration: none;
}
/*------------------------------------
      Content-Bereich (login)
------------------------------------*/
input.login_content{
  width: 50%;
  border-radius: 1em;
  height: 40px;
  padding-left: 1%;
  background-color: white;
}
input[type=submit].login_content{
  width: 51.5%;
  height: 50px;
  background-color:#41C1BA;
  border: 0em;
}
input[type=submit].login_content:hover{
  background-color: #55595C;
  transition: all 2s ease 0s;
}
/*-----------------------------------------------
Content-Bereich (Filter, Feedback, Registrierung)
------------------------------------------------*/
input[type=reset].filter, input[type=submit].filter{
  width: 48%;
  border-radius: 1em;
  margin-left: 1%;
  margin-right: 1%;
  height: 50px;
  background-color: white;
  color: #000E28;
  border-color: #000E28;
}
input[type=submit].filter:hover{
  background-color: #000E28;
  color: white;
  cursor: pointer;
  transition: all 2s ease 0s;
}
input[type=reset].filter:hover{
  background-color: #7a1624;
  color: white;
  cursor: pointer;
  transition: all 2s ease 0s;
}
input[type=textarea].feedback{
  width: 100%;
  height: 100px;
  border-radius: 1em;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease 0s;
}
input[type=submit].feedback{
  width: 100%;
  height: 50px;
  border-radius: 1em;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease 0s;
}
input[type=button].download{
  width: 30%;
  height: 50px;
  border-radius: 2em;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease 0s;
}
input.register{
  width: 98%;
  height: 30px;
  border-radius: 1em;
  padding-left: 2%;
}
select.register{
  height: 50px;
  width: 100%;
  padding-left: 2%;
  color: white;
  background-color: #000E28;
  cursor: pointer;
}
select.filter{
  height: 50px;
  width: 100%;
  padding-left: 2%;
  color: white;
  background-color: #464d5a;
  cursor: pointer;
}
select.filter:disabled{
  background-color: #E6E0E0;
}
button.abfrage_speichern{
  color: red;
}
input[type=submit].abfrage_speichern{
  background-color: grey;
  border: 0;
}
/*------------------------------------
    Contact (footer.php/contact.php)
------------------------------------*/
input[type=text].contact, input[type=email].contact, input[type=textarea].contact{
  width: 98%;
  height: 40px;
  border-color: #000E28;
  padding-left: 2%;

  color: #817f81;
  border-radius: 1em;
}
input[type=textarea].contact{
  height: 130px;
  resize: vertical;
}
input[type=submit].contact{
  width: 100%;
  height: 40px;
  border-radius: 5px;

}
input[type=submit].contact:hover{
  border-color: #817f81;
  text-decoration: underline;
}
/*------------------------------------
              Popups
------------------------------------*/
input.popup{
  width: 90%;
  height: 100%;
  border-radius: 5px;
}
textarea.popup{
  height: 100px;
  width: 90%;
  resize: none;  
  overflow: auto;
  border-radius: 5px;
}
select.popup{
  width: 92%;
}
/* ------------------------------------------------------------------------------------------------------------------------------------------------------
                                                                  Tabellen                             
 --------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------
              Allgemein 
------------------------------------*/ 
table{
  width: 100%;
  font-size: medium;
  font-family: 'Courier New', Courier, monospace;
  text-align: center;
}
td{
  border-bottom: 0px solid #FFFFFF;
  color: #7A7A7A;
}
th{
  background-color: #3a3a3bf6;
  color: white;
}
/*------------------------------------
              EES-Results 
------------------------------------*/ 
table.ees{
  font-size: small;
}
tr.ees:nth-child(even) {background-color: #f2f2f2;}
tr.ees:hover {background-color: #D3D3D3;}
td.ees{
  width: 50%;
}
table.match{
  font-size: small;
  width: 100%;
  margin: 0px;
  padding: 0px;
}
/*------------------------------------
              Registrierung
------------------------------------*/ 
table.register{
  width: 100%;
}
/*------------------------------------
              Administration
------------------------------------*/ 
table.admin{
  font-size: small;
}
tr.admin:nth-child(even) {background-color: #f2f2f2;}
tr.admin:hover {background-color: #D3D3D3;}
table.admin_smaller{
  font-size: 10px;
}
/*------------------------------------
              Filter
------------------------------------*/ 
tr.filter{
  height: 50px;
}
table.konobj{
  border: 2px solid grey;
  border-radius: 1em;
  width: 90%;
  margin: 5%;
  font-size: small;
}
tr.konobj{
  height: 40px;
}
tr.konobj:nth-child(even) {background-color: #f2f2f2;}
tr.konobj:hover {background-color: #D3D3D3;}

/* ------------------------------------------------------------------------------------------------------------------------------------------------------
                                                                  Einschübe (AGBs, Datenschutz, Suchleisten)                            
 --------------------------------------------------------------------------------------------------------------------------------------------------------*/
.accordion {
  background-color: #365B6D;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}
.active, .accordion:hover {
  background-color: #E4E5E4; 
  color: white;
  transition: 1.5s;
  color: black;
}
.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}
.panel_privacy {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
  text-align: justify;
}
.sticky_footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #F5EAEA;
  color: #3a3a3bf6;
  text-align: center;
  height: 40px;
}
.sticky_left_bar {
  position: fixed;
  left: 0;
  top: 0;
  width: 200px;
  height: 250px;
  background-color: #464040;
  opacity: 0.6;
  color: white;
  text-align: center;
  border-radius: 5px;
  padding: 0.5%;
  color: white;
}
/* ------------------------------------------------------------------------------------------------------------------------------------------------------
                                                                  Cookie-Banner                             
 --------------------------------------------------------------------------------------------------------------------------------------------------------*/
#cookie-popup {
	font-size: 13px;
	background-color: rgba(0,0,0,0.8);
	text-align: center;
	color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 8000;
	line-height: 20px;
}
.cookie-popup-inner {
	-webkit-box-shadow: 0px 0px 5px 0px rgba(255, 255, 255, 0.2);
	-moz-box-shadow: 0px 0px 5px 0px rgba(255, 255, 255, 0.2);
	box-shadow: 0px 0px 5px 0px rgba(255, 255, 255, 0.2);
	padding: 20px;
	position: absolute;
	max-width: 400px;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	background-color: #000E28;
}
.cookie-popup-inner button {
	background-color: #fff;
	border: 2px solid #fff;
	color: #000;
	-webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
  width: 100%;
}
.cookie-popup-inner button:hover {
	background-color: #000E28;
	border: 2px solid #41C1BA;
  color: white;
  cursor: pointer;
  box-shadow: 0px 0px 90px grey;
}
.more a {
	border: 1px solid #ccc;
	line-height: 24px;
	display: block;
  color: white;
	-webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    font-size: small;
}
.more a:hover,
.more a:focus {
	text-decoration: none;
	background-color: white;
  color: #000E28;
  box-shadow: 0px 0px 90px grey;
  
}
.hidden {
	display: none;
}
@media screen and (max-width: 1600px) {
   .content_filter{
    text-align: center;
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    overflow: auto;
  }
}
@media screen and (max-width: 1100px) {
  body{
    font-size: smaller;
  }
  .content_konobj_box{
    width: 100%;
    float: left;
  }
  table.filter, table.ees{
    font-size: smaller;
  }
  a{
    font-size: smaller;
  }
  nav{
    font-size: smaller;
  }
  footer{
    font-size: smaller;
  }
  footer{
    margin-top: 0.5%;
    background-color: #3C3F3D;
    width: 100%;
    display: flex;
    height: 200px;
    padding-top: 4.5%;
  }
  .footer_left{
    width: 100%;
    text-align: left; 
    color: white;
  }
  .footer_left_top{
    width: 100%;
    padding-left: 2%;
  }
  .footer_left_bottom{
    width: 100%;
    padding-left: 12.5%;
  }
  .footer_mid{
    display: none;
  }
  .footer_right{
    display: none;;
  }
}
@media screen and (max-width: 600px) {
  .content_left{
    width: 100%;
  }
  .content_right{
    width: 100%;
  }
  header{
    display: block;
    height: 120px;
  }
  .header_left{
    width: 100%;
    text-align: center;
    padding: 0;
  }
  .header_right{
    width: 100%;
    text-align: center;
    padding: 0;
  }
  .header_right_gidas{
    display: none;
  }
 }
 @media screen and (max-width: 1600px) {
  .content_filter{
   text-align: center;
   width: 90%;
   margin-left: 5%;
   margin-right: 5%;
   overflow: auto;
 }
}
@media screen and (max-width: 1100px) {
 body{
   font-size: smaller;
 }
 .content_konobj_box{
   width: 100%;
   float: left;
 }
 table.filter{
   font-size: smaller;
 }
 a{
   font-size: smaller;
 }
 nav{
   font-size: smaller;
 }
 footer{
   font-size: smaller;
 }
 header{
   display: none;
 }
 nav{
   display: none;
 }
 #main {
   display: block;
 }
 .sticky_ees_bar{
   left: 20%;
   width: 60%;
 }
}
@media screen and (max-width: 600px) {
 .content_left{
   width: 100%;
 }
 .content_right{
   width: 100%;
 }
 nav{
   display: none;
 }
 h1{
   font-size: large;
 }
 header{
   display: none;
 }
 #main {
   display: block;
 }
 footer{
   font-size: 8px;
 }
 .footer_right{
   display: none;
 }
 input[type='text'].contact, input[type='email'].contact, input[type='submit'].contact{
   font-size: 10px;
   height: 25px;
 }
 textarea.contact{
   font-size: 10px;
   height: 50px;
 }
 .content_center{
   width: 100%;
   font-size: smaller;
   margin-left: 0;
   margin-right: 0;
 }
 tr.ees, td.ees, tr.ees.a{
   font-size: smaller;
 }
}