/* Elements principaux
------------------------------------------ */
body { background:#fdea15;}
.page { position: relative; width: 100%;  text-align:left; height:auto;}
.main { padding: 1.5em 0; }

a.spip_out:after, a.external:after { display:none  ; text-decoration:underline !important;}
::selection {background-color: #000 !important; color: #F4D647 !important;}

.pdf{padding:5px; display:block; float:left; border:1px solid #000;}


/** MENU Hamburger ////////////////////////////////////////// */
.smartphone{display:none;}
.sliding-navbar{position: fixed;top:0;left:-95%;height: 100vh; width: 95%;background:#fdea15;border-right:solid 1px #000;transition: left 0.5s ease-in-out;z-index: 1500; overflow-y:auto;padding-right:3%;}
.sliding-navbar--open{left: 0px; right: 8px;text-align: right;}
.mask{position:absolute; top: 0px;right:0px;height: 100vh;width:5%;z-index: -100;}
.show{z-index: 200;}
.brand{text-decoration: none;color: #66121A;display: block;width: 140px;margin: 20px auto 0 auto;font-family:sans-serif;transition: color 0.2s ease-in-out;} 
.brand:hover{color: #ccc;}
.navbar--items{list-style-type: none;height: 50vh;width: 100%;display: -ms-flex;display: -webkit-flex;display: flex;padding:0;text-align: right;}
.bloc_1{ width: 100%; padding: 0 0 0 0;}
.navbar--items li a{font-size: 2em;display: inline-block;text-decoration: none;color: #000; font-family: 'silkabold';}
.hamburger-menu {z-index: 1510;position: fixed;top: 15px;left: 10px;margin: auto;width: 40px;height: 30px;cursor: pointer;}
.hamburger {position: relative; transform: translateY(10px);background: black;transition: all 0ms 300ms;}
.hamburger,
.hamburger:after,
.hamburger:before {width: 40px;height: 5px;}
.hamburger:before {content: ""; position: absolute;left: 0;bottom: 10px;background: black;transition: bottom 0.3s ease-in-out;}
.hamburger:after {content: "";position: absolute;left: 0;top: 10px;background: black;transition: top 0.3s ease-in-out;}
.menu-opened:before {bottom: 3px;transition: bottom 0.3s ease-in-out;}
.menu-opened:after {top: 3px;transition: top 0.3s ease-in-out;}



#ancre_bas{repeat scroll 0 0 #fa481c;bottom:38px;height:12px;padding:0px;position:fixed;width:100%;z-index:6666;text-align:center;}

.bouton{width:100%; padding:3px; border: 1px solid black; height:30px; text-align:center; position:relative; float:left; border-radius:2px; }
.bouton a{color: #000 !important;}
.bouton a:hover{color: #000 !important;}

.vertical_ligne { border-left: 3px solid black; height: 90px; top:95px;display: inline-block;position:absolute;left:50%;} 



@-moz-keyframes anim { 0%  {opacity:0;}100% {opacity:1;}}
@-webkit-keyframes anim {0%  {opacity:0;}100% {opacity:1;}}
@-o-keyframes anim {0%  {opacity:0;}100% {opacity:1;}}
@-ms-keyframes anim {0%  {opacity:0;}100% {opacity:1;}}
@keyframes anim {   0%  {opacity:0;}100% {opacity:1;}}


/* Entete et barre de navigation
------------------------------------------ */

header { position:fixed; width:230px;text-align:left; padding-left:20px;z-index:1000; padding-top:20px;}
header img{padding:0 0 10px 0 !important; margin:0!important; float:left !important;}
.formulaire_menu_lang { position: absolute; right: 0; top: .9em; display: block; width: 30%; }

nav {right:0; text-align:right;position:fixed; z-index:1000;top:5px; }
nav:hover { z-index:1000;}
nav li {display:inline; line-height:1.5em;}
nav li a { font-size: 1em;  display: inline-block;  text-decoration: none; color: #000;  font-family:'arial'; font-weight: bold; }
nav li.on a {color:#000; font-weight: normal; }
nav li a:hover, nav li a:active {color:#c41558;z-index:1000; background:none;}
 
.date{ float: left; width:100%; overflow: hidden; position relative;text-align:center;height:140px;} 

/* sommaire ------------------------------------------ */
 
 .video{width:80%; height:auto; margin-left:15%; opacity:0;-moz-animation: anim 0s linear forwards 0s;-webkit-animation: anim 2s linear forwards 0s; -o-animation: anim 2s linear forwards 0s;-ms-animation: anim 2s linear forwards 0s;animation: anim 2s linear forwards 0s;} 

.contenu_video_direct {width:100%; padding-top:53px; min-height: 400px;position:relative; display:block;float:left;} 
.programme_visuel{width: 40%; display:block; position: relative;  background: red; padding:0 0 0 0 ;}
.titre_video{width:55%; float: right; min-height:auto; position: relative; display:block; }
.texte_video, .texte_video_2 {width:55%; padding-top:0px;float: right; min-height:auto; position: relative; display:block; }



/* ==================== titre rotation  ==================== */ 

.agenda_titre{position: relative; width:4%;height:439px;float:left; display:block;}
.titre_vertical{position: relative; width:10%;height:403px;float:left; display:block;}
.inner {position:absolute;top:50%;left:50%; min-width:420px;}
.rotate_archive, .rotate {text-align: right;padding-right:45px;padding-bottom:5px;transform:  translateX(-50%) translateY(-50%) rotate(-90deg);
/* Safari */-webkit-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
/* Firefox */-moz-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
/* IE */-ms-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
/* Opera */-o-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
/* Internet Explorer */filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);}


/* ==================== programm  ==================== */  
section#programme{width:95%; margin-left:5%; padding-top:50px; height:auto;position:relative; display:inline;float:left;
opacity:0;-moz-animation: anim 0s linear forwards 0s;-webkit-animation: anim 1s linear forwards 0s;
-o-animation: anim 1s linear forwards 0s;-ms-animation: anim 1s linear forwards 0s;animation: anim 1s linear forwards 0s;}

article.menu {width:100%;height:auto;display:inline;float:left; 
position:relative;}

article.programme, article.programme2 {width:25%;height:auto;display:table-cell;float:left;position:relative; padding:20px 20px 80px 20px; }
article.programme img{margin:0 0 15px 0; width:100%; height:auto; clip-path:ellipse(50% 50%);}
article.programme2 img{margin:0 0 15px 0; width:100%; height:auto; clip-path:ellipse(50% 50%);}

article.programme_video {width:100%;height:auto;display:block;float:left;position:relative; padding: 0 0 0 10px;}

aside.titre{width:100%;height:auto;display:block;float:left; position:relative; text-align:center; }
aside.journee{width:100%;height:auto;display:block;float:left; position:relative;padding-top:15px; text-align:center;z-index:1000;}

article.programme:nth-child(4n+3) {clear: left;}
article.programme2:nth-child(4n+5) {clear: left;}
 
.livre{ width:50.05%;height:auto; padding-bottom:30px; display:block; float:left;border-right: 3px solid #000;padding-right:5%;}
.texte_livre{width:75%; float:right;}

.livre:nth-child(odd){ border-right: 0px solid #000;width:49.05%;padding-left:5%;padding-right:0%;}

.livre img { width:19%;height:auto; float:left; margin-right:1%; }
 
.colonne_gauche{display: block; float:left; position: relative; width:50.05%;border-right: 3px solid #000;padding-right:5px;}
.colonne_droite, .colonne_droite_radio, .colonne_droite_collegien{display: block; float:left; position: relative; padding-left:1%; width:49.05%; border-left: 3px solid #000; margin-left:-3px;}
.colonne_droite_radio {border-left:none;}
.colonne_droite_radio{float:right;}
.colonne_droite_collegien{position:relative; margin-left:0; width:48%; float:right; border-left:none;  }
.fleche_pre_suiv{text-align:center; width:70%; margin-left:auto; margin-right:auto;}
 
section#conteneur_livre {width:90%; margin-left:5%; padding-top:0px; height:auto;position:relative; display:inline;float:left;
opacity:0;-moz-animation: anim 0s linear forwards 0s;-webkit-animation: anim 1s linear forwards 0s;
-o-animation: anim 1s linear forwards 0s;-ms-animation: anim 1s linear forwards 0s;animation: anim 1s linear forwards 0s;}
 
section#menu_programme, section#menu_programme_acceuil{width:100%; padding-top:50px; height:auto;position:relative; display:inline;float:left;
opacity:0;-moz-animation: anim 0s linear forwards 0s;-webkit-animation: anim 1s linear forwards 0s;z-index:1;
-o-animation: anim 1s linear forwards 0s;-ms-animation: anim 1s linear forwards 0s;animation: anim 1s linear forwards 0s;}
 
section#menu_programme_acceuil {padding-top:0px;}
 
aside#menu_fixed{width:100%;height:auto;position:relative;display:inline;text-align:center;padding-top:50px;float:left;}
aside#menu_fixed.floatable {width:100%; position:fixed;top:0; z-index:100;margin:0;}

aside#menu_fixed2{width:100%;height:auto;position:relative;display:inline;text-align:center;padding-top:0px;float:left;}
aside#menu_fixed2.floatable {width:100%; position:fixed;top:0; z-index:100;margin:0;padding-top:50px;}

.doc_vignette_expo, .doc_vignette_expo2 {margin-top:10px; width:95%;margin: 0 auto 0;
   position: relative;}

.doc_vignette_expo img {width:100%;height:auto;margin:0;
-webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.9; }
  
  .doc_vignette_expo img:hover {
-webkit-filter: none;filter: none;opacity:1; }





#lirelasuite {display:none;}


 /* ==================== radio  ==================== */  
 
article.radio{width:95%; height:100px; float:left;position:relative; padding:20px; margin:0 0 0 0 ; border-bottom:3px solid black;}
article.radio img {height:78px; width: auto;margin:-5px 10px 0 -5px ; padding:0 0 0 0 ;float:left;}
article.radio:hover{ border-bottom:6px solid black;}
 
audio{width:100%;}
 
 
 .lecteur_texte{right:0px;top :0; width:95%; position:relative; float:left;display:block;}
.lecteur{right:5px;top:22px; position:absolute;}

 
 /* ==================== exposant  ==================== */  

section#salon{width:90%; margin-left:5%; padding-top:50px; height:auto;position:relative; display:inline;float:left;padding-bottom:100px;
opacity:0;-moz-animation: anim 0s linear forwards 0s;-webkit-animation: anim 1s linear forwards 0s;
-o-animation: anim 1s linear forwards 0s;-ms-animation: anim 1s linear forwards 0s;animation: anim 1s linear forwards 0s;}

.inner2 {position:absolute; top:130px; left:80%; width:250px; float:right;}
.rotate2 {text-align: left;transform:  translateX(-50%) translateY(-50%) rotate(90deg);
/* Safari */-webkit-transform: translateX(-50%) translateY(-50%) rotate(90deg);
/* Firefox */-moz-transform: translateX(-50%) translateY(-50%) rotate(90deg);
/* IE */-ms-transform: translateX(-50%) translateY(-50%) rotate(90deg);
/* Opera */-o-transform: translateX(-50%) translateY(-50%) rotate(90deg);
/* Internet Explorer */filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);}

article.salon {width:14%;height:50vh; border:3px solid #000;border-radius:2px; display:table-cell; float:left;position:relative;margin:0.1%; padding:10px;}
article.salon:hover {border:6px solid #000;}



article.salon:nth-child(6n) {clear: left;}
article.salon img{position:absolute; bottom:0; right:0; float:left; padding:0; margin:0; width:90%;height:auto; margin-right:5%;}

.bandeau{ position:fixed; bottom:0; margin:auto; text-align: center; width:100%;opacity:0;-moz-animation: anim 0s linear forwards 0s;-webkit-animation: anim 1s linear forwards 0s;
-o-animation: anim 1s linear forwards 0s;-ms-animation: anim 1s linear forwards 0s;animation: anim 1s linear forwards 0s;  }



/* ------------------------------------------ */
/* footer
/* ------------------------------------------ */

.formulaire_contact{position:relative; width: 70%; height:auto; padding:25px;display:table-cell; z-index:1; behavior: url("../../plugins/display-table.htc");}
.formulaire_contact img{ width:19%; padding:1% 3% 1% 3%;filter: grayscale(100%);
-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);}
.formulaire_contact img:hover{filter: none;-webkit-filter: none;-moz-filter:none;-ms-filter: none;-o-filter: none;}

.image_lecteur{position:absolute; width:100%;}

footer {width:90%; margin-left:5%; padding-top:10px; height:auto; margin-top:200px; float:left; position:relative;  border-top:3px; border-style:solid; border-color:black; text-align:center; }
.colophon{position:relative; bottom:0; text-align:center;width:100%;}


/* ------------------------------------------ */
/* responsive
/* ------------------------------------------ */

@media (max-width:1280px){
.inner2 {left: 75%;}
.formulaire_contact img{ width:18%; padding:1% 3% 1% 3%;}
}


@media (max-width:1100px){
nav {display:none;} .smartphone{display:block;}
section#programme, section#salon, section#conteneur_livre {width: 96%;margin-left: 2%; padding-top: 50px;}
.inner2 {left: 70%;}
header {width: 200px;padding-left: 10px;z-index: 1000;padding-top: 20px;}
.video {width: 80%;height: auto;margin-left: 15%;}
.date {height: 200px;}
.formulaire_contact{position:relative; width: 100%; height:auto; padding:0px;}
footer { width: 96%;margin-left: 2%;}
.colonne_droite_collegien {position: relative;margin-left: 0 ;width: 49%; padding-left:0%}
}

@media (max-width:1024px){

article.programme, article.programme2 {width:50%;padding:20px 20px 80px 20px; }
article.programme img{margin:0 0 15px 0; width:100%; height:auto; clip-path:ellipse(50% 50%);}
article.programme_video {width:100%;}
aside.titre{width:100%; text-align:center; }
aside.journee{width:100%;padding-top:15px; text-align:center;z-index:1000;}

article.programme:nth-child(4n+5) {clear: left;}
article.programme2:nth-child(2n+5) {clear: left;}

article.salon {width:16%;}
article.salon:hover {border:6px solid #000;}
article.salon:nth-child(6n) {clear: left;}
.texte_video_2 {width: 100%;}
    
}


@media (max-width:800px){

.vertical_ligne {display:none;}
header {width: 190px; position:relative;display:block; margin: 0 auto 0; padding-left:0px;z-index: 1000;padding-top: 20px; text-align:center;}
.date {height: 100px;}
.video {width:100%;height: auto;margin-left: 0;}
.rotate {position:relative;display:block;float:left;text-align: left;padding-right: 0;padding-bottom: 5px;transform: none;-webkit-transform: none;-moz-transform:none;
-ms-transform: none;-o-transform: none; filter: none;}
.inner { min-width:250px;}
.contenu_video_direct {width: 98%;margin-left:1%;}
.agenda_titre { position: relative;text-align:right;height: 40px;float: left;display: block;width: 2%;} 

aside.journee{ display:none;}
section#programme, section#salon, section#conteneur_livre {padding-top: 20px;}
aside.titre{border-top:3px solid #000; border-bottom: 3px solid #000;}

.colonne_gauche {width: 100%;border-right: 0px ;padding-right: 0px;}
.colonne_droite, .colonne_droite_radio {width: 100%; padding-left:0; padding-top:30px; border-left:none;}
.colonne_droite_collegien {width: 100%; padding-left:0%}
.fleche_pre_suiv {padding-top:80px;}

article.radio { width: 100%;}
article.radio {width: 100%; height: auto;float: left;position: relative;padding: 5px;margin: 0 0 0 0; border-bottom: 3px solid black;}

.formulaire_contact img {width: 31%;padding: 1% 0% 0% 1%;}
article.salon {width:19.5%;}
article.salon:hover {border:6px solid #000;}
article.salon:nth-child(5n) {clear: left;}
.intervention_2{padding-top:40px; border-top:3px solid #000;}
.intervention {padding-top:20px;}

}




@media (max-width:600px){
article.programme, article.programme2 {width:100%; padding:20px 20px 80px 20px; }
article.programme:nth-child(4n+5) {clear: left;}
article.programme2:nth-child(2n+5) {clear: left;}
    
.programme_visuel { width: 100%;}
    
    .spip_logo {
  margin: 0 0 10px 0;
  padding: 0;
  border: none;
}

.texte_video {width: 100%; padding-top: 20px;float: right;}
.titre_video {width: 100%; float: right;}
    
article.salon {width: 100%;height: auto; border: 0 solid #000; border-bottom: 3px solid #000;border-radius: 0px;
display: table-cell;float: left;position: relative;margin: 0;padding: 10px;}

article.salon:hover {border: 0 solid #000;border-bottom: 5px solid #000;}
article.salon img {position: relative; bottom: 0; right: 0; float: left; padding: 0; margin: 0; width: 25%; height: auto; margin-right: 0;}

.rotate2 {position:relative;display:block;float:left;text-align:right;padding-right: 0;padding-bottom: 5px;transform: none;-webkit-transform: none;-moz-transform:none;
-ms-transform: none;-o-transform: none; filter: none;}
.inner2 { left:0; min-width:50%; top: 0; position:relative;}

.livre, .livre:nth-child(odd) { width: 100%; border-right: 0px solid #000}
.livre:nth-child(odd) { border-right: 0px solid #000;width: 100%; padding-left: 0%; padding-right: 0%;}
.colonne_droite_collegien { position: relative;margin-left: 0%; width: 100%;padding-left: 0%}

.formulaire_contact img {width:30%;padding: 1% 0% 0% 1%;}

}






/* fin */