html {
    height: 100%;
}

body {
    padding: 0;
    height: 100%;
    width: 100%;
    text-align: center;
    position: relative;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    background-color: #FFFFFF;
}

img {
    max-width: 100%;
    height: auto;
}
ul
{
    display: none;
}
.info-box {
    top: 22%;
    font-family: 'Montserrat', sans-serif;
    position: absolute;
    height: auto;
    transform: rotate(-90deg);
    z-index: 7;
}
.kontakt-box {
    right:0;
    top: 22%;
    font-family: 'Montserrat', sans-serif;
    position: absolute;
    height: auto;
    transform: rotate(90deg);
    z-index: 7;
}
#start > div > div.col-centered.background-logo > div.info-box > a,
#start > div > div.col-centered.background-logo > div.kontakt-box > a
{
    color: white;
    letter-spacing: 0.2vw;
    font-weight: 500;
}
#info > div > div.col-centered.background-logo > div.info-box > a,
#info > div > div.col-centered.background-logo > div.kontakt-box > a,
#kontakt > div > div.col-centered.background-logo > div.info-box > a,
#kontakt > div > div.col-centered.background-logo > div.kontakt-box > a
{
    color: #1FBD6F;
    letter-spacing: 0.2vw;
    font-weight: 500;
}
@media all and (orientation:portrait) {

    .container {
        margin: 0;
        padding: 2.6vw;
        width: 100%;
        height: 100%;
        background-color: #1FBD6F;
        overflow: hidden;
    }
    .info-box,
    .kontakt-box
    {
        display: none;
    }
    #info,
    #kontakt,
    #impressum {
        background-color: #1FBD6F !important;
    }

    #start,
    #info > div.container,
    #kontakt > div.container,
    #impressum > div.container {
        background-color: #ffffff !important;
    }

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

    .onepage-wrapper .section {
        background-color: #FFFFFF;
    }

    .vertical-info-box a,
    .vertical-kontakt-box a {
        color: white;
    }

    .horizontal-impressum-box a {
        color: #1FBD6F;
    }

    .row {
        clear: both;
        margin: 0;
        padding: 4%;
        z-index: 6;
        height: 100%;
        width: 100%;
        font-family: 'Montserrat', sans-serif;
        text-align: center;
    }

    .impressum-row {
        clear: both;
        margin: 0;
        padding: 0%;
        z-index: 6;
        height: 100%;
        width: 100%;
        font-family: 'Montserrat', sans-serif;
        text-align: center;
    }

    #impressum > div > div > div > div {
        width: 100%;
    }

    .info,
    .kontakt,
    .start,
    .impressum {
        font-family: 'Montserrat', sans-serif;
        width: 100%;
        height: 100%;
        z-index: 2;
    }

    h1 {
        color: #000000;
        clear: both;
        font-family: Georgia, Times, Times New Roman, serif;
        font-style: italic;
        text-decoration: underline;
        z-index: 5;
        width: 100%;
        font-size: 9.7vw;
    }

    h2 {
        color: #000000;
        clear: both;
        font-family: Georgia, Times, Times New Roman, serif;
        font-style: italic;
        text-decoration: underline;
        z-index: 5;
        width: 100%;
        font-size: 7.7vw;
    }

    h3 {
        color: #000000;
        clear: both;
        font-family: Georgia, Times, Times New Roman, serif;
        font-style: italic;
        text-decoration: underline;
        z-index: 5;
        width: 100%;
        font-size: 7.7vw;
    }

    h4 {
        color: #000000;
        clear: both;
        font-family: Georgia, Times, Times New Roman, serif;
        font-style: italic;
        text-decoration: underline;
        z-index: 5;
        width: 100%;
        font-size: 4.7vw;
    }

    .arrow-space {
        bottom: 1px;
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        width: 8%;
        height: 8%;
        z-index: 10;
    }

    .arrow-white {
        width: 100%;
        height: 100%;
        background-position: top center;
        background-repeat: no-repeat;
        background-size: contain;
        background-image: url("../img/arrow-down.png");
    }

    .arrow-green {
        width: 100%;
        height: 100%;
        background-position: top center;
        background-repeat: no-repeat;
        background-size: contain;
        background-image: url("../img/arrow-down-green.png");
    }

    .arrow-green-up {
        width: 100%;
        height: 100%;
        background-position: top center;
        background-repeat: no-repeat;
        background-size: contain;
        background-image: url("../img/arrow-up-green.png");
    }

    .seperator-box {
        float: none;
        z-index: 6;
        position: absolute;
        border: 1px solid black;
        background-color: black;
    }

    .logo {
        background-color: transparent;

    }

    .start-bolder {
        font-weight: 500;
    }

    .head-logo {
        width: 40%;
        height: 20%;
        margin-bottom: 10vw;
        background-image: url("../img/logo-neu.png");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
    }

    .kh-logo-green {
        background-image: url("../img/background-green-logo.png");
        background-position: top center;
        background-repeat: no-repeat;
        background-size: contain;
        width: 65%;
        height: 100%;
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        z-index: 5;
    }

    .kh-logo-white {
        background-image: url("../img/background-logo.png");
        background-position: top center;
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        z-index: 5;
        width: 65%;
        height: 100%;
    }

    .background-logo {
        width: 100%;
        height: 100%;
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        z-index: 5;
    }

    .middle {
        display: table-cell;
        vertical-align: middle;
        width: 100%;
        z-index: 6;
    }

    .inner {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        z-index: 16;
    }

    .start-text {
        font-weight: normal;
        letter-spacing: 0.1vw;
        font-family: 'Montserrat', sans-serif;
        color: #000000;
        z-index: 6;
        font-size: 4.7vw;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    .info-text {
        font-family: 'Montserrat', sans-serif;
        font-weight: normal;
        color: #000000;
        z-index: 6;
        font-size: 2.5vw;
        letter-spacing: 0.1vw;
        width: 70%;
        margin-left: auto;
        margin-right: auto;
    }

    .kontakt-text {
        font-family: 'Montserrat', sans-serif;
        font-weight: 500;
        color: #000000;
        z-index: 6;
        font-size: 2.5vw;
        letter-spacing: 0.1vw;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }

    .impressum-text {
        color: #000000;
        z-index: 6;
        font-size: 1.69vw;
        width: 99%;
        margin-left: auto;
        margin-right: auto;
        text-align: justify;
    }
    .impressum-header {
        font-family: 'Montserrat', sans-serif;
        color: #000000;
        z-index: 6;
        font-size: 1.69vw;
        letter-spacing: 0.1vw;
        width: 100%;
        text-align: center;

    }
    .kontakt-text a {
        color: #000000;
        z-index: 6;
    }

    .horizontal-impressum-box {
        font-family: 'Montserrat', sans-serif;
        font-size: 1.5vw;
        color: #1FBD6F;
        position: absolute;
        height: auto;
        z-index: 7;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        bottom: 1.5%;
        letter-spacing: 0.2vw;
        font-weight: 500;
    }

    .dash-box {
        font-size: 0.3vw;
        /* width: 4vw; */
        /* max-height: 1vw; */
        background-color: #000000;
    }
    .comming-soon-box {
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        bottom: 35% !important;
        z-index: 8;
        background-image: url("../img/gif_250.gif");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
        width: 16.5vw;
        height: 16.5vw;
    }
}
@media all and (orientation:landscape) {
    /* Styles for Landscape screen */
    .container {
        margin: 0;
        padding: 1.2vw;
        width: 100%;
        height: 100%;
        background-color: #1FBD6F;
        overflow: hidden;
    }
    .info-box
    {
        font-size: 1vw;
    }
    .kontakt-box
    {
        font-size: 1vw;
        right: -1%;
    }
    #info,
    #kontakt,
    #impressum {
        background-color: #1FBD6F !important;
    }

    #start,
    #info > div.container,
    #kontakt > div.container,
    #impressum > div.container {
        background-color: #ffffff !important;
    }

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

    .onepage-wrapper .section {
        background-color: #FFFFFF;
    }

    .vertical-info-box a,
    .vertical-kontakt-box a {
        color: white;
    }

    .horizontal-impressum-box a {
        color: #1FBD6F;
    }

    .row {
        clear: both;
        margin: 0;
        padding: 4%;
        z-index: 6;
        height: 100%;
        width: 100%;
        font-family: 'Montserrat', sans-serif;
        text-align: center;
    }

    .impressum-row {
        clear: both;
        margin: 0;
        padding: 0%;
        z-index: 6;
        height: 100%;
        width: 100%;
        font-family: 'Montserrat', sans-serif;
        text-align: center;
    }

    #impressum > div > div > div > div {
        width: 100%;
    }

    .info,
    .kontakt,
    .start,
    .impressum {
        font-family: 'Montserrat', sans-serif;
        width: 100%;
        height: 100%;
        z-index: 2;
    }

    h1 {
        color: #000000;
        clear: both;
        font-family: Georgia, Times, Times New Roman, serif;
        font-style: italic;
        text-decoration: underline;
        z-index: 5;
        width: 100%;
        height: auto;
        font-size: 4.5vw;
        line-height: 0;
        margin-bottom: 4vw;
    }

    h2 {
        color: #000000;
        clear: both;
        font-family: Georgia, Times, Times New Roman, serif;
        font-style: italic;
        text-decoration: underline;
        z-index: 5;
        width: 100%;
        font-size: 4vw;
    }

    h3 {
        color: #000000;
        clear: both;
        font-family: Georgia, Times, Times New Roman, serif;
        font-style: italic;
        text-decoration: underline;
        z-index: 5;
        width: 100%;
        font-size: 4vw;
    }

    h4 {
        color: #000000;
        clear: both;
        font-family: Georgia, Times, Times New Roman, serif;
        font-style: italic;
        text-decoration: underline;
        z-index: 5;
        width: 100%;
        font-size: 2vw;
    }
    .arrow-space {
        bottom: 20px;
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        width: 4%;
        height: 4%;
        z-index: 10;
    }

    .arrow-white {
        width: 100%;
        height: 100%;
        background-position: top center;
        background-repeat: no-repeat;
        background-size: contain;
        background-image: url("../img/arrow-down.png");
    }

    .arrow-green {
        width: 100%;
        height: 100%;
        background-position: top center;
        background-repeat: no-repeat;
        background-size: contain;
        background-image: url("../img/arrow-down-green.png");
    }

    .arrow-green-up {
        width: 100%;
        height: 100%;
        background-position: top center;
        background-repeat: no-repeat;
        background-size: contain;
        background-image: url("../img/arrow-up-green.png");
    }

    .seperator-box {
        float: none;
        z-index: 6;
        position: absolute;
        border: 1px solid black;
        background-color: black;
    }

    .logo {
        background-color: transparent;

    }

    .start-bolder {
        font-weight: 500;
    }

    .head-logo {
        width: 16%;
        height: 25%;
        background-image: url(../img/logo-neu.png);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
    }

    .kh-logo-green {
        background-image: url("../img/background-green-logo.png");
        background-position: top center;
        background-repeat: no-repeat;
        background-size: contain;
        margin-bottom: 2vw;
        width: 33%;
        height: 100%;
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        z-index: 5;
    }

    .kh-logo-white {
        background-image: url("../img/background-logo.png");
        background-position: top center;
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        z-index: 5;
        width: 33%;
        height: 100%;
    }

    .background-logo {
        width: 100%;
        height: 100%;
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        z-index: 5;
    }

    .middle {
        display: table-cell;
        vertical-align: middle;
        width: 100%;
        z-index: 6;
    }

    .inner {
        margin-left: auto;
        margin-right: auto;
        margin-top: 1vw;
        width: 100%;
        z-index: 16;
    }

    .start-text {
        color: #000000;
        z-index: 6;
        font-weight: normal;
        letter-spacing: 0.1vw;
        font-family: 'Montserrat', sans-serif;
        font-size: 2.2vw;
        width: 70%;
        margin-left: auto;
        margin-right: auto;
        margin-top: -2vw;
    }

    .info-text {
        font-family: 'Montserrat', sans-serif;
        letter-spacing: 0.15vw;
        color: #000000;
        z-index: 6;
        font-size: 1.7vw;
        width: 70%;
        margin-left: auto;
        margin-right: auto;
    }

    .kontakt-text {
        font-family: 'Montserrat', sans-serif;
        letter-spacing: 0.15vw;
        font-weight: 500;
        color: #000000;
        z-index: 6;
        font-size: 1.7vw;
        width: 70%;
        margin-left: auto;
        margin-right: auto;
    }

    .impressum-text {
        font-family: 'Montserrat', sans-serif;
        color: #000000;
        z-index: 6;
        font-size: 0.7vw;
        letter-spacing: 0.01vw;
        width: 99%;
        margin-left: auto;
        margin-right: auto;
        text-align: justify;
    }
    .heading-impressum {
        font-weight: 500;
    }
    .impressum-header {
        font-family: 'Montserrat', sans-serif;
        color: #000000;
        z-index: 6;
        font-size: 0.7vw;
        letter-spacing: 0.1vw;
        width:100%;
        text-align: center;

    }
    .kontakt-text a {
        color: #000000;
        z-index: 6;
    }

    .horizontal-impressum-box {
        font-family: 'Montserrat', sans-serif;
        color: #1FBD6F;
        position: absolute;
        height: auto;
        z-index: 7;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        bottom: 1vw;
        font-size: 1vw;
        letter-spacing: 0.15vw;
        font-weight:500;
    }
    .comming-soon-box {
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        bottom: 15% !important;
        z-index: 8;
        background-image: url("../img/gif_250.gif");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
        width: 6.5vw;
        height: 6.5vw;
    }
    .dash-box {
        font-size: 0.3vw;
        background-color: #000000;
    }
}
@media screen and (orientation: landscape) and (min-device-width: 1200px) {
    h2 {
        margin-top: -3vw;
    }
    .info-text {
        font-family: 'Montserrat', sans-serif;
        color: #000000;
        z-index: 6;
        font-size: 1.4vw;
        letter-spacing: 0.1vw;
        width: 75%;
        margin-left: auto;
        margin-right: auto;
    }
    .kontakt-text {
        font-family: 'Montserrat', sans-serif;
        color: #000000;
        z-index: 6;
        font-size: 1.4vw;
        letter-spacing: 0.1vw;
        width: 60%;
        margin-left: auto;
        margin-right: auto;
    }

    .impressum-text {
        color: #000000;
        z-index: 6;
        font-size: 0.7vw;
        width: 99%;
        margin-left: auto;
        margin-right: auto;
        text-align: justify;
    }
    .comming-soon-box {
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        bottom: 20%;
        z-index: 8;
        background-image: url("../img/gif_250.gif");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
        width: 7.5vw;
        height: 7.5vw;

    }
}
@media all and (orientation: landscape) and (max-device-height: 361px) {
    .info-text {
        color: #000000;
        z-index: 6;
        font-size: 1.2vw;
        width: 39%;
        margin-left: auto;
        margin-right: auto;
    }

    .kontakt-text {
        color: #000000;
        z-index: 6;
        font-size: 1.2vw;
        width: 60%;
        margin-left: auto;
        margin-right: auto;
    }

    .impressum-text {
        margin-top: -5vw;
        color: #000000;
        z-index: 6;
        font-size: 0.63vw;
        width: 99%;
        margin-left: auto;
        margin-right: auto;
        text-align: justify;
    }
    .impressum-header {
        font-family: 'Montserrat', sans-serif;
        color: #000000;
        z-index: 6;
        font-size: 1.5vw;
        letter-spacing: 0.1vw;
        width: 100%;
        text-align: center;

    }
    .horizontal-impressum-box {
        font-family: 'Montserrat', sans-serif;
        color: #1FBD6F;
        position: absolute;
        height: auto;
        z-index: 7;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        bottom: 0px;
        font-size: 1vw;
    }
}