/* assistant-regular - latin */
@font-face {
    font-family: 'Assistant';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/assistant-v7-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/assistant-v7-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/assistant-v7-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/assistant-v7-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('../fonts/assistant-v7-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/assistant-v7-latin-regular.svg#Assistant') format('svg'); /* Legacy iOS */
  }

.space-after-small{margin-bottom: 15px;}
.space-after-small2{margin-bottom: 35px;}

.innerspace-before-small{padding-top: 60px;}
.innerspace-before-large{padding-top: 150px;}

.innerspace-after-small{padding-bottom: 55px;}
.innerspace-after-large2{padding-bottom: 190px;}

@media screen and (min-width: 768px) {
    .spacer-after-small{margin-bottom: 30px;}
    .spacer-after-small2{margin-bottom: 35px;}

    .innerspace-before-small{padding-top: 120px;}
    .innerspace-before-large{padding-top: 150px;}

    .innerspace-after-small{padding-bottom: 55px;}
    .innerspace-after-large2{padding-bottom: 190px;}
}

.no-innerspace{padding: 0;}
.no-space{margin: 0;}

.uppercase{text-transform: uppercase;}

.letter-space-1{letter-spacing: 0.1em;}

.pos-relativ{position: relative;}

.text-center{text-align: center;}

.h-100{height: 100%;}

.no-list-style{list-style: none; padding: 0;}

