@charset "UTF-8";
a, b, blockquote, body, caption, div, em, fieldset, footer, form, h1, h2, h3, h4, h5, h6, header, html, i, iframe, img, label, legend, li, menu, nav, object, ol, p, pre, q, s, section, small, span, strong, summary, table, tbody, td, tfoot, th, thead, time, tr, u, ul, var, video {
  margin: 0;
  padding: 0;
  border: 0
}

html {
  text-rendering: optimizeLegibility;
}
* {
  box-sizing: border-box;
}
body {
    font-family: "Roboto Condensed", "Helvetica Neue", "Arial Narrow", Arial, sans-serif;
}
.clear {
clear: both;
}
.nowrap {
  white-space: nowrap;
}

/* COLOURS*/
:root {
    --limegreen: #d4d623;
    --LTgreen: #6f9f25;
    --orange: #f07700;
    --menuback: #446217;
    --submenu: #53751f;
    --menuwhite: #fff;
    --whiteback: #fff;
    --menublack: #000;
    --grey: #515c6a;
    --LTgrey: #777;
    --GITback: #e2eed4;
    --blue: #237dcd;
    --red: #cc0000;
}

/* BANNER */

.bannerblock {
  position: relative;
  width: 100%;
}
.Bimg img {
	display: block;
	width: 100%;
	height: auto;
}

/* USER INPUT AREAS */

.userinput {
  padding: 2% 3%;
  color: var(--grey);
}

.userinput h1 {
  font-size: clamp(2.6rem, 5vw, 3.5rem);
  font-family: "League Gothic-Regular", "Arial Narrow", Arial, sans-serif;
  padding-bottom: 25px;
  color: var(--orange);
  font-weight: normal;
}
.userinput h2, .userinput h3 {
  font-size: clamp(1.4rem, 2.5vw, 1.6rem);
  font-weight: normal;
  padding-bottom: 15px;
}
.userinput p {
  font-size: clamp(1.2rem, 2vw, 1.3rem);
  padding-bottom: 10px;
  font-weight: normal;
}
.userinput ul {
  font-size: clamp(1.2rem, 2vw, 1.3rem);
  margin: 0 0 15px 40px;
}
.userinput li {
  padding-bottom: 10px;
}
.userinput a {
  text-decoration: none;
  border-bottom: 1px dotted var(--blue);
  color: var(--blue);
}
.userinput a:hover {
  color: var(--orange);
}

@media (min-width: 1400px) {
  .userinput h1 {
    text-align: center;
  }
  .userinput .columns {
    column-count: 2;
  column-gap: 4rem;
  }
  .userinput .columns > div,
  .userinput p {
  break-inside: avoid;
  page-break-inside: avoid;
  }
}

/* GIT Section */

.GITblock {
    position: relative;
  width: 100%;
  display: flex;
}
.GITblock picture {
  display: block;
	height: auto;
  padding: 10px 0 0 0;
}
.GITblock img {
  max-width: 100%;
  display: block;
}

@media (max-width: 450px) {
  .GITblock {
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 1.5rem;
  }
  .GITblock picture {
    margin-bottom: 40px;
    background: var(--GITback);
    width: 100%;
  }
}
@media (min-width: 451px) {
  .GITblock {
    flex-wrap: nowrap;
    justify-content: center;
    align-content: stretch;
    align-items: center;
    margin-bottom: 1.5rem;
    background: var(--GITback);
    margin-bottom: 2rem;  
    padding: 0 2%;
    column-gap: 2rem;
  }
  .GITblock picture {
    max-width: 50%;
  }
  .GITbtn { 
    white-space: nowrap;
  }
}

.GITbtn {  
  text-align: center;
}

.GITbtn a {
   font-size: clamp(1.6rem, 5vw, 3rem);
   position: relative;
  font-family: "League Gothic-Regular", "Arial Narrow", Arial, sans-serif;
  text-decoration: none;
  background: var(--orange);
  padding: 5px 20px;
  border-radius: 6px;
  color: var(--menuwhite);
}
.GITbtn a:hover {
 background: var(--submenu);
}

.GITbtn.padbottom {
  margin: 10px 0 40px 0;
}

