/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 64:0 Unexpected "{"
Line 64:1 Expected identifier but found "%"
Line 65:2 Unexpected "{"
Line 65:3 Expected identifier but found "%"
Line 71:2 Unexpected "{"
Line 71:3 Expected identifier but found "%"
Line 73:12 Unexpected "{"
Line 73:21 Expected ":"
... and 445 more hidden warnings

**/
{%- liquid 

  assign section_width = section.settings.section_width
  assign section_width_mobile = section.settings.section_width_mobile
  assign top_padding = section.settings.top_padding
  assign bottom_padding = section.settings.bottom_padding
  assign background_color = section.settings.background_color

  assign heading = section.settings.heading
  assign heading_size = section.settings.heading_size
  assign heading_color = section.settings.heading_color
  assign heading_font_url = section.settings.heading_font_url
  assign heading_letter = section.settings.heading_letter
  assign heading_mb = section.settings.heading_mb

  assign description = section.settings.description
  assign description_size = section.settings.description_size
  assign description_color = section.settings.description_color
  assign description_letter = section.settings.description_letter
  assign description_mb = section.settings.description_mb

  assign button_text = section.settings.button_text
  assign button_url = section.settings.button_url
  assign button_new_tab = section.settings.button_new_tab
  assign button_bg_color = section.settings.button_bg_color
  assign button_text_color = section.settings.button_text_color
  assign button_radius = section.settings.button_radius
  assign button_bottom_margin = section.settings.button_bottom_margin
  assign button_width = section.settings.button_width
  assign button_height = section.settings.button_height
  assign button_text_size = section.settings.button_text_size
  assign grayscale_hover_effect = section.settings.grayscale_hover_effect

  assign image_height_desktop = section.settings.image_height_desktop
  assign image_height_mobile = section.settings.image_height_mobile
  assign image_radius = section.settings.image_radius
  assign image_width_desktop = section.settings.image_width_desktop
  assign image_width_mobile = section.settings.image_width_mobile
  assign image_shadow_intensity = section.settings.image_shadow_intensity

  assign scrolling_speed = section.settings.scrolling_speed
  assign space_below_heading = section.settings.space_below_heading
  assign slider_direction = section.settings.slider_direction
  assign pause_hover = section.settings.pause_hover
  assign space_between_images_mobile = section.settings.space_between_images_mobile
  assign space_between_images = section.settings.space_between_images
-%}