.arrow-down::after{
    content: "";
    background-image: url("../media/svg/angle-down-solid.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0;
    width: 20px;
    height: 20px;
    display: inline-block;
}
.arrow-up::after{
    content: "";
    background-image: url("../media/svg/angle-up-solid.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0;
    width: 20px;
    height: 20px;
    display: inline-block;
}
.arrow-up, .arrow-down{
    padding: 0px 5px;
}

body {
    color: #FAF6EB;
    font-size: 14px;
    font-family: 'Assistant', Helvetica, sans-serif;
    line-height: 1.3;
    font-weight: 400;
    background-color: #171717;
}


body.altColor{color: #171717; background-color: #FAF6EB;}

@media screen and (min-width: 768px) {
    body {font-size: 18px;}
}

img, embed, object, video {max-width: 100%;height: auto;width: auto;}
input:focus,select:focus,textarea:focus,button:focus {outline: none;outline-width: 0;}
nav ul,
nav ul ul,
nav ul ul ul{margin:0; padding:0;}
nav ul li{margin:0; padding:0; list-style:none outside;}
nav a:hover{text-decoration:none;}

ul li{margin-bottom: 5px;}

button{background-color: transparent;border: 0;}

a{color: #FAF6EB; text-decoration:none;}
a:focus{color: #FAF6EB; text-decoration:none;}
a:hover{color:#FAF6EB; text-decoration:none;}
*:focus{outline:0;}
button:focus{outline:0;}
a:focus{outline:0;}

.altColor a{color: #171717}
.altColor a:focus{color: #171717}
.altColor a:hover{color:#171717}

h1, .h1,
h2, .h2{font-size: 25px; margin-bottom: 25px;}
h3, .h3{font-size: 16px; margin-bottom: 10px;}

@media screen and (min-width: 768px) {
    h1, .h1,
    h2, .h2{font-size: 30px;}
}

p{margin-bottom: 25px;}

.logo-box{
    position: fixed;
    width: 100%;
    top: 15px;
    z-index: 10;
}
.logo{
    width: 24px;
    height: 24px;
}
@media screen and (min-width: 768px) {
    .logo-box{
        top: 30px;
    }
    .logo{
        width: 50px;
        height: 50px;
    }
}
.logo a{
    width: 100%;
    height: 100%;
    display: inline-block;
}

#content{
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 100vh;
    padding-bottom: 55px;
}
#portfolio #content{min-height: 100vh;}
#startseite #content{background-image: url("../media/bg_Lehmputz.png")}
@media screen and (min-width: 1024px) {
    #ueberuns #content{
        background-image: url("../media/bg_ueberuns.png");
        background-position: 85% 100%;
        background-size: auto;
    }
}
#ueberuns{background-color: #FFFAF0;;}
#kontakt #content{background-image: url("../media/bg_gruen.png");}
#portfolio #content{height: auto; background-color: #FFFAF0;}

@media screen and (min-width:1024px) {
    #content{background-size: auto, 100%;}
    #kontakt #content{background-position-x: center; background-size: 100%, 100%;}
    #ueberuns #content{background-position: 85% 100%;}
    #startseite #content{
        background-image: url("../media/bg_Lehmputz_desk.png");
        background-position: 100% 0;
        background-color: #000;
        background-size: cover;
    }
}

.bg-bild{
    z-index: -1;
    position: absolute;
    top: -210px;
    left: 0;
    right: 0;
}
@media screen and (min-width: 1024px) {
    .bg-bild{display: none;}
}


#footer{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 55px;
    background-color: #171717;
}

#footer nav{
 width: 100%;
}

.nav-list li{
    display: inline-block;
}
.nav-list{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.nav-list li{
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    text-align: center;
}
.nav-list a{
    display: block;
    padding: 5px;
    color: rgb(250, 246, 235);
    text-transform: uppercase;
    font-size: 20px;
    font-weight: 400;
}
.nav-list a:hover, .nav-list a:focus{
    color: #FAF6EB;
}

/** Kontakt **/

.kontakt-box{
    height: calc(100vh - 55px);
    width: 100%;
}
.kontakt-box .text-box{
    width: 100%;
}

/** PORTFOLIO **/



.innerCover{
    position:relative;
    width:100%;
    height:100%;
    background-position: center;}

.smart-header-img{display: none;}
.header-img{display: block;}

#portfolio .arrow-down::after{display: none;}
#portfolio .arrow-up::after{display: none;}

@media screen and (max-width:768px) {
    .header-img{display: none;}
    #portfolio .img-box{height: calc(100vh - 110px - 55px)}
    #portfolio .arrow-down::after{display: inline-block;}
    #portfolio .arrow-up::after{display: inline-block; margin-bottom: 15px;}
}

#portfolio .bild-label{
    text-transform: uppercase;
    height: 55px;
    padding: 0 10px;
}


.portfolio-slides .item{
    margin-bottom: 30px;
}
.portfolio-slides .item .slider-link{
    display: block;
    height: auto;
}


.portfolio-container{
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 20px;
}
@media screen and (min-width:768px) {
    .portfolio-container{
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
}
@media screen and (min-width:992px) {
    .portfolio-container{
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    }
}
.portfolio-container .item{
    display: inline-block;
    margin-bottom: 20px;
    width: 100%;
}

.portfolio-container2 .item{
    width: 50%;
    margin-bottom: 0;
    padding: 10px;
}
.portfolio-container2{
    margin: 0 -10px;
}
@media screen and (min-width:992px) {
    .portfolio-container2 .item{
        width: 33.333%;
    }
}
.close{
    top: 20px;
    right: 40px;
    color: #000;
    position: absolute;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    font-size: 40px;
    cursor: pointer;
}
.slick-prev::after {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
        transform: rotate(180deg);
}

.slick-arrow {
      position: absolute;
      top: 50%;
      z-index: 1;}

.slick-arrow::after {
          background-image: url("../media/svg/pfeil.svg");
          background-size: cover;
          content: "";
          width: 24px;
          height: 20px;
          display: block;
    }


.slick-prev.slick-arrow  {
      left: 20px;
}

.slick-next.slick-arrow  {
      right: 20px;
   }

.slick-disabled.slick-arrow::after,  .slick-disabled.slick-arrow:hover::after {background-image: url("../media/svg/slider_grau_pfeil.svg");}

.slick-disabled.slick-arrow.slick-prev::after,  .slick-disabled.slick-arrow.slick-prev:hover::after {transform: rotate(0deg);}

.slick-disabled.slick-arrow.slick-next::after,  .slick-disabled.slick-arrow.slick-next:hover::after {transform: rotate(180deg);}


@media print {
    h1,h2{margin-bottom: 15px;}
    h3{margin-bottom: 15px;}
    .btn{display: none;}
    .logo{display: block;}
    footer#footer{display: none;}
    #content{min-height: auto;padding-bottom: 20;}
}