10+ JavaScript Slideshow Examples

This post contains a total of 10+ Hand-Picked JavaScript Slideshow Examples with Source Code. All these Slideshows are made using JavaScript & Styled using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

JavaScript Slideshow Examples

1. By Mikael Ainalem

Made by Mikael Ainalem. Geometrical Birds Slideshow. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Inconsolata'>
  
<style>
body {
  font-family: Inconsolata, sans-serif;
  font-size: 18px;
  margin: 0;
}

.header {
  margin: 30px;
}

.header__title {
  display: inline-block;
  font-weight: bold;
  margin-right: 20px;
}

.header__tagline {
  display: inline-block;
}

.keys {
  bottom: 20px;
  position: absolute;
  right: 20px;
}

@media all and (max-width: 768px) {
  .keys {
    display: none;
  }
}

.container {
  align-items: center;
  display: flex;
  margin: 0 auto;
  max-width: 960px;
  width: 100%;
}

@media all and (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

.birds {
  flex-shrink: 1;
  height: auto;
  max-width: 600px;
  width: 100%;
}

.birds circle {
  fill: #e0e0e0;
  pointer-events: none;
}

.birds path {
  pointer-events: none;
}

.bird-text {
  box-sizing: border-box;
  flex-shrink: 0;
  line-height: 1.44;
  padding: 0 20px;
  width: 320px;
}

@media all and (max-width: 768px) {
  .bird-text {
    max-width: 600px;
    width: 100%;
    padding: 20px;
  }
}

.bird-text__title {
  font-size: 50px;
  font-weight: bold;
  margin-bottom: 20px;
}

@media all and (max-width: 768px) {
  .bird-text__title {
    font-size: 32px;
  }
}

.box {
  fill: #fff;
  cursor: pointer;
}

.box:hover {
  fill: #f2f2f2;
}
</style>
</head>
<body>
  <div class="header">
  <div class="header__title">Geometrical Birds</div>
  <div class="header__tagline">Slideshow</div>
</div>

<div class="container">
  <svg xmlns="http://www.w3.org/2000/svg" width="600" height="500" viewBox="0 0 600 500" preserveAspectRatio="xMinYMin" class="birds">
        <rect onclick="goTo(0)" class="box" x="45" y="15" width="30" height="30"></rect>
        <circle cx="60" cy="30" r="5"></circle>
        <rect onclick="goTo(1)" class="box" x="75" y="15" width="30" height="30"></rect>
        <circle cx="90" cy="30" r="5"></circle>
        <rect onclick="goTo(2)" class="box" x="105" y="15" width="30" height="30"></rect>
        <circle cx="120" cy="30" r="5"></circle>
        <rect onclick="goTo(3)" class="box" x="135" y="15" width="30" height="30"></rect>
        <circle cx="150" cy="30" r="5"></circle>
        <rect onclick="goTo(4)" class="box" x="165" y="15" width="30" height="30"></rect>
        <circle cx="180" cy="30" r="5"></circle>
      </svg>
  <div class="bird-text">
    <div class="bird-text__title"></div>
    <div class="bird-text__body"></div>
  </div>
</div>
<svg class="keys" width="182" height="35" viewBox="0 0 104 20">
      <path d="M3.5.5h13c1.662 0 3 1.338 3 3v13c0 1.662-1.338 3-3 3h-13c-1.662 0-3-1.338-3-3v-13c0-1.662 1.338-3 3-3z" fill="none" stroke="#364e59"/>
        <path fill="#364e59" stroke="#364e59" stroke-width=".2" d="M9.82 7.61v.695h.695V7.61H9.82zm.645-2.392V3.843H9.87v1.375l.157 1.943h.28l.158-1.942zM10.656 16.118v-4.432h-.407q-.044.25-.163.413-.12.16-.294.255-.17.094-.38.13-.214.033-.44.033v.425h1.15v3.175h.533z"/>
        <path d="M39.5.5h13c1.662 0 3 1.338 3 3v13c0 1.662-1.338 3-3 3h-13c-1.662 0-3-1.338-3-3v-13c0-1.662 1.338-3 3-3z" fill="none" stroke="#364e59" stroke-linecap="round" stroke-linejoin="round"/>
        <path fill="#364e59" stroke="#364e59" stroke-width=".2" d="M44.09 5.13q0-.144.018-.3.018-.162.075-.294.062-.137.168-.225.108-.092.283-.092.18 0 .28.093.107.09.163.226.057.132.07.294.018.156.018.294 0 .144-.02.306-.018.163-.08.3-.056.13-.163.22-.105.086-.286.086-.175 0-.28-.087-.1-.095-.158-.226-.056-.138-.075-.294-.01-.162-.01-.3zm-.47.013q0 .256.05.48.056.226.175.395.12.168.313.268.193.094.475.094.275 0 .462-.106.188-.106.306-.275.126-.176.176-.4.057-.232.057-.476 0-.256-.05-.48-.044-.233-.163-.4-.112-.17-.306-.27-.188-.1-.48-.1-.29 0-.483.106-.192.1-.31.275-.12.175-.17.406-.05.226-.05.483zm3.556 1.987q0-.144.02-.3.018-.162.074-.294.063-.137.17-.225.105-.092.28-.092.18 0 .28.093.108.09.164.226.056.132.07.294.017.156.017.294 0 .144-.017.306-.02.163-.082.3-.055.13-.16.22-.107.086-.29.086-.174 0-.28-.087-.1-.095-.156-.226-.056-.138-.075-.294-.014-.162-.014-.3zm-.468.013q0 .256.05.48.056.226.175.395.118.162.312.262.194.094.475.094.275 0 .463-.1.187-.106.306-.275.124-.176.174-.4.056-.232.056-.476 0-.256-.05-.48-.044-.233-.162-.4-.113-.17-.307-.27-.186-.1-.48-.1-.287 0-.48.106-.195.1-.314.275-.118.175-.168.406-.05.226-.05.483zm.875-3.35L44.22 8.436h.538l3.356-4.643h-.53zM47.368 12.23v-.47H45.18l-.412 2.3.456.026q.157-.187.357-.3.207-.118.47-.118.224 0 .406.075.187.075.318.212.132.13.2.32.075.18.075.4 0 .26-.076.46-.075.195-.206.326-.125.133-.3.2-.17.064-.356.064-.2 0-.37-.056-.16-.063-.286-.17-.12-.112-.194-.255-.07-.15-.08-.32h-.533q.006.3.118.538.113.24.306.4.194.158.444.245.256.08.544.08.387 0 .675-.117.294-.125.487-.332.194-.206.288-.468.1-.27.1-.55 0-.382-.113-.663-.113-.287-.307-.475-.194-.194-.456-.287-.263-.094-.556-.094-.224 0-.456.08-.225.075-.368.238l-.013-.013.238-1.275h1.788z"/>
        <path fill="#364e59" d="M24 12.666V14h1.334v-1.334H24zM27.333 12.666V14h1.334v-1.334h-1.334zM30.666 12.666V14H32v-1.334h-1.334z"/>
        <path d="M63.5.5h13c1.662 0 3 1.338 3 3v13c0 1.662-1.338 3-3 3h-13c-1.662 0-3-1.338-3-3v-13c0-1.662 1.338-3 3-3z" fill="none" stroke="#364e59" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M72.5 10v4l-5-2z" fill="#364e59" fill-rule="evenodd"/>
        <path d="M100.5.5h-13c-1.662 0-3 1.338-3 3v13c0 1.662 1.338 3 3 3h13c1.662 0 3-1.338 3-3v-13c0-1.662-1.338-3-3-3z" fill="none" stroke="#364e59" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M91.5 10v4l5-2z" fill="#364e59" fill-rule="evenodd"/>
      </svg>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js'></script>
      <script>
var birds = [
[
{ id: 'path14437', d: 'm 495.67653,93.719633 7.65012,-19.67631 31.441,11.23795 z', fill: '#413b3d' },
{ id: 'path14439', d: 'm 495.62423,93.867573 7.70242,-19.82425 -9.59645,-19.31917 z', fill: '#060606' },
{ id: 'path4158', d: 'm 496.00304,93.993843 -2.26694,-39.3102 -22.76178,20.4497 z', fill: '#3e3c3d' },
{ id: 'path4160', d: 'm 452.43161,51.136693 41.43076,3.79949 -22.13044,20.70223 z', fill: '#050507' },
{ id: 'path4166', d: 'm 451.92654,51.389233 42.44091,3.54695 -29.95913,-18.18864 z', fill: '#4d4b4c' },
{ id: 'path4168', d: 'm 452.68415,50.884153 -33.69934,-13.12056 46.18112,-1.26859 z', fill: '#3c3a3b' },
{ id: 'path4174', d: 'm 452.43161,51.136693 -33.57306,14.15356 52.87338,10.34816 z', fill: '#c0c0b4' },
{ id: 'path4176', d: 'm 484.35602,121.61278 -66.02049,-56.827607 53.3964,10.34817 z', fill: '#a3a494' },
{ id: 'path4178', d: 'm 483.99888,119.82707 12.13633,-25.494927 -25.16089,-19.1988 z', fill: '#b2b0b7' },
{ id: 'path4213', d: 'm 464.88829,67.565263 6.26487,3.42068 -6.62908,4.43955 z', fill: '#151515' },
{ id: 'path4215', d: 'm 471.95935,76.025293 -0.80619,-5.03935 -7.00789,4.18701 z', fill: '#151515' },
{ id: 'path4217', d: 'm 471.95935,76.025293 -1.43754,4.93591 -7.13415,-6.4196 z', fill: '#151515' },
{ id: 'path4219', d: 'm 465.6459,82.970083 4.74964,-2.26142 -6.25027,-5.53571 z', fill: '#151515' },
{ id: 'path4221', d: 'm 465.6459,82.970083 -5.35188,-1.75635 4.4826,-6.67213 z', fill: '#151515' },
{ id: 'path4223', d: 'm 456.80707,76.530363 3.73949,4.80964 4.23006,-6.7984 z', fill: '#151515' },
{ id: 'path4225', d: 'm 456.80707,76.530363 2.22426,-6.0495 6.75544,4.94463 z', fill: '#151515' },
{ id: 'path4227', d: 'm 464.88829,67.565253 -5.85696,2.91561 5.74529,5.0709 z', fill: '#151515' },
{ id: 'path4229', d: 'm 452.68415,50.884153 -32.60252,-12.84636 -1.65809,28.18301 z', fill: '#060608' },
{ id: 'path4231', d: 'm 374.82701,64.812723 45.7993,-27.80675 -0.26912,29.68029 z', fill: '#3e3c3d' },
{ id: 'path4233', d: 'm 374.82701,64.812723 75.7993,64.336107 -31.53181,-63.725257 z', fill: '#060606' },
{ id: 'path4235', d: 'm 484.82701,120.88416 -34.2007,8.26467 -32.7945,-64.735407 z', fill: '#3e3c3d' },
{ id: 'path4237', d: 'm 484.82701,120.88416 -35.46339,7.50706 43.30231,38.10379 z', fill: '#060606' },
{ id: 'path4387', d: 'm 374.82701,64.812723 75.7993,64.336107 -93.65619,-17.25823 z', fill: '#ebc26b' },
{ id: 'path4389', d: 'm 388.46407,148.65539 62.16224,-19.50656 -93.65619,-17.25823 z', fill: '#f2d392' },
{ id: 'path4391', d: 'm 391.24199,149.413 -74.4609,-1.07127 40.18903,-36.45113 z', fill: '#cbcbcb' },
{ id: 'path4399', d: 'm 442.85003,197.52194 40.81199,24.66261 9.00391,-55.68954 z', fill: '#dda95d' },
{ id: 'path4401', d: 'm 444.11272,198.02702 4.37073,-71.02104 44.18248,39.48903 z', fill: '#eec16e' },
{ id: 'path4403', d: 'm 444.11272,198.02702 4.37073,-71.02104 -51.40925,60.9176 z', fill: '#e6b767' },
{ id: 'path4405', d: 'm 389.827,148.74131 58.65645,-21.73533 -51.40925,60.9176 z', fill: '#ecc171' },
{ id: 'path4407', d: 'm 389.827,148.74131 58.65645,-21.73533 -92.96036,-15.51097 z', fill: '#f2d392' },
{ id: 'path4409', d: 'm 389.827,148.74131 -72.05784,-1.73533 81.2387,42.85125 z', fill: '#bfbfbf' },
{ id: 'path4514', d: 'm 295.88281,209.35046 21.88635,-62.34448 -70.78926,73.6609 z', fill: '#b2b1b7' },
{ id: 'path4516', d: 'm 295.88281,209.35046 21.88635,-62.34448 34.26661,56.48831 z', fill: '#bfbfbf' },
{ id: 'path4518', d: 'm 397.90822,188.13726 -80.13906,-41.13128 34.26661,56.48831 z', fill: '#b2b1b7' },
{ id: 'path4520', d: 'm 397.90822,188.13726 -28.74384,48.18057 -17.12861,-32.82354 z', fill: '#6c677a' },
{ id: 'path4522', d: 'm 398.4133,187.12711 -30.67749,49.905 76.22385,-39.59873 z', fill: '#ddaa5e' },
{ id: 'path4524', d: 'm 413.06051,230.56367 -41.75327,4.32559 72.90495,-37.70842 z', fill: '#d19858' },
{ id: 'path4526', d: 'm 413.06051,230.56367 70.87874,-8.30132 -40.48467,-25.33405 z', fill: '#dea44a' },
{ id: 'path4528', d: 'm 411.81051,230.3851 72.12874,-8.12275 -51.59635,22.14312 z', fill: '#e1b156' },
{ id: 'path4548', d: 'm 443.36509,267.93931 40.57416,-45.67696 -51.59635,22.14312 z', fill: '#efc472' },
{ id: 'path4550', d: 'm 443.36509,267.93931 -66.32869,-1.94453 55.3065,-21.58931 z', fill: '#deaa5e' },
{ id: 'path4490', d: 'm 195.48234,305.86569 -24.85604,5.426 54.92503,-53.48195 z', fill: '#a4a1a4' },
{ id: 'path4701', d: 'm 223.33949,260.50855 -52.71319,50.78314 76.3536,-90.62481 z', fill: '#cccbcc' },
{ id: 'path4488', d: 'm 194.45424,306.13617 69.74348,-39.84448 -41.14639,-5.62481 z', fill: '#c3c3c6' },
{ id: 'path4703', d: 'm 221.95424,261.49332 42.24348,4.79837 -17.21782,-45.62481 z', fill: '#b2b1b7' },
{ id: 'path4705', d: 'm 295.88281,208.81474 -33.20032,57.72949 -15.70259,-45.87735 z', fill: '#cbcbcb' },
{ id: 'path4707', d: 'm 295.88281,208.63617 -33.76668,58.97948 49.86377,-34.80592 z', fill: '#adaea3' },
{ id: 'path4718', d: 'm 295.52567,208.63617 58.3149,-5.20163 -43.28924,30.80376 z', fill: '#a3a590' },
{ id: 'path4720', d: 'm 369.45424,234.35045 -16.6851,-30.20162 -44.00353,30.44661 z', fill: '#8a8893' },
{ id: 'path4722', d: 'm 369.45424,234.35045 -107.57796,33.01267 48.67505,-34.37482 z', fill: '#95939d' },
{ id: 'path4724', d: 'm 369.45424,234.35045 -107.9351,32.8341 47.42504,0.62519 z', fill: '#a1a0a4' },
{ id: 'path4726', d: 'm 369.45424,234.35045 -25.97082,33.72695 -35.96781,-0.62479 z', fill: '#ddba65' },
{ id: 'path4728', d: 'm 369.45424,234.35045 -25.61367,33.19124 35.46075,0.62521 z', fill: '#dbaa60' },
{ id: 'path4730', d: 'm 369.27567,234.17188 44.29441,-3.59448 -35.8759,35.0895 z', fill: '#deba66' },
{ id: 'path4732', d: 'm 433.02567,244.35045 -20.97082,-13.77305 -34.36067,35.0895 z', fill: '#eec16e' },
{ id: 'path4791', d: 'm 38.508233,405.87079 132.118067,-94.5791 -132.242894,85.64681 z', fill: '#a8a1b4' },
{ id: 'path4793', d: 'm 38.508233,405.87079 132.118067,-94.5791 25.59344,-6.27707 z', fill: '#b1b0b5' },
{ id: 'path4795', d: 'm 38.508233,405.87079 107.874407,-57.20345 50.84725,-44.66287 z', fill: '#8e8d93' },
{ id: 'path4806', d: 'm 225.38644,305.36061 -79.0038,43.30673 49.58456,-43.65272 z', fill: '#746f81' },
{ id: 'path4808', d: 'm 225.38644,305.36061 37.16374,-38.51563 -68.09821,38.16964 z', fill: '#bbbcae' },
{ id: 'path4810', d: 'm 225.38644,305.36061 37.16374,-38.51563 -6.22637,32.10873 z', fill: '#8a898f' },
{ id: 'path5485', d: 'm 277.47927,304.1001 -15.28623,-37.79083 -6.62684,32.64444 z', fill: '#999687' },
{ id: 'path4812', d: 'm 305.69356,311.42153 -43.50052,-45.11226 14.9803,37.64444 z', fill: '#a7a598' },
{ id: 'path4492', d: 'm 305.69356,311.42153 -2.2322,-24.37349 -42.03294,-21.22015 z', fill: '#cab653' },
{ id: 'path4814', d: 'm 305.69356,311.42153 -4.75758,-26.3938 51.57949,30.05779 z', fill: '#b0a25f' },
{ id: 'path4816', d: 'm 310.87957,264.9672 -48.32939,1.87778 40.55447,22.03784 z', fill: '#d19858' },
{ id: 'path4836', d: 'm 309.97402,265.2937 40.9645,50.0386 -49.63228,-27.59487 z', fill: '#ddba63' },
{ id: 'path4838', d: 'm 310.15259,266.05132 40.78593,49.28098 -6.44826,-48.37697 z', fill: '#e1a95e' },
{ id: 'path4840', d: 'm 379.73056,266.02067 -28.79204,49.31163 -6.98397,-48.1984 z', fill: '#e5b767' },
{ id: 'path4851', d: 'm 379.73056,265.66353 -28.79204,49.66877 27.86629,-8.29737 z', fill: '#aba067' },
{ id: 'path4853', d: 'm 378.65914,266.02067 27.83777,31.12889 -27.6921,9.88537 z', fill: '#cbb96e' },
{ id: 'path4855', d: 'm 377.23056,265.30639 29.26635,31.84317 37.67195,-29.7198 z', fill: '#edc269' },
{ id: 'path4895', d: 'm 365.83262,315.17767 -14.8941,0.15463 56.15056,-18.3989 z', fill: '#8a8894' },
{ id: 'path4897', d: 'm 365.83262,314.82053 -15.90425,-1.00346 49.91325,60.04998 z', fill: '#8a8894' },
{ id: 'path4921', d: 'm 365.83262,315.17767 39.21304,48.01177 -5.20404,10.67761 z', fill: '#b2b1b9' },
{ id: 'path4923', d: 'm 452.26119,375.17767 -48.28696,-12.88109 -4.13261,11.57047 z', fill: '#6d6776' },
{ id: 'path4925', d: 'm 373.68976,378.7491 18.32018,-13.95251 7.83168,9.07046 z', fill: '#6d6776' },
{ id: 'path4927', d: 'm 309.40405,317.32053 42.03955,-2.99838 -42.49484,-2.59796 z', fill: '#8a8894' },
{ id: 'path4929', d: 'm 309.22548,316.60624 15.17987,-0.78151 1.15055,50.00664 z', fill: '#8a8894' },
{ id: 'path4931', d: 'm 309.40405,317.32053 3.32019,58.54749 12.83166,-10.03669 z', fill: '#b2b1b7' },
{ id: 'path4933', d: 'm 367.97548,376.60624 -55.25124,-0.73822 12.83166,-10.03669 z', fill: '#6f6679' },
{ id: 'path4935', d: 'm 289.22548,379.9991 23.49876,-4.13108 -0.5612,-12.00098 z', fill: '#6f6679' },
{ id: 'path4604', d: 'm 52.987578,37.012422 0,-14.012422 14.012422,14.012422 z', fill: '#eec16e' },
{ id: 'path5200', d: 'm 67,23 0,14.1 -14.1,-14.1 z', fill: '#eec16e' }],

[
{ id: '#path14437', d: 'm 439.66868,103.73835 37.57052,-12.003657 -25.65263,-23.5609 z', fill: '#393939' },
{ id: '#path14439', d: 'm 440.74012,104.09548 -30.64378,-29.860787 41.6688,-6.06091 z', fill: '#464b5e' },
{ id: '#path4158', d: 'm 410.75154,74.322373 23.00942,-28.19338 18.46594,22.17106 z', fill: '#5b6073' },
{ id: '#path4160', d: 'm 434.69933,46.490883 -31.71738,-5.68686 7.89251,33.83614 z', fill: '#777b87' },
{ id: '#path4166', d: 'm 403.3846,40.682503 -41.8189,5.42482 49.5613,28.78538 z', fill: '#595f6f' },
{ id: '#path4168', d: 'm 336.90579,72.058503 74.15738,1.82801 -49.68618,-28.54077 z', fill: '#686c77' },
{ id: '#path4174', d: 'm 337.08436,71.701363 73.97881,2.18515 -37.05927,13.88564 z', fill: '#343a48' },
{ id: '#path4176', d: 'm 406.31045,97.564853 4.75272,-23.67834 -39.21482,14.27342 z', fill: '#464d5a' },
{ id: '#path4178', d: 'm 405.65744,96.955173 5.40573,-23.06866 30.66428,29.395067 z', fill: '#5b6073' },
{ id: '#path4213', d: 'm 409.44552,65.936313 -7.34745,3.40452 9.02893,5.55187 z', fill: '#151515' },
{ id: '#path4215', d: 'm 400.60668,73.765003 1.74393,-4.67671 8.77639,5.80441 z', fill: '#151515' },
{ id: '#path4217', d: 'm 400.60668,73.259923 0.9863,7.19258 9.53402,-5.5598 z', fill: '#151515' },
{ id: '#path4219', d: 'm 408.56163,84.624143 -7.09491,-4.29791 9.66028,-5.5598 z', fill: '#151515' },
{ id: '#path4221', d: 'm 408.30909,84.497873 8.30992,-2.40387 -5.61828,-7.58011 z', fill: '#151515' },
{ id: '#path4223', d: 'm 409.44552,65.936313 7.42603,2.64691 -6.12336,6.94083 z', fill: '#151515' },
{ id: '#path4225', d: 'm 418.78943,74.648883 -1.91788,-6.06566 -5.74455,6.30948 z', fill: '#151515' },
{ id: '#path4227', d: 'm 418.78943,74.648883 -2.29669,7.69767 -5.36574,-7.45385 z', fill: '#151515' },
{ id: '#path4229', d: 'm 337.97722,70.987073 -33.34262,40.756577 29.01216,1.0285 z', fill: '#a22920' },
{ id: '#path4231', d: 'm 337.97722,70.987073 34.33596,46.649427 -40.80927,-4.50721 z', fill: '#d8503a' },
{ id: '#path4233', d: 'm 337.97722,71.344213 45.19509,19.57556 -11.18192,26.500227 z', fill: '#c63f2b' },
{ id: '#path4235', d: 'm 371.42599,117.52459 10.37005,-27.214497 59.26353,13.094037 z', fill: '#eb654a' },
{ id: '#path4237', d: 'm 369.93243,117.27206 71.57094,-13.91293 10.71481,46.55588 z', fill: '#d8503a' },
{ id: '#path4387', d: 'm 296.25549,143.7592 9.27197,-32.37269 -26.60841,30.81312 z', fill: '#6c6876' },
{ id: '#path4389', d: 'm 296.07692,143.7592 9.09339,-32.55126 26.60588,1.34884 z', fill: '#b2b1b9' },
{ id: '#path4391', d: 'm 295.00549,144.29491 76.23626,-27.55126 -39.64413,-4.0083 z', fill: '#8a8991' },
{ id: '#path4399', d: 'm 296.25549,143.7592 -59.29945,47.62731 41.96301,-49.18688 z', fill: '#b2b1b7' },
{ id: '#path4401', d: 'm 296.25549,143.7592 -59.29945,47.62731 35.53444,4.38454 z', fill: '#8a8895' },
{ id: '#path4403', d: 'm 296.25549,143.7592 76.77198,-28.08698 -100.53699,80.09883 z', fill: '#b2b1b7' },
{ id: '#path4405', d: 'm 351.96978,174.47348 19.98626,-58.44412 -99.46556,79.74169 z', fill: '#8a8895' },
{ id: '#path4407', d: 'm 351.96978,174.47348 19.27198,-58.44412 31.963,53.31311 z', fill: '#a22920' },
{ id: '#path4409', d: 'm 402.86264,169.65205 -31.97803,-53.26555 81.24872,33.31311 z', fill: '#c63f2b' },
{ id: '#path4514', d: 'm 402.86264,169.65205 48.89545,-21.4432 0.37524,50.06219 z', fill: '#d8503a' },
{ id: '#path4516', d: 'm 452.14835,197.86634 -49.31883,-29.30035 38.54928,74.84321 z', fill: '#c63f2b' },
{ id: '#path4518', d: 'm 388.93407,205.36634 13.55678,-37.79563 38.53081,74.05278 z', fill: '#d8503a' },
{ id: '#path4520', d: 'm 403.93407,168.22348 -16.08608,40.41866 -38.01055,-34.96936 z', fill: '#b23227' },
{ id: '#path4522', d: 'm 348.3144,223.69521 40.24788,-17.91021 -36.93912,-32.46936 z', fill: '#a82822' },
{ id: '#path4524', d: 'm 259.38583,267.26664 89.53361,-42.91022 3.41801,-51.39792 z', fill: '#3e3c3e' },
{ id: '#path4526', d: 'm 260.10012,266.55235 3.68444,-37.26591 89.26717,-56.68508 z', fill: '#1c202c' },
{ id: '#path4528', d: 'm 352.95726,172.98092 -81.53783,22.80408 -8.79843,35.55239 z', fill: '#b2b1b7' },
{ id: '#path4548', d: 'm 264.31638,230.30707 7.10305,-34.52207 -51.22484,61.81636 z', fill: '#9d9ca3' },
{ id: '#path4550', d: 'm 272.60012,195.48092 -93.41021,73.8755 41.34015,-11.69007 z', fill: '#8a8991' },
{ id: '#path4490', d: 'm 272.60012,195.48092 -35.46641,-4.33878 -57.90966,78.162 z', fill: '#6c6877' },
{ id: '#path4701', d: 'm 417.21834,273.55164 24.66845,-31.73472 -53.39306,-37.064 z', fill: '#c3402b' },
{ id: '#path4488', d: 'm 417.72342,273.80417 -41.24401,-7.23852 12.26685,-61.30765 z', fill: '#b23227' },
{ id: '#path4703', d: 'm 348.02289,223.04401 28.70906,43.52165 12.51939,-62.06528 z', fill: '#c63f2b' },
{ id: '#path4705', d: 'm 348.27543,223.04401 28.91827,42.91197 -36.17715,22.89214 z', fill: '#a22920' },
{ id: '#path4707', d: 'm 341.4569,289.209 6.99078,-66.0799 -60.96921,59.91065 z', fill: '#9e989a' },
{ id: '#path4718', d: 'm 259.12947,266.98564 89.31821,-43.85654 -60.96921,59.91065 z', fill: '#1c202c' },
{ id: '#path4720', d: 'm 260.16261,266.06345 -27.73454,27.27126 55.6754,-10.47353 z', fill: '#423c3e' },
{ id: '#path4722', d: 'm 260.24422,266.11576 -25.76258,27.04038 -90.44483,28.77449 z', fill: '#1d1f2e' },
{ id: '#path4724', d: 'm 260.23656,266.34663 -103.21279,33.55408 -12.67446,22.38706 z', fill: '#3e3c3d' },
{ id: '#path4726', d: 'm 260.19192,266.37596 -103.39136,33.74796 28.6525,-17.08417 z', fill: '#1b1e2e' },
{ id: '#path4728', d: 'm 260.68934,266.3683 -80.93714,2.72275 5.70086,13.9487 z', fill: '#3e3c3d' },
{ id: '#path4730', d: 'm 260.71866,266.59151 -81.72407,2.87835 41.81381,-12.44154 z', fill: '#2d2f2d' },
{ id: '#path4732', d: 'm 260.6052,267.5625 4.69459,-38.27606 -45.08312,27.9152 z', fill: '#3c3c3c' },
{ id: '#path4791', d: 'm 417.72342,273.80417 -41.9583,-9.02423 17.26685,36.19235 z', fill: '#a22920' },
{ id: '#path4793', d: 'm 376.71454,265.64861 16.43239,35.00969 -40.73028,16.58103 z', fill: '#b03327' },
{ id: '#path4795', d: 'm 353.2285,316.91385 23.50345,-51.10581 -35.12855,22.51631 z', fill: '#b93c38' },
{ id: '#path4806', d: 'm 352.97596,316.91385 -30.78227,6.08037 19.66225,-34.9224 z', fill: '#bfbfbf' },
{ id: '#path4808', d: 'm 275.38021,325.70935 48.07617,-2.46259 18.39956,-35.17494 z', fill: '#acaaab' },
{ id: '#path4810', d: 'm 278.05879,324.99507 9.53717,-42.15441 54.25998,5.23116 z', fill: '#918b8d' },
{ id: '#path5485', d: 'm 259.53685,324.48999 28.81672,-42.40694 -10.09392,43.82617 z', fill: '#867d7e' },
{ id: '#path4812', d: 'm 259.71542,324.66856 29.39577,-42.33298 -55.31582,10.7165 z', fill: '#918b8d' },
{ id: '#path4492', d: 'm 263.64399,325.73999 -35.33374,3.35066 5.48512,-36.03857 z', fill: '#9a9a9a' },
{ id: '#path4814', d: 'm 228.64399,328.23999 -31.40517,4.06495 36.55655,-39.25286 z', fill: '#bfbfbf' },
{ id: '#path4816', d: 'm 190.07256,307.34713 7.16626,24.95781 36.55655,-39.25286 z', fill: '#867d7f' },
{ id: '#path4836', d: 'm 190.07256,307.34713 7.16626,24.95781 -119.514876,94.49714 z', fill: '#1c202c' },
{ id: '#path4838', d: 'm 100.9266,430.08066 96.31222,-97.77572 -119.514876,94.49714 z', fill: '#3e3c3d' },
{ id: '#path4840', d: 'm 100.9266,430.08066 96.31222,-97.77572 -89.46285,114.44765 z', fill: '#21202f' },
{ id: '#path4851', d: 'm 201.43678,345.22784 -4.19796,-12.9229 -89.46285,114.44765 z', fill: '#bcbbb9' },
{ id: '#path4853', d: 'm 201.43678,345.22784 -4.19796,-12.9229 32.08721,-4.09733 z', fill: '#acaaab' },
{ id: '#path4855', d: 'm 201.43678,345.22784 26.35915,-16.45843 34.86513,-5.10749 z', fill: '#868385' },
{ id: '#path4895', d: 'm 277.70164,325.35221 43.25474,-1.92688 3.93528,7.6822 z', fill: '#3e3c3d' },
{ id: '#path4897', d: 'm 323.95164,329.81649 -16.92383,-1.7483 33.39956,50.18219 z', fill: '#3e3c3d' },
{ id: '#path4921', d: 'm 340.38021,378.38792 6.6476,-14.2483 -23.74329,-35.17495 z', fill: '#4e4a4b' },
{ id: '#path4923', d: 'm 339.48735,378.38792 55.04046,5.03741 -47.85044,-19.99637 z', fill: '#4e4a4b' },
{ id: '#path4925', d: 'm 341.0945,378.38792 -20.67383,6.28741 13.7567,-16.96066 z', fill: '#3e3c3d' },
{ id: '#path4927', d: 'm 239.8445,330.88792 20.57617,-6.39116 23.93528,1.4322 z', fill: '#191e31' },
{ id: '#path4929', d: 'm 261.0945,327.13792 30.57617,39.68027 -7.67186,-41.24637 z', fill: '#191e31' },
{ id: '#path4931', d: 'm 299.30879,358.03078 -7.81669,8.43027 -7.49329,-40.88923 z', fill: '#4c4845' },
{ id: '#path4933', d: 'm 299.30879,358.03078 -8.70955,8.43027 35.721,1.61077 z', fill: '#4c4845' },
{ id: '#path4935', d: 'm 286.0945,358.92364 5.3976,7.53741 -31.60043,5.71791 z', fill: '#191e31' },
{ id: '#path4604', d: 'm 82.987578,22.987654 0,14.024692 14.012422,-14.024692 z', fill: '#c63f2b' },
{ id: '#path5200', d: 'm 82.9,37.012346 14.1,0.08765 0,-14.2 z', fill: '#c63f2b' }],

[
{ id: '#path14437', d: 'm 537.04092,136.75167 -0.0694,-35.03304 37.21961,17.59542 z', fill: '#1f1e2c' },
{ id: '#path14439', d: 'm 537.74432,137.10337 1.68907,-35.38474 -53.4163,5.88627 z', fill: '#554c4d' },
{ id: '#path4158', d: 'm 540.64327,102.67931 -12.48931,-17.885005 -43.13163,23.059285 z', fill: '#6c6877' },
{ id: '#path4160', d: 'm 488.15445,74.852251 41.07961,10.336422 -43.21697,22.913597 z', fill: '#8a8895' },
{ id: '#path4166', d: 'm 488.75119,74.830921 -49.20095,14.226464 47.21293,19.790965 z', fill: '#b5afb6' },
{ id: '#path4168', d: 'm 470.21769,133.23465 -29.424,-44.134605 46.96424,18.504855 z', fill: '#774220' },
{ id: '#path4174', d: 'm 468.81089,133.93805 48.50799,23.74375 -30.05834,-50.82298 z', fill: '#8d5429' },
{ id: '#path4176', d: 'm 538.09604,137.10336 -21.43789,19.87502 -30.39237,-49.62217 z', fill: '#6c6877' },
{ id: '#path4178', d: 'm 538.09604,137.10336 -22.22663,19.48066 16.11753,22.51924 z', fill: '#1f1e2c' },
{ id: '#path4213', d: 'm 509.08275,108.9392 6.60071,2.41618 -7.1599,6.9432 z', fill: '#020202' },
{ id: '#path4215', d: 'm 518.7195,117.64336 -3.03604,-6.35016 -7.1599,7.00538 z', fill: '#020202' },
{ id: '#path4217', d: 'm 518.7195,117.58118 -2.04128,7.51433 -8.15466,-6.79693 z', fill: '#020202' },
{ id: '#path4219', d: 'm 508.77189,129.02094 8.03068,-3.92543 -8.27901,-6.79693 z', fill: '#020202' },
{ id: '#path4221', d: 'm 508.77189,129.02094 -6.7664,-3.3037 6.51807,-7.41866 z', fill: '#020202' },
{ id: '#path4223', d: 'm 498.82427,119.07332 3.18122,6.64392 6.51807,-7.41866 z', fill: '#020202' },
{ id: '#path4225', d: 'm 498.82427,119.07332 3.42992,-7.53142 6.26937,6.75668 z', fill: '#020202' },
{ id: '#path4227', d: 'm 509.14492,108.87702 -6.89073,2.66488 6.26937,6.75668 z', fill: '#020202' },
{ id: '#path4229', d: 'm 518.20082,225.13974 -2.33141,-69.96252 16.11753,23.92604 z', fill: '#444140' },
{ id: '#path4231', d: 'm 518.44951,224.14498 -1.8767,-70.02287 -41.53595,117.74265 z', fill: '#1c202c' },
{ id: '#path4233', d: 'm 474.9287,224.14498 40.94071,-67.56096 -41.08124,116.27549 z', fill: '#4f4d5b' },
{ id: '#path4235', d: 'm 475.17739,225.63713 40.69202,-69.05311 -37.59957,11.07949 z', fill: '#6c6877' },
{ id: '#path4237', d: 'm 478.65907,168.18966 37.21034,-11.60564 -47.04981,-23.48848 z', fill: '#8a8895' },
{ id: '#path4387', d: 'm 412.45389,125.16142 28.35746,-36.310047 30.82186,45.299277 z', fill: '#6b3c1e' },
{ id: '#path4389', d: 'm 430.12429,182.96111 -18.71016,-59.7887 58.81228,9.21973 z', fill: '#8e5327' },
{ id: '#path4391', d: 'm 429.77259,183.31281 49.27118,-13.92185 -8.81736,-36.99882 z', fill: '#b2b1b7' },
{ id: '#path4399', d: 'm 430.82769,182.60941 -16.95166,-59.7887 -20.67219,43.68645 z', fill: '#9b5c30' },
{ id: '#path4401', d: 'm 386.44819,128.53579 27.42784,-5.71508 -19.41106,44.49285 z', fill: '#af6630' },
{ id: '#path4403', d: 'm 340.44047,137.23995 46.32832,-8.69936 8.19356,39.02166 z', fill: '#8e5327' },
{ id: '#path4405', d: 'm 429.77259,183.31281 49.41687,-15.32865 -3.33583,59.0156 z', fill: '#8a8895' },
{ id: '#path4407', d: 'm 428.48647,182.11202 2.62293,47.62588 45.32695,-3.64756 z', fill: '#c6c5cd' },
{ id: '#path4409', d: 'm 404.55918,279.16515 26.55022,-49.42725 44.82956,-5.1397 z', fill: '#898890' },
{ id: '#path4514', d: 'm 404.3105,278.91645 71.06578,-53.90366 -0.32907,47.13274 z', fill: '#6c6877' },
{ id: '#path4516', d: 'm 475.43592,271.70443 -44.24118,29.7275 -27.02428,-22.82045 z', fill: '#8a8991' },
{ id: '#path4518', d: 'm 341.14388,137.23995 -32.42651,8.08963 91.16879,22.58438 z', fill: '#a6602f' },
{ id: '#path4520', d: 'm 331.99964,183.66451 65.14043,-16.77815 -88.69623,-22.18468 z', fill: '#8e5327' },
{ id: '#path4522', d: 'm 347.18919,199.30146 -17.01804,-16.33985 65.4946,-16.45445 z', fill: '#a6602f' },
{ id: '#path4524', d: 'm 368.57656,225.16526 -23.48399,-25.79008 50.57318,-32.86802 z', fill: '#8a5027' },
{ id: '#path4526', d: 'm 367.87316,223.75845 64.29136,-41.85194 -37.20218,-15.75105 z', fill: '#6b3c1e' },
{ id: '#path4528', d: 'm 367.87316,223.75845 63.23626,-42.20364 -53.02874,58.80961 z', fill: '#924f24' },
{ id: '#path4548', d: 'm 431.88279,229.03397 -1.3311,-48.20756 -53.35027,60.06557 z', fill: '#b2b1b7' },
{ id: '#path4550', d: 'm 431.88279,229.03397 -27.50267,50.99719 -26.29944,-39.31503 z', fill: '#c6c5cd' },
{ id: '#path4490', d: 'm 368.22486,321.1797 37.91376,-42.90705 26.45575,22.58439 z', fill: '#6c6877' },
{ id: '#path4701', d: 'm 347.12279,284.95446 57.25733,-4.9233 -35.44368,41.57626 z', fill: '#b2b1b7' },
{ id: '#path4488', d: 'm 348.17789,286.71297 -7.4557,-26.37708 64.08779,19.77079 z', fill: '#c4c3c9' },
{ id: '#path4703', d: 'm 377.01739,238.88161 -35.2401,22.50938 63.38439,19.06739 z', fill: '#b2b1b7' },
{ id: '#path4705', d: 'm 348.88129,285.65787 -33.48158,21.80598 53.53673,14.14357 z', fill: '#8a8991' },
{ id: '#path4707', d: 'm 348.88129,285.65787 -31.72308,21.80598 -12.23139,-46.34904 z', fill: '#b2b1b7' },
{ id: '#path4718', d: 'm 348.88129,285.65787 -6.7523,-24.61858 -39.68908,-1.27094 z', fill: '#8a8895' },
{ id: '#path4720', d: 'm 379.4793,238.88159 -37.35031,22.5094 -37.20217,-0.62788 z', fill: '#706671' },
{ id: '#path4722', d: 'm 378.07248,239.93669 -51.29772,-2.04934 -21.84805,22.87571 z', fill: '#8e5226' },
{ id: '#path4724', d: 'm 380.18271,241.3435 -54.90002,-2.17002 43.65375,-15.339 z', fill: '#b3afb7' },
{ id: '#path4726', d: 'm 348.23734,199.42982 -20.8798,40.50741 41.5789,-16.10275 z', fill: '#7c7a89' },
{ id: '#path4728', d: 'm 330.59282,181.20259 -3.23528,58.73464 21.1863,-40.47441 z', fill: '#8a8895' },
{ id: '#path4730', d: 'm 331.64792,181.90598 -4.29038,57.8554 -26.65114,-56.02084 z', fill: '#b2b0b7' },
{ id: '#path4732', d: 'm 331.64792,181.90599 -22.22714,-36.92808 -8.71438,38.76263 z', fill: '#8a8895' },
{ id: '#path4791', d: 'm 269.7485,156.23179 39.67228,-11.25388 -7.65927,38.76263 z', fill: '#b2b1b7' },
{ id: '#path4793', d: 'm 305.62204,260.68708 -12.02781,37.63254 23.99383,9.57145 z', fill: '#c3c2ca' },
{ id: '#path4795', d: 'm 305.97374,259.98368 -44.56928,22.95589 32.97131,16.15897 z', fill: '#8a8895' },
{ id: '#path4806', d: 'm 307.46588,259.98368 -76.47448,9.84814 30.80594,13.35054 z', fill: '#757381' },
{ id: '#path4808', d: 'm 306.47112,259.98368 -75.47972,10.19984 -24.18924,-38.96332 z', fill: '#b2b1b7' },
{ id: '#path4810', d: 'm 305.97374,259.98368 -58.80407,-30.2458 -40.36751,1.83402 z', fill: '#693d1f' },
{ id: '#path5485', d: 'm 305.97374,259.98368 -60.21088,-29.8941 16.2564,-38.61163 z', fill: '#8e5327' },
{ id: '#path4812', d: 'm 305.97374,260.72974 -4.64207,-77.06473 -40.36751,7.81294 z', fill: '#a6602f' },
{ id: '#path4492', d: 'm 305.47636,261.08146 -4.14469,-77.41645 26.45573,55.64432 z', fill: '#6d3c1c' },
{ id: '#path4814', d: 'm 270.45191,156.23181 31.23147,27.4332 -40.36752,9.21975 z', fill: '#8b5528' },
{ id: '#path4816', d: 'm 270.45191,156.23181 -24.68903,7.38622 15.55298,29.26673 z', fill: '#6b3c1e' },
{ id: '#path4836', d: 'm 175.84427,179.0924 70.27031,-14.77096 15.20128,28.56332 z', fill: '#a6602f' },
{ id: '#path4838', d: 'm 175.84427,179.0924 70.27031,52.75568 15.55298,-38.96332 z', fill: '#6b3c1e' },
{ id: '#path4840', d: 'm 175.84427,179.0924 70.62201,51.34887 -38.96071,1.13063 z', fill: '#a75f2c' },
{ id: '#path4851', d: 'm 175.84427,179.0924 -113.420747,11.46095 145.785457,41.72196 z', fill: '#6a3b1d' },
{ id: '#path4853', d: 'm 178.33118,179.0924 -154.140081,0.35219 40.77225,11.89982 z', fill: '#512d16' },
{ id: '#path4855', d: 'm 175.84427,179.0924 -141.453836,-15.82606 -9.769501,16.60549 z', fill: '#9e5c2a' },
{ id: '#path4895', d: 'm 372.79697,332.08244 -57.39726,-24.61859 53.18503,13.44016 z', fill: '#8a8991' },
{ id: '#path4897', d: 'm 372.26942,330.32393 21.96135,49.21797 -44.28619,-57.93448 z', fill: '#8a8991' },
{ id: '#path4921', d: 'm 395.6015,379.74313 -14.94564,2.78305 -30.71124,-60.91876 z', fill: '#a4a3a8' },
{ id: '#path4923', d: 'm 394.95843,379.74314 -9.08012,-14.87396 55.30258,23.91318 z', fill: '#88878d' },
{ id: '#path4925', d: 'm 369.27996,387.29953 8.72257,-10.55054 3.94686,5.55706 z', fill: '#a4a3a8' },
{ id: '#path4927', d: 'm 317.38848,316.9791 -44.36878,-28.50712 43.93994,19.03203 z', fill: '#514f5d' },
{ id: '#path4929', d: 'm 317.53417,313.75862 -21.81081,-11.53583 15.20737,78.89356 z', fill: '#514f5d' },
{ id: '#path4931', d: 'm 317.03679,313.50992 8.52942,55.59808 -14.63548,12.00835 z', fill: '#898794' },
{ id: '#path4933', d: 'm 364.28795,389.85786 -38.72174,-20.74986 -15.13286,11.51097 z', fill: '#898794' },
{ id: '#path4935', d: 'm 288.6861,383.39191 19.47178,-16.77082 3.76761,13.99788 z', fill: '#504c5d' },
{ id: '#path4604', d: 'm 112.98758,37.012422 0,-14.012422 14.01242,14.012422 z', fill: '#8d5429' },
{ id: '#path5200', d: 'm 127,23 0,14.1 -14.1,-14.1 z', fill: '#8d5429' }],

[
{ id: '#path14437', d: 'm 509.45378,78.954395 -25.43143,-0.601737 6.27334,-22.048228 z', fill: '#6b7681' },
{ id: '#path14439', d: 'm 488.04051,76.862306 -10.19802,-18.476833 -0.0711,36.25707 z', fill: '#a8b4c0' },
{ id: '#path4158', d: 'm 487.8033,77.50262 -9.96081,-19.117147 14.02508,-19.911 z', fill: '#dbe0f6' },
{ id: '#path4160', d: 'm 463.05801,22.600693 14.78448,35.78478 14.82865,-19.55386 z', fill: '#8192ac' },
{ id: '#path4166', d: 'm 463.59372,22.600693 14.24877,35.78478 -62.31421,-28.48243 z', fill: '#99aac6' },
{ id: '#path4168', d: 'm 420.66224,57.450953 57.18025,0.93452 -61.68286,-28.73497 z', fill: '#8192ae' },
{ id: '#path4174', d: 'm 420.66224,57.450953 -4.81786,-27.72856 -42.23743,56.87546 z', fill: '#a7b9cf' },
{ id: '#path4176', d: 'm 420.66224,57.450953 57.55906,0.55571 -38.7019,29.60134 z', fill: '#a7b9cf' },
{ id: '#path4178', d: 'm 478.11467,94.574063 0.10663,-36.5674 -38.7019,29.60134 z', fill: '#8498b3' },
{ id: '#path4213', d: 'm 483.54424,53.789153 -6.08055,4.47005 0.82031,-7.26923 z', fill: '#151515' },
{ id: '#path4215', d: 'm 483.47793,53.678203 -6.72853,4.581 7.59552,-0.57697 z', fill: '#151515' },
{ id: '#path4217', d: 'm 483.32103,63.014453 -6.48234,-5.11239 7.59552,-0.3984 z', fill: '#151515' },
{ id: '#path4219', d: 'm 483.54424,62.880523 -6.08055,-4.62132 0.0955,7.14624 z', fill: '#151515' },
{ id: '#path4221', d: 'm 471.75853,62.612673 5.70516,-4.35347 0.45266,7.14624 z', fill: '#151515' },
{ id: '#path4223', d: 'm 471.80317,63.014453 5.66052,-4.75525 -7.67234,-0.44304 z', fill: '#151515' },
{ id: '#path4225', d: 'm 473.23174,52.300173 4.85695,6.22689 -8.2527,-0.66626 z', fill: '#151515' },
{ id: '#path4227', d: 'm 473.00853,52.344813 4.45516,5.91439 0.94373,-7.31804 z', fill: '#151515' },
{ id: '#path4229', d: 'm 420.66224,57.450953 18.66819,30.60775 -65.72348,-1.46085 z', fill: '#7f92b0' },
{ id: '#path4231', d: 'm 360.05309,144.07153 79.52988,-57.022977 -65.47094,-1.20831 z', fill: '#59908d' },
{ id: '#path4233', d: 'm 475.71556,123.36341 -37.90036,-36.188587 40.59508,6.99918 z', fill: '#78849b' },
{ id: '#path4235', d: 'm 359.29548,143.81899 80.16122,-57.149247 -18.87765,57.019677 z', fill: '#7e9c9d' },
{ id: '#path4237', d: 'm 475.71556,123.36341 -37.26902,-36.567397 45.26704,75.563287 z', fill: '#548481' },
{ id: '#path4387', d: 'm 419.39956,143.06139 19.67833,-56.391647 44.63569,75.689557 z', fill: '#668f91' },
{ id: '#path4389', d: 'm 419.39956,143.06139 77.61841,82.53692 -13.30439,-63.23901 z', fill: '#615770' },
{ id: '#path4391', d: 'm 419.39956,143.06139 77.53547,81.46549 -56.79288,-13.59616 z', fill: '#766983' },
{ id: '#path4399', d: 'm 419.39956,143.06139 -10.67882,45.39406 32.84998,22.47527 z', fill: '#8291ae' },
{ id: '#path4401', d: 'm 419.39956,142.3471 -10.67882,46.86596 -67.15002,-10.42519 z', fill: '#a7b9cf' },
{ id: '#path4403', d: 'm 419.39956,142.3471 -59.60739,0.75121 -18.22145,35.68956 z', fill: '#8291ae' },
{ id: '#path4405', d: 'm 309.04242,193.41853 50.74975,-50.32022 -15.72145,34.97527 z', fill: '#726d84' },
{ id: '#path4407', d: 'm 374.39956,232.3471 34.32118,-43.89165 -67.15002,-9.66758 z', fill: '#99abc3' },
{ id: '#path4409', d: 'm 375.47099,233.06139 -67.82168,-39.24879 33.92141,-15.02473 z', fill: '#bdd0df' },
{ id: '#path4514', d: 'm 373.68527,231.98996 35.03547,-43.53451 -1.43574,54.61813 z', fill: '#a7b9cf' },
{ id: '#path4516', d: 'm 450.11384,275.20425 -41.3931,-86.7488 -1.79288,54.26099 z', fill: '#8192ae' },
{ id: '#path4518', d: 'm 448.68527,275.20425 -39.96453,-86.7488 32.84997,21.76099 z', fill: '#a7b8cf' },
{ id: '#path4520', d: 'm 447.97098,274.84711 45.74976,0.0369 -52.15003,-64.66758 z', fill: '#847a93' },
{ id: '#path4522', d: 'm 496.89955,223.77568 -3.17881,52.17976 -52.15003,-65.73901 z', fill: '#615770' },
{ id: '#path4524', d: 'm 407.61385,243.41853 -34.6074,-13.17736 -5.72145,63.18956 z', fill: '#98a9c5' },
{ id: '#path4526', d: 'm 407.971,241.27567 -9.60741,57.53692 -32.15002,-5.739 z', fill: '#8192ae' },
{ id: '#path4528', d: 'm 407.61386,241.27567 -11.03598,57.53692 52.84998,-24.66757 z', fill: '#a7b9cf' },
{ id: '#path4548', d: 'm 398.13688,396.21439 -1.559,-97.4018 52.49284,-26.81043 z', fill: '#8a9ebc' },
{ id: '#path4550', d: 'm 397.6318,396.71947 70.37466,-73.62116 -19.65003,-49.66758 z', fill: '#847a93' },
{ id: '#path4490', d: 'm 493.68528,274.1328 -25.67882,48.96551 -20.36431,-50.38186 z', fill: '#766983' },
{ id: '#path4701', d: 'm 344.7567,275.56139 29.46912,-45.11101 -7.04542,63.27621 z', fill: '#dee1f0' },
{ id: '#path4488', d: 'm 344.7567,276.27568 28.96404,-45.32022 -83.57859,39.97527 z', fill: '#f2f3f8' },
{ id: '#path4703', d: 'm 268.32813,245.56139 105.39261,-14.60593 -83.93573,40.33241 z', fill: '#a7b9cf' },
{ id: '#path4705', d: 'm 268.68527,246.27568 105.74976,-14.60593 -65.00717,-38.95331 z', fill: '#dee1f0' },
{ id: '#path4707', d: 'm 268.68527,245.20425 -63.66594,56.80469 86.19425,-31.07821 z', fill: '#dee1f0' },
{ id: '#path4718', d: 'm 248.68527,314.48997 -42.40325,-12.94278 85.2887,-30.97361 z', fill: '#bdd0df' },
{ id: '#path4720', d: 'm 248.68527,314.48997 42.17833,8.60834 0.70712,-52.52473 z', fill: '#a7b9cf' },
{ id: '#path4722', d: 'm 346.54241,275.91854 -56.3931,47.17977 1.77855,-53.9533 z', fill: '#dee1f0' },
{ id: '#path4724', d: 'm 346.54241,275.5614 -56.3931,47.89405 40.70713,30.68956 z', fill: '#a8b9cd' },
{ id: '#path4726', d: 'm 345.82812,276.27569 21.10691,17.5369 -36.43573,61.40385 z', fill: '#bdd0df' },
{ id: '#path4728', d: 'm 366.18527,366.27569 1.46405,-74.9631 -37.15002,63.90385 z', fill: '#eff4f8' },
{ id: '#path4730', d: 'm 365.11384,365.91855 1.82119,-74.24882 31.77856,104.97528 z', fill: '#847a93' },
{ id: '#path4732', d: 'm 397.97098,297.70427 -31.03595,-6.39168 31.42142,104.97528 z', fill: '#a7b9cf' },
{ id: '#path4791', d: 'm 365.82813,365.20426 -9.60738,45.0369 42.49284,-13.59615 z', fill: '#8291ae' },
{ id: '#path4793', d: 'm 366.18527,364.13284 -9.96452,46.10832 -52.8643,2.47528 z', fill: '#99abc3' },
{ id: '#path4795', d: 'm 366.18527,365.91855 -34.25023,-12.82025 -29.29288,60.33243 z', fill: '#8093ab' },
{ id: '#path4806', d: 'm 258.68527,407.34712 73.96405,-54.60596 -30.00716,60.68957 z', fill: '#847a93' },
{ id: '#path4808', d: 'm 258.32813,408.77569 73.96405,-54.9631 -120.36431,11.40385 z', fill: '#8291ae' },
{ id: '#path4810', d: 'm 259.7567,407.70426 -44.96452,10.0369 -3.36939,-53.1344 z', fill: '#605770' },
{ id: '#path5485', d: 'm 289.39956,322.70426 42.17833,31.46547 -119.65002,12.11814 z', fill: '#dee1f0' },
{ id: '#path4812', d: 'm 289.39956,322.70426 -42.10739,-8.53453 -35.3643,52.11814 z', fill: '#bdd0df' },
{ id: '#path4492', d: 'm 152.61385,346.63283 95.39261,-32.82024 -35.72145,52.47528 z', fill: '#f2f3f8' },
{ id: '#path4814', d: 'm 152.61385,346.98997 96.46404,-33.17738 -42.50717,-13.59615 z', fill: '#dee1f0' },
{ id: '#path4816', d: 'm 152.61385,346.63283 -86.541036,74.80974 146.212196,-55.1547 z', fill: '#dde1f0' },
{ id: '#path4836', d: 'm 61.246555,437.24995 -2.882951,-13.08022 154.531086,-58.80535 z', fill: '#becfe1' },
{ id: '#path4838', d: 'm 45.470994,461.27569 167.892606,-96.03453 -157.532545,72.60527 z', fill: '#4b5c6c' },
{ id: '#path4840', d: 'm 55.828137,484.13284 131.106893,-69.24882 25.3933,-48.89201 z', fill: '#4a5c72' },
{ id: '#path4851', d: 'm 216.18527,416.98998 -32.10738,-0.32025 27.49283,-49.66757 z', fill: '#687a92' },
{ id: '#path4853', d: 'm 45.828137,460.5614 167.535463,-95.32024 -157.150021,120.33243 z', fill: '#687a92' },
{ id: '#path4855', d: 'm 380.47098,432.34711 -24.25023,-22.10595 42.1357,-14.31044 z', fill: '#847a92' },
{ id: '#path4895', d: 'm 374.75669,427.70425 34.85692,33.96549 -25.00717,-38.41759 z', fill: '#b68892' },
{ id: '#path4897', d: 'm 375.47098,427.34711 33.40668,33.53437 -20.34265,-5.12932 z', fill: '#a75c68' },
{ id: '#path4921', d: 'm 408.81153,460.8229 31.15922,-17.54602 -41.61431,2.47528 z', fill: '#b68892' },
{ id: '#path4923', d: 'm 408.25415,460.86623 26.7166,7.41065 -18.93574,-11.63186 z', fill: '#a75c68' },
{ id: '#path4925', d: 'm 384.93526,447.52567 -17.28594,11.4655 21.24283,-3.23901 z', fill: '#a75c68' },
{ id: '#path4927', d: 'm 326.18527,411.27568 -7.64309,34.5012 -16.25717,-32.70329 z', fill: '#a75c68' },
{ id: '#path4929', d: 'm 301.36384,441.81139 17.35692,3.96549 -16.07861,-32.88186 z', fill: '#b58892' },
{ id: '#path4931', d: 'm 357.61384,432.70425 -38.1788,5.39406 1.95711,-6.45329 z', fill: '#a75c68' },
{ id: '#path4933', d: 'm 346.0067,456.45425 -27.91094,-10.85594 1.51068,-8.41757 z', fill: '#a75c68' },
{ id: '#path4935', d: 'm 303.14955,441.98996 -1.39308,-9.78451 -22.68575,7.65385 z', fill: '#b58892' },
{ id: '#path4604', d: 'm 142.98758,37.012346 14.01242,-14.024692 -14.01242,0 z', fill: '#59908d' },
{ id: '#path5200', d: 'm 142.9,37.012346 14.1,-14.112346 0,14.2 z', fill: '#59908d' }],

[
{ id: '#path14437', d: 'm 518.19146,91.33282 -9.72168,-7.142449 -39.94487,4.695503 z', fill: '#040404' },
{ id: '#path14439', d: 'm 469.05399,88.753606 49.2036,2.513085 -49.95183,27.213119 z', fill: '#040404' },
{ id: '#path4158', d: 'm 469.80221,88.940659 -37.77691,6.441237 37.02869,24.033184 z', fill: '#484f61' },
{ id: '#path4160', d: 'm 469.05399,89.127712 -37.21575,6.815344 15.14327,-18.989419 z', fill: '#606873' },
{ id: '#path4166', d: 'm 432.76534,74.350371 -0.55298,21.405632 15.14326,-18.802366 z', fill: '#717e87' },
{ id: '#path4168', d: 'm 432.76534,74.163318 0.38229,21.031525 -32.18161,-9.075519 z', fill: '#82909a' },
{ id: '#path4174', d: 'm 396.74125,119.36641 38.08987,4.82193 -33.64596,-37.991531 z', fill: '#808e99' },
{ id: '#path4176', d: 'm 432.76535,95.113462 2.62693,29.823098 -34.61332,-39.191353 z', fill: '#606873' },
{ id: '#path4178', d: 'm 432.39124,94.926408 2.43988,29.636052 33.66171,-5.33443 z', fill: '#808e99' },
{ id: '#path4213', d: 'm 438.00289,95.394047 -5.50996,-4.501463 4.94878,-2.154502 z', fill: '#151515' },
{ id: '#path4215', d: 'm 438.00289,95.394047 -5.22938,-4.688516 -1.59812,5.04711 z', fill: '#151515' },
{ id: '#path4217', d: 'm 438.56405,95.206994 -5.04231,6.534766 -2.15931,-6.456758 z', fill: '#151515' },
{ id: '#path4219', d: 'm 438.00289,95.394047 -4.66821,6.347713 5.04231,0.46426 z', fill: '#151515' },
{ id: '#path4221', d: 'm 438.00289,95.394047 5.2457,5.880073 -5.43276,0.9319 z', fill: '#151515' },
{ id: '#path4223', d: 'm 437.62878,95.01994 5.33923,6.34771 2.33002,-5.427956 z', fill: '#151515' },
{ id: '#path4225', d: 'm 438.00289,95.394047 4.77807,-5.062623 2.33002,5.795324 z', fill: '#151515' },
{ id: '#path4227', d: 'm 437.81583,95.861685 4.96513,-5.530261 -5.52628,-1.873928 z', fill: '#151515' },
{ id: '#path4229', d: 'm 397.27032,120.16002 -26.19227,8.52542 30.10712,-42.488631 z', fill: '#606873' },
{ id: '#path4231', d: 'm 460.16748,156.03411 -24.80729,-32.00073 33.6617,-5.06989 z', fill: '#606873' },
{ id: '#path4233', d: 'm 460.43202,155.76957 -25.6009,-33.05886 -9.19305,27.99704 z', fill: '#808e99' },
{ id: '#path4235', d: 'm 395.88536,118.99914 40.0039,4.24064 -9.98665,27.46797 z', fill: '#90a1a9' },
{ id: '#path4237', d: 'm 396.41443,118.47006 -10.78691,37.83667 41.8623,-5.33444 z', fill: '#808e99' },
{ id: '#path4387', d: 'm 397.73711,118.47006 -12.10959,37.83667 -15.01283,-27.81997 z', fill: '#6f7782' },
{ id: '#path4389', d: 'm 362.02482,164.49924 24.92537,-8.19251 -16.07096,-27.81997 z', fill: '#5f6973' },
{ id: '#path4391', d: 'm 459.90294,154.97597 7.73059,33.07501 -41.99546,-38.40137 z', fill: '#5f6772' },
{ id: '#path4399', d: 'm 410.96388,169.78996 57.19872,18.52555 -42.25999,-38.40136 z', fill: '#808e99' },
{ id: '#path4401', d: 'm 411.22842,170.31903 -25.86543,-14.27684 41.8623,-6.92165 z', fill: '#616b77' },
{ id: '#path4403', d: 'm 410.69934,168.99636 56.93419,19.05462 -25.32973,21.64819 z', fill: '#606873' },
{ id: '#path4405', d: 'm 410.69934,168.73182 5.87883,54.50238 25.99017,-14.06411 z', fill: '#828d96' },
{ id: '#path4407', d: 'm 410.96388,168.46729 5.87882,54.76691 -35.6466,3.39526 z', fill: '#060606' },
{ id: '#path4409', d: 'm 411.22842,168.99636 -25.86544,-13.74778 -4.16688,71.38088 z', fill: '#7e8f99' },
{ id: '#path4514', d: 'm 355.67596,215.55461 30.2161,-61.09964 -4.43142,72.70356 z', fill: '#606873' },
{ id: '#path4516', d: 'm 356.20503,215.55461 29.68703,-61.09964 -44.90535,42.28198 z', fill: '#808e99' },
{ id: '#path4518', d: 'm 362.02482,164.23472 22.8091,-8.98615 -44.11175,42.01744 z', fill: '#485162' },
{ id: '#path4520', d: 'm 362.81842,163.70564 -43.32478,25.40347 22.81575,7.3633 z', fill: '#606873' },
{ id: '#path4522', d: 'm 472.33611,209.47029 -4.43805,-21.41931 -26.65239,21.64819 z', fill: '#808e99' },
{ id: '#path4524', d: 'm 472.33611,208.94121 -10.52237,26.99069 -20.039,-27.55541 z', fill: '#707e87' },
{ id: '#path4526', d: 'm 417.31273,222.69707 45.03008,13.23483 -20.039,-27.29087 z', fill: '#606873' },
{ id: '#path4528', d: 'm 416.51913,222.16799 46.08821,12.97031 -11.83839,22.70633 z', fill: '#8fa3aa' },
{ id: '#path4548', d: 'm 417.0482,222.16799 -10.52239,35.72036 44.77221,0.22082 z', fill: '#c0cfd6' },
{ id: '#path4550', d: 'm 417.31274,221.37439 -9.99333,36.51396 -36.17565,-6.39257 z', fill: '#a4b7ba' },
{ id: '#path4490', d: 'm 417.57727,221.63893 -36.97595,4.7697 -9.45756,25.61623 z', fill: '#342e2f' },
{ id: '#path4701', d: 'm 311.49853,268.19718 69.36732,-41.25948 -9.72209,25.08716 z', fill: '#070707' },
{ id: '#path4488', d: 'm 312.82122,267.13904 69.10277,-40.73041 -77.70772,20.32553 z', fill: '#f3f7f7' },
{ id: '#path4703', d: 'm 355.94051,214.76101 26.24802,12.17669 -77.70772,20.59006 z', fill: '#484f61' },
{ id: '#path4705', d: 'm 356.46958,215.29008 -14.22592,-18.24489 -38.82099,51.01164 z', fill: '#606873' },
{ id: '#path4707', d: 'm 319.17006,188.83652 23.86721,7.41506 -39.35006,51.54072 z', fill: '#484f61' },
{ id: '#path4718', d: 'm 319.43461,188.57199 -27.18816,48.15352 11.7053,11.33132 z', fill: '#606773' },
{ id: '#path4720', d: 'm 319.69915,188.57199 -27.18816,48.94712 -26.1233,-6.39255 z', fill: '#808e99' },
{ id: '#path4722', d: 'm 431.59765,284.86291 -24.8073,-27.76816 43.9786,-0.0437 z', fill: '#a4b7bd' },
{ id: '#path4724', d: 'm 432.12673,283.54024 -25.60092,-26.44549 -5.22501,51.54076 z', fill: '#c0cfd6' },
{ id: '#path4726', d: 'm 371.01902,251.79597 36.03587,5.03424 -5.48955,52.33437 z', fill: '#cfdce4' },
{ id: '#path4728', d: 'm 371.5481,251.26689 -4.96714,34.39769 35.77798,22.7064 z', fill: '#c0cfd6' },
{ id: '#path4730', d: 'm 372.07717,251.00236 -4.43808,35.9849 -39.87916,-1.89541 z', fill: '#a7b6bd' },
{ id: '#path4732', d: 'm 372.60625,250.73782 -60.25509,17.20289 15.93785,17.68022 z', fill: '#352f2f' },
{ id: '#path4791', d: 'm 369.96089,322.69148 -3.37993,-37.0269 36.04252,21.9128 z', fill: '#a4b7bd' },
{ id: '#path4793', d: 'm 369.96089,322.69148 -2.3218,-36.76237 -38.82102,-1.10179 z', fill: '#c0cfd6' },
{ id: '#path4795', d: 'm 371.01902,322.42694 -46.49921,3.71158 4.03373,-41.3112 z', fill: '#8fa2a9' },
{ id: '#path4806', d: 'm 295.6264,313.43273 29.95155,12.70579 3.76919,-41.84028 z', fill: '#a4b6bd' },
{ id: '#path4808', d: 'm 296.15548,314.22633 -16.34218,-16.92219 49.53384,-13.0059 z', fill: '#8fa0a7' },
{ id: '#path4810', d: 'm 250.65536,304.43852 -7.34795,-10.3088 86.03973,-9.83148 z', fill: '#060606' },
{ id: '#path5485', d: 'm 226.58264,280.36579 16.72477,14.293 86.03973,-10.36055 z', fill: '#322c2e' },
{ id: '#path4812', d: 'm 225.87981,281.04981 87.26497,-13.10911 16.4669,16.88662 z', fill: '#060702' },
{ id: '#path4492', d: 'm 227.11171,280.89486 84.64621,-12.36091 -7.54166,-21.27067 z', fill: '#cfdce3' },
{ id: '#path4814', d: 'm 226.84717,281.15939 65.92838,-44.4339 12.49885,10.53779 z', fill: '#4a5162' },
{ id: '#path4816', d: 'm 226.84717,281.15939 67.05071,-44.05978 -28.03928,-5.973 z', fill: '#606873' },
{ id: '#path4836', d: 'm 227.11171,281.15939 -14.97412,-4.75357 55.30823,-45.80829 z', fill: '#808e99' },
{ id: '#path4838', d: 'm 161.37743,289.35409 52.45696,-13.6323 -6.05908,-12.95081 z', fill: '#484f5f' },
{ id: '#path4840', d: 'm 98.417973,322.68557 4.853707,10.21081 111.23761,-57.59273 z', fill: '#606875' },
{ id: '#path4851', d: 'm 227.48583,280.41116 -119.72484,61.08974 105.81302,-65.63609 z', fill: '#4e5465' },
{ id: '#path4853', d: 'm 266.5482,231.29323 -53.47533,45.11259 -5.29756,-13.63484 z', fill: '#5f687d' },
{ id: '#path4855', d: 'm 163.49372,288.29595 51.39881,-13.10324 -116.63492,48.42144 z', fill: '#808e99' },
{ id: '#path4895', d: 'm 109.26715,341.39105 -6.74369,-9.617 111.98583,-56.4704 z', fill: '#555c67' },
{ id: '#path4897', d: 'm 355.74471,323.81381 38.14626,23.95298 -16.70695,-29.34024 z', fill: '#060606' },
{ id: '#path4921', d: 'm 441.41583,348.50505 -47.52486,-0.73826 -9.97299,-14.74996 z', fill: '#060606' },
{ id: '#path4923', d: 'm 370.7091,356.36136 23.18187,-8.59457 -13.33997,-10.63476 z', fill: '#060606' },
{ id: '#path4925', d: 'm 324.3195,326.80668 14.57734,26.57175 5.73963,-29.34024 z', fill: '#060606' },
{ id: '#path4927', d: 'm 325.06773,326.43258 15.32555,28.06819 -15.95874,-10.63476 z', fill: '#060606' },
{ id: '#path4929', d: 'm 394.27802,392.65 -52.3883,-49.74664 -17.45518,0.96265 z', fill: '#060606' },
{ id: '#path4931', d: 'm 393.15569,392.65 -51.26597,-49.74664 64.10074,43.98526 z', fill: '#060606' },
{ id: '#path4933', d: 'm 392.03336,390.77945 50.86597,3.00283 -48.88038,-13.25352 z', fill: '#060606' },
{ id: '#path4935', d: 'm 396.14856,391.15357 -29.5676,12.35556 17.33702,-18.86516 z', fill: '#060606' },
{ id: '#path4604', d: 'm 186.99999,23.000015 0,14.099975 -14.09998,-14.099975 z', fill: '#606873' },
{ id: '#path5200', d: 'm 186.99999,37.012412 -14.0124,0 0,-14.012397 z', fill: '#606873' }],

[
{ id: '#path14437', d: 'm 495.67653,93.719633 7.65012,-19.67631 31.441,11.23795 z', fill: '#413b3d' },
{ id: '#path14439', d: 'm 495.62423,93.867573 7.70242,-19.82425 -9.59645,-19.31917 z', fill: '#060606' },
{ id: '#path4158', d: 'm 496.00304,93.993843 -2.26694,-39.3102 -22.76178,20.4497 z', fill: '#3e3c3d' },
{ id: '#path4160', d: 'm 452.43161,51.136693 41.43076,3.79949 -22.13044,20.70223 z', fill: '#050507' },
{ id: '#path4166', d: 'm 451.92654,51.389233 42.44091,3.54695 -29.95913,-18.18864 z', fill: '#4d4b4c' },
{ id: '#path4168', d: 'm 452.68415,50.884153 -33.69934,-13.12056 46.18112,-1.26859 z', fill: '#3c3a3b' },
{ id: '#path4174', d: 'm 452.43161,51.136693 -33.57306,14.15356 52.87338,10.34816 z', fill: '#c0c0b4' },
{ id: '#path4176', d: 'm 484.35602,121.61278 -66.02049,-56.827607 53.3964,10.34817 z', fill: '#a3a494' },
{ id: '#path4178', d: 'm 483.99888,119.82707 12.13633,-25.494927 -25.16089,-19.1988 z', fill: '#b2b0b7' },
{ id: '#path4213', d: 'm 464.88829,67.565263 6.26487,3.42068 -6.62908,4.43955 z', fill: '#151515' },
{ id: '#path4215', d: 'm 471.95935,76.025293 -0.80619,-5.03935 -7.00789,4.18701 z', fill: '#151515' },
{ id: '#path4217', d: 'm 471.95935,76.025293 -1.43754,4.93591 -7.13415,-6.4196 z', fill: '#151515' },
{ id: '#path4219', d: 'm 465.6459,82.970083 4.74964,-2.26142 -6.25027,-5.53571 z', fill: '#151515' },
{ id: '#path4221', d: 'm 465.6459,82.970083 -5.35188,-1.75635 4.4826,-6.67213 z', fill: '#151515' },
{ id: '#path4223', d: 'm 456.80707,76.530363 3.73949,4.80964 4.23006,-6.7984 z', fill: '#151515' },
{ id: '#path4225', d: 'm 456.80707,76.530363 2.22426,-6.0495 6.75544,4.94463 z', fill: '#151515' },
{ id: '#path4227', d: 'm 464.88829,67.565253 -5.85696,2.91561 5.74529,5.0709 z', fill: '#151515' },
{ id: '#path4229', d: 'm 452.68415,50.884153 -32.60252,-12.84636 -1.65809,28.18301 z', fill: '#060608' },
{ id: '#path4231', d: 'm 374.82701,64.812723 45.7993,-27.80675 -0.26912,29.68029 z', fill: '#3e3c3d' },
{ id: '#path4233', d: 'm 374.82701,64.812723 75.7993,64.336107 -31.53181,-63.725257 z', fill: '#060606' },
{ id: '#path4235', d: 'm 484.82701,120.88416 -34.2007,8.26467 -32.7945,-64.735407 z', fill: '#3e3c3d' },
{ id: '#path4237', d: 'm 484.82701,120.88416 -35.46339,7.50706 43.30231,38.10379 z', fill: '#060606' },
{ id: '#path4387', d: 'm 374.82701,64.812723 75.7993,64.336107 -93.65619,-17.25823 z', fill: '#ebc26b' },
{ id: '#path4389', d: 'm 388.46407,148.65539 62.16224,-19.50656 -93.65619,-17.25823 z', fill: '#f2d392' },
{ id: '#path4391', d: 'm 391.24199,149.413 -74.4609,-1.07127 40.18903,-36.45113 z', fill: '#cbcbcb' },
{ id: '#path4399', d: 'm 442.85003,197.52194 40.81199,24.66261 9.00391,-55.68954 z', fill: '#dda95d' },
{ id: '#path4401', d: 'm 444.11272,198.02702 4.37073,-71.02104 44.18248,39.48903 z', fill: '#eec16e' },
{ id: '#path4403', d: 'm 444.11272,198.02702 4.37073,-71.02104 -51.40925,60.9176 z', fill: '#e6b767' },
{ id: '#path4405', d: 'm 389.827,148.74131 58.65645,-21.73533 -51.40925,60.9176 z', fill: '#ecc171' },
{ id: '#path4407', d: 'm 389.827,148.74131 58.65645,-21.73533 -92.96036,-15.51097 z', fill: '#f2d392' },
{ id: '#path4409', d: 'm 389.827,148.74131 -72.05784,-1.73533 81.2387,42.85125 z', fill: '#bfbfbf' },
{ id: '#path4514', d: 'm 295.88281,209.35046 21.88635,-62.34448 -70.78926,73.6609 z', fill: '#b2b1b7' },
{ id: '#path4516', d: 'm 295.88281,209.35046 21.88635,-62.34448 34.26661,56.48831 z', fill: '#bfbfbf' },
{ id: '#path4518', d: 'm 397.90822,188.13726 -80.13906,-41.13128 34.26661,56.48831 z', fill: '#b2b1b7' },
{ id: '#path4520', d: 'm 397.90822,188.13726 -28.74384,48.18057 -17.12861,-32.82354 z', fill: '#6c677a' },
{ id: '#path4522', d: 'm 398.4133,187.12711 -30.67749,49.905 76.22385,-39.59873 z', fill: '#ddaa5e' },
{ id: '#path4524', d: 'm 413.06051,230.56367 -41.75327,4.32559 72.90495,-37.70842 z', fill: '#d19858' },
{ id: '#path4526', d: 'm 413.06051,230.56367 70.87874,-8.30132 -40.48467,-25.33405 z', fill: '#dea44a' },
{ id: '#path4528', d: 'm 411.81051,230.3851 72.12874,-8.12275 -51.59635,22.14312 z', fill: '#e1b156' },
{ id: '#path4548', d: 'm 443.36509,267.93931 40.57416,-45.67696 -51.59635,22.14312 z', fill: '#efc472' },
{ id: '#path4550', d: 'm 443.36509,267.93931 -66.32869,-1.94453 55.3065,-21.58931 z', fill: '#deaa5e' },
{ id: '#path4490', d: 'm 195.48234,305.86569 -24.85604,5.426 54.92503,-53.48195 z', fill: '#a4a1a4' },
{ id: '#path4701', d: 'm 223.33949,260.50855 -52.71319,50.78314 76.3536,-90.62481 z', fill: '#cccbcc' },
{ id: '#path4488', d: 'm 194.45424,306.13617 69.74348,-39.84448 -41.14639,-5.62481 z', fill: '#c3c3c6' },
{ id: '#path4703', d: 'm 221.95424,261.49332 42.24348,4.79837 -17.21782,-45.62481 z', fill: '#b2b1b7' },
{ id: '#path4705', d: 'm 295.88281,208.81474 -33.20032,57.72949 -15.70259,-45.87735 z', fill: '#cbcbcb' },
{ id: '#path4707', d: 'm 295.88281,208.63617 -33.76668,58.97948 49.86377,-34.80592 z', fill: '#adaea3' },
{ id: '#path4718', d: 'm 295.52567,208.63617 58.3149,-5.20163 -43.28924,30.80376 z', fill: '#a3a590' },
{ id: '#path4720', d: 'm 369.45424,234.35045 -16.6851,-30.20162 -44.00353,30.44661 z', fill: '#8a8893' },
{ id: '#path4722', d: 'm 369.45424,234.35045 -107.57796,33.01267 48.67505,-34.37482 z', fill: '#95939d' },
{ id: '#path4724', d: 'm 369.45424,234.35045 -107.9351,32.8341 47.42504,0.62519 z', fill: '#a1a0a4' },
{ id: '#path4726', d: 'm 369.45424,234.35045 -25.97082,33.72695 -35.96781,-0.62479 z', fill: '#ddba65' },
{ id: '#path4728', d: 'm 369.45424,234.35045 -25.61367,33.19124 35.46075,0.62521 z', fill: '#dbaa60' },
{ id: '#path4730', d: 'm 369.27567,234.17188 44.29441,-3.59448 -35.8759,35.0895 z', fill: '#deba66' },
{ id: '#path4732', d: 'm 433.02567,244.35045 -20.97082,-13.77305 -34.36067,35.0895 z', fill: '#eec16e' },
{ id: '#path4791', d: 'm 38.508233,405.87079 132.118067,-94.5791 -132.242894,85.64681 z', fill: '#a8a1b4' },
{ id: '#path4793', d: 'm 38.508233,405.87079 132.118067,-94.5791 25.59344,-6.27707 z', fill: '#b1b0b5' },
{ id: '#path4795', d: 'm 38.508233,405.87079 107.874407,-57.20345 50.84725,-44.66287 z', fill: '#8e8d93' },
{ id: '#path4806', d: 'm 225.38644,305.36061 -79.0038,43.30673 49.58456,-43.65272 z', fill: '#746f81' },
{ id: '#path4808', d: 'm 225.38644,305.36061 37.16374,-38.51563 -68.09821,38.16964 z', fill: '#bbbcae' },
{ id: '#path4810', d: 'm 225.38644,305.36061 37.16374,-38.51563 -6.22637,32.10873 z', fill: '#8a898f' },
{ id: '#path5485', d: 'm 277.47927,304.1001 -15.28623,-37.79083 -6.62684,32.64444 z', fill: '#999687' },
{ id: '#path4812', d: 'm 305.69356,311.42153 -43.50052,-45.11226 14.9803,37.64444 z', fill: '#a7a598' },
{ id: '#path4492', d: 'm 305.69356,311.42153 -2.2322,-24.37349 -42.03294,-21.22015 z', fill: '#cab653' },
{ id: '#path4814', d: 'm 305.69356,311.42153 -4.75758,-26.3938 51.57949,30.05779 z', fill: '#b0a25f' },
{ id: '#path4816', d: 'm 310.87957,264.9672 -48.32939,1.87778 40.55447,22.03784 z', fill: '#d19858' },
{ id: '#path4836', d: 'm 309.97402,265.2937 40.9645,50.0386 -49.63228,-27.59487 z', fill: '#ddba63' },
{ id: '#path4838', d: 'm 310.15259,266.05132 40.78593,49.28098 -6.44826,-48.37697 z', fill: '#e1a95e' },
{ id: '#path4840', d: 'm 379.73056,266.02067 -28.79204,49.31163 -6.98397,-48.1984 z', fill: '#e5b767' },
{ id: '#path4851', d: 'm 379.73056,265.66353 -28.79204,49.66877 27.86629,-8.29737 z', fill: '#aba067' },
{ id: '#path4853', d: 'm 378.65914,266.02067 27.83777,31.12889 -27.6921,9.88537 z', fill: '#cbb96e' },
{ id: '#path4855', d: 'm 377.23056,265.30639 29.26635,31.84317 37.67195,-29.7198 z', fill: '#edc269' },
{ id: '#path4895', d: 'm 365.83262,315.17767 -14.8941,0.15463 56.15056,-18.3989 z', fill: '#8a8894' },
{ id: '#path4897', d: 'm 365.83262,314.82053 -15.90425,-1.00346 49.91325,60.04998 z', fill: '#8a8894' },
{ id: '#path4921', d: 'm 365.83262,315.17767 39.21304,48.01177 -5.20404,10.67761 z', fill: '#b2b1b9' },
{ id: '#path4923', d: 'm 452.26119,375.17767 -48.28696,-12.88109 -4.13261,11.57047 z', fill: '#6d6776' },
{ id: '#path4925', d: 'm 373.68976,378.7491 18.32018,-13.95251 7.83168,9.07046 z', fill: '#6d6776' },
{ id: '#path4927', d: 'm 309.40405,317.32053 42.03955,-2.99838 -42.49484,-2.59796 z', fill: '#8a8894' },
{ id: '#path4929', d: 'm 309.22548,316.60624 15.17987,-0.78151 1.15055,50.00664 z', fill: '#8a8894' },
{ id: '#path4931', d: 'm 309.40405,317.32053 3.32019,58.54749 12.83166,-10.03669 z', fill: '#b2b1b7' },
{ id: '#path4933', d: 'm 367.97548,376.60624 -55.25124,-0.73822 12.83166,-10.03669 z', fill: '#6f6679' },
{ id: '#path4935', d: 'm 289.22548,379.9991 23.49876,-4.13108 -0.5612,-12.00098 z', fill: '#6f6679' },
{ id: '#path4604', d: 'm 52.987578,37.012422 0,-14.012422 14.012422,14.012422 z', fill: '#eec16e' },
{ id: '#path5200', d: 'm 67,23 0,14.1 -14.1,-14.1 z', fill: '#eec16e' }]];



var ts = [];
var curIndex = 0;
var timeId = null;
var slideTimeout = 7000;

var birdTexts = [
"The <b>great tit</b> (<i>Parus major</i>) is a passerine bird in the tit family Paridae.",
"The <b>Eurasian bullfinch</b> (<i>Pyrrhula pyrrhula</i>) is a small passerine bird in the finch family Fringillidae.",
"The <b>dunnock</b> (<i>Prunella modularis</i>) is a small passerine, or perching bird in the Prunellidae family.",
"The <b>rock dove</b> or <b>rock pigeon</b> (<i>Columba livia</i>) is a member of the birdfamily Columbidae.",
"The <b>northern mockingbird</b> (<i>Mimus polyglottos</i>) a bird in the family Mimidae."];


var birdTitles = ["Great tit", "Bullfinch", "Dunnock", "Dove", "Mockingbird"];

function showText(index) {
  var slashText = birdTexts[index].replace(/[a-zA-Z0-9]/g, "/");
  var element = document.querySelector(".bird-text__body");
  element.innerHTML = birdTexts[index];
  document.querySelector(".bird-text__title").textContent = birdTitles[index];
}

function show(index, withDelay) {
  ts[index].length = 0;
  birds[(index + 4) % 5 + 1].forEach(function (path, i) {
    var delay = withDelay ? 10 * i : 0;
    ts[index].push(
    new anime({
      targets: path.id,
      d: {
        value: path.d,
        duration: 1000,
        easing: "easeInOutQuad" },

      fill: {
        value: path.fill,
        duration: 1000,
        easing: "easeInOutQuad" },

      delay: delay }));


  });
  showText(index);
}

function play(index) {
  ts[index].forEach(function (a) {
    a.play();
  });
}

var svg = document.querySelector(".birds");
var count = birds[0].length;

birds[0].forEach(function (path, index) {
  var newPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
  svg.append(newPath);
  newPath.setAttribute("id", path.id);
  newPath.setAttribute("d", path.d);
  newPath.setAttribute("style", "fill:" + path.fill);
});

ts.push([]);
ts.push([]);
ts.push([]);
ts.push([]);
ts.push([]);

setTimeout(() => {
  document.querySelector(".bird-text__body").innerHTML = birdTexts[0];
  document.querySelector(".bird-text__title").textContent = birdTitles[0];
}, 200);

function prev() {
  curIndex--;
  if (curIndex < 0) curIndex = 4;
}

function next() {
  curIndex++;
  curIndex %= 5;
}

function resetAnimations(index) {
  ts.forEach(function (t) {
    if (t)
    t.forEach(function (a) {
      a.pause();
    });
  });
  show(index, false);
  play(index);
  curIndex = index;
  clearTimeout(timeId);
  timeId = setTimeout(slideshow, slideTimeout);
}

function restartAnimation(index) {
  resetAnimations(index);
}

function restartAnimationPrev() {
  prev();
  resetAnimations(curIndex);
}

function restartAnimationNext() {
  next();
  resetAnimations(curIndex);
}

document.addEventListener(
"keydown",
function (event) {
  if (event.keyCode >= 49 && event.keyCode <= 53) {
    restartAnimation(event.keyCode - 49);
  } else if (event.keyCode === 37) {
    // left
    restartAnimationPrev();
  } else if (event.keyCode === 39) {
    // right
    restartAnimationNext();
  }
},
false);


function advance() {
  next();
  show(curIndex, true);
  play(curIndex);
}

function goTo(index) {
  restartAnimation(index);
}

function slideshow() {
  advance();
  timeId = setTimeout(slideshow, slideTimeout);
}
timeId = setTimeout(slideshow, slideTimeout);
    </script>
</body>
</html>

2. By Manu K

Made by Manu K. Cool JavaScript Slideshow Animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
.pagination {
  position: absolute !important;
  width: 100%;
  text-align: center;
  right: 0;
  padding: 0 !important;
  bottom: 30px;
  z-index: 999;
}

.pagination__item {
  cursor: pointer;
  display: inline-block;
  white-space: nowrap;
  font-size: 0;
  width: 10px;
  height: 10px;
  border: 1px solid #fff;
  margin: 0 5px;
  transition: 0.2s ease-in-out;
}
.pagination__item.is-current, .pagination__item:hover {
  background-color: #fff;
}

.container {
  position: relative;
  margin: 0 auto;
}

@media (max-width: 699px) {
  .container {
    padding-right: 40px;
    padding-left: 40px;
  }
}
@media (min-width: 700px) and (max-width: 1599px) {
  .container {
    padding-right: 7.5rem;
    padding-left: 7.5rem;
    max-width: 140rem;
  }
}
@media (min-width: 1600px) {
  .container {
    padding-right: 9.5625rem;
    padding-left: 9.5625rem;
    max-width: 144.125rem;
  }
}
.background-absolute {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-position: center;
  background-size: cover;
}

.slideshow {
  position: relative;
  color: #fff;
  overflow: hidden;
  min-height: 600px;
  height: 100vh;
}
.slideshow h3,
.slideshow h1,
.slideshow h2 {
  /*font-family: 'Montserrat', sans-serif;*/
  font-family: "Lato", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5em;
  line-height: 2em;
}
.slideshow h1 {
  font-size: 44px;
  font-weight: 800;
}

.slideshow__slide {
  visibility: hidden;
  transition: visibility 0s 1.7s;
}
.slideshow__slide.is-current {
  visibility: visible;
  transition-delay: 0s;
}

@media (max-width: 699px) {
  .slideshow .slideshow__slide {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}
@media (min-width: 700px) {
  .slideshow .slideshow__slide {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}
.slideshow__slide-background-load-wrap {
  transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translate3d(0, 100%, 0);
  overflow: hidden;
}

.is-animated .slideshow__slide-background-load-wrap {
  transform: translate3d(0, 0, 0);
  transition-delay: 0s;
}

.slideshow__slide.is-prev .slideshow__slide-background-parallax, .slideshow__slide.is-next .slideshow__slide-background-parallax, .slideshow__slide.is-prev-section .slideshow__slide-background-parallax, .slideshow__slide.is-next-section .slideshow__slide-background-parallax {
  transform: none !important;
}

.slideshow__slide-background-load {
  transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translate3d(0, -50%, 0);
}

.is-animated .slideshow__slide-background-load {
  transform: translate3d(0, 0, 0);
}

.slideshow__slide-background-wrap {
  transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.5s;
  transform: translate3d(0, 0, 0);
}

.slideshow__slide.is-prev .slideshow__slide-background-wrap {
  transform: translate3d(0, -100%, 0);
}
.slideshow__slide.is-next .slideshow__slide-background-wrap {
  transform: translate3d(0, 100%, 0);
}
.slideshow__slide.is-prev-section .slideshow__slide-background-wrap {
  transform: translate3d(0, -100%, 0);
  transition: none;
}
.slideshow__slide.is-next-section .slideshow__slide-background-wrap {
  transform: translate3d(0, 100%, 0);
  transition: none;
}

.slideshow__slide-background {
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) 1.5s;
  transform: scale(1);
  overflow: hidden;
}

.slideshow__slide.is-prev .slideshow__slide-background, .slideshow__slide.is-next .slideshow__slide-background {
  transform: scale(0.5);
  transition-delay: 0s;
}
.slideshow__slide.is-prev-section .slideshow__slide-background, .slideshow__slide.is-next-section .slideshow__slide-background {
  transform: scale(0.5);
  transition-delay: 0s;
  transition: none;
}

.slideshow__slide-image-wrap {
  transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.6s;
  transform: translate3d(0, 0, 0);
}

.slideshow__slide.is-prev .slideshow__slide-image-wrap {
  transform: translate3d(0, 50%, 0);
}

.slideshow__slide-image {
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) 1.5s;
  transform: scale(1);
}

.slideshow__slide.is-prev .slideshow__slide-image, .slideshow__slide.is-next .slideshow__slide-image {
  transform: scale(1.25);
  transition-delay: 0s;
}
.slideshow__slide.is-prev-section .slideshow__slide-image, .slideshow__slide.is-next-section .slideshow__slide-image {
  transform: scale(1.25);
  transition-delay: 0s;
  transition: none;
}

.slideshow__slide-image::before, .slideshow__slide-image::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.35;
}
.slideshow__slide-image::before {
  background-color: rgba(255, 255, 255, 0.26);
}
.slideshow__slide-image::after {
  background: linear-gradient(to top, transparent 0%, #fff 20%);
}

.slideshow__slide.is-prev .slideshow_container, .slideshow__slide.is-next .slideshow_container, .slideshow__slide.is-prev-section .slideshow_container, .slideshow__slide.is-next-section .slideshow_container {
  transform: none !important;
}

.slideshow__slide-caption-text {
  position: relative;
  height: 100%;
  padding-top: 10%;
  transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.4s;
  transform: translate3d(0, 0, 0);
}

.slideshow__slide.is-prev .slideshow__slide-caption-text {
  transform: translate3d(-100%, -50%, 0);
}
.slideshow__slide.is-next .slideshow__slide-caption-text {
  transform: translate3d(-100%, 10%, 0);
}
.slideshow__slide.is-prev-section .slideshow__slide-caption-text {
  transform: translate3d(-100%, -50%, 0);
  transition: none;
}
.slideshow__slide.is-next-section .slideshow__slide-caption-text {
  transform: translate3d(-100%, 10%, 0);
  transition: none;
}

.slideshow__slide-caption {
  position: relative;
  height: 100%;
  transform: translate3d(-100%, 10%, 0);
  transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
}

.is-animated .slideshow__slide-caption {
  transform: translate3d(0, 0, 0);
}

.slideshow__slide-caption-title {
  line-height: 1;
}
.slideshow__slide-caption-title.-full {
  width: 100%;
}

@media (max-height: 500px) {
  .slideshow__slide-caption-title {
    margin-bottom: 0 !important;
  }
}
@media (max-width: 699px) {
  .slideshow__slide-caption-title {
    font-size: 40px;
    margin-bottom: 150px;
  }

  .slideshow.-full .slideshow__slide-caption-title {
    margin-bottom: 30px;
  }
}
@media (min-width: 700px) {
  .slideshow__slide-caption-title {
    font-size: 5.625rem;
    margin-bottom: 1.25rem;
  }
}
@media (min-width: 700px) and (max-width: 749px) {
  .slideshow__slide-caption-title {
    font-size: 4.375rem;
  }
}
@media (min-width: 1600px) {
  .slideshow__slide-caption-title {
    font-size: 6.25rem;
  }
}
.slideshow__slide-caption-subtitle {
  display: inline-block;
  padding: 1.875rem 0;
}
.slideshow__slide-caption-subtitle.-load {
  transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.4s;
  transform: translate3d(0, 3.75rem, 0);
}

.is-animated .slideshow__slide-caption-subtitle.-load {
  transform: translate3d(0, 0, 0);
}

body[data-route-option=prev-section] .slideshow__slide-caption-subtitle.-load, body[data-route-option=next-section] .slideshow__slide-caption-subtitle.-load {
  transform: translate3d(0, 0, 0);
}

.slideshow__slide-caption-subtitle-label {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateZ(0);
  display: inline-block;
}

.o-hsub.-link:hover .slideshow__slide-caption-subtitle-label,
.o-hsub-wrap:hover .slideshow__slide-caption-subtitle-label {
  transform: translateX(20px);
}

/* OLD */
.c-header-home_heading {
  line-height: 1;
}
.c-header-home_heading.-full {
  width: 100%;
}

@media (max-height: 500px) {
  .c-header-home_heading {
    margin-bottom: 0 !important;
  }
}
@media (max-width: 699px) {
  .c-header-home_heading {
    font-size: 40px;
    margin-bottom: 150px;
  }

  .c-header-home.-full .c-header-home_heading {
    margin-bottom: 30px;
  }
}
@media (min-width: 700px) {
  .c-header-home_heading {
    font-size: 5.625rem;
    margin-bottom: 1.25rem;
  }
}
@media (min-width: 700px) and (max-width: 749px) {
  .c-header-home_heading {
    font-size: 4.375rem;
  }
}
@media (min-width: 1600px) {
  .c-header-home_heading {
    font-size: 6.25rem;
  }
}
.c-header-home_subheading {
  display: inline-block;
  padding: 1.875rem 0;
}
.c-header-home_subheading.-load {
  transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.4s;
  transform: translate3d(0, 3.75rem, 0);
}

.is-loaded .c-header-home_subheading.-load {
  transform: translate3d(0, 0, 0);
}

body[data-route-option=prev-section] .c-header-home_subheading.-load, body[data-route-option=next-section] .c-header-home_subheading.-load {
  transform: translate3d(0, 0, 0);
}

.c-header-home_footer {
  z-index: 3;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
}

.c-header-home_controls,
.c-header-home_buttons {
  margin-left: 0;
  letter-spacing: normal;
  font-size: 0;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translate3d(0, 100%, 0);
}

@media (max-width: 699px) {
  .c-header-home_controls,
.c-header-home_buttons {
    padding-bottom: 40px;
  }
}
@media (min-width: 700px) {
  .c-header-home_controls,
.c-header-home_buttons {
    padding-bottom: 5.625rem;
  }
}
@media (min-width: 700px) and (max-width: 749px) {
  .c-header-home_controls,
.c-header-home_buttons {
    padding-bottom: 3.75rem;
  }
}
.is-loaded .c-header-home_controls,
.is-loaded .c-header-home_buttons {
  transform: translate3d(0, 0, 0);
}

body[data-route-option=prev-section] .c-header-home_controls,
body[data-route-option=prev-section] .c-header-home_buttons {
  transform: translate3d(0, 0, 0);
}
body[data-route-option=next-section] .c-header-home_controls,
body[data-route-option=next-section] .c-header-home_buttons {
  transform: translate3d(0, 0, 0);
}

.c-header-home_controls {
  transition-delay: 0.65s;
}

@media (min-width: 700px) {
  .c-header-home_controls {
    float: left;
  }
}
.c-header-home_buttons {
  transition-delay: 0.75s;
}

@media (max-width: 699px) {
  .c-header-home_buttons {
    margin-left: -20px;
    margin-right: -20px;
  }
}
@media (min-width: 1000px) {
  .c-header-home_buttons {
    float: right;
  }
}
@media (max-width: 699px) {
  .c-header-home_button {
    width: 50% !important;
  }
}
@media (min-width: 700px) {
  .c-header-home_button {
    width: 15.625rem;
  }
}
button,
.c-header-filters_button,
.o-button {
  display: inline-block;
  overflow: visible;
  margin: 0;
  padding: 0;
  outline: 0;
  border: 0;
  background: none;
  color: inherit;
  vertical-align: middle;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  font: inherit;
  line-height: normal;
  cursor: pointer;
  user-select: none;
}

button:hover,
.c-header-filters_button:hover,
.o-button:hover {
  text-decoration: none;
}

@media (min-width: 1200px) {
  body {
    height: 100%;
  }
}
@media (min-width: 1200px) {
  .o-scroll {
    height: 100%;
  }
}
::-moz-selection {
  background: #0084c0;
  color: #fff;
}

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

a,
.o-link {
  color: #1a0dab;
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

a:hover,
.o-link:hover {
  color: #13097c;
}

a.-normal,
.o-link.-normal {
  color: currentColor;
  text-decoration: none;
}

a.-normal:hover,
.o-link.-normal:hover {
  text-decoration: underline;
}

a.-blue:hover,
.o-link.-blue:hover {
  text-decoration: none;
  color: #0084c0;
}

a.-hover,
.o-link.-hover {
  position: relative;
  text-decoration: none;
  color: #fff;
}

a.-hover::after,
.o-link.-hover::after {
  content: "";
  position: absolute;
  bottom: -1px;
  right: 0;
  left: 0;
  border-bottom: 1px solid;
  transform: scaleX(0);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center left;
}

a.-hover:hover::after,
.o-link.-hover:hover::after {
  transform: scaleX(1);
}

p {
  margin: 0;
}

.o-wrap {
  overflow: hidden;
}

.o-page.-anim {
  transform: translate3d(0, 9.375rem, 0);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.is-loaded .o-page.-anim {
  transform: translate3d(0, 0, 0);
}

.o-barba,
.o-barba_container {
  height: 100%;
}

strong {
  font-weight: 700;
}

.js-parallax {
  transform: translateZ(0);
  will-change: transform;
}

.scroll-content {
  overflow: hidden;
}

.o-blockquote.-nomargin {
  margin: 0;
}

.o-action-link {
  display: block;
  padding-top: 12.8125rem;
  padding-bottom: 7.5rem;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
}
.o-action-link:hover {
  color: #fff;
}

@media (max-width: 699px) {
  .o-action-link {
    font-size: 40px;
    padding-top: 120px;
  }
}
@media (max-width: 1199px) {
  .o-action-link {
    color: #1e1e22;
  }
}
@media (min-width: 700px) {
  .o-action-link {
    font-size: 5.625rem;
  }
}
@media (min-width: 1200px) {
  .o-action-link {
    color: #fff;
  }
}
.o-action-link_label {
  display: inline-block;
  position: relative;
}
.o-action-link_label::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  border-bottom: 0.1875rem solid;
  transform: scaleX(0);
  transform-origin: center left;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.o-action-link:hover .o-action-link_label::after {
  transform: scaleX(1);
}

.o-h,
h1,
.o-h1,
h2,
.o-h2,
h3,
.o-h3,
h4,
.o-h4,
h5,
.o-h5,
h6,
.o-h6 {
  font-weight: 700;
  margin-top: 0;
  line-height: 1.1;
}

@media (max-width: 699px) {
  h1,
.o-h1 {
    font-size: 26px;
  }
}
@media (min-width: 700px) {
  h1,
.o-h1 {
    font-size: 60px;
  }
}
@media (min-width: 1600px) {
  h1,
.o-h1 {
    font-size: 4.375rem;
  }
}
@media (max-width: 1599px) {
  h2,
.o-h2 {
    font-size: 1.5625rem;
  }
}
@media (min-width: 1600px) {
  h2,
.o-h2 {
    font-size: 2.25rem;
  }
}
h3,
.o-h3 {
  font-size: 1.5625rem;
}

h4,
.o-h4 {
  font-size: 1rem;
}

h5,
.o-h5 {
  font-size: 0.8125rem;
}

h6,
.o-h6 {
  font-size: 0.6875rem;
}

.o-hsub {
  font-size: 0.75rem;
  padding: 1.25rem 0;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 500;
}
.o-hsub::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  border-bottom: 1px solid;
  width: 1.5rem;
  background-color: #1e1e22;
  margin-right: 1.125rem;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center left;
}
.o-hsub.-link {
  color: #fff;
  text-decoration: none;
}
.o-hsub.-link:hover::before {
  transform: scaleX(1.5);
}

.o-hsub-wrap:hover .o-hsub.-link::before {
  transform: scaleX(1.5);
}

.o-hsub.-link.-dark {
  color: #1e1e22;
}
.o-hsub.-link.-dark:hover {
  color: #1e1e22;
}
.o-hsub.-h {
  vertical-align: middle;
}

@media (max-width: 699px) {
  .o-hsub.-h {
    display: block;
    margin-top: 20px;
  }
}
@media (min-width: 700px) {
  .o-hsub.-h {
    margin-left: 2.5rem;
  }
}
.o-hsub_label {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateZ(0);
  display: inline-block;
}

.o-hsub.-link:hover .o-hsub_label,
.o-hsub-wrap:hover .o-hsub_label {
  transform: translateX(20px);
}

.is-loaded .o-loader {
  visibility: hidden;
  transition-delay: 0.6s;
}

.o-container {
  position: relative;
  margin: 0 auto;
}

@media (max-width: 699px) {
  .o-container {
    padding-right: 40px;
    padding-left: 40px;
  }
  .o-container.-small {
    padding-right: 20px;
    padding-left: 20px;
  }
}
@media (min-width: 700px) and (max-width: 1599px) {
  .o-container {
    padding-right: 7.5rem;
    padding-left: 7.5rem;
    max-width: 140rem;
  }
}
@media (min-width: 1600px) {
  .o-container {
    padding-right: 9.5625rem;
    padding-left: 9.5625rem;
    max-width: 144.125rem;
  }
}
.o-section {
  position: relative;
}
.o-section.-offset {
  margin-top: -9.375rem;
  background-color: #f6f6f6;
}
.o-section.-padding {
  padding-top: 7.5rem;
  padding-bottom: 7.5rem;
}
.o-section.-padding-top {
  padding-top: 7.5rem;
}
.o-section.-left {
  margin-right: 15rem;
}
.o-section.-right {
  margin-left: 15rem;
}
.o-section.-left-large {
  margin-right: 22.5rem;
}
.o-section.-right.-padding {
  padding-left: 9.5625rem;
}

@media (max-width: 699px) {
  .o-section.-bottom {
    padding-bottom: 60px;
  }
}
@media (min-width: 700px) {
  .o-section.-bottom {
    padding-bottom: 7.5rem;
  }
}
.o-section_image {
  position: relative;
  overflow: hidden;
}
.o-section_image.-small {
  padding-bottom: 57.144%;
}
.o-section_image.-large {
  padding-bottom: 55%;
}
.o-section_image.-padding-left {
  margin-left: 7.5rem;
}
.o-section_image.-left {
  margin-right: 15rem;
}
.o-section_image.-right {
  margin-left: 15rem;
}
.o-section_image img {
  width: 100%;
}

@media (max-width: 1599px) {
  .o-section_image.-left {
    margin-left: -7.5rem;
  }
}
@media (min-width: 1600px) {
  .o-section_image.-left {
    margin-left: -9.5625rem;
  }
}
@media (max-width: 1599px) {
  .o-section_image.-right {
    margin-right: -7.5rem;
  }
}
@media (min-width: 1600px) {
  .o-section_image.-right {
    margin-right: -9.5625rem;
  }
}
.o-grid {
  margin-left: 0;
  letter-spacing: normal;
  font-size: 0;
}
.o-grid.-margin {
  margin-left: -3.75rem;
}

.o-grid_item {
  display: inline-block;
  padding-left: 0;
  width: 100%;
  vertical-align: top;
  font-size: 1rem;
}

@media (max-width: 699px) {
  .o-grid_item.-button {
    width: 100%;
  }
}
@media (min-width: 700px) and (max-width: 999px) {
  .o-grid_item.-button {
    margin-bottom: 60px;
  }
}
@media (min-width: 1000px) {
  .o-grid_item.-button {
    width: 18.75rem;
  }
}
@media (max-width: 699px) {
  .o-grid_item.-button-content {
    margin-bottom: 30px;
  }
}
@media (min-width: 700px) and (max-width: 999px) {
  .o-grid_item.-button-content {
    margin-bottom: 60px;
  }
}
@media (min-width: 1000px) {
  .o-grid_item.-button-content {
    width: calc(100% - 18.75rem);
  }
}
.o-grid.-margin .o-grid_item {
  padding-left: 3.75rem;
}

@media (min-width: 700px) {
  .o-grid_item.-half {
    width: 50%;
  }
}
@media (min-width: 700px) and (max-width: 1199px) {
  .o-grid_item.-half.-large {
    width: 100%;
  }
}
@media (min-width: 700px) and (max-width: 999px) {
  .o-grid_item.-half.-medium {
    width: 100%;
  }
}
@media (min-width: 700px) and (max-width: 1199px) {
  .o-grid_item.-third {
    width: 50%;
  }
}
@media (min-width: 1200px) {
  .o-grid_item.-third {
    width: 33.3333333333%;
  }
}
.o-form {
  padding-bottom: 11.25rem;
}

@media (max-width: 699px) {
  .o-form_item {
    margin-bottom: 35px;
  }
}
@media (min-width: 700px) {
  .o-form_item {
    margin-bottom: 2.9375rem;
  }
}
.o-form_fieldset {
  padding: 0;
  margin: 0;
  border: 0;
}

@media (max-width: 699px) {
  .o-form_fieldset {
    margin-bottom: 20px;
  }
}
@media (min-width: 700px) {
  .o-form_fieldset {
    margin-bottom: 3.75rem;
  }
}
.o-form_button {
  text-align: right;
}

.o-label {
  display: block;
  height: 100%;
  color: #b3b3b3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.875rem;
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 699px) {
  .o-label {
    font-size: 9px;
  }
}
@media (min-width: 700px) {
  .o-label {
    font-size: 0.5625rem;
  }
}
.o-input-wrap .o-label {
  position: absolute;
  bottom: 0;
  left: 0;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.o-input:focus ~ .o-label,
.o-select:focus ~ .o-label,
.o-textarea:focus ~ .o-label,
.o-label.is-active {
  transform: translateY(-1.875rem);
}

.o-input.has-error ~ .o-label {
  color: #cc3d3d;
}

.has-error.o-select ~ .o-label, .has-error.o-textarea ~ .o-label {
  color: #cc3d3d;
}

.o-input-wrap {
  position: relative;
}

.o-input,
.o-select,
.o-textarea {
  padding: 0.875rem;
  background-color: transparent;
  border-bottom: 1px solid #b3b3b3;
  transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 699px) {
  .o-input,
.o-select,
.o-textarea {
    font-size: 14px;
  }
}
@media (min-width: 700px) {
  .o-input,
.o-select,
.o-textarea {
    font-size: 0.875rem;
  }
}
.o-input::-webkit-input-placeholder,
.o-select::-webkit-input-placeholder,
.o-textarea::-webkit-input-placeholder,
.o-input:-ms-input-placeholder,
.o-select:-ms-input-placeholder,
.o-textarea:-ms-input-placeholder,
.o-input::-ms-input-placeholder,
.o-select::-ms-input-placeholder,
.o-textarea::-ms-input-placeholder,
.o-input::placeholder,
.o-select::placeholder,
.o-textarea::placeholder {
  color: #b3b3b3;
}

.o-input.-search {
  background-color: transparent;
  color: #fff;
  font-weight: 700;
  border-bottom: none;
}

.-search.o-select, .-search.o-textarea {
  background-color: transparent;
  color: #fff;
  font-weight: 700;
  border-bottom: none;
}

@media (max-width: 699px) {
  .o-input.-search {
    font-size: 26px;
  }

  .-search.o-select, .-search.o-textarea {
    font-size: 26px;
  }
}
@media (min-width: 700px) {
  .o-input.-search {
    font-size: 3.75rem;
  }

  .-search.o-select, .-search.o-textarea {
    font-size: 3.75rem;
  }
}
.o-input.-search::-webkit-input-placeholder {
  color: #000;
}

.-search.o-select::-webkit-input-placeholder, .-search.o-textarea::-webkit-input-placeholder {
  color: #000;
}

.o-input.-search:-ms-input-placeholder {
  color: #000;
}

.-search.o-select:-ms-input-placeholder, .-search.o-textarea:-ms-input-placeholder {
  color: #000;
}

.o-input.-search::-ms-input-placeholder {
  color: #000;
}

.-search.o-select::-ms-input-placeholder, .-search.o-textarea::-ms-input-placeholder {
  color: #000;
}

.o-input.-search::placeholder {
  color: #000;
}

.-search.o-select::placeholder, .-search.o-textarea::placeholder {
  color: #000;
}

.-mobile .o-input.-search {
  font-size: 26px;
  padding: 0;
}
.-mobile .-search.o-select, .-mobile .-search.o-textarea {
  font-size: 26px;
  padding: 0;
}

.o-input.-search.-light {
  color: #1e1e22;
}

.-search.-light.o-select, .-search.-light.o-textarea {
  color: #1e1e22;
}

.o-input.-search.-light::-webkit-input-placeholder {
  color: #b3b3b3;
}

.-search.-light.o-select::-webkit-input-placeholder, .-search.-light.o-textarea::-webkit-input-placeholder {
  color: #b3b3b3;
}

.o-input.-search.-light:-ms-input-placeholder {
  color: #b3b3b3;
}

.-search.-light.o-select:-ms-input-placeholder, .-search.-light.o-textarea:-ms-input-placeholder {
  color: #b3b3b3;
}

.o-input.-search.-light::-ms-input-placeholder {
  color: #b3b3b3;
}

.-search.-light.o-select::-ms-input-placeholder, .-search.-light.o-textarea::-ms-input-placeholder {
  color: #b3b3b3;
}

.o-input.-search.-light::placeholder {
  color: #b3b3b3;
}

.-search.-light.o-select::placeholder, .-search.-light.o-textarea::placeholder {
  color: #b3b3b3;
}

.o-input.has-error {
  border-color: #cc3d3d;
}

.has-error.o-select, .has-error.o-textarea {
  border-color: #cc3d3d;
}

.o-input:focus,
.o-select:focus,
.o-textarea:focus {
  outline: none;
}

.o-input-line {
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  border-bottom: 1px solid #1e1e22;
  transform: scaleX(0);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center left;
}

.o-input:focus ~ .o-input-line,
.o-select:focus ~ .o-input-line,
.o-textarea:focus ~ .o-input-line {
  transform: scaleX(1);
}

.o-input-lines::before, .o-input-lines::after {
  content: "";
  position: absolute;
  bottom: 0;
  border-right: 1px solid #b3b3b3;
  height: 0.375rem;
  transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.o-input.has-error ~ .o-input-lines::before {
  border-color: #cc3d3d;
}

.has-error.o-select ~ .o-input-lines::before, .has-error.o-textarea ~ .o-input-lines::before {
  border-color: #cc3d3d;
}

.o-input.has-error ~ .o-input-lines::after {
  border-color: #cc3d3d;
}

.has-error.o-select ~ .o-input-lines::after, .has-error.o-textarea ~ .o-input-lines::after {
  border-color: #cc3d3d;
}

.o-input-lines::before {
  left: 0;
  transition-delay: 0.3s;
}
.o-input-lines::after {
  right: 0;
}

.o-input:focus ~ .o-input-lines::before,
.o-select:focus ~ .o-input-lines::before,
.o-textarea:focus ~ .o-input-lines::before,
.o-input:focus ~ .o-input-lines::after,
.o-select:focus ~ .o-input-lines::after,
.o-textarea:focus ~ .o-input-lines::after {
  border-color: #1e1e22;
}

.o-input:focus ~ .o-input-lines::before,
.o-select:focus ~ .o-input-lines::before,
.o-textarea:focus ~ .o-input-lines::before {
  transition-delay: 0s;
}

.o-input:focus ~ .o-input-lines::after,
.o-select:focus ~ .o-input-lines::after,
.o-textarea:focus ~ .o-input-lines::after {
  transition-delay: 0.3s;
}

.o-checkbox,
.o-radio {
  position: absolute;
  width: 0;
  opacity: 0;
}

.o-checkbox:checked + .o-checkbox-label::after,
.o-radio:checked + .o-checkbox-label::after,
.o-checkbox:checked + .o-radio-label::after,
.o-radio:checked + .o-radio-label::after {
  transform: scale(1);
}

.o-checkbox-label,
.o-radio-label {
  position: relative;
  display: inline-block;
  margin-right: 0.5em;
  line-height: 1.4;
  margin-right: 4.0625rem;
  cursor: pointer;
  padding-top: 0.125rem;
}

@media (max-width: 699px) {
  .o-checkbox-label,
.o-radio-label {
    font-size: 12px;
    padding-left: 27px;
  }
}
@media (min-width: 700px) {
  .o-checkbox-label,
.o-radio-label {
    font-size: 0.875rem;
    padding-left: 1.1875rem;
  }
}
.o-checkbox-label.-uppsercase,
.-uppsercase.o-radio-label {
  text-transform: uppercase;
}

.o-checkbox-label::before,
.o-radio-label::before,
.o-checkbox-label::after,
.o-radio-label::after {
  position: absolute;
  top: 50%;
  left: 0;
  display: inline-block;
  padding: 0;
  content: "";
  border: 1px solid;
  transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 699px) {
  .o-checkbox-label::before,
.o-radio-label::before,
.o-checkbox-label::after,
.o-radio-label::after {
    width: 12px;
    height: 12px;
    margin-top: -6px;
  }
}
@media (min-width: 700px) {
  .o-checkbox-label::before,
.o-radio-label::before,
.o-checkbox-label::after,
.o-radio-label::after {
    margin-top: -0.28125rem;
    width: 0.5625rem;
    height: 0.5625rem;
  }
}
.o-checkbox-label::after,
.o-radio-label::after {
  width: 0;
  height: 0;
  border-style: solid;
  border-color: #1e1e22 transparent transparent transparent;
  transform: scale(0);
  transform-origin: top left;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 699px) {
  .o-checkbox-label::after,
.o-radio-label::after {
    border-width: 12px 12px 0 0;
  }
}
@media (min-width: 700px) {
  .o-checkbox-label::after,
.o-radio-label::after {
    border-width: 0.5625rem 0.5625rem 0 0;
  }
}
.o-checkbox-label.has-error::before,
.has-error.o-radio-label::before {
  border-color: #cc3d3d;
}

.o-checkbox-label_text {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateZ(0);
}

.o-checkbox-label:hover .o-checkbox-label_text {
  transform: translateX(0.3125rem);
}

.o-radio-label:hover .o-checkbox-label_text {
  transform: translateX(0.3125rem);
}
.o-radio-label::before {
  border-radius: 50%;
  width: 12px;
  height: 12px;
}
.o-radio-label::after {
  border-radius: 50%;
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20enable-background%3D%22new%200%200%2013%2013%22%20xml%3Aspace%3D%22preserve%22%3E%3Ccircle%20fill%3D%22%23424242%22%20cx%3D%226.5%22%20cy%3D%226.5%22%20r%3D%226.5%22%2F%3E%3C%2Fsvg%3E");
  background-size: 6px;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(0);
  transform-origin: center;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
}

.o-radio:checked + .o-radio-label::after {
  transform: scale(1);
}

.o-select {
  position: relative;
  z-index: 1;
  padding-right: 2.5rem;
}
.o-select:focus {
  border-bottom-color: #1e1e22;
}

.o-select-wrap {
  position: relative;
}
.o-select-wrap::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2213%22%20height%3D%2211.3%22%20viewBox%3D%220%200%2013%2011.3%22%20enable-background%3D%22new%200%200%2013%2011.3%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20fill%3D%22%23b3b3b3%22%20points%3D%226.5%2011.3%203.3%205.6%200%200%206.5%200%2013%200%209.8%205.6%20%22%2F%3E%3C%2Fsvg%3E");
  background-position: center;
  background-size: 10px;
  background-repeat: no-repeat;
  content: "";
  pointer-events: none;
}

.o-textarea-wrap {
  position: relative;
}

.o-textarea {
  min-height: 9.375rem;
}

.o-button {
  position: relative;
  display: inline-block;
  text-align: center;
  border: 1px solid #1e1e22;
  white-space: nowrap;
  font-size: 0;
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.075s;
}
.o-button:before {
  display: inline-block;
  height: 100%;
  content: "";
  vertical-align: middle;
}
.o-button > * {
  display: inline-block;
  vertical-align: middle;
  white-space: normal;
  font-size: 1rem;
}
.o-button::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #1e1e22;
  transform: scaleX(0);
  transform-origin: center left;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.075s;
}
.o-button:hover {
  color: #fff;
  transition-delay: 0s;
}
.o-button:hover::after {
  transform: scaleX(1);
  transition-delay: 0s;
}
.o-button.-left::after {
  transform-origin: center right;
}
.o-button.-white {
  border-color: #fff;
}
.o-button.-white::after {
  background-color: #fff;
}
.o-button.-white:hover {
  color: #000;
}
.o-button.-form {
  width: 11.25rem;
}
.o-button.-form:focus {
  color: #fff;
  transition-delay: 0s;
}
.o-button.-form:focus::after {
  transform: scaleX(1);
  transition-delay: 0s;
}
.o-button.-square {
  padding: 0;
}

@media (max-width: 699px) {
  .o-button {
    height: 60px;
    padding: 0 20px;
  }
}
@media (min-width: 700px) {
  .o-button {
    height: 3.75rem;
    padding: 0 1.875rem;
  }
}
@media (min-width: 1200px) {
  .o-button.-anim {
    border-color: transparent;
  }
}
@media (max-width: 699px) {
  .o-button.-width {
    width: 100%;
  }
}
@media (min-width: 700px) {
  .o-button.-width {
    width: 15rem;
  }
}
@media (max-width: 699px) {
  .o-button.-square {
    width: 60px;
  }
}
@media (min-width: 700px) {
  .o-button.-square {
    width: 3.75rem;
  }
}
.o-button-group .o-button + .o-button {
  border-left: none;
}

@media (max-width: 699px) {
  .o-button.-padding {
    padding: 1.25rem;
  }
}
@media (min-width: 700px) {
  .o-button.-padding {
    padding: 1.25rem 2.5rem;
  }
}
.o-button_label {
  display: inline-block;
  position: relative;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateX(0);
  line-height: 1.4;
  z-index: 2;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 500;
  font-size: 0.75rem;
}

.o-button:hover .o-button_label {
  transform: translateX(0.5rem);
  transition-delay: 0.075s;
}
.o-button.-left:hover .o-button_label {
  transform: translateX(-0.5rem);
}
.o-button.-square:hover .o-button_label {
  transform: translateX(0.375rem);
}
.o-button.-left.-square:hover .o-button_label {
  transform: translateX(-0.375rem);
}

.o-button-group {
  margin-left: 0;
  letter-spacing: normal;
  font-size: 0;
}

.o-button_icon {
  position: relative;
  width: 1rem;
  height: 1rem;
  fill: #000;
  transition: fill 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.075s;
}

.o-button.-white .o-button_icon {
  fill: #fff;
}
.o-button:hover .o-button_icon {
  fill: #f6f6f6;
  transition-delay: 0s;
}
.o-button.-white:hover .o-button_icon {
  fill: #1e1e22;
}

.o-button_line::before, .o-button_line::after {
  content: "";
  position: absolute;
  background-color: #1e1e22;
}

.is-mobile .o-button_line::before, .is-mobile .o-button_line::after {
  display: none;
}

.o-button_line::before {
  width: 1px;
  top: 0;
  bottom: 0;
  transform: scaleY(0);
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.o-button_line::after {
  height: 1px;
  right: 0;
  left: 0;
  transform: scaleX(0);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.o-button_line:first-of-type::before {
  left: 0;
  transform-origin: center bottom;
}
.o-button_line:first-of-type::after {
  top: 0;
  transform-origin: center left;
}
.o-button_line:last-of-type::before {
  right: 0;
  transform-origin: center top;
}
.o-button_line:last-of-type::after {
  bottom: 0;
  transform-origin: center right;
}

.o-button.is-inview .o-button_line::before {
  transform: scaleY(1);
}
.o-button.is-inview .o-button_line::after {
  transform: scaleX(1);
}
.o-button.is-inview .o-button_line:first-of-type::before {
  transition-delay: 1.15s;
}
.o-button.is-inview .o-button_line:first-of-type::after {
  transition-delay: 0.1s;
}
.o-button.is-inview .o-button_line:last-of-type::before {
  transition-delay: 0.55s;
}
.o-button.is-inview .o-button_line:last-of-type::after {
  transition-delay: 0.7s;
}

.c-header-home_footer {
  z-index: 3;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
}

.c-header-home_controls,
.c-header-home_buttons {
  margin-left: 0;
  letter-spacing: normal;
  font-size: 0;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translate3d(0, 100%, 0);
}

@media (max-width: 699px) {
  .c-header-home_controls,
.c-header-home_buttons {
    padding-bottom: 40px;
  }
}
@media (min-width: 700px) {
  .c-header-home_controls,
.c-header-home_buttons {
    padding-bottom: 5.625rem;
  }
}
@media (min-width: 700px) and (max-width: 749px) {
  .c-header-home_controls,
.c-header-home_buttons {
    padding-bottom: 3.75rem;
  }
}
.is-loaded .c-header-home_controls,
.is-loaded .c-header-home_buttons {
  transform: translate3d(0, 0, 0);
}

body[data-route-option=prev-section] .c-header-home_controls,
body[data-route-option=prev-section] .c-header-home_buttons {
  transform: translate3d(0, 0, 0);
}
body[data-route-option=next-section] .c-header-home_controls,
body[data-route-option=next-section] .c-header-home_buttons {
  transform: translate3d(0, 0, 0);
}

.c-header-home_controls {
  transition-delay: 0.65s;
}

@media (min-width: 700px) {
  .c-header-home_controls {
    float: left;
  }
}
.c-header-home_buttons {
  transition-delay: 0.75s;
}

@media (max-width: 699px) {
  .c-header-home_buttons {
    margin-left: -20px;
    margin-right: -20px;
  }
}
@media (min-width: 1000px) {
  .c-header-home_buttons {
    float: right;
  }
}
@media (max-width: 699px) {
  .c-header-home_button {
    width: 50% !important;
  }
}
@media (min-width: 700px) {
  .c-header-home_button {
    width: 15.625rem;
  }
}
.slideshow__slide-image.background-absolute {
  width: 60%;
  left: 40%;
}

h1.slideshow__slide-caption-title {
  padding-left: 98px;
  padding-right: 98px;
  color: black;
}

.o-hsub.-link {
  padding-left: 98px;
  padding-right: 98px;
  color: #000;
  text-decoration: none;
}

button.slider-more-button {
  width: 16rem;
  height: 7rem;
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #fcc865;
  color: #000;
  text-transform: uppercase;
  transition: opacity 700ms cubic-bezier(0.8, 0, 0.55, 0.94) 470ms, transform 700ms cubic-bezier(0.8, 0, 0.55, 0.94) 470ms;
  transform: rotateZ(-20deg) translate3d(-20vh, 20vh, 0);
}

.is-animated .slider-more-button {
  transform: rotateZ(0deg) translate3d(0, 0, 0);
}

p.slideshow__slide-caption-content {
  padding-left: 98px;
  padding-right: 98px;
  box-sizing: border-box;
  color: rgba(0, 0, 0, 0.7);
  cursor: pointer;
  display: block;
  font-family: Plain, sans-serif;
  font-size: 14px;
  font-weight: 200;
  max-height: 218px;
  letter-spacing: 0.28px;
  line-height: 28px;
  margin-top: 20px;
  opacity: 0;
  text-size-adjust: 100%;
  transition: opacity 700ms cubic-bezier(0.8, 0, 0.55, 0.94), transform 700ms cubic-bezier(0.8, 0, 0.55, 0.94);
  transform: translate3d(-100px, 0, 0);
  max-width: 40%;
  width: 40%;
}

.slideshow__slide.is-current p.slideshow__slide-caption-content {
  opacity: 1;
  transition: opacity 700ms cubic-bezier(0.8, 0, 0.55, 0.94) 1470ms, transform 700ms cubic-bezier(0.8, 0, 0.55, 0.94) 1470ms;
  transform: translate3d(0, 0, 0);
}

span.slideshow__slide-caption-subtitle-label {
  font-weight: 800;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.side-nav {
  display: none;
}

@media (min-width: 1024px) {
  .side-nav {
    display: block;
    left: 0;
    z-index: 2;
    width: 100vh;
    height: 5vw;
    transform-origin: top;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate3d(-100%, 10%, 0);
    transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
  }

  .is-animated .side-nav {
    transition: opacity 700ms cubic-bezier(0.8, 0, 0.55, 0.94) 470ms, transform 700ms cubic-bezier(0.8, 0, 0.55, 0.94) 470ms;
    transform: rotateZ(-90deg) translate3d(-390px, -50vh, 0);
  }
  .side-nav {
    opacity: 1;
    transition: opacity 700ms cubic-bezier(0.8, 0, 0.55, 0.94) 1470ms, transform 700ms cubic-bezier(0.8, 0, 0.55, 0.94) 1470ms;
  }
  .side-nav ul {
    list-style: none;
    margin: 0 0;
    padding-top: 0.3vw;
  }
  .side-nav li {
    display: inline-block;
    line-height: 0.9em;
    margin: 0 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid transparent;
    cursor: pointer;
    transition: opacity 400ms cubic-bezier(0.8, 0, 0.55, 0.94), border-color 400ms cubic-bezier(0.8, 0, 0.55, 0.94);
  }
  .side-nav .label {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.3;
    margin: 0 0;
    color: #0a0c0d;
    font-weight: 800;
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  }
  .side-nav[data-view=cover] li[data-view=cover] {
    opacity: 1;
    border-bottom: 1px solid #000;
  }

  .slideshow__slide.is-prev .side-nav {
    transform: translate3d(-100%, -50%, 0);
  }
  .slideshow__slide.is-next .side-nav {
    transform: translate3d(-100%, 10%, 0);
  }
  .slideshow__slide.is-prev-section .side-nav {
    transform: translate3d(-100%, -50%, 0);
    transition: none;
  }
  .slideshow__slide.is-next-section .side-nav {
    transform: translate3d(-100%, 10%, 0);
    transition: none;
  }
}
/*end slider show*/
/*Floating button*/
.floating-btn {
  font-family: "Roboto Thin", sans-serif;
  border: none;
  border-width: 0px;
  margin: 0;
  overflow: hidden;
  border: none;
  outline: none;
  color: white;
  font-size: 20px;
  background: #F6EFE3;
  position: relative;
  padding: 14px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  box-shadow: 0 12px 42px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: 0.3s;
  margin: 0.5em;
}
.floating-btn:hover {
  background: #d2cbbf;
  cursor: pointer;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.js-parallax.is-inview {
  width: 100px;
}

button .floating-btn:focus {
  outline: 0px;
  outline: 0px;
}

.c-header-home_controls.-nomobile.o-button-group {
  margin-left: 30%;
}

.divide {
  margin-top: 50px;
  margin-bottom: 50px;
}

.ripple {
  overflow: hidden;
}

.ripple-effect {
  position: absolute;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background: white;
  animation: ripple-animation 2s;
}

.ripple > .o-button_icon {
  top: 1px;
}

@keyframes ripple-animation {
  from {
    transform: scale(1);
    opacity: 0.4;
  }
  to {
    transform: scale(100);
    opacity: 0;
  }
}
/* End Floating Button */
/* nav bar*/
.navbar-container {
  z-index: 1000;
  background-color: #fff;
}

@media (max-width: 699px) {
  .container {
    padding-right: 0px;
    padding-left: 0px;
  }
}
@media (min-width: 700px) and (max-width: 1599px) {
  .container {
    padding-right: 0rem;
    padding-left: 0rem;
    max-width: 140rem;
  }
}
</style>
</head>
<body>
  <body>
  <section class="slideshow" id="js-header">
    <div class="slideshow__slide js-slider-home-slide is-current" data-slide="1">
      <div class="slideshow__slide-background-parallax background-absolute js-parallax" data-speed="-1" data-position="top" data-target="#js-header">
        <div class="slideshow__slide-background-load-wrap background-absolute">
          <div class="slideshow__slide-background-load background-absolute">
            <div class="slideshow__slide-background-wrap background-absolute">
              <div class="slideshow__slide-background background-absolute">
                <div class="slideshow__slide-image-wrap background-absolute">
                  <div class="slideshow__slide-image background-absolute" style="background-image:url(&quot;https://images.pexels.com/photos/227675/pexels-photo-227675.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=750&amp;w=1260&quot;)"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="side-nav vh-for-mobile" data-view="cover">
        <ul>
          <li class="label" data-view="cover">Works</li>
        </ul>
      </div>
      <div class="slideshow__slide-caption">
        <div class="slideshow__slide-caption-text">
          <div class="container js-parallax" data-speed="2" data-position="top" data-target="#js-header">
            <h1 class="slideshow__slide-caption-title">Omnes enim iucundum</h1>
            <p class="slideshow__slide-caption-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In faucibus odio sed leo fermentum, sed faucibus massa eleifend. Pellentesque ut auctor tellus. Vivamus eget vestibulum urna, sit amet aliquet augue.</p><a class="slideshow__slide-caption-subtitle -load o-hsub -link" href="#"><span class="slideshow__slide-caption-subtitle-label">See how</span></a>
          </div>
        </div>
      </div>
    </div>
    <div class="slideshow__slide js-slider-home-slide is-next" data-slide="2">
      <div class="slideshow__slide-background-parallax background-absolute js-parallax" data-speed="-1" data-position="top" data-target="#js-header">
        <div class="slideshow__slide-background-load-wrap background-absolute">
          <div class="slideshow__slide-background-load background-absolute">
            <div class="slideshow__slide-background-wrap background-absolute">
              <div class="slideshow__slide-background background-absolute">
                <div class="slideshow__slide-image-wrap background-absolute">
                  <div class="slideshow__slide-image background-absolute" style="background-image: url('https://images.pexels.com/photos/415574/pexels-photo-415574.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=750&amp;w=1260');"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="side-nav vh-for-mobile" data-view="cover">
        <ul>
          <li class="label" data-view="cover">Works</li>
        </ul>
      </div>
      <div class="slideshow__slide-caption">
        <div class="slideshow__slide-caption-text">
          <div class="container js-parallax" data-speed="2" data-position="top" data-target="#js-header">
            <h1 class="slideshow__slide-caption-title">Fortasse id optimum</h1>
            <p class="slideshow__slide-caption-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In faucibus odio sed leo fermentum, sed faucibus massa eleifend. Pellentesque ut auctor tellus. Vivamus eget vestibulum urna, sit amet aliquet augue.</p><a class="slideshow__slide-caption-subtitle -load o-hsub -link" href="#"><span class="slideshow__slide-caption-subtitle-label">Learn more about</span></a>
          </div>
        </div>
      </div>
    </div>
    <div class="slideshow__slide js-slider-home-slide is-prev" data-slide="3">
      <div class="slideshow__slide-background-parallax background-absolute js-parallax" data-speed="-1" data-position="top" data-target="#js-header">
        <div class="slideshow__slide-background-load-wrap background-absolute">
          <div class="slideshow__slide-background-load background-absolute">
            <div class="slideshow__slide-background-wrap background-absolute">
              <div class="slideshow__slide-background background-absolute">
                <div class="slideshow__slide-image-wrap background-absolute">
                  <div class="slideshow__slide-image background-absolute" style="background-image: url('https://images.pexels.com/photos/256150/pexels-photo-256150.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=750&amp;w=1260');"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="side-nav vh-for-mobile" data-view="cover">
        <ul>
          <li class="label" data-view="cover">Works</li>
        </ul>
      </div>
      <div class="slideshow__slide-caption">
        <div class="slideshow__slide-caption-text">
          <div class="container js-parallax" data-speed="2" data-position="top" data-target="#js-header">
            <h1 class="slideshow__slide-caption-title">Solum praeterea formosum</h1>
            <p class="slideshow__slide-caption-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In faucibus odio sed leo fermentum, sed faucibus massa eleifend. Pellentesque ut auctor tellus. Vivamus eget vestibulum urna, sit amet aliquet augue.</p><a class="slideshow__slide-caption-subtitle -load o-hsub -link" href="#"><span class="slideshow__slide-caption-subtitle-label">View More</span></a>
          </div>
        </div>
      </div>
    </div>
    <div class="c-header-home_footer">
      <div class="o-container">
        <div class="c-header-home_controls -nomobile o-button-group">
          <div class="js-parallax is-inview" data-speed="1" data-position="top" data-target="#js-header">
            <button class="js-slider-home-next floating-btn ripple" type="button">
              <svg class="o-button_icon" role="img">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-next"></use>
              </svg>
            </button>
            <button class="js-slider-home-prev floating-btn ripple" type="button">
              <svg class="o-button_icon" role="img">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-prev"></use>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  </section>
</body>
<div>
  <svg xmlns="http://www.w3.org/2000/svg">
    <symbol id="arrow-prev" viewbox="0 0 492 492" xmlns="http://www.w3.org/2000/svg">
      <path d="M198.608 246.104L382.664 62.04c5.068-5.056 7.856-11.816 7.856-19.024 0-7.212-2.788-13.968-7.856-19.032l-16.128-16.12C361.476 2.792 354.712 0 347.504 0s-13.964 2.792-19.028 7.864L109.328 227.008c-5.084 5.08-7.868 11.868-7.848 19.084-.02 7.248 2.76 14.028 7.848 19.112l218.944 218.932c5.064 5.072 11.82 7.864 19.032 7.864 7.208 0 13.964-2.792 19.032-7.864l16.124-16.12c10.492-10.492 10.492-27.572 0-38.06L198.608 246.104z"></path>
    </symbol>
    <symbol id="arrow-next" viewbox="0 0 492.004 492.004" xmlns="http://www.w3.org/2000/svg">
      <path d="M382.678 226.804L163.73 7.86C158.666 2.792 151.906 0 144.698 0s-13.968 2.792-19.032 7.86l-16.124 16.12c-10.492 10.504-10.492 27.576 0 38.064L293.398 245.9l-184.06 184.06c-5.064 5.068-7.86 11.824-7.86 19.028 0 7.212 2.796 13.968 7.86 19.04l16.124 16.116c5.068 5.068 11.824 7.86 19.032 7.86s13.968-2.792 19.032-7.86L382.678 265c5.076-5.084 7.864-11.872 7.848-19.088.016-7.244-2.772-14.028-7.848-19.108z"></path>
    </symbol>
  </svg>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
      <script>
var _createClass = function () {function defineProperties(target, props) {for (var i = 0; i < props.length; i++) {var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor);}}return function (Constructor, protoProps, staticProps) {if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor;};}();

function _classCallCheck(instance, Constructor) {if (!(instance instanceof Constructor)) {throw new TypeError("Cannot call a class as a function");}}

var $window = $(window);
var $body = $('body');

var Slideshow = function () {
  function Slideshow() {
    var _this = this;

    var userOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

    _classCallCheck(this, Slideshow);

    var defaultOptions = {
      $el: $('.slideshow'),
      showArrows: false,
      showPagination: true,
      duration: 10000,
      autoplay: true };


    var options = Object.assign({}, defaultOptions, userOptions);

    this.$el = options.$el;
    this.maxSlide = this.$el.find($('.js-slider-home-slide')).length;
    this.showArrows = this.maxSlide > 1 ? options.showArrows : false;
    this.showPagination = options.showPagination;
    this.currentSlide = 1;
    this.isAnimating = false;
    this.animationDuration = 1200;
    this.autoplaySpeed = options.duration;
    this.interval;
    this.$controls = this.$el.find('.js-slider-home-button');
    this.autoplay = this.maxSlide > 1 ? options.autoplay : false;

    this.$el.on('click', '.js-slider-home-next', function (event) {
      return _this.nextSlide();
    });
    this.$el.on('click', '.js-slider-home-prev', function (event) {
      return _this.prevSlide();
    });
    this.$el.on('click', '.js-pagination-item', function (event) {
      if (!_this.isAnimating) {
        _this.preventClick();
        _this.goToSlide(event.target.dataset.slide);
      }
    });

    this.init();
  }

  _createClass(Slideshow, [{
    key: 'init',
    value: function init() {
      this.goToSlide(1);
      if (this.autoplay) {
        this.startAutoplay();
      }

      if (this.showPagination) {
        var paginationNumber = this.maxSlide;
        var pagination = '<div class="pagination"><div class="container">';

        for (var i = 0; i < this.maxSlide; i++) {
          var item = '<span class="pagination__item js-pagination-item ' + (i === 0 ? 'is-current' : '') + '" data-slide=' + (i + 1) + '>' + (i + 1) + '</span>';
          pagination = pagination + item;
        }

        pagination = pagination + '</div></div>';

        this.$el.append(pagination);
      }
    } },
  {
    key: 'preventClick',
    value: function preventClick() {
      var _this2 = this;

      this.isAnimating = true;
      this.$controls.prop('disabled', true);
      clearInterval(this.interval);

      setTimeout(function () {
        _this2.isAnimating = false;
        _this2.$controls.prop('disabled', false);
        if (_this2.autoplay) {
          _this2.startAutoplay();
        }
      }, this.animationDuration);
    } },
  {
    key: 'goToSlide',
    value: function goToSlide(index) {
      this.currentSlide = parseInt(index);

      if (this.currentSlide > this.maxSlide) {
        this.currentSlide = 1;
      }

      if (this.currentSlide === 0) {
        this.currentSlide = this.maxSlide;
      }

      var newCurrent = this.$el.find('.js-slider-home-slide[data-slide="' + this.currentSlide + '"]');
      var newPrev = this.currentSlide === 1 ? this.$el.find('.js-slider-home-slide').last() : newCurrent.prev('.js-slider-home-slide');
      var newNext = this.currentSlide === this.maxSlide ? this.$el.find('.js-slider-home-slide').first() : newCurrent.next('.js-slider-home-slide');

      this.$el.find('.js-slider-home-slide').removeClass('is-prev is-next is-current');
      this.$el.find('.js-pagination-item').removeClass('is-current');

      if (this.maxSlide > 1) {
        newPrev.addClass('is-prev');
        newNext.addClass('is-next');
      }

      newCurrent.addClass('is-current');
      this.$el.find('.js-pagination-item[data-slide="' + this.currentSlide + '"]').addClass('is-current');
    } },
  {
    key: 'nextSlide',
    value: function nextSlide() {
      this.preventClick();
      this.goToSlide(this.currentSlide + 1);
    } },
  {
    key: 'prevSlide',
    value: function prevSlide() {
      this.preventClick();
      this.goToSlide(this.currentSlide - 1);
    } },
  {
    key: 'startAutoplay',
    value: function startAutoplay() {
      var _this3 = this;

      this.interval = setInterval(function () {
        if (!_this3.isAnimating) {
          _this3.nextSlide();
        }
      }, this.autoplaySpeed);
    } },
  {
    key: 'destroy',
    value: function destroy() {
      this.$el.off();
    } }]);


  return Slideshow;
}();

(function () {
  var loaded = false;
  var maxLoad = 3000;

  function load() {
    var options = {
      showPagination: true };


    var slideShow = new Slideshow(options);
  }

  function addLoadClass() {
    $body.addClass('is-loaded');

    setTimeout(function () {
      $body.addClass('is-animated');
    }, 600);
  }

  $window.on('load', function () {
    if (!loaded) {
      loaded = true;
      load();
    }
  });

  setTimeout(function () {
    if (!loaded) {
      loaded = true;
      load();
    }
  }, maxLoad);

  addLoadClass();
})();
    </script>
</body>
</html>

3. By Sean Free

Made by Sean Free. Split-screen Slideshow. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Reem+Kufi" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
* {
  box-sizing: border-box;
}

body {
  background-color: #0c0c0c;
  overflow: hidden;
}

#container {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#slides {
  position: relative;
  width: 100%;
  height: 100%;
}
#slides .slide {
  position: absolute;
  display: flex;
  width: 100%;
  height: 100%;
}
#slides .slide .title {
  position: absolute;
  top: calc(50% - 0.5em);
  left: 20px;
  z-index: 2;
  padding-top: 5px;
  font-family: "Reem Kufi", sans-serif;
  font-size: 5em;
  color: white;
  overflow: hidden;
}
#slides .slide .title .title-text {
  display: block;
  transform: translateY(1.2em);
  transition: transform 1s ease-in-out;
}
#slides .slide .slide-partial {
  position: absolute;
  width: 50%;
  height: 100%;
  overflow: hidden;
  transition: transform 1s ease-in-out;
}
#slides .slide .slide-partial img {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 1s ease-in-out;
}
#slides .slide .slide-left {
  top: 0;
  left: 0;
  transform: translateX(-100%);
}
#slides .slide .slide-left img {
  top: 0;
  right: 0;
  -o-object-position: 100% 50%;
     object-position: 100% 50%;
  transform: translateX(50%);
}
#slides .slide .slide-right {
  top: 0;
  right: 0;
  transform: translateX(100%);
  transition-delay: 0.2s;
}
#slides .slide .slide-right img {
  top: 0;
  left: 0;
  -o-object-position: 0% 50%;
     object-position: 0% 50%;
  transition-delay: 0.2s;
  transform: translateX(-50%);
}
#slides .slide.active .title .title-text {
  transform: translate(0);
  transition-delay: 0.3s;
}
#slides .slide.active .slide-partial, #slides .slide.active .slide-partial img {
  transform: translateX(0);
}

