@media (max-width: 630px) {
  .flexNav {
    display: flex;
  }

  nav {
    display: flex;
    justify-content: center;
    height: auto;
    padding-bottom: 1em;
  }

  .nav1,
  .nav2 {
    width: 13em;
  }

  .nav2 {
    text-align: right;
  }
}

@media (max-width: 435px) {
  .nav1,
  .nav2 {
    width: 10em;
  }
  .nav2 p {
    color: rgb(214, 214, 214);
    font-family: "Open Sans";
    font-size: 9.39167px;
    font-weight: 700;
    line-height: 15.3167px;
  }

  .nav2 span {
    color: rgb(214, 214, 214);
    font-family: "Open Sans";
    font-size: 9.39167px;
    font-weight: 400;
    line-height: 15.3167px;
  }

  .nav1 h1 {
    color: rgb(214, 214, 214);
    font-family: Oswald;
    font-size: 21.672px;
    font-weight: 400;
    line-height: 35px;
  }

  .nav1 h1 span {
    color: rgb(214, 214, 214);
    font-family: Oswald;
    font-size: 21.672px;
    font-weight: 400;
    line-height: 35px;
  }
}

@media (max-width: 390px) {
  .nav1,
  .nav2 {
    width: 9em;
  }

  .nav2 p {
    color: rgb(214, 214, 214);
    font-family: "Open Sans";
    font-size: 8.30492px;
    font-weight: 400;
    line-height: 13.5333px;
  }

  .nav2 span {
    color: rgb(214, 214, 214);
    font-family: "Open Sans";
    font-size: 8.30492px;
    font-weight: 700;
    line-height: 13.5333px;
  }
}

@media (max-width: 310px) {
  .nav1,
  .nav2 {
    width: 10em;
    text-align: center;
  }

  .nav1 {
    display: flex;
    justify-content: center;
  }
  .flexNav {
    display: block;
  }
}

/* -----------------------   WATCH THIS  -------------------- */
@media (max-width: 970px) {
  .watch_header h1 {
    color: rgb(193, 14, 14);
    font-family: Oswald;
    font-size: 31.7024px;
    font-weight: 700;
    line-height: 38px;
  }
  .watch_header h1 u {
    color: rgb(193, 14, 14);
    font-family: Oswald;
    font-size: 31.7024px;
    font-weight: 700;
    line-height: 38px;
  }
}

@media (max-width: 740px) {
  .watch_header {
    width: 16em;
  }

  .watch_header h1 {
    color: rgb(193, 14, 14);
    font-size: 23.1163px;
    font-weight: 700;
    line-height: 27.7167px;
  }

  .watch_header h1 u {
    color: rgb(193, 14, 14);
    font-size: 23.1163px;
    font-weight: 700;
    line-height: 27.7167px;
  }
}

@media (max-width: 270px) {
  .watch_header {
    width: 15em;
  }
}

/* ----------------------------  CONTENT  ------------------------------------ */

@media (max-width: 970px) {
  .videoBgJt {
    width: 41em;
    height: 18.7em;
  }
}

@media (max-width: 740px) {
  .videoBgJt {
    width: 31em;
    height: 16em;
  }
}

@media (max-width: 520px) {
  .videoBgJt {
    width: 21em;
    height: 13em;
  }
}

@media (max-width: 350px) {
  .videoBgJt {
    width: 15em;
    height: 10em;
  }
}

/* -----------------------------  NOW WHAT  ------------------------------- */
@media (max-width: 740px) {
  .muchPrg {
    width: 30em;
  }

  .nowWhat h1 {
    color: rgb(0, 0, 0);
    font-family: Oswald;
    font-size: 27.7392px;
    font-weight: 700;
    line-height: 39px;
  }

  .muchPrg p {
    font-family: "Open Sans";
    font-size: 17.8336px;
    font-weight: 400;
    line-height: 25px;
  }
}

@media (max-width: 530px) {
  .muchPrg {
    width: 20em;
  }
}

@media (max-width: 330px) {
  .muchPrg {
    width: 15em;
  }
}

/* ----------------------------  THREE WAYS  ----------------------- */

@media screen and (max-width: 980px) {
  .grid_ways {
    display: grid;
    grid-template-columns: repeat(3, 17em);
  }

  .ways_bg {
    width: auto;
  }
}

@media screen and (max-width: 840px) {
  .grid_ways {
    display: grid;
    grid-template-columns: repeat(1, 21em);
  }

  .ways_bg {
    width: auto;
    height: auto;
  }
  .way1,
  .way2,
  .way3 {
    height: 14em;
    padding-left: 10px;
    padding-right: 10px;
  }
}

@media (max-width: 365px) {
  .grid_ways {
    display: grid;
    grid-template-columns: repeat(1, 18em);
  }
}

@media (max-width: 305px) {
  .grid_ways {
    display: grid;
    grid-template-columns: repeat(1, 16em);
  }
}

/* -------------------------- ABOUT JT FOXX  --------------------------  */

@media (max-width: 985px) {
  #whoJt {
    height: auto;
    padding-bottom: 4em;
  }
  .gridJt {
    display: block;
  }

  .jt1 {
    display: none;
  }

  .jt2 {
    text-align: center;
  }

  .jt_About {
    width: 28em;
  }
}

@media (max-width: 480px) {
  .jt_About {
    width: 20em;
  }
}

@media (max-width: 350px) {
  .jt_About {
    width: 17em;
  }

  .jt2 {
    height: auto;
  }

  .jt2 h1 {
    color: rgb(197, 197, 197);
    font-family: Oswald;
    font-size: 21.672px;
    font-weight: 700;
    line-height: 30.6333px;
  }

  .jt2 p {
    color: rgb(223, 223, 223);
    font-family: "Open Sans";
    font-size: 13.8698px;
    font-weight: 400;
    line-height: 19.25px;
  }
}

/* -------------------------- CELEBRITIES WITH JT FOXX  --------------------------- */

@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;
  }
}

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

  footer {
    height: 15em;
    padding-top: 1em;
  }

  .icon1,
  .icon2,
  .icon3,
  .icon4,
  .icon5,
  .icon6 {
    height: 3.5em;
    margin: 3px;
  }
}

@media (max-width: 375px) {
  .celebrityHeader h1 {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ------------------------------  JT IN THE MEDIA  ------------------------------- */

@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;
  }
}

/* ----------------  FOOTER  --------------------- */

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

  footer {
    height: 15em;
    padding-top: 1em;
  }

  .icon1,
  .icon2,
  .icon3,
  .icon4,
  .icon5,
  .icon6 {
    height: 3.5em;
    margin: 3px;
  }
}

@media (max-width: 380px) {
  body {
    overflow-x: hidden;
  }
}

@media (max-width: 520px) {
  .videoBgJt {
    height: auto;
  }
}