@font-face {
    font-family: 'NeuzeitGroteskW01-Regular';
    src: url('/static/fonts/NeuzeitGroteskW01-Regular.woff2');
    font-display: swap;
}

@font-face {
    font-family: 'NeuzeitGroW01-Bold';
    src: url('/static/fonts/NeuzeitGroW01-Bold.woff2');
    font-display: swap;
}

@font-face {
    font-family: 'NeuzeitGroLigW01-Regular';
    src: url('/static/fonts/NeuzeitGroLigW01-Regular.woff2');
    font-display: swap;
}

.cms-toolbar-expanded .nav-wrapper,
.cms-toolbar-expanded .offcanvas {
    top: 46px !important;
}

.cms-toolbar-expanded .carousel-item > img {
	margin-top: -46px !important;
}

.cms-toolbar-expanded #sidebar-wrapper {
    top:116px;    
}

html {
    scroll-behavior: smooth;    
}

body {
    display: flex;
    flex-flow: column
}

.btn.btn-lg,
body,
h3>div,
html {
    font-size: 20px
}

#logo-halb,
hr.small {
    max-width: 100px
}

hr.small {
    margin: 20px auto;
    opacity: 1;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right,
.carousel-fade .carousel-inner .item,
.fade-in {
    opacity: 0
}

#referenz {
    text-align: center
}

body,
html {
    width: 100%;
    height: 100%;
    background: #fff
}

.aside.footer {
    margin-top: auto;
    padding: 25px 0;
    background: #375072;
}

.link {
    color:#fff;
}

#artikel a,
#unternehmen p:first-of-type,
.aside .text-left a,
.btn,
.subtitle,
.title,
.toptitle,
b,
footer p,
footer a,
h1,
h2,
h3,
h4,
.content strong {
    font-family: 'NeuzeitGroteskW01-Regular';
}

.title,
.title p {
    font-family: 'NeuzeitGroW01-Bold';    
}

.btn.btn-lg {
    text-transform: none
}

a {
    color: #333;
    text-decoration: underline
}

#artikel a,
#kunden a,
.breadcrumb li a,
.kompetenz a,
.referenzen a,
.sidebar-nav li a:active,
.sidebar-nav li a:focus,
li a {
    text-decoration: none
}

.breadcrumb>li+li:before {
    padding: 0 10px;
    color: #ccc;
    content: "/";
}

.team h3 a:hover,
a:focus,
a:hover {
    color: #a8d3ec;
    text-decoration: none;
    outline: 0
}

h1 {
    font-size: 2rem
}

h2 {
    font-size: 1.4rem
}

h3 {
    font-size: 1.1rem
}

.well h3,
h1:first-child,
h2:first-child {
    margin-top: 0
}

.form-group label.control-label,
div,
li,
p {    
    font-family: 'NeuzeitGroLigW01-Regular';
}

.breadcrumb li,
.meta-footer,
.referenzen h3,
.services li,
nav li {
    margin-bottom: 0
}

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

::focus {
    outline: 0 !important
}

.btn.btn-fab.btn-info {
    background-color: #375072;
    color: #fff
}

.btn.btn-fab.btn-apps {
    background-color: #f93;
    color: #fff
}

.btn.btn-fab.btn-ref {
    background-color: #f5f5f5;
    color: #333
}

.btn-info,
.btn-ref {
    display:none;
}

.gallery-image .btn-info {
    display:block;
}

.btn.btn-fab:focus,
.btn.btn-fab:hover {
    background-color: #a8d3ec !important;
    outline: 0
}

#referenz,
.gallery-image-wrapper.app .btn,
.gallery-image-wrapper.web>div {
    background-color: #375072
}

#sidebar-wrapper {
    top: 70px;
    z-index: 1000;
    position: fixed;
    right: 0;
    width: 250px;
    height: 100%;
    margin-right: -250px;
    overflow-y: auto;
    background: #222;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -ms-transition: .4s;
    -o-transition: .4s;
    transition: .4s
}

.sidebar-nav {
    position: absolute;
    top: 0;
    width: 250px;
    margin: 0;
    padding: 0;
    list-style: none
}

