#popbox {border: 3px solid #ddcb81; background: #1b1b1b linear-gradient(90deg, #00414A 0%, #000D0FBF 100%) 0% 0% no-repeat padding-box;  color: #ffffff; font-size: 14pt; font-family: "open sans"; padding: 7px 20px; border-radius: 10px; transform: translateX(calc(-50% + 20px));white-space: nowrap;}
#popbox.long {max-width: 400px; white-space: pre-wrap; line-height: 1.2em;}
#popbox .name {font-weight: 900; color: #ddcb81;}
#popbox span {color: #fef27d; font-weight: 600;}

#landpages {background: #000000; overflow: hidden; padding: 0; width: 100%; height: 50px;position: relative; z-index: 100; color: #ffffff;}

#landpages .closeland {background: red; color: #ffffff; cursor: pointer; position: absolute; top: 15px; right: 20px; width: 20px; height: 20px; border-radius: 5px; display: flex; justify-content: space-around; align-items: center; font-size: 12px; transition: all 0.3s; opacity: .6; z-index: 300;}
#landpages .closeland:hover {opacity: 1;}

#landpages .landowned .buckets { width:100%; height: 50px; display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; position: sticky; top: 0px; z-index: 200; background: black linear-gradient(90deg, #00414A 0%, #000D0FBF 100%) 0% 0% no-repeat padding-box;}
#landpages .landowned .buckets .button {width: 300px; display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; background: transparent linear-gradient(90deg, #00414A 0%, #000D0FBF 100%) 0% 0% no-repeat padding-box; padding: 1px 7px 0px 7px; margin:  0px 10px ; border: 1px solid #786A2F; box-sizing: border-box;transition: all 0.3s; position: relative; cursor: pointer;}
#landpages .landowned .buckets .button:hover {box-shadow: 0 0 4px #ffe36c;  filter:brightness(140%) }
#landpages .landowned .buckets .button.active {box-shadow: 0 0 4px #ffe36c; filter:brightness(120%); background: transparent linear-gradient(90deg, #000D0FBF 0%, #00414A 100%) 0% 0% no-repeat padding-box;}



#landpages .landowned .buckets .button.marketstuff { background: transparent linear-gradient(90deg,#ff9300 0, #650000 100%) 0% 0% no-repeat padding-box; border: 2px solid #fff188;  transition: transform .2s ease-out;  color: #ffffff;	}

#landpages .landowned .buckets .button.lookup #lookupinfo {border:0; outline: 0;background: transparent linear-gradient(90deg,#368000  20%, #001416 100%) 0% 0% no-repeat padding-box;; color: #ffffff; font-weight: 500; line-height: 1em; padding: 2px 10px;}
#landpages .landowned .buckets .button.lookup #lookupinfo::placeholder {color: #c2c2c2;}


#landpages .landowned {background: rgba(0,0,0,.7); position: fixed; top: 0px; left: 0;  width: 100%; height: 100%; transform: translateX(-100%); transition: all 0.5s; z-index:1000; overflow-y: scroll; padding: 0 ; box-sizing: border-box; z-index: 200;}
#landpages .landmarket {background: rgba(0,0,0,.7); position: fixed; top: 0px; left: 0;  width: 100%; height: 100%; transform: translateX(-100%); transition: all 0.5s; z-index:1000; overflow-y: scroll; padding: 0; box-sizing: border-box; z-index: 200;}
#landpages .landowned.show {transform: translateX(0);}

#landpages {}
#landpages .landswrapper {display: flex; justify-content: space-around; align-items: stretch; flex-wrap: wrap; padding: 10px 10px 50px 10px; box-sizing: border-box;  z-index: 2;}
#landpages .landswrapper .itembox {display: inline-block; margin: 10px; position: relative; overflow: hidden; cursor: pointer;}
#landpages .landswrapper .itembox.hideme {display: none;}

#landpages .landswrapper .toomuchshit {width: 100%; font-size: 22px; color: yellow; text-align: center; position: relative; order: 0;}
#landpages .landswrapper .toomuchshit.market {font-size: 16px; color: #e2e2e2 }

