@import url("//fonts.googleapis.com/css?family=Source+Code+Pro:300,500");

/* – Settings */
/* SETTINGS
/* ============

/* the basics with $inherit set to true: */
html{
    box-sizing: border-box;
}
*{
    box-sizing: inherit;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* – All variables */
/* VARIABLES
// ============ */

/* – Global mixins – no project specific mixins in here */
/* Mixins galore
// ============ */
/* Should use rucksack clear: fix rather than this? */
/*Button font size, spacing*/

/* – Global breakpoints */
/* Mixins galore
// ============ */
/* Should use rucksack clear: fix rather than this? */
/*Button font size, spacing*/
/* Breakpoints
/* ============ */
/**/
/* 
MATERIAL DESIGN BREAKPOINTS (as a reference)
Single level of content hierarchy on the screen 
@custom-media --sm-viewport (max-width: 599px);

/* Two levels of content hierarchy on the screen 
@custom-media --md-viewport (min-width: 600px);

/* Max screen widths 
@custom-media --lg-viewport (min-width: 1600px);

/* Grid Breakpoints 
@custom-media --4-col-grid  (orientation: portrait) and (max-width: 479px);
@custom-media --8-col-grid  (orientation: portrait) and (min-width: 480px) and (max-width: 839px);
@custom-media --12-col-grid (orientation: portrait) and (min-width: 840px);

/* Phone Breakpoints 
@custom-media --sm-phone           (orientation: portrait) and (max-width: 359px);
@custom-media --md-phone           (orientation: portrait) and (min-width: 360px) and (max-width: 399px);
@custom-media --lg-phone           (orientation: portrait) and (min-width: 400px);
@custom-media --sm-phone-landscape (orientation: landscape) and (max-width: 599px);
@custom-media --md-phone-landscape (orientation: landscape) and (min-width: 600px) and (max-width: 719px);
@custom-media --lg-phone-landscape (orientation: landscape) and (min-width: 720px);

/* Tablet Breakpoints 
@custom-media --sm-tablet           (orientation: portrait) and (max-width: 719px);
@custom-media --lg-tablet           (orientation: portrait) and (min-width: 720px);
@custom-media --sm-tablet-landscape (orientation: landscape) and (max-width: 1023px);
@custom-media --lg-tablet-landscape (orientation: landscape) and (min-width: 1024px);*/
.maxwidth-container{
    margin: auto;
    width: 90%;
}
.baselinegrid{
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.06) 0, rgba(255,255,255, 0) 1px);
    background: linear-gradient(to bottom, rgba(0,0,0,0.06) 0, rgba(255,255,255, 0) 1px);
    background-repeat: repeat-y;
    background-size: 100% 1.5rem;
}

/* – Deprecated Grid -- sticking around for backwards compatibility */
/*
@styleguide
@title Grid

<div class="grid">
  <div class="col one-quarter md-viewport--one-half">
    <div class="greybox">Hey there</div>
  </div>
  <div class="col one-quarter md-viewport--one-half">
    <div class="greybox">Hey there</div>
  </div>
  <div class="col one-quarter md-viewport--one-half">
    <div class="greybox">Hey there</div>
  </div>
  <div class="col one-quarter md-viewport--one-half">
    <div class="greybox">Hey there</div>
  </div>
  <div class="col one-half md-viewport--one-half">
    <div class="greybox">Hey there</div>
  </div>
  <div class="col one-half md-viewport--one-half">
    <div class="greybox">Hey there</div>
  </div>
  <div class="col one-quarter md-viewport--one-half">
    <div class="greybox">Hey there</div>
  </div>
  <div class="col one-quarter md-viewport--one-half">
    <div class="greybox">Hey there</div>
  </div>
</div>


*/
.media{

    /* Proper spacing between instances of .media */
    margin-top: 15px;
}
.media:first-child{
    margin-top: 0;
}
.media, .media-body{
    zoom: 1;
    overflow: hidden;
}
.media-body{
    width: 10000px;
}
.media-object{
    display: block;

    /* Fix collapse in webkit from max-width: 100% and display: table-cell. */
}
.media-object.img-thumbnail{
    max-width: none;
}
.media-right, .media > .pull-right{
    padding-left: 10px;
}
.media-left, .media > .pull-left{
    padding-right: 10px;
}
.media-left, .media-right, .media-body{
    display: table-cell;
    vertical-align: top;
}
.grid{
    overflow: hidden;
    color: #999;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row wrap;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-align-content: flex-start;
        -ms-flex-line-pack: start;
            align-content: flex-start;
}
.column, [class^="col-"], .col{
    min-height: 24px;
    text-align: left;
    display: block;
    -webkit-box-flex: inherit;
    -webkit-flex: inherit;
        -ms-flex: inherit;
            flex: inherit;
    -webkit-align-self: flex-start;
        -ms-flex-item-align: start;
            align-self: flex-start;
    padding: 0 1em 1em 0;
}
/*float: left;*/
.testgrid .column, .testgrid [class^="col-"], .testgrid .col{
    font-size: 0.9em;
    background: rgba(216,217,228,0.6);
}
.testgrid .column:nth-child(2n), .testgrid [class^="col-"]:nth-child(2n), .testgrid .col:nth-child(2n){
    background: rgba(216,217,228,0.1);
}
.demo .column span, .demo [class^="col-"] span, .demo .col span{
    text-align: center;
    display: block;
    margin: 0 0.5em;
}
.testgrid .column span, .testgrid [class^="col-"] span, .testgrid .col span{
    background: ;
}
/* seems to fix sub-pixel rendering issues */
/*non responsive classes */
/*// Full*/
.one-whole{
    width: 99.98% !important;
}
/*// Halves*/
.one-half{
    width: 49.99%;
}
/*// Thirds*/
.one-third{
    width: 33.32666666666667%;
}
.two-thirds{
    width: 66.65333333333334%;
}
/*//Quarters*/
.one-quarter{
    width: 24.995%;
}
.two-quarters{

    /*@extend $(prefix)one-half;*/
    width: 49.99%;
}
.three-quarters{
    width: 74.985%;
}
/*//Fifths*/
.one-fifth{
    width: 19.996000000000002%;
}
.two-fifths{
    width: 39.992000000000004%;
}
.three-fifths{
    width: 59.988%;
}
.four-fifths{
    width: 79.98400000000001%;
}
/*//Sixths*/
.one-sixth{
    width: 16.663333333333334%;
}
.two-sixths{

    /*@extend $(prefix)one-third;*/
    width: 33.32666666666667%;
}
.three-sixths{

    /*@extend $(prefix)one-half;*/
    width: 49.99%;
}
.four-sixths{

    /*@extend $(prefix)two-thirds;*/
    width: 66.65333333333334%;
}
.five-sixths{
    width: 83.31666666666668%;
}
/*//Sevenths*/
.one-seventh{
    width: 14.282857142857143%;
}
.two-sevenths{
    width: 28.565714285714286%;
}
.three-sevenths{
    width: 42.848571428571425%;
}
.four-sevenths{
    width: 57.13142857142857%;
}
.five-sevenths{
    width: 71.41428571428573%;
}
.six-sevenths{
    width: 85.69714285714285%;
}
/*//Eighths*/
.one-eighth{
    width: 12.4975%;
}
.two-eighths{

    /*@extend $(prefix)one-quarter;*/
    width: 24.995%;
}
.three-eighths{
    width: 37.4925%;
}
.four-eighths{

    /*@extend $(prefix)one-half;*/
    width: 49.99%;
}
.five-eighths{
    width: 62.487500000000004%;
}
.six-eighths{

    /*@extend $(prefix)three-quarters;*/
    width: 74.985%;
}
.seven-eighths{
    width: 87.4825%;
}
/*//Ninths*/
.one-ninth{
    width: 11.108888888888888%;
}
.two-ninths{
    width: 22.217777777777776%;
}
.three-ninths{

    /*@extend $(prefix)one-third;*/
    width: 33.32666666666667%;
}
.four-ninths{
    width: 44.43555555555555%;
}
.five-ninths{
    width: 55.54444444444445%;
}
.six-ninths{
    width: 66.65333333333334%;
}
.seven-ninths{
    width: 77.76222222222222%;
}
.eight-ninths{
    width: 88.8711111111111%;
}
/*//Tenths*/
.one-tenth{
    width: 9.998000000000001%;
}
.two-tenths{

    /*@extend $(prefix)one-fifth;*/
    width: 19.996000000000002%;
}
.three-tenths{
    width: 29.994%;
}
.four-tenths{

    /*@extend $(prefix)two-fifths;*/
    width: 39.992000000000004%;
}
.five-tenths{

    /*@extend $(prefix)one-half;*/
    width: 49.99%;
}
.six-tenths{

    /*@extend $(prefix)three-fifths;*/
    width: 59.988%;
}
.seven-tenths{
    width: 69.986%;
}
.eight-tenths{

    /*@extend $(prefix)four-fifths;*/
    width: 79.98400000000001%;
}
.nine-tenths{
    width: 89.982%;
}
/*//Elevenths*/
.one-eleventh{
    width: 9.08909090909091%;
}
.two-elevenths{
    width: 18.17818181818182%;
}
.three-elevenths{
    width: 27.267272727272726%;
}
.four-elevenths{
    width: 36.35636363636364%;
}
.five-elevenths{
    width: 45.445454545454545%;
}
.six-elevenths{
    width: 54.53454545454545%;
}
.seven-elevenths{
    width: 63.623636363636365%;
}
.eight-elevenths{
    width: 72.71272727272728%;
}
.nine-elevenths{
    width: 81.80181818181819%;
}
.ten-elevenths{
    width: 90.89090909090909%;
}
/*//Twelfths*/
.one-twelfth{
    width: 8.331666666666667%;
}
.two-twelfths{

    /*@extend $(prefix)one-sixth;*/
    width: 16.663333333333334%;
}
.three-twelfths{

    /*@extend $(prefix)one-quarter;*/
    width: 24.995%;
}
.four-twelfths{

    /*@extend $(prefix)one-third;*/
    width: 33.32666666666667%;
}
.five-twelfths{
    width: 41.65833333333334%;
}
.six-twelfths{

    /*@extend $(prefix)one-half;*/
    width: 49.99%;
}
.seven-twelfths{
    width: 58.32166666666667%;
}
.eight-twelfths{

    /*@extend $(prefix)two-thirds;*/
    width: 66.65333333333334%;
}
.nine-twelfths{

    /*@extend $(prefix)three-quarters;*/
    width: 74.985%;
}
.ten-twelfths{

    /*@extend $(prefix)five-sixths;*/
    width: 83.31666666666668%;
}
.eleven-twelfths{
    width: 91.64833333333333%;
}
/*//Thirteenths*/
.one-thirteenth{
    width: 7.690769230769232%;
}
.two-thirteenths{
    width: 15.381538461538463%;
}
.three-thirteenths{
    width: 23.072307692307696%;
}
.four-thirteenths{
    width: 30.763076923076927%;
}
.five-thirteenths{
    width: 38.45384615384616%;
}
.six-thirteenths{
    width: 46.14461538461539%;
}
.seven-thirteenths{
    width: 53.83538461538461%;
}
.eight-thirteenths{
    width: 61.52615384615385%;
}
.nine-thirteenths{
    width: 69.21692307692308%;
}
.ten-thirteenths{
    width: 76.90769230769232%;
}
.eleven-thirteenths{
    width: 84.59846153846154%;
}
.twelve-thirteenths{
    width: 92.28923076923078%;
}
/*//Fouteenths*/
.one-fourteenth{
    width: 7.1414285714285715%;
}
.two-fourteenths{

    /*@extend $(prefix)one-seventh;*/
    width: 14.282857142857143%;
}
.three-fourteenths{
    width: 21.424285714285713%;
}
.four-fourteenths{

    /*@extend $(prefix)two-sevenths;*/
    width: 28.565714285714286%;
}
.five-fourteenths{
    width: 35.70714285714286%;
}
.six-fourteenths{

    /*@extend $(prefix)three-sevenths;*/
    width: 42.848571428571425%;
}
.seven-fourteenths{

    /*@extend $(prefix)one-half;*/
    width: 49.99%;
}
.eight-fourteenths{

    /*@extend $(prefix)four-sevenths;*/
    width: 57.13142857142857%;
}
.nine-fourteenths{
    width: 64.27285714285715%;
}
.ten-fourteenths{
    width: 71.41428571428573%;
}
.eleven-fourteenths{
    width: 78.55571428571429%;
}
.twelve-fourteenths{

    /*@extend $(prefix)six-sevenths;*/
    width: 85.69714285714285%;
}
.thirteen-fourteenths{
    width: 92.83857142857144%;
}
/*//Fifteenths*/
.one-fifteenth{
    width: 6.665333333333334%;
}
.two-fifteenths{
    width: 13.330666666666668%;
}
.three-fifteenths{

    /*@extend $(prefix)two-tenths;*/
    width: 19.996000000000002%;
}
.four-fifteenths{
    width: 26.661333333333335%;
}
.five-fifteenths{

    /*@extend $(prefix)one-third;*/
    width: 33.32666666666667%;
}
.six-fifteenths{

    /*@extend $(prefix)four-tenths;*/
    width: 39.992000000000004%;
}
.seven-fifteenths{
    width: 46.657333333333334%;
}
.eight-fifteenths{
    width: 53.32266666666667%;
}
.nine-fifteenths{

    /*@extend $(prefix)six-tenths;*/
    width: 59.988%;
}
.ten-fifteenths{

    /*@extend $(prefix)two-thirds;*/
    width: 66.65333333333334%;
}
.eleven-fifteenths{
    width: 73.31866666666666%;
}
.twelve-fifteenths{

    /*@extend $(prefix)eight-tenths;*/
    width: 79.98400000000001%;
}
.thirteen-fifteenths{
    width: 86.64933333333335%;
}
.fourteen-fifteenths{
    width: 93.31466666666667%;
}
/*//Sixteenths*/
.one-sixteenth{
    width: 6.24875%;
}
.two-sixteenths{

    /*@extend $(prefix)one-eighth;*/
    width: 12.4975%;
}
.three-sixteenths{
    width: 18.74625%;
}
.four-sixteenths{

    /*@extend $(prefix)two-eighths;*/
    width: 24.995%;
}
.five-sixteenths{
    width: 31.243750000000002%;
}
.six-sixteenths{

    /*@extend $(prefix)three-eighths;*/
    width: 37.4925%;
}
.seven-sixteenths{
    width: 43.74125%;
}
.eight-sixteenths{

    /*@extend $(prefix)four-eighths;*/
    width: 49.99%;
}
.nine-sixteenths{
    width: 56.23875%;
}
.ten-sixteenths{

    /*@extend $(prefix)five-eighths;*/
    width: 62.487500000000004%;
}
.eleven-sixteenths{
    width: 68.73625%;
}
.twelve-sixteenths{

    /*@extend $(prefix)six-eighths;*/
    width: 74.985%;
}
.thirteen-sixteenths{
    width: 81.23375%;
}
.fourteen-sixteenths{

    /*@extend $(prefix)seven-eighths;*/
    width: calc(7 / 8min- * 99.98%);
}
.fifteen-sixteenths{
    width: 93.73125%;
}
/*responsive classes*/

/* – Helpers */
/* Helpers */
.fixed, .affix{
    position: fixed;
}
.greybox{
    background: #efefef;
    padding: 1em;
}

/*Bootstrap 4 grid system*/
/*@import "grid/grid/bootstrap-grid"; */

/* Theming (for want of a better word)
/* Anything that creates emotion, colour, typography etc.
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Colours
// ============================== */
/* Bootstrappy */
/* Additional colors */
/*Post-css styleguide starts================================================*/
/* TODO: figure out how to set colour pallette options without outputting to code */
/* @start color */
.----colours{
    #191F44: #191F44;
    #06ACFD: #06ACFD;

    /*#D0021B:   $warningcolour;*/
    #D0021B: #D0021B;

    /* #06ACFD:  $positivecolour; */
    #F9B916: #F9B916;
    #A8C93A: #A8C93A;
    #45545F: #45545F;
    #B8CAD2: #B8CAD2;
    #D4DEE3: #D4DEE3;
    #E6EBEE: #E6EBEE;
}
/* @end color */
/*Post-css styleguide ends================================================*/
/*Base margin*/
/* Borders
// ============================== */
/* Other Defaults
// ============================== */
/*Tooltips*/
/*Breadcrumbs*/
/*$breadcrumb-padding-vertical:   .75rem !default;*/
/*$breadcrumb-padding-horizontal: 1rem !default;*/
/*$breadcrumb-bg:                 $gray-lighter !default;*/
/*Tables

Customizes the `.table` component with basic values, each used across all table variations.*/
@charset "UTF-8";
/**
 * Typecsset
 *
 * Typecsset is a small, unopinionated library for creating beautifully set type
 * on the web. Typecsset gives perfect vertical rhythm at any configurable font
 * size, as well as many other typographical niceties.
 */
/*------------------------------------*\
    #SHARED
\*------------------------------------*/
/**
 * A lot of elements in Typecsset need to share some declarations (mainly for
 * vertical rhythm), so we `@extend` some silent classes.
 */
