/* --------- Grid --------- */

/* 5 Column layout */
.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-xs-5ths {
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-5ths {
        width: 20%;
        float: left;
    }
}

.course-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    padding: 1rem;
    max-width: 1200px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .course-grid {
        grid-template-columns: 1fr;
    }
}

.course-item {
    min-width: 0; /* Prevents text overflow */
}

.course-item h4 {
    margin-bottom: 1rem;
}

.course-item p {
    line-height: 1.5;
}

/* --------- Activities Grid --------- */

.activities-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    padding: 1rem;
    margin: 0 auto;
}

/* Tablet breakpoint - 3 columns */
@media (max-width: 992px) {
    .activities-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Small tablet breakpoint - 2 columns */
@media (max-width: 768px) {
    .activities-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile breakpoint - 1 column */
@media (max-width: 576px) {
    .activities-grid {
        grid-template-columns: 1fr;
    }
}

.activity-item {
    min-width: 0; /* Prevents text overflow */
    margin-bottom: 2rem;
}

.activity-item img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 1rem;
}

.activity-item h4 {
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

    .staff-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 3rem 4rem;
      max-width: 1400px;
      margin: 0 auto;
    }

    @media (max-width: 768px) {
      .staff-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 992px) {
      .staff-grid {
        grid-template-columns: 1fr;
      }
    }

    .staff-card {
      display: grid;
      grid-template-columns: 200px 1fr;
      gap: 2rem;
      align-items: start;
    }

    @media (max-width: 1024px) {
      .staff-card {
        grid-template-columns: 150px 1fr;
        gap: 1.5rem;
      }
    }

    @media (max-width: 768px) {
      .staff-card {
        grid-template-columns: 150px 1fr;
      }

      .staff-image {
        width: 150px;
        height: 150px;
      }
    }

    .staff-image {
        width: 170px;
        height: 280px;
    }

    @media (max-width: 1024px) {
      .staff-image {
        width: 140px;
        height: 250px;
      }
    }

    .staff-info h3 {
      margin: 0 0 0.5rem 0;
    }

    .staff-info p {
      font-size: 1.2em;
    }

    /* Keep existing staff image background classes */
    .img-responsive.staff.sm {
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      border-radius: 4px;
    }

/* 5 Column layout */
.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

.col-xs-15 {
    width: 20%;
    float: left;
}

.ico.material-symbols-rounded {
    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 48;
}

.ico.iconav.material-symbols-rounded {
    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 48;
}

.ico2.material-symbols-rounded {
    font-variation-settings: "FILL" 1, "wght" 600, "GRAD" 0, "opsz" 48;    
	 color: #333;
}

.ico2.material-symbols-rounded:hover {
    font-variation-settings: "FILL" 1, "wght" 600, "GRAD" 0, "opsz" 48;    
	 color: #0e67cf;
}

/* Remove Gutter */
.gutter-0.row {
    margin-right: 0;
    margin-left: 0;
}

.gutter-0 > [class^="col-"],
.gutter-0 > [class^=" col-"] {
    padding-right: 0;
    padding-left: 0;
}

.gutter-20.row {
    margin-right: -0.625em;
    margin-left: -0.625em;
}

.gutter-20 > [class^="col-"],
.gutter-20 > [class^=" col-"] {
    padding-right: 0.625em;
    padding-left: 0.625em;
}

/* Extra Row margin on the top */
.rowtop {
    margin-top: 1.25em;
}

.rowtop-lg {
    margin-top: 2em;
}

/* Grey background container */
.container-fluid {
    padding-right: 0;
    padding-left: 0;
}
#accordionfaq H3 {
    padding: 10px 10px 10px 0px;
    border-bottom: 1px solid #373e45;
    color: #373e45;
    cursor: pointer;
}

#accordionfaq H3:hover {
}

#accordionfaq .btn {
    background-color: #2c7ec0;
    padding: 3px 10px;
    font-size: 17px;
    display: block;
}

#accordionfaq .btn a {
    color: #fff;
}

#accordionfaq a {
    color: #2c7ec0;
}

#accordionfaq .links {
    list-style: none;
    margin: 0;
    padding: 0;
}

#accordionfaq .links li {
    margin: 5px 0px;
}

#accordionfaq .links a {
    background: #ffffffd1;
    padding: 2px 10px;
    border-radius: 5px;
    color: #373e44;
    text-decoration: none;
}

#accordioncoop H3 {
    background: #ffffffd1;
    padding: 10px;
    border-radius: 5px;
    color: #373e44;
    display: inline-block;
    cursor: pointer;
}
#accordioncoop H3:hover {
    background: #ffffff;
}

#accordioncoop a {
    text-decoration: underline;
    color: #ffffff;
}

#accordioncoop .links {
    list-style: none;
    margin: 0;
    padding: 0;
}

#accordioncoop .links li {
    margin: 5px 0px;
}

#accordioncoop .links a {
    background: #ffffffd1;
    padding: 2px 10px;
    border-radius: 5px;
    color: #373e44;
    text-decoration: none;
}

.container-fluid.section-grey {
    background: #363e4514;
}

.container-fluid.section-litegrey {
    background: #f9f9f9;
}

.container-fluid.section-blue {
    background: #0e67cf;
    color: #fff;
}

.container-fluid.section-smrt-year {
    background: #0e67cf;
    color: #fff;
    background: linear-gradient(270deg,  rgb(31 144 239 / 0%), rgb(31 144 239) 66%), url(https://canada-english.com/img/smrt-year-back.jpg);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.content-block.section-cap {
    background: #2579c126;
    padding: 2em;
    border-radius: 0.5em;
}

.content-block.section-cap .logobox {
    opacity: 1;
}

.content-block.section-ucw {
    background: #2579c126;
    padding: 2em;
    border-radius: 0.5em;
}

.content-block.section-ucw .logobox {
    opacity: 1;
}

.content-block.section-vcc {
    background: #2579c126;
    padding: 2em;
    border-radius: 0.5em;
}

.content-block.section-vcc .logobox {
    opacity: 1;
}

.content-block.section-itdc {
    background: #15bcf938;
    padding: 2em;
    border-radius: 0.5em;
}

.content-block.section-hmdc {
    background: #9d595b38;
    padding: 2em;
    border-radius: 0.5em;
}

.content-block.section-pmdc {
    background: #e2665e38;
    padding: 2em;
    border-radius: 0.5em;
}

.content-block.section-smmdc {
    background: #f99c3a38;
    padding: 2em;
    border-radius: 0.5em;
}

.content-block.section-amazon {
    background: #2579c126;
    padding: 2em;
    border-radius: 0.5em;
}

.content-block.section-amazon .logobox {
    opacity: 1;
}

.container-fluid.section-slc-gradient {
    background-color: #363e45;
    color: #fff;
}
.container-fluid.section-slc-gradient h2 {
    color: #fff;
}
.container-fluid.section-slc-gradient .logobox {
    opacity: 1;
}

.container-fluid.section-slc-bmd {
    background-color: #4a5c6e29;
}

.container-fluid.section-slc-hmd {
    background-color: #9d595b29;
}

.container-fluid.section-slc-itd {
    background-color: #13bcfa29;
}

.container-fluid.section-grey .nav-tabs > li.active > a,
.container-fluid.section-grey .nav-tabs > li.active > a:focus,
.container-fluid.section-grey .nav-tabs > li.active > a:hover {
    background: rgb(247, 247, 247);
}

.container-fluid.section-career {
    color: #fff;
    background: #1c90ef;
    background: linear-gradient(
        333deg,
        rgba(71, 102, 179, 1) 0%,
        rgba(0, 151, 250, 1) 100%
    );
}

.playimg {
    position: relative;
    width: 300px;
    display: inline-block;
}

.playimg i {
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    font-size: 10rem;
    color: #fff;
    opacity: 80%;
}

.playimg:hover i {
    font-size: 13rem;
    -webkit-transition: all 0.1s ease;
    -moz-transition: all 0.1s ease;
    -o-transition: all 0.1s ease;
    -ms-transition: all 0.1s ease;
    opacity: 100%;
}

.playimg img {
    max-width: 100%;
    height: auto;
    border-radius: 1rem !important;
    vertical-align: middle;
    border-style: none;
}

/* --------- Text --------- */

h1,
h2,
h3,
h4,
h5,
h6,
lead {
    font-family: "Oswald", sans-serif;
    -webkit-font-smoothing: antialiased;
}

h1,
h2 {
    text-transform: uppercase;
    color: rgb(64, 64, 64);
}

h3 {
    font-size: 1.8em;
    margin-top: 40px;
}

h4 {
    font-size: 1.2em;
    margin-top: 20px;
}

lead,
.lead {
    font-weight: 300;
    font-size: 1.5em;
    font-family: "Open Sans", serif;
    margin-bottom: 1.3em;
    display: inline-block;
}

.lead .note {
    display: block;
    margin-top: 0.6em;
    color: #ff5722;
    padding: 0;
}

p,
div {
    font-family: "Open Sans", serif;
    -webkit-font-smoothing: antialiased;
}

p {
    font-size: 1em;
}

a:focus,
a:hover,
a:active {
    text-decoration: none;
    color: rgb(64, 64, 64);
}

.fadein {
    opacity: 0;
}

.grecaptcha-badge {
    visibility: collapse !important;
}

/* --------- Buttons --------- */

.btn-action {
    font-family: "Oswald", sans-serif;
    font-size: 1em;
    background-color: rgb(51, 51, 51);
    color: rgba(255, 255, 255, 0.9);
    border-radius: 0;
}

.btn-action.fullwidth {
    width: 100%;
}

.btn-action:hover,
.btn-action:focus {
    color: rgb(255, 255, 255);
}

.btn-form:hover {
    background-color: rgb(255, 255, 255);
}

.btn-default {
    font-family: "Oswald", sans-serif;
    font-size: 1em;
    border: 0;
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}

.btn-white {
    font-family: "Oswald", sans-serif;
    font-size: 1.3em;
    margin-top: 10px;
    border: 0;
    color: #333;
    background-color: #fff;
    border-color: #fff;
}

/* --------- Other --------- */

hr {
    border-top: 1px solid rgba(51, 51, 51, 0.25);
}

.alert {
    margin-top: 30px;
    padding: 13px;
    color: #5f5f5f;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;	
    line-height: 1.4;
    border: 0;
    display: flex;
    align-items: center;
}

.alert .icoalert {
    margin-right: 10px;
    font-size: 24px;
}

.alert p {
    margin: 0;
    flex: 1;
}

.alert ul {
    margin: 10px 0 0 0;
    padding-left: 34px;
}

.alert ul li {
    margin-top: 10px;
}

.alert.info {
    background-color: #FEEFB3;
    color: #FA7200;
}

.alert.info a {
    color: #FA7200;
    text-decoration: underline;
}

.alert.info strong {
    color: #FA7200 !important;
}

.alert.success {
    background-color: #DFF2BF;
    color: #4F8A10;
    transition: opacity 3s ease-in-out;
}

.alert.success a {
    color: #4F8A10;
    text-decoration: underline;
}

.alert.success strong {
    color: #4F8A10 !important;
}

.alert.warning {
    background-color: #FFBABA;
    color: #D8000C;
}

.alert.warning a {
    color: #D8000C;
    text-decoration: underline;
}

.alert.warning strong {
    color: #D8000C !important;
}

.img-round {
    border-radius: 2%;
}

.ccel-logo {
    height: 37px;
}

#languagealert {
    margin: 3em 1em 0 0;
    position: absolute;
    top: 0;
    right: 0;
    color: #333;
    background-color: rgba(255, 255, 255, 1);
    border-color: #777;
}
#languagealert .alert-link {
    padding-left: 0.5em;
}

.languagebubble {
    display: none;
    position: absolute;
    padding: 8px;
    top: 59px;
    z-index: 3;
    width: 100%;
    background: rgb(255, 255, 255);
    text-align: center;
}
.languagebubble a {
    padding-left: 10px;
}

.visuallyhidden {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}

.fc-event {
    border: 1px solid #3a87ad;
    background-color: #2d7ec0;
}

.note {
    padding-top: 1.5em;
}

.groupnote {
    margin: 2em 0em;
    padding: 0em 1em;
    box-sizing: border-box;
    clear: both;
    overflow: hidden;
    width: 100%;
    line-height: 1.5em;
    border-radius: 0.313em;
    -webkit-border-radius: 0.313em;
    -moz-border-radius: 0.313em;
    -ms-border-radius: 0.313em;
    page-break-inside: avoid;
    background: rgb(249, 248, 249);
    border: 0em dashed rgba(224, 220, 199, 1);
}

.groupnote p {
    margin: 10px 0;
}

.alert {
    font-size: 17px;
}

/* --------- Nav --------- */

.navbar-brand {
    float: left;
    height: 57px;
}

.navbar {
    margin-bottom: 0; /*opacity:0;*/
}

.navbar-default .navbar-nav > li > a.index-contact {
    color: #ffffff;
    background-color: #0e67cf;
}

.navbar-default .navbar-nav > li > a {
    color: #4c4c4c;
    -webkit-font-smoothing: antialiased;
}

.navbar-nav > li > a {
    font-family: "Oswald", sans-serif;
    text-transform: uppercase;
    font-size: 1.2em;
    font-weight: 300;
    padding: 1.1em 0.8em;
}