{%- style -%}
  {% if heading_font_url != blank %}
  @font-face {
    font-family: 'CustomHeadingFont';
    src: url('{{ heading_font_url }}');
    font-display: swap;
  }
  {% endif %}
  
  .section-{{ section.id }} {
    margin-top: {{ top_padding }}px;
    margin-bottom: {{ bottom_padding }}px;
    background-color: {{ background_color }};
  }
  
  .section-{{ section.id }}-settings {
    margin: 0 auto;
    padding-left: {{ section_width_mobile }}rem;
    padding-right: {{ section_width_mobile }}rem;
    position: relative;
  }

  .onhow-scrolling-heading-{{ section.id }} {
    margin: 0;
    margin-bottom: {{ heading_mb }}px;
    font-size: {{ heading_size | times: 0.85 }}px;
    color: {{ heading_color }};
    letter-spacing: {{ heading_letter }}px;
    text-transform: unset;
    text-align: center;
    {% if heading_font_url != blank %}
    font-family: 'CustomHeadingFont', sans-serif;
    {% endif %}
  }

  .onhow-scrolling-description-{{ section.id }} {
    text-align: center;
    margin-bottom: {{ description_mb }}px;
  }

  .onhow-scrolling-description-{{ section.id }} p,
  .onhow-scrolling-description-{{ section.id }} a,
  .onhow-scrolling-description-{{ section.id }} li {
    margin: 0px;
    font-size: {{ description_size | times: 0.85 }}px;
    letter-spacing: {{ description_letter }}px;
    color: {{ description_color }};
  }

  .onhow-scrolling-button-{{ section.id }} {
    display: inline-flex;
    text-align: center;
    padding: 12px 24px;
    margin-bottom: {{ button_bottom_margin | times: 0.75 | round: 0 }}px;
    background-color: {{ button_bg_color }};
    color: {{ button_text_color }};
    text-decoration: none;
    border-radius: {{ button_radius | times: 0.85 | round: 0 }}px;
    font-size: {{ button_text_size | times: 0.85 }}px;
    font-weight: 500;
    width: {{ button_width | times: 0.85 }}px;
    height: {{ button_height | times: 0.85 }}px;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    cursor: pointer;
  }

  .onhow-scrolling-button-container-{{ section.id }} {
    text-align: center;
    margin-bottom: {{ button_bottom_margin | times: 0.75 | round: 0 }}px;
  }

  .onhow-scrolling-slider-{{ section.id }} {
    margin-top: {{ space_below_heading | times: 0.75 | round: 0 | minus: 5 }}px;
  }

  .onhow-scrolling-slide-{{ section.id }} {
    height: {{ image_height_mobile }}px;
    width: 100%;
    flex: 0 0 {{ image_width_mobile }}px;
    transition: all 0.3s ease;
  }

  
  .onhow-scrolling-slide-{{ section.id }} img,
  .onhow-scrolling-slide-{{ section.id }} svg {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: {{ image_radius }}px;
    transition: all 0.3s ease;
    {% if image_shadow_intensity > 0 %}
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, {{ image_shadow_intensity | divided_by: 100.0 }});
    {% endif %}
  }

  .onhow-scrolling-slide-{{ section.id }}:hover img,
  .onhow-scrolling-slide-{{ section.id }}:hover svg {
    {% if image_shadow_intensity > 0 %}
      box-shadow: 0 8px 25px -5px rgba(0, 0, 0, {{ image_shadow_intensity | times: 1.5 | divided_by: 100.0 }});
    {% endif %}
  }

  {% if grayscale_hover_effect %}
  .marquee-horizontal-{{ section.id }}:hover .onhow-scrolling-slide-{{ section.id }} img,
  .marquee-horizontal-{{ section.id }}:hover .onhow-scrolling-slide-{{ section.id }} svg {
    filter: grayscale(100%);
  }

  .marquee-horizontal-{{ section.id }}:hover .onhow-scrolling-slide-{{ section.id }}:hover img,
  .marquee-horizontal-{{ section.id }}:hover .onhow-scrolling-slide-{{ section.id }}:hover svg {
    filter: grayscale(0%);
  }
  {% endif %}

  .onhow-scrolling-slide-{{ section.id }} svg {
    background-color: #a0a0a0;
  }

  .marquee-horizontal-{{ section.id }} {
      position: relative;
      z-index: 2;
      display: inline-flex;
      overflow: hidden;
      width: 100%;
      padding-top: 5px;
      -webkit-box-pack: start;
      -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
  }

  html[dir="rtl"] .marquee-horizontal-{{ section.id }} {
    flex-direction: row-reverse;
  }

  .track-horizontal-{{section.id}} {
      padding-left: {{ space_between_images_mobile }}px;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      flex-shrink: 0;
      width: calc(({{ image_width_mobile }}px * {{ section.blocks.size }}) + ({{ space_between_images_mobile }}px * {{ section.blocks.size }}));
      gap: {{ space_between_images_mobile }}px;
      -webkit-box-pack: start;
      -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      white-space: nowrap;
      will-change: transform;
      animation: marquee-horizontal-{{ slider_direction }} {{ scrolling_speed | times: 1000 | round: 0 }}ms linear infinite;
  }

  @keyframes marquee-horizontal-left {
    0% {
        transform: translateZ(0);
        visibility: visible;
    }
    
    100% {
        transform: translate3d(-100%,0,0);
    }
  }

  @keyframes marquee-horizontal-right {
    0% {
        transform: translate3d(-100%,0,0);
        visibility: visible;
    }
    
    100% {
        transform: translateZ(0);
    }
  }
  
  @media(min-width: 1024px) {

    .section-{{ section.id }} {
      margin-top: {{ top_padding }}px;
      margin-bottom: {{ bottom_padding }}px;
    }
    
    .section-{{ section.id }}-settings {
      padding-left: {{ section_width }}rem;
      padding-right: {{ section_width }}rem;
    }

     .onhow-scrolling-heading-{{ section.id }} {
      font-size: {{ heading_size }}px;
    }

    .onhow-scrolling-description-{{ section.id }} p,
    .onhow-scrolling-description-{{ section.id }} a,
    .onhow-scrolling-description-{{ section.id }} li {
      font-size: {{ description_size }}px;
    }

    .onhow-scrolling-button-{{ section.id }} {
      padding: 15px 30px;
      font-size: {{ button_text_size }}px;
      border-radius: {{ button_radius }}px;
      width: {{ button_width }}px;
      height: {{ button_height }}px;
    }

    .onhow-scrolling-button-container-{{ section.id }} {
      margin-bottom: {{ button_bottom_margin }}px;
    }

    .onhow-scrolling-slider-{{ section.id }} {
      margin-top: {{ space_below_heading | minus: 8 }}px;
    }

    .marquee-horizontal-{{ section.id }} {
      padding-top: 8px;
    }

    .onhow-scrolling-slide-{{ section.id }} {
      height: {{ image_height_desktop }}px;
      flex: 0 0 {{ image_width_desktop }}px;
    }


    .track-horizontal-{{section.id}} {
      padding-left: {{ space_between_images }}px;
      width: calc(({{ image_width_desktop }}px * {{ section.blocks.size }}) + ({{ space_between_images }}px * {{ section.blocks.size }}));
      gap: {{ space_between_images }}px;
    }

    {% if pause_hover %}
      .marquee-horizontal-{{ section.id }}:hover .track-horizontal-{{section.id}} {
         animation-play-state: paused 
      }
    {% endif %}
    
  }
  
