/*conteudo-sobre*/
.conteudo{
   display: flex;
   justify-content: space-around; /*justify-content = eixoX*/
   align-items: center; /*align-items = eixoY*/
   flex-wrap: wrap; /*"quebra a linha"*/
   width: 80%;
   margin: auto;
}

.conteudo-sobre{
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.conteudo-sobre p{
  font-size: 90%;
}

.conteudo-sobre #logo{
  width: 30%;
  background-color: none;
}
.sobre-mim{
  width: 50%;
   text-align: justify;
}


.historico{
   width: 80%;
   text-align: center;
}



/* ---- css da timeline do bootstrap ---- */
.circle {
   padding: 13px 20px;
   border-radius: 50%;
   background-color: #9a31db;
   color: #fff;
   max-height: 50px;
   z-index: 2;
 }
 
 .how-it-works.row .col-2 {
   align-self: stretch;
 }
 .how-it-works.row .col-2::after {
   content: "";
   position: absolute;
   border-left: 3px solid #9a31db;
   z-index: 1;
 }
 .how-it-works.row .col-2.bottom::after {
   height: 50%;
   left: 50%;
   top: 50%;
 }
 .how-it-works.row .col-2.full::after {
   height: 100%;
   left: calc(50% - 3px);
 }
 .how-it-works.row .col-2.top::after {
   height: 50%;
   left: 50%;
   top: 0;
 }
 
 
 .timeline div {
   padding: 0;
   height: 40px;
 }
 .timeline hr {
   border-top: 3px solid #9a31db;
   margin: 0;
   top: 17px;
   position: relative;
 }
 .timeline .col-2 {
   display: flex;
   overflow: hidden;
 }
 .timeline .corner {
   border: 3px solid #9a31db;
   width: 100%;
   position: relative;
   border-radius: 15px;
 }
 .timeline .top-right {
   left: 50%;
   top: -50%;
 }
 .timeline .left-bottom {
   left: -50%;
   top: calc(50% - 3px);
 }
 .timeline .top-left {
   left: -50%;
   top: -50%;
 }
 .timeline .right-bottom {
   left: 50%;
   top: calc(50% - 3px);
 }
 
 /* ---- fim timeline bootstrap ---- */

 /* ---- início responsividade ---- */
@media (max-width: 630px){
  .conteudo-sobre{
    flex-direction: column;
    margin-top: 5rem;
  }

  .conteudo-sobre #logo{
    width: 50%;
  }

  .sobre-mim{
    width: 85%;
  }
}

  /* ---- fim responsividade ---- */