*{margin:0;padding:0;box-sizing:border-box}body{font-family:"Roboto",Arial,Helvetica,sans-serif}.my-container{display:flex;justify-content:center;align-items:center;height:100vh;background-color:#ef7909}.content{background-color:#f7f7f7;border-radius:15px;width:90%;height:90%;justify-content:space-between;align-items:center;position:relative}.content-smaller{height:60%}.content::before{content:"";position:absolute;background-color:#02642e;width:40%;height:100%;border-top-left-radius:15px;border-bottom-left-radius:15px;left:0}.title{font-size:28px;font-weight:bold;text-transform:capitalize}.title-primary{color:#f7f7f7}.title-second{color:#02642e}.description{font-size:14px;font-weight:300;line-height:30px}.description-primary{color:#f7f7f7}.description-second{text-align:center;color:#7f8c8d}.my-btn{border-radius:15px;text-transform:uppercase;color:#f7f7f7;font-size:10px;padding:10px 50px;cursor:pointer;font-weight:bold;width:150px;align-self:center;border:none;margin-top:1rem;text-decoration:none}a{text-decoration:none}.my-btn-primary{background-color:transparent;border:1px solid #f7f7f7;transition:background-color .5s}.my-btn-primary:hover{background-color:#f7f7f7;color:#02642e}.my-btn-second{background-color:#02642e;border:1px solid #02642e;transition:background-color .5s}.my-btn-second:hover{background-color:#f7f7f7;border:1px solid #02642e;color:#02642e}.first-content{display:flex}.first-content .second-column{z-index:11}.first-column{text-align:center;width:40%;z-index:10}.second-column{width:60%;display:flex;flex-direction:column;align-items:center}.social-media{margin:1rem 0}.link-social-media:not(:first-child){margin-left:10px}.link-social-media .item-social-media{transition:background-color .5s}.link-social-media:hover .item-social-media{background-color:#02642e;color:#f7f7f7;border-color:#02642e}.list-social-media{display:flex;list-style-type:none}.item-social-media{border:1px solid #bdc3c7;border-radius:50%;width:35px;height:35px;line-height:35px;text-align:center;color:#95a5a6}.form{display:flex;flex-direction:column;width:55%}.form input{height:45px;width:100%;border:none;background-color:#ecf0f1}input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #ecf0f1 inset!important;-webkit-text-fill-color:#000!important}.label-input{background-color:#ecf0f1;display:flex;align-items:center;margin:8px}.icon-modify{color:#7f8c8d;padding:0 5px}.second-content{position:absolute;display:flex}.second-content .first-column{order:2;z-index:-1}.second-content .second-column{order:1;z-index:-1}.password{color:#34495e;font-size:14px;margin:15px 0;text-align:center}.password::first-letter{text-transform:capitalize}.sign-in-js .first-content .first-column{z-index:-1}.sign-in-js .second-content .second-column{z-index:11}.sign-in-js .second-content .first-column{z-index:13}.sign-in-js .content::before{left:60%;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:15px;border-bottom-right-radius:15px;z-index:12}.sign-up-js .content::before{z-index:12}.sign-up-js .second-content .first-column,.sign-up-js .second-content .second-column{z-index:-1}.sign-up-js .first-content .second-column{z-index:11}.sign-up-js .first-content .first-column{z-index:13}.sign-in-js .first-content .second-column{z-index:-1;position:relative}.sign-up-js .second-content .second-column{position:relative;z-index:-1}.my-box-container{width:70%;text-align:center;font-size:large}.my-icon{padding-bottom:0}@keyframes deslocamentoEsq {

    from {
        left: 0;
        opacity: 1;
        z-index: 12;
    }

    25% {
        left: -80px;
        opacity: .5;
        /* z-index: 12; NÃO HÁ NECESSIDADE */
    }

    50% {
        left: -100px;
        opacity: .2;
        /* z-index: 12; NÃO HÁ NECESSIDADE */
    }

    to {
        left: -110px;
        opacity: 0;
        z-index: -1;
    }
}@keyframes deslocamentoDir {

    from {
        left: 0;
        z-index: 12;
    }

    25% {
        left: 80px;
        /* z-index: 12;  NÃO HÁ NECESSIDADE*/
    }

    50% {
        left: 100px;
        /* z-index: 12; NÃO HÁ NECESSIDADE*/
        /* background-color: yellow;  Exemplo que dei no vídeo*/
    }

    to {
        left: 110px;
        z-index: -1;
    }
}@keyframes slidein {

    from {
        left: 0;
        width: 40%;
    }

    25% {
        left: 5%;
        width: 50%;
    }

    50% {
        left: 25%;
        width: 60%;
    }

    75% {
        left: 45%;
        width: 50%;
    }

    to {
        left: 60%;
        width: 40%;
    }
}@keyframes slideout {

    from {
        left: 60%;
        width: 40%;
    }

    25% {
        left: 45%;
        width: 50%;
    }

    50% {
        left: 25%;
        width: 60%;
    }

    75% {
        left: 5%;
        width: 50%;
    }

    to {
        left: 0;
        width: 40%;
    }
}@media screen and (max-width:1040px){.content{width:100%;height:100%}.content::before{width:100%;height:40%;top:0;border-radius:0}.first-content,.second-content{flex-direction:column;justify-content:space-around}.first-column,.second-column{width:100%}.sign-in-js .content::before{top:60%;left:0;border-radius:0}.form{width:90%}@keyframes deslocamentoEsq {

        from {
            top: 0;
            opacity: 1;
            z-index: 12;
        }

        25% {
            top: -80px;
            opacity: .5;
            /* z-index: 12; NÃO HÁ NECESSIDADE */
        }

        50% {
            top: -100px;
            opacity: .2;
            /* z-index: 12; NÃO HÁ NECESSIDADE */
        }

        to {
            top: -110px;
            opacity: 0;
            z-index: -1;
        }
    }@keyframes deslocamentoDir {

        from {
            top: 0;
            z-index: 12;
        }

        25% {
            top: 80px;
            /* z-index: 12;  NÃO HÁ NECESSIDADE*/
        }

        50% {
            top: 100px;
            /* z-index: 12; NÃO HÁ NECESSIDADE*/
            /* background-color: yellow;  Exemplo que dei no vídeo*/
        }

        to {
            top: 110px;
            z-index: -1;
        }
    }@keyframes slidein {

        from {
            top: 0;
            height: 40%;
        }

        25% {
            top: 5%;
            height: 50%;
        }

        50% {
            top: 25%;
            height: 60%;
        }

        75% {
            top: 45%;
            height: 50%;
        }

        to {
            top: 60%;
            height: 40%;
        }
    }@keyframes slideout {

        from {
            top: 60%;
            height: 40%;
        }

        25% {
            top: 45%;
            height: 50%;
        }

        50% {
            top: 25%;
            height: 60%;
        }

        75% {
            top: 5%;
            height: 50%;
        }

        to {
            top: 0;
            height: 40%;
        }
    }}@media screen and (max-width:740px){.form{width:50%}}@media screen and (max-width:425px){.form{width:100%}}