/* =====================================================
   carrousel.css — styles du carrousel principal Aquatao
   ===================================================== */

/* --- Vagues (décoration bas de carrousel) --- */
.vague1 {
	background-image:url(/_asset/vague2.png);
	animation: myanim 3s ;

}
.vague2 {
	background-image:url(/_asset/vague4.png);
	animation: myanim 10s ;
}
.vague3 {
	background-image:url(/_asset/vague5.png);
	animation: myanim 7s ;
}

@keyframes myanim {
	0%, 100% {
		background-size: 800px 31px;
	}
	50% {
		background-size: 50% 10px;
	}
}

.vague {
	width:100%;
	height:31px;
	position:absolute;
	z-index: 9999;
	bottom: 0px;
	rotate: 180deg;
	background-repeat: repeat-x;

}

/* --- Masque et flash --- */
#mask {
	height: 100%;
    width: 100%;
    position: absolute;
	z-index:41;
	background: radial-gradient(circle at 81% 249%, rgba(255, 255, 255, 0) 65%, rgba(255, 255, 255, 1) 100%);
}
#flash {
	position:absolute;
	height:100%;
	width:100%;
	background-color:#FFF;
	z-index:50;
	-moz-box-shadow: 0px 0px 550px 90px #656565;
	-webkit-box-shadow: 0px 0px 550px 90px #656565;
	-o-box-shadow: 0px 0px 550px 90px #656565;
	box-shadow: 0px 0px 550px 90px #656565;
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=NaN, Strength=550);
}

/* --- Carrousel principal (#mycarousel) --- */
#mycarousel li { list-style:none; margin:0px; padding:0px !important; width: 100%}

#mycarousel .img-carrousselle {
	height: 420px;
	background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#mycarousel {
	margin: 0px;
    padding: 0px;
    height: 420px;
    overflow: hidden;
    display: block;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
}
#mycarousel-replacement {
	height: 419px;
	clear: both;
}
#mycarousel a {text-decoration: none;}

#option-carouselle {
	position:absolute;
	z-index:50;
	bottom:55px;
	left:calc(50% - 84px);
}
#mycarousel .ct-text-carrouselle {
	padding-top: 190px;
	text-decoration: none;
    position: absolute;
    top: 0px;
    width: 100%;
}
#mycarousel .ct-text-carrouselle h1 {
	text-align: center;
	font-size:40px;
	color:#FFF;
	margin:0px 0px 0px 0px;
	padding:0px 0px 3px;
	font-family: goodtime;
}

/* --- Contrôles jCarousel --- */
.jcarousel-control a.hoverselect {color:#ff0072 !important;}


.jcarousel-control a {
	line-height:20px;
	width: 20px;
    height: 20px;
	display:inline-block;
	text-align:center;
	padding-top:0px;
	margin-top:-2px;
	color:#185B83 !important;
	font-family:goodtime;
	font-weight:bold;
	text-decoration:none;
	background-color: #adabab;
    border-radius: 50%;
}

.jcaroussel-selector {
	width: 50%;
    height: 50%;
    background-color: #185B83;
    margin-left: 25% !important;
    margin-top: 25% !important;
    border-radius: 50%;
}

.hoverselect .jcaroussel-selector {
	background-color: #FF0072;
}

.step-carouselle { margin-top:20px !important; margin-right:4px;}


/* --- Responsive --- */
@media screen and (max-width: 1284px) {
	#mycarousel .descriptionelement .more { display:none;}
	#mycarousel .ct-text-carrouselle { height:auto;}
	#mycarousel .descriptionelement {width:auto;}
	#option-carouselle .flg, #option-carouselle .flg img,
	#option-carouselle .fld, #option-carouselle .fld img
	 { height:20px; width:auto; background-size:contain;}
	 .step-carouselle { margin-top:-5px !important; margin-right:4px;}
}

@media screen and (max-width: 900px) {
	#mycarousel .ct-text-carrouselle h1 { font-size:30px;}
}

@media screen and (max-width: 850px) {
	#mycarousel-replacement { height: 174px;}
	#mycarousel .ct-text-carrouselle {padding-top: 140px;}
	#option-carouselle { display:none;}
	#mycarousel { height:335px;}
}

@media screen and (max-width: 750px) {
	#mycarousel-replacement { height: 141px;}
	#mycarousel { height:300px;}
}

@media screen and (max-width: 700px) {
	#mycarousel-replacement { height: 120px;}
	#mycarousel { height:280px;}
}

@media screen and (max-width: 580px) {
	#mycarousel .ct-text-carrouselle h1 {
		font-size: 16px;
	}
	#mycarousel-replacement { /*height: 50px;*/}
}