.segment {
    padding: 30px 0;
}

@media(max-width:1500px) {
    .segment {
        padding: 30px;
    }
}

.grid-wrapper {
    max-width: 1420px;
    margin: auto;
    position: relative;
}

    .grid-wrapper.grid-50 {
        max-width: 795px;
    }

.grid {
    width: auto !important;
    display: flex;
    flex-grow: 0;
    flex-wrap: wrap;
    margin-left: -30px;
    margin-right: -30px;
    padding: 30px 0;
}

    .grid [class^=col-] > .component ~ .component {
        margin-top: 30px;
    }

    .grid [class^=col-] .component {
        margin-top: 0;
    }

    .grid .col-100, .grid .col-75, .grid .col-66, .grid .col-60, .grid .col-50, .grid .col-40, .grid .col-33, .grid .col-30, .grid .col-25, .grid .col-20, .grid .col-16 {
        position: relative;
        width: 100%;
        flex-grow: 0;
        flex-shrink: 0;
        padding-left: 30px;
        padding-right: 30px;
    }

    .grid .col-grow {
        flex-grow: 1;
    }

@media (min-width: 768px) {
    .grid .col-100 {
        width: 100%;
    }

    .grid .col-75 {
        width: 75%;
    }

    .grid .col-66 {
        width: 66.6666666667%;
    }

    .grid .col-60 {
        width: 60%;
    }

    .grid .col-50 {
        width: 50%;
    }

    .grid .col-40 {
        width: 40%;
    }

    .grid .col-30 {
        width: 30%;
    }

    .grid .col-33 {
        width: 33.3333333333%;
    }

    .grid .col-25 {
        width: 25%;
    }

    .grid .col-20 {
        width: 20%;
    }

    .grid .col-16 {
        width: 16.6666666667%;
    }

    .grid .col-hidden {
        display: none;
    }

    .grid .col-show {
        display: block;
    }
}

@media (max-width: 1365px) and (min-width: 768px) {
    .grid .col-laptop-100 {
        width: 100%;
    }

    .grid .col-laptop-75 {
        width: 75%;
    }

    .grid .col-laptop-66 {
        width: 66.6666666667%;
    }

    .grid .col-laptop-50 {
        width: 50%;
    }

    .grid .col-laptop-33 {
        width: 33.3333333333%;
    }

    .grid .col-laptop-25 {
        width: 25%;
    }

    .grid .col-laptop-20 {
        width: 20%;
    }

    .grid .col-laptop-16 {
        width: 16.6666666667%;
    }

    .grid .col-laptop-hidden {
        display: none;
    }

    .grid .col-laptop-show {
        display: block;
    }
}

@media (max-width: 1023px) and (min-width: 768px) {
    .grid .col-tablet-100 {
        width: 100%;
    }

    .grid .col-tablet-75 {
        width: 75%;
    }

    .grid .col-tablet-66 {
        width: 66.6666666667%;
    }

    .grid .col-tablet-50 {
        width: 50%;
    }

    .grid .col-tablet-33 {
        width: 33.3333333333%;
    }

    .grid .col-tablet-25 {
        width: 25%;
    }

    .grid .col-tablet-20 {
        width: 20%;
    }

    .grid .col-tablet-16 {
        width: 16.6666666667%;
    }

    .grid .col-tablet-hidden {
        display: none;
    }

    .grid .col-tablet-show {
        display: block;
    }
}

@media (max-width: 767px) {
    .grid .col-mobile-100 {
        width: 100%;
    }

    .grid .col-mobile-75 {
        width: 75%;
    }

    .grid .col-mobile-66 {
        width: 66.6666666667%;
    }

    .grid .col-mobile-50 {
        width: 50%;
    }

    .grid .col-mobile-33 {
        width: 33.3333333333%;
    }

    .grid .col-mobile-25 {
        width: 25%;
    }

    .grid .col-mobile-20 {
        width: 20%;
    }

    .grid .col-mobile-16 {
        width: 16.6666666667%;
    }

    .grid .col-mobile-hidden {
        display: none;
    }

    .grid .col-mobile-show {
        display: block;
    }
}

.grid.no-gutter {
    margin-left: 0;
    margin-right: 0;
}

    .grid.no-gutter > [class^=col-] {
        padding-left: 0;
        padding-right: 0;
    }

.grid.sm-gutter {
    margin-left: -7.5px;
    margin-right: -7.5px;
}

    .grid.sm-gutter > [class^=col-] {
        padding-left: 7.5px;
        padding-right: 7.5px;
    }

.grid.md-gutter {
    margin-left: -15px;
    margin-right: -15px;
}

    .grid.md-gutter > [class^=col-] {
        padding-left: 15px;
        padding-right: 15px;
    }

.grid.lg-gutter {
    margin-left: -30px;
    margin-right: -30px;
}

    .grid.lg-gutter > [class^=col-] {
        padding-left: 30px;
        padding-right: 30px;
    }

.grid.xl-gutter {
    margin-left: -45px;
    margin-right: -45px;
}

    .grid.xl-gutter > [class^=col-] {
        padding-left: 45px;
        padding-right: 45px;
    }

.vertical-align {
    align-items: center;
}

.reverse-order {
    flex-direction: row-reverse;
}

@media (max-width: 767px) {
    .reverse-order {
        flex-direction: column-reverse;
    }

    .reverse-order-mobile {
        flex-direction: column-reverse;
    }

    .reverse-order.reverse-order-mobile {
        flex-direction: row;
    }
}

@media (max-width: 767px) {
    div[class^=col-] {
        margin-bottom: 30px;
    }
}

@media (min-width: 768px) {
    .descending-columns div[class^=col-]:nth-of-type(2) {
        margin-top: 300px;
    }

    .descending-columns div[class^=col-]:nth-of-type(3) {
        margin-top: 600px;
    }

    .descending-columns div[class^=col-]:nth-of-type(4) {
        margin-top: 900px;
    }
}