/*@baseBG:#00a093;
@baseBG:#37adea;*/
/*@baseBG:#930000;*/
/*@baseBG:#4fd100;*/
/*#e6e6e6;*/
/*@hiliteBG:fade(white,90%);*/
/*@BGRibbon:fadeout(@baseBG,60%);*/
/*@WindowBG:black;*/
/*@GroupBG:@TitleBarBG;*/
/*@GroupFG:contrast(@GroupBG);*/
@font-face {
  font-family: 'font name';
  src: url('/content/file.eot');
  src: local('☺'), url('/content/file.woff') format('woff'), url('/content/file.ttf') format('truetype');
}
@font-face {
  font-family: 'marker';
  src: url('../fonts/PermanentMarker.woff');
}
@keyframes sway {
  0% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(-10deg);
  }
}
@keyframes clouda {
  0% {
    transform: translate(0px, 0);
  }
  100% {
    transform: translate(-200px, 0);
  }
}
@keyframes cloudb {
  0% {
    transform: translate(0px, 0);
  }
  100% {
    transform: translate(-120px, 0);
  }
}
@keyframes comet {
  0% {
    transform: translate(25px, 0px);
    opacity: 1;
  }
  10% {
    transform: translate(-100px, 12px);
    opacity: 0;
  }
  100% {
    transform: translate(-100px, 12px);
    opacity: 0;
  }
}
@keyframes star {
  0% {
    opacity: 0.5;
  }
  10% {
    opacity: 1;
  }
  20% {
    opacity: 0.5;
  }
  100% {
    opacity: 0.5;
  }
}
@keyframes skew {
  0% {
    transform: skew(0deg, 0deg);
  }
  50% {
    transform: skew(-8deg, 0deg);
  }
  100% {
    transform: skew(0deg, 0deg);
  }
}
html {
  font-size: 10px;
  background-color: #510019;
}
body {
  font-size: 1.3rem;
  margin: 0;
  padding: 0;
  font-family: Tahoma;
  overflow: hidden;
}
html,
body,
form {
  height: 100%;
  overflow: hidden;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/*a:focus {
	outline: none !important;
}

a:hover {
    text-decoration: none;
}*/
/*---------------------------------------------*/
/*input {
    outline: none;
    border: none;
}

textarea {
    outline: none;
    border: none;
}

textarea:focus, input:focus {
    border-color: transparent !important;
}

input:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus:-moz-placeholder {
    color: transparent;
}

input:focus::-moz-placeholder {
    color: transparent;
}

input:focus:-ms-input-placeholder {
    color: transparent;
}

textarea:focus::-webkit-input-placeholder {
    color: transparent;
}

textarea:focus:-moz-placeholder {
    color: transparent;
}

textarea:focus::-moz-placeholder {
    color: transparent;
}

textarea:focus:-ms-input-placeholder {
    color: transparent;
}

input::-webkit-input-placeholder {
    color: #adadad;
}

input:-moz-placeholder {
    color: #adadad;
}

input::-moz-placeholder {
    color: #adadad;
}

input:-ms-input-placeholder {
    color: #adadad;
}

textarea::-webkit-input-placeholder {
    color: #adadad;
}

textarea:-moz-placeholder {
    color: #adadad;
}

textarea::-moz-placeholder {
    color: #adadad;
}

textarea:-ms-input-placeholder {
    color: #adadad;
}*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  transition: background-color 5000s;
  -webkit-text-fill-color: #fff !important;
}
/*---------------------------------------------*/
/*button {
	outline: none !important;
	border: none;
	background: transparent;
}

button:hover {
	cursor: pointer;
}*/
.backg {
  height: 100%;
}
.xt-media-sm-up .xt-login .backg {
  transition: transform ease-in-out 2s;
  transform: scale(1.8);
  transform-origin: 85% 100%;
}
.backg .ct-bg-cont {
  height: 54vw;
  opacity: 1;
  transition: opacity linear 4s;
  overflow: hidden;
  /*position: absolute;
        width: 100%;*/
}
.xt-loading .backg .ct-bg-cont {
  opacity: 0;
}
.xt-media-xs .backg .ct-bg-cont {
  transform: scale(1.8);
  transform-origin: top right;
}
.xt-login .backg .ct-bg-cont {
  /*transition: transform linear 1s;
        transform: translate(0, -100%);*/
  /*.xt-media-sm-up & {
                transition: all linear 1.5s;
                position: absolute;
                bottom: 0;
                right: 0;
                width: 100%;
            }*/
}
.xt-media-xs .xt-login .backg .ct-bg-cont {
  transition: transform linear 1.5s;
  transform: scale(1);
}
.backg .ct-bg-cont svg .ct-weed {
  animation: sway 4s ease-in-out infinite;
}
.backg .ct-bg-cont svg [id^=clouda] {
  animation: clouda 45s linear infinite;
}
.backg .ct-bg-cont svg [id^=cloudb] {
  animation: cloudb 60s linear infinite;
}
.backg .ct-bg-cont svg #clouda1 {
  animation-delay: -10s;
}
.backg .ct-bg-cont svg #clouda3 {
  animation-delay: -25s;
}
.backg .ct-bg-cont svg #clouda5 {
  animation-delay: -40s;
}
.backg .ct-bg-cont svg #cloudb2 {
  animation-delay: -20s;
}
.backg .ct-bg-cont svg #cloudb4 {
  animation-delay: -40s;
}
.backg .ct-bg-cont svg #cloudb6 {
  animation-delay: -60s;
}
.backg .ct-bg-cont svg #comet1 {
  animation: comet 8s linear infinite;
  animation-delay: -2s;
}
.backg .ct-bg-cont svg .ct-star {
  animation: star 4s ease-in-out infinite;
}
.backg .ct-bg-cont svg #man1 {
  /*animation: skew 10s ease-in-out infinite;*/
  animation: skew 4s ease-in-out infinite;
}
.backg .ct-bg-cont svg #message1 {
  cursor: pointer;
  user-select: none;
  opacity: 0;
  opacity: 1;
}
.backg .ct-bg-cont svg #message1:hover path {
  fill: white !important;
  transition: all linear 0.5s;
}
.backg .ct-bg-cont svg #message1:hover tspan {
  /*fill: #510019;*/
}
.xt-login .backg .ct-bg-cont svg #message1 {
  transition: opacity linear 1s;
  transition-delay: 1s;
  opacity: 0;
}
#EnvLogo {
  display: none;
  background-image: url(../images/envlogo.png);
  position: absolute;
  top: 10vh;
  right: 10vw;
  background-size: contain;
  width: 24vw;
  height: 13vw;
  background-repeat: no-repeat;
  filter: drop-shadow(0px 0px 0.8rem #000000);
  opacity: 0;
  transition: all ease-in-out 1.5s;
  transform: translate(0, -2rem);
  transition-delay: 2.5s;
}
.xt-login #EnvLogo {
  opacity: 1;
  transform: translate(0, 0);
}
#EnvLogo img,
#EnvLogo #EnvTitle1,
#EnvLogo #EnvTitle2 {
  display: none;
}
.loginbox {
  position: absolute;
  top: 10vh;
  left: 10vw;
  background-color: #445a64;
  background: linear-gradient(165deg, #445a64 0%, #445a64 49%, #36464e 49%, #36464e 100%);
  display: block;
  padding: 3rem;
  padding-top: 1rem;
  border-radius: 2rem;
  border-width: 2rem 3rem;
  /*box-shadow: 0 0 20px 0px #000000c7;*/
  color: white;
  border: 2.5rem solid #f37c00;
  width: 60rem;
  font-family: marker;
  box-shadow: inset 0px 0px 8px 4px #00000059;
  /* border-style: outset; */
  filter: drop-shadow(0px 0px 0.8rem #000000);
  opacity: 0;
  transition: all ease-in-out 1.5s;
  transform: translate(0, -2rem);
  transition-delay: 2.5s;
  visibility: hidden;
}
.xt-login .loginbox {
  opacity: 1;
  transform: translate(0, 0);
  visibility: visible;
}
.xt-media-md-dn .loginbox {
  top: 3rem;
  left: 3rem;
}
.xt-media-xs .loginbox {
  width: 100%;
  transform: scale(0.8);
  left: auto;
  top: auto;
  bottom: 1rem;
}
.loginbox:before {
  content: "Lexon";
  display: block;
  font-size: 7rem;
  text-align: center;
  transform: rotate(-4deg);
  text-shadow: 3px 6px black;
}
.loginbox .LoginTitle1 {
  text-align: center;
  font-size: 10rem;
  /*color: #445a64;
        background-color: white;*/
  font-family: fontawesome;
}
.loginbox .LoginTitle1:before {
  content: "\f2bd";
}
.loginbox .LoginTitle1 span {
  display: none;
}
.loginbox .LoginTitle2 {
  text-align: center;
}
.loginbox .LoginTitle2:before {
  content: "Bienvenido";
  font-size: 3rem;
}
.loginbox .LoginTitle2 span {
  display: none;
}
.loginbox #LoginMessage {
  display: none;
}
.loginbox .logintable {
  margin: auto;
}
.loginbox .logintable .loginlabel {
  font-size: 2rem;
}
.loginbox .logintable .logininput {
  background-color: transparent !important;
  border: none;
  font-family: marker;
  font-size: 2rem;
  color: inherit;
  border-bottom: 2px solid white;
  outline: none;
  width: 100%;
}
.loginbox .logintable .logininput:focus {
  border-color: #f37c00;
}
.loginbox .logintable .LoginButton {
  width: 100%;
  margin-top: 2rem;
  border-radius: 3rem;
  border: none;
  background-color: white;
  font-family: marker;
  font-size: 3rem;
  color: #36464e;
  cursor: pointer;
  outline: none;
}
.loginbox .logintable .LoginButton:focus,
.loginbox .logintable .LoginButton:hover {
  background-color: #f37c00;
  color: white;
}
.loginbox .logintable #LinkRecover {
  color: white;
  font-size: 1.5rem;
}