.infoTeaser {
    width: 100%;
    display: inline-block;
}

.infoTeaser .leftSection   {
    float: left;
    width: 50%;
    height: 100vh;
}

.infoTeaser .rightSection   {
    float: right;
    width: 50%;
    height: 100vh;
}

.infoTeaser .imageBox   {
    width: 80%;
    margin: 50px auto;
    border: 5px solid #000000;
}

.infoTeaser .imageBox img   {
    width: 100%;
    display: block;
    transform: translate(5%,5%);
}

.infoTeaser .textBox    {
    width: 80%;
    margin: 50px auto;
    position: relative;
    font-size: 2.4em;
    top: 50%;
    transform: translate(0%,-50%);
}

.infoTeaser .textBox .tag    {}

.infoTeaser .textBox .tag p    {
    text-transform: uppercase;
}

.infoTeaser .textBox .headline    {}

.infoTeaser .textBox .headline h2    {

}

.infoTeaser .textBox .more    {
    border-top: 5px solid #000;
    width: 20%;
}

.infoTeaser .textBox .more a    {
    text-transform: uppercase;
    color: #000000;
    text-decoration: none;
    border: 2px solid #000000;
    padding: 10px 20px;
    position: absolute;
    right: 0px;
}

.infoTeaser .textBox .more a:hover    {
    border: none;
    background-color: #000;
    color: #fff;
}

.readMoreBox    {
    display: none;
    position: fixed;
    width: 100%;
    height: 100vh;
    background-color: #ffffff;
    top: 0px;
    left: 0px;
    z-index: 999;
    overflow-x: auto;
}

.readMoreBox .back  {
    width: 80px;
    margin: 10px 5%;
}

.readMoreBox .back svg:hover  {
    cursor: pointer;
}

.readMoreBox .headline  {
    font-size: 2em;
    margin: 0px 5%;
}

.readMoreBox .headline h2  {}

.readMoreBox .text  {
    margin: 0px 5%;
}

.readMoreBox .text p  {}

.readMoreBox .text .pictureFrame  {
    position: relative;
    width: calc(20% - 10px);
    margin: 10px 2.5%;
    border: 5px solid #000000;
    float: left;
}

.readMoreBox .text .pictureFrame img    {
    width: 100%;
    display: block;
    transform: translate(5%,5%);
}

/* Smartphones & small Tablets (portrait and landscape) ----------- */
@media (min-width: 0px) and (max-width: 768px) {
    .infoTeaser .leftSection, .infoTeaser .rightSection   {
        width: 100%;
        height: auto;
        float: left;
    }

    .infoTeaser .textBox    {
        top: 0px;
        transform: translate(0%,0%);
    }

    .parallax-container {
        height: 150px;
    }
}

/* Tablets and small Notebooks (portrait and landscape) ----------- */
@media (min-width: 769px) and (max-width: 1280px) {
    .infoTeaser .leftSection, .infoTeaser .rightSection   {
        width: 100%;
        height: auto;
        float: left;
    }

    .infoTeaser .textBox    {
        top: 0px;
        transform: translate(0%,0%);
    }

    .parallax-container {
        height: 150px;
    }
}