@charset "UTF-8";

/* CSS Document */

:root {
   --swiper-theme-color: #96f2d6 !important;
   --swiper-navigation-size: 20px !important;
}

html,
body {
  width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
   overflow: hidden;
   font-family: helvetica, arial, sans-serif;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   background: #191919;
   background-size: contain;
   box-shadow: 0px 30px 60px -5px #000;
   position: relative;
}
.ChWrP {
   width: 100%;
   max-width: 1380px;
   margin: 0 auto;
   height: 100vh;
   border-radius: 20px;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   position: relative;
   z-index: 2;
   overflow: hidden;
   -moz-transform-origin: center;
   -webkit-transform-origin: center;
   transform-origin: center;
   -moz-animation: app-enter .3s cubic-bezier(.1, .82, .25, 1);
   -webkit-animation: app-enter .3s cubic-bezier(.1, .82, .25, 1);
   animation: app-enter .3s cubic-bezier(.1, .82, .25, 1);
   background-position: top left;
   background-repeat: repeat-x;
   background-color: #0b0c0d;
   display: flex;
   flex-direction: row-reverse;
   box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .06), 0 2px 5px 0 rgba(0, 0, 0, .2);
}


.app-one {
   height: 100%;
   -webkit-transform: translateZ(0);
   transform: translateZ(0);
   -moz-box-orient: vertical;
   -moz-box-direction: normal;
   -moz-flex-direction: column;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
   position: relative;
   width: 70%;
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
   outline: none;
   background-image: linear-gradient(rgb(0 0 0 / 70%), rgb(0 0 0 / 30%)), url();
}

.app-one:before {
   height: 200px;
   bottom: 0px;
   width: 100%;
   content: '';
   position: absolute;
   z-index: 1;
   /* background-image: url(img/clouds.png);
   background-position: bottom;
   background-repeat: repeat-x;
   background-size: cover; */
}

.app-two {
   -webkit-transform-origin: left top;
   transform-origin: left top;
   height: 100%;
   -webkit-transform: translateZ(0);
   transform: translateZ(0);
   -moz-box-orient: vertical;
   -moz-box-direction: normal;
   -moz-flex-direction: column;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
   position: relative;
   width: 35%;
   margin: 0;
   padding: 0 2rem;
   border: 0;
   font-size: 100%;
   font: inherit;
   overflow: hidden;
   vertical-align: baseline;
   outline: none;
   background: #0b0c0d;
   -moz-box-shadow: -2px 0px 4px 0px #1B7BCF;
   -webkit-box-shadow: -2px 0px 4px 0px #1B7BCF;
   box-shadow: -2px 0px 4px 0px #1B7BCF;
}

.rightSidebar-body-main {
   -moz-flex: 1;
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
   display: -moz-box;
   display: -moz-flex;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -moz-box-orient: vertical;
   -moz-box-direction: normal;
   -moz-flex-direction: column;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
   overflow-y: auto;
   -moz-box-flex: 1;
   -moz-flex-grow: 1;
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
   flex-grow: 1;
   z-index: 1;
   margin: 0;
   padding: 0;
   border: 0;
   vertical-align: baseline;
   outline: none;
   height: calc(100% - 0px);
   height: -webkit-calc(100% - 0px);
   height: -moz-calc(100% - 0px);
   height: 100%;
}

.rightSidebar-body-main-register {
   flex: 1 1 0%;
   display: flex !important;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   flex-direction: column;
   overflow-y: auto;
   -webkit-box-flex: 1;
   z-index: 1;
   margin: 0px;
   padding: 0px;
   border: 0px;
   vertical-align: baseline;
   outline: none;
   height: 100%;
}

.infinite-list-viewport {
   position: relative;
   overflow: hidden;
   overflow-y: auto !important;
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
   outline: none;
   -moz-box-orient: vertical;
   -moz-box-direction: normal;
   -moz-box-flex: 1;
   -moz-flex: 1;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -webkit-box-flex: 1;
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
   display: -moz-box;
   display: -moz-flex;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -moz-box-orient: vertical;
   -moz-box-direction: normal;
   -moz-flex-direction: column;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   align-items: flex-start;
   flex-wrap: wrap;
   justify-content: center;
}

