/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
       #map {
        height: 100%;
        width: 100%;
        margin: 0 auto;
        display: flex;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      

      }
      
      /* Optional: Makes the sample page fill the window. */
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
        background-color: white;
        position: relative;
        z-index: -1;
    
        
      }
      
      /*
      #pano {
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0%;
        left: 0%;
    
        


            }*/
             
      #pano {
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 0;
            }

      .anim_pano {
        position: relative;
        animation-name: grey;
        animation-duration: 5s;
        
      }
      @keyframes grey {
        0% {filter: grayscale(0%)}
       
        50% {filter: grayscale(100%);} 
        
        100% {filter: grayscale(0%)}
      }
      #cadre {
        position: absolute;
        top: 0%;
        left: 0%;
        width: 40%;
        height: 100%;
        padding: 0%;
        padding-left: 2%;
        padding-right: 0%;
        margin: 0%;
        justify-content: center;
        z-index: 2;
      }
      
      #fond {
        position: absolute;
        background: linear-gradient(to left, transparent, black);
        padding: 0%;
        padding-left: 0;
        padding-right: 0;
        width: 100%;
        height: 100%;
        opacity: 50%;
        margin: 0%;
        justify-content: center;
        z-index: 1;
      }

      #titre {
      
        font-family: akzident_ex;
        font-size: 4em;
        display: flex;
        justify-content: center;
        position: relative;
        margin-top: 7%;
        margin-left: 5%;
        margin-bottom: 0%;
        color: white;
        z-index: 2;
      }
      #texte {
        font-family: akzident;
        font-weight: 100;
        margin-left: 5%;
        margin-right: 25%;
        margin-top: 5%;
        margin-bottom: 0%;
        padding-bottom: 0%;
        font-size: 30px;
        color: white;
      
        justify-content: center;
        position: relative;
        z-index: 2;
        top: 0%;
      }
      @font-face {
        font-family: akzident_ex;
        src: url(AkzidenzGrotesk-Extended.otf);
      }
      @font-face {
        font-family: akzident;
        src: url(AkzidenzGrotesk-Regular.otf);
      }

      
      
      .anim {
        opacity: 100%;
        animation-name: fade;
        animation-duration: 10s;
        animation-iteration-count: 1;
        position: relative;
        z-index: -10;
        top: 0%;
        background-image: url( "photo_marolles.jpg");
        background-repeat:no-repeat;
        background-size: cover;
        height: 100%;
        width: 100%;
        

      }
      @keyframes fade {
        0% {opacity: 100%;z-index: 1;}
        70% {opacity: 100%;}
        90%{opacity: 0%;z-index:1;}
        100%{opacity: 0%;z-index: -10;}
        
        
      }