@import url(https://fonts.googleapis.com/css?family=Open+Sans:800);
@import url(//fonts.googleapis.com/css?family=Oswald:400,300,700);
@import url(//fonts.googleapis.com/css?family=Dosis:400,200,600,700);


html, body{
	margin:0;
	padding:0;
	height:100%;
}
.wrapper{
	min-height:100%;
	position:relative;
}
header{
	position:fixed;
	top:0;
	left:0;
	position: relative;
	top:0;
	z-index: 10000000;
	width:100%;
	font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
	height:102px;
	background:#000;
}
.whiteBar{
	width:100%;
	height:5px;
	background:#fff;
	position:relative;
	z-index:50;
}
.dl-trigger{
	display:none;
	float: right;
	background:#000;
	border: none;
	width:50px;
	height:50px;
	text-align: right;
	cursor: pointer;
	float: right;
}
.dl-trigger img{
	width:40px;
	height:auto;
	margin-right: 10px;
	margin-top:10px;
}
#menu-responsive{
	background:#000;
	width:170px;
	height:49px;
	position:absolute;
	top:50px;
	right:0;
	z-index:100;
}

#menu-responsive ul{
	list-style-type: none;
	text-align: left;
	padding:10px 25px;
	margin:0;
	position:absolute;
	top:50px;
	width:170px;
	z-index: 100;
	background: #000;
	right:0;
	opacity:0;
}

#menu-responsive ul li{
	list-style-type: none;
	padding:20px 0;
	margin:0;
	height:30px;
	line-height: 30px;
	display: block;
	border-bottom: 1px solid #333
}
#menu-responsive ul li:last-child{
	border-bottom:none;
}
#menu-responsive a, #menu-responsive a:visited{
	font-size: 14px;
	color:#fff;
	text-decoration: none;
	font-family: 'Oswald', sans-serif;
	text-transform: uppercase;
	padding: 0 5px;

}
#menu-responsive a:hover{
	color:#ccc;
}
.basic-links{
	float: right;
	margin:0;
	padding:0;
}
.basic-links li{
	border-right: 1px dotted #434343;
	margin:0;
	padding:0;
	height:30px;
}
.basic-links a{
	padding: 0 15px;
	line-height:30px;
}
.social-links{
	float:right;
	margin:0;
	padding:0 15px;
	font-size: 16px;
}
.social-links a:hover, .header-bar a:hover{
	color:#fc3e99;
}
.content-menu-bar{
	width:100%;
	max-width:900px;
	margin:0 auto;
}
.content-menu-bar{
	width:100%;
	max-width:1200px;
	margin:0 auto;
}
.header-bar {
	width:100%;
	height:30px;
	background:#bab1aa;
	font-size:12px;
	text-transform: uppercase;
	margin:0;
	padding:0;
}
.header-bar ul{
	list-style-type: none;
	text-align: right;

}
.header-bar ul li{
	display:inline-block;
	line-height: 30px;
}
.header-bar a{
	color:#434343;
	text-decoration: none;
}
header nav ul{
	list-style-type: none;
}
header nav ul li{
	display:inline-block;
	height:30px;
	margin-top: 3px;
	margin:0 15px;
}
header nav a{
	font-size: 18px;
	padding: 0 0 10px;
	font-family: 'Oswald', sans-serif;
	text-decoration: none;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	padding:0;
}
.contentMainMenu{
	margin:0 auto;
	padding:0;
	max-width:1200px;
}
.logo img{
	width:220px;
	height:auto;
	position: absolute;
	top: 52px;
	padding-left:15px;
}
header nav{
	width:100%;
	text-align: right;
	margin:0 auto;
}
header nav ul .selected{
	border-bottom:3px solid #fff;
}
header nav ul .link-film.selected, header nav ul .link-film:hover, #menu-responsive nav ul .link-film.selected, #menu-responsive  nav ul .link-film:hover{
	border-bottom: 3px solid #e3004f;
}
header nav ul .link-partners.selected, header nav ul .link-partners:hover, #menu-responsive nav ul .link-partners.selected, #menu-responsive  nav ul .link-partners:hover{
	border-bottom: 3px solid #88c64d;
}
header nav ul .link-extern.selected, header nav ul .link-extern:hover, #menu-responsive nav ul .link-extern.selected, #menu-responsive nav ul .link-extern:hover{
	border-bottom: 3px solid #ed7f10;
}

