/* =========================================
   INTERACTIVE TOPIC EXPERIMENT
   ========================================= */

.interactive-topics {
    display: flex;
    width: 100%;
    max-width: 1400px;
    margin: 40px auto;
    gap: 8px;
    overflow: hidden;
		border-radius: 15px;
}


/* Each topic */

.interactive-topics .topic {
    position: relative;
    flex: 1;
    height: 500px;
    overflow: hidden;
    cursor: pointer;

    transition: flex 0.1s ease;
}


/* The photograph */

.interactive-topics .topic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;

    transition: transform 0.6s ease;
}


/* Dark overlay */

.interactive-topics .topic::after {
    content: "";

    position: absolute;
    inset: 0;

    background: rgba(0,0,0,0.25);

    transition: background 0.6s ease;

}


/* Information */

.interactive-topics .topic-info {
    position: absolute;

    left: 30px;
    right: 30px;
    bottom: 30px;

    z-index: 2;

    color: white;
}


/* Title */

.interactive-topics .topic-info h2 {
    margin: 0;

    font-size: 32px;
}


/* Description */

.interactive-topics .topic-info p {
    margin-top: 10px;

    opacity: 0;

    transition: opacity 0.5s ease;
}


/* =========================================
   HOVER EFFECT
   ========================================= */


/* Make the topic under the mouse bigger */

.interactive-topics .topic:hover {
    flex: 3;
}


/* Zoom the image slightly */

.interactive-topics .topic:hover img {
    transform: scale(1.05);
}


/* Make the image darker */

.interactive-topics .topic:hover::after {
    background: rgba(0,0,0,0.45);
}


/* Reveal the description */

.interactive-topics .topic:hover .topic-info p {
    opacity: 1;
}


/* =========================================
   PHONE
   ========================================= */

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

    .interactive-topics {
        flex-direction: column;
    }

    .interactive-topics .topic {
        flex: none;
        width: 100%;
        height: 250px;
    }

    .interactive-topics .topic:hover {
        flex: none;
        height: 400px;
    }

}
/* =========================================
   PAGE 19420 ONLY
   FULL-WIDTH TWENTY FIFTEEN OVERRIDE
   ========================================= */

/* Page itself */
body.page-id-19420 .site {
    width: 100%;
    max-width: none;
    margin: 0;
}

/* Hide the Twenty Fifteen sidebar on this page only */
body.page-id-19420 .widget-area {
    display: none !important;
}

/* Main content area */
body.page-id-19420 .site-content {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Content column */
body.page-id-19420 .content-area {
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Main content */
body.page-id-19420 .site-main {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* WordPress page/article container */
body.page-id-19420 .entry {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Actual page content */
body.page-id-19420 .entry-content {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}