@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap");
/* font-family: 'Open Sans', sans-serif; */
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;700&display=swap");
/* font-family: 'Oswald', sans-serif; */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Open Sans", sans-serif;
}

nav {
  background-color: #2a2a2a;
  height: 5.5em;
}

.flexNav {
  display: flex;
  justify-content: space-around;
  padding-top: 17px;
}

.nav1,
.nav2 {
  display: flex;
  align-items: center;
  width: 18em;
  height: 3em;
}

.nav1 h1 span {
  color: rgb(214, 214, 214);
  font-family: Oswald;
  font-size: 29.7216px;
  font-weight: 700;
  line-height: 48px;
}

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

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

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

/* ----------------------------   WATCH THIS  -------------------------- */

#watchThis {
  height: auto;
  padding-bottom: 2em;
}

.flexWatch_header {
  display: flex;
  justify-content: center;
  padding-top: 1.78em;
}

.watch_header h1 {
  color: rgb(193, 14, 14);
  font-family: Oswald;
  font-size: 46.5632px;
  font-weight: 700;
  text-align: center;
  line-height: 75px;
}

.watch_header h1 u {
  font-family: Oswald;
  font-size: 46.5632px;
  font-weight: 700;
  line-height: 75px;
}

.flex_bgvideo {
  display: flex;
  justify-content: center;
  padding-top: 1.3em;
}

.videoBgJt {
  transition: 0.4s ease-in-out;
  width: 51em;
  height: 28.7em;
}

.videoBgJt iframe {
  width: 100%;
  height: 100%;
}

/* -----------------------------  NOW WHAT  ------------------------------- */

#nowWhatAll {
  height: auto;
  padding-bottom: 2em;
}

.flexNowWhat {
  display: flex;
  justify-content: center;
}

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

.flexYouMuch {
  display: flex;
  justify-content: center;
  padding-top: 1em;
}

.muchPrg {
  width: 40em;
}

.muchPrg p {
  color: rgb(0, 0, 0);
  font-family: "Open Sans";
  font-size: 21.7952px;
  font-weight: 400;
  line-height: 31px;
  text-align: center;
}

/* ---------------------  three ways ----------------------- */
#three_ways {
  height: auto;
  padding-bottom: 3em;
}

.flex_ways {
  display: flex;
  justify-content: center;
  padding-top: 10px;
}

.ways_bg {
  background-color: #e5e5e5;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60em;
  height: 15.8em;
}

.grid_ways {
  display: grid;
  grid-template-columns: repeat(3, 20em);
}

.way1,
.way2,
.way3 {
  height: 16em;
  text-align: center;
  padding-top: 2em;
}

.way1 p,
.way2 p,
.way3 p {
  color: rgb(0, 0, 0);
  font-family: "Open Sans";
  font-size: 23.7776px;
  line-height: 34px;
}

.flexStep1 {
  width: 13em;
}

.flexWay1 {
  display: flex;
  justify-content: center;
  padding-top: 1em;
}

.flexStep2 {
  display: flex;
  justify-content: center;
  padding-top: 1em;
}

.flexMediaIcons {
  display: flex;
  justify-content: center;
  padding-top: 1em;
}

.gridIcons {
  display: grid;
  grid-template-columns: repeat(3, 4.5em);
}

.icon1,
.icon2,
.icon3 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5px;
  height: 4em;
}

.icon1 img {
  max-width: 3em;
}

.icon2 img {
  max-width: 4.4em;
}

.icon3 img {
  max-width: 3em;
}

.flexStep3 {
  display: flex;
  justify-content: center;
  padding-top: 1em;
}

.flexKeep {
  width: 16.8em;
}

.flexKeep p {
  color: rgb(0, 0, 0);
  font-family: "Open Sans";
  font-size: 17.8336px;
  font-weight: 400;
  line-height: 25px;
}

.flexMedia2 {
  display: flex;
  justify-content: center;
  padding-top: 0.2em;
}

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

.media1,
.media2 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 3em;
}

.media1 img {
  max-width: 11em;
}

.media2 img {
  max-width: 10.9em;
}

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

#whoJt {
  height: 32.9375rem;
  background-color: #494949;
}

.flexJt {
  display: flex;
  justify-content: center;
}

