• Home

Items filtered by date: December 2015

Sunday, 21 February 2016 19:09

Blank screen on my Dell E6540 laptop

my laptop dell e6540 on windows 10 pro is connected to 2 external Dell u24h... via display ports.

I came back to my computer and all screens were blank, but on. I ejected my laptop from the docking station and the laptop panel came on as normal.

I tried the following which did not work:

  • presing ctl+alt+del
  • rebooting laptop
  • turning monitors on and off
  • updated both amd and intel drivers

Solution

I unplugged the display port cables fromn the back of the docking station, the laptop panel came back on. I then plugged in the external monitors 1 by 1 and they came back on.

You can also try using HDMI or VGA connections if available. This issues is common with Display Port and HDMI connections where the monitor talks back to Windows.

Published in Windows 10
Read more...
Sunday, 21 February 2016 19:07

Make Windows Dark

When you use a computer fpr most of the day you do not want a galring screen murdering your eyes. This is why I have started putting together somne instructions on how to make Windows 10, and some Apps use Dark Themes.

  • notepad++ custom dark theme
  • firefox that drakener plugin
  • explorer use QTTabs and set the colours, turn on compatability mode
  • * change default colour via registry hack for word pad and notepad
  • office set to black/dark theme vis options/apperance / copy theme and make dsark
  • windows hidden dark theme (or what of there it is)
  • netbeans use dark theme

Other software use inbuilt dark themes

Use a dark themen for windows 10 when the patchign thing comes out

Published in Windows 10
Read more...
Sunday, 21 February 2016 19:03

DLNA, Streaming, Miracast, Casting, MHL and Media Servers explained

So you want to cast/stream your media/phone/pc to another device, what now?

I will go through all the available technologies which allow you to do this and by the end of this article you will be able to pick and choose the setup which is best for you. I will be using an android phone and a Windows 10 PC but a lot of the information can be translated to IOS and Mac as we will be using standard technologies.

Basic Technology Groups

It is important to know the different terms and technologies before starting doing any streaming.

  • Streaming (via DLNA/UPnP) - Streaming is playing media file from a remote device on the local device (i.e. the one you are using)
  • Screen Casting / Screen Mirroring - Is used to transmit/send your whole to another device to get displayed there.
  • MHL – This is a technology to allow usually phones to display HDMI via the USB port and also for the TV to supply power to the phone or device. The only different between a HDMI socket and a MHL sockets is that the MHL enabled HDMI socket supplies power. Both the HDMI socket types can be used by any HDMI device. This requires a physical connection between the phone and the TV via a MHL cable (basically a micro-USB to HDMI cable)
  • Remote Control – This is where you use software to establish remote connection to the target device which is then displayed on your computer usually with the ability to control it. This is almost like Remote Desktop for windows.
  • Other Streaming – There are other ways of streaming but they are not covered here.

These technologies have many parts to them which I will go into more depth below and how they work and then ultimately how to use them.

DNLA (Streaming Via DNLA/UPnP protocol)

DLNA Components
Thousands of "DLNA Certified" devices have been produced, falling into four broad categories:

  • Digital Media Server. These store media and make it available on the home network.
  • Digital Media Players. These can play content pulled from a Digital Media Server.
  • Digital Media Controllers. These can find content on a Digital Media Server and push it to a Digital Media Renderer.
  • Digital Media Renderers. These can play content pushed from a Digital Media Controller.

A DLNA App can be any combination of the components above.

Notes

  • UPnP/DLNA server
  • DNLA client - this is a software that can push media to a device to be played or read files from a DNLA server and watch locally
  • Renderer functionality - this allows you to push media to it and then that device plays it on its screen. Not all DLNA servers support this. I.e. BubbleUPnP and Samsung TVs. If the device does not have this feature or advertise it windows 10 will not find it when adding a device or be able to cast to it.
  • Don’t forget if you are in the other room your windows 10 will need authorizing on the TV for connection.
  • TVs generally are not holders of media and might not come up as a DNLA media server (my computer--> add device) with content when running as a TV and even when you have the AllShare app open, but only as an endpoint via cast screen because the DNLA server is pushing the fact it is a renderer endpoint and not a media server. What features that are on which television will change from model to model.
  • Renderer endpoints announce themselves and are  part of the DLNA protocol set.
  • the Windows thing is called "Play To" in Windows 8 and  "Cast To Device" in Windows 10
  • DNLA is for casting files and media, not your devices screen. This is know as Screen Mirroring or Screen Casting
  • UPnP is another name for DNLA. DLNA is the common name everyone uses though.
  • My Samsung TV appears under context menu when you right click on a media file the "Cast To Device" when you are watching TV (this is not the DNLA mode) but fails to respond.
  • DLNA does not require hardware but you can only cast files and videos, not the whole screen. There are workarouns but they are not perfect because DNLA was not designed for casting your screen, just media.
  • windows 10 does not receive but you can buy a small app to allow windows 10 to become a media renderer

Issues

  • don’t forget to mention about me running as a standard user I had to change to an administrator to turn this on, return as a standard user and then every things works as it should including permission upgrade (UAC prompt)
  • "media streaming not turned on" read the message properly and enable the "Windows Media Player Network Sharing Service" in the services by click on the link below the message or go to the services.msc
  • in windows  you can right click on videos and cast them to DNLA devices

Links

General

Windows

Android Media Center

DNLA MKV Support

Kodi - Media Center

Cross Platform DLNA Apps

These apps will have installers for various platforms

Android DLNA Apps

Windows DLNA Apps

iPhone DLNA Apps

 

MHL

This technology only requires a MHL cable which can be specific to your phone to be connected, from your phone to a TV’s HDMI socket. If the HDMI socket is not a MHL socket the only thing that will not happen is that the phone will not get charged. There are no specific settings for this feature. When you connect the phone the image is then mirrored on your screen (assuming you have the HDMI channel selected)

Notes

  • There are 2 types of MHL connector that Samsung uses. 5p and 11p. For some reason later Samsung phones use the 11p configuration. (add phones here)
  • 5p is a standard MHL standard that most phones use
  • MHL is a standard that involves 2 parts
    • HDMI sockets (on TVs and monitors) that supply power down the cable to the device at the other end.
    • MHL is usually delivered through the micro USB socket on the mobile phone supplies a HDMI signal
  • You can get a 5p to 11p adapter that simply converts the pin configuration. This purely changes the location of the HDMI wires/pins
  • OTG (host USB) adapters are the same for both Samsung connection types (5p/11p)
  • If you plug in a 5p adapter to an 11p phone, the phone will charge normally but you will not have any HDMI output.
  • The HDMI output can be lost by a poor quality HDMI cable
  • I have confirmed that a HDMI v1.3 (shielded) works fine on my phone but a purported v1.4 premium cable did not work. You might also find that the cable can display a picture but can be intermittent. This is most likely down to a poor cable. Some TVs might also exhibit the same sort of intermittent display because their HDMI pickups are not that brilliant. The HDMI signal on older phones is about 500Ma and on the newer MHL standard about 900Ma so you can see there might be some issues arising from this as well.
  • The multi adapter I got is ok but you cannot plug in a USB pen drive and charge at the same time because the sockets are too close together. I would us a small USB extender in the adapters USB socket which will then allow you to use all devices at once.
  • The Samsung s2 adapter that I got is a 5p adapter with a 5p à 11p adapter. This means you can probably use it for more phones that the Samsung because most other phones will use the standard 5p arrangement. The charge feature should always use the same pins so should be safe. I am guessing that the USB (OTG) is a standard pinout as well.
  • If you are going to move your setup about often, using the adapter might not be the best for you because you could bust the socket on your phone, but for permanent setups or occasional use it is great.
  • You can buy an multi adapter and as long as it is 5p standard you can use a 5pà11p adapter to convert it to use later version of the Samsung phone ranges

Links

Miracast / Screen Casting / Screen Mirroring

This generally needs specialist hardware, compatible WIFI cards on both the sender and receiver ?

Notes

  • you can cast to Miracast devices from windows win+p
  • windows does not have an inbuilt Miracast receiver, there is airplay software you can but that works + another
  • there is a project to turn Raspberry Pi into a Miracast device called Piracast
  • Chromecast possibly support Miracast standard
  • AirServer (Finally a software Miracast receiver) for windows - http://www.airserver.com/PC#features
  • Miracast uses Wi-Fi Direct technology so it requires hardware

Links

General Articles

Windows Articles

Android Articles

iPhone Articles

Android Apps

  • EZCast - Official App and Hardware

Windows App

 

Android Remote Software

With this method you use software usually comprising of a client and a server application which talk to each other. Once the connection is established you can control the remote your device as well as seeing the screen on your client device.

Links

Remote Android Apps

Although the section is called android apps there is client on a Windows PC to connect to the service on the android phone

Other Streaming

Stream PC desktop with VLC to DLNA  /  VLC Player Streaming to DNLA method

These methods tend to  uses an intermediary to transmit a raw compatabile DNLA stream to a DLNA device. You are able to select your desktop to be streamed. Why this is not a standard feature is beyond me.

Stream Desktop To DLNA Renderer

Other desktop streaming/mirroring

 

Kindle Cast

 

Published in Android
Read more...
Sunday, 21 February 2016 18:59

To enable Media Sharing in Windows 10

When you go to enable Media sharing, it is greyed out. This is most likely because you are running as a standard user (This is a good thing).

Solution

  • Change your account type to an administrator account
  • Log back in to your account
  • Enable media sharing
  • Log out and put your account back to standard (optional but I would)
Published in Windows 10
Read more...
Sunday, 21 February 2016 17:42

Blank HTML Template

This is basic HTML template with some items added in to show you how to add them. This is not the most modern version of the code so I might update this.

<!DOCTYPE html>
<html lang="en-GB">

	<head>
		<base href="http://quantumwarp.com/">
		
		<meta charset=utf-8">
		<meta name="keywords" content="">
		<meta name="description" content="">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		
		<title>HTML Skeleton - Blank Page</title>
		<link rel="icon" href="/images/favicon.ico">
		
		<link rel="stylesheet" href="/css/styles.css">
		<style>
			.cssClass {color: red;}
		</style>
		
		<script src="/js/jquery.skitter.js"></script>
		<script>
		 // Code Goes Here
		</script>
		
		<script>
		// Code Goes Here - Google Analytics uses this.
		</script>
	</head>	
	
	<body>	
		<div>
			<p>You Main Content Goes Here</p>
		</div>		
	</body>
	
</html>

 In HTML5 it is optional to self close tags, but XHTML and XML expects theme to be closed (only for void elements).

Published in HTML
Read more...
Sunday, 21 February 2016 12:50

Company Pointers Horizontal

This is a Company Promo 4 point Grid with Icons.

Established 1955

sand clock 128

We remain a genuine local company, employing local trustworthy employees, some who have been with us now for over 5 years and take massive pride in their work.

Family Business

administrator 128

This family run business have been going for more than 50 years.

 

Quality Workmanship

quality 128

We became a full members of the Computer Society, are fully insured. We keep up to date with all new computer issues.

Enviromentally Friendly

trash 128

We are a environmentaly friendly company. We recycle and use reclaimed computers where possible. We are committed to cutting down on the carbon footprint were ever we can.

 

HTML

