{% extends 'base.html.twig' %}
{% block meta_title %}
{% set metaTitle = home_data.metaTitle %}
{{ metaTitle }}
{% endblock %}
{% block meta_decription %}
{% set metaTitle = home_data.metaTitle %}
{% set metaDescription = home_data.metaDescription %}
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="Sanral" />
<meta name="twitter:title" content="{{ metaTitle }}" />
<meta name="twitter:description" content="{{ metaDescription }}" />
<meta name="twitter:image" content="https://hugenouttunnel.nerdw.com/images/home/{{ home_data.ogImage }}" />
<meta name="twitter:url" content="{{ app.request.uri }}" />
<meta name="og:image" content="https://hugenouttunnel.nerdw.com/images/home/{{ home_data.ogImage }}" />
<meta name="og:title" content="{{ metaTitle }}" />
<meta name="og:description" content="{{ metaDescription }}" />
<meta name="og:url" content="{{ app.request.uri }}" />
<meta name="description" content="{{ metaDescription }}">
{% endblock %}
{% block stylesheets %}
{{ parent() }}
{% endblock %}
{% block layout %}
<div class="uabb-js-breakpoint" style="display: none;"></div>
<div class="fl-page-content" id="fl-main-content" itemprop="mainContentOfPage" role="main">
<div class="fl-content-full container">
<div class="row">
<div class="fl-content col-md-12">
<article class="fl-post post-12 page type-page status-publish hentry" id="fl-post-12"
itemscope="itemscope" itemtype="https://schema.org/CreativeWork">
<div class="fl-post-content clearfix" itemprop="text">
<div class="fl-builder-content fl-builder-content-12 fl-builder-content-primary fl-builder-global-templates-locked"
data-post-id="12">
<div class="row" style="margin: 0;">
<!-- Desktop -->
<div class="d-none d-md-block col-12">
<div style="position: relative">
<img src="{{ asset('images/Huguenot_Website_Banner-01.png') }}" style="width: 100%;height: auto">
<div style="position: absolute; bottom: 10%;right: 10%;text-align: center">
<div class="row">
<div class="col-12 col-md-6">
<a href="https://apps.apple.com/za/app/sanral-huguenot-tunnel-vr/id1577335006" target="_blank">
<img src="{{ asset('assets/images/App-Store.png') }}">
</a>
</div>
<div class="col-12 col-md-6">
<a href="https://play.google.com/store/apps/details?id=com.bizarReality.SANRALHuguenotTunnelVRExperience&hl=en_ZA" target="_blank">
<img src="{{ asset('assets/images/Google-Play.png') }}">
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Mobile -->
<div class="d-block d-sm-block d-md-none col-12">
<div style="position: relative">
<img src="{{ asset('images/home-mobile-banner.png') }}" style="width: 100%;height: auto">
<div style="position: absolute; bottom: 25%;right: 5%;left:5%; text-align: center; scroll-padding-left: 10px">
<div class="row">
<div class="col-6">
<a href="https://apps.apple.com/za/app/sanral-huguenot-tunnel-vr/id1577335006" target="_blank">
<img src="{{ asset('assets/images/App-Store.png') }}" class="img-res">
</a>
</div>
<div class="col-6">
<a href="https://play.google.com/store/apps/details?id=com.bizarReality.SANRALHuguenotTunnelVRExperience&hl=en_ZA" target="_blank">
<img src="{{ asset('assets/images/Google-Play.png') }}" class="img-res">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
{# <div class="fl-row fl-row-full-width fl-row-bg-parallax fl-node-5df0a8a42f946 fl-row-custom-height fl-row-align-center"#}
{# data-node="5df0a8a42f946" data-parallax-image="{{ asset('images/Huguenot_Website_Banner-01.png') }}"#}
{# data-parallax-speed="2">#}
{# <div class="fl-row-content-wrap">#}
{# <div class="uabb-row-separator uabb-top-row-separator">#}
{# </div>#}
{# <div class="fl-row-content fl-row-fixed-width fl-node-content">#}
{# <div class="fl-col-group fl-node-5df0a8a434eda" data-node="5df0a8a434eda">#}
{# <div class="fl-col fl-node-5df0a8a435150 fl-col-has-cols"#}
{# data-node="5df0a8a435150">#}
{# <div class="fl-col-content fl-node-content">#}
{# <div class="fl-col-group fl-node-5df0a97524ac2 fl-col-group-nested"#}
{# data-node="5df0a97524ac2">#}
{# <div class="fl-col fl-node-5df0a97524c8e"#}
{# data-node="5df0a97524c8e">#}
{# <div class="fl-col-content fl-node-content">#}
{# <div class="fl-module fl-module-pp-heading fl-node-5df0a8a42f47e"#}
{# data-node="5df0a8a42f47e">#}
{# <div class="fl-module-content fl-node-content">#}
{# <div class="pp-heading-content">#}
{# <div class="pp-heading pp-left">#}
{# <h2 class="heading-title">#}
{# <span class="title-text pp-primary-title">#}
{# NIGHT TIME TUNNEL CLOSURES#}
{# </span>#}
{# <span class="title-text pp-secondary-title">14 June – 30 September 2021</span>#}
{# <span class="title-text pp-secondary-title" style="font-size: 30px">#}
{# Monday - Thursday 10pm - 6am#}
{# </span>#}
{# </h2>#}
{# </div>#}
{# </div>#}
{# </div>#}
{# </div>#}
{# <div class="fl-module fl-module-pp-smart-button fl-node-5df0aac117275"#}
{# data-node="5df0aac117275">#}
{# <div class="fl-module-content fl-node-content">#}
{# <div class="pp-button-wrap pp-button-width-auto pp-button-has-icon">#}
{# <a#}
{# class="pp-button"#}
{# href="{{ path('content_page', {'title':'closures','id':2}) }}"#}
{# role="button"#}
{# target="_self"#}
{# >#}
{# <i class="pp-button-icon pp-button-icon-before fas fa-road"></i>#}
{# <span class="pp-button-text">Learn More</span>#}
{# </a>#}
{# </div>#}
{# </div>#}
{# </div>#}
{# </div>#}
{# </div>#}
{# <div class="fl-col fl-node-5df0a97524c96 fl-col-small"#}
{# data-node="5df0a97524c96">#}
{# <div class="fl-col-content fl-node-content">#}
{# </div>#}
{# </div>#}
{# </div>#}
{# </div>#}
{# </div>#}
{# </div>#}
{# </div>#}
{# </div>#}
{# </div>#}
<div class="fl-row fl-row-full-width fl-row-bg-none fl-node-5df0af9d61bba"
data-node="5df0af9d61bba">
<div class="fl-row-content-wrap">
<div class="uabb-row-separator uabb-top-row-separator">
</div>
<div class="fl-row-content fl-row-full-width fl-node-content">
<div class="fl-col-group fl-node-5df0af9d69fa0 fl-col-group-equal-height fl-col-group-align-center"
data-node="5df0af9d69fa0">
<div class="fl-col fl-node-5df0af9d6a326 fl-col-small"
data-node="5df0af9d6a326">
<div class="fl-col-content fl-node-content" style="background-image: url('images/home/{{ home_data.overviewImage }}');
background-repeat: no-repeat;
background-position: center bottom;
background-attachment: scroll;
background-size: cover;">
</div>
</div>
<div class="fl-col fl-node-5df0af9d6a332 fl-col-small fl-animation fl-fade-right"
data-animation-delay="0" data-animation-duration="1"
data-node="5df0af9d6a332">
<div class="fl-col-content fl-node-content">
<div class="fl-module fl-module-pp-heading fl-node-5df0afca81168"
data-node="5df0afca81168">
<div class="fl-module-content fl-node-content">
<div class="pp-heading-content">
<div class="pp-heading pp-left">
<h2 class="heading-title">
<span class="title-text pp-primary-title">Overview</span>
</h2>
</div>
<div class="pp-heading-separator line_only pp-left">
<span class="pp-separator-line"></span>
</div>
<div class="pp-sub-heading">
{{ home_data.overview|raw }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Resons for refurbishment -->
<div class="fl-row fl-row-full-width fl-row-bg-color fl-node-5df0b1920c537"
data-node="5df0b1920c537">
<div class="fl-row-content-wrap">
<div class="uabb-row-separator uabb-top-row-separator">
</div>
<div class="fl-row-content fl-row-full-width fl-node-content">
<div class="fl-col-group fl-node-5df0b1920c750 fl-col-group-equal-height fl-col-group-align-top"
data-node="5df0b1920c750">
<div class="fl-col fl-node-5df0b1920c753 fl-col-small fl-animation fl-fade-left"
data-animation-delay="0" data-animation-duration="1"
data-node="5df0b1920c753">
<div class="fl-col-content fl-node-content">
<div class="fl-module fl-module-pp-heading fl-node-5df0bf3b9f052"
data-node="5df0bf3b9f052">
<div class="fl-module-content fl-node-content">
<div class="pp-heading-content">
<div class="pp-heading pp-left">
<h2 class="heading-title">
<span class="title-text pp-primary-title">Reasons for refurbishment</span>
</h2>
</div>
<div class="pp-heading-separator line_only pp-left">
<span class="pp-separator-line"></span>
</div>
</div>
</div>
</div>
<div class="fl-module fl-module-pp-iconlist fl-node-5df0b328dc308 just"
data-node="5df0b328dc308">
<div class="fl-module-content fl-node-content" style="margin-top: 0">
<div class="pp-icon-list pp-user-agent-firefox">
{{ home_data.reason|raw }}
</div>
</div>
</div>
</div>
</div>
<div class="fl-col fl-node-5df0b1920c755 fl-col-small fl-animation fl-fade-right"
data-animation-delay="0" data-animation-duration="1"
data-node="5df0b1920c755">
<div style="background-image: url('images/home/{{ home_data.reasonImage }}')" class="fl-col-content fl-node-content">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Carousel -->
<div class="fl-row fl-row-full-width fl-row-bg-color fl-node-5e2ea840c4c7c"
data-node="5e2ea840c4c7c">
<div class="fl-row-content-wrap">
<div class="uabb-row-separator uabb-top-row-separator">
</div>
<div class="fl-row-content fl-row-fixed-width fl-node-content">
<div class="fl-col-group fl-node-5e2ea84156421" data-node="5e2ea84156421">
<div class="fl-col fl-node-5e2ea8415691b" data-node="5e2ea8415691b">
<div class="fl-col-content fl-node-content">
<div class="fl-module fl-module-pp-heading fl-node-5e2ea83168f95"
data-node="5e2ea83168f95">
<div class="fl-module-content fl-node-content">
<div class="pp-heading-content">
<div class="pp-heading pp-left">
<h2 class="heading-title">
<span class="title-text pp-primary-title">Carousel</span>
</h2>
</div>
<div class="pp-heading-separator line_only pp-left">
<span class="pp-separator-line"></span>
</div>
</div>
</div>
</div>
<div class="fl-module fl-module-pp-image-carousel fl-node-5e2ea86305aa7"
data-node="5e2ea86305aa7">
<div class="fl-module-content fl-node-content">
<div class="pp-image-carousel-wrapper">
<div class="pp-image-carousel swiper-container pp-carousel-navigation-outside">
<div class="swiper-wrapper">
{% for carousel in carousel_data %}
<div class="pp-image-carousel-item pp-image-carousel-link swiper-slide">
<a data-caption=""
href="images/carousel/{{ carousel.banner }}" target="_self">
<div class="pp-carousel-image-container"
style="background-image:url('images/carousel/{{ carousel.banner }}')"></div>
</a>
</div>
{% endfor %}
</div>
<!-- pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Statistics -->
<div class="fl-row fl-row-full-width fl-row-bg-photo fl-node-5df0b6b2045d5 fl-row-bg-overlay"
data-node="5df0b6b2045d5">
<div class="fl-row-content-wrap">
<div class="uabb-row-separator uabb-top-row-separator">
</div>
<div class="fl-row-content fl-row-fixed-width fl-node-content">
<div class="fl-col-group fl-node-5df0b6c700942" data-node="5df0b6c700942">
<div class="fl-col fl-node-5df0b6c700c7a fl-col-small"
data-node="5df0b6c700c7a">
<div class="fl-col-content fl-node-content">
<div class="fl-module fl-module-numbers fl-node-5df0b943b589e"
data-node="5df0b943b589e">
<div class="fl-module-content fl-node-content">
<div class="fl-number fl-number-circle">
<div class="fl-number-circle-container">
<div class="fl-number-text">
<div class="fl-number-string"><span
class="fl-number-int"><noscript>13,000</noscript></span>
</div>
<span class="fl-number-after-text">vehicles</span>
</div>
<div class="svg-container">
<svg class="svg" preserveAspectRatio="xMinYMin meet"
version="1.1"
viewBox="0 0 200 200">
<circle class="fl-bar-bg" cx="100"
cy="100" fill="transparent"
r="90"
stroke-dasharray="565.49"
stroke-dashoffset="0"></circle>
<circle class="fl-bar" cx="100" cy="100"
data-bbtest="sample-lang" fill="transparent"
r="90"
stroke-dasharray="565.49"
stroke-dashoffset="565.49"
transform="rotate(-90 100 100)"></circle>
</svg>
</div>
</div>
</div>
</div>
</div>
<div class="fl-module fl-module-pp-notifications fl-node-5df0b96c17c8b"
data-node="5df0b96c17c8b">
<div class="fl-module-content fl-node-content">
<div class="pp-notification-wrapper">
<div class="pp-notification-inner">
<div class="pp-notification-content">
<p>Average daily passage</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fl-col fl-node-5df0b6c700c84 fl-col-small"
data-node="5df0b6c700c84">
<div class="fl-col-content fl-node-content">
<div class="fl-module fl-module-numbers fl-node-5df0b9cbbf20b"
data-node="5df0b9cbbf20b">
<div class="fl-module-content fl-node-content">
<div class="fl-number fl-number-circle">
<div class="fl-number-circle-container">
<div class="fl-number-text">
<div class="fl-number-string"><span
class="fl-number-int"><noscript>365</noscript></span>
</div>
<span class="fl-number-after-text">Monitoring</span>
</div>
<div class="svg-container">
<svg class="svg" preserveAspectRatio="xMinYMin meet"
version="1.1"
viewBox="0 0 200 200">
<circle class="fl-bar-bg" cx="100"
cy="100" fill="transparent"
r="90"
stroke-dasharray="565.49"
stroke-dashoffset="0"></circle>
<circle class="fl-bar" cx="100" cy="100"
data-bbtest="sample-lang" fill="transparent"
r="90"
stroke-dasharray="565.49"
stroke-dashoffset="565.49"
transform="rotate(-90 100 100)"></circle>
</svg>
</div>
</div>
</div>
</div>
</div>
<div class="fl-module fl-module-pp-notifications fl-node-5df0b9aded0fb"
data-node="5df0b9aded0fb">
<div class="fl-module-content fl-node-content">
<div class="pp-notification-wrapper">
<div class="pp-notification-inner">
<div class="pp-notification-content">
<p>Real-time daily monitoring</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fl-col fl-node-5df0b6c700c89 fl-col-small"
data-node="5df0b6c700c89">
<div class="fl-col-content fl-node-content">
<div class="fl-module fl-module-numbers fl-node-5df0ba1c75e65"
data-node="5df0ba1c75e65">
<div class="fl-module-content fl-node-content">
<div class="fl-number fl-number-circle">
<div class="fl-number-circle-container">
<div class="fl-number-text">
<div class="fl-number-string"><span
class="fl-number-int"><noscript>100</noscript></span>
</div>
<span class="fl-number-after-text">Million</span>
</div>
<div class="svg-container">
<svg class="svg" preserveAspectRatio="xMinYMin meet"
version="1.1"
viewBox="0 0 200 200">
<circle class="fl-bar-bg" cx="100"
cy="100" fill="transparent"
r="90"
stroke-dasharray="565.49"
stroke-dashoffset="0"></circle>
<circle class="fl-bar" cx="100" cy="100"
data-bbtest="sample-lang" fill="transparent"
r="90"
stroke-dasharray="565.49"
stroke-dashoffset="565.49"
transform="rotate(-90 100 100)"></circle>
</svg>
</div>
</div>
</div>
</div>
</div>
<div class="fl-module fl-module-pp-notifications fl-node-5df0b9ee181a0"
data-node="5df0b9ee181a0">
<div class="fl-module-content fl-node-content">
<div class="pp-notification-wrapper">
<div class="pp-notification-inner">
<div class="pp-notification-content">
<p>Total vehicles passed through</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fl-col fl-node-5df0b6c700c8c fl-col-small"
data-node="5df0b6c700c8c">
<div class="fl-col-content fl-node-content">
<div class="fl-module fl-module-numbers fl-node-5df0ba8928d36"
data-node="5df0ba8928d36">
<div class="fl-module-content fl-node-content">
<div class="fl-number fl-number-circle">
<div class="fl-number-circle-container">
<div class="fl-number-text">
<div class="fl-number-string"><span
class="fl-number-int"><noscript>90</noscript></span>%
</div>
<span class="fl-number-after-text">Percent</span>
</div>
<div class="svg-container">
<svg class="svg" preserveAspectRatio="xMinYMin meet"
version="1.1"
viewBox="0 0 200 200">
<circle class="fl-bar-bg" cx="100"
cy="100" fill="transparent"
r="90"
stroke-dasharray="565.49"
stroke-dashoffset="0"></circle>
<circle class="fl-bar" cx="100" cy="100"
data-bbtest="sample-lang" fill="transparent"
r="90"
stroke-dasharray="565.49"
stroke-dashoffset="565.49"
transform="rotate(-90 100 100)"></circle>
</svg>
</div>
</div>
</div>
</div>
</div>
<div class="fl-module fl-module-pp-notifications fl-node-5df0ba49ad9e2"
data-node="5df0ba49ad9e2">
<div class="fl-module-content fl-node-content">
<div class="pp-notification-wrapper">
<div class="pp-notification-inner">
<div class="pp-notification-content">
<p>Traffic between 06h00 and 22h00</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fl-col fl-node-5df0b6c700c8f fl-col-small"
data-node="5df0b6c700c8f">
<div class="fl-col-content fl-node-content">
<div class="fl-module fl-module-numbers fl-node-5df0b6b202f9a"
data-node="5df0b6b202f9a">
<div class="fl-module-content fl-node-content">
<div class="fl-number fl-number-circle">
<div class="fl-number-circle-container">
<div class="fl-number-text">
<div class="fl-number-string"><span
class="fl-number-int"><noscript>31</noscript></span>
</div>
<span class="fl-number-after-text">Years Old</span>
</div>
<div class="svg-container">
<svg class="svg" preserveAspectRatio="xMinYMin meet"
version="1.1"
viewBox="0 0 200 200">
<circle class="fl-bar-bg" cx="100"
cy="100" fill="transparent"
r="90"
stroke-dasharray="565.49"
stroke-dashoffset="0"></circle>
<circle class="fl-bar" cx="100" cy="100"
data-bbtest="sample-lang" fill="transparent"
r="90"
stroke-dasharray="565.49"
stroke-dashoffset="565.49"
transform="rotate(-90 100 100)"></circle>
</svg>
</div>
</div>
</div>
</div>
</div>
<div class="fl-module fl-module-pp-notifications fl-node-5df0b906e7fed"
data-node="5df0b906e7fed">
<div class="fl-module-content fl-node-content">
<div class="pp-notification-wrapper">
<div class="pp-notification-inner">
<div class="pp-notification-content">
<p>Opened in March 1988</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Videos -->
<div class="fl-row fl-row-full-width fl-row-bg-color fl-node-5df0bbe730097"
data-node="5df0bbe730097">
<div class="fl-row-content-wrap">
<div class="uabb-row-separator uabb-top-row-separator">
</div>
<div class="fl-row-content fl-row-fixed-width fl-node-content">
<div class="fl-col-group fl-node-5df0bcd37b1d8" data-node="5df0bcd37b1d8">
<div class="fl-col fl-node-5df0bcd37b4ad" data-node="5df0bcd37b4ad">
<div class="fl-col-content fl-node-content">
<div class="fl-module fl-module-pp-heading fl-node-5df0ca689b38e"
data-node="5df0ca689b38e">
<div class="fl-module-content fl-node-content">
<div class="pp-heading-content">
<div class="pp-heading pp-center">
<h2 class="heading-title">
<span class="title-text pp-primary-title">View our Video tour</span>
</h2>
</div>
<div class="pp-heading-separator line_only pp-center">
<span class="pp-separator-line"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fl-col-group fl-node-5df0bbe74b6cf" data-node="5df0bbe74b6cf">
<div class="fl-col fl-node-5df0bbe74bae9 fl-col-small"
data-node="5df0bbe74bae9">
<div class="fl-col-content fl-node-content">
<div class="fl-module fl-module-heading fl-node-5df0bea64dad0"
data-node="5df0bea64dad0">
<div class="fl-module-content fl-node-content">
<h2 class="fl-heading">
<span class="fl-heading-text">360° Virtual Reality Experience </span>
</h2>
</div>
</div>
<div class="fl-module fl-module-pp-video fl-node-5df0be7651830"
data-node="5df0be7651830">
<div class="fl-module-content fl-node-content">
<div class="pp-video-wrapper pp-aspect-ratio-169">
<div class="pp-fit-aspect-ratio">
<div class="pp-video-image-overlay">
<img alt="" class="wp-image-39" height="600"
loading="lazy" src="images/home/{{ home_data.videoLeftThumb }}" width="800"/>
<script class="pp-video-lightbox-content"
type="text/html">
<div class="pp-video-container">
<div class="pp-fit-aspect-ratio">
<iframe class="pp-video-iframe"
allowfullscreen
allow="autoplay"
src="{{ home_data.videoLeft }}?feature=oembed&start&end&wmode=opaque&loop=0&controls=1&mute=0&rel=0&modestbranding=1"></iframe>
</div>
</div></script>
<div class="pp-video-play-icon"
role="button">
<svg version="1.1"
viewBox="0 0 415.346 415.346"
x="0px"
xml:space="preserve" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
y="0px">
<g>
<g>
<path d="M41.712,415.346c-11.763,0-21.3-9.537-21.3-21.3V21.299C20.412,9.536,29.949,0,41.712,0l346.122,191.697
c0,0,15.975,15.975,0,31.951C371.859,239.622,41.712,415.346,41.712,415.346z"/>
</g>
</svg>
<span class="pp-screen-only">Play Video</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fl-col fl-node-5df0bbe74baf5 fl-col-small"
data-node="5df0bbe74baf5">
<div class="fl-col-content fl-node-content">
<div class="fl-module fl-module-heading fl-node-5df0becfba461"
data-node="5df0becfba461">
<div class="fl-module-content fl-node-content">
<h2 class="fl-heading">
<span class="fl-heading-text">2D Video Experience</span>
</h2>
</div>
</div>
<div class="fl-module fl-module-pp-video fl-node-5df0bcc38c222"
data-node="5df0bcc38c222">
<div class="fl-module-content fl-node-content">
<div class="pp-video-wrapper pp-aspect-ratio-169">
<div class="pp-fit-aspect-ratio">
<div class="pp-video-image-overlay">
<img alt="" class="wp-image-40" height="600"
loading="lazy" src="images/home/{{ home_data.videoRightThumb }}" width="800"/>
<script class="pp-video-lightbox-content"
type="text/html">
<div class="pp-video-container">
<div class="pp-fit-aspect-ratio">
<iframe class="pp-video-iframe"
allowfullscreen
allow="autoplay"
src="{{ home_data.videoRight }}?feature=oembed&start&end&wmode=opaque&loop=0&controls=1&mute=0&rel=0&modestbranding=1"></iframe>
</div>
</div></script>
<div class="pp-video-play-icon"
role="button">
<svg version="1.1"
viewBox="0 0 415.346 415.346"
x="0px"
xml:space="preserve" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
y="0px">
<g>
<g>
<path d="M41.712,415.346c-11.763,0-21.3-9.537-21.3-21.3V21.299C20.412,9.536,29.949,0,41.712,0l346.122,191.697
c0,0,15.975,15.975,0,31.951C371.859,239.622,41.712,415.346,41.712,415.346z"/>
</g>
</svg>
<span class="pp-screen-only">Play Video</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- App download -->
<div class="fl-row fl-row-full-width fl-row-bg-none fl-node-5df0bf4042ebe"
data-node="5df0bf4042ebe">
<div class="fl-row-content-wrap">
<div class="uabb-row-separator uabb-top-row-separator">
</div>
<div class="fl-row-content fl-row-fixed-width fl-node-content">
<div class="fl-col-group fl-node-5df0c67dc1704" data-node="5df0c67dc1704">
<div class="fl-col fl-node-5df0c67dc19b3 fl-col-small fl-col-has-cols"
data-node="5df0c67dc19b3">
<div class="fl-col-content fl-node-content">
<div class="fl-module fl-module-pp-heading fl-node-5df0b1920c756 just"
data-node="5df0b1920c756">
<div class="fl-module-content fl-node-content">
<div class="pp-heading-content">
<div class="pp-heading pp-left">
<h2 class="heading-title">
<span class="title-text pp-primary-title">download our app</span>
</h2>
</div>
<div class="pp-heading-separator line_only pp-left">
<span class="pp-separator-line"></span>
</div>
</div>
</div>
</div>
<div class="fl-col-group fl-node-5df0c69162319 fl-col-group-nested"
data-node="5df0c69162319">
<div class="fl-col fl-node-5df0c691625a2 fl-col-small"
data-node="5df0c691625a2">
<div class="fl-col-content fl-node-content">
<div class="fl-module fl-module-pp-image fl-node-5df0c6b2b7337"
data-node="5df0c6b2b7337">
<div class="fl-module-content fl-node-content">
<div class="pp-photo-container">
<div class="pp-photo pp-photo-align-center pp-photo-align-responsive-default"
itemscope
itemtype="http://schema.org/ImageObject">
<div class="pp-photo-content ">
<div class="pp-photo-content-inner">
<a href="https://play.google.com/store/apps/details?id=com.bizarReality.SANRALHuguenotTunnelVRExperience&hl=en_ZA" target="_blank">
<img alt="google play"
class="pp-photo-img wp-image-48 size-full"
height="152"
itemprop="image"
loading="lazy"
sizes="(max-width: 506px) 100vw, 506px"
src="{{ asset('images/google-play.png') }}"
srcset="{{ asset('images/google-play.png')}} 506w, {{ asset('images/google-play-300x90.png')}} 300w"
width="506"/>
</a>
<div class="pp-overlay-bg"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fl-col fl-node-5df0c691625ae fl-col-small"
data-node="5df0c691625ae">
<div class="fl-col-content fl-node-content">
<div class="fl-module fl-module-pp-image fl-node-5df0c69da5c2d"
data-node="5df0c69da5c2d">
<div class="fl-module-content fl-node-content">
<div class="pp-photo-container">
<div class="pp-photo pp-photo-align-center pp-photo-align-responsive-default"
itemscope
itemtype="http://schema.org/ImageObject">
<div class="pp-photo-content ">
<div class="pp-photo-content-inner">
<a href="https://apps.apple.com/za/app/sanral-huguenot-tunnel-vr/id1577335006" target="_blank">
<img alt="applestore"
class="pp-photo-img wp-image-49 size-full"
height="152"
itemprop="image"
loading="lazy"
sizes="(max-width: 506px) 100vw, 506px"
src="{{ asset('images/applestore.png') }}"
srcset="{{ asset('images/applestore.png')}} 506w, {{ asset('images/applestore-300x90.png')}} 300w"
width="506"/>
</a>
<div class="pp-overlay-bg"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{# <div class="fl-col fl-node-5df0c67dc19c0 fl-col-small"#}
{# data-node="5df0c67dc19c0">#}
{# <div class="fl-col-content fl-node-content">#}
{# <div class="fl-module fl-module-pp-image-carousel fl-node-5df0c09e9922d"#}
{# data-node="5df0c09e9922d">#}
{# <div class="fl-module-content fl-node-content">#}
{# <div class="pp-image-carousel-wrapper">#}
{# <div class="pp-image-carousel swiper-container pp-carousel-navigation-outside">#}
{# <div class="swiper-wrapper">#}
{# <div class="pp-image-carousel-item swiper-slide">#}
{# <div class="pp-carousel-image-container"#}
{# style="background-image:url({{ asset('images/1a.jpg') }})"></div>#}
{# </div>#}
{# <div class="pp-image-carousel-item swiper-slide">#}
{# <div class="pp-carousel-image-container"#}
{# style="background-image:url('{{ asset('images/2a.jpg') }}')"></div>#}
{# </div>#}
{# <div class="pp-image-carousel-item swiper-slide">#}
{# <div class="pp-carousel-image-container"#}
{# style="background-image:url('{{ asset('images/3a.jpg') }}')"></div>#}
{# </div>#}
{# </div>#}
{# <!-- pagination -->#}
{# <div class="swiper-pagination"></div>#}
{# </div>#}
{# </div>#}
{# </div>#}
{# </div>#}
{# </div>#}
{# </div>#}
</div>
</div>
</div>
</div>
<!-- Latest News -->
{# <div class="fl-row fl-row-full-width fl-row-bg-color fl-node-5df0c9a8eea22"#}
{# data-node="5df0c9a8eea22">#}
{# <div class="fl-row-content-wrap">#}
{# <div class="uabb-row-separator uabb-top-row-separator">#}
{# </div>#}
{# <div class="fl-row-content fl-row-fixed-width fl-node-content">#}
{# <div class="fl-col-group fl-node-5df0c9a91c38a" data-node="5df0c9a91c38a">#}
{# <div class="fl-col fl-node-5df0c9a91c602" data-node="5df0c9a91c602">#}
{# <div class="fl-col-content fl-node-content">#}
{# <div class="fl-module fl-module-pp-heading fl-node-5df0bccba8f2b"#}
{# data-node="5df0bccba8f2b">#}
{# <div class="fl-module-content fl-node-content">#}
{# <div class="pp-heading-content">#}
{# <div class="pp-heading pp-center">#}
{# <h2 class="heading-title">#}
{# <span class="title-text pp-primary-title">Latest News</span>#}
{# </h2>#}
{# </div>#}
{# <div class="pp-heading-separator line_only pp-center">#}
{# <span class="pp-separator-line"></span>#}
{# </div>#}
{# </div>#}
{# </div>#}
{# </div>#}
{# <div class="fl-module fl-module-pp-content-tiles fl-node-5df0c9a8ec1c4"#}
{# data-node="5df0c9a8ec1c4">#}
{# <div class="fl-module-content fl-node-content">#}
{# <div class="pp-post-tiles pp-tile-layout-3"#}
{# itemscope="itemscope"#}
{# itemtype="http://schema.org/Blog">#}
{# <div class="pp-post-tile-left">#}
{# <div class="pp-post-tile-post pp-post-tile-post-1"#}
{# itemscope#}
{# itemtype="https://schema.org/BlogPosting">#}
{# <div class="pp-post-tile-image"#}
{# style="background-image: url('images/press_releases/{{ press1_data.banner }}')">#}
{# <a aria-label="Media release Fun and games with SANRAL at Scifest Africa"#}
{# href="{{ path('press_release_article',{'id': press1_data.id, 'title': press1_data.title|replace({' ':''})}) }}"#}
{# title="{{ press1_data.title }}"></a>#}
{# </div>#}
{# <div class="pp-post-tile-text">#}
{# <div class="pp-post-tile-info">#}
{# <div class="pp-post-tile-category">#}
{# <span class="pp-category-press releases">Press Releases</span>#}
{# </div>#}
{# <h3 class="pp-post-tile-title"#}
{# itemprop="headline">#}
{# <a href="media-release-fun-and-games-with-sanral-at-scifest-africa.html"#}
{# rel="bookmark"#}
{# title="{{ press1_data.title }}">#}
{# {{ press1_data.title }}#}
{# </a>#}
{# </h3>#}
{# </div>#}
{# </div>#}
{# </div>#}
{# </div>#}
{# <div class="pp-post-tile-right">#}
{# <div class="pp-post-tile-post pp-post-tile-post-2 pp-post-tile-medium"#}
{# itemscope#}
{# itemtype="https://schema.org/BlogPosting">#}
{# <div class="pp-post-tile-image"#}
{# style="background-image: url('images/press_releases/{{ press2_data.banner }}')">#}
{# <a href="{{ path('press_release_article',{'id': press2_data.id, 'title': press2_data.title|replace({' ':''})}) }}"></a>#}
{# </div>#}
{# <div class="pp-post-tile-text">#}
{# <div class="pp-post-tile-info">#}
{# <div class="pp-post-tile-category">#}
{# <span class="pp-category-press releases">Press Releases</span>#}
{# </div>#}
{# <h3 class="pp-post-tile-title"#}
{# itemprop="headline">#}
{# <a href="{{ path('press_release_article',{'id': press2_data.id, 'title': press2_data.title|replace({' ':''})}) }}">#}
{# {{ press2_data.title }}#}
{# </a>#}
{# </h3>#}
{# </div>#}
{# </div>#}
{# </div>#}
{# <div class="pp-post-tile-post pp-post-tile-post-3 pp-post-tile-medium">#}
{# <div class="pp-post-tile-image"#}
{# style="background-image: url('images/press_releases/{{ press3_data.banner }}')">#}
{# <a aria-label="R75 Section 1 Rehabilitation reaches half-way mark"#}
{# href="{{ path('press_release_article',{'id': press3_data.id, 'title': press3_data.title|replace({' ':''})}) }}"</a>#}
{# </div>#}
{# <div class="pp-post-tile-text">#}
{# <div class="pp-post-tile-info">#}
{# <div class="pp-post-tile-category">#}
{# <span class="pp-category-press releases">Press Releases</span>#}
{# </div>#}
{# <h3 class="pp-post-tile-title"#}
{# itemprop="headline">#}
{# <a href="{{ path('press_release_article',{'id': press3_data.id, 'title': press3_data.title|replace({' ':''})}) }}">#}
{# {{ press3_data.title }}#}
{# </a>#}
{# </h3>#}
{# </div>#}
{# </div>#}
{# </div>#}
{# </div>#}
{# </div>#}
{# <div class="fl-clear"></div>#}
{# </div>#}
{# </div>#}
{# </div>#}
{# </div>#}
{# </div>#}
{# </div>#}
{# </div>#}
{# </div>#}
</div>
<div class="uabb-js-breakpoint" style="display: none;"></div>
</div><!-- .fl-post-content -->
</article>
<!-- .fl-post -->
</div>
</div>
</div>
</div>
{% endblock %}