html {
  scroll-behavior: smooth;
  }
	#background{position:fixed; top:0px; left:0; height:1200px; width:100%;
    /*background-color: #e5e0ca;*/
    background:url('tile2.gif') repeat;
  }
  @media screen and (max-width:768px) {
		#background{height:3500px; z-index:-1;}
	}
  #parallax_space{position:relative; height:2000px; background-color:transparent; z-index:0;}
  @media screen and (max-width:768px) { #parallax_space{height:0;} }
  @media screen and (max-width:480px) { #parallax_space{height:0;}}
  @media screen and (max-width:375px) { #parallax_space{height:0;} }

  .title-text{
  	font-size: 1.5rem;font-weight: bold;
  }

/*=  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  */
#parallax-container{position:relative; width:100%; overflow:hidden;}
@media screen and (min-width:769px) { /* Desktop */
  #parallax-container{margin-top:100px; height:2400px; }
}
@media screen and (max-width:768px) { /* tablet */
  #parallax-container{margin-top:0px; margin-bottom: -500px;}
}
@media screen and (max-width:480px) { /* mobile */

}

/*=  =  Page 1 =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  */
  #page1{position:relative; width:100%; border:0px solid red; z-index:1020;}
  #page1 .vsoybox{position:absolute; height:auto; z-index:3;}
  #page1 .object{position:absolute; height:auto;  z-index:2;}
  #page1 .object2{position:absolute; height:auto;  z-index:4;}
  #page1 .milk{position:absolute;height:auto; z-index:1; display:block;}
  #page1 .milk .text{position:absolute;}
@media screen and (min-width:769px) { /* Desktop */
  #page1 {top: 2.5%;  height:850px;}
  #page1 .vsoybox{right: 18%; top: 14%; width:23%;}
  #page1 .milk{
    background: url(milk1.png) no-repeat;
    right: 10%; height: 540px; top: 53%; width: 45%;
    background-position: 0px 0px; background-size: 100%;
  }
  #page1 .milk .text{ top: 20%; left: 137px; width: 43%; font-size: 1.2rem; }
  #page1 .object{left: -3%; top: 0;  width:50%;}
  #page1 .object2{left: 20%; top: 47%;  width:23%;}
}
@media screen and (min-width:1280px) { /* Big Desktop */
  #page1 .milk{
    background: url(milk1.png) no-repeat;
    right: 10%; height: 585px; top: 53%; width: 45%;
    background-position: 0px 0px; background-size: 100%;
  }
  #page1 .milk .text{ top: 20%; left: 160px; width: 43%; font-size: 1.2rem; }
}
@media screen and (min-width:1900px) { /* Big Desktop */
  #page1 .milk{
    background: url(milk1.png) no-repeat;
    right: 10%; height: 585px; top: 53%; width: 45%;
    background-position: 0px 0px; background-size: 100%;
  }
  #page1 .milk .text{ top: 36%; left: 198px; width: 43%; font-size: 1.2rem; }
}
@media screen and (min-width:1440px) { /* Big Desktop */
}
@media screen and (max-width:768px) { /* tablet */
  #page1 {top:0; height:1000px;}
  #page1 .vsoybox{top: 36%; width:40%; right:5%;}
  #page1 .milk{bottom: 0;
    background: url(milk1.png) no-repeat;
    width: 117%; height: 582px; top: 68%; left: -12%;
    background-size: 121% 96%; background-position: -41px 22px;
  }
  #page1 .milk .text{ top: 163px; left: 225px; width: 56%; font-size: 1.8rem;}
  #page1 .object{top: 81px; width:88%; left:-3%;}
  #page1 .object2{left: 26%; top: 50%;  width:35%;}
}
@media screen and (max-width:480px) { #page1 {height:800px;} /* mobile */
  .title-text{
  	font-size: 1.38rem;font-weight: bold;
  }
  #page1 .milk{height:420px; width:112%; left:-12%; top:53%;}
  #page1 .milk .text{ top: 28%; left: 115px; width: 50%; font-size: 1.28rem;}
}
@media screen and (max-width:375px) { 
  #page1 {height:600px;} 
  #page1 .milk .text{ top: 28%; left: 80px; position: absolute; width: 54%; font-size: 1.1rem;}
}


