body {
    font-family: 'Open Sans', sans-serif;
    color: #535353;
}

.img-fluid {
    max-width: 100% !important;
    height: auto;
}

.form-control:focus {
    box-shadow: none;
}


/** Login 12 start **/
.login-12 .login-inner-form {
    color: #cccccc;
    position: relative;
}

.login-12 .form-info {
    min-height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 15px;
}
.login-12 .form-info::after{
position: absolute;
    left: -1px;
    top: 0;
    width: 276px;
    height: 100%;
    content: "";
    z-index: -1;
    background: url(../img/img-50.png) top left repeat;}

.login-12 h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Jost', sans-serif;
}

.login-12 .form-section {
    max-width: 430px;
    margin: 0 auto;
    text-align: center;
}

.login-12 .login-inner-form .form-group {
    margin-bottom: 25px;
}

.login-12 .login-inner-form .form-box {
    float: left;
    width: 100%;
    position: relative;
}

.login-12 .login-inner-form .form-control {
    font-size: 16px;
    outline: none;
    color: #535353;
    border-radius: 3px;
    font-weight: 500;
    border: 1px solid #dcdcdc;
    background: #fff;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}

.login-12 .login-inner-form img {
    margin-bottom: 5px;
    height: 40px;
}

.login-12 .login-inner-form .form-box .form-control {
    float: left;
    width: 100%;
    padding: 12px 45px 12px 20px;
    border-radius: 50px;
}

.login-12 .login-inner-form .form-box i {
    position: absolute;
    top: 12px;
    right: 20px;
    font-size: 18px;
    color: #535353;
}

.login-12 .login-inner-form .forgot {
    margin: 0;
    line-height: 45px;
    color: #535353;
    font-size: 16px;
    float: right;
}

.login-12 .bg-img {
    background: url(../img/bg.png) top left repeat;
    background-size: cover;
    top: 0;
    bottom: 0;
    opacity: 1;
    z-index: 999;
    min-height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
}
.login-12 .bg-img1 {
    background: url(../img/skate.png) top left repeat;
    background-size: cover;
    top: 0;
    bottom: 0;
    opacity: 1;
    z-index: 999;
    min-height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
}

.login-12 .bg-img1:before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
   
}
.login-12 .bg-img:before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
   
}

.login-12 .info{
    max-width: 800px;
    margin: 0 auto;
    z-index: 999;
}

.login-12 .info h1 {
    font-size: 60px;
    color: #fff;
    font-weight: 700;
    margin-bottom: 30px;
    text-transform: uppercase;
}

.login-12 .info {
    text-align: left;
}

.login-12 .info p {
    margin-bottom: 0;
    color: #fff;
    opacity: 0.9;
    line-height: 28px;
}

.login-12 .login-inner-form p {
    margin: 0;
    color: #535353;
}

.login-12 .login-inner-form p a {
    color: #535353;
}

.login-12 .login-inner-form button:focus {
    outline: none;
    outline: 0 auto -webkit-focus-ring-color;
}

.login-12 .login-inner-form .btn-theme.focus, .btn-theme:focus {
    box-shadow: none;
}

.login-12 .logo img {
width: 100%;
    margin-bottom: 15px;
}

.login-12 .nav-pills li {
    display: inline-block;
}

.login-12 .login-inner-form .checkbox {
    margin-bottom: 25px;
    font-size: 14px;
}

.login-12 .login-inner-form .form-check {
    float: left;
    margin-bottom: 0;
}

.login-12 .login-inner-form .form-check a {
    color: #d6d6d6;
    float: right;
}

.login-12 .login-inner-form .form-check-input {
    position: absolute;
    margin-left: 0;
}

.login-12 .login-inner-form .form-check-label {
    padding-left: 5px;
    margin-bottom: 0;
    font-size: 16px;
    color: #535353;
}

.login-12 .login-inner-form .checkbox a {
    font-size: 16px;
    color: #535353;
}

.login-12 .form-section h3 {
    font-size: 23px;
    margin-bottom: 40px;
    font-weight: 400;
    color: #040404;
}

.login-12  .animated-text h1{
    display: block;
    text-shadow: 0 0 80px rgba(255, 255, 255, 0.5);
    background: url(../img/animated-text-2.png) repeat-y;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: aitf 80s linear infinite;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
}

