#CenteringFlow {
    text-align: center;
}

#RatioContainerFlow {
    display: inline-block;
    /*font-size: 1.8em;*/
    line-height: 1.0;
    max-height: 768px;
    max-width: 1920px;
    min-width: 1024px;
    position: relative;
    width: 90%;
}

#RatioContainerHeightFlow {
    /* 16:9 aspect ratio (1920x1080): 56% */
    padding-top: 56%;
}

#RatioDisplayFlow {
    background-color: #262626;
    color: #fffaf0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: left;
}

    #RatioDisplayFlow > div {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        -webkit-transition: opacity 1s ease-in-out;
        -moz-transition: opacity 1s ease-in-out;
        -o-transition: opacity 1s ease-in-out;
        transition: opacity 1s ease-in-out;
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
    }

        #RatioDisplayFlow > div.opaque {
            opacity: 1;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
            filter: alpha(opacity=1);
        }

.rx-font-harting {
    font-family: "Harting", monospace;
    font-weight: 100;
}

span.control {
    cursor: pointer;
    display: inline-block;
    font-size: 120px;
    height: 120px;
    position: absolute;
    width: 120px;
    top: 77%;
    z-index: 3;
    transform: scale(0.5,1); /* W3C */
    -webkit-transform: scale(0.5,1); /* Safari and Chrome */
    -moz-transform: scale(0.5,1); /* Firefox */
    -ms-transform: scale(0.5,1); /* IE 9 */
    -o-transform: scale(0.5,1); /* Opera */
}

    span.control:active {
        font-size: 130px;
    }

    span.control:hover {
        color: greenyellow;
    }

#Next {
    left: 15%;
}

#Previous {
    left: 5%;
}

.page {
    background-repeat: no-repeat;
    overflow: hidden;
}

    .page.cover {
        background-image: url(eyes-and-stubble.png);
        background-position: 15% 5%;
    }

        .page.cover > h1 {
            font-size: 4.8em;
            margin: 10% 0 0 5%;
        }

        .page.cover > h2 {
            font-size: 2.4em;
            margin: 30% 5% 0 0;
            text-align: right;
        }

    .page > .verse {
        font-size: 1.8em;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        text-wrap: normal;
    }

    .page:nth-child(2) {
        background-image: url(ear-and-beard.png);
        background-position: 0 0;
    }

        .page:nth-child(2) > .verse {
            top: 15%;
            left: 15%;
        }

    .page:nth-child(3) {
        background-image: url(factory-pillar-and-box.png);
        background-position: 100% 0;
    }

        .page:nth-child(3) > .verse {
            top: 30%;
            left: 2%;
        }

    .page:nth-child(4) {
        background-image: url(feather-and-fedora.png);
        background-position: 75% 60%;
    }

        .page:nth-child(4) > .verse {
            left: 2%;
        }

    .page:nth-child(5) > .verse {
        font-size: 2.4em;
        top: 15%;
        left: 2%;
    }

    .page:nth-child(6) {
        background-image: url(factory-calendar-and-december.png);
        background-position: 100% 100%;
    }

        .page:nth-child(6) > .verse {
            top: 10%;
            left: 2%;
        }

    .page:nth-child(7) {
        background-image: url(mic-and-beard.png);
        background-position: 100% 10%;
    }

        .page:nth-child(7) > .verse {
            top: 45%;
            left: 2%;
        }

    .page:nth-child(8) {
        background-image: url(factory-and-lightswitch.png);
        background-position: 0 0;
    }

        .page:nth-child(8) > .verse {
            font-size: 2.4em;
            top: 23%;
            left: 1%;
        }

    .page:nth-child(9) {
        background-image: url(factory-and-broken-window.png);
        background-position: 90% 90%;
    }

        .page:nth-child(9) > .verse {
            font-size: 1.2em;
            top: 7%;
            left: 2%;
        }

    .page:nth-child(10) > .verse {
        font-size: 1.2em;
        top: 50%;
        left: 2%;
    }

.credits.page {
    font-size: 1.4em;
    margin: 3em 0 0 3em;
}

    .credits.page > p {
        font-weight: bold;
        margin-bottom: 1.5em;
    }

        .credits.page > p > span {
            font-weight: normal;
        }

.loading #RatioDisplayFlow > div {
    display: none;
}

#PresentationFlow.print {
    background-color: #fffaf0;
    color: #262626;
    font-size: 1.4em;
    padding: 4em 1em;
}

    #PresentationFlow.print > a.exit {
        display: inline-block;
        margin: 1em 0;
    }