/**************************************************************************************************************************
UNITY Framework
Author: Raymond Chan, Dan Connolly
Author URI: wheresray.com
Description: Theme Engine Extension for MSL
Dependencies: 
MSL, vers ??
Foundation Framework, vers 6.4.3
Font Awesome, vers 5.1.0
jQuery, vers 3.3.1
**************************************************************************************************************************/
@import url('//fonts.googleapis.com/css?family=Open+Sans:400,700'); /* =============================== */
/* Reset
/* =============================== */
[id="site-ref"] {
    color: #fff;
    background: #0066cb;
    padding: 0.5rem;
    font-size: 0.8rem;
}

.menu {
    background-image: none;
}

.button {
    margin-bottom: 0;
    background-color: rgba(248, 173, 58, 100);
    color: #111;
    font-size: 1rem;
    border-radius: 2px;
}

.button:hover {
    background-color: #FFAD0C;
    color: #111;
}

.button:after {
    content: '\f105';
    display: inline-block;
    padding-left: 1em;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}

.button:hover:after {
    padding-left: 1.5rem;
    padding-right: .5rem;
    font-family: "Font Awesome 5 Free";
}

.button-group {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 6px;
    padding: 0 5px 0;
    font-size: 0;
}

.button-group .button {
    margin: 0 5px 10px;
    border-radius: 2px;
    font-size: 1rem;
}

.button-group .button:first-child {
    margin-left: -5px;
}

.button-group .button:last-child {
    margin-right: -5px;
}

/***************************************************************************************************************************/
/* 
/* 
/***************************************************************************************************************************/
.modalBackground {
    display: none;
    position: relative;
}

.popup.vp_form {
    padding: 1rem;
    background-color: #FFF;
    -webkit-box-shadow: 0 0 1rem rgba(0,0,0,.5);
    box-shadow: 0 0 1rem rgba(0,0,0,.5);
    border-radius: 2px;
    overflow-y: scroll;
    max-height: 90vh;
}

.popup.vp_form > fieldset legend {
    font-size: 1.2rem;
    font-weight: bold;
}

.callout {
    border-radius: 5px;
    border-style: dotted;
}

.box {
    display: block;
    padding: 1rem;
    border-radius: 2px;
    background-color: #FFF;
}

@media screen and ( min-width: 40rem ) {
    .box {
        padding: 2rem;
    }
}

@media screen and ( min-width: 64rem ) {
    .box {
        padding: 3rem;
    }
}

/* =============================== */
/* Main
/* =============================== */
body {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    padding-top: 40px;
}

@media all and (min-width: 64rem) {
    body {
        padding-top: 44px;
    }
}

.hide {
    display: none !important;
}

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5, .msl-imagenav-title, .msl-imagenav-description {
    font-family: 'Noah-Bold', sans-serif;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: auto;
    text-transform: uppercase;
}

#page-body h1, #page-body h2, #page-body h3, #page-body h4, #page-body h5 {
    margin-bottom: 1rem;
}

dl dd {
    margin-bottom: 1rem;
}

dl dd > a {
    text-decoration: underline;
}

.page-title {
    line-height: 1.2;
    padding: 0 .75rem;
}

.page-subtitle {
    font-weight: 400;
    line-height: 1.2;
    font-size: 1rem;
    margin-bottom: 0;
    padding: 0 .75rem 1rem;
    border-bottom: 1px solid #ccc;
}

.gallery {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.gallery .cell {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.gallery img {
    width: 100%;
}

.section-title {
    margin: 0 0 1.5rem;
    text-align: center;
}

.body {
    display: -ms-grid;
    display: grid;
}

.site-footer {
    margin: 0;
    padding: 0;
    background-color: #222;
    color: #FFF;
    font-size: 90%;
}

.site-terms {
    margin: 0;
    padding: 2.6rem 0 1.6rem;
    background-color: #222;
    color: #FFF;
    font-size: 90%;
}

.site-terms .menu .msl_navbar {
    margin: 0 0 0;
    list-style: none;
}

.site-terms .menu .msl_navbar li {
    float: left;
}

.site-credits {
    margin: 0;
    padding: 0;
    background-color: #222;
    color: #FFF;
    font-size: 90%;
}

.site-footer a, .site-terms a, .site-credits a {
    color: #FFF;
    text-decoration: underline;
}

.site-footer a:hover, .site-terms a:hover, .site-credits a:hover {
    color: #FFF;
    text-decoration: none;
}

.site-footer dd {
    margin-bottom: 0;
}

.site-footer .nuslogo {
    display: block;
    overflow: auto;
    padding: 1rem;
    background-color: #FFF;
}

#page-body {
}

#page-body section {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
    position: relative;
}

#page-body section section {
    padding: 1rem 0;
}

#page-body section section h2 {
    margin: 0 0 1rem;
}

#page-body section .cell, .page-footer .cell {
    padding-left: 1rem;
    padding-right: 1rem;
}

#page-body section.video {
    height: auto;
}

#page-body section.video .h1 {
    text-shadow: 0 0 1rem #000;
}

#page-body section.video .embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

#page-body section.video .embed-container iframe, #page-body section.video .embed-container object, #page-body section.video .embed-container embed {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

#page-body section.video.video-short {
    overflow: hidden;
}

#page-body section.video.video-short > .grid-container {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    -webkit-transform: translate(0,0) !important;
    -ms-transform: translate(0,0) !important;
    transform: translate(0,0) !important;
}

#page-body section.section-blue {
    background: #1D71B8;
    color: #fff;
}

#page-body section.section-grey {
    background: #eaeaea;
}

#page-body section.section-blue .slider {
    color: #000;
}

#page-body h2 {
    margin-bottom: 1rem;
    clear: both;
}

#page-body h2.small {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.page-header {
    position: relative;
    overflow: hidden;
}

.msl-pagebanner {
    text-align: center;
}

.banner-wrap {
    background: #00A6D0;
    position: relative;
    margin: 0 -9rem 1rem;
}

.banner-wrap.no-logo img {
    background-color: #fff;
}

@media all and (min-width: 40rem) {
    .banner-wrap {
        margin:0 auto 1rem;
    }
}

@media all and (min-width: 64rem) {
    .banner-wrap {
        margin:0 auto 0;
    }
}

.banner-wrap:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 50%;
    background-size: contain;
    transform: translateX(-50%);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-image: url(full-logo.png);
}

.banner-wrap.white {
    background: #fff;
}

.banner-wrap.no-logo:after {
    display: none;
}

.msl-pagebanner {
    max-width: 1170px;
    margin: 0 auto;
    position: relative;
}

.msl-pagebanner:before, .msl-pagebanner:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 150px;
}

.banner-wrap.white .msl-pagebanner:before, .banner-wrap.white .msl-pagebanner:after {
    display: none;
}

.msl-pagebanner:before {
    left: 0;
    background: url(fringe-blue-left.png) left 50% no-repeat;
}

.msl-pagebanner:after {
    right: 0;
    background: url(fringe-blue-right.png) right 50% no-repeat;
}

.page-header.bigbanner {
    background-position: 50% top;
    padding-top: 20vh;
}

@media all and (min-width: 40rem) {
}

@media all and (min-width: 64rem) {
    .page-header.bigbanner {
        padding-top: 30vh;
    }
}

.hero-banner {
    width: 100%;
    height: auto;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: #FFF;
    text-align: center;
    text-shadow: 0 0 .5rem rgba(0,0,0,.3);
    bottom: 0;
}

.hero-banner .hero-content {
    position: relative;
    width: 100%;
    max-width: 75rem;
    margin: 0 auto 0;
    padding: 1rem 1.625rem 1rem;
    text-align: left;
    overflow: auto;
    z-index: 1;
}

