@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400;0,700;1,500&family=Rosario:ital,wght@0,400;0,700;1,500;1,700&family=Lato:ital,wght@0,400;0,700;1,700&family=Signika:wght@400;700&display=swap');
html { font: 110% Cabin, Lato, Arial, sans-serif; color: #fff; background-color:#000; margin: 0; padding: 0; text-align: center; }
body { font: 110% Cabin, Lato, Arial, sans-serif; color: #fff; background-color:#000; margin: 0; padding: 0; text-align: center; }
h1, h2, h3, h4, h5, h6 { font:Signikia, Rosario, 'Trebuchet MS', sans-serif; font-weight:bold; text-align:center; padding-top: 4px; color: #fff; }
h1 {font-size:288%; color:#fff; text-shadow: 1px 1px 2px black; }
h2 {font-size:188%; color:#00338d; text-shadow: 1px 1px 2px white; }
h3 {font-size:150%; color:#0f0; }
@media only screen and (min-width:601px) and (max-width:720 px) { h1 {font-size:175%; } }
@media only screen and (max-width:600px) { h1 {font-size:150%; } }


form {border:1px solid #903; border-radius:8px; background-color:#eee; width:50%; margin:0 auto; padding:8px; } 
@media only screen and (max-width:420px) {form {width:88%; } }
@media only screen and (min-width:1080px) {form {width:35%; } }
form.full {border:1px solid #903; border-radius:8px; background-color:#eee; width:100%; margin:0 auto; padding:8px; } 

img {max-width: 100%; height: auto; border:none; }
* {box-sizing: border-box;}

input {border-radius:8px; width:100%; padding:5px; margin: 5px 0 5px 0; }
textarea {border-radius:8px; width:100%; padding:5px; margin: 5px 0 5px 0; }
input[type=text]:focus, input[type=password]:focus { background-color: #ddd; outline: none;}

iframe {width:100%; height:auto; border:none; }
a, a:visited, a:hover, a:active {color:#0066ff; }

#container {width:90%; background:none; margin: 36px auto; border: none; text-align: center; }
@media only screen and (min-width:641px) and (max-width: 1024px) {container {width:80%; margin: 48px auto;} }
@media only screen and (min-width:1025px) {container {width:75%; margin: 72px auto;} }

#pics_wide {width:100%; height:auto; margin:0; padding:0; background-size:cover; }
#pics_lp {width:100%; height:auto; margin:0 0 12px 0; padding:0; background-size:cover; }
@media only screen and (max-width:480px) {#pics_lp {margin:0 0 12px 0; } }

#over {width:65%; position:absolute; top:35%; left:50%; transform: translate(-50%, -50%); color:#777; padding:12px; border-radius:12px; font-size:130%; font-weight:bold; text-align:center; background-color:rgba(255,255,255,0.5); }
@media only screen and (max-width:700px) {#over {width:88%; padding:8px; font-size:100%;   } }
#over h2 {font-size:150%; color:#b50102; margin:0; }
@media only screen and (max-width:700px) {#over h2 {font-size:120%; } }

#over_land { width:45%; position:absolute; top:20%; left:3%; color:#777; padding:10px; border:1px solid #903; border-radius:12px; font-weight:bold; 	text-align:center; background-color:rgba(255,255,255,0.75); z-index: 1; }
@media only screen and (max-width:680px) {#over_land {width:80%; left:50%; transform: translate(-50%, -50%); top:25%; } }
#over_land:hover {background-color:rgba(255,255,255,.9); }
#over_land h1, #over_land h2 {font-size:140%;  margin:0; color:#b50102;  }
#over_land p {font-size:110%;  margin:0; }
#over_land a {color:#777; cursor:pointer; font-weight:bold; background-color:inherit; }
#over_land a:hover {color:#b50102; font-weight:bold; cursor:pointer; }
@media only screen and (max-width:380px) {#over_land h2 {font-size:120%; } }
@media only screen and (max-width:380px) {#over_land p {font-size:90%; } }

#header { background-color:#600; border-bottom:#006 ridge 1px; font:100% Cabin, Lato, Arial, sans-serif; font-weight:bold; color:#fff; height:auto; width:100%; margin:0; padding:12px; position:fixed; top:0; left:0; z-index:2;  }
@media only screen and (max-width:860px) {#header {padding:2px; }}
@media only screen and (max-width:860px) {#header .fltimgl {max-width:20%; height:auto; min-width:136px; padding:0; }}
#header a:link, a:visited { display:inline-block; padding:0 10px 2px 10px; margin:0;  font:100% Cabin, Lato, Arial, sans-serif; color:#fff; text-decoration:none; font-weight:bold; }
#header a:hover { display:inline-block; padding:0 10px 2px 10px; margin:0;  font:100% Cabin, Lato, Arial, sans-serif; color:#006; text-decoration:none; font-weight:bold; background-color:#fff; }
#header a:active { display:inline-block; padding:0 10px 2px 10px; margin:0;  font:100% Cabin, Lato, Arial, sans-serif; color:#fff; text-decoration:none; font-weight:bold; }
#header a { display:inline-block; padding:0 10px 2px 10px; margin:0;  font:100% Cabin, Lato, Arial, sans-serif; color:#fff; text-decoration:none; font-weight:bold; }
@media only screen and (max-width:860px) {#header a {padding:0 2px 2px 6px; } }

.hidew {display:inline; }
@media only screen and (max-width:690px) {.hidew {display:none; }}
.modal {display:none; width:100%; height:auto; background-color:#600; margin:0; padding:0; position:fixed; left:0; top:0; } 	
.modal-content {background-color:#600; margin:0 auto; border:1px solid #600; }
.modal-content p {margin-top:8px;}
.close {color:#fff; position:fixed; top:0; right:4px; font-size:36px; font-weight:bold; margin-top:0; padding-top:0; }
.close:hover, .close:focus {color:#ccc; text-decoration:none; cursor:pointer; }
@media only screen and (min-width:690px) {#myBtn {display:none; background-color:none; }}
button {padding:0; background-color:#600; margin:0 12px; border:0;}
#myModal {display:none; }
.modal a:link, a:visited { display:inline-block; padding:0 12px 2px 12px; margin:0;  font:100% Cabin, Lato, Arial, sans-serif; color:#fff; text-decoration:none; font-weight:bold; }
.modal a:hover { display:inline-block; padding:0 12px 2px 12px; margin:0;  font:100% Cabin, Lato, Arial, sans-serif; color:#006; text-decoration:none; font-weight:bold; background-color:#fff; }
.modal a:active { display:inline-block; padding:0 12px 2px 12px; margin:0;  font:100% Cabin, Lato, Arial, sans-serif; color:#fff; text-decoration:none; font-weight:bold; }



#mainContent {padding:20px 0;}

#footer {padding: 0 10px; border-top: #00338d inset 2px; height:auto; background-image: linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.8)); }
#footer p {margin: 0; padding: 10px 0; font-size:100%; font-weight:bold; color:#e1e1e1; text-align:center; } 
#footer p.small10 {font-size:90%; }
#footer a:hover {color:#00338d; }	
@media only screen and (max-width: 640px) {footer p {font-size:90%; } }


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

#nav_rt {padding:8px; position:absolute; top:0; right:0; background:none; width:auto; margin:0 0 14px 14px; z-index:1;}
#nav_rt p {margin: 0; padding: 10px 0; font-size:12pt; font-weight:bold; text-align:right;}

#flt_rt {padding: 0px; max-width:320px; width:30%; 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:690px) { #flt_rt {width:28%; } }

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

.bg-MtGarfield {background-image:url(/images/Mt-Garfield-Mesa-County-Colorado-720.jpg); background-size:cover; background-attachment:fixed; background-repeat:no-repeat; background-color:#000; }
@media only screen and (min-width:721px) and (max-width:1024px) { .bg-MtGarfield {background-image:url(/images/Mt-Garfield-Mesa-County-Colorado-1024.jpg); background-size:cover; background-attachment:fixed; background-repeat:no-repeat; } }
@media only screen and (min-width:1025px) and (max-width:1920px) { .bg-MtGarfield {background-image:url(/images/Mt-Garfield-Mesa-County-Colorado-1024.jpg); background-size:cover; background-attachment:fixed; background-repeat:no-repeat; } }
@media only screen and (min-width:1921px) { .bg-MtGarfield {background-image:url(/images/Mt-Garfield-Mesa-County-Colorado-1024.jpg); background-size:cover; background-attachment:fixed; background-repeat:no-repeat; } }
.bg-blk-gr {background-image: linear-gradient(180deg, rgba(0,0,0,0.4), rgba(0,0,0,0.6)); color:#fff; font-weight:bold; width:100%; }
.bgsilh {background-image:url(/images/bowling-sq-silh.png); background-color:none; background-repeat:no-repeat; background-position:center top; }
.bgballs {background-image:url(/images/bowling-sq-balls.png); background-color:none; background-repeat:no-repeat; background-position:center top;}
.bggrn {background-color:#0F0; }
.bglanes {background-image:url(/images/bowling-sq-lanes.png); background-color:none; background-repeat:no-repeat; background-position:center top;}
.bglgpins {background-image:url(/images/bowling-sq-lg-pins-blk-bg.png); background-color:none; background-repeat:no-repeat; background-position:center top;}
.bgyellow {background-color:#FF0; }
.bg-white-gr {background-image: linear-gradient(180deg, rgba(255,255,255,0.3), rgba(255,255,255,0.7)); color:#999; font-weight:bold; }
.black {color:#000; }
.blue {color:#00338d; }
.bold {font-weight:bold; }
.brdr {border:1px solid #900; border-radius:12px; }
.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; }
.cta a:link, a:visited { display:inline-block; padding:18px; margin:2px;  font:150% Cabin, Lato, Arial, sans-serif; color:#fff; text-decoration:none; font-weight:bold; border-radius:12px; background-color:#00338d; }
.cta a:hover { display:inline-block; padding:18px; margin:2px;  font:150% Cabin, Lato, Arial, sans-serif; text-decoration:none; font-weight:bold; color:#00338d; border-radius:12px;  background-color:#fff;}
.cta a:active { display:inline-block; padding:18px; margin:2px;  font:150% Cabin, Lato, Arial, sans-serif; color:#fff; text-decoration:none; font-weight:bold; border-radius:12px; background-color:#00338d; }
@media only screen and (max-width:799px) { .cta a {font-size:135%; padding:8px; }}
.center {text-align:center; }
.clr {clear:both; }
.f125 {font-size:120%; }
.float_rt {float:right; text-align:right;}
.flt_lft25 {float:left; text-align:center; width:23%; margin-left:1%; margin-right:1%; padding:0; border-left:#00338d inset 2px; border-radius:12px; vertical-align:top;}
@media only screen and (min-width:481px) and (max-width:799px) { .flt_lft25 {width:48%; border-top:#00338d inset 2px;} }
@media only screen and (max-width:480px) { .flt_lft25 {float:none; width:98%; border-top:#00338d inset 2px;} }
.flt_lft25 p {padding:0 12px 0 12px}
.flt_lft25 img {border-radius:12px; }

.flt_rt25 {float:right; text-align:center; width:23%; margin-left:1%; margin-right:1%; padding:0; border-left:#00338d inset 2px; border-radius:12px;}
@media only screen and (min-width:481px) and (max-width:799px) { .flt_rt25 {width:48%; border-top:#00338d inset 2px;} }
@media only screen and (max-width:480px) { .flt_rt25 {float:none; width:98%; border-top:#00338d inset 2px;} }
.flt_rt25 p {padding:0 12px 0 12px}
.flt_rt25 img {border-radius:12px; }

.flt_lft50 {float:left; text-align:center; width:47%; margin-left:1%; margin-right:1%; padding:0; border-left:#00338d inset 2px; border-radius:12px;}
@media only screen and (max-width:799px) { .flt_lft50 {width:98%; float:none; border-top:#00338d inset 2px;} }
/* @media only screen and (max-width:480px) { .flt_lft50 {float:none; width:98%; border-top:#00338d inset 2px;} }
*/
.flt_lft50 p {padding:0 12px 0 12px}
.flt_lft50 img {border-radius:12px; }

.flt_lftgm {width:68%; margin:0 auto; float:left; }
@media only screen and (max-width:690px) { .flt_lftgm {width:100%; margin:0 auto; float:none; } }
@media only screen and (max-width:690px) { .flt_lftgm img {max-width:50%; margin:0 auto; } }
.fltimgl {float:left; padding:0 8px 0 8px; }
@media only screen and (max-width:690px) { .fltimgl {float:left; padding:0; } }
.fltimgr {float:right; padding:0 8px 0 8px; }
@media only screen and (max-width:690px) { .fltimgr {float:right; padding:0 0 0 4px; } }
.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:690px) {.hidem {display:none; }}
.hide25 {display:none; }
@media only screen and (max-width:799px) {.hide25 {display:inline; }}
.hidet {display:inline; }
@media only screen and (max-width:1020px) {.hidet {display:none; }}
.imgpad-ctr {vertical-align:middle; padding:0 4px 4px 12px; }
.logopad {padding:28px; }
.logopadsm {padding:19px; }
.max33 {max-width:33%; height:auto; }
.max30 {max-width:35%; height:auto; }
.max50 {max-width:50%; height:auto; }
.overtop {float:right; z-index:3;}
.pleft {text-align:left; }
.pright {text-align:right; }
.red {color:#900; }
.redUSBC {color:#b91234; }
.smaller {font-size:smaller; }
.small10 {font-size:90%; }
.yellow {color:#FF0; }
.white {color:#fff; }
.z3 {z-index:5; }


/* Button used to open the home page contact form - display inline */
.open-button1 { font:150% Cabin, Lato, Arial, sans-serif; 
  background-color: #00338d;
  color: white;
  padding: 18px;
  border: none;
  cursor: pointer;
  opacity:1.0;
  width:auto;
  font-weight:bold;
  text-align:center;
  border-radius:8px;
  margin-bottom:18px;
}
@media only screen and (max-width:799px) { .open-button1 {font-size:135%; padding:8px; }}

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

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

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

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

/* Set a style for the submit/login button */
.form-container1 .btnfrm1 {font:120% Cabin, Lato, Arial, sans-serif; 
  background-color: #00338d;
  color: white;
  font-weight:bold;
  padding: 12px;
  border: none;
  cursor: pointer;
  width:100%;
  margin:5px;  
  opacity: 1.0;
  border-radius:8px;
}
@media only screen and (max-width:799px) { .btnfrm1 {padding:8px; }}

/* Add black background color to the cancel button */
.form-container1 .cancel {
  background-color: #000;
}

/* Add some hover effects to buttons */
.form-container1 .btnfrm1:hover, .open-button1:hover {
  opacity:1.0; color:#FF0;
}