/*Hero*/
.qversity-page .hero{ height: 930px; padding-top: 80px; background: var(--black) url("../../img/qversity/bg-hero.jpg"); color: var(--white); background-position: center center; background-repeat: no-repeat; background-size: auto 100%; }
.qversity-page .hero .content{ display: flex; }
.qversity-page .hero .text{ max-width: 750px; }
.qversity-page .hero .text .qversity-logo{ width: 180px; margin-bottom: 20px; }
.qversity-page .hero .text .qversity-logo img{ width: 100%; }
.qversity-page .hero .text h1{ font-weight: 600; line-height: 1.1; font-size: 68px; letter-spacing: -2px; margin-bottom: 30px; }
.qversity-page .hero .text h1 span{ display: block; }
.qversity-page .hero .text .description{ line-height: 1.7; padding: 20px 0 60px; font-weight: 200; max-width: 550px; font-size: 16px; }
.qversity-page .hero .text .bottom{ display: flex; align-items: center; }
.qversity-page .hero .text .bottom .registrants{ background: #333; display: flex; border-radius: 50px; padding: 5px 10px; align-items: center; margin-left: 30px; }
.qversity-page .hero .text .bottom .registrants figure{ height: 30px; margin-bottom: 0; }
.qversity-page .hero .text .bottom .registrants figure img{ width: auto; height: 100%; }
.qversity-page .hero .text .bottom .registrants span{ color: #B9B9B9; font-size: 15px; margin-left: 5px; margin-right: 10px; display: inline-block; }

/* Opportunity */
.qversity-page .opportunity{ background: var(--black); color: var(--white); padding: 150px 0 130px; }
.qversity-page .opportunity .content{ display: flex; justify-content: space-between; align-items: center; max-width: 1024px; }
.qversity-page .opportunity .content .left{ max-width: 400px; width: 100%; }
.qversity-page .opportunity .content .left img{ width: 100%; }
.qversity-page .opportunity .content .right{ max-width: 500px; width: 100%; }
.qversity-page .opportunity .content .right h2{ font-size: 36px; font-weight: 600; margin-bottom: 20px; letter-spacing: -1px; }
.qversity-page .opportunity .content .right .subtitle{ font-size: 16px; font-weight: 500; margin-bottom: 20px; line-height: 1.5; }
.qversity-page .opportunity .content .right .description{ font-size: 15px; font-weight: 200; line-height: 1.6; color: #D3D3D3; }

/* Separator Line */
.qversity-page .separator-line{ background: var(--black); padding: 50px 0; }
.qversity-page .separator-line .line{ width: 100%; height: 1px; background: linear-gradient(90deg, #202020 0%, #FFFFFF 50%, #202020 100%); opacity: .3; }

/* Timeline */
.timeline{ padding: 70px 0 100px; background: var(--black); color: var(--white); }
.timeline .section-title{ text-align: center; font-size: 48px; letter-spacing: -1px; font-weight: 500; width: 100%; margin-bottom: 50px; }
.timeline .grid{ width: 100%; max-width: 900px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: stretch; }
.timeline .grid .flexed{ display: flex; flex-direction: column; width: 60%; }
.timeline .grid figure{}
.timeline .grid figure img{ width: 100%; }

    .timeline .timeline-block.one{ width: 40%; }
    .timeline .timeline-block.two{ width: 100%;  height: 50%;}
    .timeline .timeline-block.three{ width: 100%; height: 50%; }
    .timeline .timeline-block.four{ width: 60%; }
    .timeline .timeline-block.five{ width: 40%; }

.timeline .timeline-block{ padding: 10px; }
.timeline .timeline-block .box-content{ border-radius: 20px; padding: 30px; height: 100%; position: relative; }
.timeline .timeline-block .box-content .head{ display: flex; }
.timeline .timeline-block .box-content .head .number{ font-size: 72px; font-weight: 600; }
.timeline .timeline-block .box-content .head .meta .title{ font-size: 24px; letter-spacing: -1px; font-weight: 600; line-height: 1.1; }
.timeline .timeline-block .box-content .head .meta .title span{ display: block; }
.timeline .timeline-block .box-content .head .meta .date{ font-size: 19px; margin-top: 5px; letter-spacing: -1px; }
.timeline .timeline-block .box-content .items{}
.timeline .timeline-block .box-content .items li{ font-size: 13px; position: relative; padding-left: 10px; line-height: 1.4; }
.timeline .timeline-block .box-content .items li:before{ content: ""; width: 3px; height: 3px; background: #170351; border-radius: 100%; display: inline-block; position: absolute; top: 7px; left: 0; }

    .timeline .timeline-block.one .box-content{ background: #928cfe; color: #170351; }
    .timeline .timeline-block.one .box-content .head .meta{ padding-left: 10px; padding-top: 20px; }
    .timeline .timeline-block.one .box-content figure{ padding-left: 25px; margin: 20px 0; }
    .timeline .timeline-block.one .box-content .items{ padding: 0 30px 0 50px; margin-bottom: 20px; }
    
    .timeline .timeline-block.two .box-content{ background: #f293d6; color: #530D38; }
    .timeline .timeline-block.two .box-content .head .meta{ padding-left: 15px; padding-top: 15px; }
    .timeline .timeline-block.two .box-content figure{ position: absolute; top: -60px; right: 0; width: 250px; }
    .timeline .timeline-block.two .box-content .items{ padding: 15px 220px 0 86px; }

    .timeline .timeline-block.three .box-content{ background: #39bf63; color: #C3FBA8; }
    .timeline .timeline-block.three .box-content .head .meta{ padding-left: 15px; padding-top: 15px; }
    .timeline .timeline-block.three .box-content figure{ position: absolute; width: 250px; bottom: -7px; right: 0; }
    .timeline .timeline-block.three .box-content .items{ padding: 0 230px 0 88px; margin-bottom: 20px; }
    .timeline .timeline-block.three .box-content .items li:before{ background: #C3FBA8; }

    .timeline .timeline-block.four .box-content{ background: #f8b50c; color: #5D4711; }
    .timeline .timeline-block.four .box-content .head .meta{ padding-left: 5px; padding-top: 15px; }
    .timeline .timeline-block.four .box-content figure{ position: absolute; right: 20px; top: 20px; width: 200px; }
    .timeline .timeline-block.four .box-content .items{ padding: 0 200px 0 0; }
    .timeline .timeline-block.four .box-content .items .left{ margin-left: 20px; }
    .timeline .timeline-block.four .box-content .items .lefter{ margin-left: 40px; }

    .timeline .timeline-block.five .box-content{ background: #9ebde3; color: #336091; }
    .timeline .timeline-block.five .box-content .head .meta{ padding-left: 5px; padding-top: 15px; }
    .timeline .timeline-block.five .box-content figure{ position: absolute; right: -51px; bottom: 0; width: 220px; }
    .timeline .timeline-block.five .box-content .items{ padding: 20px 180px 0 0; }


/* Apply */
.qversity-page .apply{ background: var(--black); color: var(--white); padding: 100px 0; }
.qversity-page .apply .content{ display: flex; justify-content: space-between; flex-direction: column; }
.qversity-page .apply .content .left{ width: 100%; text-align: center; max-width: 600px; margin: 0 auto 50px; }
.qversity-page .apply .content .left .label{ text-transform: uppercase; letter-spacing: 1px; font-weight: 400; font-size: 13px; border: 1px solid #666565; border-radius: 40px; display: inline-block; padding: 5px 13px; }
.qversity-page .apply .content .left h3{ font-size: 52px; font-weight: 500; padding: 20px 0; letter-spacing: -1px; }
.qversity-page .apply .content .left .description{ font-size: 16px; font-weight: 300; line-height: 1.5; }
.qversity-page .apply .content .left .description span{ display: block; }
.qversity-page .apply .content .left figure{ width: 100%; max-width: 180px; margin-top: 50px; }
.qversity-page .apply .content .left figure img{ width: 100%; }
.qversity-page .apply .content .right{ width: 100%; }
.qversity-page .apply .content .right ul{ display: flex; flex-wrap: wrap; align-items: stretch; }
.qversity-page .apply .content .right ul li{ width: 25%; padding: 10px; }
.qversity-page .apply .content .right ul li .box-content{ background: #191919; padding: 30px; border-radius: 20px; height: 100%; }
.qversity-page .apply .content .right ul li .box-content i{ width: 60px; height: 60px; font-size: 30px; display: flex; align-items: center; justify-content: center; background: #5D5AF0; border-radius: 100%; margin-bottom: 30px; }
.qversity-page .apply .content .right ul li .box-content i:before{ margin: 0; padding: 0; }
.qversity-page .apply .content .right ul li .box-content p{ font-size: 15px; font-weight: 300; line-height: 1.5; }
.qversity-page .apply .content .right ul li .box-content .flag{ width: 20px; position: relative; top: 2px; margin-right: 3px; }

    /* 
    .qversity-page .apply .content .right ul li .box-content i.icon-school{ background: #5E33FF; }
    .qversity-page .apply .content .right ul li .box-content i.icon-book{ background: #F896D8; }
    .qversity-page .apply .content .right ul li .box-content i.icon-laptop{ background: #F96235; }
    .qversity-page .apply .content .right ul li .box-content i.icon-location{ background: #FFB600; } 
    */

/* Form */
.qversity-page .qversity-form{ color: var(--white); background: var(--black); padding: 50px 0 100px; }
.qversity-page .qversity-form .content{ max-width: 1100px; }
.qversity-page .qversity-form .section-title{ font-size: 52px; font-weight: 500; padding: 20px 0; letter-spacing: -1px; margin-bottom: 70px; }
.qversity-page .qversity-form .section-title img{ width: 40px; }
.qversity-page .qversity-form #register{ position: relative; top: -240px; }
.qversity-page .qversity-form input,
.qversity-page .qversity-form select,
.qversity-page .qversity-form textarea,
.qversity-page .qversity-form div.selector{ background: #3d3d3d; color: var(--white) !important; border: none; font-weight: 500; font-size: 14px; width: 100% !important; }
.qversity-page .qversity-form div.selector span:before{ color: var(--white); }
.qversity-page .qversity-form input[type="checkbox"]{ width: 18px !important; height: 18px !important; margin-right: 5px !important; position: relative; top: 3px; cursor: pointer; }
.qversity-page .qversity-form input[type="radio"]{ width: 18px !important; height: 18px !important; margin-right: 5px !important; position: relative; top: 3px; cursor: pointer; }
.qversity-page .qversity-form textarea{ width: 100% !important; resize: none; }
.qversity-page .qversity-form fieldset{ max-width: 100%; text-align: left; margin-bottom: 10px; display: flex; justify-content: space-between; }
.qversity-page .qversity-form fieldset .field{ width: calc(50% - 10px) !important; }
.qversity-page .qversity-form fieldset label{ display: block; margin-bottom: 10px; line-height: 1.5; }
.qversity-page .qversity-form fieldset label span{ font-size: 15px; font-weight: 500; }
.qversity-page .qversity-form fieldset .input{ margin: 0 !important; }
.qversity-page .qversity-form fieldset .hs-form-booleancheckbox{ display: flex; align-items: center; justify-content: center; }
.qversity-page .qversity-form fieldset .hs-form-booleancheckbox .checker{ top: 3px; }
.qversity-page .qversity-form fieldset .hs-form-booleancheckbox input{ height: auto; margin-right: 10px; cursor: pointer; }
.qversity-page .qversity-form fieldset .hs-form-booleancheckbox label{ cursor: pointer; }
.qversity-page .qversity-form fieldset .hs-message{ width: 100% !important; }
.qversity-page .qversity-form fieldset .hs_newsletter_subscription{ width: 100% !important; }
.qversity-page .qversity-form fieldset .field.hs-fieldtype-checkbox{ width: 100% !important; }
.qversity-page .qversity-form fieldset.form-columns-1 .field{ width: 100% !important; }
.qversity-page .qversity-form fieldset .hs-dependent-field{ width: 100% !important; }
.qversity-page .qversity-form fieldset .hs-dependent-field .field{ width: 100% !important; margin-bottom: 10px; }
.qversity-page .qversity-form fieldset .hs-field-desc{ font-weight: 300; font-size: 13px; display: block; margin-bottom: 10px; opacity: .8; }
.qversity-page .qversity-form .multi-container{ display: flex; flex-wrap: wrap; padding: 15px 0; }
.qversity-page .qversity-form .multi-container li{ white-space: nowrap; margin-right: 20px; cursor: pointer; }
.qversity-page .qversity-form .hs-main-font-element{ font-size: 14px; margin-bottom: 30px; display: block; line-height: 1.4; }
.qversity-page .qversity-form .actions{ text-align: center; margin-top: 50px; }
.qversity-page .qversity-form .hs-error-msg{ color: #F00; font-size: 11px; margin-top: 5px; padding: 0 10px; }
.qversity-page .qversity-form input[type="submit"]{ padding: 10px 16px; font-size: 14px; font-weight: 400; background: var(--white); border: 2px solid var(--white); color: var(--black) !important; transition: var(--transition); cursor: pointer; display: inline-block; font-family: var(--vietnam); width: 100px !important; border-radius: 40px !important; }
.qversity-page .qversity-form input[type="submit"]:hover{ background: transparent; color: var(--white) !important; }
.qversity-page .qversity-form .submitted-message{ font-size: 22px !important; text-align: center !important; max-width: 800px !important; margin: 0 auto 60px !important; }
.qversity-page .qversity-form div.uploader{ background: #3d3d3d; }

/*Video*/
.qversity-page .video{ padding: 50px 0 150px; background: var(--black); }
.qversity-page .video .content{ position: relative; }
.qversity-page .video .video-container{ width: 100%; max-width: 1120px; height: auto; padding-top: 53.35%; background: radial-gradient(36.78% 36.78% at 49.09% 6.12%, #131B21 0%, #000000 100%); border-radius: 30px; margin: 0 auto; position: relative; z-index: 20; overflow: hidden; }
.qversity-page .video .video-container iframe{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; }

/* Learn more */
.qversity-page .learn-more-wrapper{ background: var(--white); }
.qversity-page .learn-more-wrapper .content{ position: relative; padding: 50px 0 80px; }
.qversity-page .learn-more-wrapper .red-shape{ position: absolute; width: 250px; left: -50px; bottom: 0; }
.qversity-page .learn-more-wrapper .red-shape img{ width: 100%; }
.qversity-page .learn-more-wrapper .green-shape{ position: absolute; width: 250px; top: -130px; right: -210px; }
.qversity-page .learn-more-wrapper .green-shape img{ width: 100%; }
.qversity-page .learn-more-wrapper .text{ text-align: center; }
.qversity-page .learn-more-wrapper .text .ray{ width: 30px; margin: 0 auto 30px; }
.qversity-page .learn-more-wrapper .text .ray img{ width: 100%; }
.qversity-page .learn-more-wrapper .text h3{ font-weight: 500; max-width: 450px; margin: 0 auto 15px; line-height: 1.2; letter-spacing: -1px; }
.qversity-page .learn-more-wrapper .text p{ max-width: 600px; margin: 0 auto 20px; line-height: 1.4; font-size: 15px; }

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

    /*Hero*/
    .qversity-page .hero{ height: auto; padding-top: 190px; padding-bottom: 60px; }
    .qversity-page .hero .text{ max-width: 600px; }
    .qversity-page .hero .text h1{ font-size: 48px; line-height: 1.3; }
    .qversity-page .hero .text h1 span{ display: inline; }
    .qversity-page .hero .text .description{ max-width: 100%; font-size: 15px; }

    /* Apply */
    .qversity-page .apply .content .left h3{ font-size: 38px; }
    .qversity-page .apply .content .left figure{ max-width: 150px; }
    .qversity-page .apply .content .right ul li .box-content p{ font-size: 14px; }

}

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

    /*Hero*/
    .qversity-page .hero{ height: auto; min-height: 560px; padding-top: 120px; padding-bottom: 100px; }
    .qversity-page .hero .text h1{ font-size: 38px; }
    .qversity-page .hero .text .description{ font-size: 13px; }
    .qversity-page .hero .text .bottom{ flex-direction: column; align-items: flex-start; justify-content: flex-start; }
    .qversity-page .hero .text .bottom .registrants{ margin-left: 0; margin-top: 20px; }
    
    /* Form */
    .qversity-page .qversity-form fieldset{ flex-direction: column; margin-bottom: 0; }
    .qversity-page .qversity-form fieldset .field{ width: 100% !important; margin-bottom: 15px; }
    .qversity-page .qversity-form .multi-container li{ width: 100%; }

    /* Learn more */
    .qversity-page .learn-more-wrapper .text{ padding: 0 20px; }
    .qversity-page .learn-more-wrapper .text h3{ font-size: 28px; }
    .qversity-page .learn-more-wrapper .text p{ font-size: 15px; }

    /*Video*/
    .qversity-page .video{ padding: 30px 0 110px; }
    .qversity-page .video .video-container{ padding-top: 55%; }

    /* Opportunity */
    .qversity-page .opportunity{ padding: 30px 0 20px; }
    .qversity-page .opportunity .content{ flex-direction: column; }
    .qversity-page .opportunity .content .left{ margin-bottom: 30px; }
    .qversity-page .opportunity .content .right{ max-width: 380px; }
    .qversity-page .opportunity .content .right h2{ font-size: 28px; }
    .qversity-page .opportunity .content .right .subtitle{ font-size: 15px; }
    .qversity-page .opportunity .content .right .description{ font-size: 14px; }

    /* Apply */
    .qversity-page .apply{ padding: 30px 0 0; }
    .qversity-page .apply .content{ flex-direction: column; }
    .qversity-page .apply .content .left{ max-width: 100%; }
    .qversity-page .apply .content .left .label{ font-size: 13px; }
    .qversity-page .apply .content .left .description span{ display: inline; }
    .qversity-page .apply .content .left h3{ font-size: 38px; }
    .qversity-page .apply .content .left figure{ max-width: 100px; margin: 30px 0 50px; }
    .qversity-page .apply .content .right{ max-width: 100%; }
    .qversity-page .apply .content .right ul li{ width: 50%; }

    /* Form */
    .qversity-page .qversity-form .section-title{ font-size: 38px; }
    .qversity-page .qversity-form .section-title img{ width: 30px; }
    .qversity-page .qversity-form #register{ top: -100px; }
    .qversity-page .qversity-form{ padding: 50px 0; }
    .qversity-page .qversity-form .line{ margin-bottom: 50px; }

    /* Learn more */
    .qversity-page .learn-more-wrapper .red-shape { width: 120px; left: -50px; bottom: -40px; }
    .qversity-page .learn-more-wrapper .green-shape{ width: 150px; top: -90px; right: -80px; }

    /* Timeline */
    .timeline .section-title{ font-size: 38px; }
    .timeline .grid{ flex-direction: column; max-width: 600px; }
    .timeline .grid .flexed{ flex-direction: column; width: 100%; }
    .timeline .timeline-block.one{ width: 100%; }
    .timeline .timeline-block.two{ height: auto; }
    .timeline .timeline-block.three{ height: auto; }
    .timeline .timeline-block.four{ width: 100%; }
    .timeline .timeline-block.five{ width: 100%; }
    .timeline .timeline-block.two .box-content figure{ top: -40px; right: 20px; width: 210px; }
    .timeline .timeline-block.three .box-content figure{ width: 200px; }

}

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

    /*Hero*/
    .qversity-page .hero .text h1{ font-size: 32px; margin-bottom: 0; }

    /* Apply */
    .qversity-page .apply .content .right ul{ flex-direction: column; }
    .qversity-page .apply .content .right ul li{ width: 100%; padding: 0; margin-bottom: 15px; }

    /* Timeline */
    .timeline{ padding: 10px 0 30px; }
    .timeline .timeline-block{ padding: 0; margin-bottom: 15px; }
    .timeline .timeline-block .box-content{ padding: 20px; }
    .timeline .timeline-block .box-content .head .number{ font-size: 48px; }
    .timeline .timeline-block .box-content .head .meta .title{ font-size: 20px; }
    .timeline .timeline-block .box-content .head .meta .date{ font-size: 16px; }

    .timeline .timeline-block.one .box-content figure,
    .timeline .timeline-block.two .box-content figure,
    .timeline .timeline-block.three .box-content figure,
    .timeline .timeline-block.four .box-content figure,
    .timeline .timeline-block.five .box-content figure{ display: none; }

    .timeline .timeline-block.one .box-content .items{ padding: 15px 10px; }
    .timeline .timeline-block.two .box-content .items{ padding: 15px 10px; }
    .timeline .timeline-block.three .box-content .items{ padding: 15px 10px; }
    .timeline .timeline-block.four .box-content .items{ padding: 15px 10px; }
    .timeline .timeline-block.five .box-content .items{ padding: 15px 10px; }

}