body { 
    background-color: aliceblue; 
    margin: 0;
    height: 100vh;
    font-weight: 100;
    background: radial-gradient(#c21330,#1f1013);
    /*-webkit-overflow-Y: hidden;
    -moz-overflow-Y: hidden;
    -o-overflow-Y: hidden;
    overflow-y: hidden;*/
    -webkit-animation: fadeIn 1 1s ease-out;
    -moz-animation: fadeIn 1 1s ease-out;
    -o-animation: fadeIn 1 1s ease-out;
    animation: fadeIn 1 1s ease-out;
}
th.sorting{
 color: white;
 font-family:'Roboto', sans-serif;
}
label{
    color: white;
    font-family:'Roboto', sans-serif;
}
a{
    color: white;
    font-family:'Roboto', sans-serif;
}

button{
    position: absolute;
    border: 2px solid white;
    background: transparent;
    font-family: 'Roboto', sans-serif;
    color: white;
    width: 250px;
    height: 50px;
    font-size: 2em;
    border-radius: 5px;
    opacity: .5;
    top: 60vh;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
    transition: .3s;
  }
  
  button:hover{
    border: 2px solid #104F55;
    background-color: rgba(365,365,365,0.5);
    cursor: pointer;
    color: #104F55;
    opacity: .8;
    transition: .3s;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  }
  
  .light {
      position: absolute;
      width: 0px;
      opacity: .75;
      background-color: white;
      box-shadow: #e9f1f1 0px 0px 20px 2px;
      opacity: 0;
      top: 100vh;
      bottom: 0px;
      left: 0px;
      right: 0px;
      margin: auto;
  }
  
  .x1{
    -webkit-animation: floatUp 4s infinite linear;
    -moz-animation: floatUp 4s infinite linear;
    -o-animation: floatUp 4s infinite linear;
    animation: floatUp 4s infinite linear;
     -webkit-transform: scale(1.0);
     -moz-transform: scale(1.0);
     -o-transform: scale(1.0);
    transform: scale(1.0);
  }
  
  .x2{
    -webkit-animation: floatUp 7s infinite linear;
    -moz-animation: floatUp 7s infinite linear;
    -o-animation: floatUp 7s infinite linear;
    animation: floatUp 7s infinite linear;
    -webkit-transform: scale(1.6);
    -moz-transform: scale(1.6);
    -o-transform: scale(1.6);
    transform: scale(1.6);
    left: 15%;
  }
  
  .x3{
    -webkit-animation: floatUp 2.5s infinite linear;
    -moz-animation: floatUp 2.5s infinite linear;
    -o-animation: floatUp 2.5s infinite linear;
    animation: floatUp 2.5s infinite linear;
    -webkit-transform: scale(.5);
    -moz-transform: scale(.5);
    -o-transform: scale(.5);
    transform: scale(.5);
    left: -15%;
  }
  
  .x4{
    -webkit-animation: floatUp 4.5s infinite linear;
    -moz-animation: floatUp 4.5s infinite linear;
    -o-animation: floatUp 4.5s infinite linear;
    animation: floatUp 4.5s infinite linear;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
    left: -34%;
  }
  
  .x5{
    -webkit-animation: floatUp 8s infinite linear;
    -moz-animation: floatUp 8s infinite linear;
    -o-animation: floatUp 8s infinite linear;
    animation: floatUp 8s infinite linear;
    -webkit-transform: scale(2.2);
    -moz-transform: scale(2.2);
    -o-transform: scale(2.2);
    transform: scale(2.2);
    left: -57%;
  }
  
  .x6{
    -webkit-animation: floatUp 3s infinite linear;
    -moz-animation: floatUp 3s infinite linear;
    -o-animation: floatUp 3s infinite linear;
    animation: floatUp 3s infinite linear;
    -webkit-transform: scale(.8);
    -moz-transform: scale(.8);
    -o-transform: scale(.8);
    transform: scale(.8);
    left: -81%;
  }
  
  .x7{
    -webkit-animation: floatUp 5.3s infinite linear;
    -moz-animation: floatUp 5.3s infinite linear;
    -o-animation: floatUp 5.3s infinite linear;
    animation: floatUp 5.3s infinite linear;
    -webkit-transform: scale(3.2);
    -moz-transform: scale(3.2);
    -o-transform: scale(3.2);
    transform: scale(3.2);
    left: 37%;
  }
  
  .x8{
    -webkit-animation: floatUp 4.7s infinite linear;
    -moz-animation: floatUp 4.7s infinite linear;
    -o-animation: floatUp 4.7s infinite linear;
    animation: floatUp 4.7s infinite linear;
    -webkit-transform: scale(1.7);
    -moz-transform: scale(1.7);
    -o-transform: scale(1.7);
    transform: scale(1.7);
    left: 62%;
  }
  
  .x9{
    -webkit-animation: floatUp 4.1s infinite linear;
    -moz-animation: floatUp 4.1s infinite linear;
    -o-animation: floatUp 4.1s infinite linear;
    animation: floatUp 4.1s infinite linear;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9);
    left: 85%;
  }
  
  button:focus{
    outline: none;
  }
  
  @-webkit-keyframes floatUp{
    0%{top: 100vh; opacity: 0;}
    25%{opacity: 1;}
    50%{top: 0vh; opacity: .8;}
    75%{opacity: 1;}
    100%{top: -100vh; opacity: 0;}
  }
  @-moz-keyframes floatUp{
    0%{top: 100vh; opacity: 0;}
    25%{opacity: 1;}
    50%{top: 0vh; opacity: .8;}
    75%{opacity: 1;}
    100%{top: -100vh; opacity: 0;}
  }
  @-o-keyframes floatUp{
    0%{top: 100vh; opacity: 0;}
    25%{opacity: 1;}
    50%{top: 0vh; opacity: .8;}
    75%{opacity: 1;}
    100%{top: -100vh; opacity: 0;}
  }
  @keyframes floatUp{
    0%{top: 100vh; opacity: 0;}
    25%{opacity: 1;}
    50%{top: 0vh; opacity: .8;}
    75%{opacity: 1;}
    100%{top: -100vh; opacity: 0;}
  }
  
  .header{
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Roboto', sans-serif;
    font-weight: 200;
    color: white;
    font-size: 2em;
  }
  
  #head1, #head2,#head3, #head4, #head5{
    opacity: 1;
  }
  
  #head1{
    -webkit-animation: fadeOut .2 5s ease-in;
    -moz-animation: fadeOut .2 5s ease-in;
    -o-animation: fadeOut .2 5s ease-in;
    animation: fadeOut .2 5s ease-in;
    margin-top: 10px;
   
  }
  
  #head2{
    -webkit-animation: fadeOut 1 5s ease-in;
    -moz-animation: fadeOut 1 5s ease-in;
    -o-animation: fadeOut 1 5s ease-in;
    animation: fadeOut 1 5s ease-in;
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    animation-delay: 6s;
  }
  
  #head3{
    -webkit-animation: fadeOut 1 5s ease-in;
    -moz-animation: fadeOut 1 5s ease-in;
    -o-animation: fadeOut 1 5s ease-in;
    animation: fadeOut 1 5s ease-in;
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    animation-delay: 12s;
  }
  
  #head4{
    -webkit-animation: fadeOut 1 5s ease-in;
    -moz-animation: fadeOut 1 5s ease-in;
    -o-animation: fadeOut 1 5s ease-in;
    animation: fadeOut 1 5s ease-in;
    -webkit-animation-delay: 17s;
    -moz-animation-delay: 17s;
    -o-animation-delay: 17s;
    animation-delay: 17s;
  }
  
  #head5{
    -webkit-animation: finalFade 1 5s ease-in;
    -moz-animation: finalFade 1 5s ease-in;
    -o-animation: finalFade 1 5s ease-in;
    animation: finalFade 1 5s ease-in;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-delay: 22s;
    -moz-animation-delay: 22s;
    -o-animation-delay: 22s;
    animation-delay: 22s;
  }
  
  @-webkit-keyframes fadeIn{
    from{opacity: 0;}
    to{opacity: 1;}
  }
  
  @-moz-keyframes fadeIn{
    from{opacity: 0;}
    to{opacity: 1;}
  }
  
  @-o-keyframes fadeIn{
    from{opacity: 0;}
    to{opacity: 1;}
  }
  
  @keyframes fadeIn{
    from{opacity: 0;}
    to{opacity: 1;}
  }
  
  @-webkit-keyframes fadeOut{
    0%{opacity: 0;}
    30%{opacity: 1;}
    80%{opacity: .9;}
    100%{opacity: 0;}
  }
  
  @-moz-keyframes fadeOut{
    0%{opacity: 0;}
    30%{opacity: 1;}
    80%{opacity: .9;}
    100%{opacity: 0;}
  }
  
  @-o-keyframes fadeOut{
    0%{opacity: 0;}
    30%{opacity: 1;}
    80%{opacity: .9;}
    100%{opacity: 0;}
  }
  
  @keyframes fadeOut{
    0%{opacity: 0;}
    30%{opacity: 1;}
    80%{opacity: .9;}
    100%{opacity: 0;}
  }
  
  @-webkit-keyframes finalFade{
    0%{opacity: 0;}
    30%{opacity: 1;}
    80%{opacity: .9;}
    100%{opacity: 1;}
  }
  
  @-moz-keyframes finalFade{
    0%{opacity: 0;}
    30%{opacity: 1;}
    80%{opacity: .9;}
    100%{opacity: 1;}
  }
  
  @-o-keyframes finalFade{
    0%{opacity: 0;}
    30%{opacity: 1;}
    80%{opacity: .9;}
    100%{opacity: 1;}
  }
  
  @keyframes finalFade{
    0%{opacity: 0;}
    30%{opacity: 1;}
    80%{opacity: .9;}
    100%{opacity: 1;}
  }
  
  footer{
    font-family: 'Roboto', sans-serif;
    font-size: 1.2em;
    text-align: center;
    padding-top: 50px;
/*     -webkit-transform: translate(95vw,90vh);
    -moz-transform: translate(95vw,90vh);
    transform: translate(95vw,90vh);
    transform: translate(95vw,90vh); */
    color:white !important;
  }

