#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:-60%;}
    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: #eaeaea;
    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;
    width: 45vw;
    height: 39.464vw;
    z-index: 0;
}


.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-image: url(../assets/images/svg/demobg.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #1c224d;
    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;*/
}
.home-grid {
    width:100vw;
    height: 100vh;
    padding: 6vh 0 0 5vh; 
    /*background-image: url('../assets/images/svg/homeleftbg.svg');
    background-size: cover;
    background-repeat: no-repeat;*/
    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows: 10% 80% 10%;
    grid-template-areas: "logohome"
                        "homemain"
                        "homefooter";
}

.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: 89.4%;*/
/*    animation-name: child2;*/
/*    animation-duration:1s;*/
/*}*/

/*.menu-container:nth-child(3) {*/
/*    top: 67%;*/
/*    animation-name: child3;*/
/*    animation-duration:0.75s;*/
/*}*/

/*.menu-container:nth-child(4) {*/
/*    top: 45%;*/
/*    animation-name: child4;*/
/*    animation-duration:0.5s;*/
/*}*/

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

/*@keyframes child2 {*/
/*    from {top : 14em}
    to {top:14em}*/
/*    0%   {top:89.4%;}*/
/*    25%   {top:67%;}*/
/*    50%  {top:45%;}*/
/*    75% {top:22.3%;}*/
/*    100% {top:0%;}*/
/*}*/

/*@keyframes child3 {*/
    /*from {top : 10em}
    to {top:10em}*/
/*    0%   {top:67%;}*/
/*    33.33%   {top:45%;}*/
/*    66.66%  {top:22.3%;}*/
/*    100% {top:0%;}*/
/*}*/

/*@keyframes child4 {*/
    /*from {top : 5em}
    to {top:5em}*/
/*    0%   {top:45%;}*/
/*    50%  {top:22.3%;}*/
/*    100% {top:0%;}*/
/*}*/

/*@keyframes child5 {*/
/*    from {top : 22.3%;}*/
/*    to {top:0%;}*/
/*}*/

.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;
}

@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;}
}

.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;}
}


.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: 'Global HR System of Record';
    white-space:nowrap;
    top: 10%;
    position: absolute;
    width: 600%;
    font-size: 1.2vw;
    color: #000;
    text-align: left!important;
    margin-left: 2vw;
}
#nh-trans-cta2:after{
    content: 'Capturing Global Data';
    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: 'Global Onboarding Experience';
    white-space:nowrap;
    top: 10%;
    position: absolute;
    width: 800%;
    font-size: 1.2vw;
    color: #000;
   text-align: left!important;
   margin-left: 2vw;
}
#pp-trans-cta1:after{
    content: 'Payroll Dashboard';
    white-space:nowrap;
    top: 10%;
    position: absolute;
    width: 800%;
    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: 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: "proxima-nova", sans-serif;
    font-weight: 400;
    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;
}
.fa-volume-mute{
   /* color: lightgray;*/
}
.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: "proxima-nova", sans-serif;
    font-weight: 400;
    font-style: 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 0.2em 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: 91vh;
    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; 
}
.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);
}
.overlay-modal-cf.home{
    background-color: rgba(250,250,250,0.85);
    display:none;
}
.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;*/
    /*padding: 2vw;*/
    padding: 1.2vw 1.2vw 1vw 1.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;
    max-width:30vw;
    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;
}
.video-overlay{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99;
    background-color: rgba(0,0,0,0.5);
    display: none;
}

.popupConector3Left {
    text-align: left;
    border-left: 0.2vw solid #FF635C;
    padding-left: 1vw;    
}

.popupConector3Right {
    text-align: right;
    border-right: 0.2vw solid #FF635C;
    padding-right: 1vw;    
}
@media (min-width: 3000px){
.cc-revoke, .cc-window {
    font-size: 1vw!important;
}
    
}

/*PAY ANITYME TRANSITION NAMES*/
.circle-data:after{
    content: attr(data-after);
    top: 10%;
    white-space:nowrap;
    position: absolute;
    width: 400%;
    font-size: 1.2vw;
    color: #000;
    text-align: left!important;
    white-space:nowrap;
    margin-left: 2vw;
}

 /*Progress Bar*/
 
 .progressbar-container {
     position: absolute;
     /*height: 12vh;*/
     top:0px;
     z-index:9;
     background-color:#EBEBEB;
     /*box-shadow: 0px -5px 10px rgba(94,94,94,0.3);*/
     
 }
 
 .progressbar-button {
     position:relative;
     top:-0.5vh;
     /*left: 94.5vw;*/
     width:100%;
     font-size:1.5vh;
     cursor:pointer;
     margin-bottom:0.5em;
 }
 
 .progressbar-container.hideProgressbar {
    animation-name: progressbarHide;
    animation-duration:1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
 }
 
 .progressbar-container.showProgressbar {
    animation-name: progressbarShow;
    animation-duration:1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
 }
 
 @keyframes progressbarHide {
     from {bottom:0;}
     to {bottom:-9.8vh;}
 }
 
 @keyframes progressbarShow {
     from {bottom:-9.8vh;}
     to {bottom:0;}
 }
 
 .progressbar {
   /* background-color:#CBD0D8;*/
    height: 1vh;
    border-radius: 2em;
 }
 
  .progressbar-s {
   /* background-color:#CBD0D8;*/
    height: 1vh;
    border-radius: 2em;
 }
 
  .progressbar-eo {
   /* background-color:#CBD0D8;*/
    height: 1vh;
    border-radius: 2em;
 }
 
 .progressbar-section {
     width: 100%;
     position:relative;
 }
 
 .progressbar-item {
     position:relative;
     /*background-color:#FF635C;*/
     /*border-radius: 2em;*/
     width:100%;
     height:0.55vh;
     margin-top: .25vh;
     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-eo:before{
    content: "";
    height: 0.2vh;
    width: 100%;
    background: #FF635C;
    display: block;
    position: absolute;
    left: 0;
    top:13%;
 }
 
 .line-left:before{
     content: "";
     height:80%;
     width:0.1vw;
     background:#595959;
     position:absolute;
     right:0;
 }
 .progressTitle {
     font-family:'TaubSans-Medium';
     font-size: 2vw;
     color:#FF635C;
     margin-top:-1.7vh;
 }
 .progressText {
     font-family:'TaubSans-Light';
     font-size:1.2vw;
     width:20%;
     line-height: initial;
 }
 
 .progressbar-item-name > div {
     font-family: 'TaubSans-Light';
     font-size:1.09vw;
     color:rgb(150,150,150);
 }
 
 .progressbar-active {
     /*font-family:'TaubSans-Bold'!important;*/
     /*font-weight: 600;*/
     color:rgb(0,0,0)!important;
 }
.home-anim-title {
    opacity: 0;
    animation-name: home-anim-title;
    animation-delay: 3.5s;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}
.progressbar-item-mobile {
    position: relative;
    width: 63.75%;
    height: 14%;
    margin-top: .3vh;
    cursor: pointer;
}
: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);
}