@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css");
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,800,700);

:root {
    /* Required fix. */
    --content-scrollbar-width: 0px;

    /* button-like tag colours */
    --button-like-tag-primary: rgb(240,240,240);
    --button-like-tag-secondary: rgb(220,220,220);
    --button-like-tag-tertiary: rgb(200,200,200);

    --main-menu-highlight-color: rgb(151,212,233);
    
    --audience-bar-height: 46px;

    /* Unit Footer Colours */
    --clf-unit-footer-bg-color: #0055B7;
    --clf-unit-footer-text-color: #ffffff;
    --clf-unit-footer-link-color: #ffffff;
    --clf-unit-footer-link-color-hover: #ffffff;
    --clf-unit-footer-icon-color: #ffffff;
    
    --wp--preset--color--black: #000000;
    --wp--preset--color--cyan-bluish-gray: #abb8c3;
    --wp--preset--color--white: #ffffff;
    --wp--preset--color--pale-pink: #f78da7;
    --wp--preset--color--vivid-red: #cf2e2e;
    --wp--preset--color--luminous-vivid-orange: #ff6900;
    --wp--preset--color--luminous-vivid-amber: #fcb900;
    --wp--preset--color--light-green-cyan: #7bdcb5;
    --wp--preset--color--vivid-green-cyan: #00d084;
    --wp--preset--color--pale-cyan-blue: #8ed1fc;
    --wp--preset--color--vivid-cyan-blue: #0693e3;
    --wp--preset--color--vivid-purple: #9b51e0;
    --wp--preset--color--primary-blue: #002145;
    --wp--preset--color--secondary-blue: #0055b7;
    --wp--preset--color--tertiary-blue: #00a7e1;
    --wp--preset--color--quaternary-blue: #40b4e5;
    --wp--preset--color--quinary-blue: #6ec4e8;
    --wp--preset--color--senary-blue: #97d4e9;
    --wp--preset--color--primary-blue-alt: #193056;
    --wp--preset--color--secondary-blue-alt: #1f385f;
    --wp--preset--color--tertiary-blue-alt: #D7E0E7;
    --wp--preset--color--primary-light-grey: #E6E6E6;
    --wp--preset--color--primary-success-green: #BBEEBE;
    --wp--preset--color--primary-caution-yellow: #FCE34D;
    --wp--preset--color--primary-warning-orange: #E56317;
    --wp--preset--color--primary-alert-red: #F42626;
    --wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);
    --wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);
    --wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);
    --wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);
    --wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);
    --wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);
    --wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);
    --wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);
    --wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);
    --wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);
    --wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);
    --wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);
    --wp--preset--gradient--primary-blue-to-transparent-from-bottom: linear-gradient(transparent 50%,rgba(0,33,69,.8) 80%);
    --wp--preset--font-size--small: clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.227), 1rem);
    --wp--preset--font-size--medium: clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.227), 1.125rem);
    --wp--preset--font-size--large: clamp(1.65rem, 1.65rem + ((1vw - 0.2rem) * 0.227), 1.8rem);
    --wp--preset--font-size--x-large: 2.25rem;
    --wp--preset--font-size--xx-large: clamp(4rem, 4rem + ((1vw - 0.2rem) * 10.909), 10rem);
    --wp--preset--font-family--system-sans-serif: 'Open Sans', -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
    --wp--preset--font-family--system-serif: 'Lora', Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    --wp--preset--spacing--20: 0.44rem;
    --wp--preset--spacing--30: 0.67rem;
    --wp--preset--spacing--40: 1rem;
    --wp--preset--spacing--50: 1.5rem;
    --wp--preset--spacing--60: 2.25rem;
    --wp--preset--spacing--70: 3.38rem;
    --wp--preset--spacing--80: 5.06rem;
    --wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
    --wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
    --wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
    --wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);
    --wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);
    
    --wp--style--global--content-size: 1200px;
    
}

/**
 * CLF Theme Adds a margin to Query Loops (as they're output as a ul).
 * Remove that.
 */
ul.wp-block-post-template {
    margin: 0;
    padding: 0;
}

/**
 * Some helper classes to deal with things the block editor can't currently do.
 *
 * 1. z-index
 */
.vert-stack-up-1 {
    z-index: 1;
    position: relative;
}


/**
 * Button-like tags.
 */
.button-like-tag a,
a.like-tag,
.editor-styles-wrapper .button-like-tag a {
    text-decoration: none;
    padding: 0.5rem 1rem;
    background: #f0f0f0;
    margin-right: 1rem;
    margin-bottom: 0.75rem;
    border-radius: 3px;
    color: black !important;
    opacity: 0.8;
    transition: 0.3s linear all;
    display: inline-block;
}

.button-like-tag a:hover,
a.like-tag:hover {
    opacity: 1;
}

.button-like-tag a:first-of-type,
.event-tags a:first-of-type {
    background: var(--button-like-tag-primary);
}

.button-like-tag a:nth-of-type(2n),
.event-tags a:nth-of-type(2n) {
    background-color: var(--button-like-tag-secondary);
}

.button-like-tag a:nth-of-type(3n),
.event-tags a:nth-of-type(3n) {
    background-color: var(--button-like-tag-tertiary);
}

/**
 * Home Page Hero, Main title not underlined by default.
 */
.home-page-hero h1 a,
.editor-styles-wrapper .home-page-hero h1 a {
    text-decoration: none;
}

/**
 * The home page highlights all need to be the same height.
 * And with the button horizontally aligned.
 * And some font adjustments for the editor.
 */

/* Apply Flexbox to the parent container */
.home-page-highlights-template {
    display: flex;
    flex-wrap: wrap;
}

/* Ensure each post takes equal height */
.home-page-highlights-template .wp-block-post {
    display: flex;
    flex-direction: column;
    flex: 1 1 30%;
    box-sizing: border-box;
    margin-bottom: 2vw;
}

/* Flexbox for the highlight group */
.home-page-highlight {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}

/* Align button elements horizontally at the bottom */
.highlight-button {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
    width: 100%;
}

.highlight-button .wp-block-buttons,
.editor-styles-wrapper .is-layout-constrained .highlight-button .wp-block-buttons {
    margin-right: 0 !important;
}

.editor-styles-wrapper  .home-page-highlights h2 a {
    text-decoration: none;
}

/**
 * Audience Bar. (and main menu bar tweak to accommodate this)
 */

/**
 * Remove Drop Shadow from the Main Menu
 */
html #ubc7-unit {
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}

html .navbar .nav > .active > a,
html .navbar .nav > .active > a:hover,
html .navbar .nav > .active > a:focus {
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}

/* Shuffle over to the left the main menu, otherwise we have a 3-stepped menu. */
html .navbar .nav {
    margin-left: -15px;
}

.menu-audience-bar-container ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: left;
    height: var(--audience-bar-height);
    padding-left: 3%;
}

.menu-audience-bar-container ul:before {
    font-family: FontAwesome;
    display: inline-block;
    content: "\f007";
    position: relative;
    left: -1vw;
}

.menu-audience-bar-container ul li {
    display: inline-block;
    font-size: 1em;
    margin: 0;
    height: var(--audience-bar-height);
}

.menu-audience-bar-container ul li a {
    text-decoration: none;
    margin: 0;
    padding: 0 1vw;
    height: var(--audience-bar-height);
    line-height: 3.25;
    display: inline-block;
    color: #222 !important;
}

.menu-audience-bar-container ul li a:hover,
.menu-audience-bar-container ul li.current-menu-item a {
    background-color: #aaa !important;
}

#content.span9 .hentry {
    padding-top: var(--audience-bar-height);
    padding-botton: var(--audience-bar-height);
}

@media (min-width: 970px) {
    .menu-audience-bar-container ul {
        width: 940px;
        margin: 0 auto;
        padding-left: 1.5vw;
    }
}

@media (min-width: 1200px) {
    .menu-audience-bar-container ul{
        margin: 0;
        padding-left: 3vw;
    }
}

/**
 * Contact Us highlight in the main menu
 */
.main-menu-highlight a {
    background: var(--main-menu-highlight-color) !important;
}

/**
 * Remove the margin bottom at the end of the main content, so the land acknowledgement
 * isn't "floating"
 */
#content > .hentry {
    margin-bottom: 0;
}

/**
 * We don't need the land acknowledgement in the footer on the home page, as we already
 * have placed one higher, more prominently.
 */
.page-id-39678 .footer-land-acknowledgement {
    display: none;
}

/* Subsidiary sidebar in the footer? Empty p tag */
#subsidiary {
    display: none;
}

/**
 * Landing Pages have icons on the news items.
 */
.wp-block-column:has(.single-news) {
    position: relative;
}

@media (min-width: 1200px) {
    .single-news:before {
        position: absolute;
        left: -32px;
        top: 64px;
        display: block;
        height: 64px;
        width: 64px;
        border-radius: 64px;
        background: #BCD2EB;
        content: '';
        border: 3px solid white;
    }

    .single-news:after {
        position: absolute;
        display: block;
        content: url("data:image/svg+xml,%3Csvg fill='%23000000' width='36px' height='36px' viewBox='0 -32 576 576' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M576 240c0-23.63-12.95-44.04-32-55.12V32.01C544 23.26 537.02 0 512 0c-7.12 0-14.19 2.38-19.98 7.02l-85.03 68.03C364.28 109.19 310.66 128 256 128H64c-35.35 0-64 28.65-64 64v96c0 35.35 28.65 64 64 64h33.7c-1.39 10.48-2.18 21.14-2.18 32 0 39.77 9.26 77.35 25.56 110.94 5.19 10.69 16.52 17.06 28.4 17.06h74.28c26.05 0 41.69-29.84 25.9-50.56-16.4-21.52-26.15-48.36-26.15-77.44 0-11.11 1.62-21.79 4.41-32H256c54.66 0 108.28 18.81 150.98 52.95l85.03 68.03a32.023 32.023 0 0 0 19.98 7.02c24.92 0 32-22.78 32-32V295.13C563.05 284.04 576 263.63 576 240zm-96 141.42l-33.05-26.44C392.95 311.78 325.12 288 256 288v-96c69.12 0 136.95-23.78 190.95-66.98L480 98.58v282.84z'/%3E%3C/svg%3E");
        left: -16px;
        top: 80px;
        opacity: 0.7;
    }
}

