html,
body {
	padding: 0;
	margin: 0;
	height: 100%;
}

h3 {
	letter-spacing: 5px;
	text-transform: uppercase;
	font: 20px "Lato", sans-serif;
	color: #111;
}

.basic-waypoint {
	position: relative;
	overflow: hidden;
	min-height: 100vh;
	background-color: #FFF;
}

.basic-waypoint.active {
	z-index: 100;
}

.basic-waypoint .cover {
	position: fixed;
	width: 100vw;
	height: 100vh;
	object-fit: cover;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	max-width: none;
	max-height: none;
	z-index: 1;
	top: 0;
	opacity: 0;
	-webkit-transition: opacity 500ms ease-in;
	transition: opacity 500ms ease-in;
}

.basic-waypoint.item-prev-nocover,
.basic-waypoint.item-next-nocover,
.basic-waypoint.item-prev-nocover .caption,
.basic-waypoint.item-next-nocover .caption {
	opacity: 1;
}

.basic-waypoint.item-prev-cover .cover,
.basic-waypoint.item-next-cover .cover {
	position: absolute;
	opacity: 1;
}

.basic-waypoint .caption,
.basic-waypoint .caption-text {
	text-align: center;
	color: #000;
}

.basic-waypoint.sfondo-image .caption,
.basic-waypoint.sfondo-image .caption-text {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	z-index: 100;
}

.basic-waypoint .caption {
	opacity: 0;
}

.basic-waypoint.active .cover,
.basic-waypoint.active .caption {
	opacity: 1;
}

.basic-waypoint.active [class^="text-"] {
	position: fixed;
	z-index: 5;
	text-shadow: 1px 1px 2px #000;
	text-transform: uppercase;
	color: #FFF;
	width: 100%;
	padding-left: 15px;
	padding-right: 15px;
}

.basic-waypoint.active .text-br {
	bottom: 30px;
	left: 60px;
}

.basic-waypoint.active .text-bc {
	bottom: 30px;
	right: 50%;
	transform: translateX(50%);
}

.basic-waypoint.active .text-cc {
	bottom: 40%;
	right: 50%;
	transform: translate(50%,50%);
}

.basic-waypoint .title {
	position: absolute;
	bottom: 60%;
	left: 50%;
	transform: translate(-50%,50%);
	z-index: 5;
	width: 450px;
	max-width: 100%;
	padding-left: 20px;
	padding-right: 20px;
	text-transform: uppercase;
}

.basic-waypoint .title h1,
.basic-waypoint .title h2 {
	position: relative;
	font-size: 40px;
	line-height: 1;
	color: #fff;
	font-weight: normal;
	margin: 25px auto;
	padding: 25px 0;
	text-shadow: 1px 1px 2px black, 0 0 1em black, 0 0 0.2em black;
}

.basic-waypoint .title h2 {
	font-size: 18px;
	margin-top: 0;
	padding-top: 0;
}

.basic-waypoint.sfondo-image h3,
.basic-waypoint.sfondo-image p {
	width: 400px;
	max-width: 95%;
	background-color: rgba(0, 0, 0, 0.3);
	padding: 15px;
	margin: 0 auto;
	color: #FFF;
}

.basic-waypoint .caption span.border {
	background-color: #111;
	color: #fff;
	padding: 18px;
	font-size: 25px;
	letter-spacing: 10px;
}

.basic-waypoint .caption img {
	max-width: 100%;
	height: auto;
}

.basic-waypoint:last-child caption {
	padding-bottom: 200px;
}

.footer-container {
	position: relative;
	z-index: 200;
}

@media (min-width: 992px) {

	.basic-waypoint .title {
		max-width: 85%;
		padding-left: 0;
		padding-right: 0;
	}

	.basic-waypoint.active [class^="text-"] {
		width: 33%;
		padding-left: 0;
		padding-right: 0;
	}

	.basic-waypoint.active .text-br {
		left: unset;
		right: 30px;
	}

	.basic-waypoint.active .text-bc {
	}
}