.jm-headline {
  font-family: "proxima-nova", sans-serif;
  font-weight: 300;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #000000;
}

.jm-headline-bold {
  font-family: "proxima-nova", sans-serif;
  font-weight: 700;
  color: #000000;
}

.jm-desc {
  font-family: "proxima-nova", sans-serif;
  font-weight: 300;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #000000;
}

.jm-desc-call {
  font-family: "proxima-nova", sans-serif;
  font-weight: 300;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #000000;
}

.clear:before, .clear:after {
  content: ' ';
  display: table;
}

.clear {
  *zoom: 1;
}

.clear:after {
  clear: both;
}

/* Make the body 100% of the browser viewport height */
html, body {
  height: 100%;
  margin: 0;
}

#playerContainer {
  position: relative;
  width: 100vw;
  height: 52.73vw;
}

#playerContainer video {
  position: absolute;
  object-fit: contain;
}

#playerContainer > .ig-container {
  padding-top: 0 !important;
  width: 100vw;
  height: 52.73vw;
  z-index: 10;
  background: transparent;
}

#header-overlay {
  position: absolute;
  z-index: 10;
  color: #ffffff;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

#header-messaging-box {
  margin-top: 5vh;
  width: 100vw;
  height: 35vh;
}

#header-title {
  color: #000000;
  text-align: center;
  font-size: 4vh;
}

#header-title span {
  font-family: "proxima-nova", sans-serif;
  font-weight: 700;
}

#header-subtitle {
  font-family: "proxima-nova", sans-serif;
  font-weight: 600;
  margin-top: 1.8vh;
  color: #000000;
  text-align: center;
  font-size: 2vh;
}

#header-button-container {
  margin-top: 5vw;
}

#header-button-container {
  text-align: center;
  vertical-align: center;
  margin-top: 5vh;
}

#header-button {
  border-radius: 2em;
  box-shadow: 8px 7px 41px -8px rgba(150, 43, 41, 0.5);
  background-color: #F44945;
  font-family: "proxima-nova", sans-serif;
  text-decoration: none;
  font-size: 1.5vh;
  padding: 2vh 3vh;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #ffffff;
}

.header-button {
  line-height: 0.9;
  display: inline-block;
  margin: 0.8vh;
  color: #FFFFFF;
  font-size: 2.4vh;
  font-weight: 700;
  font-family: "proxima-nova", sans-serif;
  background-color: #F44945;
  padding: 2.6vh;
  border-radius: 3vh;
  box-shadow: 1px 7px 41px -8px rgba(150, 43, 41, 0.5);
}

.header-button:hover {
  color: #FFFFFF;
}

.header-button .subtitle {
  font-size: 1.4vh;
  color: rgb(255, 213, 236);
}

.header-button .subtitle strong {
  font-weight: 900;
  text-transform: uppercase;
  color: #FFFFFF;
}

/* Intro screen */
.intro-container {
  background-color: #333;
  overflow: hidden;
  position: relative;
  text-align: center;
  color: #ffffff;
}

/* =Simple animation up */
.slideInUp {
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.7s ease-out;
  transition: all 0.7s ease-out;
  -webkit-transform: translate3d(0, 50px, 0);
  transform: translate3d(0, 50px, 0);
}

.is-active .slideInUp {
  visibility: visible;
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slideInUp.slideInUp2 {
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

.slideInUp.slideInUp3 {
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s;
}

#jm-header {

}

#header-app-badges {
  margin-top: 8vh;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

#header-app-apple {
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  width: 11vh;
  height: 4vh;
  margin-right: 2vh;
  margin-left: 2vh;
  vertical-align: center;
}

#header-app-google {
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  width: 15vh;
  height: 4vh;
  margin-right: 2vh;
  margin-left: 2vh;
  vertical-align: center;
}

#header-app-samsung {
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  width: 9vh;
  height: 4vh;
  margin-right: 2vh;
  margin-left: 2vh;
  vertical-align: center;
}

#header-quote-background {
  margin-top: 5vh;
  min-height: 8vh;
  width: 100%;
  background-color: #000000;
}

#header-qoute {
  padding-top: 1.5vh;
  width: 100%;
  text-align: center;
  color: #ffffff;
  font-family: "proxima-nova", sans-serif;
  font-weight: 300;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  font-size: 1.8vh;
}

