/*
Theme Name: Theme cinéma
Author: Michael Yameogo, Alexis Pelé, Télio Lefranc
Description: Thème développé pour le cinéma de combourg
Version: 0.1
Tags: theme perso
Text Domain: cinecombourg

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

*{
	margin:0;
	padding:0;
	box-sizing:border-box;
/*    font-family: cursive !important; /* TRES IMPORTANT */
	color: #fff}
a{
	text-decoration:none;
	color:inherit}
*:focus{outline:none}
ul{list-style: none}
img{height: 100%}
body{scroll-behavior: smooth;overflow-x: hidden;background: #212121}

::-moz-selection { /*@bugfix mozilla*/
		background: #A00B0B; 
		color: #fff
}
::selection { /* effet souris  */
		background: #A00B0B; /* REMPLACER PAR LA COULEUR DÉSIRÉE*/
		color: #fff
}

h1, h2, h3{
		font-family: 'Montserrat', sans-serif;
	}


/* ======================== LES POLICES. ======================== */

body > header h1,
body > header h2{font-family: 'Roboto Slab', serif;
font-weight: 100;}

#menu_haut,
#films h2,
#films cite,
#actu h2,
#contact h2, #form-contact h1
{font-family: 'Montserrat', sans-serif}

#films p, #films a,
#actu p, #actu a, #actu .event-time,
#contact p,
#form-contact input[type=submit],
footer {font-family: 'Lato', sans-serif}

/* ======================== PAGE D'ACCUEIL ======================== */

/*********** HEADER ***********/
body > header{
	text-align: center;
	width: 100%;
	background: black;
	padding: 10px 0;
	color: #fff}
body > header h1{font-size: 4em}
body > header h2{font-size: 2em}
body > header img{width: 60vw}

#header_low{
	position: sticky;
	top: 0;
	font-size: 1em;
	color: #fff;
	background: #A00B0B;
	width: 100%;
	display: flex;
	justify-content: center}
#menu_haut{
	display: flex}

#menu_haut, #menu_haut ul{
	padding:0;
	margin:0;
	width: max-content;
	min-width: 6rem;
	list-style:none;
	text-align:center}

#menu_haut>li{
	padding: 10px 0;
	display:inline-block;
	cursor: pointer;
	position:relative}
#menu_haut>li:hover{background: #500808}

#menu_haut li{
	display:inherit;
	border-radius:0}

#menu_haut ul{
	position:absolute;
	z-index: 100;
	max-height:0;
	left: 0;
	right: 0;
	top: 100%;
	overflow:hidden;
	-moz-transition: .8s all .3s;
	-webkit-transition: .8s all .3s;
	transition: .8s all .3s;
	border-radius: 0 0 6px 6px}

#menu_haut li:hover ul{max-height:15em}
#menu_haut li {background: #A00B0B}

/* Liens */
#menu_haut a{
	text-decoration:none;
	display:block;
	padding:4px 32px;
	color:#fff;
	font-size: 1.2em}
#menu_haut ul a{padding: .5rem}

#menu_haut li:hover li a{
	color:#fff;
	text-transform:inherit}
#menu_haut li:hover li a:hover{background: #500808}

#menu_haut li:focus ul{max-height:15em} /* version comme au survol pour mobile */

#menu_haut li {transition: all .3s;}


/* Media Queries pour le menu burger */
@media screen and (max-width: 870px) {

	#toggle_menu {
		display: block;
		position: absolute;
		top: 0;
		right: 1.5rem;
		height: 3rem;
		width: 5vw;
		min-width: 1.5rem;
		z-index: 5000;
	}
	
	#toggle_menu>div {
		background-color: #fff;
		width: 100%;
		position: absolute;
		height: .25rem;
		border-radius: .25rem;
		top: 1.375rem;
		transition: all .75s;
	}
	
	#header_low {transition: overflow 0 1s;}

	#toggle_menu>div:first-child {transform: translateY(-2.3vw);}	
	#toggle_menu>div:last-child {transform: translateY(2.3vw);}	

	.open #toggle_menu>div:first-child {transform: rotate(45deg);}	
	.open #toggle_menu>div:nth-child(2) {margin-left: 50%; width: 0}	
	.open #toggle_menu>div:last-child {transform: rotate(-45deg);}	
	

	#header_low {max-height: 3rem; transition: all 1.2s; overflow: hidden;}
	.open #header_low {height: auto; overflow: auto; max-height: 100vh;}
	#header_low>ul {display: block; width: 100%; padding-top: 3rem;}
	#header_low ul>li {display: block; width: 100%}
	#header_low li>ul {position: relative;border-radius: 0; width: 100%}
}


