@keyframes movimientoLogo
{
	from, 0% {transform:rotateZ(0deg);}
	15%	{transform:rotateZ(-30deg);}
	25%	{transform:rotateZ(30deg);}
	50% {transform:rotateZ(0deg);}
    100%, to {transform:rotateZ(0deg);}
}
#logo {
	-webkit-animation-duration:3s;
    animation-duration:3s;
    -webkit-animation-delay:1s;
    animation-delay:1s;
	-webkit-animation-name:movimientoLogo;
    animation-name:movimientoLogo;
	-webkit-transform-style:preserve-3d;
    transform-style:preserve-3d;
	-webkit-animation-timing-function:ease-in;
    animation-timing-function:ease-in;
	-webkit-animation-iteration-count:infinite;
    animation-iteration-count:infinite;
}
@keyframes animTitulores
{
	from,{text-shadow: 1px 1px 20px silver;}
    50% {text-shadow: 1px 1px 20px aqua;}
	to{text-shadow: 1px 1px 20px silver;}
}

@keyframes tituloAnim1 {
  0%{
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  5%{
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
  }
  10%{
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
  }
  15%{
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
  }
  20%{
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
  }
  25%{
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
  }
  30%{
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
  }
  35%{
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
  }
  40%{
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
  }
  45%{
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
  }
  50%{
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes tituloAnim2 {
  0%{
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  30%{
    -webkit-transform: scaleX(1.25) scaleY(0.75);
    -ms-transform: scaleX(1.25) scaleY(0.75);
    transform: scaleX(1.25) scaleY(0.75);
  }
  40%{
    -webkit-transform: scaleX(0.75) scaleY(1.25);
    -ms-transform: scaleX(0.75) scaleY(1.25);
    transform: scaleX(0.75) scaleY(1.25);
  }
  60%{
    -webkit-transform: scaleX(1.15) scaleY(0.85);
    -ms-transform: scaleX(1.15) scaleY(0.85);
    transform: scaleX(1.15) scaleY(0.85);
  }
  100%{
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

#cajatitulo{
    -webkit-animation-name: tituloAnim1, tituloAnim2;
    animation-name: tituloAnim1, tituloAnim2;
    -webkit-animation-duration: 2s, 2s;
    animation-duration: 2s, 2s;
    -webkit-animation-timing-function: linear, linear;
    animation-timing-function: linear, linear;
    -webkit-animation-delay: 1s, 5s;
    animation-delay: 1s, 5s;
    -webkit-animation-iteration-count: 1, 2;
    animation-iteration-count: 1, 2;
    -webkit-animation-direction: normal, normal;
    animation-direction: normal, normal;
}

@keyframes tituloHover 
{
	from {color:white}
	to{text-shadow: 1px 1px 0.2rem #00F}
}

#titulo:hover, #titulo2:hover{
    -webkit-animation-name:tituloHover;
    animation-name:tituloHover;
	-webkit-animation-duration:1s;
    animation-duration:1s;
    -webkit-animation-delay:0s;
    animation-delay:0s;
	-webkit-transform-style:preserve-3d;
    transform-style:preserve-3d;
	-webkit-animation-timing-function:linear;
    animation-timing-function:linear;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@keyframes animlink 
{
	from {font-size:1rem}
	to{font-size:1.2rem}
}

.nav.link{
    font-family: 'Titillium Web', sans-serif;
}
.nav-link:hover{
    -webkit-animation-name:animlink;
    animation-name:animlink;
	-webkit-animation-duration:0.1s;
    animation-duration:0.1s;
    -webkit-animation-delay:0s;
    animation-delay:0s;
	-webkit-transform-style:preserve-3d;
    transform-style:preserve-3d;
	-webkit-animation-timing-function:linear;
    animation-timing-function:linear;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    font-weight:bold;
}
.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
  -webkit-animation-delay:1s;
  animation-delay:1s;
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }

  @-webkit-keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  0% {
  opacity: 0;
  -webkit-transform: scale3d(.3, .3, .3);
  transform: scale3d(.3, .3, .3);
  }
  20% {
  -webkit-transform: scale3d(1.1, 1.1, 1.1);
  transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
  -webkit-transform: scale3d(.9, .9, .9);
  transform: scale3d(.9, .9, .9);
  }
  60% {
  opacity: 1;
  -webkit-transform: scale3d(1.03, 1.03, 1.03);
  transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
  -webkit-transform: scale3d(.97, .97, .97);
  transform: scale3d(.97, .97, .97);
  }
  100% {
  opacity: 1;
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  }
  @keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  0% {
  opacity: 0;
  -webkit-transform: scale3d(.3, .3, .3);
  transform: scale3d(.3, .3, .3);
  }
  20% {
  -webkit-transform: scale3d(1.1, 1.1, 1.1);
  transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
  -webkit-transform: scale3d(.9, .9, .9);
  transform: scale3d(.9, .9, .9);
  }
  60% {
  opacity: 1;
  -webkit-transform: scale3d(1.03, 1.03, 1.03);
  transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
  -webkit-transform: scale3d(.97, .97, .97);
  transform: scale3d(.97, .97, .97);
  }
  100% {
  opacity: 1;
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  } 
@-webkit-keyframes shadow {
  0% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
  100% {
    -webkit-transform: translateZ(50px);
            transform: translateZ(50px);
    -webkit-box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
            box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
    size
  }
}
@keyframes shadow {
  0% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
  100% {
    -webkit-transform: translateZ(50px);
            transform: translateZ(50px);
    -webkit-box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
            box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
  }
}
.sombra:hover {
	-webkit-animation: shadow 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: shadow 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}