@keyframes blueAnimateRight{
  0%{left: 0; opacity: 0;}
  50%{left: 50px; opacity: 1;}
  100%{left: 0; opacity: 1;}
}
@keyframes blueAnimateLeft{
  0%{right: 0; opacity: 0;}
  50%{right: 50px; opacity: 1;}
  100%{right: 0; opacity: 1;}
}
.animated-svg{
  text-align: center;
}
.element-container{
  display: inline-block;
  position: relative;
  vertical-align: middle;
}
.names{
  position: absolute;
  width: 75%;
  left: 14%;
  top: calc(50% + 40px);
  transform: translateY(-50%);
  z-index: 1;
  opacity: 0;
  transition: all ease-in-out 0.3s;
}
.animated-svg svg{
  width: 100%;
  height: 100%;
}
.animated-svg.active .names{
  top: calc(50% + 0px);
  opacity: 1;
}
.left-green .names{
  left: 0%;
  transition-delay: 0.4s;
}
.right-green .names{
  left: 19%;
  transition-delay: 0.4s;
}
.square{
  color: #fff;
  background: rgb(1, 69, 147);
  font-size: 65px;
  font-family: 'Unna', serif;
  line-height: 75px;
  height: 357px;
  margin: 0 -11px;
  width: 357px;
  z-index: 2;
}
.square .names{
  top: calc(50% + 0px);
  opacity: 1;
}
.left-green, .left-blue, .right-green, .right-blue{
  color: #ffffff;
  font-family: 'Unna', serif;
  font-size: 30px;
  line-height: 35px;
  height: 285px;
}
.left-green{
  margin-right: -82px;
}
.right-green{
  margin-left: -82px;
}
.left-green, .right-green{
  z-index: 0;
  transition: all ease-in-out 0.3s;
  transition-delay: 0.4s;
}
.left-blue, .right-blue{
  z-index: 1;
  opacity: 0;
}
.left-blue svg, .right-blue svg{
  filter: drop-shadow(0px 3px 6px rgb(0 0 0 / 0.16));
}
.left-green{
  right: 50px;
  opacity: 0;
}
.right-green{
  left: 50px;
  opacity: 0;
}
.animated-svg.active .right-blue{
  animation: blueAnimateRight 0.3s ease-in-out 0s forwards;
}
.animated-svg.active .left-blue{
  animation: blueAnimateLeft 0.3s ease-in-out 0s forwards;
}
.animated-svg.active .left-green{
  right: 0;
  opacity: 1;
}
.animated-svg.active .right-green{
  left: 0;
  opacity: 1;
}
@media screen and (max-width: 2600px){
  .square{
    width: 245px;
    height: 245px;
    font-size: 50px;
    line-height: 65px;
  }
  .left-green, .left-blue, .right-green, .right-blue{ 
    font-size: 25px;
    line-height: 30px;
    height: 194px;
    width: 194px;
  }
  .left-green{
    margin-right: -53px;
  }
  .right-green{
    margin-left: -53px;
  }
}
@media screen and (max-width: 1370px){
  .left-green, .left-blue, .right-green, .right-blue{ 
    font-size: 20px;
    line-height: 24px;
    height: 194px;
    width: 194px;
    
  }
  .names{
    width: 71%;
  }
}
@media screen and (max-width: 1024px){
  .square{
    width:186px;
    height: 186px;
    font-size: 40px;
    line-height: 45px;
  }
  .left-green, .left-blue, .right-green, .right-blue{ 
    height: 150px;
    width: 150px;
    font-size: 17px;
  }
  .left-green{
    margin-right: -42px;
  }
  .right-green{
    margin-left: -42px;
  }
  .names{
    width: 71%;
  }
  .left-green .names{
    width: 76%;
  }
}
@media only screen and (max-width: 760px){
  .animated-svg{
    display: none;
  }
}
@media only screen and (min-width: 761px){
  .diagram__folding_mobile{
    display: none;
  }
}
.diagram__mobile{
  text-align: center;
}