body, html{
    height:100%;
    text-rendering: optimizelegibility;
    -webkit-font-smoothing:antialiased;
}

body{
    background:url(../img/body-back.jpg) no-repeat center center fixed;
    background-size:cover;
    -moz-background-size:cover;
    -webkit-background-size:cover;
}

.close{
    background:url(../img/navigation-icons.png) no-repeat -46px 0px;
    cursor:pointer;
    display:block;
    height:46px;
    position:absolute;
    right:-30px;
    top:-30px;
    width:46px;
    z-index:1000;
}

i{
	font-style:italic;
}

#content{
    display:none;
}
/*********************************************************************************************************/
/* INTRO */
/*********************************************************************************************************/

#intro{
    display:none;
    height:100%;
    overflow:hidden;
    position:absolute;
    width:100%;
    z-index:0;
}
#intro div{
    position:absolute;
    top:50%;
    z-index:50;
}

#triomphres-et{
    background:url(../img/intro-triomphes-et.png);
    height:66px;
    left:50%;
    margin-left:-1200px;
    margin-top:-100px;
    width:600px;
}

#deceptions{
    background:url(../img/intro-deceptions.png);
    height:75px;
    margin-right:-1020px;
    margin-top:-20px;
    right:50%;
    width:510px;
}

#les-evenements-marquants{
    background:url(../img/intro-les-evenements-marquants.png);
    display:none;
    height:24px;
    left:50%;
    margin-left:-271px;
    margin-top:70px;
    width:542px;
}

/*********************************************************************************************************/
/* HEADER */
/*********************************************************************************************************/
#header{
    height:66px;
    left:0px;
    overflow:hidden;
    position:absolute;
    top:0px;
    width:100%;
    z-index:1000;
}

#header-logo{
    display:block;
    height:66px;
    left:0px;
    position:absolute;
    top:0px;
    width:440px;
    z-index:500;
}

#header-logo img{
    width:100%;
}

/*********************************************************************************************************/
/* MENU */
/*********************************************************************************************************/
#menu{
    bottom:50px;
    display:none;
    left:0px;
    overflow:hidden;
    position:absolute;
    right:0px;
    top:80px;
}

#menu-content{
    height:100%;
}

.menu-event{
    background:#ffffff;
    background-repeat:no-repeat;
    cursor:pointer;
    float:left;
    height:100%;
    margin-right:20px;
    position:relative;
    overflow:hidden;
    width:400px;
}

.menu-image img{
	width:100%;
}

.menu-event:first-child{
    margin-left:20px;
}

.menu-event:last-child{
    margin-right:20px;
}

.menu-event-content{
    background:#11293c;
    border-top:solid 5px #fac709;
    bottom:0px;
    padding:30px 0px;
    position:absolute;
    width:100%;
}

.menu-event-content-titre{
    color:#FFFFFF;
    display:block;
    font-family: 'Fjalla One', sans-serif;
    font-size:200%;
    padding:0px 30px;
    text-transform:uppercase;
}

.menu-event-content-activite{
    color:#99ccff;
    display:block;
    font-family: 'Open Sans', sans-serif;
	font-size:80%;
	font-weight:bold;
	line-height:140%;
	margin-bottom:5px;
    padding:0px 30px;
    text-transform:uppercase;
}

/*********************************************************************************************************/
/* NAVIGATION */
/*********************************************************************************************************/
#navigation{
    height:46px;
    position:absolute;
    right:30px;
    top:30px;
    width:146px;
    z-index:1000;
}

#navigation li{
    display:inline-block;
}

#navigation li a{
    background-image:url(../img/navigation-icons.png);
    display:block;
    height:46px;
    width:46px;
}

a.nav-left:link, a.nav-left:visited{background-position:0px 0px;}
a.nav-close:link, a.nav-close:visited{background-position:-46px 0px;}
a.nav-right:link, a.nav-right:visited{background-position:-92px 0px;}

a.nav-left:hover{background-position:0px -46px;}
a.nav-close:hover{background-position:-46px -46px;}
a.nav-right:hover{background-position:-92px -46px;}

#keyboard{
    background-image:url(../img/keyboard.png);
    background-position:left top;
    display:none;
    height:137px;
    left:50%;
    margin-left:-79px;
    margin-top:-36px;
    position:absolute;
    top:50%;
    width:159px;
    z-index:500;
}

#keyboard.right{
    background-position:right top;
}

/*********************************************************************************************************/
/* EVENT */
/*********************************************************************************************************/
#events{
    display:none;
}

.event{
    bottom:30px;
    display:none;
    left:0px;
    position:absolute;
    right:0px;
    top:0px;
}

.event-back{
	background-attachment:fixed;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
	display:none;
	height:100%;
	position:absolute;
	width:100%;
	z-index:0;
}

.event-content{
    bottom:50px;
    left:50px;
    position:absolute;
    width:40%;
}

.event-titre{
    margin-bottom:20px;
}

.event-titre span{
    background:#11293c;
    color:#ffffff;
    font-family: 'Fjalla One', sans-serif;
    font-size:300%;
    line-height:140%;
    padding:10px 10px;
    text-transform:uppercase;
    white-space:pre-wrap;
}

.event-content p{
    font-family: 'Open Sans', sans-serif;
    font-size:95%;
    line-height:140%;
}

.event-more{
    margin:15px 0px;
}

.event-more li{
    display:inline-block;
    margin:8px 2px 8px 0px;
}

.event-more li a:link,
.event-more li a:visited{
    background:#11293c;
    color:#FFFFFF;
    font-family: 'Open Sans', sans-serif;
    font-size:90%;
    font-weight:bold;
    padding:5px 10px;
    text-decoration:none;
    text-transform:uppercase;
    transition:background-color 0.3s ease;
    -webkit-transition:background-color 0.3s ease;
    -moz-transition:background-color 0.3s ease;
}

