base-layout.css

/*
# BaseLayout


## Container

一番大きな枠組みのcontainer、
ブラウザのwidthに合わせて、適宜大きさが変化する。
基本的にトップレベルで使用する。

```
<div class="container">
  <div class="testbox1 padding-8">This is Container</div>
</div>
<br>
<div class="testbox1 padding-8">This is not Container</div>
```
*/

.container {
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}
.container-fluid {
  margin-right: auto;
  margin-left: auto;
}

/*
## フレキシブルデザイン

twitter bootstrap と同じ要領で、
flexを用いたマークアップで、行や列を表現できるようにしている。<br>
col-*-autoは、*に当てはまる条件下において、余白部分を穴埋めしてくれるように働く。<br>
もし複数 col-*-autoがある場合、それらで余白を埋めあえるよう個数で余白を割った大きさになる。
```
<div class="row">
  <div class="flex flex-xs-auto">
    <div class="frame z1 padding-8 testbox1">
      flex-xs-auto
    </div>
  </div>
  <div class="flex flex-xs-auto">
    <div class="frame z1 padding-8 testbox1">
      flex-xs-auto
    </div>
  </div>
</div>

<div class="row">
  <div class="flex flex-lg-auto flex-md-20">
    <div class="frame z1 padding-8 testbox1">
      flex
    </div>
  </div>
  <div class="flex flex-lg-auto flex-md-20">
    <div class="frame z1 padding-8 testbox1">
      flex
    </div>
  </div>
  <div class="flex flex-lg-auto flex-md-20">
    <div class="frame z1 padding-8 testbox1">
      flex
    </div>
  </div>
</div>

```

## 横並びフレキシブルデザイン

横並びで揃える時

```
<div class="row">
  <div class="flex flex-xs-20">
    <div class="frame z1 padding-8 testbox1">
      flex-xs-20
    </div>
  </div>
  <div class="flex flex-lg-18">
    <div class="frame z1 padding-8 testbox1">
      flex-lg-18
    </div>
  </div>
  <div class="flex flex-lg-2">
    <div class="frame z1 padding-8 testbox1">
      flex-lg-2
    </div>
  </div>
  <div class="flex flex-md-10">
    <div class="frame z1 padding-8 testbox1">
      flex-md-10
    </div>
  </div>
  <div class="flex flex-md-10">
    <div class="frame z1 padding-8 testbox1">
      flex-md-10
    </div>
  </div>
  <div class="flex flex-sm-6">
    <div class="frame z1 padding-8 testbox1">
      flex-sm-6
    </div>
  </div>
  <div class="flex flex-sm-6">
    <div class="frame z1 padding-8 testbox1">
      flex-sm-6
    </div>
  </div>
  <div class="flex flex-sm-6">
    <div class="frame z1 padding-8 testbox1">
      flex-sm-6
    </div>
  </div>
  <div class="flex flex-sm-2">
    <div class="frame z1 padding-8 testbox1">
      flex-sm-2
    </div>
  </div>
</div>

```

## 横並びフレキシブルデザイン(反転)

```
<div class="row reverse">
  <div class="flex flex-xs-12">
    <div class="frame z1 padding-8 testbox1">
      flex-xs-12
    </div>
  </div>
  <div class="flex flex-xs-8">
    <div class="frame z1 padding-8 testbox1">
      flex-xs-8
    </div>
  </div>
  <div class="flex flex-md-5">
    <div class="frame z1 padding-8 testbox1">
      flex-md-5
    </div>
  </div>
  <div class="flex flex-md-15">
    <div class="frame z1 padding-8 testbox1">
      flex-md-15
    </div>
  </div>
</div>
```


## 縦並びフレキシブルデザイン

```
<div class="column">
  <div class="flex flex-xs-20">
    <div class="frame z1 padding-8 testbox1">
      flex-xs-20
    </div>
  </div>
  <div class="flex flex-lg-18">
    <div class="frame z1 padding-8 testbox1">
      flex-lg-18
    </div>
  </div>
  <div class="flex flex-lg-2">
    <div class="frame z1 padding-8 testbox1">
      flex-lg-2
    </div>
  </div>
  <div class="flex flex-md-10">
    <div class="frame z1 padding-8 testbox1">
      flex-md-10
    </div>
  </div>
  <div class="flex flex-md-10">
    <div class="frame z1 padding-8 testbox1">
      flex-md-10
    </div>
  </div>
  <div class="flex flex-sm-6">
    <div class="frame z1 padding-8 testbox1">
      flex-sm-6
    </div>
  </div>
  <div class="flex flex-sm-6">
    <div class="frame z1 padding-8 testbox1">
      flex-sm-6
    </div>
  </div>
  <div class="flex flex-sm-6">
    <div class="frame z1 padding-8 testbox1">
      flex-sm-6
    </div>
  </div>
  <div class="flex flex-sm-2">
    <div class="frame z1 padding-8 testbox1">
      flex-sm-2
    </div>
  </div>
</div>
```


## 縦並びフレキシブルデザイン(反転)

```
<div class="column reverse">
  <div class="flex flex-xs-12">
    <div class="frame z1 padding-8 testbox1">
      flex-xs-12
    </div>
  </div>
  <div class="flex flex-xs-8">
    <div class="frame z1 padding-8 testbox1">
      flex-xs-8
    </div>
  </div>
  <div class="flex flex-md-5">
    <div class="frame z1 padding-8 testbox1">
      flex-md-5
    </div>
  </div>
  <div class="flex flex-md-15">
    <div class="frame z1 padding-8 testbox1">
      flex-md-15
    </div>
  </div>
</div>
```

## 折り返さないフレキシブル

```
<div class="row nowrap">
  <div class="flex flex-xs-12">
    <div class="frame z1 padding-8 testbox1">
      flex-xs-12
    </div>
  </div>
  <div class="flex flex-xs-8">
    <div class="frame z1 padding-8 testbox1">
      flex-xs-8
    </div>
  </div>
  <div class="flex flex-md-5">
    <div class="frame z1 padding-8 testbox1">
      flex-md-5
    </div>
  </div>
  <div class="flex flex-md-15">
    <div class="frame z1 padding-8 testbox1">
      flex-md-15
    </div>
  </div>
</div>

```

## 折り返す向きが逆なフレキシブル

```
<div class="row wrap-reverse">
  <div class="flex flex-xs-12">
    <div class="frame z1 padding-8 testbox1">
      flex-xs-12
    </div>
  </div>
  <div class="flex flex-xs-8">
    <div class="frame z1 padding-8 testbox1">
      flex-xs-8
    </div>
  </div>
  <div class="flex flex-md-5">
    <div class="frame z1 padding-8 testbox1">
      flex-md-5
    </div>
  </div>
</div>

```

## フレキシブルを用いて縦横中央に要素を配置する

```
<div class="testbox7">
  <div class="row" style="height: 100%;">
    <div class="flex flex-xs-auto"></div>
    <div class="column">
      <div class="flex flex-xs-auto"></div>
      hello
      <div class="flex flex-xs-auto"></div>
    </div>
    <div class="flex flex-xs-auto"></div>
  </div>
</div>
```

## 特定の条件下で見えなくする

```
<div class="row wrap-reverse">
  <div class="flex flex-xs-20 hidden-lg hidden-md hidden-sm">
    <div class="frame z1 padding-8 testbox1">
      flex-xs-20
    </div>
  </div>
  <div class="flex flex-sm-20 hidden-lg hidden-md hidden-xs">
    <div class="frame z1 padding-8 testbox1">
      flex-sm-20
    </div>
  </div>
  <div class="flex flex-md-20 hidden-lg hidden-sm hidden-xs">
    <div class="frame z1 padding-8 testbox1">
      flex-md-20
    </div>
  </div>
  <div class="flex flex-lg-20 hidden-md hidden-sm hidden-xs">
    <div class="frame z1 padding-8 testbox1">
      flex-lg-20
    </div>
  </div>
</div>

```
# グリッドデザイン

## 中央寄せ

```
<div class="row center">
  <div class="testbox2">1</div>
  <div class="testbox2">2</div>
  <div class="testbox2">3</div>
  <div class="testbox2">4</div>
  <div class="testbox2">5</div>
  <div class="testbox2">6</div>
</div>
```

## 左寄せ

```
<div class="row left">
  <div class="testbox2">1</div>
  <div class="testbox2">2</div>
  <div class="testbox2">3</div>
  <div class="testbox2">4</div>
  <div class="testbox2">5</div>
  <div class="testbox2">6</div>
</div>
```

## 右寄せ

```
<div class="row right">
  <div class="testbox2">1</div>
  <div class="testbox2">2</div>
  <div class="testbox2">3</div>
  <div class="testbox2">4</div>
  <div class="testbox2">5</div>
  <div class="testbox2">6</div>
</div>
```

## 全均一配置

```
<div class="row around">
  <div class="testbox2">1</div>
  <div class="testbox2">2</div>
  <div class="testbox2">3</div>
  <div class="testbox2">4</div>
  <div class="testbox2">5</div>
  <div class="testbox2">6</div>
</div>
```

## 中央均一配置

```
<div class="row between">
  <div class="testbox2">1</div>
  <div class="testbox2">2</div>
  <div class="testbox2">3</div>
  <div class="testbox2">4</div>
  <div class="testbox2">5</div>
  <div class="testbox2">6</div>
</div>
```

##  縦方向上部揃え

```
<div class="row top">
  <div class="testbox3">1</div>
  <div class="testbox3">2</div>
  <div class="testbox3">3</div>
  <div class="testbox3">4</div>
  <div class="testbox3">5</div>
  <div class="testbox3">6</div>
</div>
```

##  縦方向下部揃え

```
<div class="row bottom">
  <div class="testbox3">1</div>
  <div class="testbox3">2</div>
  <div class="testbox3">3</div>
  <div class="testbox3">4</div>
  <div class="testbox3">5</div>
  <div class="testbox3">6</div>
</div>
```

##  縦方向中央揃え

```
<div class="row middle">
  <div class="testbox3">1</div>
  <div class="testbox3">2</div>
  <div class="testbox3">3</div>
  <div class="testbox3">4</div>
  <div class="testbox3">5</div>
  <div class="testbox3">6</div>
</div>
```

##  縦方向ベースライン揃え

```
<div class="row baseline">
  <div class="testbox3">1</div>
  <div class="testbox3">2</div>
  <div class="testbox3">3</div>
  <div class="testbox3">4</div>
  <div class="testbox3">5</div>
  <div class="testbox3">6</div>
</div>
```


##  縦方向高さ合わせ

子要素に高さが指定されてない(paddingなどだけの指定された)場合、
自動的にすべての高さを合わせる

```
<div class="row stretch">
  <div class="testbox4">1</div>
  <div class="testbox4">2</div>
  <div class="testbox4">3</div>
  <div class="testbox4">4</div>
  <div class="testbox4">5</div>
  <div class="testbox4">6</div>
</div
```

# content

要素が折り返された時に、どのように表示するのかを決める

## コンテンツ上部揃え

```
<div class="row content-top testbox5">
  <div class="flex flex-xs-20">
    <div class="frame z1 padding-8 testbox1">
      flex-xs-20
    </div>
  </div>
  <div class="flex flex-lg-18">
    <div class="frame z1 padding-8 testbox1">
      flex-lg-18
    </div>
  </div>
  <div class="flex flex-lg-2">
    <div class="frame z1 padding-8 testbox1">
      flex-lg-2
    </div>
  </div>
</div>

```

## コンテンツ下部揃え

```
<div class="row content-bottom testbox5">
  <div class="flex flex-xs-20">
    <div class="frame z1 padding-8 testbox1">
      flex-xs-20
    </div>
  </div>
  <div class="flex flex-lg-18">
    <div class="frame z1 padding-8 testbox1">
      flex-lg-18
    </div>
  </div>
  <div class="flex flex-lg-2">
    <div class="frame z1 padding-8 testbox1">
      flex-lg-2
    </div>
  </div>
</div>

```

## コンテンツ中央揃え

```
<div class="row content-center testbox5">
  <div class="flex flex-xs-20">
    <div class="frame z1 padding-8 testbox1">
      flex-xs-20
    </div>
  </div>
  <div class="flex flex-lg-18">
    <div class="frame z1 padding-8 testbox1">
      flex-lg-18
    </div>
  </div>
  <div class="flex flex-lg-2">
    <div class="frame z1 padding-8 testbox1">
      flex-lg-2
    </div>
  </div>
</div>

```

## コンテンツ全均等配置

```
<div class="row content-around testbox5">
  <div class="flex flex-xs-20">
    <div class="frame z1 padding-8 testbox1">
      flex-xs-20
    </div>
  </div>
  <div class="flex flex-lg-18">
    <div class="frame z1 padding-8 testbox1">
      flex-lg-18
    </div>
  </div>
  <div class="flex flex-lg-2">
    <div class="frame z1 padding-8 testbox1">
      flex-lg-2
    </div>
  </div>
</div>

```


## コンテンツ中央均等配置

```
<div class="row content-between testbox5">
  <div class="flex flex-xs-20">
    <div class="frame z1 padding-8 testbox1">
      flex-xs-20
    </div>
  </div>
  <div class="flex flex-lg-18">
    <div class="frame z1 padding-8 testbox1">
      flex-lg-18
    </div>
  </div>
  <div class="flex flex-lg-2">
    <div class="frame z1 padding-8 testbox1">
      flex-lg-2
    </div>
  </div>
</div>

```
*/