<div id="company-pointers-horizontal" style="text-align: center;">

	<div style="display: inline-block;">

		<div style="float: left; width: 180px;">
			<div>
				<h3>Established 1955</h3>
				<p><img src="/images/modules/745/sand_clock_128.png" alt="sand clock 128" style="margin: 10px;" /></p>
				
				<p>We remain a genuine local company, employing local trustworthy employees, some who have been with us now for over 5 years and take massive pride in their work.</p>
			</div>
		</div>

		<div style="float: left; width: 180px;">
			<div>
				<h3>Family Business</h3>
				<p><img src="/images/kb/2016/745/administrator_128.png" alt="administrator 128" style="margin: 10px;" /></p>						
				<p>This family run business have been going for more than 50 years.</p>
				<p>&nbsp;</p>
			</div>
		</div>

		<div style="float: left; width: 180px;">
			<div>
				<h3>Quality Workmanship</h3>
				<p><img src="/images/kb/2016/745/quality_128.png" alt="quality 128" style="margin: 10px;" /></p>				
				<p>We became a full members of the Computer Society, are fully insured. We keep up to date with all new computer issues.</p>
			</div>
		</div>

		<div style="float: left; width: 180px;">
			<div>
				<h3>Enviromentally Friendly</h3>
				<p><img src="/images/kb/2016/745/trash_128.png" alt="trash 128" style="margin: 10px;" /></p>				
				<p>We are a environmentaly friendly company. We recycle and use reclaimed computers where possible. We are committed to cutting down on the carbon footprint were ever we can.</p>
			</div>
		</div>

	</div>

</div>

 

Published in Packages
Read more...
Sunday, 21 February 2016 11:30

Company Pointers Promo

This is a simple 4 x 4 Grid with Icons. It uses the Joomlashine Framework.

sand clock 128

Established 1955

We remain a genuine local company, employing local trustworthy employees, some who have been with us now for over 5 years and take massive pride in their work.

administrator 128

Family Business

This family run business have been going for more than 50 years.

 

quality 128

Quality Workmanship

We became a full members of the Computer Society, are fully insured. We keep up to date with all new computer issues.

trash 128

Enviromentally Friendly

We are a green friendly company we recycle and use reclaimed computers where possible. We are committed to cutting down on the carbon footprint were ever we can.

HTML

<div id="company-pointers-promo">
	<div class="grid-layout">
		<div class="grid-col">
			<div style="display: inline-block; width: 25%;">
				<img src="/images/modules/744/sand_clock_128.png" alt="sand clock 128" style="margin: 10px; float: left;" />
			</div>
			<div style="display: inline-block; width: 65%;">
				<h3>Established 1955</h3>
				<p>We remain a genuine local company, employing local trustworthy employees, some who have been with us now for over 5 years and take massive pride in their work.</p>
			</div>
		</div>
		<div class="grid-col">
			<div style="display: inline-block; width: 25%;">
				<img src="/images/modules/744/administrator_128.png" alt="administrator 128" style="margin: 10px; float: left;" />
			</div>
			<div style="display: inline-block; width: 65%;">
				<h3>Family Business</h3>
				<p>This family run business have been going for more than 50 years.</p>
				<p>&nbsp;</p>
			</div>
		</div>
	</div>
	<div class="grid-layout">
		<div class="grid-col">
			<div style="display: inline-block; width: 25%;">
				<img src="/images/modules/744/quality_128.png" alt="quality 128" style="margin: 10px; float: left;" />
			</div>
			<div style="display: inline-block; width: 65%;">
				<h3>Quality Workmanship</h3>
				<p>We became a full members of the Computer Society, are fully insured. We keep up to date with all new computer issues.</p>
			</div>
		</div>
		<div class="grid-col">
			<div style="display: inline-block; width: 25%;">
				<img src="/images/modules/744/trash_128.png" alt="trash 128" style="margin: 10px; float: left;" />
			</div>
			<div style="display: inline-block; width: 65%;">
				<h3>Enviromentally Friendly</h3>
				<p>We are a environmentaly friendly company. We recycle and use reclaimed computers where possible. We are committed to cutting down on the carbon footprint were ever we can.</p>
			</div>
		</div>
	</div>
</div>

 

Published in Packages
Read more...
Sunday, 21 February 2016 10:57

Signature Tags

These are a collection of different styles of signatures that you can put at the bottom of websites you design.

Lancastrian IT

Website Design By Lancastrian IT

Website Design By Lancastrian IT

<p><a href="http://www.lancastrian-it.co.uk/" target="_blank">Website Design</a> By Lancastrian IT</p>

 

Website Design By Lancastrian IT - both clickable, useful for SEO

Website Design By Lancastrian IT

<p><a href="http://www.lancastrian-it.co.uk/" target="_blank"><strong>Website Design</strong></a> By <a href="http://www.lancastrian-it.co.uk/" target="_blank"><strong>Lancastrian IT</strong></a></p>

 

Website Design By Lancastrian IT - with anchor text and good for SEO

This is ideal (has keywords in tail and anchor text - i need to fixate my website and keyword research before using this)

Website Design By Lancastrian IT

<p><a href="http://www.lancastrian-it.co.uk/website-design" target="_blank"><strong>Website Design</strong></a> By Lancastrian IT</p>

 

Website Design By Lancastrian IT - additional title attribute and anchor text, good for SEO

Additional with title attribute (this appears to be optinal visavie SEO and only good for user interaction, ie click here to go to my site)

Website Design By Lancastrian IT

<p><a title="Website Design Company in Lancaster" href="http://www.lancastrian-it.co.uk/website-design" target="_blank"><strong>Website Design</strong></a> By Lancastrian IT</p>

 

Website Designed By Lancastrian IT - Lancastrian IT: SEO, Internet Marketing - with extra links containing keywords, format taken from SEO Quest

Website Designed By Lancastrian IT
Lancastrian IT: SEO, Internet Marketing

<p><strong>Website Designed By</strong> <a href="http://www.lancastrian-it.co.uk" target="_blank"><strong>Lancastrian IT</strong></a><br /> Lancastrian IT: <a href="http://www.lancastrian-it.co.uk/seo/" target="_blank">SEO</a>, <a href="http://www.lancastrian-it.co.uk/internet-marketing" target="_blank">Internet Marketing</a></p>

 

Designed by Lancastrian IT for QuantumWarp

Designed by Lancastrian IT for QuantumWarp

<p>Designed by <a href="http://www.lancastrian-it.co.uk/" title="Web Design">Lancastrian IT</a> for <a href="http://quantumwarp.com.com/" title="QuantumWarp"></a>QuantumWarp</p>

 

© 2009 The Westgate Medical Practice, Designed by Lancastrian IT

© 2009 The Westgate Medical Practice, Designed by Lancastrian IT

<p>&copy; 2009 The Westgate Medical Practice, Designed by <a href="http://www.lancastrian-it.co.uk/">Lancastrian IT</a></p>

 

Must Be Media

Powered By Must Be Media

Powered By Must Be Media

<p>Powered By <a href="http://www.mustbemedia.co.uk/">Must Be Media</a></p>

 

Combined Signatures (Lancastrian IT and Must Be Media)

Website Design By Lancastrian IT,  Powered By Must Be Media

Website Design By Lancastrian IT, Powered By Must Be Media

<p><a href="http://www.lancastrian-it.co.uk/" target="_blank">Website Design</a> By Lancastrian IT,  Powered By <a href="http://www.mustbemedia.co.uk/" target="_blank">Must Be Media</a></p>

 

Website Design By Lancastrian IT,  Powered By Must Be Media - Floated left and right for a static/wide footer

Website Design By Lancastrian IT
Powered By Must Be Media
<div style="clear: both;">
	<div style="float: left;"><a href="http://www.lancastrian-it.co.uk/" target="_blank">Website Design</a> By Lancastrian IT</div>
	<div style="float: right;">Powered By <a href="http://www.mustbemedia.co.uk/">Must Be Media</a></div>
</div>

 

Other

SearchQuest Footer Tag

SearchQuest: Internet Marketing, SEO

<p>SearchQuest: <a href="http://www.searchquest.co.uk/#internet-marketing" target="_blank">Internet Marketing</a>, <a href="http://www.searchquest.co.uk/#seo" target="_blank">SEO</a></p>

 

Copyright Tag Line

QuantumWarp © 2008

<p>QuantumWarp &copy; 2008</p>
  • &copy; = ©

 

Published in Design Elements, Styling, Effects and Code
Read more...
Saturday, 20 February 2016 20:39

Parallax Scrolling

This scrolls the background images behind modules or any other element you set it to.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer

took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the

leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release

of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

CSS

#content-container {
	background: url(/images/kb/2016/742/workplace.jpg) center center fixed;
	background-size: 100% auto;
}

/* Optional and is just for this demo */
#content-container {
	padding: 10px;
}
#content-container p {		
	color: #999;
	font-size: 25px;
}

JS

setTimeout(function() {
(function($) {
	
//----------------------------------------

/* Parallax Scrolling */
$(document).ready( function() 
	{
		
		// Manually adding settings to an element
		//$('#content-container').attr('data-type', 'background');
		//$('#content-container').attr('data-speed', '3');
		
		// Rules based adding settings to an element
		if ($( "#content-container" ).hasClass( "parallax-background" ))
		{
			$('#jsn-content-top-below').attr('data-type', 'background');
			$('#jsn-content-top-below').attr('data-speed', '3');
		}
		
		/* Trigger the Parallax Scrolling */
		$('div[data-type="background"]').each(function(){
			var $bgobj = $(this); // assigning the object
		 
			$window = $(window);
			$(window).scroll(function() {
				var yPos = -($window.scrollTop() / $bgobj.data('speed')); 
				 
				// Put together our final background position
				var coords = '50% '+ yPos + 'px';
	 
				// Move the background
				$bgobj.css({ backgroundPosition: coords });
			}); 
		});

	});	
	
//----------------------------------------	

})(jQuery);
}, 0);

HTML

<div id="content-container" class="parallax-background">
	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer</p>
	<p>took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the</p>
	<p>leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release</p>
	<p>of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

 

Published in Styled Elements
Read more...
Saturday, 20 February 2016 20:33

JSN Mini Code

This is the Raw Homepage Code from the Joomlashine Template JSN Mini and is for reference only.

Modern Design

Flat design – currently growing in popularity

Full Documentation

JSN Mini is equipped with a very comprehensive documentation package that will help you with template utilization.

Painless Configuration

You can configure the template the way you like without special technical knowledge

Responsive design

Special built-in design optimized for modern mobile devices such as iPhone, Android and Windows-based mobiles

Multi-language support

Currently, the template supports 14 languages for both front-end and back-end.

Social media integrated

You are free to integrate your social channels without digging into the code

Our latest projects

Minimalist Style

A style that uses pared-down design elements, removing everything in a piece, leaving just the necessary and needed elements

130+ font-icons for many purposes

JSN Mini is also the first JoomlaShine template with 130+ outstanding font icons for you to choose from.

Extended style for three extensions

JSN Mini is well-crafted with extended styles for three extensions: Advanced Portfolio from ExtStore, Kunena and K2.

Joomla! 2.5 &3.x Compatibility

Natively compatible with Joomla! 2.5 & Joomla! 3.x versions

Sticky menu

Sticky menu makes websites quicker to navigate.

Easy to start

JSN PowerAdmin facilitates delightful management and customization your Joomla website with ease and joy.

SEO Optimized

Pure html override and 2-1-3 ordered content presentation help search engines easily crawl the site.

Various Colors

6 color variations including blue, red, green, violet, orange and grey.

Portfolio Design

