@font-face {
 font-family:'Open Sans'; 
  src:url(icones/proximanova-light-webfont.eot); 
  src:url(icones/proximanova-light-webfont.eot?#iefix) format('embedded-opentype'),
  url(icones/proximanova-light-webfont.woff2) format('woff2'),url(icones/proximanova-light-webfont.woff) format('woff'),
  url(icones/proximanova-light-webfont.ttf) format('truetype'); 
}

body { background-color:white; color: black; text-align:center; margin:0; padding:0; width:100%; max-width:100%;
       justify-items:center; font-family: sans-serif; font-family: 'Open Sans' }
span { color:lightgrey }
h6   { font-size:2.5em; text-align:center; margin:1em 0 1em 0; padding:0; font-family:monospace; color:darkorange }
p    { padding:0; font-size:1em; text-indent:1.5em }
a    { color:darkorange; text-decoration:none; font-weight:bold }
a:target { background-color: darkorange; color: white }

.mn:hover { color:lightgrey }

#bb    { justify-items:center; float:none; width:100%; min-width:100%; max-width:100%; margin:0 0 2em 0; min-height:18em; padding:0; float:left }
#bbc   { max-width:100%; margin:0; padding:0; justify-items:center }
#bbg   { line-height:140%; padding:0; margin:0 0 2em 0; float:left }
#bbd   { padding:0; margin:0; float:left }

#SCROLL {  position:fixed; top:7em; bottom:0; overflow-y:scroll; overflow-x:auto; left:0; right:0;
           margin:0; padding:0; text-align:center }
#BIO { width:100%; min-width:100%; max-width:100%; margin:0; padding:0; float:left }
#DISCO { width:100%; min-width:100%; max-width:100%; margin:0; padding:0; float:left }
#BANDS { width:100%; min-width:100%; max-width:100%; margin:0; padding:0; float:left;
         margin-bottom:3em; justify-items:center }
#TOP   { margin:0 0 6vw 0; padding: 3em 0 0 0 }

#menu { position:fixed; top:0; left:0; right:0; height:7em; background-color:#535353; z-index:10; text-align:left; padding:0;
        margin:0; user-select:none }
#nom  { font-size:2em; top:0.4em; left:0.4em; position:fixed; color:darkorange; font-weight:bold }
#nom:span { color:darkorange }
#desc { font-size:0.70em; top:4em; left:1.25em; position:fixed; color:white }
#rubriques { right:0.6em; position:fixed; color:lightgrey }

#news { max-width:70%; font-weight:bold; font-size:1em; margin:0; padding:0; text-align:justify }

#contact { color:darkorange; font-size:100% }
#videos { width:90%; max-width:100%; margin:0; padding:0; border-radius:0em 0em 3em 0em; corner-shape:bevel; 
          box-shadow: 0.4em 0.4em darkorange; min-height:15em; max-height:100% }
#links { font-size:130%; padding:0; margin:0 }

#dates { font-size:1em; margin:0; padding:0; max-width:90%; text-align:left }

#agenda  { padding-left:0.5em; margin:1.5em 0 1em 0; font-weight:bold; font-size:140%; text-indent:0; color:grey }

#cadrebio { width:100%; text-align:center; margin:3em 0 3em 0; font-size:75% }

#cadrinf { position:fixed; bottom:0; margin:0; padding:0; left:0; right:0; text-align:center; z-index:10; font-size:120%; color:white; user-select:none }
#infs   { background-color:#535353; text-align:center; z-index:10; opacity:95%; visibility:hidden;
          padding:0.5em 0 0.5em 0 }

.c        { border-radius:0em 0em 3em 0em; corner-shape:bevel; box-shadow: 0.4em 0.4em darkgrey }
.phbio    { min-height:13em; max-height:26em; min-width:13em; max-width:26em; margin:2em }
.milieu   { text-align: center; width:100%; min-width:100% }
.sm       { font-size:80%; font-weight:bold; color:darkorange }
/* année */ .pevent   { padding-left:0.5em; margin:0; color: darkorange; font-weight:bold; font-size:140%; text-indent:0 } 
/* mois  */ .pevent2  { padding:0; margin:0 0 0.5vh 0; color: darkorange; font-weight:bold; font-size:120%;
                        text-transform:lowercase }
/* info  */ .pevent1  { padding:0; margin:0 0 0.6em 0 }
/*       */ .pevent1 a { font-weight:400; color:black; text-decoration:underline; text-decoration-color:lightgrey }
.space    { width:100%; min-width:100%; max-width:100%; height:10em; min-height:10em; max-height:10em; float:left }
.bands    { border:0; width:100%; padding:0; margin:0 0 2em 0; height:auto; float:left; box-shadow: 0.4em 0.4em grey }
.bands a:hover { box-shadow: 0.4em 0.4em darkorange }

.inter    { width:100%; min-width:100%; float:left; padding:0; margin:0 }
.al       { user-select:none; display:inline-block; object-fit:contain; max-width:200px; width:200px; height:200px;
            max-height:200px; background-size:cover; margin:1em; border: 2px solid lightgrey; padding:0 }
.social   {  width:1.8em; height:1.8em }
.discotype { text-align:center; width:100%; min-width:100%; max-width:100%; margin:0;
             padding:0; margin-bottom:6vw; float:left }
.ob       { margin:0; padding:0; margin-bottom:2em; text-align:left;
            font-size:1em; border:0; min-height:30em; float:left; font-weight:bold }
.ob h2    { margin-top:2em; padding:0; color: darkorange; font-size:160%; text-align:left; text-indent:0; 
            font-family: sans-serif; font-family: 'Open Sans'; font-weight:bold }
.ob a     { color:black; text-decoration:none }
.ob a:hover {color:black; text-decoration:none }


@media all and (orientation:landscape) {
 body   { font-size:1.2em }
 p      { text-align:justify; margin:0 2em 2em 2em }

 #bbg   { float:left; width:50%; max-width:50%; min-width:50% }
 #bbd   { float:left; width:50%; max-width:50%; min-width:50% }
 #rubriques { top:3em; font-size:1.5em }

 .txt   { text-align: center }
 .ob    { width:29%; padding:2% }
}

@media all and (orientation:portrait) {
 body   { font-size:1em }
 h6     { font-size:6vw }
 p      { font-size:1em; text-align:left; margin:0 2em 2em 2em }

 #bbg   { width:100%; max-width:100%; min-width:100% }
 #bbd   { width:100%; max-width:100%; min-width:100% }
 #rubriques { top:4em; font-size:1.2em }
 #cadrinf { visibility:hidden }
 #bio   { text-align: justify }
 #infs  { font-size:85% }

 .ob    { float:left; margin:0; padding:0; padding:1em; font-size:100%; border:0  }
 .infos { font-size:1.5vw }
 .bands { width:100%; min-width:100%; margin:0; margin-bottom:2em }
 .txt   { text-align: justify }
}