#content-bolsa-povo {
    position: fixed;
    top: 220px;
    right: 2px;
    object-fit: contain;
    cursor: pointer;
    z-index: 999;
}

.tgbolsa {
  display: none;
  visibility: hidden;
}

#content-bolsa-povo:hover{    
    -webkit-animation: fade 0.8s 0s 1 linear;
  }
  
  @keyframes fade {
     from {opacity: 0.60; right:-5px;}
      to {opacity: 1; right:2px; 
          animation-play-state: paused
      }
      
  }
  
  @media (max-width:780px) {
    #content-bolsa-povo {
        display: none;
        visibility: hidden;
    }

    .tgbolsa {
      display: block;
      visibility: visible;
      }
    
  }
  
  @media (max-width:780px) {
  .tgbolsa{
    position: fixed;
    bottom:10px;
    right:10px;
    background: transparent;
  }

  .tgbolsa button{
    cursor: pointer;
    width: 190px;
    height: 60px;
    border-radius: 6px;
    background: #191919;
    border: none;
    box-shadow: 0 1px 5px rgba(0,0,0,.4);
    font-size: 24px;
    color: white;
      
    -webkit-transition: .2s ease-out;
    -moz-transition: .2s ease-out;
    transition: .2s ease-out;
  }

  .tgbolsa li a {
    cursor: pointer;
    width: 233px;
    height: 60px;
    border-radius: 6px;
    background: #191919;
    border: none;
    box-shadow: 0 1px 5px rgba(0,0,0,.4);
    font-size: 24px;
    padding: 0;
    margin: 0;
    color: white;
      
    -webkit-transition: .2s ease-out;
    -moz-transition: .2s ease-out;
    transition: .2s ease-out;
    line-height: 0;
    text-align: center;
    align-items: center;
  }

  .tgbolsa a {
    cursor: pointer;
    border: none;
      
    -webkit-transition: .2s ease-out;
    -moz-transition: .2s ease-out;
    transition: .2s ease-out;
  }
  
  .tgbolsa button:focus,
  .tgbolsa a:hover{
    outline: none;
  }
  
  .tgbolsa button.main{
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 6px;
    background-color: #191919;
    right: 0;
    bottom: 0;
    z-index: 20;
    line-height: 0;
  }
  
  .tgbolsa button.main:before{
    content: url('https://www.saopaulo.sp.gov.br/wp-content/themes/saopaulo/assets/img/ico-bolsa.png');
  }
  
  .tgbolsa ul{
    position:absolute;
    display: inline-flex;
    bottom: 0;
    right: 65px;
    padding:0;
    margin:0;
    list-style:none;
    z-index:10;
    
    -webkit-transition: .2s ease-out;
    -moz-transition: .2s ease-out;
    transition: .2s ease-out;
  }
  
  .tgbolsa ul li {
    display: flex;
    position: relative;
    margin-bottom: -10%;
    opacity: 0;
    
    -webkit-transition: .3s ease-out;
    -moz-transition: .3s ease-out;
    transition: .3s ease-out;
    align-items: center!important;
  }

   .tgbolsa ul li a {
    display: flex;
    align-items: center!important;
    justify-content: center;
   }
    
  .tgbolsa.show button.main,
  .tgbolsa.show button.main{
    outline: none;
    background-color: #191919;
    box-shadow: 0 3px 8px rgba(0,0,0,.5);
   }
   
  .tgbolsa.show button.main:before {
        content: url('https://www.saopaulo.sp.gov.br/wp-content/themes/saopaulo/assets/img/btn-bolsa-povo-out.png'); 
  }
  
  .tgbolsa.show button.main + ul,
  .tgbolsa.show button.main + ul{
    bottom: -10px;
  }
  
  .tgbolsa.show button.main + ul li,
  .tgbolsa.show button.main + ul li {
     margin-bottom: 10px;
    opacity: 1;
  }
}