<div class="flip section">
   <a href="#"><span data-hover="Ratatouille">Ratatouille</span></a>
   <a href="#"><span data-hover="Lassitude">Lassitude</span></a>
   <a href="#"><span data-hover="Murmurous">Murmurous</span></a>
   <a href="#"><span data-hover="Palimpsest">Palimpsest</span></a>
   <a href="#"><span data-hover="Assemblage">Assemblage</span></a>
</div>

<div class="slidein section">
   <a href="#"><span data-hover="Ratatouille">Ratatouille</span></a>
   <a href="#"><span data-hover="Lassitude">Lassitude</span></a>
   <a href="#"><span data-hover="Murmurous">Murmurous</span></a>
   <a href="#"><span data-hover="Palimpsest">Palimpsest</span></a>
   <a href="#"><span data-hover="Assemblage">Assemblage</span></a>
</div>

<div class="borderfade section">
   <a href="#"><span data-hover="Ratatouille">Ratatouille</span></a>
   <a href="#"><span data-hover="Lassitude">Lassitude</span></a>
   <a href="#"><span data-hover="Murmurous">Murmurous</span></a>
   <a href="#"><span data-hover="Palimpsest">Palimpsest</span></a>
   <a href="#"><span data-hover="Assemblage">Assemblage</span></a>
</div>

<div class="arrowbtns section">
   <button class="btn btn-4 arrow-left fa fa-arrow-right">Continue</button>
   <button class="btn btn-4 arrow-right fa fa-arrow-left">Return</button>
</div>

<div class="overlinegrow section">
   <a href="#" class="hvr-overline-from-center blue active">View All</a>
   <a href="#" class="hvr-overline-from-center red">Early Childhood</a>
   <a href="#" class="hvr-overline-from-center green">Junior School</a>
   <a href="#" class="hvr-overline-from-center orange">Middle School</a>
   <a href="#" class="hvr-overline-from-center blue">Senior School</a>
</div>

<div class="bggrow section">
   <a href="#" class="hvr-sweep-to-bottom blue active">View All</a>
   <a href="#" class="hvr-sweep-to-bottom red">Early Childhood</a>
   <a href="#" class="hvr-sweep-to-bottom green">Junior School</a>
   <a href="#" class="hvr-sweep-to-bottom orange">Middle School</a>
   <a href="#" class="hvr-sweep-to-bottom blue">Senior School</a>
</div>

<div class="svgwoosh section">
   <a href="#" class="woosh">
      <svg>
         <rect x="0" y="0" fill="none" width="100%" height="100%"></rect>
      </svg>
      Hover
   </a>
</div>

<!-- Source: https://codepen.io/hafizfattah/full/tkgyK/ -->
<div class="fillin section">
   <nav class="link-effect-3" id="link-effect-3">
      <a href="#link-effect-4" data-hover="Ironman">Ironman</a>
      <a href="#link-effect-4" data-hover="Batman">Batman</a>
      <a href="#link-effect-4" data-hover="Deadpool">Deadpool</a>
      <a href="#link-effect-4" data-hover="Wolverine">Wolverine</a>
      <a href="#link-effect-4" data-hover="Superman">Superman</a>
   </nav>
</div>

<div class="filldown section">
   <nav class="link-effect-4" id="link-effect-4">
      <a href="#link-effect-3" data-hover="Ironman">Ironman</a>
      <a href="#link-effect-3" data-hover="Batman">Batman</a>
      <a href="#link-effect-3" data-hover="Deadpool">Deadpool</a>
      <a href="#link-effect-3" data-hover="Wolverine">Wolverine</a>
      <a href="#link-effect-3" data-hover="Superman">Superman</a>
   </nav>
</div>

<div class="crosshair section">
   <nav class="link-effect-14" id="link-effect-14">
      <a href="#link-effect-14"><span>Ironman</span></a>
      <a href="#link-effect-14"><span>Batman</span></a>
      <a href="#link-effect-14"><span>Deadpool</span></a>
      <a href="#link-effect-14"><span>Wolverine</span></a>
      <a href="#link-effect-14"><span>Superman</span></a>
   </nav>
</div>