.hero-banner .hero-content img {
    max-height: 25vh;
    margin-bottom: 3rem;
}

.hero-banner .hero-content .button {
    text-shadow: none;
}

img.banner {
    width: 100%;
}

.screen nav, .video nav {
    display: block;
    width: 100%;
    padding: 3rem 0 0;
    text-align: center;
    position: relative;
    z-index: 99;
}

.feedback-button {
    position: fixed;
    bottom: 0;
    right: 0;
    opacity: 1;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}

.feedback-button img {
    height: 6rem;
}

.feedback-button:hover {
    opacity: .8;
}

.frame {
    padding: 1rem;
    border-radius: 5px;
    background-color: #FFF;
    border: 1px solid #EEE;
}

.highlighted .frame {
    background-color: #FFF;
}

@media screen and ( min-width: 40rem ) {
    #page-body section {
        padding-top: 2.25rem;
        padding-bottom: 2.25rem;
        background-size: cover;
        background-position: center;
        background-attachment: scroll;
        position: relative;
    }

    .feedback-button img {
        height: 8rem;
    }

    .hero-banner .hero-content {
        padding: 2rem 2rem;
    }

    .page-subtitle {
        font-size: 1.25rem;
    }

    .frame {
        padding: 1.5rem
    }
}

@media screen and ( min-width: 64rem ) {
    #page-body section {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .feedback-button img {
        height: auto;
    }

    .hero-banner .hero-content {
        padding: 3.5rem 2rem;
    }

    .page-subtitle {
        font-size: 1.5rem;
    }

    .frame {
        padding: 2rem
    }
}

.highlighted {
    background-color: #F5F5F5;
}

@-webkit-keyframes ani-mouse {
    0% {
        opacity: 1;
        top: 29%;
    }

    15% {
        opacity: 1;
        top: 50%;
    }

    50% {
        opacity: 0;
        top: 50%;
    }

    100% {
        opacity: 0;
        top: 29%;
    }
}

@keyframes ani-mouse {
    0% {
        opacity: 1;
        top: 29%;
    }

    15% {
        opacity: 1;
        top: 50%;
    }

    50% {
        opacity: 0;
        top: 50%;
    }

    100% {
        opacity: 0;
        top: 29%;
    }
}

.scroll-button {
    display: none;
}

@media screen and (min-width: 40em) {
    .scroll-button {
        display: block;
        position: relative;
        left: 0;
        right: 0;
        text-align: center;
        margin-top: 3rem;
    }

    .scroll-button > * {
        display: inline-block;
        line-height: 18px;
        font-size: 13px;
        font-weight: normal;
        color: #7f8c8d;
        color: #ffffff;
        font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
        letter-spacing: 2px;
    }

    .scroll-button > *:hover, .scroll-button > *:focus, .scroll-button > *.active {
        color: #ffffff;
    }

    .scroll-button > *:hover, .scroll-button > *:focus, .scroll-button > *:active, .scroll-button > *.active {
        opacity: 0.8;
        filter: alpha(opacity=80);
    }

    .scroll-button .mouse {
        position: relative;
        display: block;
        width: 35px;
        height: 55px;
        margin: 0 auto 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border: 3px solid white;
        border-radius: 23px;
    }

    .scroll-button .mouse > * {
        position: absolute;
        display: block;
        top: 29%;
        left: 50%;
        width: 8px;
        height: 8px;
        margin: -4px 0 0 -4px;
        background-color: white;
        border-radius: 50%;
        -webkit-animation: ani-mouse 2.5s linear infinite;
        animation: ani-mouse 2.5s linear infinite;
    }
}

.screen {
    width: 100%;
    min-height: 100vh;
    height: auto;
    padding: 0;
    overflow: auto;
    position: relative;
    background-size: cover;
    background-position: center;
    background-color: #F5F5F5;
}

.screen-content {
    position: relative;
    height: auto;
    width: 100%;
    max-width: 75rem;
    margin: 0 auto 0;
    padding: 0rem 0.625rem;
    text-align: center;
    overflow: auto;
    z-index: 1;
}

.screen .screen-content.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

.screen-content img {
    margin-bottom: 3rem;
}

.screen-content .button-group {
    margin-top: 3rem;
}

.screen.screen-fluid {
    min-height: auto;
    overflow: auto;
}

.screen.screen-fluid .screen-content {
    position: relative;
    top: 0;
    left: 0;
    -webkit-transform: translate(0,0);
    -ms-transform: translate(0,0);
    transform: translate(0,0);
}

/***************************************************************************************************************************/
/* Typography
/* 
/***************************************************************************************************************************/
blockquote {
    display: block;
    position: relative;
    height: auto;
    margin: 1rem auto;
    padding: 0rem 4.5rem;
    border: none;
    overflow: auto;
    font-size: 1.2rem;
    clear: both;
    overflow: hidden;
    color: #0a0a0a;
    white-space: pre-line;
    border-left: 10px solid #00a0c6;
    max-width: 54rem;
    background: #eee;
}

blockquote:before {
    display: block;
    position: absolute;
    float: left;
    padding: 0;
    content: "\201C";
    font-size: 5rem;
    line-height: .8;
    top: 1rem;
    left: 1rem;
}

blockquote:after {
    display: block;
    position: absolute;
    padding: 0;
    content: "\201D";
    font-size: 5rem;
    line-height: .8;
    bottom: -1rem;
    right: 1rem;
}

blockquote p {
    margin: 0;
    color: #333;
}

table {
    width: 100%;
}

table th, table td {
    vertical-align: top;
}

table th > :last-child, table td > :last-child {
    margin-bottom: 0;
}

/***************************************************************************************************************************/
/* Social Media and Media
/* 
/***************************************************************************************************************************/
.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

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

.social-media {
    display: block;
    height: auto;
    margin: 0 -5px 1rem;
    padding: 0;
    list-style: none;
    text-align: center;
    clear: both;
}

.social-media li {
    margin: 0 5px 10px;
    padding: 0;
    display: block;
    float: left;
}

.social-media li a {
    display: block;
    height: 2.5em;
    width: 2.5em;
    margin: 0;
    padding: 0;
    font-size: 1.5rem;
    text-align: center;
    position: relative;
    border-radius: 50%;
    background-color: #1D71B8;
    text-decoration: none;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}

.social-media li a span {
    display: block;
    position: relative;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

.twitter-feed {
    height: 100%;
    max-height: 800px;
    overflow: hidden;
    overflow-y: scroll;
}

/* =============================== */
/* Modal
/* =============================== */
.modal-container {
    display: block;
    padding: 3rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.5);
    z-index: 99;
}

.modal-container .close-button {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.modal {
    height: 100%;
    max-height: 90vh;
    padding: 3rem;
    border-radius: 2px;
    background-color: #FFF;
    overflow-y: hidden;
    position: relative;
}

.modal-contents {
    height: 100%;
    overflow-y: scroll;
}

.modal.mailinglist {
    padding-bottom: 6rem;
}

.modal.mailinglist .msl_notification {
    position: absolute;
    bottom: 3rem;
    left: 3rem;
}

.modal.mailinglist .button {
    position: absolute;
    bottom: 3rem;
    right: 3rem;
}

/* =============================== */
/* Login
/* =============================== */
.msl-rememberme {
    display: block;
}

#ctl00_logincontrol_btnLogin {
    margin: 0 0 1rem;
}

.msl_warning {
    display: block;
    margin: 0 0 1rem;
    padding: 1rem;
    border-radius: 2px;
    background-color: #FF9A93;
}

/* =============================== */
/* Administration
/* =============================== */
.msl_admin_page {
    display: block;
    max-width: 75rem;
    margin: 0 auto 0;
    padding: 0 .625rem 0;
    padding-bottom: 3rem;
}

