body {
	font-family: 'Montserrat', sans-serif;
	font-size:   24px;
	transition:  .4s opacity ease;
	background:  white;
	}


body.noscroll {
	height:   100vh;
	overflow: hidden;
	
	}

body.noscroll #wrapper {
	/*background: black;*/
	min-height: 100vh;
	filter:     blur(10px);
	}

body.noscroll .section {
	filter:  blur(4px);
	opacity: .4;
	}

body.noscroll #menu-button {
	color: yellow;
	}

.dark {
	opacity: .1;
	}

.fade {
	opacity:        0.4;
	-webkit-filter: grayscale(1);
	
	}

.ghost {
	border:        1px solid silver;
	padding:       4px 8px;
	border-radius: 4px;
	font-size:     18px;
	color:         #333;
	font-weight:   300;
	margin:        10px 0 0 4px;
	transition:    .5s all ease;
	}

h2 {
	font-family:    'Montserrat', sans-serif;
	font-weight:    900;
	text-transform: uppercase;
	line-height:    1em;
	font-size:      3vw;
	
	}

/* MOBILE */
@media screen
and (min-width: 1220px) {
	h2 {
		font-size: 2vw;
		
		}
	}

h3 {
	font-family:    'Montserrat', sans-serif;
	text-transform: uppercase;
	font-size:      300%
	}

h3 {
	font-size:      150%;
	font-family:    'Montserrat', sans-serif;
	font-weight:    bold;
	text-transform: uppercase;
	}


h4 {
	font-size:      140%;
	font-family:    'Montserrat', sans-serif;
	font-weight:    900;
	text-transform: uppercase;
	}

.content {
	line-height: 1.1em;
	font-size:   90%;
	}

.content h1 {
	font-family:    'Montserrat', sans-serif;
	font-weight:    900;
	text-transform: uppercase;
	font-size:      2vw;
	}

.mobile {
	display: none;
	}

.preload {
	display: none;
	width:   1px;
	height:  1px;
	}

table, table th, table tr, table, table tbody {
	background: none;
	border:     0;
	padding:    0;
	margin:     0;
	}

table tr, table td {
	vertical-align: top;
	}

.preload {
	width:   1px;
	height:  1px;
	display: none;
	}

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

#menu-button {
	position:   fixed;
	right:      20px;
	top:        20px;
	z-index:    6002;
	font-size:  2vw;
	transition: .5s all ease;
	}

#menu-button.light a {
	color: white;
	}

#menu-button.dark a {
	color: black;
	}

div#menu-button.dark {
	opacity: 1;
	}

#menu-button a {
	color: black;
	}

#menu {
	display:    none;
	position:   fixed;
	top:        0;
	bottom:     0;
	right:      0;
	width:      33vw;
	height:     100vh;
	padding:    80px 20px 0;
	z-index:    500;
	/*   background:rgba(255,255,255,.60);  */
	color:      yellow;
	background: black;
	list-style: none;
	box-shadow: 0px 1px 8px 8px rgba(0, 0, 0, .2);
	}

#menu li {
	margin-bottom:  1vh;
	padding:        1vh 1vw;;
	/*   border-bottom:1px solid rgba(255, 255, 0, 0.2 ); */
	
	font-size:      2.5vh;
	vertical-align: middle;
	transition:     .2s all ease;
	}

#menu li:hover {
	background: yellow;
	color:      black;
	}

#menu a {
	color:          #222;
	color:          yellow;
	text-transform: uppercase;
	width:          100%;
	display:        block;
	
	}

#menu li:hover a {
	color: black;
	}

#menu a.selected {
	font-weight: 700;
	}


body.noscroll #menu {
	display: block;
	z-index: 1000;
	}

body.noscroll #menu-button a {
	color: yellow;
	}


/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 1000px) {
	
	#menu li {
		font-size: 1.5vh;
		}
		
	}

/* 
  
  NAVIGATION 
  
********************************************************************************/
#scroll {
	position:   fixed;
	right:      0px;
	top:        48vh;
	z-index:    100;
	background: black;
	padding:    4px;
	}

