/*  
minusminimal - Code
========================================================================== */

/*-----------------------
embedding the font-family 
-----------------------*/
html {
    font-family: niveau-grotesk, verdana, courier, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: niveau-grotesk, verdana, courier, sans-serif;
}

.blockquote{
    font-family: nimbus-roman, times, georgia, serif;
}

#title-section .lh-title.uppernote-narrow strong{
    color: #5e5e5e;
}

.hollow-paragraph{
    
    font-weight: 100;
    color: #8e8e8e;
}

body.kontakt .tx-001 p,
body.kontakt .tx-009 p{
    font-size: 1.4rem;
}
@media screen and (max-width: 960px){
    body.kontakt .tx-001 p,
    body.kontakt .tx-009 p{
        font-size: 1.25rem;
    }
}

body.kontakt .measure{
    max-width: initial;
}

.oc-001 svg.uk-icon.uk-svg{
    width: 32px;
    color: rgba(248,248,248, .5);
    margin-left: 15px;
}
.oc-001 a.uk-icon-button {
    background: transparent;
}
.oc-001 a.uk-icon-button svg{
    color: rgba(248,248,248, .5);
}

.nw-001 .typo-style-2 h3 a{
    pointer-events: none;
}

/*----------------------------
text, title & blockquote sizes 
----------------------------*/
.ltsp5{
    letter-spacing: 0.055rem;
}
.fsz2-dot25{
    font-size: 2.25rem;
}
.fsz-dot25{
    font-size: 1.25rem;
}
@media (min-width: 960px){
    .fsz-dot4\@m{
        font-size: 1.4rem;
    }
    .fsz2-dot55\@m{
        font-size: 2.55rem;
    }
    .fsz3-dot65\@m{
        font-size: 3.65rem;
    }
}

body.erika-stone #cover-fixed .device h2 strong{
    text-decoration: underline;
}
/*-----------------
navigation-bar code 
-----------------*/
.minusminimal .nv-001 .uk-container{
    padding: 0 4%;    
}
.minusminimal .nv-001 a.uk-logo svg{
    width: 32px;
    height: auto;
}
.minusminimal nav.nv-001-container ul li a{
    text-transform: uppercase !important;
}
.minusminimal .nv-001 .uk-container ul li.uk-active>a{
    font-weight: 300;
    text-transform: uppercase;
}

/*-----------------------
klient grid 
-----------------------*/
@media (min-width: 1200px){
    #klient *+.uk-grid-margin-large, 
    #klient .uk-grid+.uk-grid-large, 
    #klient .uk-grid-large>.uk-grid-margin {
        margin-top: 40px;
    }
}

@media (min-width: 812px){
    #klient .uk-child-width-1-2\@s>* {
        width: 50%;
    }
}

/*-----------------------
title-section code (007)
-----------------------*/
/* title wrapper */
#title-section.title-expanding-top {
    padding-top: 70px;
}

/* uppernote */
.uppernote-narrow{
    font-weight: 300;
    font-size: 1.1rem;
}
.tracked-narrow{
    letter-spacing: .0065rem
}

/* title */
.title-narrow{
    margin-top: 1rem;
    font-weight: 300;
}

/*------------------
custom cover-section 
------------------*/

img.intro-cover-screen {
    height: calc(100vh - 80px);
    object-fit: cover;
    object-position: center;
    max-width: calc(100vw - 8%);
    margin-left: 4%;
}

body.kontakt img.intro-cover-screen{
    object-position: right;
}

.cover-mob-title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, 0%);
    transform-origin: left;
    width: 78%;
    -webkit-transform: translate(-50%, 0%);
    -moz-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    -o-transform: translate(-50%, 0%);
}
.cover-mob-title .upnote,
.cover-mob-title .subnote {
    color: rgba(255,255,255, 1);
}

.cover-mob-title .upnote{
    font-size: 1rem;
    /* text-transform: uppercase; */
}

.cover-mob-title .subnote {
    
}

#cover-fixed h2{
    font-size: 7.25vw;
}
#cover-fixed h2.fw6{
    font-weight: 300;
}

