img{
    max-width: 100%; 
    display: block;
}


h1{
    font-weight: 400;
    font-size: 1.75rem;
    margin: 1.5rem 0; 
}

h2, h3{
    font-weight: 400;
}



.topnav{
    background-image: url('/images/cutting-turf.jpg');
    background-position: center center;
    background-size: cover;
}
.topnav>.links{
    background-color: rgba(188, 191, 170, 0.9);
    font-family: Arial, Helvetica, sans-serif;
}
.topnav>.links a{
    color: #fff; 
    text-decoration: none;
    padding: 1rem; 
    line-height: 49px;
    transition: 0.4s;
    white-space: nowrap;
}
.topnav>.links a:hover{
    color: #000;
    background-color: #80875f ;
}
.topnav{
    min-height: 460px; 
}
.topnav h1{
    color: #e6d9a4;
    font-family: centaur, Georgia, 'Times New Roman', Times, serif;
    font-weight: 400;
    font-size: 4.5rem;
    padding: 1rem; 
    text-align: center;
}
.topnav > .title {
    max-width: 500px;
    display: grid;
    align-content: center;
    justify-content: center;
    min-height: 400px;
}



.text { font-family:  arial, verdana, helvetica, sans; font-size: 16px; font-weight: normal; color: #ffffff}
.text a {  color: #ffffff ; text-decoration: none}
.text a:hover {   color: #9C4218 ; text-decoration: none}



.btext, main { font-family: georgia, times new roman, serif; font-size: 16px; font-weight: normal;  color: #e6daa0}
.btext a, main a {  font-weight: normal; color: #fff; text-decoration: dashed }
.btext a:hover {  font-weight: normal; color: #e6daa0; text-decoration: underline }
.btext {line-height: 180%; }



.nav { font-family: arial, helvetica, sans; font-size: 12px; font-weight: normal; }
.nav a:link {  color: #26557A; text-decoration: none ; display: block; padding: 3px; font-weight: normal;}
.nav a:visited {color: #26557A; text-decoration: none ;  display: block; padding: 3px; font-weight: normal;}
.nav a:hover {  background: #26557A;color: #ffffff; text-decoration: none ;   padding: 3px; font-weight: normal;}


.small { font-family:  arial, verdana, helvetica, sans; font-size: 9px; font-weight: normal; font-weight: normal}
.small a:link {  color: #606060 ; text-decoration: none; font-weight: normal}
.small a:visited {   color: #606060 ; text-decoration: none; font-weight: normal}
.small a:hover {   color: #9C4218 ; text-decoration: none; font-weight: normal}

.redstar {  font-family: arial, verdana, helvetica, sans; font-size: 16px; font-weight: bold; color: #FF0000}

body {background: #80875F;  margin:0}

table#tbnav {border-collapse: collapse; border-bottom-style: solid; border-bottom-width: 1; border-bottom-color:#d3daf1; width:100%}
#Layer1 {
	position:absolute;
	left:1px;
	top:1px;
	width:10px;
	height:2px;
	z-index:1;
	visibility: hidden;
	background-color: #ffff00;
}
  INPUT, TEXTAREA, select {


color: #606060;
font-family: arial, verdana, ms sans serif;
font-size: 8pt;
font-weight: normal;}


td {vertical-align:top}
table#points { text-align: right}

td#creamone {background: #fdfdfe}
td#creamtwo {background: #f8f8f9}
td#creamthree {background: #fafafa}


.hosepipe {
	max-width: 900px;
	margin: auto;
	color: #e6daa0;
	font-family: arial, helvetica, sans;

}
.hosepipe h3{
	line-height: 1.7;
}
main{
	max-width: 900px; 
	margin: auto;
    line-height: 1.7;
    padding: 1rem; 
}
main > div{
	padding: 1vw 3vw;
}
main ul{
    margin: 2rem; 
}
main ul li{
    margin-bottom: 1rem; 
}
.gallery{
    display: grid;
    background-color: var(--background);
}
.gallery{
    border: 8px solid var(--background);
    gap: 8px; 
}

.vimeo-wrapper, .vimeo-wrapper2 {
    width: 100%;
      background-image: url('/images/just-turf.jpg'); 
      background-size: cover; 
    overflow: hidden;
    position: relative; 
  }
  .vimeo-wrapper:after {
      padding-top: 31.25%;
      display: block;
      content: ""; 
  }
  
  .vimeo-wrapper iframe, .vimeo-wrapper2 iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0; 
  }
  
  .vimeo-wrapper2:after {
      padding-top: 56.2%;
      display: block;
      content: ""; 
  }

table.btext , .btext td, .btext tbody{
    display: block;
}
table.btext  tr{
    display: grid;
    gap: 1rem;
}





@media only screen and ( min-width: 640px ) {
    .gallery{
        grid-template-columns: 1fr 1fr 1fr;
		margin-block: 2rem;
    }
	.gallery img{
		object-fit: cover;
    	object-position: center;
		height: 100%; 
	}
    table.btext  tr{
        grid-template-columns: 1fr 1fr;
    }


}