/* Parallax base styles
  --------------------------------------------- */

  .parallax {
    /* margin-top: 2.5em; */
    /* height: 500px; */
    /* height: calc(100vh - 3em); */
    /* height: 93vh; */
    /* height: -webkit-calc(100vh - 3em); */
    /* height: -moz-calc(100vh - 3em); */
    /* height: calc(100vh - 3em); */
    /* height: 90vh; */
    /* max-height: calc(100vh - 3em) !important; */
    height: calc(100svh - 3em);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-perspective: 300px;
    perspective: 300px;
  }

  .parallax__group {
    position: relative;
    height: 800px; /* fallback for older browsers */
    height: 140vh;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }

  @media all and (min-width: 400px) {
    .parallax__group {
      height: 120vh;
    }
  }

  @media all and (min-width: 800px) and (orientation: portrait) {
    .parallax__group {
      height: 100vh;
    }
  }

  #landing {
    /* height: calc(100vh - 3em); */
    height: 93vh;
    height: -webkit-calc(100vh - 3em);
    height: -moz-calc(100vh - 3em);
    height: calc(100vh - 3em);
  }

  .parallax__layer {
    position: absolute;
    display: flex;
    top: -1px;
    left: 0;
    right: 0;
    bottom: 0;
  }

  @media screen and (min-width: 600px) and (min-height: 600px) {
  .parallax__group:nth-child(odd) .parallax__layer__half {
    position: absolute;
    /* display: flex; */
    top: 0;
    left: 0;
    /* right: -65vw; */
    width: 385%;
    bottom: 0;
  }

  .parallax__group:nth-child(even) .parallax__layer__half {
    position: absolute;
    /* display: flex; */
    top: 0;
    /* left: -65vw; */
    width: 385%;
    right: 0;
    bottom: 0;
  }
}

  .parallax__layer--fore2 {
    -webkit-transform: translateZ(90px) scale(.7);
    transform: translateZ(90px) scale(.7);
    z-index: 1;
    display: flex;
    align-items: center;
  }

  .parallax__layer--fore {
    -webkit-transform: translateZ(45px) scale(.85);
    transform: translateZ(45px) scale(.85);
    z-index: 4;
    width: 90vw; 
    margin-left: 5vw;
  }

  @media screen and (min-width: 900px) {
    .parallax__layer--fore {
      width: 80vw; 
      margin-left: 10vw;
    }
  }

  @media screen and (min-width: 600px) {
    .coming-soon {
      width: 60vw; 
      margin-left: 20vw;
    }
  }

  .parallax__layer--fore2 img {
    height: auto;
    max-width: 20vw;
    max-height: 90vh;
    margin: auto;
  }

  /* @media screen and (min-width: 600px) and (orientation: landscape) {
    .parallax__layer--fore2 img {
      max-width: 35vw;
    }
  } */

  .parallax__layer--base {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    z-index: 3;
  }

  .parallax__layer--back {
    -webkit-transform: translateZ(-300px) scale(2);
    transform: translateZ(-300px) scale(2);
    z-index: 3;
  }


  /* Debugger styles - used to show the effect
  --------------------------------------------- */

  .debug {
    position: fixed;
    top: 0;
    left: .5em;
    z-index: 999;
    background: rgba(0,0,0,.85);
    color: #fff;
    padding: .5em;
    border-radius: 0 0 5px 5px;
  }
  .debug-on .parallax__group {
    -webkit-transform: translate3d(800px, 0, -800px) rotateY(30deg);
    transform: translate3d(700px, 0, -800px) rotateY(30deg);
 }
  .debug-on .parallax__layer {
    box-shadow: 0 0 0 2px #000;
    opacity: 0.9;
  }
  /* .parallax__group {
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
  } */


  /* demo styles
  --------------------------------------------- */
  /* body:has(div.parallax) {
    overflow: hidden;
  }

  @media (hover: none) {
    body:has(div.parallax) {
      overflow: auto;
    }
  } */

  .parallax__layer--base {
    background: #101010;
  }

  @media screen and (min-width: 600px) and (min-height: 600px) {

  .parallax__group:nth-child(even) .parallax__layer--base {
    background-position: center center;
    background: radial-gradient(
      circle closest-corner at 27% 50%, 
      rgba(247, 190, 20, 0.1) 0, 
      rgba(16, 16, 16, 0.9) 50%, 
      rgba(16, 16, 16, 1) 100%), 
      -webkit-linear-gradient(rgba(16, 16, 16, 0.7), rgba(16, 16, 16, 0.9)), url("/static/images/barrels.jpeg");
   background-size: cover;
  }
  .parallax__group:nth-child(odd) .parallax__layer--base {
    flex-direction: row-reverse;
    background-position: center center;
    background: radial-gradient(
      circle closest-corner at 71% 50%, 
      rgba(247, 190, 20, 0.1) 0, 
      rgba(16, 16, 16, 0.9) 50%, 
      rgba(16, 16, 16, 1) 100%), 
      -webkit-linear-gradient(rgba(16, 16, 16, 0.7), rgba(16, 16, 16, 0.9)), url("/static/images/barrels.jpeg");
    background-size: cover;
  }

  .parallax__group:nth-child(odd) .parallax__layer {
    flex-direction: row-reverse;
  }
  }


  /* style the groups
  --------------------------------------------- */
  #landing .parallax__layer--back {
    z-index: 5; /* slide over group 2 */
    /* background: url("https://img1.wsimg.com/isteam/stock/ArKBBoB/:/rs=w:100%25"); */
    /* background: black; */
    overflow: hidden;
    /* background: #C33764;  fallback colour. Make sure this is just one solid colour. */
    background: -webkit-linear-gradient(rgba(16, 16, 16, 0.1), rgba(16, 16, 16, 0.9)), url("https://img1.wsimg.com/isteam/stock/ArKBBoB/:/rs=w:100%25");
    background: linear-gradient(rgba(16, 16, 16, 0.1), rgba(16, 16, 16, 0.9)), url("https://img1.wsimg.com/isteam/stock/ArKBBoB/:/rs=w:100%25"); /* The least supported option. */
    background-size: cover;                   
    background-repeat: no-repeat;
    background-position: center center;
  }

  #landing .parallax__layer--base {
    z-index: 5; /* slide over group 2 */
    /* background: url("https://img1.wsimg.com/isteam/stock/ArKBBoB/:/rs=w:100%25"); */
    /* background: black; */
    overflow: hidden;
    /* background: #C33764;  fallback colour. Make sure this is just one solid colour. */
    background: -webkit-linear-gradient(rgba(16, 16, 16, 0), rgba(16, 16, 16, 0.2), rgba(16, 16, 16,24 1));
    background: linear-gradient(rgba(16, 16, 16, 0), rgba(16, 16, 16, 0.2), rgba(16, 16, 16, 1)); /* The least supported option. */
  }