@charset "UTF-8";
/*!
 *  Font Awesome 4.5.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */
/* FONT PATH
 * -------------------------- */
@font-face {
  font-family: 'FontAwesome';
  src: url("../../fonts/fontawesome-webfont3295.eot?v=4.5.0");
  src: url("../../fonts/fontawesome-webfontd41d.eot?#iefix&v=4.5.0") format("embedded-opentype"), url("../../fonts/fontawesome-webfont3295.woff2?v=4.5.0") format("woff2"), url("../../fonts/fontawesome-webfont3295.woff?v=4.5.0") format("woff"), url("../../fonts/fontawesome-webfont3295.ttf?v=4.5.0") format("truetype"), url("../../fonts/fontawesome-webfont3295.svg?v=4.5.0#fontawesomeregular") format("svg");
  font-weight: normal;
  font-style: normal; }

.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

/* makes the font 33% larger relative to the icon container */
.fa-lg {
  font-size: 1.3333333333em;
  line-height: 0.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.2857142857em;
  text-align: center; }

.fa-ul {
  padding-left: 0;
  margin-left: 2.1428571429em;
  list-style-type: none; }
  .fa-ul > li {
    position: relative; }

.fa-li {
  position: absolute;
  left: -2.1428571429em;
  width: 2.1428571429em;
  top: 0.1428571429em;
  text-align: center; }
  .fa-li.fa-lg {
    left: -1.8571428571em; }

.fa-border {
  padding: .2em .25em .15em;
  border: solid 0.08em #eee;
  border-radius: .1em; }

.fa-pull-left {
  float: left; }

.fa-pull-right {
  float: right; }

.fa.fa-pull-left {
  margin-right: .3em; }

.fa.fa-pull-right {
  margin-left: .3em; }

/* Deprecated as of 4.4.0 */
.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(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg); } }

@keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  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);
  -webkit-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1); }

.fa-flip-vertical {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  -webkit-transform: scale(1, -1);
  -ms-transform: scale(1, -1);
  transform: scale(1, -1); }

:root .fa-rotate-90,
:root .fa-rotate-180,
:root .fa-rotate-270,
:root .fa-flip-horizontal,
:root .fa-flip-vertical {
  filter: none; }

.fa-stack {
  position: relative;
  display: inline-block;
  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; }

/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
   readers do not read off random characters that represent icons */
.fa-glass:before {
  content: ""; }

.fa-music:before {
  content: ""; }

.fa-search:before {
  content: ""; }

.fa-envelope-o:before {
  content: ""; }

.fa-heart:before {
  content: ""; }

.fa-star:before {
  content: ""; }

.fa-star-o:before {
  content: ""; }

.fa-user:before {
  content: ""; }

.fa-film:before {
  content: ""; }

.fa-th-large:before {
  content: ""; }

.fa-th:before {
  content: ""; }

.fa-th-list:before {
  content: ""; }

.fa-check:before {
  content: ""; }

.fa-remove:before,
.fa-close:before,
.fa-times:before {
  content: ""; }

.fa-search-plus:before {
  content: ""; }

.fa-search-minus:before {
  content: ""; }

.fa-power-off:before {
  content: ""; }

.fa-signal:before {
  content: ""; }

.fa-gear:before,
.fa-cog:before {
  content: ""; }

.fa-trash-o:before {
  content: ""; }

.fa-home:before {
  content: ""; }

.fa-file-o:before {
  content: ""; }

.fa-clock-o:before {
  content: ""; }

.fa-road:before {
  content: ""; }

.fa-download:before {
  content: ""; }

.fa-arrow-circle-o-down:before {
  content: ""; }

.fa-arrow-circle-o-up:before {
  content: ""; }

.fa-inbox:before {
  content: ""; }

.fa-play-circle-o:before {
  content: ""; }

.fa-rotate-right:before,
.fa-repeat:before {
  content: ""; }

.fa-refresh:before {
  content: ""; }

.fa-list-alt:before {
  content: ""; }

.fa-lock:before {
  content: ""; }

.fa-flag:before {
  content: ""; }

.fa-headphones:before {
  content: ""; }

.fa-volume-off:before {
  content: ""; }

.fa-volume-down:before {
  content: ""; }

.fa-volume-up:before {
  content: ""; }

.fa-qrcode:before {
  content: ""; }

.fa-barcode:before {
  content: ""; }

.fa-tag:before {
  content: ""; }

.fa-tags:before {
  content: ""; }

.fa-book:before {
  content: ""; }

.fa-bookmark:before {
  content: ""; }

.fa-print:before {
  content: ""; }

.fa-camera:before {
  content: ""; }

.fa-font:before {
  content: ""; }

.fa-bold:before {
  content: ""; }

.fa-italic:before {
  content: ""; }

.fa-text-height:before {
  content: ""; }

.fa-text-width:before {
  content: ""; }

.fa-align-left:before {
  content: ""; }

.fa-align-center:before {
  content: ""; }

.fa-align-right:before {
  content: ""; }

.fa-align-justify:before {
  content: ""; }

.fa-list:before {
  content: ""; }

.fa-dedent:before,
.fa-outdent:before {
  content: ""; }

.fa-indent:before {
  content: ""; }

.fa-video-camera:before {
  content: ""; }

.fa-photo:before,
.fa-image:before,
.fa-picture-o:before {
  content: ""; }

.fa-pencil:before {
  content: ""; }

.fa-map-marker:before {
  content: ""; }

.fa-adjust:before {
  content: ""; }

.fa-tint:before {
  content: ""; }

.fa-edit:before,
.fa-pencil-square-o:before {
  content: ""; }

.fa-share-square-o:before {
  content: ""; }

.fa-check-square-o:before {
  content: ""; }

.fa-arrows:before {
  content: ""; }

.fa-step-backward:before {
  content: ""; }

.fa-fast-backward:before {
  content: ""; }

.fa-backward:before {
  content: ""; }

.fa-play:before {
  content: ""; }

.fa-pause:before {
  content: ""; }

.fa-stop:before {
  content: ""; }

.fa-forward:before {
  content: ""; }

.fa-fast-forward:before {
  content: ""; }

.fa-step-forward:before {
  content: ""; }

.fa-eject:before {
  content: ""; }

.fa-chevron-left:before {
  content: ""; }

.fa-chevron-right:before {
  content: ""; }

.fa-plus-circle:before {
  content: ""; }

.fa-minus-circle:before {
  content: ""; }

.fa-times-circle:before {
  content: ""; }

.fa-check-circle:before {
  content: ""; }

.fa-question-circle:before {
  content: ""; }

.fa-info-circle:before {
  content: ""; }

.fa-crosshairs:before {
  content: ""; }

.fa-times-circle-o:before {
  content: ""; }

.fa-check-circle-o:before {
  content: ""; }

.fa-ban:before {
  content: ""; }

.fa-arrow-left:before {
  content: ""; }

.fa-arrow-right:before {
  content: ""; }

.fa-arrow-up:before {
  content: ""; }

.fa-arrow-down:before {
  content: ""; }

.fa-mail-forward:before,
.fa-share:before {
  content: ""; }

.fa-expand:before {
  content: ""; }

.fa-compress:before {
  content: ""; }

.fa-plus:before {
  content: ""; }

.fa-minus:before {
  content: ""; }

.fa-asterisk:before {
  content: ""; }

.fa-exclamation-circle:before {
  content: ""; }

.fa-gift:before {
  content: ""; }

.fa-leaf:before {
  content: ""; }

.fa-fire:before {
  content: ""; }

.fa-eye:before {
  content: ""; }

.fa-eye-slash:before {
  content: ""; }

.fa-warning:before,
.fa-exclamation-triangle:before {
  content: ""; }

.fa-plane:before {
  content: ""; }

.fa-calendar:before {
  content: ""; }

.fa-random:before {
  content: ""; }

.fa-comment:before {
  content: ""; }

.fa-magnet:before {
  content: ""; }

.fa-chevron-up:before {
  content: ""; }

.fa-chevron-down:before {
  content: ""; }

.fa-retweet:before {
  content: ""; }

.fa-shopping-cart:before {
  content: ""; }

.fa-folder:before {
  content: ""; }

.fa-folder-open:before {
  content: ""; }

.fa-arrows-v:before {
  content: ""; }

.fa-arrows-h:before {
  content: ""; }

.fa-bar-chart-o:before,
.fa-bar-chart:before {
  content: ""; }

.fa-twitter-square:before {
  content: ""; }

.fa-facebook-square:before {
  content: ""; }

.fa-camera-retro:before {
  content: ""; }

.fa-key:before {
  content: ""; }

.fa-gears:before,
.fa-cogs:before {
  content: ""; }

.fa-comments:before {
  content: ""; }

.fa-thumbs-o-up:before {
  content: ""; }

.fa-thumbs-o-down:before {
  content: ""; }

.fa-star-half:before {
  content: ""; }

.fa-heart-o:before {
  content: ""; }

.fa-sign-out:before {
  content: ""; }

.fa-linkedin-square:before {
  content: ""; }

.fa-thumb-tack:before {
  content: ""; }

.fa-external-link:before {
  content: ""; }

.fa-sign-in:before {
  content: ""; }

.fa-trophy:before {
  content: ""; }

.fa-github-square:before {
  content: ""; }

.fa-upload:before {
  content: ""; }

.fa-lemon-o:before {
  content: ""; }

.fa-phone:before {
  content: ""; }

.fa-square-o:before {
  content: ""; }

.fa-bookmark-o:before {
  content: ""; }

.fa-phone-square:before {
  content: ""; }

.fa-twitter:before {
  content: ""; }

.fa-facebook-f:before,
.fa-facebook:before {
  content: ""; }

.fa-github:before {
  content: ""; }

.fa-unlock:before {
  content: ""; }

.fa-credit-card:before {
  content: ""; }

.fa-feed:before,
.fa-rss:before {
  content: ""; }

.fa-hdd-o:before {
  content: ""; }

.fa-bullhorn:before {
  content: ""; }

.fa-bell:before {
  content: ""; }

.fa-certificate:before {
  content: ""; }

.fa-hand-o-right:before {
  content: ""; }

.fa-hand-o-left:before {
  content: ""; }

.fa-hand-o-up:before {
  content: ""; }

.fa-hand-o-down:before {
  content: ""; }

.fa-arrow-circle-left:before {
  content: ""; }

.fa-arrow-circle-right:before {
  content: ""; }

.fa-arrow-circle-up:before {
  content: ""; }

.fa-arrow-circle-down:before {
  content: ""; }

.fa-globe:before {
  content: ""; }

.fa-wrench:before {
  content: ""; }

.fa-tasks:before {
  content: ""; }

.fa-filter:before {
  content: ""; }

.fa-briefcase:before {
  content: ""; }

.fa-arrows-alt:before {
  content: ""; }

.fa-group:before,
.fa-users:before {
  content: ""; }

.fa-chain:before,
.fa-link:before {
  content: ""; }

.fa-cloud:before {
  content: ""; }

.fa-flask:before {
  content: ""; }

.fa-cut:before,
.fa-scissors:before {
  content: ""; }

.fa-copy:before,
.fa-files-o:before {
  content: ""; }

.fa-paperclip:before {
  content: ""; }

.fa-save:before,
.fa-floppy-o:before {
  content: ""; }

.fa-square:before {
  content: ""; }

.fa-navicon:before,
.fa-reorder:before,
.fa-bars:before {
  content: ""; }

.fa-list-ul:before {
  content: ""; }

.fa-list-ol:before {
  content: ""; }

.fa-strikethrough:before {
  content: ""; }

.fa-underline:before {
  content: ""; }

.fa-table:before {
  content: ""; }

.fa-magic:before {
  content: ""; }

.fa-truck:before {
  content: ""; }

.fa-pinterest:before {
  content: ""; }

.fa-pinterest-square:before {
  content: ""; }

.fa-google-plus-square:before {
  content: ""; }

.fa-google-plus:before {
  content: ""; }

.fa-money:before {
  content: ""; }

.fa-caret-down:before {
  content: ""; }

.fa-caret-up:before {
  content: ""; }

.fa-caret-left:before {
  content: ""; }

.fa-caret-right:before {
  content: ""; }

.fa-columns:before {
  content: ""; }

.fa-unsorted:before,
.fa-sort:before {
  content: ""; }

.fa-sort-down:before,
.fa-sort-desc:before {
  content: ""; }

.fa-sort-up:before,
.fa-sort-asc:before {
  content: ""; }

.fa-envelope:before {
  content: ""; }

.fa-linkedin:before {
  content: ""; }

.fa-rotate-left:before,
.fa-undo:before {
  content: ""; }

.fa-legal:before,
.fa-gavel:before {
  content: ""; }

.fa-dashboard:before,
.fa-tachometer:before {
  content: ""; }

.fa-comment-o:before {
  content: ""; }

.fa-comments-o:before {
  content: ""; }

.fa-flash:before,
.fa-bolt:before {
  content: ""; }

.fa-sitemap:before {
  content: ""; }

.fa-umbrella:before {
  content: ""; }

.fa-paste:before,
.fa-clipboard:before {
  content: ""; }

.fa-lightbulb-o:before {
  content: ""; }

.fa-exchange:before {
  content: ""; }

.fa-cloud-download:before {
  content: ""; }

.fa-cloud-upload:before {
  content: ""; }

.fa-user-md:before {
  content: ""; }

.fa-stethoscope:before {
  content: ""; }

.fa-suitcase:before {
  content: ""; }

.fa-bell-o:before {
  content: ""; }

.fa-coffee:before {
  content: ""; }

.fa-cutlery:before {
  content: ""; }

.fa-file-text-o:before {
  content: ""; }

.fa-building-o:before {
  content: ""; }

