/* --------------------  Layers (background images)  ---------------------- */

div[class*="layer-"]::after{
  content: '';
  position: absolute;
  display: block;
  pointer-events: none;
  top: 0px;
  left: 0px;
  width:100%;
  background-size: contain;
  background-position: top left;
  background-repeat: no-repeat;
  z-index: 1;
}
.transparent-navbar + div[class*="layer-"]::after{ top: 80px; padding-top: 80px; }

/* layer-top */

.transparent-navbar + div.layer-top { padding-top: calc(80px + 7vw); }
div.layer-top{ padding-top: 7vw; }
div.layer-top::after{
  height:12vw;
  background-image: url(../../img/bg/layer/layer-top.png);
}
.transparent-navbar + div.layer-top-transparent { padding-top: calc(80px + 7vw); }
div.layer-top-transparent{ padding-top: 7vw; }
div.layer-top-transparent::after{
  height:12vw;
  background-image: url(../../img/bg/layer/layer-top-transparent.png);
}

/* layer-baner */

.transparent-navbar + div.layer-baner::after { top: auto; padding-top: 0px; bottom: -3.8vw; }
div.layer-baner{ padding-bottom: 0vw; }
div.layer-baner::after{
  top: auto;
  bottom: -3.8vw;
  background-position: bottom left;
  height:10vw;
  background-image: url(../../img/bg/layer/layer-baner.png);
}
div.layer-baner .text{
  padding-top: 2vw !important;
  padding-bottom: 3vw !important;
}
div.layer-baner + div.section{
  padding-top: 8vw;
}

/* layer-bottom */

div.layer-bottom{ padding-bottom: 15vw; }
div.layer-bottom::after{
  top: auto;
  bottom: 0px;
  background-position: bottom left;
  height:12vw;
  background-image: url(../../img/bg/layer/layer-bottom.png);
}
div.layer-bottom-transparent{ padding-bottom: 15vw; }
div.layer-bottom-transparent::after{
  top: auto;
  bottom: 0px;
  background-position: bottom left;
  height:12vw;
  background-image: url(../../img/bg/layer/layer-bottom-transparent.png);
}

/* layer-circle */

div.layer-circle::after{
  top: -5rem;
  height:10rem;
  background: url(../../img/bg/layer/layer-circle-location.png) no-repeat 50% 50%;
  background-size: contain;
}