body{
	background: url("img/background-mobile.jpg") no-repeat center fixed;
	-webkit-background-size: cover;
	background-size: cover;
	-o-background-size: cover;
	-moz-background-size: cover;
}
.main{
	margin:0 auto;
	width:100%;
	max-width: 700px;
	text-align:center;
	padding-bottom:125px;
	min-height:600px;
}

footer{
	width:100%;
	background-color:#000;
	position:absolute;
	bottom:0;
	font-size: 16px;
    font-weight: bold;
    font-family: 'Dosis', sans-serif;
}
footer nav{
	width:100%;
	max-width:900px;
	text-align: center;
	margin:0 auto;
}
footer nav ul{
	height:30px;
	padding-left: 0;
}
footer nav ul li{
	display:inline-block;
	margin:0;
	padding:0;
	margin-top:10px;
}
footer nav ul li a{
	display: block;
	font-size:12px;
	color:#fff;
	text-decoration: none;
	padding:0 15px;
	border-right:1px solid #fff;
	font-size: 16px;
    font-weight: bold;
    font-family: 'Dosis', sans-serif;
}
footer nav ul li:last-child a{
	border-right:none;
}
footer nav ul li a:hover{
	text-decoration: underline;
}
footer .content-copyright{
	width:100%;
	margin:0;
	padding:0;
	background: #c3b9b1;
	height:53px;
}
footer .copyright{
	font-size:11px;
	text-align: left;
	width:100%;
	max-width: 900px;
	margin:0 auto;
}
footer .copyright p{
	text-align: left;
	float: left;
	margin-top:15px;
	max-width: 80%;
	padding:0 5px;
}
footer .copyright a{
	color:#202020;
}
footer .copyright a:hover{
	color:#000;
}
footer .copyright img{
	text-align: left;
	float: right;
	margin-top: 10px;
	margin-right:5px;
	max-width: 15%;
}
h2{
	font-family: 'Oswald', sans-serif;
	color:#fff;
	font-weight:lighter;
	text-align: center;
	margin:0 auto;
}

.title-block {
    text-align: center;
}
h3{
	color: #fff;
	font-family: 'Oswald', sans-serif;
    font-size: 15px;
    font-weight: normal;
    letter-spacing: 2px;
    line-height: 0;
    padding: 30px 0 0;
    margin: 0;
    text-transform: uppercase;
	text-shadow: 1px 1px 3px rgba(0,0,0, 0.9);
}
h1{
	color: #332f3b;
	font-family: 'Oswald', sans-serif;
    font-size: 40px;
    font-weight: normal;
    letter-spacing: -1px;
    margin: 20px auto 10px;
    padding: 0;
    text-align: center;
    line-height: 41px
}
.title-block .separator{
    margin-bottom: 25px !important;
    height:38px;
}
#etape-3 .content-views{
	padding-top:30px;
}
.content-views{
	width:80%;
	width: -webkit-calc(100% - 40px);
	width: -moz-calc(100% - 40px);
	width: calc(100% - 40px);
	padding:0 20px;
	margin: 0 auto;
	overflow: hidden;
}
.view{
	width: 100%;
	overflow: hidden;
    position: relative;
    bottom:0px;
  	opacity:1;
  	margin-top:20px !important;
    text-align: center;
    cursor: pointer;
    background: #fff url('img/background-views-3.jpg') no-repeat center;
    -webkit-background-size: cover; 
    -o-background-size: cover; 
    -moz-background-size: cover; 
  	background-size: cover; 
    line-height: 100%;
    min-width:150px;
    width:100%;
    height:100%;
}
 .language{
 	float: right;
 }
 .dl-trigger{
 	float: right;
 }
 .language a{
 	display: block;
    width: 25px;
    height: 15px;
    margin-top: 10px;
    overflow: hidden;
    padding: 0;
 }   
#lang-en{
	background: url('img/flag-en.png') no-repeat top left;
    margin:15px 15px 0 10px;
}
#lang-fr{
	background: url('img/flag-fr.png') no-repeat top left;
    margin:5px 15px 0 10px;
}
 
