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

/*Colors
Orange: #ED7F0D
Hellgrau: #F8F9FA
Blau: #006388
*/

html { font-size: 25px; }
body { line-height: 1.4em; color: #006388; font-family: proxima-nova, sans-serif; }

@media(max-width: 1400px) {
    html { font-size: 20px; }
}

@media(max-width: 768px) {
    html { font-size: 18px; }
}

@media(max-width: 450px) {
    html { font-size: 16px; }
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-weight: 800; color: #006388; line-height: 1.2em; }

h1, .h1 { font-size: 3rem; }
h2, .h2 { font-size: 2rem; }
h3, .h3 { font-size: 2rem; }
h4, .h4 { font-size: 1.4rem; }
h5, .h5 { font-size: 1.4rem; }
h6, .h6 { font-size: 1.4rem; }

@media(max-width: 768px) {
    h1, .h1 { font-size: 2rem; }
    h2, .h2 { font-size: 1.7rem; }
    h3, .h3 { font-size: 1.7rem; }
    h4, .h4 { font-size: 1.3rem; }
    h5, .h5 { font-size: 1.3rem; }
    h6, .h6 { font-size: 1.3rem; }
}

.page { width: 100vw; overflow-x: hidden; }

.section { position: relative; padding: 0 5vw;  }
.section .container-fluid { position: relative; max-width: 1600px; margin-left: auto; margin-right: auto; }

.logo-main { height: 80px; width: auto;}

#section-container { background-image: linear-gradient(#FFFFFF 40%, #F8F9FA 90%); }

@media(max-width: 768px) {
    .section { padding: 2vw; }
}

@media(max-width: 576px) {
    .logo-main { width: 60%; height: auto; }
}

/*nav*/
nav { display: inline-block; }
nav a { color: #FFFFFF; text-transform: uppercase; font-weight: 700; display: inline-block; position: relative; margin-left: 2vw; white-space: nowrap; }
nav a:after { content: ' '; position: absolute; height: 2px; width: 0; bottom: -2px; z-index: 1000; left: 0; transition: width 0.2s linear; background-color: rgba(255, 255, 255, 0.5); }
nav a:hover { text-decoration: none; color: #fff; }
nav a:hover:after { width: 100%; }
nav a:first-of-type { margin-left: 0; }


/*lists*/
ul { margin: 0; padding-left: 1em; }
ul li {  margin-bottom: 1rem; }

/*general*/
.box-shadow {
    -webkit-box-shadow: 1px 1px 2px 0px rgba(156, 154, 156, .8);
    -moz-box-shadow: 1px 1px 3px 0px rgba(156, 154, 156, .8);
    box-shadow: 1px 1px 3px 0px rgba(156, 154, 156, .8); }
}

/*colors*/
.text-color-orange { color: #ED7F0D; }
.text-color-blue { color: #006388 !important; }
.text-color-white { color: #FFFFFF; }

.bg-color-orange { background-color: #ED7F0D; }
.bg-color-blue { background-color: #006388; }
.bg-color-white { background-color: #FFFFFF; }

a.text-color-orange:hover { color: #ED7F0D; }
a.text-color-blue:hover { color: #006388; }
a.text-color-white:hover { color: #FFFFFF; }

/*sections*/
#section-hero { background-image: linear-gradient(#00A5E2, #003C52); min-height: 100vh; padding-bottom: 30vw !important; }
    #section-hero .hero-headline { margin-top: 7vw; }
    #section-hero .illustration-office { position: absolute; width: 110vw; bottom: -70vw; right: -35vw; }

@media(max-width: 768px) {
    #section-hero { min-height: 0; padding-bottom: 50vw !important;  }
    #section-hero .illustration-office { width: 130vw; bottom: -90vw; right: -45vw; }
}

#section-how { padding-top: 20vw !important; }

#section-service { background: url(../images/illustration-cloud.svg) -3vw 20vw no-repeat; background-size: 20vw auto; }
    .service-item { border-radius: 3rem; position: relative; color: #FFFFFF; margin-top: 2rem; cursor: pointer; transition: opacity .4s ease-out; }
    .service-item:hover { opacity: .9; }
    .service-item .service-icon { display: inline-block; color: #ED7F0D; z-index: 100; margin-top: -2rem; font-size: 2rem; line-height: 1em; position: relative; padding: .65em .65em; border-radius: 100%; background-color: #FFF;
        -webkit-box-shadow: 1px 1px 2px 0px rgba(0,0,0,.4);
        -moz-box-shadow: 1px 1px 3px 0px rgba(0,0,0,.4);
        box-shadow: 1px 1px 3px 0px rgba(0,0,0,.4);
    }
    .service-item .content { padding: 1.5rem; margin-top: 1rem; margin-bottom: 2rem; }
    .service-item .headline { font-size: 1.6rem; font-weight: 800; line-height: 1.3em; -moz-hyphens: manual;
        -o-hyphens: manual;
        -webkit-hyphens: manual;
        -ms-hyphens: manual;
        hyphens: manual; }
    .service-item .info { display: none; }

    @media(max-width: 768px) {
        .service-item .headline { font-size: 1.3rem; }
    }

    @media(max-width: 576px) {
        #section-service { background-position: -3vw 0vw; background-size: 30vw auto; }
    }

#section-partner { background: url(../images/illustration-datacenter.svg) right -7vw top 3vw no-repeat; background-size: 45vw auto; min-height: 700px; }

@media(max-width: 992px) {
    #section-partner { background-position: right -10vw bottom 3vw; background-size: 60vw auto; padding-bottom: 50vw !important; min-height: 0px;  }
}

.logo-slider-container { position: relative; }
    .slider-logos { margin-top: 2rem; }
        .slider-logos li { height: 150px; position: relative; display: inline-block; }
        .slider-logos li .slide-inner { position: absolute; width: 100%; height: 100%; padding: 0 .75rem; text-align: center; display: flex; }
        .slider-logos .slide-inner img { max-width: 100%; max-height: 140px; margin: auto; padding: 20px; }

    .slick-arrow { width: 2rem; height: 2rem; top: auto; bottom: -3rem;  }
        .slick-arrow:before { color: #006388; font-family: 'Font Awesome 5 Pro'; content: '\f104'; font-size: 2rem; font-weight: 200; opacity: 1; }
    .slick-prev { left: 50%; margin-left: -2rem; }
        .slick-prev:before { content: '\f104'; }
    .slick-next { left: 50%; margin-right: -2rem; }
        .slick-next:before { content: '\f105'; }


#section-about { background: url(../images/torge-nissen-nissen-it.jpg) right top no-repeat; background-size: 65vw auto; padding-bottom: 20vw !important; }

@media(max-width: 992px) {
    #section-about { background-size: 80vw auto;  }
    #section-about .col-text { margin-top: 30vw; }
}

@media(max-width: 576px) {
    #section-about { background-size: 100vw auto;  }
    #section-about .col-text { margin-top: 40vw; }
}

#section-footer { }
    #section-footer .illustration-archive { position: absolute; width: 45vw; top: -20vw; left: -5vw; }
    .logo-footer { max-width: 200px; }

    .img-teamviewer { max-width: 200px; height: auto; }

@media(max-width: 576px) {
    #section-footer { padding-top: 45vw !important; }
}