body {
    overflow-x: hidden;
    background-color: #212121;
    background-image: url(../img/bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    min-height: 100vh
}

html {
    overflow-y: scroll;
    overflow-x: hidden
}

ul {
    list-style: none
}

textarea,
input,
a,
button {
    outline: none
}

body {
    font-family: montserrat, sans-serif;
    font-size: 16px;
    color: #333
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: montserrat, sans-serif;
    font-weight: 700
}

a {
    -webkit-transition: all .2s ease-in-out 0s;
    -moz-transition: all .2s ease-in-out 0s;
    -ms-transition: all .2s ease-in-out 0s;
    -o-transition: all .2s ease-in-out 0s;
    transition: all .2s ease-in-out 0s
}

a:hover,
a:visited,
a:focus,
a:active,
button:hover,
button:visited,
button:active,
button:focus;
    {
    text-decoration: none !important;
    outline: none !important
}

::selection {
    background: #000;
    color: #fff;
    text-shadow: none
}

::-moz-selection {
    background: #000;
    color: #fff;
    text-shadow: none
}

.animation-delay-100 {
    -webkit-animation-delay: .1s;
    animation-delay: .1s
}

.animation-delay-200 {
    -webkit-animation-delay: .2s;
    animation-delay: .2s
}

.animation-delay-300 {
    -webkit-animation-delay: .3s;
    animation-delay: .3s
}

.animation-delay-400 {
    -webkit-animation-delay: .4s;
    animation-delay: .4s
}

.animation-delay-600 {
    -webkit-animation-delay: .6s;
    animation-delay: .6s
}

.animation-delay-800 {
    -webkit-animation-delay: .8s;
    animation-delay: .8s
}

.animation-delay-1000 {
    -webkit-animation-delay: 1s;
    animation-delay: 1s
}

.animation-delay-2000 {
    -webkit-animation-delay: 2s;
    animation-delay: 2s
}

header {
    position: relative;
    margin: 0 auto;
    padding: 120px 0 40px
}

.logo-img {
    max-width: 500px;
    max-height: 240px;
    display: table;
    margin: 0 auto
}

.main-section {
    padding: 0 0 250px
}

.generator-main {
    position: relative;
    margin: 0 auto;
    max-width: 720px;
    border-radius: 12px;
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, .4)
}

.generator-header,
.generator-content,
.generator-footer {
    padding: 0 60px;
    position: relative
}

.generator-header-inner,
.generator-content-inner,
.generator-footer-inner {
    position: relative;
    z-index: 2
}

.generator-header {
    padding-top: 15px;
    padding-bottom: 15px
}

.generator-header {
    text-align: center;
    -webkit-border-top-left-radius: 12px;
    -webkit-border-top-right-radius: 12px;
    -moz-border-radius-topleft: 12px;
    -moz-border-radius-topright: 12px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px
}

.generator-header:before {
    content: '';
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #fff;
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%);
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5', GradientType=0);
    -webkit-border-top-left-radius: 12px;
    -webkit-border-top-right-radius: 12px;
    -moz-border-radius-topleft: 12px;
    -moz-border-radius-topright: 12px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px
}

.generator-header h1 {
    margin: 0 0 8px;
    font-size: 2.2em;
    text-shadow: 1px 1px 0 #fff;
    font-weight: 900;
    line-height: 1
}

.generator-header h2 {
    margin: 0;
    font-size: 1.6em;
    text-shadow: 1px 1px 0 #fff;
    font-weight: 400;
    line-height: 1
}

.generator-content {
    padding-top: 60px;
    padding-bottom: 30px;
    color: #fff;
    position: relative;
    z-index: 20
}

.generator-content:before {
    content: '';
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #45484d;
    background: -moz-linear-gradient(top, rgba(69, 72, 77, 1) 0%, rgba(0, 0, 0, 1) 100%);
    background: -webkit-linear-gradient(top, rgba(69, 72, 77, 1) 0%, rgba(0, 0, 0, 1) 100%);
    background: linear-gradient(to bottom, rgba(69, 72, 77, 1) 0%, rgba(0, 0, 0, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000', GradientType=0)
}

.generator-status {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    font-size: 1.2em;
    background: #fff;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #000;
    text-align: center;
    padding: 5px 10px 3px;
    color: #111;
    text-transform: uppercase;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .6)
}

.status-label {
    color: #999
}

.status-dynamic {
    font-weight: 900
}

.status-row-2,
.status-row-3 {
    display: none
}

.status-dynamic#status {
    color: #0bc069
}

