* {
    transition: all 0.5s ease-in-out;
}

.main-menu {
    border-bottom: 1px solid #eef4f9
}

.client-page {
    padding: 0;
    margin: 0;
    background: url('../images/pattern.png') repeat #f4f4f4;
}

.main-body {
    position: absolute;
    top: 0;
    height: 100%;

}

.sign-in {
    left: 0;
    width: 50%;
    z-index: 2;
    opacity: 1;
}

.sign-up {
    left: 0;
    width: 50%;
    opacity: 0;
    z-index: 1;
}

.client-form>.inner {
    position: relative;
    background-color: transparent;
    width: 90%;
    min-height: 850px;
    border-radius: 25px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    box-shadow: 0 0 15px #d7dee9;
    -moz-box-shadow: 0 0 15px #d7dee9;
    -webkit-box-shadow: 0 0 15px #d7dee9;
    margin: auto;
    margin-bottom: 100px;
    border-radius: 50px;
}

.client-form .inner form {
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 50px;
    height: 100%;
    text-align: center;
    border-radius: 50px;

}

.client-page .client-form>.inner form>h1 {
    display: block;
    width: 100%;
    text-align: center;
    padding: 15px 0 10px;
    font-size: 20px;
    line-height: 35px;
    color: #1e2f38;
    margin-top: 20px;
}

.client-page .client-form>.inner form>p {
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 28px;
    color: #3e535e;
    padding: 5px 0
}

.client-page .client-form>.inner form>img {
    width: 80%;
    display: block;
    margin: 0 auto 0px
}

.client-page .client-form>.inner form .other-ways {
    width: 100%;
    position: relative;
    margin: 30px 0 25px
}

.client-page .client-form>.inner form .other-ways:before {
    width: 100%;
    height: 4px;
    background-color: #edf1f4;
    position: absolute;
    content: '';
    border-radius: 100%;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    right: 0;
    top: 20px;
    z-index: 1
}

.client-page .client-form>.inner form .other-ways .inside {
    width: auto;
    padding: 0 15px;
    background-color: #fff;
    z-index: 2;
    display: table;
    margin: 0 auto;
    text-align: center;
    position: relative;
}

.client-page .client-form>.inner form .other-ways .inside a {
    padding: 0 10px;
    font-size: 28px;
    display: inline-table;
    line-height: 30px;
    position: relative;
    top: 5px
}

.client-page .client-form>.inner form .other-ways .inside a.google-account {
    color: #fb000d
}

.client-page .client-form>.inner form .other-ways .inside a.github-account {
    color: #3e535e
}

.client-page .client-form>.inner form .other-ways .inside a:hover {
    color: #9fd98c
}

.client-page .client-form>.inner form .input-element {
    width: 100%;
    height: 45px;
    position: relative;
    margin-bottom: 18px
}

.client-page .client-form>.inner form .select-element {
    width: 100%;
    position: relative;
    margin-bottom: 25px
}

.client-page .client-form>.inner form .input-element input,
.client-page .client-form>.inner form .select-element select {
    width: 100%;
    line-height: 45px;
    height: 45px;
    padding: 0 45px 0 15px;
    font-size: 13px;
    color: #1e2f38;
    border: 1px solid #edf1f4;
    background-color: #fff;
    border-radius: 7px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
}

.client-page .client-form>.inner form .select-element label {
    width: 100%;
    display: block;
    line-height: 25px;
    padding-bottom: 8px;
    margin-top: 5px
}

.client-page .client-form>.inner form .input-element i {
    position: absolute;
    right: 17px;
    top: 13px;
    font-size: 19px;
    color: #d4dee3
}


.client-page .client-form>.inner form .checkbox-remember {
    width: 100%;
    margin: 12px 0 15px;
    position: relative;
}

.client-page .client-form>.inner form .checkbox-remember input {
    position: absolute;
    right: 0;
    top: 0;
    visibility: hidden;
}

.client-page .client-form>.inner form .checkbox-remember label {
    display: block;
    line-height: 35px;
    width: 100%;
    font-size: 13px;
    padding-right: 28px;
    position: relative;
    color: #686e71;
    -webkit-user-select: none;
    /* Chrome all / Safari all */
    -moz-user-select: none;
    /* Firefox all */
    -ms-user-select: none;
    /* IE 10+ */
    user-select: none;
}