#scroll a {
	display: block;
	color:   yellow;
	}

#scroll a.disabled {
	color: #333
	}

/* 
  STRUCTURE 
  
********************************************************************************/

#accueil.section .content {
	background: white;
	}


#accueil #wrapper {
	/*background: url(../img/bg-accueil-2.png) no-repeat;*/
	background-size:     contain;
	background-position: top center;
	transition:          .5s filter ease;
	}

#accueil-wrapper {
	
	height:          90vh;
	display:         flex;
	flex-direction:  column;
	justify-content: space-between;

	}

#programme {
	/*width: 100vw;*/
	/*height: 100vh;*/
	/*background: black;*/
	}

#programme .bg {
	/*position: absolute;*/
	/*top:0;*/
	/*left:0;*/
	/*width: 100vw;*/
	/*height: 100vh;*/
	background:          url(../img/bg-programme.png) no-repeat;
	background-size:     cover;
	background-position: center center;
	transition:          2s all ease;
	}

.slick-dots {
	position: inherit;
	bottom:   0;
	}

.slick-slide {
	
	padding: 0;
	margin:  0;
	}

#generique {
	background: black;
	}

#content {
	margin: 10vh auto;
	}

#content a {
	color: #2E827F;
	
	}

#subnav {
	list-style: none;
	}

#subnav li {
	margin:    .5em 0;
	font-size: 18px;
	}

#subnav a {
	padding: .2em .5em;
	margin:  1em 0;
	
	}

#subnav a.selected {
	color:       white;
	background:  #2E827F;;
	font-weight: 700;
	}

/* 
  ACCUEIL 
  
********************************************************************************/
#accueil {
	background: white;
	}

#accueil #logo {
	background:          url(../img/logo-palace.png) no-repeat;
	background-size:     contain;
	background-position: center bottom;
	height:              17vh;
	width:               100%;
	display:             flex;
	flex-direction:      column;
	justify-content:     flex-end;
	margin-top:          2vh;
	}

#accueil h2.title {
	display:        none;
	text-align:     center;
	text-transform: uppercase;
	/*padding-top: 18vh;*/
	font-family:    'Montserrat', sans-serif;
	font-weight:    700;
	font-size:      2vw;
	margin:         2em 0 0 0;
	padding:        2em 0 0 0;
	
	
	}

#accueil .posters .poster {
	box-shadow: 0px 1px 7px black;
	transition: .5s box-shadow ease;
	transform:  scale(.90);
	}

#accueil .posters .poster:hover {
	box-shadow: 0px 1px 27px #2E827F
	}

#accueil.section .content {
	height: 90vh;
	}

#accueil .posters {
	width:      80vw;
	margin:     0 10vw;
	/*height: 22vw;*/
	/*top:28vh;*/
	/*position: absolute;*/
	text-align: center;
	
	}

#accueil .posters .poster {
	width:               16vw;
	height:              22vw;
	display:             inline-block;
	background-size:     cover;
	background-position: center center;
	margin:              0 2vw;
	position:            relative;
	}

/* banderolles */
#accueil #banderolles {
    width:      80vw;
    margin:     5vh  10vw ;
    text-align: center;
    /*height:     4em;*/
    /*display:    flex;*/
}

#accueil #banderolles .slick-slide {

}

#accueil #banderolles .banderolle {
    width: 100%;
    color:black;
    /*height: 100%;*/

    font-size: 70%;
    display: flex;
    flex-direction: column;
    justify-content: center;

}

#accueil #banderolles .banderolle a {
    align-self: center;
    color:black;
    margin:              0 2vw;
    background:  yellow;
    padding: 10px;
    border-radius: 10px;
    display: block;
    flex-direction: column;
    justify-content: center;
}


#accueil #banderolles .slick-slide div {
}

/* Boutons accueil */
#accueil #boutons-accueil {
    width:      80vw;
    margin:     5vh  10vw ;
    text-align: center;
    display: flex;
    justify-content: center;
}


