/* ==========================================================================
   SCHRIFT IMPORT
   ========================================================================== */

@import url("https://use.typekit.net/ggj1evt.css");


/* ==========================================================================
   VARIABLES
   ========================================================================== */

:root {
    --color-primary: #ffffff;
    --color-secondary: #d4000a;
    --white: #ffffff;
    --black: #000000;
    --transparent: transparent;
    --body-text-color: #ffffff;
    --body-font-family: halcom, sans-serif;
    --body-font-weight: 400;
    --body-line-height: 1.25;
    --body-font-size: 20px;
    --body-bg-color: transparent;
    --body-link-color: var(--color-primary);
    --body-link-hover-color: var(--color-primary);
    --heading-font-family: bitter, serif;
    --heading-font-weight: 400;
    --heading-line-height: 1.1;
    --heading-letter-spacing: 0.03em;
    --heading-color: var(--black);
    --header-font-size: 5rem;
    --header-line-height: 5rem;
    --h1-font-size: 3.25rem;
    --h2-font-size: 3.25rem;
    --h3-font-size: 2rem;
    --h4-font-size: 1rem;
    --lead-font-size: 1.5rem;
    --mainnav-text-color: var(--body-text-color);
    --mainnav-link-color: var(--body-text-color);
    --mainnav-link-hover-color: var(--body-text-color);
    --mainnav-link-active-color: var(--body-text-color);
    --footer-bg-color: var(--transparent);
    --footer-text-color: var(--black);
    --footer-link-color: var(--color-primary);
    --footer-link-hover-color: var(--color-primary);
}

/* ==========================================================================
   ALLGEMEINE DEFINITIONEN
   ========================================================================== */

html,
body {
    -webkit-font-smoothing: antialiased;
    color: var(--color-primary);
    background-color: var(--black);
}

.t4-wrapper {
    background: url(../images/brush-01.png) left 0% no-repeat, url(../images/brush-02.png) right 50% no-repeat;
    background-size: 50% 50%;
}

a,
.uk-scope a,
.btnLink a {
    outline: none;
    text-decoration: underline !important;
    color: var(--color-primary) !important;
    transition: .3s ease-in-out;
    -webkit-transition: .3s ease-in-out;
    -moz-transition: .3s ease-in-out;
    -ms-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
}

a:active,
a:focus,
a:hover,
.uk-scope a:hover,
.uk-scope a:focus,
.uk-scope a:active,
.btnLink a:hover,
.btnLink a:focus,
.btnLink a:active {
    color: var(--color-secondary) !important;
    text-decoration: underline;
}

img {
    max-width: 100%;
    height: auto;
}

:focus {
    outline: 0 !important;
}

b,
strong {
    font-weight: 700;
}


/* ==========================================================================
   TYPO DEFINITIONEN
   ========================================================================== */

h1,
.h1,
h1.module-title,
.uk-scope .uk-h1,
.uk-scope h1,
.uk-scope .uk-panel h1 {
    font-family: var(--heading-font-family);
    font-size: var(--h1-font-size);
    font-weight: var(--heading-font-weight);
    color: var(--color-secondary);
    line-height: var(--heading-line-height);
    margin-bottom: 40px;
}

h2,
.h2,
h2.module-title,
.uk-scope .uk-h2,
.uk-scope h2,
.uk-scope .uk-panel h2 {
    font-family: var(--heading-font-family);
    font-size: var(--h2-font-size);
    color: var(--color-secondary);
    line-height: var(--heading-line-height);
    margin: 0px 0px 20px 0px;
}

h3,
.h3,
h3.module-title,
.uk-scope .uk-h3,
.uk-scope h3,
.uk-scope .uk-panel h3 {
    font-family: var(--heading-font-family);
    font-size: var(--h3-font-size);
    color: var(--color-secondary);
    line-height: var(--heading-line-height);
    margin: 0px 0px 10px 0px;
}

h4,
.h4,
h4.module-title,
.uk-scope .uk-h4,
.uk-scope h4,
.uk-scope .uk-panel h4 {
    font-family: var(--body-font-family);
    font-size: var(--h4-font-size);
    color: var(--color-secondary);
    line-height: var(--heading-line-height);
    margin: 0px 0px 10px 0px;
    font-weight: 700;
}

.lead {
    font-size: var(--lead-font-size);
}

.versal {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}


/* ==========================================================================
   HEADER
   ========================================================================== */