.drawer-first {
   margin: 0 0 3rem 0;
   -webkit-transform-origin: center center;
   transform-origin: center center;
   -webkit-animation: drawer-scale 750ms cubic-bezier(.1, .82, .25, 1);
   animation: drawer-scale 750ms cubic-bezier(.1, .82, .25, 1);
   top: 8%;
   justify-content: flex-start;
}

.drawer-first img {
   width: 40%;
   height: 80px;
}

.logo-picker {
   margin: 0 auto;
   position: relative;
}

.drawer-logo-photo {
   cursor: pointer;
   position: relative;
   width: 100px;
   height: 100px;
   overflow: hidden;
   background-image: url(img/Logo-light-Smartime.svg);
   background-repeat: no-repeat;
   background-size: cover;
   margin: 0;
}

.titleuser {
   color: #fff;
}

.titlepass {
   color: #fff;
}

.drawer-scale {
   -webkit-transform-origin: center center;
   transform-origin: center center;
   -webkit-animation: drawer-scale 750ms cubic-bezier(.1, .82, .25, 1);
   animation: drawer-scale 750ms cubic-bezier(.1, .82, .25, 1);
}

.drawer-login {
   -webkit-animation: well-animation1 1s cubic-bezier(.1, .82, .25, 1);
   animation: well-animation1 1s cubic-bezier(.1, .82, .25, 1);
   border-radius: 6px;
   padding: 0;
   -webkit-box-flex: 0;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
   width: 100%;
}

.drawer-login-with {
   padding: 0;
   -webkit-box-flex: 0;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -moz-box-orient: horizontal;
   -moz-box-direction: normal;
   -moz-flex-direction: row;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   -moz-box-align: center;
   -moz-align-items: center;
   -webkit-box-align: center;
   -webkit-align-items: center;
   -ms-flex-align: center;
   align-items: center;
   justify-content: center;
}

.social-reg {
   margin-left: 21px;
   -webkit-box-flex: 0;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
   width: 35px;
   height: 35px;
   border-radius: 50%;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   cursor: pointer;
   -moz-transition: ease 0.2s;
   -o-transition: ease 0.2s;
   -webkit-transition: ease 0.2s;
   transition: ease 0.2s;
}

.social-reg:hover {
   z-index: 100;
   background-color: rgb(226, 227, 228);
   -moz-transform: scale(1.5, 1.5);
   -ms-transform: scale(1.5, 1.5);
   -webkit-transform: scale(1.5, 1.5);
   transform: scale(1.5, 1.5);
}

.signUpB {
   font-size: 0.8rem;
   padding: 0;
   text-decoration: underline;
   margin: 0;
   -webkit-box-flex: 0;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
   width: fit-content;
   height: fit-content;
   cursor: pointer;
   text-align: center;
   position: relative;
   line-height: 0;
   color: #ffffff;
   text-shadow: 2px 1px 0px rgb(19, 104, 179);
   -webkit-text-shadow: 2px 1px 0px rgb(19, 104, 179);
   -moz-text-shadow: 2px 1px 0px rgb(19, 104, 179);
   font-family: helvetica, arial, sans-serif;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   background-image: rgba(255, 255, 255, 0);
   background-color: transparent;
   -webkit-transition: background-color .2s linear;
   -moz-transition: background-color .2s linear;
   -o-transition: background-color .2s linear;
   -ms-transition: background-color .2s linear;
   transition: background-color .2s linear;
}

.signUpB:hover {
   background-image: rgba(255, 255, 255, 0);
   background-color: #1368B3;
}

.signUpB:after {
   float: left;
   content: '      ';
   padding-left: 5px;
   padding-right: 5px;
   line-height: 34px;
   text-align: right;
   position: absolute;
   left: -37px;
   top: 0px;
   font-family: helvetica, arial, sans-serif;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   text-shadow: 0px 0px 0px rgba(59, 141, 16, 0);
   -webkit-text-shadow: 0px 0px 0px rgba(59, 141, 16, 0);
   -moz-text-shadow: 0px 0px 0px rgba(59, 141, 16, 0);
   color: #444444;
   font-size: 12px;
   font-weight: 300;
   cursor: default;
}

