/* Header Styles - MFB 2018 */
@media only screen and (min-width: 300px) {
    .util-nav, .nav, .authenticated {
        display: none;
    }

    .masthead {
        display: flex;
        align-items: center;
        position: fixed;
        top: 0;
        /*MFB-5133*/
        /*width: 100vw;*/
        width: 100%;
        height: 95px;
        background-color: #FFF;
        /*border-bottom: 1px solid #0F1934;*/
        border-bottom: 3px solid #d1d3d4;
        z-index: 1;
        will-change: transform;
        transition: transform .5s;
        z-index: 14;
    }
    .masthead.masthead-no-border {
        border-bottom: none;
    }

    .masthead-content {
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
    }
        .masthead-content.masthead-main-nav-hidden {
            justify-content: center;
        }
        .masthead-content.masthead-main-nav-hidden .nav.main-nav {
            display: none !important;
        }
        .masthead-content.masthead-main-nav-hidden .nav.main-buttons {
            display: none !important;
        }
        .masthead-main-nav-buttons-hidden {
            display: none !important;
        }

    .mfb-logo {
        width: 165px;
    }

    .hamburger {
        margin-left: auto;
    }

    .hamburger .line {
        width: 34px;
        height: 5px;
        margin: 5px 0;
        background-color: #7029EC;
    }

    .mobile-nav {
        position: fixed;
        top: 0;
        height: 100vh;
        width: 100vw;
        overflow: scroll;
        z-index: 4;
        background-color: #7029EC;
        transform: translateX(100vw);
        transition: .25s ease-out all;
		z-index:15;
		display:none;
    }

    .mobile-nav .close {
        background: none;
    }

    .mobile-nav .close:before,
    .mobile-nav .close:after {
        content: '';
        position: absolute;
        height: 4px;
        width: 58%;
        top: 50%;
        left: 6px;
        margin-top: -1px;
        background: #FFF;
    }

    .mobile-nav .close::before {
        transform: rotate(45deg);
    }

    .mobile-nav .close::after {
        transform: rotate(-45deg);
    }

    .mobile-nav .mobile-util-nav {
        display: flex;
        align-items: center;
        min-height: 85px;
        padding: 20px;
        background-color: #7029EC;
    }

    .mobile-nav .mobile-nots {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        height: 100vh;
        width: 100vw;
        background-color: #EBF3F8;
        transform: translateY(-100vh);
        transition: .25s ease-out all;
        z-index: 3;
    }

    .mobile-nav .nots-heading {
        display: flex;
        align-items: center;
        min-height: 85px;
        padding: 20px;
        font-family: GraphikCompactBlack, Arial, sans-serif;
        font-size: 18px;
        text-transform: uppercase;
        color: #7029EC;
    }

    .mobile-nav .nots-heading .close {
        margin-left: auto;
    }

    .mobile-nav .nots-heading .close:before,
    .mobile-nav .nots-heading .close:after {
        background: #7029EC;
    }

    .mobile-nav .nots-list {
        padding: 0 20px;
        overflow-y: scroll;
    }

    .no-notifications {
        display: flex;
        justify-content: center;
    }

    .no-notifications p {
        margin: 10px 0;
    }

    .notice {
        display: flex;
        align-items: center;
        padding: 10px;
        border-bottom: 1px solid #0F1934;
        color: #0F1934;
    }
	.notifications-top-menu .notice{
		display:block;
	}
	.notice .notice-date, .NotiItem .notice-date{
		color:#94A0D4;
	}
    .notice-message a {
        color: #b542eb;
    }

    .notice-remove {
        padding-left: 15px;
        margin-left: auto;
        cursor: pointer;
    }

    .mobile-nav .mobile-user-signin {
        margin-left: auto;
    }

    .mobile-nav .mobile-user-signedin {
        display: flex;
        align-items: center;
        margin-left: auto;
        color: #FFF;
    }

    .mobile-nav .mobile-user-signedin img {
        margin-left: 10px;
    }

    .mobile-nav .mobile-user-nav {
        padding: 30px 0;
        background-color: #0F1934;
    }

    .mobile-nav .mobile-user-nav .menu-content ul ul li a {
        background-color: #2F384E;
    }

    .mobile-nav .mobile-main-nav {
        padding: 20px 0 30px;
        background-color: #7029EC;
    }

    .mobile-nav .mobile-main-nav .menu-content {
        padding-top: 30px;
    }

    .mobile-nav .mobile-search {
        padding: 0 20px 20px;
        border-bottom: 1px solid #8951EE;
    }

    .mobile-nav .user-control {
        padding: 30px 20px 0;
    }

    .mobile-nav .user-control a {
        font-family: GraphikRegular, Arial, sans-serif;
        text-decoration: none;
        color: #FFF;
    }
}

