/*
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 : 25.08.2020, 14:14:51
    Author     : andifischer
*/

 body {
       
    font-family: Roboto;
    margin: 0 auto;
    max-width: 100em; /*oder 100% für ganze Seitenbreite?*/
    background: #efefef !important;
    color: #58595b !important;
    margin: 0 auto !important; /*Website mittig*/
    
 }
 
 .info {
     background-color: #e0e2e0 !important;
 }
 
 .accordion > div .card-header .accordion__toggle {
     text-align: center !important;
 }
 
.accordion > div .card-header .accordion__toggle:hover {
      background-color: #ccc !important;
}
    
.accordion > div {
    background-color: #e0e2e0 !important;
} 

.accordion > div .collapse .card-body, .accordion > div .collapsing .card-body {
    box-shadow: 0 0 0 0 !important;
    border-bottom:1px solid #747678 !important;
    margin-bottom: 0 !important;
    padding: 30px 60px 30px 30px !important;
}

.accordion > div .card-header {
 /*   border-top: 1px solid #747678 !important;*/
}

#heading-1 {
    border-top: 1px solid #747678 !important;
} 


.accordion > div .card-header .accordion__toggle .icon-container i {
    color: #58595b !important;
}


.accordion > div .card-header button:active, .accordion > div .card-header button:hover, .accordion > div .card-header button[aria-expanded="true"] {
    color: #58595b !important;
    text-align: center;
    background: #ccc !important;
}

 h2 {
     padding-top: 2%;
     color: #58595b !important;
 }
 
 button {
     /*   border-radius: 5% !important; */
    border: none !important;
 }
 
 section.sectionPic {
     background-image:url('/assets/images/image005.png');
 }
 section {
     background-color: #e0e2e0 !important;
 }
 
 button:empty {
     visibility: hidden;
     
 }

#logo {
   text-align: center;  
   background-color: #005496; 
   color: #fff;
   padding-top: 2%;
 /* Weg da keine Navi im moment  padding-bottom: 2%; */
   font-family: roboto;
}

.claim {
    font-size: 2.5em;
    line-height: 1.2em;
    padding: 2%;
    font-weight: bolder;
}

.headerImage img {
    width: 100%;
}

.text {
    padding: 2%;
    background-color: #e0e2e0;
    color: #005496;
    margin-top: -6px;
}

.microNavigation {
    padding: 2px 35px 20px 3px;
    text-align: right;
}

/* Pimcore Navi Content (Hidden by Default) */
.navigation {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
    min-width: 85px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.navigation li {
    display:block !important;
    margin-left: -40px;
    font-size: 1em !important;
    padding: 2px;
    text-align: center;
}

.navigation li a {
  color: #005496 !important;
 /* padding: 5px !important;*/
}

li.navLanguages {
    /* position: relative;*/
    display: inline-block;
    font-size: 1.1em;
    /*text-transform: uppercase;*/
}





/* Change color of navi links on hover */
.navigation a:hover {
    background-color: #ccc; 
    color: #000 !important;
    text-decoration: none;
    width: 100%;
    display: inline-block;

}

/* Show the navi menu on hover */
.navLanguages:hover .navigation {display: block;}

.textRight {
padding-left:2%;
}

.ÜberschriftBild {
    background-color: #005496;
    color: #fff !important;
    text-align: center;
    padding: 2%;
}

.ÜberschriftBild h2 {
    color: #fff !important;
}

.portfolios {
    display: flex;
    justify-content: center;
    background-color: #e0e2e0;
    color: #005496;
/* elemente untereinander bei kleinem Bildschirm */
    flex-wrap: wrap;
    flex-basis: calc(960px * 999 - 100% * 999);
    position: relative; /*damit das aufklappbare Element über die ganze Breite geht */
}



.portElement {
    width: 250px;
    min-height: 350px;
    margin: auto;
    text-align: center;

}

.portfolio {
    display: none;
    overflow: hidden;
    background-color: #969697;
    color: #005496;
    height: 450px;
    margin-bottom: -450px;
    margin-right: 3%;
    padding: 14px;
    width: 90%;
    z-index: 1;
    position: absolute;
    left: 0;
    margin-left: 3%;
}

#portfolioTable {
    display: flex;
    width: 100%;
    height: auto;
 /* elemente untereinander bei kleinem Bildschirm */
    flex-wrap: wrap;
    flex-basis: calc(960px * 999 - 100% * 999);
}
.columnBild {
    width: auto;
}
.columnText {
    width: 60%;
    color: #58595b;
}


.dreiSpalten {
  /*      display: flex;
    justify-content: center;*/
    background-color: #005496;
    color: #fff;
    position: relative;
    width: 100%;
}

.bild {
    
}

.dreiSpalten img {
    width: 100%;
}

.links {
    width: 30%;

    position: absolute;
    left: 20%;
    top: 20%;

}

.rechts {
    width: 30%;

    position: absolute;
    right: 20%;
    top: 20%;
}

