﻿.notificationContent .excerpt {
    font-size: 0.85rem;
    line-height: 120%;
    position: relative;
    background: #efefef;
    border-radius: 3px;
    padding: 5px 5px 5px 44px;
    margin-bottom: -10px;
}
    .notificationContent .excerpt .excerptAvWrap {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #c0c0c0;
        padding: 2px;
        background: #fff;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        margin-top: -19px;
        left: -3px;
    }
    .notificationContent .excerpt .excerptAvWrap img {
        border-radius: 50%;
        max-width: 32px;
        min-width: 32px;
    }

.noClickBar {
    position: absolute;
    top: 72px;
    left: 0;
    width: 100%;
    height: 8px;
    background: transparent;
    z-index: 1;
}
.newTopMenuWrap {
    position: fixed;
    top: 0;
    left: 0;
    background: #213140;
    background: -webkit-linear-gradient(to right, #213140, #203a43, #213140);
    background: linear-gradient(to right, #213140, #203a43, #213140);
    width: 100%;
    box-shadow: 0 -2px 12px 6px rgba(0,0,0,0.22);
    z-index: 999;
}
.newTopMenuWrap ul.newTopMenu {
    height: 80px; /* Height of top menu */
}
.subMenuWrapper {
    height: 32px;
    background: #dc0d8a;
}
.subMenuWrapper ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.subMenuWrapper ul li {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    height: 100%;
    padding: 0;
}
.subMenuWrapper ul li a {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    padding: 0 16px;
    font-weight: normal;
}
.subMenuWrapper ul li.selected {
    background: #fff;
    color: #213140;
}
    .subMenuWrapper ul li:hover a {
        background: rgba(255, 255, 255, 0.3);
    }

    .subMenuWrapper ul li.selected a {
        color: #213140;
        font-weight: 500;
    }
.newTopMenuWrap a {
    font-weight: 500;
    color: #ffffff;
}
.newTopMenuWrap a:hover {
    text-decoration: none;
}
ul.newTopMenu {
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    padding: 0;
}
ul.newTopMenu,
.subMenuWrapper > div:first-child {
    max-width: 1200px;
    margin: 0 auto;
    height: 100%;
    position: relative;
}
.mobileMenuPop .themeToggle {
    margin-bottom: 24px;
}
.subMenuWrapper .themeToggle {
    position: absolute;
    right: 0;
    top: 10px;
    width: 80px;
}
.subMenuWrapper .themeToggle label span.ball {
    width: 12px;
    height: 12px;
}
.subMenuWrapper .themeToggle label span.bar {
    background: rgba(255, 255, 255, 0.4);
    }
ul.newTopMenu > li {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    flex: 0;
    height: 100%;
    position: relative;
}
ul.newTopMenu > li > a {
    white-space: nowrap;
}
ul.newTopMenu > li.expand {
    flex:3;
}
li.expand2 {
    flex: 1.3 !important;
}
    ul.newTopMenu > li:first-child {
        min-width: 75px;
        justify-content: flex-start;
    }

ul.newTopMenu > li:first-child img:first-child {
    margin-right: 12px;
}
ul.newTopMenu > li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 16px;
}
ul.newTopMenu > li > a:hover,
ul.newTopMenu > li.hovered > a {
    background: #34485c;
}
ul.newTopMenu > li:first-child a:hover,
ul.newTopMenu > li:last-child a:hover {
    background: transparent;
}
ul.newTopMenu > li.selected > a {
    background: #dc0d8a;
}

/* Register/login */
ul.newTopMenu .loggedOut {
    text-align: center;
    display: flex;
    line-height: 100%;
}
.expand.logoutView {
    justify-content: flex-end;
    padding-right: 16px;
    min-width: 160px;
    max-width: 160px;
}
ul.newTopMenu .loggedOut a {
    display: flex;
    justify-content: center;
    align-items: center;
}
ul.newTopMenu .loggedOut a.register {
    padding: 8px 22px;
    margin-bottom: 2px;
}
ul.newTopMenu .loggedOut a.login {
    font-size: 0.85rem;
    margin-left: 4px;
}
ul.newTopMenu .loggedOut a.login:hover {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 1);
}

/* Logged in */
ul.newTopMenu .loggedIn {
    display: flex;
    height: 100%;
}
ul.newTopMenu .loggedIn > div {
    flex: 1;
    display: flex;
    height: 100%;
}
ul.newTopMenu .menuNotificationBellWrap {
    height: 100%;
}
ul.newTopMenu .menuNotificationBellWrap label {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
}
        ul.newTopMenu .menuNotificationBellWrap label img {
            filter: brightness(1) invert(1);
            opacity: 0.3;
        }

            ul.newTopMenu .menuNotificationBellWrap label img.unreadNotifications {
                filter: none;
                opacity: 1;
                animation: tada infinite 1s;
            }

        ul.newTopMenu .userAvatarWrapper {
            border: 0;
            padding: 0;
        }
ul.newTopMenu .userAvatarWrapper img {
    display: block;
}
    /* Spin Construct logo*/
    ul.newTopMenu > li:first-child:hover img:first-child {
        animation: spin;
        animation-duration: 500ms;
        animation-timing-function: ease-in-out;
        animation-iteration-count: 1;
    }
@keyframes spin {
    0% {
        -webkit-transform: rotate(0) scale(1);
        transform: rotate(0) scale(1);
    }

    50% {
        -webkit-transform: rotate(180deg) scale(0.9);
        transform: rotate(180deg) scale(0.9);
    }

    100% {
        -webkit-transform: rotate(360deg) scale(1.1);
        transform: rotate(360deg) scale(1.1);
    }
}