JSN Mini is dedicated to portfolio websites.

Our Team

Powered by

01

Soldiers

Works

Done

01

Projects

Design

Winning

01

Awards

Client

Quantity

01

And more

CSS

/* ==================== JSN MINI CUSTOM CSS ==================== */
/* ===== GENERAL ===== */
.jsn-demo-page #jsn-mainbody-content {
	display: none;
}
#jsn-logo a {
	padding: 28px 0 28px 20px;
}
.jsn-direction-rtl #jsn-logo a {
	padding: 28px 20px 28px 0;
}
.jsn-demo-page #jsn-topbar,
.jsn-demo-page #jsn-topheader,
.jsn-demo-page #jsn-header,
.jsn-demo-page #jsn-logo {
	position: relative;
	z-index: 1000;
}
.jsn-demo-page #jsn-header.jsn-menu-sticky {
	position: fixed;
}
.jsn-demo-page #jsn-header {
	background-color: transparent;
	transition: background-color 0.5s ease-in-out;
	-moz-transition: background-color 0.5s ease-in-out;
	-webkit-transition: background-color 0.5s ease-in-out;
}
.jsn-demo-page #jsn-header.hasbg {
	background-color: #000;
}
.jsn-demo-page #jsn-promo {
	margin: 0;
	position: relative;
	width: 100%;
}
.jsn-demo-page #jsn-pos-promo {
	width: 100%;
	overflow: hidden;
}
.jsn-demo-page #jsn-promo:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 50;
}
.jsn-demo-page.jsn-color-blue #jsn-promo:before {
	background-color: rgba(30,41,53,0.7);
}
.jsn-demo-page.jsn-color-red #jsn-promo:before {
	background-color: rgba(97,5,0,0.7);
}
.jsn-demo-page.jsn-color-green #jsn-promo:before {
	background-color: rgba(0,76,52,0.7);
}
.jsn-demo-page.jsn-color-orange #jsn-promo:before {
	background-color: rgba(145,58,0,0.7);
}
.jsn-demo-page.jsn-color-violet #jsn-promo:before {
	background-color: rgba(44,24,53,0.7);
}
.jsn-demo-page.jsn-color-grey #jsn-promo:before {
	background-color: rgba(35,38,42,0.7);
}
/* ===== GET IT NOW BUTTON ===== */
#jsn-get-now {
	position: relative;
	-webkit-transform: rotate(90deg);
	   -moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		 -o-transform: rotate(90deg);
			transform: rotate(90deg);
}
#jsn-get-now .link-button.button-color {
	position: absolute;
	border-radius: 0 0 10px 10px;
	padding: 8px 25px 12px;
	font-size: 1.2em;
	white-space: nowrap;
	-webkit-transform: translate(-50%,0);
	   -moz-transform: translate(-50%,0);
		-ms-transform: translate(-50%,0);
		 -o-transform: translate(-50%,0);
			transform: translate(-50%,0);
}
/* ===== PROMO INTRO TEXT ===== */
.jsn-demo-page .promo-intro-text #promo-intro-text {
	text-align: center;
	font-family: 'PT Sans', Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	position: absolute;
	top: 50%;
	margin-top: -60px;
	width: 100%;
	height: 120px;
	max-height: 120px;
	z-index: 500;
}
.jsn-demo-page .promo-intro-text #promo-intro-text h4 {
	font-weight: 300;
	font-size: 1.6em;
	line-height: 30px;
	margin: 0;
	letter-spacing: 3px;
	color: #d5d5d5;
}
.jsn-demo-page .promo-intro-text #promo-intro-text h3 {
	font-weight: bold;
	font-size: 3em;
	margin: 0;
	letter-spacing: 10px;
	color: #fff;
}
.jsn-demo-page .promo-intro-text #promo-intro-text + a.scroll-down {
	position: absolute;
	bottom: 20px;
	left: 50%;
	margin-left: -75px;
	display: block;
	width: 150px;
	padding: 5px 10px;
	background-color: #fff\9;
	background-color: rgba(255,255,255,0.4);
	color: #000;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-size: 12px;
	text-align: center;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	border-radius: 100px;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
	z-index: 200;
	transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
}
.jsn-demo-page .promo-intro-text #promo-intro-text + a.scroll-down:hover {
	background-color: #fff;
}
.ping {
	opacity:0;
	filter: alpha(opacity=0);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	transform: translate(0,-20px);
	-moz-transform: translate(0,-20px);
	-webkit-transform: translate(0,-20px);
	transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
}
.ping.pop {
	opacity:1;
	filter: alpha(opacity=100);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	transform: translate(0,0);
	-moz-transform: translate(0,0);
	-webkit-transform: translate(0,0);
}
/* ===== HOMEPAGE SLIDESHOW ===== */
.jsn-demo-page #jsn-pos-promo {
	position: absolute;
	top: 50%;
}
/* Fix slider images dimension for landscape tablet */
@media only screen and (min-width: 1025px) and (max-width: 1850px), (min-device-width: 1025px) and (max-device-width: 1850px) and (orientation:landscape) {
	.jsn-demo-page .box_skitter,
	.jsn-demo-page .container_skitter,
	.jsn-demo-page .box_skitter .box_clone,
	.jsn-demo-page .box_skitter .image img,
	.jsn-demo-page .box_skitter .box_clone img {
		height: 1280px !important;
		width: 2325px !important;
	}
}
/* Fix slider images dimension for portrait tablet */

/* For general tablet and smartphone */
@media only screen and (max-width: 1024px), (max-device-width: 1024px) {
	
	.jsn-demo-page #jsn-promo{
		height: 675px !important;
	}
}
@media only screen and (max-width: 480px), (max-device-width: 480px) {
	.jsn-demo-page #jsn-promo{
		height: 850px !important;
	}
}
/* Fix slider images dimension for landscape tablet */
@media only screen and (min-width: 1025px) and (max-width: 1850px), (min-device-width: 1025px) and (max-device-width: 1850px) and (orientation:landscape) {
	.jsn-demo-page .box_skitter,
	.jsn-demo-page .container_skitter,
	.jsn-demo-page .box_skitter .box_clone,
	.jsn-demo-page .box_skitter .image img,
	.jsn-demo-page .box_skitter .box_clone img {
		height: 1280px !important;
	}
}
/* Fix slider images dimension for portrait tablet */

/* For general tablet and smartphone */
@media only screen and (max-width: 1024px), (max-device-width: 1024px) {
	.jsn-mobile.jsn-demo-page .box_skitter,
	.jsn-mobile.jsn-demo-page .container_skitter,
	.jsn-mobile.jsn-demo-page .box_skitter .box_clone,
	.jsn-mobile.jsn-demo-page .box_skitter .image img,
	.jsn-mobile.jsn-demo-page .box_skitter .box_clone img,
	.jsn-mobile.jsn-demo-page #jsn-pos-promo {
		height: 768px !important;
		width: 1394px !important;
	}
	.jsn-demo-page #jsn-promo {
		height: auto !important;
	}
	.jsn-demo-page #jsn-pos-promo {
		position: static !important;
		top: 0 !important;
		margin-top: 0 !important;
		height: 768px !important;
	}
}
@media only screen and (max-width: 480px), (max-device-width: 480px) {
	
	.jsn-mobile.jsn-demo-page .box_skitter,
	.jsn-mobile.jsn-demo-page .container_skitter,
	.jsn-mobile.jsn-demo-page .box_skitter .box_clone,
	.jsn-mobile.jsn-demo-page .box_skitter .image img,
	.jsn-mobile.jsn-demo-page .box_skitter .box_clone img,
	.jsn-mobile.jsn-demo-page #jsn-pos-promo {
		height: 480px !important;
		width: 870px !important;
	}
	.jsn-demo-page #jsn-promo {
		height: auto !important;
	}
	.jsn-demo-page #jsn-pos-promo {
		position: static !important;
		top: 0 !important;
		margin-top: 0 !important;
		height: 480px !important;
	}
}
/* ===== CONTENT TOP ===== */
#jsn-content-top {
	background-color: #f5f5f5;
}
#welcome-to-jsn-mini {
	padding: 80px 0;
}
#welcome-to-jsn-mini .welcome .grid-col_inner {
	padding: 0 20px;
}
#welcome-to-jsn-mini .welcome .img img {
	max-width: 100%;
}
  #welcome-to-jsn-mini .welcome .text {
	padding: 140px 0 40px;
}
#welcome-to-jsn-mini .welcome .text .heading {
	text-transform: uppercase;
	letter-spacing: 3px;
	font-size: 1.9em;
}
#welcome-to-jsn-mini .welcome .text .desc {
	margin: 30px 0 40px;
	font-size: 1em;
	line-height: 2em;
	color: #888;
}

/* ===== CONTENT TOP BELOW ===== */
#jsn-content-top-below {
	background: url(../../../media/joomlashine/jsn-mini/custom-html/bg/workplace.jpg) center center fixed;
	background-size: 100% auto;
}
#demo-main-features {
	padding: 30px 0;
}
#demo-main-features .main-features {
	padding: 40px 0;
}
#demo-main-features .main-features .grid-col_inner {
	padding: 0 20px;
}
#demo-main-features .main-features .feature-item [class*="jsn-icon-"] {
	font-size: 2.5em;
}
#demo-main-features .main-features .feature-item .heading {
	color: #fff;
	text-transform: uppercase;
	font-size: 1.2em;
	letter-spacing: 5px;
}
#demo-main-features .main-features .feature-item .desc {
	color: #999;
}

/* ===== USER TOP ===== */
.jsn-demo-page #jsn-pos-user-top {
	border: none;
	padding: 0;
}
.jsn-demo-page #jsn-centercol {
	padding: 0 !important;
}
.jsn-modulecontainer.demo-latest-projects {
	margin-top: 0 !important;
}
#demo-latest-projects .section-heading {
	background-color: #111;
	color: #fff;
	font-size: 1.8em;
	text-transform: uppercase;
	letter-spacing: 5px;
	text-align: center;
	margin: 0;
	padding: 45px 0;
}
.jsn-color-blue #demo-latest-projects .section-heading {
	background-color: #1c8bbe;
}
.jsn-color-red #demo-latest-projects .section-heading {
	background-color: #d85544;
}
.jsn-color-green #demo-latest-projects .section-heading {
	background-color: #139d6b;
}
.jsn-color-orange #demo-latest-projects .section-heading {
	background-color: #c78f23;
}
.jsn-color-violet #demo-latest-projects .section-heading {
	background-color: #8762ae;
}
.jsn-color-grey #demo-latest-projects .section-heading {
	background-color: #333;
}
#demo-latest-projects .latest-projects .grid-col {
	width: 25%;
}
#demo-latest-projects .latest-projects .grid-col_inner {
	margin: 0;
}
#demo-latest-projects .latest-projects .project-item a {
	display: block;
	position: relative;
	z-index: 90;
	top: 0;
	left: 0;
}
#demo-latest-projects .latest-projects .project-item a img {
	max-width: 100%;
	display: block;
}
#demo-latest-projects .latest-projects .project-item {
	position: relative;
	overflow: hidden;
}
#demo-latest-projects .latest-projects .project-item a:before,
#demo-latest-projects .latest-projects .project-item a:after {
	opacity: 0;
	filter: alpha(opacity=0);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
}
#demo-latest-projects .latest-projects .project-item a:before {
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #000\9;
	background-color: rgba(0,0,0,0.75);
	z-index: 100;
}
#demo-latest-projects .latest-projects .project-item a:after {
	content: "\e61e";
	font-family: 'JSN-Mini-Icon';
	font-size: 1.6em;
	position: absolute;
	display: block;
	width: 80px;
	height: 80px;
	line-height: 70px;
	text-align: center;
	color: #fff;
	top: 40%;
	left: 50%;
	margin-top: -40px;
	margin-left: -40px;
	border: 3px solid #fff;
	border-radius: 100%;
	-moz-border-radius: 100%;
	-webkit-border-radius: 100%;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	z-index: 110;
}
#demo-latest-projects .latest-projects .project-item a:hover:before,
#demo-latest-projects .latest-projects .project-item a:hover:after {
	opacity: 1;
	filter: alpha(opacity=100);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
} 
#demo-latest-projects .latest-projects .project-item a:hover:after {
	top: 50%;
}