/**
 * Fix audience bar and land acknowledgement on non-new pages.
 */
body.page-template-default #primary-secondary {
    padding-top: 3rem;
}

body.page-template-default #utility-before-content,
body.single-post #utility-before-content {
    margin-top: -15px;
}

body #content.span9 #utility-before-content .wp-block-group:not(.wp-block).ubc-clf-full,
body #content.span9 #utility-after-content .wp-block-group:not(.wp-block).ubc-clf-full {
    margin-left: calc( -1 * ( ( 100vw - var(--content-scrollbar-width, 0px) - 65.5% ) / 2 ));
}

body.page-template-default:not(.page-id-8362) #content .hentry {
    padding-top: 1em;
}

/**
 * Responsive Styles.
 */

/* Home page feature */
@media (max-width: 1199px) and (min-width: 970px) {
    
    .home-page-feature-title-tags .above-title-text {
        font-size: 13px !important;
    }
    
    .home-page-feature-title-tags h1 {
        font-size: 2rem !important;
    }
    
    .home-page-feature-title-tags .wp-block-column {
        padding: 3rem 3rem 0 3rem !important;
    }
    
    .ctlt-home-featured-item-excerpt p,
    .elevator-pitch p {
        font-size: 1.3rem !important;
    }

}

@media (min-width: 768px) and (max-width: 1100px) {
    html body .cal-like-date .day {
        font-size: 1.5rem !important;
    }
}

@media (max-width: 969px) {
    
    .home-page-feature-title-tags .above-title-text {
        font-size: 12px !important;
    }
    
    .home-page-feature-title-tags h1 {
        font-size: 1.8rem !important;
    }
    
    .ctlt-home-featured-item-excerpt p,
    .elevator-pitch p {
        font-size: 1.2rem !important;
    }
    
    .home-page-feature-title-tags .wp-block-column {
        padding: 3rem 1rem 0 1rem !important;
    }
    
    .wp-block-columns:has(.vert-stack-up-1) {
        margin-top: -3rem !important;
    }
    
    .wp-block-group.vert-stack-up-1 {
        margin-top: 0 !important;
    }
}

@media (min-width: 1200px) {
    h1.wp-block-post-title,
    p.above-title-text,
    .home-page-feature-tags {
        margin-left: calc(((100vw - 1200px)/2) + 1rem - 6vw) !important;
    }
}


/* Hide the Audience Bar Items (which are also added to the main menu) on large screens */
@media (min-width: 768px) {
    .hide-on-large-screens {
        display: none;
    }
}

/* Hide the audience bar entirely on small screens */
@media (max-width: 768px) {
    #utility-before-content .wp-block-group {
        display: none;
    }   
}

/* Land Acknowledgement needs tweaking on smaller screens */
@media (max-width: 768px) {
    html body #content.span9 #utility-after-content .wp-block-group:not(.wp-block).ubc-clf-full {
        margin-left: -20px;
    }
}

/**
 * TEMPORARY (heh) stylings.
 * The block editor doesn't support everything everywhere (...all at once) and so
 * until it does add extra controls to different blocks, we need some temp stylings.
 *
 * 1. Add border-radius to columns.
 * 2. "Upcoming events" grid layout.
 * 3. Styling for the accordion block showing resources, programs, sevices lists.
 * 4. Hide label in temp search block as it will be a filter provided within Query Loop. Demo only.
 * 5. Some links need to not be underlined by default.
 * 6. Adjust list styling to be 'inside'
 * 7. Events block.
 * 8. Differences between new theme and older theme.
 */

/* 1. Border radius on columns */
.temp-give-br-4 {
    border-radius: 4px;
}


/* 2. Upcoming events grid layout */
.temp-split-two-cols .ubc-events__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* On the landing pages, it might be on  grey bg */
.temp-split-two-cols.landing-page-events .single-event {
    padding: 2vw !important;
}

/* Grid layout for larger screens */
@media (min-width: 768px) {
    .temp-split-two-cols .ubc-events__list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2vw;
    }
    
    .temp-split-two-cols .ubc-events__list li:nth-child(1),
    .temp-split-two-cols .ubc-events__list li:nth-child(2),
    .temp-split-two-cols .ubc-events__list li:nth-child(3),
    .temp-split-two-cols .ubc-events__list li:nth-child(4) {
        margin: 0;
    }
}

/* Layout for smaller screens */
@media (max-width: 767px) {
    .temp-split-two-cols .ubc-events__list {
        display: block;
    }
    
    .temp-split-two-cols .ubc-events__list li {
        margin-bottom: 20px; /* Adjust the bottom margin as needed */
    }
}


/* 3. RPS Dropdowns */
.rps-all-dropdown {
    padding: 0.5rem 0.75rem;
    border: 1px solid #a8a8a8;
    border-radius: 3px;
}

.rps-all-dropdown h3 {
    font-size: 1rem;
    padding: 0;
    margin: 0;
}

.rps-all-dropdown ul {
    margin: 1rem 0 1rem 1rem;
}

/* 4. Hide search label. Adjust input layout. Demo only. */
.temp-hide-label label {
    display: none;
}

.rps-all-dropdown .wp-block-search__inside-wrapper {
    margin: 1vw 0 0 0;
}

.rps-all-dropdown .wp-block-search__inside-wrapper input {
    margin-bottom: 0;
    border: 1px solid #a8a8a8;
    box-shadow: none;
    font-size: 1rem;
    padding: 0.75rem;
    border-radius: 4px;
}

/* 5. Some links are not underlined by default */
.link-no-underline,
.link-no-underline a {
    text-decoration: none;
}

.link-no-underline a:hover{
    text-decoration: underline;
}

.link-no-underline-parent-no-hover:hover {
    text-decoration: none;
}

/* 6. Adjust list stylings to be 'inside' */
/**
 * Inside lists
 */
.inside-list {
    list-style-position: inside;
}

/**
 * Adjustments to CLF Footer
 */
#ubc7-unit-footer,
html footer .ubc7-back-to-top {
    background: var(--clf-unit-footer-bg-color);
    color: var(--clf-unit-footer-text-color);
}

#ubc7-unit-footer a,
html footer .ubc7-back-to-top a {
    color: var(--clf-unit-footer-link-color);
}

#ubc7-unit-footer a:hover,
#ubc7-unit-footer a:focus,
html footer .ubc7-back-to-top a:hover,
html footer .ubc7-back-to-top a:focus {
    color: var(--clf-unit-footer-link-color-hover);
}

#ubc7-unit-footer {
    padding-top: 3vw;
    padding-bottom: 3vw;
}

/* Social Icons need to be a different color */
html #ubc7-unit-social-icons i {
    color: var(--clf-unit-footer-icon-color);  
}

html #ubc7-unit-social-icons i:hover {
    cursor: pointer;
}

/* Social Icons Hover */
html #ubc7-unit-social-icons a {
    display: inline-block;
    transition: 0.3s linear opacity;
    opacity: 1;
}

html #ubc7-unit-social-icons a:hover {
    opacity: 0.8;
}

/* Back to top arrow needs to be a different color, but it's not a font... */
html .ubc7-arrow.up-arrow.grey {
    filter: invert(100%) brightness(200%);
}


/**
 * CTLT Events Block. Stop last item having a border bottom when in 1 column.
 * Tweak styling.
 * 
 */

.ubc-events--ctlt .single-event:nth-of-type(3n),
.ubc-events--ctlt .single-event:nth-of-type(4n){
    border-bottom-color: transparent !important;
    margin-bottom: 0 !important;
}

.ubc-events--ctlt .single-event {
    min-height: 0 !important;
}

/**
 * 8. Differences between older and newer theme.
 */

/* After removing breadcrumbs, hide the top bar */
#ubc7-unit-menu + .place_holder + .row-fluid.content.expand,
#ubc7-unit-menu + .row-fluid.content.expand {
 display: none;
}

.page-id-39678 #container,
.page-id-39672 #container,
.page-id-39674 #container,
.page-id-8043 #container, 
.page-id-8040 #container,
.page-id-8362 #container,
.page-id-21931 #container,
.page-id-40284 #container {
    padding-top: 0;
}

/* Colours aren't defined in the theme */
html #content .has-ubc-white-color {
    color: white;
}

html #content .has-primary-blue-background-color {
    background-color: #012145;
}

/* Neither are font-size */
.has-large-font-size {
    font-size: var(--wp--preset--font-size--large) !important;
}

.highlight-title-and-excerpt h2.has-large-font-size {
    font-size: clamp(1.5rem, 1.8rem + ((1vw - 0.2rem) * 0.227), 1.7rem) !important;
    font-weight: 600 !important;
    margin-bottom: 1em !important;
}

/* Stuff has overrides, doesn't inherit */
html #content .has-link-color > *,
html #content .has-text-color > * {
    color: inherit;
}

