CMS Developers

{{ require_css("http://cdn2.hubspot.net/hubfs/346178/designmodo/flat-ui/bootstrap/css/bootstrap.css") }}
{{ require_css("//cdn2.hubspot.net/hubfs/346178/designmodo/ui-kit/ui-kit-header/css/ui-kit-styles.css") }}
<div class="page-wrapper">
  <!-- header-2 -->
  {% if module.enable_menu %}
  <header class="header-2 header-2-v2">
    <div class="container">
      <div class="row">
        <nav class="navbar col-sm-12" role="navigation">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle">
              <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
            </button>
            {% set link = page_by_id(module.header.company_link).absolute_url %}

            {% if module.header.use_custom_link %}
            {% set link = module.header.company_custom_link %}
            {% endif %}

            <a class="brand" href="{{ link }}" style="color: {{ module.header.company_name_color.color }};">
              {% if module.header.company_logo.src %}
              <img src="{{ module.header.company_logo.src }}" alt="{{ module.header.company_logo.alt }}" width="{{ module.header.company_logo.width }}" height="{{ module.header.company_logo.height }}">
              {% endif %}
              {{ module.header.company_name }}
            </a>
          </div>
          <div class="collapse navbar-collapse js-nav-styles" 
               data-nav-parent-color="{{ module.header.parent_menu_text_color.color }}"
               data-nav-parent-hover-color="{{ module.header.parent_menu_text_hover_color.color }}"
               data-nav-child-color="{{ module.header.child_menu_text_color.color }}" 
               data-nav-child-hover-color="{{ module.header.child_menu_text_hover_color.color }}" 
               data-nav-child-bg="{{ module.header.child_menu_background_color.color }}">
            {% menu id="{{ module.header.menu_field }}" overrideable=False %}
          </div>
        </nav>
      </div>
    </div>
  </header>
  {% else %}
  <header class="header-2 header-2-v2" style="display: none;"></header>
  {% endif %}


  <section class="header-2-sub header-2-sub-v2 {% if module.enable_menu %}has-menu{% endif %}" style="background-color: {{ module.background_color }};">
    <div class="background" style="background-image: url('{{ module.background_image.src }}'); opacity: {{ module.background_opacity }};">&nbsp;</div>
    <div class="container">
      <div class="row">
        <div class="col-sm-8 col-sm-offset-2">
          <div class="hero-unit">
            {{ module.text }}
          </div>
          <div class="btns">
            {% for item in module.buttons %}
            {% if item.choose_cta_button %}
            <div class="btn-cta">{% cta guid="{{ item.cta_button }}" %}</div>
            {% else %}
            {% set styles = 'background-color: {{ item.button.button_color.color }}; color: #ffffff;' %}
            {% set link = page_by_id(item.button.link).absolute_url %}

            {% if item.button.use_custom_link %}
            {% set link = item.button.custom_link %}
            {% endif %}

            {% if item.button.button_type == 'clear' %}
            {% set styles = 'background-color: transparent; border: 2px solid {{ item.button.button_color.color }}; color: {{ item.button.button_color.color }};' %}
            {% endif %}

            <a class="btn btn-large js-btn-color" href="{{ link }}" style="{{ styles }}" data-btn-type="{{ item.button.button_type }}" data-btn-color="{{ item.button.button_color.color }}" data-btn-hover-color="{{ item.button.button_hover_color.color }}">{{ item.button.button_text }}</a>
            {% endif %}

            {% endfor %}
          </div>
        </div>
      </div>
    </div>
  </section>
</div>
          
        

          
            .body-container.container-fluid{
  padding: 0;
}

/*--- HEADERS ---*/
/* Default Styles */

.row-fluid [class*="span"].dm-header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 51;
  background-color: #ffffff;
  padding: 15px;
  min-height: 70px;
  -webkit-box-shadow: 0px 1px 13px 0px rgba(0,0,0,0.09);
  -moz-box-shadow: 0px 1px 13px 0px rgba(0,0,0,0.09);
  box-shadow: 0px 1px 13px 0px rgba(0,0,0,0.09);
}

