body{font-family:'Helvetica', sans-serif; background-color:#FFF;font-size:1rem;padding: 0;margin:0; color:#1e1e1e}
#foxlawn{width:100%;height:20px;
background-image:url("https://cdn.glitch.global/96fa22db-2a31-47fd-af60-76cd25d18ae6/foxlawn.png?v=1725819611018");
}
.button{background-color: #64366b; color:white;text-decoration:none; padding: 0.3em}
.button a:hover{text-decoration:underline;text-align: center;}
.content{padding:1em}
.yellow{background-color:#fdf1c1}
h1, h2,h3,p,li,a{font-family:trade_gothic,'Open Sans',sans-serif}
#title{font-family:american_typewriter,'Open Sans',sans-serif; font-size:2rem; text-align:center;margin-bottom:1em;font-size:2em;margin-top:1em}
.case-study-heading{margin-top:1em}
h1 a{text-decoration: none; color:#fff}
#tagline{margin:0;line-height:1em}
a{text-decoration:underline;}
.active {text-decoration:none}
#header{background-color: #64366b;margin:0;color:white;padding:1em 1em 2em 1em}
#header h1{font-family:american_typewriter,'Libre Baskerville',serif;line-height:1em}
#header a{color:#CCC;margin-top:0.5em}
#header a:hover{color:#FFFFCC;transition:0.5s}
.logo{width:3em}
#hero-image{width:100%}
#contact li{list-style-type:none;position:relative;right:1.8em}
li {margin: 1em 0}

.case-studies-thumbnails li {width:32%;list-style:none;display:inline-block;margin-left:10%}

* {
   -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
    }

.image-no-shadow{width:100%;margin:1em}

.image{width:100%}
.footer {
  width:100%;
  background:#000;
	color:#fff;
	padding:1em 0 1em 2em;
	clear:left
}

#footer {
  width:100%;
	margin:0 auto;
}

.footer a{color:#fdf1c1}

#myBtn{
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: #666; /* Set a background color */
    color: #FFF; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 1.4vw; /* Increase font size */
}

#myBtn:hover {
    background-color: #fdf1c1;
    color:#000;
}

/*------------------------------------*\
    devices with a screen width of under 767px
\*------------------------------------*/

@media only screen and (max-width: 767px) {
  h1{font-size: 8vw;margin:0;line-height:1.1}
  h2{font-size: 7vw;margin-top:1em;line-height:1}
  h3{font-size: 6vw;margin-top:1.5em;line-height:1.1}
  p,li,a,#tagline{font-size: 5vw}
  #hare{width:3em;float:left;margin:0 1em 0 0}
  .content{width:100%; margin-bottom:2em}
  #menu{display:block;position:absolute;right:1.5em;top:1.5em}
  #hidden{display:none}
  #header li{line-height: 2em;list-style:none}
  .case-study-thumbnails{display:flex;flex-wrap:wrap}
  .case-study{width:90%}
}

/*------------------------------------*\
    devices with a screen width greater than 768px
\*------------------------------------*/


@media only screen and (min-width: 768px) {
   h1{font-size: 2.6vw;margin:0;}
   h2{font-size: 2vw;margin-top:1em}
   h3{font-size: 1.6vw;margin-top:1.5em}
   p,li,a,#tagline{font-size: 1.4vw}
   #hare{width:5em;float:left;margin:0 1em 0 0}
   .content{width:50%;margin:0 auto;margin-top:1em;margin-bottom:1em}
   .yellow{margin-top:2em;padding:1em 0 1em 0}
   .yellow h2{width:50%}
   .case-study-thumbnails{display:flex;flex-wrap:wrap;}
   .case-study{width:40%; margin: 0 1em}
   #header ul{position:absolute; right:3em;top:1em}
   #header li{display:inline;margin-right:1em;font-size:1.4vw;}
   #menu{display:none}
   #close{display:none}
}