#slide-select {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-family: "Reem Kufi", sans-serif;
  font-size: 1.5em;
  font-weight: lighter;
  color: white;
}
#slide-select li {
  position: relative;
  cursor: pointer;
  margin: 0 5px;
}
#slide-select li.prev:hover {
  transform: translateX(-2px);
}
#slide-select li.next:hover {
  transform: translateX(2px);
}
#slide-select .selector {
  height: 14px;
  width: 14px;
  border: 2px solid white;
  background-color: transparent;
  transition: background-color 0.5s ease-in-out;
}
#slide-select .selector.current {
  background-color: white;
}

.codepen-link {
  position: absolute;
  bottom: 20px;
  right: 20px;
  height: 40px;
  width: 40px;
  z-index: 10;
  border-radius: 50%;
  box-sizing: border-box;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/logo.jpg");
  background-position: center center;
  background-size: cover;
  opacity: 0.5;
  transition: all 0.25s;
}
.codepen-link:hover {
  opacity: 0.8;
  box-shadow: 0 2px 6px #0c0c0c;
}
</style>
</head>
<body>
  <div id="container">
  <ul id="slides">
    <li class="slide">
      <div class="slide-partial slide-left"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/forest-left.jpg"/></div>
      <div class="slide-partial slide-right"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/forest-right.jpg"/></div>
      <h1 class="title"><span class="title-text">Forest</span></h1>
    </li>
    <li class="slide">
      <div class="slide-partial slide-left"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/mountain-left.jpg"/></div>
      <div class="slide-partial slide-right"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/mountain-right.jpg"/></div>
      <h1 class="title"><span class="title-text">Mountain</span></h1>
    </li>
    <li class="slide">
      <div class="slide-partial slide-left"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/ocean-left.jpg"/></div>
      <div class="slide-partial slide-right"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/ocean-right.jpg"/></div>
      <h1 class="title"><span class="title-text">Ocean</span></h1>
    </li>
    <li class="slide">
      <div class="slide-partial slide-left"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/canyon-left.jpg"/></div>
      <div class="slide-partial slide-right"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/canyon-right.jpg"/></div>
      <h1 class="title"><span class="title-text">Canyon</span></h1>
    </li>
    <li class="slide">
      <div class="slide-partial slide-left"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/lake-left.jpg"/></div>
      <div class="slide-partial slide-right"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/lake-right.jpg"/></div>
      <h1 class="title"><span class="title-text">Lake</span></h1>
    </li>
  </ul>
  <ul id="slide-select">
    <li class="btn prev"><</li>
    <li class="selector"></li>
    <li class="selector"></li>
    <li class="selector"></li>
    <li class="selector"></li>
    <li class="selector"></li>
    <li class="btn next">></li>
  </ul>
