@media (max-width: 1020px) {
    .gridHeader {
        width: auto;
    }
}

@media (max-width: 430px) {
    .headerLinks ul li {
        padding-right: 20px;
    }

    .headerLinks ul li a {
        font-size: 12.8608px;
    }
}

@media (max-width: 330px) {
    .headerLinks ul li a {
        font-size: 10.8608px;
    }
}

@media (max-width: 1220px) {

    .cont1 {
        background: url(images/jtonstage.png) 0 0 / 24.8125rem 40.0625rem;
        background-repeat: no-repeat;
        background-position: center;
        height: 40em;
    }

    .gridContent {
        display: grid;
        grid-template-columns: repeat(1, 30em);
        margin-top: 5em;
    }

    .cont2 {
        height: auto;
    }

    .cont2 {
        grid-row: 1/2;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .contentPrg h2 {
        font-size: 48.8624px;
    }

    .cont2Text {
        width: 100%;
        height: 100%;
        margin-left: 0;
    }

    .contentPrg span {
        background-color: transparent;
    }

}

@media (max-width: 500px) {
    .gridContent {
        margin-top: 0;
    }

    main {
        padding-bottom: 2em;
    }

    .cont2Text {
        text-align: center;
    }

    .cont2Text {
        width: auto;
    }

    .contentPrg h3 {
        font-size: 21.7824px;
    }

    .contentPrg h1 {
        font-size: 69.422px;
        line-height: 50px;
    }

    .contentPrg h2 {
        font-size: 32px;
    }

    .contentPrg h4 {
        color: rgb(255, 255, 255);
        font-family: Roboto;
        font-size: 16px;
        margin-top: -20px;
    }

    .contentPrg span {
        font-size: 16px;
        padding-left: 0;
    }

    .cont1 {
        display: none;
    }
}

@media (max-width: 370px) {
    main {
        padding-bottom: 2em;
    }

    .contentPrg h3 {
        font-size: 21.7824px;
    }

    .contentPrg h1 {
        font-size: 59.422px;
        line-height: 50px;
    }

    .contentPrg h2 {
        font-size: 28px;
    }

    .contentPrg h4 {
        font-size: 12px;
        margin-top: -20px;
    }

    .contentPrg span {
        font-size: 12px;
        padding-left: 0;
    }
}

/* =============   LISTEN AND WATCH SECTION   =========== */

@media (max-width: 880px) {
    .listenImg img {
        max-width: 40em;
    }
}

@media (max-width: 570px) {
    .listenImg img {
        max-width: 30em;
    }
}

@media (max-width: 430px) {
    .listenImg img {
        max-width: 20em;
    }
}

@media (max-width: 1050px) {
    .gridMediaLinks {
        display: grid;
        grid-template-columns: repeat(1, 20em);
    }

    .listenMedia1 img {
        max-width: 14em;
        object-fit: cover;
    }

    .offImg img {
        max-width: 17em;
    }
}


@media (max-width: 500px) {
    .listenMedia1 img {
        max-width: 10em;
        object-fit: cover;
    }

    .listenMedia1 {
        margin-top: 1em;
    }

    .offImg img {
        max-width: 12em;
    }
}

/* ========================  about the show ============ */

@media (max-width: 990px) {
    #aboutShow {
        background-attachment: scroll;
    }

    .gridShow {
        display: grid;
        grid-template-columns: repeat(1, 30em);
    }

    .show1 {
        display: flex;
        justify-content: center;
        text-align: center;
        padding-bottom: 1em;
        height: auto;
    }

    .aboutShowText {
        height: 4em;
    }

    .shPrg p {
        font-size: 17.8144px;
    }
}

@media (max-width: 500px) {
    .aboutShowText {
        height: 3em;
    }

    .shText {
        width: 18em;
        height: auto;
    }

    .shPrg p {
        font-size: 14px;
    }

    .show2 {
        background: url(images/mobile.png);
        background-size: 50%;
        background-repeat: no-repeat;
        background-position: center;
        height: 20em;
    }
}

/* ======================  JT AS SEEN ON ===================== */

@media (max-width: 1020px) {
    .compLogos img {
        max-width: 43em;
        padding-top: 1em;
    }


    .seenOnText {
        text-align: center;
        padding-top: 4em;
    }

    #seenOn {
        height: 15.3em;
    }
}

@media (max-width: 720px) {
    .compLogos img {
        max-width: 33em;
        padding-top: 2em;
    }
}


@media (max-width:500px) {
    #seenOn {
        height: 10em;
    }

    .compLogos img {
        max-width: 33em;
        padding-top: 0;
    }

    .seenOnText {
        text-align: center;
        padding-top: 3em;
        padding-bottom: 1em;
    }

    .compLogos img {
        max-width: 23em;
    }
}

@media (max-width: 340px) {
    .compLogos img {
        max-width: 21em;
    }
}

/* ------------------  Listen to the ================== */