#landpages .overlay {position: absolute; top: 0; right: 0; width: 40%; height: 100%; padding: 10px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
#landpages .overlay .centerbox {text-align: center; width: calc(100% - 10px);}
#landpages .overlay .centerbox .reg-ter-names { font-size: 1.2em;}
#landpages .overlay .centerbox .location {display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; background: transparent linear-gradient(90deg, #00414A 0%, #000D0FBF 100%) 0% 0% no-repeat padding-box; padding: 1px 7px 0px 7px; margin:  10px 0px 5px 0; border: 1px solid #786A2F; border-radius: 8px; box-sizing: border-box;transition: all 0.3s; position: relative;}
/*#landpages .overlay .centerbox .location:hover {box-shadow: 0 0 4px #ffe36c;}*/
#landpages .overlay .centerbox .location .locbox {display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap;}
#landpages .overlay .centerbox .location .locbox .imagewrapper {display:flex; justify-content: space-around; align-items: center;}
#landpages .overlay .centerbox .location .locbox .number {display:inline-block; margin-left: 7px;}
#landpages .overlay .centerbox .owner {color: #ffe36c}
#landpages .overlay .centerbox .resourcetype {text-transform: capitalize;}
#landpages .overlay .centerbox .rarity {text-transform: capitalize;}
#landpages .overlay .centerbox .boosts {display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap;}
#landpages .overlay .centerbox .boosts .imagewrapper {display: inline-block;}
#landpages .overlay .element {margin: 5px 0; font-size: 20px;}

#landpages .overlay .element.totalpp {margin-top: 10px;display: flex; justify-content: space-around; align-items: center;}
#landpages .overlay .element.totalpp .centerbox {display: flex; justify-content: center; align-items: center;}
#landpages .overlay .element.totalpp .icon {display: inline-block; margin-right: 5px;line-height: 0px;}
#landpages .overlay .element.totalpp .textwrap {display: inline-block; font-size: 24px;}

#landpages .resourceoverlay {position: absolute; bottom: 12px; right: 12px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
/*#landpages .resourceoverlay .imagewrapper {border: 1px solid #ffe36c; background: rgba(255,255,255,.3);}*/

#landpages .miscoverlay {position: absolute; bottom: 156px; left: 14px; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;  }
#landpages .buildingoverlay {position: absolute; bottom: 247px; left: 15px; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;  }



#landpages .workersoverlay {position: absolute; bottom: 44px; left: 14px; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;  }
#landpages .stakedoverlay .imagewrapper {margin-right: 10px;  display: inline-block; position: relative;}
#landpages .stakedoverlay .imagewrapper.gold .goldoverlay {border: 2px solid #1b1b1b; background: rgba(241,218,54,.9); color: #1b1b1b; position: absolute; top: 0px; right: 0px; height: 16px; width: 36px; font-size: 10px; font-weight: 700;opacity: 1; border-radius: 8px;  display: flex; justify-content: space-around; align-items: center; }

#landpages .stakedoverlay .imagewrapper .modbox {border: 2px solid #1b1b1b; background: transparent; color: #1b1b1b; position: absolute; bottom: 0px; right: 0px; height: 16px; width: 40px; font-size: 14px; font-weight: 700;opacity: 1; border-radius: 8px;  display: flex; justify-content: space-around; align-items: center; }
#landpages .stakedoverlay .imagewrapper .modbox.posative {background: #20c90e;}
#landpages .stakedoverlay .imagewrapper .modbox.negative {background: #8c0b0b;color: #ffffff; border-color: #ffffff}

