/* --------------------------------------------------------------------------------------------------------------------------------------------------
HTML
-------------------------------------------------------------------------------------------------------------------------------------------------- */

body {margin:0; line-height:26px; font : 16px Arial, Helvetica, sans-serif; color : #000000;

}


h1 {font-size:20px;
font-weight: bold;
margin-bottom: 3px;   }

h2 {
font-size: 18px;
font-weight: bold;
color: #ff0000;
margin-bottom: 3px;
}

h3 {
font-size: 16px;
color: #3A3A3A;
margin-bottom: 10px;

}


h4, h5, h6 {font-size:17px; font-weight:bold;}

ul li {padding-left:17px; }
ul ul {margin:0; font-size:15px;}
ul ul li {padding-left:15px;}
table th {padding:5px; font-weight:bold; text-align:center;}
table td {padding:5px;}
fieldset {padding:9px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;}
fieldset legend {font-weight:bold;}
fieldset form, fieldset dl {margin:0;}
fieldset dd {margin-bottom:5px;}
img.f-left {margin-right:9px;}
img.f-right {margin-left:9px;}
.input-text {width:95%; padding:4px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; background:url("../design/input-text.png") 0 0 repeat-x;}
.input-submit {padding:4px;}

/* --------------------------------------------------------------------------------------------------------------------------------------------------
LAYOUT
-------------------------------------------------------------------------------------------------------------------------------------------------- */

#wrapper {position:relative; min-height:100%; overflow:auto;}

#header {position: fixed;
         z-index: 500;
         text-color: #ffffff;
         margin: 0;
         width: 100%;
         height:55px;
         background-color: #FE0000;
         clear: both;
         align-items: flex-start;
         padding-top:0px;


}

#firmenlogo {
         position: absolute;
         width: 100%;
         height: 320px;
         top: 55px;
         margin: 0;


}

#header #logo {position:absolute;
               top:12px;
               left:9px;
               margin:0;
               background-color: #FE0000; }

#header #logo a {text-decoration:none;}
#header a.header-button { position:absolute;
                          top:1px;
                          padding:3px 10px;
                          font-size:22px;
                          text-decoration:none;
                          text-align:left;
                          font-weight:bold;
                          Color: #ffffff;   }

/* ---------
#nav {position:absolute; top:50px; left:0; z-index:999; width:100%; -webkit-border-bottom-left-radius:10px; -webkit-border-bottom-right-radius:10px; -moz-border-bottom-left-radius:10px; -moz-border-bottom-right-radius:10px; border-bottom-left-radius:10px; border-bottom-right-radius:10px;}
#nav ul {margin:0; padding:9px; list-style:none;}
#nav ul li {display:inline; padding:0; background:none;}
#nav ul li a {display:block; margin-bottom:5px; padding:9px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; background:url("../design/nav.png") 0 0 repeat-x; font-weight:bold; text-decoration:none; text-align:center;}
#nav ul li:last-child a {margin-bottom:0;}
---*/

@media (min-device-height: 550px) and (max-device-height: 670px) {
 #nav {
        left: 0px; top: 50px; width: 90%;  z-index: 9999;  overflow-y: auto;
  position: fixed ;   max-height: 450px;
  }
}

 @media (min-device-height: 671px){
#nav {
        left: 0px; top: 50px; width: 250px;  z-index: 9999;
  position: fixed ; max-height: 650px; overflow-y: visible;
   }

 }

 #toplink {
        background: white;
        bottom: 0;
        margin: 0;
        padding: 0.5em 0.5em;
        position: fixed;  display: flex;  align-items: flex-end;
}

#icons { padding-left:5px

}

#nav ul {
        list-style: none; margin: 0px; padding: 9px;
}
#nav ul li {
        background: none; padding: 0px; display: inline; border:1px;
}
#nav ul li a {
         padding: 9px;  text-align: center; font-weight: bold; text-decoration: none; margin-bottom: 5px; display: block;
}

#nav ul li:last-child a {
        margin-bottom: 0px;
}


#content {top: 375px;
          position:relativ;
          padding:15px 9px;}





#footer {
        background: url("../design/footer.png") repeat-x 0px 0px; padding: 15px 9px; font-size: 12px; position: relative;
}
#footer #footer-button a {
        background: url("../design/footer-button.png") repeat-x 0px 100%; padding: 5px 10px; border-radius: 5px; top: 9px; text-align: center; right: 9px; font-size: 12px; font-weight: bold; text-decoration: none; display: block; position: absolute; -webkit-border-radius: 5px; -moz-border-radius: 5px;
}
#footer p {
        margin: 0px;
}

/* img.lazy {  display: inline; width:310px; height:200px; margin:5px;   } */

img.lazy {  display: inline; width:80%; height:80%; margin:5px;   }

#cookiebox {
        display: block;
        z-index: 1000;
        display: none;
        position: fixed;
        overflow : hidden;
        top: 0px;
        min-height: 200px;
        padding: 5px;
        margin: 0px;
        width: 100%;
        color: #555;
        border: 1px solid black;
        border-bottom: none;
        background: #fff;

}

.links  {display:flex; justify-content: flex-start;}
.mitte  {display:flex; justify-content: center;}
.rechts {display:flex; justify-content: flex-end; }

/* --------------------------------------------------------------------------------------------------------------------------------------------------
PAGE: HOMEPAGE
-------------------------------------------------------------------------------------------------------------------------------------------------- */

