a, abbr, acronym, address, applet, article, aside, audio, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, ul, var, video {
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    margin: 0;
    padding:0
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display:block
}

body {
    line-height:1
}

ol, ul {
    padding-left: 20px;
}

blockquote, q {
    quotes:none
}

blockquote:after, blockquote:before, q:after, q:before {
    content:none
}

table {
    border-collapse: collapse;
    border-spacing:0
}

::selection {
    background: #b3d4fc;
    text-shadow:none
}

audio, canvas, iframe, img, svg, video {
    vertical-align:middle
}

*, html {
    box-sizing:border-box
}

*, :after, :before {
    box-sizing:inherit
}

img {
    box-sizing:content-box
}

body, html {
    background: #141414;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing:grayscale
}

body {
    font-family: Asap, serif;
    font-weight: 400;
    line-height: 1.37;
    font-size:14px
}

a {
    color: inherit;
}

h1, h2, h3, h4, h5, h6 {
    font-family: Asap, serif;
    line-height:1.18
}

::selection {
    background: #3654ff;
    color:#fff
}

@font-face {
    font-family: Asap;
    src: url(/fonts/JetBrainsMono-Regular.woff2) format("woff2"), url(/fonts/JetBrainsMono-Regular.woff) format("woff");
    font-weight: 400;
    font-style:normal
}

@font-face {
    font-family: Asap;
    src: url(/fonts/JetBrainsMono-Medium.woff2) format("woff2"), url(/fonts/JetBrainsMono-Medium.woff) format("woff");
    font-weight: 500;
    font-style:normal
}

@font-face {
    font-family: Asap;
    src: url(/fonts/JetBrainsMono-SemiBold.woff2) format("woff2"), url(/fonts/JetBrainsMono-SemiBold.woff) format("woff");
    font-weight: 600;
    font-style:normal
}

@font-face {
    font-family: Asap;
    src: url(/fonts/JetBrainsMono-Bold.woff2) format("woff2"), url(/fonts/JetBrainsMono-Bold.woff) format("woff");
    font-weight: 700;
    font-style:normal
}


section.info {
    background: #141414;
    flex: 1 1;
    display: flex;
    flex-direction: column;
    font-family: Asap, sans-serif;
    font-weight: 400;
    min-height: 100vh;
    height: -webkit-fill-available;
    display: grid;
    grid-template-columns:1fr 630px;
    z-index: 1;
    position: relative;
    background: transparent;
}


@media (max-width: 1800px) {
    section.info {
        grid-template-columns:1fr 580px
    }
}

@media (max-width: 1540px) {
    section.info {
        grid-template-columns:1fr 530px
    }
}

@media (max-width: 990px) {
    section.info {
        display:block
    }
}

section.info .picture {
    display: flex;
    align-items: center;
    justify-content: center;
/*    background: linear-gradient(221.12deg, #d900e8, #002fcc);
    background-image: url(/img/login-bg.jpg);*/
    background-size:cover
}

@media (max-width: 990px) {
    section.info .picture {
        /*height:250px*/
        height:350px
    }
}

section.info .picture .login-logo {
    display: flex;
    flex-direction:column
}

section.info .picture .login-logo img {
    width: 300px;
    margin:20px
}

@media (max-width: 990px) {
    section.info .picture .login-logo img {
        width: 200px;
        margin:10px
    }
}

.info-bar {
    display: flex;
    flex-direction:column;
    background: #141414;
}

.info-bar .info-bar-text {
    padding: 50px 0;
    margin: auto;
    width:300px;
    font-size:18px;
    color: #fff;
    text-decoration:none;
    text-align: center;
}



.scene_wrap{
    position: absolute;
    top: 0px;
    border: 0px;
    right: 0px;
    left: 0px;
    overflow: hidden;
    /*background: red;*/
    height: 100vh;
    /*background: linear-gradient(221.12deg, #d900e8, #002fcc);*/
    /*background-image: url(img/login-bg.jpg);*/
    }

#scene{
    height: 150vh;
    width: 150vw;
}


#scene img{
    left: -12vw;
    top: -12vh;
    position: relative;
    width: 110vw;
}





@media(max-width:  990px){
    section.info::after {
        content: "";
        width: 100%;
        /*height: 50vh;*/
        height: 35vh;
        background: #141414;
        position: fixed;
        bottom: 0px;
        z-index: -1;
    }

    .scene_wrap{
        /*height: auto;*/
    }
}



@media(max-width: 550px){

#scene {
    top: -30px;
}

/*#scene img {
    height: 100vh;
    width: auto;
}*/


#scene img {
    /*height: 150vh;*/
    height: 110vh;
    width: auto;
}

}


@media screen and (max-width: 990px) and (orientation: landscape){

section.info::after {
    height: 5vh !important;
}


#scene img {
    width: 140vw;
}

}


@media screen and (min-width: 768px) and (max-width: 912px) and (orientation: portrait){

#scene img {
    left: -12vw;
    top: -12vh;
    position: relative;
    width: 120vw;
}

}


@media screen and (min-width: 551px) and (max-width: 767.5px) and (orientation: portrait){

#scene img {
    width: 130vw;
}

}