<figure class="d-container">
  <h1 class="heading-wide">Flexbox adventures</h1>
  <nav class="d-flexbox-navigation">
    <ul class="js-navigation-items">
      <li><a href="#">Nav Item 1</a></li>
      <li><a href="#">Nav Item 2</a></li>
      <li><a href="#">Nav Item 3</a></li>
    </ul>
  </nav>
  <nav class="d-navigation">
    <ul>
      <li><a class="d-btn-primary t-purple js-btn-add" href="#">+ Add Item</a></li>
      <li><a class="d-btn-primary t-purple js-btn-remove" href="#">- Remove Item</a></li>
    </ul>
  </nav>
</figure>

* {
    margin: 0;
    padding: 0
}

li {
    list-style: none
}

* {
    box-sizing: border-box
}

body {
    font-size: 100%;
    line-height: 1.6
}

.d-container {
    font-family: brandon-grotesque,sans-serif
}

.d-btn-primary {
    background: #7a7a7a;
    color: #fff;
    width: 12em;
    text-align: center;
    -webkit-transition: background .4s ease-in-out;
    transition: background .4s ease-in-out
}

.d-btn-primary:hover {
    background: #919393
}

.d-btn-primary.t-purple {
    background: #484281
}

.d-btn-primary.t-purple:hover {
    background: #2a2749
}

.d-btn-primary.t-blue {
    background: #38ABCC
}

.d-btn-primary.t-blue:hover {
    background: #2f8199
}

.d-btn-secondary {
    background: 0 0;
    border: 1px solid #111;
    color: #111
}
.d-flexbox-navigation li,.d-flexbox-navigation ul {
    display: -webkit-box;
    transition: all .4s ease-in-out
}

.d-flexbox-navigation li,.d-flexbox-navigation li a,.d-flexbox-navigation ul {
    -webkit-transition: all .4s ease-in-out
}

.d-container:first-child {
    margin-top: 0
}

.d-container {
    background: #f7f7f7;
    border-bottom: 1px solid #eee;
    margin: 2em auto;
    padding: 2em 5%;
    width: 100%
}

.d-container:after {
    clear: both;
    content: "";
    display: table
}

.d-container>h1 {
    color: #333;
    font-size: 2em;
    line-height: 1.2;
    margin: 0 0 .5em;
    text-align: center
}

.d-navigation {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 2em auto 0
}

.d-navigation li a {
    border-radius: 10px;
    display: block;
    margin: 1em;
    padding: .75em 1em;
    text-decoration: none
}

.d-flexbox-navigation {
    background: #484281;
    border: 1px solid #111;
    padding: 1em
}

.d-flexbox-navigation ul {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 20%;
    -ms-flex: 1 1 20%;
    flex: 1 1 20%;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.d-flexbox-navigation li {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 20%;
    -ms-flex: 1 1 20%;
    flex: 1 1 20%;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start
}

.d-flexbox-navigation li a {
    border: 1px solid #111;
    padding: 1.5em;
    display: block;
    background: #fff;
    border-radius: 3px;
    text-decoration: none;
    text-align: center;
    color: #333;
    width: 100%;
    transition: all .4s ease-in-out
}

.d-flexbox-navigation li a:hover {
    background: #a303cb;
    color: #fff
}


@media all and (min-width: 30em) {
    .d-container>h1 {
        font-size:3em
    }

    .d-flex-vertical-center {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 400px;
        -ms-flex: 0 0 400px;
        flex: 0 0 400px
    }
}

@media all and (min-width: 40em) {
    .d-navigation li {
        float: left
    }
}

@media all and (min-width: 48em) {
    .d-container>h1 {
        font-size:3.5em
    }
}

@media all and (min-width: 49em) {
    .d-flex {
        -webkit-flex-wrap:nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap
    }
}

@-webkit-keyframes flexInsert {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }

    70% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05)
    }

    80% {
        -webkit-transform: scale(.95);
        transform: scale(.95)
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes flexInsert {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }

    70% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05)
    }

    80% {
        -webkit-transform: scale(.95);
        transform: scale(.95)
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@-webkit-keyframes flexRemove {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    100% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }
}

@keyframes flexRemove {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    100% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }
}

!function(){var e,t,n,i,d,r,a,o,c,l="ontouchstart"in window,u="pointerdown"in window;e=document,o=2,t=e.querySelector(".js-btn-add"),n=e.querySelector(".js-btn-remove"),i=e.querySelector(".js-navigation-items"),c=function(e){e.preventDefault(),e.target.click()},a=function(){d=e.createElement("li"),r=e.createElement("a"),r.setAttribute("href","#"),r.innerHTML="Nav Item "+(o+1),d.appendChild(r)},addItem=function(e){e.preventDefault(),a(),o++,i.appendChild(d)},removeItem=function(e){e.preventDefault(),o>1&&(o--,i.removeChild(i.lastElementChild))},l&&(t.addEventListener("touchEnd",c,!1),n.addEventListener("touchEnd",c,!1)),u&&(t.addEventListener("pointerup",c,!1),n.addEventListener("pointerup",c,!1)),t.addEventListener("click",addItem,!1),n.addEventListener("click",removeItem,!1)}();