/* QUOTES INSERT BLOCK */

.homequotes {
  display: flex;
  flex-direction: column;
  column-gap: 2rem;
  padding: 0 3% 30px 3%;
}
.homeQT {
  font-size: 1.2rem;
  padding-bottom: 5px;
  color: var(--grey);
}
.homeQN {
  font-size: 1rem;
   color: var(--LTgrey);
}

/*SPEECH BUBBLE*/
.speech-bubble {
  position:relative;
  padding:15px;
  margin:1em 0;
  border:5px solid #5a8f00;
  background:#fff;
  /* css3 */
  border-radius:10px;
}

.speech-bubble:before {
  content:"";
  position:absolute;
  bottom:-20px; /* value = - border-top-width - border-bottom-width */
  left:40px; /* controls horizontal position */
  border-width:20px 20px 0;
  border-style:solid;
  border-color:#5a8f00 transparent;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}

/* creates the smaller triangle */
.speech-bubble:after {
  content:"";
  position:absolute;
  bottom:-13px; /* value = - border-top-width - border-bottom-width */
  left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
  border-width:13px 13px 0;
  border-style:solid;
  border-color:#fff transparent;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}

/* CONTACT FORM */

.contactBlock {
  padding: 0 3% 3% 3%;
}
.contactBlock form {
  display: flex;
  flex-direction: row;
  justify-content: center;
  column-gap: 5rem;
  font-size: 1.2rem;
  color: var(--grey);
  margin: 0 auto 30px auto;
}
.contactBlock .formLabel {
  padding-bottom: 5px;
}
.contactBlock .formInput {
    margin-bottom: 1em;
}
.contactBlock input, .contactBlock textarea, .contactBlock select {
    border-radius: 6px;
    border: 1px solid var(--LTgreen);
    font-size: 1.2rem;
    width: 100%;
}
.contactBlock input[type=text], 
.contactBlock input[type=email], 
.contactBlock input[type=url], 
.contactBlock textarea, 
.contactBlock select {
    padding: 10px;
    color: var(--grey);
    font-family: "Roboto Condensed", "Helvetica Neue", "Arial Narrow", Arial, sans-serif;
    background: #fff;
}
.contactBlock .submit {
  padding: 10px 15px;
  border: 0;
  background: var(--LTgreen);
  color: var(--menuwhite);
  font-size: 1.3rem;
}
.contactBlock .submit:hover {
  background: var(--orange);
}
@media (max-width: 999px) {
  .contactBlock form {
    flex-wrap: wrap;
  }
  .formL, .formR {
    width: 100%;
  }
}
@media (min-width: 1000px) {
  .contactBlock form {
    max-width: 1400px;
    flex-wrap: nowrap;
  }
  .formL {
    width: 40%;
  }
  .formR {
    width: 60%;
  }
}

.response {
  color: var(--red);
  padding-top: 5px;
}
.response a {
  text-decoration: none;
  border-bottom: 1px dotted var(--blue);
  color: var(--blue);
}
.response a:hover {
  color: var(--orange);
}

/*FOOTER*/

.footerblock {
background: var(--menuback);
width: 100%;
box-sizing: border-box;
}
.footer {
  margin: 0 3%;
  padding: 10px 0 ;
  box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    align-content: stretch;
}
.footer i {
  font-size: 2.2rem;
  padding: 0 10px;
}
.fIcons a {
  display: inline-flex;
  align-items: center;
}
.fIcons a {
    color: var(--menuwhite);
    font-weight: normal;
    text-decoration: none;
    font-family: "League Gothic-Regular", "Arial Narrow", Arial, sans-serif;
    font-size: 3rem;
  }
  .fIcons a:hover,
  .fLinks a:hover {
    color: var(--limegreen);
  opacity: 1;
}
.copyright,
.fLinks {
  color: var(--menuwhite);
  opacity: 0.8;
  font-size: 0.9rem;
}
.fLinks a {
  color: var(--menuwhite);
  text-decoration: none;
}
@media (max-width : 780px) {
  .footer {
    justify-content: space-evenly; 
    column-gap: 20px;
    row-gap: 10px;
  }
  .fLinks {
    text-align: center;
  }
  .Fbig {
    display: none;
    visibility: hidden;
  }
}
@media (min-width : 781px) {
  .Fsmall {
    display: none;
    visibility: hidden;
  }  
}
@media (min-width : 781px) and (max-width : 1200px) {
   .fIcons {
     width: 48%;
  }
  .footer i {
  padding-right: 10px;
}
  .fRight { 
    text-align: right;
  }
}
@media (min-width : 1201px) {
  .footer {
    justify-content: space-between;
  }
}

/*FONTS*/

@font-face {
    font-family: "Roboto Condensed";
    src: url(../webfonts/RobotoCondensed-Regular.woff2) format('woff2'),
        url(../webfonts/RobotoCondensed-Regular.woff) format('woff');
}

@font-face {
    font-family: "Roboto Condensed Medium";
    src: url(../webfonts/RobotoCondensed-Medium.woff2) format('woff2'),
        url(../webfonts/RobotoCondensed-Medium.woff) format('woff');
}

@font-face {
    font-family: "Roboto Condensed Light";
    src: url(../webfonts/RobotoCondensed-Light.woff2) format('woff2'),
        url(../webfonts/RobotoCondensed-Light.woff) format('woff');
}

@font-face {
    font-family: "Roboto Condensed Bold";
    src: url(../webfonts/RobotoCondensed-Bold.woff2) format('woff2'),
        url(../webfonts/RobotoCondensed-Bold.woff) format('woff');
}

    @font-face {
    font-family: 'League Gothic-Regular';
    font-style: normal;
    font-weight: normal;
    src: url(../webfonts/LeagueGothic-Regular.woff) format('woff');
    }

.robotoC {
    font-family: 'Roboto Condensed', "Arial Narrow", Arial, sans-serif;
}

.robotoCM {
    font-family: 'Roboto Condensed Medium', "Arial Narrow", Arial, sans-serif;
}

.robotoCL {
    font-family: 'Roboto Condensed Light', "Arial Narrow", Arial, sans-serif;
}

.robotoCB {
    font-family: 'Roboto Condensed Bold', "Arial Narrow", Arial, sans-serif;
}

/*FONT AWESOME*/
  @font-face {
    font-family: 'Font Awesome 5 Brands';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../webfonts/fa-brands-400.woff2) format("woff2"),
      url(../webfonts/fa-brands-400.woff) format("woff");
    font-display: swap
  }
    @font-face {
    font-family: 'Font Awesome Solid';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url(../webfonts/fa-solid-900.woff2) format("woff2"),
      url(../webfonts/fa-solid-900.woff) format("woff");
    font-display: swap
  }
  @font-face {
    font-family: 'Font Awesome Regular';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../webfonts/fa-regular-400.woff2) format("woff2"),
      url(../webfonts/fa-regular-400.woff) format("woff");
    font-display: swap
  }
