#sp-top1, #sp-top2, #sp-top3 {
  margin-top:10px;
}
#sp-landing{
  height:calc(100vh - 100px);
  align-content:center;
  position:relative;
  background-position:top right;
}
@media (max-width:1400px){
  #sp-landing{
    background-size:cover !important;
  }
}
.scrollFade { transition: opacity 0.7s ease-in; }
.scrollFadeOut { opacity: 0; }
.scrollFadeIn { opacity: 1; }

button.landing{
  position:absolute;
  bottom:0px;
  right:calc(50% - 50px);
}
a.landing-anchor{
  position:absolute;
  bottom:100px;
  visibility:hidden;
}
.header-sticky{
  background:rgba(224,225,221,0.9);
}
textarea.contact-message {
  width:100%;
  padding:5px;
  border-radius:5px;
}
.form-horizontal .controls {
  margin-left:0;
}
.flip-card {
  background-color: transparent;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.7s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the back side */
.flip-card-back {
  transform: rotateY(180deg);
}
@layer top-module-border {
  .content-top-module {
    display: grid;
    max-width: 400px;
    aspect-ratio: 4/3;
    --bc: #778DA9; /*border-color*/
    --bs: 10px; /*border-size*/
    --cs: 30px; /*cut-size*/
    grid-template-rows: var(--cs) auto 1fr;
    position:relative;
  }
  .content-top-module:hover {
    --bc: #E0E1DD;
    color: #0D1B2A;
  }
  .content-top-module h3 {
    grid-area: 1/1/2/2;
    justify-self: end;
    min-width: 70%;
    min-height: calc(var(--cs) * 2 + var(--bs));

    display: grid;
    place-items: center;
    text-align: center;
    background-color: var(--bc);

    clip-path: polygon(
      var(--cs) 0,
      100% 0,
      100% 100%,
      0 100%,
      0 var(--cs)
    );
  }
  .content-top-module p {
    padding:20px;
    grid-area: 2/1/4/2;
    width: 100%;
    height: 200px; 
    object-fit: cover;
    --em: .5;
    clip-path: polygon(
      calc(var(--cs) + var(--bs) * var(--em)) var(--bs), 
      calc(100% - var(--bs)) var(--bs),
      calc(100% - var(--bs)) calc(100% - var(--cs) - var(--bs)),
      calc(50% + var(--cs) - var(--bs) * var(--em)) calc(100% - var(--cs) - var(--bs)),
      calc(50% - var(--bs) * var(--em)) calc(100% - var(--bs)),
      var(--bs) calc(100% - var(--bs)),
      var(--bs) calc(var(--cs) + var(--bs) * var(--em))
      );    
  }
  .content-top-module::before{ /*border*/
    content: "";
    grid-area: 2/1/4/2;
    background-color: var(--bc);
    clip-path: polygon(
      var(--cs) 0, 
      100% 0,
      100% calc(100% - var(--cs)),
      calc(50% + var(--cs)) calc(100% - var(--cs)),
      50% 100%,
      0% 100%,
      0 var(--cs)
    );
  }
}
.text-align-center {
  text-align:center;
}
.justify-items-center {
  justify-items:center;
}