:root {
  --time: 16.5s;
  --tFunc: cubic-bezier(.44,.07,.58,.97);
}

.triangles__main-container {
  position: absolute;
  max-width: 888px;
  width: 100%;
  right: 0;
  top: 50px;
}
#SvgjsSvg1034 {
  position: relative;
  right: 0;
  float: right;
  width: 100%;
}
#triangles-pattern {
  stroke: #eac87f;
  stroke-width: 1.5;
  fill: none;
  fill-rule: evenodd;
  stroke-dashoffset: 0;
  stroke-dasharray: 1100;
  animation: var(--time) loop cubic-bezier(.44,.07,.58,.97) infinite;
}
#first-triangle,
#second-triangle,
#third-triangle {
  opacity: 0;
}
#first-triangle {
  fill: #fe4b00; /* orange */
  animation: var(--time) firstTri var(--tFunc) infinite;
}
#second-triangle {
  fill: #ffffff; /* white */
  animation: var(--time) secondTri var(--tFunc) infinite;
}
#third-triangle {
  fill: #27b6a4; /* light-blue */
  animation: var(--time) thirdTri var(--tFunc) infinite;
}

@keyframes loop {
  0% {
    stroke-dashoffset: 1100;
  }
  9.09% {
    stroke-dashoffset: 1100;
  }
  30.3% {
    stroke-dashoffset: 0;
  }
  78.78% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 1100;
  }
}
@keyframes thirdTri {
  0% {
    opacity: 0;
  }
  9.09% {
    opacity: 0;
  }
  14.14% {
    opacity: 1;
  }
  78.78% {
    opacity: 1;
  }
  82.82% {
    opacity: 0;
  }
}
@keyframes secondTri {
  0% {
    opacity: 0;
  }
  14.14% {
    opacity: 0;
  }
  19.19% {
    opacity: 1;
  }
  82.82% {
    opacity: 1;
  }
  86.86% {
    opacity: 0;
  }
}
@keyframes firstTri {
  0% {
    opacity: 0;
  }
  19.19% {
    opacity: 0;
  }
  24.24% {
    opacity: 1;
  }
  86.86% {
    opacity: 1;
  }
  90.90% {
    opacity: 0;
  }
}


/* left right triangle animation start*/

.right-triangle-container,
.left-triangle-container{
  position: absolute;
  width: 444px;
  top: 22px;
  right: 0px;
  overflow: hidden;
}
.left-triangle-container {
  left: 0;
  top: -220px;
  width: 516px;
}
.home-story-block__triangle--right {
  position: relative;
  right: -118px;
  top: 0;
}
.home-story-block__triangle--left {
  position: relative;
  /*transform: rotate(180deg) translateX(52.5%);*/
  transform-origin: 50% 50%;
  /*left: calc(100% - 530px);*/
  top: 3px;
}
.home-story-block__triangle {
  opacity: .65;
}
.flat-pattern {
  fill: none;
  fill-rule: evenodd;
  stroke: #F7D18F;
  stroke-width: 2;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}
.rightLeftAnimation {
  animation: 4s leftRightTriangles linear forwards;
}
@keyframes leftRightTriangles {
  0% {
    stroke-dashoffset: 1000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
.triangle-parent{
  position: relative;
  overflow: hidden;
}
/* left right triangle animation end */


@media screen and (max-width: 1400px){
  .triangles__main-container{
    max-width: 640px;
    top: -61px;
  }
  .left-triangle-container{
    width: 516px;
  }
  .left-triangle-container{
    left: -30px;
  }
}
@media screen and (max-width: 1302px){
  .triangles__main-container{
    top: 0;
  }
}
@media screen and (max-width: 1180px){
  .triangles__main-container{
    max-width: 615px;
    right: -15px;
    top: 7px;
  }
  .left-triangle-container{
    top: 146px;
    left: -119px;
  }
  .right-triangle-container{
    top: -55px;
    right: -50px;
  }
  .home-story-block__triangle--right{
    right: -90px;
  }
}

@media screen and (max-width: 1096px){
  .triangles__main-container{
    top: -57px;
  }
}
@media screen and (max-width: 962px){
  .triangles__main-container{
    top: 7px;
  }
}
@media screen and (max-width: 850px){
  .triangles__main-container{
    max-width: 528px;
    right: -50px;
    top: 36px;
  }
  .home-story-block__triangle--right{
    right: -100px;
  }
  .left-triangle-container{
    left: -100px;
    top: -50px;
    width: 400px;
  }
}
@media screen and (max-width: 780px){
  .triangles__main-container{
    display: none;
  }
  .right-triangle-container{
    top: -20px;
  }
}