#accueil .bouton-accueil {
    padding: 10px;
    border-radius: 10px;
    width: 32%;
    aspect-ratio: 4/2;
    background-color: black;
    color:yellow;
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    margin: 0 4px;

}

#accueil .bouton-accueil span {
    font-weight: 900;
    transform: rotateZ(-10deg);
}

    /* Pied de page */
#accueil .footer {
	height:     10vh;
	background: black;
	bottom:     0;
	position:   absolute;
	width:      100%;
	}

#accueil .footer-bottom  {
    background: black;
}

#accueil.fix-footer .footer {
	position:   fixed;
	top:        0;
	box-shadow: 0 4px 8px rgba(0, 0, 0, .2);
	}

#accueil .footer .facebook, #accueil .footer .instagram,
#accueil .footer-bottom .facebook, #accueil .footer-bottom .instagram {
	float:      left;
	color:      rgb(242, 255, 42);
	font-size:  36px;
	margin: 8px 2px 0 0;
	}


.poster span {
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	background:      rgba(0, 0, 0, .8);
	position:        absolute;
	bottom:          0;
	width:           100%;
	height:          32px;
	padding:         2px 8px;
	text-align:      center;
	font-weight:     900;
	font-size:       1.2vw;
	text-transform:  uppercase;
	color:           rgb(242, 255, 42);
	transition:      .5s box-shadow ease;
	}

#accueil .poster .horaire {
	display: none
	}

#accueil .poster span table td {
	font-size: 90%
	}

#accueil .poster:hover .horaire {
	top:         0px;
	display:     block;
	color:       white;
	font-weight: bold;
	background:  rgba(0, 0, 0, .8);
	}


#accueil #btn-infos-pratiques {
	display:     block;
	width:       40vw;
	height:      30vh;
	margin:      0 30vw;
	position:    absolute;
	top:         40vh;
	text-indent: -9999px;
	}

#accueil .footer img {
	height: 8vh;
	}

#telechargement {
	/*position: relative;*/
	background:    rgb(242, 255, 42);
	border-radius: 4px;
	margin:        20px 0 0 10px;
	position:      absolute;
	padding:       .8em .5em;
	color:         #333;
	/*width: 15vw;*/
	font-size:     40%;
	font-weight:   900;
	float:         none
	}

#home-posters {
	display:         flex;
	flex-wrap:       wrap;
	width:           100vw;
	justify-content: center;
	padding-top:     10vh;
	padding-bottom:  10vh;
	}

#home-posters h4 {
	width:  100%;
	margin: 2em 0 .5em;
	}

#home-posters .item {
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	align-content:   center;
	flex:            0 0 30%
	}

#home-posters .item .infos {
	font-size:       1vw;
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	}

#home-posters .item .btn {
	background:    rgb(242, 255, 42);
	border-radius: 4px;
	margin:        10px auto 0;
	padding:       .3em;
	color:         #333;
	width:         15vw;
	font-size:     1vw;
	font-weight:   900;
	}

#home-posters .item .btn.statut {
	color:white;
	background: red;
}
/* ACTIVITES */


#accueil #activites {
	width:      70vw;
	margin:     0 15vw;
	/*height: 6vw;*/
	/*top:68vh;*/
	/*position: absolute;*/
	text-align: center;
	font-size:  1vw;
	}

#accueil #activites p {
	margin: 0 0 6px 0;
	}

#accueil .activite {
	
	}

#accueil .activite {
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	background:      black;
	color:           yellow;
	padding:         8px 20px;
	text-transform:  uppercase;
	line-height:     1em;
	width:           22vw;
	min-height:          5vw;
	margin:          0 10px;
	text-align:      center;
	}

#accueil .activite strong {
	margin-bottom: .3em;
}

/* CAROUSELS */

.slick-prev, .slick-next {
	width:       1.5vw;
	height:      1.5vw;
	line-height: 1em;
	
	}

