/*Hero*/
.careers-page .hero{ background: var(--black) url("../jpg/careers-2.jpg"); background-size: cover; background-position: center; min-height: 700px; height: 900px; width: 100%; color: var(--white); position: relative; background-attachment: fixed; }
.careers-page .hero:before{ content: ""; display: block; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,.5); position: absolute; z-index: 20; }
.careers-page .hero .text{ max-width: 600px; margin: 0 auto; text-align: center; position: relative; z-index: 100; }
.careers-page .hero .text h1{ color: var(--white); font-weight: 400; line-height: 1.2; font-size: 48px; letter-spacing: -1px; }
.careers-page .hero .text p{ color: var(--white); line-height: 1.6; padding: 20px 0 40px; font-weight: 300; }
.careers-page .hero video{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; z-index: 1; }

/*Our Values*/
.careers-page .our-values{ background: var(--black); padding: 100px 0; border-radius: 40px; margin-top: -50px; position: relative; z-index: 10; }
.careers-page .our-values .content{ max-width: 1060px; }
.careers-page .our-values .head{ width: 100%; display: flex; justify-content: space-between; color: var(--white); }
.careers-page .our-values .head h3{ letter-spacing: -1px; font-weight: 600; }
.careers-page .our-values .head p{ font-weight: 300; line-height: 1.5; max-width: 600px; font-size: 22px; }

.careers-page .our-values .people{ margin: 80px 0; border-radius: 20px; overflow: hidden; height: 440px; }
.careers-page .our-values .people img{ width: 100%; height: 100%; object-fit: cover; }

