body {
    font-family: Arial, sans-serif;
}

/* job */
.container {
    width: 100%;
    padding: 10px;
}
.div_jobs_box {
    width: 95%;
    list-style-type: none;
}
.a_job { 
    text-decoration: none;
    color: inherit;
}
.hr_tag {
    width: 100%;
}
.p_job_count {
    width: 95%;
    text-align: right;
}

.div_title {
    width: 100%
}
/* job end */

/* menu button */
.menu_button {
    display: inline-block;
    cursor: pointer;
    position: fixed;
    top: 10px;
    right: 10px;
}

ul {
    list-style-type: none;
}

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;
}

/* Rotate first bar */
.change .bar1 {
    transform: translate(0, 11px) rotate(-45deg);
}

/* Fade out the second bar */
.change .bar2 {
    opacity: 0;
}

/* Rotate last bar */
.change .bar3 {
    transform: translate(0, -11px) rotate(45deg);
}
/* menu button end */

.header_top_class {
    position: fixed;
    width: 100%;
    z-index: 100;
    background-color: white;
}

.header_nav_class {
    float: right;
    width: 25%;
}

/* Styles for PC: screens wider than 1024px */
@media (min-width: 1024px) {
    .div_company_name {
        width: 50%;
        text-decoration: none;
    }
    .div_job_category {
        width: 50%;
    }
    .div_job_name {
        width: 100%;
    }
    .div_job_url {
        width: 10%;
        float: right;
    }
}


/* Styles for smartphones: screens less than 600px */
@media (min-width: 600px) and (max-width: 1023px) {
    .div_company_name {
        width: 100%;
    }
    .div_job_category {
        width: 100%;
    }
    .div_job_name {
        width: 100%;
    }
    .div_job_url {
        width: 10%;
        float: right;
    }
}

/* Styles for smartphones: screens less than 600px */
@media (max-width: 599px) {
    .div_company_name {
        width: 100%;
    }
    .div_job_category {
        width: 100%;
    }
    .div_job_name {
        width: 100%;
    }
    .div_job_url {
        width: 10%;
        float: right;
    }
}