</div><a class="codepen-link" href="https://www.codepen.io/seanfree" target="_blank"></a>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
      <script>
let $slides, interval, $selectors, $btns, currentIndex, nextIndex;

let cycle = index => {
  let $currentSlide, $nextSlide, $currentSelector, $nextSelector;

  nextIndex = index !== undefined ? index : nextIndex;

  $currentSlide = $($slides.get(currentIndex));
  $currentSelector = $($selectors.get(currentIndex));

  $nextSlide = $($slides.get(nextIndex));
  $nextSelector = $($selectors.get(nextIndex));

  $currentSlide.removeClass("active").css("z-index", "0");

  $nextSlide.addClass("active").css("z-index", "1");

  $currentSelector.removeClass("current");
  $nextSelector.addClass("current");

  currentIndex = index !== undefined ?
  nextIndex :
  currentIndex < $slides.length - 1 ?
  currentIndex + 1 :
  0;

  nextIndex = currentIndex + 1 < $slides.length ? currentIndex + 1 : 0;
};

$(() => {
  currentIndex = 0;
  nextIndex = 1;

  $slides = $(".slide");
  $selectors = $(".selector");
  $btns = $(".btn");

  $slides.first().addClass("active");
  $selectors.first().addClass("current");

  interval = window.setInterval(cycle, 6000);

  $selectors.on("click", e => {
    let target = $selectors.index(e.target);
    if (target !== currentIndex) {
      window.clearInterval(interval);
      cycle(target);
      interval = window.setInterval(cycle, 6000);
    }
  });

  $btns.on("click", e => {
    window.clearInterval(interval);
    if ($(e.target).hasClass("prev")) {
      let target = currentIndex > 0 ? currentIndex - 1 : $slides.length - 1;
      cycle(target);
    } else if ($(e.target).hasClass("next")) {
      cycle();
    }
    interval = window.setInterval(cycle, 6000);
  });
});
    </script>