.LoginB {
   font-size: 0.8rem;
   padding: 0;
   text-decoration: underline;
   margin: 0;
   -webkit-box-flex: 0;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
   width: fit-content;
   height: fit-content;
   cursor: pointer;
   text-align: center;
   position: relative;
   line-height: 0;
   color: #ffffff;
   text-shadow: 2px 1px 0px rgb(19, 104, 179);
   -webkit-text-shadow: 2px 1px 0px rgb(19, 104, 179);
   -moz-text-shadow: 2px 1px 0px rgb(19, 104, 179);
   font-family: helvetica, arial, sans-serif;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   background-image: rgba(255, 255, 255, 0);
   background-color: transparent;
   -webkit-transition: background-color .2s linear;
   -moz-transition: background-color .2s linear;
   -o-transition: background-color .2s linear;
   -ms-transition: background-color .2s linear;
   transition: background-color .2s linear;
}

.LoginB:hover {
   background-image: rgba(255, 255, 255, 0);
   background-color: #1368B3;
}

.LoginB:after {
   float: left;
   content: '';
   padding-left: 5px;
   padding-right: 5px;
   line-height: 40px;
   text-align: right;
   position: absolute;
   left: -37px;
   top: 0px;
   font-family: helvetica, arial, sans-serif;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   text-shadow: 0px 0px 0px rgba(59, 141, 16, 0);
   -webkit-text-shadow: 0px 0px 0px rgba(59, 141, 16, 0);
   -moz-text-shadow: 0px 0px 0px rgba(59, 141, 16, 0);
   color: #444444;
   font-size: 12px;
   font-weight: 300;
   cursor: default;
}

.social-reg:nth-child(1) {
   background-image: url(img/facebook.png);
   background-size: 25px;
   background-repeat: no-repeat;
   background-position: center;
   margin-left: 0px;
}

.social-reg:nth-child(2) {
   background-image: url(img/twitter.png);
   background-size: 25px;
   background-repeat: no-repeat;
   background-position: center;
}

.social-reg:nth-child(3) {
   background-image: url(img/googlePlus.png);
   background-size: 25px;
   background-repeat: no-repeat;
   background-position: center;
}

.social-reg:nth-child(4) {
   background-image: url(img/linkedin.png);
   background-size: 25px;
   background-repeat: no-repeat;
   background-position: center;
}

.drawer-body {
   margin: 1.5rem 0 0 0;
   width: 100%;
   background-color: transparent;
   border-bottom: 1px solid rgba(216, 219, 223, 0.43);
   -webkit-animation: well-animation2 1s cubic-bezier(.1, .82, .25, 1);
   animation: well-animation2 1s cubic-bezier(.1, .82, .25, 1);
}

.drawer-body:before {
   content: '-O- Ingresa con tu cuenta corporativa ';
   border-bottom: 1px solid rgba(216, 219, 223, 0.43);
   background-color: transparent;
   width: 100%;
   display: -moz-box;
   display: -moz-flex;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -moz-box-orient: vertical;
   -moz-box-direction: normal;
   -moz-flex-direction: column;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
   text-align: left;
   text-indent: 10px;
   font-size: 15px;
   font-weight: 500;
   font-family: helvetica, arial, sans-serif;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   color: #ffff;
   padding: 0px 0px 15px 0px;
   margin: 0;
}

.drawer-body-2 {
   margin: 40px 0px 0px 0px;
   width: 100%;
   background-color: rgba(255, 255, 255, 0.6);
   border-bottom: 1px solid rgba(216, 219, 223, 0.43);
   -webkit-animation: well-animation2 1s cubic-bezier(.1, .82, .25, 1);
   animation: well-animation2 1s cubic-bezier(.1, .82, .25, 1);
}

.drawer-body-2:before {
   content: 'Cuentas con tus credenciales de acceso?';
   border-bottom: 1px solid rgba(216, 219, 223, 0.43);
   background-color: #f7f7f7;
   width: 100%;
   display: -moz-box;
   display: -moz-flex;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -moz-box-orient: vertical;
   -moz-box-direction: normal;
   -moz-flex-direction: column;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
   text-align: left;
   text-indent: 16px;
   font-size: 15px;
   font-weight: 300;
   font-family: helvetica, arial, sans-serif;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   color: #868484;
   padding: 0px 0px 8px 0px;
}

