#lottie{
    background-color:#fff;
    width:100%;
    height:100%;
    display:block;
    overflow: hidden;
    transform: translate3d(0,0,0);
    text-align: center;
    opacity: 1;
}

.menu-modal {
    display: none; /* Hidden by default */
    position: absolute; /* Stay in place */
    z-index: 9; /* Sit on top */
    left: 0;
    top: 0;
    padding: 5vh 0 0 5vh; 
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(255, 255, 255); /* Fallback color */
    background-color: rgba(255, 255, 255, 0.8); /* Black w/ opacity */
}
strong{
    font-weight: inherit!important;
}

.logoHomeA {
    position:absolute;
    width:26%;
    top:40%;
    left:48%;
    /*padding:5vh 0 0 5vh;*/
/*    transform: translate(-50%, -50%);
    animation-name:logoanim;
    animation-duration: 1.5s;
*/    /*animation-delay:1.3s;*/
/*    animation-fill-mode: forwards;
    animation-timing-function: ease;*/
}

@keyframes logoanim {
    from {width:28%;top:40%;left:48%;transform:translate(-50%,-50%)}
    to {width:10%;top:0;left:0;transform:translate(0,0)}
}

.logoHomePrev {
    position:absolute;
    z-index:3;
}

.home-anim-title {
    opacity:0;
    animation-name: home-anim-title;
    animation-delay: 3.5s;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    
}

@keyframes home-anim-title {
    from {opacity:0;}
    to {opacity:1;}
}

.home-anim-message {
    opacity:0;
    animation-name: home-anim-message;
    animation-delay: 4s;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    
}

@keyframes home-anim-message {
    from {opacity:0;}
    to {opacity:1;}
}

.home-anim-button {
    opacity:0;
    animation-name: home-anim-button;
    animation-delay: 4.5s;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    
}

@keyframes home-anim-button {
    from {opacity:0;}
    to {opacity:1;}
}

.home-anim-demobg {
    right: -50%;
    animation-name: home-anim-demobg;
    animation-delay: 3s;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    
}

@keyframes home-anim-demobg {
    from {right:-50%;}
    to {right:0;}
}

.pantalla {
    display: block; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 9999; /* Sit on top */
    left: 0;
    top: 0;
    padding: 5vh 0 0 5vh; 
    width: 100%; /* Full width */
    height: 100vh; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color:white;
    opacity:0;
}
.pantalla-mobile {
    display: block;
    position: absolute;
    z-index: 9999;
    left: 0;
    top: 0;
    border-radius: 0px 0px 4vh 4vh;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: #fff;
    opacity: 0;
}
.animFadeIn {
    animation-name: animFadeIn;
    animation-duration: 0.75s;
    animation-fill-mode: forwards;
}

.animFadeInPopup {
    animation-name: animFadeInPopup;
    animation-duration: 0.75s;
    animation-fill-mode: forwards;
}

.animFadeOutPopup {
    animation-name: animFadeOutPopup;
    animation-duration: 0.75s;
    animation-fill-mode: forwards;
}

.animFadeOut {
    animation-name: animFadeOut;
    animation-duration: 0.75s;
    animation-fill-mode: forwards;
}

.demohomebg2 {
    position:absolute;
    /*keep the same image aspect ratio*/
    width: 55vw;
    height: auto;
    z-index: 0;
    /*top:17vh;*/
}


