body {

    background-color: #F8F8F8;
    font-family: 'Arimo', sans-serif;
}

header #contactBarContainer {

    background-color: #474747;
    font-family: 'Arimo', sans-serif;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}

header #contactBarContainer #contactBar {

    background-color: #474747;
    color: #FFF;
    font-size: 14px;
    height: 30px;
    margin: auto;
    max-width: 1100px;
    padding-top: 5px;
    text-align: right;
}

div.stickToTop {

    margin: auto;
    position: fixed;
}

div.spacer100 {

    height: 100px;
}

div.spacer150 {

    height: 150px;
}

div.spacer180 {

    height: 180px;
}

div.spacer200 {

    height: 200px;
}

#navBackground {

    background-color: #F8F8F8;
    height: 140px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 950;
}

nav {

    background-color: #F8F8F8;
    font-family: 'Arimo', sans-serif;
    left: 0;
    top: 30px !important;
    max-width: 1100px !important;
}

nav button,
nav div {

    margin-top: 20px;
}

.navbar {

    margin: auto;
    max-width: 1100px;
}

.teaserAbsImgContainerLeftImg {

    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1);
    display: block;
    max-height: 100%;
    max-width: 100%;
}

header #contactBarContainer #contactBar {

    padding-right: 10px;
}

header #contactBarContainer #contactBar a {

    color: #FFF;
    cursor: pointer;
    margin-left: 20px;
    text-decoration: none;
}

#navbarBurgerButton,
#navbarBurgerButton:focus {

    border: none;
    outline: none;
}

#navbarNav ul li a {

    color: #474747;
    font-size: 16px;
    text-transform: uppercase;
    text-decoration: none;
}

#navbarNav ul li a.ohoActive {

    /* color: #474747; */
    color: #1D929D;
    text-transform: uppercase;
    text-decoration: none;
}

.ohoBlue {

    color: #1D929D !important;
}

#navbarNav ul li a:hover,
#navbarNav ul li a:focus {

    color: #474747;
    text-transform: uppercase;
    text-decoration: underline;
}

#navbarNav ul li a.ohoActive:hover,
#navbarNav ul li a.ohoActive:focus {

    color: #1D929D;
    text-transform: uppercase;
    text-decoration: underline;
}

section.teaserSection {

    height: 670px;
    margin-top: 140px;
    width: 100%;
}

section.teaserSection div.maxTeaserText {

    margin: auto;
    max-width: 720px;
    padding: 0 20px 0 20px;
}

section.teaserSection div.teaserBg {

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 670px;
    width: 100%;
}

section.teaserSectionSm div.teaserBgSm,
section.teaserSection div.teaserBgSm {

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 450px;
    width: 100%;
}

section.teaserSection p,
section.teaserSection h2,
section.teaserSection .sectionButton {

    color: #222;
    font-size: 32px;
    margin: 0 10px 0 10px;
    padding: 150px 0 0 0;
    text-align: center;
}

section.teaserSectionSm div.teaserDiv,
section.teaserSectionSm p,
section.teaserSectionSm h2 {

    color: #222;
    font-size: 32px;
    margin: 0 10px 0 10px;
    padding: 180px 0 0 0;
    text-align: center;
}

section.teaserSectionSm div.teaserDiv div.teaserDivInner {

    margin: auto;
    max-width: 1100px;
    padding: 0 50px 0 50px;
    text-align: left;
}

section.teaserSectionSm .sectionButton {

    color: #222;
    font-size: 32px;
    margin: 0 10px 0 10px;
    padding: 50px 0 0 0;
    text-align: center;
}

section.teaserSection .sectionButton {

    padding: 40px 0 0 0;
}

.featureText p a {

    background: none !important;
    color: #1D929D !important;
    font-size: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-decoration: none;
}

.featureText p a:hover,
.featureText p a:focus {

    background: none !important;
    color: #1D929D !important;
    font-size: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-decoration: underline !important;
}

section#sliderDots {

    margin-top: 440px;
}

section#sliderDots .sliderDotBtn {

    background-color: #474747;
    border-radius: 50%;
    cursor: pointer;
    display: inline-block;
    height: 15px;
    margin: 0 2px;
    transition: background-color 0.6s ease;
    width: 15px;
}

section#sliderDots .sliderDotBtn:hover,
section#sliderDots .sliderDotBtn:focus,
section#sliderDots .sliderDotBtnActive {

    background-color: #1D929D;
    border-radius: 50%;
    cursor: pointer;
    display: inline-block;
    height: 15px;
    margin: 0 2px;
    transition: background-color 0.6s ease;
    width: 15px;
}