#lang-en:hover, #lang-en.selected, #lang-fr:hover, #lang-fr.selected{
 	background-position: -25px 0;
 }  
 .language{
 	float: right;
 }
 .dl-trigger{
 	float: right;
 }
 .language a{
 	display: block;
    width: 25px;
    height: 15px;
    margin-top: 10px;
    overflow: hidden;
    padding: 0;
 }   
#lang-en{
	background: url('img/flag-en.png') no-repeat top left;
    margin:15px 15px 0 10px;
}
#lang-fr{
	background: url('img/flag-fr.png') no-repeat top left;
    margin:5px 15px 0 10px;
}
 
#lang-en:hover, #lang-en.selected, #lang-fr:hover, #lang-fr.selected{
 	background-position: -25px 0;
 } 

.view img{
	width:100%;
	display: block;
    position: relative;
    transform: scaleY(1);
	transition: all 0.7s ease-in-out;
}
.view .mask{
    width: 100%;
    height: 100%;
    line-height: 100% !important;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    text-align: left;
    background-color: rgba(255, 231, 179, 0.3); 
    transition: all 0.5s linear;
    -webkit-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    opacity: 0;
}

.view a{
	position: absolute;
	bottom:10px;
	left:10px;
	text-transform: uppercase;
    color: #000;
    font-weight: bold;
	font-family: 'Oswald', sans-serif;
    font-size: 1.75em;
    display:block;
    line-height:0.95em;
    border-left: 5px solid #000;
    width: 90%;
    padding-left:5px;
 	text-decoration: none;
    background-color: rgba(0, 0, 0, 0);
    opacity: 0;
    transform: scale(0);
    transition: all 0.5s linear;

}
.view:hover img { 
	transform: scale(10);
    opacity: 0;
}
.view:hover .mask{ 
	opacity: 1;
}																			 
.view:hover a{ 
    transform: scale(1);
    opacity: 1;
}

.disabled {
	display: none;
}

.disabled img{
	opacity:0.5;
}
.disabled.view:hover img{
	transition:none !important;
	-o-transition:none !important;
	-webkit-transition:none !important;
	-moz-transition:none !important;
	display: block;
	animation:none !important;
	-o-animation:none !important;
	-webkit-animation:none !important;
	-moz-animation:none !important;
	transform:none !important;
	-o-transform:none !important;
	-webkit-transform:none !important;
	-moz-transform:none !important;
	opacity:0.5;
}
.disabled.view{
	background: #fff url('img/background-views-disabled-2.jpg') no-repeat center;
	background-size: 30% 100%;
	-o-background-size: 30% 100%;
	-moz-background-size: 30% 100%;
	-webkit-background-size: 30% 100%;
}
.disabled .mask a{
	color:#727272;
	border-left-color:#727272;
	padding-left:35px;
	background-image: url('img/background-views-disabled.png');
	background-position: 4px top;
	background-size: 25px 25px;
	-o-background-size: 25px 25px;
	-moz-background-size: 25px 25px;
	-webkit-background-size: 25px 25px;
	background-repeat: no-repeat;

}
	
.col-2{
	float: none;
	display: inline-block;
	margin:0.5%;
	max-width:calc(94% / 3);

}
.col-3{
	margin:0.5%;
	max-width:calc(94% / 3);

}
.col-4{
	margin:0.5%;
	max-width:calc(96% / 4);

}
.break{
	clear: both;
	margin-bottom:30px;
	color:transparent;
	background: transparent;
	border:none;
}

/*
-----------------------------------------------------------------------------------------
Accueil
--------------------------------------------------------------------------------------------
*/
#logo-accueil{
	margin:0 auto;
	margin-top:15%;
	margin-bottom:2%;
	width:calc(100% - 30px);
	max-width:490px;
	height:auto;
	padding:0 15px;
}
.form-accueil{
	margin:25px auto;
	width:100%;
	max-width: 600px;
	height:150px;
	text-align: center;
}