form{
    display: flex;
    flex-direction: column;
    width: 50%;
    margin: 100px auto 50px auto;
    
    
}

.tableau{
    width: 80%;
    margin: 20px auto;
}

#submitContact{
    width: 80%;
    margin:auto;
    border-radius: 5px;
    border: 0;
    height:4vh;
}
#submitContact:hover{
    background-color: aqua;
    cursor: pointer;
}

#contactName{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.contactClass{
    display: flex;
    flex-direction: column;
    width: 45%;
}

#formContact span{
    color: red;
}

#formContact label{
    text-transform: uppercase;

}
#formContact{
    box-shadow: 0px 0px 10px 6px rgba(119, 119, 119, 0.75);
    -moz-box-shadow: 0px 0px 10px 6px rgba(119, 119, 119, 0.75);
    -webkit-box-shadow: 0px 0px 10px 6px rgba(119, 119, 119, 0.75);
    padding: 37px;
    border-radius: 16px;
    width: fit-content;
    border: 5px white solid;
}
input[type=text] {
    background: transparent;
    border: solid 2px white; 
    border-radius: 5px;
}
input[type=submit] {
    background: transparent;
    border: solid 2px white; 
    border-radius: 5px;
    color: white;
}
textarea {
    background: transparent;
    border: solid 2px white; 
    border-radius: 5px;
}
form label {
    color: white;
}
::placeholder {
    color: rgb(230, 230, 230) !important;
}