#edit_page_buttons ul {
    margin: 0 -1px .5rem;
    overflow: auto;
    clear: both;
}

#edit_page_buttons ul li {
    display: block;
    float: left;
    overflow: auto;
    margin: 0 1px 0;
}

#edit_page_buttons ul li a {
    display: block;
    padding: .5rem .8rem;
    background-color: #EEE;
    font-size: 1rem;
}

#admin_page_content {
    max-width: 75rem;
    margin: 0 auto 0;
    padding: 1rem;
}

#admin_page_content textarea {
    padding: 1rem;
}

#admin_page_content ul.list_controls {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 2px 1fr 2px 1fr 2px 1fr;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 2px;
}

#admin_page_content ul.list_controls a {
    height: auto;
    width: auto;
    margin: 0;
    padding: 60px 5px 5px;
    background-position: center 6px;
}

#org_letterfilter {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Medium and up */
@media screen and (min-width: 40em) {
    #admin_page_content ul.list_controls {
        -ms-grid-columns: 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr;
        grid-template-columns: repeat(8, 1fr);
    }
}

/* Large and up */
@media screen and (min-width: 64em) {
    #admin_page_content ul.list_controls {
        -ms-grid-columns: 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr;
        grid-template-columns: repeat(12, 1fr);
    }
}

/* =============================== */
/* Nav
/* =============================== */
#breadcrumb {
    width: 100%;
    margin: 0;
    padding: .75rem;
    list-style: none;
    background-color: #FFF;
    font-size: .8rem;
    display: block;
    text-align: left;
    border-bottom: 1px solid #EEE;
}

#breadcrumb li:before {
    content: '\f105';
    display: inline-block;
    padding: 0 1rem 0;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    text-decoration: none !important;
}

#breadcrumb li:first-child:before {
    display: none;
}

#breadcrumb li a {
    color: #000;
    text-decoration: underline;
}

#breadcrumb li.current-page {
    font-weight: 700;
}

.page-navigation {
    margin: 3rem auto 0;
    width: 100%;
    max-width: 20rem;
    text-align: center;
}

.page-navigation.fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    background-color: #FFF;
}

select.nav-page {
    display: block;
    margin: 0 auto 0;
    border: none;
    -webkit-box-shadow: 0 0 0 .3rem rgba(255,255,255,.5);
    box-shadow: 0 0 0 .3rem rgba(255,255,255,.5);
    border-radius: 2px;
}

select.nav-page:hover {
    -webkit-box-shadow: 0 0 0 .3rem rgba(255,255,255,.2);
    box-shadow: 0 0 0 .3rem rgba(255,255,255,.2);
}

.navPlay > a {
    display: block;
    padding: 1rem;
    background-color: #EEE;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    text-align: center;
}

.navPlay > a:hover {
    background-color: #CCC;
}

.navPlay > a i {
    display: inline-block;
    padding-right: .5rem;
}

.msl-imagenav > ul {
    display: -ms-grid;
    display: grid;
    margin: 0;
    padding: 0;
    -ms-grid-columns: 1fr 1rem 1fr;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem;
    list-style: none;
}

@supports (-ms-ime-align: auto) {
    .msl-imagenav > ul {
        display: block;
    }

    .msl-imagenav > ul li {
        margin-bottom: 1rem;
    }

    .msl-imagenav > ul li:nth-of-type(2n+1) {
        clear: left;
        margin-left: 0;
    }
}

.msl-imagenav > ul > li {
    position: relative;
    width: 100%;
}

.msl-imagenav > ul > li:hover {
}

.msl-imagenav > ul > li > a {
    display: block;
    line-height: 1.2;
    color: #000;
    position: relative;
    padding-top: 75%;
    text-align: center;
}

.msl-imagenav > ul > li > a img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    border: 1px solid #ccc;
    padding: .75rem;
}

.msl-imagenav li .msl-imagenav-title {
    display: block;
    font-size: 1rem;
}

.msl-imagenav li .msl-imagenav-description {
    display: block;
    font-weight: 400;
    font-size: 1.2rem;
}

.msl-imagenav.nav-large > ul > li::before {
    padding-top: 50% !important;
}

.msl-imagenav.nav-buttons > ul > li::before {
    display: none;
}

.msl-imagenav.nav-buttons > ul > li {
    padding-top: auto !important;
}

.msl-imagenav.nav-buttons > ul > li > a {
    position: relative !important;
}

.msl-imagenav.nav-buttons > ul > li > a > .contents {
    position: relative !important;
    padding: 1.5rem;
}

/* =============================== */
/* Notices
/* =============================== */
.msl_notification {
    display: block;
    margin: 0 0 1rem;
    padding: 1rem;
    background-color: #F2E1B3;
}

/* =============================== */
/* Navigation Panel
/* =============================== */
.nav-panel .top-bar, .nav-panel .top-bar ul {
    width: 100%;
    max-width: 75rem;
    margin: 0 auto 0;
    padding: 0;
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
    background-color: transparent;
}

.nav-panel {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 6rem 0 1rem;
    overflow-x: hidden;
    overflow-y: scroll;
    background-color: #FFF;
    z-index: 999;
    text-align: center;
}

.nav-panel .close-button {
    position: absolute;
    top: 3rem;
    right: 3rem;
    z-index: 99;
}

.nav-panel > div {
    width: 100%;
    max-width: 75rem;
    margin: 0 auto 0;
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
}

.nav-panel ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-panel li, .nav-panel li > a {
    border: none;
    border-top: none !important;
    background-color: transparent;
    color: #0a0a0a;
}

.board a {
    color: #0a0a0a;
}

/* =============================== */
/* Advertising 
/* =============================== */
.advert {
    text-align: center;
}

#advert-leaderboard {
    padding: 1.5rem;
    background-color: #111;
}

/* =============================== */
/* Tabs 
/* =============================== */
.tabs {
    border: none;
    background-color: transparent;
}

.tabs .tab-nav {
    display: block;
    overflow: auto;
    clear: both;
    margin: 0 0 3rem;
    padding: 0;
    list-style: none;
}

.tabs .tab-nav li {
    display: block;
    float: left;
    margin: 0 5px 5px 0;
}

.tabs .button {
    margin: 0;
    padding: 1rem 1.4rem;
    font-size: 1rem;
    border-radius: 1.5rem !important;
    text-align: left;
}

.tab-content {
    margin: 0;
    padding: 0;
    list-style: none;
    border: none;
}

.tab-content li {
    display: none;
    overflow: auto;
}

.tab-content li.is-active {
    display: block;
}

/* =============================== */
/* Sliders
/* =============================== */
.slider {
    display: block;
    overflow: auto;
    height: auto;
    margin-top: 0;
    margin-left: -5px;
    margin-right: -5px;
    margin-bottom: 0;
    background-color: transparent;
}

.slick-slider {
    display: block;
    height: auto;
    overflow: auto;
    background-color: none;
    position: relative;
}

.slick-slider .slick-arrow {
    display: inline-block !important;
    font-size: 2rem;
    opacity: .2;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}

.slick-slider:hover .slick-arrow {
    display: inline-block !important;
    opacity: .8;
}

.slick-slider .slick-arrow:hover {
    opacity: 1;
}

.slick-dots {
    margin: 0;
    padding: 0;
    list-style: none;
    display: block;
    text-align: center;
}

.slick-dots > li {
    height: .5rem;
    width: 3rem;
    margin: 0;
    padding: 1rem .5rem;
    display: inline-block;
}

.slick-dots > li > button {
    display: block;
    height: .5rem;
    width: 2rem;
    margin: 0;
    border-radius: .25rem;
    background-color: #CCC;
    color: transparent;
    display: inline-block;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
}

.slick-dots > li > button:hover {
    background-color: #999;
}

.slick-dots .slick-active > button {
    background-color: #222;
}