#header-quote span {
  font-family: "proxima-nova", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.jm-feature-button {
  border-radius: 1.5vw;
  background-color: #F44945;
  font-family: "proxima-nova", sans-serif;
  font-size: 2.8vw;
  padding: 1vw 2.3vw;
  line-height: 4vw;
  letter-spacing: normal;
  text-align: left;
  color: #ffffff;
  margin-top: 1.5vw;
  cursor: pointer;
}

.jm-feature-button a {
  color: #ffffff;
}

.jm-feature-button small {
  font-size: 2.5vw;
}

.jm-feature-button .bold {
  font-family: "proxima-nova", sans-serif;
  font-weight: 700;
  font-size: 4vw;
}

.jm-feature-button #strike {
  font-family: "proxima-nova", sans-serif;
  font-weight: 400;
  text-decoration: line-through;
  font-size: 2.8vw;
}

#awards-container {
  height: 100vw;
  width: 100vw;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-content: space-between;
  align-items: stretch;
}

#awards-container div {
  margin-top: 8vw;
  margin-bottom: 8vw;
  align-self: center;
}

#app-store-award {
  background-image: url(../images/front-page-b/app-store-award.png);
  width: 40vw;
  height: 100%;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

#app-of-the-day {
  background-image: url(../images/front-page-b/app-of-the-day.png);
  width: 60vw;
  height: 100%;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

#playstore-award {
  background-image: url(../images/front-page-b/playstore-award.png);
  width: 40vw;
  height: 100%;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

.background-cover {
  background: center center;
  background-size: cover;
  width: 100vw;
  height: 286vw;
  opacity: 1;
}

#ypt-background-cover.background-cover {
  background-color: #697c7d;
}

#ypt-top {
  position: absolute;
  z-index: 2;
}

#ypt-trans {
  position: absolute;
  z-index: 1;
  opacity: 0;
  width: 100vw;
  height: 286vw;
  background-image: url(../images/front-page-b/stonewhite.png);
}

#ypt-slide .canvas {
  width: 100vw;
  height: 130vw;
  background-image: url(../images/front-page-b/jillian-stare.png);
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  overflow: visible;
}

#ypt-slide .cover {
  width: 100vw;
  max-height: 130vw;
  background-image: url(../images/front-page-b/section-1-cover.png);
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  opacity: 0;
  overflow: visible;
}

#ypt-word-block {
  /*background-image: url(../images/front-page-b/stonewhite.png);*/
  height: 100vw;
  width: 100vw;
}

#ypt-first {
  height: 56vw;
  width: 100vw;
}

#ypt-word-block div {
  /*position: relative;*/
}

#ypt-head {
  padding-top: 2vw;
  font-size: 8vw;
  text-align: center;
}

#ypt-first-head {
  padding-top: 6vw;
  font-size: 8vw;
  text-align: center;
  color: #FFFFFF;
}

#ypt-first-head span {
  color: #FFFFFF;
}

.ypt-txt-a {
  margin: 2vw;
  font-size: 5vw;
  font-family: "proxima-nova", sans-serif;
  font-weight: 300;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #ffffff;
}

#ypt-txt {
  margin: 2vw;
  font-size: 5vw;
  font-family: "proxima-nova", sans-serif;
  font-weight: 300;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #000000;
}

#ypt-txt-change {
  font-family: "proxima-nova", sans-serif;
  font-weight: 300;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: black;
  opacity: 0;
}

#ypt-lets-go {
  width: 100vw;
  opacity: 0;
}

#ypt-lets-go-text-m {
  margin-top: 10vw;
  font-size: 6vw;
  font-family: "proxima-nova", sans-serif;
  font-weight: 300;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: black;
  text-align: center;
}

#ypt-go-container {
  margin-top: 10vw;
  width: 100vw;
  text-align: center;
  display: flex;
  flex-direction: row;
}

#ypt-go-button {
  margin: 0 auto;
  width: 10vw;
  height: 10vw;
  opacity: 0;
  background: url(../images/front-page-b/ypt-down-arrow-1.png) no-repeat center center;
  background-size: 200%;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(244, 73, 69, 1);
  transform: scale(1);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(244, 73, 69, 0.7);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 0 20px rgba(244, 73, 69, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(244, 73, 69, 0);
  }
}


.mtile {
  /*margin: 100px;*/
  width: 65vw;
  height: 80vw;
  background: no-repeat center center;
  background-size: cover;
}

