/*------------------------------------*\
        #EXAMPLE-SETUP
\*------------------------------------*/


* { font-family: 'Oswald', sans-serif; }

.example {
  text-align: center;
  padding-top: 30px;
}

.example .ex-bar-content { font-size: 24px; }

/*------------------------------------*\
        #EXPANDING-BAR
\*------------------------------------*/


* { box-sizing: border-box; }

.ex-bar-nav {
  list-style: none;
  padding: 0;
}

.ex-bar-item {
  position: relative;
  display: inline-block;
  height: 45px;
  margin-right: 15px;
}

.ex-bar-content { padding: 10px 5px 0; }

.ex-bar-link {
  position: absolute;
  top: 0;
  width: 100%;
  display: block;
  padding: 40px 50% 0;
  transition: .5s ease;
}

.ex-bar-link:hover { padding: 40px 0 0; }

.ex-bar-bar {
  display: block;
  height: 5px;
  background: #00B6EA;
  border-radius: 3px;
}