#wrapper.index-page #nav-static .nav-menu-links > a {
    color: #fff;
}
#wrapper.index-page #nav-static .nav-menu-links > a:hover {
    color: #7dff1f;
}
#wrapper.index-page #nav-static > .nav-logo {
    background-image: url('/images/logo_white.svg');
}
#wrapper.index-page #nav-static > .nav-sandwich-menu-button {
    background-image: url('/images/sanvich-menu-ico-white.png');
}
#wrapper.index-page #nav-static {
    border-bottom: none;
}

#nav-static .nav-menu-links > a {
    vertical-align: middle;
}
.nav-menu,
.nav-menu-links > a {
    display: inline-block;
    font-size: 16px;
    vertical-align: top;
}
#nav-static > .nav-menu.device-version {
    z-index: 0;
    top: 86px;
    right: 0;
    width: 100%;
    height: 0;
    transition: height 0.7s ease 0s;
}
.nav-menu {
    text-align: justify;
    min-width: 100%;
    color: #fff;
}
.nav-menu:after {
    width: 100%;
    height: 0;
    visibility: hidden;
    overflow: hidden;
    content: "";
    display: inline-block;
}
.nav-menu-links {
    display: inline;
    vertical-align: top;
    cursor: default;
}
.nav-menu-links:before {
    width: 150px;
    height: 0;
    visibility: hidden;
    overflow: hidden;
    content: "";
    display: inline-block;
}
.nav-menu-links > a {
    padding: 0 1%;
    color: #474747;
}
.nav-menu-links > a + a {
    padding: 0 1%;
}
.nav-menu-links > a:hover {
    color: #7dff1f;
}
.nav-btns {
    display: inline-block;
    min-width: 80px;
    margin-top: -9px;
}
.nav-btns > a {
    font-weight: 400;
    display: inline-block;
    padding: 10px 15px 12px;
    border-radius: 2px;
}
.nav-btns > div {
    position: relative;
}
#nav-static > .nav-btn,
#nav-fixed-menu > .nav-btn {
    position: absolute;
    display: none;
    top: 25px;
    right: 83px;
    margin: 0;
    padding: 10px 15px 12px;
    border-radius: 2px;
    font-weight: 400;
}
#nav-fixed-menu > .nav-btn {
    top: 10px;
}
.nav-btn,
.nav-btn-sign-on {
    border: 1px solid #67ce1d;
}
.nav-btn {
    margin-right: 15px;
    background-color: #67ce1d;
    color: #fff;
}
a.nav-btn-sign-on {
    font-family: 'Open Sans', sans-serif;
    color: #67ce1d;
}
.nav-btn:hover,
.nav-btn-sign-on:hover {
    border: 1px solid #6bd61e;
    background-color: #6bd61e;
    color: #fff;
}
.nav-user-logged {
    position: absolute;
    right: 0;
    padding-right: 10px;
    font-size: 0;
}
.nav-user-logged > * {
    font-size: 16px;
}
.nav-btns > svg,
.nav-user-logged > svg {
    position: relative;
    display: inline-block;
    top: -4px;
    right: 14px;
    vertical-align: top;
    cursor: pointer;
    animation: promo 5s ease 5s infinite;
    -webkit-animation: promo 5s ease 5s infinite;
}
.nav-btns > svg {
    top: 5px;
}
#nav-static > svg {
    position: absolute;
    display: none;
    top: 28px;
    right: 68px;
    animation: promo 5s ease 5s infinite;
    -webkit-animation: promo 5s ease 5s infinite;
}
.nav-btns > svg,
.nav-user-logged > svg,
#nav-static > svg {
    opacity: 1;
    visibility: visible;
    transition: .2s;
}
.nav-btns > svg.hidden,
.nav-user-logged > svg.hidden,
#nav-static > svg.hidden {
    opacity: 0;
    visibility: hidden;
}
.nav-user-logo {
    position: relative;
    display: inline-block;
    margin-top: -15px;
    border-radius: 100%;
    overflow: hidden;
    height: 48px;
    width: 48px;
    margin-right: 6px;
    cursor: pointer;
}
.nav-user-logged .notification-icon {
    display: none;
    width: 14px;
    height: 14px;
    position: absolute;
    right: 15px;
    top: -15px;
    border-radius: 50%;
    background: #FFF;
}
.nav-user-logged .notification-icon.show {
    display: block;
}
.nav-user-logged .notification-icon::before {
    content: '';
    width: 10px;
    height: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #F0251E;
    border-radius: 50%;
}
.nav-popover-content .notification-icon {
    width: 8px;
    height: 8px;
    left: 30px;
    top: 10px;
}
.nav-popover-content .notification-icon::before {
    content: '';
    width: 6px;
    height: 6px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #F0251E;
    border-radius: 50%;
}
.nav-user-logo:before,
.nav-popover-user-logo:before {
    content: attr(data-nickname);
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    font-size: 20px;
    text-align: center;
    line-height: 48px;
    cursor: pointer;
}
#nav-fixed .nav-user-logo:before {
    font-size: 16px;
    line-height: 40px;
}
.nav-user-logo > img {
    position: relative;
    height: 100%;
    width: 100%;
}
.nav-user-logo > img[src=""],
.nav-popover-user-logo > img[src=""] {
    display: none;
}
.nav-popover:before,
.nav-popover-arrow:before,
.nav-popover-content:before,
.nav-popover:after,
.nav-popover-arrow:after,
.nav-popover-content:after {
    box-sizing: border-box;
}
.nav-popover {
    position: absolute;
    width: 192px;
    right: 10px;
    top: 45px;
    text-align: left;
    background-color: #fff;
    white-space: normal;
    color: #797979;
    box-shadow: 0 3px 9px 0 rgba(0, 0, 0, .15);
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transition: .2s;
}
.nav-user-logo:focus + .nav-popover {
    opacity: 1;
    visibility: visible;
}
.nav-popover > .nav-popover-arrow {
    border-width: 10px;
}
.nav-popover > .nav-popover-arrow:after {
    border-width: 10px;
}
.nav-popover > .nav-popover-arrow,
.nav-popover > .nav-popover-arrow:after {
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    position: absolute;
}
.nav-popover.bottom > .nav-popover-arrow {
    top: -10px;
    left: 174px;
    margin-left: -11px;
    border-top-width: 0;
}
.nav-popover.bottom > .nav-popover-arrow:after {
    top: 1px;
    margin-left: -19px;
    content: " ";
    border-top-width: 0;
    border-bottom-color: #fff;
}
.nav-popover-content {
    background-color: #ddd;
}
.nav-popover-content > a {
    display: block;
    width: 100%;
    box-sizing: border-box;
    background-color: #fff;
    font-size: 12px;
    font-weight: 400;
    color: #3d95cc;
    transition: .3s;
}
.nav-popover-content > a:hover {
    background-color: #e8f4ff;
    cursor: pointer;
}
.nav-popover-content > a > div,
.nav-popover-content > a > div > span,
.nav-popover-content > a > svg {
    vertical-align: middle;
}
.nav-popover-content > a > div {
    display: inline-block;
    max-width: 127px;
    white-space: nowrap;
    font-size: 0;
}
.nav-popover-content > a > div > span {
    font-size: 12px;
    white-space: normal;
}
.nav-popover-content > a > div:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.nav-popover-content > a > svg {
    margin-right: 5px;
}
.nickname-info {
    display: inline-block;
    font-weight: 400;
    font-size: 14px;
    line-height: 19px;
    color: black;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nav-popover-user-logo {
    position: relative;
    height: 200px;
}
.nav-popover-user-logo > img {
    position: relative;
    width: 100%;
    height: 100%;
}
.nav-popover-user-logo:before {
    font-size: 30px;
    line-height: 200px;
    cursor: default;
}
.nav-popover-user-info {
    position: relative;
    height: 65px;
    padding: 0 16px 0 15px;
    box-sizing: border-box;
    font-size: 0;
    white-space: nowrap;
}
.nav-popover-user-info:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.nav-popover-user-info:after {
    content: '';
    position: absolute;
    height: 5px;
    width: 100%;
    bottom: 0;
    left: 0;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#001757+0,002556+100&0+0,1+100 */
    background: -moz-linear-gradient(top, rgba(0,23,87,0) 0%, rgba(0,37,86,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0,23,87,0) 0%,rgba(0,37,86,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(0,23,87,0) 0%,rgba(0,37,86,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00001757', endColorstr='#002556',GradientType=0 ); /* IE6-9 */
    opacity: 0.04;
}
.nav-popover-user-info .nav-popover-nickname-alevel, .nav-popover-user-info .nav-popover-nickname-flair {
    display: none;
}
.nav-popover-user-info .nav-popover-nickname-alevel.show, .nav-popover-user-info .nav-popover-nickname-flair.show {
    display: inline-block;
}

.nav-popover-nickname-flair.show {
    width: 18px;
    height: 18px;
    vertical-align: super;
}

.nav-popover-user-info > div {
    display: inline-block;
    width: 100%;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
}
.nav-popover-user-info > div > img {
    display: none;
    max-height: 19px;
    line-height: 19px;
}
.nav-popover-user-info > div > img:first-child {
    padding: 3.5px 0;
    margin-right: 5.6px;
}
.nav-popover-user-info > div > img:first-child + img {
    margin-right: 4.6px;
}
.nav-popover-user-info > div > img.show {
    display: inline-block;
}
.nav-popover-settings {

}
.nav-popover-to-profile {
    padding: 3px 16px 7px 11px;
    border-top: 5px solid #fff;
}
.nav-popover-to-profile > span:before {
    height: 18px;
    margin-top: -3px;
    background-position: 0 -39px;
}
.nav-popover-settings {
    padding: 8px 16px 3px 11px;
}
.nav-popover-share-earn {
    padding: 8px 16px 7px 11px;
}
.nav-popover-buy-coins {
    position: relative;
    padding: 5px 16px 5px 11px;
}
.nav-popover-buy-coins > div > span:before {
    height: 18px;
    margin-top: -3px;
    background-position: 0 -80px;
}
.nav-popover-buy-coins > div > span > span + span {
    max-width: 65px;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #595959;
    position: absolute;
    right: 16px;
    top: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nav-popover-settings > div > span:before {
    height: 16px;
    margin-top: -2px;
    background-position: 0 -120px;
}
.nav-popover-sign-out {
    margin-top: 1px;
    border-top: 5px solid #fff;
}
.nav-popover-sign-out > div >  span:before {
    height: 15px;
    margin-top: -2px;
    background-position: 0 -162px;
}
.nav-popover-content > a.nav-popover-sign-out {
    border-top: 5px solid #fff;
    border-bottom: 5px solid #fff;
    padding: 6px 16px 5px 11px;
    color: #595959;
}
.nav-sandwich-menu-button {
    height: 23px;
    width: 24px;
    background-image: url('/images/sanvich-menu-ico-gray.png');
    background-repeat: no-repeat;
    background-color: transparent;
    display: none;
    float: right;
    margin-top: -3px;
    cursor: pointer;
    outline: none;
}

/* Navigation fixed menu */
#nav-fixed {
    position: fixed;
    display: block;
    height: 60px;
    width: 100%;
    top: 0;
    left: 0;
    font-family: 'Open Sans', sans-serif;
    background-color: #fff;
    box-shadow: 0 1px rgba(0, 0, 0, .15), 0 2px rgba(0, 0, 0, .05);
    opacity: 0;
    visibility: hidden;
    z-index: 1;
    transition: .2s;
}
#nav-fixed.show {
    opacity: .95;
    visibility: visible;
}
#nav-fixed .nav-menu-links > a {
    vertical-align: middle;
}
#nav-fixed .nav-btns > a {
    font-size: 14px;
}
#nav-fixed .nav-user-logo {
    height: 40px;
    margin-top: -11px;
    width: 40px;
}
#nav-fixed  .nav-popover.bottom > .nav-popover-arrow {
    left: 178px;
}
#nav-fixed-menu {
    position: relative;
    max-width: 1300px;
    margin: auto;
    padding: 20px 30px 0;
}
#nav-fixed-menu .nav-menu-links > a {
    color: #474747;
    font-size: 14px;
}
#nav-fixed-menu .nav-menu-links > a:hover {
    color: #7dff1f;
}

