/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
    height: 100%;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    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;
}

body {
    font-family: 'Source Sans Pro', "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
    padding: 0px;
    background:#f1f2f6;
    -webkit-text-size-adjust: none;
    width: 100%;
    height: 100%;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased
    font-smoothing: antialiased
}
.clear {clear: both;}
.error {color: red;}
.left { text-align: left; }
/* ===== LOADER STYLES ====== */
#loader {width: 100%;height: 100%;position: fixed;top:0px;background: rgba(255,255,255, 0.9);z-index: 1000;transition:0.5s;text-align:center;display:none;padding-top: 63px;}
/* ===== HEADER STYLES ====== */
#header { width:100%;border-bottom: 1px solid #efefef; position: sticky;top: 0;z-index: 1000;min-width: 320px;background: #fff;}
    .logo {float:left;margin-top: 20px}
    .logo img {width:94px;margin-top: 0px;margin-left:7%;}
    .mainMenu {float: left; margin-top: 20px; list-style-type: none; }
    .mainMenu li { display: inline; }
    .mainMenu li:not(:first-child) { margin-left: 20px; }
    .mainMenu li a { text-decoration:none; color: #33455e; font-size: clamp(0.8rem, 1.2vw, 1rem) }

    @media screen and (max-width: 958px) {
      .mainMenu {
        width: 100%;
        display: flex;
        justify-content: center;
        margin: 0;
        padding: 1rem 0;
      }
    }

    .headerButtons {float: right;height:52px;margin-top:0px;margin-right: 0px;}
        #addThingBtn {width:52px;height:52px;background-color:#FFF;float:right;overflow:hidden;position:relative;border-left: 1px solid #eaeaea;}
        .loginBtn {background: none;border-left:1px solid #eaeaea;text-decoration: none;color: #000;float:right;height:52px;line-height: 52px;text-align: center;font-size: 14px;padding: 0px 18px;;transition: all .2s ease-in-out;}
        .loginBtn:hover {cursor: pointer;background:#33455e;color:#FFF;transition: all .2s ease-in-out;}
        /* Header Button Hover effects */
        .bubble {position:absolute;left:0px; top:0px;transition: all .2s ease-in-out;z-index:1000; font-size: 38px;font-weight: 600;width:52px; height:52px; line-height:52px;color:#33455e; background-color:none; border-radius:50%;  text-align:center;cursor:pointer;}
        .bubble:hover {background-color:none;color:#fff; }
        .bubble label:hover {cursor:pointer;}
        .bubble:before {position:absolute; background-color:#34445e; opacity:1; content:''; width:0px; height:0px; left:50%; margin-left:0; bottom:50%; border-radius:50%; transition: all .2s ease-in-out;z-index:-1;}
        .bubble:hover::before {width:110px; height:110px; margin-left:-55px; bottom:-31px;}
        svg {transition:.2s;}
        svg:hover .user { fill: #FFF; transition:.2s;}
        svg:hover .add { fill: #FFF; transition:.2s;}
        svg:hover .notify { fill: #FFF; transition:.2s;}
        #notifyBtn {width:52px;height:52px;background-color:#FFF;float:right;overflow:hidden;position:relative;border-left: 1px solid #eaeaea;}
        #notifyBtn.active {background-color: #34445e;}
        #notifyBtn.active a svg .notify { fill: #FFF;}
        #notification {position: absolute;padding: 1px 3px;background: #FF3D38;top: 13px;left: 36px;font-size: 11px;color: #fff;border-radius: 3px;text-align: center;height: 16px;line-height: 16px;}
        /* Notifications DropDown */
        #notificationContainer {background-color: #FFF;position: absolute;z-index: 1000;top: 51px;right:0px;width: 280px;display: none;font-weight: 300;box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.1);}
        #notificationTitle {font-weight: 600;background-color: #fff;color: #333;padding: 0px 10px;font-size: 13px;position: relative;z-index: 1000;line-height: 36px;height: 35px;border-top: 4px solid #32445f;box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.1);}
        #notificationTitle a {display:inline-block;float:right;font-size:12px;font-weight: 400;color:#333;text-decoration: none;}
        #notificationsBody {max-height:320px;z-index:1000;position:relative;font-size: 13px;overflow: auto;width: 100%;}
        #notificationsBody ul li {list-style-type: none;border-bottom: 1px solid #f1f2f6;padding: 10px;cursor: pointer;color: #33455e;}
        .notifications li {background-color:#FFF;transition: .3s}
        .notifications li:hover {background-color:#f1f2f6;transition: .3s}
        .notifications li.new { background-color:#f5f5f5; color:#FFF; text-align: left;}
        #notificationsBody ul, #userContainer ul {margin: 0px;padding: 0px;border-bottom: none;}
        #notificationsBody ul li b, #userContainer ul li b {color: #33455e;text-decoration: none;}
        #notificationsBody a {color: #33455e;text-decoration: none;display: block;display: block;padding: 12px 10px;width: 180px;}
        #userDropBtn {width:52px;height:52px;background-color:#FFF;float:right;overflow:hidden;position:relative;border-left: 1px solid #eaeaea;}
        #userDropBtn a {display: block;}
        #userDropBtn a:hover {cursor: pointer;}
        #userDropBtn.active {background-color: #34445e;}
        #userDropBtn.active a svg .user { fill: #FFF;}
        /* User DropDown */
        #userContainer {display: none;background: #FFF;position: absolute;z-index: 1000 ;top: 52px;right:0px;border-radius: 2px;color:#33455e;font-weight: 400;text-align: left;box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);}
        #userContainerTitle {font-weight: 300;background-color: #33455e;color: #fff;padding: 0px 8px;font-size: 14px;position: relative;z-index: 1000;line-height: 45px;height: 45px;}
        #userContainer ul {text-align: left; }
        #userContainer ul li {list-style-type: none;border-bottom: none;font-size: 14px;}
        #userContainer ul li:hover {background: #f1f2f6;}
        #userContainer ul li img {width:16px;float: left;margin-right: 8px;}
        #userContainer ul li span {background: #FF3D38;color:#FFF;float: right;height:21px;line-height:21px;border-radius: 4px;padding:0px 3px;}
        #userContainer a {color: #33455e;text-decoration: none;display: block;display: block;padding: 12px 10px;width: 180px;}
        #userContainer a:hover {color:#33455e;cursor: pointer;}
    .searchBar {display:none;float:right;height:52px;margin:0px 2% 0px 0%;width:96%;}
        .searchContainer{position: relative;}
        .searchContainer input#search{width: 90%;height: 40px;border: none;font-size: 18px;font-weight: 300;color: #333;padding: 0px;}
        .searchContainer .icon{position: absolute;top: 9px;right: -4px;z-index: 1;width: 22px;cursor: pointer}
        .searchBtn {float: right;display: block;width:52px;height: 52px;line-height:52px;border-left: 1px solid #efefef;}
        .searchBtn .icon {width:22px;height:22px;display: block;padding: 15px;transition: all .2s ease-in-out;}
        .searchBtn .icon:hover {cursor: pointer;background: #EFEFEF;transition: all .2s ease-in-out;}
        .searchBtn .icon a {display: flex;}
        .searchBtn .icon svg {height: 100%; width: 100%}
        .fullSearchBar {display: block;}
    #csvUploadArea {display:none;}
/* Overlay */
#overlay {width: 100%;height: 100%;position: fixed;top:0px;background: rgba(0,0,0, 0.7);z-index: 2000;transition:0.5s;display:none;}
/* Main Content */
#content {width:100%;margin:0%;}
#content a {text-decoration: none;}
/* ===== HOMEPAGE ====== */
/* Expore Bar */
.homeTagsWrapper {width: 100%;height: 60px;position: relative;}
.exploreBox {position: absolute;width: 56px;line-height: 60px;background: #fff;z-index: 400;text-align: right;}
.exploreBox h2 {padding: 0px;margin:0px;font-weight: 400;font-size: 14px;}
.exploreArrow {background-image:url('/i/explore-arrow.png');background-size: 24px 60px;background-repeat: no-repeat;background-position: top left; position: absolute;width:24px;height: 60px;line-height: 60px;z-index: 400;left:56px;}
.tagStrip {width: 100%;overflow-y: scroll;-webkit-overflow-scrolling: touch;background: #FFF;padding-bottom: 0%;white-space: nowrap;padding-left: 0%;position: relative;}
.tagStripInner {min-width: 320px;padding: 12px 0px 12px 92px;}
.tagStripInner .tag {padding: 7px 17px;line-height: 20px;margin-right: 8px;height: 20px;}
/* Homepage Trade Filter */
.tradeFilter {width: 100%;margin: 2% 0% 0.5% 0%;float: right;font-size: 12px;font-weight: 400;text-align: center;}
.tradeFilter a {width:32.1%;display:inline-block;padding: 0px;height: 36px;line-height: 34px;vertical-align: top;box-sizing: border-box;border: 1px solid #33455e;color: #33455e;}
.tradeFilter a.middle {border-radius: 18px;width: 30.1%;margin-left: 2%;}
.tradeFilter a.active {background: #33455e;color: #fff;border: 1px solid #33455e;}
.tradeFilter a.left, .tradeFilter a.active.left {border-top-left-radius: 18px;border-bottom-left-radius: 18px; text-align: center;}
.tradeFilter a.right, .tradeFilter a.active.right {border-top-right-radius: 18px;border-bottom-right-radius: 18px; text-align: center;}
/* Homepage Things Feed */
#itemsWrapper {padding: 5px 7px 20px 7px;overflow: scroll;}
.profilePageWrapper {padding: 5px 7px 20px 7px;overflow: scroll}
/* Individual Item */
.thumbBox {box-sizing: border-box;width:99%;margin: 1% 0.5%;display: inline-block;border:none;transition:0.5s;vertical-align: top;border-radius: 7px;background:#fff;}
.thumbBox.typeITEM.draft, .thumbBox.typePOST.draft {background-color:#ccc;background-image:url(/i/draft.png);}
.thing.thumbBox.private { border: 1px dashed #333; }
  /* Individual Item Header */
  .thumbBox .hoarder {width: 100%;display:block;}
  .thumbBox .hoarder .hoarderLeft {height:31px;width: 36%;display: inline-block;vertical-align: top;margin-top: 8px;white-space: nowrap;margin-left: 2%;}
  .thumbBox .hoarder .hoarderLeft a {font-size: 13px;}
  .thumbBox .hoarder .hoarderRight {height: 30px;width: 60%;display: inline-block;text-align: right;margin-top: 8px;vertical-align: top;margin-right: 2%;overflow:hidden;}
  /* Thumb + Username in feed */
  .profileThumb {width:30px;height:30px;display:inline-block;border-radius: 50%;margin-right:6px;}
  .profileThumbInner {border-radius: 50%;width: 30px;height: 30px;background-size: cover;background-position: center;border: none;}
  .profileInfo {width:calc(100% - 36px);display: inline-block;line-height: 12px;margin-top: 10px;vertical-align: top;overflow: hidden;height: 20px;text-overflow: ellipsis;margin-right: 0px;}
  .profileInfo a {font-weight: 400;color: #33455e;}
  /* Tags on Things in feed */
  .hoarderRight .tag {max-width: 50%;overflow:hidden;text-overflow:ellipsis;height: 24px;line-height: 24px;padding: 2px 10px;}
  /* Photo in feed */
  .thumb {width: 100%;overflow: hidden;cursor: pointer;}
  .photo-box{position: relative;width:96%;margin:2%;overflow: hidden;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-image 0.2s ease-in-out;box-sizing: border-box;}
  .photo-box.centre {background-position-x:center;background-position-y:center;}
  .photo-box:before{content: "";display: block;padding-top: 100%;}
    /* Photo count Icon */
    .photoCount {background: rgba(0, 0, 0, 0.6);position: absolute;right:6px;bottom:6px;color: #fff;font-size: 14px;padding: 2px 6px;border-radius: 4px;}
    .photoCount img {width:15px;height: auto;vertical-align: top;margin-top: 2px;margin-right: 4px;}
  /* Status Updates in feed styles */
  .typePOST .photo-box {border-width: 2px;border-style: dashed;border-color: #34445E;border-radius: 5%;overflow: visible;}
  .typePOST .thumb {background-color: #f1f2f6;margin: 2%;width: 96%;border-radius: 7px;}
  .typePOST .photoCount {right: -10px;bottom: -10px;}
  /* Item Info in feed Like/want/comment */
  .info {padding:2px 2% 6px 2%;;}
  .info a {color:#222;}
  .title {width:100%;font-size: 19px;font-weight: 300;text-align: center;margin-bottom: 14px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;min-height: 27px;}


  .heartShapedBox {width:100%;margin: 0px auto; text-align: center;margin-bottom: 10px;height:46px;}
  .heartShapedBox img {height:20px;margin-bottom: 6px;font-size: 13px;}
  .heartShapedBox .count {font-size: 12px;display: block;}
    .likeBox {display: inline-block;padding-right: 10px;margin-right: 10px;border-right: 1px solid #e1e3e7;}
    .likeBox a {font-size: 24px;display: inline-block;}
    .wantBox {display: inline-block;padding-right: 10px;margin-right: 10px;border-right: 1px solid #e1e3e7;}
    .wantBox a {font-size: 24px;display: inline-block;}
    .likeBar .wantBox {padding-right: 0px;margin-right: 0px; border-right:none;}
    .likeBar .wantBox .count {display: inline-block;font-size: 18px;margin: 0px 0px 0px 2px;vertical-align: top;}
    .commentBox {width:30px;display: inline-block;padding-right: 0px;}
    .commentBox a {font-size: 24px;}
    .commentBox img {margin-bottom: 5px;height: 21px;}

/* Profile Styling /*

/* Inventory Buttons */
  .inventoryBtns {width: 100%; display: flex; font-size: 12px; font-weight: 400; text-align: center; margin-bottom: 1em}
  .inventoryBtns a {width:32.1%;display:inline-block;padding: 0px;height: 36px;line-height: 34px;vertical-align: top;box-sizing: border-box;border: 1px solid #33455e;color: #33455e; cursor: pointer}
  .inventoryBtns a.middle {border-radius: 18px;width: 30.1%;margin-left: 2%;}
  .inventoryBtns label {width:32.1%;display:inline-block;padding: 0px;height: 36px;line-height: 34px;vertical-align: top;box-sizing: border-box;border: 1px solid #33455e;color: #33455e; cursor: pointer}
  .inventoryBtns label.middle {border-radius: 18px;width: 30.1%;margin-left: 2%;}
  .inventoryBtns a.active {background: #33455e;color: #fff;border: 1px solid #33455e;}
  .inventory button.arrowBtn { width: 38px; margin: 0 2px 0 2px;}
  .inventory button.disabled { background-color: #ccc; color: #000; }
  .inventory button.disabled:hover { background-color: #ccc;}

/* Item Transfer Overlay */
  .inputContainer {width: 80%; display: flex; margin-bottom: 0.5em}

  /* oauth button styles */

.socialSignupButton {
  border-radius: 5px;
  border: thin solid #888;
  width: 100%;
  padding-left: 40px;
  height: 35px;
  margin-bottom: 1%;
  text-align: center;
  opacity: 0.8;
  transition: 0.3s;
  background-repeat: no-repeat;
}

.socialSignupButton:hover {
  opacity: 1;
}

.socialSignupButton.googleButton {
  color: white;
  background-color: #4285F4;
  background-image: url('/i/google-icon.png');
  background-size: contain;

}

.socialSignupButton.facebookButton {
  color: white;
  background-color: #4267B2;
  background-image: url('/i/facebook-icon.png');
  background-size: 30px 27px;
  background-position: left;
}

.socialSignupButton.appleButton {
  color: white;
  background-color: #000000;
  background-image: url('/i/apple-icon.svg');
  background-size: 30px 27px;
  background-position: left;
}

.loginWarning {
  margin-top: 5%;
  margin-bottom: 10%;
  color: red;
  font-weight: bold;
}

.appleButton {
  width: 100%;
  height: 35px;
  opacity: 0.8;
  cursor: pointer;
}

.appleButton:hover {
  opacity: 1;
}


  /* User Profile Page */
  .userStrip {width: 100%;background: #FFF;text-align: center; position: relative; z-index: 1;}
  .userStrip p {color:#666;margin:0px 7px 0px 7px;font-size:14px;padding-bottom: 10px;}
    .profileInfoWrap{float: left;width:calc(100% - 14px);padding-top: 22px; margin:0px auto 1px;position: relative;}
    .profilePic {width: 100%;text-align: center;margin: 0px 0px 0px 0px;vertical-align: top;}
    .profilePicHolder { width: 88px; height: 88px; border-radius: 50px;background-size: cover;margin: auto;background-position: center;border:1px solid #eaeaea;}
    .userName {font-size: 22px;font-weight: 400;margin-bottom: 0px;text-align: center;color:#32445e;line-height: 22px;margin-top: 8px;}
    .userName a {color: #33455e;font-weight: 400;margin-right: 1px;}
    .userLocation {display: block;width: 100%;font-size: 14px;font-weight: 400;color: #ccc;}
    .userBlurb {display: block;width: 100%;font-size: 14px;font-weight: 400}
    /* stats Section followers/following/wants */
    .statWrap {width:100%;max-width: 540px;margin: auto;}
    .userStats {float:left;width:100%;margin:4px 0% 24px 0%;}
    .statBox {display: inline-block;width:25%;text-align: center;}
    .statBox:nth-child(1) {border-right: 1px solid #f1f2f6;}
    .statBox:nth-child(2) {border-right: 1px solid #f1f2f6;}
    .statBox h2 {margin: 0px;padding: 0px;font-weight: 500;font-size:22px;color: #999;line-height: 28px;color: #333;}
    .statBox h3 {margin: 0px;padding: 0px;font-weight: 400;font-size:11px;color: #666;}
    /* Profile Page Tabs */
    #userTabs {height:44px;line-height:44px;border-top: 1px solid #f1f2f6;background: #fff;border-bottom: 1px solid #f1f2f6;font-size: 13px;color:#999;text-align: center;}
    #userTabs .tab {display: inline-block;margin: 0px 20px;transition:0.5s;height: 40px;cursor: pointer;}
    #userTabs .active         {background: #fff;height: 40px;}
    .active { font-weight: 600;border-bottom: 4px solid #FF3D38; }
    #userTabs .tab:hover      {border-bottom: 4px solid #FF3D38;transition:0.5s;cursor: pointer;}
    #userTabs .icon {width:16px;height:16px;transition: all .2s ease-in-out;}
    #userTabs #searchTab:hover {border-bottom: none;}
    #userTabs .feedTab { padding-left: 10px;}
    #userTabs .feedTab:nth-child(1) { padding-left: 0px;}


    #filterBlock {height:48px; padding-top: 5px; border-top: 1px solid #f1f2f6;background: #fff;border-bottom: 1px solid #f1f2f6;font-size: 13px;color:#999;text-align: center;}
    #filterBlock .filterLayout {display: inline-block;margin: 0px 20px;height: 40px;cursor: pointer;}
    #filterBlock .filterSearch {display: inline-block;margin: 0px 20px;height: 40px;cursor: pointer;}
    #filterBlock .filterCollection {display: inline-block;margin: 0px 20px;height: 40px;cursor: pointer;}
    #filterBlock .filterType {display: inline-block;margin: 0px 20px;height: 40px;cursor: pointer;}
    #filterBlock .filterDownload {display: inline-block;margin: 0px 20px;height: 40px;cursor: pointer;}
    #filterBlock .filterLayout img {width: 32px; height: 32px; }

    tr.saved {background-color: #efe}
    tr.saved:hover {background-color: #cdc}
    tr.killed{background-color: #e11}
    .userButtonsLeft {width:calc(50% - 64px);height:100px;position: absolute;top:26px;left:0px;text-align: right;}
    .userButtonsRight {width:calc(50% - 64px);height:100px;position: absolute;top:26px;right:0px;text-align: left;}
    /* Collection Block */
    .controlStrip {width: 100%;display:block;margin: 8px 0% 5px 0%;font-size: 12px;font-weight: 400;text-align: right;}
    .controlStrip .btn {background: none;color:#33455e;margin:0px 7px;border-radius: 20px;width:calc(100% - 14px);}
    .controlStrip .btn:hover {background: #33455e;color:#fff;}
    .collectionBlock {width: calc(100% - 14px);padding: 4px 7px 7px 7px;background: #f1f2f6;text-align: center;}
    .collectionBlock a {width:calc(100%);background: rgba(255, 255, 255, 1);margin:7px 0px;display: inline-block;text-align:center;box-sizing: border-box;border-radius: 8px;transition: 0.4s;}
    .collectionBlock a:hover {background: rgba(255, 255, 255, 0.5);transition: 0.4s;}
    .collectionSummaryInner {padding: 7px;}
    .collectionSummary h3 {font-size: 18px;margin: 0px;padding: 35px 0px 0px;color: #333;font-weight: 400;}
    .collectionSummary h4 {font-size: 13px;margin: 0px;padding: 0px;color: #999;font-weight: 400;}
    .collectionSummaryHead {width: 100%;height: 146px;color: #fff;text-align: center;background-size: cover;background-position: center; border:1px solid #f1f2f6;position: relative;}
    .collectionSummaryThumb {position: absolute;bottom:-35px;left:50%;width:70px;height: 70px;overflow: hidden;border-radius: 50%;border:2px solid #fff;margin-left: -35px}
    .collectionSummaryThumb img {width: 100%;}

/* ===== OVERLAYS ====== */
#overlayContainer {
  display: none;
  width:100%;
  max-width: 500px;
  min-width:300px;
  margin: 0px auto;
  z-index: 3000;
  height: 100%;
  position: fixed;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
@media only screen and (max-width: 600px) {
  #overlayContainer {
    max-width: 90%;
  }
}
#overlayHolder {flex-direction: column;justify-content: center;align-items: center;display: flex;height: 100%;}
.closer {float: right;margin-right: 22px;}
.closer img {width:14px;}
.closer img:hover {cursor: pointer;}
#overlayContainer header {height:52px;line-height: 52px;border-bottom: 1px solid #e6e9ee;}
#overlayContainer header h2 {
  display: inline-block;
  padding: 0px;
  margin:0px;
  font-size: 16px;
  font-weight: 600;
  color: #666;
  vertical-align: top;
  margin-left: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 90%;
}
    /* Followers and Following popups */
    .overlay {width: 94%;height:92%;min-height: 130px;max-height: 700px;background:#fff;-webkit-flex: 1 1 auto;flex: 1 1 auto;border:1px solid #e6e9ee;border-radius: 5px;margin: 4% 0%;padding-bottom: 1px;position: relative;}
    .overlayScroll {height: calc(100% - 52px);max-height: 634px;min-height:50px;padding: 0px 22px;overflow-y: scroll; /* has to be scroll, not auto */-webkit-overflow-scrolling: touch;}
    .likerThumb {float: left;width: 50px;height: 60px;}
    .likerName {margin: 0 90px 0 50px;background: #fff;height:60px;line-height: 60px;font-size: 14px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
    .likerName a {color:#33455e; }
    .likerName a:hover {color:#000 }
    .likerButton {float: right;height:60px;width:90px;}
    .likerButton a.following {float: right;margin-top: 14px;font-weight: 400;padding: 7px 10px;width: 100%;}
    .likerThumb img {height:40px;width:40px;padding: 10px 0px;margin:0px;display: block;border-radius: 50%;}
    /* Likers popup */
    .likersList ul, .userListScroll ul {margin: 0px;padding: 0px;border-bottom: none;}
    .likersList ul li, .userListScroll ul li {list-style-type: none;border-bottom: 1px solid #e6e9ee;font-size: 14px;}
    .likersList {display: none;background: #fff;opacity: 0.9;z-index: 3000;position: absolute;bottom: 40px;right: 2%;border-radius: 1px;color: #33455e;font-weight: 400;text-align: left;width: 96%;  box-shadow: none;  padding: 0px 0px 12px 0px;margin-bottom: -1px;}
    .likersList .closer {margin-top: 15px;margin-right: 14px;}
    .likersList header {margin:0px 0px;border-bottom: 1px solid #eaeaea;background: #fff;}
    .likersTip--tip {position: absolute;z-index: -100;display: none;width: 19px;height: 19px;background: #fff;left: 50%;bottom: -0.5rem;transform: translateX(-50%)rotate(45deg);box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.1);}
    .likersScroller {max-height:214px;padding: 0px 12px;overflow-x: scroll; /* has to be scroll, not auto */-webkit-overflow-scrolling: touch;}
    .likersList .likeBox {margin-left: 14px;}
    .likersList .likeBox img {width:16px;margin-top: 14px;margin-bottom: 12px;margin-right: 2px;}
    .likersList .likeImage {width:100px;}
    .likersList .likeImage .count {display: inline-block;vertical-align: top;font-size: 14px;margin-top: 11px;}

/* Flex overlays (e.g. add To Collection) */
.flex.overlay {
  margin: 0; width: 100%; max-height: inherit; display: flex; flex-direction: column;
}

.flex.overlay .overlayBody {
}

.flex.overlay select {width: 95%;}

.flex.overlay .overlayScroll {
  display: flex; flex-direction: column; align-items: center;  background-color: white
}
.flex.overlay section {
  margin: 5px 5px 5px 20px;
}
.flex.overlay .flexRow {
  display: flex; flex-direction: row;
}
.flexRow div, .flexRow p, .flexRow h1, .flexRow img, .flexRow section {
  flex: 1;
}

.btns {
  display: flex; flex-direction: row; justify-content: space-evenly;
}
.addToCollectionControls {
  padding-bottom: 1em; border-bottom: 1px solid #f1f2f6; display: flex; flex-direction: column; align-items: center;
}
.selectableThing {
  display: flex;
  margin-top: 0.3em;
  cursor: pointer;
  width: 100%;
}

.selectableThing:hover {
  transition: 400ms;
  background-color: rgba(52, 69, 93, 0.38);
}

.selectableThing.selected {
  transition: 400ms;
  color: white;
  background-color: rgba(52, 69, 93, 1);
}

.selectableThing img {
  display: block; width: 50px; height: 50px; padding: 2px;
}
.selectableThing p {
  margin-left: 2em;
}

/* ===== DEFAULT INPUT STYLES ====== */
input {
  padding: 10px;
  outline: 0px;
  width: calc(100% - 20px);
  background: #fff;
  border:1px solid #eaeaea;
  border-radius: 2px;
  -webkit-transition: all .2s ease-out;
  -moz-transition: all .2s ease-out;
  -ms-transition: all .2s ease-out;
  -o-transition: all .2s ease-out;
  transition: all .2s ease-out;
}

input:focus {border-color:#ccc;background: #FFF;}

.register select {
  width: 100%;
}

.cropArena {padding: 16px 16px 0px; text-align: center;}
.cropArena img {height:500px;}

.photoPop {
    background: #fff;
    border: 1px solid #e6e9ee;
    border-radius: 5px;
    margin: 4% 0%;
    padding-bottom: 1px;
    height: auto;
    min-width: 500px;
    min-height: 500px;
    -webkit-overflow-scrolling: touch;
}

  .photoScroll {height: calc(100% - 52px);max-height: 500px;min-height:50px;padding: 0px;}



.popContainer {
    width: 94%;
    height: 92%;
    min-height: 130px;
    max-height: 700px;
    background: #fff;
    flex: 1 1 auto;
    border: 1px solid #e6e9ee;
    border-radius: 5px;
    margin: 4% 0%;
    padding-bottom: 1px;
    position: relative;

    overflow: hidden;
    min-width: 306px;
}



.popContent {
  position: relative;
  width: calc(100% - 32px);
  margin: 0px 16px;
}

.popContainer.tagManager header h2#poptitle,.popContainer.collectionManager header h2#poptitle {margin-left: 0px;}
 {margin-left: 0px;}
.popContainer.tagManager {max-height: 600px;}


.tagArea {width: 100%;}
.tagArena h2 {margin:0px;padding:0px;font-size: 16px;color: #333;font-weight: 500;}
.tagBlock {width: 100%;padding: 0px;text-align: center;

margin-top: 12px;
margin-bottom: 20px;
height: calc(100% - 180px);
        max-height: 426px;
            min-height: 50px;
overflow-y: scroll;-webkit-overflow-scrolling: touch;


}
.tagArea .tag {
    height: 42px;
    line-height: 42px;
    padding: 0px 0px 0px 13px;
    white-space: nowrap;
    overflow: hidden;
    margin-top: 8px;
    margin-right: 4px;

}

.tagArenaLeft {    float: left;
    width: 40%;
    text-align: left;
    margin-bottom: 10px;
    margin-top: 16px;}
.tagArenaRight {float: right;
    width: 49%;
    text-align: right;
    margin-bottom: 18px;
    margin-top: 18px;}
.tagArenaRight a{
    background-color: #ccc;
    font-size: 12px;
    border-radius: 20px;
    text-decoration: none;
    color: #fff;
    padding: 6px 10px;
  }


#newTag {
  width: calc(100% - 80px);
}

.tagArena input {
  padding:14px;
  -webkit-appearance: none;

}

.tagArena .tagAddBtn {
    display: inline-block;
    vertical-align: top;
    position: relative;
    width: 50px;
    height: 50px;
    line-height: 50px;
    color: #fff;
    text-align: center;
    background: #34445e;
    z-index: 100;
    transition: .6s;

}

.tagArena .tagAddBtn:hover {
  background: #000;
  transition: .6s;
}

.tagAddBtn a {display: block;color: #fff;font-weight: 800;font-size: 28px;}



#overlayContainer header .thumb {
  width:26px;
  height:26px;
  margin: 13px 10px 0px 15px;
  border-radius: 3px;
}





.collectBlock {width: 100%;
    padding: 0px;
    text-align: center;
    margin-top: 12px;
    margin-bottom: 20px;
    /* height: calc(100% - 180px); */
    max-height: 426px;
    min-height: 50px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;

}
.popContainer.collectionManager .btn {
  width: calc(100% - 32px);
  padding: 10px 0px;
  margin: 0px 16px;
  font-size: 15px;
}

.collectBlock .checkmark img {
  width:110px;
  height: 70px;
  margin:0px 0px 0px;
}

.popContainer.collectionManager {
    max-height: 600px;
}








.thing .tagBlock {
  padding: 0px 0px 0px 0px;
  height:auto;
}

.thing .tagBlock .tag{
      padding: 8px 10px;
      margin-right: 4px;
}

.thing .itemTitleRight .btn {
        float: right;

    vertical-align: top;

    margin-top: 13px;
    margin-right: 13px;
    padding: 8px 20px;

    font-size: 14px;

}



/* Don't Show the Footer on certain pages */
.home footer,.profile footer,.addItem footer,.dm footer {display: none;}




#overlayContainer a {text-decoration: none;}
#overlayContainer .collectionThumbs {height: 300px;}
#overlayContainer .collectionThumbs .btn {background:#fff;width:90px;font-size:14px;padding:12px 0px;margin-top: 10px;}
#overlayContainer .collectionThumbs .btn:hover {background: #33455e;color:#fff;}
#overlayContainer .collectionThumbs input {text-align: center;margin-top:24px;border-radius: 6px;color: #666;}



/* Buttons on Add Item Page */

.itemButtons {width:98%;margin: 10px 1%;}
.itemButtons .btn {height: 48px;line-height: 46px;max-width: 300px;width:47%;margin:1%;}
.itemButtons .btn.delete {border:1px solid #FF3D38;color:#FF3D38;}
.itemButtons .btn.delete:hover {background:#FF3D38;color:#FFF;cursor: pointer;}



/* Default Tag Styles */
.tag {font-size:13px;display: inline-block;border: 1px solid #e8eaee;background: #FFF;color: #33455e;border-radius: 26px;text-transform: lowercase;transition: all .4s ease-in-out;}
.tag a {color: #33455e;}
.tag:hover {background: #f1f2f6;cursor: pointer;transition: .4s}

/* Default Button Styles */
.btn, button {
    display: inline-block;
    margin:0px;
    /* vertical-align: top; */
    box-sizing: border-box;
    border: 1px solid #33455e;
    color: #33455e;
    border-radius: 23px;
    transition: all .3s ease-in-out;
    text-align: center;
  }

  .btn:hover {
    background: #33455e;
    color: #fff;
  }
  a.btn, label.btn, button {font-size:12px;padding:10px;text-align: center;min-width: 84px;}

.photoPop .collectionBlock a {border:1px solid red;}

/* ===== FOOTER ====== */
footer {display:block;width:100%;min-height:100px;background:#313b54; color: #fff; padding: 40px 0px; font-size: 0.8em;margin:0px;}
footer a { color: #fff; text-decoration: none;}
footer a:hover { color: #ff9933;}
footer img {margin-left: 1%;width: 112px;display:block;}
footer p {margin-left: 1%;}


/* ===== INVENTORY PAGE ====== */

.inventoryWrap header {
    width:100%;
}

.inventoryHeadRight {
    display: inline-block;
    width:80%;
    vertical-align: top;
    padding: 10px;
}

.inventoryHeadRight .btn {
    float: right;
    margin-left: 6px;
}

.btn-labelButton {
    font-size: 12px;
    padding: 10px;
    text-align: center;
    min-width: 84px;
    cursor: pointer;
}

.awardsContainer {
  margin: 0 auto;
  width: 80%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 20px;
}

.awardInfoContainer {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.awardProgressContainer {
  align-self: center;
  margin-right: 1em;
}

.award {
  background-color: #FFF;
  border: #ccc 1px solid;
  margin: 0.5em 0 0 0;
  display: flex;
  flex-direction: row;
}

.award img {
  width: 3em;
  height: 3em;
  border-radius: 100%;
  border: #ccc 1px solid;
  margin: 0.5em
}

.award-incomplete {
  opacity: 50%;
}

.award-incomplete img {
  filter: grayscale(1);
}

.awardTitle {
  font-size: 18px;
  color: #7b7b7b;
}

.awardInfo {
  font-size: 14px;
  color: darkgray;
}

.awardList {
  list-style-type: none;
  background-color: #ccc;
  width: 90%;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  padding-left: 0px;
  min-height: 3em;
  vertical-align: text-bottom;
  border-radius: 10px;
  border: solid #222 2px;
}

.awardLevel {
  float: right;
  padding-right: 1em;
  padding-left: 0.5em;
  border-left: 3px #222 solid;
}

.warnSmall {
  color: red;
  font-size: xx-small;
}

/* ==========================================================================
   Media Queries
   ========================================================================== */
@media only screen and (min-width: 360px) {
    /* ===== HEADER STYLES ====== */
    .logo img {width:126px;margin-top: -2px;
}

@media only screen and (min-width: 375px) {

    .collectionBlock a {width:calc(50% - 14px);margin: 7px;}

}

@media only screen and (min-width: 480px) {
    /* ===== HEADER STYLES ====== */
    .logo {width:auto;}
    .logo img {width:158px;margin-top: 1px}
    .headerButtons {height:62px;}
    .loginBtn {height:62px;line-height: 62px;}
    #addThingBtn {width:62px;height:62px;}
    .bubble {width:62px; height:62px; line-height:62px;}
    .searchContainer input#search {height: 30px;}
    .searchContainer .icon{top: 5px;}
    .searchBtn {width:62px;height: 62px;line-height:62px;}
    .searchBtn .icon {padding: 20px;}
    #notifyBtn {width:62px;height:62px;}
    #notificationContainer {top: 61px;}
    #userDropBtn {width:62px;height:62px;}
    #userContainer {top: 62px;}
    /* ===== MAIN CONTENT ====== */
    /* ===== HOMEPAGE ====== */
    .tradeFilter {
      width:276px;
      /* margin: 3% 3% 0% 0.7%; */
    }
    /* ===== INDIVIDUAL ITEM ====== */
    .thumbBox {width:98%;margin: 1%;}

    .controlStrip .btn {width:fit-content; width: -moz-fit-content}


}

@media only screen and (min-width: 660px) {
    /* ===== HEADER STYLES ====== */
    .searchBar {display: block;padding: 16px 4px 6px 20px;width: 220px;height: 40px;border-left: 1px solid #eaeaea;}
    .searchBtn {display: none;}
    .fullSearchBar {display: none;}
    /* ===== INDIVIDUAL ITEM ====== */
    .thumbBox, .collectionBlock a {width:calc(50% - 14px);margin: 7px;}
    /* ===== LIKERS POPUP ====== */
    .likersList {right: -0%;bottom: 54px;width: 320px;opacity: 1;box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1); }
    .likersTip--tip {display: block;}

}

@media only screen and (min-width: 768px) {

    .profileInfoWrap{width:100%;}

}



@media only screen and (min-width: 990px) {
    /* ===== INDIVIDUAL ITEM ====== */
    .thumbBox, .collectionBlock a {width: calc(33.3% - 14px);margin: 7px;}


}

@media only screen and (min-width: 1320px) {
    /* ===== INDIVIDUAL ITEM ====== */
    .thumbBox, .collectionBlock a {width:calc(25% - 14px);margin: 7px;}


}

@media only screen and (min-width: 1650px) {
    /* ===== INDIVIDUAL ITEM ====== */
    .thumbBox, .collectionBlock a {width:calc(20% - 14px);margin: 7px;}


}











/* ==========================================================================
   Spinner Animation
   ========================================================================== */



.spinner {
  margin: 30px 0px;
  -webkit-animation: rotator 1.4s linear infinite;
          animation: rotator 1.4s linear infinite;
}

@-webkit-keyframes rotator {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
  }
}

@keyframes rotator {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
  }
}
.path {
  stroke-dasharray: 187;
  stroke-dashoffset: 0;
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
          animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
}

@-webkit-keyframes colors {
  0% {
    stroke: #33455e;
  }
  25% {
    stroke: #DE3E35;
  }
  50% {
    stroke: #33455e;
  }
  75% {
    stroke: #1B9A59;
  }
  100% {
    stroke: #33455e;
  }
}

@keyframes colors {
  0% {
    stroke: #33455e;
  }
  25% {
    stroke: #DE3E35;
  }
  50% {
    stroke: #33455e;
  }
  75% {
    stroke: #1B9A59;
  }
  100% {
    stroke: #33455e;
  }
}
@-webkit-keyframes dash {
  0% {
    stroke-dashoffset: 187;
  }
  50% {
    stroke-dashoffset: 46.75;
    -webkit-transform: rotate(135deg);
            transform: rotate(135deg);
  }
  100% {
    stroke-dashoffset: 187;
    -webkit-transform: rotate(450deg);
            transform: rotate(450deg);
  }
}
@keyframes dash {
  0% {
    stroke-dashoffset: 187;
  }
  50% {
    stroke-dashoffset: 46.75;
    -webkit-transform: rotate(135deg);
            transform: rotate(135deg);
  }
  100% {
    stroke-dashoffset: 187;
    -webkit-transform: rotate(450deg);
            transform: rotate(450deg);
  }
}



/* ==========================================================================
   Helper classes
   ========================================================================== */

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@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,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}