@font-face {
    font-family: TypoRound;
    font-weight: lighter;
    src: url("/beneficios/assets/portalPagga/fonts/Typo_Round_Light_Demo.otf") format("opentype");
}

@font-face {
    font-family: TypoRound;
    font-weight: bold;
    src: url("/beneficios/assets/portalPagga/fonts/Typo_Round_Bold_Demo.otf") format("opentype");
}

.typo{
    font-family: TypoRound;
    font-weight: lighter;
}

.typo-bold{
    font-family: TypoRound;
    font-weight: bold;
}

.slick-dots{
    bottom: -40px;
}

.slick-dots li{
    border: 2px solid orange!important;
    border-radius: 50px;
}

.slick-dots li.slick-active{
    background-color: orange!important;
    border-radius: 50px;
}

#home_content {
    background-image: url('/beneficios/assets/portalPagga/imagesSite/forma.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;

}

#features {
    background-image: url('/beneficios/assets/portalPagga/imagesSite/2/1.png');
    background-repeat: no-repeat;
    background-size: contain;
    min-height: 90vh;
}

#features .col {
    background-image: url('/beneficios/assets/portalPagga/imagesSite/2/2.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 460px;
}

#confianca {
    background-image: url('/beneficios/assets/portalPagga/imagesSite/5/1-background.png');
    background-repeat: no-repeat;
    background-size: 100%;
    min-height: 70vh;
}

#ebook {
    background-image: url('/beneficios/assets/portalPagga/imagesSite/12/back.png');
    background-repeat: no-repeat;
    background-size: cover;
}



.bg-gray-light {
    background-color: #efefef !important;
}

nav .no-underline {
    border-right: 2px solid orange;
    margin: 0px 3px;
}

.logo-cliente {
    width: 140px;
    height: 140px;
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    border: 1px solid rgb(190, 190, 190);
    filter: grayscale(100%);
    cursor: pointer;
}

.logo-cliente:hover {
    filter: grayscale(0)
}

.chat {
    background-repeat: no-repeat;
    background-size: contain;
    height: 500px;
}

.chat p {
    width: 250px;
    margin-left: 10px;
}

.chat2 {
    height: 400px;
    background-repeat: no-repeat;
    background-size: contain;
}

#beneficions {
    width: 100vw;   
    height: auto;
}

 #chat_divs{
    display: flex;
} 

#slider-3, #btns3{
    display: block!important;
}

#btns2{
    margin-top: -266px;
    right: 4.5vw;
}

@media screen and (min-width: 800px) {

    #chat_divs{
        display: none!important;
    }

    #slider-3{
        display: initial!important;
    }

    #btns3{
        display: flex!important;
    }

    #btns2{
        margin-top: -70px;
        right: 16.3vw;
    }
    
    #beneficions {
        margin-left: -100px;
        width: 600px;
        height: 587px;
    }


    #slider-1 {
        background-image: url('/beneficios/assets/portalPagga/imagesSite/6/pc.png');
        background-repeat: no-repeat;
        background-size: 60%;
        background-position: 30%;

    }

    #necessidade {
        background-image: url('/beneficios/assets/portalPagga/imagesSite/7/1.png');
        background-repeat: no-repeat;
        background-size: 20% 80%;
        background-position: 100%;
        min-height: 70vh;
    }

 
}

.error {
	color: red;
}

.text-pop-up-top {
    animation: text-pop-up-top .75s cubic-bezier(.25, .46, .45, .94) both;
}

.slide-right {
    animation: slideright 1.2s cubic-bezier(.25, .46, .45, .94) both;
}

.delayed{
   animation-duration: 1.3s;
}
/* ----------------------------------------------
 * Generated by Animista on 2022-4-15 16:52:30
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

 @keyframes slideright {
    0% {
        transform: translateX(100px);
        transform-origin: 50% 50%;
        opacity: 0;
        
    }

    100% {
        transform: translateX(0px);
        transform-origin: 50% 50%;
        opacity: 1;
    } 
 }

@keyframes text-pop-up-top {
    0% {
        transform: translateY(100px);
        transform-origin: 50% 50%;
        transform:scale(.5);
        opacity: 0;
        
    }

    100% {
        transform: translateY(-40px);
        transform-origin: 50% 50%;
        transform:scale(1);
        opacity: 1;
    }
}

.rainbow-text .char { 
  
    color: hsl(
      calc(360deg * var(--char-percent)
      ), 
      90%, 
      65%
    );
   
  }
  
  .rainbow-text.animated .char {
    animation: rainbow-colors 30s linear infinite;
    animation-delay: calc(-2s * var(--char-percent));
  }
  /* Unfortunately, browsers try to take the shortest distance between transition/animation properties, so a simple `0turn` to `1turn` doesn't get the proper effect. */
  @keyframes rainbow-colors {
    0% { color: hsl(0turn, 90%, 65%); }
    25% { color: hsl(.25turn, 90%, 65%); }
    50% { color: hsl(.5turn, 90%, 65%); }
    75% { color: hsl(.75turn, 90%, 65%); }
    100% { color: hsl(1turn, 90%, 65%); }
  }
  
  .error {
	font-size: 11px;
	color: red !important;
}
	
.btn-orage {
    background-color: #F37135;
    border-color: #F37135;
    color: #fff;
    border-radius: 25px;
}

.btn-orage:hover, .btn-orage:focus, .btn-orage:active {
    background: #F7943D;
    border-color: #F7943D;
    color: #fff;
}