/* ===== MAINBODY TOP ===== */
/* TABULOUS by http://git.aaronlumsden.com/tabulous.js/ */
#demo-tab-news {
	padding: 50px 0;
}
#demo-tab-news #tabs {
	width: 1100px;
	max-width: 100%;
	margin: 50px auto;
}

#demo-tab-news ul.tabs_title {
	display: inline-block;
	float: right;
	width: 50%;
	margin: 0;
	padding: 20px 0;
	border-left: 1px solid #e1e1e1;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

#demo-tab-news #tabs ul.tabs_title li {
	display: block;
	margin-right: 2px;
	margin: 0;
}

#demo-tab-news #tabs ul.tabs_title li a {
	position: relative;
	display: block;
	padding: 20px 0 20px 60px;
	text-decoration: none;
	color: #aaa;
	text-transform: uppercase;
	letter-spacing: 2px;
	transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
}
#demo-tab-news #tabs ul.tabs_title li a:hover,
#demo-tab-news #tabs ul.tabs_title li a.tabulous_active {
	color: #000;
}
#demo-tab-news #tabs ul.tabs_title li a:before {
	content: "";
	display: block;
	position: absolute;
	left: -10px;
	width: 9px;
	height: 9px;
	background-color: #ddd;
	border: 5px solid #fff;
	border-radius: 100%;
	-moz-border-radius: 100%;
	-webkit-border-radius: 100%;
	transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-webkit-transition: all 0.4s ease-in-out;
}
#demo-tab-news #tabs ul.tabs_title li a.tabulous_active:before {
	transform: scale(1.5,1.5);
	-moz-transform: scale(1.5,1.5);
	-webkit-transform: scale(1.5,1.5);
}
.jsn-color-blue #demo-tab-news #tabs ul.tabs_title li a.tabulous_active:before {
	background-color: #34a7c8;
}
.jsn-color-red #demo-tab-news #tabs ul.tabs_title li a.tabulous_active:before {
	background-color: #e95e53;
}
.jsn-color-green #demo-tab-news #tabs ul.tabs_title li a.tabulous_active:before {
	background-color: #40af6f;
}
.jsn-color-orange #demo-tab-news #tabs ul.tabs_title li a.tabulous_active:before {
	background-color: #f39c12;
}
.jsn-color-violet #demo-tab-news #tabs ul.tabs_title li a.tabulous_active:before {
	background-color: #b485c7;
}
.jsn-color-grey #demo-tab-news #tabs ul.tabs_title li a.tabulous_active:before {
	background-color: #222;
}

#demo-tab-news #tabs_container {
	overflow: hidden;
	float: left;
	position: relative;
	padding-top: 40px;
	width: 50%;
	color: #999;
	line-height: 2em;
}
#demo-tab-news #tabs_container > div {
	margin-right: 60px;
}
#demo-tab-news #tabs_container .news-title {
	text-transform: uppercase;
	color: #000;
	letter-spacing: 5px;
	font-size: 1.8em;
	margin: 0 0 30px;
}

.transition {
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;

	-webkit-transition-delay: .3s;
	-moz-transition-delay: .3s;
	-o-transition-delay: .3s;
	-ms-transition-delay: .3s;
	transition-delay: .3s;
}

.make_transist {
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.hidescale {
	-webkit-transform: scale(0.9);
	-moz-transform: scale(0.9);
	-o-transform: scale(0.9);
	-ms-transform: scale(0.9);
	transform: scale(0.9);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	filter: alpha(opacity=0);
	opacity: 0;
}

.showscale {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;

	-webkit-transition-delay: .3s;
	-moz-transition-delay: .3s;
	-o-transition-delay: .3s;
	-ms-transition-delay: .3s;
	transition-delay: .3s;
}

.hideleft {
	-webkit-transform: translateX(-100%);
	-moz-transform: translateX(-100%);
	-o-transform: translateX(-100%);
	-ms-transform: translateX(-100%);
	transform: translateX(-100%);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
}

.showleft {
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	-o-transform: translateX(0px);
	-ms-transform: translateX(0px);
	transform: translateX(0px);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;

	-webkit-transition-delay: .3s;
	-moz-transition-delay: .3s;
	-o-transition-delay: .3s;
	-ms-transition-delay: .3s;
	transition-delay: .3s;
}

.hidescaleup {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
}

.showscaleup {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;

	-webkit-transition-delay: .3s;
	-moz-transition-delay: .3s;
	-o-transition-delay: .3s;
	-ms-transition-delay: .3s;
	transition-delay: .3s;
}

.hideflip {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;

	-webkit-transform: rotatey(-90deg) scale(1.1);
	-moz-transform: rotatey(-90deg) scale(1.1);
	-o-transform: rotatey(-90deg) scale(1.1);
	-ms-transform: rotatey(-90deg) scale(1.1);
	transform: rotatey(-90deg) scale(1.1);

	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}

.showflip {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;

	-webkit-transition-delay: .3s;
	-moz-transition-delay: .3s;
	-o-transition-delay: .3s;
	-ms-transition-delay: .3s;
	transition-delay: .3s;

	-webkit-transform: rotatey(0deg) scale(1);
	-moz-transform: rotatey(0deg) scale(1);
	-o-transform: rotatey(0deg) scale(1);
	-ms-transform: rotatey(0deg) scale(1);
	transform: rotatey(0deg) scale(1);

	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}

.tabulousclear {
	display: block;
	clear: both;
}

/* FEATURE GRAPH */
.jsn-demo-page #demo-feature-graph {
	padding: 50px 0;
	background-color: #f6fafc;
}
.jsn-demo-page #demo-feature-graph .feature-graph {
	padding: 0;
}
.jsn-demo-page #demo-feature-graph .feature-graph:first-child {
	border-bottom: 3px solid #cbd4d8;
}
.jsn-demo-page #demo-feature-graph .feature-graph .graph-item {
	overflow: hidden;
}
.jsn-demo-page #demo-feature-graph .feature-graph .graph-item .graph-item-inner {
	padding: 60px 0;
	width: 400px;
	max-width: 100%;
}
.jsn-demo-page #demo-feature-graph .feature-graph .graph-item [class*="jsn-icon-"] {
	position: relative;
	float: left;
	display: block;
	width: 75px;
	height: 75px;
	color: #fff;
	background-color: #222;
	font-size: 2.5em;
	line-height: 72px;
	text-align: center;
	border-radius: 100%;
	-moz-border-radius: 100%;
	-webkit-border-radius: 100%;
	transform: scale(1,1);
	-moz-transform: scale(1,1);
	-webkit-transform: scale(1,1);
	transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
}
.jsn-demo-page #demo-feature-graph .feature-graph .graph-item-inner:hover [class*="jsn-icon-"] {
	transform: scale(1.5,1.5);
	-moz-transform: scale(1.5,1.5);
	-webkit-transform: scale(1.5,1.5);
}
.jsn-demo-page #demo-feature-graph .feature-graph .item1 [class*="jsn-icon-"] {
	background-color: #5bace2;
}
.jsn-demo-page #demo-feature-graph .feature-graph .item2 [class*="jsn-icon-"] {
	background-color: #6ece97;
}
.jsn-demo-page #demo-feature-graph .feature-graph .item3 [class*="jsn-icon-"] {
	background-color: #e9974e;
}
.jsn-demo-page #demo-feature-graph .feature-graph .item4 [class*="jsn-icon-"] {
	background-color: #c08dd7;
}
.jsn-demo-page #demo-feature-graph .feature-graph .graph-item .text {
	padding-left: 120px;
}
.jsn-demo-page #demo-feature-graph .feature-graph .graph-item .text .heading {
	text-transform: uppercase;
	font-size: 1.65em;
	line-height: 1.65em;
	margin: 0;
	padding: 20px 0 0;
	letter-spacing: 3px;
}
.jsn-demo-page #demo-feature-graph .feature-graph .item1 .graph-item-inner,
.jsn-demo-page #demo-feature-graph .feature-graph .item3 .graph-item-inner {
	float: right;
}
.jsn-demo-page #demo-feature-graph .feature-graph .item2 .graph-item-inner,
.jsn-demo-page #demo-feature-graph .feature-graph .item4 .graph-item-inner {
	float: left;
}
.jsn-demo-page #demo-feature-graph .feature-graph .item1 .graph-item-inner {
	padding-right: 150px;
}
.jsn-desktop.jsn-demo-page #demo-feature-graph .feature-graph .item1 .graph-item-inner {
	padding-right: 0;
}
.jsn-demo-page #demo-feature-graph .feature-graph .item2 .graph-item-inner {
	padding-left: 50px;
}
.jsn-demo-page #demo-feature-graph .feature-graph .item3 .graph-item-inner {
	padding-right: 0;
	width: 350px;
}
.jsn-demo-page #demo-feature-graph .feature-graph .item4 .graph-item-inner {
	padding-left: 100px;
}
.jsn-demo-page #demo-feature-graph .feature-graph .graph-item [class*="jsn-icon-"]:after {
	content: "";
	display: block;
	position: absolute;
	width: 3px;
	height: 200px;
	background-color: #cbd4d8;
	left: 50%;
	margin-left: -2px;
}
.jsn-demo-page #demo-feature-graph .feature-graph .item1 [class*="jsn-icon-"]:after,
.jsn-demo-page #demo-feature-graph .feature-graph .item2 [class*="jsn-icon-"]:after {
	top: 90px;
}
.jsn-demo-page #demo-feature-graph .feature-graph .item3 [class*="jsn-icon-"]:after,
.jsn-demo-page #demo-feature-graph .feature-graph .item4 [class*="jsn-icon-"]:after {
	bottom: 90px;
}

/* ===== COUNTING UP STATISTICS ===== */
.jsn-demo-page #jsn-usermodules1,
.jsn-demo-page #jsn-usermodules2 {
	border: none;
	padding: 0;
}
.jsn-demo-page #demo-countingup-stats {
	background: #2e353c url(../../../media/joomlashine/jsn-mini/custom-html/bg/triangles.jpg) center center fixed;
	background-size: 100% auto;
	color: #fff;
}
.jsn-demo-page #demo-countingup-stats {
	width: 1000px;
	max-width: 100%;
	margin: 0 auto;
	padding: 100px 0;
}
.jsn-demo-page #demo-countingup-stats .stat-group {
	text-align: center;
	padding: 0 30px;
	border-right: 1px solid rgba(255,255,255,0.1);
}
.jsn-demo-page #demo-countingup-stats .grid-lastcol .stat-group {
	border-right: none;
}
.jsn-demo-page #demo-countingup-stats .stat-group .heading {
	text-transform: uppercase;
	letter-spacing: 3px;
	font-size: 2.2em;
	line-height: 36px;
	margin: 0;
}
.jsn-demo-page #demo-countingup-stats .stat-group .sub-heading {
	text-transform: uppercase;
	letter-spacing: 3px;
	font-size: 1.5em;
	line-height: 20px;
	margin: 0;
	color: #ddd;
	font-weight: 400;
}
.jsn-demo-page #demo-countingup-stats .stat-group .counting-number {
	font-family: 'PT Sans', Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 8.5em;
	line-height: 90px;
	padding: 30px 0 20px;
	text-transform: uppercase;
	color: #fff;
}
.jsn-demo-page #demo-countingup-stats .stat-group .desc {
	text-transform: uppercase;
	font-size: 1.3em;
	letter-spacing: 4px;
	line-height: 30px;
	margin: 0;
	color: #ddd;
}

