@import url(https://fonts.googleapis.com/css?family=Anton&display=swap);
@import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700&display=swap);
@import url(https://fonts.googleapis.com/css?family=Rajdhani:300,400,500,600,700&display=swap);

.clear {
    clear: both;
}

.section {
    width: 100vw;
    min-height: 800px;
    position: relative;
    -webkit-clip-path: polygon(0 30px, 100% 0, 100% calc(100% - 30px), 0 100%);
    clip-path: polygon(0 30px, 100% 0, 100% calc(100% - 30px), 0 100%);
    margin: -30px 0;
    padding: 50px;
}
.section-slope_uu {
    -webkit-clip-path: polygon(0 30px, 100% 0, 100% calc(100% - 30px), 0 100%);
    clip-path: polygon(0 30px, 100% 0, 100% calc(100% - 30px), 0 100%);
}
.section-slope_du {
    -webkit-clip-path: polygon(0 0, 100% 30px, 100% calc(100% - 30px), 0 100%);
    clip-path: polygon(0 0, 100% 30px, 100% calc(100% - 30px), 0 100%);
}
.section-slope_ud {
    -webkit-clip-path: polygon(0 30px, 100% 0, 100% 100%, 0 calc(100% - 30px));
    clip-path: polygon(0 30px, 100% 0, 100% 100%, 0 calc(100% - 30px));
}
.section-slope_dd {
    -webkit-clip-path: polygon(0 0, 100% 30px, 100% calc(100% - 30px), 0 100%);
    clip-path: polygon(0 0, 100% 30px, 100% calc(100% - 30px), 0 100%);
}

.bg-exotic {        background: radial-gradient(84.54% 84.54% at 50% 50%, #23EEC4 0%, #4E75B8 100%); }
.bg-mythic {        background: radial-gradient(80.77% 80.77% at 50% 50%, #E9C144 0%, #957224 100%); }
.bg-legendary {     background: radial-gradient(82.64% 82.64% at 50% 50%, #FAA643 0%, #DE6E0E 100%); }
.bg-epic {          background: radial-gradient(79.89% 79.89% at 50% 50%, #A34DC6 0%, #8A2BE2 100%); }
.bg-rare {          background: radial-gradient(78.24% 78.24% at 50% 50%, #3AD6FF 0%, #008DD4 100%); }
.bg-uncommon {      background: radial-gradient(82.56% 82.56% at 50% 50%, #8FEE3B 0%, #016604 100%); }
.bg-common {        background: radial-gradient(79.41% 79.41% at 50% 50%, #989FA0 0%, #40464D 100%); }
.bg-black {         background: radial-gradient(84.54% 84.54% at 50% 50%, #262626 0%, #000000 100%); }
.bg-white {         background: radial-gradient(84.54% 84.54% at 50% 50%, #E6F3F8 0%, #FFFFFF 100%); }


.color-common-light {     color: #989FA0; }
.color-common-dark {      color: #40464D; }
.border-common-light {    border-color: #989FA0; }
.border-common-dark {     border-color: #40464D; }

.color-uncommon-light {   color: #8FEE3B; }
.color-uncommon-dark {    color: #016604; }
.border-uncommon-light {  border-color: #8FEE3B; }
.border-uncommon-dark {   border-color: #016604; }

.color-rare-light {       color: #3AD6FF; }
.color-rare-dark {        color: #008DD4; }
.border-rare-light {      border-color: #3AD6FF; }
.border-rare-dark {       border-color: #008DD4; }

.color-epic-light {       color: #A34DC6; }
.color-epic-dark {        color: #8A2BE2; }
.border-epic-light {      border-color: #A34DC6; }
.border-epic-dark {       border-color: #8A2BE2; }

.color-legendary-light {  color: #FAA643; }
.color-legendary-dark {   color: #DE6E0E; }
.border-legendary-light { border-color: #FAA643; }
.border-legendary-dark {  border-color: #DE6E0E; }

.color-mythic-light {     color: #E9C144; }
.color-mythic-dark {      color: #957224; }
.border-mythic-light {    border-color: #E9C144; }
.border-mythic-dark {     border-color: #957224; }

.color-exotic-light {     color: #23EEC4; }
.color-exotic-dark {      color: #4E75B8; }
.border-exotic-light {    border-color: #23EEC4; }
.border-exotic-dark {     border-color: #4E75B8; }



.header {
    z-index: 1000;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 90px;
    width: 100vw;
    height: 90px;
    background: #2A2A2A;
}
.header_padder {
    height: 90px;
    width: 100vw;
}

a.header__nav-btn {
    font-family: 'Rajdhani';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    text-align: center;
    width: 60px;
    display: block;
    margin: 0 5px;
}
a.header__nav-btn:hover {
    border-top: 5px solid #3AD6FF;
    background: rgba(58, 214, 255, 0.1);
}

.nav_icon svg {
    width: 30px;
    height: 30px;
    fill: rgba(255, 255, 255, 0.3);
}
.header__nav-btn:hover svg {
    fill: rgba(255, 255, 255, 1);
}


.user_name, .user_level {
    font-family: 'Rajdhani';
    font-style: normal;
    font-weight: 700;
    text-align: right;
    text-transform: uppercase;
}

.user_name {
    font-size: 20px;
    color: #8FEE3B;
    line-height: 20px;
}

.user_level {
    font-size: 40px;
    color: #FFD500;
    line-height: 30px;
}






.countdown {
    float: left;
    width: 300px;
    margin-left: -40px;
}
.this_season {
    float: left;
}
.past_seasons {
    float: left;
}

.countdown_clock {
    float: left;
    background-color: #6e6e6e;
    border-radius: 3px;
}
.countdown_divider {
    float: left;
    padding: 2px;
    border-radius: 3px;
    text-align: center;
    width: 10px;
    height: 40px;
    padding: 3px 0 0 0;
}
.countdown_block {
    float: left;
    background-color: #FFF;
    padding: 2px;
    border-radius: 3px;
    text-align: center;
    width: 50px;
    height: 40px;
    margin: 4px;
}
.countdown_val {
    font-size: 25px;
    line-height: 15px;
    margin: 5px 0;
}
.countdown_label {
    font-size: 10px;
}

.header__nav-link + .dropdown-menu a {
    color: #d4d4d4;
    line-height: 1;
    font-size: 16px;
    font-family: "Rajdhani", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
}

img.user_avatar {
    border: solid 3px #8BC34A;
    margin: -3px;
}

/*
.user {
    position: absolute;
    width: 184px;
    height: 246px;
}
.user:hover {
    position: absolute;
    width: 184px;
    height: 246px;
}
.user_dropdown {
    position: absolute;
    width: 184px;
    height: 246px;

    background: #2A2A2A;
}
.user_dropdown:hover {
    position: absolute;
    width: 184px;
    height: 246px;

    background: rgba(143, 238, 59, 0.1);
}

.user_subnav {
    position: absolute;
    width: 74px;
    height: 104px;

    font-family: 'Rajdhani';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
    text-align: right;

    color: #FFFFFF;
}



.Ellipse_1 {
    position: absolute;
    width: 10px;
    height: 10px;

    background: #8FEE3B;
}






.user-bg {
    box-sizing: border-box;

    position: absolute;
    width: 85px;
    height: 79px;

    background: radial-gradient(50% 50% at 50% 50%, #57A51E 0%, #287C22 100%);
    border: 5px solid #8FEE3B;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), inset 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.avatar-mask {
    position: absolute;
    width: 85px;
    height: 79px;

    background: #000000;
}

.user-avatar {
    position: absolute;
    width: 78px;
    height: 79px;

    background: url(jonesy.png);
}

.user-bg {
    box-sizing: border-box;

    position: absolute;
    width: 78.54px;
    height: 4.5px;

    border: 10px solid #8FEE3B;
}

.divider {
    position: absolute;
    width: 51px;
    height: 0px;

    border: 1px solid #5B5B5B;
    transform: rotate(90deg);
}



.countdown {
    position: absolute;
    width: 285px;
    height: 91px;
}


.Rectangle_1 {
    box-sizing: border-box;

    position: absolute;
    width: 285px;
    height: 58px;

    background: radial-gradient(65.22% 65.22% at 50% 50%, #2BAAF4 0%, #2061C6 100%) .warning: gradient uses a rotation that is not supported by CSS and may not behave as expected {;
    border: 5px solid #3AD6FF;
    box-shadow: 3px 3px 25px rgba(0, 0, 0, 0.3);
}

.countdown_timer {
    position: absolute;
    width: 253px;
    height: 64px;

    font-family: 'Rajdhani';
    font-style: normal;
    font-weight: 700;
    font-size: 50px;
    line-height: 64px;

    color: #FFFFFF;
}


.Rectangle_2 {
    position: absolute;
    width: 122px;
    height: 29px;

    background: #3AD6FF;
}

.THIS_SEASON {
    position: absolute;
    width: 106px;
    height: 26px;

    font-family: 'Rajdhani';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;

    color: #2167CA;
}


.PAST_SEASONS {
    position: absolute;
    width: 122px;
    height: 26px;

    font-family: 'Rajdhani';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;

    color: #FFFFFF;
}


.logo {
    position: absolute;
    width: 178px;
    height: 46px;

    background: url(image.png);
}

*/