body {
    background-color: black;
    background-image: url("../img/login_back.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 100vh;
}


@media (min-width: 320px) {
    :root {
        --big-circle-right: -128%;
        --small-circle-left: -92%;
        --big-circle-position: -876px;
        --small-circle-position: -757px
    }
}

@media (min-width: 480px) {
    :root {
        --big-circle-right: -229%;
        --small-circle-left: -82%;
        --big-circle-position: -2947px;
        --small-circle-position: -1173px
    }
}

@media (min-width: 728px) {
    :root {
        --big-circle-right: -203%;
        --small-circle-left: -102%
    }
}

@media (min-width: 992px) {
    :root {
        --big-circle-right: -143%;
        --small-circle-left: -68%
    }
}

@media (min-width: 1200px) {
    :root {
        --big-circle-right: -102%;
        --small-circle-left: -58%
    }
}

@media (min-width: 1600px) {
    :root {
        --big-circle-right: -41%;
        --small-circle-left: -15%
    }
}

@-webkit-keyframes bigCircleOut {
    0% {
        right: var(--big-circle-right)
    }

    to {
        right: var(--big-circle-position)
    }
}

@keyframes bigCircleOut {
    0% {
        right: var(--big-circle-right)
    }

    to {
        right: var(--big-circle-position)
    }
}

@-webkit-keyframes bigCircleIn {
    0% {
        right: var(--big-circle-position)
    }

    to {
        right: var(--big-circle-right)
    }
}

@keyframes bigCircleIn {
    0% {
        right: var(--big-circle-position)
    }

    to {
        right: var(--big-circle-right)
    }
}

@-webkit-keyframes smallCircleOut {
    0% {
        left: var(--small-circle-left)
    }

    to {
        left: var(--small-circle-position)
    }
}

@keyframes smallCircleOut {
    0% {
        left: var(--small-circle-left)
    }

    to {
        left: var(--small-circle-position)
    }
}

@-webkit-keyframes smallCircleIn {
    0% {
        left: var(--small-circle-position)
    }

    to {
        left: var(--small-circle-left)
    }
}

@keyframes smallCircleIn {
    0% {
        left: var(--small-circle-position)
    }

    to {
        left: var(--small-circle-left)
    }
}


body .circles.closing .bigCircle {
    -webkit-animation: bigCircleIn 1s 0s;
    animation: bigCircleIn 1s 0s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-timing-function: cubic-bezier(.86, 0, .07, 1);
    -moz-animation-iteration-count: 1;
    -moz-animation-fill-mode: forwards;
    -moz-animation-timing-function: cubic-bezier(.86, 0, .07, 1);
    -o-animation-iteration-count: 1;
    -o-animation-fill-mode: forwards;
    -o-animation-timing-function: cubic-bezier(.86, 0, .07, 1);
    -ms-animation-iteration-count: 1;
    -ms-animation-fill-mode: forwards;
    -ms-animation-timing-function: cubic-bezier(.86, 0, .07, 1);
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(.86, 0, .07, 1)
}

body .circles.closing .smallCircle {
    -webkit-animation: smallCircleIn 1s 0s;
    animation: smallCircleIn 1s 0s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-timing-function: cubic-bezier(.86, 0, .07, 1);
    -moz-animation-iteration-count: 1;
    -moz-animation-fill-mode: forwards;
    -moz-animation-timing-function: cubic-bezier(.86, 0, .07, 1);
    -o-animation-iteration-count: 1;
    -o-animation-fill-mode: forwards;
    -o-animation-timing-function: cubic-bezier(.86, 0, .07, 1);
    -ms-animation-iteration-count: 1;
    -ms-animation-fill-mode: forwards;
    -ms-animation-timing-function: cubic-bezier(.86, 0, .07, 1);
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(.86, 0, .07, 1)
}

body .circles.opened .bigCircle {
    -webkit-animation: bigCircleOut 1s 0s;
    animation: bigCircleOut 1s 0s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-timing-function: cubic-bezier(.86, 0, .07, 1);
    -moz-animation-iteration-count: 1;
    -moz-animation-fill-mode: forwards;
    -moz-animation-timing-function: cubic-bezier(.86, 0, .07, 1);
    -o-animation-iteration-count: 1;
    -o-animation-fill-mode: forwards;
    -o-animation-timing-function: cubic-bezier(.86, 0, .07, 1);
    -ms-animation-iteration-count: 1;
    -ms-animation-fill-mode: forwards;
    -ms-animation-timing-function: cubic-bezier(.86, 0, .07, 1);
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(.86, 0, .07, 1)
}

body .circles.opened .smallCircle {
    -webkit-animation: smallCircleOut 1s 0s;
    animation: smallCircleOut 1s 0s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-timing-function: cubic-bezier(.86, 0, .07, 1);
    -moz-animation-iteration-count: 1;
    -moz-animation-fill-mode: forwards;
    -moz-animation-timing-function: cubic-bezier(.86, 0, .07, 1);
    -o-animation-iteration-count: 1;
    -o-animation-fill-mode: forwards;
    -o-animation-timing-function: cubic-bezier(.86, 0, .07, 1);
    -ms-animation-iteration-count: 1;
    -ms-animation-fill-mode: forwards;
    -ms-animation-timing-function: cubic-bezier(.86, 0, .07, 1);
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(.86, 0, .07, 1)
}

body .circles .bigCircle, body .circles .smallCircle {
    position: fixed
}

body .circles .bigCircle {
    top: -70px;
    width: 2947px;
    height: 2947px;
    border-radius: 2947px;
    text-align: center;
    background: linear-gradient(204deg, #fff 15.48%, hsla(0, 0%, 100%, 0) 62.97%);
    opacity: .12
}

@media (max-width: 480px) {
    body .circles .bigCircle {
        width: 876px;
        height: 876px;
        top: -3px
    }
}

body .circles .smallCircle {
    top: 50%;
    width: 1173px;
    height: 1173px;
    border-radius: 1173px;
    opacity: .06;
    background: linear-gradient(204deg, #fff 15.48%, hsla(0, 0%, 100%, 0) 50.01%)
}

@media (max-width: 480px) {
    body .circles .smallCircle {
        width: 757px;
        height: 757px;
        top: 40%
    }
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.container {
    padding: 2em;
    padding-top: 20vh;

}

body {
    animation: fadeInAnimation ease .5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.form-signin {
    padding: 2em;
}

img {
    margin-bottom: 2em;
}

#butpasswordReset {
    clear: both;
    display: block;
    margin: 1em 0;
    padding: 0;
}

#butLogin {
    min-width: 100px;
}

#logo {
    height: 100px;
}