@charset "UTF-8";
/*------------------------------------*\
    INUIT.CSS
\*------------------------------------*/
/**
 *
 * sass --watch style.scss:style.min.css --style compressed
 *
 * Here we pull in some variables, include the inuit.css framework, then add our
 * project-specific components afterwards.
 * sass source/styles/scss/inuit.scss source/styles/vendor/inuit.css
 */
/**
 * Setup
 */
/*------------------------------------*\
    VARS.SCSS
\*------------------------------------*/
/**
 * Any variables you find set in inuit.css’ `_vars.scss` that you do not wish to
 * keep, simply redefine here. This means that if inuit.css, for example, sets
 * your `$base-font-size` at 16px and you wish it to be 14px, simply redeclare
 * that variable in this file. inuit.css ignores its own variables in favour of
 * using your own, so you can completely modify how inuit.css works without ever
 * having to alter the framework itself.
 */
/*------------------------------------*\
    $OBJECTS-AND-ABSTRACTIONS
\*------------------------------------*/
/**
 * All of inuit.css’ objects and abstractions are initially turned off by
 * default. This means that you start any project with as little as possible,
 * and introducing objects and abstractions is as simple as switching the
 * following variables to `true`.
 */
/*------------------------------------*\
    $OVERRIDES
\*------------------------------------*/
/**
 * Place any variables that should override inuit.css’ defaults here.
 */
/*------------------------------------*\
    $CUSTOM
\*------------------------------------*/
/**
 * Place any of your own variables that sit on top of inuit.css here.
 */
/*------------------------------------*\
    INUIT.CSS
\*------------------------------------*/
/*!*
 *
 * inuitcss.com -- @inuitcss -- @csswizardry
 *
 */
/**
 * inuit.css acts as a base stylesheet which you should extend with your own
 * theme stylesheet.
 *
 * inuit.css aims to do the heavy lifting; sorting objects and abstractions,
 * design patterns and fiddly bits of CSS, whilst leaving as much design as
 * possible to you. inuit.css is the scaffolding to your decorator.
 *
 * This stylesheet is heavily documented and contains lots of comments, please
 * take care to read and refer to them as you build. For further support please
 * tweet at @inuitcss.
 *
 * Owing to the amount of comments please only ever use minified CSS in
 * production. This file is purely a dev document.
 *
 * The table of contents below maps to section titles of the same name, to jump
 * to any section simply run a find for $[SECTION-TITLE].
 *
 * Most objects and abstractions come with a chunk of markup that you should be
 * able to paste into any view to quickly see how the CSS works in conjunction
 * with the correct HTML.
 *
 * inuit.css is written to this standard: github.com/csswizardry/CSS-Guidelines
 *
 * LICENSE
 *
 * Copyright 2013 Harry Roberts
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 * Thank you for choosing inuit.css. May your web fonts render perfectly.
 */
/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/
/**
 * CONTENTS............You’re reading it!
 * WARNING.............Here be dragons!
 * IMPORTS.............Begin importing the sections below
 *
 * MIXINS..............Super-simple Sass stuff
 * NORMALIZE...........normalize.css
 * RESET...............Set some defaults
 * CLEARFIX............
 * SHARED..............Shared declarations
 *
 * MAIN................High-level elements like `html`, `body`, etc.
 * HEADINGS............Double-stranded heading hierarchy
 * PARAGRAPHS..........
 * SMALLPRINT..........Smaller text elements like `small`
 * QUOTES..............
 * CODE................
 * LISTS...............
 * IMAGES..............
 * TABLES..............
 * FORMS...............
 *
 * GRIDS...............Fluid, proportional and nestable grids
 * FLEXBOX.............Crudely emulate flexbox
 * COLUMNS.............CSS3 columns
 * NAV.................A simple abstraction to put a list in horizontal nav mode
 * OPTIONS.............Grouped nav items
 * PAGINATION..........Very stripped back, basic paginator
 * BREADCRUMB..........Simple breadcrumb trail object
 * MEDIA...............Media object
 * MARGINALIA..........Simple marginalia content
 * ISLAND..............Boxed off content
 * BLOCK-LIST..........Blocky lists of content
 * MATRIX..............Gridded lists
 * SPLIT...............A simple split-in-two object
 * THIS-OR-THIS........Options object
 * LINK-COMPLEX........
 * FLYOUT..............Flyout-on-hover object
 * ARROWS..............CSS arrows
 * SPRITE..............Generic spriting element
 * ICON-TEXT...........Icon and text couplings
 * BEAUTONS............Use the beautons micro library
 * LOZENGES............Basic lozenge styles
 * RULES...............Horizontal rules
 * STATS...............Simple stats object
 * GREYBOX.............Wireframing styles
 *
 * WIDTHS..............Width classes for use alongside the grid system etc.
 * PUSH................Push classes for manipulating grids
 * PULL................Pull classes for manipulating grids
 * BRAND...............Helper class to apply brand treatment to elements
 * HELPER..............A series of helper classes to use arbitrarily
 * DEBUG...............Enable to add visual flags for debugging purposes
 */
/*------------------------------------*\
    $WARNING
\*------------------------------------*/
/*
 * inuit.css, being an OO framework, works in keeping with the open/closed
 * principle. The variables you set previously are now being used throughout
 * inuit.css to style everything we need for a base. Any custom styles SHOULD
 * NOT be added or modified in inuit.css directly, but added via your theme
 * stylesheet as per the open/closed principle:
 *
 * csswizardry.com/2012/06/the-open-closed-principle-applied-to-css
 *
 * Try not to edit any CSS beyond this point; if you find you need to do so
 * it is a failing of the framework so please tweet at @inuitcss.
 */
/*------------------------------------*\
    $IMPORTS
\*------------------------------------*/
/**
 * Generic utility styles etc.
 */
/*------------------------------------*\
    $DEFAULTS
\*------------------------------------*/
/**
 * inuit.css’ default variables. Redefine these in your `_vars.scss` file (found
 * in the inuit.css-web-template) to override them.
 */
/*------------------------------------*\
    $DEBUG
\*------------------------------------*/
/**
 * Debug mode will visually highlight any potential markup/accessibility quirks
 * in the browser. Set to `true` or `false`.
 */
/*------------------------------------*\
    $BORDER-BOX
\*------------------------------------*/
/**
 * Do you want all elements to adopt `box-sizing:border-box;` as per
 * paulirish.com/2012/box-sizing-border-box-ftw ?
 */
/*------------------------------------*\
    $BASE
\*------------------------------------*/
/**
 * Base stuff
 */
/**
 * Base font-family.
 */
/**
 * Default colour for objects’ borders etc.
 */
/*------------------------------------*\
    $RESPONSIVE
\*------------------------------------*/
/**
 * Responsiveness?
 */
/**
 * Responsiveness for widescreen/high resolution desktop monitors and beyond?
 * Note: `$responsive` variable above must be set to true before enabling this.
 */
/**
 * Responsive push and pull produce a LOT of code, only turn them on if you
 * definitely need them.
 */
/**
 * Note: `$push` variable above must be set to true before enabling these.
 */
/**
 * Note: `$pull` variable above must be set to true before enabling these.
 */
/**
 * Tell inuit.css when breakpoints start.
 */
/*------------------------------------*\
    $FONT-SIZES
\*------------------------------------*/
/**
 * Font-sizes (in pixels). Refer to relevant sections for their implementations.
 */
/*------------------------------------*\
    $QUOTES
\*------------------------------------*/
/**
 * English quote marks?
 */
/**
 * If you want English quotes then please do not edit these; they’re only here
 * because Sass needs them.
 */
/**
 * If you need non-English quotes, please alter the following values accordingly:
 */
/*------------------------------------*\
    $BRAND
\*------------------------------------*/
/**
 * Brand stuff
 */
/**
 * How big would you like round corners to be by default?
 */
/*------------------------------------*\
    $OBJECTS AND ABSTRACTIONS
\*------------------------------------*/
/**
 * Which objects and abstractions would you like to use?
 */
/*------------------------------------*\
    $FRAMEWORK
\*------------------------------------*/
/**
 * inuit.css will work these next ones out for use within the framework.
 *
 * Assign our `$base-line-height` to a new spacing var for more transparency.
 */
/*------------------------------------*\
    $MIXINS
\*------------------------------------*/
/**
 * Create a fully formed type style (sizing and vertical rhythm) by passing in a
 * single value, e.g.:
 *
   `@include font-size(10px);`
 *
 * Thanks to @redclov3r for the `line-height` Sass:
 * twitter.com/redclov3r/status/250301539321798657
 */
/**
 * Style any number of headings in one fell swoop, e.g.:
 *
   .foo{
       @include headings(1, 3){
           color:#BADA55;
       }
    }
 *
 * With thanks to @lar_zzz, @paranoida, @rowanmanning and ultimately
 * @thierrylemoulec for refining and improving my initial mixin.
 */
/**
 * Create vendor-prefixed CSS in one go, e.g.
 *
   `@include vendor(border-radius, 4px);`
 *
 */
/**
 * Create CSS keyframe animations for all vendors in one go, e.g.:
 *
   .foo{
       @include vendor(animation, shrink 3s);
   }

   @include keyframe(shrink){
       from{
           font-size:5em;
       }
   }
 *
 * Courtesy of @integralist: twitter.com/integralist/status/260484115315437569
 */
/**
 * Force overly long spans of text to truncate, e.g.:
 *
   `@include truncate(100%);`
 *
 * Where `$truncation-boundary` is a united measurement.
 */
/**
 * CSS arrows!!! But... before you read on, you might want to grab a coffee...
 *
 * This mixin creates a CSS arrow on a given element. We can have the arrow
 * appear in one of 12 locations, thus:
 *
 *       01    02    03
 *    +------------------+
 * 12 |                  | 04
 *    |                  |
 * 11 |                  | 05
 *    |                  |
 * 10 |                  | 06
 *    +------------------+
 *       09    08    07
 *
 * You pass this position in along with a desired arrow color and optional
 * border color, for example:
 *
 * `@include arrow(top, left, red)`
 *
 * for just a single, red arrow, or:
 *
 * `@include arrow(bottom, center, red, black)`
 *
 * which will create a red triangle with a black border which sits at the bottom
 * center of the element. Call the mixin thus:
 *
   .foo{
       background-color:#BADA55;
       border:1px solid #ACE;
       @include arrow(top, left, #BADA55, #ACE);
   }
 *
 */
/**
 * Media query mixin.
 *
 * It’s not great practice to define solid breakpoints up-front, preferring to
 * modify your design when it needs it, rather than assuming you’ll want a
 * change at ‘mobile’. However, as inuit.css is required to take a hands off
 * approach to design decisions, this is the closest we can get to baked-in
 * responsiveness. It’s flexible enough to allow you to set your own breakpoints
 * but solid enough to be frameworkified.
 *
 * We define some broad breakpoints in our vars file that are picked up here
 * for use in a simple media query mixin. Our options are:
 *
 * palm
 * lap
 * lap-and-up
 * portable
 * desk
 * desk-wide
 *
 * Not using a media query will, naturally, serve styles to all devices.
 *
 * `@include media-query(palm){ [styles here] }`
 *
 * We work out your end points for you:
 */
/*! normalize.css v2.1.0 | MIT License | git.io/normalize */
/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */
/*
 * Correct `block` display not defined in IE 8/9.
 */
.acn-trans article,
.acn-trans aside,
.acn-trans details,
.acn-trans figcaption,
.acn-trans figure,
footer.acn-trans,
header.acn-trans,
.acn-trans hgroup,
.acn-trans main,
.acn-trans nav,
.acn-trans section,
.acn-trans summary {
  display: block; }

/*
 * Correct `inline-block` display not defined in IE 8/9.
 */
.acn-trans audio,
.acn-trans canvas,
.acn-trans video {
  display: inline-block; }

/*
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
.acn-trans audio:not([controls]) {
  display: none;
  height: 0; }

/*
 * Address styling not present in IE 8/9.
 */
[hidden] {
  display: none; }

/* ==========================================================================
   Base
   ========================================================================== */
/*
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html .acn-trans {
  font-family: sans-serif;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -ms-text-size-adjust: 100%;
  /* 2 */ }

/*
 * Remove default margin.
 */
body {
  margin: 0; }

/* ==========================================================================
   Links
   ========================================================================== */
/*
 * Address `outline` inconsistency between Chrome and other browsers.
 */
.acn-trans a:focus {
  outline: thin dotted; }

/*
 * Improve readability when focused and also mouse hovered in all browsers.
 */
.acn-trans a:active,
.acn-trans a:hover {
  outline: 0; }

/* ==========================================================================
   Typography
   ========================================================================== */
/*
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari 5, and Chrome.
 */
.acn-trans h1 {
  font-size: 2em;
  margin: 0.67em 0; }

/*
 * Address styling not present in IE 8/9, Safari 5, and Chrome.
 */
.acn-trans abbr[title] {
  border-bottom: 1px dotted; }

/*
 * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
 */
.acn-trans b,
.acn-trans strong {
  font-weight: bold; }

/*
 * Address styling not present in Safari 5 and Chrome.
 */
.acn-trans dfn {
  font-style: italic; }

/*
 * Address differences between Firefox and other browsers.
 */
.acn-trans hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0; }

/*
 * Address styling not present in IE 8/9.
 */
.acn-trans mark {
  background: #ff0;
  color: #000; }

/*
 * Correct font family set oddly in Safari 5 and Chrome.
 */
.acn-trans code,
.acn-trans kbd,
.acn-trans pre,
.acn-trans samp {
  font-family: monospace, serif;
  font-size: 1em; }

/*
 * Improve readability of pre-formatted text in all browsers.
 */
.acn-trans pre {
  white-space: pre-wrap; }

/*
 * Set consistent quote types.
 */
.acn-trans q {
  quotes: "\201C" "\201D" "\2018" "\2019"; }

/*
 * Address inconsistent and variable font size in all browsers.
 */
.acn-trans small {
  font-size: 80%; }

/*
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
.acn-trans sub,
.acn-trans sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

.acn-trans sup {
  top: -0.5em; }

.acn-trans sub {
  bottom: -0.25em; }

/* ==========================================================================
   Embedded content
   ========================================================================== */
/*
 * Remove border when inside `a` element in IE 8/9.
 */
.acn-trans img {
  border: 0; }

/*
 * Correct overflow displayed oddly in IE 9.
 */
.acn-trans svg:not(:root) {
  overflow: hidden; }

/* ==========================================================================
   Figures
   ========================================================================== */
/*
 * Address margin not present in IE 8/9 and Safari 5.
 */
.acn-trans figure {
  margin: 0; }

/* ==========================================================================
   Forms
   ========================================================================== */
/*
 * Define consistent border, margin, and padding.
 */
.acn-trans fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

/*
 * 1. Correct `color` not being inherited in IE 8/9.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
.acn-trans legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */ }

/*
 * 1. Correct font family not being inherited in all browsers.
 * 2. Correct font size not being inherited in all browsers.
 * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
 */
.acn-trans button,
.acn-trans input,
.acn-trans select,
.acn-trans textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 2 */
  margin: 0;
  /* 3 */ }

/*
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
.acn-trans button,
.acn-trans input {
  line-height: normal; }

/*
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */
.acn-trans button,
.acn-trans select {
  text-transform: none; }

/*
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
.acn-trans button,
html .acn-trans input[type="button"],
.acn-trans input[type="reset"],
.acn-trans input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */ }

/*
 * Re-set default cursor for disabled elements.
 */
.acn-trans button[disabled],
html .acn-trans input[disabled] {
  cursor: default; }

/*
 * 1. Address box sizing set to `content-box` in IE 8/9.
 * 2. Remove excess padding in IE 8/9.
 */
.acn-trans input[type="checkbox"],
.acn-trans input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/*
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */
.acn-trans input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  /* 2 */
  box-sizing: content-box; }

/*
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */
.acn-trans input[type="search"]::-webkit-search-cancel-button,
.acn-trans input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/*
 * Remove inner padding and border in Firefox 4+.
 */
.acn-trans button::-moz-focus-inner,
.acn-trans input::-moz-focus-inner {
  border: 0;
  padding: 0; }

/*
 * 1. Remove default vertical scrollbar in IE 8/9.
 * 2. Improve readability and alignment in all browsers.
 */
.acn-trans textarea {
  overflow: auto;
  /* 1 */
  vertical-align: top;
  /* 2 */ }

/* ==========================================================================
   Tables
   ========================================================================== */
/*
 * Remove most spacing between table cells.
 */
.acn-trans table {
  border-collapse: collapse;
  border-spacing: 0; }

/*------------------------------------*\
    $RESET
\*------------------------------------*/
/**
 * A more considered reset; more of a restart...
 * As per: csswizardry.com/2011/10/reset-restarted
 */
/**
* Let’s make the box model all nice, shall we...?
*/
.acn-trans, .acn-trans *, .acn-trans:before, .acn-trans *:before, .acn-trans:after, .acn-trans *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

/**
 * The usual...
 */
.acn-trans h1,
.acn-trans h2,
.acn-trans h3,
.acn-trans h4,
.acn-trans h5,
.acn-trans h6,
.acn-trans p,
.acn-trans blockquote,
.acn-trans pre,
.acn-trans dl,
.acn-trans dd,
.acn-trans ol,
.acn-trans ul,
.acn-trans form,
.acn-trans fieldset,
.acn-trans legend,
.acn-trans table,
.acn-trans th,
.acn-trans td,
.acn-trans caption,
.acn-trans hr {
  margin: 0;
  padding: 0; }

/**
 * Give a help cursor to elements that give extra info on `:hover`.
 */
.acn-trans abbr[title],
.acn-trans dfn[title] {
  cursor: help; }

/**
 * Remove underlines from potentially troublesome elements.
 */
.acn-trans u,
.acn-trans ins {
  text-decoration: none; }

/**
 * Apply faux underline via `border-bottom`.
 */
.acn-trans ins {
  border-bottom: 1px solid; }

/**
 * So that `alt` text is visually offset if images don’t load.
 */
.acn-trans img {
  font-style: italic; }

/**
 * Give form elements some cursor interactions...
 */
.acn-trans button,
.acn-trans select,
.acn-trans option {
  cursor: pointer;
 }

.acn-trans .text-input:active,
.acn-trans .text-input:focus,
.acn-trans textarea:active,
.acn-trans textarea:focus {
  cursor: text;
  outline: none;
}

/*------------------------------------*\
    $CLEARFIX
\*------------------------------------*/
/**
 * Micro clearfix, as per: css-101.org/articles/clearfix/latest-new-clearfix-so-far.php
 * Extend the clearfix class with Sass to avoid the `.cf` class appearing over
 * and over in your markup.
 */
.acn-trans .cf:after, .acn-trans .nav:after, .acn-trans .media:after, .acn-trans .matrix:after, .acn-trans .multi-list:after, .acn-trans .stat-group:after {
  content: "";
  display: table;
  clear: both; }

/*------------------------------------*\
    $SHARED
\*------------------------------------*/
/**
 * Where `margin-bottom` is concerned, this value will be the same as the
 * base line-height. This allows us to keep a consistent vertical rhythm.
 * As per: csswizardry.com/2012/06/single-direction-margin-declarations
 */
/**
 * Base elements
 */
.acn-trans h1,
.acn-trans h2,
.acn-trans h3,
.acn-trans h4,
.acn-trans h5,
.acn-trans h6,
.acn-trans hgroup,
.acn-trans ul,
.acn-trans ol,
.acn-trans dl,
.acn-trans blockquote,
.acn-trans p,
.acn-trans address,
.acn-trans table,
.acn-trans fieldset,
.acn-trans figure,
.acn-trans pre,
.acn-trans .form-fields > li,
.acn-trans .media,
.acn-trans .island,
.acn-trans .islet {
  margin-bottom: 24px;
  margin-bottom: 1.5rem; }

.acn-trans .islet h1,
.acn-trans .islet h2,
.acn-trans .islet h3,
.acn-trans .islet h4,
.acn-trans .islet h5,
.acn-trans .islet h6,
.acn-trans .islet hgroup,
.acn-trans .islet  ul,
.acn-trans .islet ol,
.acn-trans .islet dl,
.acn-trans .islet blockquote,
.acn-trans .islet p,
.acn-trans .islet address,
.acn-trans .islet table,
.acn-trans .islet fieldset,
.acn-trans .islet figure,
.acn-trans .islet pre,
.acn-trans .islet .form-fields > li,
.acn-trans .islet .media,
.acn-trans .islet .island,
.acn-trans .islet .islet {
    margin-bottom: 12px;
    margin-bottom: 0.75rem; }

/**
 * Doubled up `margin-bottom` helper class.
 */
.acn-trans .landmark {
  margin-bottom: 48px;
  margin-bottom: 3rem; }

/**
 * `hr` elements only take up a few pixels, so we need to give them special
 * treatment regarding vertical rhythm.
 */
.acn-trans hr {
  margin-bottom: 22px;
  margin-bottom: 1.375rem; }

/**
 * Where `margin-left` is concerned we want to try and indent certain elements
 * by a consistent amount. Define that amount once, here.
 */
.acn-trans ul,
.acn-trans ol,
.acn-trans dd {
  margin-left: 48px;
  margin-left: 3rem; }

/**
 * Base styles; unclassed HTML elements etc.
 */
/*------------------------------------*\
    $MAIN
\*------------------------------------*/



/*------------------------------------*\
    $HEADINGS
\*------------------------------------*/
/**
 * As per: csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css
 *
 * When we define a heading we also define a corresponding class to go with it.
 * This allows us to apply, say, `class=alpha` to a `h3`; a double-stranded
 * heading hierarchy.
 */
.acn-trans h1,
.acn-trans .alpha {
  font-size: 36px;
  font-size: 2.25rem;
  line-height: 1.33333; }

.acn-trans h2,
.acn-trans .beta {
  font-size: 30px;
  font-size: 1.875rem;
  line-height: 1.6; }

.acn-trans h3,
.acn-trans .gamma {
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 1; }

.acn-trans h4,
.acn-trans .delta {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1.2; }

.acn-trans h5,
.acn-trans .epsilon {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5; }

.acn-trans h6,
.acn-trans .zeta {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.71429; }

/**
 * Heading groups and generic any-heading class.
 * To target any heading of any level simply apply a class of `.hN`, e.g.:
 *
   <hgroup>
       <h1 class=hN>inuit.css</h1>
       <h2 class=hN>Best. Framework. Ever!</h2>
   </hgroup>
 *
 */
.acn-trans hgroup .hN {
  margin-bottom: 0; }

/**
 * A series of classes for setting massive type; for use in heroes, mastheads,
 * promos, etc.
 */
.acn-trans .giga {
  font-size: 96px;
  font-size: 6rem;
  line-height: 1; }

.acn-trans .mega {
  font-size: 72px;
  font-size: 4.5rem;
  line-height: 1; }

.acn-trans .kilo {
  font-size: 48px;
  font-size: 3rem;
  line-height: 1; }

/*------------------------------------*\
    $PARAGRAPHS
\*------------------------------------*/
/**
 * The `.lede` class is used to make the introductory text (usually a paragraph)
 * of a document slightly larger.
 */
.acn-trans .lede,
.acn-trans .lead {
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.33333; }

/*------------------------------------*\
    $SMALLPRINT
\*------------------------------------*/
/**
 * A series of classes for setting tiny type; for use in smallprint etc.
 */
.acn-trans .smallprint,
.acn-trans .milli {
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 2; }

.acn-trans .micro {
  font-size: 10px;
  font-size: 0.625rem;
  line-height: 2.4; }

/*------------------------------------*\
    $QUOTES
\*------------------------------------*/
/**
 * If English quotes are set in `_vars.scss`, define them here.
 */
/**
 * Big up @boblet: html5doctor.com/blockquote-q-cite
 */
/**
 * Inline quotes.
 */
.acn-trans q {
  quotes: "\2018" "\2019" "\201C " "\201D "; }
  .acn-trans q:before {
    content: "\2018";
    content: open-quote; }
  .acn-trans q:after {
    content: "\2019";
    content: close-quote; }
  .acn-trans q q:before {
    content: "\201C";
    content: open-quote; }
  .acn-trans q q:after {
    content: "\201D";
    content: close-quote; }

.acn-trans blockquote {
  quotes: "\201C " "\201D "; }
  .acn-trans blockquote p:before {
    content: "\201C ";
    content: open-quote; }
  .acn-trans blockquote p:after {
    content: "";
    content: no-close-quote; }
  .acn-trans blockquote p:last-of-type:after {
    content: "\201D ";
    content: close-quote; }
  .acn-trans blockquote q:before {
    content: "\2018";
    content: open-quote; }
  .acn-trans blockquote q:after {
    content: "\2019";
    content: close-quote; }

/**
 *
   <blockquote>
       <p>Insanity: doing the same thing over and over again and expecting
       different results.</p>
       <b class=source>Albert Einstein</b>
   </blockquote>
 *
 */
.acn-trans blockquote {
  /**
   * .4em is roughly equal to the width of the opening “ that we wish to hang.
   */
  text-indent: -0.41em; }

.acn-trans blockquote p:last-of-type {
    margin-bottom: 0; }

.acn-trans .source {
  display: block;
  text-indent: 0; }
  .source:before {
    content: "\2014"; }

/*------------------------------------*\
    $CODE
\*------------------------------------*/
/**
 * Use an explicit font stack to ensure browsers render correct `line-height`.
 */
.acn-trans pre {
  overflow: auto; }

.acn-trans pre mark {
  background: none;
  border-bottom: 1px solid;
  color: inherit; }

/**
 * Add comments to your code examples, e.g.:
 *
   <code>&lt;/div&gt;<span class=code-comment>&lt;!-- /wrapper --&gt;</span></code>
 *
 */
.acn-trans .code-comment {
  /**
   * Override this setting in your theme stylesheet
   */
  opacity: 0.75;
  filter: alpha(opacity=75); }

/**
 * You can add line numbers to your code examples but be warned, it requires
 * some pretty funky looking markup, e.g.:
 *
   <ol class=line-numbers>
       <li><code>.nav{</code></li>
       <li><code>    list-style:none;</code></li>
       <li><code>    margin-left:0;</code></li>
       <li><code>}</code></li>
       <li><code>    .nav > li,</code></li>
       <li><code>        .nav > li > a{</code></li>
       <li><code>            display:inline-block;</code></li>
       <li><code>           *display:inline-block;</code></li>
       <li><code>            zoom:1;</code></li>
       <li><code>        }</code></li>
   </ol>
 *
 * 1. Make the list look like code.
 * 2. Give the list flush numbers with a leading zero.
 * 3. Make sure lines of code don’t wrap.
 * 4. Give the code form by forcing the `code` to honour white-space.
 */
.acn-trans .line-numbers {
  font-family: monospace, serif;
  /* [1] */
  list-style: decimal-leading-zero inside;
  /* [2] */
  white-space: nowrap;
  /* [3] */
  overflow: auto;
  /* [3] */
  margin-left: 0; }

.acn-trans .line-numbers code {
  white-space: pre;
  /* [4] */ }

/*------------------------------------*\
    $IMAGES
\*------------------------------------*/
/**
 * Demo: jsfiddle.net/inuitcss/yMtur
 */
/**
 * Fluid images.
 */
.acn-trans img {
  max-width: 100%; }

/**
 * Non-fluid images if you specify `width` and/or `height` attributes.
 */
.acn-trans img[width],
.acn-trans img[height] {
  max-width: none; }

/**
 * Rounded images.
 */
.acn-trans .img--round {
  border-radius: 4px; }

/**
 * Image placement variations.
 */
.acn-trans .img--right {
  float: right;
  margin-bottom: 24px;
  margin-left: 24px; }

.acn-trans .img--left {
  float: left;
  margin-right: 24px;
  margin-bottom: 24px; }

.acn-trans .img--center {
  display: block;
  margin-right: auto;
  margin-bottom: 24px;
  margin-left: auto; }

/**
 * Keep your images on your baseline.
 *
 * Please note, these will not work too nicely with fluid images and will
 * distort when resized below a certain width. Use with caution.
 */
.acn-trans .img--short {
  height: 120px; }

.acn-trans .img--medium {
  height: 240px; }

.acn-trans .img--tall {
  height: 360px; }

/**
 * Images in `figure` elements.
 */
.acn-trans figure > img {
  display: block; }

/*------------------------------------*\
    $LISTS
\*------------------------------------*/
/**
 * Remove vertical spacing from nested lists.
 */
.acn-trans li > ul,
.acn-trans li > ol {
  margin-bottom: 0; }

/**
 * Have a numbered `ul` without the semantics implied by using an `ol`.
 */
/*ul*/
.acn-trans .numbered-list {
  list-style-type: decimal; }

