/* ==========================================================================
   OBK GRID
   Simple and useful grid system.
   ========================================================================== */

/*
 * STRUCTURE
 * Simple example:
 *
 *  <div class="OBK-grid OBK-grid--medium">
 *      <div class="OBK-grid__row OBK-grid__gap--l OBK-grid__gap-rm--vertical">
 *          <div class="OBK-grid__col">
 *          </div>
 *          <div class="OBK-grid__col">
 *          </div>
 *      </div>
 *   </div>
 *
 */

.OBK-grid,
.OBK-grid__row,
.OBK-grid__col {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.OBK-grid {
    margin: 0 auto;
    width: 100%;
}
.OBK-grid__row {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;  
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: row;
    -ms-flex-wrap: row;
    flex-wrap: wrap;
}
.OBK-grid__col {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    max-width: 100%;
}

/*
 * SIZE
 * Only on grid
 */

.OBK-grid--s {
    max-width: 1024px;
}
.OBK-grid--m {
    max-width: 1366px;
}
.OBK-grid--l {
    max-width: 1920px;
}

/*
 * ADD GAP
 * Only on rows and cols 
 */

.OBK-grid__gap--s {
    padding: 2.0em;
}
.OBK-grid__gap--m {
    padding: 4.0em;
}
.OBK-grid__gap--l {
    padding: 8.0em;
}

/*
 * GAP REMOVAL
 * Only on rows and cols 
 */

.OBK-grid__gap-rm--bottom {
    padding-bottom: 0;
}
.OBK-grid__gap-rm--left {
    padding-left: 0;
}
.OBK-grid__gap-rm--right {
    padding-right: 0;
}
.OBK-grid__gap-rm--top {
    padding-top: 0;
}
.OBK-grid__gap-rm--horizontal {
    padding-left: 0;
    padding-right: 0;
}
.OBK-grid__gap-rm--vertical {
    padding-bottom: 0;
    padding-top: 0;
}

/* MEDIA QUERIES
---------------------------------------------------------------------------- */

@media only screen and (max-width: 768px) {

    /*
     * ADD GAP
     * Only on rows and cols 
     */

    .OBK-grid__gap--s {
        padding: 1.0em;
    }
    .OBK-grid__gap--m {
        padding: 2.0em;
    }
    .OBK-grid__gap--l {
        padding: 4.0em;
    }

    /*
     * GAP REMOVAL
     * Only on rows and cols 
     */

    .OBK-grid__gap-rm--bottom {
        padding-bottom: 0;
    }
    .OBK-grid__gap-rm--left {
        padding-left: 0;
    }
    .OBK-grid__gap-rm--right {
        padding-right: 0;
    }
    .OBK-grid__gap-rm--top {
        padding-top: 0;
    }
    .OBK-grid__gap-rm--horizontal {
        padding-left: 0;
        padding-right: 0;
    }
    .OBK-grid__gap-rm--vertical {
        padding-bottom: 0;
        padding-top: 0;
    }

}