body.mobile-portrait {
  /* background-color: hsl(121, 7.5%, 19%); */
  background-image: linear-gradient(180deg, hsl(121, 4.5%, 21%), hsl(136, 3.2%, 24%), hsl(132, 2%, 23%))
}

body.mobile-portrait div.pane-container {
  display: flex;
  flex-direction: column;

  width: 100vw;
}

body.mobile-portrait div.links-container-outer {
  position: relative;
  
  top: 1.382em;
  height: 0;

  display: flex;
  align-items: center;
}

body.mobile-portrait div.links-container {
  height: 1em;

  display: flex;
  align-items: center;
}

body.mobile-portrait div.links-container-outer, body.mobile-portrait div.links-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

body.mobile-portrait div.links-container {
  z-index: 1;
  flex-direction: row;
  /* background-color: hsla(67, 14.6%, 38.2%, 0.618); */
  /* border-radius: 0.236em; */
  padding-top: 0.236em;
  padding-bottom: 0.618em;
  padding-left: 0.618em;
  padding-right: 0.618em;
  height: 2.5vh;
}

body.mobile-portrait div.links-container > div {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: 1.8vh;

  color: hsla(188, 14.6%, 61.8%, 0.382);
}

body.mobile-portrait div.links-container {
  margin-left: 1em;
}

body.mobile-portrait div.pane.first {
  background-color: #101010;
}

body.aspect-ratio-075 div.pane.first {
  background: url("../images/ipad-075-version/background-shore.jpg") center center;
  background-size: cover;
}

body.aspect-ratio-05625 div.pane.first {
  background: url("../images/iphone-05625-version/background-shore.jpg") center center;
  background-size: cover;
}

body.aspect-ratio-04622 div.pane.first {
  background: url("../images/iphone-04622-version/background-shore.jpg") center center;
  background-size: cover;
}

body.mobile-portrait div.pane.first div.meditation-desc-container,
body.mobile-portrait div.pane.first div.meditation-desc-bottom-container {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
}

body.mobile-portrait div.pane.first div.meditating-girl-container {
  display: none;
}

body.mobile-portrait div.pane.first div.meditation-desc img,
body.mobile-portrait div.pane.first div.meditation-desc-bottom img {
  width: 100%;
}

body.mobile-portrait div.divider.first-and-second {
  background-color: hsl(120, 9%, 61.8%);
}

body.mobile-portrait div.pane.second div.content-container > div.moonstone-chimes-title-container, 
body.mobile-portrait div.pane.second div.content-container > div.moonstone-chimes-desc-container, 
body.mobile-portrait div.pane.second div.content-container > div.iphone-image-container, 
body.mobile-portrait div.pane.third > div.cascading-display-container {
  position: relative;
  width: 100%;
  height: 0px;
}

body.mobile-portrait div.pane.second div.content-container {
  position: relative;
  width: 100%;
  height: 100%;
}

body.mobile-portrait div.pane.second div.content-container div.moonstone-chimes-title {
  position: relative;
  top: 16.09071274vh;
  left: calc(50% - 21.59827214vh);
  height: 4.139668826vh;
  width: 34.98920086vh;

  /* background: url("../images/rendered-text-moonstone-chimes-title.png") no-repeat center right;
  background-size: contain; */
}

body.mobile-portrait div.pane.second div.content-container div.moonstone-chimes-title > img {
  content: url("../images/iphone-version/rendered-text-moonstone-chimes-title.png");
  width: 100%;
}

body.mobile-portrait div.pane.second div.content-container div.moonstone-chimes-desc {
  position: relative;
  top: calc(21.67026638vh);
  left: calc(50% + 17.31461483vh);
  width: 5.183585313vh;
  height: 50.89992801vh;

  /* background: url("../images/rendered-panel-moonstone-chimes-desc-with-border.png") no-repeat center center;
  background-size: contain; */
}

body.mobile-portrait div.pane.second div.content-container div.moonstone-chimes-desc > img {
  content: url("../images/iphone-version/rendered-panel-moonstone-chimes-desc-with-border.png");
  width: 100%;
}

