<script type="text/javascript" src="http://www.freetimelearning.com/plugins/sliders/slider-10/js/slider-script.js"></script>

<div class="container">
<div class="wrapper">

	<ul id="ftl-slider" class="ftl-slider">
		<li>
			<a href="http://www.freetimelearning.com" target="_blank"><img src="images/1.jpg" alt="image1"/></a>
			<div class="ftl-description">
				<h3>www.freetimelearning.com</h3>
			</div>
		</li>
		<li>
			<a href="http://www.freetimelearning.com" target="_blank"><img src="images/2.jpg" alt="image2"/></a>
			<div class="ftl-description">
				<h3>www.freetimelearning.com</h3>
			</div>
		</li>
		<li>
			<a href="http://www.freetimelearning.com" target="_blank"><img src="images/3.jpg" alt="image1"/></a>
			<div class="ftl-description">
				<h3>www.freetimelearning.com</h3>
			</div>
		</li>
		<li>
			<a href="http://www.freetimelearning.com" target="_blank"><img src="images/4.jpg" alt="image1"/></a>
			<div class="ftl-description">
				<h3>www.freetimelearning.com</h3>
			</div>
		</li>
		<li>
			<a href="http://www.freetimelearning.com" target="_blank"><img src="images/5.jpg" alt="image1"/></a>
			<div class="ftl-description">
				<h3>www.freetimelearning.com</h3>
			</div>
		</li>
		<li>
			<a href="http://www.freetimelearning.com" target="_blank"><img src="images/6.jpg" alt="image1"/></a>
			<div class="ftl-description">
				<h3>www.freetimelearning.com</h3>
			</div>
		</li>
		<li>
			<a href="http://www.freetimelearning.com" target="_blank"><img src="images/7.jpg" alt="image1"/></a>
			<div class="ftl-description">
				<h3>www.freetimelearning.com</h3>
			</div>
		</li>
	</ul>

	<div id="shadow" class="shadow"></div>

	<div id="nav-arrows" class="nav-arrows">
		<a href="#">Next</a>
		<a href="#">Previous</a>
	</div>

	<div id="nav-dots" class="nav-dots">
		<span class="nav-dot-current"></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
	</div>

</div><!-- /wrapper -->

<p class="info"></p>

</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.freetimelearning.com/plugins/sliders/slider-10/js/jquery.slicebox.js"></script>
@import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow|Volkhov:400italic,700);
*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}
.clearfix:after {
	content: "";
	display: table;
	clear: both;
}
body {
	background: #e4ebe9 repeat top left;
	color: #444;
	font-family: "PT Sans Narrow", Arial, sans-serif;
	font-size: 13px;
	font-weight: 400;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    min-width: 320px;
}

a {
	color: #000;
	text-decoration: none;
}
.clearfix{clear:both}
.ftl{font-size:16px;padding:50px 0 20px;margin:0 auto;font-style:italic;text-align:center;}
.ftl a{color:#09C;text-decoration:none !important;}
.ftl a:hover{color:#999}
h1, h2, h5 {
	margin: 20px 20px 30px 20px;
	font-size: 56px;
	color: #fff;
	font-family: "Volkhov", serif;
	text-align: center;
	font-weight: 700;
	text-shadow: 1px 1px 3px #e0d1bc;
}

h1 span, h5 {
	font-size: 18px;
	display: block;
	font-style: italic;
	color: #997f5a;
	font-weight: 400;
	text-shadow: 0px 1px 1px #fff;
}

.wrapper {
	position: relative;
	width: 100%;
	padding: 0 50px;
	margin: 0 auto;
}
p.info {
	font-family: "Volkhov", serif;
	font-style: italic;
	color: #997f5a;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
	padding: 20px;
	display: block;
	clear: both;
	text-align: center;
	width: 100%;
	max-wdith: 440px;
	margin: 0 auto;
}
.shadow {
	width: 100%;
	height: 168px;
	position: relative;
	margin-top: -110px;
	background: transparent url(../images/shadow.png) no-repeat bottom center;
	background-size: 100% 100%; /* stretches it */
	z-index: -1;
	display: none;
}

.ftl-description h3 {
	font-size: 20px;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}

.ftl-description h3 a {
	color: #4a3c27;
	text-shadow: 0 1px 1px rgba(255,255,255,0.5);
}

.ftl-slider {
	margin: 10px auto;
	position: relative;
	overflow: hidden;
	width: 100%;
	list-style-type: none;
	padding: 0;
}

.ftl-slider li {
	margin: 0;
	padding: 0;
	display: none;
}

.ftl-slider li > a {
	outline: none;
}

.ftl-slider li > a img {
	border: none;
}

.ftl-slider img {
	max-width: 100%;
	display: block;
}

.ftl-description {
	padding: 20px;
	bottom: 10px;
	left: 10px;
	right: 10px;
	z-index: 1000;
	position: absolute;
	background: #CBBFAE;
	background: rgba(190,176,155, 0.7);
	border-left: 4px solid rgba(255,255,255,0.7);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);	
	opacity: 0;
	color: #fff;

	-webkit-transition: all 200ms;
	-moz-transition: all 200ms;
	-o-transition: all 200ms;
	-ms-transition: all 200ms;
	transition: all 200ms;
}

.ftl-slider li.sb-current .ftl-description {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	filter: alpha(opacity=80);	
	opacity: 1;
}

.ftl-slider li.sb-current .ftl-description :hover {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=99)";
	filter: alpha(opacity=99);	
}

