@import url('text-style.css');

body { margin:0; }
* { position:relative; box-sizing:border-box; }
.layout { width:1250px; margin:0 auto; height:inherit; padding-left:25px; padding-right:25px; }
nav > ul { display:flex; justify-content:space-around; align-items:center; list-style-type:none; margin:0; padding:0; }
nav li { display:block; margin:0; }
nav a { display:flex; align-items:center; justify-content:space-around; text-decoration:none; text-transform:uppercase; transition:background-color 0.2s,color 0.2s; white-space:nowrap; }
nav a span { display:block; margin:auto; }

h2 span { font-family:Heebo; font-weight:bold; font-style:italic; display:inline-block; left:-0.3vw; }

.pillbox { display:inline-block; border:none; background:#bf0c1d; color:#ffffff; font-family:'Rubik Bold'; text-align:center; padding:10px 50px; text-decoration:none; border-radius:30px; box-shadow:0 3px 3px -1px rgba(0,0,0,0.25); text-transform:uppercase; }
.pillbox:hover { background:#e51427; }
.pillbox.blue { background:#161e57; }
.pillbox.blue:hover { background:#212778; }
.decoration-icon { height:60px; margin-left:10%; }

#contact-bar { background-color:#161e57; height:40px; text-align:right; }
#contact-bar-layout { display:flex; align-items:center; justify-content:flex-end; }
#contact-bar-address { display:block; font-family:'Rubik Bold'; text-transform:uppercase; color:#ffffff; margin-right:2.5%; }
#contact-bar-social { display:block; }
#contact-bar-social a { color:#ffffff; width:36px; height:36px; border-radius:3px; background:rgba(0,0,0,0); }
#contact-bar-social a:hover { background-color:rgba(0,0,0,1); }

#masthead { height:100px; background:#fffdf3; z-index:3; }
#masthead-layout { display:flex; align-items:center; justify-content:space-between; }
#masthead-logo { height:150px; }
#main-nav { display:block; }
#main-nav a { padding:10px 15px; color:#000000; font-family:'Rubik Bold'; font-size:80%; }
#main-nav a:hover { background:#161e57; color:#fffdf3; }

#promo { width:100%; height:0; padding-bottom:47.2%; background:#993333; }
#promo-carousel { position:absolute; left:0; right:0; top:0; bottom:0; list-style-type:none; display:block; padding:0; margin:0; }
#promo-carousel li { position:absolute; left:0; right:0; top:0; bottom:0; background:center no-repeat; background-size:cover; }
#promo-overlay { position:absolute; cursor:default; left:0; bottom:0; z-index:2; background:url('../img/layout/promo.text-bkg.png') bottom left no-repeat; background-size:contain; width:81%; height:41.6%; padding-left:5%; color:#ffffff; }
#promo-decoration { margin-top:3.75vw; margin-left:2vw; height:3vw; }
#promo-overlay h1 { font-size:5vw; margin:0; color:#ffffff; }
#promo-overlay p { font-size:1.75vw; margin:-1.75vw 0 0 0.5vw; color:#ffffff !important; }

#promo-carousel li { opacity:0; z-index:1; transition:opacity 4s, z-index 0s; }
#promo-carousel li:nth-child(2) { opacity:1; z-index:2; }
.promo-overlay-text { position:absolute; left:-100%; opacity:0; z-index:1; transition:opacity 1s, left 0s 1s; }
.promo-overlay-text.active { opacity:1; left:0; transition:opacity 1s, left 1s !important; }
.promo-overlay-text p { top:-3vw; opacity:0; transition:top 0s 1s, opacity 0s 1s; }
.promo-overlay-text.active p { top:0; opacity:1; transition:top 0.8s 1s, opacity 3s 0.8s; } 
#promo-carousel-nav { display:flex; position:absolute; bottom:5%; left:6.5%; gap:1vw; }
.promo-carousel-nav-indicator { display:block; width:2vw; height:2vw; border:0.2vw #ffffff solid; border-radius:50%; background:rgba(255,255,255,0); transition:background-color 0.5s; }
.promo-carousel-nav-indicator.active { background-color:rgba(255,255,255,0.5); }
.promo-carousel-arrow { display:block; width:2vw; height:2vw; font-size:3vw; color:#ffffff; text-decoration:none; margin-top:-1.2vw; text-align:center; transition:color 0.2s; transform:scaleX(2); }
.promo-carousel-arrow:hover { color:#fffdf3; text-shadow:0 0 5px #fffdf3; }
.promo-carousel-arrow:active { color:#ffffff; text-shadow:0 0 5px #ffffff; top:1px; transition:color 0s; }

#home-features { padding-top:2.5%; padding-bottom:2.5%; background:#ffffff; }
#home-features-layout { display:flex; flex-wrap:wrap; }
#home-features-layout a { display:block; width:25%; border-left:1px #000000 dotted; color:#000000; text-decoration:none; text-align:center; }
#home-features-layout a:first-child { border-left:none; }
#home-features-layout a img { display:block; width:50%; margin:0 auto; }
#home-features-layout a h2 { font-size:140%; margin:0 5%; }
#home-features-layout a p { margin:0 5%; }

#daily-bread { background:url('../img/layout/daily-bread.bkg.jpg') top right no-repeat; background-size:cover; padding-top:1px; padding-bottom:50px; text-align:center; }
#daily-bread h1 { color:#000000; text-align:center; margin-top:75px; }
#bread-box { display:flex; justify-content:space-between; align-items:top; margin-bottom:2.5%; }
#bread-box img { display:block; width:18%; }

#owners-message { background:url('../img/layout/owners-message.bkg.jpg') top left no-repeat #141a3d; background-size:contain; color:#ffffff; }
#owners-message-layout { padding-top:5%; padding-bottom:5%; display:flex; justify-content:space-around; align-items:flex-start; }
#owner-photo { display:block; width:55%; }
#owners-message-content { display:block; width:40%; }
#owners-message-content h2 { margin:0; color:#ffffff; }
#owners-message-content p { margin-top:0; }

#announcements { background:#a60b16; color:#ffffff; }
#announcements h2 { margin:0; color:#ffffff; }
#announcements p { margin-top:0; }
#announcements-layout { padding-top:2.5%; padding-bottom:2.5%; display:flex; justify-content:space-between; align-items:center; }
#store-photo { display:block; width:55%; margin:0; }
#announcements-content { width:40%; }

#community { width:100%; }
#community h1 { text-align:center; color:#161e57; margin-bottom:0; }
#community-carousel-container { display:flex; justify-content:space-around; align-items:center; }
#community-carousel { width:95vw; margin-left:-2.5vw; margin-right:-2.5vw; height:20vw; list-style-type:none; display:block; margin:0; padding:0; overflow:hidden; }
.community-carousel-image { position:absolute; margin:0 0.5%; width:24%; height:80%; left:100%; top:0; z-index:1; display:none; transition:left 0.5s, opacity 0s; background:center no-repeat; background-size:cover; display:block; padding:0; }
.community-carousel-image a { display:block; width:100%; height:100%; }
.community-carousel-image:nth-child(1) { left:-25%; display:block; }
.community-carousel-image:nth-child(2) { left:0; display:block; }
.community-carousel-image:nth-child(3) { left:25%; display:block; }
.community-carousel-image:nth-child(4) { left:50%; display:block; }
.community-carousel-image:nth-child(5) { left:75%; display:block; }
#community-carousel::before { display:block; position:absolute; left:0; top:0; bottom:0; width:0.5%; content:' '; font-size:0; background:linear-gradient(90deg,rgba(255,255,255,1),rgba(255,255,255,0)); z-index:2; } 
#community-carousel::after { display:block; position:absolute; right:0; top:0; bottom:0; width:0.5%; content:' '; font-size:0; background:linear-gradient(270deg,rgba(255,255,255,1),rgba(255,255,255,0)); z-index:2; } 
.community-carousel-arrow { display:flex; width:5vw; height:5vw; text-align:center; justify-content:space-around; align-items:center; color:#000000; font-size:5vw; text-decoration:none; margin-top:-4%; transition:color 0.2s,top 0s; }
.community-carousel-arrow:hover { color:#161e57; transition:color 0.2s,top 0s; }
.community-carousel-arrow:active { color:#a60b16; top:1px; transition:color 0s,top 0s; }

#healthy { background:url('../img/layout/healthy.bkg.jpg') center no-repeat #876543; background-size:cover; padding-top:2.5%; padding-bottom:2.5%; color:#ffffff; text-align:center; text-shadow:1px 1px 3px #000000;  }
#healthy::before { display:block; content:' '; background:rgba(0,0,0,0.25); position:absolute; left:0; right:0; top:0; bottom:0; }
#healthy h1 { margin:0; color:#ffffff; }
#healthy-content { display:flex; justify-content:space-around; align-items:top; }
.healthy-content-item { width:31%; display:block; text-decoration:none; color:#ffffff; padding:2.5%; border-radius:5px; background:rgba(0,0,0,0); }
.healthy-content-item img { width:50%; display:block; margin:0 auto; margin-bottom:5%; }
.healthy-content-item h2 { font-size:120%; margin:0 5%; color:#ffffff; }
.healthy-content-item:hover { background:rgba(0,0,0,0.5); }

#main-footer { background:url('../img/layout/footer.bkg.jpg') center no-repeat; background-size:cover; padding-top:2.5%; padding-bottom:2.5%; }
#main-footer h3 { color:#161c4a; width:100%; width:100%; margin:0; }
#main-footer-layout { display:flex; justify-content:space-between; align-items:flex-start; }
#main-footer-hours { width:25%; }
#main-footer-hours table { width:100%; border-spacing:0; border-collapse:collapse; border:none; }
#main-footer-hours td { padding:0; }
#main-footer-hours td:last-child { text-align:right; }
#main-footer-nav { display:flex; justify-content:space-around; align-items:flex start; width:40%; flex-wrap:wrap; }
#main-footer-nav ul { display:block; list-style-type:none; width:40%; padding:0; margin:0; }
#main-footer-nav li { display:block; padding:0; margin:0; }
#main-footer-nav a { color:#000000; text-decoration:none; }
#main-footer-nav a:hover { color:#161c4a; }
#main-footer-location { width:15%; }
#footer-logo { display:block; width:100%; margin:5% 0; }
#copyright { background:#161c4a; color:#ffffff; padding-top:1%; padding-bottom:1%; }
#copyright p { text-align:right; }

#mobile-nav { display:none; width:6vw; height:6vw; position:absolute; right:0; top:0; }
#mobile-nav-toggle { width:6vw; height:6vw; font-size:5vw; display:flex; align-items:center; justify-content:space-around; color:#161c4a; background:transparent; }
#mobile-nav-toggle:hover,
.mobile-nav-expanded #mobile-nav-toggle { color:#ffffff; background:#161c4a; }
#mobile-nav-toggle i { display:block; line-height:1; }
#mobile-nav-panel { display:none; position:absolute; right:0; top:100%; opacity:0; transition:display 0s 0.2s, opacity 0.2s; background:#161c4a; }
.mobile-nav-expanded #mobile-nav-panel { display:block; opacity:1; }
#mobile-nav-links, #mobile-nav-panel li { display:block; list-style-type:none; width:100%; margin:0; padding:0; }
#mobile-nav-links a { display:block; color:#ffffff; background:#161c4a; font-size:2vw; font-family:'Rubik Bold'; padding:0.5vw 2vw; text-align:right; }
#mobile-nav-panel ul a:hover, #mobile-nav-panel ul a:focus { background:#a60b16; z-index:2; }
#mobile-nav-social ul { display:flex; gap:0.3vw; align-items:center; justify-content:space-around; list-style-type:none; margin:0; padding:0.5vw; border-bottom:2px #ffffff solid; }
#mobile-nav-social li { display:block; margin:0; padding:0; }
#mobile-nav-social a { display:flex; width:5vw; height:5vw; font-size:4vw; color:#161c4a; background:rgba(255,255,255,0.8); border-radius:2px; }
#mobile-nav-social a:hover { background:#ffffff !important; color:#161c4a; box-shadow:0 0 5px #ffffff; }
#mobile-nav-social i { display:block; }
#mobile-nav-social li { width:auto; }
#mobile-nav-address { color:#ffffff; text-align:center; font-size:2vw; padding:0.5vw; white-space:nowrap; }
#mobile-nav-shroud { display:none; position:fixed; left:0; right:0; top:0; bottom:0; width:100%; height:100%; opacity:0; background:rgba(0,0,0,0.5); z-index:1; transition:display 0s 0.2s, opacity 0.2s; }

#main-header { width:100%; height:0; padding-bottom:22.8%; background:url('/img/layout/main-header.bkg.jpg') center no-repeat; background-size:cover; }
#main-header-text { position:absolute; right:0; bottom:0; width:46.875%; height:62.187%; padding-top:2.5%; padding-right:2.5%; background:url('/img/layout/main-header-text.bkg.png') bottom right no-repeat; background-size:contain; text-align:right; color:#ffffff; }
#main-header h1 { font-size:4vw; margin:0; color:#ffffff; white-space:nowrap; }
#main-header .decoration-icon { height:3vw; margin-right:3vw; margin-bottom:2em; }
#main { background:#ffffff; padding-top:2.5%; padding-bottom:2.5%; }

#product-listing { display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:stretch; gap:5%; }
.product-entry { display:block; width:30%; margin-bottom:5%; }
.product-entry img { display:block; width:100%; margin:0; }
.product-entry h3 { margin:0; font-size:110%; }
.product-entry p { margin-top:0; }

#lightbox { top:50px !important; }


@media (max-width:1250px) {
	#contact-bar { height:3vw; }
	#contact-bar-layout { top:-0.5vw; }
	#contact-bar-social a { width:2.8vw; height:2.8vw; }
	.layout { width:100%; margin:0; padding:2vw; }
	body, p, td, th, li { font-size:1.4vw; }
	#main-nav a { padding:0.75vw 1.1vw; }
	#masthead-logo { height:12vw; }
	#masthead { height:8vw; }
	.decoration-icon { height:4.5vw; }
}

@media (max-width:1024px) {
	#contact-bar,
	#main-nav { display:none; }
	#masthead { position:fixed; left:0; right:0; top:0; height:6vw; }
	#masthead-layout { align-items:flex-start; }
	body { padding-top:6vw; }
	#masthead-logo { height:9vw; margin-top:-1.5vw; }
	#mobile-nav { display:block; }
	.mobile-nav-expanded #mobile-nav-shroud { display:block; opacity:1; transition:display 0s, opacity 0.2s; }
}

@media (max-width:960px) {
	body, p, td, th, li { font-size:1.8vw; }
	#home-features-layout a { width:50%; padding-top:2.5%; padding-bottom:2.5%; }
	#home-features-layout a:nth-child(2n+1) { border-left:none; }
	#home-features-layout a:nth-child(3),
	#home-features-layout a:nth-child(4) { border-top:1px #000000 dotted; }
	#owner-photo { width:50%; }
	#announcements { padding-top:2.5%; padding-bottom:2.5%; }
	#main-footer-nav { display:none; }
	#main-footer-hours { width:40%; }
	#main-footer-location { margin-right:2vw; width:20%; }
	.product-entry { width:46%; }
	#main-header-text { transform:scale(1.5) translate(-15%,-15%) }
	#community-carousel { height:27vw; }
	.community-carousel-image { width:32.3%; }
	.community-carousel-image:nth-child(1) { left:-33.3333%; }
	.community-carousel-image:nth-child(3) { left:33.3333%; }
	.community-carousel-image:nth-child(4) { left:66.6666%; }
	.community-carousel-image:nth-child(5) { left:100%; }
}

@media (max-width:768px) {
	body, p, td, th, li { font-size:2.2vw; }
	h1 { font-size:250%; }
	h2 { font-size:200%; }
	h3 { font-size:160%; }
	h4 { font-size:120%; }
	.healthy-content-item { width:33%; }
	.healthy-content-item h2 { font-size:110%; }
}

@media (max-width:640px) {
	body { padding-top:10vw; }
	body, p, td, th, li { font-size:2.6vw; }
	h1 { font-size:210%; }
	h2 { font-size:160%; }
	h3 { font-size:150%; }
	h4 { font-size:120%; }
	#home-features { padding-top:0; padding-bottom:0; }
	#home-features-layout a { border-left:none; border-top:1px #000000 dotted; width:100%; text-align:left; }
	#home-features-layout a img { float:left; margin:unset; width:25%; margin-right:5%; }
	#home-features-layout a:first-child { border-top:none; }
	#home-features-layout a h2 { margin-top:4vw; }
	#owners-message h2, #announcements h2 { text-align:center; }
	#owners-message-layout { flex-direction:column; }
	#owner-photo { width:75%; margin:0 auto; }
	#owners-message-content { width:75%; margin:0 auto; text-align:justify; }
	#announcements-layout { flex-direction:column-reverse; }
	#store-photo { width:75%; margin:0 auto; }
	#announcements-content { width:75%; margin:0 auto; text-align:justify; }
	.decoration-icon { margin:0 auto; display:block; }
	
	#community-carousel { height:40vw; }
	.community-carousel-image { width:49%; }
	.community-carousel-image:nth-child(1) { left:-50%; }
	.community-carousel-image:nth-child(3) { left:50%; }
	.community-carousel-image:nth-child(4) { left:100%; }
	.community-carousel-image:nth-child(5) { left:100%; }
	.community-carousel-arrow { width:7vw; height:7vw; font-size:7vw; margin-top:-7%; }

	#healthy h1 { font-size:350%; }
	#healthy-content { flex-direction:column; flex-wrap:wrap; }
	.healthy-content-item { width:100%; text-align:left; }
	.healthy-content-item img { float:left; width:20%; margin:0 5% 0 0; }
	.healthy-content-item h2 { margin-top:2vw; }
	#main-footer-location { width:30%; }
	#masthead { height:10vw; }
	#masthead-logo { height:13vw; }
	#mobile-nav { width:10vw; height:10vw; }
	#mobile-nav-toggle { height:10vw; width:10vw; font-size:8.5vw; }
	#mobile-nav-address { font-size:4vw; }
	#mobile-nav-links a { font-size:4vw; }
	#mobile-nav-social a { width:7.5vw; height:7.5vw; font-size:6vw; }
}

@media (max-width:480px) {
	body, p, td, th, li { font-size:3vw; }
	/*
	#main-footer-layout { flex-direction:column; }
	*/
	#main-footer-hours { width:50%; }
	#main-footer-location { width:40%; }
	#footer-logo { display:none; }
	/*
	#promo-overlay p { display:none; }
	*/
	#mobile-nav-panel { position:fixed; width:100%; top:10vw; left:0; right:0; overflow:auto; z-index:-1; }
	#mobile-nav-social { float:left; width:20%; height:100%; border-right:2px #ffffff solid; border-bottom:none; }
	#mobile-nav-social a { width:15vw; height:15vw; font-size:12vw; }
	#mobile-nav-links { float:right; width:80%; }
	#mobile-nav-panel::after { display:block; clear:both; float:none; height:0; content:' '; overflow:hidden; font-size:0; }
	#mobile-nav-address { border-bottom:2px #ffffff solid; }
	#mobile-nav-main { display:flex; align-items:center; }
	#mobile-nav-social ul { flex-direction:column; border-bottom:none; }
	#product-listing { flex-direction:column; }
	.product-entry { width:100%; }
}

@media (max-width:360px) {
	#main-footer h3 { text-align:center; }
	body, p, td, th, li { font-size:3.3vw; }
	#main-footer-layout { flex-direction:column; }
	#main-footer-hours { width:100%; margin-bottom:6vw; }
	#main-footer-location { width:100%; text-align:center; }

	#community-carousel { height:80vw; }
	.community-carousel-image { width:99%; }
	.community-carousel-image:nth-child(1) { left:-100%; }
	.community-carousel-image:nth-child(3) { left:100%; }
	.community-carousel-image:nth-child(4) { left:100%; }
	.community-carousel-image:nth-child(5) { left:100%; }
	.community-carousel-arrow { width:9vw; height:9vw; font-size:9vw; margin-top:-12%; }
}