@media (min-width: 812px){
    .cover-mob-title{
        display: none;
    }
}
@media (min-width: 812px){
    img.intro-cover-screen {
        max-height: calc(100vh - 160px);
        height: initial;
        object-fit: cover;
        object-position: center;
        max-width: calc(100vw - 8%);
        margin-left: 4%;
    }
}
/* audi cover settings */
@media (min-width: 1200px){
    #cover-fixed .uk-position-large {
        margin: 100px;
    }
}

@media (min-width: 960px){
    #cover-fixed h2{
        font-size: 7.25vw;
    }
}

/*------------------
CoveR cover-teaser
------------------*/
.cover-teaser.uk-position-relative{
    width: 100%;
}
.cover-teaser.uk-position-relative::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
@media (min-width: 960px){
.animation-cover-style-1 figcaption {
    left: 100px;
    bottom: 0;
    padding-right: 0;
    }
}
.uk-position-bottom-left.uk-margin-bottom.arrow {
    left: 50%;
}
.cover-teaser h2.lh-title {
    line-height: .55;
}

/* Cover Teaser Audi A5 */
.cover-cr-audi-gtron .measure p{
    letter-spacing: 0.025rem;
}
 
/*-----------------------
tiny image-section (001)
-----------------------*/
/* image hovers */
.tiny-display{
    max-width: 47rem;
}
.tiny-display:hover>*{
    cursor: zoom-in;
}

/* image paddings */
#tiny-image-section.image-tiny-typo,
#tiny-image-section.im-001-tiny-flat-intro {
    padding-bottom: 60px;
}

/* Certain Pages Settings */
body.erika-stone .tiny-display{
    max-width: 1040px;
}
body.erika-stone #tiny-image-section,
body.just-bus #tiny-image-section,
body.g-log-mlu #tiny-image-section{
    padding-top: 70px !important;
}

/*-----------------------
two different pictures (005)
-----------------------*/
/* image paddings */
@media (min-width:640px){
    /* Left Small Picture */
    #left-small .uk-card.uk-first-column{
        width: 30%;
        padding-right: 30px;
    }
    #left-small .uk-scrollspy-inview{
        width: 70%;
    }
    body.g-log-mlu #left-small .uk-card.uk-first-column,
    body.kita-saaleknirpse-halle #left-small .uk-card.uk-first-column,
    body.autismus-ambulanz-halle #left-small .uk-card.uk-first-column{
        width: 25%;
        padding-right: 30px;
    }
    body.g-log-mlu #left-small .uk-scrollspy-inview,
    body.kita-saaleknirpse-halle #left-small .uk-scrollspy-inview,
    body.autismus-ambulanz-halle #left-small .uk-scrollspy-inview{
        width: 75%;
    }
    #left-small{
        padding-bottom: 60px;    
    }
    #left-small-down .uk-card.uk-first-column{
        width: 30%;
        padding-right: 30px;
    }
    #left-small-down .uk-scrollspy-inview{
        width: 70%;
    }
    #left-small-down{
        padding-bottom: 60px;    
    }

    /* left small picture mobile device */
    #left-small-mobile .uk-card:first-child{
        width: 36%;
        padding-right: 30px;
    }
    #left-small-mobile .uk-card{
        width: 58%;
    }
    #left-small-mobile .uk-card:nth-child(2) .uk-inline-clip{
        box-shadow: none !important;
    }
    #left-small-mobile{
        padding-bottom: 60px;    
    }

    /* left big picture */
    #left-big .uk-card.uk-first-column{
        width: 70%;
        padding-right: 30px;
    }
    #left-big .uk-scrollspy-inview{
        width: 30%
    }

    #left-big .uk-card.uk-first-column{
        padding-right: 60px;
    }
}

#left-big {
    padding-bottom: 60px;
}

