@charset UTF-8;
@font-face {font-family: Bubble; src: url(../font/Double_Bubble_shadow.otf);}
* {margin: 0; padding: 0; box-sizing: border-box;}

img {max-width: 100%;} /* pour que les images ne débordent jamais de leur boite parent */ 

body {width:100%; margin: auto; text-align: center; font-family: 'KoHo', 'Arial', sans-serif; font-size: 1.2em;}

#bandeau {z-index: -1; font-size: 0em;}

header {background-color: #000000;}

header {position: relative;}
header .bouton {position: absolute; text-decoration: none; padding: 5px 0; border: none;}

.bouton {background: url(../images/bouton_actif.svg) no-repeat; border: none; font-weight: bold; color: #cc0066;font-size: 1.2em;}
.bouton:hover {background: url(../images/bouton_hover.svg) no-repeat; color: #990066;}
.bouton:disabled {background: url(../images/bouton_inactif.svg) no-repeat; color: #ff0099;}

#logo {position: absolute;  top: 2%; left: 2%; width: 18%; max-width: 18em; border: none;}
header #langue {color: #ff0099; text-decoration: none; position: absolute; top:3%;}
#croix {font-size: 1.5em;}


header #reseaux {position: absolute;z-index: 3; text-align: right; margin-right: 2.5%; }

header #reseaux img {min-width: 40px; margin-top: 40px;}
header #reseaux ul {list-style: none;}
header #reseaux li {display: inline;}

main {position: relative;}
/*animation*/

#animation {width: 25%; margin: auto; position: absolute; left: 3%; top: 1%}
        
#note1, #note2 {width: 40px;}
#note3, #note4, #note7 {width: 45px;}
#note5, #note6 {width: 65px;}

#note1, #note2, #note3, #note4, #note5, #note6, #note7 {position: absolute; opacity: 0;}

      
#note1 {top: 50%; left: 28%; width: 6%;
    animation-name: note1;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-delay: 0.5s;
    animation-timing-function: ease-in-out
}     
#note2 {top: 30%; left: 26%; width: 6%;
    animation-name: note2;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-delay: 4s;
    animation-timing-function: ease-in-out
}     
#note3 {top: 36%; left: 26%; width: 7%;
    animation-name: note3;
    animation-duration: 5.5s;
    animation-iteration-count: infinite;
    animation-delay: 3s;
    animation-timing-function: ease-in-out
}       
#note4 {top: 58%; left: 28%; width: 7%;
    animation-name: note4;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-delay: 3.5s;
    animation-timing-function: ease-in-out
}        
#note5 {top: 45%; left: 25%; width: 10%;
    animation-name: note5;
    animation-duration: 5.5s;
    animation-iteration-count: infinite;
    animation-delay: 5.5s;
    animation-timing-function: ease-in-out
}              
#note6 {top: 54%; left: 28%; width: 10%;
    animation-name: note6;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-delay: 2.5s;
    animation-timing-function: ease-in-out
}              
#note7 {top: 65%; left: 27%; width: 7%;
    animation-name: note7;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-delay: 5s;
    animation-timing-function: ease-in-out
}               
        
        @keyframes note1 {
    0% {top: 50%; left: 28%; transform: rotate(-30deg); width: 6%;  opacity: 0;}
    25% {top: 45%; transform: rotate(20deg); width: 5%; opacity: 1;}
    60% {top: 4.5%; transform: rotate(160deg); width: 4%; opacity: 0.8;}
    100% {top: 5%; left: 95%; transform: rotate(220deg); width: 3%; opacity: 0;}
}
        @keyframes note2 {
    0% {top: 32%; left: 26%; transform: rotate(-30deg); width: 6%;  opacity: 0;}
    25% {top: 38%; transform: rotate(20deg); width: 5%; opacity: 1;}
    60% {top: 5%; transform: rotate(160deg); width: 4%; opacity: 0.8;}
    100% {top: 5%; left: 95%; transform: rotate(220deg); width: 3%; opacity: 0;}
}
        @keyframes note3 {
    0% {top: 36%; left: 26%; transform: rotate(-30deg); width: 7%;  opacity: 0;}
    25% {top: 40%; transform: rotate(20deg); width: 6%; opacity: 1;}
    60% {top: 6%; transform: rotate(160deg); width: 4%; opacity: 0.8;}
    100% {top: 5%; left: 95%; transform: rotate(220deg); width: 3%; opacity: 0;}
}  
        @keyframes note4 {
    0% {top: 58%; left: 28%; transform: rotate(-30deg); width: 7%;  opacity: 0;}
    25% {top: 49%; transform: rotate(20deg); width: 6%; opacity: 1;}
    60% {top: 4%; transform: rotate(160deg); width: 4%; opacity: 0.8;}
    100% {top: 5%; left: 95%; transform: rotate(220deg); width: 3%; opacity: 0;}
}  
        @keyframes note5 {
    0% {top: 45%; left: 25%; transform: rotate(-30deg); width: 10%;  opacity: 0;}
    25% {top: 35%; transform: rotate(20deg); width: 8%; opacity: 1;}
    60% {top: 3%; transform: rotate(160deg); width: 6%; opacity: 0.8;}
    100% {top: 5%; left: 95%; transform: rotate(220deg); width: 3%; opacity: 0;}
} 
            @keyframes note6 {
    0% {top: 54%; left: 28%; transform: rotate(-30deg); width: 10%;  opacity: 0;}
    25% {top: 34%; transform: rotate(20deg); width: 8%; opacity: 1;}
    60% {top: 3%; transform: rotate(160deg); width: 6%; opacity: 0.8;}
    100% {top: 5%; left: 95%; transform: rotate(220deg); width: 3%; opacity: 0;}
} 
            @keyframes note7 {
    0% {top: 65%; left: 27%; transform: rotate(-30deg); width: 7%;  opacity: 0;}
    25% {top: 40%; transform: rotate(20deg); width: 6%; opacity: 1;}
    60% {top: 4.5%; transform: rotate(160deg); width: 4%; opacity: 0.8;}
    100% {top: 5%; left: 95%; transform: rotate(220deg); width: 3%; opacity: 0;}
} 

