/**
* Responsove mobile first grid system
*
* Responsove mobile first grid system based on wrappers, containers, rows, columns, gutters and offset. Columns uses relative units, in this case percentages (%).
*
* @project GdmResponsiveMFGrid
* @file grid_resp_mf.css
* @version 1.0
* @author Philippe De Pauw - Waterschoot
* @copyright 2016
* @license MIT
*/

/**
* ————————-
* @section Global Grid settings
* ————————-
*/ 
 
* {
    box-sizing: border-box;
}
 
/**
* ————————-
* @section Wrapper, container and row.
* ————————-
*/
 
 .grid__wrapper {
    display: block;
    margin: 0;
    padding: 0;
}

.grid__container {
    display: block;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 16px;
}

.grid__row {
    display: block;
    margin: 0 -16px;
    padding: 0;
    overflow: hidden;
}

.grid__wrapper:after,
.grid__container:after,
.grid__row:after {
    content: "";
    display: table;
    clear: both;
}

/**
* ————————-
* @section Grid columns.
* ————————-
*/

.grid__column {
    position: relative;
    float: left;
    padding: 0 16px;
    width: 100%;
}

.grid__bp0-column-12,
.grid__bp0-column-11,
.grid__bp0-column-10,
.grid__bp0-column-9,
.grid__bp0-column-8,
.grid__bp0-column-7,
.grid__bp0-column-6,
.grid__bp0-column-5,
.grid__bp0-column-4,
.grid__bp0-column-3,
.grid__bp0-column-2,
.grid__bp0-column-1,
.grid__bp1-column-12,
.grid__bp1-column-11,
.grid__bp1-column-10,
.grid__bp1-column-9,
.grid__bp1-column-8,
.grid__bp1-column-7,
.grid__bp1-column-6,
.grid__bp1-column-5,
.grid__bp1-column-4,
.grid__bp1-column-3,
.grid__bp1-column-2,
.grid__bp1-column-1, 
.grid__bp2-column-12,
.grid__bp2-column-11,
.grid__bp2-column-10,
.grid__bp2-column-9,
.grid__bp2-column-8,
.grid__bp2-column-7,
.grid__bp2-column-6,
.grid__bp2-column-5,
.grid__bp2-column-4,
.grid__bp2-column-3,
.grid__bp2-column-2,
.grid__bp2-column-1,
.grid__bp3-column-12,
.grid__bp3-column-11,
.grid__bp3-column-10,
.grid__bp3-column-9,
.grid__bp3-column-8,
.grid__bp3-column-7,
.grid__bp3-column-6,
.grid__bp3-column-5,
.grid__bp3-column-4,
.grid__bp3-column-3,
.grid__bp3-column-2,
.grid__bp3-column-1,
.grid__bp4-column-12,
.grid__bp4-column-11,
.grid__bp4-column-10,
.grid__bp4-column-9,
.grid__bp4-column-8,
.grid__bp4-column-7,
.grid__bp4-column-6,
.grid__bp4-column-5,
.grid__bp4-column-4,
.grid__bp4-column-3,
.grid__bp4-column-2,
.grid__bp4-column-1,
.grid__bp5-column-12,
.grid__bp5-column-11,
.grid__bp5-column-10,
.grid__bp5-column-9,
.grid__bp5-column-8,
.grid__bp5-column-7,
.grid__bp5-column-6,
.grid__bp5-column-5,
.grid__bp5-column-4,
.grid__bp5-column-3,
.grid__bp5-column-2,
.grid__bp5-column-1 {
    position: relative;
    float: left;
/*    padding: 0 16px;*/
    width: 100%;
}

