team-directory/css/base.css

/*
    Reset ♥
    http://meyerweb.com/eric/tools/css/reset/
    v2.0 | 20110126
    License: none (public domain)
------------------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  font-size:100%;
  font:inherit;
  vertical-align:baseline;
  }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display:block;
  }
body { line-height:1; }
ol, ul { list-style:none;  }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }
/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: collapse; border-spacing:0; }
/* remember to define focus styles. Hee Haw */
:focus { outline:0; }

*, *:after, *:before {
  -webkit-box-sizing:border-box;
     -moz-box-sizing:border-box;
          box-sizing:border-box;
  }

/* Inline Elements: Defaults
------------------------------------------------------- */
body,
input,
textarea {
  color:#404040;
  color:rgba(0,0,0,0.75);
  font:16px/24px 'Open sans', 'Helvetica neue', Helvetica, sans-serif;
  -webkit-font-smoothing:antialiased;
  }

body { background:#fff; }
.dark { color:#fff; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family:'Open Sans Bold', 'Helvetica neue', Helvetica, sans-serif;
  font-weight:normal;
  margin:0;
  }

h1 {
  font-size:30px;
  line-height:40px;
  }
h2 {
  font-size:22px;
  line-height:30px;
  padding-top: 5px;
  padding-bottom:5px;
  }

h3 {
  font-size:15px;
  line-height:20px;
  }

h4, h5, h6 {
  font-size:12px;
  line-height:20px;
  }

p { margin-bottom:20px; }

p:last-child { margin-bottom:0; }

small,
.small {
  font-size:12px;
  line-height:20px;
  letter-spacing:0;
  }

small { display:block; }

.strong,
strong {
  font-weight:700;
  }

/* Links */
a,
a code {
  color:#3887BE;
  text-decoration:none;
  }
  a:hover code,
  a:hover { color:#63b6e5; }
  a:focus {
    -webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,0.05);
            box-shadow:inset 0 0 0 1px rgba(0,0,0,0.05);
  }

.dark a,
a.dark,
.dark a > code  { color:rgba(255,255,255,.5); }
a.dark.active,
.dark a.active,
a.dark:hover,
.dark a:hover > code,
.dark a:hover { color:white; }
.dark a:focus {
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.05);
  }

a.quiet       { color:rgba(0,0,0,0.5);  }
a.quiet.active, a.quiet:hover { color:rgba(0,0,0,0.75); }

/* Buttons */
button,
.button,
[type=button],
[type=submit] {
  background-color:#3887be;
  text-align:center;
  color:#fff;
  display:inline-block;
  height:40px;
  margin:0px;
  padding:10px;
  position:relative;
  border:none;
  cursor:pointer;
  border-radius:3px;
  white-space:nowrap;
  text-overflow:ellipsis;
  /* Protects button metrics in .prose context */
  line-height:20px;
  font-size:12px;
  -webkit-appearance:none;
  font-weight:700;

  /* The button element needs to be forced this */
  -webkit-font-smoothing:antialiased;
  }

button:hover,
.button:hover,
.button.active,
[type=button]:hover,
[type=submit]:hover {
  color:#fff;
  }

button:focus,
.button:focus,
[type=submit]:focus,
[type=button]:focus {
  -webkit-box-shadow: inset 0 0 0 3px rgba(0,0,0,0.1);
  box-shadow: inset 0 0 0 3px rgba(0,0,0,0.1);
}

button:hover,
.button:hover,
.button.active,
[type=submit]:hover,
[type=button]:hover {
  background-color:#52a1d8;
  }
button.button-secondary,
.button.button-secondary {
  background-color:#8889cc;
  }
button.button-secondary:hover,
.button.button-secondary.active,
.button.button-secondary:hover {
  background-color:#a4a4e5;
  }

.button.disabled,
.button:disabled,
button.disabled,
button:disabled,
[type=submit]:disabled,
[type=button]:disabled {
  background:transparent;
  border:1px dashed rgba(0,0,0,0.25);
  color:rgba(0,0,0,0.25);
  cursor:not-allowed;
  }

.button.disabled:hover,
.button:disabled:hover,
button.disabled:hover,
button:disabled:hover,
[type=submit]:disabled:hover,
[type=button]:disabled:hover {
  background:transparent;
  }

.button.disabled:focus,
.button:disabled:focus,
button.disabled:focus,
button:disabled:focus,
[type=submit]:disabled:focus,
[type=button]:disabled:focus {
  box-shadow:none;
  }

.button.short {
  height:30px;
  padding-top:5px;
  padding-bottom:5px;
  vertical-align:middle;
  }

/* Pill wrapper for joining buttons. */
/* Use <!-- --> to eliminate whitespace between buttons. */
.pill{
  display:inline-block;
  }
  .pill > * {
    border-radius:0 0 0 0;
    border:0 solid white;
    border-left-width:1px;
    }
    .pill > *:first-of-type,
    .pill > *:first-child {
      border-radius:3px 0 0 3px;
      border-left-width:0;
      }
    .pill > *:last-of-type,
    .pill > *:last-child {
      border-radius:0 3px 3px 0;
      }

