@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700");

* {
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
span {
  font-family: "Roboto", sans-serif;
}

.\+ {
  display: flex;
  align-items: center;
  justify-content: center;
}

.\-,
.\| {
  display: flex;
}

.\- {
  align-items: center;
}

.\| {
  justify-content: center;
}

.\21\2d,
.\21\7c,
.\21\2b,
.\21\5e,
.\21\7e,
.\21\3c,
.\21\5f,
.\21\3e {
  position: absolute;
  margin: auto;
}

.\21\2d,
.\21\2b,
.\21\7e {
  right: 0;
  left: 0;
}

.\21\7c,
.\21\2b,
.\21\7e {
  top: 0;
  bottom: 0;
}

.\21\3c {
  left: 0;
}

.\21\5e {
  top: 0;
}

.\21\3e {
  right: 0;
}

.\21\5f {
  bottom: 0;
}

.push-right {
  float: right;
}

.push-left {
  float: left;
}

@media screen and (min-width: 700px) {
  .col-1 {
    --col: 1;
  }

  .row-1 {
    --row: 1;
  }

  .col-2 {
    --col: 2;
  }

  .row-2 {
    --row: 2;
  }

  .col-3 {
    --col: 3;
  }

  .row-3 {
    --row: 3;
  }

  .col-4 {
    --col: 4;
  }

  .row-4 {
    --row: 4;
  }

  .col-5 {
    --col: 5;
  }

  .row-5 {
    --row: 5;
  }

  .col-6 {
    --col: 6;
  }

  .row-6 {
    --row: 6;
  }

  .col-7 {
    --col: 7;
  }

  .row-7 {
    --row: 7;
  }

  .col-8 {
    --col: 8;
  }

  .row-8 {
    --row: 8;
  }

  .col-9 {
    --col: 9;
  }

  .row-9 {
    --row: 9;
  }

  .col-10 {
    --col: 10;
  }

  .row-10 {
    --row: 10;
  }

  .col-11 {
    --col: 11;
  }

  .row-11 {
    --row: 11;
  }

  .col-12 {
    --col: 12;
  }

  .row-12 {
    --row: 12;
  }

  cols {
    grid-template-columns: repeat(12, auto);
    height: 100%;
  }

  rows {
    grid-template-rows: repeat(12, auto);
    width: 100%;
    height: auto;
  }

  cols .col-1.col-end {
    --col: calc((1 - 12) + 12) / calc(12 + 1);
  }

  cols .col-2.col-end {
    --col: calc((2 - 12) + 12) / calc(12 + 1);
  }

  cols .col-2.col-3 {
    --col: 2 / calc(1 + 3);
  }

  cols .col-3.col-end {
    --col: calc((3 - 12) + 12) / calc(12 + 1);
  }

  cols .col-2.col-4 {
    --col: 2 / calc(1 + 4);
  }

  cols .col-3.col-4 {
    --col: 3 / calc(1 + 4);
  }

  cols .col-4.col-end {
    --col: calc((4 - 12) + 12) / calc(12 + 1);
  }

  cols .col-2.col-5 {
    --col: 2 / calc(1 + 5);
  }

  cols .col-3.col-5 {
    --col: 3 / calc(1 + 5);
  }

  cols .col-4.col-5 {
    --col: 4 / calc(1 + 5);
  }

  cols .col-5.col-end {
    --col: calc((5 - 12) + 12) / calc(12 + 1);
  }

  cols .col-2.col-6 {
    --col: 2 / calc(1 + 6);
  }

  cols .col-3.col-6 {
    --col: 3 / calc(1 + 6);
  }

  cols .col-4.col-6 {
    --col: 4 / calc(1 + 6);
  }

  cols .col-5.col-6 {
    --col: 5 / calc(1 + 6);
  }

  cols .col-6.col-end {
    --col: calc((6 - 12) + 12) / calc(12 + 1);
  }

  cols .col-2.col-7 {
    --col: 2 / calc(1 + 7);
  }

  cols .col-3.col-7 {
    --col: 3 / calc(1 + 7);
  }

  cols .col-4.col-7 {
    --col: 4 / calc(1 + 7);
  }

  cols .col-5.col-7 {
    --col: 5 / calc(1 + 7);
  }

  cols .col-6.col-7 {
    --col: 6 / calc(1 + 7);
  }

  cols .col-7.col-end {
    --col: calc((7 - 12) + 12) / calc(12 + 1);
  }

  cols .col-2.col-8 {
    --col: 2 / calc(1 + 8);
  }

  cols .col-3.col-8 {
    --col: 3 / calc(1 + 8);
  }

  cols .col-4.col-8 {
    --col: 4 / calc(1 + 8);
  }

  cols .col-5.col-8 {
    --col: 5 / calc(1 + 8);
  }

  cols .col-6.col-8 {
    --col: 6 / calc(1 + 8);
  }

  cols .col-7.col-8 {
    --col: 7 / calc(1 + 8);
  }

  cols .col-8.col-end {
    --col: calc((8 - 12) + 12) / calc(12 + 1);
  }

  cols .col-2.col-9 {
    --col: 2 / calc(1 + 9);
  }

  cols .col-3.col-9 {
    --col: 3 / calc(1 + 9);
  }

  cols .col-4.col-9 {
    --col: 4 / calc(1 + 9);
  }

  cols .col-5.col-9 {
    --col: 5 / calc(1 + 9);
  }

  cols .col-6.col-9 {
    --col: 6 / calc(1 + 9);
  }

  cols .col-7.col-9 {
    --col: 7 / calc(1 + 9);
  }

  cols .col-8.col-9 {
    --col: 8 / calc(1 + 9);
  }

  cols .col-9.col-end {
    --col: calc((9 - 12) + 12) / calc(12 + 1);
  }

  cols .col-2.col-10 {
    --col: 2 / calc(1 + 10);
  }

  cols .col-3.col-10 {
    --col: 3 / calc(1 + 10);
  }

  cols .col-4.col-10 {
    --col: 4 / calc(1 + 10);
  }

  cols .col-5.col-10 {
    --col: 5 / calc(1 + 10);
  }

  cols .col-6.col-10 {
    --col: 6 / calc(1 + 10);
  }

  cols .col-7.col-10 {
    --col: 7 / calc(1 + 10);
  }

  cols .col-8.col-10 {
    --col: 8 / calc(1 + 10);
  }

  cols .col-9.col-10 {
    --col: 9 / calc(1 + 10);
  }

  cols .col-10.col-end {
    --col: calc((10 - 12) + 12) / calc(12 + 1);
  }

  cols .col-2.col-11 {
    --col: 2 / calc(1 + 11);
  }

  cols .col-3.col-11 {
    --col: 3 / calc(1 + 11);
  }

  cols .col-4.col-11 {
    --col: 4 / calc(1 + 11);
  }

  cols .col-5.col-11 {
    --col: 5 / calc(1 + 11);
  }

  cols .col-6.col-11 {
    --col: 6 / calc(1 + 11);
  }

  cols .col-7.col-11 {
    --col: 7 / calc(1 + 11);
  }

  cols .col-8.col-11 {
    --col: 8 / calc(1 + 11);
  }

  cols .col-9.col-11 {
    --col: 9 / calc(1 + 11);
  }

  cols .col-10.col-11 {
    --col: 10 / calc(1 + 11);
  }

  cols .col-11.col-end {
    --col: calc((11 - 12) + 12) / calc(12 + 1);
  }

  cols .col-2.col-12 {
    --col: 2 / calc(1 + 12);
  }

  cols .col-3.col-12 {
    --col: 3 / calc(1 + 12);
  }

  cols .col-4.col-12 {
    --col: 4 / calc(1 + 12);
  }

  cols .col-5.col-12 {
    --col: 5 / calc(1 + 12);
  }

  cols .col-6.col-12 {
    --col: 6 / calc(1 + 12);
  }

  cols .col-7.col-12 {
    --col: 7 / calc(1 + 12);
  }

  cols .col-8.col-12 {
    --col: 8 / calc(1 + 12);
  }

  cols .col-9.col-12 {
    --col: 9 / calc(1 + 12);
  }

  cols .col-10.col-12 {
    --col: 10 / calc(1 + 12);
  }

  cols .col-11.col-12 {
    --col: 11 / calc(1 + 12);
  }

  cols .col-12.col-end {
    --col: calc((12 - 12) + 12) / calc(12 + 1);
  }

  .col-1.col-2 {
    --col: 1 / calc(3);
  }

  .col-half {
    --col: 1 / 7;
  }

  .row-half {
    --row: 1 / 7;
  }

  .row-half-middle {
    --row: 7 / 13;
  }

  .col-half-middle {
    --col: 7 / 13;
  }

  .col-third {
    --col: 1 / 5;
  }

  .row-third {
    --row: 1 / 5;
  }

  .col-end {
    --col: 12;
  }

  .row-end {
    --row: 12;
  }
}

cols,
rows {
  display: grid;
}

[class*="col-"] {
  grid-column: var(--col);
}

[class*="row-"] {
  grid-row: var(--row);
}

.text-center {
  text-align: center;
}

.relative {
  position: relative;
}