.form-accueil input{
	font-family: 'Dosis', sans-serif;
	font-size: 17px;
	padding:15px 25px;
	color:#7a7a7a;
}
.form-accueil input[type="email"]{
	width:80%;
	width: -webkit-calc(100% - 30px);
	width: -moz-calc(100% - 30px);
	width: calc(100% - 30px);
    max-width: 427px;
    margin-bottom: 5px;
}
.form-accueil input[type="submit"]{
	background:#7a7a7a;
	color:#fff;
	border: none;
	width:100%;
	max-width:480px;
	margin:0 auto; 
}
.form-accueil input[type="submit"]:hover{
	background:#202020;
	color:#fff;
}
.form-accueil .left{
	width:40%;
	width: calc(50% - 59px);
	width: -webkit-calc(50% - 59px);
	width: -moz-calc(50% - 59px);
	max-width: 50%;
	float: left;
	margin-bottom:10px;
}
.form-accueil .left:nth-child(2){
	margin-left:10px;
}
.accueil h2{
	line-height:1em;
	padding:0 15px;
	width:90%;
	width:-webkit-calc(100% - 30px);
	width:-moz-calc(100% - 30px);
	width:calc(100% - 30px);
	max-width:480px;
	font-size: 2em;
	letter-spacing: 1px;
}
.btn-facebook{
	margin-top:25px;
}
footer nav a.selected{
	font-weight: bold;
} 
#etape-1 h2{
	line-height:1em;
}
/*
-----------------------------------------------------------------------------------------
Etape 2
--------------------------------------------------------------------------------------------
*/
.title-block .separator.two{
	background: url("img/separators/separator-genre.png") no-repeat scroll center center rgba(0, 0, 0, 0);
}
#etape-2 .content-views{
	padding-top: 60px;
}

/*
-----------------------------------------------------------------------------------------
Activitées
--------------------------------------------------------------------------------------------
*/

.horloge{
	display: none;
}
.title-block #genre{
	background: url("img/separators/separator-genre.png") no-repeat scroll center center rgba(0, 0, 0, 0);
}
.title-block #matin{
	background: url("img/separators/separator-matin.png") no-repeat scroll center center rgba(0, 0, 0, 0);
}
.title-block #midi{
	background: url("img/separators/separator-midi.png") no-repeat scroll center center rgba(0, 0, 0, 0);
}
.title-block #apres-midi{
	background: url("img/separators/separator-apres-midi.png") no-repeat scroll center center rgba(0, 0, 0, 0);
}
.title-block #diner{
	background: url("img/separators/separator-diner.png") no-repeat scroll center center rgba(0, 0, 0, 0);
}
.title-block #soiree{
	background: url("img/separators/separator-soiree.png") no-repeat scroll center center rgba(0, 0, 0, 0);
}
.title-block #musique{
	background: url("img/separators/separator-musique.png") no-repeat scroll center center rgba(0, 0, 0, 0);
}
.title-block #final{
	background: url("img/separators/separator-final.png") no-repeat scroll center center rgba(0, 0, 0, 0);
}
.title-block #loie{
	background: url("img/separators/separator-loie.png") no-repeat scroll center center rgba(0, 0, 0, 0);
}

.time h2{
	font-family: "glamor-regular";
	font-size: 80px;
	color:#332f3b;
	margin-bottom: 0;
}

/*Tsuki CSS*/

#after_text {
	font-family: 'Oswald', sans-serif;
    font-size: 20px;
    font-weight: normal;
    position: absolute;
    text-align: center;
    width: 100%;
    max-width: 700px;
    display: none;
    background:#000;
	height: 371px;
}

