﻿/*!
 *  bccnm-hamburger.css - Nov 2020
 *  Addition to older 2014 style.css to support new menu system's mobile hamburger.
 */
.hamburger {
    padding: 0px 0px;
    display: inline-block;
    cursor: pointer;
    transition-property: opacity, filter;
    transition-duration: 0.15s;
    transition-timing-function: linear;
    font: inherit;
    color: #F4F3F3;
    text-transform: none;
    background-color: transparent;
    border: 0;
    margin: 0;
    overflow: visible;
}

.hamburger:hover {
    opacity: 0.7;
}

/* size */
.hamburger-box {
    width: 24px;
    height: 24px;
    display: inline-block;
    position: relative;
}

.hamburger-inner {
    display: block;
    top: 50%;
    margin-top: 0;
}

/* bars */
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
    width: 24px;
    height: 2px;
    border-radius: 2px;
    background-color: #fafafa;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease;
}

.hamburger-inner::before,
.hamburger-inner::after {
    content: "";
    display: block;
}

/* space between bars */
.hamburger-inner::before {
    top: -8px;
}

/* space between bars */
.hamburger-inner::after {
    bottom: -8px;
}

.hamburger--vortex .hamburger-inner {
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

.hamburger--vortex .hamburger-inner::before,
.hamburger--vortex .hamburger-inner::after {
    transition-duration: 0s;
    transition-delay: 0.1s;
    transition-timing-function: linear;
}

.hamburger--vortex .hamburger-inner::before {
    transition-property: top, opacity;
}

.hamburger--vortex .hamburger-inner::after {
    transition-property: bottom, transform;
}

.hamburger--vortex.is-active .hamburger-inner {
    transform: rotate(765deg);
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

.hamburger--vortex.is-active .hamburger-inner::before,
.hamburger--vortex.is-active .hamburger-inner::after {
    transition-delay: 0s;
}

.hamburger--vortex.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0;
}

.hamburger--vortex.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(90deg);
}

/*!
 *  bccnm-style.css - Nov 2020
 *  Additions to older 2014 style.css to support new menu system.
 */

#bccnm-header {
    width: 100%;
    background-color: rgb(72, 45, 129);
    height: 100px;
}

#bccnm-header-top {
    height: 60px;
}

#bccnm-header-menu {
    width: 100%;
    color: rgb(218, 213, 229);
    background-color: rgb(72, 45, 129);
    margin-left: 130px;
}

#nm-logo-m,
.hamburger,
.nm-section-links,
div.nm-section > div.nm-scroll,
div.nm-back {
    display: none;
}

.nm-flex-container {
    display: flex;
    flex-wrap: nowrap;
}

.nm-table {
    display: table;
    height: 100%;
    width: 100%;
}

.nm-row {
    display: table-row;
    width: 100%;
}

.nm-cell {
    display: table-cell;
    text-align: right;
    vertical-align: middle;
    padding: 0 10px;
}

.nm-cell.left {
    text-align: left;
}

.nm-header-links .nm-links li {
    display: inline-block;
    white-space: nowrap;
    margin: 0;
}

.nm-header-links .nm-links li a {
    font-family: 'Jano Sans Pro Semi Bold'; /* ********************************* */
    font-size: 14px;
    color: rgb(180, 161, 253);
}

.nm-header-links .nm-links li a.nm-a:visited,
.nm-section-links .nm-links li a.nm-a:visited {
    color: rgb(180, 161, 253);
}

.nm-header-links .nm-links li:first-of-type a.nm-links-link::before {
    content: "";
}

.nm-header-links a.nm-links-link::before {
    color: rgb(180, 161, 253);
    content: "|";
    padding: 0 12px;
}

a.nm-logo img {
    position: absolute;
    top: 10px;
    left: 10px;
}

.nm-search {
    width: 300px;
}

.crn-search-input .ms-srch-sb {
    background-color: rgb(72, 45, 129);
}

div.nm-hamburger {
    width: 24px;
}

div.nm-hamburger > button {
    min-width: 0;
}

div.nm-section {
    position: relative;
    clear: both;
    padding: 0;
    white-space: nowrap;
    text-align: left;
    vertical-align: middle;
    height: 40px;
}

