/* --------------- Global = brand, backgrounds, doc, checkpoints, borders --------------- */
html,
body {
    margin: 0;
    padding: 0;
    font-weight: 400;
    scroll-behavior: smooth;
    color: #000;
    font-family: 'Roboto', sans-serif;
    font-display:swap;


}

* {
    box-sizing: border-box;
}

a {
    outline: none;
    color: #019CDF;
}

a:hover {
    color: #000000;
}

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

svg path {
    transition: all 400ms;
}

.text-left {
    text-align: left;
}

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

.text-right {
    text-align: right;
}

.justify-center {
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.no-decoration {
    text-decoration: none;
    color: white;
}

.bc-primary {
    color: #019CDF;
}

.bc-secondary {
    color: #067C92;
}

.black-bg,
.black-line,
.black-text {
    color: #000000;
}

.dark-bg,
.dark-line,
.dark-text {
    color: #3D3D3D;
}

.grey-bg,
.grey-line,
.grey-text {
    color: #EBEAEE;
}

.white-bg,
.white-line,
.white-text {
    color: #ffffff;
}

.gradient-text {
    color: #ffffff;
    background: linear-gradient(270deg, #067C92 0%, #019CDF 100%);
    background-clip: border-box;
    background-clip: border-box;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

.black-line {
    width: 140px;
    max-width: 100%;
    height: 3px;
    background: #000000;
    margin: 25px 0;
    border: none;
    float: none;
}

.blue-line {
    width: 140px;
    max-width: 100%;
    height: 3px;
    background: #019CDF;
    margin: 25px 0;
    border: none;
    float: none;
}

.white-line {
    width: 140px;
    max-width: 100%;
    height: 3px;
    background: #ffffff;
    margin: 25px 0;
    border: none;
    float: none;
}

.border-points ul {
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
}

.border-points ul li {
    list-style: none;
}

.border-points p {
    display: inline-block;
    border-bottom: 1px solid rgba(255, 255, 255, 0.7);
    margin: 0;
    padding: 20px 0;
    width: 93%;
}

.border-points li:first-child p {
    padding-top: 0;
}

.check-points ul {
    padding-left: 0;
}

.check-points li {
    list-style: none;
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
}

.check-points p {
    margin: 0;
    text-align: left;
}

.check-points .fa-check-circle {
    font-size: 32px;
    margin-right: 12px;
}

.nodecoration {
    text-decoration: none;
    color: #000000;
}

.borderRadius {
    border-radius: 10px;
}

/* ---------------  Import = font faces, font awesome --------------- */
.fab {
    font-family: "Font Awesome 5 Brands";
    font-weight: 400;
}

/* --------------- Layout = flex row, row, columns  --------------- */
section {
    width: 100%;
    padding: 70px 0;
}

.flex-page-template section .row {
    margin: 20px auto;
}

.row {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.row:before,
.row:after {
    content: "";
    display: table;
    clear: both;
}

.flex-page-template .row {
    display: flex;
    align-items: center;
}

.flex {
    display: flex;
}

.flex-start {
    display: flex;
    justify-content: flex-start;
}

.flex-end {
    display: flex;
    justify-content: flex-end;
}

.flex-row {
    display: flex;
    flex-wrap: wrap;
    position: relative;
}

[class*="col-"] {
    float: left;
    min-height: 1px;
    height: auto;
    padding: 0 10px;
    border: 0;
}

.col-1 {
    width: 8.33%;
}

.col-1-5 {
    width: 12.5%;
}

.col-2 {
    width: 16.66%;
}

.col-3 {
    width: 25%;
}

.col-4 {
    width: 33.33%;
}

.col-5 {
    width: 41.66%;
}

.col-6 {
    width: 50%;
}

.col-7 {
    width: 58.33%;
}

.col-8 {
    width: 66.66%;
}

.col-9 {
    width: 75%;
}

.col-10 {
    width: 83.33%;
}

.col-11 {
    width: 91.66%;
}

.col-12 {
    width: 100%;
}

.full-width {
    padding: 0;
    align-items: flex-start;
}

.full-width .col-12 {
    padding: 0;
}

.textBoxWhite {
    margin: 50px auto;
    width: 50%;
    background: #fff;
    height: 350px;
}

.partners-row {
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    align-items: flex-start !important;
    justify-content: center;
    padding: 10px 0;
}

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

/* --- About Us --- */
#wie-wir-das-machen {
    padding-top: 0;
}

#wie-wir-das-machen > div.row.section-heading > div > div > h3 {
    font-size: 28px;
}

/* --------------- Typography = headings, font sizes  --------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-style: inherit;
    font-family: 'Jura', sans-serif;
    font-weight: 700;
    color: #000000;
    word-break: break-word;
}

h1 {
    font-size: 30px;
    margin: 1% 0;
    line-height: 120%;
}

h2 {
    font-size: 28px;
    margin: 1% 0;
    line-height: 120%;
}

h3 {
    font-size: 24px;
    margin: 1% 0;
    line-height: 120%;
}

h4 {
    font-size: 22px;
    margin: 1% 0;
    line-height: 156%;
}

h5 {
    font-size: 20px;
    margin: 1% 0;
    line-height: 156%;
}

h6 {
    font-size: 18px;
    margin: 1% 0;
    line-height: 156%;
}

p,
li,
ul,
ol {
    font-size: 18px;
    line-height: 168%;
    font-weight: 300;
}

b,
strong {
    font-weight: 700
}

i,
italic {
    font-style: italic
}

o,
oblique {
    font-style: oblique
}

.montserrat {
    font-family: 'Montserrat', sans-serif;
}

/* --------------- Buttons  --------------- */
.btn {
    display: inline-block;
    padding: 10px 16px;
    margin: 16px 0 0 0;
    border-radius: 7px;
    box-sizing: border-box;
    text-decoration: none;
    font-family: inherit;
    font-weight: 700;
    font-size: 18px;
    color: #fff;
    background: linear-gradient(270deg, #067C92 0%, #019CDF 100%);
    text-align: center;
    transition: all 400ms;
    border: none;
}

.btn:hover {
    background: #000000;
    color: #ffffff;
    border: none;
    cursor: pointer;
}

.dark-btn {
    display: inline-block;
    padding: 10px 16px;
    margin: 16px 0 0 0;
    border-radius: 0px;
    box-sizing: border-box;
    text-decoration: none;
    font-family: inherit;
    font-weight: 600;
    color: #000000;
    background: #3d308b;
    text-align: center;
    transition: all 400ms;
    border: none;
    background-color: #000000;
    color: #ffffff;
}

.dark-btn:hover {
    background: #000000;
    color: #ffffff;
    border: none;
    cursor: pointer;
}

.white-btn {
    display: inline-block;
    padding: 10px 16px;
    margin: 16px 0 0 0;
    border-radius: 7px;
    box-sizing: border-box;
    text-decoration: none;
    font-family: inherit;
    font-weight: 700;
    font-size: 18px;
    color: #019CDF;
    text-align: center;
    transition: all 400ms;
    border: none;
    background-color: #ffffff;
    color: #019CDF;
}

.white-btn:hover {
    background: #000000;
    color: #ffffff;
    border: none;
    cursor: pointer;
}

/* --- Arrow  DOWN button with anchor tag  --- */
.oval-arrow-anchor-offset {
    transform: translateY(270%);
}

.custom-oval-arrow-anchor-offset {
    transform: translateY(360%);
}

.oval-arrow-anchor {
    display: none;
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 50%;
    -webkit-box-shadow: 0px 7px 15px 0px 94 94 94 / 50%);
    box-shadow: 0px 7px 15px 0px rgb(94 94 94 / 50%);
    background-color: #ffffff;
    align-items: center;
    justify-content: center;
    align-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    color: #019CDF;
}

.oval-arrow-anchor::after {
    content: "\003E";
    display: block;
    font-size: 40px;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    left: -2px;
    position: relative;
}

.oval-arrow-anchor:hover {
    background-color: #000000;
    color: #ffffff;
}

.oval-arrow-anchor a {
    text-decoration: none;
}

.anchor-link {
    color: #fff;
}

.achor-link:hover {
    color: #000;
}

/* --------------- Header = nav & header  --------------- */
.navbar .menu-icon {
    display: none;
}

.navbar {
    background-color: #ffffff;
    position: relative;
    width: 100%;
    z-index: 99;
    transition: top 400ms;
}

.navbar ul li a {
    color: #3D3D3D;
    font-size: 10px;
    font-weight: 700;
    font-family: 'Jura', sans-serif;
    text-decoration: none;
}

.navbar ul li a:hover {
    color: #019CDF;
}

.navbar .top-nav-social {
    color: #ffffff;
}

.navbar .top-nav-social a {
    padding: 0;
    text-decoration: none;
    color: #ffffff;
}

.hs-menu-children-wrapper {
    background-color: #ffffff;
}

.hs-menu-children-wrapper .hs-menu-item {
    background-color: #ffffff;
    cursor: pointer;
}

.child-trigger {
    cursor: pointer;
}

.nav-logo {
    padding-top: 10px;
}

.navbar .row {
    height: 82px;
    max-width: 1200px;
}

.navbar .row .col-4 img {
    padding: 7px 0 0 0;
}

.navbar .row .col-2 {
    height: 100%;
    display: flex;
    align-items: center;
    width: 180px;
    padding: 0 20px;
}

.navbar .row .col-10 {
    float: right;
    width: auto;
    padding: 15px 10px;
}

.navbar ul {
    margin: 0;
    padding: 0 0 0 0;
    list-style: none;
    width: 100%;
    text-align: right;
}

.navbar .hs-menu-children-wrapper {
    background: #ffffff;
}

.navbar .hs-menu-children-wrapper li {
    margin: 0 auto;
    display: block;
    background: #ffffff;
    padding: 5px 15px;
}

.navbar .hs-menu-children-wrapper li a {
    color: #3D3D3D;
}

.navbar li {
    display: inline-block;
    position: relative;
    padding: 0 8px;
    line-height: 130%;
}

.navbar .level-1 li {
    padding: 0 2px;
}

.navbar .top-nav {
    background: #019CDF;
    padding: 4px 0;
}

.navbar .top-nav .menu-list {
    width: auto;
}

.navbar .top-nav .col-12 {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 5px 10px;
}

.navbar .top-nav li {
    color: #fff;
    font-size: 14px;
}

.navbar .top-nav li a {
    color: #fff;
    font-size: 14px;
    font-weight: bold;
}

.navbar .top-nav li a:hover {
    color: #000000;
}

.navbar .top-nav .client-login {
    padding: 8px 20px;
    border-radius: 7px;
    transition: all 400ms;
    background: #EBEAEE;
    color: #000;
    font-weight: 700;
}

.navbar .top-nav .client-login:hover {
    background: #000000;
    color: #ffffff;
}

.navbar p {
    line-height: 16px;
}

.topnav-number.top-nav-social a i {
    color: #fff;
    transition: all 400ms;
    font-size: 18px;
    margin: 0 4px;
}

.topnav-number.top-nav-social a i:hover {
    color: #000000;
}

/* ---------------  Menu Icon --------------- */
.navbar .menu-icon {
    cursor: pointer;
    float: right;
    padding: 26px 15px;
    position: relative;
    user-select: none;
}

.navbar .menu-icon .navicon {
    background: #ffffff;
    display: block;
    height: 3px;
    position: relative;
    transition: background 0.2s ease-out;
    width: 24px;
}

.navbar .menu-icon .navicon:before,
.navbar .menu-icon .navicon:after {
    background: #ffffff;
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    transition: all 0.2s ease-out;
    width: 100%;
}

.navbar .menu-icon .navicon:before {
    top: 7px;
}

.navbar .menu-icon .navicon:after {
    top: -7px;
}

/* --- menu icon --- */
.navbar .menu-icon.active .navicon {
    background: transparent;
}

.navbar .menu-icon.active .navicon:before {
    transform: rotate(-45deg);
}

.navbar .menu-icon.active .navicon:after {
    transform: rotate(45deg);
}

.navbar .menu-icon.active .navicon:before,
.navbar .menu-icon.active .navicon:after {
    top: 0;
}

ul.hs-menu-children-wrapper {
    position: absolute;
    height: 0;
    overflow: hidden;
    text-align: left;
    width: auto;
    padding: 0 0 0 0;
}

.child-trigger {
    background-repeat: no-repeat;
    background-position: center !important;
    /* padding: 15px; */
    height: 20px;
    width: 12px;
    display: inline-block;
    vertical-align: bottom;
    margin: 0px 0px 0px 2px;
}

.hs-item-has-children {
    position: relative;
}

.hs-item-has-children .nav-arrow {
    position: absolute;
    transform: translate(-14px, 0);
    margin-top: 30px;
    right: 0;
}

.hs-item-has-children .nav-arrow::before,
.hs-item-has-children .nav-arrow::after {
    content: "";
    position: absolute;
    background-color: #000000;
    width: 2px;
    height: 10px;
}

.hs-item-has-children .nav-arrow::before {
    transform: translate(1px, 0) rotate(45deg);
}

.hs-item-has-children .nav-arrow::after {
    transform: translate(-5px, 0) rotate(-45deg);
}

/* --- submenu toggle code --- */
.hs-item-has-children .hs-menu-children-wrapper {
    list-style: none;
    height: 0;
    overflow: hidden;
}

.hs-item-has-children .sub-menu-show {
    width: auto;
    margin-top: 12px;
    border-radius: 3px;
    display: block;
    position: absolute;
    top: 40px;
    z-index: 3;
    min-width: 170px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.175);
    padding: 10px 0;
}

/* ------------------  hack/fix to stop js opening menu on desktop ------------------ */
.sub-menu-show {
    height: 0;
}

.hs-item-has-children:hover .hs-menu-children-wrapper {
    height: auto;
    width: auto;
    margin-top: 12px;
    border-radius: 3px;
    display: block;
    position: absolute;
    top: 37px;
    z-index: 1;
    min-width: 190px;
    padding: 10px 0;
}

.hs-item-has-children .sub-menu-show li a:hover {
    text-decoration: underline;
}

/* ------------------  submenu styles ------------------ */
.hs-menu-children-wrapper .menu-item .nav-link {
    color: #000000;
    padding: 10px 0;
}

.hs-menu-children-wrapper .menu-item a::after {
    border: 0;
}

.navbar .hs-menu-children-wrapper li {
    margin: 0 auto;
}

.top-nav .menu-list {
    text-align: right;
}

.top-nav .row {
    text-align: right;
    height: auto;
}

.top-nav .row ul {
    padding: 7px 0 6px 0;
}

.top-nav .row span {
    padding: 8px 0 6px 10px;
    font-size: 14px;
}

.level-1.menu-list li a {
    position: relative;
    z-index: 3;
    display: inline-block;
    padding: 15px 25px 15px 15px;
    font-size: 14px;
    border-left: 1px solid #019CDF;
}

.hs-menu-children-wrapper .hs-menu-item a {
    padding: 20px 10px 5px 10px !important;
    line-height: 150%;
    border-left: none !important;
}

.level-1.menu-list li a::after {
    content: "\003E";
    display: block;
    color: #3D3D3D;
    font-size: 16px;
    position: absolute;
    top: 31%;
    right: 0;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
}

.hs-menu-children-wrapper .hs-menu-item a::after {
    display: none !important;
}

/* ------------------  Child item menu fix ------------------  */
ul.hs-menu-children-wrapper.level-3.menu-list .hs-menu-item {
    Height: 30px !important;
}

li.hs-menu-item.hs-item-has-children {
    height: 136px;
}

ul.hs-menu-children-wrapper.level-3.menu-list {
    Padding: 0px;
    Margin: 0px;
    Height: 70%;
}

/* --------------- Footer = variations  --------------- */
footer {
    background: #019CDF;
    padding: 70px 0 60px 0;
}

/* --- Footer company name styling --- */
.company-name {
    text-align: center;
    padding: 10px 0;
    color: #ffffff !important;
    margin-top: 40px;
}

.company-name p {
    font-size: 12px;
}

footer .col-2 img {
    padding: 0;
    margin: 15px 0 10px 0;
}

footer .col-2 p {
    font-size: 16px;
    font-weight: bold;
}

footer .col-2 .dark-text {
    margin-bottom: 10px;
}

footer ul {
    list-style: none;
    padding-left: 0;
    min-height: 114px;
    margin-bottom: 20px;
}

footer ul li {
    line-height: 168%;
}

footer ul li a {
    font-size: 16px;
    text-decoration: underline;
    color: #ffffff;
}

footer ul li h5 a {
    font-size: 20px;
    text-decoration: underline;
    color: #ffffff;
}

footer ul li a:hover {
    color: #000000;
    text-decoration: underline;
}

footer p {
    margin: 0 0 0 0;
    color: #ffffff;
    font-size: 16px;
}

footer h5,
footer p,
footer ul li h5,
footer ul li h5 a,
footer ul li a {
    font-family: 'Montserrat', sans-serif;
    color: #fff;
}

footer .logo-row {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 50px auto;
}

footer .partners-row .col-8 img {
    max-width: 640px;
    width: 96%;
}

footer p a.dark-text:hover {
    text-decoration: underline;
}

.footer-hr-color {
    border: 1px solid #fff;
}

footer .social-links ul {
    min-height: auto;
}

footer .social-links {
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-bottom: 40px;
}

footer .social-links a .fab {
    font-size: 26px;
    padding: 0 10px;
}

/* --------------- Blog --------------- */
.blog-body .card-body h6 a {
    color: #019CDF;
    font-size: 24px;
    font-weight: 500;
    text-decoration: none;
}

.blog-body .card-body h6 a:hover {
    color: #000000;
    text-decoration: none;
}

.blog-body .card-body p {
    font-family: 'Jura', sans-serif;
}

.blog-body .card-body p.blog-date {
    font-family: 'Roboto', sans-serif;
    color: #999;
    font-weight: 400;
    font-size: 16px;
}

.blog-body .blog-pagination__link {
    padding: 10px 16px;
    margin: 16px 0 0 0;
    border-radius: 7px;
    box-sizing: border-box;
    text-decoration: none;
    font-family: inherit;
    font-weight: 700;
    font-size: 18px;
    color: #fff;
    background: linear-gradient(270deg, #067c92 0%, #019cdf 100%);
    text-align: center;
    transition: all 400ms;
    border: 0;
}

.blog-pagination__prev-link {
    margin-right: 5px !important;
}

.blog-body .blog-pagination__link:hover {
    color: #fff;
    background: #000;
}

.blog-body nav {
    margin-top: 40px;
    display: inline-block;
}

#blog-hero-section {
    padding: 6.5% 0 9.5% 0;
}

body section.main-blog-body {
    padding: 50px 0;
}

body section.main-blog-body section {
    padding: 0;
}

body section.main-blog-body .col-12 {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    float: none;
}

body section.main-blog-body h1 {
    font-size: 48px;
    margin-bottom: 30px;
    color: #009DE0;
}

section.main-blog-body article h2,
section.main-blog-body article h3,
section.main-blog-body article h4,
section.main-blog-body article h5,
section.main-blog-body article h6 {
    margin: 20px 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}

article h2::after,
article h3::after,
article h4::after {
    display: block;
    width: 140px;
    max-width: 100%;
    height: 3px;
    background: #019CDF;
    margin: 25px 0;
    border: none;
    float: none;
}

body section.main-blog-body .blog-feat-image {
    margin: 10px 0 30px 0;
}

body section.main-blog-body li {
    color: #009DE0;
    line-height: 168%;
    margin-bottom: 10px;
}

/* --------------- System Pages = 404, 500, Search Results ---------------*/
input#hs-pwd-widget-password {
    height: 40px !important;
}