.client-page .client-form>.inner form .checkbox-remember label:before {
    width: 19px;
    height: 19px;
    line-height: 17px;
    text-align: center;
    position: absolute;
    right: 0;
    top: 8px;
    content: '';
    font-family: 'material';
    font-size: 17px;
    color: #6fc341;
    border: 1px solid #d8e1e8;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}

.client-page .client-form>.inner form .checkbox-remember label:hover {
    cursor: pointer;
}

.client-page .client-form>.inner form .checkbox-remember input:checked+label:before {
    content: '\f26b';
}

.client-page .client-form>.inner form .other-link {
    width: 100%;
    position: relative;
    padding-bottom: 5px
}

.client-page .client-form>.inner form .other-link.password-recovery {
    margin-top: 25px
}

.client-page .client-form>.inner form .other-link a,
.client-page .client-form>.inner form .other-link p {
    width: 100%;
    display: block;
    font-size: 13px;
    line-height: 25px;
    color: #3e535e;
    margin-bottom: 20px;
    cursor: pointer;
}


.client-page .client-form>.inner form .other-link a i.zmdi-lock {
    position: relative;
    top: 2px;
    right: 1px;
    font-size: 16px;
    width: 20px;
    text-align: right;
}


.client-page .client-form>.inner form .other-link a:hover,
.client-page .client-form>.inner form .other-link a:hover .fa-sign-in-alt,
.client-page .client-form>.inner form .other-link a:hover .fa-user-plus {
    color: #6fc341;
}

.client-page .client-form>.inner form button {
    margin-top: -50px;
    width: 100%;
}


.side-box {
    position: relative;
    width: 100% !important;
    min-height: 850px;
    background-color: #fff;
    text-align: center;
    border-radius: 50px;
    z-index: 1;

}

.side-box h2 {
    font-size: 30px;
    margin-bottom: 5px;
}

.side-box button {
    padding: 0px 100px;
    background-color: transparent;
    border: 1px solid #fff;
    border-radius: 50px;
    transition: 0.3s;
}

.side-box button:hover {
    background-color: #9fd98c;
    transform: scale(1.1);
    color: #2f0c55;
}

.sign-up-box {
    position: absolute;
    min-height: 850px;
    width: 50%;
    right: 0;
    padding-top: 40%;
    z-index: 100;
    color: #fff;
    background-color: #2f0c55;
    line-height: 50px;
    border-radius: 0px 50px 50px 0;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1000' height='500' preserveAspectRatio='none' viewBox='0 0 1000 500'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1091%26quot%3b)' fill='none'%3e%3crect width='1000' height='500' x='0' y='0' fill='rgba(47%2c 12%2c 85%2c 1)'%3e%3c/rect%3e%3cpath d='M0%2c366.54C75.525%2c372.525%2c151.872%2c374.426%2c221.624%2c344.854C299.508%2c311.835%2c371.641%2c261.976%2c416.222%2c190.082C463.935%2c113.137%2c511.478%2c15.418%2c478.091%2c-68.739C444.148%2c-154.298%2c330.338%2c-168.9%2c253.624%2c-219.767C199.931%2c-255.369%2c156.16%2c-303.23%2c94.807%2c-322.882C32.405%2c-342.87%2c-32.072%2c-334.5%2c-97.559%2c-332.255C-185.445%2c-329.242%2c-284.403%2c-360.118%2c-354.838%2c-307.469C-426.197%2c-254.13%2c-461.174%2c-154.212%2c-454.613%2c-65.363C-448.336%2c19.637%2c-368.999%2c76.1%2c-321.298%2c146.732C-282.366%2c204.38%2c-257.559%2c272.155%2c-200.146%2c311.433C-141.854%2c351.312%2c-70.407%2c360.961%2c0%2c366.54' fill='%231f0837'%3e%3c/path%3e%3cpath d='M1000 877.115C1069.0720000000001 884.89 1122.016 818.269 1178.56 777.844 1232.271 739.444 1285.868 702.3389999999999 1321.878 646.9970000000001 1362.179 585.06 1412.248 515.183 1396.435 443.001 1380.633 370.871 1302.97 332.755 1243.46 289.03999999999996 1195.113 253.525 1138.299 239.291 1084.104 213.56799999999998 1017.567 181.98700000000002 961.636 111.10300000000001 888.601 120.61000000000001 815.62 130.111 771.265 204.42200000000003 723.5989999999999 260.497 676.351 316.08000000000004 613.079 371.459 613.358 444.409 613.635 516.812 680.307 568.624 724.9970000000001 625.59 759.948 670.142 803.7470000000001 702.142 845.531 740.359 897.325 787.731 930.249 869.264 1000 877.115' fill='%23401073'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1091'%3e%3crect width='1000' height='500' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
    background-size: cover;
    background-position: top right;
}

.sign-in-box {
    position: absolute;
    min-height: 850px;
    width: 50%;
    right: 0;
    padding-top: 40%;
    z-index: 99;
    color: #fff;
    background-color: #2f0c55;
    line-height: 50px;
    border-radius: 0px 50px 50px 0;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1000' height='500' preserveAspectRatio='none' viewBox='0 0 1000 500'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1091%26quot%3b)' fill='none'%3e%3crect width='1000' height='500' x='0' y='0' fill='rgba(47%2c 12%2c 85%2c 1)'%3e%3c/rect%3e%3cpath d='M0%2c366.54C75.525%2c372.525%2c151.872%2c374.426%2c221.624%2c344.854C299.508%2c311.835%2c371.641%2c261.976%2c416.222%2c190.082C463.935%2c113.137%2c511.478%2c15.418%2c478.091%2c-68.739C444.148%2c-154.298%2c330.338%2c-168.9%2c253.624%2c-219.767C199.931%2c-255.369%2c156.16%2c-303.23%2c94.807%2c-322.882C32.405%2c-342.87%2c-32.072%2c-334.5%2c-97.559%2c-332.255C-185.445%2c-329.242%2c-284.403%2c-360.118%2c-354.838%2c-307.469C-426.197%2c-254.13%2c-461.174%2c-154.212%2c-454.613%2c-65.363C-448.336%2c19.637%2c-368.999%2c76.1%2c-321.298%2c146.732C-282.366%2c204.38%2c-257.559%2c272.155%2c-200.146%2c311.433C-141.854%2c351.312%2c-70.407%2c360.961%2c0%2c366.54' fill='%231f0837'%3e%3c/path%3e%3cpath d='M1000 877.115C1069.0720000000001 884.89 1122.016 818.269 1178.56 777.844 1232.271 739.444 1285.868 702.3389999999999 1321.878 646.9970000000001 1362.179 585.06 1412.248 515.183 1396.435 443.001 1380.633 370.871 1302.97 332.755 1243.46 289.03999999999996 1195.113 253.525 1138.299 239.291 1084.104 213.56799999999998 1017.567 181.98700000000002 961.636 111.10300000000001 888.601 120.61000000000001 815.62 130.111 771.265 204.42200000000003 723.5989999999999 260.497 676.351 316.08000000000004 613.079 371.459 613.358 444.409 613.635 516.812 680.307 568.624 724.9970000000001 625.59 759.948 670.142 803.7470000000001 702.142 845.531 740.359 897.325 787.731 930.249 869.264 1000 877.115' fill='%23401073'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1091'%3e%3crect width='1000' height='500' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
    background-size: cover;
    background-position: top right;
}

.fa-sign-in-alt,
.fa-user-plus {
    margin-left: 5px;
    color: #686e71;
}

.mobile-btn {
    display: none !important;
}


/* ************** media query ****************** */

/* ******************************991****************************** */
@media screen and (max-width : 991px) {

    .client-form p,
    a {
        font-size: 12px !important;
    }

    .client-form h2 {
        font-size: 14px;
    }

    .client-form h1 {
        font-size: 18px;
    }

    .client-page .client-form>.inner form .input-element input,
    .client-page .client-form>.inner form .select-element select {
        font-size: 12px;
    }
    label {
        font-size: 12px !important;
    }
}

/* ******************767************************** */
@media screen and (max-width : 767px) {
    .sign-in {
        width: 100%;
        z-index: 2;
        left: 0 !important;
    }

    .sign-up {
        width: 100%;
        opacity: 1;
        z-index: 1;
        left: 0 !important;
    }

    .mobile-btn {
        display: block !important;
    }

    .side-box {
        display: none;
    }


    .client-page .client-form {
        padding: 35px 0 80px;
        width: 100%
    }

    .client-page .client-form .inner:before {
        display: none
    }
    .client-page .client-form>.inner form>img{
        width:40%;
    }
    .client-page .client-form>.inner form>h1{
        line-height: 5px;
    }

    .client-form p,
    a {
        font-size: 11px !important;
    }

    .client-form h2 {
        font-size: 13px;
    }

    .client-form h1 {
        font-size: 16px;
    }

    .client-page .client-form>.inner form .input-element input,
    .client-page .client-form>.inner form .select-element select {
        font-size: 11px;
    }
    label {
        font-size: 11px !important;
    }
}
/* *********************600********************************* */
@media screen and (max-width : 600px) {

    .client-page .client-form form div.pull-left,
    .client-page .client-form form div.pull-right {
        float: none;
        width: 100%;
    }

    .client-page .client-form form div.pull-left {
        padding-top: 10px;
        padding-bottom: 5px
    }

    .client-page .client-form>.inner form button {
        width: 100%;
        margin: 5px 0 15px
    }

    .client-page .client-form>.inner form {
        padding: 15px 25px 25px
    }
    .client-form>.inner,
    .side-box,
    .sign-up-box,
    .sign-in-box{
        min-height: 950px;
    }
    .client-page .client-form>.inner form>img{
        width:55%;
    }
}
/* **********************450********************************** */
@media screen and (max-width : 450px) {

    .client-page .client-form>.inner form {
        padding: 15px 15px 20px
    }
    .client-page .client-form>.inner form .input-element i {
        font-size: 15px !important;
        top: 15px;
    }
    .client-page .client-form>.inner form>img{
        width:80%;
    }
    .client-form>.inner,
    .side-box,
    .sign-up-box,
    .sign-in-box{
        min-height: 950px;
    }
    .client-form p,
    a {
        font-size: 10px !important;
    }

    .client-form h2 {
        font-size: 12px;
    }

    .client-form h1 {
        font-size: 14px;
    }

    .client-page .client-form>.inner form .input-element input,
    .client-page .client-form>.inner form .select-element select {
        font-size: 10px;
    }
    label {
        font-size: 10px !important;
    }
}