body{
	background: url('../img/bg.jpg') no-repeat;
	background-position: 0% 50%;
	background-size: cover;
}
.login-box{
	box-sizing: border-box;
	padding: 100px 0 180px 0;
	overflow: hidden;
}
.loginwith{
	margin-bottom: 60px;
	text-align: center;
}
.loginblock{
	width: 100%;
	border: 1px solid #fff;
	position: relative;
	cursor: pointer;
}
.loginblock:after{
	content: " ";
	display: block;
	padding-bottom: 100%;
}
.line1{
	right: 100%;
	top: 0;
}
.line2{
	right: 100%;
	top: 100%;
}
.line3{
	top: 100%;
	right: 0;
}
.loginblock-content{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.login-block-corner{
	position: absolute;
	top: -1px;
	right: -1px;
	width: 33%;
	z-index: 10;
	opacity: 0;
}
.loginblock:hover{
	background: rgba(34,31,52,0.3)
}
.loginblock:hover .login-block-corner{
	opacity: 1;
}
.slope{
	width: 150vh;
}
@media(max-width: 910px){
	.login-box .col-4{
		width: 50%;
		padding: 0;
		margin: 0 25% 100px 25%;
	}
	.login-box{
		padding: 80px 0 0px 0;
	}
}
@media(max-width: 650px){
	.h2{
		font-size: 40px;
	}
	.login-box .col-4{
		width: 40%;
		padding: 0;
		margin: 0 30% 70px 30%;
	}
	.loginwith{
		display: none;
	}
	.login-box{
		padding: 30px 0 130px 0;
	}
	body{
		background: url('img/bg.jpg') no-repeat;
		background-position: 0% -100%;
		background-size: auto 88%;
	}
}