@charset "utf-8";
/* CSS Document */

	body {
		background: #000;
		margin: 0;
		padding: 0;
		overflow: hidden;	
}

	.height-container {
		max-height: 1080px;
}

	#video-background {
		position: absolute;
		right: 0;
		top: 0;
		z-index: -1;
		height: 100vh;
		transform: translateX(calc((100% - 100vw) / 2));
}


	.head-container {
		text-align: center;
		padding: 2vh 1vh 0.5vh 1vh;
}

	.left-container {
		max-width: calc(60vw - 25vw);
		padding: 2vh 2vh;
}

	.left-footer {
		position: absolute;
		left: 0;
		bottom: 0;
		padding: 2vh;
}

	.left-footer a{
		text-decoration: none;
		color: #fff;
		font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
		font-size: calc(14px + (24 - 14) * ((40vw - 400px) / (800 - 400)));
		font-weight: 300;
}

	.right-footer {
		position: absolute;
		right: 0;
		bottom: 0;
		padding: 2vh;
		display: flex;
		justify-content: space-between;
		width: calc(250px + (400 - 250) * ((45vw - 400px) / (1000 - 300)));
	
}

	.header  {
		width: 97vw
}

	.title {
		font-size: calc(20px + (40 - 20) * ((40vw - 400px) / (800 - 100)));
}

	.copy {
		font-size: calc(20px + (40 - 20) * ((35vw - 400px) / (800 - 100)));
		font-weight: 300;
}

	.button {
		border: 1px solid white;
		border-radius: 14px;
		background-color: transparent;
		color: #fff;
		padding: 2% 8%;
		margin: 5% 0%;
		font-size: calc(18px + (40 - 20) * ((28vw - 400px) / (800 - 100)));
}

	button:hover {
		cursor: pointer;
}

	p {
		color: #fff;
		font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}

 	.img {
		width: calc(20px + (30 - 20) * ((40vw - 400px) / (800 - 400)));
}

@media (max-width: 735px) {
		#video-background {
		transform: translateX(calc((100% - 100vw) / 1.8));
	}

	.title {
		font-size: calc(20px + (40 - 20) * ((40vh - 400px) / (1000 - 100)));
}

	.copy {
		font-size: calc(20px + (40 - 20) * ((35vh - 400px) / (800 - 100)));
	}

	.button {
		font-size: calc(18px + (40 - 18) * ((20vh - 400px) / (800 - 100)));
	}

	.left-container {
		max-width: calc(60vw - 10vw);
		padding: 6vh 2vh;
	}
}

@media (max-width: 1050px) {
	.left-container {
		padding: 6vh 2vh;
	}
}