.grid__bp0-column-12 { width: 100%; }
.grid__bp0-column-11 { width: 91.666666666667%; }
.grid__bp0-column-10 { width: 83.333333333333%; }
.grid__bp0-column-9 {  width: 75%; }
.grid__bp0-column-8 {  width: 66.666666666667%; }
.grid__bp0-column-7 {  width: 58.333333333333%; }
.grid__bp0-column-6 {  width: 50%; }
.grid__bp0-column-5 {  width: 41.666666666667%; }
.grid__bp0-column-4 {  width: 33.333333333333%; }
.grid__bp0-column-3 {  width: 25%; }
.grid__bp0-column-2 {  width: 16.666666666667%; }
.grid__bp0-column-1 {  width: 8.333333333333%; }

/**
* ————————-
* @section Grid Offset.
* ————————-
*/

.grid__bp0-offset-12 { margin-left: 100%; }
.grid__bp0-offset-11 { margin-left: 91.666666666667%; }
.grid__bp0-offset-10 { margin-left: 83.333333333333%; }
.grid__bp0-offset-9 {  margin-left: 75%; }
.grid__bp0-offset-8 {  margin-left: 66.666666666667%; }
.grid__bp0-offset-7 {  margin-left: 58.333333333333%; }
.grid__bp0-offset-6 {  margin-left: 50%; }
.grid__bp0-offset-5 {  margin-left: 41.666666666667%; }
.grid__bp0-offset-4 {  margin-left: 33.333333333333%; }
.grid__bp0-offset-3 {  margin-left: 25%; }
.grid__bp0-offset-2 {  margin-left: 16.666666666667%; }
.grid__bp0-offset-1 {  margin-left: 8.333333333333%; }

/**
* ————————-
* @section Grid Push.
* ————————-
*/

.grid__bp0-push-12 { left: 100%; }
.grid__bp0-push-11 { left: 91.666666666667%; }
.grid__bp0-push-10 { left: 83.333333333333%; }
.grid__bp0-push-9 {  left: 75%; }
.grid__bp0-push-8 {  left: 66.666666666667%; }
.grid__bp0-push-7 {  left: 58.333333333333%; }
.grid__bp0-push-6 {  left: 50%; }
.grid__bp0-push-5 {  left: 41.666666666667%; }
.grid__bp0-push-4 {  left: 33.333333333333%; }
.grid__bp0-push-3 {  left: 25%; }
.grid__bp0-push-2 {  left: 16.666666666667%; }
.grid__bp0-push-1 {  left: 8.333333333333%; }
.grid__bp0-push-0 {  right: 0; }

/**
* ————————-
* @section Grid Pull.
* ————————-
*/

.grid__bp0-pull-12 { right: 100%; }
.grid__bp0-pull-11 { right: 91.666666666667%; }
.grid__bp0-pull-10 { right: 83.333333333333%; }
.grid__bp0-pull-9 {  right: 75%; }
.grid__bp0-pull-8 {  right: 66.666666666667%; }
.grid__bp0-pull-7 {  right: 58.333333333333%; }
.grid__bp0-pull-6 {  right: 50%; }
.grid__bp0-pull-5 {  right: 41.666666666667%; }
.grid__bp0-pull-4 {  right: 33.333333333333%; }
.grid__bp0-pull-3 {  right: 25%; }
.grid__bp0-pull-2 {  right: 16.666666666667%; }
.grid__bp0-pull-1 {  right: 8.333333333333%; }
.grid__bp0-pull-0 {  right: 0; }