h1, h2, h3, h4, h5, h6, ul, ol, dd, p, address, pre, blockquote, table{
    margin: 0;
    padding: 0;
}
h1, h2, h3, h4, h5, h6, ul, ol, dd, p, address, pre, blockquote, table{
    margin-bottom: 24px;
    margin-bottom: 1.5rem;
}
/*------------------------------------*\
    #BASE
\*------------------------------------*/
/**
 * 1. Set the base element’s `font-size` to the value of your choosing. Set in
 *    ems, assuming a browser default of 16px.
 * 2. Work out the unitless `line-height` for your project based around your
 *    desired `line-height` (defined previously in pixels), and your project’s
 *    base font size.
 */
html{
    font-size: 1em;

    /* [1] */
    line-height: 1.5;

    /* [2] */
}
body{
    margin: 0;
}
/*------------------------------------*\
    #HEADINGS
\*------------------------------------*/
h1{
    font-size: 48px;
    font-size: 3rem;
    line-height: 1;
}
h2{
    font-size: 36px;
    font-size: 2.25rem;
    line-height: 1.33333;
}
h3{
    font-size: 30px;
    font-size: 1.875rem;
    line-height: 1.2;
}
h4{
    font-size: 24px;
    font-size: 1.5rem;
    line-height: 1;
}
h5{
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 1.2;
}
h6{
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 1.33333;
}
/*------------------------------------*\
    #LISTS
\*------------------------------------*/
ul, ol, dd{
    margin-left: 2.5rem;
}
li > ul, li > ol{
    margin-bottom: 0;
}
/*------------------------------------*\
    #PARAGRAPHS
\*------------------------------------*/
/**
 * Not strictly a paragraph, but probably doesn’t need its own section.
 */
/*------------------------------------*\
    #CODE
\*------------------------------------*/
/**
 * 1. Fix an odd quirk whereby, without this, code blocks are rendered at a
 *    font-size smaller than 1em.
 */
code, kbd, pre, samp{
    font-family: monospace, monospace;

    /* [1] */
}
/*------------------------------------*\
    #QUOTES
\*------------------------------------*/
/**
 * 1. Hang the opening quote of the blockquote.
 */
blockquote{
    text-indent: -0.41em;

    /* [1] */
}
/**
 * Set up quote marks on quoting elements. This is very English-based, so we are
 * using “, ”, ‘, and ’ quotes.
 */
blockquote{
    quotes: "“" "”";
    margin-left: 48px;
    margin-left: 3rem;
}
blockquote p:before{
    content: "“";
    content: open-quote;
}
blockquote p:after{
    content: "";
    content: no-close-quote;
}
blockquote p:last-of-type:after{
    content: "”";
    content: close-quote;
}
q{
    quotes: "‘" "’" "“" "”";

    /**
   * If an element opens with an inline quote, let’s hang that.
   */
}
q:before{
    content: "‘";
    content: open-quote;
}
q:after{
    content: "’";
    content: close-quote;
}
q q:before{
    content: "“";
    content: open-quote;
}
q q:after{
    content: "”";
    content: close-quote;
}
q:first-child{
    display: inline-block;
    text-indent: -0.22em;
}
/*------------------------------------*\
    #TABLES
\*------------------------------------*/
/**
 * Crude table styles; tables are very difficult to keep on the baseline.
 */
