/* compass imports */
/* background image --------------------------------- */
/* font families ------------------------------------ */
/*
$fontfamilyBold:'HelveticaNeue-75-Bold', 'Helvetica', Arial,  sans-serif !default;
$fontfamilyItalic:'HelveticaNeue-56-Italic', 'Helvetica', Arial, sans-serif !default;
$fontfamilyBoldItalic:'HelveticaNeue-76-Bold-Italic', 'Helvetica', Arial, sans-serif !default;

$fontfamilyLight:'HelveticaNeue-45-Light', 'Helvetica', Arial, sans-serif !default;
$fontfamilyLightBold: $fontfamilyBold;
$fontfamilyLightItalic:'HelveticaNeue-46-Light-Italic', 'Helvetica', Arial, sans-serif !default;
$fontfamilyLightBoldItalic: $fontfamilyBoldItalic;
*/
/* 404 & 403 error pages ------------------------------------ */
/* SBS colours ---------------------------------------- */
/* generic colours ------------------------------------ */
/* spacing ------------------------------------------ */
/* configuration ------------------------------------ */
/* grid variables ------------------------------------ */
/* Used in print */
/* preset image sizes ------------------------------------ */
/* ==========
  Scrollers
========== */
/* ==============
  Theme folder names
=================*/
/* categorised mixins */
/* Overlay mixins */
/**
** Misc mixins
*/
/* ====
mobile mix ins
==== */
/* ====
Tablet mix ins
==== */
/* use placeholders whenever possible for more efficient CSS! */
/* line 14, global/scss/placeholders/_mixins.scss */
.tabs-arrows .item:hover, .tabs-arrows-menu .item:hover, .tabs-arrows .item:hover a, .tabs-arrows-menu .item:hover a, .tabs-arrows .item, .tabs-arrows-menu .item, .tabs-arrows .item a, .tabs-arrows-menu .item a {
  -webkit-transition-property: color;
  -moz-transition-property: color;
  -o-transition-property: color;
  transition-property: color; }

/* line 26, global/scss/placeholders/_mixins.scss */
.tabs-arrows .item:hover, .tabs-arrows-menu .item:hover, .tabs-arrows .item.active, .tabs-arrows-menu .item.active, .tabs-arrows .item, .tabs-arrows-menu .item {
  -webkit-transition-property: color, border-color;
  -moz-transition-property: color, border-color;
  -o-transition-property: color, border-color;
  transition-property: color, border-color; }

/* line 23, global/scss/placeholders/_animation.scss */
.tabs-arrows .item:hover, .tabs-arrows-menu .item:hover, .tabs-arrows .item:hover a, .tabs-arrows-menu .item:hover a, .tabs-arrows .item.active, .tabs-arrows-menu .item.active {
  -webkit-transition-duration: 0.075s;
  -moz-transition-duration: 0.075s;
  -o-transition-duration: 0.075s;
  transition-duration: 0.075s; }

/* line 26, global/scss/placeholders/_animation.scss */
.tabs-arrows .item, .tabs-arrows-menu .item, .tabs-arrows .item a, .tabs-arrows-menu .item a {
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s; }

/* line 37, global/scss/placeholders/_animation.scss */
.tabs-arrows .item:hover, .tabs-arrows-menu .item:hover, .tabs-arrows .item:hover a, .tabs-arrows-menu .item:hover a, .tabs-arrows .item, .tabs-arrows-menu .item, .tabs-arrows .item a, .tabs-arrows-menu .item a, .tabs-arrows .item.active, .tabs-arrows-menu .item.active {
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out; }

