* {
        box-sizing: border-box;
      }

      body {
        background-color: #f1f1f1;
      }

      /* Center website */
      .main {
        max-width: 1000px;
        margin: auto;
      }

      h1 {
        font-size: 50px;
        word-break: break-all;
      }

      .row {
        margin: 10px -16px;
      }

      /* Add padding BETWEEN each column */
      .row,
      .row > .column {
        padding: 8px;
      }

      /* Create three equal columns that floats next to each other */
      .column {
        float: left;
        width: 25%;
        display: none; /* Hide all elements by default */
      }

      /* Clear floats after rows */ 
      .row:after {
        content: "";
        display: table;
        clear: both;
      }

      /* Content */
      .content {
        background-color: white;
        padding: 10px;
      }

      /* The "show" class is added to the filtered elements */
      .show {
        display: block;
      }

      /* Style the buttons */
      .btnx {
        border: none;
        outline: none;
        padding: 12px 16px;
        background-color: white;
        cursor: pointer;
      }

      .btnx:hover {
        background-color: #ddd;
      }

      .btnx.active {
        background-color: #666;
        color: white;
      }

      /* Caption text */
      .caption-container {
        text-align: center;
        background-color: black;
        padding: 2px 16px;
        color: red;
      }

      img.demo {
        opacity: 0.6;
      }

      .active,
      .demo:hover {
        opacity: 1;
      }

      img.hover-shadow {
        transition: 0.3s;
      }

      .hover-shadow:hover {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      }