.styled-label {
    text-align: center;
    color: #ccc;
    font-weight: 700;
    font-size: .8em;
    line-height: 1.4;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: 0 0 4px rgba(0, 0, 0, .9)
}

.styled-label span {
    font-weight: 700
}

.input-wrapper {
    margin-bottom: 15px;
    margin-top: 5px;
    position: relative;
    border-bottom: 2px solid rgba(0, 0, 0, .4);
    padding-bottom: 15px
}

.rel-row {
    position: relative
}

.divider {
    height: 100%;
    position: absolute;
    left: 49.85%;
    width: 2px;
    background: rgba(0, 0, 0, .4)
}

.input-wrapper i {
    position: absolute;
    left: 25px;
    top: 18px;
    color: #ccc;
    font-size: 1.6em
}

.styled-input {
    width: 100%;
    border: 2px solid #000;
    background: #fff;
    width: 100%;
    height: 60px;
    border-radius: 12px;
    text-align: left;
    font-weight: 700;
    font-size: 1.4em;
    padding: 0 5px 0 60px
}

.platform-item {
    text-align: center;
    cursor: pointer;
    color: #fff;
    border: 2px solid #333;
    border-radius: 12px;
    padding: 5px 10px 7px
}

.platform-item i {
    font-size: 5em
}

.platform-select-wrapper {
    margin-top: 22px
}

.resource-select-wrapper {
    margin-top: 10px
}

.resource-two-wrapper {
    margin-top: 10px
}

.selectric {
    z-index: 5555
}

.selectric .label {
    font-weight: 700;
    height: 50px;
    line-height: 50px;
    font-size: 1.2em;
    padding-left: 50px;
    color: #fff
}

.selectric .button {
    height: 50px;
    line-height: 50px;
    background: 0 0
}

.selectric {
    border-radius: 10px;
    background: 0 0;
    border: 2px solid #333
}

.selectric-items ul,
.selectric-items li {
    font-size: 1em
}

.resource-wrapper {
    position: relative
}

.icon-wrapper {
    position: absolute;
    left: 12px;
    top: 10px;
    width: 35px;
    z-index: 20
}

.generator-footer {
    text-align: center;
    -webkit-border-bottom-right-radius: 12px;
    -webkit-border-bottom-left-radius: 12px;
    -moz-border-radius-bottomright: 12px;
    -moz-border-radius-bottomleft: 12px;
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
    padding-top: 10px;
    padding-bottom: 10px
}

.generator-footer:before {
    content: '';
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-border-bottom-right-radius: 12px;
    -webkit-border-bottom-left-radius: 12px;
    -moz-border-radius-bottomright: 12px;
    -moz-border-radius-bottomleft: 12px;
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
    background: #fff;
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%);
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5', GradientType=0)
}

.recent-activity-content {
    position: relative;
    max-width: 400px;
    margin: 0 auto
}

.recent-activity-frame {
    overflow-y: hidden;
    position: relative
}

.recent-activity {
    height: 90px;
    overflow-y: hidden;
    width: 100%;
    overflow-x: hidden;
    display: block;
    position: relative;
    width: 100%;
    margin: 0 auto
}

#recent-activity-row {
    margin-bottom: 50px
}

div.sticky-queue {
    display: block;
    left: 0;
    top: 0;
    margin: 0;
    position: relative;
    width: 100%
}

.sticky {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 100%;
    margin: 0 auto 10px;
    padding: 5px 10px 0;
    background: rgba(0, 0, 0, .05);
    border-radius: 12px;
    font-size: 12px;
    display: none;
    position: relative
}

div.recent-activity-tab {
    padding: 7px 0 3px
}

.recent-activity-user-wrapper {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: top;
    text-overflow: ellipsis;
    text-align: center;
    height: auto;
    margin: 0 auto 10px
}

