
    .sottogallery p {
        color: #edf3ffff;
    }
    .sottogallery h1 {
         color: #707070;
    }
    .sottogallery h2 {
        color: #707070;
    }
    .sottogallery h3 {
        color: #707070;
    }
    .sottogallery h4 {
        color: #707070;
    }
    .sottogallery h5 {
        color: #707070;
    }
    .sottogallery h6 {
        color: #707070;
    }

    .sottogallery {
        min-height: 100vh;
        background-image: url(../img/background/background1.jpg);
    }
    .sottogallery .body {
        background: rgba( 31, 31, 31, 0.55 );
        box-shadow: 5px 6px 6px rgba( 112, 112, 112, 0.37 );
        backdrop-filter: blur( 4.5px );
        -webkit-backdrop-filter: blur( 5.0px );
        border-radius: 15px;
        border: 1px solid rgba( 112, 112, 112, 0.18 );
        margin-top: 12rem;
        padding-bottom: 4rem;
        text-align: center;
        margin-bottom: 8rem;
    }
    .sottogallery .body .title {
        padding: 4rem 0;
    }
    .sottogallery .body .description {
        padding: 1rem 4rem;
        text-align: center;
    }
    .sottogallery .body .rowContent {
        padding: 4rem;
        justify-content: center;
    }



    .sottogallery .hello {
          opacity: 1 !important;
        }
    .sottogallery .full {
          position: fixed;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          z-index: 1;
        }
    .sottogallery .full .content {
          background-color: rgba(0,0,0,0.75) !important;
          height: 100%;
          width: 100%;
          display: grid;
        }
    .sottogallery .full .content img {
          transform: translate3d(0, 0, 0);
          animation: zoomin 1s ease-in-out;
          -webkit-animation: zoomin 2s ease-in-out;
          max-width: 100vw;
          max-height: 90vh;
          margin: auto;
        }
    /* .sottogallery .byebye {
          opacity: 0;
          transition: 1s;
        }
    .sottogallery .byebye:hover {
          transform: scale(0.2) !important;
        } */
    .sottogallery .gallery {
          display: grid;
          grid-column-gap: 8px;
          grid-row-gap: 8px;
          grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
          grid-auto-rows: 8px;
        }
    .sottogallery .gallery img {
          max-width: 100%;
          border-radius: 8px;
          box-shadow: 0 0 16px #333;
          /* transition: all 1.5s ease; */
        }
    .sottogallery .gallery img:hover {
          box-shadow: 0 0 32px #333;
        }
    .sottogallery .gallery .content {
          padding: 4px;
        }
    .sottogallery .gallery .gallery-item {
          transition: grid-row-start 300ms linear;
          transition: transform 300ms ease;
          transition: all 0.5s ease;
          cursor: pointer;
        }
    .sottogallery .gallery .gallery-item:hover {
          transform: scale(1.025);
        }
        @media (max-width: 600px) {
    .sottogallery   .gallery {
            grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
          }
        }
        @media (max-width: 400px) {
    .sottogallery   .gallery {
            grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
          }
        }
        @-moz-keyframes zoomin {
            0% {
              max-width: 0vw;
              transform: rotate(-30deg);
              filter: blur(4px);
              opacity:0;
            }
            30% {
              filter: blur(4px);
              transform: rotate(-80deg);
              opacity: 1;
            }
          70% {
            max-width: 50%;
            transform: rotate(45deg);
          }
          100% {
            max-width: 100%;
            transform: rotate(0deg);
          }
        }
        @-webkit-keyframes zoomin {
            0% {
              max-width: 0vw;
              transform: rotate(-30deg);
              filter: blur(4px);
              opacity:0;
            }
            30% {
              filter: blur(4px);
              transform: rotate(-80deg);
              opacity: 1;
            }
          70% {
            max-width: 50%;
            transform: rotate(45deg);
          }
          100% {
            max-width: 100%;
            transform: rotate(0deg);
          }
        }
        @-o-keyframes zoomin {
        0% {
          max-width: 0vw;
          transform: rotate(-30deg);
          filter: blur(4px);
          opacity:0;
        }
        30% {
          filter: blur(4px);
          transform: rotate(-80deg);
          opacity: 1;
        }
          70% {
            max-width: 50%;
            transform: rotate(45deg);
          }
          100% {
            max-width: 100%;
            transform: rotate(0deg);
          }
        }
        @keyframes zoomin {
          0% {
            max-width: 0vw;
            transform: rotate(-30deg);
            filter: blur(4px);
            opacity:0;
          }
          30% {
            filter: blur(4px);
            transform: rotate(-80deg);
            opacity: 1;
          }
          70% {
            max-width: 50vw;
            transform: rotate(45deg);
          }
          100% {
            max-width: 100vw;
            transform: rotate(0deg);
          }
        }
