function smallScreenCheck() {

        // Threshold windowsize for small style
        var setWidth = 820;
        var setHeight = 615;
        var iWidth = $(window).width();
        var iHeight = $(window).height();
        if(iWidth<setWidth || iHeight<setHeight)
        {
          if(iWidth<setWidth)
          {
            $('#screen').addClass('screen-smallwidth');
            $('#logo').addClass('logo-smallwidth');
          }
          else
          {
            $('#screen').removeClass('screen-smallwidth');
            $('#logo').removeClass('logo-smallwidth');
          }

          if(iHeight<setHeight)
          {
            $('#screen').addClass('screen-smallheight');
            $('#logo').addClass('logo-smallheight');
          }
          else
          {
            $('#screen').removeClass('screen-smallheight');
            $('#logo').removeClass('logo-smallheight');
          }         
        }
        else
        {
          $('#screen').removeClass('screen-smallwidth');
          $('#screen').removeClass('screen-smallheight');
          $('#logo').removeClass('logo-smallwidth');
          $('#logo').removeClass('logo-smallheight');
        }
}

jQuery(function( $ ){

    $('#screen').serialScroll({
        target:'#sections',
        items:'li', // Selector to the items ( relative to the matched elements, '#sections' in this case )
        axis:'xy',// The default is 'y' scroll on both ways
        navigation:'#navigation li a',
        duration:600,// Length of the animation (if you scroll 2 axes and use queue, then each axis take half this time)
        force:true, // Force a scroll to the element specified by 'start' (some browsers don't reset on refreshes)
        lock:false,
        constant:false,
        onBefore:function( e, elem, $pane, $items, pos ){
            e.preventDefault();
            if( this.blur )
                this.blur();
        },
        onAfter:function( elem ){
            //'this' is the element being scrolled ($pane) not jqueryfied
        }
    });
    
    

});

$(document).ready(function(){
      $('#navigation li a').click(function() {
        $('#navigation li').removeClass('active');
        $('#navigation li a').removeClass('active');
        $(this).parent('li').addClass('active');
        $(this).addClass('active');
      });
      smallScreenCheck();
});

$(window).bind('resize', function() { 
      smallScreenCheck();
});