/* --------------- Forms --------------- */
input,
textarea {
    display: inline-block;
    width: 100% !important;
    height: 40px;
    padding: 9px 10px;
    font-size: 18px;
    font-weight: 400;
    font-family: inherit;
    line-height: 20px;
    color: #000;
    border: 1px solid #000;
    box-sizing: border-box;
    border-radius: 5px !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: white;
    margin: 5px 0 20px;
}

textarea::-webkit-input-placeholder,
input::-webkit-input-placeholder {
    color: #000;
}

textarea::-moz-placeholder,
input::-moz-placeholder {
    color: #000;
}

textarea:-ms-input-placeholder,
input:-ms-input-placeholder {
    color: #000;
}

textarea:-moz-placeholder,
input:-moz-placeholder {
    color: #000;
}

input::marker,
li.hs-form-booleancheckbox::marker {
    display: none !important;
}

input.hs-button.primary.large {
    font-weight: bold;
    font-size: 18px;
    font-family: inherit;
    background: linear-gradient(270deg, #067C92 0%, #019CDF 100%);
    color: #ffffff;
    border-radius: 7px;
    border: none;
    padding: 8px 16px;
    max-width: 250px;
}

input.hs-button.primary.large:hover {
    background: #000;
    color: #fff;
    cursor: pointer;
}

fieldset {
    max-width: 100% !important;
}

label.hs-error-msg {
    color: red;
    font-size: 12px;
}

ul.no-list.hs-error-msgs.inputs-list {
    margin: 0 auto 40px;
    padding: 0;
}

.legal-consent-container p {
    color: #000;
    font-size: 12px;
    line-height: 14px;
}

.legal-consent-container .hs-form-booleancheckbox-display input {
    float: left;
    border: 1px solid #000;
    border-radius: 5px !important;
    height: auto;
    padding: 8px;
}

/* --- Contact page form styling --- */
.contact-card-styling-two {
    color: #009cdf;
    text-align: left;
    padding-left: 40px;
}

#tech-support-styling {
    margin-top: 60px;
}

