@charset "UTF-8";

/*!
 * animate.css -https://daneden.github.io/animate.css/
 * Version - 3.7.2
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2019 Daniel Eden
 */


@-webkit-keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

@keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

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


@keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

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






@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

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

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

@-webkit-keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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


/*
@-webkit-keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}


@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}



.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}
*/


@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

}



@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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



/*
@-webkit-keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}


@keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

*/



@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}


@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

@-webkit-keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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








.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.animated.delay-2s {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.animated.delay-3s {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

.animated.delay-4s {
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}

.animated.delay-5s {
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}

.animated.fast {
  -webkit-animation-duration: 800ms;
  animation-duration: 800ms;
}

.animated.faster {
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms;
}

.animated.slow {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.slower {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
}

/*********************************************************************************/
/* BORDE ANIM                                                                    */
/*********************************************************************************/

.border {
position: relative;
display: inline-block;
padding: 10px 20px;
border: 2px solid #FFF;
/*text-transform: uppercase;*/
color: #FFF;
text-decoration: none !important;
/*font-weight: 600;*/
font-size: 16px;
font-family: Orbitron !important;

}

.border:before {

content: '';
position: absolute;
top: 6px;
left: -2px;
width: calc(100% + 4px);
height: calc(100% - 12px);
background: black;
transition: 0.5s ease-in-out;
transform: scaleY(0);
transition-delay: 0.5s;
}

.border:hover:before
{
transform: scaleY(1);
}

.border:after {

content: '';
position: absolute;
left: 6px;
top: -2px;
height: calc(100% + 4px);
width: calc(100% - 12px);
background: black;
transition: 0.5s ease-in-out;
transform: scaleX(0);
}

.border:hover:after
{
transform: scaleX(1);

color: #255784;
background: #2196f3;
box-shadow: 0 0 10px #2196f3, 0 0 40px #2196f3, 0 0 80px #2196f3;
transition-delay: 1s;

}

.border .border-lines {
position: relative;
z-index: 3;
}

.border-lines:before {
content: '';
position: absolute;
left: -40px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 2px;
background: white;
box-shadow: 5px -8px 0 #FFF,
            5px 8px 0 #FFF;
}


.border-lines:after {
content: '';
position: absolute;
right: -40px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 2px;
background: white;
box-shadow: -5px 8px 0 #FFF,
            -5px -8px 0 #FFF;
}


.border-lines:hover:before,
.border-lines:hover:after

 { content: ''; height: 0; transition: .5s; }

/*********************************************************************************/
/* BORDE ANIM NIGHT                                                              */
/*********************************************************************************/

.border.night {
position: relative;
display: inline-block;
padding: 10px 20px;
border: 2px solid #000;
text-transform: uppercase;
color: #000;
text-decoration: none !important;
/*Modificar estilos letra en .bot.night span*/
}

.border.night:before {

content: '';
position: absolute;
top: 6px;
left: -2px;
width: calc(100% + 4px);
height: calc(100% - 12px);
background: white;
transition: 0.5s ease-in-out;
transform: scaleY(0);
transition-delay: 0.5s;
}

.border.night:hover:before
{
transform: scaleY(1);
}

.border.night:after {

content: '';
position: absolute;
left: 6px;
top: -2px;
height: calc(100% + 4px);
width: calc(100% - 12px);
background: white;
transition: 0.5s ease-in-out;
transform: scaleX(0);
}

.border.night:hover:after
{
transform: scaleX(1);

color: #fff;
background: #fff;
box-shadow: 0 0 10px #fff, 0 0 40px #fff, 0 0 80px #fff;
transition-delay: 1s;
}

.border.night .border-lines {
position: relative;
z-index: 3;
}

/*********************************************************************************/
/* SVG TWITTER                                                                   */
/*********************************************************************************/

.twitter {
  transform: scale(5, 5);
  color: #05005e;
margin-top: 25px;
}
.twitter #svg_5 {
  opacity: 0;
}
.twitter:hover #svg_4 {
  animation: fly 100ms linear 0s infinite forwards;
}
@-webkit-keyframes fly {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes fly {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-ms-keyframes fly {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fly {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.twitter:hover #svg_5 {
  animation: fly 100ms linear 0s infinite forwards;
}
@-webkit-keyframes fly {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes fly {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-ms-keyframes fly {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fly {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


/*********************************************************************************/
/* BOTON .BOT y NEON                                                             */
/*********************************************************************************/

.neon.night {
display: none;
}

.bot {
display: none;
}

.bot.night {
display: inline-block;
position: relative;
width: 160px;
height: 60px;

transform-style: preserve-3d;
transform: perspective(500px) rotateY(25deg);
transition: 2s;
}

.bot.night:hover {
transform: perspective(500px) rotateY(385deg);
}

.bot.night span {

position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
color: #333;
box-sizing: border-box;
background: #fff;
font-family: Orbitron;
font-size: 14px;
}

.bot.night span:nth-child(1) {
transform: translateZ(20px);
border-left: 6px solid #e5e5e5;
border-right: 6px solid #e5e5e5;
}

.bot.night span:nth-child(4) {
transform: translateZ(-20px);
border-left: 6px solid #e5e5e5;
border-right: 6px solid #e5e5e5;
}

.bot.night span:nth-child(2), 
.bot.night span:nth-child(3)
{
width: 40px;
height: 100%;
background: #b2b2b2;
} 

.bot.night span:nth-child(2)

{
transform: rotateY(90deg) translateZ(140px);
}
 
.bot.night span:nth-child(3)
{
transform: rotateY(90deg) translateZ(-20px);
}


/*loader VIDEOS*/
#preloader{
   position: fixed;

display: flex;

    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

background: #000;
background-size: cover;
background-position: fixed;

z-index: 9999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999 !important;
}

#loader {
    width: 100px;
    height: 100px;
    position: absolute;

display: flex;


    left: 50%;
    top: 40%;
    margin: -50px 0 0 -50px;
    background: url(../images/loader.gif)no-repeat center 0;

background-size: cover;
background-position: fixed;



}

#loader:before {
content:'Cargando...';
font-family: Orbitron;
font-size: 1.5em;
color: white;
text-align: center;
position: absolute;
top: 130px;
left: 50%;
      -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);


}


#loader:after {
content:'';
font-family: Roboto Slab;
font-size: 1.2em;
color: white;
text-align: center;
position: absolute;
top: 50px;
left: 50%;
      -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

background: #000 url(../images/avatar.png)no-repeat center 0;
background-size: cover;
width: 50px;
height: 50px;
}


/*********************************************************************************/
/* SOL ANIMACION SPIN                                                            */
/*********************************************************************************/


@-webkit-keyframes spinAround {
	from {
		-webkit-transform: rotate(0deg)
	}
	to {
		-webkit-transform: rotate(360deg);
	}
}
@-moz-keyframes spinAround {
	from {
		-moz-transform: rotate(0deg)
	}
	to {
		-moz-transform: rotate(360deg);
	}
}
@keyframes spinAround {
	from {
		transform: rotate(0deg)
	}
	to {
		transform: rotate(360deg);
	}
}









/*********************************************************************************/
/* BORDE ANIM                                                                    */
/*********************************************************************************/

.borderQR {
position: relative;
display: inline-block;
padding: 10px 20px;
border: 2px solid #FFF;
/*text-transform: uppercase;*/
color: #FFF;
text-decoration: none !important;
/*font-weight: 600;*/
font-size: 16px;
font-family: Orbitron !important;
}


.borderQR.night { border: 2px solid transparent; }


.borderQR:before {

content: '';
position: absolute;
top: 6px;
left: -2px;
width: calc(100% + 4px);
height: calc(100% - 12px);
background: black;
transition: 0.5s ease-in-out;
transform: scaleY(1);
/*transform: scaleY(0);*/
transition-delay: 0.5s;
}

.borderQR:hover:before
{
transform: scaleY(1);
}

.borderQR:after {

content: '';
position: absolute;
left: 6px;
top: -2px;
height: calc(100% + 4px);
width: calc(100% - 12px);
background: black;
transition: 0.5s ease-in-out;

/*transform: scaleX(0);*/

transform: scaleX(1);

color: #255784;
background: #2196f3;
box-shadow: 0 0 10px #2196f3, 0 0 40px #2196f3, 0 0 80px #2196f3;

}

.borderQR:hover:after
{
transform: scaleX(1);

color: #255784;
background: #2196f3;
box-shadow: 0 0 10px #2196f3, 0 0 40px #2196f3, 0 0 80px #2196f3;
transition-delay: 1s;

}

.borderQR .border-linesQR {
position: relative;
z-index: 3;
}

.border-linesQR:before {
content: '';
position: absolute;
left: -40px;
top: 50%;
transform: translateY(-50%);
width: 20px;
/*height: 2px;*/
height: 0;
background: white;
box-shadow: 5px -8px 0 #FFF,
            5px 8px 0 #FFF;
}


.border-linesQR:after {
content: '';
position: absolute;
right: -40px;
top: 50%;
transform: translateY(-50%);
width: 20px;
/*height: 2px;*/
height: 0;
background: white;
box-shadow: -5px 8px 0 #FFF,
            -5px -8px 0 #FFF;
}


.border-linesQR:hover:before,
.border-linesQR:hover:after

 { content: ''; height: 0; transition: .5s; }