.demohomebg {
    position:absolute;
    top:0;
    right:50%;
    width:100%;
    height: 100%;
    background-image: url('../assets/images/svg/homeleftbg.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

.homebg {
    position:absolute;
    z-index: -1;
    width: 100vw;
    height: 100vh;
    top:0;
    left:0;
																		 
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url('../assets/images/svg/background-home2.svg');
    background-color: #2E328A;
    background-position: right top;
    background-attachment: fixed;
}

.homebg2 {
    position:absolute;
    z-index: -1;
    width: 100vw;
    height: 100vh;
    top:0;
    left:0;
    /*background-size: contain;*/
    /*background-image: url('../assets/images/png/explore-demo-bg.png');*/
    background-repeat: repeat no-repeat;
    background-color: white;
    background-position: left top;
    background-attachment: fixed;
}
.homebg-demo{
    position:absolute;
    z-index: -1;
    width: 100vw;
    height: 100vh;
    top:0;
    left:0;
    background:white;
    /*background-image: url('../assets/images/svg/demobg.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-color:#1c224d;
    background-position: left top;
    background-attachment: fixed;*/
}

.demoCard img{
    width: 90%;
    display: block;
    margin: 0 0 10px 0;
}

.demoCard .img-phone{
    width: 30%;
}
.demoCard p{
  font-family: 'TaubSansLight';
  font-size: 1.3vw;
  line-height: 1.1em;
  margin-bottom: 1vw;
  text-align: center;
  color: gray;
}

.demoCard h2{
  font-family: 'TaubSansHeavy';
  font-size: 1.8vw;
  line-height: 1.1em;
  margin-bottom: 1vw;
  text-align: center;
  color:#121C4E;
}
.cc-color-override-1785034.cc-revoke {
    background-color: rgb(18, 28, 78) !important;
    color: rgb(255, 255, 255) !important; 
}						   

.home-grid {
    width:100vw;
    height: 100vh;
    padding: 6vh 0 0 5vh;
																   
						   
    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows: 10% 80% 10%;
    grid-template-areas: "logohome"
                        "homemain"
                        "homefooter";
}
.home-grid2 {
    width:100vw;
    height: 100vh;
    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows: 13% 75% 12%;
    grid-template-areas: "logohome"
                        "homemain"
                        "homefooter";
}
.demoCardsContainer {
    display: flex;
    padding: 0vw 3vw;
    justify-content: space-between;
}



.demoCard {
    text-align: center;
    z-index: 1;
    height: 104%;
    box-shadow: 0px 2px 10px 2px rgb(0 0 0 / 20%);
    /* border: 0.001vw solid black; */
    width: 20.5vw;
    padding: 2vw;
    padding-top: 3vw;
    padding-bottom: 3vw;
    background-color: white;
    display: flex;
    border-radius: 8px;
    justify-content: center;
    flex-direction: column;
}


.logohome {
    grid-area: logohome;
}

.homemain {
    grid-area: homemain;
}

.homefooter {
    grid-area: homefooter;
}

.logoadp-transition{
    position:absolute;
    grid-area: logohome;
    width:10%;
    top:0%;
    left:0%;
    padding:3vw 0 0 3vw;
    cursor: pointer;
}
.menu-container {
    z-index: 10;
    position:relative;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
}

.menu-container:nth-child(2) {
    top: 90%;
    animation-name: child2;
    animation-duration:0.75s;
}

.menu-container:nth-child(3) {
    top: 60%;
    animation-name: child3;
    animation-duration:0.50s;
}

.menu-container:nth-child(4) {
    top: 30%;
    animation-name: child4;
    animation-duration:0.25s;
}

/*menu con 2 opciones*/
.menu-container2 {
    z-index: 10;
    position:relative;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
}

.menu-container2:nth-child(2) {
    top: 42%;
    animation-name: child2_2;
    animation-duration:0.25s;
}

@keyframes child2_2 {
    from {top : 42%;}
    to {top:0%;}
}

/*menu con 5 opciones*/
.menu-container5 {
    z-index: 10;
    position:relative;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
}

.menu-container5:nth-child(2) {
    top: 84%;
    animation-name: child2_5;
    animation-duration:1s;
}

.menu-container5:nth-child(3) {
    top: 64%;
    animation-name: child3_5;
    animation-duration:0.75s;
}

.menu-container5:nth-child(4) {
    top: 44%;
    animation-name: child4_5;
    animation-duration:0.50s;
}

.menu-container5:nth-child(5) {
    top: 22%;
    animation-name: child5_5;
    animation-duration:0.25s;
}

.menu-container5:nth-child(6) {
    top: 5%;
    animation-name: child6_5;
    animation-duration:0.25s;
}

@keyframes child2_5 {
    0%   {top:84%;}
    25%   {top:64%;}
    50%  {top:44%;}
    75% {top:22%;}
    100% {top:0%;}
}

@keyframes child3_5 {
        0%   {top:64%;}
    33.33%   {top:44%;}
    66.66%  {top:22%;}
    100% {top:0%;}
}
@keyframes child4_5 {
    0%   {top:44%;}
    50%  {top:22%;}
    100% {top:0%;}
}
@keyframes child5_5 {
    0%   {top:22%;}
    50%  {top:11%;}
    100% {top:0%;}
}

@keyframes child6_5 {
    from {top : 5%;}
    to {top:0%;}
}

/*.menu-container:nth-child(5) {
    top: 22.3%;
    animation-name: child5;
    animation-duration: 0.25s;
}
*/


.menu-two-cta{
    top: 90%;
    animation-name: child2-two-cta!important;
    animation-duration:0.75s;
}
.menu-three-cta{
    top: 60%;
    animation-name: child3-three-cta!important;
    animation-duration:0.50s;
}/*
.menu-four-cta{
    top: 60%;
    animation-name: child3-three-cta!important;
    animation-duration:0.50s;
}*/
.menu-four-cta:nth-child(2) {
    top: 90%;
    animation-name: child2-four-cta!important;
    animation-duration:0.75s;
}

.menu-four-cta:nth-child(3) {
    top: 60%;
    animation-name: child3-four-cta!important;
    animation-duration:0.50s;
}

.menu-four-cta:nth-child(4) {
    top: 30%;
    animation-name: child4-four-cta!important;
    animation-duration:0.25s;
}

@keyframes child2-two-cta {
    0%      {top:100%;}
    33.33%  {top:70%;}
    66.66%  {top:40%;}
    100%    {top:0%;}
}

@keyframes child3-three-cta {
    
    0%   {top:60%;}
    50%  {top:30%;}
    100% {top:0%;}
}

@keyframes child2-four-cta {
        0%   {top:75%;}
    33.33%   {top:45%;}
    66.66%  {top:15%;}
    100% {top:0%;}
}

@keyframes child3-four-cta {
    0%   {top:45%;}
    50%  {top:15%;}
    100% {top:0%;}
}

@keyframes child4-four-cta {
    from {top : 20%;}
    to {top:0%;}
}



@keyframes child2 {
        0%   {top:90%;}
    33.33%   {top:60%;}
    66.66%  {top:30%;}
    100% {top:0%;}
}

@keyframes child3 {
					   
				   
					 
					 
					
	
    0%   {top:60%;}
    50%  {top:30%;}
    100% {top:0%;}
}

@keyframes child4 {
						 
				  
	
    from {top : 30%;}
    to {top:0%;}
}

.apptransition {
    animation-name: customtransition;
    animation-duration: 2s;
    
}

@keyframes customtransition {
  from  {opacity: 1;}
  to {opacity: 0;}
}

@keyframes animFadeIn {
  from  {opacity: 0;}
  to {opacity: 1;}
}

@keyframes animFadeInPopup {
  from  {opacity: 0;}
  to {opacity: 0.5;}
}

@keyframes animFadeOutPopup {
  from  {opacity: 0.5;}
  to {opacity: 0;}
}

@keyframes animFadeOut {
  from  {opacity: 1;}
  to {opacity: 0;}
}

.closeMenu {
    font-size: 1.2vw;
}

@keyframes closeMenuAnim {
    from {opacity:0;}
    to {opacity:1;}
    
}

.closeMenu > a {
    opacity:0;
    text-decoration: none!important;
    color:black;
    animation-name: closeMenuAnim;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
    /*-webkit-animation-name: closeMenuAnim;
    -webkit-animation-duration: 1s;
    -webkit-animation-delay: 3s;
    -webkit-animation-fill-mode: forwards;*/
}

.beginDemoTransition {
    display: block; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 10; /* Sit on top */
    left: 0;
    top: 0;
    /*padding: 11vh 0 0 0; */
    /*padding: 6vh 0 0 0; */
    width: 100vw; /* Full width */
    height: 100vh; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color:white;
}


.endDemoTransition {
    display: block; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 8; /* Sit on top */
    left: 100%;
    top: 0;
    padding: 5vh 0 0 0; 
    width: 100%; /* Full width */
    height: 100vh; /* Full height */
    overflow: initial; /* Enable scroll if needed */
    background-color:white;
}

.circleBorder {
    margin:0;
    width: 6vw;
    height: 6vw;
    padding: 1.6vw 0;
    border-style: solid;
    border-radius: 50%;
    border-width: 3px;
    border-color:#F2635D;
    font-size:2vw;
    line-height: 2vw;
    background-color:white;
}

.rectangleBorder {
    width: 15.5vw;
    height: 2.5vw;
    border-bottom: 3px solid #F2635D;
    margin-bottom:2em;
}

.circleBorder2{
    margin:0;
    width: 3vw;
    height: 3vw;
    padding: 0.3vw;
    border-style: solid;
    border-radius: 50%;
    border-width: 3px;
    border-color:#F2635D;
    font-size:1.2vw;
    line-height: 2vw;
    background-color:white;
}

.rectangleBorder2 {
    width: 3px;
    height: 1.5vw;
    background-color: #F2635D;
    margin-left: 1.5vw;
}
#pp-trans-cta1:after{
    content: 'Payroll Dashboard';
    white-space:nowrap;
    top: 10%;
    position: absolute;
    width: 400%;
    font-size: 1.2vw;
    color: #000;
    text-align: left!important;
    margin-left: 2vw;
}
#pp-trans-cta2:after{
    content: 'Process Payroll';
    white-space:nowrap;
    top: 10%;
    position: absolute;
    width: 400%;
    font-size: 1.2vw;
    color: #000;
    text-align: left!important;
    margin-left: 2vw;
}
#pp-trans-cta3:after{
    content: 'General Ledger';
    white-space:nowrap;
    top: 10%;
    position: absolute;
    width: 330%;
    font-size: 1.2vw;
    color: #000;
   text-align: left!important;
   margin-left: 2vw;
}
#me-trans-cta1:after{
    content: 'Employee Self-Service';
    white-space:nowrap;
    top: 10%;
    position: absolute;
    width: 330%;
    font-size: 1.2vw;
    color: #000;
    text-align: left!important;
    margin-left: 2vw;
}
#me-trans-cta2:after{
    content: 'Manager Self-Service';
    white-space:nowrap;
    top: 10%;
    position: absolute;
    width: 330%;
    font-size: 1.2vw;
    color: #000;
    text-align: left!important;
    margin-left: 2vw;
}
#nh-trans-cta1:after{
    content: 'Phase 1';
    white-space:nowrap;
    top: 10%;
    position: absolute;
    width: 800%;
    font-size: 1.2vw;
    color: #000;
    text-align: left!important;
    margin-left: 2vw;
}
#nh-trans-cta2:after{
    content: 'Phase 2';
    white-space:nowrap;
    top: 10%;
    position: absolute;
    width: 400%;
    font-size: 1.2vw;
    color: #000;
    text-align: left!important;
    margin-left: 2vw;
}
#nh-trans-cta3:after{
    content: 'Phase 3';
    white-space:nowrap;
    top: 10%;
    position: absolute;
    width: 600%;
    font-size: 1.2vw;
    color: #000;
   text-align: left!important;
   margin-left: 2vw;
}