.navbar-default {
    background-color: rgba(255, 255, 255, 1);
    border-color: transparent;
    border: 0;
    border-bottom: 2px solid #434343;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}

.navbar .dropdown-menu {
    background-color: #e7e7e7;
    border: 0;
}

.navbar .dropdown-menu .divider {
    background-color: rgba(0, 0, 0, 0.08);
}

.navbar .dropdown-menu > .active > a,
.navbar .dropdown-menu > .active > a:focus,
.navbar .dropdown-menu > .active > a:hover {
    color: #333;
    background-color: rgba(0, 0, 0, 0.08);
}

.nav-tabs {
    margin-bottom: 2em;
    border-bottom: 2px solid #ddd;
}

.nav-tabs > li {
    margin-bottom: -2px;
}

.nav-tabs > li > a {
    border: 2px solid transparent;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
    color: #555;
    border: 2px solid #ddd;
    border-bottom-color: transparent;
}

/* --------- SubNav --------- */

#subnav.container {
    padding: 0;
}
#subnav a {
    display: flex;
    font-family: "Oswald", sans-serif;
    text-transform: uppercase;
    font-size: 1.4em;
    text-align: center;
    line-height: 1.6em;
    margin: 0;
    padding: 1em;
    width: 100%;
    background-color: rgb(242, 243, 243);
    position: relative;
    opacity: 0.7;
    text-align: left;
    color: #191919;
}

#subnav a.active {
    background-color: transparent;
    opacity: 0.9;
}

#subnav a .glyphicon {
    padding-right: 0.5em;
}
#subnav a .ico {
    align-self: center;
    margin-right: 5px;
}

#subnav a.active .ico.application,
#subnav a.active .ico.fees,
#subnav a.active .ico.calendar,
#subnav a.active .ico.faq,
#subnav a.active .ico.placement {
    color: #0e67cf;
}

#subnav a.active .glyphicon.glyphicon-education {
    color: rgb(38, 186, 242);
}

#subnav a.active .glyphicon.glyphicon-ok {
    color: rgb(117, 195, 119);
}

#subnav a.active .glyphicon.glyphicon-briefcase {
    color: rgb(121, 79, 109);
}

#subnav a:hover {
    opacity: 0.9;
}

/* --------- Map --------- */

.map-overlay {
    background: transparent;
    position: relative;
    width: 100%;
    height: 450px; /* your iframe height */
    top: 450px; /* your iframe height */
    margin-top: -450px; /* your iframe height */
}

/* --------- Pages --------- */

.section-header {
    color: #0e67cf;
}

#ccblue {
}

#ccblue .navbar-default .navbar-nav > li > a.index-contact {
    background-color: rgb(14, 103, 207);
}

#ccblue .section-header {
    color: rgb(14, 103, 207);
}

#ccblue .btn-action {
    color: rgb(255, 255, 255);
    background-color: rgb(14, 103, 207);
    margin-bottom: 1em;
    border-radius: 0.25em;
}

#ccblue .nav-tabs > li > a {
    color: rgb(14, 103, 207);
}

#ccblue .nav-tabs > li.active > a {
    color: #555;
}

#ccblue #block-askexpert .form-group .btn-form {
    background-color: rgb(14, 103, 207);
}

#ccblue .logobox.text {
    border-color: rgb(14, 103, 207);
}

#ccblue .logobox.text:after {
    border-left: 18px solid rgb(14, 103, 207);
}

#ccblue .logobox:hover {
    background: rgba(157, 89, 91, 0.09) !important;
}

#ccblue #block-level .months.study {
    border-color: rgb(14, 103, 207);
    background-color: rgba(157, 89, 91, 0.1);
}

#ccblue #block-level .months.coop {
    border-color: rgb(14, 103, 207);
    background-color: rgba(157, 89, 91, 0.05);
    background: repeating-linear-gradient(
        45deg,
        rgb(255, 255, 255),
        rgb(255, 255, 255) 10px,
        rgba(157, 89, 91, 0.05) 10px,
        rgba(157, 89, 91, 0.05) 20px
    );
}

#ccblue .block-info .cloud li {
    border-color: rgb(14, 103, 207);
    background-color: rgba(157, 89, 91, 0.05);
}

#index {
}

#index .btn-action {
    color: rgb(255, 255, 255);
    background-color: #0e67cf;
    border-radius: 4px;
}

#index .nav-tabs > li > a {
    color: #0e67cf;
}

#index .nav-tabs > li.active > a {
    color: #555;
}

#index .stenberg .btn-action {
    color: rgb(255, 255, 255);
    background-color: rgb(33, 60, 159);
    border-radius: 4px;
}

#index .stenberg .nav-tabs > li > a {
    color: rgb(33, 60, 159);
}

#slc {
}
#slc .navbar-default .navbar-nav > li > a.index-contact {
    background-color: rgb(255, 64, 64);
}

#slc .section-header {
    color: rgb(255, 64, 64);
}

#slc .btn-action {
    color: rgb(255, 255, 255);
    background-color: rgb(255, 64, 64);
    margin-bottom: 1em;
    border-radius: 0.25em;
}

#slc .nav-tabs > li > a {
    color: rgb(255, 64, 64);
}

#slc .nav-tabs > li.active > a {
    color: #555;
}

#slc #block-askexpert .form-group .btn-form {
    background-color: rgb(255, 64, 64);
}

#slc .logobox.text {
    border-color: rgb(255, 255, 255);
}

#slc .logobox.text:after {
    border-left: 18px solid rgb(64, 64, 64);
}

#slc .logobox:hover {
    background: rgb(255, 255, 255) !important;
}

#slc #block-level .months.study {
    border-color: rgb(255, 64, 64);
    background-color: rgba(237, 34, 38, 0.1);
}

#slc #block-level .months.coop {
    border-color: rgba(237, 34, 38, 1);
    background-color: rgba(237, 34, 38, 0.05);
    background: repeating-linear-gradient(
        45deg,
        rgb(255, 255, 255),
        rgb(255, 255, 255) 10px,
        rgba(237, 34, 38, 0.05) 10px,
        rgba(237, 34, 38, 0.05) 20px
    );
}

#slc .block-info .cloud li {
    border-color: rgba(237, 34, 38, 1);
    background-color: rgba(237, 34, 38, 0.05);
}

#feescalculator {
}
#feescalculator .btn-action {
    color: rgb(255, 255, 255);
    background-color: rgb(44 126 192);
    margin-bottom: 1em;
    border-radius: 0.25em;
    font-size: 1.5em;
    margin-top: 20px;
}

#business {
}
#business .navbar-default .navbar-nav > li > a.index-contact {
    background-color: rgb(73, 93, 110);
}

#business .section-header {
    color: rgb(73, 93, 110);
}

#business .btn-action {
    color: rgb(255, 255, 255);
    background-color: rgb(73, 93, 110);
    margin-bottom: 1em;
    border-radius: 0.25em;
}

#business .nav-tabs > li > a {
    color: rgb(73, 93, 110);
}

#business .nav-tabs > li.active > a {
    color: #555;
}

#business #block-askexpert .form-group .btn-form {
    background-color: rgb(73, 93, 110);
}

#business .logobox.text {
    border-color: rgb(73, 93, 110);
}

#business .logobox.text:after {
    border-left: 18px solid rgb(73, 93, 110);
}

#business .logobox:hover {
    background: rgba(73, 93, 110, 0.09) !important;
}

#business #block-level .groups {
    background-color: #373e450d;
}

#business #block-level .months.study {
    border-color: rgb(73, 93, 110);
    background-color: rgba(73, 93, 110, 0.1);
}

#business #block-level .months.coop {
    border-color: rgba(73, 93, 110, 1);
    background-color: rgba(73, 93, 110, 0.05);
    background: repeating-linear-gradient(
        45deg,
        rgb(255, 255, 255),
        rgb(255, 255, 255) 10px,
        rgba(73, 93, 110, 0.05) 10px,
        rgba(73, 93, 110, 0.05) 20px
    );
}

#business .block-info .cloud li {
    border-color: rgba(73, 93, 110, 1);
    background-color: rgba(73, 93, 110, 0.05);
}

#generalarts {
}
#generalarts .navbar-default .navbar-nav > li > a.index-contact {
    background-color: rgb(121, 160, 165);
}

#generalarts .section-header {
    color: rgb(121, 160, 165);
}

#generalarts .btn-action {
    color: rgb(255, 255, 255);
    background-color: rgb(121, 160, 165);
    margin-bottom: 1em;
    border-radius: 0.25em;
}

#generalarts .nav-tabs > li > a {
    color: rgb(121, 160, 165);
}

#generalarts .nav-tabs > li.active > a {
    color: #555;
}

#generalarts #block-askexpert .form-group .btn-form {
    background-color: rgb(121, 160, 165);
}

#generalarts .logobox.text {
    border-color: rgb(121, 160, 165);
}

#generalarts .logobox.text:after {
    border-left: 18px solid rgb(121, 160, 165);
}

#generalarts .logobox:hover {
    background: rgba(121, 160, 165, 0.09) !important;
}

#generalarts #block-level .months.study {
    border-color: rgb(121, 160, 165);
    background-color: rgba(121, 160, 165, 0.1);
}

#generalarts #block-level .months.coop {
    border-color: rgba(121, 160, 165, 1);
    background-color: rgba(121, 160, 165, 0.05);
    background: repeating-linear-gradient(
        45deg,
        rgb(255, 255, 255),
        rgb(255, 255, 255) 10px,
        rgba(121, 160, 165, 0.05) 10px,
        rgba(121, 160, 165, 0.05) 20px
    );
}

#generalarts .block-info .cloud li {
    border-color: rgba(121, 160, 165, 1);
    background-color: rgba(121, 160, 165, 0.05);
}

#logistics {
}
#logistics .navbar-default .navbar-nav > li > a.index-contact {
    background-color: rgb(39, 143, 114);
}

#logistics .section-header {
    color: rgb(39, 143, 114);
}

#logistics .btn-action {
    color: rgb(255, 255, 255);
    background-color: rgb(39, 143, 114);
    margin-bottom: 1em;
    border-radius: 0.25em;
}

#logistics .nav-tabs > li > a {
    color: rgb(39, 143, 114);
}

#logistics .nav-tabs > li.active > a {
    color: #555;
}

#logistics #block-askexpert .form-group .btn-form {
    background-color: rgb(39, 143, 114);
}

#logistics .logobox.text {
    border-color: rgb(39, 143, 114);
}

#logistics .logobox.text:after {
    border-left: 18px solid rgb(39, 143, 114);
}

#logistics .logobox:hover {
    background: rgba(39, 143, 114, 0.09) !important;
}

#logistics #block-level .months.study {
    border-color: rgb(39, 143, 114);
    background-color: rgba(39, 143, 114, 0.1);
}

#logistics #block-level .months.coop {
    border-color: rgba(39, 143, 114, 1);
    background-color: rgba(39, 143, 114, 0.05);
    background: repeating-linear-gradient(
        45deg,
        rgb(255, 255, 255),
        rgb(255, 255, 255) 10px,
        rgba(39, 143, 114, 0.05) 10px,
        rgba(39, 143, 114, 0.05) 20px
    );
}

#logistics .block-info .cloud li {
    border-color: rgba(39, 143, 114, 1);
    background-color: rgba(39, 143, 114, 0.05);
}

#hospitality {
}
#hospitality .navbar-default .navbar-nav > li > a.index-contact {
    background-color: rgb(157, 89, 91);
}

#hospitality .section-header {
    color: rgb(157, 89, 91);
}

#hospitality .btn-action {
    color: rgb(255, 255, 255);
    background-color: rgb(157, 89, 91);
    margin-bottom: 1em;
    border-radius: 0.25em;
}

#hospitality .nav-tabs > li > a {
    color: rgb(157, 89, 91);
}

#hospitality .nav-tabs > li.active > a {
    color: #555;
}

#hospitality #block-askexpert .form-group .btn-form {
    background-color: rgb(157, 89, 91);
}

#hospitality .logobox.text {
    border-color: rgb(157, 89, 91);
}

#hospitality .logobox.text:after {
    border-left: 18px solid rgb(157, 89, 91);
}

#hospitality .logobox:hover {
    background: rgba(157, 89, 91, 0.09) !important;
}

#hospitality #block-level .groups {
    background-color: #373e450d;
}

#hospitality #block-level .months.study {
    border-color: rgb(157, 89, 91);
    background-color: rgba(157, 89, 91, 0.1);
}

#hospitality #block-level .months.coop {
    border-color: rgba(157, 89, 91, 1);
    background-color: rgba(157, 89, 91, 0.05);
    background: repeating-linear-gradient(
        45deg,
        rgb(255, 255, 255),
        rgb(255, 255, 255) 10px,
        rgba(157, 89, 91, 0.05) 10px,
        rgba(157, 89, 91, 0.05) 20px
    );
}

#hospitality .block-info .cloud li {
    border-color: rgba(157, 89, 91, 1);
    background-color: rgba(157, 89, 91, 0.05);
}

#hospitality2 {
}

#hospitality2 .navbar-default .navbar-nav > li > a.index-contact {
    background-color: rgb(103, 113, 142);
}

#hospitality2 .section-header {
    color: rgb(103, 113, 142);
}

#hospitality2 .btn-action {
    color: rgb(255, 255, 255);
    background-color: rgb(103, 113, 142);
    margin-bottom: 1em;
    border-radius: 0.25em;
}