.slick-slider .slick-arrow {
    position: absolute;
    top: 50%;
    z-index: 9;
}

.slick-slider .slick-arrow.slick-prev {
    left: 1rem;
}

.slick-slider .slick-arrow.slick-next {
    right: 1rem;
}

.slick-slider .slick-slide {
    margin-left: 5px;
    margin-right: 5px;
    position: relative;
}

.msl-item-list .slick-slide img, .msl_eventlist .slick-slide img {
    width: 100%;
    margin: 0 auto 0;
}

/* =============================== */
/* Products and Shop
/* =============================== */
.nav-basket.bagged a {
    background-color: red;
    color: #FFF !important;
}

.nav-basket .basket-count {
    padding-left: .5rem;
}

#product {
    margin-bottom: 1rem;
}

#product .msl-product-id {
    margin: 0 0 1rem;
}

#product .product_box {
    margin: 0 0 1rem;
    padding: 1rem;
    border-radius: 2px;
}

#product .product_box h2 {
    margin: 0 0 1rem;
}

#product .product_box span {
    display: block;
    clear: both;
}

#product .basket {
    padding: 1rem 1rem 1rem 2rem;
    background-color: #FFF;
    border-radius: 2px;
}

.nav-panel #basket > div > a {
    display: inline-block;
    padding: 1rem 1rem 1rem 2rem;
    border: 1px solid #CCC;
    border-radius: 2px;
}

/* =============================== */
/* Gallery
/* =============================== */
.mslwidget.gallery {
    display: -ms-grid;
    display: grid;
    grid-gap: 1px;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
}

.gallery h3 {
    display: none;
}

.gallery .photogallery {
    padding: 1rem;
    background-color: #F5F5F5;
}

.photogallery:nth-child(even) {
    clear: left;
}

.photogallery dl {
    overflow: auto;
    height: auto;
    width: 100%;
    margin-bottom: 0;
    padding: 0;
    background-color: transparent;
}

.photogallery dt {
    font-size: 1.2rem;
    margin: 0 0 1rem;
}

.photogallery dd:last-child {
    margin-bottom: 0;
}

.photogallery .photogallery_image {
}

.photogallery_image a {
    display: block;
    overflow: auto;
}

.photogallery .photogallery_image img {
    width: 100%;
    margin: 0;
    padding: 0;
}

@media screen and (min-width: 40rem) {
    .mslwidget.gallery {
        -ms-grid-columns: 1fr 1px 1fr;
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (min-width: 64rem) {
    .mslwidget.gallery {
        -ms-grid-columns: 1fr 1px 1fr 1px 1fr;
        grid-template-columns: 1fr 1fr 1fr;
    }
}

/***************************************************************************************************************************/
/* Events Calendar
/***************************************************************************************************************************/
.calendar > .msl_event_calendar {
    width: 100%;
}

.msl_event_calendar td, .msl-eventcal-default td {
    padding: .5rem;
}

.msl_event_calendar .msl-cal-hoverbox, .msl-eventcal-default .msl-cal-hoverbox {
    padding: 0;
    background-color: #FFF;
}

.msl_event_calendar .msl-cal-hoverbox a, .msl-eventcal-default .msl-cal-hoverbox a {
    padding: .5rem 1rem;
    border-bottom: 1px solid #EEE;
}

.msl_event_calendar .msl-cal-hoverbox a:last-child, .msl-eventcal-default .msl-cal-hoverbox a:last-child {
    border-bottom: 0;
}

.calendar .msl_event_calendar .msl-cal-hoverbox a dd, .calendar .msl-eventcal-default .msl-cal-hoverbox a dd {
    padding-left: 0;
}

/***************************************************************************************************************************/
/* Events Listings
/***************************************************************************************************************************/
.events_filter {
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #DDD;
}

.events_filter .input-group-label {
    height: 3rem;
    margin: 0;
    padding: .5rem 1rem;
    font-size: 1rem;
    border: none;
}

.events_filter select {
    height: 3rem;
    margin-bottom: 0;
    border: 0;
}

.events_filter select:first-child {
    border-right: 1px solid #DDD;
}

.events-filter dd.msl_event_types {
    display: none;
}

/***************************************************************************************************************************/
/* Events
/***************************************************************************************************************************/
.template-event .page-header:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.6);
}

.msl_eventlist {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
}

.msl_event_name {
    font-size: 1.5rem;
}

.event_item {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    margin: 5px 0 5px;
    border-radius: 5px;
    overflow: hidden;
    background-color: #FFF;
    border: 1px solid #EEE;
}

.slider .event_item {
    margin: 0 5px 0;
}

.event_item dl {
    display: block;
    margin-bottom: 0;
    padding: 1rem;
}

.event_item dd {
    margin-bottom: .2rem;
}

.event_item dt {
    margin-bottom: 0;
}

.msl_event_image {
    display: block;
    position: relative;
}

.msl_event_image img {
    width: 100%;
}

.eventlist_day {
    display: -ms-grid;
    display: grid;
}

.msl_eventlist > h4 {
    margin: 0 0 2px !important;
    padding: 1rem;
}

#event-image-section img {
    width: 100%;
}

.slider .event_item {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
}

dd.msl_event_tickets {
    display: block;
    margin-top: .5rem;
    margin-bottom: 0;
}

dd.msl_event_types {
    margin-top: .5rem;
}

.msl_ticket.button {
    width: 100%;
    margin-top: 0;
    text-decoration: none;
}

.msl-tickets-msg {
    display: block;
    padding: 1rem;
}

.msl-tickets-msg:before {
    content: '\f3ff';
    display: inline-block;
    padding-right: .5rem;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

.msl_eventlist dd i {
    margin-right: .5rem;
}

.event-tickets, .event-details {
    margin: 0 0 10px;
    padding: 1rem;
    border-radius: 2px;
    background-color: #F5F5F5;
}

.event-image {
    margin: 0 0 1rem;
}

@media screen and ( min-width: 64rem ) {
    .event_item {
        -ms-grid-columns: 40% 60%;
        grid-template-columns: 40% 60%;
    }

    .column-3 .msl_eventlist, .column-3 .msl-item {
        -ms-grid-columns: 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr;
        margin-left: -5px;
        margin-right: -5px;
    }

    .column-3 .msl_eventlist .event_item, .column-3 .msl-news .msl-item {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        margin: 5px;
    }
}

.text-only .msl_eventlist {
    display: block;
}

.text-only .msl_eventlist .event_item {
    display: block;
    background: #fff;
    padding: 0.75rem 1rem;
    margin: 0 0 1rem;
    border-width: 0 0 0 5px;
    border-color: #337ab7;
    border-radius: 0;
}

.text-only .msl_eventlist dl {
    padding: 0 0;
}

.text-only .msl_eventlist img, .text-only .msl_eventlist dd.msl_event_types, .msl_eventlist dd.msl_event_description {
    display: none;
}

.text-only .msl_event_organisation {
    font-size: 0.7rem;
}

@media all and (min-width: 40rem) and (max-width:64rem) {
    .text-only dd.msl_event_location {
        display:none;
    }
}

.text-only .msl_eventlist img {
    display: block;
}

.text-only .msl_eventlist .msl_event_image {
    display: block;
    width: 40px;
    position: absolute;
    left: 10px;
    top: 50%;
    border-radius: 20px;
    overflow: hidden;
    transform: translateY(-50%);
}

.text-only .msl_eventlist .event_item {
    padding-left: 60px;
    position: relative;
}

.text-only .msl_eventlist dt h3 {
    margin: 0 !important;
}

.msl_eventlist dt h3 {
    font-size: 1.1rem;
    margin: 0 0 0.25rem !important;
}

.msl_eventlist dd {
    display: inline-block;
    margin-right: 10px;
    font-size: 0.8rem;
    margin-bottom: 0;
}

/* =============================== */
/* News
/* =============================== */
.msl-news {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    grid-gap: 10px;
}

@supports (-ms-ime-align: auto) {
    .msl-news {
        display: block;
    }
}

.msl-news .msl-item {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 40% 60%;
    grid-template-columns: 40% 60%;
    -ms-grid-rows: ()[1fr];
    grid-template-rows: repeat(1fr);
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #EEE;
}

.msl-news .msl-item > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

.msl-news .msl-item > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
}