@media only screen and (min-width: 800px) {
    /*.Index .masthead {
        border-bottom: none;
    }*/

    .hamburger, .mobile-nav {
        display: none;
    }

    .util-nav {
        display: flex;
        position: fixed;
        justify-content: center;
        top: 0;
        height: 40px;
        /*MFB-5133*/
        /*width: 100vw;*/
        width: 100%;
        background-color: #0F1934;
        will-change: transform;
        transition: transform .25s;
        z-index: 15;
    }

    .util-nav .arrow.down {
        margin: 0 10px 5px 10px;
        border-right: 3px solid #EBF3F8;
        border-bottom: 3px solid #EBF3F8;
        transform: rotate(45deg);
    }

    .util-nav-content {
        display: flex;
        align-items: center;
        font-size: 1.4rem;
    }

    .user-area {
        height: 100%;
        margin-left: auto;
    }

    .util-nav-content a {
        font-family: GraphikBold, Arial, sans-serif;
        text-decoration: none;
        color: #EBF3F8;
    }

    .util-nav-content a:hover,
    .util-nav-content a:active {
        text-decoration: underline;
    }

    .loggedout {
        display: flex;
        align-items: center;
        height: 100%;
    }

    .loggedin {
        display: flex; /* None or Flex */
        align-items: center;
        height: 100%;
        color: #EBF3F8;
    }

    .loggedin > div {
        display: flex;
        align-items: center;
        height: 100%;
        padding-left: 10px;
        cursor: pointer;
    }

    .user:hover .arrow {
        transform: translateY(5px) rotate(45deg);
    }

    .notifications {
        margin-right: 5px;
    }

    .notifications > img {
        margin-right: 5px;
    }

    .user-control {
        display: none;
        flex-direction: column;
        position: fixed;
        top: 52px;
        width: 230px;
        padding: 15px 20px;
        background-color: #7029EC;
        animation: slideDown 0.2s ease-out 0s 1 normal forwards;
    }

    .user-control::before {
        position: fixed;
        top: -10px;
        left: 50px;
        content: '';
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 10px 10px 10px;
        border-color: transparent transparent #7029ec transparent;
    }

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

    .user-control ul li {
        margin: 10px 0;
    }

    .user-control ul li:first-child {
        margin-top: 0;
    }

    .user-control ul li:last-child {
        margin-bottom: 0;
    }

    .user-control a {
        display: block;
        width: 100%;
        font-size: 1.5rem;
        font-family: GraphikRegular, Arial, sans-serif;
        text-transform: uppercase;
    }

    .user-control a:hover {
        text-decoration: none;
        color: #0F1934;
    }

    .notifications-control {
        display: none;
        flex-direction: column;
        justify-content: center;
        position: fixed;
        top: 40px;
        right: 0;
        left: auto;
        width: 400px;
        max-height: 600px;
        padding: 20px;
        border: 4px solid #7029EC;
        overflow-y: scroll;
        background-color: #FFF;
        cursor: initial;
        animation: slideDown 0.2s ease-out 0s 1 normal forwards;
    }

    .notifications-control::before {
        position: fixed;
        top: -14px;
        left: 300px;
        content: '';
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 10px 10px 10px;
        border-color: transparent transparent #7029ec transparent;
    }

    .notifications-control a,
    .notifications-control p {
        color: #0F1934;
    }

    .view-all {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px 0;
        text-transform: uppercase;
        color: #B542EB;
        cursor: pointer;
    }

    .view-all:hover {
        text-decoration: underline;
    }

    .masthead {
        display: flex;
        justify-content: center;
        position: fixed;
        top: 40px;
        /*height: 150px;*/
        height: 68px;
        width: 100vw;
        background-color: #FFF;
    }

    .masthead img {
        transform-origin: left;
        /* transition: .25s all; */
    }

    .masthead-content {
        display: flex;
        /*align-items: flex-end;*/
        width: 1350px;
        align-items:center;
        /*height: 150px;*/
        height:68px;
        /*padding-top: 30px;
        padding-bottom: 30px;*/
    }

    .mfb-logo {
        width: 300px;
        height: 88px;
        transform:translateY(-55px) scale(.7);
        position:relative;
        top:56px;
    }

    /* Navigation */
    .nav.user-nav .my-march,
    .nav.user-nav .my-groups,
    .nav.user-nav .my-teams ,
	.nav.user-nav .my-eventlead{
        display: none;
    }

    .nav.user-nav .my-march.active,
    .nav.user-nav .my-groups.active,
    .nav.user-nav .my-teams.active, .nav.user-nav .my-eventlead.active{
        display: flex;
    }

    .nav {
        display: flex;
    }

    .nav.main-nav {
        margin-left: auto;
    }

    /* MFB-5218*/
    .nav.main-buttons {
        display:flex;
        flex-flow:row;
        align-items:center;    
    }

    .nav.user-nav {
        align-items: center;
        height: 100%;
    }

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

    .nav.user-nav ul {
        display: flex;
        height: 100%;
    }

    .nav ul li {
        display: inline-flex;
        align-items: center;
        position: relative;
    }

    .nav ul li a {
        display: flex;
        align-items: center;
        margin: 0 15px;
        font-family: GraphikCompactBlack, Arial, sans-serif;
        font-size: 1.7rem;
        text-transform: uppercase;
        text-decoration: none;
        color: #0F1934;
        white-space: nowrap;
        transition: .20s all;
    }
	
	.nav.user-nav  ul ul li a {
		font-family: GraphikRegular, Arial, sans-serif;
	}
    .user-nav ul li.active a {
        position: relative;
        top: 1px;
        border-bottom: 2px solid #FFF;
    }

    .nav.user-nav ul li a {
        margin: 0 20px;
        color: #FFF;
        transition: none;
    }
	 
	.nav.user-nav ul li span.header-menu-item-underline {
		display: flex;
		align-items: center;
		margin: 0 15px;
		font-family: GraphikCompactBlack, Arial, sans-serif;
		font-size: 1.7rem;
		text-transform: uppercase;
		text-decoration: none;
		color: #0F1934;
		white-space: nowrap;
		transition: .20s all;
		margin: 0 20px;
		color: #FFF;
		border-bottom: 2px solid #FFF;
	}		
 

    .nav .arrow.down {
        margin-left: 10px;
        margin-bottom: 5px;
        transform: rotate(45deg);
    }

    .nav.user-nav .arrow.down {
        border-right: 4px solid #FFF;
        border-bottom: 4px solid #FFF;
    }

    .nav.user-nav > ul > li:hover > a {
        position: relative;
        top: 1px;
        border-bottom: 2px solid #FFF;
    }

    .nav.main-nav > ul > li > a:hover {
        color: #B542EB;
    }

    .nav.main-nav > ul > li > a.active {
        color: #B542EB;
    }

    .nav ul ul {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 20px;
        left: 0px;
        padding: 10px 0;
        background-color: #B542EB;
        xanimation: slideInLeft 0.2s ease-out 0s 1 normal forwards;
		animation: slideDown 0.3s ease-out 0s 1 normal forwards;
    }

    .nav.user-nav ul ul {
        display: none;
        top: 65px;
        height: auto;
    }

    .nav.user-nav ul ul li > a {
        border-bottom: 2px solid transparent;
    }
    .nav.user-nav ul ul li:hover > a {
        border-bottom-color: #FFF;
    }

    .nav ul ul li {
        padding: 10px 0;
    }

    .nav ul ul li a {
        color: #FFF;
    }

    .nav.main-nav ul ul li a:hover {
        color: #0F1934;
    }

    .nav ul li ul a {
        transition: .15s all;
    }

    .nav > ul > li:last-child a
    {
        margin-right: 0;
    }

    .nav ul li:hover ul {
        display: flex;
    }

    .authenticated {
        display: flex;
        justify-content: center;
        position: fixed;
        /*top: 190px;*/
        top:108px;
        height: 65px;
        width: 100vw;
        background-color: #B542EB;
        transition: transform .5s;
        z-index: 13;
    }

    .authenticated-team {
        background-color: #6179ff;
    }

    .authenticated-content {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .menu-button {
        position: relative;
        display: flex;
        align-items: center;
        height: 40px;
        margin-right: 10px;
        font-family: GraphikCompactBlack, Arial, sans-serif;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #FFF;
        border: 1px solid #FFF;
        cursor: pointer;
    }

    .menu-button:hover .menu-button-options {
        display: flex;
    }

    .menu-button .option {
        padding: 0 10px;
    }

    .menu-button-options {
        display: none;
        flex-direction: column;
        position: absolute;
        left: 0px;
        top: 40px;
        width: 200px;
        padding: 10px;
        background-color: #B542EB;
        animation: slideDown 0.3s ease-out 0s 1 normal forwards;
    }

    .authenticated-team .menu-button-options {
        background-color: #6179ff;
    }

    .menu-button-options div {
        margin: 10px;
        text-transform: uppercase;
    }

    .menu-button-options div a {
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #FFF;
    }

    .menu-button-options div:hover a {
        border-bottom: 2px solid #fff;
    }

    .user-hamburger {
        margin-left: 10px;
    }

    .user-hamburger .line {
        width: 25px;
        height: 2px;
        margin: 5px 10px 5px 0;
        background-color: #FFF;
    }
	.user-hamburger.show-gear-icon{
		position:relative;
	}
	.user-hamburger.show-gear-icon::after {
		content:" ";
		width:25px;
		height:25px;
		background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MUVEOEU2ODcyNkVCMTFFOTlCRjhCQ0FBOUMyNkJBOTQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MUVEOEU2ODgyNkVCMTFFOTlCRjhCQ0FBOUMyNkJBOTQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxRUQ4RTY4NTI2RUIxMUU5OUJGOEJDQUE5QzI2QkE5NCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxRUQ4RTY4NjI2RUIxMUU5OUJGOEJDQUE5QzI2QkE5NCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PkLb6HkAAAJRSURBVHjarJZLS1VRFICPxytlRZhloRAEThJCKikKK4gLiRQ0ipo4iHBY9AesmUhBgwYOCmwSFCQ9B9WgiAwnDRKKHmCZNkkUNbFIS0/fjnVksdzb9oUWfHD3umu/1mufNMuyJIIV8AgmFTcj5yaFJE5mYRVUKd1Kj105zFtl6jE8AceNbhdUG10N1KtxHVyEPUtWNFc7AlOwAKfhEPTAcLZUfsEAdIndfdEPQpNeV2/QAmNqkd8wnsWJtRuC/fnaubtq4TxsMP5dHxkza7cFDlh3lcuVhwIn/QQXxJ3NcAyumZtrN3bDGp+7HGckHrnMwxWoDqRnAzwxm3yGHaGYVMANM6E7og7WwXMz75zdpCCDfTCqDN/C2siC2w7Tau4LqJX/UleMdyU8m2GjCt51mI4M/AA8haMyboLbMAUfk0CgXSz2xrYN4WxgrfcuhX96ToYjk/GkNBkN6GfSQA8qk7ZRimwK6Fe7mDyWRV3v2aZ6WhH6S9ikqH4777yGb3lMcnbDV+XLd1AVGY+dMKPm9unaSk2GPFPjrdAVcQPXii47tyjdQ5jwtfo5uAPfla4depaJTyPcgmal+yGuWpSCCrSLSRtUmvfmJByEB9AnJ3S2rdDieWdcInVKtr38m6nqeb0a0dIXTG9bTnql5Sy6a1YqdMycasKT2mUetw1LbeUyKLeZ9L2MRZVh7maH5WX8II+Yljl4BZckuzpEPyKZmoRavaMVOqFS6VzrfmM26Yd6M/eUHDT51yYhbDu/978/iSrE73VSza4mvsS2gj8CDAD8uZB/FSm/EAAAAABJRU5ErkJggg==');
		background-repeat: no-repeat;
		display:block;
    }
	.user-hamburger.show-gear-icon .line{
        display:none;
    }
	
    .user-hamburger .line:first-child {
        margin-top: 0;
    }

    .user-hamburger .line:last-child {
        margin-bottom: 0;
    }

    .authenticated .my-march.active ul {
        background-color: #B542EB;
    }

    .authenticated-team .my-march.active ul {
        background-color: #6179FF;
    }

    .authenticated .my-teams.active ul,
    .authenticated .my-groups.active ul {
        background-color: #6179FF;
    }

    .my-groups {
        min-width: 505px;
    }
    .my-groups li a {
        margin-right: 20px !important;
        margin-left: 20px !important;
    }
}

@keyframes slideDown {
    0% {
        transform: translateY(-40px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    0% {
        transform: translateX(40px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
    }
}

/*	allow to hide main menu */
.authenticated.hideMain {
    /*height:10px !important;*/
    display: none !important;
}
.authenticated.hideMain .authenticated-content.container {display:none !important;}
.after-menu-spacer:not(.hideMain){ display:none;}
.after-menu-spacer.hideMain {
    display: flex;
    justify-content: center;
    position: static;
    top: calc(200px + 10px);
    height: 55px;
    width: 100vw;
    background-color: transparent;
    z-index: 3;
}
/*	allow to hide main menu */

body.safari5 .masthead
, body.safari5  .masthead-content
, body.safari5  .util-nav
, body.safari5 .util-nav-content
, body.safari5 .loggedin
, body.safari5 .loggedin > div
, body.safari5 .masthead 
, body.safari5 .masthead-content
, body.safari5 .nav
, body.safari5 .nav.user-nav ul 
, body.safari5 .authenticated 
, body.safari5 .authenticated-content
{
	display: -webkit-flex;
	display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
	display:flex;
}
body.safari5 .show-flex, body.safari9 .show-flex
{
	display: -webkit-flex;
	display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
	display:flex;
}