<!doctype html>
<html class="no-js" lang="en-US">
<head>
    <!-- meta -->
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1">

    <!-- Uncomment the meta tags you are going to use! Be relevant and don't spam! -->

    <meta name="keywords" content="premium html template, unique premium template, multipurpose template" />
    <meta name="description" content="Kallyas is an ultra-premium, responsive theme built for todays websites. Create your website, fast.">

    <!-- Title -->
    <title>Demo - Frontend</title>

    <!--  Desktop Favicons  -->
    <link rel="icon" type="image/png" href="http://kallyas.themeforest.netdna-cdn.com/images/favicons/favicon-16x16.png" sizes="16x16">
    <!-- <link rel="icon" type="image/png" href="images/favicons/favicon-32x32.png" sizes="32x32"> -->
    <!-- <link rel="icon" type="image/png" href="images/favicons/favicon-96x96.png" sizes="96x96"> -->

    <!-- Google Fonts CSS Stylesheet // More here http://www.google.com/fonts#UsePlace:use/Collection:Open+Sans -->
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400italic,400,600,600italic,700,800,800italic" rel="stylesheet" type="text/css">
    <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>

    <!-- ***** Boostrap Custom / Addons Stylesheets ***** -->
    <link rel="stylesheet" href="http://kallyas.themeforest.netdna-cdn.com/css/bootstrap.css" type="text/css" media="all">

    <!-- Required CSS file for iOS Slider element -->
    <link rel="stylesheet" href="http://kallyas.themeforest.netdna-cdn.com/css/sliders/ios/style.css" type="text/css" media="all">

    <!-- ***** Main + Responsive & Base sizing CSS Stylesheet ***** -->
    <link rel="stylesheet" href="http://kallyas.themeforest.netdna-cdn.com/css/template.css" type="text/css" media="all">
    <link rel="stylesheet" href="http://kallyas.themeforest.netdna-cdn.com/css/responsive.css" type="text/css" media="all">
    <link rel="stylesheet" href="http://kallyas.themeforest.netdna-cdn.com/css/base-sizing.css" type="text/css" media="all">
    <link rel="stylesheet" href="http://kallyas.themeforest.netdna-cdn.com/css/dp.css" type="text/css" media="all">


    <!-- Modernizr Library -->
    <script type="text/javascript" src="http://kallyas.themeforest.netdna-cdn.com/js/modernizr.min.js"></script>

    <!-- jQuery Library -->
    <script type="text/javascript" src="http://kallyas.themeforest.netdna-cdn.com/js/jquery.js"></script>
</head>

<body class="">