.row{

  display: flex;

  flex-direction: row;
  -webkit-flex-direction: row;

  flex-wrap: wrap;

  box-sizing: border-box;
}

.row.left{
  justify-content: flex-start;
}
.row.right{
  justify-content: flex-end;
}
.row.center{
  justify-content: center;
}
.row.around{
  justify-content: space-around;
}
.row.between{
  justify-content: space-between;
}
.row.top{
  align-items: flex-start;
}
.row.content-top{
  align-content: flex-start;
}
.row.content-bottom{
  align-content: flex-end;
}
.row.content-center{
  align-content: center;
}
.row.content-between{
  align-content: between;
}
.row.content-around{
  align-content: around;
}
.row.bottom{
  align-items: flex-end;
}
.row.middle{
  align-items: center;
}
.row.baseline{
  align-items: baseline;
}
.row.stretch{
  align-items: stretch;
}
.row.reverse{
  flex-direction: row-reverse;
  -webkit-flex-direction: row-reverse;
}

.row.nowrap, .column.nowrap{
  flex-wrap: nowrap;
}

.row.wrap-reverse, .column.wrap-reverse{
  flex-wrap: wrap-reverse;
}

.column{

  display: flex;

  flex-direction: column;
  -webkit-flex-direction: column;

  flex-wrap: wrap;

  box-sizing: border-box;
}

