@font-face {

    font-family: "Arena Condesed";

    src: url("Arena Condesed.ttf");

}



.animacion .sl-slider-wrapper {

	width: 100%;

	height: 220px;

	max-height: 220px;

	overflow: hidden;

	position: relative;

	float:left;

}



.animacion .sl-slider h2,

.animacion .sl-slider blockquote {

	/*padding: 40px 30px 10px 30px;*/

	width: 100%;

	/*max-width: 960px;*/

	color: #fff;

	margin: auto 0;

	position: relative;

	z-index: 100;

    background: rgb(0, 0, 0); /* Fall-back for browsers that don't support rgba */

    background: rgba(0, 0, 0, .7);



}



.animacion .sl-slider h2 {

	font-family: "Arena Condesed", Arial, Helvetica;

	font-size: 18px;

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

}



.animacion .sl-slider blockquote {

	font-size: 12px;

	padding-top: 10px;

	font-weight: 500;

	text-shadow: 0.1em 0.1em 0.2em #333;

}



.animacion .sl-slider blockquote cite {

	font-size: 10px;

	font-weight: 700;

	font-style: normal;

	text-transform: uppercase;

	letter-spacing: 5px;

	padding-top: 30px;

	display: inline-block;

}



.animacion .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 background */



.animacion .bg-img-1 {

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

}

.animacion .bg-img-2 {

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

}

.animacion .bg-img-3 {

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

}

.animacion .bg-img-4 {

	background-image: url(../images/4.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;}

}