#hospitality2 .nav-tabs > li > a {
    color: rgb(103, 113, 142);
}

#hospitality2 .nav-tabs > li.active > a {
    color: #555;
}

#hospitality2 #block-askexpert .form-group .btn-form {
    background-color: rgb(103, 113, 142);
}

#hospitality2 .logobox.text {
    border-color: rgb(103, 113, 142);
}

#hospitality2 .logobox.text:after {
    border-left: 18px solid rgb(103, 113, 142);
}

#hospitality2 .logobox:hover {
    background: rgba(103, 113, 142, 0.09) !important;
}

#hospitality2 #block-level .months.study {
    border-color: rgb(103, 113, 142);
    background-color: rgba(103, 113, 142, 0.1);
}

#hospitality2 #block-level .months.coop {
    border-color: rgba(103, 113, 142, 1);
    background-color: rgba(103, 113, 142, 0.05);
    background: repeating-linear-gradient(
        45deg,
        rgb(255, 255, 255),
        rgb(255, 255, 255) 10px,
        rgba(103, 113, 142, 0.05) 10px,
        rgba(103, 113, 142, 0.05) 20px
    );
}

#hospitality2 .block-info .cloud li {
    border-color: rgba(103, 113, 142, 1);
    background-color: rgba(103, 113, 142, 0.05);
}

#tourism {
}

#tourism .navbar-default .navbar-nav > li > a.index-contact {
    background-color: rgb(104, 159, 56);
}

#tourism .section-header {
    color: rgb(104, 159, 56);
}

#tourism .btn-action {
    color: rgb(255, 255, 255);
    background-color: rgb(104, 159, 56);
    margin-bottom: 1em;
    border-radius: 0.25em;
}

#tourism .nav-tabs > li > a {
    color: rgb(104, 159, 56);
}

#tourism .nav-tabs > li.active > a {
    color: #555;
}

#tourism #block-askexpert .form-group .btn-form {
    background-color: rgb(104, 159, 56);
}

#tourism .logobox.text {
    border-color: rgb(104, 159, 56);
}

#tourism .logobox.text:after {
    border-left: 18px solid rgb(104, 159, 56);
}

#tourism .logobox:hover {
    background: rgba(104, 159, 56, 0.09) !important;
}

#tourism #block-level .months.study {
    border-color: rgb(104, 159, 56);
    background-color: rgba(104, 159, 56, 0.1);
}

#tourism #block-level .months.coop {
    border-color: rgba(104, 159, 56, 1);
    background-color: rgba(104, 159, 56, 0.05);
    background: repeating-linear-gradient(
        45deg,
        rgb(255, 255, 255),
        rgb(255, 255, 255) 10px,
        rgba(104, 159, 56, 0.05) 10px,
        rgba(104, 159, 56, 0.05) 20px
    );
}

#tourism .block-info .cloud li {
    border-color: rgba(104, 159, 56, 1);
    background-color: rgba(104, 159, 56, 0.05);
}

#trade {
}
#trade .navbar-default .navbar-nav > li > a.index-contact {
    background-color: rgb(69, 82, 125);
}

#trade .section-header {
    color: rgb(69, 82, 125);
}

#trade .btn-action {
    color: rgb(255, 255, 255);
    background-color: rgb(69, 82, 125);
    margin-bottom: 1em;
    border-radius: 0.25em;
}

#trade .nav-tabs > li > a {
    color: rgb(69, 82, 125);
}

#trade .nav-tabs > li.active > a {
    color: #555;
}

#trade #block-askexpert .form-group .btn-form {
    background-color: rgb(69, 82, 125);
}

#trade .logobox.text {
    border-color: rgb(69, 82, 125);
}

#trade .logobox.text:after {
    border-left: 18px solid rgb(69, 82, 125);
}

#trade .logobox:hover {
    background: rgba(69, 82, 125, 0.09) !important;
}

#trade #block-level .groups {
    background-color: #373e450d;
}

#trade #block-level .months.study {
    border-color: rgb(69, 82, 125);
    background-color: rgba(69, 82, 125, 0.1);
}

#trade #block-level .months.coop {
    border-color: rgba(69, 82, 125, 1);
    background-color: rgba(69, 82, 125, 0.05);
    background: repeating-linear-gradient(
        45deg,
        rgb(255, 255, 255),
        rgb(255, 255, 255) 10px,
        rgba(69, 82, 125, 0.05) 10px,
        rgba(69, 82, 125, 0.05) 20px
    );
}

#trade .block-info .cloud li {
    border-color: rgba(69, 82, 125, 1);
    background-color: rgba(69, 82, 125, 0.05);
}

#project {
}
#project .navbar-default .navbar-nav > li > a.index-contact {
    background-color: rgb(226, 102, 94);
}

#project .section-header {
    color: rgb(226, 102, 94);
}

#project .btn-action {
    color: rgb(255, 255, 255);
    background-color: rgb(226, 102, 94);
    margin-bottom: 1em;
    border-radius: 0.25em;
}

#project .nav-tabs > li > a {
    color: rgb(226, 102, 94);
}

#project .nav-tabs > li.active > a {
    color: #555;
}

#project #block-askexpert .form-group .btn-form {
    background-color: rgb(226, 102, 94);
}

#project .logobox.text {
    border-color: rgb(226, 102, 94);
}

#project .logobox.text:after {
    border-left: 18px solid rgb(226, 102, 94);
}

#project .logobox:hover {
    background: rgba(226, 102, 94, 0.09) !important;
}

#project #block-level .groups {
    background-color: #373e450d;
}

#project #block-level .months.study {
    border-color: rgb(226, 102, 94);
    background-color: rgba(226, 102, 94, 0.1);
}

#project #block-level .months.coop {
    border-color: rgba(226, 102, 94, 1);
    background-color: rgba(226, 102, 94, 0.05);
    background: repeating-linear-gradient(
        45deg,
        rgb(255, 255, 255),
        rgb(255, 255, 255) 10px,
        rgba(226, 102, 94, 0.05) 10px,
        rgba(226, 102, 94, 0.05) 20px
    );
}

#project .block-info .cloud li {
    border-color: rgba(226, 102, 94, 1);
    background-color: rgba(226, 102, 94, 0.05);
}

#it {
}
#it .navbar-default .navbar-nav > li > a.index-contact {
    background-color: rgb(19, 188, 250);
}

#it .section-header {
    color: rgb(19, 188, 250);
}

#it .btn-action {
    color: rgb(255, 255, 255);
    background-color: rgb(19, 188, 250);
    margin-bottom: 1em;
    border-radius: 0.25em;
}

#it .nav-tabs > li > a {
    color: rgb(19, 188, 250);
}

#it .nav-tabs > li.active > a {
    color: #555;
}

#it #block-askexpert .form-group .btn-form {
    background-color: rgb(19, 188, 250);
}

#it .logobox.text {
    border-color: rgb(19, 188, 250);
}

#it .logobox.text:after {
    border-left: 18px solid rgb(19, 188, 250);
}

#it .logobox:hover {
    background: rgba(19, 188, 250, 0.09) !important;
}

#it #block-level .groups {
    background-color: #373e450d;
}

#it #block-level .months.study {
    border-color: rgb(19, 188, 250);
    background-color: rgba(19, 188, 250, 0.1);
}

#it #block-level .months.coop {
    border-color: rgba(19, 188, 250, 1);
    background-color: rgba(19, 188, 250, 0.05);
    background: repeating-linear-gradient(
        45deg,
        rgb(255, 255, 255),
        rgb(255, 255, 255) 10px,
        rgba(19, 188, 250, 0.05) 10px,
        rgba(19, 188, 250, 0.05) 20px
    );
}

#it .block-info .cloud li {
    border-color: rgba(19, 188, 250, 1);
    background-color: rgba(19, 188, 250, 0.05);
}

#cst {
}
#cst .navbar-default .navbar-nav > li > a.index-contact {
    background-color: rgb(222, 91, 83);
}

#cst .section-header {
    color: rgb(222, 91, 83);
}

#cst .btn-action {
    color: rgb(255, 255, 255);
    background-color: rgb(222, 91, 83);
    margin-bottom: 1em;
    border-radius: 0.25em;
}

#cst .nav-tabs > li > a {
    color: rgb(222, 91, 83);
}

#cst .nav-tabs > li.active > a {
    color: #555;
}

#cst #block-askexpert .form-group .btn-form {
    background-color: rgb(222, 91, 83);
}

#cst .logobox.text {
    border-color: rgb(222, 91, 83);
}

#cst .logobox.text:after {
    border-left: 18px solid rgb(222, 91, 83);
}

#cst .logobox:hover {
    background: rgba(222, 91, 83, 0.09) !important;
}

#cst #block-level .months.study {
    border-color: rgb(222, 91, 83);
    background-color: rgba(222, 91, 83, 0.1);
}

#cst #block-level .months.coop {
    border-color: rgba(222, 91, 83, 1);
    background-color: rgba(222, 91, 83, 0.05);
    background: repeating-linear-gradient(
        45deg,
        rgb(255, 255, 255),
        rgb(255, 255, 255) 10px,
        rgba(222, 91, 83, 0.05) 10px,
        rgba(222, 91, 83, 0.05) 20px
    );
}

#cst .block-info .cloud li {
    border-color: rgba(222, 91, 83, 1);
    background-color: rgba(222, 91, 83, 0.05);
}

#social {
}
#social .navbar-default .navbar-nav > li > a.index-contact {
    background-color: rgb(249, 156, 58);
}

#social .section-header {
    color: rgb(249, 156, 58);
}

#social .btn-action {
    color: rgb(255, 255, 255);
    background-color: rgb(249, 156, 58);
    margin-bottom: 1em;
    border-radius: 0.25em;
}

#social .nav-tabs > li > a {
    color: rgb(249, 156, 58);
}

#social .nav-tabs > li.active > a {
    color: #555;
}

#social #block-askexpert .form-group .btn-form {
    background-color: rgb(249, 156, 58);
}

#social .logobox.text {
    border-color: rgb(249, 156, 58);
}

#social .logobox.text:after {
    border-left: 18px solid rgb(249, 156, 58);
}

#social .logobox:hover {
    background: rgba(249, 156, 58, 0.09) !important;
}

#social #block-level .groups {
    background-color: #373e450d;
}

#social #block-level .months.study {
    border-color: rgb(249, 156, 58);
    background-color: rgba(249, 156, 58, 0.1);
}

#social #block-level .months.coop {
    border-color: rgba(249, 156, 58, 1);
    background-color: rgba(249, 156, 58, 0.05);
    background: repeating-linear-gradient(
        45deg,
        rgb(255, 255, 255),
        rgb(255, 255, 255) 10px,
        rgba(249, 156, 58, 0.05) 10px,
        rgba(249, 156, 58, 0.05) 20px
    );
}

#social .block-info .cloud li {
    border-color: rgba(249, 156, 58, 1);
    background-color: rgba(249, 156, 58, 0.05);
}

#health {
}
#health .navbar-default .navbar-nav > li > a.index-contact {
    background-color: rgb(0, 113, 176);
}

#health .section-header {
    color: rgb(0, 113, 176);
}

#health .btn-action {
    color: rgb(255, 255, 255);
    background-color: rgb(0, 113, 176);
    margin-bottom: 1em;
    border-radius: 0.25em;
}

#health .nav-tabs > li > a {
    color: rgb(0, 113, 176);
}

#health .nav-tabs > li.active > a {
    color: #555;
}

#health #block-askexpert .form-group .btn-form {
    background-color: rgb(0, 113, 176);
}

#health .logobox.text {
    border-color: rgb(0, 113, 176);
}

#health .logobox.text:after {
    border-left: 18px solid rgb(0, 113, 176);
}

#health .logobox:hover {
    background: rgba(0, 113, 176, 0.09) !important;
}

#health #block-level .months.study {
    border-color: rgb(0, 113, 176);
    background-color: rgba(0, 113, 176, 0.1);
}

#health #block-level .months.coop {
    border-color: rgba(0, 113, 176, 1);
    background-color: rgba(0, 113, 176, 0.05);
    background: repeating-linear-gradient(
        45deg,
        rgb(255, 255, 255),
        rgb(255, 255, 255) 10px,
        rgba(0, 113, 176, 0.05) 10px,
        rgba(0, 113, 176, 0.05) 20px
    );
}

#health .block-info .cloud li {
    border-color: rgba(0, 113, 176, 1);
    background-color: rgba(0, 113, 176, 0.05);
}

#staff {
}

#staff .nav-tabs > li > a {
    color: #0e67cf;
}

#staff .nav-tabs > li.active > a {
    color: #555;
}

#smrtenglish {
}

#smrtenglish .nav-tabs > li > a {
    color: #0e67cf;
}

#smrtenglish .nav-tabs > li.active > a {
    color: #555;
}

#activities {
}

#activities .nav-tabs > li > a {
    color: #0e67cf;
}

#activities .nav-tabs > li.active > a {
    color: #555;
}
#career {
}

#career .navbar-default .navbar-nav > li > a.index-contact {
    background-color: rgb(0 151 250);
}

#career .section-header {
    color: rgb(0 151 250);
}

#career .btn-action {
    color: rgb(255, 255, 255);
    background-color: rgb(26 85 149);
    margin-bottom: 1em;
    border-radius: 0.25em;
}

