/* ---- Banner section ---- */
:root() {
	--scrollbar-width: 0px;
}

.home-banner {
	background-size: cover;
	background-position: top left;
	height: 578px;
	width: 100%;
	top: 0;
	z-index: 0;
	position: fixed;
}
.home-banner,
.section-home-banner {
	height: calc((100vw - var(--scrollbar-width)) * 3.75 / 8);
	max-height: 796px;
	max-height: calc(100vh - 112px);
}
.home-banner__iframe-container {
	position: relative;
	padding: 56.25% 0 0 0;
}
.home-banner__iframe {
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.section.section-home-banner {
	padding: 0;
}
.section-home-banner .container {
	height: 100%;
}

/* ---- Post banner section ---- */
.section.section-post-banner {
	background-color: rgba(255,255,255,1);
	padding: 20px 0;
	border-bottom: 4px solid #c27d38;
	z-index: 2;
}
@media screen and (min-width: 1200px) {
	.section.section-post-banner {
		background-color: rgba(255,255,255,.5);
	}

}
.section-post-banner .content-circle {
	position: absolute;
	top: -71px;
	left: 0;
}

/* -- Title -- */
.post-banner-title {
	float: left;
	width: 190px;
	margin-left: 107px;
}
.post-banner-title h2 {
	margin-bottom: 5px;
	color: #FFF;
}
.post-banner-title .caps-text {
	font-size: 1.2rem;
	line-height: 1.4rem;
	margin-bottom: 0;
}

/* -- Buttons -- */
.post-banner-buttons {
	width: 484px;
	margin: 0 auto;
	padding-top: 9px;
	padding-bottom: 9px;
}


/* ---- Image section ---- */
.section.section-image-feature {
	padding: 390px 0 40px;
}
.section-image-feature {
	background: #010101 url(../images/majella-guys/majella-guys-1600.jpg) no-repeat center top;
	background-size: cover;
	height: 880px;
}




/* ==== [ FIRST BREAKPOINT ] ==== */
@media screen and (max-width: 1200px) {
	.home-banner,
	.section-home-banner {
		height: calc((100vw - var(--scrollbar-width)) * 9 / 16);
	}
	.section-home-banner .container:before {
		top: 8px;
		width: 45px;
		height: 44px;
		background-position: -59px -326px;
		background-size: 480px;
	}
	.post-banner-wines {
		bottom: -60px;
	}
	.post-banner-buttons {
		width: 417px;
	}
	.post-banner-wines img {
		width: 70px;
		margin: 0;
	}
	.section-post-banner .post-banner-content-circle {
		display: none;
	}
	.post-banner-title {
		margin-left: 0;
	}
	/* ---- Image section ---- */
	.section.section-image-feature {
		padding: 280px 0 40px;
	}
	.section-image-feature {
		height: 740px;
		background-image: url(../images/majella-guys/majella-guys-1200.jpg);
	}

}

/* ==== [ IPAD BREAKPOINT ] ==== */
@media screen and (max-width: 1024px) {
	.home-banner {
		position: absolute;
	}
	.section.section-image-feature {
		background-position: top center;
	}
}

/* ==== [ SECOND BREAKPOINT ] ==== */
@media screen and (max-width: 945px) {
	.section-home-banner .container:before {
		content: none;
	}
	.post-banner-buttons {
		margin-top: 10px;
	}
	.post-banner-content-circle {
		display: block;
	}
	.post-banner-title {
		margin-left: 112px;
	}
	.post-banner-title {
		float: none;
	}
	.post-banner-wines {
		bottom: 80px;
	}
	.post-banner-buttons {
		position: static;
		width: auto;
	}

	/* ---- Image section ---- */
	.section.section-image-feature {
		padding: 320px 0 30px;
		height: auto;
		background-image: url(../images/majella-guys/majella-guys-945.jpg);
	}

	.section-post-banner .post-banner-content-circle {
		display: block;
	}
}

/* ==== [ THIRD BREAKPOINT ] ==== */
@media screen and (max-width: 760px) {
	.post-banner-wines img {
		width: 50px;
	}
	.post-banner-buttons {
		margin-top: 6px;
	}
	.section.section-post-banner {
		padding: 15px 0;
	}
	.section-post-banner .content-circle {
		top: -64px;
	}
	.post-banner-title h2 {
		margin-bottom: 3px;
	}
	.post-banner-wines {
		bottom: 70px;
	}
	.section.section-image-feature {
		background-size: contain;
		background-position: top center;
		padding: 310px 0 60px;
		background-image: url(../images/majella-guys/majella-guys-760.jpg);
	}
}

/* ==== [ FOURTH BREAKPOINT - fluid ] ==== */
@media screen and (max-width: 550px) {
	.post-banner-buttons {
		margin-top: 0;
		padding: 0;
	}
	.post-banner-wines {
		display: block;
		right: auto;
		left: 20px;
		top: -81px;
		bottom: auto;
	}
	.post-banner-wines img {
		width: 23px;
	}
	.section-post-banner .content-circle {
		left: 20px;
	}
	.post-banner-title {
		margin-left: 0;
		width: auto;
		margin-top: 24px;
		display: none;
	}
	.post-banner-buttons .button-arrow-left {
		display: none;
	}
	.section-post-banner .content-circle {
		display: none;
	}
	.section-post-banner .button-row.button-row-2 .button {
		width: 100%;
		margin: 0;
	}
	.section.section-image-feature {
		padding: 240px 0 30px;
		background-image: url(../images/majella-guys/majella-guys-550.jpg);
	}
	.section.section-post-banner {
		padding: 10px 0;
	}
}

@media screen and (max-width: 450px) {
	.section.section-image-feature {
		padding: 180px 0 30px;
	}
}