/*===================================================================
  Normalize  (modified, based on v3.0.2)
===================================================================*/
/*===============================================
  HTML5 display definitions
===============================================*/
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block; }

[hidden], template {
  display: none; }

/*===============================================
  Links
===============================================*/
a {
  background-color: transparent; }

a:active, a:hover {
  outline: 0; }

/*===============================================
  Text-level semantics
===============================================*/
b, strong {
  font-weight: 700; }

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.3em; }

sub {
  bottom: -0.4em; }

/*===============================================
  Embedded content
===============================================*/
svg:not(:root) {
  overflow: hidden; }

/*===============================================
  Grouping content
===============================================*/
/*===============================================
  Forms
===============================================*/
button, input, optgroup, select, textarea {
  color: inherit;
  font: inherit;
  margin: 0; }

button {
  overflow: visible; }

button, select {
  text-transform: none; }

button, html input[type="button"], input[type="reset"], input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer; }

button[disabled], html input[disabled] {
  cursor: default; }

button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0; }

input {
  line-height: normal; }

input[type="checkbox"], input[type="radio"] {
  padding: 0; }

input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
  height: auto; }

input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box; }

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

textarea {
  overflow: auto; }

optgroup {
  font-weight: bold; }

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

blockquote, body, dd, dl, fieldset, figure, form, h1, h2, h3, h4, h5, h6, ol, p, pre, ul {
  margin: 0; }

fieldset, iframe, img {
  border: 0; }

fieldset, legend, td, th {
  padding: 0; }

/*===================================================================
  Accessibility
===================================================================*/
.acc-reader-only {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  overflow: hidden; }

.acc-numeral {
  speak-numeral: digits; }

/*===================================================================
  Clear Fix
===================================================================*/
.clear-fix:after {
  display: table;
  clear: both;
  content: ""; }

/*===================================================================
  Float
===================================================================*/
.left {
  float: left  !important; }

.right {
  float: right !important; }

@media only screen and (max-width: 40em) {
  .small-left {
    float: left  !important; }
  .small-right {
    float: right !important; } }

@media only screen and (min-width: 40.063em) and (max-width: 64em) {
  .medium-left {
    float: left  !important; }
  .medium-right {
    float: right !important; } }

@media only screen and (min-width: 64.063em) and (max-width: 90em) {
  .large-left {
    float: left  !important; }
  .large-right {
    float: right !important; } }

/*===================================================================
  Grid
===================================================================*/
.row {
  margin: 0 auto;
  width: 100%;
  max-width: 1000px; }
  .row:after {
    display: table;
    clear: both;
    content: ""; }
  .row.collapse > .column {
    padding-left: 0;
    padding-right: 0; }
  .row.collapse .row {
    margin-left: 0;
    margin-right: 0; }
  .row .row {
    margin: 0 -15px;
    width: auto;
    max-width: none; }
    .row .row:after {
      display: table;
      clear: both;
      content: ""; }
    .row .row.collapse {
      margin: 0;
      width: auto;
      max-width: none; }
      .row .row.collapse:after {
        display: table;
        clear: both;
        content: ""; }

.column, .columns {
  position: relative;
  float: left;
  padding-left: 15px;
  padding-right: 15px;
  width: 100%; }

.column + .column:last-child {
  float: right; }

.column + .column.end {
  float: left; }

.column.centered {
  float: none;
  margin-left: auto;
  margin-right: auto; }

.column.uncentered {
  float: left;
  margin-left: 0;
  margin-right: 0; }

.column.centered:last-child {
  float: none; }

.column.uncentered:last-child {
  float: left; }

.column.uncentered.opposite {
  float: right; }

.column.collapse {
  padding-left: 0;
  padding-right: 0; }

.column.collapse-left {
  padding-left: 0; }

.column.collapse-right {
  padding-right: 0; }