.mtile .image {
  width: 65vw;
  height: 70vw;
  background: no-repeat center center;
  background-size: cover;
  box-shadow: 0 2vw 2vw 0 rgba(0, 0, 0, 0.07);
}

.mtile .label {
  display: block;
  font-family: "proxima-nova", sans-serif;
  width: 68vw;
  font-weight: 500;
  font-size: 6vw;
  text-align: center;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  margin-top: 1.5vw;
  color: black;
}

.small-tile {
  width: 30vw;
  height: 30vw;
  overflow: visible;
  transition: all 300ms ease;
  opacity: 0.4;
}

.slick-center {
  transform: scale(1.2);
  transition: all 300ms ease;
  opacity: 1;
}

.small-tile .image {
  width: 16vw;
  height: 16vw;
  margin-top: 5vw;
  margin-left: 4vw;
  background: no-repeat center, center;
  background-size: cover;
}

.slick-center .image {
  /*box-shadow: 0 1vw 1vw 0 rgba(0, 0, 0, 0.09);*/
}

.slick-next {
  right: -50px;
  width: 40px;
  height: 40px;
  padding-bottom: 70px;
}

.slick-prev {
  left: -50px;
  width: 40px;
  height: 40px;
  padding-bottom: 70px;
}

.slick-next::before {
  content: url(../images/front-page-b/dvd-right-arrow.png);

}

.slick-prev::before {
  content: url(../images/front-page-b/dvd-left-arrow.png);
}

#program-carousel {
  margin: auto 0;
}

#pp-overlay {
  height: 80vw;
  width: 100vw;
  background-image: radial-gradient(circle at 50% 51%, #4d4f52, #232426 90%);
  display: flex;
  flex-direction: column;
}

#program-carousel-container {
  width: 100vw;
  height: 100vw;
  background-color: #ffffff;
  display: flex;
}

#pp-content {
  margin: auto auto;
}

.jm-panel-title {
  font-family: "proxima-nova", sans-serif;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #ffffff;
}

#pp-title {
  font-size: 7vw;
}

.jm-panel-desc {
  font-family: "proxima-nova", sans-serif;
  font-weight: 400;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #ffffff;
}

#pp-desc {
  font-size: 5vw;
  margin: 2vw 4vw 10vw;
}

.jm-button-container {
  text-align: center;
  vertical-align: center;
  margin-top: 3vw;
}

.jm-button {
  border-radius: 5px;
  box-shadow: 8px 7px 41px -8px rgba(150, 43, 41, 0.5);
  background-color: #F44945;
  font-family: "proxima-nova", sans-serif;
  text-decoration: none;
  font-size: 3vw;
  padding: 4vw 5vw;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #ffffff;
}

.jm-button:hover {
  color: #ffffff;
}

#wg-panel {
  width: 100vw;
  height: 130vw;
  display: flex;
}

#wg-screen {
  text-align: center;
}

#video-generator {
  width: 100vw;
  height: 120vw;
  object-position: center center;
  object-fit: contain;
}

#wg-overlay {
  height: 80vw;
  width: 100vw;
  background-image: radial-gradient(circle at 50% 51%, #4d4f52, #232426 90%);
  display: flex;
  flex-direction: column;
}

#wg-content {
  margin: auto auto;
}

#wg-title {
  font-size: 7vw;
}

#wg-desc {
  font-size: 4vw;
  margin: 2vw 4vw 10vw;
}

#dvd-slide {
  width: 100vw;
  background-color: #ecf1f8;
  overflow-x: hidden;
}

.jm-title {
  padding-top: 3%;
  font-family: "proxima-nova", sans-serif;
  font-weight: 300;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #000000;
}

.jm-title span {
  font-family: "proxima-nova", sans-serif;
  font-weight: 700;
}

#dvd-title {
  margin-top: 2vw;
  font-size: 7vw;
}

#dvd-phone-overlay {
  width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
}

#dvd-phone {
  background-image: url(../images/front-page-b/dvd-phone.png);
  display: block;
  margin-top: 8vw;
  margin-left: 6vw;
  width: 70vw;
  height: 40vw;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  overflow-y: hidden;
}

#dvd-phone-cover {
  position: absolute;
  z-index: 2;
  background-image: url(../images/front-page-b/dvd-phone-cover.png);
  width: 70vw;
  height: 40vw;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}

