@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

body {

    margin:0;

    background:#f4f6f9;

    color:#333;

	font-family: "Lato", sans-serif;
	
	font-weight: 400;
	
	font-style: normal;		
	
	
    padding-top:118px;

}


/* =====================================================
   GEOSCIENTISTS CANADA HEADER
====================================================== */

.gc-site-header {

    position:fixed;

    top:0;

    left:0;

    right:0;

    width:100%;

    z-index:1050;

    background:#fff;

    border-bottom:1px solid #ddd;

    box-shadow:
        0 2px 6px rgba(0,0,0,.10);

}


.gc-header-container {

    width:100%;

    max-width:none;

    margin:0;

    padding-left:5px;

    padding-right:28px;

}


/* =====================================================
   TOP UTILITY BAR
====================================================== */

.gc-utility-bar {

    height:45px;

    background:#fff;

    border-bottom:1px solid #eeeeee;

    display:flex;

    align-items:center;

    font-size:12px;

    line-height:1;

}


.gc-utility-bar .gc-header-container {

    display:flex;

    justify-content:flex-end;

    align-items:center;

}


.gc-user-name {

    color:#555;

    font-size:14px;

}


.gc-utility-link {

    color:#555;

    text-decoration:none;

    font-size:14px;

    text-transform:uppercase;

}


/* =====================================================
   LANGUAGE SWITCH
   Geoscientists Canada Style
====================================================== */

.gc-language-toggle {

    display:flex;

    align-items:center;

    gap:9px;

    flex-shrink:0;

    min-width:105px;

    justify-content:flex-end;

}


/* FR / EN TEXT */

.gc-language-label {

    color:#000;

    font-size:15px;

    font-weight:400;

    line-height:1;

}


/*
 * Keep active language exactly the same colour.
 * The switch position indicates the selected language.
 */

.gc-language-label.active {

    color:#000;

    font-weight:400;

}


/* SWITCH */

.gc-language-switch-control {

    position:relative;

    display:inline-block;

    width:44px;

    height:22px;

    margin:0;

    cursor:pointer;

    flex-shrink:0;

}


.gc-language-switch-control input {

    opacity:0;

    width:0;

    height:0;

}


/* WHITE TRACK WITH BLACK BORDER */

.gc-language-slider {

    position:absolute;

    inset:0;

    background:#fff;

    border:2px solid #000;

    border-radius:22px;

    transition:.2s;

}


/* BLACK DOT */

.gc-language-slider::before {

    content:"";

    position:absolute;

    width:14px;

    height:14px;

    left:2px;

    top:2px;

    background:#000;

    border-radius:50%;

    transition:.2s;

}


/* KEEP TRACK WHITE WHEN SWITCHED */

.gc-language-switch-control
input:checked
+
.gc-language-slider {

    background:#fff;

}


/* MOVE BLACK DOT TO EN SIDE */

.gc-language-switch-control
input:checked
+
.gc-language-slider::before {

    transform:translateX(22px);

}


/* =====================================================
   MAIN HEADER
====================================================== */

.gc-main-header {

    position:relative;

    height:60px;

    background:#fff;

    overflow:visible;

}

.gc-site-header {

    overflow:visible;

}


.gc-main-header .gc-header-container {

    height:100%;

    display:flex;

    align-items:center;

}


.gc-main-header .gc-header-container > .d-flex {

    width:100%;

}


.gc-logo-link {

    position:relative;

    display:block;

    align-self:stretch;

    width:310px;

    height:87px;

    flex-shrink:0;

    text-decoration:none;

}


.gc-logo {

    position:absolute;

    top:-30px;

    left:0;

    width:191px;

    height:auto;

    max-width:none;

    z-index:10;

}


.gc-knowledge-nav {

    margin-left:auto;

    height:100%;

    display:flex;

    align-items:center;

    gap:24px !important;

}


.gc-nav-link {

    display:flex;

    align-items:center;

    height:100%;

    color:#3f3f3f;

    text-decoration:none;

    text-transform:uppercase;

    font-size:16px;

    font-weight:500;

    letter-spacing:.02em;

    padding:0 4px;

    border-bottom:3px solid transparent;

    transition:
        color .15s ease,
        border-color .15s ease;

}


