body, html {
    font-family      : "Lato", sans-serif;
    background-color : #131c23;
    margin           : 0;
    padding          : 0;
    height           : 100%;
    color            : #e7ecef;
    font-size        : 100%;
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/lato-v14-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Lato Regular'), local('Lato-Regular'),
       url('fonts/lato-v14-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/lato-v14-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/lato-v14-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/lato-v14-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/lato-v14-latin-ext_latin-regular.svg#Lato') format('svg'); /* Legacy iOS */
}
      
a {
    text-decoration    : none;
    font-style         : normal;
    transition         : all 0.3s linear;
    -webkit-transition : all 0.3s linear;
    -moz-transition    : all 0.3s linear;
    -o-transition      : all 0.3s linear;
}
      
a:link    { color : #99f7ab;} /* standard: Grün */
a:visited { color : #99f7ab;} /* besucht: Grün */
a:hover   { color : #e7ecef;} /* hover: Weiß */
a:active  { color : #99f7ab;} /* aktiv: Grün */
a:focus   { color : #99f7ab;} /* fokus: Grün */

div {
    margin  : 0;
    padding : 0;  
}


h1.main_title {
    font-size     : 105%;
    font-weight   : bold;
    margin-top    : 2em;
    margin-bottom : 0.1em;
}
              

              
h2.mainpage {
    font-size     : 125%;
    font-weight   : bold;
    margin-top    : 0;
    margin-bottom : 0.5em;
    margin-left   : 0;
    margin-right  : 0;
    padding       : 0;
}
                 
p {
    margin-top    : 0;
    margin-bottom : 0.4em;
    margin-left   : 0;
    margin-right  : 0;
    padding       : 0;
}
            
img {
    margin-top    : 0;
    margin-bottom : 0;
    margin-left   : 0;
    margin-right  : 0;
    padding       : 0;
}

/* ----------- Hamburger Menü ---------- */
#hamburgermenu {
    display             : block;
    position            : fixed;
    top                 : 50px;
    right               : 50px;  
    z-index             : 1;  
    -webkit-user-select : none;
    -moz-user-select    : none;
    -ms-user-select     : none;
    user-select         : none;
    text-align          : center;
}
              
#hamburgermenu input {
    display               : block;
    width                 : 40px;
    height                : 32px;
    position              : absolute;
    top                   : -7px;
    left                  : -5px;  
    cursor                : pointer;
    opacity               : 0; /* standardmäßig nicht sichtbar */
    z-index               : 2;  
    -webkit-touch-callout : none;
}

#hamburgermenu span.strich { /* erstellt 3 Balken */
    display                  : block;
    width                    : 33px;
    height                   : 4px;
    margin-bottom            : 5px;
    position                 : relative;  
    background               : #bec2c4;
    border-radius            : 3px;  
    z-index                  : 1;  
    transform-origin         : 4px 0px;  
    -webkit-transform-origin : 4px 0px;
    -moz-transform-origin    : 4px 0px;
    -o-transform-origin      : 4px 0px;
    transition               : transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                               background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                               opacity 0.55s ease;  
    -webkit-transition       : transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                               background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                               opacity 0.55s ease;
    -moz-transition          : transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                               background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                               opacity 0.55s ease;
    -o-transition            : transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                               background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                               opacity 0.55s ease;
}
                          
#hamburgermenu span.strich:first-child {
    transform-origin         : 0% 0%;
    -webkit-transform-origin : 0% 0%;
    -moz-transform-origin    : 0% 0%;
    -o-transform-origin      : 0% 0%;
}

#hamburgermenu span:nth-last-child(2) {
    transform-origin         : 0% 100%;
    -webkit-transform-origin : 0% 100%;
    -moz-transform-origin    : 0% 100%;
    -o-transform-origin      : 0% 100%;
}

#hamburgermenu input:checked ~ span.strich { /* oberen zum Kreuz drehen */
    opacity           : 1;
    transform         : rotate(45deg) translate(-2px, -1px);
    -webkit-transform : rotate(45deg) translate(-2px, -1px);
}

