body {
    background: rgb(255, 255, 255);
    background: -moz-linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(194, 251, 255, 1) 100%);
    background: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(194, 251, 255, 1) 100%);
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(194, 251, 255, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#c2fbff", GradientType=1);
    position: relative;
    overflow-y: scroll;
    height: auto
}

main {
    background-image: url(index-bg-sparkles.png);
    background-position: bottom center;
    background-size: contain;
    background-repeat: no-repeat
}

.section p {
    color: #666666;
    /* font-size: 1rem; */
    font-family: futura-pt, sans-serif;
}

.section h1 {
    /* font-size: 34px; */
    font-family: futura-pt, sans-serif;
    font-weight: bold
}

.section-contents {
    position: absolute;
}

.section-top {
    background: bottom center no-repeat url(index-bg-1.png);
    background-size: 100% 100%;
}

.section-top .index-top-cover {
    position: relative;
}

@keyframes sparkles {
    0% {
        opacity: 0;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
    10% {
        opacity: 1;
        top: -10px;
        bottom: -10px;
        left: -10px;
        right: -10px;
    }
    90% {
        opacity: 1;
        top: -90px;
        bottom: -90px;
        left: -90px;
        right: -90px;
    }
    100% {
        opacity: 0;
        top: -100px;
        bottom: -100px;
        left: -100px;
        right: -100px;
    }
}

@-o-keyframes sparkles {
    0% {
        opacity: 0;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
    10% {
        opacity: 1;
        top: -10px;
        bottom: -10px;
        left: -10px;
        right: -10px;
    }
    90% {
        opacity: 1;
        top: -90px;
        bottom: -90px;
        left: -90px;
        right: -90px;
    }
    100% {
        opacity: 0;
        top: -100px;
        bottom: -100px;
        left: -100px;
        right: -100px;
    }
}

@-moz-keyframes sparkles {
    0% {
        opacity: 0;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
    10% {
        opacity: 1;
        top: -10px;
        bottom: -10px;
        left: -10px;
        right: -10px;
    }
    90% {
        opacity: 1;
        top: -90px;
        bottom: -90px;
        left: -90px;
        right: -90px;
    }
    100% {
        opacity: 0;
        top: -100px;
        bottom: -100px;
        left: -100px;
        right: -100px;
    }
}

@-webkit-keyframes sparkles {
    0% {
        opacity: 0;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
    10% {
        opacity: 1;
        top: -10px;
        bottom: -10px;
        left: -10px;
        right: -10px;
    }
    90% {
        opacity: 1;
        top: -90px;
        bottom: -90px;
        left: -90px;
        right: -90px;
    }
    100% {
        opacity: 0;
        top: -100px;
        bottom: -100px;
        left: -100px;
        right: -100px;
    }
}

.section-top .index-top-sparkles {
    position: absolute;
    top: -100px;
    bottom: -100px;
    left: -100px;
    right: -100px;
    /* background: center center no-repeat url(index-bg-3.png);
    background-size: contain; */
    -o-animation: sparkles 20s infinite;
    -moz-animation: sparkles 20s infinite;
    -webkit-animation: sparkles 20s infinite;
    animation: sparkles 20s infinite; 
    -o-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}

.section-top .index-top-sparkles-2 {
    opacity: 0;
    -o-animation-delay: 10s;
    -moz-animation-delay: 10s;
    -webkit-animation-delay: 10s;
    animation-delay: 10s;
    /* -o-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg); */
    /* transform: scaleX(-1); */
}

.section-top .index-top-sparkles img {
    transition: all 0.5s
}

.section-makers,
.section-makers p {
    color: #0B5580!important;
    font-size: 1rem;
    font-family: futura-pt, sans-serif;
}

.section-top .section-contents {
    top: 25%;
    left: 35%;
    right: 35%;
}

.section-why h1 {
    color: #0EC4FF
}

.section-why .section-contents {
    top: 10%;
    left: 10%;
    right: 50%;
}

.section-who {
    margin-top: -3%
}

.clip-jer-rex {
    position: absolute;
    top: 50%;
    right: 10%;
    height: 50%;
    z-index: 5;
}

.section-who h1 {
    color: #EAC025
}

.section-who .section-contents {
    top: 15%;
    left: 55%;
    right: 5%;
}

.section-career {
    margin-top: -4rem
}

.section-career h1 {
    color: #FF5076
}

.section-career .section-contents {
    top: 15%;
    left: 8%;
    right: 53%;
}

.jobs-container {
    position: absolute;
    top: 32%;
    left: 37%;
    bottom: 15%;
    right: 0%;
    /* position: relative; */
    /* overflow-x: scroll; */
    overflow: hidden;
}

.hide-scrollbars {
    -ms-overflow-style: none;
    /* IE 10+ */
    scrollbar-width: none;
    /* Firefox */
}

.hide-scrollbars::-webkit-scrollbar {
    width: 0px;
    /* Remove scrollbar space */
    height: 0px;
    /* Remove scrollbar space */
    background: transparent;
    /* Optional: just make scrollbar invisible */
    display: none;
}


/* Optional: show position indicator in red */

.hide-scrollbars::-webkit-scrollbar-thumb {
    background: transparent;
}

.jobs-container-scroller {
    width: 100%;
    height: 100%;
    overflow: hidden;
    overflow-x: scroll;
    padding-bottom: 20px;
    /* Increase/decrease this value for cross-browser compatibility */
    box-sizing: content-box;
    /* So the width will be 100% + 17px */
}

.job-container {
    /* border: 1px solid red; */
    position: relative;
    display: inline-block;
    height: 110%;
    width: 32%;
    margin: 0;
    background: center center no-repeat url(index-bg-role.png);
    background-size: contain
}

.job-container {
    font-family: futura-pt, sans-serif;
}

.job-container .btn-apply {
    margin-top: 4rem
}

.job-container h4 {
    font-weight: bold
}

.bg-primary {
    background-color: #239CE0!important
}

.bg-danger {
    background-color: #E52D4D!important
}

.bg-warning {
    background-color: #DF940F!important
}

@media (max-width:575px) {
    .section-makers,
    .section-makers p {
        font-size: 1rem;
    }
    .section-contents {
        font-size: 0.9rem
    }
}

@media (min-width:576px) and (max-width:767px) {
    .section-makers,
    .section-makers p {
        font-size: 2.3rem;
    }
    .section-contents {
        font-size: 1.5rem
    }
    .job-container {
        padding-top: 5rem!important
    }
    .job-container h4 {
        font-size: 2rem
    }
    .job-container .job-tag {
        font-size: 1.5rem
    }
    .job-container .btn-apply {
        margin-top: 6.5rem!important
    }
}

@media (max-width:767px) {
    .section-top {
        /* background: bottom center no-repeat url(index-bg-1.png);
        background-size: cover;
        color: #0B5580;
        font-size: 1rem;
        font-family: futura-pt, sans-serif; */
    }
    .section-top .section-contents {
        top: 50%;
        left: 30%;
        right: 30%;
    }
    .section-why .section-contents {
        top: 15%;
        left: 20%;
        right: 20%;
    }
    .section-who .section-contents {
        top: 18%;
        left: 20%;
        right: 20%;
    }
    .section-career .section-contents {
        top: 23%;
        left: 20%;
        right: 20%;
    }
    .jobs-container {
        position: absolute;
        top: 55%;
        left: 0%;
        right: 0%;
        bottom: 0%;
        overflow-y: hidden;
        white-space: nowrap;
        /* padding-left: 10%;
        padding-right: 10%; */
        /* border: 1px dotted red */
    }
    .jobs-container-scroller {
        width: 80%;
        padding-left: 10%;
        padding-right: 10%;
        /* border: 1px dotted red */
    }
    .job-container {
        /* border: 1px solid red; */
        display: inline-block;
        height: 100%;
        width: 70%;
        margin: 0;
    }
    .job-container .btn-apply {
        margin-top: 3rem
    }
    .section-why {
        z-index: 3;
    }
    .section-who {
        z-index: 2;
        margin-top: -1rem
    }
    .section-career {
        z-index: 1;
        margin-top: -3rem
    }
    .container {
        max-width: 100%;
    }
}

@media (min-width:768px) {
    .section-top {
        font-size: 1.2rem;
    }
    .section-makers,
    .section-makers p {
        font-size: 0.93rem!important;
    }
    .section p {
        font-size: .7rem;
    }
    .section h1 {
        font-size: 1.2rem;
    }
    .section-career {
        margin-top: -3rem
    }
    .job-container h4 {
        font-size: 0.8rem;
        margin-top: 0rem!important
    }
    .job-container .job-tag {
        font-size: 0.6rem
    }
    .job-container .btn-apply {
        margin-top: 2.4rem
    }
    .clip-jer-rex {
        height: 45%;
    }
}

@media (min-width:992px) {
    .section-top {
        font-size: 1.2rem;
    }
    .section-makers,
    .section-makers p {
        font-size: 1.1rem!important;
    }
    .section p {
        font-size: 0.9rem;
    }
    .section h1 {
        font-size: 1.5rem;
    }
    .section-career {
        margin-top: -4rem
    }
    .job-container h4 {
        font-size: 1rem;
        margin-top: 1rem!important
    }
    .job-container .job-tag {
        font-size: .8rem
    }
    .job-container .btn-apply {
        margin-top: 3.7rem
    }
    .clip-jer-rex {
        height: 45%;
    }
}

@media (min-width:1200px) {
    .section-top {
        font-size: 1.4rem;
    }
    .section-makers,
    .section-makers p {
        font-size: 1.4rem!important;
    }
    .section p {
        font-size: 1rem;
    }
    .section h1 {
        font-size: 2rem;
    }
    .job-container h4 {
        font-size: 1.2rem;
    }
    .job-container .job-tag {
        font-size: 1rem
    }
    .job-container .btn-apply {
        margin-top: 5.2rem
    }
    .clip-jer-rex {
        height: 50%;
    }
}

@media (min-width:1500px) {
    .section-career {
        /* margin-top: -10% */
    }
}