/* Hide 2nd part top img */
@media screen and (max-width: 1075px) {
    ul.newTopMenu > li:first-child img:first-child {
        margin-right: 0;
    }
    ul.newTopMenu > li:first-child {
        flex: 0;
        justify-content: flex-start;
    }
    ul.newTopMenu > li:first-child img:last-child {
        display: none;
    }
}

ul.newTopMenu > li.mobileMenuWrap {
    display: none;
}
.mobileMenuWrap > div > label {
    display: block;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 16px;
}
#MobileMenuChecker {
    position: absolute;
    top: -100px;
}
.mobileMenuPop {

    visibility: hidden;
    position: absolute;
    top: 16px;
    right: -100%;
    border-radius: 16px;
    height: 500px;
    width: 390px;
    transition: opacity 300ms ease, right 500ms ease;
    opacity: 0;
    max-height: calc(100vh - 32px);
    box-shadow: 0 -2px 12px 6px rgba(0,0,0,0.22);
}
.mobileMenuWrap > div label + input[type=checkbox]:checked + .mobileMenuPop {
    visibility: visible;
    opacity: 1;
    right: 16px;
}
.mobilePopHead {
    height: 64px;
    display: flex;
    align-items: center;
    background: #dc0d8a;
    -webkit-border-top-left-radius: 16px;
    -webkit-border-top-right-radius: 16px;
    -moz-border-radius-topleft: 16px;
    -moz-border-radius-topright: 16px;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}
.mobilePopHead > div {
    flex: 1;
    display: flex;
    align-items: center;
    padding-left: 12px;
}
.mobilePopHead > div a {
    display: flex;
    align-items: center;
}
    .mobilePopHead > div img {
        filter: brightness(0) invert(1);
    }
    .mobilePopHead > div img:first-child {
        margin-right: 10px;
    }
.mobilePopHead > label {
    flex: 0;
    color: #fff;
    min-width: 64px;
    height: 100%;
    display: flex;
    justify-content: Center;
    align-items: center;
}
    .mobilePopHead > label img {
        filter: brightness(0) invert(1);
    }

.mobileMenuContentWrap {
    overflow-y: hidden;
    max-height: calc(100% - 64px);
    position: relative;
}
    /* Popup menu */
.subMenuPopWrap {
    width: 500px;
    position: absolute;
    top: 72px;
    left: 50%;
    margin-left: -300px;
    transition: margin-left 500ms ease;
    visibility: hidden;
    border-radius: 3px;
    z-index: 999;
    box-shadow: 0 -2px 12px 6px rgba(0,0,0,0.22);
    padding: 4px;
}
    ul.newTopMenu > li:last-child .subMenuPopWrap {
        width: 300px;
        left: auto;
        right: 0;
    }
ul.newTopMenu > li .subMenuPopWrap a.pinkButton {
    display: none;
}
        ul.newTopMenu > li:hover .subMenuPopWrap,
        ul.newTopMenu > li .subMenuPopWrap.forceOpen {
            display: block;
            visibility: visible;
            margin-left: -250px;
        }
ul.newTopMenu > li:hover .subMenuPopWrap a.pinkButton {
    display: block;
    text-align: center;
}
.subMenuPopWrap.notifications {
    width: 340px;
}

ul.newTopMenu > li:hover .subMenuPopWrap.notifications {
    margin-left: -228px;
}
.subMenuPopWrap.account {
    width: 400px;
}
ul.newTopMenu > li:hover .subMenuPopWrap.account {
    margin-left: -368px;
}
ul.newTopMenu > li:last-child:hover .subMenuPopWrap {
    visibility: hidden;
}

.subMenuPopWrap .topArrow {
    position: absolute;
    width: 18px;
    height: 18px;
    left: 65%;
    margin-left: -9px;
    top: -9px;
    transform: rotateY(0) rotate(45deg);
    z-index: 1;
}
ul.newTopMenu > li:last-child .subMenuPopWrap .topArrow {
    margin-left: 21px;
}


.subMenuPopWrap .topArrow,
.subMenuPopWrap {
    background: #efefef;
}
ul.newTopMenu > li:hover .subMenuPopWrap .topArrow {
    transition: left 500ms ease, right 500ms ease;
    left: 50%;
}
ul.newTopMenu > li:hover .subMenuPopWrap.notifications .topArrow {
    left: calc(50% + 58px);
}
ul.newTopMenu > li:hover .subMenuPopWrap.account .topArrow {
    left: calc(50% + 168px);
}

.subMenuPopWrap .subMenuContent {
    position: relative;
    z-index: 2;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
}
/* Sub menu content */
.subMenuPopWrap.products {
    width: 700px;
}
.subMenuContent {
    overflow: hidden;
}
ul.newTopMenu > li:hover .subMenuPopWrap.products {
    margin-left: -100px;
}
ul.newTopMenu > li:hover .subMenuPopWrap.products.subMenuPopWrap .topArrow {
    left: 100px;
}
.subMenuPopWrap.products .subMenuContent {
    display: flex;
    z-index: 2;
}
.subMenuPopWrap.products .subMenuContent > div:first-child {
    flex: 0;
    min-width: 230px;
    border-right: 4px solid #efefef;
    max-width: 230px;
}
    .subMenuPopWrap.products .subMenuContent > div:last-child {
        flex: 1;
        background: #fff;
        border-radius: 3px;
        overflow: hidden;
        height: 340px;
    }