#t4-header {
    padding: 25px 50px;
    position: fixed;
    width: 100%;
    background-color: #000000;
    z-index: 1000;
    -webkit-box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .1);
    -moz-box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .1);
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .1);
    -webkit-transition: transform .25s .1s ease-in-out;
    transition: transform .25s .1s ease-in-out;
    -moz-transition: transform .25s .1s ease-in-out;
    -ms-transition: transform .25s .1s ease-in-out;
    -o-transition: transform .25s .1s ease-in-out;
    border: 0px;
}

.down #t4-header {
    transform: translate3d(0, -130px, 0);
    -webkit-transform: translate3d(0, -130px, 0);
    -moz-transform: translate3d(0, -130px, 0);
    -ms-transform: translate3d(0, -130px, 0);
    -o-transform: translate3d(0, -130px, 0);
}

#t4-header:after {
    content: "";
    width: 150px;
    height: 175px;
    background-image: url(../images/wimpel.svg);
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    top: 0px;
    right: 50px;

    -webkit-transition: transform .25s .1s ease-in-out;
    transition: transform .25s .1s ease-in-out;
    -moz-transition: transform .25s .1s ease-in-out;
    -ms-transition: transform .25s .1s ease-in-out;
    -o-transition: transform .25s .1s ease-in-out;
}

.down #t4-header:after {
    transform: translate3d(0, -175px, 0);
    -webkit-transform: translate3d(0, -175px, 0);
    -moz-transform: translate3d(0, -175px, 0);
    -ms-transform: translate3d(0, -175px, 0);
    -o-transform: translate3d(0, -175px, 0);
}

/*Logo*/

.logo-image {
    width: 250px;
}

.logo-image img {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1000;
}


/*Slideshow*/

.stobete .uk-slideshow-items img {
    object-position: left;
}

.stobete #t4-spotlight-2 {
    padding-top: 0px;
}

/* ==========================================================================
   FOOTER BOTTOM
   ========================================================================== */

.t4-content-inner {
    min-height: 100vh;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.t4-content-inner>.t4-section {
    min-width: 100%;
}

#t4-main-body {
    flex-grow: 1;
    overflow: hidden;
}

.t4-footer,
.t4-footnav {
    align-self: flex-end;
}


/* ==========================================================================
   MAIN NAVIGATION
   ========================================================================== */

#t4-megamenu-mainmenu {}

.t4-navbar.mx-auto {
    margin-right: inherit !important;
}

.nav-item {}

.nav-item a {
    font-weight: 700 !important;
    font-size: 1.25rem !important;
    text-decoration: none !important;
    padding: 25px 40px !important;
}

.nav-item.current a {
    color: var(--color-secondary) !important;
}

.nav-item.arrow {
    padding-left: 120px;
}

.nav-item.arrow:before {
    content: "";
    background-image: url(../images/icons/arrow.svg);
    background-repeat: no-repeat;
    height: 50px;
    width: 60px;
    position: absolute;
    margin-left: -50px;

}


/* ==========================================================================
      MAIN NAVIGATION - MOBILE
      ========================================================================== */

#triggerButton {
    position: absolute;
    right: 25px;
    top: 43px;
    margin: 0px;
    z-index: 1000;
}

.fa-bars::before {
    color: var(--color-secondary);
}

.t4-off-canvas-header,
.t4-off-canvas-body {
    background-color: var(--black) !important;
}

.t4-offcanvas {
    background: #000000;
}

.t4-off-canvas-body li {}

.t4-off-canvas-body li a {}



/* ==========================================================================
   SPOTLIGHT ALLGEMEIN
   ========================================================================== */

.t4-section {
    padding: 7rem 0px;
}

/* ==========================================================================
   SPOTLIGHT 1
   ========================================================================== */

.t4-section.t4-spotlight-1 {
    padding: 5rem 0px;
}



/* ==========================================================================
   SPOTLIGHT 2
   ========================================================================== */

.firma .t4-section.t4-spotlight-2 {
    padding: 0px;
}

/* ==========================================================================
   SPOTLIGHT 3
   ========================================================================== */

.firma .t4-section.t4-spotlight-3 {
    padding: 0px;
}


/* ==========================================================================
   SPOTLIGHT 4
   ========================================================================== */

.t4-section.t4-spotlight-4 {}

/* ==========================================================================
   SPOTLIGHT 5
   ========================================================================== */

.t4-section.t4-spotlight-5 {
    padding: 60px 0px;
}



/* ==========================================================================
   CONTENT
   ========================================================================== */