@mixin perspective($perspective) {
   -webkit-perspective: $perspective;
   -moz-perspective: $perspective;
   perspective: $perspective;
}

@mixin transition($transition...){
   -webkit-transition: $transition;
   -moz-transition: $transition;
   transition: $transition;
} // @include transition(transform 0.3s);

@mixin transform-origin($transform-origin){
   -webkit-transform-origin: $transform-origin;
   -moz-transform-origin: $transform-origin;
   transform-origin: $transform-origin;
} // @include transform-origin(50% 0);

@mixin transform-style($transform-style){
   -webkit-transform-style: $transform-style;
   -moz-transform-style: $transform-style;
   transform-style: $transform-style;
} // @include transform-origin(50% 0);

@mixin transform($transform){
   -webkit-transform: $transform;
   -moz-transform: $transform;
   transform: $transform;
}

$brand-primary: tomato;
$brand-secondary: aquamarine;
$brand-tertiary: slategray;

div a {
   position: relative;
   display: inline-block;
   //margin: 15px 25px;
   outline: none;
   color: #fff;
   text-decoration: none;
   text-transform: uppercase;
   letter-spacing: 1px;
   font-weight: 400;
   text-shadow: 0 0 1px rgba(255,255,255,0.3);
   font-size: 1.35em;
}


div.section { 
   width: 100%;
   padding: 100px 10px;
   
   &:nth-child(odd) {
      background: #fefefe;
   }

   &:nth-child(even) {
      background: #eee;
   }
}


.flip {
   a {
      line-height: 44px;
      @include perspective(1000px);

      span {
         position: relative;
         display: inline-block;
         padding: 0 14px;
         background: $brand-primary;
         @include transition(all 0.3s);
         @include transform-origin(50% 0);
         @include transform-style(preserve-3d);

         &:before {
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            height: 100%;
            text-align:center;
            background: darken($brand-primary, 20%);
            content: attr(data-hover);
            @include transition(all 0.3s);
            @include transform(rotateX(-90deg));
            @include transform-origin(50% 0);
         }
      }

      &:hover,
      &:focus {
         outline: none;

         span {
            @include transform(rotateX(90deg) translateY(-22px));

            &:before {
               background: darken($brand-primary, 20%);	
            }
         }
      }
   }
}

/* Effect 5: same word slide in */
.slidein {
   a {
      overflow: hidden;
      padding: 0 4px;
      height: 1em;
      color: $brand-tertiary;

      span {
         position: relative;
         display: inline-block;
         @include transition(all 0.3s);

         &:before {
            position: absolute;
            top: 100%;
            content: attr(data-hover);
            font-weight: 700;
            color: $brand-primary;
            @include transform(translate3d(0,0,0));
         }

      }

      &:hover,
      &:focus {
         span {
            @include transform(translateY(-100%));
         }
      }
   }
}

.borderfade {
   a {
      padding: 10px;
      color: $brand-tertiary;
      font-weight: 700;
      text-shadow: none;
      @include transition(all 0.3s);

      &:before,
      &:after {
         position: absolute;
         left: 0;
         width: 100%;
         height: 2px;
         background: $brand-primary;
         content: '';
         opacity: 0;
         @include transition(all 0.3s);
         @include transform(translateY(-10px));
      }

      &:before {
         top: 0;
         @include transform(translateY(-10px));
      }

      &:after {
         bottom: 0;
         @include transform(translateY(10px));
      }

      &:hover,
      &:focus {
         color: $brand-primary;

         &:before,
         &:after {
            opacity: 1;
            @include transform(translateY(0px));
         }
      }
   }
}

