@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400;0,700;1,400&family=Rubik:wght@500&family=Tangerine:wght@700&family=Ubuntu:wght@400;700&display=swap');
body { font: 100% Cabin, Rubik, sans-serif; color: #fff; background-color:#000; margin: 0; padding: 0; text-align: center; }
h1, h2, h3, h4, h5, h6 { font-weight:bold; text-align:center; font-family: Ubuntu, Cabin, Arial, sans-serif; }
h1 {font-size:250%; color: #ff0; text-shadow: 1px 1px 2px black; }
@media only screen and (max-width:640px) { h1 {font-size:175%; }}
h2 {font-size:165%; color:#ff3; }
@media only screen and (max-width:640px) { h2 {font-size:130%; }}
h3 {font-size:145%; color: #ff3;}
@media only screen and (max-width:640px) { h3 {font-size:120%; }}

p { font: 120% Cabin, Rubik, sans-serif; color: #fff; text-align:left; }
@media only screen and (max-width:640px) { p {font-size:110%; }}


img {max-width: 100%; height: auto; border:none; }
* {box-sizing: border-box;}
form {margin: 12px auto; padding:12px; border-radius:12px; border: 2px #000; background-color:#FFF; width:75%; color:#000; }
@media only screen and (max-width:640px) {form {float:none; width:100%; }}
iframe {max-width:100%;}

a, a:hover, a:visited, a:active {color:#ffff66; }

#container a {color:#ffff66; }
#container a:hover {color:#ff0; text-decoration:underline; }
#container a:visited, a:active a:tel {color:#ffff66; }
#container {width: 100%; background:none; margin: 0 auto; margin-bottom:42px; }
@media only screen and (max-width: 1024px) {#container {	width:100%;} }
@media only screen and (max-width: 640px) {#container {	width:100%;} }

#header { background:none; border-bottom: #ccc; border-bottom-style:ridge; border-bottom-width: 1px; padding: 0; margin:0; color:#CCC; height:auto; }
#header h1 {margin: 0;	padding: 10px 0; }
#header p {text-align:left; }

#nav {background-color:rgba(0, 0, 0, 0.3); color:#fff; font-weight:bold; border:.1px #000; margin:0; padding:0; position:fixed; top:0; left:0; text-align:left; z-index:5; width:100%;  }
#nav:hover {background-color:rgba(0, 0, 0, 0.9); }
@media only screen and (max-width: 580px) {#nav img {max-height:48px; width:auto;} }
#nav a {color:#fff; text-decoration:none; font-weight:bold; }
#nav a:hover {color:#ff6; text-decoration:underline; font-weight:bold; }
#nav a:visited, a:active {color:#ff0; text-decoration:none; font-weight:bold; }

#mainContent { padding:20px; background-color:rgba(0,0,0,0.7); color:#fff; font-weight:bold; max-height:70%; width:auto; }
@media only screen and (max-width: 640px) {#mainContent {max-height:100%;} }

#footer {margin:0 auto; padding: 0 10px; background-color:rgba(0, 0, 0, 0.7); border-top: #000 thin .1px; width:100%; border-bottom: #000 thin .1px; width:100%; height:auto; position:fixed; bottom:0; left:0; }	
@media only screen and (max-width: 640px) {#footer { position:static; } }
#footer p {	margin: 0; 	padding: 4px 0 4px 0; font-size:100%; font-weight:bold; color:#fff; text-align:left; }
#footer p.flt_rt {text-align:right; }
@media only screen and (max-width: 640px) {#footer p {font-size:100%; } }
#footer:hover { background-color:rgba(0, 0, 0, 0.9);  }
#footer a:hover {color:#cff; }	

#flt_rt {padding: 0px; width:50%; margin-left:8px; float:right;}
#flt_rt p {margin: 0; padding: 8px 0; font-weight:bold; text-align:right; }
@media only screen and (max-width:480px) {#flt_rt {float:none; width:100%; margin:0; } }
@media only screen and (min-width:481px) and (max-width:799px) { #flt_rt {width:33%; }}

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

.bg-logo {background-image:url(/images/MandRfarmsHay_bg_1440x960.png); background-size:cover; background-repeat:no-repeat; background-attachment:fixed; }
@media only screen and (max-width: 640px) {.bg-logo {background-image:url(/images/MandRfarmsHay_bg_1440x960.png); background-size:cover; background-repeat:no-repeat; background-attachment:fixed; } }
.bg-blkgr {background-color:#000; background-image: linear-gradient(180deg, black, #333); color:#fff; font-weight:bold; }
.bg-blk-trans {background-color:rgba(0, 0, 0, 0.6); color:#fff; font-weight:bold; padding:20px; }
.bg-yellow {background-color:#ffd700; color:#c00; font-weight:bold; text-align:center; width:100%; border-radius:8px; padding:4px; }
.bg-yellow a {color:#060; }
.bg-green {background-color:#3a8129; color:#ff0; font-weight:bold; text-align:center; width:100%; border-radius:8px; padding:4px; }
.bg-green a {color:#ff0; }
.bg-green a:hover {color:#fff; }
.bold {font-weight:bold; }
.caption {text-align:center; color:#ff6; font-weight:bold; font-size:14px; }
.caption-lft {text-align:left; color:#ff6; font-weight:bold; font-size:14px; }
.caption-rt {text-align:right; color:#ff6; font-weight:bold;  font-size:14px; }
.center {text-align:center; }
.clr {clear:both; }
.logo {font-family: Tangerine, cursive; font-weight:bold; font-size:225%; color:#3a8129; text-shadow: 2px 2px 1px yellow; } 
@media only screen and (max-width:580px) { .logo {font-size:150%; }   }
.logoF {font-family:Rubik, sans-serif; font-size:165%; color:#3a8129; text-shadow: 2px 2px 2px yellow;}
@media only screen and (max-width:580px) { .logoF {font-size:125%; }   }
.logoarms { font-variant:small-caps; }

.flt_rt33 {float:right; text-align:center; width:33%;}
@media only screen and (max-width:799px) { .flt_rt33 {float:none; text-align:center; width:100%; } }

.flt_rt33l {float:right; text-align:left; width:32.9%; padding:0 4px 0 4px;}
@media only screen and (max-width:799px) { .flt_rt33l {float:none; text-align:left; width:100%; } }

.flt_lft33 {float:left; text-align:center; width:32.9%; padding:0 4px 0 4px;}
@media only screen and (min-width:581px) and (max-width:799px) { .flt_lft33 {float:none; width:100%; padding-left:10%; padding-right:10%; border-bottom:2px #CCC inset; text-align:center; } }
@media only screen and (max-width:580px) { .flt_lft33 {float:none; width:100%; padding-left:4px; padding-right:4px; border-bottom:2px #CCC inset; text-align:center; } }
.flt_lft33l {float:left; text-align:left; width:32.9%; padding:0 4px 0 4px;}
@media only screen and (max-width:799px) { .flt_lft33l {float:none; width:100%; } }

.flt_rt {padding: 8px; width:48%; margin-left:8px; text-align:right; float:right;}
.flt_lft {padding: 8px; width:48%; margin:0; float:left;}
@media only screen and (max-width:480px) { .flt_lft {float:none; width:100%; margin:0; }}
@media only screen and (min-width:481px) and (max-width:799px) { .flt_lft {width:65%; }}
.flt_lft25 {float:left; text-align:center; width:25%; padding:0; border:#ffff66 inset 3px;}
@media only screen and (min-width:481px) and (max-width:799px) { .flt_lft25 {float:left; text-align:center; width:50%; padding:0; border:#ffff66 inset 3px;} }
@media only screen and (max-width:480px) { .flt_lft25 {float:none; text-align:center; width:100%; padding:0; border:#ffff66 inset 3px;} }
.flt_lft65 {padding: 8px; width:65%; margin-right:8px; text-align:left; float:left;}

.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; } }
.imgpad-ctr {vertical-align:middle; padding:0 4px 4px 12px; }
.imgmax33 {max-width:33%; }
.small {font-size:90%; }
.yellow {color:#ffd700; }
.green {color:#3a8129; }
.dkblue {color:#036; }
.red {color:#c00; }
.hidem {display:inline; }
@media only screen and (max-width:580px) {.hidem {display:none; }}
.overtop {float:right; z-index:3;   }
.pright {text-align:right; }
.yellow {color:#ff0; }


/* Button used to open the home page contact form - display inline */
.open-button {
  background-color: #3a8129;
  color: yellow;
  padding: 12px;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  width:auto;
  max-width:144px;  
  font-weight:bold;
  font-size:130%;
  text-align:center;
  border-radius:8px;
  vertical-align:baseline;
  margin-right:4px;
}

/* The popup form - hidden by default */
.form-popup {
  display: none;
  position: fixed;
  bottom: 0;
  right: 0;
  border: 2px solid #000;
  z-index: 9;
  border-radius:8px;
}

/* Add styles to the form container */
.form-container {
  width:300px;  
  padding: 10px;
  background-color: black;
}

/* Full-width input fields */
.form-container input[type=text], .form-container input[type=textarea], .form-container input[type=email], .form-container input[type=tel] {
  width:100%;
  padding: 12px;
  margin: 5px 0 5px 0;
  border: none;
  background: #f1f1f1;
  border-radius:8px;
}

/* When the inputs get focus, do something */
.form-container input[type=text]:focus, .form-container input[type=textarea]:focus, .form-container input[type=email]:focus, .form-container input[type=tel]:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for the submit/login button */
.btnfrm {
  background-color:#3a8129;
  color:#ff0;
  font-size:130%;
  font-weight:bold;
  padding: 12px;
  border: none;
  cursor: pointer;
  width:100%;
  margin-bottom:10px;
  margin-top:10px;  
  opacity: 1.0;
  border-radius:8px;
}

/* Add a dk gray background color to the cancel button */
.form-container .cancel {
  background-color: #777;
}

/* Add some hover effects to buttons */
.open-button:hover {
  opacity: 1;
}


/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 2s;
  animation-name: fade;
  animation-duration: 2s;
}

@-webkit-keyframes fade {
  from {opacity: .2}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .2}
  to {opacity: 1}
}

.magnify {}