.row-fluid [class*="span"].dm-company-name {
  font-size: 20px;
  margin-top: 6px;
  position: relative;
  z-index: 1;
}

.row-fluid [class*="span"].dm-company-name a {
  color: #7f8c8d;
}

.row-fluid [class*="span"].dm-navigation .hs-menu-wrapper.hs-menu-flow-horizontal{
  text-align: right;
}

.row-fluid [class*="span"].dm-navigation .hs-menu-wrapper.hs-menu-flow-horizontal > ul > li.hs-menu-depth-1 {
  display: inline-block;
}

.row-fluid [class*="span"].dm-navigation .hs-menu-wrapper.hs-menu-flow-horizontal > ul > li.hs-menu-depth-1 a {
  font-size: 16px;
  padding: 10px 15px;
}

.burger-nav {
  display: none;
}

@media (max-width: 767px) {    
  .row-fluid [class*="span"].dm-navigation {
    position: fixed;
    width: 280px;
    height: 100%;
    background-color: #ffffff;
    top: 0;
    right: -280px;
    padding: 70px 0 15px;
    -webkit-transition: right 0.4s ease;
    -moz-transition: right 0.4s ease;
    -o-transition: right 0.4s ease;
    transition: right 0.4s ease;
  }

  .row-fluid [class*="span"].dm-navigation.open {
    right: 0;
  }

  .row-fluid [class*="span"].dm-navigation .hs-menu-wrapper.hs-menu-flow-horizontal > ul > li.hs-menu-depth-1 {
    display: block;
    text-align: right;
    border-bottom: 1px solid #363940;
    margin: 0 15px;
  }

  .row-fluid [class*="span"].dm-navigation .hs-menu-wrapper.hs-menu-flow-horizontal > ul > li.hs-menu-depth-1 a {
    padding: 15px 0;
  }

  .burger-nav {
    position: absolute;
    z-index: 2;
    top: 22px;
    right: 15px;
    display: block;
  }
  body .header-10 .row-fluid .widget-type-linked_image {
    margin-top: 13px;
    float: left;
  }

  .header-10 {
    z-index: 100;
    width: 100%;
    padding-top: 0;
    padding-bottom: 0;
    height: 74px;
    color: white;
  }

  .burger-nav .burger-line {
    display: block;
    background-color: #363940;
    width: 28px;
    height: 5px;
    margin: 4px 0;
    position: relative;
    top: 0;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0);
  }

  .burger-nav.open .burger-line:first-child {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 9px;
  }

  .burger-nav.open .burger-line:nth-child(2) {
    opacity: 0;
  }

  .burger-nav.open .burger-line:last-child {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: -9px;
  }
}


.hs-menu-wrapper.hs-menu-flow-horizontal > ul li a {
  display: block;
  padding: initial;
  white-space: initial;
  max-width: initial;
  overflow: initial;
  text-overflow: initial;
  text-decoration: initial;
}


.hs-menu-wrapper > ul {
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
    line-height: 0;
  }
  &:after {
    clear: both;
  }
}

.hs-menu-wrapper > ul > li {
  position: relative;
  display: block;
}

.hs-menu-wrapper > ul > li > a {
  position: relative;
  display: block;
  padding: 10px 15px;
}

.hs-menu-wrapper > ul > li > a:hover, .hs-menu-wrapper > ul > li > a:focus {
  background: none;
  text-decoration: none;
}

@media (max-width: 568px) {
  .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-menu-depth-1 {
    width: auto;
    margin-left: 0;
  }
}

@media (max-width: 480px) {
  .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-menu-depth-1 {
    float: none;
  }
}



/* Burger */

.navbar-toggle .icon-bar {
  display: block;
  margin: 0 auto;
  background-color: #ffffff;
}


/* Mobile Nav */

