:root {

--primary: #4c5727; /* army green */
--secondary: #9d9b01;
/*--secondary: #004481;  blue bar */
--accent: #CC101F;/* red bar */
--text: #555;
--bg: #ffffff;
--title: #ffffff;
--footer-bg: var(--primary);
--footer-txt: #ffffff;
--footer-hover: #9d9b01;
}

/* =========================================================
GLOBAL
========================================================= */

body {
background: var(--bg);
color: var(--text);
font-family: "Helvetica Neue", "HelveticaNeue-Light", "Helvetica Neue Light", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 400;
}

/* =========================================================
LINKS
========================================================= */

a {
color: var(--primary);
}

a:hover {
color: var(--secondary);
}


.img {
  margin: 0 auto;
}

.text  a {
  color: var(--primary);
  font-style:italic;
  font-weight: 600;}

.text  a:hover {
    color: var(--secondary); }


/* =========================================================
HEADINGS
========================================================= */

h1, h2, h3, h4 {
color: var(--primary);
}

h5, h6 {
color: var(--secondary);
}

h4 {font-family: "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
 font-weight:400;
}

h2 {font-family: "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
font-weight:600;
text-align:center;

}

h6 {text-align:center;}


/* =========================================================
NAVIGATION
========================================================= */



#header #navbar ul.navigation li a {
  color: var(--primary);
}


#header #navbar ul.navigation li a {
     font-family: Open Sans, sans-serif ;
     letter-spacing: -0.7px;
     color: var(--primary);
     letter-display: inline-block;
     padding: 0.3rem 0.8rem;
     font-size: 0.9rem;
     font-weight:600;

   }


#header #navbar ul.navigation li a:hover {
  color: var(--secondary);
}

#header #navbar ul.navigation li.active a {
  color: var(--secondary);
 }


#header #navbar ul.navigation li.active ul li.active a {
 background-color: var(--primary);
 color: #ffffff;
}

#header #navbar ul.navigation li.active ul li a {
 background-color: #ffffff;
 color: var(--primary);
}
#header #navbar ul.navigation li.active ul li a:hover {
  color: var(--secondary);
}



 .blog-header h1 {
      font-family: "Open Sans", sans-serif ;
  font-size: 1.7rem;
  margin-top: 0;
  margin-bottom: 0;
  text-transform: uppercase;
  font-weight:600 !important;
}




/* =========================================================
BUTTONS / ACTIONS
========================================================= */

.button,
    .btn,
    input[type="submit"] {
    background: var(--primary);
    border-color: var(--secondary);
    color: #fff;
    }

.button:hover,
.btn:hover,
input[type="submit"]:hover {
background: var(--secondary);

}

a.button,
.button,
.btn,
.btn-primary,
input[type="submit"],
input[type="button"],
button {
  background-color: var(--primary) !important;

  color: #fff;
}

/* Hover state */
a.button:hover,
.button:hover,
.btn:hover,
.btn-primary:hover,
input[type="submit"]:hover,
button:hover {
  background-color: var(--secondary) !important;
  color: #fff;

}

.contact button {
  background-color: var(--primary); !important;
  color: #fff;

  border-color: var(--secondary);
}

/* Hover state */
.contact button:hover
 {
   background-color: #fff !important;
   color: var(--primary);

   border-color: var(--primary);

}

.footer a.button {
  background-color: #fff !important;
  color: #555;
  font-size: bold;
}

/* Hover state */
.footer a.button:hover
 {
   background-color: var(--secondary) !important;
   color: #fff;
   font-weight: bold;

}






/* =========================================================
CONTENT AREAS
========================================================= */

#body  {
background:  var(--bg);
}



.text {
    text-align: left;
}

.text h4{ font-family: Helvetica, sans-serif;}


      .centred p{text-align:center;}



/* =========================================================
FOOTER
========================================================= */

.footer {
background: var(--footer-bg);
color: #fff;
}

.footer h3 {
color: #fff;
font-size: 1.8rem;
  font-family: "Helvetica Neue", "HelveticaNeue-Light", "Helvetica Neue Light", Helvetica, Arial, "Lucida Grande", sans-serif;
}