.fa-hospital-o:before {
  content: ""; }

.fa-ambulance:before {
  content: ""; }

.fa-medkit:before {
  content: ""; }

.fa-fighter-jet:before {
  content: ""; }

.fa-beer:before {
  content: ""; }

.fa-h-square:before {
  content: ""; }

.fa-plus-square:before {
  content: ""; }

.fa-angle-double-left:before {
  content: ""; }

.fa-angle-double-right:before {
  content: ""; }

.fa-angle-double-up:before {
  content: ""; }

.fa-angle-double-down:before {
  content: ""; }

.fa-angle-left:before {
  content: ""; }

.fa-angle-right:before {
  content: ""; }

.fa-angle-up:before {
  content: ""; }

.fa-angle-down:before {
  content: ""; }

.fa-desktop:before {
  content: ""; }

.fa-laptop:before {
  content: ""; }

.fa-tablet:before {
  content: ""; }

.fa-mobile-phone:before,
.fa-mobile:before {
  content: ""; }

.fa-circle-o:before {
  content: ""; }

.fa-quote-left:before {
  content: ""; }

.fa-quote-right:before {
  content: ""; }

.fa-spinner:before {
  content: ""; }

.fa-circle:before {
  content: ""; }

.fa-mail-reply:before,
.fa-reply:before {
  content: ""; }

.fa-github-alt:before {
  content: ""; }

.fa-folder-o:before {
  content: ""; }

.fa-folder-open-o:before {
  content: ""; }

.fa-smile-o:before {
  content: ""; }

.fa-frown-o:before {
  content: ""; }

.fa-meh-o:before {
  content: ""; }

.fa-gamepad:before {
  content: ""; }

.fa-keyboard-o:before {
  content: ""; }

.fa-flag-o:before {
  content: ""; }

.fa-flag-checkered:before {
  content: ""; }

.fa-terminal:before {
  content: ""; }

.fa-code:before {
  content: ""; }

.fa-mail-reply-all:before,
.fa-reply-all:before {
  content: ""; }

.fa-star-half-empty:before,
.fa-star-half-full:before,
.fa-star-half-o:before {
  content: ""; }

.fa-location-arrow:before {
  content: ""; }

.fa-crop:before {
  content: ""; }

.fa-code-fork:before {
  content: ""; }

.fa-unlink:before,
.fa-chain-broken:before {
  content: ""; }

.fa-question:before {
  content: ""; }

.fa-info:before {
  content: ""; }

.fa-exclamation:before {
  content: ""; }

.fa-superscript:before {
  content: ""; }

.fa-subscript:before {
  content: ""; }

.fa-eraser:before {
  content: ""; }

.fa-puzzle-piece:before {
  content: ""; }

.fa-microphone:before {
  content: ""; }

.fa-microphone-slash:before {
  content: ""; }

.fa-shield:before {
  content: ""; }

.fa-calendar-o:before {
  content: ""; }

.fa-fire-extinguisher:before {
  content: ""; }

.fa-rocket:before {
  content: ""; }

.fa-maxcdn:before {
  content: ""; }

.fa-chevron-circle-left:before {
  content: ""; }

.fa-chevron-circle-right:before {
  content: ""; }

.fa-chevron-circle-up:before {
  content: ""; }

.fa-chevron-circle-down:before {
  content: ""; }

.fa-html5:before {
  content: ""; }

.fa-css3:before {
  content: ""; }

.fa-anchor:before {
  content: ""; }

.fa-unlock-alt:before {
  content: ""; }

.fa-bullseye:before {
  content: ""; }

.fa-ellipsis-h:before {
  content: ""; }

.fa-ellipsis-v:before {
  content: ""; }

.fa-rss-square:before {
  content: ""; }

.fa-play-circle:before {
  content: ""; }

.fa-ticket:before {
  content: ""; }

.fa-minus-square:before {
  content: ""; }

.fa-minus-square-o:before {
  content: ""; }

.fa-level-up:before {
  content: ""; }

.fa-level-down:before {
  content: ""; }

.fa-check-square:before {
  content: ""; }

.fa-pencil-square:before {
  content: ""; }

.fa-external-link-square:before {
  content: ""; }

.fa-share-square:before {
  content: ""; }

.fa-compass:before {
  content: ""; }

.fa-toggle-down:before,
.fa-caret-square-o-down:before {
  content: ""; }

.fa-toggle-up:before,
.fa-caret-square-o-up:before {
  content: ""; }

.fa-toggle-right:before,
.fa-caret-square-o-right:before {
  content: ""; }

.fa-euro:before,
.fa-eur:before {
  content: ""; }

.fa-gbp:before {
  content: ""; }

.fa-dollar:before,
.fa-usd:before {
  content: ""; }

.fa-rupee:before,
.fa-inr:before {
  content: ""; }

.fa-cny:before,
.fa-rmb:before,
.fa-yen:before,
.fa-jpy:before {
  content: ""; }

.fa-ruble:before,
.fa-rouble:before,
.fa-rub:before {
  content: ""; }

.fa-won:before,
.fa-krw:before {
  content: ""; }

.fa-bitcoin:before,
.fa-btc:before {
  content: ""; }

.fa-file:before {
  content: ""; }

.fa-file-text:before {
  content: ""; }

.fa-sort-alpha-asc:before {
  content: ""; }

.fa-sort-alpha-desc:before {
  content: ""; }

.fa-sort-amount-asc:before {
  content: ""; }

.fa-sort-amount-desc:before {
  content: ""; }

.fa-sort-numeric-asc:before {
  content: ""; }

.fa-sort-numeric-desc:before {
  content: ""; }

.fa-thumbs-up:before {
  content: ""; }

.fa-thumbs-down:before {
  content: ""; }

.fa-youtube-square:before {
  content: ""; }

.fa-youtube:before {
  content: ""; }

.fa-xing:before {
  content: ""; }

.fa-xing-square:before {
  content: ""; }

.fa-youtube-play:before {
  content: ""; }

.fa-dropbox:before {
  content: ""; }

.fa-stack-overflow:before {
  content: ""; }

.fa-instagram:before {
  content: ""; }

.fa-flickr:before {
  content: ""; }

.fa-adn:before {
  content: ""; }

.fa-bitbucket:before {
  content: ""; }

.fa-bitbucket-square:before {
  content: ""; }

.fa-tumblr:before {
  content: ""; }

.fa-tumblr-square:before {
  content: ""; }

.fa-long-arrow-down:before {
  content: ""; }

.fa-long-arrow-up:before {
  content: ""; }

.fa-long-arrow-left:before {
  content: ""; }

.fa-long-arrow-right:before {
  content: ""; }

.fa-apple:before {
  content: ""; }

.fa-windows:before {
  content: ""; }

.fa-android:before {
  content: ""; }

.fa-linux:before {
  content: ""; }

.fa-dribbble:before {
  content: ""; }

.fa-skype:before {
  content: ""; }

.fa-foursquare:before {
  content: ""; }

.fa-trello:before {
  content: ""; }

.fa-female:before {
  content: ""; }

.fa-male:before {
  content: ""; }

.fa-gittip:before,
.fa-gratipay:before {
  content: ""; }

.fa-sun-o:before {
  content: ""; }

.fa-moon-o:before {
  content: ""; }

.fa-archive:before {
  content: ""; }

.fa-bug:before {
  content: ""; }

.fa-vk:before {
  content: ""; }

.fa-weibo:before {
  content: ""; }

.fa-renren:before {
  content: ""; }

.fa-pagelines:before {
  content: ""; }

.fa-stack-exchange:before {
  content: ""; }

.fa-arrow-circle-o-right:before {
  content: ""; }

.fa-arrow-circle-o-left:before {
  content: ""; }

.fa-toggle-left:before,
.fa-caret-square-o-left:before {
  content: ""; }

.fa-dot-circle-o:before {
  content: ""; }

.fa-wheelchair:before {
  content: ""; }

.fa-vimeo-square:before {
  content: ""; }

.fa-turkish-lira:before,
.fa-try:before {
  content: ""; }

.fa-plus-square-o:before {
  content: ""; }

.fa-space-shuttle:before {
  content: ""; }

.fa-slack:before {
  content: ""; }

.fa-envelope-square:before {
  content: ""; }

.fa-wordpress:before {
  content: ""; }

.fa-openid:before {
  content: ""; }

.fa-institution:before,
.fa-bank:before,
.fa-university:before {
  content: ""; }

.fa-mortar-board:before,
.fa-graduation-cap:before {
  content: ""; }

.fa-yahoo:before {
  content: ""; }

.fa-google:before {
  content: ""; }

.fa-reddit:before {
  content: ""; }

.fa-reddit-square:before {
  content: ""; }

.fa-stumbleupon-circle:before {
  content: ""; }

.fa-stumbleupon:before {
  content: ""; }

.fa-delicious:before {
  content: ""; }

.fa-digg:before {
  content: ""; }

.fa-pied-piper:before {
  content: ""; }

.fa-pied-piper-alt:before {
  content: ""; }

.fa-drupal:before {
  content: ""; }

.fa-joomla:before {
  content: ""; }

.fa-language:before {
  content: ""; }

.fa-fax:before {
  content: ""; }

.fa-building:before {
  content: ""; }

.fa-child:before {
  content: ""; }

.fa-paw:before {
  content: ""; }

.fa-spoon:before {
  content: ""; }

.fa-cube:before {
  content: ""; }

.fa-cubes:before {
  content: ""; }

.fa-behance:before {
  content: ""; }

.fa-behance-square:before {
  content: ""; }

.fa-steam:before {
  content: ""; }

.fa-steam-square:before {
  content: ""; }

.fa-recycle:before {
  content: ""; }

.fa-automobile:before,
.fa-car:before {
  content: ""; }

.fa-cab:before,
.fa-taxi:before {
  content: ""; }

.fa-tree:before {
  content: ""; }

.fa-spotify:before {
  content: ""; }

.fa-deviantart:before {
  content: ""; }

.fa-soundcloud:before {
  content: ""; }

.fa-database:before {
  content: ""; }

.fa-file-pdf-o:before {
  content: ""; }

.fa-file-word-o:before {
  content: ""; }

.fa-file-excel-o:before {
  content: ""; }

.fa-file-powerpoint-o:before {
  content: ""; }

.fa-file-photo-o:before,
.fa-file-picture-o:before,
.fa-file-image-o:before {
  content: ""; }

.fa-file-zip-o:before,
.fa-file-archive-o:before {
  content: ""; }

.fa-file-sound-o:before,
.fa-file-audio-o:before {
  content: ""; }

.fa-file-movie-o:before,
.fa-file-video-o:before {
  content: ""; }

.fa-file-code-o:before {
  content: ""; }

.fa-vine:before {
  content: ""; }

.fa-codepen:before {
  content: ""; }

.fa-jsfiddle:before {
  content: ""; }

.fa-life-bouy:before,
.fa-life-buoy:before,
.fa-life-saver:before,
.fa-support:before,
.fa-life-ring:before {
  content: ""; }

.fa-circle-o-notch:before {
  content: ""; }

.fa-ra:before,
.fa-rebel:before {
  content: ""; }

.fa-ge:before,
.fa-empire:before {
  content: ""; }

.fa-git-square:before {
  content: ""; }

.fa-git:before {
  content: ""; }

.fa-y-combinator-square:before,
.fa-yc-square:before,
.fa-hacker-news:before {
  content: ""; }

.fa-tencent-weibo:before {
  content: ""; }

.fa-qq:before {
  content: ""; }

.fa-wechat:before,
.fa-weixin:before {
  content: ""; }

.fa-send:before,
.fa-paper-plane:before {
  content: ""; }

.fa-send-o:before,
.fa-paper-plane-o:before {
  content: ""; }

.fa-history:before {
  content: ""; }

.fa-circle-thin:before {
  content: ""; }

.fa-header:before {
  content: ""; }

.fa-paragraph:before {
  content: ""; }

.fa-sliders:before {
  content: ""; }

.fa-share-alt:before {
  content: ""; }

.fa-share-alt-square:before {
  content: ""; }

.fa-bomb:before {
  content: ""; }

.fa-soccer-ball-o:before,
.fa-futbol-o:before {
  content: ""; }

.fa-tty:before {
  content: ""; }

.fa-binoculars:before {
  content: ""; }

.fa-plug:before {
  content: ""; }

.fa-slideshare:before {
  content: ""; }

.fa-twitch:before {
  content: ""; }

.fa-yelp:before {
  content: ""; }

.fa-newspaper-o:before {
  content: ""; }

.fa-wifi:before {
  content: ""; }

.fa-calculator:before {
  content: ""; }

.fa-paypal:before {
  content: ""; }

.fa-google-wallet:before {
  content: ""; }

.fa-cc-visa:before {
  content: ""; }

.fa-cc-mastercard:before {
  content: ""; }

.fa-cc-discover:before {
  content: ""; }

.fa-cc-amex:before {
  content: ""; }

.fa-cc-paypal:before {
  content: ""; }

.fa-cc-stripe:before {
  content: ""; }

.fa-bell-slash:before {
  content: ""; }

.fa-bell-slash-o:before {
  content: ""; }

.fa-trash:before {
  content: ""; }

.fa-copyright:before {
  content: ""; }

.fa-at:before {
  content: ""; }

.fa-eyedropper:before {
  content: ""; }

.fa-paint-brush:before {
  content: ""; }

.fa-birthday-cake:before {
  content: ""; }

.fa-area-chart:before {
  content: ""; }

.fa-pie-chart:before {
  content: ""; }

.fa-line-chart:before {
  content: ""; }

.fa-lastfm:before {
  content: ""; }

.fa-lastfm-square:before {
  content: ""; }

.fa-toggle-off:before {
  content: ""; }

