header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20;
    display: block;
    width: 100%;
    height: 51px;
    border-bottom: 1px solid #191919;
    background-color: #202227 !important;
}

a.logo {
    display: block;
    float: left;
    padding-left: 36px;
    padding-left: 0;
    width: auto;
    height: 50px;
}

.guest a.logo {
    padding-left: 0;
}

a.logo img {
    height: 100%;
}

#nav_hamburger {
    position: absolute;
    top: 55px;
    left: 190px;
    z-index: 11;
    display: block;
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    background-color: rgba(255,255,255,0);
    color: #FFF;
    text-align: center;
    font-size: 16px;
    line-height: 50px;
    cursor: pointer;
}

#nav_hamburger:hover,
#nav_menu:checked ~ #nav_hamburger:hover {
    background-color: rgba(255,255,255,0.1);
}

#nav_hamburger span {
    display: none;
    margin: 4px auto 0 auto;
    width: 30px;
    height: 1px;
    background-color: #02A5DB;
    transition: all 0.3s ease-in-out;
}

#nav_hamburger span:first-child {
    margin: 17px auto 0 auto;
}

#nav_hamburger:hover span {
    background-color: #5ED4FB;
    box-shadow: 0 0 8px #02A5DB;
    transition: all 0.3s ease-in-out;
}

#nav_hamburger i {
    margin-top: 10px;
    opacity: 0.5;
}

#nav_hamburger:hover i {
    opacity: 1;
}

#nav_hamburger i.fa-step-backward {
    display: block;
}

#nav_hamburger i.fa-step-forward {
    display: none;
}

#nav_menu:checked ~ #nav_hamburger i.fa-step-backward {
    display: none;
}

#nav_menu:checked ~ #nav_hamburger i.fa-step-forward {
    display: block;
}

#nav_menu:checked ~ #nav_hamburger {
    top: 50px;
    left: 0;
    width: 50px;
    height: 40px;
}


.headerNav {
    float: right;
    height: 50px;
}

.headerNav i {
    position: relative;
    display: block;
    box-sizing: border-box;
    padding: 17px 15px 0 15px;
    height: 50px;
    font-size: 18px;
    transition: all 0.1s ease-in-out;
}

.counterBubble {
    position: absolute;
    top: 10px;
    right: 4px;
    padding: 0 4px 0 4px;
    min-width: 18px;
    height: 18px;
    border-radius: 10px;
    background-color: #D64635;
    color: #FFF;
    text-align: center;
    font-size: 10px;
    line-height: 18px;
    pointer-events: none;
}

.counterBubble.active {
    animation-name: pulse;
    animation-duration: 2s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
}


nav .navItem .counterBubble {
    right: 32px;
    z-index: 1;
}

#nav_menu:checked ~ nav .navItem .counterBubble {
    top: 10px;
    right: 32px;
}

.headerNav .nav .open > a,
.nav .open > a:focus,
.headerNav .nav .open > a:hover,
.headerNav .nav > li > a:focus,
.headerNav .nav > li > a:hover {
    background-color: #252f37 !important;
    color: #42a4bd !important;
    /* text-shadow: 0 0 8px #02A5DB; */
    transition: all 0.1s ease-in-out;
}

.headerNav .navbar-nav > li.dropdown > a {
    display: flex;
    padding: 0;
}

.headerNav .dropdown-menu {
    background-color: #01212D;
}

.dropdown.username img {
    float: left;
    margin: 13px 0 0 16px;
    height: 25px;
}

.dropdown.username .model-headshot {
    display: inline-block;
    float: left;
    margin: 11px 0 0 16px;
    width: 30px;
    height: 30px;
    border: 1px solid #444;
    border-radius: 25px;
    background-position: center;
    background-size: auto 100%;
    background-repeat: no-repeat;
}

.dropdown.username .theUser {
    display: inline-block;
    float: left;
    padding: 15px 0 0 5px;
    font-size: 13px;
}

.dropdown.flag a {
    padding-top: 5px;
    padding-bottom: 5px;
}

i.headerDropArrow {
    display: inline-block;
    margin: 0;
    padding: 17px 5px 0 6px;
}

.dropdown.flag {
    margin-right: 13px;
}

.dropdown.username > a,
.dropdown.flag > a {
    color: #aac2cb;
}

.dropdown.flag .flagIcon {
    margin-left: 10px;
}

.dropdown.flag .dropdown-menu .flagIcon {
    margin-bottom: -3px;
    margin-left: 0;
}

/* Flags */

.flags {
    padding: 14px 10px 0 20px;
}

.flagIcon {
    display: inline-block;
    width: 28px;
    height: 18px;
    background: url("/images/studio-v2/icons/flags/flags.png") no-repeat;
}

.flagIcon.language_en,
.language_en .flagIcon {
    background-position: 0 0;
}

.flagIcon.language_de,
.language_de .flagIcon {
    background-position: 0 -19px;
}

.flagIcon.language_fr,
.language_fr .flagIcon {
    background-position: 0 -38px;
}

.flagIcon.language_es,
.language_es .flagIcon {
    background-position: 0 -59px;
}

