/* Header banner .keyart */
.overlay-banner.keyart {
    /* For Animation Effect */    
    transition: 3.3s, filter 1.5s;
    overflow: hidden;
}
.overlay-banner.keyart .image img{
    height: 100%;    max-height: 450px;    object-fit: cover;    object-position: center 37%;
}
.overlay-banner.keyart .text{
    transform-origin: left center;
    left: -50%;
    transition: left 2.3s;
    position: relative;
    width: 50%;
}
@media (max-width: 979px) {
    .overlay-banner.keyart .text{    
        left: -100%;
        width: unset;
    }
}
.overlay-banner.keyart .text h1 {
    /* font-size: clamp(54px, 54px + 0.06666666667 * (100vw - 900px), 90px);    
    padding-top: 0.15em;
    line-height: 1em;
    padding-bottom: 0; */
}


/* 3 figure section */
.red.content-teaser-figure {
    background-image: url(https://www.sfu.ca/content/dam/sfu/main/learning/advancing-teaching-learning/due-tone.jpg);
    /* min-height: 420px; */
    background-size: cover;
    background-position: 55% 40%;
}
/* Fix special character line height */
.text.parbase .graphics p sup { line-height: 0.7em;}

/* General - Effect */
.fade-in { opacity: 1; /* transition:opacity 3.3s;*/ }

/* General Style - Vertical align cewtner */
/* For Column control */
.c1-v-align-center .c1, .c2-v-align-center .c2,
.c3-v-align-center .c3, .c4-v-align-center .c4,
.all-v-align-center .c1, .all-v-align-center .c2,
.all-v-align-center .c3, .all-v-align-center .c4 { align-self: center; }