.subMenuPopWrap.products .subMenuContent > div > ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.subMenuPopWrap.products .subMenuContent > div > ul li {
    margin: 0;
    padding: 0;
    border-radius: 3px;
    padding: 16px;
    position: relative;
    padding-left: 26px;
}

    .subMenuPopWrap.products .subMenuContent > div > ul li .rightArrow {
        background: #fff;
        border-right: 4px solid #efefef;
        border-top: 4px solid #efefef;
        width: 16px;
        height: 16px;
        position: absolute;
        margin-top: -8px;
        margin-right: -11px;
        transform: rotateY(0) rotate(45deg);
        border-radius: 2px;
        top: 0;
        transition: top 300ms ease;
        visibility: hidden;
        right: 0;
    }



.subMenuPopWrap.products .subMenuContent > div > ul li a {
    color: #2B2B2B;
}
    .subMenuPopWrap.products .subMenuContent > div:last-child > ul li:hover a {
        color: #dc0d8a;
    }


    .subMenuPopWrap.products .subMenuContent > div:first-child > ul li:hover,
    .subMenuPopWrap.products .subMenuContent > div:first-child > ul li.selected {
        background: #fff;
    }
    .subMenuPopWrap.products .subMenuContent > div > ul li:hover .rightArrow,
    .subMenuPopWrap.products .subMenuContent > div > ul li.selected .rightArrow {
        visibility: visible;
        top: 50%;
    }
        .menuProdHead {
            line-height: 100%;
            font-size: 1rem;
            font-weight: 500;
            font-size: 1.15rem;
            text-align: center;
            align-items: center;
        }



ul.newTopMenu > li:hover .rightArrow {
    display: block;
}

ul.newTopMenu > li .rightArrow {
    display: none;
}


.menuProdHead > div:first-child {
    flex: 0;
    min-width: 48px;
    max-width: 48px;
}
.menuProdHead > div:last-child {
    flex: 1;
    display: flex;
    text-align: center;
    font-size: 1.15rem;
    flex-direction: column;
}
            .prodImgWrap {
                border-radius: 50%;
                background: #fff;
                border: 4px solid #f8f8f8;
                padding: 2px;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 48px;
                height: 48px;
                margin: 0 auto;
                margin-top: -10px;
                margin-bottom: 4px;
            }
    .prodImgWrap img {
        opacity: 0.5;
    }
.prodDescription {
    line-height: 120%;
    font-size: 1rem;
    padding-top: 8px;
    font-weight: normal;
}
.subMenuPopWrap.products .subMenuContent > div > ul li.selected .prodImgWrap,
.subMenuPopWrap.products .subMenuContent > div > ul li:hover .prodImgWrap {
    background: #213140;
}
.subMenuPopWrap.products .subMenuContent > div > ul li.selected .prodImgWrap img,
    .subMenuPopWrap.products .subMenuContent > div > ul li:hover .prodImgWrap img {
        opacity: 1;
    }
.subMenuPopWrap.products .subMenuContent > div > ul li:hover .prodContent {
    display: block;
}

/* Grid content */
.gridMenu {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    top: 100%;
    position: absolute;
    transition: top 200ms ease, opacity 800ms ease;
    opacity: 0;
}
.gridMenu > li {
    display: flex;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 50%;
    max-width: 50%;
    height: 100%;
}
.gridMenu > li > a {
    display: flex;
    min-width: 100%;
    padding: 24px 16px;
}
.gridMenu > li > a > div:first-child {
    flex: 0;
    min-width: 45px;
    max-width: 45px;
    display: flex;
    align-items: center;
}
    .gridMenu > li > a > div:last-child {
        flex: 1;
        font-weight: 500;
        line-height: 100%;
        font-size: 1rem;
    }
.gridMenu > li > a > div:last-child span {
    font-weight: normal;
    display: block;
    padding-top: 4px;
    font-size: 0.85rem;
}
    .gridMenu > li:hover > a > div:first-child img {
        animation: flipInY 400ms 1;
    }

.mobileMenuContentWrap {
    width: 100%;
    overflow-x: hidden;
    position: relative;
    overflow-y: auto;
    background: #ffffff;
    -webkit-border-bottom-right-radius: 16px;
    -webkit-border-bottom-left-radius: 16px;
    -moz-border-radius-bottomright: 16px;
    -moz-border-radius-bottomleft: 16px;
    border-bottom-right-radius: 16px;
    border-bottom-left-radius: 16px;
}
.mobileMenuContentWrap.level2Opened {
    overflow-y: hidden;
}


    .mobileMenuContent {
    }
    .mobileMenuContent ul {
        list-style: none;
        margin: 0;
        padding: 0;
        height: 100%;
        -webkit-user-select: none; /* Safari */
        -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* IE10+/Edge */
        user-select: none; /* Standard */
    }
    .mobileMenuContent ul > li {
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: flex-end;
    }
.mobileMenuContent ul > li:last-child {
    flex-direction: column;
}
.mobileMenuContent ul > li label,
        .mobileMenuContent ul > li > a {
        flex: 1;
        padding: 16px 24px;
        line-height: 100%;
        font-weight: 500;
        color: #2B2B2B;
        font-size: 1.3rem;
        width: 100%;
    }
