/** Login 10 start **/
.Login_sec {
    z-index: 999;
}
    .Login_sec .form-section {
        min-height: 100vh;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 30px 0;
        background: #0b247ff7;
        z-index: 999;
    }

        .Login_sec .form-section a {
            text-decoration: none;
        }

    .Login_sec .form-inner {
        max-width: 450px;
        width: 100%;
        margin: 0 15px;
        text-align: center;
        padding: 50px 30px;
        z-index: 1;
    }

    .Login_sec .bg-img {
        min-height: 100vh;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 15px 50px;
        background-image: url('../../images/img-10.svg');
        z-index: 999;
    }

    .Login_sec .info {
        z-index: 999;
    }

    .Login_sec .form-section .extra-login {
        float: left;
        width: 100%;
        text-align: center;
        position: relative;
    }

        .Login_sec .form-section .extra-login::before {
            position: absolute;
            left: 0;
            top: 10px;
            width: 100%;
            height: 1px;
            background: #e4e4e4;
            content: "";
        }

        .Login_sec .form-section .extra-login > span {
            width: auto;
            float: none;
            display: inline-block;
            padding: 1px 20px;
            z-index: 1;
            position: relative;
            font-size: 14px;
            color: #535353;
            text-transform: capitalize;
            background: #fff;
        }

    .Login_sec .form-section p {
        color: #fff;
        font-size: 16px;
        margin: 10px;
    }

        .Login_sec .form-section p a {
            color: #fff;
        }

    .Login_sec .form-section ul {
        list-style: none;
        padding: 0;
        margin: 0 0 20px;
    }

    .Login_sec .form-section .thembo {
        margin-left: 4px;
    }

    .Login_sec .form-section h3 {
        margin: 0 0 10px;
        font-size: 25px;
        font-weight: 400;
        color: #fff;
    }

    .Login_sec .form-section .form-group {
        margin-bottom: 25px;
    }

    .Login_sec .form-section .form-box {
        position: relative;
    }

    .Login_sec .form-section .form-control {
        padding: 14.5px 20px;
        font-size: 16px;
        outline: none;
        color: #535353;
        border-radius: 3px;
        border: 1px solid #dadadae8;
        background: #fff;
    }

      .Login_sec .form-section .form-box i {
        position: absolute;
        top: 10px;
        right: 20px;
        font-size: 23px;
        color: #777575;
    }

    .Login_sec .form-section .checkbox .terms {
        margin-left: 3px;
    }

    .Login_sec .form-section .terms {
        margin-left: 3px;
    }

    .Login_sec .form-section .form-check {
        float: left;
        margin-bottom: 0;
        padding-left: 25px;
        font-size: 16px;
        color: #535353;
    }

        .Login_sec .form-section .form-check .form-check-input {
            margin-left: -25px;
        }

    .Login_sec .form-check-input:focus {
        border-color: #ff013d;
        outline: 0;
        box-shadow: none;
    }

    .Login_sec .form-check-input:checked {
        background-color: #ff013d;
        border-color: #ff013d !important;
    }

    .Login_sec .form-section .form-check-input {
        width: 20px;
        height: 20px;
        margin-top: 0;
        vertical-align: top;
        position: absolute;
        border: 1px solid #c5c3c3;
        border-radius: 3px;
    }

    .Login_sec .form-section a.forgot-password {
        font-size: 16px;
        color: #535353;
    }
    .Login_sec .info {
        max-width: 610px;
        padding: 10px 30px;
    }

        .Login_sec .info h1 {
            margin-bottom: 20px;
            font-size: 45px;
            font-weight: 700;
            text-transform: uppercase;
            -webkit-box-reflect: below -19px linear-gradient(transparent, rgba(0,0,0,.2));
            margin-bottom: 70px;
        }

        .Login_sec .info p {
            line-height: 28px;
            color: #535353;
        }

    .Login_sec .btn-theme {
        position: relative;
        display: inline-block;
        width: 100%;
        color: #ffffff;
        overflow: hidden;
        overflow: hidden;
        text-transform: capitalize;
        display: inline-block;
        transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -webkit-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        cursor: pointer;
        font-size: 17px;
        font-weight: 400;
        font-family: 'Jost', sans-serif;
        border-radius: 3px;
        border: none;
    }

        .Login_sec .btn-theme:hover {
            color: #fff;
        }

            .Login_sec .btn-theme:hover::before {
                left: 0%;
                -webkit-transform: scale(1, 1);
                transform: scale(1, 1);
            }

        .Login_sec .btn-theme:before {
            position: absolute;
            content: '';
            left: 96%;
            top: 0px;
            width: 100%;
            height: 100%;
            z-index: 1;
            opacity: 1;
            -webkit-transition: all 0.4s;
            -moz-transition: all 0.4s;
            -o-transition: all 0.4s;
            transition: all 0.4s;
            transform: skewX(-25deg);
        }

        .Login_sec .btn-theme span {
            position: relative;
            z-index: 1;
        }

    .Login_sec .btn-check:focus + .btn, .btn:focus {
        outline: 0;
        box-shadow: none;
    }

    .Login_sec .btn-lg {
        padding: 0 50px;
        line-height: 55px;
    }

    .Login_sec .btn-md {
        padding: 0 45px;
        line-height: 50px;
    }

    .Login_sec .btn {
        box-shadow: none !important;
    }

    .Login_sec .btn-primary {
        background: #ff013d;
    }

    .Login_sec .btn-theme:before {
        background: #e60238;
    }

    .Login_sec .form-section ul {
        list-style: none;
        padding: 0;
        margin: 0 0 20px;
    }

    .Login_sec .social-list {
        padding: 0;
        text-align: center;
    }

        .Login_sec .social-list li a {
            -webkit-transition: all 0.8s;
            transition: all 0.8s;
            bottom: 15px;
        }

        .Login_sec .social-list li {
            display: inline-block;
        }

            .Login_sec .social-list li a {
                margin: 1px;
                font-size: 14px;
                font-weight: 500;
                width: 110px;
                height: 40px;
                line-height: 40px;
                border-radius: 3px;
                display: inline-block;
                text-align: center;
                color: #fff;
            }

                .Login_sec .social-list li a:hover {
                    text-decoration: none;
                }

    .Login_sec .facebook-bg {
        background: #4867aa;
    }

        .Login_sec .facebook-bg:hover {
            background: #3d5996;
            color: #fff;
        }

    .Login_sec .twitter-bg {
        background: #33CCFF;
    }

        .Login_sec .twitter-bg:hover {
            background: #56d7fe;
        }

    .Login_sec .google-bg {
        background: #db4437;
    }

        .Login_sec .google-bg:hover {
            background: #dc4e41;
        }