.slick-prev:before, .slick-next:before {
	
	background-color: black;
	color:            yellow;
	font-size:        200%;
	font-weight:      900;
	border-radius:    3vw;
	display:          block;
	}

.slick-prev:before {
	font-family: "FontAwesome";
	font-size:   1.5vw;
	content:     " \f104";
	color:       white;
	}

.slick-next:before {
	font-family: "FontAwesome";
	font-size:   1.5vw;
	content:     " \f105";
	color:       white;
	}


.slick-dots li button:before {
	color:     black;
	font-size: 1.5vw;
	}

.slick-dots li.slick-active button:before {
	color: black;
	}

.slick-dots li {
    margin: 0;
}

#activites .slick-prev {
	margin-left: -4vw
	}

#activites .slick-next {
	margin-right: -4vw
	}


#btn-prg {
	/*position:absolute;*/
	
	
	font-size:      1vw;
	width:          23em;
	margin:         0 auto 1em auto;
	text-align:     center;
	background:     rgb(242, 255, 42);
	color:          black;
	display:        block;
	padding:        .5em 2em;
	text-transform: uppercase;
	font-weight:    bold;
	}


/* MOBILE */
@media only screen
and (min-width: 701px)
and (max-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
	
	#accueil .activite h2 {
		font-size:  6vw;
		margin-top: 2vh
		}
	
	#accueil .activite {
		/*margin:    0;*/
		/*width:     50vw;*/
		/*margin:    0 0 0 -15vw;*/
		/*font-size: 1.5vw;*/
		width: fit-content;
		margin: auto;
		}
	
	.posters {
		/*top:60vh;*/
		}
	
	#accueil .posters .poster {
		width:  20vw;
		height: 27vw;
		
		}
	
	#btn-prg {
		font-size: 18px;
		}
	
	#home-posters .item .btn {
		font-size: 2vw;
		}
	
	#home-posters .item .infos {
		font-size: 2vw;
		}
	
	#accueil-wrapper {
		height:        80vh;
		margin-bottom: 5vh;
		}
	
	
	#accueil #logo {
		width:  60vw;
		margin: 0 auto;
		
		}
		
	}

@media only screen
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
	
	#accueil #logo {
		height: 10vh;
		}
	
	#accueil-wrapper {
		height:         90vh;
		padding-bottom: 10vh;
		}
		
	}

#btn-prog {
	display:        block;
	position:       absolute;
	width:          16vw;
	bottom:         90px;
	left:           78vw;
	margin:         0 auto;
	color:          #111;
	font-size:      1vw;
	text-align:     center;
	font-weight:    900;
	text-transform: uppercase;
	padding:        2px 4px;
	border-radius:  2px;
	color:          yellow;
	background:     #111
	}


#btn-prg i {
	-webkit-animation: sdb04 2s infinite;
	animation:         sdb04 2s infinite;
	box-sizing:        border-box;
	}

@-webkit-keyframes sdb04 {
	0% {
		-webkit-transform: translate(0, 0);
		}
	20% {
		-webkit-transform: translate(0px, 10px);
		}
	40% {
		-webkit-transform: translate(0, 0);
		}
	}

@keyframes sdb04 {
	0% {
		transform: translate(0, 0);
		}
	20% {
		transform: translate(0px, 10px);
		}
	40% {
		transform: translate(0, 0);
		}
	}

/*
  
  INFOS PRATIQUES
  
********************************************************************************/

#lanterne-magique {
	
	display:         block;
	background:      url(../img/logo-lanterne-magique.png) no-repeat white;
	border:          10px solid white;
	width:           210px;
	height:          160px;
	background-size: contain;
	text-indent:     -99999px;
	top:             8vh;
	right:           4vw;
	border-radius:   4px;
	box-shadow:      0px 1px 7px black;
	transform:       rotate(3deg)
	}


/*
  
  PROGRAMME
  
********************************************************************************/
#programme {
	/*overflow: hidden;*/
	}

