-
-
-
-
-
-
-
-
- ↑
-
-
-
-
-
-
-
diff --git a/src/js/template.js b/src/js/template.js
deleted file mode 100644
index 7ec6480..0000000
--- a/src/js/template.js
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * Copyright (C) 2026 Moko Consulting
- *
- * SPDX-License-Identifier: GPL-3.0-or-later
- *
- * FILE INFORMATION
- * DEFGROUP: MokoJoomHero.Template.Assets
- * INGROUP: MokoJoomHero.Template
- * REPO: https://github.com/mokoconsulting-tech/MokoJoomHero
- * PATH: /src/js/template.js
- * VERSION: 01.00.01
- * BRIEF: Main template JavaScript — back-to-top toggle and lightweight UI helpers
- */
-
-'use strict';
-
-document.addEventListener('DOMContentLoaded', function () {
- // Back-to-top button visibility toggle
- var backToTop = document.querySelector('.back-to-top');
-
- if (backToTop) {
- window.addEventListener('scroll', function () {
- if (window.scrollY > 300) {
- backToTop.classList.add('visible');
- } else {
- backToTop.classList.remove('visible');
- }
- }, { passive: true });
-
- backToTop.addEventListener('click', function (e) {
- e.preventDefault();
- window.scrollTo({ top: 0, behavior: 'smooth' });
- });
- }
-});
diff --git a/src/language/en-GB/mod_mokojoomhero.ini b/src/language/en-GB/mod_mokojoomhero.ini
new file mode 100644
index 0000000..c2cf827
--- /dev/null
+++ b/src/language/en-GB/mod_mokojoomhero.ini
@@ -0,0 +1,58 @@
+; Copyright (C) 2026 Moko Consulting
+; SPDX-License-Identifier: GPL-3.0-or-later
+;
+; FILE INFORMATION
+; DEFGROUP: MokoJoomHero.Module.Language
+; INGROUP: MokoJoomHero.Module
+; REPO: https://git.mokoconsulting.tech/MokoConsulting/MokoJoomHero
+; PATH: /src/language/en-GB/mod_mokojoomhero.ini
+; VERSION: 01.00.20
+; BRIEF: Language strings for MokoJoomHero module (frontend + admin form fields)
+
+MOD_MOKOJOOMHERO_NO_CONTENT="Add content to this module to display it over the hero image."
+
+; Content fieldset
+MOD_MOKOJOOMHERO_FIELDSET_CONTENT="Hero Content"
+MOD_MOKOJOOMHERO_CONTENT_LABEL="Content"
+MOD_MOKOJOOMHERO_CONTENT_DESC="HTML content displayed on the hero. Use the editor to add headings, text, buttons, or any HTML."
+MOD_MOKOJOOMHERO_SHOW_CARD_LABEL="Show Card"
+MOD_MOKOJOOMHERO_SHOW_CARD_DESC="Wrap the content in a card with a white background and shadow."
+
+; Hero mode
+MOD_MOKOJOOMHERO_MODE_LABEL="Hero Mode"
+MOD_MOKOJOOMHERO_MODE_DESC="Choose between a slideshow of images or a background video."
+MOD_MOKOJOOMHERO_MODE_IMAGES="Images"
+MOD_MOKOJOOMHERO_MODE_VIDEO="Video"
+
+; Image settings
+MOD_MOKOJOOMHERO_IMAGE_FOLDER_LABEL="Image Folder"
+MOD_MOKOJOOMHERO_IMAGE_FOLDER_DESC="Path to folder containing hero images, relative to Joomla root (e.g. images/heroes)."
+MOD_MOKOJOOMHERO_IMAGE_COUNT_LABEL="Number of Images"
+MOD_MOKOJOOMHERO_IMAGE_COUNT_DESC="How many random images to include in the slideshow (1–5)."
+MOD_MOKOJOOMHERO_SLIDE_INTERVAL_LABEL="Slide Interval (ms)"
+MOD_MOKOJOOMHERO_SLIDE_INTERVAL_DESC="Time between slides in milliseconds (e.g. 5000 = 5 seconds)."
+
+; Video settings
+MOD_MOKOJOOMHERO_VIDEO_FILE_LABEL="Video URL"
+MOD_MOKOJOOMHERO_VIDEO_FILE_DESC="Local file path, YouTube URL, or Vimeo URL. Any format works — the module auto-detects the source."
+
+; Hero height
+MOD_MOKOJOOMHERO_HERO_HEIGHT_LABEL="Hero Height"
+MOD_MOKOJOOMHERO_HERO_HEIGHT_DESC="Height of the hero section. Use px for fixed pixels (e.g. 400px) or vh for viewport height (e.g. 60vh for 60%% of screen)."
+MOD_MOKOJOOMHERO_HERO_HEIGHT_HINT="e.g. 60vh or 400px"
+
+; Overlay fieldset
+MOD_MOKOJOOMHERO_FIELDSET_OVERLAY="Overlay & Text"
+MOD_MOKOJOOMHERO_OVERLAY_COLOR_LABEL="Overlay Colour"
+MOD_MOKOJOOMHERO_OVERLAY_COLOR_DESC="Background colour of the overlay on top of the hero image."
+MOD_MOKOJOOMHERO_OVERLAY_OPACITY_LABEL="Overlay Opacity"
+MOD_MOKOJOOMHERO_OVERLAY_OPACITY_DESC="Transparency of the overlay (0 = fully transparent, 1 = fully opaque)."
+MOD_MOKOJOOMHERO_TEXT_ALIGN_LABEL="Text Alignment"
+MOD_MOKOJOOMHERO_TEXT_ALIGN_DESC="Horizontal alignment of the overlay text."
+MOD_MOKOJOOMHERO_TEXT_COLOR_LABEL="Text Colour"
+MOD_MOKOJOOMHERO_TEXT_COLOR_DESC="Colour of the text displayed over the hero image."
+
+; Alignment options
+MOD_MOKOJOOMHERO_ALIGN_LEFT="Left"
+MOD_MOKOJOOMHERO_ALIGN_CENTER="Centre"
+MOD_MOKOJOOMHERO_ALIGN_RIGHT="Right"
diff --git a/src/language/en-GB/mod_mokojoomhero.sys.ini b/src/language/en-GB/mod_mokojoomhero.sys.ini
new file mode 100644
index 0000000..880b35f
--- /dev/null
+++ b/src/language/en-GB/mod_mokojoomhero.sys.ini
@@ -0,0 +1,59 @@
+; Copyright (C) 2026 Moko Consulting
+; SPDX-License-Identifier: GPL-3.0-or-later
+;
+; FILE INFORMATION
+; DEFGROUP: MokoJoomHero.Module.Language
+; INGROUP: MokoJoomHero.Module
+; REPO: https://git.mokoconsulting.tech/MokoConsulting/MokoJoomHero
+; PATH: /src/language/en-GB/mod_mokojoomhero.sys.ini
+; VERSION: 01.00.20
+; BRIEF: System language strings — used in admin Extension Manager and Module Manager
+
+MOD_MOKOJOOMHERO="Module - MokoJoomHero"
+MOD_MOKOJOOMHERO_DESCRIPTION="Displays a random hero image slideshow or background video with content overlaid. Designed for MokoOnyx template. By Moko Consulting."
+
+; Content fieldset
+MOD_MOKOJOOMHERO_FIELDSET_CONTENT="Hero Content"
+MOD_MOKOJOOMHERO_CONTENT_LABEL="Content"
+MOD_MOKOJOOMHERO_CONTENT_DESC="HTML content displayed on the hero. Use the editor to add headings, text, buttons, or any HTML."
+MOD_MOKOJOOMHERO_SHOW_CARD_LABEL="Show Card"
+MOD_MOKOJOOMHERO_SHOW_CARD_DESC="Wrap the content in a card with a white background and shadow."
+
+; Hero mode
+MOD_MOKOJOOMHERO_MODE_LABEL="Hero Mode"
+MOD_MOKOJOOMHERO_MODE_DESC="Choose between a slideshow of images or a background video."
+MOD_MOKOJOOMHERO_MODE_IMAGES="Images"
+MOD_MOKOJOOMHERO_MODE_VIDEO="Video"
+
+; Image settings
+MOD_MOKOJOOMHERO_IMAGE_FOLDER_LABEL="Image Folder"
+MOD_MOKOJOOMHERO_IMAGE_FOLDER_DESC="Path to folder containing hero images, relative to Joomla root (e.g. images/heroes)."
+MOD_MOKOJOOMHERO_IMAGE_COUNT_LABEL="Number of Images"
+MOD_MOKOJOOMHERO_IMAGE_COUNT_DESC="How many random images to include in the slideshow (1–5)."
+MOD_MOKOJOOMHERO_SLIDE_INTERVAL_LABEL="Slide Interval (ms)"
+MOD_MOKOJOOMHERO_SLIDE_INTERVAL_DESC="Time between slides in milliseconds (e.g. 5000 = 5 seconds)."
+
+; Video settings
+MOD_MOKOJOOMHERO_VIDEO_FILE_LABEL="Video URL"
+MOD_MOKOJOOMHERO_VIDEO_FILE_DESC="Local file path, YouTube URL, or Vimeo URL. Any format works — the module auto-detects the source."
+
+; Hero height
+MOD_MOKOJOOMHERO_HERO_HEIGHT_LABEL="Hero Height"
+MOD_MOKOJOOMHERO_HERO_HEIGHT_DESC="Height of the hero section. Use px for fixed pixels (e.g. 400px) or vh for viewport height (e.g. 60vh for 60%% of screen)."
+MOD_MOKOJOOMHERO_HERO_HEIGHT_HINT="e.g. 60vh or 400px"
+
+; Overlay fieldset
+MOD_MOKOJOOMHERO_FIELDSET_OVERLAY="Overlay & Text"
+MOD_MOKOJOOMHERO_OVERLAY_COLOR_LABEL="Overlay Colour"
+MOD_MOKOJOOMHERO_OVERLAY_COLOR_DESC="Background colour of the overlay on top of the hero image."
+MOD_MOKOJOOMHERO_OVERLAY_OPACITY_LABEL="Overlay Opacity"
+MOD_MOKOJOOMHERO_OVERLAY_OPACITY_DESC="Transparency of the overlay (0 = fully transparent, 1 = fully opaque)."
+MOD_MOKOJOOMHERO_TEXT_ALIGN_LABEL="Text Alignment"
+MOD_MOKOJOOMHERO_TEXT_ALIGN_DESC="Horizontal alignment of the overlay text."
+MOD_MOKOJOOMHERO_TEXT_COLOR_LABEL="Text Colour"
+MOD_MOKOJOOMHERO_TEXT_COLOR_DESC="Colour of the text displayed over the hero image."
+
+; Alignment options
+MOD_MOKOJOOMHERO_ALIGN_LEFT="Left"
+MOD_MOKOJOOMHERO_ALIGN_CENTER="Centre"
+MOD_MOKOJOOMHERO_ALIGN_RIGHT="Right"
diff --git a/src/language/en-GB/tpl_mokojoomhero.ini b/src/language/en-GB/tpl_mokojoomhero.ini
deleted file mode 100644
index 79af3f4..0000000
--- a/src/language/en-GB/tpl_mokojoomhero.ini
+++ /dev/null
@@ -1,13 +0,0 @@
-; Copyright (C) 2026 Moko Consulting
-; SPDX-License-Identifier: GPL-3.0-or-later
-;
-; FILE INFORMATION
-; DEFGROUP: MokoJoomHero.Template.Language
-; INGROUP: MokoJoomHero.Template
-; REPO: https://github.com/mokoconsulting-tech/MokoJoomHero
-; PATH: /src/language/en-GB/tpl_mokojoomhero.ini
-; VERSION: 01.00.01
-; BRIEF: Front-end language strings for MokoJoomHero template
-
-TPL_MOKOJOOMHERO_MAIN_NAV="Main Navigation"
-TPL_MOKOJOOMHERO_BACK_TO_TOP="Back to top"
diff --git a/src/language/en-GB/tpl_mokojoomhero.sys.ini b/src/language/en-GB/tpl_mokojoomhero.sys.ini
deleted file mode 100644
index eaca64e..0000000
--- a/src/language/en-GB/tpl_mokojoomhero.sys.ini
+++ /dev/null
@@ -1,25 +0,0 @@
-; Copyright (C) 2026 Moko Consulting
-; SPDX-License-Identifier: GPL-3.0-or-later
-;
-; FILE INFORMATION
-; DEFGROUP: MokoJoomHero.Template.Language
-; INGROUP: MokoJoomHero.Template
-; REPO: https://github.com/mokoconsulting-tech/MokoJoomHero
-; PATH: /src/language/en-GB/tpl_mokojoomhero.sys.ini
-; VERSION: 01.00.01
-; BRIEF: System language strings — used in admin Extension Manager and Template Manager
-
-TPL_MOKOJOOMHERO="MokoJoomHero"
-TPL_MOKOJOOMHERO_DESCRIPTION="A modern, accessible Joomla template by Moko Consulting. Features a hero section, flexible module positions, sticky header, and customisable brand colour."
-TPL_MOKOJOOMHERO_LOGO_FILE_LABEL="Logo"
-TPL_MOKOJOOMHERO_LOGO_FILE_DESC="Select an image to use as the site logo."
-TPL_MOKOJOOMHERO_SITE_DESCRIPTION_LABEL="Site Description"
-TPL_MOKOJOOMHERO_SITE_DESCRIPTION_DESC="A short tagline displayed next to the logo."
-TPL_MOKOJOOMHERO_BRAND_COLOR_LABEL="Brand Colour"
-TPL_MOKOJOOMHERO_BRAND_COLOR_DESC="Primary accent colour used throughout the template."
-TPL_MOKOJOOMHERO_FLUID_LABEL="Fluid Container"
-TPL_MOKOJOOMHERO_FLUID_DESC="Use a full-width container instead of a fixed-width one."
-TPL_MOKOJOOMHERO_STICKY_HEADER_LABEL="Sticky Header"
-TPL_MOKOJOOMHERO_STICKY_HEADER_DESC="Keep the header visible when scrolling."
-TPL_MOKOJOOMHERO_BACK_TO_TOP_LABEL="Back to Top Button"
-TPL_MOKOJOOMHERO_BACK_TO_TOP_DESC="Show a floating button that scrolls the page to the top."
diff --git a/src/language/en-US/mod_mokojoomhero.ini b/src/language/en-US/mod_mokojoomhero.ini
new file mode 100644
index 0000000..e3f89c0
--- /dev/null
+++ b/src/language/en-US/mod_mokojoomhero.ini
@@ -0,0 +1,58 @@
+; Copyright (C) 2026 Moko Consulting
+; SPDX-License-Identifier: GPL-3.0-or-later
+;
+; FILE INFORMATION
+; DEFGROUP: MokoJoomHero.Module.Language
+; INGROUP: MokoJoomHero.Module
+; REPO: https://git.mokoconsulting.tech/MokoConsulting/MokoJoomHero
+; PATH: /src/language/en-US/mod_mokojoomhero.ini
+; VERSION: 01.00.20
+; BRIEF: Language strings for MokoJoomHero module (en-US, frontend + admin form fields)
+
+MOD_MOKOJOOMHERO_NO_CONTENT="Add content to this module to display it over the hero image."
+
+; Content fieldset
+MOD_MOKOJOOMHERO_FIELDSET_CONTENT="Hero Content"
+MOD_MOKOJOOMHERO_CONTENT_LABEL="Content"
+MOD_MOKOJOOMHERO_CONTENT_DESC="HTML content displayed on the hero. Use the editor to add headings, text, buttons, or any HTML."
+MOD_MOKOJOOMHERO_SHOW_CARD_LABEL="Show Card"
+MOD_MOKOJOOMHERO_SHOW_CARD_DESC="Wrap the content in a card with a white background and shadow."
+
+; Hero mode
+MOD_MOKOJOOMHERO_MODE_LABEL="Hero Mode"
+MOD_MOKOJOOMHERO_MODE_DESC="Choose between a slideshow of images or a background video."
+MOD_MOKOJOOMHERO_MODE_IMAGES="Images"
+MOD_MOKOJOOMHERO_MODE_VIDEO="Video"
+
+; Image settings
+MOD_MOKOJOOMHERO_IMAGE_FOLDER_LABEL="Image Folder"
+MOD_MOKOJOOMHERO_IMAGE_FOLDER_DESC="Path to folder containing hero images, relative to Joomla root (e.g. images/heroes)."
+MOD_MOKOJOOMHERO_IMAGE_COUNT_LABEL="Number of Images"
+MOD_MOKOJOOMHERO_IMAGE_COUNT_DESC="How many random images to include in the slideshow (1-5)."
+MOD_MOKOJOOMHERO_SLIDE_INTERVAL_LABEL="Slide Interval (ms)"
+MOD_MOKOJOOMHERO_SLIDE_INTERVAL_DESC="Time between slides in milliseconds (e.g. 5000 = 5 seconds)."
+
+; Video settings
+MOD_MOKOJOOMHERO_VIDEO_FILE_LABEL="Video URL"
+MOD_MOKOJOOMHERO_VIDEO_FILE_DESC="Local file path, YouTube URL, or Vimeo URL. Any format works - the module auto-detects the source."
+
+; Hero height
+MOD_MOKOJOOMHERO_HERO_HEIGHT_LABEL="Hero Height"
+MOD_MOKOJOOMHERO_HERO_HEIGHT_DESC="Height of the hero section. Use px for fixed pixels (e.g. 400px) or vh for viewport height (e.g. 60vh for 60% of screen)."
+MOD_MOKOJOOMHERO_HERO_HEIGHT_HINT="e.g. 60vh or 400px"
+
+; Overlay fieldset
+MOD_MOKOJOOMHERO_FIELDSET_OVERLAY="Overlay & Text"
+MOD_MOKOJOOMHERO_OVERLAY_COLOR_LABEL="Overlay Color"
+MOD_MOKOJOOMHERO_OVERLAY_COLOR_DESC="Background color of the overlay on top of the hero image."
+MOD_MOKOJOOMHERO_OVERLAY_OPACITY_LABEL="Overlay Opacity"
+MOD_MOKOJOOMHERO_OVERLAY_OPACITY_DESC="Transparency of the overlay (0 = fully transparent, 1 = fully opaque)."
+MOD_MOKOJOOMHERO_TEXT_ALIGN_LABEL="Text Alignment"
+MOD_MOKOJOOMHERO_TEXT_ALIGN_DESC="Horizontal alignment of the overlay text."
+MOD_MOKOJOOMHERO_TEXT_COLOR_LABEL="Text Color"
+MOD_MOKOJOOMHERO_TEXT_COLOR_DESC="Color of the text displayed over the hero image."
+
+; Alignment options
+MOD_MOKOJOOMHERO_ALIGN_LEFT="Left"
+MOD_MOKOJOOMHERO_ALIGN_CENTER="Center"
+MOD_MOKOJOOMHERO_ALIGN_RIGHT="Right"
diff --git a/src/language/en-US/mod_mokojoomhero.sys.ini b/src/language/en-US/mod_mokojoomhero.sys.ini
new file mode 100644
index 0000000..0f978d5
--- /dev/null
+++ b/src/language/en-US/mod_mokojoomhero.sys.ini
@@ -0,0 +1,59 @@
+; Copyright (C) 2026 Moko Consulting
+; SPDX-License-Identifier: GPL-3.0-or-later
+;
+; FILE INFORMATION
+; DEFGROUP: MokoJoomHero.Module.Language
+; INGROUP: MokoJoomHero.Module
+; REPO: https://git.mokoconsulting.tech/MokoConsulting/MokoJoomHero
+; PATH: /src/language/en-US/mod_mokojoomhero.sys.ini
+; VERSION: 01.00.20
+; BRIEF: System language strings — used in admin Extension Manager and Module Manager (en-US)
+
+MOD_MOKOJOOMHERO="Module - MokoJoomHero"
+MOD_MOKOJOOMHERO_DESCRIPTION="Displays a random hero image slideshow or background video with content overlaid. Designed for MokoOnyx template. By Moko Consulting."
+
+; Content fieldset
+MOD_MOKOJOOMHERO_FIELDSET_CONTENT="Hero Content"
+MOD_MOKOJOOMHERO_CONTENT_LABEL="Content"
+MOD_MOKOJOOMHERO_CONTENT_DESC="HTML content displayed on the hero. Use the editor to add headings, text, buttons, or any HTML."
+MOD_MOKOJOOMHERO_SHOW_CARD_LABEL="Show Card"
+MOD_MOKOJOOMHERO_SHOW_CARD_DESC="Wrap the content in a card with a white background and shadow."
+
+; Hero mode
+MOD_MOKOJOOMHERO_MODE_LABEL="Hero Mode"
+MOD_MOKOJOOMHERO_MODE_DESC="Choose between a slideshow of images or a background video."
+MOD_MOKOJOOMHERO_MODE_IMAGES="Images"
+MOD_MOKOJOOMHERO_MODE_VIDEO="Video"
+
+; Image settings
+MOD_MOKOJOOMHERO_IMAGE_FOLDER_LABEL="Image Folder"
+MOD_MOKOJOOMHERO_IMAGE_FOLDER_DESC="Path to folder containing hero images, relative to Joomla root (e.g. images/heroes)."
+MOD_MOKOJOOMHERO_IMAGE_COUNT_LABEL="Number of Images"
+MOD_MOKOJOOMHERO_IMAGE_COUNT_DESC="How many random images to include in the slideshow (1-5)."
+MOD_MOKOJOOMHERO_SLIDE_INTERVAL_LABEL="Slide Interval (ms)"
+MOD_MOKOJOOMHERO_SLIDE_INTERVAL_DESC="Time between slides in milliseconds (e.g. 5000 = 5 seconds)."
+
+; Video settings
+MOD_MOKOJOOMHERO_VIDEO_FILE_LABEL="Video URL"
+MOD_MOKOJOOMHERO_VIDEO_FILE_DESC="Local file path, YouTube URL, or Vimeo URL. Any format works - the module auto-detects the source."
+
+; Hero height
+MOD_MOKOJOOMHERO_HERO_HEIGHT_LABEL="Hero Height"
+MOD_MOKOJOOMHERO_HERO_HEIGHT_DESC="Height of the hero section. Use px for fixed pixels (e.g. 400px) or vh for viewport height (e.g. 60vh for 60% of screen)."
+MOD_MOKOJOOMHERO_HERO_HEIGHT_HINT="e.g. 60vh or 400px"
+
+; Overlay fieldset
+MOD_MOKOJOOMHERO_FIELDSET_OVERLAY="Overlay & Text"
+MOD_MOKOJOOMHERO_OVERLAY_COLOR_LABEL="Overlay Color"
+MOD_MOKOJOOMHERO_OVERLAY_COLOR_DESC="Background color of the overlay on top of the hero image."
+MOD_MOKOJOOMHERO_OVERLAY_OPACITY_LABEL="Overlay Opacity"
+MOD_MOKOJOOMHERO_OVERLAY_OPACITY_DESC="Transparency of the overlay (0 = fully transparent, 1 = fully opaque)."
+MOD_MOKOJOOMHERO_TEXT_ALIGN_LABEL="Text Alignment"
+MOD_MOKOJOOMHERO_TEXT_ALIGN_DESC="Horizontal alignment of the overlay text."
+MOD_MOKOJOOMHERO_TEXT_COLOR_LABEL="Text Color"
+MOD_MOKOJOOMHERO_TEXT_COLOR_DESC="Color of the text displayed over the hero image."
+
+; Alignment options
+MOD_MOKOJOOMHERO_ALIGN_LEFT="Left"
+MOD_MOKOJOOMHERO_ALIGN_CENTER="Center"
+MOD_MOKOJOOMHERO_ALIGN_RIGHT="Right"
diff --git a/src/media/css/mod_mokojoomhero.css b/src/media/css/mod_mokojoomhero.css
new file mode 100644
index 0000000..68f0f3c
--- /dev/null
+++ b/src/media/css/mod_mokojoomhero.css
@@ -0,0 +1,154 @@
+/* Copyright (C) 2026 Moko Consulting
+ *
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ *
+ * FILE INFORMATION
+ * DEFGROUP: MokoJoomHero.Module.Assets
+ * INGROUP: MokoJoomHero.Module
+ * REPO: https://git.mokoconsulting.tech/MokoConsulting/MokoJoomHero
+ * PATH: /src/css/template.css
+ * VERSION: 01.00.20
+ * BRIEF: Hero module stylesheet — slideshow, video background, overlay
+ */
+
+/* ============================================================
+ Hero container
+ ============================================================ */
+.mokojoomhero {
+ position: relative;
+ overflow: hidden;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+/* ============================================================
+ Image slides
+ ============================================================ */
+.mokojoomhero__slide {
+ position: absolute;
+ inset: 0;
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+ opacity: 0;
+ transition: opacity 1s ease;
+}
+
+.mokojoomhero__slide--active {
+ opacity: 1;
+}
+
+/* ============================================================
+ Video background
+ ============================================================ */
+/* Native