.Login{
  max-width: 400px;
  padding: 15px;
  margin: auto auto;
  -webkit-animation: flip-in-ver-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: flip-in-ver-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.Login .PanelLogin{
  background:rgb(92 48 36 / 57%);
  color: #fff;
  padding: 10px;
  border:none !important;
  box-shadow: 0 7px 16px #a18b8b, 0 4px 5px #d5b2b1;
  min-width: 20%;
  margin: auto auto;
}
.PanelLogin label{
  color:#fff !important;
}
.PanelLogin .bar:before,.PanelLogin .bar:after{
  background-color:#fff !important;
}
.PanelLogin .Titulo{
  color: #fff !important;
  font-family: 'Montserrat','Cabin Sketch','Lemonada','Sonsie One' !important;
}
.PanelLogin .Titulo2{
  color: #fff !important;
  font-family: 'Montserrat','Cabin Sketch','Lemonada','Sonsie One' !important;
  font-size: 25px;
}
.PanelLogin .TituloError{
  color: #f88888  !important;
  font-family: 'Montserrat','Cabin Sketch','Lemonada','Sonsie One' !important;
  font-size: 20px;
}
.PanelLogin .Titulo .letra1{
font-size: 70px;

}
.mensaje_error{
  color: red;
  background: #250f0f8a;
}
.info-login{
  margin-top: 50px;
}
.info-login a{
  font-family: 'Montserrat','Sonsie One';
  font-size: 15px;
  color: #fff !important;
  font-weight: 200;
  text-decoration: none;
  margin: 5px;
}
.form-group{
  margin-bottom: 20px !important;
  font-family: 'Cabin Sketch','Sonsie One' !important;
}

.form-animate-text .form-text,.form-animate-text .form-text:focus {
  width: 100%;
  border: none !important;
  border-bottom: 1px solid #ddd !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  -ms-box-shadow: none !important;
  -o-box-shadow: none !important;
  box-shadow: none !important;
  -webkit-border-radius: 0px !important;
  -moz-border-radius: 0px !important;
  -ms-border-radius: 0px !important;
  -o-border-radius: 0px !important;
  border-radius: 0px !important;
  padding: 10px;
}
.form-group.form-animate-text {
  position: relative;
  margin-bottom: 45px;
}
.form-animate-text .form-text {
  font-size: 21px;
  padding: 10px 10px 10px 5px;
  display: block;
  width: 100%;
  border: none;
  background:none;
  border-bottom: 1px solid #757575;
  color: #fff;
}
.form-group.form-animate-text .form-text:focus {
  outline: none;
}
.form-group.form-animate-text label {
  color: #999;
  font-size: 24px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  -webkit-transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -ms-transition: 0.2s ease all;
  -o-transition: 0.2s ease all;
  transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -ms-transition: 0.2s ease all;
  -o-transition: 0.2s ease all;
  transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -ms-transition: 0.2s ease all;
  -o-transition: 0.2s ease all;
  transition: 0.2s ease all;
}
.form-group.form-animate-text .form-text:focus ~ label,
.form-text:valid ~ label {
  top: -25px;
  color: #999C9E;
}

.form-group.form-animate-text .bar {
  position: relative;
  display: block;
  width: 100%;
}
.form-group.form-animate-text .bar:before,
.bar:after {
  content: '';
  height: 2px;
  width: 0;
  bottom: 1px;
  position: absolute;
  background: #5264AE;
  -webkit-transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -ms-transition: 0.2s ease all;
  -o-transition: 0.2s ease all;
  transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -ms-transition: 0.2s ease all;
  -o-transition: 0.2s ease all;
  transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -ms-transition: 0.2s ease all;
  -o-transition: 0.2s ease all;
  transition: 0.2s ease all;
}

.form-group.form-animate-text .bar:before {
  left: 50%;
}

.form-group.form-animate-text .bar:after {
  right: 50%;
}

.form-group.form-animate-text .form-text:focus ~ .bar:before,
.form-text:focus ~ .bar:after {
  width: 50%;
}

.form-group.form-animate-text .form-text:focus ~ .highlight {
  -webkit-animation: inputHighlighter 0.3s ease;
  -moz-animation: inputHighlighter 0.3s ease;
  -ms-animation: inputHighlighter 0.3s ease;
  -o-animation: inputHighlighter 0.3s ease;
  animation: inputHighlighter 0.3s ease;
  -webkit-animation: inputHighlighter 0.3s ease;
  -moz-animation: inputHighlighter 0.3s ease;
  -ms-animation: inputHighlighter 0.3s ease;
  -o-animation: inputHighlighter 0.3s ease;
  animation: inputHighlighter 0.3s ease;
  -webkit-animation: inputHighlighter 0.3s ease;
  -moz-animation: inputHighlighter 0.3s ease;
  -ms-animation: inputHighlighter 0.3s ease;
  -o-animation: inputHighlighter 0.3s ease;
  animation: inputHighlighter 0.3s ease;
}








.PanelLogin .btn-login {
  width: 100%;
  border-radius: 15px !important;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 5px;
  font-size: 15px;
  padding-bottom: 5px;
  background-color: #d90d0d73;
  color: #fffffd;
  border: 1px solid #c8c3c285;
  font-family: 'Sonsie One';
  cursor: pointer;
}

.PanelLogin .btn-login:hover {
  transition: 1s;
  animation: shady 4s linear infinite;
}
.PanelLogin .btn-login:focus {
  outline: none;
}

@keyframes shady {
  0% {box-shadow: 0 0 0 0px rgba(255,255,255,0.5), 0 0 0 0px rgba(3, 108, 129, 0.5);}
  20% {box-shadow: 0 0 0 100px rgba(255,255,255,0), 0 0 0 0px rgba(3, 108, 129, 0);}
  20.1% {box-shadow: 0 0 0 0px rgba(255,255,255,0.5), 0 0 0 0px rgba(3, 108, 129, 0.5);}
  50% {box-shadow: 0 0 0 0px rgba(255,255,255,0.5), 0 0 0 0px rgba(3, 108, 129, 0.5);}
  70% {box-shadow: 0 0 0 100px rgba(255,255,255,0), 0 0 0 0px rgba(3, 108, 129, 0);}
  70.1% {box-shadow: 0 0 0 0px rgba(255,255,255,0.5), 0 0 0 0px rgba(3, 108, 129, 0.5);}
  100% {box-shadow: 0 0 0 0px rgba(255,255,255,0.5), 0 0 0 0px rgba(3, 108, 129, 0.5);}
}

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus
input:-webkit-autofill {
  border: 1px solid green;
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0px 1000px #000 inset;
  transition: background-color 5000s ease-in-out 0s;
}
/* ----------------------------------------------
 * Generated by Animista on 2018-9-26 22:8:50
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation flip-in-ver-right
 * ----------------------------------------
 */
@-webkit-keyframes flip-in-ver-right {
  0% {
    -webkit-transform: rotateY(-80deg);
            transform: rotateY(-80deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
    opacity: 1;
  }
}
@keyframes flip-in-ver-right {
  0% {
    -webkit-transform: rotateY(-80deg);
            transform: rotateY(-80deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
    opacity: 1;
  }
}