@media (min-width: 640px){
    #left-big .uk-card.uk-first-column{
        padding-right: initial;
    }
    #left-big .uk-card:nth-child(1).uk-first-column{
        width: 70%;
    }
    #left-big .uk-card:nth-child(2).uk-scrollspy-inview{
        width: 30%;
        padding-left: 70px;
    }

    /* Audi A5 Gtron Area */
    body.audi-a5-g-tron #left-big .uk-card.uk-first-column{
        padding-right: initial;
    }
    body.audi-a5-g-tron #left-big .uk-card:nth-child(1).uk-first-column{
        width: 70%;
    }
    body.audi-a5-g-tron #left-big .uk-card:nth-child(2).uk-scrollspy-inview{
        width: 30%;
        padding-left: 70px;
    }
}
@media (min-width: 1200px){
    body.audi-a5-g-tron #left-big .uk-card:nth-child(2).uk-scrollspy-inview{
        padding-left: 100px;
    }
}

/* font settings */
.fw3.tiny-prgrph{
    font-size: 1rem;
    color: #3e3e3e;
}
#left-small .fw3.tiny-prgrph p,
#left-small-mobile .fw3.tiny-prgrph p{
    width: 55%;
}

/*-----------------------
fixed parallax cover (003)
-----------------------*/
.cover-fixed-portrait{
    margin-bottom: 40px;
}

.guido-grossmann-text a.blockquote__link::after{
    z-index: 0;
}

/*-----------------------
single image small adjusted (001)
-----------------------*/

/* audi section  */
    body.audi-a5-g-tron #single-small .uk-container {
        padding-bottom: 70px;
    }

 /*-----------------------
image & text (right) (007)
-----------------------*/ 

/* audi section  */
body.audi-a5-g-tron .button-style-1 {
    text-decoration: none;
    color: inherit
}
body.audi-a5-g-tron .button-style-1:before {
    content: '';
    display: inline-block;
    width: 26px;
    height: 1px;
    background: #fff;
    margin-bottom: 3px;
    margin-right: 14px;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}
body.audi-a5-g-tron .button-style-1:hover:before {
    width: 32px
}

/*-----------------------
animated image-section (1)
-----------------------*/
#animation-box.ani-gg-home{
    padding-bottom: 60px;
}
/* Animation Settings For Teaser Images */
#animation-box .container-display{
    padding-top: 21px;
    position: relative;
    box-shadow: 0 22px 18px -20px rgba(0, 0, 0, 0.19);
    -webkit-box-shadow: 0 22px 18px -20px rgba(0, 0, 0, 0.19);
    -moz-box-shadow: 0 22px 18px -20px rgba(0, 0, 0, 0.19);
  }
  #animation-box .animation{
    overflow: initial;
  }
  #animation-box .head {
    width: 100%;
    height: 21px;
    background-color: #EEEEEE;
    border-radius: 5px 5px 0px 0px;
    position: absolute;
    top: 0px;
    left: 0px;
  }
  #animation-box .head .ptn
  {
    position: absolute;
    height: 5px;
    width: 5px;
    border-radius: 3px;
    top: 50%;
    background-color: #232426;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    opacity: 0.2;
  }
  #animation-box .head .ptn:nth-child(1)
  {
    left: 6px;
  }
  #animation-box .head .ptn:nth-child(2)
  {
    left: 16px;
  }
  #animation-box .head .ptn:nth-child(3)
  {
    left: 26px;
  }
  
  #animation-box .image-screen{
    height: 570px;
    overflow: hidden;
  }
  #animation-box .animation img
  {
      -webkit-animation-duration:5s;
      animation-duration:5s;
      -webkit-animation-name:scrollCoverBrowser;
      animation-name:scrollCoverBrowser;
      -webkit-animation-timing-function: cubic-bezier(1.000, 0.005, 0.305, 1.000);
      animation-timing-function: cubic-bezier(1.000, 0.005, 0.305, 1.000); 
      -webkit-animation-direction: alternate; 
              animation-direction: alternate;
      -webkit-animation-iteration-count: infinite;
              animation-iteration-count: infinite;
      -webkit-animation-fill-mode: none;
              animation-fill-mode: none;
  }
  @keyframes scrollCoverBrowser {
  
      10% {
          -webkit-transform: translateY(0%);
              -ms-transform: translateY(0%);
                  transform: translateY(0%);
      }
  
      50% {
          -webkit-transform: translateY(calc(-50% + 285px));
              -ms-transform: translateY(calc(-50% + 285px));
                  transform: translateY(calc(-50% + 285px));
      }
  
      100% {
          -webkit-transform: translateY(calc(-100% + 570px));
              -ms-transform: translateY(calc(-100% + 570px));
                  transform: translateY(calc(-100% + 570px));
      }
  
  }
  
  @-webkit-keyframes scrollCoverBrowser {
      10% {
          -webkit-transform: translateY(0%);
              -ms-transform: translateY(0%);
                  transform: translateY(0%);
      }
  
      50% {
          -webkit-transform: translateY(calc(-50% + 285px));
              -ms-transform: translateY(calc(-50% + 285px));
                  transform: translateY(calc(-50% + 285px));
      }
  
      100% {
          -webkit-transform: translateY(calc(-100% + 570px));
              -ms-transform: translateY(calc(-100% + 570px));
                  transform: translateY(calc(-100% + 570px));
      }
  
  }