#landpages .stakedoverlay .imagewrapper .paddingbox {padding: 4px; position: absolute; overflow:hidden; top: 4px; left: 4px; width: 64px; height: 64px; border-radius: 5px;}
#landpages .stakedoverlay .imagewrapper .cardart {position: absolute; top: -12px; left:-12px; width: 100px; height: 160px;display: flex; justify-content: space-around; align-items: flex-start; }
#landpages .stakedoverlay .imagewrapper .dotbox {border: 2px solid #1b1b1b; position: absolute; top: 0px; left: 0px; width: 16px; height: 16px; border-radius: 50%;}
#landpages .stakedoverlay .imagewrapper .dotbox.common {background: #bfd1da;}
#landpages .stakedoverlay .imagewrapper .dotbox.rare {background: #7ac2ff;}
#landpages .stakedoverlay .imagewrapper .dotbox.epic {background: #ca6eeb;}
#landpages .stakedoverlay .imagewrapper .dotbox.legendary {background: #f3c059;}
#landpages .stakedoverlay .imagewrapper .ppbox { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%) translateY(100%); border: 1px solid #ded825; color: #ded825; line-height: 1.1em;  padding: 2px 6px; border-radius: 4px;
	background: black linear-gradient(90deg, #00414A 0%, #000D0FBF 100%) 0% 0% no-repeat padding-box;
}

#landpages .stakedoverlay .imagewrapper.item .cardart {position: absolute; top: 4px; left:0px; width: 72px; height: 72px;display: flex; justify-content: space-around; align-items: flex-start; }
#landpages .stakedoverlay .imagewrapper.building .cardart {position: absolute; top: 2px; left:0px; width: 72px; height: 72px;display: flex; justify-content: space-around; align-items: flex-start; }
#landpages .stakedoverlay .imagewrapper.building .cardart img {filter: brightness(1.5);}



#landpages .cardzoom {padding: 2px 10px; border-radius: 5px; border: 1px solid #ded825; font-size: 14px; background: rgba(0,200,25,.5) ; cursor: pointer; font-weight: 600; transition: all 0.3s; }
#landpages .cardzoom:hover {background-color: rgba(200,25,0,.5);}



#landpages h2 {color: #ffb33b; font-size: 22pt; font-family: "Open Sans";}
#landpages .element.deedtype {color: #ec8100; font-family: "Open Sans"; font-size: 35px; font-weight: 600;}

#landpages .saleoverlay {position: absolute; top: 4%; width: 50%; background: rgba(255,255,255,.8);color: #000000; font-size: 28px; line-height: 1em; padding: 15px 0 10px; text-align: center; transform: rotate(-45deg) translateX(-27%);}
#landpages .saleprice span {font-weight: 700; font-size: 36px; position: relative; top: 2px;}



/* Filter Groups */
#landpages .landfilters {background: #000000; border-bottom: 1px solid #786A2F;  margin-left: 0px; padding-bottom: 7px;width: 100%; display: flex; justify-content: space-around;  align-items: center; flex-wrap: wrap; position: sticky; top: 50px; z-index: 200;}
#landpages .landfilters .filtergroup {display: inline-block;}
#landpages .landfilters .filtergroup .filteritem {display: inline-block; margin: 3px; cursor: pointer; opacity: 1;}
#landpages .landfilters .filtergroup .filteritem:hover {opacity: 1; filter:brightness(140%);}
#landpages .landfilters .filtergroup .filteritem.active {opacity: 1;  filter:brightness(30%);}

#landpages .landfilters .filtergroup.types {display: flex; justify-content: flex-start; align-items: center; margin-top: 29px;}
#landpages .landfilters .filtergroup .filteritem.types { width: 30px; overflow: hidden; display: flex; justify-content: space-around; align-items: center; transform: rotate(-45deg);}
#landpages .landfilters .filtergroup .filteritem.types img {transform: rotate(45deg); width: 40px; height: 40px; max-width: unset;}


#landpages .landfilters .filtergroup.resources {margin-bottom: 0;display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; align-self: flex-start;}
#landpages .landfilters .filtergroup.resources .magicalshit {max-width: 216px; margin-bottom: 0;display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; align-self: flex-start;}
#landpages .landfilters .filtergroup.resources .filteritem {line-height:0; display: inline-block;}
#landpages .landfilters .filtergroup.resources .filteritem .element.icon {line-height: 0;}
#landpages .landfilters .filtergroup.resources .filteritem .element.icon img {width: 30px; height: auto;}
#landpages .landfilters .filtergroup.resources .filteritem.allmagic {display: flex; justify-content: space-around; align-items: center;  order: 20; width:100%;}
#landpages .landfilters .filtergroup.resources .filteritem.allmagic .centerbox {color: #ffffff; font-size: 12px; line-height: 1.1em; background: transparent linear-gradient(90deg, #00414A 0%, #000D0FBF 100%) 0% 0% no-repeat padding-box; padding: 2px 10px; margin: 0; border: 2px solid #786A2F; border-radius: 5px; box-sizing: border-box; display: inline-block; }


