.text-xs {
    font-size: 0.6rem
}

.text-sm {
    font-size: 0.8rem
}

.text-lg {
    font-size: 3rem
}

.text-xl {
    font-size: 3.3rem
}

.text-bold {
    font-weight: bold
}

@-webkit-keyframes spin {
    0% {
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes spin {
    0% {
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-webkit-keyframes pulse {
    0% {
    }

    40% {
        -webkit-transform: scale(0.8, 0.8);
        transform: scale(0.8, 0.8)
    }

    60% {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1)
    }

    80% {
        -webkit-transform: scale(0.8, 0.8);
        transform: scale(0.8, 0.8)
    }
}

@keyframes pulse {
    0% {
    }

    40% {
        -webkit-transform: scale(0.8, 0.8);
        transform: scale(0.8, 0.8)
    }

    60% {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1)
    }

    80% {
        -webkit-transform: scale(0.8, 0.8);
        transform: scale(0.8, 0.8)
    }
}

@-webkit-keyframes pulse-2 {
    0% {
    }

    50% {
        -webkit-transform: scale(0.8, 0.8);
        transform: scale(0.8, 0.8)
    }

    100% {
    }
}

@keyframes pulse-2 {
    0% {
    }

    50% {
        -webkit-transform: scale(0.8, 0.8);
        transform: scale(0.8, 0.8)
    }

    100% {
    }
}

@-webkit-keyframes slide-in {
    0%,40% {
        opacity: 0;
        -webkit-transform: translateY(-12px);
        transform: translateY(-12px)
    }

    100% {
    }
}

@keyframes slide-in {
    0%,40% {
        opacity: 0;
        -webkit-transform: translateY(-12px);
        transform: translateY(-12px)
    }

    100% {
    }
}

@-webkit-keyframes zoom-in {
    50% {
        -webkit-transform: scale(0.8, 0.8);
        transform: scale(0.8, 0.8)
    }

    100% {
    }
}

@keyframes zoom-in {
    50% {
        -webkit-transform: scale(0.8, 0.8);
        transform: scale(0.8, 0.8)
    }

    100% {
    }
}

@-webkit-keyframes zoom-in-fade {
    50% {
        -webkit-transform: scale(0.5, 0.5);
        transform: scale(0.5, 0.5);
        opacity: 0
    }

    100% {
    }
}

@keyframes zoom-in-fade {
    50% {
        -webkit-transform: scale(0.5, 0.5);
        transform: scale(0.5, 0.5);
        opacity: 0
    }

    100% {
    }
}

@-webkit-keyframes jump {
    0% {
    }

    50% {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px)
    }

    100% {
    }
}

@keyframes jump {
    0% {
    }

    50% {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px)
    }

    100% {
    }
}

@-webkit-keyframes jumpr {
    0% {
    }

    50% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px)
    }

    100% {
    }
}

@keyframes jumpr {
    0% {
    }

    50% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px)
    }

    100% {
    }
}

@-webkit-keyframes recent-item {
    0% {
        -webkit-filter: brightness(2);
        filter: brightness(2)
    }

    100% {
    }
}

@keyframes recent-item {
    0% {
        -webkit-filter: brightness(2);
        filter: brightness(2)
    }

    100% {
    }
}

@-webkit-keyframes jump2 {
    from,20%,53%,80%,to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    40%,43% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0)
    }

    70% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0)
    }

    90% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0)
    }
}

@keyframes jump2 {
    from,20%,53%,80%,to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    40%,43% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0)
    }

    70% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0)
    }

    90% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0)
    }
}

.animate-spin {
    -webkit-animation: spin 3s linear infinite;
    animation: spin 3s linear infinite
}

.animate-pulse {
    -webkit-animation: pulse 3s linear infinite;
    animation: pulse 3s linear infinite
}

.animate-pulse-r {
    -webkit-animation: pulse-2 1.5s linear infinite;
    animation: pulse-2 1.5s linear infinite
}

.animate-pulse-2 {
    -webkit-animation: pulse-2 1.5s linear infinite;
    animation: pulse-2 1.5s linear infinite
}

.animate-slide-in {
    -webkit-animation: slide-in 0.5s cubic-bezier(0.37, 0.71, 0.18, 1.04);
    animation: slide-in 0.5s cubic-bezier(0.37, 0.71, 0.18, 1.04)
}

