@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 300;
	src: url('/fonts/poppins-v20-latin-ext_latin-300.eot'); /* IE9 Compat Modes */
	src: local(''),
		url('/fonts/poppins-v20-latin-ext_latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		url('/fonts/poppins-v20-latin-ext_latin-300.woff2') format('woff2'), /* Super Modern Browsers */
		url('/fonts/poppins-v20-latin-ext_latin-300.woff') format('woff'), /* Modern Browsers */
		url('/fonts/poppins-v20-latin-ext_latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
		url('/fonts/poppins-v20-latin-ext_latin-300.svg#Poppins') format('svg'); /* Legacy iOS */
}

/* poppins-regular - latin-ext_latin */
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 400;
	src: url('/fonts/poppins-v20-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
	src: local(''),
		url('/fonts/poppins-v20-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		url('/fonts/poppins-v20-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
		url('/fonts/poppins-v20-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
		url('/fonts/poppins-v20-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
		url('/fonts/poppins-v20-latin-ext_latin-regular.svg#Poppins') format('svg'); /* Legacy iOS */
}

html, body {
	height: 100%;
	margin:0;
	padding:0;
	font-family: 'Poppins';
}

div {
	position:fixed;
	height: 100%;
	width:100%;
}

.overlay-content {
	background-color: rgb(0, 0, 0, .3);
	position: absolute;
	z-index: 2;
	bottom: 0;
	text-align: center;
	width: 100%;
}

h1 {
	text-align:	center;
	font-size:	2.5rem;
	line-height: 2.5rem;
	margin: 100px auto;
	color: white;
}

p {
	text-align: center;
	position: fixed;
	bottom: 2%;
	margin: 0 auto;
	width: 100%;
	color: white;
}

div img {
    max-width: 100%;
    max-height: 100%;
    bottom: 0;
    left: 0;
    margin: auto;
    overflow: auto;
    position: fixed;
    right: 0;
    top: 0;
    -o-object-fit: contain;
    object-fit: contain;
	width: 15%;
	background-color: rgb(255, 255, 255, .2);
	border: 1px solid rgba(255, 255, 255, .3s);
	border-radius: 14px;
	box-shadow: 0px 10px 200px rgba(0, 0, 0, 0.7);
	padding: 160px 60px;
}

body {
	background: #F5F3EC;
}

.video-container {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	overflow: hidden;
}

video {
	object-fit: fill;
	position: absolute;
	width: 100%;
	height: 100vh;
	max-width: none;
}

video::-webkit-media-controls {
    display: none;
}

@media screen and (max-width: 560px) {
	body {
		background-image: url("small_waves_1920x1200.jpg");
	}
	
	.overlay-content {
		background-color: rgb(0, 0, 0, .5);
	}

	.video-container {
		display: none;
	}
	
	div img {
		width: 40%;
		padding: 70px 30px;
		box-shadow: 0px 10px 70px rgba(0, 0, 0, 0.7);
	}
	
	h1 {
		margin: 50px auto;
	}
}

@media screen and (min-width: 760px) and (max-height: 460px){
	body {
		background-image: url("small_waves_1920x1200.jpg");
	}
	
	.overlay-content {
		background-color: rgb(0, 0, 0, .5);
	}

	.video-container {
		display: none;
	}
	
	div img {
		width: 16%;
		padding: 20px 70px;
		box-shadow: 0px 10px 100px rgba(0, 0, 0, 0.7);
	}
	
	h1 {
		margin: 20px auto;
		font-size:	2rem;
	}
}