body.mobile-portrait div.pane.second div.content-container div.iphone-image {
  position: relative;
  top: 22.4262059vh;
  left: 0;
  width: calc(50% + 12.16702664vh);
  height: 77.5737941vh;

  background: url("../images/iphone-version/iphone-mockup.png") right top;
  background-size: cover;
}


body.mobile-portrait div.divider.second-and-two_point_five {
  background-color: hsl(158, 4%, 30%);
}

body.mobile-portrait div.pane.two_point_five {
  background-color: hsl(183, 30%, 11.5%);
  width: 100%;
  height: 14.5898034vh;
}

body.mobile-portrait div.pane.two_point_five div.features-desc-container {
  position: relative;

  top: 4.175665947vh;
  left: calc(50% - 16.09071274vh);
  width: 33.65730742vh;
  height: 6.587473002vh;
}

body.mobile-portrait div.pane.two_point_five div.features-desc-container > img {
  content: url("../images/iphone-version/rendered-panel-features-with-glow.png");
  width: 100%;
}

body.mobile-portrait div.divider.two_point_five-and-third {
  background-color: hsl(173, 29.03%, 17.05%);
}

body.mobile-portrait div.divider.second-and-third {
  display: none;
}

body.mobile-portrait div.pane.third > div.cascading-display-container {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
}

body.mobile-portrait div.pane.third > div.cascading-display-container > div.cascading-display {
  position: relative;
  width: calc(50% + 17.17062635vh);
  height: 100vh;
  top: 0;
  left: calc(50% - 17.17062635vh);

  background: url("../images/iphone-version/cascading-mockups-2.png") no-repeat left center;
  background-size: cover;
}

body.mobile-portrait div.pane.third > div.features-desc-container {
  display: none;
}

body.mobile-portrait div.pane.third > div.features-desc-container > div.features-desc > img {
  content: url("../images/web-version/rendered-panel-features-with-shadow.png");
}

body.mobile-portrait div.divider.third-and-bottom {
  background-color: hsl(172, 30%, 14.6%);
}

body.mobile-portrait div.bottom {
  width: 100%;
  height: 18.6vh;
  
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background-color: hsl(20, 1%, 38.2%);
}

body.mobile-portrait div.bottom > div.created-with-love-container {
  width: 100%;
  height: 3vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

body.mobile-portrait div.bottom > div.created-with-love-container > div.created-with-love {
  position: relative;

  top: 0.8279337653vh;
  width: 26.56587473vh;
  height: 1.043916487vh;

  background: url("../images/iphone-version/rendered-text-created-with-love.png") no-repeat center center;
  background-size: contain;
}

body.mobile-portrait div.bottom > div.center-container {
  width: 100%;
  height: 12.6vh;

  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

body.mobile-portrait div.bottom > a.center-container > div.now-available-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;

  width: 100%;
  height: calc(8.531317495vh - 3vh);
}

body.mobile-portrait div.bottom > a.center-container > div.now-available-container > div.now-available {
  width: 24.19006479vh;
  height: 2.483801296vh;

  background: url("../images/iphone-version/rendered-text-now-available.png") no-repeat center center;
  background-size: contain;
}

body.mobile-portrait div.bottom > a.center-container > div.badge-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  width: 100%;
  height: calc(12.6vh - 8.531317495vh + 3vh);
}

body.mobile-portrait div.bottom > a.center-container > div.badge-container > figure.badge {
  width: 11.01511879vh;
  height: 3.671706263vh;
  margin: 1.079913607vh 0px 0px 0px;

  background-image: url('../images/iphone-version/badge_306x102_b12.png');
  background-size: cover;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), only screen and (min-resolution: 144dpi) {
	body.mobile-portrait div.bottom > div.center-container > div.badge-container > figure.badge {
      width: 11.01511879vh;
      height: 3.671706263vh;
      margin: 1.079913607vh 0px 0px 0px;

      background-image: url('../images/iphone-version/badge_612x204_b12.png');
      background-size: cover;
    }
}

  
body.mobile-portrait div.bottom > div.copyright {
  width: 100%;
  height: 3vh;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
}

body.mobile-portrait div.bottom > div.copyright > div {
  font-size: 1.5vh;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  color: hsl(54, 1%, 36%);
  padding-bottom: 0.236em;
}