.featureContainer a,
.sectionButtonContentArea a,
section.teaserSectionSm .sectionButton a,
section.teaserSection .sectionButton a {

    background: rgba(29, 146, 157, 0.8);
    color: #FFF !important;
    font-size: 24px;
    margin: 40px 0 0 0;
    padding: 15px 40px 15px 40px;
    text-decoration: none;
}

.featureContainer a:hover,
.featureContainer a:focus,
.sectionButtonContentArea a:hover,
.sectionButtonContentArea a:focus,
section.teaserSectionSm .sectionButton a:hover,
section.teaserSectionSm .sectionButton a:focus,
section.teaserSection .sectionButton a:hover,
section.teaserSection .sectionButton a:focus {

    background: rgba(29, 146, 157, 0.9);
    color: #FFF;
    font-size: 24px;
    margin: 40px 0 0 0;
    padding: 15px 40px 15px 40px;
    text-decoration: none !important;
}

section.teaserSectionSm p span.h2BgHighlight,
section.teaserSectionSm h2 span.h2BgHighlight,
section.teaserSection p span.h2BgHighlight,
section.teaserSection h2 span.h2BgHighlight {

    background: rgba(255, 255, 255, 0.65);
    box-shadow: 10px 0 0 rgba(255, 255, 255, 0.65), -10px 0 0 rgba(255, 255, 255, 0.65);
    line-height: 220%;
    padding: 10px 0 10px 0;
}

section.teaserSectionSm h2.noTopPad,
section.teaserSection h2.noTopPad {

    padding-top: 20px !important;
}

section.teaserSectionSm h2.noTopPad span.h2Bg,
section.teaserSection h2.noTopPad span.h2Bg {

    background: rgba(255, 255, 255, 0.65);
    box-decoration-break: clone;
    box-shadow: 2px rgba(255, 255, 255, 0.65), 2px rgba(255, 255, 255, 0.65);
    padding: 5px;
    line-height: 180%;
}

section.teaserSectionSm h2.noTopPad span.h2BgNoPad {

    background: rgba(255, 255, 255, 0.65);
    box-decoration-break: clone;
    box-shadow: 2px rgba(255, 255, 255, 0.65), 2px rgba(255, 255, 255, 0.65);
    line-height: 180%;
    padding: 5px 0 5px 0;
}

section.screenshots,
section.screenLeftTextRight {

    margin-top: 0;
    padding-top: 20px;
    width: 100%;
}

section.logoLeftTextRight {

    border-top: #1D929D solid 1px;
    border-bottom: #1D929D solid 1px;
    height: 140px;
    margin-top: 40px;
    padding: 0 20px 0 20px;
    width: 100%;
}

section.logoLeftTextRight .logoCol {

    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 50%;
    height: 140px;
}

section.logoLeftTextRight .textCol {

    text-align: left;
}

section.teaserText {

    margin-top: 20px;
    padding-top: 20px;
    width: 100%;
}

section.teaserTextNew {

    margin-top: 430px;
    padding-top: 20px;
    width: 100%;
}

.mainGrayBg {

    background-color: #F8F8F8 !important;
}

.teaserTextNewMarginTop20 {

    margin-top: 20px !important;
}

.subNav {

    margin-bottom: 20px;
}

p.hxpp a,
.subNav a,
section.textMargin a {

    color: #474747 !important;
    margin: 0 10px 0 10px;
    text-decoration: none;
    text-transform: uppercase;
}

.subNav a {

    white-space: nowrap;
}

.subNav a.current {

    color: #1D929D !important;
    margin: 0 10px 0 10px;
    text-decoration: none;
    text-transform: uppercase;
}

.noMarginTopLineHeight1,
.inputTextForCheckbox {

    line-height: 1.0;
    margin-top: 0 !important;
}

.dangerText {

    color: #C82333;
}

p.hxpp a:hover,
p.hxpp a:focus,
.subNav a:hover,
.subNav a:focus,
section.textMargin a:hover,
section.textMargin a:focus {

    color: #1D929D;
    text-decoration: underline;
}

section.screenshots .textMargin,
section.logoLeftTextRight .textMargin,
section.teaserTextNew .textMargin,
section.teaserText .textMargin {

    margin: auto;
    max-width: 1100px;
}

.blockPaddingTop {

    padding-top: 20px;
}

.noh3Hxp {

    height: 33px;
}

.mTop20M {

    margin-top: -20px;
}

.mTop30M {

    margin-top: -30px;
}

.mTop20 {

    margin-top: 20px;
}

.mTop30 {

    margin-top: 30px;
}

.mTop40 {

    margin-top: 40px;
}

div.form-check {

    padding-bottom: 5px !important;
}

.form-check-input {

    margin-top: 0.1rem !important;
}

section.logoLeftTextRight h2,
section.teaserTextNew h2,
section.teaserText h2 {

    /* color: #1D929D; */
    color: #222;
    font-size: 28px;
    text-align: center;
}