#t4-main-body {
    padding-top: 350px;
}

.home #t4-main-body {
    padding-top: inherit;
}

#t4-main-body .t4-section-inner.container {}

.item-image.pull-right img {
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    -webkit-border-top-left-radius: 15px;
    -webkit-border-bottom-left-radius: 15px;
    -moz-border-radius-topleft: 15px;
    -moz-border-radius-bottomleft: 15px;
}

.adress,
.number {
    float: left;
}

.number {
    margin-top: 30px;
}



/* ==========================================================================
   LINKS / BUTTONS
   ========================================================================== */
.linkArrow .btnLink {
    position: relative;
    margin-top: 40px;
}

.linkArrow .com-content-article__link {
    position: relative;
}

.linkArrow .btnLink:before,
.linkArrow .com-content-article__link:before {
    content: "";
    background-image: url(../images/icons/arrow.svg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 30px;
    width: 36px;
    position: absolute;
    top: -10px;
}

.linkArrow .btnLink a,
.linkArrow .com-content-article__link a {
    padding-left: 50px;
    color: var(--color-secondary) !important;
    text-decoration: none !important;
}


/* ==========================================================================
   EIGENE FELDER
   ========================================================================== */

/*Allgemein*/
.fields-container {
    list-style: none;
    padding: 0px;
}

.wrapperFieldsAfter {
    padding: 40px 0px;
}

/*Button Rot*/

.field-entry.button {
    float: right;
    margin-top: -150px;
}

.field-entry.button a,
.field-entry.button a:hover,
.field-entry.button a:focus,
.field-entry.button a:active {
    text-decoration: none !important;
}

.wrapperButton {
    display: flex;
    align-items: center;
    background-color: var(--color-secondary);
    width: 250px;
    height: 250px;
    padding: 50px;
    color: var(--white);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.buttonInner {
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1.5rem;
    text-align: center;
}

/*Ansprechperson*/

.wrapperPerson {
    display: flex;
}

.team .wrapperPerson:nth-child(even) {
    margin-left: 30%;
}

.team .wrapperPerson {
    margin: 80px 0px;
}

.team .wrapperPerson:first-child {
    margin-top: 0px;
}

.team .wrapperPerson .contentWrapper,
.team .wrapperPerson .contentInner {
    width: 100%;
}

.pictureInner,
.contentWrapper {
    float: left;
}

.pictureInner img {
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.contentWrapper {
    display: flex;
    align-items: center;
}

.contentInner {
    padding: 0px 40px;
}

.nameInner {
    margin-top: 20px;
    color: var(--color-secondary);
    font-weight: 700;
}

.mailInner {
    margin-top: 20px;
}

.mailInner svg {
    width: 25px;
    height: 25px;
}

/*Broschüre Liste*/

.downloads {
    column-count: 2;
}

.downloads .listTitle {
    font-size: 0.85rem;
    text-transform: uppercase;
}

.downloads .listRow a {
    text-decoration: none !important;
}

.downloads .listRowInner {
    display: inline-block;
    min-width: 50%;
    padding: 5px 0px;
}

.downloads .listIcon {
    float: right;
}

.downloads .listIcon svg {
    width: 25px;
    height: 25px;
}

.downloads h4 {
    column-span: all;
}


/* ==========================================================================
   FORMULAR
   ========================================================================== */

#userForm .form-control {
    max-width: 100%;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -ms-border-radius: 0px;
    -o-border-radius: 0px;
}

.rsform-submit-button {
    background-color: var(--color-secondary) !important;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -ms-border-radius: 0px;
    -o-border-radius: 0px;
    border: 0px;
}

.formControls select {
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -ms-border-radius: 0px;
    -o-border-radius: 0px;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

#t4-footnav {}

#t4-footnav .t4-section-inner {}

#t4-footnav {
    font-size: 0.95rem;
    color: var(--white);
}

#t4-footnav {
    padding: 0px;
}

#t4-footnav .t4-section-inner {
    padding-top: 0px;
    padding-bottom: 7rem;
}

/* Social Media */

#Mod135 .custom a {
    float: right;
}

#Mod135 .uk-icon-button {
    background-color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

#Mod135 .uk-icon-button svg {
    width: 25px;
    height: 25px;
}

/* ==========================================================================
   RESPONSIVE DEFINITIONEN
   ========================================================================== */

@media (min-width: 1200px) {

    .wrapperContent,
    .wrapperFieldsAfter {
        padding-right: 30%;
    }

    .team .wrapperContent,
    .team .wrapperFieldsAfter {
        padding-right: 0px;
    }

}