@media (max-width: 1070px) {
    .listenHeader h1 {
        color: rgb(255, 255, 255);
        font-family: Roboto;
        font-size: 39.4432px;
        font-weight: 900;
        line-height: 90px;
        text-align: center;
        padding-top: 2em;
    }
}

@media (max-width: 660px) {
    .listenHeader h1 {
        color: rgb(255, 255, 255);
        font-family: Roboto;
        font-size: 29.4432px;
        font-weight: 900;
        line-height: 90px;
        text-align: center;
        padding-top: 2em;
    }

    .contentBox {
        background-color: #000;
        height: 15em;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
        width: 26em;
    }
}

@media (max-width: 500px) {
    .listenHeader h1 {
        color: rgb(255, 255, 255);
        font-family: Roboto;
        font-size: 22px;
        padding-top: 3em;
    }

    .contentBox {
        background-color: #000;
        height: 10em;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
        width: 20em;
    }
}


@media (max-width: 370px) {
    #listen {
        background: url(images/listen.jpg) repeat 50% 96% / cover;
        height: auto;
        padding-bottom: 8em;
    }

    .listenHeader h1 {
        color: rgb(255, 255, 255);
        font-family: Roboto;
        font-size: 14px;
        padding-top: 4em;
    }

    .contentBox {
        background-color: #000;
        height: 10em;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
        width: 15em;
        text-align: center;
    }
}

/* ==============  ABOUT JT FOXX ======================== */

@media (max-width: 970px) {
    .gridJt {
        display: grid;
        grid-template-columns: repeat(1, 30em);
    }
}

@media (max-width: 650px) {
    .imgFrame::before {
        content: '';
        border: none;
    }

    .jtf1,
    .jtf2 {
        height: 31em;
        margin: 0;
    }

    .jtf2 {
        padding-left: 20px;
    }

    .jtfoxxHeader h3 {
        font-size: 39.536px;
        line-height: 30px;
    }

    .jtText p {
        color: rgb(0, 0, 0);
        font-family: Roboto;
        font-size: 15.8144px;
        font-weight: 400;
        line-height: 32px;
        padding-top: .7em;
    }
}

@media (max-width: 480px) {
    .gridJt {
        display: grid;
        grid-template-columns: repeat(1, 24em);
    }

    .jtf2 {
        display: flex;
        justify-content: center;
        height: auto;
    }

    .jtf1 {
        height: auto;
    }


    .imgFrame {
        height: 23em;
        width: 23em;
    }

    .jtsBorder {
        width: 24em;
        padding-top: 1em;
    }
}

@media (max-width: 390px) {
    .gridJt {
        display: grid;
        grid-template-columns: repeat(1, 20em);
    }

    .jtf2 {
        display: flex;
        justify-content: center;
        height: auto;
    }

    .jtf1 {
        height: auto;
    }


    .imgFrame {
        height: 18em;
        width: 17em;
    }

    .jtsBorder {
        width: 18em;
        padding-right: 10px;
        padding-top: 1em;
    }
}

/* ====================  WHAT OTHERS SAY  ======================= */

@media (max-width: 700px) {
    .whatHeader img {
        max-width: 50em;
    }
}

@media (max-width: 530px) {
    .whatHeader {
        display: flex;
        justify-content: center;
        padding-top: 3em;
    }

    .whatHeader img {
        max-width: 30em;
    }
}


@media (max-width: 1000px) {
    .gridVideoPlay {
        display: grid;
        grid-template-columns: repeat(2, 20.9em);
    }

    .gridVideoPlay2 {
        display: grid;
        grid-template-columns: repeat(2, 20.9em);
    }
}

@media (max-width: 660px) {
    .gridVideoPlay {
        display: grid;
        grid-template-columns: repeat(1, 20.9em);
    }

    .gridVideoPlay2 {
        display: grid;
        grid-template-columns: repeat(1, 20.9em);
    }
}

@media (max-width: 900px) {
    .gridFeatures {
        display: grid;
        grid-template-columns: repeat(3, 14em);
    }

    .feat9align {
        height: 17.4em;
        background-position: center;
    }
}

@media (max-width: 690px) {
    .gridFeatures {
        display: grid;
        grid-template-columns: repeat(2, 14em);
    }

    .feat9align2 {
        height: 17.4em;
        background-position: center;
    }
}

@media (max-width: 450px) {
    .gridFeatures {
        display: grid;
        grid-template-columns: repeat(1, 14em);
    }

    .feat9align2 {
        height: 10em;
        background-position: center;
    }
}

/* ============== JOIN TEAM ================= */

@media (max-width: 690px) {
    #joinTeam {
        height: auto;
        padding-bottom: 4em;
    }

    .joinContent {
        padding-top: 5em;
        text-align: center;
    }

    .joinContent h1 {
        color: rgb(255, 255, 255);
        font-family: Roboto;
        text-align: center;
        font-size: 39.4432px;
        font-weight: 900;
        line-height: 40px;
    }

    .joinContent p {
        padding-top: 1em;
        font-size: 16.8144px;
        line-height: 32px;
    }

    .attendBtn {
        text-align: center;
        margin-top: 3em;
    }
}

