/*
 * Breakpoint mixin. See: http://css-tricks.com/conditional-media-query-mixins/
 *
 * Use:
 * .row {
 *  @include bp(mobile, min) {
 *    //mobile styles
 *  };
 * }
 *
 * Breakpoints are set in _config.scss e.g. $bp1
 */
.mobile-only {
  display: none;
}
@media (max-width: 37.625em) {
  .mobile-only {
    display: block;
  }
}

@media (max-width: 37.625em) {
  .hidden-on-mobile {
    display: none !important;
  }
}

/**
 * Mixins for doing CSS3 cross-browser stuff:
 */
/**
 * Special grayscale mixin to support IE rather than using
 *	@include filter(grayscale(100%)) 
 * which IE does not support
*/
.staff-name {
  font-size: 1.333333em;
  /* 16px / 12px = 133.3333% */
  font-weight: bold;
  padding-bottom: 0.25em;
}

.staff-position {
  color: #E76100;
  font-size: 0.833333em;
  /* 10px / 12px = 83.3333% */
  font-weight: bold;
  line-height: 1em;
  padding-bottom: 2em;
}

.staff-details {
  float: left;
  padding-right: 0px;
  width: 74%;
}
@media (max-width: 37.625em) {
  .staff-details {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
    width: 100%;
  }
}

.staff-photo {
  float: right;
  padding: 0.5em 0 1em;
  width: 24%;
}
@media (max-width: 37.625em) {
  .staff-photo {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
    width: auto;
  }
}

#primary .staff-photo img {
  margin: 0;
}

ul li.staff-member {
  border-bottom: 1px solid #969A9E;
  list-style: none;
  overflow: hidden;
  padding: 1.5em 0 0 0;
}
@media (max-width: 37.625em) {
  ul li.staff-member {
    display: -webkit-box;
    /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;
    /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;
    /* TWEENER - IE 10 */
    display: -webkit-flex;
    /* NEW - Chrome */
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
  }
}

.staff-member.last {
  border: none;
  padding-bottom: 1.5em;
}