.flagIcon.language_it,
.language_it .flagIcon {
    background-position: 0 -78px;
}

.flagIcon.language_no,
.language_no .flagIcon {
    background-position: 0 -98px;
}

.flagIcon.language_ru,
.language_ru .flagIcon {
    background-position: 0 -118px;
}

.flagIcon.language_nl,
.language_nl .flagIcon {
    background-position: 0 -140px;
}

.flagIcon.language_ro,
.language_ro .flagIcon {
    background-position: 0 -203px;
}

.flagIcon.language_pt,
.language_pt .flagIcon {
    background-position: 0 -160px;
}

.flagIcon.language_se,
.language_se .flagIcon {
    background-position: 0 -182px;
}



/* Promo Drop down */

a.promoDrop {
    width: 300px;
}

.daysUntil {
    display: inline-block;
    float: left;
    box-sizing: border-box;
    padding: 5px;
    width: 80px;
    height: 55px;
    background-color: rgba(214, 70, 53, 0.3);
    text-align: center;
    font-size: 10px;
}

.nextPromo .daysUntil {
    background-color: rgba(214, 70, 53, 1);
    color: #FFF;
}

.secondPromo .daysUntil {
    background-color: rgba(214, 70, 53, 0.6);
}

.promoDrop .promoInfo {
    display: inline-block;
    float: left;
    box-sizing: border-box;
    padding: 5px;
    width: 150px;
    height: 55px;
    font-size: 10px;
}

.promoDrop .daysUntil span,
.promoDrop .promoInfo span {
    display: block;
    font-size: 10px;
    opacity: 0.8;
}


.promoDrop .daysUntil .daysLeft {
    font-size: 19px;
    opacity: 1;
}

.promoDrop .promoInfo .promoName {
    font-size: 15px;
    opacity: 1;
}

.promoDrop.nextPromo .promoInfo .promoName {
    color: #FFF;
}

.dropdown-menu i {
    display: inline-block;
    padding: 0;
    padding: 6px 0 0 4px;
    height: auto;
    font-size: 12px;
}

.notifications i,
.messages i,
.username i {
    margin-right: 5px;
    font-size: 15px;
}

.notifications a,
.messages a {
    position: relative;
}

.notifications .counterBubble,
.messages .counterBubble {
    top: auto;
    right: auto;
    margin-left: 3px;
    min-width: 15px;
    height: 15px;
    border-radius: 10px;
    font-size: 9px;
    line-height: 15px;
}


.dropdown.username .userInfo li.levelArea {
    padding: 10px;
    width: 300px;
    color: #EEE;
    font-size: 12px;
}

.dropdown.username .userInfo .levelArea img {
    float: left;
    margin: 0;
    padding-right: 10px;
    height: 60px;
    border-right: 1px solid rgba(175,175,175,0.3);
    width: auto;
}

.dropdown.username .levelInfo {
    float: left;
    padding-top: 2px;
    padding-left: 10px;
    width: 160px;
    font-size: 14px;
}

.dropdown.username .levelInfo span {
    display: block;
    padding-top: 6px;
    font-size: 12px;
}

.dropdown.username .line {
    display: block;
    margin: 8px 0 8px 0;
    height: 1px;
    background-color: rgba(175,175,175,0.3);
}

.userMoreInfo {
    text-align: center;
}

.userMoreInfo strong {
    display: block;
    padding-top: 5px;
    font-weight: 400;
    font-size: 14px;
}

.userMoreInfo div {
    margin-top: 8px;
}

.userMoreInfo div a {
    color: #EEE;
    text-decoration: underline;
}

.userMoreInfo div a:hover {
    color: #FFF;
    text-decoration: none;
}


#user_info_menu_icon {
    display: none;
}

.studioDrop {
    border: 1px solid rgba(255,255,255,0.2);
    background-color: rgba(0,0,0,0.4);
}

#header_studio_select.studio-select.form-control {
    margin-right: 1px;
    padding-right: 25px;
    height: 50px;
    border: 0;
    background-color: transparent;
    font-size: 13px;

    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

#header_studio_select.studio-select.form-control:focus {
    background-color: #FFF;
    color: #000;
}

.studio-select-header:after {
    position: absolute;
    position: absolute;
    top: 24px;
    right: 6px;
    width: 0;
    height: 0;
    border-top: 5px solid #CCC;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    content: "";
}

/*  Studios Time Display */
.display-time {
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.display-time i {
    padding: 16px 12px 0 0;
    color: #FFF;
}
.studio-est {
    margin-left: -5px;
    color: #FFF;
    font-size: 13px;
}
/* Header Promo Menu */
.dropdown-menu a.promoList,
.light-theme .dropdown-menu a.promoList,
.dark-theme .dropdown-menu a.promoList {
    border-left: 3px solid #ED1C24;
    color: rgba(255,255,255,0.9);
    white-space: nowrap;
}

.dropdown-menu a.promoList:hover,
.light-theme .dropdown-menu a.promoList:hover,
.dark-theme .dropdown-menu a.promoList:hover {
    background-color: rgba(255,255,255,0.1);
    color: rgba(255,255,255,1);
}

.dropdown-menu .dateLine {
    font-size: 12px;
}

.dropdown-menu #promo_list_header {
    padding: 5px;
    min-width: 300px;
    max-height: 300px;
}

