<div class="video-container layer-1">
    <div class="bg-scene">
        <div class="circle dp-n dp-md-b"></div>
        <div class="circle fill blur dp-n dp-md-b"></div>
    </div>
    <div id="video-slider" class="horizontal-slider video">
        <div class="slide video rounded">
            <img src="http://kerrymagro.com/wp-content/uploads/2016/02/Ellen-feature.jpg" alt="" class="img--bg layer-1">
            <div class="tint show-on-hover layer-2">
                <div class="quote ">
                    <h3>GIVE GOOD: YOUNGE ST. MISSION</h3>
                    <p>«Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed.»</p>
                    <div class="socials">
                        <a href="https://twitter.com/intent/tweet?url=www.starbucks.ca&text=This%20is%20a%20tween&via=starbsCAnada&hashtags=duck,bird,quack,egg,dingo" target="_blank" rel="noopener">
    <i class="fab fa-twitter"></i>
  </a>
                        <div class="facebook-share" data-quote="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed." data-hashtag="Fun">
                            <i class="fab fa-facebook"></i>
                        </div>
                        <div href="" class="copy-clipboard">
                            <input type="text" class='target' value="www.starbucks.ca/responsibility#cool">
                            <i class="fas fa-link"></i>
                            <span class="tooltiptext">Link Copied</span>
                        </div>
                        <a href="mailto:someone@theirmail.com?subject=The%20email%20subject&body=the%20email%20body">
    <i class="fas fa-envelope"></i>
  </a>
                    </div>
                    <a href="https://www.youtube.com/watch?v=w2LaeleCIs4" class="dp-n dp-lg-b" data-lity><button>Jill&#x27;s story</button></a>
                    <a href="https://www.youtube.com/watch?v=w2LaeleCIs4" target="_blank" class="dp-nb dp-lg-n"><button>Jill&#x27;s story</button></a>
                </div>
            </div>
        </div>
        <div class="slide video rounded">
            <img src="https://images04.military.com/sites/default/files/styles/full/public/media/veteran-jobs/hiring-veterans/2016/08/starbucksaprons600.jpg?itok&#x3D;PQEvZF4a" alt="" class="img--bg layer-1">
            <div class="tint show-on-hover layer-2">
                <div class="quote ">
                    <h3>GIVE GOOD: YOUNGE ST. MISSION</h3>
                    <p>«Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed.»</p>
                    <div class="socials">
                        <a href="https://twitter.com/intent/tweet?url=www.starbucks.ca&text=This%20is%20a%20tween&via=starbsCAnada&hashtags=duck,bird,quack,egg,dingo" target="_blank" rel="noopener">
    <i class="fab fa-twitter"></i>
  </a>
                        <div class="facebook-share" data-quote="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed." data-hashtag="Fun">
                            <i class="fab fa-facebook"></i>
                        </div>
                        <div href="" class="copy-clipboard">
                            <input type="text" class='target' value="www.starbucks.ca/responsibility#cool">
                            <i class="fas fa-link"></i>
                            <span class="tooltiptext">Link Copied</span>
                        </div>
                        <a href="mailto:someone@theirmail.com?subject=The%20email%20subject&body=the%20email%20body">
    <i class="fas fa-envelope"></i>
  </a>
                    </div>
                    <a href="https://www.youtube.com/watch?v=w2LaeleCIs4" class="dp-n dp-lg-b" data-lity><button>Jill&#x27;s story</button></a>
                    <a href="https://www.youtube.com/watch?v=w2LaeleCIs4" target="_blank" class="dp-nb dp-lg-n"><button>Jill&#x27;s story</button></a>
                </div>
            </div>
        </div>
        <div class="slide video rounded">
            <img src="http://www.nationmultimedia.com/img/news/2012/05/07/30181404/30181404-01.jpg" alt="" class="img--bg layer-1">
            <div class="tint show-on-hover layer-2">
                <div class="quote ">
                    <h3>GIVE GOOD: YOUNGE ST. MISSION</h3>
                    <p>«Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed.»</p>
                    <div class="socials">
                        <a href="https://twitter.com/intent/tweet?url=www.starbucks.ca&text=This%20is%20a%20tween&via=starbsCAnada&hashtags=duck,bird,quack,egg,dingo" target="_blank" rel="noopener">
    <i class="fab fa-twitter"></i>
  </a>
                        <div class="facebook-share" data-quote="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed." data-hashtag="Fun">
                            <i class="fab fa-facebook"></i>
                        </div>
                        <div href="" class="copy-clipboard">
                            <input type="text" class='target' value="www.starbucks.ca/responsibility#cool">
                            <i class="fas fa-link"></i>
                            <span class="tooltiptext">Link Copied</span>
                        </div>
                        <a href="mailto:someone@theirmail.com?subject=The%20email%20subject&body=the%20email%20body">
    <i class="fas fa-envelope"></i>
  </a>
                    </div>
                    <a href="https://www.youtube.com/watch?v=w2LaeleCIs4" class="dp-n dp-lg-b" data-lity><button>Jill&#x27;s story</button></a>
                    <a href="https://www.youtube.com/watch?v=w2LaeleCIs4" target="_blank" class="dp-nb dp-lg-n"><button>Jill&#x27;s story</button></a>
                </div>
            </div>
        </div>
        <div class="slide video rounded">
            <img src="https://www.churchmanor.com/wp-content/uploads/2018/09/Starbucks1a.jpg" alt="" class="img--bg layer-1">
            <div class="tint show-on-hover layer-2">
                <div class="quote ">
                    <h3>GIVE GOOD: YOUNGE ST. MISSION</h3>
                    <p>«Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed.»</p>
                    <div class="socials">
                        <a href="https://twitter.com/intent/tweet?url=www.starbucks.ca&text=This%20is%20a%20tween&via=starbsCAnada&hashtags=duck,bird,quack,egg,dingo" target="_blank" rel="noopener">
    <i class="fab fa-twitter"></i>
  </a>
                        <div class="facebook-share" data-quote="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed." data-hashtag="Fun">
                            <i class="fab fa-facebook"></i>
                        </div>
                        <div href="" class="copy-clipboard">
                            <input type="text" class='target' value="www.starbucks.ca/responsibility#cool">
                            <i class="fas fa-link"></i>
                            <span class="tooltiptext">Link Copied</span>
                        </div>
                        <a href="mailto:someone@theirmail.com?subject=The%20email%20subject&body=the%20email%20body">
    <i class="fas fa-envelope"></i>
  </a>
                    </div>
                    <a href="https://www.youtube.com/watch?v=w2LaeleCIs4" class="dp-n dp-lg-b" data-lity><button>Jill&#x27;s story</button></a>
                    <a href="https://www.youtube.com/watch?v=w2LaeleCIs4" target="_blank" class="dp-nb dp-lg-n"><button>Jill&#x27;s story</button></a>
                </div>
            </div>
        </div>
        <div class="slide video rounded">
            <img src="https://encrypted-tbn0.gstatic.com/images?q&#x3D;tbn:ANd9GcTkORjfmfpByibbQ1NPMiMDx3ixqit5egcAYH1REq2sy6n4kvlUPw" alt="" class="img--bg layer-1">
            <div class="tint show-on-hover layer-2">
                <div class="quote ">
                    <h3>GIVE GOOD: YOUNGE ST. MISSION</h3>
                    <p>«Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed.»</p>
                    <div class="socials">
                        <a href="https://twitter.com/intent/tweet?url=www.starbucks.ca&text=This%20is%20a%20tween&via=starbsCAnada&hashtags=duck,bird,quack,egg,dingo" target="_blank" rel="noopener">
    <i class="fab fa-twitter"></i>
  </a>
                        <div class="facebook-share" data-quote="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed." data-hashtag="Fun">
                            <i class="fab fa-facebook"></i>
                        </div>
                        <div href="" class="copy-clipboard">
                            <input type="text" class='target' value="www.starbucks.ca/responsibility#cool">
                            <i class="fas fa-link"></i>
                            <span class="tooltiptext">Link Copied</span>
                        </div>
                        <a href="mailto:someone@theirmail.com?subject=The%20email%20subject&body=the%20email%20body">
    <i class="fas fa-envelope"></i>
  </a>
                    </div>
                    <a href="https://www.youtube.com/watch?v=w2LaeleCIs4" class="dp-n dp-lg-b" data-lity><button>Jill&#x27;s story</button></a>
                    <a href="https://www.youtube.com/watch?v=w2LaeleCIs4" target="_blank" class="dp-nb dp-lg-n"><button>Jill&#x27;s story</button></a>
                </div>
            </div>
        </div>
        <div class="slide video rounded">
            <img src="http://www.optionstheedge.com/sites/default/files/field/featured-image/2018/peo_sydney_6_hh.jpg" alt="" class="img--bg layer-1">
            <div class="tint show-on-hover layer-2">
                <div class="quote ">
                    <h3>GIVE GOOD: YOUNGE ST. MISSION</h3>
                    <p>«Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed.»</p>
                    <div class="socials">
                        <a href="https://twitter.com/intent/tweet?url=www.starbucks.ca&text=This%20is%20a%20tween&via=starbsCAnada&hashtags=duck,bird,quack,egg,dingo" target="_blank" rel="noopener">
    <i class="fab fa-twitter"></i>
  </a>
                        <div class="facebook-share" data-quote="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed." data-hashtag="Fun">
                            <i class="fab fa-facebook"></i>
                        </div>
                        <div href="" class="copy-clipboard">
                            <input type="text" class='target' value="www.starbucks.ca/responsibility#cool">
                            <i class="fas fa-link"></i>
                            <span class="tooltiptext">Link Copied</span>
                        </div>
                        <a href="mailto:someone@theirmail.com?subject=The%20email%20subject&body=the%20email%20body">
    <i class="fas fa-envelope"></i>
  </a>
                    </div>
                    <a href="https://www.youtube.com/watch?v=w2LaeleCIs4" class="dp-n dp-lg-b" data-lity><button>Jill&#x27;s story</button></a>
                    <a href="https://www.youtube.com/watch?v=w2LaeleCIs4" target="_blank" class="dp-nb dp-lg-n"><button>Jill&#x27;s story</button></a>
                </div>
            </div>
        </div>
        <div class="slide video rounded">
            <img src="https://eprretailnews.com/wp-content/uploads/2015/04/Starbucks-invested-more-than-3.7-million-in-Origin-Community-Grants-in-2014-to-help-support-coffee-farming-communities.jpg" alt="" class="img--bg layer-1">
            <div class="tint show-on-hover layer-2">
                <div class="quote ">
                    <h3>GIVE GOOD: YOUNGE ST. MISSION</h3>
                    <p>«Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed.»</p>
                    <div class="socials">
                        <a href="https://twitter.com/intent/tweet?url=www.starbucks.ca&text=This%20is%20a%20tween&via=starbsCAnada&hashtags=duck,bird,quack,egg,dingo" target="_blank" rel="noopener">
    <i class="fab fa-twitter"></i>
  </a>
                        <div class="facebook-share" data-quote="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed." data-hashtag="Fun">
                            <i class="fab fa-facebook"></i>
                        </div>
                        <div href="" class="copy-clipboard">
                            <input type="text" class='target' value="www.starbucks.ca/responsibility#cool">
                            <i class="fas fa-link"></i>
                            <span class="tooltiptext">Link Copied</span>
                        </div>
                        <a href="mailto:someone@theirmail.com?subject=The%20email%20subject&body=the%20email%20body">
    <i class="fas fa-envelope"></i>
  </a>
                    </div>
                    <a href="https://www.youtube.com/watch?v=w2LaeleCIs4" class="dp-n dp-lg-b" data-lity><button>Jill&#x27;s story</button></a>
                    <a href="https://www.youtube.com/watch?v=w2LaeleCIs4" target="_blank" class="dp-nb dp-lg-n"><button>Jill&#x27;s story</button></a>
                </div>
            </div>
        </div>
    </div>
    <div class="arrow">
        <div class="previous video-previous">
            <svg class="  dp-md-n">
        <use xlink:href="#icon-arrow"></use>
      </svg>
        </div>
        <div class="next video-next ">
            <svg class=" dp-md-n">
        <use xlink:href="#icon-arrow"></use>
      </svg>
        </div>
        <img class="video-previous dp-n dp-md-b" src="../../assets/img/Arrow-icon-left.png" alt="">
        <img class="video-next dp-n dp-md-b" src="../../assets/img/Arrow-icon.png" alt="">
    </div>