.fa-toggle-on:before {
  content: ""; }

.fa-bicycle:before {
  content: ""; }

.fa-bus:before {
  content: ""; }

.fa-ioxhost:before {
  content: ""; }

.fa-angellist:before {
  content: ""; }

.fa-cc:before {
  content: ""; }

.fa-shekel:before,
.fa-sheqel:before,
.fa-ils:before {
  content: ""; }

.fa-meanpath:before {
  content: ""; }

.fa-buysellads:before {
  content: ""; }

.fa-connectdevelop:before {
  content: ""; }

.fa-dashcube:before {
  content: ""; }

.fa-forumbee:before {
  content: ""; }

.fa-leanpub:before {
  content: ""; }

.fa-sellsy:before {
  content: ""; }

.fa-shirtsinbulk:before {
  content: ""; }

.fa-simplybuilt:before {
  content: ""; }

.fa-skyatlas:before {
  content: ""; }

.fa-cart-plus:before {
  content: ""; }

.fa-cart-arrow-down:before {
  content: ""; }

.fa-diamond:before {
  content: ""; }

.fa-ship:before {
  content: ""; }

.fa-user-secret:before {
  content: ""; }

.fa-motorcycle:before {
  content: ""; }

.fa-street-view:before {
  content: ""; }

.fa-heartbeat:before {
  content: ""; }

.fa-venus:before {
  content: ""; }

.fa-mars:before {
  content: ""; }

.fa-mercury:before {
  content: ""; }

.fa-intersex:before,
.fa-transgender:before {
  content: ""; }

.fa-transgender-alt:before {
  content: ""; }

.fa-venus-double:before {
  content: ""; }

.fa-mars-double:before {
  content: ""; }

.fa-venus-mars:before {
  content: ""; }

.fa-mars-stroke:before {
  content: ""; }

.fa-mars-stroke-v:before {
  content: ""; }

.fa-mars-stroke-h:before {
  content: ""; }

.fa-neuter:before {
  content: ""; }

.fa-genderless:before {
  content: ""; }

.fa-facebook-official:before {
  content: ""; }

.fa-pinterest-p:before {
  content: ""; }

.fa-whatsapp:before {
  content: ""; }

.fa-server:before {
  content: ""; }

.fa-user-plus:before {
  content: ""; }

.fa-user-times:before {
  content: ""; }

.fa-hotel:before,
.fa-bed:before {
  content: ""; }

.fa-viacoin:before {
  content: ""; }

.fa-train:before {
  content: ""; }

.fa-subway:before {
  content: ""; }

.fa-medium:before {
  content: ""; }

.fa-yc:before,
.fa-y-combinator:before {
  content: ""; }

.fa-optin-monster:before {
  content: ""; }

.fa-opencart:before {
  content: ""; }

.fa-expeditedssl:before {
  content: ""; }

.fa-battery-4:before,
.fa-battery-full:before {
  content: ""; }

.fa-battery-3:before,
.fa-battery-three-quarters:before {
  content: ""; }

.fa-battery-2:before,
.fa-battery-half:before {
  content: ""; }

.fa-battery-1:before,
.fa-battery-quarter:before {
  content: ""; }

.fa-battery-0:before,
.fa-battery-empty:before {
  content: ""; }

.fa-mouse-pointer:before {
  content: ""; }

.fa-i-cursor:before {
  content: ""; }

.fa-object-group:before {
  content: ""; }

.fa-object-ungroup:before {
  content: ""; }

.fa-sticky-note:before {
  content: ""; }

.fa-sticky-note-o:before {
  content: ""; }

.fa-cc-jcb:before {
  content: ""; }

.fa-cc-diners-club:before {
  content: ""; }

.fa-clone:before {
  content: ""; }

.fa-balance-scale:before {
  content: ""; }

.fa-hourglass-o:before {
  content: ""; }

.fa-hourglass-1:before,
.fa-hourglass-start:before {
  content: ""; }

.fa-hourglass-2:before,
.fa-hourglass-half:before {
  content: ""; }

.fa-hourglass-3:before,
.fa-hourglass-end:before {
  content: ""; }

.fa-hourglass:before {
  content: ""; }

.fa-hand-grab-o:before,
.fa-hand-rock-o:before {
  content: ""; }

.fa-hand-stop-o:before,
.fa-hand-paper-o:before {
  content: ""; }

.fa-hand-scissors-o:before {
  content: ""; }

.fa-hand-lizard-o:before {
  content: ""; }

.fa-hand-spock-o:before {
  content: ""; }

.fa-hand-pointer-o:before {
  content: ""; }

.fa-hand-peace-o:before {
  content: ""; }

.fa-trademark:before {
  content: ""; }

.fa-registered:before {
  content: ""; }

.fa-creative-commons:before {
  content: ""; }

.fa-gg:before {
  content: ""; }

.fa-gg-circle:before {
  content: ""; }

.fa-tripadvisor:before {
  content: ""; }

.fa-odnoklassniki:before {
  content: ""; }

.fa-odnoklassniki-square:before {
  content: ""; }

.fa-get-pocket:before {
  content: ""; }

.fa-wikipedia-w:before {
  content: ""; }

.fa-safari:before {
  content: ""; }

.fa-chrome:before {
  content: ""; }

.fa-firefox:before {
  content: ""; }

.fa-opera:before {
  content: ""; }

.fa-internet-explorer:before {
  content: ""; }

.fa-tv:before,
.fa-television:before {
  content: ""; }

.fa-contao:before {
  content: ""; }

.fa-500px:before {
  content: ""; }

.fa-amazon:before {
  content: ""; }

.fa-calendar-plus-o:before {
  content: ""; }

.fa-calendar-minus-o:before {
  content: ""; }

.fa-calendar-times-o:before {
  content: ""; }

.fa-calendar-check-o:before {
  content: ""; }

.fa-industry:before {
  content: ""; }

.fa-map-pin:before {
  content: ""; }

.fa-map-signs:before {
  content: ""; }

.fa-map-o:before {
  content: ""; }

.fa-map:before {
  content: ""; }

.fa-commenting:before {
  content: ""; }

.fa-commenting-o:before {
  content: ""; }

.fa-houzz:before {
  content: ""; }

.fa-vimeo:before {
  content: ""; }

.fa-black-tie:before {
  content: ""; }

.fa-fonticons:before {
  content: ""; }

.fa-reddit-alien:before {
  content: ""; }

.fa-edge:before {
  content: ""; }

.fa-credit-card-alt:before {
  content: ""; }

.fa-codiepie:before {
  content: ""; }

.fa-modx:before {
  content: ""; }

.fa-fort-awesome:before {
  content: ""; }

.fa-usb:before {
  content: ""; }

.fa-product-hunt:before {
  content: ""; }

.fa-mixcloud:before {
  content: ""; }

.fa-scribd:before {
  content: ""; }

.fa-pause-circle:before {
  content: ""; }

.fa-pause-circle-o:before {
  content: ""; }

.fa-stop-circle:before {
  content: ""; }

.fa-stop-circle-o:before {
  content: ""; }

.fa-shopping-bag:before {
  content: ""; }

.fa-shopping-basket:before {
  content: ""; }

.fa-hashtag:before {
  content: ""; }

.fa-bluetooth:before {
  content: ""; }

.fa-bluetooth-b:before {
  content: ""; }

.fa-percent:before {
  content: ""; }

/* COLOURS
   ----------------------------- */
/* MEDIA QUERIES BREAKS
   ----------------------------- */
/* COMPONENTS
   ----------------------------- */
/*

 Helper Utilites

*/
/*doc
---
title: Print
name: print
category: Utilities
---

Print 

*/
@media print {
  .row {
    margin-left: 0px !important;
    margin-right: 0px !important;
    background: none !important; }
  .container {
    width: auto !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    background: none !important; }
  .col-s-1, .col-s-2, .col-m-1, .col-m-2, .col-m-3, .col-m-half, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4 {
    width: auto !important;
    float: none !important; }
  body {
    font-size: 12pt;
    line-height: 1.25em; }
  h1 {
    font-size: 36pt;
    line-height: 1.25em; }
  h2 {
    font-size: 24pt;
    line-height: 1.25em; }
  h3 {
    font-size: 18pt;
    line-height: 1.25em; }
  h4 {
    font-size: 14pt;
    line-height: 1.25em; }
  body {
    background: none; }
  header {
    display: none; }
  article a:after {
    content: " [" attr(href) "] "; }
  aside a:after {
    display: none; } }

/*
    Discrete elements such as buttons, lists and images. 
    Also includes iconography and typography guidelines.
*/
/*! normalize.css v3.0.0 | MIT License | git.io/normalize */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

/**
 * Remove default margin.
 */
body {
  margin: 0; }

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined in IE 8/9.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block; }

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */ }

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0; }

/**
 * Address `[hidden]` styling not present in IE 8/9.
 * Hide the `template` element in IE, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none; }

/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background: transparent; }

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  outline: 0; }

/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9, Safari 5, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted; }

/**
 * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
 */
b,
strong {
  font-weight: bold; }

/**
 * Address styling not present in Safari 5 and Chrome.
 */
dfn {
  font-style: italic; }

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari 5, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0; }

/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000; }

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%; }

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9.
 */
img {
  border: 0; }

/**
 * Correct overflow displayed oddly in IE 9.
 */
svg:not(:root) {
  overflow: hidden; }

/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari 5.
 */
figure {
  margin: 1em 40px; }

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0; }

/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto; }

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em; }

/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */ }

/**
 * Address `overflow` set to `hidden` in IE 8/9/10.
 */
button {
  overflow: visible; }

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8+, and Opera
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none; }

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */ }

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default; }

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal; }

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto; }

/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  /* 2 */
  box-sizing: content-box; }

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

/**
 * 1. Correct `color` not being inherited in IE 8/9.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Remove default vertical scrollbar in IE 8/9.
 */
textarea {
  overflow: auto; }

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold; }

/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0; }

td,
th {
  padding: 0; }