@media only screen {
  .small-push-0 {
    left: 0;
    right: auto; }
  .small-pull-0 {
    right: 0;
    left: auto; }
  .small-push-1 {
    left: 8.3333333333%;
    right: auto; }
  .small-pull-1 {
    right: 8.3333333333%;
    left: auto; }
  .small-push-2 {
    left: 16.6666666667%;
    right: auto; }
  .small-pull-2 {
    right: 16.6666666667%;
    left: auto; }
  .small-push-3 {
    left: 25%;
    right: auto; }
  .small-pull-3 {
    right: 25%;
    left: auto; }
  .small-push-4 {
    left: 33.3333333333%;
    right: auto; }
  .small-pull-4 {
    right: 33.3333333333%;
    left: auto; }
  .small-push-5 {
    left: 41.6666666667%;
    right: auto; }
  .small-pull-5 {
    right: 41.6666666667%;
    left: auto; }
  .small-push-6 {
    left: 50%;
    right: auto; }
  .small-pull-6 {
    right: 50%;
    left: auto; }
  .small-push-7 {
    left: 58.3333333333%;
    right: auto; }
  .small-pull-7 {
    right: 58.3333333333%;
    left: auto; }
  .small-push-8 {
    left: 66.6666666667%;
    right: auto; }
  .small-pull-8 {
    right: 66.6666666667%;
    left: auto; }
  .small-push-9 {
    left: 75%;
    right: auto; }
  .small-pull-9 {
    right: 75%;
    left: auto; }
  .small-push-10 {
    left: 83.3333333333%;
    right: auto; }
  .small-pull-10 {
    right: 83.3333333333%;
    left: auto; }
  .small-push-11 {
    left: 91.6666666667%;
    right: auto; }
  .small-pull-11 {
    right: 91.6666666667%;
    left: auto; }
  .small-1 {
    width: 8.3333333333%; }
  .small-2 {
    width: 16.6666666667%; }
  .small-3 {
    width: 25%; }
  .small-4 {
    width: 33.3333333333%; }
  .small-5 {
    width: 41.6666666667%; }
  .small-6 {
    width: 50%; }
  .small-7 {
    width: 58.3333333333%; }
  .small-8 {
    width: 66.6666666667%; }
  .small-9 {
    width: 75%; }
  .small-10 {
    width: 83.3333333333%; }
  .small-11 {
    width: 91.6666666667%; }
  .small-12 {
    width: 100%; }
  .small-offset-0 {
    margin-left: 0 !important; }
  .small-offset-1 {
    margin-left: 8.3333333333% !important; }
  .small-offset-2 {
    margin-left: 16.6666666667% !important; }
  .small-offset-3 {
    margin-left: 25% !important; }
  .small-offset-4 {
    margin-left: 33.3333333333% !important; }
  .small-offset-5 {
    margin-left: 41.6666666667% !important; }
  .small-offset-6 {
    margin-left: 50% !important; }
  .small-offset-7 {
    margin-left: 58.3333333333% !important; }
  .small-offset-8 {
    margin-left: 66.6666666667% !important; }
  .small-offset-9 {
    margin-left: 75% !important; }
  .small-offset-10 {
    margin-left: 83.3333333333% !important; }
  .small-offset-11 {
    margin-left: 91.6666666667% !important; }
  .column.small-centered {
    float: none;
    margin-left: auto;
    margin-right: auto; }
  .column.small-uncentered {
    float: left;
    margin-left: 0;
    margin-right: 0; }
  .column.small-centered:last-child {
    float: none; }
  .column.small-uncentered:last-child {
    float: left; }
  .column.small-uncentered.opposite {
    float: right; }
  .column.small-collapse {
    padding-left: 0;
    padding-right: 0; }
  .column.small-collapse-left {
    padding-left: 0; }
  .column.small-collapse-right {
    padding-right: 0; } }