/* ======================== SECTION DE FILMS ======================== */

#films{
	padding-bottom: 15rem;
	text-align: center;
	color: #FFF;
	background: #252525;
	z-index: 1}

#films h2{
	padding: 70px 0;
	margin: auto;
	/* font-size: 3.8em */
}

#slider{
	padding: 0 2rem 0;
	margin: 0 10%;
	display: flex;
	flex-flow: wrap;
	justify-content: space-around}
#slider img{
	display: block;
	height: 290px;
	border: 2px solid transparent ;
	opacity: 0.8;
	transition: all 0.2s}
#slider img:hover, #slider img.active {
	border: 2px solid #FFF;
	opacity: 1;}

#films cite{
	padding: 10px 1% 1% 1%;
	width: 50%;
	margin: auto;
	font-size: 3em;
	font-weight: bold;
	font-style: normal;
	text-transform: uppercase}

#films .detail_affiche p {
	width: 60%;
	margin: auto;
	font-size: 1.2em;
	color: #DDD}
.details-container{
	position: relative;
	width: 100vw;}
.detail_affiche{
	width: 70rem;
	position: absolute;
	right: 50%;
	transform: translate(50%);
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.5s ease-in-out}

.detail_affiche.active{
	visibility: visible;
	opacity: 1}

#films a{
	display: inline-block;
	margin: 20px 0 20px;
	padding: 7px 10px;
	font-size: 1.3em;
	border: 2px solid #FFF;
	transition: all 0.1s ease-in-out}

#films a:hover{
	color: #000;
	border: 2px solid transparent;
	background: #FFF;}


/* ======================== SECTION ACTUALITÉS ======================== */

#actu{
	min-height: 40vh;
	padding: 2rem;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #FFF;
	background: url('images/actubackground.jpg') no-repeat top center/cover;
	background-attachment: fixed}

#actu div{
	width: 60rem;
	padding-bottom: 50px;
	background: rgba(19,19,19,0.95);
	box-shadow: 5px 5px 5px rgba(19,19,19,0.4)}

#actu div h2{
	padding: 20px 0;
	background: #000;
	text-align: center;
	font-size: 2.8em;
	text-transform: uppercase;
	box-shadow: 0px 5px 10px 5px rgba(0,0,0,0.2)}
#actu div > h2:first-child{
	font-size: 3.4em;
	border-bottom: 2px solid #fff}
#actu div > h2{font-weight: 800}

#actu article{
	width: 80%;
	margin: 10px auto 0}
#actu article h2{
	margin: 40px 0 25px;
	text-align: center;
	font-size: 2.2em;
	border-top: 1px solid #FFF;
	clear: both}
#actu article p{
	width: 90%;
	margin: auto;
	font-size: 1.15em}
#actu a:not(.readmore-button){
	color: #C40000;
	font-weight: bold}
	#actu a:not(.readmore-button):hover{
		text-decoration: underline}
#actu .readmore-button{
	float: right;
	margin: 20px 0 40px;
	width: 30%;
	padding: 10px 15px;
	text-align: center;
	display: block;
	font-weight: bold;
	background: #000;
	transition: all 0.2s}
#actu .readmore-button:hover{
	font-weight: bold;
	color: #000;
	background: #FFF;
	transition: all 0.2s;}
#actu .event-time{
	margin: 0 auto 20px;
	max-width: 15rem;
	padding: 0.5rem;
	display: block;
	font-size: 1.5em;
	font-weight: bold;
	text-align: center;
	background: #000}
#actu ol{
	width: 85%;
	margin: auto;
	font-family: 'Roboto'}
#actu blockquote, #contact blockquote{
	margin: 20px auto;
	padding: 2rem 1rem;
	font-style: italic;
	font-size: 80%;
	border-left: 10px solid #000;
	background: rgba(255,255,255,0.05)}
#actu blockquote:before, #contact blockquote:before{
	color: #EEE;
	font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f10d";
	font-size: 2em;
	font-style: normal;
	line-height: 0.1em;
	margin-right: 0.25em;
	vertical-align: -0.4em}

