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

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

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

.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;
  height: 100vh;
}

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

#playerContainer>.ig-container {
  padding-top: 0 !important;
  height: 100vh;
  z-index: 5;
  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: 36vh;*/
  width: 50vw;
  margin: 36vh 20% 0;
}

#header-title {
  /*text-align: center;*/
  font-size: 5vh;
}

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

#header-subtitle {
  /*text-align: center;*/
  font-size: 2vh;
}

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

.header-button {
  line-height: 0.9;
  display: inline-block;
  margin: 10px;
  color: #FFFFFF;
  font-size: 21px;
  font-weight: 700;
  font-family: "proxima-nova", sans-serif;
  background-color: #F44945;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 1px 7px 41px -8px rgb(150, 43, 41);
}

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

.header-button .subtitle {
  font-size: 13px;
  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;
}

.fs {
  height: 100vh;
}

/* =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 {
  background-image: url(../images/front-page-b/jm-bg@2x.jpg);
  height: 100vh;
  width: 100%;
  background-size: cover;
  background-position: right top;
  background-repeat: no-repeat;
  /*overflow: visible;*/
}

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

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

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

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

#header-bottom {
  position: absolute;
  z-index: 1;
  margin-top: 77vh;
  min-height: 23vh;
  width: 100%;
  mix-blend-mode: multiply;
  background-image: url(../images/front-page-b/path-3.svg);
  background-size: cover;
  background-position: right top;
  background-repeat: no-repeat;
}

#header-quote-background {
  position: absolute;
  z-index: 2;
  margin-top: 95vh;
  min-height: 5vh;
  width: 100%;
  opacity: 0.45;
  background-color: #000000;
}

#header-qoute {
  position: absolute;
  z-index: 10;
  margin-top: 1.5vh;
  min-height: 3.6vh;
  width: 100%;
  text-align: center;
  color: #ffffff !important;
  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 a {
  color: #ffffff;
}

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

.jm-feature-button small {
  font-size: 1.8vh;
}

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

#awards-container {
  margin-top: 40px;
  /*margin-bottom: 40px;*/
  height: 15vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  flex-direction: row;
  align-content: space-between;
  align-items: stretch;
}

#awards-container div {
  /*margin-left: 3vw;*/
  /*margin-right: 3vw;*/
  max-height: 9vh;
  align-self: center;
}

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

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

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

.workout-option-grid div {
  margin-bottom: 1vw;
}

#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");
}

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

.awards-containers-workout-options::-webkit-scrollbar {
  display: none;
}

#app-store-award {
  background-image: url(../images/front-page-b/app-store-award.png);
  width: 20vw;
  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: 20vw;
  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: 20vw;
  height: 100%;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

/*.slide {*/
/*    overflow: hidden;*/
/*    overflow-x: hidden;*/
/*}*/

#ypt-slide section {
  margin: 0 auto;
}

#ypt-slide header {
  margin: 0 auto;
}

.background-cover {
  background: center center;
  background-size: cover;
  position: absolute;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  opacity: 1;
}

#ypt-background-cover.background-cover {
  background-image: url(../images/front-page-b/stonegrey.png);
}

.bcg-cover-trans {
  background: center center;
  background-size: cover;
  position: absolute;
  width: 100vw;
  height: 100vh;
  z-index: 2;
  opacity: 0;
}

#ypt-background-cover-trans.bcg-cover-trans {
  background-image: url(../images/front-page-b/stonewhite.png);
}

#ypt-canvas {
  position: absolute;
  z-index: 3;
  display: block;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  /*margin: auto;*/
  margin-top: 10%;
}

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

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

#ypt-headline-change {
  position: absolute;
  z-index: 1;
  opacity: 0;
  color: #000000;
}

#ypt-headline-change span {
  font-family: "proxima-nova", sans-serif;
  font-weight: 700;
}

#ypt-word-block {
  margin-top: 5vh;
  margin-left: 8vw;
  margin-bottom: 0;
  height: 70vh;
  width: 35vw;
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