@media (max-width: 510px) {
    .joinContent h1 {
        color: rgb(255, 255, 255);
        font-family: Roboto;
        text-align: center;
        font-size: 29.4432px;
        font-weight: 900;
        line-height: 40px;
    }

    .joinContent p {
        padding-top: 1em;
        font-size: 16.8144px;
        line-height: 32px;
    }

    .attendBtn a {
        padding: 14px 30px;
    }
}

@media (max-width: 350px) {
    .joinContent h1 {
        color: rgb(255, 255, 255);
        font-family: Roboto;
        text-align: center;
        font-size: 23px;
        font-weight: 900;
        line-height: 30px;
    }

    .joinContent p {
        padding-top: .7em;
        font-size: 16px;
        line-height: 32px;
    }

    .attendBtn a {
        padding: 14px 30px;
    }

    .attendBtn {
        text-align: center;
        margin-top: 3em;
    }
}

/* <!-- ==================  CELEBRITY MOMENT   ======================== --> */

@media (max-width: 1070px) {
    .gridMas {
        display: grid;
        grid-template-columns: repeat(3, 13em);
        grid-auto-flow: dense;
    }

    .box19 {
        grid-column: span 2;
        grid-row: span 2;
        /* height: 15em; */
    }

    .box12 {
        grid-row: span 1;
    }

    .box18 {
        grid-row: 2/2;
    }

    .box20 {
        grid-row: 3/3;
    }

    .box17 {
        grid-row: span 1;
    }

    .box14 {
        grid-row: span 1;
    }

    .box10 {
        grid-row: span 2;
    }

    .box22 {
        grid-column: span 1;
    }
}

@media (max-width: 650px) {
    .gridMas {
        display: grid;
        grid-template-columns: repeat(2, 13em);
        grid-auto-flow: dense;
    }

    .box18 {
        grid-row: span 1;
        grid-column: span 1;
    }

    .box4 {
        grid-row: span 1;
    }

    .box9 {
        grid-row: 6/4;
    }

    .box19 {
        grid-column: span 1;
        grid-row: span 2;
    }

    .box17 {
        height: 10em;
    }

    .box21 {
        grid-row: span 2;
    }

    .box22 {
        grid-column: span 2;
    }
}

@media (max-width: 420px) {
    .gridMas {
        display: block;
    }

    .box1,
    .box2,
    .box3,
    .box4,
    .box5,
    .box6,
    .box7,
    .box8,
    .box9,
    .box10,
    .box11,
    .box12,
    .box13,
    .box14,
    .box15,
    .box16,
    .box17,
    .box18,
    .box19,
    .box20,
    .box21,
    .box22 {
        display: grid;
        height: 13em;
        margin: 4px;
        width: 15em;
    }
}

/* ======================================  founer============= */

@media (max-width: 970px) {
    .gridPeoples img {
        max-width: 50em;
        padding-top: 6em;
        transition: .3s ease-in-out;
    }
}

@media (max-width: 830px) {
    .gridPeoples img {
        max-width: 30em;
        padding-top: 1em;
        transition: .3s ease-in-out;
    }

    .founderHeader h1 {
        font-size: 44.4432px;
        line-height: 60px;
    }

    .offPrg {
        width: 24em;
        text-align: center;
    }


    .flexJoin {
        display: flex;
        justify-content: center;
        margin-top: 2em;
    }

    .offPrg p {
        color: rgb(45, 6, 134);
        font-family: Roboto;
        padding-top: 1em;
        font-size: 14px;
        font-weight: 500;
        line-height: 24px;
    }

    #founder {
        background: url(images/founder/backg.svg) repeat rgb(238, 238, 238) 50% 50% / cover;
        height: 30rem;
    }
}

@media (max-width: 440px) {
    .gridPeoples img {
        max-width: 20em;
        padding-top: 2em;
        transition: .3s ease-in-out;
    }

    .founderHeader h1 {
        font-size: 28px;
        line-height: 20px;
    }

    .offPrg {
        width: 18em;
        text-align: center;
    }

    .flexJoin {
        display: flex;
        justify-content: center;
        margin-top: 2em;
    }

    .offPrg p {
        color: rgb(45, 6, 134);
        font-family: Roboto;
        padding-top: 1em;
        font-size: 14px;
        font-weight: 500;
        line-height: 24px;
    }

    #founder {
        background: url(images/founder/backg.svg) repeat rgb(238, 238, 238) 50% 50% / cover;
        height: 25rem;
    }
}

/* ================  FOOTER ================ */

@media (max-width: 570px) {
    .gridFooterMedia {
        display: grid;
        grid-template-columns: repeat(3, 3em);
    }

    footer {
        background: rgb(23, 36, 116);
        height: auto;
        padding-bottom: 3em;
    }

    .footerMediaText span {
        color: rgb(255, 255, 255);
        font-family: Roboto;
        font-size: 13.8704px;
        font-weight: 400;
        line-height: 22px;
    }
}