html{color:#222;font-size:1em;line-height:1.4}::-moz-selection{background:var(--green, #38B44A);color:#fff;text-shadow:none}::selection{background:var(--green, #38B44A);color:#fff;text-shadow:none}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}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
:root {
  --green: #38B44A;
  --digiknowblue: #5B9BD5;
  --darker: #226c2c;
  --purple: #BD3B80;
  --darkerpurple: #71234d;
  --blue: #002A66;
  --darkerblue: #000102;
  --darkergrey: #f6f6f6;
}

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(--darkergrey);
    border-radius: 0.7rem;
}

/* Browsers without `::-webkit-scrollbar-*` support */
@supports not selector(::-webkit-scrollbar) {
    html {
        scrollbar-width: thin;
        scrollbar-color: var(--darkergrey) var(--green);
    }
}
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: #38B44A;
color: var(--green, #38B44A); font-weight: 600;word-break: break-all;}
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: #1a1a1a; letter-spacing: 0px; font-family: 'Red Hat Display', sans-serif; font-weight: 500;}
.whiteh{color: #fff;}
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: 'Red Hat Text', 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); border-radius: 5px;}
body{background: var(--green, #38B44A); background: #f7f7f7;}

/*.container{width: calc(100% - 40px); margin: 0 auto 20px; }

 .objectfit img{width: 100%; height: 100%; object-fit: cover;}*/

.topheader{display: none;}
.header{width: 100%; max-width: 1920px; padding: 0; display: flex; justify-content: space-between; flex-wrap: wrap; position: relative; z-index: 9998; transition: all 0.3s ease; position: fixed; top: 0; background: #fff;}
.headerblue{background: linear-gradient(#002A66,#000102); }
.thelogo{transition: all 0.3s ease; }
.logoholder{outline: 0px solid red; line-height: 30px;display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; padding: 0; width: 300px; order: 1; padding: 20px 40px; position: relative; z-index: 6;}


.logoholdergreen{background: var(--green, #38B44A);}
.logo{width: 300px;}





.navigate{width: calc(100% - 300px); display: flex; justify-content: flex-end; flex-wrap: wrap; order: 3;}
    
.uppernav{width: 100%; display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; padding: 0; font-family: 'Red Hat Text', sans-serif;}
.upperlink{font-size: 12px; font-weight: 300; margin: 0; color: var(--green, #38B44A); text-transform: uppercase; padding: 12px 20px; font-weight: 700;}
.upperlink:hover{color: #1a1a1a;}
    
.navigation{display: flex; justify-content: flex-end; flex-wrap: wrap; align-items: center; width: 100%; padding-right: 0; position: relative;background: #f5f5f5;}
    
    
    
.navlink{background: #f5f5f5; color: #1a1a1a; font-family: 'Red Hat Display', sans-serif; font-weight: 700; font-size: 14px; padding: 20px 28px; text-transform: uppercase; flex-grow: 0; text-align: center;}
.navlink:hover{opacity: 1; background: var(--green, #38B44A); color: #fff; background: rgba(0,0,0,0.0); background: #fff; color: #38B44A; color: var(--green, #38B44A);}
.navlink.current{opacity: 1; background: var(--green, #38B44A); color: #fff; background: rgba(0,0,0,0.0); background: #fff; color: #38B44A; color: var(--green, #38B44A);}

.uppercurrent{color: #1a1a1a;}


.navigation:after{content: ''; width: 700px; height: 100%; position: absolute; left: -388px; top: 0; background: #fff; z-index: 4; display: none;}
    
.menu{background-color:transparent;border:none;cursor:pointer;display:flex;padding:0}.line{fill:none;stroke:#000;stroke-width:6;transition:stroke-dasharray 600ms cubic-bezier(.4,0,.2,1),stroke-dashoffset 600ms cubic-bezier(.4,0,.2,1)}.line1{stroke-dasharray:60 207;stroke-width:6}.line2{stroke-dasharray:60 60;stroke-width:6}.line3{stroke-dasharray:60 207;stroke-width:6}.opened .line1{stroke-dasharray:90 207;stroke-dashoffset:-134;stroke-width:6}.opened .line2{stroke-dasharray:1 60;stroke-dashoffset:-30;stroke-width:6}.opened .line3{stroke-dasharray:90 207;stroke-dashoffset:-134;stroke-width:6}


/* ALT HEADER
.logoholder{position: absolute; bottom: 8px; left: 0; padding:  0 40px;}
.navigate{width: 100%;}
.navlink{background: #fff;}
.navigation{background: #fff;}
.uppernav{background: #f5f5f5;}
.upperlink{padding: 6px 20px;}
.navlink{padding: 26px 40px;}
.upperlink:hover{background: #fff;}
.navlink:hover{background: #f5f5f5;}
.uppercurrent{background: #fff;}
*/
.navigation{background: #fff;}
.navlink{background: #fff;}
/**/


.hero{width: 100%; padding: 0; height: 80vh; position: relative; z-index: 5; margin-top: 100px;}
.shallowhero{width: 100%; padding: 0; height: 50vh; position: relative; z-index: 5; margin-top: 100px;}


.engagebg{position: absolute; bottom: 0; right: 0; z-index: 6; pointer-events: none;}

.swiperholders{position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.swiper-slide{outline: 0px solid red;}

.swiper-buttons{position: absolute; top: 70px; /*left: calc((100% - 1200px) / 2);*/ right:0; z-index: 10; display: flex; justify-content: flex-start; flex-wrap: wrap;}
.swiper-button{padding: 5px 10px; color: #38B44A; color: var(--green, #38B44A); background: #fff; cursor: pointer; outline: none;}

.herocover{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: flex-start; align-items: center; padding: 40px 40px 0; background: linear-gradient(rgba(0,0,0,.9),rgba(0,0,0,.7) 60%,rgba(0,0,0,0) 100%); z-index: 5; background: rgba(0,0,0,0.5);}
.shallowherocover{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: flex-start; align-items: center; padding: 0 40px; background: linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.4) 60%,rgba(0,0,0,0) 100%); z-index: 5; background: rgba(0,0,0,0.3);}




.herotext{max-width: 50%; z-index: 4;}
.herohead{}
.heroheader{font-size: 45px; line-height: 50px; font-weight: 300; margin:0; letter-spacing: 1px; text-transform: uppercase; background-color: rgba(255,255,255,0.9); color: var(--green, #38B44A); padding: 20px 20px 10px; text-align: left;word-break: normal;}
.shallowheroheader{font-size: 45px; line-height: 50px; font-weight: 300; margin:0; letter-spacing: 1px; text-transform: uppercase; background-color: rgba(255,255,255,0.9); color: var(--green, #38B44A); padding: 20px 20px 0; text-align: left;word-break: normal;}
.soloheader{padding: 20px; border-bottom: 5px solid var(--green, #38B44A);}

.shallowherosub{font-size: 20px; line-height: 26px; font-weight: 400; color: #1a1a1a; background: rgba(255,255,255,0.9); padding: 10px 20px 20px;  text-align: left; border-bottom: 5px solid var(--green, #38B44A); word-break: normal;}
.shallowherosub p{margin: 0;}

.herofade{margin-right: 10px;}

.herosub{font-size: 20px; line-height: 26px; font-weight: 400; color: #1a1a1a; background: rgba(255,255,255,0.9); padding: 10px 20px 20px;  text-align: left;word-break: normal;}
.homeherosub{margin-bottom: 40px;}
.herobutton{background: rgba(255,255,255,0.9); padding: 10px 20px 20px; border-bottom: 5px solid var(--green, #38B44A); }

.heroslideshow{width: 100%; height: 100%; z-index: 1; position: relative; }
.heroslideshow img{width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 4;}

.heroslide{width: 100%; height: 80vh; z-index: 4; position: relative; }
.shallowheroslide{width: 100%; height: 50vh; z-index: 4; position: relative; }
.heroslide img{width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 4;}
.shallowheroslide img{width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 4;}

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


.supporthero{width: 100%; padding: 0; height: 50vh; position: relative; z-index: 5; margin-top: 100px;}
.supportherocover{position: absolute; top: 0; left: 0; width: 100%; height: 100%;  padding: 0; background: linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.4) 60%,rgba(0,0,0,0) 100%); z-index: 5; background: rgba(0,0,0,0.3);}
.supportherotext{width: 33%; z-index: 6;border-bottom: 5px solid var(--green, #38B44A);border-top: 5px solid var(--green, #38B44A); background: #f5f5f5;  display: flex; flex-direction: column; justify-content: center;}
.supportheroslide{width: 67%; height: 50vh; z-index: 4; position: relative; }
.supportheroslide img{width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 4;}
.supportheroslideshow{width: 100%; z-index: 10; position: relative; display: flex; justify-content: flex-start; flex-wrap: wrap}
.supportheroheader{font-size: 45px; line-height: 50px; font-weight: 300; margin:0; letter-spacing: 1px; text-transform: uppercase;color: var(--green, #38B44A); padding: 20px 40px 0; text-align: left;word-break: normal;}

.supportherosub{font-size: 20px; line-height: 26px; font-weight: 400; color: #1a1a1a;padding: 10px 40px 20px;  text-align: left; word-break: normal;}
.supportherosub p{margin: 0;}
.supportengagebg{position: absolute; bottom: 0; right: 0; z-index: 11; pointer-events: none;}

.supportherotext{background:#38B44A; background: var(--green, #38B44A); background: url(../img/jigsaw-lens.png) center center no-repeat, linear-gradient(#38B44A,#226c2c); border: none;}
.supportheroheader{color: #fff;}
.supportherosub{color: #fff;}


footer{width: 100%; font-size: 12px; color: #fff; position: relative; overflow: hidden;}
.footerblue{background: linear-gradient(#002A66,#000102); }
.footergreen{background: linear-gradient(#38B44A,#226c2c); }
.footerpurple{background: linear-gradient(#BD3B80,#71234d); }

.innerfooter{display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%; margin: 0 auto; padding: 40px 40px}
.foot1{width: 30%; border-right: 0px solid rgba(255,255,255,0.2); padding: 20px 20px 20px 0;}
.foot1 img{width: 200px;}

.foot3 img{width: 120px;}
.foot2 img{width: 120px;}
.foot2{width: 25%; border-right: 0px solid rgba(255,255,255,0.2); padding: 20px 0;}
.foot3{width: 45%; border-right: 0px solid rgba(255,255,255,0.2); padding: 20px 0;}

.footbottom{width: 100%; text-align: left; border-top: 1px solid rgba(255,255,255,0.2); padding-top: 20px; margin-top: 20px; font-size: 12px; color: #fff;}

.foothead{width: 100%; font-size: 24px; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; font-weight: 300; font-family:'Red Hat Text', sans-serif; color: #fff;}

.footnav{width: 100%; margin-bottom: 20px;}
.footnavflex{width: 100%; display: flex; justify-content: flex-start; flex-wrap: wrap; margin-bottom: 20px;}
.footnav1{width: 50%;}
.footnav2{width: 50%;}

.footnavlink{display: block; margin-bottom: 5px;}
.footnavlink{color: #fff;}
.footnavlink:hover{color: var(--green, #38B44A);}
.footcurrent{color: var(--green, #38B44A); color: #1a1a1a;}

.fund-slide{display: flex; justify-content: center; align-items: center; height: auto !important;}
.fund-slide img{max-width: 160px; max-height: 120px;}

.swiper-pagination-bullet {
      width: 12px;
      height: 12px;
      text-align: center;
      line-height: 12px;
      font-size: 12px;
      color:#000;
      opacity: 1;
      background: rgba(0,0,0,0.2);
    }
    .swiper-pagination-bullet-active {
      color:#fff;
      background: var(--green, #38B44A);
    }
.swiper-funders{padding:40px 0 80px;}

.homelogos{ background: rgba(255,255,255,1);}
.fundheader{padding: 20px 40px; background: rgba(255,255,255,1);}
.fundheader h2{font-weight: 300; margin: 0;}

.footersocial{display: flex; justify-content: flex-start; flex-wrap: wrap; padding: 20px 0;}
.footersocial a{color: #fff; margin-right: 10px; font-size: 16px;}
.footersocial a i{width: 24px; text-align: center;}

.footersocial a.lilink{background: #0077B5; padding: 5px; border-radius: 3px; color: #fff;}
.footersocial a.fblink{background: #3b5998; padding: 5px; border-radius: 3px; color: #fff;}
.footersocial a.twlink{background: #55acee; padding: 5px; border-radius: 3px; color: #fff;}
.footersocial a.instalink{background: #DD2A7B; padding: 5px; border-radius: 3px; color: #fff;}




/*ALT FOOTER COLORS*/

.footersocial a:hover{background: var(--green, #38B44A); color: #fff;}


.copy span{margin: 0 5px;}
.copy a{color: #38B44A;}
.copy a{color: var(--green, #38B44A); 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;}

.bodyh{margin: 30px 0 20px 0; font-weight: 500; letter-spacing: 0px;}


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




.homegrid{display: grid; grid-template-columns: 1fr 1fr 1fr; grid-row-gap: 20px; background: #fff; padding: 40px 0; margin: 0;}
.eachhomegrid{padding: 40px; outline: 0px solid red; list-style-type: none; font-weight: 400;}
.homegrid li:nth-child(3n+2){border-left:1px solid #ccc; border-right:1px solid #ccc;}
.eachhomegrid h2{color: var(--green, #38B44A); font-size: 38px; font-weight: 300;}

.homenews{width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; background: #f7f7f7; padding: 0 40px 40px;}
.eachhomenews{width: calc(50% - 20px); min-height: 400px; position: relative; background: #fff; padding: 0 40px 0 0; overflow: hidden;}
.homenewstype{position: absolute; bottom: 40px; left: 40px;}
.eachhomenews:hover{transform: translateY(-3px);box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);}
.eachhomenews p{color: #1a1a1a;font-weight: 400;}
.homenewsimage{position: absolute; top: 40%; left: 40%; width: 100%; height: 100%; z-index: 3;}
.homenewsimage img{width: 100%; height: 100%; object-fit: cover;}
.homenewstext{position: relative; z-index: 5; background: rgba(255,255,255,0.98); padding: 40px; word-break: normal;}

.breadcrumbs{font-size: 12px; background: rgba(255,255,255,0.5); width: 100%; margin:0; padding: 20px 40px 20px; background: rgba(0,0,0,0.005); background: #f5f5f5; }
.breadcrumbs a{color: #1a1a1a; font-weight: 300;}
.breadcrumbs span{margin: 0 5px;}
.breadcrumbs a:hover{color: var(--green, #38B44A);}

.businesslogos{display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px;}
.eachbusinesslogo{width: 100%; display: flex; justify-content: center ; align-content: center; flex-wrap: wrap; padding: 40px 40px 40px 0; background: rgba(255,255,255,0); filter: grayscale(1);}
.eachbusinesslogo img{width: 100%; }
.eachbusinesslogo:hover {filter: grayscale(0);}

.compat-object-fit img{opacity: 0;}
.compat-object-fit {background-size: cover;}

/*NEW HOME LAYOUT SOCIAL NO SIDEBAR

.homesocialnews{width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap;padding: 0 40px 40px;}

.homesocial{width: 620px; display: flex; justify-content: space-between; flex-wrap: wrap;outline: 0px solid red;}
.homenewsholder{width: calc(100% - 660px); display: flex; flex-direction: column; justify-content: space-between; flex-wrap: wrap; outline: 0px solid red;}

.eachhomenews{width: 100%; min-height: 430px; margin-bottom: 0px;}
.eachsocial{width: calc(50% - 20px);}*/

/*NEW HOME LAYOUT SOCIAL SIDEBAR*/
.homecontent{width:100%; margin:0; padding:0; background: #fff; outline: 0px solid red; border-bottom: 40px solid #f5f5f5; display: flex; justify-content: space-between; flex-wrap: wrap; border:none; border-top: 10px solid #f5f5f5;}
.homesidebar{background: #f5f5f5; width: 400px; padding: 40px 20px;}    
    .homebody{width:calc(100% - 400px); padding: 0;}
.homeh1{font-size: 0px;}
.homeh1 h1{margin: 0;}
    .homegrid{grid-template-columns: 1fr 1fr; padding: 40px;}
    .homenews{padding: 40px 0 40px 40px; background: #f5f5f5;}
    
    .eachhomenews{background: #fff;transition: 0.2s transform cubic-bezier(0.68, -0.55, 0.265, 1.55), 0.175s box-shadow ease-in-out;}
    .list-teasers{padding: 40px;}
    .fb-page{margin-bottom: 20px;}
    .homegrid li:nth-child(3n+2){border-left:0px solid #ccc; border-right:0px solid #ccc;}
    .homegrid li:nth-child(2n+1){border-right:1px solid #ccc;}
    
    .socialheader{width: 100%; padding: 20px; font-size: 16px; color: #fff; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; background: #fff;}
    .fbheader{color: #4267B2;}
    .fbheader:hover{background: #4267B2; color: #fff;}
    .twheader:hover{background: #55acee; color: #fff;}
    .twheader{color: #55acee;}





.maincontent{width:100%; margin:0; padding:0; background: #fff; outline: 0px solid red; border-bottom: 40px solid #f5f5f5; display: flex; justify-content: space-between; flex-wrap: wrap; } 
.maincontentgrid{border-bottom: 0px solid #f5f5f5;}
.mainbody{width: 70%; padding: 40px; /*border: 0px solid var(--green, #38B44A); box-shadow: inset 0px 20px 200px rgba(0,0,0,0.25);*/}

.mainsidebar{width: 30%; background: var(--green, #38B44A); padding: 0 40px 40px; background: #f5f5f5;}
.newsimagecontent{width:100%; margin: 40px auto; outline: 0px solid red;box-shadow: 0 30px 90px rgba(0,0,0,0.25), 0 7px 20px rgba(0,0,0,0.05);}
.mainbody a:hover{color: #1a1a1a;}
.sidebarlink{display: block; padding: 20px; background-color: rgba(255,255,255,1); background-image: url(../img/footer-bg-small.png); background-position: bottom right; background-repeat: no-repeat; color: var(--green, #38B44A); border-left:3px solid var(--green, #38B44A); margin-bottom: 10px;}

.sidebarlink:hover{  -webkit-transform: translateY(-3px);
          transform: translateY(-3px);
  -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
   
}

.sidebarlinkgrey{-webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);}
/*ACCORDION*/
.accordionholder{width: 100%; margin: 40px auto;}
.thedetails{padding: 30px; display: block;}

.detailsearch{margin-bottom: 10px; /*box-shadow: 0 5px 15px rgba(0,0,0,0.25), 0 4px 10px rgba(0,0,0,0.05); */ border: 2px solid #f6f6f6;}
.detailsbooking{background: #f6f6f6;}
summary{font-weight: 500;}
summary span{width:calc(100% - 30px);}
.summaryicon{margin-right: 20px; width: 30px; text-align: center}
.summaryarrow{transition: all 0.3s; width: 20px; margin-left: 10px;}
details[open] summary .summaryarrow {
 transform: rotate(-180deg);
}
summary{display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; padding: 20px; outline: none; background: #f6f6f6; color: var(--green, #3FA535); font-size: 20px; cursor: pointer; transition: all 0.3s ease;}
summary:hover{background: #fff;}
summary::-webkit-details-marker {display: none;}

summary img{width: 32px; margin-right: 20px; display: none;}

.accordionheader{font-weight: 300; color: var(--green, #38B44A);}



.videoembed{box-shadow: 0 30px 90px rgba(0,0,0,0.25), 0 7px 20px rgba(0,0,0,0.05); width:100%; margin: 40px 0;}
.fullvideowidth{width:100%; }
.halfvideowidth{width:50%;}


.singleimage{width: 100%; margin:40px 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;}

.tabsection{margin: 40px 0;}
.bodyh{font-size: 22px; margin: 10px 0 20px;}

.gridcontent{width:100%; margin:0; padding:40px; background: #fff; }

.servicegrid{width: 100%; display: grid; grid-gap: 30px; grid-template-columns: 1fr 1fr 1fr; width: 100%; margin: 0 auto;}


.newsbuffer{width: 100%; margin: 10px 0 20px; height: 3px; position: relative;}

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

.eachservicegrid{background: #f5f5f5; transition: all 300ms ease;  overflow: hidden; position: relative; display: flex; justify-content: flex-start;  min-height: 400px; padding-bottom: 40px; border-bottom: 5px solid var(--green, #3FA535); font-weight: 300;}

.eachservicegrid: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); }
.eachgridwaves{position: absolute; bottom: 0; right: 0; z-index: 6;}

.eachservicegrid:hover .eachgridcover{height: 500%;}
.eachgridimage{width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 4; transition: all 0.3s ease; filter: grayscale(0);}
.eachgridimage img{object-fit: cover; width: 100%; height: 100%; }
.gridslide{object-position: center center}
.centergridslide{object-position: center center}
.leftgridslide{object-position: left center}
.rightgridslide{object-position: right center}

.eachgridcontent{position: relative;z-index: 10; padding: 40px; width: 100%;}
.eachgridtitle{transform:translateY(50px); transition: all 0.5s ease;word-break: normal; width: 100%;}
/*
@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
  .eachgridtitle {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}
*/
.eachgridtitlename{text-transform: uppercase; font-size: 24px; line-height: 26px; color: #fff; font-family:'Red Hat Display', sans-serif; font-weight: 400; margin-bottom: 10px;}
.eachgridtitledate{font-size: 14px; color: #fff;}
.eachgridtitleservice{font-size: 14px; color: #fff; opacity: 0; transition: 0.3s all ease; word-break: normal;}
.eachservicegrid:hover .eachgridtitle{transform:translateY(0px); background: #fff; border-bottom: 5px solid var(--green, #3FA535);}
.eachservicegrid:hover .eachgridtitleservice{opacity: 1;}
.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;}
.eachservicegrid: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;}

.eachgridtitle{padding: 20px;}
.eachservicegrid:hover .eachgridtitle{background: #fff; border-bottom: 5px solid var(--green, #3FA535);}
.eachservicegrid:hover .eachgridtitlename{color: #38B44A; color: var(--green, #3FA535);}
.eachservicegrid:hover .eachgridtitleservice{color: #1a1a1a;}
.eachservicegrid:hover {transform: translateY(-3px);box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);}

.nobreak{word-break: normal;}
.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;
}
.linkcontent{padding: 20px 0;}


.azfilter{width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 20px;}

.field{width: calc(50% - 15px); width: 100%; border:1px solid rgba(26,26,26,0.2); padding: 10px; }
.field:focus{outline: 1px solid rgba(26,26,26,0.3);}
.supportjigsaw{width: 100%; margin-bottom: 20px;}
.supportjigsaw img{width: 100%; max-width: 300px;}



.volunteerform{width: 100%; margin: 20px auto; background: #f5f5f5; padding: 20px;}


.newsletterlink{display: block; padding: 20px; background-color: rgba(255,255,255,1); background-image: url(../img/footer-bg-small.png); background-position: bottom right; background-repeat: no-repeat; color: var(--green, #38B44A); border-left:3px solid var(--green, #38B44A); margin-bottom: 10px; display: flex; justify-content: space-between; flex-wrap: wrap;}


.newslettertitle{font-size: 18px;}
.newslettertitle span{font-size: 14px;}
        .newsletterfile{font-size: 18px;}
        .pdftrigger{padding: 10px; cursor:pointer; background: var(--green); color: #fff; border: none; transition: all 0.3s ease;}
.pdftrigger:hover{background: #efefef; color: var(--green);}
    

/* ==============================
============================================
   STAFF
   ========================================================================== */
.staffgrid{width: 100%; display: grid; grid-gap: 30px; grid-template-columns: 1fr 1fr 1fr; width: 100%; margin: 0 auto;}
.eachgridcontentstaff{position: relative;z-index: 10; padding: 0px; width: 100%; display: flex; flex-direction: column; justify-content: flex-end;}
.eachgridtitlestaff{transform:translateY(60px); transition: all 0.5s ease;word-break: normal; width: 100%;}
.staffimage{width: 100%; max-width: 400px; margin-bottom: 20px; position: relative;border-bottom: 5px solid var(--green, #3FA535);}
.staffimagetitle{position: absolute; bottom: 0; left: 0; padding: 10px 20px; width: 100%; color: #fff; z-index: 4; font-weight: 700; text-transform: uppercase; text-align: right;text-shadow: 2px 1px 2px var(--green, #3FA535);}
.staffimage img{width: 100%; max-width: 400px; position: relative;z-index: 3;}

.gridheader{width: 100%; margin-bottom: 40px;}
.eachservicegrid:hover .eachgridtitlestaff{transform:translateY(40px);}
/* ==========================================================================
   BLOG
   ========================================================================== */
.bloggrid{width: 100%; display: grid; grid-gap: 30px; grid-template-columns: 1fr 1fr; width: 100%; margin: 0 auto;}
.eachgridcontentblog{position: absolute; top: 0; left: 0; z-index: 10; padding: 20px; width: 100%; background: rgba(255,255,255,0.0); transition: all 0.3s ease;}
.eachgridtitleblog{word-break: normal; width: 100%; font-size: 18px; color: var(--green, #3FA535); color: #fff; font-weight: 700; margin-bottom: 5px;}
.eachgriddateblog{word-break: normal; width: 100%; font-size: 14px; color: #fff;}

.eachbloggrid{min-height: 250px;}
.eachbloggrid:hover .eachgridcontentblog{background: rgba(255,255,255,0.9);border-bottom: 5px solid var(--green, #3FA535);}
.eachbloggrid:hover .eachgridtitleblog{color: #38B44A; color: var(--green, #3FA535);}
.eachbloggrid:hover .eachgriddateblog{color: #1a1a1a;}

.eachblogauthor{position: absolute; bottom: 0; right: 0; padding: 10px; background: var(--green, #3FA535); color: #fff; z-index: 10;}


.archivelink{display: block; padding: 10px 20px; background-color: rgba(255,255,255,1); background-image: url(../img/footer-bg-small.png); background-position: bottom right; background-repeat: no-repeat; color: var(--green, #38B44A); border-left:3px solid var(--green, #38B44A); margin-bottom: 10px; font-weight: 300px; font-size: 14px;}




.archivelink:hover{  -webkit-transform: translateY(-3px);
          transform: translateY(-3px);
  -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);}

.eachsociallogo{position: absolute; bottom: 0; right: 0; padding: 10px; background: var(--green, #3FA535); background: #fff; z-index: 10; max-width: 30%;}
.socialdirectoryimage{background: #fff; padding: 20px; width: 100%; margin-bottom: 20px;border-bottom:5px solid var(--green, #38B44A); text-align: center;}

.subholder{background: rgba(255,255,255,0.0); width: 100%; padding: 0;}
.subform{width: 100%;}
.subinputholder{display: flex; justify-content: flex-start; flex-wrap: wrap;}
.subinput{width: calc(100% - 80px); padding: 10px; max-width: 500px;}
.subscribesubmit{width: 80px; display: flex; justify-content: center; align-content: center; flex-wrap: wrap; background: var(--green, #3FA535); border: none; padding: 5px; color: #fff; cursor: pointer; transition: all 0.3s ease;}
.subscribesubmit:hover{background: var(--darker, #226c2c);}
.subcheck{padding: 10px 0; width: 100%;}
.subcheck input{margin-right: 5px;}
.subholder p{font-size: 14px;}
.subholder .smallprint p{font-size: 12px;}

.error{color: firebrick; font-size: 18px; font-weight: 700;}
.eacherror{color: firebrick; font-size: 16px; font-weight: 500;}
.formsuccess{color: var(--green, #3FA535);}

.homesub{width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; background: #f7f7f7; padding: 0 0 40px 40px;}

.subholderhome{width: calc(50% - 20px); position: relative; background: #fff; padding: 40px; overflow: hidden;}


.subholderhome:hover{transform: translateY(-3px);box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);}



.helpfulhead{font-size: 18px; font-weight: 800; margin-bottom: 10px;}
.helpfulbox{width: 100%; position: relative; }
/*.helpfulbox{width: 100%; position: relative; background: #f6f6f6; overflow: hidden; margin: 40px 0 20px; padding: 40px; background-image: url(../img/footer-bg-small.png); background-position: bottom right; background-repeat: no-repeat;}*/

.helpfulform{width: 100%;}
.helpfulinputholder{width: 100%;}
.helpfuloptions{margin-bottom: 10px;}
.helpfulcomment{width: 100%; max-width: 300px; margin-bottom: 10px;}
.helpfulcomment label{font-size: 12px; color: #aaa; display: none;}
textarea.helpfulinputcomment{width: 100%; height: 100px; padding: 10px; font-size: 14px;}
.helpfuloptions label{margin-right: 10px;}
.helpfulsubmitbutton{width: 100%; max-width: 200px; border:1px solid var(--green, #38B44A); border-radius: 2px; color: #fff; padding: 15px; transition: 0.4s; cursor: pointer; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 1px; background: var(--green, #38B44A);}
.helpfulsubmitbutton:hover{background: #fff; color: var(--green, #38B44A);}

.traininglinks{display: flex; justify-content: flex-start; flex-wrap: wrap;}
.traininglink{padding: 5px 10px; background: var(--green); color: #fff; font-size: 12px; font-weight: 300; text-transform: uppercase; margin: 0 10px 10px 0;}
.traininglink:hover{background: var(--darker); color: #fff !important;}
.traininglinkcurrent{background: var(--darker);}
/* ==========================================================================
    SPACES FOR HIRE
   ========================================================================== */
.aboutmap{width: 100%; height: 500px;box-shadow: 0 30px 90px rgba(0,0,0,0.25), 0 7px 20px rgba(0,0,0,0.05);}
.maplinks{padding: 20px 0; display: flex; justify-content: flex-start; flex-wrap: wrap;}

.mapbutton{padding: 5px 10px; margin: 0 10px 10px 0; background: var(--green); font-size: 12px; color: #fff;}
.spacebody{width: 60%; padding-right: 0;}
.spacesidebar{width: 40%; height: 100vh; position: sticky; top: 0;}
.spacemap{width: 100%; height: 100%; position: absolute; top: 0; left: 0;}

.eachspace{width: 100%; border-bottom: 1px solid #f6f6f6; padding-bottom: 20px; margin-bottom: 20px; display: flex; justify-content: space-between; flex-wrap: wrap;}
.eachspace:hover .eachspacecontent{background: #f6f6f6;}
.eachspaceimage{width: 200px;}
.eachspaceimage img{width: 100%; height: 100%; object-fit: cover;}
.eachspacecontent{width: calc(100% - 200px); padding: 20px 60px 20px 20px;}
/* ==========================================================================
   Teasers
   ========================================================================== */

@supports ((-webkit-background-clip: text) or (background-clip: text)) or (-webkit-background-clip: text) {
  .punch-in {
    background-clip: text;
    background-position: center;
    color: transparent;
    -webkit-background-clip: text;
  }

    .teasers{padding: 40px; background: #fff;}
    .teaser{width: 100%; position: relative; min-height: 500px; padding: 60px 40px; margin-bottom: 40px;transition: 0.2s transform cubic-bezier(0.68, -0.55, 0.265, 1.55), 0.175s box-shadow ease-in-out;}
    .teaser:last-of-type{margin-bottom: 0;}
    .teaserbody{position: relative; z-index: 4; max-width: 50%; background: #fff;}
    .teaserheader{ padding: 20px 40px;}
    .teaserheader h2{font-weight: 700;}
    .teasertext{background: #fff; padding: 0 40px; font-size: 18px;}
    .teaserlink{background: #fff; padding: 20px 40px;}
    .teaserimage{position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3;}
    .teaserimage img{object-fit: cover; width: 100%; height: 100%;}
    .teaser:hover{transform: translateY(-3px); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);}






   

/* ==========================================================================
   LIST JS
   ========================================================================== */
.allthefilters{font-weight: 300; margin-bottom: 10px;}
.sorters{display: flex; justify-content: flex-start; flex-wrap: wrap; width: 100%; margin-bottom: 10px;}
.filtersearch{width: 33.333333%;}
.sort-by{display: flex; justify-content: flex-start; flex-wrap: wrap; width: 100%; align-items: center;}
.sorter{padding: 10px; background: #fff; color: #1a1a1a; font-size: 12px; cursor: pointer;width: 33.333333%; text-align: center; text-transform: uppercase; font-weight: 300; user-select: none; opacity: 0.7; transition: 0.2s all ease;}
.fsearch{padding: 10px; border:1px solid #fff; width: 100%; background: #fff; font-size: 12px;}
.fsearch:focus{outline: 1px solid #5ED501;}
.sorter:hover{opacity: 1; background: #5ED501;}
.sortactive{opacity: 1; background: #5ED501; color: #fff;}

.filter{display: flex; justify-content: flex-start; flex-wrap: wrap; width: 100%;}


.filterer{padding: 10px 15px; font-size: 14px; background: #1a1a1a; color:#fff; cursor: pointer; text-align: center; text-transform: uppercase; font-weight: 300; margin-right: 10px; margin-bottom: 10px; opacity: 0.5; border-radius: 10px;}
.filterall{background: var(--green, #3FA535); color: #fff;}
.filterer:hover{opacity: 1; color: #fff !important;}
.filtereractive{opacity: 1;}

@media screen and (max-width: 800px) {
.filtersearch{width: 100%; margin-bottom: 5px;}
    .sorter{width: 50%;}
}




.paginatedtop{width:100%; display:flex; justify-content:space-between; flex-wrap:wrap; padding:5px 0; font-weight:400; font-size:0.8rem; color:var(--green, #3FA535); grid-column: 1 / 3;}
.noresults{font-size:1.1rem; font-weight: 400; color: var(--green, #3FA535);}
/*
    Paginator -
    Source: http://www.strangerstudios.com/sandbox/pagination/diggstyle.php (strangerstudios.com)
*/

.pagination {
  display: flex;
  justify-content: flex-start;
  width: auto;
    flex-wrap: wrap;
    flex-grow: 0;
  padding: 0 20px;
  border-radius: 35px;
  background-color: #f5f5f5;
}


div.pagination a, div.pagination span {
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
  padding: 5px 10px;
  
  transition: 400ms ease;
  color: #595959;
  font-size: 16px;
  letter-spacing: 0.1em;
  font-weight: 300;
  
}
div.pagination a:hover, div.pagination a:active {
    background-color: var(--green, #3FA535);
    color: #fff;
}
div.pagination span.page_current {
    background-color: var(--green, #3FA535);
    color: #fff;
}
div.pagination a.next, div.pagination a.prev{padding: 5px 10px;}
div.pagination a.next:hover{
    background-color: #f5f5f5;
    color: var(--green, #3FA535);
}
div.pagination a.prev:hover{
    background-color: #f5f5f5;
    color: var(--green, #3FA535);
}

div.pagination span.page_disabled {
    
   
    
    font-size:0.8rem;
    * zoom: 100%;

    color: #aaa;
}
/*
 div.pagination {
    padding: 3px;
    margin: 3px;
}

div.pagination a {
    padding: 2px 5px 2px 5px;
    margin: 2px;
    border: 1px solid var(--green, #3FA535);
    * zoom: 100%;
    text-decoration: none; 
    font-size:0.8rem; font-weight: 400; color: var(--green, #3FA535);
}
div.pagination a:hover, div.pagination a:active {
    border: 1px solid var(--green, #3FA535);
background-color: var(--green, #3FA535);
    color: #fff;
}
div.pagination span.page_current {
    padding: 2px 5px 2px 5px;
    margin: 2px;
    border: 1px solid var(--green, #3FA535);

    * zoom: 100%;
    font-size:0.8rem;
    
    background-color: var(--green, #3FA535);
    color: #FFF;
}
div.pagination span.page_disabled {
    padding: 2px 5px 2px 5px;
    margin: 2px;
    border: 1px solid #EEE;
    font-size:0.8rem;
    * zoom: 100%;

    color: #aaa;
}
*/
* span.elipsis {zoom:100%}
.searchfooter{width: 100%;grid-column: 1 / 3;}
.thepaginator{width: 100%; display: flex; justify-content: flex-start; flex-wrap: wrap; align-items: center;}



.archivedetails {
  border-bottom: 1px solid rgba(225,225,225,0.8);
  margin-bottom: 1rem;
  cursor: pointer;
}


.archivedetails summary{font-weight: 500; font-size: 14px;}
.archivedetails summary span{width:calc(100% - 30px);}
.archivedetails summary i{transition: all 0.3s; width: 20px; margin-left: 10px;}
details[open] summary i {
 transform: rotate(-90deg);
}
.archivedetails summary{display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; padding: 10px 0; outline: none;}

summary::-webkit-details-marker {
  display: none;
}
.archivedetails summary:hover{background: rgba(255,255,255,0);}

    .filterheader{margin-bottom: 20px;}
.filterholder{width: 100%; display: flex; justify-content: flex-start; flex-wrap: wrap; padding-bottom: 20px; border-bottom: 1px solid #ccc; margin-bottom: 20px;}
.eventfilterholder{border-bottom: 0px solid #ccc;}
.newsfilter{width: 50%; margin-right: 20px; display: flex; justify-content: flex-start; flex-wrap: wrap;}

    .newsfilter button{background: var(--green); color: #fff; border: none; cursor: pointer; transition: all 0.3s ease; padding: 0 10px;}
    .newsfilter button:hover{background: var(--darker);}
    .removefilter{padding: 8px 10px; border: 1px solid var(--green); border-radius: 0px; font-weight: 100;}
    
    .tagfilters{display: flex; justify-content: flex-start; flex-wrap: wrap; width: 100%;}
    .newstag{background: var(--green); padding: 10px; color: #fff; margin: 0 10px 10px 0; font-weight: 100; font-size: 12px;}
    .newstag:hover{background: var(--darker); color: #fff !important;}

.eachselector{width: 100%; margin-right: 10px; position: relative;}
.selector{width: 100%; padding: 10px; }
.eachselector select {
  background-color: var(--green);
  color: white;
  padding: 12px;
  border: none;
  font-size: 16px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}

.eachselector::before {
  content: "\f13a";
  font-family: "Font Awesome 5 Free"; font-weight: 900;
  position: absolute;
  top: 0;
  right: 0;
  width: 20%;
  height: 100%;
  text-align: center;
  font-size: 28px;
  line-height: 45px;
  color: rgba(255, 255, 255, 0.5);
  background-color: rgba(255, 255, 255, 0.1);
  pointer-events: none;

}

.eachselector:hover::before {
  color: rgba(255, 255, 255, 0.6);
  background-color: rgba(255, 255, 255, 0.2);
}

.eachselector select option {
  padding: 30px;
}
    
    .speechbtns{display: flex; justify-content: flex-start; flex-wrap: wrap; align-content: center;}
    .speechbtn{background: var(--green); padding: 5px 10px; color: #fff; margin: 0 5px 5px 0; border: none; cursor: pointer; font-size: 12px;}
    .speechbtn:hover{background: var(--darker);}
/* ==========================================================================
   FORM
   ========================================================================== */

.contactcontent{display: flex; justify-content: space-between; flex-wrap: wrap;}
.contactinfo{width: 100%;}
.contactmap{width: 100%; height: 100%; position: absolute; top: 0; left: 0;}

.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;}
    .contactdetails{width: calc(100% - 60px);}
.gm-style-mtc div{font-size: 12px !important;}



.theform{width:100%; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; padding: 0;  padding: 40px; margin: 40px 0 0; background: #f6f6f6;}
.theform:focus{box-shadow: 0 15px 45px rgba(0,0,0,0.25), 0 7px 10px rgba(0,0,0,0.05);}
.halfinput{width:  49%; position: relative;}
.fullinput{width: 100%; position: relative;}
.theform label{font-size: 12px;}
.textinput{width: 100%; border:1px solid #f9f9f9; padding: 10px; font-size: 0.8rem; background: rgba(0,0,0,0.05); background: #fff; outline: 1px solid #aaa; color: #0C0C0B; margin-bottom: 20px;}
.textinput:focus{outline: 1px solid #0f0f0f; background: #f6f6f6;}
.submitbutton{width: 100%; border:1px solid var(--green, #38B44A); border-radius: 2px; color: #fff; padding: 15px; transition: 0.4s; cursor: pointer; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 1px; background: var(--green, #38B44A);}
.submitbutton:hover{background: #fff; color: var(--green, #38B44A);}
textarea{height: 200px; text-align: left;}
.smallprint{font-size: 12px;}

.contactsocial{display: flex; justify-content: flex-start; flex-wrap: wrap; padding: 0;}
.contactsocial a{color: #fff; margin-right: 10px; font-size: 16px;}
.contactsocial a i{width: 24px; text-align: center;}

.contactsocial a.lilink{background: #0077B5; padding: 5px; border-radius: 3px; color: #fff;}
.contactsocial a.fblink{background: #4267B2; padding: 5px; border-radius: 3px; color: #fff;}
.contactsocial a.twlink{background: #55acee; padding: 5px; border-radius: 3px; color: #fff;}
.contactsocial a.instalink{background: #DD2A7B; padding: 5px; border-radius: 3px; color: #fff;}


.contactsocial a:hover{background: var(--green, #38B44A); color: #fff;}

.checkholder{display: flex; justify-content: flex-start; flex-wrap: wrap; padding: 10px 0;}
.checkholder label{display: flex; justify-content: flex-start; flex-wrap: wrap; width: 100%; margin-bottom: 5px;}
.checkholder label input{margin-right: 10px;}




/* ==========================================================================
   SEARCH
   ========================================================================== */


.eachsearcharticle{width: 100%; background: #f6f6f6; padding: 40px; margin-bottom: 20px; position: relative; overflow: hidden;display: block; font-weight: 400; word-break: normal;}

.searchlink{color: #1a1a1a; display: flex; justify-content: center; overflow: hidden; padding: 0px; align-items: center; font-size: 12px;}
.searchformshow{margin-left: 40px;}
.searchform{display: flex; margin-left: 10px;}
.onsearchbox{width: 100%;}
.si1{width: calc(100% - 40px);}
.searchlink a{color: #1a1a1a;}
.searchbox{display: flex; flex-wrap: nowrap; align-self: center;}
.searchbox input{padding: 12px 10px; border: 0px solid #efefef; outline: 1px solid #efefef; background: #f6f6f6;}
.searchbox input:focus{outline: 0px solid #1a1a1a; background: #efefef;}
.searchtext{width:calc(100% - 40px); max-width: 685px;}
.searchbtn{border: 0px solid #efefef; background: var(--green, #38B44A); color: #fff; text-transform: uppercase; width: 40px; margin-right: 20px;transition:all 0.3s linear; outline: none; cursor: pointer;}


.searchbtn:hover{background:#efefef; color: #1a1a1a; }

.onsearchform{width: 100%;}

.searchform{width: auto; max-width: 0px; transition:all 0.5s linear; visibility: hidden; opacity: 0;}
.searchform.show{max-width: 1000px;visibility: visible; opacity: 1;}


.searchresultlink{color: #1a1a1a; font-family: 'Poppins', sans-serif; font-size: 14px; text-transform: uppercase; font-weight: 600; padding: 0;}
.searchresultlink:hover{opacity: 0.7;}
.eachsearcharticlecategory{position: absolute; bottom:5px; right:0; color: #fff; padding: 5px 10px;}
.eachsearchlink{font-weight: 300; font-size: 16px;}
.eachtemplate{position: absolute; bottom: 0; right: 0; padding: 10px;background: var(--green, #38B44A); color: #fff; font-weight: 700;}
/* ==========================================================================
   GDPR
   ========================================================================== */

.privacylinks{width: 100%; padding: 40px 40px 20px; background: var(--green, #38B44A); 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: var(--green, #38B44A); }
.ptable thead th p strong{font-weight: 700; color: #fff;}


.mtable{margin: 20px 0; width: 100%;}
.mtable tr td{padding: 20px; border: 1px solid #ccc;}
.mtable thead th{padding: 20px; background: var(--green, #38B44A); color: #fff; text-align: left;}
.mtable thead th p strong{font-weight: 700; color: #fff;}
.mtable p{margin: 0;}


.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: var(--green, #38B44A);}
.usefullink:hover{background: #fff; color: var(--green, #38B44A);}


.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: var(--green, #38B44A);}
.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(0, 0, 0, 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(56,180,74, 0.75);
}
.tooltip.blue:after {
  border-top: 5px solid rgba(56,180,74, 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%);
}

/* ==========================================================================
   BUTTON
   ========================================================================== */
.learn-more {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  background: transparent;
  padding: 12px 2rem 12px 2rem;
  font-size: inherit;
  font-family: inherit;
   
}
.learn-more {
  width: auto;
  height: auto;
}
.learn-more .circle {
  -webkit-transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
    top: 0; left: 0;
  display: block;
  margin: 0;
  width: 3rem;
  height: 3rem;
  background: #38B44A;
  background: var(--green, #38B44A);
  border-radius: 1.625rem;
}
.learn-more .circle .icon {
  -webkit-transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: #fff;
}
.learn-more .circle .icon.arrow {
  -webkit-transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  left: 0.625rem;
  width: 1.125rem;
  height: 0.125rem;
  background: none;
}
.learn-more .circle .icon.arrow::before {
  position: absolute;
  content: '';
  top: -0.25rem;
  right: 0.0625rem;
  width: 0.625rem;
  height: 0.625rem;
  border-top: 0.125rem solid #fff;
  border-right: 0.125rem solid #fff;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.learn-more .button-text {
  -webkit-transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.75rem 0;
  margin: 0 0 0 1.85rem;
  color: #38B44A;
  color: var(--green, #38B44A);
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
  text-transform: uppercase;
  
}
.learn-more:hover .circle {
  width: 100%;
}
.learn-more:hover .circle .icon.arrow {
  background: #fff;
  -webkit-transform: translate(1rem, 0);
          transform: translate(1rem, 0);
}
.learn-more:hover .button-text {
  color: #fff;
}
.socialbuffer{width: 0;}

/* ==========================================================================
   MODAL
   ========================================================================== */
.modalsearch{background: #e9e9e9;}
.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);
}
.modal .content-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 80%;
  max-width: 1000px;
  margin: 0;
  padding: 2.5rem;
  background:#fff url(../img/footer-bg-small.png) bottom right no-repeat;
  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;
    max-height: 90vh;
    overflow: auto;
}

.modal .content-wrapper {
 max-width: 600px;   
}
.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;
    cursor: pointer;
}
.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;
    color: var(--green, #38B44A);
}
.modal .content-wrapper .modal-content {
  position: relative;
  display: flex; flex-wrap: wrap;width: 100%;padding: 0;
}
.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-start;
  width: 100%;
  margin: 0;
  padding: 1.875rem 0 0;
}
.modal .content-wrapper .modal-footer .action {
  position: relative;
  margin-right: 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: #F31B2A;
}
.modal .content-wrapper .modal-footer .action:last-child {
  background-color: #aa131d;
}
.modal .content-wrapper .modal-footer .action:hover:before {
  width: 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) {.header{width: 1920px;}}

@media only screen and (min-width: 1220px) {.navigation{display: flex!important;}.uppernav{display: flex!important;}.ham{display: none; order: 4;}.navresponsive{display: none;}}
@media only screen and (max-width: 1220px) {
    
    .header{align-items: center; z-index: 501; background: #fff;}
    .logoholder{order: 1; background: #fff;}
    .ham{display: block; order: 2; padding-right: 40px;}
    .navigate{align-items: center; outline: 0px solid red; padding:0 40px; order: 3; width: 100%;}
    .navigation{display: none; width: 100%; text-align: right; padding: 0 0; background: #fff;}
    .uppernav{display: none;}
    .navlink{display: block; width: 100%; margin: 0; font-size: 18px; margin-bottom: 10px; padding: 5px 0px 5px 0; text-align: right; background: #fff; font-weight: 300;}
    .navlink:hover{background: rgba(255,255,255,0.15); color: var(--green, #38B44A);}
    .upperlink{display: block; width: 100%; margin: 0; color: #1a1a1a; font-size: 18px; margin-bottom: 10px; padding: 5px 0px 5px 0; text-align: right; background: #fff; font-weight: 300;}
    .upperlink:hover{background: rgba(255,255,255,0.15); color: var(--green, #38B44A);}
    .uppercurrent{color: var(--green, #38B44A);}
    .current{color: var(--green, #38B44A);}
    .navresponsive{display: block;}
    

 
        .hero{margin-top: 60px;}

 .herotext{max-width: 80%;}
.heroheader{font-size: 24px; line-height: 34px;}   

    .herotext{max-width: 70%; z-index: 4;}
    .heroheader{font-size: 40px; line-height: 35px; }
    
    .contactinfo{width: 100%; margin-bottom: 20px;}
    .mapopening{height: 400px;}
    
    .homeabout{width: 100%; padding: 40px 10%; border-right: 0px solid #f6f6f6;}
    .homeopening{width: 100%; background: #505055; padding: 40px 10%;}
    .nocontent{display: none;}
    .businessopening{border-bottom: 5px solid #fff;}
        .homeservices{width: 100%; background: #f6f6f6; position: relative; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; padding: 0; outline: 0px solid red;}


.thehomeservice{width: 100%; background: #f6f6f6; position: relative; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; outline: 0px solid red; z-index: 4;}
.homeservicesimg{width: 100%; height: auto; position: relative; z-index: 4; outline: 0px solid red; }
.homeservicesimgheader{position:relative; width: 100%; height: auto; padding: 40px 10%; font-size: 40px; line-height: 50px;}
.homeservicesimg img{position: absolute; top:0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.homeservicescontent{width: 100%; padding: 40px 10%; position: relative; z-index: 4; outline: 0px solid red;}
.homeservicesbg{position: absolute; top: 0; right: 0; width: auto; height: auto; background: none; z-index: 46; outline: 0px solid red;}
.swiper-buttons{position: relative; display: flex; justify-content: flex-end; flex-wrap: wrap; top: 0;}
.swiper-button{padding: 5px 10px; color: var(--green, #38B44A); background: #fff; cursor: pointer; outline: none;}
    
 /*.eachhomenews{height: auto; min-height: 400px; padding: 0 40px 80px 0;}*/
 .eachhomenews{height: auto; min-height: 430px; padding: 0 40px 0 0;}
.foot1{width: 50%;}
    .foot2{width: 50%;}
    .foot3{width: 100%;}
    
    .servicegrid{grid-template-columns: 1fr 1fr;}
    .staffgrid{grid-template-columns: 1fr 1fr;}
    
    .homebody{width: 100%;}
    .socialbuffer{width: 40px;}
    .homesidebar{width: 100%; padding:0 40px 40px; display: flex; justify-content: space-between; flex-wrap: wrap;}
        .socialfeed{display: none;}
        .homenews{padding: 40px 40px;}
        .eachnewsocial{width: 49%;}
    .teaserbody{max-width: 70%;}
    .eachgridtitleservice{font-size: 14px; color: #fff; opacity: 1; transition: 0.3s all ease; word-break: normal;}
    .eachgridtitle{transform:translateY(40px);}
    
    .homesub{padding: 0 40px 40px;}
}
@media only screen and (max-width: 1130px) {
    .homesocial{width: 100%; margin-bottom: 40px; justify-content: center;}
    .socialbuffer{width: 20px;}
    .eachsocial{width: 300px; margin: 0 20px;}
    .homenewsholder{width: 100%;}
    .supportheroslideshow{flex-direction: column-reverse;}
    .supporthero{height: auto;}
    .supportherotext{width: 100%; padding: 20px 40px;}
.supportheroslide{width: 100%; height: 50vh;}
.supportheroheader{font-size: 24px; line-height: 30px; padding: 0;}

.supportherosub{font-size: 18px; line-height: 26px; font-weight: 400; color: #1a1a1a;padding: 10px 0 0;  text-align: left; word-break: normal;}


.supportherotext{background:#38B44A; background: var(--green, #38B44A); background: url(../img/jigsaw-lens.png) center center no-repeat, linear-gradient(#38B44A,#226c2c); border: none;}
.supportheroheader{color: #fff;}
.supportherosub{color: #fff;}
    
}

@media only screen and (max-width: 1000px) {
    .homegrid{display: grid; grid-template-columns: 1fr 1fr;}
    .homegrid li:nth-child(3n+2){border-left:0px solid #ccc; border-right:0px solid #ccc;}
    .homegrid li:nth-child(2n+1){border-right:1px solid #ccc;}
    
    .mainbody{width: 100%; }
    .mainsidebar{width: 100%; padding-top: 40px;}
    
    
    
    .spacebody{width: 100%; padding-right: 0;}
.spacesidebar{width: 100%; height: 800px; position: relative;}
.spacemap{width: 100%; height: 100%; position: absolute; top: 0; left: 0;}

.eachspace{width: 100%; border-bottom: 1px solid #f6f6f6; padding-bottom: 20px; margin-bottom: 20px; display: flex; justify-content: space-between; flex-wrap: wrap;}
.eachspace:hover .eachspacecontent{background: #f6f6f6;}
.eachspaceimage{width: 100%; height: 200px;}
.eachspaceimage img{width: 100%; height: 100%; object-fit: cover;}
.eachspacecontent{width: 100%; padding: 20px 20px 20px 20px;}
    
    
    
    }

@media only screen and (max-width: 940px) {
        .homesidebar{display: block;}
        .eachnewsocial{width: 100%; text-align: center;}
        .eachnewsocial:first-of-type{margin-bottom: 20px;}
        .homegrid{grid-template-columns: 1fr; grid-gap: 0px;}
        .homegrid li:nth-child(2n+1){border-right:0px solid #ccc;}
        .eachhomegrid{padding: 40px 0;border-bottom:1px solid #ccc;}
    }
    


@media only screen and (max-width: 800px) {
    .container{width: 100%; margin: 0 auto;}
    .logo{width: 240px;}
    .herocover{padding: 0 20px;}
    .herotext{max-width: 100%;}

    .privacylink{width: 100%; }

    .heroheader{font-size: 30px; line-height: 40px; }
    .shallowheroheader{font-size: 30px; line-height: 40px; }
    .homesocial{}
    .eachsocial{margin: 0;}
    
.ptable tr td{padding: 5px;}
.ptable thead th{padding: 5px; }
.homeabout{width: 100%; padding: 40px 5%;}
.homeopening{width: 100%; padding: 40px 5%;}
.homeservicescontent{width: 100%; padding: 40px 5%;}
.homeservicesimg{width: 100%; padding: 0;}
    
    .eachhomenews{width: 100%;}
    .eachhomenews:first-of-type{margin-bottom: 40px;}
   .servicegrid{grid-template-columns: 1fr;}
   
   .bloggrid{grid-template-columns: 1fr; }
   .searchfooter{grid-column: 1 / 2;}
.paginatedtop{grid-column: 1 / 2;}
    .gridheader{width: 100%;}
    .teaserbody{max-width: 100%;}
    
    .homegrid{padding: 40px 20px;}
    .teasers{padding: 40px 20px;}
    .homenews{padding: 40px 20px;}
    .innerfooter{padding: 40px 20px;}
    .logoholder{padding: 20px;}
    .ham{padding-right: 20px;}
    .homesidebar{padding:0 20px 40px;}
    .teaserheader{padding: 20px;}
    .teasertext{padding: 0 20px;}
    .teaserlink{padding: 20px;}
    .teaser{padding: 40px 20px;}
    .mainbody{padding: 40px 20px;}
    .shallowherocover{padding: 0 20px;}
    .breadcrumbs{padding: 20px;}
    .mainsidebar{padding: 40px 20px;}
    .gridcontent{padding: 40px 20px;}
    .supportherotext{padding: 20px;}
    .homesub{padding: 0 20px 20px 20px;}

.subholderhome{padding: 40px 20px; overflow: hidden; width: 100%; margin-bottom: 20px;}
    .halfvideowidth{width:100%;}
}
@media only screen and (max-width: 700px) {
 .eachsocial{width: 100%; margin: 0 auto 20px; display: flex; justify-content: center; flex-wrap: wrap;}   
}
@media only screen and (max-width: 500px) {
.foot1{width: 100%;}
    .foot2{width: 100%;}
    .foot3{width: 100%;}
    .homegrid{display: grid; grid-template-columns: 1fr;}
    .staffgrid{grid-template-columns: 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;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}}