.contact-form-styling .hs-input {
    border: none;
    border-radius: 0px !important;
    height: 60px;
}

div#contact-form-section .col-12 {
    background: #eeeeee;
    border-radius: 20px;
    padding: 50px 70px;
    width: 70%;
    text-align: center;
    position: relative;
    top: -190px;
}

.contact-form-styling fieldset.form-columns-1 input[type=checkbox] {
    width: auto !important;
}

div#contact-form-section .row {
    display: flex;
    justify-content: center;
}

.contact-form-styling .legal-consent-container p {
    margin: 0;
    display: inline;
    color: black;
    font-size: 16px;
}

div#contact-form-section {
    height: 750px;
}

.contact-form-styling input.hs-button.primary.large {
    background: #019cdf;
    margin: 30px auto;
}

.contact-form-styling .hbspt-form .hs-button.primary {
    max-width: 100%;
}

.contact-form-styling input::marker,
li.hs-form-booleancheckbox::marker {
    font-size: 0px !important;
}

section#tech-support-styling .col-4:not(:first-child) {
    border-left: 1px solid grey;
}

/* --------------- Full Width Images --------------- */
.hs-responsive-embed-inner-wrapper {
    height: 500px;
}

.fw-img-text-col {
    height: 500px;
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 7.5%;
    justify-content: center;
    background: #EBEAEE;
}