.msl-news .msl-item .msl-image {
    display: block;
}

.slider .msl-news .msl-item {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    background-color: #FFF;
}

.slider .msl-news .msl-item .newsContent {
    padding: 1rem;
}

.msl-news .msl-item .msl-title {
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.2;
}

.msl-news .msl-item .newsImage img {
    width: 100%;
}

.news-vertical > .msl-news {
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
}

@supports (-ms-ime-align: auto) {
    .news-vertical > .msl-news {
        display: block;
    }
}

.news-vertical > .msl-news > .msl-item {
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
}

.msl-news .newsImage {
    background-color: #FFF;
}

.msl-news .newsContent {
    padding: 1rem;
}

.news_image {
    margin-bottom: 1rem;
}

.news_image img {
    width: 100%;
}

.sidebar-news .msl-news > .msl-item {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
}

.slider.banner .msl-item {
    position: relative;
    background-size: cover;
    background-position: center;
}

.slider.banner .msl-item .msl-image img {
    height: unset !important;
    width: unset !important;
}

.slider.banner .msl-leader {
    margin-bottom: 0;
    color: #FFF;
}

.slider.banner .newsContent {
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)),to(rgba(0,0,0,0.5)));
    background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#40000000',GradientType=0 );
    text-align: center;
    padding: 3rem 1.5rem 1.5rem !important;
}

.slider.banner .newsContent a {
    color: #FFF;
}

.slider.banner .msl-item .newsContent h3 {
    margin-bottom: 0 !important;
}

.column-3 .msl-item-list {
    -ms-grid-columns: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
}

.text-small .msl-news .msl-item {
    display: block;
    padding: 0;
    border: none;
}

.text-small .msl-news .newsContent {
    padding: 0;
}

.text-small .msl-news h3.msl-title {
    font-size: 1.3rem;
}

.text-small .msl-news h3.msl-title a {
    background: #337ab7;
    display: block;
    padding: 0.5rem 0.85rem;
    color: #fff;
    border-radius: 0 0 3px 3px
}

.text-small .killfloat {
    display: none;
}

/* =============================== */
/* RSS Feed
/* =============================== */
.rss2html-note {
    display: none;
}

.rss-feed .feed-item {
    padding: 1rem;
    border-top: 1px solid rgba(15,70,100,.12);
    background-color: #FFF;
}

.rss-feed .feed-item:hover {
    background-color: rgba(160,200,220,.12);
}

.rss-feed .feed-item-desc {
    margin-bottom: 0;
    padding: 0;
}

/* =============================== */
/* Profiles
/* =============================== */
.profile-calendar {
    width: 100%;
    padding: 1rem;
    -webkit-box-shadow: 0 0 1rem rgba(0,0,0,.1);
    box-shadow: 0 0 1rem rgba(0,0,0,.1);
}

.profile-blog {
    padding-bottom: 2.6rem;
    background-color: rgb(248, 66, 66);
}

.profile-blog .msl-recentblogposts {
    display: -ms-grid;
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
    grid-gap: 10px;
    -ms-grid-columns: auto 10px auto 10px auto;
    grid-template-columns: auto auto auto;
}

.profile-blog li.msl-recentblogpost {
    padding: 1.4rem;
    background-color: #FFF;
    -webkit-box-shadow: 0 0 1rem rgba(0,0,0,.1);
    box-shadow: 0 0 1rem rgba(0,0,0,.1);
    position: relative;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    top: 0;
}

.profile-blog li.msl-recentblogpost:hover {
    top: -.5rem;
    -webkit-box-shadow: 0 1rem 1rem rgba(0,0,0,.3);
    box-shadow: 0 1rem 1rem rgba(0,0,0,.3);
}

.profile-blog .msl-recentblogposttitle {
    display: block;
    font-weight: 700;
}

.profile-blog .msl-recentblogpostblogname {
    display: none;
}

.profile-blog .msl-recentblogpostdate {
    display: block;
    margin: 0 0 5px;
}

.profile-card .avatar {
    display: block;
    height: 16rem;
    width: 16rem;
    max-width: 100%;
    margin: 0 auto 1rem;
    padding: 0;
    background-color: #FFF;
    border: 5px solid #FFF;
    border-radius: 50%;
    -webkit-box-shadow: 0 0 1rem rgba(0,0,0,.1);
    box-shadow: 0 0 1rem rgba(0,0,0,.1);
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.profile-card .social {
    display: block;
    margin: 0 0 1rem;
    padding: 1rem 0 1rem;
    list-style: none;
    overflow: auto;
}

.profile-card .social li {
    display: inline-block;
    padding: 0 5px 0;
    background-color: none;
}

.profile-card .social li a {
    display: block;
    font-size: 2rem;
    position: relative;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    top: 0;
}

.profile-card .social li a:hover {
    top: -.5rem;
}

.template-profile-officer .biography .bio-intro {
    margin: 0 0 1.6rem;
}

.template-profile-officer .biography .bio-about {
    padding: 2.6rem 2.6rem 1.6rem;
    border: 1px solid #EEE;
    background-color: #FFF;
    -webkit-box-shadow: 0 .0 1rem rgba(0,0,0,.1);
    box-shadow: 0 .0 1rem rgba(0,0,0,.1);
}

/***************************************************************************************************************************/
/* Volunteering
/* 
/***************************************************************************************************************************/
ul.recent-opps-list {
    margin-left: 0;
}

.recent-opps-list .opp-link {
    display: block !important;
    height: 100%;
    padding: 1rem 1rem 5rem;
    background-color: #FFF;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 2px;
    overflow: hidden;
}

.recent-opps-list .opp-link .cta {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
}

.recent-opps-list .opp-link .cta a {
    width: 100%;
}

.recent-opps-list .opp-link .opp-name {
    font-size: 1.5rem;
}

.recent-opps-list .opp-link .opp-desc {
    color: #0a0a0a;
}

.recent-opps-list .opp-link .opp-provider {
    font-weight: bold;
    color: #0a0a0a;
}

.dip-left, .dip-right {
    overflow: visible;
}

.dip-left > *, .dip-right > * {
    position: relative;
    z-index: 1;
}

.dip-left:before, .dip-right:before {
    content: url('../site2018/dip.svg');
    position: absolute;
    width: 100%;
    top: 0;
    left: -2px;
    right: -2px;
}

.dip-left:before {
    -webkit-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    transform: scaleX(-1);
    -webkit-filter: FlipH;
    filter: FlipH;
    -ms-filter: "FlipH";
}

.page_volunteering .msl-item {
    background-color: #FFF;
}

#ctl00_Main_ActivityListPaged1_dp1, #ctl00_Main_ActivityListPaged1_dp2 {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 6rem 0 auto 0 6rem;
    grid-template-columns: 6rem 0 auto 0 6rem;
    width: 100%;
    margin: 0 0 1rem;
    background-color: #F5F5F5;
    border-radius: 2px;
}

#ctl00_Main_ActivityListPaged1_dp1 > *, #ctl00_Main_ActivityListPaged1_dp2 > * {
    padding: 1rem;
    text-align: center;
}

.page_volunteering.page_opportunities .filters {
    padding: 1rem;
    background-color: #F5F5F5;
    border-radius: 2px;
}

