#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: 70%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 8;
}

@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: #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;
    /*keep the same image aspect ratio*/
    width: 45vw;
    height: 39.464vw;
    z-index: 0;
    /*top:10vh;*/
}


.demohomebg {
    position:absolute;
    top:0;
    right:50%;
    width:100%;
    height: 100%;
    background-image: url('../assets/images/svg/Index-Slide-Image.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/index-shape-background.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-color:var(--primary-color);
    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"
                        "footer-page";
}

.demoCard img{
    width: 65%;
}

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

.demoCard h2{
  font-family: 'TaubSansHeavy';
  font-size: 2vw;
  line-height: 1.1em;
  margin-bottom: 1vw;
  text-align: center;
  color:var(--primary-color);
}


.home-grid2 {
    width:100vw;
    height: 100vh;
    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows: 13% 70% 17%;
    grid-template-areas: "logohome"
                        "homemain"
                        "footer-page";
}
.demoCardsContainer {
    display: flex;
    padding: 2vw 15vw 0vw 15vw;
    justify-content: center;
}



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

.logohome {
    grid-area: logohome;
}

.homemain {
    grid-area: homemain;
}

.homefooter {
    grid-area: homefooter;
}

.logoadp-transition{
    position:absolute;
    grid-area: logohome;
    width:18%;
    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.5s;
}

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

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

.menu-container:nth-child(6) {
    top: 19%;
    animation-name: child5;
    animation-duration:0.20s;
}*/

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

@keyframes child2 {
    0%   {top:94%;}
    20%   {top:74%;}
    40%  {top:56%;}
    60% {top:37%;}
    80% {top:19%;}
    100% {top:0%;}
}

@keyframes child3 {
    0%   {top:74%;}
    25%   {top:56%;}
    50%  {top:37%;}
    75% {top:19%;}
    100% {top:0%;}
}

@keyframes child4 {
        0%   {top:56%;}
    33.33%   {top:37%;}
    66.66%  {top:19%;}
    100% {top:0%;}
}
@keyframes child5 {
    0%   {top:37%;}
    50%  {top:19%;}
    100% {top:0%;}
}

@keyframes child6 {
    from {top : 19%;}
    to {top:0%;}
}

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

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

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

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

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

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

@keyframes child4_3 {
    from  {top:30%;}
    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;
}

@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 {
    from {top : 22%;}
    to {top:0%;}
}

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

.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:#f15c22;
    /*border-color:#F2635D;*/
    font-size:2vw;
    line-height: 2vw;
    background-color:white;
    color:#f15c22;
}

.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: #f15c22;
    /*border-color:#F2635D;*/
    font-size:1.2vw;
    line-height: 2vw;
    background-color:white;
}

.rectangleBorder2 {
    width: 3px;
    height: 1.5vw;
    background-color: #f15c22;
    /*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;*/
    border-bottom: 3px solid #f15c22;
    margin-bottom:2em;
}

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


.conectorText {
    font-size:1.09vw;
    font-family: "proxima-nova", sans-serif;
    font-weight: 400;
    font-style: normal;
    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;
}

.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;}
}
.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:var(--primary-color);
    /*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;*/
    background-color:var(--primary-color);
    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: #F15C22!important;
    border: 1px solid #F15C22!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;
}

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

.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;
    
    /*transition: opacity 1.33s linear;*/
}
.listDemo {
  /*list-style-type: none;*/
  margin:0 0 0.5vw 0;
  /*padding:0.5em;*/
  color:#54565a;
}

.redText {
   color:var(--primary-color)!important;
}


.orangeText {
    color:#222222;
}
.orangeText-popup{
    color:var(--primary-color);
}
.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}
}

/*START HOVER TEXT ARROW PROGRESS BAR*/
.bolder-text {
    font-weight: bolder;
}

.tippy-tooltip.ADP-theme {
    /* Your styling here. Example: */
    background-color: var(--primary-color) !important;

}

.tippy-tooltip.ADP-theme [x-arrow] {
    /* Your arrow styling here. */
    border-top-color: var(--primary-color) !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;
}
/*END HOVER TEXT ARROW PROGRESS BAR*/

/*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 #222222;
    padding: 1vw 0vw;
}
.modal-cf-textcontent{
    font-family:'TaubSans-Regular';
    font-size: 2.2vh;
    padding: 2vw 0vw;
    border-bottom: 2px solid #54565a;
}
.modal-cf-btn-agree{
    background-color: #F15C22!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;
    color: #000;
}
.modal-cf-btn-cancel:hover{
   text-decoration: underline;
}



/*CTA HOVER EFECT*/
.CTA-hover:hover{
    background-color:#ffffff!important;
    color:#F15C22!important;
    border:1px solid #F15C22!important;
}
.CTA-hover-transition:hover{
    background-color:#f15c22!important;
    color:#fff!important;
    border:3px solid #f15c22!important;
    cursor: pointer;
}
.Active-Circle{
    background-color: var(--primary-color)!important;
    color: #fff!important;
    border: 3px solid var(--primary-color)!important;
    cursor: pointer;    
}
.CTA-next-workflow{
    font-size:1.5vw; cursor:pointer;font-family: 'TaubSansBold'; color: var(--primary-color)!important;
    line-height: 1.7;border-radius: 4rem;border:1px solid var(--primary-color)!important;
    padding: .375rem .75rem;
}
.CTA-next-workflow:hover{
    background:var(--primary-color)!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: var(--primary-color)!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: var(--primary-color)!important;
    border: 1px solid var(--primary-color)!important;
}

#popup-infobox-Container{
    position: absolute;
    z-index: 8;
    margin: 0;
    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;
    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;
}

.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 (min-width: 3000px){
    #loading{
        transform: scale(2.5);
    }
    .modal-video-body {
        max-width: 1290px!important;
    }
    
    .cc-revoke, .cc-window {
        font-size: 24px!important;
    }
}

@media (min-width: 2500px){
    .autoplayPointer{
        width: 1.4vw!important;
    }
}

@media (min-width: 3000px){
    .autoplayPointer{
        width: 1.2vw!important;
    }
}

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


.line-left::before {

    content: "";
    height: 80%;
    width: .1vw;
    background: #595959;
    position: absolute;
    right: 0;

}


/*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%;
     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: var(--primary-color);
    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:#54565a;
 }
 
 .progressbar-active {
     /*font-family:'TaubSans-Bold'!important;*/
     /*font-weight: 600;*/
     color:#222222!important;
 }