/* ####################################
   Flipbook

   - Critical Rendering Path: Optional
   ################################## */

div[class="flipbooks"] {
    /* The default layout for flipbooks, applied only when no additional class names are added. */
}

    div[class="flipbooks"] .flipbook .thumbnail.poster {
    }

    div[class="flipbooks"] .flipbook .text {
    }

.flipbooks {
    position: relative;
    clear: both;
    width: 100%;
    margin: 0 0 var(--site-box-margin-bottom);
}

.flipbooks.max-width {
    /* A special case available on the single flipbook widget. */
    float: left;
    clear: none;
    width: auto;
    margin-right: 30px;
}

    .flipbooks .content {
        display: contents;
    }

        .flipbook {
            position: relative;
            display: flex;
            flex-direction: column;
            height: 100%;
            background: var(--site-color-1-lighter);
            cursor: pointer;
        }

            .flipbook .thumbnail.poster {
                position: relative;
                padding: 0;
                border-color: var(--site-color-1-lighter);
                border-width: var(--site-border-width);
                border-style: solid;
                overflow: hidden;
            }

                .flipbook .thumbnail.poster img {
                    min-width: 100%;
                }

            .flipbook .text {
                display: flex;
                justify-content: space-between;
                flex-direction: column;
                flex-grow: 1;
                padding: var(--site-padding);
            }

                .flipbook .text .title {
                }

                .flipbook .text .summary {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    flex-grow: 1;
                }

                .flipbook .text .summary {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    flex-grow: 1;
                }

                .flipbook .text .link-view {
                }

                    .flipbook .text .link-view a {
                        display: inline-block;
                    }

                        .flipbook .text .link-view a:hover {
                            color: var(--site-link-color) !important;
                            background: none;
                            text-decoration: underline !important;
                        }

                .flipbook .text :first-child {
                    margin-top: 0;
                }

                .flipbook .text :last-child {
                    margin-bottom: 0;
                }

            .flipbook .loader {
                display: flex;
                position: absolute;
                top: 0;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                height: 100%;
                width: 100%;
                margin: 0 auto;
                background: rgba(0,0,0,0.5);
                z-index: 10;
            }

                .flipbook .loader .animation {
                    content: "";
                    display: block;
                    border: 16px solid var(--site-link-color);
                    border-top: 16px solid transparent;
                    border-radius: 50%;
                    width: 25%;
                    height: 0;
                    padding-top: 25%;
                    animation: spin 2s ease-out infinite;
                }

                .flipbook .loader .message {
                    margin: 1em 0;
                    font-size: 200%;
                    font-weight: bold;
                    color: #fff;
                }

            .flipbook .flipbook-ui {
                display: none; /* It will be turned on when the lightbox is launched. */
                position: relative;
                width: 100%;
                height: 100%;
            }

        .flipbook:hover {
        }

            .flipbook:hover .thumbnail.poster::before {
                content: "Click to view the flipbook";
                position: absolute;
                z-index: 1;
                /*top: calc(50% - 38px);*/
                bottom: 15px;
                left: 7.5%;
                width: 85%;
                line-height: 16px;
                box-sizing: border-box;
                padding: var(--site-padding);
                color: #fff;
                text-align: center;
                font-weight: bold;
                background: rgba(194,48,0,0.75);
            }

            .flipbook:hover .thumbnail.poster img {
                transform: scale(1.05);
                transition: ease;
                transition-duration: 0.3s;
            }

.flipbook-lightbox {
    /* .flipbook-lightbox gets created when the popup is launched. */
    position: relative;
}

    .flipbook-lightbox #cboxContent #cboxLoadedContent {
        background: #000;
    }

        .flipbook-lightbox #cboxTitle {
            /* Optional custom styling for the lightbox title bar when viewing a flipbook. */
            margin-top: -21px; /* To do: Why is there space at the bottom of the flipbook? Until we know, nudge the title bar back up. It looks suspiciously like some missing flipbook page padding. */
        }

    .flipbook-lightbox .flipbook-ui {
        display: block;
        position: relative;
        width: 100% !important;
        height: 100% !important;
        text-align: center;
    }

        .flipbook-lightbox .flipbook-ui .flipbook-canvas {
            cursor: grab;
            margin: 0 auto;
        }

        .flipbook-lightbox .flipbook-ui .toolbar {
            display: inline-block;
            position: relative;
            top: -50px;
            z-index: 10;
            padding: 10px;
            font-size: 14px;
            background: rgba(0,0,0,0.35);
            border-radius: 4px;
        }

            .flipbook-lightbox .flipbook-ui .toolbar a {
                display: inline-block;
                vertical-align: middle;
                height: 24px;
                padding: 0px 10px;
                line-height: 24px;
                color: var(--site-color-white);
                font-weight: bold;
                border-radius: var(--site-button-primary-border-radius);
                background: var(--site-button-primary-bg);
                text-shadow: 1px 1px #000;
                text-decoration: none;
            }

                .flipbook-lightbox .flipbook-ui .toolbar a:hover {
                    text-decoration: none;
                    color: var(--site-button-primary-hover-text-color);
                    background: var(--site-button-primary-hover-bg);
                    transition: 100ms all ease-in-out;
                }

                .flipbook-lightbox .flipbook-ui .toolbar a::before,
                .flipbook-lightbox .flipbook-ui .toolbar a::after {
                    /* Icons. */
                    color: var(--site-color-white);
                }

                .flipbook-lightbox .flipbook-ui .toolbar a:hover::before,
                .flipbook-lightbox .flipbook-ui .toolbar a:hover::after {
                    /* Icons. */
                    color: var(--site-button-primary-hover-text-color);
                }

            .flipbook-lightbox .flipbook-ui .toolbar .controls-view {
                display: inline-block;
            }

                .flipbook-lightbox .flipbook-ui .toolbar .controls-view a {
                }

                    .flipbook-lightbox .flipbook-ui .toolbar .controls-view a.zoom-out {
                    }

                    .flipbook-lightbox .flipbook-ui .toolbar .controls-view a.zoom-in {
                    }

                    .flipbook-lightbox .flipbook-ui .toolbar .controls-view a.zoom-reset {
                    }

            .flipbook-lightbox .flipbook-ui .toolbar .controls-page {
                display: inline-block;
                margin: 0 var(--site-gutters);
            }

                .flipbook-lightbox .flipbook-ui .toolbar .controls-page a {
                }

                    .flipbook-lightbox .flipbook-ui .toolbar .controls-page a.page-prev {
                    }

                    .flipbook-lightbox .flipbook-ui .toolbar .controls-page a.page-next {
                    }

            .flipbook-lightbox .flipbook-ui .toolbar .controls-file {
                display: inline-block;
            }

                .flipbook-lightbox .flipbook-ui .toolbar .controls-file a {
                }

                    .flipbook-lightbox .flipbook-ui .toolbar .controls-file a.download {
                    }

            .flipbook-lightbox .flipbook-ui .toolbar .controls-screen {
                display: inline-block;
            }

                .flipbook-lightbox .flipbook-ui .toolbar .controls-screen a {
                }

                    .flipbook-lightbox .flipbook-ui .toolbar .controls-screen a.fullscreen {
                    }

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

    .flipbook-lightbox .flipbook-ui .toolbar .controls-screen {
        display: none !important;
    }

}