@font-face{

  font-family: "Garet-Book";
  src: url(fontsInfinita/garet/garet-book.ttf);
}
@font-face{
  font-family: "Garet-Heavy";
  src: url(fontsInfinita/garet/Garet-Heavy.ttf);
}
body {
  background-color: #d19b9b;
font-family: "Garet-Book";
  color: white;
}

#container {
  overflow:hidden; 
display: grid;
grid-template-columns: repeat(2, 40vw);
grid-template-rows: auto;
 margin-left: 10vw;
margin-top: 10vh;
}

#cerebro{
  margin-top: 10vh;
}
#presentacion{
grid-area: 1/1/1/2;
}

#hablamos{
grid-area: 1/2/2/2;
}


#nombre{
  font-size: 2em;
  animation-name: nombre;
  animation-delay: 500ms;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  font-family: "Garet-Heavy";
}
#psicologa{
  animation-name: nombre;
  animation-delay: 1s;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  font-size: 1.4em;
}
#idioma{
  font-family: "Garet-Heavy";
  font-size: 1.4em;
  animation-name: nombre;
  animation-delay: 1500ms;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}
.datos{
  font-family: Garet-Heavy;
  font-size: 1.4em;
  text-align: left;
  opacity: 0;
  animation-name: nombre;
  animation-delay: 2s;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}
.loc{
  font-size: 1.2em;
  text-align: left;
  opacity: 0;
  animation-name:nombre;
  animation-delay: 2.5s;
  animation-fill-mode: forwards;
}

#texto1{
  font-size: 1.3em;
  opacity: 0;
  animation-name: nombre;
  animation-delay: 3s;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}
#lema{
  opacity: 0;
  font-size: 1em;
  font-family: "Garet-Book";
  font-weight: bold;
  animation-name: nombre;
  animation-delay: 2s;
  animation-duration: 6s;
  animation-fill-mode: forwards;
}
#hablamos{
  font-family: "Garet-Heavy";
  font-size: 1.4em;
}

#mesa{
  opacity: 0;
  animation-name: nombre;
  animation-delay: 1s;
  animation-duration: 6s;
  animation-fill-mode: forwards;
  margin-bottom: 2vh;
}

#sobremi p{
  font-size: 1.2em;
  margin-left: 5vw;
  margin-right: 5vw;
  margin-bottom: 5vh;
}

#sobremi{
  grid-area: 2/1/2/2;
transition-duration: 3s;}

#formacion{
  grid-area: 2/2/2/3;
  margin-bottom: 10vh;
  font-size: 1em;
}

#imagen3{
  grid-area: 3/2/3/3;
  margin-top: 5vh;
  transition-duration: 3s;
}
#orientacion{
  grid-area: 3/1/3/2;
}

  #orientacion p{
    font-size: 1em;
  }

  #desp-desr{
    grid-area: 4/2/4/3;
  }

  #desp-desr p{
    font-size: 1em;
  }
  #imagen4{
    grid-area: 4/1/4/2;
    margin-top: 5vh;
    transition-duration: 3s;
  }

  .video{
    grid-area: 5/1/5/2;
  }
#pajaros{
grid-area: 1/1/2/1;}

.Copyright{
  color: black;
font-style: italic;}

.bird {
  grid-area: 1/1/1/2;
  background-image: url("Consulta.img/bird-cells-new.svg");
  background-size: auto 100%;
  width: 88px;
  height: 125px;
  will-change: background-position;
  animation-name: fly-cycle;
  animation-timing-function: steps(10);
  animation-iteration-count: infinite;
}
.bird--one {
  animation-duration: 1s;
  animation-delay: 0.5s;
}
.bird--two {
  animation-duration: 0.9s;
  animation-delay: 1.75s;
}
.bird--three {
  animation-duration: 1.25s;
  animation-delay: -5.25s;
}
.bird--four {
  animation-duration: 1.1s;
  animation-delay: -5.5s;
}

.bird-container {
  margin-left: -25vw;
  transform: scale(0) translateX(-10vw);
  will-change: transform;
  animation-name: fly-right-two;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.bird-container--one {
  animation-duration: 16s;
  animation-delay: .5s;
}
.bird-container--two {
  animation-duration: 16s;
  animation-delay: 2s;
}
.bird-container--three {
  animation-duration: 14.6s;
  animation-delay: 9.5s;
}
.bird-container--four {
  animation-duration: 16s;
  animation-delay: 13.25s;
}

@keyframes fly-cycle {
  100% {
    background-position: -900px 0;
  }
}

@keyframes fly-right-one {
  0% {
    transform: scale(0.3) translateX(-10vw);
  }

  10% {
    transform: translateY(2vh) translateX(20vw) scale(0.4);
  }

  20% {
    transform: translateY(5vh) translateX(40vw) scale(0.5);
  }

  30% {
    transform: translateY(4vh) translateX(50vw) scale(0.6);
  }

  40% {
    transform: translateY(2vh) translateX(60vw) scale(0.6);
  }

  50% {
    transform: translateY(10vh) translateX(60vw) scale(0.6);
  }

  60% {
    transform: translateY(-10vh) translateX(60vw) scale(0.6);
  }

  100% {
    transform: translateY(0vh) translateX(60vw) scale(0.6);
  }
}

@keyframes fly-right-two {
  0% {
    transform: translateY(-8vh) translateX(-20vw) scale(0.5);
  }

  10% {
    transform: translateY(12vh) translateX(10vw) scale(0.4);
  }

  30% {
    transform: translateY(14vh) translateX(25vw) scale(0.6);
  }

  40% {
    transform: translateY(15vh) translateX(30vw) scale(0.45);
  }

  60% {
    transform: translateY(20vh) translateX(35vw) scale(0.5);
  }

  70% {
    transform: translateY(25vh) translateX(60vw) scale(0.45);
  }

  90% {
    transform: translateY(20vh) translateX(80vw) scale(0.45);
  }

  100% {
    transform: translateY(0vh) translateX(100vw) scale(0.45);
  }
}
@keyframes fondos {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.8;
  }
}
@keyframes nombre {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}