/*------------------------------------*\
    $TABLES
\*------------------------------------*/
/**
 * We have a lot at our disposal for making very complex table constructs, e.g.:
 *
   <table class="table--bordered  table--striped  table--data">
       <colgroup>
           <col class=t10>
           <col class=t10>
           <col class=t10>
           <col>
       </colgroup>
       <thead>
           <tr>
               <th colspan=3>Foo</th>
               <th>Bar</th>
           </tr>
           <tr>
               <th>Lorem</th>
               <th>Ipsum</th>
               <th class=numerical>Dolor</th>
               <th>Sit</th>
           </tr>
       </thead>
       <tbody>
           <tr>
               <th rowspan=3>Sit</th>
               <td>Dolor</td>
               <td class=numerical>03.788</td>
               <td>Lorem</td>
           </tr>
           <tr>
               <td>Dolor</td>
               <td class=numerical>32.210</td>
               <td>Lorem</td>
           </tr>
           <tr>
               <td>Dolor</td>
               <td class=numerical>47.797</td>
               <td>Lorem</td>
           </tr>
           <tr>
               <th rowspan=2>Sit</th>
               <td>Dolor</td>
               <td class=numerical>09.640</td>
               <td>Lorem</td>
           </tr>
           <tr>
               <td>Dolor</td>
               <td class=numerical>12.117</td>
               <td>Lorem</td>
           </tr>
       </tbody>
   </table>
 *
 */
.acn-trans table {
  width: 100%; }

.acn-trans th,
.acn-trans td {
  padding: 12px;
}
  
    
@media screen and (min-width: 480px) {
	.acn-trans th,
	.acn-trans td {
	  padding: 12px;
	}
}

/**
 * Cell alignments
 */
.acn-trans [colspan] {
  text-align: center; }

.acn-trans [colspan="1"] {
  text-align: left; }

.acn-trans [rowspan] {
  vertical-align: middle; }

.acn-trans [rowspan="1"] {
  vertical-align: top; }

.acn-trans .numerical {
  text-align: right; }

/**
 * In the HTML above we see several `col` elements with classes whose numbers
 * represent a percentage width for that column. We leave one column free of a
 * class so that column can soak up the effects of any accidental breakage in
 * the table.
 */
.acn-trans .t5 {
  width: 5%; }

.acn-trans .t10 {
  width: 10%; }

.acn-trans .t12 {
  width: 12.5%; }

/* 1/8 */
.acn-trans .t15 {
  width: 15%; }

.acn-trans .t20 {
  width: 20%; }

.acn-trans .t25 {
  width: 25%; }

/* 1/4 */
.acn-trans .t30 {
  width: 30%; }

.acn-trans .t33 {
  width: 33.333%; }

/* 1/3 */
.acn-trans .t35 {
  width: 35%; }

.acn-trans .t37 {
  width: 37.5%; }

/* 3/8 */
.acn-trans .t40 {
  width: 40%; }

.acn-trans .t45 {
  width: 45%; }

.acn-trans .t50 {
  width: 50%; }

/* 1/2 */
.acn-trans .t55 {
  width: 55%; }

.acn-trans .t60 {
  width: 60%; }

.acn-trans .t62 {
  width: 62.5%; }

/* 5/8 */
.acn-trans .t65 {
  width: 65%; }

.acn-trans .t66 {
  width: 66.666%; }

/* 2/3 */
.acn-trans .t70 {
  width: 70%; }

.acn-trans .t75 {
  width: 75%; }

/* 3/4*/
.acn-trans .t80 {
  width: 80%; }

.acn-trans .t85 {
  width: 85%; }

.acn-trans .t87 {
  width: 87.5%; }

/* 7/8 */
.acn-trans .t90 {
  width: 90%; }

.acn-trans .t95 {
  width: 95%; }

/**
 * Bordered tables
 */