section.logoLeftTextRight h3,
section.teaserTextNew h3,
section.teaserText h3 {

    /* color: #1D929D; */
    color: #222;
    font-size: 16px;
    text-align: center;
}



h3.licenses {

    color: #222;
    font-size: 20px !important;
}

section.teaserTextNew p,
section.teaserText p {

    /* color: #1D929D; */
    color: #222;
    font-size: 16px;
    line-height: 1.5;
    margin-top: 20px;
}

section.teaserTextNew ul:first-child,
section.teaserTextNew ul li:first-child,
section.teaserText ul:first-child,
section.teaserText ul li:first-child {

    /* color: #1D929D; */
    color: #222;
    font-size: 16px;
    line-height: 1.5;
    margin-top: 20px;
}

section.teaserTextNew ul,
section.teaserTextNew ul li,
section.teaserText ul,
section.teaserText ul li {

    /* color: #1D929D; */
    color: #222;
    font-size: 16px;
    line-height: 1.5;
}

section.screenshots {

    margin-top: 20px;
    padding-top: 20px;
    width: 100%;
}

.leftRightImgInfoContainer h3 {

    color: #222 !important;
    font-size: 28px !important;
    padding: 0;
}

div.footer {

    background-color: #474747;
    color: #FFF;
    margin-top: 40px;
    padding: 15px 15px 0 15px;
    width: 100%;
}

div.footer a {

    color: #FFF;
    text-decoration: none;
}

div.imgLeftTextRight140 {

    display: flex;
    display: -webkit-flex;
    height: 140px;
    margin: auto;
    text-align: center;
}

div.imgLeftTextRight140Inner {

    display: inline-block;
    float: left;
    height: 140px;
    margin-right: 20px;
    padding-top: 20px;
    padding-left: 20px;
}

div.imgLeftTextRight140Inner img {

    height: 100px;
    vertical-align: center;
    width: 100px;
}

div.imgLeftTextRight140 h2 {

    margin: auto;
    text-align: center;
}

div.imgLeftTextRight140 h2 a {

    color: #1D929D;
    margin: auto;
    text-align: center;
}

div.imgLeftTextRight140 h2 a:hover,
div.imgLeftTextRight140 h2 a:focus {

    color: #1D929D;
    margin: auto;
    text-align: center;
    text-decoration: underline;
}

.featureContainer {

    margin-top: 40px;
}

.featureContainer div.featureText {

    margin-top: 10px;
}

.featureContainer div.featureText p {


}

.screenshots p a,
.featureContainer div.featureText p a {

    color: #1D929D;
    text-decoration: none;
}

.screenshots p a:hover,
.screenshots p a:focus,
.featureContainer div.featureText p a:hover,
.featureContainer div.featureText p a:focus {

    color: #1D929D;
    text-decoration: underline;
}

.featureContainer a {

    color: #1D929D;
    text-decoration: none;
}

.featureContainer a:hover,
.featureContainer a:focus {

    color: #1D929D;
    text-decoration: underline;
}

a.inline {

    background: none !important;
    color: #1D929D !important;
    font-size: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-decoration: none !important;
}

a.inline:hover,
a.inline:focus {

    background: none !important;
    color: #1D929D !important;
    font-size: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-decoration: underline !important;
}

.smallIcon {

    height: 12px;
    width: 12px;
}

.screenshots div {

    padding: 0 15px 0 15px;
}

.screenshots img.screen {

    max-width: 100%;
    width: 200px;
}

.fcScreenContainer {

    background-size: cover;
    border: #222 solid 1px;
    height: 250px;
    width: 100%;
}

.fcScreenContainerCentered {

    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border: #222 solid 1px;
    height: 250px;
    width: 100%;
}

.fcScreenContainerCenteredOrigSize {

    background-position: center;
    background-repeat: no-repeat;
    background-size: auto !important;
    border: #222 solid 1px;
    height: 250px;
    width: 100%;
}

.fcScreenContainerCenteredForIcon {

    background-position: top center;
    background-repeat: no-repeat;
    height: 200px;
    width: 100%;
}

.leftRightImgInfoContainer ul li {

    line-height: 1.0 !important;
}

.fcInnerMultiColReducedMargin {

    margin-top: -20px;
}

.fontMono {

    font-family: "Courier New", Courier, monospace !important;
}

.remTopBorder {

    border-top: none !important;
    padding-top: 0 !important;
}

.c {

    text-align: center;
}

.r {

    text-align: right;
}

h2.l,
h3.l,
h4.l,
h5.l {

    text-align: left !important;
}

.hxp {

    padding: 0 15px 0 15px;
}