.column.reverse{
  flex-direction: column-reverse;
  -webkit-flex-direction: column-reverse;
}

.flex{
  box-sizing: border-box;
  align-self: auto;
  padding: 4px;
  max-width: 100%;
  flex: 100%;
}
.hidden-xs{
  display: none;
}
.flex-fluid-xs-66{
  display: block;
  max-width: 66.6%;
  flex: 0 0 66.6%;
}
.flex-fluid-xs-33{
  display: block;
  max-width: 33.3%;
  flex: 0 0 33.3%;
}
.flex-fluid-xs-16{
  display: block;
  max-width: 16.6%;
  flex: 0 0 16.6%;
}
.flex-xs-auto{
  display: block;
  flex: 1;
}
.flex-xs-20{
  display: block;
  max-width: 100%;
  flex: 100%;
}
.flex-xs-19{
  display: block;
  max-width: 95%;
  flex: 0 0 95%;
}
.flex-xs-18{
  display: block;
  max-width: 90%;
  flex: 0 0 90%;
}
.flex-xs-17{
  display: block;
  max-width: 85%;
  flex: 0 0 85%;
}
.flex-xs-16{
  display: block;
  max-width: 80%;
  flex: 0 0 80%;
}
.flex-xs-15{
  display: block;
  max-width: 75%;
  flex: 0 0 75%;
}
.flex-xs-14{
  display: block;
  max-width: 70%;
  flex: 0 0 70%;
}
.flex-xs-13{
  display: block;
  max-width: 65%;
  flex: 0 0 65%;
}
.flex-xs-12{
  display: block;
  max-width: 60%;
  flex: 0 0 60%;
}
.flex-xs-11{
  display: block;
  max-width: 55%;
  flex: 0 0 55%;
}
.flex-xs-10{
  display: block;
  max-width:  50%;
  flex: 0 0 50%;
}
.flex-xs-9{
  display: block;
  max-width: 45%;
  flex: 0 0 45%;
}
.flex-xs-8{
  display: block;
  max-width: 40%;
  flex: 0 0 40%;
}
.flex-xs-7{
  display: block;
  max-width: 35%;
  flex: 0 0 35%;
}
.flex-xs-6{
  display: block;
  max-width: 30%;
  flex: 0 0 30%;
}
.flex-xs-5{
  display: block;
  max-width: 25%;
  flex: 0 0 25%;
}
.flex-xs-4{
  display: block;
  max-width: 20%;
  flex: 0 0 20%;
}
.flex-xs-3{
  display: block;
  max-width: 15%;
  flex: 0 0 15%;
}
.flex-xs-2{
  display: block;
  max-width: 10%;
  flex: 0 0 10%;
}
.flex-xs-1{
  display: block;
  max-width: 5%;
  flex: 0 0 5%;
}