/* Large devices (large desktops, 1200px and up) */

@media (min-width: 1200px) and (max-width: 1599px) {

    .nav-item.arrow {
        padding-left: 80px;
    }

    #t4-header:after {
        width: 100px;
        height: 125px;
        right: 3px;
    }

}

/* Medium devices (desktops, 992px and up) */

@media (min-width: 992px) and (max-width: 1199px) {

    :root {
        --body-font-size: 19px;
        --h1-font-size: 2rem;
        --h2-font-size: 2rem;
        --h3-font-size: 1.5rem;
        --lead-font-size: 1.5rem;
    }

    .nav-item a {
        font-size: 1rem !important;
        padding: 25px 20px !important;
    }

    .nav-item.arrow {
        padding-left: 30px;
    }

    #t4-header:after {
        width: 100px;
        height: 125px;
        top: 130px;
        right: 5px;
    }

}


/* Small devices (tablets, 768px and up) */

@media (min-width: 768px) and (max-width: 991px) {

    :root {
        --body-font-size: 18px;
        --h1-font-size: 2rem;
        --h2-font-size: 2rem;
        --h3-font-size: 1.25rem;
        --lead-font-size: 1.25rem;
    }

    .t4-wrapper {
        background: url(../images/brush-01.png) -150px 0% no-repeat, url(../images/brush-02.png) 100px 50% no-repeat;
        background-size: 100%;
    }

    #t4-main-body {
        padding-top: 125px;
    }

    .field-entry.button {
        margin-top: -170px;
    }

    .wrapperButton {
        width: 150px;
        height: 150px;
        padding: 20px;
    }

    .buttonInner {
        font-size: 0.85rem;
        line-height: 1.25rem;
    }

    .downloads .listRowInner {
        min-width: 75%;
    }

    #t4-header:after {
        width: 80px;
        height: 105px;
        top: 108px;
        right: 5px;
    }

}


/* Extra Small devices (phones, 768px and down) */

@media (max-width: 767px) {

    :root {
        --body-font-size: 17px;
        --h1-font-size: 1.5rem;
        --h2-font-size: 1.5rem;
        --h3-font-size: 1.1rem;
        --lead-font-size: 1.1rem;
    }

    .t4-wrapper {
        background: url(../images/brush-01.png) -150px 0% no-repeat, url(../images/brush-02.png) 100px 50% no-repeat;
        background-size: 100%;
    }

    #t4-main-body {
        padding-top: 125px;
    }

    .t4-section {
        padding: 3rem 0px;
    }

    .wrapperPerson {
        display: inline-block;
    }

    .team .wrapperPerson:nth-child(even) {
        margin-left: 0px;
    }

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

    .field-entry.button {
        margin-top: -120px;
    }

    #Mod123 .field-entry.button {
        margin-top: -90px;
    }

    .firma .field-entry.button {
        margin-top: -20px;
    }

    .wrapperButton {
        width: 150px;
        height: 150px;
        padding: 20px;
    }

    .buttonInner {
        font-size: 0.85rem;
        line-height: 1.25rem;
    }

    .pictureInner {
        padding: 0px 50px 50px 50px;
    }

    .contentInner {
        padding: 0px;
    }

    .t4-section.t4-spotlight-1 {
        padding: 5rem 0px 2rem 0px;
    }

    .downloads .listRowInner {
        min-width: 90%;
    }

    .t4-spotlight-7 .uk-scope .uk-text-center {
        background-position-x: center !important;
        height: 300px !important;
    }

    .downloads {
        column-count: 1;
    }

    .adress,
    .number {
        float: none;
    }

    .number {
        margin-top: 0px;
    }

    .nav-item a {
        padding: 15px 0px !important;
        width: 100%;
        text-align: center;
    }

    #t4-header:after {
        width: 60px;
        height: 75px;
        top: 105px;
        right: 5px;
    }
}

@media (max-width: 576px) {
    #Mod135 .custom a {
        float: left;
    }
}



/* Extra Small devices (phones, 768px and down) */

@media screen and (orientation: landscape) and (max-width: 767px) {}

/* ==========================================================================
    CSS-HACKS: Internet Explorer 8 + IE9, IE10, IE11
    ========================================================================== */

@media (pointer:coarse) {}




/* ==========================================================================
    CSS-HACKS: Internet Explorer 8 + IE9, IE10, IE11
    ========================================================================== */

@media screen\0 {}