.container
     {
         display: block; max-width: 100%;  max-height:100vh; margin:auto;  height:100%;
     }

    /* Make the image responsive */
    .container img
     {
          max-width: 100%;  max-height:100vh;  margin:auto;
          position: absolute; top: 50%; left: 50%;  transform: translate(-50%, -50%);
     }
    /* display: block; max-width: 100%;  max-height:100vh; margin:auto; vertical-align: middle; */
    /* Style the button and place it in the middle of the container/image */

    .top-left {  position: absolute;
                       top: 0px;
                       font-size: 1.0rem;
                       color:white;
                       left: 10px;
                       background-color: #888;
                       width: auto;
                       overflow-wrap: break-word;

                    }

        .bottom-left     {
                  position: absolute;
                   bottom: 15px;
                   font-size: 0.7rem;
                   color:white;
                   left: 10px;
                   /* background-color: #888;*/
                   width: 20%;
                   overflow-wrap: break-word;
                  }

      .video {    
                  position: absolute;
                  top: 50%;
                  left: 50%;
                 /* -ms-transform: translateX(-50%) translateY(-50%);
                  -webkit-transform: translate(-50%,-50%);*/
                  transform: translate(-50%,-50%);
              }


     .overlay {    position: absolute;
                   font-size: 1.0rem;
                   color:white;
                   background-color:rgba(0, 0, 0, 0.4);
                   width: 50%;
                   height: auto;
                   overflow-wrap: break-word;
                   bottom: 0px;
                   left: 50%;
                   margin-right: -50%;
                   transform: translate(-50%, -50%);
                   text-align: center;
              }
              
              div.overlay A { font-size: 1.0rem;
                       color:cyan;
                       text-decoration: none;
                       text-align: center;
                     }
       div.overlay P { font-size: 1.0rem;
                       color:white;
                       text-align: center;
                     }
        div.overlay BR { font-size: 1.0rem;
                       color:white;
                       text-align: center;
                     }


     .imagename { color: #eddddd; }
     .imagedesc { color: #ffffff; font-size: 1.0rem;font-style: italic; }

    .container .arrowleft
     {
        position: absolute; top:  50%;
        transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          background-color: #000;
          color: white;
          font-size: 4.0rem;
          padding: 4px 4px;
          border: none;
          cursor: pointer;
          border-radius: 5px;
          left: 8%;
    }
    .container .arrowright
     {
        position: absolute; top:  50%;
        transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          background-color: #000;
          color: white;
          font-size: 4.0rem;
          border: none;
          cursor: pointer;
          border-radius: 5px;
          right:0;
    }
    .container .close
     {
        position: absolute; top: 4%;
        transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          background-color: #000;
          background-repeat:no-repeat;
          color: white;
          font-size: 3.0rem;
          padding: 12px 10px;
          border: none;
          cursor: pointer;
          border-radius: 5px;
          right:0;
    }
    
    .container .arrowleft:hover   {background-color:grey; font-size:4.0rem; }
    .container .arrowright:hover  {background-color:grey; font-size:4.0rem; }
    .container .close:hover       {background-color:grey; font-size:3.0rem; }