@import url("https://fonts.googleapis.com/css?family=Lora:400,400i|Open+Sans:300,400,600,700,800");
@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap');

html{
    
}

body {
  font-family: "Open Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  background-color: black;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Open Sans", sans-serif;
  color: white;
  font-weight: 300;
}

header {
    height: 30vh;
}

h1 {
  font-size: 45px;
  line-height: 61px;
  text-align: center;
}

h2 {
  font-size: 2rem;
  font-family: "Google Sans", sans-serif;
  font-weight: 500;
  padding: 1.5rem 1.5rem 0 1.5rem;
}

h3 {
  font-size: 1.2rem;
  font-weight: 100;
}

@media screen and (max-width: 992px) {
  .presentation h2 { font-size:1.7rem;padding: 1.2rem 1.2rem 0 1.2rem;}
  .presentation h3 { font-size:1rem;}
  .presentation span { font-size:0rem;}
}
@media screen and (max-width: 768px) {
  .presentation h2 { font-size:1rem;padding: 2rem 0.7rem 0 0.7rem;}
  .presentation h3 { font-size:0.7rem;font-weight: 300;}
}
@media screen and (max-width: 576px) {
  .presentation h2 { font-size:0rem;}
  .presentation h3 { font-size:0rem;}
}

p, li, blockquote, label {
  font-size: 16px;
  letter-spacing: 0;
  line-height: 25px;
  color: #808080;
  margin-bottom: 0;
}

body {
  overflow-x: hidden;
}

a {
  font-size: inherit;
  color: inherit;
}

a:focus,
a:hover {
  color: #2e7eed;
  text-decoration: none;
}

.section {
  padding: 100px 0;
}

.section-title {
  text-align: center;
  margin-bottom: 80px;
}

.section-title h2 {
  font-size: 35px;
  margin-bottom: 13px;
}

.section-title p {
  /*width: 70%;*/
  margin: 0 auto;
}

.flimotheque{
    height:100%;
}

.etage{
    height:calc(17vw*1.5);
}

.pochette{
    flex: 0 0 17vw;
    margin:0.3rem;
    width:100%;
    height: 100%;
}

.pochette:hover{
    background-color: black;
}

.presentation{
    width:100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
    background-position: center;
}

.presentation * {
    opacity: 0;
    transition: 0.7s linear;
}

.presentation:hover {
    background-image: none;
}

.presentation:hover * {
    opacity: 1;
    transition: 1.2s ease-out;
}

.footer {
}

.modal.fade .modal-dialog 
{
    -moz-transition: none !important;
    -o-transition: none !important;
    -webkit-transition: none !important;
    transition: none !important;

    -moz-transform: none !important;
    -ms-transform: none !important;
    -o-transform: none !important;
    -webkit-transform: none !important;
    transform: none !important;
}

.fade {
    transition:opacity 1s ease-out !important;
}