.careers-page .our-values .values-list{ display: flex; flex-wrap: wrap; justify-content: space-between; color: var(--white); }
.careers-page .our-values .values-list li{ max-width: 420px; width: 100%; margin-bottom: 50px; }
.careers-page .our-values .values-list li figure{ margin-bottom: 50px; width: auto; height: 50px; }
.careers-page .our-values .values-list li h4{ font-size: 20px; margin-bottom: 15px; }
.careers-page .our-values .values-list li p{ color: #A7A7A7; font-size: 15px; line-height: 1.6; }

/*Whats In*/
.careers-page .whats-in{ padding: 100px 0; }
.careers-page .whats-in .content{ position: relative; }

.careers-page .whats-in .shape{}
.careers-page .whats-in .shape.circle{ width: 380px; height: 375px; background: url("../svg/circle.svg"); background-size: 380px 375px; position: absolute; top: -230px; right: -320px; }
.careers-page .whats-in .shape.rectangle{ width: 523px; height: 348px; background: url("../svg/paralel.svg"); background-size: 523px 348px; position: absolute; bottom: -140px; left: -480px; }

.careers-page .whats-in .head{ text-align: center; max-width: 470px; margin: 0 auto 70px; }
.careers-page .whats-in .head h3{ margin-bottom: 20px; letter-spacing: -1px; font-weight: 600; }
.careers-page .whats-in .head p{ color: #929292; line-height: 1.5; font-size: 16px; }

.careers-page .whats-in .whats-in-list{ display: flex; flex-wrap: wrap; align-items: stretch; max-width: 800px; margin: 0 auto; }
.careers-page .whats-in .whats-in-list li{ width: 33.3333%; text-align: center; padding: 12px; }
.careers-page .whats-in .whats-in-list li .box-content{ border-radius: 20px; padding: 50px 20px; height: 100%; }
.careers-page .whats-in .whats-in-list li .box-content p{ font-size: 15px; margin-top: 30px; }
.careers-page .whats-in .whats-in-list li .box-content p span{ display: block; }

    .careers-page .whats-in .whats-in-list li.private .box-content{ background: radial-gradient(118.8% 118.8% at 7.68% -10.93%, rgba(255, 255, 255, 0.37) 0%, rgba(108, 239, 160, 0.15) 100%); }
    .careers-page .whats-in .whats-in-list li.private .box-content p{ color: #138010; }

    .careers-page .whats-in .whats-in-list li.flexibility .box-content{ background: radial-gradient(118.8% 118.8% at 7.68% -10.93%, rgba(255, 255, 255, 0.37) 0%, rgba(239, 115, 108, 0.15) 100%); }
    .careers-page .whats-in .whats-in-list li.flexibility .box-content p{ color: #AE2121; }

    .careers-page .whats-in .whats-in-list li.team .box-content{ background: radial-gradient(118.8% 118.8% at 7.68% -10.93%, rgba(255, 255, 255, 0.37) 0%, rgba(165, 108, 239, 0.15) 100%); }
    .careers-page .whats-in .whats-in-list li.team .box-content p{ color: #7E148F; }

    .careers-page .whats-in .whats-in-list li.english .box-content{ background: radial-gradient(118.8% 118.8% at 7.68% -10.93%, rgba(255, 255, 255, 0.37) 0%, rgba(108, 184, 239, 0.15) 100%); }
    .careers-page .whats-in .whats-in-list li.english .box-content p{ color: #0F579A; }

    .careers-page .whats-in .whats-in-list li.work .box-content{ background: radial-gradient(118.8% 118.8% at 7.68% -10.93%, rgba(255, 255, 255, 0.37) 0%, rgba(54, 147, 176, 0.2) 100%); }
    .careers-page .whats-in .whats-in-list li.work .box-content p{ color: #0F579A; }

    .careers-page .whats-in .whats-in-list li.travel .box-content{ background: radial-gradient(118.8% 118.8% at 7.68% -10.93%, rgba(255, 255, 255, 0.37) 0%, rgba(235, 171, 75, 0.2) 100%); }
    .careers-page .whats-in .whats-in-list li.travel .box-content p{ color: #CD6022; }

/*Job Openings*/    
.careers-page .job-openings{ background: var(--black); padding: 100px 0; border-radius: 40px; color: var(--white); line-height: 1.4; font-size: 16px; }
.careers-page .job-openings .section-title{ color: var(--white); font-weight: 600; letter-spacing: -1px; text-align: center; margin: 0 auto 70px; }

.careers-page #job-openings-anchor{ position: relative; top: -120px; }

.careers-page .job-openings .job-openings-list{}
.careers-page .job-openings .job-openings-list .job-position-box{ background: linear-gradient(0deg, #0D0D0D, #0D0D0D), linear-gradient(0deg, #3D3B3B, #3D3B3B); border: 1px solid #3D3B3B; border-radius: 20px; padding: 30px 35px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
.careers-page .job-openings .job-openings-list .job-position-box .left{}
.careers-page .job-openings .job-openings-list .job-position-box .left .title{ display: flex; align-items: flex-start; flex-direction: column; position: relative; padding-right: 50px; }
.careers-page .job-openings .job-openings-list .job-position-box .left .title h5{ color: var(--white); font-size: 19px; }
.careers-page .job-openings .job-openings-list .job-position-box .left .title .studio{ display: inline-block; background: #333; align-items: center; border-radius: 30px; font-size: 12px; padding: 5px 10px; white-space: nowrap; margin-bottom: 10px; }
.careers-page .job-openings .job-openings-list .job-position-box .left .title .studio i{ display: inline-block; margin-right: 5px; }
.careers-page .job-openings .job-openings-list .job-position-box .left .title .expand-job-description{ position: absolute; right: -10px; top: 50%; font-size: 18px; margin-top: -19px; cursor: pointer; width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; transition: var(--transition); }
.careers-page .job-openings .job-openings-list .job-position-box .left .title .expand-job-description:hover{ color: var(--sky); }
.careers-page .job-openings .job-openings-list .job-position-box .left .title .expand-job-description.expanded{ rotate: 180deg; }
    
    .careers-page .job-openings .job-openings-list .job-position-box .left .title .studio.data{ color: #96C5FF; background: #96C5FF36; }
    .careers-page .job-openings .job-openings-list .job-position-box .left .title .studio.qa{ color: #00BD5F; background: #3CC58433; }
    .careers-page .job-openings .job-openings-list .job-position-box .left .title .studio.design{ color: #A248EA; background: #A248EA38; }
    .careers-page .job-openings .job-openings-list .job-position-box .left .title .studio.cloud{ color: #3D7BFF; background: #0D5BFF38; }
    .careers-page .job-openings .job-openings-list .job-position-box .left .title .studio.firmware{ color: #FFBD18; background: #FFB60026; }
    .careers-page .job-openings .job-openings-list .job-position-box .left .title .studio.app-solutions{ color: #FE3F3F; background: #FE3F3F26; }
    .careers-page .job-openings .job-openings-list .job-position-box .left .title .studio.pm{ color: #3379CC; background: #0D5BFF40; }
    .careers-page .job-openings .job-openings-list .job-position-box .left .title .studio.platform{ color: #32CCEE; background: #78E7FF24; }
    .careers-page .job-openings .job-openings-list .job-position-box .left .title .studio.project-management{ color: #FF90DC; background: #DC78FF24; }

.careers-page .job-openings .job-openings-list .job-position-box .left .description{ color: #B3B3B3; font-size: 14px; line-height: 1.6; max-height: 0; overflow: hidden; transition: var(--transition); opacity: 0; }
.careers-page .job-openings .job-openings-list .job-position-box .left .description span{ font-size: 14px !important; }
.careers-page .job-openings .job-openings-list .job-position-box .left .description ul{ padding-left: 20px; margin: 20px 0; }
.careers-page .job-openings .job-openings-list .job-position-box .left .description ul li{ margin-bottom: 5px; position: relative; padding-left: 12px; }
.careers-page .job-openings .job-openings-list .job-position-box .left .description ul li:before{ content: ""; display: block; width: 5px; height: 5px; border-radius: 100%; background: #B3B3B3; position: absolute; top: 8px; left: 0; }
.careers-page .job-openings .job-openings-list .job-position-box .left .description a:not(.button){ color: #B3B3B3; text-decoration: none; }
.careers-page .job-openings .job-openings-list .job-position-box .left .description a:not(.button){ text-decoration: underline; }

.careers-page .job-openings .job-openings-list .job-position-box .left .description.show{ overflow: visible; max-height: none; margin-top: 20px; opacity: 1; }

.careers-page .job-openings .button{ margin-top: 30px; }
.careers-page .job-openings .button:hover{ text-decoration: none !important; }

/* Careers Modal */
.careers-page .modal-applicant-form .modal-content{ max-width: 600px; }
.careers-page .modal-applicant-form .applicant-form{ color: var(--black); }
.careers-page .modal-applicant-form .applicant-form input,
.careers-page .modal-applicant-form .applicant-form select,
.careers-page .modal-applicant-form .applicant-form textarea{ background: #ECECEC; color: var(--black) !important; border: none; font-weight: 500; font-size: 14px; }
.careers-page .modal-applicant-form .applicant-form textarea{ width: 100% !important; resize: none; }
.careers-page .modal-applicant-form .applicant-form label{ display: block; margin-bottom: 5px; font-size: 15px; font-weight: 500;  }
.careers-page .modal-applicant-form .applicant-form .field-separator{ margin-bottom: 10px; }
.careers-page .modal-applicant-form .applicant-form input[type="submit"]{ padding: 14px 23px; border-radius: 60px !important; font-size: 14px; font-weight: 400; background: var(--blue); border: 2px solid var(--blue); color: var(--white) !important; transition: var(--transition); cursor: pointer; display: block; font-family: var(--vietnam); width: 120px; margin: 30px auto 0; height: auto !important; }
.careers-page .modal-applicant-form .applicant-form input[type="submit"]:hover{ background: transparent; border-color: var(--black); color: var(--black) !important; }

/*Qubikers Say*/
.careers-page .qubikers-say{ padding-bottom: 150px; }
.careers-page .qubikers-say .section-title{ text-align: center; font-weight: 600; letter-spacing: -1px; margin: 20px auto 90px; }

.careers-page .qubikers-say .top-quotes{}
.careers-page .qubikers-say .bottom-quotes{ margin-left: -300px; }

.careers-page .qubikers-say .quotes{ display: flex; align-items: stretch; }
.careers-page .qubikers-say .quotes li{ padding: 0 20px; width: 630px; margin-bottom: 40px; height: auto !important; }
.careers-page .qubikers-say .quotes li .quote-box{ padding: 40px; background: #EFF6F9; border-radius: 20px; height: 100%; display: flex; flex-direction: column; justify-content: space-between; }

    .careers-page .qubikers-say .quotes li .quote-box.blue{ background: #EFF6F9; color: #406F84; }
    .careers-page .qubikers-say .quotes li .quote-box.blue .quoter{ color: #1E6583; }

    .careers-page .qubikers-say .quotes li .quote-box.yellow{ background: #FEF9F1; color: #484848; }
    .careers-page .qubikers-say .quotes li .quote-box.yellow .quoter{ color: #606060; }
    .careers-page .qubikers-say .quotes li .quote-box.yellow .quoter span{ color: var(--black); }

    .careers-page .qubikers-say .quotes li .quote-box.green{ background: #EEFDF4; color: #484848; }
    .careers-page .qubikers-say .quotes li .quote-box.green .quoter{ color: #606060; }
    .careers-page .qubikers-say .quotes li .quote-box.green .quoter span{ color: var(--black); }

    .careers-page .qubikers-say .quotes li .quote-box.red{ background: #FDEBE9; color: #BE6E65; }
    .careers-page .qubikers-say .quotes li .quote-box.red .quoter{ color: #7E362E; }
    .careers-page .qubikers-say .quotes li .quote-box.red .quoter span{}

    .careers-page .qubikers-say .quotes li .quote-box.violet{ background: #F1E9FD; color: #484848; }
    .careers-page .qubikers-say .quotes li .quote-box.violet .quoter{ color: #606060 }
    .careers-page .qubikers-say .quotes li .quote-box.violet .quoter span{ color: var(--black); }

    .careers-page .qubikers-say .quotes li .quote-box.grey{ background: #F1F4F8; color: #484848; }
    .careers-page .qubikers-say .quotes li .quote-box.grey .quoter{ color: #606060; }
    .careers-page .qubikers-say .quotes li .quote-box.grey .quoter span{ color: var(--black);  }

.careers-page .qubikers-say .quotes li .quote-box .quote{ font-size: 15px; line-height: 1.6; margin-bottom: 30px; }
.careers-page .qubikers-say .quotes li .quote-box .quoter{ font-size: 16px; display: flex; align-items: center; }
.careers-page .qubikers-say .quotes li .quote-box .quoter span{ font-weight: 600; position: relative; display: inline-block; margin-right: 30px; }
.careers-page .qubikers-say .quotes li .quote-box .quoter span:before{ content: ""; display: block; width: 1px; height: 12px; top: 3px; position: absolute; right: -15px; background: #000; }

.careers-page .qubikers-say .quotes li .quote-box .quoter figure{ width: 30px; min-width: 30px; height: 30px; overflow: hidden; border-radius: 100%; margin-right: 10px; }
.careers-page .qubikers-say .quotes li .quote-box .quoter figure img{ width: 100%; }

/*Discover more*/
.careers-page .discover-more{ padding: 100px 0 140px; }
.careers-page .discover-more .section-title{ text-align: center; font-weight: 600; letter-spacing: -1px; margin: 0 auto 40px; }

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

    /*Hero*/
    .careers-page .hero{ height: 800px; }
    .careers-page .hero .text h1{ font-size: 38px; }
    .careers-page .hero .text p{ font-size: 15px; }
    
    /*Our Values*/
    .careers-page .our-values{ padding: 70px 0; }
    .careers-page .our-values .head{ flex-direction: column; text-align: center; opacity: 1; }
    .careers-page .our-values .head h3{ margin-bottom: 20px; font-size: 30px; }
    .careers-page .our-values .head p{ font-size: 18px; margin: 0 auto; }
    .careers-page .our-values .people{ margin: 30px 0; height: auto; position: relative; padding-top: 50%; }
    .careers-page .our-values .people img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
    .careers-page .our-values .values-list li{ max-width: 100%; }

    /*Whats In*/
    .careers-page .whats-in { padding: 70px 0 20px; }
    .careers-page .whats-in .head h3{ font-size: 28px; }
    .careers-page .whats-in .whats-in-list li{ width: 50%; }

    /*Qubikers Say*/
    .careers-page .qubikers-say{ padding-bottom: 30px; }
    .careers-page .qubikers-say .section-title{ font-size: 28px; margin: 20px auto 50px; }
    .careers-page .qubikers-say .bottom-quotes{ font-size: 14px; }
    .careers-page .qubikers-say .quotes li .quote-box .quote{ font-size: 13px; }
    .careers-page .qubikers-say .quotes li .quote-box .quoter{ font-size: 14px; flex-direction: column; align-items: flex-start; }
    .careers-page .qubikers-say .quotes li .quote-box .quoter span:before{ display: none; }
    .careers-page .qubikers-say .quotes li .quote-box .quoter figure{ margin-bottom: 10px; }

    /*Job Openings*/
    .careers-page .job-openings{ padding: 60px 0 70px; }
    .careers-page .job-openings .section-title{ font-size: 28px; }  
    .careers-page .job-openings .job-openings-list .job-position-box{ flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 30px; }
    .careers-page .job-openings .job-openings-list .job-position-box .left{ max-width: 100%; }
    .careers-page .job-openings .button{ margin-top: 15px; }
    .careers-page .job-openings .generic-apply{ margin: 80px auto 0; }
    .careers-page .job-openings .generic-apply p{ font-size: 18px; }

    /*Discover More*/
    .careers-page .discover-more{ padding: 60px 0 100px; }
    .careers-page .discover-more .section-title{ font-size: 28px; }

}

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

    /*Hero*/
    .careers-page .hero .text h1{ font-size: 30px; }
    .careers-page .hero .text p{ font-size: 14px; }    

    /*Whats In*/
    .careers-page .whats-in .whats-in-list li{ width: 100%; }

    /*Qubikers Say*/
    .careers-page .qubikers-say .bottom-quotes{ margin-left: 0; }
    .careers-page .qubikers-say .quotes li{ width: 100%; }

    /*Our Values*/
    .careers-page .our-values .head p{ font-size: 15px; }

}