.fw-img-embed-col {
    width: 50%;
    overflow: hidden;
    height: 500px;
}

.fw-img-text-col {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 7.5%;
    justify-content: center;
}

/* --------------- Sliders --------------- */
.quote-name p {
    font-size: 24px;
    font-family: 'Jura', sans-serif;
    font-weight: 700;
}

.quote-body p {
    font-weight: 500;
}

.quote-btn-row {
    padding-bottom: 60px;
}

/* --- Services Slider  --- */
#services-slider .white-card {
    padding: 40px 20px;
    margin: 20px 22px !important;
    max-width: 351px;
}

#services-slider .splide__arrow--prev {
    left: -4em !important;
    width: 50px;
    height: 50px;
}

#services-slider .splide__arrow--next {
    right: -3em !important;
    width: 50px;
    height: 50px;
}

div#services-slider-track {
    width: 1185px !important
}

/* --------------- Heros --------------- */
.basic-hero {
    padding: 8% 0 8% 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.basic-hero h1,
.basic-hero h2,
.basic-hero h3,
.basic-hero h4,
.basic-hero h5,
.basic-hero h6 {
    margin: 0 0 0 0;
    color: #000;
    line-height: 163%;
}

.basic-hero h4,
.basic-hero h5 {
    padding: 20px 0 40px 0;
    font-weight: 400;
}

.basic-hero h6 {
    padding: 0px 0 40px 0;
    font-weight: 400;
}

.basic-hero .col-8 {
    width: auto;
    max-width: 96%;
    margin: 0 auto;
}

.one-column-hero {
    padding: 8% 0 8% 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.one-column-hero h1,
.one-column-hero h2,
.one-column-hero h3,
.one-column-hero h4,
.one-column-hero h5,
.one-column-hero h6,
.one-column-hero p {
    color: #fff;
}

.two-column-hero {
    padding: 8% 0 8% 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.two-column-hero h1,
.two-column-hero h2,
.two-column-hero h3,
.two-column-hero h4,
.two-column-hero h5,
.two-column-hero h6,
.two-column-hero p {
    color: #000;
}


/* --------------- Maps --------------- */
.hs-responsive-embed-inner-wrapper {
    height: 500px;
}

.map-fw-text-col {
    height: 500px;
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 7.5%;
    justify-content: center;
    background: #EBEAEE;
}

.map-embed-col {
    width: 50%;
    overflow: hidden;
    height: 500px;
}

.map-embed-col iframe {
    width: 100%;
    height: 500px;
}

.map-text-col {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 7.5%;
    justify-content: center;
}

/* --------------- Cards --------------- */
.flex-card {
    width: 31%;
    margin: 0 1% 2%;
    padding: 20px;
    text-align: center;
    background: #FAFAFA;
    box-shadow: 4px 4px 6px 4px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    border: none;
    -webkit-box-shadow: 0px 5px 20px -5px rgb(94 94 94 / 50%);
    box-shadow: 0px 5px 20px -5px rgba(94, 94, 94, 0.5);
}

.flex-card .flex-card-image {
    width: 100%;
    height: 120px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 8px;
    margin-bottom: 20px;
}

.flex-card .card-body h4 {
    margin-top: 0;
    min-height: 70px;
}

.flex-card .card-body h4 a {
    font-weight: 500;
    text-decoration: none;
}

.white-card {
    font-weight: bold;
    font-size: 18px;
    font-family: inherit;
    text-align: center;
    background: #FBFBFB;
    color: #000000;
    border-radius: 8px;
    border: none;
    -webkit-box-shadow: 0px 5px 20px -5px rgb(94 94 94 / 50%);
    box-shadow: 0px 5px 20px -5px rgba(94, 94, 94, 0.5);
    padding: 40px 20px;
}

.card-icon i {
    font-size: 64px;
    color: #019cdf;
    margin-bottom: 20px;
}

.home-grad-card {
    font-weight: bold;
    font-size: 18px;
    font-family: inherit;
    text-align: center;
    background: #FBFBFB;
    color: #000000;
    border-radius: 8px;
    border: none;
    -webkit-box-shadow: 0px 5px 20px -5px rgb(94 94 94 / 50%);
    box-shadow: 0px 5px 20px -5px rgba(94, 94, 94, 0.5);
    padding: 40px 20px;
    margin-bottom: 20px;
    min-height: 520px;
}

.white-card h4,
.home-grad-card h4 {
    color: #019CDF;
    font-size: 24px;
}

#home-grad-cards > div:nth-child(2) > div:nth-child(2) > div,
#home-grad-cards > div:nth-child(3) > div:nth-child(2) > div {
    background: linear-gradient(180deg, #FBFBFB 0%, #F5F5F5 100%);
}

#home-grad-cards > div:nth-child(2) > div:nth-child(3) > div,
#home-grad-cards > div:nth-child(3) > div:nth-child(3) > div {
    background: #FAFAFA;
}

/* --------------- Flex Override --------------- */
#company-benefits > div:nth-child(2),
section.blog-preview-section > div.row.flex-row.flex-card-center,
#three-cards-frankfurt > div:nth-child(2),
#three-cards-aschaffenburg > div:nth-child(2),
#three-cards-koblenz > div:nth-child(2),
#three-cards-karlsruhe > div:nth-child(2) {
    align-items: stretch;
}

/* --------------- Row Override --------------- */
#types-of-whitepaper .row.section-heading,
#types-of-whitepaper .row.section-cta {
    margin: 0px auto;
}

