
.corpo {
    background-color: #14385C;
    width: 100vw;  
}

/* ------------- Header ------------- */

.faixaDoLogo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 150px;
    background-color: #14385C;
}

.logoBranco {
    background-image: url('../img/logobranco.png');
    background-size: cover;
    width: 150px;
    height: 150px;
    float: left;
}

/* -------------------------------------- */


/* ------------- Genéricos ------------- */

.seção {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* -------------------------------------- */
.svg {
    width: 300px;
    height: 200px;
    background-size: cover;
}

/* -------------------------------------- */

/* ------------- BOTÕES ------------- */
.botoes {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    outline: none;
    z-index:999;
}

.botaoDoeAgora {
    background-color: #FD7C11;
    border: none;
    border-radius: 15px;
    margin-top: 0px;
    margin-bottom: 10px;
    text-align: center;
    font-size: 24px;
    width: 300px;
    height: 80px;
    color: white;
    outline: none;
    z-index:999;
}

.botoes .icones {
    width: 100px;
    height: 100px;
    margin-top: 0px;
    outline: none;
    z-index:999;
}

.botoes .item {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 0px 30px 0px 30px;
    outline: none;
    z-index:999;
}

.manual {
    width: 205px;
    outline: none;
    z-index:999;
}

.botaoDoeAgora:hover {
    cursor: pointer;
    background-color: rgb(228, 107, 8);
    outline: none;
    z-index:999;
}


/* ---------------------------------- */

@media (min-width: 768px) {

    .manual {
        width: 235px;
    }

    .botoes .icones {
        width: 150px;
        height: 150px;
    }

    .botoes {
        flex-direction: row;
    }

    #recuo {
        margin-top: 15px;
    }

    .seção {
        flex-direction: row;
    }

    .svg {
        width: 400px;
        height: 340px;
        background-size: cover;
    }
    
    .texto {
        width: 40vw;
    }

    .textoDoacao {
        width: 40vw;
    }
    
}

    .listaFunciona {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    .listaItem{
        margin-top: 10px;
    }

    @media (min-width: 1024px) {
    }

    /* ------------------------- */

   /* ----------Slider------------- */

.slider{
    display: block;
    width: 100%;
    float: left;
    position: relative;
}

.slider .slider_item{
   display: block;
   float: left;
   width: 100%;
   height: 825px;
   background-size: cover;
   background-position: center;
   background-color: #14385C;
   position: absolute;
   transition-property: all;
   transition-duration: .5s;
   transition-timing-function: ease-in;
   transition-delay: 0.5s;
   opacity: 0;
}

.slider .slider_item.active{
   opacity: 1;
}

.slider .slider_item img{
   width: 100%;
   display: block;
   float: left;
}

.slider .slider_box{
   float: center;
   width: 100%;
   height: 100%;
   position: relative;
}

.slider .slider_content{
   display: block;
   float: left;
   width: 100%;
   height: 100%;
   padding: 100px 30% 15px 30%;
   background: rgba(20, 56, 92, 0.6);
   position: absolute;
   bottom: 0;
   left: 0;
   text-align: center;
}

.slider h2,
.slider p{
    font-family: 'Open Sans', sans-serif;
    position: center;
    top: -30px;
    opacity: 0;
}

.slider .slider_content h2{
   font-size: 1.5em;
   color: #fff;
   padding-bottom: 20px;
   font-weight: bold;
   transition-property: all;
   transition-duration: .10s;
   transition-timing-function: ease-in;
   transition-delay: 0.5s;
}

.slider .slider_content p{
   display: block;
   float: left;
   width: 100%;
   color: #fff;
   font-size: 1.35em;
   font-weight: lighter;
   text-align: center;
   transition-property: all;
   transition-duration: .8s;
   transition-timing-function: ease-in;
   transition-delay: 0.8s;
}

.slider .active h2,
.slider .active p{
   top: 0;
   opacity:1;	
}

.slider-next,
.slider-prev{
   width: 80px;
   height: 80px;
   color: #fff;
   text-align: center;
   font-size: 3em;
   line-height: 80px;
   font-weight: lighter;
   border-radius: 100px;
   background: rgba(0, 0, 0, 0.5);
   position: absolute;
   top:220px;
   left: 15px;
   z-index: 99;
}
.slider-next{
   right: 15px;
   left: auto;
   z-index: 100;
}
.slider-next:hover,
.slider-prev:hover{
   background: rgba(0, 0, 0, 0.8);
   transition-property: all;
   transition-duration: .5s;
   transition-timing-function: ease-out;
   transition-delay: 0.2s;
   cursor: pointer;
}

.imagem{
    width: 100vw;
}


@media all and (max-width: 1024px){
    .slider-next,
    .slider-prev{           
      top:280px;        
  }
  .slider .slider_content{
      padding-left: 10%;
      padding-right: 10%;
  }
  .slider .slider_content h2{
      font-size: 1.5em;
  }
  .slider .slider_content p{
      font-size: 1.35em;
  }

  .slider .slider_item{
    display: block;
    float: left;
    width: 100%;
    height: 825px;
 }

 .imagem{
    width: 100vw;
}

}
@media all and (max-width: 768px){
   .slider-next,
   .slider-prev{
      top:180px;
      width: 45px;
      height: 45px;
      line-height: 45px;
      font-size: 2em;
  }
  .slider .slider_item{
      height: 825px;
  }
  .slider .slider_content{
      padding-left: 5%;
      padding-right: 5%;
      padding-top: 60px;
  }
  .slider .slider_content h2{
      font-size: 1.5em;
  }
  .slider .slider_content p{
      font-size: 1.3em;
  }

  .imagem{
    width: 100vw;
}

}

@media all and (max-width: 2000px){
    .slider-next,
    .slider-prev{           
      top:280px;        
  }
  .slider .slider_content{
      padding-left: 10%;
      padding-right: 10%;
  }
  .slider .slider_content h2{
      font-size: 1.5em;
  }
  .slider .slider_content p{
      font-size: 1.35em;
  }

  .slider .slider_item{
    width: 100vw;
    height: 880px;
 }

 .imagem{
    width: 100vw;
}

}
@media all and (max-width: 667px){
   .slider-next,
   .slider-prev{
      top:180px;
      width: 45px;
      height: 45px;
      line-height: 45px;
      font-size: 1.5em;
  }
  .slider .slider_item{
    height: 825px;
  }
  .slider .slider_content{
      padding-left: 5%;
      padding-right: 5%;
      padding-top: 50px;
  }
  .slider .slider_content h2{
      font-size: 1.18em;
  }
  .slider .slider_content p{
      font-size: 1.15em;
  }

  .imagem{
    width: 100vw;
}

}


/* ----------Barra de Progresso------------- */

.percent-count{
    flex-direction: column;
    width: 450px;
    height: 50px;
    margin: 100px auto;
    font-size: 50px;
    text-align: center;
    color: #fff;
}

.progress-bar{
    flex-direction: column;
    width: 506px;
    height: 26px;
    background-color: white;
    border-radius: 13px;
    padding: 3px;
    margin: 50px auto;
}

.progress{
    flex-direction: column;
    width: 500px; /* muda o tamanho da barra */
    height: 20px;
    border-radius: 10px;
    background-color: #FD7C11;
}

@media all and (max-width: 1024px){
    .percent-count{
        flex-direction: column;
        width: 450px;
        height: 50px;
        margin: 100px auto;
        font-size: 50px;
        text-align: center;
        color: #fff;
    }
    
    .progress-bar{
        flex-direction: column;
        width: 506px;
        height: 26px;
        background-color: white;
        border-radius: 13px;
        padding: 3px;
        margin: 50px auto;
    }
    
    .progress{
        flex-direction: column;
        width: 500px; /* muda o tamanho da barra */
        height: 20px;
        border-radius: 10px;
        background-color: #FD7C11;
    }

}
@media all and (max-width: 768px){
    .percent-count{
        flex-direction: column;
        width: 450px;
        height: 50px;
        margin: 100px auto;
        font-size: 50px;
        text-align: center;
        color: #fff;
    }
    
    .progress-bar{
        flex-direction: column;
        width: 306px;
        height: 26px;
        background-color: white;
        border-radius: 13px;
        padding: 3px;
        margin: 50px auto;
    }
    
    .progress{
        flex-direction: column;
        width: 300px; /* muda o tamanho da barra */
        height: 20px;
        border-radius: 10px;
        background-color: #FD7C11;
    }
}
@media all and (max-width: 667px){
    .percent-count{
        flex-direction: column;
        width: 350px;
        height: 50px;
        margin: 100px auto;
        font-size: 50px;
        text-align: center;
        color: #fff;
    }
    
    .progress-bar{
        flex-direction: column;
        width: 306px;
        height: 26px;
        background-color: white;
        border-radius: 13px;
        padding: 3px;
        margin: 50px auto;
    }
    
    .progress{
        flex-direction: column;
        width: 300x; /* muda o tamanho da barra */
        height: 20px;
        border-radius: 10px;
        background-color: #FD7C11;
    }
}

/* ------------- Fale Conosco ------------- */

.redesSociais {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    text-align: center;
    z-index:999;

}

.ícone {
    margin: 0px 10px 0px 10px;
    max-width: 40px;
    max-height: 40px;
    z-index:999;
}

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
.faleComAGente p {
    font-family: 'Ubuntu', sans-serif;
    margin-top: 0px;
    margin-bottom: 0px;
    font-weight: 30;
    letter-spacing: 3px;
}

.faleComAGente1 p {
    font-family: 'Ubuntu', sans-serif;
    margin-top: 0px;
    margin-bottom: 0px;
    font-weight: 30;
    letter-spacing: 3px;
}

.faleComAGente1 {
    color: white;
    font-weight: bold;
}

.faleComAGente1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 100;
}


.faleComAGente {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 100;
}

.faleComAGente {
    color: white;
    font-weight: bold;
}

.imagem{
    width: 100vw;
}
