
/* --------------------  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-4s */

.transparent-navbar + div.layer-4s { padding-top: calc(80px - 1vw + 10vw); }
.transparent-navbar + div.layer-4s::after{ top: calc(80px - 1vw); }
div.layer-4s{ padding-top: 8vw; }
div.layer-4s::after{
  height:12vw;
  background-image: url(../../img/bg/layer/layer-4s-red.png);
}

/* layer-ue */

.transparent-navbar + div.layer-ue { padding-top: calc(80px - 1vw + 12vw); }
.transparent-navbar + div.layer-ue::after{ top: calc(80px - 1vw); }
div.layer-ue{ padding-top: 12vw; }
div.layer-ue::after{
  height:12vw;
  background-image: url(../../img/bg/layer/layer-ue.png);
}

/* 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-bottom */

div.layer-bottom{ padding-bottom: 7vw; }
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: 7vw; }
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;
}
