
:root {
  --headerHeight: 190px;
}

.block-type-stackElem {
    display: flex;
    min-width: 700px;
    scroll-margin-top: 200px;
    box-sizing: border-box;
    max-width: 100%;
}

.block-content {
    padding: 65px 30px 60px 125px;
    box-sizing: border-box;
    max-width: 100%;
}

.stack h2 {
  hyphens: manual;
  position: relative;
  left: -5px;
  margin-bottom: 18px;
}

.align-left {
  align-self: flex-start;
  animation: fly-in-left 1.5s ease-in-out forwards;
  transform: translateX(-100%);
}

.align-right {
  align-self: flex-end;
  animation: fly-in-right 1.5s ease-in-out forwards;
  transform: translateX(100%);
}

@media only screen and (min-width: 1600px) { 
    .block-content {
        padding: 50px 20px 60px 300px;
    }
}

.align-left-gallery {
  animation: fly-in-left 1.5s ease-in-out forwards;
  transform: translateX(-100%);
}

.align-right-gallery {
  animation: fly-in-right 1.5s ease-in-out forwards;
  transform: translateX(100%);
}


@media only screen and (max-width: 700px) { 
      :root {
      --headerHeight: 150px;
    }
    .stack {
        display: block;
    }
    .block-type-stackElem {
        justify-content: flex-start;
        flex-wrap: wrap;
        min-width: initial;
        width: 100% !important;
    }
    .block-content {
        min-width: initial;
        width: 100% !important;
        padding: 50px 20px 60px 50px;
    }
    .triangle {
      display: none;
    }
}

@media only screen and (max-width: 500px) { 
    .block-content {
      padding: 40px 20px 40px 20px;
  }
}



@keyframes fly-in-left {
  from {
    transform: translateX(-100%);

  }
  to {
    transform: translateX(0);

  }
}

@keyframes fly-in-right {
  from {
    transform: translateX(100%);

  }
  to {
    transform: translateX(0);

  }
}


@media only screen and (max-width: 900px) {
  .block-type-stackElem {
      scroll-margin-top: 180px;
  }

}