div.nm-section > .nm-action > span,
div.nm-section > .nm-scroll > span {
    font-family: 'Jano Sans Pro Medium'; /* ********************************* */
    font-size: 16px;
    display: inline-block;
    padding: 10px 10px;
}

div.nm-section > .nm-scroll > span {
    padding-right: 30px;
}

a.nm-a {
    text-decoration: none;
    color: rgb(218, 213, 229);
}

a.nm-a:visited {
    color: rgb(218, 213, 229);
}

.nm-label {
    color: rgb(180, 161, 253);
}

.nm-menu > span,
.nm-menu * span {
    font-family: 'Jano Sans Pro Light'; /* ********************************* */
    font-size: 16px;
}


div.nm-menu {
    position: relative;
    clear: both;
    padding: 0;
    white-space: normal;
    text-align: left;
    vertical-align: middle;
}

div.nm-menu span,
div.nm-menu-sub span {
    clear: both;
    display: block;
    padding: 5px 7px;
}

div.nm-action {
    width: 80%;
    float: left;
}

div.nm-back div.nm-action {
    width: 100%;
}

div.nm-scroll {
    width: 20%;
    float: right;
    text-align: right;
}

div.nm-back div.nm-action,
div.nm-back div.nm-scroll {
    margin-bottom: 16px;
    border-bottom: 1px solid rgb(218, 213, 229);
}

div.nm-section-menu {
    position: absolute;
    clear: both;
    z-index: 100;
    margin-top: 40px;
    width: 240px;
}

div.nm-menu-sub {
    position: absolute;
    clear: both;
    z-index: 100;
    margin-top: 0px;
    margin-left: 240px;
    width: 240px;
}

div.nm-background {
    background-color: rgb(72, 45, 129);
}

div.nm-nobackground {
    background: none;
}

.nm-section-links nav {
    background-color: rgb(72, 45, 129);
}

div.nm-menu-sub.left {
    margin-left: -240px;
}

.nm-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nm-section-links .nm-links li {
    padding: 10px 20px;
}

.nm-links li a {
    color: rgb(180, 161, 253);
}

.nm-header-links .nm-links li a:hover {
    color: rgb(235, 86, 65);
}

a.nm-a:hover {
    color: rgb(235, 86, 65);
}

div.nm-section:hover > .nm-action,
div.nm-menu:hover > .nm-action > span,
div.nm-menu:hover > .nm-scroll > span {
    color: rgb(235, 86, 65);
}

/* Mobile: Matching style.css *************************************************************** */
@media screen and (max-width: 959px) {

    #bccnm-header {
        height: 60px;
    }

    #bccnm-header-menu,
    #nm-logo,
    .nm-header-links .nm-links {
        display: none;
    }

    #bccnm-header-menu {
        margin-left: 0px;
    }

    /* for now don't show: div.nm-back */
    #nm-logo-m,
    .hamburger,
    .nm-header-links > .nm-links,
    .nm-section-links,
    div.nm-section > div.nm-scroll {
        display: block;
    }

    .nm-flex-container {
        display: flex;
        flex-wrap: wrap;
    }

    div.nm-section {
        width: 100%;
    }

    #bccnm-header-menu {
        position: relative;
        left: 0;
        margin: 0;
        width: 100vw;
        z-index: 100;
    }

    div.nm-section-menu {
        position: absolute;
        width: 100vw;
    }

    div.nm-menu-sub {
        position: relative;
        margin-left: 0;
        width: 100vw;
    }

    div.nm-menu-sub.left {
        margin-left: 0;
    }

    div.nm-section-menu .nm-scroll > span {
        padding-right: 30px;
    }


    div.nm-menu > .nm-action > span,
    div.nm-menu > span.nm-label,
    div.nm-menu-sub > span {
        padding: 10px 30px;
    }

    div.nm-menu-sub > span {
        padding: 10px 60px;
    }

    a.nm-a:hover,
    div.nm-section:hover > .nm-action,
    div.nm-menu:hover > .nm-action > span,
    div.nm-menu:hover > .nm-scroll > span {
        color: rgb(218, 213, 229);
    }

    a.nm-logo img {
       top: 15px;
    }
	
	/* shorten the search bar to fit nm-logo-m */
    .nm-search {
        width: 30vw;
    }
	
    .crn-search-input .ms-srch-sb {
		max-width: 25vw;
	}

    .ms-srch-sb > input {
		width: 13vw !important;
	}
}