/* line 3, global/scss/components/assets/oocss/tabs-arrows/tabs-arrows.scss */
.tabs-arrows, .tabs-arrows-menu {
  position: relative;
  /* can't do it anymore because of position relative required for
      divider lines between items...
      - this means can't animate arrow when changing tabs

    // arrow position for each tab
    .item-1 {
      &:after {
        left: (100 / $numTabs * $i * 1%) - (100 / $numTabs / 2 * 1%);
      }
    }
    */
  /* can't do it anymore because of position relative required for
      divider lines between items...
      - this means can't animate arrow when changing tabs

    // arrow position for each tab
    .item-2 {
      &:after {
        left: (100 / $numTabs * $i * 1%) - (100 / $numTabs / 2 * 1%);
      }
    }
    */
  /* can't do it anymore because of position relative required for
      divider lines between items...
      - this means can't animate arrow when changing tabs

    // arrow position for each tab
    .item-3 {
      &:after {
        left: (100 / $numTabs * $i * 1%) - (100 / $numTabs / 2 * 1%);
      }
    }
    */
  /* can't do it anymore because of position relative required for
      divider lines between items...
      - this means can't animate arrow when changing tabs

    // arrow position for each tab
    .item-4 {
      &:after {
        left: (100 / $numTabs * $i * 1%) - (100 / $numTabs / 2 * 1%);
      }
    }
    */ }
  /* line 358, global/scss/mixins/_tabs.scss */
  .tabs-arrows ul, .tabs-arrows-menu ul {
    padding-bottom: 20px;
    overflow: hidden; }
    /* line 362, global/scss/mixins/_tabs.scss */
    .backgroundsize .tabs-arrows ul, .backgroundsize .tabs-arrows-menu ul {
      position: relative; }
      /* line 350, global/scss/mixins/_layout.scss */
      .backgroundsize .tabs-arrows ul:before, .backgroundsize .tabs-arrows-menu ul:before {
        content: "";
        position: absolute;
        z-index: 5;
        left: 0;
        bottom: -7px;
        width: 100%;
        height: 7px;
        padding: 0;
        background: url(/global/profiles/sbsdistribution/themes/global/images/sbs-radial-shadow-bottom.png) center bottom no-repeat;
        background-size: 100% 7px; }
      /* line 365, global/scss/mixins/_tabs.scss */
      .backgroundsize .tabs-arrows ul:before, .backgroundsize .tabs-arrows-menu ul:before {
        bottom: 13px; }
  /* line 371, global/scss/mixins/_tabs.scss */
  .tabs-arrows .item, .tabs-arrows-menu .item {
    position: relative;
    float: left;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    font-weight: bold ;
    font-size: 18px ;
    line-height: 31px ;
    letter-spacing: 0px ;
    cursor: pointer;
    color: #a0aab4;
    border-bottom: 3px solid #a0aab4;
    list-style: none; }
    /* line 377, global/scss/mixins/_tabs.scss */
    .displaymode-mobile .tabs-arrows .item, .displaymode-mobile .tabs-arrows-menu .item {
      font-size: 14px ;
      line-height: 24px ;
      letter-spacing: 0px ; }
    /* line 388, global/scss/mixins/_tabs.scss */
    .tabs-arrows .item a, .tabs-arrows-menu .item a {
      float: left;
      height: 100%;
      width: 100%;
      color: #a0aab4;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap; }
    /* line 400, global/scss/mixins/_tabs.scss */
    .tabs-arrows .item:before, .tabs-arrows-menu .item:before {
      position: absolute;
      right: -1px;
      bottom: -3px;
      display: block;
      width: 0;
      content: "";
      height: 3px;
      border-left: 1px solid #a0aab4;
      border-right: 1px solid whitesmoke;
      z-index: 1; }
    /* line 413, global/scss/mixins/_tabs.scss */
    .tabs-arrows .item:after, .tabs-arrows-menu .item:after {
      content: "";
      position: absolute;
      display: none;
      bottom: -12px;
      width: 0;
      height: 0;
      border-left: 9px solid transparent;
      border-right: 9px solid transparent;
      border-top: 9px solid #1b2024;
      margin-left: -9px;
      z-index: 1001;
      left: 50%; }
    /* line 428, global/scss/mixins/_tabs.scss */
    .tabs-arrows .item:hover, .tabs-arrows-menu .item:hover {
      color: #525e6e;
      border-bottom-color: #525e6e; }
      /* line 434, global/scss/mixins/_tabs.scss */
      .tabs-arrows .item:hover a, .tabs-arrows-menu .item:hover a {
        color: #525e6e; }
    /* line 440, global/scss/mixins/_tabs.scss */
    .tabs-arrows .item.active, .tabs-arrows-menu .item.active {
      color: #1b2024;
      border-bottom-color: #1b2024; }
      /* line 445, global/scss/mixins/_tabs.scss */
      .tabs-arrows .item.active a, .tabs-arrows-menu .item.active a {
        color: #1b2024; }
      /* line 449, global/scss/mixins/_tabs.scss */
      .tabs-arrows .item.active:after, .tabs-arrows-menu .item.active:after {
        display: block; }
    /* line 454, global/scss/mixins/_tabs.scss */
    .tabs-arrows .item.disabled, .tabs-arrows-menu .item.disabled {
      cursor: auto;
      color: #d8dcdc;
      border-bottom-color: #a0aab4; }
      /* line 459, global/scss/mixins/_tabs.scss */
      .tabs-arrows .item.disabled a, .tabs-arrows-menu .item.disabled a {
        color: #d8dcdc; }
      /* line 463, global/scss/mixins/_tabs.scss */
      .tabs-arrows .item.disabled:hover, .tabs-arrows-menu .item.disabled:hover {
        color: #d8dcdc; }
        /* line 466, global/scss/mixins/_tabs.scss */
        .tabs-arrows .item.disabled:hover a, .tabs-arrows-menu .item.disabled:hover a {
          color: #d8dcdc; }
  /* line 489, global/scss/mixins/_tabs.scss */
  .tabs-arrows.tab-count-1 .item, .tab-count-1.tabs-arrows-menu .item {
    width: 100%; }
  /* line 489, global/scss/mixins/_tabs.scss */
  .tabs-arrows.tab-count-2 .item, .tab-count-2.tabs-arrows-menu .item {
    width: 50%; }
  /* line 489, global/scss/mixins/_tabs.scss */
  .tabs-arrows.tab-count-3 .item, .tab-count-3.tabs-arrows-menu .item {
    width: 33.3333333333%; }
  /* line 489, global/scss/mixins/_tabs.scss */
  .tabs-arrows.tab-count-4 .item, .tab-count-4.tabs-arrows-menu .item {
    width: 25%; }

/* Includes increased border width and bottom margins */
/* line 10, global/scss/components/assets/oocss/tabs-arrows/tabs-arrows.scss */
.displaymode-mobile .tabs-arrows-menu {
  margin-bottom: 10px; }

/* line 13, global/scss/components/assets/oocss/tabs-arrows/tabs-arrows.scss */
.displaymode-not-mobile .tabs-arrows-menu {
  margin-bottom: 20px; }

/* line 16, global/scss/components/assets/oocss/tabs-arrows/tabs-arrows.scss */
.tabs-arrows-menu .item {
  border-bottom-width: 5px; }
  /* line 19, global/scss/components/assets/oocss/tabs-arrows/tabs-arrows.scss */
  .tabs-arrows-menu .item:before {
    height: 5px;
    bottom: -5px; }
  /* line 24, global/scss/components/assets/oocss/tabs-arrows/tabs-arrows.scss */
  .tabs-arrows-menu .item:after {
    bottom: -14px; }