</body>
</html>

4. By SS

Made by SS ( Something Strange ). Slideshow Presentation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
@import url(https://fonts.googleapis.com/css?family=Abril+Fatface);
@import url(https://fonts.googleapis.com/css?family=Roboto:500);
html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  color: white;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  line-height: 1em;
  background-color: black;
}

#slides {
  position: absolute;
  top: 17%;
  left: 10%;
  right: 48%;
  bottom: 17%;
  overflow: hidden;
}
#slides ul {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
#slides ul li {
  position: relative;
  width: 100%;
  height: 100%;
}
#slides ul li:nth-child(1) {
  background-color: #131313;
}
#slides ul li:nth-child(2) {
  background-color: #262626;
}
#slides ul li:nth-child(3) {
  background-color: #393939;
}
#slides ul li:nth-child(4) {
  background-color: #262626;
}
#slides ul li:nth-child(5) {
  background-color: #131313;
}

ul#steps {
  position: absolute;
  top: 50%;
  left: 20%;
  height: 110px;
  margin-top: -55px;
}
ul#steps li {
  position: relative;
  height: 100%;
  color: #999;
  font-family: "Abril Fatface", serif;
  transform: translate3d(0, 0, 0);
  transition: color 666ms cubic-bezier(0.666, 0, 0.333, 1), font-size 666ms cubic-bezier(0.666, 0, 0.333, 1);
}
ul#steps li.active {
  color: #bf482c;
  font-size: 96px;
}

