@charset "utf-8";
/* CSS Document */





/* Petits téléphones de résolution 320x480 en mode portrait. *************************************/
/* Résolution mini 320 pixels */
/* Smartphone 360x640 +utilisé **************************************************************/
@media screen and (max-width: 480px){

#photoSlideWarp
{
	margin: auto;
	width: 330px;
	margin-left:auto;
	margin-right:auto;
	overflow: hidden;
}
#photoSlide > .item
{
	float: left;
	width: 330px;
	height: 180px;
	text-align:center;
}
.item
{
    width:330px;
    height:180px;
	background-color: #111;
	color: #ffffff;
}
.photoItem
{
    width:330px;
    height:180px;
    z-index:2;
}
.item .legendItem
{
    position:relative;
	z-index:1;
	width:330px;
	height:25px;
	margin-top:-30px;
	border-top: 1px solid rgb(225,225,225);
	text-align:center;
	letter-spacing: 0.05em;
	word-spacing: 0.05em;
	font-family: Georgia, Times, serif;
	background: #fff;
	background: rgba(255,255,255,0.7);
	color: #111;
	text-shadow: -1px -1px 0 rgba(255,255,255,0.3);
}
.item .lienItem
{
    position:relative;
	z-index:1;
	width:330px;
	height:180px;
	margin-top:-180px;
	background: #fff;
	background: rgba(255,255,255,0.7);
}
#btStop
{
    width:80px;
    height:20px;
    margin-top:180px;
    margin-left:125px;
    cursor:pointer;
    border:0;
    border-radius:0px 0px 10px 10px;
    background-color: #c6ecff;
}
#btStop:hover
{
	background-color:#d9f2ff;
}
#btLeft
{
    position:absolute;
    z-index:1;
    width:20px;
    height:60px;
    margin-top:60px;
    cursor:pointer;
    left:0;
    background-color:#FFF;
    border-radius:0px 8px 8px 0px;
}
#btRight
{
    position:absolute;
    z-index:1;
    width:20px;
    height:60px;
    margin-top:60px;
    margin-left:310px;
    cursor:pointer;left:0;
    background-color:#FFF;
    border-radius:8px 0px 0px 8px;
}
	

}


/* Smartphones paysage principalement *******************************************/
/* Certaines tablettes en portrait */
@media screen and (min-width: 481px) and (max-width: 640px){

#photoSlideWarp
{
	margin: auto;
	width: 480px;
	margin-left:auto;
	margin-right:auto;
	overflow: hidden;
}
#photoSlide > .item
{
	float: left;
	width: 480px;
	height: 200px;
	text-align:center;
}
.item
{
    width:480px;
    height:200px;
	background-color: #111;
	color: #ffffff;
}
.photoItem
{
    width:480px;
    height:200px;
    z-index:2;
}
.item .legendItem
{
    position:relative;
	z-index:1;
	width:480px;
	height:25px;
	margin-top:-30px;
	border-top: 1px solid rgb(225,225,225);
	text-align:center;
	letter-spacing: 0.05em;
	word-spacing: 0.05em;
	font-family: Georgia, Times, serif;
	background: #fff;
	background: rgba(255,255,255,0.7);
	color: #111;
	text-shadow: -1px -1px 0 rgba(255,255,255,0.3);
}
.item .lienItem
{
    position:relative;
	z-index:1;
	width:480px;
	height:200px;
	margin-top:-180px;
	background: #fff;
	background: rgba(255,255,255,0.7);
}
#btStop
{
    width:80px;
    height:20px;
    margin-top:200px;
    margin-left:195px;
    cursor:pointer;
    border:0;
    border-radius:0px 0px 10px 10px;
    background-color: #c6ecff;
}
#btStop:hover
{
	background-color:#d9f2ff;
}
#btLeft
{
    position:absolute;
    z-index:1;
    width:20px;
    height:60px;
    margin-top:70px;
    cursor:pointer;
    left:0;
    background-color:#FFF;
    border-radius:0px 8px 8px 0px;
}
#btRight
{
    position:absolute;
    z-index:1;
    width:20px;
    height:60px;
    margin-top:70px;
    margin-left:460px;
    cursor:pointer;left:0;
    background-color:#FFF;
    border-radius:8px 0px 0px 8px;
}
	

}