body > .navbar-collapse .hs-menu-wrapper > ul > li {
  padding-top: 0;
  padding-left: 0;
  padding-bottom: 0;
  border-bottom: 1px solid #444444;
}

body > .navbar-collapse .hs-menu-wrapper > ul > li a {
  display: block;
  padding: 12px 35px;
  border-bottom: 2px solid #24292d;
  font-size: 13px;
  font-weight: normal;
  letter-spacing: 1px;
  color: #ffffff;
  text-transform: uppercase;
}

body > .navbar-collapse .hs-menu-wrapper > ul > li > .hs-menu-children-wrapper {
  list-style-type: none;
  padding-left: 0;
}

body > .navbar-collapse .hs-menu-wrapper > ul > li > .hs-menu-children-wrapper li a {
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 11px;
  color: #d0cdcd;
}

body > .navbar-collapse .navbar-form .btn {
  height: auto;
  line-height: 22px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 26px;
  padding-right: 26px;
}



/* Header 2 V2 */

.header-2-sub-v2 .btns .btn, .header-2-sub-v2 .btns .btn-cta {
  margin-top: 5px;
  margin-bottom: 5px;
}

.header-2-sub-v2 .btns .btn-cta {
  display: inline-block;
  margin-left: 10px;
  margin-right: 10px;
}

.header-2-v2 .navbar .brand img:first-child {
  width: auto;
}

.header-2-v2 .navbar ul {
  float: right;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none
}

.header-2-v2 .navbar ul > li {
  position: relative;
  display: block;
  float: left;
  margin-left: 20px;
}

.header-2-v2 .navbar ul > li:first-child {
  margin-left: 0;
}

.header-2-v2 .navbar ul > li > a {
  padding: 32px 0 10px;
  font-size: 17px;
  font-weight: normal;
  font-weight: 500;
  letter-spacing: 1px;
  color: #ffffff;
  max-width: none;
}

.header-2-v2 .navbar ul > li > .hs-menu-children-wrapper {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity .4s;
  -moz-transition: opacity .4s;
  -o-transition: opacity .4s;
  transition: opacity .4s;
  background-color: #ffffff;
  padding: 20px;
  position: absolute;
  width: 200px;
  float: none;
  text-align: center;
  top: 100%;
  left: -9999px;
  right: -9999px;
  margin: 0 auto;
}

.header-2-v2 .navbar ul > li:hover > .hs-menu-children-wrapper {
  opacity: 1;
  visibility: visible;
}

.header-2-v2 .navbar ul > li > .hs-menu-children-wrapper li {
  display: block;
  float: none;
  margin-top: 15px;
  margin-left: 0;
}

.header-2-v2 .navbar ul > li > .hs-menu-children-wrapper li:first-child {
  margin-top: 0;
}

.header-2-v2 .navbar ul > li > .hs-menu-children-wrapper li a {
  padding-top: 0;
  padding-bottom: 0;
  color: #2c3e50;
}

.header-2-sub-v2 {
  background-color: transparent;
}

.header-2-sub-v2.has-menu {
  padding-top: 215px;
  padding-bottom: 115px;
}

@media (max-width: 991px) {
  .header-2-sub-v2.has-menu {
    padding-top: 165px;
  }
}

/* Header 2 V2 - Navigation Standalone */