#programme .title {
	display:        flex;
	font-weight:    900;
	text-transform: uppercase;
	}

.title #btn-back {
	width:  1em;
	margin: 0 .5em 0 0;
	
	}

#programme h4 {
	margin: 12px 0 15px;
	}

#programme .ghost.small {
	font-size: 60%;
	float:     right;
	}

#programme .ghost:hover {
	background: #3B0900;
	border:     1px solid #3B0900;
	color:      white;
	}

#btn-open-program {
	position:       absolute;
	bottom:         00px;
	right:          0px;
	padding:        20px 30px;
	background:     rgba(242, 255, 42, 0.96);
	color:          #222;
	text-transform: uppercase;
	font-weight:    900
	}

/*#btn-open-program-accueil {*/
/*!*position: absolute;*!*/
/*!*bottom: 00px;*!*/
/*!*right:0px;*!*/
/*padding: 20px 30px;*/
/*background:rgba(242,255,42, 0.96);*/
/*color:#222;*/
/*text-transform: uppercase;*/
/*font-weight: 900;*/
/*font-size: 1vw*/
/*}  */

#btn-close-program {
	color:       white;
	background:  black;
	position:    fixed;
	right:       20px;
	top:         20px;
	z-index:     9000;
	display:     none;
	line-height: 40px;
	}

#ecran {
	height:        312px;
	width:         70vw;
	height:        60vh;
	padding:       0;
	margin:        0 auto;
	background:    white;
	z-index:       200;
	position:      relative;
	top:           5vh;
	border-radius: 8px;
	border:        1px solid black;
	}

@media screen and (max-device-width: 1024px) {
	#ecran {
		width: 90vw;
		top:   7vh;
		}
	
	#ecran #carousel .owl-item h4 {
		font-size: 150%;
		}
	}

.seances-horaires {
	padding: 0;
	}

#video {
	width:   101%;
	height:  100%;
	z-index: 2000;
	display: none;
	
	}

#video iframe {
	width:  100%;
	height: 100%;
	}

#video.pulse {
	animation-name:            pulse;
	animation-duration:        8s;
	animation-iteration-count: infinite;
	}

@keyframes pulse {
	from {
		box-shadow: 0 0 20px rgba(0, 0, 0, 0);
		}
	30% {
		box-shadow: 0 0 80px rgba(88, 11, 11, 0.88);
		}
	50% {
		box-shadow: 0 0 50px rgba(88, 11, 11, 0.0);
		}
	65% {
		box-shadow: 0 0 100px rgba(88, 11, 11, 1);
		}
	95% {
		box-shadow: 0 0 10px rgba(88, 11, 11, 0.1);
		}
	to {
		box-shadow: 0 0 50px rgba(0, 0, 0, 0);
		}
	}

.btn-close {
	background:    #3B0900;
	color:         white;
	position:      absolute;
	
	width:         40px;
	height:        40px;
	border-radius: 100%;
	
	text-align:    center;
	right:         -20px;
	top:           -20px;
	}

.btn-close:hover {
	background: white;
	color:      black;
	}

.btn-detail {
	position: absolute;
	bottom:   10px;
	right:    20px;
	}

.btn-video {
	position: absolute;
	bottom:   10px;
	right:    140px;
	}

#carousel .item, #carousel-one .item {
	padding:   20px 60px;
	height:    57vh;
	font-size: 70%;
	}

#carousel .item h4, #carousel-one .item h4 {
	font-size: 200%
	}

#carousel .item table.horaires td.odd, #carousel-one .item table.horaires td.odd {
	background: none;
	}

#carousel .item .poster {
	
	}

.owl-prev, .owl-next {
	background:    black;
	color:         white;
	width:         40px;
	height:        40px;
	border-radius: 100%;
	text-align:    center;
	line-height:   1.6em;
	transition:    all .5s ease;
	}

.owl-prev:hover, .owl-next:hover {
	background: #3B0900;
	color:      white;
	}

.owl-prev {
	position: absolute;
	top:      30vh;
	left:     10px;
	}

