@font-face {
    font-family: 'Avara';
    src: url('Avara-Black.woff2') format('woff2');
}

@font-face {
    font-family: 'Lincoln';
    src:  url('LincolnMITRE-LM5x7.woff2') format('woff2');
}

@font-face {
    font-family: 'Fixed';
    src:  url('Fixedsys500c.woff') format('woff');
}


/*Footer ne amrche pas*/


#lobby_image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
}

#lobby_text {
    display: inline;
   
    cursor: pointer;
    
}

#aster {
    color: #2ae967;
}
.map {
    
    font-size: 18px;
    display: block;
    margin-left: 3%;
    margin-right: auto;
    
}

.pin {
    cursor: pointer;
    display: inline;
    color:rgb(255, 0, 255);
    
}
.pin:hover{
    color:#2ae967
}

.map-content {
    text-align: left;
    position: absolute; 
    
    display: block;
    

    background-color:#f0f0f0;
    border-radius: 1px;
    border: 2px solid #2ae967;
    line-height: 12px;

    width:74%;
    /*box-shadow: 0px 1px 2px #CCC;*/   
    height : 0px;
    visibility: hidden;
    
    cursor: pointer;    
    overflow: hidden; 
    transition: height 0.6s ease;
    
}

.map-content.active{
    display: block;
    margin-left: 2%;
    margin-right: 8%;
    visibility: visible;  
    height: 850px;

}

.map-content.active:hover {
    border: 2px solid rgb(255, 0, 255);
    
    transition: border-color 0.4s ease;
}

.map-content h4{
   
        display: block;
        margin-left: 15px;
        line-height: 27px;
        color:#2ae967;
        font-size: 30px;;
    
}

.map-content img{
    position:relative;
    display: block;
    margin-top: 0px;
    
    right:70px;
    max-width: 470px;
}

.two-map-content {
    content: "";
    display: table;
    clear: both;
}

.map-content:hover h5 {

    flex-wrap: wrap;
    color:rgb(255, 0, 255);
    transition: color 0.4s;
}
.map-content h5 {
    
    display:inline-flex;
    margin-left: 0px;
    font-family: 'Arial', sans-serif; 
    font-size: 22px;
    color:#2ae967;
}
.close {
    position: absolute;
    display: inline-block;
    padding-right: 10px;
    padding-top: 10px;
    right : 0;
    font-family: 'Arial', sans-serif; 
    font-size: 22px;
    color:#2ae967;
}

.close:hover {
    color:rgb(255, 0, 255);
}
img {
    position:initial;
    top:0px;
    width: 800px;
    object-fit:contain; 
    height: auto;
    
    max-height: 100%;
    
}

.tinyimg{
    position:initial;
    top:0px;
    width: 400px;
    object-fit:contain; 
    height: auto;
    
    max-height: 100%;
}

img .squarred{
    display: inline;
    width:600px;
    height:auto;
}
.portrait-img {
    display: inline;
    text-align: left;
    height: 542px;
}
.gif {
    width: 680px;
    height: auto;
}

.imgNormal {
    max-width: 100%; 
    height: auto;
    width: 600px;
    
}
.right {
    width: 600px;
    height: auto;
    margin-right: 6%;
}

.imgCentered {
    display: block;
    margin-left: auto;
    margin-right: auto;
    
  
}
.imgLeftRow {
    max-width: 100%; 
    height: auto;
    margin-left: 0%;
}

.imgRightRow {
    max-width: 100%; 
    height: auto;
    margin-right: 0px;
}

p {
    font-family: 'Lincoln', sans-serif; 
    font-size:25px ;
}

h1 {
    display: inline;
    padding : 0px;
    margin : 0px;
    font-family: 'Avara', sans-serif;
    line-height: 40px; 
    font-size: 22px;
}

