<div class="p-5 m-5 bg__primary--300">
   Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
 </div>
 <div class="p-5 m-5 bg__primary">
   Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
 </div>
 <div class="p-5 m-5 bg__primary--200">
   Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
 </div>
 <div class="p-5 m-5 bg__primary--100">
   Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
 </div>
 <div class="p-5 m-5 bg__warning--300">
   Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
 </div>
 <div class="p-5 m-5 bg__warning--200">
   Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
 </div>
 <div class="p-5 m-5 bg__warning--100">
   Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
 </div>
 <div class="p-5 m-5 bg__danger--300">
   Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
 </div>
 <div class="p-5 m-5 bg__danger--200">
   Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
 </div>
 <div class="p-5 m-5 bg__danger--100">
   Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
 </div>
 <div class="p-5 m-5 bg__success--300">
   Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
 </div>
 <div class="p-5 m-5 bg__success--200">
   Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
 </div>
 <div class="p-5 m-5 bg__success--100">
   Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
 </div>
 <div class="p-5 m-5 bg__data--300">
   Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
 </div>
 <div class="p-5 m-5 bg__data--200">
   Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
 </div>
 <div class="p-5 m-5 bg__data--100">
   Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
 </div>
 <div class="p-5 m-5 bg__bg">
   Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
 </div>
 <div class="p-5 m-5 bg__primary--text">
   Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
 </div>
 <div class="p-5 m-5 bg__secondary--text">
   Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
 </div>

<div class="p-5 m-5 hover__primary--300">
   Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
 </div>
 <div class="p-5 m-5 hover__primary">
   Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
 </div>
 <div class="p-5 m-5 hover__primary--200">
   Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
 </div>
 <div class="p-5 m-5 hover__primary--100">
   Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
 </div>
 <div class="p-5 m-5 hover__warning--300">
   Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
 </div>
 <div class="p-5 m-5 hover__warning--200">
   Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
 </div>
 <div class="p-5 m-5 hover__warning--100">
   Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
 </div>
 <div class="p-5 m-5 hover__danger--300">
   Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
 </div>
 <div class="p-5 m-5 hover__danger--200">
   Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
 </div>
 <div class="p-5 m-5 hover__danger--100">
   Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
 </div>
 <div class="p-5 m-5 hover__success--300">
   Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
 </div>
 <div class="p-5 m-5 hover__success--200">
   Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
 </div>
 <div class="p-5 m-5 hover__success--100">
   Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
 </div>
 <div class="p-5 m-5 hover__data--300">
   Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
 </div>
 <div class="p-5 m-5 hover__data--200">
   Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
 </div>
 <div class="p-5 m-5 hover__data--100">
   Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
 </div>
 <div class="p-5 m-5 hover__bg">
   Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
 </div>
 <div class="p-5 m-5 hover__primary--text">
   Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
 </div>
 <div class="p-5 m-5 hover__secondary--text">
   Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
 </div>

<div class="p-5 m-5 border-2 border__primary">
   Border classes defining border thickness and position:
   <br>
   <i><strong>.border-[top|right|left|bottom]-[0-5]</strong></i>
 </div>
 <div class="p-5 m-5 border-bottom-1 border__danger--300">
   Border classes defining border color:
   <br>
   <i><strong>.border__[primary|primary--200|warning--300...]</strong></i>
 </div>

<button class="btn btn__primary--300">
   adipisicing
 </button>
 <button class="btn btn__primary">
   adipisicing
 </button>
 <button class="btn btn__primary--200">
   adipisicing
 </button>
 <button class="btn btn__primary--100">
   adipisicing
 </button>
 <button class="btn btn__warning--300">
   adipisicing
 </button>
 <button class="btn btn__warning--200">
   adipisicing
 </button>
 <button class="btn btn__warning--100">
   adipisicing
 </button>
 <button class="btn btn__danger--300">
   adipisicing
 </button>
 <button class="btn btn__danger--200">
   adipisicing
 </button>
 <button class="btn btn__danger--100">
   adipisicing
 </button>
 <button class="btn btn__success--300">
   adipisicing
 </button>
 <button class="btn btn__success--200">
   adipisicing
 </button>
 <button class="btn btn__success--100">
   adipisicing
 </button>
 <button class="btn btn__data--300">
   adipisicing
 </button>
 <button class="btn btn__data--200">
   adipisicing
 </button>
 <button class="btn btn__data--100">
   adipisicing
 </button>
 <button class="btn btn__bg">
   adipisicing
 </button>
 <button class="btn btn__white">
   adipisicing
 </button>
 <button class="btn btn__primary--text">
   adipisicing
 </button>
 <button class="btn btn__secondary--text">
   adipisicing
 </button>

