.display-flex{
  display: flex;
  flex-wrap: wrap;
}

.flex-align-items-center{
  align-items: center;
}
.flex-align-items-stretch{
  align-items: stretch;
}
.flex-justify-content-center{
  justify-content: center;
}

.flex-bt>div{
  border-top: 1px solid #ccc;
  padding: 5px 0;
}

.flex-1{
  width: 8.33%;
}
.flex-2{
  width: 16.66%;
}
.flex-3{
  width: 25%;
}
.flex-4{
  width: 33.33%;
}
.flex-5{
  width: 41.66%;
}
.flex-6{
  width: 50%;
}
.flex-7{
  width: 58.33%;
}
.flex-8{
  width: 66.66%;
}
.flex-9{
  width: 75%;
}
.flex-10{
  width: 83.33%;
}
.flex-11{
  width: 91.66%;
}
.flex-12{
  width: 100%;
}

@media screen and (min-width: 1201px){
  .flex-padding-5-xl{
    padding: 0 5%;
  }

   .flex-1-xl{
    width: 8.33%;
  }
  .flex-2-xl{
    width: 16.67%;
  }
  .flex-3-xl{
    width: 25%;
  }
  .flex-4-xl{
    width: 33.33%;
  }
  .flex-5-xl{
    width: 41.66%;
  }
  .flex-6-xl{
    width: 50%;
  }
  .flex-7-xl{
    width: 58.33%;
  }
  .flex-9-xl{
    width: 75%;
  }
  .flex-10-xl{
    width: 83.33%;
  }
  .flex-11-xl{
    width: 91.66%;
  }

}

@media screen and (max-width: 1200px){
  .flex-1-xl,
  .flex-2-xl,
  .flex-3-xl,
  .flex-4-xl,
  .flex-5-xl,
  .flex-6-xl,
  .flex-7-xl,
  .flex-8-xl,
  .flex-9-xl,
  .flex-10-xl,
  .flex-11-xl{
    width: 100%;
  }
}

@media screen and (min-width: 961px){
  .flex-row-reverse-lg{
    flex-direction: row-reverse;
  }

  .flex-1-lg{
    width: 8.33%;
  }
  .flex-2-lg{
    width: 16.67%;
  }
  .flex-3-lg{
    width: 25%;
  }
  .flex-4-lg{
    width: 33.33%;
  }
  .flex-5-lg{
    width: 41.66%;
  }
  .flex-6-lg{
    width: 50%;
  }
  .flex-7-lg{
    width: 58.33%;
  }
  .flex-8-lg{
    width: 66.66%;
  }
  .flex-9-lg{
    width: 75%;
  }
  .flex-10-lg{
    width: 83.33%;
  }
  .flex-11-lg{
    width: 91.66%;
  }

}

@media screen and (max-width: 960px){
  .flex-bt-lg>div:nth-child(even){
    border: none;
  }
  .flex-column-reverse-lg{
    flex-direction: column-reverse;
  }

  .flex-1-lg,
  .flex-2-lg,
  .flex-3-lg,
  .flex-4-lg,
  .flex-5-lg,
  .flex-6-lg,
  .flex-7-lg,
  .flex-8-lg,
  .flex-9-lg,
  .flex-10-lg,
  .flex-11-lg{
    width: 100%;
  }
}

@media screen and (min-width: 871px){
  .flex-row-reverse-md{
    flex-direction: row-reverse;
  }

  .flex-1-md{
    width: 8.33%;
  }
  .flex-2-md{
    width: 16.66%;
  }
  .flex-3-md{
    width: 25%;
  }
  .flex-4-md{
    width: 33.33%;
  }
  .flex-5-md{
    width: 41.66%;
  }
  .flex-6-md{
    width: 50%;
  }
  .flex-7-md{
    width: 58.33%;
  }
  .flex-8-md{
    width: 66.66%;
  }
  .flex-9-md{
    width: 75%;
  }
  .flex-10-md{
    width: 83.33%;
  }
  .flex-11-md{
    width: 91.66%;
  }

}

@media screen and (max-width: 870px){
  .flex-1-md,
  .flex-2-md,
  .flex-3-md,
  .flex-4-md,
  .flex-5-md,
  .flex-6-md,
  .flex-7-md,
  .flex-8-md,
  .flex-9-md,
  .flex-10-md,
  .flex-11-md{
    width: 100%;
  }
}

@media screen and (min-width: 675px){
  .flex-row-reverse-sm{
    flex-direction: row-reverse;
  }

  .flex-1-sm{
    width: 8.33%;
  }
  .flex-2-sm{
    width: 16.66%;
  }
  .flex-3-sm{
    width: 25%;
  }
  .flex-4-sm{
    width: 33.33%;
  }
  .flex-5-sm{
    width: 41.66%;
  }
  .flex-6-sm{
    width: 50%;
  }
  .flex-7-sm{
    width: 58.33%;
  }
  .flex-8-sm{
    width: 66.66%;
  }
  .flex-9-sm{
    width: 75%;
  }
  .flex-10-sm{
    width: 83.33%;
  }
  .flex-11-sm{
    width: 91.66%;
  }

}

@media screen and (max-width: 674px){
  .flex-1-sm,
  .flex-2-sm,
  .flex-3-sm,
  .flex-4-sm,
  .flex-5-sm,
  .flex-6-sm,
  .flex-7-sm,
  .flex-8-sm,
  .flex-9-sm,
  .flex-10-sm,
  .flex-11-sm{
    width: 100%;
  }
}