├── .gitignore
├── README.md
├── bower.json
├── css-circle-menu-featured.png
├── css
    ├── circle-menu.css
    ├── circle-menu.min.css
    ├── common.css
    ├── common.min.css
    ├── font-awesome.css
    └── font-awesome.min.css
├── fonts
    ├── font-awesome
    │   ├── FontAwesome.otf
    │   ├── fontawesome-webfont.eot
    │   ├── fontawesome-webfont.svg
    │   ├── fontawesome-webfont.ttf
    │   ├── fontawesome-webfont.woff
    │   └── fontawesome-webfont.woff2
    └── oxygen
    │   ├── oxygen-v5-latin-300.eot
    │   ├── oxygen-v5-latin-300.svg
    │   ├── oxygen-v5-latin-300.ttf
    │   ├── oxygen-v5-latin-300.woff
    │   ├── oxygen-v5-latin-300.woff2
    │   ├── oxygen-v5-latin-700.eot
    │   ├── oxygen-v5-latin-700.svg
    │   ├── oxygen-v5-latin-700.ttf
    │   ├── oxygen-v5-latin-700.woff
    │   ├── oxygen-v5-latin-700.woff2
    │   ├── oxygen-v5-latin-regular.eot
    │   ├── oxygen-v5-latin-regular.svg
    │   ├── oxygen-v5-latin-regular.ttf
    │   ├── oxygen-v5-latin-regular.woff
    │   └── oxygen-v5-latin-regular.woff2
├── gulpfile.js
├── img
    ├── house.svg
    ├── photo.svg
    ├── pin.svg
    ├── search.svg
    └── tools.svg
├── index.html
├── js
    ├── dist
    │   └── circleMenu.min.js
    ├── lib
    │   ├── carbonAd.js
    │   └── githubIcons.js
    └── src
    │   └── circleMenu.js
