body{
    --ab_cream: #ecde97; 
	--teal: #087482;
	--gold: #fcc62b;
	--dk_green: #392f2b;
	--radius: 10px;
}

#page > header{
	position: relative;
}

.container{
	position: relative;
		z-index: 10;
	width: 1205px;
	padding: 0 20px;
}

.gold{
	color: var(--gold);
}

.queso_ball{
	background-color: var(--teal);
	color: #ffffff;
}

.top_hero{
	position: relative;
	padding: 150px 20px 60px;
	background-color: var(--ab_green);
	background-image: url(../png/queso_ball_dot-bg.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	color: #ffffff;
}

.top_hero .inner{
	width: 1140px;
	min-height: 300px;
	border-radius: 50px;
	border: 8px solid #fff;
}

.top_hero h1{
	width: 800px;
	max-width: 95%;
	margin: auto;
	transform: translateY(-150px);
	text-align: center;
}

@media (max-width: 600px){
	
	.top_hero{
		padding-top: calc(50vw - 80px);
	}

	.top_hero h1{
		transform: translateY(calc(82px - 48.44vw));
	}
}

@media (min-width: 768px) and (min-height: 800px) and (max-height: 1200px){

	.top_hero h1 img{
		width: calc(102.5vh - 460px);
	}
}

.timer_area {
	display: flex;
	position: absolute;
		bottom: 40px;
		left: 0;
		z-index: 10;
	justify-content: center;
	align-items: flex-start;
	width: 100%;
	font-family: "futura-pt-condensed", sans-serif;
	font-size: 2rem;
	font-weight: 600;
	line-height: 1;
	gap: 50px;
}

.timer_area .timer_txt{
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-transform: uppercase;
	margin-top: 30px;
}

#countdown{
	flex: 0 0 auto;
	padding: 15px 24px;
	background-color: var(--teal);
	border-radius: var(--radius);
	color: #ffffff;
	text-transform: uppercase;
}

#countdown .upper{
	display: flex;
	justify-content: space-between;
	margin-bottom: 5px;
}

#countdown .upper span{
	flex: 1 1 auto;
	font-family: "futura-pt-condensed", sans-serif;
	font-weight: 600;
	text-align: center;
	font-size: .9em;
}

#countdown .lower{
	display: flex;
	gap: 15px;
}

#countdown .days,
#countdown .time{
	padding: 3px 10px;
	background-color: var(--dk_green);
	border-radius: var(--radius);
	border: 1px solid var(--gold);
	font-family: 'futura-pt';
	font-size: 3.7rem;
	color: var(--gold);
	font-weight: 600;
	line-height: 1;
	text-align: center;
}

#countdown .days{
	width: 1.503em;
}

#countdown .time{
	width: 4.26em;
}

/* @media (min-width: 861px){ */
/*  */
/* 	#countdown .upper span:nth-child(1){ */
/* 		flex: .7 1 auto; */
/* 	} */
/*  */
/* 	#countdown .upper span:nth-child(3){ */
/* 		flex: 1.8 1 auto; */
/* 	} */
/*  */
/* 	#countdown .upper span:nth-child(4){ */
/* 		flex: 1.7 1 auto; */
/* 	} */
/* } */

@media (max-width: 860px){
	
	.timer_area{
		bottom: 20px;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 10px;
	}
}

@media (max-width: 500px){

	.timer_area{
		font-size: 1.5rem;
	}

	#countdown .days, 
	#countdown .time{
		font-size: 2.6rem;
	}
}

.starends{
	position: relative;
	display: inline-block;
}

@media (min-width: 768px){

	.starends::before,
	.starends::after{
		display: inline-block;
		position: absolute;
		top: 50%;
		right: calc(100% + .2em);
		z-index: 1;
		width: 1em;
		height: 0.277777em;
		background-image: url(../png/queso_ball_stars.png);
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		background-size: 100%;
		font-size: 3em;
		content:'';
		transform: translateY(-57%);
	}

	.starends::after{
		left: calc(100% + .2em);
		right: -20px;
	}
}