#actu ul {width:90%;margin:auto}

#contact {width: 80%; margin: auto}

/* ======================== SECTION TIMELINE ======================== */


#prog {
	font-family: 'lato', sans-serif;
	background-color: #000;
	padding: 30px 5%;
	text-align: center;
}

#prog img {
	max-width: 100%;
	height: auto;
}


.loader::after {
	content: url(../images/load.gif);
	position: absolute;
	top: 0;
	transform: translate(-50%);
}

#prog.loader {
	filter: blur(2px);
}

#prog>header {
	position: sticky;
	top: 3rem;
	z-index: 2;
	background-color: #000;
}


#prog .row>figure {cursor: pointer}

#prog header, #prog .row {
	display: flex;
	align-items: center;
}

#prog small {padding: .5rem; text-decoration: underline; margin:auto}

#prog select {
	width: 12%;
	border: 0;
	color: #EEE;
	font-size: 0.8rem;
	font-weight: bold;
	padding: 12px 5px; 
	margin-right: 3%;
	background: #5A0707;
}

#prog main figure {
	width: 15%;
	position: relative;
	padding: 2rem 3% 2rem 0;
}

#prog .row figcaption h3 {display: none;}

#prog .week, #prog .timeline {
	list-style-type: none;
	width: 85%;
	display: flex;
}

.description_film{
	padding-left: 1rem;
}

#prog .week {
	text-transform: uppercase;
	font-weight: bolder;
	font-family: 'lato', sans-serif;
	justify-content: space-around;	
}


#prog .timeline {
	align-items: center;
}

.week li {
	background:#fff;
	width: 14.3%;
	font-weight: bolder;
}