/* Header */
@media screen and (max-width: 1150px) {
    .nav-btns-camfrog-phrase {
        display: none;
    }
    .nav-btn-download-for-free > span {
        display: none;
    }
}
@media screen and (min-width: 1101px) {
    #content-wrapper {
        padding-top: 0 !important;
    }
}
@media screen and (max-width: 1100px) {
    #wrapper.index-page #nav-static .nav-menu-links > a {
        color: #474747;
    }
    .nav-sandwich-menu-button {
        display: inline-block;
    }
    #nav-static > .nav-sandwich-menu-button + svg {
        display: block;
        cursor: pointer;
    }
    .nav-btns > svg {
        display: none;
    }
    #nav-static > .nav-menu {
        top: 60px;
    }
    #nav-static .nav-menu-links > a {
        margin-top: 0;
    }
    .nav-menu {
        position: absolute;
        display: inline-block;
        min-width: 200px;
        top: 56px;
        right: 30px;
        margin-left: 0;
        background-color: #fff;
        box-shadow: 0 1px 15px rgba(0, 0, 0, .1);
        overflow: hidden;
        z-index: 1;
        opacity: 0;
        visibility: hidden;
        transition: .2s;
    }
    .nav-menu:after {
        display: none;
    }
    .nav-sandwich-menu-button:focus ~ .nav-user-logged,
    .nav-sandwich-menu-button:focus ~ .nav-menu {
        opacity: 1;
        visibility: visible;
    }
    .nav-menu > div {
        display: block;
    }
    #nav-static > .nav-btn,
    #nav-fixed-menu > .nav-btn {
        display: inline-block;
    }
    .nav-btn-download-for-free > span {
        display: inline;
    }
    .nav-menu-links > a,
    .nav-btns > a + a {
        display: block;
        font-size: 14px;
        padding: 10px 20px;
        color: #474747;
        line-height: normal;
        background-color: transparent;
        border: none;
        font-weight: inherit;
        margin: 0;
        box-sizing: content-box;
    }
    .nav-btns > a:first-child {
        display: none;
    }
    .nav-btns {
        padding-right: 0;
        padding-top: 0;
        margin-top: 0;
    }
    .nav-btns > a + a {
        height: 20px;

    }
    .nav-menu-links:before {
        display: none;
    }
    .nav-menu-links > a + a {
        padding: 10px 20px;
    }
    .nav-menu-links > a:hover,
    .nav-btns > a + a:hover {
        background-color: transparent;
        border: none;
        color: #7dff1f;
    }
    .nav-btns-camfrog-phrase {
        display: inline;
    }
    .nav-user-logged {
        position: relative;
        float: right;
        margin-bottom: -30px;
    }
    #nav-fixed .nav-btn-sign-on:hover {
        border: none;
        background-color: transparent;
        color: #7dff1f;
    }
}

@media screen and (max-width: 600px) {
    .nav-btn-download-for-free > span {
        display: none;
    }
}

@keyframes promo {
    0% {
        transform: rotate(0deg);
    }
    10% {
        transform: rotate(180deg);
    }
    20%, 100% {
        transform: rotate(360deg);
    }
}
@-webkit-keyframes promo {
    0% {
        -webkit-transform: rotate(0deg);
    }
    10% {
        -webkit-transform: rotate(180deg);
    }
    20%, 100% {
        -webkit-transform: rotate(360deg);
    }
}