@charset "UTF-8";
*,
            *:before,
            *:after{
                padding: 0;
                margin: 0;
                box-sizing: border-box;
            }
            body{
                background-color: #080710;
            }
            .background{
                width: 430px;
                height: 520px;
                position: absolute;
                transform: translate(-50%,-50%);
                left: 50%;
                top: 50%;

            }
            .background .shape{
                height: 200px;
                width: 200px;
                position: absolute;
                border-radius: 50%;
            }
            
            .shape:first-child{
/*
                background: linear-gradient(
                    #1845ad,
                    #23a2f6
                    );
*/                    
                left: -140px;
                top: -80px;
            }
            .shape:last-child{
                background: linear-gradient(
                    to right,
                    #ff512f,
                    #f09819
                    );
                right: -30px;
                bottom: -80px;
            }
            
            form.login {
                height: 550px;
                width: 400px;
                background-color: rgba(255,255,255,0.13);
                position: absolute;
                transform: translate(-50%,-50%);
                top: 50%;
                left: 50%;
                border-radius: 10px;
                backdrop-filter: blur(10px);
                border: 2px solid rgba(255,255,255,0.1);
                box-shadow: 0 0 40px rgba(8,7,16,0.6);
                padding: 50px 35px;
            }
            form.login  *{
                font-family: 'Poppins',sans-serif;
                color: #ffffff;
                letter-spacing: 0.5px;
                outline: none;
                border: none;
            }
            form.login  h3{
                font-size: 32px;
                font-weight: 500;
                line-height: 42px;
                text-align: center;
            }
            
            .login label{
                display: block;
                margin-top: 30px;
                font-size: 16px;
                font-weight: 500;
            }
            .login input{
                display: block;
                height: 50px;
                width: 100%;
                background-color: rgba(255,255,255,0.07);
                border-radius: 3px;
                padding: 0 10px;
                margin-top: 8px;
                font-size: 14px;
                font-weight: 300;
            }
            ::placeholder{
                color: #e5e5e5;
            }
            .login button{
                margin-top: 50px;
                width: 100%;
                background-color: #3599ae;/* #ffffff;*/
                color: #fff;/* #080710;*/
                padding: 15px 0;
                font-size: 18px;
                font-weight: 600;
                border-radius: 5px;
                cursor: pointer;
            }
            
            .login a {
            	cursor: pointer;
            }
            .social{
                margin-top : 30px;
                display	   : flex;
            }
            .social div{
                background: red;
                width: 180px;
                border-radius: 3px;
                padding: 5px 10px 10px 5px;
                background-color: rgba(255,255,255,0.27);
                color: #eaf0fb;
                text-align: center;
            }
            .social div:hover{
                background-color: rgba(255,255,255,0.47);
            }
            .social .go{
                margin-left: 28%;
            }

            .social .fb{
                margin-left: 25px;
            }
            .social i{
                margin-right: 4px;
            }
            
            @media (max-width: 767px) {            	
	            .background{
	                width: 330px;
	                /*height: 520px;*/
	                position: absolute;
	                transform: translate(-50%,-50%);
	                left: 50%;
	                top: 50%;
	
	            }
	            .background .shape{
	                height: 90px;
	                width: 90px;
	                position: absolute;
	                border-radius: 50%;
	            }
	            
	            
	            .social .go{
	                margin-left: 22%;
	            }
            
	            .shape:first-child{
	                left: -45px;
	                top: -52px;
	            }
	            .shape:last-child{
	                background: linear-gradient(
	                    to right,
	                    #ff512f,
	                    #f09819
	                    );
	                right: -25px;
	                bottom: -30px;
	            }
	            
	            .login form{
	            	width:330px;
	            }
	            
			}