#landpages .landfilters .filtergroup.rarity {max-width: 86px; margin-bottom: 0;display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
#landpages .landfilters .filtergroup .filteritem.rarity {border: 2px solid transparent; border-radius: 50%; margin: 0px;}
#landpages .landfilters .filtergroup .filteritem.rarity:nth-last-child(1) {margin-bottom: 0;}
#landpages .landfilters .filtergroup .filteritem.rarity:nth-last-child(2) {margin-bottom: 0;}
#landpages .landfilters .filtergroup .filteritem.rarity.active {border-color: #f0a527;}
#landpages .landfilters .filtergroup .filteritem.rarity .icon {width: 25px; height: 25px; border: 1px solid #000000;  border-radius: 50%;}
#landpages .landfilters .filtergroup .filteritem.rarity .icon.common {background: #bfd1da;}
#landpages .landfilters .filtergroup .filteritem.rarity .icon.rare {background: #7ac2ff;}
#landpages .landfilters .filtergroup .filteritem.rarity .icon.epic {background: #ca6eeb;}
#landpages .landfilters .filtergroup .filteritem.rarity .icon.legendary {background: #f3c059;}

#landpages .landfilters .filtergroup .filteritem.rarity.active {opacity: 1;  filter:brightness(100%);}

/*#landpages .landfilters .filtergroup .filteritem.types:nth-child(2n+2) {transform: translateY(calc(-50% - 3px)) translateX(calc(-50% - 3px));}
#landpages .landfilters .filtergroup .filteritem.types:nth-child(3n+2) {transform: translateX(calc(-100% - 6px)); }*/

#landpages .landfilters .filtergroup .filteritem.building {border: 2px solid transparent; box-sizing: border-box; border-radius: 9px;}
#landpages .landfilters .filtergroup .filteritem.building.active {border-color: #ac7820; filter:brightness(100%)}
#landpages .landfilters .filtergroup .filteritem.building:hover {border-color: #ac7820; filter:brightness(100%)}



#landpages .landfilters .filtergroup.synergy { width: 120px;}
#landpages .landfilters .filtergroup.synergy .splinter {width: 30px; height: 30px; padding: 2px; border: 1px solid #eeeeee; box-sizing: border-box; margin: 2px; display: flex; justify-content: space-around; align-items: center; overflow: hidden;}
#landpages .landfilters .filtergroup.synergy .splinter img {height: 22px; width: auto;}
#landpages .landfilters .filtergroup.synergy .Death {background: radial-gradient(closest-side at 50% 50%, rgb(219, 70, 255) 0%, rgb(155, 0, 224) 100%) 0% 0% no-repeat padding-box padding-box transparent;}
#landpages .landfilters .filtergroup.synergy .Water {background: 0% 0% no-repeat padding-box padding-box rgb(54, 114, 118); }
#landpages .landfilters .filtergroup.synergy .Fire {background: 0% 0% no-repeat padding-box padding-box rgb(211, 41, 41)}
#landpages .landfilters .filtergroup.synergy .Life {background: 0% 0% no-repeat padding-box padding-box rgb(173, 173, 173)}
#landpages .landfilters .filtergroup.synergy .Earth {background: 0% 0% no-repeat padding-box padding-box rgb(65, 119, 54)}
#landpages .landfilters .filtergroup.synergy .Dragon {background: radial-gradient(closest-side at 50% 50%, rgb(241, 223, 3) 0%, rgb(255, 177, 0) 100%) 0% 0% no-repeat padding-box padding-box transparent}
#landpages .landfilters .filtergroup.synergy .Nuetral {background: 0% 0% no-repeat padding-box padding-box rgb(20, 20, 20)}





/*#popbox.landfilter {text-transform: capitalize;}*/





#landpages .progress-bar-container {
    width: 200px;
    height: 20px;
    background-color: black;
    border-radius: 5px;
    overflow: hidden;
    border: 2px solid #ffffff;
    position: relative;
}