#ypt-text {
  margin-top: 5%;
  font-family: "proxima-nova", sans-serif;
  font-weight: 300;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: white;
}

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

#ypt-lets-go-container {
  display: flex;
  flex-direction: row;
}

#ypt-lets-go {
  width: 70%;
  height: 10%;
  opacity: 0;
}

#ypt-lets-go-text {
  margin-top: 5vh;
  font-family: "proxima-nova", sans-serif;
  font-weight: 300;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #000000;
}

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

.layout-content > .content-main {
  box-shadow: none !important;
}

@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 20px rgba(244, 73, 69, 0);
  }

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

#pp {
  min-height: 80vh;
  display: flex;
}

#program-carousel {
  margin: auto 0;
}

.tile {
  width: 26vw;
  height: 36vw;
  background: no-repeat center center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
}

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

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

.small-tile {
  width: 8vw;
  height: 10vw;
  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: 8vw;
  height: 8vw;
  margin-top: 8%;
  margin-left: 18%;
  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;
}

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

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

#pp-overlay {
  margin-left: 56%;
  width: 44%;
  min-height: 80vh;
  background-image: radial-gradient(circle at 50% 51%, #4d4f52, #232426 90%);
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

#pp-content {
  margin: auto auto;
}

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

#pp-title {
  height: 10%;
  padding-bottom: 22px;
}

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

#pp-desc {
  height: 10%;
}

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

.jm-button-container-right-alt{
  margin-top: 5vw;
  margin-left: 3.5vw;
}

.jm-button-container-left-alt{
  margin-top: 3vw;
  margin-left: 5.5vw;
}

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

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

#workout-generator {
  min-height: 80vh;
}

#wg-panel {
  position: relative;
  margin-left: 44%;
  width: 56%;
  min-height: 80vh;
  display: flex;
}

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

#video-generator {
  margin-top: 5vh;
  width: 100%;
  height: 70vh;
  object-position: center center;
  object-fit: contain;
}

@-moz-document url-prefix() {
  #video-generator {
    margin-left: 50%;
  }
}

#wg-overlay {
  width: 44%;
  min-height: 80vh;
  background-image: radial-gradient(circle at 50% 51%, #4d4f52, #232426 90%);
  position: absolute;
  display: flex;
}

#wg-content {
  margin: auto auto;
}

#wg-title {
  height: 10%;
  padding-bottom: 22px;
}

#wg-desc {
  height: 20%;
}

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

.jm-title {
  padding-top: 3%;
  font-family: "proxima-nova", sans-serif;
  font-size: 4vw;
  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: 130px;
  min-height: 15vh;
}

#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: 2%;
  margin-left: 12%;
  width: 65%;
  min-height: 37vh;
  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: 65%;
  min-height: 37vh;
  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: 42%;
  width: 37vh;
  height: 37vh;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}

#dvd-carousel-container {
  width: 100%;
  height: 20%;
}

#dvd-carousel-padding {
  margin-top: 3vh;
  margin-left: 10%;
  margin-right: 10%;
  min-height: 20vh;
  width: 80%;
  display: flex;
}

#dvd-carousel {
  width: 48%;
  margin: auto auto;
}

#modify-title {
  min-height: 15vh;
  margin: 0 auto;
  align-self: center;
}

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

#modify-container {
  width: 100vw;
  /*margin-top: 10vh;*/
  height: 90vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  justify-content: center;
  align-content: space-between;
  align-items: stretch;
}

#modify-phone-tv-row {
  width: 200%;
  margin: 0 auto;
  align-self: center;
  display: flex;
  height: 50vh;
  flex-direction: row;
}

#modify-phone {
  margin-top: 6vh;
  margin-left: 15vw;
  width: 70vw;
  height: 40vh !important;
  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-left: 10vw;
  width: 70vw;
  height: 50vh;
  background-image: url(../images/front-page-b/tv.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

#modify-connect {
  width: 80vw;
  height: 20vh;
  margin-left: 10vw;
  opacity: 0;
}

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

#modify-connect-desc {
  font-family: "proxima-nova", sans-serif;
  font-size: 2vw;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.23;
  letter-spacing: normal;
  color: #747a7f;
}

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