.recent-activity-user-wrapper i {
    color: rgba(0, 0, 0, .2);
    font-size: 1.4em;
    margin-right: 5px;
    position: relative;
    top: 1px
}

.activity-username {
    color: #222;
    font-size: 1.2em;
    position: relative;
    line-height: 1.2;
    top: 0;
    font-weight: 700
}

.connection-word {
    display: inline-block;
    vertical-align: top;
    font-size: 1.1em;
    position: relative;
    top: 2px;
    line-height: 1.2;
    font-weight: 700;
    color: #999;
    margin: 0 5px
}

.activity-generated-amount {
    position: relative;
    display: inline-block;
    font-size: 1.2em;
    text-align: left;
    color: #000;
    line-height: 1.2;
    vertical-align: top;
    font-weight: 900;
    padding-left: 27px
}

.recent-activity-r-item {
    display: block;
    position: relative
}

.recent-activity-r-item-2 {
    margin-top: 7px
}

.recent-activity-r-item-label {
    font-weight: 400;
    font-size: .8em;
    color: #999;
    text-transform: uppercase;
    position: relative;
    top: -1px
}

.recent-activity-r-item-1:before,
.recent-activity-r-item-2:before {
    position: absolute;
    content: '';
    height: 20px;
    width: 20px;
    left: -24px;
    top: -2px
}

.recent-activity-r-item-1:before {
    background: url(../img/resource-1-icon.png);
    background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center
}

.recent-activity-r-item-2:before {
    background: url(../img/resource-2-icon.png);
    background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center
}

.recent-activity-progress-wrapper {
    position: relative;
    bottom: -42px
}

.activity-loadbar {
    display: none;
    width: 80%;
    position: absolute;
    bottom: 0;
    left: 10%;
    background: #bbb;
    margin-top: 5px;
    margin-bottom: 15px;
    box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .5);
    -webkit-transition: all .2s ease-in-out 0s;
    -moz-transition: all .2s ease-in-out 0s;
    -ms-transition: all .2s ease-in-out 0s;
    -o-transition: all .2s ease-in-out 0s;
    transition: all .2s ease-in-out 0s;
    border-radius: 6px
}

.activity-progress-dot {
    position: absolute;
    height: 12px;
    width: 12px;
    content: '';
    border-radius: 50%;
    background: #bbb;
    display: block;
    -webkit-transition: all .2s ease-in-out 0s;
    -moz-transition: all .2s ease-in-out 0s;
    -ms-transition: all .2s ease-in-out 0s;
    -o-transition: all .2s ease-in-out 0s;
    transition: all .2s ease-in-out 0s
}

.activity-progress-dot-1 {
    left: 0;
    top: -4px
}

.activity-progress-dot-2 {
    left: 48%;
    top: -4px
}

.activity-progress-dot-3 {
    right: -2px;
    top: -4px
}

.activity-progress-dot.passed {
    background: #0bc069
}

.activity-loadbar div {
    font-size: 3px;
    text-shadow: 0 0 2px #000;
    text-indent: 9999px;
    overflow: hidden;
    background: #0bc069;
    border-radius: 6px
}

.activity-progress-label {
    position: absolute;
    text-transform: uppercase;
    color: #000;
    font-weight: 700;
    font-size: .8em;
    -webkit-transition: all .2s ease-in-out 0s;
    -moz-transition: all .2s ease-in-out 0s;
    -ms-transition: all .2s ease-in-out 0s;
    -o-transition: all .2s ease-in-out 0s;
    transition: all .2s ease-in-out 0s
}

.activity-progress-label-1 {
    top: -15px;
    left: 15%
}

.activity-progress-label-2 {
    top: -15px;
    left: 60%
}

.activity-progress-label i {
    margin-right: 3px
}

.icon-green {
    color: #0bc069
}

.sign-move {
    position: relative;
    top: 5px
}

.processing-step {
    padding: 30px 0 20px
}

.user-info-wrapper {
    padding: 10px 15px;
    text-align: center;
    border: 2px solid rgba(255, 255, 255, .3);
    border-radius: 10px
}

.u-i-u-l {
    color: #999;
    text-transform: uppercase;
    font-size: .8em;
    position: relative;
    top: -1px
}