<button class="btn btn__primary--300 btn__inverted">
   adipisicing
 </button>
 <button class="btn btn__primary btn__inverted">
   adipisicing
 </button>
 <button class="btn btn__warning--300 btn__inverted">
   adipisicing
 </button>
 <button class="btn btn__danger--300 btn__inverted">
   adipisicing
 </button>
 <button class="btn btn__success--300 btn__inverted">
   adipisicing
 </button>
 <button class="btn btn__data--300 btn__inverted">
   adipisicing
 </button>
 <button class="btn btn__primary--text btn__inverted">
   adipisicing
 </button>
 <button class="btn btn__secondary--text btn__inverted">
   adipisicing
 </button>

<button class="btn btn-lg btn__primary font-size--big ">
   <strong>adipisicing</strong>
 </button>
 <button class="btn btn-sm btn__primary font-size--small">
   adipisicing
 </button>
 <button class="btn btn-xs btn__primary_light font-size--smaller">
   adipisicing
 </button>
  <a class="btn btn-lg p-left-40 btn__white border__danger--300 border-1 font-size--big text__primary hover__warning--300 text__hover-bg text--bold">
     customize to fit your need
  </a>

<el-radio-group class="switch-button" v-model="switchButtonModel">
    <el-radio-button :label="false">adipisicing</el-radio-button>
    <el-radio-button :label="true">adipisicing</el-radio-button>
  </el-radio-group>

<div class="flex-container flex-wrap">
   <div class="flex-1 border-1 border__primary cursor-not-allowed">cursor-not-allowed</div>
   <div class="flex-1 border-1 border__primary cursor-pointer">cursor-pointer</div>
   <div class="flex-1 border-1 border__primary cursor-help">cursor-help</div>
   <div class="flex-1 border-1 border__primary cursor-move">cursor-move</div>
   <div class="flex-1 border-1 border__primary cursor-none">cursor-none</div>
   <div class="flex-1 border-1 border__primary cursor-progress">cursor-progress</div>
   <div class="flex-1 border-1 border__primary cursor-text">cursor-text</div>
   <div class="flex-1 border-1 border__primary cursor-col-resize">cursor-col resize</div>
   <div class="flex-1 border-1 border__primary cursor-row-resize">cursor-row-resize</div>
   <div class="flex-1 border-1 border__primary cursor-copy">cursor-copy</div>
   <div class="flex-1 border-1 border__primary cursor-crosshair">cursor-crosshair</div>
   <div class="flex-1 border-1 border__primary cursor-default">cursor-default</div>
   <div class="flex-1 border-1 border__primary cursor-n-resize">cursor-n-resize</div>
   <div class="flex-1 border-1 border__primary cursor-ne-resize">cursor-ne-resize</div>
   <div class="flex-1 border-1 border__primary cursor-nesw-resize">cursor-nesw-resize</div>
   <div class="flex-1 border-1 border__primary cursor-ns-resize">cursor-ns-resize</div>
   <div class="flex-1 border-1 border__primary cursor-nw-resize">cursor-nw-resize</div>
   <div class="flex-1 border-1 border__primary cursor-nwse-resize">cursor-nwse-resize</div>
   <div class="flex-1 border-1 border__primary cursor-e-resize">cursor-e-resize</div>
   <div class="flex-1 border-1 border__primary cursor-ew-resize">cursor-ew-resize</div>
   <div class="flex-1 border-1 border__primary cursor-s-resize">cursor-s-resize</div>
   <div class="flex-1 border-1 border__primary cursor-se-resize">cursor-se-resize</div>
   <div class="flex-1 border-1 border__primary cursor-sw-resize">cursor-sw-resize</div>
   <div class="flex-1 border-1 border__primary cursor-w-resize">cursor-w-resize</div>
   <div class="flex-1 border-1 border__primary cursor-grab">cursor-grab</div>
   <div class="flex-1 border-1 border__primary cursor-grabbing">cursor-grabbing</div>
   <div class="flex-1 border-1 border__primary cursor-wait">cursor-wait</div>
 </div>

<span class="evolution-positive">+12</span>

<span class="evolution-negative">-12</span>

<span class="evolution-neutral">0</span>

<span class="flag-icon flag-icon--fr" title="English"></span>

<span class="flag-icon flag-icon--us" title="English"></span>

<span class="flag-icon flag-icon--uk" title="English"></span>

