/*
 Theme Name:   Berliner Child
 Description:  Berliner Child Theme
 Author:       Jack Appleby
 Author URI:   http://example.com
 Template:     wp_berliner5-v1.4
*/


body {
    background: #242424;
    color: white;
}
h1, h2, h3, h4, h5, h6 {
    color:  white;
}
.event-wrap h4 {
    color:  #63625f;
}

.custom-homepage-hero {
    min-height:  500px;
    background-color: black;
    background-image: url(http://mapstudiocafe.com/wp-content/uploads/2021/09/custom-homepage-hero-alternate.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    padding: 80px 0;
    margin-bottom:  70px;
}

.custom-homepage-hero  h1 {
    font-size:  120px;
    margin:  0 0 10px 0;
    line-height:  1;
    color:  white;
    max-width:  450px;
    letter-spacing: 3px;
}
.custom-homepage-hero__strap {
    font-size:  30px;
    color: rgba(255, 255, 255, 0.8);
    font-family: "League Gothic", sans-serif;
    letter-spacing: 3px;
    margin-bottom:  60px;
    max-width:  615px;
}
.custom-homepage-hero__button-container {
    display: inline-block;
    margin-right:  30px;
}
.custom-homepage-hero__button {
    display: block;
    text-align: center;
    padding:  15px 50px;
    color:  white !important;
    border-radius:  3px;
    text-transform: uppercase;
    border:  3px solid white;
    transition:  0.3s;
    font-size:  25px;
    letter-spacing: 3px;
    font-family:  "League Gothic", sans-serif;
}
.custom-homepage-hero__button:hover {
    background: black;  
    text-decoration: none;
}
@media only screen and (max-width: 550px) {
    .custom-homepage-hero  h1 {
        font-size:  60px;
    }
    .custom-homepage-hero__strap {
        font-size:  25px;
    }
}

.custom-homepage-ctas {
    margin-bottom:  50px;
}
.custom-homepage-ctas h2 {
    font-size: 50px;
    color: white !important;

    text-transform: uppercase;
    text-shadow: 0 0 10px rgb(0 0 0 / 60%);
    letter-spacing: 3px;
}
.custom-homepage-ctas__list-item {
    margin-bottom:  20px;
}
.custom-homepage-ctas__list-item-link {
    display: block;
    height:  250px;
    padding:  40px;
    background-color: black;
    background-position: center center;
    background-size: cover;  
    border-radius: 3px;
    
}
.custom-homepage-ctas__list-item-link:hover {
    transition:  0.1s;
    text-decoration: none;
    opacity:  0.8;
}
.custom-homepage-ctas__list-item-link--events {
    background-image:  url(http://mapstudiocafe.com/wp-content/uploads/2021/09/custom-homepage-events.jpg);
}
.custom-homepage-ctas__list-item-link--studios {
    background-image:  url(http://mapstudiocafe.com/wp-content/uploads/2021/09/custom-homepage-studio.jpg);
}
.custom-homepage-ctas__list-item-link--cafe {
    background-image:  url(http://mapstudiocafe.com/wp-content/uploads/2021/09/custom-homepage-cafe-2.jpg);
}
.custom-homepage-ctas__list-item-link--studio-2 {
    background-image:  url(http://mapstudiocafe.com/wp-content/uploads/2021/09/custom-homepage-studio-2.jpg);
}
.custom-homepage-ctas__list-item-link--writing {
    background-image:  url(http://mapstudiocafe.com/wp-content/uploads/2021/09/custom-homepage-writing.jpg);
}
.custom-homepage-ctas__list-item-link--space {
    background-image:  url(http://mapstudiocafe.com/wp-content/uploads/2021/09/custom-homepage-venue.jpg);
}
.custom-homepage-map {
    margin-bottom:  70px;
}
.custom-homepage-map h2 {
    text-align: center;
    font-size:  40px;
    color:  white;
}

#page .hero {
    background:  black !important;
}
.hero-inner {
    border-bottom: 3px solid rgba(255, 255, 255, 0.2);
}

/* Make pages full width. No sidebar */
.page-template-default .row,
.page-template .row {
    margin-left: 0;
    margin-right: 0;
}
.page-template-default .col-sm-8.col-md-9,
.page-template .col-sm-8.col-md-9 {
    floaT:  none;
    width:  100%;
}

.page-template-template-studio .hero {
  margin-bottom:  70px;
}

.page-id-2404 #main,
.page-id-2402 #main,
.page-id-2406 #main {
    padding-top: 0;
}







/*------------------------------------*\
    $CSSWIZARDRY-GRIDS -- MODIFIED
\*------------------------------------*/
/**
 * CONTENTS
 * MODIFIED NOTES.......How the grids have been modified
 * INTRODUCTION.........How the grid system works.
 * VARIABLES............Your settings.
 * MIXINS...............Library mixins.
 * GRID SETUP...........Build the grid structure.
 * WIDTHS...............Build our responsive widths around our breakpoints.
 */
/*------------------------------------*\
    $MODIFIED NOTES
\*------------------------------------*/
/**
 * Changed grid to floats
 * Added option for flexbox grids
 * Removed push and pull classes
 * Removed rev class
 * Removed grid align class, as they don't work with floats
 * Removed the following settings: 
 *     responsive - assumed its always responsive
 *     mobile first - assumed its always mobile first
 *     use-silent-classes - we want regular css classes
 * Removed mark up fix, as we'll be using floats
 * Removed class type setting
 * Removed vertical align classes, as they don't work on floats
 * Removed full, narrow and wide classes, as don't use them
 */
/*------------------------------------*\
    $INTRODUCTION
\*------------------------------------*/
/**
 * csswizardry grids provides you with widths to suit a number of breakpoints
 * designed around devices of a size you specify. Out of the box, csswizardry
 * grids caters to the following types of device:
 *
 * palm     --  palm-based devices, like phones and small tablets
 * lap      --  lap-based devices, like iPads or laptops
 * portable --  all of the above
 * desk     --  stationary devices, like desktop computers
 *
 * These namespaces are then used in the library to give you the ability to
 * manipulate your layouts based around them, for example:
 *
   <div class="grid__item  one-whole  lap--one-half  desk--one-third">
 *
 * This would give you a grid item which is 100% width unless it is on a lap
 * device, at which point it become 50% wide, or it is on a desktop device, at
 * which point it becomes 33.333% width.
 *
 * All classes in csswizardry grids follow this patten, so you should fairly
 * quickly be able to piece together any combinations you can imagine, for
 * example:
 *
   `class="grid__item  one-whole  lap--one-half  desk--one-third`
 *
   `class="grid__item  one-quarter  palm--one-half`
 *
   `class="grid__item  palm--one-third  desk--five-twelfths`
 */
/*------------------------------------*\
    $VARIABLES
\*------------------------------------*/
/**
 * Set the spacing between your grid items.
 */
/**
 * Define your breakpoints. The first value is the prefix that shall be used for
 * your classes (e.g. `.palm--one-half`), the second value is the media query
 * that the breakpoint fires at.
 */
/**
 * Define which namespaced breakpoints you would like to generate for each of
 * widths, push and pull. This is handy if you only need pull on, say, desk, or
 * you only need a new width breakpoint at mobile sizes. It allows you to only
 * compile as much CSS as you need. All are turned on by default, but you can
 * add and remove breakpoints at will.
 */
/*------------------------------------*\
    $MIXINS
\*------------------------------------*/
/**
 * These mixins are for the library to use only, you should not need to modify
 * them at all.
 *
 * Enclose a block of code with a media query as named in `$breakpoints`.
 */
/*------------------------------------*\
    $GRID SETUP
\*------------------------------------*/
/**
 * 1. Allow the grid system to be used on lists.
 * 2. Remove any margins and paddings that might affect the grid system.
 * 3. Apply a negative `margin-left` to negate the columns' gutters.
 */
.grid {
  list-style: none;
  /* [1] */
  margin: 0;
  /* [2] */
  padding: 0;
  /* [2] */
  margin-left: -30px;
  /* [3] */ }

.grid:after {
  height: 0;
  display: block;
  content: "";
  visibility: hidden;
  clear: both; }

/**
 * Change the grid to remove padding
 */
.grid--full {
  margin-left: 0; }

.grid--full > .grid__item {
  padding-left: 0; }

/**
 * Change the grid to use flexbox
 *
 * 1. set to flexbox display
 * 2. center items horizontally
 * 3. center items vertically
 * 4. wrap items when needed
 */
.grid--flex {
  display: flex;
  /* [1] */
  display: -ms-flex;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  justify-content: flex-start;
  /* [2] */
  -ms-flex-pack: flex-start;
  -ms-justify-content: flex-start;
  -moz-justify-content: flex-start;
  -webkit-justify-content: flex-start;
  align-items: flex-start;
  /* [3] */
  -ms-flex-align: flex-start;
  -ms-align-items: flex-start;
  -moz-align-items: flex-start;
  -webkit-align-items: flex-start;
  flex-wrap: wrap;
  /* [4] */
  -ms-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -webkit-flex-wrap: wrap; }

/**
 * Grid modifiers for flex box
 */
.grid--flex.grid--bottom {
  align-items: flex-end;
  -ms-flex-align: flex-end;
  -ms-align-items: flex-end;
  -moz-align-items: flex-end;
  -webkit-align-items: flex-end; }

.grid--flex.grid--center {
  align-items: center;
  -ms-flex-align: center;
  -ms-align-items: center;
  -moz-align-items: center;
  -webkit-align-items: center; }

.grid--flex.grid--center > .grid__item {
  margin: 0 auto; }

.grid--flex.grid--stretch {
  align-items: stretch;
  -ms-flex-align: stretch;
  -ms-align-items: stretch;
  -moz-align-items: stretch;
  -webkit-align-items: stretch; }

.grid--flex.grid--right {
  justify-content: flex-end;
  -ms-flex-pack: flex-end;
  -ms-justify-content: flex-end;
  -moz-justify-content: flex-end;
  -webkit-justify-content: flex-end; }

.grid--flex.grid--stretch > .grid__item {
  display: flex;
  display: -ms-flex;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column; }

.grid--flex.grid--stretch .grid__item > * {
  -webkit-flex: 1 1 auto;
  -moz-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto; }

/**
 * 1. Cause columns to stack side-by-side.
 * 2. Space columns apart.
 * 3. Align columns to the tops of each other.
 * 4. Full-width unless told to behave otherwise.
 */
.grid__item {
  min-height: 1px;
  float: left;
  /* [1] */
  padding-left: 30px;
  /* [2] */
  vertical-align: top;
  /* [3] */
  width: 100%;
  /* [4] */ }

/**
 * Set the defaults of each flex item
 *
 * 1. Set default order for flex item (higher than the max number of columns)
 * 2. Remove float
 * 3. Stop items shrinking smaller than their width (flex-basis)
 */
.grid--flex > .grid__item {
  order: 13;
  /* [] */
  -webkit-order: 13;
  -moz-order: 13;
  -ms-flex-order: 13;
  float: none;
  /* [2] */
  flex-shrink: 0;
  /* [3] */
  -ms-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -webkit-flex-shrink: 0; }

/*------------------------------------*\
    $WIDTHS
\*------------------------------------*/
/**
 * Create our width classes, prefixed by the specified namespace.
 */
/**
 * Our regular, non-responsive width classes.
 */
/**
     * Whole
     */
.one-whole {
  width: 100%; }

/**
     * Halves
     */
.one-half, .two-quarters, .three-sixths, .four-eighths, .five-tenths, .six-twelfths {
  width: 50%; }

/**
     * Thirds
     */
.one-third, .two-sixths, .four-twelfths {
  width: 33.333%; }

.two-thirds, .four-sixths, .eight-twelfths {
  width: 66.666%; }

/**
     * Quarters
     */
.one-quarter, .two-eighths, .three-twelfths {
  width: 25%; }

.three-quarters, .six-eighths, .nine-twelfths {
  width: 75%; }

/**
     * Fifths
     */
.one-fifth, .two-tenths {
  width: 20%; }

.two-fifths, .four-tenths {
  width: 40%; }

.three-fifths, .six-tenths {
  width: 60%; }

.four-fifths, .eight-tenths {
  width: 80%; }

/**
     * Sixths
     */
.one-sixth, .two-twelfths {
  width: 16.666%; }

.five-sixths, .ten-twelfths {
  width: 83.333%; }

/**
     * Eighths
     */
.one-eighth {
  width: 12.5%; }

.three-eighths {
  width: 37.5%; }

.five-eighths {
  width: 62.5%; }

.seven-eighths {
  width: 87.5%; }

/**
     * Tenths
     */
.one-tenth {
  width: 10%; }

.three-tenths {
  width: 30%; }

.seven-tenths {
  width: 70%; }

.nine-tenths {
  width: 90%; }

/**
     * Twelfths
     */
.one-twelfth {
  width: 8.333%; }

.five-twelfths {
  width: 41.666%; }

.seven-twelfths {
  width: 58.333%; }

.eleven-twelfths {
  width: 91.666%; }

/**
     * Grid modifiers for flex box ordering
     */
.grid--flex .order-first {
  order: 1;
  -ms-flex-order: 1;
  -webkit-order: 1;
  -moz-order: 1;
  -ms-order: 1; }

.grid--flex .order-second {
  order: 2;
  -ms-flex-order: 2;
  -webkit-order: 2;
  -moz-order: 2;
  -ms-order: 2; }

.grid--flex .order-third {
  order: 3;
  -ms-flex-order: 3;
  -webkit-order: 3;
  -moz-order: 3;
  -ms-order: 3; }

.grid--flex .order-fourth {
  order: 4;
  -ms-flex-order: 4;
  -webkit-order: 4;
  -moz-order: 4;
  -ms-order: 4; }

.grid--flex .order-fifth {
  order: 5;
  -ms-flex-order: 5;
  -webkit-order: 5;
  -moz-order: 5;
  -ms-order: 5; }

.grid--flex .order-sixth {
  order: 6;
  -ms-flex-order: 6;
  -webkit-order: 6;
  -moz-order: 6;
  -ms-order: 6; }

.grid--flex .order-seventh {
  order: 7;
  -ms-flex-order: 7;
  -webkit-order: 7;
  -moz-order: 7;
  -ms-order: 7; }

.grid--flex .order-eighth {
  order: 8;
  -ms-flex-order: 8;
  -webkit-order: 8;
  -moz-order: 8;
  -ms-order: 8; }

.grid--flex .order-ninth {
  order: 9;
  -ms-flex-order: 9;
  -webkit-order: 9;
  -moz-order: 9;
  -ms-order: 9; }

.grid--flex .order-tenth {
  order: 10;
  -ms-flex-order: 10;
  -webkit-order: 10;
  -moz-order: 10;
  -ms-order: 10; }

.grid--flex .order-eleventh {
  order: 11;
  -ms-flex-order: 11;
  -webkit-order: 11;
  -moz-order: 11;
  -ms-order: 11; }

.grid--flex .order-twelth {
  order: 12;
  -ms-flex-order: 12;
  -webkit-order: 12;
  -moz-order: 12;
  -ms-order: 12; }

/**
 * Our responsive classes.
 */
@media only screen and (max-width: 550px) {
  /**
     * Whole
     */
  .palm--one-whole {
    width: 100%; }
  /**
     * Halves
     */
  .palm--one-half, .palm--two-quarters, .palm--three-sixths, .palm--four-eighths, .palm--five-tenths, .palm--six-twelfths {
    width: 50%; }
  /**
     * Thirds
     */
  .palm--one-third, .palm--two-sixths, .palm--four-twelfths {
    width: 33.333%; }
  .palm--two-thirds, .palm--four-sixths, .palm--eight-twelfths {
    width: 66.666%; }
  /**
     * Quarters
     */
  .palm--one-quarter, .palm--two-eighths, .palm--three-twelfths {
    width: 25%; }
  .palm--three-quarters, .palm--six-eighths, .palm--nine-twelfths {
    width: 75%; }
  /**
     * Fifths
     */
  .palm--one-fifth, .palm--two-tenths {
    width: 20%; }
  .palm--two-fifths, .palm--four-tenths {
    width: 40%; }
  .palm--three-fifths, .palm--six-tenths {
    width: 60%; }
  .palm--four-fifths, .palm--eight-tenths {
    width: 80%; }
  /**
     * Sixths
     */
  .palm--one-sixth, .palm--two-twelfths {
    width: 16.666%; }
  .palm--five-sixths, .palm--ten-twelfths {
    width: 83.333%; }
  /**
     * Eighths
     */
  .palm--one-eighth {
    width: 12.5%; }
  .palm--three-eighths {
    width: 37.5%; }
  .palm--five-eighths {
    width: 62.5%; }
  .palm--seven-eighths {
    width: 87.5%; }
  /**
     * Tenths
     */
  .palm--one-tenth {
    width: 10%; }
  .palm--three-tenths {
    width: 30%; }
  .palm--seven-tenths {
    width: 70%; }
  .palm--nine-tenths {
    width: 90%; }
  /**
     * Twelfths
     */
  .palm--one-twelfth {
    width: 8.333%; }
  .palm--five-twelfths {
    width: 41.666%; }
  .palm--seven-twelfths {
    width: 58.333%; }
  .palm--eleven-twelfths {
    width: 91.666%; }
  /**
     * Grid modifiers for flex box ordering
     */
  .grid--flex .palm--order-first {
    order: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    -moz-order: 1;
    -ms-order: 1; }
  .grid--flex .palm--order-second {
    order: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    -moz-order: 2;
    -ms-order: 2; }
  .grid--flex .palm--order-third {
    order: 3;
    -ms-flex-order: 3;
    -webkit-order: 3;
    -moz-order: 3;
    -ms-order: 3; }
  .grid--flex .palm--order-fourth {
    order: 4;
    -ms-flex-order: 4;
    -webkit-order: 4;
    -moz-order: 4;
    -ms-order: 4; }
  .grid--flex .palm--order-fifth {
    order: 5;
    -ms-flex-order: 5;
    -webkit-order: 5;
    -moz-order: 5;
    -ms-order: 5; }
  .grid--flex .palm--order-sixth {
    order: 6;
    -ms-flex-order: 6;
    -webkit-order: 6;
    -moz-order: 6;
    -ms-order: 6; }
  .grid--flex .palm--order-seventh {
    order: 7;
    -ms-flex-order: 7;
    -webkit-order: 7;
    -moz-order: 7;
    -ms-order: 7; }
  .grid--flex .palm--order-eighth {
    order: 8;
    -ms-flex-order: 8;
    -webkit-order: 8;
    -moz-order: 8;
    -ms-order: 8; }
  .grid--flex .palm--order-ninth {
    order: 9;
    -ms-flex-order: 9;
    -webkit-order: 9;
    -moz-order: 9;
    -ms-order: 9; }
  .grid--flex .palm--order-tenth {
    order: 10;
    -ms-flex-order: 10;
    -webkit-order: 10;
    -moz-order: 10;
    -ms-order: 10; }
  .grid--flex .palm--order-eleventh {
    order: 11;
    -ms-flex-order: 11;
    -webkit-order: 11;
    -moz-order: 11;
    -ms-order: 11; }
  .grid--flex .palm--order-twelth {
    order: 12;
    -ms-flex-order: 12;
    -webkit-order: 12;
    -moz-order: 12;
    -ms-order: 12; } }

@media only screen and (min-width: 550px) and (max-width: 750px) {
  /**
     * Whole
     */
  .portable--one-whole {
    width: 100%; }
  /**
     * Halves
     */
  .portable--one-half, .portable--two-quarters, .portable--three-sixths, .portable--four-eighths, .portable--five-tenths, .portable--six-twelfths {
    width: 50%; }
  /**
     * Thirds
     */
  .portable--one-third, .portable--two-sixths, .portable--four-twelfths {
    width: 33.333%; }
  .portable--two-thirds, .portable--four-sixths, .portable--eight-twelfths {
    width: 66.666%; }
  /**
     * Quarters
     */
  .portable--one-quarter, .portable--two-eighths, .portable--three-twelfths {
    width: 25%; }
  .portable--three-quarters, .portable--six-eighths, .portable--nine-twelfths {
    width: 75%; }
  /**
     * Fifths
     */
  .portable--one-fifth, .portable--two-tenths {
    width: 20%; }
  .portable--two-fifths, .portable--four-tenths {
    width: 40%; }
  .portable--three-fifths, .portable--six-tenths {
    width: 60%; }
  .portable--four-fifths, .portable--eight-tenths {
    width: 80%; }
  /**
     * Sixths
     */
  .portable--one-sixth, .portable--two-twelfths {
    width: 16.666%; }
  .portable--five-sixths, .portable--ten-twelfths {
    width: 83.333%; }
  /**
     * Eighths
     */
  .portable--one-eighth {
    width: 12.5%; }
  .portable--three-eighths {
    width: 37.5%; }
  .portable--five-eighths {
    width: 62.5%; }
  .portable--seven-eighths {
    width: 87.5%; }
  /**
     * Tenths
     */
  .portable--one-tenth {
    width: 10%; }
  .portable--three-tenths {
    width: 30%; }
  .portable--seven-tenths {
    width: 70%; }
  .portable--nine-tenths {
    width: 90%; }
  /**
     * Twelfths
     */
  .portable--one-twelfth {
    width: 8.333%; }
  .portable--five-twelfths {
    width: 41.666%; }
  .portable--seven-twelfths {
    width: 58.333%; }
  .portable--eleven-twelfths {
    width: 91.666%; }
  /**
     * Grid modifiers for flex box ordering
     */
  .grid--flex .portable--order-first {
    order: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    -moz-order: 1;
    -ms-order: 1; }
  .grid--flex .portable--order-second {
    order: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    -moz-order: 2;
    -ms-order: 2; }
  .grid--flex .portable--order-third {
    order: 3;
    -ms-flex-order: 3;
    -webkit-order: 3;
    -moz-order: 3;
    -ms-order: 3; }
  .grid--flex .portable--order-fourth {
    order: 4;
    -ms-flex-order: 4;
    -webkit-order: 4;
    -moz-order: 4;
    -ms-order: 4; }
  .grid--flex .portable--order-fifth {
    order: 5;
    -ms-flex-order: 5;
    -webkit-order: 5;
    -moz-order: 5;
    -ms-order: 5; }
  .grid--flex .portable--order-sixth {
    order: 6;
    -ms-flex-order: 6;
    -webkit-order: 6;
    -moz-order: 6;
    -ms-order: 6; }
  .grid--flex .portable--order-seventh {
    order: 7;
    -ms-flex-order: 7;
    -webkit-order: 7;
    -moz-order: 7;
    -ms-order: 7; }
  .grid--flex .portable--order-eighth {
    order: 8;
    -ms-flex-order: 8;
    -webkit-order: 8;
    -moz-order: 8;
    -ms-order: 8; }
  .grid--flex .portable--order-ninth {
    order: 9;
    -ms-flex-order: 9;
    -webkit-order: 9;
    -moz-order: 9;
    -ms-order: 9; }
  .grid--flex .portable--order-tenth {
    order: 10;
    -ms-flex-order: 10;
    -webkit-order: 10;
    -moz-order: 10;
    -ms-order: 10; }
  .grid--flex .portable--order-eleventh {
    order: 11;
    -ms-flex-order: 11;
    -webkit-order: 11;
    -moz-order: 11;
    -ms-order: 11; }
  .grid--flex .portable--order-twelth {
    order: 12;
    -ms-flex-order: 12;
    -webkit-order: 12;
    -moz-order: 12;
    -ms-order: 12; } }

@media only screen and (min-width: 750px) and (max-width: 1200px) {
  /**
     * Whole
     */
  .lap--one-whole {
    width: 100%; }
  /**
     * Halves
     */
  .lap--one-half, .lap--two-quarters, .lap--three-sixths, .lap--four-eighths, .lap--five-tenths, .lap--six-twelfths {
    width: 50%; }
  /**
     * Thirds
     */
  .lap--one-third, .lap--two-sixths, .lap--four-twelfths {
    width: 33.333%; }
  .lap--two-thirds, .lap--four-sixths, .lap--eight-twelfths {
    width: 66.666%; }
  /**
     * Quarters
     */
  .lap--one-quarter, .lap--two-eighths, .lap--three-twelfths {
    width: 25%; }
  .lap--three-quarters, .lap--six-eighths, .lap--nine-twelfths {
    width: 75%; }
  /**
     * Fifths
     */
  .lap--one-fifth, .lap--two-tenths {
    width: 20%; }
  .lap--two-fifths, .lap--four-tenths {
    width: 40%; }
  .lap--three-fifths, .lap--six-tenths {
    width: 60%; }
  .lap--four-fifths, .lap--eight-tenths {
    width: 80%; }
  /**
     * Sixths
     */
  .lap--one-sixth, .lap--two-twelfths {
    width: 16.666%; }
  .lap--five-sixths, .lap--ten-twelfths {
    width: 83.333%; }
  /**
     * Eighths
     */
  .lap--one-eighth {
    width: 12.5%; }
  .lap--three-eighths {
    width: 37.5%; }
  .lap--five-eighths {
    width: 62.5%; }
  .lap--seven-eighths {
    width: 87.5%; }
  /**
     * Tenths
     */
  .lap--one-tenth {
    width: 10%; }
  .lap--three-tenths {
    width: 30%; }
  .lap--seven-tenths {
    width: 70%; }
  .lap--nine-tenths {
    width: 90%; }
  /**
     * Twelfths
     */
  .lap--one-twelfth {
    width: 8.333%; }
  .lap--five-twelfths {
    width: 41.666%; }
  .lap--seven-twelfths {
    width: 58.333%; }
  .lap--eleven-twelfths {
    width: 91.666%; }
  /**
     * Grid modifiers for flex box ordering
     */
  .grid--flex .lap--order-first {
    order: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    -moz-order: 1;
    -ms-order: 1; }
  .grid--flex .lap--order-second {
    order: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    -moz-order: 2;
    -ms-order: 2; }
  .grid--flex .lap--order-third {
    order: 3;
    -ms-flex-order: 3;
    -webkit-order: 3;
    -moz-order: 3;
    -ms-order: 3; }
  .grid--flex .lap--order-fourth {
    order: 4;
    -ms-flex-order: 4;
    -webkit-order: 4;
    -moz-order: 4;
    -ms-order: 4; }
  .grid--flex .lap--order-fifth {
    order: 5;
    -ms-flex-order: 5;
    -webkit-order: 5;
    -moz-order: 5;
    -ms-order: 5; }
  .grid--flex .lap--order-sixth {
    order: 6;
    -ms-flex-order: 6;
    -webkit-order: 6;
    -moz-order: 6;
    -ms-order: 6; }
  .grid--flex .lap--order-seventh {
    order: 7;
    -ms-flex-order: 7;
    -webkit-order: 7;
    -moz-order: 7;
    -ms-order: 7; }
  .grid--flex .lap--order-eighth {
    order: 8;
    -ms-flex-order: 8;
    -webkit-order: 8;
    -moz-order: 8;
    -ms-order: 8; }
  .grid--flex .lap--order-ninth {
    order: 9;
    -ms-flex-order: 9;
    -webkit-order: 9;
    -moz-order: 9;
    -ms-order: 9; }
  .grid--flex .lap--order-tenth {
    order: 10;
    -ms-flex-order: 10;
    -webkit-order: 10;
    -moz-order: 10;
    -ms-order: 10; }
  .grid--flex .lap--order-eleventh {
    order: 11;
    -ms-flex-order: 11;
    -webkit-order: 11;
    -moz-order: 11;
    -ms-order: 11; }
  .grid--flex .lap--order-twelth {
    order: 12;
    -ms-flex-order: 12;
    -webkit-order: 12;
    -moz-order: 12;
    -ms-order: 12; } }

@media only screen and (min-width: 1200px) {
  /**
     * Whole
     */
  .desk--one-whole {
    width: 100%; }
  /**
     * Halves
     */
  .desk--one-half, .desk--two-quarters, .desk--three-sixths, .desk--four-eighths, .desk--five-tenths, .desk--six-twelfths {
    width: 50%; }
  /**
     * Thirds
     */
  .desk--one-third, .desk--two-sixths, .desk--four-twelfths {
    width: 33.333%; }
  .desk--two-thirds, .desk--four-sixths, .desk--eight-twelfths {
    width: 66.666%; }
  /**
     * Quarters
     */
  .desk--one-quarter, .desk--two-eighths, .desk--three-twelfths {
    width: 25%; }
  .desk--three-quarters, .desk--six-eighths, .desk--nine-twelfths {
    width: 75%; }
  /**
     * Fifths
     */
  .desk--one-fifth, .desk--two-tenths {
    width: 20%; }
  .desk--two-fifths, .desk--four-tenths {
    width: 40%; }
  .desk--three-fifths, .desk--six-tenths {
    width: 60%; }
  .desk--four-fifths, .desk--eight-tenths {
    width: 80%; }
  /**
     * Sixths
     */
  .desk--one-sixth, .desk--two-twelfths {
    width: 16.666%; }
  .desk--five-sixths, .desk--ten-twelfths {
    width: 83.333%; }
  /**
     * Eighths
     */
  .desk--one-eighth {
    width: 12.5%; }
  .desk--three-eighths {
    width: 37.5%; }
  .desk--five-eighths {
    width: 62.5%; }
  .desk--seven-eighths {
    width: 87.5%; }
  /**
     * Tenths
     */
  .desk--one-tenth {
    width: 10%; }
  .desk--three-tenths {
    width: 30%; }
  .desk--seven-tenths {
    width: 70%; }
  .desk--nine-tenths {
    width: 90%; }
  /**
     * Twelfths
     */
  .desk--one-twelfth {
    width: 8.333%; }
  .desk--five-twelfths {
    width: 41.666%; }
  .desk--seven-twelfths {
    width: 58.333%; }
  .desk--eleven-twelfths {
    width: 91.666%; }
  /**
     * Grid modifiers for flex box ordering
     */
  .grid--flex .desk--order-first {
    order: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    -moz-order: 1;
    -ms-order: 1; }
  .grid--flex .desk--order-second {
    order: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    -moz-order: 2;
    -ms-order: 2; }
  .grid--flex .desk--order-third {
    order: 3;
    -ms-flex-order: 3;
    -webkit-order: 3;
    -moz-order: 3;
    -ms-order: 3; }
  .grid--flex .desk--order-fourth {
    order: 4;
    -ms-flex-order: 4;
    -webkit-order: 4;
    -moz-order: 4;
    -ms-order: 4; }
  .grid--flex .desk--order-fifth {
    order: 5;
    -ms-flex-order: 5;
    -webkit-order: 5;
    -moz-order: 5;
    -ms-order: 5; }
  .grid--flex .desk--order-sixth {
    order: 6;
    -ms-flex-order: 6;
    -webkit-order: 6;
    -moz-order: 6;
    -ms-order: 6; }
  .grid--flex .desk--order-seventh {
    order: 7;
    -ms-flex-order: 7;
    -webkit-order: 7;
    -moz-order: 7;
    -ms-order: 7; }
  .grid--flex .desk--order-eighth {
    order: 8;
    -ms-flex-order: 8;
    -webkit-order: 8;
    -moz-order: 8;
    -ms-order: 8; }
  .grid--flex .desk--order-ninth {
    order: 9;
    -ms-flex-order: 9;
    -webkit-order: 9;
    -moz-order: 9;
    -ms-order: 9; }
  .grid--flex .desk--order-tenth {
    order: 10;
    -ms-flex-order: 10;
    -webkit-order: 10;
    -moz-order: 10;
    -ms-order: 10; }
  .grid--flex .desk--order-eleventh {
    order: 11;
    -ms-flex-order: 11;
    -webkit-order: 11;
    -moz-order: 11;
    -ms-order: 11; }
  .grid--flex .desk--order-twelth {
    order: 12;
    -ms-flex-order: 12;
    -webkit-order: 12;
    -moz-order: 12;
    -ms-order: 12; } }