.gridJt {
  display: grid;
  grid-template-columns: 24.8em 35em;
}

.jt1,
.jt2 {
  height: 33em;
}

.jt1 {
  background: url(./images/media/jtfoxx.png) 0 0 / 25.0625rem 42.5rem;
  background-repeat: no-repeat;
}

.jt2 h1 {
  color: rgb(197, 197, 197);
  font-family: Oswald;
  padding-top: 40px;
  font-size: 35.6656px;
  padding-left: 10px;
  font-weight: 700;
  line-height: 58px;
}

.jt2 p {
  color: rgb(223, 223, 223);
  font-family: "Open Sans";
  padding-top: 17px;
  font-size: 15.8512px;
  padding-left: 10px;
  font-weight: 400;
  line-height: 26px;
}

.jt_About {
  width: 32em;
}

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

#celebrity_moment {
  height: auto;
  background-color: #fdfdfd;
  padding-bottom: 4em;
}

.celebrityHeader h1 {
  text-align: center;
  padding-top: 1.9em;
  color: rgb(0, 0, 0);
  font-family: Oswald;
  font-size: 40.6192px;
  font-weight: bold;
  line-height: 41px;
}

.celebrityPrg p {
  text-align: center;
  color: rgb(0, 0, 0);
  font-family: "Open Sans";
  font-size: 17.8336px;
  font-weight: 600;
  line-height: 29px;
  padding-top: 50px;
}

.mansoryLayout {
  padding-top: 3em;
}

.flexMas {
  display: flex;
  justify-content: center;
  align-items: center;
}

.gridMas {
  display: grid;
  grid-template-columns: repeat(5, 13em);
  grid-auto-flow: dense;
}

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

.gridMas .box1 {
  grid-column: span 2;
}

.gridMas .box7 {
  grid-column: span 2;
  grid-row: span 1;
  /* height: auto; */
}

.box4 {
  grid-row: span 2;
  height: auto;
}

.box8 {
  grid-row: span 2;
  grid-column: span 2;
}

.box9 {
  grid-row: span 2;
  grid-column: span 1;
  height: auto;
}

.box12 {
  height: auto;
  grid-row: span 3;
}

.box11 {
  grid-column: span 1;
}

.box10 {
  grid-row: span 3;
  height: auto;
}

.box16 {
  grid-column: span 2;
}

.box14 {
  grid-row: span 2;
  height: auto;
}

.box17 {
  grid-row: span 2;
  height: auto;
}

.box18 {
  grid-row: span 2;
  grid-column: 1/3;
  height: auto;
}

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

.box20 {
  grid-column: span 2;
}

.box22 {
  grid-column: span 2;
}

.box21 {
  grid-column: span 1;
}

/* mansoryImages=============== */

.box1 {
  background-image: url(../images/celebrity_moment/1.jpg);
  background-position: center;
  background-size: cover;
}

.box2 {
  background-image: url(../images/celebrity_moment/2.jpeg);
  background-position: center;
  background-size: cover;
}

