/*############*/
/* GLOBAL     */
/*############*/
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {text-decoration: underline;}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {text-decoration: none;}
[class^="icon-"]:before, [class*=" icon-"]:before {cursor: pointer;}
body {background: white;}
@media (min-width: 1200px){
    body.home .hentry {width: 1170px; margin: 0 auto !important;}
    body.home #container {width: auto; margin-left: -15px!important; margin-right: -15px!important;}
    #container {width: 1170px; margin: 0 auto !important;} 
}


/*LINKS*/
a.view-all {font-weight: bold; float: right; margin-top: -25px;}
a.feature {
    text-decoration: none;
    color: #2f5d7c;
    border: 1px solid #2f5d7c;
    padding: 10px 15px;
    padding-right: 35px;
    margin: 15px 0;
    width: auto;
    display: block;
    position: relative;
}
a.feature:hover {
    background-color: #2f5d7c;
    color: #ffffff!important;
    border: 1px solid #2f5d7c;
}
a.feature:after {
    float: right;
    position: absolute;
    font-family: FontAwesome;
    font-size: 20px;
    right: 14px;
    }
a.feature:not([href*='https://stjohns.ubc.ca/']):after, 
a.feature:not([href*='https://stjohns.ubc.ca/']):not([href*='/']):after,
a.feature[target="_blank"]:after {
    content: '\f08e';
    }
a.feature[href$='.pdf']:after,
a.feature[href$='.doc']:after,
a.feature[href$='.docx']:after,
a.feature[href$='.xls']:after,
a.feature[href$='.xlsx']:after {
    content: '\f019';
}


/*MENU BUTTON*/
#ubc7-unit-menu .nav {
    width: 100%;
    }
#ubc7-unit-menu .nav>li.menu-button {
    float: right!important;
    display: inline-block;
    position: relative;
    }
#ubc7-unit-menu .nav>li.menu-button>a, #subsidiary .nav>li.menu-button>a {
    background-color: #2f5d7c;
    color: white;
    font-weight: bold;
    padding: 8px 18px;
    text-align: center;
    margin: 5px;
    margin-top: 8px;
    line-height: 12px;
    -moz-border-radius: 3px!important;
    -webkit-border-radius: 3px!important;
    -khtml-border-radius: 3px!important;
    border-radius: 3px!important;
    }


/*##################*/
/* WIDGETS          */
/*##################*/
.section-widget img[src="No Images"] {display: none;}

/*Banner Image*/
@media screen and (min-width: 1200px) {
    .banner-img {width: 1200px; margin: 0 auto;}
}

/*##################*/
/* SIDE NAV MENU    */
/*##################*/
.sidenav .single a.opened {
    color: white;
    background: #2f5d7c!important;
    }
.sidenav .opened .right-arrow {
    background-position: -1113px -227px!important;
    }


/*##################*/
/* SUBSIDIARY MENU  */
/*##################*/
body.home #subisidiary {width: calc(100% + 35px);}
#subsidiary {background: #F6F6F6; width: calc(100% + 20px); margin: 70px -20px 0 -20px; padding-bottom: 50px;}
#subsidiary h3 {color: #A20000; text-align: center; text-transform: uppercase;}
#subsidiary .nav-menu {padding: 10px;}
#subsidiary .nav-menu > li {margin-left: 2%; margin-bottom: 2%; width: 18%; margin-top: 10px; float: left; display: table-cell;}
#subsidiary .nav-menu > li li {list-style: none; line-height: 14px; padding-bottom: 10px;}
#subsidiary .nav-menu > li > a {text-transform: uppercase; font-size: 12px; letter-spacing: 1px; line-height: 0;}
#subsidiary .nav-menu li a {color: #2f5d7c; text-decoration: none; font-size: 12px;}
#subsidiary .nav-menu li a:hover, #subsidiary .nav-menu li a:active, #subsidiary .nav-menu li a:focus {color: #990000;}
#subsidiary ul.sub-menu {margin-left: 15px!important; margin-top: 5px;}
#subsidiary ul.sub-menu li {padding-bottom: 5px;}
#subsidiary li.menu-button {margin-top: 10px;}
#subsidiary li.menu-button > a {
    background-color: #2f5d7c;
    color: white;
    font-weight: bold;
    padding: 8px 18px;
    text-align: center;
    -moz-border-radius: 3px!important;
    -webkit-border-radius: 3px!important;
    -khtml-border-radius: 3px!important;
    border-radius: 3px!important;
    white-space: nowrap;
    }