.header-2-v2.standalone .navbar {
  position: static;
  margin-bottom: 0;
}

          
        

          
            jQuery(document).ready(function($) {
    $(".header-2-sub-v2").each(function() {
        var o = $(this);
        if (o.hasClass("init")) {
            return;
        }
        o.addClass("init");

      	var style = "";

        $(this).find(".js-btn-color").each(function(){
            var btnType = $(this).data('btn-type');
            var btnColor = $(this).data('btn-color');
            var btnHoverColor = $(this).data('btn-hover-color');
            
            var btnId = "id-" + Math.random().toString().slice(2);
            $(this).attr("id", btnId);

            $(this).removeAttr('style');

             if(btnType === 'normal') {
                style += "#" + btnId + ".btn { background-color: " + btnColor + "; color: #ffffff; } \n";
                style += "#" + btnId + ".btn:hover, #" + btnId + ".btn:focus, #" + btnId + ".btn:active { background-color: " + btnHoverColor + "; } \n";
            }

            if(btnType === 'clear') {
                style += "#" + btnId + ".btn { background-color: transparent; border: 2px solid " + btnColor + "; color: " + btnColor + "; } \n";
                style += "#" + btnId + ".btn:hover, #" + btnId + ".btn:focus, #" + btnId + ".btn:active { background-color: " + btnColor + "; color: #ffffff; } \n";
            }
        });

        $("<style type='text/css'/>").html(style).appendTo("head");
    });
});

jQuery(document).ready(function($) {
    $(".header-2-v2").each(function() {
        var o = $(this);
        
        if (o.hasClass("init")) {
            return;
        }

        o.addClass("init");

        var headerId = "id-" + Math.random().toString().slice(2);
        o.attr("id", headerId);
      
        var style = "";

        o.find(".js-nav-styles").each(function(){
            var parentMenuColor = $( this ).data( 'nav-parent-color' );
            var parentMenuHoverColor = $( this ).data( 'nav-parent-hover-color' );
            var childMenuColor = $( this ).data( 'nav-child-color' );
            var childMenuHoverColor = $( this ).data( 'nav-child-hover-color' );
            var childMenuBgColor = $( this ).data( 'nav-child-bg' );
            
            var navId = "id-" + Math.random().toString().slice(2);
            $(this).attr("id", navId);

            style += "#" + navId + " ul > li > a { color: " + parentMenuColor + "; } \n";
          	style += "#" + navId + " ul > li > a:hover, #" + navId + " ul > li > a:focus, #" + navId + " ul > li > a:active { color: " + parentMenuHoverColor + "; } \n";
          	style += "#" + navId + " ul > li.active > a { color: " + parentMenuHoverColor + "; } \n";
            style += "#" + navId + " ul > li > .hs-menu-children-wrapper li a { color: " + childMenuColor + "; } \n";
          	style += "#" + navId + " ul > li > .hs-menu-children-wrapper li a:hover, #" + navId + " ul > li > .hs-menu-children-wrapper li a:focus, #" + navId + " ul > li > .hs-menu-children-wrapper li a:active { color: " + childMenuHoverColor + "; } \n";
            style += "#" + navId + " ul > li > .hs-menu-children-wrapper { background-color: " + childMenuBgColor + "; } \n";
            style += "#" + headerId + " .navbar-toggle .icon-bar { background-color: " + parentMenuColor + "; } \n";
        });

        $("<style type='text/css'/>").html(style).appendTo("head");
    });
});




/**
 * JavaScript code for all ui-kit components.
 * Use namespaces.
 */

window.isRetina = (function() {
    var root = ( typeof exports == 'undefined' ? window : exports);
    var mediaQuery = "(-webkit-min-device-pixel-ratio: 1.5),(min--moz-device-pixel-ratio: 1.5),(-o-min-device-pixel-ratio: 3/2),(min-resolution: 1.5dppx)";
    if (root.devicePixelRatio > 1)
        return true;
    if (root.matchMedia && root.matchMedia(mediaQuery).matches)
        return true;
    return false;
})();
//nextOrFirst? prevOrLast?
jQuery.fn.nextOrFirst = function(selector) { var next = this.next(selector); return (next.length) ? next : this.prevAll(selector).last(); }
jQuery.fn.prevOrLast = function(selector){ var prev = this.prev(selector); return (prev.length) ? prev : this.nextAll(selector).last(); }

//preload images
$.fn.preload=function(){this.each(function(){$("<img/>")[0].src=this})}

window.startupKit = window.startupKit || {};