/*=  =  Page 2 =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  */
  #page2{position:relative; width:100%; border:0px solid green; z-index:1020;}
  #page2 .vsoybox{position:absolute; height:auto; z-index:3;}
  #page2 .milk{position:absolute; height:auto; z-index:1; display:block;}
  #page2 .object{position:absolute; height:auto; z-index:2;}
  #page2 .object2{position:absolute; height:auto; z-index:2;}
  #page2 .milk .text{position:absolute;}
@media screen and (min-width:769px) { /* Desktop */
  #page2{left: 0; top: 10%;  height:500px;}
  #page2 .vsoybox{left: 15%; top: 40%; width:24%;}
  #page2 .milk{
    border: 0px solid yellow;
    background: url(milk2.png) no-repeat;
    left: 5%; height: 640px; top: 40%; width: 45%;
    background-position: 0px 0px; background-size: 100%;
  }
  /*#page2 .milk .text{ top: 46%; left: 190px; width: 46%; font-size: 1.2rem; }*/
  #page2 .milk .text{ top: 37%; left: 205px; width: 48%; font-size: 1.2rem; }
  #page2 .object{right: 0%; top: 0; width:52%;}
  #page2 .object2{right: -4%; top: 0; width:30%;}
}
@media screen and (min-width:1280px) { /* Big Desktop */
  #page2 .milk{
    border: 0px solid yellow;
    background: url(milk2.png) no-repeat;
    left: 5%; height: 640px; top: 40%; width: 45%;
    background-position: 0px 0px; background-size: 100%;
  }
  /*#page2 .milk .text{ top: 46%; left: 190px; width: 46%; font-size: 1.2rem; }*/
  #page2 .milk .text{ top: 26%; left: 209px; width: 48%; font-size: 1.2rem; }
}
@media screen and (min-width:1440px) { /* Big Desktop */
  #page2{top: 11%;}
}
@media screen and (min-width:1600px) { /* Big Desktop */
  #page2 .milk{
    border: 0px solid yellow;
    background: url(milk2.png) no-repeat;
    left: 5%; height: 640px; top: 40%; width: 45%;
    background-position: 0px 0px; background-size: 100%;
  }
  /*#page2 .milk .text{ top: 46%; left: 190px; width: 46%; font-size: 1.2rem; }*/
  #page2 .milk .text{ top: 38%; left: 251px; width: 48%; font-size: 1.2rem; }
}
@media screen and (min-width:1900px) { /* Big Desktop */
  #page2 .milk{
    border: 0px solid yellow;
    background: url(milk2.png) no-repeat;
    left: 5%; height: 750px; top: 40%; width: 45%;
    background-position: 0px 0px; background-size: 100%;
  }
  #page2 .milk .text{ top: 44%; left: 281px; width: 48%; font-size: 1.2rem; }
}
@media screen and (max-width:1080px) { /* Big Desktop */
  #page2 .milk{
    border: 0px solid yellow;
    background: url(milk2.png) no-repeat;
    left: 5%; height: 640px; top: 40%; width: 45%;
    background-position: 0px 0px; background-size: 100%;
  }
  #page2 .milk .text{ top: 25%; left: 170px; width: 48%; font-size: 1rem; }
}
@media screen and (max-width:768px) { /* tablet */
  #page2{height:1400px; display:block; margin-top:42%; }
  #page2 .vsoybox{top: 58%; width:40%; left:5%;}
  #page2 .milk{
    background: url(milk2.png) no-repeat;
    left: -29%; height: 948px; top: 54%; width: 141%;
    background-position: 0px 0px; background-size: 100%;
  }
  #page2 .milk .text{ top: 440px; left: 360px; width: 46%; font-size: 1.8rem; }
  #page2 .object{top: 0px; right:-1%; width:81%;}
  #page2 .object2{right: -4%; top: 0; width:50%;}
}
@media screen and (max-width:480px) {
  .title-text{
  	font-size: 1.1rem;font-weight: bold;
  }
  #page2 {height:800px;} 
  #page2 .vsoybox{top: 40%;}
  #page2 .milk{top:70%}
  #page2 .milk .text{ top: 19%; left: 219px; width: 44%; font-size: 1rem; }
} /* mobile */
@media screen and (max-width:375px) { 
  #page2 {height:600px; } 
	#page2 .milk .text{ top: 20%; left: 183px; width: 46%; font-size: 1.1rem; }
}

