* {
    margin: 0px;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
}

a {
    text-decoration: none;
    user-select: none;
}

a strong {
    color: goldenrod;
    text-decoration:underline;
    user-select: auto;
}

.blue {
    color: aqua;
}

h1 {
    text-align: center;
    font-family: 'Comfortaa';
    text-shadow: 3px 3px 2px rgba(0,0,0,1);
    line-height: 150%;
}

h2 {
    text-align: center;
    font-family: 'Comfortaa';
    line-height: 150%;
}

.video-content h3 {
    text-align: center;
    font-family: 'Comfortaa';
    line-height: 150%;
}

.hr-lines {
    position: relative;
    max-width: 500px;
    margin: 100px auto;
    text-align: center;
}
  
.hr-lines:before {
    content:" ";
    height: 2px;
    width: 30px;
    background: whitesmoke;
    display: block;
    position: absolute;
    top: 50%;
}

.one::before {
    left: 15px;
}

.one::after {
    right: 15px;
}
  
.hr-lines:after {
    content:" ";
    height: 2px;
    width: 30px;
    background: whitesmoke;
    display: block;
    position: absolute;
    top: 50%;
}

.four::before {
    left: -20vw;
}

.four::after {
    right: -20vw;
}

.hr-lines-prez {
    position: relative;
    max-width: 500px;
    margin: 2vw auto;
    text-align: center;
}
  
.hr-lines-prez:before {
    content:" ";
    height: 5px;
    width: 50px;
    background: whitesmoke;
    display: block;
    position: absolute;
    top: 50%;
}
  
.hr-lines-prez:after {
    content:" ";
    height: 5px;
    width: 50px;
    background: whitesmoke;
    display: block;
    position: absolute;
    top: 50%;
}




p {
    font-size: 1.5em;
    color:white;
    margin: 4vw;
    text-align: center;
    line-height: 150%;
}

ul {
    color: white;
    text-align: center;
    font-family: 'Comfortaa';
    font-size: 1.4em;
    text-shadow: 3px 3px 2px rgba(0,0,0,1);
    line-height: 175%;
    list-style: none;
    margin: 5vw 0 10vw 0;
}

ul a {
    color: white;
}

ul a:hover {
    color: goldenrod;
}

.italic-text {
    font-style: italic;
}

header a, footer a {
    display: inline-block;
}

footer {
    display: flex;
    flex-direction: column;
}

footer .logos {
    margin-top: 0.5em;
    margin-bottom: 1.5em;
}

header {
    display: flex;
    width: auto;
    align-items: center;
    justify-content: space-around;
    background-color: black;
    border-bottom: 4px ridge rgba(48, 48, 48, 0.6);
    height: 125px;
}

header .logos {
    display: none;
}

.logos {
    justify-content: center;
    margin:auto; 
}

.logos img{
    margin: 0px 1.5vw;
    max-width: 30px;
    transition-property: all;
    transition-duration: 500ms;
}

.logos img:hover{
    transform: rotateY(360deg);
}

nav {
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    justify-self: center;
}



header nav a {
    font-family: 'Comfortaa';
    font-size: 1.35em;
    color: goldenrod;
    margin: 0px 5.2vw 0px 5.2vw;
    transition-property: all;
}

header nav a:hover {
    color:aliceblue;
    transform: scale(1.2);
} 

header nav a:hover span {
    color: black;
    transform: scale(1.2);
} 

.arrow {
  border: solid white;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 5px;
}

.arrow.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.above{
    position: absolute;
    top: -40px;
    left: 100px;
}

footer nav {
    margin: 2em;
    flex-direction: row;
}

footer nav a {
    color: goldenrod;
    margin: 0 2em;
}

footer nav .apparent a:hover {
    color:goldenrod;
} 

footer nav a:hover {
    color:aliceblue;
} 

.apparent {
    display: block;
}
.apparent a:hover {
    transform: none;
}

.menu-deroulant {
    display: block
}

.menu-deroulant:hover .cache {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-items: start;
    justify-content: start;
}

.menu-deroulant:active .cache {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-items: start;
    justify-content: start;
}

.menu-deroulant.side:hover .cache {
    display: none;
}

