.demo * {
    box-sizing: border-box;
}

.demo {
    background: black;
    position: relative;
    height: 615px;
    margin: 0 auto 1em auto;
    line-height: 1.2;
    width: calc(100% + 1em);
}

.demo-explanation {
    margin: 20px auto 20px auto;
    font-family: "Helvetica", "Arial", sans-serif;
    padding: 0 1em;
    font-style: italic;
}

.image, .image img, .text {
    position: absolute;
    width: 865.6px;
    left: 0;
    top: 0;
}

.text { 
    color: white;
    font-size: 1.2em;
    font-family: "Helvetica", "Arial", sans-serif;
    height: 100%;
    width: 100%;
}

.text-label {
    position: absolute;
    background: #000;
    padding: 20px;
}

.text-top {
    top: 0;
    left: 0;
}

.text-bottom {
    width: 38%;
    bottom: 0;
    right: 0;
    padding: 1em 1.6em;
}

.text-zoom-113 .demo {
    margin-bottom: 9em;
}

.text-zoom-113 .text-bottom {
    width: 100%;
    left: 0;
    right: auto;
    top: calc(100% - 1px);
    bottom: auto;
    background: black;
    padding: 1em;
}

.text-zoom-113 .demo-explanation {
    margin-top: 6em;
}

#content ul > li {
    padding-bottom: 14px;
}

#content ol, #content ul {
    padding-bottom: 0;
}

#content ol + p {
    margin-bottom: 0;
}


@media only screen and (max-width: 768px) {
    .demo-explanation {
        width: 100%;
    }

    .demo {
        position: relative;
        left: -1.1em;
        width: calc(100% + 2em);
        height: 71vw;
    }

    .entry .demo img {
        margin-top: 0 !important;
        width: 100vw !important;
        max-width: 100% !important;
    }

    .text {
        font-size: 0.9em;
    }

    .text-label {
        padding: 10px;
    }
}


@media only screen and (max-width: 570px) {
    .demo {
        height: 115.3vw;
    }

    .demo-explanation {
        margin-top: 6em;
    }

    .text-label {
        padding: 10px;
    }
}

@media only screen and (max-width: 320px) {
    .text {
        font-size: 0.7rem;
    }
    .text-top {
        width: 50%;
    }
}