.animate-zoom-in {
    -webkit-animation: zoomIn 0.5s cubic-bezier(0.37, 0.71, 0.18, 1.04);
    animation: zoomIn 0.5s cubic-bezier(0.37, 0.71, 0.18, 1.04)
}

.animate-jump {
    -webkit-animation: jump 200ms cubic-bezier(0.43, 0.15, 0.49, 1.34) 1;
    animation: jump 200ms cubic-bezier(0.43, 0.15, 0.49, 1.34) 1
}

.animate-jumpr {
    -webkit-animation: jumpr 200ms cubic-bezier(0.43, 0.15, 0.49, 1.34) 1;
    animation: jumpr 200ms cubic-bezier(0.43, 0.15, 0.49, 1.34) 1
}

.animate-jump-2 {
    -webkit-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation: jump2 1s cubic-bezier(0.43, 0.15, 0.49, 1.34) 1;
    animation: jump2 1s cubic-bezier(0.43, 0.15, 0.49, 1.34) 1
}

html {
    font-size: 16px
}

body {
    background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
    color: #e94560;
}

body {
    padding: 0 !important;
    margin: 0;
    padding-top: 40px;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    -webkit-background-size: cover;
    background-size: cover;
    font-family: sans-serif;
    color: #d4d4d4
}

.logo {
    max-width: 200px;
    margin: 0 auto;
    margin-bottom: 34px;
    margin-top: 32px
}

.advantages-icon {
    font-size: 2rem
}

.disabled {
    pointer-events: none !important;
    cursor: not-allowed !important;
    opacity: 0.3 !important
}

.proof-image {
    max-height: 200px
}

.full-height {
    min-height: 100%
}

.text-bold {
    font-weight: bold
}

.loader-dotted {
    max-width: 100px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.loader-dotted span {
    display: inline-block;
    width: 16px;
    height: 16px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #607d8b;
    -webkit-animation: zoom-in-fade 2s linear infinite;
    animation: zoom-in-fade 2s linear infinite
}

.loader-dotted span:nth-of-type(1) {
    -webkit-animation-delay: 100ms;
    animation-delay: 100ms
}

.loader-dotted span:nth-of-type(2) {
    -webkit-animation-delay: 200ms;
    animation-delay: 200ms
}

.loader-dotted span:nth-of-type(3) {
    -webkit-animation-delay: 300ms;
    animation-delay: 300ms
}

.loader-dotted span:nth-of-type(4) {
    -webkit-animation-delay: 400ms;
    animation-delay: 400ms
}

.loader-dotted span:nth-of-type(5) {
    -webkit-animation-delay: 500ms;
    animation-delay: 500ms
}

.loader-dotted span:nth-of-type(6) {
    -webkit-animation-delay: 600ms;
    animation-delay: 600ms
}

.status-badge {
    position: relative
}

.status-badge:not(.loading) {
    -webkit-animation: zoom-in-fade 600ms ease-in-out;
    animation: zoom-in-fade 600ms ease-in-out
}

.status-badge.loading {
    color: transparent
}

.status-badge.loading::before {
    position: absolute;
    display: block;
    content: "";
    top: 3px;
    left: 0;
    width: 10px;
    height: 10px;
    border: 2px solid #555;
    border-left-color: transparent;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-animation: zoom-in-fade 600ms ease-in-out;
    animation: zoom-in-fade 600ms ease-in-out;
    -webkit-animation: spin 600ms linear infinite;
    animation: spin 600ms linear infinite
}

.preloader {
    position: fixed;
    left: 0;
    top: -100%;
    width: 100vw;
    height: 100vh;
    background: #222;
    z-index: 999;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s
}

.preloader.active {
    top: 0
}

.preloader-logo {
    width: 80px;
    height: 80px;
    -webkit-animation: slide-in 600ms cubic-bezier(0.37, 0.71, 0.18, 1.04);
    animation: slide-in 600ms cubic-bezier(0.37, 0.71, 0.18, 1.04)
}

.preloader-logo * {
    width: 80px;
    height: 80px
}

.preloader p {
    -webkit-animation: slide-in 800ms cubic-bezier(0.37, 0.71, 0.18, 1.04);
    animation: slide-in 800ms cubic-bezier(0.37, 0.71, 0.18, 1.04)
}

.preloader-progress {
    padding: 2px;
    background: #111;
    height: 8px;
    width: 300px;
    max-width: 100%;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -webkit-animation: slide-in 1s cubic-bezier(0.37, 0.71, 0.18, 1.04);
    animation: slide-in 1s cubic-bezier(0.37, 0.71, 0.18, 1.04)
}

@-webkit-keyframes preloader-bar {
    0% {
        width: 0
    }

    100% {
        width: 100%
    }
}

@keyframes preloader-bar {
    0% {
        width: 0
    }

    100% {
        width: 100%
    }
}

.preloader-progress-bar {
    height: 100%;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background: #00d9ff;
    width: 0;
    -webkit-animation: preloader-bar 2s 1;
    animation: preloader-bar 2s 1;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-delay: 200ms;
    animation-delay: 200ms
}

.pool-buttons {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    max-width: 260px
}

.pool-stats {
    font-style: italic
}

.pool-btn-y,.pool-btn-n {
    min-width: 68px
}

.pool-score {
    font-weight: bold;
    text-shadow: 0px 0px 3px #28a745
}

.btn {
    display: block;
    position: relative;
    -webkit-border-radius: 4px;
    border-radius: 4px
}

.btn-fluid {
    width: 100% !important
}

.btn-3d {
    max-width: 300px;
    width: 100%;
    height: 64px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.5);
    -webkit-box-shadow: 0px 1px 1px rgba(255,255,255,0.4) inset;
    box-shadow: 0px 1px 1px rgba(255,255,255,0.4) inset;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    cursor: pointer;
    font-family: sans-serif
}