.week li:nth-child(1) {color: #680919;}

.week li:nth-child(2) {color: #68B702;}

.week li:nth-child(3) {color: #B57504;}

.week li:nth-child(4) {color: #0A87CC;}

.week li:nth-child(5) {color: #AF08A7;}

.week li:nth-child(6) {color: #15AD09;}

.week li:nth-child(7) {color: #19D1B6;}

.timeline li:nth-child(1) {background-color: #680919;}

.timeline li:nth-child(2) {background-color: #68B702;}

.timeline li:nth-child(3) {background-color: #B57504;}

.timeline li:nth-child(4) {background-color: #0A87CC;}

.timeline li:nth-child(5) {background-color: #AF08A7;}

.timeline li:nth-child(6) {background-color: #15AD09;}

.timeline li:nth-child(7) {background-color: #19D1B6;}


.timeline li {
	position: relative;
	width: 14.28%;
	height: 1.5rem;
}

.timeline time {
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 100%;
	padding: .5rem 0;
}

.timeline time .d3 {
	text-decoration: underline;
}

.timeline time .d3::after {
	content: '';
	background:  url(../images/3d.svg) no-repeat center center / contain;
	position: absolute;
	display: block;
	width: 100%;
	height: 1.5rem;
	top: 100%;
	text-decoration: underline;
}

/******Movie+Description*****************/




.movie  { 	
	display: flex;
	justify-content: space-around;
	width: 80%;
	margin: 60px auto;
	padding: 50px 0 60px 0;
	font-family: 'lato', sans-serif;
	background: #fff;
}

.movie>div>div {
	height: 60%;
	text-align: left;
	width: 75%;
}

.movie>div {
	display: flex;
	padding: 20px;
}

.slider-link {display: inline-block;}

.movie>div h1 {
	padding-bottom: 40px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400px;
	font-size: 2.8em;
	color: #A00B0B;

}


.movie header {
	padding: 0 0 30px 20px;
}

.movie header span {
	color: #000;
	font-size: 1rem;
	font-weight: normal;
}

.movie h2 {
	color: #000;
	font-size: 2.5em;
}

.movie header p {
	font-weight: bolder;
	font-size: 1.2em;
	color: #A00B0B;
	padding: 3px 0;
}

.movie strong {
	font-weight: bolder;
	font-size: 1.2em;
	color: #A00B0B;
}

.description_film h2 {
	font-family: 'Montserrat', sans-serif;
	font-size: 1.8em;
	color: #A00B0B;
}

.description_film p {
	font-size: 0.8em;
	padding-top: 10px;
	color: #000;
}

.poster {
	width: 25%;
	min-width: 100px;
	position: relative;
}

.poster img {
	height: auto;
	width: 100%;
}

.b-a {
	position: relative;
	display: block;
	
}

.b-a::before {
	font-size: 3.2em;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,.7);
	opacity: 0;
	text-align: center;
	color: #fff;             
	transition: .2s ease;
}


.b-a:hover::before {
	opacity: 1;

}

.movie table {
	border-collapse: collapse;
	margin: auto;
	text-align: center;
	margin-right: 20px;
}

.movie table td:first-child {
	padding: 5px 25px;
}

tbody td {
	font-weight:400;
	color:#5f6062;
	padding: 3px 3px 3px 3px;
}

.day_table td:first-child {
	font-weight: bolder;
}

.movie img{
	max-width: 100%;
	height: auto;
}

th {
	font-size: 18px;
	text-align: center;
	padding: 20px;
	background: #BA0D0D;
	font-weight: 1000;
	text-shadow: 2px 2px #000;
}

tbody tr {
	background:#f0f3f5;
}

.day_table {
	border-top: #fff solid 2px;
}

table .fa-check {
	color: green;
}

th:first-child {
	padding: 15px;
}
th.semaine-header{
	background: #730909;
}
.day_table td:first-child{text-transform: capitalize}
.heure-film{font-weight: bold;}

@media screen and (max-width: 1200px) {
	.movie {
		display: block;
		padding-bottom: 1rem;
	}
	.movie aside {
		text-align: center;
	}
	.movie h2{
		font-size: 2em;
	}
	.movie header{
		padding: 15px 0 0;
	}

	.movie>div {display: block; padding: 20px;}
	.movie>div>div {width: 100%; height: auto;}

	.movie table {
		margin-top: 1rem;
		width: 100%;
		max-width: 30rem;
		margin: 1rem auto 1rem;
	}

	.movie table th {
		padding: 20px 0;
	}

	.movie table td:first-child {
		padding: 5px;
	}
	.description_film{
		padding-left: 0;
		padding-top: 10px;
	}
	.description_film p{
		padding-top: 0;
	}

	#prog header {
		flex-wrap: wrap;
	}

	#prog .week {
		width: 100%;
	}

	#prog .row figure {
		text-align: left;
		width: 100%;
		display:  flex;
		align-items: center;
	}

	#prog .row img {
		max-height: 80px;
		margin-right: 1rem;
	}

	#prog .row {flex-wrap: wrap;}

	#prog .row ul {width: 100%;}

	
	#prog .row figcaption h3 {display: block;}

	.timeline {margin: 4rem 0}

}

/*-_-*-_-*-_-*-_-*-_-*-_-*-_-*-_-* Modal  *-_-*-_-*-_-*-_-*-_-*-_-*-_-*-_-*/

@keyframes modal {
		0% {background-color: transparent;}
}

@keyframes modalContent {
		0% {transform: translateY(-150%);}
}

.modal {
	display: none !important;
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	right: 0;
	background-color: rgba(0,0,0,.75);
	animation: modal .25s;
	justify-content: center;
	align-items: center;
}

.modal.active {display: flex !important;}

.modal-content {
	padding: 0 20px 50%;
	width: 80%;
	display: flex;
	animation: modalContent .5s;
	box-shadow: none;
	background-color: transparent;
	border: 0;
	justify-content: center;
	align-items: center;
	position: relative;
	flex-direction: column;
	height: 0;
	overflow: hidden;
}
.container-video iframe {
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    margin: auto;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
}

.close-modal {
	font-size: 2rem;
	margin: 1.5rem;
    position: absolute;
    right: 2.5%;
    top: 2.5%;
    z-index: 2;
}
.close-modal:hover {color: red;}

@media screen and (max-width: 1200px) {
	#prog>header>select {margin: .5rem 0 0; width: 100%;}
}

@media screen and (max-width: 400px) {
	#filmsDetails>article {
		margin: 0; 
		width: 100%;
		margin-bottom: 1rem;
	}
	.movie table {max-width: 100%}
	#prog {padding: 0}
}

/* ======================== FOOTER ======================== */

footer{
	position: relative;
	color: #AAA;
	background: #212121;
	font-size: 85%;
	box-shadow: 0px -5px 10px 5px rgba(0,0,0,0.2)}

footer > ul:nth-child(1){
	padding: 20px 80px;
	display: flex;
	justify-content: space-around;
	line-height: 1em;
	list-style: none}
footer > ul:nth-child(1)>li{
	width: 20%}
footer > ul:nth-child(1) h3{
	padding: 0 0 10px;
	font-size: 1.25em;
	font-weight: 700}
footer > ul:nth-child(1) p{
	line-height: 18.5px;
	width: 70%;
}

footer > ul:nth-child(1) a:hover{
	color: #FFF;
	text-decoration: underline}

.read-more{
	float: right;
	display: inline-block;
	font-size: 0.9em;
	width: auto;
	font-style: italic;
	margin: 0 10px 0 0;
}
footer > ul:nth-child(1) li:not(:first-child) p{
	height: 50%;
	line-height: 1.4em;
	display: flex;
	flex-flow: column wrap}


#menu-menu-footer {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	text-align: left}

#menu-menu-footer li {line-height: 18.5px;}

.footer-menu .menu li:nth-child(even){
	padding: 2px 0;
}

footer > ul:nth-child(1) li:nth-child(3){
	color: #FFF}
footer > ul:nth-child(1) li:nth-child(3) label, footer ul:nth-child(1) li:nth-child(3) input{
	display: block}
footer > ul:nth-child(1) li:nth-child(3) input{
	margin-top: 8px}
footer > ul:nth-child(1) li:nth-child(3) input[type=text]{
	width: 100%;
	padding: 2px 4px;
	color: #FFF;
	border: 1px solid #FFF;
	background: transparent}
footer > ul:nth-child(1) li:nth-child(3) input[type=text]:focus{
	background: #000}
footer > ul:nth-child(1) li:nth-child(3) input[type=submit]{
	color: black;
	padding: 5px 8px;
	border: none;
	box-shadow: 0px 2px 0px 0px #777;
	background: #DDD;
	border-radius: 2px;
}
footer > ul:nth-child(1) li:nth-child(3) input[type=submit]:hover{
	background: #FFF}
footer > ul:nth-child(1) li:nth-child(3) input[type=submit]:focus{
	margin-top: 10px;
	box-shadow: none}

#pictogrammes{
	position: absolute;
	right: 20px;
	top: 50%;
	display: flex;
	font-size: 2em;
	color: rgba(255,255,255,0.3);
	list-style: none;
	z-index: 1}
#pictogrammes li{
	margin: 0 10px}


/* ======================== SUPER FOOTER EN BAS ======================== */

footer > div{
	height: 60px;
	padding: 20px 50px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 1em;
	color: #888;
	background: #000;
	box-shadow: 0px -5px 10px 5px rgba(0,0,0,0.2)}

footer address {display: inline;}

footer > div ul{
	display: flex;
	list-style: none}
footer > div li:nth-child(2){
	margin-left: 50px}

/* ======================== FICHES DE FILMS ======================== */

#close{
	color: red;
	font-weight: bolder;
	float: right;
	padding: .5rem}

.list_film .affiche {
	max-width: 200px;
	max-height: 350px}

.list_film ul {display: flex}
.list_film img{width: 100%}

#fiche_film{
	display: none;
	position: fixed;
	width: 60vw;
	height: 80vh;
	border-radius: 5px 5px 0 0;
	box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
	z-index: 500}
#fiche_film header{
	text-align: center;
	background: #AAA}

#fiche_film.active {
	display: block;
	position: fixed;
	top: 10vh;
	left: 20vw;
	width: 60vw;
	height: 80vh;
	background-color: #fff;
	overflow-y: auto}

#fiche_film>* {
	padding: 0 1rem}

#fiche_film header {
	font-style: 2rem;
	padding: 1rem;
	background-color: #FFFB40;}

#fiche_film header h2 {
	font-size: 1rem;
	color: #4B4B4B;
	font-style: italic}

/* ======================== PAGE DE CONTACT ======================== */

#contact{
	padding-bottom: 30px;
	color: #DDD;
	background: #252525}

#slider-contact{
	padding: 70px 0 40px;
	display: flex;
	justify-content: space-around;
	flex-flow: row wrap;
	list-style: none}
#slider-contact img{
	margin-bottom: 20px;}

#contact h1,#form-contact h1{
	color: #FFF;
	text-align: center;
	font-size: 2.5em}
#contact h2{
	color: #FFF;
	padding: 35px 0 10px;
	text-align: center;
	font-size: 2.5em;
	text-transform: uppercase}