/* Smartphones en Paysage ************************************************************************/
/* Tablettes en Portrait */
@media screen and (min-width: 641px) and (max-width: 800px){

#photoSlideWarp
{
	margin: auto;
	width: 640px;
	margin-left:auto;
	margin-right:auto;
	overflow: hidden;
}
#photoSlide > .item
{
	float: left;
	width: 640px;
	height: 240px;
	text-align:center;
}
.item
{
    width:640px;
    height:240px;
	background-color: #111;
	color: #ffffff;
}
.photoItem
{
    width:640px;
    height:240px;
    z-index:2;
}
.item .legendItem
{
    position:relative;
	z-index:1;
	width:640px;
	height:30px;
	margin-top:-35px;
	border-top: 1px solid rgb(225,225,225);
	text-align:center;
	letter-spacing: 0.05em;
	word-spacing: 0.05em;
	font-family: Georgia, Times, serif;
	background: #fff;
	background: rgba(255,255,255,0.7);
	color: #111;
	text-shadow: -1px -1px 0 rgba(255,255,255,0.3);
}
.item .lienItem
{
    position:relative;
	z-index:1;
	width:640px;
	height:240px;
	margin-top:-240px;
	background: #fff;
	background: rgba(255,255,255,0.7);
}
#btStop
{
    width:80px;
    height:20px;
    margin-top:240px;
    margin-left:275px;
    cursor:pointer;
    border:0;
    border-radius:0px 0px 10px 10px;
    background-color: #c6ecff;
}
#btStop:hover
{
	background-color:#d9f2ff;
}
#btLeft
{
    position:absolute;
    z-index:1;
    width:20px;
    height:60px;
    margin-top:90px;
    cursor:pointer;
    left:0;
    background-color:#FFF;
    border-radius:0px 8px 8px 0px;
}
#btRight
{
    position:absolute;
    z-index:1;
    width:20px;
    height:60px;
    margin-top:90px;
    margin-left:620px;
    cursor:pointer;left:0;
    background-color:#FFF;
    border-radius:8px 0px 0px 8px;
}
	
	
}

/* Tablettes en mode Portrait + Tablettes en mode Paysage *********************************************/
@media screen and (min-width: 801px) and (max-width: 1025px){

#photoSlideWarp
{
	margin: auto;
	width: 800px;
	margin-left:auto;
	margin-right:auto;
	overflow: hidden;
}
#photoSlide > .item
{
	float: left;
	width: 800px;
	height: 300px;
	text-align:center;
}
.item
{
    width:800px;
    height:300px;
	background-color: #111;
	color: #ffffff;
}
.photoItem
{
    width:800px;
    height:300px;
    z-index:2;
}
.item .legendItem
{
    position:relative;
	z-index:1;
	width:800px;
	height:30px;
	margin-top:-35px;
	border-top: 1px solid rgb(225,225,225);
	text-align:center;
	letter-spacing: 0.05em;
	word-spacing: 0.05em;
	font-family: Georgia, Times, serif;
	background: #fff;
	background: rgba(255,255,255,0.7);
	color: #111;
	text-shadow: -1px -1px 0 rgba(255,255,255,0.3);
}
.item .lienItem
{
    position:relative;
	z-index:1;
	width:800px;
	height:300px;
	margin-top:-300px;
	background: #fff;
	background: rgba(255,255,255,0.7);
}
#btStop
{
    width:80px;
    height:20px;
    margin-top:300px;
    margin-left:358px;
    cursor:pointer;
    border:0;
    border-radius:0px 0px 10px 10px;
    background-color: #c6ecff;
}
#btStop:hover
{
	background-color:#d9f2ff;
}
#btLeft
{
    position:absolute;
    z-index:1;
    width:20px;
    height:60px;
    margin-top:120px;
    cursor:pointer;
    left:0;
    background-color:#FFF;
    border-radius:0px 8px 8px 0px;
}
#btRight
{
    position:absolute;
    z-index:1;
    width:20px;
    height:60px;
    margin-top:120px;
    margin-left:780px;
    cursor:pointer;left:0;
    background-color:#FFF;
    border-radius:8px 0px 0px 8px;
}
	

}