.btn-3d-md {
    height: 56px;
    max-width: 180px
}

.btn-3d:hover,.btn-3d:focus {
    -webkit-filter: brightness(1.1);
    filter: brightness(1.1)
}

.btn-3d,.btn-3d:hover,.btn-3d:focus {
    text-decoration: none;
    color: inherit;
    outline: none
}

.btn-3d-text {
    height: 100%;
    width: 75%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    font-weight: bold;
    font-size: 1.65rem;
    text-transform: uppercase;
    text-shadow: 0px -1px 1px rgba(0,0,0,0.2);
    color: #fff
}

@media all and (max-width: 340px) {
    .btn-3d-text {
        font-size:1.45rem
    }
}

.btn-3d-md .btn-3d-text {
    font-size: 1.15rem
}

.btn-3d-badge {
    height: 100%;
    width: 25%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-left: 1px solid rgba(0,0,0,0.3);
    -webkit-box-shadow: 1px 0px 1px rgba(255,255,255,0.2) inset;
    box-shadow: 1px 0px 1px rgba(255,255,255,0.2) inset;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.btn-3d-badge-wrapper {
    display: block;
    width: 30px;
    height: 30px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    font-size: 1.5rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    align-items: center;
    background: rgba(29,25,25,0.18);
    text-shadow: 0px -1px 1px rgba(0,0,0,0.2);
    border: 1px solid rgba(29,25,25,0.15)
}

.btn-last-step {
    background-color: #ff5400
}

.card {
    background-color: rgba(27,27,27,0.8);
    padding: 20px 30px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    margin-bottom: 30px
}

.card .card-title {
    font-family: "Staatliches"
}

.card-title {
    font-size: 1.6rem
}

.card-title-xl {
    font-size: 2.3rem
}

.card.card-gen {
    min-height: 486px
}

.card-about {
    min-height: 631px;
    overflow: hidden
}

@media all and (max-width: 768px) {
    .card-about {
        min-height:initial;
        max-height: initial
    }
}

.full {
    max-height: initial !important
}

html {
    font-size: 16px
}

body {
    padding: 0 !important;
    margin: 0;
    padding-top: 40px;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    -webkit-background-size: cover;
    background-size: cover;
    font-family: sans-serif;
    color: #d4d4d4
}

.logo {
    max-width: 200px;
    margin: 0 auto;
    margin-bottom: 34px;
    margin-top: 32px
}

.advantages-icon {
    font-size: 2rem
}

.disabled {
    pointer-events: none !important;
    cursor: not-allowed !important;
    opacity: 0.3 !important
}

.proof-image {
    max-height: 200px
}

.full-height {
    min-height: 100%
}

.text-bold {
    font-weight: bold
}

.loader-dotted {
    max-width: 100px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.loader-dotted span {
    display: inline-block;
    width: 16px;
    height: 16px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #607d8b;
    -webkit-animation: zoom-in-fade 2s linear infinite;
    animation: zoom-in-fade 2s linear infinite
}

.loader-dotted span:nth-of-type(1) {
    -webkit-animation-delay: 100ms;
    animation-delay: 100ms
}

.loader-dotted span:nth-of-type(2) {
    -webkit-animation-delay: 200ms;
    animation-delay: 200ms
}

.loader-dotted span:nth-of-type(3) {
    -webkit-animation-delay: 300ms;
    animation-delay: 300ms
}

.loader-dotted span:nth-of-type(4) {
    -webkit-animation-delay: 400ms;
    animation-delay: 400ms
}

.loader-dotted span:nth-of-type(5) {
    -webkit-animation-delay: 500ms;
    animation-delay: 500ms
}

.loader-dotted span:nth-of-type(6) {
    -webkit-animation-delay: 600ms;
    animation-delay: 600ms
}

.status-badge {
    position: relative
}

.status-badge:not(.loading) {
    -webkit-animation: zoom-in-fade 600ms ease-in-out;
    animation: zoom-in-fade 600ms ease-in-out
}

.status-badge.loading {
    color: transparent
}

.status-badge.loading::before {
    position: absolute;
    display: block;
    content: "";
    top: 3px;
    left: 0;
    width: 10px;
    height: 10px;
    border: 2px solid #555;
    border-left-color: transparent;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-animation: zoom-in-fade 600ms ease-in-out;
    animation: zoom-in-fade 600ms ease-in-out;
    -webkit-animation: spin 600ms linear infinite;
    animation: spin 600ms linear infinite
}

body.modal-open {
    overflow: initial !important
}

.modal-absolute {
    position: absolute
}

.modal-dark {
    background: rgba(0,0,0,0.5)
}

.modal-dark .modal-content {
    background: #0c0c0c;
    color: #fafafa
}

.modal-dark .modal-header,.modal-dark .modal-footer {
    border: none
}

.modal-dark .close {
    color: #bdbdbd
}

.modal-title {
    font-family: "Staatliches";
    text-transform: uppercase
}

.modal-title.modal-title-center {
    display: block;
    width: 100%;
    text-align: center
}

.modal-backdrop {
    background: rgba(93,93,93,0.5)
}

.input-form {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    background: rgba(64,64,64,0.54);
    padding: 4px 8px;
    padding-left: 14px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    min-height: 46px
}

.input-icon {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 26px;
    width: 30px;
    height: 46px;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-background-size: contain;
    background-size: contain;
    color: #ffc107
}

.input-form input {
    background-color: transparent;
    outline: none;
    border: none !important;
    width: 100%;
    padding-left: 18px;
    color: #fafafa
}

.input-form textarea {
    background: #292929
}

.recent-wrapper {
    background: #141414;
    padding: 8px 16px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    min-height: 186px;
    max-height: 186px;
    overflow: hidden
}

.recent-item {
    background: rgba(255,255,255,0.1);
    padding: 8px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    margin-bottom: 4px;
    padding-bottom: 2px;
    -webkit-animation: recent-item 1s ease-in-out 1;
    animation: recent-item 1s ease-in-out 1;
    trxansition: all 350ms ease-in-out
}

.recent-item::after {
    display: block;
    position: absolute;
    right: -26px;
    top: -3px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 63px;
    text-align: center;
    font-size: 8px;
    padding-top: 8px;
    padding-bottom: 2px;
    font-weight: bold;
    -webkit-font-smoothing: antialiased;
    color: #ffffff;
    font-family: "Font Awesome 5 Free"
}

.recent-item.success::after {
    content: "\f00c";
    background: #0971c7;
    color: #ffffff
}

.recent-item.error::after {
    content: "\f067";
    background: #c70942
}

.recent-username,.recent-badge {
    font-size: 12px;
    padding: 2px 4px
}

.recent-username {
    font-weight: bold
}

.recent-flag {
    max-height: 24px
}

.recent-resources {
    margin-top: 4px
}

.recent-resource {
    font-weight: bold;
    font-size: 12px;
    margin: 3px 0;
    color: #04ffb0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.resource-icon {
    max-height: 18px;
    margin-right: 4px
}

.recent-resource:nth-of-type(1) {
    color: #8bff04
}

.recent-resource:nth-of-type(2) {
    color: #04ffb0
}

.recent-resource:nth-of-type(3) {
    color: #ffeb3b
}

.recent-resource:nth-of-type(4) {
    color: #dbbc09
}

.comment-card {
    padding: 10px 20px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    margin-bottom: 4px
}

.comment-title {
    font-style: italic;
    opacity: 0.8;
    font-weight: normal
}

.comments {
    padding: 32px;
    background: #0c0c0c
}

@media screen and (max-width: 400px) {
    .comments {
        padding:8px
    }
}

.comment-title {
    margin-top: 0;
    margin-bottom: 16px
}

.comment-image {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: red;
    overflow: hidden;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    margin-right: 8px
}

.comment-box {
    background: #212136;
    padding: 16px 32px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    margin-bottom: 16px
}

.comment-header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    border-bottom: 2px solid #2a2a3b;
    margin-bottom: 8px;
    padding-bottom: 8px
}

.comment-votes>* {
    display: inline
}

.comment-author {
    font-size: 1.2rem;
    font-weight: bold;
    color: #ffdb0c;
    margin-right: 8px
}

.comment-date {
    font-size: 0.8rem;
    opacity: 0.8
}

@media screen and (max-width: 550px) {
    .comment-date {
        font-size:0.7rem;
        opacity: 0.6;
        margin-top: 2px;
        margin-bottom: 4px;
        display: block
    }
}

.comment-votes {
    font-size: 1rem;
    font-family: Verdana
}

.comment-vote-plus,.comment-vote-minus {
    background: none;
    text-align: center;
    cursor: pointer;
    height: 20px;
    width: 20px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border: none;
    outline: none;
    font-weight: bold;
    font-size: 11px;
    color: #c0c0c0;
    background: rgba(255,255,255,0.1);
    outline: none;
    margin-left: 4px
}

.comment-vote-plus:hover,.comment-vote-minus:hover {
    background: #414163
}

.voted {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed
}

.comment-vote-result {
    margin: 4px 0
}

.green {
    color: #07ff64
}

.red {
    color: #f93636
}

.comment-stars {
    position: relative
}

.star-gold,.star-shadow {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 11px
}

.star-gold {
    color: gold
}

.star-shadow {
    color: #505055bb
}

.comment-message {
    color: #bebefd
}

.comment-add-username,.comment-add-textarea {
    width: 100%;
    background-color: #0c0c0c;
    border: none;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    padding: 8px 16px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff
}

.comment-add-username {
    height: 40px;
    margin-bottom: 8px
}

.console-window {
    background: #0a0a0a;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    min-height: 240px;
    padding-bottom: 16px
}

.console-msg {
    font-size: 16px;
    margin: 16px 0;
    text-align: center;
    font-weight: bold;
    padding: 2px
}

.progress {
    height: 24px;
    background: -webkit-gradient(linear, left top, left bottom, from(#3a4050), color-stop(47%, #3a4050), color-stop(48%, #2e323e), to(#2e323e));
    background: -webkit-linear-gradient(top, #3a4050 0%, #3a4050 47%, #2e323e 48%, #2e323e 100%);
    background: -o-linear-gradient(top, #3a4050 0%, #3a4050 47%, #2e323e 48%, #2e323e 100%);
    background: linear-gradient(-180deg, #3a4050 0%, #3a4050 47%, #2e323e 48%, #2e323e 100%);
    padding: 2px;
    -webkit-border-radius: 4px;
    border-radius: 4px
}

.progress-bar {
    background: #03A9F4;
    -webkit-border-radius: 4px;
    border-radius: 4px
}

.console-loader {
    display: block;
    width: 60px;
    height: 60px;
    border: 6px solid #717171;
    border-left-color: transparent;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-animation-duration: .8s;
    animation-duration: .8s
}

.console-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-top: 62px;
    min-height: 100%
}

.console-icons-box {
    max-width: 280px;
    width: 100%
}

.console-icon {
    width: 40px;
    height: 40px;
    -webkit-animation: zoom-in 1.2s ease-in-out infinite;
    animation: zoom-in 1.2s ease-in-out infinite
}

.console-icon:nth-of-type(1) {
    -webkit-animation-delay: 200ms;
    animation-delay: 200ms
}

.console-icon:nth-of-type(2) {
    -webkit-animation-delay: 400ms;
    animation-delay: 400ms
}

.console-icon:nth-of-type(3) {
    -webkit-animation-delay: 600ms;
    animation-delay: 600ms
}

.console-icon:nth-of-type(4) {
    -webkit-animation-delay: 800ms;
    animation-delay: 800ms
}

.console-icon:nth-of-type(5) {
    -webkit-animation-delay: 1000ms;
    animation-delay: 1000ms
}

.console-icon:nth-of-type(6) {
    -webkit-animation-delay: 1200ms;
    animation-delay: 1200ms
}

.console-card {
    background: #151515;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #272727;
    padding: 8px 16px;
    margin-top: 8px;
    font-weight: bold
}

.console-card .card-name {
    font-size: .7rem;
    color: #03a9f4;
    text-shadow: 0px 0px 2px #03a9f4;
    display: block;
    text-transform: uppercase;
    margin-bottom: 4px
}

.console-card .card-text {
    font-size: 1rem;
    letter-spacing: 1px;
    display: block;
    text-transform: uppercase;
    color: #FFC107;
    text-shadow: 0px 0px 2px #FFC107
}

.console-card {
    -webkit-transition: 1s ease;
    -o-transition: 1s ease;
    transition: 1s ease;
    opacity: 0
}

.console-summary.on .console-card {
    -webkit-transition: 1s ease;
    -o-transition: 1s ease;
    transition: 1s ease;
    opacity: 1
}

.console-summary.on .console-card:nth-of-type(1) {
    -webkit-transition-delay: 200ms;
    -o-transition-delay: 200ms;
    transition-delay: 200ms
}

.console-summary.on .console-card:nth-of-type(2) {
    -webkit-transition-delay: 400ms;
    -o-transition-delay: 400ms;
    transition-delay: 400ms
}

.console-summary.on .console-card:nth-of-type(3) {
    -webkit-transition-delay: 600ms;
    -o-transition-delay: 600ms;
    transition-delay: 600ms
}

.console-summary.on .console-card:nth-of-type(4) {
    -webkit-transition-delay: 800ms;
    -o-transition-delay: 800ms;
    transition-delay: 800ms
}

.console-card:nth-of-type(2) {
    -webkit-animation-delay: 200ms;
    animation-delay: 200ms
}

.console-card:nth-of-type(3) {
    -webkit-animation-delay: 400ms;
    animation-delay: 400ms
}

.console-card:nth-of-type(4) {
    -webkit-animation-delay: 600ms;
    animation-delay: 600ms
}

.notification {
    position: fixed;
    margin: 0;
    z-index: 9999;
    top: 8px;
    left: 0;
    right: 0;
    margin: 0 auto;
    min-width: 200px;
    max-width: 300px;
    padding: 8px 16px;
    background: #242f34;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    border: 1px solid #464646;
    opacity: 0;
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
    -webkit-transition: all 350ms ease-in-out;
    -o-transition: all 350ms ease-in-out;
    transition: all 350ms ease-in-out
}

.notification.visible {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px)
}

.notification-icon {
    border-right: 1px solid rgba(80,80,80,0.52);
    font-size: 1.5rem
}

.notification-bar {
    width: 100%;
    height: 2px;
    background-color: red
}

.notification-text {
    margin-top: 2px
}

.bs-1 {
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);
    box-shadow: 0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24)
}

.bs-2 {
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);
    box-shadow: 0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23)
}