#types-of-whitepaper .row {
    margin: 60px auto;
}

/* --------------- Card Heights  --------------- */
#cyberwelt .white-card {
    min-height: 280px;
}

#cyberbedrohungen-schutzen .white-card {
    min-height: 295px;
}

#die-corona-krise .white-card {
    min-height: 310px;
}

#fill-the-gaps .white-card,
#career-benefits .white-card {
    min-height: 360px;
}

#sicher-ist-sicher .white-card {
    min-height: 400px;
}

#fill-the-gaps .white-card {
    min-height: 430px;
}

#nummer-sicher .white-card,
#sicher-ist-sicher .white-card {
    min-height: 470px;
}

#unser-cloud-ansatz .white-card,
#microsoft-paket .white-card,
#azure-microsoft-paket .white-card,
#der-unternehmensbooster .white-card {
    min-height: 500px;
}

#warum-it-outsourcing .white-card,
#vorteile-der-cloud .white-card,
#sie-cloud-backup .white-card,
#cloud-begehrt .white-card,
#azure-cloud-begehrt .white-card {
    min-height: 515px;
}

#cyberbedrohungen .white-card {
    min-height: 550px;
}

#auf-strategische .white-card {
    min-height: 560px;
}

#produktiv-effizient-flexibel .white-card {
    min-height: 570px;
}

#three-cards-frankfurt .white-card {
    min-height: 705px;
}

#three-cards-aschaffenburg .white-card {
    min-height: 775px;
}