@media (min-width: 768px){
  .flex-fluid-sm-66{
    display: block;
    max-width: 66.6%;
    flex: 0 0 66.6%;
  }
  .flex-fluid-sm-33{
    display: block;
    max-width: 33.3%;
    flex: 0 0 33.3%;
  }
  .flex-fluid-sm-16{
    display: block;
    max-width: 16.6%;
    flex: 0 0 16.6%;
  }
  .hidden-sm{
    display: none;
  }
  .flex-sm-auto{
    display: block;
    flex: 1;
  }
  .flex-sm-20{
    display: block;
    max-width: 100%;
    flex: 100%;
  }
  .flex-sm-19{
    display: block;
    max-width: 95%;
    flex: 0 0 95%;
  }
  .flex-sm-18{
    display: block;
    max-width: 90%;
    flex: 0 0 90%;
  }
  .flex-sm-17{
    display: block;
    max-width: 85%;
    flex: 0 0 85%;
  }
  .flex-sm-16{
    display: block;
    max-width: 80%;
    flex: 0 0 80%;
  }
  .flex-sm-15{
    display: block;
    max-width: 75%;
    flex: 0 0 75%;
  }
  .flex-sm-14{
    display: block;
    max-width: 70%;
    flex: 0 0 70%;
  }
  .flex-sm-13{
    display: block;
    max-width: 65%;
    flex: 0 0 65%;
  }
  .flex-sm-12{
    display: block;
    max-width: 60%;
    flex: 0 0 60%;
  }
  .flex-sm-11{
    display: block;
    max-width: 55%;
    flex: 0 0 55%;
  }
  .flex-sm-10{
    display: block;
    max-width:  50%;
    flex: 0 0 50%;
  }
  .flex-sm-9{
    display: block;
    max-width: 45%;
    flex: 0 0 45%;
  }
  .flex-sm-8{
    display: block;
    max-width: 40%;
    flex: 0 0 40%;
  }
  .flex-sm-7{
    display: block;
    max-width: 35%;
    flex: 0 0 35%;
  }
  .flex-sm-6{
    display: block;
    max-width: 30%;
    flex: 0 0 30%;
  }
  .flex-sm-5{
    display: block;
    max-width: 25%;
    flex: 0 0 25%;
  }
  .flex-sm-4{
    display: block;
    max-width: 20%;
    flex: 0 0 20%;
  }
  .flex-sm-3{
    display: block;
    max-width: 15%;
    flex: 0 0 15%;
  }
  .flex-sm-2{
    display: block;
    max-width: 10%;
    flex: 0 0 10%;
  }
  .flex-sm-1{
    display: block;
    max-width: 5%;
    flex: 0 0 5%;
  }
}