.mobileMenuContent ul > li > a.smallerMob {
    font-size: 1rem;
    padding-left: 72px;
}
.mobileMenuContent ul > li > a.smallerMob img {
    margin-right: 8px;
    max-width: 12px;
    
}

    .mobileMenuContent ul > li label {
        box-sizing: border-box;
    }
.mobileMenuContent ul > li > ul > li > a {
    font-size: 1.2rem;
}
.mobileMenuContent ul > li > ul > li > a > div {
    display: flex;
    align-items: center;
}
.mobileMenuContent ul > li > ul > li > a > div img {
    margin-right: 16px;
}
        .mobileMenuContent ul > li.selected > label,
        .mobileMenuContent ul > li.selected > a,
        li.rightArrowExpander {
            background: #f8f8f8;
        }
.mobileMenuContent ul > li {
    border-bottom: 1px dashed #efefef;
}
.mobileMenuContent ul > li:last-child,
    .mobileMenuContent ul > li.selected {
        border-bottom: 0;
    }
    .mobileMenuContent ul > li.selected:first-child > label,
    .mobileMenuContent ul > li.selected.rightArrowExpander {
        border-bottom: 1px dashed #efefef;
    }
    .mobileMenuContent ul > li:hover > a,
    .mobileMenuSubMenu > li:hover > div:first-child label {
        background: #f8f8f8 !important;
        color: #dc0d8a;
    }
.mobileMenuSubMenu > li:hover > div:first-child label span,
.mobileMenuContent ul > li.selected:hover a span {
    color: #2B2B2B;
}
.mobileMenuContent .loggedOut,
.mobileMenuContent .loggedIn {
    width: 100%;
    padding: 16px 8px;
}
.mobileMenuContent .loggedIn {
    margin-right: 0 !important;
    flex-direction: column;
}
li.loggedIn {
    min-width: 80px;
    max-width: 80px;
}
.mobileMenuContent .loggedIn a.pinkButton {
    width: 100%;
}
.mobileMenuContent .loggedIn span {
    font-size: 1rem;
    display: block;
    text-align: center;
}
    .mobileMenuContent .loggedOut a.login {
        color: #dc0d8a !important;
        font-size: 1rem !important;
        padding-top: 6px;
    }
.mobileMenuContent input[type=checkbox] {
    position: absolute;
    right: -1000px;
    visibility: hidden;
}
.mobileMenuContent > li {

}
.mobileMenuContent ul.mobileMenuSubMenu {
    display: none;
    width: 100%;
}
.mobileMenuContent input[type=checkbox]:checked + ul.mobileMenuSubMenu {
    display: block;
}

ul.mobileMenuSubMenu > li label span {
    font-size: 1rem;
    font-style: normal;
    font-weight: normal;
    padding-top: 5px;
}
.mobileLevel2Menu,
.mobileMenuWrap > div label + input[type=checkbox] + .mobileMenuPop .mobileLevel2Menu {
    position: fixed;
    top: 80px;
    right: -100%;
    width: 390px;
    background: #fff;
    transition: right 600ms ease;
    height: 436px;
    z-index: 5;
    overflow-y: auto;
    -webkit-border-bottom-right-radius: 16px;
    -webkit-border-bottom-left-radius: 16px;
    -moz-border-radius-bottomright: 16px;
    -moz-border-radius-bottomleft: 16px;
    border-bottom-right-radius: 16px;
    border-bottom-left-radius: 16px;
}
.subMenu2Check:checked + .mobileLevel2Menu,
.mobileMenuWrap > div label + input[type=checkbox]:checked + .mobileMenuPop .subMenu2Check:checked + .mobileLevel2Menu {
    right: 16px;
}

.mobileMenuSubMenu > li.rightArrowExpander {
    flex-direction: row !important;
}
.mobileMenuSubMenu > li.rightArrowExpander:hover > div:last-child img {
    opacity: 0.5;
    transition: opacity 300ms ease;
}
    .mobileMenuSubMenu > li.rightArrowExpander > div:first-child {
        flex: 1;
        display: flex;
        align-items: center;
    }
    .mobileMenuSubMenu > li.rightArrowExpander > div:last-child {
        flex: 0;
        min-width: 40px;
        max-width: 40px;
        text-align: right;
        padding-right: 8px;
    }

.closeExpansion {
    display: flex !important;
    align-items: center;
    background: #f8f8f8;
    padding: 16px !important;
    position: fixed;
    min-width: 390px;
    max-width: 390px;
}
.closeExpansion > div:first-child {
    flex: 1;
    color: #2B2B2B;
    font-size: 1rem;
}
.closeExpansion > div:last-child {
    flex: 0;
    min-width: 40px;
    max-width: 40px;
    text-align: right;
}
    .closeExpansion:hover img {
        opacity: 0.5;
        transition: opacity 300ms ease;
    }
.level2MenuContent {
    margin-top: 53px;
}
.level2MenuContent > ul > li a {
    display: flex;
    align-items: center;
}
.level2MenuContent > ul > li a > div:first-child {
    padding-right: 16px;
}
#NotificationLoader {
    display: none;
}
.notificationLoader {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 4;
    max-height: 500px;
    overflow-y: auto;
}
    .notificationLoader.loaded {
        height: calc(100vh - 212px);
    }
    .notificationLoader > li {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 48px;
        min-height: 48px;
        border-radius: 3px;
        background: #c0c0c0;
        display: block;
        margin-bottom: 4px;
        animation: shine 1500ms infinite;
    }
