/*--- HEADER ---*/
.header {
    background-color: #000000;
    border-bottom: 1px solid #CCC;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 1;
    width: 100%;
}

@media only screen and (min-width: 1024px) {
    .header { 
        background-color: transparent;
    }

        .header::after {
            background: linear-gradient(to right, rgba(94, 94, 94, 0), rgba(94, 94, 94, 0.30));
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            content: '';
            display: block;
            height: 100%;
            position: absolute;
            right: 0;
            width: 45%;
            z-index: -1;
        }
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 13px 15px;
}

@media only screen and (min-width: 1024px) {
    .header-container {
        max-width: 1300px;
        padding: 24px 0;
    }
}


.header-logo {
    flex: 0 0 145px;
    width: 145px;
}

@media only screen and (min-width: 1024px) {
    .header-logo {
        width: 311px;
    }
}

.header-button {
    border-radius: 30px;
    padding: 0 20px;
    background-color: #ff4200;
    color: #000;
    font-weight: 600;
    font-size: .875rem;
    line-height: normal;
    letter-spacing: 1.12px;
    text-decoration: none;
    border: none;
    display:inline-flex;
    align-items: center;
    justify-content:center;
    text-transform: uppercase;
    height: 44px;
    transition: all 0.3s ease;
}


@media only screen and (min-width: 1024px) {
    .header-button {
        font-size: 16px;
        height: 53px;
    }
}

.header-button--hover:hover {
  background: #DC3900;
  cursor: pointer;
}
/*---/ END HEADER */


/* --- HERO --- */
.hero {
    position: relative;
    min-height: 100px;
    width: 100%;
}

.hero__container {
    display: flex;
    flex-flow: column wrap;
    position: relative;
    width: 100%;
}

.hero__container::after {
    background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.00) 100%);
    bottom: 0;
    content: '';
    display: block;
    height: 80px;
    position: absolute;
    width: 100%;
    z-index: 0;
}
@media only screen and (min-width: 1024px) {
    .hero__container::after {
        height: 400px;
    }
}

@media only screen and (min-width: 1024px) {
    .hero__container {
        display: flex;
        justify-content: space-between;
        flex-flow: row wrap;
    }

}

.hero__content {
    background-image: url('img/line-grid.png');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 0 -100px;
    color: #FFF;
    padding-top: 60px;
    text-align: center;
    position: relative;
    z-index: 5;
}

@media only screen and (min-width: 1024px) {
    .hero__content {
        flex: 0 0 55%;
        padding-left: 100px;
        padding-right: 100px;
        padding-top: 80px;
    }
}

@media only screen and (min-width: 1400px) {
    .hero__content {
        flex: 0 0 55%;
        padding-left: 200px;
        padding-right: 200px;
        padding-top: 80px; 
    }
}

.hero__content h1 {
    font-size: 4.625rem;
    font-weight: 300;
    line-height: 1;
    margin: 0;
}

.hero__content h2 {
    font-size: 1.875rem;
    font-weight: 300;
    margin: 0;
    line-height: 1;
}

.hero__body {
    margin-top: 24px;
    padding: 0 20px;
}

@media only screen and (min-width: 768px) {
    .hero__body {
        max-width: 400px;
        margin: auto;
    }
}

@media only screen and (min-width: 1024px) {
    .hero__body {
        max-width: none;
        margin: auto;
    }
}

.hero__body__heading {
    color: #FF4200;
    font-style: italic;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 10px;
}

.hero__body__summary {
    font-size: 1rem;
    line-height: 1.6;
    margin-top: 10px;
}

.hero__button {
    background-color: #000;
    box-shadow: 0 0 20px 15px #FF4200;
    border-radius: 50px;
    color: #FFF;
    display: block;
    font-size: 1.25rem;
    margin: auto;
    margin-top: 60px;
    padding: 20px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    width: calc(100% - 80px);
}

.hero__button:hover {
    box-shadow: 0 0 10px 10px #FF4200;
}

@media only screen and (min-width: 768px) {
    .hero__button {
        max-width: 250px;
    }
}

@media only screen and (min-width: 1024px) {
    .hero__button {
        max-width: 250px;
    }
}

.hero__disclaimer {
    color: #FF4200;
    font-size: 1.375rem;
    font-style: italic;
    font-weight: 600;
    line-height: 1.2;
    margin-top: 30px;
}

