body {
  font-family: "Ubuntu", sans-serif;
  max-width: 100vw;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

.fullWidth {
   width: 100%;
   margin-left: auto;
   margin-right: auto;
   max-width: initial;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Ubuntu", sans-serif;  
  font-weight: 900;
  color:#333;
}

h3.title {
  font-weight: 900;
  text-transform: uppercase;
  margin: 0 0 1em 0;
}

h4.subtitle {
  font-family: Bitter;
  font-weight: normal
}

h5 {
  font-weight: 100;
  font-size: 1.5vw;
  margin: 2vh auto 1vh;
}

.ghost {
  background: silver;
  padding: 4px 8px;
  border-radius: 4px;
  color:white
}

.date {
  font-family: Bitter, sans-serif;
  font-weight: 100
}

.mobile {
  display:none;
}

	/* MOBILE */
  @media screen 
  and (min-device-width : 320px) 
  and (max-width: 568px) {
    
    .mobile {
      display: inherit;
    }
    

    
  }

/* STRUCTURE
**************************************************************************************************************/
#header {
  height: 30vh;
  margin-bottom: 10vh;
  background: url(../img/header-1.png)  no-repeat #444;
  background-position: left bottom;
  background-size: cover;  
  background-color:#444;
}


#accueil #header {
  height: 80vh;  
}

#content {
  margin: 50px auto;
  min-height: 40vh;

}

#footer {
  background:  url(../img/footer-1.png) no-repeat #222;
  background-position: right top;
  background-size: contain;
  color:white;
  min-height: 10vh;
  margin-top: 10vh;
  padding-bottom: 2vh;
}

/* MENU
********************************************************************************/ 

/* NAVIGATION
********************************************************************************/  

#mobile-logo {
  display: none;
}

.top-bar, .fixed top-bar.sticky, .contain-to-grid {
  background: transparent;
  padding: 20px 40px 0;
  top:10px;  
  position: absolute;
  width: 100vw;
  z-index: 5000
}  



.top-bar-section ul li>a {
  background: transparent;
  color:rgba(255,255,255,.7);
  font-size: 1.4vw;
  font-weight: 500;
  text-transform: none  ;
  font-family: "Ubuntu", sans-serif;  
}

.top-bar-section ul li,
.top-bar-section ul li:hover a  {
  background: transparent;
}

.top-bar-section li:not(.has-form) a:not(.button),
/* .top-bar-section li:not(.has-form) a:not(.button):hover, */
.top-bar-section li a:hover,
.top-bar-section li:hover { 
  background: transparent;
  color:rgba(255,255,255,.6);
}

.top-bar li i {
  font-size: 50%
}

.top-bar-section li.active:not(.has-form) a:not(.button),
.top-bar-section li.active:not(.has-form) a:not(.button):hover  {
  background: transparent;  
  color: white;
}


.top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button) {
  background: rgba(0,0,0,.7);
  color:white
}

.top-bar .top-bar-section ul l  a li {
   background: transparent; 
}

.top-bar .toggle-topbar.menu-icon a {
  color: white;  
  

}

.top-bar .toggle-topbar.menu-icon a span::after, .top-bar .toggle-topbar.menu-icon a:hover span::after {
  -webkit-box-shadow: 0 10px 0 1px white, 0 16px 0 1px white 0 22px 0 1px white;
  box-shadow: 0px 10px 0px 1px white, 0px 16px 0px 1px white, 0px 22px 0px 1px white;
  margin-top: -16px;
}

.top-bar.expanded {
  overflow:visible;
  position: fixed;
}

.top-bar.expanded .toggle-topbar.menu-icon a {
  color:white;
}

.top-bar-section ul {
  right: 0;
}

    
.top-bar.expanded, .top-bar.expanded .title-area {
  background:rgba(255,255,255,.5); 
}