.drawer-body-reg {
   margin: 0;
   width: 100%;
   background-color: transparent;
   border-bottom: 0px solid rgba(216, 219, 223, 0.43);
   -webkit-animation: well-animation2 1s cubic-bezier(.1, .82, .25, 1);
   animation: well-animation2 1s cubic-bezier(.1, .82, .25, 1);
}

.drawer-login-with p {
   width: 55%;
   color: #b5b5b5;
   font-size: 0.8rem;
   margin: 0;
   text-align: center;
}



/* .drawer-body-reg:before {
    content: 'No puedes acceder a tu cuenta?';
    border-bottom: 1px solid rgba(216, 219, 223, 0.43);
    background-color: #f7f7f7;
    width: 100%;
    display: -moz-box;
    display: -moz-flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -moz-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
	text-align:left;
  text-indent:16px;	
  font-size:15px;
  font-weight:300;
  font-family: helvetica, arial, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
	color:#868484;
	    padding: 0px 0px 8px 0px;
} */

.drawer-body-reg-2 {
   margin: 40px 0px 0px 0px;
   width: 100%;
   background-color: rgba(255, 255, 255, 0.3);
   border-bottom: 1px solid rgba(216, 219, 223, 0.43);
   -webkit-animation: well-animation2 1s cubic-bezier(.1, .82, .25, 1);
   animation: well-animation2 1s cubic-bezier(.1, .82, .25, 1);
}

.drawer-body-reg-2:before {
   content: '-OR- SignUp with ';
   border-bottom: 1px solid rgba(216, 219, 223, 0.43);
   background-color: #f7f7f7;
   width: 100%;
   display: -moz-box;
   display: -moz-flex;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -moz-box-orient: vertical;
   -moz-box-direction: normal;
   -moz-flex-direction: column;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
   text-align: left;
   text-indent: 11px;
   font-size: 15px;
   font-weight: 300;
   font-family: helvetica, arial, sans-serif;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   color: #868484;
   padding: 0px 0px 8px 0px;
}

.socialBtn {
   margin: 0 0.6rem;
   -webkit-box-flex: 0;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
   width: 35px;
   height: 35px;
   border-radius: 50%;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   cursor: pointer;
   -moz-transition: ease 0.2s;
   -o-transition: ease 0.2s;
   -webkit-transition: ease 0.2s;
   transition: ease 0.2s;
   background: #fff;
}

.socialBtn:hover {
   z-index: 100;
   background-color: rgb(226, 227, 228);
   -moz-transform: scale(1.5, 1.5);
   -ms-transform: scale(1.5, 1.5);
   -webkit-transform: scale(1.5, 1.5);
   transform: scale(1.5, 1.5);
}


.socialBtn:nth-child(1) {
   background-image: url(img/googlePlus.png);
   background-size: 25px;
   background-repeat: no-repeat;
   background-position: center;
}

.socialBtn:nth-child(2) {
   background-image: url(img/linkedin.png);
   background-size: 25px;
   background-repeat: no-repeat;
   background-position: center;
}

.input-clm {
   margin: 0;
   min-height: 18px;
   line-height: 18px;
   font-size: 15px;
   color: #7c8b92;
   -webkit-box-flex: 0;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   -webkit-box-align: center;
   -webkit-align-items: center;
   -ms-flex-align: center;
   align-items: center;
   font-weight: 500;
   margin-bottom: 35px;
   position: relative;
}

.input {
   position: relative;
   width: 100%;
   height: 40px;
   border-radius: 10px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 2px;
   border: 1.5px solid #CACACA;
   padding: 5px 5px 5px 55px;
   color: #fff;
   outline: none;
   font-size: 15px;
   font-weight: bold;
   font-family: helvetica, arial, sans-serif;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   background-color: transparent !important;
}

.input::placeholder {
   color: #fff;
}

/* .input:focus,
input:active {
   border: 1px solid #4c5c72;
   background-color: #00000029 !important;
} */

.unm {
   position: absolute;
   width: 40px;
   height: 40px;
   background-image: url(img/user.png);
   background-repeat: no-repeat;
   background-size: 20px;
   background-position: center;
   z-index: 1;
   cursor: pointer;
   margin: 0 0 0 1rem;
}

