@media only screen and (min-width: 3840px) and (min-height: 2159px) {

    section .gallery-menu .gallery-menu-ul {
        width: 2500px !important;
        height: 135px !important;
        margin-top: 20px;
        margin-bottom: 70px;
    }

    section .gallery-menu .gallery-menu-ul .gallery-menu-li {
        width: 570px !important;
        height: 92px !important;
        margin: 0px 20px;
        border: 2px solid #eee;
        border-radius: 45px;
    }

    section .gallery-menu .gallery-menu-ul a {
        display: flex;
        font-size: 50px !important;
        color: white;
        text-decoration: none;
    }

    /*****************gallery container*************************/

    .galleryBox {
        position: relative;
        /* width: 130px;
        height: 130px; */
        width: 380px !important;
        height: 380px !important;
        transform-style: preserve-3d;
        /* background-color: darkorange; */
        animation: animate 20s linear infinite;
        animation-play-state: running;
    }

    @keyframes animate {
        0% {
            transform: perspective(1000px) rotateY(0deg);
        }

        100% {
            transform: perspective(1000px) rotateY(360deg);
        }
    }

    .galleryBox:hover {
        animation-play-state: paused;
    }

    .galleryBox span {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform-origin: center;
        transform-style: preserve-3d;
        transform: rotateY(calc(var(--i) * 70deg)) translatez(520px) !important;
        /* transform: rotateY(calc(var(--i) * 70deg)) translatez(320px); */
        -webkit-box-reflect: below 0px linear-gradient(transparent, transparent, #0005);
    }

    .galleryBox span img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


}

@media only screen and (min-width: 2560px) and (min-height: 1439px) {

    .gallery-menu .gallery-menu-ul {
        width: 1800px !important;
        height: 85px !important;
        margin-top: 20px;
        margin-bottom: 55px;
    }

    .gallery-menu .gallery-menu-ul .gallery-menu-li {
        width: 410px !important;
        height: 62px !important;
        margin: 0px 10px;

    }

    .gallery-menu .gallery-menu-ul a {
        display: flex;
        font-size: 32px !important;
        color: white;
        text-decoration: none;
    }


    /*****************gallery container*************************/

    .galleryBox {
        position: relative;
        /* width: 130px;
    height: 130px; */
        width: 300px;
        height: 300px;
        transform-style: preserve-3d;
        /* background-color: darkorange; */
        animation: animate 20s linear infinite;
        animation-play-state: running;
    }

    @keyframes animate {
        0% {
            transform: perspective(1000px) rotateY(0deg);
        }

        100% {
            transform: perspective(1000px) rotateY(360deg);
        }
    }

    .galleryBox:hover {
        animation-play-state: paused;
    }

    .galleryBox span {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform-origin: center;
        transform-style: preserve-3d;
        transform: rotateY(calc(var(--i) * 70deg)) translatez(400px);
        /* transform: rotateY(calc(var(--i) * 70deg)) translatez(320px); */
        -webkit-box-reflect: below 0px linear-gradient(transparent, transparent, #0005);
    }

    .galleryBox span img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


}

@media only screen and (min-width: 1920px) {

    .gallery-menu .gallery-menu-ul {
        width: 1300px;
        height: 47px;
        margin-bottom: 20px;
    }

    .gallery-menu .gallery-menu-ul .gallery-menu-li {
        width: 210px;
        height: 30px;
    }

    .gallery-menu .gallery-menu-ul a {
        display: flex;
        font-size: 16px;
        color: white;
        text-decoration: none;
    }
}

@media only screen and (min-width: 768px) and (max-width: 992px) {
    #gallery-title .gallery-title {
        width: 700px;
        height: 1.6em;
        font-size: 18px;
    }

    .gallery-menu .gallery-menu-ul {
        width: 700px;
    }

    /***************************gallery container********************************/
    .galleryBox span {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform-origin: center;
        transform-style: preserve-3d;
        /* transform: rotateY(calc(var(--i) * 70deg)) translatez(400px); */
        transform: rotateY(calc(var(--i) * 70deg)) translatez(300px);
        -webkit-box-reflect: below 0px linear-gradient(transparent, transparent, #0005);
    }
}

@media only screen and (min-width: 640px) and (max-width: 768px) {
    section {
        transform: translateY(140px);
    }

    .gallery-menu {
        width: 100%;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        text-align: center;
        margin: 14px 0px 20px 0px;
    }

    .gallery-menu .gallery-menu-ul .gallery-menu-li {
        height: 22px;
    }

    #gallery-title .gallery-title {
        width: 580px;
        height: 1.6em;
        font-size: 18px;
    }

    /***************************gallery container********************************/
    .galleryBox span {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform-origin: center;
        transform-style: preserve-3d;
        /* transform: rotateY(calc(var(--i) * 70deg)) translatez(400px); */
        transform: rotateY(calc(var(--i) * 70deg)) translatez(280px);
        -webkit-box-reflect: below 0px linear-gradient(transparent, transparent, #0005);
    }
  
}

@media only screen and (min-width: 480px) and (max-width: 640px) {
  
    section {
        transform: translateY(140px);
    }

    .gallery-menu {
        margin: 14px 0px 20px 0px;
    }

    #gallery-title .gallery-title {
        width: 425px;
        height: 1.6em;
        font-size: 16px;
    }

    /***************************gallery container********************************/
    .galleryBox {
        position: relative;
        width: 100px;
        height: 100px;
        transform-style: preserve-3d;
        animation: animate 20s linear infinite;
        animation-play-state: running;
    }

    @keyframes animate {
        0% {
            transform: perspective(1000px) rotateY(0deg);
        }

        100% {
            transform: perspective(1000px) rotateY(360deg);
        }
    }

    .galleryBox span {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform-origin: center;
        transform-style: preserve-3d;
        /* transform: rotateY(calc(var(--i) * 70deg)) translatez(400px); */
        transform: rotateY(calc(var(--i) * 70deg)) translatez(242px);
        -webkit-box-reflect: below 0px linear-gradient(transparent, transparent, #0005);
    }
}

@media only screen and (min-width: 480px) and (max-width: 545px) {

    section {
        transform: translateY(160px);
    }

    .gallery-menu {
        margin: 14px 0px 20px 0px;
    }

    
}

@media only screen and (min-width: 380px) and (max-width: 479px) {

    section {
        transform: translateY(170px);
    }

    .gallery-menu {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        margin: 0px 0px 20px 0px;
    }

    .gallery-menu .gallery-menu-ul {
        /* width: 826px; */
        width: 50%;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin: 0;
        padding: 0;
        list-style: none;
        /* background: linear-gradient(to right, rgba(71, 70, 69, 0), rgba(71, 70, 69, 0.2), rgba(71, 70, 69, 0.4), rgba(71, 70, 69, 0.8), rgba(71, 70, 69, 1), rgba(71, 70, 69, 0.8), rgba(71, 70, 69, 0.4), rgba(71, 70, 69, 0.2), rgba(71, 70, 69, 0)); */
        color: white;
        background: transparent;
        /* background: -webkit-radial-gradient(center, ellipse cover, rgba(181, 189, 200, 1) 0%, rgba(130, 140, 149, 1) 36%, rgba(40, 52, 59, 1) 100%); */
        /* Chrome10-25,Safari5.1-6 */
    }

    /***************************gallery container********************************/
    .galleryBox {
        position: relative;
        width: 100px;
        height: 100px;
        transform-style: preserve-3d;
        animation: animate 20s linear infinite;
        animation-play-state: running;
    }

    @keyframes animate {
        0% {
            transform: perspective(1000px) rotateY(0deg);
        }

        100% {
            transform: perspective(1000px) rotateY(360deg);
        }
    }

    .galleryBox span {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform-origin: center;
        transform-style: preserve-3d;
        /* transform: rotateY(calc(var(--i) * 70deg)) translatez(400px); */
        transform: rotateY(calc(var(--i) * 70deg)) translatez(170px);
        -webkit-box-reflect: below 0px linear-gradient(transparent, transparent, #0005);
    }

    .galleryBox span img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

@media only screen and (min-width: 0px) and (max-width: 379px) {

    section {
        transform: translateY(230px);
    }

    .gallery-menu {
            width: 100%;
            height: auto;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            margin: 0px 0px 20px 0px;
        }
   
        .gallery-menu .gallery-menu-ul {
            /* width: 826px; */
            width: 50%;
            height: auto;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            margin: 0;
            padding: 0;
            list-style: none;
            /* background: linear-gradient(to right, rgba(71, 70, 69, 0), rgba(71, 70, 69, 0.2), rgba(71, 70, 69, 0.4), rgba(71, 70, 69, 0.8), rgba(71, 70, 69, 1), rgba(71, 70, 69, 0.8), rgba(71, 70, 69, 0.4), rgba(71, 70, 69, 0.2), rgba(71, 70, 69, 0)); */
            /* background: -webkit-radial-gradient(center, ellipse cover, rgba(181, 189, 200, 1) 0%, rgba(130, 140, 149, 1) 36%, rgba(40, 52, 59, 1) 100%); */
            /* Chrome10-25,Safari5.1-6 */
            color: white;
            background: transparent;
        }

    /***************************gallery container********************************/
    .galleryBox {
        position: relative;
        top: -50px;
        width: 100px;
        height: 100px;
        transform-style: preserve-3d;
        animation: animate 20s linear infinite;
        animation-play-state: running;
    }

    @keyframes animate {
        0% {
            transform: perspective(1000px) rotateY(0deg);
        }

        100% {
            transform: perspective(1000px) rotateY(360deg);
        }
    }

    .galleryBox span {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform-origin: center;
        transform-style: preserve-3d;
        transform: rotateY(calc(var(--i) * 70deg)) translatez(100px);
        -webkit-box-reflect: below 0px linear-gradient(transparent, transparent, #0005);
    }

    .galleryBox span img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

}