/* CSS Datei fuer Projekt - AUSILIO.DE */

  a[href^="#"]:before{ }

/*------------------------------------------*/
/*   Body, Background, Scrollarea, Content  */ 
/*------------------------------------------*/

body {
  margin-top:       0;
  margin-right:     0;
  margin-bottom:    0;
  margin-left:      0;
  padding-top:      0;
  padding-right:    0;
  padding-bottom:   0;
  padding-left:     0;
  width:            100%;
  height:           100%;
  //overflow:         hidden;
  color:            #FFFFFF;
  background-color: #44546A;
  //background-color: rgba(255,255,255,1.0);
  font-size:        100.01%;
  font-family:      Trebuchet MS;
  min-width:        41em; /* Mindestbreite verhindert Umbruch und Anzeigefehler in modernen Browsern */
}

.myBackground {
  position:         absolute;
  top:              0;
  left:             0;
  width:            100%;
  height:           100%;
  background-color: rgba(68,84,106,1.0);
  z-index:          1;
}

.myScrollArea {
  position:         absolute;
  top:              0;
  left:             0;
  width:            100%;
  height:           100%;
  //overflow:         auto;
  z-index:          2;
}

.myContent {
  // border:  2px solid #FF0000; /* red */
  margin-top:       0;
  margin-right:     0;
  margin-bottom:    0;
  margin-left:      0;
  padding-top:      0;
  padding-right:    0;
  padding-bottom:   0;
  padding-left:     0;
  color:            #FFFFFF;
  text-align:       left;
  z-index:          2;
}
.myContent a:link {
  color: #FFFFFF;  
}
.myContent a:visited {
  color: #FFFFFF;
}
.myContent a:hover {
  color: #d9d9d9;
}
.myContent a:active {
  color: #d9d9d9;
}


/*------------------------------------------*/
/*   Top-Section, Logo und Menue            */
/*------------------------------------------*/

.myTop {
  position:         fixed;
  margin-top:       0;
  margin-right:     0;
  margin-bottom:    0;
  margin-left:      0;
  padding-top:      0.5em;
  padding-right:    0;
  padding-bottom:   1.5em;
  padding-left:     0;
  width:            100%;
  text-align:       center;
  font-size:        100%;
  z-index:          6;
  opacity:          1.0;
  color:            #FFFFFF;
  background-color: rgba(68,84,106,1.0);
  //box-shadow:       0px 0px 10px 5px #808080;
}
.myTop p {
  margin-top:       0;
  margin-right:     0;
  margin-bottom:    0;
  margin-left:      0;
  padding-top:      0;
  padding-right:    0;
  padding-bottom:   0;
  padding-left:     0;
}

.myTopNav {
  //overflow:         hidden;
  margin-top:       0;
  margin-right:     0;
  margin-bottom:    0;
  margin-left:      0;
  padding-top:      0;
  padding-right:    auto;
  padding-bottom:   0;
  //padding-left:     10%;
  padding-left:     0;
  width:            100%;
  // Elemente werden zentiret;
  display: flex;
  justify-content: center;
  z-index:          3;
}
.myTopNav a {
  float:            left;
  display:          block;
  margin-top:       0;
  margin-right:     0;
  margin-bottom:    0;
  margin-left:      0;
  padding-top:      0.3em;
  padding-right:    4em;
  padding-bottom:   0.3em;
  padding-left:     0em;
  text-align:       center;
  text-decoration:  none;
  font-weight:      bold;
  font-size:        90%;
}
.myTopNav a:link {
  color: #FFFFFF;
}
.myTopNav a:hover {
  color: #d9d9d9;
  //background-color: rgba(230,230,230,0.4);
}
.myTopNav .icon {
  display: none;
}