.owl-next {
	position: absolute;
	top:      30vh;
	right:    10px;
	}

.prog_a_venir {
	font-size:      3vh;
	text-align:     center;
	margin:         10vh auto;
	padding: 0 10em;
	font-weight:    900;
	font-family:    'Montserrat', sans-serif;
	/*text-transform: uppercase*/
	}

#programme-mensuel {
	
	background:  rgba(242, 255, 42, 0.96);
	padding-top: 0;
	
	}

#programme-mensuel .poster {
	/*   width: 200px; */
	}

#programme-mensuel .poster:hover {
	box-shadow: none;
	}

#programme-mensuel h4 {
	margin: 0 0 .5em 0;
	}

#programme-mensuel .spec {
	margin: 0 0 .5em 0;
	}

/*#programme-mensuel-accueil {*/
/*position: absolute;*/
/*top:0;  */
/*left:0;*/
/*width: 100vw;*/
/*height: 100vh;*/
/*background:rgba(242,255,42, 0.96);*/
/*z-index: 8000;*/
/*overflow-y: scroll;*/
/*display: none;*/
/*padding-top: 12vh;*/
/*}*/

/*#programme-mensuel-accueil .poster {*/
/*!*   width: 200px; *!*/
/*}*/

/*#programme-mensuel-accueil .poster:hover {*/
/*box-shadow: none;*/
/*}*/

/*#programme-mensuel-accueil h4 {*/
/*margin: 0 0 .5em 0; */
/*}  */

/*#programme-mensuel-accueil .spec {*/
/*margin: 0 0 .5em 0; */
/*}  */

#accueil #programme-mensuel {
	padding-top: 16vh;
	}

#accueil .message {
	padding: 2em;
	max-width: 80vw;
	margin:  0 auto;
	text-align: center;
	font-size: 120%;
	background: black;
	color:yellow;
	font-weight:bold;
	}

/* Séances */
table.seances, table.seances th, table.seances tr, table.seances td, table.seances tbody {
	background: none;
	border:     0;
	padding:    0;
	margin:     0;
	}

#programme .seances {
	margin-top: 5vh;
	width:      70vw;
	}

table.seances {
	width:     100%;
	margin:    2vh auto;
	font-size: 1.2vw;
	}

table.seances tr {
	vertical-align:  top;
	border-collapse: collapse;
	border:          2px solid #222
	}

table.seances td {
	/*padding: 1em;*/
	}

table.seances td.poster {
	width:      20%;
	box-shadow: none;
	}

table.seances td.horaire {
	width: 30%;
	}

table.seances td.film {
	width:   40%;
	padding: 0 1%;
	}


table.seances a {
	color: #222;
	}


table.horaires, table.horaires th, table.horaires tr, table.horaires td, table.horaires tbody {
	background: none;
	}

table.horaires tbody {
	border:      0;
	
	font-weight: bold;
	}

table.horaires tr {
	padding:        0;
	margin:         0;
	border:         0;
	vertical-align: middle;
	
	height:         3vh;
	}

table.horaires tr:nth-child(even) {
	height: 4vh;
	}

table.horaires td {
	/*padding: 0 .5em  1em 0em;*/
	font-size: 1.5vmin;
	}

td.details > p {
	font-size:   50%;
	line-height: 1;
	}

td.details p.spec {
	font-size:   75%;
	line-height: 1em;
	}

td.details > p {
	padding:     0;
	margin:      0;
	line-height: 1em;
	}

table.horaires tbody td.odd {
	background: none;
	}

/* 
  
  DETAIL FILM / ANIMATION
  
********************************************************************************/
#film, #animation {
	background: #222;
	color:      white;
	}

#film .backdrop-container {
	width:    100vw;
	height:   100vh;
	position: fixed;
	
	z-index:  -1000;
	opacity:  .4;
	overflow: hidden;
	}