.u-i-u-v {
    color: #fff;
    font-weight: 700
}

.u-i-u-v i {
    font-weight: 400
}

.resource-info-wrapper {
    padding: 10px 15px;
    text-align: center;
    border: 2px solid rgba(255, 255, 255, .3);
    border-radius: 10px;
    text-align: left;
    margin-top: 15px
}

.resource-info-inner {
    display: table;
    margin: 0 auto
}

.r-i-l {
    color: #999;
    text-transform: uppercase;
    font-size: .8em;
    position: relative;
    top: -1px
}

.r-i-v {
    color: #fff;
    font-weight: 700
}

.resource-info-wrapper .resource-icon {
    max-width: 23px;
    margin-right: 4px;
    position: relative;
    top: -2px
}

.console-wrapper {
    text-align: center
}

.console-message {
    font-size: 1.4em;
    font-weight: 700;
    color: #fff;
    padding-top: 45px;
    line-height: 1.2;
    text-transform: uppercase
}

.console-message.small-p-t {
    padding-top: 10px
}

.msg-green {
    color: #0bc069
}

.msg-red {
    color: #fc4349
}

.console-count {
    display: table;
    margin: 0 auto;
    width: 200px;
    padding: 10px 15px 6px;
    text-align: center;
    border: 2px solid rgba(255, 255, 255, .3);
    border-radius: 10px;
    display: none
}

.console-count img {
    max-width: 35px;
    display: table;
    margin: 0 auto 3px
}

.console-count span {
    font-weight: 900;
    color: #fff;
    font-size: 1.6em
}

.console-last-msg {
    font-size: .9em
}

.verfication-button-wrapper {
    margin-top: 10px;
    display: none
}

.button-wrapper {
    margin: 30px auto 0;
    max-width: 500px
}

.styled-button {
    border-radius: 10px;
    border: 2px solid rgba(0, 0, 0, .4);
    color: #fff !important;
    text-shadow: 0 0 5px rgba(0, 0, 0, .8);
    padding: 8px 10px;
    width: 100%;
    display: block;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.4em;
    line-height: 18px;
    cursor: pointer !important;
    outline: none !important;
    text-align: center;
    -webkit-transition: -webkit-transform 300ms cubic-bezier(.225, 3, .485, .895);
    transition: -webkit-transform 300ms cubic-bezier(.225, 3, .485, .895);
    transition: transform 300ms cubic-bezier(.225, 3, .485, .895);
    transition: transform 300ms cubic-bezier(.225, 3, .485, .895), -webkit-transform 300ms cubic-bezier(.225, 3, .485, .895)
}

.styled-button span {
    display: block;
    border: 2px dashed rgba(0, 0, 0, .3);
    padding: 20px 10px;
    border-radius: 10px;
    -webkit-transition: all 300ms cubic-bezier(.225, 3, .485, .895);
    transition: all 300ms cubic-bezier(.225, 3, .485, .895);
    transition: all 300ms cubic-bezier(.225, 3, .485, .895);
    transition: all 300ms cubic-bezier(.225, 3, .485, .895), -webkit-transform 300ms cubic-bezier(.225, 3, .485, .895)
}

.styled-button:hover span {
    border: 2px solid transparent;
    background: rgba(0, 0, 0, .15)
}

footer {
    margin-top: 120px;
    text-align: center;
    padding: 5px 0;
    color: rgba(0, 0, 0, .35);
    font-size: .65em;
    position: relative;
    z-index: 10
}

footer .copyright-notice {
    margin-top: 3px
}

footer .copyright-notice span {
    display: block;
    margin-top: 3px
}

footer a {
    color: rgba(255, 255, 255, .5)
}

footer a:hover {
    color: #fff
}

.f-n-l:after {
    display: inline-block;
    content: '|';
    margin: 0 3px;
    position: relative;
    color: rgba(0, 0, 0, .2)
}

.f-n-l:last-child:after {
    display: none
}

@media screen and (max-width:1920px) {
    .main-section {
        padding: 0 0 250px
    }
    header {
        padding-top: 40px
    }
    .logo-img {
        max-width: 400px;
        max-height: 130px
    }
}

