body {
  font-family: 'Montserrat', sans-serif;

}

h2 {
  font-weight: 900;
  text-transform: uppercase;
  text-align: center;
}


#accueil h2.title {
  display: block;
  color:black;
  font-size: 4vw;
  padding: 7vh 0 0vh;
  margin-top: 1vh;
text-indent: -9999px;
}

#accueil-wrapper {
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  }

#wrapper {
  width: 100vw;
  overflow-x: hidden;
  }

#accueil  {
  background: url(../img/logo-palace.png) no-repeat;
  background-size: 60vw;
  background-position:  center 15px;

  }



h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
}

.desktop {
  display:none;
}


.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;
}


#content {
  margin: 10vh auto;
  }

#content a {
  color:#2E827F;
  
  }

#subnav {
  list-style: none;
  margin: 0 0 10vh 0;
  padding: 0;
  list-style: none;
  }

#subnav li a {
  width: 90%;
  margin: 0 5% 10px;
  display: block;
  text-align: center;
  }

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

  }


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

#menu-button {
  position: fixed;
  right:20px;
  top:4px;
  z-index: 5000;
  transition: .5s all ease;
  font-size: 200%;
}


#menu-button a {
  color:black
}

#menu {
  display: none;
  position: fixed;
  top:0;
  bottom:0;
  right:0;
  width: 100vw;
  height: 100vh;
  padding: 50px 50px 0;
  z-index: 500;
  background: rgb(246,234,0);
  list-style: none;
  box-shadow: 0px 1px 8px 8px rgba(0,0,0,.5);
}



#menu li {
  margin-bottom: 2vh;


  height: 4vh;
  font-size: 3.5vh;
  text-align: center
}

#menu a {
  color:#222;
  text-transform: uppercase;
  text-align: center;
    margin-bottom: 4vh;
}

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


body.noscroll #menu {
  display: block;
}


#scroll {
  display: none;
}

.ghost {
  display: none;
}

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

.poster {
  box-shadow: 0px 1px 7px black;
}

#accueil h2 {
  padding-top: 2vh;
  font-size: 10vw;
  display: none;
}

#accueil h3 {
  padding-top: 10px;
  display: none;
}

#accueil h3 {
  text-align: center;
  margin: 0;
  font-weight: 900;
  text-shadow: 0px 2px 8px rgba(242,255,42,.4);
}

#accueil .posters {

  width: 99%;
  text-align: center;
}

#accueil .poster {
  width: 28vw;
  height: calc(40vw);
  display: inline-block;
  margin:10px ;
  background-size: contain;
}


#telechargement {
  position: relative;
  background:  rgb(242,255,42);
  border-radius: 4px;
  margin: 10px auto 0;
  padding: 1em;
  color:#333;
  /*width: 15vw;*/
  font-size: 4vw;
  font-weight: 900;
  float:right
  }


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

}

#home-posters h4 {
  width: 100%;
  margin: 3em 0 .5em;
  font-size: 5vw;
  font-weight: 900;
  text-transform: uppercase;
  text-shadow: none;
}

#home-posters .item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  flex:0 0 100%;
  margin-bottom: 10vh;
}

#home-posters .item .infos {
  font-size: 3vw;
  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: 50vw;
  font-size: 5vw;
  font-weight: 900;
}


#accueil #home-posters .poster {
  width: 80vw;
  height: calc(80vw *1.4);
  margin: 0 auto 1em auto;
}

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

#btn-prg {
  width: fit-content;
	text-align: center;
  background: rgb(246,234,0);
	color:black;
	display:block;
	margin: 1vh auto;
  padding: .5em 2em;
	text-transform: uppercase;
	font-weight: bold;
}

#btn-prg {
  /*position:absolute;*/
  
  
  font-size: 80%;
  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;
  }

#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);
    }
  }

.poster span {
	display: none;
	}

#home-posters .poster {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	margin: 0 auto 1em;
	}

