@import url("font-awesome-v5.6.3.min.css");
@import url("http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800");
@import url('https://fonts.googleapis.com/css?family=Poppins:300,400');
@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css?family=Raleway');
@import url('https://fonts.googleapis.com/css?family=Heebo:100,300');


html {
    font-size: 14px;
}

body,
input,
select,
textarea {
    color: #555555;
    /*		font-family: 'Open Sans', sans-serif;*/
    font-family: 'Roboto', sans-serif;
    font-family: 'Raleway', sans-serif;
    font-family: 'Heebo', sans-serif;
    font-weight: 300;
    /*    font-family: "Nunito Sans", Helvetica, Arial, sans-serif, 'Nunito Sans', Helvetica, Arial, sans-serifbody;*/
    font-size: 1em;
    line-height: 1.5em;
    text-align: justify;
    margin: 0
}

body {
    max-width: 1000px;
    margin: auto;
    background: white;
}


/* BUTTON */

input[type="submit"],
input[type="reset"],
input[type="button"],
.button {
    -moz-appearance: none;
    -webkit-appearance: none;
    -o-appearance: none;
    -ms-appearance: none;
    appearance: none;
    background: none;
    border-radius: 4%;
    border: 2px solid;
    border-color: #56687C;
    color: #56687C;
    cursor: pointer;
    display: inline-block;
    padding: 0.9em;
    letter-spacing: 1px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    -moz-transition: all 0.35s ease-in-out;
    -webkit-transition: all 0.35s ease-in-out;
    -o-transition: all 0.35s ease-in-out;
    -ms-transition: all 0.35s ease-in-out;
    transition: all 0.35s ease-in-out;

    font-size: 0.9em;
}

.button:hover {
    background: #56687C;
    color: white;
}

input[type="submit"].alt,
input[type="reset"].alt,
input[type="button"].alt,
.button.alt {
    border-color: inherit;
    color: inherit;
}

input[type="submit"].alt:hover,
input[type="reset"].alt:hover,
input[type="button"].alt:hover,
.button.alt:hover {
    background: white;
    border-color: white;
    border-radius: 4%;
    color: #56687C;
}

input[type="submit"].fit,
input[type="reset"].fit,
input[type="button"].fit,
.button.fit {
    width: 100%;
}

input[type="submit"].small,
input[type="reset"].small,
input[type="button"].small,
.button.small {
    font-size: 0.8em;
}



/* TITLE */



section.title {
    background: #222222;

}

section.title nav {
    font-family: 'Poppins', sans-serif;
    padding: 0.5em;
    text-align: left;
    width: 90%;
    float: left;
    //padding: 20px;
    //text-align: center;
}

section.title nav * {
    color: #777777;
    text-decoration: none;

    text-transform: uppercase;

    letter-spacing: 2px;
    font-weight: 400;
    font-size: 1em;
}


#menu-icon {
    display: inline-block;
    margin: 0;
    color: #777777;
    font-size: 23px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

#menu-icon::after {
    content: "\f0c9";
}

/*
a:hover#menu-icon {
    background-color: #444;
}
*/

/*
@keyframes slide {
    from {background-color: #222222;}
    to {background-color: yellow;}
}
*/

@keyframes slideIn {
    from {
        left: -100px;
    }
    to {
        left: 0px;
    }
}

nav ul {
    list-style: none;
    display: none;
    position: absolute;
    padding: 0px;
    margin: 0;

    left: 0px;
    top: 30px;
    width: 40%;
    z-index: 10;
    background: #222222ee;
}

nav li:first-child {
    margin-top: 0.5em;
}

nav li {
    //TODO

    display: inline-block;
    float: left;
    text-align: left;

    width: 100%;
    padding-top: 4px;
    padding-bottom: 4px;

    margin: 0;
    //margin-bottom: -1px;
}

nav:hover ul {
    animation-name: slideIn;
    animation-duration: 0.5s;
    animation-timing-function: ease-in-out;
    display: block;
}

section.title nav ul li.active {
    //background: red;
}

section.title nav ul li a {
    display: block;
    padding-left: 10px;
}

section.title nav ul li.active a {
    color: white;
}

section.title nav ul li a:hover {
    color: white;
}

section.title header {
    width: 100%;
    display: grid;
    grid-template-areas: "element";
    z-index: 20;
}

section.title header * {
    grid-area: element;
    width: 100%;
}

section.title header #banner {
/*
    height: 330px;
    object-fit: cover;
*/
}

section.title header #logo {

    width: 30%;
    margin-top: 3%;
    margin-left: 8%;

    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    transform: rotate(-10deg);
}





/* BAND */

section.band {
    display: grid;
    //border-bottom: 1px solid black;
    background: #f2f2f2;
    
    padding: 1.5em;
    grid-gap: 1em;
    grid-template-columns: 100%;
    grid-template-areas: 
        "header" 
        "text" 
        "figure" 
        "nav";    
}

    section.band.reverse {
        background: #56687C;
        color: white;        
    }

section.band.footer {
    background: #222222;
    color: white;
}

section.band header {
    grid-area: header;

    font-family: 'Poppins', sans-serif;
    display: block;
    margin-bottom: 0em;
    letter-spacing: 0.05em;
    line-height: 1em;
    text-transform: uppercase;
    font-size: 1.5em;
    font-weight: 400;
}