#hamburgermenu input:checked ~ span.strich:nth-last-child(3) { /* mittleren Balken ausblenden */
    opacity           : 0;
    transform         : rotate(0deg) scale(0.2, 0.2);
    -webkit-transform : rotate(0deg) scale(0.2, 0.2);
}

#hamburgermenu input:checked ~ span.strich:nth-last-child(2) { /* unteren zum Kreuz drehen */
    transform         : rotate(-45deg) translate(0, -1px);
    -webkit-transform : rotate(-45deg) translate(0, -1px);
}

#menu {
    position                 : fixed;
    height                   : 100%;
    margin                   : -100px 0 0 -100px;
    padding                  : 50px;
    padding-top              : 125px;  
    background               : #141419;
    opacity                  : 0.95;
    -webkit-font-smoothing   : antialiased; /* stop flickering of text in safari */  
    transform-origin         : 100% 0%;
    transform                : translate(200%, 0);
    transition               : transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    -webkit-transform-origin : 100% 0%;
    -webkit-transform        : translate(200%, 0);
    -webkit-transition       : transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    overflow                 : auto;
    -webkit-overflow         : auto;
}

#hamburgermenu input:checked ~ div { /* Slide-in von Links */
    transform: none;
    -webkit-transform: none;
}

img.facebook-icon {
    width  : 30px;
    margin : 1em;
}
/* ---------- Sprachauswahl ---------- */
div.languages {   
    display           : flex;
    flex-flow         : row wrap;
    display           : -webkit-flex;    
    -webkit-flex-flow : row wrap;
    justify-content   : space-evenly;
    position          : relative;
    margin            : auto;
}

/* ---------- Ende Sprachauswahl ---------- */

span.navitop { /* Inaktiver Link grau */
    padding : 8px;
    display : block;
    color   : #99f7ab;
    cursor  : default;
}

a.navitop { /* Aktiver Link grün*/
    padding : 8px;
    display : block;
    color   : #e7ecef;
}

/* ---------- Ende Hamburger Menü ---------- */

/* ------ Startbild --------- */        
div.background {
    position   : relative;
    width      : 100%;
    height     : 100%;
    overflow   : hidden;
    text-align : center;    
}

img.bg_img {
    position   : absolute;
    top        : -9999px;
    bottom     : -9999px;
    left       : -9999px;
    right      : -9999px;
    min-height : 100%;
    min-width  : 100%;
    z-index    : 0;
    margin     : auto;
}
              
img.logo_big  {
    position : absolute;
    top      : 40%;
    left     : 15%;
    right    : 15%;
    width    : 70%;
}
              
div.scrolldown  {
    position                          : absolute;
    left                              : 0;
    bottom                            : 10%;
    width                             : 100%;
    color                             : #000;
    -webkit-animation-duration        : .5s;
    -moz-animation-duration           : .5s;
    animation-duration                : .5s;
    -webkit-animation-name            : slide;
    -moz-animation-name               : slide;
    animation-name                    : slide;
    -webkit-animation-iteration-count : infinite;
    -moz-animation-iteration-count    : infinite;
    animation-iteration-count         : infinite;
    -webkit-animation-direction       : alternate;
    -moz-animation-direction          : alternate;
    animation-direction               : alternate;
}

@keyframes slide {
  to {
    margin-bottom : 1%;
  }
}

span.start_button {
    background-color   : transparent;
    color              : #99f7ab;
    padding            : 10px;
    border-radius      : 50px 50px 50px 50px;
    border             : solid 2px #99f7ab;
    transition         : all 0.3s linear;
    -webkit-transition : all 0.3s linear; 
}

span.start_button:hover {
    color  : #e7ecef;
    border : solid 2px #e7ecef;
}
/* ------- Ende Startbild --------- */

