.grid__col--full, .grid__col--1-2, .grid__col--1-3, .grid__col--2-3, .grid__col--1-4, .grid__col--3-4, .grid__col--1-5, .grid__col--2-5, .grid__col--3-5, .grid__col--4-5, .grid__col--1-6, .grid__col--5-6, .grid__col--1-7, .grid__col--2-7, .grid__col--3-7, .grid__col--4-7, .grid__col--5-7, .grid__col--6-7, .grid__col--1-8, .grid__col--3-8, .grid__col--5-8, .grid__col--7-8, .grid__col--1-9, .grid__col--2-9, .grid__col--4-9, .grid__col--5-9, .grid__col--7-9, .grid__col--8-9, .grid__col--1-10, .grid__col--3-10, .grid__col--7-10, .grid__col--9-10, .grid__col--1-11, .grid__col--2-11, .grid__col--3-11, .grid__col--4-11, .grid__col--5-11, .grid__col--6-11, .grid__col--7-11, .grid__col--8-11, .grid__col--9-11, .grid__col--10-11, .grid__col--1-12, .grid__col--5-12, .grid__col--7-12, .grid__col--11-12 {
  float: left;
  padding-left: 20px;
}
.grid--no-gutters .grid__col--full, .grid--no-gutters .grid__col--1-2, .grid--no-gutters .grid__col--1-3, .grid--no-gutters .grid__col--2-3, .grid--no-gutters .grid__col--1-4, .grid--no-gutters .grid__col--3-4, .grid--no-gutters .grid__col--1-5, .grid--no-gutters .grid__col--2-5, .grid--no-gutters .grid__col--3-5, .grid--no-gutters .grid__col--4-5, .grid--no-gutters .grid__col--1-6, .grid--no-gutters .grid__col--5-6, .grid--no-gutters .grid__col--1-7, .grid--no-gutters .grid__col--2-7, .grid--no-gutters .grid__col--3-7, .grid--no-gutters .grid__col--4-7, .grid--no-gutters .grid__col--5-7, .grid--no-gutters .grid__col--6-7, .grid--no-gutters .grid__col--1-8, .grid--no-gutters .grid__col--3-8, .grid--no-gutters .grid__col--5-8, .grid--no-gutters .grid__col--7-8, .grid--no-gutters .grid__col--1-9, .grid--no-gutters .grid__col--2-9, .grid--no-gutters .grid__col--4-9, .grid--no-gutters .grid__col--5-9, .grid--no-gutters .grid__col--7-9, .grid--no-gutters .grid__col--8-9, .grid--no-gutters .grid__col--1-10, .grid--no-gutters .grid__col--3-10, .grid--no-gutters .grid__col--7-10, .grid--no-gutters .grid__col--9-10, .grid--no-gutters .grid__col--1-11, .grid--no-gutters .grid__col--2-11, .grid--no-gutters .grid__col--3-11, .grid--no-gutters .grid__col--4-11, .grid--no-gutters .grid__col--5-11, .grid--no-gutters .grid__col--6-11, .grid--no-gutters .grid__col--7-11, .grid--no-gutters .grid__col--8-11, .grid--no-gutters .grid__col--9-11, .grid--no-gutters .grid__col--10-11, .grid--no-gutters .grid__col--1-12, .grid--no-gutters .grid__col--5-12, .grid--no-gutters .grid__col--7-12, .grid--no-gutters .grid__col--11-12 {
  padding-left: 0;
}
@media (max-width: 550px) {
  .grid:not(.grid--no-collapse) .grid__col--full, .grid:not(.grid--no-collapse) .grid__col--1-2, .grid:not(.grid--no-collapse) .grid__col--1-3, .grid:not(.grid--no-collapse) .grid__col--2-3, .grid:not(.grid--no-collapse) .grid__col--1-4, .grid:not(.grid--no-collapse) .grid__col--3-4, .grid:not(.grid--no-collapse) .grid__col--1-5, .grid:not(.grid--no-collapse) .grid__col--2-5, .grid:not(.grid--no-collapse) .grid__col--3-5, .grid:not(.grid--no-collapse) .grid__col--4-5, .grid:not(.grid--no-collapse) .grid__col--1-6, .grid:not(.grid--no-collapse) .grid__col--5-6, .grid:not(.grid--no-collapse) .grid__col--1-7, .grid:not(.grid--no-collapse) .grid__col--2-7, .grid:not(.grid--no-collapse) .grid__col--3-7, .grid:not(.grid--no-collapse) .grid__col--4-7, .grid:not(.grid--no-collapse) .grid__col--5-7, .grid:not(.grid--no-collapse) .grid__col--6-7, .grid:not(.grid--no-collapse) .grid__col--1-8, .grid:not(.grid--no-collapse) .grid__col--3-8, .grid:not(.grid--no-collapse) .grid__col--5-8, .grid:not(.grid--no-collapse) .grid__col--7-8, .grid:not(.grid--no-collapse) .grid__col--1-9, .grid:not(.grid--no-collapse) .grid__col--2-9, .grid:not(.grid--no-collapse) .grid__col--4-9, .grid:not(.grid--no-collapse) .grid__col--5-9, .grid:not(.grid--no-collapse) .grid__col--7-9, .grid:not(.grid--no-collapse) .grid__col--8-9, .grid:not(.grid--no-collapse) .grid__col--1-10, .grid:not(.grid--no-collapse) .grid__col--3-10, .grid:not(.grid--no-collapse) .grid__col--7-10, .grid:not(.grid--no-collapse) .grid__col--9-10, .grid:not(.grid--no-collapse) .grid__col--1-11, .grid:not(.grid--no-collapse) .grid__col--2-11, .grid:not(.grid--no-collapse) .grid__col--3-11, .grid:not(.grid--no-collapse) .grid__col--4-11, .grid:not(.grid--no-collapse) .grid__col--5-11, .grid:not(.grid--no-collapse) .grid__col--6-11, .grid:not(.grid--no-collapse) .grid__col--7-11, .grid:not(.grid--no-collapse) .grid__col--8-11, .grid:not(.grid--no-collapse) .grid__col--9-11, .grid:not(.grid--no-collapse) .grid__col--10-11, .grid:not(.grid--no-collapse) .grid__col--1-12, .grid:not(.grid--no-collapse) .grid__col--5-12, .grid:not(.grid--no-collapse) .grid__col--7-12, .grid:not(.grid--no-collapse) .grid__col--11-12 {
    float: none;
    margin-left: 0;
    width: 100%;
  }
}

