.w-100 {
    min-width: 215px;
    width: 100%;
    width: calc(100% - 5px);
}

.w-50 {
    min-width: 215px;
    width: 49%;
    width: calc(50% - 5px);
}

.w-33 {
    min-width: 215px;
    width: 32%;
    width: calc(33.33% - 5px);
}

.w-25 {
    min-width: 215px;
    width: 25%;
    width: calc(25% - 5px);
}

.w-75 {
    min-width: 215px;
    width: 75%;
    width: calc(75% - 5px);
}

.w-66 {
    min-width: 215px;
    width: 66%;
    width: calc(66.66% - 5px);
}

.wd-100 {
    width: 100%;
    width: calc(100% - 105px);
}

.wf-100 {
    width: 100%;
}

.wf-50 {
    width: 50%;
}

.wf-33 {
    width: 33.33%;
}

.wf-25 {
    width: 25%;
}

.wf-75 {
    width: 75%;
}

.wf-66 {
    width: 66.66%;
}

.spacer {
    padding: 5px;
}

.fw-100 {
    width: 100%;
    margin: 5px;
}

.fw-50 {
    width: 50%;
    margin: 5px;
}

.fw-33 {
    width: 33%;
    margin: 5px;
}

.fw-25 {
    width: 25%;
    margin: 5px;
}

.fw-75 {
    width: 75%;
    margin: 5px;
}

.fw-66 {
    width: 66%;
    margin: 5px;;
}

@media only screen and (min-width: 501px) and (max-width: 900px) {
    .box.w-33, .box.w-25 {
        width: 49%;
        width: calc(50% - 5px);
    }

    .box.w-75, .box.w-66 {
        width: 49%;
        width: calc(50% - 5px);
    }
}

@media only screen and (max-width: 500px) {
    .box.w-33, .box.w-50, .box.w-25, .box.w-66, .box.w-75 {
        width: 100%;
        width: calc(100% - 5px);
    }
}