/* ------- Einleitungstext -------- */
div.content {
    position       : relative;
    display        : block;
    max-width      : 50em;
    margin-left    : auto;
    margin-right   : auto;
    text-align     : center;
    padding-top    : 3em;      
    padding-bottom : 3em; 
}

p.intro {
    text-align : center;
    position   : relative;
    display    : block;
}
/* ------- Ende Einleitungstext -------- */                                                        

/* ------- Galerie --------*/
div.gallerywrap {
    display           : flex;
    display           : -webkit-flex;    
    flex-flow         : column;
    -webkit-flex-flow : column;
    width             : 60%;
    margin-top        : 2em;
    margin-bottom     : 2em;
    margin            : auto;
}

div.pictures {
    min-width    : 10em;
    max-width    : 45em;
    box-sizing   : content-box;
    margin       : auto;
    padding      : 1em;
}

img.parts {
    max-width  : 100%;
    max-height : 100%;
}

p.headline {
    font-size   : 125%;
    font-weight : bold;
    text-align  : center;
}

hr.border {
    width   : 50%;
    display : none;
}          
/* ----- Ende Galerie ----- */   
                                      
span#ar_big { font-size : 130%;}                          

/* ------- Footer ---------*/
div.contact {
    position         : relative;
    float            : left;
    text-align       : center;
    width            : 100%;
    background-color : #141419;
    color            : #e7ecef;
    height           : 10em;
}            
/* ------- Ende Footer ----- */

/* ------- Impressum ------- */
h1.impressum { color : #f05d5e;} /* Überschriften Impressum Rot */

h2.impressum { color : #f05d5e;} 

div.impressum {
    padding-top : 5em;
    max-width   : 100%;
}

table.center {
    max-width    : 38em;
    margin-top   : 0em;
    margin-left  : auto;
    margin-right : auto;
}
              
td {
    vertical-align : top;
    padding-bottom : 0.4em;
}                                            
/* ------ Ende Impressum ------- */

/* ------ Datenschutzerklärung ------ */
h1.datenschutz ,h2.datenschutz { color : #f05d5e;}

div.datenschutz {
    font-size     : 90%;
    max-width     : 35%;
    margin        : auto;
    margin-bottom : 4em;
}

ol.datenschutz { list-style-type : disc;}

ol.aufzaehlung { list-style-type : decimal;}
/* ------ Ende Datenschutzerklärung ---- */

/* ------ Error404 ------- */
div.credits {
    position : absolute;
    margin   : 1em;
}

a.credits {
    background-color : black;
    color            : white;
    text-decoration  : none;
    padding          : 4px 6px;
    display          : block;
    border-radius    : 3px;   
}
div.title {
    position : absolute;
    color : white;
    margin : auto;
    width  : 100%;
    height : 30%;
    top : 35%;
    bottom : 35%;  
}

p.error {
    font-size : 800%;
    font-weight : bold;
}

p.text {
    font-size : 150%;
}

/* ------- größenanpassung responsiv -------- */
@media only screen and (max-width : 50em) {   
  span.start_button {
    font-size : 100%;
  }
  
  div.contact {
    width : 100%;
  }
  
  iframe.maps {
    width : 100%;
  }
  
  span.border {
    font-size : 100%;
  }
  
  p.title {
    font-size : 105%;
  }
  
  div.gallerywrap {
    width : 100%;
  }
  
  div.pictures {
    min-width : 12em;
    max-width : 35em;
  }

  div.content, div.datenschutz {
    max-width : 80%; 
  }
  
  table.center {
    width : 100%;
  }
}

@media only screen and (max-width : 50em) and (orientation : landscape) {
  div.gallerywrap {
    display           : flex;
    display           : -webkit-flex;    
    flex-flow         : row;
    -webkit-flex-flow : row;
}  
}

@media only screen and (max-width : 30em) {
  p.title {
    font-size : 100%;
  }
  
  div.impressum {
    font-size   : 90%;
  }            
}

@media only screen and (max-width : 20em) {
  div.impressum {
    font-size : 85%;
  }
}