.page_volunteering.page_opportunities .filters h3 {
    font-size: 1rem;
    margin: 0;
    margin-bottom: .5rem !important;
    padding-top: .5rem;
    border-top: 1px solid #CCC;
}

.page_volunteering.page_opportunities .filters a {
    display: inline-block;
    padding: .3rem .5rem;
    background-color: #444;
    color: #FFF;
    font-size: .9rem;
    line-height: 1;
    border-radius: 2px;
}

.page_volunteering.page_opportunities .search-panel {
    margin: 0 0 1rem;
}

.page_volunteering.page_opportunities .filters h3:first-child {
    padding-top: 0;
    border-top: none;
}

.page_volunteering.page_opportunities .filters td [type="checkbox"] {
    margin-bottom: 0;
}

.page_volunteering.page_opportunities .filters table {
    margin-top: .5rem;
}

.page_volunteering.page_opportunities .filters table tbody {
    border: 0;
}

.page_volunteering.page_opportunities .filters table tbody td {
    padding: 0;
}

.page_volunteering.page_opportunities .filters table tbody, .page_volunteering.page_opportunities .filters table tbody tr {
    background-color: transparent;
}

/***************************************************************************************************************************/
/* Definitions / FAQs
/* 
/***************************************************************************************************************************/
dl.definitions {
    display: block;
    margin: 0 0 1rem;
}

dl.definitions > dt {
    position: relative;
    margin: 5px 0 0;
    padding: 1.5rem 1.5rem 1.5rem 5rem;
    background-color: #EEE;
    font-size: 1.5rem;
    line-height: 1.2;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    border-radius: 5px;
    cursor: pointer;
    border: 1px solid #EEE;
}

dl.definitions > dt.open {
    border-radius: 5px 5px 0 0;
}

dl.definitions > dt:first-child {
    margin-top: 0;
}

dl.definitions > dt:before {
    content: '\f13a';
    position: absolute;
    top: 0;
    left: 0;
    height: 4rem;
    width: 4rem;
    margin: 0;
    padding: 1.5rem 1.5rem;
    font-size: 1.5rem;
    line-height: 1.2;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

dl.definitions > dt.open:before {
    content: '\f139';
}

dl.definitions > dd {
    margin: 0;
    padding: 1.5rem;
    background-color: #FFF;
    border-radius: 0 0 5px 5px;
    border: 1px solid #EEE;
    border-width: 0 1px 1px;
}

dl.definitions > dd *:last-child {
    margin-bottom: 0;
}

/***************************************************************************************************************************/
/* Survey / Forms
/* 
/***************************************************************************************************************************/
.checkbox label {
    margin: 0 !important;
    padding: 0;
}

.msl-form-completion-message {
    max-width: 75rem;
    margin: 0 auto 0;
    padding: 0;
}

.survey_form .textbox, .survey_form textarea {
    width: 100% !important;
}

.survey_form .form_controls {
}

.survey_form .input_table {
    width: 100%;
}

.survey_form .input_table tfoot {
    border: none;
}

.survey_form .input_table input {
    width: 100%;
}

.checkbox ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

input[type="file"], .checkbox, textarea {
    display: block;
    margin: 0 0 1rem;
    padding: .5rem;
    border-radius: 2px;
}

#form_validation .error {
    display: block;
    padding: 1rem;
    background-color: #FF9A93;
}

#form_validation ul {
    margin-bottom: 0;
}

.msl-form-completion-message {
    display: block;
    margin: 0 0 1rem;
    padding: 1rem;
    border: 1px solid #CCC;
}

.msl-imagenav > ul {
    margin-bottom: 2rem;
}

/* Medium and up */
@media screen and (min-width: 40em) {
    .product_box {
        padding: 1.5rem;
    }

    #page-body h2 {
        margin-bottom: 1rem;
        line-height: 1.2;
    }

    .msl-imagenav > ul {
        -ms-grid-columns: 1fr 2rem 1fr 2rem 1fr;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 1rem;
    }

    @supports (-ms-ime-align: auto) {
        .msl-imagenav > ul:after {
            content: '';
            display: table;
            clear: both;
        }

        .msl-imagenav > ul li {
            width: 30%;
            float: left;
            margin-right: 1.5%;
            margin-bottom: 1.5%;
        }

        .msl-imagenav > ul li:nth-of-type(2n+1) {
            clear: none;
        }

        .msl-imagenav > ul li:nth-of-type(3n+1) {
            clear: left;
        }
    }
}

@media screen and ( min-width: 64rem ) {
    @supports (-ms-ime-align: auto) {
        .msl-imagenav > ul li:nth-of-type(3n+1) {
            clear: none;
            margin-left: 1%;
            margin-right: 1%;
        }

        .msl-imagenav > ul li:nth-of-type(4n+1) {
            clear: left;
            margin-left: 0;
        }
    }
}

/* Large and up */
@media screen and (min-width: 64em) {
    #page-body h2 {
        margin-bottom: 2rem;
    }

    @supports (-ms-ime-align: auto) {
        .msl-imagenav > ul:after {
            content: '';
            display: table;
            clear: both;
        }
    }
}

/***************************************************************************************************************************/
/* Media
/* 
/***************************************************************************************************************************/
.video-responsive {
    overflow: hidden;
    margin-bottom: 1rem;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
}

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

/***************************************************************************************************************************/
/* Welcome Festival / Festival Maps
/* 
/***************************************************************************************************************************/
#stalls {
    max-height: 50vh;
    overflow-y: scroll;
}

.stall-list th, .stall-list td {
    margin: 0 0 1px;
    padding: .5rem .8rem;
    background-color: rgba(255,255,255,.1);
}

.stall-list th {
    background-color: #f18715;
}

@media screen and (min-width: 64rem) {
    #stalls {
        max-height: none;
        overflow-y: auto;
    }
}

/***************************************************************************************************************************/
/* Volunteering
/* 
/***************************************************************************************************************************/
/***************************************************************************************************************************/
/* Societies
/* 
/***************************************************************************************************************************/
#organisation {
    width: 100%;
    margin: 0 auto 0;
}

/***************************************************************************************************************************/
/* Leadership Awards
/* 
/***************************************************************************************************************************/
.slider-instructions .instructions {
    display: block;
    overflow: auto;
    padding: 3rem;
    background-color: #F5F5F5;
    border-radius: 2px;
}

.slider-instructions .instructions img {
    margin: 0 auto 0;
}

/***************************************************************************************************************************/
/* New Navigation
/* 
/***************************************************************************************************************************/
nav[id*="nav"] {
    overflow: visible;
    clear: both;
    background-color: #00A6D0;
    border-width: 0 0 1px;
}

#site-nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
    border-bottom: 1px solid #0086b0;
}

 .bumblebee {
    background: #fc0;
    padding: 1rem;
    text-align: center;
    font-size: 1.1rem;
}

@media all and (min-width:40rem) {
     .bumblebee {
    
    }
}

#for-nav {
    position: relative;
    z-index: 99;
}

[id*="nav"] .nav-left {
    float: left;
}

[id*="nav"] .nav-right {
    float: right;
}

[id*="nav"] .logo {
    padding: .8rem .8rem;
}

[id*="nav"] .logo img {
    height: .8rem;
}

[id*="nav"] > ul {
    margin: 0;
    list-style: none;
}

[id*="nav"] > ul > li {
    position: relative;
    display: block;
    float: left;
    border: 1px solid #0086b0;
    border-width: 0 1px 0 0;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}

[id*="nav"] > ul > li:hover {
    background-color: #0086b0;
}

[id*="nav"] > ul > li a {
    display: block;
    padding: .8rem 1rem;
    font-size: .8rem;
    line-height: 1;
    color: #fff;
}