.sidebar-nav li {
    text-indent: 20px;
    line-height: 40px
}

.sidebar-nav li.divider p {
    border-top: 1px solid #fff;
    padding-top: 5px;
    color: #fff;
    font-style: italic;
    margin: 0
}

.sidebar-nav li.divider {
    text-indent: 0;
    padding: 15px 15px 0;
    text-align: center;
    line-height: 35px
}

.sidebar-nav li:first-of-type {
    margin-top: 15px
}

.sidebar-nav li a {
    display: block;
    text-decoration: none;
    color: #dfe3e5
}

.sidebar-nav li a:hover {
    text-decoration: none;
    color: #fff;
    background: rgba(255, 255, 255, .2)
}

.sidebar-nav>.sidebar-brand {
    height: 55px;
    font-size: 18px;
    line-height: 55px
}

.sidebar-nav>.sidebar-brand a {
    color: #999
}

.sidebar-nav>.sidebar-brand a:hover {
    color: #fff;
    background: 0 0
}

#menu-toggle {
    z-index: 1;
    position: absolute;
    top: 0;
    right: 0
}

#sidebar-wrapper.active {
    right: 250px;
    width: 250px;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -ms-transition: .4s;
    -o-transition: .4s;
    transition: .4s
}

.toggle {
    margin: 11px 5px
}

.header {
    display: table;
    position: relative;
    width: 100%;
    height: 100%;
    background: url(../img/bg.jpg) center center/cover no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover
}

#kunden,
.services {
    background: #f5f5f5
}

.about,
.referenzen,
.services,
.team,
footer {
    padding: 40px 0;
}

.kompetenz {
    padding: 70px 0
}

.referenzen a .material-icons {
    margin-top: -4px
}

.referenzen a > .mb-3 {
    aspect-ratio: 1/.77;
    position: relative;
}
    
.referenzen a > .mb-3::before {
    content: '\f110';
    font-family: var(--fa-style-family, "Font Awesome 6 Free");
    font-weight: var(--fa-style, 900);
    top: 50%;
    left: 50%;
    position: absolute;
    animation-name: fa-spin;
    animation-delay: var(--fa-animation-delay, 0s);
    animation-direction: var(--fa-animation-direction, normal);
    animation-duration: var(--fa-animation-duration, 2s);
    animation-iteration-count: var(--fa-animation-iteration-count, infinite);
    animation-timing-function: var(--fa-animation-timing, linear);
    margin-left: -10px;
    margin-top: -10px;
}

.referenzen a > .mb-3 > img {
    z-index:1;
    position: absolute;
}

.team {
    color: #fff;
    background: #375072
}

.team h3 {
    margin: 0;
}

.popover-content a,
.team h3 a {
    color: #fff
}

h3>div {
    margin-top: 3px
}

h3>div+div {
    margin-top: 12px
}

#artikel .well,
.gallery-image-wrapper,
.portfolio-item,
.service-item,
.team .col-sm-3 {
    margin-bottom: 30px
}

.portfolio {
    padding: 70px 0 50px
}

.img-portfolio {
    margin: 0 auto
}

.img-portfolio:hover {
    opacity: .8
}

.call-to-action {
    padding: 50px 0
}

.call-to-action .btn {
    margin: 10px
}

.footer-address {
    margin: 20px 0
}

.carousel-fade .item {
    height: calc(100vh - 70px)
}

.carousel-fade .carousel-inner .item {
    -webkit-transition-property: opacity;
    transition-property: opacity
}

.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    opacity: 1
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right,
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev {
    left: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.carousel-fade .carousel-control {
    z-index: 2
}

.testimonial .carousel-caption {
    text-align:left;
    color:inherit;
    right: 0;
    left: 0;
    position: relative;
}

.testimonial .carousel-control-next,
.testimonial .carousel-control-prev {
    color:#333;
    position: relative;
    width: auto;
}

.testimonial .carousel-control-next:focus, 
.testimonial .carousel-control-next:hover, 
.testimonial .carousel-control-prev:focus, 
.testimonial .carousel-control-prev:hover {
     color:#a8d3ec;
}

.nav-wrapper {
    position: fixed;
    left: 0;
    top: 0;
    height: 70px;
    width: 100%;
    z-index: 100;
    background: #fff
}

#referenz,
#referenz img,
.aside,
.gallery-image,
.video-carousel {
    position: relative;
}

.aside,
.keyvisual {
    background-image: url(/static/img/kompetenz.jpg)
}

.aside,
.gallery-image,
.keyvisual {
    background-position: center;
    background-size: cover
}

.nav-wrapper.active {
    box-shadow: 0 1px 6px rgba(0, 0, 0, .35)
}

.gallery-image {
    background-repeat: no-repeat;
    width: 100%;
    float: left;
    padding: 15px;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12)
}

