@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400;0,700;1,400;1,700&display=swap'); 
@import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400;0,700;1,400;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@700&display=swap');
/* CSS Document */

body { font: 100% Roboto, Arial, 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: Cabin, Arial, sans-serif; color: #fff; }
h1 {font-size:175%; }
@media only screen and (max-width:640px) { h1 {font-size:150%; }}
h2 {font-size:150%; color:#ffd700; }
@media only screen and (max-width:640px) { h2 {font-size:130%; }}
h3 {font-size:125%; color: #ffd700;}
@media only screen and (max-width:640px) { h3 {font-size:120%; }}

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:799px) {form {float:none; width:100%; }}
iframe {max-width:100%;}

a, a:hover, a:visited, a:active {color:#69c; }

#container a, a:hover, a:visited, a:active {color:#69c; }
#container {width: 100%; background:none; margin: 0 auto; text-align: left; }

#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; }
#header1 { background-color:#63abfe; border-bottom: #ccc; border-bottom-style:ridge; border-bottom-width: 1px; padding: 0; margin:0; color:#CCC; height:auto; }
#header1 h1 {margin: 0;	padding: 10px 0; }
#header1 p {text-align:left; }

#nav-dkblue {background-color:#036; color:#fff; font-weight:bold; }
#nav-dkblue a {color:#fff; text-decoration:none; }
#nav-dkblue a:hover {color:#ffd700; text-decoration:underline; }
#nav-dkblue a:visited, a:active {color:#fff; text-decoration:none; }

#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%;} }
#mainContent p {margin:8px; } 
#mainContent2 { padding:20px; color:#fff; font-weight:bold; max-height:70%; width:auto; }
@media only screen and (max-width: 799px) {mainContent2 {height:auto; width:100%; padding:0px;} }

#footer {padding: 0 10px; background-image:url(/images/Hay_grd_bg_1920.png); background-size:cover; border-top: #ccc; border-top-style:ridge; border-top-width: 1px; height:auto; }	
@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%; } }
#footer p {	margin: 0; 	padding: 10px 0; font-size:80%; font-weight:bold; color:#fff; text-align:left; }
#container a {color:#69c; }
#footer a:hover {color:#cff; }	
#container a:visited, a:active {color:#69c; }

	
#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: 10px 0; font-size:100%; font-weight:bold; color:#CCC; }
#nav_rt {padding: 8px 0px 0px 0px; background:none; width:180px; margin-left:10px; border-right: #F00; border-right-style:ridge; border-right-width: 3px; float:right; z-index:1;}
#nav_rt p {margin: 0; padding: 10px 0; font-size:12px; font-weight:bold; }
#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; }
#bg_prod {padding: 0px; margin-left:8px; text-align:left; width:680px; height:455px; z-index:0; }

.bg-cows-grand-mesa {background-image:url(/images/bg_CB-cows-hay-grand-mesa.png); background-size:cover; background-repeat:no-repeat; background-attachment:fixed; }
@media only screen and (max-width: 640px) {.bg-cows-grand-mesa {background-image:url(/images/CB-cows-hay-grand-mesa-v.png); background-size:cover; background-repeat:no-repeat; background-attachment:fixed; } }
.bg-cows-grass-fed {background-image:url(/images/CB-cows-grass-fed.png); background-size:cover; background-repeat:no-repeat; background-attachment:fixed; }
@media only screen and (max-width: 640px) {.bg-cows-grass-fed {background-image:url(/images/CB-cows-grass-fed-v.png); background-size:cover; background-repeat:no-repeat; background-attachment:fixed; } }
.bg-dkblue {background-color:#036; color:#fff; font-weight:bold; }
.bg-dkblueovr {background-color:rgba(0,51,102,0.7); color:#fff; font-weight:bold; padding:24px; }
.bg-ltblue {background-color:#63abfe; }
.bg-yellow {background-color:#ffd700; color:#009; font-weight:bold; text-align:center; width:100%; }
.bg-yellowbut {background-color:#ffd700; color:#006; font-weight:bold; text-align:center; font-size:150%; padding:8px; border-radius:4px; }
@media only screen and (max-width:799px) { .bg-yellowbut {background-color:#ffd700; color:#006; font-weight:bold; text-align:center; font-size:120%; padding:4px; border-radius:4px; max-width:100%; } }
@media only screen and (max-width:799px) { .bg-yellowbut {background-color:#ffd700; color:#006; font-weight:bold; text-align:center; font-size:100%; padding:2px; border-radius:4px; max-width:100%; } }

.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; }
.logo {font-family: 'EB Garamond', serif; font-weight:bold; font-size:150%; } 
@media only screen and (max-width:580px) { .logo {font-family: 'EB Garamond', serif; font-weight:bold; font-size:125%; }   }
.logo2 {font-family: 'EB Garamond', serif; font-weight:bold; font-size:125%; } 
@media only screen and (max-width:580px) { .logo2 {font-family: 'EB Garamond', serif; font-weight:bold; font-size:110%; }   }
.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:33%; padding:0 4px 0 4px;}
@media only screen and (max-width:799px) { .flt_rt33l {float:none; text-align:left; width:100%; } }

.flt_rt {padding: 8px; width:50%; margin-left:8px; text-align:left; float:right;}
.flt_lft {padding: 8px; width:50%; margin-right:8px; text-align:left; float:left;}
.flt_lft50 {padding: 4px; width:48%; margin-right:8px; text-align:left; float:left;}
@media only screen and (max-width:699px) { .flt_lft50 {float:none; width:100%; margin:0 auto; } }


.flt_lft25 {float:left; text-align:center; width:25%; padding:0; border:#69c 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:#69c inset 3px;} }
@media only screen and (max-width:480px) { .flt_lft25 {float:none; text-align:center; width:100%; padding:0; border:#69c inset 3px;} }
.flt_lft25NB {float:left; text-align:center; width:25%; padding:0;}
@media only screen and (min-width:481px) and (max-width:799px) { .flt_lft25NB {float:left; text-align:center; width:50%; padding:0;} }
@media only screen and (max-width:480px) { .flt_lft25NB {float:none; text-align:center; width:100%; padding:0;} }
.flt_lft65 {padding: 8px; width:65%; margin-right:8px; text-align:left; float:left;}

.flt_lft33 {padding: 8px; width:33%; 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:100%; margin:0 auto; padding:0; } }
.gm2 {width:68%; margin:0 auto; }
.imgpad-ctr {vertical-align:middle; padding:0 4px 4px 12px; }
.imgmax33 {max-width:33%; }
.lft {text-align:left; }
.small {font-size:90%; }
.yellow {color:#ffd700; }
.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;   }


/* from w3schools.org June 2018 for slideshow  - edited by WebStir*/

.w3-content {max-width:88%;margin:auto;}
@media only screen and (min-width:450px) and (max-width:580px) {.w3-content {max-width:90%; }}
@media only screen and (max-width:449px) {.w3-content {width:100%; }}

.w3-display-container{position:relative;}

.w3-center{text-align:center!important; display:inline-block;width:auto;}
.w3-container {padding:0.01em 16px; margin:0 auto;} 
.w3-section {margin-top:16px!important;margin-bottom:16px!important;}
.w3-large{font-size:18px!important;} 
.w3-text-white,.w3-hover-text-white:hover{color:#fff!important;}
.w3-display-bottommiddle{position:absolute;left:50%;bottom:-42px;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%);}
@media only screen and (min-width:361px) and (max-width:450px) { .w3-display-bottommiddle{position:absolute;left:50%;bottom:-88px;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%);}  }
@media only screen and (max-width:360px) { .w3-display-bottommiddle{position:absolute;left:50%;bottom:-120px;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%); }  }

.w3-left{float:left!important;} 
.w3-hover-text-blue {color:#69c!important;}
.w3-right{float:right!important;} 
@media only screen and (max-width:580px) {.w3-right {margin-right:36px; }}


.w3-badge {background-color:#000;color:#fff;display:inline-block;padding-left:8px;padding-right:8px;text-align:center;border-radius:50%;}
.w3-badge:active{color:#fff!important;background-color:#2196F3!important;}
.badge-dkblue {background-color:#036!important; }


 
.w3-border{border:1px solid #ccc!important;} 
.w3-white {color:#000!important;background-color:#fff!important;}
.w3-hover-blue:hover{color:#fff!important;background-color:#2196F3!important;}


.w3-container:after, .w3-container:before {content:"";display:table;clear:both;}

.mySlides {display:none;}
.w3-left, .w3-right, .w3-badge {cursor:pointer;}
.w3-badge {height:18px;width:18px;padding:0;}

/* 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}
}

.capt { color: #ffd700; font-size: 16px; font-weight:bold; padding: 2px; position: absolute; top: 80%; left: 0; width: 100%;
  text-align: center; background-color:rgba(0,51,102,0.8); border-radius:12px; border-top:thin #C00; border-bottom:thin #C00; }
@media only screen and (min-width:601px) and (max-width:800px) {.capt { top:75%; font-size:1em; padding: 0px; }}
@media only screen and (min-width:421px) and (max-width:600px) {.capt {width:100%; top:75%; font-size:.8em;  padding: 0px; }}
@media only screen and (max-width:420px) {.capt {width:100%; top:88%; font-size:.8em;  padding: 0px; }}

.magnify {}


img.hover-shadow {  transition: 0.3s;}
.hover-shadow:hover {  box-shadow: 1px 1px 0 rgba(255, 255, 255, 1.0), 8px 8px 10px 0 rgba(0, 0, 0, 0.8);}
.zoom {  transition: transform .2s; /* Animation */}
.zoom:hover {   transform: scale(1.5); /* (125% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}