/* brand box start --------------------*/
.brand-area {
    .th-container {
        --main-container: 1648px;
    }
}

.brand-box {
    width: 150px;
    height: 150px;
    overflow: hidden;
    margin: auto;
    position: relative;
    display: block;

    &:hover {
        a img {
            &.gray {

                opacity: 1;
                visibility: visible;
                transition: all 0.7s ease-in-out;
                transform: translateY(0%);

            }

            &.original {

                opacity: 0;
                visibility: hidden;
                transition: all 0.7s ease-in-out;
                transform: translateY(100%);
            }
        }
    }

    img {
        margin: 0 auto;
        transition: all 0.7s ease-in-out;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;

        &.gray {

            transition: all 0.3s ease-in-out;
            opacity: 0;
            visibility: hidden;
            transition: all 0.7s ease-in-out;
            transform: translateY(-100%);


        }

        &.original {

            transition: all 0.7s ease-in-out;
            transform: translateY(0%);
        }
    }
}

/* elements-sec  start*/
.elements-sec {
    .th-container {
        --main-container: 1744px;
    }
}

.elements-item {
    text-align: center;
    animation-duration: 1s;
    animation-fill-mode: both;

}

.moveFromTop {
    animation-name: moveFromTop
}

@keyframes moveFromTop {
    from {
        transform: translateY(-100%)
    }
}


/* matter js */
.tags-container > canvas {
    position: relative;
    top: -1px;
    left: -1px;
  }
  
  .tags-container {
    width: 100vw;
    height: 200px;
    margin-top: 0vw;
    overflow: hidden;
  }