<h3>Align (vertical on flex-direction: row, horizontal on flex-direction: column)</h3>
 <h5>align content evenly</h5>
 <div class="demo88-container flex-container border-1 border__warning--300 flex-wrap align-content__space-evenly">
   <div class="demo88 border-1 border__primary">.align-content__space-evenly</div>
   <div class="demo88 border-1 border__primary">.align-content__space-evenly</div>
   <div class="demo88 border-1 border__primary">.align-content__space-evenly</div>
   <div class="demo88 border-1 border__primary">.align-content__space-evenly</div>
   <div class="demo88 border-1 border__primary">.align-content__space-evenly</div>
   <div class="demo88 border-1 border__primary">.align-content__space-evenly</div>
   <div class="demo88 border-1 border__primary">.align-content__space-evenly</div>
   <div class="demo88 border-1 border__primary">.align-content__space-evenly</div>
 </div>
 <h5>align content around</h5>
 <div class="demo88-container flex-container border-1 border__warning--300 flex-wrap align-content__space-around">
   <div class="demo88 border-1 border__primary">.align-content__space-around</div>
   <div class="demo88 border-1 border__primary">.align-content__space-around</div>
   <div class="demo88 border-1 border__primary">.align-content__space-around</div>
   <div class="demo88 border-1 border__primary">.align-content__space-around</div>
   <div class="demo88 border-1 border__primary">.align-content__space-around</div>
   <div class="demo88 border-1 border__primary">.align-content__space-around</div>
   <div class="demo88 border-1 border__primary">.align-content__space-around</div>
   <div class="demo88 border-1 border__primary">.align-content__space-around</div>
 </div>
 <h5>align content between</h5>
 <div class="demo88-container flex-container border-1 border__warning--300 flex-wrap align-content__space-between">
   <div class="demo88 border-1 border__primary">.align-content__space-between</div>
   <div class="demo88 border-1 border__primary">.align-content__space-between</div>
   <div class="demo88 border-1 border__primary">.align-content__space-between</div>
   <div class="demo88 border-1 border__primary">.align-content__space-between</div>
   <div class="demo88 border-1 border__primary">.align-content__space-between</div>
   <div class="demo88 border-1 border__primary">.align-content__space-between</div>
   <div class="demo88 border-1 border__primary">.align-content__space-between</div>
   <div class="demo88 border-1 border__primary">.align-content__space-between</div>
 </div>
 <h5>align items end</h5>
 <div class="demo88-container flex-container border-1 border__warning--300 align-items__flex-end">
   <div class="demo88 border-1 border__primary">.align-items__flex-end</div>
   <div class="demo88 border-1 border__primary">.align-items__flex-end</div>
   <div class="demo88 border-1 border__primary">.align-items__flex-end</div>
 </div>
 <h5>.align items center</h5>
 <div class="demo88-container flex-container border-1 border__warning--300 align-items__center">
   <div class="demo88 border-1 border__primary">.align-items__center</div>
   <div class="demo88 border-1 border__primary">.align-items__center</div>
   <div class="demo88 border-1 border__primary">.align-items__center</div>
 </div>
 <h5>.align items start</h5>
 <div class="demo88-container flex-container border-1 border__warning--300 align-items__flex-start">
   <div class="demo88 border-1 border__primary">.align-items__flex-start</div>
   <div class="demo88 border-1 border__primary">.align-items__flex-start</div>
   <div class="demo88 border-1 border__primary">.align-items__flex-start</div>
 </div>
 <h5>self align</h5>
 <div class="demo88-container flex-container border-1 border__warning--300">
   <div class="demo88 border-1 border__primary align__flex-start">.align__flex-start</div>
   <div class="demo88 border-1 border__primary align__center">.align__center</div>
   <div class="demo88 border-1 border__primary align__flex-end">.align__flex-end</div>
   <div class="demo88 border-1 border__primary align__center">.align__center</div>
   <div class="demo88 border-1 border__primary align__flex-start">.align__flex-start</div>
 </div>

