<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}
body {font-family: Verdana;}

.tablink {
  background-color: white;
  color: #5D6D7E;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 6px 2px;
  font-size: 16px;
  width: 25%;
}


.pTitre {
	font-size: 2em;
	line-height: normal;
	color: #CC3333;
	text-transform: uppercase;
	text-align: center;
	font-weight: 300;
}

.pSousTitre {
	font-size: 1em;
	color: #AAAAAA;
	text-transform: uppercase;
	text-align: center;
	font-weight: 300;
}

.afficheDate {
	font-size: 0.85em;
	color: #AAAAAA;
	text-align: center;
}

.afficheInfos {
	font-size: 0.85em;
	color: #BB0000;
	text-align: center;
}

.titreAnim {
	font-size: 1.5em;
	color: #CC3333;
	text-align: center;
}

.texteAnim {
	font-size: 1em;
	color: #AAAAAA;
	text-align: center;
}

.titreFilm {
	font-size: 1.5em;
	color: #CC3333;
	text-align: center;
}

.titreSlide {
	font-size: 1.5em;
	color: #CC3333;
	text-align: center;
}

.titreFilmProg {
	font-size: 0.9em;
	color: #2874A6;
	text-align: center;
}

.dateFilm {
	font-size: 1em;
	color: #AAAAAA;
	text-align: center;
}

.dateFilmProg {
	font-size: 0.9em;
	color: #AAAAAA;
	text-align: center;
}


.realisateurFilm {
	font-size: 1em;
	color: #888888;
	text-align: center;
}

.acteurFilm {
	font-size: 1em;
	color: #888888;
	text-align: center;	
}

.synopsisFilm {
	font-size: 1em;
	color: #888888;
	text-align: center;	
}

.noteFilm {
	font-size: 0.9em;
	color: #2874A6;
	text-align: center;
}


.titrePara {
	font-size: 1.5em;
	color: #CC3333;
	text-align: center;
	width:300px;
	margin:auto;
}

.tarifs {
	font-size: 1.1em;
	color: #888888;
	text-align: center;	
}

h3 {
	font-size: 20px;
	color: black;
	text-align: center;
}






.mySlidesWeek {
	display: none;
	float: left;
	padding: 4px 6px;
}

.mySlidesNextWeek {
	display: none;
	float: left;
	padding: 4px 6px;
}





/* Slideshow container */
.slideshow-container {
  /*position: relative;*/
  margin: auto;
  width:100%;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dotWeek {
  height: 12px;
  width: 12px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

/* The dots/bullets/indicators */
.dotNextWeek{
  height: 12px;
  width: 12px;
  margin: 0 2px;
  background-color: #0b0;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #888;
}

.inactive {
  background-color: #ddd;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 400px) {
  .text {font-size: 11px}
}
}