.arrowbtns {
   .btn {
      background: none;
      cursor: pointer;
      padding: 25px 80px;
      display: inline-block;
      text-transform: uppercase;
      font-weight: 700;
      outline: none;
      position: relative;
      @include transition(all 0.3s);
      border: 3px solid $brand-primary;
      color: $brand-primary;
      overflow: hidden;

      &:after {
         content: '';
         position: absolute;
         z-index: -1;
         @include transition(all 0.3s);
      }

      &:before {
         font-family: 'FontAwesome';
         speak: none;
         font-style: normal;
         font-weight: normal;
         font-variant: normal;
         text-transform: none;
         line-height: 1;
         position: relative;
         -webkit-font-smoothing: antialiased;
         position: absolute;
         height: 100%;
         font-size: 125%;
         line-height: 3.5;
         color: #fff;
         @include transition(all 0.3s);
      } 

      &:active {
         border-color: $brand-primary;
         color: $brand-primary;

         &:before {
            color: #17954c;
         }
      }

      &:hover {
         background: $brand-primary;
         color: #fff;
      }

   }

   .arrow-left {
      &:before {
         left: 70%;
         opacity: 0;
         top: 0;
      }

      &:hover:before {
         left: 80%;
         opacity: 1;
      }
   }

   .arrow-right {
      &:before {
         left: 30%;
         opacity: 0;
         top: 0;
      }

      &:hover:before {
         left: 10%;
         opacity: 1;
      }
   }
}

.overlinegrow .hvr-overline-from-center {
   padding: 20px;
   cursor: pointer;
   background: #fff;
   text-decoration: none;
   color: #666;
   -webkit-tap-highlight-color: rgba(0,0,0,0);
   display: inline-block;
   vertical-align: middle;
   -webkit-transform: translateZ(0);
   transform: translateZ(0);
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   -moz-osx-font-smoothing: grayscale;
   position: relative;
   overflow: hidden;
   @include transition(0.3s ease-in-out color);

   &:before {
      content: "";
      position: absolute;
      z-index: -1;
      left: 50%;
      right: 50%;
      top: 0;
      background: #2098d1;
      height: 4px;
      -webkit-transition-property: left, right;
      transition-property: left, right;
      -webkit-transition-duration: 0.3s;
      transition-duration: 0.3s;
      -webkit-transition-timing-function: ease-out;
      transition-timing-function: ease-out;
   }

   &.blue {
      &:hover, &:focus, &:active, &.active {
         color: skyblue;
      }

      &:before {
         background: skyblue;  
      }
   }

   &.red {
      &:hover, &:focus, &:active, &.active {
         color:maroon;
      }

      &:before {
         background: maroon;  
      }
   }

   &.green {
      &:hover, &:focus, &:active, &.active {
         color: limegreen;
      }

      &:before {
         background: limegreen;  
      }
   }

   &.orange {
      &:hover, &:focus, &:active, &.active {
         color: orange;
      }

      &:before {
         background: orange;  
      }
   }

   &:hover, &:focus, &:active, &.active {
      &:before {
         left: 0;
         right: 0;
      }
   }
}

.bggrow {
   .hvr-sweep-to-bottom {
      padding: 20px;
      cursor: pointer;
      background: #fff;
      text-decoration: none;
      color: #666;
      -webkit-tap-highlight-color: rgba(0,0,0,0);
      display: inline-block;
      vertical-align: middle;
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
      box-shadow: 0 0 1px rgba(0, 0, 0, 0);
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      -moz-osx-font-smoothing: grayscale;
      position: relative;
      -webkit-transition-property: color;
      transition-property: color;
      -webkit-transition-duration: 0.3s;
      transition-duration: 0.3s;

      &:before {
         content: "";
         position: absolute;
         z-index: -1;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         background: #2098d1;
         -webkit-transform: scaleY(0);
         transform: scaleY(0);
         -webkit-transform-origin: 50% 0;
         transform-origin: 50% 0;
         -webkit-transition-property: transform;
         transition-property: transform;
         -webkit-transition-duration: 0.3s;
         transition-duration: 0.3s;
         -webkit-transition-timing-function: ease-out;
         transition-timing-function: ease-out;
      }

      &.blue {
         &:before {
            background: navy;  
         }
      }

      &.red {
         &:before {
            background: maroon;  
         }
      } 

      &.green {
         &:before {
            background: limegreen;  
         }
      }

      &.orange {
         &:before {
            background: orange;  
         }
      }

      &:hover, &:focus, &:active, &.active {
         color: white;

         &:before {
            -webkit-transform: scaleY(1);
            transform: scaleY(1);
         }
      }
   }
}