.menu-deroulant.side:active .cache {
    display: none;
}



.cache {
    display: none;
    position: absolute;
}

/*.ue:after {
  content: '';
  position: absolute;
  left: 0;
  display: inline-block;
  height: 1em;
  width: 100%;
  border-bottom: 1px solid;
  margin-top: 10px;
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: scale(0,1);
  transform: scale(0,1);
  }

.ue:hover:after {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}*/

h1, h2 {
    color: whitesmoke;
}

h3 {
    color: whitesmoke;
    padding-left: 2px;
}


.title{
    padding-right: 20px;
    padding-left: 20px;
}

.title img{
    transition-property: all;
    transition-duration: 500ms;
}

.title a{
    display: flex;
    align-items: center;
}

.title a div{
    display: flex;
    flex-direction: column;
    align-items: end;
    margin-left: 5px;
}

.title .pano {
    width: 180px;
}

.title .proj {
    width: 130px;
}

.logo {
    width: 35px;
    margin-right: 5px;
}

.title:hover .pano {
    transform: translate(-60px, 15px);
}

.title:hover .proj {
    transform: translate(-20px, 20px);
}

.title:hover .logo {
    transform: translate(180px, -20px);
}

.logoPano {
    margin-left: 3.5vw;
    margin-right: 0;
    display: none;
}

.logoPano img{
    width: 30px;
}


footer {
    display: flex;
    width: auto;
    align-items: center;
    justify-content: center;
    justify-items: space-between;
    background-color: black;
}



main {
    display: flex;
    width: 100vw;
    background-color: rgb(1, 6, 25);
}

.sidebar {
    position: sticky;
    top: 0px;
    display: flex;
    flex-direction: column;
    width: 200px;
    background: #181A1B;
    /*background: rgb(39,39,39);
    background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(30,30,30,1) 50%, rgba(86,86,86,1) 100%);*/
}

.sidebar a{
    color: black;
    font-family: 'Comfortaa';
    font-size: 1.25em;
    display: inline-block;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 35%;
    margin: auto;
}

.sidebar a span {
    color: rgb(225, 225, 225);
    margin-right: 0.3em;
    /* -webkit-text-stroke: 0.4px black; */
}

.box {
    transition-property: all;
    transition-duration: 300ms;
    display: flex;
    flex-direction: column;
    width: auto;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 200px;
    height: 175px;
}

.box:hover {
    transform: translate(-5px, -5px);
    box-shadow: 6px 6px 25px rgba(0, 0, 0, 0.7);
}

.box:active {
    transform: translate(0px, 0px);
    transition-duration: 50ms;
}

.nature {
    border-style: none none solid none;
    border-width: 1px;
    border-color: black;
    /* background: rgb(2,0,36); */
    font-size: 1.35em;
    background-image: linear-gradient(90deg, rgba(2,0,36,0.7) 0%, rgba(9,121,26,0.7) 35%, rgba(0,212,255,0.7) 100%),
    url(Photos/background-nature.png);
}

.nature:active {
    background: rgb(2,0,36);
    background: linear-gradient(90deg, rgba(2,0,36,0.7) 0%, rgba(6,77,17,0.7) 54%, rgba(1,120,144,0.7) 100%),
    url(Photos/background-nature.png);
}

.piano {
    border-style: solid none solid none;
    border-width: 1px;
    border-color: black;
    background: rgb(0,0,0);
    background: linear-gradient(90deg, rgba(0,0,0,0.8) 0%, rgba(82,84,121,0.8) 54%, rgba(255,255,255,0.8) 100%),
    url(Photos/background-piano.png);
}

.piano:active {
    background: rgb(0,0,0);
    background: linear-gradient(90deg, rgba(0,0,0,0.8) 0%, rgba(46,47,70,0.8) 54%, rgba(101,101,101,0.8) 100%),
    url(Photos/background-piano.png);
}

.heroes {
    border-style: solid none solid none;
    border-width: 1px;
    border-color: black;
    background: rgb(2,3,65);
    background: linear-gradient(90deg, rgba(2,3,65,0.7) 0%, rgba(205,16,16,0.2) 50%, rgba(208,208,208,0.7) 100%),
    url(Photos/heroesLogo.png);
    background-position: center;
    background-size: cover;
/*    font-size: 0.9em;*/
    flex-direction: columna;
}

