body {
    background-color: #A8A8A8;
    font-family: 'Roboto', sans-serif;
}

.container {
    /*border:1px solid white;*/
   
    /*width: 600px;*/
    height: 350px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-70%, -50%);
    display: inline-flex;
    box-shadow: rgba(0,0,0,0.4);
}

.backbox {
    background-color: #404040;
    width: 100%;
    height: 70%;
    position: absolute;
    transform: translate(0,-50%);
    top: 50%;
    display: inline-flex;
}

.frontbox {
    box-shadow: 2px 8px #0a0a0a57;
    background-color: white;
    border-radius: 20px;
    height: 100%;
    width: 50%;
    z-index: 10;
    position: absolute;
    right: 0;
    margin-right: 3%;
    margin-left: 3%;
    transition: right .8s ease-in-out;
}

.moving {
    right: 45%;
}

.loginMsg, .signupMsg {
    width: 50%;
    height: 100%;
    font-size: 15px;
    box-sizing: border-box;
}

    .loginMsg .title,
    .signupMsg .title {
        font-weight: 300;
        font-size: 23px;
    }

    .loginMsg p,
    .signupMsg p {
        font-weight: 100;
    }

.textcontent {
    color: white;
    margin-top: 65px;
    margin-left: 12%;
}

.loginMsg button,
.signupMsg button {
    background-color: #404040;
    border: 2px solid white;
    border-radius: 10px;
    color: white;
    font-size: 12px;
    box-sizing: content-box;
    font-weight: 300;
    padding: 10px;
    margin-top: 20px;
}

/* front box content*/
.login, .signup {
    padding: 20px;
    text-align: center;
}

    .login h2,
    .signup h2 {
        color: #35B729;
        font-size: 22px;
    }

.inputbox {
    margin-top: 30px;
}

.login input,
.signup input {
    display: block;
    width: 100%;
    height: 40px;
    /*background-color: #f2f2f2;*/
    border: none;
    margin-bottom: 20px;
    font-size: 12px;
    border-bottom: 1px solid #0087a6;
    outline-color: #510A32;
}
.login img{
    width:120px;
    height:120px;
    border-radius: 50%;
    margin-top: -80px;
    margin-bottom: 15px;
}

.login button,
.signup button {
    background-color: #35B729;
    border: none;
    color: white;
    font-size: 12px;
    font-weight: 300;
    box-sizing: content-box;
    padding: 10px;
    border-radius: 10px;
    width: 80px;
    position: absolute;
    right: 30px;
    bottom: 30px;
    cursor: pointer;
}

/* Fade In & Out*/
.login p {
    cursor: pointer;
    color: #404040;
    font-size: 15px;
}

.loginMsg, .signupMsg {
    /*opacity: 1;*/
    transition: opacity .8s ease-in-out;
}

.visibility {
    opacity: 0;
}

.hide {
    display: none;
}
.animation {
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    -webkit-animation-timing-function: ease-in;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-timing-function: ease-in;
}
@keyframes flipInX {
    0% {
        transform: perspective(400px) rotateX(80deg);
        opacity: 0;
    }

    40% {
        transform: perspective(400px) rotateX(-15deg);
    }

    70% {
        transform: perspective(400px) rotateX(20deg);
    }

    100% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@-webkit-keyframes flipInX {
    0% {
        transform: perspective(400px) rotateX(80deg);
        opacity: 0;
    }

    40% {
        transform: perspective(400px) rotateX(-15deg);
    }

    70% {
        transform: perspective(400px) rotateX(20deg);
    }

    100% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}

.flipInX {
    -webkit-backface-visibility: visible !important;
    -webkit-animation-name: flipInX;
    backface-visibility: visible !important;
    animation-name: flipInX;
}