#career .btn-action:hover {
    background-color: rgb(12 120 190);
}

#career .sidepill p {
    font-size: 15px;
}

#career .sidepill strong {
    padding: 3px 8px;
    margin-right: 5px;
}

#career .nav-tabs > li > a {
    color: rgb(229, 25, 54);
}

#career .nav-tabs > li.active > a {
    color: #555;
}

#career #block-askexpert .form-group .btn-form {
    background-color: rgb(0 151 250);
}

#career #block-shedule .active .button {
    border-color: #75c377;
    color: #75c377 !important;
    background-color: #75c3771f;
}

#career .asside {
}



#intensive {}

#intensive .navbar-default .navbar-nav > li > a.index-contact {
    background-color: rgb(201, 82, 72);
}

#intensive .section-header {
    color: rgb(201, 82, 72);
}

#intensive .btn-action {
    color: rgb(255, 255, 255);
    background-color: rgb(201, 82, 72);
    margin-bottom: 1em;
    border-radius: .25em;
}

#intensive .nav-tabs > li > a {
    color: rgb(201, 82, 72);
}

#intensive .nav-tabs > li.active > a {
    color: #555;
}

#intensive #block-askexpert .form-group .btn-form {
    background-color: rgb(201, 82, 72);
}

#intensive #block-shedule .active .button {
    border-color: #c95248;
    color: #c95248 !important;
    background-color: #c952481f;
}

/* --------- Common Page Elements ---------  */

.greyback {
    background-color: #363e45;
    z-index: -1;
    margin-top: 30px;
}

/* Article */
.article-meta {
    margin-bottom: 20px;
    color: #666;
}

.article-meta .date {
    margin-right: 10px;
}

.article-meta .category {
    margin: 0 0 0.5em 0.5em;
    padding: 1px 8px;
    background-color: #ffffff9c;
    color: #333e46c9;
    display: inline-block;
    text-decoration: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
}

#article .article-meta .category:hover {
    background-color: #ffffff;
}

.article-meta .category.catnews {
    background-color: #0e67cf;
    color: #fff;
}
.article-meta .category.catnews:hover {
    background-color: #0c509f;
}
.article-meta .category.catprograms {
    background-color: #5c536e;
    color: #fff;
}
.article-meta .category.catprograms:hover {
    background-color: #4d4362;
}
.article-meta .category.catstories {
    background-color: #009688;
    color: #fff;
}
.article-meta .category.catstories:hover {
    background-color: #007b6f;
}
.article-meta .category.catcareers {
    background-color: #00bcd4;
    color: #fff;
}
.article-meta .category.catcareers:hover {
    background-color: #00a2b8;
}
.article-meta .category.catstudentlife {
    background-color: #8bc34a;
    color: #fff;
}
.article-meta .category.catstudentlife:hover {
    background-color: #8bc34a;
}

.article-content {
    font-size: 16px;
    line-height: 1.6;
    margin-top: 20px;
}
    .article-content h1 {
        font-size: 1.6em;
        font-weight: bold;
        text-transform: none;
        font-family: "Open Sans", serif;
    }
    .article-content h2 {
        font-size: 1.4em;
        font-weight: bold;
        text-transform: none;
        font-family: "Open Sans", serif;
    }
    .article-content h3 {
        font-size: 1.2em;
        font-weight: bold;
        text-transform: none;
        font-family: "Open Sans", serif;
    }
.article img {
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.related-article {
    margin-bottom: 20px;
}

.related-article h4 {
    margin-bottom: 5px;
}

.related-article p {
    font-size: 14px;
    color: #666;
}

/* Page Backgrounds */
.bg {
    position: relative;
    image-rendering: -webkit-optimize-contrast;
}

.bg .fade {
    position: absolute;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    width: 15%;
    font-size: 20px;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    background-color: rgba(0, 0, 0, 0);
    filter: alpha(opacity=50);
    opacity: 0.5;
}

.bg .fade.left {
    background-image: -webkit-linear-gradient(
        left,
        rgba(0, 0, 0, 0.5) 0,
        rgba(0, 0, 0, 0.0001) 100%
    );
    background-image: -o-linear-gradient(
        left,
        rgba(0, 0, 0, 0.5) 0,
        rgba(0, 0, 0, 0.0001) 100%
    );
    background-image: -webkit-gradient(
        linear,
        left top,
        right top,
        from(rgba(0, 0, 0, 0.5)),
        to(rgba(0, 0, 0, 0.0001))
    );
    background-image: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.5) 0,
        rgba(0, 0, 0, 0.0001) 100%
    );
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
    background-repeat: repeat-x;
}

.bg .fade.right {
    right: 0;
    left: auto;
    background-image: -webkit-linear-gradient(
        left,
        rgba(0, 0, 0, 0.0001) 0,
        rgba(0, 0, 0, 0.5) 100%
    );
    background-image: -o-linear-gradient(
        left,
        rgba(0, 0, 0, 0.0001) 0,
        rgba(0, 0, 0, 0.5) 100%
    );
    background-image: -webkit-gradient(
        linear,
        left top,
        right top,
        from(rgba(0, 0, 0, 0.0001)),
        to(rgba(0, 0, 0, 0.5))
    );
    background-image: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.0001) 0,
        rgba(0, 0, 0, 0.5) 100%
    );
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
    background-repeat: repeat-x;
}

.bg.sm {
    height: 57px;
}

.bg.index {
    background: url("https://canadiancollege.com/img/covers/cover-index04.jpg")
        no-repeat center center;
    background-size: cover;
}

.bg.slc {
    background: url("https://canadiancollege.com/img/covers/cover-slc.png")
        no-repeat center center;
    background-size: cover;
}

.bg.business {
    background: url("https://canadiancollege.com/img/covers/cover-business01.jpg")
        no-repeat center center;
    background-size: cover;
}

.bg.logistics {
    background: url("https://canadiancollege.com/img/covers/cover-logistics.jpg")
        no-repeat center center;
    background-size: cover;
}

.bg.generalarts {
    background: url("https://canadiancollege.com/img/covers/cover-generalarts.jpg")
        no-repeat center center;
    background-size: cover;
}

.bg.hospitality {
    background: url("https://canadiancollege.com/img/covers/cover-hospitality.jpg")
        no-repeat center center;
    background-size: cover;
}

.bg.hospitality2 {
    background: url("https://canadiancollege.com/img/covers/cover-hospitality2.jpg")
        no-repeat center center;
    background-size: cover;
}

.bg.tourism {
    background: url("https://canadiancollege.com/img/covers/cover-tourism.jpg")
        no-repeat center center;
    background-size: cover;
}

.bg.trade {
    background: url("https://canadiancollege.com/img/covers/cover-trade.jpg")
        no-repeat center center;
    background-size: cover;
}

.bg.health {
    background: url("https://canadiancollege.com/img/covers/cover-health.jpg")
        no-repeat center center;
    background-size: cover;
}

.bg.project {
    background: url("https://canadiancollege.com/img/covers/cover-project.jpg")
        no-repeat center center;
    background-size: cover;
}

.bg.it {
    background: url("https://canadiancollege.com/img/covers/cover-it.jpg")
        no-repeat center center;
    background-size: cover;
}

.bg.cst {
    background: url("https://canadiancollege.com/img/covers/cover-cst.jpg")
        no-repeat center center;
    background-size: cover;
}

.bg.social {
    background: url("https://canadiancollege.com/img/covers/cover-social.jpg")
        no-repeat center center;
    background-size: cover;
}

.bg.residence {
    background: url("https://canadiancollege.com/img/covers/cover-residence.jpg")
        no-repeat bottom center;
    background-size: cover;
}

.bg.homestay {
    background: url("https://canadiancollege.com/img/covers/cover-homestay.jpg")
        no-repeat center center;
    background-size: cover;
}

.bg.housing {
    background: url("https://canadiancollege.com/img/covers/cover-housing.jpg")
        no-repeat center center;
    background-size: cover;
}

.bg.vancouver {
    background: url("https://canadiancollege.com/img/covers/cover-vancouver.jpg")
        no-repeat center center;
    background-size: cover;
}

.bg.vancouver-life {
    background: url("https://canadiancollege.com/img/covers/cover-vancouver-life.jpg")
        no-repeat center center;
    background-size: cover;
}

.bg.pathway {
    background: url("/img/covers/cover-pathway.jpg")
        no-repeat center center;
    background-size: cover;
}

.bg.campus {
    background: url("https://canadiancollege.com/img/covers/cover-campus01.jpg")
        no-repeat bottom center;
    background-size: cover;
}

.bg.campussurrey {
    background: url("https://canadiancollege.com/img/covers/cover-campus02.jpg")
        no-repeat bottom center;
    background-size: cover;
}

.bg.campusking {
    background: url("https://canadiancollege.com/img/covers/cover-campus03.jpg")
        no-repeat bottom center;
    background-size: cover;
}

.bg.visa {
    background: url("https://canadiancollege.com/img/covers/cover-visa.jpg")
        no-repeat bottom center;
    background-size: cover;
}

.bg.calendar {
    background: url("https://canadiancollege.com/img/covers/cover-calendar.jpg")
        no-repeat bottom center;
    background-size: cover;
}

.bg.application {
    background: url("https://canadiancollege.com/img/covers/cover-application.jpg")
        no-repeat bottom center;
    background-size: cover;
}

.bg.ambassador {
    background: url("https://canadiancollege.com/img/covers/cover-ambassador.jpg")
        no-repeat bottom center;
    background-size: cover;
}

.bg.fees {
    background: url("https://canadiancollege.com/img/covers/cover-fees.jpg")
        no-repeat bottom center;
    background-size: cover;
}

.bg.smrt {
    background: url("https://canadiancollege.com/img/covers/cover-smrt.jpg")
        no-repeat center center;
    background-size: cover;
}

.bg.activities {
    background: url("https://canadiancollege.com/img/covers/cover-activities.jpg")
        no-repeat center center;
    background-size: cover;
}

.bg.news {
    background: url("https://canadiancollege.com/img/covers/cover-news.png")
        no-repeat center center;
    background-size: cover;
}

.bg.staff {
    background: url("https://canadiancollege.com/img/covers/cover-staff.jpg")
        no-repeat center center;
    background-size: cover;
}

.bg.employee {
    background: url("https://canadiancollege.com/img/covers/cover-employment.jpg")
        no-repeat center center;
    background-size: cover;
}

.bg.error {
    background: url("https://canadiancollege.com/img/covers/cover-error.jpg")
        no-repeat center center;
    background-size: cover;
}

.bg.career {
    background: url("https://canadiancollege.com/img/covers/cover-career.jpg")
        no-repeat center center;
    background-size: cover;
}

.bg.mental-health {
    background: url("https://canadiancollege.com/img/covers/cover-wellness.jpg")
        no-repeat center center;
    background-size: cover;
}

.bg.intensive {
    background: url('/img/covers/cover-intensive.jpg') no-repeat center center;
    background-size: cover;
}

.container.content-block {
    margin-top: 50px;
    margin-bottom: 70px;
}

.container.content-block ul.list li {
    font-size: 1.5em;
    margin-bottom: 10px;
}

#index .huge {
    font-family: "Oswald", sans-serif;
    text-transform: uppercase;
    font-size: 1.2em;
    text-align: center;
    line-height: 1.6em;
    margin: 0;
    padding: 2.24em 1em;
    width: 100%;
    color: #191919;
    background-color: rgb(242, 243, 243);
    position: relative;
    opacity: 0.8;
    display: block;
    border-radius: 0.5em;
}

#index .huge .glyphicon {
    padding-bottom: 0.2em;
    display: block;
    font-size: 2.3em;
    color: #191919;
}

#index .huge .ico {
    padding-bottom: 0.2em;
    display: block;
    font-size: 2.3em;
    color: #191919;
}

#index .huge:hover .ico.business {
    color: rgb(73, 93, 110);
}
#index .huge:hover .ico.hospitality {
    color: rgb(157, 89, 91);
}
#index .huge:hover .glyphicon.glyphicon-map-marker {
    color: rgb(104, 159, 56);
}
#index .huge:hover .ico.trade {
    color: rgb(69, 82, 125);
}
#index .huge:hover .ico.pm {
    color: rgb(226, 102, 94);
}
#index .huge:hover .ico.it {
    color: rgb(19, 188, 250);
}
#index .huge:hover .ico.sm {
    color: rgb(249, 156, 58);
}
#index .huge:hover .glyphicon.glyphicon-plane {
    color: rgb(39, 143, 114);
}
#index .huge:hover .glyphicon.glyphicon-education {
    color: rgb(121, 160, 165);
}
#index .huge:hover .glyphicon.glyphicon-apple {
    color: rgb(0, 113, 176);
}

#index .huge:hover .ico.intensive {
    color: rgb(201, 82, 72);
}
#index .huge:hover .ico.university {
    color: rgb(38, 186, 242);
}
#index .huge:hover .ico.exam {
    color: rgb(229, 25, 54);
}
#index .huge:hover .ico.eb {
    color: rgb(121, 79, 109);
}

#index .huge:hover .ico.stenb {
    color: rgb(33, 60, 159);
}

#index .huge:hover {
    opacity: 0.9;
}