/* Need to be specific because of overrides */
html #content h3.c-accordion__title {
    font-size: 16px;
    letter-spacing: 0;
    line-height: 1;
    margin: 0.25em 0;
}

html #content .rps-all-dropdown .c-accordion__content {
    margin-top: 2em;
}

html #content .rps-all-dropdown .c-accordion__content .wp-query-filter__search-wrapper {
    max-width: none;
}

html #content .rps-all-dropdown .c-accordion__content .wp-block-post-template.wp-block-post-template {
    margin: 1em 0 0;
}

html #content .rps-all-dropdown .c-accordion__content .wp-block-post-template.wp-block-post-template li {
    margin-bottom: 1em;
}

html #content .rps-all-dropdown .c-accordion__content .wp-block-post-template.wp-block-post-template h4 {
    font-size: 14px; /* Same as featured items above */
}

.ctlt-home-featured-item-excerpt p {
    font-size: 30px;
    line-height: 1.5;
}

.editor-styles-wrapper .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: var(--wp--style--global--content-size);
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Give some more room to the stats */
.wp-block-group:has(.count-up-stat) {
    margin-bottom: 1rem;
}


/* ========================================================
== Fonts STuff
========================================================*/
.entry-content,
h1,
h2,
h3,
h4,
h5,
h6,
p,
#ubc7-unit-menu .nav a,
.lead,
.sidenav a,
ul,
li,
.btn,
input,
button,
select,
textarea,
.breadcrumb {
  font-family: 'Open Sans', "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  text-rendering: optimizelegibility;
}

.trail-end {
  margin-left: 10px;
}
.sidenav .accordion-heading:hover,
.sidenav .accordion-heading a:hover,
.sidenav .accordion-heading:hover a:focus,
.sidenav .accordion-heading:hover a:active,
.sidenav .accordion-heading:hover .accordion-toggle,
.sidenav .accordion-inner a:hover {
  background-color: #0055B7 !important;
  color: #fff;
}
.header-icon > p {
  display: none;
}
.page-10 #content .accordion-shortcode {
  margin-bottom: 0;
  padding: 0;
}
.page-10 #content .accordion-group {
  border: none;
  margin: 0;
  padding: 0;
}
.page-10 #content .accordion-toggle {
  margin: 0;
  padding: 0;
  display: inline-block;
}
.page-10 #content .accordion-heading a:hover,
.page-10 #content .accordion-heading a:active,
.page-10 #content .accordion-heading a:focus {
  background-color: transparent;
  background: none;
  color: #0055B7;
}
.menu-audience-menu-container ul.menu {
  float: right;
  margin: 0 11px 0 0;
}
.menu-audience-menu-container li {
  list-style: none;
  text-align: center;
  padding: 5px 11px;
  float: left;
}
#content .accordion-heading a:hover,
#content .accordion-heading a:active,
#content .accordion-heading a:focus {
  background-color: #0055B7;
  color: #fff;
}
#ubc7-unit {
  box-shadow: none;
  -moz-box-shadow: inset none;
  -webkit-box-shadow: none;
}
.featured-images-pages {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0 auto 20px auto;
  width: 250px;
  max-width: 250px;
  height: 250px;
  max-height: 250px;
  float: right;
  -webkit-border-radius: 500px;
  -moz-border-radius: 500px;
  border-radius: 500px;
  padding: 4px;
  border: 4px solid white;
  overflow: hidden;
  position: relative;
}
.featured-images-pages img {
  max-width: none;
  width: auto;
  height: 350px;
  margin-top: -10px;
  position: absolute;
  margin-left: -10px;
  margin-right: -10px;
  left: 0;
  right: 0;
}
@media screen and (max-width: 767px) {
  #content .lead {
    font-size: 18px;
    font-weight: 400;
  }
  .featured-images-pages {
    float: none;
    clear: both;
    margin: 0 auto 10px;
    display: block;
  }
}
@media (min-width: 767px) {
  .featured-images-pages {
    width: 275px;
    max-width: 275px;
    height: 275px;
    max-height: 275px;
    float: right;
    clear: none;
    margin-left: 20px;
  }
}
@media screen and (min-width: 979px) {
  .featured-images-pages {
    width: 310px;
    max-width: 310px;
    height: 310px;
    max-height: 310px;
  }
}
@media screen and (min-width: 1200px) {
  .featured-images-pages {
    width: 340px;
    max-width: 340px;
    height: 340px;
    max-height: 340px;
  }
}
/* ========================================================
== Landing boxes
========================================================*/
.landing-boxes .span4 {
  margin-bottom: 30px;
}
.landing-boxes h3 {
  margin: 15px 0 20px;
  font-size: 186.4%;
  line-height: 163.3%;
  margin: 0 0 3%;
  letter-spacing: 2px;
}
#content .landing-boxes h3 a:hover {
  text-decoration: underline;
}
@media screen and (max-width: 767px) {
  .landing-boxes .span4 {
    border-top: none;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
  }
}
/* ========================================================
== Site Wide
========================================================*/
/* ----- #container a[href$=".pdf"], #container a[href$=".doc"], #container a[href^="http://"]:not([href*="tlef2.sites.olt.ubc.ca/"]), #container a[href^="https://"]:not([href*="tlef2.sites.olt.ubc.ca/"]) {
    text-decoration: none;
}

#container a[href$=".doc"]:after, #container a[href$=".pdf"]:after, #container a[href^="http://"]:not([href*="tlef2.sites.olt.ubc.ca/"]):after, #container a[href^="https://"]:not([href*="tlef2.sites.olt.ubc.ca/"]):after {
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
}

#content a[href^="http://"]:not([href*=".sites.olt.ubc.ca/"]):after, #content a[href^="https://"]:not([href*=".sites.olt.ubc.ca/"]):after {
    content: ' \F08E';
}

#container a[href$=".pdf"]:after, #container a[href$=".doc"]:after {
    content: ' \F15B'!important;
} ----*/
/*-------------- Full width --------------*/
body.full-width {
  background-color: #FFF;
}
.full-width .full-width-container {
  margin-right: auto;
  margin-left: auto;
}
.full-width-container {
  width: 940px;
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  padding: 0;
}
@media screen and (max-width: 979px) {
  .full-width-container {
    margin-left: 0;
    margin-right: 0;
    width: auto;
  }
}
@media screen and (min-width: 1200px) {
  .full-width-container {
    width: 1170px;
    display: block;
    margin: 0 auto;
  }
}
#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6,
#content h1 a,
#content h2 a,
#content h3 a,
#content h4 a,
#content h5 a,
#content h6 a,
#content a {
  color: #0055B7;
}
#content h1 {
  font-size: 300.2%;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 2px;
  margin: 0 0 1.7%;
}
#content h2 {
  font-size: 235.2%;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 2px;
  margin: 0 0 1.7%;
}
#content h3 {
  font-size: 176.4%;
  font-weight: 400;
  line-height: 166.6%;
  margin: 0 0 1.3%;
  letter-spacing: 1px;
}
#content h4 {
  font-size: 141.1%;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 133.3%;
  margin: 0 0 1%;
}
#content h5 {
  font-size: 117.6%;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 140%;
  margin: 0 0 0.8%;
}
#content h6 {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 24px;
  margin: 0 0 0.6%;
}
#content h1.page-title {
  margin-top: 10px;
}
.l1-column #content h1.page-title {
  font-size: 400%;
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 133.3%;
  margin: 0 0 3%;

  text-align: left;
}
@media screen and (max-width: 767px) {
  .l1-column #content h1.page-title {
    text-align: center;
    font-size: 200%;
  }
}
#content a,
.widget a {
  color: #0055B7;
  text-decoration: none;
}
/* just need to add class "external_link" to any anchor to create external link icon.*/
#content a.external_link:after {
 content: "\f35d";
    font-family: "Font Awesome 5 Free"; 
      font-size: 15px;
    font-weight: 600;
  font-style: normal;
  display: inline-block;
  text-decoration: none;
  padding-left: 3px;
}


.alert-special {
  margin: 25px 0;
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: transparent;
  border-color: #0055B7;
  border-right: none;
  border-left: none;
  font-size: 16px;
}
#content a:hover,
.widget a:hover {
  color: #1c89c7;
  text-decoration: underline;
}
p {
  margin: 0 0 2%;
  font-weight: 400;
  color: #222;
  font-size: 15px;
  line-height: 24px;
}
.ctlt-text-color {
  color: #0055B7;
}
.ctlt-bg-color {
  background-color: #0055B7;
}
#content .ctlt-bg-color a {
  color: #FFF;
}
.white,
#content a.white,
#content .white a,
#content a.white:hover,
.white a:hover {
  color: #fff;
}
.lead {
  font-size: 26px;
  font-weight: 300;
  line-height: 40px;
  margin: 0 0 3%;
  letter-spacing: 1px;
   color: #696969;
}
.poster {
  border-top: 1px solid #0055B7;
  padding-top: 30px;
  border-bottom: 1px solid #0055B7;
  padding-bottom: 30px;
  font-size: 146.4%;
}
.uppercase {
  text-transform: uppercase;
}
a.btn-ubc {
  margin-top: 15px;
  background: none;
  background-color: transparent;
  border-color: #0055B7;
}
.ctlt-accordion-btn .accordion-group {
  border: none;
}
.ctlt-accordion-btn .accordion-toggle {
  display: inline-block;
}
.ctlt-accordion-btn .accordion-inner {
  background-color: #0055B7;
  color: #ffffff;
}
.ctlt-accordion-btn .accordion-inner,
.ctlt-accordion-btn .accordion-toggle {
  border: 1px solid #0055B7;
}
#content a.btn-ubc:hover {
  color: #fff;
  background-color: #0055B7;
  border-color: #0055B7;
  text-decoration: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
