/* css needed for reaveal-fly anim on scroll. 
   These are all element that will be animated.
   These selectors needs to match the ones in reveal-fly.js */
.shopify-section--image-with-text-overlay .prose,
.shopify-section--rich-text .prose,
.shopify-section--collection-list .shopify-block,
.shopify-section--featured-collections .featured-collections-header,
.shopify-section--featured-collections .product-card,
.shopify-section--newsletter .container,
.product .product-gallery,
.product .product-info__block-list .product-info__block-item,
.shopify-section--faq .section-header,
.shopify-section--faq .accordion,
.shopify-section--featured-product-list .container,
.shopify-section--specifications .section-split__column,
.shopify-section--multi-column .container,
.shopify-section--before-after-image .container,
.shopify-section--products-with-image .products-with-image__image-wrapper,
.shopify-section--products-with-image .product-card,
.shopify-section--blog-post-banner .content-box,
.shopify-section--media-blocks media-blocks,
.shopify-section--text-with-media .section-split__column,
.shopify-section--blog-posts .section-header,
.shopify-section--blog-posts .floating-controls-container,
.shopify-section--contact .prose,
.shopify-section--contact .social-media,
.shopify-section--contact .form,
.shopify-section--text-with-icons .section-header,
.shopify-section--text-with-icons .text-with-icons,
.shopify-section--text-with-icons .scroll-marker-group,
.shopify-section--testimonials .testimonials,
.shopify-section--dynamic-grid .dynamic-grid__cell ,
.shopify-section--links-with-image .section-split,
.shopify-section--links-with-image .container {
    &.is-visible {
        transition: transform 600ms cubic-bezier(0.455, 0.03, 0.515, 0.955), opacity 300ms ease;
        transition-delay: 400ms;
    }
    &:not(.is-visible) {
        opacity: 0!important;
        transform: translateY(100px)!important;
    }
}