.section-title.anim,
.page-title.anim {
   -webkit-animation: animTitle 1s 0s both;
   animation: animTitle 1s 0s both;
}

.section-title--secondary span:nth-child(1).anim{
   -webkit-animation: animSectionTitleSecondary 1.5s 0s both;
   animation: animSectionTitleSecondary 1.5s 0s both;
}

.section-title--secondary span:nth-child(2).anim{
   -webkit-animation: animSectionTitleSecondary 1.5s 0.5s both;
   animation: animSectionTitleSecondary 1.5s 0.5s both;
}

.section-title--secondary span:nth-child(3).anim{
   -webkit-animation: animSectionTitleSecondary 1.5s 1s both;
   animation: animSectionTitleSecondary 1.5s 1s both;
}

.resp-menu-modal.anim{
   display: block;
   -webkit-animation: respMenu 0.5s 0s both;
   animation: respMenu 0.5s 0s both;
}

.resp-menu-modal.anim-inverse{
   -webkit-animation: respMenuInverse 0.5s 0s both;
   animation: respMenuInverse 0.5s 0s both;
}

.title-hr.anim{
   -webkit-animation: hr 1s 0.3s both;
   animation: hr 1s 0.3s both;
}

.section-sub-title.anim,
.page-sub-title.anim {
  -webkit-animation: animSubTitle 1.5s 0s both;
   animation: animSubTitle 1.5s 0s both;
}

.card.anim{
   -webkit-animation: card 1s 0s both;
   animation: card 1s 0s both;
}

img[lazy-loading]{
   opacity: 0; 
   position: relative;
}

img.lazy-loading-right{
  -webkit-animation: lazy-loading-img-right 2s 0s forwards;
   animation: lazy-loading-img-right 2s 0s forwards;
}

img.lazy-loading-left{
  -webkit-animation: lazy-loading-img-left 2s 0s forwards;
   animation: lazy-loading-img-left 2s 0s forwards;
}


@keyframes lazy-loading-img-right {
   0% { 
      transform: translateX(50px);
      opacity: 0; 
   }
   100% { 
      transform: translateX(0px);
      opacity: 1; 
   }
}

@keyframes lazy-loading-img-left {
   0% { 
      transform: translateX(-50px);
      opacity: 0; 
   }
   100% { 
      transform: translateX(0px);
      opacity: 1; 
   }
}

@keyframes respMenu {
   0% { 
      transform: translateX(350px);
   }
   100% { 
      transform: translateX(0px);
   }
}

@keyframes respMenuInverse {
   0% { 
      transform: translateX(0);
   }
   100% { 
      transform: translateX(350px);
   }
}

@keyframes animTitle {
   0% {
      opacity: 0;
      transform: translateY(-50px);
   }
   100% {
      opacity: 1;
      transform: translateX(0);
   }
} 

@keyframes animSubTitle {
   0% {
      opacity: 0;
   }
   100% {
      opacity: 1;
   }
} 

@keyframes animSectionTitleSecondary {
   0% {
      opacity: 0;
      transform: translateX(-50px);
   }
   100% {
      opacity: 1;
      transform: translateX(0);
   }
} 

@keyframes hr {
   0% {
      opacity: 0;
   }
   100% {
      opacity: 1;
   }
}   

@keyframes card {
   0% {
      transform: translateY(150px);
      opacity: 0;
   }
   100% {
      transform: translateY(0);
      opacity: 1;
   }
}