.midpage_title{
	padding: 30px 0 20px;
	font-family: "futura-pt-bold", sans-serif;
	font-size: 3rem;
	text-transform: uppercase;
}

.big_title{
	margin-top: 20px;
	font-family: 'clarendon-boldregular', serif;
	font-size: 4rem;
}

@media (max-width: 500px){
	
	.big_title{
		font-size: 2rem;
	}

	.midpage_title{
		font-size: 2rem;
	}
}

.ball_copy{
	padding-bottom: 20px;
	font-family: 'futura-pt-bold';
	font-size: 2.5rem;
}

.ball_copy .smllr{
	font-size: .8em;
}

.ball_copy .gold{
	font-size: 3rem;
}

.ball_copy .cta{
	padding: .6em 1.7em .5em;
	font-size: 1.3rem;
}

.ball_copy img{
	width: 330px;
}

@media (min-width: 768px){
	
	.ball_copy{
		display: flex;
		align-items: center;
		gap: 20px;
	}
}

@media (max-width: 767px){
	.ball_copy{
		text-align: center;
		font-size: 2rem;
	}

	.ball_copy .gold{
		font-size: 2rem;
	}
}

.queso_ball .gform_wrapper{
	width: 1020px;
	max-width: 100%;
	padding: 50px 25px 0;
	margin: auto;
	border-top: 6px solid var(--gold);
}

.queso_ball .gform_heading{
	padding: 0 0 50px;
}

.queso_ball input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]), select{
	background-color: #ffffff;
	border-radius: 10px;
}

.queso_ball .gfield--type-honeypot{
	display: none;
}

.queso_ball .gfield_checkbox input:not(checked) + label:before,
.queso_ball .gfield_checkbox input:checked + label:before{
	top: 50%;
	border: 2px solid #fff;
	color: #ffffff;
	transform: translateY(-50%);
}

.queso_ball .gfield_checkbox input:checked + label:after{
	color: #ffffff;
}

.queso_ball .gfield_checkbox label{
	display: inline-block;
}

.queso_ball .sr_label legend{
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
}

.queso_ball .gform_wrapper .validation_error, 
.queso_ball .gfield_description.validation_message{
	background-color: #ff0000;
	color: #ffffff;
	font-weight: bold;
	padding: 2px;
}

input[type=submit]{
	font-family: 'futura-pt-bold';
    border-radius: 10px;
}

.footer_legal{
	width: 920px;
	max-width: 100%;
	padding: 50px 0;
	margin: auto;
	font-size: 1rem;
}

@media (max-width: 767px){
	.queso_ball .gfield_label{
		font-size: 1rem;
	}
}

.queso_ball .gform_confirmation_message{
	font-weight: bold;
	font-size: 2rem;
}

.content_area {
	overflow: hidden;
}

.content_area p{
	margin-bottom: .5em;
	font-size: 2rem;
}

.content_area p .cta{
	font-size: 1.2rem;
}

.content_area .social_row{
	margin: 1em 0;
	text-align: center;
}

.queso_bookends{
	position: relative;
	display: inline-block;
}

.queso_bookends::before,
.queso_bookends::after{
	display: inline-block;
	position: absolute;
		top: 50%;
		right: calc(100% + 20px);
		z-index: 1;
	width: 300px;
	height: 2em;
	background-image: url(https://abuelos.b-cdn.net/dbcwp/wp-content/themes/abuelos_restaurant/images/queso_ball/left_bookend.svg);
	background-repeat: no-repeat;
	background-position: right center;
	background-size: auto 100%;
	content:'';
	transform: translateY(-50%);
}

.queso_bookends::after{
	left: calc(100% + 20px);
	right: auto;
	background-image: url(https://abuelos.b-cdn.net/dbcwp/wp-content/themes/abuelos_restaurant/images/queso_ball/right_bookend.svg);
	background-position: left center;
}

.no_timer .top_hero {
	padding-top: 60px;
}

.no_timer .top_hero h1{
	transform: none;
}

.no_timer .top_hero .inner{
	padding-top: 40px;
}

@media (max-width: 900px){

	.no_timer .top_hero .inner{
		padding-top: 20px;
	}
}
