@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');

* {
    box-sizing: border-box;
}

body {
    background: #f6f5f7;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    height: 100vh;
    margin: 0px auto;
    overflow: hidden;
    background: -webkit-linear-gradient(
            90deg, #485563 10%, #29323c 90%);
    background: -moz-linear-gradient(90deg, #485563 10%, #29323c 90%);
    background: -ms-linear-gradient(90deg, #485563 10%, #29323c 90%);
    background: -o-linear-gradient(90deg, #485563 10%, #29323c 90%);
    background: linear-gradient(
            90deg, #485563 10%, #29323c 90%);
}

h1 {
    font-weight: bold;
    margin: 0;
}

h2 {
    text-align: center;
}

p {
    font-size: 14px;
    font-weight: 100;
    line-height: 20px;
    letter-spacing: 0.5px;
    margin: 20px 0 30px;
}

span {
    font-size: 14px;
}

a {
    color: #333;
    font-size: 14px;
    text-decoration: none;
    margin: 15px 0;
}

button {
    border-radius: 20px;
    border: 1px solid #FF4B2B;
    background-color: #FF4B2B;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: bold;
    padding: 12px 45px;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: transform 80ms ease-in;
}

button:active {
    transform: scale(0.95);
}

button:focus {
    outline: none;
}

button.ghost {
    background-color: transparent;
    border-color: #FFFFFF;
}

form {
    background-color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 50px;
    height: 100%;
    text-align: center;
    border-radius: 4px;
}

input {
    background-color: #eee;
    border: none;
    padding: 12px 15px;
    margin: 8px 0;
    width: 100%;
}

.container {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25),
    0 10px 10px rgba(0, 0, 0, 0.22);
    position: relative;
    overflow: hidden;
    width: 768px;
    max-width: 100%;
    min-height: 480px;
}

.form-container {
    position: absolute;
    top: 0;
    height: 100%;
    transition: all 0.6s ease-in-out;
}

.sign-in-container {
    left: 0;
    width: 50%;
    z-index: 3;
}

.container.right-panel-active .sign-in-container {
    transform: translateX(100%);
}

.sign-up-container {
    left: 0;
    width: 50%;
    opacity: 0;
    z-index: 1;
}

.container.right-panel-active .sign-up-container {
    transform: translateX(100%);
    opacity: 1;
    z-index: 5;
    animation: show 0.6s;
}

@keyframes show {
    0%, 49.99% {
        opacity: 0;
        z-index: 1;
    }

    50%, 100% {
        opacity: 1;
        z-index: 5;
    }
}

.overlay-container {
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    height: calc(100% + 0.2px);
    overflow: hidden;
    transition: transform 0.6s ease-in-out;
    z-index: 6;
}

.overlay-container2 {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: white;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.container.right-panel-active .overlay-container {
    transform: translateX(-100%);
}

.overlay {
    background: #FF416C;
    background: -webkit-linear-gradient(to right, #FF4B2B, #FF416C);
    background: linear-gradient(to right, #FF4B2B, #FF416C);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 0;
    color: #FFFFFF;
    position: relative;
    left: -100%;
    height: 100%;
    width: 200%;
    border-radius: 4px;
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
}

.container.right-panel-active .overlay {
    transform: translateX(50%);
}

.overlay-panel {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 40px;
    text-align: center;
    top: 0;
    height: 100%;
    width: 50%;
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
}

.overlay-left {
    transform: translateX(-20%);
}

.container.right-panel-active .overlay-left {
    transform: translateX(0);
}

.overlay-right {
    right: 0;
    transform: translateX(0);
}

.container.right-panel-active .overlay-right {
    transform: translateX(20%);
}

.social-container {
    margin: 20px 0;
}

.social-container a {
    border: 1px solid #DDDDDD;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0 5px;
    height: 40px;
    width: 40px;
}

footer {
    background-color: #222;
    color: #fff;
    font-size: 14px;
    bottom: 0;
    position: fixed;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 999;
}

footer p {
    margin: 10px 0;
}

footer i {
    color: red;
}

footer a {
    color: #3c97bf;
    text-decoration: none;
}

#app {
    font-family: Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /*background: var(--bg-scnd);*/
    display: grid;
    z-index: 10;
    overflow: initial;
}

#app, #sign {
    position: relative;
}

#sign {
    background: var(--bg-main);
    width: 900px;
    height: 600px;
    margin: auto;
    border-radius: 10px;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 20%);
    z-index: auto;
}

.form {
    position: absolute;
    width: inherit;
    height: inherit;
}

.form-sign-in {
    width: 550px;
    position: absolute;
    height: inherit;
    display: grid;
    align-content: center;
    justify-content: center;
    -webkit-clip-path: inset(0 0 0 0 round 5px);
    clip-path: inset(0 0 0 0 round 5px);
}

.form-sign-up {
    width: 550px;
    position: absolute;
    height: inherit;
    display: grid;
    align-content: center;
    justify-content: center;
    right: 0;
    -webkit-clip-path: inset(0 0 0 0 round 5px);
    clip-path: inset(0 0 0 0 round 5px);
}

.holder {
    width: 350px;
}

.holder {
    -moz-text-align-last: center;
    text-align-last: center;
}

.holder > span {
    color: var(--txt-medium-dark);
    cursor: default;
}

.float-container[data-v-473a04b1] {
    position: relative;
    height: 50px;
    margin-top: 1.7em;
    display: grid;
}

form input[type=email][data-v-473a04b1], form input[type=password][data-v-473a04b1], form input[type=text][data-v-473a04b1] {
    background: var(--txt-box-bg);
    border: 0;
    padding: 1em;
    text-align: start;
    -moz-text-align-last: left;
    text-align-last: left;
    width: -webkit-fill-available;
    width: -moz-available;
    position: absolute;
}

form input[type=submit] {
    background: var(--accent);
    color: var(--txt-main);
    padding: 20px 70px;
    border: 0;
    border-radius: 200px;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .85em;
    margin: 3em;
    margin-bottom: 0;
}

.float-container label[data-v-473a04b1] {
    position: absolute;
    transform: translateY(10px) scale(1);
    transition: all .1s ease-in-out;
    cursor: text;
    width: -webkit-fill-available;
    width: -moz-available;
    -moz-text-align-last: left;
    text-align-last: left;
    padding: 6px 15px;
    color: var(--txt-medium-dark);
    pointer-events: none;
    font-size: .85em;
}

.float-container input + label i[data-v-473a04b1] {
    margin-right: .8em;
    color: #d6d6d6;
}

.socials {
    margin: 1.2em 0;
}

.socials button {
    background: var(--bg-main);
    border: 1px solid var(--txt-medium);
    width: 45px;
    height: 45px;
    border-radius: 100%;
    margin: 5px;
    font-size: 1.1em;
}

.triangle {
    position: absolute;
    z-index: 6;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -ms-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
}

.right-panel-active .triangle {
    z-index: 2;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -ms-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
}

.circle {
    position: absolute;
    z-index: 2;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -ms-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
}

.right-panel-active .circle {
    z-index: 6;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -ms-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
}

.circle {
    left: -200px;
    bottom: -35px;
    transform-origin: center;
    -webkit-animation: rotating2 180s infinite;
    animation: rotating2 180s infinite;
}

.triangle {
    right: -180px;
    top: -160px;
    transform-origin: 200px;
    -webkit-animation: example 120s infinite;
    animation: example 120s infinite;
}

.switch {
    position: absolute;
    width: inherit;
    height: inherit;
    z-index: 100;
    -webkit-clip-path: inset(0 0 0 550px round 5px);
    clip-path: inset(0 0 0 550px round 5px);
    background: #38b78f;
    background: radial-gradient(circle at bottom left, #38b78f 0, #3aa7b1 100%);
    transition: -webkit-clip-path .6s;
    transition: clip-path .6s;
    transition: clip-path .6s, -webkit-clip-path .6s;
    overflow: hidden;
    display: grid;
}

.active {
    -webkit-clip-path: inset(0 550px 0 0 round 5px) !important;
    clip-path: inset(0 550px 0 0 round 5px) !important;
}

.switch.active > .group > .toggle {
    transform: translateX(0);
}

.form img, .switch img {
    max-width: 30px;
    position: absolute;
    margin: 1em;
}

.switch img {
    -webkit-filter: grayscale(1) brightness(3);
    filter: grayscale(1) brightness(3);
}

.group > .txt {
    width: -webkit-fill-available;
    display: flow-root;
}

.group {
    width: 100%;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    align-self: center;
    position: relative;
    z-index: 6;
}

.sign {
    display: grid;
    padding: 0 3em;
    box-sizing: border-box;
}

.sign h3 {
    color: var(--txt-main);
    font-weight: 700;
    margin: 0;
    margin-bottom: 1em;
    font-size: xx-large;
    text-align: center;
}

.sign-in, .sign-up {
    max-width: 350px;
    height: inherit;
}

.sign-up {
    float: right;
}

.forgot {
    margin: 1.5em;
    display: block;
}

.forgot span {
    border-bottom: 3px solid #f4f8f7;
    padding: 5px 0;
    color: #000 !important;
}

.container {
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    align-self: center;
    text-align: center;
}

.container > span {
    color: var(--txt-main);
    line-height: 1.7;
    letter-spacing: .02em;
    font-weight: 300;
}

.toggle {
    width: 350px;
    text-align: center;
    transform: translateX(550px);
    transition: all .6s ease;
    margin-top: 3em;
}

.toggle > button {
    background: transparent;
    border: 1px solid var(--txt-main);
    color: var(--txt-main);
    padding: 20px 70px;
    border-radius: 200px;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .85em;
    margin-bottom: 0;
}

.toggle > button:focus {
    outline: 0;
}

a, button, form input[type=submit] {
    cursor: pointer;
}

button, input[type=submit] {
    transition: -webkit-filter .2s;
    transition: filter .2s;
    transition: filter .2s, -webkit-filter .2s;
}

.ornaments {
    pointer-events: none;
}

svg.group > polygon:nth-child(odd) {
    -webkit-animation: rotating 25s ease-in-out infinite;
    animation: rotating 25s ease-in-out infinite;
}

svg.group > polygon:nth-child(2n) {
    -webkit-animation: rotating 14s ease-in-out infinite;
    animation: rotating 14s ease-in-out infinite;
}

.company-logo {
    width: 100px;
    margin-bottom: 10px;
}

.language-select {
    position: absolute;
    top: 0px;
    color: dimgrey;
}

.language-select:hover {
    color: black;
    text-decoration: none;
}

.language-select.left {
    left: 22px;
}

.language-select.right {
    right: 22px;
}

a, #signUpSm, #signInSm {
    color: dimgrey;
}

a:hover, #signUpSm:hover, #signInSm:hover {
    color: black;
    text-decoration: none;
}

@media screen and (max-width: 900px) {
    .overlay-container {
        position: fixed;
    }

    #app {
        position: fixed;
        background: transparent;
        box-shadow: none;
        width: 100%;
        margin: 0px !important;
        padding: 0px;
        height: 100vh;
    }

    .overlay-container2 {
        background: transparent;
    }

    .triangle {
        right: 0px;
        top: 10%;
        transform-origin: 0px;
        position: fixed;
    }

    .circle {
        left: 50px;
        bottom: 35px;
        transform-origin: center;
    }
}

@media screen and (max-width: 1024px) {
    .sign-in-container, .sign-up-container {
        width: 100%;
        transition: none;
    }

    .sign-up-container {
        width: 100%;
        transform: translateX(100%);
        transition: none;
    }

    .container.right-panel-active .sign-up-container {
        transform: translateX(0%);
        animation: none;
        transition: transform 0.6s ease-in-out;
    }

    .container.left-panel-active .sign-up-container {
        transform: translateX(100%);
        transition: transform 0.6s ease-in-out;
        opacity: 1 !important;
        z-index: 5;
    }

    .overlay-container {
        display: none;
    }

    form {
        border-radius: 0px;
    }

    .container.right-panel-active .sign-in-container {
        transform: none;
    }

    .ornaments, .triangle, .circle {
        display: none;
    }

    .language-select {
        right: 22px !important;
        left: unset !important;
    }
}

@keyframes example {
    0% {
        transform: rotate(
                20deg) translateX(0);
    }
    30% {
        transform: rotate(
                40deg) translateX(4em);
    }
    40% {
        transform: rotate(
                40deg) translateX(2em);
    }
    40% {
        transform: rotate(
                40deg) translateX(6em);
    }
    40% {
        transform: rotate(
                40deg) translateX(4em);
    }
    100% {
        transform: rotate(
                20deg) translateX(0);
    }
}

@keyframes examplex {
    0% {
        transform: scale(1) translateY(0);
    }
    30% {
        transform: scale(1.2) translateY(4em);
    }
    40% {
        transform: scale(1) translateY(2em);
    }
    40% {
        transform: scale(1.4) translateY(6em);
    }
    40% {
        transform: scale(1.2) translateY(4em);
    }
    100% {
        transform: scale(1) translateY(0);
    }
}

@keyframes rotating {
    0% {
        transform: scale(1) translateY(0);
    }
    50% {
        transform: scale(1.05) translateY(4em);
    }
    100% {
        transform: scale(1) translateY(0);
    }
}

@keyframes rotating2 {
    0% {
        transform: rotate(20deg) scale(1) translateY(0);
    }
    50% {
        transform: rotate(-100deg) scale(1.05) translateY(1em);
    }
    100% {
        transform: rotate(20deg) scale(1) translateY(0);
    }
}