.perex {margin:-15px -9px 0 -9px; padding:15px 9px; background:url("../design/perex.png") 0 100% repeat-x;}
.perex p {margin:0;}

/* --------------------------------------------------------------------------------------------------------------------------------------------------
PAGE: ABOUT US
-------------------------------------------------------------------------------------------------------------------------------------------------- */

.team li {padding:10px 0; background:none;}
.team li:last-child {padding-bottom:0; border:0;}

/* --------------------------------------------------------------------------------------------------------------------------------------------------
PAGE: PORTFOLIO
-------------------------------------------------------------------------------------------------------------------------------------------------- */

.portfolio li {padding:10px 0; background:none;}
.portfolio li:last-child {padding-bottom:0; border:0;}
.portfolio li h2, .portfolio li p {margin:0;}
.portfolio li img {margin:7px 0;}

/* --------------------------------------------------------------------------------------------------------------------------------------------------
PAGE: IMAGE GALLERY
-------------------------------------------------------------------------------------------------------------------------------------------------- */

.gallery {margin:15px -9px;}
.gallery li {display:block; float:left; margin-left:4px; margin-bottom:4px; padding:0; background:none;}
.gallery li img {display:block;}

/* --------------------------------------------------------------------------------------------------------------------------------------------------
PORTLET: TEXT BOX
-------------------------------------------------------------------------------------------------------------------------------------------------- */

.text-box {margin:15px 0; padding:9px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;}
.text-box p:first-child {margin-top:0;}
.text-box p:last-child {margin-bottom:0;}

/* --------------------------------------------------------------------------------------------------------------------------------------------------
PORTLET: PAGINATION
-------------------------------------------------------------------------------------------------------------------------------------------------- */

.pagination {clear:both; text-align:center;}
.pagination a {margin:0 3px; padding:5px 10px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; text-align:center; text-decoration:none; font-weight:bold;}
.pagination strong {margin:0 3px; padding:5px 10px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; text-align:center;}

/* --------------------------------------------------------------------------------------------------------------------------------------------------
PORTLET: GROUP OF LINKS
-------------------------------------------------------------------------------------------------------------------------------------------------- */

.group {margin:10px 0; padding:0; list-style:none;}
.group li {margin:0; padding:0; background:none;}
.group li a {display:block; padding:10px; padding-right:35px; background:url("../design/arrow.png") 100% 50% no-repeat; text-decoration:none; font-weight:bold;}
.group li a:hover {-webkit-tap-highlight-color:transparent;}
.group li:first-child a {-webkit-border-top-left-radius:10px; -webkit-border-top-right-radius:10px; -moz-border-top-left-radius:10px; -moz-border-top-right-radius:10px; border-top-left-radius:10px; border-top-right-radius:10px;}
.group li:last-child a {-webkit-border-bottom-left-radius:10px; -webkit-border-bottom-right-radius:10px; -moz-border-bottom-left-radius:10px; -moz-border-bottom-right-radius:10px; border-bottom-left-radius:10px; border-bottom-right-radius:10px;}

/* --------------------------------------------------------------------------------------------------------------------------------------------------
PORTLET: IMAGE SLIDER
-------------------------------------------------------------------------------------------------------------------------------------------------- */

#slider-box {margin:0 -9px; padding-top:15px; background:url("../design/slider.png") 0 0 repeat-x;}
#slider {width:300px; margin:0 auto;}
#slider ul, #slider li {margin:0; padding:0; list-style:none;}
#slider li {width:300px; height:230px; overflow:hidden;}
#controls {width:300px; height:28px; margin:12px auto; padding:0;}
#controls li {display:inline;}
#controls li a {display:block; float:left; margin-left:9px; padding:5px 10px; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px; text-align:center; font-weight:bold; text-decoration:none;}

/* --------------------------------------------------------------------------------------------------------------------------------------------------
PORTLET: TWITTER FEED
-------------------------------------------------------------------------------------------------------------------------------------------------- */

#twitter_update_list {background:url("../design/twitter.png") 100% 100% no-repeat;}
#twitter_update_list li {padding:0; background:none;}
#twitter_update_list li span {display:block;}

div.kontakt-btn-box {
    margin: 25px 0 0 0;
}

div.kontakt-btn {
    border:1px solid #b58600;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    background-color: #f4b400;
    text-align: center;
    display:table-cell;
    height: 120px;
    line-height: 2.6;

    font-weight: normal;
    text-transform: uppercase;
}

div.top-btn {
    margin-top: 20px;
}

div.bottom-btn {
    float:left;
    margin: 5px 20px 0 0;
}

div.kontakt-btn:hover {
    background-color: #71bf04;
    border: 1px solid #559103;
}

div.kontakt-btn a {
    color:#fff;
    font-size: 1.3em;
    text-decoration: none;
    text-shadow: 1px 1px 3px #7b7b7b;

}

div.kontakt-btn a:hover {
    text-shadow: 1px 1px 3px #4c4c4c;
}

.amensic-image-wrapper{
max-width:90%;
height:auto;
position: relative;
display:block;
margin:0 auto;
}
.amensic-image-wrapper img{
width:100% !important;
height:auto !important;
display:block;
}

iframe {
  max-width: 100%;
}

.embed-container {
  position: relative;
  padding-bottom: 56.25%; /* ratio 16x9 */
  height: 0;
  overflow: hidden;
  width: 100%;
  height: auto;
}
.embed-container iframe {

  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* ratio 4x3 */
.embed-container.ratio4x3 {
  padding-bottom: 75%;
}