body, html{ 
   
    font-family: Ariel, sans-serif;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    display:inline-block;
}
.page{ 
   
    display:flex;
    flex-flow:row;
    flex-wrap:nowrap;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    background-color: #0f95b0;
}
.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;
	height:420px;
}
.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(-280%,-50%);
    z-index:10;
}
100%{ 
   
    transform: translate(-230%,-50%);
    z-index:0;
}
}
.panel_back.animateOut{ 
   
    transform: translate(-50%,-50%);
    animation: moveOut 2s forwards ;
}
@keyframes moveOut{ 
   
0%{ 
   
    transform: translate(-230%,-50%);
    z-index:0;
}
15%{ 
   
    transform: translate(-280%,-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: 250px;
    box-sizing:border-box;
    position:relative;
}
.form_input:focus{ 
   
    box-shadow: none;
    outline-color: #0f95b0;
}

.form_input::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: #0f95b0;
    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 #0f95b0;
}
.form_toggle:focus{ 
   
    outline: none;
    border-bottom: 1px solid #0f95b0;
}