#landpages .progress-bar { height: 100%; transition: width 0.5s;}
  
#landpages .progress-bar.red  {background: linear-gradient(135deg, #7f0303 0%,#f60606 100%);} 
#landpages .progress-bar.orange  {background: linear-gradient(135deg, #f60606 0%,#d99d04 100%);}
#landpages .progress-bar.yellow  {background: linear-gradient(135deg, #d99d04 0%,#dcff2f 100%);}
#landpages .progress-bar.green  {background: linear-gradient(135deg, #dcff2f 0%,#04b60f 100%);}
#landpages .progress-bar.purple  {background: linear-gradient(135deg, #5b04b6 0%,#ee05de 100%);}
#landpages .progress-bar-container .values {position: absolute; top: -1px; left: 0; width: 100%; height: 100%; display: flex; justify-content: space-around; font-size: 16px; font-weight: 700; color: #ffffff; text-shadow: 1px 1px 2px #000000;}




#landpages .relativebox .progress-bar-container {overflow: visible; height: 24px; border-color:  #ac7820;  box-sizing: border-box; }

#landpages .relativebox .progress-bar-container .values {top: 1px;}
#landpages .relativebox .progress-bar-container .icon { background: #000000; color: #ac7820; border: 2px solid #ac7820; position: absolute; right: 0; width: 36px; height: 36px; top: 50%; transform: translateY(-50%) translateX(94%); border-radius: 50%; display: flex; justify-content: space-around; align-items: center;}
#landpages .relativebox .progress-bar-container .icon img {width: 24px; height: auto; display: inline-block;}
#landpages .relativebox .progress-bar-container .progress-bar .values .centerbox {display: flex; justify-content: space-around; align-items: center; height: 100%;}


#landpages .itembox .buildingoverlay .buildingstats {max-width: 240px;}

#landpages .itembox .buildingoverlay .relativebox  .progress-bar { background: linear-gradient(rgb(36, 177, 20) 0%, rgb(80, 131, 33) 100%) 0% 0% no-repeat padding-box padding-box transparent;}



#landpages .buildingoverlay .ppbox.hourly {max-width: 100px; position: relative; border: 1px solid #ded825; color: #ded825; line-height: 1.1em;  padding: 2px 10px 2px;  margin-right: 38px; margin-top: 10px; border-radius: 4px; display: inline-block; background: black linear-gradient(90deg, #00414A 0%, #000D0FBF 100%) 0% 0% no-repeat padding-box;}
#landpages .buildingoverlay .ppbox.hourly .icon { background: #000000; color: #ac7820; border: 2px solid #ac7820; position: absolute; right: 0; width: 36px; height: 36px; top: 50%; transform: translateY(-50%) translateX(94%); border-radius: 50%; display: flex; justify-content: space-around; align-items: center;}
#landpages .buildingoverlay .ppbox.hourly .amount {color: #ffffff; white-space: nowrap; display: inline-block;}
#landpages .buildingoverlay .ppbox.hourly .icon img {max-width: unset; }

#landpages .buildingoverlay .ppbox.totemchance {max-width: 100px; position: relative; border: 1px solid #ded825; color: #ded825; line-height: 1.1em;  padding: 1px 10px 3px; margin-right: 38px; margin-top: 6px; border-radius: 4px; display: inline-block; background: black linear-gradient(90deg, #00414A 0%, #000D0FBF 100%) 0% 0% no-repeat padding-box;}
#landpages .buildingoverlay .ppbox.totemchance .icon { background: #000000; color: #ac7820; border: 2px solid #ac7820; position: absolute; right: 0; width: 36px; height: 36px; top: 50%; transform: translateY(-50%) translateX(94%); border-radius: 50%; display: flex; justify-content: space-around; align-items: center;}
#landpages .buildingoverlay .ppbox.totemchance .amount {color: #ffffff; white-space: nowrap; display: inline-block;}
#landpages .buildingoverlay .ppbox.totemchance .icon img {max-width: unset; }


#landpages .landswrapper .itembox .synergyoverlay {opacity: 0; position: absolute; bottom: 0; right: 0; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; transition: all 0.3s;}
#landpages .landswrapper .itembox:hover .synergyoverlay {opacity: 1;}