h2 {
    padding-top: 5px;
    margin-left: 0px;
    writing-mode: vertical-lr; /* Texte vertical de haut en bas (de gauche à droite) */
    text-orientation: mixed; /* Orientation du texte mixte pour une meilleure compatibilité */
    white-space: nowrap;

    font-family: 'Avara', sans-serif;
    line-height: 30px; 
    font-size: 34px;
}


h4 {
    display:inline;
    
    
    color: rgb(204, 204, 204);
    font-family: 'Fixed', sans-serif;
     
    font-size: 22px;
}

.utf-menu {
    font-family:'Fixed', sans-serif;
    font-size: 22px;
    margin-left: 40px;
}

.utf-menu-sous {
    font-family:'Fixed', sans-serif;
    font-size: 22px;
    margin-left: 120px;
}

div.utf-menu a {
    display: inline;
    font-family:'Fixed', sans-serif;
    font-size: 22px;
    color:#2ae967;
}
    
div.utf-menu a:hover {
    color: rgb(255, 0, 255);
    cursor: pointer;
    transition: color 0.25s ease;
}

ul { /* La liste en sois*/
    display: flex;
    list-style-type: none;
    padding: 0;
    margin-top: 40px;
    margin-left: 15px;
    margin-right: 15px;
    }

ul li { /*Les elements de la liste*/
    
    left: 0px;
    float: 0px;
    margin-left: 10px;
    margin-right: 10px;
}

#BriacNaux {
    margin-left: 0px;
}

#About {
    margin-left: auto;
    text-align: right;
}

#Language {
    
    
    border-radius: 2px;
    border-color: #1b171d;
}

a {
    display: block;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-family: 'Avara', sans-serif;
    line-height: 30px; 
    font-size: 31px;
    color: #1b171d;
}

a:hover {
    color:#2ae967;
    cursor: pointer;
    transition: color 0.25s ease;
}


.language{
    margin-top: 15px;
    margin-left: 15px;
    margin-right: 15px;
    line-height: 3px;
    font-family: 'Fixed', sans-serif;
    font-size: 28px;
    transition: color 0.25s ease;
}

p.language {
    color:#2ae967;
    text-align: center;
}

.menu {
    max-width: 100%;
    list-style-type: none; /* Supprimer les puces de la liste */
    padding: 0; /* Supprimer les marges intérieures de la liste */
    display: flex; /* Utiliser Flexbox */
    flex-wrap: wrap;
}

.sous { /* Le menu deroulant en sois*/
    position: absolute; 
    left: 0;
    display: block;
    padding: 0;
    margin: 0;
    /*box-shadow: 0px 1px 2px #CCC;*/
    background-color: white;
    height : 0px;
    visibility: hidden;
    width: 100%;
    cursor: pointer;    
    overflow: hidden; 
    transition: background-color 1s ease, height 0.6s ease;
}

.sous.active{
    visibility: visible;  
    height: auto;
    
}

.sous li { /*Elements du menu deroulant*/
    padding-left: 30px;
    padding-top: 3px;
    margin: 0;
    
    display: inline-block;
    width: 100%;

    text-align:left;
    background-color:#e6a5ff;
    background-color:#33ff88;
    transition: background-color 0.25s ease;

    font-family: 'Lincoln', sans-serif; 
    font-size:23px ;
}   

.sous li:hover {
    border-bottom: none;
    background-color: #302934;
    transition: background-color 0.15s ease;
    color: rgb(255, 0, 255);
}

.center-ilot{
    text-align: center;

}
.conteneur {
    display: flex;
    position: absolute;
    margin-right: 10%;
    margin-top: 5px;
    width: 100%;
    margin-top: 0px;
    min-height: 1500px;
    transition : margin 1s ease;
}

.conteneur.lower {
    margin-top : 150px; /* Attention cette valeur peut empecher certains sous onglets d'etre cliquable*/
    
}

.conteneur-onglet {
    display: none;
}

.conteneur-onglet.active {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
}