/*fin animation*/


h1, h2 {font-size: 4em; padding: 70px 0; font-family: 'Bubble', 'Modak', 'Bungee Inline', cursive; color: #ff0099;} 


/* les artistes*/ 
.duo,.solo {margin: 2% 0;}

.duo>figure {display: inline-block; position: relative;}

.duo figcaption {background: rgba(255, 255, 255, 0.5); padding: 5px 0 5px; position: absolute; bottom: 2%; left: 0; right: 0;}

.solo figure {position: relative; display: inline-block}

.solo figcaption {background: rgba(255, 255, 255, 0.5); padding: 5px 0 5px; position: absolute; bottom: 2%; left: 0; right: 0;}
#artistes a {text-decoration: none; color: #000000;} 

/*slider des villes*/ 

#container{
	max-width:1366px;
	margin:0 auto;
	padding-bottom:10px;
}
#banner-fade {margin: auto;
    margin-bottom: 60px;}
ul.bjqs-controls.v-centered li a{
	display:block;
	padding:5px; border-radius: 3px;
	background:#fff;
	color:#000;
	text-decoration: none;
}

ul.bjqs-controls.v-centered li a:hover{
	background:#ff0066;
	color:#fff;
}

ol.bjqs-markers li a{
	padding:0  6px;
    width: 1em;
    background:#000;
	color:#000;
	margin:3px;
    border-radius: 50%;
	text-decoration: none;
}

ol.bjqs-markers li.active-marker a
{
	background: #666; color: #666
}

ol.bjqs-markers li a:hover{
	background: #ff0066; color: #ff0066
}

p.bjqs-caption{
	background: rgba(255,255,255,0.5);
}
/* intégration et modification du CSS du slider */
ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;}
li.bjqs-slide{position:absolute; display:none;}
ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;}
ul.bjqs-controls.v-centered li a{position:absolute;}
ul.bjqs-controls.v-centered li.bjqs-next a{right:5px; font-size: 1.5em;}
ul.bjqs-controls.v-centered li.bjqs-prev a{left:5px; font-size: 1.5em;}
ol.bjqs-markers{list-style: none; padding: 0; margin: 0; width:100%;}
ol.bjqs-markers.h-centered{text-align: center;}
ol.bjqs-markers li{display:inline;}
ol.bjqs-markers li a{display:inline-block;}
p.bjqs-caption{display: block; width:80%; margin:0; padding: 2%; position:absolute; bottom:0; left: 10%;}


