html {height:100%}

body
{
    font-family: 'Trebuchet MS', Arial, sans-serif;
    
    background:  url(pattern.png) repeat top left #222;
 
    width: 100%;
    height: 100%;
    padding:0px;
    margin:0px;
    /*border: 3px solid black*/
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
   
}

#wrapper
{            
    overflow:hidden;
                         
}
        
#wrapper ul
{
    list-style:none;
    margin:0;
    padding:0; 
    -webkit-transition: -webkit-transform 0.3s linear;   
    
    width: 100%;
    height: 100%;
    
    padding:0px;
    margin:0px;
}

#wrapper ul li
{
   float:left;
   
    position: absolute;
    background: no-repeat center center;
    background-size: contain;
    width: 100%;
    height: 100%;
    display:block;
    overflow:hidden;
}

.photo
{

    
    
    width: 100%;
    height: 100%;
    
    padding:0px;
    margin:0px;
    
    
    /*-webkit-transition-property: background-position;
    -webkit-transition-duration: 0.5s;
    -moz-transition-property: background-position;
    -moz-transition-duration: 0.5s;
    -o-transition-property: background-position;
    -o-transition-duration: 0.5s;*/
    
}




ul {list-style:none;}



li
{
    position: absolute;
    background: no-repeat center center;
    background-size: contain;
    width: 100%;
    height: 100%;
    display:block;
    overflow:hidden;
}

#img0
{
 
}

#img1
{
 left: -100%;
}

#img2
{
 right: 200%;
}

h3
{   
    color: #999;
    display:block;
    position: absolute;
    bottom: 5px;
    left: 5px;
    margin:0px;
}






#creativecommons
{
    position:absolute;
    right:0px;
    bottom:0px;
    opacity:0.05;
    -webkit-transition-property:opacity;
    -webkit-transition-duration:1s;
    -moz-transition-property:opacity;
    -moz-transition-duration:1s;
    -o-transition-property:opacity;
    -o-transition-duration:1s;
}


#creativecommons:hover
{
    opacity:0.9;
}

.buttons
{
    display:block;
    opacity:0;
    cursor:pointer;
    
    position:absolute;
    top:20%;
    width:30%;
    height:60%;
    /*background-repeat: no-repeat;
    background-image: url(arrow.png);
    /*background-size: 100px 100px;*/
    
    -webkit-transition-property:opacity;
    -webkit-transition-duration:1s;
    -moz-transition-property:opacity;
    -moz-transition-duration:1s;
    -o-transition-property:opacity;
    -o-transition-duration:1s;
}

.buttons:hover
{
    opacity:0.6;
}


#previous
{ 
    left:0px; 
}

#previous div
{
    position:relative;
    top:40%;
    width:120px;
    height:120px;
    background-position: 0px 50%;
    background-repeat: no-repeat;
    background-image: url(arrow.png);
    
}

#next
{ 
    right:0px; 
}

#next div
{
    position:absolute;
    top:40%;
    right:0px;
    width:120px;
    height:120px;
    background-position: -120px 50%;
    background-repeat: no-repeat;
    background-image: url(arrow.png);
}

section h1, footer h1, nav a
{
    font-family: Dayrom, serif;
    font-weight: normal;
    text-transform: uppercase;
}



/* Définition des polices personnalisées */

@font-face
{
    font-family: 'BallparkWeiner';
    src: url('polices/ballpark.eot');
    src: url('polices/ballpark.eot?#iefix') format('embedded-opentype'),
         url('polices/ballpark.woff') format('woff'),
         url('polices/ballpark.ttf') format('truetype'),
         url('polices/ballpark.svg#BallparkWeiner') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face
{
    font-family: 'Dayrom';
    src: url('polices/dayrom.eot');
    src: url('polices/dayrom.eot?#iefix') format('embedded-opentype'),
         url('polices/dayrom.woff') format('woff'),
         url('polices/dayrom.ttf') format('truetype'),
         url('polices/dayrom.svg#Dayrom') format('svg');
    font-weight: normal;
    font-style: normal;
}