.bs-3 {
    -webkit-box-shadow: 0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23);
    box-shadow: 0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23)
}

.bs-4 {
    -webkit-box-shadow: 0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22);
    box-shadow: 0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22)
}

.bs-5 {
    -webkit-box-shadow: 0 19px 38px rgba(0,0,0,0.3),0 15px 12px rgba(0,0,0,0.22);
    box-shadow: 0 19px 38px rgba(0,0,0,0.3),0 15px 12px rgba(0,0,0,0.22)
}

.text-yellow {
    color: #FFC723
}

.bg-yellow {
    background-color: #FFC723
}

.text-orange {
    color: #ff5400
}

.bg-orange {
    background-color: #ff5400
}

.text-light-green {
    color: #00ff45
}

.bg-light-green {
    background-color: #00ff45
}

.text-light-red {
    color: #f1436e !important
}

.bg-light-red {
    background-color: #f1436e
}

.vs-input {
    margin-bottom: 42px
}

.vs-input-btn {
    width: 40px;
    height: 40px;
    background-color: rgba(255,255,255,0.08);
    border: 1px solid transparent;
    color: #222;
    font-weight: bold;
    font-size: 1.3rem;
    line-height: 0%;
    cursor: pointer;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    color: #939393;
    -webkit-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease
}