[id*="nav"] > ul > li a .title {
    font-family: "Noah-Bold";
    text-transform: uppercase;
    letter-spacing: 1px
}

[id*="nav"] > ul > li i + span {
    margin-left: .2rem;
}

[id*="nav"] select:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.off-canvas {
    display: block;
    position: fixed;
    height: 100vh;
    min-width: 300px;
    max-width: 80vw;
    width: auto;
    overflow-y: scroll;
    background-color: #FFF;
    color: #222;
    z-index: 98;
}

.off-canvas.canvas-left {
    left: -100%;
    top: 0;
}

.off-canvas.canvas-right {
    right: -100%;
}

.off-canvas.canvas-show {
    left: 0;
}

.canvas-cover.cover-show {
    display: block;
    height: 100vh;
    width: 100%;
    position: fixed;
    z-index: 0;
    background-color: rgba(0,0,0,.5);
}

.off-canvas #basket {
    padding: .8rem 1rem .8rem;
}

.off-canvas .controlpanel > p {
    display: none;
}

.off-canvas ul {
    margin: 0;
    list-style: none;
}

.off-canvas ul.msl_navbar > li, .off-canvas .nav-section, .off-canvas .nav-section > li > a {
    display: block;
    border: 1px solid #EEE;
    border-width: 0 0 1px;
}

.off-canvas ul.msl_navbar > li > a, .off-canvas li > a {
    display: block;
    padding: .8rem 1rem;
    color: #222;
}

.off-canvas ul.msl_navbar > li > a.current {
    font-weight: bold;
    position: relative;
}

.off-canvas ul.msl_navbar > li > a:hover, .off-canvas li > a:hover {
    background-color: #F5F5F5;
}

.off-canvas .campusSelect {
    padding: .8rem 1rem;
    background-color: #EEE;
    border-width: 0 0 1px;
}

.off-canvas .campusSelect select {
    height: auto !important;
    border-radius: 2px;
    border: 1px solid #DDD !important;
    background-color: #FFF !important;
}

.off-canvas ul.msl_navbar .level_1, .off-canvas .sidepanel h3, .off-canvas .sidepanel h4 {
    display: none;
}

.off-canvas #ulAdmin {
    border: 1px solid #EEE;
    border-width: 0 0 1px;
}

.off-canvas .msl_navbar > li:hover > a {
    background-color: #0086b0;
    color: #FFF !important;
}

.off-canvas .msl_navbar > li ul.level_1 a {
    background-color: #0086b0;
    color: #FFF;
}

.off-canvas .msl_navbar > li:hover > a:hover, .off-canvas .msl_navbar > li ul.level_1 a:hover, .off-canvas .msl_navbar > li.open .msl-itemhassubnav {
    background-color: #0086b0;
    color: #FFF;
}

.off-canvas .msl_navbar > li.open .msl-itemhassubnav {
}

.off-canvas .msl_navbar > li.open ul.level_1 {
    display: block;
}

.logo-header {
    padding: 1rem;
    text-align: center;
}

.featuredNav {
    font-weight: bold;
}

@media screen and ( min-width: 40rem ) {
    [id*="nav"] > ul > li a {
        padding: .8rem 1rem;
    }

    [id*="nav"] .logo {
        padding: .8rem 1rem;
    }

    [id*="nav"] #logo img {
        height: 1.4rem;
    }
}

@media screen and ( min-width: 64rem ) {
    [id*="nav"] > ul > li a {
        padding: 1rem 1rem;
    }

    #for-nav {
        margin: 0rem auto 1rem;
        border: 1px solid #0086b0;
    }

    .off-canvas.canvas-left {
        position: static;
        background: transparent;
        overflow-y: visible;
        height: auto;
        max-width: none;
    }

    .off-canvas.canvas-left ul.msl_navbar {
        text-align: center;
        width: auto;
    }

    .off-canvas.canvas-left .nav-black ul.msl_navbar {
        background: #000;
    }

    .off-canvas.canvas-left ul.msl_navbar > li, .off-canvas.canvas-left .nav-section > li > a {
        display: inline-block;
    }

    .off-canvas.canvas-left ul.msl_navbar > li {
        border-bottom: none;
    }

    .off-canvas.canvas-left ul li > a {
        color: #fff;
        font-family: "Noah-Regular";
        text-transform: uppercase;
    }

    .off-canvas ul.msl_navbar > li > a.current:after {
        content: '';
        border-bottom: 5px solid #fff;
        position: absolute;
        bottom: -1px;
        left: 0;
        right: 0;
    }

    /*

    [id*="nav"] li > a.current {
        background: #dadada;
    }
    [id*="nav"] .nav-left .canvas-toggle.toggle-left {
        display: none;
    }
    [id*="nav"]-container {
        height: auto;
        left: 0 !important;
        top: 65px;
        right: 0;
        min-width: 0;
        max-width: none;
        overflow: visible;
        border-bottom: 1px solid #ccc;
        z-index: 0;
    }
    [id*="nav"]-container li, [id*="nav"]-container ul, [id*="nav"]-container .mslwidget {
        display: inline-block;
        border: none;
    }
        [id*="nav"]-container li a {
        padding: 0.35rem 0.65rem;
        font-size: 0.8rem;
        background-color: #eaeaea;
        border-bottom: 1px solid #cfcfcf;
        border-radius: 3px;
        transition: 0.2s ease all;
    }
        .canvas-cover.cover-show+[id*="nav"]-container {
        z-index: -1;
    }
        [id*="nav"]-container ul {
        padding-left: 0.5rem;
    }

    [id*="nav"]-container li {
        padding: 0.35rem 0rem;
        margin: 0;
    }
    */
    [id*="nav"] .logo {
        height: 3rem;
        padding: 1rem 1rem;
    }

    [id*="nav"] .logo img {
        height: 1rem;
    }

    [id*="nav"]-container li:hover {
        color: #000;
    }

    [id*="nav"]-container li a:hover, [id*="nav"]-container ul .open li a:hover {
        background-color: #06a;
        color: #fff;
        border-color: #03a;
    }

    [id*="nav"]-container ul ul {
        display: none;
        border-radius: 3px;
        overflow: hidden;
    }

    [id*="nav"]-container ul .open {
        position: relative;
    }

    [id*="nav"]-container ul .open ul {
        display: block;
        position: absolute;
        top: 38px;
        width: 200px;
        margin: 0;
        padding: 0;
        background-color: #eaeaea;
    }

    [id*="nav"]-container ul .open li {
        padding: 0;
        display: block;
        background-color: transparent;
    }

    [id*="nav"]-container ul .open li a {
        border-radius: 0;
        background-color: #09d;
    }
}

@media screen and ( min-width: 88rem ) {
    /*[id*="nav"]-container li {
        padding: 0.5rem 0.25rem;
    }

    [id*="nav"]-container > div > ul > li a {
        font-size: 0.9rem;
    }

    [id*="nav"]-container ul .open ul {
        top: 44px;
    }*/
}

/**************************************************************************************************************************
UNITY Admin Addendum
Author: Dan Connolly
Description: Theme Engine Extension for MSL
Dependencies: 
MSL, vers ??
Foundation Framework, vers 6.4.3
Font Awesome, vers 5.1.0
jQuery, vers 3.3.1
**************************************************************************************************************************/
#page_tree table {
    width: auto;
    border-collapse: unset;
    margin: 0;
}

/* Mailing list one click hack */
.mailwrap {
    background: #eee;
    padding: 1rem 1rem 1px;
    margin: 0 0 1rem;
}

.mailwrap > a.button {
    display: block;
    margin: 0 0 1rem;
}

@media all and (min-width: 40rem) {
    .mailwrap {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding: 2rem 1rem
    }

    .mailwrap > a.signup {
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        margin: 0 1rem;
    }
}

