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

{% 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" %}
    <link rel="stylesheet" href="{{ root }}assets/vendor/animate.css">
    {% 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/cubeportfolio-full/cubeportfolio/css/cubeportfolio.min.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-addons/particles/css/revolution.addon.particles.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="rev_slider_1174_1_wrapper" class="rev_slider_wrapper fullscreen-container" data-alias="inspiration-header" data-source="gallery" style="background-color:transparent;padding:0px;">
          <!-- START REVOLUTION SLIDER 5.4.1 fullscreen mode -->
          <div id="rev_slider_1174_1" class="rev_slider fullscreenbanner" style="display:none;" data-version="5.4.1">
            <ul>  <!-- SLIDE  -->
              <li data-index="rs-3238" data-transition="fade" data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off" data-easein="default" data-easeout="default" data-masterspeed="500" 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="#f9f9f9" 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-8"
                     id="slide-3238-layer-4"
                     data-x="['left','left','left','left']" data-hoffset="['-264','-264','-371','-416']"
                     data-y="['top','top','top','top']" data-voffset="['-135','-135','-180','-203']"
                     data-width="none"
                     data-height="none"
                     data-whitespace="nowrap"

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

                     data-frames='[{"from":"x:left;rZ:-90deg;","speed":2500,"to":"o:1;","delay":500,"ease":"Power4.easeOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"}]'
                     data-textAlign="['left','left','left','left']"
                     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;border-width:0px;">
                  <img src="{{ root }}assets/img-temp/650x500/img1.png" alt="" data-ww="['650px','650px','650px','650px']" data-hh="['500px','500px','500px','500px']" width="650" height="500">
                </div>

                <!-- LAYER NR. 2 -->
                <div class="tp-caption   tp-resizeme rs-parallaxlevel-9"
                     id="slide-3238-layer-5"
                     data-x="['right','right','right','right']" data-hoffset="['30','30','-70','-144']"
                     data-y="['top','top','top','top']" data-voffset="['-204','-204','-233','-261']"
                     data-width="none"
                     data-height="none"
                     data-whitespace="nowrap"

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

                     data-frames='[{"from":"x:right;y:-500px;rZ:90deg;","speed":2500,"to":"o:1;","delay":500,"ease":"Power4.easeOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"}]'
                     data-textAlign="['left','left','left','left']"
                     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;border-width:0px;">
                  <img src="{{ root }}assets/img-temp/700x600/img1.png" alt="" data-ww="['700px','700px','700px','700px']" data-hh="['600px','600px','600px','600px']" width="700" height="600">
                </div>

                <!-- LAYER NR. 3 -->
                <div class="tp-caption   tp-resizeme rs-parallaxlevel-10"
                     id="slide-3238-layer-6"
                     data-x="['left','left','left','left']" data-hoffset="['-372','-372','-540','-638']"
                     data-y="['bottom','bottom','bottom','bottom']" data-voffset="['-484','-484','-520','-522']"
                     data-width="none"
                     data-height="none"
                     data-whitespace="nowrap"

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

                     data-frames='[{"from":"x:left;rZ:45deg;","speed":2500,"to":"o:1;","delay":650,"ease":"Power4.easeOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"}]'
                     data-textAlign="['left','left','left','left']"
                     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;border-width:0px;">
                  <img src="{{ root }}assets/img-temp/900x1000/img1.png" alt="" data-ww="['900px','900px','900px','900px']" data-hh="['1000px','1000px','1000px','1000px']" width="900" height="1000">
                </div>

                <!-- LAYER NR. 4 -->
                <div class="tp-caption   tp-resizeme rs-parallaxlevel-12"
                     id="slide-3238-layer-9"
                     data-x="['left','left','left','left']" data-hoffset="['134','134','-2','-57']"
                     data-y="['bottom','bottom','bottom','bottom']" data-voffset="['67','67','50','6']"
                     data-width="none"
                     data-height="none"
                     data-whitespace="nowrap"

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

                     data-frames='[{"from":"y:bottom;rZ:90deg;","speed":1500,"to":"o:1;","delay":1050,"ease":"Power4.easeOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"}]'
                     data-textAlign="['left','left','left','left']"
                     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;border-width:0px;">
                  <img src="{{ root }}assets/img-temp/200x300/img1.png" alt="" data-ww="['200px','200px','200px','200px']" data-hh="['300px','300px','300px','300px']" width="200" height="300">
                </div>

                <!-- LAYER NR. 5 -->
                <div class="tp-caption   tp-resizeme rs-parallaxlevel-11"
                     id="slide-3238-layer-10"
                     data-x="['left','left','left','left']" data-hoffset="['181','181','30','-39']"
                     data-y="['bottom','bottom','bottom','bottom']" data-voffset="['-170','-170','-190','-212']"
                     data-width="none"
                     data-height="none"
                     data-whitespace="nowrap"

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

                     data-frames='[{"from":"y:bottom;rZ:-90deg;","speed":1500,"to":"o:1;","delay":1250,"ease":"Power4.easeOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"}]'
                     data-textAlign="['left','left','left','left']"
                     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;border-width:0px;">
                  <img src="{{ root }}assets/img-temp/300x400/img1.png" alt="" data-ww="['300px','300px','300px','300px']" data-hh="['400px','400px','400px','400px']" width="300" height="400">
                </div>

                <!-- LAYER NR. 6 -->
                <div class="tp-caption   tp-resizeme rs-parallaxlevel-12"
                     id="slide-3238-layer-11"
                     data-x="['left','left','left','left']" data-hoffset="['393','393','201','81']"
                     data-y="['bottom','bottom','bottom','bottom']" data-voffset="['218','218','183','191']"
                     data-width="none"
                     data-height="none"
                     data-whitespace="nowrap"

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

                     data-frames='[{"from":"y:bottom;rZ:-90deg;","speed":1500,"to":"o:1;","delay":500,"ease":"Power4.easeOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"}]'
                     data-textAlign="['left','left','left','left']"
                     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;border-width:0px;">
                  <img src="{{ root }}assets/img-temp/50x100/img1.png" alt="" data-ww="['50px','50px','50px','50px']" data-hh="['100px','100px','100px','100px']" width="50" height="100">
                </div>

                <!-- LAYER NR. 7 -->
                <div class="tp-caption   tp-resizeme rs-parallaxlevel-11"
                     id="slide-3238-layer-12"
                     data-x="['left','left','left','left']" data-hoffset="['346','346','165','36']"
                     data-y="['bottom','bottom','bottom','bottom']" data-voffset="['255','255','237','231']"
                     data-width="none"
                     data-height="none"
                     data-whitespace="nowrap"

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

                     data-frames='[{"from":"y:bottom;rZ:90deg;","speed":2000,"to":"o:1;rZ:310;","delay":550,"ease":"Power4.easeOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"}]'
                     data-textAlign="['left','left','left','left']"
                     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: 11;border-width:0px;">
                  <img src="{{ root }}assets/img-temp/50x100/img1.png" alt="" data-ww="['50px','50px','50px','50px']" data-hh="['100px','100px','100px','100px']" width="50" height="100">
                </div>

                <!-- LAYER NR. 8 -->
                <div class="tp-caption   tp-resizeme rs-parallaxlevel-9"
                     id="slide-3238-layer-7"
                     data-x="['right','right','right','right']" data-hoffset="['-364','-364','-479','-553']"
                     data-y="['bottom','bottom','bottom','bottom']" data-voffset="['-155','-155','-180','-202']"
                     data-width="none"
                     data-height="none"
                     data-whitespace="nowrap"

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

                     data-frames='[{"from":"x:right;rZ:-65deg;","speed":1500,"to":"o:1;","delay":700,"ease":"Power4.easeOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"}]'
                     data-textAlign="['left','left','left','left']"
                     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: 12;border-width:0px;">
                  <img src="{{ root }}assets/img-temp/730x520/img1.png" alt="" data-ww="['730px','730px','730px','730px']" data-hh="['520px','520px','520px','520px']" width="730" height="520">
                </div>

                <!-- LAYER NR. 9 -->
                <div class="tp-caption   tp-resizeme rs-parallaxlevel-11"
                     id="slide-3238-layer-8"
                     data-x="['right','right','right','right']" data-hoffset="['222','222','105','8']"
                     data-y="['bottom','bottom','bottom','bottom']" data-voffset="['8','8','-17','-10']"
                     data-width="none"
                     data-height="none"
                     data-whitespace="nowrap"

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

                     data-frames='[{"from":"x:right;rZ:90deg;","speed":1500,"to":"o:1;","delay":500,"ease":"Power4.easeOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"}]'
                     data-textAlign="['left','left','left','left']"
                     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;border-width:0px;">
                  <img src="{{ root }}assets/img-temp/300x500/img1.png" alt="" data-ww="['300px','300px','300px','300px']" data-hh="['500px','500px','500px','500px']" width="300" height="500">
                </div>

                <!-- LAYER NR. 10 -->
                <div class="tp-caption   tp-resizeme rs-parallaxlevel-2"
                     id="slide-3238-layer-1"
                     data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
                     data-y="['middle','middle','middle','middle']" data-voffset="['-70','-70','-70','-90']"
                     data-fontsize="['80','80','80','40']"
                     data-lineheight="['80','80','80','60']"
                     data-width="['none','none','none','360']"
                     data-height="none"
                     data-whitespace="['nowrap','nowrap','nowrap','normal']"

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

                     data-frames='[{"from":"y:-50px;rX:-45deg;sX:2;sY:2;opacity:0;","speed":1500,"to":"o:1;","delay":510,"ease":"Power4.easeOut"},{"delay":640,"speed":600,"to":"y:30px;rX:45deg;sX:0.8;sY:0.8;opacity:0;","ease":"Power2.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: 80px; line-height: 80px; font-weight: 700; color: rgba(0, 0, 0, 1.00);border-width:0px;">Be Inspired.
                </div>

                <!-- LAYER NR. 11 -->
                <div class="tp-caption   tp-resizeme rs-parallaxlevel-2"
                     id="slide-3238-layer-15"
                     data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
                     data-y="['middle','middle','middle','middle']" data-voffset="['-70','-70','-70','-90']"
                     data-fontsize="['80','80','80','40']"
                     data-lineheight="['80','80','80','60']"
                     data-width="['none','none','none','360']"
                     data-height="none"
                     data-whitespace="['nowrap','nowrap','nowrap','normal']"

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

                     data-frames='[{"from":"y:-50px;rX:-45deg;sX:2;sY:2;opacity:0;","speed":1500,"to":"o:1;","delay":2940,"ease":"Power4.easeOut"},{"delay":660,"speed":600,"to":"y:30px;rX:45deg;sX:0.8;sY:0.8;opacity:0;","ease":"Power2.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; white-space: nowrap; font-size: 80px; line-height: 80px; font-weight: 700; color: rgba(0, 0, 0, 1.00);border-width:0px;">Be Brave.
                </div>

                <!-- LAYER NR. 12 -->
                <div class="tp-caption   tp-resizeme rs-parallaxlevel-2"
                     id="slide-3238-layer-16"
                     data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
                     data-y="['middle','middle','middle','middle']" data-voffset="['-70','-70','-70','-90']"
                     data-fontsize="['80','80','80','40']"
                     data-lineheight="['80','80','80','60']"
                     data-width="['none','none','none','400']"
                     data-height="none"
                     data-whitespace="['nowrap','nowrap','nowrap','normal']"

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

                     data-frames='[{"from":"y:-50px;rX:-45deg;sX:2;sY:2;opacity:0;","speed":1500,"to":"o:1;","delay":5390,"ease":"Power4.easeOut"},{"delay":"wait","speed":600,"to":"y:30px;rX:45deg;sX:0.8;sY:0.8;opacity:0;","ease":"Power2.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: 16; white-space: nowrap; font-size: 80px; line-height: 80px; font-weight: 700; color: rgba(0, 0, 0, 1.00);border-width:0px;">Start Creating.
                </div>

                <!-- LAYER NR. 13 -->
                <div class="tp-caption   tp-resizeme rs-parallaxlevel-2"
                     id="slide-3238-layer-2"
                     data-x="['center','center','center','center']" data-hoffset="['-8','-8','-8','-8']"
                     data-y="['middle','middle','middle','middle']" data-voffset="['10','10','10','-10']"
                     data-fontsize="['20','20','20','20']"
                     data-lineheight="['20','20','20','30']"
                     data-width="['none','none','none','360']"
                     data-height="none"
                     data-whitespace="['nowrap','nowrap','nowrap','normal']"

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

                     data-frames='[{"from":"y:50px;rX:45deg;sX:2;sY:2;opacity:0;","speed":1500,"to":"o:1;","delay":600,"ease":"Power4.easeOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"}]'
                     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: 17; white-space: nowrap; font-size: 20px; line-height: 20px; font-weight: 400; color: rgba(68, 68, 68, 1.00); border-width: 0;">We are a creative studio focusing on culture, luxury, editorial &amp; art.
                </div>

                <!-- LAYER NR. 14 -->
                <div class="tp-caption rev-btn g-bg-primary rs-parallaxlevel-3"
                     id="slide-3238-layer-3"
                     data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
                     data-y="['middle','middle','middle','middle']" data-voffset="['92','92','92','92']"
                     data-width="none"
                     data-height="none"
                     data-whitespace="nowrap"

                     data-type="button"
                     data-actions='[{"event":"click","action":"scrollbelow","offset":"px","delay":""}]'
                     data-responsive_offset="on"
                     data-responsive="off"
                     data-frames='[{"from":"y:100px;rX:90deg;opacity:0;","speed":1500,"to":"o:1;","delay":700,"ease":"Power4.easeOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"},{"frame":"hover","speed":"150","ease":"Power1.easeInOut","to":"o:1;rX:0;rY:0;rZ:0;z:0;","style":"c:rgba(255, 255, 255, 1.00);bg:rgba(114, 192, 44, .8);bs:solid;"}]'
                     data-textAlign="['left','left','left','left']"
                     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: 18; white-space: nowrap; font-size: 14px; color: rgba(255, 255, 255, 1.00); border-color:rgba(0, 0, 0, 1.00);border-width:0px;border-radius:50px;outline:none;box-shadow:none;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;cursor:pointer;">CONTINUE
                </div>

                <!-- LAYER NR. 15 -->
                <div class="tp-caption rev-scroll-btn revs-dark  rs-parallaxlevel-5"
                     id="slide-3238-layer-13"
                     data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
                     data-y="['bottom','bottom','bottom','bottom']" data-voffset="['50','50','50','50']"
                     data-width="35"
                     data-height="55"
                     data-whitespace="nowrap"

                     data-type="button"
                     data-actions='[{"event":"click","action":"scrollbelow","offset":"px","delay":""}]'
                     data-basealign="slide"
                     data-responsive_offset="on"
                     data-responsive="off"
                     data-frames='[{"from":"y:-50px;opacity:0;","speed":1500,"to":"o:1;","delay":800,"ease":"Power4.easeOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"}]'
                     data-textAlign="['left','left','left','left']"
                     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: 19; min-width: 25px; max-width: 25px; max-width: 55px; max-width: 55px; white-space: nowrap; font-weight: 400;border-color:rgba(51, 51, 51, 1.00);border-style:solid;border-width:1px;border-radius:23px 23px 23px 23px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;cursor:pointer;">
                  <span></span>
                </div>
              </li>
            </ul>
            <div class="tp-bannertimer tp-bottom" style="visibility: hidden !important;"></div>
          </div>
        </div>
      </div>
      <!-- End Revolution Slider -->

      <!-- Icon Blocks -->
      <section class="container g-pt-100 g-pb-70">
        <!-- Heading -->
        <div class="row justify-content-center text-center g-mb-50">
          <div class="col-lg-9">
            <h1 class="h2 g-color-black g-font-weight-600 mb-2">We are Unify</h1>
            <div class="d-inline-block g-width-30 g-height-2 g-bg-primary mb-2"></div>
            <p class="lead mb-0">We are a creative studio focusing on culture, luxury, editorial &amp; art. Somewhere between sophistication and simplicity.</p>
          </div>
        </div>
        <!-- End Heading -->

        <div class="row">
          <div class="col-lg-4 g-mb-30">
            <!-- Icon Blocks -->
            <div class="media g-mb-15">
              <div class="d-flex mr-4">
                <span class="g-color-primary g-font-size-30">
                  <i class="icon-education-087 u-line-icon-pro"></i>
                </span>
              </div>
              <div class="media-body">
                <h3 class="h5 g-color-black g-font-weight-600 mb-20">Creative ideas</h3>
                <p class="g-color-gray-dark-v4">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
                <a class="g-color-main g-color-primary--hover g-font-weight-600 g-font-size-12 g-text-underline--none--hover text-uppercase" href="#">Learn More</a>
              </div>
            </div>
            <!-- End Icon Blocks -->
          </div>

          <div class="col-lg-4 g-mb-30">
            <!-- Icon Blocks -->
            <div class="media g-mb-15">
              <div class="d-flex mr-4">
                <span class="g-color-primary g-font-size-30">
                  <i class="icon-education-035 u-line-icon-pro"></i>
                </span>
              </div>
              <div class="media-body">
                <h3 class="h5 g-color-black g-font-weight-600 mb-20">Excellent features</h3>
                <p class="g-color-gray-dark-v4">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
                <a class="g-color-main g-color-primary--hover g-font-weight-600 g-font-size-12 g-text-underline--none--hover text-uppercase" href="#">Learn More</a>
              </div>
            </div>
            <!-- End Icon Blocks -->
          </div>

          <div class="col-lg-4 g-mb-30">
            <!-- Icon Blocks -->
            <div class="media g-mb-15">
              <div class="d-flex mr-4">
                <span class="g-color-primary g-font-size-30">
                  <i class="icon-education-141 u-line-icon-pro"></i>
                </span>
              </div>
              <div class="media-body">
                <h3 class="h5 g-color-black g-font-weight-600 mb-20">Fully responsive</h3>
                <p class="g-color-gray-dark-v4">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
                <a class="g-color-main g-color-primary--hover g-font-weight-600 g-font-size-12 g-text-underline--none--hover text-uppercase" href="#">Learn More</a>
              </div>
            </div>
            <!-- End Icon Blocks -->
          </div>
        </div>
      </section>
      <!-- End Icon Blocks -->

      <!-- Video Intro -->
      <section class="g-bg-secondary">
        <div class="container g-pt-100 g-pb-70">
          <div class="row justify-content-between">
            <div class="col-lg-5 g-mb-30">
              <div class="mb-2">
                <div class="d-inline-block g-width-30 g-height-2 g-pos-rel g-top-minus-4 g-bg-primary mr-2"></div>
                <span class="g-color-gray-dark-v3 g-font-weight-600 g-font-size-12 text-uppercase">Testimonials</span>
              </div>
              <h2 class="h1 g-color-black g-font-weight-600 g-mb-35">
                <span class="g-color-primary">What</span> People<br>Say about <span class="g-color-primary">Unify</span>
              </h2>

              <!-- Carousel -->
              <div id="carouselCus1" class="js-carousel js-carousel_single-item-thumbs5__slides g-pb-35"
                   data-infinite="true"
                   data-fade="true"
                   data-lazy-load="progressive"
                   data-animation="linear"
                   data-pagi-classes="u-carousel-indicators-v1 g-bottom-0">
                <div class="js-slide">
                  <p class="g-font-style-italic g-font-size-17 mb-4">Dear Htmlstream team, I just bought the Unify template some weeks ago. The template is really nice and offers quite a large set of options.</p>
                  <div class="media">
                    <img class="d-flex align-self-center g-brd-around g-brd-3 g-brd-white g-width-50 g-height-50 rounded-circle mr-3" data-lazy="{{ root }}assets/img-temp/100x100/img7.jpg" alt="Image Description">
                    <div class="media-body align-self-center">
                      <h4 class="g-color-black g-font-weight-600 g-font-size-13 text-uppercase g-mb-0">Daniel Ramirez</h4>
                      <span class="d-block g-color-gray-dark-v4 g-font-size-12">Lead Designer, Google Inc.</span>
                    </div>
                  </div>
                </div>

                <div class="js-slide">
                  <p class="g-font-style-italic g-font-size-17 mb-4">Hi there purchased a couple of days ago and the site looks great, big thanks to the htmlstream guys, they gave me some great help with some fiddly setup issues.</p>
                  <div class="media">
                    <img class="d-flex align-self-center g-brd-around g-brd-3 g-brd-white g-width-50 g-height-50 rounded-circle mr-3" data-lazy="{{ root }}assets/img-temp/100x100/img5.jpg" alt="Image Description">
                    <div class="media-body align-self-center">
                      <h4 class="g-color-black g-font-weight-600 g-font-size-13 text-uppercase g-mb-0">Sara Anderson</h4>
                      <span class="d-block g-color-gray-dark-v4 g-font-size-12">Developer, Microsoft Inc.</span>
                    </div>
                  </div>
                </div>

                <div class="js-slide">
                  <p class="g-font-style-italic g-font-size-17 mb-4">I'm very impressed with the theme and customer support! Thanks</p>
                  <div class="media">
                    <img class="d-flex align-self-center g-brd-around g-brd-3 g-brd-white g-width-50 g-height-50 rounded-circle mr-3" data-lazy="{{ root }}assets/img-temp/100x100/img4.jpg" alt="Image Description">
                    <div class="media-body align-self-center">
                      <h4 class="g-color-black g-font-weight-600 g-font-size-13 text-uppercase g-mb-0">Alisa Gomez</h4>
                      <span class="d-block g-color-gray-dark-v4 g-font-size-12">HR, Airbnb Inc.</span>
                    </div>
                  </div>
                </div>
              </div>
              <!-- End Carousel -->
            </div>

            <div class="col-lg-6 g-mt-50 g-mb-30">
              <!-- Article -->
              <article class="u-shadow-v21 u-shadow-v21--hover g-pos-rel g-bg-white g-transition-0_3 g-pa-10 rounded">
                <img class="img-fluid w-100" src="{{ root }}assets/img-temp/500x320/img1.jpg" alt="Image Description">
                <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-17 g-pos-rel g-left-2 fa fa-play"></i>
                      </span>
                  </a>
                </div>
              </article>
              <!-- End Article -->
            </div>
          </div>
        </div>
      </section>
      <!-- End Video Intro -->

      <!-- Blog News -->
      <section class="container g-pt-100 g-pb-60">
        <!-- Heading -->
        <div class="row justify-content-center text-center g-mb-50">
          <div class="col-lg-9">
            <h2 class="h2 g-color-black g-font-weight-600 mb-2">Follow the Latest News</h2>
            <div class="d-inline-block g-width-30 g-height-2 g-bg-primary mb-2"></div>
            <p class="lead mb-0">We are a creative studio focusing on culture, luxury, editorial &amp; art. Somewhere between sophistication and simplicity.</p>
          </div>
        </div>
        <!-- End Heading -->

        <div class="row">
          <div class="col-sm-6 col-lg-4 g-mb-30">
            <!-- Blog Grid Overlap Blocks -->
            <article>
              <img class="img-fluid w-100" src="{{ root }}assets/img-temp/400x270/img7.jpg" alt="Image Description">
              <div class="g-width-80x g-bg-white g-pos-rel g-z-index-1 g-pa-30 g-mt-minus-50 mx-auto">
                <span class="d-block g-color-gray-dark-v4 g-font-weight-600 g-font-size-12 text-uppercase mb-2">31 May 2017</span>
                <h2 class="h5 g-color-black g-font-weight-600 mb-3">
                  <a class="u-link-v5 g-color-black g-color-primary--hover g-cursor-pointer" href="#">Announcing a free plan for small teams</a>
                </h2>
                <p class="g-color-gray-dark-v4 g-line-height-1_8">At Wake, our mission has always been focused on bringing openness and transparency.</p>
                <a class="g-font-size-13" href="#">Read more...</a>
              </div>
            </article>
            <!-- End Blog Grid Overlap Blocks -->
          </div>

          <div class="col-sm-6 col-lg-4 g-mb-30">
            <!-- Blog Grid Overlap Blocks -->
            <article>
              <img class="img-fluid w-100" src="{{ root }}assets/img-temp/400x270/img3.jpg" alt="Image Description">
              <div class="g-width-80x g-bg-white g-pos-rel g-z-index-1 g-pa-30 g-mt-minus-50 mx-auto">
                <span class="d-block g-color-gray-dark-v4 g-font-weight-600 g-font-size-12 text-uppercase mb-2">1 June 2017</span>
                <h2 class="h5 g-color-black g-font-weight-600 mb-3">
                  <a class="u-link-v5 g-color-black g-color-primary--hover g-cursor-pointer" href="#">Exclusive interview with InVision's CEO</a>
                </h2>
                <p class="g-color-gray-dark-v4 g-line-height-1_8">Clark Valberg is the founder and CEO of InVision. If you are a designer...</p>
                <a class="g-font-size-13" href="#">Read more...</a>
              </div>
            </article>
            <!-- End Blog Grid Overlap Blocks -->
          </div>

          <div class="col-sm-6 col-lg-4 g-mb-30">
            <!-- Blog Grid Overlap Blocks -->
            <article>
              <img class="img-fluid w-100" src="{{ root }}assets/img-temp/400x270/img2.jpg" alt="Image Description">
              <div class="g-width-80x g-bg-white g-pos-rel g-z-index-1 g-pa-30 g-mt-minus-50 mx-auto">
                <span class="d-block g-color-gray-dark-v4 g-font-weight-600 g-font-size-12 text-uppercase mb-2">31 May 2017</span>
                <h2 class="h5 g-color-black g-font-weight-600 mb-3">
                  <a class="u-link-v5 g-color-black g-color-primary--hover g-cursor-pointer" href="#">A UX strategy for the Ultimate Product Launch</a>
                </h2>
                <p class="g-color-gray-dark-v4 g-line-height-1_8">In an attempt to answer those questions, I poured over the biggest collections of design.</p>
                <a class="g-font-size-13" href="#">Read more...</a>
              </div>
            </article>
            <!-- End Blog Grid Overlap Blocks -->
          </div>
        </div>
      </section>
      <!-- End Blog News -->

      <!-- Counter -->
      <section class="dzsparallaxer auto-init height-is-based-on-content">
        <!-- Parallax Image -->
        <div class="divimage dzsparallaxer--target w-100" style="height: 160%; background: url({{ root }}assets/img/bg/pattern3.png)"></div>
        <!-- End Parallax Image -->

        <div class="container g-pt-100 g-pb-50">
          <!-- Heading -->
          <div class="row justify-content-center text-center g-mb-50">
            <div class="col-lg-9">
              <h2 class="h2 g-color-white g-font-weight-600 mb-2">Unify in Numbers</h2>
              <div class="d-inline-block g-width-50 g-height-1 g-bg-white mb-2"></div>
              <p class="lead g-color-white-opacity-0_8 mb-0">We are a creative studio focusing on culture, luxury, editorial &amp; art. Somewhere between sophistication and simplicity.</p>
            </div>
          </div>
          <!-- End Heading -->

          <!-- Counters -->
          <div class="row text-center text-uppercase">
            <div class="col-lg-3 col-sm-6 g-mb-50">
              <div class="g-bg-black-opacity-0_3 g-px-20 g-py-30">
                <div class="js-counter g-color-white g-font-weight-600 g-font-size-35 mb-2">52147</div>
                <h4 class="h6 g-color-white-opacity-0_8 text-uppercase">Code Lines</h4>
              </div>
            </div>

            <div class="col-lg-3 col-sm-6 g-mb-50">
              <div class="g-bg-black-opacity-0_3 g-px-20 g-py-30">
                <div class="js-counter g-color-white g-font-weight-600 g-font-size-35 mb-2">24583</div>
                <h4 class="h6 g-color-white-opacity-0_8 text-uppercase">Projects</h4>
              </div>
            </div>

            <div class="col-lg-3 col-sm-6 g-mb-50">
              <div class="g-bg-black-opacity-0_3 g-px-20 g-py-30">
                <div class="js-counter g-color-white g-font-weight-600 g-font-size-35 mb-2">7348</div>
                <h4 class="h6 g-color-white-opacity-0_8 text-uppercase">Working Hours</h4>
              </div>
            </div>

            <div class="col-lg-3 col-sm-6 g-mb-50">
              <div class="g-bg-black-opacity-0_3 g-px-20 g-py-30">
                <div class="js-counter g-color-white g-font-weight-600 g-font-size-35 mb-2">87904</div>
                <h4 class="h6 g-color-white-opacity-0_8 text-uppercase">Job Offers</h4>
              </div>
            </div>
          </div>
          <!-- End Counters -->
        </div>
      </section>
      <!-- End Counter -->

      <!-- Icon Blocks -->
      <section class="container g-pt-100 g-pb-10">
        <div class="row">
          <div class="col-md-6 text-md-right g-mb-40">
            <!-- Icon Blocks -->
            <div class="media g-mb-40">
              <div class="media-body mr-4">
                <h3 class="h5 g-color-black g-font-weight-600 mb-20">Creative ideas</h3>
                <p class="g-color-gray-dark-v4">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
              </div>
              <div class="d-flex">
              <span class="u-icon-v2 g-color-white g-bg-primary rounded-circle">
                <i class="icon-education-087 u-line-icon-pro"></i>
              </span>
              </div>
            </div>
            <!-- End Icon Blocks -->

            <!-- Icon Blocks -->
            <div class="media g-mb-40">
              <div class="media-body mr-4">
                <h3 class="h5 g-color-black g-font-weight-600 mb-20">Excellent features</h3>
                <p class="g-color-gray-dark-v4">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
              </div>
              <div class="d-flex">
              <span class="u-icon-v2 g-color-white g-bg-black rounded-circle">
                <i class="icon-education-035 u-line-icon-pro"></i>
              </span>
              </div>
            </div>
            <!-- End Icon Blocks -->

            <!-- Icon Blocks -->
            <div class="media g-mb-40">
              <div class="media-body mr-4">
                <h3 class="h5 g-color-black g-font-weight-600 mb-20">Fully responsive</h3>
                <p class="g-color-gray-dark-v4">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
              </div>
              <div class="d-flex">
              <span class="u-icon-v2 g-color-white g-bg-primary rounded-circle">
                <i class="icon-education-141 u-line-icon-pro"></i>
              </span>
              </div>
            </div>
            <!-- End Icon Blocks -->
          </div>

          <div class="col-md-6 g-mb-40">
            <!-- Icon Blocks -->
            <div class="media g-mb-40">
              <div class="d-flex mr-4">
              <span class="u-icon-v2 g-color-white g-bg-black rounded-circle">
                <i class="icon-finance-256 u-line-icon-pro"></i>
              </span>
              </div>
              <div class="media-body">
                <h3 class="h5 g-color-black g-font-weight-600 mb-20">Clean code</h3>
                <p class="g-color-gray-dark-v4">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
              </div>
            </div>
            <!-- End Icon Blocks -->

            <!-- Icon Blocks -->
            <div class="media g-mb-40">
              <div class="d-flex mr-4">
              <span class="u-icon-v2 g-color-white g-bg-primary rounded-circle">
                <i class="icon-science-020 u-line-icon-pro"></i>
              </span>
              </div>
              <div class="media-body">
                <h3 class="h5 g-color-black g-font-weight-600 mb-20">Extensive documentation</h3>
                <p class="g-color-gray-dark-v4">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
              </div>
            </div>
            <!-- End Icon Blocks -->

            <!-- Icon Blocks -->
            <div class="media g-mb-40">
              <div class="d-flex mr-4">
              <span class="u-icon-v2 g-color-white g-bg-black rounded-circle">
                <i class="icon-finance-009 u-line-icon-pro"></i>
              </span>
              </div>
              <div class="media-body">
                <h3 class="h5 g-color-black g-font-weight-600 mb-20">Modern design</h3>
                <p class="g-color-gray-dark-v4">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
              </div>
            </div>
            <!-- End Icon Blocks -->
          </div>
        </div>
      </section>
      <!-- End Icon Blocks -->

      <!-- Cube Portfolio Blocks - Content -->
      <div class="container-fluid g-px-4 g-mb-4">
        <div class="cbp"
             data-controls="#filterControls1"
             data-animation="quicksand"
             data-x-gap="5"
             data-y-gap="5"
             data-media-queries='[{"width": 1500, "cols": 4}, {"width": 1100, "cols": 4}, {"width": 800, "cols": 3}, {"width": 480, "cols": 2}, {"width": 300, "cols": 1}]'>
          <!-- Cube Portfolio Blocks - Item -->
          <div class="cbp-item identity design">
            <div class="u-block-hover g-parent">
              <img class="img-fluid g-transform-scale-1_1--parent-hover g-transition-0_5 g-transition--ease-in-out" src="{{ root }}assets/img-temp/400x270/img8.jpg" alt="Image description">
              <div class="d-flex w-100 h-100 u-block-hover__additional--fade u-block-hover__additional--fade-in g-bg-bluegray-opacity-0_5 opacity-0 g-opacity-1--parent-hover g-pos-abs g-top-0 g-left-0 g-transition-0_3 g-transition--ease-in g-pa-20">
                <div class="d-flex align-items-start flex-column mb-auto">
                  <h3 class="h5 g-color-white g-font-weight-600 mb-1">Branding work</h3>
                  <span class="d-block g-color-white-opacity-0_8">Identity, Design</span>
                </div>
                <ul class="align-items-end flex-column list-inline mt-auto ml-auto mb-0">
                  <li class="list-inline-item">
                    <a class="u-icon-v2 u-icon-size--sm g-brd-white g-color-black g-bg-white rounded-circle" href="#">
                      <i class="icon-communication-095 u-line-icon-pro"></i>
                    </a>
                  </li>
                  <li class="list-inline-item">
                    <a class="cbp-lightbox u-icon-v2 u-icon-size--sm g-brd-white g-color-black g-bg-white rounded-circle" href="{{ root }}assets/img-temp/400x270/img8.jpg">
                      <i class="icon-communication-017 u-line-icon-pro"></i>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <!-- End Cube Portfolio Blocks - Item -->

          <!-- Cube Portfolio Blocks - Item -->
          <div class="cbp-item design">
            <div class="u-block-hover g-parent">
              <img class="img-fluid g-transform-scale-1_1--parent-hover g-transition-0_5 g-transition--ease-in-out" src="{{ root }}assets/img-temp/400x270/img15.jpg" alt="Image description">
              <div class="d-flex w-100 h-100 u-block-hover__additional--fade u-block-hover__additional--fade-in g-bg-bluegray-opacity-0_5 opacity-0 g-opacity-1--parent-hover g-pos-abs g-top-0 g-left-0 g-transition-0_3 g-transition--ease-in g-pa-20">
                <div class="d-flex align-items-start flex-column mb-auto">
                  <h3 class="h5 g-color-white g-font-weight-600 mb-1">Development</h3>
                  <span class="d-block g-color-white-opacity-0_8">Design</span>
                </div>
                <ul class="align-items-end flex-column list-inline mt-auto ml-auto mb-0">
                  <li class="list-inline-item">
                    <a class="u-icon-v2 u-icon-size--sm g-brd-white g-color-black g-bg-white rounded-circle" href="#">
                      <i class="icon-communication-095 u-line-icon-pro"></i>
                    </a>
                  </li>
                  <li class="list-inline-item">
                    <a class="cbp-lightbox u-icon-v2 u-icon-size--sm g-brd-white g-color-black g-bg-white rounded-circle" href="{{ root }}assets/img-temp/400x270/img15.jpg">
                      <i class="icon-communication-017 u-line-icon-pro"></i>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <!-- End Cube Portfolio Blocks - Item -->

          <!-- Cube Portfolio Blocks - Item -->
          <div class="cbp-item graphic identity">
            <div class="u-block-hover g-parent">
              <img class="img-fluid g-transform-scale-1_1--parent-hover g-transition-0_5 g-transition--ease-in-out" src="{{ root }}assets/img-temp/400x270/img9.jpg" alt="Image description">
              <div class="d-flex w-100 h-100 u-block-hover__additional--fade u-block-hover__additional--fade-in g-bg-bluegray-opacity-0_5 opacity-0 g-opacity-1--parent-hover g-pos-abs g-top-0 g-left-0 g-transition-0_3 g-transition--ease-in g-pa-20">
                <div class="d-flex align-items-start flex-column mb-auto">
                  <h3 class="h5 g-color-white g-font-weight-600 mb-1">Project planner</h3>
                  <span class="d-block g-color-white-opacity-0_8">Graphic, Identity</span>
                </div>
                <ul class="align-items-end flex-column list-inline mt-auto ml-auto mb-0">
                  <li class="list-inline-item">
                    <a class="u-icon-v2 u-icon-size--sm g-brd-white g-color-black g-bg-white rounded-circle" href="#">
                      <i class="icon-communication-095 u-line-icon-pro"></i>
                    </a>
                  </li>
                  <li class="list-inline-item">
                    <a class="cbp-lightbox u-icon-v2 u-icon-size--sm g-brd-white g-color-black g-bg-white rounded-circle" href="{{ root }}assets/img-temp/400x270/img9.jpg">
                      <i class="icon-communication-017 u-line-icon-pro"></i>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <!-- End Cube Portfolio Blocks - Item -->

          <!-- Cube Portfolio Blocks - Item -->
          <div class="cbp-item graphic">
            <div class="u-block-hover g-parent">
              <img class="img-fluid g-transform-scale-1_1--parent-hover g-transition-0_5 g-transition--ease-in-out" src="{{ root }}assets/img-temp/400x270/img10.jpg" alt="Image description">
              <div class="d-flex w-100 h-100 u-block-hover__additional--fade u-block-hover__additional--fade-in g-bg-bluegray-opacity-0_5 opacity-0 g-opacity-1--parent-hover g-pos-abs g-top-0 g-left-0 g-transition-0_3 g-transition--ease-in g-pa-20">
                <div class="d-flex align-items-start flex-column mb-auto">
                  <h3 class="h5 g-color-white g-font-weight-600 mb-1">Design</h3>
                  <span class="d-block g-color-white-opacity-0_8">Graphic</span>
                </div>
                <ul class="align-items-end flex-column list-inline mt-auto ml-auto mb-0">
                  <li class="list-inline-item">
                    <a class="u-icon-v2 u-icon-size--sm g-brd-white g-color-black g-bg-white rounded-circle" href="#">
                      <i class="icon-communication-095 u-line-icon-pro"></i>
                    </a>
                  </li>
                  <li class="list-inline-item">
                    <a class="cbp-lightbox u-icon-v2 u-icon-size--sm g-brd-white g-color-black g-bg-white rounded-circle" href="{{ root }}assets/img-temp/400x270/img10.jpg">
                      <i class="icon-communication-017 u-line-icon-pro"></i>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <!-- End Cube Portfolio Blocks - Item -->

          <!-- Cube Portfolio Blocks - Item -->
          <div class="cbp-item identity">
            <div class="u-block-hover g-parent">
              <img class="img-fluid g-transform-scale-1_1--parent-hover g-transition-0_5 g-transition--ease-in-out" src="{{ root }}assets/img-temp/400x270/img12.jpg" alt="Image description">
              <div class="d-flex w-100 h-100 u-block-hover__additional--fade u-block-hover__additional--fade-in g-bg-bluegray-opacity-0_5 opacity-0 g-opacity-1--parent-hover g-pos-abs g-top-0 g-left-0 g-transition-0_3 g-transition--ease-in g-pa-20">
                <div class="d-flex align-items-start flex-column mb-auto">
                  <h3 class="h5 g-color-white g-font-weight-600 mb-1">Creative agency</h3>
                  <span class="d-block g-color-white-opacity-0_8">Identity</span>
                </div>
                <ul class="align-items-end flex-column list-inline mt-auto ml-auto mb-0">
                  <li class="list-inline-item">
                    <a class="u-icon-v2 u-icon-size--sm g-brd-white g-color-black g-bg-white rounded-circle" href="#">
                      <i class="icon-communication-095 u-line-icon-pro"></i>
                    </a>
                  </li>
                  <li class="list-inline-item">
                    <a class="cbp-lightbox u-icon-v2 u-icon-size--sm g-brd-white g-color-black g-bg-white rounded-circle" href="{{ root }}assets/img-temp/400x270/img12.jpg">
                      <i class="icon-communication-017 u-line-icon-pro"></i>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <!-- End Cube Portfolio Blocks - Item -->

          <!-- Cube Portfolio Blocks - Item -->
          <div class="cbp-item graphic">
            <div class="u-block-hover g-parent">
              <img class="img-fluid g-transform-scale-1_1--parent-hover g-transition-0_5 g-transition--ease-in-out" src="{{ root }}assets/img-temp/400x270/img16.jpg" alt="Image description">
              <div class="d-flex w-100 h-100 u-block-hover__additional--fade u-block-hover__additional--fade-in g-bg-bluegray-opacity-0_5 opacity-0 g-opacity-1--parent-hover g-pos-abs g-top-0 g-left-0 g-transition-0_3 g-transition--ease-in g-pa-20">
                <div class="d-flex align-items-start flex-column mb-auto">
                  <h3 class="h5 g-color-white g-font-weight-600 mb-1">Production</h3>
                  <span class="d-block g-color-white-opacity-0_8">Graphic</span>
                </div>
                <ul class="align-items-end flex-column list-inline mt-auto ml-auto mb-0">
                  <li class="list-inline-item">
                    <a class="u-icon-v2 u-icon-size--sm g-brd-white g-color-black g-bg-white rounded-circle" href="#">
                      <i class="icon-communication-095 u-line-icon-pro"></i>
                    </a>
                  </li>
                  <li class="list-inline-item">
                    <a class="cbp-lightbox u-icon-v2 u-icon-size--sm g-brd-white g-color-black g-bg-white rounded-circle" href="{{ root }}assets/img-temp/400x270/img16.jpg">
                      <i class="icon-communication-017 u-line-icon-pro"></i>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <!-- End Cube Portfolio Blocks - Item -->

          <!-- Cube Portfolio Blocks - Item -->
          <div class="cbp-item design">
            <div class="u-block-hover g-parent">
              <img class="img-fluid g-transform-scale-1_1--parent-hover g-transition-0_5 g-transition--ease-in-out" src="{{ root }}assets/img-temp/400x270/img13.jpg" alt="Image description">
              <div class="d-flex w-100 h-100 u-block-hover__additional--fade u-block-hover__additional--fade-in g-bg-bluegray-opacity-0_5 opacity-0 g-opacity-1--parent-hover g-pos-abs g-top-0 g-left-0 g-transition-0_3 g-transition--ease-in g-pa-20">
                <div class="d-flex align-items-start flex-column mb-auto">
                  <h3 class="h5 g-color-white g-font-weight-600 mb-1">Photography</h3>
                  <span class="d-block g-color-white-opacity-0_8">Design</span>
                </div>
                <ul class="align-items-end flex-column list-inline mt-auto ml-auto mb-0">
                  <li class="list-inline-item">
                    <a class="u-icon-v2 u-icon-size--sm g-brd-white g-color-black g-bg-white rounded-circle" href="#">
                      <i class="icon-communication-095 u-line-icon-pro"></i>
                    </a>
                  </li>
                  <li class="list-inline-item">
                    <a class="cbp-lightbox u-icon-v2 u-icon-size--sm g-brd-white g-color-black g-bg-white rounded-circle" href="{{ root }}assets/img-temp/400x270/img13.jpg">
                      <i class="icon-communication-017 u-line-icon-pro"></i>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <!-- End Cube Portfolio Blocks - Item -->

          <!-- Cube Portfolio Blocks - Item -->
          <div class="cbp-item graphic identity">
            <div class="u-block-hover g-parent">
              <img class="img-fluid g-transform-scale-1_1--parent-hover g-transition-0_5 g-transition--ease-in-out" src="{{ root }}assets/img-temp/400x270/img14.jpg" alt="Image description">
              <div class="d-flex w-100 h-100 u-block-hover__additional--fade u-block-hover__additional--fade-in g-bg-bluegray-opacity-0_5 opacity-0 g-opacity-1--parent-hover g-pos-abs g-top-0 g-left-0 g-transition-0_3 g-transition--ease-in g-pa-20">
                <div class="d-flex align-items-start flex-column mb-auto">
                  <h3 class="h5 g-color-white g-font-weight-600 mb-1">Social strategy</h3>
                  <span class="d-block g-color-white-opacity-0_8">Graphic, Identity</span>
                </div>
                <ul class="align-items-end flex-column list-inline mt-auto ml-auto mb-0">
                  <li class="list-inline-item">
                    <a class="u-icon-v2 u-icon-size--sm g-brd-white g-color-black g-bg-white rounded-circle" href="#">
                      <i class="icon-communication-095 u-line-icon-pro"></i>
                    </a>
                  </li>
                  <li class="list-inline-item">
                    <a class="cbp-lightbox u-icon-v2 u-icon-size--sm g-brd-white g-color-black g-bg-white rounded-circle" href="{{ root }}assets/img-temp/400x270/img14.jpg">
                      <i class="icon-communication-017 u-line-icon-pro"></i>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <!-- End Cube Portfolio Blocks - Item -->
        </div>
      </div>
      <!-- End Cube Portfolio Blocks - Content -->

      <!-- Mockup -->
      <section class="g-bg-secondary">
        <div class="container g-pt-100 g-pb-70">
          <div class="row">
            <div class="col-lg-5 g-mb-30">
              <div class="mb-2">
                <div class="d-inline-block g-width-30 g-height-2 g-pos-rel g-top-minus-4 g-bg-primary mr-2"></div>
                <span class="g-color-gray-dark-v3 g-font-weight-600 g-font-size-12 text-uppercase">About</span>
              </div>

              <div class="mb-5">
                <h2 class="h1 g-color-black g-font-weight-600 g-mb-35"><span class="g-color-primary">What</span> We<br>are
                  <span class="g-color-primary">Good</span> at</h2>
                <p>We are a creative studio focusing on culture, luxury, editorial &amp; art. Somewhere between sophistication and simplicity.</p>
                <p>As creatives, it's important that we strive to do work outside of obligation. This lets us stay ahead of the curve for our clients and internal projects.</p>
              </div>
              <a class="btn u-btn-primary g-font-size-default text-uppercase g-rounded-50 g-py-12 g-px-30" href="#">Purchase Now</a>
            </div>

            <div class="col-lg-7 g-mb-30">
              <img class="img-fluid w-100 mb-4" src="{{ root }}assets/img-temp/600x360/img1.png" alt="Image Description">
            </div>
          </div>
        </div>
      </section>
      <!-- End Mockup -->

      <!-- Team Blocks -->
      <section class="container g-pt-100 g-pb-70">
        <!-- Heading -->
        <div class="row justify-content-center text-center g-mb-50">
          <div class="col-lg-9">
            <h2 class="h2 g-color-black g-font-weight-600 mb-2">Meet our Team</h2>
            <div class="d-inline-block g-width-30 g-height-2 g-bg-primary mb-2"></div>
            <p class="lead mb-0">We are a creative studio focusing on culture, luxury, editorial &amp; art. Somewhere between sophistication and simplicity.</p>
          </div>
        </div>
        <!-- End Heading -->

        <div class="row">
          <div class="col-lg-3 col-sm-6 g-mb-30">
            <!-- Team Block -->
            <div class="u-info-v6-1">
              <!-- Figure -->
              <figure class="u-block-hover">
                <!-- Figure Image -->
                <img class="w-100" src="{{ root }}assets/img-temp/400x450/img1.jpg" alt="Image Description">
                <!-- End Figure Image-->

                <!-- Figure Caption -->
                <figcaption class="u-block-hover__additional--fade g-bg-bluegray-opacity-0_5 g-pa-30">
                  <div class="u-block-hover__additional--fade u-block-hover__additional--fade-down g-flex-middle">
                    <!-- Figure Social Icons -->
                    <ul class="list-inline text-center g-flex-middle-item">
                      <li class="list-inline-item align-middle g-mx-3">
                        <a class="u-icon-v2 g-width-35 g-height-35 g-color-white g-color-black--hover g-brd-white g-bg-white--hover g-font-size-default rounded-circle" href="#">
                          <i class="fa fa-facebook"></i>
                        </a>
                      </li>
                      <li class="list-inline-item align-middle g-mx-3">
                        <a class="u-icon-v2 g-width-35 g-height-35 g-color-white g-color-black--hover g-brd-white g-bg-white--hover g-font-size-default rounded-circle" href="#">
                          <i class="fa fa-twitter"></i>
                        </a>
                      </li>
                      <li class="list-inline-item align-middle g-mx-3">
                        <a class="u-icon-v2 g-width-35 g-height-35 g-color-white g-color-black--hover g-brd-white g-bg-white--hover g-font-size-default rounded-circle" href="#">
                          <i class="fa fa-google-plus"></i>
                        </a>
                      </li>
                    </ul>
                    <!-- End Figure Social Icons -->
                  </div>
                </figcaption>
                <!-- End Figure Caption -->
              </figure>
              <!-- End Figure -->

              <!-- Figure Info -->
              <div class="g-bg-white g-pt-25">
                <div class="g-mb-15">
                  <h2 class="h5 g-color-black g-font-weight-600">Leyla Watson</h2>
                    <em class="d-block u-info-v6-1__item g-font-style-normal g-font-size-11 text-uppercase g-color-primary">Technical Director</em>
                </div>

                <p>I am an ambitious workaholic, but apart from that, pretty simple person.</p>
              </div>
              <!-- End Figure Info-->
            </div>
            <!-- End Team Block -->
          </div>

          <div class="col-lg-3 col-sm-6 g-mb-30">
            <!-- Team Block -->
            <div class="u-info-v6-1">
              <!-- Figure -->
              <figure class="u-block-hover">
                <!-- Figure Image -->
                <img class="w-100" src="{{ root }}assets/img-temp/400x450/img2.jpg" alt="Image Description">
                <!-- End Figure Image-->

                <!-- Figure Caption -->
                <figcaption class="u-block-hover__additional--fade g-bg-bluegray-opacity-0_5 g-pa-30">
                  <div class="u-block-hover__additional--fade u-block-hover__additional--fade-down g-flex-middle">
                    <!-- Figure Social Icons -->
                    <ul class="list-inline text-center g-flex-middle-item">
                      <li class="list-inline-item align-middle g-mx-3">
                        <a class="u-icon-v2 g-width-35 g-height-35 g-color-white g-color-black--hover g-brd-white g-bg-white--hover g-font-size-default rounded-circle" href="#">
                          <i class="fa fa-facebook"></i>
                        </a>
                      </li>
                      <li class="list-inline-item align-middle g-mx-3">
                        <a class="u-icon-v2 g-width-35 g-height-35 g-color-white g-color-black--hover g-brd-white g-bg-white--hover g-font-size-default rounded-circle" href="#">
                          <i class="fa fa-twitter"></i>
                        </a>
                      </li>
                      <li class="list-inline-item align-middle g-mx-3">
                        <a class="u-icon-v2 g-width-35 g-height-35 g-color-white g-color-black--hover g-brd-white g-bg-white--hover g-font-size-default rounded-circle" href="#">
                          <i class="fa fa-google-plus"></i>
                        </a>
                      </li>
                    </ul>
                    <!-- End Figure Social Icons -->
                  </div>
                </figcaption>
                <!-- End Figure Caption -->
              </figure>
              <!-- End Figure -->

              <!-- Figure Info -->
              <div class="g-bg-white g-pt-25">
                <div class="g-mb-15">
                  <h2 class="h5 g-color-black g-font-weight-600">Tina Krueger</h2>
                    <em class="d-block u-info-v6-1__item g-font-style-normal g-font-size-11 text-uppercase g-color-primary">Lead Designer</em>
                </div>

                <p>I am an ambitious workaholic, but apart from that, pretty simple person.</p>
              </div>
              <!-- End Figure Info-->
            </div>
            <!-- End Team Block -->
          </div>

          <div class="col-lg-3 col-sm-6 g-mb-30">
            <!-- Team Block -->
            <div class="u-info-v6-1">
              <!-- Figure -->
              <figure class="u-block-hover">
                <!-- Figure Image -->
                <img class="w-100" src="{{ root }}assets/img-temp/400x450/img3.jpg" alt="Image Description">
                <!-- End Figure Image-->

                <!-- Figure Caption -->
                <figcaption class="u-block-hover__additional--fade g-bg-bluegray-opacity-0_5 g-pa-30">
                  <div class="u-block-hover__additional--fade u-block-hover__additional--fade-down g-flex-middle">
                    <!-- Figure Social Icons -->
                    <ul class="list-inline text-center g-flex-middle-item">
                      <li class="list-inline-item align-middle g-mx-3">
                        <a class="u-icon-v2 g-width-35 g-height-35 g-color-white g-color-black--hover g-brd-white g-bg-white--hover g-font-size-default rounded-circle" href="#">
                          <i class="fa fa-facebook"></i>
                        </a>
                      </li>
                      <li class="list-inline-item align-middle g-mx-3">
                        <a class="u-icon-v2 g-width-35 g-height-35 g-color-white g-color-black--hover g-brd-white g-bg-white--hover g-font-size-default rounded-circle" href="#">
                          <i class="fa fa-twitter"></i>
                        </a>
                      </li>
                      <li class="list-inline-item align-middle g-mx-3">
                        <a class="u-icon-v2 g-width-35 g-height-35 g-color-white g-color-black--hover g-brd-white g-bg-white--hover g-font-size-default rounded-circle" href="#">
                          <i class="fa fa-google-plus"></i>
                        </a>
                      </li>
                    </ul>
                    <!-- End Figure Social Icons -->
                  </div>
                </figcaption>
                <!-- End Figure Caption -->
              </figure>
              <!-- End Figure -->

              <!-- Figure Info -->
              <div class="g-bg-white g-pt-25">
                <div class="g-mb-15">
                  <h2 class="h5 g-color-black g-font-weight-600">David Case</h2>
                    <em class="d-block u-info-v6-1__item g-font-style-normal g-font-size-11 text-uppercase g-color-primary">Web Developer</em>
                </div>

                <p>I am an ambitious workaholic, but apart from that, pretty simple person.</p>
              </div>
              <!-- End Figure Info-->
            </div>
            <!-- End Team Block -->
          </div>

          <div class="col-lg-3 col-sm-6 g-mb-30">
            <!-- Team Block -->
            <div class="u-info-v6-1">
              <!-- Figure -->
              <figure class="u-block-hover">
                <!-- Figure Image -->
                <img class="w-100" src="{{ root }}assets/img-temp/400x450/img4.jpg" alt="Image Description">
                <!-- End Figure Image-->

                <!-- Figure Caption -->
                <figcaption class="u-block-hover__additional--fade g-bg-bluegray-opacity-0_5 g-pa-30">
                  <div class="u-block-hover__additional--fade u-block-hover__additional--fade-down g-flex-middle">
                    <!-- Figure Social Icons -->
                    <ul class="list-inline text-center g-flex-middle-item">
                      <li class="list-inline-item align-middle g-mx-3">
                        <a class="u-icon-v2 g-width-35 g-height-35 g-color-white g-color-black--hover g-brd-white g-bg-white--hover g-font-size-default rounded-circle" href="#">
                          <i class="fa fa-facebook"></i>
                        </a>
                      </li>
                      <li class="list-inline-item align-middle g-mx-3">
                        <a class="u-icon-v2 g-width-35 g-height-35 g-color-white g-color-black--hover g-brd-white g-bg-white--hover g-font-size-default rounded-circle" href="#">
                          <i class="fa fa-twitter"></i>
                        </a>
                      </li>
                      <li class="list-inline-item align-middle g-mx-3">
                        <a class="u-icon-v2 g-width-35 g-height-35 g-color-white g-color-black--hover g-brd-white g-bg-white--hover g-font-size-default rounded-circle" href="#">
                          <i class="fa fa-google-plus"></i>
                        </a>
                      </li>
                    </ul>
                    <!-- End Figure Social Icons -->
                  </div>
                </figcaption>
                <!-- End Figure Caption -->
              </figure>
              <!-- End Figure -->

              <!-- Figure Info -->
              <div class="g-bg-white g-pt-25">
                <div class="g-mb-15">
                  <h2 class="h5 g-color-black g-font-weight-600">Sara Lisbon</h2>
                    <em class="d-block u-info-v6-1__item g-font-style-normal g-font-size-11 text-uppercase g-color-primary">Support Manager</em>
                </div>

                <p>I am an ambitious workaholic, but apart from that, pretty simple person.</p>
              </div>
              <!-- End Figure Info-->
            </div>
            <!-- End Team Block -->
          </div>
        </div>
      </section>
      <!-- End Team Blocks -->

      <!-- Call to Action -->
      <section class="g-bg-secondary">
        <div class="container text-center g-py-100">
          <div class="row justify-content-center">
            <div class="col-lg-9">
              <div class="g-mb-50">
                <h2 class="h2 g-color-black g-font-weight-600 mb-2">Find Out More About Unify</h2>
                <div class="d-inline-block g-width-30 g-height-2 g-bg-primary mb-2"></div>
                <p class="lead mb-0">We are a creative studio focusing on culture, luxury, editorial &amp; art. Somewhere between sophistication and simplicity.</p>
              </div>
              <a class="btn btn-md u-btn-outline-black g-font-size-default text-uppercase g-rounded-50 g-py-12 g-px-30 mx-1 g-mb-20" href="#">Explore More</a>
              <a class="btn btn-md u-btn-primary g-font-size-default text-uppercase g-rounded-50 g-py-12 g-px-30 mx-1 g-mb-20" href="#">Purchase Now</a>
            </div>
          </div>
        </div>
      </section>
      <!-- End Call to Action -->

      <!-- Footer -->
      <div class="g-bg-black-opacity-0_9 g-color-white-opacity-0_8 g-py-60">
        <div class="container">
          <div class="row">
            <!-- Footer Content -->
            <div class="col-lg-3 col-md-6 g-mb-40 g-mb-0--lg">
              <a class="d-block g-mb-20" href="index.html">
                <img class="img-fluid" src="{{ root }}assets/img/logo/logo-2.png" alt="Logo">
              </a>
              <p>About Unify dolor sit amet, consectetur adipiscing elit. Maecenas eget nisl id libero tincidunt sodales.</p>
              <p class="mb-0">Duis eleifend fermentum ante ut aliquam. Cras mi risus, dignissim sed adipiscing ut, placerat non arcu.</p>
            </div>
            <!-- End Footer Content -->

            <!-- Footer Content -->
            <div class="col-lg-3 col-md-6 g-mb-40 g-mb-0--lg">
              <div class="u-heading-v3-1 g-brd-white-opacity-0_3 g-mb-25">
                <h2 class="u-heading-v3__title h6 text-uppercase g-brd-primary">Latest Posts</h2>
              </div>

              <article>
                <h3 class="h6 g-mb-2">
                  <a class="g-color-white-opacity-0_8 g-color-white--hover" href="#">Incredible template</a>
                </h3>
                <div class="small g-color-white-opacity-0_6">May 8, 2017</div>
              </article>

              <hr class="g-brd-white-opacity-0_1 g-my-10">

              <article>
                <h3 class="h6 g-mb-2">
                  <a class="g-color-white-opacity-0_8 g-color-white--hover" href="#">New features</a>
                </h3>
                <div class="small g-color-white-opacity-0_6">June 23, 2017</div>
              </article>

              <hr class="g-brd-white-opacity-0_1 g-my-10">

              <article>
                <h3 class="h6 g-mb-2">
                  <a class="g-color-white-opacity-0_8 g-color-white--hover" href="#">New terms and conditions</a>
                </h3>
                <div class="small g-color-white-opacity-0_6">September 15, 2017</div>
              </article>
            </div>
            <!-- End Footer Content -->

            <!-- Footer Content -->
            <div class="col-lg-3 col-md-6 g-mb-40 g-mb-0--lg">
              <div class="u-heading-v3-1 g-brd-white-opacity-0_3 g-mb-25">
                <h2 class="u-heading-v3__title h6 text-uppercase g-brd-primary">Useful Links</h2>
              </div>

              <nav class="text-uppercase1">
                <ul class="list-unstyled g-mt-minus-10 mb-0">
                  <li class="g-pos-rel g-brd-bottom g-brd-white-opacity-0_1 g-py-10">
                    <h4 class="h6 g-pr-20 mb-0">
                      <a class="g-color-white-opacity-0_8 g-color-white--hover" href="#">About Us</a>
                      <i class="fa fa-angle-right g-absolute-centered--y g-right-0"></i>
                    </h4>
                  </li>
                  <li class="g-pos-rel g-brd-bottom g-brd-white-opacity-0_1 g-py-10">
                    <h4 class="h6 g-pr-20 mb-0">
                      <a class="g-color-white-opacity-0_8 g-color-white--hover" href="#">Portfolio</a>
                      <i class="fa fa-angle-right g-absolute-centered--y g-right-0"></i>
                    </h4>
                  </li>
                  <li class="g-pos-rel g-brd-bottom g-brd-white-opacity-0_1 g-py-10">
                    <h4 class="h6 g-pr-20 mb-0">
                      <a class="g-color-white-opacity-0_8 g-color-white--hover" href="#">Our Services</a>
                      <i class="fa fa-angle-right g-absolute-centered--y g-right-0"></i>
                    </h4>
                  </li>
                  <li class="g-pos-rel g-brd-bottom g-brd-white-opacity-0_1 g-py-10">
                    <h4 class="h6 g-pr-20 mb-0">
                      <a class="g-color-white-opacity-0_8 g-color-white--hover" href="#">Latest Jobs</a>
                      <i class="fa fa-angle-right g-absolute-centered--y g-right-0"></i>
                    </h4>
                  </li>
                  <li class="g-pos-rel g-py-10">
                    <h4 class="h6 g-pr-20 mb-0">
                      <a class="g-color-white-opacity-0_8 g-color-white--hover" href="#">Contact Us</a>
                      <i class="fa fa-angle-right g-absolute-centered--y g-right-0"></i>
                    </h4>
                  </li>
                </ul>
              </nav>
            </div>
            <!-- End Footer Content -->

            <!-- Footer Content -->
            <div class="col-lg-3 col-md-6">
              <div class="u-heading-v3-1 g-brd-white-opacity-0_3 g-mb-25">
                <h2 class="u-heading-v3__title h6 text-uppercase g-brd-primary">Our Contacts</h2>
              </div>

              <address class="g-bg-no-repeat g-line-height-2 g-mt-minus-4" style="background-image: url({{ root }}assets/img/maps/map2.png);">
                25, Lorem Lis Street, Orange
                <br> California, US
                <br> Phone: 800 123 3456
                <br> Fax: 800 123 3457
                <br> Email: <a href="mailto:info@htmlstream.com" class="">info@htmlstream.com</a>
              </address>
            </div>
            <!-- End Footer Content -->
          </div>
        </div>
      </div>
      <!-- End Footer -->

      <!-- Copyright Footer -->
      <footer class="g-bg-gray-dark-v1 g-color-white-opacity-0_8 g-py-20">
        <div class="container">
          <div class="row">
            <div class="col-md-8 text-center text-md-left g-mb-15 g-mb-0--md">
              <div class="d-lg-flex">
                <small class="d-block g-font-size-default g-mr-10 g-mb-10 g-mb-0--md">2019 &copy; All Rights Reserved.</small>
                <ul class="u-list-inline">
                  <li class="list-inline-item">
                    <a href="#">Privacy Policy</a>
                  </li>
                  <li class="list-inline-item">
                    <span>|</span>
                  </li>
                  <li class="list-inline-item">
                    <a href="#">Terms of Use</a>
                  </li>
                </ul>
              </div>
            </div>

            <div class="col-md-4 align-self-center">
              <ul class="list-inline text-center text-md-right mb-0">
                <li class="list-inline-item g-mx-10" data-toggle="tooltip" data-placement="top" title="Facebook">
                  <a href="#" class="g-color-white-opacity-0_5 g-color-white--hover">
                    <i class="fa fa-facebook"></i>
                  </a>
                </li>
                <li class="list-inline-item g-mx-10" data-toggle="tooltip" data-placement="top" title="Skype">
                  <a href="#" class="g-color-white-opacity-0_5 g-color-white--hover">
                    <i class="fa fa-skype"></i>
                  </a>
                </li>
                <li class="list-inline-item g-mx-10" data-toggle="tooltip" data-placement="top" title="Linkedin">
                  <a href="#" class="g-color-white-opacity-0_5 g-color-white--hover">
                    <i class="fa fa-linkedin"></i>
                  </a>
                </li>
                <li class="list-inline-item g-mx-10" data-toggle="tooltip" data-placement="top" title="Pinterest">
                  <a href="#" class="g-color-white-opacity-0_5 g-color-white--hover">
                    <i class="fa fa-pinterest"></i>
                  </a>
                </li>
                <li class="list-inline-item g-mx-10" data-toggle="tooltip" data-placement="top" title="Twitter">
                  <a href="#" class="g-color-white-opacity-0_5 g-color-white--hover">
                    <i class="fa fa-twitter"></i>
                  </a>
                </li>
                <li class="list-inline-item g-mx-10" data-toggle="tooltip" data-placement="top" title="Dribbble">
                  <a href="#" class="g-color-white-opacity-0_5 g-color-white--hover">
                    <i class="fa fa-dribbble"></i>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </footer>
      <!-- End Copyright 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/appear.js"></script>
    <script src="{{ root }}assets/vendor/slick-carousel/slick/slick.js"></script>
    <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/fancybox/jquery.fancybox.min.js"></script>
    <script src="{{ root }}assets/vendor/cubeportfolio-full/cubeportfolio/js/jquery.cubeportfolio.min.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-addons/particles/js/revolution.addon.particles.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.carousel.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.counter.js"></script>
    <script src="{{ root }}assets/js/components/hs.cubeportfolio.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,
        revapi1174;

      tpj(document).ready(function () {
        if (tpj("#rev_slider_1174_1").revolution == undefined) {
          revslider_showDoubleJqueryError("#rev_slider_1174_1");
        } else {
          revapi1174 = tpj("#rev_slider_1174_1").show().revolution({
            sliderType: "hero",
            jsFileLocation: "{{ root }}assets/vendor/revolution-slider/revolution/js/",
            sliderLayout: "fullscreen",
            dottedOverlay: "none",
            delay: 9000,
            navigation: {},
            responsiveLevels: [1240, 1024, 778, 480],
            visibilityLevels: [1240, 1024, 778, 480],
            gridwidth: [1240, 1024, 778, 480],
            gridheight: [868, 768, 960, 720],
            lazyType: "none",
            parallax: {
              type: "scroll",
              origo: "slidercenter",
              speed: 400,
              levels: [10, 15, 20, 25, 30, 35, 40, -10, -15, -20, -25, -30, -35, -40, -45, 55]
            },
            shadow: 0,
            spinner: "off",
            autoHeight: "off",
            fullScreenAutoWidth: "off",
            fullScreenAlignForce: "off",
            fullScreenOffsetContainer: "",
            fullScreenOffset: "60px",
            disableProgressBar: "on",
            hideThumbsOnMobile: "off",
            hideSliderAtLimit: 0,
            hideCaptionAtLimit: 0,
            hideAllCaptionAtLilmit: 0,
            debugMode: false,
            fallbacks: {
              simplifyAll: "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 counters
        var counters = $.HSCore.components.HSCounter.init('[class*="js-counter"]');

        // 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 cubeportfolio
        $.HSCore.components.HSCubeportfolio.init('.cbp');
      });

      $(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>
