* {
        box-sizing: border-box;
    }


    .main__images-container::-webkit-scrollbar {
        display: none;
    }

    .body--overflow {
        overflow: hidden;
    }

    .hero-image {
        background-image: url(../img/heroimgflipped1.jpg);
        background-repeat: no-repeat;
        background-position-x: center;
        background-size: cover;
        display: flex;
        height: 28rem;
        width: 100%;
    }

    .hero-image__text-container {
        margin: auto;
        width: 70%;
        display: flex;
        flex-wrap: wrap;
    }
    .hero-image__heading {
        color: white;
        font-family: kodchasanreg;
        font-size: 48px;
        width: 100%;
    }

    .hero-image__heading span {
        margin-left: 35px;
        position: relative;
    }

    .hero-image__icon {
        bottom: 0;
        height: auto;
        margin-top: auto;
        margin-bottom: auto;
        position: absolute;
        top: 0;
        left: -35px;
        width: 20px;
    } 

    .main {
        background-color: white;
        width: 70%;
        height: auto;
        margin: auto;
        padding-top: 5%;
        padding-bottom: 5%;
    }

    .main__jobs-container {
        display: flex;
        flex-wrap: wrap;
        height: 13rem;
        margin: auto;
        width: 100%;
    }

    .main__jobs-container-heading {
        margin: 0;
        font-family: kodchasanreg;
        font-size: 36px;
        width: 100%;
    }

    .main__jobs-container-description {
        display: block;
        font-family: montserratregular;
        text-align: center;
    }

    .main__orange-stripe-decoration {
        background-color: #FC7707;
        display: block;
        height: 10px;
        left: -100px;
        position: absolute;
        top: 10px;
        width: 75px;
     }

    .main__jobs-container:nth-of-type(2),
    .main__jobs-container:nth-of-type(3),
    .main__jobs-container:nth-of-type(4)

    {
        margin-top: 5%;
    }

    .main__jobs-container:nth-of-type(2) .main__images-container,
    .main__jobs-container:nth-of-type(4) .main__images-container {
        justify-content: left;
        justify-content: start;
    }

    .main__jobs-container:nth-of-type(1) .main__images-container,
    .main__jobs-container:nth-of-type(3) .main__images-container {
        justify-content: right;
        justify-content: end;
        justify-content: flex-end;
    }


    .main__images-container {
        width: 58%;
        height: 13rem;
        display: flex;
        position: relative;
        z-index: 1;
    }

    .main__image {
        cursor: pointer;
        display: block;
        height: auto;
        object-fit: contain;
        height: 100%
    }

    .main__orange-button {
        margin-top: 20px;
        background-color: #FC7707;
        overflow: hidden;
        display: flex;
        cursor: pointer;
    }

    .main__mobile-orange-button {
        background-color: #FC7707;
        overflow: hidden;
        display: flex;
        margin: 1rem auto auto auto;
        cursor: pointer;
        width: 350px;
        height: 45px;
    }

    .main__jobs-container-title {
        width: 42%;
        height: auto;
        overflow: hidden;
        position: relative;
        z-index: 0;
    }

    .main__jobs-container-description {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .main__jobs-container:nth-of-type(2) .main__jobs-container-heading,
    .main__jobs-container:nth-of-type(4) .main__jobs-container-heading {
        width: 100%;
    }

    .main__orange-button--dimensions {
        width: 70px;
        height: 20px;
        transition: 0.5s;
        transition-delay: 0.5s;
    }

    .main__jobs-container-title:hover .main__orange-button--dimensions {
        width: 200px;
        height: 60px;
        transition: 0.5s;
    }

    .main__orange-button-text {
        color: white;
        font-family: kodchasanbold;
        font-size: 1rem;
        margin: auto;
    }

    .main__jobs-container-title:hover  .main__orange-button-text--opacity {
        opacity: 1;
        transition: 0.5s;
        transition-delay: 0.5s;
    }

    .main__orange-button-text--opacity {
        opacity: 0;
        transition: 0.5s;
    }

    .main__orange-button-icon {
        width: 1rem;
        height: auto;
    }

    .main__orange-button-icon--rotated{
        transform: rotateY(-180deg);
    }

    .main__orange-button-icon--display {
        display: none;
    }

    .main__jobs-container--bg-opened {
        background-image: linear-gradient(to bottom, #3238400c, #3238400c);
        background-repeat: no-repeat;
        background-size: 600px 400px;
        transition: 0.5s;
    }

    .main__jobs-container--bg-position {
        background-position: top right;
    }

    .main__jobs-container--bg-closed {
        background-image: linear-gradient(to bottom, #3238400c, #3238400c);
        background-repeat: no-repeat;
        background-size: 0px 0px;
        transition: 0.5s;
        transition-delay: 0.5s;
    }


@media only screen and (min-width: 1080px) {

    .main__jobs-container-description {
        display: none;
    }

    .main__orange-stripe-decoration {
        display: none;
     }

     .main__mobile-orange-button {
        display: none;
    }

    .main__jobs-container:nth-of-type(2) .main__orange-button,
    .main__jobs-container:nth-of-type(4) .main__orange-button {
        float: right;
    }

    .main__jobs-container:nth-of-type(2) .main__jobs-container-heading,
    .main__jobs-container:nth-of-type(4) .main__jobs-container-heading {
        float: right;
        text-align: right;
    }

}

@media only screen and (max-width: 1536px) {

    .hero-image__text-container {
        width: 80%;
    }

    .main {
        width: 80%;
    }

    .main__jobs-container {
        height: 11rem;
    }

    .main__jobs-container-heading {
        font-size: 26px;
    }

    .main__images-container {
        height: 11rem;
    }

    .main__jobs-container:nth-of-type(1) .main__images-container,
    .main__jobs-container:nth-of-type(3) .main__images-container {
        flex-grow: 1;
    }

    .main__jobs-container:nth-of-type(2) .main__images-container,
    .main__jobs-container:nth-of-type(4) .main__images-container {
        width: 42%;
    }

    .main__jobs-container:nth-of-type(2) .main__jobs-container-title,
    .main__jobs-container:nth-of-type(4) .main__jobs-container-title {
        width: 58%;
    }

    .main__jobs-container:nth-of-type(1) .main__jobs-container-title,
    .main__jobs-container:nth-of-type(3) .main__jobs-container-title {
        flex-grow: 10;
    }

    .main__jobs-container-title:hover .main__orange-button--dimensions {
        width: 150px;
        height: 45px;
    }

    .main__orange-button-text {
        font-size: 0.75rem;
    }

    .main__orange-button-icon {
        width: 10px;
    }
}

@media only screen and (max-width: 1080px) {

    .hero-image {
        background-image: url(../img/heroimgflipped2.jpg);
    }

    .hero-image__text-container {
        width: 90%;
    }

    .hero-image__heading {
        font-size: 2.25rem;
        width: 100%;
    }

    .main {
        width: 90%;
    }

    .main__jobs-container {
        height: auto;
        padding: 2rem 0 2rem 0;
    }

    .main__jobs-container:nth-of-type(2), .main__jobs-container:nth-of-type(4) {
        background-color: #F3F3F3;
    }

    .main__jobs-container-heading {
        display: flex;
        margin: 0;
        font-family: kodchasanreg;
        font-size: 1.5rem;
        margin-bottom: 1rem;
        position: relative;
        text-align: center;
        width: 100%;
    }

    .main__jobs-container-heading-text {
        position: relative;
        margin: auto;
    }

    .main__jobs-container-description,
    .main__orange-stripe-decoration {
        display: block;
     }
    

    .main__jobs-container:nth-of-type(2) .main__jobs-container-heading,
    .main__jobs-container:nth-of-type(4) .main__jobs-container-heading {
        text-align: center;
    }

    .main__jobs-container:nth-of-type(2) .main__mobile-orange-button,
    .main__jobs-container:nth-of-type(4) .main__mobile-orange-button {
        order: 3;
    }


    .main__jobs-container:nth-of-type(2) .main__images-container,
    .main__jobs-container:nth-of-type(4) .main__images-container {
        justify-content: left;
        justify-content: start;
        order: 2;
        width: 100%;
    }

    .main__jobs-container:nth-of-type(2) .main__orange-button,
    .main__jobs-container:nth-of-type(4) .main__orange-button,
    .main__jobs-container:nth-of-type(2) .main__jobs-container-heading,
    .main__jobs-container:nth-of-type(4) .main__jobs-container-heading
    {
        float: none
    }

    .main__jobs-container:nth-of-type(1) .main__images-container,
    .main__jobs-container:nth-of-type(3) .main__images-container {
        justify-content: left;
        justify-content: start;
        width: 100%;
    }
    .main__jobs-container:nth-of-type(2) .main__jobs-container-title,
    .main__jobs-container:nth-of-type(4) .main__jobs-container-title {
        width: 100%;
        order: 1;
    }

    .main__images-container {
        height: 18rem;
        display: flex;
        justify-content: left;
        margin-top: 2rem;
        scrollbar-width: none;
        overflow-y: hidden;
        overflow-x: scroll;
        width: 100%;
    }

    .main__image {
        cursor: pointer;
        display: block;
        height: auto;
        object-fit: contain;
        height: 100%;
        margin: 0.25rem;
    }

    .main__orange-button {
        display: none;
    }

    .main__mobile-orange-button {
        display: flex;
    }

    .main__jobs-container-title {
        width: 100%;
    }

    .main__orange-button-text {
        opacity: 1;
    }

    .main__jobs-container--bg-opened {
        background-size: 0 0;
    }
}

@media only screen and (max-width: 768px) {

    .hero-image {
        background-image: url(../img/heroimg768.jpg);
        background-position: left;
    }

    .hero-image__text-container {
        width: 90%;
    }

    .hero-image__heading {
        font-size: 30px;
        margin: auto 0 30px auto;
        text-align: center;
        width: 100%;
    }

    .hero-image__heading span {
        margin-left: 0;
    }

    .hero-image__heading .lang--display-active {
        display: block;
    }

    .hero-image__heading-title-2 {
        margin-top: 2rem;
    }

    .hero-image__icon {
        bottom: 0;
        height: auto;
        margin-top: 0;
        margin-bottom: 0;
        margin-left: auto;
        margin-right: auto;
        position: absolute;
        right: 0;
        top: -20px;
        left: 0;
        width: 12px;
    } 

    .main {
        width: 98%;
    }

    .main__jobs-container {
        height: auto;
        padding: 2rem 0 2rem 0;
    }
    .main__jobs-container:nth-of-type(2), .main__jobs-container:nth-of-type(4) {
        background-color: #F3F3F3;
    }

    .main__jobs-container-heading {
        position: relative;
        font-size: 1.5rem;
        margin-bottom: 1rem;
        text-align: center;
    }

    .main__jobs-container-heading-text {

        position: relative;
        margin: auto;
    }

    .main__jobs-container-description {
        font-family: montserratregular;
        text-align: center;
    }
}