.myTopPic {
  height: 70px;
}
.myTopSpace {
  // margin/padding (top, bottom) wie "myTop" + "myTopNav" und height wie in "myTopPic" -> damit das erste Bild richtig angezeigt wird...
  margin-top:       0;
  margin-right:     0;
  margin-bottom:    0;
  margin-left:      0;
  padding-top:      0.8em;
  padding-right:    0;
  padding-bottom:   1.8em;
  padding-left:     0;
  height:           70px;
  width:            100%;
  z-index:          3;
  background-color: rgba(68,84,106,1.0);
  //background-color: rgba(255,255,255,1.0);
}

.myNav {
  //overflow:         hidden;
  margin-top:       0;
  margin-right:     0;
  margin-bottom:    0;
  margin-left:      0;
  padding-top:      0;
  padding-right:    auto;
  padding-bottom:   0;
  // padding-left:     10%;
  padding-left:     0;
  width:            100%;
  // Elemente werden zentiret;
  // display: flex;
  // justify-content: center;
  z-index:          3;
}
.myNav a {
  //float:            left;
  //display:          block;
  margin-top:       0;
  margin-right:     0;
  margin-bottom:    0;
  margin-left:      0;
  padding-top:      0.3em;
  padding-right:    4em;
  padding-bottom:   0.3em;
  padding-left:     2em;
  text-align:       center;
  text-decoration:  none;
  font-weight:      bold;
  font-size:        100%;
}
.myNav a:link {
  color: #FFFFFF;
}
.myNav a:hover {
  color: #d9d9d9;
  //background-color: rgba(230,230,230,0.4);
}
.myNav .icon {
  display: none;
}


/*------------------------------------------*/
/*   Section Bereich                        */
/*------------------------------------------*/

.mySection {
  poistion:         relative;
  width:            100%;
  background-color: #44546A;
  z-index: 3;
}

.myPicture {
  float:            right;
  margin-top:       1%;
  margin-right:     2.5%;
  margin-bottom:    5%;
  margin-left:      7.5%;
  width:            20%;
  //height:           120px;
  z-index: 2;
}

.mySectionPic {
  //margin-right:     2.5%;
  //margin-left:      2.5%;
  //width:            95%;
  margin-right:     0%;
  margin-left:      0%;
  width:            100%;
  height:           630px;
  background-color: #44546A;
  z-index: 2;
}

.mySectionBackground {
  width:            100%;
  background-color: #44546A;
}

.myText {
  margin-top:       0em;
  margin-right:     0;
  margin-bottom:    0;
  margin-left:      0;
  padding-top:      10em;
  padding-right:    10%;
  padding-bottom:   3em;
  padding-left:     10%;
  font-size:        100%;
  //background-color: rgba(255,255,255,0.6);
  //border:           2px solid rgba(255,255,255,0.6);
  z-index:          3;
}
.myText h1 {
font-size:        123%;
}
.myText h2{
font-size:        100%;
}
.myText a {
  color: #FFFFFF;
}
.myText a:link {
  color: #FFFFFF;
}
.myText a:visited {
  color: #FFFFFF;
}
.myText a:hover {
  color: #d9d9d9;
}
.myGText a:active {
  color: #d9d9d9;
}

.myTextBox {
  position:         absolute;
  top:              10em;
  left:             20%; 
  width:            50%;
  margin-top:       0;
  margin-right:     0;
  margin-bottom:    0;
  margin-left:      0;
  padding-top:      2em;
  padding-right:    2em;
  padding-bottom:   2em;
  padding-left:     2em;
  font-size:        175%;
  //font-weight:      bold;
  color:            #FFFFFF;
  background-color: rgba(68,84,106,0);
  // Elemente werden zentiret;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index:          5;
}

.myContentBox {
  position:         absolute;
  top:              15em;
  left:             20%; 
  width:            60%;
  margin-top:       0;
  margin-right:     0;
  margin-bottom:    0;
  margin-left:      0;
  padding-top:      2em;
  padding-right:    2em;
  padding-bottom:   2em;
  padding-left:     2em;
  font-size:        100%;
  //font-weight:      bold;
  //color:            #FFFFFF;
  background-color: rgba(68,84,106,0.8);
  z-index:          5;
}

