@import url('https://fonts.googleapis.com/css?family=Work+Sans:400,500,600,700');

html {
  width: 100%;
  height: 100%;
}

*{box-sizing: border-box;}

body{background: rgba(67,75,223,1);
background: -moz-linear-gradient(top, rgba(67,75,223,1) 0%, rgba(22,32,173,0.97) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(67,75,223,1)), color-stop(100%, rgba(22,32,173,0.97)));
background: -webkit-linear-gradient(top, rgba(67,75,223,1) 0%, rgba(22,32,173,0.97) 100%);
background: -o-linear-gradient(top, rgba(67,75,223,1) 0%, rgba(22,32,173,0.97) 100%);
background: -ms-linear-gradient(top, rgba(67,75,223,1) 0%, rgba(22,32,173,0.97) 100%);
background: linear-gradient(to bottom, rgba(67,75,223,1) 0%, rgba(22,32,173,0.97) 100%);*/
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#434bdf', endColorstr='#1620ad', GradientType=0 ); color: rgba(0, 0, 0, 0.6); font-family: 'Work Sans', sans-serif; font-size: 14px;  line-height: 1.6em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}


.circular{ transform: scale(0);width: 3000px;height: 3000px;position: fixed; top: calc(50% - 1500px);left: calc(50% - 1500px); border-radius: 50%; background: rgba(67,75,223,1); z-index: 30; transition: all .35s ease 0s;-moz-transition: all .35s ease 0s;-webkit-transition: all .35s ease 0s;}
.circular .authent{ display: none; position: absolute; left: calc(50% - 50px); top: calc(50% - 50px); color: #fff; width: 100px; height: 100px; text-align: center;}

.circular.scale{transform: scale(1);}

.effect-8{ width: 100%; float: left; border: 1px solid #ccc; padding: 10px 14px; transition: 0.4s; font-family: 'Work Sans', sans-serif;}
.effect-8 ~ .focus-border:before,
.effect-8 ~ .focus-border:after{content: ""; position: absolute; top: 0; left: 0; width: 0; height: 2px; background-color: rgba(67,75,223,1); transition: 0.3s;}
.effect-8 ~ .focus-border:after{top: auto; bottom: 0; left: auto; right: 0;}
.effect-8 ~ .focus-border i:before,
.effect-8 ~ .focus-border i:after{content: ""; position: absolute; top: 0; left: 0; width: 2px; height: 0; background-color: rgba(67,75,223,1); transition: 0.4s;}
.effect-8 ~ .focus-border i:after{left: auto; right: 0; top: auto; bottom: 0;}
.effect-8:focus ~ .focus-border:before,
.effect-8:focus ~ .focus-border:after{width: 100%; transition: 0.3s;}
.effect-8:focus ~ .focus-border i:before,
.effect-8:focus ~ .focus-border i:after{height: 100%; transition: 0.4s;}

.login{ max-width: 350px; width: 95%; background: #fff; display: inline-block; padding: 35px 0; margin: 10% 0 0; }
.login h1{ width: 100%; float: left; padding: 0 40px; margin: 0 0 25px; text-align: left; font-weight: 300; color: rgba(67,75,223,1); position: relative;}
.login h1:after{ content: ""; position: absolute; left: 0; height: 100%; width: 4px; background: #4285F4;}
.login ul{ width: 100%; float: left; padding: 0 40px; text-align: left;}
.login ul li{ width: 100%; float: left; margin: 0 0 25px; position: relative;}
.login ul li:last-child{ margin: 0 0 0;}
.login ul li label{ display: none;}
.login ul li input.button{ background: none; border: 1px solid #4285F4; border-radius: 20px; padding: 10px 30px; font-size: 15px; text-transform: uppercase; color: #4285F4; cursor: pointer;}

.login .or{ width: 100%; float: left; margin: 15px 0; font-size: 15px;}
.login .form-divider {clear: both; border-bottom: 1px solid rgba(0, 0, 0, 0.12); height: 1px; position: relative; display: block; padding: 15px 0; width: 100%; float: s;}
.login .form-divider span { position: absolute; left: 50%; top: 0px; text-align: center; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); line-height: 30px; width: 40px; height: 30px; display: inline-block; background-color: #fff;}

button.button{ display: inline-block; position: relative; background: #434bdf; border: none; color: #fff; font-size: 18px; cursor: pointer; margin: 10px 0; padding: 10px 25px; letter-spacing: 0.5px; transition: background .5s ease; -moz-transition: background .5s ease; -webkit-transition: background .5s ease; -o-transition: background .5s ease; border-radius: 5px;}
button.button:hover{background: #d80075;}

a.forgot, a.register{ float: right; font-size: 14px; color: #000; font-weight: 400; margin: 18px 0 0;}
a.register{ float: left; margin: 0 0 0;}
a.forgot:hover, a.register:hover{ color: #434bdf;}

.sociallogins{ width: 100%; float: left; margin:25px 0 15px 0;}
.sociallogins a{ background: #E6E6E6; overflow: hidden; display: inline-block; vertical-align: middle; border-radius: 3px; padding: 0 0 0 0; width: auto; text-align: left; margin: 10px;}
.sociallogins a span{ font-size: 22px; margin: 0 0 0 0; padding: 10px; color: #fff; display: inline-block; vertical-align: middle;}
.sociallogins a.facebook span{ background: #132099;}
.sociallogins a.google span{ background: #F22E3E;}

body .test {opacity: .6 !important; -webkit-filter: blur(2px);filter: blur(2px);}

.authenticate{ width: 300px; height: 300px; background: #4B4949; position: absolute; left: calc(50% - 150px); top: calc(50% - 150px); padding: 75px 0 0; transform: scale(0);}
.authenticate p{font-size: 18px; margin: 15px 0 0; color: #fff;}


.login ul.registration{ width: 100%; float: left; padding: 0 20px; text-align: left;}

/****** ish-2021-10-08 *******/
ul.kyc { padding: 0px 0px;} 
a.r-l {
    color: rgba(67,75,223,1);
    font-size: 16px;
    font-weight: 600;
}


.parentcontainer {
    display: flex;
    flex-direction: row;
    flex-wrap:wrap;
    justify-content:center;
    align-items: center;
}
.vidwidth {
  max-width: 589px !important;
    background: transparent !important;
    margin-right: 20px
}
.v-sec{
width:100%; height:500px;
}