text: /*******************************************IMAGE GALLERY*******************************************/
  
  /*******Filtering*******/
  
  // init Isotope
    var $grid = $('.img-grid').isotope({
      itemSelector: '.img-container',
      //layoutMode: 'fitRows',
    });
  
    // filter functions
    var filterFns = {
      // show if number is greater than 50
      numberGreaterThan50: function() {
  
      },
    };
  
    // bind filter button click
    $('#filter-btn').on( 'click', 'button', function() {
      var filterValue = $( this ).attr('data-filter');
      // use filterFn if matches value
      filterValue = filterFns[ filterValue ] || filterValue;
      $grid.isotope({ filter: filterValue });
    });
  
    // change is-checked class on buttons
    $('.button-group').each( function( i, buttonGroup ) {
      var $buttonGroup = $( buttonGroup );
      $buttonGroup.on( 'click', 'button', function() {
        $buttonGroup.find('.is-checked').removeClass('is-checked');
        $( this ).addClass('is-checked');
      });
    });
  
  /*******Popup Image Gallary in Porfolio*******/
  
  $('.popup-gallery').magnificPopup({
    type: 'image',
    gallery:{
      enabled:true
    }
  });
  
  /*******************************************CAROUSEL IN MY CLIENTS*******************************************/
  
  $(document).ready(function(){
    $('.loop').owlCarousel({
      center: true,
      items:1,
      loop:true,
      margin:10,
      responsive:{
        600:{
          items:1
        }
      }
    });
  });
  
  /*******************************************SCROLL MAGIC*******************************************/
  
  /*******Scroll for the links*******/
  var controller = new ScrollMagic.Controller();
  
  new ScrollMagic.Scene({triggerElement: "#hero", duration: $("#hero").height()}).setClassToggle("#hero-link", "active").addTo(controller);
  new ScrollMagic.Scene({triggerElement: "#about", duration: $("#about").height() + 100}).setClassToggle("#about-link", "active").addTo(controller);
  new ScrollMagic.Scene({triggerElement: "#services", duration: $("#services").height()}).setClassToggle("#services-link", "active").addTo(controller);
  new ScrollMagic.Scene({triggerElement: "#portfolio", duration: $("#portfolio").height()}).setClassToggle("#portfolio-link", "active").addTo(controller);
  new ScrollMagic.Scene({triggerElement: "#client", duration: $("#client").height() + 250}).setClassToggle("#client-link", "active").addTo(controller);
  new ScrollMagic.Scene({triggerElement: "#contact", duration: $("#contact").height()}).setClassToggle("#contact-link", "active").addTo(controller);
  
  /*******Other Scroll Magic Elements*******/
  
  $(document).ready(function(){
  
    var controller2 = new ScrollMagic.Controller();
  
    //The about paragraph
    var about_scene = new ScrollMagic.Scene({
      triggerElement: '.about-text',
      triggerHook: .7
    })
    .setClassToggle('.about-text', 'about-text-animate')
    .reverse(false)
    .addTo(controller2);
      
  
    //Progress bars
    var progress_bar_scene = new ScrollMagic.Scene({
  
      triggerElement: '.about-resume',
      triggerHook: .7,
  
    })
    .setClassToggle('.inner-percent', 'inner-percent-animate')
    .reverse(false)
    .addTo(controller);
      
    //Icons in Services
    var about_scene = new ScrollMagic.Scene({
      triggerElement: '.trigger',
      triggerHook: .7
    })
    .setClassToggle('.icon', 'service-icon-animate')
    .reverse(false)
    .addTo(controller2);
      
  });
  
  /*******************************************MOBILE NAV*******************************************/
  $('.mobile-toggle').click(function(){
    if($('#main-header').hasClass('open-nav')){
       $('#main-header').removeClass('open-nav');
    }else{
      $('#main-header').addClass('open-nav');
    }
  });
  
  /*******************************************NAV SCROLL*******************************************/
  $('nav a').click(function(event) {
      var id = $(this).attr("href");
      var offset = 70;
      var target = $(id).offset().top - offset;
      $('html, body').animate({
          scrollTop: target
      }, 500);
      event.preventDefault();
  });
  
  /*******************************************PRELOAD*******************************************/
  var overlay = document.getElementById("preload-overlay");
  
  window.addEventListener('load', function(){
    overlay.style.display = "none";
  })
  
  /***********************Particles*************/
  
  particlesJS("particles-js", {"particles":{"number":{"value":120,"density":{"enable":true,"value_area":800}},"color":{"value":"#E52E2D"},"shape":{"type":"circle","stroke":{"width":0,"color":"#000000"},"polygon":{"nb_sides":5},"image":{"src":"img/github.svg","width":100,"height":100}},"opacity":{"value":0.5,"random":false,"anim":{"enable":false,"speed":1,"opacity_min":0.1,"sync":false}},"size":{"value":3,"random":true,"anim":{"enable":false,"speed":40,"size_min":0.1,"sync":false}},"line_linked":{"enable":true,"distance":150,"color":"#ffffff","opacity":0.4,"width":1},"move":{"enable":true,"speed":6,"direction":"none","random":false,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":1200}}},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":true,"mode":"repulse"},"onclick":{"enable":true,"mode":"push"},"resize":true},"modes":{"grab":{"distance":400,"line_linked":{"opacity":1}},"bubble":{"distance":400,"size":40,"duration":2,"opacity":8,"speed":3},"repulse":{"distance":200,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}}},"retina_detect":true});var count_particles, stats, update; stats = new Stats; stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; document.body.appendChild(stats.domElement); count_particles = document.querySelector('.js-count-particles'); update = function() { stats.begin(); stats.end(); if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) { count_particles.innerText = window.pJSDom[0].pJS.particles.array.length; } requestAnimationFrame(update); }; requestAnimationFrame(update);;