body, html { font-family: Ariel, sans-serif; width: 100%; height: 100%; margin: 0; padding: 0; display: inline-block; overflow-x: hidden; text-align: right; }
.page { display: flex; flex-flow: row; flex-wrap: nowrap; align-items: center; justify-content: center; width: 100%; height: 100%; background-color: #65A192; }
.panel { display: inline-block; position: relative; }
.panel__visible { position: relative; overflow: hidden; }
.panel__title { margin-top: .5em; margin-bottom: 1.2em; }
.panel__content { padding: 20px; background-color: white; z-index: 10; position: relative; width: 400px; }
.panel__content--overlay { position: absolute; top: 0; left: 100%; height: 100%; }
.panel__content.animate { animation: movePanel 2s forwards; }

@keyframes movePanel {

    0%, 30% { transform: translateX(0%); }
    35%, 100% { transform: translateX(-100%); }
}

.panel__content.animateOut { animation: movePanelOut 2s forwards; }

@keyframes movePanelOut {
    0%, 30% { transform: translateX(-100%); }
    35%, 100% { transform: translateX(0%); }
}

.panel__back { position: absolute; z-index: 0; top: 50%; left: 0; width: 110%; transform: translate(70%,-50%); }
    .panel__back.animate { animation: move 2s forwards; }

@keyframes move {
    0% { transform: translate(70%,-50%); z-index: 0; }
    15% { transform: translate(140%,-50%); z-index: 10; }
    75% { transform: translate(-120%,-50%); z-index: 10; }
    100% { transform: translate(-50%,-50%); z-index: 0; }
}

.panel__back.animateOut { transform: translate(-50%,-50%); animation: moveOut 2s forwards; }

@keyframes moveOut {
    0 { transform: translate(-50%,-50%); z-index: 0; }
    15% { transform: translate(-120%,-50%); z-index: 10; }
    75% { transform: translate(140%,-50%); z-index: 10; }
    100% { transform: translate(70%,-50%); z-index: 0; }
}

.panel__img { width: 100%; display: block; }

/* Form */
.form { box-sizing: border-box; }
.form__label { display: block; color: #3D3D3D; font-weight: 600; margin-bottom: 5px; }
.form__input { border-radius: 3px; background-color: #f2f2f2; box-shadow: 0px 2px 2px #D6D6D6; border: none; padding: 2%; margin-bottom: 15px; width: 100%; box-sizing: border-box; position: relative; }
    .form__input:focus { box-shadow: none; outline-color: #33A192; }

.form__input--pass::after { /*   TODO: make this after portion work */ content: "👁️"; position: absolute; top: 0; left: 0; height: 50px; width: 50px; background-color: red; }
.form__btn { margin-top: 1.2em; margin-bottom: 2em; display: block; width: 100%; background-color: #33A192; color: white; border: none; padding: .6em; text-transform: uppercase; font-weight: 500; font-size: 1.1em; border-radius: 3px; cursor: pointer; }

.form__toggle { background-color: transparent; border: none; padding: 0; margin: 0; font-size: 1.1em; box-sizing: border-box; border-bottom: 1px solid transparent; cursor: pointer; }
    .form__toggle:hover { border-bottom: 1px solid #33A192; }
    .form__toggle:focus { outline: none; border-bottom: 1px solid #33A192; }

@media screen and (max-width: 760px) {
    body { background-color: lightgreen; }
    .panel__content { width: auto; padding:8px;}
    .page { height: auto; }
    .form__btn { margin-top: 0.5em;margin-bottom: 0.5em; }
    .panel__title {margin-top: .25em;margin-bottom: .25em;}
}

.text-center { text-align: center; }
.panel__title {margin-top: .5em;margin-bottom: .5em;}