.flex {
  display: flex;
  &-sm {
    @media screen and (max-width: $screen-sm) {
      display: flex;
    }
  }
  &-lg {
    @media screen and (min-width: $screen-lg) {
      display: flex;
    }
  }
}
.inline-flex {
  display: inline-flex
}
.flex-row {
  flex-flow: row
}
.flex-row-reverse {
  flex-direction: row-reverse
}
.flex-col {
  flex-flow: column;
  &-sm {
    @media screen and (max-width: $screen-sm) {
      flex-flow: column;
    }
  }
  &-lg {
    @media screen and (min-width: $screen-lg) {
      flex-flow: column;
    }
  }
}
.flex-acomp-pane {
  flex-flow: row;
  @media screen and (max-width: $screen-sm) {
    flex-flow: column;
  }
}
.flex-col-reverse {
  flex-direction: column-reverse
}
.flex-wrap {
  flex-wrap: wrap
}
.flex-wrap-reverse {
  flex-wrap: wrap-reverse
}
.flex-nowrap {
  flex-wrap: nowrap
}
.items-start {
  align-items: flex-start
}
.items-end {
  align-items: flex-end
}
.items-center {
  align-items: center;
  &-sm {
    @media screen and (max-width: $screen-sm) {
      align-items: center;
    }
  }
  &-lg {
    @media screen and (min-width: $screen-lg) {
      align-items: center;
    }
  }
}
.items-baseline {
  align-items: baseline
}
.items-stretch {
  align-items: stretch
}
.content-center {
  align-content: center
}
.content-start {
  align-content: flex-start
}
.content-end {
  align-content: flex-end
}
.content-between {
  align-content: space-between
}
.content-around {
  align-content: space-around
}
.content-evenly {
  align-content: space-evenly
}
.self-auto {
  align-self: auto
}
.self-start {
  align-self: flex-start
}
.self-end {
  align-self: flex-end
}
.self-center {
  align-self: center
}
.self-stretch {
  align-self: stretch
}
.justify-items-auto {
  justify-items: auto
}
.justify-items-start {
  justify-items: start
}
.justify-items-end {
  justify-items: end
}
.justify-items-center {
  justify-items: center
}
.justify-items-stretch {
  justify-items: stretch
}
.justify-start {
  justify-content: flex-start
}
.justify-end {
  justify-content: flex-end
}
.justify-center {
  justify-content: center;
  &-sm {
    @media screen and (max-width: $screen-sm) {
      justify-content: center;
    }
  }
  &-lg {
    @media screen and (min-width: $screen-lg) {
      justify-content: center;
    }
  }
}
.justify-between {
  justify-content: space-between;
  &-sm {
    @media screen and (max-width: $screen-sm) {
      justify-content: space-between;
    }
  }
  &-lg {
    @media screen and (min-width: $screen-lg) {
      justify-content: space-between;
    }
  }
}
.justify-around {
  justify-content: space-around
}
.justify-evenly {
  justify-content: space-evenly
}
.justify-self-auto {
  justify-self: auto
}
.justify-self-start {
  justify-self: start
}
.justify-self-end {
  justify-self: end
}
.justify-self-center {
  justify-self: center
}
.justify-self-stretch {
  justify-self: stretch
}
.flex-1 {
  flex: 1 1 0%
}
.flex-auto {
  flex: 1 1 auto
}
.flex-initial {
  flex: 0 1 auto
}
.flex-full {
  flex: 0 0 100%;
}
.flex-none {
  flex: none
}
.flex-grow-0 {
  flex-grow: 0
}
.flex-grow {
  flex-grow: 1
}
.flex-shrink-0 {
  flex-shrink: 0
}
.flex-shrink {
  flex-shrink: 1
}
.order-1 {
  order: 1;
  &-sm {
    @media screen and (max-width: $screen-sm) {
      order: 1;
    }
  }
  &-lg {
    @media screen and (min-width: $screen-lg) {
      order: 1;
    }
  }
}
.order-2 {
  order: 2;
  &-sm {
    @media screen and (max-width: $screen-sm) {
      order: 2;
    }
  }
  &-lg {
    @media screen and (min-width: $screen-lg) {
      order: 2;
    }
  }
}
.order-3 {
  order: 3;
  &-sm {
    @media screen and (max-width: $screen-sm) {
      order: 3;
    }
  }
  &-lg {
    @media screen and (min-width: $screen-lg) {
      order: 3;
    }
  }
}
.order-first {
  order: -9999
}
.order-last {
  order: 9999
}
.order-none {
  order: 0
}
.flex-container {
  padding-left: 8px;
  padding-right: 8px;
}
.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -8px;
  margin-right: -8px;
  &-sm {
    @media screen and (max-width: $screen-sm) {
      display: flex;
      flex-wrap: wrap;
      margin-left: -8px;
      margin-right: -8px;
    }
  }
  &-lg {
    @media screen and (min-width: $screen-lg) {
      display: flex;
      flex-wrap: wrap;
      margin-left: -8px;
      margin-right: -8px;
    }
  }
}
.col {
  flex: 1 0 0%;
  padding-left: 8px;
  padding-right: 8px;
  &-sm {
    @media screen and (max-width: $screen-sm) {
      flex: 1 0 0%;
      padding-left: 8px;
      padding-right: 8px;
    }
  }
  &-lg {
    @media screen and (min-width: $screen-lg) {
      flex: 1 0 0%;
      padding-left: 8px;
      padding-right: 8px;
    }
  }
}
.col-sm {
  @media screen and (max-width: $screen-sm) {
    &-1 {
      flex: 0 0 auto;
      width: 8.3333333333%;
    }
    &-2 {
      flex: 0 0 auto;
      width: 16.6666666667%;
    }
    &-3 {
      flex: 0 0 auto;
      width: 25%;
    }
    &-4 {
      flex: 0 0 auto;
      width: 33.3333333333%;
    }
    &-5 {
      flex: 0 0 auto;
      width: 41.6666666667%;
    }
    &-6 {
      flex: 0 0 auto;
      width: 50%;
    }
    &-12 {
      flex: 0 0 auto;
      width: 100%;
    }
  }
}
.col-lg {
  @media screen and (min-width: $screen-lg) {
    &-1 {
      flex: 0 0 auto;
      width: 8.3333333333%;
    }
    &-2 {
      flex: 0 0 auto;
      width: 16.6666666667%;
    }
    &-3 {
      flex: 0 0 auto;
      width: 25%;
    }
    &-4 {
      flex: 0 0 auto;
      width: 33.3333333333%;
    }
    &-5 {
      flex: 0 0 auto;
      width: 41.6666666667%;
    }
    &-6 {
      flex: 0 0 auto;
      width: 50%;
    }
    &-7 {
      flex: 0 0 auto;
      width: 58.3333333333%;
    }
    &-8 {
      flex: 0 0 auto;
      width: 66.6666666667%;
    }
    &-9 {
      flex: 0 0 auto;
      width: 75%;
    }
    &-10 {
      flex: 0 0 auto;
      width: 83.3333333333%;
    }
    &-11 {
      flex: 0 0 auto;
      width: 91.6666666667%;
    }
    &-12 {
      flex: 0 0 auto;
      width: 100%;
    }
  }
}
@media screen and (min-width: 1174px){
.justify-between-lg {
    justify-content: space-between;
}
}
.items-center {
    align-items: center;
}
.flex {
    display: flex;
}
.py-md {
    padding-top: 20px;
    padding-bottom: 20px;
}
.w-max-full {
    max-width: 100%;
}
@media only screen and (min-width: 320px) and (max-width: 960px) {
  .tamano{
      display: none;
  }
  .logo{
    width:100%; 
  }
}