{# Settings #}
{% set root = "../../" %}
{% set mainNavActive_1 = "home" %}
{% set mainNavActive_2 = "home-allure" %}
{% set title = "Home Allure | " %}

{% include "html/assets/include/nunjucks/partials/head.njk" %}
    {% include "html/assets/include/nunjucks/partials/core-fonts.njk" %}
    {% include "html/assets/include/nunjucks/partials/core-css.njk" %}
    {% include "html/assets/include/nunjucks/partials/core-icons.njk" %}
    {% include "html/assets/include/nunjucks/partials/css/css-dzsparallaxer.njk" %}
    <link rel="stylesheet" href="{{ root }}assets/vendor/fancybox/jquery.fancybox.css">
    <link rel="stylesheet" href="{{ root }}assets/vendor/slick-carousel/slick/slick.css">
    <link rel="stylesheet" href="{{ root }}assets/vendor/animate.css">
    <link rel="stylesheet" href="{{ root }}assets/vendor/hs-megamenu/src/hs.megamenu.css">
    <link rel="stylesheet" href="{{ root }}assets/vendor/hamburgers/hamburgers.min.css">

    <!-- Revolution Slider -->
    <link rel="stylesheet" href="{{ root }}assets/vendor/revolution-slider/revolution/fonts/pe-icon-7-stroke/css/pe-icon-7-stroke.css">
    <link rel="stylesheet" href="{{ root }}assets/vendor/revolution-slider/revolution/css/settings.css">
    <link rel="stylesheet" href="{{ root }}assets/vendor/revolution-slider/revolution/css/layers.css">
    <link rel="stylesheet" href="{{ root }}assets/vendor/revolution-slider/revolution/css/navigation.css">

    {% include "html/assets/include/nunjucks/partials/css/css-unify.njk" %}
    {% include "html/assets/include/nunjucks/partials/css/css-custom.njk" %}
  </head>

  <body>
    <main>
      {% include "html/assets/include/nunjucks/partials/blocks/headers/header-main.njk" %}

      <!-- Revolution Slider -->
      <div class="g-overflow-hidden">
        <div id="welcome_wrapper" class="rev_slider_wrapper fullwidthbanner-container" data-alias="themeplicity-header177" data-source="gallery" style="margin:0px auto;background-color:#e9eae2;padding:0px;margin-top:0px;margin-bottom:0px;">
          <!-- START REVOLUTION SLIDER 5.4.1 fullwidth mode -->
          <div id="welcome" class="rev_slider fullwidthabanner" style="display:none;" data-version="5.4.1">
            <ul>  <!-- SLIDE  -->
              <li data-index="rs-3186" data-transition="fade" data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off" data-easein="default" data-easeout="default" data-masterspeed="300" data-rotate="0" data-saveperformance="off" data-title="Slide" data-param1="" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="">
                <!-- MAIN IMAGE -->
                <img src="{{ root }}assets/img/bg/transparent.png" data-bgcolor="#e9eae2" alt="" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="off" class="rev-slidebg">
                <!-- LAYERS -->

                <!-- LAYER NR. 1 -->
                <div class="tp-caption   tp-resizeme rs-parallaxlevel-14"
                     id="slide-3186-layer-13"
                     data-x="['right','right','right','right']" data-hoffset="['-328','-328','-328','-248']"
                     data-y="['bottom','bottom','bottom','bottom']" data-voffset="['-417','-417','-417','-240']"
                     data-width="none"
                     data-height="none"
                     data-whitespace="nowrap"

                     data-type="image"
                     data-responsive_offset="on"

                     data-frames='[{"delay":600,"speed":2000,"frame":"0","from":"x:right;rZ:-90deg;","to":"o:1;","ease":"Power4.easeOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'
                     data-textAlign="['inherit','inherit','inherit','inherit']"
                     data-paddingtop="[0,0,0,0]"
                     data-paddingright="[0,0,0,0]"
                     data-paddingbottom="[0,0,0,0]"
                     data-paddingleft="[0,0,0,0]"

                     style="z-index: 5;">
                  <img src="{{ root }}assets/img-temp/1500x1500/img1.png" alt="" data-ww="['700px','700px','700px','500px']" data-hh="['700px','700px','700px','500px']" width="1500" height="1500">
                </div>

                <!-- LAYER NR. 2 -->
                <div class="tp-caption   tp-resizeme rs-parallaxlevel-7"
                     id="slide-3186-layer-14"
                     data-x="['left','left','left','left']" data-hoffset="['-248','-248','-248','-190']"
                     data-y="['top','top','top','top']" data-voffset="['-219','-219','-219','-205']"
                     data-width="none"
                     data-height="none"
                     data-whitespace="nowrap"

                     data-type="image"
                     data-responsive_offset="on"

                     data-frames='[{"delay":600,"speed":2000,"frame":"0","from":"x:left;rZ:90deg;","to":"o:1;rZ:20;","ease":"Power4.easeOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'
                     data-textAlign="['inherit','inherit','inherit','inherit']"
                     data-paddingtop="[0,0,0,0]"
                     data-paddingright="[0,0,0,0]"
                     data-paddingbottom="[0,0,0,0]"
                     data-paddingleft="[0,0,0,0]"

                     style="z-index: 6;">
                  <img src="{{ root }}assets/img-temp/1000x1000/img1.png" alt="" data-ww="['650px','650px','650px','500px']" data-hh="['650px','650px','650px','500px']" width="1000" height="1000">
                </div>

                <!-- LAYER NR. 3 -->
                <div class="tp-caption   tp-resizeme rs-parallaxlevel-3"
                     id="slide-3186-layer-5"
                     data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
                     data-y="['bottom','bottom','bottom','bottom']" data-voffset="['0','-50','-50','-120']"
                     data-width="none"
                     data-height="none"
                     data-whitespace="nowrap"

                     data-type="image"
                     data-responsive_offset="on"

                     data-frames='[{"delay":600,"speed":1500,"frame":"0","from":"y:bottom;rX:45deg;","to":"o:1;","ease":"Power4.easeOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'
                     data-textAlign="['inherit','inherit','inherit','inherit']"
                     data-paddingtop="[0,0,0,0]"
                     data-paddingright="[0,0,0,0]"
                     data-paddingbottom="[0,0,0,0]"
                     data-paddingleft="[0,0,0,0]"

                     style="z-index: 7;">
                  <img src="{{ root }}assets/img-temp/1200x918/img1.png" alt="" data-ww="['600px','600px','600px','600px']" data-hh="['459px','459px','459px','459px']" width="1200" height="918">
                </div>

                <!-- LAYER NR. 4 -->
                <div class="tp-caption   tp-resizeme rs-parallaxlevel-6"
                     id="slide-3186-layer-7"
                     data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
                     data-y="['top','top','top','top']" data-voffset="['466','406','456','276']"
                     data-width="none"
                     data-height="none"
                     data-whitespace="nowrap"

                     data-type="image"
                     data-responsive_offset="on"

                     data-frames='[{"delay":600,"speed":1200,"frame":"0","from":"y:bottom;rX:90deg;","to":"o:1;","ease":"Power4.easeOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'
                     data-textAlign="['inherit','inherit','inherit','inherit']"
                     data-paddingtop="[0,0,0,0]"
                     data-paddingright="[0,0,0,0]"
                     data-paddingbottom="[0,0,0,0]"
                     data-paddingleft="[0,0,0,0]"

                     style="z-index: 8;">
                  <img src="{{ root }}assets/img-temp/800x800/img1.png" alt="" data-ww="['600px','600px','600px','600px']" data-hh="['600px','600px','600px','600px']" width="800" height="800">
                </div>

                <!-- LAYER NR. 5 -->
                <div class="tp-caption   tp-resizeme rs-parallaxlevel-6"
                     id="slide-3186-layer-8"
                     data-x="['center','center','center','center']" data-hoffset="['-2','-2','-2','-2']"
                     data-y="['top','top','top','top']" data-voffset="['707','647','697','517']"
                     data-width="none"
                     data-height="none"
                     data-whitespace="nowrap"

                     data-type="image"
                     data-responsive_offset="on"

                     data-frames='[{"delay":750,"speed":1200,"frame":"0","from":"y:bottom;","to":"o:1;","ease":"Power4.easeOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'
                     data-textAlign="['inherit','inherit','inherit','inherit']"
                     data-paddingtop="[0,0,0,0]"
                     data-paddingright="[0,0,0,0]"
                     data-paddingbottom="[0,0,0,0]"
                     data-paddingleft="[0,0,0,0]"

                     style="z-index: 9;">
                  <img src="{{ root }}assets/img-temp/200x240/img1.jpg" alt="" data-ww="['100px','100px','100px','100px']" data-hh="['120px','120px','120px','120px']" width="200" height="240">
                </div>

                <!-- LAYER NR. 6 -->
                <div class="tp-caption g-color-primary tp-resizeme rs-parallaxlevel-6"
                     id="slide-3186-layer-11"
                     data-x="['center','center','center','center']" data-hoffset="['-2','-2','-2','-2']"
                     data-y="['top','top','top','top']" data-voffset="['721','661','711','531']"
                     data-width="none"
                     data-height="none"
                     data-whitespace="nowrap"

                     data-type="text"
                     data-responsive_offset="on"

                     data-frames='[{"delay":800,"speed":1200,"frame":"0","from":"y:bottom;","to":"o:1;","ease":"Power4.easeOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'
                     data-textAlign="['inherit','inherit','inherit','inherit']"
                     data-paddingtop="[0,0,0,0]"
                     data-paddingright="[0,0,0,0]"
                     data-paddingbottom="[0,0,0,0]"
                     data-paddingleft="[0,0,0,0]"

                     style="z-index: 10; white-space: nowrap; font-size: 50px; line-height: 50px; font-weight: 400;">
                  <i class="pe-7s-paper-plane"></i></div>

                <!-- LAYER NR. 7 -->
                <div class="tp-caption rev-btn g-color-primary g-brd-primary tp-resizeme rs-parallaxlevel-6"
                     id="slide-3186-layer-12"
                     data-x="['center','center','center','center']" data-hoffset="['-2','-2','-2','-2']"
                     data-y="['top','top','top','top']" data-voffset="['787','727','777','597']"
                     data-width="none"
                     data-height="none"
                     data-whitespace="nowrap"

                     data-type="button"
                     data-responsive_offset="on"

                     data-frames='[{"delay":850,"speed":1200,"frame":"0","from":"y:bottom;","to":"o:1;","ease":"Power4.easeOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'
                     data-textAlign="['inherit','inherit','inherit','inherit']"
                     data-paddingtop="[0,0,0,0]"
                     data-paddingright="[30,30,30,30]"
                     data-paddingbottom="[0,0,0,0]"
                     data-paddingleft="[30,30,30,30]"

                     style="z-index: 11; white-space: nowrap; font-size: 11px; line-height: 28px; font-weight: 500; border-style:solid;border-width:1px 1px 1px 1px;border-radius:3px 3px 3px 3px;outline:none;box-shadow:none;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;cursor:pointer;">
                  <i class="fa fa-chevron-right"></i></div>

                <!-- LAYER NR. 9 -->
                <div class="tp-caption  "
                     id="slide-3186-layer-1"
                     data-x="['center','center','center','center']" data-hoffset="['-1','0','0','0']"
                     data-y="['top','top','top','top']" data-voffset="['267','217','214','116']"
                     data-fontsize="['60','60','40','30']"
                     data-lineheight="['60','60','40','30']"
                     data-width="['none','none','480','320']"
                     data-height="none"
                     data-whitespace="nowrap"

                     data-type="text"
                     data-responsive_offset="off"
                     data-responsive="off"
                     data-frames='[{"delay":300,"speed":1000,"frame":"0","from":"y:50px;opacity:0;","to":"o:1;","ease":"Power4.easeOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'
                     data-textAlign="['center','center','center','center']"
                     data-paddingtop="[0,0,0,0]"
                     data-paddingright="[0,0,0,0]"
                     data-paddingbottom="[0,0,0,0]"
                     data-paddingleft="[0,0,0,0]"

                     style="z-index: 13; white-space: nowrap; font-size: 60px; font-weight: 700; line-height: 60px; color: rgba(0, 0, 0, 1);">We Create
                </div>

                <!-- LAYER NR. 10 -->
                <div class="tp-caption  "
                     id="slide-3186-layer-2"
                     data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
                     data-y="['top','top','top','top']" data-voffset="['340','290','265','152']"
                     data-fontsize="['60','60','40','30']"
                     data-lineheight="['60','60','40','30']"
                     data-width="['none','none','440','321']"
                     data-height="none"
                     data-whitespace="['nowrap','nowrap','nowrap','normal']"

                     data-type="text"
                     data-responsive_offset="off"
                     data-responsive="off"
                     data-frames='[{"delay":400,"speed":1000,"frame":"0","from":"y:50px;opacity:0;","to":"o:1;","ease":"Power4.easeOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'
                     data-textAlign="['center','center','center','center']"
                     data-paddingtop="[0,0,0,0]"
                     data-paddingright="[0,0,0,0]"
                     data-paddingbottom="[0,0,0,0]"
                     data-paddingleft="[0,0,0,0]"

                     style="z-index: 14; white-space: nowrap; font-size: 60px; line-height: 60px; font-weight: 100; color: rgba(0, 0, 0, 1);">simple web solutions
                </div>

                <!-- LAYER NR. 11 -->
                <div class="tp-caption rev-btn g-color-white--hover g-bg-primary--hover g-brd-primary--hover tp-rs-menulink"
                     id="slide-3186-layer-4"
                     data-x="['center','center','center','center']" data-hoffset="['-130','-130','-110','0']"
                     data-y="['top','top','top','top']" data-voffset="['450','401','338','208']"
                     data-lineheight="['60','60','60','50']"
                     data-width="['240','240','200','240']"
                     data-height="none"
                     data-whitespace="nowrap"

                     data-type="button"
                     data-actions='[{"event":"click","action":"startlayer","layer":"slide-3186-layer-17","delay":""},{"event":"click","action":"startlayer","layer":"slide-3186-layer-16","delay":""},{"event":"click","action":"startlayer","layer":"slide-3186-layer-18","delay":""},{"event":"click","action":"playvideo","layer":"slide-3186-layer-16","delay":"500"},{"event":"click","action":"gofullscreen","delay":""}]'
                     data-responsive_offset="off"
                     data-responsive="off"
                     data-frames='[{"delay":500,"speed":1000,"frame":"0","from":"y:50px;opacity:0;","to":"o:1;","ease":"Power4.easeOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'
                     data-textAlign="['center','center','center','center']"
                     data-paddingtop="[0,0,0,0]"
                     data-paddingright="[0,0,0,0]"
                     data-paddingbottom="[0,0,0,0]"
                     data-paddingleft="[0,0,0,0]"

                     style="z-index: 15; min-width: 240px; max-width: 240px; white-space: nowrap; font-size: 13px; line-height: 60px; font-weight: 500; color: rgba(0, 0, 0, 0.90);background-color:rgba(0, 0, 0, 0);border-color:rgba(0, 0, 0, 0.50);border-style:solid;border-width:1px 1px 1px 1px;border-radius:50px 50px 50px 50px;outline:none;box-shadow:none;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;letter-spacing:2px;cursor:pointer;">WATCH A VIDEO
                </div>

                <!-- LAYER NR. 12 -->
                <a class="tp-caption rev-btn   tp-rs-menulink"
                   id="slide-3186-layer-15"
                   data-x="['center','center','center','center']" data-hoffset="['130','130','110','0']"
                   data-y="['top','top','top','top']" data-voffset="['450','401','338','270']"
                   data-lineheight="['60','60','60','50']"
                   data-width="['240','240','200','240']"
                   data-height="none"
                   data-whitespace="nowrap"

                   data-type="button"
                   data-actions=''
                   data-responsive_offset="off"
                   data-responsive="off"
                   data-frames='[{"delay":500,"speed":1000,"frame":"0","from":"y:50px;opacity:0;","to":"o:1;","ease":"Power4.easeOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"},{"frame":"hover","speed":"0","ease":"Linear.easeNone","force":true,"to":"o:1;rX:0;rY:0;rZ:0;z:0;","style":"c:rgba(255, 255, 255, 1.00);bg:rgba(0, 0, 0, 1.00);bc:rgba(233, 234, 226, 1.00);"}]'
                   data-textAlign="['center','center','center','center']"
                   data-paddingtop="[0,0,0,0]"
                   data-paddingright="[0,0,0,0]"
                   data-paddingbottom="[0,0,0,0]"
                   data-paddingleft="[0,0,0,0]"

                   style="z-index: 16; background: url('../../assets/img-temp/300x60/img1.jpg') no-repeat center center; background-size: cover; min-width: 240px; max-width: 240px; white-space: nowrap; font-size: 13px; line-height: 60px; font-weight: 500; color: rgba(255, 255, 255, 1.00);background-color:rgba(0, 0, 0, 0.50);border-color:rgba(0, 0, 0, 0);border-style:solid;border-width:1px 1px 1px 1px;border-radius:50px 50px 50px 50px;outline:none;box-shadow:none;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;letter-spacing:2px;cursor:pointer;">PURCHASE NOW </a>

                <!-- LAYER NR. 13 -->
                <div class="tp-caption tp-shape tp-shapewrapper "
                     id="slide-3186-layer-17"
                     data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
                     data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']"
                     data-width="full"
                     data-height="full"
                     data-whitespace="nowrap"

                     data-type="shape"
                     data-actions='[{"event":"click","action":"stopvideo","layer":"slide-3186-layer-16","delay":""},{"event":"click","action":"stoplayer","layer":"slide-3186-layer-17","delay":""},{"event":"click","action":"stoplayer","layer":"slide-3186-layer-16","delay":""},{"event":"click","action":"stoplayer","layer":"slide-3186-layer-18","delay":""},{"event":"click","action":"exitfullscreen","delay":""}]'
                     data-basealign="slide"
                     data-responsive_offset="off"
                     data-responsive="off"
                     data-frames='[{"delay":"bytrigger","speed":300,"frame":"0","from":"opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"bytrigger","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"},{"frame":"hover","speed":"0","ease":"Linear.easeNone","force":true,"to":"o:1;rX:0;rY:0;rZ:0;z:0;","style":"c:rgba(0, 0, 0, 1.00);bs:solid;bw:0 0 0 0;"}]'
                     data-textAlign="['inherit','inherit','inherit','inherit']"
                     data-paddingtop="[0,0,0,0]"
                     data-paddingright="[0,0,0,0]"
                     data-paddingbottom="[0,0,0,0]"
                     data-paddingleft="[0,0,0,0]"
                     data-lasttriggerstate="reset"
                     style="z-index: 17;background-color:rgba(0, 0, 0, 0.85);border-color:rgba(0, 0, 0, 0);cursor:pointer;"></div>

                <!-- LAYER NR. 14 -->
                <div class="tp-caption   tp-resizeme tp-videolayer"
                     id="slide-3186-layer-16"
                     data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
                     data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']"
                     data-whitespace="nowrap"

                     data-type="video"
                     data-responsive_offset="on"

                     data-frames='[{"delay":"bytrigger","speed":300,"frame":"0","from":"opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"bytrigger","speed":0,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'
                     data-vimeoid="185336500" data-videoattributes="title=0&byline=0&portrait=0&api=1" data-videowidth="['1024px','800px','640','480']" data-videoheight="['576px','600px','360','270px']" data-videoloop="none" data-textAlign="['inherit','inherit','inherit','inherit']"
                     data-paddingtop="[0,0,0,0]"
                     data-paddingright="[0,0,0,0]"
                     data-paddingbottom="[0,0,0,0]"
                     data-paddingleft="[0,0,0,0]"
                     data-lasttriggerstate="reset" data-autoplay="off"
                     data-volume="100" data-stopallvideos="true"

                     style="z-index: 18;"></div>

                <!-- LAYER NR. 15 -->
                <div class="tp-caption   tp-resizeme tp-svg-layer"
                     id="slide-3186-layer-18"
                     data-x="['right','right','right','right']" data-hoffset="['20','20','20','20']"
                     data-y="['top','top','top','top']" data-voffset="['20','20','20','20']"
                     data-width="60"
                     data-height="60"
                     data-whitespace="nowrap"

                     data-type="svg"
                     data-actions='[{"event":"click","action":"stopvideo","layer":"slide-3186-layer-16","delay":""},{"event":"click","action":"stoplayer","layer":"slide-3186-layer-17","delay":""},{"event":"click","action":"stoplayer","layer":"slide-3186-layer-16","delay":""},{"event":"click","action":"stoplayer","layer":"slide-3186-layer-18","delay":""},{"event":"click","action":"exitfullscreen","delay":""}]'
                     data-svg_src="{{ root }}assets/figures/ic_close_36px.svg"
                     data-svg_idle="sc:transparent;sw:0;sda:0;sdo:0;"
                     data-basealign="slide"
                     data-responsive_offset="off"

                     data-frames='[{"delay":"bytrigger","speed":300,"frame":"0","from":"opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"bytrigger","speed":0,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'
                     data-textAlign="['inherit','inherit','inherit','inherit']"
                     data-paddingtop="[0,0,0,0]"
                     data-paddingright="[0,0,0,0]"
                     data-paddingbottom="[0,0,0,0]"
                     data-paddingleft="[0,0,0,0]"
                     data-lasttriggerstate="reset"
                     style="z-index: 19; min-width: 60px; max-width: 60px; max-width: 60px; max-width: 60px; color: rgba(255, 255, 255, 1.00);cursor:pointer;"></div>
              </li>
            </ul>
            <div class="tp-bannertimer tp-bottom" style="visibility: hidden !important;"></div>
          </div>
        </div>
      </div>
      <!-- End Revolution Slider -->

      <!-- About -->
      <section class="container g-pt-100 g-pb-70">
        <div class="masonry-grid row">
          <div class="masonry-grid-sizer col-sm-1"></div>

          <div class="masonry-grid-item col-md-6 g-mb-30">
            <div class="g-px-50 g-pb-50">
              <h1 class="g-color-black g-font-weight-600 g-line-height-1_4">Creative Digital &amp;<br>Enthusiastic Agency
              </h1>
            </div>
          </div>

          <div class="masonry-grid-item col-md-6 g-mb-30">
            <div class="g-px-50--lg g-pb-50--lg">
              <p class="g-color-black g-font-weight-600">This is where we sit down, grab a cup of coffee and dial in the details. Understanding the task at hand and ironing out the wrinkles is key.</p>
              <p>Now that we've aligned the details, it's time to get things mapped out and organized. This part is really crucial in keeping the project in line to completion.</p>
            </div>
          </div>

          <div class="masonry-grid-item col-sm-6 col-md-5 g-mb-30">
            <img class="img-fluid w-100" src="{{ root }}assets/img-temp/500x320/img2.jpg" alt="Image description">
          </div>

          <div class="masonry-grid-item col-sm-6 col-md-5 g-offset-md-1 g-mb-30">
            <img class="img-fluid w-100" src="{{ root }}assets/img-temp/500x320/img3.jpg" alt="Image description">
          </div>

          <div class="masonry-grid-item col-md-5 g-mb-30">
            <div class="g-px-50--lg g-pt-50--lg">
              <h2 class="h3 g-color-black g-font-weight-600">What We Do</h2>

              <div class="row">
                <ul class="col-lg-6 list-unstyled">
                  <li class="g-my-15">
                    <span class="u-icon-v1 g-color-primary"><i class="icon-finance-138 u-line-icon-pro"></i></span>
                    <a class="g-brd-bottom g-brd-1 g-brd-gray-dark-v4 g-brd-black--hover g-color-gray-dark-v3 g-color-primary--hover g-text-underline--none--hover g-transition-0_3 pb-1" href="#">Marketing</a>
                  </li>
                  <li class="g-my-15">
                    <span class="u-icon-v1 g-color-primary"><i class="icon-finance-007 u-line-icon-pro"></i></span>
                    <a class="g-brd-bottom g-brd-1 g-brd-gray-dark-v4 g-brd-black--hover g-color-gray-dark-v3 g-color-primary--hover g-text-underline--none--hover g-transition-0_3 pb-1" href="#">Project planning</a>
                  </li>
                  <li>
                    <span class="u-icon-v1 g-color-primary"><i class="icon-education-087 u-line-icon-pro"></i></span>
                    <a class="g-brd-bottom g-brd-1 g-brd-gray-dark-v4 g-brd-black--hover g-color-gray-dark-v3 g-color-primary--hover g-text-underline--none--hover g-transition-0_3 pb-1" href="#">Branding work</a>
                  </li>
                </ul>
                <ul class="col-lg-6 list-unstyled">
                  <li class="g-my-15--lg">
                    <span class="u-icon-v1 g-color-primary"><i class="icon-finance-122 u-line-icon-pro"></i></span>
                    <a class="g-brd-bottom g-brd-1 g-brd-gray-dark-v4 g-brd-black--hover g-color-gray-dark-v3 g-color-primary--hover g-text-underline--none--hover g-transition-0_3 pb-1" href="#">Design</a>
                  </li>
                  <li class="g-my-15">
                    <span class="u-icon-v1 g-color-primary"><i class="icon-finance-189 u-line-icon-pro"></i></span>
                    <a class="g-brd-bottom g-brd-1 g-brd-gray-dark-v4 g-brd-black--hover g-color-gray-dark-v3 g-color-primary--hover g-text-underline--none--hover g-transition-0_3 pb-1" href="#">Support</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>

          <div class="masonry-grid-item col-md-5 g-offset-md-1 g-mb-30">
            <div class="g-px-50--lg g-pt-50--lg">
              <p>Whether through commerce or just an experience to tell your brand's story, the time has come to start using development languages that fit your projects needs.</p>
            </div>
          </div>
        </div>
      </section>
      <!-- End About -->

      <!-- Testimonials -->
      <section class="dzsparallaxer auto-init height-is-based-on-content use-loading g-bg-cover g-bg-black-opacity-0_4--after">
        <div class="divimage dzsparallaxer--target w-100" style="height: 120%; background-image: url({{ root }}assets/img-temp/1920x1080/img3.jpg);"></div>
        <div class="container g-z-index-1 g-py-120">
          <div class="row justify-content-center">
            <div class="col-lg-8">
              <!-- Testimonials -->
              <div class="g-brd-x g-brd-y g-brd-3 g-brd-cyan-gradient-opacity-v1 g-color-white text-center g-z-index-1 g-pa-30">
                <blockquote class="u-blockquote-v4 g-font-size-30 g-mb-30">If you can design one thing, you can design everything. Just believe it.</blockquote>
                <h4 class="h5 g-color-cyan g-font-weight-700 text-uppercase g-mb-0">Kathy Reyes</h4>
              </div>
              <!-- End Testimonials -->
            </div>
          </div>
        </div>
      </section>
      <!-- End Testimonials -->

      <!-- Icon Blocks -->
      <section class="g-pos-rel g-overflow-hidden">
        <div class="container g-pt-100 g-pb-50">
          <div class="row justify-content-between">
            <div class="col-lg-5 g-mb-50">
              <!-- Heading -->
              <div class="text-center text-lg-left g-mb-60">
                <div class="g-mb-30">
                  <h2 class="g-color-black g-font-weight-600 g-mb-30">The Benefits<br>of Using Unify Template</h2>
                  <p>The time has come to bring those ideas and plans to life. This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.</p>
                </div>
                <a class="btn btn-md u-btn-primary g-font-weight-600 g-font-size-12 g-rounded-25 text-uppercase g-px-30 g-py-13" href="#">Read More</a>
              </div>
              <!-- End Heading -->
            </div>

            <div class="col-lg-6">
              <!-- Icon Blocks -->
              <div class="row">
                <div class="col-sm-6 text-center text-lg-left g-mb-50">
                  <!-- Icon Blocks -->
                  <span class="d-inline-block g-color-primary g-font-size-30 g-rounded-5 mb-2">
                  <i class="icon-education-087 u-line-icon-pro"></i>
                </span>
                  <h3 class="h5 g-color-black g-font-weight-600 mb-2">Trustworthy</h3>
                  <p class="mb-0">We strive to embrace and drive change in our industry.</p>
                  <!-- End Icon Blocks -->
                </div>

                <div class="col-sm-6 text-center text-lg-left g-mb-50">
                  <!-- Icon Blocks -->
                  <span class="d-inline-block g-color-primary g-font-size-30 g-rounded-5 mb-2">
                  <i class="icon-education-035 u-line-icon-pro"></i>
                </span>
                  <h3 class="h5 g-color-black g-font-weight-600 mb-2">Helpful</h3>
                  <p class="mb-0">We strive to embrace and drive change in our industry.</p>
                  <!-- End Icon Blocks -->
                </div>

                <div class="col-sm-6 text-center text-lg-left g-mb-50">
                  <!-- Icon Blocks -->
                  <span class="d-inline-block g-color-primary g-font-size-30 g-rounded-5 mb-2">
                  <i class="icon-education-141 u-line-icon-pro"></i>
                </span>
                  <h3 class="h5 g-color-black g-font-weight-600 mb-2">Fast and Easy</h3>
                  <p class="mb-0">We strive to embrace and drive change in our industry.</p>
                  <!-- End Icon Blocks -->
                </div>

                <div class="col-sm-6 text-center text-lg-left g-mb-50">
                  <!-- Icon Blocks -->
                  <span class="d-inline-block g-color-primary g-font-size-30 g-rounded-5 mb-2">
                  <i class="icon-finance-256 u-line-icon-pro"></i>
                </span>
                  <h3 class="h5 g-color-black g-font-weight-600 mb-2">Great Prices</h3>
                  <p class="mb-0">We strive to embrace and drive change in our industry.</p>
                  <!-- End Icon Blocks -->
                </div>
              </div>
              <!-- End Icon Blocks -->
            </div>
          </div>

          <img class="g-width-600 g-pos-abs g-bottom-minus-25x g-z-index-minus-1" src="{{ root }}assets/img/maps/map3.png" alt="Image description">
        </div>
      </section>
      <!-- End Icon Blocks -->

      <!-- Recommend -->
      <section class="g-bg-secondary">
        <div class="container g-py-100">
          <!-- Carousel -->
          <div class="row justify-content-center">
            <div class="col-lg-11">
              <div class="text-center g-mb-50">
                <h2 class="g-color-black g-font-weight-600 mb-3">Why People Use Unify</h2>
                <p>Watch the videos on why the most successfull enterprenuers recommend Unify.</p>
              </div>

              <div class="u-shadow-v21">
                <div class="js-carousel"
                     data-infinite="true"
                     data-autoplay="true"
                     data-fade="true"
                     data-speed="5000"
                     data-arrows-classes="u-arrow-v1 u-shadow-v19 g-absolute-centered--y g-width-40 g-height-40 g-color-gray g-bg-white g-color-white--hover g-bg-black--hover rounded g-mt-minus-10"
                     data-arrow-left-classes="fa fa-angle-left g-left-minus-50"
                     data-arrow-right-classes="fa fa-angle-right g-right-minus-50">
                  <!-- Slider -->
                  <div class="js-slide">
                    <div class="row no-gutters">
                      <div class="col-lg-8">
                        <div class="h-100 g-min-height-300 g-bg-size-cover g-bg-pos-center" data-bg-img-src="{{ root }}assets/img-temp/900x600/img2.jpg">
                          <div class="g-absolute-centered g-px-50 g-py-200">
                            <a class="js-fancybox d-inline-block" href="javascript:;"
                               data-src="//www.youtube.com/embed/BNpiwOkKIJ8?autoplay=1"
                               data-speed="350"
                               data-caption="Single Image">
                              <span class="u-icon-v3 g-bg-primary g-color-white g-bg-black--hover g-rounded-50x g-cursor-pointer">
                                <i class="g-font-size-default g-pos-rel g-left-2 fa fa-play"></i>
                              </span>
                            </a>
                          </div>
                        </div>
                      </div>

                      <div class="col-lg-4">
                        <div class="g-bg-white text-center g-px-20 g-py-100">
                          <img class="d-inline-block g-width-100 g-height-100 rounded-circle g-mb-30" src="{{ root }}assets/img-temp/200x200/img1.jpg" alt="Image description">
                          <h4 class="h6 g-color-black g-font-weight-700 text-uppercase mb-3">Swan<br>Alexanderov</h4>
                          <div class="d-inline-block g-width-30 g-height-2 g-bg-primary mb-3"></div>
                          <span class="d-block g-color-gray-dark-v4">CEO, Director, Invison</span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- End Slider -->

                  <!-- Slider -->
                  <div class="js-slide">
                    <div class="row no-gutters">
                      <div class="col-lg-8">
                        <div class="h-100 g-min-height-300 g-bg-size-cover g-bg-pos-center" data-bg-img-src="{{ root }}assets/img-temp/900x600/img3.jpg">
                          <div class="g-absolute-centered g-px-50 g-py-200">
                            <a class="js-fancybox d-inline-block" href="javascript:;"
                               data-src="//www.youtube.com/embed/BNpiwOkKIJ8?autoplay=1"
                               data-speed="350"
                               data-caption="Single Image">
                              <span class="u-icon-v3 g-bg-primary g-color-white g-bg-black--hover g-rounded-50x g-cursor-pointer">
                                <i class="g-font-size-default g-pos-rel g-left-2 fa fa-play"></i>
                              </span>
                            </a>
                          </div>
                        </div>
                      </div>

                      <div class="col-lg-4">
                        <div class="g-bg-white text-center g-px-20 g-py-100">
                          <img class="d-inline-block g-width-100 g-height-100 rounded-circle g-mb-30" src="{{ root }}assets/img-temp/200x200/img2.jpg" alt="Image description">
                          <h4 class="h6 g-color-black g-font-weight-700 text-uppercase mb-3">Luisa<br>Johnson</h4>
                          <div class="d-inline-block g-width-30 g-height-2 g-bg-primary mb-3"></div>
                          <span class="d-block g-color-gray-dark-v4">Lead Designer, Airbnb</span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- End Slider -->

                  <!-- Slider -->
                  <div class="js-slide">
                    <div class="row no-gutters">
                      <div class="col-lg-8">
                        <div class="h-100 g-min-height-300 g-bg-size-cover g-bg-pos-center" data-bg-img-src="{{ root }}assets/img-temp/900x600/img4.jpg">
                          <div class="g-absolute-centered g-px-50 g-py-200">
                            <a class="js-fancybox d-inline-block" href="javascript:;"
                               data-src="//www.youtube.com/embed/BNpiwOkKIJ8?autoplay=1"
                               data-speed="350"
                               data-caption="Single Image">
                              <span class="u-icon-v3 g-bg-primary g-color-white g-bg-black--hover g-rounded-50x g-cursor-pointer">
                                <i class="g-font-size-default g-pos-rel g-left-2 fa fa-play"></i>
                              </span>
                            </a>
                          </div>
                        </div>
                      </div>

                      <div class="col-lg-4">
                        <div class="g-bg-white text-center g-px-20 g-py-100">
                          <img class="d-inline-block g-width-100 g-height-100 rounded-circle g-mb-30" src="{{ root }}assets/img-temp/200x200/img3.jpg" alt="Image description">
                          <h4 class="h6 g-color-black g-font-weight-700 text-uppercase mb-3">Sara<br>Klinton</h4>
                          <div class="d-inline-block g-width-30 g-height-2 g-bg-primary mb-3"></div>
                          <span class="d-block g-color-gray-dark-v4">Manager, Tesla</span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- End Slider -->
                </div>
              </div>
            </div>
          </div>
          <!-- End Carousel -->
        </div>
      </section>
      <!-- End Recommend -->

      <!-- News -->
      <section class="container g-pt-100">
        <div class="text-center g-mb-50">
          <h2 class="g-color-black g-font-weight-600 mb-3">Latest News</h2>
          <p>Follow the latest news and blogs.</p>
        </div>

        <div class="row g-mb-20">
          <div class="col-lg-6 g-mb-80">
            <!-- Blog Minimal Blocks -->
            <article>
              <img class="img-fluid w-100 g-rounded-5 g-mb-25" src="{{ root }}assets/img-temp/740x380/img1.jpg" alt="Image description">

              <div class="px-4">
                <ul class="d-flex justify-content-start align-items-end list-inline g-color-gray-dark-v5 g-font-size-13 g-mt-minus-45 g-mb-25">
                  <li class="list-inline-item mr-5">
                    <img class="g-width-40 g-height-40 g-brd-around g-brd-2 g-brd-white rounded-circle mb-2" src="{{ root }}assets/img-temp/100x100/img7.jpg" alt="Image description">
                    <h4 class="h6 g-font-weight-600 g-font-size-13 mb-0">
                      <a class="g-color-gray-dark-v4" href="#">Alex Teseira</a>
                    </h4>
                  </li>
                  <li class="list-inline-item">
                    <span class="g-font-size-12">May 31, 2017</span>
                  </li>
                  <li class="list-inline-item ml-auto">
                    <a class="g-color-gray-dark-v5 g-color-primary--hover g-font-size-default g-transition-0_3 g-text-underline--none--hover" href="#">
                      <i class="align-middle mr-1 icon-medical-022 u-line-icon-pro"></i>
                    </a>
                    <span class="g-color-gray-dark-v5">5k</span>
                  </li>
                  <li class="list-inline-item ml-3">
                    <a class="g-color-gray-dark-v5 g-color-primary--hover g-font-size-default g-transition-0_3 g-text-underline--none--hover" href="#">
                      <i class="align-middle mr-1 icon-finance-206 u-line-icon-pro"></i>
                    </a>
                    <span class="g-color-gray-dark-v5">10</span>
                  </li>
                </ul>

                <h2 class="h5 g-color-black g-font-weight-600">
                  <a class="u-link-v5 g-color-black g-color-primary--hover" href="#">Exclusive interview with InVision's CEO</a>
                </h2>
                <p class="g-color-gray-dark-v4">Clark Valberg is the founder and CEO of InVision. If you are a designer, you have probably gotten an email from Clark or from InVision at one time or another, but if you’re not familiar with the company.</p>
                <a class="g-font-weight-700 g-font-size-13" href="#">read more</a>
              </div>
            </article>
            <!-- End Blog Minimal Blocks -->
          </div>

          <div class="col-lg-6 g-mb-80">
            <!-- Blog Minimal Blocks -->
            <article>
              <img class="img-fluid w-100 g-rounded-5 g-mb-25" src="{{ root }}assets/img-temp/740x380/img2.jpg" alt="Image description">

              <div class="px-4">
                <ul class="d-flex justify-content-start align-items-end list-inline g-color-gray-dark-v5 g-font-size-13 g-mt-minus-45 g-mb-25">
                  <li class="list-inline-item mr-5">
                    <img class="g-width-40 g-height-40 g-brd-around g-brd-2 g-brd-white rounded-circle mb-2" src="{{ root }}assets/img-temp/100x100/img6.jpg" alt="Image description">
                    <h4 class="h6 g-font-weight-600 g-font-size-13 mb-0">
                      <a class="g-color-gray-dark-v4" href="#">Sara Kajevnikova</a>
                    </h4>
                  </li>
                  <li class="list-inline-item">
                    <span class="g-font-size-12">June 1, 2017</span>
                  </li>
                  <li class="list-inline-item ml-auto">
                    <a class="g-color-gray-dark-v5 g-color-primary--hover g-font-size-default g-transition-0_3 g-text-underline--none--hover" href="#">
                      <i class="align-middle mr-1 icon-medical-022 u-line-icon-pro"></i>
                    </a>
                    <span class="g-color-gray-dark-v5">3.3k</span>
                  </li>
                  <li class="list-inline-item ml-3">
                    <a class="g-color-gray-dark-v5 g-color-primary--hover g-font-size-default g-transition-0_3 g-text-underline--none--hover" href="#">
                      <i class="align-middle mr-1 icon-finance-206 u-line-icon-pro"></i>
                    </a>
                    <span class="g-color-gray-dark-v5">8</span>
                  </li>
                </ul>

                <h2 class="h5 g-color-black g-font-weight-600">
                  <a class="u-link-v5 g-color-black g-color-primary--hover" href="#">Announcing a free plan for small teams</a>
                </h2>
                <p class="g-color-gray-dark-v4">At Wake, our mission has always been focused on bringing openness and transparency to the design process. We’ve always believed that by providing a space.</p>
                <a class="g-font-weight-700 g-font-size-13" href="#">read more</a>
              </div>
            </article>
            <!-- End Blog Minimal Blocks -->
          </div>
        </div>
      </section>
      <!-- End News -->

      <!-- Newsletter -->
      <section class="container">
        <div class="g-bg-secondary g-py-70 g-px-20">
          <div class="row justify-content-center">
            <div class="col-sm-10 col-md-7 col-lg-5">
              <div class="text-center g-mb-50">
                <h2 class="g-color-black g-font-weight-600 mb-3">Newsletter</h2>
                <p>Subscribe to our newsletter for the latest news, promotions and deals.</p>
              </div>

              <div class="input-group u-shadow-v19 g-rounded-50">
                <input class="form-control g-color-gray-dark-v4 g-placeholder-gray-dark-v3 border-0 g-rounded-left-50 g-px-20" type="email" placeholder="Enter email" aria-label="Enter email">
                <div class="input-group-append g-bg-white border-0 g-rounded-right-50">
                  <button class="btn u-btn-primary g-width-40 g-height-40 rounded-circle" type="submit">
                    <i class="fa fa-send"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- End Newsletter -->

      <!-- Footer -->
      <footer class="container g-pt-100 g-pb-20">
        <div class="row">
          <div class="col-sm-6 col-lg-3 g-mb-30">
            <a class="d-inline-block mb-4" href="#">
              <img class="g-width-100 g-height-auto" src="{{ root }}assets/img/logo/logo-1.png" alt="Image description">
            </a>

            <p class="g-color-gray-dark-v4 g-font-size-13">2019 &copy; All Rights Reserved.</p>
          </div>

          <div class="col-sm-6 col-lg-3 g-mb-30">
            <h3 class="h6 g-color-black g-font-weight-600 text-uppercase mb-4">About</h3>

            <!-- Links -->
            <ul class="list-unstyled g-color-gray-dark-v4 g-font-size-13">
              <li class="my-3"><i class="mr-2 fa fa-angle-right"></i>
                <a class="u-link-v5 g-color-gray-dark-v4 g-color-primary--hover" href="#">About</a></li>
              <li class="my-3"><i class="mr-2 fa fa-angle-right"></i>
                <a class="u-link-v5 g-color-gray-dark-v4 g-color-primary--hover" href="#">Services</a></li>
              <li class="my-3"><i class="mr-2 fa fa-angle-right"></i>
                <a class="u-link-v5 g-color-gray-dark-v4 g-color-primary--hover" href="#">Privacy &amp; Policy</a></li>
              <li class="my-3"><i class="mr-2 fa fa-angle-right"></i>
                <a class="u-link-v5 g-color-gray-dark-v4 g-color-primary--hover" href="#">Terms &amp; Conditions</a>
              </li>
            </ul>
            <!-- End Links -->
          </div>

          <div class="col-sm-6 col-lg-3 g-mb-30">
            <h3 class="h6 g-color-black g-font-weight-600 text-uppercase mb-4">Contacts</h3>

            <!-- Links -->
            <ul class="list-unstyled g-color-gray-dark-v4 g-font-size-13">
              <li class="media mb-4">
                <i class="d-flex mt-1 mr-3 icon-hotel-restaurant-235 u-line-icon-pro"></i>
                <div class="media-body">
                  Unit 25 Suite 3, 925 Prospect<br>PI New York Avenue
                </div>
              </li>
              <li class="media mb-4">
                <i class="d-flex mt-1 mr-3 icon-communication-062 u-line-icon-pro"></i>
                <div class="media-body">
                  <a class="u-link-v5 g-color-gray-dark-v4 g-color-primary--hover" href="#">htmlstream@support.com</a>
                </div>
              </li>
              <li class="media mb-4">
                <i class="d-flex mt-1 mr-3 icon-communication-033 u-line-icon-pro"></i>
                <div class="media-body">
                  +32 333 444 555
                </div>
              </li>
            </ul>
            <!-- End Links -->
          </div>

          <div class="col-sm-6 col-lg-3 g-mb-30">
            <h3 class="h6 g-color-black g-font-weight-600 text-uppercase mb-4">Follow Us</h3>

            <!-- Links -->
            <ul class="list-unstyled g-color-gray-dark-v4 g-font-size-13">
              <li class="my-3"><i class="mr-2 fa fa-angle-right"></i>
                <a class="u-link-v5 g-color-gray-dark-v4 g-color-primary--hover" href="#">Facebook</a></li>
              <li class="my-3"><i class="mr-2 fa fa-angle-right"></i>
                <a class="u-link-v5 g-color-gray-dark-v4 g-color-primary--hover" href="#">Twitter</a></li>
              <li class="my-3"><i class="mr-2 fa fa-angle-right"></i>
                <a class="u-link-v5 g-color-gray-dark-v4 g-color-primary--hover" href="#">Dribbble</a></li>
              <li class="my-3"><i class="mr-2 fa fa-angle-right"></i>
                <a class="u-link-v5 g-color-gray-dark-v4 g-color-primary--hover" href="#">Linkedin</a></li>
            </ul>
            <!-- End Links -->
          </div>
        </div>
      </footer>
      <!-- End Footer -->

      {% include "html/assets/include/nunjucks/partials/blocks/go-to-top/go-to-top-1.njk" %}
    </main>

    {% include "html/assets/include/nunjucks/partials/blocks/helpers/outer-spaces-helper.njk" %}

    {% include "html/assets/include/nunjucks/partials/core-js.njk" %}

    <!-- JS Implementing Plugins -->
    <script src="{{ root }}assets/vendor/hs-megamenu/src/hs.megamenu.js"></script>
    {% include "html/assets/include/nunjucks/partials/js/js-dzsparallaxer.njk" %}
    <script src="{{ root }}assets/vendor/masonry/dist/masonry.pkgd.min.js"></script>
    <script src="{{ root }}assets/vendor/imagesloaded/imagesloaded.pkgd.min.js"></script>
    <script src="{{ root }}assets/vendor/fancybox/jquery.fancybox.min.js"></script>
    <script src="{{ root }}assets/vendor/slick-carousel/slick/slick.js"></script>

    <!-- JS Revolution Slider -->
    <script src="{{ root }}assets/vendor/revolution-slider/revolution/js/jquery.themepunch.tools.min.js"></script>
    <script src="{{ root }}assets/vendor/revolution-slider/revolution/js/jquery.themepunch.revolution.min.js"></script>

    <script src="{{ root }}assets/vendor/revolution-slider/revolution/js/extensions/revolution.extension.actions.min.js"></script>
    <script src="{{ root }}assets/vendor/revolution-slider/revolution/js/extensions/revolution.extension.carousel.min.js"></script>
    <script src="{{ root }}assets/vendor/revolution-slider/revolution/js/extensions/revolution.extension.kenburn.min.js"></script>
    <script src="{{ root }}assets/vendor/revolution-slider/revolution/js/extensions/revolution.extension.layeranimation.min.js"></script>
    <script src="{{ root }}assets/vendor/revolution-slider/revolution/js/extensions/revolution.extension.migration.min.js"></script>
    <script src="{{ root }}assets/vendor/revolution-slider/revolution/js/extensions/revolution.extension.navigation.min.js"></script>
    <script src="{{ root }}assets/vendor/revolution-slider/revolution/js/extensions/revolution.extension.parallax.min.js"></script>
    <script src="{{ root }}assets/vendor/revolution-slider/revolution/js/extensions/revolution.extension.slideanims.min.js"></script>
    <script src="{{ root }}assets/vendor/revolution-slider/revolution/js/extensions/revolution.extension.video.min.js"></script>

    <!-- JS Unify -->
    <script src="{{ root }}assets/js/hs.core.js"></script>
    <script src="{{ root }}assets/js/components/hs.header.js"></script>
    <script src="{{ root }}assets/js/helpers/hs.hamburgers.js"></script>
    <script src="{{ root }}assets/js/components/hs.tabs.js"></script>
    <script src="{{ root }}assets/js/components/hs.popup.js"></script>
    <script src="{{ root }}assets/js/components/hs.carousel.js"></script>
    <script src="{{ root }}assets/js/components/hs.go-to.js"></script>

    <!-- JS Customization -->
    <script src="{{ root }}assets/js/custom.js"></script>

    <!-- JS Plugins Init. -->
    <script>
      // initialization of slider revolution
      var tpj = jQuery,
        revapi1150;

      tpj(document).ready(function () {
        revapi1150 = tpj("#welcome").show().revolution({
          sliderType: "standard",
          jsFileLocation: "revolution/js/",
          sliderLayout: "fullwidth",
          dottedOverlay: "none",
          delay: 9000,
          navigation: {
            onHoverStop: "off"
          },
          responsiveLevels: [1240, 1024, 778, 480],
          visibilityLevels: [1240, 1024, 778, 480],
          gridwidth: [1240, 1024, 778, 480],
          gridheight: [1000, 900, 960, 720],
          lazyType: "none",
          parallax: {
            type: "scroll",
            origo: "slidercenter",
            speed: 400,
            levels: [5, 10, 15, 20, 25, 30, 50, 60, -5, -10, -15, -20, -25, -30, -35, 55]
          },
          shadow: 0,
          spinner: "spinner3",
          stopLoop: "on",
          stopAfterLoops: 0,
          stopAtSlide: 1,
          shuffle: "off",
          autoHeight: "off",
          disableProgressBar: "on",
          hideThumbsOnMobile: "off",
          hideSliderAtLimit: 0,
          hideCaptionAtLimit: 0,
          hideAllCaptionAtLilmit: 0,
          debugMode: false,
          fallbacks: {
            simplifyAll: "off",
            nextSlideOnWindowFocus: "off",
            disableFocusListener: false
          }
        });
      });

      $(document).on('ready', function () {
        // initialization of carousel
        $.HSCore.components.HSCarousel.init('.js-carousel');

        // initialization of tabs
        $.HSCore.components.HSTabs.init('[role="tablist"]');

        // initialization of popups
        $.HSCore.components.HSPopup.init('.js-fancybox');

        // initialization of go to
        $.HSCore.components.HSGoTo.init('.js-go-to');
      });

      $(window).on('load', function () {
        // initialization of header
        $.HSCore.components.HSHeader.init($('#js-header'));
        $.HSCore.helpers.HSHamburgers.init('.hamburger');

        // initialization of HSMegaMenu component
        $('.js-mega-menu').HSMegaMenu({
          event: 'hover',
          pageContainer: $('.container'),
          breakpoint: 991
        });

        // initialization of masonry
        $('.masonry-grid').imagesLoaded().then(function () {
          $('.masonry-grid').masonry({
            columnWidth: '.masonry-grid-sizer',
            itemSelector: '.masonry-grid-item',
            percentPosition: true
          });
        });
      });

      $(window).on('resize', function () {
        setTimeout(function () {
          $.HSCore.components.HSTabs.init('[role="tablist"]');
        }, 200);
      });
    </script>

    {% set SSCookiePrefix = "unify" %}
    {% set SSDefaultCustomColor = "#72c02c" %}
    {% set SSDefaultOuterSpaces = "0px" %}
    {% set SSDefaultContentFont = "Open Sans, Helvetica, Arial, sans-serif" %}
    {% set SSDefaultHeadingFont = "Open Sans, Helvetica, Arial, sans-serif" %}
    {% include "html/assets/include/nunjucks/partials/blocks/style-switcher.njk" %}
  </body>
</html>
