html,
body {
    background-color: #000000;
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Arial, Helvetica, sans-serif;
    position: relative;
}

#particles-js {
    width: 100%;
    height: 100%;
}

canvas {
    display: block;
    vertical-align: bottom;
}

.page-wrapper {
    width: 100%;
    height: 100%;
    background-image:url("bg.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #000000;
    background-attachment: fixed;
}

.center-block {
    width: 90%;
    height: 100%;
    transform: translate(-50%, 0px);
    left: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    position: absolute;
    -webkit-transform: translate(-50%, 0px);
    -moz-transform: translate(-50%, 0px);
    -ms-transform: translate(-50%, 0px);
    -o-transform: translate(-50%, 0px);
}

.l-block,
.r-block {
    width: 50%;
}

img.text-img {
    margin: 15px 0px;
}

img.text-img.img01 {
    width: 85%;
}

img.text-img.img02 {
    width: 100%;
}

img.text-img.img03 {
    width: 85%;
}

.text-block {
    text-align: center;
}

.ad-block {
    text-align: center;
    position: relative;
    width: 100%;
    height: auto;
}

.ad-block img.ad-img {
    width: 48%;
}

.btn-group {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 30px;
}

a.register-btn {
    width: 50%;
    min-width: 180px;
    max-width: 280px;
    height: auto;
    display: inline-block;
    text-align: center;
    position: relative;
          left: 50%;
          transform: translateX(-50%);
}

a.register-btn img {
    width: 80%;
}

a.register-btn::after {
    content: '';
    position: absolute;
    right: 8%;
    top: 50%;
    background-image:url("hand.png");
    background-size: contain;
    background-repeat: no-repeat;
    height: 45px;
    width: 45px;
    z-index: 1;
    -ms-transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    -webkit-animation: floatUpDown 1.6s ease-in-out infinite;
    animation: floatUpDown 1.6s ease-in-out infinite;
}

a.customer-btn {
    width: 50%;
    min-width: 180px;
    max-width: 280px;
    height: auto;
    display: inline-block;
    text-align: center;
}

a.customer-btn img {
    width: 90%;
}

@media screen and (min-width: 1400px) {
    a.register-btn,
    a.customer-btn {
        max-width: 100%;
    }
}

@media screen and (max-width: 1199px) {
    .page-wrapper {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
}

@media screen and (max-width: 990px) {
    .center-block {
        width: 100%;
        padding: 40px 0px;
    }
    .text-block {
        width: 90%;
        margin: 10px auto;
    }
    .page-wrapper {
        background-attachment: scroll;
    }
}

@media screen and (max-width: 768px) {
    .center-block {
        height: auto;
        overflow: auto;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .l-block,
    .r-block {
        width: 100%;
    }
    .text-block {
        width: 100%;
    }
    img.text-img.img01 {
        width: 80%;
    }
    img.text-img.img02 {
        width: 92%;
    }
    img.text-img.img03 {
        width: 80%;
    }
    .btn-group {
        margin-top: 20px;
        margin-bottom: 25px;
    }
    a.register-btn,
    a.customer-btn {
        max-width: 100%;
    }
    .ad-block img.ad-img {
        width: 45%;
    }
}

@media screen and (max-width: 640px) {
    .ad-block img.ad-img {
        width: 55%;
    }
}

@media screen and (max-width: 568px) {
    img.text-img {
        margin: 5px 0px;
    }
}

@media screen and (max-width: 414px) {}

@media screen and (max-width: 376px) {}

@media screen and (max-width: 320px) {
    a.register-btn,
    a.customer-btn {
        min-width: 160px;
    }
}

@media screen and (min-height: 1024px) and (orientation: landscape) {
    .page-wrapper {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
}

@media screen and (max-width: 990px) and (orientation: landscape) {
    /* html,
    body {
        height: auto;
    }
    .page-wrapper {
        height: auto;
    } */
}

@-webkit-keyframes floatUpDown {
    0% {
        -webkit-transform: translate(0, 12px);
        transform: translate(0, 12px);
    }
    50% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0px);
    }
    100% {
        -webkit-transform: translate(0, 12px);
        transform: translate(0, 12px);
    }
}

@keyframes floatUpDown {
    0% {
        -webkit-transform: translate(0, 12px);
        transform: translate(0, 12px);
    }
    50% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0px);
    }
    100% {
        -webkit-transform: translate(0, 12px);
        transform: translate(0, 12px);
    }
}