/*------------------------------------------*/
/*   Footer                                 */
/*------------------------------------------*/

.myFooter {
  position:         fixed;
  left:             0;
  bottom:           0em;
  margin-top:       0;
  margin-right:     0;
  margin-bottom:    0;
  margin-left:      0;
  padding-top:      0;
  padding-right:    auto;
  padding-bottom:   0;
  //padding-left:     10%;
  padding-left:      0;
  width:            100%;
  background-color: rgba(68,84,106,1.0);
  z-index:          6;
  opacity:          1.0;
  // Elemente werden zentiret;
  display: flex;
  justify-content: center;
}
.myFooter a {
  float:            left;
  display:          block;
  margin-top:       0;
  margin-right:     0;
  margin-bottom:    0;
  margin-left:      0;
  padding-top:      0.5em;
  padding-right:    4em;
  padding-bottom:   0.5em;
  padding-left:     0em;
  //color:            #d9d9d9;
  text-align:       center;
  text-decoration:  none;
  //font-weight:      bold;
  font-size:        75%;
}

/*------------------------------------------*/
/*   Message und Version                    */
/*------------------------------------------*/

.myVersion {
  margin-top:       0em;
  margin-right:     0;
  margin-bottom:    0;
  margin-left:      0;
  padding-top:      0em;
  padding-right:    1%;
  padding-bottom:   3em;
  padding-left:     0%;
  font-size:        60%;
  text-align:       right;
  z-index:          3;
}

.myMessage {
    //border:           2px solid #EFEFEF;
    position:         fixed;
    bottom:           10em;
    left:             0%;
    width:            100%;     
    margin-top:       0;
    margin-right:     0;
    margin-bottom:    0;
    margin-left:      0;
    padding-top:      0em;
    padding-right:    0;
    padding-bottom:   0em;
    padding-left:     0;
    background-color: rgba(68,84,106,0.6);
    color:            #FFFFFF;
    z-index:          1;
    align-items:     center;
    justify-content: center;
}
.myMessage p {
    //border:         2px solid #d9d9d9;
    margin-top:       0;
    margin-right:     0;
    margin-bottom:    0;
    margin-left:      0;
    padding-top:      1em;
    padding-right:    10%;
    padding-bottom:   1em;
    padding-left:     10%;
    //font-size:        100%;
    font-size:        1.0em;
    //font-weight:      bold;
    align-items:     center;
    justify-content: center;
}

/*------------------------------------------*/
/*   Anpassungen f r kleine Displays        */
/*------------------------------------------*/

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

.myContent {
  font-size:        90%;
}
.myTop {
  text-align:       right;
}

.myTopNav {
  position:         absolute;
  top:              1em;
  left:             1em;
  padding-top:      0.2em;
  padding-right:    0em;
  padding-bottom:   0.4em;
  padding-left:     1em;
  width:            10em;
  text-align:       left;
  background-color: rgba(68,84,106,1.0);
  //border:           1px solid #9F9F9F;
  box-shadow:       3px 3px 10px 0px #404040;
  display: block;
}

.myTopPic {
  height: 70px;
}

.myPicture {
  float:            right;
  margin-top:       2%;
  margin-right:     2.5%;
  margin-bottom:    5%;
  margin-left:      7.5%;
  width:            27.5%;
  //height:           120px;
  z-index: 2;
}

.mySectionPic {
  margin-right:     0;
  margin-left:      0;
  width:            100%;
  //height:           600px;
  height:           90%;
  z-index: 2;
}

.myText {
  padding-top:      12em;
  padding-right:    3em;
  padding-bottom:   3em;
  padding-left:     3em;
  font-size:        100%;
}

.myTextBox {
  position:         absolute;
  top:              5em;
  left:             20%; 
  width:            50%;
  font-size:        150%;
}

.myMessage {
  //top:              12em;
}

}