/* ===== PROMOTION BOX ===== */
.jsn-demo-page #demo-promotion-box {
	padding: 40px 0;
}
.jsn-demo-page #demo-promotion-box .promotion-box h3 {
	letter-spacing: 2px;
	color: #666;
}
.jsn-demo-page #demo-promotion-box .promotion-box a.link-button {
	float: right;
}

/* ===== MAP INFO ===== */
#demo-map-info .map-wrapper {
	width: 100%;
	height: 160px;
	margin: 15px 0;
}

/* ===== SUBCRIPTION FORM ===== */
/* =============== DEMO CONTACT INFO =============== */
.demo-contact-info .jsn-modulecontent {
	padding: 12px 0;
}
.demo-contact-info .jsn-uniform .jsn-row-container {
	margin: 0;
}
.demo-contact-info .jsn-uniform .jsn-row-container .form-actions {
	margin: 15px 0;
	padding: 0;
}
.demo-contact-info .jsn-uniform .jsn-row-container .form-actions + .jsn-text-center {
	display: none;
}
.demo-contact-info .jsn-uniform .jsn-row-container .form-actions .btn-toolbar {
	margin: 0;
}
.demo-contact-info .jsn-uniform .jsn-row-container .form-actions .btn-toolbar .jsn-form-submit {
	background: #6ece97;
	box-shadow: none;
	border: none;
	color: #fff;
	text-shadow: none;
	font-family: 'PT Sans', Arial, Helvetica, sans-serif;
	cursor: pointer;
	margin: 0;
	padding: 6px 30px;
	display: inline-block;
	text-decoration: none;
	border-radius: 100px;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: 400 !important;
	transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
}
.demo-contact-info .jsn-uniform .jsn-row-container .form-actions .btn-toolbar .jsn-form-submit:hover {
	background-color: #439968;
}
.demo-contact-info .jsn-uniform .jsn-row-container .control-group {
	padding: 0 !important;
}
.demo-contact-info .jsn-uniform .jsn-row-container .control-group.ui-state-highlight {
	border: none !important;
	background: none !important;
}
.demo-contact-info .jsn-uniform .jsn-row-container label {
	display: none !important;
}

.demo-contact-info .jsn-uniform .jsn-row-container input.email {
	border: none;
	border-radius: 0;
	margin: 0;
	padding: 15px 10px;
}
.demo-contact-info .jsn-uniform .demo-contact-desc {
	margin: 5px 0;
	padding: 10px;
}

/* ===== WAYPOINT ONSCROLL ACTION ===== */
/* Waypoint by http://imakewebthings.com/jquery-waypoints/ */

/* Declare scale-fade animation */
@keyframes scale-fade
	{
		0% 		{ 	transform:scale(0.5);
					opacity:0;
					filter: alpha(opacity=0);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
				}
		100% 	{ 	transform:scale(1);
					opacity:1;
					filter: alpha(opacity=100);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				}
	}
@-moz-keyframes scale-fade
	{
		0% 		{ 	-moz-transform:scale(0.5);
					opacity:0;
					filter: alpha(opacity=0);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
				}
		100% 	{ 	-moz-transform:scale(1);
					opacity:1;
					filter: alpha(opacity=100);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				}
	}
@-webkit-keyframes scale-fade
	{
		0% 		{ 	-webkit-transform:scale(0.5);
					opacity:0;
					filter: alpha(opacity=0);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
				}
		100% 	{ 	-webkit-transform:scale(1);
					opacity:1;
					filter: alpha(opacity=100);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				}
	}

/* Declare translate-fade animation */
@keyframes translate-fade
	{
		0% 		{ 	transform:translate(0,50px);
					opacity:0;
					filter: alpha(opacity=0);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
				}
		100% 	{ 	transform:translate(0,0);
					opacity:1;
					filter: alpha(opacity=100);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				}
	}
@-moz-keyframes translate-fade
	{
		0% 		{ 	-moz-transform:translate(0,50px);
					opacity:0;
					filter: alpha(opacity=0);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
				}
		100% 	{ 	-moz-transform:translate(0,0);
					opacity:1;
					filter: alpha(opacity=100);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				}
	}
@-webkit-keyframes translate-fade
	{
		0% 		{ 	-webkit-transform:translate(0,50px);
					opacity:0;
					filter: alpha(opacity=0);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
				}
		100% 	{ 	-webkit-transform:translate(0,0);
					opacity:1;
					filter: alpha(opacity=100);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				}
	}

.appearing .project-item,
.appearing .main-features .feature-item [class*="jsn-icon-"],
.appearing .graph-item .graph-item-inner,
.appearing .stat-group .counting-number {
	opacity:0;
	filter: alpha(opacity=0);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	-moz-transform: scale(0.5);
	-webkit-transform: scale(0.5);
	-ms-transform: scale(0.5);
	transform: scale(0.5);
	transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
}
.appearing.scroll-action .project-item,
.appearing.scroll-action .main-features .feature-item [class*="jsn-icon-"],
.appearing.scroll-action .graph-item .graph-item-inner,
.appearing.scroll-action .stat-group .counting-number  {
	-webkit-animation: scale-fade 0.8s 1 cubic-bezier(0,.61,.46,1.33);
	-moz-animation: scale-fade 0.8s 1 cubic-bezier(0,.61,.46,1.33);
	animation: scale-fade 0.8s 1 cubic-bezier(0,.61,.46,1.33);
	opacity:1;
	filter: alpha(opacity=100);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	-moz-transform: scale(1);
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

.appearing .apple-devices {
	opacity:0;
	filter: alpha(opacity=0);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	-moz-transform: translate(0,50px);
	-webkit-transform: translate(0,50px);
	-ms-transform: translate(0,50px);
	transform: translate(0,50px);
	transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
}
.appearing.scroll-action .apple-devices  {
	-webkit-animation: translate-fade 1s 1 ease-in-out;
	-moz-animation: translate-fade 1s 1 ease-in-out;
	animation: translate-fade 1s 1 ease-in-out;
	opacity:1;
	filter: alpha(opacity=100);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	-moz-transform: translate(0,0);
	-webkit-transform: translate(0,0);
	-ms-transform: translate(0,0);
	transform: translate(0,0);
}
.scroll-down {
}
.scroll-down.scroll-action {
	opacity:0;
	filter: alpha(opacity=0);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}


/* ===== RESPONSIVE OPTIMIZING ===== */
@media only screen and (max-width: 1100px), (max-device-width: 1100px) {
	.jsn-desktop #demo-tab-news #tabs_container > div {
		margin-left: 60px;
	}
	.jsn-desktop.jsn-demo-page #demo-feature-graph {
		padding: 50px;
	}
	.jsn-desktop #jsn-pos-content-bottom-below {
		padding: 80px 20px;
	}
}
@media only screen and (max-width: 960px), (max-device-width: 960px) {

	.jsn-mobile.jsn-demo-page #jsn-usermodules1,
	.jsn-mobile.jsn-demo-page #jsn-usermodules2 {
		padding: 0 !important;
	}

	/* Welcome to JSN Mini */
	.jsn-mobile.jsn-demo-page #welcome-to-jsn-mini .welcome .text {
		padding: 0;
	}

	/* Demo main features */
	.jsn-mobile.jsn-demo-page #demo-main-features .main-features {
		padding: 30px 0;
	}

	/* Latest project */
	.jsn-mobile.jsn-demo-page #jsn-pos-user-top {
		padding: 0 !important;
	}

	.jsn-mobile #demo-tab-news {
		padding: 30px 50px;
	}
	
	/* Feature graph */
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .graph-item .graph-item-inner {
		width: 300px;
	}
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .item1 .graph-item-inner {
		padding-right: 50px;
	}
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .item2 .graph-item-inner {
		padding-left: 0;
	}
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .item3 .graph-item-inner {
		padding-right: 0;
		width: 280px;
	}
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .item4 .graph-item-inner {
		padding-left: 50px;
	}

	/* Counting Stats */
	.jsn-mobile.jsn-demo-page #demo-countingup-stats div.grid-layout4 div.grid-col {
		width: 24.96%;
	}
	.jsn-mobile.jsn-demo-page #demo-countingup-stats .stat-group .heading {
		font-size: 1.4em;
	}
	.jsn-mobile.jsn-demo-page #demo-countingup-stats .stat-group .counting-number {
		font-size: 6em;
	}
	.jsn-mobile.jsn-demo-page #demo-countingup-stats .stat-group .sub-heading,
	.jsn-mobile.jsn-demo-page #demo-countingup-stats .stat-group .desc {
		font-size: 1em;
	}
	
	/* Promotion box */
	.jsn-mobile.jsn-demo-page #demo-promotion-box .promotion-box h3 {
		font-size: 1em;
	}

}

@media only screen and (max-width: 480px), (max-device-width: 480px) {
	.jsn-mobile.jsn-demo-page .promo-intro-text #promo-intro-text h4 {
		font-size: 1.2em;
	}
	.jsn-mobile.jsn-demo-page .promo-intro-text #promo-intro-text h3 {
		font-size: 2em;
	}
	.jsn-mobile #welcome-to-jsn-mini .welcome .text .heading {
		font-size: 1.4em;
		margin-top: 20px;
	}
	.jsn-mobile #jsn-content-top-below {
		background-size: 300% auto;
	}
	.jsn-mobile.jsn-demo-page #demo-main-features .main-features {
		padding: 20px;
	}
	.jsn-mobile.jsn-demo-page #demo-main-features .main-features .grid-col {
		margin-bottom: 30px;
	}
	.jsn-mobile #demo-latest-projects .latest-projects .grid-col {
		width: 100%;
	}
	.jsn-mobile #demo-latest-projects .section-heading {
		font-size: 1.2em;
		padding: 30px 0;
	}
	.jsn-mobile #demo-tab-news #tabs_container {
		width: 89%;
		padding-top: 0;
	}
	.jsn-mobile #demo-tab-news ul.tabs_title {
		width: 10%;
	}
	.jsn-mobile #demo-tab-news #tabs ul.tabs_title li a {
		text-indent: -1000px;
		padding-left: 0px;
	}
	.jsn-mobile #demo-tab-news #tabs_container .news-title {
		font-size: 1.4em;
		margin-bottom: 10px;
	}
	.jsn-mobile #demo-tab-news #tabs_container > div {
		margin-right: 30px;
	}
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .graph-item [class*="jsn-icon-"]:after {
		display: none;
	}
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .graph-item {
		padding: 0 40px;
	}
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .graph-item .graph-item-inner {
		padding: 30px 0;
		float: none;
		width: auto;
		text-align: center;
	}
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph:first-child {
		border: none;
	}
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .graph-item .text {
		padding-left: 0;
	}
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .graph-item .text .heading {
		font-size: 1.2em;
		line-height: 1.8em;
	}
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .graph-item [class*="jsn-icon-"] {
		float: none;
		margin: 0 auto;
	}
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .graph-item-inner:hover [class*="jsn-icon-"] {
		transform: none;
		-moz-transform: none;
		-webkit-transform: none;
	}
	.jsn-mobile.jsn-demo-page .demo-countingup-stats {
		background-size: 300% auto;
	}
	.jsn-mobile.jsn-demo-page #demo-countingup-stats {
		padding: 60px 0;
	}
	.jsn-mobile.jsn-demo-page #demo-countingup-stats div.grid-layout4 div.grid-col {
		width: 100%;
	}
	.jsn-mobile.jsn-demo-page #demo-countingup-stats .stat-group {
		padding: 30px 0;
		margin: 0 40px;
		border-right: none;
		border-bottom: 1px solid rgba(255,255,255,0.1);
	}
	.jsn-mobile.jsn-demo-page #demo-countingup-stats .stat-group .counting-number {
		padding: 10px 0 0;
	}
	.jsn-mobile.jsn-demo-page #demo-promotion-box .promotion-box a.link-button {
		float: none;
		margin-bottom: 20px;
	}
	.jsn-mobile #jsn-pos-content-bottom-below {
		padding: 60px 40px 40px !important;
	}
	.jsn-mobile #jsn-footermodules {
		padding: 60px 40px !important;
	}
	.jsn-mobile #jsn-pos-content-bottom-below div.jsn-modulecontainer {
		margin-top: 50px;
	}
	.jsn-mobile #jsn-pos-content-bottom-below div.jsn-modulecontainer:first-child {
		margin-top: 0;
	}
}