#dvd-img {
  position: absolute;
  z-index: 1;
  background-image: url(../images/front-page-b/dvd.png);
  margin-left: 50vw;
  width: 40vw;
  height: 40vw;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}

#dvd-carousel-container {
  width: 100vw;
  height: 30vw;
}

#dvd-carousel {
  width: 65vw;
  height: 30vw;
  margin: auto auto;
}


#modify-title {
  margin-top: 2vw;
  font-size: 7vw;
}

#modify-slide {
  background-color: #ecf1f8;
  overflow-x: hidden;
  width: 100%;
}

#modify-container {
  width: 100%;
  height: 60vh;
  overflow-x: hidden;
}

#modify-phone {
  margin-top: 2vw;
  margin-left: 5vw;
  margin-right: 5vw;
  width: 90vw;
  height: 50vw;
  background-image: url(../images/front-page-b/workout-black-mobile-mockup.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

#modify-tv {
  margin-top: 2vw;
  margin-left: 2vw;
  margin-right: 2vw;
  width: 96vw;
  height: 50vw;
  background-image: url(../images/front-page-b/tv@2x.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0;
}

#modify-connect-title {
  font-family: "proxima-nova", sans-serif;
  font-size: 7vw;
  font-weight: 300;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #000000;
}

#modify-connect-desc {
  font-family: "proxima-nova", sans-serif;
  font-size: 4vw;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.23;
  letter-spacing: normal;
  text-align: center;
  margin-top: 2vw;
  margin-bottom: 12vw;
  color: #000000;
}

#modify-connect-title span {
  font-family: "proxima-nova", sans-serif;
  font-weight: 700;
}

#modify-connect {
  margin-top: 8vw;
  margin-bottom: 8vw;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  align-content: space-between;
  justify-content: center;
  opacity: 0;
}

#airplay {
  align-self: center;
  background-image: url(../images/front-page-b/airplay.png);
  width: 20vw;
  height: 20vw;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  /*opacity: 0;*/
}

#appletv {
  align-self: center;
  background-image: url(../images/front-page-b/appletv.png);
  width: 20vw;
  height: 20vw;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  /*opacity: 0;*/
}

#chromecast {
  align-self: center;
  background-image: url(../images/front-page-b/chromecast.png);
  width: 20vw;
  height: 20vw;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  /*opacity: 0;*/
}

#tracker-slide {
  width: 100vw;
  height: 130vw;
  background-color: #ffffff;
  overflow-x: hidden;
}

#tracker-title {
  margin-top: 2vw;
  font-size: 7vw;
}

#tracker-phone {
  background-image: url(../images/front-page-b/tracking-mobile.png);
  margin-top: 2vw;
  margin-left: 20vw;
  width: 80vw;
  height: 100vw;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

#watch {
  background-image: url(../images/front-page-b/watch.png);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  position: absolute;
  z-index: 1;
  width: 50vw;
  height: 50vw;
  margin-top: 46vw;
  margin-left: -50vw;
}

#readout {
  background-image: url(../images/front-page-b/readout.png);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  position: absolute;
  z-index: 2;
  width: 34vw;
  height: 34vw;
  margin-left: 100%;
  margin-top: 66vw;
}

#music-slide {
  overflow-x: hidden;
  width: 100%;
}

#music-container {
  width: 100vw;
  height: 80vw;
  object-fit: contain;
  background-image: radial-gradient(circle at 50% 50%, #2e3037, #040506 67%);
}

#music-img {
  padding-top: 10vw;
  margin-left: 10vw;
  width: 80vw;
  height: 40vw;
  background-image: url(../images/front-page-b/music-bgnd.png);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

#music-words {
  z-index: 1;
  position: absolute;
  margin-top: 17vw;
  width: 80vw;
  margin-left: 10vw;
}

#music-title {
  color: #FFFFFF;
  font-size: 7vw;
  opacity: 0;
}

#music-desc {
  margin-top: 2vw;
  font-family: "proxima-nova", sans-serif;
  font-size: 4vw;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.23;
  letter-spacing: normal;
  text-align: center;
  color: #ffffff;
  opacity: 0;
}

#music-providers {
  position: absolute;
  z-index: 2;
  margin-top: 70vw;
  margin-left: 5vw;
  width: 90vw;
  height: 20vw;
  display: flex;
  flex-direction: row;
  justify-content: center;
  opacity: 0;
}