#home-posters .poster span {
	display: block;
	background: rgba(0,0,0,.8);
  position: relative;
	width: 100%;
	bottom:0;
	font-weight: 900;
	font-size: 6vw;
	text-transform: uppercase;
	color:rgb(242,255,42);
	transition:.5s box-shadow ease;
}

#accueil #footer {

  background: black;
}

#accueil .footer {
  /*position: absolute;*/
  /*bottom:0;*/
  padding: 5vw;
  background: black;
  width: 100%;
  margin-top: 10vh;

}

#accueil .footer img {
  
  margin-top: 4px;
/*
  height: 40px;
  width: 180px;
*/
  }
  
#accueil .footer .facebook {
  float:right;
  color:rgb(242,255,42);
  font-size: 24px;
}


#accueil #activites {
  width: 100vw;
  margin: 1vh 0vw ;
  height: 18vw;
  /*top:78vh;*/
  /*position: absolute;*/
  text-align: center;
  font-size: .6vw;
  }

#accueil #activites strong {
  font-size: 3vw;
  }

#accueil .activite  {
	background: black;
	color:yellow;
	padding: 4px 10px;
  margin: 0 25px;
	text-transform: uppercase;
  height: 18vw;
  width: 90vw;
	font-size: 10px;
	text-align: center;
	display: flex;
  flex-direction: column;
  justify-content: center;



}

#frmNewsletter input {

  color: rgb(242,255,42);
  background: #333;
  border:0;
  width: 100%;
  height: 32px;
  margin: 20px auto;
  /*   float:left;   */

  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  z-index:20
}

#frmNewsletter button {
  padding: 0 8px;
  float:right;
  background: #555;

  height: 32px;
  margin: 16px auto;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  color:silver;
  font-size: 50%;
  margin-top: -52px;
  z-index:50
}

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

.slick-prev:before, .slick-next:before {
  
  background-color:  #2E827F;
  color:white;
  font-size: 200%;
  font-weight:bold;
  border-radius:  6vw;
  display: block;
  }

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

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


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

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

/*
  ACTION CULTURE
  
********************************************************************************/
#action-culture table {
  font-size: 20%;
  }
/* 
  PROGRAMME 
  
********************************************************************************/

#ecran {
  display:none;
}

#programme {
  background:rgba(248, 236, 7, 0.96);
  }
#programme-mensuel {

  background:rgba(248, 236, 7, 0.96);
}

#programme h2 {
  margin-top: .7em;
  }

#programme-mensuel h4 {
  font-size: 32px;
  line-height: 1.2em; 
  font-weight: 700;
  }

#programme-mensuel .poster {
  width: 95px;
  height: auto;
  padding: 0;
  margin: 10px 5px 0 0;
}
.sticky-header {
  background: rgba(255,255,255,1);
z-index:250;

  }

.sticky-header.fixed, #home-posters h4.fixed {
  position: fixed;
  background: rgba(242,255,42,1);
  margin:0;
  padding:  1em 0;
  top:0;
  left:0;

  }

.sticky-footer {
  margin-top: -10vh;
  /*display: none;*/
  }

#programme-mensuel-accueil a#reserver, #programme-mensuel a#reserver {

  font-size: 2.5vw;
  }

#accueil .message {
  padding: 1em;
  max-width: 80vw;
  margin:  10vh 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;
}

table.seances {
  width: 100%;
  margin: 5vh auto;
  font-size: 11px;
  color:#222;

}

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

table.seances td {
  padding: 1em;
  display: inline-block;
  padding: 0;
}

table.seances td.poster {
  width: 100vw;
  box-shadow: none;
  float:left;
  padding: 0;

}

table.seances td.poster img {
  width: 90px;
  margin: 0;
  float:left
}

table.seances td.horaire {
  width: 60%;
  color:#333;
  float:left;
  margin: 16px 0 0 0;
}

table.seances td.horaire td {
  font-size: 11px;

}

table.seances td.film {
  width: 100%;
    font-size: 12px;
  padding: 10px 0;
}