startupKit.hideCollapseMenu = function() {
    $('body > .navbar-collapse').css({
        'z-index': 1
    });
    $('html').removeClass('nav-visible');
    setTimeout(function() {
        $('body > .navbar-collapse').addClass('collapse');
        $('body > .colapsed-menu').removeClass('show-menu');
    }, 400)
}

$(function () {
    $('.page-wrapper, .navbar-fixed-top, .navbar-collapse a, .navbar-collapse button, .navbar-collapse input[type=submit]').on('click', function(e) {
        if($('html').hasClass('nav-visible')) {
            setTimeout(function(){
                startupKit.hideCollapseMenu();
            }, 200)
        }
    });
    $(window).resize(function() {
        if($(window).width() > 965) {
            startupKit.hideCollapseMenu();
        }
    });

    var menuCollapse = $('#header-dockbar > .colapsed-menu').clone(true);
    $('body').append(menuCollapse);

    $('#open-close-menu').on('click', function () {
        if($('html').hasClass('nav-visible')) {
            startupKit.hideCollapseMenu();
        } else {
            $('body > .colapsed-menu').addClass('show-menu');
            if($('#header-dockbar').length) {
                 $('body > .colapsed-menu').css({
                    top: $('#header-dockbar').height()
                });
            }
            setTimeout(function() {
                $('html').addClass('nav-visible');
            }, 1)
        }
    });
    if($('.social-btn-facebook').length){
        $('.social-btn-facebook').sharrre({
            share: {
                facebook: true
            },
            enableHover: false,
            enableCounter: false,
            click: function(api, options){
                api.simulateClick();
                api.openPopup('facebook');
            }
        });
    }

    if($('.social-btn-twitter').length){
        $('.social-btn-twitter').sharrre({
            share: {
                twitter: true
            },
            enableHover: false,
            enableCounter: false,
            buttons: {
                twitter: {
                    via: 'Designmodo',
                    url: false
                }
            },
            click: function(api, options){
                api.simulateClick();
                api.openPopup('twitter');
            }
        });
    }
});

/**
 *  Headers 
 * */
startupKit.uiKitHeader = startupKit.uiKitHeader || {};