:root {
    --animation-duration: 1s;
    --bounce-height: calc(205px - 100vh);
}

.Login_sec {
    overflow: hidden;
}

    .Login_sec #suport {
        position: absolute;
        bottom: 0;
        width: 100%;
        text-align: center;
    }

    .Login_sec #smash {
        animation-name: smash;
        animation-duration: var(--animation-duration);
        animation-direction: alternate;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        transform-origin: bottom;
    }

    .Login_sec #translateShadow, #rotateImg, #light {
        border-radius: 50%;
        display: inline-block;
        width: 200px;
        height: 200px;
    }

    .Login_sec #light {
        background-image: radial-gradient(circle at 20% 20%, rgba(255, 221, 179,.7),rgba(255, 221, 179,.5) 10%, transparent 30%,rgba(83,42,0,.8) 85%);
        position: absolute;
        z-index: 1;
    }

    .Login_sec #translateShadow {
        animation-name: translateShadow;
        animation-duration: var(--animation-duration);
        animation-direction: alternate;
        animation-iteration-count: infinite;
        animation-timing-function: ease-out;
    }

    .Login_sec #rotateImg {
        /*background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='75 75 251 251' fill='rgb(83,42,0)'><path d='M313.3,145.3c-14.4-29.3-38.8-50.5-67.1-61.6c-4.6-1.7-16.2-5.1-21.3-6.3	c-26.3-5.3-54.5-2.3-80.4,10.4c-30.2,14.8-52.9,40.6-63.8,72.5c-10.9,31.8-8.7,66,6.2,96.1l0.1,0.2c2.1,4.2,4.4,8.3,6.9,12.2l0,0	c0,0,0,0,0,0c23.6,36.9,64.4,58,106.5,58c18.7,0,37.6-4.1,55.4-12.9c30.2-14.8,52.9-40.6,63.8-72.5 	C330.3,209.6,328.1,175.5,313.3,145.3z M238.3,86.2c25.2,12.5,41.2,36.6,46,68.5c-24.3,0.8-45.4-15.7-67.4-33.1 	c-18.4-14.5-37.3-29.3-58.9-34.2C184.6,77.6,212.8,77.7,238.3,86.2z M85.4,161.9c10.4-30.6,32.2-55.3,61.2-69.6 	c0.9-0.4,1.7-0.8,2.6-1.2c23.6,2.3,44.4,18.6,64.6,34.5c21.4,16.9,43.4,34.1,68.8,34.1c0.8,0,1.5,0,2.3-0.1c1,9.5,1.1,19.7,0.2,30.4 	c-9.8-3.3-19.3-5.9-25.7-7.6c-37.6-9.8-79.7-16.1-112.5-16.7c-24-0.5-53,1.8-66,14.2C81.8,173.9,83.4,167.8,85.4,161.9z M91.4,254.4 	l-0.1-0.2c-10.1-20.5-14.1-42.8-11.9-65l0.5,0.2c5.3-12.9,29-19.5,66.7-18.8c32.5,0.7,74.1,6.8,111.4,16.6 	c10.1,2.6,18.9,5.3,26.5,7.8c-1.2,10.2-3.3,20.4-6.3,30.3c-19.8-8.8-48.7,2.6-81.8,15.7c-32,12.6-68.1,26.8-99.7,23 	C94.9,261,93.1,257.7,91.4,254.4z M187.8,321.2c-34.6-3.6-67-21.9-87.5-51.7c31.8,2.4,66.9-11.4,98-23.7 	c32.4-12.8,60.6-23.9,78.4-15.5c-5.6,17.2-13.6,33.4-23.5,47c-12.8,17.7-34.5,39.5-65.6,43.3L187.8,321.2z M253.5,309.4 	c-15.6,7.7-32.1,11.6-48.4,12.3c36.2-12.4,62.8-49,76.1-88.8c9.1,6.7,14.2,20.1,15.8,40.6C285.7,288.6,270.9,300.9,253.5,309.4z 	 M314.8,239.8c-3.3,9.8-7.8,19-13.3,27.4c-2.4-19.7-8.5-32.6-18.7-39.3c3.1-10.3,5.4-20.8,6.6-31.1c19.2,6.9,29.2,13.2,30.7,17.3 	l0.4-0.2C319.6,222.6,317.7,231.3,314.8,239.8z M290,191.7c1.1-11.3,1-22.1-0.2-32.4c6.8-0.9,13.8-3,21.1-6.8l-2.3-4.5 	c-6.8,3.4-13.2,5.4-19.5,6.3c-1.6-11.1-4.6-21.4-8.8-30.7c-4.6-10.3-10.8-19.2-18.3-26.6c19.5,11.6,36,28.7,46.8,50.5 	c9.3,18.9,13.4,39.4,12.3,59.8C314.9,201.6,302.6,196.1,290,191.7z'/></svg>");*/
        background-color: darkorange;
        background-size: 100%;
        animation-name: rotateImg;
        animation-duration: calc(var(--animation-duration) * 5.3);
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }

