html{color:#222;font-size:1em;line-height:1.4}::-moz-selection{background:#67A226;text-shadow:none;color:#fff;}::selection{background:#67A226;text-shadow:none;color:#fff;}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}audio,canvas,iframe,img,svg,video{vertical-align:middle}fieldset{border:0;margin:0;padding:0}textarea{resize:vertical}.browserupgrade{margin:.2em 0;background:#ccc;color:#000;padding:.2em 0}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
:root {
  --wide: 100%;  
 --green: #67a226; 
 --black: #1a1a1a; 
 --grey: #495056; 
    
}

body::-webkit-scrollbar {
    width: 0.5rem;
}

body::-webkit-scrollbar-thumb {
    background-color: var(--green);
    border-radius: 0.7rem;
}

body::-webkit-scrollbar-track {
    background-color: var(--grey);
    border-radius: 0.7rem;
}

/* Browsers without `::-webkit-scrollbar-*` support */
@supports not selector(::-webkit-scrollbar) {
    html {
        scrollbar-width: thin;
        scrollbar-color: var(--grey) var(--green);
    }
}

.fixed{position: fixed; bottom: 0; right: 0; z-index: 10000}
.fixed a{padding: 5px; background: #1a1a1a; color: #fff;}
html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }
a{-webkit-transition:all 0.3s ease;
         -moz-transition:all 0.3s ease;
               -o-transition:all 0.3s ease;
                     transition:all 0.3s ease;
text-decoration: none;
color: #67A226; font-weight: 600;}
a img{-webkit-transition:all 0.3s ease;
         -moz-transition:all 0.3s ease;
               -o-transition:all 0.3s ease;
                     transition:all 0.3s ease;}
a:hover{}
.smoothie{-webkit-transition:all 0.3s ease;
         -moz-transition:all 0.3s ease;
               -o-transition:all 0.3s ease;
                     transition:all 0.3s ease;}
h1,h2,h3,h4,h5,h6{margin: 0 0 10px 0; color: #fff; font-weight: 600; letter-spacing: 1px; font-family:quanticoregular, 'Barlow', sans-serif; text-transform: uppercase}

p{margin: 0 0 10px 0;}
strong{font-weight: 800;}
img, iframe{max-width: 100%;}



.container{width: 100%; max-width: 1920px; margin: 0 auto; font-family:'Barlow', sans-serif; font-weight: 400; color: #222; box-shadow: 0 30px 90px rgba(0,0,0,0.25), 0 7px 20px rgba(0,0,0,0.05); }
body{background: #f7f7f7;}
.header{display: flex; justify-content: space-between; flex-wrap: wrap; position: fixed; top: 0; left: 0; width: 100%; z-index: 5000; transition: all 0.3s ease; padding: 40px 40px 0;background: linear-gradient(180deg,rgba(0,0,0,.78),transparent);}
.thelogo{transition: all 0.3s ease; }
.logo{width: 160px; padding: 0;}


.navigation{width: calc(100% - 200px); display: flex; justify-content: space-between; flex-wrap: wrap; flex-direction: row;}
.upperhead{width: 100%; height: 100%; display: flex; align-items: center; justify-content: flex-end; padding: 0 20px;}
.upperheadnav{color: rgba(255,255,255,1); margin-left: 30px; font-size: 16px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600;}
.upperheadcont{color: rgba(255,255,255,1); margin-left: 20px; font-size: 16px; font-weight: 300;}
.upperheadnav:hover{color: var(--green);}
.upperheadcont:hover{color: var(--green);}
.currentupperheadnav{color: rgba(255,255,255,1);}
.upperheadcontact{margin-left: 40px;}

 .upperheadcontact{position: absolute; top: 20px; right: 80px; display: flex; justify-content: flex-end; flex-wrap: wrap;}
        .upperheadcont{font-size: 24px;}
        
        .upperheadnav{border: 1px solid transparent; padding: 20px; margin: 0;}
        .upperheadnav:hover{border: 1px solid var(--green); color: #fff;}

.lowerhead{background: #fefefe; width: 100%; height: 50%; display: flex; flex-wrap: wrap; justify-content: flex-start; position: relative; display: none;}

.lowerheadnav{color: rgba(0,0,0,0.5); padding: 0 20px; font-size: 15px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; border-right: 1px solid rgba(0,0,0,0.1); display: flex; align-items: center; max-width: 20%; width: 20%;}

.dropnav{position: relative; display: flex; width: 25%;border-right: 1px solid rgba(0,0,0,0.1); }

.dropnav:hover .aboutdrop{display: block; opacity: 1;}
.aboutdrop{position: absolute; top: 100%; left:0%; background: #fefefe;border-top: 1px solid #f6f6f6; padding: 0; width: 100%; opacity: 0; transition: all 0.3s ease;}
.aboutdrop a{display: block;color: rgba(0,0,0,0.5); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; font-weight: 400; padding: 10px 20px;}
.aboutdrop a:hover{background: rgba(0,0,0,0.05);}

.lowerheadnav{background: linear-gradient(to right, #f6f6f6 50%, #fefefe 50%); background-size: 200% 100%; background-position: top right; transition: 0.3s all ease; position: relative;}
.lowerheadnav:hover{background-position: top left; color: var(--green);}

.aboutnav{color: rgba(0,0,0,0.5); padding: 0 20px; font-size: 15px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; border-right: 0px solid rgba(0,0,0,0.1); display: flex; align-items: center; width: 100%;}

/*
.lowerhead{background: #fefefe; width: 100%; height: 50%; display: flex; flex-wrap: wrap; justify-content: flex-start; position: relative; margin: 0; padding: 0;}
.lowerhead li{max-width: 25%; list-style-type: none; padding: 0 20px; border-right: 1px solid rgba(0,0,0,0.1); display: flex; align-items: center; }
.lowerheadnav{width: 100%; color: rgba(0,0,0,0.5); font-size: 15px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; }
.dropnav{position: relative; display: flex; width: 25%;border-right: 1px solid rgba(0,0,0,0.1); }

ul.lowerhead li:hover ul{display: block; opacity: 1;}
.aboutdrop{position: absolute; top: 100%; left:0%; background: #fefefe;border-top: 1px solid #f6f6f6; padding: 0; width: 100%; opacity: 0; transition: all 0.3s ease;}
.aboutdrop a{display: block;color: rgba(0,0,0,0.5); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; font-weight: 400; padding: 10px 20px;}
.aboutdrop a:hover{background: rgba(0,0,0,0.05);}

.lowerheadnav{background: linear-gradient(to right, #f6f6f6 50%, #fefefe 50%); background-size: 200% 100%; background-position: top right; transition: 0.3s all ease; position: relative;}
.lowerheadnav:hover{background-position: top left; color: var(--green);}

.aboutnav{color: rgba(0,0,0,0.5); padding: 0 20px; font-size: 15px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; border-right: 0px solid rgba(0,0,0,0.1); display: flex; align-items: center; width: 100%;}
*/


.currentnav{color: var(--green);}
.hidenav{display: none;}
.widenav{display: none;}
/*.lowerhead ul{display: flex; flex-wrap: wrap; justify-content: flex-start; height: 100%; align-content: center; margin: 0; padding: 0; list-style-type: none;}
.lowerhead ul li{border-right: 1px solid rgba(0,0,0,0.03); display: flex; justify-content: center; position: relative; margin: 0; padding: 0;}
.lowerheadnav{color: rgba(0,0,0,0.5); padding: 0 20px; font-size: 15px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; height: 100%}*/

.hero{width: 100%; padding: 0; height:100vh; overflow: hidden; position: relative; z-index: 5;}
.herocover{position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 40px 0; display: flex; justify-content: flex-start; align-content: flex-end; flex-wrap: wrap; box-sizing: border-box;}
.herocoverbg{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.0); z-index: 3; pointer-events: none;}
.shallowherocoverbg{position: absolute; top: 0; left: 0; width: 100%; height: 100%;  background: rgba(0,0,0,0.3);z-index: 3; pointer-events: none;}

.shallowherotext{padding: 20px 40px;}
.shallowherotext p{margin: 0;}
.heroheader{font-size: 30px; line-height: 45px; color: #fff; letter-spacing: 2px; font-family:quanticoregular, 'Barlow', sans-serif; text-transform: uppercase; }

.heroheader {	animation: text-focus-in 3s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;}
.herotext1{position: absolute; top: 0; left: 0; width: 100%; height:100%; background: rgba(0,0,0,0.3); z-index: 10; display: flex; justify-content: center; align-content: center; flex-wrap: wrap; }
.heroheader{font-size: 48px; text-align: center; line-height: 82px; letter-spacing: 2px; width: 100%;}
.shallowheroheader{font-size: 36px; text-align: left; line-height: 52px; letter-spacing: 2px; width: 100%;}
.vidimg {position: relative; width: 100%; height: 100%; top: 0;left: 0;z-index: 2;}
.vidimg img {object-fit: cover;height: 100%;width: 100%;position: absolute;top: 0;left: 0;} 


.topslide{object-position: top center;}
.centerslide{object-position: center center;}
.bottomslide{object-position: bottom center;}


.swiper-container {
      width: 100%;
      height: 100%;
    overflow: hidden;
    }
    .heroslide {
      text-align: center;
      font-size: 18px;
      background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100%;
    }    
    .objectfit img{width: 100%; height: 100%; object-fit: cover;}  
.swiper-buttons{position: absolute; bottom: 0; /*left: calc((100% - var(--wide)) / 2);*/ right:0; z-index: 10; display: flex; justify-content: flex-start; flex-wrap: wrap; opacity: 0;}
.logo-swiper-buttons{position: absolute; top: 0; right:0; z-index: 10; display: flex; justify-content: flex-start; flex-wrap: wrap;}
.swiper-button{padding: 5px 10px; color: var(--green); background: #f6f6f6; cursor: pointer; outline: none;}



.shallowhero{width: 100%; padding: 0; height: 55vh; overflow: hidden; position: relative;}

.shallowherotext{font-size: 60px; line-height: 50px; color: #fff; font-weight: 900; text-transform: uppercase; opacity: 0.8; position: relative; z-index: 4; margin-top: 80px;}
.shallowheroslide{width: 100%; height: 100%; position: absolute; top: 0; left: 0;}


.homecontent{width:100%; margin:0; padding: 40px 0; background: #fff;}
.homebody{display: flex; justify-content: space-between; flex-wrap: wrap; position: relative; background: var(--black); padding-top: 80px;padding-bottom: 0px;background: radial-gradient(circle at 24.1% 68.8%, rgb(50, 50, 50) 0%, rgb(0, 0, 0) 99.4%);
}
        .homeleft{width: 40%; padding-left: 40px; position: relative;}
        .homeleftsticky{position: sticky; top: 40px;}
        .homeline{position: absolute; top:0; left: 40px; width: 3px; height: 100%; background: var(--green); 
            background: linear-gradient(transparent, rgba(63, 185, 80, 1), rgba(103,162,38, 1), rgba(103,162,38, 0.3));}
        .homeright{width: 60%; padding-right: 40px;}
        .homeleft h1{font-size: 60px; color: #fff;}
        .hometext{color: #fff;}
        
        .hometextservices{width: 100%;}
.homeallservices{width: 33%; display: flex; justify-content: flex-end; align-items: flex-end; flex-wrap: wrap; display: none;}

/* CARDS */
@-webkit-keyframes text-focus-in{0%{-webkit-filter:blur(12px);filter:blur(12px);opacity:0}100%{-webkit-filter:blur(0);filter:blur(0);opacity:1}}@keyframes text-focus-in{0%{-webkit-filter:blur(12px);filter:blur(12px);opacity:0}100%{-webkit-filter:blur(0);filter:blur(0);opacity:1};text-shadow:#fff0 2px 3px 5px}:root{--card-height:40vw;--card-margin:4vw;--card-top-offset:1em;--outline-width:0px}#cards{padding-bottom:calc(var(--numcards) * var(--card-top-offset));margin-bottom:var(--card-margin)}#card_1{--index:1}#card_2{--index:2}#card_3{--index:3}#card_4{--index:4}#card_5{--index:5}.card{position:sticky;top:0;padding-top:calc(var(--index) * var(--card-top-offset))}.card__content{transform-origin:50% 0%;will-change:transform}.cardstext{width:80%;padding:0;color:#fff;margin:0 auto}.cardstext h1{color:#fff}#debug{position:fixed;top:1em;left:1em}#debug::after{content:" Show Debug";margin-left:1.5em;color:#fff;white-space:nowrap}#debug:checked~main{--outline-width:1px}.cardholder{width:80vw;margin:0 auto;text-align:center}#cards{list-style:none;outline:calc(var(--outline-width) * 10) solid hotpink;display:grid;grid-template-columns:1fr;grid-template-rows:repeat(var(--numcards),var(--card-height));gap:var(--card-margin)}.card{outline:var(--outline-width) solid lime}.card__content{box-shadow:0 0 76px 4px rgb(6 122 33 / .5);background:#fff;color:#0a0507;border-radius:1em;overflow:hidden;display:flex}.card__content>div{width:80%;text-align:left}.cardimage{grid-area:img;overflow:hidden;height:400px;width:40%}.cardimage img{width:100%;height:100%;object-fit:cover}@supports (animation-timeline:view()){.card{--index0:calc(var(--index) - 1);--reverse-index:calc(var(--numcards) - var(--index0));--reverse-index0:calc(var(--reverse-index) - 1)}@keyframes scale{to{transform:scale(calc(1.1 - calc(0.1 * var(--reverse-index))))}}#cards{--numcards:5;view-timeline-name:--cards-element-scrolls-in-body}.card__content{--start-range:calc(var(--index0) / var(--numcards) * 100%);--end-range:calc((var(--index)) / var(--numcards) * 100%);animation:linear scale forwards;animation-timeline:--cards-element-scrolls-in-body;animation-range:exit-crossing var(--start-range) exit-crossing var(--end-range)}}

.card h1, .card h2, .card h3, .card h4, .card h5, .card h6{color: #1a1a1a;}
.homeservices{background: #F3F3F3; position: relative;}
        .innerservices{padding: 150px 40px 0 60px;}
        .serviceshead{position: absolute; top: 0; left: 0; padding: 0 0 0 40px;}
        .servicesheader{padding: 80px 0 40px 00px; margin-left: -10px;}
        .servicesheadtext{font-size: 32px;font-family:quanticoregular, 'Barlow', sans-serif; text-transform: uppercase; background: var(--green); color: #fff; padding: 5px;}
        .topline{position: absolute; top:0; left: 40px; width: 3px; height: 65px; background: var(--green);}
        .underline{position: absolute; top:150px; left: 40px; width: 3px; height: 70px; background: var(--green);}
        .underlinepower{position: absolute; bottom: -48px; left: -19px; width: 42px; z-index: 10000;}
.splitvideocontent{width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: flex-start; margin: 0; padding-top: 40px;}
.splittext{width: 50%;}
.splitvideo{width: 50%;}
.splitheading{margin: 0 0 10px;}

.arrowlink{display: flex; justify-content: flex-start; flex-wrap: wrap; align-items: center;background: var(--green); }
.arrowlink .arrowtext{font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: #fff; padding: 0 0 0 10px;}
.arrowlink .arrow{background: #f6f6f6; color: var(--green); margin-left: 10px; font-size: 18px; padding: 5px 10px;}



        
        .clientsheadtext{font-size: 32px;font-family:quanticoregular, 'Barlow', sans-serif; text-transform: uppercase; background: var(--green); color: #fff; padding: 5px; display: inline-block; margin-bottom: 20px;}

.buffer{width: 100%; margin: 10px 0 20px; height: 3px; position: relative;}
.greenbuffer{width: 150px; background: var(--green); position: absolute; top: 0; left: 0; height: 0px;}
.whitebuffer{width: 150px; background: #fff; position: absolute; top: 0; left: 0; height: 3px;}
.smallgreenbuffer{width: 50px; background: var(--green); position: absolute; top: 0; left: 0; height: 3px;}
.smallwhitebuffer{width: 50px; background: #fff; position: absolute; top: 0; left: 0; height: 3px;}

.homegridholder{width: 100%; padding: 0 40px; background: #f6f6f6; display: flex; justify-content: space-between; flex-wrap: wrap; }
.projectgridholder{width: 100%; padding: 0; display: flex; justify-content: space-between; flex-wrap: wrap; }
.teamgridholder{width: 100%; padding: 0; background: #f6f6f6; display: flex; justify-content: space-between; flex-wrap: wrap; }


.homegrid{width: 100%; display: grid; grid-gap: 30px; grid-template-columns: 1fr 1fr 1fr; width: var(--wide); margin: 0 auto;}
.portalgrid{width: 100%; display: grid; grid-gap: 30px; grid-template-columns: 1fr 1fr; width: var(--wide); margin: 0 auto;}
.teamgrid{width: 100%; display: grid; grid-gap: 30px; grid-template-columns: 1fr 1fr 1fr 1fr; width: var(--wide); margin: 0 auto;}


.homegridintro{background: #fff; padding: 20px;}

.eachhomegrid{background: #fff; transition: all 300ms ease;  overflow: hidden; position: relative; display: flex; justify-content: flex-start;  min-height: 400px; padding-bottom: 40px;}
.eachhomegridportal{min-height: 200px;}

.eachteamgrid{background: #fff; transition: all 300ms ease;  overflow: hidden; position: relative; display: flex; justify-content: flex-start;  min-height: 300px; padding-bottom: 40px;}

.eachhomegrid:hover{box-shadow:  0rem 0.875rem 1.5rem 0rem rgba(32,46,66,0.059);}
.eachgridcover{width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 5; transition: all 0.3s ease; background: linear-gradient(180deg,rgba(22,22,22,.78),transparent);}
.eachhomegrid:hover .eachgridcover{height: 500%;}
.eachgridimage{width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 4; transition: all 0.3s ease;}
.eachgridimage img{object-fit: cover; width: 100%; height: 100%;}
.eachhomegrid:hover .eachgridimage{transform: scale(1.1,1.1);}
.eachgridcontent{position: relative;z-index: 10;padding: 20px; }
.eachgridtitle{transform:translateY(50px); transition: all 0.5s ease;}
.eachgridtitlename{text-transform: uppercase; font-size: 24px; line-height: 26px; color: #fff; font-family:quanticoregular, 'Barlow', sans-serif; font-weight: 400; margin-bottom: 10px;}
.eachgridtitledate{font-size: 14px; color: #fff;}
.eachhomegrid:hover .eachgridtitle{transform:translateY(0px); }
.eachgridlist{font-weight: 300; color: rgba(255,255,255,1); font-style: italic; font-size: 14px; transform:translateY(100px); transition: all 0.5s ease; opacity: 0;}
.eachhomegrid:hover .eachgridlist{transform:translateY(0px); opacity: 1;}
.eachgridlink{position: absolute; bottom: 0; right: 0; width: auto; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center;background: rgba(80,80,85,0.7); z-index: 10; transition: all 0.3s ease; opacity: 0; transform: translateX(100%); transition: all 0.5s ease; display: none;}

.eachgridlink .arrowtext{font-size: 12px; text-transform: uppercase; font-weight: 600; letter-spacing: 1px; color:#fff; padding: 0 0 0 20px;}
.eachgridlink .arrow{background: #fff; color: var(--green); margin-left: 30px; font-size: 18px; padding: 10px;}
.eachhomegrid:hover .eachgridlink{opacity: 1;transform: translateX(0)}

.eachgridlink:hover{background: #fff;}
.eachgridlink:hover .arrowtext{color: var(--green);}

.icongridholder{width: 100%; padding: 40px 0 40px; background: #f6f6f6; display: flex; justify-content: space-between; flex-wrap: wrap; }
.icongrid{width: 100%; display: grid; grid-gap: 30px; grid-template-columns: 1fr 1fr; width: var(--wide); margin: 0 auto;}
.eachicongridicon{width: 50px;}

.eachportalgrid{background: #fff; transition: all 300ms ease;  overflow: hidden; position: relative; display: flex; justify-content: flex-start; align-items: center; min-height: 200px;}
.eachportalgrid:hover{box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;}
.eachportalgridcontent{position: relative;z-index: 10;padding: 20px; }
.eachportalgridtitle{transform:translateY(0px); transition: all 0.5s ease;}
.eachportalgridtitlename{text-transform: uppercase; font-size: 24px; line-height: 26px; color: var(--black); font-family:quanticoregular, 'Barlow', sans-serif; font-weight: 400; margin-bottom: 10px;}
.eachportalgridlist{font-size: 14px; color: var(--black);}

.dviportalgrid{background: #fff url(../img/dviwatermarksmall.png) center center no-repeat;}
.priotoportalgrid{background: #fff url(../img/priotowatermarksmall.png) center center no-repeat;}

.eachportalgridicon{position: absolute; bottom: 20px; right: 20px; color: var(--black);}

.risklink{padding: 10px 25px 10px; text-transform: uppercase; color: #fff; font-size: 14px; font-weight: 400; letter-spacing: 0px; border-radius: 0px; background: var(--green); display: inline-block;}
.risklink:hover{opacity: 0.7;}

.eachteamgridcaption{position: absolute; bottom: 0; left: 0; padding: 10px 20px; background: rgba(103,162,38,1); opacity: 0; transform: translateX(-20%); z-index: 6; transition: all 0.5s ease;}
.eachteamgrid:hover .eachteamgridcaption{opacity: 1; transform: translateX(0);}
.eachteamgridtitle{color: #fff; font-size: 18px; font-family:quanticoregular, 'Barlow', sans-serif; font-weight: 400; text-transform: uppercase;}
.eachteamgridjob{color: rgba(255,255,255,0.8); }
.eachteamgridcover{width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 5; transition: all 0.3s ease; background: linear-gradient(180deg,rgba(22,22,22,.78),transparent); opacity: 0}
.eachteamgrid:hover .eachteamgridcover{opacity: 0;}
/*
.eachhomegrid{background: #fff; transition: all 300ms ease;  overflow: hidden; position: relative; height: 400px;}
.eachgridtitle{position: absolute; bottom: -15%; left: 0; transform: rotate(270deg); transform-origin: 0% 0%; outline: 1px solid red; width: 400px;}
*/


.anotherswiper{z-index: 44 !important;}
.homeservices{width: 100%; background: linear-gradient(to right, rgba(49,30,75,1) 0%,rgba(39,24,60,1) 300px, rgba(34,21,53,1) 100%); background: var(--grey); background: linear-gradient(var(--grey),#676766); background: #fff; position: relative; padding: 40px 40px; outline: 0px solid red;}



/* OLD SERVICES CAROUSEL
.serviceslide{display: flex; justify-content: flex-start; align-content: center; flex-direction: column; flex-wrap: wrap; text-align: center; padding: 0px 40px 80px; position: relative; outline: 0px solid red;}
.homeserviceimage{width: 100%; margin-bottom: 20px;}
.homeservicetitle{font-weight: 700; font-size: 24px; color: var(--pink); margin-bottom: 20px;}
.homeservicebody{font-weight: 400; color: #fff; font-size: 18px; margin-bottom: 20px; min-height: 50px;}

.homeservicelink{text-align: center; outline: 0px solid red; display: flex; justify-content: center; flex-wrap: wrap; width: 100%; position: absolute; bottom: 40px; left: 0;}
*/

.aboutlink{display: block; padding: 20px 0 40px;}

/* OLD SERVICES CAROUSEL*/
.eachcarousel{background: var(--grey); background: rgba(49,30,75,0.8); background: rgba(234,94,150,1); transition: all 300ms ease;  overflow: hidden; position: relative; display: flex; justify-content: flex-start;  min-height: 400px; padding-bottom: 40px;}

.eachcarousel:hover{box-shadow:  0rem 0.875rem 1.5rem 0rem rgba(32,46,66,0.059);}
.eachcarouselcover{width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 5; transition: all 0.3s ease; background: linear-gradient(180deg,rgba(22,22,22,.78),transparent)}
.eachcarouselplus{width: 100%; height: 100%; position: absolute; top: 0; left: 0; transition: all 0.3s ease;}

.carouselpluswhite{z-index: 6; opacity: 1;}
.carouselpluspink{z-index: 5; opacity: 0;}



.eachcarousel:hover .eachcarouselcover{height: 500%;}
.eachcarousel:hover .eachcarouselplus{transform: rotate(0deg) scale(1.1,1.1);}
.eachcarouselimage{width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 4; transition: all 0.3s ease; filter: grayscale(0);}
.eachcarouselimage img{object-fit: cover; width: 100%; height: 100%; }
.eachcarousel:hover .eachcarouselimage{transform: scale(1.1,1.1);filter: grayscale(1) blur(10px)}
.eachcarousel:hover{background: rgba(234,94,150,0.2);}
.eachcarouselcontent{position: relative;z-index: 10;padding: 20px; display: flex; flex-direction: column; justify-content: space-between; flex-wrap: wrap;}
.eachcarouseltitle{transform:translateY(50px); transition: all 0.5s ease;}
.eachcarouseltitlename{text-transform: uppercase; font-size: 24px; line-height: 26px; color: #fff; font-weight: 400; margin-bottom: 10px;}
.eachcarouseltitledate{font-size: 14px; color: #fff;}
.eachcarouseltitleservice{font-size: 14px; color: #fff; opacity: 0; transition: 0.3s all ease;}
.eachcarousel:hover .eachcarouseltitle{transform:translateY(20px);}
.eachcarousel:hover .eachcarouseltitlename{color: var(--pink);}
.eachcarousel:hover .eachcarouseltitleservice{opacity: 1; color: var(--pink);}
.eachcarousel:hover .eachcarousellist{transform:translateY(0px); opacity: 1;color: var(--pink);}

.eachcarouselplus{width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 6; transition: all 0.3s ease; display: flex; justify-content: center; align-content: center; flex-wrap: wrap;}
.eachcarouselplus img{width: 90px}

.eachcarousellist{font-weight: 300; color: rgba(255,255,255,1); font-style: italic; font-size: 14px; transform:translateY(100px); transition: all 0.5s ease; opacity: 0;}
.eachcarousel:hover .eachcarousellist{transform:translateY(20px); opacity: 1;}

.eachcarousel:hover .carouselpluswhite{z-index: 5; opacity: 0;}
.eachcarousel:hover .carouselpluspink{z-index: 6; opacity: 1;}



.caseboxes{width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; padding: 40px 15%;}
.caseboxestitle{width: 100%; font-size: 18px; padding-bottom: 20px; font-weight: 600;}

.casebox{width: calc(33.333333% - 10px);}
.caseboximage{width: 100%; height: 200px; overflow: hidden; margin-bottom: 20px;}
.caseboximage img{width: 100%; height: 100%; object-fit: cover;}
.caseboxtitle{font-size: 18px; color: var(--black); transition: all 0.3s ease; margin-bottom: 10px;}
.caseboxtext{font-size: 24px; color: var(--accent); font-weight: 600; transition: all 0.3s ease;}
.casebox:hover img{transform: scale(1.1,1.1);}
.casebox:hover .caseboxtext{color: var(--main);}

.caseboxesfooter{width: 100%; display: flex; justify-content: flex-end; flex-wrap: wrap; align-items: center; padding-top: 40px;}
.caseboxesfooter a{position: relative;}
.caseboxesfooter a i{color: var(--accent);}
/*____________________________*/


.homestrip{width: 100%; display: flex; justify-content: flex-start; flex-wrap: wrap; padding: 50px 5%; position: relative; margin: 40px 0;}
.stripgrey{position: absolute; top: 0; left: 0; width: 33%; height: 100%; background: #fff; background: rgba(0,0,0,0); z-index: 3;}
.stripimage{position: absolute; top: 0; right: 0; width: 67%; height: 100%; background: #fff;z-index: 3;}
.stripimage img{width: 100%; height: 100%; object-fit: cover;}

.stripbox{width: 70%; background: rgba(255,255,255,1); padding: 40px; z-index: 5; position: relative; color: #1a1a1a;}
.stripbox h2{color: #1a1a1a;}
.stripnav{position: absolute; top: 0; right: 0; background: #f6f6f6; display: flex; justify-content: flex-end; z-index: 10000; padding: 10px;}
.stripnav i{font-size: 24px; color: #67A226; cursor: pointer; transition: all 0.3s ease;}
.stripnav i:hover{opacity: 0.5;}
.stripnavbuffer{width: 10px;}

.reversehomestrip{justify-content: flex-end;}
.reversestripgrey{position: absolute; top: 0; right: 0; width: 33%; height: 100%; background: #f6f6f6; z-index: 3;}
.reversestripimage{position: absolute; top: 0; left: 0; width: 67%; height: 100%; background: #f6f6f6;z-index: 3;}
.reversestripimage img{width: 100%; height: 100%; object-fit: cover; object-position: top center;}

.stripslidebox{width: 70%; background: rgba(255,255,255,1); padding: 0px; z-index: 5;}
.stripslide{width: 100%; padding: 40px; box-sizing: border-box;}


.hometest{width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; overflow: hidden; padding: 40px;}
.hometestleft{width: 100%; max-height: 100%; position: relative; background: var(--green);  background: linear-gradient(to bottom,var(--green),#52821e);}
.pslide{width: 100%; max-width: 100%; min-height: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; box-sizing: border-box;}
.hometestleftcover{position: absolute; top: 0; left: 0; width: 67%; height: 100%; z-index: 3; background: rgba(0,0,0,0.0) url(../img/watermark.png) center center no-repeat;}
.hometestleftimage{width: 33%; z-index: 2;}
.hometestleftimage img{width: 100%; height: 100%; object-fit: cover; filter: grayscale(1);}
.hometestleftcontent{position: relative; z-index: 4;}
.hometestleftswipecontent{position: relative; z-index: 4; color: #fff; width: 63%; padding: 40px;}
.hometestleftcontent h2{color: #fff;}
.hometestleftswipecontent h2{color: #fff;}
.hometestleftswipecontent h3{color: #fff;}



.projectlink{ width: auto; display: inline-block;}
.project-swiper {width: 100%;overflow: hidden;}
      
 
.project-buttons{position: absolute; bottom: 0; /*left: calc((100% - var(--wide)) / 2);*/ right:0; z-index: 10; display: flex; justify-content: flex-start; flex-wrap: wrap;}
.project-button{padding: 5px 10px; color: var(--green); background: #f6f6f6; cursor: pointer; outline: none;}


.hometestright{display: none; width: 33%; background: rgba(103,162,38,0.3);}
.hometestrighttext{padding: 20px;}
.hometestrighttext h2{color: #1a1a1a;}

.homeproject{width: 100%; height: 200px; position: relative;}
.homeprojecttitle{position: absolute; top: 20px; left: 20px; z-index: 5;}
.homeprojectimage{position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3;}
.homeprojectcover{position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; background: rgba(0,0,0,0.6);}

.projectlinkholder{display: flex; justify-content: flex-start; flex-wrap: wrap;}
.projectlink{padding: 8px 12px 8px; text-transform: uppercase; color: var(--green); background: #fff; font-size: 14px; font-weight: 400; letter-spacing: 0px; border-radius: 0px; transition: all 0.3s ease;} 
.projectlink:hover{opacity: 0.7;}

.parrowlink{display: flex; justify-content: flex-start; flex-wrap: wrap; align-items: center;background: var(--green); background: rgba(255,255,255,0.5); }
.parrowlink .parrowtext{font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--green); padding: 0 0 0 10px;}
.parrowlink .parrow{background: rgba(255,255,255,0.5); color: var(--green); margin-left: 10px; font-size: 18px; padding: 5px 10px; transition: all 0.3s ease;}
.parrowlink:hover{background: rgba(255,255,255,1);}
.parrowlink:hover .parrow{background: rgba(255,255,255,1);}

.barrowlink{display: flex; justify-content: flex-start; flex-wrap: wrap; align-items: center;background: var(--green); background: rgba(103,162,38,0.5); }
.barrowlink .barrowtext{font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: #fff; padding: 0 0 0 10px;}
.barrowlink .barrow{background: rgba(255,255,255,0.5); color: var(--green); margin-left: 10px; font-size: 18px; padding: 5px 10px; transition: all 0.3s ease;}
.barrowlink:hover{background: rgba(103,162,38,1);}
.barrowlink:hover .parrow{background: rgba(255,255,255,1);}
.eachnewsarchive{color: #1a1a1a;}
.eachnewsarchive:hover{color: rgba(26,26,26,0.5);}
.eachnewsarchivetitle{font-family:quanticoregular, 'Barlow', sans-serif; font-size: 16px; text-transform: uppercase; margin-bottom: 5px;}
.eachnewsarchivedate{font-family:'Barlow', sans-serif; text-transform: uppercase;}

.footer{width: 100%; font-size: 12px; background: linear-gradient(to right,#505055,#06101C);background: var(--black); color: #fff; position: relative; overflow: hidden;}
.innerfooter{display: flex; justify-content: space-between; flex-wrap: wrap; width: var(--wide); margin: 0 auto; padding: 40px;}
.footleft{width: 30%; border-right: 1px solid rgba(255,255,255,0.2); padding: 20px 20px 20px 0;}
.footleft img{width: 200px;}
.footright img{width: 200px;}
.footmiddle img{width: 120px;}
.footmiddle{width: 30%; border-right: 1px solid rgba(255,255,255,0.2); padding: 20px;}
.footright{width: 40%; padding: 20px 0 20px 20px;}
.footbottom{width: 100%; text-align: left; border-top: 1px solid rgba(255,255,255,0.2); padding-top: 20px; margin-top: 20px;}

.foothead{width: 100%; font-size: 24px; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; font-weight: 800; font-family:quanticoregular, 'Barlow', sans-serif; }

.footnav{width: 100%; margin-bottom: 20px;}
.footnavflex{width: 100%; display: flex; justify-content: flex-start; flex-wrap: wrap; margin-bottom: 20px;}
.footnav a{display: block; margin-bottom: 2px;}
.footnavlink{color: #fff;}
.footnavlink:hover{color: var(--green);}

.leftfootnav{display: flex; justify-content: flex-start; flex-wrap: wrap; margin-bottom: 20px; display: none;}
.leftfootnav span{color: #fff; margin: 0 5px;}
.leftfootnav a{color: #fff;}
.leftfootnav a:hover{color: var(--green);}


.coreservice{margin-bottom: 15px !important;}
.coreservicetitle{font-size: 16px; text-transform: uppercase; font-weight: 600; color: #fff; margin-bottom: 1px;transition: all 0.3s ease; }
.coreservicesub{margin-bottom: 5px; font-style: italic; color: rgba(255,255,255,0.5); color: var(--green); font-size: 14px; opacity: 0; transform: translateX(-20px); transition: all 0.5s ease; display: none;}
.coreservice:hover .coreservicesub{transform: translateX(0); opacity: 0}
.coreservicetitle:hover{color: var(--green);}

.footersocial{display: flex; justify-content: flex-start; flex-wrap: wrap;}
.footersocial a{color: #fff; margin-right: 20px; font-size: 16px;}
.footersocial a:hover{ }
.footersocial a.gplink:hover{color: #ff0000;opacity: 1;}
.footersocial a.twlink:hover{color: #55acee;opacity: 1;}
.footersocial a.lilink:hover{color: #0077B5;opacity: 1;}
.footersocial a.fblink:hover{color: #3b5998;opacity: 1;}
.footersocial a.instalink:hover{color: #DD2A7B;opacity: 1;}
.copy span{margin: 0 5px;}
.copy a{color: var(--green); font-weight: 700;}

.copyright{padding-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,0.2); margin-bottom: 15px; display: inline-block;}
.vat{color: #ccc; margin-bottom: 0;}

.footerimagelink:hover{opacity: 0.6;}

.homelogos{width: 100%; background: #f6f6f6;}
.innerhomelogos{width: var(--wide); padding: 40px; margin: 0 auto; position: relative;}
.logogrid{
    display: grid;
    grid-gap: 40px 97px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
.logogrid img{opacity: 0.8;}
.innerhomelogos h3{margin-bottom: 0;}
.innerhomelogos p{font-style: italic; color: rgba(0,0,0,0.3); margin-bottom: 20px;}
.bodyh{margin: 30px 0 20px 0; font-weight: 500; letter-spacing: 0px;}


.breadcrumbs{font-size: 12px; width: 100%; margin:0; padding: 20px 40px;  background: rgba(255,255,255,0.6); display: none;}
.breadcrumbs a{color: #676767;}
.breadcrumbs span{margin: 0 5px;}

.accgrid{
    display: grid;
    grid-gap: 40px 97px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
.accgrid img{opacity: 0.8;}

.acc-slide{display: flex; justify-content: center; align-items: center; height: auto !important;}
.acc-slide img{max-width: 200px; max-height: 100px;}

.contactbar{width: 100%; padding: 40px; position: relative;}
.contactbarh{margin: 0; color: #fff; width: calc(100% - 200px);}
.contactbarlink{background: #fff; padding: 10px 25px; text-transform: uppercase; font-size: 14px; font-weight: 700; letter-spacing: 0px; border-radius: 18px;}
.contactbarlink:hover{background: rgba(255,255,255,0.5); color: #fff;}
.contactbarcontent{position: relative; z-index: 3; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center;}
.contactbarimage{position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; filter: grayscale(1); opacity: 0.5;}
.contactbarcover{position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; background: rgba(103,162,38, 0.9);}

.contactbarcarezapp{width: calc(100% - 200px);}
.contactbarcarezapp h3{color: #fff;}
.contactbarcarezapp p{color: #fff; font-size: 12px;}

.featuredlink{background: var(--green); color: #fff; padding: 10px 25px; text-transform: uppercase; font-size: 14px; font-weight: 700; letter-spacing: 0px; border-radius: 18px;}
.featuredlink:hover{background: #446b19;}

.whytable{width: 100%; margin: 40px auto;}
.whytablehead{font-weight: 600; font-family: quanticoregular, 'Barlow', sans-serif; font-size: 20px; text-transform: uppercase; color: #fff; display: flex; justify-content: space-between; flex-wrap: wrap;}
.whytableheadleft{width: calc(50% - 2px);padding: 20px; background: #67A226;}
.whytableheadright{width: calc(50% - 2px);padding: 20px; background: #67A226;}

.eachwhychoose{width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap;}
.lightwhychoose{background: rgba(255,255,255,0.1);}
.darkwhychoose{background: rgba(255,255,255,0.2);}

.whychoose{ width: calc(50% - 2px); padding: 20px; position: relative;}

.whychooseanswer{width: calc(50% - 2px); padding: 20px; }
.whychoosearrow{position: absolute; font-size: 24px; top: 0; right:-13px; width: 20px; height: 100%; text-align: center; display: flex; justify-content: center; align-items: center; color: #67A226; display: none;}

.singleimage{width: 100%; margin: 30px auto; display: flex; justify-content: flex-start; flex-wrap: wrap;}
.singleimage img{width: 100%;}
.halfsingleimagewidth img{width: 50%;}

.centersingleimagealign{justify-content: center;}
.rightsingleimagealign{justify-content: flex-end;}
.leftsingleimagealign{justify-content: flex-start;}


.sectorsides{width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; background: #fff;}
.eachsectorside{width: 49%; padding: 40px;}
.eachsectorside h4{color: #67A226}
/* ==========================================================================
   MODAL
   ========================================================================== */
.pdftrigger{color: var(--green); cursor: pointer; font-weight: 600;}
.modal {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 0vh;
  background-color: transparent;
  overflow: hidden;
  transition: background-color 0.25s ease;
  z-index: 1200001;
}
.modal.open {
  position: fixed;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  transition: background-color 0.25s;
}
.modal.open > .content-wrapper {
  transform: scale(1);
    max-height: 90vh; overflow: auto;
}
.modal .content-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 80%;
    max-width: 800px;
  margin: 0;
  padding: 2.5rem;
  background:#f7f7f7;
  border-radius: 0.3125rem;
  box-shadow: 0 0 2.5rem rgba(0, 0, 0, 0.5);
  transform: scale(0);
  transition: transform 0.25s;
  transition-delay: 0.15s;
}
.modal .content-wrapper .close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  background-color: transparent;
  font-size: 1.5rem;
  transition: 0.25s linear;
}
.modal .content-wrapper .close:before, .modal .content-wrapper .close:after {
  position: absolute;
  content: '';
  width: 1.25rem;
  height: 0.125rem;
  background-color: black;
}
.modal .content-wrapper .close:before {
  transform: rotate(-45deg);
}
.modal .content-wrapper .close:after {
  transform: rotate(45deg);
}
.modal .content-wrapper .close:hover {
  transform: rotate(360deg);
}
.modal .content-wrapper .close:hover:before, .modal .content-wrapper .close:hover:after {
  background-color: tomato;
}
.modal .content-wrapper .modal-header {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  padding: 0 0 1.25rem;
}
.modal .content-wrapper .modal-header h2 {
  font-size: 1.5rem;
  font-weight: bold;
}
.modal .content-wrapper .modal-content {
  position: relative;
  display: flex; flex-wrap: wrap;
}
.modal .content-wrapper .modal-content p {
  font-size: 0.875rem;
  line-height: 1.75;
    width: 100%;
}
.modal .content-wrapper .modal-footer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  margin: 0;
  padding: 1.875rem 0 0;
}
.modal .content-wrapper .modal-footer .action {
  position: relative;
  margin-left: 0.625rem;
  padding: 0.625rem 1.25rem;
  border: none;
  background-color: slategray;
  border-radius: 0.25rem;
  color: white;
  font-size: 1rem;
  font-weight: 600;
    text-transform: uppercase;
  overflow: hidden;
  z-index: 1;
}
.modal .content-wrapper .modal-footer .action:before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.2);
  transition: width 0.25s;
  z-index: 0;
}
.modal .content-wrapper .modal-footer .action:first-child {
  background-color: #2ecc71;
}
.modal .content-wrapper .modal-footer .action:last-child {
  background-color: var(--green);
}
.modal .content-wrapper .modal-footer .action:hover:before {
  width: 100%;
}

.modal .content-wrapper iframe{width: 100% !important;}
/* ==========================================================================
   NEWS
   ========================================================================== */
.newstextcontent{width: 100%;}
.newspanelcontent{width:calc(100% + 40px); margin: 40px 0 40px -20px; box-shadow: 0 30px 90px rgba(0,0,0,0.25), 0 7px 20px rgba(0,0,0,0.05); padding: 40px; font-family:quanticoregular, 'Barlow', sans-serif; text-transform: uppercase}
.newsimagecontent{width:calc(100% + 40px); margin: 40px 0 40px -20px; box-shadow: 0 30px 90px rgba(0,0,0,0.25), 0 7px 20px rgba(0,0,0,0.05);}
/*
.newsprojectcontent{width:110%; margin: 60px 0 60px -5%; box-shadow: 0 30px 90px rgba(0,0,0,0.25), 0 7px 20px rgba(0,0,0,0.05); padding: 20px;}
*/
.newsprojectcontent{margin: 20px 0; width: 100%; background: rgba(255,255,255,0.7); padding: 20px;}
.newssublinks{width:100%; margin: 60px 0 60px 0; box-shadow: 0 30px 90px rgba(0,0,0,0.25), 0 7px 20px rgba(0,0,0,0.05); padding: 0; position: relative;}
.newssubimage{position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; filter: grayscale(1); opacity: 0.2;}
.newssubcontent{padding: 20px; position: relative; z-index: 5;}

.bannerheader{color: #1a1a1a;}
.bannerlink{margin-bottom: 10px; transition: all 0.3s ease;}
.bannerlink:hover{padding-left: 10px;}
.bannerlink a{color: #1a1a1a}




.newsboxes{width:calc(100% - 80px); max-width: 1420px; margin: 0 auto; padding-bottom: 40px; display: grid;  
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-rows: minmax(300px, auto);  
  grid-gap: 20px;  }

.newsbox{box-shadow: 0 30px 90px rgba(0,0,0,0.25), 0 7px 20px rgba(0,0,0,0.05);  background:  #fff; position: relative; padding-bottom: 40px; padding-top: 225px; overflow: hidden;}
.newsbox:hover .homeboximage img{transform: scale(1.2,1.2);}
.newsbox:hover .homeboxlink{background-position: 0 -100%; color: #fff; letter-spacing: 2px;}
.newsbox:hover .hblightlink{background-position: 0 -100%; color: #004275;}
.embed-container {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 0;
	height: 0;
}
.embed-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
    border: none;
}

.modalembedcontainer{width: 100%; height: auto;}
.eachmedia{background: #fff; min-width: 55%; width: 100%; position: relative; margin-bottom: 15px; display: block; overflow: hidden;}
.eachmediaimage{width: 100%; position: absolute; top: 0; left: 0; height: 100%; overflow: hidden; z-index: 2; transition: 0.3s all ease;}
.eachmediacover{position: absolute; z-index: 3; top: 0; left: 0; right: 0; bottom: 0;background: rgba(254,218,106,0.4); transition: all 0.3s ease;}
.eachmediaimage img{width: 100%; height: 100%; object-fit: cover;}
.eachmediacontent{position: relative; z-index: 5; width:100%; height: 100%; text-align: right; padding: 20px 20px 20px 100px;}
.eachmediadetails{width: 50%; margin-left: 50%; padding: 40px 20px; text-align: left; position: relative; background: #fff;}
.eachmedianame{font-size: 32px; font-weight: 900; text-transform: uppercase; margin-bottom: 5px;color: #fff;}

.eachmediajob{font-weight: 400; font-size: 14px; opacity: 1;color: #fff; display: none;}
.eachmedialink{font-weight: 300; font-size: 12px;  color: #1a1a1a;}

.eachmedia:hover{opacity: 1; box-shadow: 0 30px 90px rgba(0,0,0,0.25), 0 7px 20px rgba(0,0,0,0.05);}
.eachmedia:hover .eachmediaimage img{transform: scale(1.1,1.1);}
.eachmediadate{position: absolute; top: 0; left: 0; background: #1a1a1a; z-index: 5; text-transform: uppercase; padding: 10px 20px; text-align: center;}
.mediaday{font-size: 14px; display: block; margin: 0; font-weight: 800; color: #fff;}
.mediamonth{font-size: 16px; display: block; margin: 0; font-weight: 400; color: #fff;}
.mediayear{font-size: 14px; display: block; margin: 0; font-weight: 800; color: #fff;}

.newsheader{display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center;}
.newsdate{display: inline-block; padding: 10px 20px; color: #fff; background: #1a1a1a; font-size: 14px; text-align: center; width: 80px;}
.newsheading{margin: 40px 0 10px;}
.newsheading span{color: #67A226;}
.newsh1{width: calc(100% - 100px);}
.newsh1 h1{margin: 0; padding: 0;}
.tweeter{width:500px; max-width: 100%; margin: 60px auto; box-shadow: 0 30px 90px rgba(0,0,0,0.25), 0 7px 20px rgba(0,0,0,0.05);}
.fillbg{background: rgba(0,0,0,0.9);}
/* ==========================================================================
   SERVICES
   ========================================================================== */
.servicesgrid{width: 100%; 

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-auto-rows: minmax(300px, auto);
    grid-gap: 40px;
}

.eachservice{background: #fff; min-width: 55%; width: 100%; position: relative; margin-bottom: 15px; display: block; }
.eachserviceimage{width: 100%; position: absolute; top: 0; left: 0; height: 100%; overflow: hidden; z-index: 4;}
.eachserviceimage img{width: 100%; height: 100%; object-fit: cover;}
.eachservicedetails{width: 63%; padding: 40px 20px; text-align: left; position: relative; background: rgba(255,255,255,0.9); z-index: 5; transition: all 0.3s ease;}
.eachservicename{font-size: 18px; font-weight: 600; text-transform: uppercase; margin-bottom: 5px;color: #1a1a1a;}
.eachserviceposter{font-size: 12px; font-weight: 400; }
.eachservicejob{font-weight: 400; font-size: 12px; opacity: 0.6;color: #1a1a1a;}
.eachservicelink{font-weight: 300; font-size: 12px;  color: #1a1a1a;}
.eachservice:hover{opacity: 1; box-shadow: 0 30px 90px rgba(0,0,0,0.25), 0 7px 20px rgba(0,0,0,0.05);}
.eachservice:hover .eachservicedetails{background: rgba(255,255,255,1);}
.leftdetails{margin: 0 37% 0 0;}
.rightdetails{margin: 0 0 0 37%;}


.eachservicegrid{background: #fff; box-shadow: 0 15px 45px rgba(0,0,0,0.25), 0 7px 10px rgba(0,0,0,0.05);transition: all 300ms ease;  overflow: hidden; position: relative; border-radius: 5px; width: 100%; height: 300px; display: block; margin-bottom: 20px;}
.eachservicegrid:hover{box-shadow:  0rem 0.875rem 1.5rem 0rem rgba(32,46,66,0.059);}
.eachservicecover{width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 5; background: rgba(124,156,203,0.5); transition: all 0.3s ease;}
.eachserviceimg{width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 4; transition: all 0.3s ease;}
.eachserviceimg img{object-fit: cover; width: 100%; height: 100%;}
.eachservicegrid:hover .eachserviceimg{transform: scale(1.1,1.1);}
.eachservicetitle{position: absolute; top: 20px; left: 20px; width: calc(100% - 40px); font-weight: 500; text-transform: uppercase; letter-spacing: 2px; z-index: 10; font-size: 24px; padding: 0 10px; color: #fff; background: rgba(124,156,203,0.9); border-radius: 2px;}
.eachservicetitle{position: absolute; top: 0; left: 0; width: calc(100% - 0px); font-weight: 500; text-transform: uppercase; letter-spacing: 2px; z-index: 10; font-size: 20px; padding: 10px 20px; color: #fff; background: rgba(124,156,203,0.9); background: rgba(0,48,64,0.3); border-radius: 2px;}
.eachservicetext{position: absolute; bottom: 20px; left: 20px; width: calc(100% - 40px); color: #fff; font-weight: 400; z-index: 10; font-size: 16px; transition: all 0.3s ease;}
.eachservicelink{position: absolute; bottom: 20px; left: 20px; width: calc(100% - 40px); color: #fff; font-weight: 600; text-transform: uppercase; letter-spacing: 1px;  z-index: 10; font-size: 18px; opacity: 0; transform: translateY(100%); transition: all 0.3s ease;}

.eachservicegrid:hover .eachservicetext{transform: translateY(100%); opacity: 0;}
.eachservicegrid:hover .eachservicelink{transform: translateY(0); opacity: 1;}
.eachservicegrid:hover .eachservicecover{background: rgba(124,156,203,0.8);}
.eachservicegrid:hover .eachservicearrow{display:inline-block;-webkit-animation:bounceRight 1s alternate ease infinite;animation:bounceRight 1s alternate ease infinite}

.heroquotetext{max-width: 80%;}
.heroquote{font-size: 30px; line-height: 38px;}
.quotesub{font-size: 14px; font-weight: 500; color: #fff; margin-bottom: 40px;}

.quotee{font-size: 14px; color: #aaa; font-style: italic;}

.folderpage{position: absolute; bottom: 20px; right: 20px; color: #fff; z-index: 5;}
/* ==========================================================================
   FORM
   ========================================================================== */

.contactcontent{display: flex; justify-content: space-between; flex-wrap: wrap;}
.contactinfo{width: 45%;}
.contactmap{width: calc(100% - 840px);}

.eachcontact{display: flex; justify-content: flex-start; flex-wrap: wrap; align-items: center; margin-bottom: 10px;}
.contacticon{margin-right: 20px; min-width: 40px; text-align: center;}
.gm-style-mtc div{font-size: 12px !important;}

.contactsocial{display: flex; justify-content: flex-start; flex-wrap: wrap; padding: 0;}
.contactsocial a{color: #fff; margin-right: 20px; font-size: 16px;}
.contactsocial a:hover{ }
.contactsocial a.gplink:hover{color: #ff0000;opacity: 1;}
.contactsocial a.twlink:hover{color: #55acee;opacity: 1;}
.contactsocial a.lilink:hover{color: #0077B5;opacity: 1;}
.contactsocial a.fblink:hover{color: #3b5998;opacity: 1;}

.theform{width:100%; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; padding: 0; /*box-shadow: 0 15px 45px rgba(0,0,0,0.25), 0 7px 10px rgba(0,0,0,0.05); padding: 40px;*/ margin: 40px 0 0;}
.halfinput{width:  49%; position: relative;}
.fullinput{width: 100%; position: relative;}
.theform label{font-size: 16px; color: #676767; display: block; font-weight: 600; margin-bottom: 10px;}
.textinput{width: 100%; border:1px solid #f9f9f9; padding: 16px; font-size: 16px; background: rgba(0,0,0,0.0); outline: 1px solid #aaa; color: #fff; margin-bottom: 20px;}
.textinput:focus{outline: 1px solid #0f0f0f; }
.submitbutton{width: 100%; border:0px solid var(--green); border-radius: 2px; color: #fff; padding: 15px; transition: 0.4s; cursor: pointer; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 1px; background: var(--green)}
.submitbutton:hover{background: #568620;}
textarea{height: 200px; text-align: left;}
.smallprint{font-size: 12px;}
select.textinput{width: 100%; border:1px solid #f9f9f9; padding: 17px 10px; font-size: 0.8rem; background: rgba(0,0,0,1.05); background: #fff; outline: 1px solid #aaa; color: #0C0C0B; margin-bottom: 20px;}
/* ==========================================================================
   CHECKLIST
   ========================================================================== */
.checklist{width: 100%;}
.checksection{display: flex; justify-content: space-between; flex-wrap: wrap;}
.checkhead{background: var(--green); padding: 20px; color: #fff; font-weight: 800;}
.checkbody{ padding: 20px;}
.checkno{width: 40px;}
.checkdetails{width: calc(50% - 40px);}
.checkobservations{width: 45%;}
.detailsred{color: firebrick;}
.formheader{width: 100%; margin-bottom: 20px;}
.checktext{width:100%; max-width: 1900px; margin: 0 auto;}
select{width: 100%; border:1px solid #f9f9f9; padding: 17px 10px; font-size: 0.8rem; background: rgba(0,0,0,0.05); background: #fff; outline: 1px solid #aaa; color: #0C0C0B; margin-bottom: 20px;}


.checklabel{display:block;position:relative;padding-right:35px;margin-bottom:12px;cursor:pointer;font-size:22px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.checklabel input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}
.checkmark{position:absolute;top:0;right:0;height:25px;width:25px;background-color:#eee;border:1px solid var(--green);}
.checklabel:hover input~.checkmark{background-color:#ccc}
.checklabel input:checked~.checkmark{background-color:var(--green);}
.checkmark:after{content:"";position:absolute;display:none}
.checklabel input:checked~.checkmark:after{display:block}
.checklabel .checkmark:after{left:9px;top:5px;width:5px;height:10px;border:solid #fff;border-width:0 3px 3px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}

.upperform{padding: 20px;  margin-bottom: 40px;display: flex; justify-content: space-between; flex-wrap: wrap;}
.hiddeno{display: none;}

.companysection{width: 100%;}
.checkform{margin: 0;}
/* ==========================================================================
   GDPR
   ========================================================================== */

.privacylinks{width: 100%; padding: 40px 40px 20px; background: #67A226; display: flex; justify-content: space-between; flex-wrap: wrap; }
.privacylink{width: calc(50% - 10px); margin-bottom: 20px; padding: 10px; background: #fff; color: #00134E; transition: all 0.3s cubic-bezier(.25,.8,.25,1); text-transform: uppercase; font-weight: 600; font-size: 14px;}
.privacylink:hover{background: rgba(255,255,255,0.5); }
.privacycontent{padding: 40px 0;}



.ptable{margin: 20px 0;}
.ptable tr td{padding: 20px; border: 1px solid #ccc;}
.ptable thead th{padding: 20px; background: #67A226; }
.ptable thead th p strong{font-weight: 700; color: #fff;}

.sitemapul{}
.sitemapul ul{padding: 10px 0 0 20px; margin-bottom: 20px;}
.sitemapul li{margin-bottom: 5px;}


.eachuseful{width:100%; background:#f7f7f7; padding:20px 20px 40px 20px; margin-bottom:20px; position:relative;}

.usefullink{position:absolute; bottom:0; right:0; padding:10px; color: #fff; background: #67A226;}
.usefullink:hover{background: #fff; color: #67A226;}


.has-tooltip:hover + .tooltip,
.has-tooltip:focus + .tooltip,
.has-tooltip.hover + .tooltip {
  opacity: 1;
  transform: translate(-50%, -100%) scale(1) rotate(0deg);
  pointer-events: inherit;
}
.has-tooltip:hover + .textinput { background-color: yellow;}
.has-tooltip{color: #67A226;}
.tooltip {
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.75) rotate(5deg);
  transform-origin: bottom center;
  padding: 10px 30px;
  border-radius: 5px;
  background: rgba(103,162,38, 0.75);
  text-align: center;
  color: #fff;
  transition: 0.15s ease-in-out;
  opacity: 0;
  width: 100%;
  max-width: 100%;
  pointer-events: none;
  z-index: 5;
}
.tooltip.blue {
  background: rgba(103,162,38, 0.75);
}
.tooltip.blue:after {
  border-top: 5px solid rgba(103,162,38, 0.75);
}

.tooltip:hover {
  opacity: 1;
  transform: translate(-50%, -100%) scale(1) rotate(0deg);
  pointer-events: inherit;
}
.tooltip img {
  max-width: 100%;
}
.tooltip:after {
  content: "";
  display: block;
  margin: 0 auto;
  widtH: 0;
  height: 0;
  border: 5px solid transparent;
  border-top: 5px solid rgba(0, 0, 0, 0.75);
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 100%);
}
/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */
@media only screen and (min-width: 1920px) {

}
@media only screen and (min-width: 1620px) {
.header{left: calc((100% - 1500px) / 2); width: 1500px; } 
    .lowerheadnav{color: rgba(0,0,0,0.5); padding: 0 20px; font-size: 15px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; border-right: 1px solid rgba(0,0,0,0.1); display: flex; align-items: center; width: 16.666667%;}
    .dropnav{width: 16.666667%;}
    .lastnav{width: 100%; border:0px solid #fff;}
    .widenav{display: flex; display: none;}
    .hidenav{display: none;}
    .lowerheadnav{flex-grow: 1;}
    .upperheadnav{/*display: none;*/}
    .aboutnav{width: 100%; border: none;}
    .logo{width: 300px; padding: 30px 30px;}
    .logo img{width: 140px;}
    .navigation{width: calc(100% - 300px); display: flex; justify-content: space-between; flex-wrap: wrap; flex-direction: row;}
    .innerfooter{width: 1500px;}
    .homebody{width: 1500px; }
    .hometextholder{width: 1500px; }
    .homegrid{width: 1500px;}
    .portalgrid{width: 1500px;}
    .teamgrid{width: 1500px;}
    .icongrid{width: 1500px;}
    
    .hometext{width: var(--wide);}
    .contactbar{padding: 40px calc((100% - 1500px) / 2) 40px;}
    .innerhomelogos{width: 1500px;}
    .breadcrumbs{padding: 20px calc((100% - 1500px) / 2) 20px;}

}
@media only screen and (min-width: 1300px) {.navigation{display: flex!important;}.ham{display: none;}}
@media only screen and (max-width: 1300px) {
    
    .header{align-items: center; z-index: 501; width: 100%; top: 0; left: 0; padding: 30px;}
    .logo{padding: 0; width: 120px;}
    .navigation{display: none; width: 100%; height: auto; text-align: right; padding-top: 40px;}
    .upperhead{display: block; padding: 0;}
    .upperheadnavigation{width: 100%; margin: 0 0 20px 0}
    .upperheadcontact{width: 100%; margin: 0;}
     .upperheadcontact{position: relative; right: 0; top: 0;}
    .upperheadnav{max-width: 100%; width: 100%; color: rgba(255,255,255,0.5); text-align: right; display: block; margin: 0 0 10px; background: none; padding: 0;}
    .upperheadcont{max-width: 100%; width: auto; color: rgba(255,255,255,0.5); text-align: right; display: inline-block; margin: 0 10px; background: none; padding: 0;}
    .upperheadnav:hover{color: rgba(255,255,255,1);}
    .upperheadcont:hover{color: rgba(255,255,255,1);}
    .hidenav{display: block;}
    
    .lowerhead{background: none; width: 100%; display: inline-block; text-align: right;}
    .dropnav{display: none;}
    .widenav{display: none;}
    .herotext{width: 100%; padding: 40px; }
    .homegridholder{width: 100%; padding: 40px; }
    .projectgridholder{width: 100%; padding: 0 40px 40px; }
    .teamgridholder{width: 100%; padding: 0 40px; }
    .pslide{padding: 0px;}
    
    .homegrid{grid-template-columns: 1fr 1fr 1fr; width: 100%;}
    .portalgrid{grid-template-columns: 1fr 1fr; width: 100%;}
    .teamgrid{grid-template-columns: 1fr 1fr 1fr; width: 100%;}
    .homegridintro{grid-column: 1 / 4;}
    .homebody{width: 100%; }
    .hometextholder{width: 100%; padding: 0 40px;}
    .hometext{width: 100%; padding: 0 0px; }
.innerfooter{display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%; margin: 0 auto; padding: 30px 40px 20px;}
.footleft{width: 200px; border-right: 1px solid rgba(255,255,255,0.2); padding: 20px 20px 20px 0;}
.footleft img{width: 100%;}
.footmiddle{width: 200px; border-right: 0px solid rgba(255,255,255,0.2); padding: 20px;}
.footright{width: calc(100% - 400px); padding: 20px 20px 20px 20px;border-left: 1px solid rgba(255,255,255,0.2);}
.footbottom{width: 100%; text-align: left; border-top: 1px solid rgba(255,255,255,0.2); padding: 20px 20px 20px 0; margin-top: 0;}
    .innerhomelogos{width: 100%; padding: 40px;}
  .shallowherotext{margin-top: 160px;}
    .newsimagecontent{width: 100%; margin: 60px 0;}
    .breadcrumbs{padding: 20px 30px 20px;}
    .contactbar{width: 100%; padding: 40px 40px; position: relative;}
        .stripbox{width: 100%; background: rgba(255,255,255,0.9);}
.stripgrey{width: 0;}
    .stripimage{width: 100%;}
   .contactmap{width: 100%; height: 300px;}
    .herotext{width: auto; max-width: 70%; }
}
@media only screen and (max-width: 800px) {
    
    .footersocial{justify-content: flex-start;}
    .footersocial a{color: #fff; margin-left: 0; margin-right: 20px;}
    .heroheader{font-size: 24px; line-height: 30px;}
    .homegridholder{width: 100%; padding: 30px;}
    .teamgridholder{width: 100%; padding: 0 30px;}
    .eachhomegrid{width: 100%; margin-bottom: 20px; height: 300px;}
    .eachmedia{margin-bottom: 40px;}
    
    .eachmediadetails{width: 100%; margin-left: 0; padding: 40px 20px 60px; text-align: left; position: relative; background: #fff;}
    .newsh1 h1{font-size: 20px;}
    .privacylink{width: 100%; }
    .homegrid{width: 100%;}
    .homegridside{width: 100%; height: 300px;}
    .hometext{width: 100%;}
    
    .shallowherotext{font-size: 30px; line-height: 25px;}
    
.ptable tr td{padding: 5px;}
.ptable thead th{padding: 5px; }
    
    .homegrid{grid-template-columns: 1fr; width: 100%;}
    .portalgrid{grid-template-columns: 1fr; width: 100%;}
    .teamgrid{grid-template-columns: 1fr; width: 100%;}
    .homegridintro{grid-column: 1 / 1;}
.footleft{width: 50%; border-right: 1px solid rgba(255,255,255,0.2); padding: 20px 20px 20px 0;}
.footleft img{width: 200px;}
.footmiddle{width: 50%; border-top: 0px solid rgba(255,255,255,0.2); padding: 20px;}
.footright{width: 100%; padding: 20px 20px 20px 0;border-top: 1px solid rgba(255,255,255,0.2); border-left: none;}
    .logogrid{grid-template-columns: 1fr 1fr 1fr;}
    .accgrid{grid-template-columns: 1fr 1fr 1fr;}
    
    .hometestleft{width: 100%; position: relative; height: auto; padding: 0;}
    .hometestleftswipecontent{width: 100%; margin-bottom: 20px;}
    .hometestleftimage{width: 100%; height: auto;}
    .stripbox{width: 100%; background: rgba(255,255,255,0.9);}
.stripgrey{width: 0;}
    .stripimage{width: 100%;}
    .halfsingleimagewidth img{width: 100%;}
    
    .eachsectorside{width: 100%; padding: 0;}
    
    .splittext{width: 100%; margin-bottom: 40px}
.splitvideo{width: 100%;}
    
    .hometestleftimage{width: 100%; height: 300px;}
    .herotext{width: auto; max-width: 90%; }
    
    .halfinput{width: 100%;}
    .checkhead .checkobservations{display: none;}
    .checkno{width: 40px;}
    .checkdetails{width: calc(100% - 40px);}
.checkobservations{width: calc(100% - 40px); margin-left: 40px;}
    
    .contactbarcontent{flex-direction: column; text-align: center;}
    .contactbarh{margin-bottom: 20px; width: 90%;}
    
    
    
    #cards {
	list-style: none;
	outline: calc(var(--outline-width) * 10) solid hotpink;

	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(var(--numcards), 80vw);
	gap: var(--card-margin);
}
}

@media only screen and (max-width: 600px) {
.footleft{width: 100%; border-right: 0px solid rgba(255,255,255,0.2);border-bottom: 1px solid rgba(255,255,255,0.2); padding: 20px 0;}
.footleft img{width: 200px;}
.footmiddle{width: 100%; border-top: 0px solid rgba(255,255,255,0.2); padding: 20px 0 0;}
    .footright{padding: 20px 0 0;}
    .logogrid{grid-template-columns: 1fr 1fr;}
    .accgrid{grid-template-columns: 1fr 1fr;}
}
.hidden{display:none!important}.sr-only{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sr-only.focusable:active,.sr-only.focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;white-space:inherit;width:auto}.invisible{visibility:hidden}.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both}@media print{*,*:before,*:after{background:transparent!important;color:#000!important;-webkit-box-shadow:none!important;box-shadow:none!important;text-shadow:none!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}a[href^="#"]:after,a[href^="javascript:"]:after{content:""}pre{white-space:pre-wrap!important}pre,blockquote{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}tr,img{page-break-inside:avoid}p,h2,h3{orphans:3;widows:3}h2,h3{page-break-after:avoid}}