/*-----------------------
animated scroll arrow
on cover section 
-----------------------*/
.c-story__header.c-section.c-hero{
    position: relative;
}
.c-story__header .c-story__header-scroll .c-story__header-scroll-text {
    margin-right: 20px;
}


.c-story__header .c-story__header-scroll {
    position: absolute;
    z-index: 5;
    right: 1.55%;
    bottom: 30px;
    transform: rotate(90deg);
    transform-origin: 100% 0;
    align-items: center;
    display: flex;
}
@media (max-width: 812px){
    .c-story__header .c-story__header-scroll {
        right: 8%;
    }
}
.c-story__header .c-story__header-scroll .c-arrow {
    width: 20px;
    animation-name: b;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: .6s;
    animation-timing-function: cubic-bezier(.445,.05,.55,.95);
}

@keyframes b {
    0% {
        left: 0
    }

    to {
        left: -5px
    }
}

.c-arrow, .c-arrow:after, .c-arrow:before {
    background-color: #000;
    display: block;
    height: 1px;
}
.c-arrow {
    width: 20px;
    position: relative;
}

.c-arrow.c-arrow__right:before {
    transform-origin: top right;
}
.c-arrow.c-arrow__right:after {
    transform-origin: bottom right;
}
.c-arrow:before {
    transform: rotate(40deg);
}
.c-arrow:after {
    transform: rotate(-40deg);
}
.c-arrow.c-arrow__right:after, 
.c-arrow.c-arrow__right:before {
    top: 0;
    right: 0;
}
.c-arrow:after, 
.c-arrow:before {
    width: 5px;
    content: "";
    position: absolute;
}
.c-arrow, 
.c-arrow:after, 
.c-arrow:before {
    background-color: #000;
    display: block;
    height: 1px;
}

@media (max-width: 812px){
    .c-story__header .c-story__header-scroll .c-arrow, 
    .c-story__header .c-story__header-scroll .c-arrow:after, 
    .c-story__header .c-story__header-scroll .c-arrow:before {
        background-color: rgba(255,255,255, 1);
    }
    .c-story__header .c-story__header-scroll .c-story__header-scroll-text{
        color: rgba(255,255,255, 1);
    }
}

/*-----------------------
services of agency - section
-----------------------*/
body.agentur .fr-001 .fw8 {
    font-weight: 400;
}
body.agentur .fr-001 *+.uk-h1, *+.uk-h2, *+.uk-h3, *+.uk-h4, *+.uk-h5, *+.uk-h6, *+h1, *+h2, *+h3, *+h4, *+h5, *+h6 {
    margin-top: 0px;
}

/* ———————————————— */
@media (min-width:640px) {
    body.agentur .fr-001 .uk-child-width-1-3\@s>* {
        width: calc(100% * 1 / 4.001)
    }
}
/* ———————————————— */
@media (min-width: 960px){
    body.agentur .fr-001 .f3\@m {
        font-size: 2.5vw;
    }
}