/*doc
---
title: Buttons
name: button
category: Base CSS
---

Button styles can be applied to any element. Typically you'll want to
use either a `<button>` or an `<a>` element:

```html_example
<button class="btn btn--default">Click</button>
<a class="btn btn--default" href="http://fifthring.com">Don't click</a>
```

If your button is actually a link to another page, please use the
`<a>` element, while if your button performs an action, such as submitting
a form or triggering some javascript event, then use a `<button>` element.

##Button Types

```html_example
<button class="btn btn--default">Default</button>
<button class="btn btn--primary">Primary</button>
<button class="btn btn--secondary">Secondary</button>
<button class="btn btn--link">Link</button>
```

##Button Sizes
There are three 3 sizes for buttons: Large, medium (default)
and small. Simply apply the size modifier class for the desired size.
There is also an additional modifier that will make the button take the
full width of the container. It may be used with the any of the button
size and style modifiers.

Button                                                            | Modifier Class
----------------------------------------------------------------- | -----------------
<button class="btn btn--default btn--lg">Large</button>           | `btn btn--default  btnLrg`
<button class="btn btn--default">Default</button>                 | `btn btn--default`
<button class="btn btn--default btn--sm">Small</button>           | `btn btn--default btn--sm`
<button class="btn btn--default btn--xs">Extra Small</button>     | `btn btn--default btn--xs`
<button class="btn btn--default btn--block">Block</button>        | `btn btn--default btn--block`

*/
.btn {
  border: none;
  display: inline-block;
  padding: 10px 20px 8px;
  line-height: 1;
  color: #fff;
  background: #00A9E0; }
  .btn:hover {
    text-decoration: none !important;
    background: #0096c7; }
  .btn:visited {
    text-decoration: none; }

a.btn, a.btn:visited {
  color: #fff !important;
  cursor: pointer; }
  a.btn:hover, a.btn:visited:hover {
    text-decoration: none; }

.btn--default {
  background: #999999; }
  .btn--default:hover {
    background: gray; }

.btn--primary {
  background: #002A3A; }
  .btn--primary:hover {
    background: #001821; }

.btn--secondary {
  background: #00A9E0; }
  .btn--secondary:hover {
    background: #0083ad; }

.btn--link {
  background: none; }
  .btn--link:hover {
    text-decoration: underline; }

.btn--lg {
  padding: 14px 16px;
  font-size: 18px;
  line-height: 1.33; }

.btn--sm {
  padding: 8px 12px 6px;
  font-size: .9rem;
  line-height: 1; }

.btn--xs {
  padding: 6px 10px;
  font-size: 10px;
  line-height: 1; }

.btn--block {
  display: block;
  float: none;
  width: 100%;
  padding-left: 0;
  padding-right: 0; }

/*doc
---
title: Button Groups
name: buttongroups
category: Base CSS
---

Button groups wrap a series of buttons.

##Button Groups

```html_example
<div class="btn__group">
    <button type="button" class="btn btn--primary">1</button>
    <button type="button" class="btn btn--primary">2</button>
    <button type="button" class="btn btn--primary">3</button>
    <button type="button" class="btn btn--primary">4</button>
</div>
```

###Justified

```html_example
<div class="btn__group btn--group--justified">
    <a href="#" class="btn btn--primary">Left</a>
    <a href="#" class="btn btn--primary">Middle</a>
    <a href="#" class="btn btn--primary">Right</a>
</div>
```

###With Dropdown

```html_example
<div class="btn__group">
    <button type="button" class="btn btn--primary">8</button>
    <button type="button" class="btn btn--primary dropdown__toggle">Dropdown<span class="caret"></span></button>
    <ul class="dropdown__menu">
        <li><a href="#">Dropdown link</a></li>
        <li><a href="#">Dropdown link</a></li>
        <li><a href="#">Dropdown link</a></li>
    </ul>
</div>
```
###Vertical

```html_example
<div class="btn--group--vertical">
    <button type="button" class="btn btn--primary">Button</button>
    <button type="button" class="btn btn--primary">Button</button>
    <button type="button" class="btn btn--primary">Button</button>
    <button type="button" class="btn btn--primary">Button</button>
</div>
```

*/
.btn__group {
  position: relative;
  margin-right: 4px; }
  .btn__group .btn {
    margin-right: 0px; }
  .btn__group .dropdown--toggle {
    margin-left: -1px; }

.btn--group--justified {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: separate; }
  .btn--group--justified .btn {
    display: table-cell;
    width: 1%;
    text-align: center; }

.btn--group--vertical {
  position: relative;
  display: inline-block;
  vertical-align: middle; }
  .btn--group--vertical .btn {
    display: block;
    width: 100%;
    max-width: 100%; }

/*doc
---
title: Colors
name: colours
category: Base CSS
---

We have a few background colors that can be used in various contexts.
These are not for use as the entire page background but instead for
specific components and modules on the page.

##Palette

###Primary

```html_example            
		<ul class="colour--palette">  
				<li></li>
				<li></li>
				<li></li>
				<li></li>
		</ul>
```

###Highlights

```html_example            
		<ul class="colour--palette--high">  
				<li></li>
				<li></li>
				<li></li>
				<li></li>
		</ul>
```

###Lowlights

```html_example            
		<ul class="colour--palette--low">  
				<li></li>
				<li></li>
				<li></li>
				<li></li>
		</ul>
```
*/
.colour--palette li:nth-child(1) {
  background-color: #002A3A; }
  .colour--palette li:nth-child(1):after {
    content: "#002A3A"; }

.colour--palette li:nth-child(2) {
  background-color: #00A9E0; }
  .colour--palette li:nth-child(2):after {
    content: "#00A9E0"; }

.colour--palette li:nth-child(3) {
  background-color: #469408; }
  .colour--palette li:nth-child(3):after {
    content: "#469408"; }

.colour--palette li:nth-child(4) {
  background-color: #d9831f; }
  .colour--palette li:nth-child(4):after {
    content: "#d9831f"; }

.colour--palette--high li:nth-child(1) {
  background-color: #006187; }
  .colour--palette--high li:nth-child(1):after {
    content: "#006187"; }

.colour--palette--high li:nth-child(2) {
  background-color: #14c5ff; }
  .colour--palette--high li:nth-child(2):after {
    content: "#14c5ff"; }

.colour--palette--high li:nth-child(3) {
  background-color: #5dc40b; }
  .colour--palette--high li:nth-child(3):after {
    content: "#5dc40b"; }

.colour--palette--high li:nth-child(4) {
  background-color: #e59b46; }
  .colour--palette--high li:nth-child(4):after {
    content: "#e59b46"; }

.colour--palette--low li:nth-child(1) {
  background-color: #000507; }
  .colour--palette--low li:nth-child(1):after {
    content: "#000507"; }

.colour--palette--low li:nth-child(2) {
  background-color: #0083ad; }
  .colour--palette--low li:nth-child(2):after {
    content: "#0083ad"; }

.colour--palette--low li:nth-child(3) {
  background-color: #2f6405; }
  .colour--palette--low li:nth-child(3):after {
    content: "#2f6405"; }

.colour--palette--low li:nth-child(4) {
  background-color: #ac6819; }
  .colour--palette--low li:nth-child(4):after {
    content: "#ac6819"; }

.color-white {
  color: #fff; }

.color-white--bg {
  background-color: #fff; }

.color-p1 .panel__contents__header h2 {
  border-color: #002A3A !important; }

.color-p1 .panel__contents__copy a {
  color: #002A3A !important; }

.color-p2 .panel__contents__header h2 {
  border-color: #00A9E0 !important; }

.color-p2 .panel__contents__copy a {
  color: #00A9E0 !important; }

.color-s1 .panel__contents__header h2 {
  border-color: #C8C9C7 !important; }

.color-s1 .panel__contents__copy a {
  color: #C8C9C7 !important; }

.color-s2 .panel__contents__header h2 {
  border-color: #C8102E !important; }

.color-s2 .panel__contents__copy a {
  color: #C8102E !important; }

.color-s3 .panel__contents__header h2 {
  border-color: #FFD100 !important; }

.color-s3 .panel__contents__copy a {
  color: #FFD100 !important; }

.color-s4 .panel__contents__header h2 {
  border-color: #009639 !important; }

.color-s4 .panel__contents__copy a {
  color: #009639 !important; }

.color-p1--bg {
  background-color: #002A3A; }

.color-p2--bg {
  background-color: #00A9E0; }

.color-s1--bg {
  background-color: #C8C9C7; }

.color-s2--bg {
  background-color: #C8102E; }

.color-s3--bg {
  background-color: #FFD100; }

.color-s4--bg {
  background-color: #009639; }

/*doc
---
title: Dividers
name: dividers
category: Base CSS
---

```html_example
<hr>
```


*/
hr {
  margin: 0;
  border: 0;
  border-top: 1px solid #343e44; }
  hr.bg-gradient {
    border: none;
    height: 0; }

@font-face {
  font-family: 'FS Lola Bold';
  src: url("../../fonts/FS%20Lola-Bold.eot");
  /* IE9 Compat Modes */
  src: url("../../fonts/FS%20Lola-Boldd41d.eot?#iefix") format("embedded-opentype"), url("../../fonts/FS%20Lola-Bold.woff") format("woff"), url("../../fonts/FS%20Lola-Bold.ttf") format("truetype"), url("../../fonts/FS%20Lola-Bold.svg#fec35c7a7977702573a77a66cbe615bd") format("svg");
  /* Legacy iOS */
  font-style: normal;
  font-weight: 700; }

@font-face {
  font-family: 'FS Lola';
  src: url("../../fonts/FS%20Lola-Regular.eot");
  /* IE9 Compat Modes */
  src: url("../../fonts/FS%20Lola-Regulard41d.eot?#iefix") format("embedded-opentype"), url("../../fonts/FS%20Lola-Regular.woff") format("woff"), url("../../fonts/FS%20Lola-Regular.ttf") format("truetype"), url("../../fonts/FS%20Lola-Regular.svg#40c2bfe21efce144f9038f1453b28aec") format("svg");
  /* Legacy iOS */
  font-style: normal;
  font-weight: 400; }

.bg-gradient--p1 {
  background-color: #00445e;
  background-image: -webkit-linear-gradient(-360deg, #00445e, #002330 40%);
  background-image: linear-gradient(90deg,#00445e, #002330 40%); }

.bg-gradient--p2 {
  background-color: #05c2ff;
  background-image: -webkit-linear-gradient(-360deg, #05c2ff, #002330 40%);
  background-image: linear-gradient(90deg,#05c2ff, #002330 40%); }

.bg-gradient--s1 {
  background-color: #dadbd9;
  background-image: -webkit-linear-gradient(-360deg, #dadbd9, #002330 40%);
  background-image: linear-gradient(90deg,#dadbd9, #002330 40%); }

.bg-gradient--s2 {
  background-color: #e91336;
  background-image: -webkit-linear-gradient(-360deg, #e91336, #002330 40%);
  background-image: linear-gradient(90deg,#e91336, #002330 40%); }

.bg-gradient--s3 {
  background-color: #ffd724;
  background-image: -webkit-linear-gradient(-360deg, #ffd724, #002330 40%);
  background-image: linear-gradient(90deg,#ffd724, #002330 40%); }

.bg-gradient--s4 {
  background-color: #00ba47;
  background-image: -webkit-linear-gradient(-360deg, #00ba47, #002330 40%);
  background-image: linear-gradient(90deg,#00ba47, #002330 40%); }

/*doc
---
title: Grids
name: grids
category: Base CSS
---

Grids

*/
#wrapper {
  background: #f1f1f1;
  padding-top: 30px; }
  @media (min-width: 740px) {
    #wrapper {
      padding-top: 15px; } }

.container {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto; }
  .container:after {
    content: " ";
    display: block;
    clear: both; }
  .container *, .container *:before, .container *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }
  @media (min-width: 740px) {
    .container {
      width: 700px; } }
  @media (min-width: 1008px) {
    .container {
      width: 968px; } }
  @media (min-width: 1460px) {
    .container {
      width: 100% !important; } }

.container--wide {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  width: 100%; }
  .container--wide:after {
    content: " ";
    display: block;
    clear: both; }
  .container--wide *, .container--wide *:before, .container--wide *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }

.row {
  clear: both; }

/*doc
---
title: Images
name: images
category: Base CSS
---

```html_example
<img src="http://placehold.it/350x150" class="img--responsive">
```


*/
img {
  display: block;
  margin: 0;
  padding: 0; }
  img.img--responsive {
    width: 100%;
    height: auto; }
  article img {
    margin-bottom: 20px; }

body:after {
  font-size: 0;
  float: left;
  height: 0;
  content: 'break__0'; }
  @media (min-width: 500px) {
    body:after {
      content: 'break__1'; } }
  @media (min-width: 740px) {
    body:after {
      content: 'break__2'; } }
  @media (min-width: 1008px) {
    body:after {
      content: 'break__3'; } }

body.cke_editable:after {
  display: none; }

/*doc
---
title: Links
name: links
category: Base CSS
---

```html_example
<a href="http://www.fifthring.com/">Click Me</a>
```


*/
/*doc
---
title: Lists
name: lists
category: Base CSS
---

```html_example
<ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
    <li>List Item 4</li>
    <li>List Item 5</li>
</ul>

```


###Breadcrumb

```html_example
<ul class="breadcrumb">
    <li class="active">Home</li>
</ul>
<ul class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li class="active">Library</li>
</ul>
<ul class="breadcrumb" style="margin-bottom: 5px;">
    <li><a href="#">Home</a></li>
    <li><a href="#">Library</a></li>
    <li class="active">Data</li>
</ul>
```
*/
dl,
dt,
dd,
menu,
ol,
ul {
  margin: 0;
  padding: 0;
  list-style-type: none; }

.inline--list {
  display: inline-block; }
  .inline--list li {
    display: inline;
    float: left; }

.breadcrumb {
  padding: 0; }
  .breadcrumb li {
    display: inline-block; }
  .breadcrumb li + li:before {
    content: "/\00a0";
    padding: 0 5px;
    color: #999999; }

/*doc
---
title: Tables
name: tables
category: Base CSS
---

Tables

```html_example
<table class="table table--striped table--hover ">
    <tr>
      <th>#</th>
      <th>Column heading</th>
      <th>Column heading</th>
      <th>Column heading</th>
    </tr>
    <tr>
      <td>1</td>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="primary">
      <td>4</td>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="secondary">
      <td>5</td>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
  </table>
```
*/
table {
  width: 100%;
  margin-bottom: 20px; }
  table tr th {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    text-align: left;
    font-weight: 400;
    color: #fff; }
  table tr td {
    padding: 8px; }
  table.table--striped tr:nth-child(odd) th {
    background: #cccccc; }
  table.table--striped tr:nth-child(odd) td {
    background: #e6e6e6; }
  .panel--prices table tr {
    border-bottom: 1px solid #343e44; }
    .panel--prices table tr:last-child {
      border-bottom: 0; }
  .panel--prices table td, .panel--prices table th {
    font-size: 1.1rem; }
    @media (min-width: 1008px) {
      .panel--prices table td, .panel--prices table th {
        font-size: 1.4rem; } }
  .panel--prices table td {
    color: #8f8f8f; }

/*doc
---
title: Typography
name: typography
category: Base CSS
---


###Headings 

These are the heading sizes that you can use site wide.

```html_example
<h1>h1 36px</h1>

<h2>h2 25px</h2>

<h3>h3 20px</h3>

<h4>h4 18px</h4>

<h5>h5 16px</h5>
```

###Paragraphs

```html_example
<p>This is an example of our base font style 16px. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p><small>This line of text is meant to be treated as fine print.</small></p>
<p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
<p>The following snippet of text is <em>rendered as italicized text</em>.</p>
<p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>

<p class="text-muted">Muted. Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-primary">Primary. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p class="text-secondary">Secondary. Etiam porta sem malesuada magna mollis euismod.</p>
```

###Block Quotes

```html_example
<blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
</blockquote>
<blockquote class="pull--right">
    <p>Pulled Right. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
</blockquote>
```

*/
body {
  font-size: 100%;
  text-align: left;
  line-height: 1.25em;
  color: #2d363b;
  font-family: "FS Lola", Helvetica, Arial, sans-serif; }
  @media (min-width: 740px) {
    body {
      line-height: 1.375em; } }

html, html > body {
  font-size: 16px; }

h1, h2, h3, h4, h5, h6, .form legend {
  margin: 20px 0;
  margin: 1.25rem 0;
  line-height: 20px;
  line-height: 1.25em;
  font-size: 16px;
  font-size: 1rem;
  font-family: "FS Lola", Helvetica, Arial, sans-serif;
  font-weight: 500; }

h1 {
  font-size: 32px;
  font-size: 2rem;
  line-height: 1.25em;
  margin-top: 0.625em;
  margin-bottom: 0.625em; }
  @media (min-width: 740px) {
    h1 {
      font-size: 40px;
      font-size: 2.5rem;
      line-height: 1.125em;
      margin-top: 0.5em;
      margin-bottom: 0.5em; } }
  @media (min-width: 1008px) {
    h1 {
      font-size: 48px;
      font-size: 3rem;
      line-height: 1.05em;
      margin-top: 0.41666667em;
      margin-bottom: 0.41666667em; } }

h2 {
  font-size: 26px;
  font-size: 1.625rem;
  line-height: 1.15384615em;
  margin-top: 0.769230769em;
  margin-bottom: 0.769230769em; }
  @media (min-width: 740px) {
    h2 {
      font-size: 32px;
      font-size: 2rem;
      line-height: 1.25em;
      margin-top: 0.625em;
      margin-bottom: 0.625em; } }
  @media (min-width: 1008px) {
    h2 {
      font-size: 36px;
      font-size: 2.25rem;
      line-height: 1.25em;
      margin-top: 0.55555556em;
      margin-bottom: 0.55555556em; } }

h3 {
  font-size: 22px;
  font-size: 1.375rem;
  line-height: 1.13636364em;
  margin-top: 0.90909090em;
  margin-bottom: 0.90909090em; }
  @media (min-width: 740px) {
    h3 {
      font-size: 24px;
      font-size: 1.5rem;
      line-height: 1.25em;
      margin-top: 0.83333333em;
      margin-bottom: 0.83333333em; } }
  @media (min-width: 1008px) {
    h3 {
      font-size: 28px;
      font-size: 1.75rem;
      line-height: 1.25em;
      margin-top: 0.71428574em;
      margin-bottom: 0.71428574em; } }

h4, h5, h6, .form legend {
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.11111111em;
  margin-top: 1.11111111em;
  margin-bottom: 1.11111111em; }
  @media (min-width: 740px) {
    h4, h5, h6, .form legend {
      line-height: 1.22222222em; } }

p {
  margin: 0 0 20px 0;
  margin: 0 0 1.25rem 0;
  line-height: 1.4; }
  p.first--para {
    font-size: 1.25em; }
  p.text-muted {
    color: #b3b3b3; }
  p.text-primary {
    color: #002A3A; }
  p.text-secondary {
    color: #00A9E0; }

p.small, small {
  font-size: 12px;
  font-size: 0.75rem; }

p.strong, p.first--para, strong {
  font-weight: bold; }

blockquote {
  font-size: 1.25em;
  line-height: 1.25em;
  border-left: 5px solid #e6e6e6;
  margin: 80px 48px 64px;
  margin: 5rem 3rem 4rem;
  padding: 0 20px; }
  @media (min-width: 740px) {
    blockquote {
      font-size: 1.5em;
      line-height: 1.45833333em; } }
  blockquote.pull--right {
    text-align: right;
    border-left: 0;
    border-right: 5px solid #e6e6e6; }

article ul, article ol {
  margin: 0 0 20px 0;
  margin: 0 0 1.25rem 0;
  line-height: 1.5em;
  font-size: 16px;
  font-size: 1rem; }

a, a:visited {
  color: inherit;
  text-decoration: none; }
  a:hover, a:focus, a:visited:hover, a:visited:focus {
    text-decoration: underline; }

.videos {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  margin-bottom: 40px; }
  .videos iframe,
  .videos object,
  .videos embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

/*
    Groups of elements that comprise a unit. 
    Elements such as a form label, text input and autocomplete can create a form.
*/
/*doc
---
title: Alerts
name: alerts
category: Components
---

```html_example
<div class="alert alert-success">
    <strong>Success!</strong> Indicates a successful or positive action.
</div>
<div class="alert alert-info">
    <strong>Info!</strong> Indicates a neutral informative change or action.
</div>
<div class="alert alert-warning">
    <strong>Warning!</strong> Indicates a warning that might need attention.
</div>
<div class="alert alert-danger">
    <strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div>
```
*/
/*doc
---
title: Cards
name: cards
category: Components
---


```html_example
<div class="card">
    <div class="card__img">
        <img class="img--responsive" src="http://placehold.it/1000x1000" alt=" " />
    </div>
    <div class="card__title">
        <h3>The title</h3>
        <p>The date</p>
        <p>The author</p>
    </div>
    <div class="card_copy">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
    </div>
</div>
```

*/
.card {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto; }
  .card:after {
    content: " ";
    display: block;
    clear: both; }
  .card .card__img {
    margin-bottom: 1em; }
    @media (min-width: 740px) {
      .card .card__img {
        width: 33.3333333333%;
        float: left; } }
  .card .card__title {
    margin-bottom: 0.5em; }
    @media (min-width: 740px) {
      .card .card__title {
        width: 66.6666666667%;
        float: right;
        margin-right: 0; } }
    .card .card__title h1:first-child, .card .card__title h2:first-child, .card .card__title h3:first-child, .card .card__title h4:first-child {
      margin-top: 0;
      margin-bottom: 0.25em; }
    .card .card__title p {
      margin: 0; }
  .card .card__copy {
    clear: both; }
    @media (min-width: 1008px) {
      .card .card__copy {
        clear: none;
        width: 66.6666666667%;
        float: right;
        margin-right: 0; } }

.dropdown__menu {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  background: white;
  border: 1px solid #e6e6e6;
  z-index: 9999;
  top: 100%;
  min-width: 200px; }
  .dropdown__menu li.dropdown__header {
    padding: 10px 30px; }
  .dropdown__menu li a {
    display: block;
    position: relative;
    padding-top: 10px;
    padding-bottom: 10px;
    padding: 10px; }
  .dropdown__menu .divider {
    height: 1px;
    margin: 9px 0;
    overflow: hidden;
    background-color: #e5e5e5; }
  .dropdown__menu.dropdown--open {
    display: block; }

.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px solid;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent; }

/*doc
---
title: Footer
name: footer
category: Components
---
```html_example

<footer>
    <p>&copy; Copyright YEAR SITENAME. All rights reserved.</p>
    <p>Contact Information</p>
</footer>
```
*/
.footer {
  padding: 30px 0;
  background: #000;
  color: #435058; }
  .footer .container {
    position: relative; }
  .footer .container--wide {
    position: relative; }
  @media (min-width: 740px) {
    .footer {
      padding: 15px 30px; } }

.footer__small-print {
  text-align: center; }
  @media (min-width: 740px) {
    .footer__small-print {
      text-align: left;
      position: absolute;
      bottom: 10px;
      margin-top: -13px; } }
  .footer__small-print li {
    color: #fff;
    display: inline;
    margin-right: 15px;
    font-size: 13px; }
    .footer__small-print li a {
        color: #fff;
     }
    .footer__small-print li:last-child {
      margin-right: 0; }

.footer__logo {
  margin-bottom: 15px; }
  @media (min-width: 740px) {
    .footer__logo {
      float: right; } }
  .footer__logo img {
    height: 70px;
    margin: 0 auto; }
    @media (min-width: 740px) {
      .footer__logo img {
        margin: auto; } }

/*doc
---
title: Forms
name: forms
category: Components
---

```html_example
<form class="form__horizontal">
    <fieldset>
        <legend>Legend</legend>
        <div class="form__group">
            <label for="inputEmail" class="control--label">Email</label>
            <input type="text" class="form--control" id="inputEmail" placeholder="Email">
        </div>
        <div class="form__group">
            <label for="inputPassword" class="control--label">Password</label>
            <input type="password" class="form--control" id="inputPassword" placeholder="Password">
            <div class="checkbox">
                <label>
                    <input type="checkbox"> Checkbox
                </label>
                <label>
                    <input type="checkbox"> Checkbox
                </label>
                <label>
                    <input type="checkbox"> Checkbox
                </label>
                <label>
                    <input type="checkbox"> Checkbox
                </label>
            </div>
            <div class="checkbox checkbox--inline">
                <label>
                    <input type="checkbox"> Checkbox
                </label>
                <label>
                    <input type="checkbox"> Checkbox
                </label>
                <label>
                    <input type="checkbox"> Checkbox
                </label>
                <label>
                    <input type="checkbox"> Checkbox
                </label>
            </div>
        </div>
        <div class="form__group">
            <label for="textArea" class="control--label">Textarea</label>
            <textarea class="form--control" rows="3" id="textArea"></textarea>
            <span class="help--block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
        </div>
        <div class="form__group">
            <label class="control--label">Radios</label>
            <div class="radio">
                <label>
                    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked=""> Option one is this
                </label>
            </div>
            <div class="radio">
                <label>
                    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> Option two can be something else
                </label>
            </div>
        </div>
        <div class="form__group">
            <label for="select" class="control--label">Selects</label>
            <select class="form--control" id="select">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
            <br>
            <select multiple="" class="form--control">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
        </div>
        <div class="form__group">
            <button class="btn">Cancel</button>
            <button type="submit" class="btn btn--primary">Submit</button>
        </div>
    </fieldset>
</form>


<form class="form">
    <div class="form__group">
        <label class="control--label" for="focusedInput">Focused input</label>
        <input class="form--control" id="focusedInput" type="text" value="This is focused...">
    </div>
    <div class="form__group">
        <label class="control--label" for="disabledInput">Disabled input</label>
        <input class="form--control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled="">
    </div>
    <div class="form__group has--error">
        <label class="control--label" for="inputError">Input error</label>
        <input type="text" class="form--control" id="inputError">
    </div>
    <div class="form__group">
        <label class="control--label" for="inputLarge">Large input</label>
        <input class="form--control input-lg" type="text" id="inputLarge">
    </div>
    <div class="form__group">
        <label class="control--label" for="inputSmall">Small input</label>
        <input class="form--control input-sm" type="text" id="inputSmall">
    </div>
    <div class="form__group">
        <label class="control--label">Input addons</label>
        <div class="input__group">
            <span class="input--add--on">$</span>
            <input type="text" class="form--control">
            <span class="input--add--on no--pad">
          <button class="btn btn--primary" type="button">Button</button>
        </span>
        </div>
    </div>
    <div class="form__group file--upload">
        <label for="inputCV" class="control--label">File upload</label>
        <div class="input__group">
            <span class="btn btn--quaternary input--add--on">
          <span>Upload file</span>
            </span>
            <input id="uploadFile" class="form--control" placeholder="Select from your device" disabled="disabled" />
        </div>
    </div>
</form>
```
*/
.form .form__group {
  margin-bottom: 1em; }

.form button[type="submit"] {
  float: right; }

.form legend {
  display: block;
  width: 100%;
  margin-bottom: 1em;
  padding: 0.5em 0;
  line-height: inherit;
  border: 0;
  border-bottom: 1px solid #b3b3b3; }

.form fieldset {
  padding: 0;
  margin: 0;
  border: 0;
  min-width: 0; }

.form label {
  display: block;
  margin-bottom: 0.25em;
  text-transform: uppercase;
  font-size: 0.9rem; }
  .form label.required:after {
    content: "*";
    color: #00A9E0;
    font-size: 1.2rem;
    vertical-align: 0; }

.form .checkbox {
  display: block;
  margin: 1em 0; }
  .form .checkbox label {
    font-size: 1em; }
  .form .checkbox.checkbox--inline label {
    display: inline-block;
    margin-right: 0.5em; }

.form textarea {
  max-width: 100%;
  min-height: 100px; }

.form .form--control {
  display: block;
  width: 100%;
  margin: 0 0 1em 0;
  padding: 6px 9px;
  line-height: 1.42857143;
  background-color: white;
  background-image: none;
  border: 1px solid #cccccc; }
  .form .form--control[disabled] {
    background: #cccccc; }
  .form .form--control.input-lg {
    font-size: 1.5em;
    padding: 16px 12px; }
  .form .form--control.input-sm {
    font-size: 0.75em;
    padding: 6x 12px; }
  .form .form--control:focus {
    border-color: gray;
    outline: 0; }

.form .file--upload {
  margin-bottom: 1em; }
  .form .file--upload .input--add--on {
    position: relative;
    overflow: hidden !important;
    float: none;
    padding: 0 !important; }
    .form .file--upload .input--add--on span {
      padding: 8px 12px; }
    .form .file--upload .input--add--on .upload {
      position: absolute;
      width: 100%;
      top: 0;
      left: 0;
      margin: 0;
      padding: 8px;
      font-size: 20px;
      cursor: pointer;
      opacity: 0;
      filter: alpha(opacity=0); }
  .form .file--upload span, .form .file--upload input {
    cursor: pointer; }
  .form .file--upload .form--control[disabled] {
    background-color: #e6e6e6;
    color: inherit; }

.form .help--block {
  display: block;
  font-size: 0.75em;
  font-margin-bottom: 1em; }

.form .radio label {
  display: inline;
  font-weight: normal;
  cursor: pointer;
  font-size: 1em; }

.form .radio input {
  margin: 0.5em 0.5em 0.5em 0; }

.form select {
  height: 2.4rem;
  border-radius: none;
  -webkit-appearance: none;
  -webkit-border-radius: 0px; }

.form select[multiple], .form select[size] {
  height: auto; }

.form .has--error label {
  color: red; }

.form .has--error input {
  border: 1px solid #ff0000; }

.form .input__group {
  position: relative;
  display: table;
  margin-bottom: 1em; }
  .form .input__group .input--add--on {
    display: table-cell;
    margin: 0;
    padding: 8px 12px;
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
    text-align: center;
    line-height: 1;
    background: #999999; }
    .form .input__group .input--add--on button {
      margin: 0; }
  .form .input__group .form--control {
    display: table-cell;
    height: 38px;
    margin: 0;
    border: 0;
    border-radius: 0; }

.form .screen-reader {
  display: block !important;
  left: -9999px !important;
  position: absolute !important; }

::-webkit-input-placeholder {
  color: #cccccc; }

:-moz-placeholder {
  color: #cccccc;
  opacity: 1; }

::-moz-placeholder {
  color: #cccccc;
  opacity: 1; }

:-ms-input-placeholder {
  color: #cccccc; }

:placeholder-shown {
  color: #cccccc; }

.gmap {
  height: 500px;
  width: 100%;
  font-size: 90%; }
  .gmap img, .gmap object, .gmap embed {
    max-width: none;
    height: auto; }
  .gmap * {
    font-size: 100%;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box; }
    .gmap *:before, .gmap *:after {
      -webkit-box-sizing: content-box;
      -moz-box-sizing: content-box;
      box-sizing: content-box; }

.infobox {
  font-size: 16px;
  height: 100px;
  width: 200px;
  overflow-y: hidden;
  overflow-x: hidden; }

/*doc
---
title: Navbar
name: navbar
category: Components
---


```html_example
<div class="navbar navbar--default">
    <div class="navbar__header">
        <button type="button" class="navbar__toggle">
            <span class="icon__bar"></span>
            <span class="icon__bar"></span>
            <span class="icon__bar"></span>
        </button>
        <a class="navbar__brand" href="#">Brand</a>
    </div>
    <div class="navbar__collapse">
        <ul class="nav navbar--nav">
            <li class="active"><a href="#">Active</a></li>
            <li><a href="#">Link</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown__toggle">Dropdown <b class="caret"></b></a>
                <ul class="dropdown__menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li class="dropdown__header">Dropdown header</li>
                    <li><a href="#">Separated link</a></li>
                    <li><a href="#">One more separated link</a></li>
                </ul>
            </li>
        </ul>
        <form class="navbar__form navbar--left">
            <input type="text" class="form--control" placeholder="Search">
        </form>
        <ul class="nav navbar--nav navbar--right">
            <li><a href="#">Link</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown__toggle">Dropdown <b class="caret"></b></a>
                <ul class="dropdown__menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>
```
*/
header {
  padding: 0 30px;
  margin-bottom: 15px; }
  @media (min-width: 500px) {
    header {
      margin-bottom: 24px; } }
  @media (min-width: 740px) {
    header {
      margin-bottom: 7.5px; } }
  @media (min-width: 1008px) {
    header {
      padding: 0; } }
  @media (min-width: 1230px) {
    header {
      margin-bottom: 30px; } }
  header a:hover {
    text-decoration: none;
    color: #006187; }

.logo {
  float: left;
  padding-right: 15px; }
  .logo img {
    height: 70px;
    margin-top: -43px; }
    @media (min-width: 740px) {
      .logo img {
        height: 95px;
        margin-top: -43px;
        margin-bottom: -7.5px; } }
    @media (min-width: 1008px) {
      .logo img {
        margin-left: 0; } }
    @media (min-width: 1230px) {
      .logo img {
        height: 119px;
        margin-top: -40px;
        margin-left: 15px; } }

.nav--primary {
  position: relative;
  padding: 7.5px 0; }
  @media (min-width: 1008px) {
    .nav--primary {
      margin-left: 45px; } }
  @media (min-width: 1230px) {
    .nav--primary {
      margin-left: auto;
      width: 70.8333333333%;
      float: left;
      margin-left: 4.1666666667%; } }
  @media (min-width: 1460px) {
    .nav--primary {
      width: 75%;
      float: left;
      margin-left: 4.1666666667%; } }
  @media (min-width: 1630px) {
    .nav--primary {
      width: 70.8333333333%;
      float: left; } }
  .nav--primary nav {
    margin: 0 -30px -30px; }
    @media (min-width: 740px) {
      .nav--primary nav {
        margin: 0;
        margin-top: 70px; } }
    @media (min-width: 1230px) {
      .nav--primary nav {
        margin-top: 0;
        position: absolute;
        right: 0;
        bottom: 0; } }
  .nav--primary .nav__menu-button {
    font-family: "Fs Lola Bold";
    display: block;
    float: right;
    margin: 0;
    padding-top: 0.5em;
    font-size: 1.5rem;
    text-transform: uppercase;
    margin-top: -5px;
    margin-bottom: 15px; }
    @media (min-width: 740px) {
      .nav--primary .nav__menu-button {
        display: none;
        margin-bottom: 0; } }
  .nav--primary .nav__menu {
    clear: both;
    display: none;
    margin: 0 auto;
    overflow: visible;
    padding: 0;
    width: 100%;
    border-top: 1px solid #dddddd;
    border-color: #cccccc;
    border-width: 1px; }
    @media (min-width: 740px) {
      .nav--primary .nav__menu {
        display: block;
        margin: 0;
        padding: 0;
        padding-top: 30px;
        border: none; } }
    @media (min-width: 1008px) {
      .nav--primary .nav__menu {
        text-align: right;
        width: 70.8333333333%;
        float: left;
        margin-bottom: 15px; } }
    @media (min-width: 1230px) {
      .nav--primary .nav__menu {
        text-align: left;
        width: 100%;
        float: left;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 0; } }
    @media (min-width: 1460px) {
      .nav--primary .nav__menu {
        padding: 0; } }
    .nav--primary .nav__menu.show {
      display: block; }
  .nav--primary .level-1 {
    display: block;
    text-align: center;
    width: 100%;
    padding: 15px 0 7px;
    border-bottom: 1px solid #dddddd;
    background: white; }
    .nav--primary .level-1:last-child {
      border-bottom: 0; }
    @media (min-width: 740px) {
      .nav--primary .level-1 {
        border: none;
        text-align: right;
        padding: 0;
        background: transparent !important;
        display: inline;
        text-decoration: none;
        width: auto; } }
    .nav--primary .level-1 a {
      display: inline-block;
      font-size: 1.5rem; }
      @media (min-width: 740px) {
        .nav--primary .level-1 a {
          font-size: 1.2rem;
          padding: 0 10px;
          border-right: 1px solid #00A9E0; } }
      @media (min-width: 1460px) {
        .nav--primary .level-1 a {
          font-size: 20px;
          /*padding: 0 30px;*/
          padding: 0 10px; } }
    @media (min-width: 740px) {
      .nav--primary .level-1.first a {
        padding-left: 0; } }
    @media (min-width: 1460px) {
      .nav--primary .level-1.first a {
        padding-left: 15px; } }
    .nav--primary .level-1.last a {
      border-right: none; }

.nav__links {
  display: block;
  text-align: right;
  margin-top: 8px; }
  @media (min-width: 740px) {
    .nav__links {
      display: block;
      margin-top: 0;
      margin-bottom: 7px; } }
  @media (min-width: 1008px) {
    .nav__links {
      display: block;
      float: none;
      margin-top: 8px;
      margin-bottom: 0;
      width: 72.9166666667%;
      float: left; } }
  @media (min-width: 1230px) {
    .nav__links {
      width: 77.0833333333%;
      float: left; } }
  @media (min-width: 1460px) {
    .nav__links {
      width: 79.1666666667%;
      float: left; } }
  @media (min-width: 1630px) {
    .nav__links {
      width: 75%;
      float: left; } }
  .nav__links li {
    padding-right: 0;
    display: inline-block;
    font-size: 0.9rem; }
    @media (min-width: 1008px) {
      .nav__links li {
        padding-right: 20px; } }
    @media (min-width: 1230px) {
      .nav__links li {
        padding-right: 40px; } }
    @media (min-width: 1460px) {
      .nav__links li {
        padding-right: 26px; } }
    .nav__links li span {
      margin-left: 1px;
      color: #00A9E0; }

.nav__search {
  float: right;
  width: 50%; }
  @media (min-width: 740px) {
    .nav__search {
      width: 35%; } }
  @media (min-width: 1008px) {
    .nav__search {
      width: 100%;
      width: 25%;
      float: left; } }
  @media (min-width: 1230px) {
    .nav__search {
      width: 20.8333333333%;
      float: left; } }
  @media (min-width: 1460px) {
    .nav__search {
      width: 18.75%;
      float: left; } }
  .nav__search form {
    position: relative;
    border: none; }
  .nav__search input {
    box-sizing: border-box;
    display: block;
    margin: 0;
    position: relative;
    width: 100%;
    border: 1px solid #f2f2f2;
    padding: 7px 12px 5px;
    margin: 1px;
    outline: none; }
    .nav__search input:focus {
      border: 2px solid #d9d9d9;
      margin: 0; }
  .nav__search button {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 5px 10px;
    margin: 1px 1px 1px 0;
    border: none;
    background: none; }
  .nav__search img {
    height: 12px;
    opacity: 0.7; }

.cd-top {
  display: inline-block;
  height: 40px;
  width: 40px;
  position: fixed;
  bottom: 15px;
  right: 15px;
  z-index: 10000;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  border: 1px solid #99a4ab;
  border-radius: 50%;
  /* image replacement properties */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: #7c878e url(../../img/cd-top-arrow.svg) no-repeat center 50%;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  -moz-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s; }
  .cd-top.cd-is-visible, .cd-top.cd-fade-out,
  .no-touch .cd-top:hover {
    -webkit-transition: opacity .3s 0s, visibility 0s 0s;
    -moz-transition: opacity .3s 0s, visibility 0s 0s;
    transition: opacity .3s 0s, visibility 0s 0s; }
  .cd-top.cd-is-visible {
    /* the button becomes visible */
    visibility: visible;
    opacity: .7; }
  .cd-top.cd-fade-out {
    /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
    opacity: .5; }
  .no-touch .cd-top:hover {
    opacity: 1; }
  @media only screen and (min-width: 768px) {
    .cd-top .cd-top {
      right: 20px;
      bottom: 20px; } }
  @media only screen and (min-width: 1024px) {
    .cd-top .cd-top {
      height: 60px;
      width: 60px;
      right: 30px;
      bottom: 30px; } }

/*doc
---
title: Pagination
name: pagination
category: Components
---

```html_example
<ul class="pagination">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
</ul>
```
*/
/*doc
---
title: Panels
name: panels
category: Components
---

##Standard Panel

```html_example
<div class="panel">
    <h3>This is the title</h3>
    <p>This is the main copy for the panel.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
```

##Standard Panel with image

```html_example
<div class="panel">
    <img class="promo__img img--responsive" src="http://placehold.it/1000x500" alt=" " />
    <h3>This is the title</h3>
    <p>This is the main copy for the panel.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
```

##Panel with link

```html_example
<div class="panel panel--document equal">
    <h3>This is the title</h3>
    <p>This is the main copy for the panel.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p><a href="#" class="btn btn--primary">Download</a></p>
</div>
```



*/
.panel.panel--basic .panel__contents__copy, .panel.panel--article .panel__sidebar ul, .panel.panel--article .panel__contents, .panel.panel--article .panel__contacts {
  padding: 0 30px; }
  @media (min-width: 740px) {
    .panel.panel--basic .panel__contents__copy, .panel.panel--article .panel__sidebar ul, .panel.panel--article .panel__contents, .panel.panel--article .panel__contacts {
      box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.12);
      background: rgba(255, 255, 255, 0.4);
      padding: 45px 45px 60px;
      border: 1px solid rgba(255, 255, 255, 0.5); } 
      
      .panel.panel--article .panel__contacts {
        padding: 45px 25px 60px;
      }
      
  }

.panel strong {
  font-family: "Fs Lola Bold"; }

.panel .panel__contents__header {
  font-size: 1.8rem; }
  @media (min-width: 1008px) {
    .panel .panel__contents__header {
      font-size: 2.2rem;
      margin-bottom: 3rem; } }

.panel .panel__contents__strapline {
  color: #333333;
  font-family: "FS Lola";
  font-size: 1rem; }
  .panel .panel__contents__strapline:last-child {
    margin-bottom: 0; }
  @media (min-width: 500px) {
    .panel .panel__contents__strapline {
      font-size: 1.3rem; } }

.panel .panel__contents h1 {
  margin-bottom: 22.5px; }
  .panel .panel__contents h1 span {
    color: #bfbfbf;
    text-transform: uppercase;
    font-size: 1.9rem; }

.panel .panel__contents p + h2, .panel .panel__contents a + h2 {
  margin-top: 15px; }

@media (min-width: 1008px) {
  .panel .panel__contents p {
    text-align: justify; } }

.panel .panel__contents ul {
  margin-bottom: 15px; }
  .panel .panel__contents ul li {
    margin-bottom: 0.5rem;
    font-size: 1.05rem; }

.panel .panel__contents .gallery__item p {
  text-align: left; }

.panel .panel__contents__copy:after {
  content: "";
  display: table;
  clear: both; }

.panel .panel__contents__copy img {
  max-width: 100%;
  margin: 30px 0; }

.panel .panel__contents__copy a {
  font-family: "Fs Lola Bold"; }
  .panel .panel__contents__copy a, .panel .panel__contents__copy a:hover {
    text-decoration: none; }
  .panel .panel__contents__copy a[href^="tel"] {
    color: #2d363b !important;
    font-family: "FS Lola"; }

.panel .panel__contents__action {
  line-height: 1;
  margin-top: 1rem;
  text-transform: uppercase; }

.panel .panel__contents__link {
  font-family: "FS Lola";
  padding-top: 15px;
  border-bottom: 2px solid;
  padding-bottom: 2.5px;
  display: inline-block; }
  .panel .panel__contents__link:after {
    content: " »"; }

.panel.styleguide {
  padding: 60px 0; }

.panel.panel--basic .panel__contents, .panel.footer .panel__contents, .panel.styleguide .panel__contents {
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0; }
  @media (min-width: 1460px) {
    .panel.panel--basic .panel__contents, .panel.footer .panel__contents, .panel.styleguide .panel__contents {
      width: 58.3333333333%;
      float: left;
      margin-left: 20.8333333333%;
      margin-right: 20.8333333333%; } }
  @media (min-width: 1630px) {
    .panel.panel--basic .panel__contents, .panel.footer .panel__contents, .panel.styleguide .panel__contents {
      width: 50%;
      float: left;
      margin-left: 25%;
      margin-right: 25%; } }

.panel.panel--basic {
  background: url("../../img/bg1.png") no-repeat;
  background-size: 70%;
  background-position: left;
  padding: 30px 0; }
  @media (min-width: 740px) {
    .panel.panel--basic {
      padding: 60px 0; } }
  @media (min-width: 1460px) {
    .panel.panel--basic {
      padding: 75px 0 105px; } }
  .panel.panel--basic .panel__contents__header {
    margin-bottom: 30px;
    padding: 0 30px;
    text-align: left; }
    @media (min-width: 1008px) {
      .panel.panel--basic .panel__contents__header {
        padding: 0 45px;
        margin-bottom: 45px; } }
    .panel.panel--basic .panel__contents__header * {
      margin: 0; }
    .panel.panel--basic .panel__contents__header h2 {
      border-bottom: 5px solid;
      margin-bottom: 0;
      display: inline;
      padding: 0;
      font-family: "Fs Lola Bold";
      font-size: 1.2em;
      line-height: 1.5; }
      @media (min-width: 1008px) {
        .panel.panel--basic .panel__contents__header h2 {
          font-size: 1.5em;
          border-bottom: 5px solid; } }
  .panel.panel--basic .panel__contents__image {
    box-shadow: 1px 0 1px 0px rgba(0, 0, 0, 0.12);
    border-bottom: 8px solid #dedede;
    margin-bottom: 30px; }
    @media (min-width: 740px) {
      .panel.panel--basic .panel__contents__image {
        margin-bottom: 0; } }
    .panel.panel--basic .panel__contents__image img {
      width: 100%; }
  .panel.panel--basic .panel__contents__copy {
    font-size: 1.2rem; }
    @media (min-width: 1008px) {
      .panel.panel--basic .panel__contents__copy {
        font-size: 1.4rem; } }
    .panel.panel--basic .panel__contents__copy p {
      line-height: 1.45; }
    .panel.panel--basic .panel__contents__copy p:last-child {
      margin-bottom: 0; }
  .panel.panel--basic:nth-of-type(odd) {
    background-color: #f6f6f6;
    background-image: url("../../img/bg2.png");
    background-position: right; }
    .panel.panel--basic:nth-of-type(odd) .panel__contents__copy {
      background: rgba(255, 255, 255, 0.3); }
  .panel.panel--basic.panel--promos {
    padding: 45px 30px; }
    .panel.panel--basic.panel--promos h3 {
      font-family: "FS Lola"; }
    @media (min-width: 500px) {
      .panel.panel--basic.panel--promos {
        padding: 30px; } }
    @media (min-width: 740px) {
      .panel.panel--basic.panel--promos {
        padding: 75px 30px 15px; } }
    @media (min-width: 1008px) {
      .panel.panel--basic.panel--promos {
        padding: 135px 0; } }
    .panel.panel--basic.panel--promos .gallery__item {
      margin-bottom: 15px; }
      @media (min-width: 500px) {
        .panel.panel--basic.panel--promos .gallery__item:nth-child(n+2) {
          margin-bottom: 0; } }
      @media (min-width: 740px) {
        .panel.panel--basic.panel--promos .gallery__item {
          margin-bottom: 45px; }
          .panel.panel--basic.panel--promos .gallery__item:nth-child(n+2) {
            margin-bottom: 15px; } }
      @media (min-width: 1008px) {
        .panel.panel--basic.panel--promos .gallery__item {
          margin-bottom: 0; } }
  .panel.panel--basic.panel--prices {
    padding: 45px 0 15px;
    background-color: #2d363b;
    background-image: url("../../img/bg3.png"); }
    @media (min-width: 1008px) {
      .panel.panel--basic.panel--prices {
        padding: 75px 0 60px; } }
    @media (min-width: 740px) {
      .panel.panel--basic.panel--prices .panel__contents__header {
        padding-left: 0;
        padding-right: 0; } }
    .panel.panel--basic.panel--prices .panel__contents__header h2 {
      color: #fff;
      border-color: rgba(255, 255, 255, 0.1) !important; }
    .panel.panel--basic.panel--prices .panel__contents__copy {
      background: none;
      box-shadow: none;
      border: none; }
      @media (min-width: 740px) {
        .panel.panel--basic.panel--prices .panel__contents__copy {
          padding-left: 0;
          padding-right: 0; } }
    .panel.panel--basic.panel--prices a {
      font-family: "FS Lola"; }

.panel.panel--listing .gallery__item {
  border-bottom: 1px solid #dddddd;
  border-bottom-style: dashed;
  margin-bottom: 15px; }
  @media (min-width: 740px) {
    .panel.panel--listing .gallery__item {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0; } }

.panel.panel--listing .panel__contents__copy {
  border-bottom: none; }
  @media (min-width: 740px) {
    .panel.panel--listing .panel__contents__copy {
      padding: 30px 45px; }
      .panel.panel--listing .panel__contents__copy:last-child {
        padding-bottom: 45px; } }

.panel.panel--listing .panel__contents__copy:last-child .gallery__item {
  border-bottom: none; }

.panel.panel--hero {
  width: 100%; }
  @media (min-width: 500px) {
    .panel.panel--hero .container--wide {
      position: relative; } }
  .panel.panel--hero .panel__image {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    min-height: 275px;
    width: 100%;
    float: left;
    margin-left: 0;
    margin-right: 0; }
    @media (min-width: 500px) {
      .panel.panel--hero .panel__image {
        min-height: 375px; } }
    @media (min-width: 740px) {
      .panel.panel--hero .panel__image {
        width: 100%;
        float: left;
        margin-left: 0;
        margin-right: 0;
        min-height: 475px; } }
    @media (min-width: 1008px) {
      .panel.panel--hero .panel__image {
        width: 72.9166666667%;
        float: left;
        min-height: 520px; } }
    @media (min-width: 1230px) {
      .panel.panel--hero .panel__image {
        width: 77.0833333333%;
        float: left;
        min-height: 600px; } }
    @media (min-width: 1460px) {
      .panel.panel--hero .panel__image {
        width: 79.1666666667%;
        float: left;
        min-height: 650px; } }
    @media (min-width: 1630px) {
      .panel.panel--hero .panel__image {
        width: 75%;
        float: left;
        min-height: 700px; } }
  .panel.panel--hero .panel__contents {
    width: 100%;
    float: left;
    margin-left: 0;
    margin-right: 0; }
    @media (min-width: 500px) {
      .panel.panel--hero .panel__contents {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 50%;
        float: left;
        margin-left: -50%; } }
    @media (min-width: 740px) {
      .panel.panel--hero .panel__contents {
        width: 33.3333333333%;
        float: left;
        margin-left: -33.3333333333%; } }
    @media (min-width: 1008px) {
      .panel.panel--hero .panel__contents {
        position: static;
        transform: none;
        right: auto;
        top: auto;
        margin-left: 0%;
        width: 25%;
        float: left; } }
    @media (min-width: 1230px) {
      .panel.panel--hero .panel__contents {
        width: 20.8333333333%;
        float: left; } }
    @media (min-width: 1460px) {
      .panel.panel--hero .panel__contents {
        width: 18.75%;
        float: left; } }
  @media (min-width: 1008px) {
    .panel.panel--hero .panel__contents__header {
      margin-top: 60px; } }
  .panel.panel--hero .panel__contents__header h1, .panel.panel--hero .panel__contents__header h2 {
    color: #fff;
    padding: 15px 30px 10px;
    margin: 0;
    display: block; }
  .panel.panel--hero .panel__contents__header .header--main {
    position: relative;
    background: #002a3a; }
    @media (min-width: 740px) {
      .panel.panel--hero .panel__contents__header .header--main {
        min-height: 200px; } }
    @media (min-width: 1008px) {
      .panel.panel--hero .panel__contents__header .header--main {
        min-height: 280px;
        margin-left: -60px; } }
    @media (min-width: 1230px) {
      .panel.panel--hero .panel__contents__header .header--main {
        min-height: 300px; } }
    .panel.panel--hero .panel__contents__header .header--main h1 {
      font-size: 2.8rem; }
      @media (min-width: 500px) {
        .panel.panel--hero .panel__contents__header .header--main h1 {
          font-size: 2.8rem; } }
      @media (min-width: 740px) {
        .panel.panel--hero .panel__contents__header .header--main h1 {
          position: absolute;
          bottom: 0; } }
      @media (min-width: 1460px) {
        .panel.panel--hero .panel__contents__header .header--main h1 {
          font-size: 3.2rem; } }
      @media (min-width: 1630px) {
        .panel.panel--hero .panel__contents__header .header--main h1 {
          font-size: 3.5rem; } }
    .panel.panel--hero .panel__contents__header .header--main br {
      display: none; }
      @media (min-width: 500px) {
        .panel.panel--hero .panel__contents__header .header--main br {
          display: block; } }
  .panel.panel--hero .panel__contents__header .header--secondary {
    background: #00a9e0; }
    .panel.panel--hero .panel__contents__header .header--secondary h2 {
      font-size: 1.3rem; }
      @media (min-width: 1008px) {
        .panel.panel--hero .panel__contents__header .header--secondary h2 {
          font-size: 1.4rem; } }
  .panel.panel--hero .panel__contents__strapline {
    font-size: 1.3rem;
    text-transform: uppercase; }
  .panel.panel--hero .panel__contents__copy {
    margin-bottom: 0; }
  .panel.panel--hero .panel__contents__action {
    color: #333333;
    margin-top: 1rem; }
    .panel.panel--hero .panel__contents__action:first-child {
      margin-top: 0;
      width: auto; }
    .panel.panel--hero .panel__contents__action .btn {
      background: transparent;
      border: none;
      padding: 0;
      border-bottom: 1px solid #dddddd;
      border-color: transparent; }
      .panel.panel--hero .panel__contents__action .btn:hover {
        background: none;
        border-color: #000; }

.panel.panel--article {
  padding: 30px 0 30px;
  background: url("../../img/bg-large.png") no-repeat; }
  .panel.panel--article p, .panel.panel--article h1, .panel.panel--article h2, .panel.panel--article h3, .panel.panel--article h4, .panel.panel--article h5, .panel.panel--article h6 {
    margin-top: 0; }
  .panel.panel--article h1 {
    font-size: 2.4rem; }
  .panel.panel--article h2 {
    font-size: 1.6rem;
    font-family: "Fs Lola Bold"; }
  .panel.panel--article h3 {
    font-size: 1.3rem; }
  .panel.panel--article p {
    font-size: 1.05rem; }
    .panel.panel--article p.copy--small {
      font-size: 0.9rem; }
  .panel.panel--article a:hover, .panel.panel--article a:focus {
    text-decoration: none; }
  .panel.panel--article .panel__sidebar {
    margin-bottom: 15px; }
    @media (min-width: 740px) {
      .panel.panel--article .panel__sidebar {
        text-align: left;
        width: 29.1666666667%;
        float: left;
        margin-left: 4.1666666667%; } }
    @media (min-width: 1230px) {
      .panel.panel--article .panel__sidebar {
        width: 20.8333333333%;
        float: left;
        margin-left: 4.1666666667%; } }
    @media (min-width: 1460px) {
      .panel.panel--article .panel__sidebar {
        width: 18.75%;
        float: left;
        margin-left: 8.3333333333%; } }
    @media (min-width: 1630px) {
      .panel.panel--article .panel__sidebar {
        width: 14.5833333333%;
        float: left;
        margin-left: 12.5%; } }
    .panel.panel--article .panel__sidebar ul {
      text-transform: capitalize;
      background-color: rgba(255, 255, 255, 0.6);
      padding-top: 15px;
      padding-bottom: 5px;
      margin-top: -30px;
      text-align: center; }
      @media (min-width: 740px) {
        .panel.panel--article .panel__sidebar ul {
          text-align: left;
          margin-right: 30px;
          margin-top: 0;
          margin-left: 0;
          padding: 30px 15px; } }
      .panel.panel--article .panel__sidebar ul li {
        font-size: 1.2rem;
        color: #00A9E0;
        margin-bottom: 7.5px;
        display: inline-block;
        border-left: 1px solid;
        padding: 0 10px; }
        @media (min-width: 740px) {
          .panel.panel--article .panel__sidebar ul li {
            border-left: none;
            border-right: none;
            display: block;
            font-size: 1rem;
            margin-bottom: 15px;
            border-bottom: 1px solid rgba(200, 201, 199, 0.5);
            padding: 0 0 15px; } }
        .panel.panel--article .panel__sidebar ul li:first-child {
          padding-left: 0;
          border-left: none; }
        .panel.panel--article .panel__sidebar ul li:last-child {
          border-bottom: none;
          margin-bottom: 0;
          padding-bottom: 0; }
        .panel.panel--article .panel__sidebar ul li.overview {
          font-family: "Fs Lola Bold"; }
        @media (min-width: 740px) {
          .panel.panel--article .panel__sidebar ul li.active:before {
            content: "|";
            float: left;
            margin-left: -20px;
            font-size: 2em; } }
        .panel.panel--article .panel__sidebar ul li a {
          padding-top: 5px; }
  .panel.panel--article .panel__main {
    max-width: 1050px; }
    @media (min-width: 740px) {
      .panel.panel--article .panel__main {
        width: 62.5%;
        float: left; } }
    @media (min-width: 1008px) {
      .panel.panel--article .panel__main {
        width: 60.4166666667%;
        float: left; } }
    @media (min-width: 1230px) {
      .panel.panel--article .panel__main {
        width: 52.0833333333%;
        float: left; } }
    @media (min-width: 1630px) {
      .panel.panel--article .panel__main {
        width: 47.9166666667%;
        float: left; } }
  .panel.panel--article.panel--article--reverse .panel__sidebar {
    display: block; }
    @media (min-width: 740px) {
      .panel.panel--article.panel--article--reverse .panel__sidebar {
        margin-left: 8.3333333333%;
        width: 83.3333333333%;
        float: left;
        margin-right: 8.3333333333%; } }
    @media (min-width: 1008px) {
      .panel.panel--article.panel--article--reverse .panel__sidebar {
        width: 33.3333333333%;
        float: right;
        margin-right: 0;
        margin-left: 0%;
        margin-right: 4.1666666667%; } }
    @media (min-width: 1230px) {
      .panel.panel--article.panel--article--reverse .panel__sidebar {
        width: 29.1666666667%;
        float: right;
        margin-right: 0;
        margin-left: 0%;
        margin-right: 22.9166666667%; } }
    @media (min-width: 1460px) {
      .panel.panel--article.panel--article--reverse .panel__sidebar {
        width: 22.9166666667%;
        float: right;
        margin-right: 0;
        margin-left: 0%;
        margin-right: 20.8333333333%; } }
    @media (min-width: 1630px) {
      .panel.panel--article.panel--article--reverse .panel__sidebar {
        width: 20.8333333333%;
        float: right;
        margin-right: 0;
        margin-left: 0%;
        margin-right: 25%; } }
  @media (min-width: 740px) {
    .panel.panel--article.panel--article--reverse .panel__main {
      margin-left: 8.3333333333%;
      width: 83.3333333333%;
      float: left;
      margin-right: 8.3333333333%; } }
  @media (min-width: 1008px) {
    .panel.panel--article.panel--article--reverse .panel__main {
      margin-right: 0%;
      width: 58.3333333333%;
      float: left;
      margin-left: 4.1666666667%; } }
  @media (min-width: 1230px) {
    .panel.panel--article.panel--article--reverse .panel__main {
      margin-right: 0%;
      width: 43.75%;
      float: left;
      margin-left: 4.1666666667%; } }
  @media (min-width: 1460px) {
    .panel.panel--article.panel--article--reverse .panel__main {
      margin-right: 0%;
      width: 43.75%;
      float: left;
      margin-left: 12.5%; } }
  @media (min-width: 1630px) {
    .panel.panel--article.panel--article--reverse .panel__main {
      margin-right: 0%;
      width: 43.75%;
      float: left;
      margin-left: 10.4166666667%; } }
  @media (min-width: 740px) {
    .panel.panel--article .panel__sidebar ul, .panel.panel--article .panel__contents:first-child, .panel.panel--article .panel__contacts {
      border-top: 7.5px solid rgba(200, 201, 199, 0.5); } }
  .panel.panel--article .panel__contents {
    padding: 15px 30px; }
    @media (min-width: 740px) {
      .panel.panel--article .panel__contents {
        padding: 30px 30px; } }
    .panel.panel--article .panel__contents a {
      color: #00A9E0; }
      .panel.panel--article .panel__contents a:hover {
        text-decoration: underline; }
    .panel.panel--article .panel__contents ul {
      list-style: disc; }
      .panel.panel--article .panel__contents ul li {
        margin-left: 15px; }
    .panel.panel--article .panel__contents img {
      max-width: 100%; }
  .panel.panel--article .panel__contacts {
    border-bottom: 1px solid #dddddd; }
    .panel.panel--article .panel__contacts:after {
      content: "";
      display: table;
      clear: both; }
    @media (min-width: 1008px) {
      .panel.panel--article .panel__contacts {
        margin-left: 30px; } }
    .panel.panel--article .panel__contacts .contact {
      border-bottom: 1px solid #dddddd;
      margin-bottom: 15px; }
      .panel.panel--article .panel__contacts .contact:last-child {
        border: none;
        margin: 0; }
      .panel.panel--article .panel__contacts .contact p {
        line-height: 1.2;
        margin-bottom: 15px;
        font-size: .95rem; }
      @media (min-width: 500px) and (max-width: 1007px) {
        .panel.panel--article .panel__contacts .contact {
          width: 47.0588235294%;
          float: left; }
          .panel.panel--article .panel__contacts .contact:nth-child(2n + 1) {
            margin-left: 0;
            margin-right: -100%;
            clear: both;
            margin-left: 0; }
          .panel.panel--article .panel__contacts .contact:nth-child(2n + 2) {
            margin-left: 52.9411764706%;
            margin-right: -100%;
            clear: none; } }
    .panel.panel--article .panel__contacts p.contact__title {
      color: #00A9E0;
      font-family: "Fs Lola Bold";
      font-size: 1.4rem; }
  .panel.panel--article .panel__form {
    border-top: 1px solid #dddddd;
    padding-top: 15px;
    margin-top: 45px; }

@media (min-width: 740px) {
  .panel.panel--article + .footer .panel__contents {
    margin-left: 8.3333333333%;
    margin-right: 8.3333333333%;
    width: 83.3333333333%;
    float: left; } }

@media (min-width: 1008px) {
  .panel.panel--article + .footer .panel__contents {
    margin-left: 4.1666666667%;
    margin-right: 4.1666666667%;
    width: 91.6666666667%;
    float: left; } }

@media (min-width: 1230px) {
  .panel.panel--article + .footer .panel__contents {
    margin-left: 4.1666666667%;
    margin-right: 14.5833333333%;
    width: 72.9166666667%;
    float: left; } }

@media (min-width: 1460px) {
  .panel.panel--article + .footer .panel__contents {
    margin-left: 12.5%;
    margin-right: 20.8333333333%;
    width: 66.6666666667%;
    float: left; } }

@media (min-width: 1630px) {
  .panel.panel--article + .footer .panel__contents {
    margin-left: 12.5%;
    margin-right: 25%;
    width: 62.5%;
    float: left; } }

.gallery {
  overflow: auto; }

.gallery__item {
  margin-bottom: 15px;
  padding-bottom: 22.5px;
  border-bottom: 1px solid #dddddd;
  border-bottom-style: dashed; }
  .gallery__item:last-child {
    margin-bottom: 0;
    border-bottom: none; }
  @media (min-width: 1008px) {
    .gallery__item {
      margin-bottom: 0;
      border: none;
      padding-bottom: 0; } }
  .gallery__item h3 {
    line-height: 1.2;
    font-family: "Fs Lola Bold";
    font-size: 1.4rem;
    margin-top: 0;
    margin-bottom: 11.25px; }
    @media (min-width: 1008px) {
      .gallery__item h3 {
        font-size: 1.5rem;
        margin-bottom: 15px; } }
  .gallery__item h4 {
    font-size: .9rem;
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
    display: inline-block;
    margin-top: 0; }
  .gallery__item p {
    font-size: 1rem;
    margin-bottom: 15px; }
  .gallery__item a.gallery__item__action {
    font-family: "FS Lola";
    font-size: 1rem;
    padding-top: 7.5px;
    border-bottom: 2px solid;
    padding-bottom: 2.5px; }

.gallery__item__action:after {
  content: " »"; }

.gallery--cards {
  overflow: visible; }
  .gallery--cards .gallery__item {
    box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.12);
    background: rgba(255, 255, 255, 0.4);
    border-bottom: 15px solid #00A9E0;
    position: relative;
    padding-bottom: 0; }
    .gallery--cards .gallery__item * {
      margin: 0; }
    @media (min-width: 740px) {
      .gallery--cards .gallery__item:hover img {
        -webkit-filter: grayscale(0);
        filter: grayscale(0); }
      .gallery--cards .gallery__item:hover a:before {
        background: none; } }
    .gallery--cards .gallery__item a {
      z-index: 3;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      display: block; }
      @media (min-width: 740px) {
        .gallery--cards .gallery__item a:before {
          transition: background 0.5s ease;
          z-index: 1;
          display: block;
          content: "";
          position: absolute;
          top: -15px;
          bottom: 0;
          left: 0;
          right: 0;
          background: rgba(45, 54, 59, 0.65); } }
    .gallery--cards .gallery__item img {
      width: 100%; }
      @media (min-width: 740px) {
        .gallery--cards .gallery__item img {
          margin-top: -15px;
          -webkit-filter: grayscale(1);
          filter: grayscale(1); } }
    .gallery--cards .gallery__item h3 {
      z-index: 2;
      position: absolute;
      bottom: 0;
      left: 15px;
      right: 15px;
      background: #fff;
      padding: 15px;
      font-size: 1.5rem; }

.gallery-1 .gallery__item {
  width: 100%;
  float: left; }
  .gallery-1 .gallery__item:nth-child(1n + 1) {
    margin-left: 0;
    margin-right: -100%;
    clear: none; }

.gallery-2 .gallery__item {
  width: 50%;
  float: left; }
  .gallery-2 .gallery__item:nth-child(2n + 1) {
    margin-left: 0;
    margin-right: -100%;
    clear: both;
    margin-left: 0; }
  .gallery-2 .gallery__item:nth-child(2n + 2) {
    margin-left: 50%;
    margin-right: -100%;
    clear: none; }

@media (min-width: 1008px) {
  .gallery-3 .gallery__item {
    width: 30%;
    float: left; }
    .gallery-3 .gallery__item:nth-child(3n + 1) {
      margin-left: 0;
      margin-right: -100%;
      clear: both;
      margin-left: 0; }
    .gallery-3 .gallery__item:nth-child(3n + 2) {
      margin-left: 35%;
      margin-right: -100%;
      clear: none; }
    .gallery-3 .gallery__item:nth-child(3n + 3) {
      margin-left: 70%;
      margin-right: -100%;
      clear: none; } }

@media (min-width: 500px) {
  .gallery-4 .gallery__item {
    width: 48.5714285714%;
    float: left; }
    .gallery-4 .gallery__item:nth-child(2n + 1) {
      margin-left: 0;
      margin-right: -100%;
      clear: both;
      margin-left: 0; }
    .gallery-4 .gallery__item:nth-child(2n + 2) {
      margin-left: 51.4285714286%;
      margin-right: -100%;
      clear: none; } }

@media (min-width: 740px) {
  .gallery-4 .gallery__item {
    width: 47.3684210526%;
    float: left; }
    .gallery-4 .gallery__item:nth-child(2n + 1) {
      margin-left: 0;
      margin-right: -100%;
      clear: both;
      margin-left: 0; }
    .gallery-4 .gallery__item:nth-child(2n + 2) {
      margin-left: 52.6315789474%;
      margin-right: -100%;
      clear: none; } }

@media (min-width: 1008px) {
  .gallery-4 .gallery__item {
    width: 22.8571428571%;
    float: left; }
    .gallery-4 .gallery__item:nth-child(4n + 1) {
      margin-left: 0;
      margin-right: -100%;
      clear: both;
      margin-left: 0; }
    .gallery-4 .gallery__item:nth-child(4n + 2) {
      margin-left: 25.7142857143%;
      margin-right: -100%;
      clear: none; }
    .gallery-4 .gallery__item:nth-child(4n + 3) {
      margin-left: 51.4285714286%;
      margin-right: -100%;
      clear: none; }
    .gallery-4 .gallery__item:nth-child(4n + 4) {
      margin-left: 77.1428571429%;
      margin-right: -100%;
      clear: none; } }

.vacancies:after {
  content: "";
  display: table;
  clear: both; }

.vacancies h1 {
  margin-bottom: 30px; }

.vacancies .vacancy {
  margin-bottom: 45px; }
  .vacancies .vacancy:last-child {
    margin-bottom: 0; }
  @media (min-width: 500px) {
    .vacancies .vacancy {
      width: 47.0588235294%;
      float: left; }
      .vacancies .vacancy:nth-child(2n + 1) {
        margin-left: 0;
        margin-right: -100%;
        clear: both;
        margin-left: 0; }
      .vacancies .vacancy:nth-child(2n + 2) {
        margin-left: 52.9411764706%;
        margin-right: -100%;
        clear: none; }
      .vacancies .vacancy:nth-last-child(1), .vacancies .vacancy:nth-last-child(2) {
        margin-bottom: 0; } }

.vacancies h2.vacancy__title {
  font-size: 1.4rem;
  margin-bottom: 7.5px; }

.vacancies h3.vacancy__date {
  margin: 0 0 7.5px 0;
  font-size: 0.9rem;
  border-bottom: 1px solid #d9d9d9; }

.panel__sections:after {
  content: "";
  display: table;
  clear: both; }

@media (min-width: 500px) {
  .panel__sections .panel__section {
    width: 50%;
    float: left; }
    .panel__sections .panel__section:nth-child(2n + 1) {
      margin-left: 0;
      margin-right: -100%;
      clear: both;
      margin-left: 0; }
    .panel__sections .panel__section:nth-child(2n + 2) {
      margin-left: 50%;
      margin-right: -100%;
      clear: none; } }

/*doc
---
title: Tabs
name: tabs
category: Components
---

```html_example
<ul class="nav nav--tabs" style="margin-bottom: 15px;">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#profile">Profile</a></li>
    <li class="disabled"><a>Disabled</a></li>
    <li class="dropdown">
        <a href="#" class="dropdown__toggle">Dropdown <b class="caret"></b></a>
        <ul class="dropdown__menu">
            <li><a href="#dropdown1">Action</a></li>
            <li class="divider"></li>
            <li><a href="#dropdown2">Another action</a></li>
        </ul>
    </li>
</ul>
<div id="myTabContent" class="tab__content">
    <div class="tab--pane active" id="home">
        <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
    </div>
    <div class="tab--pane" id="profile">
        <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.</p>
    </div>
    <div class="tab--pane" id="dropdown1">
        <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork.</p>
    </div>
    <div class="tab--pane" id="dropdown2">
        <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater.</p>
    </div>
</div>
```

*/
.tab__content .tab--pane {
  display: none; }
  .tab__content .tab--pane.active {
    display: block; }


ul.whr-items,
ul.whr-info {
  list-style: none !important;
}

ul.whr-items h3 {
    margin-bottom: 0;   
}

ul.whr-items li,
ul.whr-info li {
    margin-left: 0 !important;   
}
}
}
}

/*# sourceMappingURL=global.css.map */