.row {
    margin-left: auto;
    margin-right: auto;
}
.row:after,
.row:before {
    content: " ";
    display: table;
}
.row:after {
    clear: both;
}

.aspect {
    height: 0;
    overflow: hidden;
    padding-bottom: 100%;
    position: relative;
    width: 100%;
}
.aspect--16x9 {
    padding-bottom: 56.25%;
}
.aspect--9x16 {
    padding-bottom: 177.77778%;
}
.aspect--4x3 {
    padding-bottom: 75%;
}
.aspect--3x4 {
    padding-bottom: 133.33333%;
}
.aspect--3x2 {
    padding-bottom: 66.66667%;
}
.aspect--3x1 {
    padding-bottom: 33.33333%;
}
.aspect--2x3 {
    padding-bottom: 150%;
}
.aspect--2x1 {
    padding-bottom: 50%;
}
.aspect--1x2 {
    padding-bottom: 200%;
}
.aspect--1x1 {
    padding-bottom: 100%;
}
.aspect--none {
    height: auto;
    overflow: visible;
    padding-bottom: 0;
}
.aspect--none > .aspect__inner {
    position: static;
}
.aspect > div,
.aspect__inner {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.aspect--16x9\@xs {
    padding-bottom: 56.25%;
}
.aspect--9x16\@xs {
    padding-bottom: 177.77778%;
}
.aspect--4x3\@xs {
    padding-bottom: 75%;
}
.aspect--3x4\@xs {
    padding-bottom: 133.33333%;
}
.aspect--3x2\@xs {
    padding-bottom: 66.66667%;
}
.aspect--3x1\@xs {
    padding-bottom: 33.33333%;
}
.aspect--2x3\@xs {
    padding-bottom: 150%;
}
.aspect--2x1\@xs {
    padding-bottom: 50%;
}
.aspect--1x2\@xs {
    padding-bottom: 200%;
}
.aspect--1x1\@xs {
    padding-bottom: 100%;
}
.aspect--none\@xs {
    height: auto;
    overflow: visible;
    padding-bottom: 0;
}


@media screen and (min-width: 768px) {
    .col-1\@sm,
    .col-2\@sm,
    .col-3\@sm,
    .col-4\@sm,
    .col-5\@sm,
    .col-6\@sm,
    .col-7\@sm,
    .col-8\@sm,
    .col-9\@sm,
    .col-10\@sm,
    .col-11\@sm,
    .col-12\@sm {
        float: left;
    }
    .aspect--16x9\@sm {
        padding-bottom: 56.25%;
    }
    .aspect--9x16\@sm {
        padding-bottom: 177.77778%;
    }
    .aspect--4x3\@sm {
        padding-bottom: 75%;
    }
    .aspect--3x4\@sm {
        padding-bottom: 133.33333%;
    }
    .aspect--3x2\@sm {
        padding-bottom: 66.66667%;
    }
    .aspect--3x1\@sm {
        padding-bottom: 33.33333%;
    }
    .aspect--2x3\@sm {
        padding-bottom: 150%;
    }
    .aspect--2x1\@sm {
        padding-bottom: 50%;
    }
    .aspect--1x2\@sm {
        padding-bottom: 200%;
    }
    .aspect--1x1\@sm {
        padding-bottom: 100%;
    }
    .aspect--none\@sm {
        height: auto;
        overflow: visible;
        padding-bottom: 0;
    }
    .aspect--none\@sm > .aspect__inner {
        position: static;
    }
    .col-1\@sm {
        width: 8.33333%;
    }
    .col-2\@sm {
        width: 16.66667%;
    }
    .col-3\@sm {
        width: 25%;
    }
    .col-4\@sm {
        width: 33.33333%;
    }
    .col-5\@sm {
        width: 41.66667%;
    }
    .col-6\@sm {
        width: 50%;
    }
    .col-7\@sm {
        width: 58.33333%;
    }
    .col-8\@sm {
        width: 66.66667%;
    }
    .col-9\@sm {
        width: 75%;
    }
    .col-10\@sm {
        width: 83.33333%;
    }
    .col-11\@sm {
        width: 91.66667%;
    }
    .col-12\@sm {
        width: 100%;
    }
    .col-pull-0\@sm {
        right: auto;
    }
    .col-pull-1\@sm {
        right: 8.33333%;
    }
    .col-pull-2\@sm {
        right: 16.66667%;
    }
    .col-pull-3\@sm {
        right: 25%;
    }
    .col-pull-4\@sm {
        right: 33.33333%;
    }
    .col-pull-5\@sm {
        right: 41.66667%;
    }
    .col-pull-6\@sm {
        right: 50%;
    }
    .col-pull-7\@sm {
        right: 58.33333%;
    }
    .col-pull-8\@sm {
        right: 66.66667%;
    }
    .col-pull-9\@sm {
        right: 75%;
    }
    .col-pull-10\@sm {
        right: 83.33333%;
    }
    .col-pull-11\@sm {
        right: 91.66667%;
    }
    .col-pull-12\@sm {
        right: 100%;
    }
    .col-push-0\@sm {
        left: auto;
    }
    .col-push-1\@sm {
        left: 8.33333%;
    }
    .col-push-2\@sm {
        left: 16.66667%;
    }
    .col-push-3\@sm {
        left: 25%;
    }
    .col-push-4\@sm {
        left: 33.33333%;
    }
    .col-push-5\@sm {
        left: 41.66667%;
    }
    .col-push-6\@sm {
        left: 50%;
    }
    .col-push-7\@sm {
        left: 58.33333%;
    }
    .col-push-8\@sm {
        left: 66.66667%;
    }
    .col-push-9\@sm {
        left: 75%;
    }
    .col-push-10\@sm {
        left: 83.33333%;
    }
    .col-push-11\@sm {
        left: 91.66667%;
    }
    .col-push-12\@sm {
        left: 100%;
    }
    .col-offset-0\@sm {
        margin-left: 0;
    }
    .col-offset-1\@sm {
        margin-left: 8.33333%;
    }
    .col-offset-2\@sm {
        margin-left: 16.66667%;
    }
    .col-offset-3\@sm {
        margin-left: 25%;
    }
    .col-offset-4\@sm {
        margin-left: 33.33333%;
    }
    .col-offset-5\@sm {
        margin-left: 41.66667%;
    }
    .col-offset-6\@sm {
        margin-left: 50%;
    }
    .col-offset-7\@sm {
        margin-left: 58.33333%;
    }
    .col-offset-8\@sm {
        margin-left: 66.66667%;
    }
    .col-offset-9\@sm {
        margin-left: 75%;
    }
    .col-offset-10\@sm {
        margin-left: 83.33333%;
    }
    .col-offset-11\@sm {
        margin-left: 91.66667%;
    }
    .col-offset-12\@sm {
        margin-left: 100%;
    }
/*
    .container {
        padding-left: 7%;
        padding-right: 7%;
    }
    .row {
        max-width: 1200px;
    }
*/
}



.shape {
    margin-left: 0;
    margin-top: 10px;
    position: relative;
}
.shape .shape__space {
    background-color: #000;
    border: 0 solid transparent;
    height: 100%;
    width: 100%;
}
.shape--blue .shape__space {
    background-color: #3498db;
    border-bottom-color: #3498db;
}
.shape--red .shape__space {
    background-color: #e74c3c;
    border-bottom-color: #e74c3c;
}
.shape--orange .shape__space {
    background-color: #f39c12;
    border-bottom-color: #f39c12;
}
.shape--green .shape__space {
    background-color: #2ecc71;
    border-bottom-color: #2ecc71;
}
.shape--circle .shape__space {
    border-radius: 50%;
}
.shape--diamond .shape__space {
    transform: rotate(45deg) scale(0.70711);
}
.shape--triangle .shape__space {
    background-color: transparent;
    border-width: 0 66px 114px;
    height: 0;
    margin: auto;
    padding-top: 9px;
    width: 0;
}
@media (min-width: 425px) {
    .shape--triangle .shape__space {
        border-width: 0 90px 156px;
        height: 0;
        padding-top: 12px;
        width: 0;
    }
}
@media (min-width: 600px) {
    .shape--triangle .shape__space {
        border-width: 0 131px 227px;
        height: 0;
        padding-top: 17.5px;
        width: 0;
    }
}
@media (min-width: 768px) {
    .shape--triangle .shape__space {
        border-width: 0 74px 128px;
        height: 0;
        padding-top: 10px;
        width: 0;
    }
}
@media (min-width: 1024px) {
    .shape--triangle .shape__space {
        border-width: 0 102px 177px;
        height: 0;
        padding-top: 13.5px;
        width: 0;
    }
}
@media (min-width: 1200px) {
    .shape--triangle .shape__space {
        border-width: 0 135px 234px;
        height: 0;
        padding-top: 18px;
        width: 0;
    }
}
@media (min-width: 1392px) {
    .shape--triangle .shape__space {
        border-width: 0 142px 246px;
        height: 0;
        padding-top: 19px;
        width: 0;
    }
}