.hero__sponsor {
    color: #FFF;
    margin-top: 15px;
    text-align: center;
    position: relative;
    z-index: 5;
}


@media only screen and (min-width: 1024px) {
    .hero__sponsor {
        margin-left: 50%;
        flex: 0 0 50%;
        top: -75px;
    }
}

.hero__sponsor span {
    display: block;
    margin-bottom: 10px;
}

@media only screen and (min-width: 1024px) {
    .hero__sponsor span {
        display: inline-block;
        margin-right: 10px;
        position: relative;
        top: -10px;
    }
}

.hero__media {
    background-image: url('img/hero-mobile.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 288px;
    margin-top: 15px;
    order: 3;
    width: 100%;
}

@media only screen and (min-width: 768px) {
    .hero__media {
        height: 500px;
    }
}

@media only screen and (min-width: 1024px) {
    .hero__media {
        background-image: url('img/hero-mascot.png');
        height: 760px;
        flex: 0 0 45%;
        order: 0;
        margin-bottom: -180px;
        position: relative;
        top: -180px;
        z-index: 0;
    }

    .hero__media::before {
        background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.00) 100%);
        content: '';
        display: block;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        width: 337px;
    }
}
/*---/ END HERO */


/* COUNTDOWN */
.countdown {
    position: relative;
    z-index: 5;
}

.countdown__container {
    background: rgba(94, 83, 83, 0.30);
    border: 1px solid rgba(94, 83, 83, 0.50);
    border-radius: 20px;
    margin: auto;
    position: relative;
    width: calc(100% - 40px);
}

@media only screen and (min-width: 1024px) {
    .countdown__container {
        max-width: 1300px;
        padding: 40px 70px;
    }
}

.countdown__content {
    border-radius: inherit;
    inset: 1px;
    padding: 20px;
    position: relative;
    width: 100%;
}

@media only screen and (min-width: 1024px) {
    .countdown__content {
        align-items: center;
        display: flex;
        gap: 60px;
        justify-content: space-between;
        padding: 0;
    }
}

.countdown__heading {
    color: #FFF;
    text-align: center;
    font-size: 1.875rem;
    font-style: normal;
    font-weight: 300;
    line-height: 120%;
    margin-bottom: 10px;
    text-align: center;
}

@media only screen and (min-width: 1024px) {
    .countdown__heading {
        font-size: 1.5rem;
        line-height: 1;
    }
}

@media only screen and (min-width: 1024px) {
    .countdown__heading {
        font-size: 2rem;
        text-align: left;
    }
}

.countdown__link {
    color: #FF4200;
    display: block;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: underline;
}

.countdown__link:hover {
    text-decoration: none;
}

@media only screen and (min-width: 1024px) {
    .countdown__link {
        text-align: left;
    }
}

.countdown__date {
    align-items: center;
    display: flex;
    gap: 19px;
    justify-content: center;
    margin-top: 20px;
}

@media only screen and (min-width: 1024px) {
    .countdown__date {
        gap: 45px;
        margin-top: 0;
    }

}

.countdown__date__item {
    color: #fff;
    font-size: 2.5rem;
    font-weight: 200;
    line-height: 1;
    text-align: center;
}

@media only screen and (min-width: 1200px) {
    .countdown__date__item {
        align-items: flex-end;
        display: flex;
        gap: 5px;
        font-size: 5rem;
        line-height: .7;
    }
}

.countdown__date__value {
    min-width: 65px;
    text-align: center;
}

@media only screen and (min-width: 1200px) {
    .countdown__date__value {
        min-width: 105px;
        text-align: right;
    }
}

.countdown__date__label {
    font-size: 1rem;
}
/*---/ END COUNTDOWN */


/* GLOW 01 */
.glow-01,
.glow-02,
.glow-03 {
    min-height: 5px;
    position: relative;
    width: 100%;
}

.glow-01::before,
.glow-02::before,
.glow-03::before {
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: 0 0;
    content: '';
    display: block;
    max-width: 100%;
    position: absolute;
    z-index: 0;
}