@keyframes translateShadow {
    0% {
        transform: translateY(0);
        box-shadow: 40px 40px 10px #444466
    }

    100% {
        transform: translateY(var(--bounce-height));
        box-shadow: 40px 350px 250px #444466
    }
}

@keyframes smash {
    0% {
        transform: scaleY(.7)
    }

    15% {
        transform: scaleY(1)
    }
}

@keyframes rotateImg {
    100% {
        transform: rotate(360deg)
    }
}

.Login_sec .animate-charcter {
    text-transform: uppercase;
    background-image: linear-gradient(-225deg, #231557 0%, #44107a 29%, #ff1361 67%, #fff800 100%);
    background-size: auto auto;
    background-clip: border-box;
    background-size: 200% auto;
    color: #fff;
    background-clip: text;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textclip 2s linear infinite;
    display: inline-block;
    font-size: 190px;
}

@keyframes textclip {
    to {
        background-position: 200% center;
    }
}

@media (max-width: 992px) {
    .Login_sec .bg-img {
        display: none;
    }
}
img.img-fluid {
    max-width: 100% !important;
    height: auto;
}

.bg-photo {
    bottom: 0;
    position: absolute;
}
a.logo img {
    width: 125px;
    background: #fff;
    padding: 15px;
    border-radius: 25px;
    margin: 0 0 10px;
}
.Login_sec #rotateImg img {
    width: 183px;
    padding: 21px;
}