/*formulaire */

#resa {border: solid 10px #ff0099; border-radius: 10px;}
#resa fieldset {border: 0; position: relative;}
#formulaire {margin: 0 20%; line-height: 50px}
#form1 {position: relative;}
#formvilles {text-align: left;}
#formdates {position: absolute; top: 0;}
#form1 select { border: solid 1px #333; padding: 5px;}
#form2 {text-align: left; position: relative;} 
#form2 input {width: 75%; border: solid 1px #333; padding: 5px;}
.input {position: absolute; max-width: 100%; left: 150px;}
#form2 textarea {float: left; width: 100%; border: solid 1px #333;}
#check {margin-top: 20px; position: absolute; left: 0; bottom: -6%}
#news {position: absolute; left: 3%; bottom: -10%;}
#formulaire .bouton {margin-top: 50px;}
#formulaire p {text-align: left; font-size: 0.8em;} 

/*footer*/

footer {background: #990099; height: 300px;  width: 100%;}
footer {box-shadow: inset -20px -20px 150px #600060;
  -moz-box-shadow: -20px -20px 250px #600060;} 
#footercontent {position: relative; max-width: 1366px; margin: auto;}
footer #ssMenu ul {list-style: none; text-align: left;}
footer #ssMenu li a {text-decoration: none; color: #500050;font-weight: bold;}
footer p{color: #500050;font-weight: bold;}
#partenaires {position: absolute; top: 0; padding: 0; text-align: center;}
#partenaires {right: 0; width: 40%}
#logopart{position: relative;}
#logopart p {text-align: center;}
.lig1, .lig2, .lig3 {position: absolute;}
.lig1 {top: 60px;}
.lig2 {top: 130px;}
.lig3 {top: 160px;} 



@media screen and (min-width: 1366px) {

    
/*flèche home en sticky */
.home {color: #ff0066; font-size: 2em; opacity: 0.5; text-decoration: none; position: sticky; top: 400px; float: right; right: 5px; padding-top: 100px}
.home:hover {opacity: 1;}


.bouton {height: 53px; width: 246px;}
#burger, #croix {display: none;}
#nav{opacity: 1;}
header nav {position: absolute; top: 3%; right: 2%;}
header nav ul {list-style: none; display: list-item;}
header nav li {display: inline;}
header nav a {color: #ff0099; text-decoration: none; padding: 0 4px;}

header #langue {right: 0.5%;}
header #reseaux {bottom: -90px; right: 0;}
header #reseaux img{width: 10%;}
header .bouton {top:85%; left: 30vw;}

    
    h1, h2 {font-size: 4em;}   
    
    .duo>figure {margin: 2% 2%;}
    
    #resa {margin: 0 8% 50px; padding: 40px;}
    #form1 {margin: 0 15%;}
    #formvilles {margin-left: 7%;}
    #formdates {right: 7%;}
     #formulaire {margin: 5% 10%;}
     #msg {height: 10em;}

    footer #cond2 {display: none;}
    footer img {width: 90px;}
    footer { font-size: 1.2em; padding: 30px 60px;}
#partenaires {width: 50%;}
.lig1, .lig2, .lig3 {margin: 0 120px;}
.lig2 {right: 23%}
#adidas {left: 10%}
#ouibus {margin-top: 10px; right: 8%}
#virgin {left: 10%}
#fnac {margin-top: 15px; right: 8%}

}

@media screen and (max-width: 1365px) and (min-width: 768px) {
    
    
/*flèche home en sticky */
.home {color: #ff0066; font-size: 2em; opacity: 0.5; text-decoration: none; position: sticky; top: 400px; float: right; right: 5px; padding-top: 100px}
.home:hover {opacity: 1;}

    .bouton {height: 39px; width: 180px;}
    header .bouton {top:83%; padding: 3px 0; left: 25vw;}
    #nav{opacity: 0}

    #burger {color: #ff0099; font-size: 1.8em; position: absolute; top:3%; right: 1%; background: none; font-weight: bold; border: none;}
  
   
    #nav>ul {position:absolute; width: 20%; top: 2.8em; right: 01%; list-style: none;
        background: rgba(255, 255 ,255, 0.8); text-align: center}
    #nav li {border-bottom:solid 1px silver; padding: 0.5em 0;}
    #nav li a {text-decoration: none; color: #ff0099}
       
    header #langue {right: 5.5%;}
    header #reseaux {bottom: -80px; right: 0%;}
    header #reseaux img{width: 9%;}
    
    .solo figure, .duo figure {width: 45%; margin: 0;}
    .duo>figure {margin: 2% 2%;}
    
    #resa {margin: 0 3% 50px; padding: 10px;}
    #form1 {margin: 0}
    #formvilles {margin-left: 7%;}
    #formdates {right: 7%;}
    #formulaire {margin: 0 5%;}
    #msg {height: 8em;}
 
    footer #cond2 {display: none;}
    footer img {width: 80px;}
 footer { font-size: 1em; padding: 30px 60px;}   
#partenaires {width: 50%;}
.lig1, .lig2, .lig3 {margin: 0 30px;}
.lig2 {margin-top: 5px; right: %}
#adidas {left: 10%}
#ouibus {margin-top: 10px; right: 5%}
#virgin {left: 10%}
#fnac {margin-top: 15px; right: 5%}

}



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

.home {display: none;}  
#burger {color: #ff0099; font-size: 1.8em; position: absolute; top:3%; right: 1%; background: none; font-weight: bold; border: none;}
    
#nav>ul {position:absolute; width: 35%; top: 2.8em; right: 01%; list-style: none;  z-index: 7;
    background: rgba(255, 0 ,153, 0.8); text-align: center}
#nav li {border-bottom:solid 1px silver; padding: 0.5em 0;}
#nav li a {text-decoration: none; color: #fff;}
    #nav{opacity: 0}   
    
header #langue {right: 5.5%;}
.bouton {height: 29px; width: 135px; font-size: 0.8em;}
header .bouton {position: absolute; top:83%;left: 20%; text-decoration: none; padding: 5px 0;}
header div .bouton {font-size: 1em;}  
header #reseaux {bottom: -50px; right: 0%;}
header #reseaux img{width: 6%;}
    
#formulaire {margin: 0 5%;}
    
    h1, h2 {font-size: 2em;}
.solo figure, .duo figure {width: 100%;}
     .duo>figure {margin: 2% 0;}

#resa {margin: 0 0 50px; padding: 3px;  font-size: 0.7em;}
#formulaire {margin: 0 5px;}
#form1 {margin: 0;}
#formdates {position: relative; text-align: left;}
#form2 input {width: 75%; padding: 1px;}
.input { max-width: 100%; left: 75px; margin-top: 40px;}
#msg {height: 10em; margin: 20px 0;}
#check {margin-top: 20px; position: absolute; left: 0; bottom: -2%}
#news {position: absolute; left: 6%; bottom: -5%; font-size: 0.9em;}
#formulaire .bouton {text-align: center;}


    
footer {height: 200px; }    
footer #cond1 {display: none;}
footer img {width: 50px;}
footer {font-size: 0.7em; padding: 10px 5px;} 

.lig1, .lig2, .lig3 {margin: 0 10px;}
.lig1 {top: 40px;}
.lig2 {top: 110px;}
.lig3 {top: 130px;}
.lig2 {left: 35%}
#adidas {left: 10%}
#ouibus {margin-top: 6px; right: 10%;}
#virgin {left: 10%}
#fnac {margin-top: 12px; right: 10%;}
}

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

header .bouton {top:73%; left: 30%}
#logo {width: 25%;}
header #langue {right: 7%;}
footer img {width: 40px;}
.lig2 {left: 30%}
#adidas {left: 5%}
#ouibus {right: 5%;}
#virgin {left: 5%}
#fnac {right: 5%;}
}