/**
* ————————-
* @section Development Grid Selectors.
* ————————-
*/
.grid__development .grid__wrapper {
    background: rgba(255, 0, 0, 0.4);
}
.grid__development .grid__wrapper:before {
    display: block;
    padding: 16px;
    
    content: "Breakpoint 0: 0 to 320px";
}
.grid__development .grid__container {
    background: rgba(0, 255, 0, 0.4);
}
.grid__development .grid__row {
    background: rgba(0, 0, 255, 0.4);
}
.grid__development *[class*="grid__bp"] {
    background: rgba(255, 255, 0, 0.4);
    min-height: 128px;
    margin-bottom: 12px;
    
    text-align: center;
    line-height: 128px;
    
    transition: all 186ms ease-out 0s;
}
.grid__development *[class*="grid__bp"] *[class*="grid__bp"]{
    background: rgba(255, 255, 0, 0.4);
    min-height: 92px;
    margin-bottom: 12px;
    
    text-align: center;
    line-height: 92px;
}
.grid__development *[class*="grid__bp0-column-"] > * {
    background: rgba(255, 0, 255, 0.4);
}
.grid__development *[class*="grid__bp1-column-"] > * {
    background: rgba(255, 0, 255, 0.4);
}
.grid__development *[class*="grid__bp2-column-"] > * {
    background: rgba(255, 0, 255, 0.4);
}
.grid__development *[class*="grid__bp3-column-"] > * {
    background: rgba(255, 0, 255, 0.4);
}
.grid__development *[class*="grid__bp4-column-"] > * {
    background: rgba(255, 0, 255, 0.4);
}
.grid__development *[class*="grid__bp5-column-"] > * {
    background: rgba(255, 0, 255, 0.4);
}

/**
* ————————-
* @section Media Queries.
* ————————-
* breakpoints: bp1 = 320px, bp2 = 480px, bp3 = 680px, bp4 = 960px, bp5 = 1140px
*/
@media (min-width: 320px) {
    .grid__bp1-column-12 { width: 100%; }
    .grid__bp1-column-11 { width: 91.666666666667%; }
    .grid__bp1-column-10 { width: 83.333333333333%; }
    .grid__bp1-column-9 {  width: 75%; }
    .grid__bp1-column-8 {  width: 66.666666666667%; }
    .grid__bp1-column-7 {  width: 58.333333333333%; }
    .grid__bp1-column-6 {  width: 50%; }
    .grid__bp1-column-5 {  width: 41.666666666667%; }
    .grid__bp1-column-4 {  width: 33.333333333333%; }
    .grid__bp1-column-3 {  width: 25%; }
    .grid__bp1-column-2 {  width: 16.666666666667%; }
    .grid__bp1-column-1 {  width: 8.333333333333%; }

    .grid__bp1-offset-12 { margin-left: 100%; }
    .grid__bp1-offset-11 { margin-left: 91.666666666667%; }
    .grid__bp1-offset-10 { margin-left: 83.333333333333%; }
    .grid__bp1-offset-9 {  margin-left: 75%; }
    .grid__bp1-offset-8 {  margin-left: 66.666666666667%; }
    .grid__bp1-offset-7 {  margin-left: 58.333333333333%; }
    .grid__bp1-offset-6 {  margin-left: 50%; }
    .grid__bp1-offset-5 {  margin-left: 41.666666666667%; }
    .grid__bp1-offset-4 {  margin-left: 33.333333333333%; }
    .grid__bp1-offset-3 {  margin-left: 25%; }
    .grid__bp1-offset-2 {  margin-left: 16.666666666667%; }
    .grid__bp1-offset-1 {  margin-left: 8.333333333333%; }
    
    .grid__bp1-push-12 { left: 100%; }
    .grid__bp1-push-11 { left: 91.666666666667%; }
    .grid__bp1-push-10 { left: 83.333333333333%; }
    .grid__bp1-push-9 {  left: 75%; }
    .grid__bp1-push-8 {  left: 66.666666666667%; }
    .grid__bp1-push-7 {  left: 58.333333333333%; }
    .grid__bp1-push-6 {  left: 50%; }
    .grid__bp1-push-5 {  left: 41.666666666667%; }
    .grid__bp1-push-4 {  left: 33.333333333333%; }
    .grid__bp1-push-3 {  left: 25%; }
    .grid__bp1-push-2 {  left: 16.666666666667%; }
    .grid__bp1-push-1 {  left: 8.333333333333%; }
    .grid__bp1-push-0 {  left: 0; }
    
    .grid__bp1-pull-12 { right: 100%; }
    .grid__bp1-pull-11 { right: 91.666666666667%; }
    .grid__bp1-pull-10 { right: 83.333333333333%; }
    .grid__bp1-pull-9 {  right: 75%; }
    .grid__bp1-pull-8 {  right: 66.666666666667%; }
    .grid__bp1-pull-7 {  right: 58.333333333333%; }
    .grid__bp1-pull-6 {  right: 50%; }
    .grid__bp1-pull-5 {  right: 41.666666666667%; }
    .grid__bp1-pull-4 {  right: 33.333333333333%; }
    .grid__bp1-pull-3 {  right: 25%; }
    .grid__bp1-pull-2 {  right: 16.666666666667%; }
    .grid__bp1-pull-1 {  right: 8.333333333333%; }
    .grid__bp1-pull-0 {  right: 0; }
    
    .grid__development .grid__wrapper:before {
        content: "Breakpoint 1: 320 to 480px";
    }
}