#titles {
  position: absolute;
  top: 50%;
  left: 40%;
  width: 60%;
  height: 330px;
  margin-top: -165px;
  padding: 110px 0;
}
#titles ul {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
#titles li {
  position: relative;
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0;
  transform: translate3d(0, 0, 0);
  transition: visibility 0ms linear 666ms, opacity 666ms cubic-bezier(0.666, 0, 0.333, 1);
}
#titles li.active {
  visibility: visible;
  opacity: 1;
  transition: visibility 0ms linear, opacity 666ms cubic-bezier(0.666, 0, 0.333, 1);
}
#titles li h2 {
  height: 110px;
  font-family: "Abril Fatface", serif;
  font-size: 96px;
  display: block;
}
#titles li p {
  height: 110px;
  color: #999;
}

.roller {
  transform: translate3d(0, 0%, 0);
  transition: transform 666ms cubic-bezier(0.666, 0, 0.333, 1);
}
</style>
</head>
<body>
  <div id="slides">
  <ul class="roller">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
<ul id="steps" class="roller">
  <li>01</li>
  <li>02</li>
  <li>03</li>
  <li>04</li>
  <li>05</li>
</ul>
<div id="titles">
  <ul class="roller">
    <li>
      <h2>First</h2>
      <h2>Slide</h2>
      <p>First, use the up and down arrow keys to navigate.</p>
    </li>
    <li>
      <h2>Second</h2>
      <h2>Slide</h2>
      <p>Secondly, use the up and down arrow keys to navigate.</p>
    </li>
    <li>
      <h2>Third</h2>
      <h2>Slide</h2>
      <p>Thirdly, use the up and down arrow keys to navigate.</p>
    </li>
    <li>
      <h2>Fourth</h2>
      <h2>Slide</h2>
      <p>Fourthly, use the up and down arrow keys to navigate.</p>
    </li>
    <li>
      <h2>Fifth</h2>
      <h2>Slide</h2>
      <p>Lastly, use the up and down arrow keys to navigate.</p>
    </li>
  </ul>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js'></script>
      <script>