#film .backdrop {
	width:               140vw;
	height:              140vh;
	margin:              -20vh 0 20vh -20vw;
	background-position: center center;
	background-size:     cover;
	filter:              blur(10px);
	}

#film .poster, #animation .poster {
	width:  450px;
	height: auto;
	margin: 2px 0;
	}

#film .ghost, #animation .ghost {
	color:            black;
	border-color:     rgba(242, 255, 42, 1);
	background-color: rgba(242, 255, 42, 1);
	float:            right;
	font-size:        12px;
	margin:           0px 0 12px 0;
	}

#animation .ghost {
	margin: 50px 0 0 0;
	}

#film .seances .horaires, #animation .seances .horaires {
	width: 100%;
	}

#film .seances td.details > p, #animation .seances td.details > p {
	font-size:   100%;
	line-height: 1em;
	display:     block;
	float:       left;
	/*padding: 0 1em 0 0;*/
	}


#film h2, #animation h2 {
	font-family:    'Montserrat', sans-serif;
	font-weight:    900;
	text-transform: uppercase;
	margin:         40px 0 0;
	padding:        0;
	font-size:      3vw;
	color:          rgba(242, 255, 42, 1);
	}

#btn-back {
	margin:        40px 10px 0;
	font-size:     4vw;
	float:         left;
	display:       block;
	width:         4vw;
	height:        4vw;
	border-radius: 100%;
	background:    white;
	color:         #222;
	line-height:   .9em;
	text-align:    center;
	}

#film .infos, #animation .infos {
	font-size:   80%;
	font-weight: bold;
	
	}

#film .content, #animation .content {
	font-size:      80%;
	font-weight:    normal;
	padding-bottom: 50px;
	}

#film #menu-button a, #animation #menu-button a {
	color: #f9f9f9
	}

#film .reservations, #animation .reservations {
	font-size: 1.1vw;
	color:     rgba(242, 255, 42, 1);
	padding:   20px 0 0 20px;
	}

#film .prix, #animation .prix {
	font-size: 1.1vw;
	color:     rgba(242, 255, 42, 1);
	padding:   20px 0 0 20px;
	}

#film .infos-film, #animation .infos-film {
	margin-left: calc(4vw + 20px);
	}

#film .horaires .details {
	font-size:   80%;
	margin-top:  0;
	font-weight: 100
	}

/* GALERIE
******************************************************************************************/
#galerie {
	min-height: 100vh;
	}

#galerie .row.albums a.gallery {
	text-align:  center;
	margin:      10px 10px 60px 0;;
	width:       300px;
	height:      300px;
	display:     block;
	float:       left;
	color:       rgba(0, 0, 0, .8);
	font-size:   80%;
	line-height: 1.1em;
	}

#galerie .row.albums h3 {
	width:  100%;
	float:  left;
	margin: 36px 0 24px;
	
	}

#galerie .row.albums li a {
	color: rgba(0, 0, 0, .8)
	}

.thumb {
	border-radius: 0;
	width:         300px;
	height:        300px;
	float:         left;
	margin:        10px 10px 10px 0px;
	border-radius: 4px;
	transition:    .4s all ease;
	overflow:      hidden;
	}

.thumb:hover {
	box-shadow: 0px 1px 6px black;
	}

#galerie li {
	list-style: none;
	}


.thumb img {
	opacity: 0;
	
	}

#galerie h3 a {
	float:        left;
	width:        auto;
	margin-right: 10px;
	display:      inline;
	color:        black;
	}


/*
  GENERIQUE 
  
********************************************************************************/

#generique .content {
	
	}

#scene3D {
	
	position:   absolute;
	width:      100vw;
	height:     90vh;
	bottom:     0;
	left:       -5vw;
	padding:    0 10vw;
	overflow:   hidden;
	font-size:  2vw;
	background: rgba(0, 0, 0, 1);
	z-index:    1000
	}


