/* local rules */
a{
  color: #252529;
}

.header h1{
  font-size: 4rem;
  padding: 0;
  padding-top: 70px;
  padding-bottom: 2rem;
}

#toyota-service > div > ul > li{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#toyota-service > div{
  margin-top: 1rem;
}
.menu >li{
  margin: 2rem;
}
.menu span{
  font-weight: bold;
  text-transform: uppercase;
  padding-top: 1rem;
}
.menu-row{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.listagem{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.listagem img{
  display: block;
  width: 68px;
  height: 68px;
}
.listagem > li{
  display: flex;
  flex-direction: row;
  padding-bottom: 1rem;
}
.listagem h3, .listagem p{
  padding: 0;
  padding-bottom: .2rem;
  padding-left: 1rem;
}
.listagem h3{
  text-transform: uppercase;
}
#servicos{
  display: flex;
  flex-direction: row;
  justify-content: center;
}
#servicos > div{
  width: 600px;
}
#servicos > div > div{
  padding-right: 1rem;
}
#servicos img{
  width: 100%;
}
#servicos h2{
  padding: 0;
  padding-bottom: 1.5rem;
}
#servicos p{
  padding-bottom: 1rem;
}
.extra-padding-top{
  padding-top: 3rem;
}
#servicos-two{
  display: flex;
  justify-content: center;
}
#servicos-two > div{
  width: 1200px;
}

/* desktop */
@media(max-width: 1200px) {
  #servicos > div{
    width: 400px;
  }
  #servicos-two > div{
    width: 800px;
  }
}
/* tablet */
@media(max-width: 800px) {
  .header h1{
    font-size: 3rem;
    padding-bottom: 1rem;
  }
  #servicos{
    flex-direction: column;
  }
  #servicos > div, #servicos-two > div{
    width: 90%;
    margin: 0 auto;
  }

  .menu-row{
    flex-wrap: wrap;
  }
  .menu >li{
    margin: 1rem;
  }

}
/* phones */
@media(max-width: 550px) {
  #servicos > div, #servicos-two > div{
    width: 95%;
  }
}