{# Settings #}
{% set root = "../../" %}
{% set mainNavActive_1 = "blog" %}
{% set mainNavActive_2 = "blog-single-items" %}
{% set mainNavActive_3 = "blog-single-item-2" %}
{% set title = "Blog Single Item 2 | " %}

{% 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" %}
    <link rel="stylesheet" href="{{ root }}assets/vendor/icon-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="{{ root }}assets/vendor/icon-line-pro/style.css">
    <link rel="stylesheet" href="{{ root }}assets/vendor/icon-hs/style.css">
    <link rel="stylesheet" href="{{ root }}assets/vendor/animate.css">
    <link rel="stylesheet" href="{{ root }}assets/vendor/fancybox/jquery.fancybox.min.css">
    <link rel="stylesheet" href="{{ root }}assets/vendor/slick-carousel/slick/slick.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">

    {% 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" %}

      <!-- Blog Single Item Blocks -->
      <div class="container-fluid px-0">
        <div class="row no-gutters">
          <div id="stickyblock-start" class="col-md-6">
            <div class="js-sticky-block g-sticky-block--md g-bg-img-hero g-min-height-100vh" data-bg-img-src="{{ root }}assets/img-temp/900x900/img5.jpg"
                 data-type="responsive"
                 data-start-point="#stickyblock-start"
                 data-end-point="#stickyblock-end"></div>
          </div>

          <div class="col-md-6">
            <div class="g-pa-50 g-pt-0 g-px-100--lg g-pb-100--lg">
              <div class="g-max-width-400--md g-pos-rel g-z-index-1 g-pt-100 g-pl-50 g-pl-0--md g-ml-minus-50--lg mb-4">
                <h1 class="h2 g-color-black g-font-weight-600">The most expensive Radio Table by Tivoli Audio Created in the 21th-Century.</h1>
              </div>

              <div class="mb-5">
                <p class="g-color-black g-font-weight-600 g-font-size-16">Hundreds of millions of online accounts were compromised in corporate data breaches, the US presidential election process was plagued by cyber-meddling, internet infrastructure companies.</p>
              </div>

              <!-- Author -->
              <div class="media align-items-center g-brd-bottom g-brd-gray-light-v4 pb-5 mb-5">
                <img class="d-flex img-fluid g-width-40 g-height-40 rounded-circle mr-3" src="{{ root }}assets/img-temp/100x100/img4.jpg" alt="Image Description">
                <div class="media-body">
                  <h4 class="h6 g-color-black g-font-weight-600 mb-0">By Anastasia Kirimova</h4>
                  <span class="d-block g-color-gray-dark-v5 g-font-size-12">May 31, 2017</span>
                </div>

                <!-- Figure Social Icons -->
                <ul class="list-inline mb-0">
                  <li class="list-inline-item g-mx-2">
                    <a class="u-icon-v2 u-icon-size--xs g-brd-gray-light-v4 g-brd-primary--hover g-color-gray-dark-v3 g-color-white--hover g-bg-primary--hover rounded-circle g-text-underline--none--hover" href="#">
                      <i class="fa fa-facebook"></i>
                    </a>
                  </li>
                  <li class="list-inline-item g-mx-2">
                    <a class="u-icon-v2 u-icon-size--xs g-brd-gray-light-v4 g-brd-primary--hover g-color-gray-dark-v3 g-color-white--hover g-bg-primary--hover rounded-circle g-text-underline--none--hover" href="#">
                      <i class="fa fa-twitter"></i>
                    </a>
                  </li>
                  <li class="list-inline-item g-mx-2">
                    <a class="u-icon-v2 u-icon-size--xs g-brd-gray-light-v4 g-brd-primary--hover g-color-gray-dark-v3 g-color-white--hover g-bg-primary--hover rounded-circle g-text-underline--none--hover" href="#">
                      <i class="fa fa-google-plus"></i>
                    </a>
                  </li>
                  <li class="list-inline-item g-mx-2">
                    <a class="u-icon-v2 u-icon-size--xs g-brd-gray-light-v4 g-brd-primary--hover g-color-gray-dark-v3 g-color-white--hover g-bg-primary--hover rounded-circle g-text-underline--none--hover" href="#">
                      <i class="fa fa-linkedin"></i>
                    </a>
                  </li>
                </ul>
                <!-- End Figure Social Icons -->
              </div>
              <!-- End Author -->

              <p><span class="d-inline-block float-left g-width-70 g-color-black g-font-weight-600 g-font-size-50 text-center mr-2">H</span>undreds of millions of online accounts were compromised in corporate data breaches, the US presidential election process was plagued by cyber-meddling, internet infrastructure companies faced massive digital attacks that disrupted web connectivity for millions of people, and Apple faced off with the FBI in an epic privacy battle.</p>
              <p>When reality is more terrifying than a movie could ever be, perhaps it’s time to retreat into the fictional for awhile and enjoy the fascinating world of cybersecurity from the safety of your living room for a change.</p>
              <p>Here are some favorite movies and television shows from 2016 that will let you get a taste of the hacker underworld over the holidays—hopefully without consigning you to a permanent state of digital dread. We aim high at being focused on building relationships with our clients and community.</p>

              <div class="text-center g-pt-50 g-pb-40">
                <blockquote class="g-color-black g-font-weight-600 g-font-size-30 g-line-height-1_4">
                  <span class="d-block g-font-weight-500 g-font-size-60 g-line-height-0 g-mb-15">&#8220;</span>
                  The Designer Rips Apart and Reconstructs Fashion with Obsessive Intellect.
                </blockquote>
                <em class="g-color-gray-dark-v3 g-font-weight-600 g-font-size-18">&#8212; Edward Pilson, Interior Designer</em>
              </div>

              <div class="g-mb-40">
                <p>The story of whistleblower Edward Snowden is the most dramatic spy story of the decade. An Oliver Stone biopic was inevitable. So here it is. As movies almost always do, Snowden eliminates the nuance from this complicated and controversial story, painting Snowden as a hero and the National Security Agency as a one-dimensional villain. But as WIRED pointed out when the movie debuted, Snowden is important because it's the accessible version of events that many Americans will remember.</p>
                <p>It's not every day that a network drama puts the ethics and repercussions of bulk surveillance at the core of its premise, but CBS's Person of Interest managed to do it successfully. The show combines government surveillance to stop terrorist attacks with an eccentric hacker billionaire and vigilante justice. It even grapples with questions of how an artificial intelligence evolves and incorporates biases. Person of Interest is particularly known for airing a prescient episode in 2012 about a National Security Agency whistleblower very similar to Edward Snowden.</p>
              </div>

              <!-- Carousel -->
              <div class="g-mb-40">
                <div id="carousel-08-1" class="js-carousel"
                     data-infinite="true"
                     data-nav-for="#carousel-08-2">
                  <div class="js-slide">
                    <a class="js-fancybox d-block g-brd-around g-brd-gray-light-v4 g-pos-rel g-pa-7" href="javascript:;"
                       data-fancybox="lightbox-gallery--08-1"
                       data-src="{{ root }}assets/img-temp/400x270/img18.jpg"
                       data-caption="Lightbox Gallery"
                       data-speed="1000"
                       data-is-infinite="true"
                       data-slideshow-speed="5000"
                       data-overlay-blur-bg="true"
                       data-animate-in="bounceInDown"
                       data-animate-out="bounceOutDown">
                      <img class="img-fluid w-100" src="{{ root }}assets/img-temp/400x270/img18.jpg" alt="Image Description">
                    </a>
                  </div>

                  <div class="js-slide">
                    <a class="js-fancybox d-block g-brd-around g-brd-gray-light-v4 g-pos-rel g-pa-7" href="javascript:;"
                       data-fancybox="lightbox-gallery--08-1"
                       data-src="{{ root }}assets/img-temp/400x270/img19.jpg"
                       data-caption="Lightbox Gallery"
                       data-speed="1000"
                       data-is-infinite="true"
                       data-slideshow-speed="5000"
                       data-overlay-blur-bg="true"
                       data-animate-in="bounceInDown"
                       data-animate-out="bounceOutDown">
                      <img class="img-fluid w-100" src="{{ root }}assets/img-temp/400x270/img19.jpg" alt="Image Description">
                    </a>
                  </div>

                  <div class="js-slide">
                    <a class="js-fancybox d-block g-brd-around g-brd-gray-light-v4 g-pos-rel g-pa-7" href="javascript:;"
                       data-fancybox="lightbox-gallery--08-1"
                       data-src="{{ root }}assets/img-temp/400x270/img20.jpg"
                       data-caption="Lightbox Gallery"
                       data-speed="1000"
                       data-is-infinite="true"
                       data-slideshow-speed="5000"
                       data-overlay-blur-bg="true"
                       data-animate-in="bounceInDown"
                       data-animate-out="bounceOutDown">
                      <img class="img-fluid w-100" src="{{ root }}assets/img-temp/400x270/img20.jpg" alt="Image Description">
                    </a>
                  </div>

                  <div class="js-slide">
                    <a class="js-fancybox d-block g-brd-around g-brd-gray-light-v4 g-pos-rel g-pa-7" href="javascript:;"
                       data-fancybox="lightbox-gallery--08-1"
                       data-src="{{ root }}assets/img-temp/400x270/img21.jpg"
                       data-caption="Lightbox Gallery"
                       data-speed="1000"
                       data-is-infinite="true"
                       data-slideshow-speed="5000"
                       data-overlay-blur-bg="true"
                       data-animate-in="bounceInDown"
                       data-animate-out="bounceOutDown">
                      <img class="img-fluid w-100" src="{{ root }}assets/img-temp/400x270/img21.jpg" alt="Image Description">
                    </a>
                  </div>

                  <div class="js-slide">
                    <a class="js-fancybox d-block g-brd-around g-brd-gray-light-v4 g-pos-rel g-pa-7" href="javascript:;"
                       data-fancybox="lightbox-gallery--08-1"
                       data-src="{{ root }}assets/img-temp/400x270/img22.jpg"
                       data-caption="Lightbox Gallery"
                       data-speed="1000"
                       data-is-infinite="true"
                       data-slideshow-speed="5000"
                       data-overlay-blur-bg="true"
                       data-animate-in="bounceInDown"
                       data-animate-out="bounceOutDown">
                      <img class="img-fluid w-100" src="{{ root }}assets/img-temp/400x270/img22.jpg" alt="Image Description">
                    </a>
                  </div>
                </div>

                <div id="carousel-08-2" class="js-carousel"
                     data-infinite="true"
                     data-center-mode="true"
                     data-slides-show="4"
                     data-is-thumbs="true"
                     data-nav-for="#carousel-08-1">
                  <div class="js-slide g-cursor-pointer">
                    <img class="img-fluid g-brd-around g-brd-gray-light-v4 g-pa-7" src="{{ root }}assets/img-temp/400x270/img18.jpg" alt="Image Description">
                  </div>

                  <div class="js-slide g-cursor-pointer">
                    <img class="img-fluid g-brd-around g-brd-gray-light-v4 g-pa-7" src="{{ root }}assets/img-temp/400x270/img19.jpg" alt="Image Description">
                  </div>

                  <div class="js-slide g-cursor-pointer">
                    <img class="img-fluid g-brd-around g-brd-gray-light-v4 g-pa-7" src="{{ root }}assets/img-temp/400x270/img20.jpg" alt="Image Description">
                  </div>

                  <div class="js-slide g-cursor-pointer">
                    <img class="img-fluid g-brd-around g-brd-gray-light-v4 g-pa-7" src="{{ root }}assets/img-temp/400x270/img21.jpg" alt="Image Description">
                  </div>

                  <div class="js-slide g-cursor-pointer">
                    <img class="img-fluid g-brd-around g-brd-gray-light-v4 g-pa-7" src="{{ root }}assets/img-temp/400x270/img22.jpg" alt="Image Description">
                  </div>
                </div>
              </div>
              <!-- End Carousel -->

              <div class="g-mb-60">
                <p>Well, duh. USA's Mr. Robot is probably the most accurate and detailed dramatic portrayal ever made of current hacking practices and hacker culture. Its depiction of the cybersecurity community and its broader meditation on the relationship between humans and technology isn't perfect. (Not to mention that Season 2, which aired this year, had some narrative issues.) But overall the show is compelling and full of delightful references and winks to the cybersecurity subculture.</p>

                <div class="float-left g-max-width-300 g-ml-minus-50--lg mr-5">
                  <blockquote class="g-color-black g-font-weight-600 g-font-style-italic g-font-size-20">And action! Finding ways to help tell your story through video is a powerful tool.</blockquote>
                </div>

                <p>The story of whistleblower Edward Snowden is the most dramatic spy story of the decade. An Oliver Stone biopic was inevitable. So here it is. As movies almost always do, Snowden eliminates the nuance from this complicated and controversial story, painting Snowden as a hero and the National Security Agency as a one-dimensional villain. But as WIRED pointed out when the movie debuted, Snowden is important because it's the accessible version of events that many Americans will remember.</p>
                <p>Understanding who you are and what you want is our strategy for your brand. We are always figuring out ways to capture your vision, so people can get on board. Whether it's branding, print, UI + UX we've got you covered. We strive to figure out the right solutions for your look to stand out amongst the rest.</p>
              </div>

              <!-- Social Icons -->
              <div class="g-brd-top g-brd-gray-light-v4 text-center g-pt-50">
                <h3 class="h6 g-color-black g-font-weight-600 text-uppercase mb-3">Share:</h3>
                <ul class="list-inline mb-0">
                  <li class="list-inline-item g-mx-2">
                    <a class="u-icon-v1 u-icon-slide-up--hover g-color-gray-dark-v4 g-color-facebook--hover" href="#">
                      <i class="g-font-size-default g-line-height-1 u-icon__elem-regular fa fa-facebook"></i>
                      <i class="g-font-size-default g-line-height-0_8 u-icon__elem-hover fa fa-facebook"></i>
                    </a>
                  </li>
                  <li class="list-inline-item g-mx-2">
                    <a class="u-icon-v1 u-icon-slide-up--hover g-color-gray-dark-v4 g-color-twitter--hover" href="#">
                      <i class="g-font-size-default g-line-height-1 u-icon__elem-regular fa fa-twitter"></i>
                      <i class="g-font-size-default g-line-height-0_8 u-icon__elem-hover fa fa-twitter"></i>
                    </a>
                  </li>
                  <li class="list-inline-item g-mx-2">
                    <a class="u-icon-v1 u-icon-slide-up--hover g-color-gray-dark-v4 g-color-google-plus--hover" href="#">
                      <i class="g-font-size-default g-line-height-1 u-icon__elem-regular fa fa-google-plus"></i>
                      <i class="g-font-size-default g-line-height-0_8 u-icon__elem-hover fa fa-google-plus"></i>
                    </a>
                  </li>
                  <li class="list-inline-item g-mx-2">
                    <a class="u-icon-v1 u-icon-slide-up--hover g-color-gray-dark-v4 g-color-linkedin--hover" href="#">
                      <i class="g-font-size-default g-line-height-1 u-icon__elem-regular fa fa-linkedin"></i>
                      <i class="g-font-size-default g-line-height-0_8 u-icon__elem-hover fa fa-linkedin"></i>
                    </a>
                  </li>
                </ul>
              </div>
              <!-- End Social Icons -->
            </div>
          </div>
        </div>
      </div>
      <!-- End Blog Single Item Blocks -->

      <div id="stickyblock-end"></div>

      {% include "html/assets/include/nunjucks/partials/blocks/footers/footer-main.njk" %}
      {% include "html/assets/include/nunjucks/partials/blocks/footers/copyright-footer-main.njk" %}
      {% 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>
    <script src="{{ root }}assets/vendor/fancybox/jquery.fancybox.min.js"></script>
    <script src="{{ root }}assets/vendor/slick-carousel/slick/slick.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.sticky-block.js"></script>
    <script src="{{ root }}assets/js/components/hs.carousel.js"></script>
    <script src="{{ root }}assets/js/components/hs.popup.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>
      $(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 with media
        $.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 sticky blocks
        setTimeout(function() {
          $.HSCore.components.HSStickyBlock.init('.js-sticky-block');
        }, 300);
      });

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