/* Width */
.w-100 { width: 100%; }
.w-50 { width: 50%; }
.w-40px { width: 40px; }

/* Position */
.p-relative { position: relative; }
.p-absolute { position: absolute; }

/* Background */
.bg-none { background: none !important; }

/* Overflow + Text */
.o-hidden { overflow: hidden; }
.o-visible { overflow: visible; }
.o-auto { overflow: auto; }
.t-overflow { width: 97%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; float: left; }
.t-underline { text-decoration: underline; }
.t-upper { text-transform: uppercase; }
.t-normal-style { text-transform: none; }

/* Line height */
.l-100 { line-height: 100%; }
.l-26,.l-26 * { line-height: 26px; }
.l-28,.l-28 * { line-height: 28px; }

/* Display */
.d-block { display: block; }
.d-inline-block { display: inline-block; }
.d-inline { display: inline; }

/* Shadow */
.t-s-0 { text-shadow: none; }
.b-s-0 { box-shadow: none; }

/* Border */
.b-0 { border: 0; }
.b-t-0 { border-top: 0; }
.b-l-0 { border-left: 0; }
.b-r-0 { border-right: 0; }
.b-b-0 { border-bottom: 0; }

.b-radius-0 {
    -webkit-border-radius: 0 0 0 0 !important;
            border-radius: 0 0 0 0 !important;
}

/* Font */
.f-bold { font-weight: bold; }
.font-12 { font-size: 12px; }

/* Paddings */
.p-0 { padding: 0 !important; }
.p-5 { padding: 5px !important; }
.p-10 { padding: 10px !important; }
.p-15 { padding: 15px !important; }
.p-20 { padding: 20px !important; }
.p-25 { padding: 25px !important; }
.p-30 { padding: 30px !important; }
.p-35 { padding: 35px !important; }
.p-40 { padding: 40px !important; }
.p-45 { padding: 45px !important; }
.p-50 { padding: 50px !important; }

.p-t-0 { padding-top: 0 !important; }
.p-t-5 { padding-top: 5px !important; }
.p-t-10 { padding-top: 10px !important; }
.p-t-15 { padding-top: 15px !important; }
.p-t-20 { padding-top: 20px !important; }
.p-t-25 { padding-top: 25px !important; }
.p-t-30 { padding-top: 30px !important; }
.p-t-35 { padding-top: 35px !important; }
.p-t-40 { padding-top: 40px !important; }
.p-t-45 { padding-top: 45px !important; }
.p-t-50 { padding-top: 50px !important; }
.p-t-80 { padding-top: 80px !important; }
.p-t-100 { padding-top: 100px !important; }

.p-b-0 { padding-bottom: 0 !important; }
.p-b-5 { padding-bottom: 5px !important; }
.p-b-10 { padding-bottom: 10px !important; }
.p-b-15 { padding-bottom: 15px !important; }
.p-b-20 { padding-bottom: 20px !important; }
.p-b-25 { padding-bottom: 25px !important; }
.p-b-30 { padding-bottom: 30px !important; }
.p-b-35 { padding-bottom: 35px !important; }
.p-b-40 { padding-bottom: 40px !important; }
.p-b-45 { padding-bottom: 45px !important; }
.p-b-50 { padding-bottom: 50px !important; }
.p-b-100 { padding-bottom: 100px !important; }

.p-l-0 { padding-left: 0 !important; }
.p-l-5 { padding-left: 5px !important; }
.p-l-10 { padding-left: 10px !important; }
.p-l-15 { padding-left: 15px !important; }
.p-l-20 { padding-left: 20px !important; }
.p-l-25 { padding-left: 25px !important; }
.p-l-30 { padding-left: 30px !important; }
.p-l-35 { padding-left: 35px !important; }
.p-l-40 { padding-left: 40px !important; }
.p-l-45 { padding-left: 45px !important; }
.p-l-50 { padding-left: 50px !important; }

