body,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: "Montserrat", sans-serif;
  }

  a {
    text-decoration: none;
  }

  .recalca {
    transition: .5s;
  }

  .recalca:hover {
    line-height: 30px;
    border-bottom: solid 3px rgb(11, 11, 11);
    transition-timing-function: ease-in-out;
  }

  .fotoGaleria {
    width: 100%;
    height: 300px;
  }

  .grad {
    background-image: linear-gradient(rgb(33, 137, 248), white);
    text-shadow: 1px 1px black;
  }

  #tema {
    background-size: cover;
    text-align: center;
    color: white;
    margin-bottom: 50px;
    text-shadow: -1px 0 10px orange, 0 1px 10px orange, 1px 0 10px orange, 0 -1px 10px orange;
  }

  #tema h1 {
    font-size: 3vw;
    font-weight: bolder;
    padding: 5px 10px;
  }

  .abajo {
    background-color: rgb(248, 249, 250);
    color: black;
    height: 70px;
  }

  @property --my-color {
    syntax: "<color>";
    inherits: true;
    initial-value: indigo;
  }

  .BlueColor {
    --my-color: blue;
  }

  .OrangeColor {
    --my-color: orange;
  }

  .GreenColor {
    --my-color: green;
  }

  .YellowColor {
    --my-color: yellow;
  }

  .DarkBColor {
    --my-color: darkblue;
  }

  .container {
    position: relative;
    width: 100%;
  }

  .overlay {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background-color: var(--my-color);
    overflow: hidden;
    width: 100%;
    height: 0;
    transition: .7s ease;
  }

  .container:hover .overlay {
    bottom: 0;
    height: 100%;
    opacity: 1;
  }

  .text {
    color: white;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
  }

  .noMargin {
    margin: 100px 20px;
  }

  @media screen and (max-width: 992px) {
    #tema {
      margin-bottom: 30px;
    }

    #tema h1 {
      font-size: 6vw;
    }

    .noMargin {
      margin: 100px 0px;
    }
  }