@import url('https://fonts.googleapis.com/css?family=Anton');

.demo-1 .sl-slider-wrapper {

	position: absolute;

	width: 100%;

	height: 100%;

	top: 0;

	left: 0;

}



.demo-2 .sl-slider-wrapper {

	width: 100%;

	height: 600px;

	overflow: hidden;

	position: relative;

}



.demo-2 .sl-slider h2,

.demo-2 .sl-slider blockquote {

	padding: 100px 30px 10px 30px;

	width: 80%;

	max-width: 960px;

	color: #fff;

	margin: 0 auto;

	position: relative;

	z-index: 100;

}



.demo-2 .sl-slider h2 {

	font-size: 100px;

	text-shadow: 0 -1px 0 rgba(0,0,0,0.2);

}



.demo-2 .sl-slider blockquote {

	font-size: 28px;

	padding-top: 10px;

	font-weight: 300;

	text-shadow: 0 -1px 0 rgba(0,0,0,0.2);

}



.demo-2 .sl-slider blockquote cite {

	font-size: 16px;

	font-weight: 700;

	font-style: normal;

	text-transform: uppercase;

	letter-spacing: 5px;

	padding-top: 30px;

	display: inline-block;

}



.demo-2 .bg-img {

	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;

}



/* Custom navigation arrows */



.nav-arrows span {

	position: absolute;

	z-index: 2000;

	top: 50%;

	width: 40px;

	height: 40px;

	border: 8px solid #ddd;

	border: 8px solid rgba(150,150,150,0.4);

	text-indent: -90000px;

	margin-top: -40px;

	cursor: pointer;

	

	-webkit-transform: rotate(45deg);

	-moz-transform: rotate(45deg);

	-o-transform: rotate(45deg);

	-ms-transform: rotate(45deg);

	transform: rotate(45deg);

}



.nav-arrows span:hover {

	border-color: rgba(150,150,150,0.9);

}



.nav-arrows span.nav-arrow-prev {

	left: 5%;

	border-right: none;

	border-top: none;

}



.nav-arrows span.nav-arrow-next {

	right: 5%;

	border-left: none;

	border-bottom: none;

}



/* Custom navigation dots */



.nav-dots {

	text-align: center;

	position: absolute;

	bottom: 2%;

	height: 30px;

	width: 100%;

	left: 0;

	z-index: 1000;

}



.nav-dots span {

	display: inline-block;

	position: relative;

	width: 16px;

	height: 16px;

	border-radius: 50%;

	margin: 3px;

	background: #ddd;

	background: rgba(150,150,150,0.4);

	cursor: pointer;

	box-shadow: 

		0 1px 1px rgba(255,255,255,0.4), 

		inset 0 1px 1px rgba(0,0,0,0.1);

}



.demo-2 .nav-dots span {

	background: rgba(150,150,150,0.1);

	margin: 6px;

	-webkit-transition: all 0.2s;

	-moz-transition: all 0.2s;

	-ms-transition: all 0.2s;

	-o-transition: all 0.2s;

	transition: all 0.2s;

	box-shadow: 

		0 1px 1px rgba(255,255,255,0.4), 

		inset 0 1px 1px rgba(0,0,0,0.1),

		0 0 0 2px rgba(255,255,255,0.5);

}



.demo-2 .nav-dots span.nav-dot-current,

.demo-2 .nav-dots span:hover {

	box-shadow: 

		0 1px 1px rgba(255,255,255,0.4), 

		inset 0 1px 1px rgba(0,0,0,0.1),

		0 0 0 5px rgba(255,255,255,0.5);

}



.nav-dots span.nav-dot-current:after {

	content: "";

	position: absolute;

	width: 10px;

	height: 10px;

	top: 3px;

	left: 3px;

	border-radius: 50%;

	background: rgba(255,255,255,0.8);

}



/* Content elements */



.demo-1 .deco {

	width: 260px;

	height: 260px;

	border: 2px dashed #ddd;

	border: 2px dashed rgba(150,150,150,0.4);

	border-radius: 50%;

	position: absolute;

	bottom: 50%;

	left: 50%;

	margin: 0 0 0 -130px;

}



.demo-1 [data-icon]:after {

    content: attr(data-icon);

    font-family: 'AnimalsNormal';

	color: #999;

	text-shadow: 0 0 1px #999;

	position: absolute;

	width: 220px;

	height: 220px;

	line-height: 220px;

	text-align: center;

	font-size: 100px;

	top: 50%;

	left: 50%;

	margin: -110px 0 0 -110px;

	box-shadow: inset 0 0 0 10px #f7f7f7;

	border-radius: 50%;

}



.demo-1 .sl-slide h2 {

	font-family: 'Anton', sans-serif !important;

	color: #fff;
	
	-webkit-text-stroke-width: 2px;
   -webkit-text-stroke-color: black;

	text-shadow: 0 0 1px #000;

	padding: 20px;

	position: absolute;

	font-size: 82px;

	font-weight: 700;

	letter-spacing: 13px;

	text-transform: uppercase;

	width: 80%;

	left: 10%;

	text-align: center;

	line-height: 50px;

	bottom: 35%;

	margin: 0 0 -120px 0;

}



.demo-1 .sl-slide blockquote {

	font-family: 'Anton', sans-serif !important;

	position: absolute;

	width: 100%;

	text-align: center;
-webkit-text-stroke-width: 2px;
   -webkit-text-stroke-color: #fff;
	left: 0;

	font-weight: 400;

	font-size: 48px;

	line-height: 20px;

	height: 70px;

	color: #000;

	z-index: 2;

	bottom: 30%;

	margin: 0 0 -200px 0;

	padding: 0;

}