startupKit.uiKitHeader._inFixedMode = function(headerClass) {
    var navCollapse = $(headerClass + ' .navbar-collapse').first().clone(true);
    navCollapse.attr('id', headerClass.substr(1));
    $('body').append(navCollapse);

    var fixedNavbar = $('.navbar-fixed-top');
        fixedNavbarHeader = fixedNavbar.closest('header');
        fixedNavbarHeaderClone = fixedNavbarHeader.clone(true);

    if(fixedNavbarHeader.hasClass('fake-header')) {
        var fakeHeader = $('<div class="fake-wrapper-header" style="width: 100%; height: ' + fixedNavbarHeader.outerHeight() + 'px;" />');
    }
    $('body').prepend(fakeHeader);
    $('body').prepend(fixedNavbarHeaderClone);
    fixedNavbarHeader.detach();

    $(headerClass + ' .navbar-toggle').on('click', function() {
        var $this = $(this);
        if($('html').hasClass('nav-visible')) {
            startupKit.hideCollapseMenu();
        } else {
            $('.navbar-collapse#' + headerClass.substr(1)).removeClass('collapse');
            if($('#header-dockbar').length) {
                $('.navbar-collapse#' + headerClass.substr(1)).css({
                    top: $('#header-dockbar').height()
                });
            }
            setTimeout(function() {
                $('html').addClass('nav-visible');
            }, 1)
            setTimeout(function() {
                $('body > .navbar-collapse').css({
                    'z-index': 101
                });
            }, 400)
        }
    });

    if ($(headerClass + ' .navbar').hasClass('navbar-fixed-top')) {
        var s1 = $(headerClass + '-sub'),
            s1StopScroll = s1.outerHeight() - 70,
            antiflickerStopScroll = 70;

        if($(headerClass).outerHeight()>0){
            var antiflickerColor = $(headerClass).css('background-color');
        }else if($(headerClass+'-sub').length > 0){
            var antiflickerColor = $(headerClass+'-sub').css('background-color');
        }else{
            var antiflickerColor='#fff';
        }

        var antiflicker = $('<div class="' + headerClass.slice(1) + '-startup-antiflicker header-antiflicker" style="opacity: 0.0001; position: fixed; z-index: 2; left: 0; top: 0; width: 100%; height: 70px; background-color: '+antiflickerColor+';" />');
        $('body').append(antiflicker);
        var s1FadedEls = $('.background, .caption, .controls > *', s1),
            header = $(headerClass);

        s1FadedEls.each(function() {
            $(this).data('origOpacity', $(this).css('opacity'));
        });

        var headerAniStartPos = s1.outerHeight() - 120, headerAniStopPos = s1StopScroll;

        $(window).scroll(function() {
            var opacity = (s1StopScroll - $(window).scrollTop()) / s1StopScroll;
            opacity = Math.max(0, opacity);

            if ($(window).scrollTop() > s1StopScroll - antiflickerStopScroll) {
                var opacityAntiflicker = (s1StopScroll - $(window).scrollTop()) / antiflickerStopScroll;
                opacityAntiflicker = Math.max(0, opacityAntiflicker);
            } else {
                opacityAntiflicker = 1
            }
            // 0..1

            s1FadedEls.each(function() {
                $(this).css('opacity', $(this).data('origOpacity') * opacity);
            });

            antiflicker.css({
                'background-color': $('.pt-page-current', s1).css('background-color'),
                'opacity': 1.0001 - opacityAntiflicker
            });
            
            var headerZoom = -(headerAniStartPos - $(window).scrollTop()) / (headerAniStopPos - headerAniStartPos);
            headerZoom = 1 - Math.min(1, Math.max(0, headerZoom));
            
            $(window).resize(function(){
               _navbarResize();
            });
            var _navbarResize = function(){
                if($(window).width()<767){
                    $('.navbar', header).css({
                        'top' : -6 + ((20 + 6) * headerZoom)
                    });
                } else if($(window).width()<480){
                    $('.navbar', header).css({
                        'top' : -6 + ((20 + 6) * headerZoom)
                    });
                } else{
                    $('.navbar', header).css({
                        'top' : -6 + ((45 + 6) * headerZoom)
                    });
                }
            };
            
            _navbarResize();
            
            $('.navbar .brand', header).css({
                'font-size' : 18 + ((25 - 18) * headerZoom),
                'padding-top' : 30 + ((23 - 30) * headerZoom)
            });
            $('.navbar .brand img', header).css({
                'width' : 'auto',
                'height' : 25 + ((50 - 25) * headerZoom),
                'margin-top' : -1 + ((-10 + 1) * headerZoom)
            });
            $('.navbar .btn-navbar', header).css({
                'margin-top' : 30 + ((28 - 30) * headerZoom)
            });

            if ($(window).width() > 979) {
                $(headerClass + '.navbar .nav > li > a', header).css({
                    'font-size' : 12 + ((14 - 12) * headerZoom)
                });
            } else {
                $(headerClass + '.navbar .nav > li > a', header).css({
                    'font-size' : ''
                });
            }

        });
    };
};

/* Header 2*/
startupKit.uiKitHeader.header2 = function() {
    startupKit.uiKitHeader._inFixedMode('.header-2');
};


/** 
 * Global part of startup-kit
 * */
