.body{
    font-size: 62.5%;
}
#quadro-vermelho {
    background-color: red;
    width: 100%;
    color: white;
    font-size: 0.9rem;
}
ion-icon{
    color: black;
    font-size: 1.1rem;
    margin-bottom: -3px;
    padding-right: 2px;
}
#topo-01{
    background: rgba(255, 255, 255, 0.7);
    color: black;
    width: 100%;
    position: absolute;
    z-index: 10;
    
}
#logo {
    height: 80px;
}
#topo-01 a{
    color: black;
    font-size: 1.1em;

}
#textAnime {
    animation-duration: 1s;
    animation-name: slidein;
  }
  
  @keyframes slidein {
    from {
      margin-left: 100%;
      width: 300%
    }
  
    to {
      margin-left: -15%;
      width: 100%;
    }
  }
  .flip-container:hover .flipper{
	transform: rotateY(180deg);
	/* se quiser uma animação na vertical,
	troque por rotateX(180deg)
	*/
}
.flipper{
	width: 100%;
	height: 100%;
	transition: transform 0.8s;
	transform-style: preserve-3d;
}
.flipper{
	position: relative;
	...
}
.front, .back{
	position: absolute;
	width: 100%;
	height: 100%;
}
.back{
	transform: rotateY(180deg);
}
.front, .back{
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
  }
  .carousel img{ filter: brightness(51%)
}
.carousel h2 { 
    font-size: 3.5rem;
}
.carousel h5 { 
    font-size: 1.5rem;
}

.textAnime2 {
    animation-duration: 1s;
    animation-name: slide-top;
  }



  @keyframes slide-top {
    100% {
      -webkit-transform: translatex(0);
              transform: translateY(0);
    }
    0% {
      -webkit-transform: translateY(-150px);
              transform: translateY(-150px);
    }
  }
  .bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }

  @media (min-width: 768px) {
    .bd-placeholder-img-lg {
      font-size: 3.5rem;
    }
  }