@-webkit-keyframes aitf {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

.login-12 h2 {
    color: #fff;
    margin: 0 0 25px;
    font-weight: 700;
    font-size: 50px;
}

.login-12 .form-section p {
     margin: 69px 0 0;
    font-size: 14px;
    color: #535353;
}

.login-12 .form-section p a {
   color: #ff0000;
    font-weight: 500;
}

.login-12 .form-check-input:focus {
    border-color: #ffbb19;
    outline: 0;
    box-shadow: none;
}

.login-12 .form-section .form-check-input {
    width: 20px;
    height: 20px;
    margin-top: 0;
    position: absolute;
    border-radius: 3px;
    border: 1px solid #dcdcdc;
    background-color: #fff;
    margin-left: -20px;
}

.login-12 .form-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.login-12 .form-section .social-list li {
    display: inline-block;
    margin-bottom: 5px;
}

.login-12 .form-section .social-list li a {
    font-size: 13px;
    width: 120px;
    margin: 2px 0 3px 0;
    height: 40px;
    line-height: 40px;
    border-radius: 20px;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    background: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.login-12 .form-section .social-list li a i {
    height: 40px;
    width: 40px;
    line-height: 40px;
    float: left;
    color: #fff;
    border-radius: 20px;
    -webkit-transition: all 0.8s;
    transition: all 0.8s;
    font-size: 15px;
}

.login-12 .form-check-input:checked {
    background-color: #ff0000;
    border: 1px solid #ff0000;
}

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

.login-12 .form-section:hover .social-list li a i{
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}

.login-12 .form-section .social-list li a span {
    margin-right: 7px;
}

.login-12 .form-section .extra-login {
    margin: 20px 0 25px;
    position: relative;
}

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

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

.login-12 .btn-theme {
 position: relative;
    display: inline-block;
    vertical-align: middle;
    -webkit-appearance: none;
    outline: none;
    color: #fff;
    transition: all 0.3s linear;
    z-index: 1;
    overflow: hidden;
    display: flex
;
    cursor: pointer;
    justify-content: right;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 500;
    font-family: 'Jost', sans-serif;
    border-radius: 50px;
    border: none;
}

.login-12 .btn-lg{
    padding: 0 50px;
    line-height: 50px;
}

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

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

.login-12 .btn-primary{
    background: #ff0000;
}

.login-12 .btn-primary:after {
    background: #e90404;
}

.login-12 .btn-light:after {
    background: #f9fafb;
}

.login-12 .btn-theme i::before {
    position: relative;
    font-size: 18px;
    top: 3px;
    padding-left: 5px;
}

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

.login-12 .btn-theme:hover:after {
    transform: perspective(200px) scaleX(1.05) rotateX(0deg) translateZ(0);
    transition: transform 0.4s linear, transform 0.4s linear;
}

.login-12 .btn-theme:after {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    content: "";
    border-radius: 7px;
    transform: perspective(200px) scaleX(0.1) rotateX(90deg) translateZ(-10px);
    transform-origin: bottom center;
    transition: transform 0.4s linear, transform 0.4s linear;
    z-index: -1;
}



.login-12 .lines {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    z-index: -1;
}

.login-12 .line {
    position: absolute;
    width: 5px;
    height: 100%;
    top: 0;
    left: 50%;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.login-12 .line::after {
    content: '';
    display: block;
    position: absolute;
    height: 15vh;
    width: 100%;
    top: -50%;
    left: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 75%, #3b6baf 100%);
    animation: drop 7s 0s infinite;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
    z-index: -888;
}

.login-12 .line:nth-child(1) {
    margin-left: -40%;
}

.login-12 .line:nth-child(1)::after {
    animation-delay: 1s;
}

.login-12 .line:nth-child(3) {
    margin-left: 40%;
}

.login-12 .line:nth-child(3)::after {
    animation-delay: 2s;
}

.login-12 .line:nth-child(4) {
    margin-left: -20%;
}

.login-12 .line:nth-child(4)::after {
    animation-delay: 3s;
}

.login-12 .line:nth-child(5) {
    margin-left: 20%;
}

.login-12 .line:nth-child(5)::after {
    animation-delay: 4s;
}

@keyframes drop {
    0% {top: -50%; }
    100% {top: 110%; }
}

/** MEDIA **/
@media (max-width: 1200px) {
    .login-12 .info h1 {
        font-size: 45px;
    }
}

@media (max-width: 992px) {
    .login-12 .bg-img {
        display: none;
    }

    .login-12 .form-info{
        padding: 30px 15px;
    }
}
 #suport{
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align:center;
}
#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;
}

 #translateShadow,#rotateImg,#light{
    border-radius: 50%;
    display:inline-block;
    width: 100px;
    height: 100px;
}
 #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;
}
 #translateShadow{
    animation-name: translateShadow;
    animation-duration: var(--animation-duration);
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
}

 #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) * 3.3);
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
:root{
    --animation-duration:1s;
    --bounce-height:calc(100px - 100vh);
}
@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 bounceAndRotate {
  0% {
    transform: translateY(0) rotate(0deg);
    box-shadow: 40px 40px 10px #444466;
  }
  100% {
    transform: translateY(var(--bounce-height)) rotate(360deg);
    box-shadow: 40px 350px 250px #444466;
  }
}

#yourElement {
  animation: bounceAndRotate var(--animation-duration) infinite alternate ease-in-out;
}

 .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-10 .bg-img {
        display: none;
    }
}


a.forgot-password.text-end.ms-auto {
    display: flex
;
    justify-content: end;
    position: relative;
    margin-top: -9%;}