@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Averia+Serif+Libre:wght@400;700&family=Lato:ital,wght@0,400;0,700;1,700&family=Paprika&family=Philosopher:ital,wght@0,400;1,700&display=swap'); 
body { font: 100% color: #333; background-color:#eee; margin: 0; padding: 0; text-align: center; }
html {margin:0; font-family: Lato, Geneva, Arial, Helvetica, SunSans-Regular, sans-serif;   }
h1, h2, h3, h4, h5, h6 { Philosopher, "Averia Serif Libre", Geneva, sans-serif; font-weight: bold; text-align: center; padding-top: 4px; color: #333; }
h1 {font-size:200%; }
h2 {font-size:165%; color:#003; }
h3 {font-size:150%; color: #309;}

img {max-width: 100%; height: auto; border:none; }
* {box-sizing: border-box;}
#container a, a:hover, a:visited, a:active {color:#009; }
#container {width: 88%; background:none; margin: 0 auto; border: none; text-align: left; }
@media only screen and (min-width:641px) and (max-width: 1024px) {container {width:88%;} }
@media only screen and (max-width: 640px) {container {width:98%;} }


#header { background-color:#fff; border-bottom: #999; border-bottom-style:ridge; border-width: .1px; padding: 0 10px 0 10px; color:#555; height:140px;  }
#header h1 { margin: 0; padding: 10px 0; } /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
#mySidenav a {
    position: absolute; /* Position them relative to the browser window */
    left: -100px; /* Position them outside of the screen */
    transition: 0.5s; /* Add transition on hover */
    padding: 4px; /* 15px padding */
    width: 180px; /* Set a specific width */
	height: 40px;
	vertical-align: bottom;
	text-align:right;
    text-decoration: none; /* Remove underline */
    font-size: 18px; /* Increase font size */
	font-weight:bold;
    color: white; /* White text color */
	opacity: 0.7; filter: alpha(opacity=70);
    border-radius: 0 15px 15px 0; /* Rounded corners on the top right and bottom right side */
	overflow:hidden;
}
@media only screen and (max-width: 640px) {mySidenav a { left:-140px;} }
#mySidenav img {border-radius: 8px; width:31px; height:31px; object-fit:cover; padding:2px; border:none; vertical-align:middle; }
#mySidenav a:hover { left: 0; 	opacity: 1; filter: alpha(opacity=100);  /* On mouse-over, make the elements appear as they should */}
#about { top: 20px; background-color: #4CAF50;/* green */} /* The about link: 20px from the top with a green background */
#contact { top: 70px; background-color: #309; /* MP purple */}
#shop { top: 120px; background-color: #ff3300; /* orange */ }
#social { top: 170px; background-color: #555; /* Light Black */ }
#social1 { top: 220px; background-color: #0CC; /* teal */ }
#social2 { top: 270px; background-color: #900; /* red */ }
#social3 { top: 320px; background-color: #006; /* navy */ }

#mainContent {padding: 0 20px;}

#footer {padding: 0 10px; border-top: #999; border-top-style:ridge; border-top-width: 2px; height:auto; }
#footer p {margin: 0; padding: 10px 0; font-size:90%; font-weight:bold; color:#333; } 
#footer a:hover {color:#309; }		

/*	background-image:url(/images/Hay_grd_bg_1920.png); background-size:cover;
@media only screen and (max-width: 1024px) {footer {	background-image:url(/images/Hay_grd_bg_1024.png); background-size:cover; } }
@media only screen and (max-width: 800px) {footer {	background-image:url(/images/Hay_grd_bg_800.png); background-size:cover; } }
@media only screen and (max-width: 640px) {footer {	background-image:url(/images/Hay_grd_bg_640.png); background-size:cover; } } */
@media only screen and (max-width: 640px) {footer p {font-size:100%; } }
	
#image_bar {padding: 8px; background-color:#000;}
#image_bar_ctr { padding: 8px; background-color:#000; width:50%; text-align:center; font-weight:bold; color:#FFF; margin:0 auto; }
#image_bar p { margin: 0; padding: 14px 0; font-size:14pt; font-weight:bold; color:#1e1e1e; }
.yellow {color:#FF0; font-size:14px; text-align:center; }

#nav_rt {padding: 8px 0px 0px 0px; background:none; width:180px; margin-left:10px; border-right: #F00; border-right-style:ridge; border-right-width: 2px; float:right; z-index:1;}
#nav_rt p {margin: 0; padding: 10px 0; font-size:12px; font-weight:bold;}
#flt_rt {padding: 0px; max-width:320px; margin-left:8px; float:right;}
#flt_rt p { margin: 0; padding: 8px 0; font-weight:bold; text-align:right; }

#bg_prod { padding: 0px; margin-left:8px; text-align:left; width:680px; height:455px; z-index:0; }

.bg-blk-gr {background-color:#000; background-image: linear-gradient(180deg, black, #333); color:#fff; font-weight:bold; }
.bg-white-gr {background-color:#eee; background-image: linear-gradient(180deg, #eee, #deccff); color:#fff; font-weight:bold; }
.bold {font-weight:bold; }
.caption {text-align:center; color:#900; font-weight:bold;  }
.caption-lft-red {text-align:left; color:#900; font-weight:bold; }
.caption-rt-red {text-align:right; color:#900; font-weight:bold; }
.center {text-align:center; }
.clr {clear:both; }
.float_rt {float:right; text-align:right;}
.fltimgl {float:left; padding:0 8px 0 8px; }
.fltimgr {float:right; padding:0 8px 0 8px; }
.gm {width:68%; margin:0 auto; }
@media only screen and (max-width:580px) { .gm {width:95%; margin:0 auto; } }
.hidem {display:inline; }
@media only screen and (max-width:580px) {.hidem {display:none; }}
.imgpad-ctr {vertical-align:middle; padding:0 4px 4px 12px; }
.overtop {float:right; z-index:3;   }
.pright {text-align:right; }
.red {color:#900; }
.smaller {font-size:smaller; }
.small10 {font-size:10pt; }
.large {font-size:150%; }