body {
	margin: 0;
	font-family: 'Lato', sans-serif;
	font-size: 18px;
	color: #ffffff;
	font-weight: 300;
 }

 .wrapper {
	width: 100%;
	height: 100vh;
	text-align: center;
	background: linear-gradient(-45deg, #16a2c9, #007fa3, #035c75, #053c4c);
	background-size: 400% 400%;
	-webkit-animation: Gradient 25s ease infinite;
	-moz-animation: Gradient 25s ease infinite;
	animation: Gradient 25s ease infinite;
 }

 @-webkit-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
 }

 @-moz-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
 }

 @keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
 }

 .wrapper:before {
	content: '';
	display: inline-block;
	vertical-align: middle;
	height: 100%;
 }

	.content {
		display: inline-block;
		vertical-align: middle;
		margin: 0 auto;
		position: relative;
		z-index: 2;
	}

	h1 {
		font-size: 80px;
		font-weight: 300;
		text-transform: uppercase;
		margin: 20px;
	}

	.bgcont {
		color: #666667;
		font-size: 14px;
		position: fixed;
		z-index: 2;
		left: 45%;
		right: 0;
		bottom: 0;
		text-align: right;
		padding: 250px 60px 60px;
		background-color: #ffffff;
		-webkit-clip-path: polygon(100% 0, 0% 100%, 100% 100%);
		clip-path: polygon(100% 0, 0% 100%, 100% 100%);
	}

	.bgcont p:first-of-type {
		font-weight: 400;
	}

	.bgcont p:last-of-type {
		margin-bottom: 40px;
	}

	.bgbod {
		width: 400px;
		float: right;
	}

	.bgcont img {
		width: 250px;
	}

	.bgcont a {
		display: inline-block;
		padding: 15px 50px;
		background-color: #007fa3;
		border-radius: 7px;
		color: #ffffff;
		text-decoration: none;
		transition-duration: 0.3s;
	}

	.bgcont a:hover, .bgcont a:active, .bgcont a:focus {
		background-color: #004b60;
		text-decoration: none;
	}

	.snow {
	position: absolute;
	min-width: 100vw;
	min-height: 100vh;
	height: 100vh;
	width: 100%;
	top: 0;
	left: 0;
	opacity: 0.6;
	overflow: hidden;
}

.snow .svg {
	position: absolute;
	width: 100%;
	height: 100%;
}

#snow-top-layer {
	will-change: transform;
	transform: translateX(-768px);
	animation: fall 20s infinite linear;
}

#snow-bottom-layer {
	will-change: transform;
	transform: translateX(-768px);
	animation: fall 30s infinite linear;
}

@keyframes fall {
	
	100% {
		transform: translateX(0);
	}
}

@media (max-width: 1366px) {
	.bgcont {
		left: 35%;
	}

	.wrapper:before {
		height: 70%;
	}
}

@media (max-width: 1200px) {
	.bgcont {
		left: 25%;
	}
}

@media (max-width: 1000px) {
	.bgcont {
		left: 0;
		width: 100%;
		text-align: center;
		padding: 60px;
		-webkit-clip-path: none;
		clip-path: none;
		padding: 60px 0px;
	}

	.bgbod {
		width: 100%;
		float: none;
	}

	.wrapper:before {
		height: 50%;
	}
}

@media (max-width: 650px) {
	h1 {
		font-size: 50px;
	}

	.content {
		width: 80%;
		margin: auto;
	}

	.bgcont {
		padding: 0px;
		max-width: 100%;
	}

	.bgbod {
		width: 95%;
		margin: auto;
		padding: 20px 0px;
	}

}

@media (max-width: 450px) {
	h1 {
		font-size: 40px;
	}
}