.html{
  size: 100%;
}

body {
  background-color: black;


}




a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}




.container {
  display: flex; /* or inline-flex */
  flex-direction: row;
  flex-wrap: wrap;
}



.titre {

margin-right: 5%;
margin-left: 5%;
margin-top: 3%;
max-width: 100%;
height: auto;

text-align: center;


opacity: 0.9;
}


h11{
font-family: 'Libre Franklin', sans-serif;
  font-size: 50px;

 color: white;
 text-align: center;


}


h3{

    font-size: 17px;
    font-family: 'Libre Franklin', sans-serif;
    color: white;
    text-decoration: none;
    text-decoration-line: none;
}

h4{

    font-size: 25px;
font-family: 'Libre Franklin', sans-serif;
   color: white;
display: inline;
}

h5{

    font-size: 17px;
font-family: 'Libre Franklin', sans-serif;
   color: white;
 font-style: italic;
 display: inline;
}

h44{

    font-size: 25px;
font-family: 'Libre Franklin', sans-serif;
   color: white;
 font-style: italic;
 display: inline;
}

h2{

    font-size: 17px;
font-family: 'Libre Franklin', sans-serif;
   color: white;
 display: inline;
}



.textabout{
  max-width: 55%;
  height: auto;

  padding-right: 1%;
  padding-left: 15%;


  margin-top: 5%;

  margin-bottom: 5%;



  text-align: left;



}

.textabout2{
  max-width: 40%;
  height: auto;

  padding-right: 1%;
  padding-left: 15%;


  margin-top: 1%;

  margin-bottom: 5%;



  text-align: left;

}

.textabout3{
  max-width: 50%;
  height: auto;

  padding-right: 1%;
  padding-left: 15%;


  margin-top: 5%;

  margin-bottom: 5%;



  text-align: left;



}






.bg {
  position: fixed;
  left: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}






.simu {
  max-width: 100%;
  height: auto;

  padding-right: 1%;
  padding-left: 1%;


  margin-top: 1%;
margin-left: 42%;
margin-right: 42%;
  margin-bottom: 1%;

  border-radius: 2px;
  border-color: white;
  border-style: solid;
  border-width: 1px;
  text-align: center;


opacity: 0.9;
   transition: 0.4s;



}



.simu2 {
  max-width: 100%;
  height: auto;

  padding-right: 1%;
  padding-left: 1%;


  margin-top: 1%;
margin-left: 42%;
margin-right: 42%;
  margin-bottom: 1%;

  border-radius: 2px;
  border-color: white;
  border-style: solid;
  border-width: 1px;
  text-align: center;


opacity: 0.9;
   transition: 0.4s;



}



.simu:hover,
.simu:focus {

  transform: translateY(-0.25em);
  opacity: 0.9;
}

.simu2:hover,
.simu2:focus {

  transform: translateY(-0.25em);
  opacity: 0.9;
}








.about{
  max-width: 100%;
  height: auto;

  padding-right: 1%;
  padding-left: 1%;


  margin-top: 12%;
margin-left: 42%;
margin-right: 42%;
  margin-bottom: 2%;



  text-align: center;


  opacity: 0.9;
     transition: 0.4s;




}



.abouttt{
  max-width: 100%;
  height: auto;

  padding-right: 1%;
  padding-left: 1%;


  margin-top: 12%;
margin-left: 42%;
margin-right: 42%;
  margin-bottom: 0%;



  text-align: center;


  opacity: 0.9;
     transition: 0.4s;




}


.abouttt:hover,
.abouttt:focus {

  transform: translateY(-0.25em);
  opacity: 0.9;
}





.about2{
  max-width: 50%;
  height: auto;

  padding-right: 1%;
  padding-left: 5%;


  margin-top: 41%;


position: fixed;
  text-align: center;
  text-decoration: none;


  opacity: 0.9;
     transition: 0.4s;




}

.about2:hover,
.about2:focus {

  transform: translateY(-0.25em);


}


.about:hover,
.about:focus {

  transform: translateY(-0.25em);


}

.about3{
  max-width: 50%;
  height: auto;

  padding-right: 1%;
  padding-left: 5%;


  position: fixed;

  margin-top: 30%;
  margin-left: 84%;



  text-align: center;
  text-decoration: none;


  opacity: 0.9;
     transition: 0.4s;




}

.about3:hover,
.about3:focus {

  transform: translateY(-0.25em);


}


.ref{
  max-width: 50%;
  height: auto;

  padding-right: 1%;
  padding-left: 1%;

margin-left: 72%;

  margin-top: 10%;



  text-align: right;


  opacity: 0.9;
     transition: 0.4s;


}

.ref:hover,
.ref:focus {

  transform: translateY(-0.25em);


}



.menu {
  min-width: auto;
}

@media screen and (max-device-width:700px){
  .menu {
    min-width: 100%;
  }
}



.teaser{

  max-width: 100%;
  max-height: 100%;


}

.teaserdiv{

  margin: auto;

  margin-bottom: auto;
  width: 70%;
  margin-top: 5%;








}