﻿
#banner { height: 54vw; background: url(/res/img/nexgen/home-banner.jpg) center/cover no-repeat; position: relative; }
    #banner > .c { position: absolute; width: 45vw; left: 6vw; top: 12vw; }
        #banner > .c > .t { color: white; font-size: 3.2vw; font-weight: 900; line-height: 1.3em; }
        #banner > .c > .learn { background: rgba(255,255,255,.25); margin-top: 2vw; padding: 0.9vw 3vw; font-size: 2vw; font-weight: 900; border: solid 5px white; border-radius: 0.4vw; }

#tech { padding: 100px 40px 0; background: url(/res/img/nexgen/scientist-bg.jpg) left/cover; text-align: center; height: 1180px; box-sizing: border-box; }
    #tech > h2 { font-size: 48px; margin: 0; }
    #tech > .t { max-width: 812px; margin: 40px auto; color: #0068AD; font-size: 24px; }
    #tech > .youtube-w-w { width: 1088px; margin: 0 auto 50px; }

#earn-per { text-align: center; padding: 92px 0 40px; border-bottom: solid 1px #B3C0C3; margin: 0 140px; color: #103558; }
    #earn-per > h2 { margin: 0; font-size: 48px; }
    #earn-per > h3 { margin: 0; text-transform: uppercase; font-size: 24px; }

#three-steps { display: flex; justify-content: center; margin: 74px 0; }
    #three-steps > .step { width: 384px; text-align: center; margin: 0 80px; }
        #three-steps > .step > .h { color: #00A7CC; font-size: 24px; font-weight: bold; margin-top: 20px; }
        #three-steps > .step > .t { margin-top: 15px; font-size: 20px; color: #6E7173; }
            #three-steps > .step > .t > a { color: #0068AD; font-weight: bold; }

#rewards { height: 57vw; background: url(/res/img/nexgen/home-banner-2.jpg) right/cover no-repeat; position: relative; }
    #rewards > .t { position: absolute; top: 9.4vw; left: 5.2vw; width: 41.7vw; }
        #rewards > .t > .h2 { color: #103558; font-size: 3.7vw; font-weight: 900; }
        #rewards > .t > .h3 { color: #103558; font-size: 2.5vw; font-weight: 900; text-transform: uppercase; }
        #rewards > .t > ul { list-style: none; font-weight: 900; color: white; font-size: 1.9vw; padding-inline-start: 0; margin-bottom: 2.6vw; }
            #rewards > .t > ul > li { margin-bottom: .8vw; background: url(/res/img/nexgen/tick.png) left/3.1vw 2.4vw no-repeat; padding-left: 4vw; }

#stories { display: flex; justify-content: center; margin-top: -60px; z-index: 100; position: relative; }
    #stories > .story { width: 420px; margin: 0 30px; background: linear-gradient(#FFFFFF, #E3EEF5); text-align: center; box-sizing: border-box; padding: 70px 60px; box-shadow: 0 0 10px #aaa; border-radius: 20px; }
        #stories > .story > img { border-radius: 100%; border: solid 12px #E5F1F7; }
        #stories > .story > .quote { font-style: italic; font-size: 24px; color: #103558; margin-top: 40px; }
        #stories > .story > .name { width: 210px; margin: 0 auto; text-transform: uppercase; color: #103558; font-size: 18px; font-weight: bold; margin-top: 30px; border-top: solid 1px #B3C0C3; padding-top: 15px; }

#cures { background: linear-gradient(#FFFFFF, #CCEDF5); padding: 195px 7vw; position: relative; }
    #cures > .t { width: 60%; position: relative; font-size: 20px; color: #6E7173; line-height: 1.7em; }
        #cures > .t > h2 { color: #0068AD; font-size: 48px; margin: 0; line-height: 1.3em; }
    #cures > .img-w { position: absolute; bottom: 0; right: 40px; }
        #cures > .img-w > img { display: block; }

#earn-bar { height: 136px; background: #103558; display: flex; align-items: center; justify-content: center; color: white; position: relative; z-index: 10; }
    #earn-bar > .t { font-size: 30px; font-weight: bold; margin-right: 40px; }

#refer { height: 38vw; background: url(/res/img/nexgen/home-banner-3.jpg) center/cover no-repeat; position: relative; padding: 6.1vw 7vw 0; box-sizing: border-box; }
    #refer > .t > p { font-size: 1.25vw; color: #0068AD; width: 27.9vw; line-height: 1.5em; }
    #refer > .t > img { width: 32.3vw; }