/*=  =  Page 3 =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  */
  #page3{position:relative; width:100%; border:0px solid blue; z-index:1020;}
  #page3 .vsoybox{position:absolute; height:auto; z-index:3;}
  #page3 .milk{position:absolute; height:auto; z-index:1; display:block;}
  #page3 .object{position:absolute; height:auto; z-index:2}
  #page3 .seed1{position:absolute; height:auto; z-index:2;}
  #page3 .seed2{position:absolute; height:auto; z-index:2;}
  #page3 .milk .text{position:absolute;}
/*#page3 .bean_seed1{position:absolute; height:auto; z-index:2;}
#page3 .bean_seed2{position:absolute; height:auto; z-index:2;}*/

@media screen and (min-width:769px) {
  #page3{left: 0; top: 12%;  height:500px;}
  #page3 .vsoybox{left: 20%; top: 30%; width:26%;}
  #page3 .milk{bottom: 0;
    border: 0px solid yellow;
    background: url(milk3.png) no-repeat;
    right: 10%;
    height: 636px;
    top: 10%;
    width: 45%;
    background-position: 0px 0px;
    background-size: 100%;
  }
  #page3 .milk .text{
  	top: 29%;
      left: 145px;
      width: 53%;
      font-size: 1.2rem;
  }
  #page3 .object{right: 10%; top: 180%; width:30%;}
  #page3 .seed1{right: 15%; top: 0%;  width:25%;}
  #page3 .seed2{left: 15%; top: 160%;  width:25%;}
  /*#page3 .bean_seed1{left: 20%; top: 0%;}
  #page3 .bean_seed2{left: 20%; top: 0%;}*/
}
@media screen and (min-width:1440px) { /* Big Desktop */
  #page3{top: 18%;}
  /*#page3 .object{top:218%;}*/
  #page3 .object{top:130%;}
}
@media screen and (min-width:1900px) { /* Big Desktop */
  #page3 .milk{bottom: 0;
    border: 0px solid yellow;
    background: url(milk3.png) no-repeat;
    right: 10%;
    height: 810px;
    top: 10%;
    width: 45%;
    background-position: 0px 0px;
    background-size: 100%;
  }
}
@media screen and (max-width:768px) {
  #page3{height:1200px; display:block; margin-top:25%;}
  #page3 .vsoybox{top: 0; width:47%; left:33%;}
  #page3 .milk{
    background: url(milk3.png) no-repeat;
    left: -29%; height: 1094px; top: 0%; width: 141%;
    background-position: 0px 0px; background-size: 100%;
  }
  #page3 .milk .text{ top: 342px; left: 300px; width: 49%; font-size: 1.8rem; }
  #page3 .object{right: 7%; top: 76%; width:52%;}
  #page3 .seed1{left: 22%; top: -29%;  width:35%;}
  #page3 .seed2{right: 9%; top: 18%;  width:35%;}
}
@media screen and (max-width:480px) { 
  #page3 {height:900px; margin-top:64%;} 
  #page3 .vsoybox{top:0%; left:20px;}
  #page3 .object{top:20%;}
  #page3 .seed2{top:-5%}
  #page3 .milk{}
  #page3 .milk .text{ top: 17%; left: 200px; width: 47%; font-size: 1.3rem; }
}
@media screen and (max-width:375px) { 
  #page3 {height:900px;} 
	#page3 .milk .text{ top: 15%; left: 130px; width: 53%; font-size: 1.1rem; }
}