ul.hxpp,
p.hxpp {

    color: #222;
    font-size: 16px;
    margin-bottom: 16px;
}

ul.hxpp li {

    margin-bottom: 8px !important;
}

.dn,
.ohoDbS,
.ohoDbM {

    display: none;
}

.pointer {

    cursor: pointer;
}

.menuIcon {

    cursor: pointer;
    height: 24px;
    width: 24px;
}

.alert-danger {

    line-height: 1.5;
}

div.fcScreenContainerDivider {

    border-top: 1px solid #222;
    margin-top: 20px;
}

#logo h1 {

    background: url(../img/oho360-logo-w-slogan-w-color.png) no-repeat center;
    background-size: 100%;
    height: 47px;
    margin: auto;
    padding: 0;
    width: 150px;
}

#logo h1 a {

    display: block;
    overflow: hidden;
    text-indent: -10000px;
}

@media only screen and (max-width: 991px) {

    #navbarNav {

        margin-top: 10px;
    }
}

@media only screen and (min-width: 482px) and (max-width: 900px) {

    body {

    }

    section.teaserSection p,
    section.teaserSection h2 {

        padding: 80px 0 0 0;
    }

    .ohoDbM {

        display: block;
    }

    .ohoDnM {

        display: none;
    }
}

@media only screen and (max-width: 481px) {

    body {

    }

    .featureContainer .col-sm {

        margin-top: 20px;
    }

    section.teaserSection p,
    section.teaserSection h2 {

        padding: 30px 0 0 0;
    }

    section.teaserSection p,
    section.teaserSection h2,
    section.teaserSection .sectionButton {

        color: #222;
        font-size: 24px !important;
        margin: 0 10px 0 10px;
        padding: 80px 0 0 0;
        text-align: center;
    }

    .sectionButtonContentArea a,
    section.teaserSection .sectionButton a {

        background: rgba(29, 146, 157, 0.8);
        color: #FFF;
        font-size: 24px !important;
        margin: 10px 0 0 0;
        padding: 15px 40px 15px 40px;
        text-decoration: none;
    }

    section.teaserSection .sectionButton a:hover,
    section.teaserSection .sectionButton a:focus {

        background: rgba(29, 146, 157, 0.9);
        color: #FFF;
        font-size: 24px !important;
        margin: 40px 0 0 0;
        padding: 15px 40px 15px 40px;
        text-decoration: none;
    }

    section.logoLeftTextRight h2,
    section.teaserText h2 {

        /* color: #1D929D; */
        color: #222;
        font-size: 24px !important;
        margin-top: 40px;
        text-align: center;
    }

    section.teaserText p {

        /* color: #1D929D; */
        color: #222;
        font-size: 24px;
        margin-top: 40px;
        text-align: center;
    }

    section.teaserText p.mobL {

        /* color: #1D929D; */
        color: #222;
        font-size: 14px;
        margin-top: 10px;
        text-align: left;
    }

    div.imgLeftTextRight140 h2 {

        font-size: 24px;
        margin: 0 auto;
        padding-top: 30px;
    }

    .leftRightImgInfoContainer {

        padding: 0 15px 0 15px;
    }

    .leftRightImgInfoContainer h3 {
        color: #222 !important;
        font-size: 28px !important;
        margin-top: 14px;
        padding: 0;
        text-align: center !important;
    }

    ul.hxpp,
    p.hxpp {
        color: #222;
        font-size: 16px !important;
        margin-bottom: 16px !important;
        text-align: left !important;
    }

    p.hxpp {

        padding: 0 5px 0 5px;
    }

    .ohoDbS {

        display: block;
    }

    .ohoDnS {

        display: none;
    }
}

@media only screen and (max-width: 390px) {

    div.imgLeftTextRight140 h2 {

        font-size: 20px;
        margin: 0 auto;
        padding-top: 30px;
    }
}

/* Basis für alle Fullscreen-Container */
.fcScreenContainer[data-fullscreendiv="true"]{
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    cursor: zoom-in;
}

/* Lupe unten rechts */
.fcScreenContainer[data-fullscreendiv="true"]::after{
    content: "";
    position: absolute;
    right: .5rem;
    bottom: .5rem;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: rgba(0,0,0,.55);
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.25rem;
    pointer-events: none;
    z-index: 1;

    /* weiße Lupe als eingebettetes SVG (keine extra Datei nötig) */
    background-image: url('data:image/svg+xml;utf8,\
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white">\
    <path d="M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16a6.47 6.47 0 0 0 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>\
  </svg>');
}

.fcScreenContainer.align-left {
    background-position: left center;
}

.fcScreenContainer[data-fullscreendiv="true"][data-zoomicon="false"]::after{
    content: none; /* Pseudo-Element gar nicht erzeugen */
}