.footer a {
color: #fff;
}

.footer a:hover {
color: var(--footer-hover);
}


/* =========================================================
TEAM BLOCKS  member1 refers to collection twig,
member refers to the portofolio twig of the parent Deliver
========================================================= */

.team .members .member1 {
    display: inline-block;
    float: left;
    width: 40%;
    margin: 0 1.5rem;
    margin-bottom: 2rem; }

    @media only all and (max-width: 47.938em) {
      .team .members .member1 {
        display: block;
        width: 100%;
        text-align: center;
        margin: 0;
        margin-bottom: 2rem; } }

    @media only all and (min-width: 48em) and (max-width: 59.938em) {
      .team .members .member1 {
        display: block;
        width: 40%;
        margin-bottom: 2rem; }

      }

  .team .members .member1  h4{ font-family: Helvetica, sans-serif;
 	 font-weight:500; font-size: 1.1rem;}



/* =========================================================
BLOG-Header.png removed in page title see modular_alt twig
to chose a different color use bg_color: "#...." in front matter of the page
========================================================= */


.blog-header {
    background-color: var(--primary);

}


.blog-header h1 {
    font-size: 1.4rem;
    font-weight: lighter;
    color: var(--title);
    margin-top: 0;
    margin-bottom: 0;
    text-transform: uppercase;
    text-align: left;
}

/* =========================================================
Simple search results add placeholder if there are no images
========================================================= */

.search-image-placeholder {
    background: var(--primary);
    height: 90px;
    width: 90px;
}



/* =========================================================
   Lightslider Slideshow
   -------------------------
   A pure CSS automatic sliding carousel supporting any number
   of slides and mixed image dimensions.

   Key design decisions:
   - Slides are laid out as inline-block inside a single <figure>
     with white-space: nowrap, replacing the original float-based
     approach to ensure consistent height behaviour.
   - The slider has a fixed height; images use object-fit: cover
     to fill the frame without distortion, regardless of their
     native dimensions.
   - Animation duration and @keyframes percentages are generated
     dynamically in lightslider.html.twig, scaling with slide
     count (4s per slide) so transitions are consistent whether
     there are 4 or 10 slides.
   - font-size: 0 on #slider eliminates inline-block whitespace
     gaps between images.
========================================================= */

div#slider {
    overflow: hidden;
    margin-top: -0.2rem;
    height: 37rem;              /* fixed height, not max-height */
    font-size: 0;               /* removes inline-block whitespace gaps */
}

div#slider figure {
    position: relative;
    margin: 0;
    height: 100%;
    animation: slidy var(--slider-duration, 40s) infinite;
    white-space: nowrap;        /* keeps images in a single row */
}

div#slider figure img {
    display: inline-block;      /* replace float with this */
    vertical-align: top;
    width: {{ 100 / slide_count }}%;   /* keep your Twig-generated width */
    height: 100%;
    object-fit: cover;
    object-position: center;
}
/* =========================================================
No slideshow, but only a big image at the top
========================================================= */

div#topimage {
    overflow: hidden;
    margin-top: -2rem;
    max-height: 57rem;
    margin-bottom: 1rem;
}



div#topimage figure img { width: 20%; float: left; }
div#topimage figure {
    position: relative;
    width: 500%;
    margin: 0;
    left: 0;
}

/* =========================================================
All the following comes fron the old website
========================================================= */


.blue {
  background-color: #004481;
  width: 100%;
  height: 20px;
}

.yellow {
  background-color: #FFD500;
  width: 100%;
  height: 20px;
}

.red {
  background-color: #cc101f;
  width: 100%;
  height: 20px;
}




/*DONATION button*/


.donate {
  background-image: url(../images/donate.png);
  background-repeat: no-repeat;
  float:right;
  width: 150px;
  height:45px;
  margin-top: 28px;

  }



  *{
  margin: 0;
  padding: 0;
}

.wrapper{
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.wrapper .wrapper__video{
  object-fit: cover;
  width: 100%;
  height: 100%;
}