<h3>Justify (horizontal on flex-direction: row, vertical on flex-direction: column)</h3>
 <div class="flex-container border-1 border__warning--300 justify-content__flex-end">
   <div class="demo88 border-1 border__primary">.justify-content__flex-end</div>
 </div>
 <div class="flex-container border-1 border__warning--300 justify-content__center">
   <div class="demo88 border-1 border__primary">.justify-content__center</div>
 </div>
 <div class="flex-container border-1 border__warning--300 justify-content__flex-start">
   <div class="demo88 border-1 border__primary">.justify-content__flex-start</div>
 </div>
 <div class="flex-container border-1 border__warning--300 justify-content__space-around">
   <div class="demo88 border-1 border__primary">.justify-content__space-around</div>
   <div class="demo88 border-1 border__primary">.justify-content__space-around</div>
   <div class="demo88 border-1 border__primary">.justify-content__space-around</div>
 </div>
 <div class="flex-container border-1 border__warning--300 justify-content__space-between">
   <div class="demo88 border-1 border__primary">.justify-content__space-between</div>
   <div class="demo88 border-1 border__primary">.justify-content__space-between</div>
   <div class="demo88 border-1 border__primary">.justify-content__space-between</div>
 </div>
 <div class="flex-container border-1 border__warning--300 justify-content__space-evenly">
   <div class="demo88 border-1 border__primary">.justify-content__space-evenly</div>
   <div class="demo88 border-1 border__primary">.justify-content__space-evenly</div>
   <div class="demo88 border-1 border__primary">.justify-content__space-evenly</div>
 </div>

<h3>Ordering, Relative sizing, Direction</h3>
 <h5>change the order of elements in the page:</h5>
 <div class="flex-container border-1 border__warning--300">
   <div class="demo88 border-1 border__primary order-4">position in html: 1, .order-4</div>
   <div class="demo88 border-1 border__primary order-5">position in html: 2, .order-5</div>
   <div class="demo88 border-1 border__primary order-1">position in html: 3, .order-1</div>
   <div class="demo88 border-1 border__primary order-3">position in html: 4, .order-3</div>
   <div class="demo88 border-1 border__primary order-2">position in html: 5, .order-2</div>
 </div>
 <h5>specify the size of element <strong>relative to each other</strong>. Flex-2 will be twice the size of flex-1, flex-12 will be twice the size of flex-6 ... (max flex-12). Also not that setting elements will grow to fill all the space.</h5>
 <div class="flex-container border-1 border__warning--300">
   <div class="demo88 border-1 border__primary flex-1">.flex-1</div>
   <div class="demo88 border-1 border__primary flex-2">.flex-2</div>
   <div class="demo88 border-1 border__primary flex-3">.flex-3</div>
 </div>
 <div class="flex-container border-1 border__warning--300">
   <div class="demo88 border-1 border__primary flex-4">.flex-4</div>
   <div class="demo88 border-1 border__primary flex-8">.flex-8</div>
   <div class="demo88 border-1 border__primary flex-12">.flex-12</div>
 </div>
 <div class="flex-container border-1 border__warning--300">
   <div class="demo88 border-1 border__primary flex-5">.flex-5</div>
   <div class="demo88 border-1 border__primary flex-10">.flex-10</div>
 </div>
 <div class="flex-container border-1 border__warning--300">
   <div class="demo88 border-1 border__primary flex-12">.flex-12</div>
   <div class="demo88 border-1 border__primary flex-12">.flex-12</div>
 </div>
 <div class="flex-container border-1 border__warning--300">
   <div class="demo88 border-1 border__primary flex-1">.flex-1</div>
   <div class="demo88 border-1 border__primary flex-1">.flex-1</div>
 </div>
 <div class="flex-container border-1 border__warning--300">
   <div class="demo88 border-1 border__primary" style="width: auto">no class</div>
   <div class="demo88 border-1 border__primary flex-1">.flex-1</div>
   <div class="demo88 border-1 border__primary" style="width: auto">no class</div>
   <div class="demo88 border-1 border__primary" style="width: auto">no class</div>
 </div>
 <h5>Allow elements to wrap in container when out of space (default behavior) or not</h5>
 <div class="flex-container border-1 border__warning--300 flex-nowrap">
   <div class="demo88 border-1 border__primary">.flex-nowrap</div>
   <div class="demo88 border-1 border__primary">.flex-nowrap</div>
   <div class="demo88 border-1 border__primary">.flex-nowrap</div>
   <div class="demo88 border-1 border__primary">.flex-nowrap</div>
   <div class="demo88 border-1 border__primary">.flex-nowrap</div>
   <div class="demo88 border-1 border__primary">.flex-nowrap</div>
   <div class="demo88 border-1 border__primary">.flex-nowrap</div>
   <div class="demo88 border-1 border__primary">.flex-nowrap</div>
   <div class="demo88 border-1 border__primary">.flex-nowrap</div>
   <div class="demo88 border-1 border__primary">.flex-nowrap</div>
   <div class="demo88 border-1 border__primary">.flex-nowrap</div>
   <div class="demo88 border-1 border__primary">.flex-nowrap</div>
   <div class="demo88 border-1 border__primary">.flex-nowrap</div>
   <div class="demo88 border-1 border__primary">.flex-nowrap</div>
 </div>
 <div class="flex-container border-1 border__warning--300 flex-wrap">
   <div class="demo88 border-1 border__primary">.flex-wrap</div>
   <div class="demo88 border-1 border__primary">.flex-wrap</div>
   <div class="demo88 border-1 border__primary">.flex-wrap</div>
   <div class="demo88 border-1 border__primary">.flex-wrap</div>
   <div class="demo88 border-1 border__primary">.flex-wrap</div>
   <div class="demo88 border-1 border__primary">.flex-wrap</div>
   <div class="demo88 border-1 border__primary">.flex-wrap</div>
   <div class="demo88 border-1 border__primary">.flex-wrap</div>
   <div class="demo88 border-1 border__primary">.flex-wrap</div>
   <div class="demo88 border-1 border__primary">.flex-wrap</div>
 </div>
 <h5>Specify flex flow direction. !! Row is default, Changing to column reverses all directions, so align now controls horizontal layout and justify controls vertical layout. Wrapping is top to bottom instead of left to right etc...</h5>
 <div class="flex-container border-1 border__warning--300 flex-column">
   <div class="demo88 border-1 border__primary">.flex-column</div>
   <div class="demo88 border-1 border__primary">.flex-column</div>
   <div class="demo88 border-1 border__primary">.flex-column</div>
   <div class="demo88 border-1 border__primary">.flex-column</div>
 </div>
 <div class="flex-container border-1 border__warning--300 flex-row">
   <div class="demo88 border-1 border__primary">.flex-row</div>
   <div class="demo88 border-1 border__primary">.flex-row</div>
   <div class="demo88 border-1 border__primary">.flex-row</div>
   <div class="demo88 border-1 border__primary">.flex-row</div>
 </div>

