#content .landMapProgression { overflow-x: scroll;}
#content .inner .questMapWrapper {white-space: nowrap; padding: 10px; box-sizing: border-box;  z-index: 2; }
#content .inner .questMapWrapper .questLandPlot {display: inline-flex; justify-content: flex-start; align-items: center;}
#content .inner .questMapWrapper .landcard {display: inline-block; margin: 10px; position: relative; overflow: hidden; cursor: pointer;}
#content .inner .questMapWrapper .separator {display: inline-block; max-width: 60px;}
#content .inner .questMapWrapper .separator i {position: relative; display: flex; justify-content: space-around; align-items: center; font-size: 50px; color: #e2e2e2;}
#content .inner .questMapWrapper .separator i.locked {color: #404040;}



.landcard {transition: all 0.5s;}
.landcard .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;}
.landcard .overlay .centerbox {text-align: center; width: calc(100% - 10px);}
.landcard .overlay .centerbox .reg-ter-names { font-size: 1.2em;}
.landcard .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;}
.landcard .overlay .centerbox .location .locbox {display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap;}
.landcard .overlay .centerbox .location .locbox .imagewrapper {display:flex; justify-content: space-around; align-items: center;}
.landcard .overlay .centerbox .location .locbox .number {display:inline-block; margin-left: 7px;}
.landcard .overlay .centerbox .owner {color: #ffe36c}
.landcard .overlay .centerbox .resourcetype {text-transform: capitalize;}
.landcard .overlay .centerbox .rarity {text-transform: capitalize;}
.landcard .overlay .centerbox .boosts {display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap;}
.landcard .overlay .centerbox .boosts .imagewrapper {display: inline-block;}
.landcard .overlay .element {margin: 5px 0; font-size: 20px;}

.landcard .resourceoverlay {position: absolute; bottom: 20px; left: 40px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}

.landcard h2 {color: #ffb33b; font-size: 22pt; }
.landcard .element.deedtype {color: #ec8100; font-size: 35px; font-weight: 700;}

.landcard .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%);}
.landcard .saleprice span {font-weight: 700; font-size: 36px; position: relative; top: 2px;}






/* Locked */
.landcard.locked .affectlayer {filter: grayscale(20%) brightness(.4);	}
.landcard.locked .lockoverlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: space-around; align-items: center; filter:none;}
.landcard.locked .lockoverlay i {font-size: 200px; color: #c4ad03; filter: none;}
.landcard.unlocked:hover {	filter: brightness(1.4);}

.landcard .hoveroverlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: flex-start; align-items: center;}
.landcard .hoveroverlay .imagewrapper {position: relative; margin-left: 10%;  transition: all .8s; opacity: 0; width: 0; height: 0;}
.landcard .hoveroverlay .imagewrapper .title {position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); color: #cf0000 ; font-family: 'Metal Mania', cursive;  font-size: 72px;  letter-spacing: 2px;}

.landcard:hover .hoveroverlay .imagewrapper {height: 300px; width: 300px; opacity: 1; }








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