#after_text a {
    text-decoration: none;
    color: #fff;
}
.title-prepare{
	color:#f34aa2;
	font-size: 22px;
	font-weight: bold;
}
a.btn-reserver{
	display: block;
	padding:5px 20px;
	width:110px;
	background-color:#f34aa2;
	color:#fff;
	text-align: center;
	border-radius: 8px 8px;
	margin: 0 auto;
	margin-top: 30px;
	text-decoration: none;
	font-size: 18px;
	font-weight: 400;
}
a.btn-reserver:hover{
	color:#fff;
	background-color: #bf3d81;
}
.title-partage{
	font-size: 18px;
	padding-bottom:0;
	margin-bottom: 0;
	color: white;
}
#shared {
	padding:0;
	margin-top: 0;
	margin-bottom: 15px;
}
#shared a{
	font-family: 'Dosis', sans-serif;
	color: #3688BB;
	font-size: 18px;
}
#after_text h2{
	font-size: 1.2em;
	color:#f34aa2;
	margin-bottom: 10px
}
#last_pannel h2,#part_1 h2{
	font-size: 1.2em;
	color:#f34aa2;
	margin-bottom: 10px
}
#last_pannel img.logo{
	margin-top: 0px
}
#facebook_share, #twitter_share{
	margin-top:10px;
}


      #container {
        position: relative;
    	padding-bottom: 54.6%;
    	padding-top: 25px;
    	height: 0;
      }
      iframe{
      	position: absolute;
    	top: 0;
   		left: 0;
    	width: 100%;
    	height: 100%;
      }
      

      #player {
        z-index: 1;
      }

      #player1 {
        display: none;
        position: relative;
        z-index: 1;
      }

      #music {
        display: none;
      }

      #title {
        color: #fff;
        font-family: 'Helvetica', 'Arial', 'sans serrif';
      }

      #loader {
        width: 30px;
        height: 25px;
        margin: auto;
        display: flex;
        flex-flow: row no-wrap;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 50%;
        margin-top: -12px;
        left: 50%;
        margin-left: -15px;
      }

      #loader.loaded .bar {
        width: 5px;
        height: 5px;
        margin-right: 1px;
        border-radius: 5px;
        background: #ffffff;
        flex: 1 5px;
      }
      #loader.loaded .bar:last-child {
        margin: 0;
      }
      #loader.loaded .bar:nth-child(1) {
        animation: load 0.3s ease-in-out 0.1s infinite alternate;
      }
      #loader.loaded .bar:nth-child(2) {
        animation: load 0.3s ease-in-out 0.2s infinite alternate;
      }
      #loader.loaded .bar:nth-child(3) {
        animation: load 0.3s ease-in-out 0.3s infinite alternate;
      }
      #loader.loaded .bar:nth-child(4) {
        animation: load 0.3s ease-in-out 0.4s infinite alternate;
      }
      #loader.loaded .bar:nth-child(5) {
        animation: load 0.3s ease-in-out 0.5s infinite alternate;
      }

      @keyframes load {
        100% {
          height: 25px;
        }
      }
#copyright{
	box-sizing: border-box !important;
	font-size:12px;
	text-align: center;
	width:100%;
	margin:0 auto;
	padding: 0px 5px 5px;
	color: #999999;
	text-align: center;
	max-width: 630px;
}
#copyright a{
	color:#999999;
}
#copyright a:hover{
	color:#fafafa;
}
/*************************************************************
Etape musique
*********************************************************************************/
.title-block .separator.sep-music{
	background: url("img/separators/separator-musique.png") no-repeat scroll center center rgba(0, 0, 0, 0);
}

/*********************************************************************
Nos partenaires
****************************************************************************************/
.partenaires{
	background: url('img/separators/bg-cannes-partenaires.jpg') no-repeat center top fixed;
	background-size: cover;
	-moz-background-size:cover;
	-o-background-size:cover;
	-webkit-background-size:cover;
}

.content-partenaires{
	width:100%;
	max-width: 1200px;
}
.name-partenaire{
	position:absolute;
	top:10px;
	z-index: 100;
}
.title-block #parts{
	background: url("img/separators/separator-partenaires.png") no-repeat scroll center center rgba(0, 0, 0, 0);
}
.margin-big{
	margin-top:40px;
}
.visible{
	display:block;
}

