@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

@font-face {
    font-family: 'AnimalsNormal';
    src: url('fonts/animals-webfont.eot');
    src: url('fonts/animals-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/animals-webfont.woff') format('woff'),
         url('fonts/animals-webfont.ttf') format('truetype'),
         url('fonts/animals-webfont.svg#AnimalsNormal') format('svg');
    font-weight: normal;
    font-style: normal;
}

html { height: 100%; }

*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0; margin: 0;}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:after { content: ""; display: table; clear: both; }

body { font-family: 'Lato', Calibri, Arial, sans-serif; background: #fff; font-weight: 300; font-size: 15px; color: #333; -webkit-font-smoothing: antialiased;}

.container { width: 100%; position: relative; }

.clr { clear: both; padding: 0; height: 0; margin: 0; }

.main { width: 90%; margin: 0 auto; position: relative; }

.container > header, .content-wrapper { padding: 30px; width: 80%; max-width: 960px; margin: 0 auto; }
.content-wrapper p{ padding-top: 30px; line-height: 26px;}
.container > header h1 { font-size: 34px; line-height: 38px; margin: 0; font-weight: 700; color: #333; float: left; }
.container > header h1 span { display: block; font-size: 20px; font-weight: 300; }

.demo .sl-slider-wrapper { width: 100%; height: 600px; overflow: hidden; position: relative; }
.demo .sl-slider h2, .demo .sl-slider blockquote { padding: 100px 30px 10px 30px; width: 80%; max-width: 960px; color: #fff; margin: 0 auto; position: relative; z-index: 100; }
.demo .sl-slider h2 { font-size: 100px; text-shadow: 0 -1px 0 rgba(0,0,0,0.2); background-color: rgba(34, 44, 44, 0.5);}
.demo .sl-slider blockquote { font-size: 28px; padding-top: 10px; font-weight: 300; text-shadow: 0 -1px 0 rgba(0,0,0,0.2); background-color: rgba(34, 44, 44, 0.5); }

a, a:visited, a:active, a:link { font-size: 32px; color:#3e8e41;text-decoration: none;}
a:hover { opacity: 0.2;} 
.demo .bg-img {
    opacity: 0.8; padding: 200px;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box; position: absolute; top: -200px; left: -200px; width: 100%; height: 100%;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	background-position: center center; }

/* Content elements */
.demo .bg-img-1 { background-image: url(../images/1.jpg);}
.demo .bg-img-2 { background-image: url(../images/2.jpg); }
.demo .bg-img-3 { background-image: url(../images/3.jpg); }
.demo .bg-img-4 { background-image: url(../images/4.jpg); }
.demo .bg-img-5 { background-image: url(../images/5.jpg); }
/* Animations for content elements */
.sl-trans-elems .deco{
	-webkit-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
	-moz-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
	-o-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
	-ms-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
	animation: roll 1s ease-out both, fadeIn 1s ease-out both; }
.sl-trans-elems h2{
	-webkit-animation: moveUp 1s ease-in-out both;
	-moz-animation: moveUp 1s ease-in-out both;
	-o-animation: moveUp 1s ease-in-out both;
	-ms-animation: moveUp 1s ease-in-out both;
	animation: moveUp 1s ease-in-out both; }
.sl-trans-elems blockquote{
	-webkit-animation: fadeIn 0.5s linear 0.5s both;
	-moz-animation: fadeIn 0.5s linear 0.5s both;
	-o-animation: fadeIn 0.5s linear 0.5s both;
	-ms-animation: fadeIn 0.5s linear 0.5s both;
	animation: fadeIn 0.5s linear 0.5s both; }
.sl-trans-back-elems .deco{
	-webkit-animation: scaleDown 1s ease-in-out both;
	-moz-animation: scaleDown 1s ease-in-out both;
	-o-animation: scaleDown 1s ease-in-out both;
	-ms-animation: scaleDown 1s ease-in-out both;
	animation: scaleDown 1s ease-in-out both; }
.sl-trans-back-elems h2{
	-webkit-animation: fadeOut 1s ease-in-out both;
	-moz-animation: fadeOut 1s ease-in-out both;
	-o-animation: fadeOut 1s ease-in-out both;
	-ms-animation: fadeOut 1s ease-in-out both;
	animation: fadeOut 1s ease-in-out both; }
.sl-trans-back-elems blockquote{
	-webkit-animation: fadeOut 1s linear both;
	-moz-animation: fadeOut 1s linear both;
	-o-animation: fadeOut 1s linear both;
	-ms-animation: fadeOut 1s linear both;
	animation: fadeOut 1s linear both; }
@-webkit-keyframes roll{
	0% {-webkit-transform: translateX(500px) rotate(360deg);}
	100% {-webkit-transform: translateX(0px) rotate(0deg);}
}
@-moz-keyframes roll{
	0% {-moz-transform: translateX(500px) rotate(360deg); opacity: 0;}
	100% {-moz-transform: translateX(0px) rotate(0deg); opacity: 1;}
}
@-o-keyframes roll{
	0% {-o-transform: translateX(500px) rotate(360deg); opacity: 0;}
	100% {-o-transform: translateX(0px) rotate(0deg); opacity: 1;}
}
@-ms-keyframes roll{
	0% {-ms-transform: translateX(500px) rotate(360deg); opacity: 0;}
	100% {-ms-transform: translateX(0px) rotate(0deg); opacity: 1;}
}
@keyframes roll{
	0% {transform: translateX(500px) rotate(360deg); opacity: 0;}
	100% {transform: translateX(0px) rotate(0deg); opacity: 1;}
}
@-webkit-keyframes moveUp{
	0% {-webkit-transform: translateY(40px);}
	100% {-webkit-transform: translateY(0px);}
}
@-moz-keyframes moveUp{
	0% {-moz-transform: translateY(40px);}
	100% {-moz-transform: translateY(0px);}
}
@-o-keyframes moveUp{
	0% {-o-transform: translateY(40px);}
	100% {-o-transform: translateY(0px);}
}
@-ms-keyframes moveUp{
	0% {-ms-transform: translateY(40px);}
	100% {-ms-transform: translateY(0px);}
}
@keyframes moveUp{
	0% {transform: translateY(40px);}
	100% {transform: translateY(0px);}
}
@-webkit-keyframes fadeIn{
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@-moz-keyframes fadeIn{
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@-o-keyframes fadeIn{
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@-ms-keyframes fadeIn{
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@keyframes fadeIn{
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@-webkit-keyframes scaleDown{
	0% {-webkit-transform: scale(1);}
	100% {-webkit-transform: scale(0.5);}
}
@-moz-keyframes scaleDown{
	0% {-moz-transform: scale(1);}
	100% {-moz-transform: scale(0.5);}
}
@-o-keyframes scaleDown{
	0% {-o-transform: scale(1);}
	100% {-o-transform: scale(0.5);}
}
@-ms-keyframes scaleDown{
	0% {-ms-transform: scale(1);}
	100% {-ms-transform: scale(0.5);}
}
@keyframes scaleDown{
	0% {transform: scale(1);}
	100% {transform: scale(0.5);}
}
@-webkit-keyframes fadeOut{
	0% {opacity: 1;}
	100% {opacity: 0;}
}
@-moz-keyframes fadeOut{
	0% {opacity: 1;}
	100% {opacity: 0;}
}
@-o-keyframes fadeOut{
	0% {opacity: 1;}
	100% {opacity: 0;}
}
@-ms-keyframes fadeOut{
	0% {opacity: 1;}
	100% {opacity: 0;}
}
@keyframes fadeOut{
	0% {opacity: 1;}
	100% {opacity: 0;}
}

/* Media Queries for custom slider */

@media screen and (max-width: 660px) {
	.demo .sl-slider-wrapper { height: 500px; }
	.demo .sl-slider h2 { font-size: 36px; }
	.demo .sl-slider blockquote { font-size: 16px; }
    }
.sl-slider-wrapper { width: 800px; height: 400px; margin: 0 auto; position: relative; overflow: hidden; }
.sl-slider { position: absolute; top: 0; left: 0;}

/* Slide wrapper and slides */
.sl-slide, .sl-slides-wrapper, .sl-slide-inner { position: absolute; width: 100%; height: 100%; top: 0;	left: 0;} 
.sl-slide { z-index: 100; }

/* The duplicate parts/slices */
.sl-content-slice {
	overflow: hidden;
	position: absolute;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	background: #fff;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	opacity : 1;
}

/* Horizontal slice */
.sl-slide-horizontal .sl-content-slice {
	width: 100%; height: 50%; left: -200px;
	-webkit-transform: translateY(0%) scale(1);
	-moz-transform: translateY(0%) scale(1);
	-o-transform: translateY(0%) scale(1);
	-ms-transform: translateY(0%) scale(1);
	transform: translateY(0%) scale(1); }

.sl-slide-horizontal .sl-content-slice:first-child { top: -200px; padding: 200px 200px 0px 200px; }
.sl-slide-horizontal .sl-content-slice:nth-child(2) { top: 50%; padding: 0px 200px 200px 200px; }

/* Vertical slice */
.sl-slide-vertical .sl-content-slice {
	width: 50%; height: 100%; top: -200px;
	-webkit-transform: translateX(0%) scale(1);
	-moz-transform: translateX(0%) scale(1);
	-o-transform: translateX(0%) scale(1);
	-ms-transform: translateX(0%) scale(1);
	transform: translateX(0%) scale(1); }

.sl-slide-vertical .sl-content-slice:first-child { left: -200px; padding: 200px 0px 200px 200px; }
.sl-slide-vertical .sl-content-slice:nth-child(2) { left: 50%; padding: 200px 200px 200px 0px; }
/* Content wrapper */
/* Width and height is set dynamically */
.sl-content-wrapper { position: absolute;}
.sl-content { width: 100%; height: 100%; background: #fff;}
/* Default styles for background colors */
.sl-slide-horizontal .sl-slide-inner { background: #ddd; }
.sl-slide-vertical .sl-slide-inner { background: #ccc; }