<input class="text-input" type="text" placeholder="adipisicing adipisicing aliqua">
 <input class="text-input text-input--has-bg" type="text" placeholder="adipisicing adipisicing aliqua">

<textarea class="bubble__textarea" placeholder="adipisicing adipisicing aliqua"></textarea>

<div class="p-5 m-5">
   Margin classes:
   <br>
   <i><strong>.m-[top|left|right|bottom]-[0-100]</strong></i>
 </div>
 <div class="p-5 m-5">
   Padding classes:
   <br>
   <i><strong>.p-[top|left|right|bottom]-[0-100]</strong></i>
 </div>

<div class="mood-verbatims">
 <div class="bloomin-nav-bar">
 </div>
</div>

<div class="separator-with-arrow"></div>
 <br>
 <div class="separator-with-arrow separator-with-arrow--has-bg"></div>

<div class="m-5 p-5 shadow__primary--300">
   Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
 </div>
 <div class="m-5 p-5 shadow__primary">
   Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
 </div>
 <div class="m-5 p-5 shadow__warning--300">
   Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
 </div>
 <div class="m-5 p-5 shadow__danger--300">
   Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
 </div>
 <div class="m-5 p-5 shadow__success--300">
   Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
 </div>
 <div class="m-5 p-5 shadow__data--300">
   Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
 </div>
 <div class="m-5 p-5 shadow__primary--text">
   Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
 </div>
 <div class="m-5 p-5 shadow__secondary--text">
   Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.
 </div>

<div class="stars">
    <div class="star-chart">
       <div class="star-chart-star" data-star-type="full"></div>
       <div class="star-chart-star" data-star-type="half"></div>
       <div class="star-chart-star" data-star-type="empty"></div>
    </div>
 </div>

<div class="stats-item">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>

<div class="stats-item--xl">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>

<span class="subtheme-badge" style="background-color: #b2f3b8">Intérêt et sens du travail au quotidien</span>

<p class="font-size--epic">adipisicing adipisicing aliqua aliquip aliquip</p>

<p class="font-size--hero">adipisicing adipisicing aliqua aliquip aliquip</p>

<p class="font-size--biggest">adipisicing adipisicing aliqua aliquip aliquip</p>

<p class="font-size--even_bigger">adipisicing adipisicing aliqua aliquip aliquip</p>

<p class="font-size--bigger">adipisicing adipisicing aliqua aliquip aliquip</p>

<p class="font-size--big">adipisicing adipisicing aliqua aliquip aliquip</p>