@media (min-width: 480px) {
    .grid__bp2-column-12 { width: 100%; }
    .grid__bp2-column-11 { width: 91.666666666667%; }
    .grid__bp2-column-10 { width: 83.333333333333%; }
    .grid__bp2-column-9 {  width: 75%; }
    .grid__bp2-column-8 {  width: 66.666666666667%; }
    .grid__bp2-column-7 {  width: 58.333333333333%; }
    .grid__bp2-column-6 {  width: 50%; }
    .grid__bp2-column-5 {  width: 41.666666666667%; }
    .grid__bp2-column-4 {  width: 33.333333333333%; }
    .grid__bp2-column-3 {  width: 25%; }
    .grid__bp2-column-2 {  width: 16.666666666667%; }
    .grid__bp2-column-1 {  width: 8.333333333333%; }

    .grid__bp2-offset-12 { margin-left: 100%; }
    .grid__bp2-offset-11 { margin-left: 91.666666666667%; }
    .grid__bp2-offset-10 { margin-left: 83.333333333333%; }
    .grid__bp2-offset-9 {  margin-left: 75%; }
    .grid__bp2-offset-8 {  margin-left: 66.666666666667%; }
    .grid__bp2-offset-7 {  margin-left: 58.333333333333%; }
    .grid__bp2-offset-6 {  margin-left: 50%; }
    .grid__bp2-offset-5 {  margin-left: 41.666666666667%; }
    .grid__bp2-offset-4 {  margin-left: 33.333333333333%; }
    .grid__bp2-offset-3 {  margin-left: 25%; }
    .grid__bp2-offset-2 {  margin-left: 16.666666666667%; }
    .grid__bp2-offset-1 {  margin-left: 8.333333333333%; }
    
    .grid__bp2-push-12 { left: 100%; }
    .grid__bp2-push-11 { left: 91.666666666667%; }
    .grid__bp2-push-10 { left: 83.333333333333%; }
    .grid__bp2-push-9 {  left: 75%; }
    .grid__bp2-push-8 {  left: 66.666666666667%; }
    .grid__bp2-push-7 {  left: 58.333333333333%; }
    .grid__bp2-push-6 {  left: 50%; }
    .grid__bp2-push-5 {  left: 41.666666666667%; }
    .grid__bp2-push-4 {  left: 33.333333333333%; }
    .grid__bp2-push-3 {  left: 25%; }
    .grid__bp2-push-2 {  left: 16.666666666667%; }
    .grid__bp2-push-1 {  left: 8.333333333333%; }
    .grid__bp2-push-0 {  left: 0; }
    
    .grid__bp2-pull-12 { right: 100%; }
    .grid__bp2-pull-11 { right: 91.666666666667%; }
    .grid__bp2-pull-10 { right: 83.333333333333%; }
    .grid__bp2-pull-9 {  right: 75%; }
    .grid__bp2-pull-8 {  right: 66.666666666667%; }
    .grid__bp2-pull-7 {  right: 58.333333333333%; }
    .grid__bp2-pull-6 {  right: 50%; }
    .grid__bp2-pull-5 {  right: 41.666666666667%; }
    .grid__bp2-pull-4 {  right: 33.333333333333%; }
    .grid__bp2-pull-3 {  right: 25%; }
    .grid__bp2-pull-2 {  right: 16.666666666667%; }
    .grid__bp2-pull-1 {  right: 8.333333333333%; }
    .grid__bp2-pull-0 {  right: 0; }
    
    .grid__development .grid__wrapper:before {
        content: "Breakpoint 2: 480 to 680px";
    }
}
@media screen and (min-device-width: 480px) {
    .grid__bp2-column-12 { width: 100%; }
    .grid__bp2-column-6 { width: 100%; }
}
@media screen and (min-width: 960px) {
    .grid__bp4-column-12 { width: 100%; }
    .grid__bp4-column-6 { width: 100% !important; }
}
@media screen and (min-width: 1140px) {
    .grid__bp5-column-12 { width: 100%; }
    .grid__bp5-column-6 { width: 50% !important; }
}

