/* Sized for aspect ratio of 1.5 or greater
 * Screen originally developed at 3264x1836
 */

body.web {
  background-color: hsl(171, 17.65%, 15.3%);
}

body.web div.pane-container {
  display: flex;
  flex-direction: column;
}

body.web div.pane.first {
  background-color: #101010;
  background: url("../images/web-version/background-seaside.jpg") center center;
  background-size: cover;
}

body.web div.links-container-outer {
  position: relative;
  
  top: 1.618em;
  height: 0;
  z-index: 1;

  display: flex;
  align-items: center;
}

body.web div.links-container {
  height: 1em;
  width: 100vw;

  display: flex;
  align-items: center;
}

body.web div.links-container-outer, body.web div.links-container {
  flex-direction: row;
  justify-content: flex-end;
}

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

  color:hsla(194, 18.6%, 38.2%, 0.618);
}

body.web div.links-container > div:last-child {
  margin-right: 1.618em;
}

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

/* base height is (48vw - 5.57vh) * 0.2041 */
/* base width is 48vw - 5.57vh */
body.web div.pane.first div.meditation-desc-container div.meditation-desc {
  position: relative;
  top: 6.644880174vh;
  left: calc(100vw - 47.65795207vh - 6.045751634vh); /* calc(52vw - ((48vw - 5.57vh) * 0.0258939581 * 0.5)); */
  width: calc(47.65795207vh);
  height: calc(6.045751634vh);

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

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

body.web div.pane.first div.meditation-desc-bottom-container div.meditation-desc-bottom {
  position: relative;
  top: calc(100vh - 6.045751634vh * 1.618 - 8.877995643vh);
  left: calc(6.045751634vh);
  height: 8.877995643vh;
  aspect-ratio: 3.7975460123;

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

body.web div.pane.first div.meditation-desc-bottom > img {
  content: url("../images/web-version/rendered-meditation-desc-bottom.png");
}

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

body.web div.divider.first-and-second {
  background-color: hsl(170, 10.7%, 77.6%);
}

body.web div.pane.second div.content-container {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
}

body.web div.pane.second div.content-container > div.moonstone-chimes-title-container {
  flex: 1;
}

body.web div.pane.second div.content-container div.moonstone-chimes-title {
  position: relative;
  top: 30.06535948vh;
  left: calc(100% - 4.38vh - 12.36383442vh * 2.5110132159);
  height: 12.36383442vh;
  width: calc(12.36383442vh * 2.5110132159);

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

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

body.web div.pane.second {
  background: url("../images/web-version/background-phone-glow.jpg") no-repeat center center;
  background-size: contain;
}

body.web div.pane.second div.content-container > div.iphone-image-container {
  height: calc(100% - 1.6vh);
  width: 49.291939vh;
  display: flex;
  align-items: flex-end;
}

body.web div.pane.second div.content-container > div.iphone-image-container > div.iphone-image {
  width: 49.291939vh;
  height: 75.87145969vh;

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

body.web div.pane.second div.content-container > div.moonstone-chimes-desc-container {
  flex: 1;
}

body.web div.pane.second div.content-container div.moonstone-chimes-desc {
  position: relative;
  top: calc(35.6vh - (14.6vh * 0.0122324159 * 0.5));
  left: calc(5.57vh - (29.513vh * 0.0060514372 * 0.5));
  width: calc(29.513vh * 1.0060514372);
  height: calc(14.6vh * 1.0122324159);

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

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

body.web div.pane.two_point_five,
body.web div.divider.second-and-two_point_five,
body.web div.divider.two_point_five-and-third {
  display: none;
}

body.web div.divider.second-and-third {
  background-color: hsl(172, 18.6%, 81.4%);
}

body.web div.pane.third {
  background-color: #101010;
  background: url("../images/web-version/background-rock.jpg") no-repeat center center;
  background-size: cover;
}

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

body.web div.pane.third > div.cascading-display-container > div.cascading-display {
  position: relative;
  width: 61.8vw;
  height: 100vh;
  top: 0;
  left: 0;

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

body.web div.pane.third > div.features-desc-container {
  position: relative;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
}

body.web div.pane.third > div.features-desc-container > div.features-desc {
  position: relative;
  top: calc(38.2vh - 11.92810458vh);
  height: calc(11.92810458vh);
  left: calc(50vw + 0.236 * (38.2vh - 11.92810458vh));
  width: calc(68.19172113vh);
  
  /* background: url("../images/rendered-panel-features.png") no-repeat center center;
  background-size: contain; */
}

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

body.web div.divider.third-and-bottom {
  background-color: hsl(167, 12.3%, 77.2%);
}

body.web div.bottom {
  width: 100vw;
  height: 50vh;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background-color: hsl(136, 2.56%, 23.4%);
}

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

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

  top: 2.723311547vh;
  width: 64.32461874vh;
  height: 2.450980392vh;

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

body.web div.bottom > div.center-container {
  width: 100%;
  height: calc(50vh - 3vh - 2vh);

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

body.web 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(24.89106754vh - 3vh);
}

body.web div.bottom > a.center-container > div.now-available-container > div.now-available {
  width: 60.89324619vh;
  height: 6.318082789vh;

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

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

  width: 100%;
  height: calc(48vh - 24.89106754vh);
}

body.web div.bottom > a.center-container > div.badge-container > figure.badge {
  width: 16.66666667vh;
  height: 5.555555556vh;
  margin: 2.941176471vh 0px 0px 0px;

  background-image: url('../images/web-version/badge_306x102_b9.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.web div.bottom > div.center-container > div.badge-container > figure.badge {
      width: 16.66666667vh;
      height: 5.555555556vh;
      margin: 2.941176471vh 0px 0px 0px;

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

body.web div.bottom > div.copyright {
  width: 100vw;
  height: 2vh;

  vertical-align: middle;
  text-align: center;
  font-size: 1.5vh;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  color: hsl(162, 10%, 20%);
}