/* --------------------  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: 0px; padding-top: 0px; }

/* layer-4s */

.transparent-navbar + div.layer-4s { padding-top: calc(80px + 10vw); }
.transparent-navbar + div.layer-4s.mid { padding-top: calc(80px + 7vw); }
.transparent-navbar + div.layer-4s.narrow { padding-top: calc(80px + 4vw); }
.transparent-navbar + div.layer-4s::after{ top: 0px; }
div.layer-4s{ padding-top: 8vw; }
div.layer-4s::after{
  height:120px;
  background: 100% 86px no-repeat url(../../img/bg/layer/4s_logo-line.png);
}

@media only screen and (max-width: 992px)  {
    div.layer-4s::after{ background-position: 100% 72px; }
}
@media only screen and (max-width: 768px)  { /*----------  MOBILE  -------------*/
    .transparent-navbar + div.layer-4s.narrow, .transparent-navbar + div.layer-4s.mid { padding-top: calc(80px + 10vw); }
    div.layer-4s::after{ background-position: 100% 62px; }
}
@media only screen and (max-width: 600px)  {
    div.layer-4s::after{ background-position: 50% 52px; }
}