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

  .parallax {
    height: 500px; /* fallback for older browsers */
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-perspective: 300px;
    perspective: 300px;
  }

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

  .parallax__layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .parallax__layer--fore {
    -webkit-transform: translateZ(90px) scale(.7);
    transform: translateZ(90px) scale(.7);
    z-index: 1;
  }

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

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

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

/*
  body, html {
    overflow: hidden;
  }
*/
  * {
    margin:0;
    padding:0;
  }

  .parallax {
    /* font: 400% / 1.5 'Playfair Display', serif; */
    font-family: 'Playfair Display', serif;
  }

   /* centre the content in the parallax layers */
  .title {
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }



  /* style the groups
  --------------------------------------------- */

  #group1 {
    z-index: 5;
    color: #fff;
  }
  #group1 .parallax__layer--back {
    background-image: url("/assets/img-home.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    /* left: -50%; */
  }

  #group2 {
    z-index: 3;
    margin-top: 300px;
  }
  #group2 .parallax__layer--back {
    background: #F0543F;
  }
  #group2 .parallax__layer--base>.title {
    color:#fff;
  }

  #group3 {
    z-index: 4;
  }
  #group3 .parallax__layer--base {
    background-image: url("/assets/img-home01.jpg");
    background-repeat: no-repeat;
    background-size: cover;
  }
  #group4 {
    z-index: 2;
  }

  #group4 .parallax__layer--base {
    background: #fff;
    height: 30%;
  }
  #group4 .parallax__layer--back {
    background: rgba(240,84,63,0.8);
    height: 40%;
    margin-top: 25%;
    color:#fff;
  }
  #group4 .parallax__layer--deep {
    background-image: url("/assets/img-home02.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    left:-70%;
  }

  #group5 {
    z-index: 3; /* slide over group 4 and 6 */
  }
  #group5 .parallax__layer--base {
    background: #fff;
  }

  #group6 {
    z-index: 2; /* slide under group 5 and 7 */
  }
  #group6 .parallax__layer--back {
    background: #F0543F;
  }

  #group7 {
    z-index: 6;
  }

  #group8{
    z-index: 5;
  }
  #group8 .parallax__layer--base {
    background: #fff;
    height: 60%;
  }
  #group8 .parallax__layer--back {
    background: rgba(240,84,63,0.8);
    color:#fff;
  }
  #group8 .parallax__layer--deep {
    background-image: url("/assets/img-home03.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    left:-70%;
  }
  #group9{
    z-index: 6;
  }
  #group9 .parallax__layer--base{
    background: #fff;
  }
  #group10 {
    z-index: 5;
    /* margin-bottom: 0; */
    color: #fff;
  }
  #group10 .parallax__layer--back {
    background-image: url("/assets/img-home.jpg");
    background-repeat: no-repeat;
    background-size: cover;
  }
  #group10 .parallax__layer--back>.title{
    padding-left: 20%;
    padding-top: 20%;
    font-size:60%;
    font-style: italic;
  }

  /*footer{
    margin-top: -70px;
    position: absolute;
    width: 100%;
  }*/
@media (min-width: 71em){
    .title {
      min-width: 900px;
    }
    .parallax {
      font-size:400%;
    }
    #group4, #group5, #group6, #group7, #group8, #group9 {
      font-size:50%;
    }
    #group8 .parallax__layer--back{
      height: 50%;
      margin-top: 40%;
    }
  }
@media (max-width: 70em){
    .parallax {
      font-size: 130%;
    }
  .parallax__group {
    height: 70vh;
  }
  /*#group1 {
    margin-top:20%;
  }*/

  #group8 .parallax__layer--back{
    height: 50%;
    margin-top: 50%;
  }
  #group10 .parallax__layer--base>.title{
    font-size: 120%;
  }
   #group10 .parallax__layer--back{
    top:10%;
  }
  #group10 .parallax__layer--back>.title{
    top:60%;
    font-size:100%;
  }
}

@media (max-width: 850px) {
   #group4 .parallax__layer--back{
    height:100%;
  }

}

@media (max-width: 600px) {
   #group4 .parallax__layer--base{
    height:60%;
  }
  #group4 .parallax__layer--back>.title{
    
  }
}

@media (max-width: 500px) {
  .title {
    min-width: 350px;
  }
  /* #group1 .parallax__layer--back{
    margin-top:50px;
  }*/
 
}

@media (max-width: 400px) {
 /* #group1 .parallax__layer--back{
    margin-top:70px;
  }*/
}