.event-more li a:hover{
    background:#a71e2a;
}

.photo-credit{
    color:#333333;
    font-family: 'Open Sans', sans-serif;
    font-size:70%;
    font-style:italic;
    font-weight:600;
}

.event-header-mobile{
    background-position:center top;
    background-repeat:no-repeat;
    background-size:cover;
    display:none;
    margin-top:-66px;
    position:relative;
    width:100%;
}

.event-header-mobile img{
    width:100%;
}

/*********************************************************************************************************/
/* TWITTER */
/*********************************************************************************************************/

.twitter{
    background:#FFFFFF;
    bottom:50px;
    box-shadow:3px 3px 8px rgba(0,0,0,0.30);
    max-width:400px;
    position:absolute;
    right:50px;
}

.twitter-icon{
    background:url(../img/twitter-icon.png);
    height:33px;
    left:-15px;
    position:absolute;
    top:-12px;
    width:40px;
}

.twitter-content{
    margin:0px 20px;
    padding:15px 0px;
}

.twitter-content p a:link,
.twitter-content p a:visited{
    color:#00263a;
    display:block;
    font-style:normal;
    font-weight:600;
    margin-bottom:5px;
    text-decoration:none;
}

.twitter-content p a:hover{
    text-decoration:underline;
}

.twitter-content p{
    color:#333333;
    font-family: 'Open Sans', sans-serif;
    font-size:80%;
    font-style:italic;
    line-height:130%;
}

/*********************************************************************************************************/
/* VIDEO PHOTO */
/*********************************************************************************************************/

#video-photo{
    background:url(../img/loading.gif) center center #000000;
    border:solid 15px #FFFFFF;
    box-shadow:0px 0px 10px rgba(0,0,0,0.50);
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    display:none;
    height:537px;
    left:50%;
    margin-left:-477px;
    margin-top:-268px;
    position:fixed;
    top:50%;
    width:955px;
    z-index:500;
}

#video-photo-content{
	height:100%;
    position:relative;
}

#video-photo iframe{
    height:507px;
    position:absolute;
    width:925px;
    z-index:500;
}

#video-photo a.nav-left,
#video-photo a.nav-right{
    background-image:url(../img/navigation-icons.png);
    display:block;
    height:46px;
    margin-top:-23px;
    position:absolute;  
    top:50%;
    width:46px;
    z-index:1000;
}

#video-photo a.nav-left{left:-30px;}
#video-photo a.nav-right{right:-30px;}

.video-photo{
	display:none;
    height:507px;
    overflow:hidden;
    position:absolute;
    top:0px;
    width:925px;
}

.video-photo p{
    background:rgba(0,0,0,0.75);
    bottom:0px;
    color:#FFFFFF;
    font-family: 'Open Sans', sans-serif;
    font-size:80%;
    line-height:140%;
    padding:10px 0px;
    position:absolute;
    text-align:center;
    width:100%;
    z-index:10;
}

.video-photo p span.photo-credit{
    color:#FFFFFF;
    font-size:90%;
}

.video-photo img{
    left:0px;
    position:absolute;
    top:0px;
    width:100%;
    z-index:0;
}

#photo-nb{
    left:20px;
    position:absolute;
    top:20px;
    z-index:500;
}

#photo-nb,
#photo-nb span{
    font-family: 'Open Sans', sans-serif;
    font-size:160%;
}

/*********************************************************************************************************/
/* FOOTER */
/*********************************************************************************************************/
#footer{
    background:#FFFFFF;
    box-shadow:0px 0px 5px #999999;
    bottom:0px;
    height:30px;
    left:0px;
    position:absolute;
    width:100%;
    z-index:1000;
}

#footer ul{
    float:left;
}

/* menu */

#footer-menu{
    margin-right:10px;
    margin-top:6px;
}

#footer-menu li{
    border-right:solid 1px #333333;
    display:inline-block;
    line-height:100%;
    padding:0px 8px;
}

#footer-menu li:last-child{
    border-right:none;
}

#footer-menu li a:link,
#footer-menu li a:visited{
    color:#333333;
    font-family: 'Open Sans', sans-serif;
    font-size:65%;
    text-decoration:none;
    text-transform:uppercase;
}

#footer-menu li a:hover{
    text-decoration:underline;
}

/* social */

#footer-social{
    margin-top:6px;
}

#footer-social li{
    display:inline-block;
}

#footer-social li a{
    background-image:url(../img/footer-social.png);
    display:block;
    height:16px;
    width:16px;
}

#footer-social li a.share-twitter{background-position:-16px 0px;}
#footer-social li a.share-google{background-position:-32px 0px;}
#footer-social li a.share-pinterest{background-position:-48px 0px;}

/* crédit */

#footer-credit:link,
#footer-credit:visited{
    color:#333333;
    display:block;
    font-family: 'Open Sans', sans-serif;
    font-size:65%;
    height:30px;
    line-height:30px;
    position:absolute;
    right:10px;
    text-decoration:none;
    text-transform:uppercase;
}

#footer-credit:hover{
    text-decoration:underline;
}

#credits{
    background:#FFFFFF;
    box-shadow:0px 0px 8px rgba(12,12,12,0.25);
    display:none;
    height:155px;
    font-family: 'Open Sans', sans-serif;
    font-size:80%;
    left:50%;
    line-height:120%;
    margin:-50px 0px 0px -150px;
    padding:10px;
    position:absolute;
    text-align:center;
    top:50%;
    width:300px;
    z-index:10000;
}

#credits strong{
    display:block;
    font-weight:bold;
}

#credits .close{
    right:-10px;
    top:-10px;
}