.validacionCorreo {

   width: 100%;
   display: -moz-box;
   display: -moz-flex;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -moz-box-orient: vertical;
   -moz-box-direction: normal;
   -moz-flex-direction: column;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
   text-align: left;
   text-indent: 65px;
   margin-top: 5px;
   font-size: 15px;
   font-weight: 300;
   font-family: helvetica, arial, sans-serif;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   color: #868484;
   padding: 0px 0px 8px 0px;
}

.funm {
   position: absolute;
   width: 40px;
   height: 40px;
   background-image: url(img/fullName.png);
   background-repeat: no-repeat;
   background-size: 14px;
   background-position: center;
   z-index: 1;
   cursor: pointer;
}

.psw {
   position: absolute;
   width: 40px;
   height: 40px;
   background-image: url(img/key.png);
   background-repeat: no-repeat;
   background-size: 20px;
   background-position: center;
   z-index: 1;
   cursor: pointer;
   margin: 0 0 0 1rem;
}

.uemail {
   position: absolute;
   width: 40px;
   height: 40px;
   background-image: url(img/email.png);
   background-repeat: no-repeat;
   background-size: 14px;
   background-position: center;
   z-index: 1;
   cursor: pointer;
}

.loginButton {
   width: 100%;
   height: 50px;
   padding: 0;
   -webkit-box-sizing: content-box;
   -moz-box-sizing: content-box;
   box-sizing: content-box;
   outline: none;
   font-size: 20px;
   font-weight: bold;
   color: #ffffff;
   cursor: pointer;
   position: relative;
   -webkit-text-shadow: 2px 1px 0px rgb(19, 104, 179);
   -moz-text-shadow: 2px 1px 0px rgb(19, 104, 179);
   font-family: helvetica, arial, sans-serif;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 10px;
   background-color: #1B7BCF;
   -moz-transition: background-color .2s linear;
   -o-transition: background-color .2s linear;
   -ms-transition: background-color .2s linear;
   margin: 1rem 0 0 0;
   transition: all .5s ease-in-out;
}

.loginButton:hover {
   background-image: rgba(255, 255, 255, 0);
   background-color: #1368b3ad;
}

#supersized {
   position: fixed;
   left: 0;
   top: 0;
   overflow: hidden;
   z-index: -999;
   height: 100%;
   width: 100%;
}

#supersized img {
   width: auto;
   height: auto;
   position: relative;
   outline: none;
   border: none;
}

#maintenance {
   width: 550px;
   background-color: #FF861D;
   color: #fff;
   margin: 130px auto 0;
   padding: 20px;
}

.scr {
   opacity: 0;
   z-index: -1;
   display: none;
}

.op {
   display: block;
}

.OpenRegister {
   -moz-animation: fadeInUpBig .5s cubic-bezier(1, .9, .42, 1);
   -webkit-animation: fadeInUpBig .5s cubic-bezier(1, .9, .42, 1);
   animation: fadeInUpBig .5s cubic-bezier(1, .9, .42, 1);
}

.CloseLogin {
   -moz-animation: zoomOutLeft .5s cubic-bezier(1, .9, .42, 1);
   -webkit-animation: zoomOutLeft .5s cubic-bezier(1, .9, .42, 1);
   animation: zoomOutLeft .5s cubic-bezier(1, .9, .42, 1);
}

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

   100% {
      opacity: 1;
      -webkit-transform: none;
      transform: none
   }
}

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

   100% {
      opacity: 1;
      -webkit-transform: none;
      transform: none
   }
}

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

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

   100% {
      opacity: 1;
      -webkit-transform: none;
      transform: none
   }
}

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

   100% {
      opacity: 1;
      -webkit-transform: none;
      transform: none
   }
}

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

@-webkit-keyframes zoomOutLeft {
   40% {
      opacity: 1;
      -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
      transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0)
   }

   100% {
      opacity: 0;
      -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
      transform: scale(.1) translate3d(-2000px, 0, 0);
      -webkit-transform-origin: left center;
      transform-origin: left center
   }
}

@keyframes zoomOutLeft {
   40% {
      opacity: 1;
      -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
      transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0)
   }

   100% {
      opacity: 0;
      -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
      transform: scale(.1) translate3d(-2000px, 0, 0);
      -webkit-transform-origin: left center;
      transform-origin: left center
   }
}

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