.vs-input-btn:focus {
    background: rgba(255,255,255,0.28);
    color: #939393;
    outline: none
}

.vs-input-btn:hover {
    background: rgba(255,255,255,0.28);
    color: #939393;
    outline: none;
    -webkit-transform: scale(0.95, 0.95);
    -ms-transform: scale(0.95, 0.95);
    transform: scale(0.95, 0.95)
}

.vs-input-btn:disabled {
    opacity: 0.5
}

.vs-input-label {
    font-size: 1.3rem;
    display: block;
    margin-bottom: 8px;
    text-align: center
}

.vs-input-all-wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    max-width: 600px;
    margin: 0 auto
}

.vs-input-content {
    width: 80%;
    -webkit-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
    height: 64px;
    background: rgba(255,255,255,0.08)
}

.vs-input-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    padding: 0 20px
}

.vs-input-icon {
    width: 40px;
    height: 40px;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-background-size: contain;
    background-size: contain;
    -webkit-animation: jump 200ms cubic-bezier(0.43, 0.15, 0.49, 1.34) 1;
    animation: jump 200ms cubic-bezier(0.43, 0.15, 0.49, 1.34) 1
}

.vs-input-icon.animate {
    -webkit-animation: jumpr 200ms cubic-bezier(0.43, 0.15, 0.49, 1.34) 1;
    animation: jumpr 200ms cubic-bezier(0.43, 0.15, 0.49, 1.34) 1
}