(function() {
  var Application, Utils;

  window.DEMO = window.DEMO || {};

  Utils = {
    'transform': Modernizr.prefixed('transform').replace(/([A-Z])/g, (str, m1) => {
      return '-' + m1.toLowerCase();
    }).replace(/^ms-/, '-ms-'),
    'translate': (x, y) => {
      var tran, vals;
      tran = Modernizr.csstransforms3d ? 'translate3d' : 'translate';
      vals = Modernizr.csstransforms3d ? '(' + x + ', ' + y + ', 0)' : '(' + x + ', ' + y + ')';
      return tran + vals;
    }
  };

  Application = class Application {
    constructor() {
      this.onKeyup = this.onKeyup.bind(this);
      this.previous = this.previous.bind(this);
      this.next = this.next.bind(this);
      this.update = this.update.bind(this);
      DEMO.utils = Utils;
      this.$doc = $(document);
      this.$roller = $('.roller');
      this.$step = $('#steps li');
      this.$title = $('#titles li');
      this.min = 0;
      this.max = this.$step.length - 1;
      this.active_index = 0;
      this.$step.eq(this.active_index).addClass('active');
      this.$title.eq(this.active_index).addClass('active');
      this.observe();
    }

    observe() {
      return this.$doc.on('keyup', this.onKeyup);
    }

    onKeyup(e) {
      var kc;
      kc = e.keyCode;
      if (kc === 38) {
        e.preventDefault();
        this.previous();
      }
      if (kc === 40) {
        e.preventDefault();
        return this.next();
      }
    }

    previous() {
      if (this.active_index > this.min) {
        this.active_index--;
        return this.update();
      }
    }

    next() {
      if (this.active_index < this.max) {
        this.active_index++;
        return this.update();
      }
    }

    update() {
      var y;
      y = -(this.active_index * 100);
      this.$roller.css(DEMO.utils.transform, DEMO.utils.translate(0, `${y}%`));
      this.$step.removeClass('active');
      this.$title.removeClass('active');
      this.$step.eq(this.active_index).addClass('active');
      return this.$title.eq(this.active_index).addClass('active');
    }

  };

  $(function() {
    return DEMO.instance = new Application();
  });

}).call(this);
    </script>
</body>
</html>

5. By Mark Lee