@-webkit-keyframes zoomInRight {
   0% {
      opacity: 0;
      -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
      transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
      -webkit-animation-timing-function: cubic-bezier(0.55, .055, .675, .19);
      animation-timing-function: cubic-bezier(0.55, .055, .675, .19)
   }

   60% {
      opacity: 1;
      -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
      transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
      -webkit-animation-timing-function: cubic-bezier(0.175, .885, .32, 1);
      animation-timing-function: cubic-bezier(0.175, .885, .32, 1)
   }
}

@keyframes zoomInRight {
   0% {
      opacity: 0;
      -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
      transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
      -webkit-animation-timing-function: cubic-bezier(0.55, .055, .675, .19);
      animation-timing-function: cubic-bezier(0.55, .055, .675, .19)
   }

   60% {
      opacity: 1;
      -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
      transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
      -webkit-animation-timing-function: cubic-bezier(0.175, .885, .32, 1);
      animation-timing-function: cubic-bezier(0.175, .885, .32, 1)
   }
}

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

@-webkit-keyframes drawer-scale {

   0%,
   20% {
      -webkit-transform: scale(0, 0);
      transform: scale(0, 0)
   }

   100% {
      -webkit-transform: scale 1, 1;
      transform: scale 1, 1
   }
}

@keyframes drawer-scale {

   0%,
   20% {
      -webkit-transform: scale(0, 0);
      transform: scale(0, 0)
   }

   100% {
      -webkit-transform: scale 1, 1;
      transform: scale 1, 1
   }
}

.animate-enter1 {
   -webkit-animation: well-animation1 1s cubic-bezier(.1, .82, .25, 1);
   animation: well-animation1 1s cubic-bezier(.1, .82, .25, 1)
}

@-webkit-keyframes well-animation1 {

   0%,
   25% {
      -webkit-transform: translateY(-50px);
      transform: translateY(-50px);
      opacity: 0
   }

   100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      opacity: 1
   }
}

@keyframes well-animation1 {

   0%,
   25% {
      -webkit-transform: translateY(-50px);
      transform: translateY(-50px);
      opacity: 0
   }

   100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      opacity: 1
   }
}

.animate-enter2 {
   -webkit-animation: well-animation2 1s cubic-bezier(.1, .82, .25, 1);
   animation: well-animation2 1s cubic-bezier(.1, .82, .25, 1)
}

@-webkit-keyframes well-animation2 {

   0%,
   30% {
      -webkit-transform: translateY(-50px);
      transform: translateY(-50px);
      opacity: 0
   }

   100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      opacity: 1
   }
}

@keyframes well-animation2 {

   0%,
   30% {
      -webkit-transform: translateY(-50px);
      transform: translateY(-50px);
      opacity: 0
   }

   100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      opacity: 1
   }
}



/*Swiper styles STARTED*/
.swiper {
   width: 100%;
   height: 100%;
}

.swiper-slide {
   text-align: center;
   font-size: 18px;
   background: #161414;
   display: flex !important;
   align-items: center;
   justify-content: center;
}

.swiper-slide img {
   display: block;
   width: 85%;
   height: auto;
   object-fit: cover;
}

.swiper-button-next, .swiper-button-prev {
   position: absolute;
   top: var(--swiper-navigation-top-offset,97%) !important;
   width: calc(var(--swiper-navigation-size)/ 44 * 27);
   height: var(--swiper-navigation-size);
   margin-top: calc(0px - (var(--swiper-navigation-size)/ 2));
   z-index: 10;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--swiper-navigation-color,var(--swiper-theme-color));
}

.swiper-button-next {
   right: var(--swiper-navigation-sides-offset,10px) !important;
   left: auto !important;
}

.swiper-button-next:after, .swiper-button-prev:after {
   font-family: swiper-icons;
   font-size: var(--swiper-navigation-size) !important;
   text-transform: none!important;
   letter-spacing: 0;
   font-variant: initial;
   line-height: 1;
}

.swiper-button-prev {
   left: var(--swiper-navigation-sides-offset,92%) !important;
   right: auto !important;
}