#landpages .synergyoverlay .splinter {width: 50px; height: 50px; padding: 5px; border: 2px solid #eeeeee; box-sizing: border-box; margin: 5px; display: flex; justify-content: space-around; align-items: center;}
#landpages .synergyoverlay .Death {background: radial-gradient(closest-side at 50% 50%, rgb(219, 70, 255) 0%, rgb(155, 0, 224) 100%) 0% 0% no-repeat padding-box padding-box transparent;}
#landpages .synergyoverlay .Water {background: 0% 0% no-repeat padding-box padding-box rgb(54, 114, 118); }
#landpages .synergyoverlay .Fire {background: 0% 0% no-repeat padding-box padding-box rgb(211, 41, 41)}
#landpages .synergyoverlay .Life {background: 0% 0% no-repeat padding-box padding-box rgb(173, 173, 173)}
#landpages .synergyoverlay .Earth {background: 0% 0% no-repeat padding-box padding-box rgb(65, 119, 54)}
#landpages .synergyoverlay .Dragon {background: radial-gradient(closest-side at 50% 50%, rgb(241, 223, 3) 0%, rgb(255, 177, 0) 100%) 0% 0% no-repeat padding-box padding-box transparent}
#landpages .synergyoverlay .Nuetral {background: 0% 0% no-repeat padding-box padding-box rgb(20, 20, 20)}

/* HEX BOX */
.hexbox {position: relative;}
.hexbox svg.hex {height: 55px; width: 65px; }
.hexbox svg.hex50 {height: 50px; width: 50px; }
.hexbox path {stroke: #f0a527; stroke-width: 3; fill: rgba(255,255,255,.4); transition: all 0.3s;}
.hexbox:hover path {fill: rgba(255,255,255,1);}
.filteritem.active .hexbox path {fill: rgba(255,255,255,1);}
.hexbox .imagewrapper {position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); margin-top: -2px; }
.hexbox .imagewrapper img {width: 35px; height: 35px; max-width: unset;}



#landpages .harvestbar {height: 40px; width: 100%; bottom: 0; left: 0; position: fixed;   z-index: 200; display: flex; justify-content: space-around; align-items: center; overflow: hidden; }

#landpages .harvestbar .centerbox {position: relative; background: rgba(0,0,0,.9); display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
#landpages .harvestbar .centerbox .hexbox {display: inline-block; margin: 0 5px 0; cursor: pointer;margin-top: 5px;}
#landpages .harvestbar .centerbox .hexbox svg.hex50 {height: 38px; width: 38px; }
#landpages .harvestbar .centerbox .hexbox path {stroke: #ffffff; stroke-width: 3; fill: #00894f; transition: all 0.3s;}
#landpages .harvestbar .centerbox .hexbox .imagewrapper {color: #ffffff; font-weight: 600; font-size: 14px;}

#landpages .harvestbar .centerbox .hexbox:hover path {stroke: #ffffff; stroke-width: 3; fill: #940505; transition: all 0.3s;}
#landpages .harvestbar .centerbox .hexbox:hover .imagewrapper {color: #ffffff; font-weight: 600; font-size: 14px;}



#landpages .harvestbar .centerbox::before,
#landpages .harvestbar .centerbox::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
}

#landpages .harvestbar .centerbox::before {
  left: 0;
  transform-origin: top left;
  transform: skew(-30deg); /* Adjust the skew angle */
  background: rgba(0, 0, 0, 0.9);
  transform: translateX(-20px);
  clip-path: polygon(0% 100%, 100% 0%, 100% 100%, 0% 100%);
  width: 20px; /* Adjust the width to control the slant */
}

#landpages .harvestbar .centerbox::after {
  right: 0;
  transform-origin: top right;
  transform: skew(30deg); /* Adjust the skew angle */
  background: rgba(0, 0, 0, 0.9);
  transform: translateX(20px);
  clip-path: polygon(0% 0%, 100% 100%, 100% 100%, 0% 100%);
  width: 20px; /* Adjust the width to control the slant */

}
















/* ---  HEXagons --- */