/* Button styles */
.btn-border-gray {
    height: 52px; font-size: 17px; line-height: 46px; background-color: transparent;
    border-color: #727b93; border-width: 2px; border-radius: 4px; border-style: solid;
    text-align: center; padding: 0 43px 0 43px; font-weight: 400; color: #FFF;
}
.btn-border-gray:hover { background-color: #51ded2; border-color: #51ded2; color: #0d1221; }

/* Header */
#header-filler { position: relative; height: 92px; width: 100%; background-color: #0d1221; }
#header { position: absolute; width: 100%; height: 92px; background-color: #0d1221; top: 0;  }
.sub-page #header { position: absolute;}
#header.sticky { position: fixed; height: 92px; z-index: 10; animation: header-reveal 0.5s ease; }
#header.sticky.no-anim { animation: none; }
#header.sticky.menu { animation: none; }
#header.sticky::after { display: inline-block; background-color: #1b2337; opacity: 0.5; bottom: -2px; height: 2px; position: absolute; z-index: 1; left: 0; content: ""; width: 100%; }
#header.dark { background-color: #0b101c; }

/* Remove white line when on blog */
#header.blog::after { display: none; }

#header .logo { position: absolute; top: 27px; left: 30px; z-index: 3; }
#header .logo img:first-of-type { height: 30px; }

ul.menu { position: absolute; top: 20px; z-index: 3; }
ul.menu-left { left: 240px; }
ul.menu-right { right: 30px; }
ul.menu-left li { padding: 0 12px; margin-right: 10px; border: 2px solid transparent; }
ul.menu-left li a:hover { color: #a6b7c7; }
ul.menu-left li.trade a { color: #51ded2; }
ul.menu li { display: inline-block; }
ul.menu li > a { color: white; display: inline-block; font-size: 17px; line-height: 46px; text-align: center; }
ul.menu li > a.exchange { color: #51ded2; padding: 0 12px; border: 2px solid transparent; }
ul.menu li > a.exchange:hover { color: #6dece1; }
ul.menu li > a.login { border: 2px solid transparent; margin: 0 30px; }
ul.menu li > a.login:hover { color: #a6b7c7; }
ul.menu li > a.register { border: 2px solid #727b93; border-radius: 3px; }
ul.menu li > a.register:hover { border: 2px solid #51ded2; background-color: #51ded2; color: #0d1221; }
ul.menu li > a.register.sticky { border-color: #51ded2; background-color: #51ded2; color: #0d1221; }
ul.menu li > a.register.sticky:hover { opacity: 0.8; }

/* Drop-down */
ul.menu li.drop-down {
    position: relative; cursor: pointer;
    font-size: 17px; z-index: 10;
    background: url(../img/icons-v2/dropdown-arrow.svg) no-repeat 99%;
    background-size: 13px;
}
ul.menu li.drop-down > span { padding: 16px 17px 16px 0; color: #FFF; }
ul.menu li.drop-down .itms {
    position: absolute; left: 0; top: 30px; width: 230px; padding: 5px; z-index: 10; display: none;
    background-color: #2e374e; border-radius: 3px; box-shadow: 0 5px 10px 0 rgba(11,16,28,0.35);
    column-count: 2;
}

ul.menu li.drop-down .itms { padding: 0 10px 0 10px; }
ul.menu li.drop-down:hover .itms { display: block; animation: header-dropdown-reveal 0.3s ease-in-out; }
ul.menu li.drop-down .itms > a {
    position: relative; padding: 15px 5px 15px 10px; cursor: pointer; display: block;
    line-height: 16px; color: #FFF; text-align: left;
    border-radius: 3px;
    transition: all 0.2s ease-out;
}
ul.menu li.drop-down .itms > a:hover { background-color: #1b2337; }
ul.menu li.drop-down .itms > a.selected { background: url(../img/mobile-menu-lang-sel.svg) no-repeat calc(100% - 5px) center; background-size: 10px; }
ul.menu li.drop-down .itms > a.buy-crypto { display: none; }
ul.menu li a > span.lbl {
    position: relative; display: inline-block; top: -8px; left: 3px; padding: 0 5px; height: 15px;
    color: #0b101c; font-size: 9px; line-height: 15px; background-color: #51ded2; border-radius: 5px;
}
ul.menu li a > span.lbl.lbl-new { color: #0b101c; background-color: #51ded2; }

/* Language drop-down */
ul.menu li.lang { background-size: 10px; background-position-x: calc(100% - 11px); background-position-y: 10px; padding-right: 10px; top: 1px; }
ul.menu li.lang.blog { margin-right: 10px; }
ul.menu li.lang > span { padding-left: 10px; }
ul.menu li.lang .curr-lang-icon { position: relative; display: inline-block; width: 22px; height: 22px; top: 5px; }
ul.menu li.lang .itms { width: 188px; max-height: 310px; left: -30px; column-count: initial; margin-top: 10px; }
ul.menu li.lang .itms .lang-item { position: relative; display: block; height: 50px; margin: 10px 5px 10px 0; }
ul.menu li.lang .itms .lang-item .checked { position: absolute; display: inline-block; width: 12px; height: 12px; right: 10px; top: 18px; background: url(../img/mobile-menu-lang-sel.svg) no-repeat  center; }
ul.menu li.lang .itms .lang-item > span { position: relative; display: inline-block; width: min-content; padding: 0; font-size: 17px; top: 8px; left: 15px; color: #FFF; }
ul.menu li.lang .itms .lang-item > span:hover { background-color: initial; }
ul.menu li.lang .itms .lang-item > span.selected { background: none; }
ul.menu li.lang .itms .lang-item > img { display: inline-block; position: relative; width: 22px; height: 22px; top: 13px; left: 10px; }
ul.menu li.lang .itms .lang-item:hover { background-color: #464e64; border-radius: 4px; }
ul.menu li.lang .itms .lang-item.selected { background-color: #1b2337; border-radius: 4px; }

/* Blog categories drop-down */
ul.menu li.blog.home { position: relative; display: none; margin-right: 20px; top: 1px; }
ul.menu li.blog.home > a.active { color: #51ded2; }
ul.menu li.category-list { display: none; position: relative; top: 1px; margin-right: 20px; background-size: 10px; background-position-x: calc(100% - 2px); background-position-y: 20px; }
ul.menu li.category-list > span { display: block; }
ul.menu li.category-list .itms { display: none; width: 188px; column-count: initial; margin-top: 19px; left: -10px; }
ul.menu li.category-list .itms .category-item { margin: 10px 0; }

/* Mobile apps */
ul.menu li.apps.apps { margin-left: 20px; }

ul.menu li.apps .link { position: relative; width: 24px; height: 24px; top: 6px; transition: all 0.2s; }

ul.menu li.apps .link.google-play { position: relative; width: 24px; height: 24px; top: 6px; background: url(../img/icons-v2/google-play-header-hover.svg) no-repeat; }
ul.menu li.apps .link.google-play:hover { filter: invert(0.5) sepia(1) hue-rotate(180deg) brightness(140%); }
ul.menu li.apps .link.app-store { position: relative; width: 24px; height: 24px; margin-left: 30px; top: 4px; background: url(../img/icons-v2/app-store-header.svg) no-repeat;}
ul.menu li.apps .link.app-store:hover { filter: invert(0.5) sepia(1) hue-rotate(180deg) brightness(140%);  }

/* Features drop-down */
ul.menu li.drop-down.features { background-position-x: calc(100% - 10px); background-position-y: 3px; background-size: 10px; margin-right: 0; }
ul.menu li.drop-down.features .chip-new { top: -5px; left: 4px; }
ul.menu li.drop-down.features > span { padding-right: 22px; }
ul.menu li.drop-down.features .itms { width: 200px; column-count: 1; padding: 10px; }

/* Blog search */
ul.menu li.search { position: relative; width: 20px; height: 20px; top: 5px; margin-right: 20px; }
ul.menu li.search a { width: 100%; height: 100%; }
ul.menu li.search a:hover span { display: block; }
ul.menu li.search a span {
    display: none; position: absolute; font-size: 12px; color: #FFF; padding: 5px 10px 5px 10px;
    text-align: center; background-color: #2e374e; line-height: 18px; border-radius: 3px; left: -32px;
    transition: all 0.2s ease-out; z-index: 10; cursor: default; white-space: nowrap;
}

/* Blog categories */
#header .categories {
    display: flex; width: min-content; height: 100%; padding-right: 145px;
    align-items: center; font-size: 17px; justify-content: center; margin: 0 auto;
}
#header .categories a { color: #727b93; white-space: nowrap; }
#header .categories a:not(:last-child) { padding-right: 20px; }
#header .categories a:first-of-type { color: #ffffff; }
#header .categories a.active { color: #51ded2; }
#header .categories a:hover { color: #ffffff; }

/* Mobile menu bars */
#header .menu-bars {
    display: none; width: 28px; height: 25px; right: 26px; top: calc(50% - 14px); position: absolute; opacity: 0.8;
}
#header .menu-bars .menu-bars-inner {
    position: absolute; top: 50%; width: 100%; height: 3px; background-color: rgb(166,183,198); border-radius: 4px; transition-duration: 0.075s;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
#header .menu-bars .menu-bars-inner::before {
    display: block; position: absolute; width: 100%; height: 3px; content: ""; background-color: rgb(166,183,198);
    border-radius: 4px; top: -10px; transition: top 0.075s 0.12s ease, opacity 0.075s ease;
}
#header .menu-bars .menu-bars-inner::after {
    display: block; position: absolute; width: 100%; height: 3px; content: ""; background-color: rgb(166,183,198);
    border-radius: 4px; bottom: -10px; transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

#header .menu-bars.active .menu-bars-inner { transform: rotate(45deg); transition-delay: 0.12s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
#header .menu-bars.active .menu-bars-inner::before { top: 0; opacity: 0; transition: top 0.075s ease, opacity 0.075s 0.12s ease; }
#header .menu-bars.active .menu-bars-inner::after { bottom: 0; transform: rotate(-90deg); transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }

@media (max-width: 1400px) {
    #header .categories { font-size: 16px; }
    #header .categories a:not(:last-child) { padding-right: 10px; }
}

@media (max-width: 1220px) {
    #header .categories { display: none; }
    ul.menu li.category-list { display: inline-block; }
    ul.menu li.blog.home { display: inline-block; }

    ul.menu li.apps { display: none; }
    ul.menu li.lang.blog { margin-right: 0; }
    ul.menu-left { left: 200px; }
    ul.menu.menu-left .trade { display: none; }
    ul.menu li.lang.standard { margin-right: -20px; }
    ul.menu li.buy-crypto { display: none; }
    ul.menu li.drop-down .itms > a.buy-crypto { display: block; }
}

@media (max-width: 800px) {
    #header { z-index: 10; }
    #header ul.menu { display: none; }
    #header ul.menu-right { right: 70px; }
    #header .logo { left: 20px; }
    #header .menu-bars { display: block; z-index: 10; }
}

@media (max-width: 768px) {
    #header ul.menu { display: none; }

    #header { z-index: 10; }
    #header .logo { left: 20px; }
}