.gc-nav-link:hover {

    color:#a51e22;

    border-bottom-color:#a51e22;

}


.gc-main-site-link {

    color:#a51e22;

}


/* =====================================================
   PAGE
====================================================== */

.gc-page-wrapper {

    min-height:
        calc(100vh - 220px);

    padding-top:38px;

    padding-bottom:35px;

}

.list-group-item {

    border:0;

    padding:14px 18px;

}


.list-group-item:hover {

    background:#eef4ff;

}


.card {

    border:0;

    border-radius:12px;

    box-shadow:
        0 3px 15px rgba(0,0,0,.08);

}


.table {

    background:white;

}


.btn {

    border-radius:8px;

}


.list-group-item.active:hover {

    color:#000 !important;

    background-color:#e9ecef;

}


.list-group-item.active:hover i {

    color:#000 !important;

}


.course-lessons .list-group-item.active:hover {

    color:#000 !important;

}


.course-sidebar .list-group-item {

    font-size:.95rem;

}


.list-group-item.active i {

    color:white;

}


.media-preview {

    height:180px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#f8f9fa;

    border-radius:8px;

}


.media-preview img {

    max-height:160px;

    max-width:90%;

}


.media-preview i {

    font-size:70px;

}


.media-thumbnail {

    width:100%;

    height:180px;

    object-fit:contain;

    background:#f8f9fa;

    border-radius:8px;

    padding:10px;

}



/* =====================================================
   FOOTER
====================================================== */

.gc-site-footer {

    background:#333;

    color:#fff;

    padding:30px 0;

    margin-top:35px;

}



.gc-footer-container {

    width:100%;

    max-width:none;

    margin:0;

    padding-left:28px;

    padding-right:28px;

}




.gc-footer-links {

    display:flex;

    flex-wrap:wrap;

    gap:8px 24px;

}


.gc-footer-links a {

    color:#fff;

    text-decoration:none;

    font-size:.86rem;

    text-transform:uppercase;

}


.gc-footer-links a:hover {

    text-decoration:underline;

}


.gc-footer-copyright {

    font-size:.82rem;

    text-transform:uppercase;

    opacity:.9;

}



/* =====================================================
   KNOWLEDGE CENTRE NAVIGATION
====================================================== */

.gc-navigation {

    margin-left:auto;

    padding:0;

    height:100%;

}


.gc-navigation .navbar-collapse {

    height:100%;

}


.gc-knowledge-nav {

    height:100%;

    display:flex;

    align-items:center;

    gap:24px;

}


.gc-navbar-toggler {

    border:0;

    box-shadow:none !important;

    padding:8px;

}


.gc-navbar-toggler:focus {

    box-shadow:none;

}


.gc-navbar-toggler .navbar-toggler-icon {

    width:30px;

    height:30px;

}



/* =====================================================
   RESPONSIVE HEADER
====================================================== */

@media (max-width: 991.98px) {


    .gc-navigation {

        margin-left:auto;

        height:auto;

        position:static;

    }


    .gc-navbar-toggler {

        display:block;

        margin-left:auto;

    }


    .gc-navigation .navbar-collapse {

        position:absolute;

        top:100%;
		
		padding-top: 75px;

        left:0;

        right:0;

        width:100%;

        height:auto;

        background:#fff;

        border-top:1px solid #e5e5e5;

        border-bottom:1px solid #ddd;

        box-shadow:
            0 5px 10px rgba(0,0,0,.12);

    }


    .gc-knowledge-nav {

        width:100%;

        height:auto;

        display:flex;

        flex-direction:column;

        align-items:stretch;

        gap:0;

        padding:10px 28px 16px;

    }


    .gc-nav-link {

        width:100%;

        height:auto;

        display:block;

        padding:14px 4px;

        border-bottom:
            1px solid #ededed;

        font-size:16px;

    }


    .gc-nav-link:hover {

        border-bottom-color:#ededed;

        color:#a51e22;

    }


    .gc-knowledge-nav
    .gc-nav-link:last-child {

        border-bottom:0;

    }


}


