/**
	Juizy slideshow-diapo
	@author: Geoffrey Crofte
	@date: 2011-12-07
	@from: self work http://creativejuiz.fr/trytotry
	@license: CreativeCommons (BY)
	
	
	************* Changelog *************
	
	** v.1.1.1 - 2012-02-27
	- Figcaption element hidden when you take the control
	
	** v.1.1.0 - 2011-12-31
	- Caption of figure (figcaption element) display improvement
	
	** v.1.0.0 - 2011-12-07
	- First version

	
/*demo slider avec input radio*/

input[type=radio]{display:none}/*on cache tous les input*/
	
.cadre-demo1 label{position:relative;overflow:hidden;cursor:pointer}/*on pointe tous les labels*/

.cadre-demo1{
overflow:hidden;
position:relative;
text-align:center;

max-width:960px;
margin:20px auto;
}

.cadre-demo2{
overflow:hidden;
position:relative;
text-align:center;
max-width:700px;
margin:20px auto;
}



.photos-mini{
display:inline-block;
overflow:hidden;
}

.miniature{
float:left;
width:120px;
    height: 80px;
margin:5px}

.cadre-demo1 label,
.miniature label img{display:block}

.fenetre{
width:600px;
height:400px;
object-fit:contain;
position:absolute;
top:180px;
transition:.6s;
left:-100%;
opacity:0}

.fen:checked~.fenetre{
left:50%;
transform:translatex(-50%);
-webkit-transform:translatex(-50%);
opacity:1}

figcaption{
text-align:center;
position:absolute;
top:150px;
left:50%;
width:600px;
transition:.6s;
transform:translatex(-50%);
-webkit-transform:translatex(-50%);
opacity:0;
height:auto;
line-height:30px;
color:white;
background:rgb(1, 76, 109);
}

.fen:checked~figcaption{

transition:2s;
opacity:1}


@media screen and (max-width: 1280px) {


.miniature {
    float: left;
    width: 120px;
    height: 80px;
    margin: 0px 5px 60px 0px;

	}
        .fenetre {
            margin-top: 120px;
        }
        figcaption{
            margin-top: 120px;
        }

}

@media screen and (max-width: 590px) {
    .miniature {
        float: none;
    width: 100%;
    height: auto;
    margin: 0;

	}
        .fenetre {
            top: 310px;
        }
        figcaption{
            top: 310px;
        }
    .w30p{
        width: 80%;
    }

}

    
    
}

@media screen and (max-width: 405px) {
    
    .fenetre {
            top: 380px;
        }
        figcaption{
            top: 420px;
        }
    
    
}