@font-face {
  font-family: Poppins-Regular;
  src: url('fuentes/poppins/Poppins-Regular.ttf'); 
}

@font-face {
  font-family: Poppins-Medium;
  src: url('fuentes/poppins/Poppins-Medium.ttf'); 
}

@font-face {
  font-family: Poppins-Bold;
  src: url('fuentes/poppins/Poppins-Bold.ttf'); 
}

@font-face {
  font-family: Poppins-SemiBold;
  src: url('fuentes/poppins/Poppins-SemiBold.ttf'); 
}

*{
	margin: 0px; 
	padding: 0px; 
	box-sizing: border-box;
}

body, html {
	height: 100%;
	
}


input {
	outline: none;
	border: none;
}

button {
	outline: none !important;
	border: none;
	background: transparent;
}

button:hover {
	cursor: pointer;
}

/*-- contenedor del Login--*/

.container-login {
  width: 100%;  
  min-height: 100vh;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 5%;
  /* background: -webkit-linear-gradient(to right, #00dbde, #fc00ff);
  background: linear-gradient(to right, #00dbde, #fc00ff);
  
    background-repeat: no-repeat;
    background: url(bg.jpg) no-repeat center center fixed;
    background-size: 100% 100%;
    background-size: cover; */
   
   
   

}

.wrap-login {
  width: 400px;
  background: #1d3048d3;
  border-radius: 20px;
  overflow: hidden;
  padding: 77px 55px 53px 55px;
  -webkit-box-shadow: 25px 40px 28px 0px rgba(15, 5, 5, 0.508);
 /* box-shadow: eje-x | eje-y | blur-radius | color */
}


/*----Formulario de user y password----*/

.login-form {
  width: 100%;
}

.login-form-title {
  display: block;
  font-family: Poppins-Bold;
  font-size: 40px;
  color: #333333;
  line-height: 1.5;
  text-align: center;
}

.h3100{
  
  box-shadow:0px 3px 10px #3a4c55;
  -moz-box-shadow:0px 3px 10px #3a4c55;
  -webkit-box-shadow:0px 3px 10px #3a4c55;
   border-radius:20px 20px 0px 0px; border-collapse: separate; border-spacing:
     0px 0px; text-align:left; max-width:1800px;
       padding:1.5%;
  color:#f7f7df;
  text-shadow: 1px 1px 2px rgb(2, 88, 138), 0 0 1em rgb(50, 100, 134), 0 0 0.2em rgb(16, 66, 82);
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 130%;
  font-weight: 530;
  border: #075579;
  border: 10px;
  
  background: linear-gradient(-45deg, #57ccdb, #7ba6df, #32a8b1, #1fb9d4);
    background-size: 300% 400%;
    animation: gradient 5s ease infinite;
}

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


/*------------------------------------------------------------------
[ Input ]*/
.form100{
box-shadow:
  inset 0 6em 6em rgba(0,0,0,0.1),
        0 0  0 2px rgb(255,255,255),
        0.3em 0.3em 1em rgba(0,0,0,0.3);
border-radius:0px 0px 20px 20px ; 
border-collapse: separate; 
border-spacing:0px 0px; 
text-align:left; 
max-width:1800px;
background-color:white; 
padding:2%;
margin-bottom: 2px;
margin-left: 2px;
margin-top: -6px;
margin-right: 1px;
}

.spam100 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9.5px;
  font-weight: 550;
  color: #fefff7;
  line-height: 0.8;
  box-shadow:3px 3px 7px #af8cc0;
  -moz-box-shadow:3px 3px 7px #af8cc0;
  -webkit-box-shadow:3px 3px 7px #af8cc0;
   border-radius:5px 5px 0px 0px; 

  display: block;
  width: 100%;
  height: 15px;
  background-color: rgb(161, 120, 161);
  padding:5px 1px 12px 1px;
  text-align: center;
  margin-top: 12px;
}

.spam100:hover{
  background-color: rgb(149, 118, 158);
}

.wrap-input100 {
  width: 100%;
  position: relative;
  border-bottom: 0px solid #0454ff;
  margin-bottom: 0px;
  margin-top: 0px;
  border-radius: 15px;
}