.top-bar.expanded .name img{
  display: none;
}

	/* MOBILE */
  @media screen 
  and (min-width : 1200px) {
     .top-bar-section ul li>a {
      font-size: 18px;   
      }
  }

	/* MOBILE */
  @media screen 
  and (min-device-width : 320px) 
  and (max-width: 568px) {
    
    #accueil .top-bar .toggle-topbar.menu-icon a {
      color:black;
      }
      
    #accueil .top-bar.expanded .toggle-topbar.menu-icon a {
      color:white;
      }      
    
    #accueil .top-bar .toggle-topbar.menu-icon a span::after, .top-bar .toggle-topbar.menu-icon a:hover span::after {
      -webkit-box-shadow: 0 10px 0 1px black, 0 16px 0 1px black 0 22px 0 1px black;
      box-shadow: 0px 10px 0px 1px black, 0px 16px 0px 1px black, 0px 22px 0px 1px black;
      margin-top: -16px;
    }    
    
    #accueil .top-bar.expanded .toggle-topbar.menu-icon a span::after, .top-bar .toggle-topbar.menu-icon a:hover span::after {
      -webkit-box-shadow: 0 10px 0 1px white, 0 16px 0 1px white 0 22px 0 1px white;
      box-shadow: 0px 10px 0px 1px white, 0px 16px 0px 1px white, 0px 22px 0px 1px white;
      margin-top: -16px;
    }      
    
    .top-bar {
      z-index: 9000;
      width: 100vw;
      padding: 0;
      top:0;
     }
     
     .top-bar.expanded {
       background: black;
     }

    .top-bar-section ul {
      z-index: 99999;
/*       height: 100vh; */
    }        
    .top-bar.expanded .name {
      background: black;
    }
        
    .top-bar .name a {
        background-position: left ;
        height: 40px;
        margin-left: -15px;
    }
    
    .top-bar-section ul li{

    }
     
    .top-bar-section ul li  a,
    .top-bar-section ul li>a {
      font-size: 20px;  
      color:white ;
      font-weight: 100;
      text-align: center;
         
    }

    
    .top-bar-section li.active:not(.has-form) a:not(.button),
    .top-bar-section li.active:not(.has-form) a:not(.button):hover ,
    .top-bar-section li:not(.has-form) a:not(.button),
    .top-bar-section li:not(.has-form) a:not(.button):hover      {
      background:#444;  
      color: white;
      line-height: 1em;
      padding: 1em;
    }  
    
    .top-bar-section li.active:not(.has-form) a:not(.button),
    .top-bar-section li.active:not(.has-form) a:not(.button):hover {
      background:#444; 
      color:#333;

    }      
    
    .top-bar-section ul li {
      background: #444;
    }   

    .top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button) {  
     background: #444;
    }  
    
    .top-bar-section .dropdown li.title {
      float:left;
     width: 10vw;
      height: 30px;  

    }
    
    .top-bar-section .dropdown li.title a{
      color:green;
      font-size: 12px;
      border:0;
      line-height: 1em;
    }
    
    .top-bar-section .dropdown li.title h5 i{
      font-size: 10px;
      margin: 0;
      padding: 0;
      line-height: .1em;

    }    
    
    .top-bar-section .dropdown li.title h5 {
      font-size: 10px;
      margin: 0;
      padding: 0;
      line-height: 1em;
        float:left;
    }     
    
    a.parent-link.js-generated {
      font-size: 12px;
       border:0;
       background: #333;
       text-align: left;
       width: 70%;

    }
    
    .parent-link.show-for-small {
      display: none;
      border: 1px dotted red;
    }

    
    .top-bar-section li.active:not(.has-form) a:not(.button), .top-bar-section li.active:not(.has-form) a:not(.button):hover {
      font-weight: bold;
      color:white;
    }

    
  }  
  
  .name img {
    width: 250px;
    margin: -5px 20px ;

  }

	/* MOBILE */
  @media screen 
  and (min-device-width : 320px) 
  and (max-width: 568px) {
    
    .name img {
      width: 90px;

    }
    
  }

	/* MOBILE */
  @media screen 
  and (min-device-width : 368px) 
  and (max-width: 968px) {
    
    .name img {
      display:none
    }

    #mobile-logo {
      
      display: block;
      position: absolute;
      top:10px;
      left:20px;
      width: 180px;

    }

    
  }
  
/* LOGO
********************************************************************************/   
#logo {
  position: absolute;
  background: url(../img/logo.png) no-repeat;
  background-position: center center;
  background-size: contain;
  width: 20vw;
  height: 15vh;
  top:0px;
  left:2%;
  z-index: 9000;
}  

#accueil #logo {
  background-position: top center;  
  width: 40vw;
  height: 35vh;
  top:20px;
  left:5%;
}

#logo h1, #logo h2 {
  display:none;
}

	/* MOBILE */
  @media screen 
  and (min-device-width : 320px) 
  and (max-width: 568px) {
    
    #logo {    
      top:10px;
      width: 40vw;
      height: 10vh; 
      background-position: center top;     
    }
    
    #accueil #logo {
      background: url(../img/logo-mobile.png) no-repeat;
      background-position: left top; 
      background-size: contain;
      top:10px;      
      width: 60vw;
      height: 20vh;
      left:2%;
    }
    
  }
  
/* EN-TETE
********************************************************************************/    
.pageTitle {
  width: auto;
  position: absolute;
  top:16vh;
  left:5vw;
  background: black;
  padding: 20px 20px 0px 20px;
  color:white;
}

.pageTitle h3, .pageTitle h4 {
  color:white;
}

.pageTitle h4 {
  font-size: 2vw;
  line-height: 1em;
}
.pageTitle h3 {
  font-size: 3vw;
   line-height: 1em;
   margin-bottom: .4em;
}

	/* MOBILE */
  @media screen 
  and (min-device-width : 320px) 
  and (max-width: 568px) {
    
    .pageTitle {
      top:18vh;
      width: 95vw;
    }
    
    .pageTitle h4 {
      font-size: 11px;
    }
    
    .pageTitle h3 {
      font-size: 16px;
    }    
    
  }