.slick-slider > .arrow { font-size: 50px; color: #AAAAAA; position: absolute; top: 50%; margin-top: -32px; cursor: pointer; }
    .slick-slider > .arrow:before { margin: 0; }
    .slick-slider > .arrow.left { left: -40px; }
    .slick-slider > .arrow.right { right: -40px; }

#acc-deleted > .c { background: linear-gradient(#fff,#F7C6BA); border: solid 1px #E3401A; border-radius: 20px; padding: 70px 160px 140px; position: relative; color: #E3401A; text-align: center; max-width: 900px; }
    #acc-deleted > .c > .close { display: flex; align-items: center; justify-content: center; background: #F0A18B; width: 38px; height: 38px; border-radius: 99px; position: absolute; top: 20px; right: 20px; color: white; font-weight: bold; cursor: pointer; text-decoration: none;}
    #acc-deleted > .c > .icon { font-size: 80px; margin: 30px 0 40px; display: block; }
    #acc-deleted > .c > .deleted { font-size: 60px; font-weight: bold; }
    #acc-deleted > .c > .again { font-size: 36px; margin-top: 30px; font-weight: bold; }

@media(max-width: 1439px) {
    #stories { max-width: 1100px; }
    #tech > .youtube-w-w { width: 900px; }
    #three-steps > .step { width: 240px; margin: 0px 30px; }

    #stories > .story { width: 290px; margin: 0 20px; padding: 50px 30px; }
        #stories > .story > img { width: 180px; }
        #stories > .story > .quote { font-size: 22px; }

    #cures { padding: 100px 60px 40px; }
        #cures > .t > h2 { font-size: 34px; }
        #cures > .img-w { width: 400px; right: 20px; }
            #cures > .img-w > img { width: 400px }

    a.register { width: 200px; height: 50px; font-size: 22px; border-radius: 5px; }
}

@media(max-width: 1199px) {
    #tech > .l > img { width: 200px; }
    #tech > .r { font-size: 15px; }
}

@media(max-width:1023px) {
    #banner > .c > .learn { border-width: 1px; }

    #refer { padding: 0; height: 95vw; background-position: right top; margin-top: -9.4vw; margin-bottom: 290px; }
        #refer > .t { background: white; width: 100%; bottom: -290px; padding: 20px 40px 0; text-align: center; box-sizing: border-box; position: absolute; height: 290px; }
            #refer > .t > p { font-size: 16px; width: auto; }
            #refer > .t > .register { display: none; }
            #refer > .t > img { width: 80%; }

    #tech { height: auto; background: no-repeat; }
        #tech > h2 { font-size: 24px; }
        #tech > .t { font-size: 16px; margin: 20px auto; }
        #tech > .youtube-w-w { width: 100%; }

    #earn-per { margin: 0 20px; padding: 0 0 20px; }
        #earn-per > h2 { font-size: 30px; }
        #earn-per > h3 { font-size: 18px; }

    #three-steps { flex-direction: column; align-items: center; margin-bottom: 0; }
        #three-steps > .step { margin: 0 0 40px; width: 300px; }
            #three-steps > .step > .h { font-size: 20px; }
            #three-steps > .step > .t { font-size: 16px; }

    #rewards { height: 100vw; background-position: right; margin-bottom: 200px; }
        #rewards > .t { top: 100vw; left: 0; padding: 20px; width: auto; }
            #rewards > .t > ul { color: #0268AD; font-size: 15px; }
            #rewards > .t > .h2 { font-size: 24px; }
            #rewards > .t > .h3 { font-size: 18px; }
            #rewards > .t > .register { margin: 0 auto; }

    #stories { flex-direction: column; align-items: center; margin-top: 320px; }
        #stories > .story { margin-bottom: 40px; }
            #stories > .story > .quote { font-size: 16px; }

    #cures { padding: 0; display: flex; flex-direction: column; background: none; }
        #cures > .t { width: auto; order: 2; padding: 30px 30px; font-size: 16px; }
            #cures > .t > h2 { font-size: 30px; text-align: center; }
        #cures > .img-w { position: relative; width: 100%; background: linear-gradient(#FFFFFF, #CCEDF5); right: auto; text-align: center; display: flex; justify-content: center; }
            #cures > .img-w > img { width: 300px; }

    #earn-bar { flex-direction: column; }
        #earn-bar > .t { margin: 0 0 10px; font-size: 24px; }

    a.register { width: 148px; height: 47px; font-size: 16px; }
}

@media(max-width:767px) {
    #banner { height: 64vw; }
        #banner > .c { width: 45%; position: relative; left: 5vw; }
            #banner > .c > .t { font-size: 5vw; }
            #banner > .c > .register { font-size: 14px; width: 120px; display: block; margin: 40px auto; text-align: center; padding: 8px 20px; }
            #banner > .c > .learn { width: 65%; }

    #tech { display: block; padding: 40px 20px; }
        #tech > .l { text-align: center; }
        #tech > .r { width: auto; margin: 20px 0 0; }


    #rewards > .t > .register { margin-top: 20px; margin-left: calc(50% - 76px); }
}