.heroes:active {
    background: rgb(0,0,24);
    background: linear-gradient(90deg, rgba(0,0,24,0.9) 0%, rgba(88,0,0,0.9) 50%, rgba(70,70,70,0.9) 100%),
    url(Photos/heroesLogo.png);
    background-size: 125%;
}

.heroes a span {
    display: none;
    /*font-size: 0.8em;
    margin-top: -15px;
    margin-bottom: -15px;*/
}


sidebar .empty {
    background-color:rgb(30, 30, 30);
}

.empty:hover {
    transform: translate(0px, 0px);
}

.prez-logos {
    display: flex;
    justify-content: center;
    align-items: center;
}

.prez-logos {
    display: none;
}

.prez-logos > img {
    margin: 1.7vw;
}

.logo1 {
    width: 30vw;
}

.logo2 {
    width: 23vw;
}

.logo3 {
    width: 7vw;
}

.main-content {
    width: fit-content;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.presentation h1, h2 {
    margin: 2vw auto 3vw auto;
}

.presentation h1 {
    font-size: 3em;
}

.presentation {
    display: flex;
}

.presentation img {
    width: 42vw;
}

.presentation.pano {
    margin-bottom: -4px;
}

.presentation.leo {
    margin: 5em 0;
}

.text.left {
    margin : 0px 0px 0px 0px;
}

.text.right {
    margin : 5px 0px 15px 0px;
}

.text {
    margin-top: 2em;
    margin-bottom: 2em; 
}

.personnel {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ecoute {
    display: flex;
    flex-direction: column;
    background: rgb(39,39,39);
    background: linear-gradient(90deg, black 0%, rgb(30, 30, 30) 50%, rgb(62, 66, 104) 100%);
}

.index-page .ecoute{
    margin-top: 10vw;
}

.ecoute h1 {
    align-self: center;
    margin-bottom: 25px;
    margin-top: 35px;
}

.two::before {
    left: -50px;
}

.two::after {
    right: -50px;
}

.three::before {
    left: 125px;
}

.three::after {
    right: 125px;
}

.four::before {
    left: -15vw;
}

.four::after {
    right: -15vw;
}

.five::before {
    left: -20vw;
}

.five::after {
    right: -20vw;
}

.track-player {
    margin: 50px;
    margin-top: 25px;
}

.bandeau{
    margin: 10vw 0;
}

.bandeau img {
    width : 100%;
    margin-bottom: -5px;
}

.nature-content {
    background-image: url(Photos/Xav-Feuilles.jpg);
    background-attachment: fixed;
    background-size: cover;
   
}

.nature-content > section{
    background-color:  rgba(69, 126, 87, 0.575);
}

.nature-content:first-child >section:first-child{
    padding-bottom: 2vw;
}

.nature-content p {
    font-size: 1.7em;
    color: black;
    font-weight: 700;
    padding:2em;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 10px;

}

.nature-content h1 {
    font-size: 3em;
}

/*.heroes-content {
    background-image: url(Photos/Background-heroes.jpeg);
    background-size: cover;
    background-attachment: scroll;
}
*/
.heroes-content {
        background-image: url(Photos/comic-explosion-background.jpeg);
        background-size: cover;
        background-attachment: scroll;
        background-position: center
}


.text-heroes{
        margin-left: 5vw;
        margin-right: 5vw;
        margin-top: 3vw;
        margin-bottom: 3vw;
        overflow: scroll;
}

.text-heroes p {
        color: rgb(255, 255, 255);
        font-size: x-large;
        font-weight: 500;
        background-color: rgba(0, 0, 0, 0.5) ;
}


.index-page.video{
    margin-top: 5vh;
    margin-bottom: 5vh;
}

.video-content h1 {
    font-size: 2.5em;
    margin-top: 2em;
    margin-bottom: 2em;
}

.video-content h2 {
    font-size: 2em;
    margin-top: 1.75em;
    margin-bottom: 1.75em;
}

.video-content p {
    padding: 0 3em;
    font-size: 0.8em;
}

.photo-title {
    width: 100%;
    align-self: center;
    margin-top: -1.5em;
    margin-bottom: -1.85em;
    font-size: 1.7em;
}

.ff-josefin {
    font-family: 'Josefin Slab';
    font-weight: 500;
 }

 .heroes-font {
    font-family: heroesFont;
    font-size: 1.25em;
 }

.video-rebirth {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */

}

.video-rebirth iframe {
    position: absolute;
    top: 4vw;
    /*left: 0;*/
    bottom: 0;
    /*right: 0;*/
    width: 70%;
    height: 70%;
}

.video-gallery {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 3em;
}

.video-gallery iframe{
    height: auto;
    width: 80%;
    aspect-ratio: 16 / 9;
}

.small iframe
{
    width: 66%;
}

.video-piano {
    display: flex;
    align-items: center;
    align-self: center;
    justify-self: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    width: 85%;
    aspect-ratio: 16 / 9;
    margin: auto;
    padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */

}

.video-piano iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

.video-heroes {
    display: flex;
    align-items: center;
    align-self: center;
    justify-self: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16 / 9;
/*    padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */

}

.video-heroes iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}



.dossier-nature img {
   width: 100%;
   margin-bottom: -5px;
}

.dossier-personnel img{
   width: 100%;
}

.little-version {
    display: none;
}

.achat a{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: auto;
}

.achat img {
    width: 25%;
    transition-property: all;
    transition-duration: 500ms;
}

.achat:hover img{
    transform: rotateY(360deg);
}

.piano-content h1 {
    font-family: pianoFont;
    font-size: 2.5em;
    letter-spacing: .3em;
}

.piano-gallery {
    display: grid;
    grid-template-columns: 2fr 2fr 1fr 1fr 2fr;
    grid-template-rows: 0.8fr 1fr 0.75fr;
    gap: 5px;
}

.piano-gallery img {
    width : 100%; 
    height : auto;
}

.droite {
    position: absolute;
    top: 0;
    right: 3px;
    bottom: 0;
    opacity: 0;
}

.gauche {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
}

.bas-gauche {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 3px;
    opacity: 0;
}

.photobox {
    border: white solid;
    position: relative;
    transition-property: all;
    transition-timing-function: ease-in;
    transition-duration: 500ms;
}

.photobox:hover h3 {
    opacity: 1;
    transition: opacity 1s;
}

.photobox:hover {
    z-index: 2;
    transform:scale(1.01)
}

.vert1 {
    grid-row: 1/3;
}
.vert1:hover {
    z-index: 2;
    transform: scale(1.01) translate(2px, 0px);
}
.horiz1 {
    grid-column: 2/4;
}
.horiz2 {
    grid-column: 4/6;
}
.horiz3 {
    grid-column: 2/5;
}
.vert2 {
    grid-column: 5/6;
    grid-row: 2/4;
}
.horiz4 {
    grid-column: 1/3;
}
.horiz4:hover {
    z-index: 2;
    transform: scale(1.01) translate(3px, 0px);
}
.square {
    grid-column: 3/5;
}

.horizontal-gallery {
    /* max-width: 100vw; */
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    gap: 10px;
    padding: 10px;
    white-space: nowrap;
    margin: 10vw 0 20vw 0;
}

.horizontal-gallery img {
    max-width:100%;
    flex-shrink: 0;
    height: 50vw;
    object-fit: cover;
    scroll-snap-align: center;
    border: 2px solid white;
    
}

.smaller img{
    height: 30vw;
}

.ferber-gallery{
    /* background-color: white; */
    flex-grow: 1;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: space-around;
    gap: 4vw;
    /* padding: 1vw; */
    overflow: clip;
}

.ferber-gallery img{
    min-width: 100px;
    max-width: 100%;
    border: white solid;
    min-height: 150px;
    max-height: 300px;
    height: auto;
    width: auto;
    object-fit: contain;
}



.photo {
    display: block;
}

.text-heroes h1{

    font-family: heroesFont;
    font-size: 5em;
    color: black;
    text-shadow: -2px 0 white, 0 2px white, 2px 0 white, 0 -2px white;
/*    text-shadow: 1px 1px white;*/
}

.text-heroes h2{
    font-family: heroesFont;
    color: black;
    font-size: 2.5em;
    background-color: rgba(255, 255, 255, 0.7)
}

/*.text-heroes{
    margin-left: 28vw;
    margin-right: 28vw;
    margin-top: 15vw;
    margin-bottom: 10vw;
    overflow: scroll;
}

.text-heroes p{
    color: black;
}*/

.bandeau-presse img {
    width: 100%;
    margin-bottom: -5px;
}

.bandeau-presse h1 {
    width: 100%;
}

@font-face {
    font-family: pianoFont;
    src:url(Fonts/blippo.ttf);
}


.piano-font{
    font-family: pianoFont;
    font-size: 1.25em;
}

@font-face {
    font-family: glacialIndifference;
    src:url(Fonts/indiff.ttf);
}

.nature-font{
    font-family: glacialIndifference;
    font-size: 1.25em;
}

@font-face {
    font-family: heroesFont;
    src:url(Fonts/Laffayette_Comic_Pro.ttf);
}

.heroes-font {
    font-family: heroesFont;
    font-size: 1.25em;
}


.projets {
        display: flex;
        padding-top: 53px;
        padding-bottom: 52px;
        text-decoration: underline;
}

.deroul-projets{
    background-color: #181A1B;
}

.blog section {
    border-bottom: 4px ridge rgba(48, 48, 48, 0.6);
}

.crowdfunding img{
    width: 44vw;
}

.crowdfunding h1 {
    margin-top: 50px;
    font-size: 1.8em;
}

.crowdfunding p {
    font-size: 1.4em;
}



.voir-plus {
    display: inline-block;
    
    color: aqua;
    margin: 1em 0 -2em 0;
}

.tournee {
    flex-direction: column;
}

.tournee h1 {
    font-size: xx-large;
    margin-top: 90px;
    margin-bottom: 60px;
}

.fiche img {
    width: 100%;
}


@media screen and (max-width: 1440px) {
    header nav a {
        margin: 0px 4.5vw 0px 4.5vw;
        transition-property: all;
    }
}

@media screen and (max-width: 1300px) {
    header nav a {
        margin: 0px 4vw 0px 4vw;
        transition-property: all;
    }
}

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

    p {
        font-size: 0.9em
    }

    .video-content p {
        font-size: 0.7em;
    }

    /*.text-heroes{
        margin-left: 28vw;
        margin-right: 28vw;
        margin-top: 20vw;
        margin-bottom: 10vw;
        overflow: scroll;
    }*/

    .prez-logos {
        display: flex;
    }

    sidebar {
        display: none;
    }

    .photos-content.photos-gallery {
        max-width: 100%;
    }

    .presentation img {
        width: 50vw;
    }

    .title {
        display: none;
    }

    .logoPano {
        display: block;
    }

    .menu-deroulant.side:hover .cache {
        display: flex;
    }

    .menu-deroulant.side:active .cache {
        display: flex;
    }

    .cache .sidebar {
       display: flex;
       z-index: 1;
       position: fixed;
       top: 129px;
       right: 0px;
    }

    .nature {
        background-image: linear-gradient(90deg, rgba(2,0,36,0.7) 0%, rgba(9,121,26,0.7) 35%, rgba(0,212,255,0.7) 100%),
        url(Photos/background-nature2.png);
    }

    .nature:active {
        background: linear-gradient(90deg, rgba(2,0,36,0.7) 0%, rgba(6,77,17,0.7) 54%, rgba(1,120,144,0.7) 100%),
    url(Photos/background-nature2.png);
    }

    .piano {
        background-image: linear-gradient(90deg, rgba(0,0,0,0.8) 0%, rgba(82,84,121,0.8) 54%, rgba(255,255,255,0.8) 100%),
        url(Photos/background-piano2.png)
    }

    .piano:active {
        background: linear-gradient(90deg, rgba(0,0,0,0.8) 0%, rgba(46,47,70,0.8) 54%, rgba(101,101,101,0.8) 100%),
    url(Photos/background-piano2.png);
    }
    
    h1{
        text-shadow: none;
        text-decoration: underline;
        text-underline-offset: 0.4em;
    }

    .hr-lines:before {
        display: none;
    }

    .hr-lines:after {
        display: none;
    }


    header nav a {
        margin: 0px 5vw 0px 5vw;
    }
}