#three-cards-koblenz .white-card {
    min-height: 770px;
}

#three-cards-karlsruhe .white-card {
    min-height: 715px;
}

/* --------------- Desktop Media Queries --------------------------------------------------------------------------- */

@media (min-width: 1116px) {
  nav.sticky {
    position: fixed;
    top: 0;
    width: 100%;
  }

  nav.sticky .top-nav {
    display: none;
  }

  nav.sticky li.hs-menu-item.hs-item-has-children {
    height: auto;
  }

  .row-number-1.sticky {
    padding-top: 143px;
  }
}

@media (max-width: 1360px) {
  /* -- Splide -- */
  #services-slider .splide__arrow--next {
    right: 1em !important;
  }

  #services-slider .splide__arrow--prev {
    left: 1em !important;
  }
}

/*  Applying to rows/navbar below 1220px */
@media (max-width: 1220px) {
  .row {
    padding-left: 20px;
    padding-right: 20px;
  }

  .navbar .row {
    padding-left: 0;
    padding-right: 0;
  }

  .navbar .row {
    max-width: 100%;
  }
}

@media (min-width: 1116px) {
  /* this is used to hide the drop down arrow on nav but then shows on mobile menu  */
  .child-trigger {
    display: none !important;
  }
}

/* --- Everything under large desktop screens --- */
@media (max-width: 1115px) {
  .level-1.menu-list li a::after {
    display: none;
  }
  
  .homepage .two-column-hero .col-6 {
    width: 96%;
  }

  .navbar img {
    margin: 16px 0;
    max-height 50px;
    max-width: 20%;
  }

  .navbar .site-menu-list {
    display: none;
    clear: both;
    max-height: 0;
    transition: max-height 0.2s ease-out;
  }

  .navbar .site-menu-list.active {
    max-height: none;
    display: block;
    text-align: center;
  }

  .navbar ul {
    flex-direction: column;
    background-color: #019cdf !important;
    height: auto;
    padding: 10px 0;
  }

  .navbar li {
    display: block;
  }

  .navbar li a {
    padding: 20px 30px;
  }

  .level-1.menu-list li a {
    padding: 10px 30px 10px 10px;
    font-size: 18px;
    color: #fff;
  }

  .navbar .row .col-8 {
    width: 100%;
    padding: 0;
    position: absolute;
    top: 80px;
    z-index: 10;
  }

  .navbar li {
    padding: 0 0 0 0;
  }

  .menu-item-has-children .sub-menu-show {
    height: auto;
    display: block;
    position: relative;
    width: 100%;
    top: 0;
    padding: 0 20px 20px 20px;
  }

  .child-trigger {
    display: inline-block !important;
  }

  .hs-item-has-children:hover .hs-menu-children-wrapper {
    height: 0;
  }

  li.hs-menu-item.hs-item-has-children {
    height: auto;
  }

  li.hs-menu-item a:hover .hs-menu-children-wrapper.level-2.menu-list.sub-menu-show {
    padding-top: 0;
  }

  .hs-menu-children-wrapper.level-2.menu-list.sub-menu-show {
    padding-top: 0;
  }

  .hs-item-has-children:hover .hs-menu-children-wrapper.sub-menu-show {
    height: 0;
    position: relative;
    top: initial;
    padding-top: 0;
    margin-top: 0;
  }

  .sub-menu .menu-item a.nav-link {
    color: #fff;
  }

  .navbar .inner-menu-container {
    display: none;
    clear: both;
    max-height: 0;
    transition: height 0.2s ease-out;
  }

  .navbar .inner-menu-container.active {
    max-height: none;
    display: block;
    text-align: center;
    width: 100%;
    height: auto;
  }

  .navbar .top-nav .col-12 .top-nav-social {
    margin-left: 0;
    margin-top: 0;
  }

  .navbar .top-nav .col-12 .top-nav-social a .fab {
    font-size: 20px;
    margin: 0 12px;
  }

  .acc-content,
  .acc-button {
    width: 96%;
  }

  .navbar .row .col-2.mobile-menu {
    width: 100%;
    padding: 7px !important;
  }

  .navbar .site-menu-list {
    display: none;
    clear: both;
    max-height: 0;
    transition: max-height 0.2s ease-out;
  }

  .navbar .site-menu-list.active {
    max-height: none;
    display: block;
    text-align: center;
  }

  .navbar .menu-icon {
    display: block;
    position: absolute;
    top: 0px;
    right: 0;
    background: #019cdf;
  }

  .navbar .menu-icon:hover {
    cursor: pointer;
  }

  .navbar ul {
    flex-direction: column;
    background-color: #000000;
    height: auto;
    text-align: left;
    padding-top: 0;
  }

  .navbar ul li a:hover {
    color: #5cafff;
  }

  .top-nav .row ul {
    padding: 0 0 0 0;
  }

  .navbar ul.hs-menu-children-wrapper {
    position: relative;
    margin: initial;
  }

  .hs-menu-children-wrapper.level-2.menu-list.sub-menu-show {
    padding-left: 10px;
    padding-bottom: 10px;
    z-index: 11;
  }

  .navbar .hs-menu-children-wrapper li {
    margin: 0 auto;
    border: none;
    background: transparent;
  }

  .navbar li {
    display: block;
  }

  .navbar li a {
    padding: 10px 20px;
    display: inline-block;
    vertical-align: middle;
  }

  .navbar .row .col-8 {
    width: 100%;
    padding: 0;
    position: absolute;
    top: 70px;
    z-index: 10;
  }

  .navbar li {
    padding: 0 0 0 0;
  }

  .hs-item-has-children .sub-menu-show {
    height: auto !important;
    display: block;
    position: relative;
    width: 100%;
    top: 0;
    padding: 10px 0;
    box-shadow: none;
  }

  .child-trigger {
    display: inline-block;
    vertical-align: middle;
  }

  .sub-menu .menu-item a.nav-link {
    color: #fff;
  }

  .navbar .inner-menu-container {
    display: none;
    clear: both;
    max-height: 0;
    transition: height 0.2s ease-out;
  }

  .navbar .inner-menu-container.active {
    max-height: none;
    display: flex;
    flex-direction: column-reverse;
    text-align: center;
    width: 100%;
    height: auto;
  }

  .navbar .row {
    height: auto;
  }

  .navbar .row .col-10 ul {
    padding-bottom: 0;
  }

  .navbar [class*="col-"] {
    width: 100%;
    padding: 0;
    float: none;
    margin: 0 auto;
    text-align: center;
  }

  .top-nav .menu-list {
    text-align: left;
  }

  .top-nav .menu-list li a {
    color: #ffffff;
  }

  .navbar .row {
    width: 100%;
    max-width: 100%;
    background-color: #000000;
  }

  .navbar .row .col-10 {
    width: 100%;
    margin: 0 0;
    background: #019cdf;
    padding: 30px 20px 30px;
  }

  .navbar .row .col-12 {
    align-items: flex-start;
  }

  .topnav .row .col-12 li a:hover {
    color: #ffffff;
  }

  .mobile-menu {
    display: block !important;
  }

  .desktop-menu {
    display: none !important;
  }

  .navbar .col-10 ul li:nth-of-type(8) {
    margin-top: 10px;
    margin-left: 10px;
  }

  .navbar .col-10 ul li:nth-of-type(8) a {
    padding: 0 0 0 0;
  }

  .navbar .hs-menu-children-wrapper li {
    padding: 3px 15px;
  }

  .hs-menu-children-wrapper .hs-menu-item a {
    padding: 15px 10px 5px 10px !important;
    line-height: 150%;
  }

  .navbar ul li a:hover {
    color: #000;
    text-decoration: none;
  }

  .navbar .sub-menu-show li a:hover {
    color: #000;
    text-decoration: none;
  }

  .navbar .top-nav ul li {
    padding: 0 2px;
  }

  .navbar .top-nav ul li a:hover {
    color: #000;
    text-decoration: none;
  }

  .hs-item-has-children:hover .hs-menu-children-wrapper {
    padding: 0px;
  }

  footer .row {
    text-align: center;
  }

  .navbar .top-nav {
    background: #019cdf;
  }

  .navbar .top-nav .client-login {
    margin: 10px 0 10px 16px;
  }

  .navbar .top-nav .col-12 {
    color: #ffffff;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background: #019cdf;
  }

  .navbar .top-nav .col-12 .top-nav-social {
    text-align: left;
    margin-left: 6px;
    margin-top: 5px;
  }

  .navbar .top-nav .col-12 .top-nav-social a {
    color: #ffffff;
    font-size: 14px;
  }

  .navbar .top-nav .col-12 .top-nav-social a .fab {
    font-size: 30px;
    margin: 12px;
    color: #ffffff;
  }

  .navbar .top-nav .col-12 .top-nav-social a:hover {
    color: #5cafff;
  }

  .top-nav .row span {
    padding: 7px 0 6px 22px;
  }

  footer .col-10 {
    margin: 0 auto;
    float: none;
  }

  footer .col-10 .col-2 {
    width: 50%;
  }

  footer .col-2 {
    width: 100%;
    text-align: center;
  }

  footer .col-2 img {
    padding: 15px;
    width: 180px;
  }

  .homepage .two-column-hero {
    background-image: url("") !important;
  }

  .homepage .two-column-hero .col-6 {
    width: 65%;
    margin: 20px auto 40px auto;
  }

  footer .col-10 .row .col-3 {
    width: 50%;
    float: left;
    text-align: center;
  }

  footer .partners-row {
    flex-direction: column;
  }

  footer .partners-row .col-8 img {
    margin-bottom: 40px;
  }

  footer .footer-menu-row {
    margin-top: 20px;
  }

  .flex-card {
    width: 45%;
    margin: 2%;
  }

  body .one-column-hero,
  body .two-column-hero,
  #blog-hero-section {
    padding: 170px 0 190px 0;
    background-position: right;
  }

  .homepage .two-column-hero {
    padding: 120px 0 80px 0;
    background-position: right;
  }

  /* --- Contact Page --- */
  div#contact-form-section .col-12 {
    width: 100%;
    top: 0;
  }  

  div#contact-form-section {
    height: auto;
    padding: 50px 10px;
  }
  #tech-support-styling {
    margin-top: 60px;
    padding-top: 0;
  }
}

