.container {
  padding: 0 4%;
}

/* GALERIE GESTALTUNG  ------------------------------------------------- */

    .abstand-o-u {
      margin: 30px 0;
    }

    .praxis-galerie {
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
      align-items: stretch;
    }

    .box {
      position:relative;
      margin:10px;
      height:50px;
    }

    .size1{
        display: inline-flex;
        width: 48%;
        height: auto;
    }

    .size1 img {width: 100%;}

    img.hover-shadow {
      transition: 0.3s;
    }

    .hover-shadow:hover {
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }


/* LIGHTBOX GESTALTUNG ----------------------------------------------------------- */

    

    /* Lightbox Hintergrund ----------------------------------- */
    .modal {
      display: none;
      position: fixed;
      z-index: 100;
      padding-top: 100px;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgba(0, 0, 0, 0.8);
      font-family: Helvetica, Arial, sans-serif;
      font-size: 16px;
    }

    /* Lightbox Content Box -------------------------------------*/
    .lb-content {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin: auto;
      padding: 0;
      width: 50%;
    }
    
    #bilder-div, #bildbeschreibung, #bild-control {
      width: 100%;
    }

    /* The Close Button -----------------------------------------*/
      .close {
        color: rgba(255, 255, 255,1.0);
        position: absolute;
        top: 10px;
        right: 25px;
        font-size: 35px;
        font-weight: bold;
      }

      .close:hover,
      .close:focus {
        color: #999;
        text-decoration: none;
        cursor: pointer;
      }

    /* Lightbox Bilder -------------------------------------------- */
        .myImages {
          display: none;
        }

        /* Next & previous buttons ---------------------------*/
        .lb-prev,
        .lb-next {
          cursor: pointer;
          position: absolute;
          top: 35%;
          padding: 16px;
          color: rgba(255, 255, 255,1.0);
          font-weight: bold;
          font-size: 25px;
          transition: 0.6s ease;
          border-radius: 0 3px 3px 0;
          user-select: none;
          -webkit-user-select: none;
        }

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

        /* On hover, add a black background color with a little bit see-through */
        .lb-prev:hover,
        .lb-next:hover {
          background-color: rgba(0, 0, 0, 0.8);
        }

        /* Nummerntext --------------------------------------*/
        .numbertext {
          color: rgba(255, 255, 255,1.0);
          font-size: 12px;
          padding: 8px 0 4px;
          position: relative;
          top: 0;
        }

    /* Bildbeschriftung ---------------------------------------*/
      .caption-container {
        text-align: left;
        background-color: transparent;
        padding: 1% 0 3%;
        color: rgba(255, 255, 255,1.0);
      }

      .caption-container p {margin: 0;}

    /* IMAGE CONTROL LEISTE ------------------------------------*/

      #bild-control {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
      }

      .bildbox {
        width: 16%;
      }

      .bildbox img {width: 100%;}

      img.demo {
        opacity: 0.6;
      }

      .active,
      .demo:hover {
        opacity: 1;
      }

      /* ------------------------------------------------------------------------------------------------------------ */

/* @media */


@media screen and (max-width:1280px) {
  .size1 {
      width: 46%;}

}

@media screen and (max-width:1024px) {
  .lb-content {
      width: 85%;}

}

@media screen and (max-width:680px) {
  .size1 {
      width: 100%;}

}