.notificationLoader.loaded > li {
    animation: none;
    height: auto;
    min-height: auto;
    line-height: 120%;
    padding: 8px;
    background: #f8f8f8;
    border-left: 6px solid #c0c0c0;
}
    .notificationLoader.loaded > li.unread {
        border-color: #dc0d8a;
    }
    .notificationLoader > li:last-child {
        margin-bottom: 0;
    }
    .notificationLoader.loaded > li .noJsNotifications {
        padding: 32px 16px;
        display: block;
    }
.notificationLoader .titleContainer {
    display: flex;
    align-items: center;
}
.notificationLoader .titleContainer > div:first-child {
    min-width: 64px;
    max-width: 64px;
}

    .notificationLoader .notificationTitle {
        font-size: 1rem;
        line-height: 120%;
        font-weight: 500;
    }
.notificationLoader .parentCat {

    font-weight: 500;
    font-size: 0.85rem;
    display: block;
}
    .notificationLoader .notificationTitle a {
        color: #dc0d8a;
        font-weight: 500;
        font-size: 1.15rem;
        display: block;
    }
    .notificationLoader .notificationDate {
        font-size: 0.85rem;
        color: #5b5e61;
        font-weight: normal;
    }
.notificationLoader .notificationContent p {
    font-size: 1rem;
    line-height: 120%;
}
    .notificationLoader .notificationContent a {
        color: #dc0d8a;
    }
    .notificationLoader .notificationContent a.notificationButton {
        border: 1px solid #dc0d8a;
        padding: 5px 10px;
        border-radius: 16px;
        margin-top: 8px;
        font-weight: 500;
        text-align: center;
        display: inline;
    }
.notificationLoader .notificationContent a.notificationButton:hover {
    color: #ffffff !important;
}

        .notificationLoader .notificationContent p:first-child {
            margin-top: 12px;
        }
.notificationLoader .founderSigs {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}
.notificationLoader .founderSigs span {
    font-style: italic;
    font-size: 0.85rem;
}
.notificationLoader .founderSigs > div:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
}
    .notificationLoader .founderWrap {
        max-width: 64px;
        max-height: 64px;
        border-radius: 50%;
    }
.notificationLoader .founderWrap img {
    border-radius: 50%;
}

    @keyframes shine {
        10% {
        opacity: 1;
        top: -30%;
        left: -30%;
        transition-property: left, top, opacity;
        transition-duration: 0.7s, 0.7s, 0.15s;
        transition-timing-function: ease;
    }
    100% {
        opacity: 0;
        top: -30%;
        left: -30%;
        transition-property: left, top, opacity;
    }
}

#NotificationPopMenu .seeAll {
    width: 100%;
    border-radius: 3px !important;
    margin-top: 4px;
}
.notificationsHeader {
    display: flex;
    align-items: center;
    padding: 8px;
}
    .notificationsHeader > div:first-child {
        flex: 1;
        line-height: 100%;
    }
    .notificationsHeader > div:last-child {
        min-width: 80px;
        max-width: 80px;
        align-self: stretch;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
        .notificationsHeader > div:last-child a {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            text-align: right;
        }
.notificationsHeader > div:last-child img {
    display: block;
}
.notificationsHeader h3 {
    margin: 0;
    padding: 0;
    line-height: 100%;
    font-size: 1.15rem;
}
    .notificationsHeader span {
        font-size: 1rem;
        margin: 0;
        padding: 0;
        line-height: 100%;
    }
.notificationsHeader > div:last-child a:first-child:hover img {
    animation: tada 1200ms infinite;
}
.notificationsHeader > div:last-child a:last-child:hover img {
    animation: spin 1200ms infinite;
}
.noJsNotifications {
    font-size: 1rem;
    text-align: center;
    line-height: 120%;
    padding: 32px 0;
    font-weight: 500;
    font-style: italic;
}
.subMenuAdjuster {
    height: 32px;
}
.subMenuAdjuster.noSubMenu {
    margin-top: -32px;
}

.additionalSubMenuControlWrap {
    display: none;
    width: 100%;
    height: 100%;
    align-items: center;
}
.additionalSubMenuControlWrap > label {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    color: #ffffff;
    padding-left: 16px;
    font-weight: 500;
}
.additionalSubMenuControlWrap > label img {
    margin-right: 12px;
}
#AdditionalSubMenu {
    position: absolute;
    left: -1000px;
}

.additionalSubMenuWrapper {
    display: none;
}
.additionalSubMenuInner {
    background: #f8f8f8;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 350px;
    height: 100%;
    display: none;
    overflow-y: auto;
}
.additionalSubMenuBGCloser {
    background: rgba(0, 0, 0, 0.6);
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: calc(100% - 350px);
    display: none;
}
.additionalSubMenuControlWrap input[type=checkbox]:checked + .additionalSubMenuWrapper {
    display: block;
    position: fixed;
    top: 122px;
    left: 0;
    width: 100vw;
    height: calc(100vh - 122px);
    z-index: 99;
}
    .additionalSubMenuControlWrap input[type=checkbox]:checked + .additionalSubMenuWrapper .additionalSubMenuBGCloser,
    .additionalSubMenuControlWrap input[type=checkbox]:checked + .additionalSubMenuWrapper .additionalSubMenuInner {
        display: block;
    }