.music-tile {
  align-self: center;
  width: 15vw;
  height: 100%;
  align-content: space-between;
  align-items: stretch;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

#spotify {
  background-image: url(../images/front-page-b/spotify@2x.png);
}

#soundcloud {
  background-image: url(../images/front-page-b/soundcloud@2x.png);
}

#apple {
  background-image: url(../images/front-page-b/itunes@2x.png);
}

#google {
  background-image: url(../images/front-page-b/googleplay@2x.png);
}

#pandora {
  background-image: url(../images/front-page-b/pandora@2x.png);
}

#recipes-carousel {
  margin: auto 0;
}

#recipes-overlay {
  height: 80vw;
  width: 100vw;
  background-image: radial-gradient(circle at 50% 51%, #4d4f52, #232426 90%);
  display: flex;
  flex-direction: column;
}

#recipes-carousel-container {
  width: 100vw;
  height: 100vw;
  background-color: #ffffff;
  display: flex;
}

#recipes-content {
  margin: auto auto;
}

#recipes-title {
  font-size: 7vw;
}

#recipes-desc {
  font-size: 5vw;
  margin: 2vw 4vw 10vw;
}

#jill-slide {
  width: 100vw;
  background-color: #ececec;
}

#jill-stare-2 {
  background-image: url(../images/front-page-b/jillian-stare-3.jpg);
  width: 100vw;
  height: 100vw;
  background-size: cover;
  background-position: left top;
  background-repeat: no-repeat;
  overflow: hidden;
}

#jill-cover {
  margin-top: -100px;
  width: 100vw;
  height: 100vw;
  position: absolute;
  z-index: 1;
  background-image: url(../images/front-page-b/real-results.png);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

#real-advice {
  text-align: left;

  margin-left: 55vw;
  margin-top: 10vh;
  font-size: 6vw;
}

#jill-button-container {
  text-align: left;
  margin-left: -2vw;
}

#trans-slide {
  width: 100vw;
  height: 110vw;
}

#trans-title {
  width: 100vw;
  font-size: 7vw;
  margin-bottom: 8vw;
}

#trans-container {
  width: 100vw;
  height: 40vw;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

#trans-cards {
  height: 40vw;
  width: 30vw;
  margin-top: 10vw;
}

#trans-1 {
  height: 30vw;
  width: 30vw;
  position: absolute;
  z-index: 10;
  transform: translateX(0px) scale(1.5);
  transition: all .5s;
}

.ttile img {
  border-radius: 2vh;
  width: 100%;
  height: 100%;
  box-shadow: 0 2vw 2vw 0 rgba(0, 0, 0, 0.1);
}

.ttile span {
  visibility: hidden;
}

#trans-2 {
  height: 30vw;
  width: 30vw;
  position: absolute;
  z-index: 9;
  transform: translateX(-20vw);
  transition: all .5s;
}

#trans-3 {
  height: 30vw;
  width: 30vw;
  position: absolute;
  z-index: 9;
  transform: translateX(20vw);
  transition: all .5s;
}

#trans-control {
  margin-top: 5vh;
}

#trans-buttons {
  margin-top: 6vw;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 12vw;
}

#trans-prev {
  background-image: url(../images/front-page-b/success-story-leftarrow@2x.png);
  height: 12vw;
  width: 12vw;
  background-size: contain;
  background-position: left top;
  background-repeat: no-repeat;
  margin-right: 5vw;
}

#trans-next {
  background-image: url(../images/front-page-b/success-story-rightarrow@2x.png);
  height: 12vw;
  width: 12vw;
  background-size: contain;
  background-position: left top;
  background-repeat: no-repeat;
  margin-left: 5vw;
}

#trans-readout {
  width: 100vw;
  height: 10vw;
  text-align: center;
  font-family: "proxima-nova", sans-serif;
  font-size: 5vw;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #000000;
}

#mealplan-1 .image {
  background-image: url(../images/front-page-b/mealplans/5_day_jumpstart.jpg);
}

#mealplan-2 .image {
  background-image: url(../images/front-page-b/mealplans/paleo.jpg);
}

#mealplan-3 .image {
  background-image: url(../images/front-page-b/mealplans/omnivore.jpg);
}

#mealplan-4 .image {
  background-image: url(../images/front-page-b/mealplans/vegetarian.jpg);
}

#mealplan-5 .image {
  background-image: url(../images/front-page-b/mealplans/vegan.jpg);
}