.vs-input-value {
    font-size: 2.9rem;
    font-family: "Staatliches";
    width: 85%;
    font-weight: bold;
    color: white;
    letter-spacing: 2px
}

.vs-input-bar-wrapper {
    height: 8px;
    background: inherit;
    -webkit-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
    padding: 2px 4px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.vs-input-bar {
    height: 4px;
    background: #fde62d;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -webkit-transition: width 320ms cubic-bezier(0.25, 0.1, 0.24, 1.25);
    -o-transition: width 320ms cubic-bezier(0.25, 0.1, 0.24, 1.25);
    transition: width 320ms cubic-bezier(0.25, 0.1, 0.24, 1.25)
}

@media screen and (max-width: 600px) {
    .vs-input-all-wrapper {
        -webkit-box-align:start;
        -webkit-align-items: flex-start;
        -ms-flex-align: start;
        align-items: flex-start
    }

    .vs-input-container {
        padding: 0 8px
    }

    .vs-input-content {
        height: 48px;
        width: 65%
    }

    .vs-input-value {
        font-size: 1.8rem;
        padding-left: 8px
    }

    .vs-input-icon {
        width: 30px;
        height: 30px
    }
}

.input-form {
    width: 100%;
    margin: 0 auto;
    min-height: 60px;
    font-family: 'Staatliches';
    font-size: 26px;
    padding-left: 30px;
}

@media (max-width: 380px) {
    .input-form {
        font-size:18px;
    }
}

.chooseplatform .fab {
    font-size: 60px;
}

.chooseplatform .thisc {
    margin: 12px;
    cursor: pointer;
    transition: 0.3s ease-in-out all;
}

.chooseplatform .thisc:hover {
    opacity: 0.7;
}

.chooseplatform {
    text-align: center;
}

.chooseplatform .thisc {
    display: inline-block;
}

.thisc span {
    display: block;
    opacity: 0.8;
    margin-top: 10px;
}

.klikniete {
    opacity: 0.7;
    text-shadow: 0 3px 10px black;
    transform: scale(0.9);
}

/*# sourceMappingURL=main.css.map */