.additionalSubMenuInner h3 {
    font-family: roboto;
    font-weight: 500;
    font-size: 1.2rem;
    margin: 0;
    padding: 0;
    background: #ffffff;
    padding: 5px 15px;
}
.additionalSubMenuInner > ul {
    display: block;
    height: auto;
}
.additionalSubMenuInner > ul > li {
    display: block;
}
.additionalSubMenuInner > ul > li a {
    justify-content: flex-start;
    font-size: 1.2rem;
    padding: 5px 15px;
    color: #2B2B2B;
    transition: all 300ms ease;
    border-bottom: 1px dashed #c0c0c0;
}
.additionalSubMenuInner > ul > li a img {
    margin-right: 12px;
    width: 26px;
    height: 26px;
    opacity: 0.2;
}
.additionalSubMenuInner > ul > li:first-child a {
    border-top: 1px dashed #c0c0c0;
}
.additionalSubMenuInner > ul > li a:hover {
    color: #dc0d8a;
    background: #f8f8f8;
}
.additionalSubMenuInner > ul > li a:hover img {
    filter: invert(13%) sepia(95%) saturate(7087%) hue-rotate(317deg) brightness(95%) contrast(101%);
    opacity: 1;
}
#AdditonalSubMenuSearchQueryWrapper {
    width: 100%;
    max-width: 283px;
    padding-right: 2px;
    height: 42px;
    padding-top: 1px;
    padding-left: 42px;
}
#AdditonalSubMenuSearchQueryWrapper input[type=submit]{
    position: absolute;
    top: -1000px;
}
    #AdditonalSubMenuSearchQueryWrapper > div {
        display: flex;
        padding-top: 2px;
        justify-content: flex-end;
    }
#AdditionalSubMenuSearchQuery {
    padding: 0;
    margin: 0;
    height: 36px;
    border: 0;
    width: 100%;
    border-radius: 3px;
    line-height: 36px;
    padding-left:36px;
    font-size: 0.85rem;
    background: rgba(255, 255, 255, 0.5);
}
#AdditionalSubMenuSearchQuery::placeholder {
    color: #666;
}
    #AdditionalSubMenuSearchQuery:focus {
        background: rgba(255, 255, 255, 1);
        border: 0 !important;
        padding-left: 6px;
    }
img.additonalMenuSearchIco {
    margin-right: -30px;
}
img.additionalMenuDownArrow {
    filter: brightness(1) invert(1);
    animation: flipInX 600ms 1;
    margin-left: 3px;
    margin-right: 15px !important;
}
.additionalSubMenuControlWrap > label img:nth-child(2) {
    display: none;
}

.additionalMobileMenuLevel2 {
    position: fixed;
    top: 122px;
    left: 0;
    height: calc(100vh - 122px);
    width: 100%;
    max-width: 350px;
    background: #f8f8f8;
    display: block;
    left: -400px;
    transition: left 300ms ease;
}
.additionalMobileMenuLevel2 h3 {
    border-bottom: 1px dashed #c0c0c0;
}
    .additionalMobileMenuLevel2 > ul {
        display: block;
        height: auto;
    }
.additionalMobileMenuLevel2 > ul > li {
    display: block;
    height: auto;
}
.additionalSubMenuInner > ul > li input[type=checkbox] {
    position: absolute;
    left: -1000px;
}
.additionalSubMenuInner > ul > li input[type=checkbox]:checked + .additionalMobileMenuLevel2 {
    left: 0;
}
.subMenuLevel2CloseWrap img {
    width: 12px;
    height: 12px;
}
.subMenuLevel2CloseWrap label {
    background: #efefef;
    display: flex;
    padding: 8px 16px;
    align-items: center;
    font-weight: 500;
    font-size: 1rem;
}
.subMenuLevel2CloseWrap label > div:first-child {
    flex: 1;
}
.subMenuLevel2CloseWrap label > div:last-child {
    flex:0;
    min-width: 32px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.paymentMethodsImgWrap {
    text-align: center;
    margin-bottom: 16px;
    margin-top: 16px;
}

.mobileMenuBasketWrapper {
    max-width: 80%;
    margin: 16px auto;
}

.mobileMenuBasketSummary {
    display: flex;
    border: 1px dashed #c0c0c0;
    border-radius: 3px;
    align-items: center;
    color: #2B2B2B;
    padding: 8px;
}
.mobileBasketTotalItems {
    font-size: 1.2rem;
}
.mobileMenuBasketSummary > div:first-child {
    line-height: 100%;
    display: flex;
    align-items: center;
    padding: 0 12px;
}
.mobileMenuBasketSummary > div:last-child {
    color: #2B2B2B;
    line-height: 120%;
}
.mobileMenuBasketLinks {
    display: flex;
}
.mobileMenuBasketLinks a {
    width: 100%;
    border-radius: 3px !important;
}
.mobileMenuBasketLinks a:first-child {
    margin-right: 1px;
}
.mobileMenuBasketLinks a:last-child {
    margin-left: 1px;
}
.mobileMenuBasketSummary img {

}
    /* Mobile menu, sync max-width to Menu.js doc click */
    @media screen and (max-width: 1000px) {
        .subMenuAdjuster {
        margin-top:-16px;
    }
        .subMenuAdjuster.additionalMobileMenu {
            margin-top: 42px;
        }
    ul.newTopMenu > li {
        display: none;
    }

    ul.newTopMenu > li.mobileMenuWrap {
        display: flex;
        min-width: 80px;
        max-width: 80px;
    }

    .noClickBar {
        display: none;
    }

    ul.newTopMenu > li:first-child {
        flex: 1;
        display: flex;
    }

    ul.newTopMenu > li > div.loggedOut {
        display: none;
    }

    .mobileMenuWrap {
        display: flex;
        justify-content: center;
        align-items: center;
        padding-right: 16px;
    }

    ul.newTopMenu > li:first-child img:first-child {
        margin-right: 12px;
    }

    ul.newTopMenu > li:first-child img:last-child {
        display: block;
    }

    .subMenuWrapper {
        display: none;
    }

    .subMenuWrapper.additionalMobileMenu {
        display: block;
        position: static;
        z-index: 1;
        height: 42px;
    }
    .subMenuWrapper.additionalMobileMenu > div {
        display: none;
    }

    ul.newTopMenu > li:hover .subMenuPopWrap.notifications {
        margin-left: -148px;
    }

    ul.newTopMenu > li:hover .subMenuPopWrap.account {
        margin-left: -288px;
    }

    ul.newTopMenu > li:hover .subMenuPopWrap.notifications .topArrow {
        left: calc(50% - 22px);
    }

    ul.newTopMenu > li:hover .subMenuPopWrap.account .topArrow {
        left: calc(50% + 88px);
    }
    .additionalSubMenuControlWrap {
        display: flex !important;
    }
}

#MarkAllNotificationsAsRead {
    display: none;
    padding-right: 5px;
}