.glow-01::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="721" height="1249" viewBox="0 0 721 1249" fill="none"><g filter="url(%23filter0_f_421_851)"><path d="M258.222 690.721C230.133 522.742 340.474 303.781 693.37 255.574C949.499 244.301 864.492 305.375 1120.77 580.227C1377.06 855.08 984.26 937.664 913.649 983.422C843.037 1029.18 782.173 922.511 714.595 836.363C647.017 750.216 286.311 858.701 258.222 690.721Z" fill="%23FF4200" fill-opacity="0.3"/></g><defs><filter id="filter0_f_421_851" x="0.0507812" y="0.316895" width="1460.51" height="1248.08" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="127" result="effect1_foregroundBlur_421_851"/></filter></defs></svg>');
    height: 500px;
    top: -200px;
    right: 0;
    width: 380px;
}

@media only screen and (min-width: 1024px) {
    .glow-01::before {
        height: 1000px;
        top: -300px;
        width: 746px;
        z-index: 0;
    }
}

.glow-02::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="441" height="1334" viewBox="0 0 441 1334" fill="none"><g filter="url(%23filter0_f_421_401)"><path d="M-375.731 308.407C-256.464 219.956 -42.9229 218.82 133.958 473.839C243.932 668.336 162.937 626.525 50.9119 934.634C-61.1135 1242.74 -280.444 970.365 -343.862 933.662C-407.281 896.959 -348.55 807.367 -308.399 720.7C-268.248 634.033 -494.998 396.857 -375.731 308.407Z" fill="%23FF4200" fill-opacity="0.3"/></g><defs><filter id="filter0_f_421_401" x="-664.771" y="0.636353" width="1104.97" height="1333.18" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="127" result="effect1_foregroundBlur_421_401"/></filter></defs></svg>');
    height: 1400px;
    top: -1000px;
    left: 0;
    width: 500px;
}

.glow-03::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="600" height="1299" viewBox="0 0 600 1299" fill="none"><g filter="url(%23filter0_f_421_402)"><path d="M528.419 1044.11C380.606 1029.99 221.198 887.898 260.487 580.038C308.973 361.927 341.159 447.204 630.624 293.284C920.089 139.364 900.717 488.536 923.265 558.254C945.814 627.972 842.211 655.221 754.369 692.733C666.528 730.246 676.232 1058.23 528.419 1044.11Z" fill="%23FF4200" fill-opacity="0.3"/></g><defs><filter id="filter0_f_421_402" x="0.439453" y="0.497314" width="1179.96" height="1298.06" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="127" result="effect1_foregroundBlur_421_402"/></filter></defs></svg>');
    height: 880px;
    top: -500px;
    right: 0;
    width: 500px;
}
/*---/ END GLOW */


/* STEPS */
.steps {
    margin-top: 120px;
    padding: 0 20px;
    position: relative;
    z-index: 5;
}

@media only screen and (min-width: 1024px) {
    .steps {
        margin-top: 130px;
    }
}

.steps__content {
    display: flex;
    flex-flow: column wrap;
    gap: 80px;
}

@media only screen and (min-width: 1024px) {
    .steps__content {
        flex-flow: row wrap;
        gap: 0;
        margin: auto;
        margin-top: 80px;
        max-width: 1300px;
        justify-content: center;
    }
}

.steps__item {
    color: #FFF;
    text-align: center;
}

@media only screen and (min-width: 1024px) {
    .steps__item {
        flex: 0 0 33.333333%;
        position: relative;
        padding-left: 40px;
        padding-right: 40px;
    }

    .steps__item::after {
        background-color: #FF4200;
        content: '';
        display: block;
        height: 5px;
        left: 0;
        position: absolute;
        top: 7px;
        width: 100%;
        z-index: -1;
    }

    .steps__item:first-child::after {
        left: 50%;
        width: 50%;
    }

        .steps__item:last-child::after {
            left: 0;
            width: 50%;
        }
}

.steps__item__number {
    color: #FFF;
    height: 44px;
    margin: auto;
    position: relative;
    width: 44px;
    z-index: 0;
}

.steps__item__number::before {
    background-color: #000;
    border-radius: 5px;
    content: '';
    display: block;
    height: 44px;
    left: 0;
    position: absolute;
    top: -10px;
    transform: rotate(45deg);
    width: 44px;
    z-index: 0;
}