.partner{
    display: block;
    height: auto;
    float: left;
    margin: 10px;
    width: 20%;
    width: -webkit-calc(25% - 20px);
    width: -moz-calc(25% - 20px);
    width: calc(25% - 20px);
    position: relative;
    z-index: 50;
    height: 148px;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.images-partner{
	width:200%;
	height:100%;
	max-height: 100%;
	position:absolute;
	top:0;
	right:0;

}
.images-partner img{
	float: left;
	max-height: 100%;
	width:50%;
	max-width: 50%;
	margin:0;
	padding:0;
}

/*************************************************************
Pages mentions légales & CGU
*********************************************************************************/
.mentions-legales{
	background:#fff !important;
}
.content-mentions-legales h3{
	text-shadow:none;
	color:#262322;
	padding:0;
	text-align: left;
	margin:25px 0;
	text-transform: none;
	font-size: 18px;
}
.content-mentions-legales{
	text-align: left;
	color:#333;
	font-size: 16px;
	color:#000;
    font-family: 'Dosis', sans-serif;
}
.mentions-legales .content{
	padding:0 20px;
}
.content-mentions-legales h2{
	color:#333;
	text-align: left;
	font-weight: bold;
}
.content-mentions-legales a{
	color:#23527c;
}
.content-mentions-legales a:hover{
	color:#ec5a62;
}


/********************************************************
Shared
***************************************************************************************/
.title-block .separator.five{
	background: url("img/separators/separator-final.png") no-repeat scroll center center rgba(0, 0, 0, 0);
}

#logout {
    cursor: pointer;
    padding: 0 10px;
    display: none;
    height: 30px;
    line-height: 30px;
    border-left: 1px dotted #434343;
    display: none;
    color: #434343;
}



#custom {
	display: none;
    color: #fff;
    position: absolute;
    top: 20%;
    margin: 0 auto;
    width: 100%;
	font-family: 'Oswald', sans-serif;
    font-weight: normal;
    font-size: 35px;
    z-index: 2;
	-webkit-transform: scale(1,1);
	-moz-transform: scale(1,1);
	transform: scale(1,1);
  -webkit-transition: transform 5s ease-in;
  -moz-transition: transform 5s ease-in;
  transition: transform 5s ease-in;
}

#custom.zoom {
  -webkit-transform: scale(1.25,1.25);
  -moz-transform: scale(1.25,1.25);
  transform: scale(1.25,1.25);
  -webkit-transition: transform 5s ease-in;
  -moz-transition: transform 5s ease-in;
  transition: transform 5s ease-in;
}


#custom img {
	width: 150px;
	margin-bottom: 30px;
}

#demo_1, #demo_2 {
	display: none;
}

#last_pannel.zoom {
  -webkit-transform: scale(1.25,1.25);
  -moz-transform: scale(1.25,1.25);
  transform: scale(1.25,1.25);
  -webkit-transition: transform 5s ease-in;
  -moz-transition: transform 5s ease-in;
  transition: transform 5s ease-in;
}


#last_pannel {
	display: none;
	-webkit-transform: scale(1,1);
	-moz-transform: scale(1,1);
	transform: scale(1,1);
  -webkit-transition: transform 5s ease-in;
  -moz-transition: transform 5s ease-in;
  transition: transform 5s ease-in;
color: #fff;
font-family: 'Oswald', sans-serif;
font-size: 22px;
font-weight: normal;
letter-spacing: -1px;
margin: 5px 0px 10px;
padding: 0px;
text-align: center;
position: absolute;
z-index: 2;
padding-top: 50px;
width: 854px;
}

#last_pannel a {
	color: #3688BB;
	text-decoration: none;
}

#last_pannel img.logo {
width: 250px;
margin-top: 20px;
}

#last_pannel img.social {
	width: 55px;
}

#after_text img.logo, #custom img.logo{
margin-top: 20px;
}

.p9 {
    font-family: 'Open Sans', sans-serif;
    position: relative;
	text-transform: uppercase;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    display: block;
    font-size: 4.875em;
    height: 95px;
    width: 500px;
}

.music-choice {
	display: inline-block;
	margin-top: 50px;
}

#music_1 .p9 a{
color: #fff;
text-decoration: none;
  width: 500px;
  height: 55px;
  line-height: 55px;
  -webkit-transition: all 0.5s cubic-bezier(0, 0.28, 0, 1);
  -moz-transition: all 0.5s cubic-bezier(0, 0.28, 0, 1);
  -ms-transition: all 0.5s cubic-bezier(0, 0.28, 0, 1);
  -o-transition: all 0.5s cubic-bezier(0, 0.28, 0, 1);
  transition: all 0.5s cubic-bezier(0, 0.28, 0, 1);
}
#music_2 .p9 a {
	color:#ccc;
	text-decoration: none;
	width: 500px;
	height: 55px;
  	line-height: 55px;
  	cursor: not-allowed;
}
#music_2 .p9{
  	background: url('img/music-disabled.png') no-repeat 15px 27px;
  	cursor: not-allowed;
}
  	