@media screen and (max-width: 767px) {
  .alignright,
  .alignleft {
    float: none;
    display: block;
    margin: 10px auto;
  }
}
.wp-dropdown select {
  width: 100%;
}
/* ========================================================
== Landing Pages Header
========================================================*/
/* ADDED AUG 20 */
.header-img-container img {
  display: block;
  margin: 0 auto;
  min-width: 100%;
}
@media screen and (max-width: 979px) {
  .header-img-container {
    margin-right: -20px;
    margin-left: -20px;
  }
}
/* ========================================================
== Profile STuff
========================================================*/
.archive .user-avatar-display-image {
  width: 90%;
}
.name h2 a {
  font-weight: normal;
  color: #0055B7;
}
.position {
  text-transform: uppercase;
}
.picture.field-item {
  min-height: 20px;
}
.phone.field-item {
  display: block;
  clear: none;
}
.email.field-item {
  display: block;
  clear: none;
}
.type-separator,
.telephone .type {
  display: none;
}
.field-item-taxonomy .field,
.text-input {
  font-size: 16px;
  color: #333;
  display: block;
  float: none!important;
}
.profile_cct_expertie.field-item {
  margin-left: 50%;
}
.singular-profile_cct #primary-secondary {
  display: none;
}
.singular-profile_cct #header-shell {
  float: left;
  width: 40%;
}
.singular-profile_cct #tab-id-1 {
  float: right;
  width: 60%;
  clear: none;
}
.singular-profile_cct .phone.field-item,
.singular-profile_cct .email.field-item {
  clear: left;
}
.singular-profile_cct .entry-meta {
  display: none;
}
.singular-profile_cct #tab-id-1 {
  margin-top: 40px;
}
/* ========================================================
== Primary Nav customization
========================================================*/
/* == make last menu item stick to the right */
@media (min-width: 979px) {
  div.navbar-inner ul.nav > li:last-child {
    /*float: right;*/
  }
  /* section just to make menu float right */
  div.navbar-inner ul.nav > li {
    float: left;
  }
  /* end float right main menu */
  /*.navbar .nav {
       float:right;
      }*/
}
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus,
#ubc7-unit-menu .nav > li.active > .btn-group,
#ubc7-unit-alternate-navigation .nav > li.active > .btn-group {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  text-shadow: none;
}
/* make submenu for sites right align */
#ubc7-unit-menu div.navbar-inner ul.nav > li:last-child > .btn-group > ul.dropdown-menu {
  /*right: 0;
 left: auto;*/

}
/* == make menu colours correct */
div.navbar-inner .btn-group .btn {
  /*color: #646464 !important; -- removed to make colour correct*/

  border-right: 1px;
}
#ubc7-unit-menu .nav-collapse .nav > li > a:hover {
  /* home button */

  background-color: white !important;
  color: #0055B7 !important;
}
div.navbar-inner .btn-group:hover,
div.navbar-inner .btn-group:hover .btn {
  /* menu-item section */

  background-color: white !important;
  color: #0055B7 !important;
}
#ubc7-unit-menu .btn-group button:hover {
  /* menu-item button */

  background-color: white !important;
  color: #0055B7 !important;
}
#ubc7-unit-menu .dropdown .btn-group:hover button .ubc7-arrow {
  margin-top: 2px;
}
#ubc7-unit-menu .dropdown:hover .btn-group .ubc7-arrow,
#ubc7-unit-menu .dropdown:hover .dropdown-toggle .ubc7-arrow,
#ubc7-unit-alternate-navigation .dropdown:hover .btn-group .ubc7-arrow {
  /* force arrow to stay blue */

  background: url('https://cdn.ubc.ca/clf/7.0.4/img/ubc7-clf-sprite-blue.png') no-repeat -1178px -261px !important;
}
/* ADDED AUG 20 */
#ubc7-unit-menu .dropdown .btn-group:hover button:hover {
    background: #f6f6f6!important;
}
/* End Aug 20 */
#ubc7-unit-menu .dropdown .btn-group.open:hover button .ubc7-arrow {
  background-position: -1207px -261px !important;
}
#ubc7-unit-menu .nav > li.active > a,
#ubc7-unit-menu .nav > li.active > .btn-group {
  /* deal with active menu-item colour */

  background-color: white;
  color: #0055B7 !important;
}
#ubc7-unit-menu .nav-collapse .dropdown-menu a:hover,
.dropdown-menu .active > a {
  /* dropdown highlighting */

  background-color: white !important;
  color: #0055B7 !important;
}
#ubc7-unit-menu li.current-page-ancestor,
#ubc7-unit-menu li.current-page-ancestor > .btn-group,
#ubc7-unit-menu li.current-page-ancestor > .btn-group .btn {
  background-color: #fff !important;
}


@media screen and (max-width: 979px) {
  #ubc7-unit-menu .nav > li.active > .btn-group.open .dropdown-menu a,
  #ubc7-unit-menu .nav > li.current_page_parent > .btn-group.open .dropdown-menu a {
    background-color: #e7f4fc;
  }
  #ubc7-unit-menu .nav > li.active > .btn-group > a,
  #ubc7-unit-menu .nav > li.active > .btn-group > .btn,
  #ubc7-unit-menu .nav > li.current_page_parent > .btn-group > a,
  #ubc7-unit-menu .nav > li.current_page_parent > .btn-group > .btn,
  #ubc7-unit-menu .current_page_parent.dropdown:hover .btn-group .ubc7-arrow,
  #ubc7-unit-menu .current-page-ancestor.dropdown:hover .btn-group .ubc7-arrow,
  #ubc7-unit-menu .active.dropdown:hover .btn-group .ubc7-arrow {
    background-color: #0055B7 !important;
    color: #ffffff !important;
  }
  #ubc7-unit-menu .nav > li.current_page_parent .btn-group > a:hover,
  #ubc7-unit-menu .nav > li.current-page-ancestor .btn-group > a:hover {
    color: #ffffff !important;
  }
}
/** frontpage 2nd row menu */
@media screen and (min-width: 979px) {
  #ubc7-audience-menu .navbar-inner {
    background: #e6e6e6;
    display: block;
  }
  .ubc-menu .nav-collapse {
    text-align: right;
  }
  .ubc-menu nav > i {
    font-size: 19px;
    color: #002145;
    position: relative;
    top: -15px;
  }
  .ubc-menu .nav {
    display: inline-block;
    float: none;
    margin: 0;
    margin-right: 10px;
  }
  .navbar {
    margin-bottom: 0px !important;
  }
  #ubc7-audience-menu a {
    color: #002145;
    font-size: 13px;
  }
  .nav-collapse.collapse {
    height: 40px !important;
  }
  #ubc7-audience-menu a:hover {
    background-color: #d8d8d8;
    height: 19px;
  }
}
@media (max-width: 978px) {
  #ubc7-audience-menu {
    display: none;
    margin-bottom: 0px !important;
  }
  #ubc7-audience-menu .navbar {
    margin-bottom: 0px !important;
  }
  .row-fluid.content.expand > .utility.span12 {
    min-height: 0;
  }
}
@media (max-width: 1200px) {
#ubc7-unit-menu ul.nav>li>a, #ubc7-unit-menu ul.nav>li>.btn-group>.btn {
 font-size: 13px   
}
}
/* ========================================================
== Sidenav Usability
========================================================*/
#primary-secondary {
  margin-top: 20px;
}
.sidenav.accordion {
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  border-width: 0 0 1px;
}
.sidenav .accordion-heading {
  border: none;
}
.sidenav.accordion a:hover {
  text-decoration: none;
}
.sidenav .opened a,
.sidenav .single .opened {
  background-color: #0055B7;
  color: #fff;
}
.sidebar .in .accordion-inner {
  background-color: #e7f4fc;
}
.sidebar .in .accordion-inner .accordion-heading {
  border-bottom: 1px solid #d7e0e7;
}
.sidenav .accordion-group .opened .ubc7-arrow {
  background-position: -1207px -227px !important;
}
.sidenav .accordion-heading .accordion-toggle:hover {
  background-color: #1c89c7 !important;
}
.sidenav .opened .right-arrow {
  background-position: -1113px -227px !important;
}
#primary-secondary .in .accordion-inner a.opened {
  background-color: #a4d5f2;
}
.sidenav .accordion-inner a {
  border-color: #a4d5f2;
}