/* .frame { border: 1px dotted red; padding:0; margin:0} */
  
/* SPLASH
********************************************************************************/  


#splash {
  width: 100vw;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}	
  	  
.container {
  float: left;
  overflow: hidden;
  width: calc(33vw);
  height: calc(33vw / 2);
  position: relative;
  z-index: 2000

}


.container.item-2 {
  margin-left: 0vw;
}

.container .filter {
  opacity: 0.8
}

.filter {
  position: relative;
  width: 100%;
   height:1000px;
   position: absolute;
  z-index: 1000;
}

.fullsize .filter {
  position: absolute;
  height: calc(100vw / 2);
  width: 100vw;

}  
  	  
#splash .item {
  width: calc(33vw);
  height: calc(33vw / 2);
  float:left;
  -webkit-filter:grayscale(1) contrast(100%);
  -ms-filter:grayscale(1); 
  filter:grayscale(1);  
  position: relative;
}  	

.fullsize ,  #splash .fullsize .item  {
  width: 100vw;
  height: calc(100vw / 2);
  overflow: hidden;
  margin-bottom: 1em;
  z-index: 100;
}  

	  
.credits-photo {
  position: absolute;
  bottom: 15px;
  font-size: 50%;
  right:50px;
  z-index: 2000;
  color:rgba(255,255,255,.5)
}  	  

#programme .credits-photo {
  text-shadow: 0px 1px 10px 10px black;
  color:white; 
  bottom:10px;
  right:40px;
}  
 
  	  
.legend {
  position: relative;
  bottom: 0;
  font-size: 24px;
  font-weight: 900;
  color:white;
  text-align: right;
  padding: 10px 30px;
  float:right;
  position: absolute;
  bottom:20px;
  right:20px;
  z-index: 1000;

}

.legend h3 {
  font-size: 2vw;
  text-transform: uppercase;
  font-weight: 900;  
  color:white;    	
  margin:0;
  padding:0;    
  line-height: 1em;    	  
}

.legend h4 {
  font-size: 1.3vw;
  text-transform: uppercase;
  font-weight: 500;   
  color:white;   	  
  margin:0;
  padding:0;  
}

	/* MOBILE */
  @media screen 
  and (min-device-width : 320px) 
  and (max-width: 568px) {
    
    #splash {
      height: 15vw;
/*       border:1px solid transparent */
    }
  }

.fullsize .legend>h3 { font-size: 4vw;}
.fullsize .legend>h4 { font-size: 2vw;}

.creation-jurassienne {
   width: 5vw;
   height: 5vw;
   background: url(../img/creation-jurassienne.png) no-repeat;
   background-position: center center;
   background-size: cover;
   position: absolute;
   z-index: 2000;
   left:1vw;
   bottom:1vw
 }  
 
 
.creation-jurassienne.small {
	  float:right;
	  position: inherit;
    width: 4vw;
    height: 4vw;	  
  } 

 
 .jeune-public {
   width: 5vw;
   height: 5vw;
   background: url(../img/jeune-public.png) no-repeat;
   background-position: center center;
   background-size: cover;
   position: absolute;
   z-index: 2000;
   left:1vw;
   top:1vw
 }  
 
 
  .jeune-public.small {
	  float:right;
	  position: inherit;
    width: 4vw;
    height: 4vw;	  
  }
 
 .fullsize .creation-jurassienne {
   width: 10vw;
   height: 10vw;
   top: calc(33vw);
   left:5vw;
   bottom:0vw;
}     

 .fullsize .jeune-public {
   width: 10vw;
   height: 10vw;
   top: calc(33vw);
   left:5vw;
   bottom:0vw;
}  

	/* MOBILE */
  @media screen 
  and (min-device-width : 320px) 
  and (max-width: 568px) {
     #programme .creation-jurassienne, #programme .jeune-public, .creation-jurassienne, .jeune-public.small  {
		 	width: 13vw;
		 	height: 13vw;
    }   
  }


#accueil #b-tout-le-programme, #accueil #b-toutes-les-nouvelles {
  float:right;
  line-height: 2.4em;
}

#accueil .btn.download {
	background: url(../img/programme.png) no-repeat black;
	background-size: contain;
  font-size: 16px;
  float:none;
  margin: 1em 1em 0 0;
  line-height: 1em;
  padding: 16px 10px;
  width: 100%;
}

.culture-jura {
	float:right;
}

.culture-jura img{
	height: 40px;
	margin: 16px 16px 0 0;
}

/* CAROUSEL */
.owl-carousel.carousel {
  padding: 0;
  margin: 0;
  height: 33vh;
  width: 100vw;
  overflow: hidden;

}

.owl-pagination {
 border: 1px dotted red; 
 margin-top: 25px, 
}

.owl-theme .owl-controls .owl-page {
    display: inline-block;
}
.owl-theme .owl-controls .owl-page span {
    background: none repeat scroll 0 0 #869791;
    border-radius: 20px;
    display: block;
    height: 12px;
    margin: 5px 7px;
    opacity: 0.5;
    width: 12px;
}