├── package.json
└── sass
    ├── _circle-menu-helpers.scss
    ├── _variables.scss
    ├── circle-menu.scss
    └── common.scss


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # CSS Circle Fly-Out Navigation
  2 | 
  3 | My circular fly-out CSS navigation menu component, built with CSS3. [View the demo here.](http://callmenick.com/_development/css-circle-menu/)
  4 | 
  5 | ![Circle fly out menu](css-circle-menu-featured.png)
  6 | 
  7 | ## Usage
  8 | 
  9 | To use, include the CSS and JavaScript in your app. Markup your menu like this:
 10 | 
 11 | ```html
 12 | <nav class="c-circle-menu js-menu">
 13 |   <button class="c-circle-menu__toggle js-menu-toggle">
 14 |     <span>Toggle</span>
 15 |   </button>
 16 |   <ul class="c-circle-menu__items">
 17 |     <li class="c-circle-menu__item">
 18 |       <a href="#" class="c-circle-menu__link">
 19 |         <img src="path/to/icon" alt="">
 20 |       </a>
 21 |     </li>
 22 |     <!-- more items here -->
 23 |   </ul>
 24 |   <div class="c-circle-menu__mask js-menu-mask"></div>
 25 | </nav>
 26 | ```
 27 | 
 28 | Then, include your script like this:
 29 | 
 30 | ```html
 31 | <script src="path/to/circleMenu.min.js"></script>
 32 | ```
 33 | 
 34 | Finally, you can initialize the menu like this:
 35 | 
 36 | ```html
 37 | <script>
 38 |   var el = '.js-menu';
 39 |   var myMenu = cssCircleMenu(el);
 40 | </script>
 41 | ```
 42 | 
 43 | The default number of menu items is 5. To use a different number of items, you'll have to [configure and build with Sass and Gulp.](#configuring-and-building-with-sass-and-gulp)
 44 | 
 45 | ### Out of the box usage
 46 | 
 47 | You can use this component out of the box by downloading the uncompressed or compressed files from the `css/` directory.
 48 | 
 49 | ### Use as a Bower component
 50 | 
 51 | The component is available as a bower package, and you can import it by running the following command:
 52 | 
 53 | ```
 54 | bower install css-circle-menu
 55 | ```
 56 | 
 57 | ## Configuring and Building with Sass and Gulp
 58 | 
 59 | The component is built with Sass (SCSS) and uses a JavaScript module as well to handle events. Everything gets compiled and built with Gulp. To develop and compile from gulp, just run:
 60 | 
 61 | ```
 62 | npm install
 63 | gulp
 64 | ```
 65 | 
 66 | To watch files during development, run
 67 | 
 68 | ```
 69 | gulp watch
 70 | ```
 71 | 
 72 | Using the Gulp workflow is hugely beneficial, because it makes the component much easier to work with and customise. If you're not using Gulp to compile the Sass, you will still need to leverage Compass to make use of the math helper functions. The following 11 variables are configurable in the Sass up front, and their defaults are written out for you to look at:
 73 | 
 74 | ```scss
 75 | // $menu-item-radius: 48px;                  [1]
 76 | // $num-items: 5;                            [2]
 77 | // $menu-theme-color: rgb(255, 40, 60);      [3]
 78 | // $spread-radius: 144px;                    [4]
 79 | // $delay-increment: 0.1s;                   [5]
 80 | // $menu-position: "bottom-right";           [6]
 81 | // $mq-height: 480px;                        [7]
 82 | // $mq-width: 480px;                         [8]
 83 | // $button-bar-height: 4px;                  [9]
 84 | // $button-bar-spacing: 4px;                 [10]
 85 | // $button-lr-padding: 10px;                 [11]
 86 | ```
 87 | 
 88 | You can edit these as you see fit. Here's the breakdown of these 11 configuration options:
 89 | 
 90 | 1. Set up the initial menu item radius.
 91 | 2. Decalare how many items our menu will contain.
 92 | 3. Set up a theme colour.
 93 | 4. The spread radius, which is how far the menu items spread from the origin.
 94 | 5. The delay increment, which is how much delay there is between each menu
 95 |    item leaving from / returning to the origin.
 96 | 6. The position of the menu, chosen from one of four values:
 97 |        `bottom-right`   - bottom right corner (this is the default)
 98 |        `bottom-left`    - bottom left corner
 99 |        `top-left`       - top left corner
100 |        `top-right`      - top right corner
101 | 7. Minimum height at which menu increases size.
102 | 8. Minimum width at which menu increases size.
103 | 9. The height of a bar in the toggle button.
104 | 10. The spacing between bars in the toggle button.
105 | 11. The padding between the left and right of the toggle button container and
106 |     the bars.
107 | 
108 | Other variables will have to be customised further down in the Sass with your own discretion. Be sure to change up the Sass variable that defines the number of navigation items.
109 | 
110 | ## License & Copyright
111 | 
112 | Licensed under the [MIT license.](http://www.opensource.org/licenses/mit-license.php)
113 | 
114 | Copyright 2016, [Call Me Nick.](http://callmenick.com)
115 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "css-circle-menu",
 3 |   "version": "2.0.0",
 4 |   "homepage": "https://github.com/callmenick/CSS-Circle-Menu",
 5 |   "authors": [
 6 |     "Nick Salloum <nick@callmenick.com>"
 7 |   ],
 8 |   "description": "Circular fly-out navigation menu with CSS",
 9 |   "main": "gulpfile.js",
10 |   "ignore": [
11 |     "*",
12 |     "!css/circle-menu.css",
13 |     "!css/circle-menu.min.css",
14 |     "!gulpfile.js",
15 |     "!js/src/circleMenu.js",
16 |     "!js/dist/circleMenu.min.js",
17 |     "!sass/circle-menu.scss",
18 |     "!sass/_circle-menu-helpers.scss"
19 |   ],
20 |   "keywords": [
21 |     "CSS",
22 |     "CSS3",
23 |     "menu",
24 |     "flyout",
25 |     "menu",
26 |     "circular",
27 |     "menu",
28 |     "transitions",
29 |     "transforms"
30 |   ],
31 |   "license": "MIT"
32 | }
33 | 


--------------------------------------------------------------------------------
/css-circle-menu-featured.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/callmenick/CSS-Circle-Menu/862540b4e1e3efcfa905983917037f97ae189fa1/css-circle-menu-featured.png


--------------------------------------------------------------------------------
/css/circle-menu.css:
--------------------------------------------------------------------------------
  1 | /* -----------------------------------------------------------------------------
  2 | 
  3 |   Circle Menu Component
  4 | 
  5 | ----------------------------------------------------------------------------- */
  6 | /**
  7 |  * This is the actual menu component. It consists of a menu element with an
  8 |  * unordered list inside, and also a button to toggle the actual menu.
  9 |  * It's fixed to the bottom-right of the screen, and each of the items are
 10 |  * positioned absolutely inside the parent menu tag. The default set up above is
 11 |  * 5 menu items. Because all the transforms and such are calculated wrt
 12 |  * this number, you'll need to edit it accordingly depending on how many items
 13 |  * you decide to put in the markup.
 14 |  *
 15 |  * Example markup:
 16 |  *
 17 |  * <menu class="c-circle-menu">
 18 |  *   <ul class="c-circle-menu__items">
 19 |  *     <li class="c-circle-menu__item">
 20 |  *       <a class="c-circle-menu__link"></a>
 21 |  *     </li>
 22 |  *     <li class="c-circle-menu__item">
 23 |  *       <a class="c-circle-menu__link"></a>
 24 |  *     </li>
 25 |  *     ...
 26 |  *   </ul>
 27 |  * </menu>
 28 |  */
 29 | .c-circle-menu {
 30 |   position: fixed;
 31 |   bottom: 12px;
 32 |   right: 12px;
 33 |   z-index: 1000;
 34 |   width: 48px;
 35 |   height: 48px;
 36 |   border-radius: 24px;
 37 | }
 38 | 
 39 | @media (min-width: 480px) and (min-height: 480px) {
 40 |   .c-circle-menu {
 41 |     width: 96px;
 42 |     height: 96px;
 43 |     border-radius: 48px;
 44 |   }
 45 | }
 46 | 
 47 | .c-circle-menu__items {
 48 |   display: block;
 49 |   list-style: none;
 50 |   position: absolute;
 51 |   z-index: 2;
 52 |   margin: 0;
 53 |   padding: 0;
 54 | }
 55 | 
 56 | .c-circle-menu__item {
 57 |   display: block;
 58 |   position: absolute;
 59 |   top: 0;
 60 |   left: 0;
 61 |   width: 48px;
 62 |   height: 48px;
 63 |   border-radius: 24px;
 64 |   opacity: 0;
 65 |   -webkit-transition: opacity, -webkit-transform;
 66 |   transition: opacity, -webkit-transform;
 67 |   transition: transform, opacity;
 68 |   transition: transform, opacity, -webkit-transform;
 69 |   -webkit-transition-duration: 0.3s, 0.3s;
 70 |           transition-duration: 0.3s, 0.3s;
 71 |   -webkit-transition-timing-function: cubic-bezier(0.35, -0.59, 0.47, 0.97);
 72 |           transition-timing-function: cubic-bezier(0.35, -0.59, 0.47, 0.97);
 73 | }
 74 | 
 75 | @media (min-width: 480px) and (min-height: 480px) {
 76 |   .c-circle-menu__item {
 77 |     width: 96px;
 78 |     height: 96px;
 79 |     border-radius: 48px;
 80 |   }
 81 | }
 82 | 
 83 | /**
 84 |  * Transisition delays at the default state.
 85 |  */
 86 | .c-circle-menu__item:nth-child(1) {
 87 |   -webkit-transition-delay: 0.4s;
 88 |           transition-delay: 0.4s;
 89 | }
 90 | 
 91 | .c-circle-menu__item:nth-child(2) {
 92 |   -webkit-transition-delay: 0.3s;
 93 |           transition-delay: 0.3s;
 94 | }
 95 | 
 96 | .c-circle-menu__item:nth-child(3) {
 97 |   -webkit-transition-delay: 0.2s;
 98 |           transition-delay: 0.2s;
 99 | }
100 | 
101 | .c-circle-menu__item:nth-child(4) {
102 |   -webkit-transition-delay: 0.1s;
103 |           transition-delay: 0.1s;
104 | }
105 | 
106 | .c-circle-menu__item:nth-child(5) {
107 |   -webkit-transition-delay: 0s;
108 |           transition-delay: 0s;
109 | }
110 | 
111 | /**
112 |  * We're using the .is-active class, which is added to the menu via JavaScript.
113 |  * Once the menu is active, the items inherit the properties below. We will
114 |  * manually write out the transform properties for first and last items, as we
115 |  * already know their position. For all items in between though, we'll use some
116 |  * polar-to-cartesian math and some Sass functions to get the positioning.
117 |  */
118 | .c-circle-menu.is-active .c-circle-menu__item {
119 |   -webkit-transition-timing-function: cubic-bezier(0.35, 0.03, 0.47, 1.59);
120 |           transition-timing-function: cubic-bezier(0.35, 0.03, 0.47, 1.59);
121 | }
122 | 
123 | .c-circle-menu.is-active .c-circle-menu__item:nth-child(1) {
124 |   -webkit-transition-delay: 0s;
125 |           transition-delay: 0s;
126 |   -webkit-transform: translate(-144px, 0);
127 |           transform: translate(-144px, 0);
128 | }
129 | 
130 | @media (min-width: 480px) and (min-height: 480px) {
131 |   .c-circle-menu.is-active .c-circle-menu__item:nth-child(1) {
132 |     -webkit-transform: translate(-288px, 0);
133 |             transform: translate(-288px, 0);
134 |   }
135 | }
136 | 
137 | .c-circle-menu.is-active .c-circle-menu__item:nth-child(2) {
138 |   -webkit-transition-delay: 0.1s;
139 |           transition-delay: 0.1s;
140 |   -webkit-transform: translate(-134px, -56px);
141 |           transform: translate(-134px, -56px);
142 | }
143 | 
144 | @media (min-width: 480px) and (min-height: 480px) {
145 |   .c-circle-menu.is-active .c-circle-menu__item:nth-child(2) {
146 |     -webkit-transform: translate(-267px, -111px);
147 |             transform: translate(-267px, -111px);
148 |   }
149 | }
150 | 
151 | .c-circle-menu.is-active .c-circle-menu__item:nth-child(3) {
152 |   -webkit-transition-delay: 0.2s;
153 |           transition-delay: 0.2s;
154 |   -webkit-transform: translate(-102px, -102px);
155 |           transform: translate(-102px, -102px);
156 | }
157 | 
158 | @media (min-width: 480px) and (min-height: 480px) {
159 |   .c-circle-menu.is-active .c-circle-menu__item:nth-child(3) {
160 |     -webkit-transform: translate(-204px, -204px);
161 |             transform: translate(-204px, -204px);
162 |   }
163 | }
164 | 
165 | .c-circle-menu.is-active .c-circle-menu__item:nth-child(4) {
166 |   -webkit-transition-delay: 0.3s;
167 |           transition-delay: 0.3s;
168 |   -webkit-transform: translate(-56px, -134px);
169 |           transform: translate(-56px, -134px);
170 | }
171 | 
172 | @media (min-width: 480px) and (min-height: 480px) {
173 |   .c-circle-menu.is-active .c-circle-menu__item:nth-child(4) {
174 |     -webkit-transform: translate(-111px, -267px);
175 |             transform: translate(-111px, -267px);
176 |   }
177 | }
178 | 
179 | .c-circle-menu.is-active .c-circle-menu__item:nth-child(5) {
180 |   -webkit-transition-delay: 0.4s;
181 |           transition-delay: 0.4s;
182 |   -webkit-transform: translate(0, -144px);
183 |           transform: translate(0, -144px);
184 | }
185 | 
186 | @media (min-width: 480px) and (min-height: 480px) {
187 |   .c-circle-menu.is-active .c-circle-menu__item:nth-child(5) {
188 |     -webkit-transform: translate(0, -288px);
189 |             transform: translate(0, -288px);
190 |   }
191 | }
192 | 
193 | /**
194 |  * Apart from the transform properties, we'll also make sure the items get
195 |  * the correct opacity.
196 |  */
197 | .c-circle-menu.is-active .c-circle-menu__item {
198 |   opacity: 1;
199 | }
200 | 
201 | /**
202 |  * Let's style the links now. This is just boilerplate stuff, and of course,
203 |  * you'll probably want to change up the icons to match your needs. In any case,
204 |  * we'll do it here for the sake of completion.
205 |  */
206 | .c-circle-menu__link {
207 |   display: block;
208 |   width: 100%;
209 |   height: 100%;
210 |   border-radius: 24px;
211 |   box-shadow: inset 0 0 0 2px #fff;
212 | }
213 | 
214 | @media (min-width: 480px) and (min-height: 480px) {
215 |   .c-circle-menu__link {
216 |     border-radius: 48px;
217 |   }
218 | }
219 | 
220 | .c-circle-menu__link img {
221 |   display: block;
222 |   max-width: 100%;
223 |   height: auto;
224 | }
225 | 
226 | .c-circle-menu__link:hover {
227 |   box-shadow: inset 0 0 0 2px #ff283c;
228 | }
229 | 
230 | /* -----------------------------------------------------------------------------
231 | 
232 |   The Toggle Component
233 | 
234 | ----------------------------------------------------------------------------- */
235 | /**
236 |  * The toggle is a button element, and as such requires some resets that are
237 |  * unique to buttons. This button also inherits some funky stuff from my
238 |  * CSS animating hamburger menu icons demo, which can be found at this url:
239 |  * https://github.com/callmenick/Animating-Hamburger-Icons
240 |  */
241 | .c-circle-menu__toggle {
242 |   display: block;
243 |   position: absolute;
244 |   z-index: 100;
245 |   margin: 0;
246 |   padding: 0;
247 |   width: 48px;
248 |   height: 48px;
249 |   background-color: #ff283c;
250 |   font: inherit;
251 |   font-size: 0;
252 |   text-indent: -9999px;
253 |   border-radius: 24px;
254 |   -webkit-transition: background 0.3s;
255 |   transition: background 0.3s;
256 |   /* reset some browser defaults */
257 |   cursor: pointer;
258 |   border: none;
259 |   -webkit-appearance: none;
260 |   -moz-appearance: none;
261 |   appearance: none;
262 |   box-shadow: none;
263 | }
264 | 
265 | @media (min-width: 480px) and (min-height: 480px) {
266 |   .c-circle-menu__toggle {
267 |     width: 96px;
268 |     height: 96px;
269 |     border-radius: 48px;
270 |   }
271 | }
272 | 
273 | .c-circle-menu__toggle:hover,
274 | .c-circle-menu__toggle:focus,
275 | .c-circle-menu__toggle.is-active {
276 |   outline: none;
277 |   background-color: #c10012;
278 | }
279 | 
280 | .c-circle-menu__toggle span,
281 | .c-circle-menu__toggle span::before,
282 | .c-circle-menu__toggle span::after {
283 |   display: block;
284 |   position: absolute;
285 |   height: 4px;
286 |   background: #fff;
287 |   border-radius: 1px;
288 | }
289 | 
290 | @media (min-width: 480px) and (min-height: 480px) {
291 |   .c-circle-menu__toggle span,
292 |   .c-circle-menu__toggle span::before,
293 |   .c-circle-menu__toggle span::after {
294 |     height: 8px;
295 |     border-radius: 2px;
296 |   }
297 | }
298 | 
299 | .c-circle-menu__toggle span {
300 |   top: 22px;
301 |   left: 10px;
302 |   right: 10px;
303 |   -webkit-transition: background 0.3s;
304 |   transition: background 0.3s;
305 | }
306 | 
307 | @media (min-width: 480px) and (min-height: 480px) {
308 |   .c-circle-menu__toggle span {
309 |     top: 44px;
310 |     left: 20px;
311 |     right: 20px;
312 |   }
313 | }
314 | 
315 | .c-circle-menu__toggle span::before,
316 | .c-circle-menu__toggle span::after {
317 |   left: 0;
318 |   width: 100%;
319 |   content: "";
320 |   -webkit-transition-duration: 0.3s, 0.3s;
321 |           transition-duration: 0.3s, 0.3s;
322 |   -webkit-transition-delay: 0.3s, 0s;
323 |           transition-delay: 0.3s, 0s;
324 | }
325 | 
326 | .c-circle-menu__toggle span::before {
327 |   top: -8px;
328 |   -webkit-transition-property: top, -webkit-transform;
329 |   transition-property: top, -webkit-transform;
330 |   transition-property: top, transform;
331 |   transition-property: top, transform, -webkit-transform;
332 | }
333 | 
334 | @media (min-width: 480px) and (min-height: 480px) {
335 |   .c-circle-menu__toggle span::before {
336 |     top: -16px;
337 |   }
338 | }
339 | 
340 | .c-circle-menu__toggle span::after {
341 |   bottom: -8px;
342 |   -webkit-transition-property: bottom, -webkit-transform;
343 |   transition-property: bottom, -webkit-transform;
344 |   transition-property: bottom, transform;
345 |   transition-property: bottom, transform, -webkit-transform;
346 | }
347 | 
348 | @media (min-width: 480px) and (min-height: 480px) {
349 |   .c-circle-menu__toggle span::after {
350 |     bottom: -16px;
351 |   }
352 | }
353 | 
354 | /* button active state */
355 | .c-circle-menu__toggle.is-active span {
356 |   background: none;
357 | }
358 | 
359 | .c-circle-menu__toggle.is-active span::before {
360 |   top: 0;
361 |   -webkit-transform: rotate(45deg);
362 |           transform: rotate(45deg);
363 |   -webkit-transition-delay: 0s, 0.3s;
364 |           transition-delay: 0s, 0.3s;
365 | }
366 | 
367 | .c-circle-menu__toggle.is-active span::after {
368 |   bottom: 0;
369 |   -webkit-transform: rotate(-45deg);
370 |           transform: rotate(-45deg);
371 |   -webkit-transition-delay: 0s, 0.3s;
372 |           transition-delay: 0s, 0.3s;
373 | }
374 | 
375 | /* -----------------------------------------------------------------------------
376 | 
377 |   The Mask Component
378 | 
379 | ----------------------------------------------------------------------------- */
380 | /**
381 |  * Here's the mask component, which actually gets created and inserted to the
382 |  * DOM via JavaScript. It simply acts as an overlay to draw attention to the
383 |  * menu when it is active. It also uses the .is-acvite state class.
384 |  */
385 | .c-circle-menu__mask {
386 |   position: fixed;
387 |   top: 0;
388 |   left: 0;
389 |   z-index: 1;
390 |   visibility: hidden;
391 |   opacity: 0;
392 |   width: 100%;
393 |   height: 100%;
394 |   background-color: rgba(0, 0, 0, 0.8);
395 |   -webkit-transition: opacity 0.3s, visibility 0.3s;
396 |   transition: opacity 0.3s, visibility 0.3s;
397 | }
398 | 
399 | .c-circle-menu__mask.is-active {
400 |   opacity: 1;
401 |   visibility: visible;
402 | }
403 | 


--------------------------------------------------------------------------------
/css/circle-menu.min.css:
--------------------------------------------------------------------------------
1 | .c-circle-menu{position:fixed;bottom:12px;right:12px;z-index:1000;width:48px;height:48px;border-radius:24px}@media (min-width:480px) and (min-height:480px){.c-circle-menu{width:96px;height:96px;border-radius:48px}}.c-circle-menu__items{display:block;list-style:none;position:absolute;z-index:2;margin:0;padding:0}.c-circle-menu__item{display:block;position:absolute;top:0;left:0;width:48px;height:48px;border-radius:24px;opacity:0;-webkit-transition:opacity,-webkit-transform;transition:opacity,-webkit-transform;transition:transform,opacity;transition:transform,opacity,-webkit-transform;-webkit-transition-duration:.3s,.3s;transition-duration:.3s,.3s;-webkit-transition-timing-function:cubic-bezier(.35,-.59,.47,.97);transition-timing-function:cubic-bezier(.35,-.59,.47,.97)}.c-circle-menu__item:nth-child(1){-webkit-transition-delay:.4s;transition-delay:.4s}.c-circle-menu__item:nth-child(2){-webkit-transition-delay:.3s;transition-delay:.3s}.c-circle-menu__item:nth-child(3){-webkit-transition-delay:.2s;transition-delay:.2s}.c-circle-menu__item:nth-child(4){-webkit-transition-delay:.1s;transition-delay:.1s}.c-circle-menu__item:nth-child(5){-webkit-transition-delay:0s;transition-delay:0s}.c-circle-menu.is-active .c-circle-menu__item{-webkit-transition-timing-function:cubic-bezier(.35,.03,.47,1.59);transition-timing-function:cubic-bezier(.35,.03,.47,1.59);opacity:1}.c-circle-menu.is-active .c-circle-menu__item:nth-child(1){-webkit-transition-delay:0s;transition-delay:0s;-webkit-transform:translate(-144px,0);transform:translate(-144px,0)}@media (min-width:480px) and (min-height:480px){.c-circle-menu__item{width:96px;height:96px;border-radius:48px}.c-circle-menu.is-active .c-circle-menu__item:nth-child(1){-webkit-transform:translate(-288px,0);transform:translate(-288px,0)}}.c-circle-menu.is-active .c-circle-menu__item:nth-child(2){-webkit-transition-delay:.1s;transition-delay:.1s;-webkit-transform:translate(-134px,-56px);transform:translate(-134px,-56px)}@media (min-width:480px) and (min-height:480px){.c-circle-menu.is-active .c-circle-menu__item:nth-child(2){-webkit-transform:translate(-267px,-111px);transform:translate(-267px,-111px)}}.c-circle-menu.is-active .c-circle-menu__item:nth-child(3){-webkit-transition-delay:.2s;transition-delay:.2s;-webkit-transform:translate(-102px,-102px);transform:translate(-102px,-102px)}@media (min-width:480px) and (min-height:480px){.c-circle-menu.is-active .c-circle-menu__item:nth-child(3){-webkit-transform:translate(-204px,-204px);transform:translate(-204px,-204px)}}.c-circle-menu.is-active .c-circle-menu__item:nth-child(4){-webkit-transition-delay:.3s;transition-delay:.3s;-webkit-transform:translate(-56px,-134px);transform:translate(-56px,-134px)}@media (min-width:480px) and (min-height:480px){.c-circle-menu.is-active .c-circle-menu__item:nth-child(4){-webkit-transform:translate(-111px,-267px);transform:translate(-111px,-267px)}}.c-circle-menu.is-active .c-circle-menu__item:nth-child(5){-webkit-transition-delay:.4s;transition-delay:.4s;-webkit-transform:translate(0,-144px);transform:translate(0,-144px)}.c-circle-menu__link{display:block;width:100%;height:100%;border-radius:24px;box-shadow:inset 0 0 0 2px #fff}@media (min-width:480px) and (min-height:480px){.c-circle-menu.is-active .c-circle-menu__item:nth-child(5){-webkit-transform:translate(0,-288px);transform:translate(0,-288px)}.c-circle-menu__link{border-radius:48px}}.c-circle-menu__link img{display:block;max-width:100%;height:auto}.c-circle-menu__link:hover{box-shadow:inset 0 0 0 2px #ff283c}.c-circle-menu__toggle{display:block;position:absolute;z-index:100;margin:0;padding:0;width:48px;height:48px;background-color:#ff283c;font:inherit;font-size:0;text-indent:-9999px;border-radius:24px;-webkit-transition:background .3s;transition:background .3s;cursor:pointer;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none}@media (min-width:480px) and (min-height:480px){.c-circle-menu__toggle{width:96px;height:96px;border-radius:48px}}.c-circle-menu__toggle.is-active,.c-circle-menu__toggle:focus,.c-circle-menu__toggle:hover{outline:0;background-color:#c10012}.c-circle-menu__toggle span,.c-circle-menu__toggle span::after,.c-circle-menu__toggle span::before{display:block;position:absolute;height:4px;background:#fff;border-radius:1px}.c-circle-menu__toggle span{top:22px;left:10px;right:10px;-webkit-transition:background .3s;transition:background .3s}@media (min-width:480px) and (min-height:480px){.c-circle-menu__toggle span,.c-circle-menu__toggle span::after,.c-circle-menu__toggle span::before{height:8px;border-radius:2px}.c-circle-menu__toggle span{top:44px;left:20px;right:20px}}.c-circle-menu__toggle span::after,.c-circle-menu__toggle span::before{left:0;width:100%;content:"";-webkit-transition-duration:.3s,.3s;transition-duration:.3s,.3s;-webkit-transition-delay:.3s,0s;transition-delay:.3s,0s}.c-circle-menu__toggle span::before{top:-8px;-webkit-transition-property:top,-webkit-transform;transition-property:top,-webkit-transform;transition-property:top,transform;transition-property:top,transform,-webkit-transform}.c-circle-menu__toggle span::after{bottom:-8px;-webkit-transition-property:bottom,-webkit-transform;transition-property:bottom,-webkit-transform;transition-property:bottom,transform;transition-property:bottom,transform,-webkit-transform}@media (min-width:480px) and (min-height:480px){.c-circle-menu__toggle span::before{top:-16px}.c-circle-menu__toggle span::after{bottom:-16px}}.c-circle-menu__toggle.is-active span{background:0 0}.c-circle-menu__toggle.is-active span::before{top:0;-webkit-transform:rotate(45deg);transform:rotate(45deg);-webkit-transition-delay:0s,.3s;transition-delay:0s,.3s}.c-circle-menu__toggle.is-active span::after{bottom:0;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transition-delay:0s,.3s;transition-delay:0s,.3s}.c-circle-menu__mask{position:fixed;top:0;left:0;z-index:1;visibility:hidden;opacity:0;width:100%;height:100%;background-color:rgba(0,0,0,.8);-webkit-transition:opacity .3s,visibility .3s;transition:opacity .3s,visibility .3s}.c-circle-menu__mask.is-active{opacity:1;visibility:visible}


--------------------------------------------------------------------------------
/css/common.css:
--------------------------------------------------------------------------------
  1 | /* -----------------------------------------------------------------------------
  2 | 
  3 |   Fonts
  4 | 
  5 | ----------------------------------------------------------------------------- */
  6 | @font-face {
  7 |   font-family: 'Oxygen';
  8 |   font-style: normal;
  9 |   font-weight: 300;
 10 |   src: url("../fonts/oxygen/oxygen-v5-latin-300.eot");
 11 |   src: local("Oxygen Light"), local("Oxygen-Light"), url("../fonts/oxygen/oxygen-v5-latin-300.eot?#iefix") format("embedded-opentype"), url("../fonts/oxygen/oxygen-v5-latin-300.woff2") format("woff2"), url("../fonts/oxygen/oxygen-v5-latin-300.woff") format("woff"), url("../fonts/oxygen/oxygen-v5-latin-300.ttf") format("truetype"), url("../fonts/oxygen/oxygen-v5-latin-300.svg#Oxygen") format("svg");
 12 | }
 13 | 
 14 | @font-face {
 15 |   font-family: 'Oxygen';
 16 |   font-style: normal;
 17 |   font-weight: 400;
 18 |   src: url("../fonts/oxygen/oxygen-v5-latin-regular.eot");
 19 |   src: local("Oxygen"), local("Oxygen-Regular"), url("../fonts/oxygen/oxygen-v5-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/oxygen/oxygen-v5-latin-regular.woff2") format("woff2"), url("../fonts/oxygen/oxygen-v5-latin-regular.woff") format("woff"), url("../fonts/oxygen/oxygen-v5-latin-regular.ttf") format("truetype"), url("../fonts/oxygen/oxygen-v5-latin-regular.svg#Oxygen") format("svg");
 20 | }
 21 | 
 22 | @font-face {
 23 |   font-family: 'Oxygen';
 24 |   font-style: normal;
 25 |   font-weight: 700;
 26 |   src: url("../fonts/oxygen/oxygen-v5-latin-700.eot");
 27 |   src: local("Oxygen Bold"), local("Oxygen-Bold"), url("../fonts/oxygen/oxygen-v5-latin-700.eot?#iefix") format("embedded-opentype"), url("../fonts/oxygen/oxygen-v5-latin-700.woff2") format("woff2"), url("../fonts/oxygen/oxygen-v5-latin-700.woff") format("woff"), url("../fonts/oxygen/oxygen-v5-latin-700.ttf") format("truetype"), url("../fonts/oxygen/oxygen-v5-latin-700.svg#Oxygen") format("svg");
 28 | }
 29 | 
 30 | /* -----------------------------------------------------------------------------
 31 | 
 32 |   Root
 33 | 
 34 | ----------------------------------------------------------------------------- */
 35 | *,
 36 | *::before,
 37 | *::after {
 38 |   box-sizing: inherit;
 39 | }
 40 | 
 41 | html {
 42 |   box-sizing: border-box;
 43 | }
 44 | 
 45 | html,
 46 | body {
 47 |   margin: 0;
 48 |   padding: 0;
 49 |   height: 100%;
 50 | }
 51 | 
 52 | body {
 53 |   color: #6d6d6d;
 54 |   background-color: #272727;
 55 |   font-family: "Oxygen", Helvetica, sans-serif;
 56 |   font-size: 14px;
 57 |   line-height: 1.8;
 58 | }
 59 | 
 60 | /* -----------------------------------------------------------------------------
 61 | 
 62 |   Headings
 63 | 
 64 | ----------------------------------------------------------------------------- */
 65 | h1,
 66 | h2,
 67 | h3,
 68 | h4,
 69 | h5,
 70 | h6 {
 71 |   color: #3b3b3b;
 72 |   font-weight: 700;
 73 |   line-height: 1.2;
 74 | }
 75 | 
 76 | /* -----------------------------------------------------------------------------
 77 | 
 78 |   Links
 79 | 
 80 | ----------------------------------------------------------------------------- */
 81 | a {
 82 |   color: #ff2850;
 83 |   text-decoration: none;
 84 | }
 85 | 
 86 | a:hover {
 87 |   color: #c10024;
 88 | }
 89 | 
 90 | /* -----------------------------------------------------------------------------
 91 | 
 92 |   Text Stuff
 93 | 
 94 | ----------------------------------------------------------------------------- */
 95 | b,
 96 | strong {
 97 |   font-weight: 700;
 98 | }
 99 | 
100 | i,
101 | em {
102 |   font-style: italic;
103 | }
104 | 
105 | /* -----------------------------------------------------------------------------
106 | 
107 |   Embedded Content
108 | 
109 | ----------------------------------------------------------------------------- */
110 | img {
111 |   max-width: 100%;
112 |   height: auto;
113 | }
114 | 
115 | /* -----------------------------------------------------------------------------
116 | 
117 |   Primary Layout
118 | 
119 | ----------------------------------------------------------------------------- */
120 | .container {
121 |   margin: 0 auto;
122 |   padding: 0 24px;
123 |   max-width: 960px;
124 | }
125 | 
126 | @media all and (min-width: 480px) {
127 |   .container {
128 |     padding: 0 24px;
129 |   }
130 | }
131 | 
132 | @media all and (min-width: 720px) {
133 |   .container {
134 |     padding: 0 48px;
135 |   }
136 | }
137 | 
138 | /* -----------------------------------------------------------------------------
139 | 
140 |   Demo Header
141 | 
142 | ----------------------------------------------------------------------------- */
143 | .demo-header {
144 |   margin: 0;
145 |   padding: 0;
146 | }
147 | 
148 | .demo-header-nav {
149 |   display: -webkit-box;
150 |   display: -ms-flexbox;
151 |   display: flex;
152 |   -webkit-box-pack: justify;
153 |       -ms-flex-pack: justify;
154 |           justify-content: space-between;
155 |   background-color: #ff2850;
156 | }
157 | 
158 | .demo-header-nav__link {
159 |   padding: 12px;
160 |   color: #fff;
161 | }
162 | 
163 | .demo-header-nav__link:hover {
164 |   color: #fff;
165 |   background-color: #c10024;
166 | }
167 | 
168 | .demo-header__title {
169 |   margin: 24px;
170 |   padding: 0;
171 |   color: #fff;
172 |   font-size: 28px;
173 |   font-weight: 300;
174 |   text-align: center;
175 | }
176 | 
177 | @media all and (min-width: 480px) {
178 |   .demo-header__title {
179 |     margin: 36px;
180 |     font-size: 42px;
181 |   }
182 | }
183 | 
184 | /* -----------------------------------------------------------------------------
185 | 
186 |   Demo Content
187 | 
188 | ----------------------------------------------------------------------------- */
189 | .leader-text {
190 |   color: #b3b3b3;
191 |   font-size: 18px;
192 |   font-weight: 300;
193 | }
194 | 
195 | @media all and (min-width: 480px) {
196 |   .leader-text {
197 |     font-size: 22px;
198 |   }
199 | }
200 | 
201 | /* -----------------------------------------------------------------------------
202 | 
203 |   Demo Sub Nav
204 | 
205 | ----------------------------------------------------------------------------- */
206 | .demo-sub-nav {
207 |   margin: 0 0 24px 0;
208 |   padding: 0;
209 | }
210 | 
211 | .demo-sub-nav__items {
212 |   display: -webkit-box;
213 |   display: -ms-flexbox;
214 |   display: flex;
215 |   -ms-flex-flow: row wrap;
216 |       flex-flow: row wrap;
217 |   -webkit-box-pack: center;
218 |       -ms-flex-pack: center;
219 |           justify-content: center;
220 |   list-style: none;
221 |   margin: 0;
222 |   padding: 0;
223 | }
224 | 
225 | .demo-sub-nav__item {
226 |   margin: 0;
227 |   padding: 4px;
228 | }
229 | 
230 | .demo-sub-nav__link {
231 |   display: block;
232 |   margin: 0;
233 |   padding: 4px 24px;
234 |   border: solid 2px #ff2850;
235 | }
236 | 
237 | .demo-sub-nav__link:hover,
238 | .demo-sub-nav__item.active .demo-sub-nav__link {
239 |   color: #fff;
240 |   background-color: #ff2850;
241 | }
242 | 
243 | @media all and (min-width: 720px) {
244 |   .demo-sub-nav {
245 |     margin: 0 0 48px 0;
246 |   }
247 | }
248 | 
249 | /* -----------------------------------------------------------------------------
250 | 
251 |   Demo Footer
252 | 
253 | ----------------------------------------------------------------------------- */
254 | .demo-footer {
255 |   padding: 12px 0;
256 |   text-align: center;
257 | }
258 | 
259 | @media all and (min-width: 480px) {
260 |   .demo-footer {
261 |     padding: 24px 0;
262 |   }
263 | }
264 | 
265 | @media all and (min-width: 720px) {
266 |   .demo-footer {
267 |     padding: 48px 0;
268 |   }
269 | }
270 | 
271 | /* -----------------------------------------------------------------------------
272 | 
273 |   Carbon Ad
274 | 
275 | ----------------------------------------------------------------------------- */
276 | #carbonads {
277 |   position: fixed;
278 |   bottom: 12px;
279 |   left: 12px;
280 |   z-index: 1000;
281 |   padding: 24px 12px 12px 12px;
282 |   width: 154px;
283 |   background-color: #fff;
284 |   line-height: 1.1;
285 |   border: solid 1px #e7e7e7;
286 | }
287 | 
288 | .carbon-wrap {
289 |   display: block;
290 |   margin: 0 0 4px 0;
291 | }
292 | 
293 | .carbon-img {
294 |   display: block;
295 |   margin: 0 0 4px 0;
296 |   padding: 0;
297 |   width: 130px;
298 |   height: 100px;
299 | }
300 | 
301 | .carbon-text {
302 |   color: #818181;
303 |   font-size: 12px;
304 | }
305 | 
306 | .carbon-poweredby {
307 |   font-size: 10px;
308 |   font-style: italic;
309 | }
310 | 
311 | .carbonad__close {
312 |   display: block;
313 |   position: absolute;
314 |   top: 0;
315 |   left: 12px;
316 |   height: 24px;
317 |   font-size: 11px;
318 |   line-height: 24px;
319 | }
320 | 
321 | @media all and (max-width: 660px) {
322 |   #carbonads {
323 |     display: none;
324 |   }
325 | }
326 | 


--------------------------------------------------------------------------------
/css/common.min.css:
--------------------------------------------------------------------------------
1 | .carbon-poweredby,em,i{font-style:italic}@font-face{font-family:Oxygen;font-style:normal;font-weight:300;src:url(../fonts/oxygen/oxygen-v5-latin-300.eot);src:local("Oxygen Light"),local("Oxygen-Light"),url(../fonts/oxygen/oxygen-v5-latin-300.eot?#iefix) format("embedded-opentype"),url(../fonts/oxygen/oxygen-v5-latin-300.woff2) format("woff2"),url(../fonts/oxygen/oxygen-v5-latin-300.woff) format("woff"),url(../fonts/oxygen/oxygen-v5-latin-300.ttf) format("truetype"),url(../fonts/oxygen/oxygen-v5-latin-300.svg#Oxygen) format("svg")}@font-face{font-family:Oxygen;font-style:normal;font-weight:400;src:url(../fonts/oxygen/oxygen-v5-latin-regular.eot);src:local("Oxygen"),local("Oxygen-Regular"),url(../fonts/oxygen/oxygen-v5-latin-regular.eot?#iefix) format("embedded-opentype"),url(../fonts/oxygen/oxygen-v5-latin-regular.woff2) format("woff2"),url(../fonts/oxygen/oxygen-v5-latin-regular.woff) format("woff"),url(../fonts/oxygen/oxygen-v5-latin-regular.ttf) format("truetype"),url(../fonts/oxygen/oxygen-v5-latin-regular.svg#Oxygen) format("svg")}@font-face{font-family:Oxygen;font-style:normal;font-weight:700;src:url(../fonts/oxygen/oxygen-v5-latin-700.eot);src:local("Oxygen Bold"),local("Oxygen-Bold"),url(../fonts/oxygen/oxygen-v5-latin-700.eot?#iefix) format("embedded-opentype"),url(../fonts/oxygen/oxygen-v5-latin-700.woff2) format("woff2"),url(../fonts/oxygen/oxygen-v5-latin-700.woff) format("woff"),url(../fonts/oxygen/oxygen-v5-latin-700.ttf) format("truetype"),url(../fonts/oxygen/oxygen-v5-latin-700.svg#Oxygen) format("svg")}*,::after,::before{box-sizing:inherit}html{box-sizing:border-box}body,html{margin:0;padding:0;height:100%}body{color:#6d6d6d;background-color:#272727;font-family:Oxygen,Helvetica,sans-serif;font-size:14px;line-height:1.8}h1,h2,h3,h4,h5,h6{color:#3b3b3b;font-weight:700;line-height:1.2}a{color:#ff2850;text-decoration:none}a:hover{color:#c10024}b,strong{font-weight:700}img{max-width:100%;height:auto}.container{margin:0 auto;padding:0 24px;max-width:960px}@media all and (min-width:480px){.container{padding:0 24px}}@media all and (min-width:720px){.container{padding:0 48px}}.demo-header{margin:0;padding:0}.demo-header-nav{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;background-color:#ff2850}.demo-header-nav__link{padding:12px;color:#fff}.demo-header-nav__link:hover{color:#fff;background-color:#c10024}.demo-header__title{margin:24px;padding:0;color:#fff;font-size:28px;font-weight:300;text-align:center}@media all and (min-width:480px){.demo-header__title{margin:36px;font-size:42px}}.leader-text{color:#b3b3b3;font-size:18px;font-weight:300}.demo-sub-nav{margin:0 0 24px;padding:0}.demo-sub-nav__items{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;list-style:none;margin:0;padding:0}.demo-sub-nav__item{margin:0;padding:4px}.demo-sub-nav__link{display:block;margin:0;padding:4px 24px;border:2px solid #ff2850}.demo-sub-nav__item.active .demo-sub-nav__link,.demo-sub-nav__link:hover{color:#fff;background-color:#ff2850}@media all and (min-width:720px){.demo-sub-nav{margin:0 0 48px}}.carbon-img,.carbon-wrap{margin:0 0 4px;display:block}.demo-footer{padding:12px 0;text-align:center}@media all and (min-width:480px){.leader-text{font-size:22px}.demo-footer{padding:24px 0}}@media all and (min-width:720px){.demo-footer{padding:48px 0}}#carbonads{position:fixed;bottom:12px;left:12px;z-index:1000;padding:24px 12px 12px;width:154px;background-color:#fff;line-height:1.1;border:1px solid #e7e7e7}.carbon-img{padding:0;width:130px;height:100px}.carbon-text{color:#818181;font-size:12px}.carbon-poweredby{font-size:10px}.carbonad__close{display:block;position:absolute;top:0;left:12px;height:24px;font-size:11px;line-height:24px}@media all and (max-width:660px){#carbonads{display:none}}


--------------------------------------------------------------------------------
/css/font-awesome.css:
--------------------------------------------------------------------------------
   1 | /*!
   2 |  *  Font Awesome 4.3.0 by @davegandy - http://fontawesome.io - @fontawesome
   3 |  *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
   4 |  */
   5 | /* FONT PATH
   6 |  * -------------------------- */
   7 | @font-face {
   8 |   font-family: 'FontAwesome';
   9 |   src: url('../fonts/font-awesome/fontawesome-webfont.eot?v=4.3.0');
  10 |   src: url('../fonts/font-awesome/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('../fonts/font-awesome/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('../fonts/font-awesome/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('../fonts/font-awesome/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('../fonts/font-awesome/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
  11 |   font-weight: normal;
  12 |   font-style: normal;
  13 | }
  14 | .fa {
  15 |   display: inline-block;
  16 |   font: normal normal normal 14px/1 FontAwesome;
  17 |   font-size: inherit;
  18 |   text-rendering: auto;
  19 |   -webkit-font-smoothing: antialiased;
  20 |   -moz-osx-font-smoothing: grayscale;
  21 |   -webkit-transform: translate(0, 0);
  22 |       -ms-transform: translate(0, 0);
  23 |           transform: translate(0, 0);
  24 | }
  25 | /* makes the font 33% larger relative to the icon container */
  26 | .fa-lg {
  27 |   font-size: 1.33333333em;
  28 |   line-height: 0.75em;
  29 |   vertical-align: -15%;
  30 | }
  31 | .fa-2x {
  32 |   font-size: 2em;
  33 | }
  34 | .fa-3x {
  35 |   font-size: 3em;
  36 | }
  37 | .fa-4x {
  38 |   font-size: 4em;
  39 | }
  40 | .fa-5x {
  41 |   font-size: 5em;
  42 | }
  43 | .fa-fw {
  44 |   width: 1.28571429em;
  45 |   text-align: center;
  46 | }
  47 | .fa-ul {
  48 |   padding-left: 0;
  49 |   margin-left: 2.14285714em;
  50 |   list-style-type: none;
  51 | }
  52 | .fa-ul > li {
  53 |   position: relative;
  54 | }
  55 | .fa-li {
  56 |   position: absolute;
  57 |   left: -2.14285714em;
  58 |   width: 2.14285714em;
  59 |   top: 0.14285714em;
  60 |   text-align: center;
  61 | }
  62 | .fa-li.fa-lg {
  63 |   left: -1.85714286em;
  64 | }
  65 | .fa-border {
  66 |   padding: .2em .25em .15em;
  67 |   border: solid 0.08em #eeeeee;
  68 |   border-radius: .1em;
  69 | }
  70 | .pull-right {
  71 |   float: right;
  72 | }
  73 | .pull-left {
  74 |   float: left;
  75 | }
  76 | .fa.pull-left {
  77 |   margin-right: .3em;
  78 | }
  79 | .fa.pull-right {
  80 |   margin-left: .3em;
  81 | }
  82 | .fa-spin {
  83 |   -webkit-animation: fa-spin 2s infinite linear;
  84 |   animation: fa-spin 2s infinite linear;
  85 | }
  86 | .fa-pulse {
  87 |   -webkit-animation: fa-spin 1s infinite steps(8);
  88 |   animation: fa-spin 1s infinite steps(8);
  89 | }
  90 | @-webkit-keyframes fa-spin {
  91 |   0% {
  92 |     -webkit-transform: rotate(0deg);
  93 |     transform: rotate(0deg);
  94 |   }
  95 |   100% {
  96 |     -webkit-transform: rotate(359deg);
  97 |     transform: rotate(359deg);
  98 |   }
  99 | }
 100 | @keyframes fa-spin {
 101 |   0% {
 102 |     -webkit-transform: rotate(0deg);
 103 |     transform: rotate(0deg);
 104 |   }
 105 |   100% {
 106 |     -webkit-transform: rotate(359deg);
 107 |     transform: rotate(359deg);
 108 |   }
 109 | }
 110 | .fa-rotate-90 {
 111 |   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
 112 |   -webkit-transform: rotate(90deg);
 113 |   -ms-transform: rotate(90deg);
 114 |   transform: rotate(90deg);
 115 | }
 116 | .fa-rotate-180 {
 117 |   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
 118 |   -webkit-transform: rotate(180deg);
 119 |   -ms-transform: rotate(180deg);
 120 |   transform: rotate(180deg);
 121 | }
 122 | .fa-rotate-270 {
 123 |   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
 124 |   -webkit-transform: rotate(270deg);
 125 |   -ms-transform: rotate(270deg);
 126 |   transform: rotate(270deg);
 127 | }
 128 | .fa-flip-horizontal {
 129 |   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
 130 |   -webkit-transform: scale(-1, 1);
 131 |   -ms-transform: scale(-1, 1);
 132 |   transform: scale(-1, 1);
 133 | }
 134 | .fa-flip-vertical {
 135 |   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
 136 |   -webkit-transform: scale(1, -1);
 137 |   -ms-transform: scale(1, -1);
 138 |   transform: scale(1, -1);
 139 | }
 140 | :root .fa-rotate-90,
 141 | :root .fa-rotate-180,
 142 | :root .fa-rotate-270,
 143 | :root .fa-flip-horizontal,
 144 | :root .fa-flip-vertical {
 145 |   -webkit-filter: none;
 146 |           filter: none;
 147 | }
 148 | .fa-stack {
 149 |   position: relative;
 150 |   display: inline-block;
 151 |   width: 2em;
 152 |   height: 2em;
 153 |   line-height: 2em;
 154 |   vertical-align: middle;
 155 | }
 156 | .fa-stack-1x,
 157 | .fa-stack-2x {
 158 |   position: absolute;
 159 |   left: 0;
 160 |   width: 100%;
 161 |   text-align: center;
 162 | }
 163 | .fa-stack-1x {
 164 |   line-height: inherit;
 165 | }
 166 | .fa-stack-2x {
 167 |   font-size: 2em;
 168 | }
 169 | .fa-inverse {
 170 |   color: #ffffff;
 171 | }
 172 | /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
 173 |    readers do not read off random characters that represent icons */
 174 | .fa-glass:before {
 175 |   content: "\f000";
 176 | }
 177 | .fa-music:before {
 178 |   content: "\f001";
 179 | }
 180 | .fa-search:before {
 181 |   content: "\f002";
 182 | }
 183 | .fa-envelope-o:before {
 184 |   content: "\f003";
 185 | }
 186 | .fa-heart:before {
 187 |   content: "\f004";
 188 | }
 189 | .fa-star:before {
 190 |   content: "\f005";
 191 | }
 192 | .fa-star-o:before {
 193 |   content: "\f006";
 194 | }
 195 | .fa-user:before {
 196 |   content: "\f007";
 197 | }
 198 | .fa-film:before {
 199 |   content: "\f008";
 200 | }
 201 | .fa-th-large:before {
 202 |   content: "\f009";
 203 | }
 204 | .fa-th:before {
 205 |   content: "\f00a";
 206 | }
 207 | .fa-th-list:before {
 208 |   content: "\f00b";
 209 | }
 210 | .fa-check:before {
 211 |   content: "\f00c";
 212 | }
 213 | .fa-remove:before,
 214 | .fa-close:before,
 215 | .fa-times:before {
 216 |   content: "\f00d";
 217 | }
 218 | .fa-search-plus:before {
 219 |   content: "\f00e";
 220 | }
 221 | .fa-search-minus:before {
 222 |   content: "\f010";
 223 | }
 224 | .fa-power-off:before {
 225 |   content: "\f011";
 226 | }
 227 | .fa-signal:before {
 228 |   content: "\f012";
 229 | }
 230 | .fa-gear:before,
 231 | .fa-cog:before {
 232 |   content: "\f013";
 233 | }
 234 | .fa-trash-o:before {
 235 |   content: "\f014";
 236 | }
 237 | .fa-home:before {
 238 |   content: "\f015";
 239 | }
 240 | .fa-file-o:before {
 241 |   content: "\f016";
 242 | }
 243 | .fa-clock-o:before {
 244 |   content: "\f017";
 245 | }
 246 | .fa-road:before {
 247 |   content: "\f018";
 248 | }
 249 | .fa-download:before {
 250 |   content: "\f019";
 251 | }
 252 | .fa-arrow-circle-o-down:before {
 253 |   content: "\f01a";
 254 | }
 255 | .fa-arrow-circle-o-up:before {
 256 |   content: "\f01b";
 257 | }
 258 | .fa-inbox:before {
 259 |   content: "\f01c";
 260 | }
 261 | .fa-play-circle-o:before {
 262 |   content: "\f01d";
 263 | }
 264 | .fa-rotate-right:before,
 265 | .fa-repeat:before {
 266 |   content: "\f01e";
 267 | }
 268 | .fa-refresh:before {
 269 |   content: "\f021";
 270 | }
 271 | .fa-list-alt:before {
 272 |   content: "\f022";
 273 | }
 274 | .fa-lock:before {
 275 |   content: "\f023";
 276 | }
 277 | .fa-flag:before {
 278 |   content: "\f024";
 279 | }
 280 | .fa-headphones:before {
 281 |   content: "\f025";
 282 | }
 283 | .fa-volume-off:before {
 284 |   content: "\f026";
 285 | }
 286 | .fa-volume-down:before {
 287 |   content: "\f027";
 288 | }
 289 | .fa-volume-up:before {
 290 |   content: "\f028";
 291 | }
 292 | .fa-qrcode:before {
 293 |   content: "\f029";
 294 | }
 295 | .fa-barcode:before {
 296 |   content: "\f02a";
 297 | }
 298 | .fa-tag:before {
 299 |   content: "\f02b";
 300 | }
 301 | .fa-tags:before {
 302 |   content: "\f02c";
 303 | }
 304 | .fa-book:before {
 305 |   content: "\f02d";
 306 | }
 307 | .fa-bookmark:before {
 308 |   content: "\f02e";
 309 | }
 310 | .fa-print:before {
 311 |   content: "\f02f";
 312 | }
 313 | .fa-camera:before {
 314 |   content: "\f030";
 315 | }
 316 | .fa-font:before {
 317 |   content: "\f031";
 318 | }
 319 | .fa-bold:before {
 320 |   content: "\f032";
 321 | }
 322 | .fa-italic:before {
 323 |   content: "\f033";
 324 | }
 325 | .fa-text-height:before {
 326 |   content: "\f034";
 327 | }
 328 | .fa-text-width:before {
 329 |   content: "\f035";
 330 | }
 331 | .fa-align-left:before {
 332 |   content: "\f036";
 333 | }
 334 | .fa-align-center:before {
 335 |   content: "\f037";
 336 | }
 337 | .fa-align-right:before {
 338 |   content: "\f038";
 339 | }
 340 | .fa-align-justify:before {
 341 |   content: "\f039";
 342 | }
 343 | .fa-list:before {
 344 |   content: "\f03a";
 345 | }
 346 | .fa-dedent:before,
 347 | .fa-outdent:before {
 348 |   content: "\f03b";
 349 | }
 350 | .fa-indent:before {
 351 |   content: "\f03c";
 352 | }
 353 | .fa-video-camera:before {
 354 |   content: "\f03d";
 355 | }
 356 | .fa-photo:before,
 357 | .fa-image:before,
 358 | .fa-picture-o:before {
 359 |   content: "\f03e";
 360 | }
 361 | .fa-pencil:before {
 362 |   content: "\f040";
 363 | }
 364 | .fa-map-marker:before {
 365 |   content: "\f041";
 366 | }
 367 | .fa-adjust:before {
 368 |   content: "\f042";
 369 | }
 370 | .fa-tint:before {
 371 |   content: "\f043";
 372 | }
 373 | .fa-edit:before,
 374 | .fa-pencil-square-o:before {
 375 |   content: "\f044";
 376 | }
 377 | .fa-share-square-o:before {
 378 |   content: "\f045";
 379 | }
 380 | .fa-check-square-o:before {
 381 |   content: "\f046";
 382 | }
 383 | .fa-arrows:before {
 384 |   content: "\f047";
 385 | }
 386 | .fa-step-backward:before {
 387 |   content: "\f048";
 388 | }
 389 | .fa-fast-backward:before {
 390 |   content: "\f049";
 391 | }
 392 | .fa-backward:before {
 393 |   content: "\f04a";
 394 | }
 395 | .fa-play:before {
 396 |   content: "\f04b";
 397 | }
 398 | .fa-pause:before {
 399 |   content: "\f04c";
 400 | }
 401 | .fa-stop:before {
 402 |   content: "\f04d";
 403 | }
 404 | .fa-forward:before {
 405 |   content: "\f04e";
 406 | }
 407 | .fa-fast-forward:before {
 408 |   content: "\f050";
 409 | }
 410 | .fa-step-forward:before {
 411 |   content: "\f051";
 412 | }
 413 | .fa-eject:before {
 414 |   content: "\f052";
 415 | }
 416 | .fa-chevron-left:before {
 417 |   content: "\f053";
 418 | }
 419 | .fa-chevron-right:before {
 420 |   content: "\f054";
 421 | }
 422 | .fa-plus-circle:before {
 423 |   content: "\f055";
 424 | }
 425 | .fa-minus-circle:before {
 426 |   content: "\f056";
 427 | }
 428 | .fa-times-circle:before {
 429 |   content: "\f057";
 430 | }
 431 | .fa-check-circle:before {
 432 |   content: "\f058";
 433 | }
 434 | .fa-question-circle:before {
 435 |   content: "\f059";
 436 | }
 437 | .fa-info-circle:before {
 438 |   content: "\f05a";
 439 | }
 440 | .fa-crosshairs:before {
 441 |   content: "\f05b";
 442 | }
 443 | .fa-times-circle-o:before {
 444 |   content: "\f05c";
 445 | }
 446 | .fa-check-circle-o:before {
 447 |   content: "\f05d";
 448 | }
 449 | .fa-ban:before {
 450 |   content: "\f05e";
 451 | }
 452 | .fa-arrow-left:before {
 453 |   content: "\f060";
 454 | }
 455 | .fa-arrow-right:before {
 456 |   content: "\f061";
 457 | }
 458 | .fa-arrow-up:before {
 459 |   content: "\f062";
 460 | }
 461 | .fa-arrow-down:before {
 462 |   content: "\f063";
 463 | }
 464 | .fa-mail-forward:before,
 465 | .fa-share:before {
 466 |   content: "\f064";
 467 | }
 468 | .fa-expand:before {
 469 |   content: "\f065";
 470 | }
 471 | .fa-compress:before {
 472 |   content: "\f066";
 473 | }
 474 | .fa-plus:before {
 475 |   content: "\f067";
 476 | }
 477 | .fa-minus:before {
 478 |   content: "\f068";
 479 | }
 480 | .fa-asterisk:before {
 481 |   content: "\f069";
 482 | }
 483 | .fa-exclamation-circle:before {
 484 |   content: "\f06a";
 485 | }
 486 | .fa-gift:before {
 487 |   content: "\f06b";
 488 | }
 489 | .fa-leaf:before {
 490 |   content: "\f06c";
 491 | }
 492 | .fa-fire:before {
 493 |   content: "\f06d";
 494 | }
 495 | .fa-eye:before {
 496 |   content: "\f06e";
 497 | }
 498 | .fa-eye-slash:before {
 499 |   content: "\f070";
 500 | }
 501 | .fa-warning:before,
 502 | .fa-exclamation-triangle:before {
 503 |   content: "\f071";
 504 | }
 505 | .fa-plane:before {
 506 |   content: "\f072";
 507 | }
 508 | .fa-calendar:before {
 509 |   content: "\f073";
 510 | }
 511 | .fa-random:before {
 512 |   content: "\f074";
 513 | }
 514 | .fa-comment:before {
 515 |   content: "\f075";
 516 | }
 517 | .fa-magnet:before {
 518 |   content: "\f076";
 519 | }
 520 | .fa-chevron-up:before {
 521 |   content: "\f077";
 522 | }
 523 | .fa-chevron-down:before {
 524 |   content: "\f078";
 525 | }
 526 | .fa-retweet:before {
 527 |   content: "\f079";
 528 | }
 529 | .fa-shopping-cart:before {
 530 |   content: "\f07a";
 531 | }
 532 | .fa-folder:before {
 533 |   content: "\f07b";
 534 | }
 535 | .fa-folder-open:before {
 536 |   content: "\f07c";
 537 | }
 538 | .fa-arrows-v:before {
 539 |   content: "\f07d";
 540 | }
 541 | .fa-arrows-h:before {
 542 |   content: "\f07e";
 543 | }
 544 | .fa-bar-chart-o:before,
 545 | .fa-bar-chart:before {
 546 |   content: "\f080";
 547 | }
 548 | .fa-twitter-square:before {
 549 |   content: "\f081";
 550 | }
 551 | .fa-facebook-square:before {
 552 |   content: "\f082";
 553 | }
 554 | .fa-camera-retro:before {
 555 |   content: "\f083";
 556 | }
 557 | .fa-key:before {
 558 |   content: "\f084";
 559 | }
 560 | .fa-gears:before,
 561 | .fa-cogs:before {
 562 |   content: "\f085";
 563 | }
 564 | .fa-comments:before {
 565 |   content: "\f086";
 566 | }
 567 | .fa-thumbs-o-up:before {
 568 |   content: "\f087";
 569 | }
 570 | .fa-thumbs-o-down:before {
 571 |   content: "\f088";
 572 | }
 573 | .fa-star-half:before {
 574 |   content: "\f089";
 575 | }
 576 | .fa-heart-o:before {
 577 |   content: "\f08a";
 578 | }
 579 | .fa-sign-out:before {
 580 |   content: "\f08b";
 581 | }
 582 | .fa-linkedin-square:before {
 583 |   content: "\f08c";
 584 | }
 585 | .fa-thumb-tack:before {
 586 |   content: "\f08d";
 587 | }
 588 | .fa-external-link:before {
 589 |   content: "\f08e";
 590 | }
 591 | .fa-sign-in:before {
 592 |   content: "\f090";
 593 | }
 594 | .fa-trophy:before {
 595 |   content: "\f091";
 596 | }
 597 | .fa-github-square:before {
 598 |   content: "\f092";
 599 | }
 600 | .fa-upload:before {
 601 |   content: "\f093";
 602 | }
 603 | .fa-lemon-o:before {
 604 |   content: "\f094";
 605 | }
 606 | .fa-phone:before {
 607 |   content: "\f095";
 608 | }
 609 | .fa-square-o:before {
 610 |   content: "\f096";
 611 | }
 612 | .fa-bookmark-o:before {
 613 |   content: "\f097";
 614 | }
 615 | .fa-phone-square:before {
 616 |   content: "\f098";
 617 | }
 618 | .fa-twitter:before {
 619 |   content: "\f099";
 620 | }
 621 | .fa-facebook-f:before,
 622 | .fa-facebook:before {
 623 |   content: "\f09a";
 624 | }
 625 | .fa-github:before {
 626 |   content: "\f09b";
 627 | }
 628 | .fa-unlock:before {
 629 |   content: "\f09c";
 630 | }
 631 | .fa-credit-card:before {
 632 |   content: "\f09d";
 633 | }
 634 | .fa-rss:before {
 635 |   content: "\f09e";
 636 | }
 637 | .fa-hdd-o:before {
 638 |   content: "\f0a0";
 639 | }
 640 | .fa-bullhorn:before {
 641 |   content: "\f0a1";
 642 | }
 643 | .fa-bell:before {
 644 |   content: "\f0f3";
 645 | }
 646 | .fa-certificate:before {
 647 |   content: "\f0a3";
 648 | }
 649 | .fa-hand-o-right:before {
 650 |   content: "\f0a4";
 651 | }
 652 | .fa-hand-o-left:before {
 653 |   content: "\f0a5";
 654 | }
 655 | .fa-hand-o-up:before {
 656 |   content: "\f0a6";
 657 | }
 658 | .fa-hand-o-down:before {
 659 |   content: "\f0a7";
 660 | }
 661 | .fa-arrow-circle-left:before {
 662 |   content: "\f0a8";
 663 | }
 664 | .fa-arrow-circle-right:before {
 665 |   content: "\f0a9";
 666 | }
 667 | .fa-arrow-circle-up:before {
 668 |   content: "\f0aa";
 669 | }
 670 | .fa-arrow-circle-down:before {
 671 |   content: "\f0ab";
 672 | }
 673 | .fa-globe:before {
 674 |   content: "\f0ac";
 675 | }
 676 | .fa-wrench:before {
 677 |   content: "\f0ad";
 678 | }
 679 | .fa-tasks:before {
 680 |   content: "\f0ae";
 681 | }
 682 | .fa-filter:before {
 683 |   content: "\f0b0";
 684 | }
 685 | .fa-briefcase:before {
 686 |   content: "\f0b1";
 687 | }
 688 | .fa-arrows-alt:before {
 689 |   content: "\f0b2";
 690 | }
 691 | .fa-group:before,
 692 | .fa-users:before {
 693 |   content: "\f0c0";
 694 | }
 695 | .fa-chain:before,
 696 | .fa-link:before {
 697 |   content: "\f0c1";
 698 | }
 699 | .fa-cloud:before {
 700 |   content: "\f0c2";
 701 | }
 702 | .fa-flask:before {
 703 |   content: "\f0c3";
 704 | }
 705 | .fa-cut:before,
 706 | .fa-scissors:before {
 707 |   content: "\f0c4";
 708 | }
 709 | .fa-copy:before,
 710 | .fa-files-o:before {
 711 |   content: "\f0c5";
 712 | }
 713 | .fa-paperclip:before {
 714 |   content: "\f0c6";
 715 | }
 716 | .fa-save:before,
 717 | .fa-floppy-o:before {
 718 |   content: "\f0c7";
 719 | }
 720 | .fa-square:before {
 721 |   content: "\f0c8";
 722 | }
 723 | .fa-navicon:before,
 724 | .fa-reorder:before,
 725 | .fa-bars:before {
 726 |   content: "\f0c9";
 727 | }
 728 | .fa-list-ul:before {
 729 |   content: "\f0ca";
 730 | }
 731 | .fa-list-ol:before {
 732 |   content: "\f0cb";
 733 | }
 734 | .fa-strikethrough:before {
 735 |   content: "\f0cc";
 736 | }
 737 | .fa-underline:before {
 738 |   content: "\f0cd";
 739 | }
 740 | .fa-table:before {
 741 |   content: "\f0ce";
 742 | }
 743 | .fa-magic:before {
 744 |   content: "\f0d0";
 745 | }
 746 | .fa-truck:before {
 747 |   content: "\f0d1";
 748 | }
 749 | .fa-pinterest:before {
 750 |   content: "\f0d2";
 751 | }
 752 | .fa-pinterest-square:before {
 753 |   content: "\f0d3";
 754 | }
 755 | .fa-google-plus-square:before {
 756 |   content: "\f0d4";
 757 | }
 758 | .fa-google-plus:before {
 759 |   content: "\f0d5";
 760 | }
 761 | .fa-money:before {
 762 |   content: "\f0d6";
 763 | }
 764 | .fa-caret-down:before {
 765 |   content: "\f0d7";
 766 | }
 767 | .fa-caret-up:before {
 768 |   content: "\f0d8";
 769 | }
 770 | .fa-caret-left:before {
 771 |   content: "\f0d9";
 772 | }
 773 | .fa-caret-right:before {
 774 |   content: "\f0da";
 775 | }
 776 | .fa-columns:before {
 777 |   content: "\f0db";
 778 | }
 779 | .fa-unsorted:before,
 780 | .fa-sort:before {
 781 |   content: "\f0dc";
 782 | }
 783 | .fa-sort-down:before,
 784 | .fa-sort-desc:before {
 785 |   content: "\f0dd";
 786 | }
 787 | .fa-sort-up:before,
 788 | .fa-sort-asc:before {
 789 |   content: "\f0de";
 790 | }
 791 | .fa-envelope:before {
 792 |   content: "\f0e0";
 793 | }
 794 | .fa-linkedin:before {
 795 |   content: "\f0e1";
 796 | }
 797 | .fa-rotate-left:before,
 798 | .fa-undo:before {
 799 |   content: "\f0e2";
 800 | }
 801 | .fa-legal:before,
 802 | .fa-gavel:before {
 803 |   content: "\f0e3";
 804 | }
 805 | .fa-dashboard:before,
 806 | .fa-tachometer:before {
 807 |   content: "\f0e4";
 808 | }
 809 | .fa-comment-o:before {
 810 |   content: "\f0e5";
 811 | }
 812 | .fa-comments-o:before {
 813 |   content: "\f0e6";
 814 | }
 815 | .fa-flash:before,
 816 | .fa-bolt:before {
 817 |   content: "\f0e7";
 818 | }
 819 | .fa-sitemap:before {
 820 |   content: "\f0e8";
 821 | }
 822 | .fa-umbrella:before {
 823 |   content: "\f0e9";
 824 | }
 825 | .fa-paste:before,
 826 | .fa-clipboard:before {
 827 |   content: "\f0ea";
 828 | }
 829 | .fa-lightbulb-o:before {
 830 |   content: "\f0eb";
 831 | }
 832 | .fa-exchange:before {
 833 |   content: "\f0ec";
 834 | }
 835 | .fa-cloud-download:before {
 836 |   content: "\f0ed";
 837 | }
 838 | .fa-cloud-upload:before {
 839 |   content: "\f0ee";
 840 | }
 841 | .fa-user-md:before {
 842 |   content: "\f0f0";
 843 | }
 844 | .fa-stethoscope:before {
 845 |   content: "\f0f1";
 846 | }
 847 | .fa-suitcase:before {
 848 |   content: "\f0f2";
 849 | }
 850 | .fa-bell-o:before {
 851 |   content: "\f0a2";
 852 | }
 853 | .fa-coffee:before {
 854 |   content: "\f0f4";
 855 | }
 856 | .fa-cutlery:before {
 857 |   content: "\f0f5";
 858 | }
 859 | .fa-file-text-o:before {
 860 |   content: "\f0f6";
 861 | }
 862 | .fa-building-o:before {
 863 |   content: "\f0f7";
 864 | }
 865 | .fa-hospital-o:before {
 866 |   content: "\f0f8";
 867 | }
 868 | .fa-ambulance:before {
 869 |   content: "\f0f9";
 870 | }
 871 | .fa-medkit:before {
 872 |   content: "\f0fa";
 873 | }
 874 | .fa-fighter-jet:before {
 875 |   content: "\f0fb";
 876 | }
 877 | .fa-beer:before {
 878 |   content: "\f0fc";
 879 | }
 880 | .fa-h-square:before {
 881 |   content: "\f0fd";
 882 | }
 883 | .fa-plus-square:before {
 884 |   content: "\f0fe";
 885 | }
 886 | .fa-angle-double-left:before {
 887 |   content: "\f100";
 888 | }
 889 | .fa-angle-double-right:before {
 890 |   content: "\f101";
 891 | }
 892 | .fa-angle-double-up:before {
 893 |   content: "\f102";
 894 | }
 895 | .fa-angle-double-down:before {
 896 |   content: "\f103";
 897 | }
 898 | .fa-angle-left:before {
 899 |   content: "\f104";
 900 | }
 901 | .fa-angle-right:before {
 902 |   content: "\f105";
 903 | }
 904 | .fa-angle-up:before {
 905 |   content: "\f106";
 906 | }
 907 | .fa-angle-down:before {
 908 |   content: "\f107";
 909 | }
 910 | .fa-desktop:before {
 911 |   content: "\f108";
 912 | }
 913 | .fa-laptop:before {
 914 |   content: "\f109";
 915 | }
 916 | .fa-tablet:before {
 917 |   content: "\f10a";
 918 | }
 919 | .fa-mobile-phone:before,
 920 | .fa-mobile:before {
 921 |   content: "\f10b";
 922 | }
 923 | .fa-circle-o:before {
 924 |   content: "\f10c";
 925 | }
 926 | .fa-quote-left:before {
 927 |   content: "\f10d";
 928 | }
 929 | .fa-quote-right:before {
 930 |   content: "\f10e";
 931 | }
 932 | .fa-spinner:before {
 933 |   content: "\f110";
 934 | }
 935 | .fa-circle:before {
 936 |   content: "\f111";
 937 | }
 938 | .fa-mail-reply:before,
 939 | .fa-reply:before {
 940 |   content: "\f112";
 941 | }
 942 | .fa-github-alt:before {
 943 |   content: "\f113";
 944 | }
 945 | .fa-folder-o:before {
 946 |   content: "\f114";
 947 | }
 948 | .fa-folder-open-o:before {
 949 |   content: "\f115";
 950 | }
 951 | .fa-smile-o:before {
 952 |   content: "\f118";
 953 | }
 954 | .fa-frown-o:before {
 955 |   content: "\f119";
 956 | }
 957 | .fa-meh-o:before {
 958 |   content: "\f11a";
 959 | }
 960 | .fa-gamepad:before {
 961 |   content: "\f11b";
 962 | }
 963 | .fa-keyboard-o:before {
 964 |   content: "\f11c";
 965 | }
 966 | .fa-flag-o:before {
 967 |   content: "\f11d";
 968 | }
 969 | .fa-flag-checkered:before {
 970 |   content: "\f11e";
 971 | }
 972 | .fa-terminal:before {
 973 |   content: "\f120";
 974 | }
 975 | .fa-code:before {
 976 |   content: "\f121";
 977 | }
 978 | .fa-mail-reply-all:before,
 979 | .fa-reply-all:before {
 980 |   content: "\f122";
 981 | }
 982 | .fa-star-half-empty:before,
 983 | .fa-star-half-full:before,
 984 | .fa-star-half-o:before {
 985 |   content: "\f123";
 986 | }
 987 | .fa-location-arrow:before {
 988 |   content: "\f124";
 989 | }
 990 | .fa-crop:before {
 991 |   content: "\f125";
 992 | }
 993 | .fa-code-fork:before {
 994 |   content: "\f126";
 995 | }
 996 | .fa-unlink:before,
 997 | .fa-chain-broken:before {
 998 |   content: "\f127";
 999 | }
1000 | .fa-question:before {
1001 |   content: "\f128";
1002 | }
1003 | .fa-info:before {
1004 |   content: "\f129";
1005 | }
1006 | .fa-exclamation:before {
1007 |   content: "\f12a";
1008 | }
1009 | .fa-superscript:before {
1010 |   content: "\f12b";
1011 | }
1012 | .fa-subscript:before {
1013 |   content: "\f12c";
1014 | }
1015 | .fa-eraser:before {
1016 |   content: "\f12d";
1017 | }
1018 | .fa-puzzle-piece:before {
1019 |   content: "\f12e";
1020 | }
1021 | .fa-microphone:before {
1022 |   content: "\f130";
1023 | }
1024 | .fa-microphone-slash:before {
1025 |   content: "\f131";
1026 | }
1027 | .fa-shield:before {
1028 |   content: "\f132";
1029 | }
1030 | .fa-calendar-o:before {
1031 |   content: "\f133";
1032 | }
1033 | .fa-fire-extinguisher:before {
1034 |   content: "\f134";
1035 | }
1036 | .fa-rocket:before {
1037 |   content: "\f135";
1038 | }
1039 | .fa-maxcdn:before {
1040 |   content: "\f136";
1041 | }
1042 | .fa-chevron-circle-left:before {
1043 |   content: "\f137";
1044 | }
1045 | .fa-chevron-circle-right:before {
1046 |   content: "\f138";
1047 | }
1048 | .fa-chevron-circle-up:before {
1049 |   content: "\f139";
1050 | }
1051 | .fa-chevron-circle-down:before {
1052 |   content: "\f13a";
1053 | }
1054 | .fa-html5:before {
1055 |   content: "\f13b";
1056 | }
1057 | .fa-css3:before {
1058 |   content: "\f13c";
1059 | }
1060 | .fa-anchor:before {
1061 |   content: "\f13d";
1062 | }
1063 | .fa-unlock-alt:before {
1064 |   content: "\f13e";
1065 | }
1066 | .fa-bullseye:before {
1067 |   content: "\f140";
1068 | }
1069 | .fa-ellipsis-h:before {
1070 |   content: "\f141";
1071 | }
1072 | .fa-ellipsis-v:before {
1073 |   content: "\f142";
1074 | }
1075 | .fa-rss-square:before {
1076 |   content: "\f143";
1077 | }
1078 | .fa-play-circle:before {
1079 |   content: "\f144";
1080 | }
1081 | .fa-ticket:before {
1082 |   content: "\f145";
1083 | }
1084 | .fa-minus-square:before {
1085 |   content: "\f146";
1086 | }
1087 | .fa-minus-square-o:before {
1088 |   content: "\f147";
1089 | }
1090 | .fa-level-up:before {
1091 |   content: "\f148";
1092 | }
1093 | .fa-level-down:before {
1094 |   content: "\f149";
1095 | }
1096 | .fa-check-square:before {
1097 |   content: "\f14a";
1098 | }
1099 | .fa-pencil-square:before {
1100 |   content: "\f14b";
1101 | }
1102 | .fa-external-link-square:before {
1103 |   content: "\f14c";
1104 | }
1105 | .fa-share-square:before {
1106 |   content: "\f14d";
1107 | }
1108 | .fa-compass:before {
1109 |   content: "\f14e";
1110 | }
1111 | .fa-toggle-down:before,
1112 | .fa-caret-square-o-down:before {
1113 |   content: "\f150";
1114 | }
1115 | .fa-toggle-up:before,
1116 | .fa-caret-square-o-up:before {
1117 |   content: "\f151";
1118 | }
1119 | .fa-toggle-right:before,
1120 | .fa-caret-square-o-right:before {
1121 |   content: "\f152";
1122 | }
1123 | .fa-euro:before,
1124 | .fa-eur:before {
1125 |   content: "\f153";
1126 | }
1127 | .fa-gbp:before {
1128 |   content: "\f154";
1129 | }
1130 | .fa-dollar:before,
1131 | .fa-usd:before {
1132 |   content: "\f155";
1133 | }
1134 | .fa-rupee:before,
1135 | .fa-inr:before {
1136 |   content: "\f156";
1137 | }
1138 | .fa-cny:before,
1139 | .fa-rmb:before,
1140 | .fa-yen:before,
1141 | .fa-jpy:before {
1142 |   content: "\f157";
1143 | }
1144 | .fa-ruble:before,
1145 | .fa-rouble:before,
1146 | .fa-rub:before {
1147 |   content: "\f158";
1148 | }
1149 | .fa-won:before,
1150 | .fa-krw:before {
1151 |   content: "\f159";
1152 | }
1153 | .fa-bitcoin:before,
1154 | .fa-btc:before {
1155 |   content: "\f15a";
1156 | }
1157 | .fa-file:before {
1158 |   content: "\f15b";
1159 | }
1160 | .fa-file-text:before {
1161 |   content: "\f15c";
1162 | }
1163 | .fa-sort-alpha-asc:before {
1164 |   content: "\f15d";
1165 | }
1166 | .fa-sort-alpha-desc:before {
1167 |   content: "\f15e";
1168 | }
1169 | .fa-sort-amount-asc:before {
1170 |   content: "\f160";
1171 | }
1172 | .fa-sort-amount-desc:before {
1173 |   content: "\f161";
1174 | }
1175 | .fa-sort-numeric-asc:before {
1176 |   content: "\f162";
1177 | }
1178 | .fa-sort-numeric-desc:before {
1179 |   content: "\f163";
1180 | }
1181 | .fa-thumbs-up:before {
1182 |   content: "\f164";
1183 | }
1184 | .fa-thumbs-down:before {
1185 |   content: "\f165";
1186 | }
1187 | .fa-youtube-square:before {
1188 |   content: "\f166";
1189 | }
1190 | .fa-youtube:before {
1191 |   content: "\f167";
1192 | }
1193 | .fa-xing:before {
1194 |   content: "\f168";
1195 | }
1196 | .fa-xing-square:before {
1197 |   content: "\f169";
1198 | }
1199 | .fa-youtube-play:before {
1200 |   content: "\f16a";
1201 | }
1202 | .fa-dropbox:before {
1203 |   content: "\f16b";
1204 | }
1205 | .fa-stack-overflow:before {
1206 |   content: "\f16c";
1207 | }
1208 | .fa-instagram:before {
1209 |   content: "\f16d";
1210 | }
1211 | .fa-flickr:before {
1212 |   content: "\f16e";
1213 | }
1214 | .fa-adn:before {
1215 |   content: "\f170";
1216 | }
1217 | .fa-bitbucket:before {
1218 |   content: "\f171";
1219 | }
1220 | .fa-bitbucket-square:before {
1221 |   content: "\f172";
1222 | }
1223 | .fa-tumblr:before {
1224 |   content: "\f173";
1225 | }
1226 | .fa-tumblr-square:before {
1227 |   content: "\f174";
1228 | }
1229 | .fa-long-arrow-down:before {
1230 |   content: "\f175";
1231 | }
1232 | .fa-long-arrow-up:before {
1233 |   content: "\f176";
1234 | }
1235 | .fa-long-arrow-left:before {
1236 |   content: "\f177";
1237 | }
1238 | .fa-long-arrow-right:before {
1239 |   content: "\f178";
1240 | }
1241 | .fa-apple:before {
1242 |   content: "\f179";
1243 | }
1244 | .fa-windows:before {
1245 |   content: "\f17a";
1246 | }
1247 | .fa-android:before {
1248 |   content: "\f17b";
1249 | }
1250 | .fa-linux:before {
1251 |   content: "\f17c";
1252 | }
1253 | .fa-dribbble:before {
1254 |   content: "\f17d";
1255 | }
1256 | .fa-skype:before {
1257 |   content: "\f17e";
1258 | }
1259 | .fa-foursquare:before {
1260 |   content: "\f180";
1261 | }
1262 | .fa-trello:before {
1263 |   content: "\f181";
1264 | }
1265 | .fa-female:before {
1266 |   content: "\f182";
1267 | }
1268 | .fa-male:before {
1269 |   content: "\f183";
1270 | }
1271 | .fa-gittip:before,
1272 | .fa-gratipay:before {
1273 |   content: "\f184";
1274 | }
1275 | .fa-sun-o:before {
1276 |   content: "\f185";
1277 | }
1278 | .fa-moon-o:before {
1279 |   content: "\f186";
1280 | }
1281 | .fa-archive:before {
1282 |   content: "\f187";
1283 | }
1284 | .fa-bug:before {
1285 |   content: "\f188";
1286 | }
1287 | .fa-vk:before {
1288 |   content: "\f189";
1289 | }
1290 | .fa-weibo:before {
1291 |   content: "\f18a";
1292 | }
1293 | .fa-renren:before {
1294 |   content: "\f18b";
1295 | }
1296 | .fa-pagelines:before {
1297 |   content: "\f18c";
1298 | }
1299 | .fa-stack-exchange:before {
1300 |   content: "\f18d";
1301 | }
1302 | .fa-arrow-circle-o-right:before {
1303 |   content: "\f18e";
1304 | }
1305 | .fa-arrow-circle-o-left:before {
1306 |   content: "\f190";
1307 | }
1308 | .fa-toggle-left:before,
1309 | .fa-caret-square-o-left:before {
1310 |   content: "\f191";
1311 | }
1312 | .fa-dot-circle-o:before {
1313 |   content: "\f192";
1314 | }
1315 | .fa-wheelchair:before {
1316 |   content: "\f193";
1317 | }
1318 | .fa-vimeo-square:before {
1319 |   content: "\f194";
1320 | }
1321 | .fa-turkish-lira:before,
1322 | .fa-try:before {
1323 |   content: "\f195";
1324 | }
1325 | .fa-plus-square-o:before {
1326 |   content: "\f196";
1327 | }
1328 | .fa-space-shuttle:before {
1329 |   content: "\f197";
1330 | }
1331 | .fa-slack:before {
1332 |   content: "\f198";
1333 | }
1334 | .fa-envelope-square:before {
1335 |   content: "\f199";
1336 | }
1337 | .fa-wordpress:before {
1338 |   content: "\f19a";
1339 | }
1340 | .fa-openid:before {
1341 |   content: "\f19b";
1342 | }
1343 | .fa-institution:before,
1344 | .fa-bank:before,
1345 | .fa-university:before {
1346 |   content: "\f19c";
1347 | }
1348 | .fa-mortar-board:before,
1349 | .fa-graduation-cap:before {
1350 |   content: "\f19d";
1351 | }
1352 | .fa-yahoo:before {
1353 |   content: "\f19e";
1354 | }
1355 | .fa-google:before {
1356 |   content: "\f1a0";
1357 | }
1358 | .fa-reddit:before {
1359 |   content: "\f1a1";
1360 | }
1361 | .fa-reddit-square:before {
1362 |   content: "\f1a2";
1363 | }
1364 | .fa-stumbleupon-circle:before {
1365 |   content: "\f1a3";
1366 | }
1367 | .fa-stumbleupon:before {
1368 |   content: "\f1a4";
1369 | }
1370 | .fa-delicious:before {
1371 |   content: "\f1a5";
1372 | }
1373 | .fa-digg:before {
1374 |   content: "\f1a6";
1375 | }
1376 | .fa-pied-piper:before {
1377 |   content: "\f1a7";
1378 | }
1379 | .fa-pied-piper-alt:before {
1380 |   content: "\f1a8";
1381 | }
1382 | .fa-drupal:before {
1383 |   content: "\f1a9";
1384 | }
1385 | .fa-joomla:before {
1386 |   content: "\f1aa";
1387 | }
1388 | .fa-language:before {
1389 |   content: "\f1ab";
1390 | }
1391 | .fa-fax:before {
1392 |   content: "\f1ac";
1393 | }
1394 | .fa-building:before {
1395 |   content: "\f1ad";
1396 | }
1397 | .fa-child:before {
1398 |   content: "\f1ae";
1399 | }
1400 | .fa-paw:before {
1401 |   content: "\f1b0";
1402 | }
1403 | .fa-spoon:before {
1404 |   content: "\f1b1";
1405 | }
1406 | .fa-cube:before {
1407 |   content: "\f1b2";
1408 | }
1409 | .fa-cubes:before {
1410 |   content: "\f1b3";
1411 | }
1412 | .fa-behance:before {
1413 |   content: "\f1b4";
1414 | }
1415 | .fa-behance-square:before {
1416 |   content: "\f1b5";
1417 | }
1418 | .fa-steam:before {
1419 |   content: "\f1b6";
1420 | }
1421 | .fa-steam-square:before {
1422 |   content: "\f1b7";
1423 | }
1424 | .fa-recycle:before {
1425 |   content: "\f1b8";
1426 | }
1427 | .fa-automobile:before,
1428 | .fa-car:before {
1429 |   content: "\f1b9";
1430 | }
1431 | .fa-cab:before,
1432 | .fa-taxi:before {
1433 |   content: "\f1ba";
1434 | }
1435 | .fa-tree:before {
1436 |   content: "\f1bb";
1437 | }
1438 | .fa-spotify:before {
1439 |   content: "\f1bc";
1440 | }
1441 | .fa-deviantart:before {
1442 |   content: "\f1bd";
1443 | }
1444 | .fa-soundcloud:before {
1445 |   content: "\f1be";
1446 | }
1447 | .fa-database:before {
1448 |   content: "\f1c0";
1449 | }
1450 | .fa-file-pdf-o:before {
1451 |   content: "\f1c1";
1452 | }
1453 | .fa-file-word-o:before {
1454 |   content: "\f1c2";
1455 | }
1456 | .fa-file-excel-o:before {
1457 |   content: "\f1c3";
1458 | }
1459 | .fa-file-powerpoint-o:before {
1460 |   content: "\f1c4";
1461 | }
1462 | .fa-file-photo-o:before,
1463 | .fa-file-picture-o:before,
1464 | .fa-file-image-o:before {
1465 |   content: "\f1c5";
1466 | }
1467 | .fa-file-zip-o:before,
1468 | .fa-file-archive-o:before {
1469 |   content: "\f1c6";
1470 | }
1471 | .fa-file-sound-o:before,
1472 | .fa-file-audio-o:before {
1473 |   content: "\f1c7";
1474 | }
1475 | .fa-file-movie-o:before,
1476 | .fa-file-video-o:before {
1477 |   content: "\f1c8";
1478 | }
1479 | .fa-file-code-o:before {
1480 |   content: "\f1c9";
1481 | }
1482 | .fa-vine:before {
1483 |   content: "\f1ca";
1484 | }
1485 | .fa-codepen:before {
1486 |   content: "\f1cb";
1487 | }
1488 | .fa-jsfiddle:before {
1489 |   content: "\f1cc";
1490 | }
1491 | .fa-life-bouy:before,
1492 | .fa-life-buoy:before,
1493 | .fa-life-saver:before,
1494 | .fa-support:before,
1495 | .fa-life-ring:before {
1496 |   content: "\f1cd";
1497 | }
1498 | .fa-circle-o-notch:before {
1499 |   content: "\f1ce";
1500 | }
1501 | .fa-ra:before,
1502 | .fa-rebel:before {
1503 |   content: "\f1d0";
1504 | }
1505 | .fa-ge:before,
1506 | .fa-empire:before {
1507 |   content: "\f1d1";
1508 | }
1509 | .fa-git-square:before {
1510 |   content: "\f1d2";
1511 | }
1512 | .fa-git:before {
1513 |   content: "\f1d3";
1514 | }
1515 | .fa-hacker-news:before {
1516 |   content: "\f1d4";
1517 | }
1518 | .fa-tencent-weibo:before {
1519 |   content: "\f1d5";
1520 | }
1521 | .fa-qq:before {
1522 |   content: "\f1d6";
1523 | }
1524 | .fa-wechat:before,
1525 | .fa-weixin:before {
1526 |   content: "\f1d7";
1527 | }
1528 | .fa-send:before,
1529 | .fa-paper-plane:before {
1530 |   content: "\f1d8";
1531 | }
1532 | .fa-send-o:before,
1533 | .fa-paper-plane-o:before {
1534 |   content: "\f1d9";
1535 | }
1536 | .fa-history:before {
1537 |   content: "\f1da";
1538 | }
1539 | .fa-genderless:before,
1540 | .fa-circle-thin:before {
1541 |   content: "\f1db";
1542 | }
1543 | .fa-header:before {
1544 |   content: "\f1dc";
1545 | }
1546 | .fa-paragraph:before {
1547 |   content: "\f1dd";
1548 | }
1549 | .fa-sliders:before {
1550 |   content: "\f1de";
1551 | }
1552 | .fa-share-alt:before {
1553 |   content: "\f1e0";
1554 | }
1555 | .fa-share-alt-square:before {
1556 |   content: "\f1e1";
1557 | }
1558 | .fa-bomb:before {
1559 |   content: "\f1e2";
1560 | }
1561 | .fa-soccer-ball-o:before,
1562 | .fa-futbol-o:before {
1563 |   content: "\f1e3";
1564 | }
1565 | .fa-tty:before {
1566 |   content: "\f1e4";
1567 | }
1568 | .fa-binoculars:before {
1569 |   content: "\f1e5";
1570 | }
1571 | .fa-plug:before {
1572 |   content: "\f1e6";
1573 | }
1574 | .fa-slideshare:before {
1575 |   content: "\f1e7";
1576 | }
1577 | .fa-twitch:before {
1578 |   content: "\f1e8";
1579 | }
1580 | .fa-yelp:before {
1581 |   content: "\f1e9";
1582 | }
1583 | .fa-newspaper-o:before {
1584 |   content: "\f1ea";
1585 | }
1586 | .fa-wifi:before {
1587 |   content: "\f1eb";
1588 | }
1589 | .fa-calculator:before {
1590 |   content: "\f1ec";
1591 | }
1592 | .fa-paypal:before {
1593 |   content: "\f1ed";
1594 | }
1595 | .fa-google-wallet:before {
1596 |   content: "\f1ee";
1597 | }
1598 | .fa-cc-visa:before {
1599 |   content: "\f1f0";
1600 | }
1601 | .fa-cc-mastercard:before {
1602 |   content: "\f1f1";
1603 | }
1604 | .fa-cc-discover:before {
1605 |   content: "\f1f2";
1606 | }
1607 | .fa-cc-amex:before {
1608 |   content: "\f1f3";
1609 | }
1610 | .fa-cc-paypal:before {
1611 |   content: "\f1f4";
1612 | }
1613 | .fa-cc-stripe:before {
1614 |   content: "\f1f5";
1615 | }
1616 | .fa-bell-slash:before {
1617 |   content: "\f1f6";
1618 | }
1619 | .fa-bell-slash-o:before {
1620 |   content: "\f1f7";
1621 | }
1622 | .fa-trash:before {
1623 |   content: "\f1f8";
1624 | }
1625 | .fa-copyright:before {
1626 |   content: "\f1f9";
1627 | }
1628 | .fa-at:before {
1629 |   content: "\f1fa";
1630 | }
1631 | .fa-eyedropper:before {
1632 |   content: "\f1fb";
1633 | }
1634 | .fa-paint-brush:before {
1635 |   content: "\f1fc";
1636 | }
1637 | .fa-birthday-cake:before {
1638 |   content: "\f1fd";
1639 | }
1640 | .fa-area-chart:before {
1641 |   content: "\f1fe";
1642 | }
1643 | .fa-pie-chart:before {
1644 |   content: "\f200";
1645 | }
1646 | .fa-line-chart:before {
1647 |   content: "\f201";
1648 | }
1649 | .fa-lastfm:before {
1650 |   content: "\f202";
1651 | }
1652 | .fa-lastfm-square:before {
1653 |   content: "\f203";
1654 | }
1655 | .fa-toggle-off:before {
1656 |   content: "\f204";
1657 | }
1658 | .fa-toggle-on:before {
1659 |   content: "\f205";
1660 | }
1661 | .fa-bicycle:before {
1662 |   content: "\f206";
1663 | }
1664 | .fa-bus:before {
1665 |   content: "\f207";
1666 | }
1667 | .fa-ioxhost:before {
1668 |   content: "\f208";
1669 | }
1670 | .fa-angellist:before {
1671 |   content: "\f209";
1672 | }
1673 | .fa-cc:before {
1674 |   content: "\f20a";
1675 | }
1676 | .fa-shekel:before,
1677 | .fa-sheqel:before,
1678 | .fa-ils:before {
1679 |   content: "\f20b";
1680 | }
1681 | .fa-meanpath:before {
1682 |   content: "\f20c";
1683 | }
1684 | .fa-buysellads:before {
1685 |   content: "\f20d";
1686 | }
1687 | .fa-connectdevelop:before {
1688 |   content: "\f20e";
1689 | }
1690 | .fa-dashcube:before {
1691 |   content: "\f210";
1692 | }
1693 | .fa-forumbee:before {
1694 |   content: "\f211";
1695 | }
1696 | .fa-leanpub:before {
1697 |   content: "\f212";
1698 | }
1699 | .fa-sellsy:before {
1700 |   content: "\f213";
1701 | }
1702 | .fa-shirtsinbulk:before {
1703 |   content: "\f214";
1704 | }
1705 | .fa-simplybuilt:before {
1706 |   content: "\f215";
1707 | }
1708 | .fa-skyatlas:before {
1709 |   content: "\f216";
1710 | }
1711 | .fa-cart-plus:before {
1712 |   content: "\f217";
1713 | }
1714 | .fa-cart-arrow-down:before {
1715 |   content: "\f218";
1716 | }
1717 | .fa-diamond:before {
1718 |   content: "\f219";
1719 | }
1720 | .fa-ship:before {
1721 |   content: "\f21a";
1722 | }
1723 | .fa-user-secret:before {
1724 |   content: "\f21b";
1725 | }
1726 | .fa-motorcycle:before {
1727 |   content: "\f21c";
1728 | }
1729 | .fa-street-view:before {
1730 |   content: "\f21d";
1731 | }
1732 | .fa-heartbeat:before {
1733 |   content: "\f21e";
1734 | }
1735 | .fa-venus:before {
1736 |   content: "\f221";
1737 | }
1738 | .fa-mars:before {
1739 |   content: "\f222";
1740 | }
1741 | .fa-mercury:before {
1742 |   content: "\f223";
1743 | }
1744 | .fa-transgender:before {
1745 |   content: "\f224";
1746 | }
1747 | .fa-transgender-alt:before {
1748 |   content: "\f225";
1749 | }
1750 | .fa-venus-double:before {
1751 |   content: "\f226";
1752 | }
1753 | .fa-mars-double:before {
1754 |   content: "\f227";
1755 | }
1756 | .fa-venus-mars:before {
1757 |   content: "\f228";
1758 | }
1759 | .fa-mars-stroke:before {
1760 |   content: "\f229";
1761 | }
1762 | .fa-mars-stroke-v:before {
1763 |   content: "\f22a";
1764 | }
1765 | .fa-mars-stroke-h:before {
1766 |   content: "\f22b";
1767 | }
1768 | .fa-neuter:before {
1769 |   content: "\f22c";
1770 | }
1771 | .fa-facebook-official:before {
1772 |   content: "\f230";
1773 | }
1774 | .fa-pinterest-p:before {
1775 |   content: "\f231";
1776 | }
1777 | .fa-whatsapp:before {
1778 |   content: "\f232";
1779 | }
1780 | .fa-server:before {
1781 |   content: "\f233";
1782 | }
1783 | .fa-user-plus:before {
1784 |   content: "\f234";
1785 | }
1786 | .fa-user-times:before {
1787 |   content: "\f235";
1788 | }
1789 | .fa-hotel:before,
1790 | .fa-bed:before {
1791 |   content: "\f236";
1792 | }
1793 | .fa-viacoin:before {
1794 |   content: "\f237";
1795 | }
1796 | .fa-train:before {
1797 |   content: "\f238";
1798 | }
1799 | .fa-subway:before {
1800 |   content: "\f239";
1801 | }
1802 | .fa-medium:before {
1803 |   content: "\f23a";
1804 | }
1805 | 


--------------------------------------------------------------------------------
/css/font-awesome.min.css:
--------------------------------------------------------------------------------
1 | /*!
2 |  *  Font Awesome 4.3.0 by @davegandy - http://fontawesome.io - @fontawesome
3 |  *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
4 |  */.fa,.fa-stack{display:inline-block}.fa-fw,.fa-li{text-align:center}@font-face{font-family:FontAwesome;src:url(../fonts/font-awesome/fontawesome-webfont.eot?v=4.3.0);src:url(../fonts/font-awesome/fontawesome-webfont.eot?#iefix&v=4.3.0)format('embedded-opentype'),url(../fonts/font-awesome/fontawesome-webfont.woff2?v=4.3.0)format('woff2'),url(../fonts/font-awesome/fontawesome-webfont.woff?v=4.3.0)format('woff'),url(../fonts/font-awesome/fontawesome-webfont.ttf?v=4.3.0)format('truetype'),url(../fonts/font-awesome/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular)format('svg');font-weight:400;font-style:normal}.fa{font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}.fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571429em}.fa-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em}.fa-li.fa-lg{left:-1.85714286em}.fa-border{padding:.2em .25em .15em;border:.08em solid #eee;border-radius:.1em}.pull-right{float:right}.pull-left{float:left}.fa.pull-left{margin-right:.3em}.fa.pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}.fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.fa-rotate-90{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);-webkit-transform:scale(-1,1);-ms-transform:scale(-1,1);transform:scale(-1,1)}.fa-flip-vertical{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);-webkit-transform:scale(1,-1);-ms-transform:scale(1,-1);transform:scale(1,-1)}:root .fa-flip-horizontal,:root .fa-flip-vertical,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-rotate-90{-webkit-filter:none;filter:none}.fa-stack{position:relative;width:2em;height:2em;line-height:2em;vertical-align:middle}.fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-glass:before{content:"\f000"}.fa-music:before{content:"\f001"}.fa-search:before{content:"\f002"}.fa-envelope-o:before{content:"\f003"}.fa-heart:before{content:"\f004"}.fa-star:before{content:"\f005"}.fa-star-o:before{content:"\f006"}.fa-user:before{content:"\f007"}.fa-film:before{content:"\f008"}.fa-th-large:before{content:"\f009"}.fa-th:before{content:"\f00a"}.fa-th-list:before{content:"\f00b"}.fa-check:before{content:"\f00c"}.fa-close:before,.fa-remove:before,.fa-times:before{content:"\f00d"}.fa-search-plus:before{content:"\f00e"}.fa-search-minus:before{content:"\f010"}.fa-power-off:before{content:"\f011"}.fa-signal:before{content:"\f012"}.fa-cog:before,.fa-gear:before{content:"\f013"}.fa-trash-o:before{content:"\f014"}.fa-home:before{content:"\f015"}.fa-file-o:before{content:"\f016"}.fa-clock-o:before{content:"\f017"}.fa-road:before{content:"\f018"}.fa-download:before{content:"\f019"}.fa-arrow-circle-o-down:before{content:"\f01a"}.fa-arrow-circle-o-up:before{content:"\f01b"}.fa-inbox:before{content:"\f01c"}.fa-play-circle-o:before{content:"\f01d"}.fa-repeat:before,.fa-rotate-right:before{content:"\f01e"}.fa-refresh:before{content:"\f021"}.fa-list-alt:before{content:"\f022"}.fa-lock:before{content:"\f023"}.fa-flag:before{content:"\f024"}.fa-headphones:before{content:"\f025"}.fa-volume-off:before{content:"\f026"}.fa-volume-down:before{content:"\f027"}.fa-volume-up:before{content:"\f028"}.fa-qrcode:before{content:"\f029"}.fa-barcode:before{content:"\f02a"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-book:before{content:"\f02d"}.fa-bookmark:before{content:"\f02e"}.fa-print:before{content:"\f02f"}.fa-camera:before{content:"\f030"}.fa-font:before{content:"\f031"}.fa-bold:before{content:"\f032"}.fa-italic:before{content:"\f033"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-align-left:before{content:"\f036"}.fa-align-center:before{content:"\f037"}.fa-align-right:before{content:"\f038"}.fa-align-justify:before{content:"\f039"}.fa-list:before{content:"\f03a"}.fa-dedent:before,.fa-outdent:before{content:"\f03b"}.fa-indent:before{content:"\f03c"}.fa-video-camera:before{content:"\f03d"}.fa-image:before,.fa-photo:before,.fa-picture-o:before{content:"\f03e"}.fa-pencil:before{content:"\f040"}.fa-map-marker:before{content:"\f041"}.fa-adjust:before{content:"\f042"}.fa-tint:before{content:"\f043"}.fa-edit:before,.fa-pencil-square-o:before{content:"\f044"}.fa-share-square-o:before{content:"\f045"}.fa-check-square-o:before{content:"\f046"}.fa-arrows:before{content:"\f047"}.fa-step-backward:before{content:"\f048"}.fa-fast-backward:before{content:"\f049"}.fa-backward:before{content:"\f04a"}.fa-play:before{content:"\f04b"}.fa-pause:before{content:"\f04c"}.fa-stop:before{content:"\f04d"}.fa-forward:before{content:"\f04e"}.fa-fast-forward:before{content:"\f050"}.fa-step-forward:before{content:"\f051"}.fa-eject:before{content:"\f052"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-plus-circle:before{content:"\f055"}.fa-minus-circle:before{content:"\f056"}.fa-times-circle:before{content:"\f057"}.fa-check-circle:before{content:"\f058"}.fa-question-circle:before{content:"\f059"}.fa-info-circle:before{content:"\f05a"}.fa-crosshairs:before{content:"\f05b"}.fa-times-circle-o:before{content:"\f05c"}.fa-check-circle-o:before{content:"\f05d"}.fa-ban:before{content:"\f05e"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrow-down:before{content:"\f063"}.fa-mail-forward:before,.fa-share:before{content:"\f064"}.fa-expand:before{content:"\f065"}.fa-compress:before{content:"\f066"}.fa-plus:before{content:"\f067"}.fa-minus:before{content:"\f068"}.fa-asterisk:before{content:"\f069"}.fa-exclamation-circle:before{content:"\f06a"}.fa-gift:before{content:"\f06b"}.fa-leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-exclamation-triangle:before,.fa-warning:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-random:before{content:"\f074"}.fa-comment:before{content:"\f075"}.fa-magnet:before{content:"\f076"}.fa-chevron-up:before{content:"\f077"}.fa-chevron-down:before{content:"\f078"}.fa-retweet:before{content:"\f079"}.fa-shopping-cart:before{content:"\f07a"}.fa-folder:before{content:"\f07b"}.fa-folder-open:before{content:"\f07c"}.fa-arrows-v:before{content:"\f07d"}.fa-arrows-h:before{content:"\f07e"}.fa-bar-chart-o:before,.fa-bar-chart:before{content:"\f080"}.fa-twitter-square:before{content:"\f081"}.fa-facebook-square:before{content:"\f082"}.fa-camera-retro:before{content:"\f083"}.fa-key:before{content:"\f084"}.fa-cogs:before,.fa-gears:before{content:"\f085"}.fa-comments:before{content:"\f086"}.fa-thumbs-o-up:before{content:"\f087"}.fa-thumbs-o-down:before{content:"\f088"}.fa-star-half:before{content:"\f089"}.fa-heart-o:before{content:"\f08a"}.fa-sign-out:before{content:"\f08b"}.fa-linkedin-square:before{content:"\f08c"}.fa-thumb-tack:before{content:"\f08d"}.fa-external-link:before{content:"\f08e"}.fa-sign-in:before{content:"\f090"}.fa-trophy:before{content:"\f091"}.fa-github-square:before{content:"\f092"}.fa-upload:before{content:"\f093"}.fa-lemon-o:before{content:"\f094"}.fa-phone:before{content:"\f095"}.fa-square-o:before{content:"\f096"}.fa-bookmark-o:before{content:"\f097"}.fa-phone-square:before{content:"\f098"}.fa-twitter:before{content:"\f099"}.fa-facebook-f:before,.fa-facebook:before{content:"\f09a"}.fa-github:before{content:"\f09b"}.fa-unlock:before{content:"\f09c"}.fa-credit-card:before{content:"\f09d"}.fa-rss:before{content:"\f09e"}.fa-hdd-o:before{content:"\f0a0"}.fa-bullhorn:before{content:"\f0a1"}.fa-bell:before{content:"\f0f3"}.fa-certificate:before{content:"\f0a3"}.fa-hand-o-right:before{content:"\f0a4"}.fa-hand-o-left:before{content:"\f0a5"}.fa-hand-o-up:before{content:"\f0a6"}.fa-hand-o-down:before{content:"\f0a7"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-globe:before{content:"\f0ac"}.fa-wrench:before{content:"\f0ad"}.fa-tasks:before{content:"\f0ae"}.fa-filter:before{content:"\f0b0"}.fa-briefcase:before{content:"\f0b1"}.fa-arrows-alt:before{content:"\f0b2"}.fa-group:before,.fa-users:before{content:"\f0c0"}.fa-chain:before,.fa-link:before{content:"\f0c1"}.fa-cloud:before{content:"\f0c2"}.fa-flask:before{content:"\f0c3"}.fa-cut:before,.fa-scissors:before{content:"\f0c4"}.fa-copy:before,.fa-files-o:before{content:"\f0c5"}.fa-paperclip:before{content:"\f0c6"}.fa-floppy-o:before,.fa-save:before{content:"\f0c7"}.fa-square:before{content:"\f0c8"}.fa-bars:before,.fa-navicon:before,.fa-reorder:before{content:"\f0c9"}.fa-list-ul:before{content:"\f0ca"}.fa-list-ol:before{content:"\f0cb"}.fa-strikethrough:before{content:"\f0cc"}.fa-underline:before{content:"\f0cd"}.fa-table:before{content:"\f0ce"}.fa-magic:before{content:"\f0d0"}.fa-truck:before{content:"\f0d1"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-square:before{content:"\f0d3"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-plus:before{content:"\f0d5"}.fa-money:before{content:"\f0d6"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-up:before{content:"\f0d8"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-columns:before{content:"\f0db"}.fa-sort:before,.fa-unsorted:before{content:"\f0dc"}.fa-sort-desc:before,.fa-sort-down:before{content:"\f0dd"}.fa-sort-asc:before,.fa-sort-up:before{content:"\f0de"}.fa-envelope:before{content:"\f0e0"}.fa-linkedin:before{content:"\f0e1"}.fa-rotate-left:before,.fa-undo:before{content:"\f0e2"}.fa-gavel:before,.fa-legal:before{content:"\f0e3"}.fa-dashboard:before,.fa-tachometer:before{content:"\f0e4"}.fa-comment-o:before{content:"\f0e5"}.fa-comments-o:before{content:"\f0e6"}.fa-bolt:before,.fa-flash:before{content:"\f0e7"}.fa-sitemap:before{content:"\f0e8"}.fa-umbrella:before{content:"\f0e9"}.fa-clipboard:before,.fa-paste:before{content:"\f0ea"}.fa-lightbulb-o:before{content:"\f0eb"}.fa-exchange:before{content:"\f0ec"}.fa-cloud-download:before{content:"\f0ed"}.fa-cloud-upload:before{content:"\f0ee"}.fa-user-md:before{content:"\f0f0"}.fa-stethoscope:before{content:"\f0f1"}.fa-suitcase:before{content:"\f0f2"}.fa-bell-o:before{content:"\f0a2"}.fa-coffee:before{content:"\f0f4"}.fa-cutlery:before{content:"\f0f5"}.fa-file-text-o:before{content:"\f0f6"}.fa-building-o:before{content:"\f0f7"}.fa-hospital-o:before{content:"\f0f8"}.fa-ambulance:before{content:"\f0f9"}.fa-medkit:before{content:"\f0fa"}.fa-fighter-jet:before{content:"\f0fb"}.fa-beer:before{content:"\f0fc"}.fa-h-square:before{content:"\f0fd"}.fa-plus-square:before{content:"\f0fe"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angle-down:before{content:"\f107"}.fa-desktop:before{content:"\f108"}.fa-laptop:before{content:"\f109"}.fa-tablet:before{content:"\f10a"}.fa-mobile-phone:before,.fa-mobile:before{content:"\f10b"}.fa-circle-o:before{content:"\f10c"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-spinner:before{content:"\f110"}.fa-circle:before{content:"\f111"}.fa-mail-reply:before,.fa-reply:before{content:"\f112"}.fa-github-alt:before{content:"\f113"}.fa-folder-o:before{content:"\f114"}.fa-folder-open-o:before{content:"\f115"}.fa-smile-o:before{content:"\f118"}.fa-frown-o:before{content:"\f119"}.fa-meh-o:before{content:"\f11a"}.fa-gamepad:before{content:"\f11b"}.fa-keyboard-o:before{content:"\f11c"}.fa-flag-o:before{content:"\f11d"}.fa-flag-checkered:before{content:"\f11e"}.fa-terminal:before{content:"\f120"}.fa-code:before{content:"\f121"}.fa-mail-reply-all:before,.fa-reply-all:before{content:"\f122"}.fa-star-half-empty:before,.fa-star-half-full:before,.fa-star-half-o:before{content:"\f123"}.fa-location-arrow:before{content:"\f124"}.fa-crop:before{content:"\f125"}.fa-code-fork:before{content:"\f126"}.fa-chain-broken:before,.fa-unlink:before{content:"\f127"}.fa-question:before{content:"\f128"}.fa-info:before{content:"\f129"}.fa-exclamation:before{content:"\f12a"}.fa-superscript:before{content:"\f12b"}.fa-subscript:before{content:"\f12c"}.fa-eraser:before{content:"\f12d"}.fa-puzzle-piece:before{content:"\f12e"}.fa-microphone:before{content:"\f130"}.fa-microphone-slash:before{content:"\f131"}.fa-shield:before{content:"\f132"}.fa-calendar-o:before{content:"\f133"}.fa-fire-extinguisher:before{content:"\f134"}.fa-rocket:before{content:"\f135"}.fa-maxcdn:before{content:"\f136"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-html5:before{content:"\f13b"}.fa-css3:before{content:"\f13c"}.fa-anchor:before{content:"\f13d"}.fa-unlock-alt:before{content:"\f13e"}.fa-bullseye:before{content:"\f140"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-rss-square:before{content:"\f143"}.fa-play-circle:before{content:"\f144"}.fa-ticket:before{content:"\f145"}.fa-minus-square:before{content:"\f146"}.fa-minus-square-o:before{content:"\f147"}.fa-level-up:before{content:"\f148"}.fa-level-down:before{content:"\f149"}.fa-check-square:before{content:"\f14a"}.fa-pencil-square:before{content:"\f14b"}.fa-external-link-square:before{content:"\f14c"}.fa-share-square:before{content:"\f14d"}.fa-compass:before{content:"\f14e"}.fa-caret-square-o-down:before,.fa-toggle-down:before{content:"\f150"}.fa-caret-square-o-up:before,.fa-toggle-up:before{content:"\f151"}.fa-caret-square-o-right:before,.fa-toggle-right:before{content:"\f152"}.fa-eur:before,.fa-euro:before{content:"\f153"}.fa-gbp:before{content:"\f154"}.fa-dollar:before,.fa-usd:before{content:"\f155"}.fa-inr:before,.fa-rupee:before{content:"\f156"}.fa-cny:before,.fa-jpy:before,.fa-rmb:before,.fa-yen:before{content:"\f157"}.fa-rouble:before,.fa-rub:before,.fa-ruble:before{content:"\f158"}.fa-krw:before,.fa-won:before{content:"\f159"}.fa-bitcoin:before,.fa-btc:before{content:"\f15a"}.fa-file:before{content:"\f15b"}.fa-file-text:before{content:"\f15c"}.fa-sort-alpha-asc:before{content:"\f15d"}.fa-sort-alpha-desc:before{content:"\f15e"}.fa-sort-amount-asc:before{content:"\f160"}.fa-sort-amount-desc:before{content:"\f161"}.fa-sort-numeric-asc:before{content:"\f162"}.fa-sort-numeric-desc:before{content:"\f163"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbs-down:before{content:"\f165"}.fa-youtube-square:before{content:"\f166"}.fa-youtube:before{content:"\f167"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-youtube-play:before{content:"\f16a"}.fa-dropbox:before{content:"\f16b"}.fa-stack-overflow:before{content:"\f16c"}.fa-instagram:before{content:"\f16d"}.fa-flickr:before{content:"\f16e"}.fa-adn:before{content:"\f170"}.fa-bitbucket:before{content:"\f171"}.fa-bitbucket-square:before{content:"\f172"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-long-arrow-down:before{content:"\f175"}.fa-long-arrow-up:before{content:"\f176"}.fa-long-arrow-left:before{content:"\f177"}.fa-long-arrow-right:before{content:"\f178"}.fa-apple:before{content:"\f179"}.fa-windows:before{content:"\f17a"}.fa-android:before{content:"\f17b"}.fa-linux:before{content:"\f17c"}.fa-dribbble:before{content:"\f17d"}.fa-skype:before{content:"\f17e"}.fa-foursquare:before{content:"\f180"}.fa-trello:before{content:"\f181"}.fa-female:before{content:"\f182"}.fa-male:before{content:"\f183"}.fa-gittip:before,.fa-gratipay:before{content:"\f184"}.fa-sun-o:before{content:"\f185"}.fa-moon-o:before{content:"\f186"}.fa-archive:before{content:"\f187"}.fa-bug:before{content:"\f188"}.fa-vk:before{content:"\f189"}.fa-weibo:before{content:"\f18a"}.fa-renren:before{content:"\f18b"}.fa-pagelines:before{content:"\f18c"}.fa-stack-exchange:before{content:"\f18d"}.fa-arrow-circle-o-right:before{content:"\f18e"}.fa-arrow-circle-o-left:before{content:"\f190"}.fa-caret-square-o-left:before,.fa-toggle-left:before{content:"\f191"}.fa-dot-circle-o:before{content:"\f192"}.fa-wheelchair:before{content:"\f193"}.fa-vimeo-square:before{content:"\f194"}.fa-try:before,.fa-turkish-lira:before{content:"\f195"}.fa-plus-square-o:before{content:"\f196"}.fa-space-shuttle:before{content:"\f197"}.fa-slack:before{content:"\f198"}.fa-envelope-square:before{content:"\f199"}.fa-wordpress:before{content:"\f19a"}.fa-openid:before{content:"\f19b"}.fa-bank:before,.fa-institution:before,.fa-university:before{content:"\f19c"}.fa-graduation-cap:before,.fa-mortar-board:before{content:"\f19d"}.fa-yahoo:before{content:"\f19e"}.fa-google:before{content:"\f1a0"}.fa-reddit:before{content:"\f1a1"}.fa-reddit-square:before{content:"\f1a2"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-stumbleupon:before{content:"\f1a4"}.fa-delicious:before{content:"\f1a5"}.fa-digg:before{content:"\f1a6"}.fa-pied-piper:before{content:"\f1a7"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-drupal:before{content:"\f1a9"}.fa-joomla:before{content:"\f1aa"}.fa-language:before{content:"\f1ab"}.fa-fax:before{content:"\f1ac"}.fa-building:before{content:"\f1ad"}.fa-child:before{content:"\f1ae"}.fa-paw:before{content:"\f1b0"}.fa-spoon:before{content:"\f1b1"}.fa-cube:before{content:"\f1b2"}.fa-cubes:before{content:"\f1b3"}.fa-behance:before{content:"\f1b4"}.fa-behance-square:before{content:"\f1b5"}.fa-steam:before{content:"\f1b6"}.fa-steam-square:before{content:"\f1b7"}.fa-recycle:before{content:"\f1b8"}.fa-automobile:before,.fa-car:before{content:"\f1b9"}.fa-cab:before,.fa-taxi:before{content:"\f1ba"}.fa-tree:before{content:"\f1bb"}.fa-spotify:before{content:"\f1bc"}.fa-deviantart:before{content:"\f1bd"}.fa-soundcloud:before{content:"\f1be"}.fa-database:before{content:"\f1c0"}.fa-file-pdf-o:before{content:"\f1c1"}.fa-file-word-o:before{content:"\f1c2"}.fa-file-excel-o:before{content:"\f1c3"}.fa-file-powerpoint-o:before{content:"\f1c4"}.fa-file-image-o:before,.fa-file-photo-o:before,.fa-file-picture-o:before{content:"\f1c5"}.fa-file-archive-o:before,.fa-file-zip-o:before{content:"\f1c6"}.fa-file-audio-o:before,.fa-file-sound-o:before{content:"\f1c7"}.fa-file-movie-o:before,.fa-file-video-o:before{content:"\f1c8"}.fa-file-code-o:before{content:"\f1c9"}.fa-vine:before{content:"\f1ca"}.fa-codepen:before{content:"\f1cb"}.fa-jsfiddle:before{content:"\f1cc"}.fa-life-bouy:before,.fa-life-buoy:before,.fa-life-ring:before,.fa-life-saver:before,.fa-support:before{content:"\f1cd"}.fa-circle-o-notch:before{content:"\f1ce"}.fa-ra:before,.fa-rebel:before{content:"\f1d0"}.fa-empire:before,.fa-ge:before{content:"\f1d1"}.fa-git-square:before{content:"\f1d2"}.fa-git:before{content:"\f1d3"}.fa-hacker-news:before{content:"\f1d4"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-qq:before{content:"\f1d6"}.fa-wechat:before,.fa-weixin:before{content:"\f1d7"}.fa-paper-plane:before,.fa-send:before{content:"\f1d8"}.fa-paper-plane-o:before,.fa-send-o:before{content:"\f1d9"}.fa-history:before{content:"\f1da"}.fa-circle-thin:before,.fa-genderless:before{content:"\f1db"}.fa-header:before{content:"\f1dc"}.fa-paragraph:before{content:"\f1dd"}.fa-sliders:before{content:"\f1de"}.fa-share-alt:before{content:"\f1e0"}.fa-share-alt-square:before{content:"\f1e1"}.fa-bomb:before{content:"\f1e2"}.fa-futbol-o:before,.fa-soccer-ball-o:before{content:"\f1e3"}.fa-tty:before{content:"\f1e4"}.fa-binoculars:before{content:"\f1e5"}.fa-plug:before{content:"\f1e6"}.fa-slideshare:before{content:"\f1e7"}.fa-twitch:before{content:"\f1e8"}.fa-yelp:before{content:"\f1e9"}.fa-newspaper-o:before{content:"\f1ea"}.fa-wifi:before{content:"\f1eb"}.fa-calculator:before{content:"\f1ec"}.fa-paypal:before{content:"\f1ed"}.fa-google-wallet:before{content:"\f1ee"}.fa-cc-visa:before{content:"\f1f0"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-cc-discover:before{content:"\f1f2"}.fa-cc-amex:before{content:"\f1f3"}.fa-cc-paypal:before{content:"\f1f4"}.fa-cc-stripe:before{content:"\f1f5"}.fa-bell-slash:before{content:"\f1f6"}.fa-bell-slash-o:before{content:"\f1f7"}.fa-trash:before{content:"\f1f8"}.fa-copyright:before{content:"\f1f9"}.fa-at:before{content:"\f1fa"}.fa-eyedropper:before{content:"\f1fb"}.fa-paint-brush:before{content:"\f1fc"}.fa-birthday-cake:before{content:"\f1fd"}.fa-area-chart:before{content:"\f1fe"}.fa-pie-chart:before{content:"\f200"}.fa-line-chart:before{content:"\f201"}.fa-lastfm:before{content:"\f202"}.fa-lastfm-square:before{content:"\f203"}.fa-toggle-off:before{content:"\f204"}.fa-toggle-on:before{content:"\f205"}.fa-bicycle:before{content:"\f206"}.fa-bus:before{content:"\f207"}.fa-ioxhost:before{content:"\f208"}.fa-angellist:before{content:"\f209"}.fa-cc:before{content:"\f20a"}.fa-ils:before,.fa-shekel:before,.fa-sheqel:before{content:"\f20b"}.fa-meanpath:before{content:"\f20c"}.fa-buysellads:before{content:"\f20d"}.fa-connectdevelop:before{content:"\f20e"}.fa-dashcube:before{content:"\f210"}.fa-forumbee:before{content:"\f211"}.fa-leanpub:before{content:"\f212"}.fa-sellsy:before{content:"\f213"}.fa-shirtsinbulk:before{content:"\f214"}.fa-simplybuilt:before{content:"\f215"}.fa-skyatlas:before{content:"\f216"}.fa-cart-plus:before{content:"\f217"}.fa-cart-arrow-down:before{content:"\f218"}.fa-diamond:before{content:"\f219"}.fa-ship:before{content:"\f21a"}.fa-user-secret:before{content:"\f21b"}.fa-motorcycle:before{content:"\f21c"}.fa-street-view:before{content:"\f21d"}.fa-heartbeat:before{content:"\f21e"}.fa-venus:before{content:"\f221"}.fa-mars:before{content:"\f222"}.fa-mercury:before{content:"\f223"}.fa-transgender:before{content:"\f224"}.fa-transgender-alt:before{content:"\f225"}.fa-venus-double:before{content:"\f226"}.fa-mars-double:before{content:"\f227"}.fa-venus-mars:before{content:"\f228"}.fa-mars-stroke:before{content:"\f229"}.fa-mars-stroke-v:before{content:"\f22a"}.fa-mars-stroke-h:before{content:"\f22b"}.fa-neuter:before{content:"\f22c"}.fa-facebook-official:before{content:"\f230"}.fa-pinterest-p:before{content:"\f231"}.fa-whatsapp:before{content:"\f232"}.fa-server:before{content:"\f233"}.fa-user-plus:before{content:"\f234"}.fa-user-times:before{content:"\f235"}.fa-bed:before,.fa-hotel:before{content:"\f236"}.fa-viacoin:before{content:"\f237"}.fa-train:before{content:"\f238"}.fa-subway:before{content:"\f239"}.fa-medium:before{content:"\f23a"}


--------------------------------------------------------------------------------
/fonts/font-awesome/FontAwesome.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/callmenick/CSS-Circle-Menu/862540b4e1e3efcfa905983917037f97ae189fa1/fonts/font-awesome/FontAwesome.otf


--------------------------------------------------------------------------------
/fonts/font-awesome/fontawesome-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/callmenick/CSS-Circle-Menu/862540b4e1e3efcfa905983917037f97ae189fa1/fonts/font-awesome/fontawesome-webfont.eot


--------------------------------------------------------------------------------
/fonts/font-awesome/fontawesome-webfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/callmenick/CSS-Circle-Menu/862540b4e1e3efcfa905983917037f97ae189fa1/fonts/font-awesome/fontawesome-webfont.ttf


--------------------------------------------------------------------------------
/fonts/font-awesome/fontawesome-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/callmenick/CSS-Circle-Menu/862540b4e1e3efcfa905983917037f97ae189fa1/fonts/font-awesome/fontawesome-webfont.woff


--------------------------------------------------------------------------------
/fonts/font-awesome/fontawesome-webfont.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/callmenick/CSS-Circle-Menu/862540b4e1e3efcfa905983917037f97ae189fa1/fonts/font-awesome/fontawesome-webfont.woff2


--------------------------------------------------------------------------------
/fonts/oxygen/oxygen-v5-latin-300.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/callmenick/CSS-Circle-Menu/862540b4e1e3efcfa905983917037f97ae189fa1/fonts/oxygen/oxygen-v5-latin-300.eot


--------------------------------------------------------------------------------
/fonts/oxygen/oxygen-v5-latin-300.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/callmenick/CSS-Circle-Menu/862540b4e1e3efcfa905983917037f97ae189fa1/fonts/oxygen/oxygen-v5-latin-300.ttf


--------------------------------------------------------------------------------
/fonts/oxygen/oxygen-v5-latin-300.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/callmenick/CSS-Circle-Menu/862540b4e1e3efcfa905983917037f97ae189fa1/fonts/oxygen/oxygen-v5-latin-300.woff


--------------------------------------------------------------------------------
/fonts/oxygen/oxygen-v5-latin-300.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/callmenick/CSS-Circle-Menu/862540b4e1e3efcfa905983917037f97ae189fa1/fonts/oxygen/oxygen-v5-latin-300.woff2


--------------------------------------------------------------------------------
/fonts/oxygen/oxygen-v5-latin-700.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/callmenick/CSS-Circle-Menu/862540b4e1e3efcfa905983917037f97ae189fa1/fonts/oxygen/oxygen-v5-latin-700.eot


--------------------------------------------------------------------------------
/fonts/oxygen/oxygen-v5-latin-700.svg:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" standalone="no"?>
  2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  3 | <svg xmlns="http://www.w3.org/2000/svg">
  4 | <defs >
  5 | <font id="Oxygen" horiz-adv-x="978" ><font-face
  6 |     font-family="Oxygen"
  7 |     units-per-em="2048"
  8 |     panose-1="2 0 8 3 0 0 0 0 0 0"
  9 |     ascent="2103"
 10 |     descent="-483"
 11 |     alphabetic="0" />
 12 | <glyph unicode=" " glyph-name="null" horiz-adv-x="541" />
 13 | <glyph unicode="!" glyph-name="null" horiz-adv-x="446" d="M193 449L108 1162V1458H349V1162L259 449H193ZM224 -18Q159 -18 114 27T69 134Q69 197 114 243T224 289Q288 289 332 243T377 134Q377 72 333 27T224 -18Z" />
 14 | <glyph unicode="&quot;" glyph-name="null" horiz-adv-x="784" d="M143 955L108 1470H332L302 955H143ZM487 955L454 1470H677L646 955H487Z" />
 15 | <glyph unicode="#" glyph-name="null" horiz-adv-x="1192" d="M178 -15L255 404H53L61 583H288L343 898H131L139 1077H375L455 1458H650L574 1077H767L841 1458H1031L956 1077H1137L1125 899H923L863 583H1058L1048 404H833L753 -15H557L636 404H446L367 -15H178ZM478
 16 | 583H672L733 899H540L478 583Z" />
 17 | <glyph unicode="$" glyph-name="null" horiz-adv-x="1194" d="M558 -212L556 -20Q301 -17 94 102L160 317Q358 208 558 202V636Q438 671 396 688Q101 792 101 1076Q101 1261 225 1368T558 1489V1643H656V1491Q896 1484 1075 1382L993 1184Q813 1265 656 1271V878Q664
 18 | 875 680 870T715 859T742 851Q943 785 1029 687T1116 414Q1116 225 993 114T656 -16V-212H558ZM558 911V1267Q473 1256 429 1213T381 1088Q381 966 502 929Q516 924 558 911ZM656 208Q841 238 841 416Q841 544 686 596Q683 598 671 601T656 606V208Z" />
 19 | <glyph unicode="%" glyph-name="null" horiz-adv-x="1790" d="M407 836Q494 836 538 901T583 1069Q583 1174 539 1239T408 1304T278 1238T234 1067T277 899T407 836ZM404 677Q241 677 148 787T54 1067T150 1349T409 1461Q578 1461 675 1351T772 1070Q772 901 671
 20 | 789T404 677ZM307 -32L1208 1450L1428 1449L520 -32H307ZM1382 142Q1472 142 1517 207T1563 377T1515 544T1370 608T1236 545T1198 372Q1198 268 1244 205T1382 142ZM1379 -17Q1207 -17 1108 93T1008 372Q1008 766 1371 766Q1550 766 1645 658T1741 376Q1741 207
 21 | 1644 95T1379 -17Z" />
 22 | <glyph unicode="&amp;" glyph-name="null" horiz-adv-x="1436" d="M580 -23Q474 -23 383 2T217 76T101 210T58 404Q58 468 77 524T125 621T201 703T292 771T395 831Q354 877 332 904T283 975T243 1060T230 1150Q230 1260 284 1337T422 1450T612 1485Q686 1485
 23 | 754 1467T881 1411T974 1312T1009 1168Q1009 1100 982 1041T906 934T805 853T687 786L1037 404Q1118 492 1191 634L1361 521Q1283 370 1181 256L1388 37Q1381 35 1283 11T1178 -16L1036 133Q831 -23 580 -23ZM587 168Q673 168 755 196T899 276Q880 296 703 488T508
 24 | 701Q466 677 440 661T381 618T332 566T302 504T289 426Q289 299 372 234T587 168ZM571 924Q618 949 648 969T713 1019T764 1086T781 1166Q781 1239 736 1277T619 1315Q542 1315 497 1276T451 1160Q451 1048 571 924Z" />
 25 | <glyph unicode="&apos;" glyph-name="null" horiz-adv-x="440" d="M140 929L105 1464H319L292 929H140Z" />
 26 | <glyph unicode="(" glyph-name="null" horiz-adv-x="650" d="M376 -276Q93 111 93 597Q93 1093 375 1488H611Q511 1345 426 1095T341 599Q341 359 426 111T610 -276H376Z" />
 27 | <glyph unicode=")" glyph-name="null" horiz-adv-x="650" d="M41 -276Q101 -190 159 -61T263 251T309 599Q309 843 225 1093T40 1488H275Q558 1089 558 597Q558 113 274 -276H41Z" />
 28 | <glyph unicode="*" glyph-name="null" horiz-adv-x="1104" d="M375 562L171 676L413 982L71 1059L135 1266L472 1133L437 1504H665L630 1133L971 1262L1032 1054L688 982Q693 975 807 833T933 676Q927 672 833 619T731 562L549 885L375 562Z" />
 29 | <glyph unicode="+" glyph-name="null" horiz-adv-x="1180" d="M492 146V554H83V745H493V1153H691V745H1098V554H690V146H492Z" />
 30 | <glyph unicode="," glyph-name="null" horiz-adv-x="508" d="M64 -283Q121 -6 158 232H402L399 183Q334 -43 241 -283H64Z" />
 31 | <glyph unicode="-" glyph-name="null" horiz-adv-x="677" d="M70 445V649H606V445H70Z" />
 32 | <glyph unicode="." glyph-name="null" horiz-adv-x="473" d="M245 -18Q180 -18 135 27T90 134Q90 197 134 243T245 289Q309 289 353 243T397 134Q397 72 353 27T245 -18Z" />
 33 | <glyph unicode="/" glyph-name="null" horiz-adv-x="949" d="M52 -189L674 1489H892L265 -189H52Z" />
 34 | <glyph unicode="0" glyph-name="null" horiz-adv-x="1296" d="M569 187T649 187T785 233T871 360T914 534T927 740Q927 1282 649 1282Q373 1282 369 744Q369 630 382 537T425 362T512 233ZM768 -21T649 -21T435 19T278 129T175 296T116 501T98 732Q98 857 116
 35 | 966T176 1173T280 1340T437 1449T649 1490T861 1450T1017 1340T1120 1173T1180 966T1198 732Q1198 609 1181 501T1122 296T1019 129T863 20Z" />
 36 | <glyph unicode="1" glyph-name="null" horiz-adv-x="686" d="M303 1V1220Q289 1211 174 1163T43 1110V1310Q67 1321 195 1385T336 1459H556V1H303Z" />
 37 | <glyph unicode="2" glyph-name="null" horiz-adv-x="1054" d="M85 0L79 216L542 740Q628 832 667 909T707 1073Q707 1168 645 1224T482 1281Q389 1281 299 1247T150 1160L75 1358Q225 1490 497 1490Q713 1490 844 1382T976 1075Q976 935 902 808T698 547L368 197H959L941
 38 | 0H85Z" />
 39 | <glyph unicode="3" glyph-name="null" horiz-adv-x="1078" d="M485 -21Q356 -21 243 12T63 103L135 292Q190 246 287 217T486 187Q601 187 671 249T742 411Q742 473 723 518T671 590T586 633T476 656T341 663Q338 663 312 663T283 664V866H339Q426 866 488 875T604
 40 | 906T685 971T713 1077Q713 1162 649 1222T469 1282Q281 1282 134 1188L62 1378Q244 1490 494 1490Q703 1490 835 1380T968 1098Q968 978 907 894T728 770Q862 744 935 641T1009 398Q1009 265 938 169T750 26T485 -21Z" />
 41 | <glyph unicode="4" glyph-name="null" horiz-adv-x="1253" d="M753 0V325H92V503L685 1458H1018V523H1198L1185 325H1018V0H753ZM352 522H753V1202L352 522Z" />
 42 | <glyph unicode="5" glyph-name="null" horiz-adv-x="1138" d="M542 -21Q443 -21 338 11T178 73T105 119L185 307Q204 292 240 270T358 218T515 189Q655 189 727 267T799 471Q799 590 734 662T564 734Q440 734 342 626L167 660L205 1458H1001L986 1252H437Q437
 43 | 1234 431 1072T423 890Q511 937 608 937Q810 937 933 807T1057 468Q1057 246 922 113T542 -21Z" />
 44 | <glyph unicode="6" glyph-name="null" horiz-adv-x="1205" d="M615 -21Q371 -21 218 112T65 463Q65 533 80 597T126 722T188 830T268 942L684 1467H994L540 894Q613 919 662 919Q877 919 1014 791T1151 456Q1151 242 1001 111T615 -21ZM603 179Q735 179 809 254T884
 45 | 453Q884 582 814 656T606 731Q466 731 400 656T334 451Q334 328 404 254T603 179Z" />
 46 | <glyph unicode="7" glyph-name="null" horiz-adv-x="1036" d="M237 0L679 1258H75L77 1459H977V1302L505 0H237Z" />
 47 | <glyph unicode="8" glyph-name="null" horiz-adv-x="1151" d="M578 -21Q435 -21 321 24T135 164T64 389Q64 652 323 767Q92 877 92 1111Q92 1203 130 1276T234 1395T388 1466T578 1490Q790 1490 926 1391T1063 1111Q1063 880 849 767Q1090 650 1090 388Q1090 258
 48 | 1020 164T835 24T578 -21ZM452 161T578 161T775 222T846 394Q846 504 772 576T578 679Q455 648 382 576T308 393Q308 283 380 222ZM578 835Q701 863 767 932T833 1110Q833 1200 761 1255T578 1310Q468 1310 395 1255T322 1110Q322 1002 390 932T578 835Z" />
 49 | <glyph unicode="9" glyph-name="null" horiz-adv-x="1215" d="M243 0L687 578Q620 555 568 555Q353 555 218 684T82 1020Q82 1234 230 1362T616 1490Q861 1490 1013 1359T1165 1009Q1165 883 1117 780T976 550L562 0H243ZM624 739Q763 739 829 816T896 1024Q896
 50 | 1147 827 1219T629 1291Q496 1291 421 1216T345 1019Q345 889 415 814T624 739Z" />
 51 | <glyph unicode=":" glyph-name="null" horiz-adv-x="460" d="M100 -6V259H365V-6H100ZM100 841V1106H365V841H100Z" />
 52 | <glyph unicode=";" glyph-name="null" horiz-adv-x="448" d="M107 -322L163 246H389L265 -322H107ZM125 841V1105H389V841H125Z" />
 53 | <glyph unicode="&lt;" glyph-name="null" horiz-adv-x="1196" d="M1081 196L115 645V769L1082 1251V1045L377 712L1081 401V196Z" />
 54 | <glyph unicode="=" glyph-name="null" horiz-adv-x="1202" d="M93 357V548H1111V357H93ZM93 754V947H1111V754H93Z" />
 55 | <glyph unicode="&gt;" glyph-name="null" horiz-adv-x="1196" d="M119 197V403L823 712L119 1047V1253L1086 769V645L119 197Z" />
 56 | <glyph unicode="?" glyph-name="null" horiz-adv-x="887" d="M323 448Q333 527 366 608T438 754T516 880T580 1001T606 1113Q605 1201 551 1252T399 1303Q337 1303 279 1288T191 1257T121 1218L51 1384Q133 1437 221 1463T427 1490Q498 1490 565 1469T689 1407T780
 57 | 1299T815 1148Q815 1080 791 1014T725 884T637 759T533 614T434 448H323ZM376 -18Q311 -18 266 27T221 134Q221 197 266 243T376 289Q440 289 484 243T528 134Q528 72 484 27T376 -18Z" />
 58 | <glyph unicode="@" glyph-name="null" horiz-adv-x="1699" d="M891 -205Q650 -205 464 -108T173 170T68 590Q68 761 130 911T302 1169T564 1338T893 1400Q1101 1400 1269 1313T1535 1066T1633 702Q1633 585 1596 482T1498 309T1357 197T1193 156Q1110 156 1060
 59 | 209T1008 375Q970 285 901 228T749 171Q611 171 533 259T455 492Q455 635 514 758T682 957T926 1032Q1064 1032 1242 968Q1229 900 1200 762T1154 531T1137 388T1155 318T1215 299Q1284 299 1345 360T1442 514T1477 705Q1477 869 1402 995T1193 1188T892 1255Q757
 60 | 1255 644 1210T456 1094T330 932T255 752T232 578Q232 426 284 303T426 101T635 -20T889 -62Q1182 -62 1391 92L1446 -16Q1215 -205 891 -205ZM752 312Q944 312 1029 748Q1041 812 1054 899Q999 910 941 910Q857 910 785 849T672 695T632 506Q632 422 661 367T752
 61 | 312Z" />
 62 | <glyph unicode="A" glyph-name="null" horiz-adv-x="1359" d="M-3 0L536 1466H831L1362 0H1084L939 414H426L280 0H-3ZM494 616H870Q690 1193 685 1212L494 616Z" />
 63 | <glyph unicode="B" glyph-name="null" horiz-adv-x="1333" d="M158 0V1465H615Q906 1465 1049 1380T1192 1097Q1192 1065 1188 1034T1170 964T1133 892T1069 830T973 782Q1109 749 1181 656T1253 425Q1253 218 1107 109T701 0H158ZM429 196H664Q976 196 976 440Q976
 64 | 563 898 617T657 671H429V196ZM429 860H661Q930 860 930 1065Q930 1180 853 1223T606 1266H429V860Z" />
 65 | <glyph unicode="C" glyph-name="null" horiz-adv-x="1301" d="M797 -21Q476 -21 288 181T100 739Q100 1077 296 1281T811 1486Q1068 1486 1246 1367L1161 1162Q990 1267 817 1267Q615 1267 498 1122T380 731Q380 477 493 338T817 199Q1001 199 1182 291L1218 79Q1050
 66 | -21 797 -21Z" />
 67 | <glyph unicode="D" glyph-name="null" horiz-adv-x="1514" d="M430 217H624Q875 217 1006 348T1137 732Q1137 1002 1002 1124T595 1247H430V217ZM159 0V1465H583Q775 1465 927 1421T1188 1289T1356 1061T1415 738Q1415 383 1201 192T608 0H159Z" />
 68 | <glyph unicode="E" glyph-name="null" horiz-adv-x="1152" d="M158 0V1465H1046L1035 1250H429V872H1005V657H429V216H1057L1048 0H158Z" />
 69 | <glyph unicode="F" glyph-name="null" horiz-adv-x="1103" d="M158 0V1465H1025L1015 1250H427V834H986V621H427V0H158Z" />
 70 | <glyph unicode="G" glyph-name="null" horiz-adv-x="1466" d="M812 -21Q477 -21 289 181T100 734Q100 957 188 1126T447 1391T851 1486Q1118 1486 1309 1371L1221 1169Q1039 1267 856 1267Q634 1267 507 1123T380 731Q380 485 493 342T824 199Q964 199 1078 243V583H771L773
 71 | 796H1333V89Q1197 33 1076 6T812 -21Z" />
 72 | <glyph unicode="H" glyph-name="null" horiz-adv-x="1520" d="M158 0V1465H429V866H1091V1465H1362V0H1091V652H429V0H158Z" />
 73 | <glyph unicode="I" glyph-name="null" horiz-adv-x="602" d="M165 0V1465H436V0H165Z" />
 74 | <glyph unicode="J" glyph-name="null" horiz-adv-x="633" d="M-73 -321L-84 -108Q-36 -116 21 -116Q132 -116 171 -59T210 129V1469H482V147Q482 21 460 -65T384 -212T242 -301T22 -329Q-33 -329 -73 -321Z" />
 75 | <glyph unicode="K" glyph-name="null" horiz-adv-x="1348" d="M157 0V1465H429V805Q500 899 719 1156T981 1465H1302L748 806L1337 0H1019L541 657L429 563V0H157Z" />
 76 | <glyph unicode="L" glyph-name="null" horiz-adv-x="1071" d="M158 0V1465H429V216H1042L1034 0H158Z" />
 77 | <glyph unicode="M" glyph-name="null" horiz-adv-x="1841" d="M158 0V1465H478L921 407L1367 1465H1683V0H1433V724L1441 1139L1404 1029L1029 100H797L430 1034L393 1144L402 720V0H158Z" />
 78 | <glyph unicode="N" glyph-name="null" horiz-adv-x="1554" d="M158 0V1465H446Q524 1343 763 973T1054 523Q1069 500 1105 446T1157 368Q1150 711 1150 724V1465H1397V0H1105L444 1030L396 1109Q404 845 404 738V0H158Z" />
 79 | <glyph unicode="O" glyph-name="null" horiz-adv-x="1626" d="M601 200T814 200T1135 338T1244 730Q1244 986 1136 1127T815 1268Q602 1268 493 1127T383 730Q383 478 492 339ZM813 -21Q482 -21 291 179T99 733Q99 1088 291 1287T814 1486T1336 1287T1527 732Q1527
 80 | 381 1335 180T813 -21Z" />
 81 | <glyph unicode="P" glyph-name="null" horiz-adv-x="1245" d="M151 0V1469H639Q812 1469 935 1425T1129 1280T1201 1029Q1201 924 1174 843T1085 695T911 592T639 556Q503 556 418 564V0H151ZM610 752Q693 752 754 768T850 809T905 871T932 942T939 1020Q939 1141
 82 | 861 1204T641 1267H418V754Q430 752 610 752Z" />
 83 | <glyph unicode="Q" glyph-name="null" horiz-adv-x="1626" d="M1252 -478Q1169 -418 1065 -280T894 -17Q842 -21 813 -21Q482 -21 291 179T99 733Q99 1088 291 1287T814 1486T1336 1287T1527 732Q1527 480 1426 303T1140 43Q1293 -205 1426 -327L1252 -478ZM601
 84 | 200T814 200T1135 338T1244 730Q1244 986 1136 1127T815 1268Q602 1268 493 1127T383 730Q383 478 492 339Z" />
 85 | <glyph unicode="R" glyph-name="null" horiz-adv-x="1394" d="M151 0V1469H694Q805 1469 886 1459T1041 1423T1160 1351T1232 1234T1259 1062Q1259 770 994 678Q1048 617 1128 452L1346 0H1050L879 383Q782 589 759 627Q742 628 646 628L419 630V0H151ZM718 824Q874
 86 | 824 942 879T1010 1058Q1010 1166 941 1217T730 1268H419V825Q434 825 568 825T718 824Z" />
 87 | <glyph unicode="S" glyph-name="null" horiz-adv-x="1189" d="M569 -20Q304 -20 94 102L160 317Q254 265 364 233T580 201Q709 201 775 256T841 416Q841 554 657 607Q644 611 584 628T472 662T396 688Q101 792 101 1076Q101 1275 242 1383T618 1491Q883 1491 1075
 88 | 1382L993 1184Q797 1272 629 1272Q508 1272 447 1230T381 1088Q381 966 502 929Q526 920 620 890T742 851Q943 785 1029 687T1116 414Q1116 205 968 93T569 -20Z" />
 89 | <glyph unicode="T" glyph-name="null" horiz-adv-x="1152" d="M441 0V1248H14V1465H1138V1248H713V0H441Z" />
 90 | <glyph unicode="U" glyph-name="null" horiz-adv-x="1468" d="M730 -21Q442 -21 293 122T144 527V1465H416V550Q416 367 490 283T735 199Q902 199 977 283T1052 551V1465H1323V525Q1323 266 1171 123T730 -21Z" />
 91 | <glyph unicode="V" glyph-name="null" horiz-adv-x="1321" d="M527 0L-6 1465H273L583 560Q601 513 666 285Q670 301 703 416T746 558Q758 592 898 1009T1051 1465H1327L801 0H527Z" />
 92 | <glyph unicode="W" glyph-name="null" horiz-adv-x="2051" d="M408 0L10 1465H280L564 325L898 1458H1157L1474 321L1764 1465H2034L1624 0H1343L1030 1073L687 0H408Z" />
 93 | <glyph unicode="X" glyph-name="null" horiz-adv-x="1337" d="M-11 0L502 750L27 1465H332L677 919L1032 1465H1321L836 746L1347 0H1034L664 570L286 0H-11Z" />
 94 | <glyph unicode="Y" glyph-name="null" horiz-adv-x="1256" d="M492 0V581L-15 1465H279L628 831L979 1465H1269L764 586V0H492Z" />
 95 | <glyph unicode="Z" glyph-name="null" horiz-adv-x="1209" d="M62 0V174L835 1249H89V1465H1155V1268L396 216H1160L1159 0H62Z" />
 96 | <glyph unicode="[" glyph-name="null" horiz-adv-x="651" d="M135 -266V1507H599V1327H387V-85H599V-266H135Z" />
 97 | <glyph unicode="\" glyph-name="null" horiz-adv-x="903" d="M649 -60L30 1462H261L878 -60H649Z" />
 98 | <glyph unicode="]" glyph-name="null" horiz-adv-x="651" d="M52 -266V-85H263V1327H52V1507H516V-266H52Z" />
 99 | <glyph unicode="^" glyph-name="null" horiz-adv-x="1154" d="M36 549L498 1471H627L1120 549H911L564 1217L245 549H36Z" />
100 | <glyph unicode="_" glyph-name="null" horiz-adv-x="1155" d="M72 -318V-144H1086V-318H72Z" />
101 | <glyph unicode="`" glyph-name="null" horiz-adv-x="514" d="M323 1195L-8 1578H298L486 1195H323Z" />
102 | <glyph unicode="a" glyph-name="null" horiz-adv-x="1142" d="M423 -21Q270 -21 176 63T81 307Q81 478 193 560T531 665Q562 669 598 673T679 681T750 688V746Q750 846 704 891T564 937Q430 937 233 862Q232 865 200 953T167 1043Q361 1126 587 1126Q809 1126
103 | 910 1030T1011 717V0H817Q816 4 795 67T774 134Q692 54 614 17T423 -21ZM494 165Q585 165 652 208T749 314V526Q746 526 697 522T643 518Q484 504 410 458T336 310Q336 240 377 203T494 165Z" />
104 | <glyph unicode="b" glyph-name="null" horiz-adv-x="1258" d="M722 -21Q610 -21 519 28T386 141L360 1H133V1504L395 1521V1181Q395 1082 389 956Q519 1126 728 1126Q938 1126 1057 970T1177 562Q1177 300 1054 140T722 -21ZM659 178Q776 178 846 277T916 558Q916
105 | 741 848 835T662 929Q396 929 393 570Q393 368 460 273T659 178Z" />
106 | <glyph unicode="c" glyph-name="null" horiz-adv-x="1008" d="M614 -21Q362 -21 222 129T81 558Q81 828 228 977T617 1126Q810 1126 943 1043L881 856Q745 927 628 927Q495 927 419 832T342 555Q342 371 417 275T631 179Q775 179 908 264L933 65Q864 19 790 -1T614 -21Z" />
107 | <glyph unicode="d" glyph-name="null" horiz-adv-x="1259" d="M542 -21Q327 -21 204 137T81 559Q81 815 203 970T541 1126Q775 1126 872 960Q862 1058 862 1149V1504L1124 1521V0H897L868 150Q851 123 837 104T794 59T734 18T652 -9T542 -21ZM604 178Q868 178
108 | 872 537Q872 740 804 833T601 926Q483 926 413 832T342 553Q342 370 412 274T604 178Z" />
109 | <glyph unicode="e" glyph-name="null" horiz-adv-x="1157" d="M641 -21Q376 -21 229 131T81 553Q81 815 220 970T599 1126Q826 1126 951 984T1077 607Q1077 590 1077 552T1076 496H345Q349 342 429 258T651 173Q831 173 997 267L1034 81Q869 -21 641 -21ZM350
110 | 661H830Q830 795 769 867T600 939Q499 939 430 869T350 661Z" />
111 | <glyph unicode="f" glyph-name="null" horiz-adv-x="760" d="M203 0V925H29L46 1079L203 1099V1160Q203 1260 221 1331T282 1452T394 1527T568 1552Q668 1552 772 1533L749 1338Q667 1349 620 1349Q536 1349 501 1309T465 1174V1099H723V925H465V0H203Z" />
112 | <glyph unicode="g" glyph-name="null" horiz-adv-x="1267" d="M353 -492L338 -280H471Q702 -280 794 -219T886 7Q886 74 880 152Q854 116 831 93T772 46T687 12T574 0Q356 0 216 157T75 562Q75 694 114 802T220 981T374 1088T561 1126Q782 1126 890 965L908 1099H1142V78Q1142
113 | -4 1134 -69T1106 -195T1054 -301T972 -383T857 -443T702 -479T504 -492H353ZM616 183Q887 183 890 546V584Q888 747 822 836T629 926Q485 926 411 828T337 562Q337 401 411 292T616 183Z" />
114 | <glyph unicode="h" glyph-name="null" horiz-adv-x="1253" d="M133 0V1504L395 1521V1204Q395 1181 392 1077T389 970Q520 1126 741 1126Q925 1126 1026 1021T1128 696V0H866V667Q866 802 823 865T677 928Q589 928 521 884T419 769Q395 677 395 529V0H133Z" />
115 | <glyph unicode="i" glyph-name="null" horiz-adv-x="541" d="M139 0V1099H401V0H139ZM139 1259V1483H402V1259H139Z" />
116 | <glyph unicode="j" glyph-name="null" horiz-adv-x="527" d="M-48 -427L-77 -233H-19Q31 -233 63 -226T116 -205T147 -163T160 -103T164 -16V1099H426V26Q426 -56 420 -115T396 -227T350 -316T274 -377T163 -415T11 -427H-48ZM164 1259V1483H426V1259H164Z" />
117 | <glyph unicode="k" glyph-name="null" horiz-adv-x="1173" d="M133 0V1504L395 1521V846L389 624Q390 625 409 644T431 665Q486 730 550 799T713 968T842 1099H1154L702 631L1183 0H866L504 499L395 413V0H133Z" />
118 | <glyph unicode="l" glyph-name="null" horiz-adv-x="700" d="M518 -15Q405 -15 331 11T213 96T153 234T136 433V1504L398 1521V438Q398 290 433 238T569 185Q619 185 696 196L703 9Q702 9 679 4T634 -4T579 -11T518 -15Z" />
119 | <glyph unicode="m" glyph-name="null" horiz-adv-x="1911" d="M133 0V1099H345L375 959Q395 984 413 1003T464 1047T533 1088T623 1115T738 1126Q869 1126 947 1073T1058 949Q1117 1034 1211 1080T1420 1126Q1609 1126 1697 1019T1786 702V0H1523V624Q1523 785
120 | 1488 856T1352 928Q1199 928 1132 790Q1104 729 1094 643V0H832V636Q832 783 793 855T652 927Q569 927 509 885T418 775Q395 674 395 533V0H133Z" />
121 | <glyph unicode="n" glyph-name="null" horiz-adv-x="1254" d="M133 0V1099H344L373 960Q541 1126 746 1126Q938 1126 1033 1016T1129 695V0H866V663Q865 796 823 862T672 928Q587 928 517 885T414 775Q395 697 395 535V0H133Z" />
122 | <glyph unicode="o" glyph-name="null" horiz-adv-x="1222" d="M612 178Q745 178 812 275T879 553Q879 736 812 832T610 928Q477 928 410 832T342 552Q342 372 410 275T612 178ZM605 -21Q361 -21 221 137T81 553Q81 819 221 972T616 1126Q862 1126 1001 970T1141
123 | 553Q1141 290 1000 135T605 -21Z" />
124 | <glyph unicode="p" glyph-name="null" horiz-adv-x="1256" d="M133 -457V1099H358L386 945Q440 1032 529 1079T729 1127Q864 1127 966 1052T1122 848T1175 555Q1175 300 1052 140T717 -21Q613 -21 529 20T387 133Q395 -11 395 -29V-444L133 -457ZM661 179Q778
125 | 179 845 277T913 557Q913 742 845 835T656 928Q396 928 393 574Q393 370 460 275T661 179Z" />
126 | <glyph unicode="q" glyph-name="null" horiz-adv-x="1259" d="M862 -457V8Q862 77 869 150Q765 -22 555 -22Q342 -22 212 138T82 555Q82 810 205 968T549 1126Q766 1126 874 959L895 1099H1125V-444L862 -457ZM606 177Q734 177 802 263T872 535Q872 739 805 832T603
127 | 926Q482 926 413 832T343 552Q343 368 413 273T606 177Z" />
128 | <glyph unicode="r" glyph-name="null" horiz-adv-x="798" d="M134 0V1099H354L388 931Q496 1104 701 1104Q744 1104 771 1100L767 881Q727 887 684 887Q539 887 468 810T396 596V0H134Z" />
129 | <glyph unicode="s" glyph-name="null" horiz-adv-x="985" d="M484 -20Q241 -20 95 63L122 260Q188 224 290 196T476 167Q563 167 611 199T661 295Q661 352 616 385T442 467Q398 483 385 488Q233 547 166 619T99 816Q99 966 207 1046T510 1126Q720 1126 879 1047L814
130 | 866Q657 939 515 939Q436 939 392 913T347 832Q347 781 390 753T558 678Q562 677 584 669T618 656Q769 601 840 525T911 325Q910 160 799 70T484 -20Z" />
131 | <glyph unicode="t" glyph-name="null" horiz-adv-x="803" d="M572 -15Q460 -15 386 11T269 95T210 229T192 421V940H12L22 1082L210 1099L294 1397L454 1398V1099H727V940H454V416Q454 291 490 238T623 185Q680 185 745 195L752 7Q750 7 728 3T685 -5T632 -12T572 -15Z" />
132 | <glyph unicode="u" glyph-name="null" horiz-adv-x="1163" d="M795 -21T581 -21T237 86T106 400V1099H369V410Q369 287 420 232T584 177Q694 177 744 231T795 410V1099H1057V400Q1057 194 926 87Z" />
133 | <glyph unicode="v" glyph-name="null" horiz-adv-x="1125" d="M441 0L3 1099H281Q297 1054 382 820T496 500Q553 334 578 249Q578 250 595 314T627 434T647 503Q648 505 738 779T846 1099H1122L706 0H441Z" />
134 | <glyph unicode="w" glyph-name="null" horiz-adv-x="1713" d="M346 0L13 1099H280L491 293Q498 316 605 686T726 1099H995Q1008 1057 1110 690T1220 296L1437 1099H1700L1356 0H1095Q1082 43 974 435T856 858Q836 785 729 418T604 0H346Z" />
135 | <glyph unicode="x" glyph-name="null" horiz-adv-x="1158" d="M21 0L412 563L40 1099H337L581 725L832 1099H1124L749 564L1137 0H837L581 399L317 0H21Z" />
136 | <glyph unicode="y" glyph-name="null" horiz-adv-x="1116" d="M191 -463Q127 -463 55 -455L42 -252Q88 -257 159 -257Q250 -257 305 -221T396 -93Q400 -83 436 20L-6 1099H274L563 302Q595 421 706 744T829 1099H1109Q652 -109 648 -119Q577 -304 469 -383T191 -463Z" />
137 | <glyph unicode="z" glyph-name="null" horiz-adv-x="977" d="M65 0V159L609 917H91V1099H899V920L384 191H917V0H65Z" />
138 | <glyph unicode="{" glyph-name="null" horiz-adv-x="786" d="M703 -287Q477 -287 377 -223T277 13V290Q277 410 230 457T52 505V719Q145 720 193 740T259 804T277 930V1221Q277 1306 303 1362T385 1451T517 1497T703 1511V1311Q596 1310 563 1274T529 1137V868Q528
139 | 767 479 710T317 610Q529 566 529 360V88Q529 -13 562 -49T703 -86V-287Z" />
140 | <glyph unicode="|" glyph-name="null" horiz-adv-x="759" d="M278 -380V1538H481V-380H278Z" />
141 | <glyph unicode="}" glyph-name="null" horiz-adv-x="787" d="M85 -287V-86Q192 -85 225 -50T259 88V360Q259 464 310 521T471 611Q362 645 311 705T259 868V1137Q259 1238 226 1274T85 1311V1511Q198 1511 273 1498T404 1452T485 1360T511 1212V929Q511 809 556
142 | 765T737 719V505Q605 505 558 459T511 290V4Q511 -162 411 -224T85 -287Z" />
143 | <glyph unicode="~" glyph-name="null" horiz-adv-x="1297" d="M207 471L130 616Q226 811 417 811Q526 811 681 745Q827 681 900 681Q960 681 1015 713T1134 817L1205 682Q1162 602 1074 544T883 486Q818 486 761 503T618 560Q551 591 506 605T408 620Q286 620 207 471Z" />
144 | <glyph unicode="&#xa0;" glyph-name="null" horiz-adv-x="541" />
145 | <glyph unicode="&#xa1;" glyph-name="null" horiz-adv-x="446" d="M253 655L338 -58V-354H97V-58L187 655H253ZM222 1122Q287 1122 332 1077T377 970Q377 907 332 861T222 815Q158 815 114 861T69 970Q69 1032 113 1077T222 1122Z" />
146 | <glyph unicode="&#xa2;" glyph-name="null" horiz-adv-x="1082" d="M573 -202V54Q349 71 216 223T82 636Q82 761 121 863T227 1033T383 1139T573 1184V1402H674V1181Q832 1168 934 1090L889 916Q851 942 792 964T674 992V242Q790 251 892 323L944 148Q825 64 674
147 | 54V-202H573ZM573 247V989Q462 969 396 878T329 628Q329 462 393 366T573 247Z" />
148 | <glyph unicode="&#xa3;" glyph-name="null" horiz-adv-x="1149" d="M85 0L69 190Q170 233 211 293T252 469V659H67V838H252V943Q252 1066 276 1163T353 1334T494 1447T703 1487Q921 1487 1088 1347L985 1178Q911 1227 848 1252T713 1278Q501 1278 501 1017V838H892V659H501V509Q501
149 | 309 389 213Q397 214 536 214H1105L1097 0H85Z" />
150 | <glyph unicode="&#xa4;" glyph-name="null" horiz-adv-x="1162" d="M1020 229L834 402Q721 317 581 317Q434 317 327 401L146 230L52 322L237 495Q161 602 161 732Q161 860 237 969L51 1144L146 1236L329 1063Q440 1149 581 1149T834 1061L1020 1236L1111 1142L927
151 | 969Q1002 861 1002 732Q1002 601 928 495L1109 323L1020 229ZM581 455Q699 455 781 536T864 732T781 928T581 1010Q465 1010 382 928T299 732Q299 617 381 536T581 455Z" />
152 | <glyph unicode="&#xa5;" glyph-name="null" horiz-adv-x="1194" d="M471 0V289H124V442H471V583H125V735H392L-44 1459H240L599 838L958 1459H1237L809 735H1085V583H734V442H1085V289H734V0H471Z" />
153 | <glyph unicode="&#xa6;" glyph-name="null" horiz-adv-x="817" d="M306 -379V340H509V-379H306ZM306 820V1538H509V820H306Z" />
154 | <glyph unicode="&#xa7;" glyph-name="null" horiz-adv-x="1034" d="M664 -31T472 -31T138 37V228Q208 195 299 173T463 150Q549 150 602 175T663 250Q677 302 634 342T470 435Q386 469 329 500T225 571T156 662T133 776Q133 857 172 921T276 1026Q150 1114 150
155 | 1261Q150 1401 253 1475T532 1551Q707 1556 872 1493Q871 1486 854 1401T836 1309Q697 1370 556 1370Q380 1370 380 1264Q380 1214 427 1178T584 1096Q661 1065 716 1035T819 965T890 876T914 767Q914 603 776 509Q903 424 903 284Q903 132 784 51ZM607 589Q703
156 | 654 703 731Q703 797 637 844T444 940Q399 917 373 881T346 802Q346 746 397 701T546 614Q551 612 574 602T607 589Z" />
157 | <glyph unicode="&#xa8;" glyph-name="null" horiz-adv-x="772" d="M78 1236V1490H273V1236H78ZM499 1236V1490H695V1236H499Z" />
158 | <glyph unicode="&#xa9;" glyph-name="null" horiz-adv-x="1743" d="M854 254Q654 254 523 392T392 743Q392 880 449 993T613 1172T853 1238Q1038 1238 1160 1156L1111 1052Q998 1118 864 1118Q715 1118 626 1015T537 743Q537 576 627 475T869 374Q1002 374 1117
159 | 440L1161 336Q1037 254 854 254ZM867 78Q1056 78 1209 167T1448 407T1533 741Q1533 922 1448 1073T1209 1314T866 1404Q679 1404 527 1315T290 1074T205 742Q205 560 289 409T526 168T867 78ZM867 -22Q711 -22 569 35T320 191T152 433T89 741T151 1048T319 1291T567
160 | 1448T866 1505Q1023 1505 1166 1448T1416 1292T1586 1049T1649 741T1586 434T1417 191T1168 35T867 -22Z" />
161 | <glyph unicode="&#xaa;" glyph-name="null" horiz-adv-x="757" d="M299 750Q203 750 139 806T75 963Q75 1011 91 1049T140 1111T208 1153T294 1180T384 1196T477 1208Q497 1210 506 1211V1243Q505 1319 476 1351T382 1384Q274 1384 133 1326L91 1436Q235 1514
162 | 399 1514Q520 1514 594 1456T669 1268V889Q669 787 670 764H535L518 849Q486 806 424 778T299 750ZM112 536V656H673V536H112ZM317 878Q368 878 418 909T506 995V1106Q456 1099 428 1095T363 1083T306 1066T267 1043T239 1011T231 968Q231 925 255 902T317 878Z"
163 | />
164 | <glyph unicode="&#xab;" glyph-name="null" horiz-adv-x="1083" d="M388 136L74 546L84 589L391 987L598 934L318 562L593 190L388 136ZM812 136L489 558L814 987L1015 934L741 562L1011 190L812 136Z" />
165 | <glyph unicode="&#xac;" glyph-name="null" horiz-adv-x="1287" d="M961 247V641H132V834H1152V247H961Z" />
166 | <glyph unicode="&#xad;" glyph-name="null" horiz-adv-x="745" d="M76 380V584H671V380H76Z" />
167 | <glyph unicode="&#xae;" glyph-name="null" horiz-adv-x="1735" d="M556 271V1226H856Q1214 1226 1214 964Q1214 854 1165 792T1000 705Q1012 690 1027 668T1061 614T1096 557T1136 486T1174 417T1216 341T1254 271H1089Q1063 317 968 499Q870 679 856 688H704V271H556ZM703
168 | 813H823Q872 813 906 816T972 828T1023 854T1053 897T1064 962Q1064 995 1058 1018T1035 1056T1002 1080T952 1093T891 1099T814 1100H703V813ZM865 78Q1054 78 1207 167T1444 407T1529 741Q1529 922 1445 1073T1207 1314T864 1404Q677 1404 525 1315T289 1074T205
169 | 742Q205 560 289 409T526 168T865 78ZM865 -22Q709 -22 567 35T320 191T152 433T89 741T151 1048T319 1291T566 1448T864 1505Q1021 1505 1164 1448T1413 1292T1582 1049T1645 741T1583 434T1414 191T1165 35T865 -22Z" />
170 | <glyph unicode="&#xaf;" glyph-name="null" horiz-adv-x="912" d="M118 1377V1530H804V1377H118Z" />
171 | <glyph unicode="&#xb0;" glyph-name="null" horiz-adv-x="850" d="M428 999Q494 999 542 1044T591 1165Q591 1238 543 1282T428 1326Q361 1326 312 1282T263 1165Q263 1090 312 1045T428 999ZM427 870Q282 870 197 958T111 1167Q111 1287 196 1371T427 1455Q570
172 | 1455 656 1371T742 1167T657 959T427 870Z" />
173 | <glyph unicode="&#xb1;" glyph-name="null" horiz-adv-x="1288" d="M544 261V636H180V828H544V1196H743V828H1109V636H744V261H544ZM180 0V177H1109V0H180Z" />
174 | <glyph unicode="&#xb2;" glyph-name="null" horiz-adv-x="834" d="M146 574V716Q305 822 420 948T536 1159Q536 1216 495 1249T399 1283T289 1251T201 1169L135 1289Q190 1361 258 1400T422 1439Q537 1439 618 1363T700 1163Q700 1099 683 1046T618 936T535 846T416
175 | 741Q396 724 386 715H701L686 574H146Z" />
176 | <glyph unicode="&#xb3;" glyph-name="null" horiz-adv-x="800" d="M380 603Q235 603 125 685L174 811Q208 779 268 759T378 739Q447 739 486 774T525 877Q525 941 476 973T337 1005L260 1004V1140H339Q495 1140 495 1238Q495 1281 467 1307T382 1333Q329 1333
177 | 271 1314T179 1270L131 1381Q241 1470 391 1470Q507 1470 585 1413T664 1242Q661 1121 538 1081Q598 1058 640 1002T683 876Q683 747 596 675T380 603Z" />
178 | <glyph unicode="&#xb4;" glyph-name="null" horiz-adv-x="619" d="M191 1195L362 1578H661L346 1195H191Z" />
179 | <glyph unicode="&#xb6;" glyph-name="null" horiz-adv-x="1201" d="M419 -150V782Q266 795 172 896T78 1144Q78 1236 118 1303T231 1410T397 1467T607 1486H1026V1315H944V-151H778V1315H613V-151L419 -150Z" />
180 | <glyph unicode="&#xb7;" glyph-name="null" horiz-adv-x="422" d="M90 488V740H332V488H90Z" />
181 | <glyph unicode="&#xb8;" glyph-name="null" horiz-adv-x="589" d="M62 -357L185 24H329L271 -357H62Z" />
182 | <glyph unicode="&#xb9;" glyph-name="null" horiz-adv-x="743" d="M151 601V749H293V1304Q288 1301 213 1266T132 1228V1376Q134 1377 187 1403T288 1455T340 1484H484V749H624V601H151Z" />
183 | <glyph unicode="&#xba;" glyph-name="null" horiz-adv-x="865" d="M439 899Q533 899 581 961T629 1125Q629 1232 581 1295T435 1358Q341 1358 293 1295T245 1129Q245 1022 293 961T439 899ZM439 744Q265 744 167 850T69 1131Q69 1301 169 1406T438 1512Q608 1512
184 | 705 1406T803 1127Q803 958 705 851T439 744Z" />
185 | <glyph unicode="&#xbb;" glyph-name="null" horiz-adv-x="1168" d="M314 136L113 190L387 562L116 934L316 987L640 565L314 136ZM749 136L545 190L822 562L550 934L753 987L1071 565L749 136Z" />
186 | <glyph unicode="&#xbc;" glyph-name="null" horiz-adv-x="1731" d="M104 601V749H246V1304Q241 1301 165 1266T85 1228V1376Q287 1477 294 1484H437V749H578V601H104ZM1388 10V182H985V324L1372 865H1547V318H1662L1664 182H1546L1545 10H1388ZM305 0L1327 1471H1521L506
187 | 0H305ZM1176 318H1386Q1386 639 1387 646L1176 318Z" />
188 | <glyph unicode="&#xbd;" glyph-name="null" horiz-adv-x="1805" d="M125 601V733H267V1321Q224 1293 106 1228V1376Q122 1384 201 1430T288 1484H458V733H599V601H125ZM1136 -29L1137 107Q1173 138 1234 188T1331 267T1412 339T1482 413T1524 482T1542 555Q1542
189 | 614 1500 649T1402 684Q1343 684 1286 659T1192 587L1126 704Q1169 769 1247 802T1424 835Q1541 835 1625 761T1710 561Q1710 517 1702 479T1671 402T1628 337T1566 270T1497 208T1414 138Q1388 116 1374 105H1709L1693 -29H1136ZM310 0L1331 1471H1529L510 0H310Z"
190 | />
191 | <glyph unicode="&#xbe;" glyph-name="null" horiz-adv-x="1683" d="M343 621Q200 621 88 703L137 825Q170 795 226 778T335 761Q403 761 443 793T483 889Q483 1005 301 1005L224 1004V1140H302Q458 1140 458 1239Q458 1281 429 1305T341 1330Q288 1330 231 1313T141
192 | 1270L79 1377Q131 1420 205 1445T356 1471Q472 1471 553 1413T634 1244Q634 1233 629 1214T613 1169T574 1118T510 1081Q571 1059 611 1005T652 883Q652 800 608 739T495 650T343 621ZM1339 11V190H935V332L1322 889H1498V325H1612L1614 190H1497L1496 11H1339ZM279
193 | 0L1299 1471H1495L482 0H279ZM1126 325H1336Q1336 651 1337 665L1126 325Z" />
194 | <glyph unicode="&#xbf;" glyph-name="null" horiz-adv-x="887" d="M541 751Q531 672 498 591T426 445T348 319T284 198T258 86Q259 -2 313 -53T465 -104Q527 -104 585 -89T673 -58T743 -19L813 -185Q731 -238 643 -264T437 -291Q366 -291 299 -270T175 -208T84
195 | -100T49 51Q49 119 73 185T139 315T227 440T331 585T430 751H541ZM488 1217Q553 1217 598 1172T643 1065Q643 1002 598 956T488 910Q424 910 380 956T336 1065Q336 1127 380 1172T488 1217Z" />
196 | <glyph unicode="&#xc0;" glyph-name="null" horiz-adv-x="1359" d="M598 1608L267 1991H573L761 1608H598ZM-3 0L536 1466H831L1362 0H1084L939 414H426L280 0H-3ZM494 616H870Q690 1193 685 1212L494 616Z" />
197 | <glyph unicode="&#xc1;" glyph-name="null" horiz-adv-x="1359" d="M602 1608L773 1991H1072L757 1608H602ZM-3 0L536 1466H831L1362 0H1084L939 414H426L280 0H-3ZM494 616H870Q690 1193 685 1212L494 616Z" />
198 | <glyph unicode="&#xc2;" glyph-name="null" horiz-adv-x="1359" d="M325 1608L575 1991H783L1034 1608H850L676 1826L504 1608H325ZM-3 0L536 1466H831L1362 0H1084L939 414H426L280 0H-3ZM494 616H870Q690 1193 685 1212L494 616Z" />
199 | <glyph unicode="&#xc3;" glyph-name="null" horiz-adv-x="1359" d="M336 1608Q336 1644 338 1673T351 1736T380 1793T430 1831T508 1847Q566 1847 637 1826T761 1784T829 1763Q876 1763 876 1847H1023Q1023 1812 1021 1785T1009 1723T983 1664T934 1625T857 1608Q798
200 | 1608 679 1653T530 1698Q481 1698 480 1608H336ZM-3 0L536 1466H831L1362 0H1084L939 414H426L280 0H-3ZM494 616H870Q690 1193 685 1212L494 616Z" />
201 | <glyph unicode="&#xc4;" glyph-name="null" horiz-adv-x="1359" d="M371 1608V1862H566V1608H371ZM792 1608V1862H988V1608H792ZM-3 0L536 1466H831L1362 0H1084L939 414H426L280 0H-3ZM494 616H870Q690 1193 685 1212L494 616Z" />
202 | <glyph unicode="&#xc5;" glyph-name="null" horiz-adv-x="1359" d="M629 1566T680 1566T758 1598T786 1676Q786 1721 758 1754T680 1788Q629 1788 601 1756T573 1676Q573 1630 601 1598ZM780 1473T680 1473T520 1533T459 1677Q459 1760 518 1818T680 1877Q781
203 | 1877 840 1819T900 1677Q900 1593 840 1533ZM-3 0L536 1466H831L1362 0H1084L939 414H426L280 0H-3ZM494 616H870Q690 1193 685 1212L494 616Z" />
204 | <glyph unicode="&#xc6;" glyph-name="null" horiz-adv-x="2021" d="M38 0L882 1481H1891L1876 1285H1269L1302 851H1851V655H1322L1361 196H1926L1912 0H1099L1069 375H545L340 0H38ZM638 572H1053L1003 1235L638 572Z" />
205 | <glyph unicode="&#xc7;" glyph-name="null" horiz-adv-x="1301" d="M595 -389L718 -8H862L804 -389H595ZM797 -21Q476 -21 288 181T100 739Q100 1077 296 1281T811 1486Q1068 1486 1246 1367L1161 1162Q990 1267 817 1267Q615 1267 498 1122T380 731Q380 477 493
206 | 338T817 199Q1001 199 1182 291L1218 79Q1050 -21 797 -21Z" />
207 | <glyph unicode="&#xc8;" glyph-name="null" horiz-adv-x="1152" d="M526 1608L195 1991H501L689 1608H526ZM158 0V1465H1046L1035 1250H429V872H1005V657H429V216H1057L1048 0H158Z" />
208 | <glyph unicode="&#xc9;" glyph-name="null" horiz-adv-x="1152" d="M530 1608L701 1991H1000L685 1608H530ZM158 0V1465H1046L1035 1250H429V872H1005V657H429V216H1057L1048 0H158Z" />
209 | <glyph unicode="&#xca;" glyph-name="null" horiz-adv-x="1152" d="M253 1608L503 1991H711L962 1608H778L604 1826L432 1608H253ZM158 0V1465H1046L1035 1250H429V872H1005V657H429V216H1057L1048 0H158Z" />
210 | <glyph unicode="&#xcb;" glyph-name="null" horiz-adv-x="1152" d="M299 1608V1862H494V1608H299ZM720 1608V1862H916V1608H720ZM158 0V1465H1046L1035 1250H429V872H1005V657H429V216H1057L1048 0H158Z" />
211 | <glyph unicode="&#xcc;" glyph-name="null" horiz-adv-x="602" d="M219 1608L-112 1991H194L382 1608H219ZM165 0V1465H436V0H165Z" />
212 | <glyph unicode="&#xcd;" glyph-name="null" horiz-adv-x="602" d="M223 1608L394 1991H693L378 1608H223ZM165 0V1465H436V0H165Z" />
213 | <glyph unicode="&#xce;" glyph-name="null" horiz-adv-x="602" d="M-54 1608L196 1991H404L655 1608H471L297 1826L125 1608H-54ZM165 0V1465H436V0H165Z" />
214 | <glyph unicode="&#xcf;" glyph-name="null" horiz-adv-x="602" d="M-8 1608V1862H187V1608H-8ZM413 1608V1862H609V1608H413ZM165 0V1465H436V0H165Z" />
215 | <glyph unicode="&#xd0;" glyph-name="null" horiz-adv-x="1524" d="M398 206H633Q892 206 1031 340T1171 725Q1171 874 1131 977T1009 1142T814 1229T542 1256H398V829H597V650H398V206ZM131 1V650H6V829H131V1463H522Q1441 1463 1441 729Q1441 553 1381 414T1212
216 | 185T952 48T617 1H131Z" />
217 | <glyph unicode="&#xd1;" glyph-name="null" horiz-adv-x="1554" d="M434 1608Q434 1644 436 1673T449 1736T478 1793T528 1831T606 1847Q664 1847 735 1826T859 1784T927 1763Q974 1763 974 1847H1121Q1121 1812 1119 1785T1107 1723T1081 1664T1032 1625T955
218 | 1608Q896 1608 777 1653T628 1698Q579 1698 578 1608H434ZM158 0V1465H446Q524 1343 763 973T1054 523Q1069 500 1105 446T1157 368Q1150 711 1150 724V1465H1397V0H1105L444 1030L396 1109Q404 845 404 738V0H158Z" />
219 | <glyph unicode="&#xd2;" glyph-name="null" horiz-adv-x="1626" d="M731 1608L400 1991H706L894 1608H731ZM601 200T814 200T1135 338T1244 730Q1244 986 1136 1127T815 1268Q602 1268 493 1127T383 730Q383 478 492 339ZM813 -21Q482 -21 291 179T99 733Q99 1088
220 | 291 1287T814 1486T1336 1287T1527 732Q1527 381 1335 180T813 -21Z" />
221 | <glyph unicode="&#xd3;" glyph-name="null" horiz-adv-x="1626" d="M735 1608L906 1991H1205L890 1608H735ZM601 200T814 200T1135 338T1244 730Q1244 986 1136 1127T815 1268Q602 1268 493 1127T383 730Q383 478 492 339ZM813 -21Q482 -21 291 179T99 733Q99
222 | 1088 291 1287T814 1486T1336 1287T1527 732Q1527 381 1335 180T813 -21Z" />
223 | <glyph unicode="&#xd4;" glyph-name="null" horiz-adv-x="1626" d="M459 1608L709 1991H917L1168 1608H984L810 1826L638 1608H459ZM601 200T814 200T1135 338T1244 730Q1244 986 1136 1127T815 1268Q602 1268 493 1127T383 730Q383 478 492 339ZM813 -21Q482
224 | -21 291 179T99 733Q99 1088 291 1287T814 1486T1336 1287T1527 732Q1527 381 1335 180T813 -21Z" />
225 | <glyph unicode="&#xd5;" glyph-name="null" horiz-adv-x="1626" d="M470 1608Q470 1644 472 1673T485 1736T514 1793T564 1831T642 1847Q700 1847 771 1826T895 1784T963 1763Q1010 1763 1010 1847H1157Q1157 1812 1155 1785T1143 1723T1117 1664T1068 1625T991
226 | 1608Q932 1608 813 1653T664 1698Q615 1698 614 1608H470ZM601 200T814 200T1135 338T1244 730Q1244 986 1136 1127T815 1268Q602 1268 493 1127T383 730Q383 478 492 339ZM813 -21Q482 -21 291 179T99 733Q99 1088 291 1287T814 1486T1336 1287T1527 732Q1527
227 | 381 1335 180T813 -21Z" />
228 | <glyph unicode="&#xd6;" glyph-name="null" horiz-adv-x="1626" d="M504 1608V1862H699V1608H504ZM925 1608V1862H1121V1608H925ZM601 200T814 200T1135 338T1244 730Q1244 986 1136 1127T815 1268Q602 1268 493 1127T383 730Q383 478 492 339ZM813 -21Q482 -21
229 | 291 179T99 733Q99 1088 291 1287T814 1486T1336 1287T1527 732Q1527 381 1335 180T813 -21Z" />
230 | <glyph unicode="&#xd7;" glyph-name="null" horiz-adv-x="1395" d="M412 147L278 283L569 583L278 882L412 1020L713 725L1013 1020L1149 881L857 583Q898 543 1008 429T1149 284L1013 147L713 441L412 147Z" />
231 | <glyph unicode="&#xd8;" glyph-name="null" horiz-adv-x="1624" d="M470 -211L370 -169L466 52Q286 138 185 312T84 730Q84 905 138 1047T289 1285T521 1433T816 1485Q953 1485 1073 1447L1166 1660L1272 1619L1179 1404Q1351 1315 1447 1142T1543 730Q1543 558
232 | 1489 417T1339 180T1108 32T812 -21Q684 -21 568 13L470 -211ZM557 260L984 1244Q905 1271 815 1271Q591 1271 474 1124T356 726Q356 565 407 445T557 260ZM815 191Q1040 191 1157 334T1274 726Q1274 885 1226 1005T1085 1192L657 213Q726 191 815 191Z" />
233 | <glyph unicode="&#xd9;" glyph-name="null" horiz-adv-x="1468" d="M652 1608L321 1991H627L815 1608H652ZM730 -21Q442 -21 293 122T144 527V1465H416V550Q416 367 490 283T735 199Q902 199 977 283T1052 551V1465H1323V525Q1323 266 1171 123T730 -21Z" />
234 | <glyph unicode="&#xda;" glyph-name="null" horiz-adv-x="1468" d="M656 1608L827 1991H1126L811 1608H656ZM730 -21Q442 -21 293 122T144 527V1465H416V550Q416 367 490 283T735 199Q902 199 977 283T1052 551V1465H1323V525Q1323 266 1171 123T730 -21Z" />
235 | <glyph unicode="&#xdb;" glyph-name="null" horiz-adv-x="1468" d="M379 1608L629 1991H837L1088 1608H904L730 1826L558 1608H379ZM730 -21Q442 -21 293 122T144 527V1465H416V550Q416 367 490 283T735 199Q902 199 977 283T1052 551V1465H1323V525Q1323 266
236 | 1171 123T730 -21Z" />
237 | <glyph unicode="&#xdc;" glyph-name="null" horiz-adv-x="1468" d="M425 1608V1862H620V1608H425ZM846 1608V1862H1042V1608H846ZM730 -21Q442 -21 293 122T144 527V1465H416V550Q416 367 490 283T735 199Q902 199 977 283T1052 551V1465H1323V525Q1323 266 1171
238 | 123T730 -21Z" />
239 | <glyph unicode="&#xdd;" glyph-name="null" horiz-adv-x="1256" d="M549 1608L720 1991H1019L704 1608H549ZM492 0V581L-15 1465H279L628 831L979 1465H1269L764 586V0H492Z" />
240 | <glyph unicode="&#xde;" glyph-name="null" horiz-adv-x="1327" d="M178 11V1454H400V1229H687Q817 1229 921 1205T1105 1129T1230 990T1274 785Q1274 573 1122 455T724 337L400 339V11H178ZM401 534H737Q886 534 968 602T1050 793Q1050 928 965 990T710 1052H400L401
241 | 534Z" />
242 | <glyph unicode="&#xdf;" glyph-name="null" horiz-adv-x="1259" d="M108 0V1024Q108 1246 230 1368T583 1490Q676 1490 756 1469T900 1405T999 1296T1035 1144Q1035 1083 1014 1033T945 937T866 871T769 808Q760 802 755 799Q777 786 824 762T900 721T973 678T1045
243 | 627T1106 571T1158 506T1189 431T1202 344Q1202 229 1148 150T1003 36T794 0H502L527 179H767Q851 179 897 223T943 345Q943 391 922 430T858 503T778 558T679 612T589 663Q502 716 502 786Q502 849 573 903Q591 916 629 942T689 985T735 1027T773 1081T785 1144Q785
244 | 1217 729 1258T582 1299Q516 1299 472 1280T405 1221T372 1134T363 1016V0H108Z" />
245 | <glyph unicode="&#xe0;" glyph-name="null" horiz-adv-x="1142" d="M465 1248L134 1631H440L628 1248H465ZM423 -21Q270 -21 176 63T81 307Q81 478 193 560T531 665Q562 669 598 673T679 681T750 688V746Q750 846 704 891T564 937Q430 937 233 862Q232 865 200
246 | 953T167 1043Q361 1126 587 1126Q809 1126 910 1030T1011 717V0H817Q816 4 795 67T774 134Q692 54 614 17T423 -21ZM494 165Q585 165 652 208T749 314V526Q746 526 697 522T643 518Q484 504 410 458T336 310Q336 240 377 203T494 165Z" />
247 | <glyph unicode="&#xe1;" glyph-name="null" horiz-adv-x="1142" d="M469 1248L640 1631H939L624 1248H469ZM423 -21Q270 -21 176 63T81 307Q81 478 193 560T531 665Q562 669 598 673T679 681T750 688V746Q750 846 704 891T564 937Q430 937 233 862Q232 865 200
248 | 953T167 1043Q361 1126 587 1126Q809 1126 910 1030T1011 717V0H817Q816 4 795 67T774 134Q692 54 614 17T423 -21ZM494 165Q585 165 652 208T749 314V526Q746 526 697 522T643 518Q484 504 410 458T336 310Q336 240 377 203T494 165Z" />
249 | <glyph unicode="&#xe2;" glyph-name="null" horiz-adv-x="1142" d="M191 1248L441 1631H649L900 1248H716L542 1466L370 1248H191ZM423 -21Q270 -21 176 63T81 307Q81 478 193 560T531 665Q562 669 598 673T679 681T750 688V746Q750 846 704 891T564 937Q430 937
250 | 233 862Q232 865 200 953T167 1043Q361 1126 587 1126Q809 1126 910 1030T1011 717V0H817Q816 4 795 67T774 134Q692 54 614 17T423 -21ZM494 165Q585 165 652 208T749 314V526Q746 526 697 522T643 518Q484 504 410 458T336 310Q336 240 377 203T494 165Z" />
251 | <glyph unicode="&#xe3;" glyph-name="null" horiz-adv-x="1142" d="M202 1248Q202 1284 204 1313T217 1376T246 1433T296 1471T374 1487Q432 1487 503 1466T627 1424T695 1403Q742 1403 742 1487H889Q889 1452 887 1425T875 1363T849 1304T800 1265T723 1248Q664
252 | 1248 545 1293T396 1338Q347 1338 346 1248H202ZM423 -21Q270 -21 176 63T81 307Q81 478 193 560T531 665Q562 669 598 673T679 681T750 688V746Q750 846 704 891T564 937Q430 937 233 862Q232 865 200 953T167 1043Q361 1126 587 1126Q809 1126 910 1030T1011
253 | 717V0H817Q816 4 795 67T774 134Q692 54 614 17T423 -21ZM494 165Q585 165 652 208T749 314V526Q746 526 697 522T643 518Q484 504 410 458T336 310Q336 240 377 203T494 165Z" />
254 | <glyph unicode="&#xe4;" glyph-name="null" horiz-adv-x="1142" d="M238 1248V1502H433V1248H238ZM659 1248V1502H855V1248H659ZM423 -21Q270 -21 176 63T81 307Q81 478 193 560T531 665Q562 669 598 673T679 681T750 688V746Q750 846 704 891T564 937Q430 937
255 | 233 862Q232 865 200 953T167 1043Q361 1126 587 1126Q809 1126 910 1030T1011 717V0H817Q816 4 795 67T774 134Q692 54 614 17T423 -21ZM494 165Q585 165 652 208T749 314V526Q746 526 697 522T643 518Q484 504 410 458T336 310Q336 240 377 203T494 165Z" />
256 | <glyph unicode="&#xe5;" glyph-name="null" horiz-adv-x="1142" d="M495 1341T546 1341T624 1373T652 1451Q652 1496 624 1529T546 1563Q495 1563 467 1531T439 1451Q439 1405 467 1373ZM646 1248T546 1248T386 1308T325 1452Q325 1535 384 1593T546 1652Q647
257 | 1652 706 1594T766 1452Q766 1368 706 1308ZM423 -21Q270 -21 176 63T81 307Q81 478 193 560T531 665Q562 669 598 673T679 681T750 688V746Q750 846 704 891T564 937Q430 937 233 862Q232 865 200 953T167 1043Q361 1126 587 1126Q809 1126 910 1030T1011 717V0H817Q816
258 | 4 795 67T774 134Q692 54 614 17T423 -21ZM494 165Q585 165 652 208T749 314V526Q746 526 697 522T643 518Q484 504 410 458T336 310Q336 240 377 203T494 165Z" />
259 | <glyph unicode="&#xe6;" glyph-name="null" horiz-adv-x="1679" d="M411 -22Q258 -22 165 74T72 317Q72 362 80 398T110 462T154 510T217 547T292 574T386 594T489 609T608 623L693 630V747Q693 850 654 897T507 949Q366 949 183 872L134 1052Q309 1135 523 1135Q649
260 | 1135 734 1090T848 959Q905 1038 999 1086T1209 1135Q1314 1135 1394 1094T1520 981T1590 819T1613 625Q1613 581 1574 561T1456 537Q1263 526 941 500Q948 339 1021 254T1232 168Q1322 168 1399 192T1519 249L1591 87Q1442 -21 1216 -21Q966 -21 837 138Q662 -22
261 | 411 -22ZM449 150Q584 150 744 273Q732 297 716 360T698 475Q695 475 652 470T607 464Q541 456 499 449T416 429T354 401T319 361T306 305Q306 230 342 190T449 150ZM944 644L1380 683Q1382 697 1382 714Q1380 944 1207 944Q1160 944 1118 929T1038 881T975 788T944
262 | 644Z" />
263 | <glyph unicode="&#xe7;" glyph-name="null" horiz-adv-x="1008" d="M437 -389L560 -8H704L646 -389H437ZM614 -21Q362 -21 222 129T81 558Q81 828 228 977T617 1126Q810 1126 943 1043L881 856Q745 927 628 927Q495 927 419 832T342 555Q342 371 417 275T631 179Q775
264 | 179 908 264L933 65Q864 19 790 -1T614 -21Z" />
265 | <glyph unicode="&#xe8;" glyph-name="null" horiz-adv-x="1157" d="M497 1248L166 1631H472L660 1248H497ZM641 -21Q376 -21 229 131T81 553Q81 815 220 970T599 1126Q826 1126 951 984T1077 607Q1077 590 1077 552T1076 496H345Q349 342 429 258T651 173Q831
266 | 173 997 267L1034 81Q869 -21 641 -21ZM350 661H830Q830 795 769 867T600 939Q499 939 430 869T350 661Z" />
267 | <glyph unicode="&#xe9;" glyph-name="null" horiz-adv-x="1157" d="M501 1248L672 1631H971L656 1248H501ZM641 -21Q376 -21 229 131T81 553Q81 815 220 970T599 1126Q826 1126 951 984T1077 607Q1077 590 1077 552T1076 496H345Q349 342 429 258T651 173Q831
268 | 173 997 267L1034 81Q869 -21 641 -21ZM350 661H830Q830 795 769 867T600 939Q499 939 430 869T350 661Z" />
269 | <glyph unicode="&#xea;" glyph-name="null" horiz-adv-x="1157" d="M225 1248L475 1631H683L934 1248H750L576 1466L404 1248H225ZM641 -21Q376 -21 229 131T81 553Q81 815 220 970T599 1126Q826 1126 951 984T1077 607Q1077 590 1077 552T1076 496H345Q349 342
270 | 429 258T651 173Q831 173 997 267L1034 81Q869 -21 641 -21ZM350 661H830Q830 795 769 867T600 939Q499 939 430 869T350 661Z" />
271 | <glyph unicode="&#xeb;" glyph-name="null" horiz-adv-x="1157" d="M270 1248V1502H465V1248H270ZM691 1248V1502H887V1248H691ZM641 -21Q376 -21 229 131T81 553Q81 815 220 970T599 1126Q826 1126 951 984T1077 607Q1077 590 1077 552T1076 496H345Q349 342
272 | 429 258T651 173Q831 173 997 267L1034 81Q869 -21 641 -21ZM350 661H830Q830 795 769 867T600 939Q499 939 430 869T350 661Z" />
273 | <glyph unicode="&#xec;" glyph-name="null" horiz-adv-x="548" d="M175 1248L-156 1631H150L338 1248H175ZM129 0V1098H384V0H129Z" />
274 | <glyph unicode="&#xed;" glyph-name="null" horiz-adv-x="548" d="M435 1248L606 1631H905L590 1248H435ZM129 0V1098H384V0H129Z" />
275 | <glyph unicode="&#xee;" glyph-name="null" horiz-adv-x="548" d="M-98 1248L152 1631H360L611 1248H427L253 1466L81 1248H-98ZM129 0V1098H384V0H129Z" />
276 | <glyph unicode="&#xef;" glyph-name="null" horiz-adv-x="548" d="M-52 1248V1502H143V1248H-52ZM369 1248V1502H565V1248H369ZM129 0V1098H384V0H129Z" />
277 | <glyph unicode="&#xf0;" glyph-name="null" horiz-adv-x="1226" d="M626 -21Q383 -21 234 114T84 467Q84 695 218 824T581 953Q636 953 730 924Q722 939 629 1050T505 1193L256 1092L189 1226L394 1309L191 1509H489L608 1396L858 1496L927 1364L716 1280Q940
278 | 1032 1047 858Q1159 674 1159 481Q1159 376 1127 287T1030 128T863 19T626 -21ZM625 178Q766 178 842 257T919 472Q919 608 841 691T619 774T400 695T323 478Q323 344 403 261T625 178Z" />
279 | <glyph unicode="&#xf1;" glyph-name="null" horiz-adv-x="1254" d="M288 1248Q288 1284 290 1313T303 1376T332 1433T382 1471T460 1487Q518 1487 589 1466T713 1424T781 1403Q828 1403 828 1487H975Q975 1452 973 1425T961 1363T935 1304T886 1265T809 1248Q750
280 | 1248 631 1293T482 1338Q433 1338 432 1248H288ZM133 0V1099H344L373 960Q541 1126 746 1126Q938 1126 1033 1016T1129 695V0H866V663Q865 796 823 862T672 928Q587 928 517 885T414 775Q395 697 395 535V0H133Z" />
281 | <glyph unicode="&#xf2;" glyph-name="null" horiz-adv-x="1222" d="M529 1248L198 1631H504L692 1248H529ZM612 178Q745 178 812 275T879 553Q879 736 812 832T610 928Q477 928 410 832T342 552Q342 372 410 275T612 178ZM605 -21Q361 -21 221 137T81 553Q81 819
282 | 221 972T616 1126Q862 1126 1001 970T1141 553Q1141 290 1000 135T605 -21Z" />
283 | <glyph unicode="&#xf3;" glyph-name="null" horiz-adv-x="1222" d="M533 1248L704 1631H1003L688 1248H533ZM612 178Q745 178 812 275T879 553Q879 736 812 832T610 928Q477 928 410 832T342 552Q342 372 410 275T612 178ZM605 -21Q361 -21 221 137T81 553Q81
284 | 819 221 972T616 1126Q862 1126 1001 970T1141 553Q1141 290 1000 135T605 -21Z" />
285 | <glyph unicode="&#xf4;" glyph-name="null" horiz-adv-x="1222" d="M257 1248L507 1631H715L966 1248H782L608 1466L436 1248H257ZM612 178Q745 178 812 275T879 553Q879 736 812 832T610 928Q477 928 410 832T342 552Q342 372 410 275T612 178ZM605 -21Q361 -21
286 | 221 137T81 553Q81 819 221 972T616 1126Q862 1126 1001 970T1141 553Q1141 290 1000 135T605 -21Z" />
287 | <glyph unicode="&#xf5;" glyph-name="null" horiz-adv-x="1222" d="M268 1248Q268 1284 270 1313T283 1376T312 1433T362 1471T440 1487Q498 1487 569 1466T693 1424T761 1403Q808 1403 808 1487H955Q955 1452 953 1425T941 1363T915 1304T866 1265T789 1248Q730
288 | 1248 611 1293T462 1338Q413 1338 412 1248H268ZM612 178Q745 178 812 275T879 553Q879 736 812 832T610 928Q477 928 410 832T342 552Q342 372 410 275T612 178ZM605 -21Q361 -21 221 137T81 553Q81 819 221 972T616 1126Q862 1126 1001 970T1141 553Q1141 290
289 | 1000 135T605 -21Z" />
290 | <glyph unicode="&#xf6;" glyph-name="null" horiz-adv-x="1222" d="M302 1248V1502H497V1248H302ZM723 1248V1502H919V1248H723ZM612 178Q745 178 812 275T879 553Q879 736 812 832T610 928Q477 928 410 832T342 552Q342 372 410 275T612 178ZM605 -21Q361 -21
291 | 221 137T81 553Q81 819 221 972T616 1126Q862 1126 1001 970T1141 553Q1141 290 1000 135T605 -21Z" />
292 | <glyph unicode="&#xf7;" glyph-name="null" horiz-adv-x="1456" d="M590 21V281H865V21H590ZM178 489V676H1274V489H178ZM590 875V1134H874V875H590Z" />
293 | <glyph unicode="&#xf8;" glyph-name="null" horiz-adv-x="1193" d="M302 -215L240 -181L336 41Q207 107 139 240T71 550Q71 810 209 964T601 1119Q707 1119 800 1089L894 1269L963 1246L870 1059Q995 993 1060 862T1125 552Q1125 296 987 140T595 -16Q488 -16
294 | 403 14L302 -215ZM420 231L721 913Q668 940 598 940Q464 940 391 839T318 551Q318 330 420 231ZM599 163Q734 163 806 265T878 551Q878 769 783 867L482 188Q532 163 599 163Z" />
295 | <glyph unicode="&#xf9;" glyph-name="null" horiz-adv-x="1163" d="M500 1248L169 1631H475L663 1248H500ZM795 -21T581 -21T237 86T106 400V1099H369V410Q369 287 420 232T584 177Q694 177 744 231T795 410V1099H1057V400Q1057 194 926 87Z" />
296 | <glyph unicode="&#xfa;" glyph-name="null" horiz-adv-x="1163" d="M504 1248L675 1631H974L659 1248H504ZM795 -21T581 -21T237 86T106 400V1099H369V410Q369 287 420 232T584 177Q694 177 744 231T795 410V1099H1057V400Q1057 194 926 87Z" />
297 | <glyph unicode="&#xfb;" glyph-name="null" horiz-adv-x="1163" d="M227 1248L477 1631H685L936 1248H752L578 1466L406 1248H227ZM795 -21T581 -21T237 86T106 400V1099H369V410Q369 287 420 232T584 177Q694 177 744 231T795 410V1099H1057V400Q1057 194 926 87Z" />
298 | <glyph unicode="&#xfc;" glyph-name="null" horiz-adv-x="1163" d="M273 1248V1502H468V1248H273ZM694 1248V1502H890V1248H694ZM795 -21T581 -21T237 86T106 400V1099H369V410Q369 287 420 232T584 177Q694 177 744 231T795 410V1099H1057V400Q1057 194 926 87Z" />
299 | <glyph unicode="&#xfd;" glyph-name="null" horiz-adv-x="1116" d="M474 1248L645 1631H944L629 1248H474ZM191 -463Q127 -463 55 -455L42 -252Q88 -257 159 -257Q250 -257 305 -221T396 -93Q400 -83 436 20L-6 1099H274L563 302Q595 421 706 744T829 1099H1109Q652
300 | -109 648 -119Q577 -304 469 -383T191 -463Z" />
301 | <glyph unicode="&#xfe;" glyph-name="null" horiz-adv-x="1288" d="M160 -431V1205L155 1498H385V938Q412 977 501 1024T711 1072Q832 1072 927 1029T1083 911T1174 736T1206 521Q1206 432 1188 353T1132 206T1038 88T902 10T726 -19Q654 -19 590 -3T484 38T419
302 | 82T385 118V-431H160ZM694 176Q769 176 824 204T912 283T959 396T975 531T960 665T913 777T826 856T696 885Q540 885 462 789T384 531Q384 368 460 272T694 176Z" />
303 | <glyph unicode="&#xff;" glyph-name="null" horiz-adv-x="1116" d="M243 1248V1502H438V1248H243ZM664 1248V1502H860V1248H664ZM191 -463Q127 -463 55 -455L42 -252Q88 -257 159 -257Q250 -257 305 -221T396 -93Q400 -83 436 20L-6 1099H274L563 302Q595 421
304 | 706 744T829 1099H1109Q652 -109 648 -119Q577 -304 469 -383T191 -463Z" />
305 | <glyph unicode="&#x2013;" glyph-name="null" horiz-adv-x="1271" d="M89 461V646H1188V461H89Z" />
306 | <glyph unicode="&#x2014;" glyph-name="null" horiz-adv-x="2151" d="M30 461V646H2116V461H30Z" />
307 | <glyph unicode="&#x2018;" glyph-name="null" horiz-adv-x="442" d="M386 1466L278 973H60L219 1466H386Z" />
308 | <glyph unicode="&#x2019;" glyph-name="null" horiz-adv-x="442" d="M60 973L168 1466H386L227 973H60Z" />
309 | <glyph unicode="&#x201a;" glyph-name="null" horiz-adv-x="557" d="M116 -280L224 212H444L285 -280H116Z" />
310 | <glyph unicode="&#x201c;" glyph-name="null" horiz-adv-x="953" d="M795 1466L687 973H477L625 1466H795ZM495 1466L395 973H176L336 1466H495Z" />
311 | <glyph unicode="&#x201d;" glyph-name="null" horiz-adv-x="953" d="M176 973L284 1466H494L346 973H176ZM476 973L576 1466H795L635 973H476Z" />
312 | <glyph unicode="&#x201e;" glyph-name="null" horiz-adv-x="1005" d="M158 -280L269 212H500L331 -280H158ZM512 -280L630 212H855L692 -280H512Z" />
313 | <glyph unicode="&#x2022;" glyph-name="null" horiz-adv-x="995" d="M651 355T497 355T243 451T143 692Q143 838 246 937T503 1037Q655 1037 755 941T856 699Q856 552 754 454Z" />
314 | <glyph unicode="&#x2039;" glyph-name="null" horiz-adv-x="584" d="M321 174L55 568L327 965H529L268 568L522 174H321Z" />
315 | <glyph unicode="&#x203a;" glyph-name="null" horiz-adv-x="584" d="M56 174L316 569L63 965H263L531 569L257 174H56Z" />
316 | </font>
317 | </defs>
318 | </svg>
319 | 


--------------------------------------------------------------------------------
/fonts/oxygen/oxygen-v5-latin-700.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/callmenick/CSS-Circle-Menu/862540b4e1e3efcfa905983917037f97ae189fa1/fonts/oxygen/oxygen-v5-latin-700.ttf


--------------------------------------------------------------------------------
/fonts/oxygen/oxygen-v5-latin-700.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/callmenick/CSS-Circle-Menu/862540b4e1e3efcfa905983917037f97ae189fa1/fonts/oxygen/oxygen-v5-latin-700.woff


--------------------------------------------------------------------------------
/fonts/oxygen/oxygen-v5-latin-700.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/callmenick/CSS-Circle-Menu/862540b4e1e3efcfa905983917037f97ae189fa1/fonts/oxygen/oxygen-v5-latin-700.woff2


--------------------------------------------------------------------------------
/fonts/oxygen/oxygen-v5-latin-regular.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/callmenick/CSS-Circle-Menu/862540b4e1e3efcfa905983917037f97ae189fa1/fonts/oxygen/oxygen-v5-latin-regular.eot


--------------------------------------------------------------------------------
/fonts/oxygen/oxygen-v5-latin-regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/callmenick/CSS-Circle-Menu/862540b4e1e3efcfa905983917037f97ae189fa1/fonts/oxygen/oxygen-v5-latin-regular.ttf


--------------------------------------------------------------------------------
/fonts/oxygen/oxygen-v5-latin-regular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/callmenick/CSS-Circle-Menu/862540b4e1e3efcfa905983917037f97ae189fa1/fonts/oxygen/oxygen-v5-latin-regular.woff


--------------------------------------------------------------------------------
/fonts/oxygen/oxygen-v5-latin-regular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/callmenick/CSS-Circle-Menu/862540b4e1e3efcfa905983917037f97ae189fa1/fonts/oxygen/oxygen-v5-latin-regular.woff2


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | // require gulp
 2 | var gulp = require('gulp');
 3 | 
 4 | // require plugins
 5 | var autoprefixer = require('gulp-autoprefixer');
 6 | var concat = require('gulp-concat');
 7 | var cssmin = require('gulp-minify-css');
 8 | var gutil = require('gulp-util');
 9 | var notifier = require('node-notifier');
10 | var notify = require('gulp-notify');
11 | var plumber = require('gulp-plumber');
12 | var rename = require('gulp-rename');
13 | var sass = require('gulp-sass');
14 | var uglify = require('gulp-uglify');
15 | 
16 | // js task
17 | gulp.task('js', function() {
18 |   return gulp.src('./js/src/**/*.js')
19 |     .pipe(uglify().on('error', function(err) {
20 |       console.log('Uglify error:', err);
21 |       this.emit('end');
22 |     }))
23 |     .pipe(rename({
24 |       suffix: '.min'
25 |     }))
26 |     .pipe(gulp.dest('./js/dist/'));
27 | });
28 | 
29 | // styles task
30 | gulp.task('styles', function() {
31 |   return gulp.src('./sass/**/*.scss')
32 |     .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
33 |     .pipe(autoprefixer())
34 |     .pipe(gulp.dest('./css/'))
35 |     .pipe(cssmin())
36 |     .pipe(rename({
37 |       suffix: '.min'
38 |     }))
39 |     .pipe(gulp.dest('./css/'));
40 | });
41 | 
42 | // default task
43 | gulp.task('default', ['js', 'styles']);
44 | 
45 | // watch task
46 | gulp.task('watch', ['js', 'styles'], function() {
47 |   gulp.watch('./js/src/**/*.js', ['js']);
48 |   gulp.watch('./sass/*.scss', ['styles']);
49 | });
50 | 


--------------------------------------------------------------------------------
/img/house.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96"><path d="M69.94 51.06c-.147.175-.386.297-.625.323h-.086c-.24 0-.45-.06-.63-.207L47.998 34l-20.6 17.176c-.21.148-.448.24-.715.207-.237-.026-.475-.148-.627-.324L24.21 48.85c-.327-.385-.267-1.01.12-1.34l21.403-17.83c1.254-1.043 3.276-1.043 4.527 0l7.266 6.074V29.95c0-.537.418-.953.95-.953h5.716c.54 0 .956.417.956.953v12.146l6.52 5.418c.39.328.443.955.12 1.34l-1.848 2.205zM65.148 65.2c0 1.04-.865 1.9-1.906 1.9H51.808V55.672h-7.62v11.43h-11.43c-1.043 0-1.906-.862-1.906-1.9V50.906c0-.055.03-.113.03-.18l17.116-14.11 17.118 14.11c.032.066.032.125.032.18V65.2z" fill="#fff"/></svg>


--------------------------------------------------------------------------------
/img/photo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96"><g fill="#fff"><path d="M70.125 35.475c-1.25-1.25-2.758-1.875-4.524-1.875H60l-1.274-3.4c-.316-.817-.896-1.52-1.737-2.113s-1.707-.887-2.59-.887H41.6c-.884 0-1.746.296-2.588.888s-1.42 1.296-1.737 2.113L36 33.6h-5.6c-1.767 0-3.275.625-4.525 1.875C24.625 36.725 24 38.233 24 40v22.4c0 1.767.625 3.275 1.875 4.524 1.25 1.25 2.758 1.876 4.525 1.876h35.2c1.768 0 3.275-.625 4.525-1.876C71.375 65.676 72 64.167 72 62.4V40c0-1.767-.625-3.275-1.875-4.525zM55.913 59.113C53.72 61.305 51.083 62.4 48 62.4s-5.72-1.096-7.913-3.287S36.8 54.283 36.8 51.2c0-3.083 1.095-5.72 3.287-7.912S44.917 40 48 40s5.72 1.096 7.913 3.288c2.19 2.19 3.287 4.83 3.287 7.913s-1.096 5.72-3.287 7.913zM48 44c-1.983 0-3.68.704-5.088 2.113-1.408 1.41-2.112 3.104-2.112 5.088 0 1.983.704 3.68 2.112 5.088C44.322 57.696 46.017 58.4 48 58.4s3.68-.704 5.088-2.112C54.496 54.88 55.2 53.184 55.2 51.2c0-1.983-.704-3.68-2.112-5.087C51.678 44.703 49.983 44 48 44z"/></g></svg>


--------------------------------------------------------------------------------
/img/pin.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96"><path fill="#fff" d="M59.313 28.688C56.186 25.562 52.417 24 47.998 24c-4.416 0-8.187 1.562-11.312 4.688C33.56 31.813 32 35.583 32 39.998c0 2.272.342 4.137 1.03 5.597L44.435 69.78c.313.69.797 1.23 1.453 1.63.657.39 1.36.59 2.11.59.75 0 1.455-.2 2.11-.592.657-.398 1.15-.938 1.483-1.63l11.38-24.183C63.655 44.135 64 42.27 64 40c0-4.417-1.564-8.187-4.687-11.312zm-5.66 16.968C52.094 47.218 50.21 48 48 48c-2.208 0-4.093-.782-5.655-2.344C40.78 44.094 40 42.208 40 40c0-2.208.78-4.094 2.343-5.655C43.905 32.78 45.79 32 47.998 32c2.21 0 4.097.78 5.656 2.345 1.562 1.562 2.344 3.447 2.344 5.654s-.78 4.094-2.344 5.656z"/></svg>


--------------------------------------------------------------------------------
/img/search.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96"><path fill="#fff" d="M70.935 65.71l-9.896-9.894c2.385-3.44 3.577-7.277 3.577-11.508 0-2.75-.536-5.38-1.6-7.89-1.07-2.51-2.515-4.673-4.33-6.49-1.815-1.817-3.98-3.26-6.49-4.327-2.51-1.068-5.14-1.6-7.89-1.6s-5.38.53-7.89 1.6c-2.51 1.066-4.67 2.51-6.49 4.327-1.816 1.817-3.26 3.98-4.326 6.49-1.067 2.51-1.6 5.142-1.6 7.892s.533 5.378 1.602 7.887c1.066 2.51 2.51 4.676 4.327 6.49s3.98 3.26 6.49 4.33c2.51 1.064 5.14 1.6 7.89 1.6 4.23 0 8.068-1.19 11.507-3.577l9.895 9.862c.692.732 1.558 1.098 2.6 1.098.995 0 1.864-.365 2.592-1.098.73-.727 1.096-1.596 1.096-2.592 0-1.02-.353-1.885-1.065-2.6zM53.44 53.44c-2.53 2.527-5.575 3.793-9.132 3.793-3.56 0-6.6-1.265-9.13-3.792-2.528-2.53-3.794-5.573-3.794-9.13 0-3.56 1.266-6.6 3.794-9.13 2.53-2.528 5.57-3.794 9.13-3.794 3.558 0 6.6 1.266 9.13 3.794 2.527 2.53 3.793 5.57 3.793 9.13 0 3.558-1.264 6.6-3.79 9.13z"/></svg>


--------------------------------------------------------------------------------
/img/tools.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96"><g fill="#fff"><path d="M45.032 42.573l-19.92 19.92c-.74.74-1.112 1.63-1.112 2.66 0 1.056.37 1.932 1.113 2.635l3.1 3.157c.76.724 1.647 1.084 2.66 1.084 1.034 0 1.912-.36 2.633-1.085l19.95-19.948c-1.91-.76-3.603-1.875-5.075-3.35-1.47-1.47-2.59-3.162-3.348-5.074zM34.062 64.6c-.37.37-.81.554-1.316.554-.507 0-.946-.183-1.316-.553-.37-.37-.556-.81-.556-1.316s.185-.947.556-1.317c.37-.37.81-.555 1.316-.555s.946.185 1.317.555c.37.37.555.812.555 1.317s-.184.946-.555 1.317zM71.753 37.543c-.168-.195-.396-.292-.688-.292-.174 0-.863.346-2.062 1.04-1.2.69-2.52 1.48-3.964 2.37l-2.31 1.417-5.648-3.13v-6.55l8.57-4.945c.313-.215.468-.486.468-.82 0-.33-.154-.603-.468-.818-.858-.585-1.904-1.04-3.144-1.36-1.238-.323-2.422-.482-3.554-.482-3.607 0-6.692 1.283-9.256 3.846-2.566 2.565-3.848 5.65-3.848 9.258 0 3.606 1.283 6.694 3.848 9.257 2.563 2.565 5.648 3.846 9.256 3.846 2.75 0 5.27-.815 7.563-2.443 2.288-1.63 3.894-3.75 4.81-6.362.45-1.31.673-2.34.673-3.102.002-.292-.082-.536-.247-.73z"/></g></svg>


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width,initial-scale=1.0">
 6 |   <title>Circular Fly-Out Navigation Menu</title>
 7 |   <meta name="description" content="This is a circular flyout menu made with Sass and CSS3 transitions, transforms, and animations.">
 8 |   <link rel="stylesheet" href="css/font-awesome.min.css">
 9 |   <link rel="stylesheet" href="css/common.min.css">
10 |   <link rel="stylesheet" href="css/circle-menu.min.css">
11 |   <link rel="icon" type="image/png" href="http://callmenick.com/favicon.png">
12 | </head>
13 | <body>
14 | 
15 | <header class="demo-header">
16 |   <nav class="demo-header-nav">
17 |     <a href="http://callmenick.com/_development/flexbox-examples/" class="demo-header-nav__link"><i class="fa fa-arrow-left"></i> Previous Demo</a>
18 |     <a href="http://callmenick.com/post/circular-fly-out-navigation-menu" class="demo-header-nav__link">Back To Article <i class="fa fa-star"></i></a>
19 |   </nav>
20 |   <div class="container">
21 |     <h1 class="demo-header__title">Circular Fly-Out Navigation Menu</h1>
22 |   </div>
23 | </header>
24 | 
25 | <main class="demo-content">
26 |   <div class="container">
27 |     <p class="leader-text">This is a circular flyout menu made with Sass and CSS3 transitions, transforms, and animations. Click the icon in the bottom-right corner to witness the magic. Get the source code for this demo <a href="https://github.com/callmenick/CSS-Circle-Menu">here on GitHub.</a></p>
28 |     <div id="github-icons"></div>
29 |   </div>
30 | </main>
31 | 
32 | <footer class="demo-footer">
33 |   <div class="container">
34 |     <small>&copy; 2015, callmenick.com</small>
35 |   </div>
36 | </footer>
37 | 
38 | <nav class="c-circle-menu js-menu">
39 |   <button class="c-circle-menu__toggle js-menu-toggle">
40 |     <span>Toggle</span>
41 |   </button>
42 |   <ul class="c-circle-menu__items">
43 |     <li class="c-circle-menu__item">
44 |       <a href="#" class="c-circle-menu__link">
45 |         <img src="img/house.svg" alt="">
46 |       </a>
47 |     </li>
48 |     <li class="c-circle-menu__item">
49 |       <a href="#" class="c-circle-menu__link">
50 |         <img src="img/photo.svg" alt="">
51 |       </a>
52 |     </li>
53 |     <li class="c-circle-menu__item">
54 |       <a href="#" class="c-circle-menu__link">
55 |         <img src="img/pin.svg" alt="">
56 |       </a>
57 |     </li>
58 |     <li class="c-circle-menu__item">
59 |       <a href="#" class="c-circle-menu__link">
60 |         <img src="img/search.svg" alt="">
61 |       </a>
62 |     </li>
63 |     <li class="c-circle-menu__item">
64 |       <a href="#" class="c-circle-menu__link">
65 |         <img src="img/tools.svg" alt="">
66 |       </a>
67 |     </li>
68 |   </ul>
69 |   <div class="c-circle-menu__mask js-menu-mask"></div>
70 | </nav>
71 | 
72 | <script src="js/dist/circleMenu.min.js"></script>
73 | <script>
74 |   var el = '.js-menu';
75 |   var myMenu = cssCircleMenu(el);
76 | </script>
77 | 
78 | <!-- EXTERNAL SCRIPTS FOR CALLMENICK.COM, PLEASE DO NOT INCLUDE -->
79 | <script src="js/lib/githubIcons.js"></script>
80 | <script src="js/lib/carbonAd.js"></script>
81 | <script>
82 |   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
83 |   (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
84 |   m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
85 |   })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
86 |   ga('create', 'UA-34160351-1', 'auto');
87 |   ga('send', 'pageview');
88 | </script>
89 | <!-- /EXTERNAL SCRIPTS -->
90 | 
91 | </body>
92 | </html>
93 | 


--------------------------------------------------------------------------------
/js/dist/circleMenu.min.js:
--------------------------------------------------------------------------------
1 | !function(e){"use strict";e.cssCircleMenu=function(e){function s(){a.addEventListener("click",function(e){e.preventDefault(),t()})}function t(){a.classList.contains("is-active")?c():i()}function i(){n.classList.add("is-active"),a.classList.add("is-active"),o.classList.add("is-active")}function c(){n.classList.remove("is-active"),a.classList.remove("is-active"),o.classList.remove("is-active")}var n=document.querySelector(e),a=n?n.querySelector(".js-menu-toggle"):void 0,o=n?n.querySelector(".js-menu-mask"):void 0;if(!(n&&a&&o))throw new Error("Invalid elements, check the structure.");return s(),{openMenu:i,closeMenu:c}}}(window);


--------------------------------------------------------------------------------
/js/lib/carbonAd.js:
--------------------------------------------------------------------------------
 1 | (function(){
 2 |   var carbonad_script = document.createElement("script");
 3 |   carbonad_script.type = 'text/javascript';
 4 |   carbonad_script.async = true;
 5 |   carbonad_script.id = "_carbonads_js";
 6 |   carbonad_script.src = "//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=callmenickcom";
 7 |   document.body.appendChild(carbonad_script);
 8 | 
 9 |   var ad;
10 | 
11 |   var interval = window.setInterval( function() {
12 |     ad = document.getElementById("carbonads");
13 |     if ( ad !== null ) {
14 |       clearInterval(interval);
15 |       adClose();
16 |     }
17 |   }, 100 );
18 | 
19 |   function adClose() {
20 |     var close = document.createElement("a");
21 |     close.className = "carbonad__close";
22 |     close.innerHTML = "x close";
23 |     close.setAttribute("href", "#");
24 |     ad.appendChild(close);
25 | 
26 |     close.addEventListener( "click", function(e) {
27 |       e.preventDefault();
28 |       ad.parentNode.removeChild(ad);
29 |     })
30 |   }
31 | 
32 | })();


--------------------------------------------------------------------------------
/js/lib/githubIcons.js:
--------------------------------------------------------------------------------
 1 | (function(){
 2 |   var gitWatch = document.createElement("iframe");
 3 |   gitWatch.setAttribute( "src", "http://ghbtns.com/github-btn.html?user=callmenick&repo=CSS-Circle-Menu&type=watch&count=true" );
 4 |   gitWatch.setAttribute( "allowtransparency", "true" );
 5 |   gitWatch.setAttribute( "frameborder", "0" );
 6 |   gitWatch.setAttribute( "scrolling", "0" );
 7 |   gitWatch.style.width = "110px";
 8 |   gitWatch.style.height = "20px";
 9 |   document.getElementById("github-icons").appendChild(gitWatch);
10 |   
11 |   var gitFork = document.createElement("iframe");
12 |   gitFork.setAttribute( "src", "http://ghbtns.com/github-btn.html?user=callmenick&repo=CSS-Circle-Menu&type=fork&count=true" );
13 |   gitFork.setAttribute( "allowtransparency", "true" );
14 |   gitFork.setAttribute( "frameborder", "0" );
15 |   gitFork.setAttribute( "scrolling", "0" );
16 |   gitFork.style.width = "95px";
17 |   gitFork.style.height = "20px";
18 |   document.getElementById("github-icons").appendChild(gitFork);
19 | })();


--------------------------------------------------------------------------------
/js/src/circleMenu.js:
--------------------------------------------------------------------------------
 1 | (function(window) {
 2 |   'use strict';
 3 | 
 4 |   window.cssCircleMenu = function(el) {
 5 |     var $menu = document.querySelector(el);
 6 |     var $menuToggle = $menu ? $menu.querySelector('.js-menu-toggle') : undefined;
 7 |     var $menuMask = $menu ? $menu.querySelector('.js-menu-mask') : undefined;
 8 | 
 9 |     if (!$menu || !$menuToggle || !$menuMask) {
10 |       throw new Error('Invalid elements, check the structure.');
11 |     } else {
12 |       init();
13 |     }
14 | 
15 |     return {
16 |       openMenu: openMenu,
17 |       closeMenu: closeMenu
18 |     };
19 | 
20 |     function init() {
21 |       $menuToggle.addEventListener('click', function(e) {
22 |         e.preventDefault();
23 |         toggleMenu();
24 |       });
25 |     }
26 | 
27 |     function toggleMenu() {
28 |       $menuToggle.classList.contains('is-active')
29 |         ? closeMenu()
30 |         : openMenu();
31 |     }
32 | 
33 |     function openMenu() {
34 |       $menu.classList.add('is-active');
35 |       $menuToggle.classList.add('is-active');
36 |       $menuMask.classList.add('is-active');
37 |     }
38 | 
39 |     function closeMenu() {
40 |       $menu.classList.remove('is-active');
41 |       $menuToggle.classList.remove('is-active');
42 |       $menuMask.classList.remove('is-active');
43 |     }
44 |   };
45 | })(window);
46 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "css-circle-menu",
 3 |   "version": "2.0.0",
 4 |   "description": "My circular fly-out CSS navigation menu component, built with CSS3.",
 5 |   "main": "gulpfile.js",
 6 |   "dependencies": {},
 7 |   "devDependencies": {
 8 |     "gulp": "^3.9.1",
 9 |     "gulp-autoprefixer": "^3.1.0",
10 |     "gulp-concat": "^2.6.0",
11 |     "gulp-minify-css": "^1.2.4",
12 |     "gulp-notify": "^2.2.0",
13 |     "gulp-plumber": "^1.1.0",
14 |     "gulp-rename": "^1.2.2",
15 |     "gulp-sass": "^2.3.2",
16 |     "gulp-uglify": "^1.5.4",
17 |     "gulp-util": "^3.0.7",
18 |     "node-notifier": "^4.6.0"
19 |   },
20 |   "repository": {
21 |     "type": "git",
22 |     "url": "git+https://github.com/callmenick/CSS-Circle-Menu.git"
23 |   },
24 |   "author": "Nick Salloum <nick@callmenick.com>",
25 |   "license": "MIT",
26 |   "bugs": {
27 |     "url": "https://github.com/callmenick/CSS-Circle-Menu/issues"
28 |   },
29 |   "homepage": "https://github.com/callmenick/CSS-Circle-Menu#readme"
30 | }
31 | 


--------------------------------------------------------------------------------
/sass/_circle-menu-helpers.scss:
--------------------------------------------------------------------------------
 1 | // -----------------------------------------------------------------------------
 2 | //
 3 | // Math helpers
 4 | //
 5 | // -----------------------------------------------------------------------------
 6 | 
 7 | @function pow($number, $exp) {
 8 |   $value: 1;
 9 |   @if $exp > 0 {
10 |     @for $i from 1 through $exp {
11 |       $value: $value * $number;
12 |     }
13 |   }
14 |   @else if $exp < 0 {
15 |     @for $i from 1 through -$exp {
16 |       $value: $value / $number;
17 |     }
18 |   }
19 |   @return $value;
20 | }
21 | 
22 | @function fact($number) {
23 |   $value: 1;
24 |   @if $number > 0 {
25 |     @for $i from 1 through $number {
26 |       $value: $value * $i;
27 |     }
28 |   }
29 |   @return $value;
30 | }
31 | 
32 | @function pi() {
33 |   @return 3.14159265359;
34 | }
35 | 
36 | @function rad($angle) {
37 |   $unit: unit($angle);
38 |   $unitless: $angle / ($angle * 0 + 1);
39 |   // If the angle has 'deg' as unit, convert to radians.
40 |   @if $unit == deg {
41 |     $unitless: $unitless / 180 * pi();
42 |   }
43 |   @return $unitless;
44 | }
45 | 
46 | @function sin($angle) {
47 |   $sin: 0;
48 |   $angle: rad($angle);
49 |   // Iterate a bunch of times.
50 |   @for $i from 0 through 10 {
51 |     $sin: $sin + pow(-1, $i) * pow($angle, (2 * $i + 1)) / fact(2 * $i + 1);
52 |   }
53 |   @return $sin;
54 | }
55 | 
56 | @function cos($angle) {
57 |   $cos: 0;
58 |   $angle: rad($angle);
59 |   // Iterate a bunch of times.
60 |   @for $i from 0 through 10 {
61 |     $cos: $cos + pow(-1, $i) * pow($angle, 2 * $i) / fact(2 * $i);
62 |   }
63 |   @return $cos;
64 | }
65 | 
66 | @function tan($angle) {
67 |   @return sin($angle) / cos($angle);
68 | }
69 | 


--------------------------------------------------------------------------------
/sass/_variables.scss:
--------------------------------------------------------------------------------
 1 | // =============================================================================
 2 | // FONTS
 3 | // =============================================================================
 4 | 
 5 | $font-family--primary: "Oxygen", Helvetica, sans-serif;
 6 | 
 7 | $font-size--xsmall: 12px;
 8 | $font-size--small: 14px;
 9 | $font-size--smedium: 16px;
10 | $font-size--medium: 18px;
11 | $font-size--large: 22px;
12 | $font-size--xlarge: 28px;
13 | $font-size--xxlarge: 36px;
14 | 
15 | $font-size--ultra: 42px;
16 | $font-size--ultra-large: 48px;
17 | $font-size--ultra-xlarge: 60px;
18 | $font-size--ultra-xxlarge: 84px;
19 | 
20 | $line-height--small: 1.2;
21 | $line-height--medium: 1.8;
22 | $line-height--large: 2.2;
23 | 
24 | // =============================================================================
25 | // COLORS
26 | // =============================================================================
27 | 
28 | $color--neutral-xxdark: rgb(21, 21, 21);
29 | $color--neutral-xdark: rgb(39, 39, 39);
30 | $color--neutral-dark: rgb(59, 59, 59);
31 | $color--neutral: rgb(109, 109, 109);
32 | $color--neutral-light: rgb(129, 129, 129);
33 | $color--neutral-xlight: rgb(179, 179, 179);
34 | $color--neutral-xxlight: rgb(231, 231, 231);
35 | $color--neutral-xxxlight: rgb(241, 241, 241);
36 | 
37 | $color--blue-dark: rgb(0, 100, 140);
38 | $color--blue: rgb(40, 170, 220);
39 | $color--blue-light: rgb(70, 200, 250);
40 | 
41 | $color--theme: rgb(255, 40, 80);
42 | $color--theme-dark: darken($color--theme, 20%);
43 | $color--theme-light: lighten($color--theme, 20%);
44 | 
45 | $color--theme-alt: rgb(60, 255, 120);
46 | 
47 | // =============================================================================
48 | // BREAKPOINTS
49 | // =============================================================================
50 | 
51 | $breakpoint--small: 480px;
52 | $breakpoint--medium: 720px;
53 | $breakpoint--large: 1020px;
54 | $breakpoint--xlarge: 1200px;


--------------------------------------------------------------------------------
/sass/circle-menu.scss:
--------------------------------------------------------------------------------
  1 | @import "_circle-menu-helpers";
  2 | 
  3 | // -----------------------------------------------------------------------------
  4 | //
  5 | // Configuration
  6 | //
  7 | // Configure the variables below to override defaults. If you want to tweak any
  8 | // others, scroll through the individual sections below. More info about these
  9 | // variables can be found by reading through the section comments, bue here's
 10 | // a general rundown:
 11 | //
 12 | // 1. Set up the initial menu item radius.
 13 | // 2. Decalare how many items our menu will contain.
 14 | // 3. Set up a theme colour.
 15 | // 4. The spread radius, which is how far the menu items spread from the origin.
 16 | // 5. The delay increment, which is how much delay there is between each menu
 17 | //    item leaving from / returning to the origin.
 18 | // 6. The position of the menu, chosen from one of four values:
 19 | //        `bottom-right`   - bottom right corner (this is the default)
 20 | //        `bottom-left`    - bottom left corner
 21 | //        `top-left`       - top left corner
 22 | //        `top-right`      - top right corner
 23 | // 7. Minimum height at which menu increases size.
 24 | // 8. Minimum width at which menu increases size.
 25 | // 9. The height of a bar in the toggle button.
 26 | // 10. The spacing between bars in the toggle button.
 27 | // 11. The padding between the left and right of the toggle button container and
 28 | //     the bars.
 29 | //
 30 | // -----------------------------------------------------------------------------
 31 | 
 32 | // $menu-item-radius: 48px;                  [1]
 33 | // $num-items: 5;                            [2]
 34 | // $menu-theme-color: rgb(255, 40, 60);      [3]
 35 | // $spread-radius: 144px;                    [4]
 36 | // $delay-increment: 0.1s;                   [5]
 37 | // $menu-position: "bottom-right";           [6]
 38 | // $mq-height: 480px;                        [7]
 39 | // $mq-width: 480px;                         [8]
 40 | // $button-bar-height: 4px;                  [9]
 41 | // $button-bar-spacing: 4px;                 [10]
 42 | // $button-lr-padding: 10px;                 [11]
 43 | 
 44 | // -----------------------------------------------------------------------------
 45 | //
 46 | // Menu Items Setup
 47 | //
 48 | // Some configuration for the appearance of the menu items. These include:
 49 | //
 50 | // 1. Set up the initial menu item radius.
 51 | // 2. Calculate initial diameter as a function of the radius.
 52 | // 3. Decalare how many items our menu will contain.
 53 | // 4. Set up a theme colour - I chose pink.
 54 | //
 55 | // -----------------------------------------------------------------------------
 56 | 
 57 | $menu-item-radius: 24px !default;                 // [1]
 58 | $menu-item-diameter: $menu-item-radius*2;         // [2]
 59 | $num-items: 5 !default;                           // [3]
 60 | $menu-theme-color: rgb(255, 40, 60) !default;     // [4]
 61 | 
 62 | // -----------------------------------------------------------------------------
 63 | //
 64 | // Menu Positional & Timing Setup
 65 | //
 66 | // These variables are strictly related to position and timing of menu
 67 | // items. It's important to remember that they fly out along a spread radius,
 68 | // so the number of items combined with the delays and spread radius will
 69 | // be responsible for actually positioning the menu. Here's what is set
 70 | // up:
 71 | //
 72 | // 1. The angular increment between menu items which is a function of the number
 73 | //    of menu items.
 74 | // 2. The angle, which is initialised to the increment.
 75 | // 3. The spread radius, which is how far the menu items spread from the origin.
 76 | // 4. The delay increment, which is how much delay there is between each menu
 77 | //    item leaving from / returning to the origin.
 78 | // 5. The initial delay, which is initialised to the delay increment.
 79 | // 6. The "n minus 1 initial delay", which is the initial delay for the n-1
 80 | //    menu item.
 81 | // 7. The final delay, which is the delay of the final menu item.
 82 | //
 83 | // -----------------------------------------------------------------------------
 84 | 
 85 | $increment: 90deg/($num-items - 1);                               // [1]
 86 | $angle: $increment;                                               // [2]
 87 | $spread-radius: 144px !default;                                   // [3]
 88 | $delay-increment: 0.1s !default;                                  // [4]
 89 | $initial-delay: $delay-increment;                                 // [5]
 90 | $n-minus-1-initial-delay: ($num-items - 2) * $delay-increment;    // [6]
 91 | $final-delay: ($num-items - 1) * $delay-increment;                // [7]
 92 | 
 93 | // -----------------------------------------------------------------------------
 94 | //
 95 | // Position Mixin
 96 | //
 97 | // By default, the menu is at the bottom right corner of the screen, and items
 98 | // spread out in a quarter circle away from this point. You can change up the
 99 | // $menu-position variable to move it to any of the four corners. Here's the
100 | // available options:
101 | //
102 | // `bottom-right`   - bottom right corner (this is the default)
103 | // `bottom-left`    - bottom left corner
104 | // `top-left`       - top left corner
105 | // `top-right`      - top right corner
106 | //
107 | // The functions below will check the variable and position accordingly. They
108 | // are:
109 | //
110 | // 1. get-menu-position, which positions the menu in the correct corner
111 | // 2. translate-menu-item, which calculates the coordinates to translate menu
112 | //    items to, based on spread radius and angle.
113 | //
114 | // -----------------------------------------------------------------------------
115 | 
116 | $menu-position: "bottom-right" !default;
117 | 
118 | // [1]
119 | 
120 | @mixin get-menu-position() {
121 |   @if ($menu-position == "bottom-right") {
122 |     bottom: 12px;
123 |     right: 12px;
124 |   }
125 | 
126 |   @if ($menu-position == "bottom-left") {
127 |     bottom: 12px;
128 |     left: 12px;
129 |   }
130 | 
131 |   @if ($menu-position == "top-left") {
132 |     top: 12px;
133 |     left: 12px;
134 |   }
135 | 
136 |   @if ($menu-position == "top-right") {
137 |     top: 12px;
138 |     right: 12px;
139 |   }
140 | }
141 | 
142 | // [2]
143 | 
144 | @mixin translate-menu-item($r, $theta, $n) {
145 | 
146 |   @if ($menu-position == "bottom-right") {
147 |     @if ($n == "first") {
148 |       transform: translate(-$r, 0);
149 |     } @else if ($n == "last") {
150 |       transform: translate(0, -$r);
151 |     } @else {
152 |       transform: translate(floor(-$r * cos($theta)), floor(-$r * sin($theta)));
153 |     }
154 |   }
155 | 
156 |   @if ($menu-position == "bottom-left") {
157 |     @if ($n == "first") {
158 |       transform: translate($r, 0);
159 |     } @else if ($n == "last") {
160 |       transform: translate(0, -$r);
161 |     } @else {
162 |       transform: translate(floor($r * cos($theta)), floor(-$r * sin($theta)));
163 |     }
164 |   }
165 | 
166 |   @if ($menu-position == "top-left") {
167 |     @if ($n == "first") {
168 |       transform: translate($r, 0);
169 |     } @else if ($n == "last") {
170 |       transform: translate(0, $r);
171 |     } @else {
172 |       transform: translate(floor($r * cos($theta)), floor($r * sin($theta)));
173 |     }
174 |   }
175 | 
176 |   @if ($menu-position == "top-right") {
177 |     @if ($n == "first") {
178 |       transform: translate(-$r, 0);
179 |     } @else if ($n == "last") {
180 |       transform: translate(0, $r);
181 |     } @else {
182 |       transform: translate(floor(-$r * cos($theta)), floor($r * sin($theta)));
183 |     }
184 |   }
185 | 
186 | }
187 | 
188 | // -----------------------------------------------------------------------------
189 | //
190 | // Toggle Switch Setup
191 | // https://github.com/callmenick/Animating-Hamburger-Icons
192 | //
193 | // Set up some initial configuration variables for the toggle switch. The
194 | // following variables are set:
195 | //
196 | // 1. The initial height of a bar.
197 | // 2. The initial spacing in between bars.
198 | // 3. The left and right padding of the bars.
199 | //
200 | // -----------------------------------------------------------------------------
201 | 
202 | $button-bar-height: 4px !default;     // [1]
203 | $button-bar-spacing: 4px !default;    // [2]
204 | $button-lr-padding: 10px !default;    // [3]
205 | 
206 | // -----------------------------------------------------------------------------
207 | //
208 | // Media Query Mixin
209 | //
210 | // This mixin is used in the actual CSS to make the menu items and spread radius
211 | // bigger beyond a certain minimum width and height. Edit the two variables
212 | // as you see fit. Variables are:
213 | //
214 | // 1. Minimum height at which menu increases size.
215 | // 2. Minimum width at which menu increases size.
216 | //
217 | // -----------------------------------------------------------------------------
218 | 
219 | $mq-height: 480px !default;
220 | $mq-width: 480px !default;
221 | 
222 | @mixin mq {
223 |   @media (min-width: #{$mq-width}) and (min-height: #{$mq-height}) {
224 |     @content;
225 |   }
226 | }
227 | 
228 | /* -----------------------------------------------------------------------------
229 | 
230 |   Circle Menu Component
231 | 
232 | ----------------------------------------------------------------------------- */
233 | 
234 | /**
235 |  * This is the actual menu component. It consists of a menu element with an
236 |  * unordered list inside, and also a button to toggle the actual menu.
237 |  * It's fixed to the bottom-right of the screen, and each of the items are
238 |  * positioned absolutely inside the parent menu tag. The default set up above is
239 |  * 5 menu items. Because all the transforms and such are calculated wrt
240 |  * this number, you'll need to edit it accordingly depending on how many items
241 |  * you decide to put in the markup.
242 |  *
243 |  * Example markup:
244 |  *
245 |  * <menu class="c-circle-menu">
246 |  *   <ul class="c-circle-menu__items">
247 |  *     <li class="c-circle-menu__item">
248 |  *       <a class="c-circle-menu__link"></a>
249 |  *     </li>
250 |  *     <li class="c-circle-menu__item">
251 |  *       <a class="c-circle-menu__link"></a>
252 |  *     </li>
253 |  *     ...
254 |  *   </ul>
255 |  * </menu>
256 |  */
257 | 
258 | .c-circle-menu {
259 |   position: fixed;
260 |   @include get-menu-position;
261 |   z-index: 1000;
262 |   width: $menu-item-diameter;
263 |   height: $menu-item-diameter;
264 |   border-radius: $menu-item-radius;
265 | 
266 |   @include mq {
267 |     width: $menu-item-diameter * 2;
268 |     height: $menu-item-diameter * 2;
269 |     border-radius: $menu-item-radius * 2;
270 |   }
271 | }
272 | 
273 | .c-circle-menu__items {
274 |   display: block;
275 |   list-style: none;
276 |   position: absolute;
277 |   z-index: 2;
278 |   margin: 0;
279 |   padding: 0;
280 | }
281 | 
282 | .c-circle-menu__item {
283 |   display: block;
284 |   position: absolute;
285 |   top: 0;
286 |   left: 0;
287 |   width: $menu-item-diameter;
288 |   height: $menu-item-diameter;
289 |   border-radius: $menu-item-radius;
290 |   opacity: 0;
291 |   transition: transform, opacity;
292 |   transition-duration: 0.3s, 0.3s;
293 |   transition-timing-function: cubic-bezier(.35, -.59, .47, .97);
294 | 
295 |   @include mq {
296 |     width: $menu-item-diameter * 2;
297 |     height: $menu-item-diameter * 2;
298 |     border-radius: $menu-item-radius * 2;
299 |   }
300 | }
301 | 
302 | /**
303 |  * Transisition delays at the default state.
304 |  */
305 | 
306 | .c-circle-menu__item:nth-child(1) {
307 |   transition-delay: $final-delay;
308 | }
309 | 
310 | @for $i from 2 through ($num-items - 1) {
311 |   .c-circle-menu__item:nth-child(#{$i}) {
312 |     transition-delay: $n-minus-1-initial-delay;
313 |   }
314 |   $n-minus-1-initial-delay: $n-minus-1-initial-delay - $delay-increment;
315 | }
316 | 
317 | .c-circle-menu__item:nth-child(#{$num-items}) {
318 |   transition-delay: 0s;
319 | }
320 | 
321 | /**
322 |  * We're using the .is-active class, which is added to the menu via JavaScript.
323 |  * Once the menu is active, the items inherit the properties below. We will
324 |  * manually write out the transform properties for first and last items, as we
325 |  * already know their position. For all items in between though, we'll use some
326 |  * polar-to-cartesian math and some Sass functions to get the positioning.
327 |  */
328 | 
329 | .c-circle-menu.is-active .c-circle-menu__item {
330 |   transition-timing-function: cubic-bezier(.35, .03, .47, 1.59);
331 | }
332 | 
333 | .c-circle-menu.is-active .c-circle-menu__item:nth-child(1) {
334 |   transition-delay: 0s;
335 |   @include translate-menu-item($spread-radius, 0, "first");
336 | 
337 |   @include mq {
338 |     @include translate-menu-item($spread-radius * 2, 0deg, "first");
339 |   }
340 | }
341 | 
342 | @for $i from 2 through ($num-items - 1) {
343 |   .c-circle-menu.is-active .c-circle-menu__item:nth-child(#{$i}) {
344 |     transition-delay: $initial-delay;
345 |     @include translate-menu-item($spread-radius, $angle, "");
346 | 
347 |     @include mq {
348 |       @include translate-menu-item($spread-radius * 2, $angle, "");
349 |     }
350 |   }
351 |   $initial-delay: $initial-delay + $delay-increment;
352 |   $angle: $angle + $increment;
353 | }
354 | 
355 | .c-circle-menu.is-active .c-circle-menu__item:nth-child(#{$num-items}) {
356 |   transition-delay: $final-delay;
357 |   @include translate-menu-item($spread-radius, 90deg, "last");
358 | 
359 |   @include mq {
360 |     @include translate-menu-item($spread-radius * 2, 90deg, "last");
361 |   }
362 | }
363 | 
364 | /**
365 |  * Apart from the transform properties, we'll also make sure the items get
366 |  * the correct opacity.
367 |  */
368 | 
369 | .c-circle-menu.is-active .c-circle-menu__item {
370 |   opacity: 1;
371 | }
372 | 
373 | /**
374 |  * Let's style the links now. This is just boilerplate stuff, and of course,
375 |  * you'll probably want to change up the icons to match your needs. In any case,
376 |  * we'll do it here for the sake of completion.
377 |  */
378 | 
379 | .c-circle-menu__link {
380 |   display: block;
381 |   width: 100%;
382 |   height: 100%;
383 |   border-radius: $menu-item-radius;
384 |   box-shadow: inset 0 0 0 2px #fff;
385 | 
386 |   @include mq {
387 |     border-radius: $menu-item-radius * 2;
388 |   }
389 | }
390 | 
391 | .c-circle-menu__link img {
392 |   display: block;
393 |   max-width: 100%;
394 |   height: auto;
395 | }
396 | 
397 | .c-circle-menu__link:hover {
398 |   box-shadow: inset 0 0 0 2px $menu-theme-color;
399 | }
400 | 
401 | /* -----------------------------------------------------------------------------
402 | 
403 |   The Toggle Component
404 | 
405 | ----------------------------------------------------------------------------- */
406 | 
407 | /**
408 |  * The toggle is a button element, and as such requires some resets that are
409 |  * unique to buttons. This button also inherits some funky stuff from my
410 |  * CSS animating hamburger menu icons demo, which can be found at this url:
411 |  * https://github.com/callmenick/Animating-Hamburger-Icons
412 |  */
413 | 
414 | .c-circle-menu__toggle {
415 |   display: block;
416 |   position: absolute;
417 |   z-index: 100;
418 |   margin: 0;
419 |   padding: 0;
420 |   width: $menu-item-diameter;
421 |   height: $menu-item-diameter;
422 |   background-color: $menu-theme-color;
423 |   font: inherit;
424 |   font-size: 0;
425 |   text-indent: -9999px;
426 |   border-radius: $menu-item-radius;
427 |   transition: background 0.3s;
428 | 
429 |   /* reset some browser defaults */
430 |   cursor: pointer;
431 |   border: none;
432 |   -webkit-appearance: none;
433 |   -moz-appearance: none;
434 |   appearance: none;
435 |   box-shadow: none;
436 | 
437 |   @include mq {
438 |     width: $menu-item-diameter * 2;
439 |     height: $menu-item-diameter * 2;
440 |     border-radius: $menu-item-radius * 2;
441 |   }
442 | }
443 | 
444 | .c-circle-menu__toggle:hover,
445 | .c-circle-menu__toggle:focus,
446 | .c-circle-menu__toggle.is-active {
447 |   outline: none;
448 |   background-color: darken($menu-theme-color, 20%);
449 | }
450 | 
451 | .c-circle-menu__toggle span,
452 | .c-circle-menu__toggle span::before,
453 | .c-circle-menu__toggle span::after {
454 |   display: block;
455 |   position: absolute;
456 |   height: $button-bar-height;
457 |   background: #fff;
458 |   border-radius: $button-bar-height/4;
459 | 
460 |   @include mq {
461 |     height: $button-bar-height * 2;
462 |     border-radius: ($button-bar-height * 2)/4;
463 |   }
464 | }
465 | 
466 | .c-circle-menu__toggle span {
467 |   top: $menu-item-radius - $button-bar-height/2;
468 |   left: $button-lr-padding;
469 |   right: $button-lr-padding;
470 |   transition: background 0.3s;
471 | 
472 |   @include mq {
473 |     top: ($menu-item-radius * 2) - ($button-bar-height * 2)/2;
474 |     left: $button-lr-padding * 2;
475 |     right: $button-lr-padding * 2;
476 |   }
477 | }
478 | 
479 | .c-circle-menu__toggle span::before,
480 | .c-circle-menu__toggle span::after {
481 |   left: 0;
482 |   width: 100%;
483 |   content: "";
484 |   transition-duration: 0.3s, 0.3s;
485 |   transition-delay: 0.3s, 0s;
486 | }
487 | 
488 | .c-circle-menu__toggle span::before {
489 |   top: -$button-bar-height - $button-bar-spacing;
490 |   transition-property: top, transform;
491 | 
492 |   @include mq {
493 |     top: -($button-bar-height * 2) - ($button-bar-spacing * 2);
494 |   }
495 | }
496 | 
497 | .c-circle-menu__toggle span::after {
498 |   bottom: -$button-bar-height - $button-bar-spacing;
499 |   transition-property: bottom, transform;
500 | 
501 |   @include mq {
502 |     bottom: -($button-bar-height * 2) - ($button-bar-spacing * 2);
503 |   }
504 | }
505 | 
506 | /* button active state */
507 | 
508 | .c-circle-menu__toggle.is-active span {
509 |   background: none;
510 | }
511 | 
512 | .c-circle-menu__toggle.is-active span::before {
513 |   top: 0;
514 |   transform: rotate(45deg);
515 |   transition-delay: 0s, 0.3s;
516 | }
517 | 
518 | .c-circle-menu__toggle.is-active span::after {
519 |   bottom: 0;
520 |   transform: rotate(-45deg);
521 |   transition-delay: 0s, 0.3s;
522 | }
523 | 
524 | /* -----------------------------------------------------------------------------
525 | 
526 |   The Mask Component
527 | 
528 | ----------------------------------------------------------------------------- */
529 | 
530 | /**
531 |  * Here's the mask component, which actually gets created and inserted to the
532 |  * DOM via JavaScript. It simply acts as an overlay to draw attention to the
533 |  * menu when it is active. It also uses the .is-acvite state class.
534 |  */
535 | 
536 | .c-circle-menu__mask {
537 |   position: fixed;
538 |   top: 0;
539 |   left: 0;
540 |   z-index: 1;
541 |   visibility: hidden;
542 |   opacity: 0;
543 |   width: 100%;
544 |   height: 100%;
545 |   background-color: rgba(0, 0, 0, 0.8);
546 |   transition: opacity 0.3s, visibility 0.3s;
547 | }
548 | 
549 | .c-circle-menu__mask.is-active {
550 |   opacity: 1;
551 |   visibility: visible;
552 | }
553 | 


--------------------------------------------------------------------------------
/sass/common.scss:
--------------------------------------------------------------------------------
  1 | @import "_variables";
  2 | 
  3 | /* -----------------------------------------------------------------------------
  4 | 
  5 |   Fonts
  6 | 
  7 | ----------------------------------------------------------------------------- */
  8 | 
  9 | @font-face {
 10 |   font-family: 'Oxygen';
 11 |   font-style: normal;
 12 |   font-weight: 300;
 13 |   src: url('../fonts/oxygen/oxygen-v5-latin-300.eot');
 14 |   src: local('Oxygen Light'), local('Oxygen-Light'),
 15 |        url('../fonts/oxygen/oxygen-v5-latin-300.eot?#iefix') format('embedded-opentype'),
 16 |        url('../fonts/oxygen/oxygen-v5-latin-300.woff2') format('woff2'),
 17 |        url('../fonts/oxygen/oxygen-v5-latin-300.woff') format('woff'),
 18 |        url('../fonts/oxygen/oxygen-v5-latin-300.ttf') format('truetype'),
 19 |        url('../fonts/oxygen/oxygen-v5-latin-300.svg#Oxygen') format('svg');
 20 | }
 21 | 
 22 | @font-face {
 23 |   font-family: 'Oxygen';
 24 |   font-style: normal;
 25 |   font-weight: 400;
 26 |   src: url('../fonts/oxygen/oxygen-v5-latin-regular.eot');
 27 |   src: local('Oxygen'), local('Oxygen-Regular'),
 28 |        url('../fonts/oxygen/oxygen-v5-latin-regular.eot?#iefix') format('embedded-opentype'),
 29 |        url('../fonts/oxygen/oxygen-v5-latin-regular.woff2') format('woff2'),
 30 |        url('../fonts/oxygen/oxygen-v5-latin-regular.woff') format('woff'),
 31 |        url('../fonts/oxygen/oxygen-v5-latin-regular.ttf') format('truetype'),
 32 |        url('../fonts/oxygen/oxygen-v5-latin-regular.svg#Oxygen') format('svg');
 33 | }
 34 | 
 35 | @font-face {
 36 |   font-family: 'Oxygen';
 37 |   font-style: normal;
 38 |   font-weight: 700;
 39 |   src: url('../fonts/oxygen/oxygen-v5-latin-700.eot');
 40 |   src: local('Oxygen Bold'), local('Oxygen-Bold'),
 41 |        url('../fonts/oxygen/oxygen-v5-latin-700.eot?#iefix') format('embedded-opentype'),
 42 |        url('../fonts/oxygen/oxygen-v5-latin-700.woff2') format('woff2'),
 43 |        url('../fonts/oxygen/oxygen-v5-latin-700.woff') format('woff'),
 44 |        url('../fonts/oxygen/oxygen-v5-latin-700.ttf') format('truetype'),
 45 |        url('../fonts/oxygen/oxygen-v5-latin-700.svg#Oxygen') format('svg');
 46 | }
 47 | 
 48 | /* -----------------------------------------------------------------------------
 49 | 
 50 |   Root
 51 | 
 52 | ----------------------------------------------------------------------------- */
 53 | 
 54 | *,
 55 | *::before,
 56 | *::after {
 57 |   box-sizing: inherit;
 58 | }
 59 | 
 60 | html {
 61 |   box-sizing: border-box;
 62 | }
 63 | 
 64 | html,
 65 | body {
 66 |   margin: 0;
 67 |   padding: 0;
 68 |   height: 100%;
 69 | }
 70 | 
 71 | body {
 72 |   color: $color--neutral;
 73 |   background-color: rgb(39, 39, 39);
 74 |   font-family: $font-family--primary;
 75 |   font-size: $font-size--small;
 76 |   line-height: $line-height--medium;
 77 | }
 78 | 
 79 | /* -----------------------------------------------------------------------------
 80 | 
 81 |   Headings
 82 | 
 83 | ----------------------------------------------------------------------------- */
 84 | 
 85 | h1,
 86 | h2,
 87 | h3,
 88 | h4,
 89 | h5,
 90 | h6 {
 91 |   color: $color--neutral-dark;
 92 |   font-weight: 700;
 93 |   line-height: $line-height--small;
 94 | }
 95 | 
 96 | /* -----------------------------------------------------------------------------
 97 | 
 98 |   Links
 99 | 
100 | ----------------------------------------------------------------------------- */
101 | 
102 | a {
103 |   color: $color--theme;
104 |   text-decoration: none;
105 | }
106 | 
107 | a:hover {
108 |   color: $color--theme-dark;
109 | }
110 | 
111 | /* -----------------------------------------------------------------------------
112 | 
113 |   Text Stuff
114 | 
115 | ----------------------------------------------------------------------------- */
116 | 
117 | b,
118 | strong {
119 |   font-weight: 700;
120 | }
121 | 
122 | i,
123 | em {
124 |   font-style: italic;
125 | }
126 | 
127 | /* -----------------------------------------------------------------------------
128 | 
129 |   Embedded Content
130 | 
131 | ----------------------------------------------------------------------------- */
132 | 
133 | img {
134 |   max-width: 100%;
135 |   height: auto;
136 | }
137 | 
138 | /* -----------------------------------------------------------------------------
139 | 
140 |   Primary Layout
141 | 
142 | ----------------------------------------------------------------------------- */
143 | 
144 | .container {
145 |   margin: 0 auto;
146 |   padding: 0 24px;
147 |   max-width: 960px;
148 | }
149 | 
150 | @media all and (min-width: $breakpoint--small) {
151 |   .container {
152 |     padding: 0 24px;
153 |   }
154 | }
155 | 
156 | @media all and (min-width: $breakpoint--medium) {
157 |   .container {
158 |     padding: 0 48px;
159 |   }
160 | }
161 | 
162 | /* -----------------------------------------------------------------------------
163 | 
164 |   Demo Header
165 | 
166 | ----------------------------------------------------------------------------- */
167 | 
168 | .demo-header {
169 |   margin: 0;
170 |   padding: 0;
171 | }
172 | 
173 | .demo-header-nav {
174 |   display: flex;
175 |   justify-content: space-between;
176 |   background-color: $color--theme;
177 | }
178 | 
179 | .demo-header-nav__link {
180 |   padding: 12px;
181 |   color: #fff;
182 | }
183 | 
184 | .demo-header-nav__link:hover {
185 |   color: #fff;
186 |   background-color: $color--theme-dark;
187 | }
188 | 
189 | .demo-header__title {
190 |   margin: 24px;
191 |   padding: 0;
192 |   color: #fff;
193 |   font-size: $font-size--xlarge;
194 |   font-weight: 300;
195 |   text-align: center;
196 | }
197 | 
198 | @media all and (min-width: $breakpoint--small) {
199 |   .demo-header__title {
200 |     margin: 36px;
201 |     font-size: $font-size--ultra;
202 |   }
203 | }
204 | 
205 | /* -----------------------------------------------------------------------------
206 | 
207 |   Demo Content
208 | 
209 | ----------------------------------------------------------------------------- */
210 | 
211 | .leader-text {
212 |   color: $color--neutral-xlight;
213 |   font-size: $font-size--medium;
214 |   font-weight: 300;
215 | }
216 | 
217 | @media all and (min-width: $breakpoint--small) {
218 |   .leader-text {
219 |     font-size: $font-size--large;
220 |   }
221 | }
222 | 
223 | /* -----------------------------------------------------------------------------
224 | 
225 |   Demo Sub Nav
226 | 
227 | ----------------------------------------------------------------------------- */
228 | 
229 | .demo-sub-nav {
230 |   margin: 0 0 24px 0;
231 |   padding: 0;
232 | }
233 | 
234 | .demo-sub-nav__items {
235 |   display: flex;
236 |   flex-flow: row wrap;
237 |   justify-content: center;
238 |   list-style: none;
239 |   margin: 0;
240 |   padding: 0;
241 | }
242 | 
243 | .demo-sub-nav__item {
244 |   margin: 0;
245 |   padding: 4px;
246 | }
247 | 
248 | .demo-sub-nav__link {
249 |   display: block;
250 |   margin: 0;
251 |   padding: 4px 24px;
252 |   border: solid 2px $color--theme;
253 | }
254 | 
255 | .demo-sub-nav__link:hover,
256 | .demo-sub-nav__item.active .demo-sub-nav__link {
257 |   color: #fff;
258 |   background-color: $color--theme;
259 | }
260 | 
261 | @media all and (min-width: $breakpoint--medium) {
262 |   .demo-sub-nav {
263 |     margin: 0 0 48px 0;
264 |   }
265 | }
266 | 
267 | /* -----------------------------------------------------------------------------
268 | 
269 |   Demo Footer
270 | 
271 | ----------------------------------------------------------------------------- */
272 | 
273 | .demo-footer {
274 |   padding: 12px 0;
275 |   text-align: center;
276 | }
277 | 
278 | @media all and (min-width: $breakpoint--small) {
279 |   .demo-footer {
280 |     padding: 24px 0;
281 |   }
282 | }
283 | 
284 | @media all and (min-width: $breakpoint--medium) {
285 |   .demo-footer {
286 |     padding: 48px 0;
287 |   }
288 | }
289 | 
290 | /* -----------------------------------------------------------------------------
291 | 
292 |   Carbon Ad
293 | 
294 | ----------------------------------------------------------------------------- */
295 | 
296 | #carbonads {
297 |   position: fixed;
298 |   bottom: 12px; left: 12px;
299 |   z-index: 1000;
300 |   padding: 24px 12px 12px 12px;
301 |   width: 154px;
302 |   background-color: #fff;
303 |   line-height: 1.1;
304 |   border: solid 1px $color--neutral-xxlight;
305 | }
306 | 
307 | .carbon-wrap {
308 |   display: block;
309 |   margin: 0 0 4px 0;
310 | }
311 | 
312 | .carbon-img {
313 |   display: block;
314 |   margin: 0 0 4px 0;
315 |   padding: 0;
316 |   width: 130px;
317 |   height: 100px;
318 | }
319 | 
320 | .carbon-text {
321 |   color: rgb(129,129,129);
322 |   font-size: 12px;
323 | }
324 | 
325 | .carbon-poweredby {
326 |   font-size: 10px;
327 |   font-style: italic;
328 | }
329 | 
330 | .carbonad__close {
331 |   display: block;
332 |   position: absolute;
333 |   top: 0;
334 |   left: 12px;
335 |   height: 24px;
336 |   font-size: 11px;
337 |   line-height: 24px;
338 | }
339 | 
340 | @media all and (max-width: 660px) {
341 |   #carbonads {
342 |     display: none;
343 |   }
344 | }
345 | 


--------------------------------------------------------------------------------