/* ========================================================
== HomePage Content
========================================================*/
.ubc-carousel .carousel-caption {
    background: #0055B7; 
}
.ctlt_tile {
  background: none;
  min-height: 500px;
  margin-top: 0;
  margin-bottom: 30px;
  position: relative;
}
.ctlt_tile_inner {
  padding: 0 20px;
}
#content .ctlt_tile a,
#content .ctlt_tile .title {
  color: #0055B7;
}
.ctlt_tile .title {
  font-weight: 400;
  border-bottom: 1px solid #646464;
}
.ctlt_tile_img {
  display: block;
  margin: 0 auto;
  width: 100%;
}
.ctlt_tile ul {
  margin: 0;
  text-decoration: none;
  list-style-type: none;
}
.ctlt_tile li {
  padding-top: 11px;
}
.front-page-feature-title {
  margin-left: 20px;
  display: none;
}
.home .accordion-toggle {
  font-size: 20px;
}
.home .accordion-heading:hover .accordion-toggle:before {
  color: #fff;
}
.home .accordion-toggle:before {
  margin-right: 10px;
  display: inline;
  width: auto;
  height: auto;
  line-height: normal;
  vertical-align: baseline;
  background-image: none;
  background-position: 0% 0%;
  background-repeat: repeat;
  margin-top: 0;
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  -webkit-font-smoothing: antialiased;
  content: "\F078";
  font-size: 12px;
  color: #888;
}
@media (max-width: 767px) {
  .ctlt_tile {
    width: auto;
    max-width: none;
    min-height: 0;
    padding-bottom: 15px;
    margin-right: -20px;
    margin-left: -20px;
  }
  .ctlt_tile .title {
    padding-bottom: 10px;
    text-align: center;
    font-size: 30px;
  }
  .ctlt_tile ul {
    padding-left: 20px;
    list-style-type: square;
  }
  .ctlt_tile_inner {
    padding: 0;
    margin: 0 20px;
  }
}
/* == Breadcrumb == */
.breadcrumb {
  font-size: 12px;
}
/* ========================================================
== general styles
========================================================*/
#SocialMedia-3 a {
  padding-right: 4px;
}
/* ========================================================
== Custom Tabs Look 
========================================================*/
.nav-tabs,
.nav-tabs > li > a {
  border-color: #0055B7;
}
.home #content ul.nav-tabs {
  border-color: transparent;
  margin-bottom: 0;
  border-bottom: 0;
}
.nav-tabs > li > a {
  margin: 0;
  background: #fff;
  color: #0055B7;
  font-weight: 400;
  border: 1px solid #0055B7;
  border-width: 1px 1px 1px 0;
}
#content .nav-tabs > li > a:hover {
  text-decoration: none;
}
.nav-tabs li:first-child a,
#content .nav-tabs li:first-child a:hover,
#content .nav-tabs li.active:first-child a {
  border-left-width: 1px;
}
#content .nav-tabs > .active > a,
#content .nav-tabs > li > a:hover {
  background-color: #0055B7;
  border: 1px solid #0055B7;
  border-width: 1px 1px 0 0;
  color: #fff;
}

#content .nav-tabs > li > a:hover {
    border-bottom: 1px solid transparent;
}

.home .tab-content {
  padding: 1em;
  border: 1px solid #0055B7;
}
/* ========================================================
== Teching & Learning @ UBC && Professional Development
========================================================*/
.right {
  float: right;
}
.tal-icon {
  float: left;
  padding-right: 30px;
}
.round-box {
  width: 95px;
  height: 90px;
  margin: 18px 15px 0 0;
  float: left;
  text-align: center;
  background: #0055B7;
  color: #FFF;
  font-size: 55px;
  line-height: 80px;
  -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}
.round-box:hover {
  background: #1c89c7;
}
.round-box-small {
  font-size: 40px;
}
.round-box-smaller {
  font-size: 30px;
}
.round-box-smallest {
  font-size: 23px;
}
.pad-text {
  margin-left: 110px;
  margin-top: -40px;
}
.tal-text {
  padding: 0 12%;
}
.social_header_image {
  float: right;
  margin-top: 35%;
}
.social_no_header_image {
  float: right;
  margin-top: 3%;
}
.entry-content .directory_page .row-fluid .span6 h4 {
  font-weight: 300;
  color: #0055B7;
}
.entry-content .directory_page .row-fluid .span6 h4 > strong {
  font-weight: 700;
}
.entry-content .directory_page .row-fluid .span6 h4:hover {
  color: #1c89c7;
}
#post-175 > h1,
#post-177 > h1,
#post-181 > h1,
#post-185 > h1 {
  margin-top: 35%;
}
.tal-image {
  float: left;
  margin-top: -38%;
  margin-left: -15px;
}
@media (min-width: 1200px) {
  .tal-image {
    max-width: 1200px;
  }
}
@media (min-width: 980px) and (max-width: 1199px) {
  .tal-image {
    max-width: 970px;
  }
}
@media (min-width: 768px) and (max-width: 979px) {
  .tal-image {
    max-width: 104%;
  }
}
@media (max-width: 767px) and (min-width: 490px) {
  .tal-image {
    max-width: 106%;
  }
  #post-175 > h1,
  #post-177 > h1,
  #post-181 > h1,
  #post-185 > h1 {
    margin-top: 37%;
  }
  .tal-image {
    float: left;
    margin-top: -75%;
    margin-left: -15px;
  }
}
@media (max-width: 541px) {
  #post-175 > h1,
  #post-177 > h1,
  #post-181 > h1,
  #post-185 > h1 {
    margin-top: 40%;
  }
  .tal-image {
    float: left;
    margin-top: -77%;
    margin-left: -15px;
  }
}
/* ========================================================
== Flexible Learning 
========================================================*/
.sub-sub-heading {
  color: #0055B7;
  font-size: 140%;
  font-weight: 400;
}
a span.sub-sub-heading:hover {
  color: #1c89c7;
}
.sub-sub-heading.heavy {
  font-weight: 700;
}
.fl-asset {
  float: left;
  margin-right: 10px;
}
.fl-text.short {
  width: 75%;
}
.row-fluid > div.span6 {
  float: left;
}
/* ========================================================
== Flexible Learning 
========================================================*/
.sidenav .single a:hover {
  background: #0055B7;
}
/* ========================================================
== Platform and Tools
========================================================*/
.btn:hover {
  background-color: #a30;
}
.btn {
  background-image: none;
  background-color: #0055B7;
}
.btn-group.mixitup a.active {
  background-color: red;
}
.long-box {
  width: 195px;
  height: 195px;
  margin: 18px 15px 0 0;
  float: left !important;
  text-align: center;
  background: #0055B7;
  color: #FFF;
  font-size: 55px;
  line-height: 80px;
  -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}
/*
.long-box-border{
   width:195px;
   height:auto;
   min-height: 217px;
   margin:18px 15px 0 0;
   float:left !important;
   text-align:center;
   background:white;
   border: 3px solid #ccc;
   color: #646464;
   font-size:50px;
   line-height:80px;
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
-moz-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
}
*/
.long-box-border {
  width: 195px;
  height: auto;
  min-height: 217px;
  margin: 18px 15px 0 0;
  float: left !important;
  text-align: center;
  background: #0055B7;
  border: 3px solid #ccc;
  color: white;
  font-size: 50px;
  line-height: 80px;
  -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}