@media (min-width: 960px){
  .flex-fluid-md-66{
    display: block;
    max-width: 66.6%;
    flex: 0 0 66.6%;
  }
  .flex-fluid-md-33{
    display: block;
    max-width: 33.3%;
    flex: 0 0 33.3%;
  }
  .flex-fluid-md-16{
    display: block;
    max-width: 16.6%;
    flex: 0 0 16.6%;
  }
  .hidden-md{
    display: none;
  }
  .flex-md-auto{
    display: block;
    flex: 1;
  }
  .flex-md-20{
    display: block;
    max-width: 100%;
    flex: 100%;
  }
  .flex-md-19{
    display: block;
    max-width: 95%;
    flex: 0 0 95%;
  }
  .flex-md-18{
    display: block;
    max-width: 90%;
    flex: 0 0 90%;
  }
  .flex-md-17{
    display: block;
    max-width: 85%;
    flex: 0 0 85%;
  }
  .flex-md-16{
    display: block;
    max-width: 80%;
    flex: 0 0 80%;
  }
  .flex-md-15{
    display: block;
    max-width: 75%;
    flex: 0 0 75%;
  }
  .flex-md-14{
    display: block;
    max-width: 70%;
    flex: 0 0 70%;
  }
  .flex-md-13{
    display: block;
    max-width: 65%;
    flex: 0 0 65%;
  }
  .flex-md-12{
    display: block;
    max-width: 60%;
    flex: 0 0 60%;
  }
  .flex-md-11{
    display: block;
    max-width: 55%;
    flex: 0 0 55%;
  }
  .flex-md-10{
    display: block;
    max-width:  50%;
    flex: 0 0 50%;
  }
  .flex-md-9{
    display: block;
    max-width: 45%;
    flex: 0 0 45%;
  }
  .flex-md-8{
    display: block;
    max-width: 40%;
    flex: 0 0 40%;
  }
  .flex-md-7{
    display: block;
    max-width: 35%;
    flex: 0 0 35%;
  }
  .flex-md-6{
    display: block;
    max-width: 30%;
    flex: 0 0 30%;
  }
  .flex-md-5{
    display: block;
    max-width: 25%;
    flex: 0 0 25%;
  }
  .flex-md-4{
    display: block;
    max-width: 20%;
    flex: 0 0 20%;
  }
  .flex-md-3{
    display: block;
    max-width: 15%;
    flex: 0 0 15%;
  }
  .flex-md-2{
    display: block;
    max-width: 10%;
    flex: 0 0 10%;
  }
  .flex-md-1{
    display: block;
    max-width: 5%;
    flex: 0 0 5%;
  }
}

