/*
 * Global Ignite Variables
 *
 * 1. Ignite custom typography settings for prose (See _prose.scss for explanation).
 *
 * 2. Establish custom spacing variables based on line height to
 *    facilitate vertical rhythm
 *
 * 3. Black/white colour variables
 *
 * 4. Brand visited & focused styles
 *
 * 5. Brand border
 *
 */
/* [1] */
/* [2] */
/* [3] */
/* [4] */
/* [5] */
/*
 * Mixins
 *
 * 1. Intrinsic ratios (eg: Used by _responsive-ratio)
 *
 * 2. Cross browser opacity
 *
 * 3. Font smoothing
 *
 * 4. Px to Em https://web-design-weekly.com/snippets/converts-pixels-to-ems-with-sass/
 *
 * 5. WebKit-style focus
 */
/*
 * Breakpoints
 *
 * Map Bootstrap breakpoints to nice mixins
 */
/*
 * Helpers
 *
 * 1. Useful within Display suite for removing margin from headings.
 *
 * 2. https://github.com/twbs/bootstrap/pull/12679
 *    Use in conjunction with .sr-only to only display content when it's focused.
 *    Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
 *
 * 3. Bootstrap gutter killer
 *
 * 4. See Bootstrap. http://getbootstrap.com/css/#type-lists. Repeated here
 *    because it is a common 'helper'.
 *    Remove the default list-style and left margin on list items
 *    (immediate children only). This only applies to immediate children list
 *    items, meaning you will need to add the class for any nested lists as well.
 *
 * 5. Responsive margin top OOCSS spacing helpers.
 *    Ideally always using margin above your site building blocks for consistency.
 *
 * 6. Responsive padding top OOCSS spacing helpers.
 *    If a border is required above your site building block then use padding instead.
 *
 * 7. Use to offset elements within main body area.
 *
 */
.has-no-margin-top {
  /* [1] */
  margin-top: 0 !important;
}

.sr-only-focusable {
  /* [2] */
}
.sr-only-focusable:active, .sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
}

.no-gutter {
  /* [3] */
}
.no-gutter[class*='col-'] {
  padding-right: 0;
  padding-left: 0;
}

.list-unstyled {
  padding: 0;
  margin: 0;
  list-style: none;
}

/* [4] */
/* [5] */
.has-margin-top-base {
  margin-top: 0.75em;
}
@media (min-width: 992px) {
  .has-margin-top-base {
    margin-top: 1.5em;
  }
}

.has-margin-top-and-half {
  margin-top: 1.5em;
}
@media (min-width: 992px) {
  .has-margin-top-and-half {
    margin-top: 2.25em;
  }
}

.has-margin-top-double {
  margin-top: 1.5em;
}
@media (min-width: 992px) {
  .has-margin-top-double {
    margin-top: 3em;
  }
}

.has-margin-top-triple {
  margin-top: 1.5em;
}
@media (min-width: 480px) {
  .has-margin-top-triple {
    margin-top: 3em;
  }
}
@media (min-width: 992px) {
  .has-margin-top-triple {
    margin-top: 4.5em;
  }
}

.has-margin-top-half {
  margin-top: 0.75em;
}

/* [6] */
.has-padding-top-base {
  padding-top: 0.75em;
}
@media (min-width: 992px) {
  .has-padding-top-base {
    padding-top: 1.5em;
  }
}

.has-margin-top-and-half {
  padding-top: 1.5em;
}
@media (min-width: 992px) {
  .has-margin-top-and-half {
    padding-top: 2.25em;
  }
}

.has-padding-top-double {
  padding-top: 1.5em;
}
@media (min-width: 992px) {
  .has-padding-top-double {
    padding-top: 3em;
  }
}

.has-padding-top-triple {
  padding-top: 1.5em;
}
@media (min-width: 480px) {
  .has-padding-top-triple {
    padding-top: 3em;
  }
}
@media (min-width: 992px) {
  .has-padding-top-triple {
    padding-top: 4.5em;
  }
}

.has-padding-top-half {
  padding-top: 0.75em;
}

.has-border-top {
  border-top: 1px solid #dddfe0;
}