section.band article {
    grid-area: text;
}

section.band nav {
    grid-area: nav;

    text-align: center;
}

section.band nav * {
    margin: 0.3em;
}

section.band figure {
    grid-area: figure;

    margin: 0;
    display: block;

}

section.band figure img {
//  max-height: 100%;
   width: 100%;
//    height: 300px;
//    display: block;
//    object-fit: cover;
}

/*
 .swiper-container {
      width: 100%;
    }

     .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
    .swiper-pagination-bullet {
      width: 20px;
      height: 20px;
      text-align: center;
      line-height: 20px;
      font-size: 12px;
      color:#000;
      opacity: 1;
      background: rgba(0,0,0,0.2);
    }
    .swiper-pagination-bullet-active {
      color:#fff;
      background: #007aff;
    } */

/*
section.band figure:not(.slideshow) * {
    max-width:100%;
}
*/

/* .slideshow * {
    display: block;
} */

@supports (-ms-ime-align:auto) {

 .slideshow {
//    display: block;
//    width: auto;

//    max-width: 430px;
    height: 320px;

}

}


.clickable {
    cursor: pointer;
}


/* FOOTER */

section.footer article {
  height: 200px;
}

section.footer.band {
    align-items: normal;
    padding: 1.5em;
}

section.footer figure img#logo {
    margin-top: 0;
    width: 70%;
    display:block;
    margin-left: auto;
    margin-right: auto;
}


div.icons {
    display: grid;
    margin-left: 1em;
    grid-template-columns: 1fr;
    grid-gap: 1em;
    grid-template-areas: "facebook" "instagram" "tel" "mail";
}

div.icons a {
    display: block;
    color: inherit;
    text-decoration: none;
}

.icon {
    font-weight: 400;
    font-size: 1.3em;
    margin-right: 1em;
    vertical-align: middle;
    font-style: normal;
}

section.footer {
    grid-gap: 1.5em;
}

.instagram {
    grid-area: instagram;
}

.facebook {
    grid-area: facebook;
}

.tel {
    grid-area: tel;
}

.mail {
    grid-area: mail;
}

.instagram:before {
    font-family: "Font Awesome 5 Brands";
    content: "\f16d";
}


.facebook:before {
    font-family: "Font Awesome 5 Brands";
    content: "\f082";
}

.mail i:before {
    font-family: "Font Awesome 5 Free";
    content: "\f0e0";
}

.tel i:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;

    content: "\f095";
}


.time i:before {
     font-family: "Font Awesome 5 Free";
    font-weight: 300;

    content: "\f095";
}

.leistungItem {
    font-size:1.1em;
    display:block;
}
.leistungItem span {
    vertical-align: middle;
}
.leistungItem i {
    font-size: 1.6em;
}
/*
@-webkit-keyframes slide {
  20% {margin-left: 0px;}
  30% {margin-left: -728px;}
  50% {margin-left: -728px;}
  60% {margin-left: -1456px;}
  70% {margin-left: -1456px;}
  80% {margin-left: -2184px;}
  90% {margin-left: -2184px;}
}
*/



/* MEDIA QUERIES */

@media (min-width: 400px) {

    section.band.footer {
        grid-template-columns: 3fr 2fr;
        grid-template-areas: 
            "header header" 
            "text figure";

    }
}

@media (min-width: 900px) {
    section.footer figure img#logo {
        max-height: 100%;
        margin-left: auto;
        margin-right: auto;
        display: block;
        -webkit-transform: rotate(10deg);
        -moz-transform: rotate(10deg);
        -ms-transform: rotate(10deg);
        -o-transform: rotate(10deg);
        transform: rotate(10deg);
    }

    section.band.footer {
        grid-template-columns: 3fr 1fr;
        grid-template-areas: "header figure" 
            "text figure";
    }

/* .slideshow {
    display: block;
    max-width: 525px;
    width: auto;
    height: 350px;
} */

    section.band article {
        font-size: 1.1em;
        line-height: 150%;
    }


/* chrome problem with only fr in grid template: https://github.com/nolimits4web/swiper/issues/2606
https://codepen.io/thamas/pen/JwoQPq*/

    section.band {
        grid-template-columns: 4fr 500px;
        //grid-template-columns: fit-content(400px) fit-content(500px);

        grid-template-areas:
            "header figure"
            "text figure"
            "nav figure";

    }


    section.band.reverse {
        grid-template-columns: 500px 4fr;
        //grid-template-columns: fit-content(500px) fit-content(400px);
        grid-template-areas:
            "figure header"
            "figure text"
            "figure nav";
    }

    section.band.bandgallery {
        grid-template-areas: 
            "header header" 
            "text text"
            "figure figure";
    }

    div.icons {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "facebook tel" "instagram mail";

    }

    div.icons * {
        margin-bottom: 0.8em;
    }

    section.title nav:hover ul {
        animation-name: none;
        display: inline;
    }


    section.title nav ul li a {
    display:inline;
    }

    section.title li {
        display: inline;
        width: auto;
        margin-right: 1em;
    }

    section.title li:first-child {
        margin-top:0;
    }

    section.title ul {
        list-style-type: none;
        display: inline;
    position: static;

    }

    section.title nav #menu-icon {
        display: none;
    }

}