#subsidiary li.menu-button > a:hover, #subsidiary li.menu-button > a:active, #subsidiary li.menu-button > a:focus {
    background: #002145;
    color: white;
    }
@media screen and (max-width: 979px) {
    #subsidiary {
        width: auto;
        margin-left: -20px;
        margin-right: -20px;
        }
    }
@media screen and (max-width: 767px) {
    #subsidiary {overflow: hidden;}
    #subsidiary .nav-menu li:nth-child(3n+1) {clear: both;}
    #subsidiary .nav-menu > li {width: 28%; margin-left: 5%;}
}
@media screen and (max-width: 480px) {
    #subsidiary .nav-menu > li {
        width: 89%;
        border-bottom: 1px solid #cecece;
        padding-bottom: 10px;
    }
}


/*##############*/
/* HOMEPAGE     */
/*##############*/
body.home .utility.span12 {min-height: 0;}
body.home #content h3 {
    color: #A20000;
    text-align: center;
    text-transform: uppercase;
    }
body.home #content hr {
    border-color: #2f5d7c;
    width: 15%;
    margin: 20px auto;
    }
body.home .flexslider {
    margin-bottom: 0;
    }


/*HOMEPAGE BANNER*/
.homepage-banner {
    background: #2f5d7c;
    color: #fff;
    text-decoration: none;
    font-size: 1.2em;
    text-align: center;
    box-shadow: inset 0px 0px 15px #335267;
    display: inline-block;
    height: 25px;
    width: calc(100% + 35px);
    padding: 20px 0;
    margin: 0 -20px;
    margin-bottom: 35px;
    }
.homepage-banner a {
    color: white;
    text-decoration: none;
    padding: 25px 10px;
    }
.homepage-banner a:hover, .homepage-banner a:focus, .homepage-banner a:active {
    background: #002145;
    }
@media screen and (max-width: 979px) and (min-width: 767px) {
    .homepage-banner {width: calc(100% + 40px);}
    }
@media screen and (max-width: 767px) {
    .homepage-banner {height: auto; width: calc(100% + 40px); padding: 0;}
    .homepage-banner .span3 {padding: 15px 20px;}
    .homepage-banner .span3 a {padding: 15px 20px; width: 100%;}
    }
    
    
/*HOMEPAGE MESSAGE*/
body.home .hentry {
    text-align: center;
    font-size: 1.2em;
    margin-bottom: 70px;
    }


/*HOMEPAGE PORTALS*/
.homepage-portals {
    margin-top: 50px;
    margin-bottom: 90px; 
    }
.homepage-portals .homepage-portal:first-of-type {
    margin-left: 0;
    }
.homepage-portal {
    width: 280px;
    height: 280px;
    margin-left: 15px;
    display: inline-block; 
    position: relative;
    overflow: hidden;
    }
.homepage-portal .hpp-link {
    position: relative;
    display: table-cell;
    text-align: center;
    vertical-align: middle; 
    background: rgb(0, 0, 0, .6);
    color: white;
    font-size: 1.2em;
    height: 270px;
    width: 280px;
    padding: 15px;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-decoration: none;
    -webkit-transition: background .2s ease;
    -moz-transition: background .2s ease;
    -o-transition: background .2s ease;
    transition: background .2s ease;
    }
.homepage-portal .hpp-link:hover {
    background: rgb(0, 0, 0, .4);
    text-shadow: 2px 2px 5px black;
    }
.homepage-portal .hpp-thumbnail {
    height: 100%;
    width: 100%;
    object-fit: cover;
    position: absolute;
    }
@media screen and (min-width: 979px) and (max-width: 1200px) {
    .homepage-portals .container {display: flex;}
    }
@media screen and (min-width: 767px) and (max-width: 979px) {
    .homepage-portals .container {display: flex;}
    }
@media (min-width: 520px) and (max-width: 767px) { 
    .homepage-portals .container {display: inline-block;}
    .homepage-portal {width: 48%;}
    .homepage-portal .hpp-link {width: 320px;}
    .homepage-portals .homepage-portal:nth-of-type(3) {margin-left: 0;}
    }
@media (max-width: 520px) {
    .homepage-portals .container {display: inline-block;}
    .homepage-portal {width: 100%; height: 200px;}
    .homepage-portal .hpp-link {width: 500px; height: 200px; font-size: 1.4em;}
    .homepage-portals .homepage-portal {margin-left: 0;}
    }

    
