
      /*cards mapas*/
      /*body {
        Created with https://www.css-gradient.com 
        background: var(--color-primary);
        background: -webkit-radial-gradient(top right, var(--color-primary), rgba(155, 5, 5, 0.9));
        background: -moz-radial-gradient(top right, var(--color-primary), rgba(155, 5, 5, 0.9));
        background: radial-gradient(to bottom left, var(--color-primary), rgba(155, 5, 5, 0.9));
      }
      */
      .wrapper {
        margin: 0vh;
      }

      .card {
        border: none;
        transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
        overflow: hidden;
        border-radius: 20px;
        min-height: 450px;
        box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2);
      }
      @media (max-width: 768px) {
        .card {
          min-height: 350px;
        }
      }
      @media (max-width: 420px) {
        .card {
          min-height: 300px;
        }
      }
      .card.card-has-bg {
        transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
        background-size: 120%;
        background-repeat: no-repeat;
        background-position: center center;
      }
      .card.card-has-bg:before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        /*background: inherit;*/
        /*-webkit-filter: grayscale(1);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        filter: grayscale(100%);*/
      }
      .card.card-has-bg:hover {
        transform: scale(0.98);
        box-shadow: 0 0 5px -2px rgba(0, 0, 0, 0.3);
        background-size: 130%;
        transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
      }
      .card.card-has-bg:hover .card-img-overlay {
        transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
        background: #234f6d;
        background: linear-gradient(0deg, rgba(4, 69, 114, 0.1) 0%, #044572 90%);
      }
      .card .card-footer {
        background: none;
        border-top: none;
      }
      .card .card-footer .media img {
        border: solid 3px rgba(255, 255, 255, 0.3);
      }
      .card .card-meta {
        color: var(--color-primary);
      }
      .card .card-body {
        transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
      }
      .card:hover {
        cursor: pointer;
        transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
      }
      .card:hover .card-body {
        margin-top: 30px;
        transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
      }
      .card .card-img-overlay {
        transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
        background: #234f6d;
        background: linear-gradient(0deg, rgba(35, 79, 109, 0.3785889356) 0%, #455f71 100%);
      }
    