body { font-family: Montserrat, sans-serif; font-size: 0.9em; }
main { width: 95%; max-width: 1280px; margin: 3rem auto;}
.textcenter { text-align: center; }

h2 { font-size: 2em; margin-bottom: 1em; font-weight: normal; }
h3 { font-size: 1.5em; margin-bottom: 1em; }
h3:before { content: '\f0a9'; font: var(--fa-font-solid); margin-right: 1rem; }
.blue_banner h3:before { display: none; }
h4 { font-size: 1.25em; margin-bottom: 1em; }
h3+h2 { margin-top: 1rem; }

p { margin-bottom: 1rem; line-height: 1.4em; }

header p { text-align: center; margin: 1rem 0; }
header ul { list-style: none outside; text-align: center; border-bottom: 1px #ddd solid; }
header ul li { display: inline-block; width: 150px; background: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(221, 221, 221, 1) 100%); text-align: center; position: relative; transition: 0.5s all; }
header ul li:before { content: ''; background: linear-gradient(0deg,rgba(255, 255, 255, 1) 0%, rgba(221, 221, 221, 1) 100%); opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 4; transition: 0.5s all; }
header ul li:hover:before { opacity: 1; }
header ul li:after {
    position: absolute; z-index: 5; bottom: -7px; left: 50%; transform: translateX(-50%); display: block; height: 16px; width: 16px;
    content: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2016%2016%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20fill%3D%22%23d4252a%22%3E%3Cg%20id%3D%22SVGRepo_bgCarrier%22%20stroke-width%3D%220%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_tracerCarrier%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_iconCarrier%22%3E%20%3Crect%20width%3D%2216%22%20height%3D%2216%22%20id%3D%22icon-bound%22%20fill%3D%22none%22%3E%3C%2Frect%3E%20%3Cpolygon%20points%3D%228%2C5%2013%2C10%203%2C10%22%3E%3C%2Fpolygon%3E%20%3C%2Fg%3E%3C%2Fsvg%3E");
}
header ul li a { color: black; font-size: 0.9em; font-weight: bold; text-decoration: none; display: block; padding: 1rem 0; position: relative; z-index: 10; }

.canada { background: #ff0000; color: #ff0000; position: absolute; top: 1rem; right: 1rem; padding: 0 1.25rem; font-size: 2rem; }
.canada i { background: white; padding: 0.25rem 0.5rem;}

footer { background: black; font-size: 0.75rem; }
footer ul { list-style: none outside; background: #002b55; color: white; text-align: center; padding: 0.75rem 0; }
footer ul li { display: inline-block; border-right: 1px #ddd solid; padding: 0 1rem; }
footer ul li:last-child { border-right: none; }
footer a { color: white; text-decoration: none; }
footer p { background: linear-gradient(180deg,rgba(0, 77, 151, 1) 0%, rgba(1, 61, 123, 1) 100%); color: white; text-align: center; padding: 1rem 0; line-height: 1.8em; margin-bottom: 0; }
footer p span { padding: 0.5rem 1rem; background: white; display: inline-block; margin-top: 1rem; border-radius: 1rem; }

main { min-height: 47vh;}
main ul { list-style: disc outside; padding-left: 2rem; }
main ul li { margin-bottom: 0.5rem; line-height: 1.4em; }
main ul li a { font-size: 0.9em; color: black; text-decoration: none; transition: 0.5s all; }
main ul li a:hover { color: blue; text-decoration: underline;}

.large_margin_top { margin-top: 2rem; }

.blue_banner { height: 150px; background: #0d2a54; padding: 0 0 0 3rem; margin: 0; position: relative; }
.blue_banner img { height: 100%; width: auto; float: right; }
.blue_banner h3 { font-size: 2.5em; color: white; font-weight: normal; text-shadow: rgba(0,0,0,0.7) 3px 3px 5px; position: absolute; top: 1rem; left: 3rem; }
.blue_banner h3:before { font-size: 2rem; }
.blue_banner a { position: absolute; z-index: 20; width: 100%; height: 100%; top: 0; left: 0; display: block; }

.column_container { display: flex; gap: 2rem; align-items: flex-start; margin-bottom: 2rem; }
.can_wrap { flex-wrap: wrap; }
.content_container { flex-basis: 75%; box-sizing: border-box; }
.menu_container { flex-basis: 25%; box-sizing: border-box; }
.menu_container p { font-size: 0.8rem; margin-bottom: 0.75rem; }
.half { flex-basis: 45%; box-sizing: border-box; flex-grow: 0; }

.product_categories { display: flex; gap: 2.5rem; align-items: flex-start; flex-wrap: wrap; list-style: none outside; }
.product_categories li { flex-basis: 20%; box-sizing: border-box; text-align: center; }
.product_categories li img { width: 80%; height: auto; }

.product_categories_4wide li img { width: 100%; }

.product_category_products { display: flex; gap: 2.5rem; align-items: flex-start; flex-wrap: wrap; list-style: none outside; }
.product_category_products li { flex-basis: 45%; box-sizing: border-box; text-align: center; }
.product_category_products li img { width: 100%; height: auto; }
.product_category_products_small li { flex-basis: 20%; }

#featured_image { display: none; position: fixed; z-index: 51; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 5px black solid; background: white; text-align: center; box-shadow: rgba(0,0,0,0.6) 10px 10px 9px; }
#featured_image img { max-width: 100%; max-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#feature_overlay { display: none; position: fixed; z-index: 50; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.8); }

#close_feature { position: absolute; top: 1rem; right: 1rem; cursor: pointer; color: black; z-index: 8; }

.blue_area { background: #e1eefb; padding: 1rem; margin-bottom: 2rem; }

.disclaimer { margin-top: 3rem; text-align: center; font-size: 0.8em; }

@media screen and (max-width: 1000px) {
    .product_category_products li { flex-basis: 100%; }
    .content_container { flex-basis: 65%; }
    .menu_container { flex-basis: 35%; }
}

@media screen and (max-width: 650px) {
    main { width: calc( 100% - 2rem ) !important; padding: 0 1rem; }
    header p img { max-width: 95%; margin: 0 auto; display: inline-block; }
    header ul li { width: 47%; }
    .column_container { flex-wrap: wrap; gap: 0; margin-bottom: 0; }
    .content_container { flex-basis: 100%; }
    .menu_container { flex-basis: 100%; margin-top: 2rem; }
    .product_categories { gap: 0; }
    .product_categories li { flex-basis: 44%; }
    .half { flex-basis: 100%; }
    .menu_container h3 { text-align: center; }
    h3:before { display: none; }
    main ul { list-style: none outside; text-align: center; padding-left: 0; }
    main ul li { display: inline-block; margin: 0.5rem; }
    .blue_area h4, .half h4 { text-align: center; }
    .half ul { list-style: disc outside; }
    .half ul li { display: block; margin: 0 0 0.5rem; }
    .canada { width: fit-content; position: relative; top: 0; right: 0; float: right; font-size: 1.25em; padding: 0 0.75rem; margin-right: 1rem; }
    .canada:after { content: ''; display: table; clear: both; }
    .canada i { padding: 0.25rem 0.25rem; }
    .half h4 { margin-top: 2rem; }
}