#contact h2:nth-of-type(2){
	margin: 30px 0 20px}
#contact p:not(:first-child){
	margin: 15px auto 0}

#contact h1:after{width: 20%; height: 1px}
#contact h2:after{width: 10%;	height: 1px}
#form-contact h1:before{width: 40%; height: 1px}
#contact p{
	width: 60%;
	margin: auto}

#map{
	height: 30rem;
	width: 80%;
	margin: 20px auto}

#form-contact {
	padding: 2rem 15%;
	text-align: center;
	font-size: 1.2rem}
#form-contact form{
	padding-top: 10px;
	display: flex;
	flex-direction: column}

#form-contact {background: #000}
#form-contact label {
	margin: 1rem auto ;
	width: 80%;
	color: #fff;
	position: relative;
	opacity: .6}

#form-contact label:focus-within, #form-contact label:hover {opacity: 1;}
#form-contact input:not([type="submit"]), #form-contact textarea{
	color: #fff;
	border: 1px solid;
	font-size: 1.2rem;
	padding: .5rem;
	width: 60%;
	background-color: #000}

#form-contact textarea{
	overflow: hidden;
	min-height: 150px;
	max-height: 350px;
	resize: vertical}

label.checkbox{text-align: left; display: flex}
#form-contact .checkbox input{width: 1.5rem; height: 1.5rem; margin-left: 1rem}