#mealplan-6 .image {
  background-image: url(../images/front-page-b/mealplans/quick_and_easy.jpg);
}

#mealplan-7 .image {
  background-image: url(../images/front-page-b/mealplans/keto.jpg);
}

#mealplan-8 .image {
  background-image: url(../images/front-page-b/mealplans/pescatarian.jpg);
}

#mealplan-9 .image {
  background-image: url(../images/front-page-b/mealplans/6_keys.jpg);
}

#pp-1 .image {
  background-image: url(../images/front-page-b/programs/Walk-A-5k-Updated-900.jpg);
}

#pp-2 .image {
  background-image: url(../images/front-page-b/programs/Fitness-For-Beginners-Updated-900.jpg);
}

#pp-3 .image {
  background-image: url(../images/front-page-b/programs/Burn-60-Updated-900.jpg);
}

#pp-4 .image {
  background-image: url(../images/front-page-b/programs/Yoga-Fit-Updated-900.jpg);
}

#pp-5 .image {
  background-image: url(../images/front-page-b/programs/Kickbox-Body-Updated-900.jpg);
}

#pp-6 .image {
  background-image: url(../images/front-page-b/programs/Sexy-Abs-Updated-900.jpg);
}

#pp-7 .image {
  background-image: url(../images/front-page-b/programs/Booty-Boot-Camp-Updated-900.jpg);
}

#pp-8 .image {
  background-image: url(../images/front-page-b/programs/6-Keys-Anti-Aging-Plan-Updated-900.jpg);
}

#pp-9 .image {
  background-image: url(../images/front-page-b/programs/10k-Updated-900.jpg);
}

#pp-10 .image {
  background-image: url(../images/front-page-b/programs/Beginner-HIIT-Updated-900.jpg);
}

#pp-11 .image {
  background-image: url(../images/front-page-b/programs/6-Week-Bridal-Bootcamp-Updated-900.jpg);
}

#pp-12 .image {
  background-image: url(../images/front-page-b/programs/Kettlebell_Burn_Program_900.jpg);
}

#dvd-1 .image {
  background-image: url(../images/front-page-b/dvds/yoga_inferno.png);
}

#dvd-2 .image {
  background-image: url(../images/front-page-b/dvds/body_revolution.png);
}

#dvd-3 .image {
  background-image: url(../images/front-page-b/dvds/beginner_shred.png);
}

#dvd-4 .image {
  background-image: url(../images/front-page-b/dvds/bodyshred.png);
}

#dvd-5 .image {
  background-image: url(../images/front-page-b/dvds/kickbox_fastfix.png);
}

#dvd-6 .image {
  background-image: url(../images/front-page-b/dvds/killer_abs.png);
}

#dvd-7 .image {
  background-image: url(../images/front-page-b/dvds/ripped_in_30.png);
}

#dvd-8 .image {
  background-image: url(../images/front-page-b/dvds/yoga_meltdown.png);
}

#dvd-9 .image {
  background-image: url(../images/front-page-b/dvds/30_day_shred.png);
}



.awards-text-container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  font-size: 8vw;
  font-family: "proxima-nova", sans-serif;
  font-weight: 700;
  line-height: 1;
}

.awards-containers-workout-options {
  /*width: 100vw;*/
  display: flex;
  height: 40vw;
  flex-wrap: wrap;
  overflow: scroll;
  margin: 0 1vw;
  flex-direction: column;
}

.workout-option-grid {
  height: 30vw;
  width: 30vw;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  border-radius: 5px;
  background-size: contain;
  color: white;
  font-weight: bold;
  /*font-size: 1.2em;*/
  margin: auto 1vw;
  background-color: rgba(0,0,0, 0.3);
  background-blend-mode: color;
}

.workout-option-grid div {
  margin-bottom: 2vw;
  text-align: center;
  line-height: initial;
}

#workout-option-grid-1 {
  background-image: url("../images/jm-modality-options/strength-2000x2000.jpg");
}

#workout-option-grid-2 {
  background-image: url("../images/jm-modality-options/yoga-2000x2000.jpg");
}

#workout-option-grid-3 {
  background-image: url("../images/jm-modality-options/bootcamp_2000x2000.jpg");
}

#workout-option-grid-4 {
  background-image: url("../images/jm-modality-options/Kickbox-2000x2000.jpg");
}

#workout-option-grid-5 {
  background-image: url("../images/jm-modality-options/cardio-2000x2000.jpg");
}

