/****************************
* JOBS
****************************/

.container.jobs {
    width: 100%;
    height: 100%;
}

.jobs .background {
    position: absolute;
    height: 100%;
    width: 100%;
    background: url("../img/jobs_bg.jpg") no-repeat center;
    background-size: cover;
}

.jobs .content-container {
    position: relative;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.jobs .description {
    position: absolute;
    left: 0;
    top: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #ffffff;

    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

.jobs .description.scroll {
    top: 0;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}

.jobs .marker {
    width: 365px;
    position: absolute;
    right: 0;
    bottom: 10px;
}

.jobs .marker.scroll {
    top: 20px;
    bottom: auto;
}

.jobs .marker .item {
    width: 365px;
    position: absolute;
    right: 0;
    text-align: right;
}

.jobs .marker .item a {
    text-transform: uppercase;
    color: #ffffff;
    text-decoration: none;
    padding: 10px;
}

.jobs .item-wrapper0 {
    position: relative;
    height: 100px;
}

.jobs .marker .marker-item0 {
    height: 100px;
    width: 230px;
    background: url("../img/marker_jobs_1.png") no-repeat;
    background-size: 100%;
}

.jobs .marker .marker-item0 .text {
    margin-top: 28px;
    -webkit-transform: rotate(6deg);
    -moz-transform: rotate(6deg);
    -o-transform: rotate(6deg);
    transform: rotate(6deg);
}

.jobs .item-wrapper1 {
    position: relative;
    height: 70px;
}

.jobs .marker .marker-item1 {
    height: 100px;
    width: 210px;
    background: url("../img/marker_jobs_2.png") no-repeat;
    background-size: 100%;
}

.jobs .marker .marker-item1 .text {
    margin-top: 15px;

    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    transform: rotate(3deg);
}

.jobs .marker .marker-item1 a {
    color: #a9191d;
    padding-right: 0;
}

.jobs .marker .marker-item1 .text{
    margin-right: 10px;
}

.jobs .marker .marker-item2 #marker-item-id-1515, .jobs .marker .marker-item2 #marker-item-id-1224{
    margin-top: 13px;
    margin-right: 10px;
}

.jobs .marker .marker-item2 #marker-item-id-1515 a, .jobs .marker .marker-item2 #marker-item-id-1224 a{
    padding-right: 0;
}

.jobs .marker .marker-item0 #marker-item-id-1523, .jobs .marker .marker-item0 #marker-item-id-1431{
    margin-right: 10px;
}

.jobs .marker .marker-item0 #marker-item-id-1523 a, .jobs .marker .marker-item0 #marker-item-id-1431 a{
    padding-right: 0;
} 

.jobs .marker .marker-item0 #marker-item-id-1517 a{
    padding-right: 7px;
}
.jobs .marker .marker-item0 #marker-item-id-536 {
    margin-top: 36px;
}
.jobs .item-wrapper2 {
    position: relative;
    height: 80px;
}

.jobs .marker .marker-item2 {
    height: 87px;
    width: 198px;
    background: url("../img/marker_jobs_3.png") no-repeat;
    background-size: 100%;
}

.jobs .marker .marker-item2 .text {
    margin-top: 25px;

    -webkit-transform: rotate(-2deg);
    -moz-transform: rotate(-2deg);
    -o-transform: rotate(-2deg);
    transform: rotate(-2deg);
}

/* 24" ---------------------------------------------------------------------------------------------------------- */
/*2.560 x 1.600 Pixel*/
@media (max-width: 1920px) {

}

/* 15" ---------------------------------------------------------------------------------------------------------- */
/*2.880 x 1.800 Pixel*/
@media (max-width: 1440px) {

}

/* 13" ---------------------------------------------------------------------------------------------------------- */
@media (max-width: 1325px) {

}

/* IPad Portrait ------------------------------------------------------------------------------------------------ */
@media all and (max-width: 860px ) {

    .jobs .description {
        width: 80%;
        padding: 50px 7%;
        position: relative;
        top: 0;

        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    .jobs .marker {
        position: relative;
        top: 20px;
        float: right;
    }

    .jobs .content-container {
        background: #000000;
    }

    .jobs .background {
        position: relative;
        width: 100%;
        height: 600px;
    }

    .jobs .description {
        width: 86%;
        padding: 25px 7%;
    }
}

/* IPhone Portrait ---------------------------------------------------------------------------------------------- */
@media (max-width: 560px) {
    .jobs .background {
        position: relative;
        width: 100%;
        height: 300px;
    }
}