.owl-dots{
  text-align: center;
}

.owl-theme .owl-dots .owl-dot {
  display: inline-block;
  text-align: center;
  zoom: 1;

}
.owl-theme .owl-dots .owl-dot span {
  width: 5px;
  height: 5px;
  margin: 5px 7px;
  background: #d6d6d6;
  display: block;
  -webkit-backface-visibility: visible;
  -webkit-transition: opacity 200ms ease;
  -moz-transition: opacity 200ms ease;
  -ms-transition: opacity 200ms ease;
  -o-transition: opacity 200ms ease;
  transition: opacity 200ms ease;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
  background: #869791;
}

	/* TABLETTE */
  @media screen 
  and (min-width : 768px) 
  and (max-width: 1024px) {
     #splash { height: 50vh; } 
  }  

	/* MOBILE */
  @media screen 
  and (min-device-width : 320px) 
  and (max-width: 758px) {
    
    .culture-jura {
      display: none;
    }
    

    
    #header {
      background: #333
    }
    
    #splash {
      top:0px;
      padding: 80px 0 0px 0 ;
      height: 27vh;
      min-height: 150px
    }
    
    #splash h3 {
      padding-left: 16px
    }
    
    
    #splash .container, #splash .container.fullsize {
      height:  calc(100vw / 2);
      width: 100vw;
    }
    
    #splash .container .item  {
      width: 100vw;
      height: calc(100vw / 2);
      overflow: hidden;
    }  
    
    #accueil .legend {
      bottom:5px;
      right: 5px;
    }
    
    #accueil  #splash .container, #accueil #splash .container.fullsize {
      width: 100%;
      margin: 0;
      padding: 0;
    }

    
    #accueil .fullsize .legend>h3, #accueil .legend>h3 { font-size: 6vw;}
    #accueil .fullsize .legend>h4, #accueil .legend>h4  { font-size: 5vw;}    
    
    .credits-photo {
      display: none;
    }
    
    #accueil #content {
      margin-top: 40px;
    }
    
  }

/* UI
**************************************************************************************************************/
.btn {
  
  display:block;
  width: 200px;
  height: 50px;
  color:white;
  float:left;
  padding: 4px 10px;

  font-family: Ubuntu, sans-serif;
  font-weight: bold;
  text-align: center;
  font-size: 100%
}


#programme .btn {
  width: 140px;
  height: 35px;  
  line-height: 1.4em;
}

.btn:hover {
  background-color: #666;
  color:white;
}

.button-1 { background: url(../img/button-1.png) no-repeat ; background-position: center center; background-size: contain; }
.button-2 { background: url(../img/button-2.png) no-repeat; background-position: center center; background-size: contain; }
.button-3 { background: url(../img/button-3.png) no-repeat; background-position: center center; background-size: contain; }

.btn.normal {
  background-color: #666;
}

#footer .columns a.btn-newsetter {
	background: #666;
	color:white;
	padding: .5em;
	text-align: center;
	display: block;
	margin: 1em 0;
	border: 0;
	text-decoration: none;
	transition: .5s all ease
}

#footer .columns a.btn-newsetter:hover {
	color:white;
	background: black;
	border: 0;	
	text-decoration: none;	
}	

/* ACCUEIL
**************************************************************************************************************/

#accueil #content {
  top:5vw;
  position: relative;
}

.nouvelles-item h4 {
  text-transform: uppercase;
  line-height: 1.1em;
  font-size: 120%
}  

.nouvelles-item {
  font-family: Bitter, serif;
  padding-bottom: 1em;
  color:#333;
  float:left;
  width: 100%;
  margin-bottom: 20px;
}

.nouvelles-item div {
  padding: 5px 20px 5px 30px;
  background: url(../img/bg-nouvelles.png) no-repeat #f0f0f0;
  background-size: 10px 20px;
  background-position: 95% center;  
}

.nouvelles-item:hover {
  color:white;
}

.nouvelles-item:hover h4 {
  color:white;
}  

.nouvelles-item:hover div{
  background: url(../img/bg-nouvelles-over.png) no-repeat #333;
  background-size: 10px 20px;
  background-position: 95% center;   
}

.nouvelles-item .date {
  font-size: 50%;
  margin: 0 0 .5em 0;
}

.home-btn {
  width:auto;
  display: block;
  padding: 1em 0;
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
  color:white;
  margin-bottom: 1em;
}


.home-btn h3, .home-btn h4 {
  font-size: 1.5vw;
  color:white;
  padding: 0;
  margin: 0;
  line-height: 1em;
}

.home-btn h3 {
  font-family: Bitter, serif;  
  font-weight: 100;
  font-size: 1.2vw;
}

.home-btn:hover {
  color:white;
}

.home-btn.ces {
  background: url(../img/bg-nouvelles-over.png) no-repeat  #5c0358 ;
  background-size: 10px 20px;
  background-position: 95% center;    
  
}