{%- endstyle -%}

{% comment %}
<!-- Designed by OnHOW YouTube Channel - Anas El Medlaoui -->
{% endcomment %}

<div class="section-{{ section.id }} onhow-scrolling-{{ section.id }}">
    <div class="section-{{ section.id }}-settings onhow-scrolling-body-{{ section.id }}">
      {% if heading != blank %}
        <h2 class="onhow-scrolling-heading-{{ section.id }}">
          {{ heading }}
        </h2>
      {% endif %}
      {% if description != blank %}
        <div class="onhow-scrolling-description-{{ section.id }}">
          {{ description }}
        </div>
      {% endif %}
      {% if button_text != blank %}
        <div class="onhow-scrolling-button-container-{{ section.id }}">
          <{% if button_url != blank %}a href="{{ button_url }}" {% if button_new_tab %}target="_blank" rel="noopener"{% endif %}{% else %}div{% endif %} class="onhow-scrolling-button-{{ section.id }}">
            {{ button_text }}
          </{% if button_url != blank %}a{% else %}div{% endif %}>
        </div>
      {% endif %}
      <div class="onhow-scrolling-slider-{{ section.id }}">
        <div class="marquee-horizontal-{{ section.id }}">
          <div class="track-horizontal-{{section.id}}">
            {% for block in section.blocks %}
              <{% if block.settings.url != blank %}a href="{{ block.settings.url }}" {% if block.settings.open_new_tab %}target="_blank" rel="noopener"{% endif %}{% else %}div{% endif %} class="onhow-scrolling-slide-{{ section.id }}">
                {% if block.settings.image != blank %}
                  <img src="{{ block.settings.image | image_url }}" alt="{{ block.settings.image.alt }}" loading="lazy">
                {% else %}
                  {{ 'image' | placeholder_svg_tag }}
                {% endif %}
              </{% if block.settings.url != blank %}a{% else %}div{% endif %}>
            {% endfor %}
          </div>
          <div class="track-horizontal-{{section.id}}">
            {% for block in section.blocks %}
              <{% if block.settings.url != blank %}a href="{{ block.settings.url }}"{% else %}div{% endif %} class="onhow-scrolling-slide-{{ section.id }}">
                {% if block.settings.image != blank %}
                  <img src="{{ block.settings.image | image_url }}" alt="{{ block.settings.image.alt }}" {% if lazy %}loading="lazy"{% endif %}>
                {% else %}
                  {{ 'image' | placeholder_svg_tag }}
                {% endif %}
              </{% if block.settings.url != blank %}a{% else %}div{% endif %}>
            {% endfor %}
          </div>
          <div class="track-horizontal-{{section.id}}">
            {% for block in section.blocks %}
              <{% if block.settings.url != blank %}a href="{{ block.settings.url }}"{% else %}div{% endif %} class="onhow-scrolling-slide-{{ section.id }}">
                {% if block.settings.image != blank %}
                  <img src="{{ block.settings.image | image_url }}" alt="{{ block.settings.image.alt }}" {% if lazy %}loading="lazy"{% endif %}>
                {% else %}
                  {{ 'image' | placeholder_svg_tag }}
                {% endif %}
              </{% if block.settings.url != blank %}a{% else %}div{% endif %}>
            {% endfor %}
          </div>
          <div class="track-horizontal-{{section.id}}">
             {% for block in section.blocks %}
              <{% if block.settings.url != blank %}a href="{{ block.settings.url }}"{% else %}div{% endif %} class="onhow-scrolling-slide-{{ section.id }}">
                {% if block.settings.image != blank %}
                  <img src="{{ block.settings.image | image_url }}" alt="{{ block.settings.image.alt }}" {% if lazy %}loading="lazy"{% endif %}>
                {% else %}
                  {{ 'image' | placeholder_svg_tag }}
                {% endif %}
              </{% if block.settings.url != blank %}a{% else %}div{% endif %}>
            {% endfor %}
          </div>
        </div>
      </div>
    </div>