.mailwrap.nopad {
    padding: 0;
    background: none transparent;
}

.mailwrap .mslwidget {
    display: none;
}

.button.ally {
    background: #fff;
    border: 1px solid rgba(248, 173, 58, 100);
}

.button.success {
    background: #eee;
    color: #000;
    text-align: left;
    margin: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

.button.success:hover {
    background: #6a0;
}

.button.success:after {
    display: none
}

.button.success:before {
    content: '\f00c';
    display: inline-block;
    padding-right: 0.5em;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    color: #6b0;
}

.button.success:hover:before {
    color: #000;
}

/* Products and Catalogues */
ul.catalogue_productlist {
    margin: 1rem -1.5rem 1rem 0;
    padding: 0;
}

.catalogue_productlist li {
    float: none;
    display: inline-block;
    vertical-align: top;
    width: auto;
    height: auto;
    text-align: center;
    margin: 0 1.5rem 1.5rem 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
    position: relative;
    border: 1px solid #eee;
}

.catalogue_productlist li img {
    width: auto;
    height: auto;
    display: block;
    margin: 0;
}

.catalogue_productlist li .msl-product-name {
    font-size: 1rem;
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    background: #337ab7;
    display: block;
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
}

.catalogue_productlist li .msl-product-name:after {
    content: '';
    position: absolute;
    left: 99%;
    top: 0;
    border-color: transparent transparent #337ab7 #337ab7;
    border-width: 21px;
    border-style: solid;
    height: 0;
    width: 0;
    border-radius: 2px;
}

.catalogue_productlist li .msl-product-price {
    position: absolute;
    top: 0px;
    right: 0px;
    background: #fff;
    font-size: 0.9rem;
    padding: 0.25rem 0.5rem 0.25rem 0.25rem;
}

.catalogue_productlist li .msl-product-price:before {
    content: '';
    position: absolute;
    right: 99%;
    top: 0;
    border-color: #fff #fff transparent transparent;
    border-width: 16px;
    border-style: solid;
    height: 0;
    width: 0;
    border-radius: 2px;
}

/* Signposting */
.signpost-wrap {
    border-left: 5px solid #337ab7;
    padding: 1rem 1rem 0;
    background: #fff;
    margin: 0rem -.5rem 1rem;
    border-radius: 0px;
}

.signpost-wrap h2 {
    margin: 0 0 0.5rem !important;
}

.signpost-wrap p {
    padding-right: 1rem;
    font-size: 0.9rem
}

.signpost-wrap strong {
    font-size: 1rem;
}

.signpost-wrap .button {
    margin-bottom: 1rem;
    display: block;
}

@media all and (min-width: 40rem) {
    .signpost-wrap {
        margin: -1.5rem 0;
    }

    .signpost-wrap h2 {
        font-size: 1.5rem;
    }
}

/* Alerts */
.alert {
    padding: 1rem;
    background: #eaeefa;
    border-left: 5px solid #337ab7;
}

/* Ad Banners */
#ad-banner {
    text-align: center;
    padding: 1rem;
    background: #eee;
}

#ad-banner img {
    max-width: 100%;
}

/* Profile Cards - what are they? */
.profile-card .cell {
    padding: 2.5rem;
}

/* Some header changes, not sure they're required */
@media all and (max-width: 639px) {
    .hero-banner {
        padding-top: 1rem !important;
    }

    [id="top-bar-first"] .top-bar-left, [id="top-bar-first"] .top-bar-right {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 50%;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Admin tables */
td a img {
    min-width: 18px;
}

/* Admin Menus */
[id="msl_toolbar"] {
}

[id="msl_toolbar"] ul {
    display: block;
    list-style: none;
    margin: 1rem 0;
    padding: 0;
}

[id="msl_toolbar"] li {
    display: inline-block;
    margin: 0 0.25rem 0.5rem 0;
}

[id="msl_toolbar"] li a {
    display: inline-block;
    padding: 0.35rem 0.65rem;
    background: #08c;
    border-radius: 3px;
    color: #fff;
    border: 1px solid #06a;
    transition: 0.2s ease all;
}

[id="msl_toolbar"] li a:hover {
    background: #06a;
}

.button_key {
    float: right;
}

.button_key ul {
    list-style: none;
}

.button_key li {
    display: inline-block;
}

/* Admin forms */
/* Form layout */
.msl_admin_page, #admin_ents_event {
    padding: 0;
}

.msl_admin_page .sidebyside, .msl_admin_page .vp_form .vpFormPair .sidebyside+input {
    width: 50% !important;
    display: inline;
}

.msl_admin_page .vp_hintsdisplaying {
    display: block;
    background: #ffa;
    padding: 0.75rem 1rem;
    margin: 0;
    border: 1px solid #fc0;
}

.msl_admin_page .vp_form .title {
    font-weight: 700;
    font-size: 1.2rem;
}

.msl_admin_page .vp_content {
    margin-bottom: 0 !important;
}

.msl_admin_page fieldset, #edit_organisation fieldset {
    margin: 1rem 0;
    padding: 1rem 2rem;
    border: 0;
    border: 1px solid #eee;
    background: #fafafa;
}

.msl_admin_page legend, #edit_organisation legend {
    background: #3378A7;
    padding: 0.5rem 1rem;
    margin-left: -2rem;
    color: #fff;
}

/* Icon Hacks */
[id*="nav"] li[class*="msl_"], [id*="nav"] li.edit {
    padding: 0;
    min-height: 0;
    display: block;
    background-image: none;
}

[id*="nav"] a[class*="msl_"] {
    background-image: none;
}

/* Button small hack */
.button-group .button.small {
    font-size: 0.75rem;
}

/* Fest O'Run */
/* Divider */
.divider {
    background: url("../../pageassets/for/divider.png") 50% 50% no-repeat #eee;
    height: 60px;
    background-size: 40px;
    position: relative;
}

/* Colours */
.yellow, .yellow:before, .yellow:after {
    border-color: #F3CF40;
}

.green, .green:before, .green:after {
    border-color: #00BC70;
}

.purple, .purple:before, .purple:after {
    border-color: #A25EB5;
}

.orange, .orange:before, .orange:after {
    border-color: #FF8040;
}

/* Footer */
footer {
    
}

footer a {
    color: #fff;
}

.upper-footer {
    background: #00A6D0;
    margin: 0;
    padding: 2rem;
    text-align: center;
    color: #fff;
}

.upper-footer .logo {
    max-width: 240px;
    display: block;
    margin: 0 auto -1rem;
}

.upper-footer h2 {
    background: none;
    padding: 0;
}

.upper-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.upper-footer li {
    display: inline-block;
    margin: 0.5rem .75rem;
    font-size: 1.2rem;
}

.upper-footer li a {
    padding: 0.5rem 1rem;
    display: inline-block;
    transition: 0.2s ease all;
    font-family: "Noah-Bold";
    text-transform: uppercase;
    background: #fff;
    color: #000;
    border-radius: 3px;
    border: 1px solid transparent;
}

.upper-footer li a:hover {
    background: transparent;
    color: #fff;
    border-color: #fff;
}

.lower-footer {
    background: #000;
    color: #fff;
    margin: 0;
    padding: 2rem;
    font-size: 0.9rem;
}

.lower-footer h3 {
    border:none;
    font-size: 1rem;
}
.lower-footer ul {
    list-style:none;
    margin: 1rem 0;
    padding:0;
}
.lower-footer li {
   margin: 0 0 .5rem;
}

#cta {
    position: absolute;
    top: 0rem;
    right: 1rem;
    font-size: 0.9rem;
    background: #00a0d6;
    color: #fff;
}

.page-header .grid-container {
    position: relative;
}

.rs-alert {
    margin-right: 1rem;
    background: #fc0;
    padding: 1rem;
}