﻿/* Styles copyright 2023 digitalStorefront.  Not for use on other sites or redistribution.  */

/* Sticky footer styles
-------------------------------------------------- */
html { font-size: 14px; }
@media (min-width: 768px) {
  html { font-size:16px; }
}

.error { color:#f00; }
.clearfix { clear:both; }

header h1 { margin:0; }
header .text-align-left { text-align:left; }
header .text-align-center { text-align: center; }
header .text-align-right { text-align: right; }

.w-100 { width:100%; }
.w-66 { width:66%; }
.w-50 { width:50%; }
.w-33 { width:33%; }

.layout3 header .text-align-right,
.layout4 header .text-align-right { text-align: left; }

.layout3 header .text-align-right h1,
.layout4 header .text-align-right h1 { float: right; }

nav span.divider { opacity:0.3; }
nav .nav-menu { list-style:none; margin:0; padding:0; }
nav .nav-menu > li { display:inline; position:relative; }
nav .nav-menu > li:not(:last-child)::after { content: '|'; opacity:0.3; margin:0 0.1rem; }

nav .nav-menu li.active > a { font-weight:bold; }
nav .nav-menu > li a { padding:10px 6px; }

nav .nav-menu .nav-level-2 { display:none; list-style:none; box-shadow:0 2px 6px rgba(0, 0, 0, 0.1); z-index:10; }
nav .nav-menu li:hover .nav-level-2 { position:absolute; top:26px; left:0px; display:block; width:170px; background-color:#fff; padding:6px 10px; border:solid 1px #ccc; text-shadow:none; }

nav .nav-menu .nav-level-2 > li { padding:4px 0; font-size:14px; text-align:left; }

/* Site banner */
.site-banner { padding: 1em 2em; text-align:center; }

/* Breadcrumbs */
ol.breadcrumb { position: absolute; background-color: transparent; font-size: 14px; opacity: 0.6; }

.container { padding:0 48px !important; }
.container main { padding:0 0 48px 0; }

h2 { margin:1em 0; }

@media (max-width: 1200px) {
	ol.breadcrumb { position: static; margin-bottom: 0; }
}

@media (max-width: 1200px) {
	h1 { font-size: 3rem !important; }
	h2 { font-size: 1.75rem !important; }
	h4 { font-size: 1.4rem !important; }

	.quote-container { font-size: 2rem !important; }
}

@media (max-width: 768px) {
	h1 { font-size: 2.5rem !important; }
	h2 { font-size: 1.5rem !important; }
	h4 { font-size: 1.3rem !important; }

	.quote-container { font-size:1.4rem !important; }
	.quote { padding:1em 1.5em !important; line-height:32px !important; }
	.quote-container .quote-curved { padding:1em 2em !important; }

	.quote-container .w-66,
	.quote-container .w-50
	.quote-container .w-33 { width: 100%; }

	.container { padding: 0 30px !important; }
	.container main { padding:0 0 30px 0; }

	nav.mobile-navwrap { width: 100%; }
	nav.mobile-navwrap li { display: block; text-align: center; }
	nav.mobile-navwrap .nav-menu li a { display:inline-block; padding: 4px; }
	nav.mobile-navwrap li::after { content: '' !important; }
	nav.mobile-navwrap .edit-nav-link { display:inline-block; }
}

/* Form styles */
.form label { width:30%; display:inline-block; vertical-align:top; }

.form { max-width:600px; text-align:left; margin:0 auto; }
.form-small { max-width: 320px; }
.form-medium { max-width: 400px; }
.form-large { max-width: 600px; }
.form-full { max-width:100%; }

.form input,
.form textarea,
.form select,
.form button { width:65%; padding:8px 18px; border:solid 1px #aaa; border-radius:20px; }

.form input[type="submit"],
.form input[type="button"],
.form input[type="checkbox"],
.form input[type="radio"],
.form button { width:auto; }

.form .invisible-field { border:solid 1px transparent; outline:none; }
.form .invisible-field:focus { border:solid 1px #aaa; }

.form .field-row { padding:8px 0; }

@media (max-width: 768px) {
	.form label { width:100%; }
	.form input,
	.form textarea,
	.form select,
	.form button { width: 100%; }

	main.page-align-center .contact-form label { text-align:center !important; padding-right:0 !important; }
}

.hosted-by-logo { float: right; opacity: 0.2; }
.hosted-by-logo:hover { opacity: 0.5; }

/* Q29weXJpZ2h0IGRpZ2l0YWxTdG9yZWZyb250 */

/* Content */
main.page-align-left { text-align:left; }
main.page-align-center { text-align:center; }
main.page-align-right { text-align:right; }

main.paragraph-spacing-small h4.para-padding { margin-top:3rem !important; }
main.paragraph-spacing-medium h4.para-padding { margin-top:4rem !important; }
main.paragraph-spacing-large h4.para-padding { margin-top:5rem !important; }

.paragraph { margin-bottom:2em; }
.paragraph img { max-width:100%; }

/* Buttons */
.button { border-radius:20px; display:inline-block; cursor:pointer; font-family:Arial; font-size:16px; font-weight:bold; padding:11px 24px; text-decoration:none; opacity:0.8; }
.button:hover { opacity:1; }
.button:active { position:relative; top:1px; }

.button-green { box-shadow:inset 0px 1px 0px 0px #caefab; background:linear-gradient(to bottom, #77d42a 5%, #5cb811 100%); background-color:#77d42a; border:1px solid #268a16; color:#306108; text-shadow:0px 1px 0px #aade7c; }
.button-green:hover { background:linear-gradient(to bottom, #5cb811 5%, #77d42a 100%); background-color:#5cb811; }

.button-orange { box-shadow:inset 0px 1px 0px 0px #f9eca0; background:linear-gradient(to bottom, #f0c911 5%, #f2ab1e 100%); background-color:#f0c911; border:1px solid #e65f44; color:#c95d00; text-shadow:0px 1px 0px #ded17c; }
.button-orange:hover { background:linear-gradient(to bottom, #f2ab1e 5%, #f0c911 100%); background-color:#f2ab1e; }

/* Other */
.quote-container { margin:1em 0; font-size:2.5rem; }
.quote { display:inline-block; text-align:center; padding:1em 2em; line-height:1.2em; overflow:hidden; }
.quote .author { font-size:0.6em; opacity:0.6; }
.quote .g-quote { font-size:1.3em; opacity:0.8; }
.quote-square { }
.quote-rounded { border-radius: 2em; }
.quote-curved { border-radius: 4em 1em; }

.hero-banner { width:100%; padding:2em; text-align:center; background-color:#ccc; font-size:24px; transition:background-image 1s ease; }

.banner-message { text-align:center; padding:1em; background-color:#ded; color:#282; font-size:1.1em; }

.contact-detail-container { text-align:left; }
.contact-detail .label { display: inline-block; font-weight: bold; width: 110px; vertical-align: top; }
.contact-detail .detail { display: inline-block; }

.contact-form { margin-bottom:2em; }
main.page-align-center .contact-form label { text-align:right; padding-right:2em; }

.contact-obf { display:none; }

.text-fullwidth img { width: 100%; max-width: 100%; max-height: none; }

.tabular-data { margin-bottom:2em !important; text-align:left; }
.tabular-data td { padding:0.8em; }
.table-left { float:left; }
.table-right { float:right; }
.table-center { margin:0 auto; }
.table-fullwidth { width:100%; }

.table-style-simplegreyborder td { border:solid 1px #ccc; }
.table-style-noborder td { border:none; }
.table-style-alternateshadedrows td { border:solid 1px #ccc; }
.table-style-alternateshadedrows tr:nth-child(odd) td { background-color:#eee; }
.table-style-withheader td { border:solid 1px #ccc; }
.table-style-withheader tr:first-child td { background-color:#3397c5 !important; color: #fff; }
.table-style-withheader tr:nth-child(odd) td { background-color:#eee; }

/* Editor styles */
.edit-nav-link { padding:4px 8px !important; margin-left:0.3em; border-radius:14px; font-size:14px; max-width:100px; opacity:0.8; }

/* Menu */
.menu.list { border: solid 1px #ccc; padding: 1.5em; border-radius: 6px; background-color: #fafafa; max-width: 500px; margin: 0 0 2em 0; text-align: left; }
.menu.list h4 { margin-bottom:1.2em; }
.menu.list .img-container { width:160px; float:left; text-align:center; background-color:#eee; }
.menu.list img { max-width:160px; max-height:120px; }
.menu.list .no-image { float:left; width:160px; height:120px; background-color:#eee; }
.menu.list .menu-group { margin-top:2em; }
.menu.list .menu-item { margin-bottom:1em; border:solid 1px #ccc; background-color:#fff; }
.menu.list .menu-item .details { padding:1em; width:100%; float:left; }
.menu.list.simpledescimage .menu-item .details { width:280px; }
.menu.list .menu-item .title { }
.menu.list .menu-item .price { font-weight:bold; float:right; }
.menu.list .menu-item .desc { display:block; color:#aaa; }

.menu.grid { border: solid 1px #ccc; padding: 1.5em; border-radius: 6px; background-color: #fafafa; margin: 0 0 2em 0; text-align: left; width:1004px; }
.menu.grid h4 { margin-bottom:1.2em; }
.menu.grid .img-container { width:300px; text-align:center; background-color:#eee; }
.menu.grid img { max-width:300px; max-height:225px; }
.menu.grid .no-image { width: 300px; height: 225px; background-color: #eee; }
.menu.grid.centered h4,
.menu.grid.centered h5 { text-align:center; }
.menu.grid .menu-group { margin-top:2em; }
.menu.grid .menu-item { width: 302px; border: solid 1px #ccc; float: left; margin: 0 1em 1em 0; background-color:#fff; }
.menu.grid .menu-item .details { padding:1em; height:104px; overflow:hidden; }
.menu.grid.simple .menu-item .details { height:56px; }
.menu.grid .menu-item .title { }
.menu.grid .menu-item .price { font-weight:bold; float:right; }
.menu.grid .menu-item .desc { display: block; color: #aaa; }

.centered { margin:0 auto 2em auto !important; }

@media (max-width: 1200px) {
	.menu.grid { width:884px; }
	.menu.grid .menu-item { width:262px; }
	.menu.grid .img-container { width:260px; }
	.menu.grid .no-image { width:260px; height:195px; }
	.menu.grid img { max-width:260px; max-height:195px; }
}

@media (max-width:992px){
	.menu.grid { width:606px; }
}

@media (max-width:768px){
	.menu.grid { width:312px; }
	.menu.list { min-width:206px; }
}

@media (max-width:576px){
	.menu.list .img-container { width:100%; }
	.menu.list .menu-item .details { width:100% !important; }
	.menu.list .no-image { width: 100%; }
}

/* Product styles */
.product-section { }
.product-section .product { float:left; border:solid 1px #ccc; margin:0 1em 1em 0; width:200px; height:200px; overflow:hidden; background-size:contain; background-color:#eee; }
.product-section .product .product-inner { position:relative; width:100%; height:100%; padding:8px; }
.product-section .product .title { font-weight:bold; display:block; }
.product-section .product .description { display:block; }
.product-section .product .price { position:absolute; bottom:8px; right:8px; font-weight:bold; font-size:1.5em; }

/* Social links */
footer .social-links { display:inline-block; margin-left:1.5rem; }

.social-links img { width:40px; height:40px; margin-right:6px; opacity:0.5; transition:opacity 0.2s ease-in-out; }
.social-links img:hover { opacity:0.75; }

main .social-links { text-align:center; margin: 2em 0; }

/* Photo panel */
.photo-panel { text-align:center; }
.photo-panel img { margin:1em; }

.photo-panel-size-small img { max-width:100px; max-height:100px; }
.photo-panel-size-medium img { max-width: 200px; max-height: 200px; }
.photo-panel-size-large img { max-width: 300px; max-height: 300px; }
.photo-panel-size-verylarge img { max-width: 500px; max-height: 500px; }

.photo-panel-br-0 img { border-radius:0; }
.photo-panel-br-10 img { border-radius: 10%; }
.photo-panel-br-20 img { border-radius: 20%; }
.photo-panel-br-30 img { border-radius: 30%; }
.photo-panel-br-40 img { border-radius: 40%; }
.photo-panel-br-50 img { border-radius: 50%; }

.photo-panel-border-none img { border:none; }
.photo-panel-border-small img { border:solid 1px #eee; }
.photo-panel-border-medium img { border: solid 3px #eee; }
.photo-panel-border-large img { border: solid 6px #eee; }