// PIVOT
// ----------------
.pivot {
   position: relative;

   > .pivot-headers {
      margin-bottom: 10px;

      > a {
         margin: 0 10px 0 0;
         font-weight: 300;
         text-transform: lowercase;
         text-decoration: none;
         font-size: 26px;
         font-weight: 300;
         line-height: 34px;
         color: @pivotHeadersColor;

         &:hover {
            color: @pivotHeadersHoverColor;
         }
         &.active {
            color: @pivotHeadersActiveColor;
            font-weight: 400;
         }
      }
   }


   > .pivot-items {
      overflow: hidden;
      width: 100%;
      position: relative;


      > .pivot-item {
         display: none;
         position: relative;
         .transition(.4s ease-in-out left);
      }

      > .active,
      > .next,
      > .prev { display: block; }

      > .active {
         .DockItem("left", 0);
      }

      > .next,
      > .prev {
         position: absolute;
         top: 0;
         width: 100%;
      }

      > .next {
         .DockItem("left", 100%);
      }
      > .prev {
         .DockItem("left", -100%);
      }
      > .next.left,
      > .prev.right {
         .DockItem("left", 0);
      }

      > .active.left {
         .DockItem("left", -100%);
      }
      > .active.right {
         .DockItem("left", 100%);
      }

   }

}