#workout-option-grid-6 {
  background-image: url("../images/jm-modality-options/prenatal-2000x2000.jpg");
}

#workout-option-grid-7 {
  background-image: url("../images/jm-modality-options/hiit-2000x2000.jpg");
}

#workout-option-grid-8 {
  background-image: url("../images/jm-modality-options/stretching-2000x2000.jpg");
}

#workout-option-grid-9 {
  background-image: url("../images/jm-modality-options/restorative-2000x2000.jpg");
}

#workout-option-grid-10 {
  background-image: url("../images/jm-modality-options/core_2000x2000.jpg");
}

#workout-option-grid-11 {
  background-image: url("../images/jm-modality-options/running-2000x2000.jpg");
}

#workout-option-grid-12 {
  background-image: url("../images/jm-modality-options/walking-2000x2000.jpg");
}

#workout-option-grid-13 {
  background-image: url("../images/jm-modality-options/dvd_library_2000x2000.jpeg");
}

#workout-option-grid-14 {
  background-image: url("../images/jm-modality-options/gym_training_2000x2000.jpg");
}

#workout-option-grid-15 {
  background-image: url("../images/jm-modality-options/audio_only_2000x2000.jpg");
}

.award-container-workout-options-with-image {
  width: 80vw;
  margin: auto;
  display: flex;
  align-items: center;
  text-align: center;
}

.option-image-left-container {
  height: 80%;
  flex: 1;
  justify-content: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.option-image-right-container {
  /*background-image: url(../images/front-page/design-2022-images/Links/iphone_frame.png);*/
  height: 80%;
  background-size: contain;
  width: 100%;
  background-repeat: no-repeat;
  flex: 1;
  display: flex;
  justify-content: center;
  margin-top: 5vw;
  position: relative;
}

.inner-frame-image {
  background-image: url("../images/front-page/design-2022-images/Links/IMG_7044.PNG");
  background-size: contain;
  background-repeat: no-repeat;
}

.outer-iphone-frame {
  /*height: 96%;*/
  margin-top: 12px;
}

.outer-iphone-frame-anyanyany {
  /*height: 96%;*/
  margin-top: 12px;
}

.custom-meal-plan-container {
  padding: 5vw 1vw;
  background-color: #f5f5f5;
  /*width: 100vw;*/
  height: 80vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.CMP-text {
  font-size: 8vw;
  font-family: "proxima-nova", sans-serif;
  font-weight: 700;
  margin-bottom: 1vw;
  text-align: center;
  line-height: 1;
}

.CMP-images {
  display: flex;
  overflow-x: scroll;
  flex-wrap: wrap;
  flex-direction: column;
  width: 100%;
  overflow-y: hidden;
}

.CMP-image-tile {
  background-image: url(../images/front-page/design-2022-images/Links/cardio-shutterstock_718974268.jpeg);
  width: 60vw;
  height: 60vw;
  border-radius: 5px;
  margin: auto 1vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: white;
  font-size: 4vw;
  background-color: rgba(0,0,0, 0.3);
  background-blend-mode: color;
}

.smaller-tile {
  width: 60vw;
  height: 60vw;
}

.standing-rectangle-tile {
  width: 60vw;
  /*height: 40vw;*/
}

.White-Background {
  background-color: white;
}

.Row-Reverse {
  flex-direction: row-reverse;
}

.music-background {
  background-image: url(../images/front-page/2023/music.jpg);
  background-position: center;
}

.community-background {
  background-image: url(../images/front-page/design-2022-images/Links/Community.png);
}

.tracking-background {
  background-image: url(../images/front-page/design-2022-images/Links/tracking-shutterstock_769425553.jpg);
}

.meditation-background {
  background-image: url(../images/front-page/design-2022-images/Links/meditations-tile.jpeg);
}

.breathwork-background {
  background-image: url(../images/front-page/design-2022-images/Links/breathwork-shutterstock_2000899163.jpeg);
}

.sleep-background {
  background-image: url(../images/front-page/design-2022-images/Links/sleep-shutterstock_111349781.jpeg);
}

.omnivore-background {
  background-image: url(../images/front-page/design-2022-images/Links/omnivore_large.jpg);
}

.paleo-background {
  background-image: url(../images/front-page/design-2022-images/Links/paleo_new.jpg);
}

.vegan-background {
  background-image: url(../images/front-page/design-2022-images/Links/vegan_large.jpg);
}

.vegetarian-background {
  background-image: url(../images/front-page/design-2022-images/Links/vegetarian-main-banner-2000-2000.jpg);
}

.pescatarian-background {
  background-image: url(../images/front-page/design-2022-images/Links/pescatarian_main_image_square.jpg);
}

.jumpstart-background {
  background-image: url(../images/front-page/design-2022-images/Links/5_day_jumpstart_banner.jpg);
}

.keto-background {
  background-image: url(../images/front-page/design-2022-images/Links/keto.jpg);
}

.keys-background {
  background-image: url(../images/front-page/design-2022-images/Links/6keys.jpg);
}

.qae-background {
  background-image: url(../images/front-page/design-2022-images/Links/quick_and_easy.jpg);
}

.ShowMealText {
  background: #F44945;
  flex-direction: column;
}

.HiddenContent {
  display: none;
}

.MealTileText {
  font-size: 0.6em;
  text-align: center;
  margin-top: 15px;
  cursor: default;
}

.CMP-images::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.awards-containers-workout-options::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.awards-containers-workout-options {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.section-header-text {
  font-size: 8vw;
  font-family: "proxima-nova", sans-serif;
  font-weight: 700;
  margin-top: 5vw;
}

.direction-icons {
  margin-top: 10%;
}

@media (max-width: 850px) {
  #awards-container {
    height: 25vw;
    flex-direction: row;
  }
}

.reviews-tile {
  width: 60vw;
  height: 60vw;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 4vw;
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 2px 5px;
  margin: auto 10px;
  font-size: 3.5vw;
}

.reviewer-name {

}

.award-icon {
  width: 25vw;
}

.middle-award-icon {
  margin: 0 6vw;
}

.direction-icons {
  margin-top: 15%;
}

.direction-icon {
  width: 45px;
  height: 45px;
}

#app-icons {
  width: 80%;
  margin: 10px auto;
}

.app-icons-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.download-app-link-icon {
}

@media (min-width: 650px) {
  .outer-iphone-frame {
    height: 60vh;
  }

  .direction-icons {
    margin-top: 10%;
  }
}

@media (min-width: 650px) {
  .outer-iphone-frame-anyanyany {
    height: 57.5vh;
  }
}

@media (min-width: 650px) {
  .anyanyany-phone-frame {
    height: 60vh;
  }
}

.JOC-image {
  width: 60vw;
  height: auto;
}

.MealPlanModal {
  position: fixed;
  top: 0;
  height: 100vh;
  width: 100vw;
  justify-content: center;
  align-items: center;
  background-color: lightgrey;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.8);
}