.acn-trans .table--bordered th,
.acn-trans .table--bordered td {
  border: 1px solid #cccccc; }
  .table--bordered th:empty,
  .table--bordered td:empty {
    border: none; }
.acn-trans .table--bordered thead tr:last-child th {
  border-bottom-width: 2px; }
.acn-trans .table--bordered tbody tr th:last-of-type {
  border-right-width: 2px; }

/**
 * Striped tables
 */
.acn-trans .table--striped tbody tr:nth-of-type(odd) {
  background-color: #ffc;
  /* Override this color in your theme stylesheet */ }

/**
 * Data table
 */
.acn-trans .table--data {
  font: 12px/1.5 sans-serif; }

/*------------------------------------*\
    $FORMS
\*------------------------------------*/
/**
 *
 * Demo: jsfiddle.net/inuitcss/MhHHU
 *
 */
.acn-trans fieldset {
  padding: 24px; }

/**
 * Text inputs
 *
 * Instead of a `[type]` selector for each kind of form input, we just use a
 * class to target any/every one, e.g.:
   <input type=text class=text-input>
   <input type=email class=text-input>
   <input type=password class=text-input>
 *
 */
.acn-trans .text-input,
.acn-trans textarea {
  /**
   * Style these via your theme stylesheet.
   */ }

/**
 * Group sets of form fields in a list, e.g.:
 *
   <ul class=form-fields>
       <li>
           <label />
           <input />
       </li>
       <li>
           <label />
           <select />
       </li>
       <li>
           <label />
           <input />
       </li>
   </ul>
 *
 */
.acn-trans .form-fields {
  list-style: none;
  margin: 0; }

.acn-trans .form-fields > li:last-child {
  margin-bottom: 0; }

/**
 * Labels
 *
 * Define a `.label` class as well as a `label` element. This means we can apply
 * label-like styling to meta-labels for groups of options where a `label`
 * element is not suitable, e.g.:
 *
   <li>
       <span class=label>Select an option below:</span>
       <ul class="multi-list  four-cols">
           <li>
               <input /> <label />
           </li>
           <li>
               <input /> <label />
           </li>
           <li>
               <input /> <label />
           </li>
           <li>
               <input /> <label />
           </li>
       </ul>
   </li>
 *
 */
.acn-trans label,
.acn-trans .label {
  display: block; }

/**
 * Extra help text in `label`s, e.g.:
 *
   <label>Card number <small class=additional>No spaces</small></label>
 *
 */
.acn-trans .additional {
  display: block;
  font-weight: normal; }

/*
 * Groups of checkboxes and radios, e.g.:
 *
   <li>
       <ul class=check-list>
           <li>
               <input /> <label />
           </li>
           <li>
               <input /> <label />
           </li>
       </ul>
   </li>
 *
 */
.acn-trans .check-list {
  list-style: none;
  margin: 0; }

/*
 * Labels in check-lists
 */
.acn-trans .check-label,
.acn-trans .check-list label,
.acn-trans .check-list .label {
  display: inline-block; }

/**
 * Spoken forms are for forms that read like spoken word, e.g.:
 *
   <li class=spoken-form>
       Hello, my <label for=spoken-name>name</label> is
       <input type=text class=text-input id=spoken-name>. My home
       <label for=country>country</label> is
       <select id=country>
           <option>UK</option>
           <option>US</option>
           <option>Other</option>
       </select>
   </li>
 *
 */
.acn-trans .spoken-form label {
  display: inline-block;
  font: inherit; }

/**
 * Extra help text displayed after a field when that field is in focus, e.g.:
 *
   <label for=email>Email:</label>
   <input type=email class=text-input id=email>
   <small class=extra-help>.edu emails only</small>
 *
 * We leave the help text in the document flow and merely set it to
 * `visibility:hidden;`. This means that it won’t interfere with anything once
 * it reappears.
 *
 */
/*small*/
.acn-trans .extra-help {
  display: inline-block;
  visibility: hidden; }

.acn-trans .text-input:active + .extra-help,
.acn-trans .text-input:focus + .extra-help {
  visibility: visible; }

/**
 * Objects and abstractions
 */
/*------------------------------------*\
    $GRIDS
\*------------------------------------*/
/**
 * Fluid and nestable grid system, e.g.:
 *
   <div class="grid">

       <div class="grid__item  one-third">
           <p>One third grid</p>
       </div><!--

    --><div class="grid__item  two-thirds">
           <p>Two thirds grid</p>
       </div><!--

    --><div class="grid__item  one-half">
           <p>One half grid</p>
       </div><!--

    --><div class="grid__item  one-quarter">
           <p>One quarter grid</p>
       </div><!--

    --><div class="grid__item  one-quarter">
           <p>One quarter grid</p>
       </div>

   </div>
 *
 * Demo: jsfiddle.net/inuitcss/CLYUC
 *
 */
/**
 * Grid wrapper
 */
.acn-trans .grid {
  margin-left: -24px;
  list-style: none;
  margin-bottom: 0; }

/**
 * Very infrequently occuring grid wrappers as children of grid wrappers.
 */
.acn-trans .grid > .grid {
  margin-left: 0; }

/**
 * Grid
 */
.acn-trans .grid__item {
  display: inline-block;
  width: 100%;
  padding-left: 24px;
  vertical-align: top; }

.acn-trans .auto_width{
	width:auto;
}

.acn-trans .grid__item {
  display: block;
  float: left; }

.rtl .acn-trans .grid__item {
  float: right;
  padding-right: 24px;
  padding-left: 0;
}    

/*------------------------------------*\
    $FLEXBOX
\*------------------------------------*/
/**
 * Until we can utilise flexbox natively we can kinda, sorta, attempt to emulate
 * it, in a way... e.g.:
 *
   <header class=flexbox>

       <div class=flexbox__item>
           <b>Welcome to</b>
       </div>

       <div class=flexbox__item>
           <img src="/nrd//csswizardry.com/inuitcss/img/logo.jpg" alt="inuit.css">
       </div>

   </header>
 *
 * We can also combine our grid system classes with `.flexbox__item` classes,
 * e.g.:
 *
   <div class=flexbox>
       <div class="flexbox__item  one-quarter">
       </div>
       <div class="flexbox__item  three-quarters">
       </div>
   </div>
 *
 * It’s pretty poorly named I’m afraid, but it works...
 *
 * Demo: jsfiddle.net/inuitcss/ufUh2
 *
 */
.acn-trans .flexbox {
  display: table;
  width: 100%; }

/**
 * Nasty hack to circumvent Modernizr conflicts.
 */
html.flexbox {
  display: block;
  width: auto; }

.acn-trans .flexbox__item {
  display: table-cell;
  vertical-align: middle; }

/*------------------------------------*\
    $COLUMNS
\*------------------------------------*/
/**
 * Here we can set elements in columns of text using CSS3, e.g.:
 *
   <p class=text-cols--2>
 *
 * Demo: jsfiddle.net/inuitcss/E26Yd
 *
 */
.acn-trans .text-cols--2, .text-cols--3, .text-cols--4, .text-cols--5 {
  -webkit-column-gap: 24px;
  -moz-column-gap: 24px;
  -ms-column-gap: 24px;
  -o-column-gap: 24px;
  column-gap: 24px; }

.acn-trans .text-cols--2 {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  -ms-column-count: 2;
  -o-column-count: 2;
  column-count: 2; }

.acn-trans .text-cols--3 {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  -ms-column-count: 3;
  -o-column-count: 3;
  column-count: 3; }

.acn-trans .text-cols--4 {
  -webkit-column-count: 4;
  -moz-column-count: 4;
  -ms-column-count: 4;
  -o-column-count: 4;
  column-count: 4; }

.acn-trans .text-cols--5 {
  -webkit-column-count: 5;
  -moz-column-count: 5;
  -ms-column-count: 5;
  -o-column-count: 5;
  column-count: 5; }

/*------------------------------------*\
    $NAV
\*------------------------------------*/
/**
 * Nav abstraction as per: csswizardry.com/2011/09/the-nav-abstraction
 * When used on an `ol` or `ul`, this class throws the list into horizontal mode
 * e.g.:
 *
   <ul class=nav>
       <li><a href=#>Home</a></li>
       <li><a href=#>About</a></li>
       <li><a href=#>Portfolio</a></li>
       <li><a href=#>Contact</a></li>
   </ul>
 *
 * Demo: jsfiddle.net/inuitcss/Vnph4
 *
 */
.acn-trans .nav {
  list-style: none;
  margin-left: 0; }
.acn-trans .nav > li,
.acn-trans .nav > li > a {
    display: inline-block;
    *display: inline;
    zoom: 1; }

/**
 * `.nav--stacked` extends `.nav` and throws the list into vertical mode, e.g.:
 *
   <ul class="nav  nav--stacked">
       <li><a href=#>Home</a></li>
       <li><a href=#>About</a></li>
       <li><a href=#>Portfolio</a></li>
       <li><a href=#>Contact</a></li>
   </ul>
 *
 */
.acn-trans .nav--stacked > li {
  display: list-item; }
.acn-trans .nav--stacked > li > a {
    display: block; }

/**
 * `.nav--banner` extends `.nav` and centres the list, e.g.:
 *
   <ul class="nav  nav--banner">
       <li><a href=#>Home</a></li>
       <li><a href=#>About</a></li>
       <li><a href=#>Portfolio</a></li>
       <li><a href=#>Contact</a></li>
   </ul>
 *
 */
.acn-trans .nav--banner {
  text-align: center; }

/**
 * Give nav links a big, blocky hit area. Extends `.nav`, e.g.:
 *
   <ul class="nav  nav--block">
       <li><a href=#>Home</a></li>
       <li><a href=#>About</a></li>
       <li><a href=#>Portfolio</a></li>
       <li><a href=#>Contact</a></li>
   </ul>
 *
 */
.acn-trans .nav--block {
  line-height: 1;
  /**
   * Remove whitespace caused by `inline-block`.
   */
  letter-spacing: -0.31em;
  word-spacing: -0.43em;
  white-space: nowrap; }
  .nav--block > li {
    letter-spacing: normal;
    word-spacing: normal; }
    .nav--block > li > a {
      padding: 12px; }

/**
 * Force a nav to occupy 100% of the available width of its parent. Extends
 * `.nav`, e.g.:
 *
   <ul class="nav  nav--fit">
       <li><a href=#>Home</a></li>
       <li><a href=#>About</a></li>
       <li><a href=#>Portfolio</a></li>
       <li><a href=#>Contact</a></li>
   </ul>
 *
 * Thanks to @pimpl for this idea!
 */
.acn-trans .nav--fit {
  display: table;
  width: 100%; }
  .nav--fit > li {
    display: table-cell; }
    .nav--fit > li > a {
      display: block; }

/**
 * Make a list of keywords. Extends `.nav`, e.g.:
 *
   `<ul class="nav  nav--keywords>`
 *
 */
.acn-trans .nav--keywords > li:after {
  content: "\002C" "\00A0"; }
.acn-trans .nav--keywords > li:last-child:after {
  display: none; }

/*------------------------------------*\
    $PAGINATION
\*------------------------------------*/
/**
 * Basic pagination object, extends `.nav`.
 * Requires some funky commenting to collapse any white-space caused by the
 * `display:inline-block;` rules.
 *
   <ol class="nav  pagination">
       <li class=pagination__first>First</li>
       <li class=pagination__prev>Previous</li>
       <li><a href=/page/1>1</a></li>
       <li><a href=/page/2>2</a></li>
       <li class=current><a href=/page/3>3</a></li>
       <li><a href=/page/4>4</a></li>
       <li><a href=/page/5>5</a></li>
       <li class=pagination__next><a href=/page/next>Next</a></li>
       <li class=pagination__last><a href=/page/last>Last</a></li>
   </ol>
 *
 * Demo: jsfiddle.net/inuitcss/9Y6PU
 *
 */
.acn-trans .pagination {
  text-align: center;
  /**
   * Remove whitespace caused by `inline-block`.
   */
  letter-spacing: -0.31em;
  word-spacing: -0.43em; }

.acn-trans .pagination > li {
  padding: 12px;
  letter-spacing: normal;
  word-spacing: normal; }

.acn-trans .pagination > li > a {
  padding: 12px;
  margin: -12px; }

.acn-trans .pagination__first a:before {
  content: "\00AB" "\00A0"; }

.acn-trans .pagination__last a:after {
  content: "\00A0" "\00BB"; }

/*------------------------------------*\
    $BREADCRUMB
\*------------------------------------*/
/**
 * Simple breadcrumb styling to apply to (ordered) lists. Extends `.nav`, e.g.:
 *
   <ol class="nav  breadcrumb">
       <li><a href=#>Home</a></li>
       <li><a href=#>About</a></li>
       <li><a href=#>The Board</a></li>
       <li class=current><a href=#>Directors</a></li>
   </ol>
 *
 * Demo: jsfiddle.net/inuitcss/rkAY9
 *
 */
.acn-trans .breadcrumb > li + li:before {
  content: "\00BB" "\00A0"; }

/**
 * For denoting a path-like structure, GitHub style, e.g.:
 *
   <ol class="nav  breadcrumb--path">
       <li class=breadcrumb__root><a href=#>inuit.css</a></li>
       <li><a href=#>inuit.css</a></li>
       <li><a href=#>partials</a></li>
       <li class=current><a href=#>objects</a></li>
   </ol>
 *
 */
.acn-trans .breadcrumb--path > li + li:before {
  content: "\002F" "\00A0"; }

/**
 * Assign a delimiter on the fly through a data attribute, e.g.:
 *
   <ol class="nav  breadcrumb">
       <li><a href=#>Home</a></li>
       <li data-breadcrumb="|"><a href=#>About</a></li>
       <li data-breadcrumb="|"><a href=#>The Board</a></li>
       <li data-breadcrumb="|" class=current><a href=#>Directors</a></li>
   </ol>
 *
 */
.acn-trans .breadcrumb > li + li[data-breadcrumb]:before {
  content: attr(data-breadcrumb) "\00A0"; }

/**
 * Denote the root of the tree.
 */
.acn-trans .breadcrumb__root {
  font-weight: bold; }

/*------------------------------------*\
    $MEDIA
\*------------------------------------*/
/**
 * Place any image- and text-like content side-by-side, as per:
 * stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code
 * E.g.:
 *
   <div class=media>
       <img src=http://placekitten.com/200/300 alt="" class=media__img>
       <p class=media__body>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
       sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
   </div>
 *
 * Demo: jsfiddle.net/inuitcss/cf4Qs
 *
 */
.acn-trans .media {
  display: block; }

.acn-trans .media__img {
  float: left;
  margin-right: 24px; }

/**
 * Reversed image location (right instead of left).
 */
.acn-trans .media__img--rev {
  float: right;
  margin-left: 24px; }

.acn-trans .media__img img,
.acn-trans .media__img--rev img {
  display: block; }

.acn-trans .media__body {
  overflow: hidden; }

.acn-trans .media__body,
.acn-trans .media__body > :last-child {
  margin-bottom: 0; }

/**
 * `.img`s in `.islet`s need an appropriately sized margin.
 */
.acn-trans .islet .media__img {
  margin-right: 12px; }

.acn-trans .islet .media__img--rev {
  margin-left: 12px; }

/*------------------------------------*\
    $BLOCK-LIST
\*------------------------------------*/
/**
 * Create big blocky lists of content, e.g.:
 *
   <ul class=block-list>
      <li>Foo</li>
      <li>Bar</li>
      <li>Baz</li>
      <li><a href=# class=block-list__link>Foo Bar Baz</a></li>
   </ul>
 *
 * Extend this object in your theme stylesheet.
 *
 * Demo: jsfiddle.net/inuitcss/hR57q
 *
 */
.acn-trans .block-list,
.acn-trans .matrix,
.acn-trans .block-list > li,
.acn-trans .matrix > li {
  border: 0 solid #cccccc; }

.acn-trans .block-list,
.acn-trans .matrix {
  list-style: none;
  margin-left: 0;
  border-top-width: 1px; }
.acn-trans .block-list > li, .matrix > li {
    border-bottom-width: 1px;
    padding: 12px; }

.acn-trans .block-list__link, .matrix__link {
  display: block;
  padding: 12px;
  margin: -12px; }

/*------------------------------------*\
    $MATRIX
\*------------------------------------*/
/**
 * Create a grid of items out of a single list, e.g.:
 *
   <ul class="matrix  three-cols">
       <li class=all-cols>Lorem</li>
       <li>Ipsum <a href=#>dolor</a></li>
       <li><a href=# class=matrix__link>Sit</a></li>
       <li>Amet</li>
       <li class=all-cols>Consectetuer</li>
   </ul>
 *
 * Extend this object in your theme stylesheet.
 *
 * Demo: jsfiddle.net/inuitcss/Y2zrU
 *
 */
.acn-trans .matrix {
  border-left-width: 1px; }
.acn-trans .matrix > li {
    float: left;
    border-right-width: 1px; }

/**
 * The `.multi-list` object is a lot like the `.matrix` object only without the
 * blocky borders and padding.
 *
   <ul class="multi-list  four-cols">
       <li>Lorem</li>
       <li>Ipsum</li>
       <li>Dolor</li>
       <li>Sit</li>
   </ul>
 *
 * Demo: jsfiddle.net/inuitcss/Y2zrU
 *
 */
.acn-trans .multi-list {
  list-style: none;
  margin-left: 0; }

.acn-trans .multi-list > li {
  float: left; }

/**
 * Apply these classes alongside the `.matrix` or `.multi-list` classes on
 * lists to determine how wide their columns are.
 */
.acn-trans .two-cols > li {
  width: 50%; }

.acn-trans .three-cols > li {
  width: 33.333%; }

.acn-trans .four-cols > li {
  width: 25%; }

.acn-trans .five-cols > li {
  width: 20%; }

/**
 * Unfortunately we have to qualify this selector in order to bring its
 * specificity above the `.[number]-cols > li` selectors above.
 */
.acn-trans .matrix > .all-cols,
.acn-trans .multi-list > .all-cols {
  width: 100%; }

/*------------------------------------*\
    $SPLIT
\*------------------------------------*/
/**
 * Simple split item for creating two elements floated away from one another,
 * e.g.:
 *
   <dl class=split>
       <dt class=split__title>Burger and fries</dt>
       <dd>&pound;5.99</dd>
       <dt class=split__title>Fillet steak</dt>
       <dd>&pound;19.99</dd>
       <dt class=split__title>Ice cream</dt>
       <dd>&pound;2.99</dd>
   </dl>
 *
   <ol class="split  results">
       <li class=first><b class=split__title>1st place</b> Bob</li>
       <li class=second><b class=split__title>2nd place</b> Lilly</li>
       <li class=third><b class=split__title>3rd place</b> Ted</li>
   </ol>​
 *
 * Demo: jsfiddle.net/inuitcss/9gZW7
 *
 */
.acn-trans .split {
  text-align: right;
  list-style: none;
  margin-left: 0; }

.acn-trans .split__title {
  text-align: left;
  float: left;
  clear: left; }

/*------------------------------------*\
    $LINK-COMPLEX
\*------------------------------------*/
/**
 * As inspired by @necolas:
 * github.com/necolas/suit-utils/blob/master/link.css#L18
 *
 * Add hover behaviour to only selected items within links, e.g.:
 *
   <a href=log-in class=link-complex>
       <i class="s  s--user"></i>
       <span class=link-complex__target>Log in</span>
   </a>
 *
 * Demo: jsfiddle.net/inuitcss/rt9M3
 *
 */
.acn-trans .link-complex,
.acn-trans .link-complex:hover,
.acn-trans .link-complex:active,
.acn-trans .link-complex:focus {
  text-decoration: none; }

.acn-trans .link-complex:hover .link-complex__target,
.acn-trans .link-complex:active .link-complex__target,
.acn-trans .link-complex:focus .link-complex__target {
  text-decoration: underline; }

/*------------------------------------*\
    $SPRITE
\*------------------------------------*/
/**
 * Giving an element a class of `.sprite` will throw it into ‘sprite’ mode and apply
 * a background image e.g.:
 *
   <a class="sprite  sprite--question-mark">More info&hellip;</a>
 *
 * or
 *
   <a href=#><i class="sprite  sprite--question-mark"></i> Help and FAQ</a>
 *
 * Giving an element a class of `.icon` will throw it into ‘icon’ mode and will
 * not add a background, but should be used for icon fonts and is populated
 * through a `data-icon` attribute and the `:after` pseudo-element, e.g.:
 *
   <a href=#><i class=icon data-icon="&#xF000;"></i> View your favourites</a>
 *
 * Where ‘&#xF000;’ might map to a star in your particular icon font.
 *
 * These all require extension in your theme stylesheet, e.g. in your own CSS:
 *
   .sprite{
       background-image:url(path/to/your/sprite.png);
   }
   .sprite--link{ background-position:0   0  ; }
   .sprite--star{ background-position:0 -16px; }
 *
 * Demo: jsfiddle.net/inuitcss/6TKuS
 *
 */
.acn-trans .sprite,
.acn-trans .icon {
  display: inline-block;
  line-height: 1;
  position: relative;
  vertical-align: middle;
  zoom: 1;
  /**
   * So using `.icon` on certain elements doesn’t make a visual difference.
   */
  font-style: normal;
  font-weight: normal;
  /**
   * So icons added using `.icon` sit in the centre of the element.
   */
  text-align: center; }

.acn-trans .sprite {
  /**
   * The typical size of most icons. Override in your theme stylesheet.
   */
  width: 16px;
  height: 16px;
  top: -1px;
  /*
   * H5BP method image replacement:
   * github.com/h5bp/html5-boilerplate/commit/adecc5da035d6d76b77e3fa95c6abde841073da2
   */
  overflow: hidden;
  *text-indent: -9999px; }
.acn-trans .sprite:before {
    content: "";
    display: block;
    width: 0;
    height: 100%; }

/**
 * Set up icon font
 */
.acn-trans .icon {
  font-size: 16px;
  /**
   * Place the icon in a box the exact same dimensions as the icon itself.
   */
  width: 1em;
  height: 1em; }
.acn-trans .icon:before {
    content: attr(data-icon); }

/**
 * Icon size modifiers.
 */
.acn-trans .icon--large {
  font-size: 32px; }

.acn-trans .icon--huge {
  font-size: 64px; }

.acn-trans .icon--natural {
  font-size: inherit; }

/*------------------------------------*\
    $ICON-TEXT
\*------------------------------------*/
/**
 * For text-links etc that have an icon with them. Sometimes whitespace would
 * suffice in creating a gap between the icon and text, for example:
 *
   <a href=#>
       <i class="s  s--help"></i> Help &amp; support
   </a>
 *
 * However we will sometimes want a larger, explicity set gap:
   <a href=# class=icon-text>
       <i class="icon-text__icon  s  s--help"></i>Help &amp; support
   </a>
 *
 * Demo: jsfiddle.net/inuitcss/Q6Lbf
 *
 */
.acn-trans .icon-text > .icon-text__icon {
  margin-right: 6px; }

/**
 * We can also reverse the direction of the margin for icons that appear to the
 * right of the text content, thus:
 *
   <a href=# class=icon-text--rev>
       Help &amp; support<i class="icon-text__icon  s  s--help"></i>
   </a>
 *
 */
.acn-trans .icon-text--rev > .icon-text__icon {
  margin-left: 6px; }

/*------------------------------------*\
    $BEAUTONS.CSS
\*------------------------------------*/
/**
 * beautons is a beautifully simple button toolkit.
 *
 * LICENSE
 * 
 * Copyright 2013 Harry Roberts
 * 
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * 
 * http://apache.org/licenses/LICENSE-2.0
 * 
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * 
 */
/*!*
 * 
 * @csswizardry -- csswizardry.com/beautons
 * 
 */
/*------------------------------------*\
    $BASE
\*------------------------------------*/
/**
 * Base button styles.
 *
 * 1. Allow us to better style box model properties.
 * 2. Line different sized buttons up a little nicer.
 * 3. Stop buttons wrapping and looking broken.
 * 4. Make buttons inherit font styles.
 * 5. Force all elements using beautons to appear clickable.
 * 6. Normalise box model styles.
 * 7. If the button’s text is 1em, and the button is (3 * font-size) tall, then
 *    there is 1em of space above and below that text. We therefore apply 1em
 *    of space to the left and right, as padding, to keep consistent spacing.
 * 8. Basic cosmetics for default buttons. Change or override at will.
 * 9. Don’t allow buttons to have underlines; it kinda ruins the illusion.
 */
.acn-trans .btn {
  display: inline-block;
  /* [1] */
  vertical-align: middle;
  /* [2] */
  white-space: nowrap;
  /* [3] */
  font-family: inherit;
  /* [4] */
  font-size: 100%;
  /* [4] */
  cursor: pointer;
  /* [5] */
  border: none;
  /* [6] */
  margin: 0;
  /* [6] */
  padding-top: 0;
  /* [6] */
  padding-bottom: 0;
  /* [6] */
  line-height: 3;
  /* [7] */
  padding-right: 1em;
  /* [7] */
  padding-left: 1em;
  /* [7] */
  border-radius: 4px;
  /* [8] */ }

.acn-trans .btn,
.acn-trans .btn:hover {
  text-decoration: none;
  /* [9] */ }
.acn-trans .btn:active,
.acn-trans .btn:focus {
  outline: none; }

/*------------------------------------*\
    $SIZES
\*------------------------------------*/
/**
 * Button size modifiers.
 *
 * These all follow the same sizing rules as above; text is 1em, space around it
 * remains uniform.
 */
.acn-trans .btn--small {
  padding-right: 0.5em;
  padding-left: 0.5em;
  line-height: 2; }

.acn-trans .btn--large {
  padding-right: 1.5em;
  padding-left: 1.5em;
  line-height: 4; }

.acn-trans .btn--huge {
  padding-right: 2em;
  padding-left: 2em;
  line-height: 5; }

/**
 * These buttons will fill the entirety of their container.
 *
 * 1. Remove padding so that widths and paddings don’t conflict.
 */
.acn-trans .btn--full {
  width: 100%;
  padding-right: 0;
  /* [1] */
  padding-left: 0;
  /* [1] */
  text-align: center; }

/*------------------------------------*\
    $FONT-SIZES
\*------------------------------------*/
/**
 * Button font-size modifiers.
 */
.acn-trans .btn--alpha {
  font-size: 3rem; }

.acn-trans .btn--beta {
  font-size: 2rem; }

.acn-trans .btn--gamma {
  font-size: 1rem; }

/**
 * Make the button inherit sizing from its parent.
 */
.acn-trans .btn--natural {
  vertical-align: baseline;
  font-size: inherit;
  line-height: inherit;
  padding-right: 0.5em;
  padding-left: 0.5em; }

/*------------------------------------*\
    $FUNCTIONS
\*------------------------------------*/
/**
 * Button function modifiers.
 */
/**
 * Positive actions; e.g. sign in, purchase, submit, etc.
 */
.acn-trans .btn--positive {
  background-color: #4A993E;
  color: #fff; }

/**
 * Negative actions; e.g. close account, delete photo, remove friend, etc.
 */
.acn-trans .btn--negative {
  background-color: #b33630;
  color: #fff; }

/**
 * Inactive, disabled buttons.
 * 
 * 1. Make the button look like normal text when hovered.
 */
.acn-trans .btn--inactive,
.acn-trans .btn--inactive:hover,
.acn-trans .btn--inactive:active,
.acn-trans .btn--inactive:focus {
  background-color: #ddd;
  color: #777;
  cursor: text;
  /* [1] */ }

/*------------------------------------*\
    $STYLES
\*------------------------------------*/
/**
 * Button style modifiers.
 *
 * 1. Use an overly-large number to ensure completely rounded, pill-like ends.
 */
.acn-trans .btn--soft {
  border-radius: 200px;
  /* [1] */ }

.acn-trans .btn--hard {
  border-radius: 0; }

/*------------------------------------*\
    $RULES
\*------------------------------------*/
/**
 * Horizontal rules, extend `hr`.
 *
 * Demo: jsfiddle.net/inuitcss/L6GuZ
 *
 */
.acn-trans .rule {
  color: #cccccc;
  border: none;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  margin-bottom: 23px;
  margin-bottom: 1.4375rem; }

/**
 * Dotted rules
 */
.acn-trans .rule--dotted {
  border-bottom-style: dotted; }

/**
 * Dashed rules
 */
.acn-trans .rule--dashed {
  border-bottom-style: dashed; }

/**
 * Ornamental rules. Places a § over the rule.
 */
.acn-trans .rule--ornament {
  position: relative;
  /**
  * Pass in an arbitrary ornament though a data attribute, e.g.:
  *
    <hr class="rule  rule--ornament" data-ornament="!">
  *
  */ }
.acn-trans .rule--ornament:after {
    content: "\00A7";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    line-height: 0;
    text-align: center; }
.acn-trans .rule--ornament[data-ornament]:after {
    content: attr(data-ornament); }

/*------------------------------------*\
    $STATS
\*------------------------------------*/
 /**
  * Simple object to display key–value statistic-like information, e.g.:
  *
    <div class=stat-group>
        <dl class=stat>
            <dt class=stat__title>Tweets</dt>
            <dd class=stat__value>27,740</dd>
        </dl>

        <dl class=stat>
            <dt class=stat__title>Following</dt>
            <dd class=stat__value>11,529</dd>
        </dl>

        <dl class=stat>
            <dt class=stat__title>Followers</dt>
            <dd class=stat__value>12,105</dd>
        </dl>
    </div>
  *
  * Demo: jsfiddle.net/inuitcss/Bpwu6
  *
  */
.acn-trans .stat-group {
  margin-left: -24px; }

.acn-trans .stat {
  float: left;
  margin-left: 24px;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column; }

.acn-trans .stat__title {
  -webkit-order: 2;
  -moz-order: 2;
  -ms-order: 2;
  -o-order: 2;
  order: 2;
  -ms-flex-order: 2; }

.acn-trans .stat__value {
  margin-left: 0;
  -webkit-order: 1;
  -moz-order: 1;
  -ms-order: 1;
  -o-order: 1;
  order: 1;
  -ms-flex-order: 1; }

/*------------------------------------*\
    $GREYBOX
\*------------------------------------*/
/**
 * Quickly throw together greybox wireframes. Use in conjunction with other
 * inuit.css objects to create simple greybox prototypes, e.g.:
 *
   <div class="island  greybox  greybox--medium">Header</div>

   <ul class="nav  nav--fit  nav--block  greybox">
       <li><a href=#>Home</a></li>
       <li><a href=#>About</a></li>
       <li><a href=#>Portfolio</a></li>
       <li><a href=#>Contact</a></li>
   </ul>
 *
 * The beauty of combining the greyboxing with inuit.css objects is that any
 * prototyping can quickly be converted into/used as production code.
 *
 * For a more complete prototyping framework, consider Adam Whitcroft’s Proto:
 * adamwhitcroft.com/proto
 *
 * Demo: jsfiddle.net/inuitcss/qCXfh/
 *
 */
.acn-trans .greybox,
.acn-trans .graybox {
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 2;
  font-family: sans-serif;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.2);
  color: #fff; }

.acn-trans .greybox a,
.acn-trans .graybox a {
  color: #fff;
  text-decoration: underline; }

/**
 * All greyboxes will occupy 100% of their parent’s width, but to alter their
 * heights we apply incrementally larger line-heights:
 */
.acn-trans .greybox--small,
.acn-trans .graybox--small {
  line-height: 48px; }

.acn-trans .greybox--medium,
.acn-trans .graybox--medium {
  line-height: 96px; }

.acn-trans .greybox--large,
.acn-trans .graybox--large {
  line-height: 192px; }

.acn-trans .greybox--huge,
.acn-trans .graybox--huge {
  line-height: 384px; }

.acn-trans .greybox--gigantic,
.acn-trans .graybox--gigantic {
  line-height: 768px; }

/**
 * Style trumps; helper and brand classes
 */
/*------------------------------------*\
    $WIDTHS
\*------------------------------------*/
/**
 * Sizes in human readable format. These are used in conjunction with other
 * objects and abstractions found in inuit.css, most commonly the grid system
 * and faux flexbox.
 *
 * We have a mixin to generate our widths and their breakpoint-specific
 * variations.
 */
/**
* Whole
*/
.acn-trans .one-whole {
  width: 100%; }

/**
* Halves
*/
.acn-trans .one-half, .acn-trans .two-quarters, .acn-trans .three-sixths, .acn-trans .four-eighths, .acn-trans .five-tenths, .acn-trans .six-twelfths {
  width: 50%; }

/**
* Thirds
*/
.acn-trans .one-third, .acn-trans .two-sixths, .acn-trans .four-twelfths {
  width: 33.333%; }

.acn-trans .two-thirds, .acn-trans .four-sixths, .acn-trans .eight-twelfths {
  width: 66.666%; }

/**
* Quarters
*/
.acn-trans .one-quarter, .acn-trans .two-eighths, .acn-trans .three-twelfths {
  width: 25%; }

.acn-trans .three-quarters, .acn-trans .six-eighths, .acn-trans .nine-twelfths {
  width: 75%; }

/**
* Fifths
*/
.acn-trans .one-fifth, .acn-trans .two-tenths {
  width: 20%; }

.acn-trans .two-fifths, .acn-trans .four-tenths {
  width: 40%; }

.acn-trans .three-fifths, .acn-trans .six-tenths {
  width: 60%; }

.acn-trans .four-fifths, .acn-trans .eight-tenths {
  width: 80%; }

/**
* Sixths
*/
.acn-trans .one-sixth, .acn-trans .two-twelfths {
  width: 16.666%; }

.acn-trans .five-sixths, .acn-trans .ten-twelfths {
  width: 83.333%; }

/**

* Sevenths
*/
.acn-trans .one-seventh {
  width: 14.285%;
}
.acn-trans .two-sevenths {
  width: 28.571%;
}
.acn-trans .three-sevenths {
  width: 42.857%;
}
.acn-trans .four-sevenths {
  width: 57.142%;
}
.acn-trans .five-sevenths{
  width: 71.428%;
}
.acn-trans .six-sevenths {
  width: 85.714%;
}

/**

* Eighths
*/
.acn-trans .one-eighth {
  width: 12.5%; }

.acn-trans .three-eighths {
  width: 37.5%; }

.acn-trans .five-eighths {
  width: 62.5%; }

.acn-trans .seven-eighths {
  width: 87.5%; }

/**
* Tenths
*/
.acn-trans .one-tenth {
  width: 10%; }

.acn-trans .three-tenths {
  width: 30%; }

.acn-trans .seven-tenths {
  width: 70%; }

.acn-trans .nine-tenths {
  width: 90%; }

/**
* Twelfths
*/
.acn-trans .one-twelfth {
  width: 8.333%; }

.acn-trans .five-twelfths {
  width: 41.666%; }

.acn-trans .seven-twelfths {
  width: 58.333%; }

.acn-trans .eleven-twelfths {
  width: 91.666%; }

/**
 * If you have set `$responsive` to ‘true’ in `_vars.scss` then you now have
 * access to these classes. You can define at which breakpoint you’d like an
 * element to be a certain size, e.g.:
 *
 * `<div class="g  one-quarter  lap-one-half  palm-one-whole"> ... </div>`
 *
 * This would create a `div` that, at ‘desktop’ sizes, takes up a quarter of the
 * horizontal space, a half of that space at ‘tablet’ sizes, and goes full width
 * at ‘mobile’ sizes.
 *
 * Demo: jsfiddle.net/inuitcss/WS4Ge
 *
 */
@media only screen and (max-width: 480px) {
  /**
  * Whole
  */
  .acn-trans .palm-one-whole {
    width: 100%; }

  /**
  * Halves
  */
  .acn-trans .palm-one-half, .acn-trans .palm-two-quarters, .acn-trans .palm-three-sixths, .acn-trans .palm-four-eighths, .acn-trans .palm-five-tenths, .acn-trans .palm-six-twelfths {
    width: 50%; }

  /**
  * Thirds
  */
  .acn-trans .palm-one-third, .acn-trans .palm-two-sixths, .acn-trans .palm-four-twelfths {
    width: 33.333%; }

  .acn-trans .palm-two-thirds, .acn-trans .palm-four-sixths, .acn-trans .palm-eight-twelfths {
    width: 66.666%; }

  /**
  * Quarters
  */
  .acn-trans .palm-one-quarter, .acn-trans .palm-two-eighths, .acn-trans .palm-three-twelfths {
    width: 25%; }

  .acn-trans .palm-three-quarters, .acn-trans .palm-six-eighths, .acn-trans .palm-nine-twelfths {
    width: 75%; }

  /**
  * Fifths
  */
  .acn-trans .palm-one-fifth, .acn-trans .palm-two-tenths {
    width: 20%; }

  .acn-trans .palm-two-fifths, .acn-trans .palm-four-tenths {
    width: 40%; }

  .acn-trans .palm-three-fifths, .acn-trans .palm-six-tenths {
    width: 60%; }

  .acn-trans .palm-four-fifths, .acn-trans .palm-eight-tenths {
    width: 80%; }

  /**
  * Sixths
  */
  .acn-trans .palm-one-sixth, .acn-trans .palm-two-twelfths {
    width: 16.666%; }

  .acn-trans .palm-five-sixths, .acn-trans .palm-ten-twelfths {
    width: 83.333%; }

  /**
  * Eighths
  */
  .acn-trans .palm-one-eighth {
    width: 12.5%; }

  .acn-trans .palm-three-eighths {
    width: 37.5%; }

  .acn-trans .palm-five-eighths {
    width: 62.5%; }

  .acn-trans .palm-seven-eighths {
    width: 87.5%; }

  /**
  * Tenths
  */
  .acn-trans .palm-one-tenth {
    width: 10%; }

  .acn-trans .palm-three-tenths {
    width: 30%; }

  .acn-trans .palm-seven-tenths {
    width: 70%; }

  .acn-trans .palm-nine-tenths {
    width: 90%; }

  /**
  * Twelfths
  */
  .acn-trans .palm-one-twelfth {
    width: 8.333%; }

  .acn-trans .palm-five-twelfths {
    width: 41.666%; }

  .acn-trans .palm-seven-twelfths {
    width: 58.333%; }

  .acn-trans .palm-eleven-twelfths {
    width: 91.666%; } }
@media only screen and (min-width: 481px) and (max-width: 1024px) {
  /**
  * Whole
  */
  .acn-trans .lap-one-whole {
    width: 100%; }

  /**
  * Halves
  */
  .acn-trans .lap-one-half, .acn-trans .lap-two-quarters, .acn-trans .lap-three-sixths, .acn-trans .lap-four-eighths, .acn-trans .lap-five-tenths, .acn-trans .lap-six-twelfths {
    width: 50%; }

  /**
  * Thirds
  */
  .acn-trans .lap-one-third, .acn-trans .lap-two-sixths, .acn-trans .lap-four-twelfths {
    width: 33.333%; }

  .acn-trans .lap-two-thirds, .acn-trans .lap-four-sixths, .acn-trans .lap-eight-twelfths {
    width: 66.666%; }

  /**
  * Quarters
  */
  .acn-trans .lap-one-quarter, .acn-trans .lap-two-eighths, .acn-trans .lap-three-twelfths {
    width: 25%; }

  .acn-trans .lap-three-quarters, .acn-trans .lap-six-eighths, .acn-trans .lap-nine-twelfths {
    width: 75%; }

  /**
  * Fifths
  */
  .acn-trans .lap-one-fifth, .acn-trans .lap-two-tenths {
    width: 20%; }

  .acn-trans .lap-two-fifths, .acn-trans .lap-four-tenths {
    width: 40%; }

  .acn-trans .lap-three-fifths, .acn-trans .lap-six-tenths {
    width: 60%; }

  .acn-trans .lap-four-fifths, .acn-trans .lap-eight-tenths {
    width: 80%; }

  /**
  * Sixths
  */
  .acn-trans .lap-one-sixth, .acn-trans .lap-two-twelfths {
    width: 16.666%; }

  .acn-trans .lap-five-sixths, .acn-trans .lap-ten-twelfths {
    width: 83.333%; }

  /**
  * Eighths
  */
  .acn-trans .lap-one-eighth {
    width: 12.5%; }

  .acn-trans .lap-three-eighths {
    width: 37.5%; }

  .acn-trans .lap-five-eighths {
    width: 62.5%; }

  .acn-trans .lap-seven-eighths {
    width: 87.5%; }

  /**
  * Tenths
  */
  .acn-trans .lap-one-tenth {
    width: 10%; }

  .acn-trans .lap-three-tenths {
    width: 30%; }

  .acn-trans .lap-seven-tenths {
    width: 70%; }

  .acn-trans .lap-nine-tenths {
    width: 90%; }

  /**
  * Twelfths
  */
  .acn-trans .lap-one-twelfth {
    width: 8.333%; }

  .acn-trans .lap-five-twelfths {
    width: 41.666%; }

  .acn-trans .lap-seven-twelfths {
    width: 58.333%; }

  .acn-trans .lap-eleven-twelfths {
    width: 91.666%; } }
@media only screen and (min-width: 481px) {
  /**
  * Whole
  */
  .acn-trans .lap-and-up-one-whole {
    width: 100%; }

  /**
  * Halves
  */
  .acn-trans .lap-and-up-one-half, .acn-trans .lap-and-up-two-quarters, .acn-trans .lap-and-up-three-sixths, .acn-trans .lap-and-up-four-eighths, .acn-trans .lap-and-up-five-tenths, .acn-trans .lap-and-up-six-twelfths {
    width: 50%; }

  /**
  * Thirds
  */
  .acn-trans .lap-and-up-one-third, .acn-trans .lap-and-up-two-sixths, .acn-trans .lap-and-up-four-twelfths {
    width: 33.333%; }

  .acn-trans .lap-and-up-two-thirds, .acn-trans .lap-and-up-four-sixths, .acn-trans .lap-and-up-eight-twelfths {
    width: 66.666%; }

  /**
  * Quarters
  */
  .acn-trans .lap-and-up-one-quarter, .acn-trans .lap-and-up-two-eighths, .acn-trans .lap-and-up-three-twelfths {
    width: 25%; }

  .acn-trans .lap-and-up-three-quarters, .acn-trans .lap-and-up-six-eighths, .acn-trans .lap-and-up-nine-twelfths {
    width: 75%; }

  /**
  * Fifths
  */
  .acn-trans .lap-and-up-one-fifth, .acn-trans .lap-and-up-two-tenths {
    width: 20%; }

  .acn-trans .lap-and-up-two-fifths, .acn-trans .lap-and-up-four-tenths {
    width: 40%; }

  .acn-trans .lap-and-up-three-fifths, .acn-trans .lap-and-up-six-tenths {
    width: 60%; }

  .acn-trans .lap-and-up-four-fifths, .acn-trans .lap-and-up-eight-tenths {
    width: 80%; }

  /**
  * Sixths
  */
  .acn-trans .lap-and-up-one-sixth, .acn-trans .lap-and-up-two-twelfths {
    width: 16.666%; }

  .acn-trans .lap-and-up-five-sixths, .acn-trans .lap-and-up-ten-twelfths {
    width: 83.333%; }

  /**
  * Eighths
  */
  .acn-trans .lap-and-up-one-eighth {
    width: 12.5%; }

  .acn-trans .lap-and-up-three-eighths {
    width: 37.5%; }

  .acn-trans .lap-and-up-five-eighths {
    width: 62.5%; }

  .acn-trans .lap-and-up-seven-eighths {
    width: 87.5%; }

  /**
  * Tenths
  */
  .acn-trans .lap-and-up-one-tenth {
    width: 10%; }

  .acn-trans .lap-and-up-three-tenths {
    width: 30%; }

  .acn-trans .lap-and-up-seven-tenths {
    width: 70%; }

  .acn-trans .lap-and-up-nine-tenths {
    width: 90%; }

  /**
  * Twelfths
  */
  .acn-trans .lap-and-up-one-twelfth {
    width: 8.333%; }

  .acn-trans .lap-and-up-five-twelfths {
    width: 41.666%; }

  .acn-trans .lap-and-up-seven-twelfths {
    width: 58.333%; }

  .acn-trans .lap-and-up-eleven-twelfths {
    width: 91.666%; } }
@media only screen and (min-width: 769px) {
  /**
  * Whole
  */
  .acn-trans .medium-lap-and-up-one-whole {
    width: 100%; }

  /**
  * Halves
  */
  .acn-trans .medium-lap-and-up-one-half, .acn-trans .medium-lap-and-up-two-quarters, .acn-trans .medium-lap-and-up-three-sixths, .acn-trans .medium-lap-and-up-four-eighths, .acn-trans .medium-lap-and-up-five-tenths, .acn-trans .medium-lap-and-up-six-twelfths {
    width: 50%; }

  /**
  * Thirds
  */
  .acn-trans .medium-lap-and-up-one-third, .acn-trans .medium-lap-and-up-two-sixths, .acn-trans .medium-lap-and-up-four-twelfths {
    width: 33.333%; }

  .acn-trans .medium-lap-and-up-two-thirds, .acn-trans .medium-lap-and-up-four-sixths, .acn-trans .medium-lap-and-up-eight-twelfths {
    width: 66.666%; }

  /**
  * Quarters
  */
  .acn-trans .medium-lap-and-up-one-quarter, .acn-trans .medium-lap-and-up-two-eighths, .acn-trans .medium-lap-and-up-three-twelfths {
    width: 25%; }

  .acn-trans .medium-lap-and-up-three-quarters, .acn-trans .medium-lap-and-up-six-eighths, .acn-trans .medium-lap-and-up-nine-twelfths {
    width: 75%; }

  /**
  * Fifths
  */
  .acn-trans .medium-lap-and-up-one-fifth, .acn-trans .medium-lap-and-up-two-tenths {
    width: 20%; }

  .acn-trans .medium-lap-and-up-two-fifths, .acn-trans .medium-lap-and-up-four-tenths {
    width: 40%; }

  .acn-trans .medium-lap-and-up-three-fifths, .acn-trans .medium-lap-and-up-six-tenths {
    width: 60%; }

  .acn-trans .medium-lap-and-up-four-fifths, .acn-trans .medium-lap-and-up-eight-tenths {
    width: 80%; }

  /**
  * Sixths
  */
  .acn-trans .medium-lap-and-up-one-sixth, .acn-trans .medium-lap-and-up-two-twelfths {
    width: 16.666%; }

  .acn-trans .medium-lap-and-up-five-sixths, .acn-trans .medium-lap-and-up-ten-twelfths {
    width: 83.333%; }

  /**
  * Eighths
  */
  .acn-trans .medium-lap-and-up-one-eighth {
    width: 12.5%; }

  .acn-trans .medium-lap-and-up-three-eighths {
    width: 37.5%; }

  .acn-trans .medium-lap-and-up-five-eighths {
    width: 62.5%; }

  .acn-trans .medium-lap-and-up-seven-eighths {
    width: 87.5%; }

  /**
  * Tenths
  */
  .acn-trans .medium-lap-and-up-one-tenth {
    width: 10%; }

  .acn-trans .medium-lap-and-up-three-tenths {
    width: 30%; }

  .acn-trans .medium-lap-and-up-seven-tenths {
    width: 70%; }

  .acn-trans .medium-lap-and-up-nine-tenths {
    width: 90%; }

  /**
  * Twelfths
  */
  .acn-trans .medium-lap-and-up-one-twelfth {
    width: 8.333%; }

  .acn-trans .medium-lap-and-up-five-twelfths {
    width: 41.666%; }

  .acn-trans .medium-lap-and-up-seven-twelfths {
    width: 58.333%; }

  .acn-trans .medium-lap-and-up-eleven-twelfths {
    width: 91.666%; } }
@media only screen and (max-width: 1024px) {
  /**
  * Whole
  */
  .acn-trans .portable-one-whole {
    width: 100%; }

  /**
  * Halves
  */
  .acn-trans .portable-one-half, .acn-trans .portable-two-quarters, .acn-trans .portable-three-sixths, .acn-trans .portable-four-eighths, .acn-trans .portable-five-tenths, .acn-trans .portable-six-twelfths {
    width: 50%; }

  /**
  * Thirds
  */
  .acn-trans .portable-one-third, .acn-trans .portable-two-sixths, .acn-trans .portable-four-twelfths {
    width: 33.333%; }

  .acn-trans .portable-two-thirds, .acn-trans .portable-four-sixths, .acn-trans .portable-eight-twelfths {
    width: 66.666%; }

  /**
  * Quarters
  */
  .acn-trans .portable-one-quarter, .acn-trans .portable-two-eighths, .acn-trans .portable-three-twelfths {
    width: 25%; }

  .acn-trans .portable-three-quarters, .acn-trans .portable-six-eighths, .acn-trans .portable-nine-twelfths {
    width: 75%; }

  /**
  * Fifths
  */
  .acn-trans .portable-one-fifth, .acn-trans .portable-two-tenths {
    width: 20%; }

  .acn-trans .portable-two-fifths, .acn-trans .portable-four-tenths {
    width: 40%; }

  .acn-trans .portable-three-fifths, .acn-trans .portable-six-tenths {
    width: 60%; }

  .acn-trans .portable-four-fifths, .acn-trans .portable-eight-tenths {
    width: 80%; }

  /**
  * Sixths
  */
  .acn-trans .portable-one-sixth, .acn-trans .portable-two-twelfths {
    width: 16.666%; }

  .acn-trans .portable-five-sixths, .acn-trans .portable-ten-twelfths {
    width: 83.333%; }

  /**
  * Eighths
  */
  .acn-trans .portable-one-eighth {
    width: 12.5%; }

  .acn-trans .portable-three-eighths {
    width: 37.5%; }

  .acn-trans .portable-five-eighths {
    width: 62.5%; }

  .acn-trans .portable-seven-eighths {
    width: 87.5%; }

  /**
  * Tenths
  */
  .acn-trans .portable-one-tenth {
    width: 10%; }

  .acn-trans .portable-three-tenths {
    width: 30%; }

  .acn-trans .portable-seven-tenths {
    width: 70%; }

  .acn-trans .portable-nine-tenths {
    width: 90%; }

  /**
  * Twelfths
  */
  .acn-trans .portable-one-twelfth {
    width: 8.333%; }

  .acn-trans .portable-five-twelfths {
    width: 41.666%; }

  .acn-trans .portable-seven-twelfths {
    width: 58.333%; }

  .acn-trans .portable-eleven-twelfths {
    width: 91.666%; } }
@media only screen and (min-width: 1025px) {
  /**
  * Whole
  */
  .acn-trans .desk-one-whole {
    width: 100%; }

  /**
  * Halves
  */
  .acn-trans .desk-one-half, .acn-trans .desk-two-quarters, .acn-trans .desk-three-sixths, .acn-trans .desk-four-eighths, .acn-trans .desk-five-tenths, .acn-trans .desk-six-twelfths {
    width: 50%; }

  /**
  * Thirds
  */
  .acn-trans .desk-one-third, .acn-trans .desk-two-sixths, .acn-trans .desk-four-twelfths {
    width: 33.333%; }

  .acn-trans .desk-two-thirds, .acn-trans .desk-four-sixths, .acn-trans .desk-eight-twelfths {
    width: 66.666%; }

  /**
  * Quarters
  */
  .acn-trans .desk-one-quarter, .acn-trans .desk-two-eighths, .acn-trans .desk-three-twelfths {
    width: 25%; }

  .acn-trans .desk-three-quarters, .acn-trans .desk-six-eighths, .acn-trans .desk-nine-twelfths {
    width: 75%; }

  /**
  * Fifths
  */
  .acn-trans .desk-one-fifth, .acn-trans .desk-two-tenths {
    width: 20%; }

  .acn-trans .desk-two-fifths, .acn-trans .desk-four-tenths {
    width: 40%; }

  .acn-trans .desk-three-fifths, .acn-trans .desk-six-tenths {
    width: 60%; }

  .acn-trans .desk-four-fifths, .acn-trans .desk-eight-tenths {
    width: 80%; }

  /**
  * Sixths
  */
  .acn-trans .desk-one-sixth, .acn-trans .desk-two-twelfths {
    width: 16.666%; }

  .acn-trans .desk-five-sixths, .acn-trans .desk-ten-twelfths {
    width: 83.333%; }

  /**
  * Eighths
  */
  .acn-trans .desk-one-eighth {
    width: 12.5%; }

  .acn-trans .desk-three-eighths {
    width: 37.5%; }

  .acn-trans .desk-five-eighths {
    width: 62.5%; }

  .acn-trans .desk-seven-eighths {
    width: 87.5%; }

  /**
  * Tenths
  */
  .acn-trans .desk-one-tenth {
    width: 10%; }

  .acn-trans .desk-three-tenths {
    width: 30%; }

  .acn-trans .desk-seven-tenths {
    width: 70%; }

  .acn-trans .desk-nine-tenths {
    width: 90%; }

  /**
  * Twelfths
  */
  .acn-trans .desk-one-twelfth {
    width: 8.333%; }

  .acn-trans .desk-five-twelfths {
    width: 41.666%; }

  .acn-trans .desk-seven-twelfths {
    width: 58.333%; }

  .acn-trans .desk-eleven-twelfths {
    width: 91.666%; } }
/**
 * If you have set the additional `$responsive-extra` variable to ‘true’ in
 * `_vars.scss` then you now have access to the following class available to
 * accomodate much larger screen resolutions.
 */
/* endif */
/*------------------------------------*\
    $PUSH
\*------------------------------------*/
/**
 * Push classes, to move grid items over to the right by certain amounts.
 */
/*------------------------------------*\
    $PULL
\*------------------------------------*/
/**
 * Pull classes, to move grid items over to the right by certain amounts.
 */
/*------------------------------------*\
    $BRAND
\*------------------------------------*/
/**
 * `.brand` is a quick and simple way to apply your brand face and/or color to
 * any element using a handy helper class.
 */
.acn-trans .brand {
  font-family: "Helvetica Neue", sans-serif!important;
  color: #4a8ec2!important; }

.acn-trans .brand-face {
  font-family: "Helvetica Neue", sans-serif!important; }

.acn-trans .brand-color,
.acn-trans .brand-colour {
  color: #4a8ec2!important; }

/*------------------------------------*\
    $HELPER
\*------------------------------------*/
/**
 * A series of helper classes to use arbitrarily. Only use a helper class if an
 * element/component doesn’t already have a class to which you could apply this
 * styling, e.g. if you need to float `.main-nav` left then add `float:left;` to
 * that ruleset as opposed to adding the `.float--left` class to the markup.
 *
 * A lot of these classes carry `!important` as you will always want them to win
 * out over other selectors.
 */
/**
 * Add/remove floats
 */
.acn-trans .float--right {
  float: right !important; }

.acn-trans .float--left {
  float: left !important; }

.acn-trans .float--none {
  float: none !important; }

/**
 * Text alignment
 */
.acn-trans .text-left,
.rtl .acn-trans .text-right {
  text-align: left;
}
.acn-trans .text-center,
.rtl .acn-trans .text-center {
  text-align: center;
}
.acn-trans .text-right,
.rtl .acn-trans .text-left  {
  text-align: right;
}


/**
 * Font weights
 */
.acn-trans .weight--light {
  font-weight: 300 !important; }

.acn-trans .weight--normal {
  font-weight: 400 !important; }

.acn-trans .weight--semibold {
  font-weight: 600 !important; }

/**
 * Add/remove margins
 */
.acn-trans .push {
  margin: 24px !important; }

.acn-trans .push--top {
  margin-top: 24px !important; }

.acn-trans .push--right {
  margin-right: 24px !important; }

.acn-trans .push--bottom {
  margin-bottom: 24px !important; }

.acn-trans .push--left {
  margin-left: 24px !important; }

.acn-trans .push--ends {
  margin-top: 24px !important;
  margin-bottom: 24px !important; }

.acn-trans .push--sides {
  margin-right: 24px !important;
  margin-left: 24px !important; }

.acn-trans .push-half {
  margin: 12px !important; }

.acn-trans .push-half--top {
  margin-top: 12px !important; }

.acn-trans .push-half--right {
  margin-right: 12px !important; }

.acn-trans .push-half--bottom {
  margin-bottom: 12px !important; }

.acn-trans .push-half--left {
  margin-left: 12px !important; }

.acn-trans .push-half--ends {
  margin-top: 12px !important;
  margin-bottom: 12px !important; }

.acn-trans .push-half--sides {
  margin-right: 12px !important;
  margin-left: 12px !important; }

.acn-trans .flush {
  margin: 0 !important; }

.acn-trans .flush--top {
  margin-top: 0 !important; }

.acn-trans .flush--right {
  margin-right: 0 !important; }

.acn-trans .flush--bottom {
  margin-bottom: 0 !important; }

.acn-trans .flush--left {
  margin-left: 0 !important; }

.acn-trans .flush--ends {
  margin-top: 0 !important;
  margin-bottom: 0 !important; }

.acn-trans .flush--sides {
  margin-right: 0 !important;
  margin-left: 0 !important; }

/**
 * Add/remove paddings
 */
.acn-trans .soft {
  padding: 24px !important; }

.acn-trans .soft--top {
  padding-top: 24px !important; }

.acn-trans .soft--right {
  padding-right: 24px !important; }

.acn-trans .soft--bottom {
  padding-bottom: 24px !important; }

.acn-trans .soft--left {
  padding-left: 24px !important; }

.acn-trans .soft--ends {
  padding-top: 24px !important;
  padding-bottom: 24px !important; }

.acn-trans .soft--sides {
  padding-right: 24px !important;
  padding-left: 24px !important; }

.acn-trans .soft-half {
  padding: 12px !important; }

.acn-trans .soft-half--top {
  padding-top: 12px !important; }

.acn-trans .soft-half--right {
  padding-right: 12px !important; }

.acn-trans .soft-half--bottom {
  padding-bottom: 12px !important; }

.acn-trans .soft-half--left {
  padding-left: 12px !important; }

.acn-trans .soft-half--ends {
  padding-top: 12px !important;
  padding-bottom: 12px !important; }

.acn-trans .soft-half--sides {
  padding-right: 12px !important;
  padding-left: 12px !important; }

.acn-trans .hard {
  padding: 0 !important; }

.acn-trans .hard--top {
  padding-top: 0 !important; }

.acn-trans .hard--right {
  padding-right: 0 !important; }

.acn-trans .hard--bottom {
  padding-bottom: 0 !important; }

.acn-trans .hard--left {
  padding-left: 0 !important; }

.acn-trans .hard--ends {
  padding-top: 0 !important;
  padding-bottom: 0 !important; }

.acn-trans .hard--sides {
  padding-right: 0 !important;
  padding-left: 0 !important; }

/**
 * Pull items full width of `.island` parents.
 */
.acn-trans .full-bleed {
  margin-right: -24px !important;
  margin-left: -24px !important; }
.acn-trans .islet .full-bleed {
    margin-right: -12px !important;
    margin-left: -12px !important; }

/**
 * Add a help cursor to any element that gives the user extra information on
 * `:hover`.
 */
.acn-trans .informative {
  cursor: help !important; }

/**
 * Mute an object by reducing its opacity.
 */
.acn-trans .muted {
  opacity: 0.5 !important;
  filter: alpha(opacity=50) !important; }

/**
 * Align items to the right where they imply progression/movement forward, e.g.:
 *
   <p class=proceed><a href=#>Read more...</a></p>
 *
 */
.acn-trans .proceed {
  text-align: right !important; }

/**
 * Add a right-angled quote to links that imply movement, e.g.:
 *
   <a href=# class=go>Read more</a>
 *
 */
.acn-trans .go:after {
  content: "\00A0" "\00BB" !important; }

/**
 * Apply capital case to an element (usually a `strong`).
 */
.acn-trans .caps {
  text-transform: uppercase !important; }

/**
 * Hide content off-screen without resorting to `display:none;`, also provide
 * breakpoint specific hidden elements.
 */
.acn-trans .accessibility,
.acn-trans .visuallyhidden {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important; }

.acn-trans .visible {
  display: block !important; }

.acn-trans .hidden {
  display: none !important; }

@media only screen and (max-width: 480px) {
.acn-trans .accessibility--palm,
.acn-trans .visuallyhidden--palm {
border: 0 !important;
clip: rect(0 0 0 0) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important; }

.acn-trans .visually--palm {
border: none !important;
clip: auto !important;
height: auto !important;
margin: auto !important;
overflow: visible !important;
padding: 0 !important;
position: static !important;
width: auto !important; }

.acn-trans .visible--palm {
display: block !important; }

.acn-trans .hidden--palm {
display: none !important; } }
@media only screen and (min-width: 481px) and (max-width: 1024px) {
.acn-trans .accessibility--lap,
.acn-trans .visuallyhidden--lap {
border: 0 !important;
clip: rect(0 0 0 0) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important; }

.acn-trans .visually--lap {
border: none !important;
clip: auto !important;
height: auto !important;
margin: auto !important;
overflow: visible !important;
padding: 0 !important;
position: static !important;
width: auto !important; }

.acn-trans .visible--lap {
display: block !important; }

.acn-trans .hidden--lap {
display: none !important; } }
@media only screen and (min-width: 481px) {
.acn-trans .accessibility--lap-and-up,
.acn-trans .visuallyhidden--lap-and-up {
border: 0 !important;
clip: rect(0 0 0 0) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important; }

.acn-trans .visually--lap-and-up {
border: none !important;
clip: auto !important;
height: auto !important;
margin: auto !important;
overflow: visible !important;
padding: 0 !important;
position: static !important;
width: auto !important; }

.acn-trans .visible--lap-and-up {
display: block !important; }

.acn-trans .hidden--lap-and-up {
display: none !important; } }
@media only screen and (min-width: 769px) {
.acn-trans .accessibility--medium-lap-and-up,
.acn-trans .visuallyhidden--medium-lap-and-up {
border: 0 !important;
clip: rect(0 0 0 0) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important; }

.acn-trans .visually--medium-lap-and-up {
border: none !important;
clip: auto !important;
height: auto !important;
margin: auto !important;
overflow: visible !important;
padding: 0 !important;
position: static !important;
width: auto !important; }

.acn-trans .visible--medium-lap-and-up {
display: block !important; }

.acn-trans .hidden--medium-lap-and-up {
display: none !important; } }
@media only screen and (max-width: 1024px) {
.acn-trans .accessibility--portable,
.acn-trans .visuallyhidden--portable {
border: 0 !important;
clip: rect(0 0 0 0) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important; }

.acn-trans .visually--portable {
border: none !important;
clip: auto !important;
height: auto !important;
margin: auto !important;
overflow: visible !important;
padding: 0 !important;
position: static !important;
width: auto !important; }

.acn-trans .visible--portable {
display: block !important; }

.acn-trans .hidden--portable {
display: none !important; } }
@media only screen and (min-width: 1025px) {
.acn-trans .accessibility--desk,
.acn-trans .visuallyhidden--desk {
border: 0 !important;
clip: rect(0 0 0 0) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important; }

.acn-trans .visually--desk {
border: none !important;
clip: auto !important;
height: auto !important;
margin: auto !important;
overflow: visible !important;
padding: 0 !important;
position: static !important;
width: auto !important; }

.acn-trans .visible--desk {
display: block !important; }

.acn-trans .hidden--desk {
display: none !important; } }
@media only screen and (min-width: 1200px) {
.acn-trans .accessibility--desk-wide,
.acn-trans .visuallyhidden--desk-wide {
border: 0 !important;
clip: rect(0 0 0 0) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important; }

.acn-trans .visually--desk-wide {
border: none !important;
clip: auto !important;
height: auto !important;
margin: auto !important;
overflow: visible !important;
padding: 0 !important;
position: static !important;
width: auto !important; }

.acn-trans .visible--desk-wide {
display: block !important; }

.acn-trans .hidden--desk-wide {
display: none !important; } }
/* endif */



@media only screen and (max-width: 640px) {
	.acn-trans .text-center--etisalat-smart,
	.rtl .acn-trans .text-center--etisalat-smart{
	  text-align: center;
	}
	
	.acn-trans .text-left--etisalat-smart{
	  text-align: left;
	}
	.rtl .acn-trans .text-left--etisalat-smart{
	  text-align: right;
	}
	
	.acn-trans .text-right--etisalat-smart{
	  text-align: right;
	}
	.rtl .acn-trans .text-right--etisalat-smart{
	  text-align: left;
	}
	
	.acn-trans .accessibility--etisalat-smart,
	.acn-trans .visuallyhidden--etisalat-smart {
		display:none;
	}

	.acn-trans .visually--etisalat-smart {
		display:block;
	}

	.acn-trans .visible--etisalat-smart {
	display: block !important; }

	.acn-trans .hidden--etisalat-smart {
	display: none !important; }
	
	.acn-trans .soft-hidden--etisalat-smart {
		display: none; 	
	}
	/**
  * Whole
  */
  .acn-trans .etisalat-smart-one-whole {
    width: 100%; }

  /**
  * Halves
  */
  .acn-trans .etisalat-smart-one-half, .acn-trans .etisalat-smart-two-quarters, .acn-trans .etisalat-smart-three-sixths, .acn-trans .etisalat-smart-four-eighths, .acn-trans .etisalat-smart-five-tenths, .acn-trans .etisalat-smart-six-twelfths {
    width: 50%; }

  /**
  * Thirds
  */
  .acn-trans .etisalat-smart-one-third, .acn-trans .etisalat-smart-two-sixths, .acn-trans .etisalat-smart-four-twelfths {
    width: 33.333%; }

  .acn-trans .etisalat-smart-two-thirds, .acn-trans .etisalat-smart-four-sixths, .acn-trans .etisalat-smart-eight-twelfths {
    width: 66.666%; }

  /**
  * Quarters
  */
  .acn-trans .etisalat-smart-one-quarter, .acn-trans .etisalat-smart-two-eighths, .acn-trans .etisalat-smart-three-twelfths {
    width: 25%; }

  .acn-trans .etisalat-smart-three-quarters, .acn-trans .etisalat-smart-six-eighths, .acn-trans .etisalat-smart-nine-twelfths {
    width: 75%; }

  /**
  * Fifths
  */
  .acn-trans .etisalat-smart-one-fifth, .acn-trans .etisalat-smart-two-tenths {
    width: 20%; }

  .acn-trans .etisalat-smart-two-fifths, .acn-trans .etisalat-smart-four-tenths {
    width: 40%; }

  .acn-trans .etisalat-smart-three-fifths, .acn-trans .etisalat-smart-six-tenths {
    width: 60%; }

  .acn-trans .etisalat-smart-four-fifths, .acn-trans .etisalat-smart-eight-tenths {
    width: 80%; }

  /**
  * Sixths
  */
  .acn-trans .etisalat-smart-one-sixth, .acn-trans .etisalat-smart-two-twelfths {
    width: 16.666%; }

  .acn-trans .etisalat-smart-five-sixths, .acn-trans .etisalat-smart-ten-twelfths {
    width: 83.333%; }

	/**

	* Sevenths
	*/
	.acn-trans .etisalat-smart-one-seventh {
	  width: 14.285%;
	}
	.acn-trans .etisalat-smart-two-sevenths {
	  width: 28.571%;
	}
	.acn-trans .etisalat-smart-three-sevenths {
	  width: 42.857%;
	}
	.acn-trans .etisalat-smart-four-sevenths {
	  width: 57.142%;
	}
	.acn-trans .etisalat-smart-five-sevenths {
	  width: 71.428%;
	}
	.acn-trans .etisalat-smart-six-sevenths {
	  width: 85.714%;
	}
	
  /**
  * Eighths
  */
  .acn-trans .etisalat-smart-one-eighth {
    width: 12.5%; }

  .acn-trans .etisalat-smart-three-eighths {
    width: 37.5%; }

  .acn-trans .etisalat-smart-five-eighths {
    width: 62.5%; }

  .acn-trans .etisalat-smart-seven-eighths {
    width: 87.5%; }

  /**
  * Tenths
  */
  .acn-trans .etisalat-smart-one-tenth {
    width: 10%; }

  .acn-trans .etisalat-smart-three-tenths {
    width: 30%; }

  .acn-trans .etisalat-smart-seven-tenths {
    width: 70%; }

  .acn-trans .etisalat-smart-nine-tenths {
    width: 90%; }

  /**
  * Twelfths
  */
  .acn-trans .etisalat-smart-one-twelfth {
    width: 8.333%; }

  .acn-trans .etisalat-smart-five-twelfths {
    width: 41.666%; }

  .acn-trans .etisalat-smart-seven-twelfths {
    width: 58.333%; }

  .acn-trans .etisalat-smart-eleven-twelfths {
    width: 91.666%;
	}
	
	
}
@media only screen and (min-width: 641px) and (max-width: 854px) {
	.acn-trans .text-center--etisalat-palm,
	.rtl .acn-trans .text-center--etisalat-palm{
	  text-align: center;
	}
	
	.acn-trans .text-left--etisalat-palm{
	  text-align: left;
	}
	.rtl .acn-trans .text-left--etisalat-palm{
	  text-align: right;
	}
	
	.acn-trans .text-right--etisalat-palm{
	  text-align: right;
	}
	.rtl .acn-trans .text-right--etisalat-palm{
	  text-align: left;
	}
	
	.acn-trans .accessibility--etisalat-palm,
	.acn-trans .visuallyhidden--etisalat-palm {
		display:none;
	}

	.acn-trans .visually--etisalat-palm {
		display:block;
	}

	.acn-trans .visible--etisalat-palm {
	display: block !important; }

	.acn-trans .hidden--etisalat-palm {
	display: none !important; }
	
	.acn-trans .soft-hidden--etisalat-palm {
		display: none; 	
	}
	
	/**
  * Whole
  */
  .acn-trans .etisalat-palm-one-whole {
    width: 100%; }

  /**
  * Halves
  */
  .acn-trans .etisalat-palm-one-half, .acn-trans .etisalat-palm-two-quarters, .acn-trans .etisalat-palm-three-sixths, .acn-trans .etisalat-palm-four-eighths, .acn-trans .etisalat-palm-five-tenths, .acn-trans .etisalat-palm-six-twelfths {
    width: 50%; }

  /**
  * Thirds
  */
  .acn-trans .etisalat-palm-one-third, .acn-trans .etisalat-palm-two-sixths, .acn-trans .etisalat-palm-four-twelfths {
    width: 33.333%; }

  .acn-trans .etisalat-palm-two-thirds, .acn-trans .etisalat-palm-four-sixths, .acn-trans .etisalat-palm-eight-twelfths {
    width: 66.666%; }

  /**
  * Quarters
  */
  .acn-trans .etisalat-palm-one-quarter, .acn-trans .etisalat-palm-two-eighths, .acn-trans .etisalat-palm-three-twelfths {
    width: 25%; }

  .acn-trans .etisalat-palm-three-quarters, .acn-trans .etisalat-palm-six-eighths, .acn-trans .etisalat-palm-nine-twelfths {
    width: 75%; }

  /**
  * Fifths
  */
  .acn-trans .etisalat-palm-one-fifth, .acn-trans .etisalat-palm-two-tenths {
    width: 20%; }

  .acn-trans .etisalat-palm-two-fifths, .acn-trans .etisalat-palm-four-tenths {
    width: 40%; }

  .acn-trans .etisalat-palm-three-fifths, .acn-trans .etisalat-palm-six-tenths {
    width: 60%; }

  .acn-trans .etisalat-palm-four-fifths, .acn-trans .etisalat-palm-eight-tenths {
    width: 80%; }

  /**
  * Sixths
  */
  .acn-trans .etisalat-palm-one-sixth, .acn-trans .etisalat-palm-two-twelfths {
    width: 16.666%; }

  .acn-trans .etisalat-palm-five-sixths, .acn-trans .etisalat-palm-ten-twelfths {
    width: 83.333%; }

	
	/**

	* Sevenths
	*/
	.acn-trans .etisalat-palm-one-seventh {
	  width: 14.285%;
	}
	.acn-trans .etisalat-palm-two-sevenths{
	  width: 28.571%;
	}
	.acn-trans .etisalat-palm-three-sevenths {
	  width: 42.857%;
	}
	.acn-trans .etisalat-palm-four-sevenths {
	  width: 57.142%;
	}
	.acn-trans .etisalat-palm-five-sevenths {
	  width: 71.428%;
	}
	.acn-trans .etisalat-palm-six-sevenths {
	  width: 85.714%;
	}
	
	
  /**
  * Eighths
  */
  .acn-trans .etisalat-palm-one-eighth {
    width: 12.5%; }

  .acn-trans .etisalat-palm-three-eighths {
    width: 37.5%; }

  .acn-trans .etisalat-palm-five-eighths {
    width: 62.5%; }

  .acn-trans .etisalat-palm-seven-eighths {
    width: 87.5%; }

  /**
  * Tenths
  */
  .acn-trans .etisalat-palm-one-tenth {
    width: 10%; }

  .acn-trans .etisalat-palm-three-tenths {
    width: 30%; }

  .acn-trans .etisalat-palm-seven-tenths {
    width: 70%; }

  .acn-trans .etisalat-palm-nine-tenths {
    width: 90%; }

  /**
  * Twelfths
  */
  .acn-trans .etisalat-palm-one-twelfth {
    width: 8.333%; }

  .acn-trans .etisalat-palm-five-twelfths {
    width: 41.666%; }

  .acn-trans .etisalat-palm-seven-twelfths {
    width: 58.333%; }

  .acn-trans .etisalat-palm-eleven-twelfths {
    width: 91.666%;
	}
	
	
	
	
	
	
	
	
	
}
@media only screen and (min-width: 855px) {
	.acn-trans .text-center--etisalat-lap,
	.rtl .acn-trans .text-center--etisalat-lap{
	  text-align: center;
	}
	
	.acn-trans .text-left--etisalat-lap{
	  text-align: left;
	}
	.rtl .acn-trans .text-left--etisalat-lap{
	  text-align: right;
	}
	
	.acn-trans .text-right--etisalat-lap{
	  text-align: right;
	}
	.rtl .acn-trans .text-right--etisalat-lap{
	  text-align: left;
	}
	
	.acn-trans .accessibility--etisalat-lap,
	.acn-trans .visuallyhidden--etisalat-lap {
		display:none;
	}

	.acn-trans .visually--etisalat-lap {
		display:block;
	}

	.acn-trans .visible--etisalat-lap {
	display: block !important; }

	.acn-trans .hidden--etisalat-lap {
	display: none !important; }
	
	.acn-trans .soft-hidden--etisalat-lap {
		display: none; 	
	}	
	/**
  * Whole
  */
  .acn-trans .etisalat-lap-one-whole {
    width: 100%; }

  /**
  * Halves
  */
  .acn-trans .etisalat-lap-one-half, .acn-trans .etisalat-lap-two-quarters, .acn-trans .etisalat-lap-three-sixths, .acn-trans .etisalat-lap-four-eighths, .acn-trans .etisalat-lap-five-tenths, .acn-trans .etisalat-lap-six-twelfths {
    width: 50%; }

  /**
  * Thirds
  */
  .acn-trans .etisalat-lap-one-third, .acn-trans .etisalat-lap-two-sixths, .acn-trans .etisalat-lap-four-twelfths {
    width: 33.333%; }

  .acn-trans .etisalat-lap-two-thirds, .acn-trans .etisalat-lap-four-sixths, .acn-trans .etisalat-lap-eight-twelfths {
    width: 66.666%; }

  /**
  * Quarters
  */
  .acn-trans .etisalat-lap-one-quarter, .acn-trans .etisalat-lap-two-eighths, .acn-trans .etisalat-lap-three-twelfths {
    width: 25%; }

  .acn-trans .etisalat-lap-three-quarters, .acn-trans .etisalat-lap-six-eighths, .acn-trans .etisalat-lap-nine-twelfths {
    width: 75%; }

  /**
  * Fifths
  */
  .acn-trans .etisalat-lap-one-fifth, .acn-trans .etisalat-lap-two-tenths {
    width: 20%; }

  .acn-trans .etisalat-lap-two-fifths, .acn-trans .etisalat-lap-four-tenths {
    width: 40%; }

  .acn-trans .etisalat-lap-three-fifths, .acn-trans .etisalat-lap-six-tenths {
    width: 60%; }

  .acn-trans .etisalat-lap-four-fifths, .acn-trans .etisalat-lap-eight-tenths {
    width: 80%; }

  /**
  * Sixths
  */
  .acn-trans .etisalat-lap-one-sixth, .acn-trans .etisalat-lap-two-twelfths {
    width: 16.666%; }

  .acn-trans .etisalat-lap-five-sixths, .acn-trans .etisalat-lap-ten-twelfths {
    width: 83.333%; }

	/**

	* Sevenths
	*/
	.acn-trans .etisalat-lap-one-seventh {
	  width: 14.285%;
	}
	.acn-trans .etisalat-lap-two-sevenths {
	  width: 28.571%;
	}
	.acn-trans .etisalat-lap-three-sevenths{
	  width: 42.857%;
	}
	.acn-trans .etisalat-lap-four-sevenths{
	  width: 57.142%;
	}
	.acn-trans .etisalat-lap-five-sevenths {
	  width: 71.428%;
	}
	.acn-trans .etisalat-lap-six-sevenths {
	  width: 85.714%;
	}
	
  /**
  * Eighths
  */
  .acn-trans .etisalat-lap-one-eighth {
    width: 12.5%; }

  .acn-trans .etisalat-lap-three-eighths {
    width: 37.5%; }

  .acn-trans .etisalat-lap-five-eighths {
    width: 62.5%; }

  .acn-trans .etisalat-lap-seven-eighths {
    width: 87.5%; }

  /**
  * Tenths
  */
  .acn-trans .etisalat-lap-one-tenth {
    width: 10%; }

  .acn-trans .etisalat-lap-three-tenths {
    width: 30%; }

  .acn-trans .etisalat-lap-seven-tenths {
    width: 70%; }

  .acn-trans .etisalat-lap-nine-tenths {
    width: 90%; }

  /**
  * Twelfths
  */
  .acn-trans .etisalat-lap-one-twelfth {
    width: 8.333%; }

  .acn-trans .etisalat-lap-five-twelfths {
    width: 41.666%; }

  .acn-trans .etisalat-lap-seven-twelfths {
    width: 58.333%; }

  .acn-trans .etisalat-lap-eleven-twelfths {
    width: 91.666%;
	}
}
@media only screen and (min-width: 1025px) {
	.acn-trans .text-center--etisalat-desk,
	.rtl .acn-trans .text-center--etisalat-desk{
	  text-align: center;
	}
	
	.acn-trans .text-left--etisalat-desk{
	  text-align: left;
	}
	.rtl .acn-trans .text-left--etisalat-desk{
	  text-align: right;
	}
	
	.acn-trans .text-right--etisalat-desk{
	  text-align: right;
	}
	.rtl .acn-trans .text-right--etisalat-desk{
	  text-align: left;
	}
	
	.acn-trans .accessibility--etisalat-desk,
	.acn-trans .visuallyhidden--etisalat-desk {
		display:none;
	}

	.acn-trans .visually--etisalat-desk {
		display:block;
	}

	.acn-trans .visible--etisalat-desk {
	display: block !important; }

	.acn-trans .hidden--etisalat-desk {
	display: none !important; }
	
	.acn-trans .soft-hidden--etisalat-desk {
		display: none; 	
	}
	
  /**
  * Whole
  */
  .acn-trans .etisalat-desk-one-whole {
    width: 100%; }

  /**
  * Halves
  */
  .acn-trans .etisalat-desk-one-half, .acn-trans .etisalat-desk-two-quarters, .acn-trans .etisalat-desk-three-sixths, .acn-trans .etisalat-desk-four-eighths, .acn-trans .etisalat-desk-five-tenths, .acn-trans .etisalat-desk-six-twelfths {
    width: 50%; }

  /**
  * Thirds
  */
  .acn-trans .etisalat-desk-one-third, .acn-trans .etisalat-desk-two-sixths, .acn-trans .etisalat-desk-four-twelfths {
    width: 33.333%; }

  .acn-trans .etisalat-desk-two-thirds, .acn-trans .etisalat-desk-four-sixths, .acn-trans .etisalat-desk-eight-twelfths {
    width: 66.666%; }

  /**
  * Quarters
  */
  .acn-trans .etisalat-desk-one-quarter, .acn-trans .etisalat-desk-two-eighths, .acn-trans .etisalat-desk-three-twelfths {
    width: 25%; }

  .acn-trans .etisalat-desk-three-quarters, .acn-trans .etisalat-desk-six-eighths, .acn-trans .etisalat-desk-nine-twelfths {
    width: 75%; }

  /**
  * Fifths
  */
  .acn-trans .etisalat-desk-one-fifth, .acn-trans .etisalat-desk-two-tenths {
    width: 20%; }

  .acn-trans .etisalat-desk-two-fifths, .acn-trans .etisalat-desk-four-tenths {
    width: 40%; }

  .acn-trans .etisalat-desk-three-fifths, .acn-trans .etisalat-desk-six-tenths {
    width: 60%; }

  .acn-trans .etisalat-desk-four-fifths, .acn-trans .etisalat-desk-eight-tenths {
    width: 80%; }

  /**
  * Sixths
  */
  .acn-trans .etisalat-desk-one-sixth, .acn-trans .etisalat-desk-two-twelfths {
    width: 16.666%; }

  .acn-trans .etisalat-desk-five-sixths, .acn-trans .etisalat-desk-ten-twelfths {
    width: 83.333%; }

	
	/**

	* Sevenths
	*/
	.acn-trans .etisalat-desk-one-seventh {
	  width: 14.285%;
	}
	.acn-trans .etisalat-desk-two-sevenths {
	  width: 28.571%;
	}
	.acn-trans .etisalat-desk-three-sevenths {
	  width: 42.857%;
	}
	.acn-trans .etisalat-desk-four-sevenths {
	  width: 57.142%;
	}
	.acn-trans .etisalat-desk-five-sevenths {
	  width: 71.428%;
	}
	.acn-trans .etisalat-desk-six-sevenths {
	  width: 85.714%;
	}


  /**
  * Eighths
  */
  .acn-trans .etisalat-desk-one-eighth {
    width: 12.5%; }

  .acn-trans .etisalat-desk-three-eighths {
    width: 37.5%; }

  .acn-trans .etisalat-desk-five-eighths {
    width: 62.5%; }

  .acn-trans .etisalat-desk-seven-eighths {
    width: 87.5%; }

  /**
  * Tenths
  */
  .acn-trans .etisalat-desk-one-tenth {
    width: 10%; }

  .acn-trans .etisalat-desk-three-tenths {
    width: 30%; }

  .acn-trans .etisalat-desk-seven-tenths {
    width: 70%; }

  .acn-trans .etisalat-desk-nine-tenths {
    width: 90%; }

  /**
  * Twelfths
  */
  .acn-trans .etisalat-desk-one-twelfth {
    width: 8.333%; }

  .acn-trans .etisalat-desk-five-twelfths {
    width: 41.666%; }

  .acn-trans .etisalat-desk-seven-twelfths {
    width: 58.333%; }

  .acn-trans .etisalat-desk-eleven-twelfths {
    width: 91.666%; } 
}