<p class="font-size--standard">adipisicing adipisicing aliqua aliquip aliquip</p>

<p class="font-size--small">adipisicing adipisicing aliqua aliquip aliquip</p>

<p class="font-size--smaller">adipisicing adipisicing aliqua aliquip aliquip</p>

<p>adipisicing adipisicing aliqua aliquip aliquip</p>
 <p class="text__primary--text">adipisicing adipisicing aliqua aliquip aliquip</p>
 <p class="text__secondary--text">adipisicing adipisicing aliqua aliquip aliquip</p>
 <p class="text__secondary--text bg__primary--text">adipisicing adipisicing aliqua aliquip aliquip</p>
 <p class="text__primary--300">adipisicing adipisicing aliqua aliquip aliquip</p>
 <p class="text__primary">adipisicing adipisicing aliqua aliquip aliquip</p>
 <p class="text__primary--200">adipisicing adipisicing aliqua aliquip aliquip</p>
 <p class="text__primary--100">adipisicing adipisicing aliqua aliquip aliquip</p>
 <p class="text__primary--100 bg__primary--text">adipisicing adipisicing aliqua aliquip aliquip</p>
 <p class="text__warning--300">adipisicing adipisicing aliqua aliquip aliquip</p>
 <p class="text__warning--200">adipisicing adipisicing aliqua aliquip aliquip</p>
 <p class="text__warning--100">adipisicing adipisicing aliqua aliquip aliquip</p>
 <p class="text__danger--300">adipisicing adipisicing aliqua aliquip aliquip</p>
 <p class="text__danger--200">adipisicing adipisicing aliqua aliquip aliquip</p>
 <p class="text__danger--100">adipisicing adipisicing aliqua aliquip aliquip</p>
 <p class="text__success--300">adipisicing adipisicing aliqua aliquip aliquip</p>
 <p class="text__success--200">adipisicing adipisicing aliqua aliquip aliquip</p>
 <p class="text__success--100">adipisicing adipisicing aliqua aliquip aliquip</p>
 <p class="text__data--300">adipisicing adipisicing aliqua aliquip aliquip</p>
 <p class="text__data--200">adipisicing adipisicing aliqua aliquip aliquip</p>
 <p class="text__data--100">adipisicing adipisicing aliqua aliquip aliquip</p>
 <p class="text__bg">adipisicing adipisicing aliqua aliquip aliquip</p>
 <p class="text__bg bg__primary--text">adipisicing adipisicing aliqua aliquip aliquip</p>

<div class="p-5 m-5">
   <h3>Helper classes available but not usable in the style-guide because breaks everything:</h3>
   <ul>
     <li class="p-5"><i><strong>.fixed-top {position: fixed; top:0; right:0; left:0;}</strong></i></li>
     <li class="p-5"><i><strong>.h-100 {height: 100%}</strong></i></li>
     <li class="p-5"><i><strong>.vh-100 {height: 100vh}</strong></i></li>
     <li class="p-5"><i><strong>.min-heigt-1 to .min-height-100 {min-height: 1 to 100 px}</strong></i></li>
     <li class="p-5"><i><strong>.scroll-y {overflow-y: auto}</strong></i></li>
     <li class="p-5"><i><strong>.opacity--80/50/30 {opacity: 0.8/0.5/0.3}</strong></i></li>
     <li class="p-5"><i><strong>.width--100/75/50/25 {width: 100%/75%/50%/25%}</strong></i></li>
     <li class="p-5"><i><strong>.hide {display: none}</strong></i></li>
     <li class="p-5"><i><strong>.invisible {visibility: hidden}</strong></i></li>
     <li class="p-5"><i><strong>.border-radius-[0-10]</strong></i></li>
     <li class="p-5"><i><strong>.display-block</strong></i></li>
     <li class="p-5"><i><strong>.display-inline-block</strong></i></li>
     <li class="p-5"><i><strong>.display-none</strong></i></li>
     <li class="p-5"><i><strong>.text--bold</strong></i></li>
     <li class="p-5"><i><strong>.break-word</strong></i></li>
     <li class="p-5"><i><strong>.text-align--center/left/right</strong></i></li>
     <li class="p-5"><i><strong>.z-index-0/1000/2000..9000</strong></i></li>
     <li class="p-5"><i><strong>.rounded-item {border-radius: 50%}</strong></i></li>
     <li class="p-5"><i><strong>.no-print @media print {display: none}</strong></i></li>
   </ul>
 </div>