.rectangleBorderWide {
    width: 10.8vw;
    height: 3vw;
    border-bottom: 3px solid #F2635D;
    margin-bottom:2em;
}

.rectangleBorderWide_eo6 {
    width: 16vh!important;
    height: 3vw;
    border-bottom: 3px solid #F2635D;
    margin-bottom:2em;
}


.conectorText {
    font-size:1.1vw;
    font-family:'ProximaNova-Regular';
    width: 11.5vw; /*Remember to update this value in main.js SetSeparatorWidth() too*/
    height: 4vw;
}

.separator {
    width:24vh;
    /*background-color:gray;*/
}

.circleActive {
    color:white;
    background-color:#F2635D;
}

.rightEntry {
    animation-name: rightIn;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes rightIn {
    from {left: 100%}
    to {left: 0}
}

.rightExit {
    animation-name: rightOut;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes rightOut {
    from {left:0}
    to {left:100%}
}

.leftEntry {
    animation-name: leftIn;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes leftIn {
    from {left: -100%}
    to {left: 0}
}

.leftExit {
    animation-name: leftOut;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes leftOut {
    from {left:0}
    to {left:-100%}
}

.fadeIn {
    animation-name: FadeIn;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

@keyframes FadeIn {
    from {opacity:0}
    to {opacity:1}
}

.fadeOut {
    animation-name: FadeOut;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

@keyframes FadeOut {
    from {opacity:1}
    to {opacity:0}
}


.childRightEntry {
    animation-name: innerRightIn;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes innerRightIn {
    0% {left:0em;}
    40% {left:6em}
    100% {left:0em}

}

.childRightExit {
    animation-name: innerRightOut;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes innerRightOut {
    0% {left:0em;}
    40% {left:-10em}
    100% {left:0em}

}



.bolder-text {
    font-weight: bolder;
}

.navControl {
    text-align: center;
    justify-content:center;
    align-items:center;
    width:2.5vw;
    height: 2.5vw;
    display: flex;
  /*  padding: 0.5em 0.5em;
    margin:1em, 1em!important;*/
    border-radius: 50%;
    background-color:rgba(0,0,0,0);
    color:#F2635D;
    cursor: pointer;
}

.navControl2 {
    text-align: center;
    justify-content:center;
    align-items:center;
    width:2.5vw;
    height: 2.5vw;
    display: flex;
    /*padding: 0.5em 0.5em;
    margin:1em, 1em!important;*/
    border-radius: 50%;
    background-color:rgba(0,0,0,0);
    color:#CECECE;
    cursor: pointer;
}

.navControl:hover {
    background-color:#FF635D;
    color:white;
}
.tippy-tooltip.ADP-theme {
  /* Your styling here. Example: */
  background-color: #FF635D!important;
}
.tippy-tooltip.ADP-theme [x-arrow] {
  /* Your arrow styling here. */
  border-top-color: #FF635D !important;
}

.tippy-tooltip.ADP-theme [y-arrow] {
  /* Your arrow styling here. */
  border-left-color: #FF635D !important;
}

.tippy-tooltip.ADP-theme .tippy-tooltip-content {
  /* Your styling here. Example: */
  color: white;
}

/* Right placement tooltip arrow (arrow will be on left side of tooltip) */
.tippy-popper[x-placement^=right] .tippy-tooltip.ADP-theme .tippy-arrow {
    border-right: 17px solid green
}


/*MODAL DE CONFIDENCIALIDAD*/
.overlay-modal-cf{
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 100;
}
/*.modal-cf-body{
    padding: 3vh 3vh;
    width: 91vh;
    height: 55vh;
    background: #ffffff;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 101;
    margin: auto;
}
.modal-cf-title{
    font-family: 'TaubSansLight';
    font-size: 3.5vh;
    border-bottom: 2px solid #979797;
    padding: 2.5vh 0vh;
}
.modal-cf-textcontent{
    font-family:'TaubSans-Regular';
    font-size: 2.2vh;
    padding: 3.5vh 0vh;
    border-bottom: 2px solid #979797;
}
.modal-cf-btn-agree{
    background-color: #FF635C!important;
    border-radius: 2em;
    border-width: 0;
    width: 20%;
    line-height:1!important;
    height:4vh;
    outline:none !important;
    outline-width: 0 !important;
    font-size: 1.2vw!important;
    padding: 0.1rem 1rem!important;
    font-family: 'TaubSansBold';
}*/

.modal-cf-btn-agree:hover{
    background-color: #ffffff!important;
    color: #FF635C!important;
    border: 1px solid #FF635C!important;
}  
/*  
.modal-cf-btn-cancel{
    background-color: transparent;
    border-radius: 2em;
    border-width: 0;
    height:4vh;
    width: 20%;
    outline:none !important;
    outline-width: 0 !important;
    font-size: 1.2vw!important;
    padding: 0.1rem 1rem!important;
    outline: none;
}*/
.modal-cf-btn-cancel:hover{
   text-decoration: underline;
}





strong{
    font-weight: inherit!important;
}

/*#circle1:after{
    content: 'Paydata Batch';
    top: 10%;
    position: absolute;
    width: 330%;
    font-size: 1.2vw;
    color: #000;
    text-align: left!important;
    margin-left: 2vw;
}
#circle2:after{
    content: 'Payroll Cycle';
    top: 10%;
    position: absolute;
    width: 330%;
    font-size: 1.2vw;
    color: #000;
    text-align: left!important;
    margin-left: 2vw;
}
#circle3:after{
    content: 'Process Payroll';
    top: 10%;
    position: absolute;
    width: 330%;
    font-size: 1.2vw;
    color: #000;
   text-align: left!important;
   margin-left: 2vw;
}
#circle4:after{
    content: 'General Ledger';
    top: 10%;
    position: absolute;
    width: 330%;
    font-size: 1.2vw;
    color: #000;
    text-align: left!important;
    margin-left: 2vw;
}
*/
#circle1-eo:after{
    content: 'Welcome';
    top: 10%;
    position: absolute;
    width: 330%;
    font-size: 1.2vw;
    color: #000;
    text-align: left!important;
    margin-left: 2vw;
}
#circle2-eo:after{
    content: 'Personalization';
    top: 10%;
    position: absolute;
    width: 330%;
    font-size: 1.2vw;
    color: #000;
    text-align: left!important;
    margin-left: 2vw;
}
#circle3-eo:after{
    content: 'First Day';
    top: 10%;
    position: absolute;
    width: 330%;
    font-size: 1.2vw;
    color: #000;
   text-align: left!important;
   margin-left: 2vw;
}

/*.rectangleBorderWide {
    width: 27vh;
    height: 3vw;
    border-bottom: 3px solid #F2635D;
    margin-bottom:2em;
}*/
/*
.conectorText {
    width: 8vw;
    height: 4vw;
    font-size:1.1vw;
}*/

/*.separator {
    width:24vh;
    /*background-color:gray;
}*/

.circleActive {
    color:white;
    background-color:#F2635D;
}

.rightEntry {
    animation-name: rightIn;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes rightIn {
    from {left: 100%}
    to {left: 0}
}

.rightExit {
    animation-name: rightOut;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes rightOut {
    from {left:0}
    to {left:100%}
}

.leftEntry {
    animation-name: leftIn;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes leftIn {
    from {left: -100%}
    to {left: 0}
}

.leftExit {
    animation-name: leftOut;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes leftOut {
    from {left:0}
    to {left:-100%}
}








.fadeIn {
    animation-name: FadeIn;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

@keyframes FadeIn {
    from {opacity:0}
    to {opacity:1}
}

.fadeOut {
    animation-name: FadeOut;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

@keyframes FadeOut {
    from {opacity:1}
    to {opacity:0}
}

.fadeIn1s {
    animation-name: FadeIn1s;
    animation-duration: 1.0s;
    animation-fill-mode: forwards;
}

@keyframes FadeIn1s {
    from {opacity:0}
    to {opacity:1}
}

.fadeOut1s {
    animation-name: FadeOut1s;
    animation-duration: 1.0s;
    animation-fill-mode: forwards;
}

@keyframes FadeOut1s {
    from {opacity:1}
    to {opacity:0}
}


.childRightEntry {
    animation-name: innerRightIn;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes innerRightIn {
    0% {left:0em;}
    40% {left:6em}
    100% {left:0em}

}

.childRightExit {
    animation-name: innerRightOut;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes innerRightOut {
    0% {left:0em;}
    40% {left:-10em}
    100% {left:0em}

}

span.demo-hotspot-i2 {
    width: 1.5vw;
    height: 1.5vw;
    position: absolute;
    cursor: pointer;
    left: 0px;
    top: 0px;
    border-radius: 50%;
    /* background: #ffffff; */
     background-size: cover;
    background-image: url(../assets/images/svg/i2.svg);
    background-position: center center; 
    z-index: 8;
}

.indicator-parent div.infoIndicator {
    position:absolute;
    width: auto;
    background-color: #F2635D;
    white-space: nowrap;
    border-radius:0.3em;
   /* box-shadow: 10px 10px 20px rgba(64,64,64,1);*/
    color: white!important;
    padding:5px 10px;
    font-family:'ProximaNova-Regular-Italic';
    z-index:6;
    display:none;
    left:40px;
    top:0;
    font-size:1vw;
    opacity:0;
    
    font-style: italic;
    /*transition: opacity 1.33s linear;*/
}
.listDemo {
  /*list-style-type: none;*/
  margin:0 0 1vw 0;
  /*padding:0.5em;*/
}

.redText {
    color:#FF635C;
}

.infoIndicator > ul {
  list-style-type: none;
  margin:0;
  padding:0.5em;
}
.indicator-parent:hover div.infoIndicator {
    display:block;
    opacity:1;
    animation-name:infoIndicator;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
@keyframes infoIndicator{
    from {opacity:0}
    to {opacity:1}
}
.bolder-text {
    font-weight: bolder;
}
.tippy-tooltip.ADP-theme {
  /* Your styling here. Example: */
  background-color: #FF635D!important;
  
}
.tippy-tooltip.ADP-theme [x-arrow] {
  /* Your arrow styling here. */
  border-top-color: #FF635D !important;
}
.tippy-tooltip.ADP-theme .tippy-tooltip-content {
  /* Your styling here. Example: */
  color: white;
}

.menu-container > .tippy-tooltip.ADP-theme .tippy-tooltip-content {
  /* Your styling here. Example: */
  font-size:2vw!important;
}


.tippy-popper[x-placement^="right"] .tippy-tooltip.ADP-theme [x-arrow] {
    border-right: 7px solid #FF635D;
    border-top: 7px solid transparent!important;
    border-bottom: 7px solid transparent!important;
}
/*MODAL DE CONFIDENCIALIDAD*/
.overlay-modal-cf{
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(250,250,250,1);
    z-index: 100;
}
.modal-cf-body{
    padding: 3vw;
    border-radius: 0.5em;
    width: 120vh;
    height: auto;
    background: #ffffff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* right: 0; */
    /* bottom: 0; */
    z-index: 101;
    margin: auto;
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    
    
}



.modal-cf-body-retirement{
    padding: 3vw;
    border-radius: 0.5em;
    width: 120vh;
    height: auto;
    background: #ffffff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* right: 0; */
    /* bottom: 0; */
    z-index: 101;
    margin: auto;
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

#overlay-modal-cf{
    /*display: none; */
}

#modal-cf-body{
    /*display: none; */
}
.modal-cf-title{
    font-family: 'TaubSansLight';
    font-size: 3.5vh;
    border-bottom: 2px solid #979797;
    padding: 1vw 0vw;
}
.modal-cf-textcontent{
    font-family:'TaubSans-Regular';
    font-size: 2.2vh;
    padding: 2vw 0vw;
    border-bottom: 2px solid #979797;
}
.modal-cf-btn-agree{
    background-color: #FF635C!important;
    border-radius: 2em;
    border-width: 0;
    width: 20%;
    line-height:1!important;
    height:5vh;
    outline:none !important;
    outline-width: 0 !important;
    font-size: 1.1vw!important;
   /* padding: 1vh!important;*/
    font-family: 'TaubSansBold';
}
.modal-cf-btn-cancel{
    background-color: transparent;
    border-radius: 2em;
    border-width: 0;
    height:5vh;
    width: 20%;
    outline:none !important;
    outline-width: 0 !important;
    font-size: 1.1vw!important;
   /* padding: 1vh!important;*/
    outline: none;
}
.modal-cf-btn-cancel:hover{
   text-decoration: underline;
}



/*CTA HOVER EFECT*/
.CTA-hover:hover{
    background-color:#ffffff!important;
    color:#FF635C!important;
    border:1px solid #FF635C!important;
}
.CTA-hover-transition:hover{
    /*background-color:#FF635C!important;
    color:#fff!important;
    border:3px solid #FF635C!important; */
    cursor: default;
}
.CTA-next-workflow{
    font-size:1.5vw; cursor:pointer;font-family: 'TaubSansBold'; color: #FF635C!important;
    line-height: 1.7;border-radius: 4rem;border:1px solid #FF635C!important;
    padding: .375rem .75rem;
}
.CTA-next-workflow:hover{
    background:#FF635C!important;
    color: #fff!important;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

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

.loading {
    position:absolute;
    top:125%;
    left:50%;
    padding:5vh 0 0 5vh;
    transform: translate(-50%, -50%);
}

.textNoWrap {
    white-space: nowrap;
}

.col-20-porcent{
    flex: 0 0 20%;
    max-width: 20%;
    padding-right: 15px;
    padding-left: 15px;
}

.fadeInCongratulations {
    opacity: 0;
    animation-name: FadeInCon;
    animation-duration: 3s;
    animation-fill-mode: forwards;
}

@keyframes FadeInCon{
    from {opacity:0}
    to {opacity:1}
}

.hideScrollBar::-webkit-scrollbar {
  display: none;
}

.hideScrollBar {
    -ms-overflow-style: none;
}

@-moz-document url-prefix() {
    .hideScrollBar {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
}

.pg-letter-space {
    letter-spacing: -1px;
}

.modal-resume-body {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-52%, -50%) !important;
    background: #ffffff;
    display:block;
    width:39vw;
   /* height:17vw;*/
    padding:0vw 1.5vw;
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    border-radius: 0.5em;
}
.resume-modal-overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.5);
}
.modal-resume-textcontent{
    padding: 2.5vw 0vw;
    border-bottom: 2px solid #979797;
}
.btn-resume{
    background-color: #FF635C!important;
    border-radius: 2em;
    border-width: 0;
    width: 20%;
    line-height: 1!important;
    height: 3vw;
    outline: none !important;
    outline-width: 0 !important;
    font-size: 1.1vw!important;
    padding: 1vw!important;
    font-family: 'TaubSansBold';
}
.btn-no{
    background-color: transparent;
    border-radius: 2em;
    border-width: 0;
    height: 3vw;
    width: 20%;
    outline: none !important;
    outline-width: 0 !important;
    font-size: 1.1vw!important;
    padding: 1vw!important;
    outline: none; 
    line-height: 1!important;
}
.btn-no:hover {
    text-decoration: underline;
}
.btn-resume:hover {
    background-color: #ffffff!important;
    color: #FF635C!important;
    border: 1px solid #FF635C!important;
}

#popup-infobox-Container{
    position: absolute;
    z-index: 8;
    margin: 0;
    padding: 2vw;
    background: white;
    /*border: 1px solid #FF635C!important;*/
    border-radius: 0.5vw;
    display:none;
    box-shadow: 5px 5px 8px 5px rgba(100,100,100,0.3);
    /*transform: translate(-50%,-50%);*/
    top: 50%;
    left: 50%;
}

#popup-infobox-Container3{
    position: absolute;
    z-index: 8;
    margin: 0;
    padding: 1vw;
    background: white;
    /*border: 1px solid #FF635C!important;*/
    border-radius: 0.5vw;
    display:none;
    box-shadow: 5px 5px 8px 5px rgba(100,100,100,0.3);
    /*transform: translate(-50%,-50%);*/
    top: 0%;
    left: 5%;
}

@-webkit-keyframes zoomOut {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }
    to {
        opacity: 0;
    }
}
@keyframes zoomOut {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }
    to {
        opacity: 0;
    }
}
.animate__zoomOut {
    -webkit-animation-name: zoomOut;
    animation-name: zoomOut;
}
@-webkit-keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }
    50% {
        opacity: 1;
    }
}
@keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }
    50% {
        opacity: 1;
    }
}
.animate__zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
}
.animate__animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-duration: var(--animate-duration);
    animation-duration: var(--animate-duration);
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@media (min-width: 3000px){
    #loading{
        transform: scale(2.5);
    }
    .modal-video-body {
        max-width: 1290px!important;
    }
    .cc-revoke, .cc-window {
        font-size: 1vw!important;
    }

.autoplayPointer {
    width: 1.2vw!important;

}
.line-box{
    margin-bottom: 1vw;
    display: flex;
	align-items: center;
	justify-content: center;
}
.box{
    height: 0.5vw;
    width: 0.5vw;
    background-color: #FF635C!important;
    display: inline-block;
    margin:0.2vw;
}
.box-medium{
    height: 0.3vw;
    width: 0.3vw;
    background-color: #FF635C!important;
    display: inline-block;
    margin:.2rem;
}
.box-small{
    height: 0.1vw;
    width: 0.1vw;
    background-color: #FF635C!important;
    display: inline-block;
    margin:.2rem;
}

}

@media only screen and (min-aspect-ratio: 2/1) {

}

/*@media only screen and (max-width:1290px) and  (max-height:565px) and  (min-height:500px){
    .demoCard img {
        width: 80%;
    }
    .demoCard .img-phone {
        width: 27%;
    }
    .demoCard {
        width: 21vw;
        padding: 2vw;
    }
    .demoCard p {
        font-size: 1.2vw;
    }
    .demoCard {
        height: 31vw;
    }
}*/

@media only screen and (min-aspect-ratio: 1.30/1) and (max-aspect-ratio: 1.35/1) {
    .home-grid2 {
        grid-template-rows: 10% 45% 45%;
    }
}


.animFadeOut2 {
    animation-name: animFadeOut2;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}

@keyframes animFadeOut2 {
  from  {opacity: 0;}
  to {opacity: 1;}
}

.animFadeIn2 {
    animation-name: animFadeIn2;
    animation-duration: 1.5s;
    animation-delay:1s;
    animation-fill-mode: forwards;
}

@keyframes animFadeIn2 {
  from  {opacity: 1;}
  to {opacity: 0;}
}

@media only screen and (max-aspect-ratio: 7/5) {
  .demoCard {
 
        height: 70%!important;
     
    }
    
    .tittle-adp {
        margin-bottom: 8vw!important;
        
    }

}

@media only screen and (max-width: 1100px) and (min-height: 600px){
    .modal-cf-body{
        width: 100vh !important;
    }   
}

:root {
      --color-light: white;
      --color-dark: #212529;
      --color-signal: #FF635C;
      --color-background: var(--color-light);
      --color-accent: var(--color-signal);
      --size-bezel: 0.5rem;
      --size-radius: 4px;
    }
.input {
    position: relative;
}

.input__label {
    position: absolute;
    left: 10px;
    top: 0;
    padding: calc(var(--size-bezel) * 0.75) calc(var(--size-bezel) * 0.5);
    margin: calc(var(--size-bezel) * 0.75 + 3px) calc(var(--size-bezel) * 0.5);
    background: pink;
    white-space: nowrap;
    transform: translate(0, 0);
    transform-origin: 0 0;
    background: var(--color-background);
    transition: transform 120ms ease-in;
    font-size: 2.2vh;
    line-height: 1.2;
    font-family: 'TaubSans-Regular';
}

.input__field {
    box-sizing: border-box;
    display: block;
    width: 100%;
    border: 3px solid #979797;
    padding: calc(var(--size-bezel) * 1.5) var(--size-bezel);
    color: #212529;
    background: transparent;
    border-radius: var(--size-radius);
    text-align: center;
    font-size: 2.2vh;
    font-family: 'TaubSans-Regular';
}

.input__field:not(:-moz-placeholder-shown)+.input__label {
    transform: translate(0.25rem, -65%) scale(0.8);
    color: var(--color-accent);
}

.input__field:not(:-ms-input-placeholder)+.input__label {
    transform: translate(0.25rem, -65%) scale(0.8);
    color: var(--color-accent);
}

.input__field:focus+.input__label,
.input__field:not(:placeholder-shown)+.input__label {
    transform: translate(0.25rem, -65%) scale(0.8);
    color: var(--color-accent);
}

.change-step-control {
    outline: none;
    background-color: rgb(242, 242, 242);
    color: #F2635D;
    box-shadow: 0 0 0 0.1vw #F2635D;
    border: none;
    border-radius: 3px;
    font-size: 1vw;
    width: 3vw;
    bottom: -.75vw;
    top: auto;
    transition: transform .25s;
    transform-origin: center bottom;
    z-index: 1000;

    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background: rgb(242, 242, 242);
    background-image: url("data:image/svg+xml;utf8,<svg fill='rgb(242, 99, 93)' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position-x: 100%;
    background-position-y: 50%;
    background-size: 1.5vw;
    padding-left: .5vw;
}

.change-step-control:disabled {
    box-shadow: 0 0 0 2px #CECECE;
    color: #CECECE;
}

.change-step-control:focus {

}

.change-step-control::-webkit-scrollbar {
  width: .65vw;
  height: 1.5vw;
}

.change-step-control::-webkit-scrollbar-track {
  border: none;
  background-color: transparent;
}

.change-step-control::-webkit-scrollbar-thumb {
  background-color: #D9D9DA;
  border: 1px solid transparent;
  border-radius: 7px;
}

.change-step-control option:checked,
.change-step-control option:focus,
.change-step-control option:active,
.change-step-control option:hover {
  background: #F2635D -webkit-linear-gradient(bottom, #F2635D 0%, #F2635D 100%);
  color: #fff;
}
.change-step-control option {
    font-size: 1vw;
    padding-top: .25vw .15vw;
}

.progressbar-section {
     width: 100%;
     height:100%;
     position:relative;
 }
 
 .progressbar-item {
     position:relative;
     /*background-color:#FF635C;*/
     /*border-radius: 2em;*/
     width:100%;
     height:0.55vh;
     margin-top: 0.2vh;
     cursor:pointer;
     /*left:0%;*/
 }
 
  .progressbar:before{
    content: "";
    height: 0.25vh;
    width: 100%;
    background: #FF635C;
    display: block;
    position: absolute;
    left: 0;
    top:12%;
 }
 
 .progressbar-s:before{
    content: "";
    height: 0.25vh;
    width: 97%;
    background: #FF635C;
    display: block;
    position: absolute;
    left: 0;
    top:12%;
 }
 
 .progressbar-item-name > div {
     font-family: 'TaubSans-Light';
     font-size:1vw;
     color:rgb(150,150,150);
     text-align: center !important;
     user-select: none;
 }
 
 .progressbar-active {
     /*font-family:'TaubSans-Bold'!important;*/
     /*font-weight: 600;*/
     color:rgb(0,0,0)!important;
 }