[data-label]::before{
	content: attr(data-label);
	display: block;
	position: absolute;
	color: #fff;
	width: 15%;
	text-align: left}

#form-contact [type="submit"]{
	width: 12rem;
	padding: .3rem;
	margin: auto;
	font-size: 1.25rem;
	color: #FFF;
	border: 2px solid #FFF;
	text-transform: uppercase;
	background: #000}
#form-contact [type="submit"]:hover{
	background: #FFF;
	color: #000}

/* CSS qui gère SendinBlue */
form#sib_signup_form_2{
	padding: 0 0 25px;
	position: relative}
form#sib_signup_form_2 p.sib-alert-message {
	position: absolute;
	top: -20px;
	left: 100px;
	width: 250px;
	height: auto;
	padding: 6px 12px;
	border: 1px solid transparent;
	border-radius: 4px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box}
form#sib_signup_form_2 p.sib-alert-message-error {
	background-color: #f2dede;
	border-color: #ebccd1;
	color: #a94442}
form#sib_signup_form_2 p.sib-alert-message-success {
	background-color: #dff0d8;
	border-color: #d6e9c6;
	color: #3c763d}
form#sib_signup_form_2 p.sib-alert-message-warning {
	background-color: #fcf8e3;
	border-color: #faebcc;
	color: #8a6d3b}
form input.sib-email-area{
	padding: 3px 5px !important;
	background: none !important;
	border: 1px solid #fff !important}
form input.sib-email-area:focus{
	background: #000 !important}
form input.sib-default-btn{
	width: 100px !important}
.sib_loader{
	width: 20px;
	position: absolute;
	left: 110px;
	bottom: 32px}


/* ======================== PAGE D'EVENEMENTS ======================== */

#title {
	width: 100%;
	padding-bottom: 20px;
	position: relative;
}
#title h2 {
	display: inline-block; 
	padding: 5px 15px;
	z-index: 2;
}

#title::after {
	background: #fff;
	position: absolute;
	content: '';
	display: block;
	width: 100%;
	left: 0;
	height: 3px;
	z-index: 1}

.evenement {
	width: 100%;
	margin-bottom: 50px}
.evenement img {
	height: 300px;
	max-width: 50%}

.text {
	display: flex;
	align-items: center}
.text p{
	max-width: 60%;
	padding-left: 20px;
	text-align: left;
	margin-left: 30px;
	font-family: 'Lato', sans-serif}


/* ======================== PAGE DE TARIF ======================== */

#tarifbody {
	color: #fff;
	padding: 40px 10% 40px 10%;
	width: 80%;
	margin: 5rem auto;
	border-left: 10px solid #000;
	background: #333}

#tarifbody h2 {
	font-family: 'Montserrat', sans-serif}

#tarifbody ul {
	margin-bottom: 50px;
	font-family: 'Lato', sans-serif}

#info li {
	position: relative;
	width: 100%;
	margin-bottom: 15px;
	font-size: 1.4em;
	z-index: 0;}


