@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;
}
/**Changed By Nagy for Payment Summary Issue*/
.hide_colm {
	display: none !important;
}

/**
 * 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: 6px;
	text-align: left;
}

.center_div {
    float: inherit !important;
    margin:auto;
    overflow: hidden;
    width:100% !important;
    padding: 0 !important;
    min-height: 37px !important;
} 

.center_div span:first-child {
	line-height: 19px !important;
}

.center_div span {
	padding-left:5px !important;
}

@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="//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 {
	vertical-align: top;
}

.acn-trans .nav--stacked>li {
	display: list-item;
	width: 220px !important;
}

.acn-trans .nav--stacked>li>a {
	display: block;
}

.acn-trans .nav--stacked--parent{
	
	width: 100% !important;
}


/**
 * `.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%;
	padding: 0px;
}

/**
* 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%;
}

.acn-trans .btn-rounded {
    float: none !important;
    min-width: 132px;
    padding: 7px 30px;
}


/**
* 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%;
	}
	
	.acn-trans .btn-rounded {
	    float: none !important;
	    min-width: 132px;
	    width:100%;
	    display:block;
	    padding: 7px 30px;
}

	/**
  * 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: 1023px) { /**
  * Whole
  */
	.acn-trans .lap-one-whole {
		width: 100%;
	}
	.center_div {
	    float: inherit !important;
	    margin: -60px auto auto;
	    overflow: hidden;
	    width:48% !important;
	    padding: 0 !important;
	    min-height: 37px !important;
	} 
	
	.center_div span:first-child {
		line-height: 19px !important;
	}

	/**
  * 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%;
	}
	
	.center_div {
	    float: inherit !important;
	    margin:auto;
	    overflow: hidden;
	    width:100% !important;
	    padding: 0 !important;
	    min-height: 37px !important;
	} 
	
	.center_div span:first-child {
		line-height: 19px !important;
	}
	
	.center_div span {
		padding-left:5px !important;
		float: left !important;
		width: 49% !important;
	}
	
}

@media only screen and (min-width: 481px) { /**
  * Whole
  */
  
  .center_div {
	    float: left !important;
	    margin: -41px auto auto;
	    min-height: 37px !important;
	    overflow: hidden;
	    padding: 0 !important;
	    width: 77% !important;
	} 
	
	.center_div span:first-child {
		line-height: 19px !important;
	}
	
	.center_div span {
		padding-left:5px !important;
		float: left !important;
		width: 49% !important;
		display: block !important;
	}
	
	.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
  */
  	.center_div {
	        float: left !important;
		    margin: -41px auto auto;
		    min-height: 37px !important;
		    overflow: hidden;
		    padding: 0 !important;
		    width: 77% !important;
	} 
	
	.center_div span:first-child {
		line-height: 19px !important;
	}
	
	.center_div span {
		padding-left:5px !important;
		display: inline-block !important;
	}
	.acn-trans .medium-lap-and-up-one-whole {
		width: 100%;
	}
	.center_div {
	    float: inherit !important;
	    margin: -60px auto auto;
	    overflow: hidden;
	    width:48% !important;
	    padding: 0 !important;
	    min-height: 37px !important;
	} 
	
	.center_div span:first-child {
		line-height: 19px !important;
	}

	/**
  * 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: 1023px) { /**
  * 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: 1024px) { /**
  * 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 {
	text-align: left !important;
}

.acn-trans .text--center {
	text-align: center !important;
}

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

/**
 * 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: 1023px) {
	.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;
		float: left;
	}
	.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: 1023px) {
	.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: 1024px) {
	.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 .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 .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 .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: 1024px) {
	.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: auto;	
	}
	.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: 100%;
	}

	/**
  * 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%;
	}
}