*, ::after, ::before {
    box-sizing: border-box;
}
body, html{
	font-family: 'Inter', sans-serif;
	margin:0px;
	background-color: black;
	min-height:100%;
}
.noover{
	display:flex;
	overflow:hidden;
	height:100%
}
.half{
	width:50%;
	position:relative;
	-webkit-transition: width 1s;
    transition: width 1s;
}

.common{
	width:117%;
	height: 100vh;
	filter: blur(4px);
    object-fit: cover;
	cursor:pointer;
	transition: width 1s;
}
.left {
	
	
	clip-path: polygon(0% 0, 100% 0, 90% 100%, 0 100%)
}
.right {
	
	height: 100vh;
	object-fit: cover;
  clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
}
.logo{
	height:70px;
    margin-bottom: 11px;
	max-width:100%;
}
.caption{
		   position: absolute;
    top: 45%;
	color:white;
    left: 25%;
	text-align: center;
}

.tleft{
	transition: left 1s;
}
.go{
	    border: 3px solid white;
    display: inline-block;
    margin-top: 12px;
    padding: 7px 20px;
	opacity: 0;
  visibility: hidden;
	transition: visibility .2s, opacity 0.5s linear;
}
.half:hover{
	width:80%;
}
.half:hover .go{
	visibility: visible;
  opacity: 1;
}
.half:hover .common{
	filter: unset !Important;
}
.half:hover .tleft{
	
}
footer{
	border-top:2px solid grey;
	padding:15px;
	text-align:Center;
	font-weight:bold;
	color:white;
}

footer a{
	color:White;
	text-decoration:none;
}
footer a:hover{
	text-decoration:underline;
}
@media only screen and (min-width:992px) {
	footer{
	    position: fixed;
		width: 100%;
		z-index: 1;
		bottom: 0;
		background-color: black;
	}
}
@media only screen and (max-width:992px) {
	  .noover {
		display:block;
	  }
	  .half{
		  width:100% !important;
	  }
	  .common{
		  width:100%;
		  margin:0px !Important;
		
	  }
	  .right{
		  
		margin-top: -9% !important;
		clip-path: polygon(0% 11%, 100% 0, 100% 100%, 0% 100%);

	  }
	  .left{
		      clip-path: polygon(0% 0, 100% 0, 100% 89%, 0% 100%);
	  }
	.logo {
		height: 54px;
		margin-bottom:8px
	}
	.caption {
		position: absolute;
		top: 45%;
		color: white;
		left: 0;
		text-align: center;
		right: 0;
		padding: 0px 15px;
	}
	.go{
	
			margin-top: 19px;
	}
}
@media only screen and (max-width:992px) {
	.right{
		margin-top: -18% !important;
	}	
}
@media only screen and (max-width:721px) {
	.right{
		margin-top: -20% !important;
	}	
}
@media only screen and (max-width:414px) {
	.right{
		margin-top: -28% !important;
	}	
}
@media only screen and (max-width:320px) {
	.right{
		margin-top: -35% !important;
	}	
}
@media only screen and (max-width:251px) {
	.right{
		margin-top: -40% !important;
	}	
}
@media only screen and (max-width:217px) {
	.right{
		margin-top: -48% !important;
	}	
}