.conteneur-para{
    
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 90%;

    line-height: 25px;
    font-family: 'Lincoln', sans-serif; 
    font-size:21px ;
    text-align: justify;
}

div .conteneur-para a {
    display: inline;
    font-family:'Fixed', sans-serif;
    font-size: 22px;
    color:#2ae967;
}

div .conteneur-para a:hover {
    color: rgb(255, 0, 255);
    cursor: pointer;
    transition: color 0.25s ease;
}

.conteneur-para-left{
    
    margin-right:80px;
    margin-top: 5px;
    margin-left: 15px;
    line-height: 25px;
    
    font-family: 'Lincoln', sans-serif; 
    font-size:21px ;
    text-align: justify;
}

.conteneur-para-right{  
    

    margin-top: 5px;
    margin-left: 80px;
    line-height: 25px;
    
    font-family: 'Lincoln', sans-serif; 
    font-size:21px ;
    text-align: justify;
}

.conteneur-para-center{  
    cursor: pointer;
    margin-left: 10%;
    margin-top: 5px;
    line-height: 25px;
    
    font-family: 'Lincoln', sans-serif; 
    font-size:21px ;
    text-align: justify;
}

.two {
    display:flex;
    justify-content:space-around;
}

.conteneur-isolated{
    margin-top: 5px;
    margin-left: 10px;
    line-height: 28px;
    font-family: 'Lincoln', sans-serif; 
    font-size:21px ;
    
}

.conteneur-isolated-right{
    
    position:static;
    right: 0;
    
    margin-top: 5px;
    margin-left:75%;
    line-height: 30px;
    font-family: 'Avara', sans-serif; 
    font-size:21px ;
    text-align: right;
    
}



