@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 { display:none; } }
#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 */ }

#top_menu {width:48px; height:48px; margin:0; padding:0; z-index:3; position:fixed; top:8px; left:8px; }
@media only screen and (min-width: 641px) {#top_menu { display:none; } }
#top_menu img {width:31px; height:31px; padding:2px; border:none; vertical-align:middle; }
#top_menu a {color:#fff; font-size:18px; font-weight:bold; padding:8px; line-height:2em; text-decoration:none; }
#top_menu a:hover { text-decoration:underline; }
/* Popup container */

.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* The actual popup (appears on top) */
.popup .popuptext {
  visibility: hidden;
  width: 180px;
  background-color: #ccc;
  color: #000;
  text-align: center;
  font-weight:bold;
  border-radius: 8px;
  border: solid 2px #333;
  padding: 8px;
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  margin-left: 0;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}
.popuptext a:hover {color:#000; }
/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 2s;
  animation: fadeIn 2s
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}
@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
} 
/* dup June 2018 from: W3.CSS 4.10 February 2018 by Jan Egil and Borge Refsnes and edited - for animation*/
.w3-animate-zoom {animation:animatezoom 1s}@keyframes animatezoom{from{transform:scale(1)} to{transform:scale(.5)}}

#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%; }