- var imgs = ['https://www.easypano.com/images/pw/v3/banner.jpg','https://www.publicdomainpictures.net/pictures/170000/velka/beautiful-landscape-panorama-1462783515FyK.jpg','https://www.publicdomainpictures.net/pictures/30000/velka/arizona-sunrise-panarama-1348420056Bcg.jpg','https://www.publicdomainpictures.net/pictures/190000/velka/waterfall-ben-nevis-scotland-1471093009J8y.jpg','https://upload.wikimedia.org/wikipedia/commons/0/04/Bibi-Ka-Maqbara-pano.jpg']
//- Preload images for smoother transition
.preloader
  each img in imgs
    img.img(src=img)
//-Avatar
a.button.me(href="https://twitter.com/ThunderGunExprs" target="_blank" title="Click for free pizza!") 🌮
//-Split Image Gallery
.box
  .left.top
    .side
    .reflection
    .overlay
  .center.top
    .side
    .reflection
    .overlay
  .right.top
    .side
    .reflection
    .overlay

body {
  perspective: 1100px;
  background: rgba(0, 0, 0, 1);
}

* {
  transition: all 1s ease;
}

.img{
  display:none !important;
  opacity:0 !important;
  position:Absolute !important;
  left: -999%;
  top:-999%;
}

.box {
  position: relative;
  width: 65%;
  margin: 5% auto;
  padding-bottom: 25%;
  transform: rotateY(29deg);
  transform-style: preserve-3d;
  div.top {
    position: absolute;
    top: 0;
    width: 30.3%;
    height: 100%;
    float: left;
    background-image: url('https://www.easypano.com/images/pw/v3/banner.jpg');
    background-size: auto 100%;
    transform-style: preserve-3d;
    outline: 1px solid transparent;
    -webkit-backface-visibility: hidden !important;
    /* prevent jagged edges in firefox */
    -webkit-animation: changeIt 25s infinite;
    /* Safari 4.0 - 8.0 */
    animation: changeIt 25s infinite;
    &:before {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: rgba(#1abc9c, .15);
    }
  }
  .left {
    left: 0;
    background-position: 0% 0;
  }
  .center {
    left: 34.83%;
    background-position: -100% 0;
  }
  .right {
    left: 69.66%;
    background-position: -197% 0;
  }
  div.top > .side {
    content: '';
    position: absolute;
    top: 0;
    right: 100%;
    width: 10%;
    height: 100%;
    background: url('https://www.easypano.com/images/pw/v3/banner.jpg');
    background-size: auto 100%;
    transform-origin: 100% 50%;
    transform: rotateY(-90deg);
    -webkit-backface-visibility: hidden !important;
    -webkit-animation: changeIt 25s infinite;
    /* Safari 4.0 - 8.0 */
    animation: changeIt 25s infinite;
    &:before {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: rgba(#1abc9c, .15);
    }
  }
  .left > .side {
    background-position: 0% 0;
  }
  .center > .side {
    background-position: -798% 0px !important;
  }
  .right > .side {
    background-position: -2000.4% 0 !important;
  }
  div.top .reflection {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: 50% 100%;
    transform: rotateX(-90deg);
    background-image: url('https://www.easypano.com/images/pw/v3/banner.jpg');
    background-size: auto 100%;
    outline: 1px solid transparent;
    -webkit-animation: changeIt 25s infinite;
    /* Safari 4.0 - 8.0 */
    animation: changeIt 25s infinite;
  }
  .left > .reflection {
    left: 0;
    background-position: 0% 0;
  }
  .center > .reflection {
    left: 34.83%;
    background-position: -100% 0;
  }
  .right > .reflection {
    left: 69.66%;
    background-position: -197% 0;
  }
  .overlay {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 99.7%;
    transform-origin: 50% 100%;
    transform: rotateX(-90deg);
    background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.6) 123%);
    outline: 15px solid black;
  }
}

@-webkit-keyframes changeIt {
  0% {
    background-image: url(https://www.easypano.com/images/pw/v3/banner.jpg)
  }
  20% {
    background-image: url(https://www.publicdomainpictures.net/pictures/170000/velka/beautiful-landscape-panorama-1462783515FyK.jpg)
  }
  40% {
    background-image: url(https://www.publicdomainpictures.net/pictures/30000/velka/arizona-sunrise-panarama-1348420056Bcg.jpg)
  }
  60% {
    background-image: url(https://www.publicdomainpictures.net/pictures/190000/velka/waterfall-ben-nevis-scotland-1471093009J8y.jpg)
  }
  80% {
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/0/04/Bibi-Ka-Maqbara-pano.jpg)
  }
  100% {
    background-image: url(http://www.easypano.com/images/pw/v3/banner.jpg)
  }
}


/* Standard syntax */

@keyframes changeIt {
  0% {
    background-image: url(http://www.easypano.com/images/pw/v3/banner.jpg)
  }
  20% {
    background-image: url(http://www.publicdomainpictures.net/pictures/170000/velka/beautiful-landscape-panorama-1462783515FyK.jpg)
  }
  40% {
    background-image: url(http://www.publicdomainpictures.net/pictures/30000/velka/arizona-sunrise-panarama-1348420056Bcg.jpg)
  }
  60% {
    background-image: url(http://www.publicdomainpictures.net/pictures/190000/velka/waterfall-ben-nevis-scotland-1471093009J8y.jpg)
  }
  80% {
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/0/04/Bibi-Ka-Maqbara-pano.jpg)
  }
  100% {
    background-image: url(http://www.easypano.com/images/pw/v3/banner.jpg)
  }
}


/* Profile Link */
/* Profile Link */
@mixin responsive-font($responsive,
$min,
$max: false,
$fallback: false) {
  $responsive-unitless: $responsive / ($responsive - $responsive + 1);
  $dimension: if(unit($responsive)=='vh', 'height', 'width');
  $min-breakpoint: $min / $responsive-unitless * 100;
  @media (max-#{$dimension}: #{$min-breakpoint}) {
    font-size: $min;
  }
  @if $max {
    $max-breakpoint: $max / $responsive-unitless * 100;
    @media (min-#{$dimension}: #{$max-breakpoint}) {
      font-size: $max;
    }
  }
  @if $fallback {
    font-size: $fallback;
  }
  font-size: $responsive;
}

$size:3vw;
$max:36px;
.button.me {
  @include responsive-font($size, $size, $max, $max);
  position: absolute;
  bottom: -75%;
  right: 5%;
  display:flex;
  justify-content:center;
  align-items:center;
  opacity:.5;
  transition:opacity .5s ease;
  border-radius:5px;
  z-index:9999;
  &:hover {
    opacity: 1;
  }
}