CSS Fixes for this template

/* Latest Projects - Correct gap between images in mobile view for this template */
@media only screen and (max-width: 480px), (max-device-width: 480px) {  
	div.grid-col {
		margin-bottom: 0px;
	}
}

/* Tabulous - Fixes White / Missing Balls */
/* Correct an applied global rule - template.css line 8 */ 
	*:before,
	*:after {
		box-sizing: content-box;
		-moz-box-sizing: content-box;
		-webkit-box-sizing: content-box;
}

Javascript

/* ==================== JSN MINI CUSTOM JS ==================== */

// i have seperated out each complete function with //----------------------------------------
// use the whole file for Mini effects and just delete stuff you do not want

setTimeout(function() {
(function($) {
	
//----------------------------------------

// Tabulous - The Vertical Line Thing

/* Set negative margin-top value to #jsn-promo */
/* Tab function */
(function ( $, window, document, undefined ) {

	var pluginName = "tabulous",
		defaults = {
			effect: 'scale'
		};

	   // $('<style>body { background-color: red; color: white; }</style>').appendTo('head');

	function Plugin( element, options ) {
		this.element = element;
		this.$elem = $(this.element);
		this.options = $.extend( {}, defaults, options );
		this._defaults = defaults;
		this._name = pluginName;
		this.init();
	}

	Plugin.prototype = {

		init: function() {

			var links = this.$elem.find('ul li a');
			var firstchild = this.$elem.find('li:first-child').find('a');
			var lastchild = this.$elem.find('li:last-child').after('<span class="tabulousclear"></span>');

			if (this.options.effect == 'scale') {
			 tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hidescale');
			} else if (this.options.effect == 'slideLeft') {
				 tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hideleft');
			} else if (this.options.effect == 'scaleUp') {
				 tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hidescaleup');
			} else if (this.options.effect == 'flip') {
				 tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hideflip');
			}

			var firstdiv = this.$elem.find('#tabs_container');
			var firstdivheight = firstdiv.find('div:first').height();

			var alldivs = this.$elem.find('div:first').find('div');

			alldivs.css({'position': 'absolute'});

			firstdiv.css('height',firstdivheight+'px');

			firstchild.addClass('tabulous_active');

			links.bind('click', {myOptions: this.options}, function(e) {
				e.preventDefault();

				var $options = e.data.myOptions;
				var effect = $options.effect;

				var mythis = $(this);
				var thisform = mythis.parent().parent().parent();
				var thislink = mythis.attr('href');


				firstdiv.addClass('transition');

				links.removeClass('tabulous_active');
				mythis.addClass('tabulous_active');
				thisdivwidth = thisform.find('div'+thislink).height();

				if (effect == 'scale') {
					alldivs.removeClass('showscale').addClass('make_transist').addClass('hidescale');
					thisform.find('div'+thislink).addClass('make_transist').addClass('showscale');
				} else if (effect == 'slideLeft') {
					alldivs.removeClass('showleft').addClass('make_transist').addClass('hideleft');
					thisform.find('div'+thislink).addClass('make_transist').addClass('showleft');
				} else if (effect == 'scaleUp') {
					alldivs.removeClass('showscaleup').addClass('make_transist').addClass('hidescaleup');
					thisform.find('div'+thislink).addClass('make_transist').addClass('showscaleup');
				} else if (effect == 'flip') {
					alldivs.removeClass('showflip').addClass('make_transist').addClass('hideflip');
					thisform.find('div'+thislink).addClass('make_transist').addClass('showflip');
				}

				firstdiv.css('height',thisdivwidth+'px');

			});         
			
		},

		yourOtherFunction: function(el, options) {
			// some logic
		}
	};

	// A really lightweight plugin wrapper around the constructor,
	// preventing against multiple instantiations
	$.fn[pluginName] = function ( options ) {
		return this.each(function () {
			new Plugin( this, options );
		});
	};

})( jQuery, window, document );

//----------------------------------------

// intiates the Waypoints codebase
// This causes animations to be paused until triggered by the Waypoints code
// Waypoints are configured later


/* Waypoints */
(function(){var t=[].indexOf||function(t){for(var e=0,n=this.length;e<n;e++){if(e in this&&this[e]===t)return e}return-1},e=[].slice;(function(t,e){if(typeof define==="function"&&define.amd){return define("waypoints",["jquery"],function(n){return e(n,t)})}else{return e(t.jQuery,t)}})(window,function(n,r){var i,o,l,s,f,u,c,a,h,d,p,y,v,w,g,m;i=n(r);a=t.call(r,"ontouchstart")>=0;s={horizontal:{},vertical:{}};f=1;c={};u="waypoints-context-id";p="resize.waypoints";y="scroll.waypoints";v=1;w="waypoints-waypoint-ids";g="waypoint";m="waypoints";o=function(){function t(t){var e=this;this.$element=t;this.element=t[0];this.didResize=false;this.didScroll=false;this.id="context"+f++;this.oldScroll={x:t.scrollLeft(),y:t.scrollTop()};this.waypoints={horizontal:{},vertical:{}};this.element[u]=this.id;c[this.id]=this;t.bind(y,function(){var t;if(!(e.didScroll||a)){e.didScroll=true;t=function(){e.doScroll();return e.didScroll=false};return r.setTimeout(t,n[m].settings.scrollThrottle)}});t.bind(p,function(){var t;if(!e.didResize){e.didResize=true;t=function(){n[m]("refresh");return e.didResize=false};return r.setTimeout(t,n[m].settings.resizeThrottle)}})}t.prototype.doScroll=function(){var t,e=this;t={horizontal:{newScroll:this.$element.scrollLeft(),oldScroll:this.oldScroll.x,forward:"right",backward:"left"},vertical:{newScroll:this.$element.scrollTop(),oldScroll:this.oldScroll.y,forward:"down",backward:"up"}};if(a&&(!t.vertical.oldScroll||!t.vertical.newScroll)){n[m]("refresh")}n.each(t,function(t,r){var i,o,l;l=[];o=r.newScroll>r.oldScroll;i=o?r.forward:r.backward;n.each(e.waypoints[t],function(t,e){var n,i;if(r.oldScroll<(n=e.offset)&&n<=r.newScroll){return l.push(e)}else if(r.newScroll<(i=e.offset)&&i<=r.oldScroll){return l.push(e)}});l.sort(function(t,e){return t.offset-e.offset});if(!o){l.reverse()}return n.each(l,function(t,e){if(e.options.continuous||t===l.length-1){return e.trigger([i])}})});return this.oldScroll={x:t.horizontal.newScroll,y:t.vertical.newScroll}};t.prototype.refresh=function(){var t,e,r,i=this;r=n.isWindow(this.element);e=this.$element.offset();this.doScroll();t={horizontal:{contextOffset:r?0:e.left,contextScroll:r?0:this.oldScroll.x,contextDimension:this.$element.width(),oldScroll:this.oldScroll.x,forward:"right",backward:"left",offsetProp:"left"},vertical:{contextOffset:r?0:e.top,contextScroll:r?0:this.oldScroll.y,contextDimension:r?n[m]("viewportHeight"):this.$element.height(),oldScroll:this.oldScroll.y,forward:"down",backward:"up",offsetProp:"top"}};return n.each(t,function(t,e){return n.each(i.waypoints[t],function(t,r){var i,o,l,s,f;i=r.options.offset;l=r.offset;o=n.isWindow(r.element)?0:r.$element.offset()[e.offsetProp];if(n.isFunction(i)){i=i.apply(r.element)}else if(typeof i==="string"){i=parseFloat(i);if(r.options.offset.indexOf("%")>-1){i=Math.ceil(e.contextDimension*i/100)}}r.offset=o-e.contextOffset+e.contextScroll-i;if(r.options.onlyOnScroll&&l!=null||!r.enabled){return}if(l!==null&&l<(s=e.oldScroll)&&s<=r.offset){return r.trigger([e.backward])}else if(l!==null&&l>(f=e.oldScroll)&&f>=r.offset){return r.trigger([e.forward])}else if(l===null&&e.oldScroll>=r.offset){return r.trigger([e.forward])}})})};t.prototype.checkEmpty=function(){if(n.isEmptyObject(this.waypoints.horizontal)&&n.isEmptyObject(this.waypoints.vertical)){this.$element.unbind([p,y].join(" "));return delete c[this.id]}};return t}();l=function(){function t(t,e,r){var i,o;if(r.offset==="bottom-in-view"){r.offset=function(){var t;t=n[m]("viewportHeight");if(!n.isWindow(e.element)){t=e.$element.height()}return t-n(this).outerHeight()}}this.$element=t;this.element=t[0];this.axis=r.horizontal?"horizontal":"vertical";this.callback=r.handler;this.context=e;this.enabled=r.enabled;this.id="waypoints"+v++;this.offset=null;this.options=r;e.waypoints[this.axis][this.id]=this;s[this.axis][this.id]=this;i=(o=this.element[w])!=null?o:[];i.push(this.id);this.element[w]=i}t.prototype.trigger=function(t){if(!this.enabled){return}if(this.callback!=null){this.callback.apply(this.element,t)}if(this.options.triggerOnce){return this.destroy()}};t.prototype.disable=function(){return this.enabled=false};t.prototype.enable=function(){this.context.refresh();return this.enabled=true};t.prototype.destroy=function(){delete s[this.axis][this.id];delete this.context.waypoints[this.axis][this.id];return this.context.checkEmpty()};t.getWaypointsByElement=function(t){var e,r;r=t[w];if(!r){return[]}e=n.extend({},s.horizontal,s.vertical);return n.map(r,function(t){return e[t]})};return t}();d={init:function(t,e){var r;e=n.extend({},n.fn[g].defaults,e);if((r=e.handler)==null){e.handler=t}this.each(function(){var t,r,i,s;t=n(this);i=(s=e.context)!=null?s:n.fn[g].defaults.context;if(!n.isWindow(i)){i=t.closest(i)}i=n(i);r=c[i[0][u]];if(!r){r=new o(i)}return new l(t,r,e)});n[m]("refresh");return this},disable:function(){return d._invoke.call(this,"disable")},enable:function(){return d._invoke.call(this,"enable")},destroy:function(){return d._invoke.call(this,"destroy")},prev:function(t,e){return d._traverse.call(this,t,e,function(t,e,n){if(e>0){return t.push(n[e-1])}})},next:function(t,e){return d._traverse.call(this,t,e,function(t,e,n){if(e<n.length-1){return t.push(n[e+1])}})},_traverse:function(t,e,i){var o,l;if(t==null){t="vertical"}if(e==null){e=r}l=h.aggregate(e);o=[];this.each(function(){var e;e=n.inArray(this,l[t]);return i(o,e,l[t])});return this.pushStack(o)},_invoke:function(t){this.each(function(){var e;e=l.getWaypointsByElement(this);return n.each(e,function(e,n){n[t]();return true})});return this}};n.fn[g]=function(){var t,r;r=arguments[0],t=2<=arguments.length?e.call(arguments,1):[];if(d[r]){return d[r].apply(this,t)}else if(n.isFunction(r)){return d.init.apply(this,arguments)}else if(n.isPlainObject(r)){return d.init.apply(this,[null,r])}else if(!r){return n.error("jQuery Waypoints needs a callback function or handler option.")}else{return n.error("The "+r+" method does not exist in jQuery Waypoints.")}};n.fn[g].defaults={context:r,continuous:true,enabled:true,horizontal:false,offset:0,triggerOnce:false};h={refresh:function(){return n.each(c,function(t,e){return e.refresh()})},viewportHeight:function(){var t;return(t=r.innerHeight)!=null?t:i.height()},aggregate:function(t){var e,r,i;e=s;if(t){e=(i=c[n(t)[0][u]])!=null?i.waypoints:void 0}if(!e){return[]}r={horizontal:[],vertical:[]};n.each(r,function(t,i){n.each(e[t],function(t,e){return i.push(e)});i.sort(function(t,e){return t.offset-e.offset});r[t]=n.map(i,function(t){return t.element});return r[t]=n.unique(r[t])});return r},above:function(t){if(t==null){t=r}return h._filter(t,"vertical",function(t,e){return e.offset<=t.oldScroll.y})},below:function(t){if(t==null){t=r}return h._filter(t,"vertical",function(t,e){return e.offset>t.oldScroll.y})},left:function(t){if(t==null){t=r}return h._filter(t,"horizontal",function(t,e){return e.offset<=t.oldScroll.x})},right:function(t){if(t==null){t=r}return h._filter(t,"horizontal",function(t,e){return e.offset>t.oldScroll.x})},enable:function(){return h._invoke("enable")},disable:function(){return h._invoke("disable")},destroy:function(){return h._invoke("destroy")},extendFn:function(t,e){return d[t]=e},_invoke:function(t){var e;e=n.extend({},s.vertical,s.horizontal);return n.each(e,function(e,n){n[t]();return true})},_filter:function(t,e,r){var i,o;i=c[n(t)[0][u]];if(!i){return[]}o=[];n.each(i.waypoints[e],function(t,e){if(r(i,e)){return o.push(e)}});o.sort(function(t,e){return t.offset-e.offset});return n.map(o,function(t){return t.element})}};n[m]=function(){var t,n;n=arguments[0],t=2<=arguments.length?e.call(arguments,1):[];if(h[n]){return h[n].apply(null,t)}else{return h.aggregate.call(null,n)}};n[m].settings={resizeThrottle:100,scrollThrottle:30};return i.on("load.waypoints",function(){return n[m]("refresh")})})}).call(this);

//----------------------------------------

// The 'Counting Up' module with 4 numbers 


/* Count Up */
function countUp(a,b,c,d,e,f){for(var g=0,h=["webkit","moz","ms"],i=0;i<h.length&&!window.requestAnimationFrame;++i)window.requestAnimationFrame=window[h[i]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[h[i]+"CancelAnimationFrame"]||window[h[i]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(a){var c=(new Date).getTime(),d=Math.max(0,16-(c-g)),e=window.setTimeout(function(){a(c+d)},d);return g=c+d,e}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(a){clearTimeout(a)}),this.options=f||{useEasing:!0,useGrouping:!0,separator:",",decimal:"."},""==this.options.separator&&(this.options.useGrouping=!1);var j=this;this.d="string"==typeof a?document.getElementById(a):a,this.startVal=Number(b),this.endVal=Number(c),this.countDown=this.startVal>this.endVal?!0:!1,this.startTime=null,this.timestamp=null,this.remaining=null,this.frameVal=this.startVal,this.rAF=null,this.decimals=Math.max(0,d||0),this.dec=Math.pow(10,this.decimals),this.duration=1e3*e||2e3,this.version=function(){return"1.1.1"},this.easeOutExpo=function(a,b,c,d){return 1024*c*(-Math.pow(2,-10*a/d)+1)/1023+b},this.count=function(a){null===j.startTime&&(j.startTime=a),j.timestamp=a;var b=a-j.startTime;if(j.remaining=j.duration-b,j.options.useEasing)if(j.countDown){var c=j.easeOutExpo(b,0,j.startVal-j.endVal,j.duration);j.frameVal=j.startVal-c}else j.frameVal=j.easeOutExpo(b,j.startVal,j.endVal-j.startVal,j.duration);else if(j.countDown){var c=(j.startVal-j.endVal)*(b/j.duration);j.frameVal=j.startVal-c}else j.frameVal=j.startVal+(j.endVal-j.startVal)*(b/j.duration);j.frameVal=Math.round(j.frameVal*j.dec)/j.dec,j.frameVal=j.countDown?j.frameVal<j.endVal?j.endVal:j.frameVal:j.frameVal>j.endVal?j.endVal:j.frameVal,j.d.innerHTML=j.formatNumber(j.frameVal.toFixed(j.decimals)),b<j.duration?j.rAF=requestAnimationFrame(j.count):null!=j.callback&&j.callback()},this.start=function(a){return j.callback=a,isNaN(j.endVal)||isNaN(j.startVal)?(console.log("countUp error: startVal or endVal is not a number"),j.d.innerHTML="--"):j.rAF=requestAnimationFrame(j.count),!1},this.stop=function(){cancelAnimationFrame(j.rAF)},this.reset=function(){j.startTime=null,cancelAnimationFrame(j.rAF),j.d.innerHTML=j.formatNumber(j.startVal.toFixed(j.decimals))},this.resume=function(){j.startTime=null,j.duration=j.remaining,j.startVal=j.frameVal,requestAnimationFrame(j.count)},this.formatNumber=function(a){a+="";var b,c,d,e;if(b=a.split("."),c=b[0],d=b.length>1?j.options.decimal+b[1]:"",e=/(\d+)(\d{3})/,j.options.useGrouping)for(;e.test(c);)c=c.replace(e,"$1"+j.options.separator+"$2");return c+d},j.d.innerHTML=j.formatNumber(j.startVal.toFixed(j.decimals))}

/* i think this set the physical dimensions in readyness for Counting Up */
function setHeightToHeaderElement()
	{
		var height = $(window).height();
		var TopHeaderHeight = 0;
		var HeaderHeight = 0;
		var TopBarHeight = 0;
		var PosPromoHeight = 0;
		if (typeof $('#jsn-topheader') !== 'undefined')
		{
			var TopHeaderHeight = $('#jsn-topheader').outerHeight();
		}
		if (typeof $('#jsn-header') !== 'undefined')
		{
			var HeaderHeight = $('#jsn-header').outerHeight();
		}

		if (typeof $('#jsn-topbar') !== 'undefined')
		{
			var TopBarHeight = $('#jsn-topbar').outerHeight();
		}
		if (typeof $('#jsn-pos-promo') !== 'undefined')
		{
			var PosPromoHeight = $('#jsn-pos-promo').outerHeight();
		}	
		var topMarginOffsetPromo =  - (TopHeaderHeight + HeaderHeight + TopBarHeight);
		var topMarginOffsetIS = - (height / 2);
		$( '#jsn-promo' ).css('margin-top',topMarginOffsetPromo+'px'); // Set negative margin value for #jsn promo
		$( '#jsn-promo' ).height(height); // Set height to #jsn-promo equals to height of windows
		$( '#jsn-pos-promo' ).css('margin-top',topMarginOffsetIS+'px'); // Set margin-top to #jsn-pos-promo to vertically align it
		$( '#jsn-pos-promo' ).height(height);
	}

//----------------------------------------
	
/* Perform smooth scrolling */
$(document).ready(function ()
		{
	$('a.smooth[href*=#]:not([href=#])').click(function() {
	if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
		var target = $(this.hash);
		target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
		if (target.length) {
			$('html,body').animate({
				scrollTop: target.offset().top
			}, 600);
			return false;
		}
	}
	});
});

//----------------------------------------

/* Add style for sticky menu when scroll down an specific distance from top */

	$(window).on("scroll", function() 
		{
			var startScroll = $(window).scrollTop();
			if ($( "#jsn-master" ).hasClass( "jsn-demo-page" ))
				{
					if (startScroll >= 300)
					{
						$( '#jsn-header' ).addClass( 'hasbg' );
					}
					else
					{
						$( '#jsn-header' ).removeClass( 'hasbg' );
					}
				}
		});
	
//----------------------------------------

// Now the javascript has been setup this code triggers all the effects
		
$(document).ready( function() 
	{
	/* Add class 'fullwidth' to element if in #jsn-master.jsn-demo-page */
	// To make the promo area full width
		if ($( "#jsn-master" ).hasClass( "jsn-demo-page" ))
		{
			$( '#jsn-promo-inner' ).addClass( 'fullwidth' );
			$( '#jsn-content' ).addClass( 'fullwidth' );
			setHeightToHeaderElement();
		};

	/* Fabulous tab news */
		$('#tabs').tabulous({
			effect: 'scale' // Available effects: scale, slideLeft, scaleUp, flip
		});

	/* Add timeout for animation */
	// 'Back to', simplicity, the 6 grid with icons starting 'modern design'
		setTimeout(function(){
			$(".ping.title").addClass("pop");
		},1000);
		setTimeout(function(){
			$(".ping.desc").addClass("pop");
		},1200);
		setTimeout(function(){
			$(".ping.scroll-down").addClass("pop");
		},4500);

		/* Waypoint script to add action when scroll onto objects */
		/* This effect brought by http://imakewebthings.com/jquery-waypoints/ */
		
		// This sets the Waypoint triggers
		// Waypoints is the easiest way to trigger a function when you scroll to an element.
		// this adds a scrolling action to elements but not the 'counting up'
		// delete the ones you dont use
		
		$( 'a.scroll-down' ).waypoint(function()
			{
				$( 'a.scroll-down' ).addClass( 'scroll-action' );
			}, {
				offset: '25%'
			})
		$( '#welcome-to-jsn-mini' ).waypoint(function()
			{
				$( '#welcome-to-jsn-mini' ).addClass( 'scroll-action' );
			}, {
				offset: '75%'
			})
		$( '#demo-latest-projects' ).waypoint(function()
			{
				$( '#demo-latest-projects' ).addClass( 'scroll-action' );
			}, {
				offset: '70%'
			})
		$( '#demo-main-features' ).waypoint(function()
			{
				$( '#demo-main-features' ).addClass( 'scroll-action' );
			}, {
				offset: '70%'
			})
		$( '#demo-feature-graph' ).waypoint(function()
			{
				$( '#demo-feature-graph' ).addClass( 'scroll-action' );
			}, {
				offset: '70%'
			})

		/* CountUp Number by https://github.com/inorganik/countUp.js */
		if ($('#jsn-master').hasClass('jsn-demo-page')) {
		if (typeof(countUp) !== 'undefined')
		{
			var options = {
			  useEasing : true, 
			  useGrouping : true, 
			  separator : ',', 
			  decimal : '.' 
			}
			// set the counting up module numbers here
			// ( Starting Number / Target Number / Number of decimals / Time to get to Final Number / Additional Options)
			// ( startVal / endVal / decimals / duration / options )
			var countup1 = new countUp("counting-1", 01, 36, 0, 5, options);
			var countup2 = new countUp("counting-2", 01, 54, 0, 5, options);
			var countup3 = new countUp("counting-3", 01, 12, 0, 5, options);
			var countup4 = new countUp("counting-4", 01, 90, 0, 5, options);
		}

		$( '#demo-countingup-stats' ).waypoint(function()
			{
				$( '#demo-countingup-stats' ).addClass( 'scroll-action' );
				countup1.start();
				countup2.start();
				countup3.start();
				countup4.start();
			}, {
				offset: '80%'
			})
		}
		/* Parallax Scrolling */
		// this scolls the background images behind the modules
		$('.demo-countingup-stats').attr('data-type', 'background');
		$('.demo-countingup-stats').attr('data-speed', '3');

		if ($( "#jsn-master" ).hasClass( "jsn-demo-page" ))
		{
			$('#jsn-content-top-below').attr('data-type', 'background');
			$('#jsn-content-top-below').attr('data-speed', '3');
		}

		$('div[data-type="background"]').each(function(){
			var $bgobj = $(this); // assigning the object
		 
			$window = $(window);
			$(window).scroll(function() {
				var yPos = -($window.scrollTop() / $bgobj.data('speed')); 
				 
				// Put together our final background position
				var coords = '50% '+ yPos + 'px';
	 
				// Move the background
				$bgobj.css({ backgroundPosition: coords });
			}); 
		});

	});		
	
//----------------------------------------		

})(jQuery);
}, 0);