#h1ind{
  color: white;
  font-family:"roboto";
}
#h2ind{
  color: white;
  font-family:"roboto";
}

.slick-slide img{
  width : 300px;
}

.divData img {
  width: 250px;
}

.divData p{
  color: white;
  text-align: center;
}

.divData{
  place-self: center;
}

.divData:hover{
  cursor: pointer;
}

.ListMovie{
  display: grid;
  grid-template-columns: 33% 33% 33%;
}

.slick-prev{
  right:auto;
}

.slick-next{
  left:auto;
}
#mesImages {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  justify-items: center; 
}

#mesImages img {
height: 300px;
margin: 8px;
border: 1px solid gray;
border-radius: 8px;
transition: transform .2s;
}

#mesImages img:hover{
  transform: scale(1.1);
}
  
  
  
  .titleFilm:hover{
    cursor: pointer;
  }

  
  
  .dataTables_info{
    color: white!important;
  }

  select {
    color: white;
  }
  select option{
    color: black;
  }
  #millefilms{
    width: 100%;
  }
  .navbar-brand{
    width: 6%;
  }
  #accueil:hover{
    color: red;
  }
  #galerie:hover{
    color: red;
  }
  #donnees:hover{
    color: red;
  }
  #contact:hover{
    color: red;
  }
  

  .posterFilm img{
    width: 300px;
  }
  #carouselExampleIndicators{
    width: 30%;
    font-family: 'roboto';
  }
  

  #resume{
    width: 50%;
    margin-left: auto;
    background-color: white;
    font-size: 14pt;
    display: block;
    margin-right: auto;

  }

  .spanInfo{
    text-align: center; 
  }

  .spanInfo:hover{
    cursor: pointer;
  }

  input[type='submit'], input[type='password']{
    background: transparent;
    border: 2px white solid;
    border-radius: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    
  }

  input[type="file"] {
    display: none;
}
.custom-file-upload {
    border: 2px white solid;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
    width: 300px;
    border-radius: 5px;
}

#galh1{
  text-align: center;
  color: white;
}

#carouselExampleIndicators{
  margin-left: auto;
  margin-right: auto;
}

.carousel-control-prev-icon{
  position: relative;
  right: 100px;

}

.carousel-control-next-icon{
  position: relative;
  left: 100px;

}

#h1ind,#h2ind{
  text-align: center;
}
#matable{
  opacity: 0.75;
}
#matable_wrapper{
  border: 5px white solid;
  border-radius: 15px;
  top: 20px;

}

.pBa{
  position: relative;
  top: 20px;
  color: white;
}

.linkBa{
  text-align: center;
  margin-top: 50px;
}
#galImg{
  margin: auto;
}
#galh1{
  font-family: 'roboto';
  margin-top: 5%;
}

.navbar-toggler{
  position: relative;
  top: 0px;
  left: 100px;
}

@media screen and (max-width: 640px) {
  #mesImages img{
    width: 90%;
    height: auto;
  }
  #galImg {
    margin: auto;
    width: 100%;
  }

  #formContact{
    width: 80%;
  }

  #head1{
    top: 100px;
  }

  #matable_wrapper{
    top:50px;
  }
}