// Ease

$easeInOutBack: cubic-bezier(0.680, -0.550, 0.265, 1.550);
$easeOutBack: cubic-bezier(0.175, 0.885, 0.320, 1.275);
$easeInOutSine: cubic-bezier(0.445, 0.050, 0.550, 0.950);

* {
  margin: 0;
  padding: 0;
}

*,
*:after,
*:before {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizelegibility;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 100%;
}

ul {
  li {
    list-style-type: none;
  }
}

.slider--teams {
  position: relative;
  top: 50%;
  left: 50%;
  max-width: 750px;
  opacity: 0;
  transform: translate(-50%, -50%);
  .slider--teams__team {
    position: relative;
    overflow: hidden;
  }
}

#list {
  position: relative;
  backface-visibility: hidden;
  transform: translate3d(0,0,0);
  li {
    position: relative;
    display: inline-block;
    float: left;
    text-align: center;
    figure {
      cursor: pointer;
      margin: 1em;
      opacity: 0.5;
      backface-visibility: hidden;
      transition: transform 450ms $easeInOutSine, opacity 450ms ease-in-out;
      transform: scale(0.5) translateZ(0px);
      &:hover {
        opacity: 0.8;
        transform: scale(0.6) translateZ(0px);
      }
      &:active {
        opacity: 1;
        transform: scale(0.7) translateZ(0px);
      }
      > div {
        border-radius: 5px;
        position: relative;
        margin: 2rem auto;
        width: 120px;
        height: 120px;
        overflow: hidden;
        transform: rotate(45deg) translateZ(0px);
        > div {
          background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/953/teams.jpg) no-repeat;
          background-size: cover;
          background-position: 0px 0px; 
          position: absolute;
          top: 50%;
          left: 50%;
          width: 170px;
          height: 170px;
          transform: rotate(-45deg) translate(0%, -70%);
        }
      }
      figcaption {
        h2 {
          color: #333;
          font-size: 1.6rem;
          font-weight: 800;
        }
        p {
          color: #666;
          font-size: 0.9rem;
          font-weight: 400;
        }
      }
    }
    &:nth-child(1) figure > div > div {
    background-position: 0px 0px !important;
  }
    &:nth-child(2) figure > div > div {
    background-position: 0px 20% !important;
  }
    &:nth-child(3) figure > div > div {
    background-position: 0px 40% !important;
  }
    &:nth-child(4) figure > div > div {
    background-position: 0px 60% !important;
  }
    &:nth-child(5) figure > div > div {
    background-position: 0px 80% !important;
  }
    &:nth-child(6) figure > div > div {
    background-position: 0px 100% !important;
  }

  }
}

.active {
  opacity: 1 !important;
  transform: scale(1) translateZ(0px) !important;
}

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

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}