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

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

  .parallax__group {
    height: 100vh;
    position: relative;
    height: 1305px; /* fallback for older browsers */
    -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(38px) scale(0.9);
    transform: translateZ(38px) scale(0.9);
    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;
  }

  /* demo styles
  --------------------------------------------- */

  body, html {
    overflow: hidden;
    height:100%;
  }



   /* 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 {
    clear: left;
    float: left;
    min-width: 1024px;
    position: relative;
    width: 100%;
    z-index: 5;
    z-index: 5; /* slide over group 2 */
}
.parallax__layer--base, .parallax__layer--fore {
  background-size: cover;
  background-repeat: no-repeat;
}
.parallax__layer--base.sub1 {
	 background-image: url('images/bg-layers_03.png');
    height:1300px; 
    margin: -600px 0 0;
}
.parallax__layer--fore.sub2 {
   background-image: url('images/bg-layers_06.png');
   height:1366px;

}
.parallax__layer--base.sub3 {
   background-image: url('images/bg-layers_10.png');
   height:1305px;
}
#group2 {
    z-index: 3; /* slide under groups 1 and 3 */
}
#group3 {
    z-index: 4; /* slide over group 2 and 4 */
    
}




@media screen and (max-width:1024px) {
  #group1 {
    transform-style: inherit;
    height:auto;
    position: relative;
    display: none
  }
  .parallax__layer {
      position: relative;
      z-index: 99;
  }
  .parallax__layer--base, .parallax__layer--fore {
    transform:none;
  }
  .mainbanne {
    margin: -400px 0 0;
  }


  .parallax__layer--base.sub1 {
    margin:-200px 0 0;
    height:1200px;
  }
  .parallax__layer--base.sub2 {
    margin:-200px 0 0;
    height:1200px;
  }
  .parallax__layer--base.sub3 {
    margin:-200px 0 0;
    height:1200px;
  }

}