.content
  .slider.single-item
    %div.quote-container
      .portrait.octogon
        %img{src: "https://picsum.photos/id/447/140/140", alt:""}
      .quote
        %blockquote
          %p Meditation shabby chic master cleanse banh mi Godard. Asymmetrical Wes Anderson Intelligentsia you probably haven't heard of them.
          %cite 
            %span Kristi McSweeney
            %br
            Thundercats twee
            %br
            Austin selvage beard
    %div.quote-container
      .portrait.octogon
        %img{src: "https://picsum.photos/id/550/140/140", alt: ""}
      .quote
        %blockquote
          %p Bespoke occupy cred seitan. Austin street art freegan Truffaut leggings aesthetic, salvia chia Brooklyn flexitarian. Single-origin coffee before they sold out health goth, cornhole irony keffiyeh Austin taxidermy mlkshk blog trust fund banh mi you probably haven't heard of them.
          %cite
            %span Dina Anderson
            %br
            Blue Bottle keffiyeh
            %br
            Sartorial locavore Schlitz ennui
%svg
  %defs
    %clipPath#octogon{clipPathUnits: "objectBoundingBox"}
      %polygon{points: "0.50001 0.00000, 0.61887 0.06700, 0.75011 0.06721, 0.81942 0.18444, 0.93300 0.25001, 0.93441 0.38641, 1.00000 0.49999, 0.93300 0.61887, 0.93300 0.75002, 0.81556 0.81944, 0.74999 0.93302, 0.61357 0.93444, 0.50001 1.00000, 0.38118 0.93302, 0.24998 0.93302, 0.18056 0.81556, 0.06700 0.74899, 0.06559 0.61359, 0.00000 0.49999, 0.06700 0.38111, 0.06700 0.25001, 0.18440 0.18058, 0.25043 0.06700, 0.38641 0.06559, 0.50001 0.00000"}
      

html {
  height: 100%;
}

body {
  background: linear-gradient(130deg, #07d9a3, #048fee);
  background-size: 400% 400%;

  -webkit-animation: gradient 16s ease infinite;
  -moz-animation: gradient 16s ease infinite;
  animation: gradient 16s ease infinite;
}

.content {
  margin: auto;
  padding: 20px;
  width: 80%;
  max-width: 1200px;
  min-width: 300px;
}

.slick-slider {
  margin: 30px auto 50px;
}

.slick-prev,
.slick-next {
  color: white;
  opacity: 1;
  height: 40px;
  width: 40px;
  margin-top: -20px;
  
  path {
    fill: rgba(255,255,255, 0.4);
  }
  
  &:hover {
    path {
      fill: #FFFFFF;
    }
  }
}

.slick-prev {
  left: -35px;
}

.slick-next {
  right: -35px;
}

.slick-prev:before, 
.slick-next:before {
  content: none;
}

.slick-dots li button:before {
  color: rgba(255,255,255, 0.4);
  opacity: 1;
  font-size: 8px;
}

.slick-dots li.slick-active button:before {
  color: #FFFFFF;
}

.quote-container {
  min-height: 200px;
  color: #666666;
  font-size: 36px;
  margin: 0 20px;
  position: relative;
  
  &:hover {
    cursor: grab;
  }
  
  .portrait {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    
    height: 140px;
    width: 140px;
    //border-radius: 50%;
    overflow: hidden;
    
    img {
      display: block;
      height: auto;
      width: 100%;
    }
  }
  
  .quote {
    position: relative;
    z-index: 600;
    padding: 40px 0 40px 180px;
    margin: 0;

    font-size: 20px;
    font-style: italic;
    line-height: 1.4 !important;
    font-family: Calibri;
    color: white;
    
    p {
      position: relative;
      margin-bottom: 20px;
      
      &:first-child:before {
        content: '\201C';
        color: rgba(255, 255, 255, 0.44);
        font-size: 7.5em;
        font-weight: 700;
        opacity: 1;
        position: absolute;
        top: -.4em;
        left: -.2em;    
        text-shadow: none;
        z-index: -10;
      }
    }
    
    cite {
      display: block;
      font-size: 14px;
      
      span {
        font-size: 16px;
        font-style: normal;
        letter-spacing: 1px;
        text-transform: uppercase;
      }
    }
  }
}

.dragging .quote-container {
  cursor: grabbing;
}

.octogon {
  -webkit-clip-path: polygon(50.00% 0.00%, 38.11% 6.70%, 24.99% 6.72%, 18.06% 18.44%, 6.70% 25.00%, 6.56% 38.64%, 0.00% 50.00%, 6.70% 61.89%, 6.70% 75.00%, 18.44% 81.94%, 25.00% 93.30%, 38.64% 93.44%, 50.00% 100.00%, 61.88% 93.30%, 75.00% 93.30%, 81.94% 81.56%, 93.30% 74.90%, 93.44% 61.36%, 100.00% 50.00%, 93.30% 38.11%, 93.30% 25.00%, 81.56% 18.06%, 74.96% 6.70%, 61.36% 6.56%, 50.00% 0.00%);
  clip-path: url(#octogon);
  height: 140px;
    width: 140px;
}


@-webkit-keyframes gradient {
    0%{background-position:5% 0%}
    50%{background-position:96% 100%}
    100%{background-position:5% 0%}
}
@-moz-keyframes gradient {
    0%{background-position:5% 0%}
    50%{background-position:96% 100%}
    100%{background-position:5% 0%}
}
@keyframes gradient { 
    0%{background-position:5% 0%}
    50%{background-position:96% 100%}
    100%{background-position:5% 0%}
}

var prevButton = '<button type="button" data-role="none" class="slick-prev" aria-label="prev"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" version="1.1"><path fill="#FFFFFF" d="M 16,16.46 11.415,11.875 16,7.29 14.585,5.875 l -6,6 6,6 z" /></svg></button>',
    nextButton = '<button type="button" data-role="none" class="slick-next" aria-label="next"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#FFFFFF" d="M8.585 16.46l4.585-4.585-4.585-4.585 1.415-1.415 6 6-6 6z"></path></svg></button>';

$('.single-item').slick({
  infinite: true,
  dots: true,
  autoplay: true,
  autoplaySpeed: 4000,
  speed: 1000,
  cssEase: 'ease-in-out',
  prevArrow: prevButton,
  nextArrow: nextButton
});

$('.quote-container').mousedown(function(){
  $('.single-item').addClass('dragging');
});
$('.quote-container').mouseup(function(){
  $('.single-item').removeClass('dragging');
});