.tech-stack {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;

  & > div {
    margin-bottom: 40px;
  }
}
#tech-stack {
  .item {
    background-position: center top;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin:0 20%;
    position: relative;

    span {
      opacity: 0;
      position: absolute;
      bottom: 40%;
      left: 0;
      background: $white;
      text-align: center;
      width: 100%;
      margin: 0;
      padding: 3px 0;
      -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.3);
      box-shadow: 0 2px 5px 0 rgba(0,0,0,0.3);
      -webkit-border-radius: 5px;
      border-radius: 5px;
      @include transition(all 0.3s ease);
    }

    &:hover {
      background-position: center bottom;

      span {
        opacity: 1;
      }
    }

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

.tech-item {
  width: 16.66666666%;
  float: left;
  margin-bottom: 20px;
  cursor: pointer;
}
.square {
  display: block;
  position: relative;
  width: 50%;
  background-position: center top;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin: 0 auto 10px;
  //@include transition(all 0.3s ease);

  &#aws { background-image: url(/img/logos/logo-aws.png); }
  &#net { background-image: url(/img/logos/logo-net.jpg); }
  &#and { background-image: url(/img/logos/logo-android.jpg); }
  &#ang { background-image: url(/img/logos/logo-angular.jpg); }
  &#apl { background-image: url(/img/logos/logo-apple.jpg); }
  &#htm { background-image: url(/img/logos/logo-htmlcss.jpg); }
  &#jav { background-image: url(/img/logos/logo-java.jpg); }
  &#php { background-image: url(/img/logos/logo-php.jpg); }
  &#pyt { background-image: url(/img/logos/logo-python.jpg); }
  &#rct { background-image: url(/img/logos/logo-react.png); }
  &#typ { background-image: url(/img/logos/logo-ts.png); }
  &#nod { background-image: url(/img/logos/logo-node.png); }
  &#swi { background-image: url(/img/logos/logo-swift.jpg); }
  &#wps { background-image: url(/img/logos/logo-wordpress.png); }
  &#sic { background-image: url(/img/logos/logo-sitecore.png); }
  &#co5 { background-image: url(/img/logos/logo-c5.png); }
  &#dnn { background-image: url(/img/logos/logo-dnn.png); }

  &#lok { background-image: url(/img/logos/logo-lock.png); }
  &#dkp { background-image: url(/img/logos/logo-dkps.png); }
  &#bsn { background-image: url(/img/logos/logo-bsn.png); }
  &#wht { background-image: url(/img/logos/logo-whit.png); }
  &#adp { background-image: url(/img/logos/logo-adp.png); }
  &#b29 { background-image: url(/img/logos/logo-b292.png); }
  &#bon { background-image: url(/img/logos/logo-bone.png); }
  &#huf { background-image: url(/img/logos/logo-huffy.png); }
  &#ten { background-image: url(/img/logos/logo-ten.png); }
  &#tlc { background-image: url(/img/logos/logo-tlc.png); }
  &#gea { background-image: url(/img/logos/logo-ge.png); }
  &#gen { background-image: url(/img/logos/logo-genco.png); }
  &#bbx { background-image: url(/img/logos/logo-blackbox.png); }
  &#kah { background-image: url(/img/logos/logo-kah.png); }
  &#car { background-image: url(/img/logos/logo-carnegie.png); }
  &#cmt { background-image: url(/img/logos/logo-commet.png); }
  &#bsj { background-image: url(/img/logos/logo-bsj.png); }
  &#thy { background-image: url(/img/logos/logo-thy.png); }
  &#iaw { background-image: url(/img/logos/logo-iaw.png); }
  &#sco { background-image: url(/img/logos/logo-scoobi.png); }
  &#big { background-image: url(/img/logos/logo-bigstxr.png); }
  &#swa { background-image: url(/img/logos/logo-swar.png); }
  &#scm { background-image: url(/img/logos/logo-scmc.png); }
  &#dom { background-image: url(/img/logos/logo-dompost.png); }
  &#ins { background-image: url(/img/logos/logo-ins.png); }
  &#ade { background-image: url(/img/logos/logo-ade.png); }
  &#wvmn { background-image: url(/img/logos/logo-wvmn.png); }
  &#wdbd { background-image: url(/img/logos/logo-wdbd.png); }

  &:after {
    content: "";
    display: block;
    padding-bottom: 100%;
  }

  &:hover {
    background-position: center bottom;
  }
  &.on {
    background-position: center bottom;
  }
}

.sq-content {
  text-align: center;
  font-size: 0.9em;
  font-weight: bold;
  margin-top: 6px;
}