@charset "UTF-8";
/*
	Notes:
	=====
	DO NOT change the values from em. We're using em for more flexibility for responsive browsers, allowing people to use zoom.
	=====
	Min-width applies to that break and bigger (or from the break to infinity).
	Max-width applies to that break and lower (or from 0 to the break).
	-----
	Major breakpoints
	-----
	1000px = 62.5em
	640px = 40em
	
	1000 divided by 16 = 62.5em this is the formula for figuring out the px to em conversion for the widths
	=====
*/

/* 1340px = 83.75em */
@media screen and (max-width:83.75em) {

	header { padding:0 1em; }
	main#content article, main#content article.secondary-page { padding:2em; }

	.secondary { gap:2em; flex-wrap:wrap; }

	.image-carousel p:first-of-type { font-size:4.4rem; line-height:4.6rem; }

	.extra-info .flex { width:100%; }

}


/* 980px = 61.25em */
@media screen and (max-width:61.25em) {
	
	nav#menu { display:none; }
	.hamburger-container { display:block; }

	.secondary div { flex-basis:100%; }

}



/* 840px = 52.5em */
@media screen and (max-width:52.5em) {

	.extra-info { padding:2em 0; }
	.extra-info .flex { flex-wrap:wrap; gap:1em; }
	.extra-info .flex div { flex-basis:100%; }

}


/* 740px = 46.25em */
@media screen and (max-width:46.25em) {

}

/* 680px = 42.5em */
@media screen and (max-width:42.5em) {

	#header .flex { flex-wrap:wrap; }
	#branding, .hamburger-container { flex-basis:100%; width:100%; text-align:center; }

	.hamburger-container label { justify-content:center; }

	.image-carousel .slick-slide div { width:85%; }
	.image-carousel .slick-slide div { padding:1em; }
	.image-carousel p:first-of-type { font-size:3.4rem; line-height:3.6rem; }
	.image-carousel p { font-size:1.8rem; }

	.buttons p { flex-basis:100%; width:100%; }
	.buttons p a { width:100%; }

	.ex-breakfasts div { flex-basis:100%; width:100%; }

	.search-status-hp { width:100%; }

	.hp { flex-wrap:wrap; background-color:transparent; }
	.hp div { flex-basis:100%; width:100%; }

	.hp-content { flex-wrap:wrap; gap:1em; }
	.hp-content div { flex-basis:100%; width:100%; }

}


/* 580px = 36.25em */
@media screen and (max-width:36.25em) {



}


/* 440px = 27.5em */
@media screen and (max-width:27.5em) {

	ul li, ol li { padding:0.5em 0; }

	.image-carousel p:first-of-type { font-size:2.8rem; line-height:1.5em; }

}