@font-face {
    font-family: "sabon";
    src: url('https://abuelos.b-cdn.net/dbcwp/wp-content/themes/abuelos_restaurant/fonts/sabon/SabonLTStd-Bold.eot?#iefix') format('embedded-opentype'),
    url('https://abuelos.b-cdn.net/dbcwp/wp-content/themes/abuelos_restaurant/fonts/sabon/SabonLTStd-Bold.otf')  format('opentype'),
    url('https://abuelos.b-cdn.net/dbcwp/wp-content/themes/abuelos_restaurant/fonts/sabon/SabonLTStd-Bold.woff') format('woff'),
    url('https://abuelos.b-cdn.net/dbcwp/wp-content/themes/abuelos_restaurant/fonts/sabon/SabonLTStd-Bold.ttf')  format('truetype'),
    url('https://abuelos.b-cdn.net/dbcwp/wp-content/themes/abuelos_restaurant/fonts/sabon/SabonLTStd-Bold.svg#SabonLTStd-Roman') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "sabon";
    src: url('https://abuelos.b-cdn.net/dbcwp/wp-content/themes/abuelos_restaurant/fonts/sabon/SabonLTStd-Roman.eot?#iefix') format('embedded-opentype'),
    url('https://abuelos.b-cdn.net/dbcwp/wp-content/themes/abuelos_restaurant/fonts/sabon/SabonLTStd-Roman.otf')  format('opentype'),
    url('https://abuelos.b-cdn.net/dbcwp/wp-content/themes/abuelos_restaurant/fonts/sabon/SabonLTStd-Roman.woff') format('woff'),
    url('https://abuelos.b-cdn.net/dbcwp/wp-content/themes/abuelos_restaurant/fonts/sabon/SabonLTStd-Roman.ttf')  format('truetype'),
    url('https://abuelos.b-cdn.net/dbcwp/wp-content/themes/abuelos_restaurant/fonts/sabon/SabonLTStd-Roman.svg#SabonLTStd-Roman') format('svg');
    font-weight: normal;
    font-style: normal;
}


body{
    --ab_cream: #ecde97; 
	--red: #9e3223;
    --pearl_bush: #e8ddd3;
}

#page > header{
	position: relative;
}


article .container{
	padding-top: 0;
}

.container{
	position: relative;
		z-index: 10;
	width: 1530px;
	padding: 0 20px;
}

.big_hero{
	position: relative;
	width: 100%;
	height: 38vw;
	background-image: url(../jpg/family-feast-hero-desk.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	min-height: 500px;
}

@media (max-width: 767px){
	
	.big_hero{
		background-image: url(../jpg/family-feast-hero-mobile.jpg);
		height: 100vw;
	}
}

.title_bar{
	padding: 0 20px;
	background-color: var(--red);
	font-family: "futura-pt-condensed", sans-serif;
	font-size: 3rem;
	color: var(--pearl_bush);
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
}

.title_bar h1{
	display: inline-block;
	padding: 0;
	transform: translateY(-50%);
}

.title_bar h1 img{
	width: 640px;
}

.subtitle{
	font-size: 5.7rem;
	margin-top: -35px;
	font-weight: bold;
	line-height: 1;
}

.subtitle span{
	font-size: .7em;
}

@media (max-width: 767px){
	.subtitle{
		font-size: 3.7rem;
	}
}

.subline{
	text-transform: none;
}

.body_content {
	padding: 50px 0 120px;
	background-color: #000000;
	background-image: url(../jpg/texture_bknd.jpg);
	background-position: center;
}

.body_content .container{
	width: 840px;
}

.body_content h2{
	margin-bottom: 20px;
	font-family: "futura-pt-bold", sans-serif;
	font-size: 3.5rem;
	color: var(--pearl_bush);
	line-height: 1;
}

@media (max-width: 767px){
	.body_content h2{
		font-size: 3rem;
	}
}

.body_content h2 span{
    font-family: "futura-pt", sans-serif;
	font-weight: normal;
}


.body_content p{
	color: var(--ab_cream);
	font-size: 2rem;
}

@media (min-width: 501px) and (max-width: 665px){
	.body_content p{
		font-size: 1.4rem;
	}
}

@media (max-width: 500px){
	.body_content p{
		font-size: 1.5rem;
	}
}

@media (min-width: 440px){
	.body_content br{
		display: none;
	}
}

.top_content{
	width: 740px;
	max-width: 100%;
	margin: auto;
}

.upgrade_box {
	padding: 0 20px 50px;
	margin: 80px 0 20px;
	border: 3px solid var(--red);
}

.upgrade_box h2{
	transform: translateY(-40%);
	margin: 0;
}

.upgrade_box h2 img{
	width: 220px;
}

@media (max-width: 500px){

	.upgrade_box {
		padding-bottom: 30px;
	}

	.upgrade_box h2 img{
		width: 160px;
	}
}

.upgrade_box p{
	font-family: "futura-pt-bold", sans-serif;
}

.upgrade_box p:first-of-type{
	margin-top: -50px;
}

.upgrade_box span{
	color: #ffffff;
	font-family: "futura-pt", sans-serif;
}

.bookends{
	display: inline-block;
	position: relative;
		z-index: 1;
	color: var(--ab_cream);
	font-weight: bold;
}

.bookends:before,
.bookends:after{
	background-image: none;
	display: inline-block;
	position: absolute;
		top: 50%;
		z-index: 1;
	width: 20%;;
	height: 3px;
	background-color: var(--ab_cream);
	background-repeat: no-repeat;
	content:'';

	        transform: translateY(-50%);
}

.bookends:before{
	left: calc(100% + 11px);
}

.bookends:after{
	right: calc(100% + 11px);
}

h1 {
	font-size: 4.3rem;
	font-weight: bold;
	text-transform: uppercase;
	font-family: "futura-pt-condensed", sans-serif;
	line-height: 1;
}

@media (max-width: 767px){
	h1{
		font-size: 3rem;
	}
}

.disclaim p{
	font-family: "sabon", serif;
	color: #ffffff;
	font-size: 1rem;
}

#callout{
	position: absolute;
		top: 0;
		right: 0;
		z-index: 1;
	width: 250px;
	height: auto;
	aspect-ratio: 1/1;
}

@media (min-width: 1201px){

	#callout{
		top: 0;
		left: calc(50% + 340px);
		transform: translateX(-50%);
	}
}

@media (max-width: 600px){

	#callout{
		width: 40vw;
	}
}

article .cta{
	margin-bottom: 50px;
}