.has-border-bottom {
  border-bottom: 1px solid #dddfe0;
}

.has-offset-right {
  position: relative;
}
@media (min-width: 1201px) and (max-width: 1419px) {
  .has-offset-right {
    margin-right: -40px !important;
  }
}
@media (min-width: 1420px) {
  .has-offset-right {
    margin-right: -60px !important;
  }
}

.has-offset-left {
  position: relative;
}
@media (min-width: 1201px) and (max-width: 1419px) {
  .has-offset-left {
    margin-left: -40px !important;
  }
}
@media (min-width: 1420px) {
  .has-offset-left {
    margin-left: -60px !important;
  }
}

.tile {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.tile .slat {
  background-color: #1f2c33;
  height: 300px;
}
.tile .slat__title {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  position: relative;
  z-index: 100;
  display: block;
  padding: 1rem;
}
@media (min-width: 992px) {
  .tile .slat__title {
    padding: 2rem;
  }
}
.tile .slat__title-wrapper {
  z-index: 10;
  width: 100%;
}
.tile .slat__content {
  display: block;
  padding: 2rem;
  /* [3] */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: none;
}
.tile .slat__content > p {
  font-size: 15px;
  width: 100%;
}
@media (min-width: 992px) {
  .tile .slat__content > p {
    font-size: 22px;
  }
}
@media (min-width: 992px) {
  .tile {
    margin-bottom: 0;
  }
  .tile .slat {
    height: auto;
  }
  .tile .slat__content {
    padding-top: 0;
    padding-bottom: 0;
    display: table-cell;
    vertical-align: middle;
  }
  .tile .slat__title-wrapper {
    bottom: inherit;
    width: auto;
  }
  .tile .slat__title {
    font-size: 2.3rem;
  }
}
@media (min-width: 1200px) {
  .tile .slat__title {
    font-size: 3.3rem;
    padding: 3rem;
  }
  .tile .slat__content > p {
    font-size: 24px;
  }
}

.tile--1 .slat {
  background-size: cover;
  background-position: center;
}
.tile--1 .slat__link {
  -ms-grid-rows: 2.25fr 1fr;
  grid-template-rows: 2.25fr 1fr;
  -ms-grid-columns: 100%;
  grid-template-columns: 100%;
}
@media (min-width: 768px) {
  .tile--1 .slat__link {
    -ms-grid-rows: 4fr 1fr;
    grid-template-rows: 4fr 1fr;
  }
}
@media (min-width: 992px) {
  .tile--1 .slat__link {
    -ms-grid-rows: 1fr 100px;
    grid-template-rows: 1fr 100px;
  }
}
.tile--1 .slat__link:hover .slat__title-wrapper:before, .tile--1 .slat__link:focus .slat__title-wrapper:before {
  border-bottom: 25px solid #0c1113;
}
.tile--1 .slat__link > .slat__title-wrapper {
  position: relative;
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-row: 2 / 3;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1 / 2;
  z-index: 10;
}
.tile--1 .slat__title-wrapper {
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tile--1 .slat__title-wrapper:before {
  position: absolute;
  top: -24px;
  left: 0;
  width: 0;
  height: 0;
  border-right: 554px solid transparent;
  border-bottom: 25px solid #1f2c33;
}
@media (min-width: 768px) {
  .tile--1 .slat__title-wrapper:before {
    content: '';
  }
}
.tile--1 .slat__content {
  background-color: rgba(78, 157, 45, 0.92);
  width: 100%;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1 / 2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1 / 2;
  flex-direction: row;
  flex-wrap: wrap;
}
@media (min-width: 1200px) {
  .tile--1 .slat__content {
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    grid-row: 1 / 3;
  }
}

.tile--2 .slat {
  background: #1f2c33 url('../images/vaping-facts--mobile.jpg?1560208682') no-repeat center;
  background-size: cover;
}
.tile--2 .slat__link {
  -ms-grid-columns: 100%;
  grid-template-columns: 100%;
  -ms-grid-rows: 2.25fr 1fr;
  grid-template-rows: 2.25fr 1fr;
}
@media (min-width: 768px) {
  .tile--2 .slat__link {
    -ms-grid-columns: 3fr 1.05fr;
    grid-template-columns: 3fr 1.05fr;
    -ms-grid-rows: 1fr;
    grid-template-rows: 1fr;
  }
  .tile--2 .slat__link > * {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1 / 2;
  }
}
.tile--2 .slat__link:hover .slat__title-wrapper:before, .tile--2 .slat__link:focus .slat__title-wrapper:before {
  border-right: 100px solid #0c1113;
}
.tile--2 .slat .slat__title-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1 / 2;
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-row: 2 / 3;
}
@media (min-width: 768px) {
  .tile--2 .slat .slat__title-wrapper {
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
    grid-column: 2 / 3;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1 / 2;
  }
}
.tile--2 .slat__title-wrapper:before {
  content: none;
  position: absolute;
  right: 100%;
  top: 0;
  width: 0;
  height: 0;
  border-right: 100px solid #1f2c33;
  border-top: 400px solid transparent;
}
.tile--2 .slat__content {
  background-color: rgba(0, 51, 160, 0.92);
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1 / 2;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1 / 2;
  flex-direction: row;
  flex-wrap: wrap;
}
@media (min-width: 768px) {
  .tile--2 .slat__content {
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1 / 2;
    padding-right: 20%;
  }
}
@media (min-width: 768px) {
  .tile--2 .slat .slat__title {
    text-align: right;
    padding-right: 18%;
    padding-left: 0 !important;
  }
}
@media (min-width: 992px) {
  .tile--2 .slat {
    background-image: url('../images/vaping-facts.jpg?1560208678');
    background-position: left -20px;
  }
  .tile--2 .slat__title-wrapper {
    height: 100%;
  }
  .tile--2 .slat__title-wrapper:before {
    content: "";
  }
}
@media (min-width: 1200px) {
  .tile--2 .slat {
    background-position: top left;
    background-size: auto;
  }
}

.tile--3 .slat {
  background: #1f2c33 url('../images/fresh-air--mobile.jpg?1498701118') no-repeat center;
  background-size: cover;
}
.tile--3 .slat__link {
  -ms-grid-columns: 100%;
  grid-template-columns: 100%;
  -ms-grid-rows: 2.25fr 1fr;
  grid-template-rows: 2.25fr 1fr;
}
.tile--3 .slat__link > * {
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1 / 2;
}
.tile--3 .slat__link:hover .slat__title-wrapper:before, .tile--3 .slat__link:focus .slat__title-wrapper:before {
  border-bottom: 25px solid #0c1113;
}
.tile--3 .slat .slat__title-wrapper {
  position: relative;
}
.tile--3 .slat__title-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-row: 2 / 3;
}
.tile--3 .slat__title-wrapper:before {
  position: absolute;
  top: -24px;
  left: 0;
  width: 0;
  height: 0;
  border-right: 543px solid transparent;
  border-bottom: 25px solid #1f2c33;
}
.tile--3 .slat__title {
  text-align: center;
}
.tile--3 .slat__content {
  background-color: rgba(0, 51, 160, 0.9);
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1 / 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.tile--3 .slat__content b {
  display: block;
}
@media (min-width: 768px) {
  .tile--3 {
    background-position: left top;
  }
}
@media (min-width: 992px) {
  .tile--3.tile {
    clear: none;
  }
  .tile--3 .slat {
    background-image: url('../images/fresh-air.jpg?1498701118');
    background-position: center -30px;
  }
  .tile--3 .slat__title-wrapper {
    bottom: 0;
  }
  .tile--3 .slat__title-wrapper:before {
    content: '';
  }
  .tile--3 .slat__content > p {
    font-size: 16px;
  }
}
@media (min-width: 1200px) {
  .tile--3 .slat {
    background-position: left -0px;
  }
  .tile--3 .slat__content > p {
    font-size: 20px;
  }
}

.tile--4 .slat {
  background: #1f2c33 url('../images/facts-figures--mobile.jpg?1498701118') no-repeat center;
  background-size: cover;
}
.tile--4 .slat__link {
  -ms-grid-rows: 2.25fr 1fr;
  grid-template-rows: 2.25fr 1fr;
  -ms-grid-columns: 100%;
  grid-template-columns: 100%;
}
.tile--4 .slat__link > * {
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1 / 2;
}
.tile--4 .slat__link:hover .slat__title-wrapper:before, .tile--4 .slat__link:focus .slat__title-wrapper:before {
  border-bottom: 25px solid #0c1113;
}
.tile--4 .slat .slat__title-wrapper {
  position: relative;
}
.tile--4 .slat__title-wrapper {
  width: 100%;
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-row: 2 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tile--4 .slat__title-wrapper:before {
  content: none;
  position: absolute;
  top: -24px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 325px solid transparent;
  border-bottom: 25px solid #1f2c33;
}
.tile--4 .slat__content {
  background-color: rgba(78, 157, 45, 0.9);
  width: 100%;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1 / 2;
}
@media (min-width: 992px) {
  .tile--4 .slat {
    background-position: top center;
    background-image: url('../images/facts-figures.jpg?1498701118');
  }
  .tile--4 .slat__title-wrapper {
    bottom: 0;
  }
  .tile--4 .slat__title-wrapper:before {
    content: '';
  }
  .tile--4 .slat__content > p {
    font-size: 16px;
  }
}
@media (min-width: 1200px) {
  .tile--4 .slat__content > p {
    font-size: 20px;
  }
}

.tile--5 {
  margin-bottom: 0;
}
.tile--5 .slat {
  background: #1f2c33 url('../images/cost-of-smoking--mobile.jpg?1498701118') no-repeat center;
  background-size: cover;
}
.tile--5 .slat__link {
  -ms-grid-rows: 2.25fr 1fr;
  grid-template-rows: 2.25fr 1fr;
  -ms-grid-columns: 100%;
  grid-template-columns: 100%;
}
@media (min-width: 992px) {
  .tile--5 .slat__link {
    -ms-grid-columns: 135px 1fr;
    grid-template-columns: 135px 1fr;
    -ms-grid-rows: 1fr;
    grid-template-rows: 1fr;
  }
  .tile--5 .slat__link > * {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1 / 2;
  }
}
@media (min-width: 1200px) {
  .tile--5 .slat__link {
    -ms-grid-columns: 180px 1fr;
    grid-template-columns: 180px 1fr;
  }
}
.tile--5 .slat__link:hover .slat__title-wrapper:before, .tile--5 .slat__link:focus .slat__title-wrapper:before {
  border-left: 50px solid #0c1113;
}
.tile--5 .slat__title-wrapper {
  left: 0;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1 / 2;
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-row: 2 / 3;
}
@media (min-width: 992px) {
  .tile--5 .slat__title-wrapper {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1 / 2;
  }
}
.tile--5 .slat__title-wrapper:before {
  content: none;
  position: absolute;
  left: 100%;
  top: 0;
  width: 0;
  height: 0;
  border-left: 50px solid #1f2c33;
  border-bottom: 200px solid transparent;
}
.tile--5 .slat .slat__title-wrapper {
  position: relative;
}
.tile--5 .slat .slat__title-wrapper > .slat__title {
  padding-right: 0;
}
.tile--5 .slat__content {
  background-color: rgba(78, 157, 45, 0.9);
  padding-left: 40px;
  flex-direction: row;
  flex-wrap: wrap;
}
@media (min-width: 992px) {
  .tile--5 .slat__content {
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
    grid-column: 2 / 3;
  }
}
@media (min-width: 992px) {
  .tile--5 .slat {
    background-position: right -25px center;
    background-image: url('../images/cost-of-smoking.jpg?1498701118');
    background-size: 62% auto;
    background-color: #5b6e7c;
  }
  .tile--5 .slat__title-wrapper {
    display: flex;
    align-items: center;
    height: 100%;
  }
  .tile--5 .slat__title-wrapper:before {
    content: '';
  }
  .tile--5 .slat__title {
    text-align: left !important;
    padding-left: 25px;
  }
  .tile--5 .slat__content > p {
    font-size: 16px;
  }
}
@media (min-width: 1200px) {
  .tile--5 .slat {
    background-position: right -20px center;
  }
  .tile--5 .slat__content > p {
    font-size: 20px;
  }
}