.home-btn.pasvac {
  background: url(../img/bg-nouvelles-over.png) no-repeat  #c13b00 ;
  background-size: 10px 20px;
  background-position: 95% center;  
}

.home-btn.affichage {
  background: url(../img/bg-nouvelles-over.png) no-repeat  #5B9EC8 ;
  background-size: 10px 20px;
  background-position: 95% center;
}


	/* MOBILE */
  @media screen 
  and (min-device-width : 320px) 
  and (max-width: 568px) {
    
    #accueil #content {
        top:0vw;

    }
    
    #accueil h3.title {
      margin: 4em 0 1em;
      border-bottom: none;
      text-align: center;
      font-size: 100%;
      color:#666;
      font-weight: 100
    }
    
    .home-btn h3, .home-btn h4 {
      font-size: 24px
    }  
    
  }
  
#accueil #partenaires {
  margin:100px auto;
  padding: 2em auto;
}  

#accueil #partenaires h6 {
  text-transform: uppercase;
  font-weight: 100
}

#accueil #partenaires a {
  float:left;
  margin: 0 20px 0 0;
}

#accueil .partenaire-item {
  display: block;  
  width: 150px;
  height: 75px;
  float:left;
}

	/* MOBILE */
  @media screen 
  and (min-device-width : 320px) 
  and (max-width: 568px) {
    
    #accueil .partenaire-item {
      display: block;  
      width: 35vw;
      height: calc(40vw / 2);
      float:left;
    }    
    
  }
  


/* PROGRAMME
**************************************************************************************************************/
#programme #header {
  overflow: hidden;
  background: black;
  margin-bottom: 20px;
}

#programme #header div {
  -webkit-filter: grayscale(1);
  -moz-filter: grayscale(1);
  filter: grayscale(1);
  opacity:.5 
}  

#programme .btn.download {
	background: url(../img/programme.png) no-repeat black;
	background-size: contain;
  font-size: 16px;
  float:right;
  margin: 1em 1em 0 0;
  line-height: 1em;
  padding-top: 8px 40px 0 0;
  width: 200px;
  height: 40px;
}

#programme.detail #content {
  padding-top: 20vh;

}

#programme .caption {
  width: 100%;
  float:left;
  text-align: center;
  }

#programme .date-caption {
  background: #555;
  color:white;
  padding: 1px 10px;
  margin: 2em auto 1em ;
  width: auto;
  display: inline;
  float:left;
  text-transform: uppercase;
  font-weight: 900;
  font-size: 120%;
}



#filter {
  width: 100%;
  margin-bottom: 2em;
  padding: 0;
}

#filter .btn {
  width: 120px;
  height: 30px;
  line-height: 1em;
  margin-top: 10px;
} 

#filter select {
  margin-top: 10px;
}

#filters {
  list-style: none;
  padding: 0;
  margin: 0;
}

#filters li {
  display: inline;
  margin: 10px 10px 0 0;
}

.no_results {
  font-size: 2vw;
  text-align: center;
  margin: 5vh auto  10vh;
  text-transform: uppercase;
  color:silver;
}

.no_results em {
  display: block;
  font-size: 5vw;
  font-weight: 900;
  font-style: normal;
}


.programme-item  {
  border-bottom:#e6e6e6 dotted 4px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  display: block;
  float:left;
  width: 100%;  
  transition:.5s all ease;
}  

.programme-item  h4 {
  text-transform: uppercase;
  margin: .3em  0 .3em 0;
  line-height: 1.1em;
}

.programme-item.breve  h4 {
	margin-top: 0;
}

a.programme-item.breve:hover .content{
	background: #d5d5d5
} 

.programme-item p {
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  line-height: 1em;
  font-family: Bitter, serif;  
  font-weight: 200
}

.programme-item .image {
  width: 160px;
   height: 120px;
   float:left
}
.programme-item .breve-item {
  width: 160px;
   height: 80px;
   float:left;
   background: silver;
   text-align: center;
   padding-top: 2em;
  font-family: Bitter, serif;
  font-size: 12px;   
}

.programme-item .content {
  padding: 10px;
  float:left;
  margin-left: 10px;
  width: calc(100% - 300px);
}

.programme-item .date {
  width: 80px;
  height: 80px;
  font-family: Bitter, serif;
  float:left;
  text-align: center;
  color:white;
  text-transform: uppercase;
  padding: 3px;  
}


.programme-item .dow {
  font-size: 80%;
}

.programme-item .dow.period {
   line-height: 1.2em;
   padding-top: .8em; 
   font-size: 70%;
}  

.programme-item .day {
  font-size: 240%;
  font-weight: bold;
  margin: 0;
  padding: 0;
  line-height: 1em;
}

.programme-item .month {
  font-size: 75%;
}

