/* --------------------  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-circle */

div.layer-triangle-top::after{
  top: 0;
  height:500px;
  background: url(../../img/bg/layer/triangles-top.png) no-repeat 50% 0px;
  background-size: cover;
}

div.layer-triangle-bottom::after{
  top: calc(100% - 25vw);
  height:25vw;
  background: url(../../img/bg/layer/triangles-bottom.png) no-repeat 0px 100%;
  background-size: contain;
}


/* /////////////////////////////   RESPONSIVE   ///////////////////////////// */

@media only screen and (max-width: 768px)  { /*----------  MOBILE  -------------*/
  div.layer-triangle-top::after{
    height:33vw;
    background: url(../../img/bg/layer/triangles-top.png) no-repeat 50% 100%;
    background-size: cover;
  }
  div.layer-triangle-bottom::after{
    display:none;
  }
}