#modify-methods-container {
  position: absolute;
  z-index: 1;
  width: 38%;
  height: 33%;
}


#method-container {
  position: relative;
  height: 100%;
  width: 100%;
}

#method-padding {
  width: 100%;
  height: 30%;
}

#airplay, #appletv, #chromecast {
  width: 15% !important;
  height: 15% !important;
}

#airplay {
  margin-top: -30%;
  /*margin-left: 70%;*/
  margin-left: 85%;
  background-image: url(../images/front-page-b/airplay.png);
  /*width: 30%;*/
  /*height: 26%;*/
  width: 89px;
  height: 98px;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
}

#chromecast {
  margin-top: 3%;
  /*margin-left: 70%;*/
  margin-left: 85%;
  background-image: url(../images/front-page-b/chromecast.png);
  /*width: 30%;*/
  /*height: 26%;*/
  width: 89px;
  height: 98px;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
}

#appletv {
  margin-top: 3%;
  /*margin-left: 70%;*/
  margin-left: 85%;
  background-image: url(../images/front-page-b/appletv.png);
  /*width: 30%;*/
  /*height: 26%;*/
  width: 89px;
  height: 98px;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
}

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

#tracker-container {
  margin-top: 130px;
  width: 100%;
  height: 80vh;
  display: flex;
  flex-direction: row;
}

#tracker-title {
  margin-left: 10%;
  margin-top: 4%;
}

#tracker-phone {
  background-image: url(../images/front-page-b/tracking-mobile.png);
  margin-top: 2%;
  margin-left: 7%;
  width: 40%;
  height: 96%;
  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: 40vh;
  height: 40vh;
  margin-top: 30vh;
  margin-left: -34vw;
}

#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: 30vh;
  height: 30vh;
  margin-left: 100%;
  margin-top: 44vh;
}

#music-slide {
  overflow-x: hidden;
  width: 100%;
  height: 100vh;
  background-image: radial-gradient(circle at 50% 50%, #2e3037, #040506 67%);
}

#music-container {
  padding-top: 130px;
  width: 100%;
  height: 86vh;
  object-fit: contain;
}

#music-img {
  padding-top: 31vh;
  margin-left: 10vw;
  width: 80vw;
  height: 40vh;
  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: 28vh;
  width: 40%;
  margin-left: 30%;
}

#music-title {
  color: #FFFFFF;
  width: 100%;
  opacity: 0;
}

#music-desc {
  width: 100%;
  margin-top: 5%;
  font-family: "proxima-nova", sans-serif;
  font-size: 2vw;
  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: 65vh;
  margin-left: 10%;
  width: 80%;
  height: 20vh;
  display: flex;
  flex-direction: row;
  justify-content: center;
  opacity: 0;
}

.music-tile {
  align-self: center;
  width: 15%;
  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-slide {
  background-color: #ffffff;
  width: 100%;
  min-height: 80vh;
  display: flex;
}

#recipes-carousel {
  margin: auto 0;
}

#recipes-overlay {
  margin-left: 56%;
  width: 44%;
  min-height: 80vh;
  background-image: radial-gradient(circle at 50% 51%, #4d4f52, #232426 90%);
  position: absolute;
  z-index: 1;
  display: flex;
}

#recipes-content {
  margin: auto auto;
}

#recipes-title {
  height: 10%;
}

#recipes-desc {
  height: 10%;
}

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

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

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

#real-advice {
  text-align: left;
  margin-left: 50vw;
  margin-top: 30vh;
}

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

#trans-slide {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#trans-title {
  height: 15vh;
  margin-bottom: 4vh;
}

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

#trans-cards {
  height: 60vh;
  width: 30vh;
  margin-top: 25vh;
}

#trans-1 {
  height: 30vh;
  width: 30vh;
  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: 30vh;
  width: 30vh;
  position: absolute;
  z-index: 9;
  transform: translateX(-20vw);
  transition: all .5s;
}

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

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