* {box-sizing: border-box}
.mySlides1, .mySlides2, .mySlides3, .mySlides4, .mySlides5, .mySlides6, .mySlides7, .mySlides8 {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color:white;
  font-weight: bold;
  font-size: 36px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.prevMP, .nextMP {
    cursor: pointer;
    position: absolute;
    top: 50%;
    padding: 10px;
    margin-top: -22px;
    color:#2ae967;
    font-weight: bold;
    font-size: 36px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
  }

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prevMP {
    left:0;
}
.nextMP {
    right:53%;
    border-radius: 3px 0 0 3px;
  }

/* On hover, add a grey background color */
.prev:hover, .next:hover {
  color:#2ae967;
}

.prevMP:hover, .nextMP:hover {
    color:rgb(255, 0, 255);
  }


footer {
    position:inherit;
    text-align: center;
    bottom:0px;
    margin-left: 35%;
    font-size: 16px;
    color:rgb(211, 211, 211);
    
}

@media screen and (max-width: 1400px) {
    .map {
        display: none;
    }

    .map-content {
        display: block;
        position: inherit;
        visibility: visible;
        width: 100%;
        background-color:#f0f0f0;
        border-radius: 1px;
        border: 2px solid #2ae967;
        line-height: 12px;
        max-width:100%;
        height : 850px;

    }
    
    .map-content:hover {
        border: 2px solid rgb(255, 0, 255);
        
        transition: border-color 0.4s ease;
    }
    
    .map-content a {
        padding-left: 20px;
        font-size: 40px;
        color:rgb(255, 0, 255);
    }
    
    .map-content img{
        position:initial;
        top:0px;
        width: 85%;
        padding:5%;
        object-fit:contain; 
        height: auto;
    }
    
    .two-map-content {
        display:block;
    }
    
    .map-content:hover h5 {
    
        color:#2ae967;
        transition: color 0.4s;
    }
    .map-content h5 {
        
        display:inline-flex;
        margin-left: 0px;
        font-family: 'Arial', sans-serif; 
        font-size: 22px;
        color:#2ae967;
    }
    .close {
        display: none;
    }
    
   
    

    .prevMP, .nextMP {
        cursor: pointer;
        position: inherit;
        display:inline;
        margin : 5%;
    
        font-weight: bold;
        
        transition: 0.6s ease;
        user-select: none;
        
    }
     
    .map-content h4 {
        display: block;
        margin-left: 15px;
        line-height: 25px;
        color:#2ae967;
        font-size: 22px;;
    }

    .prevMP {
        left:0;
    }
    .nextMP {
        text-align: right;
        right:5%;
        margin : 5%;
      }
}


@media screen and (max-width: 1200px) {
    
    .utf-menu {
        font-family:'Fixed', sans-serif;
        font-size: 22px;
        margin-left: 0px;
    }

    div.utf-menu a {
        display: inline;
        font-family:'Fixed', sans-serif;
        font-size: 18px;
        color:#2ae967;
    }

    .right {
        display: block;
        max-width: 100%; 
        height: auto;
        margin-left: auto;
        margin-right: auto;
        
        
    }

    .imgNormal {
        display: block;
        max-width: 100%; 
        height: auto;
        margin-left: auto;
        margin-right: auto;
    }
    .portrait-img {
        display: block;
        max-width: 100%; 
        height: auto;
        margin-left: auto;
        margin-right: auto;
    }

    .imgLeftRow {
        
        display: block;
        max-width: 100%; 
        height: auto;
        margin-left: auto;
        margin-right: auto;
    
    }
    
    .imgRightRow {
        display: block;
        max-width: 100%; 
        height: auto;
        margin-left: auto;
        margin-right: auto;
    
        
    }

    .imgCentered {
        display: block;
        max-width: 100%; 
        height: auto;
        margin-left: auto;
        margin-right: auto;
      
    }

    .tinyimg{
        display: block;
        max-width: 100%; 
        height: auto;
        margin-left: auto;
        margin-right: auto;
    }


    .two {
        display: block;
    }

    .gif {
        display: block;
        max-width: 100%; 
        height: auto;
        margin-left: auto;
        margin-right: auto;
        
    }

    footer {
        position:inherit;
        text-align: center;
        bottom:0px;
        margin-left: 12%;
        font-size: 16px;
        color:rgb(211, 211, 211);
        
    }


    .sous { /* Le menu deroulant en sois*/
        position: absolute; 
        left: 0;
        display: block;
        padding: 0;
        margin: 0;
        /*box-shadow: 0px 1px 2px #CCC;*/
        background-color: white;
        height : 0px;
        visibility: hidden;
        width: 100%;
        cursor: pointer;    
        overflow: hidden; 
        transition: background-color 1s ease, height 0.6s ease;
    }
    
    .sous.active{
        visibility: visible;  
        height: auto;
        
    }
    
    .sous li { /*Elements du menu deroulant*/
        padding-left: 30px;
        padding-top: 3px;
        margin: 0;
        
        display: inline-block;
        width: 100%;
        text-align:left;
        background-color:#e6a5ff;
        background-color:#33ff88;
        transition: background-color 0.25s ease;
    
        font-family: 'Lincoln', sans-serif; 
        font-size:23px ;
    }  

}


@media screen and (max-width: 750px) {

    .imgNormal {
        display: block;
        max-width: 100%; 
        height: auto;
        margin-left: auto;
        margin-right: auto;
    }

    .portrait-img {
        display: block;
        max-width: 100%; 
        height: auto;
        margin-left: auto;
        margin-right: auto;
    }

    .sous.active{
        visibility: visible;  
        height: auto;
        
    }
    
    .sous li { /*Elements du menu deroulant*/
        padding-left: 30px;
        padding-top: 3px;
        margin: 0;
        
        display: inline-block;
        width: 100%;
        text-align:left;
        background-color:#e6a5ff;
        background-color:#33ff88;
        transition: background-color 0.25s ease;
    
        font-family: 'Lincoln', sans-serif; 
        font-size:23px ;
    }  
}