.promo-nav .dropdown-menu li {
    margin-bottom: 0;
}

.dropdown-menu .dateLine .label.label-primary {
    color: #FFF;
    text-shadow: 0 0 10px rgba(255,255,255,0.7);
}

i.mobile-studio-user-icon {
    display: none;
}

.dropdown.username > a {
    height: 50px;
}

#notify_menu .dropdown-menu.notifications {
    box-sizing: border-box;
    padding: 4px;
    width: 300px;
}

.dropdown-menu #activity-stream a {
    display: block;
    padding: 5px;
    border-top: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.7);
    white-space: normal;
}

.dropdown-menu #activity-stream a img {
    float: left;
    width: 60px;
}

.dropdown-menu #activity-stream a span {
    color: #FFF;
}
.notifications-header {
    min-height: 100px;
    max-height: 200px;
}

/* Animations */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    70% {
        transform: scale(1);
    }
    85% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}


@media all and (max-width: 1024px) {
    a.logo {
        margin-left: 40px;
    }

    .studio-select {
        margin: 0;
        padding-left: 10px;
        width: 100%;
        height: 40px;
        background-color: #01212D;
    }

    ul.navbar-right li {
        display: block;
        float: none;
        margin-bottom: 0;
        width: 100%;
    }

    .dropdown-menu #promo_list_header {
        min-width: 0;
    }

    .studio i.mobile-studio-user-icon {
        display: inline-block;
        float: left;
    }

    .studio-select-header form {
        margin: 0;
    }

    .studio-select-header > .studio-select {
        padding-left: 10px;
        height: 40px;
    }

    .dropdown.username .theUser {
        padding-left: 0;
    }

    .search-non-mobile {
        display: none;
    }

    #user_info_menu_icon {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 89;
        display: block;
        width: 50px;
        height: 50px;
        color: #02A5DB;
        text-align: center;
        font-size: 15px;
        cursor: pointer;
        transition: all 0.3s ease-in-out;
    }

    #user_info_menu_icon:hover {
        color: #5ED4FB;
        text-shadow: 0 0 8px #02A5DB;
        transition: all 0.3s ease-in-out;
    }

    #user_info_menu_icon > i {
        margin-top: 15px;
    }

    .headerNav {
        position: fixed;
        top: 50px;
        right: -100%;
        z-index: 91;
        overflow-y: auto;
        width: 50%;
        height: calc(100% - 50px);
        background-color: #01212D;
        text-align: left;
        transition: all 0.3s ease-in-out;
    }

    .headerNav .navbar-nav {
        display: flex;
        flex-direction: column;
        margin: 0;
        width: 100%;
    }

    .studio-select-header {
        position: relative;
        order: -2;
    }

    .search-btn-header {
        order: -1;
    }

    .mobile-search-header input {
        float: left;
        box-sizing: border-box;
        margin-top: -5px;
        width: 140px;
        height: 34px;
    }

    .mobile-search-header button.btn.btn-primary {
        float: left;
        box-sizing: border-box;
        margin-top: -5px;
        width: auto;
        height: 34px;
    }

    ul.navbar-right li.search-non-mobile {
        display: none;
    }

    #user_info_menu:checked ~ .headerNav {
        right: 0;
        box-shadow: -5px 5px 3px rgba(0,0,0,0.2);
        transition: all 0.3s ease-in-out;
    }

    #user_info_menu:checked ~ #user_info_menu_icon {
        background-color: #01212D;
        color: #5ED4FB;
        text-shadow: 0 0 8px #02A5DB;
        transition: all 0.3s ease-in-out;
    }

    #user_info_menu:checked ~ #user_info_menu_close {
        display: block;
    }

    .headerNav .navbar-nav > li > a {
        border-bottom: 1px solid #01151D;
    }

    .dropdown.username img {
        margin: 13px 8px 0 11px;
    }

    header {
        text-align: center;
    }

    a.logo {
        display: inline-block;
        float: none;
        margin: 10px auto 0 auto;
        padding-left: 0;
        height: 30px;
    }

    .headerNav .mobileOnly {
        position: absolute;
        top: 15px;
        left: 50px;
        display: inline-block;
        color: #CCC;
    }

    .headerNav a:hover .mobileOnly {
        color: #FFF;
        text-shadow: 0 0 8px #02A5DB;
        transition: all 0.1s ease-in-out;
    }

    .headerNav i .counterBubble {
        right: auto;
        left: 2px;
    }

    .navbar-nav .open .dropdown-menu {
        overflow-x: hidden;
        background-color: #01151D;
    }

    .userMoreInfo {
        width: 85%;
    }

    .dropdown.flag {
        margin-right: 0;
    }

    .dropdown.username .model-headshot {
        margin: 11px 10px 0 10px;
    }
}

@media all and (max-width: 500px) {
    .headerNav {
        width: 66.6%;
    }
}


@media all and (max-width: 374px) {
    .headerNav {
        width: 100%;
    }
}