@media only screen and (min-width: 40.063em) {
  .medium-push-0 {
    left: 0;
    right: auto; }
  .medium-pull-0 {
    right: 0;
    left: auto; }
  .medium-push-1 {
    left: 8.3333333333%;
    right: auto; }
  .medium-pull-1 {
    right: 8.3333333333%;
    left: auto; }
  .medium-push-2 {
    left: 16.6666666667%;
    right: auto; }
  .medium-pull-2 {
    right: 16.6666666667%;
    left: auto; }
  .medium-push-3 {
    left: 25%;
    right: auto; }
  .medium-pull-3 {
    right: 25%;
    left: auto; }
  .medium-push-4 {
    left: 33.3333333333%;
    right: auto; }
  .medium-pull-4 {
    right: 33.3333333333%;
    left: auto; }
  .medium-push-5 {
    left: 41.6666666667%;
    right: auto; }
  .medium-pull-5 {
    right: 41.6666666667%;
    left: auto; }
  .medium-push-6 {
    left: 50%;
    right: auto; }
  .medium-pull-6 {
    right: 50%;
    left: auto; }
  .medium-push-7 {
    left: 58.3333333333%;
    right: auto; }
  .medium-pull-7 {
    right: 58.3333333333%;
    left: auto; }
  .medium-push-8 {
    left: 66.6666666667%;
    right: auto; }
  .medium-pull-8 {
    right: 66.6666666667%;
    left: auto; }
  .medium-push-9 {
    left: 75%;
    right: auto; }
  .medium-pull-9 {
    right: 75%;
    left: auto; }
  .medium-push-10 {
    left: 83.3333333333%;
    right: auto; }
  .medium-pull-10 {
    right: 83.3333333333%;
    left: auto; }
  .medium-push-11 {
    left: 91.6666666667%;
    right: auto; }
  .medium-pull-11 {
    right: 91.6666666667%;
    left: auto; }
  .medium-1 {
    width: 8.3333333333%; }
  .medium-2 {
    width: 16.6666666667%; }
  .medium-3 {
    width: 25%; }
  .medium-4 {
    width: 33.3333333333%; }
  .medium-5 {
    width: 41.6666666667%; }
  .medium-6 {
    width: 50%; }
  .medium-7 {
    width: 58.3333333333%; }
  .medium-8 {
    width: 66.6666666667%; }
  .medium-9 {
    width: 75%; }
  .medium-10 {
    width: 83.3333333333%; }
  .medium-11 {
    width: 91.6666666667%; }
  .medium-12 {
    width: 100%; }
  .medium-offset-0 {
    margin-left: 0 !important; }
  .medium-offset-1 {
    margin-left: 8.3333333333% !important; }
  .medium-offset-2 {
    margin-left: 16.6666666667% !important; }
  .medium-offset-3 {
    margin-left: 25% !important; }
  .medium-offset-4 {
    margin-left: 33.3333333333% !important; }
  .medium-offset-5 {
    margin-left: 41.6666666667% !important; }
  .medium-offset-6 {
    margin-left: 50% !important; }
  .medium-offset-7 {
    margin-left: 58.3333333333% !important; }
  .medium-offset-8 {
    margin-left: 66.6666666667% !important; }
  .medium-offset-9 {
    margin-left: 75% !important; }
  .medium-offset-10 {
    margin-left: 83.3333333333% !important; }
  .medium-offset-11 {
    margin-left: 91.6666666667% !important; }
  .column.medium-centered {
    float: none;
    margin-left: auto;
    margin-right: auto; }
  .column.medium-uncentered {
    float: left;
    margin-left: 0;
    margin-right: 0; }
  .column.medium-centered:last-child {
    float: none; }
  .column.medium-uncentered:last-child {
    float: left; }
  .column.medium-uncentered.opposite {
    float: right; }
  .column.medium-collapse {
    padding-left: 0;
    padding-right: 0; }
  .column.medium-collapse-left {
    padding-left: 0; }
  .column.medium-collapse-right {
    padding-right: 0; } }

@media only screen and (min-width: 64.063em) {
  .large-push-0 {
    left: 0;
    right: auto; }
  .large-pull-0 {
    right: 0;
    left: auto; }
  .large-push-1 {
    left: 8.3333333333%;
    right: auto; }
  .large-pull-1 {
    right: 8.3333333333%;
    left: auto; }
  .large-push-2 {
    left: 16.6666666667%;
    right: auto; }
  .large-pull-2 {
    right: 16.6666666667%;
    left: auto; }
  .large-push-3 {
    left: 25%;
    right: auto; }
  .large-pull-3 {
    right: 25%;
    left: auto; }
  .large-push-4 {
    left: 33.3333333333%;
    right: auto; }
  .large-pull-4 {
    right: 33.3333333333%;
    left: auto; }
  .large-push-5 {
    left: 41.6666666667%;
    right: auto; }
  .large-pull-5 {
    right: 41.6666666667%;
    left: auto; }
  .large-push-6 {
    left: 50%;
    right: auto; }
  .large-pull-6 {
    right: 50%;
    left: auto; }
  .large-push-7 {
    left: 58.3333333333%;
    right: auto; }
  .large-pull-7 {
    right: 58.3333333333%;
    left: auto; }
  .large-push-8 {
    left: 66.6666666667%;
    right: auto; }
  .large-pull-8 {
    right: 66.6666666667%;
    left: auto; }
  .large-push-9 {
    left: 75%;
    right: auto; }
  .large-pull-9 {
    right: 75%;
    left: auto; }
  .large-push-10 {
    left: 83.3333333333%;
    right: auto; }
  .large-pull-10 {
    right: 83.3333333333%;
    left: auto; }
  .large-push-11 {
    left: 91.6666666667%;
    right: auto; }
  .large-pull-11 {
    right: 91.6666666667%;
    left: auto; }
  .large-1 {
    width: 8.3333333333%; }
  .large-2 {
    width: 16.6666666667%; }
  .large-3 {
    width: 25%; }
  .large-4 {
    width: 33.3333333333%; }
  .large-5 {
    width: 41.6666666667%; }
  .large-6 {
    width: 50%; }
  .large-7 {
    width: 58.3333333333%; }
  .large-8 {
    width: 66.6666666667%; }
  .large-9 {
    width: 75%; }
  .large-10 {
    width: 83.3333333333%; }
  .large-11 {
    width: 91.6666666667%; }
  .large-12 {
    width: 100%; }
  .large-offset-0 {
    margin-left: 0 !important; }
  .large-offset-1 {
    margin-left: 8.3333333333% !important; }
  .large-offset-2 {
    margin-left: 16.6666666667% !important; }
  .large-offset-3 {
    margin-left: 25% !important; }
  .large-offset-4 {
    margin-left: 33.3333333333% !important; }
  .large-offset-5 {
    margin-left: 41.6666666667% !important; }
  .large-offset-6 {
    margin-left: 50% !important; }
  .large-offset-7 {
    margin-left: 58.3333333333% !important; }
  .large-offset-8 {
    margin-left: 66.6666666667% !important; }
  .large-offset-9 {
    margin-left: 75% !important; }
  .large-offset-10 {
    margin-left: 83.3333333333% !important; }
  .large-offset-11 {
    margin-left: 91.6666666667% !important; }
  .column.large-centered {
    float: none;
    margin-left: auto;
    margin-right: auto; }
  .column.large-uncentered {
    float: left;
    margin-left: 0;
    margin-right: 0; }
  .column.large-centered:last-child {
    float: none; }
  .column.large-uncentered:last-child {
    float: left; }
  .column.large-uncentered.opposite {
    float: right; }
  .column.large-collapse {
    padding-left: 0;
    padding-right: 0; }
  .column.large-collapse-left {
    padding-left: 0; }
  .column.large-collapse-right {
    padding-right: 0; } }