.long-box:hover {
  background: #1c89c7;
}
/*
.long-box-title {
    padding-left:10px;
    line-height: 25px;
    text-align: left;
}
*/
.long-box-title {
  padding-left: 10px;
  line-height: 25px;
  text-align: left;
  color: white;
}
.long-box-excerpt {
  text-align: left;
  padding: 10px;
  line-height: 1.2em;
  font-size: 14px;
  height: 6.3em;
  overflow: hidden;
}
.long-box-links {
  line-height: normal;
  font-size: 0.6em;
  padding-top: 10px;
  text-align: right;
  padding-right: 10px;
}
.long-box-links a {
  color: white;
}
.long-box-small {
  font-size: 40px;
}
.long-box-smaller {
  font-size: 30px;
}
.long-box-smallest {
  font-size: 23px;
}
.long-box-smallerest {
  font-size: 23px;
}
/* ========================================================
== Learner Support table
========================================================*/
table#course-material {
  margin-bottom: 1.4em;
  width: 100%;
  border-left: 1px solid #d1d9de;
  border-top: 1px solid #d1d9de;
  /* Alternate Background Colour */

}
#course-material th {
  font-weight: bold;
  border-bottom: 1px solid #d1d9de;
  /* Alternate Background Colour */

}
#course-material tr.even td {
  background: #EEE;
}
#course-material th {
  border-right: 1px solid #d1d9de;
  border-bottom: 1px solid #d1d9de;
  /* Alternate Background Colour */

  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: left;
  padding: 5px 5px 5px 10px;
  background: #EEE;
}
#course-material td {
  border-right: 1px solid #d1d9de;
  border-bottom: 1px solid #d1d9de;
  /* Alternate Background Colour */

  padding: 5px 5px 5px 10px;
  min-width: 120px;
}
#course-material tfoot {
  font-style: italic;
}
/* ========================================================
== general styles
========================================================*/
hr {
  width: 100%;
}
/* ========================================================
== Audience Menu
========================================================*/
#section-7 {
  background-color: #f1f1f1;
  overflow: hidden;
}
@media screen and (max-width: 979px) {/* ADDED AUG 20 */
    #ubc7-unit .navbar .btn-navbar, #ubc7-unit .btn {/* ADDED AUG 20 */
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none 
    }
    #ubc7-unit .navbar .btn-navbar.audience-button, #ubc7-unit .btn.audience-button {/* ADDED AUG 20 */
        margin-right: 5px;/* ADDED AUG 20 */
        padding: 8px 7px 3px 7px;  /* ADDED AUG 20 */ 
        color: #002145;/* ADDED AUG 20 */
        font-size: 18px;/* ADDED AUG 20 */
    }/* ADDED AUG 20 */
}/* ADDED AUG 20 */
.audience {
  width: 940px;
  display: block;
  margin: 0 auto;
}
.audience .icon-user {
  margin-right: 7px;
  float: right;/* ADDED AUG 20 */
  font-size: 18px;
  color: #002145;
  vertical-align: middle;
  line-height: 2.3;/* ADDED AUG 20 */
}
.audience .brand {
  float: none;
  line-height: normal;
  display: none;
  padding: 0;
}
.audience ul.menu {
  margin: 0;
  padding: 0;
  float: right; /* ADDED AUG 20 */
}
.audience li {
  list-style: none;
  text-align: center;
  float: left;
  line-height: normal;
  line-height: 3; /* ADDED AUG 20 */
}
.audience li:hover {
  background-color: #FFF;
}
.audience li > a,
.audience .btn-group,
.audience li a.btn {
  font-size: 13px;
  color: #001245;
  height: 36px;
}
.audience li > a,
.audience .btn {
  padding: 0 8px;
}
.audience li.active {
  background-color: #646464;
  color: #FFF;
}
.audience li.active a {
  color: #FFF;
}
.audience li.active:hover a {
  color: #002145;
}
.audience li:hover,
.audience li:focus {
  background-color: #fff;
}
.audience .dropdown-menu {
  right: 0;
  left: auto;
  margin: 0;
}
@media (min-width: 979px) {
  .audience .nav-collapse.collapse {
    height: 0!important;
  }
}
@media (max-width: 979px) {
  .utility #section-7.widget {
    margin-left: -20px;
    margin-right: -20px;
  }
  .audience {
    width: 100%;
    margin: 0 auto 0 0;
    display: block;
  }
  .audience ul {
    float: none;
    border-bottom: 1px solid #0055B7;
    margin: 0 auto;
  }
  .audience li {
    text-align: left;
    float: none;
    border-bottom: 1px solid #999;
  }
  .audience li > a {
    font-size: 15px;
    color: #001245;
    display: block;
  }
  .audience ul.menu {
    float: none;
  }
  .audience a.btn-navbar {
    margin: 0 auto;
    clear: both;
    display: block;
    margin-bottom: 0;
    text-shadow: none;
    background-color: #fff;
    background-image: none;
    border-bottom: 1px solid #0055B7;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    text-align: center;
    float: none;
  }
  .audience .btn-navbar,
  .audience a.btn-navbar:hover {
    color: #002145;
  }
  .audience a.btn-navbar,
  .audience .btn-navbar .icon-user {
    font-size: 20px;
  }
  .audience .btn-navbar .icon-user {
    margin: 0 5px 0 0;
    float: none;
  }
}
@media (min-width: 1200px) {
  .audience {
    width: 1170px;
    display: block;
    margin: 0 auto;
  }
}
/* ========================================================
== CTLT Services
========================================================*/
/* == CTLT Services Button ==*/
.other-services {
  margin-bottom: 30px;
}
.other-services .btn-drop .span3 {
  border-bottom: 1px solid #eee;
  padding: 15px 0 5px;
}
.btn-collapse.collapsed {
  border-bottom: 1px solid;
}
.btn-collapse {
  border-bottom: none;
}
#content a.btn-collapse {
  background-color: transparent;
  color: #0055B7;
  box-shadow: none;
}
#content a.btn-collapse.collapsed {
  background-color: #0055B7;
  color: #ffffff;
}
.btn-drop {
  padding-top: 35px;
}
.btn-drop.in {
  border-top: 1px solid #0055B7;
}
.btn-drop .btn {
  margin-bottom: 30px;
}
.btn-collapse .icon-list-alt {
  vertical-align: sub;
}
.btn-collapse.collapsed:after {
  content: "\f078";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  -webkit-font-smoothing: antialiased;
}
.btn-collapse:after {
  content: "\F077";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  -webkit-font-smoothing: antialiased;
}
#content a.btn-collapse:hover,
#content a.btn-collapse.collapsed:hover {
  background-color: transparent;
  color: #0055B7;
}
/* == Services Iso Styles ==*/
.iso {
  margin-top: 30px!important;
  width: 940px !important;
}
@media screen and (max-width: 979px) {
  .iso {
    width: auto !important;
  }
}
@media screen and (min-width: 1200px) {
  .iso {
    margin-top: 30px!important;
    width: 1170px !important;
  }
}
.boxey {
  width: 360px!important;
  height: 220px;
  margin: 0;
  float: none;
}
#content .boxey h3 a {
  margin: 15px 0 20px;
  font-size: 110.4%;
  line-height: 163.3%;
  margin: 0 0 3%;
  letter-spacing: 2px;
}
.services-menu.expand {
  display: inline;
}
.iso-links {
  background-color: transparent;
  display: block;
  overflow: hidden;
  margin: 0 auto;
}
#content .iso-links a {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #444;
  border: solid #0055B7;
  border-width: 1px 0 1px 1px;
  font-size: 14px;
  text-transform: uppercase;
  display: inline-block;
  margin-right: -5px;
  float: none;
  text-align: center;
  padding: 8px 10px;
}
#content .iso-links a:last-child {
    border-width: 1px   
}
#content .iso-links a:first-child {
  border-left-width: 1px;
}
#content .iso-links a:hover,
.iso-nav .services-menu a.current {
  background-color: #0055B7;
  color: #fff;
}
#content .iso-nav .services-menu a.current {
  color: #FFF;
}
.iso-form {
  margin: 0 0 30px;
}
.iso-form.visible {
  display: block;
  width: 80%;
  margin: 0 auto;
}
.iso-form input {
  display: inline;
  width: 50%;
  height: 30px;
  margin: 0 auto;
  border: 1px solid #0055B7;
  box-shadow: none;
  -moz-box-shadow: inset none;
  -webkit-box-shadow: none;
  font-size: 20px;
  line-height: 1.2;
  text-align: center;
}
#content a.iso-search-button {
  display: inline-block;
  height: 38px;
  width: 100px;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  background-color: #fff;
  border-width: 1px;
  border-style: solid;
  border-color: #0055B7;
  color: #0055B7;
  font-size: 18px;
  line-height: 2;
  text-transform: uppercase;
  box-shadow: none;
  -moz-box-shadow: inset none;
  -webkit-box-shadow: none;
}
#content a.iso-search-button:hover,
#content a.iso-search-button:focus {
  background-color: #0055B7;
  color: #fff;
}
@media screen and (max-width: 1200px) {
  #content .iso-links a {
    font-size: 13px;
    padding: 8px 6px;
  }
}
@media screen and (min-width: 979px) {
  .iso-nav .brand {
    display: none;
  }
  .iso-nav .nav-collapse.collapse {
    height: 50px !important;
  }
}
@media screen and (max-width: 767px) {
  .iso {
    width: 100% !important;
  }
  .boxey {
    width: 100%!important;
    height: auto;
    margin: 0;
    border-top: none;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
  }
}
@media screen and (max-width: 979px) {
  .services-menu.expand {
    display: block;
  }
  .iso-form input {
    display: block;
    width: 95%;
  }
  .iso-nav {
    background: none;
  }
  .iso-nav .brand {
    display: inline;
  }
  #content .iso-links a,
  #content .iso-links a.current,
  .iso-nav {
    border: 1px solid #646464;
    border-width: 1px 0 0;
  }
  #content .iso-links a:last-child,
  #content .iso-links a.current:last-child,
  .iso-nav {
    border-bottom: 1px solid;
  }
  #content .iso-links a:hover,
  #content .iso-links a.current,
  .iso-nav .btn-navbar {
    background-color: #646464;
  }
  .iso-links {
    padding-bottom: 15px;
  }
  .iso-form input {
    display: block;
    padding: 0;
    width: 100%;
    margin: 0 auto;
  }
  #content .iso-links a {
    display: block;
    text-align: left;
  }
  #content a.iso-search-button {
    display: block;
    margin: 5px auto;
    width: 120px;
    height: auto;
    padding: 8px 0;
    border-width: 1px;
    line-height: normal;
  }
}
.service-container {
    padding: 15px 0 30px 0;
    border-bottom: 1px solid #ccc;   
}
.landing-boxes {
    border-top: 1px solid #D7E0E7;
    padding-top: 15px;   
}
.course-columns {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}
@media screen and (max-width: 767px) {
    .course-columns {
        -webkit-column-count: 1; /* Chrome, Safari, Opera */
        -moz-column-count: 1; /* Firefox */
        column-count: 1;
    }  
   
}
/* ========================================================
== Courses
========================================================*/
#content h2.course-title {
 font-size: 180%;
 margin: 25px 0 12px 0;
 letter-spacing: normal;
}
#content h2.course-title:first-child {
    margin: 0 0 1.7%;
}
/* table.subject-table {
    margin-bottom: 80px;
} */
.home-edit {
 margin-top: 15px;
 border-top: 1px solid #ccc;
 position: absolute;
 right: 0;
}
.ctlt_tile img {
margin-bottom: 10px
}
#ubc7-unit-social-icons i:hover {
    color: #0055B7   
}
.tab-container {
    position: relative;   
}
.copyright-footer {
    margin-top: 15px;
    padding-top: 9px;
    border-top: 1px solid #D7E0E7;
    font-size: 12px;   
}
blockquote {
border-left: 2px solid #0055B7;
margin: 0 0 20px 15px;
}
blockquote p {
 font-weight: 500;
 font-style: italic;
 line-height: 1.6;
}
/* ========================================================
== Learning Tech
========================================================*/
#content .learn-tech .accordion-toggle {
    padding: 12px 9px;
    font-size: 21px;
    background-color: #0055B7;
 
    color: #fff
}
#content .learn-tech .accordion-inner, #content .learn-tech .accordion-toggle {
    border: none; 
}
#content .learn-tech .accordion-group {
     border: 1px solid #0055B7;   
}
#content .learn-tech .accordion-toggle:hover {
    text-decoration: none;
    background-color: #fff;
    color: #0055B7;
    border-width: 0 0 1px 0;
}
#content .learn-tech a.accordion-toggle:after, #content .learn-tech a.accordion-toggle:before  {
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    -webkit-font-smoothing: antialiased;    
}
#content .learn-tech .wiki-embed-shell .accordion-group:nth-of-type(1) a.accordion-toggle:before{
   content: "\F05A";
   margin-right: 10px;
}
#content .learn-tech .wiki-embed-shell .accordion-group:nth-of-type(2) a.accordion-toggle:before{
   content: "\F164";
   margin-right: 10px;
}
#content .learn-tech .wiki-embed-shell .accordion-group:nth-of-type(3) a.accordion-toggle:before{
   content: "\F06E";
   margin-right: 10px;
}
#content .learn-tech .wiki-embed-shell .accordion-group:nth-of-type(4) a.accordion-toggle:before{
   content: "\F01D";
   margin-right: 10px;
}
#content .learn-tech .wiki-embed-shell .accordion-group:nth-of-type(5) a.accordion-toggle:before{
   content: "\F07C";
   margin-right: 10px;
}
#content .learn-tech .wiki-embed-shell .accordion-group:nth-of-type(6) a.accordion-toggle:before{
   content: "\F0EB";
   margin-right: 10px;
}
#content .learn-tech a.accordion-toggle:after{
  content: "\F107";
  margin-left: 10px;
}
.learn-tech .lead {
    font-size: 150%;
    line-height: 1.7;
}
.wiki-embed-source a {
 word-wrap: break-word   
}
/** Profiles **/
.profilelist-shortcode .profile_cct {
    padding: 20px 0 10px;
    border-bottom: 1px dashed #ccc   
}
.profilelist-shortcode .picture.one-third {
    width: 27%;
    margin-right: 5px
}
.profilelist-shortcode .profile_cct:last-child {
    border: none;
    padding-bottom: 0;
}
.profilelist-shortcode .position {
    font-weight: 600  
}
.profilelist-shortcode img {
    float: none;
    margin-left: 0;
}
.profilelist-shortcode .clone_hard_coded_html_profile_image.one-third {
    width: 30%;
    margin-right: 10px;
}
#content .field-shell h2 {
    font-size: 150%   
}
.field-item > .field-shell > .field:last-child > *:last-child, #content .field-shell h2 {
    margin: 0;
    padding: 0;
    line-height: 1.5
}
.bio .textarea p {
    padding-top: 20px   
}
@media screen and (max-width: 767px) {
.profilelist-shortcode .one-third, .profilelist-shortcode .two-third, .profilelist-shortcode .half {
    width: 100%;
}
.profilelist-shortcode .clone_hard_coded_html_profile_image.one-third, .profilelist-shortcode .picture.one-third {
    width: 100%;
    display: block;
    margin: 0 0 15px;
}   
    
}