/* ---------------  Card Heights Laptop > Tablet --------------- */
@media (max-width: 1230px) and (min-width: 993px) {
  #auf-strategische .white-card {
    min-height: 665px;
  }
  #produktiv-effizient-flexibel .white-card {
    min-height: 660px;
  }
  #cyberbedrohungen .white-card {
    min-height: 640px;
  }
  #vorteile-der-cloud .white-card {
    min-height: 635px;
  }
  #unser-cloud-ansatz .white-card {
    min-height: 620px;
  }
  #home-grad-cards .home-grad-card, #sie-cloud-backup .white-card {
    min-height: 610px;
  }
  #warum-it-outsourcing .white-card {
    min-height: 600px;
  }
  #microsoft-paket .white-card {
    min-height: 590px;
  }
  #nummer-sicher .white-card, #der-unternehmensbooster .white-card {
    min-height: 560px;
  }
  #topmedia-benefit-cards .home-grad-card {
    min-height: 555px;
  }
  #cloud-begehrt .white-card, #azure-cloud-begehrt .white-card {
    min-height: 540px;
  }
  #sicher-ist-sicher .white-card {
    min-height: 490px;
  } 
  #cyberwelt .white-card, #die-corona-krise .white-card {
    min-height: 335px;
  }
  #cyberbedrohungen-schutzen .white-card {
    min-height: 325px;
  }
  #three-cards-frankfurt .white-card {
    min-height: 895px;
  }
  #three-cards-aschaffenburg .white-card {
    min-height: 865px;
  }
  #three-cards-koblenz .white-card {
    min-height: 915px;
  }  
  #three-cards-karlsruhe .white-card {
    min-height: 900px;
  }
}