/*===================================================================
  Spacing
===================================================================*/
.u-m {
  margin: 24px !important; }

.u-mt {
  margin-top: 24px !important; }

.u-mr {
  margin-right: 24px !important; }

.u-mb {
  margin-bottom: 24px !important; }

.u-ml {
  margin-left: 24px !important; }

.u-mh {
  margin-right: 24px !important;
  margin-left: 24px !important; }

.u-mv {
  margin-top: 24px !important;
  margin-bottom: 24px !important; }

@media only screen and (max-width: 40em) {
  .small-u-m {
    margin: 24px !important; }
  .small-u-mt {
    margin-top: 24px !important; }
  .small-u-mr {
    margin-right: 24px !important; }
  .small-u-mb {
    margin-bottom: 24px !important; }
  .small-u-ml {
    margin-left: 24px !important; }
  .small-u-mh {
    margin-right: 24px !important;
    margin-left: 24px !important; }
  .small-u-mv {
    margin-top: 24px !important;
    margin-bottom: 24px !important; } }

@media only screen and (min-width: 40.063em) and (max-width: 64em) {
  .medium-u-m {
    margin: 24px !important; }
  .medium-u-mt {
    margin-top: 24px !important; }
  .medium-u-mr {
    margin-right: 24px !important; }
  .medium-u-mb {
    margin-bottom: 24px !important; }
  .medium-u-ml {
    margin-left: 24px !important; }
  .medium-u-mh {
    margin-right: 24px !important;
    margin-left: 24px !important; }
  .medium-u-mv {
    margin-top: 24px !important;
    margin-bottom: 24px !important; } }

@media only screen and (min-width: 64.063em) and (max-width: 90em) {
  .large-u-m {
    margin: 24px !important; }
  .large-u-mt {
    margin-top: 24px !important; }
  .large-u-mr {
    margin-right: 24px !important; }
  .large-u-mb {
    margin-bottom: 24px !important; }
  .large-u-ml {
    margin-left: 24px !important; }
  .large-u-mh {
    margin-right: 24px !important;
    margin-left: 24px !important; }
  .large-u-mv {
    margin-top: 24px !important;
    margin-bottom: 24px !important; } }

/*===================================================================
  Text helpers
===================================================================*/
.text--break {
  word-wrap: break-word !important; }

.text--centered {
  text-align: center !important; }

.text--left {
  text-align: left !important; }

.text--right {
  text-align: right !important; }

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

/*===================================================================
  Visibility
===================================================================*/
@media only screen {
  .show-for-small-only, .hide-for-medium-only, .hide-for-large-only {
    display: inherit !important; }
  .hide-for-small-only, .show-for-medium-only, .show-for-large-only {
    display: none !important; } }

