.delay4s{
  -webkit-animation-delay: 3.5s;
    animation-delay: 3.5s;

}
.delay5s{
  -webkit-animation-delay: 4s;
    animation-delay: 4s;
}
.introElements{
    animation-name: introElements;
    animation-iteration-count: 1;
    animation-duration: 0.5s;
    animation-fill-mode: both;
    overflow: hidden;
    transition: 0.1s all ease;
    -webkit-animation-name: introElements;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    -webkit-transition: 0.1s all ease;
}
@keyframes introElements{
    0%{
        opacity: 0;
        width: 60%;
    }   
    100%{
        opacity: 1;
        width: 80%;
    }
}
.introLight{
    animation-name: introLight;
    animation-iteration-count: 1;
    animation-duration: 0.5s;
    animation-fill-mode: both;
    overflow: hidden;
    transition: 0.2s all ease;
}

@keyframes introLight {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
.introMainLogo{
    animation-name: introLogo;
    animation-iteration-count: 1;
    animation-duration: 3s;
    overflow: hidden;
    transition: 0.5s all ease;
    -webkit-animation-name: introLogo;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-duration: 3s;
    -webkit-transition: 0.5s all ease;
}
@keyframes introLogo{
    0%{
        width: 20%;
        opacity: 0;
        margin-top: 80%;
    }
    10%{
        width: 80%;
        opacity: 1;
        margin-top: 0%;
    }
    20%{
        width: 80%;
        opacity: 1;
        margin-top: 5%;
    }
    30%{
        width: 80%;
        opacity: 1;
        margin-top: 5%;
    }
    40%{
        width: 80%;
        opacity: 1;
        margin-top: 5%;
    }
    50%{
        width: 80%;
        opacity: 1;
        margin-top: 5%;
    }
    60%{
        width: 115%;
        overflow: hidden;
        opacity: 1;
        margin-top: 5%;
    }
    71%{
        width: 100%;
        opacity: 1;
        margin-top: 0%;
    }
    100%{
        width: 100%;
        opacity: 1;
        margin-top: 0%;
    }

}

.heartbeat {
    animation: heartbeat 2s infinite;
}

@keyframes heartbeat {

  0% {
    transform: scale(0.8);
  }
  5% {
    transform: scale(0.9);
  }
  10% {
    transform: scale(0.8);
  }
  15% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(0.8);
    
  }
}

/* Pentru logotipul din navbar */
.heartbeat1 {
    animation: heartbeat 2s infinite;
}

@keyframes heartbeat {

  0% {
    transform: scale(0.8);
  }
  5% {
    transform: scale(0.9);
  }
  10% {
    transform: scale(0.8);
  }
  15% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(0.8);
  }
}

.introMenuOverflow{
  animation-name: introMenuOverflow;
  animation-iteration-count: 1;
  animation-duration: 0.5s;
  animation-fill-mode: both;
  transition: 0.3s all ease-in-out;
}
@keyframes introMenuOverflow{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
.MenuOverflowOff{
  animation-name: MenuOverflowOff;
  animation-iteration-count: 1;
  animation-duration: 0.5s;
  animation-fill-mode: both;
  transition: 0.3s all ease-in-out;
}

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