table{
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}
th, td{
    padding: 12px;
}
/*# sourceMappingURL=_typecsset.css.map */
/* we used to be getting this from Australia's fast font service.
//@import url(http://fast.fonts.net/cssapi/8d945313-f595-4e77-a7d9-9210e35813e6.css) 

// https://github.com/csswizardry/typecsset/blob/master/typecsset.scss*/
/* Webfont: FuturaStd-Light */
@font-face{
    font-family: "Futura W01 Light";
    src: url("/fonts/FuturaLight/FuturaStd-Light.eot");
    src: url("/fonts/FuturaLight/FuturaStd-Light.eot?#iefix") format("embedded-opentype"), url("/fonts/FuturaLight/FuturaStd-Light.woff") format("woff"), url("/fonts/FuturaLight/FuturaStd-Light.ttf") format("truetype"), url("/fonts/FuturaLight/FuturaStd-Light.svg#d83a536671d160add994a83c5144bd9a") format("svg");
    font-style: normal;
    font-weight: 400;
    text-rendering: optimizeLegibility;
}
/* Webfont: FuturaStd-Book */
@font-face{
    font-family: "Futura W01 Book";
    src: url("/fonts/FuturaBook/FuturaStd-Book.eot");
    src: url("/fonts/FuturaBook/FuturaStd-Book.eot?#iefix") format("embedded-opentype"), url("/fonts/FuturaBook/FuturaStd-Book.woff") format("woff"), url("/fonts/FuturaBook/FuturaStd-Book.ttf") format("truetype"), url("/fonts/FuturaBook/FuturaStd-Book.svg#db02aa682b3e193ac55da3558b4b0d6e") format("svg");
    font-style: normal;
    font-weight: 500;
    text-rendering: optimizeLegibility;
}
/* Webfont: FuturaStd-Medium */
@font-face{
    font-family: "Futura W01 Medium";
    src: url("/fonts/FuturaMedium/FuturaStd-Medium.eot");
    src: url("/fonts/FuturaMedium/FuturaStd-Medium.eot?#iefix") format("embedded-opentype"), url("/fonts/FuturaMedium/FuturaStd-Medium.woff") format("woff"), url("/fonts/FuturaMedium/FuturaStd-Medium.ttf") format("truetype"), url("/fonts/FuturaMedium/FuturaStd-Medium.svg#978bfeb47c41e9c6da434cb6375bf283") format("svg");
    font-style: normal;
    font-weight: 600;
    text-rendering: optimizeLegibility;
}
/* Webfont: FuturaStd-Bold */
@font-face{
    font-family: "Futura W01 Bold";
    src: url("/fonts/FuturaBold/FuturaStd-Bold.eot");
    src: url("/fonts/FuturaBold/FuturaStd-Bold.eot?#iefix") format("embedded-opentype"), url("/fonts/FuturaBold/FuturaStd-Bold.woff") format("woff"), url("/fonts/FuturaBold/FuturaStd-Bold.ttf") format("truetype"), url("/fonts/FuturaBold/FuturaStd-Bold.svg#e6614ac1ffeb97962de474601fd3ce1d") format("svg");
    font-style: normal;
    font-weight: 700;
    text-rendering: optimizeLegibility;
}
/* Typography
// ============================== */
body{
    font-family: "Futura W01 Book",sans-serif;
    font-weight: 400;
    font-size: 1rem;

    /*16px*/
    color: #505050;
}
hr{
    margin: 20px 0;
    border-top: 1px solid #8a8a8a;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6{
    font-family: "Futura W01 Bold",sans-serif;
    color: #191F44;
    margin-bottom: 20px;
}
h1.inverted, .h1.inverted, h2.inverted, .h2.inverted, h3.inverted, .h3.inverted, h4.inverted, .h4.inverted, h5.inverted, .h5.inverted, h6.inverted, .h6.inverted{
    color: #fff;
}
h1.inverted h1, h1.inverted .h1, h1.inverted h2, h1.inverted .h2, h1.inverted h3, h1.inverted .h3, h1.inverted h4, h1.inverted .h4, h1.inverted h5, h1.inverted .h5, h1.inverted h6, h1.inverted .h6, .h1.inverted h1, .h1.inverted .h1, .h1.inverted h2, .h1.inverted .h2, .h1.inverted h3, .h1.inverted .h3, .h1.inverted h4, .h1.inverted .h4, .h1.inverted h5, .h1.inverted .h5, .h1.inverted h6, .h1.inverted .h6, h2.inverted h1, h2.inverted .h1, h2.inverted h2, h2.inverted .h2, h2.inverted h3, h2.inverted .h3, h2.inverted h4, h2.inverted .h4, h2.inverted h5, h2.inverted .h5, h2.inverted h6, h2.inverted .h6, .h2.inverted h1, .h2.inverted .h1, .h2.inverted h2, .h2.inverted .h2, .h2.inverted h3, .h2.inverted .h3, .h2.inverted h4, .h2.inverted .h4, .h2.inverted h5, .h2.inverted .h5, .h2.inverted h6, .h2.inverted .h6, h3.inverted h1, h3.inverted .h1, h3.inverted h2, h3.inverted .h2, h3.inverted h3, h3.inverted .h3, h3.inverted h4, h3.inverted .h4, h3.inverted h5, h3.inverted .h5, h3.inverted h6, h3.inverted .h6, .h3.inverted h1, .h3.inverted .h1, .h3.inverted h2, .h3.inverted .h2, .h3.inverted h3, .h3.inverted .h3, .h3.inverted h4, .h3.inverted .h4, .h3.inverted h5, .h3.inverted .h5, .h3.inverted h6, .h3.inverted .h6, h4.inverted h1, h4.inverted .h1, h4.inverted h2, h4.inverted .h2, h4.inverted h3, h4.inverted .h3, h4.inverted h4, h4.inverted .h4, h4.inverted h5, h4.inverted .h5, h4.inverted h6, h4.inverted .h6, .h4.inverted h1, .h4.inverted .h1, .h4.inverted h2, .h4.inverted .h2, .h4.inverted h3, .h4.inverted .h3, .h4.inverted h4, .h4.inverted .h4, .h4.inverted h5, .h4.inverted .h5, .h4.inverted h6, .h4.inverted .h6, h5.inverted h1, h5.inverted .h1, h5.inverted h2, h5.inverted .h2, h5.inverted h3, h5.inverted .h3, h5.inverted h4, h5.inverted .h4, h5.inverted h5, h5.inverted .h5, h5.inverted h6, h5.inverted .h6, .h5.inverted h1, .h5.inverted .h1, .h5.inverted h2, .h5.inverted .h2, .h5.inverted h3, .h5.inverted .h3, .h5.inverted h4, .h5.inverted .h4, .h5.inverted h5, .h5.inverted .h5, .h5.inverted h6, .h5.inverted .h6, h6.inverted h1, h6.inverted .h1, h6.inverted h2, h6.inverted .h2, h6.inverted h3, h6.inverted .h3, h6.inverted h4, h6.inverted .h4, h6.inverted h5, h6.inverted .h5, h6.inverted h6, h6.inverted .h6, .h6.inverted h1, .h6.inverted .h1, .h6.inverted h2, .h6.inverted .h2, .h6.inverted h3, .h6.inverted .h3, .h6.inverted h4, .h6.inverted .h4, .h6.inverted h5, .h6.inverted .h5, .h6.inverted h6, .h6.inverted .h6{
    color: #fff;
}
/* mark certain text */
mark{
    background: #f7ffaa;
    display: inline-block;
    padding: 0 5px;
}
.lightweight{
    font-family: "Futura W01 Light","Helvetica Neue",Arial,Helvetica,sans-serif;
}
.regularweight{
    font-family: "Futura W01 Book",sans-serif;
}
.mediumweight{
    font-family: "Futura W01 Medium",sans-serif;
}
.heavyweight{
    font-family: "Futura W01 Bold",sans-serif;
}
.pagetitle{
    font-size: 2.125rem;
}
.pageheading{
    font-size: 1.25rem;
}
.h3{
    font-size: 1rem;
}
/*.h4, .h5, .h6 {
  font-size: 1.8rem;
  margin-bottom: 8px;
}

.h4{
  font-size: 1.5rem;

}
.h5{
  font-size: 1.3rem;
}
.h6{
  font-size: 1.1rem;
}*/
.upcase{
    text-transform: uppercase;
}
.h7{
    font-size: 1.2rem;
    margin-top: 24px;
    margin-bottom: 0;
    display: block;
    color: #06ACFD;
    border-bottom: 1px solid rgba(0, 0, 0, 0.14);
}
.h7 + p, .h7 + ul{
    padding-top: 14px;
}
.subtitle{

    /*  font-family: $altfont;*/
    font-size: 0.7rem;
    text-transform: none;
}
.small{
    font-size: 0.8rem;
}
.inputcopy{
    font-size: 0.875rem;

    /*14px*/
}
.smallcopy{
    font-size: 0.6875rem;

    /*11px*/
}
code, pre{
    background: #efefef;
    padding: 1em;
    font-size: 0.9em;
    font-family: "Source Code Pro",monospace;
}
code.pre, pre.pre{
    background: #F0F0F1;
    position: relative;
}
a:link, a:active, a:visited{
    text-decoration: none;
}
a:link, a:active, a:link{
    color: #06ACFD;
}
a:visited{
    color: #191F44;
}
b, strong{
    font-family: "Futura W01 Book",sans-serif;
    font-weight: 400;
}
h1 code, h1 pre, h2 code, h2 pre, h3 code, h3 pre, h4 code, h4 pre, h5 code, h5 pre, h6 code, h6 pre{
    font-size: 0.6em;
    position: relative;
    top: -0.4em;
}
.hilight{
    color: #06ACFD;
}
legend{
    text-transform: uppercase;
    font-size: 0.7em;
    letter-spacing: 1px;
    padding: 0 0.3em;
}
.fsize-big{
    font-size: 30px;
}
.stats{
    -webkit-text-stroke: 1px #1b234c;
    -khtml-text-stroke: 1px #1b234c;
    -moz-text-stroke: 1px #1b234c;
    text-stroke: 1px #1b234c;
    text-shadow: 1px 1px 3px #dcddde;
    color: #fff;
}
.jumbotron{
    font-size: 4.4em;
}
pre{
    box-shadow: 1px 1px 7px rgba(90, 90, 100, 0.26);
    background: #fff;
    text-align: left;
    font-size: 0.8em;
}
blockquote{
    text-indent: 0;
}
blockquote p{
    font-family: "Merriweather",sans-serif;
    font-style: italic;
    margin: 0 0 0.4em;
}
blockquote p:before, blockquote p:after{
    font-size: 3em;
    content: '';
    font-family: "Merriweather",sans-serif;
    position: absolute;
}
blockquote p:first-of-type{
    padding-top: 2em;
}
blockquote p:first-of-type:before{
    content: open-quote;
    margin-left: -0.4em;
    margin-top: -0.7em;
}
blockquote p:last-of-type:after{
    margin-left: 0.2em;
}
blockquote cite{
    display: block;
    padding-top: 1.5em;
    font-family: "Futura W01 Medium",sans-serif;
    text-transform: uppercase;
    font-style: normal;
}
blockquote cite a:link, blockquote cite a:active{
    color: #191F44;
}
blockquote cite:before{
    content: '— ';
}
/* Typographic Helpers */
.border--bottom{
    border-bottom: 1px solid rgba(0, 0, 0, 0.14);
}
[class^="icon-"], [class*=" icon-"]{
    color: #191F44;
}
/*
@styleguide

@title Button


Use the button classes on and `<a>`, `<button>`, `<input>` elements.

<h3 class="psg-h3">Buttons - Medium</h3>


<div class="psg-subsection">
  <button type="button" class="btn btn-lg">Call to action</button>

  <button type="button" class="btn btn-lg blue">Call to action</button>

</div>

<div class="psg-subsection">
  <h3 class="psg-h3">Buttons - Small</h3>

  <button type="button" class="btn btn-sm">Call to action</button>

  <button type="button" class="btn btn-sm blue">Call to action</button>
</div>


<div class="psg-subsection">

  <h3 class="psg-h3">Buttons - Dropdown</h3>

  <div class="dropdown">
    <button class="btn btn-sm dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </div>

  <div class="dropdown dropdown-single">
    <button class="btn btn-sm dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </div>

  <button type="button" class="btn btn-default btn-sm btn-icon">
    <i class="icon-download"></i>
  </button>

  <button type="button" class="btn btn-default btn-sm btn-icon blue">
    <i class="icon-download"></i>
  </button>
  
  <button type="button" class="btn btn-default btn-sm btn-icon">
    <i class="icon-search"></i>
  </button>

  <button type="button" class="btn btn-default btn-sm btn-icon">
    <i class="icon-plus"></i>
  </button>

  

  
</div>

*/
/*Theme style starts--------------------------------------------------------*/
/* Buttons
// ============================== 

   Default Button styles & shit.
   you can inherit into your own class by using: 
   @extend %button;

// ============================== */
.btn-primary, .btn, .button{
    border: none;
    border-radius: 2px;

    /*box-shadow: none;*/
    color: #191F44;
    cursor: pointer;
    display: inline-block;
    font-family: "Futura W01 Bold",sans-serif;
    font-weight: 400;
    letter-spacing: 0.03rem;
    text-transform: uppercase;

    /*margin-bottom: calc($controlmargin / 2);*/

    /*10px*/
    -webkit-transition: all 0.25s;
    transition: all 0.25s;
    position: relative;

    /* burnt orange instead of black ? */
}
.btn-primary:hover, .btn:hover, .button:hover{
    background: #D69511;

    /*transform: translateY(-1px);*/
}
.btn-primary:active, .btn:active, .button:active, .btn-primary:focus, .btn:focus, .button:focus{
    outline: none;
}
/* Text shadow on text maybe? more readable 
.btn-lg, .btn-sm{
  text-shadow: 0 1px 1px rgba(165, 133, 51, 0.62);
  &.blue{
    text-shadow: 0 1px 1px rgba(51, 86, 165, 0.62);
  }
}*/
.btn-lg{
    font-size: 0.875rem;

    /*14px*/
    padding: 0.643em calc(0.875rem * 1.3);
    line-height: 1.3;
    background: #F9B916;
    color: #fff;
}
.btn-lg.blue{
    background: #06ACFD;
}
.btn-lg.blue:hover{
    background: #159ADA;
}
.btn-sm{
    font-size: 0.75rem;

    /*12px*/
    padding: 0.334em calc(0.75rem * 1.3);
    background: #F9B916;
    color: #fff;
}
.btn-sm.blue{
    background: #06ACFD;
}
.btn-sm.blue:hover{
    background: #159ADA;
}
.btn-link{
    text-transform: none;
    font-size: 0.875em;

    /*14px*/
    text-decoration: underline;
}
.btn-link:hover{
    background: none;
    box-shadow: none;
    color: #8a8a8a;
}
.btn-positive, .button--positive{
    background: transparent !important;
    color: #06ACFD !important;
    border-color: #06ACFD !important;
}
.btn-positive:hover, .button--positive:hover{
    background: #B4E6FE !important;
}
.btn-positive:hover:before, .button--positive:hover:before{
    opacity: 0;
}
.btn-negative, .button--negative{
    background: #D0021B !important;
    color: #fff !important;
}
.btn-negative:hover, .button--negative:hover{
    background: #DE4E5F !important;
}
.btn-negative:hover:before, .button--negative:hover:before{
    opacity: 0;
}
.btn-group .btn-radio{
    background: #EAEAEA;
    color: #8a8a8a;
    text-transform: none;
}
.btn-group .btn-radio.btn{
    margin-left: 10px;
    border-radius: 2px !important;
}
.btn-group .btn-radio.btn:first-child{
    margin-left: 0;
}
.btn-group .btn-radio:hover{
    background-color: #505050;
}
.btn-group .btn-radio.active, .btn-group .btn-radio:active{
    color: #fff;
    background: #191F44;
    border: none;
}
.btn-group .btn-radio.active:hover, .btn-group .btn-radio:active:hover{
    background: #191F44;
}
/*%button--default {
  background: $grey;
  color: $black;
  &:hover {
    background: mix($darkgrey, $black, 30%);
    color: $white;
  }
}
*/
/*%button--secondary {
  background: $secondarycolour !important;
  color: $white !important;

  &:hover {
    background: mix($secondarycolour, $white, 77%) !important;

    &:before {
      opacity: 0;
    }
  }
}

.btn-secondary, .button--secondary {
  @extend %button--secondary;
}*/
/*%button--info {
  background: transparent !important;
  border-color: $highlightcolour !important;
  
  color: $highlightcolour !important;

  &:hover {
    background: mix($highlightcolour, $white, 30%) !important;

    &:before {
      opacity: 0;
    }
  }
}

%button--warning {
  background: $warningcolour !important;
  color: $white !important;

  &:hover {
    background: mix($warningcolour, $white, 70%) !important;

    &:before {
      opacity: 0;
    }
  }
}
*/
/*
%button--highlight {
  background: $highlightcolour !important;
  color: $white !important;

  &:hover {
    background: mix($highlightcolour, $white, 70%) !important;

    &:before {
      opacity: 0;
    }
  }
}

%button--highlight-hover {
  background: mix($highlightcolour, $white, 30%) !important;
}
*/
/*.btn-default, .button--default {
  @extend %button--default;
}*/
/*
.btn-highlight, .button--highlight {
  @extend %button--info;
}*/
/*.btn-sm, .button--small {
  @extend %button--small;
}
*/
.btn-text{
    background: 0;
    border: 0;
    font-family: "Futura W01 Bold",sans-serif;
    color: #191F44;
    font-size: 14px;
    letter-spacing: -0.01em;
    float: none;
    vertical-align: top;
    padding-top: 0;
}
.btn-text i{
    font-size: 32px;
    margin: 0 5px 0 7px;
    position: relative;
    top: 9px;
}
.btn-text:hover{
    background: none;
    color: #06ACFD;
    box-shadow: none;
}
.btn-text:focus{
    border-color: transparent;
    outline: none;
}
/* Button Ripple */
.ripple{
    width: 5%;
    height: 12%;
    background: #fff;
    opacity: 0;
    position: absolute;
    top: 14px;
    left: 50%;
    margin-left: -5px;
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
    border-radius: 50%;
    -webkit-transition: 0.9s all;
    transition: 0.9s all;
}
/*Dropdown styles*/
.dropdown{
    display: inline-block;
}
.dropdown .btn{
    margin-bottom: 0;
}
.dropdown .dropdown-menu{
    background: #45545F;
    margin: 0;
    padding: 0;
    border-radius: 2px;
    border: none;
}
.dropdown .dropdown-menu a{
    color: #fff;
}
.dropdown .dropdown-menu .dropdown-item{
    font-size: 0.75rem;

    /*12px*/
    padding: 0.334em calc(.9rem * 1.3);
    font-size: .9rem;
}
.dropdown .dropdown-menu .dropdown-item:hover, .dropdown .dropdown-menu .dropdown-item:focus{
    background: #06ACFD;
}
.dropdown .dropdown-toggle{}
.dropdown .dropdown-toggle:after{
    border-top: .5em solid;
    border-right: .4em solid transparent;
    border-left: .4em solid transparent;
}
.dropdown.dropdown-single .btn-sm{
    padding: 0.334em 0.433em;
    width: 26.375px;
}
/*Icno button - buttons that contain single icon*/
.btn-icon{
    padding: 0.334em 0.433em;
    width: 26.375px;
}
.btn-icon i{
    color: #fff;
}
/*.btn > .dropdown-toggle {
  padding-right: 8px;
  padding-left: 8px;
  border-width: 0;
  border-left-width: 1px;
  margin-bottom: 0;
}*/
/*override border colour on active*/
/*.open > .btn-secondary.dropdown-toggle, .open > .btn-secondary.dropdown-toggle:hover{
  border-color: rgba(255,255,255,0.4);
}*/
/*.btn-dropdown{
  padding-right: 2em;

  .icon{
    display: inline-block;
    vertical-align: top;
    zoom: 1;
    text-indent: -5000px;
    background: url('../../../public/img/svg/icon_dropdown.svg') right center no-repeat;
    width: 11px;
    height: 8px;
    vertical-align: middle;
    position: absolute;
    top: 32%;
    right: .55em;
  }


  .dropdown-toggle{
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    &:hover{
      transform: none;
      box-shadow: none;
      background: rgba(256,255,255,0.2);
    }
    &:after{
      margin-top: -0.1rem;
      margin-left: .15rem;
      border-top: .37em solid;
      border-right: .33em solid transparent;
      border-left: .33em solid transparent;
    }
  }
  
  .dropdown-item, .dropdown-menu{
      text-transform: none;
   }
  
  .btn-secondary&:hover{
    .dropdown-toggle{
      background: mix($highlightcolour, $white, 80%) !important;
    }
  }
  .btn-default&:hover{
    .dropdown-toggle{
      background: mix($darkgrey, $white, 80%) !important;
    }
  }
}*/
/*Progress Button Styles http://tympanus.net/codrops/2013/12/12/progress-button-styles/ */
*, *:after, *::before{
    box-sizing: border-box;
}
/* General styles for all types of buttons */
.progress-button{

    /* position: relative;
  display: inline-block;
  padding: 0 60px;
  outline: none;
  border: none;
  background: #1d9650;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 1em;
  line-height: 4;*/

    /*height: 36px;*/
}
.progress-button[disabled], .progress-button[disabled].state-loading{
    cursor: default;
}
.progress-button .content{
    position: relative;
    display: block;
}
.progress-button .content::before, .progress-button .content::after{
    position: absolute;
    right: 7px;
    color: #191F44;
    font-family: "icomoon";
    opacity: 0;
    -webkit-transition: opacity 0.3s 0.3s;
    transition: opacity 0.3s 0.3s;
}
.progress-button .content::before{
    content: "\e913";

    /* Checkmark for success */
}
.progress-button .content::after{
    content: "\e914";

    /* Cross for error */
}
.progress-button.state-success .content::before, .progress-button.state-error .content::after{
    opacity: 1;
}
.notransition{
    -webkit-transition: none !important;
    transition: none !important;
}
.progress-button .progress{

    /*background: #148544;*/
    background: #E0A91F;
}
.progress-button .progress-inner{
    position: absolute;
    left: 0;

    /*background: #0e7138;*/
    background: #726544;
}
.progress-button[data-horizontal] .progress-inner{
    top: 0;
    width: 0;
    height: 100%;
    -webkit-transition: width 0.3s, opacity 0.3s;
    transition: width 0.3s, opacity 0.3s;
}
.progress-button[data-vertical] .progress-inner{
    bottom: 0;
    width: 100%;
    height: 0;
    -webkit-transition: height 0.3s, opacity 0.3s;
    transition: height 0.3s, opacity 0.3s;
}
/* Necessary 3d styles for buttons with perspective */
.progress-button[data-perspective]{
    position: relative;
    display: inline-block;
    padding: 0;
    background: transparent;
    -webkit-perspective: 900px;
    perspective: 900px;
}
.progress-button[data-perspective] .content{

    /* padding: 0 60px;
  background: #1d9650;*/
    font-size: 0.875rem;

    /*14px*/
    padding: 0.643em calc(0.875rem * 1.3);
    line-height: 1.3;
    padding-left: calc(0.875rem * 2.3);
    padding-right: calc(0.875rem * 2.3);
    background: #F9B916;
}
.progress-button[data-perspective] .progress-wrap{
    display: block;
    -webkit-transition: -webkit-transform 0.2s;
    transition: -webkit-transform 0.2s;
    transition: transform 0.2s;
    transition: transform 0.2s, -webkit-transform 0.2s;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.progress-button[data-perspective] .content, .progress-button[data-perspective] .progress{
    outline: 1px solid rgba(0,0,0,0);

    /* Smoothen jagged edges in FF */
}
/* Individual styles */
/* Choose the effect(s) you want, delete the rest */
/* Fill horizontal */
/* ====================== */
.progress-button[data-style="fill"][data-horizontal]{
    overflow: hidden;
}
.progress-button[data-style="fill"][data-horizontal] .content{
    z-index: 10;
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
}
.progress-button[data-style="fill"][data-horizontal] .content::before, .progress-button[data-style="fill"][data-horizontal] .content::after{
    top: 100%;
    right: auto;
    left: 50%;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
.progress-button[data-style="fill"][data-horizontal].state-success .content, .progress-button[data-style="fill"][data-horizontal].state-error .content{
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
}
/* Fill vertical */
/* ====================== */
.progress-button[data-style="fill"][data-vertical]{
    overflow: hidden;
}
.progress-button[data-style="fill"][data-vertical] .content{
    z-index: 10;
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
}
.progress-button[data-style="fill"][data-vertical] .content::before, .progress-button[data-style="fill"][data-vertical] .content::after{
    top: 100%;
    right: auto;
    left: 50%;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
.progress-button[data-style="fill"][data-vertical].state-success .content, .progress-button[data-style="fill"][data-vertical].state-error .content{
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
}
/* Shrink horizontal */
/* ====================== */
.progress-button[data-style="shrink"]{

    /* common for horizontal and vertical */
    overflow: hidden;
    -webkit-transition: -webkit-transform 0.2s;
    transition: -webkit-transform 0.2s;
    transition: transform 0.2s;
    transition: transform 0.2s, -webkit-transform 0.2s;
}
.progress-button[data-style="shrink"][data-horizontal] .content{
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, transform 0.3s;
    transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
}
.progress-button[data-style="shrink"][data-horizontal] .content::before, .progress-button[data-style="shrink"][data-horizontal] .content::after{
    top: 100%;
    right: auto;
    left: 50%;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
.progress-button[data-style="shrink"][data-horizontal].state-loading{
    -webkit-transform: scaleY(0.3);
    transform: scaleY(0.3);
}
.progress-button[data-style="shrink"][data-horizontal].state-loading .content{
    opacity: 0;
}
.progress-button[data-style="shrink"][data-horizontal].state-success .content, .progress-button[data-style="shrink"][data-horizontal].state-error .content{
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
}
/* Shrink vertical */
/* ====================== */
.progress-button[data-style="shrink"][data-vertical] .content{
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, transform 0.3s;
    transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
}
.progress-button[data-style="shrink"][data-vertical] .content::before, .progress-button[data-style="shrink"][data-vertical] .content::after{
    top: 100%;
    right: auto;
    left: 50%;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
.progress-button[data-style="shrink"][data-vertical].state-loading{
    -webkit-transform: scaleX(0.1);
    transform: scaleX(0.1);
}
.progress-button[data-style="shrink"][data-vertical].state-loading .content{
    opacity: 0;
}
.progress-button[data-style="shrink"][data-vertical].state-success .content, .progress-button[data-style="shrink"][data-vertical].state-error .content{
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
}
/* Rotate bottom 3d */
/* ====================== */
.progress-button[data-style="rotate-angle-bottom"] .progress{
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 20px;

    /*box-shadow: 0 -1px 0 #148544; /* fix the blurriness that causes a gap */
    box-shadow: 0 -1px 0 #fff;
    -webkit-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
}
.progress-button[data-style="rotate-angle-bottom"].state-loading .progress-wrap{
    -webkit-transform: rotateX(45deg);
    transform: rotateX(45deg);
}
/* Rotate top 3d */
/* ====================== */
.progress-button[data-style="rotate-angle-top"] .progress{
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
    height: 20px;
    box-shadow: 0 1px 0 #148544;

    /* fix the blurriness that causes a gap */
    -webkit-transform: rotateX(90deg);
    transform: rotateX(90deg);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}
.progress-button[data-style="rotate-angle-top"].state-loading .progress-wrap{
    -webkit-transform: rotateX(-45deg);
    transform: rotateX(-45deg);
}
/* Rotate left 3d */
/* ====================== */
.progress-button[data-style="rotate-angle-left"] .progress{
    position: absolute;
    top: 0;
    right: 100%;
    width: 20px;
    height: 100%;
    box-shadow: 1px 0 0 #148544;

    /* fix the blurriness that causes a gap */
    -webkit-transform: rotateY(-90deg);
    transform: rotateY(-90deg);
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
}
.progress-button[data-style="rotate-angle-left"].state-loading .progress-wrap{
    -webkit-transform: rotateY(45deg);
    transform: rotateY(45deg);
}
/* Rotate right 3d */
/* ====================== */
.progress-button[data-style="rotate-angle-right"] .progress{
    position: absolute;
    top: 0;
    left: 100%;
    width: 20px;
    height: 100%;
    box-shadow: -1px 0 0 #148544;

    /* fix the blurriness that causes a gap */
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
}
.progress-button[data-style="rotate-angle-right"].state-loading .progress-wrap{
    -webkit-transform: rotateY(-45deg);
    transform: rotateY(-45deg);
}
/* Rotate side down 3d */
/* ====================== */
.progress-button[data-style="rotate-side-down"] .progress{
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 20px;
    -webkit-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.progress-button[data-style="rotate-side-down"].state-loading .progress-wrap{
    -webkit-transform: rotateX(90deg) translateZ(10px);
    transform: rotateX(90deg) translateZ(10px);
}
/* Rotate side up 3d */
/* ====================== */
.progress-button[data-style="rotate-side-up"] .progress{
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
    height: 20px;
    -webkit-transform: rotateX(90deg);
    transform: rotateX(90deg);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.progress-button[data-style="rotate-side-up"].state-loading .progress-wrap{
    -webkit-transform: rotateX(-90deg) translateZ(10px);
    transform: rotateX(-90deg) translateZ(10px);
}
/* Rotate side left 3d */
/* ====================== */
.progress-button[data-style="rotate-side-left"] .progress-wrap{
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
}
.progress-button[data-style="rotate-side-left"] .progress{
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 100%;
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
}
.progress-button[data-style="rotate-side-left"].state-loading .progress-wrap{
    -webkit-transform: translateX(50%) rotateY(90deg) translateZ(10px);
    transform: translateX(50%) rotateY(90deg) translateZ(10px);
}
/* Rotate side right 3d */
/* ====================== */
.progress-button[data-style="rotate-side-right"] .progress-wrap{
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
}
.progress-button[data-style="rotate-side-right"] .progress{
    position: absolute;
    top: 0;
    left: 100%;
    width: 20px;
    height: 100%;
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
}
.progress-button[data-style="rotate-side-right"].state-loading .progress-wrap{
    -webkit-transform: translateX(-50%) rotateY(-90deg) translateZ(10px);
    transform: translateX(-50%) rotateY(-90deg) translateZ(10px);
}
/* Rotate back 3d */
/* ====================== */
.progress-button[data-style="rotate-back"] .progress-wrap{
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
.progress-button[data-style="rotate-back"] .content{
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.progress-button[data-style="rotate-back"] .progress{
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.progress-button[data-style="rotate-back"].state-loading .progress-wrap{
    -webkit-transform: rotateX(180deg) scaleX(0.6) scaleY(0.3);
    transform: rotateX(180deg) scaleX(0.6) scaleY(0.3);
}
/* flip open 3d */
/* ====================== */
.progress-button[data-style="flip-open"] .content{
    z-index: 10;
    -webkit-transition: -webkit-transform 0.2s;
    transition: -webkit-transform 0.2s;
    transition: transform 0.2s;
    transition: transform 0.2s, -webkit-transform 0.2s;
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
}
.progress-button[data-style="flip-open"] .progress{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.progress-button[data-style="flip-open"].state-loading .content{
    -webkit-transform: rotateX(45deg);
    transform: rotateX(45deg);
}
/* slide down */
/* ====================== */
.progress-button[data-style="slide-down"]{
    padding: 0;
    overflow: visible;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.progress-button[data-style="slide-down"] .content{
    z-index: 10;
    padding: 0 60px;
    background: #1d9650;
}
.progress-button[data-style="slide-down"] .progress{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: -webkit-transform 0.2s;
    transition: -webkit-transform 0.2s;
    transition: transform 0.2s;
    transition: transform 0.2s, -webkit-transform 0.2s;
}
.progress-button[data-style="slide-down"].state-loading .progress{
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
}
/* move-up */
/* ====================== */
.progress-button[data-style="move-up"]{
    padding: 0;
    overflow: visible;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.progress-button[data-style="move-up"] .content{
    z-index: 10;
    padding: 0 60px;
    background: #1d9650;
    -webkit-transition: -webkit-transform 0.2s;
    transition: -webkit-transform 0.2s;
    transition: transform 0.2s;
    transition: transform 0.2s, -webkit-transform 0.2s;
}
.progress-button[data-style="move-up"] .progress{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.progress-button[data-style="move-up"].state-loading .content{
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
}
/* top-line */
/* ====================== */
.progress-button[data-style="top-line"] .progress-inner{
    height: 3px;
}
.progress-button[data-style="top-line"] .content::before, .progress-button[data-style="top-line"] .content::after{
    right: auto;
    left: 100%;
    margin-left: 25px;
}
/* lateral-lines */
/* ====================== */
.progress-button[data-style="lateral-lines"] .progress-inner{
    width: 100%;
    border-right: 3px solid #0e7138;
    border-left: 3px solid #0e7138;
    background: transparent;
}
.progress-button[data-style="lateral-lines"] .content::before, .progress-button[data-style="lateral-lines"] .content::after{
    right: auto;
    left: 100%;
    margin-left: 25px;
}
/*Tooltips*/
/*
@styleguide
@title Forms


<div class="psg-subsection">
  <h3 class="psg-h3">Form fields</h3>
  <form>

    <div class="row">
      <div class="col-xs-12 col-md-6">
        <fieldset class="form-group">
          <label for="input1">Input field heading 13px <i class="icon-info" data-toggle="tooltip" data-placement="top" title="Tooltip on top"></i></label>
          <input type="email" class="form-control" id="input1" placeholder="Input field placeholder" >
          <!-- <small class="text-muted">Muted text to be placed here.</small> -->
        </fieldset>
      </div>
      <div class="col-xs-12 col-md-6">
        <fieldset class="form-group">
          <label for="exampleInputPassword1">Password</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </fieldset>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12 col-md-6">
        <fieldset class="form-group">
          <label for="input1">Input field heading 13px <i class="icon-info" data-toggle="tooltip" data-placement="top" title="Tooltip on top"></i></label>
          <input type="email" class="form-control" id="input1" placeholder="Input field placeholder" >
          <!-- <small class="text-muted">Muted text to be placed here.</small> -->
        </fieldset>
      </div>
      <div class="col-xs-12 col-md-6">
        <fieldset class="form-group">
          <label for="exampleSelect1">Example select</label>
          <select class="form-control custom-select" id="exampleSelect1">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
          </select>
        </fieldset>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12 col-md-6">
        <fieldset class="form-group">
          <label for="exampleTextarea">Example textarea</label>
          <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
        </fieldset>
      </div>
      <div class="col-xs-12 col-md-6">
        <fieldset class="form-group">
          <label for="exampleTextarea">Example textarea</label>
          <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
        </fieldset>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12 col-md-12">
        <fieldset class="form-group">
          <div class="radio">
            <label>
              <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
              Option one is this and that&mdash;be sure to include why it's great
            </label>
          </div>
          <div class="radio">
            <label>
              <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
              Option two can be something else and selecting it will deselect option one
            </label>
          </div>
          <div class="radio disabled">
            <label>
              <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
              Option three is disabled
            </label>
          </div>
          <div class="checkbox">
            <label>
              <input type="checkbox"> Check me out
            </label>
          </div>
        </fieldset>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12 col-md-12">
        <fieldset class="form-group">
          <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-radio active">
              <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
            </label>
            <label class="btn btn-radio">
              <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
            </label>
            <label class="btn btn-radio">
              <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
            </label>
          </div>
        </fieldset>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12 col-md-12">
        <button type="submit" class="btn btn-lg progress-button" data-style="rotate-angle-bottom" data-perspective data-horizontal>Submit</button>
        <button type="button" class="btn btn-link">Cancel</button>
      </div>
    </div>

  </form>
</div>


<div class="psg-subsection">
  <h3 class="psg-h3">Switch</h3>

  <div class="switch">
    <span class="switch-base"></span>
    <input type="checkbox" class="isServices" id="servicescheck1" name="roles[services]">
    <span class="switcher"></span>
    <label for="servicescheck1" class="switch-label">Heading to be placed here 14px Heading to be placed here 14px
      <i class="icon-info" data-toggle="tooltip" data-placement="top" title="Tooltip on top"></i>
    </label>
  </div>
  
</div>


*/
/*Theme style starts--------------------------------------------------------*/
/* mixins at top */
/* end mixins */
legend{
    font-size: 0.7em;
    color: #191F44;
    font-family: "Futura W01 Book",sans-serif;
    margin: 7px 20px 10px 0;
    padding: 0 0 0 14px;
    height: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.14);
    position: relative;
}
legend span{
    background: #fff;
    padding: 0 13px;
}
legend:before, legend:after{
    position: absolute;
    left: 0px;
    top: 9px;
    content: '';
    background: rgba(0, 0, 0, 0.14);
    width: 1px;
    height: 7px;
    display: block;
}
legend:after{
    left: auto;
    right: 0;
}
.checkbox-inline span, .radio-inline span{
    padding-left: 4px;
}
fieldset{
    border: 0;
}
input[type="radio"], input[type="checkbox"]{
    position: relative;
}
input[type="radio"]{
    border-radius: 50%;
}
input[type="checkbox"]:checked, input[type="radio"]:checked{
    background: #1B234C;
    border-color: #1B234C;
}
input[type="checkbox"]:checked:focus, input[type="radio"]:checked:focus{
    outline: none;
    border-color: #fff;
}
input[type="checkbox"]:before, input[type="checkbox"]:checked:before, input[type="radio"]:before, input[type="radio"]:checked:before{
    position: absolute;
    top: 1px;
    left: 0;
    width: 100%;
    height: 100%;
    line-height: 11px;
    text-align: center;
    content: "\e652";
    color: #fff;
    font-family: 'icomoon';
    font-size: 0.7rem;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
input[type="radio"]:before, input[type="radio"]:checked:before{
    content: "•";
    top: 0;
    font-size: 0.85rem;
}
.input-group{
    position: relative;
    display: table;
    border-collapse: separate;
}
.input-group .form-control{
    display: table-cell;
    float: left;
    width: 99%;
    position: relative;
}
.input-group-btn{
    position: relative;
    white-space: nowrap;
    vertical-align: middle;
    width: 1%;
    display: inline-block;
}
.btn.search-icon{
    height: 48px;
}
.btn.search-icon:hover .icon-search{
    color: #fff;
}
.search-container{
    padding: 0 60px;
}
.search-container input{
    position: relative;
    left: -12px;
}
/* Inputs / Selects / Forms etc.
// ============================== */
input[type=text], input[type=email], input[type=password], button, input[type=search], input[type=url], input[type=number], textarea, select, input[type=date], input[type=month], input[type=week], input[type^=datetime]{

    /*this causes crazy stuff in firefox, probably best not to set it here */

    /*padding: 0.6em */
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    box-sizing: border-box;
}
/* ==============================
// Styling
// ============================== */
input[type=text], input[type=email], input[type=password], input[type=search], input[type=url], input[type=number], textarea, select, input[type=date], input[type=month], input[type=week], input[type^=datetime], .form-group select, .form-group textarea{
    font-size: 0.875rem;

    /*14px*/
    padding: 0.643em calc(0.875rem * 1.3);
    line-height: 1.3;
    font-family: "Futura W01 Book",sans-serif;
    border-radius: 2px;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    margin-bottom: 0.5em;
    border: none;
    width: 100%;
    border: none;
    background-color: #EAEAEA;
    color: #505050;
}
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, input[type=search]:focus, input[type=url]:focus, input[type=number]:focus, textarea:focus, select:focus, input[type=date]:focus, input[type=month]:focus, input[type=week]:focus, input[type^=datetime]:focus, .form-group select:focus, .form-group textarea:focus{
    outline: none;
    background: #C8E2EF;
}
input:focus::-webkit-input-placeholder, input:focus:-moz-placeholder, input:focus::-moz-placeholder, input:focus:-ms-input-placeholder{
    color: #191F44;
}
form label{
    display: block;
    font-family: "Futura W01 Bold",sans-serif;
    font-size: 0.8125rem;
    margin-bottom: 10px;
    color: #191F44;
}
form .radio label, form .checkbox label{
    font-family: "Futura W01 Book",sans-serif;
    color: #505050;
}
.icon-info{
    width: 15px;
    height: 15px;
    background: #A8C93A;
    display: inline-block;
    border-radius: 50%;
}
.icon-info:before{
    color: #fff;
    text-align: center;
    display: block;
    margin: 0 auto;
    font-size: 11px;
    line-height: 1.5;
    position: relative;
}
.label--solid{
    font-size: 0.6em;
    padding: 0.43em 0.9em 0.33em 0.9em !important;
    border-radius: 0 !important;
    display: inline-block !important;
}
.label--primary{
    background: #191F44;
    color: #fff;
}
.label--highlight{
    background: #06ACFD;
    text-shadow: none;
    color: #fff;
}
.label--default{
    color: #8a8a8a;
    text-shadow: none;
    background: #EAEAEA;
}
button{
    line-height: normal;
}
button:focus{
    border: 1px solid darken(#06ACFD, 8);
    outline: none;
}
/*
button, input[type=submit], input[type=reset] {
  @extend %button;
  @extend %button--default;
}*/
.label + .select, .label + .textarea{
    margin-top: -2px;
}
.textarea{
    resize: vertical;
    padding: 6px 12px;
    min-height: 110px;
}
.select{
    position: relative;
    height: 42px;
    margin-bottom: 10px;
    clear: both;
}
.select select{
    height: 100%;
    width: 100% !important;
    font-size: 16px;
}
.select select:empty + .arrow{
    display: none;
}
.custom-select{
    border-radius: 2px;
}
/* Apple style Switch*/
.switch{
    display: inline-block;
    position: relative;
    border: 0px;
    font-size: 0.875rem;
    font-family: "Futura W01 Book",sans-serif;
    color: #505050;
}
.switch .switch-base{
    display: block;
    position: absolute;
    left: 10px;
    width: 20px;
    height: 25px;
    background: #D4DEE3;
    border: 1px solid rgba(119, 102, 102, 0.13);
    border-width: 1px 0 1px;

    /*Background on left position*/

    /*Background on right position*/
}
.switch .switch-base:before{
    content: '' !important;
    width: 25px;
    height: 25px;
    position: absolute;
    left: -10px;
    top: -1px;
    border: 1px solid rgba(119, 102, 102, 0.13);
    border-width: 1px 1px 1px 0;
    background: #D4DEE3 !important;

    /*+vendor(border-radius, 50%);*/
    border-radius: 50%;
    z-index: -1;
}
.switch .switch-base:after{
    content: '' !important;
    width: 25px;
    height: 25px;
    position: absolute;
    right: -10px;
    top: -1px;
    border: 1px solid rgba(119, 102, 102, 0.13);
    border-width: 1px 1px 1px 0;
    background: #D4DEE3 !important;

    /*+vendor(border-radius, 50%);*/
    border-radius: 50%;
    z-index: -1;
}
.switch input{
    border: none !important;
    position: absolute !important;
    height: 25px;
    width: 40px !important;
    left: 0px;
    top: 0px;
    background: none !important;
    z-index: 10;
    cursor: pointer;
    opacity: 0;
}
.switch input:before{
    display: none !important;
}
.switch input:checked + .switcher{
    left: 18px;
    background: #06ACFD !important;
}
.switch input:checked + .switcher:before{
    content: '\e913';
    color: #fff;
}
.switch input:checked + .switcher + .switch-label{

    /*color: $black;*/
    opacity: 1;
}
.switch input:disabled + .switcher{
    background: #F0F0F1;

    /*+vendor(box-shadow, 0px 2px 4px rgba(100,100,100,0.46));*/
}
/*opacity: 0.7;*/
.switch input:disabled + .switcher + .switch-label{
    cursor: not-allowed;
}
.switch input:disabled + .switcher:before{
    content: "\d914";

    /*color: $grey;*/
}
.switch .switch-label{
    float: left;
    margin-left: 50px;
    line-height: 1.8;
    color: #505050;
    opacity: .5;
}
.switch .switcher{
    background: #D0021B !important;
    color: #fff !important;

    /*border: 1px solid #fff;*/

    /*+vendor(box-shadow, 0px 2px 4px rgba(113,0,87,0.50));*/

    /*+vendor(border-radius, 50%);*/
    border-radius: 50%;
    -webkit-transition: .3s all;
    transition: .3s all;

    /*+vendor(transition, 0.3s all);*/
    width: 18px;
    height: 18px;
    position: absolute;
    left: 4px;
    margin-top: 3px;
    z-index: 9;
}
.switch .switcher:before{
    content: "\e914";
    font-family: 'icomoon';
    line-height: 2;
    font-size: 0.45em;
    position: relative;
    margin: 0 auto;
    text-align: center;
    display: block;
}
.switch .icon-info{
    position: relative;
    top: 1px;
    margin-left: 10px;
}
.switch.disabled .switcher{
    background: #F0F0F1;
}
/*opacity: 0.1;*/
.switch.disabled .switcher + .switch-label{
    color: $coolgrey2;

    /*+vendor(text-shadow, none);*/
    cursor: not-allowed;
}
.switch.disabled .switcher:before{
    content: "\e64f";
    color: #EAEAEA;
}
.switch.checked .switcher{
    left: 3px;
} 
/*Vocus table styles*/ 
/* 
@styleguide
@title Tables

<table class="table table-vocus">
  <thead>
    <tr>
      <th>Quote status</th>
      <th>Quote name / Date created</th>
      <th>Client</th>
      <th>Client / Reference no.</th>
      <th>Setup fee / Monthly fee</th>
    </tr>
  </thead>
  <tbody>

    <tr>
      <th scope="row"><i class="icon-tick"></i></th>
      <td><span class="table-info-bold">Tim's quote</span><br>Mar 9, 2015 | 2:25pm</td>
      <td>A1 Communications lorem ipsum lorem...</td>
      <td>VOC-QU12345678</td>
      <td>$9,999,999.00<br>$9,999,999.00</td>

      <td class="table-btn">
        <button type="button" class="btn btn-default btn-sm btn-icon">
          <i class="icon-download"></i>
        </button>

        <div class="dropdown dropdown-single">
          <button class="btn btn-sm dropdown-toggle blue" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          </button>
          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu1">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </div>
      </td>
    </tr>

    <tr>
      <th scope="row"><i class="icon-tick"></i></th>
      <td><span class="table-info-bold">Tim's quote</span><br>Mar 9, 2015 | 2:25pm</td>
      <td>A1 Communications lorem ipsum lorem...</td>
      <td>VOC-QU12345678</td>
      <td>$9,999,999.00<br>$9,999,999.00</td>

      <td class="table-btn">
        <button type="button" class="btn btn-default btn-sm btn-icon">
          <i class="icon-download"></i>
        </button>

        <div class="dropdown dropdown-single">
          <button class="btn btn-sm dropdown-toggle blue" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu1">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </div>
      </td>
    </tr>

  </tbody>
</table>
*/ 
/*Basic Bootstrap table*/ 
.table{
    width: 100%;
    max-width: 100%;
    margin-bottom: $spacer;
} 
.table th, .table td{
    padding: .75rem;
    line-height: $line-height;
    vertical-align: top;
    border-top: $border-width solid $gray-lighter;
} 
.table thead th{
    vertical-align: bottom;
    border-bottom: (2 * $border-width) solid $gray-lighter;
} 
.table tbody + tbody{
    border-top: (2 * $border-width) solid $gray-lighter;
} 
.table .table{
    background-color: $body-bg;
} 
/*Vocus style*/ 
.table.table-vocus{
    width: 100%;
    max-width: 100%;
    margin-bottom: $spacer;
    font-family: "Futura W01 Book",sans-serif;
    font-size: 0.875rem;
} 
.table.table-vocus th, .table.table-vocus td{
    border: none;
} 
.table.table-vocus thead th{
    border: none;
} 
.table.table-vocus tbody + tbody{
    border: none;
} 
.table.table-vocus thead th{
    font-size: 0.6875rem;
    padding: 5px 20px;
    font-weight: normal;
} 
.table.table-vocus tbody tr{
    background: #F0F0F1;
    margin-bottom: 10px;
    border-bottom: 10px solid #fff;
    border-radius: 2px;
} 
.table.table-vocus tbody tr th, .table.table-vocus tbody tr td{
    padding: 10px 20px;
    vertical-align: middle;
} 
.table.table-vocus tbody tr th i, .table.table-vocus tbody tr td i{} 
.table.table-vocus tbody tr th i.icon-tick, .table.table-vocus tbody tr td i.icon-tick{
    color: #06ACFD;
} 
.table.table-vocus tbody tr th i.icon-x, .table.table-vocus tbody tr td i.icon-x{
    color: #D0021B;
} 
.table.table-vocus tbody tr th .table-info-bold, .table.table-vocus tbody tr td .table-info-bold{
    font-family: "Futura W01 Bold",sans-serif;
    color: #191F44;
    font-size: 1rem;
} 
.table.table-vocus .table-btn{
    text-align: right;
} 
/*Condensed table w/ half padding*/ 
.table-sm th, .table-sm td{
    padding: .3rem;
} 
/*Firefox and fieldsets
Firefox has some awkward fieldset styling involving width that interferes with the responsive table. This cannot be overridden without a Firefox-specific hack that we don’t provide in Bootstrap:*/ 
/*https://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content/17863685#17863685*/ 
@-moz-document url-prefix(){
    fieldset{
        display: table-cell;
    }
} 
/*Bordered version

Add borders all around the table and between all the columns.*/ 
.table-bordered{
    border: $border-width solid $gray-lighter;
} 
.table-bordered th, .table-bordered td{
    border: $border-width solid $gray-lighter;
} 
.table-bordered thead th, .table-bordered thead td{
    border-bottom-width: (2 * $border-width);
} 
/*Zebra-striping

Default zebra-stripe styles (alternating gray and transparent backgrounds)*/ 
.table-striped tbody tr:nth-of-type(odd){
    background-color: #f9f9f9;
} 
/*Hover effect

Placed here since it has to come after the potential zebra striping*/ 
.table-hover tbody tr{
    @include hover{
        background-color: #f5f5f5;
    }
} 
/*Table backgrounds

Exact selectors below required to override `.table-striped` and prevent
inheritance to nested tables.*/ 
/*Generate the contextual variants*/ 
@include table-row-variant(active, $table-bg-active); 
@include table-row-variant(success, $state-success-bg); 
@include table-row-variant(info, $state-info-bg); 
@include table-row-variant(warning, $state-warning-bg); 
@include table-row-variant(danger, $state-danger-bg); 
/*Responsive tables

Wrap your tables in `.table-responsive` and we'll make them mobile friendly
By enabling horizontal scrolling. Only applies <768px. Everything above that
will display normally.*/ 
.table-responsive{
    display: block;
    width: 100%;
    min-height: 0.01%;
    //: //github.com/twbs/bootstrap/issues/14837)
  overflow-x: auto;

    /*TODO: find out if we need this still.
  
  border: $table-border-width solid $table-border-color;
  -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057*/
} 
.thead-inverse th{
    color: #fff;
    background-color: $gray-dark;
} 
.thead-default th{
    color: $gray;
    background-color: $gray-lighter;
} 
.table-inverse{
    color: $gray-lighter;
    background-color: $gray-dark;
} 
.table-inverse th, .table-inverse td, .table-inverse thead th{
    border-color: $gray;
} 
.table-inverse.table-bordered{
    border: 0;
} 
.table-reflow thead{
    float: left;
} 
.table-reflow tbody{
    display: block;
    white-space: nowrap;
} 
.table-reflow th, .table-reflow td{
    border-top: $border-width solid $gray-lighter;
    border-left: $border-width solid $gray-lighter;
} 
.table-reflow th:last-child, .table-reflow td:last-child{
    border-right: $border-width solid $gray-lighter;
} 
.table-reflow thead, .table-reflow tbody, .table-reflow tfoot{} 
.table-reflow thead:last-child tr:last-child th, .table-reflow thead:last-child tr:last-child td, .table-reflow tbody:last-child tr:last-child th, .table-reflow tbody:last-child tr:last-child td, .table-reflow tfoot:last-child tr:last-child th, .table-reflow tfoot:last-child tr:last-child td{
    border-bottom: $border-width solid $gray-lighter;
} 
.table-reflow tr{
    float: left;
} 
.table-reflow tr th, .table-reflow tr td{
    display: block !important;
    border: $border-width solid $gray-lighter;
} 
/*
@styleguide
@title Tooltip

<div class="">
HELLO
</div>


*/ 
/*Base class*/ 
.tooltip{
    position: absolute;
    z-index: 1070;
    display: block;

    /*Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
  So reset our font and text properties to avoid inheriting weird values.*/

    /*@include reset-text();*/

    /*font-size: $font-size-sm;*/
    opacity: 0;
} 
.tooltip.in{
    opacity: .9;
} 
.tooltip.tooltip-top, .tooltip.bs-tether-element-attached-bottom{
    padding: 5px 0;
    margin-top: -3px;
} 
.tooltip.tooltip-top .tooltip-arrow, .tooltip.bs-tether-element-attached-bottom .tooltip-arrow{
    bottom: 0;
    left: 50%;
    margin-left: -5px;
    border-width: 5px 5px 0;
    border-top-color: #000;
} 
.tooltip.tooltip-right, .tooltip.bs-tether-element-attached-left{
    padding: 0 5px;
    margin-left: 3px;
} 
.tooltip.tooltip-right .tooltip-arrow, .tooltip.bs-tether-element-attached-left .tooltip-arrow{
    top: 50%;
    left: 0;
    margin-top: -5px;
    border-width: 5px 5px 5px 0;
    border-right-color: #000;
} 
.tooltip.tooltip-bottom, .tooltip.bs-tether-element-attached-top{
    padding: 5px 0;
    margin-top: 3px;
} 
.tooltip.tooltip-bottom .tooltip-arrow, .tooltip.bs-tether-element-attached-top .tooltip-arrow{
    top: 0;
    left: 50%;
    margin-left: -5px;
    border-width: 0 5px 5px;
    border-bottom-color: #000;
} 
.tooltip.tooltip-left, .tooltip.bs-tether-element-attached-right{
    padding: 0 5px;
    margin-left: -3px;
} 
.tooltip.tooltip-left .tooltip-arrow, .tooltip.bs-tether-element-attached-right .tooltip-arrow{
    top: 50%;
    right: 0;
    margin-top: -5px;
    border-width: 5px 0 5px 5px;
    border-left-color: #000;
} 
// Wrapper for the tooltip content
.tooltip-inner{
    max-width: 200px;
    padding: 3px 8px;
    color: #fff;
    text-align: center;
    background-color: #000;
    @include border-radius($border-radius);
} 
// Arrows
.tooltip-arrow{
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
} 
/*
@styleguide
@title Navs


<div class="sub-section">
  <h3 class="psg-h3">Nav Tabs</h3>
  <div class="psg-bg">
    <div class="psg-article">
      <ul class="nav nav-tabs">
        <li class="nav-item">
          <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Another link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</div>

<div class="sub-section">
  <h3 class="psg-h3">Loader</h3>
  <div class="loader">Loading...</div>
</div>


*/ 
/*Theme style starts--------------------------------------------------------*/ 
/* Navigation
// ============ */ 
.nav{
    list-style: none;
    margin-left: 0;
} 
.nav > li, .nav li > a{
    display: inline-block;
    display: inline;
    zoom: 1;
} 
.nav--tabs:after,
.nav-tabs:after{
    content: '';
    display: table;
    clear: both;
} 
.nav--tabs, .nav-tabs{

    /*border-bottom: 1px solid $borders;*/
    margin-bottom: 0;
    background: #D4DEE3;
} 
.nav--tabs > li, .nav-tabs > li{
    float: left;
    position: relative;
    display: block;
    margin-bottom: -1px;
    font-family: "Futura W01 Book",sans-serif;
    text-transform: uppercase;
    font-size: 0.8em;
    letter-spacing: 1px;
} 
.nav--tabs > li .nav-link, .nav-tabs > li .nav-link{
    border: none;
    border-bottom: 0;
    color: #505050;
    font-size: 1rem;
    font-family: "Futura W01 Bold",sans-serif;
    display: block;
    padding: 1em 1.2em 0.5em;
    border-radius: 2px 2px 0 0;
    -webkit-transition: 0.3s all;
    transition: 0.3s all;
} 
.nav--tabs > li .nav-link:hover, .nav-tabs > li .nav-link:hover{
    color: #505050;
    background: #fff;
} 
.nav--tabs > li .nav-link.active, .nav-tabs > li .nav-link.active{
    color: #191F44;
    font-weight: 400;
    margin-bottom: 0;
    border-color: rgba(0, 0, 0, 0.14);
    border-bottom: 0;

    /*@mixin gradient-3stop-vertical $lightgrey, $white, $white, 30%;*/
} 
.tab-pane{
    display: none;
    padding: 2em 0;
} 
.tab-pane.active{
    display: block;
} 
.nav-pills{
    text-transform: uppercase;
    font-size: 0.75em;
    font-family: "Futura W01 Book",sans-serif;
} 
.nav-pills .nav-link{
    padding: 0.25em 1.05em 0.15em;
    -webkit-transition: 0.3s all;
    transition: 0.3s all;
} 
.nav-pills .nav-link:active, .nav-pills .nav-link:link{
    color: #191F44;
} 
.nav-pills .nav-link.active, .nav-pills .nav-link.active:focus{
    background: #06ACFD;
    color: #fff !important;
} 
.nav-pills .nav-link.active:hover, .nav-pills .nav-link.active:focus:hover{
    background: #191F44;
} 
.nav-pills .nav-link:hover{
    background: #F0F0F1;
} 
/*.dropdown-menu{
    border-radius: $borderradius;
    border: none;
    margin-top: -1px;
    background: $darkgreyblue;
    box-shadow: 0 0 4px rgba(0,0,0,0.14);
    font-family: $regularweight;
    font-size: .875rem; 
    padding: 0;

    .dropdown-item{
        color: $white;
        padding: 0.5em 1em;

        &:hover{
            background: $blue;
        }
        a{
            color: $darkgrey;
        }
    }
    
}*/ 
.divider{
    height: 1px;
    overflow: hidden;
    background-color: ;
    margin: 0;
}
/* Design Elements
// ============ */
.well, .card{

    /* background-color: ;*/
    padding: 20px 18px;
    border-width: 0 0 1px 0;
    margin: 0;
}
.well .border--right, .card .border--right{
    border-right: 1px solid #EAEAEA;
}
.well li, .card li{
    list-style-type: none;
}
ul.well li{
    line-height: 0.95em;
    margin: 0.25em 0 0.9em;
}
ul.well li pre{
    margin: 7px 0 37px;
}
.card-inverse{
    background: #191F44;
}
.card-inverse h1, .card-inverse .h1, .card-inverse h2, .card-inverse .h2, .card-inverse h3, .card-inverse .h3, .card-inverse h4, .card-inverse .h4, .card-inverse h5, .card-inverse .h5, .card-inverse h6, .card-inverse .h6{
    color: #fff;
}
.border--right + div{
    padding-left: 31.991999999999997px;
}
.highlightme{
    border-left-color: #191F44 !important;

    /*  animation: highlighter 0.9s ease-in-out;
  background: #fcf8e3;
  padding: 0.7em 0.4em 0.05em 0.4em !important; 
  margin-left: -0.4em;
*/
}
.locase{
    text-transform: lowercase !important;
}
.profile-image{
    border-radius: 50%;
    width: 31px;
    height: 31px;
    position: relative;
    display: inline-block;
    margin: auto auto 30px -10px;
    text-align: center;
}
.profile-image .gravatar{
    position: absolute;
    top: -2px;
    left: -1px;
    width: 154%;
    height: 154%;
    z-index: 3;
    border-radius: 50%;
    background-size: cover !important;
}
.profile-image .initials{
    font-family: "Futura W01 Bold",sans-serif;
    font-size: 0.85em;
    line-height: 2.2;
    letter-spacing: -4px;
    text-transform: uppercase;
    width: 100%;
    height: 100%;
    position: relative;
    left: 24%;
    top: 22%;
    display: block;
    border-radius: 50%;
    text-indent: -4px;
    text-align: center;
    background-size: cover;
    background-color: #191F44;
    color: rgba(255,255,255,0.74);
}
.boxshadow{
    box-shadow: 1px 1px 3px 2;
}
.bracket-title{
    font-size: 0.7em;
    color: #191F44;
    font-family: "Futura W01 Book",sans-serif;
    margin: 7px 20px 5px 0;
    padding: 0 0 0 14px;
    height: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.14);
    position: relative;
}
.bracket-title span{
    background: #FCFCFC;
    padding: 0 13px;
}
.bracket-title span:before, .bracket-title span:after{
    position: absolute;
    left: 0px;
    top: 9px;
    content: '';
    background: rgba(0, 0, 0, 0.14);
    width: 1px;
    height: 7px;
    display: block;
}
.bracket-title span:after{
    left: auto;
    right: 0;
}
/*
@keyframes highlighter {
  0%, 80%, 100% { 
    background: #fcf8e3;
    opacity: 0.5;
  } 40% { 
    background: #fff;
    opacity: 1;
  }
}*/
/* Loaders
// ============ */
.loader{
    color: #06ACFD;
    font-size: 30px;
    text-indent: -9999em;
    overflow: hidden;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    margin: 72px auto;
    position: relative;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load6 1.7s infinite ease;
    animation: load6 1.7s infinite ease;
}
@-webkit-keyframes load6{
    0%{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    5%, 95%{
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    10%, 59%{
        box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
    }
    20%{
        box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
    }
    38%{
        box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
    }
    100%{
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
}
@keyframes load6{
    0%{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    5%, 95%{
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    10%, 59%{
        box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
    }
    20%{
        box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
    }
    38%{
        box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
    }
    100%{
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
}
/*$highlightcolouropaque: rgba(44,175,249,0.46);

@font-face {
	font-family: 'icomoon';
	src:url('/fonts/icomoon.eot?-9u9pup');
	src:url('/fonts/icomoon.eot?#iefix-9u9pup') format('embedded-opentype'),
		url('/fonts/icomoon.woff?-9u9pup') format('woff'),
		url('/fonts/icomoon.ttf?-9u9pup') format('truetype'),
		url('/fonts/icomoon.svg?-9u9pup#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
	
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.spinner .icon-vocusv{
  position: absolute;
  top: 27%;
  left: 27%;
  z-index: 99;
  font-size: 1.5rem;
  padding-left: 0.03em;
	.card-inverse &{
		color: $white;	
	}
}
.spinner {
  margin: auto;
  width: 40px;
  height: 40px;
  position: relative;
  opacity: 1;
  transition: 0.3s all;
  + .content{
		font-size: 0.7em;
		text-transform: lowercase;
	}
	
	&.spinner--small{
		width: 1.9rem;
    height: 1.9rem;
		transform: scale(0.65);
	}
}



.triplevocus{
  .container1 > div, .container2 > div, .container3 > div,
  .container4 > div, .container5 > div, .container6 > div, .container7 > div  {
    width: 8px;
    height: 8px;
    background-color: $primarycolour;
    border-radius: 100%;
    position: absolute;
    animation: bouncedelay 0.9s infinite ease-in-out;

    animation-fill-mode: both;
		.card-inverse &{
			background-color: $white;
		}
  }
	&.spinner--small{
		.container1 > div, .container2 > div, .container3 > div,
  	.container4 > div, .container5 > div, .container6 > div, .container7 > div  {
			width: 6px;
			height: 6px;	
		}
	}
  .icon-vocusv{
    color: $primarycolour;
  }
  &.inverted{
    .container1 > div, .container2 > div, .container3 > div,
    .container4 > div, .container5 > div, .container6 > div, .container7 > div {
      background-color: $white;
    }
    .icon-vocusv{
      color: $white
    }
  }
}

.dualvocus{
	.container1 > div, .container2 > div, .container3 > div,
	.container4 > div, .container5 > div, .container6 > div, .container7 > div  {
	  width: 6px;
	  height: 6px;
	  background-color: $primarycolour;
	  border-radius: 100%;
	  position: absolute;
	  animation: bouncedelay 1.4s infinite ease-in-out;
	  animation-fill-mode: both;
	}
  &.inverted{
    .container1 > div, .container2 > div, .container3 > div,
    .container4 > div, .container5 > div, .container6 > div, .container7 > div {
      background-color: $white;
    }
    .icon-vocusv{
      color: $white
    }
  }
}


.smartblobvocus{
	.icon-vocusv{color: #fff}
	.container1 > div, .container2 > div, .container3 > div,
	.container4 > div, .container5 > div, .container6 > div, .container7 > div  {
	  width: 36px;
	  height: 25px;
	  background-color: $highlightcolouropaque;
	  border-radius: 60%;
	  position: absolute;
	  animation: bouncedelay 2.8s infinite ease-in-out;
	  animation-fill-mode: both;
	}
}


.classicvocus{
	.container1 > div, .container2 > div, .container3 > div,
	.container4 > div, .container5 > div, .container6 > div, .container7 > div  {
	  width: 6px;
	  height: 6px;
	  background-color: $primarycolour;
	  border-radius: 100%;
	  position: absolute;
	  animation: bouncedelay 2.8s infinite ease-in-out;
	  animation-fill-mode: both;
	}
	
	&.spinner--small{
		.container1 > div, .container2 > div, .container3 > div,
  	.container4 > div, .container5 > div, .container6 > div, .container7 > div  {
			width: 4px;
			height: 4px;	
		}
	}
}

.organicvocus{
	.icon-vocusv{color: #fff}
	.container1 > div, .container2 > div, .container3 > div,
	.container4 > div, .container5 > div, .container6 > div, .container7 > div  {
	  width: 18px;
	  height: 29px;
	  background-color: $highlightcolouropaque;
	  border-radius: 100%;
	  position: absolute;
	  animation: bouncedelay 7.6s infinite ease-in-out;
	  animation-fill-mode: both;
	}
}

.outlineclassicvocus{
	.container1 > div, .container2 > div, .container3 > div,
	.container4 > div, .container5 > div, .container6 > div, .container7 > div  {
	  width: 8px;
	  height: 8px;
	  background-color: none;
	  border: 1px solid rgba(1, 13, 74, 0.61);
	  border-radius: 100%;
	  position: absolute;
	  animation: bouncedelay 2.8s infinite ease-in-out;
	  animation-fill-mode: both;
	}
	
	&.spinner--small{
		.container1 > div, .container2 > div, .container3 > div,
  	.container4 > div, .container5 > div, .container6 > div, .container7 > div  {
			width: 6px;
			height: 6px;	
		}
	}
}

.technicalbeautyvocus{
	.icon-vocusv{color: #fff}
	.container1 > div, .container2 > div, .container3 > div,
	.container4 > div, .container5 > div, .container6 > div, .container7 > div  {
	  width: 36px;
	  height: 26px;
	  background-color: rgba(1, 13, 74, 0.20);
	  border: 1px solid rgba(1, 13, 74, 0.61);
	  border-radius: 73%;
	  position: absolute;
	  animation: bouncedelay 3.6s infinite ease-in-out;
	  animation-fill-mode: both;
	}
}

.vocusstar{
	.container1 > div, .container2 > div, .container3 > div,
	.container4 > div, .container5 > div, .container6 > div, .container7 > div  {
	  width: 3px;
	  height: 7px;
	  background-color: rgba(1, 13, 74, 0.20);
	  border: 1px solid rgba(1, 13, 74, 0.61);
	  border-radius: 73%;
	  position: absolute;
	  animation: bouncedelay 3.6s infinite ease-in-out;
	  animation-fill-mode: both;
	}
}

.vocusfuture1{
	.icon-vocusv{color: #fff}
	.container1 > div, .container2 > div, .container3 > div,
	.container4 > div, .container5 > div, .container6 > div, .container7 > div  {
	  width: 47px;
	  height: 47px;
	  background: radial-gradient(rgba(26, 35, 77, 0.1), rgba(26, 35, 77, 0.6));
	  border-radius: 73%;
	  position: absolute;
	  animation: bouncedelay 12.8s infinite ease-in-out;
	  animation-fill-mode: both;
	}
}

.vocusfuture2{
	margin-top: -40px;
	.container1 > div, .container2 > div, .container3 > div,
	.container4 > div, .container5 > div, .container6 > div, .container7 > div  {
	  width: 7px;
	  height: 7px;
		border: 1px solid rgba(255, 255, 255, 0.91);
	  border-radius: 100%;
	  position: absolute;
	  animation: bouncedelay 2.8s infinite ease-in-out;
	  animation-fill-mode: both;
	}
}

.vocusatom1{
	.icon-vocusv{color: #fff}
	.container1 > div, .container2 > div, .container3 > div,
	.container4 > div, .container5 > div, .container6 > div, .container7 > div  {
	  width: 47px;
	  height: 27px;
	  background: linear-gradient(rgba(26, 35, 77, 0.1), rgba(26, 35, 77, 0.6));
	  border-radius: 73%;
	  position: absolute;
	  animation: bouncedelay 12.8s infinite ease-in-out;
	  animation-fill-mode: both;
	}
}

.vocusatom2{
	margin-top: -40px;
	.container1 > div, .container2 > div, .container3 > div,
	.container4 > div, .container5 > div, .container6 > div, .container7 > div  {
	  width: 17px;
	  height: 57px;
		border: 14px dashed rgba(1, 13, 74, 0.61);
	  border-radius: 60%;
	  position: absolute;
	  animation: bouncedelay 1.4s infinite ease-in-out;
	  animation-fill-mode: both;
	}
}

.deathstar1{
	.icon-vocusv{color: #fff}
	.container1 > div, .container2 > div, .container3 > div,
	.container4 > div, .container5 > div, .container6 > div, .container7 > div  {
	  width: 33px;
	  height: 17px;
	  background: linear-gradient(rgba(26, 35, 77, 0.1), rgba(26, 35, 77, 0.6));
	  border-radius: 73%;
	  position: absolute;
	  animation: bouncedelay 12.8s infinite ease-in-out;
	  animation-fill-mode: both;
	}
}

.deathstar2{
	margin-top: -44px;
	.container1 > div, .container2 > div, .container3 > div,
	.container4 > div, .container5 > div, .container6 > div, .container7 > div  {
	  width: 24px;
	  height: 47px;
		border: 20px dotted rgba(1, 13, 74, 0.61);
	  border-radius: 60%;
	  position: absolute;
	  animation: bouncedelay 9.26s infinite ease-in-out;
	  animation-fill-mode: both;
	}
}

.vocusvoyager{
	.container1 > div, .container2 > div, .container3 > div,
	.container4 > div, .container5 > div, .container6 > div, .container7 > div  {
	  width: 12px;
	  height: 8px;
	  background: linear-gradient(rgba(26, 35, 77, 0.1), rgba(26, 35, 77, 0.6));
	  border-radius: 73%;
	  position: absolute;
	  animation: bouncedelay 1.4s infinite ease-in-out;
	  animation-fill-mode: both;
	}
}


.spinner .spinner-container {
  position: absolute;
  width: 100%;
  height: 100%;
}

.container2 {
  transform: rotateZ(51.4285deg);
}

.container3 {
  transform: rotateZ(102.8571deg);
}

.container4 {
  transform: rotateZ(154.2857deg);
}

.container5 {
  transform: rotateZ(205.7142deg);
}

.container6 {
  transform: rotateZ(257.1428deg);
}

.container7 {
  transform: rotateZ(308.5714deg);
}


.circle1 { top: 0; left: 9.5%; }
.circle2 { top: 0; right: 9.5%; }

.container1 .circle1 {
  animation-delay: -2.8s !important;

}
.container7 .circle2 {
  animation-delay: -2.6s !important;

}

.container2 .circle1 {
  animation-delay: -2.4s !important;
  
}

.container1 .circle2 {
  animation-delay: -2.2s !important;

}

.container3 .circle1 {
  animation-delay: -2.0s !important;

}

.container2 .circle2 {
  animation-delay: -1.8s !important;
}

.container4 .circle1 {
  animation-delay: -1.6s !important;
}

.container3 .circle2 {
  animation-delay: -1.4s !important;
}

.container5 .circle1 {
  animation-delay: -1.2s !important;
}

.container4 .circle2 {
  animation-delay: -1.0s !important;
}

.container6 .circle1 {
  animation-delay: -0.8s !important;
}

.container5 .circle2 {
  animation-delay: -0.6s !important;
}

.container7 .circle1 {
  animation-delay: -0.4s !important;
}

.container6 .circle2 {
  animation-delay: -0.2s !important;
}


@keyframes bouncedelay {
  0%, 80%, 100% { 
    transform: scale(0.1);
    opacity: 0.5;
  } 40% { 
    transform: scale(1.0);
    opacity: 1;
  }
}*/ 


/* Project Specific
/* Anything specific for the project at hand
//* ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ */

/*
@styleguide

@title Icons

Use the icon classes on `<i>` & `<span>` elements.

<i class="icon-warning"></i>
<i class="icon-one"></i>
<i class="icon-progress-active"></i>
<i class="icon-progress-late"></i>
<i class="icon-progress-skipped"></i>
<i class="icon-progress-plus"></i>
<i class="icon-progress-stop"></i>
<i class="icon-progress-complete"></i>
<i class="icon-progress-incomplete"></i>
<i class="icon-search"></i>
<i class="icon-menu"></i>
<i class="icon-atoms"></i>
<i class="icon-australia"></i>
<i class="icon-badge"></i>
<i class="icon-bank"></i>
<i class="icon-battery"></i>
<i class="icon-book"></i>
<i class="icon-boxer"></i>
<i class="icon-brains"></i>
<i class="icon-brochure"></i>
<i class="icon-circuit"></i>
<i class="icon-clock"></i>
<i class="icon-cloning"></i>
<i class="icon-clouds"></i>
<i class="icon-cloudstream"></i>
<i class="icon-connectivity"></i>
<i class="icon-crystalball"></i>
<i class="icon-demagnify"></i>
<i class="icon-document"></i>
<i class="icon-earth"></i>
<i class="icon-electric"></i>
<i class="icon-ethernet"></i>
<i class="icon-exhibition"></i>
<i class="icon-fastclouds"></i>
<i class="icon-fibre"></i>
<i class="icon-filofax"></i>
<i class="icon-flag"></i>
<i class="icon-gavel"></i>
<i class="icon-handshake"></i>
<i class="icon-heart"></i>
<i class="icon-infinity"></i>
<i class="icon-left-justify"></i>
<i class="icon-lightbulb"></i>
<i class="icon-list"></i>
<i class="icon-literature"></i>
<i class="icon-marker"></i>
<i class="icon-megaphone"></i>
<i class="icon-mixer"></i>
<i class="icon-newspaper"></i>
<i class="icon-nz"></i>
<i class="icon-party"></i>
<i class="icon-placemarker"></i>
<i class="icon-plugin"></i>
<i class="icon-profile"></i>
<i class="icon-puzzle"></i>
<i class="icon-racks"></i>
<i class="icon-rescue"></i>
<i class="icon-roads"></i>
<i class="icon-rocket"></i>
<i class="icon-router"></i>
<i class="icon-security"></i>
<i class="icon-siren"></i>
<i class="icon-sissors"></i>
<i class="icon-tags"></i>
<i class="icon-tie"></i>
<i class="icon-twohalves"></i>
<i class="icon-user"></i>
<i class="icon-venn"></i>
<i class="icon-video"></i>
<i class="icon-voice"></i>
<i class="icon-vocusv"></i>
<i class="icon-favicon"></i>
<i class="icon-vocus-rings"></i>
<i class="icon-arrow-left-circle"></i>
<i class="icon-arrow-right-circle"></i>
<i class="icon-arrow-up-circle"></i>
<i class="icon-arrow-down-circle"></i>
<i class="icon-chevron-right"></i>
<i class="icon-save"></i>
<i class="icon-info"></i>
<i class="icon-star"></i>
<i class="icon-settings"></i>
*/

/* hidden ones
<i class="icon-apidocs"></i>
<i class="icon-npm"></i>
<i class="icon-vocus"></i>
*/

@font-face{
    font-family: 'icomoon';
    src: url('../fonts/icomoon.eot?4qugvq');
    src: url('../fonts/icomoon.eot?4qugvq#iefix') format('embedded-opentype'),
        url('../fonts/icomoon.ttf?4qugvq') format('truetype'),
        url('../fonts/icomoon.woff?4qugvq') format('woff'),
        url('../fonts/icomoon.svg?4qugvq#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"], [class*=" icon-"], .icomoon{
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-tick:before{
    content: "\e913";
}

.icon-x:before{
    content: "\e914";
}

.icon-info:before{
    content: "\e900";
}

.icon-billing:before{
    content: "\e901";
}

.icon-briefcase:before{
    content: "\e902";
}

.icon-clock:before{
    content: "\e903";
}

.icon-dash:before{
    content: "\e904";
}

.icon-deliver:before{
    content: "\e905";
}

.icon-door:before{
    content: "\e906";
}

.icon-download:before{
    content: "\e907";
}

.icon-drag:before{
    content: "\e908";
}

.icon-minus:before{
    content: "\e909";
}

.icon-pen:before{
    content: "\e90a";
}

.icon-plus:before{
    content: "\e90b";
}

.icon-quote:before{
    content: "\e90c";
}

.icon-refresh:before{
    content: "\e910";
}

.icon-search:before{
    content: "\e911";
}

.icon-user:before{
    content: "\e912";
}

/* aditions */

/*.icon-plus{
  position: relative;
  left: 0;
  top: 3px;
  margin-right: 11px;
  margin-left: 4px;
  &:before, &:after{
    content: "";
    background: #fff;
    position: absolute;
  }
  &:before{
    width: 9px;
    height: 1px;
    left: -4px;
    top: 5px;
  }
  &:after{
    width: 1px;
    height: 9px;
    top: 1px;
    left: 0;
  }
}*/
/*
@import "vendor/apidocs";
@import "vendor/npm";
*/

/*
body{
  display: block;
  transition: 0.3s all;
}
*/

@media(max-width: 50em){
    .maxwidth-container{
        max-width: 90%;
    }
}

@media(min-width: 47.95em) and (max-width: 56.25em){
    .maxwidth-container{
        max-width: 50em;
    }
}

@media(min-width: 56.25em){
    .maxwidth-container{
        max-width: 80em;
    }
}

@media(max-width: 599px){

    /*// Full*/
    .sm-viewport--one-whole{
        width: 99.98% !important;
    }

    /*// Halves*/
    .sm-viewport--one-half{
        width: 49.99%;
    }

    /*// Thirds*/
    .sm-viewport--one-third{
        width: 33.32666666666667%;
    }
    .sm-viewport--two-thirds{
        width: 66.65333333333334%;
    }

    /*//Quarters*/
    .sm-viewport--one-quarter{
        width: 24.995%;
    }
    .sm-viewport--two-quarters{

        /*@extend $(prefix)one-half;*/
        width: 49.99%;
    }
    .sm-viewport--three-quarters{
        width: 74.985%;
    }

    /*//Fifths*/
    .sm-viewport--one-fifth{
        width: 19.996000000000002%;
    }
    .sm-viewport--two-fifths{
        width: 39.992000000000004%;
    }
    .sm-viewport--three-fifths{
        width: 59.988%;
    }
    .sm-viewport--four-fifths{
        width: 79.98400000000001%;
    }

    /*//Sixths*/
    .sm-viewport--one-sixth{
        width: 16.663333333333334%;
    }
    .sm-viewport--two-sixths{

        /*@extend $(prefix)one-third;*/
        width: 33.32666666666667%;
    }
    .sm-viewport--three-sixths{

        /*@extend $(prefix)one-half;*/
        width: 49.99%;
    }
    .sm-viewport--four-sixths{

        /*@extend $(prefix)two-thirds;*/
        width: 66.65333333333334%;
    }
    .sm-viewport--five-sixths{
        width: 83.31666666666668%;
    }

    /*//Sevenths*/
    .sm-viewport--one-seventh{
        width: 14.282857142857143%;
    }
    .sm-viewport--two-sevenths{
        width: 28.565714285714286%;
    }
    .sm-viewport--three-sevenths{
        width: 42.848571428571425%;
    }
    .sm-viewport--four-sevenths{
        width: 57.13142857142857%;
    }
    .sm-viewport--five-sevenths{
        width: 71.41428571428573%;
    }
    .sm-viewport--six-sevenths{
        width: 85.69714285714285%;
    }

    /*//Eighths*/
    .sm-viewport--one-eighth{
        width: 12.4975%;
    }
    .sm-viewport--two-eighths{

        /*@extend $(prefix)one-quarter;*/
        width: 24.995%;
    }
    .sm-viewport--three-eighths{
        width: 37.4925%;
    }
    .sm-viewport--four-eighths{

        /*@extend $(prefix)one-half;*/
        width: 49.99%;
    }
    .sm-viewport--five-eighths{
        width: 62.487500000000004%;
    }
    .sm-viewport--six-eighths{

        /*@extend $(prefix)three-quarters;*/
        width: 74.985%;
    }
    .sm-viewport--seven-eighths{
        width: 87.4825%;
    }

    /*//Ninths*/
    .sm-viewport--one-ninth{
        width: 11.108888888888888%;
    }
    .sm-viewport--two-ninths{
        width: 22.217777777777776%;
    }
    .sm-viewport--three-ninths{

        /*@extend $(prefix)one-third;*/
        width: 33.32666666666667%;
    }
    .sm-viewport--four-ninths{
        width: 44.43555555555555%;
    }
    .sm-viewport--five-ninths{
        width: 55.54444444444445%;
    }
    .sm-viewport--six-ninths{
        width: 66.65333333333334%;
    }
    .sm-viewport--seven-ninths{
        width: 77.76222222222222%;
    }
    .sm-viewport--eight-ninths{
        width: 88.8711111111111%;
    }

    /*//Tenths*/
    .sm-viewport--one-tenth{
        width: 9.998000000000001%;
    }
    .sm-viewport--two-tenths{

        /*@extend $(prefix)one-fifth;*/
        width: 19.996000000000002%;
    }
    .sm-viewport--three-tenths{
        width: 29.994%;
    }
    .sm-viewport--four-tenths{

        /*@extend $(prefix)two-fifths;*/
        width: 39.992000000000004%;
    }
    .sm-viewport--five-tenths{

        /*@extend $(prefix)one-half;*/
        width: 49.99%;
    }
    .sm-viewport--six-tenths{

        /*@extend $(prefix)three-fifths;*/
        width: 59.988%;
    }
    .sm-viewport--seven-tenths{
        width: 69.986%;
    }
    .sm-viewport--eight-tenths{

        /*@extend $(prefix)four-fifths;*/
        width: 79.98400000000001%;
    }
    .sm-viewport--nine-tenths{
        width: 89.982%;
    }

    /*//Elevenths*/
    .sm-viewport--one-eleventh{
        width: 9.08909090909091%;
    }
    .sm-viewport--two-elevenths{
        width: 18.17818181818182%;
    }
    .sm-viewport--three-elevenths{
        width: 27.267272727272726%;
    }
    .sm-viewport--four-elevenths{
        width: 36.35636363636364%;
    }
    .sm-viewport--five-elevenths{
        width: 45.445454545454545%;
    }
    .sm-viewport--six-elevenths{
        width: 54.53454545454545%;
    }
    .sm-viewport--seven-elevenths{
        width: 63.623636363636365%;
    }
    .sm-viewport--eight-elevenths{
        width: 72.71272727272728%;
    }
    .sm-viewport--nine-elevenths{
        width: 81.80181818181819%;
    }
    .sm-viewport--ten-elevenths{
        width: 90.89090909090909%;
    }

    /*//Twelfths*/
    .sm-viewport--one-twelfth{
        width: 8.331666666666667%;
    }
    .sm-viewport--two-twelfths{

        /*@extend $(prefix)one-sixth;*/
        width: 16.663333333333334%;
    }
    .sm-viewport--three-twelfths{

        /*@extend $(prefix)one-quarter;*/
        width: 24.995%;
    }
    .sm-viewport--four-twelfths{

        /*@extend $(prefix)one-third;*/
        width: 33.32666666666667%;
    }
    .sm-viewport--five-twelfths{
        width: 41.65833333333334%;
    }
    .sm-viewport--six-twelfths{

        /*@extend $(prefix)one-half;*/
        width: 49.99%;
    }
    .sm-viewport--seven-twelfths{
        width: 58.32166666666667%;
    }
    .sm-viewport--eight-twelfths{

        /*@extend $(prefix)two-thirds;*/
        width: 66.65333333333334%;
    }
    .sm-viewport--nine-twelfths{

        /*@extend $(prefix)three-quarters;*/
        width: 74.985%;
    }
    .sm-viewport--ten-twelfths{

        /*@extend $(prefix)five-sixths;*/
        width: 83.31666666666668%;
    }
    .sm-viewport--eleven-twelfths{
        width: 91.64833333333333%;
    }

    /*//Thirteenths*/
    .sm-viewport--one-thirteenth{
        width: 7.690769230769232%;
    }
    .sm-viewport--two-thirteenths{
        width: 15.381538461538463%;
    }
    .sm-viewport--three-thirteenths{
        width: 23.072307692307696%;
    }
    .sm-viewport--four-thirteenths{
        width: 30.763076923076927%;
    }
    .sm-viewport--five-thirteenths{
        width: 38.45384615384616%;
    }
    .sm-viewport--six-thirteenths{
        width: 46.14461538461539%;
    }
    .sm-viewport--seven-thirteenths{
        width: 53.83538461538461%;
    }
    .sm-viewport--eight-thirteenths{
        width: 61.52615384615385%;
    }
    .sm-viewport--nine-thirteenths{
        width: 69.21692307692308%;
    }
    .sm-viewport--ten-thirteenths{
        width: 76.90769230769232%;
    }
    .sm-viewport--eleven-thirteenths{
        width: 84.59846153846154%;
    }
    .sm-viewport--twelve-thirteenths{
        width: 92.28923076923078%;
    }

    /*//Fouteenths*/
    .sm-viewport--one-fourteenth{
        width: 7.1414285714285715%;
    }
    .sm-viewport--two-fourteenths{

        /*@extend $(prefix)one-seventh;*/
        width: 14.282857142857143%;
    }
    .sm-viewport--three-fourteenths{
        width: 21.424285714285713%;
    }
    .sm-viewport--four-fourteenths{

        /*@extend $(prefix)two-sevenths;*/
        width: 28.565714285714286%;
    }
    .sm-viewport--five-fourteenths{
        width: 35.70714285714286%;
    }
    .sm-viewport--six-fourteenths{

        /*@extend $(prefix)three-sevenths;*/
        width: 42.848571428571425%;
    }
    .sm-viewport--seven-fourteenths{

        /*@extend $(prefix)one-half;*/
        width: 49.99%;
    }
    .sm-viewport--eight-fourteenths{

        /*@extend $(prefix)four-sevenths;*/
        width: 57.13142857142857%;
    }
    .sm-viewport--nine-fourteenths{
        width: 64.27285714285715%;
    }
    .sm-viewport--ten-fourteenths{
        width: 71.41428571428573%;
    }
    .sm-viewport--eleven-fourteenths{
        width: 78.55571428571429%;
    }
    .sm-viewport--twelve-fourteenths{

        /*@extend $(prefix)six-sevenths;*/
        width: 85.69714285714285%;
    }
    .sm-viewport--thirteen-fourteenths{
        width: 92.83857142857144%;
    }

    /*//Fifteenths*/
    .sm-viewport--one-fifteenth{
        width: 6.665333333333334%;
    }
    .sm-viewport--two-fifteenths{
        width: 13.330666666666668%;
    }
    .sm-viewport--three-fifteenths{

        /*@extend $(prefix)two-tenths;*/
        width: 19.996000000000002%;
    }
    .sm-viewport--four-fifteenths{
        width: 26.661333333333335%;
    }
    .sm-viewport--five-fifteenths{

        /*@extend $(prefix)one-third;*/
        width: 33.32666666666667%;
    }
    .sm-viewport--six-fifteenths{

        /*@extend $(prefix)four-tenths;*/
        width: 39.992000000000004%;
    }
    .sm-viewport--seven-fifteenths{
        width: 46.657333333333334%;
    }
    .sm-viewport--eight-fifteenths{
        width: 53.32266666666667%;
    }
    .sm-viewport--nine-fifteenths{

        /*@extend $(prefix)six-tenths;*/
        width: 59.988%;
    }
    .sm-viewport--ten-fifteenths{

        /*@extend $(prefix)two-thirds;*/
        width: 66.65333333333334%;
    }
    .sm-viewport--eleven-fifteenths{
        width: 73.31866666666666%;
    }
    .sm-viewport--twelve-fifteenths{

        /*@extend $(prefix)eight-tenths;*/
        width: 79.98400000000001%;
    }
    .sm-viewport--thirteen-fifteenths{
        width: 86.64933333333335%;
    }
    .sm-viewport--fourteen-fifteenths{
        width: 93.31466666666667%;
    }

    /*//Sixteenths*/
    .sm-viewport--one-sixteenth{
        width: 6.24875%;
    }
    .sm-viewport--two-sixteenths{

        /*@extend $(prefix)one-eighth;*/
        width: 12.4975%;
    }
    .sm-viewport--three-sixteenths{
        width: 18.74625%;
    }
    .sm-viewport--four-sixteenths{

        /*@extend $(prefix)two-eighths;*/
        width: 24.995%;
    }
    .sm-viewport--five-sixteenths{
        width: 31.243750000000002%;
    }
    .sm-viewport--six-sixteenths{

        /*@extend $(prefix)three-eighths;*/
        width: 37.4925%;
    }
    .sm-viewport--seven-sixteenths{
        width: 43.74125%;
    }
    .sm-viewport--eight-sixteenths{

        /*@extend $(prefix)four-eighths;*/
        width: 49.99%;
    }
    .sm-viewport--nine-sixteenths{
        width: 56.23875%;
    }
    .sm-viewport--ten-sixteenths{

        /*@extend $(prefix)five-eighths;*/
        width: 62.487500000000004%;
    }
    .sm-viewport--eleven-sixteenths{
        width: 68.73625%;
    }
    .sm-viewport--twelve-sixteenths{

        /*@extend $(prefix)six-eighths;*/
        width: 74.985%;
    }
    .sm-viewport--thirteen-sixteenths{
        width: 81.23375%;
    }
    .sm-viewport--fourteen-sixteenths{

        /*@extend $(prefix)seven-eighths;*/
        width: calc(7 / 8min- * 99.98%);
    }
    .sm-viewport--fifteen-sixteenths{
        width: 93.73125%;
    }
}

@media(max-width: 600px){

    /*// Full*/
    .md-viewport--one-whole{
        width: 99.98% !important;
    }

    /*// Halves*/
    .md-viewport--one-half{
        width: 49.99%;
    }

    /*// Thirds*/
    .md-viewport--one-third{
        width: 33.32666666666667%;
    }
    .md-viewport--two-thirds{
        width: 66.65333333333334%;
    }

    /*//Quarters*/
    .md-viewport--one-quarter{
        width: 24.995%;
    }
    .md-viewport--two-quarters{

        /*@extend $(prefix)one-half;*/
        width: 49.99%;
    }
    .md-viewport--three-quarters{
        width: 74.985%;
    }

    /*//Fifths*/
    .md-viewport--one-fifth{
        width: 19.996000000000002%;
    }
    .md-viewport--two-fifths{
        width: 39.992000000000004%;
    }
    .md-viewport--three-fifths{
        width: 59.988%;
    }
    .md-viewport--four-fifths{
        width: 79.98400000000001%;
    }

    /*//Sixths*/
    .md-viewport--one-sixth{
        width: 16.663333333333334%;
    }
    .md-viewport--two-sixths{

        /*@extend $(prefix)one-third;*/
        width: 33.32666666666667%;
    }
    .md-viewport--three-sixths{

        /*@extend $(prefix)one-half;*/
        width: 49.99%;
    }
    .md-viewport--four-sixths{

        /*@extend $(prefix)two-thirds;*/
        width: 66.65333333333334%;
    }
    .md-viewport--five-sixths{
        width: 83.31666666666668%;
    }

    /*//Sevenths*/
    .md-viewport--one-seventh{
        width: 14.282857142857143%;
    }
    .md-viewport--two-sevenths{
        width: 28.565714285714286%;
    }
    .md-viewport--three-sevenths{
        width: 42.848571428571425%;
    }
    .md-viewport--four-sevenths{
        width: 57.13142857142857%;
    }
    .md-viewport--five-sevenths{
        width: 71.41428571428573%;
    }
    .md-viewport--six-sevenths{
        width: 85.69714285714285%;
    }

    /*//Eighths*/
    .md-viewport--one-eighth{
        width: 12.4975%;
    }
    .md-viewport--two-eighths{

        /*@extend $(prefix)one-quarter;*/
        width: 24.995%;
    }
    .md-viewport--three-eighths{
        width: 37.4925%;
    }
    .md-viewport--four-eighths{

        /*@extend $(prefix)one-half;*/
        width: 49.99%;
    }
    .md-viewport--five-eighths{
        width: 62.487500000000004%;
    }
    .md-viewport--six-eighths{

        /*@extend $(prefix)three-quarters;*/
        width: 74.985%;
    }
    .md-viewport--seven-eighths{
        width: 87.4825%;
    }

    /*//Ninths*/
    .md-viewport--one-ninth{
        width: 11.108888888888888%;
    }
    .md-viewport--two-ninths{
        width: 22.217777777777776%;
    }
    .md-viewport--three-ninths{

        /*@extend $(prefix)one-third;*/
        width: 33.32666666666667%;
    }
    .md-viewport--four-ninths{
        width: 44.43555555555555%;
    }
    .md-viewport--five-ninths{
        width: 55.54444444444445%;
    }
    .md-viewport--six-ninths{
        width: 66.65333333333334%;
    }
    .md-viewport--seven-ninths{
        width: 77.76222222222222%;
    }
    .md-viewport--eight-ninths{
        width: 88.8711111111111%;
    }

    /*//Tenths*/
    .md-viewport--one-tenth{
        width: 9.998000000000001%;
    }
    .md-viewport--two-tenths{

        /*@extend $(prefix)one-fifth;*/
        width: 19.996000000000002%;
    }
    .md-viewport--three-tenths{
        width: 29.994%;
    }
    .md-viewport--four-tenths{

        /*@extend $(prefix)two-fifths;*/
        width: 39.992000000000004%;
    }
    .md-viewport--five-tenths{

        /*@extend $(prefix)one-half;*/
        width: 49.99%;
    }
    .md-viewport--six-tenths{

        /*@extend $(prefix)three-fifths;*/
        width: 59.988%;
    }
    .md-viewport--seven-tenths{
        width: 69.986%;
    }
    .md-viewport--eight-tenths{

        /*@extend $(prefix)four-fifths;*/
        width: 79.98400000000001%;
    }
    .md-viewport--nine-tenths{
        width: 89.982%;
    }

    /*//Elevenths*/
    .md-viewport--one-eleventh{
        width: 9.08909090909091%;
    }
    .md-viewport--two-elevenths{
        width: 18.17818181818182%;
    }
    .md-viewport--three-elevenths{
        width: 27.267272727272726%;
    }
    .md-viewport--four-elevenths{
        width: 36.35636363636364%;
    }
    .md-viewport--five-elevenths{
        width: 45.445454545454545%;
    }
    .md-viewport--six-elevenths{
        width: 54.53454545454545%;
    }
    .md-viewport--seven-elevenths{
        width: 63.623636363636365%;
    }
    .md-viewport--eight-elevenths{
        width: 72.71272727272728%;
    }
    .md-viewport--nine-elevenths{
        width: 81.80181818181819%;
    }
    .md-viewport--ten-elevenths{
        width: 90.89090909090909%;
    }

    /*//Twelfths*/
    .md-viewport--one-twelfth{
        width: 8.331666666666667%;
    }
    .md-viewport--two-twelfths{

        /*@extend $(prefix)one-sixth;*/
        width: 16.663333333333334%;
    }
    .md-viewport--three-twelfths{

        /*@extend $(prefix)one-quarter;*/
        width: 24.995%;
    }
    .md-viewport--four-twelfths{

        /*@extend $(prefix)one-third;*/
        width: 33.32666666666667%;
    }
    .md-viewport--five-twelfths{
        width: 41.65833333333334%;
    }
    .md-viewport--six-twelfths{

        /*@extend $(prefix)one-half;*/
        width: 49.99%;
    }
    .md-viewport--seven-twelfths{
        width: 58.32166666666667%;
    }
    .md-viewport--eight-twelfths{

        /*@extend $(prefix)two-thirds;*/
        width: 66.65333333333334%;
    }
    .md-viewport--nine-twelfths{

        /*@extend $(prefix)three-quarters;*/
        width: 74.985%;
    }
    .md-viewport--ten-twelfths{

        /*@extend $(prefix)five-sixths;*/
        width: 83.31666666666668%;
    }
    .md-viewport--eleven-twelfths{
        width: 91.64833333333333%;
    }

    /*//Thirteenths*/
    .md-viewport--one-thirteenth{
        width: 7.690769230769232%;
    }
    .md-viewport--two-thirteenths{
        width: 15.381538461538463%;
    }
    .md-viewport--three-thirteenths{
        width: 23.072307692307696%;
    }
    .md-viewport--four-thirteenths{
        width: 30.763076923076927%;
    }
    .md-viewport--five-thirteenths{
        width: 38.45384615384616%;
    }
    .md-viewport--six-thirteenths{
        width: 46.14461538461539%;
    }
    .md-viewport--seven-thirteenths{
        width: 53.83538461538461%;
    }
    .md-viewport--eight-thirteenths{
        width: 61.52615384615385%;
    }
    .md-viewport--nine-thirteenths{
        width: 69.21692307692308%;
    }
    .md-viewport--ten-thirteenths{
        width: 76.90769230769232%;
    }
    .md-viewport--eleven-thirteenths{
        width: 84.59846153846154%;
    }
    .md-viewport--twelve-thirteenths{
        width: 92.28923076923078%;
    }

    /*//Fouteenths*/
    .md-viewport--one-fourteenth{
        width: 7.1414285714285715%;
    }
    .md-viewport--two-fourteenths{

        /*@extend $(prefix)one-seventh;*/
        width: 14.282857142857143%;
    }
    .md-viewport--three-fourteenths{
        width: 21.424285714285713%;
    }
    .md-viewport--four-fourteenths{

        /*@extend $(prefix)two-sevenths;*/
        width: 28.565714285714286%;
    }
    .md-viewport--five-fourteenths{
        width: 35.70714285714286%;
    }
    .md-viewport--six-fourteenths{

        /*@extend $(prefix)three-sevenths;*/
        width: 42.848571428571425%;
    }
    .md-viewport--seven-fourteenths{

        /*@extend $(prefix)one-half;*/
        width: 49.99%;
    }
    .md-viewport--eight-fourteenths{

        /*@extend $(prefix)four-sevenths;*/
        width: 57.13142857142857%;
    }
    .md-viewport--nine-fourteenths{
        width: 64.27285714285715%;
    }
    .md-viewport--ten-fourteenths{
        width: 71.41428571428573%;
    }
    .md-viewport--eleven-fourteenths{
        width: 78.55571428571429%;
    }
    .md-viewport--twelve-fourteenths{

        /*@extend $(prefix)six-sevenths;*/
        width: 85.69714285714285%;
    }
    .md-viewport--thirteen-fourteenths{
        width: 92.83857142857144%;
    }

    /*//Fifteenths*/
    .md-viewport--one-fifteenth{
        width: 6.665333333333334%;
    }
    .md-viewport--two-fifteenths{
        width: 13.330666666666668%;
    }
    .md-viewport--three-fifteenths{

        /*@extend $(prefix)two-tenths;*/
        width: 19.996000000000002%;
    }
    .md-viewport--four-fifteenths{
        width: 26.661333333333335%;
    }
    .md-viewport--five-fifteenths{

        /*@extend $(prefix)one-third;*/
        width: 33.32666666666667%;
    }
    .md-viewport--six-fifteenths{

        /*@extend $(prefix)four-tenths;*/
        width: 39.992000000000004%;
    }
    .md-viewport--seven-fifteenths{
        width: 46.657333333333334%;
    }
    .md-viewport--eight-fifteenths{
        width: 53.32266666666667%;
    }
    .md-viewport--nine-fifteenths{

        /*@extend $(prefix)six-tenths;*/
        width: 59.988%;
    }
    .md-viewport--ten-fifteenths{

        /*@extend $(prefix)two-thirds;*/
        width: 66.65333333333334%;
    }
    .md-viewport--eleven-fifteenths{
        width: 73.31866666666666%;
    }
    .md-viewport--twelve-fifteenths{

        /*@extend $(prefix)eight-tenths;*/
        width: 79.98400000000001%;
    }
    .md-viewport--thirteen-fifteenths{
        width: 86.64933333333335%;
    }
    .md-viewport--fourteen-fifteenths{
        width: 93.31466666666667%;
    }

    /*//Sixteenths*/
    .md-viewport--one-sixteenth{
        width: 6.24875%;
    }
    .md-viewport--two-sixteenths{

        /*@extend $(prefix)one-eighth;*/
        width: 12.4975%;
    }
    .md-viewport--three-sixteenths{
        width: 18.74625%;
    }
    .md-viewport--four-sixteenths{

        /*@extend $(prefix)two-eighths;*/
        width: 24.995%;
    }
    .md-viewport--five-sixteenths{
        width: 31.243750000000002%;
    }
    .md-viewport--six-sixteenths{

        /*@extend $(prefix)three-eighths;*/
        width: 37.4925%;
    }
    .md-viewport--seven-sixteenths{
        width: 43.74125%;
    }
    .md-viewport--eight-sixteenths{

        /*@extend $(prefix)four-eighths;*/
        width: 49.99%;
    }
    .md-viewport--nine-sixteenths{
        width: 56.23875%;
    }
    .md-viewport--ten-sixteenths{

        /*@extend $(prefix)five-eighths;*/
        width: 62.487500000000004%;
    }
    .md-viewport--eleven-sixteenths{
        width: 68.73625%;
    }
    .md-viewport--twelve-sixteenths{

        /*@extend $(prefix)six-eighths;*/
        width: 74.985%;
    }
    .md-viewport--thirteen-sixteenths{
        width: 81.23375%;
    }
    .md-viewport--fourteen-sixteenths{

        /*@extend $(prefix)seven-eighths;*/
        width: calc(7 / 8min- * 99.98%);
    }
    .md-viewport--fifteen-sixteenths{
        width: 93.73125%;
    }
}

@media(width => 1600px){

    /*// Full*/
    .lg-viewport--one-whole{
        width: 99.98% !important;
    }

    /*// Halves*/
    .lg-viewport--one-half{
        width: 49.99%;
    }

    /*// Thirds*/
    .lg-viewport--one-third{
        width: 33.32666666666667%;
    }
    .lg-viewport--two-thirds{
        width: 66.65333333333334%;
    }

    /*//Quarters*/
    .lg-viewport--one-quarter{
        width: 24.995%;
    }
    .lg-viewport--two-quarters{

        /*@extend $(prefix)one-half;*/
        width: 49.99%;
    }
    .lg-viewport--three-quarters{
        width: 74.985%;
    }

    /*//Fifths*/
    .lg-viewport--one-fifth{
        width: 19.996000000000002%;
    }
    .lg-viewport--two-fifths{
        width: 39.992000000000004%;
    }
    .lg-viewport--three-fifths{
        width: 59.988%;
    }
    .lg-viewport--four-fifths{
        width: 79.98400000000001%;
    }

    /*//Sixths*/
    .lg-viewport--one-sixth{
        width: 16.663333333333334%;
    }
    .lg-viewport--two-sixths{

        /*@extend $(prefix)one-third;*/
        width: 33.32666666666667%;
    }
    .lg-viewport--three-sixths{

        /*@extend $(prefix)one-half;*/
        width: 49.99%;
    }
    .lg-viewport--four-sixths{

        /*@extend $(prefix)two-thirds;*/
        width: 66.65333333333334%;
    }
    .lg-viewport--five-sixths{
        width: 83.31666666666668%;
    }

    /*//Sevenths*/
    .lg-viewport--one-seventh{
        width: 14.282857142857143%;
    }
    .lg-viewport--two-sevenths{
        width: 28.565714285714286%;
    }
    .lg-viewport--three-sevenths{
        width: 42.848571428571425%;
    }
    .lg-viewport--four-sevenths{
        width: 57.13142857142857%;
    }
    .lg-viewport--five-sevenths{
        width: 71.41428571428573%;
    }
    .lg-viewport--six-sevenths{
        width: 85.69714285714285%;
    }

    /*//Eighths*/
    .lg-viewport--one-eighth{
        width: 12.4975%;
    }
    .lg-viewport--two-eighths{

        /*@extend $(prefix)one-quarter;*/
        width: 24.995%;
    }
    .lg-viewport--three-eighths{
        width: 37.4925%;
    }
    .lg-viewport--four-eighths{

        /*@extend $(prefix)one-half;*/
        width: 49.99%;
    }
    .lg-viewport--five-eighths{
        width: 62.487500000000004%;
    }
    .lg-viewport--six-eighths{

        /*@extend $(prefix)three-quarters;*/
        width: 74.985%;
    }
    .lg-viewport--seven-eighths{
        width: 87.4825%;
    }

    /*//Ninths*/
    .lg-viewport--one-ninth{
        width: 11.108888888888888%;
    }
    .lg-viewport--two-ninths{
        width: 22.217777777777776%;
    }
    .lg-viewport--three-ninths{

        /*@extend $(prefix)one-third;*/
        width: 33.32666666666667%;
    }
    .lg-viewport--four-ninths{
        width: 44.43555555555555%;
    }
    .lg-viewport--five-ninths{
        width: 55.54444444444445%;
    }
    .lg-viewport--six-ninths{
        width: 66.65333333333334%;
    }
    .lg-viewport--seven-ninths{
        width: 77.76222222222222%;
    }
    .lg-viewport--eight-ninths{
        width: 88.8711111111111%;
    }

    /*//Tenths*/
    .lg-viewport--one-tenth{
        width: 9.998000000000001%;
    }
    .lg-viewport--two-tenths{

        /*@extend $(prefix)one-fifth;*/
        width: 19.996000000000002%;
    }
    .lg-viewport--three-tenths{
        width: 29.994%;
    }
    .lg-viewport--four-tenths{

        /*@extend $(prefix)two-fifths;*/
        width: 39.992000000000004%;
    }
    .lg-viewport--five-tenths{

        /*@extend $(prefix)one-half;*/
        width: 49.99%;
    }
    .lg-viewport--six-tenths{

        /*@extend $(prefix)three-fifths;*/
        width: 59.988%;
    }
    .lg-viewport--seven-tenths{
        width: 69.986%;
    }
    .lg-viewport--eight-tenths{

        /*@extend $(prefix)four-fifths;*/
        width: 79.98400000000001%;
    }
    .lg-viewport--nine-tenths{
        width: 89.982%;
    }

    /*//Elevenths*/
    .lg-viewport--one-eleventh{
        width: 9.08909090909091%;
    }
    .lg-viewport--two-elevenths{
        width: 18.17818181818182%;
    }
    .lg-viewport--three-elevenths{
        width: 27.267272727272726%;
    }
    .lg-viewport--four-elevenths{
        width: 36.35636363636364%;
    }
    .lg-viewport--five-elevenths{
        width: 45.445454545454545%;
    }
    .lg-viewport--six-elevenths{
        width: 54.53454545454545%;
    }
    .lg-viewport--seven-elevenths{
        width: 63.623636363636365%;
    }
    .lg-viewport--eight-elevenths{
        width: 72.71272727272728%;
    }
    .lg-viewport--nine-elevenths{
        width: 81.80181818181819%;
    }
    .lg-viewport--ten-elevenths{
        width: 90.89090909090909%;
    }

    /*//Twelfths*/
    .lg-viewport--one-twelfth{
        width: 8.331666666666667%;
    }
    .lg-viewport--two-twelfths{

        /*@extend $(prefix)one-sixth;*/
        width: 16.663333333333334%;
    }
    .lg-viewport--three-twelfths{

        /*@extend $(prefix)one-quarter;*/
        width: 24.995%;
    }
    .lg-viewport--four-twelfths{

        /*@extend $(prefix)one-third;*/
        width: 33.32666666666667%;
    }
    .lg-viewport--five-twelfths{
        width: 41.65833333333334%;
    }
    .lg-viewport--six-twelfths{

        /*@extend $(prefix)one-half;*/
        width: 49.99%;
    }
    .lg-viewport--seven-twelfths{
        width: 58.32166666666667%;
    }
    .lg-viewport--eight-twelfths{

        /*@extend $(prefix)two-thirds;*/
        width: 66.65333333333334%;
    }
    .lg-viewport--nine-twelfths{

        /*@extend $(prefix)three-quarters;*/
        width: 74.985%;
    }
    .lg-viewport--ten-twelfths{

        /*@extend $(prefix)five-sixths;*/
        width: 83.31666666666668%;
    }
    .lg-viewport--eleven-twelfths{
        width: 91.64833333333333%;
    }

    /*//Thirteenths*/
    .lg-viewport--one-thirteenth{
        width: 7.690769230769232%;
    }
    .lg-viewport--two-thirteenths{
        width: 15.381538461538463%;
    }
    .lg-viewport--three-thirteenths{
        width: 23.072307692307696%;
    }
    .lg-viewport--four-thirteenths{
        width: 30.763076923076927%;
    }
    .lg-viewport--five-thirteenths{
        width: 38.45384615384616%;
    }
    .lg-viewport--six-thirteenths{
        width: 46.14461538461539%;
    }
    .lg-viewport--seven-thirteenths{
        width: 53.83538461538461%;
    }
    .lg-viewport--eight-thirteenths{
        width: 61.52615384615385%;
    }
    .lg-viewport--nine-thirteenths{
        width: 69.21692307692308%;
    }
    .lg-viewport--ten-thirteenths{
        width: 76.90769230769232%;
    }
    .lg-viewport--eleven-thirteenths{
        width: 84.59846153846154%;
    }
    .lg-viewport--twelve-thirteenths{
        width: 92.28923076923078%;
    }

    /*//Fouteenths*/
    .lg-viewport--one-fourteenth{
        width: 7.1414285714285715%;
    }
    .lg-viewport--two-fourteenths{

        /*@extend $(prefix)one-seventh;*/
        width: 14.282857142857143%;
    }
    .lg-viewport--three-fourteenths{
        width: 21.424285714285713%;
    }
    .lg-viewport--four-fourteenths{

        /*@extend $(prefix)two-sevenths;*/
        width: 28.565714285714286%;
    }
    .lg-viewport--five-fourteenths{
        width: 35.70714285714286%;
    }
    .lg-viewport--six-fourteenths{

        /*@extend $(prefix)three-sevenths;*/
        width: 42.848571428571425%;
    }
    .lg-viewport--seven-fourteenths{

        /*@extend $(prefix)one-half;*/
        width: 49.99%;
    }
    .lg-viewport--eight-fourteenths{

        /*@extend $(prefix)four-sevenths;*/
        width: 57.13142857142857%;
    }
    .lg-viewport--nine-fourteenths{
        width: 64.27285714285715%;
    }
    .lg-viewport--ten-fourteenths{
        width: 71.41428571428573%;
    }
    .lg-viewport--eleven-fourteenths{
        width: 78.55571428571429%;
    }
    .lg-viewport--twelve-fourteenths{

        /*@extend $(prefix)six-sevenths;*/
        width: 85.69714285714285%;
    }
    .lg-viewport--thirteen-fourteenths{
        width: 92.83857142857144%;
    }

    /*//Fifteenths*/
    .lg-viewport--one-fifteenth{
        width: 6.665333333333334%;
    }
    .lg-viewport--two-fifteenths{
        width: 13.330666666666668%;
    }
    .lg-viewport--three-fifteenths{

        /*@extend $(prefix)two-tenths;*/
        width: 19.996000000000002%;
    }
    .lg-viewport--four-fifteenths{
        width: 26.661333333333335%;
    }
    .lg-viewport--five-fifteenths{

        /*@extend $(prefix)one-third;*/
        width: 33.32666666666667%;
    }
    .lg-viewport--six-fifteenths{

        /*@extend $(prefix)four-tenths;*/
        width: 39.992000000000004%;
    }
    .lg-viewport--seven-fifteenths{
        width: 46.657333333333334%;
    }
    .lg-viewport--eight-fifteenths{
        width: 53.32266666666667%;
    }
    .lg-viewport--nine-fifteenths{

        /*@extend $(prefix)six-tenths;*/
        width: 59.988%;
    }
    .lg-viewport--ten-fifteenths{

        /*@extend $(prefix)two-thirds;*/
        width: 66.65333333333334%;
    }
    .lg-viewport--eleven-fifteenths{
        width: 73.31866666666666%;
    }
    .lg-viewport--twelve-fifteenths{

        /*@extend $(prefix)eight-tenths;*/
        width: 79.98400000000001%;
    }
    .lg-viewport--thirteen-fifteenths{
        width: 86.64933333333335%;
    }
    .lg-viewport--fourteen-fifteenths{
        width: 93.31466666666667%;
    }

    /*//Sixteenths*/
    .lg-viewport--one-sixteenth{
        width: 6.24875%;
    }
    .lg-viewport--two-sixteenths{

        /*@extend $(prefix)one-eighth;*/
        width: 12.4975%;
    }
    .lg-viewport--three-sixteenths{
        width: 18.74625%;
    }
    .lg-viewport--four-sixteenths{

        /*@extend $(prefix)two-eighths;*/
        width: 24.995%;
    }
    .lg-viewport--five-sixteenths{
        width: 31.243750000000002%;
    }
    .lg-viewport--six-sixteenths{

        /*@extend $(prefix)three-eighths;*/
        width: 37.4925%;
    }
    .lg-viewport--seven-sixteenths{
        width: 43.74125%;
    }
    .lg-viewport--eight-sixteenths{

        /*@extend $(prefix)four-eighths;*/
        width: 49.99%;
    }
    .lg-viewport--nine-sixteenths{
        width: 56.23875%;
    }
    .lg-viewport--ten-sixteenths{

        /*@extend $(prefix)five-eighths;*/
        width: 62.487500000000004%;
    }
    .lg-viewport--eleven-sixteenths{
        width: 68.73625%;
    }
    .lg-viewport--twelve-sixteenths{

        /*@extend $(prefix)six-eighths;*/
        width: 74.985%;
    }
    .lg-viewport--thirteen-sixteenths{
        width: 81.23375%;
    }
    .lg-viewport--fourteen-sixteenths{

        /*@extend $(prefix)seven-eighths;*/
        width: calc(7 / 8min- * 99.98%);
    }
    .lg-viewport--fifteen-sixteenths{
        width: 93.73125%;
    }
}


/*# sourceMappingURL=vocus-ui.css.map */