/* Destkop dont 1366x768 majoritairement utilisé *******************************************/
/* Certaines tablettes en mode paysage comme Galaxy TAB 800x1280 */ 
@media screen and (min-width: 1026px) and (max-width: 1369px){

#photoSlideWarp
{
	margin: auto;
	width: 1000px;
	margin-left:auto;
	margin-right:auto;
	overflow: hidden;
}
#photoSlide > .item
{
	float: left;
	width: 1000px;
	height: 375px;
	text-align:center;
}
.item
{
    width:1000px;
    height:375px;
	background-color: #111;
	color: #ffffff;
}
.photoItem
{
    width:1000px;
    height:375px;
    z-index:2;
}
.item .legendItem
{
    position:relative;
	z-index:1;
	width:1000px;
	height:30px;
	margin-top:-35px;
	border-top: 1px solid rgb(225,225,225);
	text-align:center;
	letter-spacing: 0.05em;
	word-spacing: 0.05em;
	font-family: Georgia, Times, serif;
	background: #fff;
	background: rgba(255,255,255,0.7);
	color: #111;
	text-shadow: -1px -1px 0 rgba(255,255,255,0.3);
}
.item .lienItem
{
    position:relative;
	z-index:1;
	width:1000px;
	height:375px;
	margin-top:-375px;
	background: #fff;
	background: rgba(255,255,255,0.7);
}
#btStop
{
    width:80px;
    height:20px;
    margin-top:375px;
    margin-left:458px;
    cursor:pointer;
    border:0;
    border-radius:0px 0px 10px 10px;
    background-color: #c6ecff;
}
#btStop:hover
{
	background-color:#d9f2ff;
}
#btLeft
{
    position:absolute;
    z-index:1;
    width:20px;
    height:60px;
    margin-top:180px;
    cursor:pointer;
    left:0;
    background-color:#FFF;
    border-radius:0px 8px 8px 0px;
}
#btRight
{
    position:absolute;
    z-index:1;
    width:20px;
    height:60px;
    margin-top:180px;
    margin-left:980px;
    cursor:pointer;left:0;
    background-color:#FFF;
    border-radius:8px 0px 0px 8px;
}


}


/* DesktopGrand écrans *********************************************************************/
@media screen and (min-width: 1370px){
#photoSlideWarp
{
	margin: auto;
	width: 1200px;
	margin-left:auto;
	margin-right:auto;
	overflow: hidden;
}
#photoSlide > .item
{
	float: left;
	width: 1200px;
	height: 450px;
	text-align:center;
}
.item
{
    width:1200px;
    height:450px;
	background-color: #111;
	color: #ffffff;
}
.photoItem
{
    width:1200px;
    height:450px;
    z-index:2;
}
.item .legendItem
{
    position:relative;
	z-index:1;
	width:1200px;
	height:30px;
	margin-top:-35px;
	border-top: 1px solid rgb(225,225,225);
	text-align:center;
	letter-spacing: 0.05em;
	word-spacing: 0.05em;
	font-family: Georgia, Times, serif;
	background: #fff;
	background: rgba(255,255,255,0.7);
	color: #111;
	text-shadow: -1px -1px 0 rgba(255,255,255,0.3);
}
.item .lienItem
{
    position:relative;
	z-index:1;
	width:1200px;
	height:450px;
	margin-top:-350px;
	background: #fff;
	background: rgba(255,255,255,0.7);
}
#btStop
{
    width:80px;
    height:20px;
    margin-top:350px;
    margin-left:558px;
    cursor:pointer;
    border:0;
    border-radius:0px 0px 10px 10px;
    background-color: #c6ecff;
}
#btStop:hover
{
	background-color:#d9f2ff;
}
#btLeft
{
    position:absolute;
    z-index:1;
    width:20px;
    height:60px;
    margin-top:185px;
    cursor:pointer;
    left:0;
    background-color:#FFF;
    border-radius:0px 8px 8px 0px;
}
#btRight
{
    position:absolute;
    z-index:1;
    width:20px;
    height:60px;
    margin-top:185px;
    margin-left:1180px;
    cursor:pointer;left:0;
    background-color:#FFF;
    border-radius:8px 0px 0px 8px;
}
	
}