.grid {
  margin-left: -20px;
}
.grid:before, .grid:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
.grid:after {
  clear: both;
}
.grid--no-gutters {
  margin-left: 0;
}
.grid__col--full {
  width: 100%;
}
.grid__col--push-full {
  margin-left: 100%;
}
.grid__col--1-2 {
  width: 50%;
}
.grid__col--push-1-2 {
  margin-left: 50%;
}
.grid__col--1-3 {
  width: 33.33333%;
}
.grid__col--push-1-3 {
  margin-left: 33.33333%;
}
.grid__col--2-3 {
  width: 66.66667%;
}
.grid__col--push-2-3 {
  margin-left: 66.66667%;
}
.grid__col--1-4 {
  width: 25%;
}
.grid__col--push-1-4 {
  margin-left: 25%;
}
.grid__col--3-4 {
  width: 75%;
}
.grid__col--push-3-4 {
  margin-left: 75%;
}
.grid__col--1-5 {
  width: 20%;
}
.grid__col--push-1-5 {
  margin-left: 20%;
}
.grid__col--2-5 {
  width: 40%;
}
.grid__col--push-2-5 {
  margin-left: 40%;
}
.grid__col--3-5 {
  width: 60%;
}
.grid__col--push-3-5 {
  margin-left: 60%;
}
.grid__col--4-5 {
  width: 80%;
}
.grid__col--push-4-5 {
  margin-left: 80%;
}
.grid__col--1-6 {
  width: 16.66667%;
}
.grid__col--push-1-6 {
  margin-left: 16.66667%;
}
.grid__col--5-6 {
  width: 83.33333%;
}
.grid__col--push-5-6 {
  margin-left: 83.33333%;
}
.grid__col--1-7 {
  width: 14.28571%;
}
.grid__col--push-1-7 {
  margin-left: 14.28571%;
}
.grid__col--2-7 {
  width: 28.57143%;
}
.grid__col--push-2-7 {
  margin-left: 28.57143%;
}
.grid__col--3-7 {
  width: 42.85714%;
}
.grid__col--push-3-7 {
  margin-left: 42.85714%;
}
.grid__col--4-7 {
  width: 57.14286%;
}
.grid__col--push-4-7 {
  margin-left: 57.14286%;
}
.grid__col--5-7 {
  width: 71.42857%;
}
.grid__col--push-5-7 {
  margin-left: 71.42857%;
}
.grid__col--6-7 {
  width: 85.71429%;
}
.grid__col--push-6-7 {
  margin-left: 85.71429%;
}
.grid__col--1-8 {
  width: 12.5%;
}
.grid__col--push-1-8 {
  margin-left: 12.5%;
}
.grid__col--3-8 {
  width: 37.5%;
}
.grid__col--push-3-8 {
  margin-left: 37.5%;
}
.grid__col--5-8 {
  width: 62.5%;
}
.grid__col--push-5-8 {
  margin-left: 62.5%;
}
.grid__col--7-8 {
  width: 87.5%;
}
.grid__col--push-7-8 {
  margin-left: 87.5%;
}
.grid__col--1-9 {
  width: 11.11111%;
}
.grid__col--push-1-9 {
  margin-left: 11.11111%;
}
.grid__col--2-9 {
  width: 22.22222%;
}
.grid__col--push-2-9 {
  margin-left: 22.22222%;
}
.grid__col--4-9 {
  width: 44.44444%;
}
.grid__col--push-4-9 {
  margin-left: 44.44444%;
}
.grid__col--5-9 {
  width: 55.55556%;
}
.grid__col--push-5-9 {
  margin-left: 55.55556%;
}
.grid__col--7-9 {
  width: 77.77778%;
}
.grid__col--push-7-9 {
  margin-left: 77.77778%;
}
.grid__col--8-9 {
  width: 88.88889%;
}
.grid__col--push-8-9 {
  margin-left: 88.88889%;
}
.grid__col--1-10 {
  width: 10%;
}
.grid__col--push-1-10 {
  margin-left: 10%;
}
.grid__col--3-10 {
  width: 30%;
}
.grid__col--push-3-10 {
  margin-left: 30%;
}
.grid__col--7-10 {
  width: 70%;
}
.grid__col--push-7-10 {
  margin-left: 70%;
}
.grid__col--9-10 {
  width: 90%;
}
.grid__col--push-9-10 {
  margin-left: 90%;
}
.grid__col--1-11 {
  width: 9.09091%;
}
.grid__col--push-1-11 {
  margin-left: 9.09091%;
}
.grid__col--2-11 {
  width: 18.18182%;
}
.grid__col--push-2-11 {
  margin-left: 18.18182%;
}
.grid__col--3-11 {
  width: 27.27273%;
}
.grid__col--push-3-11 {
  margin-left: 27.27273%;
}
.grid__col--4-11 {
  width: 36.36364%;
}
.grid__col--push-4-11 {
  margin-left: 36.36364%;
}
.grid__col--5-11 {
  width: 45.45455%;
}
.grid__col--push-5-11 {
  margin-left: 45.45455%;
}
.grid__col--6-11 {
  width: 54.54545%;
}
.grid__col--push-6-11 {
  margin-left: 54.54545%;
}
.grid__col--7-11 {
  width: 63.63636%;
}
.grid__col--push-7-11 {
  margin-left: 63.63636%;
}
.grid__col--8-11 {
  width: 72.72727%;
}
.grid__col--push-8-11 {
  margin-left: 72.72727%;
}
.grid__col--9-11 {
  width: 81.81818%;
}
.grid__col--push-9-11 {
  margin-left: 81.81818%;
}
.grid__col--10-11 {
  width: 90.90909%;
}
.grid__col--push-10-11 {
  margin-left: 90.90909%;
}
.grid__col--1-12 {
  width: 8.33333%;
}
.grid__col--push-1-12 {
  margin-left: 8.33333%;
}
.grid__col--5-12 {
  width: 41.66667%;
}
.grid__col--push-5-12 {
  margin-left: 41.66667%;
}
.grid__col--7-12 {
  width: 58.33333%;
}
.grid__col--push-7-12 {
  margin-left: 58.33333%;
}
.grid__col--11-12 {
  width: 91.66667%;
}
.grid__col--push-11-12 {
  margin-left: 91.66667%;
}

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  position: relative;
}

body {
  position: relative;
  background: url("http://a.rgbimg.com/cache1ois5u/users/e/er/ervinbacik/300/mrTD17s.jpg") no-repeat;
  background-size: 100% 100%;
  height: 100%;
  color: #fff;
  padding: 40px;
}

.grid + .grid {
  margin-top: 10px;
}

.inner-wrap {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 10px;
  color: rgba(255, 255, 255, 0.6);
  text-align: left;
}