#index .academic {
    font-family: "Oswald", sans-serif;
    text-transform: uppercase;
    font-size: 1em;
    text-align: center;
    line-height: 1.6em;
    margin-top: 0;
    margin-bottom: 1.3em;
    width: 100%;
    background-color: rgb(242, 243, 243);
    position: relative;
    opacity: 0.7;
    display: block;
    border-radius: 0.5em;

    background: rgba(255, 255, 255, 1);
    background: -moz-radial-gradient(
        center,
        ellipse cover,
        rgba(255, 255, 255, 1) 0%,
        rgba(246, 246, 246, 1) 50%,
        rgba(235, 235, 235, 1) 100%
    );
    background: -webkit-gradient(
        radial,
        center center,
        0px,
        center center,
        100%,
        color-stop(0%, rgba(255, 255, 255, 1)),
        color-stop(50%, rgba(246, 246, 246, 1)),
        color-stop(100%, rgba(235, 235, 235, 1))
    );
    background: -webkit-radial-gradient(
        center,
        ellipse cover,
        rgba(255, 255, 255, 1) 0%,
        rgba(246, 246, 246, 1) 50%,
        rgba(235, 235, 235, 1) 100%
    );
    background: -o-radial-gradient(
        center,
        ellipse cover,
        rgba(255, 255, 255, 1) 0%,
        rgba(246, 246, 246, 1) 50%,
        rgba(235, 235, 235, 1) 100%
    );
    background: -ms-radial-gradient(
        center,
        ellipse cover,
        rgba(255, 255, 255, 1) 0%,
        rgba(246, 246, 246, 1) 50%,
        rgba(235, 235, 235, 1) 100%
    );
    background: radial-gradient(
        ellipse at center,
        rgba(255, 255, 255, 1) 0%,
        rgba(246, 246, 246, 1) 50%,
        rgba(235, 235, 235, 1) 100%
    );
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ebebeb', GradientType=1 );
}
#index .academic:hover {
    opacity: 0.9;
}
#index .academic .logo {
    width: 80%;
}

.logobox {
    font-family: "Oswald", sans-serif;
    text-transform: uppercase;
    font-size: 1em;
    text-align: center;
    line-height: 1.6em;
    margin-top: 1em;
    width: 100%;
    background-color: rgb(242, 243, 243);
    position: relative;
    opacity: 0.7;
    display: block;
    border-radius: 0.5em;

    background: rgba(255, 255, 255, 1);
    background: -moz-radial-gradient(
        center,
        ellipse cover,
        rgba(255, 255, 255, 1) 0%,
        rgba(246, 246, 246, 1) 50%,
        rgba(235, 235, 235, 1) 100%
    );
    background: -webkit-gradient(
        radial,
        center center,
        0px,
        center center,
        100%,
        color-stop(0%, rgba(255, 255, 255, 1)),
        color-stop(50%, rgba(246, 246, 246, 1)),
        color-stop(100%, rgba(235, 235, 235, 1))
    );
    background: -webkit-radial-gradient(
        center,
        ellipse cover,
        rgba(255, 255, 255, 1) 0%,
        rgba(246, 246, 246, 1) 50%,
        rgba(235, 235, 235, 1) 100%
    );
    background: -o-radial-gradient(
        center,
        ellipse cover,
        rgba(255, 255, 255, 1) 0%,
        rgba(246, 246, 246, 1) 50%,
        rgba(235, 235, 235, 1) 100%
    );
    background: -ms-radial-gradient(
        center,
        ellipse cover,
        rgba(255, 255, 255, 1) 0%,
        rgba(246, 246, 246, 1) 50%,
        rgba(235, 235, 235, 1) 100%
    );
    background: radial-gradient(
        ellipse at center,
        rgba(255, 255, 255, 1) 0%,
        rgba(246, 246, 246, 1) 50%,
        rgba(235, 235, 235, 1) 100%
    );
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ebebeb', GradientType=1 );
}
.logobox .logo {
    width: 80%;
}

.logobox:hover {
    opacity: 0.9;
    background: rgba(134, 96, 123, 0.09) !important;
}

.logobox.text {
    text-transform: none;
    color: #000;
    text-align: left;
    padding: 1em 2em 1em 1em;
    border-color: rgba(121, 79, 109, 1);
    border-width: 0.2em;
    border-style: solid;
    background: rgb(255, 255, 255);
}
.logobox.text:after {
    width: 0;
    height: 0;
    content: "";
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 18px solid #794f6d;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 93%;
}

.logobox.text h3 {
    margin-top: 0;
    font-family: "Open Sans", serif;
    line-height: 1.4em;
    font-weight: 600;
    font-size: 1.3em;
}

.logobox.text ul {
    font-family: "Open Sans", serif;
}

.only {
    font-family: "Oswald", sans-serif;
    text-transform: uppercase;
    font-size: 1em;
    height: 12.54em;
    font-weight: 300;
    text-align: center;
    background-color: rgb(242, 243, 243);
    position: relative;
    image-rendering: -webkit-optimize-contrast;
}

.only.residence {
    background: url("https://canadiancollege.com/img/index-residence.jpg")
        no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.only.smrt {
    background: url("https://canadiancollege.com/img/index-smrt.jpg") no-repeat
        center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.only.activities {
    background: url("https://canadiancollege.com/img/index-work.jpg") no-repeat
        center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.only.restaurant {
    background: url("https://canadiancollege.com/img/index-restaurant.jpg")
        no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.only.shedule {
    background: url("https://canadiancollege.com/img/movingsignatures/index-schedule.jpg")
        no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.only.studio {
    background: url("https://canadiancollege.com/img/movingsignatures/index-studio.jpg")
        no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.only.production {
    background: url("https://canadiancollege.com/img/movingsignatures/index-production.jpg")
        no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.only.embed {
    background: url("https://canadiancollege.com/img/movingsignatures/index-embed.jpg")
        no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.only a {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    color: rgba(255, 255, 255, 0.95);
    background-color: rgba(0, 0, 0, 0.5);
    text-transform: capitalize;
    font-size: 1em;
    padding: 0.5em;
    font-weight: 400;
    font-family: "Open Sans", serif;
}

.only-text {
    font-size: 1em;
    /*height: 13.5em;*/
    position: relative;
    padding: 1em;
}

.only-text h1 {
    padding-bottom: 0.4em;
    margin: 0;
}

.only-text a {
    font-size: 0.9em;
    text-transform: capitalize;
    display: block;
    position: absolute;
    bottom: 0.8em;
}

.square-photo3 {
    font-family: "Oswald", sans-serif;
    font-size: 1em;
    text-align: center;
    line-height: 1.6em;
    height: 25.86em;
    width: 100%;
    background-color: rgb(242, 243, 243);
    position: relative;
    image-rendering: -webkit-optimize-contrast;
    -webkit-filter: grayscale(20%);
}

.square-photo3-new {
    width: 100%;
    padding-top: 100%; /* 1:1 Aspect Ratio */
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
}

.square-photo3-new img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 2s ease-in-out;
    opacity: 0;
}

.square-photo3-new img.active {
    opacity: 1;
}

.square-photo3-new img.hidden {
    opacity: 0;
}

.square-photo3.int.photo01 {
    background: url("https://canadiancollege.com/img/intensive-photo-01.jpg")
        no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.square-photo3.int.photo02 {
    background: url("https://canadiancollege.com/img/intensive-photo-02.jpg")
        no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.square-photo3.int.photo03 {
    background: url("https://canadiancollege.com/img/intensive-photo-03.jpg")
        no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.square-photo3.uni.photo01 {
    background: url("https://canadiancollege.com/img/uni-photo-01.jpg")
        no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.square-photo3.uni.photo02 {
    background: url("https://canadiancollege.com/img/uni-photo-02.jpg")
        no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.square-photo3.uni.photo03 {
    background: url("https://canadiancollege.com/img/uni-photo-03.jpg")
        no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.square-photo3.bus.photo01 {
    background: url("https://canadiancollege.com/img/bus-photo-01.jpg")
        no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.square-photo3.bus.photo02 {
    background: url("https://canadiancollege.com/img/bus-photo-02.jpg")
        no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.square-photo3.bus.photo03 {
    background: url("https://canadiancollege.com/img/bus-photo-03.jpg")
        no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.square-photo3.exa.photo01 {
    background: url("https://canadiancollege.com/img/exa-photo-01.jpg")
        no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.square-photo3.exa.photo02 {
    background: url("https://canadiancollege.com/img/exa-photo-02.jpg")
        no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.square-photo3.exa.photo03 {
    background: url("https://canadiancollege.com/img/exa-photo-03.jpg")
        no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.square-50 {
    font-family: "Oswald", sans-serif;
    font-size: 1em;
    text-align: center;
    line-height: 1.6em;
    height: 25.86em;
    width: 100%;
    background-color: rgb(242, 243, 243);
    position: relative;
    image-rendering: -webkit-optimize-contrast;
    border-radius: 0.5em;
}

.square-50.english {
    background: url("https://canadiancollege.com/img/index-english-courses.jpg")
        no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.square-50.ccel {
    background: url("https://canadiancollege.com/img/index-ccel.png") no-repeat
        center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.square-50.stenberg {
    background: url("https://canadiancollege.com/img/index-stenberg.png")
        no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.square-50.slc {
    background: url("https://canadiancollege.com/img/index-english-courses5.jpg")
        no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.square-50.eap {
    background: url("https://canadiancollege.com/img/index-eap.jpg") no-repeat
        center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.square-50 h1 {
    font-family: "Open Sans", serif;
    color: #fff;
    text-transform: capitalize;
    font-weight: 400;
    font-size: 1.5em;
    margin: 0.5em 0 0.2em 0;
}

.square-50 .container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    color: rgba(255, 255, 255, 0.95);
    background-color: rgba(54, 62, 69, 0.8);
    font-size: 1em;
    font-weight: 300;
    line-height: 1.5em;
    text-transform: capitalize;
    height: 25%;
    border-radius: 0 0 0.5em 0.5em;
}

.square-50 .container.backfade {
    background: linear-gradient(
        to bottom,
        rgba(54, 62, 69, 0) 0%,
        rgba(54, 62, 69, 0.8) 100%
    );
}

.square-50 .btn {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 1.3em 33%;
    width: 34%;
}

.index-square {
    font-size: 1em;
}

.index-square .title {
    font-weight: 300;
    padding: 0.5em;
    font-size: 1em;
}

/* --------- Block Default --------- */

.block-inside {
    padding: 0 20px 10px 20px;
    background-color: rgb(249, 249, 249);
    border: solid 2px;
    border-radius: 4px;
}

.block-inside h3 {
    margin-top: 20px;
}

.block-inside h4.loading {
    font-size: 43px;
    color: #333;
    margin-top: 1em;
    margin-bottom: 1em;
    text-align: center;
    font-family: "Open Sans", serif;
}

.block-inside .big {
    font-weight: 300;
    font-size: 1.5em;
    font-family: "Open Sans", serif;
    margin-bottom: 1.3em;
    line-height: 2em;
}

.block-inside .form-group-lg select.form-control {
    background-color: #fff;
}

.block-inside .radio-inline {
    height: 46px;
    padding: 10px 0 10px 30px;
    font-size: 18px;
    line-height: 1.3333333;
}

/* --------- Placement Test --------- */

#placement .block-leveltest .form-control {
    font-size: 1em;
}

#placement .btn.btn-form {
    font-family: "Oswald", sans-serif;
    font-size: 1.2em;
    background-color: #0e67cf;
    color: rgba(255, 255, 255, 0.9);
}

#placement .btn.btn-form.start {
    font-size: 1.5em;
    margin: 40px auto 20px auto;
    display: block;
    width: 30%;
}

#placement #test {
    margin-bottom: 70px;
}

#placement #test .form-control {
    background-color: #f7f7f7;
}

/* --------- Course University --------- */

#block-university {
}

#block-university .box {
    font-size: 1em;
    position: relative;
}

#block-university h1 {
    font-weight: 500;
    font-family: "Oswald", sans-serif;
    text-transform: uppercase;
    line-height: 1.2em;
    margin: 0;
    padding-bottom: 0.5em;
}

#block-university .content {
    font-size: 1.2em;
}

#block-university.blank {
    background-color: rgba(0, 0, 0, 0);
    border: solid 0em rgba(0, 0, 0, 0);
    position: relative;
    padding: 0em;
    height: 15em;
}

#block-university .horzontal-divider {
    font-size: 3em;
    position: relative;
    background: url(https://canadiancollege.com/img/icons/horizontal-divider.svg)
        center center no-repeat;
    background-size: 95%;
    display: block;
    width: 0.9em;
    height: 2.8em;
    opacity: 0.6;
    margin-top: 2.2em;
}

/* --------- Course Content --------- */

.block-info {
}

.block-info .content {
    font-size: 1.2em;
    line-height: 1.8em;
}

.block-info .content h3 {
    font-size: 1.5em;
    margin-top: 1em;
}

.block-info .asside {
    margin-top: 1.45em;
}

.block-info .asside .btn-action {
    font-size: 1.2em;
}

.block-info .asside .box {
    width: 100%;
    padding: 10px 0;
}

.block-info .asside .box .pill {
    font-size: 1.1em;
    line-height: 1.4em;
    display: inline-block;
    margin: 0 5px 0 0;
    padding: 0.3em 0.5em;
    font-family: "Open Sans", serif;
    border-radius: 0.25em;
}

.block-info .asside .box .pill .glyphicon {
    margin-right: 2px;
    vertical-align: middle;
}

.block-info .asside .box.flex {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: stretch;
    padding: 4px 0;
}

.block-info .asside .box.flex .date {
    background-color: #495d6e1a;
    border-radius: 0.25em;
    padding: 6px;
    margin: 0 4px;
    font-size: 14px;
    font-weight: 600;
    width: 33%;
    text-align: center;
}

.block-info .asside .box.flex .date.empty {
    background-color: transparent;
}
.block-info .asside .box.flex .date:first-child {
    margin: 0 4px 0 0;
}
.block-info .asside .box.flex .date:last-child {
    margin: 0 0 0 4px;
}

.block-info .cloud {
    padding-left: 0;
}
.block-info .cloud li {
    font-size: 0.8em;
    border-width: 0.15em;
    border-style: solid;
    background-color: rgba(121, 79, 109, 0.05);
    padding: 0.1em 0.6em;
    color: #333;
    margin-top: 0.6em;
    display: inline-block;
    border-radius: 0.5em;
}

#block-shedule {
    font-size: 1em;
}

#block-shedule ul.bottom {
    margin-top: 2em;
    font-size: 1.2em;
}

#block-shedule .time {
    font-family: "Oswald", sans-serif;
    font-size: 1.2em;
    text-transform: uppercase;
    font-weight: 400;
    display: block;
}

#block-shedule .day {
    text-align: center;
    width: 100%;
    border-width: 0.2em;
    border-style: solid;
    position: relative;
    padding: 0.8em;
    margin-top: 1em;
    display: block;
    border-radius: 0.5em;
}

#block-shedule .day.blank {
    border-color: rgb(242, 243, 243);
    background-color: rgb(242, 243, 243);
}

#block-shedule .day.core {
    border-color: rgba(0, 174, 239, 1);
    background-color: rgba(0, 174, 239, 0.05);
}

#block-shedule .day.elective {
    border-color: rgba(44, 168, 74, 1);
    background-color: rgba(44, 168, 74, 0.05);
}

#block-shedule .day.electiveopt {
    border-color: rgba(44, 168, 74, 1);
    background-color: rgba(44, 168, 74, 0.05);
    background: repeating-linear-gradient(
        45deg,
        rgba(44, 168, 74, 0),
        rgba(44, 168, 74, 0) 10px,
        rgba(44, 168, 61, 0.1) 10px,
        rgba(44, 168, 61, 0.1) 20px
    );
}

#block-shedule .week {
    font-family: "Oswald", sans-serif;
    text-transform: uppercase;
    font-weight: 400;
    text-align: right;
    width: 100%;
    border-width: 0.2em;
    border-style: solid;
    border-color: rgb(255, 255, 255);
    position: relative;
    padding: 0.8em 0;
    margin-top: 1em;
    display: block;
}

#block-shedule .week-row {
    width: 5.5%;
}

#block-level {
    font-size: 1em;
    margin-bottom: 70px;
}

#block-level .groups {
    padding: 16px;
    border-radius: 10px;
}

#block-level .group {
    height: 21em;
}