.programme-item .date.border-1 { background: url(../img/border-1.png) no-repeat; background-position: center center; background-size: contain; }
.programme-item .date.border-2 { background: url(../img/border-2.png) no-repeat; background-position: center center; background-size: contain; }
.programme-item .date.border-3 { background: url(../img/border-3.png) no-repeat; background-position: center center; background-size: contain; }
.programme-item .date.border-4 { background: url(../img/border-4.png) no-repeat; background-position: center center; background-size: contain; }
.programme-item .date.border-5 { background: url(../img/border-5.png) no-repeat; background-position: center center; background-size: contain; }
.programme-item .date.border-6 { background: url(../img/border-6.png) no-repeat; background-position: center center; background-size: contain; }

.programme-item.breve, .programme-item.breve a,  .programme-item.breve h4, #content.breve  h3, #content.breve  h4  { 
  color:#888; 
}

.programme-item.breve .date  { 
  background-color:#888;
}


#programme.detail .creation-jurassienne, #programme.detail .jeune-public {
	position: inherit;
  float:left;
}



	/* MOBILE */
  @media screen 
  and (min-device-width : 320px) 
  and (max-width: 568px) {
    
    #programme #header {
      height: 100px;  
    }
    
    .programme-item .image {
      clear: right;
    }
 
    
    .programme-item .content {
      width: 90vw;
    }
    
    .programme-item.breve .content {
      width: 60vw;
      padding-top: 0;
    }    
    
    #programme.detail .creation-jurassienne {
	    position: inherit;
/*
      top:40vh;
      left:71vw;
      position: absolute
*/
    }

    .no_results {
      font-size: 24px;
      text-align: center;
      margin: 5vh auto  10vh;
      text-transform: uppercase;
      color:silver;
    }
    
    .no_results em {
      display: block;
      font-size: 12px;
      font-weight: 900;
      font-style: normal;
    } 	
    
    #programme .download {
      display: none;
    }
    
  }


#filters li {
  display: inline;
  float:left;
  margin: 0;
}

#filters .checkbox input[type="checkbox"],
#filters label.checkbox-inline input[type="checkbox"] {
    /*  Hide the checkbox, but keeps tabbing to it possible. */
    position: absolute;
    clip: rect(0 0 0 0);

}

#filters .badge {
  margin:0;
  color:white;
  width: 120px;
  height: 30px;
  display:block;
  text-align: center;
  background-size: cover;
  line-height: 2em;
  float:left;

}

.badge.all {
	background: black;
}

.badge {
	opacity:.5
}

.badge.check {
  opacity: 1;
}

#filters .checkbox input[type="checkbox"]:checked:focus + .badge,
#filters label.checkbox-inline input[type="checkbox"]:checked:focus + .badge {
    box-shadow:0 0 2pt 1pt #333;  /* Outline when checkbox is focused/tabbed to */


}

#filters .checkbox input[type="checkbox"]:focus + .badge,
#filters label.checkbox-inline input[type="checkbox"]:focus + .badge {
    box-shadow:0 0 2pt 1pt #999;  /* Outline when checkbox is focused/tabbed to */
}


/* Give badges for disabled checkboxes an opacity of 50% */
#filters .checkbox input[type="checkbox"]:disabled + .badge,
#filters label.checkbox-inline input[type="checkbox"]:disabled + .badge
{
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;   
}   

/* Remove badge background-color and set text color for not checked options */
#filters .checkbox input[type="checkbox"]:not(:checked) + .badge,
#filters label.checkbox-inline input[type="checkbox"]:not(:checked) + .badge{
    background-color:silver;
    color:#999;    
} 

#filters .badge .check {
  width: 20px;
  height: 20px;
  float:left;
  margin: 4px 0 0 4px;
  background: url(../img/checkbox-1.png) no-repeat;
  background-size: cover;
  background-position: center right;
}

#filters .checkbox input[type="checkbox"]:not(:checked) + .badge .check,
#filters label.checkbox-inline input[type="checkbox"]:not(:checked) + .badge .check{
  background: url(../img/checkbox-1.png) no-repeat;
  background-size: cover;
  background-position: center left;
}

	/* MOBILE */
  @media screen 
  and (min-device-width : 320px) 
  and (max-width: 568px) {
    
    #filter {
      width: 90vw;
      margin: -5vh 5vw 5vh;
    }
    
    #filters li{
      width: 40vw;
      text-align: center

    }
    
    #filters #b-afficher {
      float:left;
    }
    
  }

#programme.detail #content {
  margin-top: calc(25vw / 2); 
}

.statut.annule {
  height: 2em;
  width: 8em;
  background: url(../img/statut-annule.png) no-repeat;
  background-size: contain;
  background-position:left center;
  margin-top: -.4em;
   position: absolute; 
  z-index: 100
}

.statut.reporte {
  height: 2em;
  width: 8em;
  background: url(../img/statut-reporte.png) no-repeat;
  background-size: contain;
  background-position:left center;
  margin-top: -.4em;
  position: absolute;
  z-index: 100
  }

.statut.complet {
  height: 2em;
  width: 8em;
  background: url(../img/statut-complet.png) no-repeat;
  background-size: contain;
  background-position:left center;
  margin-top: -.4em;
   position: absolute; 
  z-index: 100
  
}