.p-r-0 { padding-right: 0 !important; }
.p-r-5 { padding-right: 5px !important; }
.p-r-10 { padding-right: 10px !important; }
.p-r-15 { padding-right: 15px !important; }
.p-r-20 { padding-right: 20px !important; }
.p-r-25 { padding-right: 25px !important; }
.p-r-30 { padding-right: 30px !important; }
.p-r-35 { padding-right: 35px !important; }
.p-r-40 { padding-right: 40px !important; }
.p-r-45 { padding-right: 45px !important; }
.p-r-50 { padding-right: 50px !important; }

/* Margin */
.m-0 { margin: 0 !important; }
.m-5 { margin: 5px !important; }
.m-10 { margin: 10px !important; }
.m-15 { margin: 15px !important; }
.m-20 { margin: 20px !important; }
.m-25 { margin: 25px !important; }
.m-30 { margin: 30px !important; }
.m-35 { margin: 35px !important; }
.m-40 { margin: 40px !important; }
.m-45 { margin: 45px !important; }
.m-50 { margin: 50px !important; }
.m-60 { margin: 60px !important; }
.m-70 { margin: 70px !important; }
.m-80 { margin: 80px !important; }
.m-90 { margin: 90px !important; }
.m-100 { margin: 100px !important; }

.m-t-0 { margin-top: 0 !important; }
.m-t-2 { margin-top: 2px !important; }
.m-t-4 { margin-top: 4px !important; }
.m-t-5 { margin-top: 5px !important; }
.m-t-10 { margin-top: 10px !important; }
.m-t-15 { margin-top: 15px !important; }
.m-t-20 { margin-top: 20px !important; }
.m-t-25 { margin-top: 25px !important; }
.m-t-30 { margin-top: 30px !important; }
.m-t-35 { margin-top: 35px !important; }
.m-t-40 { margin-top: 40px !important; }
.m-t-45 { margin-top: 45px !important; }
.m-t-50 { margin-top: 50px !important; }
.m-t-60 { margin-top: 60px !important; }
.m-t-70 { margin-top: 70px !important; }
.m-t-80 { margin-top: 80px !important; }
.m-t-90 { margin-top: 90px !important; }
.m-t-100 { margin-top: 100px !important; }

.m-b-0 { margin-bottom: 0 !important; }
.m-b-5 { margin-bottom: 5px !important; }
.m-b-10 { margin-bottom: 10px !important; }
.m-b-15 { margin-bottom: 15px !important; }
.m-b-20 { margin-bottom: 20px !important; }
.m-b-25 { margin-bottom: 25px !important; }
.m-b-30 { margin-bottom: 30px !important; }
.m-b-35 { margin-bottom: 35px !important; }
.m-b-40 { margin-bottom: 40px !important; }
.m-b-45 { margin-bottom: 45px !important; }
.m-b-50 { margin-bottom: 50px !important; }
.m-b-60 { margin-bottom: 60px !important; }
.m-b-70 { margin-bottom: 70px !important; }
.m-b-80 { margin-bottom: 80px !important; }
.m-b-90 { margin-bottom: 90px !important; }
.m-b-100 { margin-bottom: 100px !important; }

.m-l-0 { margin-left: 0 !important; }
.m-l-5 { margin-left: 5px !important; }
.m-l-10 { margin-left: 10px !important; }
.m-l-15 { margin-left: 15px !important; }
.m-l-20 { margin-left: 20px !important; }
.m-l-25 { margin-left: 25px !important; }
.m-l-30 { margin-left: 30px !important; }
.m-l-35 { margin-left: 35px !important; }
.m-l-40 { margin-left: 40px !important; }
.m-l-45 { margin-left: 45px !important; }
.m-l-50 { margin-left: 50px !important; }
.m-l-60 { margin-left: 60px !important; }
.m-l-70 { margin-left: 70px !important; }
.m-l-80 { margin-left: 80px !important; }
.m-l-90 { margin-left: 90px !important; }
.m-l-100 { margin-left: 100px !important; }