#block-level .groupsm {
    height: 10em;
}

#block-level .section {
    position: absolute;
    bottom: 0;
    width: 88%;
}

#block-level .level {
    font-family: "Oswald", sans-serif;
    font-size: 1.2em;
    text-transform: uppercase;
    font-weight: 400;
    display: block;
}

#block-level .months {
    width: 100%;
    border-width: 0.2em;
    border-style: solid;
    position: relative;
    padding: 0.8em;
    margin-top: 1em;
    display: block;
    border-radius: 0.5em;
}

#block-level .months.square {
    height: 7em;
}

#block-level .months.beg {
    height: 5em;
}

#block-level .months.lowint {
    height: 10em;
}

#block-level .months.int {
    height: 15em;
}

#block-level .months.uppint {
    height: 20em;
}

#block-level .months.adv {
    height: 25em;
}

#block-level .months.uppadv {
    height: 30em;
}

#block-level .months.grey {
    border-style: dashed;
    border-color: rgba(64, 64, 64, 0.5);
    color: rgba(64, 64, 64, 0.5);
    background-color: #fff;
}

#block-level .months.uni {
    border-color: rgba(38, 186, 242, 1);
    background-color: rgba(38, 186, 242, 0.1);
}

#block-level .months.exam {
    border-color: rgba(117, 195, 119, 1);
    background-color: rgba(117, 195, 119, 0.1);
}

#block-level .months.business {
    border-color: rgba(121, 79, 109, 1);
    background-color: rgba(121, 79, 109, 0.1);
}

#block-level .months.businessstrip {
    border-color: rgba(121, 79, 109, 1);
    background-color: rgba(121, 79, 109, 0.05);
    background: repeating-linear-gradient(
        45deg,
        rgb(255, 255, 255),
        rgb(255, 255, 255) 10px,
        rgb(235, 231, 234) 10px,
        rgb(235, 231, 234) 20px
    );
    position: relative;
}

/*
    #block-level .months.business:after, #block-level .months.business:before {
        right: 100%;
        top: 50%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    #block-level .months.business:after {
        border-color: rgba(241, 241, 241, 0);
        border-right-color: #ebe7ea;
        border-width: 39px;
        margin-top: -39px;
    }
    #block-level .months.business:before {
        border-color: rgba(121, 79, 108, 0);
        border-right-color: #794f6c;
        border-width: 42px;
        margin-top: -42px;
    }
    */

#block-level .months.slc {
    border-color: #363e4517;
    background-color: #363e4500;
}

#block-level .months.a {
    border-color: rgba(248, 186, 50, 1);
    background-color: rgba(248, 186, 50, 0.1);
}

#block-level .months.b {
    border-color: rgba(231, 154, 62, 1);
    background-color: rgba(231, 154, 62, 0.1);
}

#block-level .months.c {
    border-color: rgba(217, 130, 60, 1);
    background-color: rgba(217, 130, 60, 0.1);
}

#block-level .months.d {
    border-color: rgba(209, 112, 57, 1);
    background-color: rgba(209, 112, 57, 0.1);
}

#block-level .months.e {
    border-color: rgba(199, 90, 53, 1);
    background-color: rgba(199, 90, 53, 0.1);
}

#block-level .months.f {
    border-color: rgba(193, 56, 61, 1);
    background-color: rgba(193, 56, 61, 0.1);
}

#block-smrt .book {
    width: 100%;
    border-radius: 0.25em;
}

#block-smrt .tab-content {
    font-size: 1.2em;
    font-weight: 300;
}

#block-smrt h4 {
    font-size: 1.3em;
    line-height: 1.5em;
}

#block-smrt .book-block {
    margin-bottom: 2em;
}

#block-activites .book {
    width: 100%;
    border-radius: 0.25em;
}

#block-activites .tab-content {
    font-size: 1.2em;
    font-weight: 300;
}

#block-activites h4 {
    font-size: 1.3em;
}

#block-activites .book-block {
    margin-bottom: 2em;
}

/* --------- Downloads --------- */

.download {
    width: 100%;
    border: 1px solid #e9eaec;
    margin: 15px 0px 0px 0px;
    border-radius: 4px;
    display: inline-flex;
    transition: transform 0.1s ease;
}
.download:hover {
    border: 1px solid #b1b1b1;
    transform: scale(1.02);
}
.downloadpack {
    width: 100%;
    border: 0;
    margin: 15px 0px 0px 0px;
    border-radius: 4px;
    display: inline-flex;
    transition: transform 0.1s ease;
}

.downloadpack:hover {
    border: 0;
    transform: scale(1.02);
}

/* --------- Staff --------- */

.staff {
    width: 100%;
}

.staff h3 {
    margin-top: 0;
}

.staff.lg {
    height: 21.67em;
    background-color: #fff !important;
}

.staff.sm {
    height: 14em;
    margin-bottom: 1.25em;
}

.staff.blank {
    background-color: rgb(242, 243, 243);
}

.staff.sebastian {
    background: url("https://canadiancollege.com/img/staff/sebastian.png")
        no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-color: rgb(242, 243, 243);
}

.staff.mila {
    background: url("https://canadiancollege.com/img/staff/mila.png") no-repeat
        center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-color: rgb(242, 243, 243);
}

.staff.akie {
    background: url("https://canadiancollege.com/img/staff/akie.png") no-repeat
        center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-color: rgb(242, 243, 243);
}

.staff.fabio {
    background: url("https://canadiancollege.com/img/staff/fabio.png") no-repeat
        center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-color: rgb(242, 243, 243);
}

.staff.shaun {
    background: url("https://canadiancollege.com/img/staff/shaun.png") no-repeat
        center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-color: rgb(242, 243, 243);
}

.staff.shoji {
    background: url("https://canadiancollege.com/img/staff/shoji.png") no-repeat
        center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-color: rgb(242, 243, 243);
}

.staff.adam {
    background: url("https://canadiancollege.com/img/staff/adam.png") no-repeat
        center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-color: rgb(242, 243, 243);
}

.staff.ian {
    background: url("https://canadiancollege.com/img/staff/ian.png") no-repeat
        center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-color: rgb(242, 243, 243);
}

.staff.sam {
    background: url("https://canadiancollege.com/img/staff/sam.png") no-repeat
        center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-color: rgb(242, 243, 243);
}

.staff.jenica {
    background: url("https://canadiancollege.com/img/staff/jenica.png") no-repeat
        center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-color: rgb(242, 243, 243);
}

.staff.sunny {
    background: url("https://canadiancollege.com/img/staff/sunny.png") no-repeat
        center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-color: rgb(242, 243, 243);
}

.staff.michiko {
    background: url("https://canadiancollege.com/img/staff/michiko.png") no-repeat
        center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-color: rgb(242, 243, 243);
}

.staff.geoff {
    background: url("https://canadiancollege.com/img/staff/geoff.png") no-repeat
        center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-color: rgb(242, 243, 243);
}

.staff.nadiia {
    background: url("https://canadiancollege.com/img/staff/nadiia.png") no-repeat
        center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-color: rgb(242, 243, 243);
}

.staff.ayako {
    background: url("https://canadiancollege.com/img/staff/ayako.png") no-repeat
        center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-color: rgb(242, 243, 243);
}

/* --------- Footer --------- */

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 351px; /* Footer size */
}

#block-footer {
    background-color: #363e45;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 251px; /* Footer size */
    margin-top: 100px;
}

#block-footer h3 {
    font-family: "Oswald", sans-serif;
    font-size: 1.3em;
}

#block-footer a {
    font-weight: 400;
    font-family: "Open Sans", serif;
    margin: 0.2em 0;
    display: inline-block;
    color: rgb(97, 97, 97);
}

#block-footer .logos {
    opacity: 0.5;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: gray;
}

#block-footer .logos:hover {
    opacity: 1;
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    filter: none;
}

#block-footer #copywrite {
    padding: 15px 0;
    color: rgba(241, 241, 241, 0.5);
    text-align: right;
}

#block-footer #copywrite a {
    color: rgba(241, 241, 241, 0.5);
    margin: 0;
}

#block-footer #copywrite p {
    margin: 2px 0;
}

#block-fees hr,
#application hr {
    border-top: 1px solid rgb(51, 51, 51);
    margin: 3em auto;
}

#block-social {
    margin: 40px auto;
    max-width: 1100px;
}

#block-social a {
    color: #333;
}

#block-social .social-box {
    font-family: "Oswald", sans-serif;
    font-size: 1em;
    text-transform: uppercase;
    font-weight: 400;
    text-align: center;
}

#block-social .social-box p {
    padding-top: 10px;
    font-family: "Oswald", sans-serif;
}

#block-social #partners {
    display: flex;
    margin-left: auto;
    max-width: 400px;
    text-align: right;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
}

#block-social .icon {
    opacity: 0.5;
    font-size: 1em;
    position: relative;
    display: block;
    width: 4em;
    height: 4em;
    margin: auto;
    background-position: center center;
    background-repeat: no-repeat;
}

#block-social .icon:hover {
    opacity: 1;
}

#block-social .icon.icon-facebook {
    background-image: url(https://canadiancollege.com/img/icons/social-facebook.svg);
    margin-right: 25px;
}

#block-social .icon.icon-instagram {
    background-image: url(https://canadiancollege.com/img/icons/social-instagram.svg);
    margin-right: 25px;
}

#block-social .icon.icon-youtube {
    background-image: url(https://canadiancollege.com/img/icons/social-youtube.svg);
    margin-right: 25px;
}

#block-social .icon.icon-twitter {
    background-image: url(https://canadiancollege.com/img/icons/social-twitter.svg);
    margin-right: 25px;
}

#block-social .icon.icon-snapchat {
    background-image: url(https://canadiancollege.com/img/icons/social-snapchat.svg);
    margin-right: 25px;
}

/* --------- Forms --------- */

.required {
    color: #0e67cf;
}

.form-group-lg {
    margin-bottom: 15px;
}

.form-group-lg .control-label {
    /*font-weight: 700;
	text-align: left;*/
}

.form-group-lg select.form-control {
    background-color: #f7f7f7;
}

.form-control {
    box-shadow: none;
}

.has-error .form-control,
.has-error .control-label {
    color: #c95248;
}

.panel-default {
    background-color: rgb(249, 249, 249);
}

.disabled-label {
    display: block;
    height: 34px;
    padding: 6px 12px;
    border: 1px solid rgba(204, 204, 204, 0);
    padding-top: 7px;
    text-align: right;
    font-weight: 700;
}