.accountContentWrap {
    display: flex;
    padding: 0 16px;
    overflow-y: auto;
    max-height: calc(100vh - 264px);
}
.accountContentWrap > div {
    min-width: 50%;
    max-width: 50%;
}
.accountContentWrap > div:first-child {
    border-right: 1px solid #c0c0c0;
    padding-right: 16px;
}
.accountContentWrap > div:last-child {
    padding-left: 16px;
}
.accountContentWrap h4 {
    font-size: 1rem;
    margin: 0;
    padding: 0;
}
.accountContentWrap ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
    .accountContentWrap ul li {
        margin: 0;
        padding: 0;
        line-height: 100%;
    }
.accountContentWrap ul li a {
    color: #dc0d8a;
    font-size: 1rem;
    line-height: 100%;
    display: flex;
    align-items: center;
    line-height: 140%;
    font-weight: normal;
    transition: color 400ms ease;
}
.accountContentWrap ul li a:hover {
    color: rgba(236, 0, 140, 0.7);
}
.accountContentWrap ul li span:nth-child(1) {
    flex: 1;
}
        .accountContentWrap ul li span:nth-child(2) {
            background: #dc0d8a;
            color: #fff;
            font-weight: 500;
            line-height: 100%;
            font-size: 0.75rem;
            min-width: 16px;
            flex: 0;
            border-radius: 3px;
            text-align: center;
            padding: 3px;
        }
.accountContentWrap ul + h4 {
    margin-top: 16px;
}
#AccountLogoutButton {
    border-radius: 3px !important;
    margin-top: 16px;
}


.userTopMenuHeadWrap {
    display: flex;
    align-items: center;
    padding: 16px;
    position: relative;
    z-index: 5;
}
.userTopMenuHeadWrap .userAvatarWrapper {
    border-radius: 50%;
    max-width: 64px;
    min-width: 64px;
}
.userTopMenuHeadWrap .userAvatarWrapper img {
    border-radius: 50%;
    display: block;
}
.userTopMenuHeadWrap > div:first-child {
    display: flex;
    align-items: center;
}
    .userTopMenuHeadWrap > div:last-child span:first-child {
        font-size: 1rem;
        display: block;
        font-style: italic;
    }
.userTopMenuHeadWrap > div:last-child {
    padding-left: 16px;
    line-height: 120%;
}
    .userTopMenuHeadWrap > div:last-child span:last-child {
        font-size: 1.4rem;
        font-weight: 500;
        display: block;
    }


@media screen and (max-width: 800px) {
    .accountContentWrap h4 {
        font-size: 1.3rem;
    }
    .accountContentWrap {
        padding-top: 16px;
    }
    .userTopMenuHeadWrap {
        background: #f8f8f8;
    }

    .accountContentWrap ul li a {
        font-size: 1.2rem;
        padding: 4px 0;
        max-width: 230px;
    }
    .accountContentWrap ul li span:nth-child(2) {
        font-size: 1rem;
        padding: 6px;
    }
        .accountContentWrap {
        flex-direction: column;
    }

    .accountContentWrap > div {
        min-width: 100%;
        max-width: 100%;
    }

    .accountContentWrap > div:first-child {
        border-right: 0;
        padding-right: 0;
    }

    .accountContentWrap > div:last-child {
        padding-left: 0;
        margin-top: 16px;
    }

}


    @media screen and (max-width: 500px) {

        .closeExpansion {
            min-width: calc(100vw - 32px);
            max-width: calc(100vw - 32px);
        }
        .mobileLevel2Menu {
            min-width: calc(100vw - 32px) !important;
            max-width: calc(100vw - 32px) !important;
            height: calc(100vh - 112px) !important;
        }

        .mobileMenuPop {
            width: calc(100vw - 32px);
            height: calc(100vh - 48px);
        }

        .mobileMenuContent {
            height: 100%;
        }

        ul.newTopMenu > li:first-child img:first-child {
            margin-right: 0;
        }

        ul.newTopMenu > li:first-child img:last-child {
            display: none;
        }

        .subMenuPopWrap.notifications, .subMenuPopWrap.account {
            width: calc(100vw - 32px);
            max-height: calc(100vh - 104px);
            margin-left: 0 !important;
            left: auto !important;
            right: -144px;
        }

        .subMenuPopWrap.account {
            height: calc(100vh - 104px);
            right: -64px;
        }


        ul.newTopMenu > li .subMenuPopWrap.notifications .topArrow,
        ul.newTopMenu > li .subMenuPopWrap.account .topArrow {
            left: auto !important;
            right: 0;
        }

        ul.newTopMenu > li:hover .subMenuPopWrap.notifications .topArrow {
            right: 175px;
        }

        ul.newTopMenu > li:hover .subMenuPopWrap.account .topArrow {
            right: 95px;
        }

        .notificationLoader.loaded {
            max-height: calc(100vh - 212px);
        }
    }