/* Vertical pill if pill contents is full width . */
.pill > .col12 {
  border-bottom-width:1px;
  border-left-width:0;
  }
  .pill > .col12:first-child {
    border-radius:3px 3px 0 0;
    }
  .pill > .col12:last-child {
    border-radius:0 0 3px 3px;
    border-bottom:none;
    }
  .pill > .col12:only-child {
    border-radius: 3px;
    }

.pill input[type=text] {
  border:1px solid rgba(0,0,0,0.1);
  border-radius:0;
  }

.pill input[type=text]:focus {
  border:1px solid rgba(0,0,0,0.25);
  }

/* Checkbox pill - use in conjunction with pill + button
-------------------------------------------------- */
.checkbox-pill input[type=checkbox] { display: none;}
.checkbox-pill input[type=checkbox] + *:before { background-color: rgba(0,0,0,0.25); border-radius: 2px;}
.checkbox-pill input[type=checkbox]:not(:checked) + *:before { content: '';}
.checkbox-pill input[type=checkbox]:checked + .button { background-color: #52a1d8;}
.checkbox-pill input[type=checkbox]:checked + .button.quiet { background-color: rgba(0,0,0,.5);}
.checkbox-pill input[type=checkbox]:checked + .button.loud { background-color: #a4a4e5;}
.dark.checkbox-pill input[type=checkbox]:checked + .button.quiet,
.dark .checkbox-pill input[type=checkbox]:checked + .button.quiet { background-color: rgba(255,255,255,0.25);}

/* Radio pill - use in conjunction with pill + button
-------------------------------------------------- */
.radio-pill input[type=radio] { display: none;}
.radio-pill input[type=radio] + .button:before { overflow: hidden;}
.radio-pill input[type=radio]:not(:checked) + .button:before { width: 0;}
.radio-pill input[type=radio]:checked + .button { background-color: #52a1d8;}
.radio-pill input[type=radio]:checked + .button.quiet { background-color: rgba(0,0,0,.5);}
.radio-pill input[type=radio]:checked + .button.loud { background-color: #a4a4e5;}
.dark.radio-pill input[type=radio]:checked + .button.quiet,
.dark .radio-pill input[type=radio]:checked + .button.quiet { background-color: rgba(255,255,255,0.25);}

/* Rounded toggle
-------------------------------------------------- */
.rounded-toggle {
  margin-top:5px;
  margin-bottom:5px;
  padding:2px;
  border-radius:15px;
  vertical-align:middle;
  background:rgba(0,0,0,.1)
  }

.dark .rounded-toggle { background: rgba(255,255,255,.1);}
.rounded-toggle > * {
  cursor:pointer;
  vertical-align:top;
  display:inline-block;
  border-radius:16px;
  padding:3px 10px;
  font-size:12px;
  color:rgba(0,0,0,0.5);
  line-height:20px;
  }

.rounded-toggle > *:hover { color: rgba(0,0,0,0.75); }
.rounded-toggle input[type=radio] { display:none; }
.rounded-toggle input[type=radio]:checked + label,
.rounded-toggle .active { background: white; color: rgba(0,0,0,.5); }

form fieldset {
  margin: 0 0 20px;
  }
form fieldset:last-child {
  margin-bottom: 0;
  }

form fieldset label {
  font:12px/20px 'Open Sans Bold', sans-serif;
  display:block;
  margin:0 0 5px;
  }

form fieldset label.inline { margin-bottom: 0;}
input,
select,
button {
  vertical-align:top;
  }
textarea,
input[type=password],
input[type=text],
input[type=date],
input[type=email],
input[type=number] {
  background-color:#fff;
  border:1px solid rgba(0,0,0,0.1);
  display:inline-block;
  height:40px;
  margin:0;
  color:rgba(0,0,0,.5);
  padding:10px;
  border-radius:0;
  -webkit-appearance:none;
  -webkit-transition:border-color .05s;
     -moz-transition:border-color .05s;
      -ms-transition:border-color .05s;
          transition:border-color .05s;
  }
  textarea:focus,
  input[type=password]:focus,
  input[type=text]:focus,
  input[type=date]:focus,
  input[type=email]:focus,
  input[type=number]:focus {
    outline:thin dotted\8; /* ie8 below */
    border-color:rgba(0,0,0,0.25);
    color:#404040;
    }

textarea {
  height:80px;
  max-width:none;
  overflow:auto;
  resize:none;
  }

/* Special Form Components */
.with-icon {
  position:relative;
  }
  .with-icon input[type=text],
  .with-icon input[type=number] {
    padding-left:35px;
    }
  .with-icon span.icon {
    position:absolute;
    top:10px;
    left:10px;
    }

/* Checkboxes */
.checkbox input[type=checkbox] { display:none; }
.checkbox label {
  display:block;
  cursor:pointer;
  padding:10px;
  }

/* Icons
------------------------------------------------------- */
@font-face {
  font-family:'icon';
    src:url('icon.eot?v=19');
    src:url('icon.eot?v=19#iefix') format('embedded-opentype'),
        url('icon.woff?v=19') format('woff');
  font-weight:normal;
  font-style:normal;
  }

.icon:before {
  font-family: 'icon';
  content:'';
  display:inline-block;
  width:20px;
  height:20px;
  font-size: 20px;
  color: inherit;
  vertical-align:top;
  -webkit-background-size:4320px 60px;
          background-size:4320px 60px;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  }
.icon:before {
  margin-right:5px;
}
.icon.caret-down:before {
  content: "\e6a5";
}
.icon.caret-left:before {
  content: "\e6a6";
}
.icon.caret-right:before {
  content: "\e6a7";
}
.icon.caret-up:before {
  content: "\e6a8";
}
.icon.step-ramp:before {
  content: "\e69c";
}
.icon.smooth-ramp:before {
  content: "\e69d";
}
.icon.bug:before {
  content: "\e69e";
}
.icon.bell:before {
  content: "\e69f";
}
.icon.polygon:before {
  content: "\e600";
}
.icon.minus-document:before {
  content: "\e601";
}
.icon.plus-document:before {
  content: "\e602";
}
.icon.check-document:before {
  content: "\e603";
}
.icon.grid:before {
  content: "\e604";
}
.icon.osm:before {
  content: "\e605";
}
.icon.at:before {
  content: "\e606";
}
.icon.history:before {
  content: "\e607";
}
.icon.palette:before {
  content: "\e608";
}
.icon.sun:before {
  content: "\e609";
}
.icon.account:before {
  content: "\e60a";
}
.icon.adjust-stroke:before {
  content: "\e60b";
}
.icon.alert:before {
  content: "\e60c";
}
.icon.android:before {
  content: "\e60d";
}
.icon.antialias:before {
  content: "\e60e";
}
.icon.apple:before {
  content: "\e60f";
}
.icon.arrive:before {
  content: "\e610";
}
.icon.arrowright:before {
  content: "\e611";
}
.icon.bear-left:before {
  content: "\e612";
}
.icon.bear-right:before {
  content: "\e613";
}
.icon.bolt:before {
  content: "\e614";
}
.icon.book:before {
  content: "\e615";
}
.icon.bookmark:before {
  content: "\e616";
}
.icon.brackets:before {
  content: "\e617";
}
.icon.building:before {
  content: "\e618";
}
.icon.cap-butt:before {
  content: "\e619";
}
.icon.cap-round:before {
  content: "\e61a";
}
.icon.cap-square:before {
  content: "\e61b";
}
.icon.cart:before {
  content: "\e61c";
}
.icon.check:before {
  content: "\e61d";
}
.icon.clipboard:before {
  content: "\e61e";
}
.icon.close:before {
  content: "\e61f";
}
.icon.x:before {
  content: "\e61f";
}
.icon.cloud:before {
  content: "\e620";
}
.icon.compass:before {
  content: "\e621";
}
.icon.contact:before {
  content: "\e622";
}
.icon.creditcard:before {
  content: "\e623";
}
.icon.cross-edge:before {
  content: "\e624";
}
.icon.crosshair:before {
  content: "\e625";
}
.icon.dasharray:before {
  content: "\e626";
}
.icon.dashboard:before {
  content: "\e627";
}
.icon.data:before {
  content: "\e628";
}
.icon.depart:before {
  content: "\e629";
}
.icon.document:before {
  content: "\e62a";
}
.icon.down:before {
  content: "\e62b";
}
.icon.duplicate:before {
  content: "\e62c";
}
.icon.en:before {
  content: "\e62d";
}
.icon.enter-roundabout:before {
  content: "\e62e";
}
.icon.eye:before {
  content: "\e62f";
}
.icon.facebook:before {
  content: "\e630";
}
.icon.floppy:before {
  content: "\e631";
}
.icon.folder:before {
  content: "\e632";
}
.icon.nofolder:before {
  content: "\e6a9";
}
.icon.font:before {
  content: "\e633";
}
.icon.forward:before {
  content: "\e634";
}
.icon.foursquare:before {
  content: "\e635";
}
.icon.fullscreen:before {
  content: "\e636";
}
.icon.gap-width:before {
  content: "\e637";
}
.icon.github:before {
  content: "\e638";
}
.icon.gl:before {
  content: "\e639";
}
.icon.globe:before {
  content: "\e63a";
}
.icon.graph:before {
  content: "\e63b";
}
.icon.hand:before {
  content: "\e63c";
}
.icon.harddrive:before {
  content: "\e63d";
}
.icon.heart:before {
  content: "\e63e";
}
.icon.help:before {
  content: "\e63f";
}
.icon.home:before {
  content: "\e640";
}
.icon.info:before {
  content: "\e641";
}
.icon.inspect:before {
  content: "\e642";
}
.icon.join-miter:before {
  content: "\e643";
}
.icon.join-bevel:before {
  content: "\e644";
}
.icon.join-round:before {
  content: "\e645";
}
.icon.l-r-arrow:before {
  content: "\e646";
}
.icon.land:before {
  content: "\e647";
}
.icon.landuse:before {
  content: "\e648";
}
.icon.layers:before {
  content: "\e649";
}
.icon.leaflet:before {
  content: "\e64a";
}
.icon.levels:before {
  content: "\e64b";
}
.icon.lifebuoy:before {
  content: "\e64c";
}
.icon.line-miter-limit:before {
  content: "\e64d";
}
.icon.line-round-limit:before {
  content: "\e64e";
}
.icon.link:before {
  content: "\e64f";
}
.icon.linkedin:before {
  content: "\e650";
}
.icon.lock:before {
  content: "\e651";
}
.icon.logout:before {
  content: "\e652";
}
.icon.mail:before {
  content: "\e653";
}
.icon.mapbox:before {
  content: "\e654";
}
.icon.marker:before {
  content: "\e655";
}
.icon.icon-halo:before {
  content: "\e6a2";
}
.icon.symbol-layer:before {
  content: "\e6aa";
}
.icon.max-text-angle:before {
  content: "\e656";
}
.icon.menu:before {
  content: "\e657";
}
.icon.minus:before {
  content: "\e658";
}
.icon.mobile:before {
  content: "\e659";
}
.icon.mt:before {
  content: "\e65a";
}
.icon.next:before {
  content: "\e65b";
}
.icon.noeye:before {
  content: "\e65c";
}
.icon.opacity:before {
  content: "\e65d";
}
.icon.package:before {
  content: "\e65e";
}
.icon.paint:before {
  content: "\e65f";
}
.icon.pencil:before {
  content: "\e660";
}
.icon.picture:before {
  content: "\e661";
}
.icon.plus:before {
  content: "\e662";
}
.icon.point-line:before {
  content: "\e663";
}
.icon.point:before {
  content: "\e664";
}
.icon.polyline:before {
  content: "\e665";
}
.icon.prev:before {
  content: "\e666";
}
.icon.printer:before {
  content: "\e667";
}
.icon.raster:before {
  content: "\e668";
}
.icon.redo:before {
  content: "\e669";
}
.icon.refresh:before {
  content: "\e66a";
}
.icon.return:before {
  content: "\e66b";
}
.icon.rotate:before {
  content: "\e66c";
}
.icon.rss:before {
  content: "\e66d";
}
.icon.satellite:before {
  content: "\e66e";
}
.icon.search:before {
  content: "\e66f";
}
.icon.share:before {
  content: "\e670";
}
.icon.sharp-left:before {
  content: "\e671";
}
.icon.sharp-right:before {
  content: "\e672";
}
.icon.sprocket:before {
  content: "\e673";
}
.icon.stackoverflow:before {
  content: "\e674";
}
.icon.star:before {
  content: "\e675";
}
.icon.street:before {
  content: "\e676";
}
.icon.text-align-bottom-center:before {
  content: "\e677";
}
.icon.text-align-bottom-left:before {
  content: "\e678";
}
.icon.text-align-bottom-right:before {
  content: "\e679";
}
.icon.text-align-center-center:before {
  content: "\e67a";
}
.icon.text-align-center-left:before {
  content: "\e67b";
}
.icon.text-align-center-right:before {
  content: "\e67c";
}
.icon.text-align-overlap:before {
  content: "\e67d";
}
.icon.text-align-top-center:before {
  content: "\e67e";
}
.icon.text-align-top-left:before {
  content: "\e67f";
}
.icon.text-align-top-right:before {
  content: "\e680";
}
.icon.text-halo:before {
  content: "\e6a3";
}
.icon.text-halo-width:before {
  content: "\e681";
}
.icon.text-ignore-placement:before {
  content: "\e682";
}
.icon.text-justify-center:before {
  content: "\e683";
}
.icon.text-justify-left:before {
  content: "\e684";
}
.icon.text-justify-right:before {
  content: "\e685";
}
.icon.text-letter-spacing:before {
  content: "\e686";
}
.icon.text-line-height:before {
  content: "\e687";
}
.icon.text-max-width:before {
  content: "\e688";
}
.icon.text-padding:before {
  content: "\e689";
}
.icon.text-rotate:before {
  content: "\e68a";
}
.icon.text-size:before {
  content: "\e68b";
}
.icon.tilemill:before {
  content: "\e68c";
}
.icon.time:before {
  content: "\e68d";
}
.icon.tooltip:before {
  content: "\e68e";
}
.icon.transform-lowercase:before {
  content: "\e68f";
}
.icon.transform-uppercase:before {
  content: "\e690";
}
.icon.trash:before {
  content: "\e691";
}
.icon.position:before {
  content: "\e6a4";
}
.icon.turn-left:before {
  content: "\e692";
}
.icon.turn-right:before {
  content: "\e693";
}
.icon.twitter:before {
  content: "\e694";
}
.icon.tx:before {
  content: "\e695";
}
.icon.u-d-arrow:before {
  content: "\e696";
}
.icon.u-turn:before {
  content: "\e697";
}
.icon.undo:before {
  content: "\e698";
}
.icon.up:before {
  content: "\e699";
}
.icon.video:before {
  content: "\e69a";
}
.icon.water:before {
  content: "\e69b";
}
.icon.quotes:before {
  content: "\e6a0";
}
.icon.number:before {
  content: "\e6a1";
}
.icon.line:before {
  content: "\e6ab";
}
.icon.fill:before {
  content: "\e6ac";
}

/* Columns
------------------------------------------------------- */
.limiter {
  width:83.33%;
  max-width:1000px;
  margin-left:auto;
  margin-right:auto;
  }

.col0    { float:left; width:04.1666%; }
.col1    { float:left; width:08.3333%; }
.col2    { float:left; width:16.6666%; }
.col3    { float:left; width:25.0000%; }
.col4    { float:left; width:33.3333%; }
.col5    { float:left; width:41.6666%; }
.col6    { float:left; width:50.0000%; }
.col7    { float:left; width:58.3333%; }
.col8    { float:left; width:66.6666%; }
.col9    { float:left; width:75.0000%; }
.col10   { float:left; width:83.3333%; }
.col11   { float:left; width:91.6666%; }
.col12   { width:100%; display:block; }

.margin0  { margin-left:04.1666%; }
.margin1  { margin-left:08.3333%; }
.margin2  { margin-left:16.6666%; }
.margin3  { margin-left:25.0000%; }
.margin4  { margin-left:33.3333%; }
.margin5  { margin-left:41.6666%; }
.margin6  { margin-left:50.0000%; }
.margin7  { margin-left:58.3333%; }
.margin8  { margin-left:66.6666%; }
.margin9  { margin-left:75.0000%; }
.margin10 { margin-left:83.3333%; }
.margin11 { margin-left:91.6666%; }
.margin12 { margin-left:100.0000%; }

/* reverse margins on right-floated elements */
.margin0r  { margin-right:04.1666%; }
.margin1r  { margin-right:08.3333%; }
.margin2r  { margin-right:16.6666%; }
.margin3r  { margin-right:25.0000%; }
.margin4r  { margin-right:33.3333%; }
.margin5r  { margin-right:41.6666%; }
.margin6r  { margin-right:50.0000%; }
.margin7r  { margin-right:58.3333%; }
.margin8r  { margin-right:66.6666%; }
.margin9r  { margin-right:75.0000%; }
.margin10r { margin-right:83.3333%; }
.margin11r { margin-right:91.6666%; }
.margin12r { margin-right:100.0000%; }

.row0  { height: 0px;}
.row1  { height: 40px;}
.row2  { height: 80px;}
.row3  { height: 120px;}
.row4  { height: 160px;}
.row5  { height: 200px;}
.row6  { height: 240px;}
.row7  { height: 280px;}
.row8  { height: 320px;}
.row9  { height: 360px;}
.row10 { height: 400px;}
.row11 { height: 440px;}
.row12 { height: 480px;}
.row13 { height: 520px;}
.row14 { height: 560px;}
.row15 { height: 600px;}
.row16 { height: 640px;}

/* Padding
------------------------------------------------------- */
.pad0  { padding:5px;  }
.pad1  { padding:10px; }
.pad2  { padding:20px; }
.pad4  { padding:40px; }
.pad8  { padding:80px; }

.pad0x { padding-left: 5px; padding-right: 5px;}
.pad1x { padding-left: 10px; padding-right: 10px;}
.pad2x { padding-left: 20px; padding-right: 20px;}
.pad4x { padding-left: 40px; padding-right: 40px;}
.pad8x { padding-left: 80px; padding-right: 80px;}

.pad0y { padding-top: 5px; padding-bottom: 5px;}
.pad1y { padding-top: 10px; padding-bottom: 10px;}
.pad2y { padding-top: 20px; padding-bottom: 20px;}
.pad4y { padding-top: 40px; padding-bottom: 40px;}
.pad8y { padding-top: 80px; padding-bottom: 80px;}

/* Keylines
------------------------------------------------------- */
.keyline-all    { border:1px solid rgba(0,0,0,0.10); }
.keyline-top    { border-top:1px solid rgba(0,0,0,0.10); }
.keyline-right  { border-right:1px solid rgba(0,0,0,0.10); }
.keyline-bottom { border-bottom:1px solid rgba(0,0,0,0.10); }
.keyline-left   { border-left:1px solid rgba(0,0,0,0.10); }

/* Pinned containers
------------------------------------------------------- */
.pin-top,
.pin-right,
.pin-bottom,
.pin-left,
.pin-topleft,
.pin-topright,
.pin-bottomleft,
.pin-bottomright {
  position:absolute;
  }
  .pin-bottom { right:0; bottom:0; left:0; }
  .pin-top    { top:0; right:0; left:0; }
  .pin-left   { top:0; bottom:0; left:0; }
  .pin-right  { top:0; right:0; bottom:0; }
  .pin-bottomright { bottom:0; right:0; }
  .pin-bottomleft  { bottom:0; left:0; }
  .pin-topright    { top:0; right:0; }
  .pin-topleft     { top:0; left:0; }

/* Fixed containers
------------------------------------------------------- */
.fixed-top,
.fixed-right,
.fixed-bottom,
.fixed-left,
.fixed-topleft,
.fixed-topright,
.fixed-bottomleft,
.fixed-bottomright {
  position:fixed;
  }
  .fixed-bottom { right:0; bottom:0; left:0; }
  .fixed-top    { top:0; right:0; left:0; }
  .fixed-left   { top:0; bottom:0; left:0; }
  .fixed-right  { top:0; right:0; bottom:0; }
  .fixed-bottomright { bottom:0; right:0; }
  .fixed-bottomleft  { bottom:0; left:0; }
  .fixed-topright    { top:0; right:0; }
  .fixed-topleft     { top:0; left:0; }

/* Container Animations/Transitions
-------------------------------------------------- */
.animate {
  -webkit-transition:all .125s;
     -moz-transition:all .125s;
      -ms-transition:all .125s;
          transition:all .125s;
  }

.offcanvas-top    {
  -webkit-transform:translateY(-100%);
     -moz-transform:translateY(-100%);
      -ms-transform:translateY(-100%);
          transform:translateY(-100%);
  }
.offcanvas-right  {
  -webkit-transform:translateX(100%);
     -moz-transform:translateX(100%);
      -ms-transform:translateX(100%);
          transform:translateX(100%);
  }
.offcanvas-bottom {
  -webkit-transform:translateY(100%);
     -moz-transform:translateY(100%);
      -ms-transform:translateY(100%);
          transform:translateY(100%);
  }
.offcanvas-left   {
  -webkit-transform:translateX(-100%);
     -moz-transform:translateX(-100%);
      -ms-transform:translateX(-100%);
          transform:translateX(-100%);
  }

.offcanvas-top.active,
.offcanvas-bottom.active,
.offcanvas-top:target,
.offcanvas-bottom:target {
  -webkit-transform:translateY(0);
     -moz-transform:translateY(0);
      -ms-transform:translateY(0);
          transform:translateY(0);
  }

.offcanvas-left.active,
.offcanvas-right.active,
.offcanvas-left:target,
.offcanvas-right:target {
  -webkit-transform:translateX(0);
     -moz-transform:translateX(0);
      -ms-transform:translateX(0);
          transform:translateX(0);
  }

/* Markup free clearing
Details: http://www.positioniseverything.net/easyclearing.html
------------------------------------------------------- */
.clearfix { display:block; }
.clearfix:after {
  content:'.';
  display:block;
  height:0;
  clear:both;
  visibility:hidden;
  }

/* Color fills
------------------------------------------------------- */
.fill-blue        { background-color:#3887be; }
.fill-orange      { background-color:#f9886c; }
.fill-navy        { background-color:#28353d; }
.fill-navy-dark   { background-color:#222B30; }
.fill-purple      { background-color:#8a8acb; }
.fill-light       { background-color:#f8f8f8; }
.fill-red         { background-color:#e55e5e; }
.fill-gray,
.fill-grey        { background:#eee; }
.fill-darken1     { background-color:rgba(0,0,0,0.25); }

/* Additional Utility Classes
------------------------------------------------------- */
.fr                           { float:right; }
.fl                           { float:left; }
.dot                          { border-radius:50%; }
.light                        { color:#ccc; color: rgba(0,0,0,.3); }
.quiet                        { color:#7f7f7f; color: rgba(0,0,0,.5); }
.dark .quiet                  { color: #7f7f7f; color: rgba(255,255,255,.5);}
.center                       { text-align:center; }
.contain                      { position:relative; }
.clip                         { overflow:hidden; }
.hidden                       { display:none; }
.text-left                    { text-align:left; }
.text-right                   { text-align:right; }
.space > *                    { margin-right:5px; }
.space-bottom0                { margin-bottom:  5px;}
.space-bottom1                { margin-bottom: 10px;}
.space-bottom, /* deprecated, use space-bottom2 */
.space-bottom2                { margin-bottom: 20px;}
.space-bottom4                { margin-bottom: 40px;}
.space-bottom8                { margin-bottom: 80px;}
.hide-tablet, .hide-mobile    { display:block; }
.show-tablet, .show-mobile    { display:none; }
.show-mobile                  { display:none; }
img.inline, .inline           { display:inline-block; }
.sprite.block,.block          { display:block; }
.round                  { border-radius:3px; }
.round-top              { border-radius:3px 3px 0 0; }
.round-right            { border-radius:0 3px 3px 0; }
.round-bottom           { border-radius:0 0 3px 3px; }
.round-left             { border-radius:3px 0 0 3px; }
.round-topleft     { border-top-left-radius: 3px;}
.round-bottomleft  { border-bottom-left-radius: 3px;}
.round-topright    { border-top-right-radius: 3px;}
.round-bottomright { border-bottom-right-radius: 3px;}

.truncate {
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;
  }

/* Mobile Layout
------------------------------------------------------- */
@media only screen and (max-width:640px) {
  a:link          { -webkit-tap-highlight-color:rgba(0,0,0,0); }
  label .inline a { font-weight:normal; }
  [type=submit]   { width:100%; }

  .row1  { height:auto; min-height: 40px;}
  .row2  { height:auto; min-height: 80px;}
  .row3  { height:auto; min-height: 120px;}
  .row4  { height:auto; min-height: 160px;}
  .row5  { height:auto; min-height: 200px;}
  .row6  { height:auto; min-height: 240px;}
  .row7  { height:auto; min-height: 280px;}
  .row8  { height:auto; min-height: 320px;}
  .row9  { height:auto; min-height: 360px;}
  .row10 { height:auto; min-height: 400px;}
  .row11 { height:auto; min-height: 440px;}
  .row12 { height:auto; min-height: 480px;}
  .row13 { height:auto; min-height: 520px;}
  .row14 { height:auto; min-height: 560px;}
  .row15 { height:auto; min-height: 600px;}
  .row16 { height:auto; min-height: 640px;}

  .col1,
  .col2,
  .col3,
  .col4,
  .col5,
  .col6,
  .col7,
  .col8,
  .col9,
  .col10,
  .col11,
  .col12 { width:100%; max-width:100%; }
  .margin0,
  .margin1,
  .margin2,
  .margin3,
  .margin4,
  .margin5,
  .margin6,
  .margin7,
  .margin8,
  .margin9,
  .margin10,
  .margin11,
  .margin12                     { margin-left:0; }
  .title                        { margin-bottom:10px; }
  .space-bottom2, .space-bottom { margin-bottom:10px; }
  .space-bottom4                { margin-bottom:20px; }
  .hide-mobile                  { display:none!important; }
  .show-mobile                  { display:block!important; }

  .pill:not(.mobile-cols) > * {
    width:100%;
    border-left-width:0;
    border-bottom-width:1px;
    }
  .pill:not(.mobile-cols) > *:first-child,
  .pill:not(.mobile-cols) > *:first-of-type {
    border-radius:3px 3px 0 0;
    }
  .pill:not(.mobile-cols) > *:last-child,
  .pill:not(.mobile-cols) > *:last-of-type {
    border-bottom-width:0;
    border-radius:0 0 3px 3px;
    }
  .tabs:not(.mobile-cols) > a             { border-right-width:0; border-bottom-width:1px; }
  .tabs:not(.mobile-cols) > a:last-child  { border-bottom:none; }

  .mobile-cols > .col0    { float:left; width:04.1666%; }
  .mobile-cols > .col1    { float:left; width:08.3333%; }
  .mobile-cols > .col2    { float:left; width:16.6666%; }
  .mobile-cols > .col3    { float:left; width:25.0000%; }
  .mobile-cols > .col4    { float:left; width:33.3333%; }
  .mobile-cols > .col5    { float:left; width:41.6666%; }
  .mobile-cols > .col6    { float:left; width:50.0000%; }
  .mobile-cols > .col7    { float:left; width:58.3333%; }
  .mobile-cols > .col8    { float:left; width:66.6666%; }
  .mobile-cols > .col9    { float:left; width:75.0000%; }
  .mobile-cols > .col10   { float:left; width:83.3333%; }
  .mobile-cols > .col11   { float:left; width:91.6666%; }

  .mobile-cols > .margin0  { margin-left:04.1666%; }
  .mobile-cols > .margin1  { margin-left:08.3333%; }
  .mobile-cols > .margin2  { margin-left:16.6666%; }
  .mobile-cols > .margin3  { margin-left:25.0000%; }
  .mobile-cols > .margin4  { margin-left:33.3333%; }
  .mobile-cols > .margin5  { margin-left:41.6666%; }
  .mobile-cols > .margin6  { margin-left:50.0000%; }
  .mobile-cols > .margin7  { margin-left:58.3333%; }
  .mobile-cols > .margin8  { margin-left:66.6666%; }
  .mobile-cols > .margin9  { margin-left:75.0000%; }
  .mobile-cols > .margin10 { margin-left:83.3333%; }
  .mobile-cols > .margin11 { margin-left:91.6666%; }
  .mobile-cols > .margin12 { margin-left:100.0000%; }
}

/* Loading overlay
------------------------------------------------------- */
.loading:after,
.loading:before {
  content:'';
  display:block;
  position:absolute;
  z-index:10;
  }
.loading:before {
  background:transparent;
  left:0;
  top:0;
  width:100%;
  height:100%;
  }
.loading:after {
  background:rgba(0,0,0,.2) url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iCiAgIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiCiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiCiAgIHhtbG5zOmlua3NjYXBlPSJodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy9uYW1lc3BhY2VzL2lua3NjYXBlIgogICBpZD0ic3ZnMzEyMiIKICAgdmVyc2lvbj0iMS4xIgogICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjQ4LjUgcjEwMDQwIgogICB3aWR0aD0iMjQiCiAgIGhlaWdodD0iMjQiCiAgIHNvZGlwb2RpOmRvY25hbWU9ImxvYWRzb3VyY2UyLnN2ZyI+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhMzEyOCI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGUgLz4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGRlZnMKICAgICBpZD0iZGVmczMxMjYiIC8+CiAgPHNvZGlwb2RpOm5hbWVkdmlldwogICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIKICAgICBib3JkZXJjb2xvcj0iIzY2NjY2NiIKICAgICBib3JkZXJvcGFjaXR5PSIxIgogICAgIG9iamVjdHRvbGVyYW5jZT0iMTAiCiAgICAgZ3JpZHRvbGVyYW5jZT0iMTAiCiAgICAgZ3VpZGV0b2xlcmFuY2U9IjEwIgogICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIgogICAgIGlua3NjYXBlOnBhZ2VzaGFkb3c9IjIiCiAgICAgaW5rc2NhcGU6d2luZG93LXdpZHRoPSIxMTgyIgogICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjcwOCIKICAgICBpZD0ibmFtZWR2aWV3MzEyNCIKICAgICBzaG93Z3JpZD0idHJ1ZSIKICAgICBpbmtzY2FwZTpzbmFwLWJib3g9InRydWUiCiAgICAgaW5rc2NhcGU6b2JqZWN0LW5vZGVzPSJ0cnVlIgogICAgIGlua3NjYXBlOnpvb209IjE2IgogICAgIGlua3NjYXBlOmN4PSI4Ljk3Nzk0NzciCiAgICAgaW5rc2NhcGU6Y3k9IjEwLjczMjQ3NiIKICAgICBpbmtzY2FwZTp3aW5kb3cteD0iNDgyIgogICAgIGlua3NjYXBlOndpbmRvdy15PSIxMjciCiAgICAgaW5rc2NhcGU6d2luZG93LW1heGltaXplZD0iMCIKICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJzdmczMTIyIgogICAgIHNob3dndWlkZXM9ImZhbHNlIgogICAgIGlua3NjYXBlOmd1aWRlLWJib3g9InRydWUiCiAgICAgaW5rc2NhcGU6b2JqZWN0LXBhdGhzPSJ0cnVlIgogICAgIGZpdC1tYXJnaW4tdG9wPSIwIgogICAgIGZpdC1tYXJnaW4tbGVmdD0iMCIKICAgICBmaXQtbWFyZ2luLXJpZ2h0PSIwIgogICAgIGZpdC1tYXJnaW4tYm90dG9tPSIwIj4KICAgIDxpbmtzY2FwZTpncmlkCiAgICAgICB0eXBlPSJ4eWdyaWQiCiAgICAgICBpZD0iZ3JpZDMxMzIiCiAgICAgICBlbXBzcGFjaW5nPSI1IgogICAgICAgdmlzaWJsZT0idHJ1ZSIKICAgICAgIGVuYWJsZWQ9InRydWUiCiAgICAgICBzbmFwdmlzaWJsZWdyaWRsaW5lc29ubHk9InRydWUiCiAgICAgICBvcmlnaW54PSItMTQ4cHgiCiAgICAgICBvcmlnaW55PSItMzU4cHgiIC8+CiAgICA8c29kaXBvZGk6Z3VpZGUKICAgICAgIG9yaWVudGF0aW9uPSItMC43MDcxMDY3OCwwLjcwNzEwNjc4IgogICAgICAgcG9zaXRpb249IjEyLDEyIgogICAgICAgaWQ9Imd1aWRlNDEwNSIgLz4KICA8L3NvZGlwb2RpOm5hbWVkdmlldz4KICA8cGF0aAogICAgIHN0eWxlPSJjb2xvcjojMDAwMDAwO2ZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6MTI7bWFya2VyOm5vbmU7dmlzaWJpbGl0eTp2aXNpYmxlO2Rpc3BsYXk6aW5saW5lO292ZXJmbG93OnZpc2libGU7ZW5hYmxlLWJhY2tncm91bmQ6YWNjdW11bGF0ZSIKICAgICBkPSJNIDEyIDAgTCAxMiA1IEMgMTUuODY1OTkzIDUgMTkgOC4xMzQwMDY3IDE5IDEyIEwgMjQgMTIgQyAyNCA1LjM3MjU4MyAxOC42Mjc0MTcgMCAxMiAwIHogIgogICAgIGlkPSJwYXRoMzk1NiIgLz4KICA8cGF0aAogICAgIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiCiAgICAgc3R5bGU9Im9wYWNpdHk6MC40O2NvbG9yOiMwMDAwMDA7ZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDoxMjttYXJrZXI6bm9uZTt2aXNpYmlsaXR5OnZpc2libGU7ZGlzcGxheTppbmxpbmU7b3ZlcmZsb3c6dmlzaWJsZTtlbmFibGUtYmFja2dyb3VuZDphY2N1bXVsYXRlIgogICAgIGQ9Ik0gMTIsMCBDIDUuMzcyNTgzLDAgMCw1LjM3MjU4MyAwLDEyIGMgMCwzLjE4MjU5OCAxLjI0OTU2Myw2LjI0OTU2MyAzLjUsOC41IDIuMjUwNDM3LDIuMjUwNDM3IDUuMzE3NDAyLDMuNSA4LjUsMy41IDMuMTgyNTk4LDAgNi4yNDk1NjMsLTEuMjQ5NTYzIDguNSwtMy41IEMgMjIuNzUwNDM3LDE4LjI0OTU2MyAyNCwxNS4xODI1OTggMjQsMTIgbCAtNSwwIGMgMCwzLjg2NTk5MyAtMy4xMzQwMDcsNyAtNyw3IEMgOC4xMzQwMDY4LDE5IDUsMTUuODY1OTkzIDUsMTIgNSw4LjEzNDAwNjcgOC4xMzQwMDY4LDUgMTIsNSB6IgogICAgIGlkPSJwYXRoMzE3NCIKICAgICBzb2RpcG9kaTpub2RldHlwZXM9ImNjY2NjY2NjY2NjIiAvPgo8L3N2Zz4K) 50% 50% no-repeat;
  left:50%;
  top:50%;
  margin:-20px 0 0 -20px;
  width:40px;
  height:40px;
  border-radius:50%;
  -webkit-animation: rotate 1s linear infinite;
     -moz-animation: rotate 1s linear infinite;
      -ms-animation: rotate 1s linear infinite;
          animation: rotate 1s linear infinite;
  }