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

[class^=grid-col-] {
    float: left;
    padding: 0;
    text-align: center
}

.grid-col-3of10 {
    width: 30%
}

@media (max-width:50em) {
    .grid-col-3of10 {
        width: 100%
    }
}

.flexbox {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    background-color: #fff;
}

.box-item-text {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 18rem;
    -ms-flex: 1 1 18rem;
    flex: 1 1 18rem;
    padding: 0 1rem
}

.grid-col-1of2 {
    width: 49%
}

.grid-col-1of4 {
    width: 25%
}

.grid-col-1of22 {
    width: 50%
}

.grid-col-1of3 {
    width: 36%
}

.grid-col-1of3shop {
    width: 33%
}

.grid-col-1of2card {
    width: 49%
}

.grid-col-2of3 {
    width: 66.66%
}

.grid-row {
    float: left
}

.grid-row:after {
    content: "";
    display: block;
    clear: both
}

.grid-col-1of4 > .nav-main-item {
    width: 100%
}

.grid-3of24 {
    width: 40%;
    float: right
}

.grid-1of3 {
    width: 33%
}

@media (max-width:44rem) {
    .grid-col-1of2 {
        width: 100%
    }
    .grid-col-2of3 {
        width: 100%
    }
    .grid-col-1of3 {
        width: 100%
    }
    .grid-col-1of22 {
        width: 100%
    }
    .grid-col-1of4 {
        width: 100%
    }
}