.offer-list-container {
    position: relative;
    padding: 235px 100px 85px 115px;
    background-color: #F8F8F8;
}

.offer-job-text {
    font-family: 'Red Hat Display', sans-serif;
    font-weight: 900;
    font-size: 90px;
    font-weight: bold;
    padding-bottom: 80px;
    color: #2D2D2D;
}

.info-site-container {
    position: relative;
    margin-bottom: 40px;
}


@media only screen and (max-width: 1024px) {
    .info-site-container {
        display: none;
    }

    .offer-job-text {
        font-size: 40px;
    }

    .offer-list-container {
        position: relative;
        padding: 185px 100px 85px 115px;
        background-color: #F8F8F8;
    }
}

.info-site-container > a {
    color: #2D2D2D;
    text-decoration: none;
}

.info-site-container > a:first-child::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 127px;
    border: 1px solid #1CA9E7;
    width: 50px;
    transform: translate(0, -50%);
}

.info-site-container > a:last-child {
    padding-left: 100px;
}

.left-line {
    background-color: #FFFFFF;
}

.job-offer {
    list-style: none;
    min-height: 210px;
}

.job-offer-link {
    position: relative;
    display: flex;
    text-decoration: none;
    padding: 55px 40px 55px 40px;
    background-color: #FFFFFF;
    margin-bottom: 12px;
    border: 1px solid transparent;
}

.job-offer-link:hover {
    cursor: pointer;
    flex: 1;
    border: 1px solid #1CA9E7;
}

.job-title {
    flex: 1;
    color: #2D2D2D;
    font-family: 'Red Hat Display', sans-serif;
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 25px;
}

.job-description {
    flex: 1;
    display: flex;
    align-items: center;
    text-align: center;
    color: #8E8E8E;
}

.job-salary-b2b, .job-salary {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: #8E8E8E;
    font-weight: bold;
}

@keyframes show-arrow {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media only screen and (max-width: 1024px) {
    .offer-list-container {
        padding: 185px 40px 85px 40px;
    }
    .job-offer-link { 
        flex-wrap: wrap;
        padding: 37px 18px 0 18px;
    }

    .job-title , .job-description{
        justify-content: center;
        padding-bottom: 63px;
        flex: 1 100%;
    }

    .job-salary-b2b, .job-salary {
        justify-content: center;
        padding-bottom: 37px;
        flex: 1 100%;
    }
}

.add-animation-for-text {
    animation: full-size-text .2s linear;
    animation-fill-mode: forwards;
}

.remove-animation-for-text {
    animation: normal-size-text .2s linear;
    animation-fill-mode: forwards;
}

@keyframes full-size-text {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-150px);
    }
}

@keyframes normal-size-text {
    from {
        transform: translateX(-150px);
    }
    to {
        transform: translateX(0);
    }
}

@media only screen and (max-width: 1441px) {
    @keyframes full-size-text {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(-50px);
        }
    }
    
    @keyframes normal-size-text {
        from {
            transform: translateX(-50px);
        }
        to {
            transform: translateX(0);
        }
    }

    .job-title {
        font-size: 20px;
    }
}