/**
 * Author:      Matt Hinchliffe <www.maketea.co.uk>
 * Modified:    13/06/2014
 * Description: Simple jQuery slideshow
 * Example:
 * <div class="slideshow">
 *     <ul class="carousel">
 *         <li class="slide"><a href="#">Option 1</a></li>
 *         <li class="slide"><a href="#">Option 2</a></li>
 *     </ul>
 * </div>
 */

/* slides */
.slideshow {
	position:relative;
	margin:0 0 1em;
	direction:ltr;
	/*border: 2px solid #6f918a;*/
	/*border-top-width: 15px;*/
	/*background-color: rgba(50,50,50,0.1);
	border-radius: 10px 10px 0px 0px;*/
}

.slideshow a {
	font-size:.75em;
	line-height:2em;
	text-decoration:none;
	color:#fff;
	/*background:#666;*/
}

.slideshow a:hover,
.slideshow .selected a {
	background-color: rgba(50,50,50,0.4);
}

.carousel {
	margin:0;
	padding:0;
	list-style:none;
	display:inline-block;
	
}

.slide {
	
	z-index:100;
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 10px;
	margin-bottom: 0px;
	background-color: rgba(111,145,138,0.5);
	border: 1px solid rgba(111,145,138,1);
	box-shadow: 0px 1px 3px rgba(0,0,0,0.4);

}

.slide img {
	margin-top: 10px;
	margin-bottom: 10px;
	display:block;
	/*border-radius: 60px 60px 60px 60px;*/
	/*border-radius: 20px 20px 20px 20px;*/
	border: 1px solid #000;/*#6f918a;*/
	opacity: 0.9;
	/*background-color: rgba(50,50,50,0.4);*/
	min-width: 128px;
	max-width: 128px;
	border-radius: 60px 60px 60px 60px;
	
}

/* pagination */
.slides-pagination {
	position:absolute;
	/*bottom:1em;*/
	left:1em;
	margin:0;
	padding:0;
	list-style:none;
	z-index:110;
}
.slideBlock {

	width:130px;
	/*height:140px;*/
	/*border: 5px solid #6f918a;*/
	/*background-color: rgba(50,50,50,0.4);*/
	
	/*background-color: #6f918a;*/
	

	/*border-radius: 60px 60px 60px 60px;*/
	

}
@-webkit-keyframes changeRoundSlideBlock {
    0% {
        border-radius: 60px 60px 60px 60px;
    }
    100% {
    	border-radius: 0px 0px 0px 0px;
    }

}
@-moz-keyframes changeRoundSlideBlock {
    0% {
        border-radius: 60px 60px 60px 60px;
    }
    100% {
    	border-radius: 0px 0px 0px 0px;
    }

}
@keyframes changeRoundSlideBlock {
    0% {
        border-radius: 60px 60px 60px 60px;
    }
    100% {
    	border-radius: 0px 0px 0px 0px;
    }

}

.slideBlock:hover,
.slide img:hover{
	cursor:pointer;
	animation-name: changeRoundSlideBlock;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-direction: left;
    animation-timing-function: ease;
    animation-fill-mode: forwards;

    -webkit-animation-name: changeRoundSlideBlock;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: left;
    -webkit-animation-timing-function: ease;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: changeRoundSlideBlock;
    -moz-animation-duration: 1s;
    -moz-animation-iteration-count: 1;
    -moz-animation-direction: left;
    -moz-animation-timing-function: ease;
    -moz-animation-fill-mode: forwards;
}


#textoFoto{
	text-align: center;	
	width: 130px;
	z-index:20;
	top: 0px;
	position: relative;
	color: #fff;
	font-weight: bold;
	font-size: 12px;
	/*display:none;*/
	background: rgba(0,0,0,0.5);
	/*transform: translate(0px,-15px);*/
}

.slideBlock:hover + #textoFoto{
	display:block;
}

.slides-pagination li {
	position: absolute;
	display:inline;
}

.slides-pagination a {
	display:block;
	float:left;
	width:2em;
	margin-right:5px;
}

/* skip */
.slides-next,
.slides-prev {
	position:absolute;
	top: 60px;
	width: 25px;
	height: 25px;

	z-index:120;
	vertical-align: middle;
	background-color: transparent;
}

.slides-next {
	right:0;
	
	/*border-right: 2px solid #6f918a;
	border-bottom: 2px solid #6f918a;*/
}
.slides-next::before{

	content: url(../image/rArrow.png);

}

.slides-prev {
	left:0;
	/*border-left: 2px solid #6f918a;
	border-bottom: 2px solid #6f918a;*/
}

.slides-prev::before{

	content: url(../image/lArrow.png);

}

.slides-next.disabled,
.slides-prev.disabled {
	opacity:.2;
	cursor:auto;
}