@media (
    max-width: 575.98px
) {


    .gc-utility-bar {

        padding-top:8px;

        padding-bottom:8px;

    }


    .gc-utility-bar
    .d-flex {

        flex-wrap:wrap;

        justify-content:center !important;

    }


.gc-logo-link {

    width:200px;

    height:123px;

}


.gc-logo {

    width:170px;

    height:auto;

    top:-12px;

}

    .gc-knowledge-nav {

        flex-direction:column;

        align-items:flex-start !important;

    }


}


#pdfLessonViewer:fullscreen {

    background: #fff;

    padding: 20px;

    overflow: auto;

}


#pdfLessonViewer:fullscreen #pdfCanvasWrapper {

    height: calc(100vh - 190px);

    overflow: auto;

    display: flex;

    justify-content: center;

    align-items: flex-start;

}


#pdfLessonViewer:fullscreen #pdfCanvas {

    max-height: calc(100vh - 210px);

    width: auto !important;

    max-width: 100%;

}


#pdfLessonViewer:fullscreen #pdfControls {

    position: sticky;

    bottom: 0;

    background: #fff;

    padding: 10px 0;

    z-index: 10;

}


/* =====================================================
   CUSTOM VIDEO CONTROLS
====================================================== */

.kc-caption-control {
    position: relative;
    display: inline-block;
}

.kc-caption-menu {
    position: absolute;
    left: 0;
    bottom: 48px;
    width: 190px;
    z-index: 1000;
    overflow: hidden;
}

.kc-caption-menu .list-group-item {
    width: 100%;
    text-align: left;
    border-left: 0;
    border-right: 0;
}

.kc-caption-menu .list-group-item:first-child {
    border-top: 0;
}

.kc-caption-option.active::before {
    content: "✓";
    display: inline-block;
    width: 22px;
    font-weight: bold;
}

.kc-caption-option:not(.active)::before {
    content: "";
    display: inline-block;
    width: 22px;
}

.kc-video-controls .btn {
    min-width: 44px;
}

.kc-video-controls {
    width: 100%;
}


/* =========================================================
   CUSTOM CAPTION DISPLAY
   ========================================================= */

.kc-video-wrapper {
    position: relative;
}


/*
 * Normal page view:
 * captions appear BELOW the video.
 */

.kc-caption-display {
    display: none;
    width: 100%;
    background: #212529;
    color: #fff;
    text-align: center;
    font-size: 1.1rem;
    line-height: 1.5;
    padding: 10px 15px;

    /*
     * Reserve enough space for
     * three lines of captions.
     */
    min-height: calc(3em * 1.5 + 20px);
}

/*
 * Only show the caption area when
 * there is active caption text.
 */

.kc-caption-display.active {
    display: block;
}


/*
 * Fullscreen:
 * move captions over the bottom
 * of the video.
 */

.kc-fullscreen-wrapper:fullscreen .kc-caption-display {
    position: absolute;
    left: 5%;
    right: 5%;
    bottom: 20px;
    width: 90%;
    background: transparent;
    font-size: 1.4rem !important;
    padding: 0;
    z-index: 100;
    pointer-events: none;
}


.kc-fullscreen-wrapper:fullscreen .kc-caption-display span {
    display: inline;
    background: rgba(0, 0, 0, 0.8);
    padding: 4px 8px;
    line-height: 1.7;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}


/*
 * Safari fullscreen support.
 */

.kc-fullscreen-wrapper:-webkit-full-screen .kc-caption-display {
    position: absolute;
    left: 5%;
    right: 5%;
    bottom: 20px;
    width: 90%;
    background: transparent;
    font-size: 1.4rem;
    padding: 0;
    z-index: 100;
    pointer-events: none;
}


.kc-fullscreen-wrapper:-webkit-full-screen .kc-caption-display span {
    display: inline;
    background: rgba(0, 0, 0, 0.8);
    padding: 4px 8px;
    line-height: 1.7;
}


/* =========================================================
   VIDEO TRANSCRIPT
   ========================================================= */

.kc-transcript-panel {
    width: 100%;
}