.gallery-image::after {
    margin-top: 50%;
    content: '';
    display: block
}

#team .gallery-image::after {
    margin-top: 100%
}

.gallery-image-wrapper.app>div,
.gallery-image-wrapper.web .btn {
    background-color: #f93
}

.gallery-image-wrapper.app .btn,
.gallery-image-wrapper.web .btn {
    background-color: #fff
}

.gallery-image-wrapper.web .material-icons {
    color: #375072
}

.gallery-image-wrapper.app .material-icons {
    color: #f93
}

.gallery-image-wrapper .btn {
    position: absolute;
    right: 15px;
    bottom: 15px
}

.keyvisual::after,
header.apps .video-wrapper::after,
header.web .video-wrapper::after {
    content: '';
    display: block;
    top: 0;
    bottom: 0;
    width: 100%;
    opacity: .8
}

.gallery-image h3 {
    color: #fff;
    margin-top: 0
}

.aside a,
.gallery-image h3 a {
    color: #fff;
    text-decoration: none
}

.aside a:hover,
.gallery-image h3 a:hover {
    color: #a8d3ec
}

#logo-halb {
    transform: translateY(70px);
    margin-top: -250px;
    margin-left: -2px
}

#logo-halb img {
    height: 250px
}

.aside {
    color: #fff;
}

.aside::after {
    margin-top: 25%;
    content: '';
    display: block
}

.aside.referenz::after {
    margin-top: 30%
}

.aside.footer::after,
.vjs-control-bar {
    display: none
}

#kunden img,
#referenz img,
.col-centered {
    display: inline-block
}

#artikel {
    padding-bottom: 50px
}

.gray {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%)
}

.gray:hover {
    filter: grayscale(0);
    -webkit-filter: grayscale(0);
    -moz-filter: grayscale(0);
    -ms-filter: grayscale(0);
    -o-filter: grayscale(0);
    transition: .15s ease-in-out;
    -moz-transition: .15s ease-in-out;
    -webkit-transition: .15s ease-in-out;
    -o-transition: .15s ease-in-out
}

.form-group label.control-label {
    font-size: 16px;
    color: #888;
    margin-top: 15px
}

#artikel label {
    color: #333;
    font-size: 1rem
}

#referenz {
    padding: 40px 0;
}

#referenz,
#header.web,
#header.apps {
    margin-top:70px;
}

#referenz img {
    width: 85vh;
    max-width: 85%
}

blockquote {
    margin: 30px 0 0;
    font-size: 1rem;
    border-left: 5px solid #eee;
    padding: 10px 20px;
}

blockquote ol:last-child, blockquote p:last-child, blockquote ul:last-child {
    margin-bottom:0;
}

.form-group,
.referenzen blockquote {
    margin: 0
}

#kunden blockquote {
    text-align: left
}

.popover-content {
    font-size: 16px;
    color: #fff;
    line-height: 1rem
}

header.web .video-wrapper::after {
    background: #375072;
    position: absolute
}

header.apps .video-wrapper::after {
    background: #f93;
    position: absolute
}

.keyvisual::after {
    position: absolute
}

.web .keyvisual::after {
    background: #375072
}

.apps .keyvisual::after {
    background: #f93
}

.keyvisual {
    padding: 100px 0 30%
}

@keyframes fadeIn {
    to {
        opacity: 1
    }

}

.fade-in {
    animation: .5s ease-in forwards fadeIn
}

.is-paused {
    animation-play-state: paused
}