#trans-buttons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 50vw;
  height: 4vh;
}

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

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

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

/* Translate CSS */

.translate-es {
}

.translate-es #generic-workout {
  margin-top: 100px !important;
}

.translate-es #pp-button-container {
  margin-left: 12vw !important;
}

.translate-es #wg-button-container {
  margin-left: 9vw !important;
}

.translate-es .jm-button-container-right-alt{
  margin-left: 6vw !important;
}

#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);
}

.after-nav {
  padding-top: 0px !important;
}

.award-container-workout-options-with-image {
  width: 70vw;
  height: 60vh;
  margin: auto;
  display: flex;
  align-items: center;
  line-height: 1;
}

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

.option-image-right-container {
  height: 80%;
  background-size: contain;
  width: 100%;
  background-repeat: no-repeat;
  flex: 1;
  display: flex;
  justify-content: center;
  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: 10px;
}

.background-iphoneframe {
  background-image: url("../images/front-page/design-2022-images/Links/iPhoneFrame.png");
  height: 20vw;
  width: 20vh;
  background-size: contain;
  background-repeat: no-repeat;
}

.custom-meal-plan-container {
  padding: 2vw 0vw;
  background-color: #f5f5f5;
  width: 100vw;
  height: 38vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  justify-content: center;
}

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

.CMP-images {
  display: flex;
  overflow-x: scroll;
  overflow-y: hidden;
  flex-wrap: wrap;
  flex-direction: column;
  /*width: 98%;*/
  height: 30vw;
  /*margin: auto;*/
  scroll-behavior: smooth;
  scrollbar-width: none;
  margin: 0 1vw;
}

.reviews-tile {
  width: 20vw;
  height: 20vw;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2vw;
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 5px;
  margin: 0 0.5vw;
  line-height: 1.6;
  font-size: 1vw;
}

.reviewer-name {

}

.award-icon {
  width: 12vw;
}

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

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

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

.CMP-image-tile {
  background-image: url(../images/front-page/design-2022-images/Links/1.png);
  width: 30vw;
  height: 30vw;
  border-radius: 5px;
  margin: auto 0.5vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: white;
  font-size: 2vw;
  background-color: rgba(0,0,0, 0.3);
  background-blend-mode: color;
  transition: background .7s ease;
  position: relative;
}

.background-transition-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: auto 0.5vw;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .7s ease;
  color: white;
}

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

.standing-rectangle-tile {
  width: 20vw;
  height: 40vw;
}

.White-Background {
  background-color: white;
  line-height: 1;
}

.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);
  cursor: pointer;
}

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

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

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

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

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

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

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

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

.ShowMealText {
  background: #F44945;
  flex-direction: column;
  transition: background-color .7s ease;
}

.HiddenContent {
  display: flex;
  height: 0px;
  width: 0px;
  overflow: hidden;
  opacity: 0;
  padding: 0px !important;
}

.MealTileText {
  font-size: 0.6em;
  text-align: center;
  margin-top: 15px;
  cursor: pointer;
  padding: 15px;
  transition: opacity .7s ease;
}

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

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

.download-app-link-icon {
}

@media (max-width: 1025px) {
  .award-icon {
    width: 20vw;
  }

  .award-container-workout-options-with-image {
    width: 90vw;
  }
}

.JOC-image {
  width: auto;
  height: 35vw;
  margin: 0 0.5vw;
}

.scroll-arrow {
  position: absolute;
  z-index: 10;
  display: flex;
  height: 100%;
  width: 98%;
  justify-content: space-between;
  pointer-events: none;
  align-items: center;
  cursor: pointer;
}

.arrow {
  width: 3vw;
  height: 3vw;
  pointer-events: all;
  margin: 1vw;
  cursor: pointer;
}

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

@media (max-width: 1025px) {
  .awards-containers-workout-options {
    height: 24vw;
  }

  .workout-option-grid {
    height: 20vw;
    width: 20vw;
  }
}

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

#playerContainerAAAD {
  height: 100%;
  width: 100%;
}

.less-images-container {
  width: 100vw;
  align-items: center;
}