#enotites {
    min-height: 500px;

    @media screen and (min-width: 992px) {
        .dropdown-list {
            display: none;
        }
    }
}

.enotites-img {
    width: 740px;
    max-height: 420px;
}

.line-wrapper {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: start;
}

.line-wrapper .line-container {
    width: 75%;
    height: 2px;
    background-color: #24354B;
    position: relative;
    transition: background-color 250ms, width 250ms;
    margin-left: -20px;
}

.line-wrapper .line-container .circle {
    width: 20px;
    height: 20px;
    background-color: #fff;
    border: 1px solid #000;
    border-radius: 50%;
    position: absolute;
    top: -9px;
    right: -20px;
    transition: background-color 250ms;
}

.line-wrapper.active .line-container {
    background-color: #a5acb5;
    width: 100%;
}

.line-wrapper.active .line-container .circle {
    background-color: #dde7ef;
}

.line-wrapper:hover .line-container {
    background-color: #a5acb5;
    width: 100%;
}

.line-wrapper:hover .line-container .circle {
    background-color: #dde7ef;
}

/* ------ Animation ------- */
@keyframes scaleFromLeft {
    0% {
        transform: scale(0.8) translateX(-100%);
        opacity: 0;
    }

    100% {
        transform: scale(1) translateX(0);
        opacity: 1;
    }
}

@keyframes slideFromRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.enotites-image-content.active {
    animation: scaleFromLeft 0.6s ease-out forwards;
}

.enotites-text-content.active {
    animation: slideFromRight 0.6s ease-out forwards;
}

.enotites-image-content,
.enotites-text-content {
    opacity: 0;
    transform: scale(0.8) translateX(-100%);
}

.enotites-image-content.active,
.enotites-text-content.active {
    opacity: 1;
    transform: scale(1) translateX(0);
    display: block;
}