</div>

{% schema %}
  {
    "name": "Scrolling Images",
    "settings": [
      {
        "type": "header",
        "content": "Heading"
      },
      {
        "type": "text",
        "id": "heading",
        "label": "Heading",
        "default": "OnHOW Scrolling Images"
      },
      {
        "type": "text",
        "id": "heading_font_url",
        "label": "Heading Custom Font URL",
        "info": "Upload font to Files section and paste URL here"
      },
      {
        "type": "range",
        "id": "heading_size",
        "min": 0,
        "max": 72,
        "step": 2,
        "unit": "px",
        "label": "Heading Size",
        "default": 40
      },
      {
        "type": "range",
        "id": "heading_letter",
        "min": -5,
        "max": 10,
        "step": 0.5,
        "unit": "px",
        "label": "Heading Letter Spacing",
        "default": 0
      },
      {
        "type": "range",
        "id": "heading_mb",
        "min": 0,
        "max": 50,
        "step": 2,
        "unit": "px",
        "label": "Heading Bottom Margin",
        "default": 10
      },
      {
        "type": "header",
        "content": "Description"
      },
      {
        "type": "richtext",
        "id": "description",
        "label": "Description",
        "default": "<p>This is OnHOW scrolling images section desctiption text.</p>"
      },
      {
        "type": "range",
        "id": "description_size",
        "min": 0,
        "max": 50,
        "step": 2,
        "unit": "px",
        "label": "Description Size",
        "default": 20
      },
      {
        "type": "range",
        "id": "description_letter",
        "min": -5,
        "max": 10,
        "step": 0.5,
        "unit": "px",
        "label": "Description Letter Spacing",
        "default": 0
      },
      {
        "type": "range",
        "id": "description_mb",
        "min": 0,
        "max": 50,
        "step": 2,
        "unit": "px",
        "label": "Description Bottom Margin",
        "default": 20
      },
      {
        "type": "header",
        "content": "Button Settings"
      },
      {
        "type": "text",
        "id": "button_text",
        "label": "Button Text",
        "default": "Shop Now"
      },
      {
        "type": "url",
        "id": "button_url",
        "label": "Button Link"
      },
      {
        "type": "checkbox",
        "id": "button_new_tab",
        "label": "Open Link in New Tab",
        "default": false
      },
      {
        "type": "color",
        "id": "button_bg_color",
        "label": "Button Background Color",
        "default": "#000000"
      },
      {
        "type": "color",
        "id": "button_text_color",
        "label": "Button Text Color",
        "default": "#FFFFFF"
      },
      {
        "type": "range",
        "id": "button_radius",
        "min": 0,
        "max": 50,
        "step": 2,
        "unit": "px",
        "label": "Button Border Radius",
        "default": 24
      },
      {
        "type": "range",
        "id": "button_bottom_margin",
        "min": 0,
        "max": 100,
        "step": 5,
        "unit": "px",
        "label": "Button Bottom Margin",
        "default": 30
      },
      {
        "type": "range",
        "id": "button_width",
        "min": 100,
        "max": 400,
        "step": 10,
        "unit": "px",
        "label": "Button Width",
        "default": 160
      },
      {
        "type": "range",
        "id": "button_height",
        "min": 30,
        "max": 80,
        "step": 2,
        "unit": "px",
        "label": "Button Height",
        "default": 50
      },
      {
        "type": "range",
        "id": "button_text_size",
        "min": 10,
        "max": 24,
        "step": 1,
        "unit": "px",
        "label": "Button Text Size",
        "default": 16
      },
      {
        "type": "header",
        "content": "Slider Settings"
      },
      {
        "type": "range",
        "id": "scrolling_speed",
        "min": 13,
        "max": 40,
        "step": 1,
        "label": "Scrolling Speed",
        "default": 13
      },
      {
        "type": "range",
        "id": "space_between_images",
        "min": 10,
        "max": 100,
        "step": 2,
        "unit": "px",
        "label": "Space Between Images",
        "default": 10
      },
      {
        "type": "range",
        "id": "space_between_images_mobile",
        "min": 10,
        "max": 100,
        "step": 2,
        "unit": "px",
        "label": "Space Between Images - Mobile",
        "default": 10
      },
      {
        "type": "range",
        "id": "space_below_heading",
        "min": 0,
        "max": 100,
        "step": 5,
        "unit": "px",
        "label": "Space Below Description",
        "default": 30
      },
      {
        "type": "select",
        "id": "slider_direction",
        "label": "Slider Direction",
        "default": "left",
        "options": [
          {
            "label": "Left",
            "value": "left"
          },
          {
            "label": "Right",
            "value": "right"
          }
        ]
      },
      {
        "type": "checkbox",
        "id":"pause_hover",
        "label": "Pause on Hover",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "grayscale_hover_effect",
        "label": "Enable Grayscale Hover Effect",
        "default": true,
        "info": "Makes non-hovered images grayscale while one image is being hovered"
      },
      {
        "type": "header",
        "content": "Picture Size Settings"
      },
      {
        "type": "range",
        "id": "image_width_desktop",
        "min": 100,
        "max": 800,
        "step": 10,
        "unit": "px",
        "label": "Image Width Desktop",
        "default": 300
      },
      {
        "type": "range",
        "id": "image_width_mobile",
        "min": 100,
        "max": 800,
        "step": 10,
        "unit": "px",
        "label": "Image Width Mobile",
        "default": 120
      },
      {
        "type": "range",
        "id": "image_height_desktop",
        "min": 100,
        "max": 600,
        "step": 10,
        "unit": "px",
        "label": "Image Height Desktop",
        "default": 400
      },
      {
        "type": "range",
        "id": "image_height_mobile",
        "min": 50,
        "max": 600,
        "step": 10,
        "unit": "px",
        "label": "Image Height Mobile",
        "default": 200
      },
      {
        "type": "range",
        "id": "image_radius",
        "min": 0,
        "max": 100,
        "step": 2,
        "unit": "px",
        "label": "Image Border Radius",
        "default": 10
      },
      {
        "type": "range",
        "id": "image_shadow_intensity",
        "min": 0,
        "max": 30,
        "step": 1,
        "unit": "%",
        "label": "Image Shadow Intensity",
        "default": 10
      },
      {
        "type": "header",
        "content": "Section Colors"
      },
      {
        "type": "color",
        "label": "Heading",
        "id": "heading_color",
        "default": "#000000"
      },
      {
        "type": "color",
        "id": "description_color",
        "label":"Description Color",
        "default": "#000000"
      },
      {
        "type": "color",
        "label": "Section background",
        "id": "background_color",
        "default": "#FFFFFF"
      },
      {
        "type": "header",
        "content": "Section Settings"
      },
      {
        "type": "range",
        "id": "top_padding",
        "min": 0,
        "max": 100,
        "step": 5,
        "unit": "px",
        "label": "Top Padding",
        "default": 30
      },
      {
        "type": "range",
        "id": "bottom_padding",
        "min": 0,
        "max": 100,
        "step": 5,
        "unit": "px",
        "label": "Bottom Padding",
        "default": 30
      },
      {
        "type": "range",
        "id": "section_width",
        "min": 0,
        "max": 30,
        "step": 1,
        "unit": "rem",
        "label": "Section Width",
        "default": 0
      },
      {
        "type": "range",
        "id": "section_width_mobile",
        "min": 0,
        "max": 15,
        "step": 0.5,
        "unit": "rem",
        "label": "Section Width Mobile",
        "default": 0
      }
    ],
    "blocks": [
      {
        "type": "image",
        "name": "Image",
        "settings": [
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
          },
          {
            "type": "url",
            "id": "url",
            "label": "Link"
          },
          {
            "type": "checkbox",
            "id": "open_new_tab",
            "label": "Open Link in New Tab",
            "default": false
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Scrolling Images",
        "blocks": [
          {
            "type": "image"
          },
          {
            "type": "image"
          },
          {
            "type": "image"
          },
          {
            "type": "image"
          },
          {
            "type": "image"
          }
        ]
      }
    ]
  }
{% endschema %}