.disabled-text {
    display: block;
    height: 34px;
    padding: 6px 12px;
    border: 1px solid rgba(204, 204, 204, 0.53);
    border-radius: 4px;
    background-color: transparent;
}

.disabled-text.bold {
    font-weight: 700;
}

.disabled-text.lg {
    height: 46px;
    padding: 10px 16px;
    font-size: 18px;
}

label.control-label {
    text-align: left !important;
}

#application {
}

h4.sent {
    font-size: 43px;
    color: #333;
    margin-top: 2em;
    margin-bottom: 2em;
    text-align: center;
    font-family: "Open Sans", serif;
}

.btn.btn-form {
    font-family: "Oswald", sans-serif;
    font-size: 1.2em;
    background-color: #0e67cf;
    color: rgba(255, 255, 255, 0.9);
}

/* --------- Carousel --------- */
.carousel-fade .carousel-inner .item {
    transition-property: opacity;
}

.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    opacity: 0;
}

.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
}

.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    left: 0;
    transform: translate3d(0, 0, 0);
}

.carousel,
.carousel-inner,
.carousel-inner .item {
    height: 100%;
}

#index .item:nth-child(1) {
    background: url("https://canadiancollege.com/img/covers/cover-index01.jpg")
        no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#index .item:nth-child(2) {
    background: url("https://canadiancollege.com/img/covers/cover-index02.jpg")
        no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#index .item:nth-child(3) {
    background: url("https://canadiancollege.com/img/covers/cover-index03.jpg")
        no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

/* --------- Css Animations --------- */

.os-animation,
.staggered-animation {
    visibility: hidden;
}

.animated {
    visibility: visible !important;
}

/* --------- Stripe --------- */

/**
 * The CSS shown here will not be introduced in the Quickstart guide, but shows
 * how you can use CSS to style your Element's container.
 */
.StripeElement {
    box-sizing: border-box;

    height: 40px;

    padding: 10px 12px;

    border: 1px solid transparent;
    border-radius: 4px;
    background-color: white;

    box-shadow: 0 1px 3px 0 #e6ebf1;
    -webkit-transition: box-shadow 150ms ease;
    transition: box-shadow 150ms ease;
}

.StripeElement--focus {
    box-shadow: 0 1px 3px 0 #cfd7df;
}

.StripeElement--invalid {
    border-color: #fa755a;
}

.StripeElement--webkit-autofill {
    background-color: #fefde5 !important;
}

/* News */

#smrtcafe2 {
}
#smrtcafe2 #subnavtitle {
    max-width: none;
}
.videothumb {
    overflow: hidden;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    display: inline-block;
    vertical-align: bottom;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    box-shadow: 0 2px 0 0 rgba(5, 45, 73, 0.06999999999999995);
    background-color: #fff;
}

#smrtcafe2 .left-col #content h3 {
    margin-bottom: 12px;
    color: #2f2f2f;
    padding: 40px 0 3px;
}
#smrtcafe2 .newsdesc {
    padding-bottom: 2em;
}
#smrtcafe2 .newsdesc ul {
    list-style-type: disc;
}
#smrtcafe2 .newsdesc h3 {
    font-weight: 600;
    margin: 0;
    padding: 0.6em 0.5em;
    font-size: 1.2em;
    line-height: 1.3;
	 font-family: "Open Sans", serif;
}
#smrtcafe2 .newsdesc .content {
    margin: 0;
    padding: 0 0.5em;
    font-size: 1em;
}
#smrtcafe2 .newsdesc .category {
    margin: 0 0 0.5em 0.5em;
    padding: 1px 8px;
    background-color: #ffffff9c;
    color: #333e46c9;
    display: inline-block;
    text-decoration: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
}
#smrtcafe2 .newsdesc .category:hover {
    background-color: #ffffff;
}

#smrtcafe2 .newsdesc .category.catnews {
    background-color: #0e67cf;
    color: #fff;
}
#smrtcafe2 .newsdesc .category.catnews:hover {
    background-color: #0c509f;
}
#smrtcafe2 .newsdesc .category.catprograms {
    background-color: #5c536e;
    color: #fff;
}
#smrtcafe2 .newsdesc .category.catprograms:hover {
    background-color: #4d4362;
}
#smrtcafe2 .newsdesc .category.catstories {
    background-color: #009688;
    color: #fff;
}
#smrtcafe2 .newsdesc .category.catstories:hover {
    background-color: #007b6f;
}
#smrtcafe2 .newsdesc .category.catcareers {
    background-color: #00bcd4;
    color: #fff;
}
#smrtcafe2 .newsdesc .category.catcareers:hover {
    background-color: #00a2b8;
}
#smrtcafe2 .newsdesc .category.catstudentlife {
    background-color: #8bc34a;
    color: #fff;
}
#smrtcafe2 .newsdesc .category.catstudentlife:hover {
    background-color: #8bc34a;
}
    .catlist {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
        list-style: none;
        padding-left: 0;
        padding-right: 0;
    }

#smrtcafe2 .newsdesc .link {
    margin: 0.8em 0.5em 0 0.5em;
    padding: 0.3em 0.5em;
    font-size: 0.8em;
    background-color: #333e46bd;
    font-weight: 600;
    color: #ffffff;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    display: inline-block;
    text-decoration: none;
}
#smrtcafe2 .newsdesc .link:hover {
    background-color: #0097fa;
}
#smrtcafe2 .newsdesc a {
    color: #333;
}
#smrtcafe2 .left-col .newsdescfull {
    padding-bottom: 15px;
    float: left;
    margin-bottom: 0;
    font-size: 13px;
    line-height: 22px;
    min-height: 249px;
}
.postimage {
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    transform: scale(1.05);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    -moz-transition: all 0.2s;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}
.videothumb:hover .postimage {
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}
.videothumb .icocircle {
    font-size: 4em;
    line-height: 1.2em;
    z-index: 2;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -0.6em;
    margin-left: -0.5em;
    padding: 0;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0);
    -webkit-border-radius: 0.2em;
    -moz-border-radius: 0.2em;
    border-radius: 0.2em;
    opacity: 1;
}
#smrtcafe2 .blog {
    margin-bottom: 25px;
}
#smrtcafe2 ul li .blog {
    clear: both;
}
.icocircle.material-symbols-rounded {
    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 48;
    color: #fff;
}

#category {
    display: flex; 
}
#category label {
    text-align: right;
    margin: 0.45em 0 0.45em 0;
    padding: 0 0.9em 0 0;    
	 flex: 0 0 50%;
}
#category .autocomplete {
    flex: 0 0 50%;
	     width: 100%;
}
#category select {
    border-color: transparent;
    padding: 7px 26px 7px 10px;
    font-size: 16px;
}
#category select:hover {
    border-color: transparent;
    padding: 7px 26px 7px 10px;
}
#categorynav {
    list-style: none;
    padding: 0;
    margin: 10px 0 0 0;
    display: inline-block;
}
#categorynav li {
    float: left;
}
#categorynav li a {
    margin: 0 10px 0 0;
    padding: 1px 8px;
    color: #5d666c;
    background-color: #ffffff9c;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    display: inline-block;
    text-decoration: none;
}
#categorynav li a:hover {
    background-color: #ffffff;
}
#categorynav li a.active {
    color: #fff;
    background-color: #373e44;
}

#categorynav li a.catnews {
    background-color: #0c509f;
}
#categorynav li a.catprograms {
    background-color: #5c536e;
}
#categorynav li a.catstories {
    background-color: #009688;
}
#categorynav li a.catcareers {
    background-color: #00bcd4;
}
#categorynav li a.catstudentlife {
    background-color: #8bc34a;
}
.input-group-addon.find {
    padding: 4px 12px;
    border-radius: 0px 4px 4px 0px !important;
    border-left: 0;
}
.autocomplete {
    /*the container must be positioned relative:*/
    position: relative;
    display: inline-block;
    padding: 0;
}
.autocomplete #search {
    border: 0;
    box-shadow: none;    
	 height: 38px;
}
.autocomplete .input-group-addon {
    border: 0;
    background-color: #fff;
    border-bottom-right-radius: 4px !important;
    border-top-right-radius: 4px !important;
}
.autocomplete .input-group-addon:focus,
.autocomplete .input-group-addon:hover {
    background-color: #0e67cf;
}
.autocomplete .input-group-addon:focus .icoinput,
.autocomplete .input-group-addon:hover .icoinput {
    color: #fff;
}

.autocomplete-items {
    position: absolute;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    /*position the autocomplete items to be the same width as the container:*/
    top: 110%;
    left: 0;
    right: 0;
    background-color: #fff;
    border-radius: 4px;
}

.autocomplete-items div {
    padding: 10px;
    cursor: pointer;
}
.autocomplete-items div:hover {
    /*when hovering an item:*/
    background-color: #0097fa !important;
    color: #fff;
}
.autocomplete-items div:first-child {
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
}
.autocomplete-items div:last-child {
    /*when hovering an item:*/
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}
.autocomplete-active {
    /*when navigating through the items using the arrow keys:*/
    background-color: #0097fa !important;
    color: #fff;
}

/* -----------------------------------*/
/* -------->>> Admin <<<---------*/
/* -----------------------------------*/

.filter {
    background-color: #f3f3f3;
    padding: 0 1em 1em 1em;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
}
    .filter .item {
        margin: 1em 0 0 0;
    }

	 /* -----------------------------------*/
/* --------->>> Tables <<<------------*/
/* -----------------------------------*/

#results table.tblHighlight .smalltext {
    text-decoration: none;
    color: #373e45;
    user-select: none;
    font-weight: 500;
    font-size: 13px;
}

#results table.tblHighlight th {
    border-width: 0 0 2px 0;
    border-color: #363e45;
}
    #results table.tblHighlight tr.notice,
    #results table.tblHighlight tr.active.notice td {
        background-color: rgb(255, 250, 204);
    }

#results table.tblHighlight {
	width: 100%;
	border: 0 none;
	font-size:14px; /* Changed from 13px */ 
}
	#results table.tblHighlight th,
	#results table.tblHighlight td {
		padding: 10px 15px;
        font-size: 1.1em;
		line-height: 19px;
		color: #333;
		border-bottom: solid #E7E7E7 1px;
        cursor: default;
	}
	#results table.tblHighlight .noline th,
	#results table.tblHighlight .noline td {
		border-bottom: 0 none;
	}			
	#results table.tblHighlight th {
		color: rgba(54, 62, 69, 0.81);
		white-space:nowrap;	    
        border-bottom: solid 2px #363e45;	
	}
	#results table.tblHighlight tr:last-child td {
		border-bottom: 0 !important;
	}
	#results table.tblHighlight tr.alt {
		background-color: #ffffff;
	}
	#results table.tblHighlight tr.active td {
		background-color: rgb(252, 252, 252);
		color: #333;
	}
	#results table.tblHighlight.nohover tr.active td {
	    background-color: rgb(255, 255, 255);
	    color: #333;
	}
	#results table.tblHighlight tr.striped td {
		background-color: rgb(252, 252, 252);
		color: #333;
	}
	#results table.tblHighlight tr.active.nonstriped td {
        background-color: #ffffff;
	}
	#results table.tblHighlight a {
		color: #2196F3;
		text-decoration: none;
        font-weight: 600;
	}
	#results table.tblHighlight a:hover {
		text-decoration: none;
		color: #666;
	}	

#results table.tblHighlight .sortable-placeholder { 
    height: 59px;
    border: 0;
    background-color: #eef0f2;
}
#results table.tblHighlight .notmarked {
    background-color: #607d8b00;
    text-align: left;
    font-weight: 400;
    color: #353e453d;
}
#results table.tblHighlight .resultgraph {
    background-color: #607d8b38;
    border-radius: 16px;
}
    #results table.tblHighlight .resultgraph .complete {
        min-width: 50%;
        text-align: center;
        border-radius: 16px;
        /*padding: .01em 10px;*/
        color: #fff;
        font-weight: 600;
        font-size: 13px;
    }
    #results table.tblHighlight .resultgraph.large .complete {
        min-width: 30%;
    }
        #results table.tblHighlight .resultgraph .complete.great {
            background-color: #00b241;
        }
        #results table.tblHighlight .resultgraph .complete.good {
            background-color: #ff9800;
        }
        #results table.tblHighlight .resultgraph .complete.process {
            background-color: #ffc107;
        }
        #results table.tblHighlight .resultgraph .complete.bad {
            background-color: #f44336;
        }

#results table.tblHighlight .openclosed {
    background-color: #607d8b38;
    min-width: 35%;
    text-align: center;
    border-radius: 4px;
    color: #fff;
    font-weight: 600;
    font-size: 12px;
    padding: 2px;
}
    #results table.tblHighlight .openclosed.open {
        background-color: #00b241;
    }
    #results table.tblHighlight .openclosed.eval {
        background-color: #ff5722;
    }
    #results table.tblHighlight .openclosed.closed {
        background-color: #363e455f;
    }

#results table.tblHighlight .result {
    
}
    #results table.tblHighlight .result .complete {
        min-width: 30%;
        text-align: center;
    }
        /*#results table.tblHighlight .result .complete .ico.i-done {
            color: #00b241;
            vertical-align: sub;
        }
        #results table.tblHighlight .result .complete .ico.i-close {
            color: #f44336;
            vertical-align: sub;
        }*/
        #results table.tblHighlight .result .complete.great {
            color: #00b241;
        }
        #results table.tblHighlight .result .complete.good {
            color: #ff5722;
        }
        #results table.tblHighlight .result .complete.bad {
            color: #f44336;
        }
