* { padding: 0; margin: 0; }
html { font-size: 10px; }
body { background-color: #130d0a; font-family: "Playfair Display", serif; color: #fff; }
/* html::-webkit-scrollbar,
body::-webkit-scrollbar { width: 0; height: 0; } */

#hero { position: relative; height: 800px; max-width: 1920px; overflow: hidden; margin: 0 auto; }
#content { background-color: #130d0a; }
.layer { position: fixed; width: 100%; height: 800px; background-position: bottom center; background-size: auto; background-repeat: no-repeat; z-index: -1; }

#hero,
.layer { min-height: 800px; }
.layer-bg { background-image: url("../../assets/images/parallax/ilu_bg.jpg"); }
.layer-1 { background-image: url("../../assets/images/parallax/ilu_03.png"); background-position: left bottom; }
.layer-2 { background-image: url("../../assets/images/parallax/ilu_02.png"); }
.layer-3 { background-image: url("../../assets/images/parallax/ilu_man.png"); background-position: right bottom; }
.layer-4 { background-image: url("../../assets/images/parallax/ilu_01.png"); }
.layer-overlay { background-image: url("../../assets/images/parallax/ilu_overlay.png"); }

.first-section { padding: 50px 20px 20px; }
.first-section h1 { line-height: 120%; margin-bottom: 30px; }
.first-section p { color: #ede0d5; font-size: 18px; line-height: 150%; }

@media only screen and (max-width: 768px) {
  .layer-1 { background-position: 26% bottom; }
  .layer-3 { background-position: 35% bottom; }
}