@media (min-width: 1280px){
  .flex-fluid-lg-66{
    display: block;
    max-width: 66.6%;
    flex: 0 0 66.6%;
  }
  .flex-fluid-lg-33{
    display: block;
    max-width: 33.3%;
    flex: 0 0 33.3%;
  }
  .flex-fluid-lg-16{
    display: block;
    max-width: 16.6%;
    flex: 0 0 16.6%;
  }
  .hidden-lg{
    display: none;
  }
  .flex-lg-auto{
    display: block;
    flex: 1;
  }
  .flex-lg-20{
    display: block;
    max-width: 100%;
    flex: 100%;
  }
  .flex-lg-19{
    display: block;
    max-width: 95%;
    flex: 0 0 95%;
  }
  .flex-lg-18{
    display: block;
    max-width: 90%;
    flex: 0 0 90%;
  }
  .flex-lg-17{
    display: block;
    max-width: 85%;
    flex: 0 0 85%;
  }
  .flex-lg-16{
    display: block;
    max-width: 80%;
    flex: 0 0 80%;
  }
  .flex-lg-15{
    display: block;
    max-width: 75%;
    flex: 0 0 75%;
  }
  .flex-lg-14{
    display: block;
    max-width: 70%;
    flex: 0 0 70%;
  }
  .flex-lg-13{
    display: block;
    max-width: 65%;
    flex: 0 0 65%;
  }
  .flex-lg-12{
    display: block;
    max-width: 60%;
    flex: 0 0 60%;
  }
  .flex-lg-11{
    display: block;
    max-width: 55%;
    flex: 0 0 55%;
  }
  .flex-lg-10{
    display: block;
    max-width:  50%;
    flex: 0 0 50%;
  }
  .flex-lg-9{
    display: block;
    max-width: 45%;
    flex: 0 0 45%;
  }
  .flex-lg-8{
    display: block;
    max-width: 40%;
    flex: 0 0 40%;
  }
  .flex-lg-7{
    display: block;
    max-width: 35%;
    flex: 0 0 35%;
  }
  .flex-lg-6{
    display: block;
    max-width: 30%;
    flex: 0 0 30%;
  }
  .flex-lg-5{
    display: block;
    max-width: 25%;
    flex: 0 0 25%;
  }
  .flex-lg-4{
    display: block;
    max-width: 20%;
    flex: 0 0 20%;
  }
  .flex-lg-3{
    display: block;
    max-width: 15%;
    flex: 0 0 15%;
  }
  .flex-lg-2{
    display: block;
    max-width: 10%;
    flex: 0 0 10%;
  }
  .flex-lg-1{
    display: block;
    max-width: 5%;
    flex: 0 0 5%;
  }
}