/* CSS Document */



body,td,th {
    color: #000000;
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Verdana", sans-serif;
}
body {
    background-color: rgba(0,0,0,1);
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0;
    color: rgba(255,255,255,0.42);
    font-size: 6.5vmax;
    line-height: 2.5vmax;
    height:100%;
}
a:link {
    font-size: 4vmax;
    font-weight: bold;
    text-decoration: none;
    color: rgba(200,200,200,0.62);
}
a:visited {
    text-decoration: none;
    color: rgba(75,79,128,1);
}
a:hover {
    text-decoration: none;
    color: rgba(255,255,255,1);
}
a:active {
    text-decoration: none;
}
.texte_site {
        color: rgba(255,255,255,0.42);

    position: absolute;
    left: 3.8vmax;
    top: 3.4vmax;
    width: 70%;
}
ul {
    color: rgba(230,230,230,1);
       font-size: 2vmax;
        font-weight: bold;

     line-height: 1.5vmax;

  list-style-type: none;
  margin-left: 30;
  padding-left: 5%;
}

li .dates{
    font-weight: bold;
    font-style: normal;
}
.coordonnees{
    background-color: rgba(0,0,0,0.5);
    font-size: 1vmax;
    font-weight: bold;
    text-decoration: none;
    position: fixed;
    bottom: 0;
    right: 0;
    padding-right: 2vmax;
    width: 100%;
    height: 3vmax;
    text-align: right;
}

.menu{ 
    background-color: rgba(0,0,0,1);
    font-size:1vmax;
    font-weight: bold;
    text-decoration: none;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 3vmax;
    text-align: right;

}
.expo{ 
  background-image: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0));

    font-size: 1.8vmax;
    font-weight: bold;
    color: rgba(250,250,250,0.8);

    text-decoration: none;
    position: fixed;
    top:  3vmax;
    left: 0vh;
    width: 100vw;
    height: 50vh;
    text-align: left;
	display:flex;
	flex-direction:column;
}
.menu a, .coordonnees a{
            color: rgba(200,200,200,0.8);


    font-size:1vmax;
}
.menu a:hover {
    text-decoration: none;
    color: rgba(255,255,255,1);
}





*{
  box-sizing: border-box;
}


.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 3vmax 2px;
  cursor: all-scroll;
}

/* Create four equal columns that sits next to each other */
.column {
  -ms-flex: 98vw; /* IE10 */
  flex: 98vw;
  max-width: 98vw;
  padding: 0.1vw 0.1vw;
}

.column img {
  margin-top: 0.5vw;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns 
@media screen and (max-width: 800px) {
  .column {
    -ms-flex: 99%;
    flex: 99%;
    max-width: 99%;
  }
}*/

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other 
@media screen and (max-width: 600px) {
  .column {
    -ms-flex: 99%;
    flex: 99%;
    max-width: 99%;
  }*/

.sidenav, .sidenav1, .sidenav2, .sidenav3, .sidenav4, .sidenav5, .sidenav6, .sidenav7, .sidenav8, .sidenav9{
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.8);
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  text-align:center;
}

.sidenav a , .sidenav1 a, .sidenav2 a, .sidenav3 a, .sidenav4 a, .sidenav5 a, .sidenav6 a, .sidenav7 a , .sidenav8 a , .sidenav9 a{
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;

}

.sidenav a:hover, .sidenav1 a:hover, .sidenav2 a:hover, .sidenav3 a:hover, .sidenav4 a:hover, .sidenav5 a:hover, .sidenav6 a:hover, .sidenav7 a:hover, .sidenav8 a:hover, .sidenav9 a:hover{
  color: #f1f1f1;
}

.sidenav .closebtn , .sidenav1 .closebtn1, .sidenav2 .closebtn2, .sidenav3 .closebtn3, .sidenav4 .closebtn4, .sidenav5 .closebtn5, .sidenav6 .closebtn6, .sidenav7 .closebtn7, .sidenav8 .closebtn8, .sidenav9 .closebtn9{
  position: absolute;
  top: 1vh;
  right: 25px;
  font-size: 3vh;
  margin-left: 50px;
}

.map { 
     -webkit-filter: grayscale(100%); 
     -moz-filter: grayscale(100%); 
     -ms-filter: grayscale(100%); 
     -o-filter: grayscale(100%); 
     filter: grayscale(100%); 
} 
.plan{

    font-size:1.5vh;
    cursor:pointer;
    bottom:0;
	width:fit-content;
}

.apropos{
    font-size: 1.8vw;
    width: 85%;
    text-align: left;
    padding: 2.5vh;
    padding-top:25vh;
    line-height : 140%;
}

.apropos2{
    font-size: 1.6vw;
    width: 85%;
    text-align: left;
    padding: 2.5vh;
    padding-top:5vh;
    line-height : 140%;
}

.signature{
font-size: 1.2vw;
font-weight: bold;

}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
  .sidenavBis {padding-top: 15px;}
  .sidenavBis a {font-size: 18px;}
  .sidenav1 {padding-top: 15px;}
  .sidenav1 a {font-size: 18px;}
  .sidenav2 {padding-top: 15px;}
  .sidenav2 a {font-size: 18px;}
  .sidenav3 {padding-top: 15px;}
  .sidenav3 a {font-size: 18px;}
  .sidenav4 {padding-top: 15px;}
  .sidenav4 a {font-size: 18px;}
  .sidenav5 {padding-top: 15px;}
  .sidenav5 a {font-size: 18px;}
  .sidenav6 {padding-top: 15px;}
  .sidenav6 a {font-size: 18px;}
  .sidenav7 {padding-top: 15px;}
  .sidenav7 a {font-size: 18px;}
  .sidenav8 {padding-top: 15px;}
  .sidenav8 a {font-size: 18px;}
  .sidenav9 {padding-top: 15px;}
  .sidenav9 a {font-size: 18px;}
}

@media screen and (max-width: 600px) {
  .apropos{font-size: 2.1vh;}
  .apropos2{font-size: 1.6vh;}
  .signature{font-size: 1.4vh;}
}


@media screen and (min-width: 1000px) {
  .apropos{font-size: 2.5vh;}
    .apropos2{font-size: 2.3vh;}

}