/** Flexislider **/
.page-12907 #content .ubc-carousel .carousel-caption h4 {
    margin-right: 160px;   
}
.page-12907 #content .ubc-carousel .carousel-caption h4 a {
    color: #fff
}
.page-12907  #content ul.flex-direction-nav {
    margin-bottom: 0   
}

/** === profile box stuff === **/
.profile-box{
width:250px; float:right; background:#002859; /* Primary Emphasis */
margin:0 0 15px 15px; padding:20px; color:#FFF;
position:relative;
overflow:hidden;
font-family: Myriad Pro, Arial, san-serif;
font-size:1.2em;
}
.profile-box p{
line-height:1.2em;
color:white;
}
.profile-box img{
width:250px;
margin: 20px 0;
}
#content .profile-box h3{
 margin:0; 
 padding:0; 
 text-transform: uppercase;
 font-size: 1.3em;
 color:#FFF;
}
#content .profile-box a{
float:right;
color:#FFF;
text-decoration: underline;
}
/** Weekday event pages **/
#content .events-five-items h1, #content .events-five-items h2, #content .events-five-items h3 {
    margin: 0 0 10px       
}
#content .events-five-items h1 {
    font-size: 220%   
}
#content .events-five-items h2, #content .events-five-items h3 {
     font-size: 180%
     
}

/** Data Visulizer **/
.bounce {
    -webkit-animation-duration: 2s; 
    animation-duration: 2s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    -webkit-animation-timing-function: ease-in-out; 
    animation-timing-function: ease-in-out; 
    animation-iteration-count:infinite; 
    -webkit-animation-iteration-count:infinite; 
} 

@-webkit-keyframes bounce { 
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 
    40% {-webkit-transform: translateY(-30px);} 
    60% {-webkit-transform: translateY(-15px);} 
} 

@keyframes bounce { 
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 
    40% {transform: translateY(-30px);} 
    60% {transform: translateY(-15px);} 
} 

.bounce { 
    -webkit-animation-name: bounce; 
    animation-name: bounce; 
}
.chart-question {
    position: relative;
    clear: both;
}
.three-charts .chart-question {
     margin: 100px 0 16px;   
}
.chart-question a {
    text-transform: uppercase;
    text-align: right;
    display: block;
}
.chart-question a i {
    vertical-align: middle;   
}
#content .chart-question a:hover {
    text-decoration: none  
}
.charts {
    font-size: 16px;
    border: none;
    line-height: 1.5;
    font-weight: 400;
    padding: 0;
    margin: 0 0 0 0;

}
.three-charts .charts {
    min-height: 160px;
}
#content blockquote.charts span small {
    font-weight: 600;
    color: #0680a6;
    margin-bottom: 16px;
}
#content blockquote.charts small:before {
    content: ""   
}
.non-question.charts:before {
    left: auto;
}
.non-question:before {
    content: "”";
    top: -55px;
}
.charts .lead {
    font-size: 325%;
    line-height: 1;   
}
.charts.quote {
    font-size: 18px;
    border: 2px dotted #98d4e8;
    padding: 30px 20px 30px 45px;
    position: relative;
}
#content .charts.quote p {
    position: relative;
    color: #000
}
.charts.quote p:before {
 content: "“"   
}
.charts.quote p:after {
    content: "”"   
}
.non-question.charts:before {
    font-size: 170px;
    color: #98d4e8;
    position: absolute;
    font-family:  Arial, Helvetica, sans-serif;;
    background: #fff;
    top: 10px;
    left:-25px;
    height: 70px;
    box-sizing: border-box;
    line-height: 1
}
.chart-container {
    margin-bottom: 100px   
}
.chartLegend {
    list-style: none;
    margin: 0;
    text-align: center;
    /**-webkit-box-shadow: 0 -8px 6px -6px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 -8px 6px -6px rgba(0, 0, 0, 0.2);
    box-shadow: 0 -8px -6px -6px rgba(0, 0, 0, 0.2); **/
    padding-top: 30px;
    margin: 0 auto 70px;
    clear: both;
    opacity: 0;
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -ms-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in; 
}

.chartLegend ul {
    margin: 0   
}
.chartLegend li {
    display: inline;
    margin-right: 15px;
    font-size: 17px;
}
.teaching .chartLegend li {
    display: block; 
    margin-bottom: 12px;
    text-align: left;
}
.teaching .chartLegend li span {
    display: block ;
    margin-bottom: 12px
}
.two-column .chartLegend li, .three-column .chartLegend li {
    display: block;
    text-align: left;
    margin-bottom: 0.8em
}
.three-charts .chartLegend li {
    font-size: 15px;

}
.chartLegend li span {
    width: 17px;
    height: 17px;
    display: inline-block;
    margin-right: 8px;
    vertical-align: -3px;
    -webkit-border-radius: 500px;
    border-radius: 500px;
}
.chart-span4 .chartLegend li, .piechart .chartLegend li  {  
    display: block;
    text-align: left;
    padding-bottom: 10px;
}
.chart-span4 .chartLegend li {
    font-size: 15px  
}
.columned .chartLegend {
    display: block;
    width: 92%;
    margin: 0 auto;
    clear: both;
    float: none; 
    overflow: auto;
    margin-bottom: 150px
}
.columned .chartLegend li {
    display: block;
    margin-right: 0;
    font-size: 17px;
    text-transform: none;
    font-size: 15px;
    line-height: 1.4
}
.columned .chartLegend li span {
    display: block;
    margin: 0 auto 12px;
}
.chart-span4 .chartLegend {
    padding-bottom: 12px;
    margin-bottom: 25px
}
li.column5 {
    width: 18%;
    float: left;
    margin-left: 2%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#content .data-vis-home .span4 {
    margin-bottom: 20px;
    padding-bottom: 10px;
    height: 440px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}
