@import url("https://use.typekit.net/xtb8atp.css");
@import "fonts.css";
 
:root {
    --main-font: proxima-nova, sans-serif;
    --deco-font: smoothy, sans-serif;
    --black: #000;
    --white: #fff;
    --blue: #00a0f0;
    --green: #a1c42c;
    --gray: #e4e7e9;
    --darkgray: #6a6d6e;
    --darkergray: #494b4c;
    --darktext: #505050;
    --lightgrey: #e4e7e9;
    --lime: #a1c42c;
    --spectra: #FFC007;
    --amethyst: #9164AB;
    --flame: #CD212A;
    --bachelor: #43BCD8;
    --gold: #b49b57;
    --big-font-width: 700;
    --big-font-size: 33px;
    --big-font-lineheight: 1;
}
.uk-font-secondary {
    font-family: var(--deco-font);
    font-weight: 500;
}

h1.smallheading {
    font-size: 16px;
    line-height: 1.35em;
    margin: 0;
    margin-bottom: 10px;
}

h3.uk-panel-title {
    font-family: var(--main-font);
    font-weight: var(--big-font-width);
    font-size: var(--big-font-size);
    line-height: var(--big-font-lineheight);
    color: var(--black);
}

.uk-navbar-toggle:hover, .uk-navbar-toggle[aria-expanded=true] {
    color: #000;
    text-decoration: none;
}

.uk-container-expand-right {
    padding-right: 0;
}
.uk-container-expand-right > .uk-container {
    max-width: 100%;
}


.service-teaser-small {
    position: relative;
}
.service-teaser-small__content p {
    margin: 0;
    text-align: center;
}



.service-teaser-small__content-wrapper {
    height: 230px;
    overflow: hidden;
    position: relative;
}

.service-teaser-small__content-wrapper::before {
    content: "";
    width: 0;
    height: 3px;
    background-color: var(--blue);
    display: block;
    transition: all 0.3s;
    margin-bottom: 10px;
}


.service-teaser-small:hover .service-teaser-small__content-wrapper::before {
    width: 100%;
    transition: all 0.3s;
}

.service-teaser-small__content {
    position: absolute;
    transition: all 0.3s;
}

.service-teaser-small:hover .service-teaser-small__content {
    position: absolute;
    top: 15%;
    transition: all 0.3s;
}

.service-teaser-small h4 {
    font-weight: 900;
    font-size: 32px;
    line-height: 1;
    text-align: center;
    color: var(--blue);
    text-transform: uppercase;
}

.wdu-home-slider > * > *{
    height: calc(100vh - 80px);
}
.wdu-home-slider .slider-heading {
    font-family: var(--deco-font);
    transform: rotate(-3deg);
    font-size: 90px;
    line-height: 70px;
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0.001em;
}



.person-full-image {
    height: calc(100vh - 100px);
    background-size: contain;
    background-position: right bottom;
    background-repeat: no-repeat;
    position: relative;
}
.person-full-image img {
    visibility: hidden;
}
.personalInformation {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 clamp(10px, 8vw, 140px) 40px;
}
.personalInformation .name {
    color: var(--blue);
    font-family: var(--deco-font);
    font-size: clamp(60px, 7vw, 90px);
    font-style: italic;
    line-height: 70px;
    margin-bottom: 10px;
}
.personalInformation .position {
    margin: 15px 0px 0px 0px;
    font-size: clamp(30px, 4vw, 42px);
}
.personal-social-icons {
    margin-bottom: 0px;
}
.personal-social-icons a {
    color: var(--black) !important;
}
.personal-social-icons > * {
    background-color: var(--white);
    font-size: 25px;
    border-radius: 7px;
    display: inline-block;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: contain;
    text-align: center;
    line-height: 29px;
}
.personal-social-icons a[class*='uk-icon-'] {
    color: var(--black) !important;
}
.personalInformation .cta {
    box-sizing: border-box;
    display: inline-block;
    position: relative;
}
.cta > a, button.cta, input[type="submit"].cta, a.cta, .cta a {
    background-color: var(--blue);
    padding: 15px 30px 12px;
    -webkit-box-shadow: 0px 0px 0px -18px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 0px 0px 0px -18px rgba(0, 0, 0, 0.6);
    box-shadow: 0px 0px 0px -18px rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 20px;
    border-radius: 50px;
    text-decoration: none;
    margin-top: 9px;
    display: table;
    vertical-align: middle;
    transition: all 0.3s;
    font-weight: 500;
    border: 0;
}

.projekt-sidebar,
.projekt-sidebar p,
.projekt-sidebar li {
    font-size: 16px;
}
.projekt-sidebar a {
    color: var(--blue);
}
.uk-section-primary:not(.uk-preserve-color) .uk-icon-link:hover {
    color: rgba(255,255,255,1);
    transition: all 0.3s;
}
.scroll-up {
    display: block;
}
.scroll-up span {
    background: url(../images/arrow-right-tonkom-shopware-onlineshop-agentur.svg);
    background-repeat: no-repeat;
    height: 40px;
    width: 40px;
    display: inline-block;
    transform: rotate(-90deg);
}

.uk-input {
    font-size: 16px;
}

.wd-schulungen-grid article:nth-of-type(even) .uk-width-1-2\@m:first-of-type {
    order: 2;
}


.wd-spacer {
    height: calc(100vw / 10);
    min-height: 200px;
}

.boundary {
    position: relative;
}


@media only screen and (min-width: 768px){

    :root {
        --big-font-width: 700;
        --big-font-size: 66px;
    }
    .wdu-home-slider .slider-heading {
        font-size: 170px;
        line-height: 140px;
    }
    .service-teaser-small__content {
        top: -100%;
    }
    .service-teaser-small h4 {
        text-align: center;
    }
    .mobile-br {
        display: none;
    }
}


@media (min-width: 960px) {
    .uk-container-expand-left, .uk-container-expand-right {
        max-width: calc(50% + (1290px / 2) - 0px);
    }
}


@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 959px) {
    .uk-dropbar .uk-nav-default>li>a {
        font-size: 36px;
        line-height: 1;
        color: var(--white);
        font-weight: 800;
        letter-spacing: 0.0125em;
    }


    .uk-dropbar .uk-nav-default>li.item-297,
    .uk-dropbar .uk-nav-default>li.item-275 {
        position: absolute;
    }
    .uk-dropbar .uk-nav-default>li.item-297 {
        bottom: -30%;
    }
    .uk-dropbar .uk-nav-default>li.item-275{
        bottom: -42%;
    }
    .uk-dropbar .uk-nav-default>li.item-297 > a,
    .uk-dropbar .uk-nav-default>li.item-275 > a {
        font-weight: 700;
        color: var(--white);
        font-size: 16px;
        padding: 0;
        line-height: 2;
    }
}
@media screen and (max-width: 768px) {
    .wd-project-slider .uk-container-large {
        padding-right: 0;
    }
    .person-full-image {
        background-size: auto 100%;
        background-position: center bottom;
    }
}