table.seances td p {
  font-size: 11px;
}


table.seances a {
  color:#222;
}


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

table.horaires {
	width: 100%;

}

table.horaires tbody{
  border: 0;

  font-weight: bold;
} 

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

table.horaires td {
  padding: 0 .5em  1em 0em;
  font-size: 12px;

}



td.details>p {
  font-size: 100%;
  line-height: 1em;
    font-size: 14px
}

table.seances td.horaire td {
  font-size: 12px;
  padding-bottom: 4px;
}

.spec {
  font-size: 12px;
  font-weight: normal;
}

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

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

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

#film .poster {
  width: 100%;
  height: auto;
  margin: 2px 0;
}

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

#film .seances .horaires {
  width: 90vw;
  margin: 0 5vw;
}

#film .seances .horaires td{
  color:white;
  font-size: 16px; 
  padding:4px 8px 0 0;
  
}

 #animation  .seances .horaires td {
   color:yellow;
 }

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

#film .seances td.details {
  margin-bottom: 8px;
}


#film h2 {
    font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  margin: 60px 0 0;
  padding: 0;
  font-size:8vw;
  color: rgba(242,255,42,1);  
  line-height: 1.1em
}

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

#film .infos {
  font-size: 100%;
  font-weight: bold;

}

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

#film .menu-button {
  color:#f9f9f9
}

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

#film .infos-film {
  text-align: center
}

#animation .content {
  color: white;
}

#animation {
  background: black;
  }

#animation h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  margin: 60px 0 0;
  padding: 0;
  font-size:8vw;
  color: rgba(242,255,42,1);
  line-height: 1.1em
  }


#film #menu-button a, #animation #menu-button a{
  color: rgba(242,255,42,1);
  }
  /*
		
		INFOS PRATIQUES
		
	********************************************************************************/

#infos_pratiques {
  padding: 0 10px;
  height: 100vh;
  width:  100vw;
  overflow-y: scroll;
}

#infos_pratiques h2 strong, strong {
   /*font-size: 12px;*/
}

#infos_pratiques p {
  /*font-size: 12px;*/
}

#infos_pratiques #lanterne-magique {
  display: none;
}

/* 
  
  CONTACTS
  
********************************************************************************/

#contacts {
    padding: 0 20px;
  top:0;  
  left:0;
  width: 100vw;
  height: 100vh;
  overflow-y: scroll;
}



#accueil #contacts .content h1 {
  padding-top: 10vh;
  text-align: center;
  font-weight: 900;
  text-transform: uppercase;
  text-align: center;
  font-size: 24px; 
}

#contacts .ghost {
  display: block;
  width: 80vw;
  left:10vw;
  color:white;
  text-align: center;
  margin: 20px auto 0;
  display:none;
}

#contacts td {
  display: inline-block;
}


table , tableth, table tr, table td, table tbody {
  background: none;
  border:0;
  /*font-size: 50%;*/
}

/* 
  GALERIE
  
********************************************************************************/

#galerie  a {
	color:black;
}

#galerie .thumb {
	width: 100%;
	height: 300px;
	margin-top: 40px;
}

#galerie #btn-back {
  color:black;
  display: block;

  }

#galerie h3 {
  width: 100%;
  margin: 10vh 0 0 0;
  font-weight: 900;
  }


#galerie  .row ul {
	list-style: none;
	padding: 0;
	margin: 0;	
}

#galerie .row li {
	padding: 0;
	margin: 0;
}


/*
  ESPACE MEMBRE
  
********************************************************************************/

.loginForm {
  width: 100%;
  background: silver;
  padding: 2em;
  border-radius: 8px;
  margin: 0 0 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;
  }

#cooperative .ghost{
  display: inline;
  }

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

#credit {
  margin: 10vh 0;
  }

#credit img {
  width: 70vw;
  }

#credit .columns {
  margin-top: 10vh;
  }

#credit .right {
  font-size: 80%;
}

#credit .right a{
  color:grey
}