﻿

@media only screen and (min-width: 320px) and (max-width: 1024px)
{
	.adminBar ul>a:nth-of-type(3)
	{
		display: none;
	}
	.adminBar ul>li.entry:nth-of-type(1),
	.adminBar ul>li.entry:nth-of-type(2)
	{
		display: none;
	}
	div.topbannerwrap
	{
		display: none;
	}

	div.headerwrap
	{
		background-color: #fff;
	}
	.no-mobile
	{
		display: none;
	}
	.divContent.resizeImg.slideshow
	{
		display: none;
	}
	div.headerwlogo.mobile
	{
		display: block;
	}
	div.headerwlogo.mobile .hamburger
	{
		margin: 0px;
		width: inherit;
	}
	.headerwlogo .hamburger .menuDropdown ul.loginwindow
	{
		width: 400px;
		right: 0px;
		left: unset;
	}
	.menu .menuDropdown ul,
	.headerwlogo .hamburger .menuDropdown ul
	{
		list-style: none;
		position: absolute;
		border: 1px #004F75 solid;
		background: #dfdfdf;
		z-index: 10;
		border-radius: 4px;
		display: none;
		margin-left: 0px;
		padding-left: 0px;
		width: unset;
		left: 0px;
		top: 10px;
	}
	.menu .menuDropdown ul li,
	.headerwlogo .hamburger .menuDropdown ul li
	{
	}
	div.headerwlogo.mobile .hbar
	{
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 20px;
		padding: 0px 5px;
		justify-content: space-between;
	}
	div.headerwlogo.mobile .hbar.row1
	{
		border-bottom: 2px #000 solid;
	}
	div.headerwlogo.mobile .hbar.row2,
	div.headerwlogo.mobile .hbar.row3
	{
		line-height: 3em;
	}
	div.headerwlogo.mobile .hbar.row3 .menu
	{
		display: inline-block;
	}
	div.headerwlogo.mobile .hbar.row3 .menu>.entry
	{
		margin: 0px;
	}
	div.headerwlogo.mobile .hbar.row3 .menu>.entry:before
	{
		font-family: "Material Symbols Outlined";
		content: '\e5c5';
		font-size: 40px;
        vertical-align: middle;
		color: #fe4f00;
		margin: 0px -4px;
	}
	div.headerwlogo.mobile .hbar.row3 .menu>.entry>a>img
	{
		display: none;
	}
	div.headerwlogo.mobile .hbar>div
	{
		white-space: nowrap;
		font-size: 16px;
	}
	div.headerwlogo.mobile .hbar .home a:before
    {
		font-family: "Material Symbols Outlined";
		content: '\e88a';
		font-size: 40px;
        vertical-align: -12%;
    }
	div.headerwlogo.mobile .hbar .cart a:after
    {
		font-family: "Material Symbols Outlined";
		content: '\e8cc';
		font-size: 40px;
        vertical-align: middle;
    }
	div.headerwlogo.mobile .hbar.row1 div:nth-of-type(1),
	div.headerwlogo.mobile .hbar.row1 div:nth-of-type(3)
	{
		margin-bottom: 8px;
	}
	div.headerwlogo.mobile .hbar.row1 div a
	{
		text-decoration: none;
	}
	div.headerwlogo.mobile .hbar.row1 div:nth-of-type(2) img
	{
		width: 100%;
	}
	div.headerwlogo.mobile .hbar .dropdown:Before
    {
		font-family: "Material Symbols Outlined";
		content: '\e5c5';
		font-size: 40px;
        vertical-align: middle;
		color: #fe4f00;
		margin: 0px -4px;
    }
	.searchbar.mobile
	{
		display: block;
	}
	.searchbar
	{
		margin-top: 10px;
	}
	.searchbar #searchForm input
	{
		position: relative;
		background-color: #fff;
		font-size: 18px;
		font-weight: bold;
		border: 4px #000 solid;
		border-radius: 30px;
		padding: 10px 15px;
		height: inherit;
	}
	.searchbar #searchForm input[type=submit]
	{
		background-color: #fe4f00;
		color: #000;
		border: none;
		border-radius: 30px;
		padding: 14px 15px;
		z-index: 1;
		margin-right: -15px;
	}
	.searchbar #searchForm input[type=text]
	{
		margin-left: -15px;
		padding-left: 25px;
	}
	
	.homeshopcats .entry
	{
		height: auto;
		flex: 1 0 25%;
		display: flex;
		padding: 5px;
	}
	.homeshopcats .entry a
	{
		display: flex;
		flex-direction: column;
		height: 100%;
		width: 100%;
	}
	.homeshopcats .entry a img
	{
		width: 100%;
		margin: auto;
		position: relative;
		top: 0;
		transform: none;
	}
	.homeshopcats .entry a .title
	{
		align-self: flex-end;
		position: relative;
		margin: 0px;
		
		/* These are technically the same, but use both */
		overflow-wrap: break-word;
		word-wrap: break-word;

		-ms-word-break: break-all;
		/* This is the dangerous one in WebKit, as it breaks things wherever */
		word-break: break-all;
		/* Instead use this non-standard one: */
		word-break: break-word;

		/* Adds a hyphen where the word breaks, if supported (No Blink) */
		-ms-hyphens: auto;
		-moz-hyphens: auto;
		-webkit-hyphens: auto;
		hyphens: auto;
	}
	.loginwindow
	{
		position: absolute;
        border: 1px #004F75 solid;
        background: #dfdfdf;
        z-index: 10;
        border-radius: 4px;
        /*display: none;*/
        margin-left: 0px;
        padding-left: 0px;
        width: unset;
        top: 35px;
		right: 0px;
		padding: 5px;
		line-height: 1em;
	}
	ul.loginwindow
	{
		line-height: 3em;
	}
	ul.loginwindow li
	{
		font-size: 14px;
	}
	.loginwindow .title
	{
		font-weight: bold;
		text-decoration: underline;
		font-size: 20px;
	}
	.loginwindow>*>div
	{
		margin: 20px 0px;
		display: flex;
		gap: 5px;
		justify-content: space-between;
	}
	.loginwindow>*>div>div
	{
		/*flex: 1 0 auto;*/
	}
	.loginwindow>*>div>div input
	{
	}
	.loginwindow>form>div:first-of-type
	{
		margin-top: 10px;
	}
	.loginwindow>form>div:last-of-type
	{
		margin-bottom: 10px;
	}
	.loginwindow>form>div input
	{
		height: 100%;
	}
	.loginwindow>form>div input[type=submit]
	{
		background-color: #000;
		color: #fff;
		border: none;
		border-radius: 30px;
		padding: 10px 25px;
		z-index: 1;
		font-size: 18px;
		font-weight: bold;
	}
	.loginwindow>form .sublink
	{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.loginwindow>form .sublink a
	{
		font-size: 14px;
	}
	.loginwindow>form a:link
	{
		color: #00489a;
	}
	
	.mainbodywrap
	{
		padding: 5px;
	}
	.membersEdit
	{
		width: 100%;
	}
	.membersEdit input[type=text],
	.membersEdit input[type=password],
	.membersEdit textarea
	{
		width: inherit;
	}
	.modMembers .commonTitle
	{
		width: 100%;
		margin-bottom: 10px;
	}
	.shopListHeader
	{
		display: block;
	}
	.shopListHeader .title
	{
		white-space: normal;
	}
	table.contactus td:last-of-type
	{
		display: none;
	}
	table.contactus input[type=text]
	{
		width: 100%;
		max-width: fit-content;
	}
	form#contactForm input[type=text]
	{
		width: 100%;
		max-width: fit-content;
	}
	.shopListHeader>div
	{
		display: block;
	}
	.shopListHeader>div
	{
		min-width: auto;
	}
	.shopList .shopListTile
	{
		flex-wrap: wrap;
		margin: auto;
		padding: 20px 20px 24px 24px;
	}
	.shopItem .title
	{
		font-size: 15px;
	}
	.shopList .shopListTile .shopItem
	{
		width: 50%;
		padding: 0px;
		flex: 1 0 25%;
		border: 4px #d6d6d6 solid;
		padding: 5px;
		margin-left: -4px;
		margin-bottom: -4px;
		display: flex;
        flex-direction: column;
	}
	.shopItem .image
	{
		width: auto;
		height: auto;
		max-width: none;
	}
	.shopItem .image img
	{
		width: 100%;
		max-height: none;
		max-width: none;
		zoom: normal;
		transform-origin: 50% 0;
		-webkit-transform: unset;
		-moz-transform: unset;
		-moz-transform-origin: unset;
		-o-transform: unset;
		-o-transform-origin: unset;
	}
	.shopItem .popoverhoverelem
	{
		display: none;
	}
	.shopListFooter .showall
	{
		width: auto;
	}
	
	.menu4
	{
		flex-direction: column;
		line-height: 2em;
	}
	.shopItem.main#read
	{
		flex-direction: column;
	}
	.shopItem.main>div
	{
		max-width: none;
	}
	.shopListScroll
	{
		display: flex;
	}
	.shopListScroll .shopItem
	{
		display: flex;
		flex-direction: column;
		flex: 1 0 33%;
	}
	
	.modSections .container
	{
		display: block;
		margin: 5px;
		padding: 0px;
	}
	.modSections .container img,
	.newsread .brief img
	{
		max-width: 640px;
		width: auto;
		height: auto;
		width: -webkit-fill-available;
	}
	.bioourteam .images
	{
		flex-direction: column;
	}
	.meetourteam .list
	{
		justify-content: center;
	}
	.overlay .border
	{
		width: auto;
		left: unset;
		transform: none;
		margin: 10px;
	}
	.overlay .border .content .close
	{
		font-size: 30px;
		right: 0px;
		top: -35px;
		color: #fff;
	}
	.orderHistory th, .orderHistory td {
		padding: 0px 5px;
	}
	.vendorcat
	{
		flex-direction: column;
	}
	.welcomemsg
	{
		border-left: 4px #000 solid;
		border-right: 4px #000 solid;
		margin: 0px 30px;
		margin-bottom: 20px;
		position: relative;
		padding: 10px;
		font-size: 18px;
	}
	.welcomemsg .borderY
	{
		border-top: 4px #000 solid;
		border-bottom: 4px #000 solid;
		position: absolute;
        /*width: 90%;*/
        height: 100%;
        top: 0px;
        left: 0;
        /*margin-left: 5%;*/
        margin-left: 10px;
		width: -moz-calc(100% - 20px); /* Firefox */
		width: -webkit-calc(100% - 20px); /* Chrome, Safari */
		width: calc(100% - 20px); /* IE9+ and future browsers */
		
		height: -moz-calc(100% - 8px); /* Firefox */
		height: -webkit-calc(100% - 8px); /* Chrome, Safari */
		height: calc(100% - 8px); /* IE9+ and future browsers */
	}
	
	
	/* https://fonts.google.com/icons?selected=Material+Symbols+Outlined:shopping_bag:FILL@0;wght@400;GRAD@0;opsz@24&icon.query=cart&icon.size=24&icon.color=%235f6368 */
	.material-symbols-outlined
	{
		font-variation-settings:
		'FILL' 0,
		'wght' 400,
		'GRAD' 0,
		'opsz' 40;
		font-size: 40px !important;
		position: relative;
		bottom: -8px;
	}
}
@media only screen and (max-width: 420px)
{
	div.headerwlogo.mobile .hbar>div
	{
        font-size: 14px;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px)
{
	
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px)
{
	
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px)
{
	
}













/*
@media (max-width: 1150px)
{
	.headerwlogo .cartMenu .mobile
	{
		display: none;
	}
	.headerwlogo .cartMenu .desktop
	{
		display: table;
	}
	.logo img
	{
		height: 120px;
	}
}
@media only screen and (orientation: portrait) and (max-device-width: 720px),
	(max-width: 720px)
{
	body {
		font-size: 26px;
	}
	.shopItem .title, .shopItem .price, .shopListHeader .title
	{
		font-size: 26px;
	}
	.logo img
	{
		padding-right: 20px;
	}
	.searchA
	{
	}
	.searchA img
	{
		height: 65px;
	}
	.searchB
	{
	}
	.searchB input
	{
		font-size: 28px;
		height: 65px;
	}
	.searchC input[type=image]
	{
		height: 65px;
	}
	.headerwlogo .cartMenu .mobile
	{
		display: table;
	}
	.headerwlogo .cartMenu .mobile img
	{
		height: 58px;
	}
	.headerwlogo .cartMenu .desktop
	{
		display: none;
	}
	.headerbar2>div:nth-child(1),
	.headerbar2>div:nth-child(3)
	{
		display: none;
	}
	.headerwlogo .hamburger .menuDropdown
	{
		transform: scale(2);
	}
	.headerwlogo .hamburger .menuDropdown>ul ul
	{
		left: 60px;
	}
	.menu .menuDropdown a,
	.headerwlogo .hamburger .menuDropdown a
	{
		font-size: 20px;
		line-height: 1.5em;
	}
	
	table.contactus td
	{
		display: table-row;
	}
	table.contactus input
	{
		font-size: 22px;
		height: 50px;
	}
	table.contactus textarea
	{
		width: 100%;
	}
	.menu4 .footer-social
	{
		width: 210px;
	}
	.menu4 .footer-social img
	{
		width: 60px;
	}
	.menu4 .spacer
	{
		display: none;
		width: 0px;
	}
	.menu4>div
	{
		flex: 1 1 42%;
		text-align: left;
	}
	.menu4
	{
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.shopItem input
	{
		font-size: 22px;
	}
	.menu .menuDropdown
	{
		top: 45px;
	}
	input {
		font-size: 22px;
	}
	.topbanner .callus
	{
		width: 100%;
		font-size: 35px;
	}
	.topbanner .social
	{
		display: none;
	}
}
@media only screen and (max-device-width: 320px)
{
	body
	{
		font-size: 28px;
	}
	.shopItem .title, .shopItem .price, .shopListHeader .title
	{
		font-size: 28px;
	}
	.searchB input
	{
		font-size: 28px;
	}
	table.contactus input
	{
		font-size: 28px;
	}
	.shopItem input
	{
		font-size: 28px;
	}
}
@media only screen and (orientation: landscape) and (max-device-width: 667px)
{
	.headerwlogo .cartMenu .mobile
	{
		display: none;
	}
	.headerwlogo .cartMenu .desktop
	{
		display: table;
	}
}*/