.kc-transcript-content {
    height: 760px;
    overflow-y: auto;
    scroll-behavior: smooth;
}


.kc-transcript-content {
    overscroll-behavior: contain;
}


/*
 * Individual VTT cue.
 */

.kc-transcript-cue {
    display: block;
    width: 100%;
    border: 0;
    border-bottom: 1px solid #dee2e6;
    background: transparent;
    text-align: left;
    padding: 12px 14px;
    cursor: pointer;
    transition:
        background-color 0.15s ease,
        border-left-color 0.15s ease;
}

.kc-transcript-cue:last-child {
    border-bottom: 0;
}

.kc-transcript-cue:hover {
    background: #f8f9fa;
}


/*
 * Timestamp.
 */

.kc-transcript-time {
    display: block;
    font-size: 0.75rem;
    color: #6c757d;
    margin-bottom: 3px;
}


/*
 * Caption text.
 */

.kc-transcript-text {
    display: block;
    line-height: 1.4;
}


/*
 * Currently playing caption.
 */

.kc-transcript-cue.active {
    background: #e7f1ff;
    border-left: 4px solid #0d6efd;
    padding-left: 10px;
}


/*
 * Transcript language buttons.
 */

.kc-transcript-language-button.active {
    font-weight: 600;
}


/*
 * Transcript words.
 */

.kc-transcript-word {
    display: inline;
    border-radius: 3px;
    padding: 1px 2px;
    margin: 0 -1px;
    cursor: pointer;
    transition:
        background-color 0.08s ease,
        color 0.08s ease;
}


/*
 * Word currently being spoken.
 */

.kc-transcript-word.active-word {
    background: #ffc107;
    color: #212529;
}


/*
 * Slightly more breathing room
 * between transcript sentences.
 */

.kc-transcript-text {
    line-height: 1.55;
}


/* =========================================================
   FULLSCREEN VIDEO / TRANSCRIPT
   ========================================================= */

.kc-fullscreen-wrapper:fullscreen,
.kc-fullscreen-wrapper:-webkit-full-screen {
    width: 100%;
    height: 100%;
    background: #000;
    display: flex;
    flex-direction: column;
    padding: 20px;
}


.kc-fullscreen-wrapper:fullscreen .kc-fullscreen-layout,
.kc-fullscreen-wrapper:-webkit-full-screen .kc-fullscreen-layout {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    gap: 20px;
}


.kc-fullscreen-wrapper:fullscreen .kc-fullscreen-video-area,
.kc-fullscreen-wrapper:-webkit-full-screen .kc-fullscreen-video-area {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}


.kc-fullscreen-wrapper:fullscreen .kc-video-wrapper,
.kc-fullscreen-wrapper:-webkit-full-screen .kc-video-wrapper {
    width: 100%;
}


.kc-fullscreen-wrapper:fullscreen .kc-fullscreen-transcript-slot,
.kc-fullscreen-wrapper:-webkit-full-screen .kc-fullscreen-transcript-slot {
    flex: 0 0 32%;
    max-width: 520px;
    min-width: 320px;
    min-height: 0;
}


/*
 * Transcript card fills the available
 * fullscreen height.
 */

.kc-fullscreen-wrapper:fullscreen .kc-transcript-panel,
.kc-fullscreen-wrapper:-webkit-full-screen .kc-transcript-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
}


.kc-fullscreen-wrapper:fullscreen .kc-transcript-content,
.kc-fullscreen-wrapper:-webkit-full-screen .kc-transcript-content {
    flex: 1 1 auto;
    height: auto;
    max-height: none;
    min-height: 0;
    overflow-y: auto;
}


/*
 * Controls remain along the bottom.
 */

.kc-fullscreen-wrapper:fullscreen .kc-video-controls,
.kc-fullscreen-wrapper:-webkit-full-screen .kc-video-controls {
    flex: 0 0 auto;
    margin-top: 15px !important;
}


/*
 * In fullscreen the video shouldn't
 * exceed the available screen height.
 */

.kc-fullscreen-wrapper:fullscreen video,
.kc-fullscreen-wrapper:-webkit-full-screen video {
    max-height: calc(100vh - 100px);
    object-fit: contain;
}