HTML

<div id="demo-main-features" class="appearing">
	<div class="grid-layout main-features">
		<div class="grid-col">
			<div class="feature-item">
				<a href="#"><span class="jsn-icon-pencil-ruler"></span></a>
				<h3 class="heading">Modern Design</h3>
				<p class="desc">Flat design – currently growing in popularity</p>
			</div>
		</div>
		<div class="grid-col">
			<div class="feature-item">
				<a href="#"><span class="jsn-icon-book"></span></a>
				<h3 class="heading">Full Documentation</h3>
				<p class="desc">JSN Mini is equipped with a very comprehensive documentation package that will help you with template utilization.</p>
			</div>
		</div>
		<div class="grid-col">
			<div class="feature-item">
				<a href="#"><span class="jsn-icon-lightning"></span></a>
				<h3 class="heading">Painless Configuration</h3>
				<p class="desc">You can configure the template the way you like without special technical knowledge</p>
			</div>
		</div>
	</div>
	<div class="grid-layout main-features">
		<div class="grid-col">
			<div class="feature-item">
				<a href="#"><span class="jsn-icon-eye"></span></a>
				<h3 class="heading">Responsive design</h3>
				<p class="desc">Special built-in design optimized for modern mobile devices such as iPhone, Android and Windows-based mobiles</p>
			</div>
		</div>
		<div class="grid-col">
			<div class="feature-item">
				<a href="#"><span class="jsn-icon-equalizer"></span></a>
				<h3 class="heading">Multi-language support</h3>
				<p class="desc"> Currently, the template supports 14 languages for both front-end and back-end.</p>
			</div>
		</div>
		<div class="grid-col">
			<div class="feature-item">
				<a href="#"><span class="jsn-icon-diamond"></span></a>
				<h3 class="heading">Social media integrated</h3>
				<p class="desc">You are free to integrate your social channels without digging into the code</p>
			</div>
		</div>
	</div>