.fab {
    font-family: 'Font Awesome 5 Brands';
}
.fa, .fas, .fal{
  font-family: 'Font Awesome Solid';
  font-weight: 900;
}
.fa-regular, .far  {
    font-family: 'Font Awesome Regular';
}
  .fa, .fa-brands, .fab, .fad, .fal, .far, .fas, .fa-solid, .fa-regular {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1
}
.fa-location-dot::before { content: "\f3c5"; }
.fa-phone:before{content:"\f095"}
.fa-envelope::before { content: "\f0e0"; }
.fa-arrow-down:before{content:"\f063"}
.fa-arrow-left:before{content:"\f060"}
.fa-arrow-right:before{content:"\f061"}
.fa-arrow-up:before{content:"\f062"}
.fa-check-circle::before {content: "\f058";}
.fa-arrows-up-down-left-right::before {content: "\f047"; }
.fa-square-o:before {content: "\f096";}
.fa-home:before {content: "\f015";}
.fa-at:before {content: "\f1fa";}
.fa-facebook:before { content: "\f082";}
.fa-paper-plane:before { content: "\f1d8";}
.fa-bars:before {content: "\f0c9"}
.fa-angles-left:before { content: "\f100" }
.fa-angle-right:before { content: "\f105" }
.fa-mail:before { content: "\f0e0"; }