.tip {
  float:right;
  height: 1em;
}

.has-tip {
  cursor: pointer;
}

i.light {
  margin: 4px 0 0 .5em;
  font-size: 80%;
  float:right;
}

/* DETAILS
********************************************************************************/ 
.detail h3 {
  text-transform: uppercase;
  font-size: 3.5vw;
  line-height: 1em;
  width: 100%;
  float:left;
}

.detail h4 {
  text-transform: uppercase;
  font-size: 2vw;  
  margin-bottom: 1em;
  line-height: 1em;  
  width: 100%;
  float:left;  
}

.detail h5 {
  text-transform: uppercase; 
  padding-top: 2em;
  padding-bottom: .5em;
  color:#333;
  float:left;
  width: 100%

}

.detail .btns {
  width: 100%;
  float:left;
}

.detail .btn {
  margin: 10px auto;
}

.detail .video-frame {
  height: 400px;
  margin-bottom: 2em;
}

ul.details {
  list-style: none;
  margin-top: 20px;
  padding: 0;
  margin: 0;
  font-family:Bitter, serif;
  font-size: 90%;
}

ul.details li {
  border-bottom: 2px dotted #e3e3e3;
  margin: 0 0 8px 0;
  padding: 0 0 8px 0;
}

ul.details li div {
  padding-left: 40px;
}

ul.details li p {
  margin-bottom: .5em;
  font-family:Bitter, serif;
  font-size: 100%;  
}

ul.details li p strong {
  font-weight: 800
}

.partenaire-item {
  width: 200px;
  height: 80px;
  margin-bottom: 1em;
  font-weight: bold;
  clear: both
}

i.square {
  background-color:blue;
  padding: 6px;
  color:white;
  margin: 0 8px 8px 0;
  float:left;

}

i.square.icon-1 { background-image: url(../img/icon-1.png); background-size: cover; background-position: top center}
i.square.icon-2 { background-image: url(../img/icon-2.png); background-size: cover; background-position: center center}
i.square.icon-3 { background-image: url(../img/icon-3.png); background-size: cover; background-position: center center}

.illustration {
  width: 50vw;
  height: calc(50vw / 2);
  position: absolute;
  top:12vh;
  right:6vw;
  background: silver;
}

.illustration .item {
  width: 50vw;
  height: calc(50vw / 2);
  position: relative;
}

	/* TABLETTE */
  @media screen 
  and (min-width : 768px) 
  and (max-width: 1024px) {
    .illustration {
      top:15vh; 

    }  
  }  


	/* MOBILE */
  @media screen 
  and (min-device-width : 320px) 
  and (max-width: 568px) {
    
    .illustration {
      top:11vh;
      right:6vw;  
      width: 90vw;    
      height: calc(90vw / 2);
 
    }  
    
    .illustration .item {
      width: 90vw;
      height: calc(90vw / 2);
      position: relative;
    }   
    
    #programme.detail #content {
      padding-top: 130px;
    } 
    
    #programme.detail h3 {
      font-size: 24px;
    }
    
    #programme.detail h4 {
      font-size: 16px;
    }    
    
    #programme.detail h5 {
      font-size: 16px;
    }   
    
  
    
 
     #programme.detail .creation-jurassienne, #programme.detail .jeune-public {
		 	width: 15vw;
		 	height: 15vw;
    }     

    #programme .btns  {
      text-align: center
    }
    
    #programme.details .btn  {
      margin:0 auto;
      float: left;
      line-height: 2em;
    }
    
  }
  
  
/* NOUVELLES
********************************************************************************/   

#nouvelles .date-nouvelle {
  color:gray;
  font-size: 90%;
}

	/* MOBILE */
  @media screen 
  and (min-device-width : 320px) 
  and (max-width: 568px) {
    
    #nouvelles .date-nouvelle {
      padding-bottom: 1em;
      text-align: right;
        font-size: 60%;
    }
    

    
  }

/* CONTACT
********************************************************************************/ 
#map_canvas {
  width: 100vw;
  height: 70vh;
  position: fixed;
  top:0;
  left:0;
  z-index: 0
}

#contact  {
  background: black;
}

#contact #logo {
  /*display: none;*/
}

#contact #content {
  margin: 0;
}

#contact #footer {
  background-image: none;
  z-index: 400;
  position: absolute;
  top:50vh;
  width: 100vw;
}

#mapid {
  z-index: 10;
  margin-top: 150px;
}

/* FOOTER
**************************************************************************************************************/
#footer h4 {
  width: 16vw;
  height: 12vh;
  background: url(../img/logo.png) no-repeat;
  background-size: contain;
  text-indent: -9999px;
}  

#footer .columns {
  padding: 20px;
}

#footer .columns p {
    font-size: 12px;
    margin: 0;
}

#footer .columns a {
  border-bottom: 1px solid rgba(255,255,255,.5);
  color:white;
}  

#footer .columns a:hover {
  border-bottom: 1px solid rgba(255,255,255,1);
}  