.input100 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 550;
  color: #373141;
  line-height: 1.0;
  box-shadow:3px 3px 7px #af8cc0;
  -moz-box-shadow:3px 3px 7px #af8cc0;
  -webkit-box-shadow:3px 3px 7px #af8cc0;
   border-radius:0px 0px 5px 5px; 

  display: block;
  width: 100%;
  height: 28px;
  background-color: rgb(255, 255, 255);
  
  padding-left: 5px;
}
.input100:hover{
  
  background: linear-gradient(-45deg, #ffffff, #d9eeff, #ffffff, #cdfaff);
    background-size: 300% 300%;
    animation: gradient 5s ease infinite;
}

/*---------------------------------------------*/ 
.focus-efecto {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

.focus-efecto::before {
  content: "";
  display: block;
  position: absolute;
  bottom: -0px;
  left: 0px;
  
  width: 0px;
  height: 2px; /*ancho de la linea que hace el efecto de barra de progeso en el input al hacer foco*/
  top: 28px;
  border-radius:15px;

  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;

  background: #6a7dfe;
  background: -webkit-linear-gradient(left, #7999f0, #079ecc);
  background: -o-linear-gradient(left, #7999f0, #079ecc);
  background: -moz-linear-gradient(left, #7999f0, #079ecc);
  background: linear-gradient(left, #7999f0, #079ecc);

  
}

.focus-efecto::after {
  
  font-size: 15px;
  color: #999999;
  line-height: 1.2;

  content: attr(data-placeholder);
  display: block;
  width: 100%;
  position: absolute;
  top: 16px;
  left: 0px;
  padding-left: 0px;

  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}

.input100:focus + .focus-efecto::after {
  top: -15px;
}

.input100:focus + .focus-efecto::before {
  width: 100%;
}

.has-val.input100 + .focus-efecto::after {
  top: -15px;
}

.has-val.input100 + .focus-efecto::before {
  width: 90%;
}

/*---------------------------------------------*/


/*------------------------------------------------------------------
[ Button ]*/
.container-login-form-btn {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 13px;
}

.wrap-login-form-btn {
  width: 60%;
  display: block;
  position: relative;
  z-index: 1;
  border-radius: 15px 3px;
  overflow: hidden;
  margin: 0 auto;
}

.login-form-bgbtn {
  position: absolute;
  z-index: -1;
  width: 300%;
  height: 100%;
  background: #a64bf4;
  background: -webkit-linear-gradient(right, #21d4fd, #b721ff, #21d4fd, #b721ff);
  background: -o-linear-gradient(right, #21d4fd, #b721ff, #21d4fd, #b721ff);
  background: -moz-linear-gradient(right, #21d4fd, #b721ff, #21d4fd, #b721ff);
  background: linear-gradient(right, #21d4fd, #b721ff, #21d4fd, #b721ff);
  top: 0;
  left: -100%;

  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}

.login-form-btn {
  font-family: Arial;
  font-size: 15px;
  color: #fff;
  line-height: 1.2;
  text-transform: uppercase;

  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 10px;
  width: 100%;
  height: 40px;
}

.wrap-login-form-btn:hover .login-form-bgbtn {
  left: 0;
}


/*--- Para dispositivos small responsive ---*/

@media (max-width: 576px) {
  .wrap-login {
    padding: 77px 15px 33px 15px;
  }
}


element.style2 {
  color: purple;
  font-size: 12px;
  background: #ffffff00;
}


/* anexoo de elementos  */

.logo-holder2 {
  /*  background: #f2f2f2; */
   width: 200px;
   height: 120px;
   position:absolute;
   margin: 0 auto ;
   padding-top: 0;
   padding-bottom: 24px;
   -webkit-transform: translateZ(0);
   background-position-x: left;
   margin-left: -0;
   z-index: 5;
   top:70%;
 transform: rotate(270deg); 
}

.logo-holder {
  /*  background: #f2f2f2; */
   width: 280px;
   height: 220px;
   position: absolute;
   margin: 0 auto ;
   padding-top: 12px;
   padding-bottom: 24px;
   -webkit-transform: translateZ(0);
   background-position-x: left;
   margin-left: -80px;
   z-index: 5;
   transform: rotate(50deg);
}

.bg {

 position: fixed;
 top: 9px;
 left: 8px;
 right: 8px;
 bottom: 8px;
 /* background: url(http://boutique.flarework.com/wp-content/themes/boutique/img/logo_large.png) center 0px no-repeat ; */
   background-size: contain;
/*    -webkit-filter: drop-shadow(0px 6px 25px rgba(0,0,0,0.3)); */
}

.bar {
   position: relative;
   height: 8px;
 /*   background: #6a6a6a; */
   width:  0%;
   top: 0px;
   left: 8px;
   margin-top: 8px;
    box-shadow: 0 0 3px rgba(5,5,5,0.5); 
   animation: fill 5s infinite alternate, colors 5s infinite alternate;
}

.bar.fill1 {
 animation: fill-1 5s infinite alternate, colors 5s infinite alternate;
}

.bar.fill2 {
  animation:  fill-2 5s infinite alternate, colors 5s infinite alternate;
}


.bar.fill3 {
  animation:  fill-3 5s infinite alternate, colors 5s infinite alternate;
}


.bar.fill4 {
  animation:  fill-4 5s infinite alternate, colors 5s infinite alternate;
}

.bar.fill5 {
  animation:  fill-5 5s infinite alternate, colors 5s infinite alternate;
}

.bar.fill6 {
  animation:  fill-6 5s infinite alternate, colors 5s infinite alternate;
}



@keyframes fill {
 0%   { width: 0;  height:20px;}
 33%  { width: 30px; }
 66%  { width: 10px;}
 100% { width: 85px; }
}

@keyframes fill-1 {
 0%   { width: 0; height:20px;}
 33%  { width: 50px;}
 66%  { width: 20px;}
 100% { width: 110px; }
}

@keyframes fill-2 {
 0%   { width: 0; height:20px;}
 33%  { width: 90px;}
 66%  { width: 70px;}
 100% { width: 116px; }
}

@keyframes fill-3 {
 0%   { width: 0; height:20px;}
 33%  { width: 50px;}
 66%  { width: 24px;}
 100% { width: 80px; }
}

@keyframes fill-4 {
 0%   { width: 0; height:20px;}
 33%  { width: 98px;}
 66%  { width: 34px;}
 100% { width: 77px; }
}

@keyframes fill-5 {
 0%   { width: 0; height:20px;}
 33%  { width: 30px;}
 66%  { width: 10px;}
 100% { width: 50px; }
}


@keyframes fill-6 {
 0%   { width: 0; height:20px;}
 33%  { width: 48px;}
 66%  { width: 22px;}
 100% { width: 100px; }
}

@keyframes colors {
 0% { background-color: #442B4F; opacity: 0.2;}
 50% { background-color: #BE7BDB; opacity: 0.2;}
 100% { background-color: #4FA9B2; opacity: 0.2;}
}


/* aaaaaaaaaaaaaaaaaaaaaaa */
.animation-container {
 display: block;
 position: absolute;
 width: 600px;
 max-width: 100%;
 margin: 0 auto;
 z-index: 1;
 
 .lightning-container {
   position: absolute;
   top: 50%;
   left: -200px;
   display: flex;
   transform: translateY(-100%);
   
   .lightning {
     position: absolute;
     display: block;
     height: 12px;
     width: 12px;
     border-radius: 12px;
     transform-origin: 6px 6px;

     animation-name: woosh;
     animation-duration: 1.5s;
     animation-iteration-count: infinite;
     animation-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950);
     animation-direction: alternate;
     opacity: 0.2;

     &.white {
       background-color: #B964FF;
       opacity: 0.2;
       box-shadow: 0px 50px 50px 0px transparentize(white, 0.4);
     }

     &.red {
       background-color: #BAEFF9;
       opacity: 0.2;
       box-shadow: 0px 50px 50px 0px transparentize(#fc7171, 0.4);
       animation-delay: 0.2s;
     }
   }
 }
 
 
 .boom-container {
   position: absolute;
   display: flex;
   width: 80px;
   height: 80px;
   text-align: center;
   align-items: center;
   transform: translateY(-50%);
   left: 200px;
   top: 145px;

   
   .shape {
     display: inline-block;
     position: relative;
     opacity: 0;
     transform-origin: center center;
     
     &.triangle {
       width: 0;
       height: 0;
       border-style: solid;
       transform-origin: 50% 80%;
       animation-duration: 1s;
       animation-timing-function: ease-out;
       animation-iteration-count: infinite;
       margin-left: -15px;
       border-width: 0 2.5px 5px 2.5px;
       border-color: transparent transparent #BAEFF9 transparent;
       animation-name: boom-triangle;
        opacity: 0.2;
       &.big {
         margin-left: -25px;
         border-width: 0 5px 10px 5px;
         border-color: transparent transparent #BAEFF9 transparent;
         animation-name: boom-triangle-big;
         opacity: 0.5;
       }
     }
     
     &.disc {
       width: 8px;
       height: 8px;
       border-radius: 100%;
       background-color: #d15ff4;
       animation-name: boom-disc;
       animation-duration: 1s;
       animation-timing-function: ease-out;
       animation-iteration-count: infinite;
     }
     
     &.circle {
       width: 20px;
       height: 20px;
       animation-name: boom-circle;
       animation-duration: 1s;
       animation-timing-function: ease-out;
       animation-iteration-count: infinite;
       border-radius: 100%;
       margin-left: -30px;
       
       &.white {
         border: 1px solid white;
       }
       
       &.big {
         width: 40px;
         height: 40px;
         margin-left: 0px;
         
         &.white {
           border: 2px solid white;
         }
       }
     }
     
     &:after {
       background-color: rgba(178, 215, 232, 0.2);
     }
   }
   
   .shape {
     &.triangle, &.circle, &.circle.big, &.disc {
       animation-delay: .38s;
       animation-duration: 3s;
     }
     
     &.circle {
       animation-delay: 0.6s;
     }
   }
   
   &.second {
     left: 485px;
     top: 155px;
     .shape {
       &.triangle, &.circle, &.circle.big, &.disc {
         animation-delay: 1.9s;
       }
       &.circle {
         animation-delay: 2.15s;
       }
     }
   }
 }
}

@keyframes woosh {
 0% {
   width: 12px;
   transform: translate(0px, 0px) rotate(-35deg);
 }
 15% {
   width: 50px;
 }
 30% {
   width: 12px;
   transform: translate(214px, -150px) rotate(-35deg);
 }
 30.1% {
   transform: translate(214px, -150px) rotate(46deg);
 }
 50% {
   width: 110px;
 }
 70% {
   width: 12px;
   transform: translate(500px, 150px) rotate(46deg);
 }
 70.1% {
   transform: translate(500px, 150px) rotate(-37deg);
 }
 
 85% {
   width: 50px;
 }
 100% {
   width: 12px;
   transform: translate(700px, 0) rotate(-37deg);
 }
}

@keyframes boom-circle {
 0% {
   opacity: 0;
 }
 5% {
   opacity: 1;
 }
 30% {
   opacity: 0;
   transform: scale(3);
 }
 100% {
 }
}

@keyframes boom-triangle-big {
 0% {
   opacity: 0;
 }
 5% {
   opacity: 1;
 }
 
 40% {
   opacity: 0;
   transform: scale(2.5) translate(50px, -50px) rotate(360deg);
 }
 100% {
 }
}

@keyframes boom-triangle {
 0% {
   opacity: 0;
 }
 5% {
   opacity: 1;
 }
 
 30% {
   opacity: 0;
   transform: scale(3) translate(20px, 40px) rotate(360deg);
 }
 
 100% {
 }
}

@keyframes boom-disc {
 0% {
   opacity: 0;
 }
 5% {
   opacity: 1;
 }
 40% {
   opacity: 0;
   transform: scale(2) translate(-70px, -30px);
 }
 100% {
   
 }
}


.footer {
 color: white;
 font-size: 10px;
 position: fixed;
 bottom: 0;
 font-weight: 200;
 padding: 10px 20px;
 
 a {
   &,
   &:hover,
   &:focus,
   &:visited {
     color: #c6c6c6;
   }
 }
}



/*  img animate */

img {
 animation: zoom 5s infinite;
}

@keyframes zoom {
 0% {
   transform: scale(1);
 }
 50% {
   transform: scale(1.1);
 }
 100% {
   transform: scale(1);
 }
}





  /*  img animate */

  .logo {
    animation: zoom 5s infinite;
  }

  
  @keyframes zoom {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
  }
  
  .rebote img{
   
    width:50%;
    margin-left: 30%;
    margin-top: 10%;
    position: absolute;
    z-index: 9999;
    -webkit-animation-name: rebote; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
    -webkit-animation-direction: reverse; /* Chrome, Safari, Opera */
    animation-name: rebote;
    animation-duration: 7s;
    animation-iteration-count: infinite;
    animation-direction: reverse;
    animation-timing-function: ease-out;
  }
  .rebote span{
    
    background-color: #2F2B2B;
    display: block;
    margin-top: -4px;
    height: 15px;
    width: 200px;
  }
  /* Standard syntax */
  @keyframes rebote {
    0%   {left:0px; top:0px;    width: 50%}
    20%  {left:0px; top: -5px; width: 55%;}
    40%  {left:10px; top:-10px; width: 56%;}
    60%  {left:10px; top:-10px; width: 58%;}
    80% {left:0px; top: -5px;  width: 55%}
    100% {left:0px; top:0px;    width: 50%;}
  }