.FlexDisplay {
  display: flex;
}

.CenteredModalBox {
  width: 80vw;
  background-color: white;
  border-radius: 10px;
  overflow: hidden;
}

.ModalImage {
  flex: 2;
  height: 20vh;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 3vw;
  border-radius: 5px;
  background-color: rgba(0,0,0, 0.3);
  background-blend-mode: color;
  box-shadow: inset 0 -50px 40px -10px rgba(0, 0, 0, 0.8);
}

.ModalTextArea {
  margin: 4vw;
  line-height: normal;
  font-size: 4vw;
}

.ModalButton {
  background-color: #F44945;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  height: 7vh;
  color: white;
  margin-top: 5vw;
}

.ModalOpen {
  overflow-y: hidden;
}

.modal-cross {
  position: absolute;
  right: 0;
  margin: 10px;
}

.modal-image-name {
  color: white;
  position: absolute;
  bottom: 0;
  padding-bottom: 10px;
  font-weight: bolder;
  width: 100%;
  display: flex;
  justify-content: center;
  font-size: 20px;
}

.review-marker {
  margin-left: 10px;
  margin-top: 5px;
}

.review-image-container {
  margin: 2vw;
  display: flex;
  flex-direction: column;
}

@media (min-width: 750px) {
  #app-icons {
    width: 45%;
  }
}

@media (max-width: 350px) {
  #app-icons {
    width: 95%;
  }
}

#playerContainerAAAD > .ig-container {
  height: 97%;
  z-index: 30;
  margin-top: 10px;
  padding-top: 0px !important;
  background-color: white;
  border-radius: 50px;
  width: 80vw;
  max-width: 320px;
}

#playerContainerAAAD {
  height: 100%;
  position: absolute;
  width: 80vw;
  max-width: 320px;
}