@media only screen and (min-width: 40.063em) {
  .hide-for-small-only, .show-for-medium-only, .hide-for-large-only {
    display: inherit !important; }
  .show-for-small-only, .hide-for-medium-only, .show-for-large-only {
    display: none !important; } }

@media only screen and (min-width: 64.063em) {
  .hide-for-small-only, .hide-for-medium-only, .show-for-large-only {
    display: inherit !important; }
  .show-for-small-only, .show-for-medium-only, .hide-for-large-only {
    display: none !important; } }

/* Touch-enabled device targeting */
.has-no-touch .show-for-touch, .has-touch .hide-for-touch {
  display: none !important; }

.has-no-touch .hide-for-touch, .has-touch .show-for-touch {
  display: inherit !important; }

@media only screen and (orientation: landscape) {
  .show-for-landscape, .hide-for-portrait {
    display: inherit !important; }
  .hide-for-landscape, .show-for-portrait {
    display: none !important; } }

@media only screen and (orientation: portrait) {
  .show-for-portrait, .hide-for-landscape {
    display: inherit !important; }
  .hide-for-portrait, .show-for-landscape {
    display: none !important; } }

[ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak, .ng-hide:not(.ng-animate) {
  display: none !important; }

.hide {
  display: none; }

/* Print visibility */
@media print {
  .show-for-print {
    display: block; }
  .hide-for-print {
    display: none; } }

/*===================================================================
  Float
===================================================================*/
.fill-width {
  width: 100% !important; }

@media only screen and (max-width: 40em) {
  .small-fill-width {
    width: 100% !important; } }

@media only screen and (min-width: 40.063em) and (max-width: 64em) {
  .medium-fill-width {
    width: 100% !important; } }

@media only screen and (min-width: 64.063em) and (max-width: 90em) {
  .large-fill-width {
    width: 100% !important; } }

/*===================================================================
  HTML
===================================================================*/
html {
  min-height: 100%;
  overflow-y: scroll;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; }

/*===================================================================
  Body
===================================================================*/
body {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-size: 0.875em;
  line-height: 1.5;
  color: #333;
  background-color: #fff;
  cursor: default; }

/*===================================================================
  Anchor
===================================================================*/
a {
  color: #087cc0;
  text-decoration: none;
  cursor: pointer; }
  a:hover {
    color: #087cc0;
    text-decoration: none; }

/*===================================================================
  Image
===================================================================*/
img {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  height: auto;
  -ms-interpolation-mode: bicubic; }

/*===================================================================
  Button
===================================================================*/
.button {
  display: inline-block;
  border: 0;
  text-align: center;
  text-decoration: none;
  cursor: pointer; }

.button--full {
  width: 100%; }

.button--pill {
  -webkit-border-radius: 200px;
  -moz-border-radius: 200px;
  border-radius: 200px; }

/*===================================================================
  Form
===================================================================*/
.form {
  display: block; }

/*===============================================
  Form Group
===============================================*/
/*===============================================
  Form Control
===============================================*/
.form__control--checkbox, .form__control--checkbox + label, .form__control--radio, .form__control--radio + label {
  vertical-align: middle; }

.form__control--password {
  font: small-caption; }

.form__control--full {
  width: 100%; }

/*===============================================
  Form Button
===============================================*/
/*===================================================================
  Icons and Logos
===================================================================*/
.icon, .logo {
  display: block;
  overflow: hidden;
  text-indent: -9999px;
  background-position: center 50%;
  background-repeat: no-repeat; }

/*===================================================================
  List
===================================================================*/
.list--bare {
  padding: 0;
  list-style: none; }

.list--floated {
  padding: 0;
  list-style: none; }
  .list--floated:after {
    display: table;
    clear: both;
    content: ""; }
  .list--floated > li {
    float: left; }

.list--inline {
  padding: 0;
  list-style: none; }
  .list--inline > li {
    display: inline-block; }

/*===================================================================
  Table
===================================================================*/
.table {
  width: 100%; }

.table--collapsed {
  border-collapse: collapse; }

.table--fixed {
  table-layout: fixed; }

.table--unspaced {
  border-spacing: 0; }

/*===============================================
  Table row striping
===============================================*/
.table--striped tr:nth-of-type(even) {
  background: #ddebf7; }

/*===================================================================
  vCard / hCard
---------------------------------------------------------------------

  SHOPPERS DRUG MART #0535
  43 OSBORNE ST
  WINNIPEG MB  R3L 0C0
  tel: 555-555-5555


  @example - single vcard

  <span class="vcard">
    <span class="fn org">SHOPPERS DRUG MART #0535</span>
    <span class="adr">
      <span class="street-address">43 OSBORNE ST</span>
      <span class="locality">WINNIPEG</span> <span class="region">MB</span> <span class="postal-code">R3L 0C0</span>
    </span>
    <span class="tel">tel: <span class="value">555-555-5555</span></span>
  </span>


  @example - list of vcards

  <ul>
    <li class="vcard">
      <span class="fn org">SHOPPERS DRUG MART #0535</span>
      <span class="adr">
        <span class="street-address">43 OSBORNE ST</span>
        <span class="locality">WINNIPEG</span> <span class="region">MB</span> <span class="postal-code">R3L 0C0</span>
      </span>
    </li>
    <li class="vcard">
      <span class="fn org">SHOPPERS DRUG MART #0535</span>
      <span class="adr">
        <span class="street-address">43 OSBORNE ST</span>
        <span class="locality">WINNIPEG</span> <span class="region">MB</span> <span class="postal-code">R3L 0C0</span>
      </span>
    </li>
  </ul>

===================================================================*/
.vcard .fn, .vcard .org, .vcard .adr, .vcard .post-office-box, .vcard .street-address {
  display: block; }
.vcard .locality, .vcard .region, .vcard .postal-code {
  display: inline-block; }
.vcard .postal-code {
  margin-left: 0.5em; }
.vcard .tel {
  speak-numeral: digits; }

/*===================================================================
  Band
===================================================================*/
.band {
  padding: 1.5em 0; }

.band--small {
  padding: 1em 0; }

.band--large {
  padding: 2.5em 0; }

.band--blue {
  background: #087cc0; }
  .band--blue, .band--blue a {
    color: #fff; }

.band--grey {
  border-top: 1px solid #dadada;
  border-bottom: 1px solid #dadada;
  background: #f3f3f3; }

.band--yellow {
  background: #fdf3c2; }

/*===================================================================
  Button
===================================================================*/
.button {
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -webkit-transition: background-color 0.3s ease-out 0s;
  -moz-transition: background-color 0.3s ease-out 0s;
  transition: background-color 0.3s ease-out 0s;
  -webkit-backface-visibility: hidden; }

.button--primary {
  font-size: 0.875rem;
  line-height: 3;
  font-weight: 400;
  padding: 0 1.5em;
  color: #fff;
  /*background-color: #087cc0;*/
  background-color: #0467C6;
  }
  .button--primary:hover {
    background-color: #076399;
    color: #fff; }

.button--primary-r {
  font-size: 0.875rem;
  line-height: 3;
  font-weight: 400;
  padding: 0 1.5em;
  color: #0467C6;
  /*background-color: #087cc0;*/
  background-color: #fff;
  border:1px solid #0467C6;
  }

.button--secondary {
  font-size: 0.875rem;
  line-height: 3;
  font-weight: 500;
  padding: 0 1.5em;
  color: #087cc0;
  background-color: #daeaf5; }
  .button--secondary:hover {
    background-color: #bad8ec;
    color: #087cc0; }

.button--small {
  font-size: 0.875rem;
  line-height: 2.5714285714;
  font-weight: 400; }

.button--xsmall {
  font-size: 0.8125rem;
  line-height: 2.3076923077;
  font-weight: 400; }

/*===================================================================
  ESRI Map : Attribution
===================================================================*/
#attributionDiv {
  position: absolute;
  bottom: 5px;
  right: 70px;
  z-index: 1000;
  font-size: 13px;
  line-height: 15px;
  color: #666666;
  display: inline-block;
  text-align: left;
  vertical-align: bottom;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 4px;
  margin: 0 5px 0 0;
  background: rgba(255, 255, 255, 0.7);
  display: none; }

.map .logo-med {
  display: inline-block;
  vertical-align: bottom;
  width: 65px;
  height: 36px;
  z-index: 30;
  background-image: url("/DTPO/Resources/Images/CPCWatermark.png");
  cursor: pointer;
  margin-right: 15px; }

/*===================================================================
  ESRI Map : Band
===================================================================*/
.band--dark {
  background: #333; }

.band--light {
  background: #f3f3f3; }

/*===================================================================
  ESRI Map : Buttons
===================================================================*/
/*-------------------------------------
  Add Search Home Button
-------------------------------------*/
#AddSearchHomeButtonDiv {
  position: absolute;
  top: 130px;
  left: 20px;
  z-index: 1000;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  background-color: #666; }

.AddSearchHomeButtonDiv span {
  display: none; }

.AddSearchHomeButtonDiv .home {
  padding: 2px;
  width: 30px;
  height: 30px;
  background-color: #666;
  background-color: rgba(102, 102, 102, 0.8);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  background-image: url("images/icon--refresh.png");
  background-position: center center;
  background-repeat: no-repeat; }

.AddSearchHomeButtonDiv .home:hover {
  background-color: #333;
  background-color: rgba(102, 102, 102, 0.9); }

.AddSearchHomeButtonDiv .home:active {
  background-color: #ccc;
  background-color: rgba(102, 102, 102, 0.6); }

.AddSearchHomeButtonDiv .loading {
  background-image: url("images/icon--refresh.png"); }

.AddSearchHomeButtonDiv span {
  display: none; }

/*-------------------------------------
  Home Button
-------------------------------------*/
#HomeButton {
  position: absolute;
  top: 90px;
  left: 20px;
  z-index: 1000;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  background-color: #666; }

/*===================================================================
  ESRI Map : Popup
===================================================================*/
.esriPopup .accordion dd {
  display: none; }

.esriPopup .accordion dd:first-child {
  display: block; }

.esriPopup .dijitToggleButtonIconChar {
  display: none; }

.esriPopup .popupButton {
  display: inline-block;
  position: relative;
  margin: 0 0 5px 0;
  border: 0;
  padding: 10px 10px 10px 10px;
  width: 100%;
  font: 400 18px 'Roboto', 'sans-serif';
  color: #fff;
  text-align: center;
  text-decoration: none;
  /*background-color: #008CBA;*/
  background-color: #0467C6;
  cursor: pointer;
  transition: background-color 300ms ease-out 0s; }

.popupButton {
   font-weight: 300;
   border-radius: 2px;
}  

.esriPopup .contentPane {
  padding: 10px 20px 10px; }

.esriPopup #hoursdivtag {
  padding: 10px;
  font-size: 16px;
  background: #efefef; }

.esriPopup .accordion {
  border: 1px solid #ddd; }

.esriPopup .accordion dd {
  margin: 0; }

.esriPopup .accordion ul {
  padding: 10px 0;
  list-style: none; }

.esriPopup .accordion ul li {
  padding: 0 16px;
  line-height: 24px; }

.dijitDialogPaneContent {
  width: 300px !important; }

.dijitDialog {
  position: absolute;
  z-index: 999;
  overflow: hidden;
  top: 250px !important; }

@media only screen and (max-width: 40em) {
  .esriPopup .popupButton {
    font-size: 14px; }
  .esriPopup #hoursdivtag {
    font-size: 14px; }
  .dijitDialog {
    top: 150px !important; } }

@media only screen and (min-width: 40.063em) and (max-width: 64em) {
  .esriPopup .popupButton {
    font-size: 15px; }
  .esriPopup #hoursdivtag {
    font-size: 15px; }
  .dijitDialog {
    top: 225px !important; } }

@media only screen and (min-width: 64.063em) and (max-width: 90em) {
  .esriPopup .popupButton {
    font-size: 18px; }
  .dijitDialog {
    top: 250px !important; } }

/*===================================================================
  ESRI Map
===================================================================*/
.map-container {
  height: 600px; }
  .map-container.row {
    margin: 0 60px;
    max-width: none;
    width: auto; }

@media only screen and (max-width: 40em) {
  .map-container {
    height: 300px; } }

@media only screen and (min-width: 40.063em) and (max-width: 64em) {
  .map-container {
    height: 450px; } }

@media only screen and (min-width: 64.063em) and (max-width: 90em) {
  .map-container {
    height: 600px; } }

#mapDiv {
  position: relative;
  overflow: hidden;
  background-color: #72B1FE; }
  #mapDiv, #mapDiv .container {
    height: 100%; }

/*===================================================================
  ESRI Map : Map Legend
===================================================================*/
.map-legend__title {
  font-size: 0.875rem;
  line-height: 1.5;
  font-weight: 700;
  padding: 6px 15px; }

.map-legend__list {
  padding: 0;
  list-style: none;
  /*
  .map-legend__item {
    margin-left: 2em;
    padding: 6px 0 6px 26px;
    line-height: quotient(21px, 14px);
    background-position: 0 50%;

    &:first-child {
      margin: 0;
    }
  }
  */ }
  .map-legend__list:after {
    display: table;
    clear: both;
    content: ""; }
  .map-legend__list > li {
    float: left; }
  .map-legend__list li {
    margin-left: 2em;
    padding: 6px 0 6px 26px;
    line-height: 1.5;
    background-position: 0 50%;
    background-repeat: no-repeat; }
  /*.map-legend__list li:first-child {
      margin: 0; }*/
  .map-legend__list .favourite {
    background-image: url("images/icon--legend-favourite.png"); 
    background-size: 24px;}
  .map-legend__list .home {
    background-image: url("images/icon--legend-home.png"); 
    background-size: 24px;}
  .map-legend__list .post-office {
    background-image: url("images/icon--legend-post-office.png");
    background-size: 24px; }
  .map-legend__list .locker {
    background-image: url("images/icon--legend-locker.png");
    background-size: 24px; }
  .map-legend__list .searched {
    background-image: url("images/icon--legend-searched.png");
    background-size: 24px; }

/*
.map-legend__item {
  padding: 1px $grid-half-gutter-size 1em $grid-gutter-size;
  line-height: quotient(18px, 14px);
  background-repeat: no-repeat;
}
.map-legend__item--favourite { background-image: url("images/icon--legend-favourite.png"); }
.map-legend__item--home { background-image: url("images/icon--legend-home.png"); }
.map-legend__item--post-office { background-image: url("images/icon--legend-post-office.png"); }
.map-legend__item--searched { background-image: url("images/icon--legend-searched.png"); }
*/
@media only screen and (max-width: 40em) {
  .map-legend {
    padding: 0 30px; } }

/*===================================================================
  ESRI Map : Search Form
===================================================================*/
.search-form {
  line-height: 42px; }
  .search-form:after {
    display: table;
    clear: both;
    content: ""; }

.search-form__label {
  display: inline-block;
  vertical-align: top;
  width: 9%;
  color: #333;
  font-weight: bold; }

.search-form__input {
  padding-bottom: 10px;
  display: inline-block;
  vertical-align: top;
  padding: 9px .75em;
  width: 90%;
  height: 42px;
  line-height: 24px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
  -webkit-transition: box-shadow 0.45s ease 0s, border-color 0.45s ease-in-out 0s;
  -moz-transition: box-shadow 0.45s ease 0s, border-color 0.45s ease-in-out 0s;
  transition: box-shadow 0.45s ease 0s, border-color 0.45s ease-in-out 0s;
  -webkit-backface-visibility: hidden;
  font-size: 1rem;
  line-height: 1.5;
  border: 1px solid #ccc; }
  .search-form__input:focus {
    -webkit-box-shadow: 0 0 5px #000;
    -moz-box-shadow: 0 0 5px #000;
    box-shadow: 0 0 5px #000;
    border-color: #aaa;
    background-color: #fafafa; }

.search-form__button {
  width: 100%; }

html[lang="fr"] .search-form__label {
  width: 12%; }
html[lang="fr"] .search-form__input {
  width: 87%; }

@media only screen and (min-width: 40.063em) and (max-width: 64em) {
  .search-form .column:last-child {
    padding-left: 0; } }

@media only screen and (max-width: 64em) {
  .search-form__label {
    display: none; }
  .search-form__input, html[lang="fr"] .search-form__input {
    width: 100%; } }

@media only screen and (min-width: 64.063em) {
  .search-form .column {
    padding-left: 0; }
    .search-form .column:first-child {
      padding-left: 15px; } }

/*===================================================================
  ESRI Map : Search Results
===================================================================*/
.search-results {
  padding: 2em 0; }

.search-results__title {
  margin-bottom: 1.5rem; }

.search-results__list {
  padding: 0;
  list-style: none; }
  
.search-results__list:after {
    display: table;
    clear: both;
    content: ""; }
.search-results__list .vcard {
    height: 12em; }
	 

.vcard1{
  height: 5em;
}
	 
/*===================================================================
 Dialog Box : Added July 27 2015, Aaron Lawrence
===================================================================*/

   div.suggestedChoicesDialog, div.dijitDialog{background:#fff;padding:15px;}
   div.suggestedChoicesDialog *, div.suggestedChoicesDialog *:focus{outline: 0;}
   span.closeText{position:absolute;top:0;right:10px;font-size:20px;}
   span.dijitDialogTitle{font-size:20px;}
   ul#sugggestedAddresses{margin:10px 0 0 0;padding:0;}
   ul#sugggestedAddresses li{list-style:none;margin:5px 0 0 0;padding:0;}
   ul#sugggestedAddresses li:hover, ul#sugggestedAddresses li *:hover{text-decoration: underline;color:#107CC0;}


.dijitDialog .closeText {
    display: inline;
    position: absolute;
}