.element {
    position: absolute;
    left: 15px;
    right: 15px
}

#portfolio p {
    color: #fff;    
}

.breadcrumb {
    background: 0 0;
    padding: 0;
    margin-bottom: 15px
}

.form-group .help-block {
    font-size: 16px
}

.referenzen .carousel-style-testimonials {
    margin: 0 0 60px;
    min-height: 150px
}

.screencast {
    background: url(../img/screen.png) 50% 0/contain no-repeat;
    padding: 10px 10px 0;
    height: 345px;
    margin: 40px 0
}

.screencast video {
    max-width: 100%
}

.nav-wrapper img {
    padding: 7px 0 7px 10px
}

.col-centered {
    float: none;
    text-align: left;
    margin-right: -4px
}

#kunden img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    max-height: 100px
}

#kunden .col-sm-3 {
    margin-top: 15px;
    padding: 15px;
}

#kunden .carousel-inner.testimonials,
#kunden .carousel-style-testimonials,
#kunden .item.testimonial {
    height: auto
}

#kunden .carousel-style-testimonials {
    margin-top: 20px;
}

.modal-body .arrow {
    color: #fff;
    top: 20px;
    position: fixed;
    cursor: pointer
}

.modal-body .arrow-right {
    right: 16px
}

.modal-body .arrow-left {
    left: 16px
}

.modal-body .modal-image {
    margin-top: 50px
}

.modal-content,
.modal-footer {
    background: 0 0;
    border: none;
    box-shadow: none;
    text-align: center;
    margin: 0;
    padding-top: 0
}

#gallery-modal .modal-dialog {
    width: 60%
}

.modal-backdrop.in {
    background: rgba(0, 0, 0, .8);
    opacity: 1
}

@media (min-width: 768px) {                
    .footer-address,
    .meta-footer {
        text-align: right
    }

    #kunden .col-sm-3 {
        margin-top: 30px;
        padding: 25px;
    }

    .nav-wrapper img {
        padding: 7px 0 7px 50px
    }

    .about,
    .services,
    .team,
    .referenzen,
    footer {
        padding: 70px 0
    }

    .team {
        padding: 575px 0 80px;
        position: relative
    }

    .team .triangle-up-left {
        background-image: url(/filer/canonical/1761724252/16/);
        padding-bottom: 425px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center 60%;
    }

    .triangle-down-right,
    .triangle-up-left {
        width: 100%;
        padding-top: 75px;
        overflow: hidden;
        position: absolute;
        height: 0
    }
    
    footer.kontakt {
        padding-top: 40vw;
        position: relative
    }

    footer.kontakt .triangle-up-left {
        background-image: url(/filer/canonical/1761723281/11/);
        padding-bottom: 30vw;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

    .triangle-down-right {
        bottom: 0
    }

    .triangle-down-right:after {
        content: "";
        display: block;
        width: 0;
        height: 0;
        margin-top: -75px;
        border-top: 75px solid transparent;
        border-right: 100vw solid #fff
    }

    .triangle-up-left {
        top: 0
    }

    .triangle-up-left:after {
        content: "";
        display: block;
        width: 0;
        height: 0;
        margin-top: -75px;
        border-bottom: 75px solid transparent;
        border-left: 100vw solid #fff;
    }
    
    .team .triangle-up-left:after {
        border-left: 100vw solid #f5f5f5;
    }

    .team .col-sm-3 {
        margin-bottom: 0
    }

    .footer-address {
        margin: 0
    }

    .gallery-image::after {
        margin-top: 75%
    }

    .form-group {
        margin: 28px 0 0
    }

    .margin-top-50 {
        margin-top: 50px
    }

    h1 {
        font-size: 3rem
    }

    h2 {
        font-size: 1.6rem
    }

    h3 {
        font-size: 24px
    }

    h4 {
        font-size: 20px
    }

    #artikel label,
    #portfolio label,
    blockquote {
        font-size: .9rem
    }
    
    blockquote {
        margin-left: 20px;
    }

    .screencast {
        padding: 10px 160px 0
    }

}


@media (min-width: 991px) {   
    .btn-ref,
    .btn-info {
        display:block;
    }
}