(function($) {
    (function() {
        /* implementing headers */
        for (header in startupKit.uiKitHeader) {
            headerNumber = header.slice(6);
            if (jQuery('.header-' + headerNumber).length != 0) {
                startupKit.uiKitHeader[header]();
            };
        }

        /* implementing contents */
        for (content in startupKit.uiKitContent) {
            contentNumber = content.slice(7);
            if (jQuery('.content-' + contentNumber).length != 0) {
                startupKit.uiKitContent[content]();
            };
        }
        
        /* implementing blogs */
        for (blog in startupKit.uiKitBlog) {
            blogNumber = blog.slice(4);
            if (jQuery('.blog-' + blogNumber).length != 0) {
                startupKit.uiKitBlog[blog]();
            };
        }
        
        /* implementing projects */
        for (project in startupKit.uiKitProjects) {
            projectNumber = project.slice(7);
            if (jQuery('.projects-' + projectNumber).length != 0) {
                startupKit.uiKitProjects[project]();
            };
        }

      
        /* function on load */
        $(window).on("load", function() {
            $('html').addClass('loaded');
            $(window).resize();
        });
        setTimeout(function() {
            $(window).resize();
        }, 10);

        /* ie fix images */
        if (/msie/i.test(navigator.userAgent)) {
            $('img').each(function() {
                $(this).css({
                    width : $(this).attr('width') + 'px',
                    height : 'auto'
                });
            });
        }

        // Focus state for append/prepend inputs
        $('.input-prepend, .input-append').on('focus', 'input', function() {
            $(this).closest('.control-group, form').addClass('focus');
        }).on('blur', 'input', function() {
            $(this).closest('.control-group, form').removeClass('focus');
        });

        // replace project img to background-image
        $('.project .photo img').each(function() {
            $(this).hide().parent().css('background-image', 'url("' + this.src + '")');
        });

        // Tiles
        var tiles = $('.tiles');

        // Tiles phone mode
        $(window).resize(function() {
            if ($(this).width() < 768) {
                if (!tiles.hasClass('phone-mode')) {
                    $('td[class*="tile-"]', tiles).each(function() {
                        $('<div />').addClass(this.className).append($(this).contents()).appendTo(tiles);
                    });

                    tiles.addClass('phone-mode');
                }
            } else {
                if (tiles.hasClass('phone-mode')) {
                    $('> [class*="tile-"]', tiles).each(function(idx) {
                        $('td[class*="tile-"]', tiles).eq(idx).append($(this).contents());
                        $(this).remove();
                    });

                    tiles.removeClass('phone-mode');
                }
            }
        });

        tiles.on('mouseenter', '[class*="tile-"]', function() {
            $(this).removeClass('faded').closest('.tiles').find('[class*="tile-"]').not(this).addClass('faded');
        }).on('mouseleave', '[class*="tile-"]', function() {
            $(this).closest('.tiles').find('[class*="tile-"]').removeClass('faded');
        });
        
        
    })();
    //add some smooth for scroll


})(jQuery);
//swipe
(function($){$.fn.touchwipe=function(settings){var config={min_move_x:20,min_move_y:20,wipeLeft:function(){},wipeRight:function(){},wipeUp:function(){},wipeDown:function(){},preventDefaultEvents:true};if(settings)$.extend(config,settings);this.each(function(){var startX;var startY;var isMoving=false;function cancelTouch(){this.removeEventListener('touchmove',onTouchMove);startX=null;isMoving=false}function onTouchMove(e){if(config.preventDefaultEvents){e.preventDefault()}if(isMoving){var x=e.touches[0].pageX;var y=e.touches[0].pageY;var dx=startX-x;var dy=startY-y;if(Math.abs(dx)>=config.min_move_x){cancelTouch();if(dx>0){config.wipeLeft();e.preventDefault()}else{config.wipeRight();e.preventDefault()}}else if(Math.abs(dy)>=config.min_move_y){cancelTouch();if(dy>0){config.wipeDown()}else{config.wipeUp()}}}}function onTouchStart(e){if(e.touches.length==1){startX=e.touches[0].pageX;startY=e.touches[0].pageY;isMoving=true;this.addEventListener('touchmove',onTouchMove,false)}}if('ontouchstart'in document.documentElement){this.addEventListener('touchstart',onTouchStart,false)}});return this}})(jQuery);