/* layout grid */
/*
  * MOBILE ( < 768px )  -------------------------
  * fixture ................. sm
  * # of column ............. 4
  * unit .................... (100% - (5px * 2)) / 4 - 20px
  * gutter .................. 20px
  * margin .................. 5px
  * container-size .......... 100% - (5px * 2)
  *
  * TABLET ( �� 768px )  -------------------------
  * fixture ................. md
  * # of column ............. 12
  * unit .................... (100% - (30px * 2)) / 12 - 20px
  * gutter .................. 20px
  * margin .................. 30px
  * container-size .......... 100% - (30px * 2)
  * max-container-size ...... 960px
  *
  * DESKTOP ( �� 1220px )  -------------------------
  * fixture ................. lg
  * # of column ............. 12
  * unit .................... 80px
  * gutter .................. 20px
  * margin .................. auto
  * container-size .......... 1200px
  * max-container-size ...... 1200px
*/

.container {
  position: relative;
  width: 100%;
  padding: 0 5px;
  margin: 0 auto;
}

.container .row {
  display: flex;
  flex-wrap: wrap;
}
.container .row.center {
  justify-content: center;
  align-items: center;
}

.container [class^='col-'] {
  padding: 0 10px;
}

.container .col-sm-1 {
  width: 25%;
}

.container .col-sm-2 {
  width: 50%;
}

.container .col-sm-3 {
  width: 75%;
}

.container .col-sm-4 {
  width: 100%;
}

.row .col_5{
  width:20%; float: left
}
.row .col_5:last-of-type{
  clear: both;
}
@media screen and (min-width: 768px) {
  .container .col-md-1 {
    width: 8.33333%;
  }

  .container .col-md-2 {
    width: 16.66667%;
  }

  .container .col-md-3 {
    width: 25%;
  }

  .container .col-md-4 {
    width: 33.33333%;
  }

  .container .col-md-5 {
    width: 41.66667%;
  }

  .container .col-md-6 {
    width: 50%;
  }

  .container .col-md-7 {
    width: 58.33333%;
  }

  .container .col-md-8 {
    width: 66.66667%;
  }

  .container .col-md-9 {
    width: 75%;
  }

  .container .col-md-10 {
    width: 83.33333%;
  }

  .container .col-md-11 {
    width: 91.66667%;
  }

  .container .col-md-12 {
    width: 100%;
  }
}

@media screen and (min-width: 1200px) {
  .container {
    max-width: 1200px;
    padding: 0;
  }


.container .col-lg-1 {
    width: 100px;
  }

  .container .col-lg-2 {
    width: 200px;
  }

  .container .col-lg-3 {
    width: 300px;
  }

  .container .col-lg-4 {
    width: 400px;
  }

  .container .col-lg-5 {
    width: 500px;
  }

  .container .col-lg-6 {
    width: 600px;
  }

  .container .col-lg-7 {
    width: 700px;
  }

  .container .col-lg-8 {
    width: 800px;
  }

  .container .col-lg-9 {
    width: 900px;
  }

  .container .col-lg-10 {
    width: 1000px;
  }

  .container .col-lg-11 {
    width: 1100px;
  }

  .container .col-lg-12 {
    width: 1200px;
  }

}