@media (min-width: 680px) {
    .grid__bp3-column-12 { width: 100%; }
    .grid__bp3-column-11 { width: 91.666666666667%; }
    .grid__bp3-column-10 { width: 83.333333333333%; }
    .grid__bp3-column-9 {  width: 75%; }
    .grid__bp3-column-8 {  width: 66.666666666667%; }
    .grid__bp3-column-7 {  width: 58.333333333333%; }
    .grid__bp3-column-6 {  width: 50%; }
    .grid__bp3-column-5 {  width: 41.666666666667%; }
    .grid__bp3-column-4 {  width: 33.333333333333%; }
    .grid__bp3-column-3 {  width: 25%; }
    .grid__bp3-column-2 {  width: 16.666666666667%; }
    .grid__bp3-column-1 {  width: 8.333333333333%; }

    .grid__bp3-offset-12 { margin-left: 100%; }
    .grid__bp3-offset-11 { margin-left: 91.666666666667%; }
    .grid__bp3-offset-10 { margin-left: 83.333333333333%; }
    .grid__bp3-offset-9 {  margin-left: 75%; }
    .grid__bp3-offset-8 {  margin-left: 66.666666666667%; }
    .grid__bp3-offset-7 {  margin-left: 58.333333333333%; }
    .grid__bp3-offset-6 {  margin-left: 50%; }
    .grid__bp3-offset-5 {  margin-left: 41.666666666667%; }
    .grid__bp3-offset-4 {  margin-left: 33.333333333333%; }
    .grid__bp3-offset-3 {  margin-left: 25%; }
    .grid__bp3-offset-2 {  margin-left: 16.666666666667%; }
    .grid__bp3-offset-1 {  margin-left: 8.333333333333%; }
    
    .grid__bp3-push-12 { left: 100%; }
    .grid__bp3-push-11 { left: 91.666666666667%; }
    .grid__bp3-push-10 { left: 83.333333333333%; }
    .grid__bp3-push-9 {  left: 75%; }
    .grid__bp3-push-8 {  left: 66.666666666667%; }
    .grid__bp3-push-7 {  left: 58.333333333333%; }
    .grid__bp3-push-6 {  left: 50%; }
    .grid__bp3-push-5 {  left: 41.666666666667%; }
    .grid__bp3-push-4 {  left: 33.333333333333%; }
    .grid__bp3-push-3 {  left: 25%; }
    .grid__bp3-push-2 {  left: 16.666666666667%; }
    .grid__bp3-push-1 {  left: 8.333333333333%; }
    .grid__bp3-push-0 {  left: 0; }
    
    .grid__bp3-pull-12 { right: 100%; }
    .grid__bp3-pull-11 { right: 91.666666666667%; }
    .grid__bp3-pull-10 { right: 83.333333333333%; }
    .grid__bp3-pull-9 {  right: 75%; }
    .grid__bp3-pull-8 {  right: 66.666666666667%; }
    .grid__bp3-pull-7 {  right: 58.333333333333%; }
    .grid__bp3-pull-6 {  right: 50%; }
    .grid__bp3-pull-5 {  right: 41.666666666667%; }
    .grid__bp3-pull-4 {  right: 33.333333333333%; }
    .grid__bp3-pull-3 {  right: 25%; }
    .grid__bp3-pull-2 {  right: 16.666666666667%; }
    .grid__bp3-pull-1 {  right: 8.333333333333%; }
    .grid__bp3-pull-0 {  right: 0; }
    
    .grid__development .grid__wrapper:before {
        content: "Breakpoint 3: 680 to 960px";
    }
}