<!-- Support Panel -->
<input type="checkbox" id="support_p" class="panel-checkbox">
<div class="support_panel">
    <div class="support-close-inner">
        <label for="support_p" class="spanel-label inner">
            <span class="support-panel-close">×</span>
        </label>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-sm-9">
                <!-- Title -->
                <h4 class="m_title">HOW TO SHOP</h4>

                <!-- Content - how to shop steps -->
                <div class="m_content how_to_shop">
                    <div class="row">
                        <div class="col-sm-4">
                            <span class="number">1</span> Login or create new account.
                        </div>
                        <!--/ col-sm-4 -->

                        <div class="col-sm-4">
                            <span class="number">2</span> Review your order.
                        </div>
                        <!--/ col-sm-4 -->

                        <div class="col-sm-4">
                            <span class="number">3</span> Payment &amp; <strong>FREE</strong> shipment
                        </div>
                        <!--/ col-sm-4 -->
                    </div>
                    <!--/ row -->

                    <p>If you still have problems, please let us know, by sending an email to <a class="__cf_email__" href="/cdn-cgi/l/email-protection" data-cfemail="d9aaaca9a9b6abad99aebcbbaab0adbcf7bab6b4">[email&#160;protected]</a><script data-cfhash='f9e31' type="text/javascript">/* <![CDATA[ */!function(t,e,r,n,c,a,p){try{t=document.currentScript||function(){for(t=document.getElementsByTagName('script'),e=t.length;e--;)if(t[e].getAttribute('data-cfhash'))return t[e]}();if(t&&(c=t.previousSibling)){p=t.parentNode;if(a=c.getAttribute('data-cfemail')){for(e='',r='0x'+a.substr(0,2)|0,n=2;a.length-n;n+=2)e+='%'+('0'+('0x'+a.substr(n,2)^r).toString(16)).slice(-2);p.replaceChild(document.createTextNode(decodeURIComponent(e)),c)}p.removeChild(t)}}catch(u){}}()/* ]]> */</script> . Thank you!</p>
                </div>
                <!--/ Content - how to shop steps -->
            </div>
            <!--/ col-sm-9 -->

            <div class="col-sm-3">
                <!-- Title -->
                <h4 class="m_title">SHOWROOM HOURS</h4>

                <!-- Content -->
                <div class="m_content">
                    Mon-Fri 9:00AM - 6:00AM<br>
                    Sat - 9:00AM-5:00PM<br>
                    Sundays by appointment only!
                </div>
                <!--/ Content -->
            </div>
            <!--/ col-sm-3 -->
        </div>
        <!--/ row -->
    </div>
    <!--/ container -->
</div>
<!--/ Support Panel -->

<!-- Page Wrapper -->
<div id="page_wrapper">
    <div id="dp-js-header-helper" style="height:0 !important; display:none !important;"></div>
    <div id="dp-js-header-helper" style="height:0 !important; display:none !important;"></div>
    <!-- Header style 1 -->
    <header id="header" class="site-header style1 cta_button">
        <!-- header bg -->
        <div class="kl-header-bg"></div>
        <!--/ header bg -->

        <!-- siteheader-container -->
        <div class="container siteheader-container">
            <!-- top-header -->
            <div class="kl-top-header clearfix">
                <!-- HEADER ACTION -->
                <div class="header-links-container ">
                    <ul class="topnav navRight topnav">
                        <!-- Support panel trigger -->
                        <li>
                            <label for="support_p" class="spanel-label">
                                <i class="glyphicon glyphicon-info-sign icon-white support-info visible-xs xs-icon"></i>
                                <span class="hidden-xs">SUPPORT</span>
                            </label>
                        </li>
                        <!--/ Support panel trigger -->

                        <!-- Login trigger -->
                        <li>
                            <a href="{{ url('/backend') }}">
                                <i class="glyphicon glyphicon-log-in visible-xs xs-icon"></i>
                                <span class="hidden-xs">LOGIN</span>
                            </a>
                        </li>
                        <!--/ Login trigger -->
                    </ul>

                    <!-- header search -->
                    <div id="search" class="header-search">
                        <a href="#" class="searchBtn "><span class="glyphicon glyphicon-search icon-white"></span></a>
                        <div class="search-container">
                            <form id="searchform" class="header-searchform" action="https://www.google.ro/search" method="get" target="_blank">
                                <input type="hidden" id="q" name="q"/>
                                <input name="s" maxlength="20" class="inputbox" type="text" size="20" value="SEARCH ..." onblur="if (this.value=='') this.value='SEARCH ...';" onfocus="if (this.value=='SEARCH ...') this.value='';">
                                <button type="submit" id="searchsubmit" class="searchsubmit glyphicon glyphicon-search icon-white"></button>
                            </form>
                        </div>
                    </div>
                    <!--/ header search -->
                </div>
                <!--/ HEADER ACTION -->

                <!-- HEADER ACTION left -->
                <div class="header-leftside-container ">
                    <!-- Header Social links -->
                    <ul class="social-icons sc--clean topnav navRight">
                        <li><a href="#" target="_self" class="icon-facebook" title="Facebook"></a></li>
                        <li><a href="#" target="_self" class="icon-twitter" title="Twitter"></a></li>
                        <li><a href="#" target="_self" class="icon-pinterest" title="Pinterest"></a></li>
                        <li><a href="#" target="_blank" class="icon-gplus" title="Google Plus"></a></li>
                    </ul>
                    <!--/ Header Social links -->

                    <div class="clearfix visible-xxs">
                    </div>

                    <!-- header contact text -->
                    <span class="kl-header-toptext">QUESTIONS? CALL: <a href="#" class="fw-bold">0900 800 900</a></span>
                    <!--/ header contact text -->
                </div>
                <!--/ HEADER ACTION left -->
            </div>
            <!--/ top-header -->

            <!-- separator -->
            <div class="separator"></div>
            <!--/ separator -->

            <!-- left side -->
            <!-- logo container-->
            <div class="logo-container hasInfoCard logosize--yes">
                <!-- Logo -->
                <h1 class="site-logo logo" id="logo">
                    <a href="#" title="">
                        <img src="{{ asset('kallyas/images/kallyas-logo.png') }}" class="logo-img" alt="" title="" />
                    </a>
                </h1>
                <!--/ Logo -->

                <!-- InfoCard -->
                <div id="infocard" class="logo-infocard">
                    <div class="custom">
                        <div class="row">
                            <div class="col-sm-5">
                                <p>
                                    &nbsp;
                                </p>
                                <p style="text-align: center;">
                                    <img src="{{ asset('kallyas/images/kallyas_icon.png') }}" class="" alt="Kallyas" title="Kallyas" />
                                </p>
                                <p style="text-align: center;">
                                    Demo is an ultra-premium, responsive theme built for today websites.
                                </p>
                            </div>
                            <!--/ col-sm-5 -->

                            <div class="col-sm-7">
                                <div class="custom contact-details">
                                    <p>
                                        <strong>T (212) 555 55 00</strong><br>
                                        Email:&nbsp;<a href="/cdn-cgi/l/email-protection#f88b99949d8bb881978d8a8f9d9a8b918c9dd69b9795"><span class="__cf_email__" data-cfemail="90e3f1fcf5e3d0e9ffe5e2e7f5f2e3f9e4f5bef3fffd">[email&#160;protected]</span><script data-cfhash='f9e31' type="text/javascript">/* <![CDATA[ */!function(t,e,r,n,c,a,p){try{t=document.currentScript||function(){for(t=document.getElementsByTagName('script'),e=t.length;e--;)if(t[e].getAttribute('data-cfhash'))return t[e]}();if(t&&(c=t.previousSibling)){p=t.parentNode;if(a=c.getAttribute('data-cfemail')){for(e='',r='0x'+a.substr(0,2)|0,n=2;a.length-n;n+=2)e+='%'+('0'+('0x'+a.substr(n,2)^r).toString(16)).slice(-2);p.replaceChild(document.createTextNode(decodeURIComponent(e)),c)}p.removeChild(t)}}catch(u){}}()/* ]]> */</script></a>
                                    </p>
                                    <p>
                                        Aura Publishing<br>
                                        Jl. Prof. Dr. Soemantri Brojonegoro, Komplek Unila Gedongmeneng , Bandar Lampung
                                    </p>
                                    <a href="http://goo.gl/maps/1OhOu" class="map-link" target="_blank" title="">
                                        <span class="glyphicon glyphicon-map-marker icon-white"></span>
                                        <span>Open in Google Maps</span>
                                    </a>
                                </div>
                                <div style="height:20px;">
                                </div>
                                <!-- Social links clean style -->
                                <ul class="social-icons sc--clean">
                                    <li><a href="#" target="_self" class="icon-twitter" title="Twitter"></a></li>
                                    <li><a href="#" target="_self" class="icon-facebook" title="Facebook"></a></li>
                                    <li><a href="#" target="_self" class="icon-dribbble" title="Dribbble"></a></li>
                                    <li><a href="#" target="_blank" class="icon-google" title="Google Plus"></a></li>
                                </ul>
                                <!--/ Social links clean style -->
                            </div>
                            <!--/ col-sm-7 -->
                        </div>
                        <!--/ row -->
                    </div>
                    <!--/ custom -->
                </div>
                <!--/ InfoCard -->

            </div>
            <!--/ logo container-->

            <!-- separator -->
            <div class="separator visible-xxs"></div>
            <!--/ separator -->

            <!-- responsive menu trigger -->
            <div id="zn-res-menuwrapper">
                <a href="#" class="zn-res-trigger zn-header-icon"></a>
            </div>
            <!--/ responsive menu trigger -->

            <!-- main menu -->
            <div id="main-menu" class="main-nav zn_mega_wrapper ">
                <ul id="menu-main-menu" class="main-menu zn_mega_menu">
                    <li class="menu-item-has-children"><a href="#">HOME</a>
                    </li>
                    <li class="menu-item-has-children"><a href="#">TENTANG KAMI</a>
                        <ul class="sub-menu clearfix">
                            <li><a href="#">HUBUNGI KAMI</a></li>
                            <li><a href="#">ACARA</a></li>
                        </ul>
                    </li>
                    <li class="menu-item-has-children"><a href="#">MENERBITKAN BUKU</a>
                        <ul class="sub-menu clearfix">
                            <li><a href="#">KONTAK KERJA SAMA</a></li>
                            <li><a href="#">PAKET PENERBITAN</a></li>
                            <li><a href="#">UNDUH PROFIL PERUSAHAAN</a></li>
                        </ul>
                    </li>
                    <li class="menu-item-has-children"><a href="#">PRODUK & LAYANAN</a>
                        <ul class="sub-menu clearfix">
                            <li><a href="#">SELF PUBLISHING</a></li>
                            <li><a href="#">LAYANAN CETAK BUKU</a></li>
                            <li><a href="#">KERJA SAMA PENERBITAN PERGURUAN TINGGI</a></li>
                            <li><a href="#">TERBIT MAYOR</a></li>
                            <li><a href="#">PERCETAKAN</a></li>
                        </ul>
                    </li>
                    <li class="menu-item-has-children"><a href="#">REKRUTMENT</a>
                    </li>
                    <li class="menu-item-has-children"><a href="#">KIRIM NASKAH</a>
                    </li>

                </ul>
            </div>
            <!--/ main menu -->

            <!-- right side -->
            <!-- Call to action ribbon Free Quote -->
            <a href="#" id="ctabutton" class="ctabutton kl-cta-ribbon" title="GET A FREE QUOTE" target="_self"><strong>FREE</strong>QUOTE<svg version="1.1" class="trisvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" preserveaspectratio="none" width="14px" height="5px" viewbox="0 0 14.017 5.006" enable-background="new 0 0 14.017 5.006" xml:space="preserve"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.016,0L7.008,5.006L0,0H14.016z"></path></svg></a>
            <!--/ Call to action ribbon Free Quote -->

            <!-- Shop Cart -->
            <ul class="topnav navLeft topnav--cart">
                <li class="drop">

                    <div class="pPanel">
                        <div class="inner cart-container">
                            <div class="widget_shopping_cart_content">
                                <ul class="cart_list product_list_widget ">
                                    <li>
                                        <a href="#" class="remove" title="Remove this item">×</a>
                                        <a href="#" class="product-title">
                                            <img src="http://kallyas.themeforest.netdna-cdn.com/images/img4-90x90.jpg" alt="Hoodie With Patch Logo" title="Hoodie With Patch Logo" />Hoodie With Patch Logo
                                        </a>
                                        <span class="color-variations">Blue</span>
                                        <span class="quantity">1 × <span class="amount">$99.90</span></span></li>
                                </ul>
                                <!-- end product list -->
                                <p class="total">
                                    <strong>Subtotal:</strong><span class="amount">$99.90</span>
                                </p>
                                <p class="buttons">
                                    <a href="cart.php" class="button wc-forward">View Cart</a>
                                    <a href="checkout.php" class="button checkout wc-forward">Checkout</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
            <!--/ Shop Cart -->

        </div>
        <!--/ siteheader-container -->
    </header>
    <!-- / Header style 1 -->

    <!-- Slideshow - iOS Slider element with animateme scroll efect, custom height and bottom mask style 2 -->
    <div class="kl-slideshow iosslider-slideshow uh_light_gray maskcontainer--shadow_ud iosslider--custom-height scrollme">
        <!-- Loader -->
        <div class="kl-loader">
            <svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px" viewbox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve"><path opacity="0.2" fill="#000" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946 s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634 c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"></path><path fill="#000" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0 C22.32,8.481,24.301,9.057,26.013,10.047z" transform="rotate(98.3774 20 20)"><animatetransform attributetype="xml" attributename="transform" type="rotate" from="0 20 20" to="360 20 20" dur="0.5s" repeatcount="indefinite"></animatetransform></path></svg>
        </div>
        <!-- Loader -->

        <div class="bgback">
        </div>

        <!-- Animated Sparkles -->
        <div class="th-sparkles">
        </div>
        <!--/ Animated Sparkles -->

        <!-- iOS Slider wrapper with animateme scroll efect -->
        <div class="iosSlider kl-slideshow-inner animateme" data-trans="6000" data-autoplay="1" data-infinite="true" data-when="span" data-from="0" data-to="0.75" data-translatey="300" data-easing="linear">
            <!-- Slides -->
            <div class="kl-iosslider hideControls">
                <!-- Slide 1 -->
                <div class="item iosslider__item">
                    <!-- Image -->
                    <div class="slide-item-bg" style="background-image:url(http://kallyas.themeforest.netdna-cdn.com/images/sliders/216h-lq.jpg);">
                    </div>
                    <!--/ Image -->

                    <!-- Gradient overlay -->
                    <div class="kl-slide-overlay" style="background:rgba(32,55,152,0.4); background: -moz-linear-gradient(left, rgba(32,55,152,0.4) 0%, rgba(17,93,131,0.25) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(32,55,152,0.4)), color-stop(100%,rgba(17,93,131,0.25))); background: -webkit-linear-gradient(left, rgba(32,55,152,0.4) 0%,rgba(17,93,131,0.25) 100%); background: -o-linear-gradient(left, rgba(32,55,152,0.4) 0%,rgba(17,93,131,0.25) 100%); background: -ms-linear-gradient(left, rgba(32,55,152,0.4) 0%,rgba(17,93,131,0.25) 100%); background: linear-gradient(to right, rgba(32,55,152,0.4) 0%,rgba(17,93,131,0.25) 100%); ">
                    </div>
                    <!--/ Gradient overlay -->

                    <!-- Captions container -->
                    <div class="container kl-iosslide-caption kl-ioscaption--style4 s4ext fromleft klios-alignleft kl-caption-posv-middle">
                        <!-- Captions animateme wrapper -->
                        <div class="animateme" data-when="span" data-from="0" data-to="0.75" data-opacity="0.1" data-easing="linear">
                            <!-- Main Big Title -->
                            <h2 class="main_title has_titlebig"><span><strong>SUMMER SALE</strong> STEAM</span></h2>
                            <!--/ Main Big Title -->

                            <!-- Big Title -->
                            <h3 class="title_big">UP TO <strong>40% OFF</strong></h3>
                            <!--/ Big Title -->

                            <!-- Link more button -->
                            <a class="more" href="#" target="_self">SEE COLLECTION</a>
                            <!--/ Link more button -->

                            <!-- Small Title -->
                            <h4 class="title_small">FOR NEW ARRIVALS OF 2017'S COLLECTION</h4>
                            <!--/ Small Title -->
                        </div>
                        <!--/ Captions animateme wrapper -->
                    </div>
                    <!--/ Captions container -->
                </div>
                <!--/ Slide 1 -->

                <!-- Slide 2 -->
                <div class="item iosslider__item">
                    <!-- Image -->
                    <div class="slide-item-bg" style="background-image:url(http://kallyas.themeforest.netdna-cdn.com/images/sliders/216h-lq.jpg);">
                    </div>
                    <!--/ Image -->

                    <!-- Color overlay -->
                    <div class="kl-slide-overlay" style="background-color:rgba(6,111,217,0.3)">
                    </div>
                    <!--/ Color overlay -->

                    <!-- Captions container -->
                    <div class="container kl-iosslide-caption kl-ioscaption--style4 fromright klios-alignright kl-caption-posv-middle">
                        <!-- Captions animateme wrapper -->
                        <div class="animateme" data-when="span" data-from="0" data-to="0.75" data-opacity="0.1" data-easing="linear">
                            <!-- Main Big Title -->
                            <h2 class="main_title has_titlebig "><span><strong>HUGE</strong> SUMMER SALE</span></h2>
                            <!--/ Main Big Title -->

                            <!-- Big Title -->
                            <h3 class="title_big"><span style="ff-alternative">ALL UNDER $49</span></h3>
                            <!--/ Big Title -->

                            <!-- Link button -->
                            <a class="more " href="#" target="_self">SHOP NOW</a>
                            <!--/ Link button -->

                            <!-- Small Title -->
                            <h4 class="title_small">NEW OUTFITS FOR YOUR SUMMER'S WARDROBE</h4>
                            <!--/ Small Title -->
                        </div>
                        <!--/ Captions animateme wrapper -->
                    </div>
                    <!--/ Captions container -->
                </div>
                <!--/ Slide 2 -->

                <!-- Slide 3 -->
                <div class="item iosslider__item">
                    <!-- Video background container -->
                    <div class="kl-video-container">
                        <!-- Video wrapper -->
                        <div class="kl-video-wrapper video-grid-overlay">
                            <!-- Self Hosted Video Source -->
                            <div class="kl-video valign halign" style="width: 100%; height: 100%;" data-setup='{
									"position": "absolute",
									"loop": true,
									"autoplay": true,
									"muted": true,
									"mp4": "videos/Working-Space.mp4",
									"poster": "videos/Working-Space.jpg",
									"video_ratio": "1.7778" }'>
                            </div>
                            <!--/ Self Hosted Video Source -->
                        </div>
                        <!--/ Video wrapper -->
                    </div>
                    <!--/ Video background container -->

                    <!-- Color overlay -->
                    <div class="kl-slide-overlay" style="background-color:rgba(4,43,135,0.45)">
                    </div>
                    <!--/ Color overlay -->

                    <!-- Captions container -->
                    <div class="container kl-iosslide-caption kl-ioscaption--style5 fromleft klios-alignleft kl-caption-posv-middle">
                        <!-- Captions animateme wrapper -->
                        <div class="animateme" data-when="span" data-from="0" data-to="0.75" data-opacity="0.1" data-easing="linear">
                            <!-- Main Big Title -->
                            <h2 class="main_title has_titlebig "><span>UNIQUE • RAFINEMENT<br>
								FULL COMFORT</span></h2>
                            <!--/ Main Big Title -->

                            <!-- Big Title -->
                            <h3 class="title_big">DISCOUNTS <strong>UP TO 50%</strong></h3>
                            <!--/ Big Title -->

                            <!-- Link more buttons -->
                            <div class="more">
                                <!-- Button full color style -->
                                <a class="btn btn-fullcolor " href="#" target="_self">SEE COLLECTION</a>
                                <!--/ Button full color style -->

                                <!-- Button full lined style -->
                                <a class="btn btn-lined " href="#" target="_self">START SHOPPING</a>
                                <!--/ Button full lined style -->
                            </div>
                            <!--/ Link more buttons -->

                            <!-- Small Title -->
                            <h4 class="title_small">FOR NEW ARRIVALS OF 2017'S COLLECTION</h4>
                            <!--/ Small Title -->
                        </div>
                        <!--/ Captions animateme wrapper -->
                    </div>
                    <!--/ Captions container -->

                    <!-- Image boxes -->
                    <div class="klios-imageboxes fromleft klios-alignleft middle ">
                        <!-- Image boxes wrapper -->
                        <div class="kl-imgbox-inner">
                            <!-- Box #1 -->
                            <div class="kl-imgbox kl-imgbox--1">
                                <a href="#" title="" class="kl-imgbox--link" style="background-image:url(http://kallyas.themeforest.netdna-cdn.com/images/sliders/Banner-4.png)"></a>
                            </div>
                            <!--/ Box #1 -->

                            <!-- Box #2 -->
                            <div class="kl-imgbox kl-imgbox--2">
                                <a href="#" title="" class="kl-imgbox--link" style="background-image:url(http://kallyas.themeforest.netdna-cdn.com/images/sliders/Banner-3.png)"></a>
                            </div>
                            <!--/ Box #2 -->

                            <!-- Box #3 -->
                            <div class="kl-imgbox kl-imgbox--3">
                                <a href="#" title="" class="kl-imgbox--link" style="background-image:url(http://kallyas.themeforest.netdna-cdn.com/images/sliders/Banner-1.png)"></a>
                            </div>
                            <!--/ Box #3 -->
                        </div>
                        <!--/ Image boxes wrapper -->
                    </div>
                    <!--/ Image boxes -->
                </div>
                <!--/ Slide 3 -->

                <!-- Slide 4 -->
                <div class="item iosslider__item">
                    <!-- Image -->
                    <div class="slide-item-bg" style="background-image:url(http://kallyas.themeforest.netdna-cdn.com/images/sliders/ios-living.jpg);">
                    </div>
                    <!--/ Image -->

                    <!-- Gradient overlay -->
                    <div class="kl-slide-overlay" style="background:rgba(91,48,0,0.3); background: -moz-linear-gradient(left, rgba(91,48,0,0.3) 0%, rgba(53,53,53,0.25) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(91,48,0,0.3)), color-stop(100%,rgba(53,53,53,0.25))); background: -webkit-linear-gradient(left, rgba(91,48,0,0.3) 0%,rgba(53,53,53,0.25) 100%); background: -o-linear-gradient(left, rgba(91,48,0,0.3) 0%,rgba(53,53,53,0.25) 100%); background: -ms-linear-gradient(left, rgba(91,48,0,0.3) 0%,rgba(53,53,53,0.25) 100%); background: linear-gradient(to right, rgba(91,48,0,0.3) 0%,rgba(53,53,53,0.25) 100%); ">
                    </div>
                    <!--/ Gradient overlay -->

                    <!-- Captions container -->
                    <div class="container kl-iosslide-caption kl-ioscaption--style5 zoomin klios-aligncenter kl-caption-posv-middle">
                        <!-- Captions animateme wrapper -->
                        <div class="animateme" data-when="span" data-from="0" data-to="0.75" data-opacity="0.1" data-easing="linear">
                            <!-- Main Big Title -->
                            <h2 class="main_title has_titlebig kl-ios-has-sqbox "><span class="kl-ios-sqbox"></span><span><strong>YOUR LIVING</strong><br>
								DESERVES BETTER</span></h2>
                            <!--/ Main Big Title -->

                            <!-- Big Title -->
                            <h3 class="title_big"><strong>INNOVATION AND PERFORMANCE </strong><br>
                                SINCE 1978</h3>
                            <!--/ Big Title -->

                            <!-- Link buttons -->
                            <div class="more">
                                <!-- Button full color style -->
                                <a class="btn btn-fullcolor " href="#" target="_self">SEE OUR LATEST OFFERS</a>
                                <!--/ Button full color style -->
                            </div>
                            <!--/ Link buttons -->
                        </div>
                        <!--/ Captions animateme wrapper -->
                    </div>
                    <!--/ Captions container -->
                </div>
                <!--/ Slide 4 -->

                <!-- Slide 5 -->
                <div class="item iosslider__item">
                    <!-- Image -->
                    <div class="slide-item-bg" style="background-image:url(http://kallyas.themeforest.netdna-cdn.com/images/sliders/iosmain.jpg);">
                    </div>
                    <!--/ Image -->

                    <!-- Gradient overlay -->
                    <div class="kl-slide-overlay" style="background:rgba(132,30,193,0.25); background: -moz-linear-gradient(left, rgba(132,30,193,0.25) 0%, rgba(61,15,15,0.3) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(132,30,193,0.25)), color-stop(100%,rgba(61,15,15,0.3))); background: -webkit-linear-gradient(left, rgba(132,30,193,0.25) 0%,rgba(61,15,15,0.3) 100%); background: -o-linear-gradient(left, rgba(132,30,193,0.25) 0%,rgba(61,15,15,0.3) 100%); background: -ms-linear-gradient(left, rgba(132,30,193,0.25) 0%,rgba(61,15,15,0.3) 100%); background: linear-gradient(to right, rgba(132,30,193,0.25) 0%,rgba(61,15,15,0.3) 100%); ">
                    </div>
                    <!--/ Gradient overlay -->

                    <!-- Captions container -->
                    <div class="container kl-iosslide-caption kl-ioscaption--style6 fromleft klios-aligncenter kl-caption-posv-middle">
                        <!-- Captions animateme wrapper -->
                        <div class="animateme" data-when="span" data-from="0" data-to="0.75" data-opacity="0.1" data-easing="linear">
                            <!-- Main Big Title -->
                            <h2 class="main_title has_titlebig "><span><strong>SUMMER SALE</strong> STEAM</span></h2>
                            <!-- Main Big Title -->

                            <!-- Small Title -->
                            <h4 class="title_small">FOR THE NEW ARRIVALS OF 2017'S COLLECTION</h4>
                            <!--/ Small Title -->

                            <!-- Video pop-up -->
                            <div class="klios-playvid">
                                <!-- Video link - youtube -->
                                <a href="http://www.youtube.com/watch?v=JaAWdljhD5o?loop=1&amp;start=0&amp;autoplay=1&amp;controls=0&amp;showinfo=0&amp;wmode=transparent&amp;iv_load_policy=3&amp;modestbranding=1&amp;rel=0" data-lightbox="iframe">
                                    <!-- Icon = .glyphicon-play circled icon large size -->
                                    <i class="kl-icon glyphicon glyphicon-play circled-icon ci-large"></i>
                                </a>
                                <!--/ Video link - youtube -->
                            </div>
                            <!--/ Video pop-up -->
                        </div>
                        <!--/ Captions animateme wrapper -->
                    </div>
                    <!--/ Captions container -->
                </div>
                <!--/ Slide 5 -->
            </div>
            <!--/ Slides -->

            <!-- Navigation Controls - Prev -->
            <div class="kl-iosslider-prev">
                <!-- Arrow -->
                <span class="thin-arrows ta__prev"></span>
                <!--/ Arrow -->

                <!-- Label - prev -->
                <div class="btn-label">
                    PREV
                </div>
                <!--/ Label - prev -->
            </div>
            <!--/ Navigation Controls - Prev -->

            <!-- Navigation Controls - Next -->
            <div class="kl-iosslider-next">
                <!-- Arrow -->
                <span class="thin-arrows ta__next"></span>
                <!--/ Arrow -->

                <!-- Label - next -->
                <div class="btn-label">
                    NEXT
                </div>
                <!--/ Label - next -->
            </div>
            <!--/ Navigation Controls - Prev -->
        </div>
        <!--/ iOS Slider wrapper with animateme scroll efect -->

        <!-- Bullets -->
        <div class="kl-ios-selectors-block bullets2">
            <div class="selectors">
                <!-- Item #1 -->
                <div class="item iosslider__bull-item first">
                </div>
                <!--/ Item #1 -->

                <!-- Item #2 -->
                <div class="item iosslider__bull-item">
                </div>
                <!--/ Item #2 -->

                <!-- Item #3 -->
                <div class="item iosslider__bull-item">
                </div>
                <!--/ Item #3 -->

                <!-- Item #4 -->
                <div class="item iosslider__bull-item">
                </div>
                <!--/ Item #4 -->

                <!-- Item #5 -->
                <div class="item iosslider__bull-item">
                </div>
                <!--/ Item #5 -->
            </div>
            <!--/ .selectors -->
        </div>
        <!--/ Bullets -->

        <div class="scrollbarContainer">
        </div>

        <!-- Bottom mask style 2 -->
        <div class="kl-bottommask kl-bottommask--shadow_ud">
        </div>
        <!--/ Bottom mask style 2 -->
    </div>
    <!--/ Slideshow - iOS Slider element with animateme scroll efect, custom height and bottom mask style 2 -->

    <!-- Action Box - Style 3 section with custom top padding and white background color -->
    <section class="hg_section bg-white ptop-0">
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-sm-12">
                    <div class="action_box style3" data-arrowpos="center" style="margin-top:-25px;">
                        <div class="action_box_inner">
                            <div class="action_box_content">
                                <div class="ac-content-text">
                                    <!-- Title -->
                                    <h4 class="text"><span class="fw-thin">KALLYAS TEMPLATE, THE <span class="fw-semibold">SWISS ARMY SECRET</span> FOR BUILDING THE MODERN , FUTURE-PROOF WEBSITE.</span></h4>
                                    <!--/ Title -->

                                    <!-- Sub-Title -->
                                    <h5 class="ac-subtitle">Packed with all the goodies you can get, Kallyas is our flagship Premium template.</h5>
                                    <!--/ Sub-Title -->
                                </div>

                                <!-- Call to Action buttons -->
                                <div class="ac-buttons">
                                    <a class="btn btn-lined ac-btn" href="#" target="_blank">JOIN OUR NEWSLETTER</a><a class="btn btn-fullwhite ac-btn" href="#" target="_blank">LEARN MORE</a>
                                </div>
                                <!--/ Call to Action buttons -->
                            </div>
                            <!--/ action_box_content -->
                        </div>
                        <!--/ action_box_inner -->
                    </div>
                    <!--/ action_box style3 -->
                </div>
                <!--/ col-md-12 col-sm-12 -->
            </div>
            <!--/ row -->
        </div>
        <!--/ container -->
    </section>
    <!--/ Action Box - Style 3 section with custom top padding and white background color -->

    <!-- Title - Style 1 section with custom top padding -->
    <section class="hg_section bg-white ptop-65">
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-sm-12">
                    <!-- Title element -->
                    <div class="kl-title-block clearfix text-center tbk-symbol-- tbk-icon-pos--after-title">
                        <!-- Title with montserrat font, custom font size and line height, bold style and light gray color -->
                        <h3 class="tbk__title montserrat fs-44 lh-44 fw-bold light-gray3">OK, SO WHY KALLYAS?</h3>
                        <!--/ Title with montserrat font, custom font size and line height, bold style and light gray color -->

                        <!-- Sub-Title with custom font size an very thin style -->
                        <h4 class="tbk__subtitle fs-18 fw-vthin">Well, lots of reasons, but most importantly because..</h4>
                        <!--/ Sub-Title with custom font size an very thin style -->
                    </div>
                    <!--/ Title element -->
                </div>
                <!--/ col-md-12 col-sm-12 -->
            </div>
            <!--/ row -->
        </div>
        <!--/ container -->
    </section>
    <!--/ Title - Style 1 section with custom top padding -->

    <!-- Icon Box - Left Floated Style section -->
    <section class="hg_section bg-white">
        <div class="full_width">
            <div class="row">
                <div class="col-sm-offset-1 col-md-10 col-sm-10">
                    <div class="row gutter-md">
                        <div class="col-md-3 col-sm-3">
                            <!-- Icon box float left -->
                            <div class="kl-iconbox kl-iconbox--fleft text-left">
                                <div class="kl-iconbox__inner">
                                    <!-- Icon -->
                                    <div class="kl-iconbox__icon-wrapper">
                                        <img class="kl-iconbox__icon" src="http://kallyas.themeforest.netdna-cdn.com/images/set-03-01.svg" alt="Stunning Page Builder">
                                    </div>
                                    <!--/ Icon -->

                                    <!-- /.kl-iconbox__icon-wrapper -->
                                    <div class="kl-iconbox__content-wrapper">
                                        <!-- Title -->
                                        <div class="kl-iconbox__el-wrapper kl-iconbox__title-wrapper">
                                            <h3 class="kl-iconbox__title fs-22 lh-30 fw-normal gray2">Stunning Elements</h3>
                                        </div>
                                        <!--/ Title -->

                                        <!-- Description -->
                                        <div class=" kl-iconbox__el-wrapper kl-iconbox__desc-wrapper">
                                            <p class="kl-iconbox__desc fs-14 gray">
                                                Set up pages and content like a <strong>PRO</strong>. Coding is not required and a handy documentation is included.
                                            </p>
                                        </div>
                                        <!--/ Description -->
                                    </div>
                                    <!-- /.kl-iconbox__content-wrapper -->
                                </div>
                                <!--/ kl-iconbox__inner -->
                            </div>
                            <!--/ Icon box float left -->
                        </div>
                        <!--/ col-md-3 col-sm-3 -->

                        <div class="col-md-3 col-sm-3">
                            <!-- Icon box float left -->
                            <div class="kl-iconbox kl-iconbox--fleft text-left">
                                <div class="kl-iconbox__inner">
                                    <!-- Icon -->
                                    <div class="kl-iconbox__icon-wrapper">
                                        <img class="kl-iconbox__icon" src="http://kallyas.themeforest.netdna-cdn.com/images/set-03-02.svg" alt="Iconic Awarded Design">
                                    </div>
                                    <!--/ Icon -->

                                    <!-- /.kl-iconbox__icon-wrapper -->
                                    <div class="kl-iconbox__content-wrapper">
                                        <!-- Title -->
                                        <div class="kl-iconbox__el-wrapper kl-iconbox__title-wrapper">
                                            <h3 class="kl-iconbox__title fs-22 lh-30 fw-normal gray2">Iconic Awarded Design</h3>
                                        </div>
                                        <!--/ Title -->

                                        <!-- Description -->
                                        <div class=" kl-iconbox__el-wrapper kl-iconbox__desc-wrapper">
                                            <p class="kl-iconbox__desc fs-14 gray">
                                                Our design is featured across multiple marketplaces and awarded for its looks. Walk-through and enjoy the visuals.
                                            </p>
                                        </div>
                                        <!--/ Description -->
                                    </div>
                                    <!-- /.kl-iconbox__content-wrapper -->
                                </div>
                                <!--/ kl-iconbox__inner -->
                            </div>
                            <!-- Icon box float left -->
                        </div>
                        <!--/ col-md-3 col-sm-3 -->

                        <div class="col-md-3 col-sm-3">
                            <!-- Icon box float left -->
                            <div class="kl-iconbox kl-iconbox--fleft text-left">
                                <div class="kl-iconbox__inner">
                                    <!-- Icon -->
                                    <div class="kl-iconbox__icon-wrapper">
                                        <img class="kl-iconbox__icon" src="http://kallyas.themeforest.netdna-cdn.com/images/set-03-03.svg" alt="Featurewise Complete">
                                    </div>
                                    <!--/ Icon -->

                                    <!-- /.kl-iconbox__icon-wrapper -->
                                    <div class="kl-iconbox__content-wrapper">
                                        <!-- Title -->
                                        <div class="kl-iconbox__el-wrapper kl-iconbox__title-wrapper">
                                            <h3 class="kl-iconbox__title fs-22 lh-30 fw-normal gray2">Featurewise Complete</h3>
                                        </div>
                                        <!--/ Title -->

                                        <!-- Description -->
                                        <div class="kl-iconbox__el-wrapper kl-iconbox__desc-wrapper">
                                            <p class="kl-iconbox__desc fs-14 gray">
                                                Without a doubt, Kallyas is one of the most complete WordPress theme on the market, being packed with all the goodies and sweet gems.
                                            </p>
                                        </div>
                                        <!--/ Description -->
                                    </div>
                                    <!-- /.kl-iconbox__content-wrapper -->
                                </div>
                                <!--/ kl-iconbox__inner -->
                            </div>
                            <!--/ Icon box float left -->
                        </div>
                        <!--/ col-md-3 col-sm-3 -->

                        <div class="col-md-3 col-sm-3">
                            <!-- Icon box float left -->
                            <div class="kl-iconbox kl-iconbox--fleft text-left">
                                <div class="kl-iconbox__inner">
                                    <!-- Icon -->
                                    <div class="kl-iconbox__icon-wrapper ">
                                        <img class="kl-iconbox__icon" src="http://kallyas.themeforest.netdna-cdn.com/images/set-03-04.svg" alt="Mature project">
                                    </div>
                                    <!--/ Icon -->

                                    <!-- /.kl-iconbox__icon-wrapper -->
                                    <div class="kl-iconbox__content-wrapper">
                                        <!-- Title -->
                                        <div class="kl-iconbox__el-wrapper kl-iconbox__title-wrapper">
                                            <h3 class="kl-iconbox__title fs-22 lh-30 fw-normal gray2">Mature project</h3>
                                        </div>
                                        <!--/ Title -->

                                        <!-- Description -->
                                        <div class=" kl-iconbox__el-wrapper kl-iconbox__desc-wrapper">
                                            <p class="kl-iconbox__desc fs-14 gray">
                                                In time, gathering awesome feedback from our loyal customers, Kallyas became a mature, stable and future-proof project.
                                            </p>
                                        </div>
                                        <!--/ Description -->
                                    </div>
                                    <!-- /.kl-iconbox__content-wrapper -->
                                </div>
                                <!--/ kl-iconbox__inner -->
                            </div>
                        </div>
                        <!--/ col-md-3 col-sm-3 -->
                    </div>
                    <!--/ row gutter-md -->
                </div>
                <!--/ col-sm-offset-1 col-md-10 col-sm-10 -->
            </div>
            <!--/ row -->
        </div>
        <!--/ full_width -->
    </section>
    <!--/ Icon Box - Left Floated Style section -->

    <!-- Image Boxes - Style 4 new section -->
    <section class="hg_section bg-white">
        <div class="container">
            <div class="row">
                <div class="col-md-4 col-sm-4">
                    <!--/ Image Box style 4 - left symbol style -->
                    <div class="box image-boxes imgboxes_style4 kl-title_style_left">
                        <!-- Image Box anchor link -->
                        <a class="imgboxes4_link imgboxes-wrapper" href="#" target="_blank">
                            <!-- Image -->
                            <img src="http://kallyas.themeforest.netdna-cdn.com/images/imageboxes-set1-011-460x307.jpg" alt="RESCUE SUPPORT" title="RESCUE SUPPORT" class="img-responsive imgbox_image cover-fit-img" />
                            <!--/ Image -->

                            <span class="imgboxes-border-helper"></span>

                            <!-- Title -->
                            <h3 class="m_title imgboxes-title">RESCUE SUPPORT</h3>
                            <!--/ Title -->
                        </a>
                        <!--/ Image Box anchor link -->

                        <!-- Description -->
                        <p>Our support team will do its best to provide the best possible and helpful answer for the issues you’re having.</p>
                        <!--/ Description -->
                    </div>
                    <!--/ Image Box style 4 - left symbol style -->
                </div>
                <!--/ col-md-4 col-sm-4  -->

                <div class="col-md-4 col-sm-4">
                    <!-- Image Box style 4 - left symbol style -->
                    <div class="box image-boxes imgboxes_style4 kl-title_style_left">
                        <!-- Image Box anchor link -->
                        <a class="imgboxes4_link imgboxes-wrapper" href="#" target="_blank">
                            <!-- Image -->
                            <img src="http://kallyas.themeforest.netdna-cdn.com/images/imageboxes-set1-021-460x307.jpg" alt="E-COMMERCE READY" title="E-COMMERCE READY" class="img-responsive imgbox_image cover-fit-img" />
                            <!--/ Image -->

                            <span class="imgboxes-border-helper"></span>

                            <!-- Title -->
                            <h3 class="m_title imgboxes-title">E-COMMERCE READY</h3>
                            <!--/ Title -->
                        </a>
                        <!-- Image Box anchor link -->

                        <!-- Description -->
                        <p>Build an online store blazing fast with WooCommerce and Kallyas's ready-made ecommerce functionalities.</p>
                        <!-- Description -->
                    </div>
                    <!--/ Image Box style 4 - left symbol style -->
                </div>
                <!--/ col-md-4 col-sm-4  -->

                <div class="col-md-4 col-sm-4">
                    <!-- Image Box style 4 - bottom border style-->
                    <div class="box image-boxes imgboxes_style4 kl-title_style_bottom">
                        <!-- Image Box anchor link -->
                        <a class="imgboxes4_link imgboxes-wrapper" href="#" target="_blank">
                            <!-- Image -->
                            <img src="http://kallyas.themeforest.netdna-cdn.com/images/gpg4-640x426.jpg" alt="MULTI-LANGUAGE READY" title="MULTI-LANGUAGE READY" class="img-responsive imgbox_image cover-fit-img">
                            <!--/ Image -->

                            <span class="imgboxes-border-helper"></span>

                            <!-- Title -->
                            <h3 class="m_title imgboxes-title">MULTI-LANGUAGE READY</h3>
                            <!--/ Title -->
                        </a>
                        <!--/ Image Box anchor link -->

                        <!-- Description -->
                        <p>Add as many language packs as you want, to showcase your website across the entire globe.</p>
                        <!--/ Description -->
                    </div>
                    <!--/ Image Box style 4 - bottom border style-->
                </div>
                <!--/ col-md-4 col-sm-4  -->
            </div>
            <!--/ row -->
        </div>
        <!--/ hg_section_size container -->
    </section>
    <!--/ Image Boxes - Style 4 new section -->

    <!-- Screenshot Box section with custom paddings -->
    <section class="hg_section ptop-100 pbottom-100">
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-sm-12">
                    <!-- Screenshot Box -->
                    <div class="screenshot-box kl-style-2 fixclear">
                        <div class="row">
                            <div class="col-sm-12 col-md-6">
                                <!-- left-side -->
                                <div class="left-side">
                                    <!-- Title -->
                                    <h3 class="title"><span class="fw-thin">This is Kallyas Template, a rich featured, epic, <span class="fw-semibold">mature and premium work.</span></span></h3>
                                    <!--/ Title -->

                                    <!-- features -->
                                    <ul class="features">
                                        <li>
                                            <h4>VISUAL SLIDER BUILDER</h4>
                                            <span>Comfortable and intuitive visual drag and drop builder.</span></li>
                                        <li>
                                            <h4>UNLIMITED COLORS</h4>
                                            <span>Personalize the theme’s colors as much as you want for almost any element.</span></li>
                                        <li>
                                            <h4>HIGHLY CUSTOMIZABLE</h4>
                                            <span>Yet highly intuitive and easy to use, in just a matter of hours become a pro.</span>
                                        </li>
                                    </ul>
                                    <!--/ features -->

                                    <!-- Call to Action button -->
                                    <a href="#" target="_blank" class="btn btn-fullcolor btn-third">BUY NOW</a>
                                    <!--/ Call to Action button -->
                                </div>
                                <!--/ left-side -->
                            </div>
                            <div class="col-sm-12 col-md-6">
                                <!-- thescreenshot image carousel -->
                                <div class="thescreenshot">
                                    <!-- controls -->
                                    <div class="controls"><a href="#" class="prev"></a><a href="#" class="next"></a></div>
                                    <!--/ controls -->

                                    <!-- screenshot-carousel slides -->
                                    <ul class="screenshot-carousel" data-carousel-pagination=".sc-pagination">
                                        <!-- Slide 1 -->
                                        <li>
                                            <img src="http://kallyas.themeforest.netdna-cdn.com/images/office-820390_640-580x380.jpg" width="580" height="380" alt="" />
                                        </li>
                                        <!--/ Slide 1 -->

                                        <!-- Slide 2-->
                                        <li>
                                            <img src="http://kallyas.themeforest.netdna-cdn.com/images/ipad-605439_640-580x380.jpg" width="580" height="380" alt="" />
                                        </li>
                                        <!--/ Slide 2 -->

                                        <!-- Slide 3 -->
                                        <li>
                                            <img src="http://kallyas.themeforest.netdna-cdn.com/images/phone-690091_640-580x380.jpg" width="580" height="380" alt="" />
                                        </li>
                                        <!--/ Slide 3 -->
                                    </ul>
                                    <!--/ screenshot-carousel slides -->

                                    <!-- pagination -->
                                    <div class="sc-pagination"></div>
                                    <!--/ pagination -->
                                </div>
                                <!-- thescreenshot image carousel -->
                            </div>
                        </div>
                    </div>
                    <!--/ Screenshot Box -->
                </div>
                <!--/ col-md-12 col-sm-12 -->
            </div>
            <!--/ row -->
        </div>
        <!--/ container -->
    </section>
    <!--/ Screenshot Box section with custom paddings -->

    <!-- Media Container - Border Animate Style 2 section with background white color -->
    <section class="hg_section bg-white p-0">
        <div class="full_width">
            <div class="row gutter-lg">
                <div class="col-md-5 col-sm-12">
                    <!-- Media container style 2 element - with custom height(.h-615) -->
                    <div class="media-container style2 h-615">
                        <!-- Background -->
                        <div class="kl-bg-source">
                            <!-- Background image -->
                            <div class="kl-bg-source__bgimage" style="background-image:url(http://kallyas.themeforest.netdna-cdn.com/images/home-brochure.jpg); background-repeat:no-repeat; background-attachment:scroll; background-position-x:center; background-position-y:top; background-size:cover">
                            </div>
                            <!--/ Background image -->

                            <!-- Gradient overlay -->
                            <div class="kl-bg-source__overlay" style="background:rgba(137,173,178,0.3); background: -moz-linear-gradient(left, rgba(137,173,178,0.3) 0%, rgba(53,53,53,0.65) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(137,173,178,0.3)), color-stop(100%,rgba(53,53,53,0.65))); background: -webkit-linear-gradient(left, rgba(137,173,178,0.3) 0%,rgba(53,53,53,0.65) 100%); background: -o-linear-gradient(left, rgba(137,173,178,0.3) 0%,rgba(53,53,53,0.65) 100%); background: -ms-linear-gradient(left, rgba(137,173,178,0.3) 0%,rgba(53,53,53,0.65) 100%); background: linear-gradient(to right, rgba(137,173,178,0.3) 0%,rgba(53,53,53,0.65) 100%); ">
                            </div>
                            <!--/ Gradient overlay -->
                        </div>
                        <!--/ Background -->

                        <!-- media container link button -->
                        <a class="media-container__link media-container__link--btn media-container__link--style-borderanim2 " href="https://www.youtube.com/watch?v=cVt-3vbENOQ" data-lightbox="iframe">
                            <!-- SVG border -->
                            <div class="borderanim2-svg">
                                <!-- svg -->
                                <svg height="70" width="400" xmlns="http://www.w3.org/2000/svg">
                                    <rect class="borderanim2-svg__shape" height="70" width="400"></rect>
                                </svg>
                                <!--/ svg -->

                                <!-- Title text -->
                                <span class="media-container__text">KALLYAS TEMPLATE</span>
                                <!--/ Title text -->
                            </div>
                            <!--/ SVG border -->
                        </a>
                        <!--/ media container link button -->
                    </div>
                    <!--/ media-container style2 h-615 -->
                </div>
                <!--/ col-md-5 col-sm-12 -->

                <div class="col-md-7 col-sm-12">
                    <div class="custom_container p-5">
                        <div class="row hg_col_eq_last">
                            <div class="col-md-12 col-sm-12">
                                <!-- Title element -->
                                <div class="kl-title-block clearfix text-left tbk-symbol--line tbk-icon-pos--after-title pbottom-0">
                                    <!-- Title with montserrat font, custom size and line height bold style -->
                                    <h3 class="tbk__title montserrat fs-38 lh-46 fw-bold">TRULY MULTI-PURPOSE <span class="text-custom fw-normal tcolor">&amp;</span> OUTSTANDING</h3>
                                    <!--/ Title with montserrat font, custom size and line height bold style -->

                                    <!-- symbol -->
                                    <span class="tbk__symbol "><span></span></span>
                                    <!--/ symbol -->

                                    <!-- Sub-Title -->
                                    <h4 class="tbk__subtitle fs-18 lh-32 fw-vthin">Dramatically expedite emerging ROI through diverse deliverables. Phosfluorescently integrate covalent portals without cooperative e-services.</h4>
                                    <!--/ Sub-Title -->
                                </div>
                                <!--/ Title element -->

                                <!-- separator -->
                                <div class="hg_separator style2 clearfix">
                                </div>
                                <!--/ separator -->
                            </div>
                            <!--/ col-md-12 col-sm-12 -->

                            <div class="col-md-8 col-sm-8">
                                <!-- Text box -->
                                <div class="text_box">
                                    <!-- Description -->
                                    <p>
                                        Credibly build out-of-the-box functionalities before strategic expertise. Competently reconceptualize resource maximizing relationships via business synergy.
                                    </p>
                                    <p>
                                        Initiate user friendly content with low-risk high-yield human capital.&nbsp;Compellingly redefine 2.0 services via fully tested experiences. Monotonectally plagiarize market-driven alignments for team building.
                                    </p>
                                    <!--/ Description -->
                                </div>
                                <!-- Text box -->
                            </div>
                            <!--/ col-md-8 col-sm-8 -->

                            <div class="col-md-4 col-sm-4">
                                <!-- Video box pop-up (adbox) element -->
                                <div class="adbox video">
                                    <!-- Image -->
                                    <img src="http://kallyas.themeforest.netdna-cdn.com/images/sleepy1_1x-400x300.jpg" alt="" title="" />
                                    <!-- Image -->

                                    <!-- Video trigger wrapper -->
                                    <div class="video_trigger_wrapper">
                                        <!-- Video box container -->
                                        <div class="adbox_container">
                                            <!-- Video link -->
                                            <a class="playVideo" data-lightbox="iframe" href="https://www.youtube.com/watch?v=cVt-3vbENOQ"></a>
                                        </div>
                                        <!--/ Video trigger container -->
                                    </div>
                                    <!--/ Video box wrapper -->
                                </div>
                                <!--/ Video box pop-up (adbox) element -->
                            </div>
                            <!--/ col-md-4 col-sm-4 -->
                        </div>
                        <!--/ row hg_col_eq_last -->
                    </div>
                </div>
                <!--/ col-md-7 col-sm-12 -->
            </div>
            <!--/ row gutter-lg -->
        </div>
        <!--/ full_width -->
    </section>
    <!--/ Media Container - Border Animate Style 2 section with background white color -->

    <!-- Hover Boxes section whith custom top padding -->
    <section class="hg_section ptop-65">
        <div class="container">
            <div class="row">
                <div class="col-md-4 col-sm-4">
                    <!-- Hover box element -->
                    <div>
                        <!-- Link box with background color -->
                        <a href="#" target="_blank" style="background-color: #34495e;" class="hover-box hover-box-2">
                            <!-- Hover icon -->
                            <span class="hb-circle"></span>
                            <!--/ Hover icon -->

                            <!-- Image/Icon -->
                            <img src="http://kallyas.themeforest.netdna-cdn.com/images/quote1.svg" class="hb-img rb-right" alt="" title="" />
                            <!--/ Image/Icon -->

                            <!-- Title -->
                            <h3>get a quote</h3>
                            <!--/ Title -->

                            <!-- Description -->
                            <p>
                                Share your idea and let’s create<br>
                                a great project together!
                            </p>
                            <!--/ Description -->
                        </a>
                        <!--/ Link box with background color -->
                    </div>
                    <!--/ Hover box element -->
                </div>
                <!--/ col-md-4 col-sm-4 -->

                <div class="col-md-4 col-sm-4">
                    <!-- Hover box element -->
                    <div>
                        <!-- Link box with background color-->
                        <a href="#" target="_blank" style="background-color: #34495e;" class="hover-box hover-box-2">
                            <!-- Hover icon -->
                            <span class="hb-circle"></span>
                            <!-- Hover icon -->

                            <!-- Image/Icon -->
                            <img src="http://kallyas.themeforest.netdna-cdn.com/images/hb-hiring.svg" class="hb-img rb-right" alt="" title="" />
                            <!--/ Image/Icon -->

                            <!-- Title -->
                            <h3>hiring: ON</h3>
                            <!--/ Title -->

                            <!-- Subtitle -->
                            <h4>Developer wanted! </h4>
                            <!-- Subtitle -->

                            <!-- Description -->
                            <p>
                                Send your kickass resume<br>
                                on <span class="__cf_email__" data-cfemail="cca6a3aebf8ca1b5bba9aebfa5b8a9e2afa3a1">[email&#160;protected]</span><script data-cfhash='f9e31' type="text/javascript">/* <![CDATA[ */!function(t,e,r,n,c,a,p){try{t=document.currentScript||function(){for(t=document.getElementsByTagName('script'),e=t.length;e--;)if(t[e].getAttribute('data-cfhash'))return t[e]}();if(t&&(c=t.previousSibling)){p=t.parentNode;if(a=c.getAttribute('data-cfemail')){for(e='',r='0x'+a.substr(0,2)|0,n=2;a.length-n;n+=2)e+='%'+('0'+('0x'+a.substr(n,2)^r).toString(16)).slice(-2);p.replaceChild(document.createTextNode(decodeURIComponent(e)),c)}p.removeChild(t)}}catch(u){}}()/* ]]> */</script>
                            </p>
                            <!--/ Description -->
                        </a>
                        <!--/ Link box with background color -->
                    </div>
                    <!--/ Hover box element -->
                </div>
                <!--/ col-md-4 col-sm-4 -->

                <div class="col-md-4 col-sm-4">
                    <!-- Hover box element -->
                    <div>
                        <!-- Link box with background image -->
                        <a href="#" target="_blank" style="background-image:url(http://kallyas.themeforest.netdna-cdn.com/images/hb-catalogue1.png); background-color: #34495e; background-size:cover" class="hover-box hover-box-3">
                            <!-- Image/Icon -->
                            <img src="http://kallyas.themeforest.netdna-cdn.com/images/hb-catalogue1.png" class="hb-img " alt="" title="" />
                            <!--/ Image/Icon -->

                            <!-- Title -->
                            <h3>download catalogue</h3>
                            <!--/ Title -->

                            <!-- Description -->
                            <p>
                                Read our latest catalog, collateral material or print advertisements for your publication.
                            </p>
                            <!--/ Description -->
                        </a>
                        <!--/ Link box with background image -->
                    </div>
                    <!--/ Hover box element -->
                </div>
                <!--/ col-md-4 col-sm-4 -->
            </div>
            <!--/ row -->
        </div>
        <!--/ container -->
    </section>
    <!--/ Hover Boxes section whith custom top padding -->

    <!-- Latest Posts - Accordion Style section -->
    <section class="hg_section">
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-sm-12">
                    <!-- Latest posts accordion style -->
                    <div class="latest_posts acc-style">
                        <!-- Title -->
                        <h3 class="m_title">OUR LATEST STORIES</h3>
                        <!--/ Title -->

                        <!-- View all posts button -->
                        <a href="#" class="viewall">VIEW ALL -</a>
                        <!--/ View all posts button -->

                        <!-- CSS3 Accordion -->
                        <div class="css3accordion">
                            <ul>
                                <!-- Post -->
                                <li>
                                    <!-- Post wrapper -->
                                    <div class="inner-acc" style="width: 570px;">
                                        <!-- Post link wrapper -->
                                        <a href="blog-post.php" class="thumb hoverBorder plus">
                                            <!-- Border wrapper -->
                                            <span class="hoverBorderWrapper">
													<!-- Image -->
													<img src="http://kallyas.themeforest.netdna-cdn.com/images/css3panels-alt-04-370x200.jpg" alt="" title="" />
                                                <!--/ Image -->

                                                <!-- Hover border/shadow -->
													<span class="theHoverBorder"></span>
                                                <!--/ Hover border/shadow -->
												</span>
                                            <!--/ Border wrapper -->
                                        </a>
                                        <!-- Post link wrapper -->

                                        <!-- Post content -->
                                        <div class="content">
                                            <!-- Details & tags -->
                                            <em>21 August 2017 by danut, in Mobile</em>
                                            <!--/ Details & tags -->

                                            <!-- Title with link -->
                                            <h5 class="m_title"><a href="blog-post.php">Enthusiastically administrate ubiquitous</a></h5>
                                            <!--/ Title with link -->

                                            <!-- Content text -->
                                            <div class="text">
                                                Competently leverage other’s high standards in customer service after supe...
                                            </div>
                                            <!--/ Content text -->

                                            <!-- Read more button -->
                                            <a href="blog-post.php">READ MORE +</a>
                                            <!--/ Read more button -->
                                        </div>
                                        <!--/ Post content -->
                                    </div>
                                    <!--/ Post wrapper -->
                                </li>
                                <!--/ Post -->

                                <!-- Post -->
                                <li>
                                    <!-- Post wrapper -->
                                    <div class="inner-acc" style="width: 570px;">
                                        <!-- Post link wrapper -->
                                        <a href="blog-post.php" class="thumb hoverBorder plus">
                                            <!-- Border wrapper -->
                                            <span class="hoverBorderWrapper">
													<!-- Image -->
													<img src="http://kallyas.themeforest.netdna-cdn.com/images/general-bg-8-370x200.jpg" alt="" title="" />
                                                <!--/ Image -->

                                                <!-- Hover border/shadow -->
													<span class="theHoverBorder"></span>
                                                <!--/ Hover border/shadow -->
												</span>
                                            <!--/ Border wrapper -->
                                        </a>
                                        <!--/ Post link wrapper -->

                                        <!-- Post content -->
                                        <div class="content">
                                            <!-- Details & tags -->
                                            <em>07 August 2017 by Marius H., in Mobile,Technology</em>
                                            <!--/ Details & tags -->

                                            <!-- Title with link -->
                                            <h5 class="m_title"><a href="blog-post.php">Uniquely productize next-generation opportunities</a></h5>
                                            <!--/ Title with link -->

                                            <!-- Content text -->
                                            <div class="text">
                                                Appropriately pontificate synergistic para digms whereas 24/7 “outside the...
                                            </div>
                                            <!--/ Content text -->

                                            <!-- Read more button -->
                                            <a href="blog-post.php">READ MORE +</a>
                                            <!--/ Read more button -->
                                        </div>
                                        <!--/ Post content -->
                                    </div>
                                    <!--/ Post wrapper -->
                                </li>
                                <!--/ Post -->

                                <!-- Post -->
                                <li class="last">
                                    <!-- Post wrapper -->
                                    <div class="inner-acc" style="width: 570px;">
                                        <!-- Post link wrapper -->
                                        <a href="blog-post.php" class="thumb hoverBorder plus">
                                            <!-- Border wrapper -->
                                            <span class="hoverBorderWrapper">
													<!-- Image -->
													<img src="http://kallyas.themeforest.netdna-cdn.com/images/blog1-370x200.jpg" alt="" title="" />
                                                <!--/ Image -->

                                                <!-- Hover border/shadow -->
													<span class="theHoverBorder"></span>
                                                <!--/ Hover border/shadow -->
												</span>
                                            <!--/ Border wrapper -->
                                        </a>
                                        <!--/ Post link wrapper -->

                                        <!-- Post content -->
                                        <div class="content">
                                            <!-- Details & tags -->
                                            <em>07 August 2017 by Marius H., in Mobile,Networking</em>
                                            <!--/ Details & tags -->

                                            <!-- Title with link -->
                                            <h5 class="m_title"><a href="blog-post.php">Progressively repurpose cutting-edge models</a></h5>
                                            <!--/ Title with link -->

                                            <!-- Content text -->
                                            <div class="text">
                                                Seamlessly orchestrate process-centric best practices with end-to-end catalysts ...
                                            </div>
                                            <!--/ Content text -->

                                            <!-- Read more button -->
                                            <a href="blog-post.php">READ MORE +</a>
                                            <!--/ Read more button -->
                                        </div>
                                        <!--/ Post content -->
                                    </div>
                                    <!--/ Post wrapper -->
                                </li>
                                <!--/ Post -->
                            </ul>
                        </div>
                        <!--/ CSS3 Accordion -->
                    </div>
                    <!--/ Latest posts accordion style -->
                </div>
                <!--/ col-md-12 col-sm-12 -->
            </div>
            <!--/ row -->
        </div>
        <!--/ hg_section_size container -->
    </section>
    <!--/ Latest Posts - Accordion Style section -->

    <!-- Partners & Testimonials section with custom paddings -->
    <section class="hg_section hg_section--relative ptop-80 pbottom-80">
        <!-- Background -->
        <div class="kl-bg-source">
            <!-- Gradient overlay -->
            <div class="kl-bg-source__overlay" style="background:rgba(205,33,34,1); background: -moz-linear-gradient(left, rgba(205,33,34,1) 0%, rgba(245,72,76,1) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(205,33,34,1)), color-stop(100%,rgba(245,72,76,1))); background: -webkit-linear-gradient(left, rgba(205,33,34,1) 0%,rgba(245,72,76,1) 100%); background: -o-linear-gradient(left, rgba(205,33,34,1) 0%,rgba(245,72,76,1) 100%); background: -ms-linear-gradient(left, rgba(205,33,34,1) 0%,rgba(245,72,76,1) 100%); background: linear-gradient(to right, rgba(205,33,34,1) 0%,rgba(245,72,76,1) 100%); ">
            </div>
            <!--/ Gradient overlay -->
        </div>
        <!--/ Background -->

        <div class="container">
            <div class="row">
                <div class="col-md-12 col-sm-12">
                    <!-- Title element with bottom line style -->
                    <div class="kl-title-block clearfix text-center tbk-symbol--line tbk-icon-pos--after-title">
                        <!-- Title with montserrat font, white color and bold style -->
                        <h3 class="tbk__title white montserrat fw-bold">CLIENT ME</h3>
                        <!--/ Title with montserrat font, white color and bold style -->

                        <!-- Title bottom symbol -->
                        <div class="tbk__symbol ">
                            <span></span>
                        </div>
                        <!--/ Title bottom symbol -->
                    </div>
                    <!--/ Title element with bottom line style -->

                    <!-- Testimonials & Partners element - light text style -->
                    <div class="testimonials-partners testimonials-partners--light">
                        <!-- Partners element -->
                        <div class="ts-pt-partners ts-pt-partners--y-title clearfix">
                            <!-- Title -->
                            <div class="ts-pt-partners__title">
                                TECHNOLOGIES
                            </div>
                            <!--/ Title -->

                            <!-- Partners carousel wrapper -->
                            <div class="ts-pt-partners__carousel-wrapper">
                                <div class="ts-pt-partners__carousel">
                                    <!-- Item #1 -->
                                    <div class="ts-pt-partners__carousel-item">
                                        <!-- Partner image link -->
                                        <a class="ts-pt-partners__link" href="#" target="_self" title="">
                                            <!-- Image -->
                                            <img class="ts-pt-partners__img" src="http://kallyas.themeforest.netdna-cdn.com/images/logo6.svg" alt="" title="" />
                                            <!--/ Image -->
                                        </a>
                                        <!--/ Partner image link -->
                                    </div>
                                    <!--/ Item #1 -->

                                    <!-- Item #2 -->
                                    <div class="ts-pt-partners__carousel-item">
                                        <!-- Partner image link -->
                                        <a class="ts-pt-partners__link" href="#" target="_self" title="">
                                            <!-- Image -->
                                            <img class="ts-pt-partners__img" src="http://kallyas.themeforest.netdna-cdn.com/images/logo7.svg" alt="" title="" />
                                            <!--/ Image -->
                                        </a>
                                        <!--/ Partner image link -->
                                    </div>
                                    <!--/ Item #2 -->

                                    <!-- Item #3 -->
                                    <div class="ts-pt-partners__carousel-item">
                                        <!-- Partner image link -->
                                        <a class="ts-pt-partners__link" href="#" target="_self" title="">
                                            <!-- Image -->
                                            <img class="ts-pt-partners__img" src="http://kallyas.themeforest.netdna-cdn.com/images/logo8.svg" alt="" title="" />
                                            <!--/ Image -->
                                        </a>
                                        <!--/ Partner image link -->
                                    </div>
                                    <!--/ Item #3 -->

                                    <!-- Item #4 -->
                                    <div class="ts-pt-partners__carousel-item">
                                        <!-- Partner image link -->
                                        <a class="ts-pt-partners__link" href="#" target="_self" title="">
                                            <!-- Image -->
                                            <img class="ts-pt-partners__img" src="http://kallyas.themeforest.netdna-cdn.com/images/logo1.svg" alt="" title="" />
                                            <!--/ Image -->
                                        </a>
                                        <!--/ Partner image link -->
                                    </div>
                                    <!--/ Item #4 -->

                                    <!-- Item #5 -->
                                    <div class="ts-pt-partners__carousel-item">
                                        <!-- Partner image link -->
                                        <a class="ts-pt-partners__link" href="#" target="_self" title="">
                                            <!-- Image -->
                                            <img class="ts-pt-partners__img" src="http://kallyas.themeforest.netdna-cdn.com/images/logo2.svg" alt="" title="" />
                                            <!--/ Image -->
                                        </a>
                                        <!--/ Partner image link -->
                                    </div>
                                    <!--/ Item #5 -->

                                    <!-- Item #6 -->
                                    <div class="ts-pt-partners__carousel-item">
                                        <!-- Partner image link -->
                                        <a class="ts-pt-partners__link" href="#" target="_self" title="">
                                            <!-- Image -->
                                            <img class="ts-pt-partners__img" src="http://kallyas.themeforest.netdna-cdn.com/images/logo3.svg" alt="" title="" />
                                            <!--/ Image -->
                                        </a>
                                        <!--/ Partner image link -->
                                    </div>
                                    <!--/ Item #6 -->

                                    <!-- Item #7 -->
                                    <div class="ts-pt-partners__carousel-item">
                                        <!-- Partner image link -->
                                        <a class="ts-pt-partners__link" href="#" target="_self" title="">
                                            <!-- Image -->
                                            <img class="ts-pt-partners__img" src="http://kallyas.themeforest.netdna-cdn.com/images/logo4.svg" alt="" title="" />
                                            <!--/ Image -->
                                        </a>
                                        <!--/ Partner image link -->
                                    </div>
                                    <!--/ Item #7 -->

                                    <!-- Item  #8-->
                                    <div class="ts-pt-partners__carousel-item">
                                        <!-- Partner image link -->
                                        <a class="ts-pt-partners__link" href="#" target="_self" title="">
                                            <!-- Image -->
                                            <img class="ts-pt-partners__img" src="http://kallyas.themeforest.netdna-cdn.com/images/logo5.svg" alt="" title="" />
                                            <!--/ Image -->
                                        </a>
                                        <!--/ Partner image link -->
                                    </div>
                                    <!--/ Item #8 -->
                                </div>
                                <!--/ .ts-pt-partners__carousel -->
                            </div>
                            <!--/ Partners carousel wrapper -->
                        </div>
                        <!--/ Partners element - .ts-pt-partners -->
                    </div>
                    <!--/ Testimonials & Partners element - light text style -->
                </div>
                <!--/ col-md-12 col-sm-12 -->
            </div>
            <!--/ row -->
        </div>
        <!--/ container -->
    </section>
    <!--/ Partners & Testimonials section with custom paddings -->

    <!-- Title with Call to Action Button section with custom paddings -->
    <section class="hg_section bg-white ptop-65 pb-20">
        <div class="container">
            <div class="row">
                <div class="col-md-9 col-sm-9">
                    <!-- Title element -->
                    <div class="kl-title-block clearfix text-left tbk-symbol-- tbk-icon-pos--after-title">
                        <!-- Title -->
                        <h3 class="tbk__title montserrat fw-semibold tcolor">WORK WITH US</h3>
                        <!--/ Title -->

                        <!-- Sub-Title -->
                        <h4 class="tbk__subtitle fw-thin">We'll do everything we can to make our next best project!</h4>
                        <!--/ Sub-Title -->
                    </div>
                    <!--/ Title element -->
                </div>
                <!--/ col-md-9 col-sm-9 -->

                <div class="col-md-3 col-sm-3">
                    <!-- spacer with custom height -->
                    <div class="th-spacer clearfix" style="height: 10px;">
                    </div>
                    <!--/ spacer with custom height -->

                    <!-- Button lined style -->
                    <div class="text-left">
                        <a class="btn-element btn btn-lined lined-custom btn-md btn-block " href="#" style="margin:0 0 10px 0;">
                            <span>GET A QUOTE</span>
                        </a>
                    </div>
                    <!--/ Button lined style -->
                </div>
                <!--/ col-md-3 col-sm-3 -->
            </div>
            <!--/ row -->
        </div>
        <!--/ container -->
    </section>
    <!--/ Title with Call to Action Button section with custom paddings -->


    <!-- Footer - Default Style -->
    <div id="dp-js-footer-helper" style="height:0 !important; display:none !important;"></div>
    <footer id="footer">
        <div class="container">
            <div class="row">
                <div class="col-sm-5">
                    <div>
                        <h3 class="title m_title">FOOTER MENU</h3>
                        <div class="sbs">
                            <ul class="menu">
                                <li><a href="#">Curabitur iaculis</a></li>
                                <li><a href="#">Parturient montes</a></li>
                                <li><a href="#">Vulputate magna</a></li>
                                <li><a href="#">Cum sociis natoque</a></li>
                                <li><a href="#">Nulla varius commodo</a></li>
                                <li><a href="#">Parturient montes</a></li>
                                <li><a href="#">Vulputate magna</a></li>
                                <li><a href="#">Cum sociis natoque</a></li>
                                <li><a href="#">Nulla varius commodo</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!--/ col-sm-5 -->

                <div class="col-sm-4">
                    <div class="newsletter-signup">
                        <h3 class="title m_title">NEWSLETTER SIGNUP</h3>
                        <p>By subscribing to our mailing list you will always be update with the latest news from us.</p>
                        <form action="http://YOUR_USERNAME.DATASERVER.list-manage.com/subscribe/post-json?u=YOUR_API_KEY&amp;id=LIST_ID&c=?" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
                            <input type="email" value="" name="EMAIL" class="nl-email form-control" id="mce-EMAIL" placeholder="your.address@email.com" required>
                            <input type="submit" name="subscribe" class="nl-submit" id="mc-embedded-subscribe" value="JOIN US">
                            <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
                            <div style="position: absolute; left: -5000px;">
                                <input type="text" name="b_xxxxxxxxxxxxxxxxxxxCUSTOMxxxxxxxxx" value="">
                            </div>
                        </form>
                        <div id="notification_container"></div>
                        <p>We never spam!</p>
                    </div><!-- end newsletter-signup -->
                </div>
                <!-- col-sm-4 -->

                <div class="col-sm-3">
                    <div>
                        <h3 class="title m_title">GET IN TOUCH</h3>
                        <div class="contact-details"><p><strong>T (212) 555 55 00</strong><br>
                                Email: <a href="#"><span class="__cf_email__" data-cfemail="542735383127142d3b2126233136273d20317a373b39">[email&#160;protected]</span><script data-cfhash='f9e31' type="text/javascript">/* <![CDATA[ */!function(t,e,r,n,c,a,p){try{t=document.currentScript||function(){for(t=document.getElementsByTagName('script'),e=t.length;e--;)if(t[e].getAttribute('data-cfhash'))return t[e]}();if(t&&(c=t.previousSibling)){p=t.parentNode;if(a=c.getAttribute('data-cfemail')){for(e='',r='0x'+a.substr(0,2)|0,n=2;a.length-n;n+=2)e+='%'+('0'+('0x'+a.substr(n,2)^r).toString(16)).slice(-2);p.replaceChild(document.createTextNode(decodeURIComponent(e)),c)}p.removeChild(t)}}catch(u){}}()/* ]]> */</script></a></p>
                            <p>Aura Publishing<br>
                                Jl. Prof. Dr. Soemantri Brojonegoro, Komplek Unila Gedongmeneng , Bandar Lampung.</p>
                            <p><a href="http://goo.gl/maps/1OhOu" target="_blank"><i class="icon-map-marker icon-white"></i> Open in Google Maps</a></p>
                        </div>
                    </div>
                </div>
                <!--/ col-sm-3 -->
            </div>
            <!--/ row -->

            <div class="row">
                <div class="col-sm-6">
                    <div class="twitterFeed">
                        <!-- twitter feeds -->
                        <img src="http://kallyas.themeforest.netdna-cdn.com/images/twitter-footer.png" class="img-responsive" alt="" title="" />
                        <!--/ twitter script -->
                    </div>
                    <!--/ twitter-feed -->
                </div>
                <!--/ col-sm-6 -->

                <div class="col-sm-6">
                    <!-- social-share buttons -->
                    <div class="social-share">
                        <img src="http://kallyas.themeforest.netdna-cdn.com/images/social-footer.png" class="pull-right img-responsive" alt="" title="" />
                    </div>
                    <!--/ social-share -->
                </div>
                <!--/ col-sm-6 -->
            </div>
            <!--/ row -->

            <div class="row">
                <div class="col-sm-12">
                    <div class="bottom clearfix">
                        <!-- social-icons -->
                        <ul class="social-icons sc--clean clearfix">
                            <li class="title">GET SOCIAL</li>
                            <li><a href="#" target="_self" class="icon-facebook" title="Facebook"></a></li>
                            <li><a href="#" target="_self" class="icon-twitter" title="Twitter"></a></li>
                            <li><a href="#" target="_self" class="icon-dribbble" title="Dribbble"></a></li>
                            <li><a href="#" target="_blank" class="icon-google" title="Google Plus"></a></li>
                        </ul>
                        <!--/ social-icons -->

                        <!-- copyright -->
                        <div class="copyright">
                            <a href="index.php">
                                <img src="{{ asset('kallyas/images/kallyas-footerlogo.png') }}" alt="#">
                            </a>
                            <p>© 2017 All rights reserved. Buy <a href="#">Aura Template</a>.</p>
                        </div>
                        <!--/ copyright -->
                    </div>
                    <!--/ bottom -->
                </div>
                <!--/ col-sm-12 -->
            </div>
            <!--/ row -->
        </div>
        <!--/ container -->
    </footer>
    <!--/ Footer - Default Style -->
</div>
<!--/ Page Wrapper -->

<!-- Login Panel content -->
<div id="login_panel" class="mfp-hide loginbox-popup auth-popup">
    <div class="inner-container login-panel auth-popup-panel">
        <h3 class="m_title m_title_ext text-custom auth-popup-title tcolor">SIGN IN YOUR ACCOUNT TO HAVE ACCESS TO DIFFERENT FEATURES</h3>
        <form class="login_panel" name="login_form" method="post" action="#">
            <div class="form-group kl-fancy-form">
                <input type="text" id="kl-username" name="log" class="form-control inputbox kl-fancy-form-input kl-fw-input" placeholder="eg: james_smith">
                <label class="kl-font-alt kl-fancy-form-label">USERNAME</label>
            </div>
            <div class="form-group kl-fancy-form">
                <input type="password" id="kl-password" name="pwd" class="form-control inputbox kl-fancy-form-input kl-fw-input" placeholder="type password">
                <label class="kl-font-alt kl-fancy-form-label">PASSWORD</label>
            </div>
            <label class="auth-popup-remember" for="kl-rememberme"><input type="checkbox" name="rememberme" id="kl-rememberme" value="forever" class="auth-popup-remember-chb"> Remember Me </label>
            <input type="submit" id="login" name="submit_button" class="btn zn_sub_button btn-fullcolor btn-md" value="LOG IN">
            <input type="hidden" value="login" class="" name="form_action"><input type="hidden" value="login" class="" name="action">
            <input type="hidden" value="#" class="" name="submit">
            <div class="links auth-popup-links">
                <a href="#register_panel" class="create_account auth-popup-createacc kl-login-box auth-popup-link">CREATE AN ACCOUNT</a><span class="sep auth-popup-sep"></span><a href="#forgot_panel" class="kl-login-box auth-popup-link">FORGOT YOUR PASSWORD?</a>
            </div>
        </form>
    </div>
    <button title="Close (Esc)" type="button" class="mfp-close">×</button>
</div>
<div id="register_panel" class="mfp-hide loginbox-popup auth-popup">
    <div class="inner-container register-panel auth-popup-panel">
        <h3 class="m_title m_title_ext text-custom auth-popup-title">CREATE ACCOUNT</h3>
        <form class="register_panel" name="login_form" method="post" action="#">
            <div class="form-group kl-fancy-form ">
                <input type="text" id="reg-username" name="user_login" class="form-control inputbox kl-fancy-form-input kl-fw-input" placeholder="type desired username"><label class="kl-font-alt kl-fancy-form-label">USERNAME</label>
            </div>
            <div class="form-group kl-fancy-form">
                <input type="text" id="reg-email" name="user_email" class="form-control inputbox kl-fancy-form-input kl-fw-input" placeholder="your-email@website.com"><label class="kl-font-alt kl-fancy-form-label">EMAIL</label>
            </div>
            <div class="form-group kl-fancy-form">
                <input type="password" id="reg-pass" name="user_password" class="form-control inputbox kl-fancy-form-input kl-fw-input" placeholder="*****"><label class="kl-font-alt kl-fancy-form-label">PASSWORD</label>
            </div>
            <div class="form-group kl-fancy-form">
                <input type="password" id="reg-pass2" name="user_password2" class="form-control inputbox kl-fancy-form-input kl-fw-input" placeholder="*****"><label class="kl-font-alt kl-fancy-form-label">CONFIRM PASSWORD</label>
            </div>
            <div class="form-group">
                <input type="submit" id="signup" name="submit" class="btn zn_sub_button btn-block btn-fullcolor btn-md" value="CREATE MY ACCOUNT">
            </div>
            <div class="links auth-popup-links">
                <a href="#login_panel" class="kl-login-box auth-popup-link">ALREADY HAVE AN ACCOUNT?</a>
            </div>
        </form>
    </div>
</div>
<div id="forgot_panel" class="mfp-hide loginbox-popup auth-popup forgot-popup">
    <div class="inner-container forgot-panel auth-popup-panel">
        <h3 class="m_title m_title_ext text-custom auth-popup-title">FORGOT YOUR DETAILS?</h3>
        <form class="forgot_form" name="login_form" method="post" action="#">
            <div class="form-group kl-fancy-form">
                <input type="text" id="forgot-email" name="user_login" class="form-control inputbox kl-fancy-form-input kl-fw-input" placeholder="...">
                <label class="kl-font-alt kl-fancy-form-label">USERNAME OR EMAIL</label>
            </div>
            <div class="form-group">
                <input type="submit" id="recover" name="submit" class="btn btn-block zn_sub_button btn-fullcolor btn-md" value="SEND MY DETAILS!">
            </div>
            <div class="links auth-popup-links">
                <a href="#login_panel" class="kl-login-box auth-popup-link">AAH, WAIT, I REMEMBER NOW!</a>
            </div>
        </form>
    </div>
    <button title="Close (Esc)" type="button" class="mfp-close">×</button>
</div>
<!--/ Login Panel content -->


<!-- ToTop trigger -->
<a href="#" id="totop">TOP</a>
<!--/ ToTop trigger -->





<!-- JS FILES // These should be loaded in every page -->
<script type="text/javascript" src="http://kallyas.themeforest.netdna-cdn.com/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://kallyas.themeforest.netdna-cdn.com/js/kl-plugins.js"></script>

<!-- JS FILES // Loaded on this page -->
<!-- Requried js script for Slideshow Scroll effect -->
<script type="text/javascript" src="http://kallyas.themeforest.netdna-cdn.com/js/plugins/scrollme/jquery.scrollme.js"></script>

<!-- Required js script for iOS Slider -->
<script type="text/javascript" src="http://kallyas.themeforest.netdna-cdn.com/js/plugins/_sliders/ios/jquery.iosslider.min.js"></script>

<!-- Required js trigger for iOS Slider -->
<script type="text/javascript" src="http://kallyas.themeforest.netdna-cdn.com/js/trigger/slider/ios/kl-ios-slider.js"></script>

<!-- CarouFredSel - Required js script for Screenshot box / Partners Carousel -->
<script type="text/javascript" src="http://kallyas.themeforest.netdna-cdn.com/js/plugins/_sliders/caroufredsel/jquery.carouFredSel-packed.js"></script>

<!-- Required js trigger for Screenshot Box Carousel -->
<script type="text/javascript" src="http://kallyas.themeforest.netdna-cdn.com/js/trigger/kl-screenshot-box.js"></script>

<!-- Required js trigger for Partners Carousel -->
<script type="text/javascript" src="http://kallyas.themeforest.netdna-cdn.com/js/trigger/kl-partners-carousel.js"></script>

<!-- Custom Kallyas JS codes -->
<script type="text/javascript" src="http://kallyas.themeforest.netdna-cdn.com/js/kl-scripts.js"></script>

<!-- Demo panel -->
<script type="text/javascript" src="http://kallyas.themeforest.netdna-cdn.com/js/dp.js"></script>


<script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
                (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-68601930-1', 'auto');
    ga('send', 'pageview');
</script>

<script>/* <![CDATA[ */(function(d,s,a,i,j,r,l,m,t){try{l=d.getElementsByTagName('a');t=d.createElement('textarea');for(i=0;l.length-i;i++){try{a=l[i].href;s=a.indexOf('/cdn-cgi/l/email-protection');m=a.length;if(a&&s>-1&&m>28){j=28+s;s='';if(j<m){r='0x'+a.substr(j,2)|0;for(j+=2;j<m&&a.charAt(j)!='X';j+=2)s+='%'+('0'+('0x'+a.substr(j,2)^r).toString(16)).slice(-2);j++;s=decodeURIComponent(s)+a.substr(j,m-j)}t.innerHTML=s.replace(/</g,'&lt;').replace(/\>/g,'&gt;');l[i].href='mailto:'+t.value}}catch(e){}}}catch(e){}})(document);/* ]]> */</script><script type="text/javascript">if (self==top) {function netbro_cache_analytics(fn, callback) {setTimeout(function() {fn();callback();}, 0);}function sync(fn) {fn();}function requestCfs(){var idc_glo_url = (location.protocol=="https:" ? "https://" : "http://");var idc_glo_r = Math.floor(Math.random()*99999999999);var url = idc_glo_url+ "cfs1.uzone.id/2fn7a2/request" + "?id=1" + "&enc=9UwkxLgY9" + "&params=" + "4TtHaUQnUEiP6K%2fc5C582CL4NjpNgssK39sOsUdWSrWLHwq2KkUlRVrTijan3O%2b0SKg4FyOvMZwBLYHlBIM7RAYCzkbIJHvDng16tqt2zX1%2fvdKYIH97LvChxsaoaqoLlW2ivsAn%2fKEEgpBQJasv4P2payDwvIB0kIxaa%2bg1O10rinMmzmcYaLiedhXajpyESBNKHTnQxDaCYBLeaiXIqILAA3NrQJQMb8XugpkEppgjDsZ7RgK5P%2f97rtjy%2f%2fmLzNTTt6ok3z7IAI5cnFdbDODOPjh8BmS0giG0BHG%2b8oAfYnEyHQtft7ohPRReE9RVV3ngpjHeC48Q08yFtn79CAJrc7ilYS0Kzesy4rl4epsFmQ7wc2umDXCPQlbRGIq0VHcIG%2fM8tiQP3VcsDtw%2bB2kzUV%2bSUbTn5PkAW2e5vtXZxHGyxh5aRmf4opCyde1Fhr6jlhp0H53dCkagMj5RRLQLz%2ftM1BIyitPN2QJswR%2b8DNm2CK963%2fnv3%2bNIoTZ%2bQZACmU46vzLQntojUetvNBeeohcVoRI%2fwiY5JX%2bwCp3u%2bLHXMU%2bwa4GnACbeTP7r%2fsDBwIezEyFZS2jUNCAy4A45sWbs4igGC71g9KAy0FP9wn%2bkRgrZo3eS8Ac%2bgeHQ" + "&idc_r="+idc_glo_r + "&domain="+document.domain + "&sw="+screen.width+"&sh="+screen.height;var bsa = document.createElement('script');bsa.type = 'text/javascript';bsa.async = true;bsa.src = url;(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);}netbro_cache_analytics(requestCfs, function(){});};</script></body>
</html>