/* --------------- Tablet --------------- */
/* --- Everything under large device screens ---  */
@media (max-width: 992px) {
  img {
    max-width: 100%;
    display: block;
  }
  
  section {
    padding: 50px 0;
  }

  section.five-by-two-rt .row.partners-row {
    flex-direction: row;
  }

  .row.partners-row .col-2 {
    width: 33.33%;
  }

  .row.partners-row .row {
    margin: 0 auto;
  }  

  li,
  ul,
  ol {
    text-align: left;
  }

  footer li,
  ul,
  ol {
    text-align: inherit;
  }

  h1 {
    font-size: 36px;
    font-weight: 700;
  }

  h2 {
    font-size: 28px;
    font-weight: 700;
  }

  h3 {
    font-size: 24px;
    font-weight: 700;
  }

  h4 {
    font-size: 20px;
    font-weight: 700;
  }

  h5,
  h6 {
    font-size: 18px;
    font-weight: 400;
  }

  body section.main-blog-body {
    padding: 40px 0;
  }

  body section.main-blog-body h1 {
    font-size: 36px;
  }

  body section.main-blog-body ul li {
    text-align: left;
  }

  [class*="col-"] {
    width: 96%;
    padding: 0 10px;
    float: none;
    margin: 10px auto;
    text-align: center;
  }

  .row {
    padding-left: 0;
    padding-right: 0;
  }

  .flex-page-template section .row {
    margin: 0px auto;
    flex-direction: column;
  }

  .row .border-points {
    margin-top: 40px;
  }

  .mobHide, .oval-arrow-anchor {        
    display: none;
  }

  .map-text-col {
    text-align: center;
    align-items: center;
  }

  .blue-line,
  .black-line,
  .white-line {
    margin: 25px auto;
  }

  /* used to center align blog flex cards on mobile/ipad */
  .flex-card-center {
    justify-content: center;
  }

  .map-embed-col iframe,
  .white-card,
  .home-grad-card {
    min-height: auto !important;
  }

  .fw-img-embed-col,
  .fw-img-text-col {
    width: 100%;
  }

  .fw-img-embed-col {
    height: 300px;
  }

  .fw-img-text-col {
    height: auto;
    text-align: center;
    align-items: center;
    justify-content: center;
    padding: 7.5%
  }

  .fw-img-text-col .blue-line {
    margin: 25px 0;
  }

  #types-of-whitepaper > div:nth-child(3) {
    flex-direction: column-reverse;
  }

  #warum-wir-IT > div:nth-child(2) > div > div > div:nth-child(2) > h3, 
  #wie-wir-das-machen > div:nth-child(2) > div > div > div:nth-child(1) > h3 {
    text-align: center !important;
  }

  #wie-wir-das-machen > div:nth-child(2) > div > div {
    flex-direction: column-reverse;
  }

  .splide__list {
    transform-style: flat !important;
  }

  /* --- Services Slider  --- */
  #services-slider .white-card {
    padding: 40px 20px;
    margin: 20px 22px !important;
    max-width: inherit;
    width: 46% !important;
  }  

  div#services-slider-track {
    width: 100% !important
  }

  /* --- Home --- */
  section.blog-preview-section>div.row.flex-row.flex-card-center {
    flex-direction: row;
    align-items: center;
  }

  ul#testimonial-slider-list {
    max-width: 680px;
  }
}

/* --- Tablet - everything under medium device screens --- */
@media (max-width: 768px) {
  .home section.flexible .row ul li p {
    text-align: center;
  }

  .home section .row ul li {
    display: block;
  }

  .mobile-mt {
    margin-top: 40px;
  }

  .homepage .grey-box .box-heading {
    display: flex;
    justify-content: center;
  }

  .section.three-by-three-rt .grey-box {
    min-height: auto;
    text-align: center;
  }

  .homepage .seven-rt .col-3 {
    width: 96%;
    float: none;
  }

  .hs-blog-post .related-posts-feed .rel-posts-image {
    display: none;
  }

  .hs-blog-post .related-posts-feed.section .blog_info {
    position: relative;
    left: initial;
    width: 100%;
    padding-left: 0;
    text-align: center;
  }

  .hs-blog-post .related-posts-feed.section h2 {
    text-align: center;
  }

  .homepage .two-column-hero .col-6 {
    width: 96%;
  }

  .flex-card {
    width: 94%;
    margin: 2%;
  }

  .homepage .two-column-hero {
    padding: 80px 0 60px 0;
    background-position: right;
  }

  .map-embed-col,
  .map-text-col,
  .map-fw-text-col {
    width: 100%;
  }
}

/* --------------- Mobile --------------- */
@media (max-width: 520px) {
  footer .col-10 .row .col-3 {
    width: 100%;
    float: none;
    text-align: center;
  }

  .navbar .menu-icon {
    background: #019cdf;
  } 

  .row.partners-row .col-2 {
    width: 50%;
  }   

  #services-slider .splide__arrow--next,
  #services-slider .splide__arrow--prev {
    display: none;
  }

  section.blog-preview-section>div.row.flex-row.flex-card-center {
    flex-direction: column;
  }

  #services-slider .white-card {    
    width: 100% !important;
  }

  ul#testimonial-slider-list {
    max-width:375px;
  }

  /* --- Contact Page --- */ 
  .contact-card-styling-two {
    text-align: center;
    padding-left: 0px;
  }

  #tech-support-styling {
    margin-top: 0px;
  }

  div#contact-form-section .col-12 {
    border-radius: 0;
    margin-top: 0px;
  }

  div#contact-form-section {
    height: auto;
    padding: 0px;

  }

  section#tech-support-styling .row:nth-child(n + 1) {
    display: grid;
  }

  section#tech-support-styling .col-4:not(:first-child) {
    border: none;
  }

  section#tech-support-styling .col-4:not(:first-child) {
    border-left: none;
    margin-top: 50px;
  }

  section#contact-blog-feed .row:nth-child(n + 1) {
    display: block;
  }

  #contact-blog-feed .flex-card {
    width: 94%;
    margin-bottom: 50px;
  }   
}

/* # sourceMappingURL=main.css.map*/