/* Globals */
* {
  margin: 0;
  padding: 0;
  font-size: 100%;
  border: none;
  outline: none;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
  /* Apagar barra de scroll */
  /* overflow: hidden; */
}

.hide{
  display: none;
}

/* body */
body {
  background-image: url("https://assets.website-files.com/56167e908d7696d210cb5ff4/612d358d99421f22e0cd8ac3_como-vender-frutas-e-verduras-capa.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  height: 100vh;
  width: 100%;
}


/* Base da tabela */
table {
  max-width: 100%;
  min-height: 100vh;
  max-height: 100vh;
  background-color: transparent;
  border-collapse: collapse;
  border-spacing: 0;
  font-family: arial;
}

.table {
  width: 100%;
  margin-bottom: 20px;
}

.table th,
.table td {
  padding: 40px 30px;
  text-align: left;
  vertical-align: middle;
}

.table td:last-child {
  border-right: 0;
}

.table tbody td {
  font-size: 50px;
  text-align: center;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.404);
}

.tdNome{
  text-align: start !important;
}

.table thead th {
  font-weight: normal;
  background-color: #4A1211;
  color: #fff;
  font-size: 60px;
  text-align: center;
}

.produto{
  text-align: left;
}

/* linha item */
.linha {
  transition: .5s;
  background-color: #ff0000;
}


/* para resoluções de até 767px */
@media (max-width: 767px) {

  /* Tabela responsiva */
  .table-responsive {
    display: block;
    position: relative;
    width: 100%;
  }

  /*  Tabela funcionando como um bloco  */
  .table-responsive thead,
  .table-responsive tbody,
  .table-responsive th,
  .table-responsive td,
  .table-responsive tr {
    display: block;
  }

  /* Defino um tamanho para as células */
  .table-responsive td,
  .table-responsive th {
    height: 35px;
  }

  .table thead th {
    font-size: 16px;
  }

  .table th,
  .table td {
    font-size: 12px;
    padding: 8px;
  }

  /* thead é “flotado” esquerda para auxiliar na responsividade */
  .table-responsive thead {
    float: left;
  }

  .table-responsive tbody {
    width: auto;
    position: relative;

    overflow-x: auto;
    /* scroll horizontal */
    -webkit-overflow-scrolling: touch;
    /* Funcionamento para dispositivos touch */
    white-space: nowrap;
  }

  /*  Posicionando linhas lado-a-lado  */
  .table-responsive tbody tr {
    display: inline-block;
  }

  .table td:last-child {
    border-right: #d0d5d8 solid 1px;
  }
}

tbody tr{
  animation: animacaoIn 1s linear;  
}

.subtitle{
  line-height: 10px;
}

@keyframes animacaoIn {
  from{
    opacity: .1;
  }
  to{
    opacity: 1;
  }
  
}


/* Promoçao */


/* card promocao*/
.promocao-container{
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.area-fundo {
  width: 500px;
  height: 500px;
  position: relative;
  z-index: 0;
}

.area-promocao {
  background-color: #FECA34;
  width: 450px;
  height: 100px;
  position: absolute;
  border-radius: 5%;
  bottom: 0;
  margin-left: 80px;
  margin-bottom: 480px;
  z-index: 3;
}

.promocao {
  color: black;
  margin-top: 15px;
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
  font-size: 50px;
  /* animation */
  width: fit-content;
  white-space: nowrap;
  overflow: hidden;
  animation: text-animation 2s steps(19) 2s both alternate infinite,
    border-animation 0.5s infinite;
}

.area-produto {
  background-color: #FECA34;
  width: 300px;
  height: 180px;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  position: absolute;
  border-radius: 5%;
  bottom: 0;
  margin-left: -50px;
  margin-bottom: -80px;
  z-index: 3;
}

.area-background {
  width: 500px;
  height: 500px;
  position: absolute;
  right: 0;
  margin-left: 40px;
  margin-bottom: 40px;
  z-index: 1;
  background-image: url("https://media-manager.noticiasaominuto.com/1920/1579006257/naom_5e1db665aef4d.jpg?crop_params=eyJsYW5kc2NhcGUiOnsiY3JvcFdpZHRoIjoyNTYwLCJjcm9wSGVpZ2h0IjoxNDM4LCJjcm9wWCI6MCwiY3JvcFkiOjEzMH0sInBvcnRyYWl0Ijp7ImNyb3BXaWR0aCI6OTU3LCJjcm9wSGVpZ2h0IjoxNzAwLCJjcm9wWCI6NzI4LCJjcm9wWSI6NX19");
  background-repeat: no-repeat;
  background-size: cover;
}

.area-produto-nome {
  color: black;
  margin-top: 25px;
  margin-left: 15px;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 25px;
}

.area-produto-desconto {
  color: black;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 70px;
  margin-top: -10px;
  bottom: 0;
}

/* animation */
@keyframes text-animation {
  0%,
  10% {
    width: 0px;
  }
  100% {
    width: 620px;
  }
}