.m-r-0 { margin-right: 0 !important; }
.m-r-2 { margin-right: 2px !important; }
.m-r-4 { margin-right: 4px !important; }
.m-r-5 { margin-right: 5px !important; }
.m-r-10 { margin-right: 10px !important; }
.m-r-15 { margin-right: 15px !important; }
.m-r-20 { margin-right: 20px !important; }
.m-r-25 { margin-right: 25px !important; }
.m-r-30 { margin-right: 30px !important; }
.m-r-35 { margin-right: 35px !important; }
.m-r-40 { margin-right: 40px !important; }
.m-r-45 { margin-right: 45px !important; }
.m-r-50 { margin-right: 50px !important; }
.m-r-60 { margin-right: 60px !important; }
.m-r-70 { margin-right: 70px !important; }
.m-r-80 { margin-right: 80px !important; }
.m-r-90 { margin-right: 90px !important; }
.m-r-100 { margin-right: 100px !important; }


/* EQUAL HEIGHT */

.equalheight {
    overflow: hidden; 
}
.equalheight .eqbox {
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}
@media (max-width: 767px) {
    .equalheight { overflow: visible; }
    .equalheight .eqbox { margin: 0; padding: 0; }
}

/* HEIGHT COLUMNS */

/* USAGE
<div class="row">
    <div class="row-height">
        <div class="col-xs-2 col-xs-height col-xs-middle">
            <div class="inside"></div>
        </div>
        <div class="col-xs-4 col-lg-5 col-xs-height col-xs-middle">
            <div class="inside"></div>
        </div>
    </div>
</div>
*/

.inside {}
.inside-full-height {
    /*
    // if you want to give content full height give him height: 100%;
    // with content full height you can't apply margins to the content
    // content full height does not work in ie http://stackoverflow.com/questions/27384433/ie-display-table-cell-child-ignores-height-100
    */
    height: 100%;
    margin-top: 0;
    margin-bottom: 0;
}

/* columns of same height styles */

.row-height {
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
}
.col-height {
    display: table-cell;
    float: none;
    height: 100%;
}
.col-top {
    vertical-align: top;
}
.col-middle {
    vertical-align: middle;
}
.col-bottom {
    vertical-align: bottom;
}

@media (min-width: 480px) {
    .row-xs-height {
        display: table;
        table-layout: fixed;
        height: 100%;
        width: 100%;
    }
    .col-xs-height {
        display: table-cell;
        float: none;
        height: 100%;
    }
    .col-xs-top {
        vertical-align: top;
    }
    .col-xs-middle {
        vertical-align: middle;
    }
    .col-xs-bottom {
        vertical-align: bottom;
    }
}

@media (min-width: 768px) {
    .row-sm-height {
        display: table;
        table-layout: fixed;
        height: 100%;
        width: 100%;
    }
    .col-sm-height {
        display: table-cell;
        float: none;
        height: 100%;
    }
    .col-sm-top {
        vertical-align: top;
    }
    .col-sm-middle {
        vertical-align: middle;
    }
    .col-sm-bottom {
        vertical-align: bottom;
    }
}

@media (min-width: 992px) {
    .row-md-height {
        display: table;
        table-layout: fixed;
        height: 100%;
        width: 100%;
    }
    .col-md-height {
        display: table-cell;
        float: none;
        height: 100%;
    }
    .col-md-top {
        vertical-align: top;
    }
    .col-md-middle {
        vertical-align: middle;
    }
    .col-md-bottom {
        vertical-align: bottom;
    }
}

@media (min-width: 1200px) {
    .row-lg-height {
        display: table;
        table-layout: fixed;
        height: 100%;
        width: 100%;
    }
    .col-lg-height {
        display: table-cell;
        float: none;
        height: 100%;
    }
    .col-lg-top {
        vertical-align: top;
    }
    .col-lg-middle {
        vertical-align: middle;
    }
    .col-lg-bottom {
        vertical-align: bottom;
    }
}

/* PULL */
@media (min-width: 992px) {
    .pull-md-right {
        float: right !important;
    }
    .pull-md-left {
        float: left !important;
    }
}


/* Bootstrap five columns grid */
.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}
.col-xs-15 {
    width: 20%;
    float: left;
}
@media (min-width: 768px) {
    .col-sm-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
}

/*
<div class="row">
    <div class="col-md-15 col-sm-3">
        ...
    </div>
</div>
*/

@media (max-width: 479px) {
    .col-xxs-12 {
        width: 100%;
        float: none;
    }
}