.demo-1 .sl-slide blockquote p{

	margin: 0 auto;

	width: 60%;

	max-width: 980px;

	/*position: relative;*/

}



.demo-1 .sl-slide blockquote p:before {

	color: #f0f0f0;

	color: rgba(244,244,244,0.65);

	font-family: "Bookman Old Style", Bookman, Garamond, serif;

	position: absolute;

	line-height: 60px;

	width: 75px;

	height: 75px;

	font-size: 200px;

	z-index: -1;

	left: -80px;

	top: 35px;

	content: '\201C';

}



.demo-1 .sl-slide blockquote cite {

	font-size: 10px;

	padding-top: 10px;

	display: inline-block;

	font-style: normal;

	text-transform: uppercase;

	letter-spacing: 4px;

}



/* Custom background colors for slides in first demo */



/* First Slide */

.demo-1 .bg-1 .sl-slide-inner,

.demo-1 .bg-1 .sl-content-slice {

	background:#000000 url(../images/banner1.jpg) center top no-repeat;

}



/* Second Slide */

.demo-1 .bg-2 .sl-slide-inner,

.demo-1 .bg-2 .sl-content-slice {

	background:#000000 url(../images/banner2.jpg) center top no-repeat;

}



.demo-1 .bg-2 [data-icon]:after,

.demo-1 .bg-2 h2 {

	color: #fff;
	text-shadow: 0px 1px 1px rgba(0,0,0,0.3);

}



.demo-1 .bg-2 blockquote:before {

	color: #222;

}



/* Third Slide */

.demo-1 .bg-3 .sl-slide-inner,

.demo-1 .bg-3 .sl-content-slice {

	background:#000000 url(../images/banner3.jpg) center top no-repeat;

}



.demo-1 .bg-3 .deco {

	border-color: #fff;

	border-color: rgba(255,255,255,0.5);

}



.demo-1 .bg-3 [data-icon]:after {

	color: #fff;

	text-shadow: 0 0 1px #fff;

	box-shadow: inset 0 0 0 10px #b55381;

}



.demo-1 .bg-3 h2,

.demo-1 .bg-3 blockquote{

	color: #fff;

	text-shadow: 0px 1px 1px rgba(0,0,0,0.3);

}



.demo-1 .bg-3 blockquote:before {

	color: #c46c96;

}



/* Forth Slide */

.demo-1 .bg-4 .sl-slide-inner,

.demo-1 .bg-4 .sl-content-slice {

	background:#000000 url(../images/banner4.jpg) center top no-repeat;

}



.demo-1 .bg-4 .deco {

	border-color: #379eaa;

}



.demo-1 .bg-4 [data-icon]:after {

	text-shadow: 0 0 1px #277d87;

	color: #277d87;

}



.demo-1 .bg-4 h2,

.demo-1 .bg-4 blockquote{

	color: #fff;

	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);

}



.demo-1 .bg-4 blockquote:before {

	color: #379eaa;

}



/* Fifth Slide */

.demo-1 .bg-5 .sl-slide-inner,

.demo-1 .bg-5 .sl-content-slice {

	background:#000000 url(../images/banner.jpg) center top no-repeat;

}



.demo-1 .bg-5 .deco {

	border-color: #ECD82C;

}



.demo-1 .bg-5 .deco:after {

	color: #000;

	text-shadow: 0 0 1px #000;

}



.demo-1 .bg-5 h2,

.demo-1 .bg-5 blockquote{

	color: #000;

	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);

}



.demo-1 .bg-5 blockquote:before {

	color: #ecd82c;

}



.demo-2 .bg-img-1 {

	background-image: url(../images/1.jpg);

}

.demo-2 .bg-img-2 {

	background-image: url(../images/2.jpg);

}

.demo-2 .bg-img-3 {

	background-image: url(../images/3.jpg);

}

.demo-2 .bg-img-4 {

	background-image: url(../images/4.jpg);

}

.demo-2 .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 (max-width:768px){

	.demo-1 .sl-slide blockquote {

	font-family: 'Anton', sans-serif !important;

	position: absolute;

	width: 100%;

	text-align: center;

	left: 0;

	font-weight: 400;

	font-size: 48px;

	line-height: 60px;

	height: 180px;

	color: #fff;

	z-index: 2;

	bottom: 30%;

	margin: 0 0 -200px 0;

	padding: 0;

	}

	.demo-1 .sl-slide h2 {

		line-height: 45px;

		font-size: 48px;

		margin-bottom: 100px;

		letter-spacing: 8px;

	}

}



@media screen and (max-width: 660px) {

	.demo-1 .deco {

		width: 130px;

		height: 130px;

		margin-left: -65px;

		margin-bottom: 50px;

	}



	.demo-1 [data-icon]:after {

		width: 110px;

		height: 110px;

		line-height: 110px;

		font-size: 40px;

		margin: -55px 0 0 -55px;

	}



	.demo-1 .sl-slide blockquote {

		margin-bottom: -120px;

	}



	.demo-1 .sl-slide h2 {

		line-height: 45px;

		font-size: 48px;

		margin-bottom: 100px;

		letter-spacing: 8px;

	}



	.demo-1 .sl-slide blockquote p:before {

		line-height: 10px;

		width: 40px;

		height: 40px;

		font-size: 120px;

		left: -45px;

	}



	.demo-2 .sl-slider-wrapper {

		height: 500px;

	}



	.demo-2 .sl-slider h2 {

		font-size: 36px;

	}



	.demo-2 .sl-slider blockquote {

		font-size: 16px;

	}



}