.svgwoosh {
   .woosh {
      cursor: pointer;
      display: block;
      font-weight: 400;
      line-height: 45px;
      max-width: 160px; 
      text-align:center;
      position: relative;
      text-decoration: none;
      text-transform: uppercase;
      vertical-align: middle;
      width: 100%; 
      background: #fff;
      font-weight: 100;
      color: #666;
      @include transition(0.3s ease-in-out all);

      svg {
         height: 45px;
         left: 0;
         position: absolute;
         top: 0; 
         width: 100%; 
      }

      rect {
         fill: none;
         stroke: #666;
         stroke-width: 4;
         stroke-dasharray: 422, 0;
         @include transition(all 1.35s cubic-bezier(0.19, 1, 0.22, 1));
      }

      &:hover {
         background: rgba($brand-primary, 0);
         letter-spacing: 1px;
         color: $brand-primary;

         rect {
            stroke-width: 5;
            stroke: $brand-primary;
            stroke-dasharray: 15, 310;
            stroke-dashoffset: 48;
         }
      }
   }
}

.fillin {
   .link-effect-3 {
      a {
         padding: 10px 0;
         margin: 0 20px;
         color: #797878;
         text-shadow: none;
         position: relative;
         &::before {
            position: absolute;
            top: 0;
            left: 0;
            overflow: hidden;
            padding: 10px 0;
            max-width: 0;
            border-bottom: 2px solid $brand-primary;
            color:  $brand-primary;
            content: attr(data-hover);
            -webkit-transition: max-width 0.5s;
            -moz-transition: max-width 0.5s;
            transition: max-width 0.5s;
         }
         &:hover{
            &::before{
               max-width: 100%;
            }
         }
      }
   } 
}

.filldown {
   .link-effect-4 {
      a {
         padding: 0 10px;
         margin: 0 20px;
         color: #797878;
         text-shadow: none;
         position: relative;
         &::before {
            position: absolute;
            top: 0;
            left: 0;
            overflow: hidden;
            padding: 0 10px;
            max-height: 0;
            // border-bottom: 2px solid #fff;
            color: $brand-primary;
            content: attr(data-hover);
            -webkit-transition: max-height 0.5s;
            -moz-transition: max-height 0.5s;
            transition: max-height 0.5s;
         }
         &:hover{
            &::before{
               max-height: 100%;
            }
         }
      }
   } 
}

.crosshair {
   .link-effect-14 {
      a {
         color: #666;
         padding: 10px 20px;
         position: relative;
         overflow: hidden;
         display: inline-block;
         @include transition(.3s ease-out);
         span{
            &::before{
               width: 5px;
               height: 5px;
               background: transparent;
               content: "";
               position: absolute;
               left: 0;
               top: 0;
               border-top: 2px solid  $brand-primary;
               border-left: 2px solid  $brand-primary;
               @include transition (.3s);
               opacity: 0;
            }
            &::after{
               width: 5px;
               height: 5px;
               background: transparent;
               content: "";
               position: absolute;
               right: 0;
               bottom: 0;
               border-right: 2px solid  $brand-primary;
               border-bottom: 2px solid  $brand-primary;
               @include transition (.3s);
               opacity: 0;

            }
         }
         &::before {
            width: 5px;
            height: 5px;
            background: transparent;
            content: "";
            position: absolute;
            right: 0;
            top: 0;
            border-right: 2px solid  $brand-primary;
            border-top: 2px solid  $brand-primary;
            @include transition (.3s);
            opacity: 0;
         }
         &::after {
            width: 5px;
            height: 5px;
            background: transparent;
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            border-left: 2px solid $brand-primary;
            border-bottom: 2px solid  $brand-primary;
            @include transition (.3s);
            opacity: 0;
         }
         &:hover{
            color:  $brand-primary;
            &::before{
               opacity: 1;
               right: 5px;
               top: 5px;
            }
            &::after{
               opacity: 1;
               left: 5px;
               bottom: 5px;
            }
            span{
               &::before{
                  opacity: 1;
                  left: 5px;
                  top: 5px;
               }
               &::after{
                  opacity: 1;
                  right: 5px;
                  bottom: 5px;
               }
            }
         }
      }
   }
}