.resourcesChunk {
    border-radius: 3px;
    padding: 16px;
    position: relative;
    z-index: 5;
}

.resourcesChunk:hover {
    background: #f8f8f8;
}
    .resourcesChunk + .resourcesChunk {
        margin-top: 4px;
    }
.resourcesChunk ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.resourcesChunk ul li {
    margin: 0;
    padding: 0;
    min-width: 50%;
    max-width: 50%;
}
.resourcesChunk ul li:nth-child(odd) {
    padding-right: 16px;
}
.resourcesChunk ul li:nth-child(even) {
    padding-left: 16px;
}
    .resourcesChunk ul li a {
        font-size: 1rem;
        display: flex;
        align-items: center;
        color: #2B2B2B;
        padding: 3px;
        line-height: 120%;
        font-weight: 500;
    }
.resourcesChunk ul li a:hover {
    color: #dc0d8a;
    background: #efefef;
    border-radius: 3px;
}
.resourcesChunk ul li a img {
    margin-right: 12px;
    padding-left: 6px;
    opacity: 0.2;
}
        .resourcesChunk ul li a:hover img {
            filter: invert(13%) sepia(95%) saturate(7087%) hue-rotate(317deg) brightness(95%) contrast(101%);
            opacity:1;
        }
    .resourcesChunk h3, .resourcesChunk h2 {
        font-family: roboto;
        font-size: 1.3rem;
        font-weight: 500;
        margin: 0;
        display: block;
        padding: 0;
        margin-bottom: 8px;
        text-transform: none;
        transition: color 300ms ease;
        display: flex;
        align-items: center;
        border-bottom: 1px dashed #c0c0c0;
        padding-bottom: 4px;
    }
    .resourcesChunk h3 {
        color: #333;
        margin-top: 8px;
        font-size: 1rem;
        margin-bottom: 0;
        border-bottom: 1px dashed #c0c0c0;
        margin-bottom: 6px;
    }
        .resourcesChunk li.single {
            min-width: 100%;
            max-width: 100%;
            padding-left: 0 !important;
            padding-right: 0 !important;
        }
    .resourcesChunk:hover h2, .resourcesChunk:hover h3 {
        color: #dc0d8a;
    }
.deprecatedProduct {
    margin-left: 12px;
    background: #efefef;
    color: #2B2B2B;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    line-height: 100%;
    padding: 3px 15px;
}
.resourcesChunk ul.largeResourceChunk li a {
    display: block;
    text-align: center;
    padding: 8px;
    border: 1px dashed #c0c0c0;
    background: #f8f8f8;
    border-radius: 12px;
}
.resourcesChunk ul.largeResourceChunk li a span {
    display: block;
}
.resourcesChunk ul.largeResourceChunk li a span:first-child {
    font-weight: 500;
    font-size: 1.15rem;
    margin-bottom: 12px;
}
.resourcesChunk ul.largeResourceChunk li a span:last-child {
    font-weight: normal;
    margin-top: 8px;
}
.bettBanner {
    text-decoration: none !important;
    line-height: 120%;
    align-items: center;
    justify-content: center;
    display: flex;
    background: #29c44e;
    padding: 16px;
    -webkit-border-bottom-right-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-bottomright: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}
.bettBanner span {
    display: block;
    color: #fff;
    font-size: 1rem;
}
.bettBanner span:first-child {
    font-size: 1.2rem;
}
.bettBanner > div:first-child {
    padding-right: 32px;
}

ul.topMenuSocial {
    display: flex;
    flex-wrap: wrap;
}
ul.topMenuSocial > li {
    min-width: 64px;
    max-width: 64px;
    padding: 0 !important;
    margin: 0 !important;
}
ul.topMenuSocial > li:hover a {
    background: transparent !important;
}
ul.topMenuSocial > li a img {
    border-radius: 50% !important;
    opacity: 1;
}
ul.topMenuSocial > li:hover a img {
    filter: none !important;
}
.subMenuWrapper .inlineCount {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    line-height: 100%;
    padding: 3px;
    font-size: 0.85rem;
    border-radius: 3px !important;
    background: #bb006f !important;
}
.topMenuSaleNotice {
    display: block;
    line-height: 100%;
    font-size: 0.85rem;
    -webkit-border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -moz-border-radius-bottomright: 6px;
    -moz-border-radius-bottomleft: 6px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    padding: 3px 0 5px 0;
    text-align: center;
    position: absolute;
    top: 0;
    left: 50%;
    width: 64px;
    margin-left: -32px;
    box-shadow: rgba(0, 0, 0, 0.4) 0 2px 4px, rgba(0, 0, 0, 0.3) 0 7px 13px -3px, rgba(0, 0, 0, 0.2) 0 -3px 0 inset;
    background: #dc0d8a;
    transition: all 300ms;
}
a.topMenuStoreLink:hover .topMenuSaleNotice {
    width: 100%;
    left: 0;
    margin-left: 0;
}