.swiper-horizontal>.swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, .swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
   width: 100%;
   height: var(--swiper-pagination-progressbar-size,4px) !important;
   left: 93% !important;
   top: 96.7% !important;
   border-radius: 5px !important;
   overflow: hidden;
}

.swiper-pagination {
   position: absolute;
   text-align: center;
   transition: .3s opacity;
   transform: translate3d(0,0,0);
   z-index: 10;
   width: 5% !important;
}

.swiper-pagination-progressbar {
   background: #96f2d770 !important;
   position: absolute !important;
}

/*Swiper styles json FINISHED*/
.btn-pc {
    display: none !important; /* Oculta el botón "Portal Colaborador" en PC y Móvil */
}

.btn-fiz {
    display: none !important; /* Oculta el botón "Portal Fiscalizador" en PC y Móvil */
}

/* **NUEVA REGLA: OCULTAR SECCIÓN "O- Ingresa con tu cuenta corporativa" y BOTONES SOCIALES en PC y Móvil** */
/* Asegúrate que esta regla ESTÉ FUERA de cualquier media query. */
.drawer-body {
    display: none !important; /* Oculta todo el bloque social en PC y Móvil */
}


/*Mobile Screen STARTED*/
@media screen and (max-width:1280px) {
   .ChWrP {
      width: 100%;
      margin: 0px;
      top: 0px;
      height: calc(100% - 0px);
      height: -webkit-calc(100% - 0px);
      height: -moz-calc(100% - 0px);
      border-radius: 0px;
      -webkit-border-radius: 0px;
      -moz-border-radius: 0px;
      box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0), 0 0px 0px 0 rgba(0, 0, 0, 0);
   }
}

@media screen and (max-width:1210px) {
   .ChWrP {
      /*flex-direction: column-reverse;*/
   }

   .app-one {
      width: 50%;
      /*need to come to the BOTTOM. and width:100%;*/
   }

   .app-two {
      width: 50%;
      /*need to come to the TOP. and width:100%;*/
   }
}