/*Homepage call-to-action (Hot Lunch)*/
.homepage-actions {
    background: #F6F6F6;
    width: calc(100% + 35px);
    margin: 0 -20px;
    margin-bottom: 70px;
    height: 250px;
    overflow: hidden;
    }
.homepage-actions .hpa-img {
    display: inline-block;
    width: 35%;
    height: 250px;
    margin-right: 2%;
    float: left;
    }
.homepage-actions .hpa-img img {
    height: 250px;
    width: 100%;
    object-fit: cover;
    }
.homepage-actions .hpa-text {
    display: inline-block;
    width: 55%;
    padding: 0 1% 1% 1%;
    }
.homepage-actions .hpa-text .hpa-excerpt {
    height: 125px!important;
    display: block;
    overflow: hidden;
    }
body.home  #content .homepage-actions h3 {
    text-align: left;
    }
.homepage-actions h3 a.unclickable {
    pointer-events: none;
    cursor: default;
    color: #A20000;
    text-decoration: none;
    }
.homepage-actions a.hpa-link {
    background-color: #2f5d7c;
    color: white;
    font-weight: bold;
    text-decoration: none;
    padding: 8px 18px;
    display: inline-block;
    margin-top: 20px;
    line-height: 12px;
    -moz-border-radius: 3px!important;
    -webkit-border-radius: 3px!important;
    -khtml-border-radius: 3px!important;
    border-radius: 3px!important;    
    }
.homepage-actions a.hpa-link:hover, .homepage-actions a.hpa-link:active, .homepage-actions a.hpa-link:focus {
    background: #002145;
    }
@media screen and (min-width: 979px) and (max-width: 1200px) {
    .homepage-actions {height: 260px;}
    .homepage-actions .hpa-img img {height: 260px;}
    .homepage-actions .hpa-text .hpa-excerpt {height: 135px!important;}
    }
@media screen and (min-width: 767px) and (max-width: 979px) {
    .homepage-actions {height: 275px; padding: 0 20px; width: 100%;}
    .homepage-actions .hpa-img img {height: 275px;}
    .homepage-actions .hpa-text .hpa-excerpt {height: 150px!important;}
    }
@media screen and (max-width: 767px) { 
    .homepage-actions {height: auto; padding: 0 20px; width: 100%;}
    .homepage-actions .hpa-img {display: none;}
    .homepage-actions .hpa-text {width: auto;}
    .homepage-actions .hpa-text .hpa-excerpt {height: auto!important; width: auto; margin-bottom: 10px;}
    .homepage-actions a.hpa-link {margin: 10px 0;}
    }

    
/*HOMEPAGE PROFILES*/
.homepage-profiles {
    padding-top: 5px;
    }
.homepage-profile {
    position: relative;
    overflow: hidden;
    }
.homepage-profile .hp-link {
    position: absolute;
    padding: 100%;
    background: white;
    opacity: 0;
    -webkit-transition: opacity .2s ease;
    -moz-transition: opacity .2s ease;
    -o-transition: opacity .2s ease;
    transition: opacity .2s ease;
    }
.homepage-profile .hp-link:hover {
    opacity: 0.4;
    }
.homepage-profile h4 {
    margin-top: 5px;
    margin-bottom: 0;
    }
.homepage-profile h4 a {
    text-decoration: none;
    }
.homepage-profile .profile-groups {
    color: #2f5d7c;
    }


/*###################*/
/* CATEGORY ARCHIVES */
/*###################*/
body.archive.category #content h1.archive-title {border-bottom: 1px solid #cecece; padding-bottom: 15px;}
body.archive.category #content .hentry {margin-bottom: 15px;}
body.archive.category #content h2 {font-size: 25px}
body.archive.category #content .span9 {padding-left: 3%;}
body.archive.category #content .post {border-bottom: 1px solid #cecece; padding-bottom: 15px;}

/*############*/
/* PROFILES   */
/*############*/
/*Profile view*/
.single-profile_cct #leftinfo {background: #2f5d7c; margin-bottom: 20px;}
.single-profile_cct #leftinfo img#profilepic {width: 100%;}
.single-profile_cct #bottom-shell {border-top: 1px solid grey; margin-top: 10px; padding-top: 10px;}
.single-profile_cct .entry-content .nav-tabs-wrapper {display: none;}
@media (min-width: 520px) and (max-width: 767px) { 
    .single-profile_cct #leftinfo {
        overflow: hidden;
        }
    .single-profile_cct #profilecenter {
        width: 50%;
        display: inline-block;
        float: left;
    }
    .single-profile_cct #profiledata {
        width: 40%;
        display: inline-block;
        }
    .single-profile_cct .entry-content .nav-tabs-wrapper {display: block;}
    .single-profile_cct #qlinks {display: none;}
    }