@media (min-width: 960px) {
    .grid__bp4-column-12 { width: 100%; }
    .grid__bp4-column-11 { width: 91.666666666667%; }
    .grid__bp4-column-10 { width: 83.333333333333%; }
    .grid__bp4-column-9 {  width: 75%; }
    .grid__bp4-column-8 {  width: 66.666666666667%; }
    .grid__bp4-column-7 {  width: 58.333333333333%; }
    .grid__bp4-column-6 {  width: 50%; }
    .grid__bp4-column-5 {  width: 41.666666666667%; }
    .grid__bp4-column-4 {  width: 33.333333333333%; }
    .grid__bp4-column-3 {  width: 25%; }
    .grid__bp4-column-2 {  width: 16.666666666667%; }
    .grid__bp4-column-1 {  width: 8.333333333333%; }

    .grid__bp4-offset-12 { margin-left: 100%; }
    .grid__bp4-offset-11 { margin-left: 91.666666666667%; }
    .grid__bp4-offset-10 { margin-left: 83.333333333333%; }
    .grid__bp4-offset-9 {  margin-left: 75%; }
    .grid__bp4-offset-8 {  margin-left: 66.666666666667%; }
    .grid__bp4-offset-7 {  margin-left: 58.333333333333%; }
    .grid__bp4-offset-6 {  margin-left: 50%; }
    .grid__bp4-offset-5 {  margin-left: 41.666666666667%; }
    .grid__bp4-offset-4 {  margin-left: 33.333333333333%; }
    .grid__bp4-offset-3 {  margin-left: 25%; }
    .grid__bp4-offset-2 {  margin-left: 16.666666666667%; }
    .grid__bp4-offset-1 {  margin-left: 8.333333333333%; }
    
    .grid__bp4-push-12 { left: 100%; }
    .grid__bp4-push-11 { left: 91.666666666667%; }
    .grid__bp4-push-10 { left: 83.333333333333%; }
    .grid__bp4-push-9 {  left: 75%; }
    .grid__bp4-push-8 {  left: 66.666666666667%; }
    .grid__bp4-push-7 {  left: 58.333333333333%; }
    .grid__bp4-push-6 {  left: 50%; }
    .grid__bp4-push-5 {  left: 41.666666666667%; }
    .grid__bp4-push-4 {  left: 33.333333333333%; }
    .grid__bp4-push-3 {  left: 25%; }
    .grid__bp4-push-2 {  left: 16.666666666667%; }
    .grid__bp4-push-1 {  left: 8.333333333333%; }
    .grid__bp4-push-0 {  left: 0; }
    
    .grid__bp4-pull-12 { right: 100%; }
    .grid__bp4-pull-11 { right: 91.666666666667%; }
    .grid__bp4-pull-10 { right: 83.333333333333%; }
    .grid__bp4-pull-9 {  right: 75%; }
    .grid__bp4-pull-8 {  right: 66.666666666667%; }
    .grid__bp4-pull-7 {  right: 58.333333333333%; }
    .grid__bp4-pull-6 {  right: 50%; }
    .grid__bp4-pull-5 {  right: 41.666666666667%; }
    .grid__bp4-pull-4 {  right: 33.333333333333%; }
    .grid__bp4-pull-3 {  right: 25%; }
    .grid__bp4-pull-2 {  right: 16.666666666667%; }
    .grid__bp4-pull-1 {  right: 8.333333333333%; }
    .grid__bp4-pull-0 {  right: 0; }
    
    .grid__development .grid__wrapper:before {
        content: "Breakpoint 4: 960 to 1140px";
    }
}