Made by Mark Lee. Simple responsive slideshow made with HTML5, CSS3, and JavaScript. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
body {
  margin: 0; 
  padding: 0;
  background: #111;
  height: 100%;
}
.diy-slideshow{
  position: relative;
  display: block;
  overflow: hidden;
}
figure{
  position: absolute;
  opacity: 0;
  transition: 1s opacity;
}
figcaption{
  position: absolute;
  font-family: sans-serif;
  font-size: .8em;
  bottom: .75em;
  right: .35em;
  padding: .25em;
  color: #fff;
  background: rgba(0,0,0, .25);
  border-radius: 2px;
}
figcaption a{
  color: #fff;
}
figure.show{
  opacity: 1;
  position: static;
  transition: 1s opacity;
}
.next, .prev{
  color: #fff;
  position: absolute;
  background: rgba(0,0,0, .6);
  top: 50%;
  z-index: 1;
  font-size: 2em;
  margin-top: -.75em;
  opacity: .3;
  user-select: none;
}
.next:hover, .prev:hover{
  cursor: pointer;
  opacity: 1;
}
.next{
  right: 0;
  padding: 10px 5px 15px 10px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.prev{
  left: 0;
  padding: 10px 10px 15px 5px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
p{
  margin: 10px 20px;
  color: #fff;
}
</style>
</head>
<body>
  <div class="diy-slideshow">
	<figure class="show">
		<img src="http://themarklee.com/wp-content/uploads/2013/12/snowying.jpg" width="100%" /><figcaption>"Snowying" by <a href="https://www.flickr.com/photos/fiddleoak/8511209344/">fiddleoak</a>.</figcaption> 
	</figure>
  <figure>
    <img src="http://themarklee.com/wp-content/uploads/2013/12/starlight.jpg" width="100%" /><figcaption>"Starlight" by <a href="https://www.flickr.com/photos/chaoticmind75/10738494123/in/set-72157626146319517">ChaoticMind75</a>.</figcaption> 
	</figure>
	<figure>
		<img src="http://themarklee.com/wp-content/uploads/2013/12/snowstorm.jpg" width="100%" /><figcaption>"Snowstorm" by <a href="https://www.flickr.com/photos/tylerbeaulawrence/8539457508/">Beaulawrence</a>.</figcaption> 
	</figure>
  <figure>
		<img src="http://themarklee.com/wp-content/uploads/2013/12/misty-winter-afternoon.jpg" width="100%" /><figcaption>"Misty winter afternoon" by <a href="https://www.flickr.com/photos/[email protected]/5277611659/">Bert Kaufmann</a>.</figcaption> 
	</figure>
  <figure>
		<img src="http://themarklee.com/wp-content/uploads/2013/12/good-morning.jpg" width="100%" /><figcaption>"Good Morning!" by <a href="https://www.flickr.com/photos/frank_wuestefeld/4306107546/">Frank Wuestefeld</a>.</figcaption> 
	</figure>
  <figure>
		<img src="http://themarklee.com/wp-content/uploads/2013/12/driving-home-for-christmas.jpg" width="100%" /><figcaption>"Driving home for Christmas" by <a href="https://www.flickr.com/photos/[email protected]/5292186041/">Bert Kaufmann</a>.</figcaption> 
	</figure>
  <span class="prev">&laquo;</span>
  <span class="next">&raquo;</span>
</div>  

<p>An example of a pretty basic diy slideshow. This is the no-jQuery version.</p>
      <script>
(function () {

  var counter = 0, // to keep track of current slide
  $items = document.querySelectorAll('.diy-slideshow figure'), // a collection of all of the slides, caching for performance
  numItems = $items.length; // total number of slides

  // this function is what cycles the slides, showing the next or previous slide and hiding all the others
  var showCurrent = function () {
    var itemToShow = Math.abs(counter % numItems); // uses remainder (aka modulo) operator to get the actual index of the element to show  

    // remove .show from whichever element currently has it 
    // http://stackoverflow.com/a/16053538/2006057
    [].forEach.call($items, function (el) {
      el.classList.remove('show');
    });

    // add .show to the one item that's supposed to have it
    $items[itemToShow].classList.add('show');
  };

  // add click events to prev & next buttons 
  document.querySelector('.next').addEventListener('click', function () {
    counter++;
    showCurrent();
  }, false);

  document.querySelector('.prev').addEventListener('click', function () {
    counter--;
    showCurrent();
  }, false);

})();
    </script>
</body>
</html>

6. By Riley Adair

Made by Riley Adair. Vanilla JavaScript Slideshow with CSS Transition. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Fira+Mono|Montserrat:800'>
<style>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100vh;
  overflow: hidden; 
  background: #22222A;
  font-family: 'Fira Mono', monospace;
  -webkit-font-smoothing: antialiased;
  font-size: .88rem;
  color: #bdbdd5;
}

.content-width {
  width: 86%;
  height: 100vh;
  margin: 0 auto;
}

.slideshow {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.slideshow-items {
  position: relative;
  width: 100%;
  height: 300px;
}

.item {
  position: absolute;
  width: 100%;
  height: auto;
}

.item-image-container {
  position: relative;
  width: 42%;
}

.item-image-container::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 101%;
  height: 101%;
  background: #22222A;
  opacity: 0;
  z-index: 1;
}

.item-image {
  position: relative;
  width: 100%;
  height: auto;
  opacity: 0;
  display: block;
  /* transition: property name | duration | timing-function | delay  */
  transition: opacity .3s ease-out .45s;
}

.item.active .item-image {
  opacity: 1;
}

.item.active .item-image-container::before {
  opacity: .8;
}

.item-description {
  position: absolute;
  top: 182px;
  right: 0;
  width: 50%;
  padding-right: 4%;
  line-height: 1.8;
}

/* Staggered Vertical Items ------------------------------------------------------*/
.item-header {
  position: absolute;
  top: 150px;
  left: -1.8%;
  z-index: 100;
}

.item-header .vertical-part {
  margin: 0 -4px;
  font-family: 'Montserrat', sans-serif;
  -webkit-font-smoothing: auto;
  font-size: 7vw;
  color: #fff;
}

.vertical-part {
  overflow: hidden;
  display: inline-block;
}

.vertical-part b {
  display: inline-block;
  transform: translateY(100%);
}

.item-header .vertical-part b {
  transition: .5s;
}

.item-description .vertical-part b {
  transition: .21s;
}

.item.active .item-header .vertical-part b {
  transform: translateY(0);
}

.item.active .item-description .vertical-part b {
  transform: translateY(0);
}

/* Controls ----------------------------------------------------------------------*/
.controls {
  position: relative;
  text-align: right;
  z-index: 1000;
}

.controls ul {
  list-style: none;
}

.controls ul li {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 3px;
  background:#bdbdd5;;
  cursor: pointer;
}

.controls ul li.active {
  background:#6a6a77;;
}
</style>
</head>
<body>
  <div class="content-width">
  <div class="slideshow">
    <!-- Slideshow Items -->
    <div class="slideshow-items">
      <div class="item">
        <div class="item-image-container">
          <img class="item-image" src="https://i.pinimg.com/564x/23/a4/86/23a4860b8b70b1eb27f2791b97aaee8e.jpg" />
        </div>
        <!-- Staggered Header Elements -->
        <div class="item-header">
          <span class="vertical-part"><b>N</b></span>
          <span class="vertical-part"><b>i</b></span>
          <span class="vertical-part"><b>k</b></span>
          <span class="vertical-part"><b>e</b></span>
        </div>
        <!-- Staggered Description Elements -->
        <div class="item-description">
          <span class="vertical-part">
            <b>Nike</b>
          </span>
          <span class="vertical-part">
            <b>ipsum</b>
          </span> 
          <span class="vertical-part">
            <b>dolor</b>
          </span>
          <span class="vertical-part">
            <b>sit</b>
          </span> 
          <span class="vertical-part">
            <b>amet,</b>
          </span>
          <span class="vertical-part">
            <b>consectetur</b>
          </span> 
          <span class="vertical-part">
            <b>adipiscing</b>
          </span>
          <span class="vertical-part">
            <b>elit.</b>
          </span> 
          <span class="vertical-part">
            <b>Pellentesque</b>
          </span>
          <span class="vertical-part">
            <b>elementum</b>
          </span> 
          <span class="vertical-part">
            <b>gravida</b>
          </span>
          <span class="vertical-part">
            <b>ex</b>
          </span> 
          <span class="vertical-part">
            <b>at</b>
          </span>
          <span class="vertical-part">
            <b>maximus.</b>
          </span> 
          <span class="vertical-part">
            <b>Nullam</b>
          </span>
          <span class="vertical-part">
            <b>quis</b>
          </span> 
          <span class="vertical-part">
            <b>leo</b>
          </span>
          <span class="vertical-part">
            <b>ipsum.</b>
          </span> 
          <span class="vertical-part">
            <b>Lorem</b>
          </span>
          <span class="vertical-part">
            <b>ipsum</b>
          </span> 
          <span class="vertical-part">
            <b>Nam</b>
          </span> 
          <span class="vertical-part">
            <b>consectetur</b>
          </span>
          <span class="vertical-part">
            <b>malesuada</b>
          </span> 
          <span class="vertical-part">
            <b>blandit.</b>
          </span>
          <span class="vertical-part">
            <b>Mauris</b>
          </span> 
          <span class="vertical-part">
            <b>vulputate</b>
          </span>
          <span class="vertical-part">
            <b>purus</b>
          </span> 
          <span class="vertical-part">
            <b>id</b>
          </span>
          <span class="vertical-part">
            <b>dolor</b>
          </span> 
          <span class="vertical-part">
            <b>euismod</b>
          </span>
          <span class="vertical-part">
            <b>varius.</b>
          </span>      
        </div>
      </div>
      <div class="item">
        <div class="item-image-container">
          <img class="item-image" src="https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/a1232e48702241.589f548dc6bee.jpg" />
        </div>
        <!-- Staggered Header Elements -->
        <div class="item-header">
          <span class="vertical-part"><b>S</b></span>
          <span class="vertical-part"><b>p</b></span>
          <span class="vertical-part"><b>o</b></span>
          <span class="vertical-part"><b>t</b></span>
          <span class="vertical-part"><b>i</b></span>
          <span class="vertical-part"><b>f</b></span>
          <span class="vertical-part"><b>y</b></span>
        </div>
        <!-- Staggered Description Elements -->
        <div class="item-description">
          <span class="vertical-part">
            <b>Spotify</b>
          </span>
          <span class="vertical-part">
            <b>ipsum</b>
          </span>
          <span class="vertical-part">
            <b>dolor</b>
          </span>
          <span class="vertical-part">
            <b>sit</b>
          </span>
          <span class="vertical-part">
            <b>amet,</b>
          </span>
          <span class="vertical-part">
            <b>consectetur</b>
          </span>
          <span class="vertical-part">
            <b>adipiscing</b>
          </span>
          <span class="vertical-part">
            <b>elit.</b>
          </span>
          <span class="vertical-part">
            <b>Pellentesque</b>
          </span>
          <span class="vertical-part">
            <b>elementum</b>
          </span>
          <span class="vertical-part">
            <b>gravida</b>
          </span>
          <span class="vertical-part">
            <b>ex</b>
          </span>
          <span class="vertical-part">
            <b>at</b>
          </span>
          <span class="vertical-part">
            <b>maximus.</b>
          </span>
          <span class="vertical-part">
            <b>Nullam</b>
          </span>
          <span class="vertical-part">
            <b>quis</b>
          </span>
          <span class="vertical-part">
            <b>leo</b>
          </span>
          <span class="vertical-part">
            <b>ipsum.</b>
          </span>
          <span class="vertical-part">
            <b>Lorem</b>
          </span>
          <span class="vertical-part">
            <b>ipsum</b>
          </span>
          <span class="vertical-part">
            <b>Nam</b>
          </span>
          <span class="vertical-part">
            <b>consectetur</b>
          </span>
          <span class="vertical-part">
            <b>malesuada</b>
          </span>
          <span class="vertical-part">
            <b>blandit.</b>
          </span>
          <span class="vertical-part">
            <b>Mauris</b>
          </span>
          <span class="vertical-part">
            <b>vulputate</b>
          </span>
          <span class="vertical-part">
            <b>purus</b>
          </span>
          <span class="vertical-part">
            <b>id</b>
          </span>
          <span class="vertical-part">
            <b>dolor</b>
          </span>
          <span class="vertical-part">
            <b>euismod</b>
          </span>
          <span class="vertical-part">
            <b>varius.</b>
          </span>
        </div>
      </div>
      <div class="item">
        <div class="item-image-container">
          <img class="item-image" src="https://i2.wp.com/www.futuristarchitecture.com/wp-content/uploads/2016/11/fantastic-small-living-room-interior-idea-7.jpg?w=700&ssl=1" />
        </div>
        <!-- Staggered Header Elements -->
        <div class="item-header">
          <span class="vertical-part"><b>A</b></span>
          <span class="vertical-part"><b>i</b></span>
          <span class="vertical-part"><b>r</b></span>
          <span class="vertical-part"><b>b</b></span>
          <span class="vertical-part"><b>n</b></span>
          <span class="vertical-part"><b>b</b></span>
        </div>
        <!-- Staggered Description Elements -->
        <div class="item-description">
          <span class="vertical-part">
            <b>Airbnb</b>
          </span>
          <span class="vertical-part">
            <b>ipsum</b>
          </span>
          <span class="vertical-part">
            <b>dolor</b>
          </span>
          <span class="vertical-part">
            <b>sit</b>
          </span>
          <span class="vertical-part">
            <b>amet,</b>
          </span>
          <span class="vertical-part">
            <b>consectetur</b>
          </span>
          <span class="vertical-part">
            <b>adipiscing</b>
          </span>
          <span class="vertical-part">
            <b>elit.</b>
          </span>
          <span class="vertical-part">
            <b>Pellentesque</b>
          </span>
          <span class="vertical-part">
            <b>elementum</b>
          </span>
          <span class="vertical-part">
            <b>gravida</b>
          </span>
          <span class="vertical-part">
            <b>ex</b>
          </span>
          <span class="vertical-part">
            <b>at</b>
          </span>
          <span class="vertical-part">
            <b>maximus.</b>
          </span>
          <span class="vertical-part">
            <b>Nullam</b>
          </span>
          <span class="vertical-part">
            <b>quis</b>
          </span>
          <span class="vertical-part">
            <b>leo</b>
          </span>
          <span class="vertical-part">
            <b>ipsum.</b>
          </span>
          <span class="vertical-part">
            <b>Lorem</b>
          </span>
          <span class="vertical-part">
            <b>ipsum</b>
          </span>
          <span class="vertical-part">
            <b>Nam</b>
          </span>
          <span class="vertical-part">
            <b>consectetur</b>
          </span>
          <span class="vertical-part">
            <b>malesuada</b>
          </span>
          <span class="vertical-part">
            <b>blandit.</b>
          </span>
          <span class="vertical-part">
            <b>Mauris</b>
          </span>
          <span class="vertical-part">
            <b>vulputate</b>
          </span>
          <span class="vertical-part">
            <b>purus</b>
          </span>
          <span class="vertical-part">
            <b>id</b>
          </span>
          <span class="vertical-part">
            <b>dolor</b>
          </span>
          <span class="vertical-part">
            <b>euismod</b>
          </span>
          <span class="vertical-part">
            <b>varius.</b>
          </span>
        </div>
      </div>
    </div>
    <div class="controls">
      <ul>
        <li class="control" data-index="0"></li>
        <li class="control" data-index="1"></li>
        <li class="control" data-index="2"></li>
      </ul>
    </div>
  </div>
</div>
      <script>
// Master DOManipulator v2 ------------------------------------------------------------
const items = document.querySelectorAll('.item'),
controls = document.querySelectorAll('.control'),
headerItems = document.querySelectorAll('.item-header'),
descriptionItems = document.querySelectorAll('.item-description'),
activeDelay = .76,
interval = 5000;

let current = 0;

const slider = {
  init: () => {
    controls.forEach(control => control.addEventListener('click', e => {slider.clickedControl(e);}));
    controls[current].classList.add('active');
    items[current].classList.add('active');
  },
  nextSlide: () => {// Increment current slide and add active class
    slider.reset();
    if (current === items.length - 1) current = -1; // Check if current slide is last in array
    current++;
    controls[current].classList.add('active');
    items[current].classList.add('active');
    slider.transitionDelay(headerItems);
    slider.transitionDelay(descriptionItems);
  },
  clickedControl: e => {// Add active class to clicked control and corresponding slide
    slider.reset();
    clearInterval(intervalF);

    const control = e.target,
    dataIndex = Number(control.dataset.index);

    control.classList.add('active');
    items.forEach((item, index) => {
      if (index === dataIndex) {// Add active class to corresponding slide
        item.classList.add('active');
      }
    });
    current = dataIndex; // Update current slide
    slider.transitionDelay(headerItems);
    slider.transitionDelay(descriptionItems);
    intervalF = setInterval(slider.nextSlide, interval); // Fire that bad boi back up
  },
  reset: () => {// Remove active classes
    items.forEach(item => item.classList.remove('active'));
    controls.forEach(control => control.classList.remove('active'));
  },
  transitionDelay: items => {// Set incrementing css transition-delay for .item-header & .item-description, .vertical-part, b elements
    let seconds;

    items.forEach(item => {
      const children = item.childNodes; // .vertical-part(s)
      let count = 1,
      delay;

      item.classList.value === 'item-header' ? seconds = .015 : seconds = .007;

      children.forEach(child => {// iterate through .vertical-part(s) and style b element
        if (child.classList) {
          item.parentNode.classList.contains('active') ? delay = count * seconds + activeDelay : delay = count * seconds;
          child.firstElementChild.style.transitionDelay = `${delay}s`; // b element
          count++;
        }
      });
    });
  } };


let intervalF = setInterval(slider.nextSlide, interval);
slider.init();
    </script>
</body>
</html>

7. By Bruno Carvalho

Made by Bruno Carvalho. Slideshow Parallax with TweenMax. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans%3A400%2C400italic%2C600%2C700%2C700italic%7COswald%3A400%2C300%7CVollkorn%3A400%2C400italic'>
<style>
body {
  font: 14px/2 "Open sans", sans-serif;
  letter-spacing: 0.05em;
}

.btn {
  display: inline-block;
  padding: 13px 20px;
  color: #fff;
  text-decoration: none;
  position: relative;
  background: transparent;
  border: 1px solid #e1e1e1;
  font: 12px/1.2 "Oswald", sans-serif;
  letter-spacing: 0.4em;
  text-align: center;
  text-indent: 2px;
  text-transform: uppercase;
  transition: color 0.1s linear 0.05s;
}
.btn::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: #e1e1e1;
  z-index: 1;
  opacity: 0;
  transition: height 0.2s ease, top 0.2s ease, opacity 0s linear 0.2s;
}
.btn::after {
  transition: border 0.1s linear 0.05s;
}
.btn .btn-inner {
  position: relative;
  z-index: 2;
}
.btn:hover {
  color: #373737;
  transition: color 0.1s linear 0s;
}
.btn:hover::before {
  top: 0;
  height: 100%;
  opacity: 1;
  transition: height 0.2s ease, top 0.2s ease, opacity 0s linear 0s;
}
.btn:hover::after {
  border-color: #373737;
  transition: border 0.1s linear 0s;
}

.slideshow {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100vh;
  z-index: 1;
}
.slideshow .slideshow-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.slideshow .slides {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.slideshow .slide {
  display: none;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.slideshow .slide.is-active {
  display: block;
}
.slideshow .slide.is-loaded {
  opacity: 1;
}
.slideshow .slide .caption {
  padding: 0 100px;
}
.slideshow .slide .image-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  z-index: 1;
  background-size: cover;
  image-rendering: optimizeQuality;
}
.slideshow .slide .image-container::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}
.slideshow .slide .image {
  width: 100%;
  width: 100%;
  object-fit: cover;
  height: 100%;
}
.slideshow .slide-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  color: #fff;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.slideshow .slide .title {
  margin: 0 auto 15px;
  max-width: 1000px;
  font: 300 50px/1.2 "Oswald", sans-serif;
  letter-spacing: 0.35em;
  text-transform: uppercase;
}
.slideshow .slide .text {
  margin: 0 auto;
  max-width: 1000px;
  font-size: 18px;
  line-height: 1.4;
}
.slideshow .slide .btn {
  margin: 15px 0 0;
  border-color: #fff;
}
.slideshow .slide .btn::before {
  background: #fff;
}
.slideshow .pagination {
  position: absolute;
  bottom: 35px;
  left: 0;
  width: 100%;
  height: 12px;
  cursor: default;
  z-index: 2;
  text-align: center;
}
.slideshow .pagination .item {
  display: inline-block;
  padding: 15px 5px;
  position: relative;
  width: 46px;
  height: 32px;
  cursor: pointer;
  text-indent: -999em;
  z-index: 1;
}
.slideshow .pagination .item + .page {
  margin-left: -2px;
}
.slideshow .pagination .item::before {
  content: "";
  display: block;
  position: absolute;
  top: 15px;
  left: 5px;
  width: 36px;
  height: 2px;
  background: rgba(255, 255, 255, 0.5);
  transition: background 0.2s ease;
}
.slideshow .pagination .item::after {
  width: 0;
  background: #fff;
  z-index: 2;
  transition: width 0.2s ease;
}
.slideshow .pagination .item:hover::before, .slideshow .pagination .item.is-active::before {
  background-color: #fff;
}
.slideshow .arrows .arrow {
  margin: -33px 0 0;
  padding: 20px;
  position: absolute;
  top: 50%;
  cursor: pointer;
  z-index: 3;
}
.slideshow .arrows .prev {
  left: 30px;
}
.slideshow .arrows .prev:hover .svg {
  left: -10px;
}
.slideshow .arrows .next {
  right: 30px;
}
.slideshow .arrows .next:hover .svg {
  left: 10px;
}
.slideshow .arrows .svg {
  position: relative;
  left: 0;
  width: 14px;
  height: 26px;
  fill: #fff;
  transition: left 0.2s ease;
}
</style>
</head>
<body>
  <main class="main-content">
  <section class="slideshow">
    <div class="slideshow-inner">
      <div class="slides">
        <div class="slide is-active ">
          <div class="slide-content">
            <div class="caption">
              <div class="title">Slide title 1</div>
              <div class="text">
                <p>Slide description 1</p>
              </div> 
              <a href="#" class="btn">
                <span class="btn-inner">Learn More</span>
              </a>
            </div>
          </div>
          <div class="image-container"> 
            <img src="https://www.alixbdanthenay.fr/wp-content/uploads/2015/07/Indispensable-1.jpg" alt="" class="image" />
          </div>
        </div>
        <div class="slide">
          <div class="slide-content">
            <div class="caption">
              <div class="title">Slide title 2</div>
              <div class="text">
                <p>Slide description 2</p>
              </div> 
              <a href="#" class="btn">
                <span class="btn-inner">Learn More</span>
              </a>
            </div>
          </div>
          <div class="image-container">
            <img src="https://www.alixbdanthenay.fr/wp-content/uploads/2015/07/Indispensable-4-1.jpg" alt="" class="image" />
          </div>
        </div>
        <div class="slide">
          <div class="slide-content">
            <div class="caption">
              <div class="title">Slide title 3</div>
              <div class="text">
                <p>Slide description 3</p>
              </div> 
              <a href="#" class="btn">
                <span class="btn-inner">Learn More</span>
              </a>
            </div>
          </div>
          <div class="image-container">
            <img src="https://www.alixbdanthenay.fr/wp-content/uploads/2016/11/11.jpg" alt="" class="image" />
          </div>
        </div>
        <div class="slide">
          <div class="slide-content">
            <div class="caption">
              <div class="title">Slide title 4</div>
              <div class="text">
                <p>Slide description 4</p>
              </div> 
              <a href="#" class="btn">
                <span class="btn-inner">Learn More</span>
              </a>
            </div>
          </div>
          <div class="image-container"> 
            <img src="https://www.alixbdanthenay.fr/wp-content/uploads/2016/11/20mars17-sans-typo.jpg" alt="" class="image" />
          </div>
        </div>
      </div>
      <div class="pagination">
        <div class="item is-active"> 
          <span class="icon">1</span>
        </div>
        <div class="item">
          <span class="icon">2</span>
        </div>
        <div class="item">
          <span class="icon">3</span>
        </div>
        <div class="item">
          <span class="icon">4</span>
        </div>
      </div>
      <div class="arrows">
        <div class="arrow prev">
          <span class="svg svg-arrow-left">
            <svg version="1.1" id="svg4-Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="14px" height="26px" viewBox="0 0 14 26" enable-background="new 0 0 14 26" xml:space="preserve"> <path d="M13,26c-0.256,0-0.512-0.098-0.707-0.293l-12-12c-0.391-0.391-0.391-1.023,0-1.414l12-12c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414L2.414,13l11.293,11.293c0.391,0.391,0.391,1.023,0,1.414C13.512,25.902,13.256,26,13,26z"/> </svg>
            <span class="alt sr-only"></span>
          </span>
        </div>
        <div class="arrow next">
          <span class="svg svg-arrow-right">
            <svg version="1.1" id="svg5-Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="14px" height="26px" viewBox="0 0 14 26" enable-background="new 0 0 14 26" xml:space="preserve"> <path d="M1,0c0.256,0,0.512,0.098,0.707,0.293l12,12c0.391,0.391,0.391,1.023,0,1.414l-12,12c-0.391,0.391-1.023,0.391-1.414,0s-0.391-1.023,0-1.414L11.586,13L0.293,1.707c-0.391-0.391-0.391-1.023,0-1.414C0.488,0.098,0.744,0,1,0z"/> </svg>
            <span class="alt sr-only"></span>
          </span>
        </div>
      </div>
    </div> 
  </section>
</main>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js'></script>
      <script>
var slideshowDuration = 4000;
var slideshow = $('.main-content .slideshow');

function slideshowSwitch(slideshow, index, auto) {
  if (slideshow.data('wait')) return;

  var slides = slideshow.find('.slide');
  var pages = slideshow.find('.pagination');
  var activeSlide = slides.filter('.is-active');
  var activeSlideImage = activeSlide.find('.image-container');
  var newSlide = slides.eq(index);
  var newSlideImage = newSlide.find('.image-container');
  var newSlideContent = newSlide.find('.slide-content');
  var newSlideElements = newSlide.find('.caption > *');
  if (newSlide.is(activeSlide)) return;

  newSlide.addClass('is-new');
  var timeout = slideshow.data('timeout');
  clearTimeout(timeout);
  slideshow.data('wait', true);
  var transition = slideshow.attr('data-transition');
  if (transition == 'fade') {
    newSlide.css({
      display: 'block',
      zIndex: 2 });

    newSlideImage.css({
      opacity: 0 });


    TweenMax.to(newSlideImage, 1, {
      alpha: 1,
      onComplete: function () {
        newSlide.addClass('is-active').removeClass('is-new');
        activeSlide.removeClass('is-active');
        newSlide.css({ display: '', zIndex: '' });
        newSlideImage.css({ opacity: '' });
        slideshow.find('.pagination').trigger('check');
        slideshow.data('wait', false);
        if (auto) {
          timeout = setTimeout(function () {
            slideshowNext(slideshow, false, true);
          }, slideshowDuration);
          slideshow.data('timeout', timeout);}} });
  } else {
    if (newSlide.index() > activeSlide.index()) {
      var newSlideRight = 0;
      var newSlideLeft = 'auto';
      var newSlideImageRight = -slideshow.width() / 8;
      var newSlideImageLeft = 'auto';
      var newSlideImageToRight = 0;
      var newSlideImageToLeft = 'auto';
      var newSlideContentLeft = 'auto';
      var newSlideContentRight = 0;
      var activeSlideImageLeft = -slideshow.width() / 4;
    } else {
      var newSlideRight = '';
      var newSlideLeft = 0;
      var newSlideImageRight = 'auto';
      var newSlideImageLeft = -slideshow.width() / 8;
      var newSlideImageToRight = '';
      var newSlideImageToLeft = 0;
      var newSlideContentLeft = 0;
      var newSlideContentRight = 'auto';
      var activeSlideImageLeft = slideshow.width() / 4;
    }

    newSlide.css({
      display: 'block',
      width: 0,
      right: newSlideRight,
      left: newSlideLeft,
      zIndex: 2 });


    newSlideImage.css({
      width: slideshow.width(),
      right: newSlideImageRight,
      left: newSlideImageLeft });


    newSlideContent.css({
      width: slideshow.width(),
      left: newSlideContentLeft,
      right: newSlideContentRight });


    activeSlideImage.css({
      left: 0 });


    TweenMax.set(newSlideElements, { y: 20, force3D: true });
    TweenMax.to(activeSlideImage, 1, {
      left: activeSlideImageLeft,
      ease: Power3.easeInOut });


    TweenMax.to(newSlide, 1, {
      width: slideshow.width(),
      ease: Power3.easeInOut });


    TweenMax.to(newSlideImage, 1, {
      right: newSlideImageToRight,
      left: newSlideImageToLeft,
      ease: Power3.easeInOut });


    TweenMax.staggerFromTo(newSlideElements, 0.8, { alpha: 0, y: 60 }, { alpha: 1, y: 0, ease: Power3.easeOut, force3D: true, delay: 0.6 }, 0.1, function () {
      newSlide.addClass('is-active').removeClass('is-new');
      activeSlide.removeClass('is-active');
      newSlide.css({
        display: '',
        width: '',
        left: '',
        zIndex: '' });


      newSlideImage.css({
        width: '',
        right: '',
        left: '' });


      newSlideContent.css({
        width: '',
        left: '' });


      newSlideElements.css({
        opacity: '',
        transform: '' });


      activeSlideImage.css({
        left: '' });


      slideshow.find('.pagination').trigger('check');
      slideshow.data('wait', false);
      if (auto) {
        timeout = setTimeout(function () {
          slideshowNext(slideshow, false, true);
        }, slideshowDuration);
        slideshow.data('timeout', timeout);
      }
    });
  }
}