@media (max-width: 520px) {
    .single-profile_cct #profilecenter {
        width: 100%;
        display: inline-block;
    }
    .single-profile_cct .entry-content .nav-tabs-wrapper {display: block;}
    .single-profile_cct #qlinks {display: none;}
    }

/*Quicklink tabs*/
#qlinks ul {margin:0px;}
#qlinks li {list-style:none;width:100%;display:inline-block;}
#qlinks li a {background: #5d85a0; border:none; padding:10px 4px 10px 5px; color:white!important; margin-left:5px; text-decoration:none; width:100%; display:inline-block;}
#qlinks li a:hover, #qlinks li a:active, #qlinks li a:focus {background: #002145}
#qlinks li.active a{background-color:#2f5d7c}
#qlinks li a span {float:right;margin-right:10px;}
#qlinks a {margin-bottom:10px!important; line-height:12px; -moz-border-radius:  5px 0px 0px 5px!important; -webkit-border-radius: 5px 0px 0px 5px!important; -khtml-border-radius: 5px 0px 0px 5px!important; border-radius: 5px 0px 0px 5px!important;}
@media(min-width:1200px) {
  #qlinks li a {padding:10px 0px 10px 15px;margin-left:-2px;}
}
@media(min-width:979px) and (max-width:1199px){ 
  #qlinks li a {padding:10px 0px 10px 10px;}
}
@media(max-width:980px){
  #qlinks li a {padding:10px 0px 10px 10px;margin-left:5px;}
}
@media(max-width:767px){
    .single-profile_cct #qlinks {display: none;}
}


/*Profiles list shortcode*/
.profilelist-shortcode .profile_cct {
    border-bottom: 1px solid #cecece;
    margin-bottom: 15px;
    padding-bottom: 10px;
    }
.profilelist-shortcode .profile_cct:first-of-type {
    border-top: 1px solid #cecece;
    padding-top: 15px;
    }
.profilelist-shortcode .field-item > .field-shell > .field:last-child > *:last-child {
    margin-bottom: 5px;
    }
.profilelist-shortcode .profile_cct .picture {
    width: 15%;
    margin-right: 2%;
    }


/*Profiles archive*/
.post-type-archive-profile_cct .profile_cct, .tax-profile_cct_group .profile_cct {
    border-bottom: 1px solid #cecece;
    margin-bottom: 15px;
    padding-bottom: 10px;
    }
.post-type-archive-profile_cct .archive-info, .tax-profile_cct_group .archive-info {
    border-bottom: 1px solid #cecece;
    margin-bottom: 15px;
    }
.post-type-archive-profile_cct .field-item > .field-shell > .field:last-child > *:last-child,
.tax-profile_cct_group .field-item > .field-shell > .field:last-child > *:last-child {
    margin-bottom: 5px;
    }
.post-type-archive-profile_cct .profile_cct .picture, .tax-profile_cct_group  .profile_cct .picture {
    width: 20%;
    margin-right: 2%;
    }
.field-shell-name .field h2 {
    font-size: 22px;
    line-height: 1.2em;
}
    
    
/*############*/
/* EVENTS     */
/*############*/
.eo-events {
    margin: 0;
    }
.eo-event {
    display: block;
    position: relative;
    }
.eo-event-description {
    width: calc(100% - 150px);
    display: inline-block;
    }
.eo-event-date {
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    margin-right: 8px;
    }
.eo-event-venue {
    text-transform: uppercase;
    font-size: smaller;
    float: right;
    }
.eo-events-listing ul {
    list-style: none;
    }
.eo-events-listing li:not(:last-of-type) {
    border-bottom: 1px solid #d7e0e7;
    line-height:1.5;
    }
p.eo-event-venue {
    margin-top: -10px; 
    margin-bottom: -2px;
    }

 
/*HOT LUNCH EVENTS WIDGET*/
.page-hot-lunch hr {
    margin: 35px 0;
    }
.page-hot-lunch ul.eo-events {
    margin-left: 25px;
    }