.ftl-perspective {
	position: relative;
}

.ftl-perspective > div {
	position: absolute;

	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;

	-webkit-backface-visibility : hidden;
	-moz-backface-visibility : hidden;
	-o-backface-visibility : hidden;
	-ms-backface-visibility : hidden;
	backface-visibility : hidden;
}

.ftl-side {
	margin: 0;
	display: block;
	position: absolute;

	-moz-backface-visibility : hidden;

	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.nav-arrows {
	display: none;
}

.nav-arrows a {
	width: 42px;
	height: 42px;
	background: #cbbfae url(../images/nav.png) no-repeat top left;
	position: absolute;
	top: 50%;
	left: 2px;
	text-indent: -9000px;
	cursor: pointer;
	margin-top: -21px;
	opacity: 0.9;
	border-radius: 50%;
	box-shadow: 0 1px 1px rgba(255,255,255,0.8);
}

.nav-arrows a:first-child{
	left: auto;
	right: 2px;
	background-position: top right;
}

.nav-arrows a:hover {
	opacity: 1;
}

.nav-dots {
	text-align: center;
	position: absolute;
	bottom: -5px;
	height: 30px;
	width: 100%;
	left: 0;
	display: none;
}

.nav-dots span {
	display: inline-block;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	margin: 3px;
	background: #cbbfae;
	cursor: pointer;
	box-shadow: 
		0 1px 1px rgba(255,255,255,0.6), 
		inset 0 1px 1px rgba(0,0,0,0.1);
}

.nav-dots span.nav-dot-current {
	box-shadow: 
		0 1px 1px rgba(255,255,255,0.6), 
		inset 0 1px 1px rgba(0,0,0,0.1), 
		inset 0 0 0 3px #cbbfae,
		inset 0 0 0 8px #fff;
}

.nav-options {
	width: 70px;
	height: 30px;
	position: absolute;
	right: 70px;
	bottom: 0px;
	display: none;
}

.nav-options span {
	width: 30px;
	height: 30px;
	background: #cbbfae url(../images/options.png) no-repeat top left;
	text-indent: -9000px;
	cursor: pointer;
	opacity: 0.7;
	display: inline-block;
	border-radius: 50%;
}

.nav-options span:first-child{
	background-position: -30px 0px;
	margin-right: 3px;
}

.nav-options span:hover {
	opacity: 1;
}
$(function() {

	var Page = (function() {

		var $navArrows = $( '#nav-arrows' ).hide(),
			$navDots = $( '#nav-dots' ).hide(),
			$nav = $navDots.children( 'span' ),
			$shadow = $( '#shadow' ).hide(),
			slicebox = $( '#ftl-slider' ).slicebox( {
				onReady : function() {

					$navArrows.show();
					$navDots.show();
					$shadow.show();

				},
				onBeforeChange : function( pos ) {

					$nav.removeClass( 'nav-dot-current' );
					$nav.eq( pos ).addClass( 'nav-dot-current' );

				}
			} ),
			
			init = function() {

				initEvents();
				
			},
			initEvents = function() {

				// add navigation events
				$navArrows.children( ':first' ).on( 'click', function() {

					slicebox.next();
					return false;

				} );

				$navArrows.children( ':last' ).on( 'click', function() {
					
					slicebox.previous();
					return false;

				} );

				$nav.each( function( i ) {
				
					$( this ).on( 'click', function( event ) {
						
						var $dot = $( this );
						
						if( !slicebox.isActive() ) {

							$nav.removeClass( 'nav-dot-current' );
							$dot.addClass( 'nav-dot-current' );
						
						}
						
						slicebox.jump( i + 1 );
						return false;
					
					} );
					
				} );

			};

			return { init : init };

	})();

	Page.init();

});

We see you’re using an ad blocker.

Our website is made possible by displaying ads to our visitors.

Please help us continue to provide you with free. So please disabling your ad blocker.