#scene3D > div {
	position:          absolute;
	top:               100%;
	-webkit-animation: scroll 20s linear infinite;
	-moz-animation:    scroll 20s linear infinite;
	-ms-animation:     scroll 20s linear infinite;
	-o-animation:      scroll 20s linear infinite;
	animation:         scroll 20s linear infinite;
	text-align:        justify;
	
	}


@keyframes scroll {
	0% {
		top: 100%;
		}
	100% {
		top: -170%;
		}
	}

#credits {
	font-size: 50%;
	color:     rgba(242, 255, 42, .5);
	position:  absolute;
	top:       40px;
	left:      40px;
	}

#credits a {
	color: rgba(242, 255, 42, .5);
	}

#credits a:hover {
	color: rgba(242, 255, 42, .8);
	}

/* 
  
  NEWSLETTER 
  
********************************************************************************/
#newsletter {
	color: white;
	}

#newsletter .content {
	/*   width: 50vw; */
	padding:       50px 20px 0;
	margin:        20vh auto;
	background:    rgb(242, 255, 42);
	color:         black;
	float:         left;
	border-radius: 10px;
	}

#newsletter .content button {
	background:    black;
	font-weight:   bold;
	font-size:     80%;
	float:         right;
	border-radius: 8px;
	}

#newsletter #menu-button a {
	color: white;
	}

#newsletter .confirmation {
	padding-bottom: 100px;
	}

#frmNewsletter {
	
	}

#frmNewsletter input {
	font-size:                 50%;
	color:                     rgb(242, 255, 42);
	background:                #333;
	border:                    0;
	width:                     100%;
	height:                    32px;
	margin:                    20px auto;
	/*   float:left;   */
	font-size:                 1vw;
	border-top-left-radius:    4px;
	border-bottom-left-radius: 4px;
	z-index:                   20
	}

#frmNewsletter button {
	padding:                    0 8px;
	float:                      right;
	background:                 #555;
	font-size:                  50%;
	height:                     32px;
	margin:                     16px auto;
	border-top-right-radius:    4px;
	border-bottom-right-radius: 4px;
	color:                      silver;
	font-size:                  1vw;
	margin-top:                 -52px;
	z-index:                    50
	}

/* MOBILE */
@media screen
and (min-width: 1268px) {
	#frmNewsletter input, #frmNewsletter button {
		font-size: 12px;
		}
	}

@media screen
and (min-device-width: 320px)
and (max-width: 668px) {
	
	#footer .newsletter #frmNewsletter {
		display: none;
		
		}
		
	}


/*
  ESPACE MEMBRE
  
********************************************************************************/
.loginForm {
	width:         80%;
	background:    silver;
	padding:       2em;
	border-radius: 8px;
	margin-top:    10vh;
	}

.loginForm label {
	font-weight: 900;
	font-size:   100%;
	}

.loginForm .error {
	color:       red;
	font-weight: 700;
	margin:      0 0 1em 0
	}

.loginForm .ghost {
	border-color: white;
	}


.fichier-item {
	display:       block;
	margin:        0 0 1em 0;
	padding:       0 0 1em 0;
	border-bottom: 1px solid silver
	}

.fichier-item h5 {
	font-weight: 900;
	}

.fichier-item em {
	font-size:  60%;
	font-style: normal;
	color:      #333;
	opacity:    .7;
	}

#cooperative .toolbar {
	display:         flex;
	justify-content: flex-end;
	margin:          0 0 1em 0;
	}


p.small {
	font-size: 70%;
	}


/* TABLETTE PORTRAIT */
@media only screen
and (orientation: portrait) {
	
	#accueil .activite {
		font-size: 1.4vw;
		}
	
	#telechargement {
	    text-transform: capitalize;
		}
	
	#telechargement span {
		display: none;
		}
	
	.poster span {
		font-size: 1.6vw;
		}
	
	#home-posters .poster span {
		font-size: 2vw;
		}

	}


#credit {
	width: 100%;
	margin: 15vh 0 0;
	font-size:50%;
	color:grey;

	}

#credit a {
	color:grey;
	}

#credit .columns {
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	}

#credit img {
	width: 200px;
	}