.mitteUnten {
    width: 30%;
   
    position: absolute;
    right: 20%;
    top: 50%;
}

.mitteOben {
    width: 30%;
 
    position: absolute;
    left: 20%;
    top: 50%;
}

.linksUnten {
    width: 30%;
    /*z-index: 1;*/
    position: absolute;
    left: 20%;
    bottom: 20%;
}

.rechtsUnten {
    width: 30%;
    
    position: absolute;
    right: 20%;
    bottom: 20%;
}

.textOpen {
    width: auto;
    background-color: yellow;
    border-radius: 50% !important; /*rund*/
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); /*schatten*/
}

.openText {
    background-color: white;
    color: black;
    display: none;
    width: 250px;
    padding: 2%;
   /* overflow: hidden;*/
    position: absolute;
    z-index:1;
}

/* Show the dropdown menu on hover */
.linksUnten:hover .openText {display: block;}
.links:hover .openText {display: block;}
.mitteUnten:hover .openText {display: block;}
.mitteOben:hover .openText {display: block;}
.rechts:hover .openText {display: block;}
.rechtsUnten:hover .openText {display: block;}

.logoBild {
    background-color: #e0e2e0;
    color: #005496;
    text-align: center;
    padding-top: 2%;
}

.logoBild img {
    width: 100%;
}

.blueBackgroundText {
    background-color: #005496;
    color: #fff;
    text-align: center;
    padding-top: 2%;
    padding-bottom: 2%;
}

.downloadHeadline {
 /*   background-image: url(bg_download.jpg);*/
    background-repeat: no-repeat;
    color: #fff;
    background-size: 100%;
    min-height: 500px;
    padding-top: 2%;
    margin-top: -6px;

}

.imageHeadline {
width: 100%;
height: 500px;
}

.image-text {
  /*box-flex*/  
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  padding: .5rem;
  text-align: center;
  font-size: 1.2rem;
  background-color: #333333;
  color: #d9d9d9;
  height: 100%;
}

.textArea {
    /*box-caption*/
    position: relative;
    font-size: 1.5em;
    top: 200px;
margin: 0 0 .4em 2% !important;
text-shadow: 1px 1px 10px #005496;
color: #005496 !important;
background-color: rgba(255, 255, 255, 0.6);
line-height: 1;
}



.image-background {
    width: 100%;
        
  /* Set a specific height */
  min-height: 500px;


}

.downloadHeadline h2 {
    color: #fff !important;
}

@media screen and (max-width: 600px) {
 .image-background {
  background-repeat: no-repeat;
  background-size: 100%;
  background-color:#005496;
 }
}
/*Hintergrundbild nach unten wiederholen, wenn Elemente untereinander*/

.downloadArea {
    display: flex;
    justify-content: center;
    /* elemente untereinander bei kleinem Bildschirm */
    flex-wrap: wrap;
    flex-basis: calc(960px * 999 - 100% * 999);
    padding-top: 5%;
    padding-bottom: 5%;
}


.downloadElement {
    width: 200px;
    height: 250px;
    margin: auto;
    text-align: center;
}

  /* Dropdown Button */
.dropbtn {
  background-color: #005496;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
  padding-top: 3%;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content ul {
    margin-bottom: -10px;
    list-style-type: none;
}

.dropdown-content li {
    background-color: #e1e1e1;
    text-align: left;
/* weil ul irgendwie einen linken Rand hat */
    margin-left: -40px;
}

/* 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: #ccc;}

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

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

/*Countdown*/
.launch {
    background-color: rgb(0,84,150,0.5);
    color: white;
    font-size: 2.5em;
    text-align: center;
  /*  position: fixed;*/
    z-index: 1;
    right: 0;
    padding: 1%;
}


/* Contact Form */

/*Placeholder*/
::placeholder {
  color: white;
  opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
 color: white;
}
::-ms-input-placeholder { /* Microsoft Edge */
 color: white;
}

textarea, input[type="text"], input[type="password"], input[type="search"], input[type="email"], input[type="url"] {
 /*   border: 1px solid #999;
    border-radius: .3em;*/
 color: #005496;
 margin-left: 2px;
 border-top: none !important;
 border-bottom: solid #005496 2px !important;
 border-right: none !important;
 border-left: solid #005496 1px !important;
 width: 75%;
 border-radius: 0px;
 text-align: left;
 background-color: transparent;
 margin: 1%;
}

input[type="reset"], input[type="submit"], button {
	color: #005ca9;
	background-color: #fff;
	font-family: arial;
}

.contactForm {
    color: #005496;
    background-color: #e0e2e0;
    padding: 2%;
}

.contactForm h2 {
    color: #005496 !important;
    font-weight: bold;
}

.contactForm .col-md-4 {
    
    flex: 0 0 100%;
    max-width: 100%;

    justify-content: center;
    display: flex;
}
.form-control::placeholder {
    color: #005496 !important;
}

textarea.form-control {
    background-color: transparent;
    color: #005496;
    width: 75% !important;
    margin: 1%;
}