.box3 {
  background-image: url(../images/celebrity_moment/3.JPG);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.box4 {
  background-image: url(../images/celebrity_moment/4.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.box5 {
  background-image: url(../images/celebrity_moment/5.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.box6 {
  background-image: url(../images/celebrity_moment/6.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.box7 {
  background-image: url(../images/celebrity_moment/7.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.box8 {
  background-image: url(../images/celebrity_moment/9.JPG);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.box9 {
  background-image: url(../images/celebrity_moment/8.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.box10 {
  background-image: url(../images/celebrity_moment/10.JPG);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.box11 {
  background-image: url(../images/celebrity_moment/11.JPG);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.box12 {
  background-image: url(../images/celebrity_moment/12.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.box13 {
  background-image: url(../images/celebrity_moment/13.JPG);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.box14 {
  background-image: url(../images/celebrity_moment/15.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.box15 {
  background-image: url(../images/celebrity_moment/14.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.box16 {
  background-image: url(../images/celebrity_moment/17.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.box17 {
  background-image: url(../images/celebrity_moment/16.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.box18 {
  background-image: url(../images/celebrity_moment/18.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.box19 {
  background-image: url(../images/celebrity_moment/22.JPG);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.box20 {
  background-image: url(../images/celebrity_moment/20.jpg);
  background-position: center;
  background-size: 90%;
  background-repeat: no-repeat;
  background-color: #05031d;
}

.box21 {
  background-image: url(../images/celebrity_moment/21.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.box22 {
  background-image: url(../images/celebrity_moment/19.jpeg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* =================  MEDIA FEATURES  ============ */

#mediaFeatures {
  height: auto;
  padding-bottom: 3em;
}

.featuresHeader h1 {
  text-align: center;
  padding-top: 60px;
  color: rgb(55, 70, 90);
  font-family: Oswald;
  font-size: 40.6192px;
  font-weight: 700;
  line-height: 41px;
}

.flexFeatures {
  display: flex;
  justify-content: center;
  margin-top: 3em;
  align-items: center;
}

.gridFeatures {
  display: grid;
  grid-template-columns: repeat(4, 14em);
}

.feat1,
.feat2,
.feat3,
.feat4,
.feat5,
.feat6,
.feat7,
.feat8,
.feat9,
.feat10,
.feat11,
.feat12 {
  margin: 5px;
  height: 17.4em;
}

.feats {
  height: 10em;
}

.feat1 {
  background: url(images/mediaFeatures/1.png) 0 -0.25rem / 13.4375rem 19.125rem;
}

.feat2 {
  background: url(images/mediaFeatures/2.jpg) 0 -0.25rem / 13.4375rem 19.125rem;
}

.feat3 {
  background: url(images/mediaFeatures/3.png) 0 -0.25rem / 13.4375rem 19.125rem;
}

.feat4 {
  background: url(images/mediaFeatures/4.png) 0 -0.25rem / 13.4375rem 19.125rem;
}

.feat5 {
  background: url(images/mediaFeatures/5.png) 0 -0.25rem / 13.4375rem 19.125rem;
}

.feat6 {
  background: url(images/mediaFeatures/6.png) 0 -0.25rem / 13.4375rem 19.125rem;
}

.feat7 {
  background: url(images/mediaFeatures/7.jpg) 0 -0.25rem / 13.4375rem 19.125rem;
}

.feat8 {
  background: url(images/mediaFeatures/8.jpg) 0 -0.25rem / 13.4375rem 19.125rem;
}

.feat9 {
  background: url(images/mediaFeatures/9.png);
  background-position: center;
  background-size: cover;
}

.feat10 {
  background: url(images/mediaFeatures/10.jpg);
  background-position: center;
  background-size: cover;
}

.feat11 {
  background: url(images/mediaFeatures/11.jpg);
  background-position: center;
  background-size: cover;
}

.feat12 {
  background: url(images/mediaFeatures/12.jpg);
  background-position: center;
  background-size: cover;
}

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

footer {
  height: 11.3em;
  background-color: #1e1e1e;
  padding-top: 2em;
}

.footerFlex {
  display: flex;
  justify-content: center;
}

.footerMedia {
  text-align: center;
  color: rgb(232, 232, 232);
  font-family: "Open Sans";
  font-size: 13.8704px;
  font-weight: 400;
  line-height: 22px;
  padding-top: 1em;
  font-family: "Open Sans";
}

.footerMedia a {
  text-decoration: none;
  color: #fff;
  font-family: "Open Sans";
}

.footerMedia a:hover {
  text-decoration: underline;
}

.gridIcon {
  display: grid;
  grid-template-columns: repeat(6, 5em);
}

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

.icon1 {
  background-image: url(images/footer_media_icons/facebook.png);
  background-position: center;
  background-size: cover;
}

.icon2 {
  background-image: url(images/footer_media_icons/twitter.png);
  background-position: center;
  background-size: cover;
}

.icon3 {
  background-image: url(images/footer_media_icons/instagram.png);
  background-position: center;
  background-size: cover;
}

.icon4 {
  background-image: url(images/footer_media_icons/youtube.png);
  background-position: center;
  background-size: cover;
}

.icon5 {
  background-image: url(images/footer_media_icons/tiktok.png);
  background-position: center;
  background-size: cover;
}

.icon6 {
  background-image: url(images/footer_media_icons/linkedin.png);
  background-position: center;
  background-size: cover;
}