.boardarea{
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        /*background-color: #ddd;*/
        /*height: 300px;*/
    }    

    label[for] {
      cursor: pointer;
    }

    input[type="checkbox"] {
      display: none;
    }

    .lightbox {
      width: 100%;
      max-width: 1140px;
      position: fixed;
      /*background-color: #000;*/
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      min-height: 100%;
      z-index: 1;
      overflow: auto;
      -webkit-transform: scale(0);
      -ms-transform: scale(0);
      transform: scale(0);
      -webkit-transition: -webkit-transform 0.75s ease-out;
      transition: transform 0.75s ease-out;

    }

    .lightbox img {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      max-width: 85%;
      max-height: 85%;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    }

    input[type="checkbox"]:checked + .lightbox {
      -webkit-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1);
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

    }

    input[type="checkbox"]:checked ~ .grid {
      opacity: 0.05;
    }

    .grid {
      width: 100%;
      /*position: fixed;/*/
      top: 0;
      left: 0;
      height: 100%;
      /*background-color: #222;*/
      z-index: 0;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-align-items: flex-start;
      -ms-flex-align: start;
      align-items: flex-start;
      -webkit-align-content: flex-start;
      -ms-flex-line-pack: start;
      align-content: flex-start;
      padding: 16px;
      overflow: auto;
      text-align: center;
      -webkit-transition: opacity 0.75s;
      transition: opacity 0.75s;
    }

    .grid .grid-item {
      width: 25%;
      display: inline-block;
      padding: 16px;
      opacity: 0.9;
      -webkit-transition: opacity 0.5s;
      transition: opacity 0.5s;
    }

    .grid .grid-item:hover {
      opacity: 1;
    }
    @media screen and (max-width: 1024px) {
      .grid .grid-item {
        width: 50%;
      }
    }
    @media screen and (max-width: 480px) {
      .grid .grid-item {
        width: 100%;
      }
    }

    .grid img {
      max-width: 100%;
      max-height: 100%;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    }

    .reviewbox{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      padding-bottom: 100px;
    }

    .btnrv{
      width: 210px;
      height: 45px;
      margin: 10px 20px;
    }
    .on:hover, .on:active, .on{
      color: #222;
      background-color: #fff;
      cursor: none !important;;
    }