html{color:#222;font-size:1em;line-height:1.4}::-moz-selection{background:var(--main);text-shadow:none;color:#fff;}::selection{background:var(--main);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}
:root {
  --main: #5F781D;
  /*--main: #BDD73C;*/
  --black: #1c2227;

}
body::-webkit-scrollbar {
  width: 11px;
}
body {
  scrollbar-width: thin;
  scrollbar-color: var(--main) #f6f6f6;
}
body::-webkit-scrollbar-track {
  background: #f6f6f6;
}
body::-webkit-scrollbar-thumb {
  background-color: var(--main);
  border-radius: 6px;
  border: 3px solid #f6f6f6;
}
html { box-sizing: border-box;} *, *:before, *:after { box-sizing: inherit; }
a{-webkit-transition:all 0.4s ease;
         -moz-transition:all 0.4s ease;
               -o-transition:all 0.4s ease;
                     transition:all 0.4s ease;
text-decoration: none;
color: var(--main);}
a:hover{}
a img{-webkit-transition:all 0.4s ease;
         -moz-transition:all 0.4s ease;
               -o-transition:all 0.4s ease;
                     transition:all 0.4s ease;}
.smoothie{-webkit-transition:all 1s ease;
         -moz-transition:all 1s ease;
               -o-transition:all 1s ease;
                     transition:all 1s ease;}
.smoothiefast{-webkit-transition:all 0.4s ease-out;
         -moz-transition:all 0.4s ease-out;
               -o-transition:all 0.4s ease-out;
                     transition:all 0.4s ease-out;}
h1,h2,h3,h4,h5,h6{margin: 0 0 10px 0; color: #1d1d1b; font-weight: 900;font-family: 'Raleway', sans-serif;}
p{margin: 0 0 10px 0; color: #7a7f8b; font-weight: 300;}
strong{ color: #000;}
img{max-width: 100%;}
.flex-space-between{display: flex; justify-content: space-between; flex-wrap: wrap;}
.flex-start{display: flex; justify-content: flex-start; flex-wrap: wrap;}
.flex-center{display: flex; justify-content: center; flex-wrap: wrap;}
.flex-reverse{flex-direction: row-reverse;}
/* ==========================================================================
   Author's custom styles
   ========================================================================== */
.container{width: 100%; max-width: 1920px; margin: 0 auto; font-family: 'Rubik', sans-serif; font-weight: 400; color: var(--black); 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: #f7f7f7;}
.header{width: 100%; position: fixed; top: 0; left: 0; z-index: 10000; transition: all 0.3s ease; background: rgba(247,247,247,0.95); padding: 0 40px;}
.innerheader{width: 100%; padding: 0; margin: 0 auto;}



.topline{width: 100%; color: #979797; padding: 10px 0; border-bottom: 1px solid #979797; font-size: 0.7rem;}
.topline a{color: #979797;}
.topline a:hover{color: #1d1d1b; background: none;}
.lowerheader{width: 100%; position: relative; z-index: 101;}


.lowerinnerheader{width: 100%; margin: 0 auto; padding: 10px 0; align-items: center;}
.nav1{width: 33%; text-align: left;}
.headlink{position: relative; color: #1d1d1b; text-transform: lowercase; font-size: 0.9rem; font-weight: 500;}
.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}
.headlink:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: -3px;
  left: 0;
  background-color: var(--main);
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}
.headlink:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

.headlink.current:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: -3px;
  left: 0;
  background-color: var(--main);
 visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}
.headlink.current:hover:before {
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
}
.headlink:hover{background: none; color: #1d1d1b; }
.logo{width: 33%; text-align: center; display: flex; justify-content: center; flex-wrap: wrap;}
.logo img{width: 160px;}
.logosvg{width: 160px; color: var(--black); transition: all 0.3s ease;}
.nav2{width: 33%; text-align: right;}
.logolink:hover .logosvg{background: none; color: var(--green);}
.leftheadlink{margin-right: 10px;}
.rightheadlink{margin-left: 10px;}
.eachslide{width: 100%; height: calc(100vh - 130px); height: 100vh}
.eachsmallslide{width: 100%; height: calc(100vh - 430px);}
.blockvideo{width: 100%; height: calc(100vh - 130px); z-index: 1;}
.slides{position: relative;}
.swiperhero{position: relative; overflow: hidden; height: calc(100vh - 120px); margin-top: 120px; height: 100vh; margin-top: 0;}

.eachhero{position: relative; width: 100%; height: 100vh;}
.slidecaption{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: flex-start; align-content: center; flex-direction: column; flex-wrap: wrap; text-align: center; z-index: 9997; padding-top: 300px;}
.bigstatement{align-self: center; color: #fff; font-weight: 900; font-size: 3rem; text-transform: lowercase; text-shadow: 0 1px 0 rgba(0,0,0, 0.4); width: 100%; padding: 0 25%; font-family: 'Raleway', sans-serif; margin: 0; 
-webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	-moz-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;}

@-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: rgba(229, 0, 86, 0) 2px 3px 5px;}

.smallslidecaption{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; z-index: 9996;}
.smallbigstatement{align-self: center; color: #fff; font-weight: 900; font-size: 3rem; text-transform: lowercase; font-family: 'Raleway', sans-serif; width: 100%;  margin: 0 auto; padding-right: 20%}

.bigstrapline{align-self: center; color: #fff; font-weight: 900; font-size: 1rem; width: 100%; padding: 0 25%; font-family: 'Raleway', sans-serif; margin-bottom: 50px;text-shadow: rgba(0,0,0, 0.4) 2px 3px 5px;}
.bigdivide{margin: 20px 0; width: 15%; height: 1px; background: #fff; align-self: center;}
.biglink{align-self: center; }
.biglink a{color: #1d1d1b; text-transform: lowercase; font-size: 0.9rem; font-weight: 700; display: block; background:var(--main); padding: 20px 30px; border-radius: 30px;}
.biglink a:hover{padding: 20px 40px; letter-spacing: 1.2px; box-shadow: -23px 33px 50px 0 rgba(0, 0, 0, 0.35); background: #fff;}
.greenflash{position: absolute; top:0px; left: calc((100% - 1000px)/2); width: 500px; height: 100%; background: rgb(189,215,60); background: rgba(189,215,60, 0.4); z-index: 9996;}
.greenflashfade{position: absolute; top:0px; left: calc((100% - 1000px)/2); width: 500px; height: 100%; background: rgb(189,215,60); background: rgba(189,215,60, 0.07); z-index: -1;}
.is_stuck{box-shadow: 0 14px 28px rgba(150,150,150,0.15), 0 10px 10px rgba(150,150,150,0.12);}



.heroslideshow{position: relative; overflow: hidden; height: calc(100vh - 120px); margin-top: 120px; height: 100vh; margin-top: 0;}
.heroslideshow img{width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 4;}

.heroslide{width: 100%;  height: 100vh; margin-top: 0; z-index: 4; position: relative; }

.heroslide 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;}


.shallowhero{position: relative; overflow: hidden; height: 60vh; margin-top: 0;}
.shallowslide{width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
.shallowslide img{width: 100%; height: 100%; object-fit: cover;}

.shallowslidecaption{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: flex-start; align-content: center; flex-wrap: wrap; text-align: center; z-index: 9997; padding-top: 120px;}

.breadcrumbs{font-size: 12px; background: rgba(255,255,255,0.4); width: 100%; margin:0; padding: 20px 40px 20px; margin-bottom: 40px; text-align: center;}
.breadcrumbs a{color: #1a1a1a;}
.breadcrumbs span{margin: 0 5px;}

.content{width: 100%; padding: 0 40px 40px; position: relative;}
.homeh1{font-weight: 900; margin-bottom: 40px;}
.hometext{width: 100%; max-width: 800px; text-align: center; margin: 0 auto 40px;}
.homeserviceheader{text-align: center;}
.homeservices{position: relative;}
.twoservices{width: 100%; margin: 0 auto;}
.eachservice{width: 48%; text-align: left; position: relative; padding-bottom: 40px;}
.servicetext{padding: 20px 0;}
.servicetext h2{font-weight: 600; text-transform: lowercase;}
.servicereadmore{position: absolute; bottom: 0; left: 0; width: 100%; border-top:1px solid #ccc; padding: 10px 0; align-items: center;}
.servicereadmore i{color: #1d1d1b;}
.servicereadmore:hover i{color: var(--main);}
.servicereadmore:hover strong{color: var(--main);}
.servicereadmore:hover{background: none; color: var(--main); }

.servicereadmore:before {content: "";position: absolute;width: 100%;height: 2px;top: -0px;left: 0;background-color: var(--main);visibility: hidden;-webkit-transform: scaleX(0);transform: scaleX(0);-webkit-transition: all 0.3s ease-in-out 0s;}
.servicereadmore:hover:before {visibility: visible;-webkit-transform: scaleX(1);transform: scaleX(1);}
.serviceimage{position: relative; overflow: hidden; width: 100%; height: 400px; }
.serviceimage img{width: 100%; height: 100%; object-fit: cover;}
.serviceimagebutton{background: var(--main); color: #fff; width: 60px; height: 60px; border-radius: 50%; align-items: center; z-index: 5; position: relative;}
.serviceimagebuttonholder{position: absolute; top: 0; left:0; width: 100%; height: 100%; align-items: center;}
.servicecircle{background: #000; background: rgba(0,0,0,0.2); width: 40px; height: 40px; border-radius: 50%; align-items: center; z-index: 4; position: relative;}
.servicecircleholder{position: absolute; top: 0; left:0; width: 100%; height: 100%; align-items: center;}
.serviceimage:hover .servicecircle{transform: scale(6,6);}

.serviceimage:hover .serviceimagebutton{transform: scale(1.3,1.3) rotate(180deg); background: #fff; color: #1d1d1b;}
.serviceimage img{transform: scale(1.1,1.1);}
.serviceimage:hover img{transform: scale(1.1,1.1) translate(20px, 0px);}

.swipernav{width: calc(100% + 60px); height: 100%; display: flex; justify-content: space-between; align-content: center; flex-wrap: wrap; position: absolute; top: 0; left: -30px; padding: 0 0 20px; outline: 0px solid red;}
.swiper-next{width: 15px; cursor: pointer; outline: none;}
.swiper-next:hover{opacity: 0.7;}
.swiper-next img{width: 100%;}
.swiper-prev{width: 15px; cursor: pointer; outline: none;}
.swiper-prev:hover{opacity: 0.7;}
.swiper-prev img{width: 100%;}



.workview{width: 100%; background: #f3f3f3 url(../img/lcrop3.png) center right no-repeat;}
.serviceview{width: 100%; background: #f3f3f3 url(../img/webcrop.png) center right no-repeat;}
.innerworkview{width: 100%; padding: 40px; margin: 0 auto; display: flex; }
.workviewcontent{width: 63%; padding: 50px 0;}

.workviewreadmore{width: 100%; border-top:1px solid #ccc; padding: 10px 0; align-items: center; position: relative;}
.workviewreadmore i{color: #1d1d1b;}
.workviewreadmore:hover i{color: #1d1d1b;}
.workviewreadmore:hover{background: none; color: #1d1d1b; }
.workviewreadmore:before {content: "";position: absolute;width: 100%;height: 2px;top: -0px;left: 0;background-color: #000;visibility: hidden;-webkit-transform: scaleX(0);transform: scaleX(0);-webkit-transition: all 0.3s ease-in-out 0s;transition: all 0.3s ease-in-out 0s;}
.workviewreadmore:hover:before { visibility: visible;-webkit-transform: scaleX(1);transform: scaleX(1);}



.footband{overflow: hidden; position: relative; height: 10px; width: 100%; background: #1c2227;}
.footer{width: 100%; height: auto; min-height: 200px; background: #1c2227; position: relative; overflow: hidden;}
.fsb{width: 140px; position: absolute; bottom: -20px; right: 20px;}
.fsb img{width: 100%;}
.footbar{width: 100%; height: auto; border-bottom: 1px solid #555;}
.footnavigation{width: 100%;  margin: 0 auto; padding: 0;}
.footlink{margin: 10px; font-size: 0.8rem; color: #f3f3f3; text-transform: lowercase;}
.footlink:hover{color: var(--main); background:none;}
.footcurrent{color: var(--main);}
.footcurrent:hover{color: #f3f3f3;}
.footsocial{width: 100%; max-width: 700px; margin: 0 auto; }
.footsocial a i{font-size: 18px; line-height: 32px; height: 32px; width: 32px; background:#1c2227 ; color: #f3f3f3; border-radius: 50%; text-align: center; margin: 10px; transition: all 0.3s ease;}
.footsocial a:hover{background: none;}
.fblink:hover{background: #3B5998; color: #f3f3f3;}
.twlink:hover{background: #5EA9DD; color: #f3f3f3;}
.instalink:hover{background: #DD2A7B; color: #f3f3f3;}
.lilink:hover{background: #007bb5; color: #f3f3f3;}
.footcredits{font-size: 0.7rem; width: 100%; text-align: center; color: #f3f3f3; padding: 5px 0 10px;}
.footcredits a:hover{background: none;}
.footcredits span{margin: 0 10px;}

.footerlogo{width: 100%; text-align: center; display: flex; justify-content: center; flex-wrap: wrap; padding: 40px 0 20px;}
.footerlogosvg{width: 160px; color: #fff; transition: all 0.3s ease;}
.footerlogo img{width: 160px;}
.footerlogolink:hover .footerlogosvg{background: none; color: var(--green);}
.subfooter{color: #aaa; font-size: 10px; padding-top: 10px;}

.scart{padding: 10px 20px; background: var(--main); color: #fff; border: none; cursor: pointer; transition: all 0.3s ease; text-transform: lowercase; letter-spacing: 1px; font-size: 14px; font-weight: 800; margin-bottom: 20px;}
.scart:hover{background: var(--black);}


/* ==========================================================================
   WORK
   ========================================================================== */

.eachwork{width: 48%; text-align: left; position: relative; padding-bottom: 40px;display: flex; overflow: hidden; }

.worktext{align-self: center; width: 100%;}
.workimage{position: relative; overflow: hidden; width: 100%; height: 100%; min-height: 400px; display: block;}
.wimage{filter: grayscale(0); }
.grayimage{filter: grayscale(1); }
.workimage img{transform: scale(1.1,1.1);}
.workimage:hover img{transform: scale(1.1,1.1) translate(20px, 0px); }
.workimage:hover{ filter: grayscale(0);}
.wimage:hover{ filter: grayscale(0);}
.grayimage:hover{ filter: grayscale(0);}
.workimage:hover .servicecircle{transform: scale(6,6);}

.workimage:hover .serviceimagebutton{transform: scale(1.3,1.3) rotate(180deg); background: #fff; color: #1d1d1b;}
.workimage img{transform: scale(1.1,1.1);}
.workimage:hover img{transform: scale(1.1,1.1) translate(20px, 0px);}

.workreadmore{position: relative; padding: 10px 0; width: 100%; border-top:1px solid #ccc; padding: 10px 0; align-items: center;}
.workreadmore i{color: #1d1d1b;}
.workreadmore:hover i{color: var(--main);}
.workreadmore:hover strong{color: var(--main);}

.workreadmore:before {content: "";position: absolute;width: 100%;height: 2px;top: -0px;left: 0;background-color: var(--main);visibility: hidden;-webkit-transform: scaleX(0);transform: scaleX(0);-webkit-transition: all 0.3s ease-in-out 0s;}
.workreadmore:hover:before {visibility: visible;-webkit-transform: scaleX(1);transform: scaleX(1);}

.worktext h2{font-weight: 300;}
.worktext h4{font-weight: 300;}
.wtext{padding: 80px 0;}
.worklink{padding: 10px 20px; border:1px solid var(--main); border-radius:4px; text-transform: lowercase; font-size: 0.8rem; font-weight: 500; margin: 10px 0 20px;display: inline-block; }
.worklink i{margin-left: 10px;}
.worklink:hover{background:var(--main); color: #fff; }
.workdivider{width: 80px; background: #ccc; display: block; height: 1px; margin: 10px 0;}

.shiftimage{width: 100%; height: 100%; display: block;}
.shiftimage{transform: scale(1.1,1.1);}
.workimage:hover .shiftimage{transform: scale(1.1,1.1) translate(20px, 0px);}
.shiftimage:hover{background-color: transparent;}
.shiftimage img{width: 100%; height: 100%; object-fit: cover;}
.workdesc{font-size: 14px; font-weight: 300;}
/* ==========================================================================
   CASE STUDY
   ========================================================================== */

.casestudy{width: 100%;  margin: 0 auto; height: auto; min-height: 500px; background: #f3f3f3; padding: 20px;}
.casehead{font-weight: 300;}

.siemabtn{width: 50%; padding: 10px; text-align: center; border: 1px solid #f3f3f3; color: #1c2227;}
.siemabtn:hover{background: #ebebeb;}
.worktestimonial{width:100%; padding:20px; background: #fff; margin-bottom:20px; position: relative; overflow: hidden;}
.worktestimonialcontent{position: relative; z-index: 2;}
.worktestimonial:after {
  content: "\f10d"; 
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  position: absolute;
  font-size: 150px;
  color: #f3f3f3;
  bottom: -60px;
  right:-20px;
  
  z-index: 1;
}

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.testimonial{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); background: #fff; text-align: center; position: relative; padding: 40px 80px; border-radius: 20px;}
.testimonialbody{color: #fff; font-weight: 400; }
.testimonialname{color: #1a1a1a; font-weight: 700; font-size: 20px; margin-bottom: 20px;}
.testimonialcase{margin-bottom: 20px;}
.testimonialcase a{color: var(--main); font-weight: 700; font-size: 16px;}
.testimonialcase a:hover{color: var(--main); }
.testimonialstars{color: #fff; font-weight: 700; font-size: 20px; width: 100%; text-align: center;}
.testimonialquote{width: 100%; text-align: center; opacity: 1; font-size: 144px; line-height: 84px; color: var(--main); font-family: "Times New Roman", Times, serif;}
.checked {color: orange;}
/* ==========================================================================
   SERVICES
   ========================================================================== */
.theservices{width: 100%;  margin: 0 auto 20px;}
.eachserviceimage{background: #f3f3f3; width: 48%; overflow: hidden;position: relative; }
.eachserviceimage img{transform: scale(1.1,1.1);}
.eachservicecontent{width: 48%; text-align: left; position: relative; padding: 40px 0; background: #f3f3f3; background:none; display: flex; overflow: hidden; }

.leasepricing{width: 100%;  margin: 0 auto 20px; height: auto; background: #f3f3f3; padding: 20px;}
.leaseheader{text-align: center;}
.leaseheader h2{margin: 0;}
.leasecontent{width: 100%; display: none;}

.theserviceimage{background: #f3f3f3; width: 100%;}
.theservicecontent{width: 100%; text-align: left; position: relative; padding: 40px; background: #f3f3f3; display: flex; overflow: hidden; }


.eachserviceimage:hover .servicecircle{transform: scale(6,6);}

.eachserviceimage:hover .serviceimagebutton{transform: scale(1.3,1.3) rotate(180deg); background: #fff; color: #1d1d1b;}
.eachserviceimage img{transform: scale(1.1,1.1);}
.eachserviceimage:hover img{transform: scale(1.1,1.1) translate(20px, 0px);}
.eachserviceimage:hover .shiftimage{transform: scale(1.1,1.1) translate(20px, 0px);}
/* ==========================================================================
   DIGITAL MARKETING
   ========================================================================== */
.digitalcontent{width: 100%; text-align: left; position: relative;}
.eachstructure{width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: flex-start; margin-bottom: 20px; padding: 40px; background: rgba(0,0,0,0.05); }
.digitaltitle{width: 35%;}
.digitaltext{width: 65%;}
/* ==========================================================================
   PRICING
   ========================================================================== */
.pricing{width: 100%;}
.eachpricing{width: 32%; padding-bottom: 100px; background: #fff; position: relative;}
.silverhead{background: #BDC3C6;}
.goldhead{background: #F2E077;}
.platinumhead{ background: #E5E4E2;}
.pricehead{padding: 20px; text-transform: lowercase; font-weight: 500; text-align: center;}
.pricecontent{padding:20px;}
.eachprice{background: #f3f3f3; margin-bottom: 10px; padding: 10px 20px; text-align: center;}
.pricefoot{position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px; text-align: center;}
.smallprint{font-size: 0.7rem; padding: 0 20px;}
.pricefoot p{color: #000;}
/* ==========================================================================
   BLOG
   ========================================================================== */
.blogtext{width: 100%;  text-align: center; margin: 0 auto 40px;}
.eachblogarchive{width: 100%; border-bottom: 1px solid #1c2227; padding: 20px 0; align-items: center;}
.eachblogarchivetitle{font-weight: 600; text-transform: lowercase; font-size: 1.6rem; margin: 0;}
.eachblogarchivetitle span{font-weight: 300; font-size: 1rem; margin-left: 10px;}
.eachblogarchivelink{background: #1c2227; color: #fff; padding: 15px 10px; border: 1px solid #1c2227; border-radius: 50%; font-size: 0.8rem;}
.eachblogarchive:hover{box-shadow: inset 1200px 0 0 0 #f3f3f3; color: #fff; background:none;}
.eachblogarchive:hover .eachblogarchivelink{background:var(--main); color: #fff; border: 1px solid #fff;}

.blogheader{width: 100%; border-bottom: 1px solid #1c2227; padding-bottom: 20px;}
.blogtitle{font-weight: 600; text-transform: lowercase; font-size: 1.6rem; }
.bloghead{font-weight: 600; text-transform: lowercase; margin: 10px 0 20px;}
.blogcontent{padding: 20px 0; text-align: left;}
.blogimage{position: relative;}
.blogimage img{width: 100%;}
.shareicons{position: relative; width: auto; text-align: left;}

.bloggrid{display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 40px; width: 100%; max-width: 1200px; margin: 0 auto;}


.eachblog{display: flex; justify-content: flex-start; flex-wrap: wrap; flex-direction: column; background: #fff; border-bottom: 5px solid var(--main);}
.eachblog1, .eachblog5{grid-column: 1 / 4; flex-direction: row; border-bottom: 0px solid var(--main);}
.eachblogimage{width: 100%; height: 200px; overflow: hidden; position: relative;}
.eachblogimagecover{position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; background: var(--main); opacity: 0; transition: 0.3s all ease;}
.eachblogimage img{width: 100%; height: 100%; object-fit: cover; transform: scale(1.1,1.1); transition: 0.3s all ease; position: relative; z-index: 3;}
.eachblogimage1, .eachblogimage5{width: 66.7%; height: 400px;}

.eachblogimage:hover img{transform: scale(1,1);}
.eachblogimage:hover .eachblogimagecover{opacity: 0.3;}

.eachblogdetails{width: 100%; padding: 40px;}
.eachblogdetails1, .eachblogdetails5{width: 33.3%; border-bottom: 5px solid var(--main);}
.blogpagination{grid-column: 1 / 4;}
.pagholder{display: inline-block}

.eachblogdetailsupper{margin-bottom: 20px;}
.eachblogdate{font-size: 12px; color: var(--main); margin-bottom: 10px;}
.eachblogtitle{font-size: 20px; text-transform: lowercase; font-weight: 900; color: #1a1a1a;}
.eachblogtext{font-size: 14px; color: #aaa; margin-bottom: 20px;}

.eachbloglink{padding: 10px 20px; background: var(--main); color: #1a1a1a; font-size: 14px; text-transform: lowercase; font-weight: 700; border-radius: 30px;}
.eachbloglink:hover{color: #fff; padding: 10px 30px;}
/* ==========================================================================
   CONTACT
   ========================================================================== */
.gmap5{width: 100%; height: 400px;}
.contacttext p{font-size: 1.2rem;}

.contacttext{width: 100%; max-width: 800px; text-align: left; margin: 0 auto;}
.middletext{width: 100%; text-align: center; padding: 0 calc((100% - 800px) / 2);}

.testimonialtext p{font-size: 1rem;}

.testimonialtext{width: 100%; max-width: 800px; text-align: left; margin: 0 auto;}


/* ==========================================================================
   MOSAIC
   ========================================================================== */
.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);}
.accordionholder{width: 100%; margin: 40px auto;text-align: left;}
.thedetails{padding: 30px; display: block; background: rgba(255,255,255,0.4);}

.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(--main); 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; text-align: left;}

.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;
}
/* ==========================================================================
   GDPR
   ========================================================================== */

.privacylinks{width: 100%; padding: 40px 40px 20px; background: var(--main); 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: lowercase; font-weight: 600; font-size: 14px;}
.privacylink:hover{background: rgba(255,255,255,0.5); }
.privacycontent{padding: 40px 0; text-align: left;}


.ptable{margin: 20px 0;}
.ptable tr td{padding: 20px; border: 1px solid #ccc;}
.ptable thead th{padding: 20px; background: var(--main); }
.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(--main); 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;}

.sitemapul{list-style-type: none;}
.sitemapul li{margin-bottom:5px; background:rgba(0,0,0,0.05); padding: 10px;}
.sitemapul li ul li{margin-bottom:0px; background:none;}
.sitemapul li ul{list-style-type: none;}


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


.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(--main);}
.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%);
}


/* ==========================================================================
   FIVE FOR FRIDAY
   ========================================================================== */
.fivep{text-align: left;}
.fivetrack{width: 100%; border-bottom: 0px solid #1c2227; padding: 10px 0; text-align: left;}
.fivecontent{width: 100%; background: #f3f3f3; padding: 20px;}
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.fivearchive{width: 100%; max-width: 800px; margin: 0 auto;}
.eachfivearchive{width: calc(50% - 10px); height: 200px; margin-bottom: 20px; position: relative; overflow: hidden;}
.eachfivearchiver{width: calc(50% - 10px); height: 200px; margin-bottom: 20px; position: relative; overflow: hidden;}
.eachfivedate{position: absolute; bottom: 0px; left: 0px; background: #fff; background: rgba(255,255,255,1.8); padding: 5px; color: #000; z-index: 10;}
.fivethumb{width: 100%; height: 100%; position: absolute; transform: scale(1.1,1.1); z-index: 3;}
.eachfivetracks{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.8); color: #000; padding: 10px; font-size: 0.7rem; z-index: 5; opacity: 0;}
.eachfivearchiver:hover .eachfivetracks{opacity: 0.9;}
.eachfivearchive:hover .fivethumb{transform: scale(1.1,1.1) translate(17px, 0px);}
.eachfivearchive:hover .eachfivedate{background: var(--main); background: rgba(189,215,60,0.7); color: #fff;}

/* ==========================================================================
   LINKS
   ========================================================================== */
.eachuseful{width:100%; background:rgba(0,0,0,0.05); padding:20px 20px 40px 20px; margin-bottom:20px; position:relative;}
.usefullink{position:absolute; bottom:0; right:0; padding:10px; background: #fff; color: #1a1a1a;}
.smallchevron{font-size:0.7rem;}


/* ==========================================================================
   PLANNER
   ========================================================================== */
.hiddenform{width: 100%; height: 0px; overflow: hidden;}
.successh2{font-weight: 700; color: var(--main);}
.errorh3{font-weight: 700; color: firebrick;}
.eacherror{font-weight: 500; color: firebrick;}
.form_message{margin-bottom: 20px;}
.theplanner{width: 100%;  margin: 0 auto; background: rgba(0,0,0,0.05); min-height: 500px;}
.theform{width:100%; margin: 0 auto; padding: 40px;}
.formsection{margin-bottom: 20px; padding-bottom: 20px; border-bottom:1px solid #999;}
.halfinput{width:  49%;}
.thirdinput{width: 31%;}
.fullinput{width: 100%; }
textarea{height: 140px}
.textinput{width: 100%; border-top: 1px solid #d9d9d9; border-left: 1px solid #d9d9d9; border-right: 1px solid #d9d9d9; padding: 15px;}
.textinput:focus{background: #d9d9d9;}
.submitinput{width: 100%; text-align: center;}
.submitbutton{border: 1px solid #1c2227; background: #1c2227; color: #fff; padding: 28px 10px; transition: 0.4s; border-radius: 50%; text-transform: lowercase; font-weight: 600;}
.submitbutton:hover{background: #444;}
.submitbutton:active{background: #666;}

.eachcheck{text-align: center; width: 14%; padding: 10px; }
/**
 * Start by hiding the checkboxes
 */
input[type=checkbox] {
	visibility: hidden;
}

/**
 * Checkbox Four
 */
.checkboxFour {
	width: 30px;
	height: 30px;
	background: #1c2227;
	margin: 10px auto;

	border-radius: 100%;
	position: relative;
	box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
}

/**
 * Create the checkbox button
 */
.checkboxFour label {
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 100px;

	transition: all .5s ease;
	cursor: pointer;
	position: absolute;
	top: 5px;
	left: 5px;
	z-index: 1;

	background: #333;
	box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
}


/**
 * Create the checked state
 */
.checkboxFour input[type=checkbox]:checked + label {
	background: var(--main);
}


.thebudget{width: 100%; text-align: left; padding: 20px 0; font-size: 1.8rem;}

input[type=range] {
  -webkit-appearance: none;
  margin: 18px 0;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  /*animate: 0.2s;*/
  
  background: #fff;
  border-radius: 1.3px;
  border: 0px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
  
  border: 0px solid #000000;
  height: 36px;
  width: 36px;
  border-radius: 18px;
  background: var(--main);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -14px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #fff;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  /*animate: 0.2s;*/
  
  background:#fff;
  border-radius: 1.3px;

}
input[type=range]::-moz-range-thumb {
  
  height: 36px;
  width: 36px;
  border-radius: 18px;
  background: var(--main);
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  /*animate: 0.2s;*/
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #fff;
  
  border-radius: 2.6px;

}
input[type=range]::-ms-fill-upper {
  background: #fff;

  border-radius: 2.6px;
 
}
input[type=range]::-ms-thumb {
  
  height: 36px;
  width: 36px;
  border-radius: 18px;
  background: var(--main);
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #fff;
}
input[type=range]:focus::-ms-fill-upper {
  background: var(--main);
}







/* -------- TWITTER FEED ------*/
.twittercontent{padding: 40px 0; position: relative;}

.tweet{width: 90%; max-width: 600px; margin: 0 auto; display: block; background: #fff; background: rgba(255,255,255,0.03); border-radius: 10px; padding: 20px;}
.twitter-article{display: none; width: 100%; position: relative; padding-bottom: 30px; overflow: hidden;}
#tw1{display: block;}
.twitter-pic{width:50px; outline: 0px solid red; float: left;}
.twitter-pic:hover{background: none;}
/* -------- TEXT STYLING ------*/
.twitter-text {width:calc(100% - 70px); float: right; color: #f3f3f3;font-size: 0.8rem; }
.twitter-text p {margin:0px;line-height:22px; font-size: 0.8rem;  }
.twitter-text a {color: #00acee;text-decoration: none;}
.twitter-text a:hover {text-decoration: underline;color: #00acee; background: none;}
.tweet-time {font-size:10px;color:#878787;position: absolute; bottom: 0; left: 0;}
.tweet-time a, .tweet-time a:hover {color:#878787; background-color: transparent;}
.tweetprofilelink a {color:#fff;}
.tweetprofilelink a:hover {color:#fff; background-color: transparent;}
  
/* -------- FEED  ACTIONS ------*/
.twitter-actions {width:75px;position: absolute; bottom: 0; right: 0;}
.intent {width:25px;height:16px;float:left; }
.intent a{width:25px;height:16px;display:block; background-image:url(../img/tweet-actions.png);float:left; transition: 0s all ease;} 
.intent a:hover{background-image:url(../img/tweet-actions.png);background-position:-25px 0px;} 
.intent-retweet a{background-position:0px -17px;} 
.intent-retweet a:hover{background-image:url(../img/tweet-actions.png); background-position:-25px -17px; background-color: transparent !important;} 
.intent-fave a{background-position:0px -36px;} 
.intent-fave a:hover{background-image:url(../img/tweet-actions.png); background-position:-25px -36px; background-color: transparent !important;} 
.intent-reply a:hover{background-color: transparent !important;} 
/* -------- RETWEET INDICATOR ------*/
.retweet-indicator {width:14px;height:10px;background-image:url(../img/tweet-actions.png);background-position:-5px -54px;margin-top:3px;float:left;}


.paginatedtop{width:100%; display:flex; justify-content:space-between; flex-wrap:wrap; padding:5px 0; font-weight:400; font-size:0.8rem; color:var(--main); grid-column: 1 / 3;}
.noresults{font-size:1.1rem; font-weight: 400; color: var(--main);}
/*
    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: #fff;
}


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(--main);
    color: #fff;
}
div.pagination span.page_current {
    background-color: var(--main);
    color: #fff;
}
div.pagination a.next, div.pagination a.prev{padding: 5px 10px;}
div.pagination a.next:hover{
    background-color: #f5f5f5;
    color: var(--main);
}
div.pagination a.prev:hover{
    background-color: #f5f5f5;
    color: var(--main);
}

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(--main);
    * zoom: 100%;
    text-decoration: none; 
    font-size:0.8rem; font-weight: 400; color: var(--main);
}
div.pagination a:hover, div.pagination a:active {
    border: 1px solid var(--main);
background-color: var(--main);
    color: #fff;
}
div.pagination span.page_current {
    padding: 2px 5px 2px 5px;
    margin: 2px;
    border: 1px solid var(--main);

    * zoom: 100%;
    font-size:0.8rem;
    
    background-color: var(--main);
    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;}
/* ==========================================================================
   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{left: calc((100% - 1920px) / 2); width: 1920px;}}

@media only screen and (min-width: 1220px) {.navigation{display: flex!important;}.uppernav{display: flex!important;}.ham{display: none; order: 4;}}
@media only screen and (max-width: 1220px) {
    
    .header{align-items: center; background: #fff;}
    .logoholder{order: 1; background: #fff;}
    .ham{display: block; order: 2;}
    
    .headlink{display: block;}
    .logo{order: 1;}
    .ham{order: 2;}
    .nav1{order: 3; width: 100%; display: none; padding-top: 20px;}
    .nav2{order: 4; width: 100%; display: none; text-align: left;}
    .rightheadlink{margin: 0 0 10px;}
    .leftheadlink{margin: 0 0 10px;}
    
.bigstatement{font-size: 2rem;}
.bigstrapline{font-size: 1rem;}
.bigdivide{width: 20%;}
   
    .logo{width: 100px;}
    .logosvg{width: 100px;}
    .content{padding: 40px 20px;}
    .innerworkview{padding: 40px 20px;}
.workviewcontent{ width: 48%; padding: 20px 0;}
.workview{background: #f3f3f3 url(../img/lcrop3a.png) center right no-repeat;}
    .serviceview{width: 100%; background: #f3f3f3 url(../img/webcropa.png) center right no-repeat;}
    .eachblogarchive{width: 100%; border-bottom: 1px solid #1c2227; padding: 20px 0; align-items: center;}
.eachblogarchivetitle{font-weight: 600; text-transform: lowercase; font-size: 1.6rem; margin: 0; width: 100%; text-align: center;}
.eachblogarchivetitle span{font-weight: 300; font-size: 1rem; margin-left: 0; width: 100%; text-align: center; display: block;}
.eachblogarchivelink{display: none;}


.swipernav{width: 100%; height: auto; display: flex; justify-content: space-between; align-content: center; flex-wrap: wrap; position: absolute; top: 0; left: 0; padding: 0 0 20px; z-index: 500;}
    .homeserviceheader{text-align: center;}
    
    
    
    .bloggrid{grid-template-columns: 1fr 1fr;}


.eachblog1, .eachblog5{grid-column: 1 / 2; flex-direction: column;}
.eachblogimage1, .eachblogimage5{width: 100%; height: 200px;}

.eachblogdetails1, .eachblogdetails5{width: 100%; border-bottom: 0px solid var(--main);}
.blogpagination{grid-column: 1 / 3;}

.eachblog{display: flex; justify-content: flex-start; flex-wrap: wrap; flex-direction: column; background: #fff; border-bottom: 5px solid var(--main);}

}

    
@media only screen and (max-width: 800px) {

.eachservice{width: 100%; margin-bottom: 20px; }
.wtext{padding: 20px 0; border-bottom: 1px solid #ccc;}
.workview{background: #f3f3f3 url(../img/lcrop3small.png) center right no-repeat;}
    .serviceview{width: 100%; background: #f3f3f3 url(../img/webcropsmall.png) center right no-repeat;}
.workviewcontent{ width: 100%; padding: 20px 0;}
.tweet{width: 90%;}
.footnavigation{justify-content: center;}
 .eachsmallslide{width: 100%; height: calc(100vh - 330px);}   
    .eachwork{width: 100%; margin-bottom: 20px; }
    .eachserviceimage{width: 100%; height: 250px;}
    .eachservicecontent{width: 100%;}
    .eachcheck{text-align: center; width: 50%; padding: 10px; background: rgba(255,255,255,0.5); border: 1px solid #f3f3f3; }
   .eachpricing{width: 100%; margin-bottom: 20px; padding-bottom: 140px;}
/*.eachfivearchive{width: 100%; height: 100px; margin-bottom: 20px; position: relative;}*/
    .gmap5{width: 90%; height: 400px; margin: 0 auto;}
    .thirdinput{width: 100%; margin-bottom: 20px;}
    .digitaltitle{width: 100%;}
.digitaltext{width: 100%;}
    
.serviceimage:hover .servicecircle{transform: scale(3,3);}
.serviceimage:hover img{transform: scale(1.1,1.1) translate(0px, 0px);}
    
.workimage:hover .servicecircle{transform: scale(3,3);}
.workimage:hover img{transform: scale(1.1,1.1) translate(0px, 0px);}
    
.eachserviceimage:hover .servicecircle{transform: scale(3,3);}
.eachserviceimage:hover img{transform: scale(1.1,1.1) translate(0px, 0px);}
    
.workimage:hover .shiftimage{transform: scale(1.1,1.1) translate(0px, 0px);}
.eachserviceimage:hover .shiftimage{transform: scale(1.1,1.1) translate(0px, 0px);}
.twitter-article{min-height: 120px;}
    
.workimage{min-height: 300px;}
.eachserviceimage{min-height: 300px;}
.fsb{width: 100px; position: absolute; bottom: -20px; right: 20px;}
    
    .header{padding: 0 20px;}
       .bloggrid{grid-template-columns: 1fr; grid-gap: 0; grid-row-gap: 40px;} 
    .eachblog1, .eachblog2, .eachblog3, .eachblog4, .eachblog5, .eachblog6, .eachblog7, .eachblog8{grid-column: 1;}
}




/* ==========================================================================
   Slideshow Animation
   ========================================================================== */
.slideimage{position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;}
.heroslide{overflow: hidden;}
.slideimage img{width: 100%; height: 100%; object-fit: cover;}

@keyframes fontbulger {
  0%,100% {
   -webkit-transform:scale(1.0, 1.0);
   -moz-transform:scale(1.0, 1.0) rotate(0.02deg); 
    -ms-transform:scale(1.0, 1.0);
     -o-transform:scale(1.0, 1.0);
        transform:scale(1.0, 1.0);

  }

  50% {
   -webkit-transform:scale(1.1, 1.1);
   -moz-transform:scale(1.1, 1.1) rotate(0.02deg);
    -ms-transform:scale(1.1, 1.1);
     -o-transform:scale(1.1, 1.1);
        transform:scale(1.1, 1.1);
      

  }
    
}/*
@-webkit-keyframes fontbulger {
  0%,100% {
   -webkit-transform:scale(1.0, 1.0);
   -moz-transform:scale(1.0, 1.0) rotate(0.02deg);
    -ms-transform:scale(1.0, 1.0);
     -o-transform:scale(1.0, 1.0);
        transform:scale(1.0, 1.0);

  }

  50% {
   -webkit-transform:scale(1.1, 1.1);
   -moz-transform:scale(1.1, 1.1) rotate(0.02deg);
    -ms-transform:scale(1.1, 1.1);
     -o-transform:scale(1.1, 1.1);
        transform:scale(1.1, 1.1);
      

  }
    
}
*/
.eachslide {

   -webkit-animation:fontbulger 36s infinite;
   -moz-animation:fontbulger 36s infinite;
    -ms-animation:fontbulger 36s infinite;
     -o-animation:fontbulger 36s infinite;
        animation:fontbulger 36s infinite;
}

.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}}