@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
	* {
		padding: 0;
		margin: 0;
		font-family: 'Poppins', sans-serif;
	}
	#logSec {
		position: relative;
		min-height: 100vh;
		background-color: #fff;
		display: flex;
		justify-content: center;
		/*align-items: center;*/
		/*padding: 20px*/
	}
	
	#logSec .container {
		overflow: hidden;
		position: relative;
		width: 100%;
		min-height: 730px;
		height: auto;
		background-color: #fff;
		box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
	}

	#logSec .container .user {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
	}
	
	#logSec .container .user .imagebox {
		position: relative;
		width: 50%;
		height: 100%;
		transition: 1s;
	}
	
	#logSec .container .user .formbox {
		position: relative;
		width: 50%;
		height: 100%;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 40px;
		transition: 1s;
	}
		
		
	#logSec .container .user .formbox .form h2 {
		font-size: 40px;
	    font-weight: 800;
	    letter-spacing: 2px;
	    text-transform: inherit;
	    text-align: center;
	    margin-bottom: 15px;
	    color: #555;
	}
	
	#logSec .container .user .formbox .form input {
		position: relative;
		width: 100%;
		height: 48px !important;
		padding: 0px 16px;
		background-color: #f5f5f5;
		color: #333;
		border: none;
		outline: none;
		margin: 5px 0 10px 0;
		box-shadow: none;
		letter-spacing: 1px;
		font-weight: 400;
		font-size: 14px;
		border-radius: 0.25rem;
		transition: background .3s;
	}
	#logSec .container .user .formbox .form input:focus {
		background: #fff;
    	border: 1px solid #e1eae7;
	}
	
	#logSec .container .user .formbox .form input[type='submit'] {
		/* max-width: 100px; */
		/* background-color: #677eff; */
		color: #fff;
		cursor: pointer;
		margin: 10px auto;
		display: block;
		width: 175px;
		height: 54px !important;
		color: #fff !important;
    	background-color: #0078b4 !important;
    	border: 1px solid #0078b4 !important;
		/* border-color: #0078b4 !important; */
	}
	#logSec .container .user .formbox .form input[type='submit']:hover{
		color: #0078b4 !important;
    	background-color: #fff !important;
    	border: 1px solid #0078b4 !important;
	}
	#logSec .container .user .formbox .form input[type='button'] {
		/* max-width: 100px; */
		/* background-color: #677eff; */
		color: #fff;
		cursor: pointer;
		margin: 10px auto;
		display: block;
		width: 175px;
		height: 54px !important;
		color: #fff !important;
    	background-color: #0078b4 !important;
    	border: 1px solid #0078b4 !important;
		/* border-color: #0078b4 !important; */
	}
	#logSec .container .user .formbox .form input[type='button']:hover{
		color: #0078b4 !important;
    	background-color: #fff !important;
    	border: 1px solid #0078b4 !important;
	}
	
	
	
	#logSec .container .user .formbox .form .signup-text {
		text-align: center;
		position: relative;
		margin-top: 10px;
		font-size: 12px;
		letter-spacing: 1px;
		color: #555;
		/*text-transform: uppercase;*/
	}
	
	#logSec .container .user .formbox .form .signup-text a {
		text-decoration: none;
		color: #677eff;
		cursor: pointer;
	}
	
	#logSec .container .signupbox {
		pointer-events: none;
	}
	
	#logSec .container.active .signupbox {
		pointer-events: initial;
	}
	
	#logSec .container .signupbox .formbox {
		left: 100%;
	}
	
	#logSec .container.active .signupbox .formbox {
		left: 0;
	}
	
	#logSec .container .signupbox .imagebox {
		left: -100%;
	}
	
	#logSec .container.active .signupbox .imagebox {
		-webkit-transition: 1s ease-in-out;
	    -moz-transition: 1s ease-in-out;
	    -o-transition: 1s ease-in-out;
	    transition: 1s ease-in-out;
		left: 0;
	}
	
	#logSec .container.active .signupbox + .main-section {
		background-color: blue !important
	}
	
	#logSec .container .signinbox .formbox {
		left: 0;
	}
	
	#logSec .container.active .signinbox .formbox {
		left: 100%;
		-webkit-transition: 0.3s ease-in-out;
	    -moz-transition: 0.3s ease-in-out;
	    -o-transition: 0.3s ease-in-out;
	    transition: 0.3s ease-in-out;
		left: calc(50% - 740px);
	}
	
	#logSec .container .signinbox .imagebox {
		left: 0;
	}
	
	#logSec .container.active .signinbox .imagebox {
		left: -100%;
	}
		
			
	#background-video {
		height: 100vh;
		width: 100vw;
		object-fit: cover;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: -1;
	}

	h1, h2 {
		color: white;
		font-weight: bold;
		text-align: center;
	}

	h1 {
		font-size: 6rem;
		margin-top: 30vh; 
	}

	
	.content-center {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.content-center	ul	{
		display: inherit;
	}	
	
	.content-center	ul li {
		margin: 10px;
		height: 50px;
		width: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 60px;
		cursor: pointer;
		position: relative;
	}

	.content-center ul li i {
		transition: all 0.3s linear;
		font-size: 1.6em;
	}

	.content-center ul li::after {
		content: "";
		position: absolute;
		height: inherit;
		width: inherit;
		border-radius: 3px;
		background-color: red;
		opacity: 0;
		z-index: -1;
		color: #fff;
		transition: all 0.3s linear;
	}

	.content-center ul li:hover i {
		color: #fff;
		font-size: 1.4em;
	}

	.content-center ul li:hover::after {
		opacity: 1;
		transform: scale(0.8);
	}

	.content-center ul li::after {
		content: "";
		position: absolute;
		height: inherit;
		width: inherit;
		border-radius: 3px;
		opacity: 0;
		z-index: -1;
		transition: all 0.3s linear;
	}

	.content-center ul li:nth-child(1) {
		border: 2px solid #3b5998;
		color: #3b5998;
	}

	.content-center ul li:nth-child(1)::after {
		background-color: #3b5998;
		color: #3b5998;
	}

	.content-center ul li:nth-child(1):hover {
		background-color: #3b5998;
		color: #FFF;
	}
	.content-center ul li:nth-child(2) {
		border: 2px solid #00aced;
		color: #00aced;
	}

	.content-center ul li:nth-child(2)::after {
		background-color: #00aced;
		color: #00aced;
	}
	.content-center ul li:nth-child(2):hover{
		background-color: #00aced;
		color: #FFF;
	}

	.content-center ul li:nth-child(3) {
		border: 2px solid #007bb6;
		color: #007bb6;
	}

	.content-center ul li:nth-child(3)::after {
		background-color: #007bb6;
		color: #007bb6;
	}
	.content-center ul li:nth-child(3):hover {
		background-color: #007bb6;
		color: #FFF;
	}
	.content-center ul li:nth-child(4) {
		border: 2px solid #dd4b39;
		color: #dd4b39;
	}

	.content-center ul li:nth-child(4)::after {
		background-color: #dd4b39;
		color: #dd4b39;
	}
	.content-center ul li:nth-child(4):hover {
		background-color: #dd4b39;
		color: #FFF;
	}
	.passwordCont {
		position: relative;
		display: flex;
		/*flex-wrap: wrap;*/
		/*align-items: stretch;*/
		width: 49%;
	}
	.passwordCont .signup-input {
		width: 88% !important;
	}
	.passwordCont .password-span {
		display: flex;
		align-items: center;
		/* padding: 0.375rem 0.75rem; */
		font-size: 1rem;
		font-weight: 400;
		line-height: 1.5;
		color: #212529 ;
		text-align: center;
		white-space: nowrap;
		/* border-radius: 0.25rem; */
		margin-left: -32px;
		z-index: 1;
		color: lightgrey;
	}
	
	.passwordContt .password-span:active {
		color: #0078b4 ;
	}
	.password-parent {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		width: 100%;
	}
	.password-parent .password-input {
		position: relative !important;
		flex: 1 1 auto !important;
		width: 0% !important;
		min-width: 0 !important;
	}
	.password-parent .password-span {
		display: flex;
		align-items: center;
		/* padding: 0.375rem 0.75rem; */
		font-size: 1rem;
		font-weight: 400;
		line-height: 1.5;
		color: #0000009c ;
		text-align: center;
		white-space: nowrap;
		/* border-radius: 0.25rem; */
		margin-left: -32px;
		z-index: 1;
		/*color: lightgrey;*/
	}
	
	.password-parent .password-span:active {
		color: #0078b4 ;
	}

	.input-padding {
		padding: 0 0 0 16px !important;
	}

	.btn-signup-bg {
		color: #000;
		background-color: #FFF;
		border: 1px solid #FFF; 
		padding: 13px 61px;
		text-decoration: none; 
		border-radius: 0.25rem;
	}
	.btn-signup-bg:hover {
		color: #fff;
		background-color: #0078b4;
		border: 1px solid #FFF;
	}
	.select-dropdown {
		height: 48px !important;
		padding: 0px 16px;
		background-color: #f5f5f5;
		color: #333;
		border: none;
		outline: none;
		margin: 10px 0;
		box-shadow: none;
		letter-spacing: 1px;
		font-weight: 400;
		font-size: 14px;
		border-radius: 0.25rem;
		transition: background .3s;
	}
	.signup-input {
		width: 155px !important; 
		margin-left: 5px !important;
		margin-right: 5px !important;
		padding: 0 12px !important;
		font-size: 13px !important;
		border: 1px solid transparent;
 	}
	.signup-select {
		width: 179px !important; 
		margin-left: 5px !important;				
		margin-right: 5px !important;
		font-size: 13px !important;
		padding: 0 12px !important;
		border: 1px solid transparent;
		color: #757575 !important ;
		/* background-color: #f5f5f5 !important; */
	}
	.before-afterLogin::before {
		content: "";
		display: block;
		width: 225px;
		height: 1px;
		background: gainsboro;
		left: 115px;
		top: 48.5%;
		position: absolute;
	}
	.before-afterLogin::after {
		content: "";
		display: block;
		width: 240px;
		height: 1px;
		background: gainsboro;
		right: 102px;
		top: 48.5%;
		position: absolute;
	}

	.before-afterSignup::before {
		content: "";
		display: block;
		width: 265px;
		height: 1px;
		background: gainsboro;
		left: 75px;
		top: 44.5%;
		position: absolute;
	}
	.before-afterSignup::after {
		content: "";
		display: block;
		width: 265px;
		height: 1px;
		background: gainsboro;
		right: 78px;
		top: 44.5%;
		position: absolute;
	}
	.imageboxp1 {
		position: relative; 
		width: 100%; 
		margin: auto;
	}
	.imageboxp2 {
		position: absolute; 
		padding: 30px; 
		z-index: 99999; 
		margin: auto;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
	}
	.imageboxp2 .main-title {
		margin: 0 0 0 0;
	    max-width: 100%;
	    color: #fff;
	    font-size: 4em;
	    letter-spacing: 0;
	    line-height: 48px;
	    text-align: center;
	}
	.main-titlep1 {
		color: #fff; 
		font-size: 22px; 
		text-align: center; 
		margin-top: 50px;
	}
	.imagebox-signup {
		position: relative; 
		width: 100%; 
		margin: auto;
	}
	.imagebox-signup2 {
		position: absolute; 
		padding: 30px; 
		z-index: 99999; 
		margin: auto;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
	}
	.signup-main-title {
		/*margin: 30% 0 0 0;*/
    	max-width: 100%;
    	color: #fff;
    	font-size: 4em;
    	letter-spacing: 0;
    	line-height: 48px;
    	text-align: center;
	}

	.contetn-log {
		/*	display:block; */
		/*	margin-left:9%;*/
		width: 100%;
	}



	.imagebox-signup2, .imageboxp2 {
        height: 100%;
        display: flex;
        align-items: center;
        width: 88% !important;
    }
    .imageboxp2 .logo {
        display: flex;
        align-items: center;
        align-self: flex-start;
    }
    .imagebox-signup2 .logo img, .imageboxp2 .logo img {
        padding-top: 30px;
    }
    .signup-inputDiv{
    	display: flex;
    }
    .signupbox .form span{
        display: flex;
        justify-content: end;
/*        color: red;*/
    }
    .contetn-log .signup-p{
    	text-align: center;
    	margin:63px auto;
    }
    .contetn-log .signIn-p{
    	text-align: center;
    	margin:50px auto;
    }