@import "../../../../modules/photos04/less/mixins.less";

/******* VARIABLES *******/
@sliderHeight:	300px;
@loaderSize:	40px;
@sliderWidth:	100%;
@color: #790000;
@color2: #FFF;

.BorderRadius(@radius: 20px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}
.transition {	
	-webkit-transition:	all 0.3s ease-in-out;
	-moz-transition:	all 0.3s ease-in-out;
	-o-transition:		all 0.3s ease-in-out;
	-ms-transition:		all 0.3s ease-in-out;
	transition:			all 0.3s ease-in-out;
}


/******* SLIDER *******/
.ideoslider
{
	position:relative;
	float:left;
	height:@sliderHeight;
	width:@sliderWidth;
	overflow:hidden;
	margin:22px 0px;
}

/******* GRANDE *******/
.blockGrande
{
	position:relative;
	height:@sliderHeight;
	width:@sliderWidth;
	overflow:hidden;
}
.grandeImageWrapper
{
	position:relative;
	height:@sliderHeight;
	overflow:hidden;
}
.frameSlider
{
	position:absolute;
	height:@sliderHeight;
	background-color:#EDEDED;
	overflow:hidden;
}

/******* FRAMEBOX / LYTEBOX *******/
.frameBox {
	background-color:rgba(0, 0, 0, 0.8);
}
.blockOptions
{
	position:absolute;
	z-index:100001;
	top:2px;
	right:2px;
	width:64px;

	span
	{
		display:inline-block;
		width:30px;
		height:30px;
		margin:0 0 2px 2px;
		float:right;
		background:rgba(0, 0, 0, 0.5) url(images/ideosliderPictos.png) 0 0 no-repeat;
		cursor:pointer;
		.opacity(0.6);

		&:hover
		{
			.opacity(1);
			.box-shadow( 0px 1px 3px 0px rgba(0, 0, 0, 0.15) );
		}

		&.optionClose {background-position:0 0;}
		&.optionShare {background-position:0 -40px;}
		&.optionInfos {background-position:0 -80px;}
		&.optionFullscreen {background-position:0 -120px;}
	}
}
.frameImgWrapper {
	position: absolute;
	overflow: hidden;
	background:rgba(0, 0, 0, 0.8);
	.box-shadow( 0px 2px 6px 0px rgba(0, 0, 0, 0.45) );
}
.flecheNext{
	display:block;
	width: 0; height: 0; border-top: 15px solid transparent; border-left: 30px solid rgba(0, 0, 0, 0.5); border-bottom: 15px solid transparent;
	position:absolute;
	top:50%;
	right:3%;
	.opacity(0.6);
	cursor:pointer;
}
.flechePrev{
	display:block;
	width: 0; height: 0; border-top: 15px solid transparent; border-right: 30px solid rgba(0, 0, 0, 0.5); border-bottom: 15px solid transparent;
	position:absolute;
	top:50%;
	left:3%;
	.opacity(0.6);
	cursor:pointer;
}
.btNextFrameBox:hover .flecheNext, .btPrevFrameBox:hover .flechePrev{
	.opacity(0.9);
}
.btNextFrameBox .flecheNext:hover, .btPrevFrameBox .flechePrev:hover {
	.opacity(1);
}
/******* LOADER *******/
#slideLoader {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left:-(@loaderSize / 2);
	margin-top:-(@loaderSize / 2);
}
/******* MINIATURE *******/
.blockMiniatures
{
	position:absolute;
	text-align:left;
	width:100%;
	height:20px;
	line-height:20px;
	bottom:10px;
	left:8px;
	cursor:default;
}
.miniatures
{
	display:inline-block;
	margin:0 3px;
	width:20px;
	height:20px;
	background-color:@color2;
	cursor:pointer;
	.BorderRadius;
}
.miniatures.active
{
	background-color:@color;
	width:20px;
	height:20px;
	cursor:default;
}

.btnPrev,
.btnNext
{
	position:absolute;
	top:40%;
	left:0;
	width:30px;
	height:60px;
	background: @color;
	cursor:pointer;
	.transition;
	.BorderRadius(0 30px 30px 0);

}
.btnNext
{
	left:auto;
	right:0;
	.BorderRadius(30px 0 0 30px);
}

.btnPrev:hover,
.btnNext:hover
{
	background:darken(@color, 100%);

}