#results table.tblHighlight.assess {
    border-collapse: separate;
    border: solid #373e44 2px;
    border-radius: 6px;
}
    #results table.tblHighlight.assess thead {
        background-color: #373e4421;
    }
    #results table.tblHighlight.assess th {
        border-bottom: solid 2px #373e44;
        color: #373e44;
    }

    #results table.tblHighlight.assess.notshared {
        border: solid #F44337 2px;
    }
    #results table.tblHighlight.assess.notshared thead {
        background-color: #F443372b;
    }
    #results table.tblHighlight.assess.notshared th {
        border-bottom: solid 2px #F44337;
    }

    #results table.tblHighlight.assess.inprogress {
        /*border: solid #ffc107 2px;*/
    }
    #results table.tblHighlight.assess.inprogress thead {
        /*background-color: #ffc1072b;*/
    }
    #results table.tblHighlight.assess.inprogress th {
        /*border-bottom: solid 2px #ffc107;*/
    }

    #results table.tblHighlight.assess.evaluation {
        border: solid #ffc107 2px;
    }
    #results table.tblHighlight.assess.evaluation thead {
        background-color: #ffc1072b;
    }
    #results table.tblHighlight.assess.evaluation th {
        border-bottom: solid 2px #ffc107;
    }

    #results table.tblHighlight.assess.complete {
        border: solid #4caf50 2px;
    }
    #results table.tblHighlight.assess.complete thead {
        background-color: #4caf502b;
    }
    #results table.tblHighlight.assess.complete th {
        border-bottom: solid 2px #4caf50;
    }

#results table.tblHighlight.assess tbody tr.active {
    background-color: #373e440d;
}
    #results table.tblHighlight.assess tbody tr:last-child.active {
        border-radius: 6px 6px 0 0;
    }
    #results table.tblHighlight.assess tbody tr.active td {
        background-color: transparent;
    }
#results .btncontainer span {
    margin: 0 0 0 10px;
    float: right
}

/* -----------------------------------*/
/* -------->>> Pagination <<<---------*/
/* -----------------------------------*/

.pagination {
    margin: 30px 0 0 0;
    display: inline-block;
    padding-left: 0;
    border-radius: 4px;
}
.pagination > li > a,
.pagination > li > span {
    border: none;
}
.pagination > li:first-child > a,
.pagination > li:first-child > span {
    margin: 0 5px;
    background-color: transparent;
    color: #2196f3;
}
.pagination > li:last-child > a,
.pagination > li:last-child > span {
    margin: 0 5px;
    background-color: transparent;
    color: #2196f3;
}
.pagination > li > a,
.pagination > li > span {
    margin: 0 5px;
    background-color: transparent;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
    border-radius: 17px;
    -moz-border-radius: 17px;
    -webkit-border-radius: 17px;
    margin: 0 5px;
    background-color: #2196f3;
    border-color: #2196f3;
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
    border-radius: 17px;
    -moz-border-radius: 17px;
    -webkit-border-radius: 17px;
    margin: 0 5px;
    background-color: #fff;
}
.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
    background-color: transparent;
}

#filter-results {
    text-align: right;
    padding: 5px 0 30px 15px;
    font-size: 10px;
    color: #9d9d9d;
}
#filter-results.alignright {
    float: right;
    padding-top: 25px;
}

#tooltip h3,
#tooltip div {
    line-height: 18px;
}

/* -----------------------------------*/
/* -------->>> Translation <<<---------*/
/* -----------------------------------*/

.translation-editor {
    padding: 0;
    border-radius: 4px;
    margin: 0;
    min-width: 50px;
    display: inline-block;
    white-space: normal; /* Allow normal word wrapping */
    background: rgba(0, 123, 255, 0.1); /* Keep the blue background */
    width: 100%; /* Take full width of parent */
}

.translation-editor:focus {
    outline: none;
}

.translatable {
    display: inline-block;
    background: rgba(0, 123, 255, 0.1);
}

.translatable:hover {
    cursor: text;
}

.translation-notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 15px 25px;
    border-radius: 4px;
    display: none;
    z-index: 9999;
    animation: slideIn 0.3s ease-out;
}

.translation-notification.success {
    background-color: #28a745;
    color: white;
}

.translation-notification.error {
    background-color: #dc3545;
    color: white;
}

@keyframes slideIn {
    from {
        transform: translateY(100px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

[data-translation-key] {
    cursor: text;
    background-color: rgba(0, 123, 255, 0.1);
}



/* Very Small devices (iPhone) */

@media (max-width: 767px) {
    #block-level .section {
        font-size: 11px;
    }

    .bg.index {
        background: url("https://canadiancollege.com/img/covers/cover-index04m.jpg")
            no-repeat center center;
        background-size: cover;
    }

    .ccel-logo {
        height: 31px;
    }

    .languagebubble {
        top: 53px;
    }

    .index-square,
    .only,
    .only-text,
    .square-50 {
        font-size: 1.4em;
    }

    .navbar-nav > li > a {
        font-size: 1.2em;
        padding: 0.7em 0.4em;
    }

    .nav-tabs > li > a {
        font-size: 0.8em;
    }

    .navbar-brand {
        height: 51px;
        padding: 10px;
    }

    .bg {
        height: 300px;
    }
    
    .bg.news {
        height: 200px;
    }

    #subnav a {
        font-size: 1.2em;
    }

    #block-footer .logos.pad {
        margin-left: 10px;
    }

    #index .huge {
        font-size: 1.1em;
    }

    .square-50.english,
    .square-50.eap {
        height: 21em;
    }

    .square-50 .btn {
        margin: 1.3em 13%;
        width: 75%;
    }

    .square-50 .container {
        font-size: 0.8em;
    }

    #block-shedule .day,
    #block-shedule .week-row,
    #block-shedule .week,
    #block-shedule .time {
        font-size: 0.7em;
    }
    #block-shedule .day {
        height: 4.7em;
    }
    #block-shedule .week {
        height: 7.2em;
    }

    #block-level .group {
        height: auto;
    }
    #block-level .level {
        margin-top: 1em;
    }
    #block-level .section {
        position: relative;
        width: 100%;
    }
    #block-level .months.beg,
    #block-level .months.lowint,
    #block-level .months.int,
    #block-level .months.uppint,
    #block-level .months.adv,
    #block-level .months.uppadv {
        height: auto;
    }

    .g-recaptcha {
        transform: scale(0.77);
        transform-origin: 0 0;
    }

    #placement .btn.btn-form.start {
        width: 50%;
    }
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .ccel-logo {
        height: 31px;
    }

    .languagebubble {
        top: 59px;
    }

    .index-square,
    .only,
    .only-text,
    .square-50 {
        font-size: 1.4em;
    }

    .navbar-nav > li > a {
        font-size: 0.95em;
        padding: 1.2em 0.4em;
    }

    .navbar-brand {
        height: 51px;
        padding: 10px;
    }

    .bg {
        height: 350px;
    }
    
    .bg.news {
        height: 200px;
    }

    #subnav a {
        font-size: 1.2em;
    }

    #index .academic .logo {
        margin: 1.1em 0;
    }

    .col-sm-15 {
        width: 20%;
        float: left;
    }

    .square-50 .container {
    }
    .square-50 .btn {
        margin: 1.3em 13%;
        width: 75%;
    }

    #block-shedule .day,
    #block-shedule .week-row,
    #block-shedule .week,
    #block-shedule .time {
    }
    #block-shedule .day,
    #block-shedule .week {
    }
    .g-recaptcha {
        transform: scale(0.77);
        transform-origin: 0 0;
    }

    #placement .btn.btn-form.start {
        width: 33%;
    }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    #index .huge.colfour {
        padding: 4.63em 1em;
    }
    .ccel-logo {
        height: 37px;
    }

    .index-square,
    .only,
    .only-text,
    .square-50 {
        font-size: 1.293em;
    }

    .navbar-nav > li > a {
        font-size: 1.2em;
        padding: 1.1em 0.7em;
    }

    .navbar-brand {
        height: 57px;
    }

    .bg {
        height: 400px;
    }
    
    .bg.news {
        height: 200px;
    }

    #subnav a {
        font-size: 1.2em;
    }

    #index .academic .logo {
        margin: 1.1em 0;
    }

    .col-md-15 {
        width: 20%;
        float: left;
    }

    .square-50 .container {
        font-size: 1em;
    }
    .square-50 .btn {
        margin: 1.3em 21%;
        width: 58%;
    }
    .g-recaptcha {
        transform: scale(1);
        transform-origin: 0 0;
    }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .container {
        /*width: 970px;*/
    }

    #index .huge.colfour {
        padding: 4.63em 1em;
    }

    .index-square,
    .only,
    .only-text,
    .square-50 {
        font-size: 1.293em;
    }

    .navbar-nav > li > a {
        font-size: 1.2em;
        padding: 1.1em 0.8em;
    }

    .navbar-brand {
        height: 57px;
    }

    .bg {
        height: 400px;
        width: 1170px;
        margin: auto;
    }
    
    .bg.news {
        height: 200px;
    }

    #subnav a {
        font-size: 1.4em;
    }

    #index .academic .logo {
        margin: 0.13em 0;
    }

    .col-lg-15 {
        width: 20%;
        float: left;
    }
}

/* Google Reviews */
.reviews-summary{text-align:center;margin-bottom:2rem}.google-rating{display:inline-flex;align-items:center;gap:1rem;background:#fff;padding:1rem 2rem;border-radius:.5em;box-shadow:0 2px 8px rgba(0,0,0,.08)}.google-logo{height:24px;width:auto}.rating-stars{display:flex;gap:.1rem}.star-filled{color:#FBBC04;font-size:1.4rem;font-variation-settings:"FILL" 1,"wght" 400,"GRAD" 0,"opsz" 48}.rating-text{font-family:"Open Sans",serif;font-weight:600;color:#333;font-size:1.1rem}.reviews-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;padding:1rem 0;margin:0 auto}@media(max-width:1200px){.reviews-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){.reviews-grid{grid-template-columns:1fr}}.review-card{background:#fff;border-radius:.5em;padding:1.5rem;box-shadow:0 2px 8px rgba(0,0,0,.06);transition:box-shadow .3s ease,transform .3s ease;display:flex;flex-direction:column}.review-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.1);transform:translateY(-2px)}.review-header{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:1rem;flex-wrap:wrap}.reviewer-avatar{flex-shrink:0}.reviewer-avatar .material-symbols-rounded{font-size:2.5rem;color:#9e9e9e;font-variation-settings:"FILL" 1,"wght" 400,"GRAD" 0,"opsz" 48}.reviewer-info{flex:1;min-width:0}.reviewer-name{display:block;font-family:"Oswald",sans-serif;font-weight:400;font-size:1rem;color:#333;text-transform:uppercase}.reviewer-origin{display:block;font-family:"Open Sans",serif;font-size:.85rem;color:#757575;margin-top:.15rem}.review-rating{display:flex;gap:.1rem}.review-rating .star-filled{font-size:1rem}.review-content{flex:1}.review-content p{font-family:"Open Sans",serif;font-size:1rem;line-height:1.6;color:#555;margin:0;font-style:italic}.reviews-cta{text-align:center;margin-top:2rem}.reviews-link{display:inline-flex;align-items:center;gap:.5rem;font-family:"Open Sans",serif;font-size:1.1rem;color:#0e67cf;text-decoration:none;transition:color .2s ease}.reviews-link:hover{color:#0a4d99;text-decoration:underline}.reviews-link .material-symbols-rounded{font-size:1.2rem}

/* Working Holiday Page */
#working-holiday .navbar-default .navbar-nav > li > a.index-contact {
    background-color: #2c7dc0;
}

#working-holiday .section-header {
    color: #2c7dc0;
}

#working-holiday #block-askexpert .form-group .btn-form {
    background-color: #2c7dc0;
}

#working-holiday .btn-form {
    background-color: #2c7dc0;
}

.bg.working-holiday {
    background: url("https://canadiancollege.com/img/covers/cover-working-holiday.jpg")
        no-repeat center center;
    background-size: cover;
}

#working-holiday .schedule-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    table-layout: fixed;
}

#working-holiday .schedule-table th,
#working-holiday .schedule-table td {
    border: 1px solid #b8d4ed;
    padding: 12px 8px;
    text-align: center;
    vertical-align: middle;
    width: 16.66%;
}

#working-holiday .schedule-table th {
    background-color: #2c7dc0;
    color: #fff;
    font-weight: 600;
}

#working-holiday .schedule-table tbody tr:nth-child(odd) {
    background-color: #e8f2fa;
}

#working-holiday .schedule-table tbody tr:nth-child(even) {
    background-color: #fff;
}

#working-holiday .schedule-table td.time {
    background-color: #d0e4f5;
    font-weight: 600;
    white-space: nowrap;
}

#working-holiday .schedule-table td.workshop {
    font-size: 0.9em;
    background-color: #f0f7fc;
}

@media (max-width: 768px) {
    #working-holiday .schedule-table {
        font-size: 0.85em;
    }
    #working-holiday .schedule-table th,
    #working-holiday .schedule-table td {
        padding: 8px 4px;
    }
}