h2, h4{
	text-transform: uppercase;
}

#slider{
	position: fixed;
	right: 40px;
	top: 20px;
	width: 100px;
}

.filters-programme{
	position: absolute;
	top: 20px;
	left: 10px;
	color: black;
	width: 100%;
}

.horaires{
	background-color: var(--color-green);
	color: white;
	border-radius: 1em;
	padding: 2px 5px 2px 5px;
	margin-bottom: 3px;
}

.m-title{
		max-width: 80%;
    display: inline-block;
    }

#category ul{
		width: 100%;
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center; /* Center align the flex items */
}

#regions-filters{
	margin-top: 5px !important;
}

#category li{
    display: inline-block;
    margin-right: 10px;
    background-color: white;
    color: black;
    border: 1px solid black;
    border-radius: 20px;
    padding: 3px 7px 2px 7px;
    z-index: 200;
    cursor: pointer;
}

.filter-selected {
    background-color: black !important;
    color: white !important;
}

.filters{
	 position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  background-color: white; 
	  z-index: 10; 
	  height: 103px;
	  overflow-y: hidden;
	  display: flex;
	  flex-wrap: wrap;
  	justify-content: center;
}

#cantons-mob{
	position: fixed;
	right: 5px;
	top: 8px;
}


#days{
	margin-top: 8px;
		margin-bottom: -15px;
}

#cantons,
#days {
  width: 100%;
}

.filters ul {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
  padding-top: 5px;
  margin: 0;
  z-index: 20;
}


#dates li,
#cantons li{
	margin-right: 5px;
}

#cantons-mob ul{
	width: 100%;

}

#cantons-mob button{
	width: 100%;
	margin-top: 5px;
}



#programme {
	padding-top: 98px; 
  position: sticky;
  top: 0;
  overflow: auto;
  max-height: calc(100vh - 50px);
}

figure{
	margin-bottom: 30px;
	margin-top: 15px;
}



.film-cover{
	opacity: 1;
	transition-duration: .5s;
}

.film-cover:hover{
	opacity: .9;
	transition-duration: .2s;
}



/*
figure{
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
*/
h4{
	 min-height: 45px;
	 display: flex; 
	 line-height: 1.1;
   align-items: flex-end;
}

.film-cover{
	 align-self: start;

}


#programme ul{
	margin-top: 5px;
}

#programme ul li{
	line-height: 1.2;
}

.festival-day{
	position: sticky;
	top: 0;
	z-index: 2;
	background-color: white;
	color: var(--color-green);
	margin-top: 5px;
	border-bottom: 1px solid black;
	width: 100%;
}

.main{
	padding: 1px 5px 5px 5px;
	overflow-y: hidden;
}









	/*------------__SLIDERR */

			.noUi-horizontal {
  			height: 16px;
			}
			.noUi-horizontal .noUi-handle {
			  width: 14px;
			  height: 14px;
			  right: -7px;
			  top: 0px;
			  border-radius: 8px;
			}
			.noUi-vertical {
			  width: 18px;
			}
			.noUi-vertical .noUi-handle {
			  width: 28px;
			  height: 34px;
			  right: -6px;
			  bottom: -17px;
			}

			#maxvalue{
				padding-top: 6px;
			}

			.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle {
			  left: -17px;
			  right: auto;
			}
			/* Styling;
			 * Giving the connect element a border radius causes issues with using transform: scale
			 */
			.noUi-target {
			  border-radius: 10px;
			  border: 1px solid black;
			}
			.noUi-connects {
			  border-radius: 3px;
			}
			.noUi-connect {
			  background: white;
			}
			/* Handles and cursors;
			 */
			.noUi-draggable {
			  cursor: ew-resize;
			}
			.noUi-vertical .noUi-draggable {
			  cursor: ns-resize;
			}
			.noUi-handle {
			  border-radius: 10px;
			  background: black;
			  cursor: default;
			  
			}











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

	.filters{
	  height: 73px;
	  z-index: 100;
	  transition-duration: .2s;
}

#programme {
	padding-top: 70px; 
	overflow-x: hidden;
}

	.filters ul {
  z-index: 101;
      padding-top: 0px;
}
  
.filters li{
	z-index: 102;
}

.filters li button{
	opacity: 0.99;
	  -webkit-transform: translate3d(0,0,0);
   z-index: 999;
}

	figure{
		margin-bottom: 15px;
		margin-top: 5px;
	}

	#days-mob{
	position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
}

	#days-mob li{
		float: left;
	}

	#days-mob button {
    width: 100%;
    margin-top: 5px;
  	padding: 2px;
}
	#days-mob button:hover,
	#cantons-mob button:hover{
		background-color: white;
		color: var(--color-red);
	}

	#dates li{
		float: left;
		margin-left: 2px;
		margin-right: 2px;
		width: 100%;
	}


	figcaption .right{
		float: left;
	}


	#cantons-mob{
		position: fixed;
		left: 0px;
		top: 30px;
		width: 100%;
		padding: 2px;
	}

	#cantons-mob ul{
		display: grid;
	  grid-template-columns: repeat(6, 1fr);
	  list-style-type: none;
	  padding: 0;
	  margin: 0;
	}

	  #cantons-mob div{
	  	text-align: center;
	  }  

	#cantons-mob li{
		padding: 2px;
	}


	#dates li{
	float: inherit;
	margin-right: 5px;
}

	.is-selected{
  color: white;
  background-color: var(--color-red);
}

}