#music_1 .p9 a:before,
#music_1 .p9 a:after,
#music_1 .p9 a div {
  content: '';
  height: 9px;
  background-color: #fff;
  position: absolute;
  right: 89%;
  width: 0;
}
#music_1 .p9 a:before {
  top: 75px;
}
#music_1 .p9 a > div:first-of-type {
  top: 43px;
}
#music_1 .p9 a > div:last-of-type {
  top: 28px;
}
#music_1 .p9 a:after {
  top: 59px;
}
#music_1 .p9 a:hover {
  padding-left: 40px;
}
#music_1 .p9 a:hover:before {
  -webkit-animation: bar1 0.8s infinite;
  -moz-animation: bar1 0.8s infinite;
  -ms-animation: bar1 0.8s infinite;
  animation: bar1 0.8s infinite;
}
@-moz-keyframes bar1 {
  0% {
    width: 10px;
  }
  5% {
    width: 5px;
  }
  16% {
    width: 25px;
  }
  32% {
    width: 18px;
  }
  50% {
    width: 28px;
  }
  66% {
    width: 50px;
  }
  73% {
    width: 45px;
  }
  100% {
    width: 10px;
  }
}
@-webkit-keyframes bar1 {
  0% {
    width: 10px;
  }
  5% {
    width: 5px;
  }
  16% {
    width: 25px;
  }
  32% {
    width: 18px;
  }
  50% {
    width: 28px;
  }
  66% {
    width: 50px;
  }
  73% {
    width: 45px;
  }
  100% {
    width: 10px;
  }
}
@keyframes bar1 {
  0% {
    width: 10px;
  }
  5% {
    width: 5px;
  }
  16% {
    width: 25px;
  }
  32% {
    width: 18px;
  }
  50% {
    width: 28px;
  }
  66% {
    width: 50px;
  }
  73% {
    width: 45px;
  }
  100% {
    width: 10px;
  }
}
#music_1 .p9 a:hover > div:last-of-type {
  -webkit-animation: bar2 0.8s infinite;
  -moz-animation: bar2 0.8s infinite;
  -ms-animation: bar2 0.8s infinite;
  animation: bar2 0.8s infinite;
}
@-moz-keyframes bar2 {
  0% {
    width: 50px;
  }
  5% {
    width: 15px;
  }
  16% {
    width: 55px;
  }
  32% {
    width: 18px;
  }
  50% {
    width: 38px;
  }
  66% {
    width: 50px;
  }
  73% {
    width: 14px;
  }
  100% {
    width: 50px;
  }
}
@-webkit-keyframes bar2 {
  0% {
    width: 50px;
  }
  5% {
    width: 15px;
  }
  16% {
    width: 55px;
  }
  32% {
    width: 18px;
  }
  50% {
    width: 38px;
  }
  66% {
    width: 50px;
  }
  73% {
    width: 14px;
  }
  100% {
    width: 50px;
  }
}
@keyframes bar2 {
  0% {
    width: 50px;
  }
  5% {
    width: 15px;
  }
  16% {
    width: 55px;
  }
  32% {
    width: 18px;
  }
  50% {
    width: 38px;
  }
  66% {
    width: 50px;
  }
  73% {
    width: 14px;
  }
  100% {
    width: 50px;
  }
}
#music_1 .p9 a:hover > div:first-of-type {
  -webkit-animation: bar3 0.8s infinite;
  -moz-animation: bar3 0.8s infinite;
  -ms-animation: bar3 0.8s infinite;
  animation: bar3 0.8s infinite;
}
@-moz-keyframes bar3 {
  0% {
    width: 0;
  }
  5% {
    width: 35px;
  }
  16% {
    width: 15px;
  }
  32% {
    width: 25px;
  }
  50% {
    width: 5px;
  }
  66% {
    width: 20px;
  }
  73% {
    width: 10px;
  }
  100% {
    width: 30px;
  }
}
@-webkit-keyframes bar3 {
  0% {
    width: 0;
  }
  5% {
    width: 35px;
  }
  16% {
    width: 15px;
  }
  32% {
    width: 25px;
  }
  50% {
    width: 5px;
  }
  66% {
    width: 20px;
  }
  73% {
    width: 10px;
  }
  100% {
    width: 30px;
  }
}
@keyframes bar3 {
  0% {
    width: 0;
  }
  5% {
    width: 35px;
  }
  16% {
    width: 15px;
  }
  32% {
    width: 25px;
  }
  50% {
    width: 5px;
  }
  66% {
    width: 20px;
  }
  73% {
    width: 10px;
  }
  100% {
    width: 30px;
  }
}
#music_1 .p9 a:hover:after {
  -webkit-animation: bar4 0.8s infinite;
  -moz-animation: bar4 0.8s infinite;
  -ms-animation: bar4 0.8s infinite;
  animation: bar4 0.8s infinite;
}
@-moz-keyframes bar4 {
  0% {
    width: 10px;
  }
  5% {
    width: 5px;
  }
  16% {
    width: 15px;
  }
  32% {
    width: 25px;
  }
  50% {
    width: 20px;
  }
  66% {
    width: 30px;
  }
  73% {
    width: 20px;
  }
  100% {
    width: 10px;
  }
}
@-webkit-keyframes bar4 {
  0% {
    width: 10px;
  }
  5% {
    width: 5px;
  }
  16% {
    width: 15px;
  }
  32% {
    width: 25px;
  }
  50% {
    width: 20px;
  }
  66% {
    width: 30px;
  }
  73% {
    width: 20px;
  }
  100% {
    width: 10px;
  }
}
@keyframes bar4 {
  0% {
    width: 10px;
  }
  5% {
    width: 5px;
  }
  16% {
    width: 15px;
  }
  32% {
    width: 25px;
  }
  50% {
    width: 20px;
  }
  66% {
    width: 30px;
  }
  73% {
    width: 20px;
  }
  100% {
    width: 10px;
  }
}

