.animations {
  .flexamples {
    .flexample {
      width: 100%;
      .transition-1 {
        .cajita-1 {
          width: 150px;     
          transition: all 2s ease-in-out .25s;
          -webkit-transition: all 2s ease-in-out .25s;
          &:hover {
            width: 100%;
            background-color: #1a7e80;
          }
        }
      }
      .transition-2 {
        .cajita-1 {
          width: 150px;     
          transition: all 2s cubic-bezier(0.1, 0.7, 1.0, 0.1) .25s;
          -webkit-transition: all 2s cubic-bezier(0.1, 0.7, 1.0, 0.1) .25s;
          &:hover {
            width: 100%;
            background-color: #1a7e80;
          }
        }
      }
      .animacion-color {
        .cajita-1 {
          width: 200em;
          animation: changecolor 10s ease .2s infinite normal forwards running;
        }
      }
      .flexbox {
        &.animacion-color {
          flex: 0 1 0%;
          border: none;
          margin: $padding-div 0;
          img {
            box-shadow: 0 0.5rem 1.5rem 0.125rem rgba(0,0,0,0.25);
            filter: brightness(130%) contrast(105%);
          }
          .cajita-1{
            width: 40vw;
            height: 125px;
            margin: 0;
          }
        }
      }
    }
    &.animaciones {
      .flexample {
        flex: 0 1 0%;
      }
    }
    .styled-table {
      border-collapse: collapse;
      margin: $padding-div 0;
      th, td {
          @include bordes;
          @include p-base;
      }
      th {
        background-color: #d0e8e5;
      }
    }
  }
  .bold {
    @include bold;
  }
  h5+h6 {
    font-size: 1.5em;
    font-weight: 100;
  }
  .styled-table {
    border-collapse: collapse;
    margin: $padding-div 0;
    th, td {
        @include bordes;
        @include p-base;
    }
    th {
      background-color: #d0e8e5;
    }
  }
  .bold {
    @include bold;
  }
  h5+h6 {
    font-size: 1.5em;
    font-weight: 100;
  }
}