.steps__item__number::after {
    background: linear-gradient(180deg, #FF4200 0%, #992800 100%);
    border-radius: 5px;
    content: '';
    display: block;
    flex-shrink: 0;
    filter: blur(10px);
    height: 88px;
    left: -24px;
    position: absolute;
    top: -28px;
    transform: rotate(45deg);
    width: 88px;
    z-index: -1;
}

    .steps__item__number span {
        font-weight: 600;
        font-size: 1.5rem;
        position: relative;
        top: -4px;
        z-index: 5;
    }

.steps__item__heading {
    font-size: 1.625rem;
    font-weight: 600;
    margin-top: 54px;
}

.steps__item__summary {
    font-size: 1.125rem;
    line-height: 1.6;
    margin-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

.steps__item__summary a {
    color: #FF4200;
    font-weight: 600;
    text-decoration: underline;
}

.steps__item__summary a:hover {
    text-decoration: none;
}
/*---/ END STEPS */

/* HOW IT WORKS */
.how-it-works {
    margin-top: 70px;
    position: relative;
    z-index: 5;
}

.how-it-works__container {
    padding-left: 20px;
    padding-right: 20px;
}

@media only screen and (min-width: 1024px) {
    .how-it-works__container {
        display: flex;
        flex-flow: row wrap;
        gap: 110px;
        max-width: 1300px;
        margin: auto;
    }
}

@media only screen and (min-width: 1024px) {
    .how-it-works__video {
        flex: 0 0 calc(50% - 55px);
        margin-top: 0;
    }
}

.how-it-works__heading {
    color: #FFF;
    font-size: 3.125rem;
    font-weight: 300;
}

.how-it-works__media {
    margin-top: 30px;
}

.how-it-works__registration {
    border: 1px solid rgba(94, 83, 83, 0.60);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(94, 83, 83, 0.30) 0%, rgba(15, 15, 15, 0.30) 100%);
    margin-top: 30px;
    padding: 20px 36px;
    text-align: center;
    width: 100%;
}

@media only screen and (min-width: 1024px) {
    .how-it-works__registration {
        align-items: center;
        display: flex;
        flex-flow: row wrap;
        gap: 45px;
    }
}

.how-it-works__registration__summary {
    color: #FFF;
}

@media only screen and (min-width: 1024px) {
    .how-it-works__registration__summary {
        flex: 0 0  50%;
        text-align: left;
    }
}

.how-it-works__registration__cta {
    margin-top: 15px;
}

@media only screen and (min-width: 1024px) {
    .how-it-works__registration__cta {
        flex: 0 0 calc(50% - 45px);
        margin: 0;
    }
}

.how-it-works__registration__cta a {
    border-radius: 50px;
    background: #FF4200;
    color: #000;
    display: inline-block;
    font-weight: 600;
    padding: 15px 20px;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.how-it-works__registration__cta a:hover {
  background: #DC3900;
  cursor: pointer;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio (9 ÷ 16 = 0.5625) */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.how-it-works__faq {
    margin-top: 30px;
}

@media only screen and (min-width: 1024px) {
    .how-it-works__faq {
        flex: 0 0 calc(50% - 55px);
        margin-top: 0;
    }
}

.how-it-works__faq__item {
    border-bottom: 1px solid #4D4D4D;
}

.how-it-works__faq__heading {
    color: #FFF;
    cursor: pointer;
    font-size: 1.625rem;
    font-weight: 600;
    line-height: 1.2;
    padding-top: 16px;
    padding-bottom: 16px;
    padding-right: 53px;
    position: relative;
}

.how-it-works__faq__heading::after {
    background-image: url('data:image/svg+xml,<svg width="44" height="45" viewBox="0 0 44 45" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="43.5" y="44.4014" width="43" height="43" rx="21.5" transform="rotate(-180 43.5 44.4014)" stroke="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M21.0869 14.9368C21.0342 14.9729 21 15.0332 21 15.1014V21.9014H14.2002C14.1367 21.9014 14.0791 21.9314 14.042 21.9782C14.0156 22.0122 14 22.0549 14 22.1014V23.7014L14.002 23.7284C14.0156 23.8261 14.0986 23.9014 14.2002 23.9014H21V30.7014C21 30.8118 21.0898 30.9014 21.2002 30.9014H22.7998C22.9102 30.9014 23 30.8118 23 30.7014V23.9014H29.7998C29.9102 23.9014 30 23.8118 30 23.7014V22.1014C30 21.9909 29.9102 21.9014 29.7998 21.9014H23V15.1014C23 14.9909 22.9102 14.9014 22.7998 14.9014H21.2002C21.1582 14.9014 21.1191 14.9145 21.0869 14.9368Z" fill="white"/></svg>');
    background-size: 43px 43px;
    background-repeat: no-repeat;
    content: '';
    display: block;
    height: 43px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 43px;
}

.how-it-works__faq__item.active .how-it-works__faq__heading::after {
    background-image: url('data:image/svg+xml,<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="44" y="44" width="44" height="44" rx="22" transform="rotate(-180 44 44)" fill="%23FF4200"/><path fill-rule="evenodd" clip-rule="evenodd" d="M26.9861 15.7226C26.9233 15.7108 26.8565 15.7292 26.8083 15.7775L22 20.5858L17.1918 15.7776C17.1469 15.7327 17.0849 15.7132 17.0256 15.7201C16.9829 15.7254 16.9417 15.7446 16.9088 15.7775L15.7775 16.9088L15.7597 16.9293C15.7003 17.0081 15.7058 17.12 15.7776 17.1918L20.5858 22L15.7775 26.8083C15.6994 26.8864 15.6996 27.0133 15.7776 27.0913L16.9087 28.2224C16.9867 28.3004 17.1136 28.3006 17.1917 28.2225L22 23.4142L26.8082 28.2224C26.8862 28.3004 27.0131 28.3006 27.0912 28.2225L28.2225 27.0912C28.3006 27.013 28.3004 26.8862 28.2224 26.8082L23.4142 22L28.2225 17.1917C28.3006 17.1136 28.3004 16.9867 28.2224 16.9087L27.0913 15.7776C27.0616 15.7479 27.0247 15.7295 26.9861 15.7226Z" fill="black"/></svg>');
}

.how-it-works__faq__content {
    color: #FFF;
    display: none;
    height: 0;
    opacity: 0;
    visibility: hidden;
}

.how-it-works__faq__item.active .how-it-works__faq__content {
    display: block;
    height: 100%;
    opacity: 1;
    visibility: visible;
}

.how-it-works__faq__content a {
    color: #FF4200;
    font-weight: 600;
    text-decoration: underline;
}

.how-it-works__faq__content a:hover {
    text-decoration: none;
}

.how-it-works__faq__content ol {
    margin-left: 0;
    padding-left: 18px;
}

.how-it-works__faq__content li {
    padding-bottom: 5px;
    padding-top: 5px;
}
/*---/ END HOW IT WORKS */


/* NINJATRADER LIVE */
.ninjatrader-live {
    color: #FFF;
    margin-top: 45px;
    overflow: hidden;
}

@media only screen and (min-width: 1024px) {
    .ninjatrader-live {
        margin-top: 100px;
    }
}

@media only screen and (min-width: 1024px) {
    .ninjatrader-live__container {
        display: flex;
        flex-flow: row nowrap;
        margin: auto;
        gap: 20px;
        overflow: hidden;
    }
}

@media only screen and (min-width: 1300px) {
    .ninjatrader-live__container {
        margin-left: calc((100% - 1300px) / 2); /* Align left with container */
        margin-right: 0; /* Extend to the right edge */
        width: calc(100vw - ((100% - 1300px) / 2)); /* Extend to right edge of viewport */
    }
}

.ninjatrader-live__content {
    padding-left: 20px;
    padding-right: 20px;
}


@media only screen and (min-width: 1024px) {
    .ninjatrader-live__content {
        flex: 0 0 420px;
    }
}

.ninjatrader-live__content p {
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.75;
}

.ninjatrader-live__hosts {
    overflow: hidden;
}

@media only screen and (min-width: 1024px) {
    .ninjatrader-live__hosts {
        display: flex;
        flex-flow: column nowrap;
        flex: 0 0 100%;
        overflow: hidden;
    }
}

.ninjatrader-live__hosts__wrapper {
    display: flex;
    flex-flow: row nowrap;
    gap: 20px;
    padding-left: 20px;
    padding-right: 20px;
}

@media only screen and (min-width: 1024px) {
    .ninjatrader-live__hosts__wrapper {
        order: 1;
        overflow: hidden;
        padding-left: 0;
        padding-right: 0;
    }
}

.ninjatrader-live__hosts__item {
    background: linear-gradient(180deg, rgba(94, 83, 83, 0.30) 0%, rgba(15, 15, 15, 0.30) 100%);
    border: 1px solid rgba(94, 83, 83, 0.60);
    border-radius: 20px;
    flex: 0 0 310px;
    padding: 45px 30px 0 30px;
    text-align: center;
}

.ninjatrader-live__hosts__title {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: .8;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.ninjatrader-live__hosts__name {
    font-size: 1.25rem;
    margin-top: 9px;
}

.ninjatrader-live__hosts__image {
    margin: auto;
    margin-top: 25px;
    overflow: hidden;
    width: 200px;
}

.ninjatrader-live__hosts__image img {
    height: 100%;
    object-fit: cover;
    margin: 0;
    width: 100%;
}

.ninjatrader-live__controls {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 30px;
    margin-top: 30px
}

@media only screen and (min-width: 1024px) {
    .ninjatrader-live__controls {
        order: 0;
        margin-top: 0;
        margin-bottom: 30px;
        width: calc(1300px - 420px);
        justify-content: flex-end;
    }
}
/*---/ END NINJATRADER LIVE */


/* MISS OUT CTA */
.miss-out {
    background: linear-gradient(180deg, rgba(94, 83, 83, 0.30) 0%, rgba(15, 15, 15, 0.30) 100%);
    background-image: radial-gradient(circle at 50% -90%, rgba(255, 66, 0, .20), transparent);
    border: 1px solid rgba(94, 83, 83, 0.60);
    border-radius: 20px;
    color: #FFF;
    margin: auto;
    margin-top: 30px;
    padding: 12px;
    position: relative;
    width: calc(100% - 40px);
    z-index: 5;
}

@media only screen and (min-width: 1024px) {
    .miss-out {
        margin: auto;
        margin-top: 124px;
        max-width: 1300px;
    }
}

.miss-out__container {
    padding: 30px 12px;
}

@media only screen and (min-width: 1024px) {
    .miss-out__container {
        align-items: center;
        display: flex;
        flex-flow: row wrap;
        padding: 50px 70px;
    }
}

@media only screen and (min-width: 1024px) {
    .miss-out__heading {
        flex: 0 0 45%;
        padding-right: 74px;
    }
}

@media only screen and (min-width: 1024px) {
    .miss-out__content {
        border-left: 1px solid #4D4D4D;
        flex: 0 0 55%;
        padding-left: 74px;
    }
}

.miss-out__heading__item {
    font-size: 2.25rem;
    font-weight: 300;
    line-height: 1.3;
    text-align: center;
}

@media only screen and (min-width: 1024px) {
    .miss-out__heading__item {
        font-size: 3rem;
        text-align: left;
    }
}

.miss-out__body {
    font-size: 1.25rem;
    line-height: 1.75;
    text-align: center;
}

@media only screen and (min-width: 1024px) {
    .miss-out__body {
        text-align: left;
    }
}

.miss-out__cta {
    background-color: #000;
    box-shadow: 0 0 20px 10px #FF4200;
    border-radius: 50px;
    color: #FFF;
    display: block;
    font-size: 1.25rem;
    margin: auto;
    margin-top: 60px;
    text-align: center;
    padding: 20px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    width: calc(100% - 50px);
}

.miss-out__cta:hover {
    box-shadow: 0 0 10px 10px #FF4200;
}

@media only screen and (min-width: 1024px) {
    .miss-out__cta {
        margin-left: 0;
        margin-top: 45px;
        width: 250px;
    }
}
/*---/ END MISS OUT CTA */


/* DOTS */
.dots-01 {
    display: none;
}

@media (min-width: 1024px) {
    .dots-01 {
        display: block;
        margin-top: 35px;
        margin-left: auto;
        margin-right: auto;
        max-width: 1300px;
    }
}

.dots {
    margin: 30px 0 15px 20px
}

@media only screen and (min-width: 1024px) {
    .dots {
        margin-left: auto;
        margin-right: auto;
        max-width: 1300px;
    }
}
/*---/ END DOTS */


/* --- FOOTER --- */
.footer {
    background-color: transparent;
    position: relative;
    width: 100%;
    z-index: 5;
}

.footer .footer-container {
    padding: 20px;
}

@media only screen and (min-width: 1024px) {
    .footer .footer-container {
        max-width: 1330px;
        margin: auto;
    }
}

.footer .footer-container p {
  color: #fff;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.footer .footer-link {
  color: #fff;
  text-decoration: underline;
}