#tarifbody li span {
	padding-right: 10px;
	background-color: #333;
	z-index: 1;
}

#tarifbody li span:last-child{
	float: right;
	padding-left: 10px;
}

#info li::before{
	content: '';
	position: absolute;
	display: block;
	top: 50%;
	z-index: -1;
	width: 100%;
	border-bottom: 2px solid #555;
}

#info .tarif-special::before {top: 1rem;}

.tarif-special{
	padding-top: 25px;
	font-size: 1.6em;
	text-align: center;
	font-style: italic}

@media only screen and (max-width:800px){
 /* Breakpoint for most mobile phones */

	body > header h1{font-size: 2.8em}
	body > header h2{font-size: 1em}
	body > header img{width: 95vw}

	#header_low>ul{overflow-y: hidden}

	#films h2:first-child{
		width: 100%;
		padding: 20px 0;
		font-size: 2em;
		font-family: 'Montserrat', sans-serif;}
	#films cite{width: 100%; font-size: 1.8em;}
	#films p{width: 95%; font-size: 1em;}
	#films{padding-bottom: 17rem}

	#films summary{width: 90%}
	#films a:not(.slider-link){
		margin: 10px 0 15px;
		padding: 5px 10px;
		font-size: 1.2em}
	#films .detail_affiche{
		padding-top: 20px;
		width: 90vw;
		font-size: 88%;}
	#films .detail_affiche p{width: 100%;}

	#actu{padding: 5% 15px; font-size: 80%;}
	#actu div{width: 100%; padding-bottom: 10px;}
	#actu article{width: 95%; margin: auto;}
	#actu article img{
		width: 50vw;
		display: block;
		margin: 0 auto 20px}
	#actu blockquote{padding: 10px 10px 20px}
	#actu blockquote::before{font-size: 1em}

	#slider-contact li:first-child,#slider-contact li:last-child{display: none}
	#slider-contact{padding: 20px 0 0}
	#slider-contact img{height: auto ;width: 100%}

	#contact{padding-bottom: 100px}
	#contact h2{padding-top: 0}
	#contact h2:nth-of-type(2){margin: 100px 0 20px}
	#contact p{width: 75%}

	#map{margin: 10px 0; width: 100%}

	#form-contact{padding: 0}
	#form-contact h1{font-size: 1.8em}
	#form-contact label{width: 100%}
	#form-contact form{padding: 2rem 0 5rem}
	[data-label]::before{
		position: static;
		padding: 0 0 5px 5rem}

	#tarifbody{width: 100%}

	footer {overflow: hidden;}
	footer > ul:nth-child(1){flex-flow: column; width: 80%; margin: auto; padding: 20px 0}
	footer > ul:nth-child(1) li{width: 100%}
	footer .menu{width: 50%}
	footer > ul .about {display: none}
	footer > ul:nth-child(1) p{width: 100%}
	.footer-menu{display: none}
	#pictogrammes{position: static; justify-content: flex-end; padding: 10px}

	footer > div{height: auto; flex-flow: column; align-items: flex-start; padding: 15px 20px}
	footer > div ul{flex-flow: column}
	footer > div li{width: 100%}
	footer > div li:nth-child(2){margin-left: 0}
}

/* ======================== ADMIN.CSS ======================== */

#repeteur-a-separation tbody .acf-row:nth-child(2n+1)>.order {background-color: black;}
#repeteur-a-separation tbody .acf-row:nth-child(2n)>.order {background-color: red;}

/* ======================== CLASSES UTILITAIRES ======================== */

::-webkit-scrollbar-track{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #000}
::-webkit-scrollbar{
	width: 11px;
	background-color: #000}
::-webkit-scrollbar-thumb{
	background-color: #FFF}

.fadeIn{
	-webkit-animation: fadeIn 2s}
@-webkit-keyframes fadeIn{
	0% {opacity: 0; transform: translateY(40px)}
	10% {opacity: 0; transform: translateY(40px)}
	50% {opacity: 1; transform: translateY(0)}}

.sticky {
	position: sticky;
	top: 0;
	margin-bottom: 0;
	z-index: 2000}
.clear{clear: both}
.modal{z-index: 9999}

#revealEmail{
	cursor: pointer;
	font-weight: bold;}

img.aligncenter {
    display: block;
    margin: auto;
}