@media (min-width: 1140px) {
    .grid__bp5-column-12 { width: 100%; }
    .grid__bp5-column-11 { width: 91.666666666667%; }
    .grid__bp5-column-10 { width: 83.333333333333%; }
    .grid__bp5-column-9 {  width: 75%; }
    .grid__bp5-column-8 {  width: 66.666666666667%; }
    .grid__bp5-column-7 {  width: 58.333333333333%; }
    .grid__bp5-column-6 {  width: 50%; }
    .grid__bp5-column-5 {  width: 41.666666666667%; }
    .grid__bp5-column-4 {  width: 33.333333333333%; }
    .grid__bp5-column-3 {  width: 25%; }
    .grid__bp5-column-2 {  width: 16.666666666667%; }
    .grid__bp5-column-1 {  width: 8.333333333333%; }

    .grid__bp5-offset-12 { margin-left: 100%; }
    .grid__bp5-offset-11 { margin-left: 91.666666666667%; }
    .grid__bp5-offset-10 { margin-left: 83.333333333333%; }
    .grid__bp5-offset-9 {  margin-left: 75%; }
    .grid__bp5-offset-8 {  margin-left: 66.666666666667%; }
    .grid__bp5-offset-7 {  margin-left: 58.333333333333%; }
    .grid__bp5-offset-6 {  margin-left: 50%; }
    .grid__bp5-offset-5 {  margin-left: 41.666666666667%; }
    .grid__bp5-offset-4 {  margin-left: 33.333333333333%; }
    .grid__bp5-offset-3 {  margin-left: 25%; }
    .grid__bp5-offset-2 {  margin-left: 16.666666666667%; }
    .grid__bp5-offset-1 {  margin-left: 8.333333333333%; }
    
    .grid__bp5-push-12 { left: 100%; }
    .grid__bp5-push-11 { left: 91.666666666667%; }
    .grid__bp5-push-10 { left: 83.333333333333%; }
    .grid__bp5-push-9 {  left: 75%; }
    .grid__bp5-push-8 {  left: 66.666666666667%; }
    .grid__bp5-push-7 {  left: 58.333333333333%; }
    .grid__bp5-push-6 {  left: 50%; }
    .grid__bp5-push-5 {  left: 41.666666666667%; }
    .grid__bp5-push-4 {  left: 33.333333333333%; }
    .grid__bp5-push-3 {  left: 25%; }
    .grid__bp5-push-2 {  left: 16.666666666667%; }
    .grid__bp5-push-1 {  left: 8.333333333333%; }
    .grid__bp5-push-0 {  left: 0; }
    
    .grid__bp5-pull-12 { right: 100%; }
    .grid__bp5-pull-11 { right: 91.666666666667%; }
    .grid__bp5-pull-10 { right: 83.333333333333%; }
    .grid__bp5-pull-9 {  right: 75%; }
    .grid__bp5-pull-8 {  right: 66.666666666667%; }
    .grid__bp5-pull-7 {  right: 58.333333333333%; }
    .grid__bp5-pull-6 {  right: 50%; }
    .grid__bp5-pull-5 {  right: 41.666666666667%; }
    .grid__bp5-pull-4 {  right: 33.333333333333%; }
    .grid__bp5-pull-3 {  right: 25%; }
    .grid__bp5-pull-2 {  right: 16.666666666667%; }
    .grid__bp5-pull-1 {  right: 8.333333333333%; }
    .grid__bp5-pull-0 {  right: 0; }
    
    .grid__development .grid__wrapper:before {
        content: "Breakpoint 5: 1140px and up";
    }
}