</div>
<div class="video-container layer-1">
  <div class="bg-scene">
    <div class="circle dp-n dp-md-b"></div>
    <div class="circle fill blur dp-n dp-md-b"></div>
  </div>
  <div id="video-slider" class="horizontal-slider video">
    {{#each sliderData}}
    <div class="slide video rounded">
      <img src="{{slideData.backgroundImg}}" alt="" class="img--bg layer-1">
      <div class="tint show-on-hover layer-2">
        {{render '@quote--videofr' slideData merge=true}}
      </div>
    </div>
    {{/each}}
  </div>
  <div class="arrow">
    {{!-- mobile --}}
    <div class="previous video-previous">
      <svg class="  dp-md-n">
        <use xlink:href="#icon-arrow"></use>
      </svg>
    </div>
    <div class="next video-next ">
      <svg class=" dp-md-n">
        <use xlink:href="#icon-arrow"></use>
      </svg>
    </div>
    {{!-- desktop --}}
    <img class="video-previous dp-n dp-md-b" src="{{path '/assets/img/Arrow-icon-left.png'}}" alt="">
    <img class="video-next dp-n dp-md-b" src="{{path '/assets/img/Arrow-icon.png'}}" alt="">
  </div>
</div>
{
  "sliderData": [
    {
      "slideData": {
        "backgroundImg": "http://kerrymagro.com/wp-content/uploads/2016/02/Ellen-feature.jpg",
        "slideTitle": "GIVE GOOD: YOUNGE ST. MISSION",
        "partnerName": "Tim",
        "partnerLocation": "Toronto",
        "partnerQuote": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed.",
        "mediaSrc": "https://www.youtube.com/watch?v=w2LaeleCIs4"
      }
    },
    {
      "slideData": {
        "backgroundImg": "https://images04.military.com/sites/default/files/styles/full/public/media/veteran-jobs/hiring-veterans/2016/08/starbucksaprons600.jpg?itok=PQEvZF4a",
        "slideTitle": "GIVE GOOD: YOUNGE ST. MISSION",
        "partnerName": "Greg",
        "partnerLocation": "Vancouver",
        "partnerQuote": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed.",
        "mediaSrc": "https://www.youtube.com/watch?v=w2LaeleCIs4"
      }
    },
    {
      "slideData": {
        "backgroundImg": "http://www.nationmultimedia.com/img/news/2012/05/07/30181404/30181404-01.jpg",
        "slideTitle": "GIVE GOOD: YOUNGE ST. MISSION",
        "partnerName": "Sammy",
        "partnerLocation": "Kingston",
        "partnerQuote": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed.",
        "mediaSrc": "https://www.youtube.com/watch?v=w2LaeleCIs4"
      }
    },
    {
      "slideData": {
        "backgroundImg": "https://www.churchmanor.com/wp-content/uploads/2018/09/Starbucks1a.jpg",
        "slideTitle": "GIVE GOOD: YOUNGE ST. MISSION",
        "partnerName": "Richard",
        "partnerLocation": "Richmond",
        "partnerQuote": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed.",
        "mediaSrc": "https://www.youtube.com/watch?v=w2LaeleCIs4"
      }
    },
    {
      "slideData": {
        "backgroundImg": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTkORjfmfpByibbQ1NPMiMDx3ixqit5egcAYH1REq2sy6n4kvlUPw",
        "slideTitle": "GIVE GOOD: YOUNGE ST. MISSION",
        "partnerName": "Souvi",
        "partnerLocation": "Haul",
        "partnerQuote": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed.",
        "mediaSrc": "https://www.youtube.com/watch?v=w2LaeleCIs4"
      }
    },
    {
      "slideData": {
        "backgroundImg": "http://www.optionstheedge.com/sites/default/files/field/featured-image/2018/peo_sydney_6_hh.jpg",
        "slideTitle": "GIVE GOOD: YOUNGE ST. MISSION",
        "partnerName": "Jeanette",
        "partnerLocation": "YellowKnife",
        "partnerQuote": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed.",
        "mediaSrc": "https://www.youtube.com/watch?v=w2LaeleCIs4"
      }
    },
    {
      "slideData": {
        "backgroundImg": "https://eprretailnews.com/wp-content/uploads/2015/04/Starbucks-invested-more-than-3.7-million-in-Origin-Community-Grants-in-2014-to-help-support-coffee-farming-communities.jpg",
        "slideTitle": "GIVE GOOD: YOUNGE ST. MISSION",
        "partnerName": "Sarah",
        "partnerLocation": "Regina",
        "partnerQuote": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed.",
        "mediaSrc": "https://www.youtube.com/watch?v=w2LaeleCIs4"
      }
    }
  ],
  "commitmentImageSliderData": [
    {
      "commitmentImageSlideData": {
        "mainImgSrc": "https://images.glaciermedia.ca/polopoly_fs/1.23472777.1540299694!/fileImage/httpImage/image.jpg_gen/derivatives/landscape_804/starbucks-5e1989ea-d6c1-11e8-a10f-b51546b10756-jpg.jpg",
        "mainImgAlt": null,
        "subImg1Src": null,
        "subImg1Alt": null,
        "subImg2Src": null,
        "subImg2Alt": null,
        "subImg3Src": null,
        "subImg3Alt": null,
        "lableLinkSrc": "www.starbucks.ca",
        "lableLinkText": "Starbucks is committed to rescuing 100% of available food for donation"
      }
    },
    {
      "commitmentImageSlideData": {
        "mainImgSrc": "https://thumbs.mic.com/Mjk1YmZkMDkwZSMvajdmc0JIYjZRMnJrcXl1OWplWWhLQUhsQUNZPS81N3g0ODoxMzcxeDcyNi84MDB4NDUwL2ZpbHRlcnM6Zm9ybWF0KGpwZWcpOnF1YWxpdHkoODApL2h0dHBzOi8vczMuYW1hem9uYXdzLmNvbS9wb2xpY3ltaWMtaW1hZ2VzL3VqeDl5azRvZXJyczJobDdhcXRrejhwb2Z4dG9qeTBsN211Z2Q5emJnZGx4Z2h3ZWptYmpnenpxaDJwcGoweHouanBn.jpg",
        "mainImgAlt": null,
        "subImg1Src": null,
        "subImg1Alt": null,
        "subImg2Src": null,
        "subImg2Alt": null,
        "subImg3Src": null,
        "subImg3Alt": null,
        "lableLinkSrc": "www.starbucks.ca",
        "lableLinkText": "Starbucks is committed to rescuing 100% of available food for donation"
      }
    },
    {
      "commitmentImageSlideData": {
        "mainImgSrc": "https://media.glassdoor.com/l/b0/58/4e/00/starbucks-partners-employees.jpg",
        "mainImgAlt": null,
        "subImg1Src": null,
        "subImg1Alt": null,
        "subImg2Src": null,
        "subImg2Alt": null,
        "subImg3Src": null,
        "subImg3Alt": null,
        "lableLinkSrc": "www.starbucks.ca",
        "lableLinkText": "Starbucks is committed to rescuing 100% of available food for donation"
      }
    },
    {
      "commitmentImageSlideData": {
        "mainImgSrc": "https://frontnews.eu/contents/news/39505/images/resize_JMiFdyH7c6EpANKCequjQgV3tT9avzwD_980x590.jpg",
        "mainImgAlt": null,
        "subImg1Src": null,
        "subImg1Alt": null,
        "subImg2Src": null,
        "subImg2Alt": null,
        "subImg3Src": null,
        "subImg3Alt": null,
        "lableLinkSrc": "www.starbucks.ca",
        "lableLinkText": "Starbucks is committed to rescuing 100% of available food for donation"
      }
    },
    {
      "commitmentImageSlideData": {
        "mainImgSrc": "https://stories.starbucks.com/wp-content/uploads/2019/01/Inclusion_Academy_for_retail_resized.jpg",
        "mainImgAlt": null,
        "subImg1Src": null,
        "subImg1Alt": null,
        "subImg2Src": null,
        "subImg2Alt": null,
        "subImg3Src": null,
        "subImg3Alt": null,
        "lableLinkSrc": "www.starbucks.ca",
        "lableLinkText": "Starbucks is committed to rescuing 100% of available food for donation"
      }
    }
  ]
}
  • Content:
    .horizontal-slider {
      width: 100vw;
      overflow: hidden;
      padding: 15 0;
    
      .slick-track {
        width: 100vw;
        overflow: hidden;
        padding: 15px 0 10px;
      }
    
      .slick-initialized {
    
        /* the slides */
        .slick-slide {
          margin: 0 8px;
        }
    
        /* the parent */
        .slick-list {
          margin: 0 -8px;
        }
      }
    
      .slick-prev,
      .slick-next {
        top: auto;
        bottom: 5px;
    
        &:before {
          color: $green;
        }
      }
    
      &.mobile-commitment-slider {
        align-content: left;
        transform-origin: center center;
        resize: both;
        position: relative;
    
        .slick-track {
          padding-top: 25px;
        }
    
        .slick-initialized {
    
          /* the slides */
          .slick-slide {
            margin: 0 15px;
          }
    
          /* the slides */
          .slide:after {
            position: relative;
            right: -10px;
            width: 10px;
            height: 100%;
          }
        }
      }
    }
    
    .commitment-container-mobile {
      $timeline-grey: lighten(grey, 15%);
      position: relative;
      overflow: hidden;
      transform-origin: 0% 0%;
      transform: scale (1);
      transition: transform 150ms;
      max-width: 100vw;
    
      .slide {
        padding-left: 25px;
        max-width: 300px;
      }
    
      .next,
      .previous {
        $size: 40px;
        width: $size;
        height: $size;
        position: absolute;
        z-index: 99;
        display: flex;
        justify-content: center;
        align-items: center;
    
        svg {
          fill: $green;
          width: 18px;
          height: 10px;
        }
      }
    
      .next {
        top: -5px;
        left: 20px;
      }
    
      .previous {
        bottom: 5px;
        left: 35px;
      }
    
      .time-line {
        position: relative;
        z-index: 0;
        top: 300px;
        background-color: $timeline-grey;
        height: 1px;
        width: 100%;
    
        .circle {
          $size: 12px;
          position: absolute;
          left: -6px;
          top: -6px;
          border: 1px solid $timeline-grey;
          background-color: $light;
          width: $size;
          height: $size;
        }
      }
    
      @media all and (min-width: 450px) and (max-width: 550px) {
        transform: scale(1.1)
      }
    
      @media all and (min-width: 551px) and (max-width: 650px) {
        transform: scale(1.2)
      }
    
      @media all and (min-width: 651px) and (max-width: 780px) {
        transform: scale(1.4)
      }
    }
    
    .video-container {
      position: relative;
      padding: 15px 0;
    
      img {
    
        &.video-previous,
        &.video-next {
          position: absolute;
          width: 0;
          height: 0;
        }
      }
    
      .show-on-hover {
        &:hover {
          opacity: 0;
        }
      }
    
      .bg-scene {
        @extend %absolute-fill;
        z-index: 0;
    
        .circle {
          $size: 40px;
          width: $size;
          height: $size;
          position: absolute;
    
          &:first-of-type {
            border: 2px solid $green;
            top: -50px;
            left: 30%;
          }
    
          &:last-of-type {
            top: 15px;
            right: 30%;
            opacity: 0.9;
          }
        }
      }
    
      .arrow {
        position: relative;
        bottom: -10px;
        width: 300px;
        margin: 0 auto;
    
    
        .previous,
        .next {
          $size: 50px;
          width: $size;
          height: $size;
          position: absolute;
          display: flex;
          justify-content: center;
          align-items: center;
          top: -15px;
    
          svg {
            fill: $green;
            width: 18px;
            height: 10px;
          }
        }
    
    
        .previous {
    
          left: 0;
    
          svg {
            transform: rotate(180deg);
          }
        }
    
        .next {
          right: 0;
        }
    
        @include respond-above(md) {
          width: 100%;
          margin: 0 auto;
    
          .previous,
          .next {
            display: none;
          }
    
          svg {
            width: 0;
            height: 0;
          }
    
          img {
            $distance: 20px;
    
            &.video-previous,
            &.video-next {
              top: -254px;
              position: absolute;
              margin: 0;
              height: auto;
              width: 47px;
              background: #fff;
              padding: 11px 15px;
              border-radius: 50%;
              border: 2px solid $green;
    
              &:hover {
                cursor: pointer;
              }
            }
    
            &.video-previous {
              left: $distance;
            }
    
            &.video-next {
              right: $distance;
            }
          }
        }
      }
    
      @include respond-above(md) {
        .show-on-hover {
          &:hover {
            opacity: 1;
          }
        }
      }
    }
    
    .fr {
      .video-container {
        button {
          font-size: 72%;
        }
      }
    }
  • URL: /components/raw/horizontal-slider/_horizontal-slider.scss
  • Filesystem Path: structures/03-organisms/horizontal-slider/_horizontal-slider.scss
  • Size: 4.2 KB

There are no notes for this item.