/* Nouvelles règles si la fenêtre fait au plus 1024px de large */
@media screen and (max-width: 1024px) {

    h3 {
        font-size: 0.8em;
    }

    p {
        font-size: 0.8em
    }

    .video-content p {
        font-size: 0.6em;
    }    

    main{
        flex-direction: column;
        max-width: 100vw;
    }

    aside{
        display: none;
    }


    .presentation {
        flex-direction: column;
    }

    .presentation img{
        max-width: 100vw;
    }

    .crowdfunding img{
        width: 100vw;
    }

    .presentation.pano {
        flex-direction: column-reverse;
    }

    .presentation.leo {
        flex-direction: column-reverse;
    }

    .presentation.pano img {
        width: 100%;
        height: auto;
        margin-bottom: 3em;
    }

    /*.presentation.pano p{
        margin-top: 100px;
    }*/

    .photo.left {
        display: flex;
        align-items: center;
        align-content: center;
        justify-content: center;
        justify-items: center;
    }

    .photo.right {
        display: flex;
        align-items: center;
        align-content: center;
        justify-content: center;
        justify-items: center;
    }

    .presentation.leo img {
        align-self: center;
        justify-items: center;
    }

    .text-heroes h1{
        font-size: 4em;
    }

    .text-heroes h2{
        font-size: 4em;
    }

    header nav a {
        margin: 0px 4vw 0px 4vw;
    }
   
}

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

    header nav a {
        margin: 0px 3.5vw 0px 3.5vw;
    }


}

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

    h3 {
        font-size: 0.8em;
    }

    p {
        font-size: 0.7em
    }

    .video-content p {
        font-size: 0.5em;
    }

    /*.text-heroes{
        margin-left: 5vw;
        margin-right: 5vw;
        margin-top: 3vw;
        margin-bottom: 3vw;
        overflow: scroll;
    }*/

    /*.text-heroes p {
        color: rgb(255, 255, 255);
        font-size: large;
        font-weight: 500;
        background-color: rgba(0, 0, 0, 0.5) ;
    }*/

    .four::before {
        left: -12vw;
    }

    .four::after {
        right: -12vw;
    }

    header .logos {
        display: none;
    }


    header nav a {
        margin: 0px 4vw 0px 4vw;
        font-size: 1em;
    }

    .home-button{
        display: none;
    }


    /* .bandeau {
        display: none;
    } */

    nav a {
        font-size: 2em;
    }

    footer nav a {
        color: goldenrod;
        font-size: 1em;
    }

    .dossier-nature.big-version {
        display: none;
    }

    .dossier-nature.little-version {
        display: block;
    }

    .ferber-gallery img{
        min-width: 50px;
        border: white solid;
        /* max-width: 380px; */
        min-height: 75px;
        max-height: 150px;
        height: auto;
        width: auto;
    }

    .photos-gallery img{
        min-width: 50px;
        border: white solid;
        /* max-width: 380px; */
        min-height: 75px;
        max-height: 150px;
        height: auto;
        width: auto;
    }

    .text-heroes h1{
        font-size: 3em;
    }

    .text-heroes h2{
        font-size: 2em;
    }

    footer nav a {
        font-size: 0.8em;
        color: goldenrod;
        margin: 0 0.8em;
    }
    
}

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

    header nav a {
        margin: 0px 3vw 0px 4vw;
    }

}

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

    header nav a {
        margin: 0px 1vw 0px 3vw;
    }

    .logoPano {
        margin-left: 2vw;
        margin-right: -1vw;
    }

    .heroes-content {
        background-size: auto;
    }

    .heroes-content p {
        font-size: medium;
    }

    .text-heroes h1{
        font-size: 2em;
    }

    .text-heroes h2{
        font-size: 1em;
    }

}

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

    header nav a {
        margin: 0px 0vw 0px 2vw;
    }

    .heroes-content p {
        font-size: small;
    }


}

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

    header nav a {
        margin: 0px 0vw 0px 1vw;
    }

}