.register{
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    padding: 50px 15px;

    &__content{
        display: flex;
        width: 60%;
        box-shadow: 1px 1px 2px 2px $junto-grey-2;
        @include respond(tab-port) {width: 80%;}
        @include respond(tab-land) {width: 75%;}
        @include respond(phone) {width: 100%; flex-flow: column nowrap;}
    }

    &__form label {
        font-size:  12.5px; 
        color:  #000;
        opacity:  .8;
        font-weight:  400; 
    }

    &__form {
        padding:  40px 30px; 
        background:  #fefefe; 
        display:  flex; 
        flex-direction:  column;
        align-items:  center; 
        width:  65%; 
        @include respond(big-desktop){padding: 40px 50px;}
        @include respond(phone) {width: 100%;}

        &__child{
            width: 100%;
            text-align: center;

            h3 {
                margin-bottom:  20px;
                color:  $junto-grey;
                font-size: 24px;
                font-weight: 500;
                @include respond(phone) {color: #fff;}

                span {
                    color:  rgba(#000, 1);
                    font-weight:900; 
                    @include respond(phone) {color: #fff;}
                }
            }
            p {

                line-height:  155%; 
                margin-bottom:  5px; 
                font-size:  14px; 
                color:  #000; 
                opacity:  .65;
                font-weight:  400; 
                max-width:  100%; 
                margin-bottom:  40px; 
                @include respond(phone) {color: #fff;}
            }
        }
        &__child:nth-of-type(1){
            @include respond(phone) {position: absolute; width: 95%; padding: 15px;}
        }
        &__child:nth-of-type(2){
            @include respond(phone) {padding-top: 220px;}
        }
        
    }
    &__submit{
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-end;
        
        &__btn {
            -webkit-appearance:  none; 
            width:  auto;
            min-width:  100px;
            border-radius:  24px; 
            text-align:  center; 
            padding:  15px 40px;
            margin-top:  5px; 
            background-color:  saturate($junto-primary, 30%); 
            color:  #fff; 
            font-size:  14px;
            margin-left:  auto; 
            font-weight:  500; 
            box-shadow:  0px 2px 6px -1px rgba(0,0,0,.13); 
            border:  none;
            transition:  all .3s ease; 
            outline: 0; 
    
            &:hover {
                cursor: pointer;
                transform:  translateY(-3px);
                box-shadow:  0 2px 6px -1px rgba($junto-primary, .65);
                &:active {
                transform:  scale(.99);
                }
            }
        }
    }
    

    &__form .form-group {
        position:  relative; 
        margin-bottom:  10px;
        width:  100%; 

        .form-control {
            width:  100%;
            margin-left:  auto;
            display:  flex; 
            font-size:  16px; 
            padding:  20px 0px; 
            border:  none; 
            border-bottom:  solid 1px rgba(0,0,0,.1); 
            background:  #fff; 
            box-sizing:  border-box; 
            transition:  all .3s linear; 
            color:  #000; 
            font-weight:  400;
            -webkit-appearance:  none; 

            &:focus {
                border-bottom:  solid 1px $junto-primary; 
                outline: 0; 
                box-shadow:  0 2px 6px -8px rgba($junto-primary, .45);
            }
        }

        label {
            position:  absolute; 
            top: calc(50% - 15px);
            left:  0; 
            opacity:  0; 
            transition:  all .3s ease; 
        }

        input:not(:placeholder-shown),
        textarea:not(:placeholder-shown) {
            padding:  28px 0px 12px 0px; 
        }
        input:not(:placeholder-shown) + label{
            transform:  translateY(-10px); 
            opacity:  .7; 
        }
        textarea:not(:placeholder-shown) + label{
            transform: translateY(-30px);
            opacity: .7;
        }
        input:not(:valid):not(:focus) + label,
        textarea:not(:valid):not(:focus) + label{
            animation-name: shake-shake;
            animation-duration: .3s;
        }
    }

    &__form .file-upload{
        display: flex;
        align-items: center;
        outline: 2px dashed $junto-grey-2;
        -moz-outline-radius: 5px;
        min-height: 150px;
        position: relative;
        cursor: pointer;
        padding:0;
        margin-top: 66px;
        
        &-header{
            position: absolute;
            top: -40px;

            p{
                font-size: 16px;
                line-height: 16px;
                letter-spacing: -0.45px;
                margin: 0;
                color: #777;
                opacity: 1;
            }
        }

        &-preview-img-container{
            display: none;
            justify-content: center;
            width: 35%;

            .preview-img{
                max-width: 75%;
                max-height: 175px;
                object-fit: contain;
                margin: 15px;
            }
        }

        #profile-picture{
            opacity: 0;
            width: 100%;
            height: 150px;
            position: absolute;
            cursor: pointer;
            padding: 0;
        }

        .uploading{
            width: 65%;
            left: auto;
            right: 0;
            position: relative;
            word-wrap: anywhere;
            padding-right: 15px;
        }

        label{
            font-size: 1.2rem;
            text-align: center;
            width: 100%;
            color:$junto-grey;
            cursor: pointer;
            transform: none !important;

            .image-name{
                font-weight: 900;
                color: $junto-grey;
            }
        }

        &:hover{
            outline: 2px dashed $junto-grey;
        }
    }

    $displacement:  3px; 
    @keyframes shake-shake {
        0% { transform: translateX(-$displacement);}
        20% { transform: translateX($displacement);}
        40% { transform: translateX(-$displacement);}
        60% { transform: translateX($displacement);}  
        80% { transform: translateX(-$displacement);}
        100% { transform: translateX(0px);}
    }
    &__left {
        width:  40%; 
        height:  auto; 
        min-height:  100%; 
        position:  relative; 
        background-image: url("./../../../src/assets/img/junto-web__sacred.png");
        background-size:  cover;
        border-top-left-radius:  5px; 
        border-bottom-left-radius: 5px; 
        background-repeat: no-repeat;
        @include respond(phone) {min-height: 0; width: calc(100% - 30px); position: absolute; height: 220px; border-top-left-radius: 0; border-bottom-left-radius: 0;}
    }
}