function slideshowNext(slideshow, previous, auto) {
  var slides = slideshow.find('.slide');
  var activeSlide = slides.filter('.is-active');
  var newSlide = null;
  if (previous) {
    newSlide = activeSlide.prev('.slide');
    if (newSlide.length === 0) {
      newSlide = slides.last();
    }
  } else {
    newSlide = activeSlide.next('.slide');
    if (newSlide.length == 0)
    newSlide = slides.filter('.slide').first();
  }

  slideshowSwitch(slideshow, newSlide.index(), auto);
}

function homeSlideshowParallax() {
  var scrollTop = $(window).scrollTop();
  if (scrollTop > windowHeight) return;
  var inner = slideshow.find('.slideshow-inner');
  var newHeight = windowHeight - scrollTop / 2;
  var newTop = scrollTop * 0.8;

  inner.css({
    transform: 'translateY(' + newTop + 'px)', height: newHeight });

}

$(document).ready(function () {
  $('.slide').addClass('is-loaded');

  $('.slideshow .arrows .arrow').on('click', function () {
    slideshowNext($(this).closest('.slideshow'), $(this).hasClass('prev'));
  });

  $('.slideshow .pagination .item').on('click', function () {
    slideshowSwitch($(this).closest('.slideshow'), $(this).index());
  });

  $('.slideshow .pagination').on('check', function () {
    var slideshow = $(this).closest('.slideshow');
    var pages = $(this).find('.item');
    var index = slideshow.find('.slides .is-active').index();
    pages.removeClass('is-active');
    pages.eq(index).addClass('is-active');
  });

  var timeout = setTimeout(function () {
    slideshowNext(slideshow, false, true);
  }, slideshowDuration);

  slideshow.data('timeout', timeout);
});

if ($('.main-content .slideshow').length > 1) {
  $(window).on('scroll', homeSlideshowParallax);
}
    </script>
</body>
</html>

8. By Nikolas Payne

Made by Nikolas Payne. Nautilus Slideshow. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title> 
<style>
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  background: black;
  font-family: roboto;
}

.container {
  display: flex;
  flex-direction: row;
}
.container section.forward {
  flex-grow: 1;
  cursor: pointer;
}
.container section.back {
  flex-grow: 1;
  cursor: pointer;
  background: #52F9D4;
  background: #eeeeee;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.nautilus {
  background: #ddd;
  position: relative;
  min-width: 161.8034vh;
  height: 100vh;
  margin: 0 auto;
  overflow: hidden;
}

.nautilus > div {
  position: absolute;
  z-index: 900;
  transition: all 400ms ease-out;
  -webkit-animation: genie 400ms forwards ease-out;
          animation: genie 400ms forwards ease-out;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;
  width: 9.016986vh;
  height: 5.5728vh;
  left: 114.59055442vh;
  top: 70.820377901vh;
  opacity: 0;
}
.nautilus > div:nth-child(1) {
  opacity: 1;
  width: 100vh;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: #52F9D4;
  z-index: 999;
}
.nautilus > div:nth-child(2) {
  opacity: 1;
  width: 61.8034vh;
  height: 61.8034vh;
  top: 0vh;
  left: 100vh;
  background-color: #51E3C2;
  z-index: 998;
}
.nautilus > div:nth-child(3) {
  opacity: 1;
  width: 38.19783669vh;
  height: 38.19783669vh;
  top: 61.8034vh;
  left: 123.60615331vh;
  background-color: #53C7AD;
  z-index: 997;
}
.nautilus > div:nth-child(4) {
  opacity: 1;
  width: 23.60778717vh;
  height: 23.60778717vh;
  top: 76.39221283vh;
  left: 100vh;
  background-color: #51AF9A;
  z-index: 996;
}
.nautilus > div:nth-child(5) {
  opacity: 1;
  height: 14.59055442vh;
  width: 14.59055442vh;
  top: 61.8034vh;
  left: 100vh;
  background: #4D9686;
  z-index: 995;
}
.nautilus > div:nth-child(6) {
  opacity: 1;
  height: 9.016986vh;
  width: 9.016986vh;
  top: 61.8034vh;
  left: 114.59055442vh;
  background: #498376;
  z-index: 994;
}
.nautilus > div:nth-child(7) {
  opacity: 1;
  width: 9.016986vh;
  height: 5.5728vh;
  left: 114.59055442vh;
  top: 70.820377901vh;
  z-index: 993;
}

@-webkit-keyframes genie {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes genie {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
button {
  position: absolute;
  top: 0;
  left: 0;
  height: 60px;
  width: 200px;
}

.column {
  padding: 1rem;
  color: #333;
}
.column h1, .column h2, .column h3, .column h4 {
  font-weight: 300;
}
.column h1 {
  font-size: 48px;
}
.column h2 {
  font-size: 24px;
}
</style>
</head>
<body>
  <div class="container">
<section class="nautilus">
   <div style="background: url('http://d8559fa83407ca590c9c-26c3b154822345d9dde0204930c49e9c.r68.cf1.rackcdn.com/2860546_a1e73ae4_m.jpeg') center center / cover no-repeat ">
   
  </div>
 
  <div style="background: url('http://www.youthedesigner.com/wp-content/uploads/2013/02/37.jpg') center center / cover no-repeat "></div>
  <div style="background: url('http://i.kinja-img.com/gawker-media/image/upload/s--vl1wPe4w--/c_scale,fl_progressive,q_80,w_800/18ioy0rbeb5dxjpg.jpg') center center / cover no-repeat "></div>
  <div style="background: url('http://worksdesigngroup.com/wp-content/uploads/2014/01/105855_2_600.jpeg') center center / cover no-repeat "></div>
  <div style="background: url('https://founterior.com/wp-content/uploads/2014/02/lamp-product-design-Port-by-Alexander-Taylor.jpg') center center / cover no-repeat "></div>
 <div style="background: url('https://hovercraftdoggy.files.wordpress.com/2012/04/tumblr_lwbkwwuxjo1qdixcio2_1280.jpg') center center / cover no-repeat "></div> 
  <div style="background: url('https://assets.yellowtrace.com.au/wp-content/uploads/2012/02/yellowtrace_Hanging-Clock-by-Lucas-Peet-Design_01.jpg') center center / cover no-repeat "></div>
</section>
<section class="back">
  <div class="column">
    <h1>Nautilus Slideshow</h1>
    <h2>Click Here</h2> 
  </div>  
</section>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
var interval = 500;

var slide;

$('section.back').click(function () {
  var slide = $('.nautilus div:last-child').remove();
  $('.nautilus').prepend(slide);
});
    </script>
</body>
</html>

9. By Fabio Ottaviani

Made by Fabio Ottaviani. Slick Slideshow with blur effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <link rel='stylesheet' href='https://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css'>
<style>
body, html {
  height: 100%;
  background: #000;
  overflow: hidden;
}

.slideshow {
  position: relative;
  height: 100%;
  z-index: 1;
}

/*----------------------------------------
Slider 1
----------------------------------------*/
.slider {
  height: 100%;
  overflow: hidden;
}
.slider .item {
  overflow: hidden;
  position: relative;
  height: 100%;
}
.slider .item img {
  width: auto;
  height: 100%;
  position: relative;
  z-index: 1;
  left: 50%;
  transform: translateX(-50%) scale(1.4);
  opacity: 0.4;
  filter: blur(50px) saturate(3);
}

/*----------------------------------------
Slider 2
----------------------------------------*/
.slider-2 {
  position: absolute;
  z-index: 11;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 0%;
  padding-bottom: 35%;
  transform: translate(-50%, -50%);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}
.slider-2:before {
  content: "";
  position: absolute;
  left: -1%;
  bottom: -1%;
  width: 102%;
  height: 50%;
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
  z-index: 1;
  pointer-events: none;
}
.slider-2 .item {
  height: 0;
  padding-bottom: 16%;
  transform: scale(1.02);
  background: #333;
}
.slider-2 .item.slick-active {
  z-index: 10;
}
.slider-2 .item img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  height: 100%;
  width: auto;
  opacity: 1;
  filter: none;
}
.slider-2 .slick-dots {
  bottom: 15px;
  z-index: 1;
  text-align: center;
  position: absolute;
  padding: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.slider-2 .slick-dots li {
  display: inline;
  margin: 0;
  padding: 0;
}
.slider-2 .slick-dots li button {
  border: none;
  background: none;
  text-indent: -9999px;
  font-size: 0;
  width: 20px;
  height: 20px;
  outline: none;
  position: relative;
  z-index: 1;
  cursor: pointer;
}
.slider-2 .slick-dots li button:before {
  content: "";
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 4px;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.7;
  transition: all 0.5s ease-out;
}
.slider-2 .slick-dots li.slick-active button:before {
  transform: translate(-50%, -50%) scale(1.4);
  opacity: 1;
}

/*----------------------------------------
Arrows
----------------------------------------*/
.slick-arrow {
  position: absolute;
  z-index: 10;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0;
  outline: none;
  width: 40px;
  height: 40px;
}
.slick-arrow:before {
  content: "";
  width: 30px;
  height: 30px;
  background-color: #fff;
  -webkit-mask-image: url(http://cdn.flaticon.com/svg/22/22086.svg);
          mask-image: url(http://cdn.flaticon.com/svg/22/22086.svg);
  display: block;
  opacity: 0.5;
  transition: all 0.5s ease-out;
}
.slick-arrow.slick-next {
  left: auto;
  right: 10px;
}
.slick-arrow.slick-next:before {
  transform: rotate(180deg);
}
.slick-arrow:hover:before {
  opacity: 1;
}
</style>
</head>
<body>
<div class="slideshow">
  <div class="slider slider-1">
    <div class="item">
      <img src="https://images.unsplash.com/photo-1465935343323-d742334bcbda?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925">
    </div>
    <div class="item">
      <img src="https://images.unsplash.com/photo-1443890923422-7819ed4101c0?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925">
    </div>
    <div class="item">
      <img src="https://images.unsplash.com/photo-1474861644511-0f2775ae97cc?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925">
    </div>
  </div>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
<script src='//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js'></script>
      <script>
function slideshow() {
  // clone
  $('.slider-1').clone().removeClass('slider-1').addClass('slider-2').insertAfter($('.slider'));

  // set first
  $('.slider-1').slick({
    draggable: false,
    dots: false,
    infinite: true,
    responsive: true,
    asNavFor: '.slider-2',
    touchThreshold: 20,
    speed: 1000,
    fade: true });


  // set second
  $('.slider-2').slick({
    dots: true,
    infinite: true,
    responsive: true,
    asNavFor: '.slider-1',
    arrows: false,
    speed: 1000,
    easing: 'easeInOutQuart' });

}

$(function () {
  slideshow();
  setTimeout(function () {
    $('.slider-1 .slick-next').click();
  }, 1000);
});
    </script>
</body>
</html>
 

10. By Fabio Ottaviani

Another Slideshow by Fabio Ottaviani. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto+Condensed:100'>
  
<style>
body,
html {
  height: 100%;
  background: #110101;
  font-family: "Roboto", sans-serif;
  overflow: hidden;
}

.slideshow {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.slideshow .slider {
  width: 100vw;
  height: 100vw;
  z-index: 2;
}
.slideshow .slider * {
  outline: none;
}
.slideshow .slider .item {
  height: 100vh;
  width: 100vw;
  position: relative;
  overflow: hidden;
  border: none;
}
.slideshow .slider .item .text {
  display: none;
}
.slideshow .slider .item img {
  min-width: 101%;
  min-height: 101%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.slideshow .slick-dots {
  position: fixed;
  z-index: 100;
  width: 40px;
  height: auto;
  bottom: auto;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  left: auto;
  color: #fff;
  display: block;
}
.slideshow .slick-dots li {
  display: block;
  width: 100%;
  height: auto;
}
.slideshow .slick-dots li button {
  position: relative;
  width: 20px;
  height: 15px;
  text-align: center;
}
.slideshow .slick-dots li button:before {
  content: "";
  background: #fff;
  color: #fff;
  height: 2px;
  width: 20px;
  border-radius: 0;
  position: absolute;
  top: 50%;
  right: 0;
  left: auto;
  transform: translateY(-50%);
  transition: all 0.3s ease-in-out;
  opacity: 0.6;
}
.slideshow .slick-dots li.slick-active button:before {
  width: 40px;
  opacity: 1;
}
.slideshow.slideshow-right {
  left: 0;
  z-index: 1;
  width: 50vw;
  pointer-events: none;
}
.slideshow.slideshow-right .slider {
  left: 0;
  position: absolute;
}

.slideshow-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  font-size: 80px;
  width: 100vw;
  text-align: center;
  color: #fff;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 100;
  pointer-events: none;
  text-transform: uppercase;
  letter-spacing: 20px;
  line-height: 0.8;
}
@media (max-width: 767px) {
  .slideshow-text {
    font-size: 40px;
  }
}

.the-most {
  position: fixed;
  z-index: 1;
  bottom: 0;
  left: 0;
  width: 50vw;
  max-width: 200px;
  padding: 10px;
}
.the-most img {
  max-width: 100%;
}
</style>
</head>
<body>
<div class="split-slideshow">
  <div class="slideshow">
    <div class="slider">
      <div class="item">
        <img src="https://raw.githubusercontent.com/supahfunk/supah-codepen/master/canyon-2.jpg" />
      </div>
      <div class="item">
        <img src="https://raw.githubusercontent.com/supahfunk/supah-codepen/master/canyon-3.jpg" />
      </div>
      <div class="item">
        <img src="https://raw.githubusercontent.com/supahfunk/supah-codepen/master/canyon-4.jpg" />
      </div>
      <div class="item">
        <img src="https://raw.githubusercontent.com/supahfunk/supah-codepen/master/canyon-1.jpg" />
      </div>
    </div>
  </div>
  <div class="slideshow-text">
    <div class="item">Canyon</div>
    <div class="item">Desert</div>
    <div class="item">Erosion</div>
    <div class="item">Shape</div>
  </div>
</div>

<a class="the-most" target="_blank" href="https://codepen.io/2017/popular/pens/10/">
  <img src="https://raw.githubusercontent.com/supahfunk/supah-codepen/master/themost-2017.png">
</a>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js'></script>
      <script>
var $slider = $('.slideshow .slider'),
maxItems = $('.item', $slider).length,
dragging = false,
tracking,
rightTracking;

$sliderRight = $('.slideshow').clone().addClass('slideshow-right').appendTo($('.split-slideshow'));

rightItems = $('.item', $sliderRight).toArray();
reverseItems = rightItems.reverse();
$('.slider', $sliderRight).html('');
for (i = 0; i < maxItems; i++) {if (window.CP.shouldStopExecution(0)) break;
  $(reverseItems[i]).appendTo($('.slider', $sliderRight));
}window.CP.exitedLoop(0);

$slider.addClass('slideshow-left');
$('.slideshow-left').slick({
  vertical: true,
  verticalSwiping: true,
  arrows: false,
  infinite: true,
  dots: true,
  speed: 1000,
  cssEase: 'cubic-bezier(0.7, 0, 0.3, 1)' }).
on('beforeChange', function (event, slick, currentSlide, nextSlide) {

  if (currentSlide > nextSlide && nextSlide == 0 && currentSlide == maxItems - 1) {
    $('.slideshow-right .slider').slick('slickGoTo', -1);
    $('.slideshow-text').slick('slickGoTo', maxItems);
  } else if (currentSlide < nextSlide && currentSlide == 0 && nextSlide == maxItems - 1) {
    $('.slideshow-right .slider').slick('slickGoTo', maxItems);
    $('.slideshow-text').slick('slickGoTo', -1);
  } else {
    $('.slideshow-right .slider').slick('slickGoTo', maxItems - 1 - nextSlide);
    $('.slideshow-text').slick('slickGoTo', nextSlide);
  }
}).on("mousewheel", function (event) {
  event.preventDefault();
  if (event.deltaX > 0 || event.deltaY < 0) {
    $(this).slick('slickNext');
  } else if (event.deltaX < 0 || event.deltaY > 0) {
    $(this).slick('slickPrev');
  };
}).on('mousedown touchstart', function () {
  dragging = true;
  tracking = $('.slick-track', $slider).css('transform');
  tracking = parseInt(tracking.split(',')[5]);
  rightTracking = $('.slideshow-right .slick-track').css('transform');
  rightTracking = parseInt(rightTracking.split(',')[5]);
}).on('mousemove touchmove', function () {
  if (dragging) {
    newTracking = $('.slideshow-left .slick-track').css('transform');
    newTracking = parseInt(newTracking.split(',')[5]);
    diffTracking = newTracking - tracking;
    $('.slideshow-right .slick-track').css({ 'transform': 'matrix(1, 0, 0, 1, 0, ' + (rightTracking - diffTracking) + ')' });
  }
}).on('mouseleave touchend mouseup', function () {
  dragging = false;
});

$('.slideshow-right .slider').slick({
  swipe: false,
  vertical: true,
  arrows: false,
  infinite: true,
  speed: 950,
  cssEase: 'cubic-bezier(0.7, 0, 0.3, 1)',
  initialSlide: maxItems - 1 });

$('.slideshow-text').slick({
  swipe: false,
  vertical: true,
  arrows: false,
  infinite: true,
  speed: 900,
  cssEase: 'cubic-bezier(0.7, 0, 0.3, 1)' });
    </script>
</body>
</html>

11. By Arden

Made by Arden. Greensock animated slideshow. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="https://use.typekit.net/vms5sey.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);
* {
  box-sizing: border-box;
}

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

body {
  background-color: #000;
  font-family: "industry";
}

.slideShow {
  height: 100%;
  width: 75%;
  min-width: 750px;
  margin: 0 auto;
  overflow: visible;
}
.slideShow__container {
  height: 100%;
  width: 100%;
  list-style: none;
  display: block;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  font-size: 0;
  line-height: 0;
  position: relative;
}
.slideShow__slide {
  height: 100%;
  width: 100%;
  display: inline-block;
  position: relative;
}
.slideShow__image {
  display: block;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background-size: cover;
  background-position: center;
  position: relative;
  transform: scale(0.8);
}
.slideShow__image::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(225deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
}
.slideShow__titleWrap {
  font-size: 1rem;
  position: absolute;
  left: 4rem;
  bottom: 4rem;
  padding-bottom: 2rem;
  padding-left: 2rem;
  color: #fff;
}
.slideShow__slideTitle {
  font-weight: 300;
  z-index: 500;
  color: #fff;
  font-size: 5em;
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 1;
  margin: 0 0 0.5rem;
  opacity: 0;
}
.slideShow__slideSubTitle {
  font-size: 1.5em;
  text-transform: uppercase;
  font-family: sans-serif;
  padding-left: 0.5rem;
  font-weight: 300;
  letter-spacing: 1px;
  opacity: 0;
}
.slideShow__next, .slideShow__prev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 5em;
  line-height: 1em;
  color: #fff;
}
.slideShow__next i, .slideShow__prev i {
  display: block;
  float: left;
}
.slideShow__next {
  right: 1rem;
  cursor: pointer;
}
.slideShow__prev {
  left: 1rem;
  cursor: pointer;
  transition: opacity 0.3s ease;
  transform-origin: center;
}
.slideShow__prev.is-inactive {
  opacity: 0.3;
  cursor: default;
}
</style>
</head>
<body>
  <div class="slideShow">
  <ul class="slideShow__container">
    <li class="slideShow__slide">
      <figure class="slideShow__image" style="background-image:url(https://c2.staticflickr.com/8/7668/17188829572_53e8c45aec_h.jpg);"></figure>
      <div class="slideShow__titleWrap">
        <h2 class="slideShow__slideTitle">Barichara</h2>
        <div class="slideShow__slideSubTitle">La Abuelita</div>
      </div>
    </li>
    <li class="slideShow__slide">
      <figure class="slideShow__image" style="background-image:url(https://c2.staticflickr.com/8/7595/16575563694_5259f740ed_k.jpg);"></figure>
      <div class="slideShow__titleWrap">
        <h2 class="slideShow__slideTitle">Tayrona</h2>
        <div class="slideShow__slideSubTitle">La playa</div>
      </div>
    </li>
    <li class="slideShow__slide">
      <figure class="slideShow__image" style="background-image:url(https://c2.staticflickr.com/8/7723/17172064766_edf36b7b51_k.jpg);"></figure>
      <div class="slideShow__titleWrap">
        <h2 class="slideShow__slideTitle">Santa Marta</h2>
        <div class="slideShow__slideSubTitle">El Burro</div>
      </div>
    </li>
    <li class="slideShow__slide">
      <figure class="slideShow__image" style="background-image:url(https://c1.staticflickr.com/9/8714/17164716126_5494165d77_k.jpg);"></figure>
      <div class="slideShow__titleWrap">
        <h2 class="slideShow__slideTitle">Salento</h2>
        <div class="slideShow__slideSubTitle">La vista</div>
      </div>
    </li>
  </ul>
  <div class="slideShow__next"><i class="fa fa-angle-right"></i></div>
  <div class="slideShow__prev"><i class="fa fa-angle-left"></i></div>
</div>
<script src='//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js'></script>
<script src='//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/SplitText.min.js'></script>
      <script>
// Debounce
function debounce(a, b, c) {var d;return function () {var e = this,f = arguments;clearTimeout(d), d = setTimeout(function () {d = null, c || a.apply(e, f);}, b), c && !d && a.apply(e, f);};}

var SlideShow = function () {

  var
  slider,
  slide,
  nextButton,
  prevButton,
  slideAmount,
  sliderWidth,
  title,
  subTitle,
  clickCounter,
  slideCounter;

  var _init = function () {
    slider = document.getElementsByClassName('slideShow__container')[0];
    slide = document.getElementsByClassName('slideShow__slide');
    slideAmount = slide.length;
    nextButton = document.getElementsByClassName('slideShow__next')[0];
    prevButton = document.getElementsByClassName('slideShow__prev')[0];
    title = document.getElementsByClassName('slideShow__slideTitle');
    subTitle = document.getElementsByClassName('slideShow__slideSubTitle');
    sliderWidth = parseInt(getComputedStyle(slider).width);
    clickCounter = 0;
    slideCounter = 0;

    _eventHandlers();
    _navButtons();
    _animateSlideIn(slideCounter);
  };

  var _eventHandlers = function () {
    nextButton.addEventListener('click', _slideNext, false);
    prevButton.addEventListener('click', _slidePrev, false);
    window.addEventListener('resize', _resize, false);
  };

  var _navButtons = function () {
    if (clickCounter === 0) {
      prevButton.classList.add('is-inactive');
    } else {
      prevButton.classList.remove('is-inactive');
    }
  };

  var _slideNext = function () {
    clickCounter++;
    slideCounter = clickCounter - 1;
    if (clickCounter >= slideAmount) {
      clickCounter = 0;
      slideCounter = slideAmount - 1;
    }
    var tl = new TimelineLite();
    tl.
    add(_animateSlideOut(slideCounter)).
    to(slider, .9, { x: -clickCounter * sliderWidth, ease: Power2.easeOut }).
    add(_animateSlideIn(clickCounter));
    _navButtons();
  };

  var _slidePrev = function () {
    if (clickCounter > 0) {
      clickCounter--;

      // _getPreviousSlide(clickCounter +1)
      var tl = new TimelineLite();
      tl.
      add(_animateSlideOut(clickCounter + 1)).
      to(slider, .9, { x: '+=' + sliderWidth, ease: Power2.easeOut }, '-=0.2').
      add(_animateSlideIn(clickCounter));

    }
    _navButtons();
  };

  var _animateSlideIn = function (index) {
    var currentSlide = slide[index];
    var title = currentSlide.children[1].children[0];
    var subTitle = currentSlide.children[1].children[1];
    var image = currentSlide.children[0];

    var splitTitle = new SplitText(title);
    var revertTitle = function () {
      splitTitle.revert();
    };

    TweenLite.set(title, { perspective: 400 });

    var tl = new TimelineLite({ onComplete: revertTitle });
    tl.
    set(title, { opacity: 1 }).
    staggerFrom(splitTitle.chars, 0.8, {
      opacity: 0,
      scale: 0,
      y: 80,
      rotationX: 180,
      transformOrigin: "0% 50% -50",
      ease: Back.easeOut },
    0.03).
    fromTo(subTitle, 0.6, { y: 50, opacity: 0 }, { y: 0, opacity: 1 }, '-=0.3').
    to(image, 0.4, { scale: 1, ease: Power2.easeOut }, '-=0.6');
    return tl;
  };

  var _animateSlideOut = function (index) {
    var currentSlide = slide[index];
    var title = currentSlide.children[1].children[0];
    var subTitle = currentSlide.children[1].children[1];
    var image = currentSlide.children[0];

    var tl = new TimelineLite();
    tl.
    to(title, 0.3, { opacity: 0 }).
    to(subTitle, 0.3, { y: 50, opacity: 0 }, '-=0.3').
    to(image, 0.4, { scale: 0.8, ease: Power2.easeIn }, '-=0.3');
    return tl;
  };

  var _resize = debounce(function () {
    sliderWidth = parseInt(getComputedStyle(slider).width);
    sliderOffset = sliderWidth * clickCounter;
    slider.style.transform = 'matrix(1, 0, 0, 1, -' + sliderOffset + ', 0)';
  }, 50);

  return {
    init: _init };
}();

SlideShow.init();
    </script>
</body>
</html>