/* =========================================
   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(102,119,119,0.25);

    transition: background 0.6s ease;

}


/* DInformation */

.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: 110%;
}


/* 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;
}
@media screen and (min-width: 701px) {

    .interactive-topics .topic-info p img {
        width: 70px !important;
        height: 70px !important;
        float: left;
        margin-right: 8px;
        margin-bottom: 2px;
        border-radius: 6px;
        border: 1px solid #ffffff;
        object-fit: cover;
    }

}

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

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

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

    .interactive-topics .topic {
        flex: none;
        width: 100%;
        height: 250px;
				max-height: 250px;
				overflow: hidden;
			transition: max-height 0.4s ease-in-out;

    }

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

}
*/
/* =========================================
   PHONE - SHORT BARS + ROLLOVER
   ========================================= */

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

    .interactive-topics {
        flex-direction: column;
        gap: 6px;
    }

    /* =========================================
       COLLAPSED BAR
       ========================================= */

    .interactive-topics .topic {
        flex: none;
        width: 100%;
        height: 100px;
        min-height: 100px;
        overflow: hidden;
        position: relative;
        transition: height 0.5s ease;
    }

    /* Main background photo */
    .interactive-topics .topic > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* Collapsed title */
    .interactive-topics .topic-info {
        left: 20px;
        right: 20px;
        bottom: 50%;
        transform: translateY(50%);
    }

    .interactive-topics .topic-info h2 {
        font-size: 24px;
        margin: 0;
    }

    /* Hide description */
    .interactive-topics .topic-info p {
        display: none;
        opacity: 0;
    }


    /* =========================================
       EXPANDED / ROLLOVER
       ========================================= */

    .interactive-topics .topic:hover {
        height: 900px;
    }

    /* Move content to top */
    .interactive-topics .topic:hover .topic-info {
        top: 5px;
        bottom: auto;
        left: 20px;
        right: 20px;
        transform: none;
    }

    /* Show description */
    .interactive-topics .topic:hover .topic-info p {
        display: block;
        opacity: 1;
        font-size: 15px;
        line-height: 1;
        margin-top: 15px;
    }

    /* Keep the inline photo at 70px */
    .interactive-topics .topic:hover .topic-info p img {
        width: 50px !important;
        height: 50px !important;
        float: left;
        margin-right: 8px;
        margin-bottom: 2px;
        object-fit: cover;
    }

    /* Expanded heading */
    .interactive-topics .topic:hover .topic-info h2 {
        font-size: 24px;
        margin: 0 0 15px 0;
    }

}
/* =========================================
   DESKTOP - RESTORE ORIGINAL TEXT POSITION
   ========================================= */

@media screen and (min-width: 701px) {

    .interactive-topics .topic-info {
        position: absolute;
        left: 30px;
        right: 30px;
        bottom: 30px;
        top: auto;
        transform: none;
    }

}
/* =========================================
   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;
}
/*  /* =====================================================
    SIRIUS PAGE 1960
    ELEMENTOR CANVAS + TWENTY FIFTEEN
    REMOVE THEME STRUCTURE FROM THIS PAGE ONLY
    ===================================================== */


/* =========================================
   REMOVE TWENTY FIFTEEN SIDEBAR
   ========================================= */

body.page-id-1960 #sidebar,
body.page-id-1960 .sidebar,
body.page-id-1960 #secondary,
body.page-id-1960 .widget-area {
    display: none !important;
}


/* =========================================
   REMOVE TWENTY FIFTEEN SIDEBAR BACKGROUND
   ========================================= */

body.page-id-1960::before {
    display: none !important;
    content: none !important;
}


/* =========================================
   REMOVE THE THEME'S PAGE WRAPPER LIMITS
   ========================================= */

body.page-id-1960 #page,
body.page-id-1960 .site {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================
   FULL-WIDTH CONTENT
   ========================================= */

body.page-id-1960 #content,
body.page-id-1960 .site-content,
body.page-id-1960 #primary,
body.page-id-1960 .site-main {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}


/* =========================================
   ELEMENTOR CANVAS
   ========================================= */

body.page-id-1960 .elementor,
body.page-id-1960 .elementor-page,
body.page-id-1960 .elementor-section,
body.page-id-1960 .elementor-container {
    max-width: none !important;
}


/* =========================================
   REMOVE THEME BACKGROUNDS
   ========================================= */

body.page-id-1960,
body.page-id-1960 #page,
body.page-id-1960 .site,
body.page-id-1960 .site-content,
body.page-id-1960 #content {
    background: transparent !important;
}


/* =========================================
   REMOVE THEME FOOTER
   ========================================= */

body.page-id-1960 #colophon,
body.page-id-1960 .site-footer {
    display: none !important;
}
body.page-id-1960 {
    background-image: none !important;
}