/* Logo anmination */

@keyframes float {
  0% {
    box-shadow: 0 0 10px 5px rgba(248, 5, 92, 0.815);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 20px 5px rgba(214, 163, 247, 1);
    transform: scale(1.09);
  }
  100% {
    box-shadow: 0 0 30px 5px rgba(113, 166, 246, 0.815);
    transform: scale(1);
  }
}

.logo-anim {
  margin-top: 35px;
  background: linear-gradient(-35deg, rgba(30, 115, 250, 0.2) 0%, rgba(0, 0, 0, 0.4) 33%, rgba(0, 0, 0, 0.1) 77%);
  border-radius: 10px;
  width: 90px;
  height: 90px;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: 0 5px 10px 0px rgba(0,0,0,0.6);
  transform: translatey(0px);
  animation: float 2s infinite alternate;
  img { width: 85%; height: auto; }
}

.logo-loader {
  background: linear-gradient(315deg, rgba(36,45,61,1) 50%, rgba(36,45,61,1) 50%, rgba(13,110,254,0.5) 120%);
  border-radius: 10px;
  width: 90px;
  height: 90px;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: 0 5px 10px 0px rgba(0,0,0,0.6);
  transform: translatey(15px);
  animation: loopLogo 2s infinite alternate;
  img { width: 85%; height: auto; }
}

@keyframes loopLogo {
  0% {
    box-shadow: 0 0 20px 5px rgba(171,107,236, 0.815);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 40px 5px rgba(88,153,249, 1);
    transform: scale(1.1);
  }
  100% {
    box-shadow: 0 0 20px 5px rgba(171,107,236, 0.815);
    transform: scale(1);
  }
}

/* HEADER */

.full-height-land{
  height: 100vh;
}

.full-height{
  height: 100vh;
}

.headAnim{
  margin-top: -65px;
}

.iphoneAnim{
  margin-left: -70px;
}

.macbookAnim{
  margin-right: -100px;
}

.text-animated-gradient-dark {
  background: linear-gradient(to right, #000000 0%, #04347C 33%, #EFEFEF 66%, #FFFFFF 100%);
 -webkit-background-clip: text;
 background-clip: text;
 -webkit-text-fill-color: transparent;
 text-fill-color: transparent;
 background-size: 500% auto;
 animation: textShine 3s ease-in-out 1;
}

.text-animated-gradient-blue-header {
 background: linear-gradient(to right, #0D6EFE 0%, #71A6F6 33%, #EFEFEF 66%, #FFFFFF 100%);
 -webkit-background-clip: text;
 background-clip: text;
 -webkit-text-fill-color: transparent;
 text-fill-color: transparent;
 background-size: 500% auto;
 animation: textShine 3s ease-in-out 1;
}

.text-animated-gradient-dark-loop {
  background: radial-gradient(ellipse farthest-corner at center center, #04347C 0%, #000000 100%);
 -webkit-background-clip: text;
 background-clip: text;
 -webkit-text-fill-color: transparent;
 text-fill-color: transparent;
 background-size: 500% auto;
 animation: textShine 3s ease-in-out 1;
}

.text-animated-gradient-blue {
  background: #121FCF;
  background: radial-gradient(ellipse farthest-corner at center center, #0D6EFE 0%, #ab6bec 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  background-size: 500% auto;
  animation: textShine 6s ease-in-out 999;
}

.text-typewritter{
  overflow: hidden;
  white-space: nowrap;
  margin: 0 auto;
  animation:
  typing 2.5s steps(33, end);
}

/* Typing effect */

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes textShine {
0% {
   background-position: 100% 50%;
}
100% {
   background-position: 0% 50%;
}
}

/*--*/

.grad--primary{
background-image: radial-gradient(rgba(255,255,255,0.2),rgba(36,45,61,1),rgba(36,45,61,1));
animation: couleurs 16s linear infinite;
}

.grad--primary-circle{
background-image: radial-gradient(circle,rgba(255,255,255,0.2),rgba(36,45,61,1),rgba(36,45,61,1));
animation: couleurs 16s linear infinite;
}

@keyframes couleurs {
  0%, 100% {
    background-color: rgb(132,58,207); /* Violet */
  }
  10%, 90% {
    background-color: rgb(171,107,236); /* Mauve */
  }
  20%, 80% {
    background-color: rgb(13,110,254); /* Bleu */
  }
  30%, 70% {
    background-color: rgb(88,153,249); /* Bleu clair */
  }
  40%, 60% {
    background-color: rgb(171,107,236); /* Mauve */
  }
  50% {
    background-color: rgb(132,58,207); /* Violet */
  }
}

/*--*/

.fadeIn-animation {
  animation: 2s fadeIn;
}

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

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

.fadeInUp-animation {
  animation: 1.5s fadeInUp;
}


.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

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

.animated {
	-webkit-animation-duration: 0.5s;
	animation-duration: 0.5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-timing-function: ease-in;
	animation-timing-function: ease-in;
}

.delay-item-00 {
  animation-delay: 0.25s;
}

.delay-item-01 {
  animation-delay: 0.5s;
}

.delay-item-02 {
  animation-delay: 1s;
}

.delay-item-03 {
  animation-delay: 1.5s;
}

.delay-item-04 {
  animation-delay: 2s;
}

.delay-item-05 {
  animation-delay: 2.5s;
}

.delay-item-06 {
  animation-delay: 3s;
}

.delay-item-07 {
  animation-delay: 3.5s;
}

.delay-item-08 {
  animation-delay: 4s;
}

.delay-item-09 {
  animation-delay: 4.5s;
}

.delay-item-10 {
  animation-delay: 5s;
}

.delay-item-11 {
  animation-delay: 5.5s;
}

.delay-item-12 {
  animation-delay: 6s;
}

.delay-item-13 {
  animation-delay: 6.5s;
}

.delay-item-14 {
  animation-delay: 7s;
}

.delay-item-15 {
  animation-delay: 7.5s;
}

@media only screen and (max-width: 768px) {

  /*.full-height-land{
    height: auto;
  }*/

.full-height {
    height: auto;
  }

  .headAnim {
    margin-top: -90px;
  }

  .grad--primary {
  background-image: radial-gradient(circle,rgba(255,255,255,0.2),rgba(36,45,61,1),rgba(36,45,61,1));
  animation: couleurs 16s linear infinite;
  }

  .iphoneAnim {
    height: 203px;
    margin-left: -120px;
  }

  .macbookAnim {
    height: 203px;
    margin-right: 30px;
  }

}