#footer table, #footer tbody, #footer td, #footer td.odd, table tr.even, table tr.alt, table tr:nth-of-type(even) {
  background: transparent;
  color:white;
  border:0;
  font-size: 12px;
  padding: 0;
}

#footer h5 {
  margin-top: 4vh;
  color:white;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1vw
}

#footer h5:first-child {
  margin-top: 12vh;  
}

#footer #credits {
  font-size: 60%;
  color:rgba(255,255,255,.2);
  text-align: right;
  padding: 30px 10px 0;
}

#footer #credits a {
  color:rgba(255,255,255,.2);
  border:0;
}

#footer a.fb {
  text-decoration: none;
  border:0;
  font-size: 200%
}

	/* MOBILE */
  @media screen 
  and (min-device-width : 320px) 
  and (max-width: 568px) {
    
    #footer h4 {
      width: 70vw;
      height: 20vh;
      margin: 10px 0;
    }      
    
    #footer h5 {
      font-size: 150%;
      padding: 1em 0 1em;
      margin: 0;
    }
    
    #footer .columns {
      padding: 0 10px;
      margin: 0;
    }
    
    #footer h5:first-child {
      margin-top: 1em;
    }
    
    #footer .columns p, #footer .columns td {
        font-size: 14px;    
    }
  }
  
/* PRESSE
**************************************************************************************************************/
#presse .folder {
  margin: 0 0 4em 0;
  float:left;
  width: 100%;
}

#presse .folder h2 {
  width: 100%;
  float:left;
  margin: 2em 0 0em;
  text-transform: uppercase;
}

#presse .folder h2:first-child {
  margin: 0;
}  

#presse .folder h3 {
  width: 100%;
  float:left;
  margin: 0em 0 1em;
  text-transform: uppercase;
  font-size: 100%;
  font-weight: 100
}

#presse .statut {
  display: none;
}

.presse-item {
  width: 250px;
  height: 150px;
  text-align: center;
  display:block;
  color:#333;
  float: left;
  margin: 10px 10px 0 0;
}

.presse-item:hover {
    color:#333;
}  

.presse-item div{
  width: 250px;
  height: 125px;
  float:left;
  margin: 0px auto ;
  
}  

.presse-item i {
  color:#999; 
  line-height: 2.5em;
  font-size: 300%;

  
}  

/* FORMULAIRES
**************************************************************************************************************/

.errorMessage {
  font-size: 12px;
  background: #af1919;
  color:white;
  margin: 0 0 12px 0;
  padding: 2px 8px;
  font-weight: bold;
}

label {
  text-transform: uppercase;
  padding: 1em 0 .5em;
}

.form-edit label {
  font-weight: bold;
}

.form-edit label.radio {
  font-weight: normal;
  margin: 0;
  padding: .5em 0 0 0;
  line-height: 1em;
}

.form-edit input[type=radio] {
  margin-right: .5em;
}

.construction {
  background: #333;
  color:white;
  text-transform: uppercase;
  text-align: center;
  padding: 4px 8px;
  transform: rotateZ(-12deg);
  margin: 50px auto;
  width: 200px;
}

.details {
  padding-top: 0.7em;
}

.form-edit .button {
  display:block;
  width: 200px;
  height: 50px;
  color:white;  
  float:right;
  padding: 0px 10px;
  background: #333;
  font-family: Ubuntu, sans-serif;
  font-weight: bold;
  text-align: center;
  font-size: 100% ;
  margin: 1em; 
}
.form-edit .button:hover {
  background-color: black;
}

.success {
  
  text-align: center;
  background: #f0f0f0;
  padding: 2em;
  border-radius: 10px;
}

	/* MOBILE */
  @media screen 
  and (min-device-width : 320px) 
  and (max-width: 568px) {
    
    .form-edit label {
      font-size: 80%;
    }
    

  }

/* DROILA
*************************************************************************************************************************/
#droila-carrousel {
  margin: 0 auto;
  width: 90vw;;
  height: 20vw;

  background: url(/img/droila-fond.png) no-repeat;
  background-size: cover;
  border-radius: 10px;
  padding: 0 20px;
}

.droila-carrousel-slide {
  display: block;
  width: 18vw;
  height: 18vw;;
  margin: 1vw 20px;
}

.droila-carrousel-slide.logo-slide {
  background: url(/img/droila-logo.png) no-repeat;
  background-size: contain;
  background-position: center;
  border-radius: 10px;
  width: 12vw;

}

.slick-prev::before ,
.slick-next::before {
  color: #F68631;
}

.slick-active {
  color: #F68631;
}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
  #droila-carrousel {
    /*position: absolute;*/
    top:10vh;
    height: 30vh;
  }

  .droila-carrousel-slide {
    display: block;
    width: 58vw;
    height: 58vw;;
    margin: 1vw 20px;
  }

  .droila-carrousel-slide.logo-slide {
    width: 34vw;
    height: 58vw;;
  }
}