@media screen and (max-width:993px) {
    header {
        padding-top: 40px
    }
    .logo-img {
        max-width: 340px;
        max-height: 160px
    }
    .selectric .label {
        font-size: 1em
    }
}

@media screen and (max-width:767px) {
    header {
        padding-bottom: 20px
    }
    .generator-header h1 {
        font-size: 1.8em
    }
    .generator-header h2 {
        font-size: 1.4em
    }
    .divider {
        height: 80px;
        position: absolute;
        left: 49.85%;
        top: 36px;
        width: 2px;
        background: rgba(0, 0, 0, .4)
    }
    .platform-select-wrapper {
        margin-top: 10px
    }
    .resource-v {
        margin-top: 15px;
        position: relative;
        border-top: 2px solid rgba(0, 0, 0, .4);
        padding-top: 15px
    }
    .styled-input {
        font-size: 1em
    }
}

@media screen and (max-width:500px) {
    .generator-header,
    .generator-content,
    .generator-footer {
        padding-left: 30px;
        padding-right: 30px
    }
}

@media screen and (max-width:440px) {
    header {
        padding: 20px 0
    }
    .logo-img {
        max-width: 280px;
        max-height: 120px
    }
    .generator-header {
        padding-top: 11px;
        padding-bottom: 8px
    }
    .generator-header h1 {
        font-size: 1.5em
    }
    .generator-header h2 {
        font-size: 1.2em
    }
    .generator-status {
        font-size: 1em
    }
    .styled-label {
        font-size: .7em
    }
    .platform-item i {
        font-size: 3.6em
    }
    .divider {
        height: 52px;
        top: 36px
    }
    .input-wrapper i {
        left: 15px;
        top: 22px;
        font-size: 1.2em
    }
    .styled-input {
        padding-left: 40px
    }
    .styled-button {
        font-size: 1.2em
    }
    .generator-content {
        padding-top: 50px
    }
    .console-count {
        margin-top: 20px
    }
}

@media screen and (max-width:420px) {
    .generator-header,
    .generator-content,
    .generator-footer {
        padding-left: 20px;
        padding-right: 20px
    }
    .styled-label {
        letter-spacing: 0
    }
    .styled-input {
        font-size: .9em
    }
    .platform-item,
    .selectric {
        border: 2px solid rgba(255, 255, 255, .2)
    }
    .resource-v {
        margin-top: 10px;
        padding-top: 10px
    }
    .input-wrapper {
        margin-bottom: 10px;
        padding-bottom: 10px
    }
    .resource-select-wrapper,
    .platform-select-wrapper {
        margin-top: 5px
    }
    .console-message {
        font-size: 1.2em
    }
    .console-last-msg {
        font-size: .85em
    }
}

@media screen and (max-width:400px) {
    header {
        padding: 10px 0
    }
    .logo-img {
        max-width: 220px;
        max-height: 80px
    }
    .generator-content {
        padding-bottom: 15px
    }
    .button-wrapper {
        margin-top: 15px
    }
    .generator-status {
        font-size: .9em;
        padding: 3px 10px 1px
    }
    .generator-content {
        padding-top: 40px
    }
    .platform-item i {
        font-size: 3.2em
    }
    .divider {
        height: 52px;
        top: 28px
    }
    .activity-username {
        font-size: 1em
    }
    .connection-word {
        font-size: 1em
    }
    .activity-generated-amount {
        display: table;
        font-size: 1.1em;
        margin: 0 auto
    }
    .recent-activity {
        height: 120px
    }
    .styled-button {
        padding: 5px 7px
    }
    .styled-button span {
        padding: 15px 10px
    }
    .styled-label {
        font-size: .65em
    }
}

@media screen and (max-width:365px) {
    .generator-header,
    .generator-content,
    .generator-footer {
        padding-left: 15px;
        padding-right: 15px
    }
    .styled-input {
        font-size: .8em
    }
    .styled-button {
        font-size: 1em
    }
}

@media screen and (max-width:345px) {
    .generator-header h1 {
        font-size: 1.3em
    }
    .generator-header h2 {
        font-size: 1.1em
    }
    .styled-input {
        font-size: .75em
    }
}