</div>

<div id="demo-latest-projects" class="appearing">
	<h2 class="section-heading">Our latest projects</h2>
	<div class="grid-layout latest-projects">
		<div class="grid-col">
			<div class="project-item">
				<a href="/media/joomlashine/jsn-mini/custom-html/latest-projects/1.jpg" class="modal link-tooltip" style="z-index: 90;" rel="{handler: 'iframe', size: {x: 640, y: 440}}">
					<img src="/media/joomlashine/jsn-mini/custom-html/latest-projects/1.jpg" alt="" />
				</a>
			</div>
		</div>
		<div class="grid-col">
			<div class="project-item">
				<a href="/media/joomlashine/jsn-mini/custom-html/latest-projects/2.jpg" class="modal link-tooltip" style="z-index: 90;" rel="{handler: 'iframe', size: {x: 640, y: 440}}">
					<img src="/media/joomlashine/jsn-mini/custom-html/latest-projects/2.jpg" alt="" />
				</a>
			</div>
		</div>
		<div class="grid-col">
			<div class="project-item">
				<a href="/media/joomlashine/jsn-mini/custom-html/latest-projects/3.jpg" class="modal link-tooltip" style="z-index: 90;" rel="{handler: 'iframe', size: {x: 640, y: 440}}">
					<img src="/media/joomlashine/jsn-mini/custom-html/latest-projects/3.jpg" alt="" />
				</a>
			</div>
		</div>
		<div class="grid-col">
			<div class="project-item">
				<a href="/media/joomlashine/jsn-mini/custom-html/latest-projects/4.jpg" class="modal link-tooltip" style="z-index: 90;" rel="{handler: 'iframe', size: {x: 640, y: 440}}">
					<img src="/media/joomlashine/jsn-mini/custom-html/latest-projects/4.jpg" alt="" />
				</a>
			</div>
		</div>
	</div>
</div>

<div id="demo-tab-news">
	<div id="tabs" class="clearfix">

		<div id="tabs_container">

			<div id="tabs-1">
				<h3 class="news-title">Minimalist Style</h3>
				<p>A style that uses pared-down design elements, removing everything in a piece, leaving just the necessary and needed elements</p>
			</div>

			<div id="tabs-2">
				<h3 class="news-title">130+ font-icons for many purposes</h3>
				<p>JSN Mini is also the first JoomlaShine template with 130+ outstanding font icons for you to choose from.</p>
		
			</div>

			<div id="tabs-3">
				<h3 class="news-title">Extended style for three extensions</h3>
				<p>JSN Mini is well-crafted with extended styles for three extensions: Advanced Portfolio from ExtStore, Kunena and K2.</p>
			</div>

			<div id="tabs-4">
				<h3 class="news-title">Joomla! 2.5 &3.x Compatibility</h3>
				<p>Natively compatible with Joomla! 2.5 & Joomla! 3.x versions</p>
				
			</div>

			<div id="tabs-5">
				<h3 class="news-title">Sticky menu </h3>
				<p>Sticky menu makes websites quicker to navigate.</p>
				
			</div>

		</div><!--End tabs container-->

		<ul class="tabs_title">
			<li><a href="#tabs-1" title="">Minimalist Style</a></li>
			<li><a href="#tabs-2" title="">130+ font-icons for many purposes</a></li>
			<li><a href="#tabs-3" title="">Extended style for three extensions</a></li>
			<li><a href="#tabs-4" title="">Joomla! 2.5 &3.x Compatibility</a></li>
			<li><a href="#tabs-5" title="">Sticky menu </a></li>
		</ul>
		
	</div><!--End tabs-->	
</div>

<div id="demo-feature-graph" class="appearing">

	<div class="grid-layout feature-graph">
		<div class="grid-col">
			<div class="graph-item item1 clearfix">
				<div class="graph-item-inner">
					<a href="#" class="jsn-icon-cup"></a>
					<div class="text">
						<h3 class="heading"><a href="#">Easy to start</a></h3>
						<p class="desc">JSN PowerAdmin facilitates delightful management and customization your Joomla website with ease and joy.</p>
					</div>
				</div>
			</div>
		</div>
		<div class="grid-col">
			<div class="graph-item item2 clearfix">
				<div class="graph-item-inner">
					<a href="#" class="jsn-icon-basketball"></a>
					<div class="text">
						<h3 class="heading"><a href="#">SEO Optimized</a></h3>
						<p class="desc">Pure html override and 2-1-3 ordered content presentation help search engines easily crawl the site.</p>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="grid-layout feature-graph">
		<div class="grid-col">
			<div class="graph-item item3 clearfix">
				<div class="graph-item-inner">
					<a href="#" class="jsn-icon-handspeaker"></a>
					<div class="text">
						<h3 class="heading"><a href="#">Various Colors</a></h3>
						<p class="desc">6 color variations including blue, red, green, violet, orange and grey.</p>
					</div>
				</div>
			</div>
		</div>
		<div class="grid-col">
			<div class="graph-item item4 clearfix">
				<div class="graph-item-inner">
					<a href="#" class="jsn-icon-command"></a>
					<div class="text">
						<h3 class="heading"><a href="#">Portfolio Design</a></h3>
						<p class="desc">JSN Mini is dedicated to portfolio websites.</p>
					</div>
				</div>
			</div>
		</div>
	</div>

</div>

<div id="demo-countingup-stats" class="appearing">
	<div class="grid-layout countingup-stats">
		<div class="grid-col">
			<div class="stat-group">
				<h3 class="heading"><a href="#">Our Team</a></h3>
				<h4 class="sub-heading">Powered by</h4>
				<div id="counting-1" class="counting-number">01</div>
				<p class="desc">Soldiers</p>
			</div>
		</div>
		<div class="grid-col">
			<div class="stat-group">
				<h3 class="heading"><a href="#">Works</a></h3>
				<h4 class="sub-heading">Done</h4>
				<div id="counting-2" class="counting-number">01</div>
				<p class="desc">Projects</p>
			</div>
		</div>
		<div class="grid-col">
			<div class="stat-group">
				<h3 class="heading"><a href="#">Design</a></h3>
				<h4 class="sub-heading">Winning</h4>
				<div id="counting-3" class="counting-number">01</div>
				<p class="desc">Awards</p>
			</div>
		</div>
		<div class="grid-col">
			<div class="stat-group">
				<h3 class="heading"><a href="#">Client</a></h3>
				<h4 class="sub-heading">Quantity</h4>
				<div id="counting-4" class="counting-number">01</div>
				<p class="desc">And more</p>
			</div>
		</div>
	</div>
</div>

Notes

  • The code is untouched from the JSN Mini Template
  • This is for reference only aas these modules have be made standalone elsewhere in the KB
  • You need to add the page suffix jsn-demo-page to get this working or
  • you can wrap the code in 
    <div class="jsn-mobile jsn-demo-page">

</div>
  • This code is not 100% working, use the standalone version of the modules if you want them.
  • Instuctions on those articles hold the information on how to get the missing icons and other broken things working
Published in Joomlashine
Read more...
Page 30 of 96