X Theme helper classes

helperclasses.css

.x-column {
    float: left;
    margin-right: 4%
}

.x-column.x-1-1 {
    width: 100%
}

.x-column.x-1-2 {
    width: 48%
}

.x-column.x-1-3 {
    width: 30.66666%
}

.x-column.x-2-3 {
    width: 65.33332%
}

.x-column.x-1-4 {
    width: 22%
}

.x-column.x-3-4 {
    width: 74%
}

.x-column.x-1-5 {
    width: 16.8%
}

.x-column.x-2-5 {
    width: 37.6%
}

.x-column.x-3-5 {
    width: 58.4%
}

.x-column.x-4-5 {
    width: 79.2%
}

.x-column.x-1-6 {
    width: 13.33332%
}

.x-column.x-5-6 {
    width: 82.66666%
}

.x-column.last,.x-column:last-of-type {
    margin-right: 0
}
@media (max-width: 480px) {
    .x-column.x-xs {
        float:none;
        width: 100%;
        margin-right: 0
    }
}

@media (max-width: 767px) {
    .x-column.x-sm {
        float:none;
        width: 100%;
        margin-right: 0
    }
}

@media (max-width: 979px) {
    .x-column.x-md {
        float:none;
        width: 100%;
        margin-right: 0
    }
}

@media (min-width: 1200px) {
    .x-hide-xl {
        display:none !important
    }
}

@media (min-width: 980px) and (max-width: 1199px) {
    .x-hide-lg {
        display:none !important
    }
}

@media (min-width: 768px) and (max-width: 979px) {
    .x-hide-md {
        display:none !important
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    .x-hide-sm {
        display:none !important
    }
}

@media (max-width: 480px) {
    .x-hide-xs {
        display:none !important
    }
}

.x-visible-phone {
    display: none !important
}

.x-visible-tablet {
    display: none !important
}

.x-visible-desktop {
    display: inherit !important
}

span.x-visible-desktop {
    display: inline !important
}

.x-hidden-desktop {
    display: none !important
}

@media (min-width: 768px) and (max-width: 979px) {
    .x-visible-tablet {
        display:inherit !important
    }

    span.x-visible-tablet {
        display: inline !important
    }

    .x-hidden-tablet {
        display: none !important
    }

    .x-hidden-desktop {
        display: inherit !important
    }

    span.x-hidden-desktop {
        display: inline !important
    }

    .x-visible-desktop {
        display: none !important
    }
}

@media (max-width: 767px) {
    .x-visible-phone {
        display:inherit !important
    }

    span.x-visible-phone {
        display: inline !important
    }

    .x-hidden-phone {
        display: none !important
    }

    .x-hidden-desktop {
        display: inherit !important
    }

    span.x-hidden-desktop {
        display: inline !important
    }

    .x-visible-desktop {
        display: none !important
    }
}

.content-box {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box
}

.hide-text {
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0
}

.right {
    float: right
}

.left {
    float: left
}

.center-block {
    margin-left: auto;
    margin-right: auto
}

.center-list {
    display: table;
    margin-left: auto;
    margin-right: auto
}

.hide {
    display: none
}

.show {
    display: block
}

.hidden {
    display: none !important;
    visibility: hidden
}

.invisible {
    visibility: hidden
}

.visually-hidden,.screen-reader-text {
    overflow: hidden;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    clip: rect(0 0 0 0)
}

.visually-hidden.focusable:active,.visually-hidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto
}

.overflow-hidden {
    overflow: hidden
}

.affix {
    position: fixed
}

.w-900 {
    font-weight: 900
}

.w-800 {
    font-weight: 800
}

.w-700 {
    font-weight: 700
}

.w-600 {
    font-weight: 600
}

.w-500 {
    font-weight: 500
}

.w-400 {
    font-weight: 400
}

.w-300 {
    font-weight: 300
}

.w-200 {
    font-weight: 200
}

.w-100 {
    font-weight: 100
}

.tt-upper {
    text-transform: uppercase
}

.tt-lower {
    text-transform: lowercase
}

.tt-none {
    text-transform: none
}

.center-text {
    text-align: center
}

.right-text {
    text-align: right
}

.left-text {
    text-align: left
}

.justify-text {
    text-align: justify
}