#black_screen {
	position: absolute;
	width: 854px;
	height: 480px;
	background: rgba(0, 0, 0, 1);
	z-index: 0;
	display: none;
}

#prevent_yt {
	position: absolute;
	bottom: 0px;
	right: 0px;
	height: 55px;
	width: 100px;
	z-index: 2;
}

.disabled img {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray; /* IE 6-9 */
}

.disabled {
	cursor: not-allowed;
}

.view .mask {
	opacity: 1;
	height: 45px;
	background: rgba(255, 255, 255, 0.5);
	top: initial;
	bottom: 0;
}

.view .mask a {
    opacity: 1;
    transform: scale(1);
}

.disabled .mask{
	background-color: rgba(255, 255, 255, 0.2);
}
header nav ul{
	display:none;
}
#menu-responsive, .dl-trigger{
	display: block;
}
svg{
	display: none !important;
}
.view, .col-3, .col-4, .col-2{
	max-width:calc(100% - 1%);
	max-height: 100%;
	height:100%;
	clear: both;
}
body{
	background:url("img/background-mobile.jpg") no-repeat center fixed !important;
}

#etape-2 .content-views{
	margin-top: 0px;
	padding-top: 0px;
}
#agreement {
    display: block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: 'Dosis', sans-serif;
    color: #fff;
    font-weight: lighter;
    background: rgba(0,0,0,0.5);
    width: 100%;
    max-width: 480px;
    height: 58px;
    margin: 10px auto;
    line-height: 14px;
    padding: 10px;
}
#agreement label {
    font-size: 13px;
    float: left;
    width:350px;
    max-width: 90%;
/*    width: -webkit-calc(100% - 30px);
    width: -moz-calc(100% - 30px);
    width: calc(100% - 30px);*/
    text-align: left;
    margin-top: 3px;
}
#agreement input {
    margin-top: 5px;
    float: left;
/*    width: 15px;
    max-width: 15px;*/
    margin-right: 5px;
}
#agreement input#checkbox{
	width:auto;
	margin-top: 3px;
    float: left;
    margin-right: 5px;
}
.contact.mobile{
	background:url("img/background-mobile.jpg") no-repeat center fixed !important;
}
.contact .content-mentions-legales{
	background-color: rgba(255,255,255,0.8);
	padding:20px;
}

#cache {
    width: 854px;
    height: 480px;
    min-height: 100%;
    position: absolute;
    top: 0;
    z-index: 100000000000;
}
/*@supports (-webkit-appearance:none) {}*/