@media screen and (max-width:768px) {

    .infinite-list-viewport {
        height: calc(100vh - 200px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 80px;
    }

    .infinite-list-viewport .drawer-body-reg {
        display: flex;
        flex-direction: column; 
        justify-content: center; 
        align-items: center; 
        text-align: center; 
        width: 100%; 
        max-width: 95%; 
        box-sizing: border-box;
        padding: 0 5px;
        margin-top: 10px; 
        margin-bottom: 15px; 
    }

    .infinite-list-viewport .drawer-body-reg p,
    .infinite-list-viewport .drawer-body-reg span {
        display: block; 
        white-space: normal; 
        word-break: break-word; 
        font-size: 0.85rem; 
        line-height: 1.3; 
        margin: 2px auto; 
        max-width: 95%; 
        min-width: 0; 
        flex-shrink: 1; 
    }

  
    .infinite-list-viewport .drawer-body-reg .signUpB {
        display: block !important; 
        white-space: normal !important;
        word-break: break-word !important;
        font-size: 0.85rem !important;
        line-height: 1.3 !important;
        margin: 2px auto !important;
        max-width: 95% !important; 
        min-width: 0 !important; 
        flex-shrink: 1 !important; 
        color: #66b3ff !important; 
        text-decoration: underline !important;
    }
    
   .app-one {
      display: none;
   }

   .app-two {
      width: 100%;
   }

   .app-two:before {
      height: 97px;
      bottom: 0px;
      width: 100%;
      content: '';
      position: absolute;
      z-index: -1;
      /* background-image: url(img/clouds.png);
      background-position: bottom;
      background-repeat: repeat-x;
      background-size: cover; */
   }
}
  .input-clm {
        width: 90% !important; 
        max-width: 350px !important;
        margin-bottom: 1rem !important; 
    }

    .btn-ori{
        margin-top: 20px;
        padding-bottom: 10px;
        width: 85% !important; 
        max-width: 300px !important;
        margin: 8px auto !important;
    }


@media screen and (max-width: 320px) {


    .alert-danger {
        margin-bottom: 30px; 
        font-size: 14px;
        padding: 8px 0; 
    }

    .input-new {
        margin-bottom: 30px;
    }

    .social-reg {
        margin-left: 6px;
    }
    .btn-ori{
        width: 95% !important; 
        margin: 5px auto !important; 
    }
    .input-clm {
        margin: 0 auto 0.8rem auto !important; 
    }

.drawer-body-reg { 
    display: flex;
    flex-wrap: wrap; 
    justify-content: center;
    align-items: center; 
    text-align: center;
    width: 100%; 
    box-sizing: border-box;
    padding: 0 10px; 
   }
}

/*Mobile Screen FINISHED*/

/* start style new login */
   .input-new {
    width: 100%;
    height: 35px; 
    padding: 0 0 5px 0; 
    background: none;
    color: #fff; 
    border: none; 
    outline: 0px;
    border-bottom: 1px solid #c7c7c7; 
}

.form .lbl-nombre {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
   border-bottom: 1px solid #c7c7c7;
}

.form .lbl-nombre:after {
   content: '';
   position: absolute;
   left: 0;
   bottom: -1px;
   width: 100%;
   height: 100%;
   border-bottom: 4px solid #1971C2;
   transform: translateX(-100%);
   transition: all 0.3s ease;
}

.text-nomb {
   position: absolute;
   bottom: 2px;
   left: 0;
   transition: all 0.3s ease;
   color: #fff;
}

.form input:focus+.lbl-nombre .text-nomb,
.form input:valid+.lbl-nombre .text-nomb {
   transform: translateY(-210%);
   font-size: 14px;
   color: #1971C2;
}

.form input:focus+.lbl-nombre:after,
.form input:valid+.lbl-nombre:after {
   transform: translateX(0%);
}

input:-internal-autofill-selected {
   appearance: menulist-button;
   background-image: none !important;
   background-color: none !important;
   color: fieldtext !important;
}

/* end style new login */

/* btn efect border animation one */
button {
   margin: 3rem 0 1rem 0;
   transform: translate(45%, 0%);
   color: #fff;
   padding: 0.5rem 3rem;
   font-size: 1.3rem;
   font-weight: bold;
   border: 0;
   letter-spacing: 0px;
   background-color: transparent;
   box-shadow: 0px 0px 5px 2px rgb(0 0 0 / 20%);
   overflow: hidden;
   border-radius: 5px;
   transition: all .5s ease-in-out;
   cursor: pointer;
}

button::before {
   content: '';
   position: absolute;
   top: 2px;
   left: 2px;
   bottom: 2px;
   width: 50%;
   background-color: transparent;
}

button span:nth-child(1) {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 2px;
   background: linear-gradient(to right, rgba(25, 113, 194, 1), rgb(108 175 236));
   animation: border-animetion1 2s linear infinite 1s;
}

@keyframes border-animetion1 {
   0% {
      transform: translateX(-100%);
   }

   100% {
      transform: translateX(100%);
   }
}

button span:nth-child(2) {
   position: absolute;
   top: 0;
   right: 0;
   width: 2px;
   height: 100%;
   background: linear-gradient(to right, rgba(25, 113, 194, 1), rgb(108 175 236));
   animation: border-animetion2 2s linear infinite;
}

@keyframes border-animetion2 {
   0% {
      transform: translateY(-100%);
   }

   100% {
      transform: translateY(100%);
   }
}

button span:nth-child(3) {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 2px;
   background: linear-gradient(to right, rgba(25, 113, 194, 1), rgb(108 175 236));
   animation: border-animetion3 2s linear infinite 1s;
}

@keyframes border-animetion3 {
   0% {
      transform: translateX(100%);
   }

   100% {
      transform: translateX(-100%);
   }
}

button span:nth-child(4) {
   position: absolute;
   top: 0;
   left: 0;
   width: 2px;
   height: 100%;
   background: linear-gradient(to right, rgba(25, 113, 194, 1), rgb(108 175 236));
   animation: border-animetion4 2s linear infinite;
}

@keyframes border-animetion4 {
   0% {
      transform: translateY(100%);
   }

   100% {
      transform: translateY(-100%);
   }
}

button:hover {
   background: linear-gradient(to right, #96f2d7, #c3fae8);
   box-shadow: 0px 0px 30px 4px rgb(32 201 151 / 90%);
   color: #4c5c72;
}

/* end btn efect border animation one */

.row{
   color: #FFFFFF; 
}

.alert-danger {
    color: #CCCCCC!important;
    margin-bottom: 20px;
}