{{ define "main" }}

<section>
  <div class="container">
    <div class="row">
      <div class="col title-col" style="padding:1.4vw;">
        <h1 class="display-1">Bottles</h1>
      </div>
    </div>
  </div>
</section>

<hr>

<section>
  <div class="container">
    <div class="row">
      <div class="col bottles-container">

        {{- partial "bottle-grid.html" -}}

      </div>
    </div>
  </div>
</section>

<style>

  table{
    color: #fff;
    width: 100%;
  }

  table, th, td {
    border: 1px solid #949494;
    font-family: "sono", sans-serif;
    padding: 20px;
  }

  .expand{
    cursor: pointer;
  }
    .tea-icon{
      display:block;
      text-align:center;
      animation: pulse 1s infinite;
    }
    @keyframes pulse {
      0% { opacity: 1; }
      50% { opacity: 0.5; }
      100% { opacity: 1; }
    }
    #bottle-preloader {
      width: 100%;
      height: 200px;
      background: #1a1a1a;

    }
    #bottle-status {
      width: 200px;
      height: 200px;
      position: absolute;
      left: 50%;
      top: 50%;
      background-position: center;
      margin: -100px 0 0 -100px;
    }
    #bottle-loading-text {
      font-size: 20px;
      text-align: center;
      animation: pulse 1s infinite !important;
    }

  @media screen and (max-width: 576px) {

    .bottles-container{
      padding: 0px !important;
    }

    table, th, td {
      border: 1px solid #949494;
      font-family: "sono", sans-serif;
      padding: 10px;
      font-size: 12px;
    }

    .title-col{
      padding: 4vw !important;
    }

  }


</style>

{{ end }}