/** #content .data-vis-home .span4{
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);    
}**/
.data-vis-home p:empty, .data-vis-home .inside-text br  {
    display: none!important   
}
.image {
    height: 240px;
    overflow: hidden;
}
.image img {
    transition: all .9s ease-in-out;
    display: block;
}
.image img:hover, .data-vis-home .span4:hover .image img {
    transform: scale(1.3);
}
.data-vis-home .image-container {
    overflow: hidden;
}
.data-vis-home .image-bg-hover {
    background-size: auto 240px;
    height: 240px;
    overflow: hidden;
    transition: all .3s ease-in-out;
}
.chart-question-outside {
    margin-top: 15px   
}
.chart-question-outside blockquote {
    margin-bottom: 15px   
}
@media screen and (min-width: 1200px) {
    #content .data-vis-home .span4 {
        height: 420px;

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

    .image {
        height: 160px;
    }
}
@media screen and (max-width: 767px) {
    #content .data-vis-home .span4 {
        height: auto;
    }
    .chart-question-outside {
        padding: 0;   
    }
    .charts {
        margin: 0;
        padding: 0;   
    }
    .charts:after {
        right: 0;
    }
     .charts:before {
        left: 0   
     }
    #barChart {
        padding: 0   
    }
    .columned .chartLegend li {
        text-align: left;
        margin-bottom: 12px
    }
    .columned .chartLegend li span {
        display: inline-block;
        margin: 0 7px 0 0;
    }
    li.column5 {
        width: 100%;
        float: none;
        margin-left: 0;
    }
}
@media screen and (max-width: 767px) {
    .data-vis-home .image-bg-hover {
        background-size: cover;
    }
}
.data-vis-home .first {
      background-image: url(https://ctlt2013.sites.olt.ubc.ca/files/2015/09/Screen-Shot-2015-09-14-at-12.40.47-PM.png);    
}
@media screen and (min-width: 767px) { 
    .data-vis-home .image-bg-hover:hover, .data-vis-home .image-bg-hover:focus {
        transform: scale(1.1);    
    }
}
.data-vis-home .inside-text, .chart-span4 .span4 .inside-text {
    padding-right: 13px;
    padding-left: 13px; 
}
.data-vis-home .inside-text p {
    font-size: 14px;
}
#content .data-vis-home .inside-text .title, #content .chart-title {
    padding-top: 24px;
    color: #222;
    font-size: 24px;
    padding-bottom: 16px
}
#content .data-vis-home .inside-text a, #content .data-vis-home blockquote{
    padding-top: 16px;   
}
#content .data-vis-home .inside-text a {
    display: block;
    padding-right: 25px;
    text-transform: uppercase;
    text-align: right;
    font-size: 16px;
    
}
#content .data-vis-home .inside-text a:hover {
    cursor: pointer;   
}
#content .data-vis-home blockquote {
    padding: 0;
    border: 0;
}
#content .data-vis-home blockquote p {
    font-size: 18px;
    line-height: 1.7
}
#content .data-vis-home blockquote footer {
    padding-top: 30px;
    background-color: transparent;
    font-size: 16px;
    font-style: italic;
}
#content .data-vis-home blockquote:before {
    content: "\201C";
    font-size: 40px;

}
#content .data-vis-home blockquote p, #content .data-vis-home blockquote:before {
     display: inline   
}
/** .smoke {
    background-color: #EFEFEF   
}
.energy {
    background-color:  #F7DA64  
} **/
.hide-it {
    opacity: 0;     
}
.reveal {
    opacity: 1!important;
    -webkit-transition: all 1.2s ease-in;
    -moz-transition: all 1.2s ease-in;
    -ms-transition: all 1.2s ease-in;
    -o-transition: all 1.2s ease-in;
    transition: all 1.2s ease-in;  
}
.axis-title {
    text-align: center;
    position: absolute;
    margin-top: 18%;
    -moz-transform: rotate(-90deg);
   -webkit-transform: rotate(-90deg) ;
   -o-transform: rotate(-90deg) ;
   -ms-transform: rotate(-90deg) ;
   transform: rotate(-90deg);
}
.teaching .axis-title {
    margin-top: 12%   
}
.chartBarWorkload.axis-title {
    margin-top: 16%      
}
.axis-title.ta-roles {
    margin-top: 14%    
}
.axis-title.balancing-chart {
  margin-top: 14%  
}
.barChart {
    margin-top: 15%   
}
#chartBarClassSize {
    padding: 20px;   
}
.bar-chart {
    position: relative;   
}
.bar-chart canvas {
    position: relative;
    padding-left: 75px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.bar-chart canvas.ta-roles-chart {
    padding-left: 175px   
}
.bar-chart canvas.workload-chart {
    padding-left: 100px   
}
.bar-chart canvas.balancing-chart {
    padding: 0
}
.ta-roles-legend {
    width: 86%;
    float: right
}
.columm7 {
    float: left;
    width: 14.2857142%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#barChartLegend2 {
    width: 90%;
    display: block;
    margin: 0 0 0 9%;
}
.columned #instructionalTimeBarChartLegend.chartLegend {
    width: 96%;
    margin: 0 auto 35px;
    display: block;

    
}
@media screen and (max-width: 1200px) {
    .bar-chart canvas.balancing-chart {
        padding: 50px
    }    
}
@media screen and (max-width: 767px) {
    .axis-title, .axis-title.ta-roles {
        text-align: left;
        position: relative;
        margin-top: 0;
        -moz-transform: rotate(0deg);
       -webkit-transform: rotate(0deg) ;
       -o-transform: rotate(0deg) ;
       -ms-transform: rotate(0deg) ;
       transform: rotate(0deg);
    }
    .bar-chart canvas, .bar-chart canvas.ta-roles-chart, .bar-chart canvas.workload-chart {
        padding-left: 0!important   
    }
    .columned .chartLegend, .ta-roles-legend {
        width: 100%!important;
        float: none
    }
    #barChartLegend2 {
        width: 100%;
        display: block;
        margin: 0;
    }
    .columm7 {
        float: none;
        width: 100%;
        text-align: center;
    }
}
.bar-chart #barChart {
    width: 95%!important;
    float: right;   
}
.data-vis-home .span4 {
    position: relative;   
}
.light-grey {
    background-color: rgba(200, 200, 200,1);   
}
#content .light-grey-text {
    color: rgba(134,164,183,1);   
}
.light-blue {
    background-color: rgba(94, 134, 159,1);   
}
#content .inside-text.light-blue .link, #content .data-vis-home .inside-text.light-blue .title {
    color:#ffffff   
}
#content .data-vis-home .inside-text.light-blue .title {
    text-align: center;
    font-size: 31px;
    letter-spacing: normal;
    line-height: 1.3;
    padding: 0
}
.ubc-blue {
    background-color: rgba(12,35,68,1);    
}
#content .ubc-blue-text {
    color: rgba(12,35,68,1);    
}
.light-green {
    background-color: rgba(194, 224, 218,1);   
}
#content .light-green-text {
    color: rgba(194, 224, 218,1);   
}
.dark-green {
    background-color: rgba(93, 172, 160,1);   
}
#content .dark-green-text {
    color: rgba(93, 172, 160,1);   
}
#content .data-vis-home .span4 {
    padding-bottom: 0;   
}
.data-vis-home .inside-text {
    position: relative;
    height: 100%;
}
.data-vis-home .inside-text, .hover-caption {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px    
}
.data-vis-home .inside-text p{
    font-size: 28px;
    line-height: 1.3;
    text-align: center;
}
.data-vis-home .inside-text .large {
    display: block;
    font-weight: 700;
    font-size: 120px;
    font-style: normal;
    line-height: 1;
    text-align: center;
    padding-top: 20px;
}
 .axis-title.barChartLegend2 {
    top: 13%   
}
#content .large-mark p {
    color: #fff;
    z-index:1;
    position: relative;
}
.text-background {
    font-size: 350px;
    font-weight: 800;
    z-index: 1;
    position: absolute;
    line-height: 1.2;
    text-align: center;
    left: 25%;
    margin: 0 auto;
}
#content .quote p {
    font-size: 22px;
    color: #fff;
    line-height: 1.5!important;
}
#content .improve .caption {
    font-size: 30px;
    font-weight: 600;
}
.hover-caption {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff;
    height: 100%;
    width: 100%;
	opacity: 0;
    -webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
    z-index: 5
}
.inside-text:hover .hover-caption {
    opacity: 1;
	/** -webkit-transform: translate(15px, 15px);
	-moz-transform: translate(15px, 15px);
	-ms-transform: translate(15px, 15px);
	transform: translate(15px, 15px); **/   
}
.instructional .hover-caption, .recommendations .hover-caption, .recommendations-fac .hover-caption, .teaching-activities .hover-caption {
    background-color: #002145;
    color: #ffffff
}
@media screen and (max-width: 979px) {
    .data-vis-home .inside-text .large {
        font-size: 100px;
    }
    #content .data-vis-home .inside-text.light-blue .title {
        font-size: 23px;
        font-weight: 600
    }
    #content .quote p {
        font-size: 19px;
        color: #fff;
        line-height: 1.5!important;
    }
    .data-vis-home .inside-text p{
        font-size: 25px;
        line-height: 1.3;
        text-align: center;
    }
}
@media screen and (max-width: 967px) {
    .data-vis-home .inside-text {
        min-height: 320px   
    }
    .text-background {
        font-size: 200px;
        left: 40%;
    }
}

/****************** CTLT Intake form ********************/

.gform_wrapper input, .gform_wrapper textarea {
    
    color: #222 !important;

}
@media screen and (min-width: 767px) {
    #gform_fields_84 .gfield:not(.gfield_html) {
        margin-left: 2rem !important;
    }
}

.gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]) {
        padding: 1rem .5rem;   
}

#gform_wrapper_84.gform_wrapper .ginput_complex input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="image"]):not([type="file"]) {
    height: min-content
}
/* Add down arrow to accordions */
.accordion-shortcode .accordion-heading a{
    position: relative;
}
.accordion-shortcode .accordion-heading a:after{
    font-family: 'fontawesome';
    position: absolute;
    display: block;
    content: '\F107';
    right: 12px;
    top: 8px;
    color: #0055B7;
}


/* Hide sidebar menu on resources page. Asked for by Sheridan 23rd August 2021 */
.page-id-8362 #olt-subpages-navigation-widget-3 {
    display: none;
}

/* Sometimes we need to reduce the vertical space below headings (academic leaders page) */
html body h2.heading-reduce-space-below {
    margin-bottom: 1vw !important;
}




/********************CTLT TDP**********************/

/*to stylize group blocks*/
.groupbox{
    padding:0em 2em 2em 2em;}
    
       .wp-block-group.resources-box-border{
        border-top:solid 3px #0055B7;   
       }
    
   .resources-box-border  h3 {
  min-height:70px;
}