@charset "UTF-8";
/* SITES ABOVE CORE.CSS */
/* INCLUDE ANY ABOVE THE FOLD CSS HERE */
/** { border: 1px solid red; }*/
/* VENDOR : SHould be above _globals when possible */
/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
@import url(/fonts/font_ubuntu.css);
@import url(/fonts/font_lato.css);
html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; }

body {
  margin: 0; }

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block; }

audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline; }

audio:not([controls]) {
  display: none;
  height: 0; }

[hidden],
template {
  display: none; }

a {
  background-color: transparent; }

a:active,
a:hover {
  outline: 0; }

abbr[title] {
  border-bottom: 1px dotted; }

b,
strong {
  font-weight: bold; }

dfn {
  font-style: italic; }

h1 {
  font-size: 2em;
  margin: 0.67em 0; }

mark {
  background: #ff0;
  color: #000; }

small {
  font-size: 80%; }

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

img {
  border: 0; }

svg:not(:root) {
  overflow: hidden; }

figure {
  margin: 1em 40px; }

hr {
  box-sizing: content-box;
  height: 0; }

pre {
  overflow: auto; }

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em; }

button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0; }

button {
  overflow: visible; }

button,
select {
  text-transform: none; }

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer; }

button[disabled],
html input[disabled] {
  cursor: default; }

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

input {
  line-height: normal; }

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0; }

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto; }

input[type="search"] {
  -webkit-appearance: textfield;
  box-sizing: content-box; }

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

legend {
  border: 0;
  padding: 0; }

textarea {
  overflow: auto; }

optgroup {
  font-weight: bold; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

td,
th {
  padding: 0; }

/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */
@media print {
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important; }
  a,
  a:visited {
    text-decoration: underline; }
  a[href]:after {
    content: " (" attr(href) ")"; }
  abbr[title]:after {
    content: " (" attr(title) ")"; }
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: ""; }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid; }
  thead {
    display: table-header-group; }
  tr,
  img {
    page-break-inside: avoid; }
  img {
    max-width: 100% !important; }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3; }
  h2,
  h3 {
    page-break-after: avoid; }
  .navbar {
    display: none; }
  .btn > .caret,
  .dropup > .btn > .caret {
    border-top-color: #000 !important; }
  .label {
    border: 1px solid #000; }
  .table {
    border-collapse: collapse !important; }
    .table td,
    .table th {
      background-color: #fff !important; }
  .table-bordered th,
  .table-bordered td {
    border: 1px solid #ddd !important; } }

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url("../fonts/bootstrap/glyphicons-halflings-regular.eot");
  src: url("../fonts/bootstrap/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/bootstrap/glyphicons-halflings-regular.woff2") format("woff2"), url("../fonts/bootstrap/glyphicons-halflings-regular.woff") format("woff"), url("../fonts/bootstrap/glyphicons-halflings-regular.ttf") format("truetype"), url("../fonts/bootstrap/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg"); }

.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.glyphicon-asterisk:before {
  content: "\002a"; }

.glyphicon-plus:before {
  content: "\002b"; }

.glyphicon-euro:before,
.glyphicon-eur:before {
  content: "\20ac"; }

.glyphicon-minus:before {
  content: "\2212"; }

.glyphicon-cloud:before {
  content: "\2601"; }

.glyphicon-envelope:before {
  content: "\2709"; }

.glyphicon-pencil:before {
  content: "\270f"; }

.glyphicon-glass:before {
  content: "\e001"; }

.glyphicon-music:before {
  content: "\e002"; }

.glyphicon-search:before {
  content: "\e003"; }

.glyphicon-heart:before {
  content: "\e005"; }

.glyphicon-star:before {
  content: "\e006"; }

.glyphicon-star-empty:before {
  content: "\e007"; }

.glyphicon-user:before {
  content: "\e008"; }

.glyphicon-film:before {
  content: "\e009"; }

.glyphicon-th-large:before {
  content: "\e010"; }

.glyphicon-th:before {
  content: "\e011"; }

.glyphicon-th-list:before {
  content: "\e012"; }

.glyphicon-ok:before {
  content: "\e013"; }

.glyphicon-remove:before {
  content: "\e014"; }

.glyphicon-zoom-in:before {
  content: "\e015"; }

.glyphicon-zoom-out:before {
  content: "\e016"; }

.glyphicon-off:before {
  content: "\e017"; }

.glyphicon-signal:before {
  content: "\e018"; }

.glyphicon-cog:before {
  content: "\e019"; }

.glyphicon-trash:before {
  content: "\e020"; }

.glyphicon-home:before {
  content: "\e021"; }

.glyphicon-file:before {
  content: "\e022"; }

.glyphicon-time:before {
  content: "\e023"; }

.glyphicon-road:before {
  content: "\e024"; }

.glyphicon-download-alt:before {
  content: "\e025"; }

.glyphicon-download:before {
  content: "\e026"; }

.glyphicon-upload:before {
  content: "\e027"; }

.glyphicon-inbox:before {
  content: "\e028"; }

.glyphicon-play-circle:before {
  content: "\e029"; }

.glyphicon-repeat:before {
  content: "\e030"; }

.glyphicon-refresh:before {
  content: "\e031"; }

.glyphicon-list-alt:before {
  content: "\e032"; }

.glyphicon-lock:before {
  content: "\e033"; }

.glyphicon-flag:before {
  content: "\e034"; }

.glyphicon-headphones:before {
  content: "\e035"; }

.glyphicon-volume-off:before {
  content: "\e036"; }

.glyphicon-volume-down:before {
  content: "\e037"; }

.glyphicon-volume-up:before {
  content: "\e038"; }

.glyphicon-qrcode:before {
  content: "\e039"; }

.glyphicon-barcode:before {
  content: "\e040"; }

.glyphicon-tag:before {
  content: "\e041"; }

.glyphicon-tags:before {
  content: "\e042"; }

.glyphicon-book:before {
  content: "\e043"; }

.glyphicon-bookmark:before {
  content: "\e044"; }

.glyphicon-print:before {
  content: "\e045"; }

.glyphicon-camera:before {
  content: "\e046"; }

.glyphicon-font:before {
  content: "\e047"; }

.glyphicon-bold:before {
  content: "\e048"; }

.glyphicon-italic:before {
  content: "\e049"; }

.glyphicon-text-height:before {
  content: "\e050"; }

.glyphicon-text-width:before {
  content: "\e051"; }

.glyphicon-align-left:before {
  content: "\e052"; }

.glyphicon-align-center:before {
  content: "\e053"; }

.glyphicon-align-right:before {
  content: "\e054"; }

.glyphicon-align-justify:before {
  content: "\e055"; }

.glyphicon-list:before {
  content: "\e056"; }

.glyphicon-indent-left:before {
  content: "\e057"; }

.glyphicon-indent-right:before {
  content: "\e058"; }

.glyphicon-facetime-video:before {
  content: "\e059"; }

.glyphicon-picture:before {
  content: "\e060"; }

.glyphicon-map-marker:before {
  content: "\e062"; }

.glyphicon-adjust:before {
  content: "\e063"; }

.glyphicon-tint:before {
  content: "\e064"; }

.glyphicon-edit:before {
  content: "\e065"; }

.glyphicon-share:before {
  content: "\e066"; }

.glyphicon-check:before {
  content: "\e067"; }

.glyphicon-move:before {
  content: "\e068"; }

.glyphicon-step-backward:before {
  content: "\e069"; }

.glyphicon-fast-backward:before {
  content: "\e070"; }

.glyphicon-backward:before {
  content: "\e071"; }

.glyphicon-play:before {
  content: "\e072"; }

.glyphicon-pause:before {
  content: "\e073"; }

.glyphicon-stop:before {
  content: "\e074"; }

.glyphicon-forward:before {
  content: "\e075"; }

.glyphicon-fast-forward:before {
  content: "\e076"; }

.glyphicon-step-forward:before {
  content: "\e077"; }

.glyphicon-eject:before {
  content: "\e078"; }

.glyphicon-chevron-left:before {
  content: "\e079"; }

.glyphicon-chevron-right:before {
  content: "\e080"; }

.glyphicon-plus-sign:before {
  content: "\e081"; }

.glyphicon-minus-sign:before {
  content: "\e082"; }

.glyphicon-remove-sign:before {
  content: "\e083"; }

.glyphicon-ok-sign:before {
  content: "\e084"; }

.glyphicon-question-sign:before {
  content: "\e085"; }

.glyphicon-info-sign:before {
  content: "\e086"; }

.glyphicon-screenshot:before {
  content: "\e087"; }

.glyphicon-remove-circle:before {
  content: "\e088"; }

.glyphicon-ok-circle:before {
  content: "\e089"; }

.glyphicon-ban-circle:before {
  content: "\e090"; }

.glyphicon-arrow-left:before {
  content: "\e091"; }

.glyphicon-arrow-right:before {
  content: "\e092"; }

.glyphicon-arrow-up:before {
  content: "\e093"; }

.glyphicon-arrow-down:before {
  content: "\e094"; }

.glyphicon-share-alt:before {
  content: "\e095"; }

.glyphicon-resize-full:before {
  content: "\e096"; }

.glyphicon-resize-small:before {
  content: "\e097"; }

.glyphicon-exclamation-sign:before {
  content: "\e101"; }

.glyphicon-gift:before {
  content: "\e102"; }

.glyphicon-leaf:before {
  content: "\e103"; }

.glyphicon-fire:before {
  content: "\e104"; }

.glyphicon-eye-open:before {
  content: "\e105"; }

.glyphicon-eye-close:before {
  content: "\e106"; }

.glyphicon-warning-sign:before {
  content: "\e107"; }

.glyphicon-plane:before {
  content: "\e108"; }

.glyphicon-calendar:before {
  content: "\e109"; }

.glyphicon-random:before {
  content: "\e110"; }

.glyphicon-comment:before {
  content: "\e111"; }

.glyphicon-magnet:before {
  content: "\e112"; }

.glyphicon-chevron-up:before {
  content: "\e113"; }

.glyphicon-chevron-down:before {
  content: "\e114"; }

.glyphicon-retweet:before {
  content: "\e115"; }

.glyphicon-shopping-cart:before {
  content: "\e116"; }

.glyphicon-folder-close:before {
  content: "\e117"; }

.glyphicon-folder-open:before {
  content: "\e118"; }

.glyphicon-resize-vertical:before {
  content: "\e119"; }

.glyphicon-resize-horizontal:before {
  content: "\e120"; }

.glyphicon-hdd:before {
  content: "\e121"; }

.glyphicon-bullhorn:before {
  content: "\e122"; }

.glyphicon-bell:before {
  content: "\e123"; }

.glyphicon-certificate:before {
  content: "\e124"; }

.glyphicon-thumbs-up:before {
  content: "\e125"; }

.glyphicon-thumbs-down:before {
  content: "\e126"; }

.glyphicon-hand-right:before {
  content: "\e127"; }

.glyphicon-hand-left:before {
  content: "\e128"; }

.glyphicon-hand-up:before {
  content: "\e129"; }

.glyphicon-hand-down:before {
  content: "\e130"; }

.glyphicon-circle-arrow-right:before {
  content: "\e131"; }

.glyphicon-circle-arrow-left:before {
  content: "\e132"; }

.glyphicon-circle-arrow-up:before {
  content: "\e133"; }

.glyphicon-circle-arrow-down:before {
  content: "\e134"; }

.glyphicon-globe:before {
  content: "\e135"; }

.glyphicon-wrench:before {
  content: "\e136"; }

.glyphicon-tasks:before {
  content: "\e137"; }

.glyphicon-filter:before {
  content: "\e138"; }

.glyphicon-briefcase:before {
  content: "\e139"; }

.glyphicon-fullscreen:before {
  content: "\e140"; }

.glyphicon-dashboard:before {
  content: "\e141"; }

.glyphicon-paperclip:before {
  content: "\e142"; }

.glyphicon-heart-empty:before {
  content: "\e143"; }

.glyphicon-link:before {
  content: "\e144"; }

.glyphicon-phone:before {
  content: "\e145"; }

.glyphicon-pushpin:before {
  content: "\e146"; }

.glyphicon-usd:before {
  content: "\e148"; }

.glyphicon-gbp:before {
  content: "\e149"; }

.glyphicon-sort:before {
  content: "\e150"; }

.glyphicon-sort-by-alphabet:before {
  content: "\e151"; }

.glyphicon-sort-by-alphabet-alt:before {
  content: "\e152"; }

.glyphicon-sort-by-order:before {
  content: "\e153"; }

.glyphicon-sort-by-order-alt:before {
  content: "\e154"; }

.glyphicon-sort-by-attributes:before {
  content: "\e155"; }

.glyphicon-sort-by-attributes-alt:before {
  content: "\e156"; }

.glyphicon-unchecked:before {
  content: "\e157"; }

.glyphicon-expand:before {
  content: "\e158"; }

.glyphicon-collapse-down:before {
  content: "\e159"; }

.glyphicon-collapse-up:before {
  content: "\e160"; }

.glyphicon-log-in:before {
  content: "\e161"; }

.glyphicon-flash:before {
  content: "\e162"; }

.glyphicon-log-out:before {
  content: "\e163"; }

.glyphicon-new-window:before {
  content: "\e164"; }

.glyphicon-record:before {
  content: "\e165"; }

.glyphicon-save:before {
  content: "\e166"; }

.glyphicon-open:before {
  content: "\e167"; }

.glyphicon-saved:before {
  content: "\e168"; }

.glyphicon-import:before {
  content: "\e169"; }

.glyphicon-export:before {
  content: "\e170"; }

.glyphicon-send:before {
  content: "\e171"; }

.glyphicon-floppy-disk:before {
  content: "\e172"; }

.glyphicon-floppy-saved:before {
  content: "\e173"; }

.glyphicon-floppy-remove:before {
  content: "\e174"; }

.glyphicon-floppy-save:before {
  content: "\e175"; }

.glyphicon-floppy-open:before {
  content: "\e176"; }

.glyphicon-credit-card:before {
  content: "\e177"; }

.glyphicon-transfer:before {
  content: "\e178"; }

.glyphicon-cutlery:before {
  content: "\e179"; }

.glyphicon-header:before {
  content: "\e180"; }

.glyphicon-compressed:before {
  content: "\e181"; }

.glyphicon-earphone:before {
  content: "\e182"; }

.glyphicon-phone-alt:before {
  content: "\e183"; }

.glyphicon-tower:before {
  content: "\e184"; }

.glyphicon-stats:before {
  content: "\e185"; }

.glyphicon-sd-video:before {
  content: "\e186"; }

.glyphicon-hd-video:before {
  content: "\e187"; }

.glyphicon-subtitles:before {
  content: "\e188"; }

.glyphicon-sound-stereo:before {
  content: "\e189"; }

.glyphicon-sound-dolby:before {
  content: "\e190"; }

.glyphicon-sound-5-1:before {
  content: "\e191"; }

.glyphicon-sound-6-1:before {
  content: "\e192"; }

.glyphicon-sound-7-1:before {
  content: "\e193"; }

.glyphicon-copyright-mark:before {
  content: "\e194"; }

.glyphicon-registration-mark:before {
  content: "\e195"; }

.glyphicon-cloud-download:before {
  content: "\e197"; }

.glyphicon-cloud-upload:before {
  content: "\e198"; }

.glyphicon-tree-conifer:before {
  content: "\e199"; }

.glyphicon-tree-deciduous:before {
  content: "\e200"; }

.glyphicon-cd:before {
  content: "\e201"; }

.glyphicon-save-file:before {
  content: "\e202"; }

.glyphicon-open-file:before {
  content: "\e203"; }

.glyphicon-level-up:before {
  content: "\e204"; }

.glyphicon-copy:before {
  content: "\e205"; }

.glyphicon-paste:before {
  content: "\e206"; }

.glyphicon-alert:before {
  content: "\e209"; }

.glyphicon-equalizer:before {
  content: "\e210"; }

.glyphicon-king:before {
  content: "\e211"; }

.glyphicon-queen:before {
  content: "\e212"; }

.glyphicon-pawn:before {
  content: "\e213"; }

.glyphicon-bishop:before {
  content: "\e214"; }

.glyphicon-knight:before {
  content: "\e215"; }

.glyphicon-baby-formula:before {
  content: "\e216"; }

.glyphicon-tent:before {
  content: "\26fa"; }

.glyphicon-blackboard:before {
  content: "\e218"; }

.glyphicon-bed:before {
  content: "\e219"; }

.glyphicon-apple:before {
  content: "\f8ff"; }

.glyphicon-erase:before {
  content: "\e221"; }

.glyphicon-hourglass:before {
  content: "\231b"; }

.glyphicon-lamp:before {
  content: "\e223"; }

.glyphicon-duplicate:before {
  content: "\e224"; }

.glyphicon-piggy-bank:before {
  content: "\e225"; }

.glyphicon-scissors:before {
  content: "\e226"; }

.glyphicon-bitcoin:before {
  content: "\e227"; }

.glyphicon-btc:before {
  content: "\e227"; }

.glyphicon-xbt:before {
  content: "\e227"; }

.glyphicon-yen:before {
  content: "\00a5"; }

.glyphicon-jpy:before {
  content: "\00a5"; }

.glyphicon-ruble:before {
  content: "\20bd"; }

.glyphicon-rub:before {
  content: "\20bd"; }

.glyphicon-scale:before {
  content: "\e230"; }

.glyphicon-ice-lolly:before {
  content: "\e231"; }

.glyphicon-ice-lolly-tasted:before {
  content: "\e232"; }

.glyphicon-education:before {
  content: "\e233"; }

.glyphicon-option-horizontal:before {
  content: "\e234"; }

.glyphicon-option-vertical:before {
  content: "\e235"; }

.glyphicon-menu-hamburger:before {
  content: "\e236"; }

.glyphicon-modal-window:before {
  content: "\e237"; }

.glyphicon-oil:before {
  content: "\e238"; }

.glyphicon-grain:before {
  content: "\e239"; }

.glyphicon-sunglasses:before {
  content: "\e240"; }

.glyphicon-text-size:before {
  content: "\e241"; }

.glyphicon-text-color:before {
  content: "\e242"; }

.glyphicon-text-background:before {
  content: "\e243"; }

.glyphicon-object-align-top:before {
  content: "\e244"; }

.glyphicon-object-align-bottom:before {
  content: "\e245"; }

.glyphicon-object-align-horizontal:before {
  content: "\e246"; }

.glyphicon-object-align-left:before {
  content: "\e247"; }

.glyphicon-object-align-vertical:before {
  content: "\e248"; }

.glyphicon-object-align-right:before {
  content: "\e249"; }

.glyphicon-triangle-right:before {
  content: "\e250"; }

.glyphicon-triangle-left:before {
  content: "\e251"; }

.glyphicon-triangle-bottom:before {
  content: "\e252"; }

.glyphicon-triangle-top:before {
  content: "\e253"; }

.glyphicon-console:before {
  content: "\e254"; }

.glyphicon-superscript:before {
  content: "\e255"; }

.glyphicon-subscript:before {
  content: "\e256"; }

.glyphicon-menu-left:before {
  content: "\e257"; }

.glyphicon-menu-right:before {
  content: "\e258"; }

.glyphicon-menu-down:before {
  content: "\e259"; }

.glyphicon-menu-up:before {
  content: "\e260"; }

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

html {
  font-size: 10px;
  -webkit-tap-highlight-color: transparent; }

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857;
  color: #333333;
  background-color: #fff; }

input,
button,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit; }

a {
  color: #337ab7;
  text-decoration: none; }
  a:hover, a:focus {
    color: #23527c;
    text-decoration: underline; }
  a:focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px; }

figure {
  margin: 0; }

img {
  vertical-align: middle; }

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto; }

.img-rounded {
  border-radius: 6px; }

.img-thumbnail {
  padding: 4px;
  line-height: 1.42857;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  display: inline-block;
  max-width: 100%;
  height: auto; }

.img-circle {
  border-radius: 50%; }

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eeeeee; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0; }

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

[role="button"] {
  cursor: pointer; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: inherit;
  font-weight: 800;
  line-height: 1.1;
  color: inherit; }
  h1 small,
  h1 .small, h2 small,
  h2 .small, h3 small,
  h3 .small, h4 small,
  h4 .small, h5 small,
  h5 .small, h6 small,
  h6 .small,
  .h1 small,
  .h1 .small, .h2 small,
  .h2 .small, .h3 small,
  .h3 .small, .h4 small,
  .h4 .small, .h5 small,
  .h5 .small, .h6 small,
  .h6 .small {
    font-weight: normal;
    line-height: 1;
    color: #777777; }

h1, .h1,
h2, .h2,
h3, .h3 {
  margin-top: 20px;
  margin-bottom: 10px; }
  h1 small,
  h1 .small, .h1 small,
  .h1 .small,
  h2 small,
  h2 .small, .h2 small,
  .h2 .small,
  h3 small,
  h3 .small, .h3 small,
  .h3 .small {
    font-size: 65%; }

h4, .h4,
h5, .h5,
h6, .h6 {
  margin-top: 10px;
  margin-bottom: 10px; }
  h4 small,
  h4 .small, .h4 small,
  .h4 .small,
  h5 small,
  h5 .small, .h5 small,
  .h5 .small,
  h6 small,
  h6 .small, .h6 small,
  .h6 .small {
    font-size: 75%; }

h1, .h1 {
  font-size: 36px; }

h2, .h2 {
  font-size: 30px; }

h3, .h3 {
  font-size: 24px; }

h4, .h4 {
  font-size: 18px; }

h5, .h5 {
  font-size: 14px; }

h6, .h6 {
  font-size: 12px; }

p {
  margin: 0 0 10px; }

.lead {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4; }
  @media (min-width: 768px) {
    .lead {
      font-size: 21px; } }

small,
.small {
  font-size: 85%; }

mark,
.mark {
  background-color: #fcf8e3;
  padding: .2em; }

.text-left {
  text-align: left; }

.text-right {
  text-align: right; }

.text-center {
  text-align: center; }

.text-justify {
  text-align: justify; }

.text-nowrap {
  white-space: nowrap; }

.text-lowercase {
  text-transform: lowercase; }

.text-uppercase, .initialism {
  text-transform: uppercase; }

.text-capitalize {
  text-transform: capitalize; }

.text-muted {
  color: #777777; }

.text-primary {
  color: #337ab7; }

a.text-primary:hover,
a.text-primary:focus {
  color: #286090; }

.text-success {
  color: #3c763d; }

a.text-success:hover,
a.text-success:focus {
  color: #2b542c; }

.text-info {
  color: #31708f; }

a.text-info:hover,
a.text-info:focus {
  color: #245269; }

.text-warning {
  color: #8a6d3b; }

a.text-warning:hover,
a.text-warning:focus {
  color: #66512c; }

.text-danger {
  color: #a94442; }

a.text-danger:hover,
a.text-danger:focus {
  color: #843534; }

.bg-primary {
  color: #fff; }

.bg-primary {
  background-color: #337ab7; }

a.bg-primary:hover,
a.bg-primary:focus {
  background-color: #286090; }

.bg-success {
  background-color: #dff0d8; }

a.bg-success:hover,
a.bg-success:focus {
  background-color: #c1e2b3; }

.bg-info {
  background-color: #d9edf7; }

a.bg-info:hover,
a.bg-info:focus {
  background-color: #afd9ee; }

.bg-warning {
  background-color: #fcf8e3; }

a.bg-warning:hover,
a.bg-warning:focus {
  background-color: #f7ecb5; }

.bg-danger {
  background-color: #f2dede; }

a.bg-danger:hover,
a.bg-danger:focus {
  background-color: #e4b9b9; }

.page-header {
  padding-bottom: 9px;
  margin: 40px 0 20px;
  border-bottom: 1px solid #eeeeee; }

ul,
ol {
  margin-top: 0;
  margin-bottom: 10px; }
  ul ul,
  ul ol,
  ol ul,
  ol ol {
    margin-bottom: 0; }

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

.list-inline {
  padding-left: 0;
  list-style: none;
  margin-left: -5px; }
  .list-inline > li {
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px; }

dl {
  margin-top: 0;
  margin-bottom: 20px; }

dt,
dd {
  line-height: 1.42857; }

dt {
  font-weight: bold; }

dd {
  margin-left: 0; }

.dl-horizontal dd:before, .dl-horizontal dd:after {
  content: " ";
  display: table; }

.dl-horizontal dd:after {
  clear: both; }

@media (min-width: 768px) {
  .dl-horizontal dt {
    float: left;
    width: 160px;
    clear: left;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
  .dl-horizontal dd {
    margin-left: 180px; } }

abbr[title],
abbr[data-original-title] {
  cursor: help;
  border-bottom: 1px dotted #777777; }

.initialism {
  font-size: 90%; }

blockquote {
  padding: 10px 20px;
  margin: 0 0 20px;
  font-size: 17.5px;
  border-left: 5px solid #eeeeee; }
  blockquote p:last-child,
  blockquote ul:last-child,
  blockquote ol:last-child {
    margin-bottom: 0; }
  blockquote footer,
  blockquote small,
  blockquote .small {
    display: block;
    font-size: 80%;
    line-height: 1.42857;
    color: #777777; }
    blockquote footer:before,
    blockquote small:before,
    blockquote .small:before {
      content: '\2014 \00A0'; }

.blockquote-reverse,
blockquote.pull-right {
  padding-right: 15px;
  padding-left: 0;
  border-right: 5px solid #eeeeee;
  border-left: 0;
  text-align: right; }
  .blockquote-reverse footer:before,
  .blockquote-reverse small:before,
  .blockquote-reverse .small:before,
  blockquote.pull-right footer:before,
  blockquote.pull-right small:before,
  blockquote.pull-right .small:before {
    content: ''; }
  .blockquote-reverse footer:after,
  .blockquote-reverse small:after,
  .blockquote-reverse .small:after,
  blockquote.pull-right footer:after,
  blockquote.pull-right small:after,
  blockquote.pull-right .small:after {
    content: '\00A0 \2014'; }

address {
  margin-bottom: 20px;
  font-style: normal;
  line-height: 1.42857; }

code,
kbd,
pre,
samp {
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace; }

code {
  padding: 2px 4px;
  font-size: 90%;
  color: #c7254e;
  background-color: #f9f2f4;
  border-radius: 4px; }

kbd {
  padding: 2px 4px;
  font-size: 90%;
  color: #fff;
  background-color: #333;
  border-radius: 3px;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25); }
  kbd kbd {
    padding: 0;
    font-size: 100%;
    font-weight: bold;
    box-shadow: none; }

pre {
  display: block;
  padding: 9.5px;
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.42857;
  word-break: break-all;
  word-wrap: break-word;
  color: #333333;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 4px; }
  pre code {
    padding: 0;
    font-size: inherit;
    color: inherit;
    white-space: pre-wrap;
    background-color: transparent;
    border-radius: 0; }

.pre-scrollable {
  max-height: 340px;
  overflow-y: scroll; }

.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 5px;
  padding-right: 5px; }
  .container:before, .container:after {
    content: " ";
    display: table; }
  .container:after {
    clear: both; }
  @media (min-width: 768px) {
    .container {
      width: 730px; } }
  @media (min-width: 992px) {
    .container {
      width: 950px; } }
  @media (min-width: 1200px) {
    .container {
      width: 1150px; } }

.container-fluid {
  margin-right: auto;
  margin-left: auto;
  padding-left: 5px;
  padding-right: 5px; }
  .container-fluid:before, .container-fluid:after {
    content: " ";
    display: table; }
  .container-fluid:after {
    clear: both; }

.row {
  margin-left: -5px;
  margin-right: -5px; }
  .row:before, .row:after {
    content: " ";
    display: table; }
  .row:after {
    clear: both; }

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-left: 5px;
  padding-right: 5px; }

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  float: left; }

.col-xs-1 {
  width: 8.33333%; }

.col-xs-2 {
  width: 16.66667%; }

.col-xs-3 {
  width: 25%; }

.col-xs-4 {
  width: 33.33333%; }

.col-xs-5 {
  width: 41.66667%; }

.col-xs-6 {
  width: 50%; }

.col-xs-7 {
  width: 58.33333%; }

.col-xs-8 {
  width: 66.66667%; }

.col-xs-9 {
  width: 75%; }

.col-xs-10 {
  width: 83.33333%; }

.col-xs-11 {
  width: 91.66667%; }

.col-xs-12 {
  width: 100%; }

.col-xs-pull-0 {
  right: auto; }

.col-xs-pull-1 {
  right: 8.33333%; }

.col-xs-pull-2 {
  right: 16.66667%; }

.col-xs-pull-3 {
  right: 25%; }

.col-xs-pull-4 {
  right: 33.33333%; }

.col-xs-pull-5 {
  right: 41.66667%; }

.col-xs-pull-6 {
  right: 50%; }

.col-xs-pull-7 {
  right: 58.33333%; }

.col-xs-pull-8 {
  right: 66.66667%; }

.col-xs-pull-9 {
  right: 75%; }

.col-xs-pull-10 {
  right: 83.33333%; }

.col-xs-pull-11 {
  right: 91.66667%; }

.col-xs-pull-12 {
  right: 100%; }

.col-xs-push-0 {
  left: auto; }

.col-xs-push-1 {
  left: 8.33333%; }

.col-xs-push-2 {
  left: 16.66667%; }

.col-xs-push-3 {
  left: 25%; }

.col-xs-push-4 {
  left: 33.33333%; }

.col-xs-push-5 {
  left: 41.66667%; }

.col-xs-push-6 {
  left: 50%; }

.col-xs-push-7 {
  left: 58.33333%; }

.col-xs-push-8 {
  left: 66.66667%; }

.col-xs-push-9 {
  left: 75%; }

.col-xs-push-10 {
  left: 83.33333%; }

.col-xs-push-11 {
  left: 91.66667%; }

.col-xs-push-12 {
  left: 100%; }

.col-xs-offset-0 {
  margin-left: 0%; }

.col-xs-offset-1 {
  margin-left: 8.33333%; }

.col-xs-offset-2 {
  margin-left: 16.66667%; }

.col-xs-offset-3 {
  margin-left: 25%; }

.col-xs-offset-4 {
  margin-left: 33.33333%; }

.col-xs-offset-5 {
  margin-left: 41.66667%; }

.col-xs-offset-6 {
  margin-left: 50%; }

.col-xs-offset-7 {
  margin-left: 58.33333%; }

.col-xs-offset-8 {
  margin-left: 66.66667%; }

.col-xs-offset-9 {
  margin-left: 75%; }

.col-xs-offset-10 {
  margin-left: 83.33333%; }

.col-xs-offset-11 {
  margin-left: 91.66667%; }

.col-xs-offset-12 {
  margin-left: 100%; }

@media (min-width: 768px) {
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left; }
  .col-sm-1 {
    width: 8.33333%; }
  .col-sm-2 {
    width: 16.66667%; }
  .col-sm-3 {
    width: 25%; }
  .col-sm-4 {
    width: 33.33333%; }
  .col-sm-5 {
    width: 41.66667%; }
  .col-sm-6 {
    width: 50%; }
  .col-sm-7 {
    width: 58.33333%; }
  .col-sm-8 {
    width: 66.66667%; }
  .col-sm-9 {
    width: 75%; }
  .col-sm-10 {
    width: 83.33333%; }
  .col-sm-11 {
    width: 91.66667%; }
  .col-sm-12 {
    width: 100%; }
  .col-sm-pull-0 {
    right: auto; }
  .col-sm-pull-1 {
    right: 8.33333%; }
  .col-sm-pull-2 {
    right: 16.66667%; }
  .col-sm-pull-3 {
    right: 25%; }
  .col-sm-pull-4 {
    right: 33.33333%; }
  .col-sm-pull-5 {
    right: 41.66667%; }
  .col-sm-pull-6 {
    right: 50%; }
  .col-sm-pull-7 {
    right: 58.33333%; }
  .col-sm-pull-8 {
    right: 66.66667%; }
  .col-sm-pull-9 {
    right: 75%; }
  .col-sm-pull-10 {
    right: 83.33333%; }
  .col-sm-pull-11 {
    right: 91.66667%; }
  .col-sm-pull-12 {
    right: 100%; }
  .col-sm-push-0 {
    left: auto; }
  .col-sm-push-1 {
    left: 8.33333%; }
  .col-sm-push-2 {
    left: 16.66667%; }
  .col-sm-push-3 {
    left: 25%; }
  .col-sm-push-4 {
    left: 33.33333%; }
  .col-sm-push-5 {
    left: 41.66667%; }
  .col-sm-push-6 {
    left: 50%; }
  .col-sm-push-7 {
    left: 58.33333%; }
  .col-sm-push-8 {
    left: 66.66667%; }
  .col-sm-push-9 {
    left: 75%; }
  .col-sm-push-10 {
    left: 83.33333%; }
  .col-sm-push-11 {
    left: 91.66667%; }
  .col-sm-push-12 {
    left: 100%; }
  .col-sm-offset-0 {
    margin-left: 0%; }
  .col-sm-offset-1 {
    margin-left: 8.33333%; }
  .col-sm-offset-2 {
    margin-left: 16.66667%; }
  .col-sm-offset-3 {
    margin-left: 25%; }
  .col-sm-offset-4 {
    margin-left: 33.33333%; }
  .col-sm-offset-5 {
    margin-left: 41.66667%; }
  .col-sm-offset-6 {
    margin-left: 50%; }
  .col-sm-offset-7 {
    margin-left: 58.33333%; }
  .col-sm-offset-8 {
    margin-left: 66.66667%; }
  .col-sm-offset-9 {
    margin-left: 75%; }
  .col-sm-offset-10 {
    margin-left: 83.33333%; }
  .col-sm-offset-11 {
    margin-left: 91.66667%; }
  .col-sm-offset-12 {
    margin-left: 100%; } }

@media (min-width: 992px) {
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left; }
  .col-md-1 {
    width: 8.33333%; }
  .col-md-2 {
    width: 16.66667%; }
  .col-md-3 {
    width: 25%; }
  .col-md-4 {
    width: 33.33333%; }
  .col-md-5 {
    width: 41.66667%; }
  .col-md-6 {
    width: 50%; }
  .col-md-7 {
    width: 58.33333%; }
  .col-md-8 {
    width: 66.66667%; }
  .col-md-9 {
    width: 75%; }
  .col-md-10 {
    width: 83.33333%; }
  .col-md-11 {
    width: 91.66667%; }
  .col-md-12 {
    width: 100%; }
  .col-md-pull-0 {
    right: auto; }
  .col-md-pull-1 {
    right: 8.33333%; }
  .col-md-pull-2 {
    right: 16.66667%; }
  .col-md-pull-3 {
    right: 25%; }
  .col-md-pull-4 {
    right: 33.33333%; }
  .col-md-pull-5 {
    right: 41.66667%; }
  .col-md-pull-6 {
    right: 50%; }
  .col-md-pull-7 {
    right: 58.33333%; }
  .col-md-pull-8 {
    right: 66.66667%; }
  .col-md-pull-9 {
    right: 75%; }
  .col-md-pull-10 {
    right: 83.33333%; }
  .col-md-pull-11 {
    right: 91.66667%; }
  .col-md-pull-12 {
    right: 100%; }
  .col-md-push-0 {
    left: auto; }
  .col-md-push-1 {
    left: 8.33333%; }
  .col-md-push-2 {
    left: 16.66667%; }
  .col-md-push-3 {
    left: 25%; }
  .col-md-push-4 {
    left: 33.33333%; }
  .col-md-push-5 {
    left: 41.66667%; }
  .col-md-push-6 {
    left: 50%; }
  .col-md-push-7 {
    left: 58.33333%; }
  .col-md-push-8 {
    left: 66.66667%; }
  .col-md-push-9 {
    left: 75%; }
  .col-md-push-10 {
    left: 83.33333%; }
  .col-md-push-11 {
    left: 91.66667%; }
  .col-md-push-12 {
    left: 100%; }
  .col-md-offset-0 {
    margin-left: 0%; }
  .col-md-offset-1 {
    margin-left: 8.33333%; }
  .col-md-offset-2 {
    margin-left: 16.66667%; }
  .col-md-offset-3 {
    margin-left: 25%; }
  .col-md-offset-4 {
    margin-left: 33.33333%; }
  .col-md-offset-5 {
    margin-left: 41.66667%; }
  .col-md-offset-6 {
    margin-left: 50%; }
  .col-md-offset-7 {
    margin-left: 58.33333%; }
  .col-md-offset-8 {
    margin-left: 66.66667%; }
  .col-md-offset-9 {
    margin-left: 75%; }
  .col-md-offset-10 {
    margin-left: 83.33333%; }
  .col-md-offset-11 {
    margin-left: 91.66667%; }
  .col-md-offset-12 {
    margin-left: 100%; } }

@media (min-width: 1200px) {
  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    float: left; }
  .col-lg-1 {
    width: 8.33333%; }
  .col-lg-2 {
    width: 16.66667%; }
  .col-lg-3 {
    width: 25%; }
  .col-lg-4 {
    width: 33.33333%; }
  .col-lg-5 {
    width: 41.66667%; }
  .col-lg-6 {
    width: 50%; }
  .col-lg-7 {
    width: 58.33333%; }
  .col-lg-8 {
    width: 66.66667%; }
  .col-lg-9 {
    width: 75%; }
  .col-lg-10 {
    width: 83.33333%; }
  .col-lg-11 {
    width: 91.66667%; }
  .col-lg-12 {
    width: 100%; }
  .col-lg-pull-0 {
    right: auto; }
  .col-lg-pull-1 {
    right: 8.33333%; }
  .col-lg-pull-2 {
    right: 16.66667%; }
  .col-lg-pull-3 {
    right: 25%; }
  .col-lg-pull-4 {
    right: 33.33333%; }
  .col-lg-pull-5 {
    right: 41.66667%; }
  .col-lg-pull-6 {
    right: 50%; }
  .col-lg-pull-7 {
    right: 58.33333%; }
  .col-lg-pull-8 {
    right: 66.66667%; }
  .col-lg-pull-9 {
    right: 75%; }
  .col-lg-pull-10 {
    right: 83.33333%; }
  .col-lg-pull-11 {
    right: 91.66667%; }
  .col-lg-pull-12 {
    right: 100%; }
  .col-lg-push-0 {
    left: auto; }
  .col-lg-push-1 {
    left: 8.33333%; }
  .col-lg-push-2 {
    left: 16.66667%; }
  .col-lg-push-3 {
    left: 25%; }
  .col-lg-push-4 {
    left: 33.33333%; }
  .col-lg-push-5 {
    left: 41.66667%; }
  .col-lg-push-6 {
    left: 50%; }
  .col-lg-push-7 {
    left: 58.33333%; }
  .col-lg-push-8 {
    left: 66.66667%; }
  .col-lg-push-9 {
    left: 75%; }
  .col-lg-push-10 {
    left: 83.33333%; }
  .col-lg-push-11 {
    left: 91.66667%; }
  .col-lg-push-12 {
    left: 100%; }
  .col-lg-offset-0 {
    margin-left: 0%; }
  .col-lg-offset-1 {
    margin-left: 8.33333%; }
  .col-lg-offset-2 {
    margin-left: 16.66667%; }
  .col-lg-offset-3 {
    margin-left: 25%; }
  .col-lg-offset-4 {
    margin-left: 33.33333%; }
  .col-lg-offset-5 {
    margin-left: 41.66667%; }
  .col-lg-offset-6 {
    margin-left: 50%; }
  .col-lg-offset-7 {
    margin-left: 58.33333%; }
  .col-lg-offset-8 {
    margin-left: 66.66667%; }
  .col-lg-offset-9 {
    margin-left: 75%; }
  .col-lg-offset-10 {
    margin-left: 83.33333%; }
  .col-lg-offset-11 {
    margin-left: 91.66667%; }
  .col-lg-offset-12 {
    margin-left: 100%; } }

table {
  background-color: transparent; }

caption {
  padding-top: 8px;
  padding-bottom: 8px;
  color: #777777;
  text-align: left; }

th {
  text-align: left; }

.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px; }
  .table > thead > tr > th,
  .table > thead > tr > td,
  .table > tbody > tr > th,
  .table > tbody > tr > td,
  .table > tfoot > tr > th,
  .table > tfoot > tr > td {
    padding: 8px;
    line-height: 1.42857;
    vertical-align: top;
    border-top: 1px solid #ddd; }
  .table > thead > tr > th {
    vertical-align: bottom;
    border-bottom: 2px solid #ddd; }
  .table > caption + thead > tr:first-child > th,
  .table > caption + thead > tr:first-child > td,
  .table > colgroup + thead > tr:first-child > th,
  .table > colgroup + thead > tr:first-child > td,
  .table > thead:first-child > tr:first-child > th,
  .table > thead:first-child > tr:first-child > td {
    border-top: 0; }
  .table > tbody + tbody {
    border-top: 2px solid #ddd; }
  .table .table {
    background-color: #fff; }

.table-condensed > thead > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > th,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > th,
.table-condensed > tfoot > tr > td {
  padding: 5px; }

.table-bordered {
  border: 1px solid #ddd; }
  .table-bordered > thead > tr > th,
  .table-bordered > thead > tr > td,
  .table-bordered > tbody > tr > th,
  .table-bordered > tbody > tr > td,
  .table-bordered > tfoot > tr > th,
  .table-bordered > tfoot > tr > td {
    border: 1px solid #ddd; }
  .table-bordered > thead > tr > th,
  .table-bordered > thead > tr > td {
    border-bottom-width: 2px; }

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #f9f9f9; }

.table-hover > tbody > tr:hover {
  background-color: #f5f5f5; }

table col[class*="col-"] {
  position: static;
  float: none;
  display: table-column; }

table td[class*="col-"],
table th[class*="col-"] {
  position: static;
  float: none;
  display: table-cell; }

.table > thead > tr > td.active,
.table > thead > tr > th.active,
.table > thead > tr.active > td,
.table > thead > tr.active > th,
.table > tbody > tr > td.active,
.table > tbody > tr > th.active,
.table > tbody > tr.active > td,
.table > tbody > tr.active > th,
.table > tfoot > tr > td.active,
.table > tfoot > tr > th.active,
.table > tfoot > tr.active > td,
.table > tfoot > tr.active > th {
  background-color: #f5f5f5; }

.table-hover > tbody > tr > td.active:hover,
.table-hover > tbody > tr > th.active:hover,
.table-hover > tbody > tr.active:hover > td,
.table-hover > tbody > tr:hover > .active,
.table-hover > tbody > tr.active:hover > th {
  background-color: #e8e8e8; }

.table > thead > tr > td.success,
.table > thead > tr > th.success,
.table > thead > tr.success > td,
.table > thead > tr.success > th,
.table > tbody > tr > td.success,
.table > tbody > tr > th.success,
.table > tbody > tr.success > td,
.table > tbody > tr.success > th,
.table > tfoot > tr > td.success,
.table > tfoot > tr > th.success,
.table > tfoot > tr.success > td,
.table > tfoot > tr.success > th {
  background-color: #dff0d8; }

.table-hover > tbody > tr > td.success:hover,
.table-hover > tbody > tr > th.success:hover,
.table-hover > tbody > tr.success:hover > td,
.table-hover > tbody > tr:hover > .success,
.table-hover > tbody > tr.success:hover > th {
  background-color: #d0e9c6; }

.table > thead > tr > td.info,
.table > thead > tr > th.info,
.table > thead > tr.info > td,
.table > thead > tr.info > th,
.table > tbody > tr > td.info,
.table > tbody > tr > th.info,
.table > tbody > tr.info > td,
.table > tbody > tr.info > th,
.table > tfoot > tr > td.info,
.table > tfoot > tr > th.info,
.table > tfoot > tr.info > td,
.table > tfoot > tr.info > th {
  background-color: #d9edf7; }

.table-hover > tbody > tr > td.info:hover,
.table-hover > tbody > tr > th.info:hover,
.table-hover > tbody > tr.info:hover > td,
.table-hover > tbody > tr:hover > .info,
.table-hover > tbody > tr.info:hover > th {
  background-color: #c4e3f3; }

.table > thead > tr > td.warning,
.table > thead > tr > th.warning,
.table > thead > tr.warning > td,
.table > thead > tr.warning > th,
.table > tbody > tr > td.warning,
.table > tbody > tr > th.warning,
.table > tbody > tr.warning > td,
.table > tbody > tr.warning > th,
.table > tfoot > tr > td.warning,
.table > tfoot > tr > th.warning,
.table > tfoot > tr.warning > td,
.table > tfoot > tr.warning > th {
  background-color: #fcf8e3; }

.table-hover > tbody > tr > td.warning:hover,
.table-hover > tbody > tr > th.warning:hover,
.table-hover > tbody > tr.warning:hover > td,
.table-hover > tbody > tr:hover > .warning,
.table-hover > tbody > tr.warning:hover > th {
  background-color: #faf2cc; }

.table > thead > tr > td.danger,
.table > thead > tr > th.danger,
.table > thead > tr.danger > td,
.table > thead > tr.danger > th,
.table > tbody > tr > td.danger,
.table > tbody > tr > th.danger,
.table > tbody > tr.danger > td,
.table > tbody > tr.danger > th,
.table > tfoot > tr > td.danger,
.table > tfoot > tr > th.danger,
.table > tfoot > tr.danger > td,
.table > tfoot > tr.danger > th {
  background-color: #f2dede; }

.table-hover > tbody > tr > td.danger:hover,
.table-hover > tbody > tr > th.danger:hover,
.table-hover > tbody > tr.danger:hover > td,
.table-hover > tbody > tr:hover > .danger,
.table-hover > tbody > tr.danger:hover > th {
  background-color: #ebcccc; }

.table-responsive {
  overflow-x: auto;
  min-height: 0.01%; }
  @media screen and (max-width: 767px) {
    .table-responsive {
      width: 100%;
      margin-bottom: 15px;
      overflow-y: hidden;
      -ms-overflow-style: -ms-autohiding-scrollbar;
      border: 1px solid #ddd; }
      .table-responsive > .table {
        margin-bottom: 0; }
        .table-responsive > .table > thead > tr > th,
        .table-responsive > .table > thead > tr > td,
        .table-responsive > .table > tbody > tr > th,
        .table-responsive > .table > tbody > tr > td,
        .table-responsive > .table > tfoot > tr > th,
        .table-responsive > .table > tfoot > tr > td {
          white-space: nowrap; }
      .table-responsive > .table-bordered {
        border: 0; }
        .table-responsive > .table-bordered > thead > tr > th:first-child,
        .table-responsive > .table-bordered > thead > tr > td:first-child,
        .table-responsive > .table-bordered > tbody > tr > th:first-child,
        .table-responsive > .table-bordered > tbody > tr > td:first-child,
        .table-responsive > .table-bordered > tfoot > tr > th:first-child,
        .table-responsive > .table-bordered > tfoot > tr > td:first-child {
          border-left: 0; }
        .table-responsive > .table-bordered > thead > tr > th:last-child,
        .table-responsive > .table-bordered > thead > tr > td:last-child,
        .table-responsive > .table-bordered > tbody > tr > th:last-child,
        .table-responsive > .table-bordered > tbody > tr > td:last-child,
        .table-responsive > .table-bordered > tfoot > tr > th:last-child,
        .table-responsive > .table-bordered > tfoot > tr > td:last-child {
          border-right: 0; }
        .table-responsive > .table-bordered > tbody > tr:last-child > th,
        .table-responsive > .table-bordered > tbody > tr:last-child > td,
        .table-responsive > .table-bordered > tfoot > tr:last-child > th,
        .table-responsive > .table-bordered > tfoot > tr:last-child > td {
          border-bottom: 0; } }

fieldset {
  padding: 0;
  margin: 0;
  border: 0;
  min-width: 0; }

legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 20px;
  font-size: 21px;
  line-height: inherit;
  color: #333333;
  border: 0;
  border-bottom: 1px solid #e5e5e5; }

label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: bold; }

input[type="search"] {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

input[type="radio"],
input[type="checkbox"] {
  margin: 4px 0 0;
  margin-top: 1px \9;
  line-height: normal; }

input[type="file"] {
  display: block; }

input[type="range"] {
  display: block;
  width: 100%; }

select[multiple],
select[size] {
  height: auto; }

input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px; }

output {
  display: block;
  padding-top: 7px;
  font-size: 14px;
  line-height: 1.42857;
  color: #555555; }

.form-control {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857;
  color: #555555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; }
  .form-control:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); }
  .form-control::-moz-placeholder {
    color: #999;
    opacity: 1; }
  .form-control:-ms-input-placeholder {
    color: #999; }
  .form-control::-webkit-input-placeholder {
    color: #999; }
  .form-control::-ms-expand {
    border: 0;
    background-color: transparent; }
  .form-control[disabled], .form-control[readonly],
  fieldset[disabled] .form-control {
    background-color: #eeeeee;
    opacity: 1; }
  .form-control[disabled],
  fieldset[disabled] .form-control {
    cursor: not-allowed; }

textarea.form-control {
  height: auto; }

input[type="search"] {
  -webkit-appearance: none; }

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  input[type="date"].form-control,
  input[type="time"].form-control,
  input[type="datetime-local"].form-control,
  input[type="month"].form-control {
    line-height: 34px; }
  input[type="date"].input-sm, .input-group-sm > input[type="date"].form-control,
  .input-group-sm > input[type="date"].input-group-addon,
  .input-group-sm > .input-group-btn > input[type="date"].btn,
  .input-group-sm input[type="date"],
  input[type="time"].input-sm,
  .input-group-sm > input[type="time"].form-control,
  .input-group-sm > input[type="time"].input-group-addon,
  .input-group-sm > .input-group-btn > input[type="time"].btn,
  .input-group-sm
  input[type="time"],
  input[type="datetime-local"].input-sm,
  .input-group-sm > input[type="datetime-local"].form-control,
  .input-group-sm > input[type="datetime-local"].input-group-addon,
  .input-group-sm > .input-group-btn > input[type="datetime-local"].btn,
  .input-group-sm
  input[type="datetime-local"],
  input[type="month"].input-sm,
  .input-group-sm > input[type="month"].form-control,
  .input-group-sm > input[type="month"].input-group-addon,
  .input-group-sm > .input-group-btn > input[type="month"].btn,
  .input-group-sm
  input[type="month"] {
    line-height: 30px; }
  input[type="date"].input-lg, .input-group-lg > input[type="date"].form-control,
  .input-group-lg > input[type="date"].input-group-addon,
  .input-group-lg > .input-group-btn > input[type="date"].btn,
  .input-group-lg input[type="date"],
  input[type="time"].input-lg,
  .input-group-lg > input[type="time"].form-control,
  .input-group-lg > input[type="time"].input-group-addon,
  .input-group-lg > .input-group-btn > input[type="time"].btn,
  .input-group-lg
  input[type="time"],
  input[type="datetime-local"].input-lg,
  .input-group-lg > input[type="datetime-local"].form-control,
  .input-group-lg > input[type="datetime-local"].input-group-addon,
  .input-group-lg > .input-group-btn > input[type="datetime-local"].btn,
  .input-group-lg
  input[type="datetime-local"],
  input[type="month"].input-lg,
  .input-group-lg > input[type="month"].form-control,
  .input-group-lg > input[type="month"].input-group-addon,
  .input-group-lg > .input-group-btn > input[type="month"].btn,
  .input-group-lg
  input[type="month"] {
    line-height: 46px; } }

.form-group {
  margin-bottom: 15px; }

.radio,
.checkbox {
  position: relative;
  display: block;
  margin-top: 10px;
  margin-bottom: 10px; }
  .radio label,
  .checkbox label {
    min-height: 20px;
    padding-left: 20px;
    margin-bottom: 0;
    font-weight: normal;
    cursor: pointer; }

.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
  position: absolute;
  margin-left: -20px;
  margin-top: 4px \9; }

.radio + .radio,
.checkbox + .checkbox {
  margin-top: -5px; }

.radio-inline,
.checkbox-inline {
  position: relative;
  display: inline-block;
  padding-left: 20px;
  margin-bottom: 0;
  vertical-align: middle;
  font-weight: normal;
  cursor: pointer; }

.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
  margin-top: 0;
  margin-left: 10px; }

input[type="radio"][disabled], input[type="radio"].disabled,
fieldset[disabled] input[type="radio"],
input[type="checkbox"][disabled],
input[type="checkbox"].disabled,
fieldset[disabled]
input[type="checkbox"] {
  cursor: not-allowed; }

.radio-inline.disabled,
fieldset[disabled] .radio-inline,
.checkbox-inline.disabled,
fieldset[disabled]
.checkbox-inline {
  cursor: not-allowed; }

.radio.disabled label,
fieldset[disabled] .radio label,
.checkbox.disabled label,
fieldset[disabled]
.checkbox label {
  cursor: not-allowed; }

.form-control-static {
  padding-top: 7px;
  padding-bottom: 7px;
  margin-bottom: 0;
  min-height: 34px; }
  .form-control-static.input-lg, .input-group-lg > .form-control-static.form-control,
  .input-group-lg > .form-control-static.input-group-addon,
  .input-group-lg > .input-group-btn > .form-control-static.btn, .form-control-static.input-sm, .input-group-sm > .form-control-static.form-control,
  .input-group-sm > .form-control-static.input-group-addon,
  .input-group-sm > .input-group-btn > .form-control-static.btn {
    padding-left: 0;
    padding-right: 0; }

.input-sm, .input-group-sm > .form-control,
.input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .btn {
  height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px; }

select.input-sm, .input-group-sm > select.form-control,
.input-group-sm > select.input-group-addon,
.input-group-sm > .input-group-btn > select.btn {
  height: 30px;
  line-height: 30px; }

textarea.input-sm, .input-group-sm > textarea.form-control,
.input-group-sm > textarea.input-group-addon,
.input-group-sm > .input-group-btn > textarea.btn,
select[multiple].input-sm,
.input-group-sm > select[multiple].form-control,
.input-group-sm > select[multiple].input-group-addon,
.input-group-sm > .input-group-btn > select[multiple].btn {
  height: auto; }

.form-group-sm .form-control {
  height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px; }

.form-group-sm select.form-control {
  height: 30px;
  line-height: 30px; }

.form-group-sm textarea.form-control,
.form-group-sm select[multiple].form-control {
  height: auto; }

.form-group-sm .form-control-static {
  height: 30px;
  min-height: 32px;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.5; }

.input-lg, .input-group-lg > .form-control,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn {
  height: 46px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33333;
  border-radius: 6px; }

select.input-lg, .input-group-lg > select.form-control,
.input-group-lg > select.input-group-addon,
.input-group-lg > .input-group-btn > select.btn {
  height: 46px;
  line-height: 46px; }

textarea.input-lg, .input-group-lg > textarea.form-control,
.input-group-lg > textarea.input-group-addon,
.input-group-lg > .input-group-btn > textarea.btn,
select[multiple].input-lg,
.input-group-lg > select[multiple].form-control,
.input-group-lg > select[multiple].input-group-addon,
.input-group-lg > .input-group-btn > select[multiple].btn {
  height: auto; }

.form-group-lg .form-control {
  height: 46px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33333;
  border-radius: 6px; }

.form-group-lg select.form-control {
  height: 46px;
  line-height: 46px; }

.form-group-lg textarea.form-control,
.form-group-lg select[multiple].form-control {
  height: auto; }

.form-group-lg .form-control-static {
  height: 46px;
  min-height: 38px;
  padding: 11px 16px;
  font-size: 18px;
  line-height: 1.33333; }

.has-feedback {
  position: relative; }
  .has-feedback .form-control {
    padding-right: 42.5px; }

.form-control-feedback {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: block;
  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  pointer-events: none; }

.input-lg + .form-control-feedback, .input-group-lg > .form-control + .form-control-feedback,
.input-group-lg > .input-group-addon + .form-control-feedback,
.input-group-lg > .input-group-btn > .btn + .form-control-feedback,
.input-group-lg + .form-control-feedback,
.form-group-lg .form-control + .form-control-feedback {
  width: 46px;
  height: 46px;
  line-height: 46px; }

.input-sm + .form-control-feedback, .input-group-sm > .form-control + .form-control-feedback,
.input-group-sm > .input-group-addon + .form-control-feedback,
.input-group-sm > .input-group-btn > .btn + .form-control-feedback,
.input-group-sm + .form-control-feedback,
.form-group-sm .form-control + .form-control-feedback {
  width: 30px;
  height: 30px;
  line-height: 30px; }

.has-success .help-block,
.has-success .control-label,
.has-success .radio,
.has-success .checkbox,
.has-success .radio-inline,
.has-success .checkbox-inline,
.has-success.radio label,
.has-success.checkbox label,
.has-success.radio-inline label,
.has-success.checkbox-inline label {
  color: #3c763d; }

.has-success .form-control {
  border-color: #3c763d;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); }
  .has-success .form-control:focus {
    border-color: #2b542c;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168; }

.has-success .input-group-addon {
  color: #3c763d;
  border-color: #3c763d;
  background-color: #dff0d8; }

.has-success .form-control-feedback {
  color: #3c763d; }

.has-warning .help-block,
.has-warning .control-label,
.has-warning .radio,
.has-warning .checkbox,
.has-warning .radio-inline,
.has-warning .checkbox-inline,
.has-warning.radio label,
.has-warning.checkbox label,
.has-warning.radio-inline label,
.has-warning.checkbox-inline label {
  color: #8a6d3b; }

.has-warning .form-control {
  border-color: #8a6d3b;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); }
  .has-warning .form-control:focus {
    border-color: #66512c;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b; }

.has-warning .input-group-addon {
  color: #8a6d3b;
  border-color: #8a6d3b;
  background-color: #fcf8e3; }

.has-warning .form-control-feedback {
  color: #8a6d3b; }

.has-error .help-block,
.has-error .control-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline,
.has-error.radio label,
.has-error.checkbox label,
.has-error.radio-inline label,
.has-error.checkbox-inline label {
  color: #a94442; }

.has-error .form-control {
  border-color: #a94442;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); }
  .has-error .form-control:focus {
    border-color: #843534;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483; }

.has-error .input-group-addon {
  color: #a94442;
  border-color: #a94442;
  background-color: #f2dede; }

.has-error .form-control-feedback {
  color: #a94442; }

.has-feedback label ~ .form-control-feedback {
  top: 25px; }

.has-feedback label.sr-only ~ .form-control-feedback {
  top: 0; }

.help-block {
  display: block;
  margin-top: 5px;
  margin-bottom: 10px;
  color: #737373; }

@media (min-width: 768px) {
  .form-inline .form-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle; }
  .form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle; }
  .form-inline .form-control-static {
    display: inline-block; }
  .form-inline .input-group {
    display: inline-table;
    vertical-align: middle; }
    .form-inline .input-group .input-group-addon,
    .form-inline .input-group .input-group-btn,
    .form-inline .input-group .form-control {
      width: auto; }
  .form-inline .input-group > .form-control {
    width: 100%; }
  .form-inline .control-label {
    margin-bottom: 0;
    vertical-align: middle; }
  .form-inline .radio,
  .form-inline .checkbox {
    display: inline-block;
    margin-top: 0;
    margin-bottom: 0;
    vertical-align: middle; }
    .form-inline .radio label,
    .form-inline .checkbox label {
      padding-left: 0; }
  .form-inline .radio input[type="radio"],
  .form-inline .checkbox input[type="checkbox"] {
    position: relative;
    margin-left: 0; }
  .form-inline .has-feedback .form-control-feedback {
    top: 0; } }

.form-horizontal .radio,
.form-horizontal .checkbox,
.form-horizontal .radio-inline,
.form-horizontal .checkbox-inline {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 7px; }

.form-horizontal .radio,
.form-horizontal .checkbox {
  min-height: 27px; }

.form-horizontal .form-group {
  margin-left: -5px;
  margin-right: -5px; }
  .form-horizontal .form-group:before, .form-horizontal .form-group:after {
    content: " ";
    display: table; }
  .form-horizontal .form-group:after {
    clear: both; }

@media (min-width: 768px) {
  .form-horizontal .control-label {
    text-align: right;
    margin-bottom: 0;
    padding-top: 7px; } }

.form-horizontal .has-feedback .form-control-feedback {
  right: 5px; }

@media (min-width: 768px) {
  .form-horizontal .form-group-lg .control-label {
    padding-top: 11px;
    font-size: 18px; } }

@media (min-width: 768px) {
  .form-horizontal .form-group-sm .control-label {
    padding-top: 6px;
    font-size: 12px; } }

.btn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }
  .btn:focus, .btn.focus, .btn:active:focus, .btn:active.focus, .btn.active:focus, .btn.active.focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px; }
  .btn:hover, .btn:focus, .btn.focus {
    color: #333;
    text-decoration: none; }
  .btn:active, .btn.active {
    outline: 0;
    background-image: none;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }
  .btn.disabled, .btn[disabled],
  fieldset[disabled] .btn {
    cursor: not-allowed;
    opacity: 0.65;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none; }

a.btn.disabled,
fieldset[disabled] a.btn {
  pointer-events: none; }

.btn-default {
  color: #333;
  background-color: #fff;
  border-color: #ccc; }
  .btn-default:focus, .btn-default.focus {
    color: #333;
    background-color: #e6e6e6;
    border-color: #8c8c8c; }
  .btn-default:hover {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad; }
  .btn-default:active, .btn-default.active,
  .open > .btn-default.dropdown-toggle {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad; }
    .btn-default:active:hover, .btn-default:active:focus, .btn-default:active.focus, .btn-default.active:hover, .btn-default.active:focus, .btn-default.active.focus,
    .open > .btn-default.dropdown-toggle:hover,
    .open > .btn-default.dropdown-toggle:focus,
    .open > .btn-default.dropdown-toggle.focus {
      color: #333;
      background-color: #d4d4d4;
      border-color: #8c8c8c; }
  .btn-default:active, .btn-default.active,
  .open > .btn-default.dropdown-toggle {
    background-image: none; }
  .btn-default.disabled:hover, .btn-default.disabled:focus, .btn-default.disabled.focus, .btn-default[disabled]:hover, .btn-default[disabled]:focus, .btn-default[disabled].focus,
  fieldset[disabled] .btn-default:hover,
  fieldset[disabled] .btn-default:focus,
  fieldset[disabled] .btn-default.focus {
    background-color: #fff;
    border-color: #ccc; }
  .btn-default .badge {
    color: #fff;
    background-color: #333; }

.btn-primary {
  color: #fff;
  background-color: #337ab7;
  border-color: #2e6da4; }
  .btn-primary:focus, .btn-primary.focus {
    color: #fff;
    background-color: #286090;
    border-color: #122b40; }
  .btn-primary:hover {
    color: #fff;
    background-color: #286090;
    border-color: #204d74; }
  .btn-primary:active, .btn-primary.active,
  .open > .btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #286090;
    border-color: #204d74; }
    .btn-primary:active:hover, .btn-primary:active:focus, .btn-primary:active.focus, .btn-primary.active:hover, .btn-primary.active:focus, .btn-primary.active.focus,
    .open > .btn-primary.dropdown-toggle:hover,
    .open > .btn-primary.dropdown-toggle:focus,
    .open > .btn-primary.dropdown-toggle.focus {
      color: #fff;
      background-color: #204d74;
      border-color: #122b40; }
  .btn-primary:active, .btn-primary.active,
  .open > .btn-primary.dropdown-toggle {
    background-image: none; }
  .btn-primary.disabled:hover, .btn-primary.disabled:focus, .btn-primary.disabled.focus, .btn-primary[disabled]:hover, .btn-primary[disabled]:focus, .btn-primary[disabled].focus,
  fieldset[disabled] .btn-primary:hover,
  fieldset[disabled] .btn-primary:focus,
  fieldset[disabled] .btn-primary.focus {
    background-color: #337ab7;
    border-color: #2e6da4; }
  .btn-primary .badge {
    color: #337ab7;
    background-color: #fff; }

.btn-success {
  color: #fff;
  background-color: #5cb85c;
  border-color: #4cae4c; }
  .btn-success:focus, .btn-success.focus {
    color: #fff;
    background-color: #449d44;
    border-color: #255625; }
  .btn-success:hover {
    color: #fff;
    background-color: #449d44;
    border-color: #398439; }
  .btn-success:active, .btn-success.active,
  .open > .btn-success.dropdown-toggle {
    color: #fff;
    background-color: #449d44;
    border-color: #398439; }
    .btn-success:active:hover, .btn-success:active:focus, .btn-success:active.focus, .btn-success.active:hover, .btn-success.active:focus, .btn-success.active.focus,
    .open > .btn-success.dropdown-toggle:hover,
    .open > .btn-success.dropdown-toggle:focus,
    .open > .btn-success.dropdown-toggle.focus {
      color: #fff;
      background-color: #398439;
      border-color: #255625; }
  .btn-success:active, .btn-success.active,
  .open > .btn-success.dropdown-toggle {
    background-image: none; }
  .btn-success.disabled:hover, .btn-success.disabled:focus, .btn-success.disabled.focus, .btn-success[disabled]:hover, .btn-success[disabled]:focus, .btn-success[disabled].focus,
  fieldset[disabled] .btn-success:hover,
  fieldset[disabled] .btn-success:focus,
  fieldset[disabled] .btn-success.focus {
    background-color: #5cb85c;
    border-color: #4cae4c; }
  .btn-success .badge {
    color: #5cb85c;
    background-color: #fff; }

.btn-info {
  color: #fff;
  background-color: #5bc0de;
  border-color: #46b8da; }
  .btn-info:focus, .btn-info.focus {
    color: #fff;
    background-color: #31b0d5;
    border-color: #1b6d85; }
  .btn-info:hover {
    color: #fff;
    background-color: #31b0d5;
    border-color: #269abc; }
  .btn-info:active, .btn-info.active,
  .open > .btn-info.dropdown-toggle {
    color: #fff;
    background-color: #31b0d5;
    border-color: #269abc; }
    .btn-info:active:hover, .btn-info:active:focus, .btn-info:active.focus, .btn-info.active:hover, .btn-info.active:focus, .btn-info.active.focus,
    .open > .btn-info.dropdown-toggle:hover,
    .open > .btn-info.dropdown-toggle:focus,
    .open > .btn-info.dropdown-toggle.focus {
      color: #fff;
      background-color: #269abc;
      border-color: #1b6d85; }
  .btn-info:active, .btn-info.active,
  .open > .btn-info.dropdown-toggle {
    background-image: none; }
  .btn-info.disabled:hover, .btn-info.disabled:focus, .btn-info.disabled.focus, .btn-info[disabled]:hover, .btn-info[disabled]:focus, .btn-info[disabled].focus,
  fieldset[disabled] .btn-info:hover,
  fieldset[disabled] .btn-info:focus,
  fieldset[disabled] .btn-info.focus {
    background-color: #5bc0de;
    border-color: #46b8da; }
  .btn-info .badge {
    color: #5bc0de;
    background-color: #fff; }

.btn-warning {
  color: #fff;
  background-color: #f0ad4e;
  border-color: #eea236; }
  .btn-warning:focus, .btn-warning.focus {
    color: #fff;
    background-color: #ec971f;
    border-color: #985f0d; }
  .btn-warning:hover {
    color: #fff;
    background-color: #ec971f;
    border-color: #d58512; }
  .btn-warning:active, .btn-warning.active,
  .open > .btn-warning.dropdown-toggle {
    color: #fff;
    background-color: #ec971f;
    border-color: #d58512; }
    .btn-warning:active:hover, .btn-warning:active:focus, .btn-warning:active.focus, .btn-warning.active:hover, .btn-warning.active:focus, .btn-warning.active.focus,
    .open > .btn-warning.dropdown-toggle:hover,
    .open > .btn-warning.dropdown-toggle:focus,
    .open > .btn-warning.dropdown-toggle.focus {
      color: #fff;
      background-color: #d58512;
      border-color: #985f0d; }
  .btn-warning:active, .btn-warning.active,
  .open > .btn-warning.dropdown-toggle {
    background-image: none; }
  .btn-warning.disabled:hover, .btn-warning.disabled:focus, .btn-warning.disabled.focus, .btn-warning[disabled]:hover, .btn-warning[disabled]:focus, .btn-warning[disabled].focus,
  fieldset[disabled] .btn-warning:hover,
  fieldset[disabled] .btn-warning:focus,
  fieldset[disabled] .btn-warning.focus {
    background-color: #f0ad4e;
    border-color: #eea236; }
  .btn-warning .badge {
    color: #f0ad4e;
    background-color: #fff; }

.btn-danger {
  color: #fff;
  background-color: #d9534f;
  border-color: #d43f3a; }
  .btn-danger:focus, .btn-danger.focus {
    color: #fff;
    background-color: #c9302c;
    border-color: #761c19; }
  .btn-danger:hover {
    color: #fff;
    background-color: #c9302c;
    border-color: #ac2925; }
  .btn-danger:active, .btn-danger.active,
  .open > .btn-danger.dropdown-toggle {
    color: #fff;
    background-color: #c9302c;
    border-color: #ac2925; }
    .btn-danger:active:hover, .btn-danger:active:focus, .btn-danger:active.focus, .btn-danger.active:hover, .btn-danger.active:focus, .btn-danger.active.focus,
    .open > .btn-danger.dropdown-toggle:hover,
    .open > .btn-danger.dropdown-toggle:focus,
    .open > .btn-danger.dropdown-toggle.focus {
      color: #fff;
      background-color: #ac2925;
      border-color: #761c19; }
  .btn-danger:active, .btn-danger.active,
  .open > .btn-danger.dropdown-toggle {
    background-image: none; }
  .btn-danger.disabled:hover, .btn-danger.disabled:focus, .btn-danger.disabled.focus, .btn-danger[disabled]:hover, .btn-danger[disabled]:focus, .btn-danger[disabled].focus,
  fieldset[disabled] .btn-danger:hover,
  fieldset[disabled] .btn-danger:focus,
  fieldset[disabled] .btn-danger.focus {
    background-color: #d9534f;
    border-color: #d43f3a; }
  .btn-danger .badge {
    color: #d9534f;
    background-color: #fff; }

.btn-link {
  color: #337ab7;
  font-weight: normal;
  border-radius: 0; }
  .btn-link, .btn-link:active, .btn-link.active, .btn-link[disabled],
  fieldset[disabled] .btn-link {
    background-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none; }
  .btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active {
    border-color: transparent; }
  .btn-link:hover, .btn-link:focus {
    color: #23527c;
    text-decoration: underline;
    background-color: transparent; }
  .btn-link[disabled]:hover, .btn-link[disabled]:focus,
  fieldset[disabled] .btn-link:hover,
  fieldset[disabled] .btn-link:focus {
    color: #777777;
    text-decoration: none; }

.btn-lg, .btn-group-lg > .btn {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33333;
  border-radius: 6px; }

.btn-sm, .btn-group-sm > .btn {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px; }

.btn-xs, .btn-group-xs > .btn {
  padding: 1px 5px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px; }

.btn-block {
  display: block;
  width: 100%; }

.btn-block + .btn-block {
  margin-top: 5px; }

input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button"].btn-block {
  width: 100%; }

.fade {
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
  -o-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear; }
  .fade.in {
    opacity: 1; }

.collapse {
  display: none; }
  .collapse.in {
    display: block; }

tr.collapse.in {
  display: table-row; }

tbody.collapse.in {
  display: table-row-group; }

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition-property: height, visibility;
  transition-property: height, visibility;
  -webkit-transition-duration: 0.35s;
  transition-duration: 0.35s;
  -webkit-transition-timing-function: ease;
  transition-timing-function: ease; }

.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px dashed;
  border-top: 4px solid \9;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent; }

.dropup,
.dropdown {
  position: relative; }

.dropdown-toggle:focus {
  outline: 0; }

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  font-size: 14px;
  text-align: left;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  background-clip: padding-box; }
  .dropdown-menu.pull-right {
    right: 0;
    left: auto; }
  .dropdown-menu .divider {
    height: 1px;
    margin: 9px 0;
    overflow: hidden;
    background-color: #e5e5e5; }
  .dropdown-menu > li > a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.42857;
    color: #333333;
    white-space: nowrap; }

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
  text-decoration: none;
  color: #262626;
  background-color: #f5f5f5; }

.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
  color: #fff;
  text-decoration: none;
  outline: 0;
  background-color: #337ab7; }

.dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus {
  color: #777777; }

.dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus {
  text-decoration: none;
  background-color: transparent;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  cursor: not-allowed; }

.open > .dropdown-menu {
  display: block; }

.open > a {
  outline: 0; }

.dropdown-menu-right {
  left: auto;
  right: 0; }

.dropdown-menu-left {
  left: 0;
  right: auto; }

.dropdown-header {
  display: block;
  padding: 3px 20px;
  font-size: 12px;
  line-height: 1.42857;
  color: #777777;
  white-space: nowrap; }

.dropdown-backdrop {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 990; }

.pull-right > .dropdown-menu {
  right: 0;
  left: auto; }

.dropup .caret,
.navbar-fixed-bottom .dropdown .caret {
  border-top: 0;
  border-bottom: 4px dashed;
  border-bottom: 4px solid \9;
  content: ""; }

.dropup .dropdown-menu,
.navbar-fixed-bottom .dropdown .dropdown-menu {
  top: auto;
  bottom: 100%;
  margin-bottom: 2px; }

@media (min-width: 768px) {
  .navbar-right .dropdown-menu {
    right: 0;
    left: auto; }
  .navbar-right .dropdown-menu-left {
    left: 0;
    right: auto; } }

.btn-group,
.btn-group-vertical {
  position: relative;
  display: inline-block;
  vertical-align: middle; }
  .btn-group > .btn,
  .btn-group-vertical > .btn {
    position: relative;
    float: left; }
    .btn-group > .btn:hover, .btn-group > .btn:focus, .btn-group > .btn:active, .btn-group > .btn.active,
    .btn-group-vertical > .btn:hover,
    .btn-group-vertical > .btn:focus,
    .btn-group-vertical > .btn:active,
    .btn-group-vertical > .btn.active {
      z-index: 2; }

.btn-group .btn + .btn,
.btn-group .btn + .btn-group,
.btn-group .btn-group + .btn,
.btn-group .btn-group + .btn-group {
  margin-left: -1px; }

.btn-toolbar {
  margin-left: -5px; }
  .btn-toolbar:before, .btn-toolbar:after {
    content: " ";
    display: table; }
  .btn-toolbar:after {
    clear: both; }
  .btn-toolbar .btn,
  .btn-toolbar .btn-group,
  .btn-toolbar .input-group {
    float: left; }
  .btn-toolbar > .btn,
  .btn-toolbar > .btn-group,
  .btn-toolbar > .input-group {
    margin-left: 5px; }

.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
  border-radius: 0; }

.btn-group > .btn:first-child {
  margin-left: 0; }
  .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0; }

.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0; }

.btn-group > .btn-group {
  float: left; }

.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
  border-radius: 0; }

.btn-group > .btn-group:first-child:not(:last-child) > .btn:last-child,
.btn-group > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0; }

.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0; }

.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
  outline: 0; }

.btn-group > .btn + .dropdown-toggle {
  padding-left: 8px;
  padding-right: 8px; }

.btn-group > .btn-lg + .dropdown-toggle, .btn-group-lg.btn-group > .btn + .dropdown-toggle {
  padding-left: 12px;
  padding-right: 12px; }

.btn-group.open .dropdown-toggle {
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }
  .btn-group.open .dropdown-toggle.btn-link {
    -webkit-box-shadow: none;
    box-shadow: none; }

.btn .caret {
  margin-left: 0; }

.btn-lg .caret, .btn-group-lg > .btn .caret {
  border-width: 5px 5px 0;
  border-bottom-width: 0; }

.dropup .btn-lg .caret, .dropup .btn-group-lg > .btn .caret {
  border-width: 0 5px 5px; }

.btn-group-vertical > .btn,
.btn-group-vertical > .btn-group,
.btn-group-vertical > .btn-group > .btn {
  display: block;
  float: none;
  width: 100%;
  max-width: 100%; }

.btn-group-vertical > .btn-group:before, .btn-group-vertical > .btn-group:after {
  content: " ";
  display: table; }

.btn-group-vertical > .btn-group:after {
  clear: both; }

.btn-group-vertical > .btn-group > .btn {
  float: none; }

.btn-group-vertical > .btn + .btn,
.btn-group-vertical > .btn + .btn-group,
.btn-group-vertical > .btn-group + .btn,
.btn-group-vertical > .btn-group + .btn-group {
  margin-top: -1px;
  margin-left: 0; }

.btn-group-vertical > .btn:not(:first-child):not(:last-child) {
  border-radius: 0; }

.btn-group-vertical > .btn:first-child:not(:last-child) {
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0; }

.btn-group-vertical > .btn:last-child:not(:first-child) {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px; }

.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
  border-radius: 0; }

.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child,
.btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0; }

.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
  border-top-right-radius: 0;
  border-top-left-radius: 0; }

.btn-group-justified {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: separate; }
  .btn-group-justified > .btn,
  .btn-group-justified > .btn-group {
    float: none;
    display: table-cell;
    width: 1%; }
  .btn-group-justified > .btn-group .btn {
    width: 100%; }
  .btn-group-justified > .btn-group .dropdown-menu {
    left: auto; }

[data-toggle="buttons"] > .btn input[type="radio"],
[data-toggle="buttons"] > .btn input[type="checkbox"],
[data-toggle="buttons"] > .btn-group > .btn input[type="radio"],
[data-toggle="buttons"] > .btn-group > .btn input[type="checkbox"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none; }

.input-group {
  position: relative;
  display: table;
  border-collapse: separate; }
  .input-group[class*="col-"] {
    float: none;
    padding-left: 0;
    padding-right: 0; }
  .input-group .form-control {
    position: relative;
    z-index: 2;
    float: left;
    width: 100%;
    margin-bottom: 0; }
    .input-group .form-control:focus {
      z-index: 3; }

.input-group-addon,
.input-group-btn,
.input-group .form-control {
  display: table-cell; }
  .input-group-addon:not(:first-child):not(:last-child),
  .input-group-btn:not(:first-child):not(:last-child),
  .input-group .form-control:not(:first-child):not(:last-child) {
    border-radius: 0; }

.input-group-addon,
.input-group-btn {
  width: 1%;
  white-space: nowrap;
  vertical-align: middle; }

.input-group-addon {
  padding: 6px 12px;
  font-size: 14px;
  font-weight: normal;
  line-height: 1;
  color: #555555;
  text-align: center;
  background-color: #eeeeee;
  border: 1px solid #ccc;
  border-radius: 4px; }
  .input-group-addon.input-sm,
  .input-group-sm > .input-group-addon,
  .input-group-sm > .input-group-btn > .input-group-addon.btn {
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 3px; }
  .input-group-addon.input-lg,
  .input-group-lg > .input-group-addon,
  .input-group-lg > .input-group-btn > .input-group-addon.btn {
    padding: 10px 16px;
    font-size: 18px;
    border-radius: 6px; }
  .input-group-addon input[type="radio"],
  .input-group-addon input[type="checkbox"] {
    margin-top: 0; }

.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group > .btn,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0; }

.input-group-addon:first-child {
  border-right: 0; }

.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .btn-group > .btn,
.input-group-btn:last-child > .dropdown-toggle,
.input-group-btn:first-child > .btn:not(:first-child),
.input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0; }

.input-group-addon:last-child {
  border-left: 0; }

.input-group-btn {
  position: relative;
  font-size: 0;
  white-space: nowrap; }
  .input-group-btn > .btn {
    position: relative; }
    .input-group-btn > .btn + .btn {
      margin-left: -1px; }
    .input-group-btn > .btn:hover, .input-group-btn > .btn:focus, .input-group-btn > .btn:active {
      z-index: 2; }
  .input-group-btn:first-child > .btn,
  .input-group-btn:first-child > .btn-group {
    margin-right: -1px; }
  .input-group-btn:last-child > .btn,
  .input-group-btn:last-child > .btn-group {
    z-index: 2;
    margin-left: -1px; }

.navbar {
  position: relative;
  min-height: 50px;
  margin-bottom: 20px;
  border: 1px solid transparent; }
  .navbar:before, .navbar:after {
    content: " ";
    display: table; }
  .navbar:after {
    clear: both; }
  @media (min-width: 768px) {
    .navbar {
      border-radius: 4px; } }

.navbar-header:before, .navbar-header:after {
  content: " ";
  display: table; }

.navbar-header:after {
  clear: both; }

@media (min-width: 768px) {
  .navbar-header {
    float: left; } }

.navbar-collapse {
  overflow-x: visible;
  padding-right: 5px;
  padding-left: 5px;
  border-top: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  -webkit-overflow-scrolling: touch; }
  .navbar-collapse:before, .navbar-collapse:after {
    content: " ";
    display: table; }
  .navbar-collapse:after {
    clear: both; }
  .navbar-collapse.in {
    overflow-y: auto; }
  @media (min-width: 768px) {
    .navbar-collapse {
      width: auto;
      border-top: 0;
      box-shadow: none; }
      .navbar-collapse.collapse {
        display: block !important;
        height: auto !important;
        padding-bottom: 0;
        overflow: visible !important; }
      .navbar-collapse.in {
        overflow-y: visible; }
      .navbar-fixed-top .navbar-collapse,
      .navbar-static-top .navbar-collapse,
      .navbar-fixed-bottom .navbar-collapse {
        padding-left: 0;
        padding-right: 0; } }

.navbar-fixed-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
  max-height: 340px; }
  @media (max-device-width: 480px) and (orientation: landscape) {
    .navbar-fixed-top .navbar-collapse,
    .navbar-fixed-bottom .navbar-collapse {
      max-height: 200px; } }

.container > .navbar-header,
.container > .navbar-collapse,
.container-fluid > .navbar-header,
.container-fluid > .navbar-collapse {
  margin-right: -5px;
  margin-left: -5px; }
  @media (min-width: 768px) {
    .container > .navbar-header,
    .container > .navbar-collapse,
    .container-fluid > .navbar-header,
    .container-fluid > .navbar-collapse {
      margin-right: 0;
      margin-left: 0; } }

.navbar-static-top {
  z-index: 1000;
  border-width: 0 0 1px; }
  @media (min-width: 768px) {
    .navbar-static-top {
      border-radius: 0; } }

.navbar-fixed-top,
.navbar-fixed-bottom {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 1030; }
  @media (min-width: 768px) {
    .navbar-fixed-top,
    .navbar-fixed-bottom {
      border-radius: 0; } }

.navbar-fixed-top {
  top: 0;
  border-width: 0 0 1px; }

.navbar-fixed-bottom {
  bottom: 0;
  margin-bottom: 0;
  border-width: 1px 0 0; }

.navbar-brand {
  float: left;
  padding: 15px 5px;
  font-size: 18px;
  line-height: 20px;
  height: 50px; }
  .navbar-brand:hover, .navbar-brand:focus {
    text-decoration: none; }
  .navbar-brand > img {
    display: block; }
  @media (min-width: 768px) {
    .navbar > .container .navbar-brand,
    .navbar > .container-fluid .navbar-brand {
      margin-left: -5px; } }

.navbar-toggle {
  position: relative;
  float: right;
  margin-right: 5px;
  padding: 9px 10px;
  margin-top: 8px;
  margin-bottom: 8px;
  background-color: transparent;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px; }
  .navbar-toggle:focus {
    outline: 0; }
  .navbar-toggle .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px; }
  .navbar-toggle .icon-bar + .icon-bar {
    margin-top: 4px; }
  @media (min-width: 768px) {
    .navbar-toggle {
      display: none; } }

.navbar-nav {
  margin: 7.5px -5px; }
  .navbar-nav > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 20px; }
  @media (max-width: 767px) {
    .navbar-nav .open .dropdown-menu {
      position: static;
      float: none;
      width: auto;
      margin-top: 0;
      background-color: transparent;
      border: 0;
      box-shadow: none; }
      .navbar-nav .open .dropdown-menu > li > a,
      .navbar-nav .open .dropdown-menu .dropdown-header {
        padding: 5px 15px 5px 25px; }
      .navbar-nav .open .dropdown-menu > li > a {
        line-height: 20px; }
        .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-nav .open .dropdown-menu > li > a:focus {
          background-image: none; } }
  @media (min-width: 768px) {
    .navbar-nav {
      float: left;
      margin: 0; }
      .navbar-nav > li {
        float: left; }
        .navbar-nav > li > a {
          padding-top: 15px;
          padding-bottom: 15px; } }

.navbar-form {
  margin-left: -5px;
  margin-right: -5px;
  padding: 10px 5px;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
  margin-top: 8px;
  margin-bottom: 8px; }
  @media (min-width: 768px) {
    .navbar-form .form-group {
      display: inline-block;
      margin-bottom: 0;
      vertical-align: middle; }
    .navbar-form .form-control {
      display: inline-block;
      width: auto;
      vertical-align: middle; }
    .navbar-form .form-control-static {
      display: inline-block; }
    .navbar-form .input-group {
      display: inline-table;
      vertical-align: middle; }
      .navbar-form .input-group .input-group-addon,
      .navbar-form .input-group .input-group-btn,
      .navbar-form .input-group .form-control {
        width: auto; }
    .navbar-form .input-group > .form-control {
      width: 100%; }
    .navbar-form .control-label {
      margin-bottom: 0;
      vertical-align: middle; }
    .navbar-form .radio,
    .navbar-form .checkbox {
      display: inline-block;
      margin-top: 0;
      margin-bottom: 0;
      vertical-align: middle; }
      .navbar-form .radio label,
      .navbar-form .checkbox label {
        padding-left: 0; }
    .navbar-form .radio input[type="radio"],
    .navbar-form .checkbox input[type="checkbox"] {
      position: relative;
      margin-left: 0; }
    .navbar-form .has-feedback .form-control-feedback {
      top: 0; } }
  @media (max-width: 767px) {
    .navbar-form .form-group {
      margin-bottom: 5px; }
      .navbar-form .form-group:last-child {
        margin-bottom: 0; } }
  @media (min-width: 768px) {
    .navbar-form {
      width: auto;
      border: 0;
      margin-left: 0;
      margin-right: 0;
      padding-top: 0;
      padding-bottom: 0;
      -webkit-box-shadow: none;
      box-shadow: none; } }

.navbar-nav > li > .dropdown-menu {
  margin-top: 0;
  border-top-right-radius: 0;
  border-top-left-radius: 0; }

.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
  margin-bottom: 0;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0; }

.navbar-btn {
  margin-top: 8px;
  margin-bottom: 8px; }
  .navbar-btn.btn-sm, .btn-group-sm > .navbar-btn.btn {
    margin-top: 10px;
    margin-bottom: 10px; }
  .navbar-btn.btn-xs, .btn-group-xs > .navbar-btn.btn {
    margin-top: 14px;
    margin-bottom: 14px; }

.navbar-text {
  margin-top: 15px;
  margin-bottom: 15px; }
  @media (min-width: 768px) {
    .navbar-text {
      float: left;
      margin-left: 5px;
      margin-right: 5px; } }

@media (min-width: 768px) {
  .navbar-left {
    float: left !important; }
  .navbar-right {
    float: right !important;
    margin-right: -5px; }
    .navbar-right ~ .navbar-right {
      margin-right: 0; } }

.navbar-default {
  background-color: #f8f8f8;
  border-color: #e7e7e7; }
  .navbar-default .navbar-brand {
    color: #777; }
    .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
      color: #5e5e5e;
      background-color: transparent; }
  .navbar-default .navbar-text {
    color: #777; }
  .navbar-default .navbar-nav > li > a {
    color: #777; }
    .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
      color: #333;
      background-color: transparent; }
  .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    color: #555;
    background-color: #e7e7e7; }
  .navbar-default .navbar-nav > .disabled > a, .navbar-default .navbar-nav > .disabled > a:hover, .navbar-default .navbar-nav > .disabled > a:focus {
    color: #ccc;
    background-color: transparent; }
  .navbar-default .navbar-toggle {
    border-color: #ddd; }
    .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
      background-color: #ddd; }
    .navbar-default .navbar-toggle .icon-bar {
      background-color: #888; }
  .navbar-default .navbar-collapse,
  .navbar-default .navbar-form {
    border-color: #e7e7e7; }
  .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
    background-color: #e7e7e7;
    color: #555; }
  @media (max-width: 767px) {
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
      color: #777; }
      .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #333;
        background-color: transparent; }
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
      color: #555;
      background-color: #e7e7e7; }
    .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a, .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus {
      color: #ccc;
      background-color: transparent; } }
  .navbar-default .navbar-link {
    color: #777; }
    .navbar-default .navbar-link:hover {
      color: #333; }
  .navbar-default .btn-link {
    color: #777; }
    .navbar-default .btn-link:hover, .navbar-default .btn-link:focus {
      color: #333; }
    .navbar-default .btn-link[disabled]:hover, .navbar-default .btn-link[disabled]:focus,
    fieldset[disabled] .navbar-default .btn-link:hover,
    fieldset[disabled] .navbar-default .btn-link:focus {
      color: #ccc; }

.navbar-inverse {
  background-color: #222;
  border-color: #090909; }
  .navbar-inverse .navbar-brand {
    color: #9d9d9d; }
    .navbar-inverse .navbar-brand:hover, .navbar-inverse .navbar-brand:focus {
      color: #fff;
      background-color: transparent; }
  .navbar-inverse .navbar-text {
    color: #9d9d9d; }
  .navbar-inverse .navbar-nav > li > a {
    color: #9d9d9d; }
    .navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
      color: #fff;
      background-color: transparent; }
  .navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
    color: #fff;
    background-color: #090909; }
  .navbar-inverse .navbar-nav > .disabled > a, .navbar-inverse .navbar-nav > .disabled > a:hover, .navbar-inverse .navbar-nav > .disabled > a:focus {
    color: #444;
    background-color: transparent; }
  .navbar-inverse .navbar-toggle {
    border-color: #333; }
    .navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {
      background-color: #333; }
    .navbar-inverse .navbar-toggle .icon-bar {
      background-color: #fff; }
  .navbar-inverse .navbar-collapse,
  .navbar-inverse .navbar-form {
    border-color: #101010; }
  .navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus {
    background-color: #090909;
    color: #fff; }
  @media (max-width: 767px) {
    .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header {
      border-color: #090909; }
    .navbar-inverse .navbar-nav .open .dropdown-menu .divider {
      background-color: #090909; }
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
      color: #9d9d9d; }
      .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #fff;
        background-color: transparent; }
    .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a, .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
      color: #fff;
      background-color: #090909; }
    .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a, .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus {
      color: #444;
      background-color: transparent; } }
  .navbar-inverse .navbar-link {
    color: #9d9d9d; }
    .navbar-inverse .navbar-link:hover {
      color: #fff; }
  .navbar-inverse .btn-link {
    color: #9d9d9d; }
    .navbar-inverse .btn-link:hover, .navbar-inverse .btn-link:focus {
      color: #fff; }
    .navbar-inverse .btn-link[disabled]:hover, .navbar-inverse .btn-link[disabled]:focus,
    fieldset[disabled] .navbar-inverse .btn-link:hover,
    fieldset[disabled] .navbar-inverse .btn-link:focus {
      color: #444; }

.clearfix:before, .clearfix:after {
  content: " ";
  display: table; }

.clearfix:after {
  clear: both; }

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto; }

.pull-right {
  float: right !important; }

.pull-left {
  float: left !important; }

.hide {
  display: none !important; }

.show {
  display: block !important; }

.invisible {
  visibility: hidden; }

.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0; }

.hidden {
  display: none !important; }

.affix {
  position: fixed; }

@-ms-viewport {
  width: device-width; }

.visible-xs {
  display: none !important; }

.visible-sm {
  display: none !important; }

.visible-md {
  display: none !important; }

.visible-lg {
  display: none !important; }

.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block {
  display: none !important; }

@media (max-width: 767px) {
  .visible-xs {
    display: block !important; }
  table.visible-xs {
    display: table !important; }
  tr.visible-xs {
    display: table-row !important; }
  th.visible-xs,
  td.visible-xs {
    display: table-cell !important; } }

@media (max-width: 767px) {
  .visible-xs-block {
    display: block !important; } }

@media (max-width: 767px) {
  .visible-xs-inline {
    display: inline !important; } }

@media (max-width: 767px) {
  .visible-xs-inline-block {
    display: inline-block !important; } }

@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm {
    display: block !important; }
  table.visible-sm {
    display: table !important; }
  tr.visible-sm {
    display: table-row !important; }
  th.visible-sm,
  td.visible-sm {
    display: table-cell !important; } }

@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-block {
    display: block !important; } }

@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-inline {
    display: inline !important; } }

@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-inline-block {
    display: inline-block !important; } }

@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md {
    display: block !important; }
  table.visible-md {
    display: table !important; }
  tr.visible-md {
    display: table-row !important; }
  th.visible-md,
  td.visible-md {
    display: table-cell !important; } }

@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md-block {
    display: block !important; } }

@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md-inline {
    display: inline !important; } }

@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md-inline-block {
    display: inline-block !important; } }

@media (min-width: 1200px) {
  .visible-lg {
    display: block !important; }
  table.visible-lg {
    display: table !important; }
  tr.visible-lg {
    display: table-row !important; }
  th.visible-lg,
  td.visible-lg {
    display: table-cell !important; } }

@media (min-width: 1200px) {
  .visible-lg-block {
    display: block !important; } }

@media (min-width: 1200px) {
  .visible-lg-inline {
    display: inline !important; } }

@media (min-width: 1200px) {
  .visible-lg-inline-block {
    display: inline-block !important; } }

@media (max-width: 767px) {
  .hidden-xs {
    display: none !important; } }

@media (min-width: 768px) and (max-width: 991px) {
  .hidden-sm {
    display: none !important; } }

@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-md {
    display: none !important; } }

@media (min-width: 1200px) {
  .hidden-lg {
    display: none !important; } }

.visible-print {
  display: none !important; }

@media print {
  .visible-print {
    display: block !important; }
  table.visible-print {
    display: table !important; }
  tr.visible-print {
    display: table-row !important; }
  th.visible-print,
  td.visible-print {
    display: table-cell !important; } }

.visible-print-block {
  display: none !important; }
  @media print {
    .visible-print-block {
      display: block !important; } }

.visible-print-inline {
  display: none !important; }
  @media print {
    .visible-print-inline {
      display: inline !important; } }

.visible-print-inline-block {
  display: none !important; }
  @media print {
    .visible-print-inline-block {
      display: inline-block !important; } }

@media print {
  .hidden-print {
    display: none !important; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.bootstrap-select {
  /*width: 220px\9; IE8 and below*/
  width: 220px \0;
  /*IE9 and below*/ }
  .bootstrap-select > .btn {
    width: 100%;
    padding-right: 25px; }
  .error .bootstrap-select .btn {
    border: 1px solid #b94a48; }
  .control-group.error .bootstrap-select .dropdown-toggle {
    border-color: #b94a48; }
  .bootstrap-select.fit-width {
    width: auto !important; }
  .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
    width: 220px; }
  .bootstrap-select .btn:focus {
    /*outline: thin dotted $color-dark-grey-2 !important;
        outline: 5px auto -webkit-focus-ring-color !important;
        outline-offset: -2px;*/ }

.bootstrap-select.form-control {
  margin-bottom: 0;
  padding: 0;
  border: none; }
  .bootstrap-select.form-control:not([class*="col-"]) {
    width: 100%; }

.bootstrap-select.btn-group:not(.input-group-btn), .bootstrap-select.btn-group[class*="col-"] {
  float: none;
  display: inline-block;
  margin-left: 0; }

.bootstrap-select.btn-group.dropdown-menu-right, .bootstrap-select.btn-group[class*="col-"].dropdown-menu-right,
.row-fluid .bootstrap-select.btn-group[class*="col-"].dropdown-menu-right {
  float: right; }

.form-search .bootstrap-select.btn-group,
.form-inline .bootstrap-select.btn-group,
.form-horizontal .bootstrap-select.btn-group,
.form-group .bootstrap-select.btn-group {
  margin-bottom: 0; }

.form-group-lg .bootstrap-select.btn-group.form-control,
.form-group-sm .bootstrap-select.btn-group.form-control {
  padding: 0; }

.form-inline .bootstrap-select.btn-group .form-control {
  width: 100%; }

.input-append .bootstrap-select.btn-group {
  margin-left: -1px; }

.input-prepend .bootstrap-select.btn-group {
  margin-right: -1px; }

.bootstrap-select.btn-group > .disabled {
  cursor: not-allowed; }
  .bootstrap-select.btn-group > .disabled:focus {
    outline: none !important; }

.bootstrap-select.btn-group .btn .filter-option {
  display: inline-block;
  height: 45px;
  overflow: hidden;
  width: 100%;
  text-align: left; }

.bootstrap-select.btn-group .btn .caret {
  position: absolute;
  top: 50%;
  right: 12px;
  margin-top: -2px;
  vertical-align: middle; }

.bootstrap-select.btn-group[class*="col-"] .btn {
  width: 100%; }

.bootstrap-select.btn-group .dropdown-menu {
  min-width: 100%;
  z-index: 1035;
  box-sizing: border-box; }
  .bootstrap-select.btn-group .dropdown-menu.inner {
    position: static;
    max-height: 300px !important;
    border: 0;
    padding: 0;
    margin: 0;
    border-radius: 0;
    box-shadow: none; }
  .bootstrap-select.btn-group .dropdown-menu li {
    position: relative; }
    .bootstrap-select.btn-group .dropdown-menu li:not(.disabled) a:hover small,
    .bootstrap-select.btn-group .dropdown-menu li:not(.disabled) a:focus small,
    .bootstrap-select.btn-group .dropdown-menu li.active:not(.disabled) a small {
      color: #64b1d8;
      color: fade(#64b1d8, 40%); }
    .bootstrap-select.btn-group .dropdown-menu li.disabled a {
      cursor: not-allowed; }
    .bootstrap-select.btn-group .dropdown-menu li a {
      cursor: pointer; }
      .bootstrap-select.btn-group .dropdown-menu li a.opt {
        position: relative;
        padding-left: 2.25em; }
      .bootstrap-select.btn-group .dropdown-menu li a span.check-mark {
        display: none; }
      .bootstrap-select.btn-group .dropdown-menu li a span.text {
        display: inline-block; }
    .bootstrap-select.btn-group .dropdown-menu li small {
      padding-left: 0.5em; }
  .bootstrap-select.btn-group .dropdown-menu .notify {
    position: absolute;
    bottom: 5px;
    width: 96%;
    margin: 0 2%;
    min-height: 26px;
    padding: 3px 5px;
    background: whitesmoke;
    border: 1px solid #e3e3e3;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    opacity: 0.9;
    box-sizing: border-box; }

.bootstrap-select.btn-group .dropdown-menu > li > a:hover, .bootstrap-select.btn-group .dropdown-menu > li > a:focus {
  text-decoration: none;
  color: #333;
  background-color: #f5f5f5; }

.bootstrap-select.btn-group .dropdown-menu > li.selected > a:hover, .bootstrap-select.btn-group .dropdown-menu > li.selected > a:focus {
  color: #fff;
  background: #00c5e8; }

.bootstrap-select.btn-group .dropdown-menu > .active > a, .bootstrap-select.btn-group .dropdown-menu > .active > a:hover, .bootstrap-select.btn-group .dropdown-menu > .active > a:focus {
  color: inherit;
  text-decoration: none;
  outline: 0;
  background-color: inherit; }

.bootstrap-select.btn-group .no-results {
  padding: 3px;
  background: #f5f5f5;
  margin: 0 5px; }

.bootstrap-select.btn-group.fit-width .btn .filter-option {
  position: static; }

.bootstrap-select.btn-group.fit-width .btn .caret {
  position: static;
  top: auto;
  margin-top: -1px; }

.bootstrap-select.btn-group.show-tick .dropdown-menu li.selected a span.check-mark {
  position: absolute;
  display: inline-block;
  right: 15px;
  margin-top: 5px; }

.bootstrap-select.btn-group.show-tick .dropdown-menu li a span.text {
  margin-right: 34px; }

.bootstrap-select.show-menu-arrow.open > .btn {
  z-index: 1036; }

.bootstrap-select.show-menu-arrow .dropdown-toggle:before {
  content: '';
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom-width: 7px;
  border-bottom-style: solid;
  border-bottom-color: #cccccc;
  border-bottom-color: fade(#cccccc, 20%);
  position: absolute;
  bottom: -4px;
  left: 9px;
  display: none; }

.bootstrap-select.show-menu-arrow .dropdown-toggle:after {
  content: '';
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid white;
  position: absolute;
  bottom: -4px;
  left: 10px;
  display: none; }

.bootstrap-select.show-menu-arrow.dropup .dropdown-toggle:before {
  bottom: auto;
  top: -3px;
  border-bottom: 0;
  border-top-width: 7px;
  border-top-style: solid;
  border-top-color: #cccccc;
  border-top-color: fade(#cccccc, 20%); }

.bootstrap-select.show-menu-arrow.dropup .dropdown-toggle:after {
  bottom: auto;
  top: -3px;
  border-top: 6px solid white;
  border-bottom: 0; }

.bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle:before {
  right: 12px;
  left: auto; }

.bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle:after {
  right: 13px;
  left: auto; }

.bootstrap-select.show-menu-arrow.open > .dropdown-toggle:before, .bootstrap-select.show-menu-arrow.open > .dropdown-toggle:after {
  display: block; }

.bs-searchbox,
.bs-actionsbox {
  padding: 4px 8px; }

.bs-actionsbox {
  float: left;
  width: 100%;
  box-sizing: border-box; }
  .bs-actionsbox .btn-group button {
    width: 50%; }

.bs-searchbox + .bs-actionsbox {
  padding: 0 8px 4px; }

.bs-searchbox input.form-control {
  margin-bottom: 0;
  width: 100%; }

.mobile-device {
  position: absolute;
  top: 0;
  left: 0;
  display: block !important;
  width: 100%;
  height: 100% !important;
  opacity: 0; }

/* Missing things from original Bootstrap */
button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit; }

.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px; }

.btn-group-vertical > .btn,
.btn-group > .btn {
  position: relative;
  float: left; }

.btn .caret {
  margin-left: 0; }

.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px dashed;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent; }

.bootstrap-select > .dropdown-toggle {
  width: 100%;
  padding-right: 25px; }

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  text-align: left;
  list-style: none;
  background-color: #fff;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); }

.open > .dropdown-menu {
  display: block; }

.dropdown-menu > li {
  margin: 0;
  padding: 0; }
  .dropdown-menu > li:before {
    display: none; }
  .dropdown-menu > li > a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap; }

.btn-group > .btn:first-child {
  margin-left: 0; }

.btn-default {
  color: #333;
  background-color: #fff;
  border-color: #ccc; }

.pull-left {
  float: left !important; }

.bootstrap-select.btn-group .dropdown-toggle .caret {
  position: absolute;
  top: 50%;
  right: 12px;
  margin-top: -2px;
  vertical-align: middle; }

/* GLOBAL */
/* Only varibles should be in _global.scss - no actual style declarations - 
otherwise will bloat CSS via repeating globals imports in all other files */
/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/* BIO */
/*////////////////////////////////////
AS I UNDERSTAND IT THIS IS THE OLD BIOS BOOTSTRAP WITH OTHER ADDITIONS 
CURRENTLY REMOVING IT BREAKS THE SITE, SO THE NEW BOOTSTRAP DOESN'T HAVE EVERYTHING IT NEEDS TO WORK */
/* @import 'bakery_imports/critical.bio';*/
/* The following files are extracted from and replace critical.bio, mirroring the order they are in that file: */
/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/* BIO's critical.css, from branch release/5, v5.1.0, with sourcemap */
/* Setup */
/* ==========================================================================
   Normalize.scss settings
   ========================================================================== */
/**
 * Includes legacy browser support IE6/7
 *
 * Set to false if you want to drop support for IE6 and IE7
 */
/* Base
   ========================================================================== */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 * 3. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
 *  `em` units.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

/**
 * Remove default margin.
 */
body {
  margin: 0; }

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block; }

/**
 * 1. Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */ }

/**
 * Prevents modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0; }

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none; }

/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background-color: transparent; }

/**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */
a:active, a:hover {
  outline: 0; }

/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted; }

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold; }

/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic; }

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0; }

/**
 * Addresses styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000; }

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%; }

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

/* Embedded content
   ========================================================================== */
/**
 * 1. Remove border when inside `a` element in IE 8/9/10.
 * 2. Improves image quality when scaled in IE 7.
 */
img {
  border: 0; }

/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden; }

/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px; }

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  box-sizing: content-box;
  height: 0; }

/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto; }

/**
 * Address odd `em`-unit font size rendering in all browsers.
 * Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em; }

/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *  Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 * 4. Improves appearance and consistency in all browsers.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */ }

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible; }

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none; }

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *  and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *  `input` and others.
 * 4. Removes inner spacing in IE 7 without affecting normal text inputs.
 *  Known issue: inner spacing remains in IE 6.
 */
button,
html input[type="button"], input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */ }

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default; }

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal; }

/**
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 *  Known issue: excess padding remains in IE 6.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto; }

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  box-sizing: content-box;
  /* 2 */ }

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 * 3. Corrects text not wrapping in Firefox 3.
 * 4. Corrects alignment displayed oddly in IE 6/7.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto; }

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold; }

/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0; }

td,
th {
  padding: 0; }

/* Asset Paths */
/* Breakpoints */
/* Bootstrap Grid */
/* Z-Index Scale */
/* Colours */
/* Fonts */
/* Animation */
/* Module Specific Variables */
/* Global Header */
/* End Global Header */
/* Float container collapse fix */
/* Text replacement */
/* Visually hide an element */
/* Transform mixins */
/* Gradients */
/* Site specific */
/*
body:before {
  background-color: #FCF8E3;
  border-bottom: 1px solid #FBEED5;
  border-left: 1px solid #FBEED5;
  color: #C09853;
  font: small-caption;
  padding: 3px 6px;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 100; }
  @media (min-width: 20em) {
    body:before {
      content: "extraSmall ? 320px (20em)"; } }
  @media (min-width: 30em) {
    body:before {
      content: "small ? 480px (30em)"; } }
  @media (min-width: 48em) {
    body:before {
      content: "medium ? 768px (48em)"; } }
  @media (min-width: 62em) {
    body:before {
      content: "large ? 992px (62em)"; } }
  @media (min-width: 87.5em) {
    body:before {
      content: "wide ? 1400px (87.5em)"; } }
*/
.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 6px;
  padding-right: 6px; }

.container:before,
.container:after {
  content: " ";
  display: table; }

.container:after {
  clear: both; }

@media (min-width: 480px) {
  .container {
    width: 492px; } }

@media (min-width: 768px) {
  .container {
    width: 780px; } }

@media (min-width: 992px) {
  .container {
    width: 1004px; } }

.container-fluid {
  margin-right: auto;
  margin-left: auto;
  padding-left: 6px;
  padding-right: 6px; }

.container-fluid:before,
.container-fluid:after {
  content: " ";
  display: table; }

.container-fluid:after {
  clear: both; }

.row {
  margin-left: -6px;
  margin-right: -6px; }

.row:before,
.row:after {
  content: " ";
  display: table; }

.row:after {
  clear: both; }

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-left: 6px;
  padding-right: 6px; }

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  float: left; }

.col-xs-1 {
  width: 8.3333333333%; }

.col-xs-2 {
  width: 16.6666666667%; }

.col-xs-3 {
  width: 25%; }

.col-xs-4 {
  width: 33.3333333333%; }

.col-xs-5 {
  width: 41.6666666667%; }

.col-xs-6 {
  width: 50%; }

.col-xs-7 {
  width: 58.3333333333%; }

.col-xs-8 {
  width: 66.6666666667%; }

.col-xs-9 {
  width: 75%; }

.col-xs-10 {
  width: 83.3333333333%; }

.col-xs-11 {
  width: 91.6666666667%; }

.col-xs-12 {
  width: 100%; }

.col-xs-pull-0 {
  right: auto; }

.col-xs-pull-1 {
  right: 8.3333333333%; }

.col-xs-pull-2 {
  right: 16.6666666667%; }

.col-xs-pull-3 {
  right: 25%; }

.col-xs-pull-4 {
  right: 33.3333333333%; }

.col-xs-pull-5 {
  right: 41.6666666667%; }

.col-xs-pull-6 {
  right: 50%; }

.col-xs-pull-7 {
  right: 58.3333333333%; }

.col-xs-pull-8 {
  right: 66.6666666667%; }

.col-xs-pull-9 {
  right: 75%; }

.col-xs-pull-10 {
  right: 83.3333333333%; }

.col-xs-pull-11 {
  right: 91.6666666667%; }

.col-xs-pull-12 {
  right: 100%; }

.col-xs-push-0 {
  left: auto; }

.col-xs-push-1 {
  left: 8.3333333333%; }

.col-xs-push-2 {
  left: 16.6666666667%; }

.col-xs-push-3 {
  left: 25%; }

.col-xs-push-4 {
  left: 33.3333333333%; }

.col-xs-push-5 {
  left: 41.6666666667%; }

.col-xs-push-6 {
  left: 50%; }

.col-xs-push-7 {
  left: 58.3333333333%; }

.col-xs-push-8 {
  left: 66.6666666667%; }

.col-xs-push-9 {
  left: 75%; }

.col-xs-push-10 {
  left: 83.3333333333%; }

.col-xs-push-11 {
  left: 91.6666666667%; }

.col-xs-push-12 {
  left: 100%; }

.col-xs-offset-0 {
  margin-left: 0%; }

.col-xs-offset-1 {
  margin-left: 8.3333333333%; }

.col-xs-offset-2 {
  margin-left: 16.6666666667%; }

.col-xs-offset-3 {
  margin-left: 25%; }

.col-xs-offset-4 {
  margin-left: 33.3333333333%; }

.col-xs-offset-5 {
  margin-left: 41.6666666667%; }

.col-xs-offset-6 {
  margin-left: 50%; }

.col-xs-offset-7 {
  margin-left: 58.3333333333%; }

.col-xs-offset-8 {
  margin-left: 66.6666666667%; }

.col-xs-offset-9 {
  margin-left: 75%; }

.col-xs-offset-10 {
  margin-left: 83.3333333333%; }

.col-xs-offset-11 {
  margin-left: 91.6666666667%; }

.col-xs-offset-12 {
  margin-left: 100%; }

@media (min-width: 480px) {
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left; }
  .col-sm-1 {
    width: 8.3333333333%; }
  .col-sm-2 {
    width: 16.6666666667%; }
  .col-sm-3 {
    width: 25%; }
  .col-sm-4 {
    width: 33.3333333333%; }
  .col-sm-5 {
    width: 41.6666666667%; }
  .col-sm-6 {
    width: 50%; }
  .col-sm-7 {
    width: 58.3333333333%; }
  .col-sm-8 {
    width: 66.6666666667%; }
  .col-sm-9 {
    width: 75%; }
  .col-sm-10 {
    width: 83.3333333333%; }
  .col-sm-11 {
    width: 91.6666666667%; }
  .col-sm-12 {
    width: 100%; }
  .col-sm-pull-0 {
    right: auto; }
  .col-sm-pull-1 {
    right: 8.3333333333%; }
  .col-sm-pull-2 {
    right: 16.6666666667%; }
  .col-sm-pull-3 {
    right: 25%; }
  .col-sm-pull-4 {
    right: 33.3333333333%; }
  .col-sm-pull-5 {
    right: 41.6666666667%; }
  .col-sm-pull-6 {
    right: 50%; }
  .col-sm-pull-7 {
    right: 58.3333333333%; }
  .col-sm-pull-8 {
    right: 66.6666666667%; }
  .col-sm-pull-9 {
    right: 75%; }
  .col-sm-pull-10 {
    right: 83.3333333333%; }
  .col-sm-pull-11 {
    right: 91.6666666667%; }
  .col-sm-pull-12 {
    right: 100%; }
  .col-sm-push-0 {
    left: auto; }
  .col-sm-push-1 {
    left: 8.3333333333%; }
  .col-sm-push-2 {
    left: 16.6666666667%; }
  .col-sm-push-3 {
    left: 25%; }
  .col-sm-push-4 {
    left: 33.3333333333%; }
  .col-sm-push-5 {
    left: 41.6666666667%; }
  .col-sm-push-6 {
    left: 50%; }
  .col-sm-push-7 {
    left: 58.3333333333%; }
  .col-sm-push-8 {
    left: 66.6666666667%; }
  .col-sm-push-9 {
    left: 75%; }
  .col-sm-push-10 {
    left: 83.3333333333%; }
  .col-sm-push-11 {
    left: 91.6666666667%; }
  .col-sm-push-12 {
    left: 100%; }
  .col-sm-offset-0 {
    margin-left: 0%; }
  .col-sm-offset-1 {
    margin-left: 8.3333333333%; }
  .col-sm-offset-2 {
    margin-left: 16.6666666667%; }
  .col-sm-offset-3 {
    margin-left: 25%; }
  .col-sm-offset-4 {
    margin-left: 33.3333333333%; }
  .col-sm-offset-5 {
    margin-left: 41.6666666667%; }
  .col-sm-offset-6 {
    margin-left: 50%; }
  .col-sm-offset-7 {
    margin-left: 58.3333333333%; }
  .col-sm-offset-8 {
    margin-left: 66.6666666667%; }
  .col-sm-offset-9 {
    margin-left: 75%; }
  .col-sm-offset-10 {
    margin-left: 83.3333333333%; }
  .col-sm-offset-11 {
    margin-left: 91.6666666667%; }
  .col-sm-offset-12 {
    margin-left: 100%; } }

@media (min-width: 768px) {
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left; }
  .col-md-1 {
    width: 8.3333333333%; }
  .col-md-2 {
    width: 16.6666666667%; }
  .col-md-3 {
    width: 25%; }
  .col-md-4 {
    width: 33.3333333333%; }
  .col-md-5 {
    width: 41.6666666667%; }
  .col-md-6 {
    width: 50%; }
  .col-md-7 {
    width: 58.3333333333%; }
  .col-md-8 {
    width: 66.6666666667%; }
  .col-md-9 {
    width: 75%; }
  .col-md-10 {
    width: 83.3333333333%; }
  .col-md-11 {
    width: 91.6666666667%; }
  .col-md-12 {
    width: 100%; }
  .col-md-pull-0 {
    right: auto; }
  .col-md-pull-1 {
    right: 8.3333333333%; }
  .col-md-pull-2 {
    right: 16.6666666667%; }
  .col-md-pull-3 {
    right: 25%; }
  .col-md-pull-4 {
    right: 33.3333333333%; }
  .col-md-pull-5 {
    right: 41.6666666667%; }
  .col-md-pull-6 {
    right: 50%; }
  .col-md-pull-7 {
    right: 58.3333333333%; }
  .col-md-pull-8 {
    right: 66.6666666667%; }
  .col-md-pull-9 {
    right: 75%; }
  .col-md-pull-10 {
    right: 83.3333333333%; }
  .col-md-pull-11 {
    right: 91.6666666667%; }
  .col-md-pull-12 {
    right: 100%; }
  .col-md-push-0 {
    left: auto; }
  .col-md-push-1 {
    left: 8.3333333333%; }
  .col-md-push-2 {
    left: 16.6666666667%; }
  .col-md-push-3 {
    left: 25%; }
  .col-md-push-4 {
    left: 33.3333333333%; }
  .col-md-push-5 {
    left: 41.6666666667%; }
  .col-md-push-6 {
    left: 50%; }
  .col-md-push-7 {
    left: 58.3333333333%; }
  .col-md-push-8 {
    left: 66.6666666667%; }
  .col-md-push-9 {
    left: 75%; }
  .col-md-push-10 {
    left: 83.3333333333%; }
  .col-md-push-11 {
    left: 91.6666666667%; }
  .col-md-push-12 {
    left: 100%; }
  .col-md-offset-0 {
    margin-left: 0%; }
  .col-md-offset-1 {
    margin-left: 8.3333333333%; }
  .col-md-offset-2 {
    margin-left: 16.6666666667%; }
  .col-md-offset-3 {
    margin-left: 25%; }
  .col-md-offset-4 {
    margin-left: 33.3333333333%; }
  .col-md-offset-5 {
    margin-left: 41.6666666667%; }
  .col-md-offset-6 {
    margin-left: 50%; }
  .col-md-offset-7 {
    margin-left: 58.3333333333%; }
  .col-md-offset-8 {
    margin-left: 66.6666666667%; }
  .col-md-offset-9 {
    margin-left: 75%; }
  .col-md-offset-10 {
    margin-left: 83.3333333333%; }
  .col-md-offset-11 {
    margin-left: 91.6666666667%; }
  .col-md-offset-12 {
    margin-left: 100%; } }

@media (min-width: 992px) {
  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    float: left; }
  .col-lg-1 {
    width: 8.3333333333%; }
  .col-lg-2 {
    width: 16.6666666667%; }
  .col-lg-3 {
    width: 25%; }
  .col-lg-4 {
    width: 33.3333333333%; }
  .col-lg-5 {
    width: 41.6666666667%; }
  .col-lg-6 {
    width: 50%; }
  .col-lg-7 {
    width: 58.3333333333%; }
  .col-lg-8 {
    width: 66.6666666667%; }
  .col-lg-9 {
    width: 75%; }
  .col-lg-10 {
    width: 83.3333333333%; }
  .col-lg-11 {
    width: 91.6666666667%; }
  .col-lg-12 {
    width: 100%; }
  .col-lg-pull-0 {
    right: auto; }
  .col-lg-pull-1 {
    right: 8.3333333333%; }
  .col-lg-pull-2 {
    right: 16.6666666667%; }
  .col-lg-pull-3 {
    right: 25%; }
  .col-lg-pull-4 {
    right: 33.3333333333%; }
  .col-lg-pull-5 {
    right: 41.6666666667%; }
  .col-lg-pull-6 {
    right: 50%; }
  .col-lg-pull-7 {
    right: 58.3333333333%; }
  .col-lg-pull-8 {
    right: 66.6666666667%; }
  .col-lg-pull-9 {
    right: 75%; }
  .col-lg-pull-10 {
    right: 83.3333333333%; }
  .col-lg-pull-11 {
    right: 91.6666666667%; }
  .col-lg-pull-12 {
    right: 100%; }
  .col-lg-push-0 {
    left: auto; }
  .col-lg-push-1 {
    left: 8.3333333333%; }
  .col-lg-push-2 {
    left: 16.6666666667%; }
  .col-lg-push-3 {
    left: 25%; }
  .col-lg-push-4 {
    left: 33.3333333333%; }
  .col-lg-push-5 {
    left: 41.6666666667%; }
  .col-lg-push-6 {
    left: 50%; }
  .col-lg-push-7 {
    left: 58.3333333333%; }
  .col-lg-push-8 {
    left: 66.6666666667%; }
  .col-lg-push-9 {
    left: 75%; }
  .col-lg-push-10 {
    left: 83.3333333333%; }
  .col-lg-push-11 {
    left: 91.6666666667%; }
  .col-lg-push-12 {
    left: 100%; }
  .col-lg-offset-0 {
    margin-left: 0%; }
  .col-lg-offset-1 {
    margin-left: 8.3333333333%; }
  .col-lg-offset-2 {
    margin-left: 16.6666666667%; }
  .col-lg-offset-3 {
    margin-left: 25%; }
  .col-lg-offset-4 {
    margin-left: 33.3333333333%; }
  .col-lg-offset-5 {
    margin-left: 41.6666666667%; }
  .col-lg-offset-6 {
    margin-left: 50%; }
  .col-lg-offset-7 {
    margin-left: 58.3333333333%; }
  .col-lg-offset-8 {
    margin-left: 66.6666666667%; }
  .col-lg-offset-9 {
    margin-left: 75%; }
  .col-lg-offset-10 {
    margin-left: 83.3333333333%; }
  .col-lg-offset-11 {
    margin-left: 91.6666666667%; }
  .col-lg-offset-12 {
    margin-left: 100%; } }

@media (min-width: 1400px) {
  .col-wi-1, .col-wi-2, .col-wi-3, .col-wi-4, .col-wi-5, .col-wi-6, .col-wi-7, .col-wi-8, .col-wi-9, .col-wi-10, .col-wi-11, .col-wi-12 {
    float: left; }
  .col-wi-1 {
    width: 8.3333333333%; }
  .col-wi-2 {
    width: 16.6666666667%; }
  .col-wi-3 {
    width: 25%; }
  .col-wi-4 {
    width: 33.3333333333%; }
  .col-wi-5 {
    width: 41.6666666667%; }
  .col-wi-6 {
    width: 50%; }
  .col-wi-7 {
    width: 58.3333333333%; }
  .col-wi-8 {
    width: 66.6666666667%; }
  .col-wi-9 {
    width: 75%; }
  .col-wi-10 {
    width: 83.3333333333%; }
  .col-wi-11 {
    width: 91.6666666667%; }
  .col-wi-12 {
    width: 100%; }
  .col-wi-pull-0 {
    right: auto; }
  .col-wi-pull-1 {
    right: 8.3333333333%; }
  .col-wi-pull-2 {
    right: 16.6666666667%; }
  .col-wi-pull-3 {
    right: 25%; }
  .col-wi-pull-4 {
    right: 33.3333333333%; }
  .col-wi-pull-5 {
    right: 41.6666666667%; }
  .col-wi-pull-6 {
    right: 50%; }
  .col-wi-pull-7 {
    right: 58.3333333333%; }
  .col-wi-pull-8 {
    right: 66.6666666667%; }
  .col-wi-pull-9 {
    right: 75%; }
  .col-wi-pull-10 {
    right: 83.3333333333%; }
  .col-wi-pull-11 {
    right: 91.6666666667%; }
  .col-wi-pull-12 {
    right: 100%; }
  .col-wi-push-0 {
    left: auto; }
  .col-wi-push-1 {
    left: 8.3333333333%; }
  .col-wi-push-2 {
    left: 16.6666666667%; }
  .col-wi-push-3 {
    left: 25%; }
  .col-wi-push-4 {
    left: 33.3333333333%; }
  .col-wi-push-5 {
    left: 41.6666666667%; }
  .col-wi-push-6 {
    left: 50%; }
  .col-wi-push-7 {
    left: 58.3333333333%; }
  .col-wi-push-8 {
    left: 66.6666666667%; }
  .col-wi-push-9 {
    left: 75%; }
  .col-wi-push-10 {
    left: 83.3333333333%; }
  .col-wi-push-11 {
    left: 91.6666666667%; }
  .col-wi-push-12 {
    left: 100%; }
  .col-wi-offset-0 {
    margin-left: 0%; }
  .col-wi-offset-1 {
    margin-left: 8.3333333333%; }
  .col-wi-offset-2 {
    margin-left: 16.6666666667%; }
  .col-wi-offset-3 {
    margin-left: 25%; }
  .col-wi-offset-4 {
    margin-left: 33.3333333333%; }
  .col-wi-offset-5 {
    margin-left: 41.6666666667%; }
  .col-wi-offset-6 {
    margin-left: 50%; }
  .col-wi-offset-7 {
    margin-left: 58.3333333333%; }
  .col-wi-offset-8 {
    margin-left: 66.6666666667%; }
  .col-wi-offset-9 {
    margin-left: 75%; }
  .col-wi-offset-10 {
    margin-left: 83.3333333333%; }
  .col-wi-offset-11 {
    margin-left: 91.6666666667%; }
  .col-wi-offset-12 {
    margin-left: 100%; } }

.row.no-gutter [class*='col-']:not(:first-child), .row.no-gutter [class*='col-']:not(:last-child) {
  padding-right: 0;
  padding-left: 0; }

.container-fluid {
  margin: 0 auto;
  min-width: 320px;
  max-width: 1282px; }

@media (max-width: 87.49em) {
  .container-fluid {
    padding-right: 10px;
    padding-left: 10px; } }

@media (max-width: 87.49em) {
  .row {
    margin-right: 0;
    margin-left: 0; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
* {
  box-sizing: border-box; }

html {
  font-size: 15px;
  overflow-x: hidden; }
  @media (min-width: 48em) {
    html {
      font-size: 16px; } }

body {
  color: #58585a;
  font-family: "latoregular", sans-serif;
  line-height: 1.562rem;
  position: relative;
  width: 100%;
  overflow-x: hidden;
  font-size: 15px;
  /* To overwrite _scaffolding.scss */
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: subpixel-antialiased;
  -webkit-font-smoothing: antialiased;
  padding-top: 70px; }
  @media (min-width: 48em) {
    body {
      font-size: 16px;
      /* To overwrite _scaffolding.scss */ } }
  @media (min-width: 75em) {
    body {
      padding-top: 135px; } }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 1rem;
  font-weight: normal; }

h1,
.Section-title {
  font-family: "ubuntulight", sans-serif;
  font-size: 2.125rem;
  letter-spacing: 0.2rem;
  line-height: 2.687rem; }

h2 {
  font-family: "ubunturegular", sans-serif;
  font-size: 1.56rem;
  letter-spacing: 0.135rem;
  line-height: 1.875rem; }

h3 {
  font-family: "ubunturegular", sans-serif;
  font-size: 1rem;
  letter-spacing: 0.055rem;
  line-height: 1.562rem;
  text-transform: uppercase; }

h4, h5, h6 {
  font-family: "latoregular", sans-serif;
  font-size: 0.875rem;
  letter-spacing: 0.025rem;
  line-height: 1.562rem;
  text-transform: uppercase; }

p {
  margin: 0 0 2rem; }

ol, ul {
  margin: 0 0 3rem; }

ul {
  padding-left: 1rem;
  list-style: none; }

ul li {
  position: relative;
  margin-bottom: 1.2rem;
  padding-left: 35px; }

ul li:before {
  content: "\e61a";
  display: block;
  position: absolute;
  top: 5px;
  left: 0;
  width: 20px;
  height: 16px;
  color: #00c5e8;
  font-family: 'icomoon';
  font-size: 1rem;
  line-height: 1rem; }

.lt-ie10 ul li:before {
  top: 15px; }

ul.blue-medium li:before {
  color: #0a264d; }

ol li {
  margin-bottom: 1.2rem; }

table {
  margin-bottom: 3rem;
  width: 100%;
  border-bottom: 2px solid #979b9e;
  font-family: "latoregular", sans-serif;
  text-align: left; }

table th,
table td {
  padding: 1rem 1.8rem; }

table th {
  color: #fff;
  background-color: #0a264d;
  font-family: "latobold", sans-serif;
  font-weight: normal;
  font-size: .9375rem; }

table tbody th {
  background-color: transparent;
  color: #1b2429; }

table td {
  border-left: 1px dashed #00c5e8; }

table td:first-child {
  border-left: none; }

table tbody tr {
  background: #f9f9f9;
  border-left: 1px solid #e8e9ed;
  border-right: 1px solid #e8e9ed; }

table tbody tr:nth-child(2n) {
  background: #f1f2f4; }

@media (max-width: 47.99em) {
  table:not(.LiveInfo-table):not(.stay-formed) {
    display: block;
    border: 0; }
  table:not(.LiveInfo-table):not(.stay-formed) thead,
  table:not(.LiveInfo-table):not(.stay-formed) tbody,
  table:not(.LiveInfo-table):not(.stay-formed) th,
  table:not(.LiveInfo-table):not(.stay-formed) td,
  table:not(.LiveInfo-table):not(.stay-formed) tr {
    display: block; }
  table:not(.LiveInfo-table) th:before,
  table:not(.LiveInfo-table) td:before {
    color: #0a264d;
    font-family: "latobold", sans-serif;
    font-weight: normal; }
  table:not(.LiveInfo-table):not(.stay-formed) thead tr {
    position: absolute;
    margin: -1px;
    padding: 0;
    width: 1px;
    height: 1px;
    border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden; }
  table:not(.LiveInfo-table) tr {
    margin-bottom: 2rem;
    border: none;
    border-bottom: 2px solid #979b9e;
    border-left: 1px solid #e8e9ed;
    border-right: 1px solid #e8e9ed; }
  table:not(.LiveInfo-table) tbody th {
    font-size: 1rem;
    font-family: "latoregular", sans-serif; }
  table:not(.LiveInfo-table) tbody th,
  table:not(.LiveInfo-table) tbody td {
    border: 0; }
  table:not(.LiveInfo-table):not(.stay-formed) tbody th:before,
  table:not(.LiveInfo-table):not(.stay-formed) tbody td:before {
    content: attr(data-label);
    display: block;
    padding-bottom: 0.5rem; }
  table:not(.LiveInfo-table) tbody th:empty,
  table:not(.LiveInfo-table) tbody td:empty {
    display: none; }
  table:not(.LiveInfo-table) tbody th, table:not(.LiveInfo-table) tbody td {
    border-top: 1px solid #e8e9ed; } }

a {
  color: #00c5e8; }

b, strong {
  font-family: "latobold", sans-serif;
  font-weight: normal; }

i, em {
  font-family: "latoitalic", sans-serif;
  font-style: normal; }

b i, b em,
strong i, strong em,
i b, i strong,
em b, em strong {
  font-family: "latobold_italic", sans-serif; }

blockquote {
  display: block;
  margin: 0 0 3rem;
  background: #0069d2;
  color: #fff;
  font-size: 1.25rem;
  font-style: normal;
  line-height: 1.875rem; }

blockquote p {
  margin: 0;
  padding: 1.875rem 2rem; }

cite {
  display: block;
  position: relative;
  padding: 1rem 2rem;
  background: #0a264d;
  font-size: 1rem;
  font-style: normal;
  line-height: 1.562rem; }

cite:after {
  content: " ";
  position: absolute;
  top: 0;
  right: 2rem;
  border-top: 15px solid #0069d2;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent; }

figure {
  margin: 0 0 3rem; }

figure .Article-figure-title {
  color: #00c5e8; }

figure img {
  display: block;
  margin-bottom: 1rem;
  width: 100%;
  height: auto; }

figcaption {
  font-size: 0.875rem;
  line-height: 1.25rem; }

button {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none; }

/* Copy helpers */
.small {
  font-size: 0.875rem;
  line-height: 1.25rem; }

.large {
  font-size: 1.125rem;
  line-height: 1.875rem; }

.align-left {
  text-align: left; }

.align-right {
  text-align: right; }

.align-center {
  text-align: center; }

/* RWD Helpers */
@media (max-width: 29.99em) {
  .xs-hidden {
    display: none !important; } }

@media (min-width: 30em) and (max-width: 47.99em) {
  .sm-hidden {
    display: none !important; } }

@media (min-width: 48em) and (max-width: 61.99em) {
  .md-hidden {
    display: none !important; } }

@media (min-width: 62em) and (max-width: 87.49em) {
  .lg-hidden {
    display: none !important; } }

@media (min-width: 87.5em) {
  .wi-hidden {
    display: none !important; } }

.visually-hidden {
  position: absolute;
  margin: -1px;
  padding: 0;
  width: 1px;
  height: 1px;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden; }

/* No gutters grid */
.row.no-gutters {
  margin-right: 0;
  margin-left: 0; }

.row.no-gutters > [class^="col-"],
.row.no-gutters > [class*=" col-"] {
  padding-right: 0;
  padding-left: 0; }

@media (max-width: 29.99em) {
  .container-fluid {
    padding-left: 1.2rem;
    padding-right: 1.2rem; } }

@media (min-width: 30em) and (max-width: 47.99em) {
  .container-fluid {
    padding-left: 3rem;
    padding-right: 3rem; } }

@media (min-width: 48em) and (max-width: 61.99em) {
  .container-fluid {
    padding-left: 3rem;
    padding-right: 3rem; } }

@media (max-width: 29.99em) {
  .xs-extra-horizontal-padding {
    padding-left: 1.2rem;
    padding-right: 1.2rem; } }

@media (min-width: 30em) and (max-width: 47.99em) {
  .sm-extra-horizontal-padding {
    padding-left: 3rem;
    padding-right: 3rem; } }

@media (min-width: 48em) and (max-width: 61.99em) {
  .md-extra-horizontal-padding {
    padding-left: 3rem;
    padding-right: 3rem; } }

/** release info **/
body:before {
  z-index: 999 !important; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
[class^="Icon--"], [class*=" Icon--"] {
  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--sign-post:before {
  content: "\e600"; }

.Icon--speech-bubble:before {
  content: "\e601"; }

.Icon--lightning:before {
  content: "\e602"; }

.Icon--lightning-filled:before {
  content: "\e603"; }

.Icon--one-click-trading:before {
  content: "\e604"; }

.Icon--phone-24:before {
  content: "\e605"; }

.Icon--phone:before {
  content: "\e606"; }

.Icon--bell:before {
  content: "\e607"; }

.Icon--price-ladder:before {
  content: "\e608"; }

.Icon--guaranteed-shops:before {
  content: "\e609"; }

.Icon--desktop-with-content:before {
  content: "\e60a"; }

.Icon--arrow-up:before {
  content: "\e60b"; }

.Icon--arrow-down:before {
  content: "\e60c"; }

.Icon--headset:before {
  content: "\e60d"; }

.Icon--facebook:before {
  content: "\e60e"; }

.Icon--twitter:before {
  content: "\e60f"; }

.Icon--linkedin:before {
  content: "\e610"; }

.Icon--google-plus:before {
  content: "\e611"; }

.Icon--arrow-right:before {
  content: "\e612"; }

.Icon--mobile:before {
  content: "\e613"; }

.Icon--tablet:before {
  content: "\e614"; }

.Icon--desktop:before {
  content: "\e615"; }

.Icon--tick:before {
  content: "\e616"; }

.Icon--arrow-left:before {
  content: "\e617"; }

.Icon--tick-circle:before {
  content: "\e618"; }

.Icon--hamburger:before {
  content: "\e619"; }

.Icon--arrow-right-dotted:before {
  content: "\e61a"; }

.Icon--magnify:before {
  content: "\e61b"; }

.Icon--cross:before {
  content: "\e61c"; }

.Icon--buy:before {
  content: "\e61d"; }

.Icon--sell:before {
  content: "\e61e"; }

.Icon--calendar:before {
  content: "\e61f"; }

.Icon--webinar:before {
  content: "\e620"; }

.Icon--map:before {
  content: "\e621"; }

.Icon--reuters:before {
  content: "\e622"; }

.Icon--morningstart:before {
  content: "\e623"; }

.Icon--youtube:before {
  content: "\e628"; }

.Icon--lightbulb:before {
  content: "\e629"; }

.Icon--padlock:before {
  content: "\e62a"; }

.Icon--envelope:before {
  content: "\e62c"; }

.Icon--rss:before {
  content: "\e62d"; }

.Icon--zippy-zippy-chart:before {
  content: "\e62e"; }

.Icon--article:before {
  content: "\e62f"; }

.Icon--tablet-apple:before {
  content: "\e630"; }

.Icon--mobile-apple:before {
  content: "\e631"; }

.Icon--mobile-android:before {
  content: "\e632"; }

.Icon--play-circle:before {
  content: "\e633"; }

.Icon--youtube-play:before {
  content: "\e62b"; }

.Icon--facebook-2:before {
  content: "\e624"; }

.Icon--twitter-2:before {
  content: "\e625"; }

.Icon--linkedin-2:before {
  content: "\e626"; }

.Icon--google-plus-2:before {
  content: "\e627"; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/* Components */
.Button {
  position: relative;
  display: block;
  padding: 11px 10px;
  width: 100%;
  max-width: 260px;
  margin: 0 auto;
  border-radius: 4px !important;
  font-family: "latoregular", sans-serif;
  font-size: 1rem;
  letter-spacing: 0.025rem;
  line-height: 1.562rem;
  text-align: center;
  text-decoration: none;
  overflow: hidden !important;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  vertical-align: top;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
  -webkit-transform: translate3d(0, 0, 0); }

@media (min-width: 48em) {
  .Button {
    display: inline-block;
    width: 220px; } }

.Button:hover,
.Button:focus {
  color: #fff;
  text-decoration: none;
  border-radius: 4px !important;
  outline: none; }

.Button:hover .Button-panel,
.Button:focus .Button-panel {
  width: 140%;
  transition: width 0.3s ease-out !important; }

.Button--large-max-width {
  max-width: 320px; }

.Button-panel {
  position: absolute;
  background: #fff;
  width: 0;
  height: 120px;
  left: -30%;
  top: -35%;
  transition: width 0.3s ease-out !important;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  -ms-transform: skewX(-36deg);
  -webkit-transform: skewX(-36deg);
  transform: skewX(-36deg); }

.Button-copy {
  display: inline-block;
  position: relative;
  transition: color 0.3s ease-out !important; }

.Button--primary {
  /* -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
        @supports (-webkit-appearance:none) and (R:0) {
            // turn off for chrome
            -webkit-mask-image: none;
         }; */ }

.Button--primary .Button-panel {
  background: #0a264d; }

.Button--secondary {
  padding: 9px 6px;
  border: 2px solid #fff; }

.Button--secondary:hover:after,
.Button--secondary:focus:after {
  -ms-transform: translate(0, -5%);
  -webkit-transform: translate(0, -5%);
  transform: translate(0, -5%); }

.Button--image {
  padding: 0;
  width: auto; }

.Button--image img {
  display: block; }

.Button--small {
  padding-top: 9px;
  padding-bottom: 9px; }

@media (min-width: 48em) {
  .Button--small {
    width: 160px; } }

.Button--small.Button--secondary {
  padding-top: 7px;
  padding-bottom: 7px; }

.Button--large {
  /*padding-top: 15px;
    padding-bottom: 15px;*/
  font-size: 1em; }

@media (min-width: 48em) {
  .Button--large {
    width: 220px; } }

.Button--large.Button--secondary {
  padding-top: 13px;
  padding-bottom: 13px; }

.Button--blue-light {
  border-color: #00c5e8;
  color: #fff; }

.Button--blue-light.Button--primary {
  background: #00c5e8;
  background: -ms-linear-gradient(135deg, #00c5e8 0%, #00afcf 100%);
  background: linear-gradient(135deg, #00c5e8 0%, #00afcf 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color-medium-blue-1', endColorstr='#00afcf', GradientType=1 ); }

.Button--blue-light.Button--primary.Button--dark-bg:hover {
  color: #1b2429; }

.Button--blue-light.Button--primary.Button--dark-bg .Button-panel {
  background: #f1f2f4; }

.Button--blue-light.Button--secondary {
  color: #00c5e8; }

.Button--blue-light.Button--secondary:hover,
.Button--blue-light.Button--secondary:focus {
  color: #fff; }

.Button--blue-light.Button--secondary .Button-panel {
  background: #00c5e8; }

.Button--blue-medium {
  color: #fff; }

.Button--blue-medium.Button--primary {
  background: #0a264d;
  background: -ms-linear-gradient(135deg, #0a264d 0%, #071b36 100%);
  background: linear-gradient(135deg, #0a264d 0%, #071b36 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color-blue-1', endColorstr='#071b36', GradientType=1 ); }

.Button--blue-medium.Button--primary.Button--light-bg .Button-panel {
  background: #00c5e8; }

.Button--blue-dark {
  border-color: #0a264d;
  color: #fff; }

.Button--blue-dark.Button--primary {
  background: #0a264d;
  background: -ms-linear-gradient(135deg, #0a264d 0%, #071b36 100%);
  background: linear-gradient(135deg, #0a264d 0%, #071b36 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color-blue-1', endColorstr='#071b36', GradientType=1 ); }

.Button--blue-dark.Button--primary.Button--dark-bg:hover {
  color: #0a264d; }

.Button--blue-dark.Button--primary.Button--dark-bg .Button-panel {
  background: #f1f2f4; }

.Button--blue-dark.Button--secondary {
  color: #0a264d; }

.Button--blue-dark.Button--secondary:hover,
.Button--blue-dark.Button--secondary:focus {
  color: #fff; }

.Button--blue-dark.Button--secondary .Button-panel {
  background: #0a264d; }

.Button--grey-light {
  border-color: #f1f2f4;
  color: #1b2429; }

.Button--grey-light.Button--primary {
  background: #f1f2f4; }

.Button--grey-light.Button--primary.Button--dark-bg .Button-panel {
  background: #00c5e8; }

.Button--grey-light.Button--primary.Button--dark-blue-bg .Button-panel {
  background: #0a264d; }

.Button--grey-light.Button--secondary:hover,
.Button--grey-light.Button--secondary:focus {
  color: #1b2429; }

.Button--grey-light.Button--secondary .Button-panel {
  background: #f1f2f4; }

.Button--green {
  border-color: #1ab99f;
  color: #fff; }

.Button--green.Button--secondary {
  color: #1ab99f; }

.Button--green.Button--secondary:hover,
.Button--green.Button--secondary:focus {
  color: #fff; }

.Button--green.Button--secondary .Button-panel {
  background: #1ab99f; }

.Button--white {
  color: #fff; }

.Button--white.Button--secondary:hover,
.Button--white.Button--secondary:focus {
  color: #1b2429; }

.Button--white-reversed {
  color: #1b2429; }

.Button--white-reversed.Button--secondary:hover,
.Button--white-reversed.Button--secondary:focus {
  color: #1b2429; }

.Button--back-to-top {
  top: -3rem;
  margin: 0 auto;
  width: 160px;
  font-size: 0.687rem;
  letter-spacing: 0.025rem;
  line-height: 1.125rem;
  text-align: center;
  text-transform: uppercase; }

@media (min-width: 48em) {
  .Button--back-to-top {
    display: none; } }

.Button--back-to-top .Icon {
  position: relative;
  float: right;
  margin: 3px 10px 0 0;
  z-index: 1; }

.Button--back-to-top .Button-copy {
  z-index: 1; }

.Button + .Button {
  margin-top: 1rem; }

@media (min-width: 48em) {
  .Button + .Button {
    margin-top: 0;
    margin-left: 1rem; } }

.Button--youtube, .Button--twitter {
  font-size: 0.7rem;
  text-transform: uppercase;
  padding: 0.5rem 3rem 0.5rem 0.7rem;
  text-align: left;
  border-color: #f1f2f4; }

.Button--youtube .Icon, .Button--twitter .Icon {
  position: absolute;
  top: 50%;
  -ms-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  right: 0.5rem;
  z-index: 2;
  transition: color 0.3s ease-out !important; }

.Button--youtube .Icon {
  font-size: 1.42rem; }

.Button--youtube.Button--secondary {
  color: #e62c27; }

.Button--youtube.Button--secondary:hover,
.Button--youtube.Button--secondary:focus {
  color: #fff; }

.Button--youtube.Button--secondary .Button-panel {
  background: #e62c27; }

.Button--twitter .Icon {
  font-size: 3rem;
  right: 0; }

.Button--twitter.Button--secondary {
  color: #55acee; }

.Button--twitter.Button--secondary:hover,
.Button--twitter.Button--secondary:focus {
  color: #fff; }

.Button--twitter.Button--secondary .Button-panel {
  background: #55acee; }

@media (max-width: 47.99em) {
  .Button--image {
    display: block; }
  .Button--image img {
    margin: 0 auto !important; } }

@media (max-width: 61.99em) {
  .Products .ProductsBody.Button {
    display: block; } }

.Button--trigger3D {
  transform: translateZ(1px); }

.Button--trigger3D.Button-panel {
  transform: skew(-36deg) translateZ(1px); }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.MobileNav {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  /* height: 100%; */
  background-color: #fff;
  z-index: 90;
  /* overflow-y: scroll;
    overflow-x: hidden; */
  overflow: hidden;
  -webkit-overflow-scrolling: touch; }

.lt-ie10 .MobileNav {
  width: calc(100% + 17px); }

@media (min-width: 75em) {
  html.lt-ie10 .MobileNav {
    display: none; } }

.MobileNav-level {
  padding-top: 82px;
  background: #e8eaec;
  background: -ms-linear-gradient(45deg, #e8eaec 0%, #f1f2f4 70%);
  background: linear-gradient(45deg, #e8eaec 0%, #f1f2f4 70%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8eaec', endColorstr='$color-light-grey-2', GradientType=1 );
  padding-bottom: 3rem;
  min-height: 100vh; }

.MobileNav-level .MobileNav-level {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  z-index: 40; }

.MobileNav-list {
  max-width: 296px;
  margin: 0 auto;
  padding: 0; }

.MobileNav-list-item {
  position: static;
  padding: 0;
  margin: 0;
  list-style: none;
  border-bottom: 1px solid #e8e9ed; }

.MobileNav-list-item:first-child {
  border-top: 1px solid #e8e9ed; }

.MobileNav-list-item > a {
  display: block;
  width: 100%;
  padding: 0.7em 0 0.8em 0;
  font-size: 0.875rem;
  letter-spacing: 0.025rem;
  line-height: 1.562rem;
  font-family: "latoregular", sans-serif;
  text-decoration: none;
  text-transform: uppercase; }

.MobileNav-list-item > a:hover {
  text-decoration: underline; }

.MobileNav-list-item > a span {
  margin-right: 16px; }

.MobileNav-list-item::before {
  display: none; }

.MobileNav-list-item.is-current-page {
  text-decoration: underline; }

.MobileNav-list-item-icon {
  display: inline-block;
  position: relative;
  top: 3px;
  font-size: 1.4em;
  margin-right: 1rem; }

.MobileNav-flag-image {
  display: inline-block;
  position: relative;
  top: 1px;
  width: 1.2rem;
  height: auto;
  margin-right: 1rem; }

.MobileNav-list-item-arrow {
  float: right;
  position: relative;
  top: 4px;
  font-size: 1.1em; }

.MobileNav-persona-menu {
  background-color: transparent; }

.MobileNav-persona-menu-list {
  width: 296px;
  margin: 0 auto;
  padding: 0;
  text-align: justify; }

.MobileNav-persona-menu-item {
  display: inline-block;
  padding: 6px;
  margin-bottom: 0; }

.MobileNav-persona-menu-item::before {
  display: none; }

.MobileNav-persona-menu-item-link {
  font-size: 0.875rem;
  letter-spacing: 0.025rem;
  line-height: 1.562rem;
  font-size: 12px;
  font-family: "latoregular", sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  color: #0a264d; }

.MobileNav-persona-menu-item-link:hover {
  text-decoration: underline; }

.MobileNav-level-header {
  overflow: hidden;
  max-width: 296px;
  margin: 0 auto; }

.MobileNav-level-title {
  float: left;
  margin: 12px 0 12px 0;
  font-size: 1rem;
  letter-spacing: 0.055rem;
  line-height: 1.562rem;
  line-height: 1.562rem;
  font-family: "latoregular", sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  color: #0a264d; }

a.MobileNav-level-title:hover {
  text-decoration: underline; }

.MobileNav-back {
  float: right;
  margin: 12px 6px;
  font-size: 0.875rem;
  letter-spacing: 0.025rem;
  line-height: 1.562rem;
  font-family: "latoregular", sans-serif;
  text-decoration: none; }

.MobileNav-back:hover {
  text-decoration: underline; }

.MobileNav-sign-in-button-container {
  overflow: hidden;
  max-width: 296px;
  margin: 0 auto 0.5rem auto; }

.MobileNav-login-text {
  float: left;
  font-size: 0.875rem;
  letter-spacing: 0.025rem;
  line-height: 1.562rem;
  font-family: "latoregular", sans-serif;
  color: #1b2429;
  width: 50%;
  line-height: 46px; }

.MobileNav-sign-in-button {
  float: right;
  width: 50%; }

p.MobileCreateAccount-warning {
  text-align: center; }

.MobileNav--dark {
  background-color: #1b2429;
  background: #1b2429;
  background: -ms-linear-gradient(180deg, #1b2429 0%, #3a4044 90%);
  background: linear-gradient(180deg, #1b2429 0%, #3a4044 90%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color-dark-blue-1', endColorstr='#3a4044', GradientType=1 ); }

.MobileNav--dark .MobileNav-login-text {
  color: #fff; }

.MobileNav--dark .MobileNav-level {
  background: #1b2429;
  background: -ms-linear-gradient(180deg, #1b2429 0%, #3a4044 90%);
  background: linear-gradient(180deg, #1b2429 0%, #3a4044 90%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color-dark-blue-1', endColorstr='#3a4044', GradientType=1 ); }

.MobileNav--dark .MobileNav-persona-menu-list {
  background: url("https://assets.cmcmarkets.com/images/footer-contact-separator.png") center center no-repeat;
  background-size: contain; }

.MobileNav--dark .MobileNav-list-item {
  border-bottom: 1px solid #3c444b; }

.MobileNav--dark .MobileNav-list-item:first-child {
  border-top: 1px solid #3c444b; }

.MobileNav--dark .MobileNav-persona-menu-item-link {
  color: #fff; }

.MobileNav--dark .MobileNav-level-title {
  color: #fff; }

.MobileNav--dark .MobileNav-search {
  margin-top: .5rem;
  padding: 1px 0;
  background: #e8eaec;
  background: -ms-linear-gradient(45deg, #e8eaec 0%, #f1f2f4 70%);
  background: linear-gradient(45deg, #e8eaec 0%, #f1f2f4 70%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8eaec', endColorstr='$color-light-grey-2', GradientType=1 ); }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.Hat {
  display: none; }

@media (min-width: 75em) {
  .Hat {
    display: block;
    position: relative;
    z-index: 100;
    display: block;
    height: 45px;
    overflow: hidden;
    background-color: #fff;
    transition: background-color 0.3s ease-in-out; }
  .Hat-persona-menu {
    float: left;
    height: 45px; }
  .Hat-persona-menu-list {
    padding-left: 0; }
  .Hat-persona-menu-item {
    display: inline-block;
    margin: 0 14px 0 0;
    padding-left: 0;
    font-size: 0.687rem;
    letter-spacing: 0.025rem;
    line-height: 1.125rem;
    line-height: 45px;
    text-transform: uppercase;
    color: #58585a;
    transition: color 0.3s ease-in-out; }
  .Hat-persona-menu-item::before {
    display: none; }
  .Hat-persona-menu-item::after {
    display: block;
    content: "|";
    float: right;
    margin-left: 14px; }
  .Hat-persona-menu-item:last-child::after {
    display: none; }
  .Hat-persona-menu-item-link {
    transition: color 0.3s ease-in-out;
    color: #58585a;
    text-decoration: none; }
  .Hat-persona-menu-item-link:hover {
    text-decoration: underline; }
  .Hat-call,
  .Hat-chat {
    float: right;
    margin-left: 36px;
    height: 45px;
    transition: color 0.3s ease-in-out;
    font-size: 0.687rem;
    letter-spacing: 0.025rem;
    line-height: 1.125rem;
    font-size: 0.75rem; }
  .Hat-call {
    margin-left: 0; }
  .Hat-call-icon,
  .Hat-chat-icon {
    margin-right: 10px;
    line-height: 45px;
    font-size: 1.3rem;
    color: #00c5e8; }
  .Hat-call-text,
  .Hat-chat-text {
    position: relative;
    top: -5px;
    line-height: 45px;
    font-size: 0.75rem;
    color: #58585a;
    transition: color 0.3s ease-in-out;
    text-decoration: none; }
  .Hat-call-text:hover,
  .Hat-chat-text:hover {
    text-decoration: underline; }
  .Hat-locale-handle {
    float: right;
    margin-left: 27px;
    height: 25px;
    margin-top: 10px;
    padding-left: 22px;
    border-radius: 4px;
    background-color: #f1f2f4;
    color: #58585a;
    font-size: 0.687rem;
    letter-spacing: 0.025rem;
    line-height: 1.125rem;
    line-height: 25px;
    transition: all 0.2s ease-in-out;
    text-decoration: none; }
  .Hat-locale-handle:hover,
  .Hat-locale-handle:active,
  .Hat-locale-handle:visited,
  .Hat-locale-handle:focus {
    text-decoration: none; }
  .Hat-locale-handle:hover {
    background-color: #e8e9ed; }
  .Hat-locale-handle-icon {
    padding-left: 17px;
    padding-right: 17px;
    color: #00c5e8; }
  .Hat--dark {
    background-color: #091326; }
  .Hat--dark .Hat-persona-menu-item,
  .Hat--dark .Hat-persona-menu-item-link,
  .Hat--dark .Hat-call-text,
  .Hat--dark .Hat-chat-text {
    color: #e8e9ed; }
  .Hat--dark .Hat-locale-handle {
    color: #e8e9ed;
    background-color: #162032; }
  .Hat--dark .Hat-locale-handle:hover {
    background-color: #1e2b44; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.FlagImage {
  display: inline-block;
  width: 20px;
  height: 15px;
  background: url("https://assets.cmcmarkets.com/images/flags-small.png") center center no-repeat;
  vertical-align: middle; }

.FlagImage--australia {
  background-position: center -13px; }

.FlagImage--austria {
  height: 13.5px;
  background-position: center 0; }

.FlagImage--canada {
  background-position: center -27px; }

.FlagImage--france {
  height: 15.5px;
  background-position: center -42px; }

.FlagImage--germany {
  height: 14.3px;
  background-position: center -57px; }

.FlagImage--ireland {
  background-position: center -71px; }

.FlagImage--italy {
  background-position: center -85px; }

.FlagImage--new-zealand {
  background-position: center -99px; }

.FlagImage--norway {
  height: 16.4px;
  background-position: center -114px; }

.FlagImage--poland {
  height: 14.4px;
  background-position: center -190px; }

.FlagImage--singapore {
  height: 14px;
  background-position: center -130px; }

.FlagImage--spain {
  height: 16px;
  background-position: center -145px; }

.FlagImage--sweden {
  background-position: center -160px; }

.FlagImage--united-kingdom {
  height: 16.4px;
  background-position: center -175px; }

.FlagImage--globe {
  height: 16px;
  background-position: center -204px; }

@media (min-width: 62em) {
  .FlagImage {
    width: 28px;
    height: 21px;
    background: url("https://assets.cmcmarkets.com/images/flags.png") center center no-repeat; }
  .FlagImage--australia {
    background-position: center -18px; }
  .FlagImage--austria {
    height: 19px;
    background-position: center 0; }
  .FlagImage--canada {
    background-position: center -38px; }
  .FlagImage--france {
    height: 22px;
    background-position: center -58px; }
  .FlagImage--germany {
    height: 20px;
    background-position: center -79px; }
  .FlagImage--ireland {
    background-position: center -99px; }
  .FlagImage--italy {
    background-position: center -119px; }
  .FlagImage--new-zealand {
    background-position: center -139px; }
  .FlagImage--norway {
    height: 23px;
    background-position: center -159px; }
  .FlagImage--poland {
    height: 19px;
    background-position: center -266px; }
  .FlagImage--singapore {
    height: 21px;
    background-position: center -181px; }
  .FlagImage--spain {
    height: 23px;
    background-position: center -202px; }
  .FlagImage--sweden {
    background-position: center -224px; }
  .FlagImage--united-kingdom {
    height: 23px;
    background-position: center -244px; }
  .FlagImage--globe {
    height: 23px;
    background-position: center -285px; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.NavBar {
  position: relative;
  height: 70px;
  background-color: #f1f2f4;
  border-top: 1px solid;
  border-top-color: #e8e9ed;
  border-bottom: 1px solid;
  border-bottom-color: #fff;
  overflow: hidden;
  transition-property: background-color, border-top-color, border-bottom-color;
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out; }

.NavBar--dark {
  background-color: #1b2429;
  border-top: 1px solid;
  border-top-color: #1b2429;
  border-bottom: 2px solid;
  border-bottom-color: #222e35; }

.NavBar-nav-icon {
  position: absolute;
  padding-top: 19px;
  padding-right: 12px;
  right: -12px;
  top: 0;
  width: 81px;
  height: 70px;
  text-decoration: none;
  text-align: right; }

.NavBar-nav-icon:hover {
  text-decoration: none; }

.NavBar-nav-icon i {
  display: block;
  margin-right: 4px;
  font-style: normal;
  font-size: 22px;
  line-height: 20px; }

.NavBar-nav-icon-menu-text {
  display: block;
  margin: 0 auto;
  font-size: 0.687rem;
  letter-spacing: 0.025rem;
  line-height: 1.125rem;
  font-family: "ubunturegular", sans-serif; }

.NavBar--dark .NavBar-nav-icon-menu-text {
  color: #fff; }

.NavBar-logo {
  display: inline-block;
  margin-top: 15px;
  margin-left: 0;
  width: 69px; }

.NavBar-logo-image {
  width: 69px;
  height: 40px; }

.NavBar-level-1 {
  display: none; }

.NavBar-mobile-button-group {
  position: absolute;
  top: 14px;
  right: 71px;
  display: block; }

.NavBar-button-group {
  display: none; }

.NavBar-search-button {
  display: none; }

@media (min-width: 75em) {
  .NavBar {
    height: 90px; }
  .NavBar-mobile-button-group {
    display: none; }
  .NavBar-nav-icon {
    display: none; }
  .NavBar-logo {
    float: left;
    margin-top: 0;
    margin-left: 0;
    width: 80px;
    height: 90px;
    line-height: 90px;
    outline: none; }
  .NavBar-logo:active {
    outline: none; }
  .NavBar-logo-image {
    position: relative;
    top: -5px;
    width: 100%;
    height: auto;
    line-height: 90px;
    vertical-align: middle;
    display: inline-block; }
  .NavBar-level-1 {
    display: block;
    float: left; }
  .NavBar-level-1 {
    position: relative; }
  .NavBar-level-1-underline {
    position: absolute;
    bottom: 3px;
    left: 40px;
    opacity: 0;
    height: 4px;
    background-color: #00c5e8; }
  .NavBar-level-1-list {
    list-style-type: none;
    padding-left: 40px;
    margin-bottom: 0; }
  .NavBar-level-1-list-item {
    position: relative;
    display: inline-block;
    margin-bottom: 0;
    height: 90px;
    padding: 0 15px;
    line-height: 90px;
    vertical-align: middle;
    font-family: "ubunturegular", sans-serif; }
  .NavBar-level-1-list-item::before {
    display: none; }
  .NavBar-level-1-list-item:last-child {
    padding-right: 0; }
  .NavBar-level-1-list-item:first-child {
    padding-left: 0; }
  .NavBar-level-1-list-item-link {
    position: relative;
    display: block;
    padding: 0 5px;
    vertical-align: middle;
    color: #1b2429;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.025rem;
    line-height: 1.562rem;
    font-size: 0.8125rem;
    font-family: "latoregular", sans-serif;
    line-height: 90px;
    text-decoration: none;
    transition: color 0.1s ease-in-out; }
  .NavBar-level-1-list-item-link:hover {
    text-decoration: underline; }
  .NavBar--dark .NavBar-level-1-list-item-link {
    color: #fff; }
  .NavBar-level-1-list-item-link.is-current-page {
    position: relative;
    color: #00c5e8; }
  .NavBar-level-1-list-item-link.is-current-page:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 3px;
    left: 0;
    height: 4px;
    background: #00c5e8; }
  .NavBar-level-1-list-item.is-active .NavBar-level-1-list-item-link,
  .NavBar-level-1-list-item-link:hover {
    text-decoration: none;
    color: #00c5e8; }
  .NavBar-sign-in-button {
    display: inline-block; }
  .NavBar-search-button {
    display: block;
    float: left;
    margin-left: 24px;
    color: #1b2429;
    transition: color 0.1s ease-in-out; }
  .NavBar--dark .NavBar-search-button {
    color: #fff; }
  .NavBar-search-button:hover {
    color: #00c5e8; }
  .NavBar-search-button .NavBar-search-button-icon {
    display: inline-block;
    height: 90px;
    line-height: 90px;
    vertical-align: middle; }
  .NavBar-button-group {
    display: block;
    position: absolute;
    top: 23px;
    right: 6px;
    width: 336px;
    text-align: right; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.CreateAccountPanel {
  position: relative;
  padding: 0 12px 3rem 12px;
  width: 100%;
  max-width: 500px;
  margin: 0 auto; }

.CreateAccountPanel-title {
  margin-top: 0;
  margin-bottom: 1rem;
  z-index: 10;
  text-align: center;
  font-size: 1.56rem;
  letter-spacing: 0.135rem;
  line-height: 1.875rem;
  font-size: 1.375rem;
  color: #1b2429;
  font-family: "latoregular", sans-serif;
  text-transform: none; }

.CreateAccountPanel--dark {
  float: right; }

.CreateAccountPanel--dark .CreateAccountPanel-benefits-list {
  color: #00c5e8; }

.CreateAccountPanel--dark .CreateAccountPanel-title {
  color: #fff; }

.CreateAccountPanel-benefits-list {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 1.5em; }

.CreateAccountPanel-benefit {
  position: relative;
  margin-bottom: 1.2em;
  padding-left: 51px; }

.CreateAccountPanel-benefit::before {
  position: absolute;
  left: 5px;
  top: 6px;
  color: #00c5e8;
  content: "\e618";
  font-family: 'icomoon';
  speak: none;
  font-size: 1.8rem;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: transparent; }

.CreateAccountPanel-button {
  display: block;
  margin: 0 auto;
  width: 92%;
  max-width: inherit; }

@media (min-width: 30em) {
  .CreateAccountPanel-button {
    width: 80%; } }

@media (min-width: 75em) {
  .CreateAccountPanel-button {
    width: 100%; } }

.CreateAccountPanel-button:first-of-type {
  margin-bottom: 29px; }

.CreateAccountPanel-button + .CreateAccountPanel-button {
  margin-left: auto; }

.CreateAccountPanel-warning {
  margin: 1rem 0;
  color: #00c5e8;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-align: center; }

@media (min-width: 75em) {
  .CreateAccountPanel {
    width: 50%;
    float: left;
    height: auto;
    padding: 0 90px 78px 90px;
    overflow-y: auto;
    background: rgba(232, 234, 236, 0.99);
    background: -ms-linear-gradient(45deg, rgba(232, 234, 236, 0.99) 0%, rgba(241, 242, 244, 0.99) 70%);
    background: linear-gradient(45deg, rgba(232, 234, 236, 0.99) 0%, rgba(241, 242, 244, 0.99) 70%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(232, 234, 236, 0.99)', endColorstr='rgba(241, 242, 244, 0.99)', GradientType=1 ); }
  html.lt-ie10 .CreateAccountPanel {
    background: #e8eaec;
    background: -ms-linear-gradient(45deg, #e8eaec 0%, #f1f2f4 70%);
    background: linear-gradient(45deg, #e8eaec 0%, #f1f2f4 70%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8eaec', endColorstr='$color-light-grey-2', GradientType=1 ); }
  .CreateAccountPanel-title {
    margin-top: 61px;
    margin-bottom: 2em; }
  .CreateAccountPanel--dark {
    background: rgba(27, 36, 41, 0.99);
    background: -ms-linear-gradient(45deg, rgba(27, 36, 41, 0.99) 0%, rgba(58, 64, 68, 0.99) 70%);
    background: linear-gradient(45deg, rgba(27, 36, 41, 0.99) 0%, rgba(58, 64, 68, 0.99) 70%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(27, 36, 41, 0.99)', endColorstr='rgba(58, 64, 68, 0.99)', GradientType=1 ); }
  html.lt-ie10 .CreateAccountPanel--dark {
    background: #1b2429;
    background: -ms-linear-gradient(45deg, #1b2429 0%, #3a4044 70%);
    background: linear-gradient(45deg, #1b2429 0%, #3a4044 70%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color-dark-blue-1', endColorstr='#3a4044', GradientType=1 ); } }

.CreateAccountPopup {
  display: none;
  position: relative;
  top: -17px;
  margin: 17px 0 0 auto;
  width: 992px;
  z-index: 100;
  max-height: calc(100vh - 135px); }

.CreateAccountPopup.is-active {
  display: block; }

.CreateAccountPopup::after {
  content: "";
  position: absolute;
  top: -17px;
  right: 71px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 17px 17px 17px;
  border-color: transparent transparent #3a4044 transparent; }

.CreateAccountPopup-close-button {
  position: absolute;
  right: 38px;
  top: 29px;
  z-index: 30;
  color: #f1f2f4;
  cursor: pointer;
  transition: color 0.3s ease-in-out; }

.CreateAccountPopup-close-button:hover {
  color: #00c5e8; }

.CreateAccountPopup-inner {
  overflow-y: auto;
  max-height: calc(100vh - 135px); }

@media (min-width: 81.3125em) {
  .CreateAccountPopup {
    margin-right: auto;
    left: 150px; }
  .CreateAccountPopup::after {
    right: 76px; } }

@media (min-width: 84.125em) {
  .CreateAccountPopup {
    left: 191px; }
  .CreateAccountPopup::after {
    right: 114px; } }

@media (max-width: 61.99em) {
  .CreateAccountPopup {
    display: none !important; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.SearchBar {
  width: 296px;
  margin: 0 auto;
  padding: 0;
  background-color: #fff; }

@media (max-width: 74.9375em) {
  .SearchBar--desktop {
    display: none !important; } }

.SearchBar-button {
  border: 0;
  background: none;
  color: #00c5e8; }

.SearchBar-input-group {
  position: relative;
  margin: 1rem 0; }

.SearchBar-input {
  position: relative;
  z-index: 20;
  width: 100%;
  height: 45px;
  line-height: 1.2;
  padding-right: 2em;
  padding-left: 1em;
  background-color: transparent;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  border-bottom: 0;
  text-decoration: none;
  font-family: "ubuntulight", sans-serif;
  font-size: 1rem;
  letter-spacing: 0.5px;
  color: #00c5e8;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none; }

.SearchBar-input:invalid {
  box-shadow: none; }

.SearchBar-input:focus {
  outline: none !important;
  box-shadow: none; }

.SearchBar-input.is-filled + .SearchBar-input-label {
  opacity: 0; }

.SearchBar-input-label {
  position: absolute;
  opacity: 1;
  z-index: 10;
  left: 0;
  top: 0;
  height: 45px;
  line-height: 45px;
  padding-left: 1.8rem;
  font-family: "ubuntulight", sans-serif;
  font-size: 1rem;
  font-weight: normal;
  letter-spacing: 0.5px;
  color: #0a264d;
  transition: opacity 0.2s ease; }

.SearchBar-button {
  position: absolute;
  right: 11px;
  top: 11px;
  border: 0;
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 30; }

@media (min-width: 75em) {
  .SearchBar {
    display: none;
    position: fixed;
    top: 70px;
    left: 0;
    width: 100vw;
    max-width: inherit;
    margin: 0;
    padding: 0;
    z-index: 100;
    text-transform: none;
    background-color: transparent;
    background: #f1f2f4; } }

@media (min-width: 75em) and (min-width: 75em) {
  .SearchBar {
    top: 135px; } }

@media (min-width: 75em) {
  .SearchBar .container-fluid {
    position: relative; }
  .SearchBar-close-button {
    position: absolute;
    right: 6px;
    top: 27px;
    z-index: 30;
    color: #979b9e;
    cursor: pointer;
    transition: color 0.3s ease-in-out; }
  .SearchBar-close-button:hover {
    color: #1b2429; }
  .SearchBar-arrow {
    position: absolute;
    top: -9px;
    left: calc(50% - 8px);
    width: 18px;
    height: 18px;
    border-top: 1px solid white;
    border-left: 1px solid white;
    background: linear-gradient(to right bottom, #f1f2f4, #f1f2f4 50%, transparent 50%, transparent 100%);
    background: -ms-linear-gradient(to right bottom, #f1f2f4, #f1f2f4 50%, transparent 50%, transparent 100%);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg); }
  .SearchBar-inner {
    height: 100%;
    max-height: calc(100vh - 135px);
    overflow-y: auto; }
  .SearchBar-input-group {
    width: 950px;
    margin: 86px auto; }
  .SearchBar-input {
    font-size: 2rem;
    height: 60px;
    border-bottom: 2px solid #fff;
    padding-left: 0; }
  .SearchBar-input-label {
    font-size: 2rem;
    left: 0;
    top: 0;
    height: 60px;
    line-height: 60px;
    padding-left: 1rem; }
  .SearchBar-button {
    font-size: 2.4rem;
    top: 10px; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.MobileCreateAccount {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding-top: 70px;
  height: 100%;
  z-index: 11;
  background: rgba(232, 234, 236, 0.99);
  background: -ms-linear-gradient(45deg, rgba(232, 234, 236, 0.99) 0%, rgba(241, 242, 244, 0.99) 70%);
  background: linear-gradient(45deg, rgba(232, 234, 236, 0.99) 0%, rgba(241, 242, 244, 0.99) 70%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(232, 234, 236, 0.99)', endColorstr='rgba(241, 242, 244, 0.99)', GradientType=1 ); }

html.lt-ie10 .MobileCreateAccount {
  background: #e8eaec;
  background: -ms-linear-gradient(45deg, #e8eaec 0%, #f1f2f4 70%);
  background: linear-gradient(45deg, #e8eaec 0%, #f1f2f4 70%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8eaec', endColorstr='$color-light-grey-2', GradientType=1 ); }

.MobileCreateAccount-menu {
  padding: 1rem 12px; }

.MobileCreateAccount-menu ul {
  position: relative;
  padding: 0;
  margin: 0;
  background-color: #fff;
  border-radius: 4px;
  overflow: hidden;
  z-index: 10; }

.MobileCreateAccount-menu ul > li {
  width: 50%;
  display: inline-block;
  padding: 0;
  margin: 0;
  z-index: 30; }

.MobileCreateAccount-menu ul > li:before {
  display: none; }

.MobileCreateAccount-menu ul > li > a {
  display: inline-block;
  width: 100%;
  line-height: 100%;
  padding: 1rem 1rem;
  color: #0a264d;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  transition: color 0.2s ease-in; }

.MobileCreateAccount-menu ul > li.is-open > a {
  color: #fff; }

.MobileCreateAccount-menu-panel {
  position: absolute;
  top: 0;
  left: -10%;
  width: 60%;
  height: 100%;
  background: #0a264d;
  z-index: 20;
  transition: -webkit-transform 0.2s ease-in;
  transition: transform 0.2s ease-in;
  -ms-transform: translate(0, 0) skew(-20deg, 0);
  -webkit-transform: translate(0, 0) skew(-20deg, 0);
  transform: translate(0, 0) skew(-20deg, 0); }

li.is-open + .MobileCreateAccount-menu-panel {
  -ms-transform: translate(100%, 0) skew(-20deg, 0);
  -webkit-transform: translate(100%, 0) skew(-20deg, 0);
  transform: translate(100%, 0) skew(-20deg, 0); }

.MobileCreateAccount-panels {
  overflow: hidden;
  width: 100%;
  height: calc(100vh - 144px);
  position: relative;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch; }

.MobileCreateAccount-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

.MobileCreateAccount-panel:last-child {
  left: 100%; }

.MobileCreateAccount-warning {
  margin: 2rem 0 0;
  color: #00c5e8;
  font-size: 0.875rem;
  line-height: 1.25rem; }

@media (min-width: 75em) {
  .MobileCreateAccount {
    display: none; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.Slider {
  position: relative;
  z-index: 0;
  height: calc(100vh - 70px);
  text-align: center;
  overflow: hidden; }

@media (min-width: 75em) {
  .Slider {
    height: calc(100vh - 145px); } }

.Slider canvas {
  z-index: 10;
  opacity: 0;
  display: block; }

.Slider-inner {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 20;
  padding: 1.5rem 5% 0 5%;
  overflow: hidden; }

@media (orientation: landscape) {
  .Slider-inner {
    padding-top: 0.3rem; } }

@media (orientation: portrait) and (min-width: 480px) {
  .Slider-inner {
    padding-top: 2rem; } }

@media (orientation: landscape) and (min-height: 400px) and (min-width: 630px) {
  .Slider-inner {
    padding-top: 2rem; } }

@media (min-width: 980px) and (min-height: 800px) {
  .Slider-inner {
    padding-top: 3rem; } }

.Slider-heading {
  color: #1b2429;
  text-align: center;
  font-size: 1.56rem;
  letter-spacing: 0.135rem;
  line-height: 1.875rem;
  font-size: 1.8rem; }

@media (orientation: landscape) {
  .Slider-heading {
    font-size: 1.25rem; } }

@media (orientation: landscape) and (max-width: 480px) {
  .Slider-heading {
    font-size: 1rem; } }

@media (min-width: 980px) {
  .Slider-heading {
    font-size: 1.56rem;
    letter-spacing: 0.135rem;
    line-height: 1.875rem;
    font-size: 1.8rem; } }

.is-ultra-narrow .Slider-heading {
  display: none; }

.Slider-standfirst {
  display: none;
  color: #1b2429;
  text-align: center; }

@media (orientation: portrait) and (min-width: 500px) {
  .Slider-standfirst {
    display: inline; } }

@media (min-width: 768px) and (min-height: 700px) {
  .Slider-standfirst {
    display: inline; } }

.Slider-advanced,
.Slider-standard {
  position: absolute;
  top: 85%;
  right: 8%;
  font-size: 1rem;
  text-transform: uppercase;
  font-family: "ubunturegular", sans-serif;
  color: #1b2429;
  letter-spacing: 3px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }
  @media (min-height: 768px) and (min-width: 1024px) and (orientation: landscape) {
    .Slider-advanced,
    .Slider-standard {
      top: calc(50% - 0.5em);
      font-size: 1.1rem;
      right: 8%; } }

@media (max-width: 768px) {
  .Slider-standard,
  .Slider-advanced {
    top: 75%; } }

.Slider-standard {
  left: 8%;
  right: auto; }
  @media (min-width: 1024px) and (min-height: 768px) {
    .Slider-standard {
      left: 8%; } }

.Slider-handle {
  position: absolute;
  top: calc(50% - 38px);
  left: calc(50% - 35px);
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 3px solid #00c5e8;
  background-color: rgba(0, 0, 0, 0.2);
  transition: -webkit-transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

.Slider-handle::selection {
  background-color: transparent; }

.Slider-handle.is-active,
.Slider-handle:hover {
  -ms-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  background-color: #00c5e8; }

.Slider-handle::before {
  position: absolute;
  left: 10px;
  top: 24px;
  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;
  content: "\e617";
  color: #fff; }

.Slider-handle::after {
  position: absolute;
  right: 10px;
  top: 24px;
  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;
  content: "\e612";
  color: #fff; }

.Slider-scroll {
  position: absolute;
  bottom: 0;
  left: calc(50% - 59px);
  width: 125px;
  padding: 10px 18px 8px 18px;
  background-color: #979b9e;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  color: #fff;
  text-transform: uppercase;
  font-size: 0.875rem;
  line-height: 1.25rem;
  cursor: pointer;
  z-index: 40; }

.Slider-scroll-icon {
  position: relative;
  top: 2px;
  margin-left: 0.5em; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.HomepageHero {
  position: relative;
  padding: 2rem 0 0 0;
  overflow: hidden;
  background-color: #1b2429;
  z-index: 10;
  min-height: 120vh; }

.HomepageHero-bg-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #1b2429 url("https://assets.cmcmarkets.com/images/homepage_bg_small.jpg") bottom no-repeat;
  background-attachment: scroll;
  background-size: cover;
  z-index: 11;
  opacity: 0; }

@media (min-width: 769px) {
  .HomepageHero-bg-container {
    background-image: url("https://assets.cmcmarkets.com/images/homepage_bg.jpg"); } }

.HomepageHero::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -350px;
  background-color: #e8e9ed;
  width: 100%;
  height: 400px;
  transition: height 0.8s ease-in-out;
  -moz-transform-origin: left;
  -o-transform-origin: left;
  -ms-transform-origin: left;
  -webkit-transform-origin: left;
  transform-origin: left;
  -ms-transform: skew(0deg, -6deg);
  -webkit-transform: skew(0deg, -6deg);
  transform: skew(0deg, -6deg);
  z-index: 20; }

.HomepageHero-heading {
  text-align: center;
  font-size: 1.2rem;
  line-height: 1.4;
  padding: 0 0.9rem;
  margin-bottom: 2rem;
  color: #fff;
  transition: opacity 0.5s ease-in-out;
  position: relative;
  z-index: 12; }

.HomepageHero.is-out .HomepageHero-heading {
  opacity: 0; }

.lt-ie10 .HomepageHero.is-out .HomepageHero-heading {
  opacity: 1; }

.HomepageHero-standfirst {
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.4;
  padding: 0 1.8rem;
  margin-bottom: 2rem;
  color: #fff;
  transition: opacity 0.5s ease-in-out;
  position: relative;
  z-index: 12; }

.HomepageHero.is-out .HomepageHero-standfirst {
  opacity: 0; }

.lt-ie10 .HomepageHero.is-out .HomepageHero-standfirst {
  opacity: 1; }

.HomepageHero-heading a {
  text-decoration: none;
  color: #00c5e8; }

.HomepageHero-laptop-wrapper {
  position: relative;
  width: 100%;
  z-index: 30;
  overflow: hidden;
  opacity: 1; }

.HomepageHero-laptop {
  opacity: 0;
  display: block;
  margin: 0 auto;
  z-index: 20;
  max-width: 900px;
  width: 90%; }

@media (min-width: 48em) {
  .HomepageHero-laptop {
    width: 60%; } }

@media (max-width: 81.1875em) {
  .HomepageHero-laptop {
    max-height: calc(100vh - 70px);
    width: auto;
    max-width: 90%; } }

@media (min-width: 75em) and (max-width: 81.1875em) {
  .HomepageHero-laptop {
    max-height: calc(100vh - 145px); } }

.HomepageHero-caption {
  position: absolute;
  left: -1000px;
  width: 200px;
  border: 1px solid #00c5e8;
  background-color: #1b2429;
  border-radius: 4px;
  color: #00c5e8;
  padding: 1rem 1.5rem;
  z-index: 40;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out; }

.HomepageHero.is-hotspots-visible .HomepageHero-caption {
  opacity: 1; }

.HomepageHero.is-out .HomepageHero-caption {
  opacity: 0; }

.lt-ie10 .HomepageHero.is-out .HomepageHero-caption {
  opacity: 1; }

.HomepageHero-hotspot {
  position: absolute;
  left: -1000px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #00c5e8;
  background-color: rgba(0, 0, 0, 0.2);
  transition: -webkit-transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  z-index: 40;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out; }

.HomepageHero-hotspot::selection {
  background-color: transparent; }

@media (max-width: 81.1875em) {
  .HomepageHero-hotspot {
    cursor: pointer; }
  .HomepageHero-hotspot.is-active,
  .HomepageHero-hotspot:hover {
    -ms-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    background-color: #00c5e8; } }

.HomepageHero.is-hotspots-visible .HomepageHero-hotspot {
  opacity: 1; }

.HomepageHero.is-out .HomepageHero-hotspot {
  opacity: 0; }

.lt-ie10 .HomepageHero.is-out .HomepageHero-hotspot {
  opacity: 1; }

.HomepageHero-mobile-caption {
  position: relative;
  z-index: 12;
  border: 1px solid #00c5e8;
  background-color: #1b2429;
  color: #00c5e8;
  text-align: center;
  padding: 1rem 3rem;
  width: 75%;
  margin: 0 auto 2rem auto;
  -ms-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  transform: translate3d(0px, 0px, 0px);
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out; }

.HomepageHero-mobile-caption::after {
  content: " ";
  display: block;
  position: absolute;
  bottom: -10px;
  left: 50%;
  margin-left: -10px;
  width: 18px;
  height: 18px;
  border-bottom: 1px solid #00c5e8;
  border-right: 1px solid #00c5e8;
  background-color: #1b2429;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg); }

.HomepageHero.is-hotspots-visible .HomepageHero-mobile-caption {
  opacity: 1; }

.HomepageHero.is-out .HomepageHero-mobile-caption {
  opacity: 0; }

.lt-ie10 .HomepageHero.is-out .HomepageHero-mobile-caption {
  opacity: 1; }

#HomepageHero-canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 30;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out; }

.HomepageHero.is-hotspots-visible #HomepageHero-canvas {
  opacity: 1; }

.HomepageHero.is-out #HomepageHero-canvas {
  opacity: 0; }

.lt-ie10 .HomepageHero.is-out #HomepageHero-canvas {
  opacity: 1; }

@media (min-width: 25em) {
  .HomepageHero-heading {
    font-size: 1.3rem;
    padding: 0;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto; }
  .HomepageHero-standfirst {
    font-size: 1rem;
    padding: 0;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto; } }

@media (min-width: 37.5em) {
  .HomepageHero-heading {
    font-size: 1.4rem;
    max-width: 60%; }
  .HomepageHero-standfirst {
    font-size: 1.1rem;
    max-width: 60%; } }

@media (min-width: 48em) {
  .HomepageHero-mobile-caption {
    max-width: 50%; } }

@media (min-width: 62em) {
  .HomepageHero {
    padding: 3rem 0 0 0; }
  .HomepageHero-heading {
    font-size: 2rem;
    max-width: 500px; }
  .HomepageHero-standfirst {
    font-size: 1.2rem; } }

@media (min-width: 87.5em) {
  .HomepageHero {
    padding: 5rem 0 0 0; } }

@media (min-width: 81.25em) {
  .HomepageHero-standfirst {
    margin-bottom: 4rem; } }

html.lt-ie9 {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden; }

html.lt-ie9 .GlobalHeader,
html.lt-ie9 .MobileNav,
html.lt-ie9 .MobileCreateAccount,
html.lt-ie9 #content,
html.lt-ie9 .Sponsorship,
html.lt-ie9 .Footer {
  display: none; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.BrowserSupport {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background: #1b2429;
  color: #f1f2f4;
  z-index: 999;
  overflow: auto; }

.BrowserSupport header {
  margin-bottom: 2em;
  padding: 0.25em 0 1em;
  border-bottom: 1px solid #58585a; }

.BrowserSupport-content {
  text-align: center; }

.BrowserSupport-content h1 {
  margin-bottom: 1em;
  color: #979b9e;
  font-size: 5em;
  line-height: 1.1em; }

.BrowserSupport-content p {
  margin-bottom: 2em;
  font-size: 1.1em;
  line-height: 1.2em; }

.BrowserSupport-list {
  margin-top: 4em;
  margin-bottom: 4em;
  padding: 0; }

.BrowserSupport-list li {
  margin-bottom: 0;
  width: 25%; }

.BrowserSupport-list li:before {
  display: none; }

.BrowserSupport-list a {
  display: block;
  text-decoration: none;
  color: #f1f2f4; }

.BrowserSupport-list img {
  display: block;
  margin: 0 auto 1em;
  max-width: 80%; }

/* Resets to bio styles */
.cmc .wrapper h3 {
  text-transform: none; }

.reset-bio-list ul {
  margin: 0;
  padding: 0; }
  .reset-bio-list ul li {
    margin: 0;
    padding: 0; }
    .reset-bio-list ul li:before {
      display: none; }

address {
  font-style: normal; }

.addressTitle {
  font-family: "ubunturegular", sans-serif;
  font-weight: bold; }

.addressTitle h3 {
  font-size: 1.56rem;
  letter-spacing: 0.135rem;
  line-height: 1.875rem;
  display: block; }

/* style.bio must be above widgets! */
/*@import 'bakery_imports/style.bio';*/
/*The following files are extracted from and replace style.bio, mirroring the order they are in that file:*/
/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.Section {
  padding: 3rem 0 3rem;
  background-color: white; }

.Section:before,
.Section:after {
  content: " ";
  display: table; }

.Section:after {
  clear: both; }

.Section--blue-light {
  background: #00c5e8; }

.Section--gradient-blue-light {
  background: #00c5e8;
  background: -ms-linear-gradient(135deg, #00c5e8 0%, #00afcf 100%);
  background: linear-gradient(135deg, #00c5e8 0%, #00afcf 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color-medium-blue-1', endColorstr='#00afcf', GradientType=1 ); }

.Section--blue-medium {
  background: #0a264d; }

.Section--blue-medium .Section-slant-overlay {
  background: #0a264d; }

.Section--gradient-blue-medium {
  background: #0a264d;
  background: -ms-linear-gradient(135deg, #0a264d 0%, #071b36 100%);
  background: linear-gradient(135deg, #0a264d 0%, #071b36 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color-blue-1', endColorstr='#071b36', GradientType=1 ); }

.Section--gradient-blue-medium .Section-title {
  color: #f1f2f4 !important; }

.Section--gradient-blue-medium-reversed {
  background: #0a264d;
  background: -ms-linear-gradient(225deg, #0a264d 0%, #071b36 100%);
  background: linear-gradient(225deg, #0a264d 0%, #071b36 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color-blue-1', endColorstr='#071b36', GradientType=1 ); }

.Section--blue-medium-secondary {
  background: #0069d2; }

.Section--blue-medium-secondary .Section-slant-overlay {
  background: #0069d2; }

.Section--gradient-blue-medium-secondary {
  background: #0069d2;
  background: -ms-linear-gradient(135deg, #0069d2 0%, #005cb8 100%);
  background: linear-gradient(135deg, #0069d2 0%, #005cb8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color-medium-blue-2', endColorstr='#005cb8', GradientType=1 ); }

.Section--blue-dark {
  background: #1b2429; }

.Section--blue-dark .Section-slant-overlay {
  background: #1b2429; }

.Section--green-medium {
  background: #1ab99f; }

.Section--green-medium .Section-slant-overlay {
  background: #1ab99f; }

.Section--gradient-green-medium {
  background: #1ab99f;
  background: -ms-linear-gradient(135deg, #1ab99f 0%, #17a48d 100%);
  background: linear-gradient(135deg, #1ab99f 0%, #17a48d 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color-green-1', endColorstr='$color-green-2', GradientType=1 ); }

.Section--grey-light {
  background: #f1f2f4; }

.Section--grey-light .Section-slant-overlay {
  background: #f1f2f4; }

.Section--grey-medium {
  background: #e8e9ed; }

.Section--grey-medium .Section-slant-overlay {
  background: #e8e9ed; }

.Section--grey-dark {
  background: #979b9e; }

.Section--grey-dark .Section-slant-overlay {
  background: #979b9e; }

.Section--align-center {
  text-align: center; }

.Section--align-center .Section-title {
  text-align: center !important; }

.Section--align-center .Section-intro {
  float: none;
  margin: 0 auto 3rem;
  text-align: center; }

.Section--with-slant {
  position: relative; }

.Section--with-slant-right .Section-slant-overlay {
  -moz-transform-origin: left;
  -o-transform-origin: left;
  -ms-transform-origin: left;
  -webkit-transform-origin: left;
  transform-origin: left;
  -ms-transform: skew(0deg, -6deg);
  -webkit-transform: skew(0deg, -6deg);
  transform: skew(0deg, -6deg); }

.Section--with-slant-left .Section-slant-overlay {
  -moz-transform-origin: right;
  -o-transform-origin: right;
  -ms-transform-origin: right;
  -webkit-transform-origin: right;
  transform-origin: right;
  -ms-transform: skew(0deg, 6deg);
  -webkit-transform: skew(0deg, 6deg);
  transform: skew(0deg, 6deg); }

.Section--with-slant .container-fluid {
  position: relative; }

.Section--extra-padding-bottom {
  padding-bottom: 5rem; }

@media (min-width: 48em) {
  .Section--extra-padding-bottom {
    padding-bottom: 10rem; } }

@media (min-width: 62em) {
  .Section--extra-padding-bottom {
    padding-bottom: 15rem; } }

.Section--pull-top {
  margin-top: -5rem; }

@media (min-width: 48em) {
  .Section--pull-top {
    margin-top: -10rem; } }

@media (min-width: 62em) {
  .Section--pull-top {
    margin-top: -15rem; } }

.Section--even-padding {
  padding: 5rem 0; }

.Section--no-bottom-padding {
  padding-bottom: 0; }

.Section--no-padding {
  padding: 0; }

.Section .Section-title {
  margin-bottom: 2.6rem;
  color: #00c5e8;
  text-align: center; }

@media (min-width: 62em) {
  .Section .Section-title {
    text-align: left; } }

.Section .Section-title--blue-medium {
  color: #0a264d; }

.Section h3.Section-title {
  color: #1b2429;
  font-size: 1.56rem;
  letter-spacing: 0.135rem;
  line-height: 1.875rem;
  text-transform: none; }

.Section-action-bar {
  padding-top: 4rem;
  text-align: center; }

.Section-slant-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200px;
  background: #fff; }

@media (min-width: 62em) {
  .Section-slant-overlay {
    height: 300px; } }

.section {
  margin: 0px 0; }

.Section {
  padding: 3.5rem 0; }
  @media (min-width: 375px) {
    .Section {
      padding: 3.5rem 1em; } }
  @media (min-width: 480px) {
    .Section {
      padding: 3.5rem 0 4.5rem; } }
  .Section.padding-none {
    padding: 0; }
  .Section-no-top-padding {
    padding-top: 0 !important; }
  .Section-no-bot-padding {
    padding-bottom: 0 !important; }
  @media (min-width: 480px) {
    .Section-move-up {
      margin-top: -3rem; } }
  @media (min-width: 30em) {
    .Section .Section-title {
      text-align: left; } }
  .Section .Section-title.text-center {
    text-align: center; }
  .Section .Section-title.text-left {
    text-align: left; }
  .Section .Section-title sup {
    font-size: 50%;
    top: -0.8em; }
  .Section .Section-title.-h3 {
    font-family: ubuntulight, sans-serif;
    text-transform: none;
    color: #ffffff;
    font-size: 25px;
    text-align: center; }
  .Section img {
    margin-bottom: 2rem;
    margin-top: 2rem; }
    @media (min-width: 30em) {
      .Section img {
        margin-top: 0; } }
  .Section .image-no-margin img {
    margin: 0;
    padding: 0; }
  .Section-footnote {
    padding: 3rem 0 2.4rem; }
    .Section-footnote p, .Section-footnote .small {
      font-size: 0.875rem;
      line-height: 1.25rem;
      margin-bottom: 0.6rem; }
    .Section-footnote.drop-area p, .Section-footnote.drop-area .small {
      font-size: 1.5rem;
      line-height: 2rem;
      margin-bottom: 2rem; }
  .Section.LiveDemoAccountBar .right .LiveDemoAccountBar--cell-left {
    margin-left: 2rem; }
  .Section.LiveDemoAccountBar .right .LiveDemoAccountBar--cell-right {
    margin-left: 0; }
  @media (max-width: 62em) {
    .Section.LiveDemoAccountBar .right .LiveDemoAccountBar--cell-left {
      margin-left: 0; }
    .Section.LiveDemoAccountBar .right .LiveDemoAccountBar--cell-right {
      margin-left: 2rem; } }
  .Section.HelpSupport {
    padding-bottom: 6.5rem; }
  .Section-intro {
    padding-bottom: 0;
    margin-bottom: -1rem; }
    @media (min-width: 480px) {
      .Section-intro {
        margin-bottom: -4rem; } }
    .Section-intro p {
      font-size: 1.125rem;
      line-height: 2rem; }
    .Carousel-mask .Section-intro {
      padding-top: 0.5rem; }
      @media (min-width: 480px) {
        .Carousel-mask .Section-intro {
          padding-top: 3.5rem; } }
  .Section--with-slant {
    padding-top: 3rem; }
  .Section .container-fluid.--padding-none {
    padding: 0; }
  .Section .sub-info {
    margin-bottom: 50px; }

.Section-title-h3-light, .Section-title-h3-regular {
  font-family: ubuntulight, sans-serif;
  font-size: 1.56rem;
  letter-spacing: 0.135rem;
  line-height: 1.875rem; }

.Section-title-h3-regular {
  font-family: ubunturegular, sans-serif; }

.Section--white-bg {
  background: #fff; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.Breadcrumb {
  padding: 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-transform: uppercase; }

.Breadcrumb ol {
  margin: 0;
  padding: 0 2rem;
  list-style: none; }

.Breadcrumb li {
  display: inline-block; }

.Breadcrumb li + li:before {
  content: "/";
  padding-right: 0.4rem;
  padding-left: 0.4rem; }

.Breadcrumb a {
  color: #58585a;
  text-decoration: none; }

.Breadcrumb a.is-current {
  color: #00c5e8; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.Tabs {
  position: relative; }

.Tabs:before,
.Tabs:after {
  content: " ";
  display: table; }

.Tabs:after {
  clear: both; }

.Tabs-menu {
  position: relative; }

.Tabs-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center; }

.Tabs-menu li {
  margin: 0;
  padding: 0;
  display: inline-block; }

.Tabs-menu li:before {
  display: none; }

.Tabs-menu a {
  display: block;
  padding: 0.3rem 1rem;
  color: #0a264d;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.875rem;
  line-height: 1.25rem; }

.Tabs-menu a.is-open {
  background: #0a264d;
  border-radius: 3px;
  color: #fff; }

.Tabs-menu-panel {
  display: none;
  position: absolute;
  top: 0;
  left: -30px;
  width: 285px;
  height: 60px;
  background: #0a264d;
  -ms-transform: translate(0, 0) skewX(-20deg);
  -webkit-transform: translate(0, 0) skewX(-20deg);
  transform: translate(0, 0) skewX(-20deg); }

@media (min-width: 62em) {
  .Tabs-menu-panel {
    display: block; } }

.Tabs-panel {
  overflow-x: auto; }

@media (min-width: 48em) {
  .Tabs-panel {
    overflow: hidden; } }

.Tabs-panel .row {
  position: relative; }

.Tabs-overlay {
  display: none;
  position: absolute;
  bottom: -600px;
  left: 0;
  width: 100%;
  height: 600px;
  background: #f1f2f4;
  -moz-transform-origin: right;
  -o-transform-origin: right;
  -ms-transform-origin: right;
  -webkit-transform-origin: right;
  transform-origin: right;
  -ms-transform: skew(0deg, 4deg);
  -webkit-transform: skew(0deg, 4deg);
  transform: skew(0deg, 4deg);
  transition: -webkit-transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out; }

@media (min-width: 62em) {
  .Tabs-overlay {
    display: block; } }

html.js .Tabs .Tabs-panel {
  display: none; }

html.js .Tabs .Tabs-panel.is-open {
  display: block; }

html.js .Tabs--with-animation .Carousel-mask > .Tabs-panels > .Tabs-panel {
  display: block;
  float: left; }

html.js .Tabs--with-animation.Tabs--vertical .Tabs-panel {
  float: none; }

.Tabs--lozenge {
  text-align: center; }

.Tabs--lozenge .Tabs-menu {
  margin: 0 1rem 3rem;
  background: #fff;
  border: 1px solid #e8e9ed;
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
  z-index: 1; }

@media (min-width: 62em) {
  .Tabs--lozenge .Tabs-menu {
    display: inline-block;
    margin: 0 0 3rem; } }

@media (min-width: 62em) {
  .Tabs--lozenge .Tabs-menu {
    margin: 0 0 5rem; } }

.Tabs--lozenge .Tabs-menu ul {
  position: relative;
  z-index: 1; }

@media (max-width: 61.99em) {
  .Tabs--lozenge .Tabs-menu li {
    display: block; } }

.Tabs--lozenge .Tabs-menu li a {
  display: inline-block;
  padding: 1rem 2rem;
  width: 100%; }

@media (min-width: 62em) {
  .Tabs--lozenge .Tabs-menu li a {
    width: 255px; } }

.Tabs--lozenge .Tabs-menu li a:hover {
  color: #00c5e8; }

.Tabs--lozenge .Tabs-menu li a.is-open {
  background: #0a264d; }

.Tabs--lozenge .Tabs-menu li a.is-open:hover {
  color: white; }

@media (min-width: 62em) {
  .Tabs--lozenge .Tabs-menu li a.is-open {
    background: none; } }

.Tabs--lozenge .Tabs-panels {
  width: 100%;
  text-align: left; }

.Tabs--long-menu {
  margin-bottom: -5rem; }

.Tabs--long-menu .Tabs-menu {
  clear: both;
  background: #f1f2f4; }

.Tabs--long-menu .Tabs-menu .container-fluid {
  position: relative;
  padding: 0; }

.Tabs--long-menu .Tabs-menu ul {
  display: table;
  position: relative;
  width: 100%;
  z-index: 1; }

.Tabs--long-menu .Tabs-menu li {
  display: table-cell;
  vertical-align: middle;
  padding: 0.5rem 0.5rem 0 0.5rem;
  word-break: break-word; }

.Tabs--long-menu .Tabs-menu a {
  padding: 1rem; }

@media (min-width: 62em) {
  .Tabs--long-menu .Tabs-menu a {
    padding: 2rem 0; } }

.Tabs--long-menu .Tabs-menu a:hover {
  color: #00c5e8; }

.Tabs--long-menu .Tabs-menu a.is-open {
  background: none; }

.Tabs--long-menu .Tabs-menu a.is-open:hover {
  color: white; }

.Tabs--long-menu .Tabs-menu-panel {
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  background: #00c5e8;
  transform: none; }

.Tabs--long-menu .Tabs-menu-panel:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  border-top: 12px solid #e8e9ed;
  border-right: 12px solid transparent;
  border-left: 12px solid transparent;
  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0); }

.Tabs--vertical {
  margin-right: -1.2rem;
  margin-left: -1.2rem;
  margin-bottom: 1rem; }

@media (min-width: 30em) {
  .Tabs--vertical {
    margin-right: -3rem;
    margin-left: -3rem; } }

.Tabs--vertical .Carousel-mask {
  overflow: hidden;
  float: left;
  width: 100%; }

@media (min-width: 62em) {
  .Tabs--vertical .Carousel-mask {
    width: 61.66667%; } }

.Tabs--vertical .Tabs-menu-row {
  padding: 0; }

@media (min-width: 62em) {
  .Tabs--vertical .Tabs-menu-row {
    position: static; } }

.Tabs--vertical .Tabs-menu {
  margin-left: 0;
  width: 100%;
  border-radius: 0;
  overflow: visible; }

@media (max-width: 47.99em) {
  .Tabs--vertical .Tabs-menu {
    border: 0;
    overflow: hidden; } }

@media (min-width: 62em) {
  .Tabs--vertical .Tabs-menu {
    position: absolute;
    top: 50%;
    width: 25%;
    -ms-transform: translate(0, -60%);
    -webkit-transform: translate(0, -60%);
    transform: translate(0, -60%); } }

.Tabs--vertical .Tabs-menu li {
  display: block; }

@media (max-width: 47.99em) {
  .Tabs--vertical .Tabs-menu li {
    float: left;
    padding: 1rem 2rem; } }

.Tabs--vertical .Tabs-menu li a {
  border-radius: 0; }

@media (min-width: 62em) {
  .Tabs--vertical .Tabs-menu li a {
    width: 100%; } }

.Tabs--vertical .Tabs-menu li a:hover {
  color: #00c5e8; }

.Tabs--vertical .Tabs-menu li a.is-open {
  color: #0a264d;
  background: none; }

.Tabs--vertical .Tabs-menu li a.is-open:hover {
  color: #0a264d; }

@media (min-width: 62em) {
  .Tabs--vertical .Tabs-panels {
    width: auto; } }

.Tabs--vertical .Tabs-panels img {
  width: 100%;
  height: auto; }

.Tabs--vertical .Tabs-menu-panel {
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #e8e9ed;
  -ms-transform: none;
  -webkit-transform: none;
  transform: none; }

.Tabs--vertical .Tabs-menu-panel:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  border-top: 12px solid #fff;
  border-right: 12px solid transparent;
  border-left: 12px solid transparent;
  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0); }

@media (min-width: 48em) {
  .Tabs--vertical .Tabs-menu-panel:before {
    top: 50%;
    left: -25px;
    margin-top: -20px;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-right: 20px solid #e8e9ed;
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0); } }

.Tabs--vertical.Tabs--with-animation .Tabs-panel {
  opacity: 0;
  transition: opacity 0.5s 0.5s ease-out; }

.Tabs--vertical.Tabs--with-animation .Tabs-panel.is-open {
  opacity: 1;
  transition: opacity 0.5s 0s ease-out;
  z-index: 1; }

html.lt-ie10 .Tabs .Tabs-overlay {
  display: none; }

@media (min-width: 48em) {
  .Tabs-arrow {
    display: none; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.Video {
  margin-bottom: 3rem; }

.Video video {
  display: block;
  margin: 0;
  width: 100%;
  height: auto; }

.Video-player {
  position: relative; }

.Video-play-button {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 6rem;
  line-height: 1rem;
  transition: color 0.2s ease-out; }

.Video-play-button:hover,
.Video-play-button:focus {
  color: #00c5e8; }

.Video-description {
  padding: 2rem;
  background: #e8e9ed; }

.Video-description-title {
  color: #00c5e8; }

.Video-description p {
  margin-bottom: 0; }

.Video-description p + p {
  margin-top: 1rem; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.AcrossAnyDevice h2.Section-title {
  text-align: center; }

.AcrossAnyDevice--device-cluster {
  width: 100%;
  height: auto; }

.AcrossAnyDevice ul {
  padding: 0;
  text-align: center;
  margin: 0;
  margin-bottom: 4rem; }

.AcrossAnyDevice li {
  display: inline-block;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-align: center;
  text-transform: uppercase;
  width: 60px;
  margin: 0 1rem;
  padding: 0; }

.AcrossAnyDevice li:before {
  display: none; }

.AcrossAnyDevice li a {
  color: #58585a;
  text-decoration: none; }

.AcrossAnyDevice li a:hover {
  color: #00c5e8; }

.AcrossAnyDevice li .Icon {
  display: block;
  margin: 0 auto 1rem;
  font-size: 3.4rem;
  text-align: center; }

.AcrossAnyDevice .Section-action-bar {
  text-align: center;
  margin: 0;
  padding: 0; }

.AcrossAnyDevice .Section-action-bar p {
  margin-bottom: 0; }

.AcrossAnyDevice .Button img {
  margin: 0 auto; }

.AcrossAnyDevice p {
  text-align: center !important; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.AdvancedTradingTools {
  padding-top: 6rem; }

.AdvancedTradingTools h2.Section-title {
  color: #0a264d;
  text-align: center; }

.AdvancedTradingTools .Icon--arrow-left,
.AdvancedTradingTools .Icon--arrow-right {
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -30px;
  overflow: hidden;
  color: #00c5e8;
  font-size: 1.6rem;
  line-height: 50px;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.2s ease-out;
  z-index: 10; }

@media (min-width: 48em) {
  .AdvancedTradingTools .Icon--arrow-left,
  .AdvancedTradingTools .Icon--arrow-right {
    display: none; } }

.AdvancedTradingTools .Icon--arrow-left-copy,
.AdvancedTradingTools .Icon--arrow-right-copy {
  position: absolute;
  margin: -1px;
  padding: 0;
  width: 1px;
  height: 1px;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden; }

.AdvancedTradingTools .Icon--arrow-right {
  left: auto;
  right: 0; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.AppFeatures {
  padding: 0; }

.AppFeatures .Tabs {
  padding-top: 3rem; }

@media (min-width: 62em) {
  .AppFeatures .Tabs {
    padding-top: 5rem; } }

.AppFeatures .Tabs-menu {
  margin-bottom: 2rem;
  text-align: center; }

@media (min-width: 87.5em) {
  .AppFeatures .Tabs-menu {
    margin-bottom: 0; } }

.AppFeatures .Tabs-menu li + li {
  margin-left: 1.5rem; }

.AppFeatures .Tabs-menu a {
  padding: 0;
  width: 66px;
  height: 66px;
  background-color: #e8e9ed;
  border-radius: 1000px;
  overflow: hidden;
  color: #0a264d; }

.AppFeatures .Tabs-menu a:hover {
  background-color: #e8e9ed; }

.AppFeatures .Tabs-menu a.is-open {
  background-color: #0a264d;
  color: #fff; }

.AppFeatures .Tabs-menu a .Icon {
  font-size: 2rem;
  line-height: 66px; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.Article {
  padding-top: 0; }

.Article .row {
  margin: 0; }

.Article .row.Article-figure {
  margin-right: -10px;
  margin-left: -10px; }

.Article > .container-fluid {
  clear: both;
  padding: 2rem;
  background: #fff; }

.Article-title {
  margin: 0;
  padding: 3rem 2rem; }

.ArticleBreadcrumb {
  padding: 2rem 0;
  background-color: #e8e9ed;
  background-image: url("https://assets.cmcmarkets.com/images/grey-bar.jpg");
  background-size: cover; }

.ArticleBreadcrumb a.Backlink {
  text-decoration: none;
  font-size: 0.8125rem; }

.ArticleBreadcrumb a.Backlink .Backlink--copy {
  color: #58585a;
  text-transform: uppercase;
  margin-left: 0.5rem; }

.ArticleBreadcrumb a.Backlink:hover .Backlink--copy {
  text-decoration: underline;
  color: #00c5e8; }

.ArticleMain {
  padding: 3rem 0 0 0;
  /* sidebar */ }

.ArticleMain .ArticleMain--Title h1 {
  color: #0a264d;
  line-height: 3.2rem; }

.ArticleMain .ArticleMain--AuthorShare {
  margin-top: 1rem; }

@media (min-width: 48em) {
  .ArticleMain .ArticleMain--AuthorShare {
    margin-top: 1.2rem; } }

.ArticleMain .ArticleMain--AuthorShare .ArticleMain--Author h3 {
  color: #0a264d;
  text-transform: uppercase;
  font-size: 0.7rem;
  font-weight: bold;
  font-family: 'ubuntubold'; }

.ArticleMain .ArticleMain--AuthorShare .ArticleMain--Author a {
  text-decoration: none; }

.ArticleMain .ArticleMain--AuthorShare .ArticleMain--Author a:hover {
  text-decoration: underline; }

.ArticleMain .ArticleMain--AuthorShare .ArticleMain--Share {
  margin-top: 1.5rem; }

@media (min-width: 48em) {
  .ArticleMain .ArticleMain--AuthorShare .ArticleMain--Share {
    margin-top: 0; } }

.ArticleMain .ArticleMain--AuthorShare .ArticleMain--Share .ShareBlock {
  margin-top: -0.75rem; }

@media (min-width: 48em) {
  .ArticleMain .ArticleMain--AuthorShare .ArticleMain--Share .ShareBlock {
    float: right; } }

@media (min-width: 48em) {
  .ArticleMain .ArticleBody .row {
    /*display: table;*/ }
  .ArticleMain .ArticleBody [class*="col-"] {
    /*float: none;
        display: table-cell;
        vertical-align: top;*/ } }

.ArticleMain .ArticleBody-Hero {
  margin-bottom: 2rem; }

.ArticleMain .ArticleBody-Hero img {
  width: 100%;
  height: auto !important; }

.ArticleMain .ArticleBody-Hero .ArticleBody-HeroCaption {
  font-size: 0.8rem; }

.ArticleMain .ArticleBody-Copy img {
  max-width: 100%;
  height: auto; }

.ArticleMain .ArticleBody-Copy p {
  line-height: 2rem; }

@media (min-width: 48em) {
  .ArticleMain .ArticleBody-Copy p {
    padding-left: 1.5rem; } }

.ArticleMain .ArticleBody-Copy p:first-child {
  color: #0a264d;
  font-size: 1.5rem;
  line-height: 2.5rem; }

@media (min-width: 48em) {
  .ArticleMain .ArticleBody-Copy p:last-child {
    margin-bottom: 0;
    padding-bottom: 0; } }

.ArticleMain .ArticleBody-Copy blockquote {
  font-size: 1.85rem;
  line-height: 3rem;
  background: none;
  color: #00c5e8;
  font-family: 'ubuntulight'; }

@media (min-width: 48em) {
  .ArticleMain .ArticleBody-Copy blockquote {
    padding-left: 1.5rem; } }

.ArticleMain .ArticleBody-Copy blockquote.Author {
  font-size: 0.9rem;
  margin-top: -3.5rem;
  margin-bottom: 1.4rem; }

.ArticleMain .ArticleBody-Copy q,
.ArticleMain .ArticleBody-Copy blockquote {
  quotes: "\201C" "\201D" "\2018" "\2019"; }

.ArticleMain .ArticleBody-Copy q:before,
.ArticleMain .ArticleBody-Copy blockquote:before {
  content: open-quote; }

.ArticleMain .ArticleBody-Copy q:after,
.ArticleMain .ArticleBody-Copy blockquote:after {
  content: close-quote; }

.ArticleMain .ArticleBody-Copy q.Author:before, .ArticleMain .ArticleBody-Copy blockquote.Author:before {
  content: no-open-quote; }

.ArticleMain .ArticleBody-Copy q.Author:after, .ArticleMain .ArticleBody-Copy blockquote.Author:after {
  content: no-close-quote; }

.ArticleMain .ArticleMetaShare img {
  margin-right: 1rem;
  width: 77px;
  height: auto;
  vertical-align: middle; }

@media (min-width: 48em) {
  .ArticleMain .ArticleMetaShare {
    text-align: center; }
  .ArticleMain .ArticleMetaShare img {
    margin-top: 0.4rem;
    margin-right: 0;
    margin-bottom: 0.5rem;
    width: 100%;
    height: auto; } }

.ArticleMain .ArticleMetaShare .ArticleAuthor {
  color: #00c5e8;
  text-transform: uppercase;
  font-size: 0.6rem;
  font-weight: bold;
  font-family: 'ubuntubold';
  line-height: 1rem;
  vertical-align: middle; }

.ArticleMain .ArticleMetaShare .ArticleAuthor a {
  text-decoration: none; }

.ArticleMain .ArticleMetaShare .ArticleAuthor a:hover {
  text-decoration: underline; }

@media (min-width: 48em) {
  .ArticleMain .ArticleMetaShare .ShareBlock {
    /*position: absolute; Removed this line due to the reported bug on https://jira.cmc.local/browse/WF-5680*/
    bottom: -0.8rem; } }

.ArticleMain .ArticleMain--Sidebar {
  margin-top: 2rem; }

@media (min-width: 62em) {
  .ArticleMain .ArticleMain--Sidebar {
    margin-top: 0; } }

.ArticleSidebar, .ArticleSidebar-Crypto {
  display: block;
  position: relative;
  overflow: hidden;
  margin-top: 2rem; }

@media (min-width: 62em) {
  .ArticleSidebar, .ArticleSidebar-Crypto {
    margin-top: 0; } }

.ArticleSidebar ul.row, .ArticleSidebar li, .ArticleSidebar-Crypto ul.row, .ArticleSidebar-Crypto li {
  list-style-type: none;
  margin: 0;
  padding: 0; }

.ArticleSidebar li, .ArticleSidebar-Crypto li {
  margin-bottom: 1.5rem;
  width: 100%;
  display: inline-block; }

@media (min-width: 48em) {
  .ArticleSidebar li {
    width: 49.7%; } }

@media (min-width: 62em) {
  .ArticleSidebar li, .ArticleSidebar-Crypto li {
    width: 100%; } }

.ArticleSidebar .ArticleTrailer-details, .ArticleSidebar-Crypto .ArticleTrailer-details {
  background: white; }

.ArticleRelatedFeed {
  background: #fff;
  margin-top: 2rem;
  margin-bottom: 4rem; }

@media (min-width: 62em) {
  .ArticleRelatedFeed {
    margin-top: 6rem; } }

.ArticleRelatedFeed h2.ArticleRelatedFeed-title {
  margin-bottom: 2rem;
  text-align: left;
  font-size: 1.4rem;
  color: #0a264d; }

.ArticleTrailer, .ArticleTrailer-Crypto {
  display: block;
  position: relative;
  height: 395px;
  overflow: hidden;
  border: 1px solid #e8e9ed; }

.ArticleTrailer:hover {
  text-decoration: none; }

@media (min-width: 62em) {
  .ArticleTrailer:hover img {
    -ms-transform: translate(0, -5%);
    -webkit-transform: translate(0, -5%);
    transform: translate(0, -5%); } }

@media (min-width: 62em) {
  .ArticleTrailer:hover .ArticleTrailer-image-overlay {
    opacity: 0.8; } }

@media (min-width: 62em) {
  .ArticleTrailer:hover p {
    max-height: 15rem;
    opacity: 1; } }

@media (min-width: 87.5em) {
  .ArticleTrailer:hover p {
    max-height: 5rem; } }

.ArticleTrailer img {
  min-width: 100%;
  width: auto;
  min-height: 200px;
  transition: -webkit-transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out; }

@media (min-width: 87.5em) {
  .ArticleTrailer img {
    width: 100%;
    height: auto;
    transition: -webkit-transform 0.4s ease-in-out;
    transition: transform 0.4s ease-in-out; } }

.ArticleTrailer-image-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #0a264d;
  opacity: 0;
  transition: opacity 0.6s ease-in-out; }

@media (min-width: 87.5em) {
  .ArticleTrailer-image-overlay {
    transition: opacity 0.4s ease-in-out; } }

.ArticleTrailer-details {
  position: absolute;
  bottom: 0;
  padding: 25px;
  width: 100%;
  min-height: 50%; }

@media (min-width: 62em) {
  .ArticleTrailer-details {
    padding-bottom: 80px; } }

@media (min-width: 87.5em) {
  .ArticleTrailer-details {
    padding-bottom: 60px; } }

.ArticleTrailer-details p {
  font-size: 0.875rem;
  line-height: 1.25rem;
  margin-bottom: 0;
  max-height: 0;
  overflow: hidden;
  color: #1b2429;
  opacity: 0;
  transition: all 0.6s ease-in-out; }

@media (min-width: 87.5em) {
  .ArticleTrailer-details p {
    transition: all 0.4s ease-in-out; } }

.ArticleTrailer-headline {
  margin-bottom: 2rem;
  color: #fff;
  font-family: "ubuntubold", sans-serif;
  font-size: 2rem;
  line-height: 2.625rem;
  letter-spacing: 0.1rem;
  text-transform: none; }

@media (min-width: 62em) {
  .ArticleTrailer-headline {
    margin-bottom: 1rem; } }

.ArticleTrailer-headline--small, .ArticleTrailer-Crypto-headline--small {
  margin-bottom: 2rem;
  color: #1b2429;
  font-family: "ubuntubold", sans-serif;
  font-size: 1.125rem;
  letter-spacing: 0.04rem;
  line-height: 1.625rem;
  text-transform: none; }

@media (min-width: 62em) {
  .ArticleTrailer-headline--small {
    margin-bottom: 1rem; } }

.ArticleTrailer-metaData {
  position: absolute;
  right: 25px;
  bottom: 25px;
  left: 25px;
  padding-left: 2rem;
  color: #1ab99f;
  font-family: "ubuntubold", sans-serif;
  font-size: 0.687rem;
  letter-spacing: 0.025rem;
  line-height: 1.125rem;
  letter-spacing: 0.025rem;
  text-transform: uppercase; }

.js-AssetsCarousel .ArticleTrailer-metaData {
  padding: 0; }

.ArticleTrailer-metaData-location {
  display: block;
  margin-bottom: 1rem;
  font-family: "ubunturegular", sans-serif;
  text-transform: none; }

.ArticleTrailer-metaData .Icon--dot {
  display: inline-block;
  position: relative;
  top: -2px;
  margin: 0 0.25rem 0 0.5rem;
  width: 4px;
  height: 4px;
  background: #1ab99f;
  border-radius: 1000px; }

.ArticleTrailer-metaData .Icon--article {
  display: inline-block;
  margin-left: -2rem;
  font-size: 1.4rem;
  vertical-align: middle; }

.ArticleTrailer-metaData > div {
  display: inline-block;
  vertical-align: middle; }

.ArticleTrailer-metaData time .Icon--dot {
  margin-right: 0.5rem; }

.ArticleTrailer-metaData-videoMetaData {
  padding: 0;
  top: 25px;
  bottom: auto;
  margin-top: -1.35rem; }

.ArticleTrailer-metaData-videoMetaData .Icon {
  position: relative;
  top: 1.35rem;
  margin: 0 -0.25rem 0 -0.75rem;
  font-size: 3.6rem;
  line-height: 1rem; }

.ArticleTrailer-eventMetaData-eventType {
  display: block;
  margin-bottom: 1rem;
  font-family: "ubuntubold", sans-serif;
  font-size: 0.687rem;
  letter-spacing: 0.025rem;
  line-height: 1.125rem;
  letter-spacing: 0.025rem;
  text-transform: uppercase; }

.ArticleTrailer-eventMetaData-eventType .Icon {
  display: inline-block;
  position: relative;
  top: 0.7rem;
  margin-top: -1rem;
  margin-right: 0.5rem;
  font-size: 2rem; }

.ArticleTrailer-eventMetaData-eventDate {
  display: block;
  margin-bottom: 0.5rem; }

.ArticleTrailer-eventMetaData-eventDate span {
  display: inline-block; }

.ArticleTrailer-eventMetaData-day {
  font-family: "ubuntulight", sans-serif;
  font-size: 6rem;
  letter-spacing: -0.4rem;
  line-height: 1; }

.ArticleTrailer-eventMetaData-month {
  margin-left: 0.5rem;
  padding: 1rem 0;
  width: 3rem;
  background: #0a264d;
  border-radius: 1000px;
  color: #fff;
  font-family: "ubuntubold", sans-serif;
  font-size: 1rem;
  letter-spacing: 0.025rem;
  line-height: 1rem;
  text-align: center;
  text-transform: uppercase;
  -ms-transform: translate(0, -2rem);
  -webkit-transform: translate(0, -2rem);
  transform: translate(0, -2rem);
  transition: background 0.2s ease-out, color 0.2s ease-out; }

.ArticleTrailer-highlight {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.3rem 1rem 0.3rem 1.25rem;
  font-family: "latobold", sans-serif;
  font-size: 0.7rem;
  text-transform: uppercase;
  z-index: 1; }

.ArticleTrailer-highlight-panel {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  -ms-transform: skew(40deg, 0deg);
  -webkit-transform: skew(40deg, 0deg);
  transform: skew(40deg, 0deg);
  z-index: -1; }

.ArticleTrailer-highlight-featured {
  color: #fff; }

.ArticleTrailer-highlight-featured .ArticleTrailer-highlight-panel {
  background: #0069d2; }

.ArticleTrailer-highlight-most-popular {
  color: #fff; }

.ArticleTrailer-highlight-most-popular .ArticleTrailer-highlight-panel {
  background: #1ab99f; }

.ArticleTrailer--text-only {
  text-decoration: none; }

.ArticleTrailer--text-only .ArticleTrailer-details {
  position: static;
  background: none !important; }

.ArticleTrailer--text-only .ArticleTrailer-details p {
  max-height: none;
  opacity: 1; }

.ArticleTrailer--text-only .ArticleTrailer-metaData {
  position: static;
  margin-bottom: 1rem;
  clear: right; }

.ArticleTrailer--text-only .ArticleTrailer-highlight {
  display: block;
  position: relative;
  float: right;
  margin-bottom: 0.5rem; }

.ArticleTrailer--is-double-width {
  overflow: hidden; }

.ArticleTrailer--is-double-width:hover img {
  -ms-transform: scale(1.05);
  -webkit-transform: scale(1.05);
  transform: scale(1.05); }

@media (min-width: 62em) {
  .ArticleTrailer--is-double-width:hover p {
    max-height: 4rem; } }

.ArticleTrailer--is-double-width img {
  width: auto;
  min-height: 100%; }

@media (min-width: 62em) {
  .ArticleTrailer--is-double-width img {
    width: auto;
    height: 100%; } }

.ArticleTrailer--is-double-width .ArticleTrailer-details {
  width: 90%;
  min-height: 0;
  background: none !important; }

.ArticleTrailer--is-double-width .ArticleTrailer-details p {
  color: #fff;
  transition: all 0.7s ease-in-out; }

@media (min-width: 87.5em) {
  .ArticleTrailer--is-double-width .ArticleTrailer-details p {
    transition: all 0.5s ease-in-out; } }

.ArticleTrailer--is-double-width .ArticleTrailer-metaData {
  color: #fff; }

.ArticleTrailer--is-double-width .ArticleTrailer-metaData .Icon--dot {
  background: #fff; }

.ArticleTrailer--is-video {
  overflow: hidden; }

.ArticleTrailer--is-video:hover img {
  -ms-transform: scale(1.075);
  -webkit-transform: scale(1.075);
  transform: scale(1.075); }

.ArticleTrailer--is-video:hover .Video-play-button {
  color: #00c5e8; }

.ArticleTrailer--is-video img {
  min-height: 100%; }

@media (min-width: 62em) {
  .ArticleTrailer--is-video img {
    width: auto;
    height: 100%; } }

.ArticleTrailer--is-video .ArticleTrailer-headline,
.ArticleTrailer--is-video .ArticleTrailer-headline--small {
  color: #fff; }

.ArticleTrailer--is-video .ArticleTrailer-details {
  min-height: 0;
  background: none !important; }

.ArticleTrailer--is-video .ArticleTrailer-details p {
  color: #fff; }

.ArticleTrailer--is-video .ArticleTrailer-metaData {
  padding: 0;
  color: #fff; }

.ArticleTrailer--is-video .ArticleTrailer-metaData .Icon--dot {
  background: #fff; }

.ArticleTrailer--is-video .Video-play-button {
  position: static;
  margin-bottom: 2rem;
  transform: none;
  text-align: center; }

.ArticleTrailer--is-video.ArticleTrailer--is-double-width .Video-play-button {
  margin-left: 10%; }

.ArticleTrailer--is-event {
  padding: 25px;
  background: #1ab99f;
  background: -ms-linear-gradient(225deg, #1ab99f 0%, #17a48d 100%);
  background: linear-gradient(225deg, #1ab99f 0%, #17a48d 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$color-green-1', endColorstr='$color-green-2', GradientType=1);
  color: #fff;
  text-decoration: none; }

.ArticleTrailer--is-event:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #17a48d;
  background: -ms-linear-gradient(225deg, #17a48d 0%, #148d7a 100%);
  background: linear-gradient(225deg, #17a48d 0%, #148d7a 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$color-green-2', endColorstr='#148d7a', GradientType=1);
  opacity: 0;
  transition: opacity 0.2s ease-out; }

.ArticleTrailer--is-event > *:not(.ArticleTrailer-metaData) {
  position: relative; }

.ArticleTrailer--is-event .ArticleTrailer-headline--small {
  margin-bottom: 1.5rem;
  color: #fff; }

.ArticleTrailer--is-event .ArticleTrailer-metaData {
  padding: 0;
  color: #fff; }

.ArticleTrailer--is-event .ArticleTrailer-metaData time {
  display: block; }

.ArticleTrailer--is-event .ArticleTrailer-metaData .Icon--dot {
  background: #fff; }

.ArticleTrailer--is-event:hover:before {
  opacity: 1; }

.ArticleTrailer--is-event:hover .ArticleTrailer-eventMetaData-month {
  background: #fff;
  color: #1b2429; }

.ArticleTrailer--is-event:hover .Button-panel {
  width: 130%; }

.ArticleTrailer--is-event:hover .Button-copy {
  color: #1ab99f; }

.ArticleTrailer--is-event-reversed {
  background: #f1f2f4;
  background: -ms-linear-gradient(225deg, #f1f2f4 0%, #e3e5e9 100%);
  background: linear-gradient(225deg, #f1f2f4 0%, #e3e5e9 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$color-light-grey-2', endColorstr='#e3e5e9', GradientType=1);
  color: #1ab99f; }

.ArticleTrailer--is-event-reversed:before {
  background: #e3e5e9;
  background: -ms-linear-gradient(225deg, #e3e5e9 0%, #d4d7de 100%);
  background: linear-gradient(225deg, #e3e5e9 0%, #d4d7de 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e3e5e9', endColorstr='#d4d7de', GradientType=1); }

.ArticleTrailer--is-event-reversed .ArticleTrailer-headline--small {
  margin-bottom: 1.5rem;
  color: #1ab99f; }

.ArticleTrailer--is-event-reversed .ArticleTrailer-metaData {
  color: #1ab99f; }

.ArticleTrailer--is-event-reversed .ArticleTrailer-metaData .Icon--dot {
  background: #1ab99f; }

.ArticleTrailer--is-event-reversed .Button--white {
  color: #1ab99f; }

.ArticleTrailer--is-webinar {
  background: #0069d2;
  background: -ms-linear-gradient(225deg, #0069d2 0%, #005cb8 100%);
  background: linear-gradient(225deg, #0069d2 0%, #005cb8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$color-medium-blue-2', endColorstr='#005cb8', GradientType=1); }

.ArticleTrailer--is-webinar:before {
  background: #005cb8;
  background: -ms-linear-gradient(225deg, #005cb8 0%, #004f9f 100%);
  background: linear-gradient(225deg, #005cb8 0%, #004f9f 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#005cb8', endColorstr='#004f9f', GradientType=1); }

.ArticleTrailer--is-webinar:hover .Button-copy {
  color: #0069d2; }

.ArticleTrailer--is-webinar-reversed {
  background: #f1f2f4;
  background: -ms-linear-gradient(225deg, #f1f2f4 0%, #e3e5e9 100%);
  background: linear-gradient(225deg, #f1f2f4 0%, #e3e5e9 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$color-light-grey-2', endColorstr='#e3e5e9', GradientType=1);
  color: #0069d2; }

.ArticleTrailer--is-webinar-reversed:before {
  background: #e3e5e9;
  background: -ms-linear-gradient(225deg, #e3e5e9 0%, #d4d7de 100%);
  background: linear-gradient(225deg, #e3e5e9 0%, #d4d7de 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e3e5e9', endColorstr='#d4d7de', GradientType=1); }

.ArticleTrailer--is-webinar-reversed .ArticleTrailer-headline--small {
  margin-bottom: 1.5rem;
  color: #0069d2; }

.ArticleTrailer--is-webinar-reversed .ArticleTrailer-metaData {
  color: #0069d2; }

.ArticleTrailer--is-webinar-reversed .ArticleTrailer-metaData .Icon--dot {
  background: #0069d2; }

.ArticleTrailer--is-webinar-reversed .Button--white {
  color: #0069d2; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.AwardWinningCharting h2.Section-title {
  color: #0a264d; }

.AwardWinningCharting h3.Section-title {
  color: #00c5e8; }

@media (min-width: 62em) {
  .AwardWinningCharting h3.Section-title {
    text-align: left !important; } }

.AwardWinningCharting p {
  text-align: center; }

@media (min-width: 62em) {
  .AwardWinningCharting p {
    text-align: left; } }

.AwardWinningCharting .Tabs-menu-panel {
  margin-left: 10px;
  -ms-transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0); }

.AwardWinningCharting .Icon--arrow-left,
.AwardWinningCharting .Icon--arrow-right {
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -40px;
  overflow: hidden;
  color: #fff;
  font-size: 1.6rem;
  line-height: 50px;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.2s ease-out;
  z-index: 10; }

.AwardWinningCharting .Icon--arrow-left:hover,
.AwardWinningCharting .Icon--arrow-right:hover {
  color: #fff !important; }

.AwardWinningCharting .Icon--arrow-left-copy,
.AwardWinningCharting .Icon--arrow-right-copy {
  position: absolute;
  margin: -1px;
  padding: 0;
  width: 1px;
  height: 1px;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden; }

.AwardWinningCharting .Icon--arrow-right {
  left: auto;
  right: 0; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.ContentFilter {
  padding-bottom: 0; }

.ContentFilter .Section-title {
  color: #0a264d;
  font-size: 1.56rem;
  letter-spacing: 0.135rem;
  line-height: 1.875rem;
  text-align: center; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.Dropdown {
  position: relative;
  float: left;
  margin-bottom: 1rem;
  width: 100%;
  background: none;
  border: 2px solid #fff;
  border-radius: 3px;
  font-family: "ubunturegular", sans-serif;
  font-size: 0.9rem;
  transition: background 0.2s ease-out; }

.Dropdown.is-active:not(.is-open) {
  border-color: #979b9e; }

@media (min-width: 48em) {
  .Dropdown {
    width: 47.5%; }
  .Dropdown:nth-child(2n) {
    margin-left: 5%; } }

@media (min-width: 62em) {
  .Dropdown {
    margin-left: 2.5%;
    width: 31.66666%; }
  .Dropdown:nth-child(2n) {
    margin-left: 2.5%; }
  .Dropdown:first-child,
  .Dropdown:nth-child(3n + 4) {
    margin-left: 0; } }

@media (min-width: 87.5em) {
  .Dropdown {
    width: 165px; }
  .Dropdown:nth-child(2n),
  .Dropdown:nth-child(3n + 4) {
    margin-left: 0; }
  .Dropdown + .Dropdown {
    margin-left: 20px; } }

.Dropdown.is-open {
  background: #fff;
  border-top-color: #e8e9ed;
  border-right-color: #e8e9ed;
  border-left-color: #e8e9ed;
  border-radius: 3px 3px 0 0; }

.Dropdown.is-open .Dropdown-trigger .Icon {
  -ms-transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg); }

.Dropdown.is-open ul {
  background: #fff;
  border: 2px solid #e8e9ed;
  border-width: 0 2px 2px;
  border-radius: 0 0 3px 3px; }

.Dropdown a {
  display: block;
  padding: 0.35rem 1rem;
  text-decoration: none; }

.Dropdown a.Dropdown-trigger {
  color: #0a264d; }

.Dropdown ul {
  position: absolute;
  left: -2px;
  right: -2px;
  margin: 0;
  padding: 0;
  background: none;
  border-radius: 3px;
  z-index: 40;
  transition: background 0.2s ease-out, max-height 0.2s ease-out;
  overflow: hidden; }

.Dropdown li {
  margin: 0;
  padding: 0; }

.Dropdown li:before {
  display: none; }

.Dropdown li a {
  margin: 0 2px;
  color: #979b9e; }

.Dropdown li a:hover,
.Dropdown li a.is-active {
  color: #1ab99f; }

.Dropdown li a.is-active {
  background: #f1f2f4; }

.Dropdown li a.is-active .Icon {
  visibility: visible; }

.Dropdown li a .Icon {
  visibility: hidden; }

.Dropdown .Icon {
  line-height: 1.4rem;
  float: right;
  transition: -webkit-transform 0.2s ease-out;
  transition: transform 0.2s ease-out; }

.Dropdown--singleDropdown {
  float: none; }

.Section--white .Dropdown,
.Section--white .Dropdown ul {
  border-color: #f1f2f4; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.EducationLevel h3.Section-title {
  color: #0a264d;
  text-align: center;
  font-size: 1.6rem;
  font-family: 'ubuntulight';
  margin-bottom: 1.5rem; }

.EducationLevel p {
  font-family: 'ubuntulight';
  color: #0a264d;
  text-align: center; }

.EducationLevel p:last-child {
  margin-bottom: 0; }

.EducationLevel .Button {
  background: white;
  color: #0a264d; }

.EducationLevel .Button:hover, .EducationLevel .Button:focus {
  color: white; }

.EducationLevel .row {
  background: #f1f2f4;
  border-bottom: 4px solid #0a264d; }

@media (min-width: 62em) {
  .EducationLevel .middle-col {
    border-left: 2px solid white;
    border-right: 2px solid white; } }

.EducationLevel .bottom-cell {
  text-align: center;
  margin-top: 1.5rem; }

.EducationLevel .col-xs-12 {
  padding: 4rem 3rem !important; }

@media (max-width: 61.99em) {
  .EducationLevel .col-xs-12 {
    border-bottom: 2px solid white; }
  .EducationLevel .col-xs-12:last-child {
    border-bottom: 0; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.EducationVideosArticles .container-fluid {
  overflow: hidden; }

.EducationVideosArticles h3.Section-title {
  color: #0a264d;
  font-size: 1.6rem;
  font-family: 'ubuntulight';
  margin-bottom: 1.5rem;
  text-align: center; }

@media (min-width: 62em) {
  .EducationVideosArticles h3.Section-title {
    text-align: left; } }

.EducationVideosArticles p {
  font-family: 'ubuntulight';
  color: #0a264d;
  text-align: center; }

.EducationVideosArticles p:last-child {
  margin-bottom: 0; }

@media (min-width: 62em) {
  .EducationVideosArticles p {
    text-align: left; } }

.EducationVideosArticles .Icon {
  color: #00c5e8;
  font-size: 5.5rem;
  display: block; }

.EducationVideosArticles .col-lg-4 {
  padding: 2rem !important; }

@media (max-width: 61.99em) {
  .EducationVideosArticles .col-lg-4:first-child {
    border-bottom: 2px solid #e8e9ed; } }

.EducationVideosArticles .row {
  border: 2px solid #e8e9ed;
  overflow: hidden;
  position: relative; }

@media (min-width: 62em) {
  .EducationVideosArticles .row {
    white-space: nowrap; }
  .EducationVideosArticles .row [class*="col-"] {
    white-space: normal;
    display: inline-block;
    vertical-align: middle;
    float: none; } }

@media (min-width: 62em) {
  .EducationVideosArticles .row:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background: #e8e9ed;
    top: 0;
    left: 0;
    -ms-transform: rotate(-80deg);
    -webkit-transform: rotate(-80deg);
    transform: rotate(-80deg); } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.Filter-label {
  margin-bottom: 0.5rem;
  font-family: "latoregular", sans-serif;
  font-size: 0.8rem;
  text-align: left;
  text-transform: none; }

@media (min-width: 48em) {
  .Filter-label {
    margin-bottom: 0; } }

@media (min-width: 87.5em) {
  .Filter-label {
    line-height: 42px; } }

.Filter-label .Icon {
  position: relative;
  top: 5px;
  transition: -webkit-transform 0.5s ease-out;
  transition: transform 0.5s ease-out; }

@media (min-width: 48em) {
  .Filter-label .Icon {
    display: none; } }

.Filter-label.is-open .Icon {
  -ms-transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg); }

.Filter-selected-tags {
  float: right;
  font-size: 0.8rem; }

@media (min-width: 48em) {
  .Filter-selected-tags {
    text-align: right; } }

@media (min-width: 87.5em) {
  .Filter-selected-tags {
    min-height: 42px; } }

.Filter-selected-tags a {
  display: inline-block;
  margin-right: 0.25rem;
  margin-bottom: 0.5rem;
  padding: 0.25rem 1rem;
  background: #fff;
  border-radius: 3px;
  color: #0a264d;
  text-decoration: none; }

@media (min-width: 48em) {
  .Filter-selected-tags a {
    margin-right: 0; } }

.Filter-selected-tags a .Icon {
  margin-left: 1.6rem;
  font-size: 0.6rem;
  line-height: 1.6rem; }

.Filter-selected-tags a + a {
  margin-left: 0.25rem; }

@media (min-width: 48em) {
  .Filter-selected-tags a + a {
    margin-right: 0;
    margin-left: 0.5rem; } }

.Filter-options {
  min-height: 0;
  transition: max-height 0.5s ease-out; }

.Filter .row + .row {
  margin-top: 0.5rem; }

.Filter .Icon {
  float: right;
  transition: -webkit-transform 0.2s ease-out;
  transition: transform 0.2s ease-out; }

.Filter-search {
  z-index: 1; }

@media (min-width: 87.5em) {
  .Filter-search {
    padding: 0; } }

.Filter .SearchBar-input-group {
  margin: 0;
  padding: 0 1rem;
  width: auto;
  background: #fff;
  border-radius: 3px; }

.Filter .SearchBar-input {
  padding-right: 2rem;
  height: 40px;
  border: 0;
  color: #0a264d;
  font-family: "latoregular", sans-serif;
  font-size: 1rem;
  line-height: 40px; }

.Filter .SearchBar-input-label {
  top: -3px;
  color: #979b9e;
  font-family: "latoregular", sans-serif;
  font-size: 1rem; }

@media (min-width: 62em) {
  .Filter .SearchBar-input-label {
    top: -8px; } }

.Filter .SearchBar-button {
  top: 12px;
  right: 1rem;
  color: #0a264d;
  font-size: 1rem; }

.Filter-loading-overlay:before {
  content: "";
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #fff url("https://assets.cmcmarkets.com/images/ajax-loader.gif") center center no-repeat;
  background: rgba(255, 255, 255, 0.9) url("https://assets.cmcmarkets.com/images/ajax-loader.gif") center center no-repeat;
  opacity: 0;
  z-index: 10;
  transition: all 0.2s ease-out; }

.Filter-loading-overlay--visible:before {
  display: block;
  opacity: 1; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.Footer {
  padding: 5rem 0 2rem;
  background: #1b2429;
  color: #e8e9ed;
  font-size: 0.875rem;
  line-height: 1.25rem; }

.Footer a {
  text-decoration: none; }

.Footer .container-fluid:before,
.Footer .container-fluid:after {
  content: " ";
  display: table; }

.Footer .container-fluid:after {
  clear: both; }

.Footer dl {
  margin: 0; }

.Footer dt {
  padding-bottom: 0.75rem;
  font-family: "latobold", sans-serif;
  text-transform: uppercase; }

.Footer dt + dd {
  padding-bottom: 0.75rem; }

.Footer dt a {
  color: white; }

.Footer dt a:hover {
  color: #00c5e8;
  -ms-transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0); }

.Footer dd {
  margin: 0; }

@media (max-width: 61.99em) {
  .Footer dd {
    display: none; } }

.Footer dd + dd {
  padding-bottom: 0.75rem; }

.Footer li {
  margin: 0;
  padding: 0; }

.Footer li:before {
  display: none; }

.Footer-logo {
  display: block; }

@media (min-width: 48em) and (max-width: 61.99em) {
  .Footer-company-info {
    margin-bottom: 2rem; } }

.Footer-company-info ul {
  margin: 0;
  padding: 0;
  list-style: none; }

.Footer-company-info a {
  color: #e8e9ed;
  text-transform: uppercase; }

.Footer-company-info nav {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid #3f4244; }

@media (max-width: 61.99em) {
  .Footer-company-info nav {
    display: none; } }

.Footer-company-info nav li + li {
  padding-top: 0.75rem; }

.Footer-company-info nav a {
  display: inline-block;
  transition: -webkit-transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
  font-family: "latobold", sans-serif; }

.Footer-company-info nav a:hover {
  -ms-transform: translate(3px, 0);
  -webkit-transform: translate(3px, 0);
  transform: translate(3px, 0);
  color: #00c5e8; }

.Footer-company-info-contact {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid #3f4244; }

@media (min-width: 48em) {
  .Footer-company-info-contact {
    display: none; } }

.Footer-company-info-contact .Icon {
  display: inline-block;
  margin-right: 0.5rem;
  color: #00c5e8;
  font-size: 1rem; }

@media (max-width: 61.99em) {
  .Footer-company-info-contact p {
    margin-bottom: 0.75rem; } }

.Footer-company-info address {
  color: #979b9e;
  font-style: normal; }

@media (min-width: 48em) {
  .Footer-company-info address {
    display: none; } }

@media (min-width: 62em) {
  .Footer-company-info address {
    display: block;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #3f4244; } }

.Footer-company-info address b {
  display: block;
  margin-bottom: 0.75rem !important;
  text-transform: uppercase; }

@media (min-width: 62em) {
  .Footer-company-info address b {
    margin-bottom: 1rem; } }

@media (max-width: 47.99em) {
  .Footer-sitemap {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #3f4244; } }

@media (max-width: 61.99em) {
  .Footer-sitemap div {
    padding: 0; } }

@media (min-width: 48em) and (max-width: 61.99em) {
  .Footer-sitemap dt {
    padding: 0 6px; } }

.Footer-sitemap a {
  display: inline-block;
  color: #979b9e;
  transition: all 0.2s ease-out; }

.Footer-sitemap a:hover {
  color: #fff;
  -ms-transform: translate(3px, 0);
  -webkit-transform: translate(3px, 0);
  transform: translate(3px, 0); }

.Footer-contact {
  margin: 2rem auto;
  padding: 2rem 0 3rem;
  background: url("https://assets.cmcmarkets.com/images/footer-contact-separator.png") center center no-repeat;
  background-size: contain;
  border-top: 1px solid #3f4244;
  border-bottom: 1px solid #3f4244;
  color: #00afcf;
  text-align: center; }

@media (max-width: 61.99em) {
  .Footer-contact {
    background: none; } }

.Footer-contact-call .Icon,
.Footer-contact-chat .Icon {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 1.4rem; }

@media (max-width: 47.99em) {
  .Footer-contact-call,
  .Footer-contact-chat {
    display: none; } }

.Footer-contact-community {
  padding-top: 0.75rem; }

.Footer-contact-title {
  text-transform: none; }

.Footer-contact p {
  font-size: 1.56rem;
  letter-spacing: 0.135rem;
  line-height: 1.875rem; }

.Footer-legal-disclaimer {
  margin-bottom: 2rem;
  border-bottom: 1px solid #3f4244; }

.Footer-legals {
  float: left;
  position: relative;
  min-height: 1px; }

@media (max-width: 62.5em) {
  .Footer-legals {
    width: 100%;
    margin-bottom: 1rem; } }

.Footer-legals ul {
  margin: 0;
  padding: 0;
  list-style: none; }

.Footer-legals li {
  float: left;
  padding-right: 0.8rem;
  padding-left: 0;
  margin-right: 0.8rem;
  line-height: 1;
  border-right: 1px solid #979b9e;
  /* + li {
              padding-right: 0.8rem;
              border-right: 1px solid $grey-dark;
          } */ }

@media (max-width: 61.99em) {
  .Footer-legals li {
    margin-bottom: 0.5rem; } }

.Footer-legals li:last-child {
  border-right: 0; }

.Footer-legals a {
  color: #e8e9ed; }

.Footer-legals a:hover, .Footer-legals a:focus {
  color: #00c5e8; }

.Footer-copyright {
  margin: 0;
  color: #979b9e;
  text-align: center;
  position: relative;
  min-height: 1px;
  padding-left: 6px;
  padding-right: 6px; }

@media (max-width: 62.5em) {
  .Footer-copyright {
    width: 100%;
    clear: both; } }

@media (min-width: 62.5625em) {
  .Footer-copyright {
    float: right;
    text-align: right; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.FollowBlock a {
  text-decoration: none; }

.FollowBlock-title {
  display: none;
  position: relative;
  margin-right: 0.7rem;
  margin-bottom: 0.5rem;
  vertical-align: middle; }

@media (min-width: 48em) {
  .FollowBlock-title {
    display: block;
    top: 1.25rem;
    margin-bottom: 1.5rem;
    line-height: 2.5rem; }
  .FollowBlock-title:after {
    display: inline;
    content: ":"; } }

@media (min-width: 87.5em) {
  .FollowBlock-title {
    display: inline-block;
    margin-bottom: 0; } }

.FollowBlock-service {
  display: inline-block;
  margin-right: 0.5rem;
  vertical-align: middle; }

.FollowBlock-service--no-numbers {
  padding-top: 2.25rem; }

.FollowBlock-icon {
  display: block;
  height: 2.5rem;
  line-height: 2.5rem;
  vertical-align: middle;
  text-align: center;
  width: 2.5rem;
  border-radius: 50%;
  border: 2px solid #00c5e8;
  font-size: 2rem;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  cursor: pointer; }

.FollowBlock-icon:before {
  position: relative;
  top: -2px; }

.FollowBlock-icon:hover {
  background-color: #00c5e8;
  color: #fff; }

.FollowBlock-numbers {
  position: relative;
  display: block;
  height: 1.75rem;
  margin-bottom: 0.5rem;
  background-color: #e8e9ed;
  text-align: center;
  font-size: 0.687rem;
  letter-spacing: 0.025rem;
  line-height: 1.125rem;
  line-height: 1.75rem;
  vertical-align: middle; }

.FollowBlock-numbers::after {
  content: "";
  position: absolute;
  left: 0.75rem;
  bottom: -0.5rem;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.5rem 0.5rem 0 0.5rem;
  border-color: #e8e9ed transparent transparent transparent; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.Glossary {
  padding-bottom: 5rem; }

.Glossary h2.Section-title {
  color: #0a264d;
  margin-bottom: 1rem; }

.Glossary p {
  text-align: center;
  color: #0a264d; }

.Glossary ul.Glossary-links {
  margin: 0;
  padding: 0;
  margin-top: 2rem; }

.Glossary-item {
  font-family: 'ubuntulight';
  font-size: 1.5rem;
  background: white;
  text-align: center;
  border: 4px solid #f1f2f4;
  position: relative;
  transition: background 0.3s ease-out !important;
  margin: 0;
  margin-left: -4px;
  display: inline-block;
  padding: 2rem 1rem;
  width: 33.333%; }

.Glossary-item:before {
  content: '';
  display: none; }

.Glossary-item:hover {
  background: #00c5e8; }

.Glossary-item a {
  color: #1b2429;
  text-decoration: none; }

.Glossary-item a:hover {
  color: white; }

.Glossary-item a:after {
  content: '';
  position: absolute;
  top: -5px;
  bottom: -5px;
  left: -5px;
  right: -5px; }

@media (min-width: 30em) {
  .Glossary-item {
    width: 25%; } }

@media (min-width: 48em) {
  .Glossary-item {
    width: 16.6666%; } }

@media (min-width: 62em) {
  .Glossary-item {
    width: 8.3333%; } }

@media (min-width: 87.5em) {
  .Glossary-item {
    width: 7.6923%; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.HelpSupport h3.Section-title {
  text-align: center;
  color: #00c5e8; }

.HelpSupport .row {
  border-bottom: 4px solid rgba(0, 0, 0, 0.01); }

.HelpSupport .col-xs-12 {
  background: white;
  border: 2px solid #f1f2f4;
  text-align: center;
  height: auto;
  padding: 2rem; }

@media (min-width: 48em) {
  .HelpSupport .col-xs-12 {
    height: 363px; } }

@media (min-width: 62em) {
  .HelpSupport .col-xs-12 {
    height: 324px;
    border: 1px solid #f1f2f4; } }

.HelpSupport .HelpSupport--top-cell {
  height: 150px;
  position: relative; }

.HelpSupport .HelpSupport--bottom-cell {
  padding: 0 1.5rem; }

.HelpSupport .HelpSupport--button {
  text-decoration: none;
  color: #0a264d;
  transition: color 0.2s ease-out;
  top: 50%;
  left: 50%;
  position: absolute;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }

.HelpSupport .HelpSupport--button .HelpSupport--button-icon {
  font-size: 3rem;
  padding-bottom: 1rem; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.IconOverText {
  text-align: center; }

@media (min-width: 48em) {
  .IconOverText {
    padding: 0 60px; } }

.IconOverText + .IconOverText {
  margin-top: 2rem; }

@media (min-width: 62em) {
  .IconOverText + .IconOverText {
    margin-top: 0; } }

.IconOverText .IconOverText-icon {
  margin: 0 auto 2rem;
  width: 190px;
  height: 190px;
  background-color: #ddd;
  border-radius: 50%; }

.IconOverText .IconOverText-icon img {
  display: block;
  position: relative;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }

.IconOverText .Section-title {
  margin-bottom: 2rem;
  font-size: 1.56rem;
  letter-spacing: 0.135rem;
  line-height: 1.875rem;
  text-align: center; }

.IconOverText .Button {
  margin-top: 1rem; }

.IconOverText--group {
  padding-top: 3rem;
  padding-bottom: 2rem;
  background-color: #e8e9ed; }

@media (min-width: 48em) {
  .IconOverText--group {
    padding-top: 6rem; } }

@media (min-width: 62em) {
  .IconOverText--group {
    padding-bottom: 3rem; } }

@media (min-width: 28.75em) and (max-width: 61.99em) {
  .IconOverText {
    float: none;
    margin: 0 auto;
    max-width: 65%; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.ImageAndCopy .row {
  position: relative; }

.ImageAndCopy-image img {
  display: block;
  margin: 0 auto;
  max-width: 100%; }

@media (min-width: 87.5em) {
  .ImageAndCopy-image--pull-left {
    -ms-transform: translate(-10%, 0);
    -webkit-transform: translate(-10%, 0);
    transform: translate(-10%, 0); } }

@media (min-width: 87.5em) {
  .ImageAndCopy-image--pull-right {
    -ms-transform: translate(10%, 0);
    -webkit-transform: translate(10%, 0);
    transform: translate(10%, 0); } }

.ImageAndCopy-image + .ImageAndCopy-content {
  left: auto;
  right: 0; }

.ImageAndCopy-content {
  position: relative;
  padding: 2rem; }

.ImageAndCopy-content .ImageAndCopy-button-group {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 48px; }

@media (min-width: 48em) and (max-width: 61.99em) {
  .ImageAndCopy-content .ImageAndCopy-button-group {
    text-align: center; } }

.ImageAndCopy-content.ImageAndCopy-content--has-button-group {
  padding-bottom: 158px; }

@media (min-width: 48em) {
  .ImageAndCopy-content.ImageAndCopy-content--has-button-group {
    padding-bottom: 96px; } }

@media (min-width: 87.5em) {
  .ImageAndCopy-content {
    padding-top: 2rem; } }

.ImageAndCopy-content p, .ImageAndCopy-content ul {
  margin-bottom: 3rem;
  font-size: 1.125rem;
  line-height: 1.875rem; }

@media (min-width: 87.5em) {
  .ImageAndCopy-content--centered-text {
    position: absolute;
    top: 50%;
    left: 0;
    padding-top: 0;
    -ms-transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%); } }

@media (min-width: 62em) {
  .ImageAndCopy-content + .ImageAndCopy-image {
    float: right;
    text-align: right; } }

.ImageAndCopy.Support-BetterTrader {
  padding-top: 4rem;
  padding-bottom: 4rem;
  text-align: center; }

@media (min-width: 62em) {
  .ImageAndCopy.Support-BetterTrader {
    padding-top: 8rem;
    padding-bottom: 8rem;
    text-align: left; } }

.ImageAndCopy--fullbleed .row {
  position: relative;
  overflow: hidden; }

.ImageAndCopy--fullbleed .ImageAndCopy-image {
  padding: 0; }

@media (min-width: 62em) and (max-width: 87.49em) {
  .ImageAndCopy--fullbleed .ImageAndCopy-image {
    position: static; } }

.ImageAndCopy--fullbleed .ImageAndCopy-image img {
  width: 100%;
  height: auto; }

@media (min-width: 62em) and (max-width: 87.49em) {
  .ImageAndCopy--fullbleed .ImageAndCopy-image img {
    position: absolute;
    top: 0;
    left: 33.33333%;
    width: 66.66666%;
    min-height: 100%; } }

@media (min-width: 48em) {
  .ImageAndCopy--fullbleed .ImageAndCopy-content {
    padding: 0 2rem; } }

@media (min-width: 87.5em) {
  .ImageAndCopy--fullbleed .ImageAndCopy-content {
    padding: 0 4rem; } }

.ImageAndCopy--grey-light h2.Section-title {
  color: #0a264d; }

.ImageAndCopy--grey-light .row {
  background: #f1f2f4; }

.ImageAndCopy--grey-light .ImageAndCopy-content {
  padding-top: 2rem; }

.ImageAndCopy--grey-medium .row {
  background: #e8e9ed; }

.ImageAndCopy--grey-medium .ImageAndCopy-content {
  padding-top: 2rem; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.LinkBlockList {
  padding: 0;
  text-align: left; }

.LinkBlockList-item {
  width: 100%;
  padding: 0;
  margin-bottom: 0.5rem; }

.LinkBlockList-item::before {
  top: 2.35rem;
  left: 2rem;
  transition: left 0.2s ease-out; }

.lt-ie10 .LinkBlockList-item::before {
  top: 45px; }

.LinkBlockList-item:hover:before {
  left: 2.5rem; }

.LinkBlockList-link {
  display: block;
  width: 100%;
  height: 100%;
  padding: 2rem;
  padding-left: 5rem;
  color: #1b2429;
  font-size: 1.2rem;
  line-height: 1.4;
  font-weight: 300;
  font-family: "latoregular", sans-serif;
  text-decoration: none;
  background-color: #f1f2f4; }

.LinkBlockList-link:hover {
  color: #00c5e8; }

@media (min-width: 30em) {
  .LinkBlockList-item {
    float: left;
    width: 50%; }
  .LinkBlockList-item:nth-child(2n) {
    padding-left: 0.25rem; }
  .LinkBlockList-item:nth-child(2n + 1) {
    padding-right: 0.25rem; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.LiveInfo .container-fluid {
  padding-bottom: 2rem; }

@media (min-width: 48em) {
  .LiveInfo .container-fluid {
    padding-top: 0;
    padding-bottom: 4rem;
    background: url("https://assets.cmcmarkets.com/images/liveinfo_background.png") center top no-repeat;
    background-size: contain; } }

@media (min-width: 62em) {
  .LiveInfo .container-fluid {
    padding-top: 6rem;
    padding-bottom: 6rem;
    background-position: center 2rem; } }

@media (min-width: 48em) {
  .LiveInfo .Section-title {
    margin-top: 3rem; } }

.LiveInfo p {
  margin-bottom: 3.4rem; }

.LiveInfo .Tabs-menu ul {
  margin-bottom: 0.5rem; }

@media (min-width: 30em) {
  .LiveInfo .Tabs-menu ul {
    margin-bottom: -0.5rem;
    text-align: center; }
  .LiveInfo .Tabs-menu ul:after {
    content: "";
    display: inline-block;
    width: 100%; } }

@media (min-width: 87.5em) {
  .LiveInfo .Tabs-menu ul {
    text-align: justify; } }

@media (max-width: 29.99em) {
  .LiveInfo .Tabs-menu li {
    margin-bottom: 0.5rem; } }

.LiveInfo table {
  margin-bottom: 0.5rem;
  width: 100%;
  background: #fff;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #e8e9ed;
  border-radius: 3px;
  color: #0a264d;
  text-align: center; }

.LiveInfo table thead {
  border-bottom: 1px solid #e8e9ed; }

.LiveInfo table tr {
  background: none; }

.LiveInfo table tr:nth-child(2n) {
  background: none; }

.LiveInfo table th {
  padding: 1rem;
  background: none;
  color: #0a264d;
  font-family: "latobold", sans-serif;
  font-size: 1.125rem;
  line-height: 1.875rem; }

.LiveInfo table th .Icon {
  display: inline-block;
  position: relative;
  top: 0.4rem;
  margin-right: 0.5rem;
  font-size: 1.6rem; }

.LiveInfo table td {
  padding: 1rem;
  width: 25%;
  border: 0; }

.LiveInfo table td.LiveInfo-title {
  font-family: "latobold", sans-serif;
  text-align: left;
  text-transform: uppercase; }

.LiveInfo table td.LiveInfo-spread {
  font-family: "ubuntulight", sans-serif;
  font-size: 1.6rem;
  line-height: 1.6rem; }

@media (min-width: 30em) {
  .LiveInfo table td.LiveInfo-spread {
    font-size: 2.4rem;
    line-height: 2.4rem; } }

.LiveInfo table td.LiveInfo-bid,
.LiveInfo table td.LiveInfo-ask {
  font-family: "ubunturegular", sans-serif;
  font-size: 1rem;
  line-height: 1.6rem; }

@media (min-width: 30em) {
  .LiveInfo table td.LiveInfo-bid,
  .LiveInfo table td.LiveInfo-ask {
    font-size: 1.6rem;
    line-height: 2.4rem; } }

.LiveInfo table td.LiveInfo-bid .Icon,
.LiveInfo table td.LiveInfo-ask .Icon {
  display: none; }

.LiveInfo table td.LiveInfo-up {
  color: #1ab99f; }

.LiveInfo table td.LiveInfo-down {
  color: #e71c3a; }

@media (max-width: 47.99em) {
  .LiveInfo table thead th:first-child {
    display: none; }
  .LiveInfo table tbody tr:after {
    content: attr(data-label);
    position: absolute;
    left: 1rem;
    padding-top: 1rem;
    font-family: "latobold", sans-serif; }
  .LiveInfo table tbody tr + tr {
    border-top: 1px solid #e8e9ed; }
  .LiveInfo table tbody td {
    padding-top: 3rem;
    width: 33%; }
  .LiveInfo table tbody td.LiveInfo-title {
    display: none; } }

.LiveInfo p.LiveInfo-disclaimer {
  margin-bottom: 0;
  color: #0a264d;
  text-align: right; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.LiveDemoAccountBar {
  padding: 0;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  color: white; }

@media (max-width: 61.99em) {
  .LiveDemoAccountBar .container-fluid {
    padding: 0 !important; } }

@media (min-width: 62em) {
  .LiveDemoAccountBar {
    background-image: url("https://assets.cmcmarkets.com/images/cta-background.jpg"); } }

.LiveDemoAccountBar .col-sm-12 {
  margin: 0;
  padding: 0; }

.LiveDemoAccountBar h3.Section-title {
  color: white;
  margin-bottom: 0.5rem;
  text-align: left; }

@media (max-width: 47.99em) {
  .LiveDemoAccountBar h3.Section-title {
    text-align: center;
    margin-bottom: 1rem; } }

.LiveDemoAccountBar p {
  margin-bottom: 0; }

@media (max-width: 47.99em) {
  .LiveDemoAccountBar p {
    text-align: center; } }

@media (min-width: 62em) {
  .LiveDemoAccountBar .LiveDemoAccountBar--container {
    padding: 2rem 0; }
    .LiveDemoAccountBar .LiveDemoAccountBar--container > div > .row {
      display: flex;
      align-items: center; } }

.LiveDemoAccountBar .LiveDemoAccountBar--content {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin: 0;
  /* Apply flex to center the demo account buttons */ }
  @media (min-width: 768px) {
    .LiveDemoAccountBar .LiveDemoAccountBar--content {
      display: flex;
      align-items: center; } }

@media (min-width: 62em) {
  .LiveDemoAccountBar .LiveDemoAccountBar--content {
    min-height: 0;
    background-image: none; } }

.LiveDemoAccountBar .LiveDemoAccountBar--content .LiveDemoAccountBar--cell-left {
  width: 100%;
  float: left;
  position: relative; }

@media (min-width: 48em) {
  .LiveDemoAccountBar .LiveDemoAccountBar--content .LiveDemoAccountBar--cell-left {
    width: calc(100% - 260px - 2rem); } }

.LiveDemoAccountBar .LiveDemoAccountBar--content .LiveDemoAccountBar--cell-right {
  width: 100%;
  float: right;
  margin-top: 1.5rem;
  position: relative;
  text-align: center; }

@media (min-width: 48em) {
  .LiveDemoAccountBar .LiveDemoAccountBar--content .LiveDemoAccountBar--cell-right {
    width: 260px;
    margin-left: 2rem;
    margin-top: 0; } }

.LiveDemoAccountBar .LiveDemoAccountBar--content .LiveDemoAccountBar--cell-right .Button {
  margin-bottom: 1rem;
  margin-top: 1rem; }

.LiveDemoAccountBar .LiveDemoAccountBar--content.left {
  position: relative;
  padding: 2rem; }

@media (max-width: 61.99em) {
  .LiveDemoAccountBar .LiveDemoAccountBar--content.left {
    background: #00c5e8;
    background: -ms-linear-gradient(135deg, #00c5e8 0%, #00afcf 100%);
    background: linear-gradient(135deg, #00c5e8 0%, #00afcf 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color-medium-blue-1', endColorstr='#00afcf', GradientType=1 ); } }

@media (min-width: 62em) {
  .LiveDemoAccountBar .LiveDemoAccountBar--content.left {
    padding: 0rem 2rem 0rem 0; } }

.LiveDemoAccountBar .LiveDemoAccountBar--content.right {
  position: relative;
  padding: 2rem; }

@media (max-width: 61.99em) {
  .LiveDemoAccountBar .LiveDemoAccountBar--content.right {
    background: #0a264d;
    background: -ms-linear-gradient(135deg, #0a264d 0%, #071b36 100%);
    background: linear-gradient(135deg, #0a264d 0%, #071b36 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color-blue-1', endColorstr='#071b36', GradientType=1 ); } }

@media (min-width: 62em) {
  .LiveDemoAccountBar .LiveDemoAccountBar--content.right {
    padding: 0rem 0 0rem 2rem; } }

@media (min-width: 62em) {
  .LiveDemoAccountBar.Tall {
    background-image: url("https://assets.cmcmarkets.com/images/livedemo_accountbar_cta_background-2.jpg"); } }

.LiveDemoAccountBar.Tall h3.Section-title {
  text-align: center; }

.LiveDemoAccountBar.Tall p {
  text-align: center; }

@media (min-width: 62em) {
  .LiveDemoAccountBar.Tall .LiveDemoAccountBar--container {
    padding: 1rem 0; } }

.LiveDemoAccountBar.Tall .LiveDemoAccountBar--content .LiveDemoAccountBar--cell-left {
  width: 100%;
  float: left;
  position: relative; }

.LiveDemoAccountBar.Tall .LiveDemoAccountBar--content .LiveDemoAccountBar--cell-right {
  width: 100%;
  float: right;
  margin-top: 1.5rem;
  position: relative;
  text-align: center; }

.LiveDemoAccountBar.Tall .LiveDemoAccountBar--content .LiveDemoAccountBar--cell-right .Button {
  margin-bottom: 1rem; }

.LiveDemoAccountBar.Tall .LiveDemoAccountBar--content.left {
  position: relative;
  padding: 1.5rem; }

@media (max-width: 61.99em) {
  .LiveDemoAccountBar.Tall .LiveDemoAccountBar--content.left {
    background: #0069d2;
    background: -ms-linear-gradient(135deg, #0069d2 0%, #005cb8 100%);
    background: linear-gradient(135deg, #0069d2 0%, #005cb8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color-medium-blue-2', endColorstr='#005cb8', GradientType=1 ); } }

.LiveDemoAccountBar.Tall .LiveDemoAccountBar--content.right {
  position: relative;
  padding: 1.5rem; }

@media (max-width: 61.99em) {
  .LiveDemoAccountBar.Tall .LiveDemoAccountBar--content.right {
    background: #0a264d;
    background: -ms-linear-gradient(135deg, #0a264d 0%, #071b36 100%);
    background: linear-gradient(135deg, #0a264d 0%, #071b36 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color-blue-1', endColorstr='#071b36', GradientType=1 ); } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.LogoWall ul {
  margin: 0 0 2rem;
  padding: 0;
  text-align: center; }

.LogoWall li {
  display: inline-block;
  margin: 0 0 2rem;
  padding: 0 1rem;
  width: 40%;
  vertical-align: middle; }

@media (min-width: 48em) {
  .LogoWall li {
    padding: 0 3rem;
    width: auto; } }

.LogoWall li:before {
  display: none; }

@media (max-width: 47.99em) {
  .LogoWall img {
    max-width: 100%; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.NewToCMC {
  padding-bottom: 0; }

.NewToCMC h2.Section-title {
  color: #1b2429;
  font-size: 1.56rem;
  letter-spacing: 0.135rem;
  line-height: 1.875rem;
  text-align: center; }

@media (max-width: 29.99em) {
  .NewToCMC h2.Section-title {
    padding-left: 1rem;
    padding-right: 1rem; } }

.NewToCMC h3.Section-title {
  color: #00c5e8;
  font-size: 2.125rem;
  letter-spacing: 0.2rem;
  line-height: 2.687rem; }

@media (min-width: 62em) {
  .NewToCMC {
    padding-top: 6rem;
    padding-bottom: 6rem; } }

.NewToCMC .Tabs-panel {
  overflow: hidden; }

.NewToCMC .ImageAndCopy-content {
  padding: 2rem 0.5rem; }

@media (min-width: 30em) {
  .NewToCMC .ImageAndCopy-content {
    padding: 2rem; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.NewsHighlights {
  padding: 5rem 0 8rem;
  text-align: center; }

.NewsHighlights-item {
  border: 1px solid #fff; }

@media (max-width: 47.99em) {
  .NewsHighlights-item + .NewsHighlights-item {
    margin-top: 3rem; } }

.NewsHighlights-content {
  display: block;
  padding-bottom: 2rem;
  background: #f1f2f4;
  border-bottom: 5px solid transparent;
  text-decoration: none;
  transition: background 0.2s ease-out; }

.NewsHighlights-content--green-medium {
  border-color: #1ab99f; }

.NewsHighlights-content--blue-medium-secondary {
  border-color: #0069d2; }

.NewsHighlights-content--blue-medium {
  border-color: #0a264d; }

.NewsHighlights-content:hover {
  background: #eaebee; }

.NewsHighlights-content:hover .Button-panel {
  width: 130%; }

.NewsHighlights-content .Button {
  max-width: 90%; }

@media (max-width: 29.99em) {
  .NewsHighlights-content .Button {
    width: auto;
    margin: 0 auto; } }

@media (min-width: 30em) and (max-width: 47.99em) {
  .NewsHighlights-content .Button {
    width: auto;
    margin: 0 auto; } }

.NewsHighlights .Section-title {
  margin-bottom: 1.8rem;
  color: #0a264d;
  font-size: 1.56rem;
  letter-spacing: 0.135rem;
  line-height: 1.875rem;
  text-align: center; }

.NewsHighlights h3 {
  margin-bottom: 2rem;
  padding: 0 3rem;
  color: #0a264d;
  font-family: "ubuntubold", sans-serif;
  text-transform: none; }

.NewsHighlights img {
  display: block;
  margin-bottom: 2rem;
  width: 100%;
  height: auto; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.NewsAnalysisTeaser h2.Section-title {
  text-align: center;
  color: #0a264d; }

.NewsAnalysisTeaser p {
  text-align: center; }

.NewsAnalysisTeaser .Section-standfirst {
  margin-bottom: 4rem; }

.NewsAnalysisTeaser .row {
  border-bottom: 4px solid rgba(0, 0, 0, 0.01);
  margin-bottom: 4rem; }

.NewsAnalysisTeaser .col-xs-12 {
  background: white;
  border: 1px solid #f1f2f4;
  text-align: center;
  height: 200px;
  overflow: hidden; }

.NewsAnalysisTeaser .NewsAnalysisTeaser--live-only {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%; }

.NewsAnalysisTeaser .NewsAnalysisTeaser--live-only .NewsAnalysisTeaser--live-only-copy {
  color: #1ab99f;
  font-size: 0.7rem;
  position: absolute;
  top: 0.4rem;
  right: 2.4rem; }

.NewsAnalysisTeaser .NewsAnalysisTeaser--live-only .NewsAnalysisTeaser--live-only-icon {
  width: 60px;
  height: 60px;
  background: #1ab99f;
  color: white;
  font-size: 1rem;
  position: absolute;
  right: -30px;
  top: -30px;
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  text-align: left; }

.NewsAnalysisTeaser .NewsAnalysisTeaser--live-only .NewsAnalysisTeaser--live-only-icon .Icon {
  position: absolute;
  -ms-transform: translate(15%, 130%) rotate(45deg);
  -webkit-transform: translate(15%, 130%) rotate(45deg);
  transform: translate(15%, 130%) rotate(45deg); }

.NewsAnalysisTeaser .NewsAnalysisTeaser--cell {
  width: 100%;
  height: 100%;
  position: relative; }

.NewsAnalysisTeaser .NewsAnalysisTeaser--cell .NewsAnalysisTeaser--left-col {
  width: 70%;
  height: 100%;
  float: left;
  position: relative;
  text-align: left;
  padding: 1.5rem; }

.NewsAnalysisTeaser .NewsAnalysisTeaser--cell .NewsAnalysisTeaser--right-col {
  width: 30%;
  height: 100%;
  float: right;
  position: relative; }

.NewsAnalysisTeaser h3.NewsAnalysisTeaser--title {
  color: #0a264d;
  font-size: 1.2rem;
  text-transform: none;
  margin-bottom: 0.5rem; }

.NewsAnalysisTeaser p.NewsAnalysisTeaser--copy {
  font-size: 0.8rem;
  text-align: left;
  color: #979b9e;
  margin-bottom: 0.5rem; }

.NewsAnalysisTeaser .NewsAnalysisTeaser--icon-holder {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #f1f2f4;
  overflow: hidden;
  position: absolute;
  top: 50%;
  right: 20px;
  -ms-transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%); }

.NewsAnalysisTeaser .NewsAnalysisTeaser--icon-holder .Icon {
  font-size: 3rem;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: black; }

.NewsAnalysisTeaser .NewsAnalysisTeaser--icon-holder .Icon.Icon--lightbulb {
  font-size: 2.6rem; }

.NewsAnalysisTeaser .NewsAnalysisTeaser--icon-holder .Icon.Icon--morningstart {
  font-size: 4rem; }

.NewsAnalysisTeaser .NewsAnalysisTeaser--icon-holder .Icon.Icon--reuters {
  font-size: 4.2rem; }

.NewsAnalysisTeaser .NewsAnalysisTeaser--icon-holder .Icon.Icon--youtube {
  font-size: 2.4rem; }

.NewsAnalysisTeaser .NewsAnalysisTeaser--icon-holder .Icon.Icon--calendar {
  font-size: 2.8rem; }

.NewsAnalysisTeaser .NewsAnalysisTeaser--icon-holder .Icon.Icon--twitter {
  font-size: 5rem; }

.NewsAnalysisTeaser p.Button-holder {
  margin-bottom: 0; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.OrderExecution h2.Section-title {
  text-align: center; }

.OrderExecution h3.Section-title {
  margin-bottom: 1.5rem; }

.OrderExecution .ImageAndCopy-image img {
  max-height: 640px; }

.OrderExecution ul {
  padding: 0;
  border: 2px solid #e8e9ed; }

.OrderExecution ul:before,
.OrderExecution ul:after {
  content: " ";
  display: table; }

.OrderExecution ul:after {
  clear: both; }

.OrderExecution p {
  text-align: center; }

.OrderExecution p:last-child {
  margin-bottom: 0; }

@media (min-width: 62em) {
  .OrderExecution p {
    text-align: left; } }

.OrderExecution li {
  float: left;
  margin: 0;
  padding: 0 0 18px;
  width: 50%;
  min-height: 155px;
  background: #f1f2f4;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-align: center; }

.OrderExecution li a {
  text-decoration: none;
  color: #0a264d;
  transition: color 0.2s ease-out; }

.OrderExecution li a .Icon {
  font-size: 2rem;
  padding: 1.5rem;
  margin-bottom: 10px;
  width: 100%;
  height: auto;
  background: #f9f9f9;
  border-bottom: 2px solid #e8e9ed; }

.OrderExecution li a:hover {
  color: #00c5e8; }

.OrderExecution li:last-child {
  width: 100%; }

.OrderExecution [data-content~="Order"][data-content~="Execution"][data-content~="EN-CA"] li:last-child {
  width: 50%; }

@media (min-width: 48em) {
  .OrderExecution li:last-child {
    width: 20%; }
  .OrderExecution [data-content~="Order"][data-content~="Execution"][data-content~="EN-CA"] li:last-child {
    width: 25%; } }

@media (min-width: 30em) {
  .OrderExecution li {
    width: 50%; } }

@media (min-width: 48em) {
  .OrderExecution li {
    width: 20%; }
  .OrderExecution [data-content~="Order"][data-content~="Execution"][data-content~="EN-CA"] li {
    width: 25%; } }

.OrderExecution li:before {
  display: none; }

.OrderExecution li img {
  margin-bottom: 10px;
  width: 100%;
  height: auto;
  background: #f9f9f9;
  border-bottom: 2px solid #e8e9ed; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.ParallaxHero {
  padding: 0 !important;
  position: relative;
  margin: 0;
  background-color: transparent !important; }

.ParallaxHero .background-container {
  overflow: hidden;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  clip: rect(auto, auto, auto, auto); }

.ParallaxHero .background-image {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: fixed;
  top: 0;
  left: 0;
  height: 110%;
  width: 100%; }

@media (min-width: 162.5em) {
  .ParallaxHero .background-image {
    top: -210px; } }

@media (min-width: 200em) {
  .ParallaxHero .background-image {
    top: -240px; } }

.ParallaxHero .module-content {
  padding: 5rem 0 10rem;
  text-align: center; }

.ParallaxHero.ParallaxHero-level2.Products {
  color: white; }

.ParallaxHero.ParallaxHero-level2.Products .Section-title {
  color: white !important; }

@media (min-width: 48em) {
  .ParallaxHero.ParallaxHero-level2.Products .Section-title {
    margin-bottom: 4rem; } }

.ParallaxHero.ParallaxHero-level2.Products .ParallaxHero-links {
  margin-top: 3rem;
  line-height: 4rem;
  margin-bottom: 3rem; }

@media (min-width: 48em) {
  .ParallaxHero.ParallaxHero-level2.Products .MainCTA {
    width: 300px; } }

.ParallaxHero.ParallaxHero-level2.Products .ParallaxHero-Stats {
  margin-bottom: 3rem; }

.ParallaxHero.ParallaxHero-level2.Products .StatsCell {
  width: 50%;
  display: inline-block;
  vertical-align: top;
  padding: 0 2rem;
  margin-left: -4px;
  margin-bottom: 2rem; }

@media (min-width: 30em) {
  .ParallaxHero.ParallaxHero-level2.Products .StatsCell {
    width: 33.3333%; } }

@media (min-width: 48em) {
  .ParallaxHero.ParallaxHero-level2.Products .StatsCell {
    width: 20%;
    margin-bottom: 0; } }

.ParallaxHero.ParallaxHero-level2.Products .StatsCell .StatsCell-container {
  width: 100px;
  margin: 0 auto; }

.ParallaxHero.ParallaxHero-level2.Products .StatsCell .IconHolder {
  height: 120px; }

.ParallaxHero.ParallaxHero-level2.Products .StatsCell .IconHolder img {
  width: 100%;
  height: auto; }

.ParallaxHero.ParallaxHero-level2.Products .StatsCell .StatsNumber {
  font-family: 'ubuntubold';
  font-size: 1.8rem;
  margin-bottom: 0.5rem; }

.ParallaxHero.ParallaxHero-level2.Products .StatsCell .StatsCaption {
  font-size: 0.9rem; }

.ParallaxHero.ParallaxHero-level2.Education {
  color: white; }

.ParallaxHero.ParallaxHero-level2.Education .Section-title {
  color: white !important; }

@media (min-width: 48em) {
  .ParallaxHero.ParallaxHero-level2.Education .Section-title {
    margin-bottom: 4rem; } }

.ParallaxHero.ParallaxHero-level2.Education .ParallaxHero-links {
  line-height: 4rem;
  max-width: 1000px;
  margin: 0 auto; }

@media (min-width: 48em) {
  .ParallaxHero.ParallaxHero-level2.Education .ParallaxHero-links {
    margin-top: 4rem; } }

.ParallaxHero.ParallaxHero-level2.Education .ParallaxHero-links .Button {
  margin: 0 auto;
  margin-bottom: 1rem; }

@media (min-width: 48em) {
  .ParallaxHero.ParallaxHero-level2.Education .ParallaxHero-links .Button {
    margin-left: 0.5rem;
    margin-right: 0.5rem; } }

.ParallaxHero.ParallaxHero-level2.Education h2.Section-title {
  margin-bottom: 1.5rem; }

.ParallaxHero.ParallaxHero-level2.Education h3 {
  margin-bottom: 1.5rem; }

.ParallaxHero.ParallaxHero-level2.Education .background-image {
  background-position: center top; }

.ParallaxHero.ParallaxHero-level2.Education .background-image:after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 200%;
  background-color: #1b2429;
  opacity: 0.3; }

.ParallaxHero.ParallaxHero-level2.Support {
  color: auto; }

.ParallaxHero.ParallaxHero-level2.Support .module-content {
  padding-bottom: 5rem; }

@media (min-width: 48em) {
  .ParallaxHero.ParallaxHero-level2.Support .module-content {
    padding-bottom: 30rem; } }

.ParallaxHero.ParallaxHero-level2.Support .background-image {
  background-position: center top; }

.ParallaxHero.ParallaxHero-level2.Support .Section-title {
  margin-bottom: 1.5rem;
  color: #0a264d !important; }

@media (max-width: 47.99em) and (orientation: landscape) {
  .background-container.background-container--readable-text-fix::after {
    content: " ";
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.3);
    position: absolute;
    top: 0;
    left: 0; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.PhotoWall {
  text-align: left; }

.PhotoWall ul,
.PhotoWall li {
  margin: 0;
  padding: 0;
  list-style: none; }

.PhotoWall li:before {
  display: none; }

.PhotoWall-item {
  position: relative;
  float: left;
  width: 50%;
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  border: 1px solid transparent; }

@media (min-width: 48em) {
  .PhotoWall-item {
    width: 33.33333%; } }

@media (min-width: 62em) {
  .PhotoWall-item {
    width: 25%; } }

.PhotoWall-item img {
  display: block;
  width: 100%;
  height: auto;
  transition: -webkit-transform 0.4s ease-in-out;
  transition: transform 0.4s ease-in-out; }

.PhotoWall-item-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #0a264d;
  background: rgba(16, 42, 76, 0.85);
  transition: opacity 0.4s ease-in-out; }

.PhotoWall-item-content {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  left: 1rem; }

.PhotoWall-item-content h3 {
  margin-bottom: 0.5rem;
  font-family: "ubuntubold", sans-serif;
  font-size: 1.125rem;
  line-height: 1.875rem;
  text-transform: none; }

.PhotoWall-item-content p {
  margin: 0;
  font-family: "ubunturegular", sans-serif;
  font-size: 0.687rem;
  letter-spacing: 0.025rem;
  line-height: 1.125rem;
  text-transform: uppercase; }

.PhotoWall-item:hover img {
  -ms-transform: scale(1.075);
  -webkit-transform: scale(1.075);
  transform: scale(1.075); }

@media (min-width: 62em) {
  .PhotoWall-item:hover .PhotoWall-item-overlay {
    opacity: 0.65; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.PlainPageHeader-titles {
  padding-top: 2rem;
  padding-bottom: 0;
  text-align: center; }

.PlainPageHeader-standfirst {
  margin-bottom: 1rem; }

.PlainPageHeader-social {
  padding-bottom: 1em;
  text-align: center; }

@media (min-width: 22.5em) {
  .PlainPageHeader-titles {
    margin-bottom: 1rem; } }

@media (min-width: 48em) {
  .PlainPageHeader {
    margin: 2rem 0; }
  .PlainPageHeader-titles {
    text-align: left; }
  .PlainPageHeader-social {
    text-align: right; } }

@media (min-width: 62em) {
  .PlainPageHeader-titles {
    text-align: center; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.Promotion {
  margin-bottom: 3rem;
  padding: 2rem;
  color: #0a264d; }

.Promotion .Section-title {
  margin-bottom: 2rem;
  color: #0a264d; }

.Promotion--dark {
  color: #fff; }

.Promotion--dark .Section-title {
  color: #fff; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.ShareBlock a {
  text-decoration: none; }

.ShareBlock-title {
  display: block;
  position: relative;
  margin-top: -1rem;
  margin-right: 0.7rem;
  margin-bottom: 1.5rem;
  vertical-align: top;
  color: #0a264d;
  text-transform: uppercase;
  font-size: 0.7rem;
  font-weight: bold;
  font-family: 'ubuntubold'; }

.ShareBlock-service {
  display: inline-block;
  margin-right: 0.5rem;
  vertical-align: middle; }

.ShareBlock-service.facebook {
  color: #205499; }

.ShareBlock-service.twitter {
  color: #00bae8; }

.ShareBlock-service.linkedin {
  color: #1e61bd; }

.ShareBlock-service.google {
  color: #D0021B; }

.ShareBlock-service--no-numbers {
  padding-top: 2.25rem; }

.ShareBlock-icon {
  display: block;
  height: 2.5rem;
  line-height: 2.5rem;
  vertical-align: middle;
  text-align: center;
  width: 2.5rem;
  border-radius: 50%;
  border: 2px solid;
  font-size: 2rem;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  cursor: pointer; }

.ShareBlock-icon:before {
  position: relative;
  top: -2px; }

.ShareBlock-icon.Icon--facebook {
  border-color: #205499; }

.ShareBlock-icon.Icon--facebook:hover {
  background-color: #205499;
  color: #fff; }

.ShareBlock-icon.Icon--twitter {
  border-color: #00bae8; }

.ShareBlock-icon.Icon--twitter:hover {
  background-color: #00bae8;
  color: #fff; }

.ShareBlock-icon.Icon--linkedin {
  border-color: #1e61bd; }

.ShareBlock-icon.Icon--linkedin:hover {
  background-color: #1e61bd;
  color: #fff; }

.ShareBlock-icon.Icon--google-plus {
  border-color: #dd4b39; }

.ShareBlock-icon.Icon--google-plus:hover {
  background-color: #dd4b39;
  color: #fff; }

.ShareBlock-numbers {
  position: relative;
  display: block;
  height: 1.75rem;
  margin-bottom: 0.5rem;
  text-align: center;
  font-size: 0.687rem;
  letter-spacing: 0.025rem;
  line-height: 1.125rem;
  line-height: 1.75rem;
  vertical-align: middle; }

@media (min-width: 22.5em) {
  .ShareBlock-title {
    line-height: 2.5rem;
    display: inline-block;
    top: 1.25rem; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.SignUpNewsletter {
  margin: 0;
  padding: 2rem 1.5rem;
  background-color: #0a264d;
  background-image: url("https://assets.cmcmarkets.com/images/signupnewsletter_signup-bg-2.png");
  background-size: cover;
  background-position: center center;
  color: #00c5e8;
  position: relative;
  overflow: hidden; }

.SignUpNewsletter .container-fluid {
  padding-left: 0;
  padding-right: 0;
  min-width: 0; }

.SignUpNewsletter .SignUp-block {
  float: left;
  width: 100%;
  position: relative; }

.SignUpNewsletter .SignUp-block:first-child {
  margin-bottom: 2rem; }

@media (min-width: 48em) {
  .SignUpNewsletter .SignUp-block {
    width: 50%; }
  .SignUpNewsletter .SignUp-block:first-child {
    margin-bottom: 0; } }

.SignUpNewsletter .SignUp-block.Form {
  font-size: 0; }

@media (min-width: 48em) {
  .SignUpNewsletter .SignUp-block.Form {
    padding-left: 2rem; } }

.SignUpNewsletter .SignUp-block input, .SignUpNewsletter .SignUp-block button {
  background: transparent;
  margin: 0;
  border: 1px solid white;
  padding: 0.5rem 1rem;
  display: inline-block;
  height: 40px;
  outline: none;
  text-decoration: none;
  transition: border 0.3s ease-out !important; }

.SignUpNewsletter .SignUp-block input:hover, .SignUpNewsletter .SignUp-block input:focus, .SignUpNewsletter .SignUp-block input:active, .SignUpNewsletter .SignUp-block button:hover, .SignUpNewsletter .SignUp-block button:focus, .SignUpNewsletter .SignUp-block button:active {
  border: 1px solid #00c5e8; }

.SignUpNewsletter .SignUp-block:hover input, .SignUpNewsletter .SignUp-block:hover button, .SignUpNewsletter .SignUp-block:focus input, .SignUpNewsletter .SignUp-block:focus button, .SignUpNewsletter .SignUp-block:active input, .SignUpNewsletter .SignUp-block:active button {
  border: 1px solid #00c5e8; }

.SignUpNewsletter .SignUp-block input:focus + label + button {
  border-color: #00c5e8; }

.SignUpNewsletter .SignUp-block input[type=text] {
  font-size: 1rem;
  width: calc(100% - 43px);
  border-radius: 3px 0 0 3px; }

@media (min-width: 48em) {
  .SignUpNewsletter .SignUp-block input[type=text] {
    width: calc(80% - 43px); } }

.SignUpNewsletter .SignUp-block input[type=text]:hover + button, .SignUpNewsletter .SignUp-block input[type=text]:focus + button, .SignUpNewsletter .SignUp-block input[type=text]:active + button {
  border-color: #00c5e8; }

.SignUpNewsletter .SignUp-block button[type=submit] {
  width: 40px;
  border-left: none;
  border-radius: 0 3px 3px 0 !important;
  line-height: 1.4rem;
  background: #0a264d; }

.SignUpNewsletter .SignUp-block button[type=submit] .Icon {
  margin-left: -0.2rem; }

.SignUpNewsletter .SignUp-block input:focus,
.SignUpNewsletter .SignUp-block select:focus,
.SignUpNewsletter .SignUp-block textarea:focus,
.SignUpNewsletter .SignUp-block button:focus {
  outline: none; }

.SignUpNewsletter .SignUp-block .Button .Button-panel {
  left: -100%; }

.SignUpNewsletter .SignUp-block .Button:hover,
.SignUpNewsletter .SignUp-block .Button:focus {
  color: #fff; }

.SignUpNewsletter .SignUp-block .Button:hover .Button-panel,
.SignUpNewsletter .SignUp-block .Button:focus .Button-panel {
  width: 200% !important; }

.SignUpNewsletter .Heading {
  margin-top: 0.25rem;
  padding-left: 3rem;
  text-align: center; }

.SignUpNewsletter .Heading .Icon {
  font-size: 2.5rem;
  display: inline-block;
  vertical-align: middle;
  margin-left: -3rem;
  line-height: 0; }

.SignUpNewsletter .Heading .Title {
  font-size: 1.3rem;
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  padding-left: 1rem; }

.ArticleSidebar .SignUpNewsletter {
  margin-bottom: 1.5rem;
  padding: 2rem 1.5rem;
  background-position: top left; }

.ArticleSidebar .SignUpNewsletter .Heading {
  margin-top: 0; }

.ArticleSidebar .SignUpNewsletter .SignUp-block.Form {
  padding-left: 0; }

.ArticleSidebar .SignUpNewsletter .SignUp-block {
  text-align: left;
  width: 100%; }

@media (min-width: 48em) and (max-width: 61.99em) {
  .ArticleSidebar .SignUpNewsletter .SignUp-block {
    width: 50%; }
  .ArticleSidebar .SignUpNewsletter .SignUp-block:first-child {
    margin-bottom: 0 !important; }
  .ArticleSidebar .SignUpNewsletter .SignUp-block.Heading {
    padding-right: 0.5rem; }
  .ArticleSidebar .SignUpNewsletter .SignUp-block.Form {
    padding-left: 0.5rem; } }

.ArticleSidebar .SignUpNewsletter .SignUp-block input[type=text] {
  width: calc(100% - 43px); }

.ArticleSidebar .SignUpNewsletter .SignUp-block:first-child {
  margin-bottom: 1rem; }

.ArticleSidebar .SignUpNewsletter .SignUp-block.Heading .Icon {
  font-size: 3rem; }

.ArticleSidebar .SignUpNewsletter .SignUp-block .Title {
  text-transform: uppercase;
  font-size: 1rem; }

.SignUp-input-group {
  position: relative;
  z-index: 10; }

.SignUp-input {
  position: relative;
  z-index: 30; }

.SignUp-label {
  position: absolute;
  top: 0.44rem;
  left: 1.1rem;
  color: #fff;
  font-size: 1rem;
  z-index: 1;
  opacity: 1;
  transition: opacity 0.2s ease; }

@media (max-width: 47.99em) {
  .SignUp-label {
    top: 0.56rem; } }

.SignUp-input.is-filled + .SignUp-label {
  opacity: 0; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.SocialLinks {
  margin: 0;
  padding: 0;
  list-style: none; }

.SocialLinks li {
  margin: 0;
  padding: 0 2.5%;
  display: inline-block; }

.SocialLinks li:before {
  display: none; }

.SocialLinks li + li {
  padding-left: 1rem; }

.SocialLinks a {
  display: block;
  border-radius: 1000px;
  font-size: 2rem;
  line-height: 35px;
  text-align: center;
  text-decoration: none; }

.SocialLinks a:hover .Icon,
.SocialLinks a:focus .Icon {
  background: #00c5e8;
  color: #fff; }

.SocialLinks a .Icon {
  border: 1px solid #00c5e8;
  border-radius: 1000px;
  transition: all 0.2s ease-out; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.Sponsorship {
  overflow: hidden;
  padding: 0;
  background: white;
  border-top: 1px solid #e8e9ed; }

@media (min-width: 48em) {
  .Sponsorship {
    padding: 0; } }

.Sponsorship .Section-title {
  margin-bottom: 1rem;
  font-family: "ubuntubold", sans-serif;
  font-size: 1.56rem;
  letter-spacing: 0.135rem;
  line-height: 1.875rem; }

.Sponsorship-section {
  display: flex;
  align-items: center;
  text-align: center; }

.Sponsorship-section:before,
.Sponsorship-section:after {
  content: " ";
  display: table; }

.Sponsorship-section:after {
  clear: both; }

@media (min-width: 48em) {
  .Sponsorship-section {
    position: relative;
    padding-top: 1rem; } }

@media (min-width: 62em) {
  .Sponsorship-section {
    float: left;
    width: 50%;
    text-align: left; } }

@media (min-width: 48em) and (max-width: 61.99em) {
  .Sponsorship-section {
    padding-bottom: 1rem; } }

.Sponsorship-section--left .Section-title {
  color: #1ab99f; }

@media (min-width: 62em) {
  .Sponsorship-section--right {
    border-left: 1px solid #e8e9ed; } }

.Sponsorship-section--right .Section-title {
  color: #0069d2; }

.Sponsorship-section--right .Sponsorship-section-image {
  right: 0; }

@media (min-width: 62em) {
  .Sponsorship-section--right .Sponsorship-section-image picture img {
    left: 0;
    right: auto; } }

.Sponsorship-section-image {
  margin-bottom: 1rem;
  overflow: hidden; }

@media (min-width: 48em) {
  .Sponsorship-section-image {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%; } }

@media (min-width: 62em) {
  .Sponsorship-section-image {
    width: 45%; } }

@media (min-width: 87.5em) {
  .Sponsorship-section-image {
    width: 65%; } }

.Sponsorship-section-image picture {
  display: inline-block;
  width: 100%; }

@media (min-width: 48em) {
  .Sponsorship-section-image picture {
    position: relative;
    top: 50%;
    -ms-transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%); } }

@media (min-width: 62em) {
  .Sponsorship-section-image picture {
    height: 100%; } }

.Sponsorship-section-image picture img {
  width: 100%;
  height: 110%; }

@media (min-width: 62em) {
  .Sponsorship-section-image picture img {
    width: auto;
    height: 120%;
    position: absolute;
    top: 50%;
    -ms-transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    right: 0; } }

@media (min-width: 103.125em) {
  .Sponsorship-section-image picture img {
    height: 100%; } }

.Sponsorship .Button {
  padding-right: 1rem;
  padding-left: 1rem;
  width: auto;
  font-family: "ubunturegular", sans-serif;
  font-size: 0.687rem;
  letter-spacing: 0.025rem;
  line-height: 1.125rem;
  text-transform: uppercase; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.StatisticCard {
  background-color: #fff;
  border-bottom: 3px solid #e8e9ed;
  padding: 3rem 5rem;
  text-align: center; }

.StatisticCard:last-child {
  margin-bottom: 0; }

.StatisticCard-icon {
  display: block;
  font-size: 3em;
  margin-bottom: 2rem;
  color: #00c5e8; }

.StatisticCard-title {
  font-family: "ubuntulight", sans-serif;
  font-size: 1.2rem;
  line-height: 1.4;
  color: #1b2429; }

.StatisticCard-title em {
  font-family: "ubunturegular", sans-serif; }

@media (min-width: 30em) {
  .StatisticCard {
    max-width: 70%;
    margin-left: auto;
    margin-right: auto; } }

@media (min-width: 43.1875em) {
  .StatisticCard {
    max-width: 50%; } }

@media (min-width: 48em) {
  .StatisticCard {
    float: left;
    width: 33%;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    border-left: 1px solid #e8e9ed; }
  .StatisticCard:first-child {
    border-left: none; } }

@media (min-width: 48em) and (max-width: 61.99em) {
  .StatisticCard {
    padding-left: 3rem;
    padding-right: 3rem; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.SupportContact {
  margin: 0;
  padding: 0;
  background-color: #00c5e8;
  background-image: url("https://assets.cmcmarkets.com/images/background_bluelight-bar.jpg");
  background-size: cover; }

@media (max-width: 47.99em) {
  .SupportContact {
    background-image: none; } }

.SupportContact-contact {
  padding: 2rem 0;
  color: white;
  text-align: center; }

@media (max-width: 47.99em) {
  .SupportContact-contact-call,
  .SupportContact-contact-chat,
  .SupportContact-contact-email {
    margin-bottom: 4rem; } }

.SupportContact-contact-call .Icon,
.SupportContact-contact-chat .Icon,
.SupportContact-contact-email .Icon {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 2rem; }

.SupportContact-contact-call a {
  color: #fff;
  text-decoration: none; }

.SupportContact-contact-community {
  padding-top: 0.75rem; }

.SupportContact-contact-title {
  text-transform: none; }

.SupportContact-contact p {
  font-size: 1.56rem;
  letter-spacing: 0.135rem;
  line-height: 1.875rem; }

.SupportContact-contact p:last-child {
  margin-bottom: 0; }

.SupportTopics {
  margin: 0; }

.SupportTopics h2.Section-title {
  color: #0a264d; }

.SupportTopics ul {
  margin: 0;
  padding: 0; }

.SupportTopics ul li {
  margin: 0;
  margin-bottom: 1rem; }

.SupportTopics ul li:before {
  display: none; }

@media (min-width: 30em) and (max-width: 47.99em) {
  .SupportTopics ul li:nth-child(2n + 1) {
    clear: both; } }

@media (min-width: 48em) and (max-width: 61.99em) {
  .SupportTopics ul li:nth-child(3n + 1) {
    clear: both; } }

@media (min-width: 62em) {
  .SupportTopics ul li:nth-child(4n + 1) {
    clear: both; } }

@media (min-width: 48em) {
  .SupportTopics ul li {
    margin-bottom: 2rem; } }

.SupportTopics a.Button {
  display: block;
  padding: 0.75rem 0 0.5rem 1.4rem;
  padding: 0.5rem 1rem;
  width: 100%;
  border-color: #e8e9ed;
  color: #0a264d;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-align: left;
  text-decoration: none; }

.SupportTopics a.Button:hover,
.SupportTopics a.Button:focus {
  color: #0a264d; }

.SupportTopics a.Button.Button--blue-light .Button-panel {
  background: #e8e9ed; }

.SupportTopics a.Button .Button-copy {
  display: inline;
  vertical-align: middle; }

@media (min-width: 62em) {
  .SupportTopics a.Button .Button-copy {
    top: 3px; } }

.SupportTopics a.Button .Icon {
  position: relative;
  float: left;
  margin-right: 1rem;
  font-size: 1.8rem; }

@media (min-width: 62em) {
  .SupportTopics a.Button .Icon {
    top: -2px; } }

.SupportTopics .SupportTopics--search {
  margin-top: 2rem; }

.SupportTopics .SupportTopics--search:hover input[type=text],
.SupportTopics .SupportTopics--search:focus input[type=text],
.SupportTopics .SupportTopics--search:active input[type=text] {
  border: 1px solid #00c5e8; }

.SupportTopics .SupportTopics--search input,
.SupportTopics .SupportTopics--search button {
  background: #f1f2f4;
  color: #0a264d;
  padding: 1rem 2rem;
  float: left;
  height: 72px;
  outline: none;
  text-decoration: none;
  transition: border 0.3s ease-out !important; }

.SupportTopics .SupportTopics--search input[type=text] {
  width: 100%;
  border: 1px solid #f1f2f4; }

.SupportTopics .SupportTopics--search input[type=text]:hover, .SupportTopics .SupportTopics--search input[type=text]:focus, .SupportTopics .SupportTopics--search input[type=text]:active {
  border: 1px solid #00c5e8; }

.SupportTopics .SupportTopics--search button[type=submit] {
  width: 60px;
  background: transparent;
  position: absolute;
  right: 0.5rem; }

.SupportTopics .SupportTopics--search button[type=submit] .Icon {
  margin-left: -0.5rem;
  font-size: 1.4rem; }

.SupportTopics .SupportTopics--search input:focus,
.SupportTopics .SupportTopics--search select:focus,
.SupportTopics .SupportTopics--search textarea:focus,
.SupportTopics .SupportTopics--search button:focus {
  outline: none; }

.SupportTopics .SupportTopics--search button:hover,
.SupportTopics .SupportTopics--search button:focus {
  color: #00c5e8;
  border-radius: auto; }

/*@import 'bio/style.bio.twitterfeed.scss';*/
/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.StockTicker {
  padding-top: 2rem;
  padding-bottom: 1rem;
  overflow: hidden; }

.StockTicker-inner {
  position: relative;
  overflow: hidden;
  height: 2.125rem;
  margin-bottom: 1rem; }

.StockTicker-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  height: 2.125rem;
  overflow: hidden; }

.StockTicker-ticker {
  overflow: hidden;
  height: 2.125rem;
  float: left;
  padding: 0;
  margin: 0; }

.StockTicker-item {
  float: left;
  height: 2.125rem;
  margin: 0.5rem 0.75rem;
  padding: 0;
  font-size: 0.687rem;
  letter-spacing: 0.025rem;
  line-height: 1.125rem;
  font-family: "ubuntubold", sans-serif, Arial, sans-serif;
  color: #1b2429;
  text-transform: uppercase; }

.StockTicker-item::before {
  display: none; }

.StockTicker-item a {
  -ms-transform: translateZ(1px);
  -webkit-transform: translateZ(1px);
  transform: translateZ(1px);
  backface-visibility: visible;
  color: #1b2429;
  text-decoration: none; }

.StockTicker-item a:hover {
  text-decoration: underline; }

.StockTicker-item--up .StockTicker-item-change {
  color: #1ab99f; }

.StockTicker-item--down .StockTicker-item-change {
  color: #e71c3a; }

.StockTicker-button {
  font-size: 0.875rem;
  line-height: 1.25rem;
  width: 125px; }

@media (min-width: 48em) {
  .StockTicker-inner {
    float: left;
    width: calc(100% - 150px);
    margin-bottom: 0; }
  .StockTicker-button {
    position: relative;
    top: -0.2rem;
    float: right; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/* Pages */
.ArticlePage {
  background: url("https://assets.cmcmarkets.com/images/background_grey-bg.png") center top no-repeat; }

/* LAYOUT */
/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*.Section {
  padding: 3.5rem 2.5em;
  @media(min-width: $mobile_landscape) {
    padding: 6.5em 2.5em;
  }
  &-narrow {
    @media(min-width: $mobile_landscape) {
      padding: 3.5rem 2.5em;
    }
  }
}*/
.container-fluid {
  /*  margin-right: auto;
  margin-left: auto;
  padding-left: 6px;
  padding-right: 6px;*/
  /*  @media (min-width:$desktop) {
    padding-left: 3em;
    padding-right: 3em;
  }*/ }
  .container-fluid:before, .container-fluid:after {
    content: " ";
    display: table; }
  .container-fluid:after {
    clear: both; }
  @media (max-width: 320px) {
    .container-fluid {
      padding-right: 10px;
      padding-left: 10px; } }
  @media (max-width: 480px) {
    .container-fluid {
      padding-left: 1.2em;
      padding-right: 1.2em; } }

.uppercase-link {
  text-transform: uppercase; }

.underline-link:hover {
  text-decoration: underline; }

@media (min-width: 768px) {
  .hide-tablet {
    display: none !important; } }

@media (max-width: 768px) {
  .hide-mobile {
    display: none !important; } }

.background-blue-light {
  background-color: #00c5e8; }

.background-blue-dark {
  background-color: #0a264d; }

.background-green-light {
  background-color: #1ab99f; }

.background-grey-darker {
  background-color: #979b9e; }

/* ELEMENTS */
/* It appears 'bakery_imports/cmc' was a dumping ground for quick fixes via the bakery - intergrate these styles into their relevant files and delete when empty */
/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
@media (max-width: 767px) {
  .hidden-xs {
    display: none !important; }
  .sm-text-center {
    text-align: center !important; }
  .at-custom-button-color .at-icon-wrapper {
    background-color: #FFF !important; }
  img.sm-text-center {
    margin-left: auto;
    margin-right: auto;
    display: block; } }

img.image-force-left {
  margin-left: -200px; }

img.image-force-left-large {
  margin-left: -350px; }

@media (min-width: 768px) and (max-width: 991px) {
  .hidden-sm {
    display: none !important; }
  .sm-text-center {
    text-align: center !important; }
  img.sm-text-center {
    margin-left: auto;
    margin-right: auto;
    display: block; } }

@media (max-width: 29.99em) {
  .Section .no-margin-xs img {
    margin: 0; }
  .Section .margin-top-xs img {
    margin-top: 5rem; } }

@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-md {
    display: none !important; } }

@media (min-width: 1200px) {
  .hidden-lg {
    display: none !important; } }

@media (min-width: 75em) {
  .CreateAccountPanel {
    float: right; } }

.text-center {
  text-align: center; }

.padding-none {
  padding: 0; }

p.intro {
  color: #0a264d;
  font-size: 1.375rem;
  line-height: 2.25rem; }

img.text-center {
  margin: 0 auto;
  display: block; }

/* Mega Nav Overrides */
.MegaMenu-parent-title {
  font-size: 2.2rem;
  line-height: 2.5rem; }

.GlobalHeader-overlay {
  background: transparent; }

.Section-img-no-bot-margin img {
  margin-bottom: 0 !important; }

.NavBar-level-1-list-item-link {
  text-transform: uppercase; }

.MegaMenu-nav-list-item-link:hover {
  padding-left: 0; }

/* End Mega Nav Overrides */
.text-left {
  text-align: left; }

.MarketAnalyst .ArticleBody-Copy h1, .MarketAnalyst .ArticleBody-Copy p {
  padding-left: 0; }

.ArticleMain .ArticleMetaShareTop .ShareBlock {
  bottom: auto;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: -0.4rem; }

.AsSeenOn h3 {
  text-transform: none; }

.padding-sm {
  padding-left: 4px;
  padding-right: 4px; }

.Section--padding-bottom {
  padding-bottom: 3rem; }

.hide {
  display: none; }

.text-right {
  text-align: right; }

.faq-topics li a.btn {
  text-align: left;
  border-radius: 0;
  -moz-border-radius: 0; }

.ArticleTrailer .ArticleTrailer-details, .ArticleTrailer p {
  text-align: left; }

.text-justify {
  text-align: justify; }

.img-responsive {
  max-width: 100%;
  height: auto;
  display: block;
  width: 100%; }

.SocialLinks li + li {
  padding-left: 2.5%; }

.Section--grey-light .Section,
.Section--grey-medium .Section,
.hero .Section {
  background: transparent; }

.height-auto {
  height: auto !important;
  min-height: 0 !important; }

.product-range-tabs .Carousel-mask {
  clear: both;
  padding-top: 3rem; }

.Section--no-padding-bottom {
  padding-bottom: 0; }

.Section.Section--no-padding-bottom {
  padding-bottom: 0; }

.single-product .MobileCreateAccount-panel:last-child {
  left: auto; }

.HelpSupport .row {
  background-color: #fff;
  border: 0; }

.HelpSupport .col-xs-12 {
  background: none;
  border: 0;
  border-top: 2px solid #f1f2f4;
  height: auto !important; }

.HelpSupport .HelpSupport--top-cell {
  height: auto;
  padding: 0 2rem; }

.HelpSupport .HelpSupport--button {
  position: static;
  -webkit-transform: none;
  transform: none; }

@media (min-width: 48em) {
  .HelpSupport .row {
    background: #fff url(data:image/gif;base64,R0lGODlhAQABAPAAAPHy9P///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==) 50% 0 repeat-y;
    background-size: 2px auto; }
  .HelpSupport .col-xs-12:nth-child(3n) {
    clear: both; } }

@media (min-width: 62em) {
  .HelpSupport .row {
    background-image: url(data:image/gif;base64,R0lGODlhAQABAPAAAPHy9P///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==), url(data:image/gif;base64,R0lGODlhAQABAPAAAPHy9P///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==), url(data:image/gif;base64,R0lGODlhAQABAPAAAPHy9P///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==);
    background-position: 25% 0, 50% 0, 75% 0;
    background-repeat: repeat-y, repeat-y, repeat-y;
    background-size: 2px auto, 2px auto, 2px auto; }
  .HelpSupport .col-xs-12:nth-child(3n) {
    clear: none; } }

#pageEditorToolbar .dropdown-menu li, #pageEditorToolbar .dropdown-menu li a {
  text-align: left; }

.MegaMenu-nav-list-item-link {
  text-transform: none !important; }

.ArticleMain .ArticleBody-Copy img.old {
  width: 75%;
  margin-left: auto;
  margin-right: auto;
  display: block; }

.padded {
  padding: 50px 30px; }

.spacer-50 {
  height: 50px;
  width: 100%;
  clear: both; }

.MarketAnalyst {
  padding-top: 6.5rem !important; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.font-ubuntu-light18 {
  font-family: ubuntulight,sans-serif;
  font-size: 18px;
  letter-spacing: .5pt;
  line-height: 2.687rem;
  text-transform: none; }

.font-ubuntu-light24 {
  font-family: ubuntulight,sans-serif;
  font-size: 24px;
  letter-spacing: .5pt;
  line-height: 2.687rem; }

.font-ubuntu-light34 {
  font-family: ubuntulight,sans-serif;
  font-size: 2.125rem;
  letter-spacing: .2rem;
  line-height: 2.687rem; }

.font-ubuntu-regular18 {
  font-family: ubunturegular,sans-serif;
  font-size: 18px;
  letter-spacing: .5pt;
  line-height: 2.687rem;
  text-transform: none; }

.font-ubuntu-bold11 {
  color: #0a264d;
  font-family: ubuntubold,sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4pt; }

.font-ubuntu-bold16 {
  color: #0a264d;
  font-family: ubuntubold,sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.4pt; }

.font-lato-reg18 {
  color: #333333;
  font-family: latoregular, sans-serif;
  font-size: 18px;
  text-transform: none; }

.font-lato-reg21 {
  color: #0a264d;
  font-family: latoregular, sans-serif;
  font-size: 21px;
  text-transform: none;
  letter-spacing: inherit; }

/*///////////////////////////////////////////////////////////

STYLE GUIDE TYPOGRAPHY 

Use the following in preference to the above
Classes based upon original style guide designations/names

////////////////////////////////////////////////////////////*/
.page-headline {
  font-family: ubuntubold,sans-serif;
  font-size: 34px;
  line-height: 42px;
  font-weight: 600;
  letter-spacing: 0.4pt; }

.article-listing-title {
  /* For styleguide: News Article Title (Carousel) : but it's not only for carousels or news! */
  color: #1b2429;
  font-family: ubuntubold,sans-serif;
  font-size: 1.125rem;
  letter-spacing: .04rem;
  line-height: 1.55rem;
  text-transform: none; }

.sub-sortable > .col-md-4 .article-listing-title,
.sub-sortable > .col-md-5 .article-listing-title,
.sub-sortable > .col-lg-4 .article-listing-title,
.sub-sortable > .col-lg-5 .article-listing-title {
  font-size: 1.45rem;
  line-height: 2rem; }

/*div[class*=”col-”],
div[class*=” col-”] {*/
/* Previous col classes can't get involved */
.sub-sortable > .col-md-6 .article-listing-title,
.sub-sortable > .col-md-7 .article-listing-title,
.sub-sortable > .col-md-8 .article-listing-title,
.sub-sortable > .col-md-9 .article-listing-title,
.sub-sortable > .col-md-10 .article-listing-title,
.sub-sortable > .col-md-11 .article-listing-title,
.sub-sortable > .col-md-12 .article-listing-title,
.sub-sortable > .col-lg-6 .article-listing-title,
.sub-sortable > .col-lg-7 .article-listing-title,
.sub-sortable > .col-lg-8 .article-listing-title,
.sub-sortable > .col-lg-9 .article-listing-title,
.sub-sortable > .col-lg-10 .article-listing-title,
.sub-sortable > .col-lg-11 .article-listing-title,
.sub-sortable > .col-lg-12 .article-listing-title {
  font-size: 1.6rem;
  line-height: 2.1rem; }

@media (min-width: 0px) and (max-width: 768px) {
  .sub-sortable > .col-md-6 .article-listing-title,
  .sub-sortable > .col-md-7 .article-listing-title,
  .sub-sortable > .col-md-8 .article-listing-title,
  .sub-sortable > .col-md-9 .article-listing-title,
  .sub-sortable > .col-md-10 .article-listing-title,
  .sub-sortable > .col-md-11 .article-listing-title,
  .sub-sortable > .col-md-12 .article-listing-title,
  .sub-sortable > .col-lg-6 .article-listing-title,
  .sub-sortable > .col-lg-7 .article-listing-title,
  .sub-sortable > .col-lg-8 .article-listing-title,
  .sub-sortable > .col-lg-9 .article-listing-title,
  .sub-sortable > .col-lg-10 .article-listing-title,
  .sub-sortable > .col-lg-11 .article-listing-title,
  .sub-sortable > .col-lg-12 .article-listing-title {
    font-size: 1.125rem;
    letter-spacing: .04rem;
    line-height: 1.55rem; } }

.article-meta {
  font-family: ubuntubold,sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4pt;
  line-height: 1.125rem;
  margin: 0; }
  .article-meta.-blue {
    color: #0a264d; }
  .article-meta.-medium-blue {
    color: #0069d2; }
  .article-meta.-light-blue {
    color: #00c5e8; }
  .article-meta.-green {
    color: #1ab99f; }
  .article-meta .article-meta-author:after {
    content: '';
    background: #1ab99f;
    border-radius: 100%;
    display: inline-block;
    height: 4px;
    margin: 0 .25rem 0 .5rem;
    position: relative;
    top: -2px;
    width: 4px; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/* Usage: add class .anchor-push to anchor element */
.anchor-push:before {
  display: block;
  content: " ";
  width: 0;
  margin-top: -150px;
  height: 150px;
  visibility: hidden; }

ul.faq li {
  position: static; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
div.breadcrumbs {
  width: 100%;
  z-index: 1;
  position: absolute; }
  div.breadcrumbs ul {
    margin: 0;
    padding: 0;
    min-width: 400px;
    background: none; }
    div.breadcrumbs ul li {
      position: relative;
      display: block;
      margin: 0;
      padding: 0 6px 0 9px;
      height: 20px;
      float: left; }
      @media (min-width: 480px) {
        div.breadcrumbs ul li {
          padding: 0 16px 0 20px; } }
      @media (min-width: 768px) {
        div.breadcrumbs ul li {
          height: auto; } }
      div.breadcrumbs ul li:first-child {
        padding-left: 0; }
        div.breadcrumbs ul li:first-child:before {
          display: none; }
      div.breadcrumbs ul li:before {
        content: "";
        display: block;
        position: absolute;
        width: 4px;
        height: 9px;
        top: 15px;
        left: 0;
        background: url("https://assets.cmcmarkets.com/images/breadcrumbs-arrow-dark.png") no-repeat 0; }
      div.breadcrumbs ul li a {
        display: block;
        float: left;
        line-height: 40px;
        text-transform: uppercase;
        font-size: 11px;
        text-decoration: none;
        color: #1b2429; }
        div.breadcrumbs ul li a:hover {
          text-decoration: underline; }
      div.breadcrumbs ul li:last-child a {
        color: #00c5e8; }
  div.breadcrumbs.dark {
    background: rgba(0, 0, 0, 0.08); }
    div.breadcrumbs.dark li:before {
      background: url("https://assets.cmcmarkets.com/images/breadcrumbs-arrow-light.png") no-repeat 0; }
    div.breadcrumbs.dark a {
      color: #fff; }
  div.breadcrumbs.grey {
    background: rgba(216, 216, 216, 0.1); }
    div.breadcrumbs.grey li:before {
      background: url("https://assets.cmcmarkets.com/images/breadcrumbs-arrow-dark.png") no-repeat 0; }
    div.breadcrumbs.grey a {
      color: #979b9e; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.appStoreButton {
  background: url(https://assets.cmcmarkets.com/images/apple-app-store.png) no-repeat center top;
  height: 46px;
  width: 156px; }

.googlePlayButton {
  background: url(https://assets.cmcmarkets.com/images/google-play.png) no-repeat center top;
  height: 46px;
  width: 156px; }

/* Button Off State Background Colours */
.btn-bg-blue-light {
  background-color: #00C5EB; }

.btn-bg-transparent {
  background-color: transparent; }

.btn-bg-blue-dark {
  background: #0a264d; }

.btn-bg-green {
  background: #29b9a0; }

.btn-bg-white {
  background: #fff; }

/* Button Text Colours */
.btn-white, .btn-white:visited {
  color: #FFFFFF; }

.btn-blue-light, .btn-blue-light:visited {
  color: #00C5EB; }

.btn-blue-dark, .btn-blue-dark:visited {
  color: #0a264d; }

.btn-grey-light, .btn-grey-light:visited {
  color: #f1f2f4; }

.btn-grey-dark, .btn-grey-dark:visited {
  color: #1b2429; }

/* Button Border Colours*/
.btn-bd-white, .btn-bd-blue-light, .btn-bd-blue-dark, .btn-bd-grey-light {
  border-width: 2px;
  border-style: solid; }

.btn-bd-white {
  border-color: #FFFFFF; }

.btn-bd-blue-light {
  border-color: #00C5EB; }

.btn-bd-blue-dark {
  border-color: #0a264d; }

.btn-bd-grey-light {
  border-color: #f1f2f4; }

.btn-bd-transparent {
  border-color: transparent; }

/* Button Hover */
.btn-on-white:hover, .btn-on-blue-light:hover, .btn-on-blue-dark:hover, .btn-on-grey-light:hover, .btn-on-green:hover {
  -webkit-transition: background-position 0.8s, color 0.5s, border-color 0.5s;
  -moz-transition: background-position 0.8s, color 0.5s, border-color 0.5s;
  transition: background-position 0.8s, color 0.5s, border-color 0.5s; }

.btn-on-white, .btn-on-blue-light, .btn-on-blue-dark, .btn-on-grey-light {
  background-image: url(https://assets.cmcmarkets.com/images/button-bg.png);
  -webkit-transition: background-position 0.5s, color 0.8s, border-color 0.8s;
  -moz-transition: background-position 0.5s, color 0.8s, border-color 0.8s;
  transition: background-position 0.5s, color 0.8s, border-color 0.8s;
  background-repeat: no-repeat; }

.btn-on-white {
  background-position: -500px 0px; }

.btn-on-blue-dark {
  background-position: -500px -100px; }

.btn-on-blue-light {
  background-position: -500px -200px; }

.btn-on-grey-light {
  background-position: -500px -300px; }

.btn-on-white:hover {
  color: #0a264d !important;
  background-position: 0px 0px;
  border-color: #FFF; }

.btn-on-blue-dark:hover {
  color: #FFF !important;
  background-position: 0px -100px;
  border-color: #0a264d; }

.btn-on-blue-light:hover {
  color: #fff !important;
  background-position: 0px -200px;
  border-color: #00C5EB; }

.btn-on-grey-light:hover {
  color: #1b2429 !important;
  background-position: 0px -300px;
  border-color: #f1f2f4; }

.button-large {
  font-size: 18px;
  padding: 15px 40px; }

/* New green button */
.button-green .Button {
  background: #4CC21C;
  background-image: -webkit-linear-gradient(325deg, transparent 0%, transparent 10%, #389910 10%, #389910 90%, transparent 90%);
  background-image: linear-gradient(130deg, transparent 0%, transparent 10%, #389910 10%, #389910 90%, transparent 90%);
  background-repeat: no-repeat;
  background-size: 160% 100%;
  background-position: 300% 0;
  border: 0;
  color: #fff;
  font-size: 1em;
  line-height: 1.2rem;
  margin: 0 auto;
  max-width: 495px;
  padding-bottom: 16px;
  padding-top: 12px;
  width: 100%; }
  .button-green .Button:hover {
    background-position: 50% 0; }
  @media (min-width: 30em) {
    .button-green .Button {
      line-height: 1.562rem; } }
  @media (min-width: 48em) {
    .button-green .Button {
      line-height: 1.2rem; } }
  @media (min-width: 62em) {
    .button-green .Button {
      line-height: 1.562rem; } }

.button-rw {
  margin-bottom: 5px !important; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.styled-select .flag, .address-manual .flag {
  background-image: url("https://assets.cmcmarkets.com/images/flag.png");
  background-repeat: no-repeat; }

.flag-ABW {
  background-position: 0 0; }

.flag-AFG {
  background-position: 0 -32px; }

.flag-AGO {
  background-position: 0 -64px; }

.flag-AIA {
  background-position: 0 -96px; }

.flag-ALA {
  background-position: 0 -128px; }

.flag-ALB {
  background-position: 0 -160px; }

.flag-AND {
  background-position: 0 -192px; }

.flag-ARE {
  background-position: 0 -224px; }

.flag-ARG {
  background-position: 0 -256px; }

.flag-ARM {
  background-position: 0 -288px; }

.flag-ASM {
  background-position: 0 -320px; }

.flag-ATA {
  background-position: 0 -352px; }

.flag-ATF {
  background-position: 0 -384px; }

.flag-ATG {
  background-position: 0 -416px; }

.flag-AUS, .flag-HMD {
  background-position: 0 -448px; }

.flag-AUT {
  background-position: 0 -480px; }

.flag-AZE {
  background-position: 0 -512px; }

.flag-BDI {
  background-position: 0 -544px; }

.flag-BEL {
  background-position: 0 -576px; }

.flag-BEN {
  background-position: 0 -608px; }

.flag-BFA {
  background-position: 0 -640px; }

.flag-BGD {
  background-position: 0 -672px; }

.flag-BGR {
  background-position: 0 -704px; }

.flag-BHR {
  background-position: 0 -736px; }

.flag-BHS {
  background-position: 0 -768px; }

.flag-BIH {
  background-position: 0 -800px; }

.flag-BLR {
  background-position: 0 -832px; }

.flag-BLZ {
  background-position: 0 -864px; }

.flag-BMU {
  background-position: 0 -896px; }

.flag-BOL {
  background-position: 0 -928px; }

.flag-BRA {
  background-position: 0 -960px; }

.flag-BRB {
  background-position: 0 -992px; }

.flag-BRN {
  background-position: 0 -1024px; }

.flag-BTN {
  background-position: 0 -1056px; }

.flag-BWA {
  background-position: 0 -1088px; }

.flag-CAF {
  background-position: 0 -1120px; }

.flag-CAN {
  background-position: 0 -1152px; }

.flag-CCK {
  background-position: 0 -1184px; }

.flag-CHE {
  background-position: 0 -1216px; }

.flag-CHL {
  background-position: 0 -1248px; }

.flag-CHN {
  background-position: 0 -1280px; }

.flag-CIV {
  background-position: 0 -1312px; }

.flag-CMR {
  background-position: 0 -1344px; }

.flag-COD {
  background-position: 0 -1376px; }

.flag-COG {
  background-position: 0 -1408px; }

.flag-COK {
  background-position: 0 -1440px; }

.flag-COL {
  background-position: 0 -1472px; }

.flag-COM {
  background-position: 0 -1504px; }

.flag-CPV {
  background-position: 0 -1536px; }

.flag-CRI {
  background-position: 0 -1568px; }

.flag-CUB {
  background-position: 0 -1600px; }

.flag-CUW {
  background-position: 0 -1632px; }

.flag-CXR {
  background-position: 0 -1664px; }

.flag-CYM {
  background-position: 0 -1696px; }

.flag-CYP {
  background-position: 0 -1728px; }

.flag-CZE {
  background-position: 0 -1760px; }

.flag-DEU {
  background-position: 0 -1792px; }

.flag-DJI {
  background-position: 0 -1824px; }

.flag-DMA {
  background-position: 0 -1856px; }

.flag-DNK {
  background-position: 0 -1888px; }

.flag-DOM {
  background-position: 0 -1920px; }

.flag-DZA {
  background-position: 0 -1952px; }

.flag-ECU {
  background-position: 0 -1984px; }

.flag-EGY {
  background-position: 0 -2016px; }

.flag-ERI {
  background-position: 0 -2048px; }

.flag-ESH {
  background-position: 0 -2080px; }

.flag-ESP {
  background-position: 0 -2112px; }

.flag-EST {
  background-position: 0 -2144px; }

.flag-ETH {
  background-position: 0 -2176px; }

.flag-FIN {
  background-position: 0 -2208px; }

.flag-FJI {
  background-position: 0 -2240px; }

.flag-FLK {
  background-position: 0 -2272px; }

.flag-FRA, .flag-GUF, .flag-GLP, .flag-MYT, .flag-REU, .flag-BLM, .flag-MAF, .flag-SPM {
  background-position: 0 -2304px; }

.flag-FRO {
  background-position: 0 -2336px; }

.flag-FSM {
  background-position: 0 -2368px; }

.flag-GAB {
  background-position: 0 -2400px; }

.flag-SHN, .flag-GBR {
  background-position: 0 -2432px; }

.flag-GEO {
  background-position: 0 -2464px; }

.flag-GGY {
  background-position: 0 -2496px; }

.flag-GHA {
  background-position: 0 -2528px; }

.flag-GIB {
  background-position: 0 -2560px; }

.flag-GIN {
  background-position: 0 -2592px; }

.flag-GMB {
  background-position: 0 -2624px; }

.flag-GNB {
  background-position: 0 -2656px; }

.flag-GNQ {
  background-position: 0 -2688px; }

.flag-GRC {
  background-position: 0 -2720px; }

.flag-GRD {
  background-position: 0 -2752px; }

.flag-GRL {
  background-position: 0 -2784px; }

.flag-GTM {
  background-position: 0 -2816px; }

.flag-GUM {
  background-position: 0 -2848px; }

.flag-GUY {
  background-position: 0 -2880px; }

.flag-HKG {
  background-position: 0 -2912px; }

.flag-HND {
  background-position: 0 -2944px; }

.flag-HRV {
  background-position: 0 -2976px; }

.flag-HTI {
  background-position: 0 -3008px; }

.flag-HUN {
  background-position: 0 -3040px; }

.flag-IDN {
  background-position: 0 -3072px; }

.flag-IMN {
  background-position: 0 -3104px; }

.flag-IND {
  background-position: 0 -3136px; }

.flag-IOT {
  background-position: 0 -3168px; }

.flag-IRL {
  background-position: 0 -3200px; }

.flag-IRN {
  background-position: 0 -3232px; }

.flag-IRQ {
  background-position: 0 -3264px; }

.flag-ISL {
  background-position: 0 -3296px; }

.flag-ISR {
  background-position: 0 -3328px; }

.flag-ITA {
  background-position: 0 -3360px; }

.flag-JAM {
  background-position: 0 -3392px; }

.flag-JEY {
  background-position: 0 -3424px; }

.flag-JOR {
  background-position: 0 -3456px; }

.flag-JPN {
  background-position: 0 -3488px; }

.flag-KAZ {
  background-position: 0 -3520px; }

.flag-KEN {
  background-position: 0 -3552px; }

.flag-KGZ {
  background-position: 0 -3584px; }

.flag-KHM {
  background-position: 0 -3616px; }

.flag-KIR {
  background-position: 0 -3648px; }

.flag-KNA {
  background-position: 0 -3680px; }

.flag-KOR {
  background-position: 0 -3712px; }

.flag-KWT {
  background-position: 0 -3744px; }

.flag-LAO {
  background-position: 0 -3776px; }

.flag-LBN {
  background-position: 0 -3808px; }

.flag-LBR {
  background-position: 0 -3840px; }

.flag-LBY {
  background-position: 0 -3872px; }

.flag-LCA {
  background-position: 0 -3904px; }

.flag-LIE {
  background-position: 0 -3936px; }

.flag-LKA {
  background-position: 0 -3968px; }

.flag-LSO {
  background-position: 0 -4000px; }

.flag-LTU {
  background-position: 0 -4032px; }

.flag-LUX {
  background-position: 0 -4064px; }

.flag-LVA {
  background-position: 0 -4096px; }

.flag-MAC {
  background-position: 0 -4128px; }

.flag-MAR {
  background-position: 0 -4160px; }

.flag-MCO {
  background-position: 0 -4192px; }

.flag-MDA {
  background-position: 0 -4224px; }

.flag-MDG {
  background-position: 0 -4256px; }

.flag-MDV {
  background-position: 0 -4288px; }

.flag-MEX {
  background-position: 0 -4320px; }

.flag-MHL {
  background-position: 0 -4352px; }

.flag-MKD {
  background-position: 0 -4384px; }

.flag-MLI {
  background-position: 0 -4416px; }

.flag-MLT {
  background-position: 0 -4448px; }

.flag-MMR {
  background-position: 0 -4480px; }

.flag-MNE {
  background-position: 0 -4512px; }

.flag-MNG {
  background-position: 0 -4544px; }

.flag-MNP {
  background-position: 0 -4576px; }

.flag-MOZ {
  background-position: 0 -4608px; }

.flag-MRT {
  background-position: 0 -4640px; }

.flag-MSR {
  background-position: 0 -4672px; }

.flag-MTQ {
  background-position: 0 -4704px; }

.flag-MUS {
  background-position: 0 -4736px; }

.flag-MWI {
  background-position: 0 -4768px; }

.flag-MYS {
  background-position: 0 -4800px; }

.flag-NAM {
  background-position: 0 -4832px; }

.flag-NCL {
  background-position: 0 -4864px; }

.flag-NER {
  background-position: 0 -4896px; }

.flag-NFK {
  background-position: 0 -4928px; }

.flag-NGA {
  background-position: 0 -4960px; }

.flag-NIC {
  background-position: 0 -4992px; }

.flag-NIU {
  background-position: 0 -5024px; }

.flag-BES, .flag-NLD {
  background-position: 0 -5056px; }

.flag-BVT, .flag-NOR, .flag-SJM {
  background-position: 0 -5088px; }

.flag-NPL {
  background-position: 0 -5120px; }

.flag-NRU {
  background-position: 0 -5152px; }

.flag-NZL {
  background-position: 0 -5184px; }

.flag-OMN {
  background-position: 0 -5216px; }

.flag-PAK {
  background-position: 0 -5248px; }

.flag-PAN {
  background-position: 0 -5280px; }

.flag-PCN {
  background-position: 0 -5312px; }

.flag-PER {
  background-position: 0 -5344px; }

.flag-PHL {
  background-position: 0 -5376px; }

.flag-PLW {
  background-position: 0 -5408px; }

.flag-PNG {
  background-position: 0 -5440px; }

.flag-POL {
  background-position: 0 -5472px; }

.flag-PRI {
  background-position: 0 -5504px; }

.flag-PRK {
  background-position: 0 -5536px; }

.flag-PRT {
  background-position: 0 -5568px; }

.flag-PRY {
  background-position: 0 -5600px; }

.flag-PSE {
  background-position: 0 -5632px; }

.flag-PYF {
  background-position: 0 -5664px; }

.flag-QAT {
  background-position: 0 -5696px; }

.flag-ROU {
  background-position: 0 -5728px; }

.flag-RUS {
  background-position: 0 -5760px; }

.flag-RWA {
  background-position: 0 -5792px; }

.flag-SAU {
  background-position: 0 -5824px; }

.flag-SDN {
  background-position: 0 -5856px; }

.flag-SEN {
  background-position: 0 -5888px; }

.flag-SGP {
  background-position: 0 -5920px; }

.flag-SGS {
  background-position: 0 -5952px; }

.flag-SLB {
  background-position: 0 -5984px; }

.flag-SLE {
  background-position: 0 -6016px; }

.flag-SLV {
  background-position: 0 -6048px; }

.flag-SMR {
  background-position: 0 -6080px; }

.flag-SOM {
  background-position: 0 -6112px; }

.flag-SRB {
  background-position: 0 -6144px; }

.flag-SSD {
  background-position: 0 -6176px; }

.flag-STP {
  background-position: 0 -6208px; }

.flag-SUR {
  background-position: 0 -6240px; }

.flag-SVK {
  background-position: 0 -6272px; }

.flag-SVN {
  background-position: 0 -6304px; }

.flag-SWE {
  background-position: 0 -6336px; }

.flag-SWZ {
  background-position: 0 -6368px; }

.flag-SXM {
  background-position: 0 -6400px; }

.flag-SYC {
  background-position: 0 -6432px; }

.flag-SYR {
  background-position: 0 -6464px; }

.flag-TCA {
  background-position: 0 -6496px; }

.flag-TCD {
  background-position: 0 -6528px; }

.flag-TGO {
  background-position: 0 -6560px; }

.flag-THA {
  background-position: 0 -6592px; }

.flag-TJK {
  background-position: 0 -6624px; }

.flag-TKL {
  background-position: 0 -6656px; }

.flag-TKM {
  background-position: 0 -6688px; }

.flag-TLS {
  background-position: 0 -6720px; }

.flag-TON {
  background-position: 0 -6752px; }

.flag-TTO {
  background-position: 0 -6784px; }

.flag-TUN {
  background-position: 0 -6816px; }

.flag-TUR {
  background-position: 0 -6848px; }

.flag-TUV {
  background-position: 0 -6880px; }

.flag-TWN {
  background-position: 0 -6912px; }

.flag-TZA {
  background-position: 0 -6944px; }

.flag-UGA {
  background-position: 0 -6976px; }

.flag-UKR {
  background-position: 0 -7008px; }

.flag-URY {
  background-position: 0 -7040px; }

.flag-USA, .flag-UMI {
  background-position: 0 -7072px; }

.flag-UZB {
  background-position: 0 -7104px; }

.flag-VAT {
  background-position: 0 -7136px; }

.flag-VCT {
  background-position: 0 -7168px; }

.flag-VEN {
  background-position: 0 -7200px; }

.flag-VGB {
  background-position: 0 -7232px; }

.flag-VIR {
  background-position: 0 -7264px; }

.flag-VNM {
  background-position: 0 -7296px; }

.flag-VUT {
  background-position: 0 -7328px; }

.flag-WLF {
  background-position: 0 -7360px; }

.flag-WSM {
  background-position: 0 -7392px; }

.flag-YEM {
  background-position: 0 -7424px; }

.flag-ZAF {
  background-position: 0 -7456px; }

.flag-ZMB {
  background-position: 0 -7488px; }

.flag-ZWE {
  background-position: 0 -7520px; }

.styled-select {
  height: 64px;
  outline: none;
  font-size: 16px; }

.pre-app .styled-select {
  width: 100%; }

.styled-select .btn {
  border-color: #C5CACF;
  border-radius: 0;
  font-size: 16px;
  height: 46px;
  line-height: 46px;
  outline: none !important;
  padding: 0 35px 0 0;
  -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; }

.styled-select .btn span.filter-option {
  -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; }

.has-single .styled-select .btn,
.styled-select .btn .filter-option {
  border-left: 6px solid #C5CACF;
  padding-left: 20px;
  color: #58585a;
  height: 46px;
  line-height: 46px; }

.styled-select .btn .caret {
  border-bottom-color: #C5CACF;
  border-top-color: #C5CACF;
  border-width: 6px;
  right: 20px !important; }

.styled-select .btn:focus {
  border-color: #00c5e8;
  background-color: #f9feff;
  -webkit-box-shadow: none;
  box-shadow: none; }

.styled-select .btn:focus span.filter-option {
  border-color: #00c5e8; }

.styled-select .btn:hover, .styled-select .btn:active {
  background-color: #FFF;
  border-color: #979b9e;
  -webkit-box-shadow: none;
  box-shadow: none; }

.styled-select .btn:hover .filter-option, .styled-select .btn:active .filter-option {
  border-color: #979b9e; }

.styled-select .btn:hover .caret, .styled-select .btn:active .caret {
  border-top-color: #333333; }

.styled-select.open .btn, .styled-select.open .btn:hover, .styled-select.open .btn:active, .styled-select.open .btn:focus {
  background-color: #f9feff;
  border-color: #00c5e8;
  -webkit-box-shadow: none;
  box-shadow: none; }

.styled-select .flag {
  height: 32px;
  margin-right: 6px;
  vertical-align: middle;
  width: 32px;
  top: -2px;
  display: inline-block; }

.styled-select .dropdown-menu {
  width: 100%;
  margin: 0;
  padding: 0 12px 10px;
  background: none;
  border-radius: 0;
  border: 0;
  overflow-x: hidden;
  -webkit-box-shadow: none;
  box-shadow: none; }

.styled-select .dropdown-menu.inner {
  background: #FFF;
  -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.2) !important;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2) !important; }

.styled-select .dropdown-menu.inner li {
  border: 1px solid #C5CACF;
  border-top: 0;
  color: #58585a; }

.styled-select .dropdown-menu.inner li.selected {
  border: 0;
  margin-top: -1px; }

.styled-select .dropdown-menu.inner li.active a, .styled-select .dropdown-menu.inner li.selected a {
  background-color: #00c5e8;
  color: #FFF; }

.styled-select .dropdown-menu.inner li a, .styled-select .dropdown-menu.inner li.no-results {
  line-height: 36px;
  outline: none !important; }

.styled-select.bootstrap-select .bs-searchbox {
  padding: 0; }

.styled-select.bootstrap-select .bs-searchbox input {
  position: absolute;
  border: 0 none;
  top: -46px;
  left: 0;
  z-index: -1; }

.styled-select.bootstrap-select .no-results {
  margin: 0;
  padding: 3px 20px; }

.styled-select.completed .btn .filter-option {
  border-left: 7px solid #00c5e8;
  height: 64px;
  line-height: 64px;
  margin: -1px 0 0 -1px; }

.has-error .styled-select.completed .btn .filter-option {
  border-left-color: #D0021B; }

.styled-select.completed .btn:hover .filter-option {
  border-left-width: 6px;
  height: 62px;
  line-height: 62px;
  margin: 0; }

.styled-select.disabled .btn, .styled-select.completed.disabled .btn, .styled-select.has-single .btn {
  background-color: #f9f9f9;
  border-color: #D8D8D8;
  color: #D8D8D8; }

.styled-select.disabled .btn .filter-option, .styled-select.completed.disabled .btn .filter-option, .styled-select.has-single .btn .filter-option {
  border-left-color: #D8D8D8; }

.styled-select.disabled .btn:hover .caret, .styled-select.completed.disabled .btn:hover .caret, .styled-select.has-single .btn:hover .caret {
  border-bottom-color: #C5CACF;
  border-top-color: #C5CACF; }

.styled-select.has-single .btn {
  cursor: default; }

.styled-select.has-single .btn .filter-option {
  border-left-color: transparent; }

.styled-select.has-single .btn .bs-caret {
  display: none; }

.styled-select ~ .error-msg-wrapper .btn, .styled-select.error .btn {
  border-color: #D0021B; }

.styled-select ~ .error-msg-wrapper .btn .filter-option, .styled-select.error .btn .filter-option {
  border-left-color: #D0021B; }

@media (max-width: 460px) {
  .styled-select .btn {
    padding-right: 20px; }
  .styled-select .btn .filter-option {
    padding-left: 10px; }
  .styled-select .btn .caret {
    right: 6px !important; } }

@media (max-width: 991px) {
  .styled-select {
    height: 46px; }
  .styled-select .btn {
    height: 46px;
    line-height: 44px; }
  .styled-select .btn .filter-option {
    height: 44px;
    line-height: 44px; }
  .styled-select.completed .btn .filter-option {
    height: 46px;
    line-height: 46px; }
  .styled-select.completed .btn:hover .filter-option {
    height: 44px;
    line-height: 44px; } }

.styled-select.btn-group {
  width: 100%; }

.styled-select.dropdown-header span {
  padding-left: 20px; }

.form-group-narrow .styled-select > .open {
  position: absolute;
  width: auto;
  max-width: 85vw; }

.live-app #dialcode + .styled-select small {
  font-size: inherit;
  color: inherit; }

.live-app #dialcode + .styled-select .text {
  width: 3.5em; }

/*# sourceMappingURL=main.css.map */
/* CSS loader spinner styles */
.spinner-circle {
  margin: 100px auto;
  width: 40px;
  height: 40px;
  position: relative; }
  .spinner-circle .spinner-child {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0; }
  .spinner-circle .spinner-child:before {
    content: '';
    display: block;
    margin: 0 auto;
    width: 15%;
    height: 15%;
    background-color: #00c5e8;
    border-radius: 100%;
    -webkit-animation: spinner-circleBounceDelay 1.2s infinite ease-in-out both;
    animation: spinner-circleBounceDelay 1.2s infinite ease-in-out both; }
  .spinner-circle .spinner-circle2 {
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg); }
  .spinner-circle .spinner-circle3 {
    -webkit-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg); }
  .spinner-circle .spinner-circle4 {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg); }
  .spinner-circle .spinner-circle5 {
    -webkit-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    transform: rotate(120deg); }
  .spinner-circle .spinner-circle6 {
    -webkit-transform: rotate(150deg);
    -ms-transform: rotate(150deg);
    transform: rotate(150deg); }
  .spinner-circle .spinner-circle7 {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg); }
  .spinner-circle .spinner-circle8 {
    -webkit-transform: rotate(210deg);
    -ms-transform: rotate(210deg);
    transform: rotate(210deg); }
  .spinner-circle .spinner-circle9 {
    -webkit-transform: rotate(240deg);
    -ms-transform: rotate(240deg);
    transform: rotate(240deg); }
  .spinner-circle .spinner-circle10 {
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg); }
  .spinner-circle .spinner-circle11 {
    -webkit-transform: rotate(300deg);
    -ms-transform: rotate(300deg);
    transform: rotate(300deg); }
  .spinner-circle .spinner-circle12 {
    -webkit-transform: rotate(330deg);
    -ms-transform: rotate(330deg);
    transform: rotate(330deg); }
  .spinner-circle .spinner-circle2:before {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s; }
  .spinner-circle .spinner-circle3:before {
    -webkit-animation-delay: -1s;
    animation-delay: -1s; }
  .spinner-circle .spinner-circle4:before {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s; }
  .spinner-circle .spinner-circle5:before {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s; }
  .spinner-circle .spinner-circle6:before {
    -webkit-animation-delay: -0.7s;
    animation-delay: -0.7s; }
  .spinner-circle .spinner-circle7:before {
    -webkit-animation-delay: -0.6s;
    animation-delay: -0.6s; }
  .spinner-circle .spinner-circle8:before {
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s; }
  .spinner-circle .spinner-circle9:before {
    -webkit-animation-delay: -0.4s;
    animation-delay: -0.4s; }
  .spinner-circle .spinner-circle10:before {
    -webkit-animation-delay: -0.3s;
    animation-delay: -0.3s; }
  .spinner-circle .spinner-circle11:before {
    -webkit-animation-delay: -0.2s;
    animation-delay: -0.2s; }
  .spinner-circle .spinner-circle12:before {
    -webkit-animation-delay: -0.1s;
    animation-delay: -0.1s; }

@-webkit-keyframes spinner-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0); }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1); } }

@keyframes spinner-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0); }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1); } }

/* Miscellaneuos / unsorted styles misplaced and homeless : please integrate to correct locatiion */
.main-title,
.header h1 {
  /* Was in elements/fonts.scss : requires integration to correct location */
  margin-top: 50px; }

/* BUTTONS */
.btn-twitter {
  display: inline-block;
  position: relative;
  padding: 7px 8px 7px 28px;
  border: 1px solid #C5CACF;
  border-radius: 4px;
  /*    @include background-image(linear-gradient(#FEFEFE, $color-light-grey-2));*/
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgi…pZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==");
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f1f2f4), color-stop(100%, #dedede));
  background-image: -moz-linear-gradient(#f1f2f4, #dedede);
  background-image: -webkit-linear-gradient(#f1f2f4, #dedede);
  background-image: linear-gradient(#f1f2f4, #dedede);
  color: #333333;
  line-height: 12px;
  font-family: latobold, sans-serif;
  text-decoration: none;
  text-shadow: 1px 1px 0 #fff;
  font-size: 12px;
  font-weight: 600; }
  .btn-twitter:hover {
    color: #333333;
    background: #D8D8D8; }
  .btn-twitter:before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 5px;
    top: 5px;
    background: url("https://assets.cmcmarkets.com/images/twitter_bird_logo_2012.svg") 0 0 no-repeat;
    background-size: contain; }

/* tiny fixes around */
.twitter h2 {
  margin-bottom: 4px; }

.subscribe {
  display: block;
  margin-bottom: 20px; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/* GREEN/OLIVE UNKOWN PURPOSE: ARE THESE USED? */
.form-control {
  display: block;
  width: 100%;
  height: 40px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857;
  color: #58585a;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; }
  .form-control:focus {
    border-color: #00c5e8;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); }

.main-form {
  position: relative;
  /*@media (min-width: $screen-sm-min) {
        > .col-sm-6 {
            &.left {
                clear: left;
            }
            &.right {
                float: right;
            }
        }
    }*/
  /*@media (max-width: $screen-xs-max) {
        padding-bottom: 9px;
        padding-top: 0;

        .fullwidth-xs & {
            border-left: 0;
            border-right: 0;
        }

        .losses {
            padding-top: 8px;
        }
    }*/ }
  .main-form h2 {
    color: #333333;
    font-size: 22px;
    font-weight: normal;
    margin: 13px 0 9px; }
  .main-form p {
    color: #58585a; }
  .main-form label,
  .main-form fieldset .row fieldset legend {
    color: #00c5e8;
    font-weight: normal;
    margin-bottom: 3px;
    padding-top: 0;
    display: block;
    border: 0; }
  .main-form.Section--grey-light {
    padding: 40px; }
  .main-form.highlight-box {
    padding: 42px 9px 20px; }
  .main-form .form-group {
    margin-bottom: 14px; }
  .main-form .panel-group + {
    margin-bottom: 0; }
  .main-form .panel-body {
    padding: 6px 16px 30px;
    /*@media ( min-width: getBreakPoint('mobile-l') ) {
            padding: 6px 32px 30px;
        }
        @media (min-width: $screen-sm-max) {
            padding: 6px 60px 30px;
        }*/ }
    .main-form .panel-body > fieldset legend {
      /*@extend %standard-header;*/
      border: 0;
      color: #58585a;
      margin-bottom: 10px;
      padding-top: 30px; }
    .main-form .panel-body .declaration-fieldset {
      background: #e8e9ed;
      border: 1px solid #D8D8D8;
      margin-top: 11px;
      /*@media ( max-width: getBreakPoint('mobile-l') ) {
                margin-bottom: -1 * ( $panelBottomPadding + 1 ); // pulls up the bottom of the panel
                margin-top: 0;
            }*/ }
      .main-form .panel-body .declaration-fieldset .inner {
        background: #fff;
        border: 1px solid #D8D8D8;
        margin: 16px 0 9px 0;
        padding: 13px 20px 0; }
      .main-form .panel-body .declaration-fieldset ol {
        list-style: none;
        margin: 0;
        padding: 0;
        counter-reset: liCounter; }
        .main-form .panel-body .declaration-fieldset ol li {
          color: #58585a; }
        .main-form .panel-body .declaration-fieldset ol > li:before {
          content: counter(liCounter) ".";
          counter-increment: liCounter;
          padding-right: 16px;
          float: left;
          /*@extend %text;*/ }
        .main-form .panel-body .declaration-fieldset ol p {
          margin: 0 0 10px 0; }
        .main-form .panel-body .declaration-fieldset ol ul {
          list-style-position: outside;
          /*@extend %text;*/
          padding: 0 0 20px 16px;
          /*list-style-type: disc;*/ }
          .main-form .panel-body .declaration-fieldset ol ul li {
            padding-left: 10px; }
  .main-form .radio-to-btns-tick input + label {
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; }
  .main-form input[type="email"],
  .main-form input[type="text"],
  .main-form input[type="password"],
  .main-form .input-group-addon {
    border: 1px solid #C5CACF;
    border-radius: 0;
    color: #58585a;
    height: 46px;
    line-height: 46px; }
  .main-form input[type="email"]:hover,
  .main-form input[type="text"]:hover,
  .main-form input[type="password"]:hover,
  .main-form .input-group:hover {
    border-color: #979b9e;
    box-shadow: none; }
  .main-form input[type="email"]:focus,
  .main-form input[type="text"]:focus,
  .main-form input[type="password"]:focus,
  .main-form .input-group.form-control.focus {
    border-color: #00c5e8;
    background-color: #f9feff;
    box-shadow: none; }
  .main-form input[type="email"],
  .main-form input[type="text"],
  .main-form input[type="password"] {
    border-left-width: 7px; }
  .main-form input[type="text"][disabled] {
    background-color: #f9f9f9;
    border-color: #D8D8D8;
    box-shadow: none;
    color: #D8D8D8; }
  .main-form input[type="email"],
  .main-form input[type="text"],
  .main-form input[type="password"] {
    height: 46px;
    line-height: 46px; }
  .main-form input.hasError, .main-form select.hasError {
    border-color: #D0021B; }
    .main-form input.hasError:focus, .main-form input.hasError:hover, .main-form select.hasError:focus, .main-form select.hasError:hover {
      border-color: #9d0214; }
  .main-form .fieldset-description {
    padding-bottom: 9px; }
  .main-form .input-label {
    color: #00c5e8; }
  .main-form .form-highlight {
    background: #fefff2;
    border: 1px solid #E9ED96;
    margin-top: 19px;
    margin-bottom: 19px;
    /* @media (max-width: getBreakPoint('mobile-l')) {
             border-bottom-width: 0;
         }*/ }
    .main-form .form-highlight .checkbox-info {
      background: #E9ED96;
      border-radius: 2px;
      margin-top: 20px;
      padding: 23px; }
      .main-form .form-highlight .checkbox-info label {
        margin: 0; }
  .main-form .form-highlight,
  .main-form .declaration-fieldset {
    margin-left: -27px;
    margin-right: -27px;
    padding: 7px 27px 30px;
    /*@media (max-width: $screen-sm-max) {
            margin-left: -17px;
            margin-right: -17px;
            padding: 0 16px 16px;
            .inner {
                margin-top: 20px;
            }
        }*/
    /*@media (max-width: getBreakPoint('mobile-l')) {
            margin-bottom: 0;
            .inner {
                margin-top: 16px;
            }
        }*/ }
    .main-form .form-highlight legend,
    .main-form .declaration-fieldset legend {
      padding-top: 0 !important; }
    .main-form .form-highlight .inner,
    .main-form .declaration-fieldset .inner {
      margin: 30px 0 9px 0;
      padding: 13px 20px 0; }
  .main-form .checkbox-info label {
    position: relative;
    margin: 10px 0 20px;
    padding-left: 30px;
    color: #58585a;
    cursor: pointer; }
    .main-form .checkbox-info label:before {
      content: '';
      position: absolute;
      height: 20px;
      width: 20px;
      top: 0;
      left: 0;
      background-color: #fff;
      border-radius: 3px;
      border: 1px solid #D8D8D8; }
  .main-form .checkbox-info input {
    left: -9999px;
    position: absolute; }
    .main-form .checkbox-info input:focus + label:before {
      border: 1px solid #00c5e8;
      background-color: #f9feff; }
    .main-form .checkbox-info input:checked + label:before {
      border: 1px solid #00c5e8; }
  .main-form .checkbox-info.disabled label {
    color: #D8D8D8;
    cursor: not-allowed; }
  .main-form .losses {
    padding-top: 14px; }
  .main-form .error-msg-wrapper {
    background: #fff3f3;
    border: 1px solid #D0021B;
    margin: 10px 10px 0;
    padding: 20px 20px 10px; }
  .main-form .form-group-narrow {
    margin-left: -6px;
    margin-right: -6px; }
    .main-form .form-group-narrow label,
    .main-form .form-group-narrow fieldset legend,
    .main-form .form-group-narrow p {
      margin-left: -8px; }
    .main-form .form-group-narrow .form-group.col-sm-3, .main-form .form-group-narrow .form-group.col-sm-4, .main-form .form-group-narrow .form-group.col-sm-6, .main-form .form-group-narrow .form-group.col-sm-8, .main-form .form-group-narrow .form-group.col-xs-3, .main-form .form-group-narrow .form-group.col-xs-4, .main-form .form-group-narrow .form-group.col-xs-5, .main-form .form-group-narrow .form-group.col-xs-6, .main-form .form-group-narrow .form-group.col-xs-7, .main-form .form-group-narrow .form-group.col-xs-8 {
      padding-right: 6px;
      padding-left: 6px; }
  .main-form .employment-options {
    display: none; }
  .main-form #gender-fg {
    display: none; }

.ie8 .main-form label.focus:before {
  border: 1px solid #00c5e8; }

.ie8 .main-form label.checked:before {
  border: 1px solid #00c5e8; }

/* BOX Like Radio Buttons*/
/* hide input */
input.radio:empty {
  margin-left: -9999px; }
  input.radio:empty ~ label {
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
    position: relative;
    float: left;
    width: 100%;
    padding: 5px 10px;
    margin: 0;
    background-color: #fff;
    color: #00c5e8;
    text-align: center;
    line-height: 2.5em;
    cursor: pointer;
    border: 1px solid #C5CACF;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }

input.radio:checked ~ label {
  color: #fff;
  background-color: #00c5e8;
  border: 1px solid #00c5e8; }

/* CAPTCHA MOBILE STYLES */
@media (max-width: 480px) {
  #rc-imageselect, .g-recaptcha {
    -moz-transform: scale(0.7);
    -o-transform: scale(0.7);
    -ms-transform: scale(0.7);
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0; } }

.captchaError {
  border: 1px solid #D0021B; }

.text-blue {
  color: #00c5e8; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.fullscreen-container {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  padding: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.8); }
  .fullscreen-container .container-fluid {
    padding: 0;
    width: 98%;
    max-width: 98%;
    position: relative; }
  .fullscreen-container .fullscreen-toggle {
    margin: 5px 0; }

.fullscreen-active {
  overflow: hidden; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.pagination {
  display: inline-block;
  margin: 10px 0;
  padding: 0; }
  .pagination li {
    display: inline;
    margin: 0;
    padding: 0; }
    .pagination li:before {
      display: none; }
    .pagination li.current a,
    .pagination li a:hover {
      font-weight: bold; }
      .pagination li.current a:after,
      .pagination li a:hover:after {
        content: "";
        position: absolute;
        width: 14px;
        bottom: -4px;
        left: 50%;
        margin-left: -7px;
        border-bottom: 2px solid #00c5e8;
        font-weight: bold; }
    .pagination li.prev a:hover:after, .pagination li.next a:hover:after {
      display: none; }
    .pagination li.prev a {
      padding-left: 20px;
      background: url("https://assets.cmcmarkets.com/images/icn-faq-arrow-left.png") no-repeat 0 50%; }
    .pagination li.next a {
      padding-right: 20px;
      background: url("https://assets.cmcmarkets.com/images/icn-faq-arrow.png") no-repeat 100% 50%; }
  .pagination a {
    position: relative;
    float: left;
    padding: 6px 12px;
    line-height: 12px;
    font-size: 20px; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.scroll-to-top {
  display: none; }

.scrollToTop {
  /* added to body tag */ }
  .scrollToTop .container-fluid.relative {
    position: relative; }
  .scrollToTop .scroll-to-top {
    position: fixed;
    width: 134px;
    height: 134px;
    right: 100px;
    bottom: 200px;
    z-index: 1; }
    .scrollToTop .scroll-to-top a {
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      padding-top: 60px;
      background: rgba(240, 240, 240, 0.3) url("https://assets.cmcmarkets.com/images/icn-scrolltotop.png") no-repeat 50% 34px;
      border: 1px solid #D8D8D8;
      color: #333333;
      text-align: center;
      transition: background 0.2s; }
      .scrollToTop .scroll-to-top a:hover {
        background-color: rgba(240, 240, 240, 0.5); }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
table.which-account-head caption:before, .mob-friendly-table th:last-child:before, .mob-friendly-table caption:last-child:before, .mob-friendly-table.no-fancy-head caption:before {
  background: url("https://assets.cmcmarkets.com/images/icn-faq-arrow-down.png") no-repeat 0 50%;
  content: '';
  display: block;
  height: 18px;
  margin-top: -5px;
  position: absolute;
  right: 40px;
  top: 48%;
  width: 15px;
  -webkit-transition: transform 0.3s ease-in-out;
  -moz-transition: transform 0.3s ease-in-out;
  -ms-transition: transform 0.3s ease-in-out;
  -o-transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  -moz-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg); }

table.which-account-head {
  margin: 0;
  border: none; }
  table.which-account-head caption {
    display: none;
    position: relative;
    padding: 1.5rem 1.8rem;
    background: #e8e9ed;
    text-align: left;
    color: #1b2429;
    font-size: 18px;
    font-family: "latoregular", sans-serif;
    cursor: pointer; }
  table.which-account-head.close caption {
    cursor: pointer; }
    table.which-account-head.close caption:before {
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg); }
  table.which-account-head.close tr.title-caption {
    display: none; }
  table.which-account-head tr {
    border: none; }
  table.which-account-head td {
    margin: 0;
    padding: 0;
    border: none;
    vertical-align: bottom;
    background: #fff; }
    table.which-account-head td div {
      margin: 1px;
      padding: 25px 0;
      border-top-left-radius: 6px;
      border-top-right-radius: 6px; }
  table.which-account-head tr.title-caption {
    background: none; }
    table.which-account-head tr.title-caption td {
      background: #f9f9f9;
      border-left: 1px dashed #00c5e8;
      padding: 1rem 1.8rem;
      vertical-align: middle; }
      table.which-account-head tr.title-caption td.empty {
        background: none;
        border-left: none; }
  table.which-account-head h3, table.which-account-head p {
    margin: 0;
    padding: 0;
    color: #fff;
    text-align: center;
    text-transform: none; }
  table.which-account-head h3 {
    font-size: 20px;
    line-height: 24px; }
  table.which-account-head p {
    font-size: 11px;
    line-height: 12px; }
  table.which-account-head .SBA div {
    /*@include background-image(linear-gradient(to right, #00BBDE, #0099DB));*/
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgi…pZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==");
    background-size: 100%;
    background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #00c5e8), color-stop(100%, #0099db));
    background-image: -moz-linear-gradient(left, #00c5e8, #0099db);
    background-image: -webkit-linear-gradient(left, #00c5e8, #0099db);
    background-image: linear-gradient(to right, #00c5e8, #0099db); }
    table.which-account-head .SBA div h3 {
      padding-bottom: 10px; }
  table.which-account-head .CFD div {
    background: #1b2429; }
  table.which-account-head .CA div {
    /*@include background-image(linear-gradient(to right, #0A264E, #071B36));*/
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgi…pZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==");
    background-size: 100%;
    background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #0a264d), color-stop(100%, #071b36));
    background-image: -moz-linear-gradient(left, #0a264d, #071b36);
    background-image: -webkit-linear-gradient(left, #0a264d, #071b36);
    background-image: linear-gradient(to right, #0a264d, #071b36); }
  table.which-account-head .KO div {
    /*@include background-image(linear-gradient(-135deg, #EFEFEF 0%, #EBEBEB 100%));*/
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgi…pZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==");
    background-size: 100%;
    background-image: -moz-linear-gradient(225deg, #efefef 0%, #e8e9ed 100%);
    background-image: -webkit-linear-gradient(225deg, #efefef 0%, #e8e9ed 100%);
    background-image: linear-gradient(-135deg, #efefef 0%, #e8e9ed 100%);
    border: 1px solid #D8D8D8;
    padding: 24px 0; }
    table.which-account-head .KO div h3 {
      color: #00c5e8; }
  table.which-account-head .light-blue div {
    background: #00c5e8; }
  table.which-account-head .dark-blue div {
    background: #0a264d; }
  table.which-account-head .dark-grey div {
    background: #1b2429; }
  table.which-account-head tr.mob-title {
    display: none; }

@media (max-width: 47.99em) {
  table.which-account-head tr.large-title {
    display: none; }
  table.which-account-head tr.title-caption {
    border: 1px solid #e8e9ed;
    border-bottom: 2px solid #979b9e;
    border-top: 0; }
    table.which-account-head tr.title-caption td {
      border-left: 0; }
  table.which-account-head caption {
    display: block; } }

.which-account-table th {
  white-space: nowrap; }

.mob-friendly-table {
  margin-bottom: 2px;
  border-bottom: 2px solid #fff;
  overflow: hidden;
  table-layout: fixed; }
  .mob-friendly-table:last-child {
    margin-bottom: 3rem; }
  .mob-friendly-table th, .mob-friendly-table caption {
    position: relative;
    background: #e8e9ed;
    padding: 1.5rem 1.8rem;
    color: #1b2429;
    font-size: 18px;
    text-align: left;
    font-family: "latoregular", sans-serif; }
    .mob-friendly-table th:not(:first-child), .mob-friendly-table caption:not(:first-child) {
      color: #e8e9ed; }
    .mob-friendly-table th:last-child, .mob-friendly-table caption:last-child {
      cursor: pointer; }
  .mob-friendly-table.no-fancy-head caption {
    display: none;
    cursor: pointer; }
  .mob-friendly-table.no-fancy-head.close caption:before {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  .mob-friendly-table tr {
    margin-bottom: 0;
    border: none; }
  .mob-friendly-table td {
    vertical-align: top;
    text-align: center; }
    .mob-friendly-table td:first-child {
      text-align: left; }
    .mob-friendly-table td p {
      margin: 10px 0; }
  .mob-friendly-table.close tbody tr {
    opacity: 0;
    display: none; }
  .mob-friendly-table.close th:before {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  .mob-friendly-table ul {
    margin: 0;
    padding: 0; }
  .mob-friendly-table li {
    position: relative;
    margin: 0;
    padding: 5px 0 5px 40px;
    text-align: left; }
    .mob-friendly-table li:before {
      content: "";
      position: absolute;
      width: 18px;
      height: 15px;
      top: 10px;
      left: 0;
      background-size: contain;
      background: url("https://assets.cmcmarkets.com/images/icn-tick.png") 50% 50% no-repeat; }

@media (max-width: 47.99em) {
  .mob-friendly-table.no-fancy-head caption {
    display: block;
    text-align: left; } }

table.footer {
  table-layout: fixed;
  border-bottom: 0;
  color: #58585a;
  /* .border-corporate doesn't appear to be used */ }
  table.footer tr {
    background: #fff;
    border-left: none; }
  table.footer .border-CB, table.footer .border-CFD, table.footer .border-corporate, table.footer .border-light-blue, table.footer .border-dark-blue, table.footer .border-dark-grey, table.footer .border-grey {
    position: relative;
    background: #ffffff;
    text-align: center; }
    table.footer .border-CB .Button, table.footer .border-CFD .Button, table.footer .border-corporate .Button, table.footer .border-light-blue .Button, table.footer .border-dark-blue .Button, table.footer .border-dark-grey .Button, table.footer .border-grey .Button {
      margin-bottom: 22px;
      margin-top: 18px;
      min-width: 0;
      width: 100%; }
    table.footer .border-CB a, table.footer .border-CFD a, table.footer .border-corporate a, table.footer .border-light-blue a, table.footer .border-dark-blue a, table.footer .border-dark-grey a, table.footer .border-grey a {
      width: auto; }
    table.footer .border-CB:after, table.footer .border-CFD:after, table.footer .border-corporate:after, table.footer .border-light-blue:after, table.footer .border-dark-blue:after, table.footer .border-dark-grey:after, table.footer .border-grey:after {
      content: "";
      position: absolute;
      height: 4px;
      left: 0;
      bottom: 0;
      right: 0; }
    table.footer .border-CB p, table.footer .border-CFD p, table.footer .border-corporate p, table.footer .border-light-blue p, table.footer .border-dark-blue p, table.footer .border-dark-grey p, table.footer .border-grey p {
      margin: -1rem 0 1rem; }
  table.footer .border-CB:after {
    background: #00c5e8; }
  table.footer .border-CFD:after {
    background: #0069d2; }
  table.footer .border-corporate:after {
    background: #0a264d; }
  table.footer .border-light-blue:after {
    background: #00c5e8; }
  table.footer .border-dark-blue:after {
    background: #0a264d; }
  table.footer .border-dark-grey:after {
    background: #1b2429; }
  table.footer .border-grey:after {
    background: #979797; }
  table.footer .Button--grey-dark {
    background: #1b2429;
    color: #fff; }
    table.footer .Button--grey-dark .Button-panel {
      background: #00c5e8; }
  table.footer .Button--blue-dark .Button-panel {
    background: #00c5e8; }
  table.footer .Button--white-grey {
    border: 2px solid #979b9e;
    color: #00c5e8; }
    table.footer .Button--white-grey .Button-panel {
      background: #979797; }

@media (max-width: 47.99em) {
  .mob-friendly-table.twoColOnly thead tr {
    height: auto;
    width: auto;
    position: relative; }
  .mob-friendly-table.multiCol td, .multiCol td {
    text-align: left !important; }
  table.footer tr {
    border-right: none; }
  table.footer .Button {
    margin-top: 30px; }
  table.footer p {
    text-align: center; } }

table.collapse-button {
  margin-bottom: 0; }
  table.collapse-button tr.hide {
    display: none; }
  table.collapse-button + button {
    position: relative;
    margin-bottom: 2rem;
    padding: 10px 50px 10px 20px;
    background: #0a264d;
    color: #fff;
    outline: none; }
    table.collapse-button + button:before, table.collapse-button + button:after {
      content: "";
      position: absolute;
      background: #00c5e8;
      box-shadow: #00c5e8 0 0 3px 0; }
    table.collapse-button + button:before {
      height: 1px;
      width: 19px;
      top: 22px;
      right: 15px; }
    table.collapse-button + button:after {
      height: 19px;
      width: 1px;
      top: 13px;
      right: 24px; }
    table.collapse-button + button.icn-hide:after {
      display: none; }
    table.collapse-button + button:hover:before, table.collapse-button + button:hover:after {
      box-shadow: none; }

table td .tick {
  background: url("https://assets.cmcmarkets.com/images/icn-tick.png") no-repeat 50% 50%;
  display: block;
  text-indent: -9999px; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/* Styles for search tags */
.tags, .search-results-tags .search-tag, .carouselV2-megaFilter .carouselV2-selected-tags div {
  position: relative;
  display: block;
  margin-right: 0.25rem;
  margin-bottom: 0.5rem;
  padding: 0.25rem 1.8rem 0.25rem 1rem;
  float: right;
  background: #fff;
  border-radius: 3px;
  color: #0a264d;
  font-size: 13px;
  cursor: pointer; }
  .tags:before, .search-results-tags .search-tag:before, .carouselV2-megaFilter .carouselV2-selected-tags div:before {
    content: "\e61c";
    position: absolute;
    right: 8px;
    top: 6px;
    font-size: 9px;
    font-family: 'icomoon'; }
  .tags.light-tag, .search-results-tags .light-tag.search-tag, .carouselV2-megaFilter .carouselV2-selected-tags div.light-tag {
    background-color: #00c5e8;
    color: #fff; }
  .tags.dark-tag, .search-results-tags .dark-tag.search-tag, .carouselV2-megaFilter .carouselV2-selected-tags div.dark-tag {
    background-color: #0a264d;
    color: #fff; }

/** 
* 	These styles are applied after the headers across the site have been converted 
*	Ticket WF-8228
**/
/* Main heading styles attached to individual classes */
.h1, .h2, .h3, .h4, .h5, .h6 {
  margin: 0 0 1rem;
  font-weight: 400;
  text-transform: none; }

/* Specific styles after heading tags have been converted to p */
/*--------------------------------------------*/
.cta-box-row .h2 {
  color: #0a264d !important;
  margin-bottom: 35px; }

.Section .h3.Section-title {
  color: #1b2429; }

.ArticleMain--Body .h2.Section-title {
  color: #333;
  font-family: ubunturegular;
  font-size: 1.5625rem;
  letter-spacing: .09375rem;
  line-height: 2rem;
  margin-bottom: 2.1875rem; }

.ArticleMain--Body .h3.Section-title {
  color: #333333;
  font-family: 'ubunturegular';
  font-size: 1.25rem;
  letter-spacing: 0.09375rem;
  line-height: 1.875rem;
  margin-bottom: 1.9375rem; }

/*--------------------------------------------*/
.megaMenu .navCMC-createAccount-dark .h2 {
  color: #fff; }

.megaMenu .navCMC-createAccount .h2 {
  font-size: 22px;
  text-align: center;
  font-family: ubunturegular,sans-serif;
  letter-spacing: .135rem;
  line-height: 1.875rem; }

/*--------------------------------------------*/
.live-demo-cta .h2 {
  font-family: ubuntulight,sans-serif;
  font-size: 34px;
  text-align: center;
  line-height: 2.5rem;
  letter-spacing: 0; }

@media (min-width: 768px) {
  .live-demo-cta .h2 {
    margin: 1.5rem; } }

@media (min-width: 1024px) {
  .live-demo-cta .h2.text-left {
    text-align: left; } }

/*--------------------------------------------*/
.Widget-blue-box .h2, .Widget-blue-box-light .h2,
.Widget-blue-box-light .h2 {
  font-family: ubunturegular,sans-serif;
  font-size: 1.56rem;
  letter-spacing: .135rem;
  line-height: 1.875rem; }

/*--------------------------------------------*/
.products-banner .h2 {
  font-family: ubuntulight,sans-serif;
  font-size: 24px;
  letter-spacing: 1.45px;
  line-height: 32px;
  color: #0a264d; }
  @media (min-width: 768px) {
    .products-banner .h2 {
      font-size: 34px;
      line-height: 43px; } }

.products-banner .product-item .h3 {
  margin: 0;
  font-size: 18px;
  color: #0a264d;
  letter-spacing: .95px;
  line-height: 30px;
  text-transform: none; }

/*--------------------------------------------*/
.h3.Footer-contact-title {
  font-family: ubunturegular,sans-serif;
  font-size: 1rem;
  letter-spacing: .055rem;
  line-height: 1.562rem; }

/*--------------------------------------------*/
.LiveDemoAccountBar .h3.Section-title {
  margin-bottom: 1.375rem;
  color: #fff;
  text-align: left; }

.Section .h3.Section-title {
  font-size: 1.56rem;
  letter-spacing: .135rem;
  line-height: 1.875rem;
  text-transform: none;
  text-align: left !important; }

/*--------------------------------------------*/
.list-big-numbers .h3 {
  color: #333;
  font-family: latoregular,sans-serif;
  font-size: 18px;
  margin-bottom: .375rem;
  text-transform: none; }

/*--------------------------------------------*/
@media (min-width: 768px) {
  .whyCMCsection .h2.Section-title {
    text-align: left; } }

.whyCMCsection p.h2.Section-title {
  padding-bottom: 34px;
  position: relative;
  font-size: 2.125rem;
  line-height: 2.687rem; }

#whyCMCpoints .pointBlock .h2 {
  bottom: 1.25rem;
  font-family: ubuntubold,sans-serif;
  font-size: 1.25rem;
  left: .875rem;
  letter-spacing: .02rem;
  line-height: 1.8rem;
  margin: 10px 0 0;
  padding-right: .875rem;
  position: absolute;
  text-align: left !important; }
  @media (min-width: 992px) {
    #whyCMCpoints .pointBlock .h2 {
      font-size: 1.75rem;
      line-height: 2.4375rem; } }

@media (min-width: 768px) {
  #whyCMCpoints .col-md-3.open .pointBlockBg .h2 {
    padding: 0;
    position: static; } }

/*--------------------------------------------*/
.h3.ArticleTrailer-headline--small,
.h3.ArticleTrailer-details-small,
.h4.ArticleTrailer-headline--small,
.h4.ArticleTrailer-details-small {
  margin-bottom: 2rem;
  color: #1b2429;
  font-family: "ubuntubold", sans-serif;
  font-size: 1.125rem;
  letter-spacing: 0.04rem;
  line-height: 1.625rem;
  text-transform: none;
  opacity: 1 !important;
  overflow: visible !important;
  max-height: none; }
  @media (min-width: 62em) {
    .h3.ArticleTrailer-headline--small,
    .h3.ArticleTrailer-details-small,
    .h4.ArticleTrailer-headline--small,
    .h4.ArticleTrailer-details-small {
      margin-bottom: 1rem; } }

.h4.ArticleTrailer-headline--small,
.h4.ArticleTrailer-details-small {
  margin-bottom: 2rem !important; }

/*--------------------------------------------*/
.glossary-box .h3 {
  letter-spacing: .055rem;
  line-height: 1.562rem; }

/*--------------------------------------------*/
.similar-links .h3 {
  background: #f1f2f4;
  border-bottom: 1px solid #e8e9ed;
  color: #000;
  font-family: ubuntubold,sans-serif;
  font-size: 1.125rem;
  letter-spacing: normal;
  margin: 0;
  padding: 20px 20px 18px 25px;
  text-transform: none;
  line-height: 1.562rem; }

/*--------------------------------------------*/
.hero .h1 {
  font-size: 3rem;
  line-height: 3.3125rem;
  margin-bottom: 1.5rem;
  font-family: ubuntulight,sans-serif;
  letter-spacing: .2rem; }

/*--------------------------------------------*/
.h3.addressTitle {
  font-size: 1rem;
  letter-spacing: 0.055rem;
  line-height: 1.562rem;
  text-transform: uppercase;
  font-family: "ubunturegular", sans-serif;
  font-weight: bold; }

/*--------------------------------------------*/
@media (min-width: 62em) {
  .pro-standard-diff .Section-title {
    line-height: 1.875rem;
    padding: 1.375rem 0;
    padding-left: 320px;
    text-align: left; } }

.pro-standard-diff .Section-title {
  color: #fff;
  font-size: 1.2rem;
  margin: 0;
  text-align: center; }

/*--------------------------------------------*/
.ArticleMain .ArticleMain--AuthorShare .ArticleMain--Author .h3 {
  color: #0a264d;
  text-transform: uppercase;
  font-size: .7rem;
  font-weight: 700;
  font-family: ubuntubold; }

/*--------------------------------------------*/
.ipo-page .h2 {
  color: #333;
  font-family: ubunturegular,sans-serif;
  font-size: 1.625rem;
  margin: 3.75rem 0 1.125rem; }

/*--------------------------------------------*/
.Section--Login-widget {
  padding-top: 0; }
  .Section--Login-widget img {
    margin: 0; }
  .Section--Login-widget .action-ko .h2, .Section--Login-widget .action-ko .h2 a {
    color: #00c5e8; }
  .Section--Login-widget .h2 {
    font-family: "ubuntulight", SansSerif, sans-serif;
    margin-bottom: 0;
    text-align: center;
    font-size: 1.46rem;
    letter-spacing: .135rem;
    line-height: 1.875rem; }
    .Section--Login-widget .h2 a {
      color: #fff; }
    .Section--Login-widget .h2 span {
      display: block;
      text-transform: uppercase;
      font-weight: bold;
      font-size: 1.1rem; }
  .Section--Login-widget p:not(.h2) {
    margin: 0;
    text-align: center; }
    .Section--Login-widget p:not(.h2) span {
      white-space: nowrap; }
  .Section--Login-widget.version3 p.have-account {
    padding: 10px 0;
    text-align: left; }
  .Section--Login-widget a.Button {
    max-width: 175px;
    margin-top: 10px;
    margin-bottom: 10px; }
  .Section--Login-widget .action.text-center {
    text-align: center; }
    .Section--Login-widget .action.text-center h2 {
      text-align: center; }
    .Section--Login-widget .action.text-center p:not(.h2) {
      padding-left: 0;
      text-align: center; }

@media (max-width: 40em) {
  .Section--Login-widget .col-sm-6 {
    width: 100%; }
  .Section--Login-widget.version1 .action-trade h2, .Section--Login-widget.version2 .action-trade h2 {
    padding: 10px 0 0; }
  .Section--Login-widget.version1 .action-trade p:not(.h2), .Section--Login-widget.version2 .action-trade p:not(.h2) {
    padding: 0 0 10px; }
  .Section--Login-widget.version3 .left .table-cell {
    height: 33%; }
  .Section--Login-widget.version3 p.have-account:not(.h2) {
    padding: 10px 0 18px;
    text-align: center; }
  .Section--Login-widget .action-pod .slide {
    padding: 50px 50px 0; } }

@media (max-width: 30em) {
  .Section--Login-widget .table {
    height: 100%; }
  .Section--Login-widget .table, .Section--Login-widget .table-row, .Section--Login-widget .table-cell {
    display: block; }
  .Section--Login-widget .left .table-row:last-child .table-cell {
    border: none; }
  .Section--Login-widget .left .table-cell {
    margin-bottom: 6px;
    padding: 0 0 6px 0;
    background: #fff;
    border-bottom: 1px solid #ccc; }
    .Section--Login-widget .left .table-cell.no-border {
      margin-bottom: 0;
      border: none; }
    .Section--Login-widget .left .table-cell:after {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      top: 0;
      left: 0;
      bottom: 0;
      background: none; }
    .Section--Login-widget .left .table-cell .h2 {
      position: relative;
      margin: 0;
      text-align: left; }
      .Section--Login-widget .left .table-cell .h2:after {
        content: "";
        position: absolute;
        width: 8px;
        height: auto;
        top: 0;
        left: 0;
        bottom: 0;
        background: #00c5e8; }
      .Section--Login-widget .left .table-cell .h2 a {
        display: block;
        padding: 10px 30px 10px 16px; }
      .Section--Login-widget .left .table-cell .h2 span {
        display: inline; }
    .Section--Login-widget .left .table-cell a.Button {
      position: absolute;
      width: 30px;
      height: 40px;
      top: 50%;
      right: 0;
      margin-top: -20px;
      padding: 0;
      border: none;
      text-indent: -9999em;
      transition: none; }
      .Section--Login-widget .left .table-cell a.Button:after {
        font-weight: 900;
        content: "\e612";
        font-family: 'icomoon';
        position: absolute;
        top: 0;
        left: 0;
        padding: 8px 5px;
        color: black;
        font-size: 1.2em;
        text-indent: 0;
        transform: none; }
      .Section--Login-widget .left .table-cell a.Button:hover {
        background: none; }
    .Section--Login-widget .left .table-cell p.have-account:not(.h2) {
      padding: 10px 0; }
  .Section--Login-widget .left .action-sb .h2, .Section--Login-widget .left .action-sb .h2 a {
    color: #00c5e8; }
  .Section--Login-widget .left .action-sb .h2:after {
    background: #00c5e8; }
  .Section--Login-widget .left .action-sb a.Button:after {
    color: #00c5e8; }
  .Section--Login-widget .left .action-mm .h2, .Section--Login-widget .left .action-mm .h2 a {
    color: #0a264d; }
  .Section--Login-widget .left .action-mm .h2:after {
    background: #0a264d; }
  .Section--Login-widget .left .action-mm a.Button:after {
    color: #0a264d; }
  .Section--Login-widget .left .action-cfd .h2, .Section--Login-widget .left .action-cfd .h2 a {
    color: #1b2429; }
  .Section--Login-widget .left .action-cfd .h2:after {
    background: #1b2429; }
  .Section--Login-widget .left .action-cfd a.Button:after {
    color: #0a264d; }
  .Section--Login-widget .left .action-ko .h2, .Section--Login-widget .left .action-ko .h2 a {
    color: #00c5e8; }
  .Section--Login-widget .left .action-ko .h2:after {
    background: #00c5e8; }
  .Section--Login-widget .left .action-ko a.Button:after {
    color: #00c5e8; }
  .Section--Login-widget .left .action-trade {
    background: #f1f2f4; }
    .Section--Login-widget .left .action-trade .h2 {
      position: relative;
      padding: 20px 0 0;
      text-align: center; }
      .Section--Login-widget .left .action-trade .h2:after {
        display: none; }
  .Section--Login-widget .right .table-cell {
    padding: 0;
    height: 471px; }
    .Section--Login-widget .right .table-cell:after {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      top: 0;
      left: 0;
      bottom: 0;
      background: none; }
  .Section--Login-widget .right img {
    position: relative; }
  .Section--Login-widget .action-pod .slide {
    padding: 40px 20px 0; }
  .Section--Login-widget.version3 .left .table-cell.action-cfd {
    border-bottom: 1px solid #ccc; }
  .Section--Login-widget.version3 p.have-account:not(.h2) {
    padding: 16px 0 18px; } }

@media (min-width: 40em) {
  .Section--Login-widget.version1 .action-trade h2, .Section--Login-widget.version2 .action-trade h2 {
    padding: 10px 0 0; }
  .Section--Login-widget.version1 .action-trade p, .Section--Login-widget.version2 .action-trade p {
    padding: 0 0 10px; }
  .Section--Login-widget.version1 h2 {
    padding-left: 4px;
    padding-right: 4px; }
  .Section--Login-widget.version3 .left .table-cell {
    height: 33%; }
  .Section--Login-widget.version3 p.have-account:not(.h2) {
    padding: 10px 0 18px;
    text-align: left; } }

@media (min-width: 48em) {
  .Section--Login-widget .action-pod .slide {
    padding: 30px 40px; }
    .Section--Login-widget .action-pod .slide .h2 {
      padding-top: 1em; }
  .Section--Login-widget .left .h2, .Section--Login-widget .left p:not(.h2) {
    text-align: left; }
  .Section--Login-widget .left h2 {
    padding-top: 25px;
    padding-bottom: 4px; }
  .Section--Login-widget .left .action-trade h2 {
    padding: 20px 0 0; }
  .Section--Login-widget.version1 .table-cell, .Section--Login-widget.version3 .table-cell {
    vertical-align: top; }
  .Section--Login-widget.version1 a.Button:not(.register), .Section--Login-widget.version3 a.Button:not(.register) {
    position: absolute;
    bottom: 15px;
    right: 17px;
    min-width: 145px; }
  .Section--Login-widget.version1 .left .h2, .Section--Login-widget.version1 .left p:not(.h2), .Section--Login-widget.version3 .left .h2, .Section--Login-widget.version3 .left p:not(.h2) {
    padding-left: 25px; }
  .Section--Login-widget.version1 .float, .Section--Login-widget.version3 .float {
    text-align: center; }
    .Section--Login-widget.version1 .float .h2, .Section--Login-widget.version3 .float .h2 {
      padding: 0 10px;
      float: none; }
    .Section--Login-widget.version1 .float a.Button:not(.register), .Section--Login-widget.version3 .float a.Button:not(.register) {
      position: relative;
      bottom: auto;
      right: auto;
      float: none; }
  .Section--Login-widget.version1 .h2 {
    text-align: center; }
  .Section--Login-widget.version1 p.have-account:not(.h2) {
    padding: 10px 10px 0; }
  .Section--Login-widget.version2 a.Button:not(.register) {
    max-width: 190px;
    width: 100%; } }

@media (min-width: 62em) {
  .Section--Login-widget .action-pod .slide {
    padding: 30px 30px 0; }
  .Section--Login-widget.version1 .action-sb, .Section--Login-widget.version1 .action-cfd {
    height: 110px; }
  .Section--Login-widget.version1 .action-ko {
    height: 100px; }
    .Section--Login-widget.version1 .action-ko + .action-cfd {
      height: 100px; }
  .Section--Login-widget.version1 .float .h2 {
    max-width: 215px;
    text-align: left; }
  .Section--Login-widget.version1 .float a.Button:not(.register) {
    position: absolute;
    right: 10px;
    bottom: 10px; }
  .Section--Login-widget.version3 .float {
    text-align: center; }
    .Section--Login-widget.version3 .float .h2 {
      padding: 0 25px;
      text-align: center; }
  .Section--Login-widget .action-pod .slide {
    width: 50%; } }

.Section--Login-widget.version1 .float .h2, .Section--Login-widget.version3 .float .h2 {
  margin-top: 10px; }

.Section.AdvancedTradingTools .h2 {
  text-align: center; }

.NewsAnalysisTeaser .h3.NewsAnalysisTeaser--title {
  color: #0a264d;
  font-size: 1.2rem;
  font-family: "ubunturegular", sans-serif;
  text-transform: none;
  margin-bottom: 0.5rem;
  text-align: left;
  letter-spacing: 0.055rem; }

.NewsAnalysisTeaser .h2 {
  color: #0a264d; }

/* Post deploy fixes WF-10059 */
.trading-platforms-banner .h2, .LiveInfo .h2, .learn-banner .h2 {
  color: #00c5e8;
  font-family: "ubuntulight", sans-serif;
  font-size: 24px;
  letter-spacing: 1.45px;
  line-height: 32px;
  max-width: 100%; }
  @media (min-width: 768px) {
    .trading-platforms-banner .h2, .LiveInfo .h2, .learn-banner .h2 {
      font-size: 34px;
      line-height: 43px; } }

.podcasts-promo.promo-learn .h3 {
  color: inherit;
  margin-bottom: 30px;
  font-size: 2.125rem;
  text-align: center !important;
  letter-spacing: 0.135rem;
  line-height: 1.875rem;
  text-transform: none;
  padding: 0; }

table.which-account-head .h3 {
  margin: 0;
  padding: 0;
  color: #fff;
  text-align: center;
  text-transform: none;
  font-size: 20px;
  font-family: "ubunturegular", sans-serif;
  line-height: 24px;
  letter-spacing: 0.055rem; }

.EducationLevel .h3.Section-title {
  color: #0a264d;
  text-align: center !important;
  font-size: 1.6rem;
  font-family: 'ubuntulight';
  margin-bottom: 1.5rem; }

.cta-box-row-box-ctr .h3.Section-title {
  font-size: 1.6rem;
  margin-bottom: 1.5rem;
  color: #1b2429;
  letter-spacing: 0.135rem;
  line-height: 1.875rem;
  text-transform: none;
  text-align: center !important; }

.CFD-Share-diff .h2.Section-title {
  display: inline-block;
  text-align: left;
  color: #fff;
  font-size: 1.2rem;
  margin: 0; }

.expandable-banner-products .expandable-content .h2 {
  font-family: "ubuntulight", sans-serif;
  letter-spacing: 1.45px;
  color: #00c5e8;
  font-size: 34px;
  line-height: 43px; }

.hubpage .article-list .article .h3 {
  color: #1b2429;
  font-family: ubuntubold,sans-serif;
  font-size: 1.125rem;
  text-transform: none;
  transition: color .3s;
  letter-spacing: 0.055rem;
  line-height: 1.562rem; }

.hubpage .article-list .article:hover .h3 {
  color: #00c5e8; }

/* It's important that img.text-center styles in 'bakery_imports/cmc' appear before elements/utils.scss */
/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.clearfix:before, .clearfix:after {
  content: " ";
  display: table; }

.clearfix:after {
  clear: both; }

.text-nowrap {
  white-space: nowrap; }

a {
  text-decoration: none;
  /* Override bootstrap setting in _scaffolding.scss! */ }
  a:hover, a:focus {
    text-decoration: none; }

/* RATHER SOME MISC STUFF LAYING AROUND */
.img-wrap {
  text-align: center;
  margin: 0 0 40px; }
  .img-wrap .twitter-block {
    margin-bottom: 55px; }
    .img-wrap .twitter-block img {
      margin: 0;
      vertical-align: top; }
  .img-wrap img {
    max-width: 100%; }
  .img-wrap .btn-twitter {
    display: block;
    max-width: 200px;
    margin: 20px auto 0; }

.icon-img {
  margin-bottom: 10px;
  margin-top: 20px; }
  @media (min-width: 768px) {
    .icon-img {
      margin-top: 0; } }

.img-no-bot-margin {
  margin-bottom: 0 !important;
  vertical-align: text-bottom; }

.img-force-right {
  margin: 0px auto; }

.img-max-width {
  max-width: 100%; }

.Tabs--lozenge .Tabs-menu li a {
  white-space: nowrap; }

.Tabs--lozenge .hero .Tabs-menu {
  margin: 0 0 1rem; }
  @media (min-width: 480px) {
    .Tabs--lozenge .hero .Tabs-menu {
      margin: 0 0 -2rem; } }

.article > p:first-of-type {
  line-height: 1.6em;
  font-size: 1.2em; }

.article-author {
  margin-bottom: 50px;
  padding: 30px 20px 20px;
  border-top: 1px solid #e8e9ed;
  border-bottom: 1px solid #e8e9ed; }
  .article-author img {
    display: inline-block;
    width: 94px;
    height: 94px;
    margin-right: 5%;
    float: left; }
  .article-author h2 {
    color: #00c5e8; }
  .article-author p {
    text-transform: uppercase;
    font-size: 0.6rem;
    font-weight: bold;
    font-family: 'ubuntubold', Arial sans-serif;
    line-height: 1rem; }

.map {
  margin-bottom: 25px; }
  .map iframe {
    display: block;
    /* remove space from bottom */ }

.box-green {
  position: relative;
  width: 100%;
  display: table;
  overflow: hidden;
  background: #1ab99f;
  color: #fff; }
  .box-green .table-row {
    display: table-row; }
    .box-green .table-row:after {
      content: "";
      position: absolute;
      width: 1px;
      height: 70%;
      top: 15%;
      left: 50%;
      margin-left: -1px;
      background: #fff; }
  .box-green .left, .box-green .right {
    display: table-cell;
    width: 50%;
    padding: 30px 10px;
    text-align: center;
    vertical-align: middle;
    line-height: 1.3em; }
  .box-green .left {
    font-size: 1.4em;
    text-transform: uppercase; }
  .box-green span {
    display: block; }

.icn {
  margin-bottom: 25px; }
  .icn-seminar {
    color: #22b59b; }
  .icn span.Icon--calendar {
    font-size: 26px;
    margin: 6px;
    position: relative;
    top: 4px; }

/*  rounded images for the News and  Analyst/Twitter pages.
*   Image should be square
*/
.img-rounded-77 {
  width: 77px;
  height: 77px;
  border-radius: 50%; }

.img-rounded-94 {
  width: 94px;
  height: 94px;
  border-radius: 50%; }

.img-rounded-185 {
  width: 185px;
  height: 185px;
  border-radius: 50%; }

@media (min-width: 480px) {
  .container {
    width: 480px; } }

@media (min-width: 768px) {
  .container {
    width: 768px; } }

@media (min-width: 992px) {
  .container {
    width: 992px; } }

.Section {
  padding: 3.5rem 0 1.5rem; }
  @media (min-width: 480px) {
    .Section {
      padding: 6.5rem 0 4.5rem; } }
  .Section-narrow {
    padding: 1em 0 3em; }
    @media (min-width: 768px) {
      .Section-narrow {
        padding: 2.5em 0 1em 0; } }
  .Section.padding-none {
    padding: 0; }
  .Section-no-top-padding {
    padding-top: 0 !important; }
  .Section-no-bot-padding {
    padding-bottom: 0 !important; }
  @media (min-width: 480px) {
    .Section-move-up {
      margin-top: -3rem; } }
  @media (min-width: 30em) {
    .Section .Section-title {
      text-align: left; } }
  .Section .Section-title.text-center {
    text-align: center; }
  .Section .Section-title.text-left {
    text-align: left; }
  .Section .Section-title sup {
    font-size: 50%;
    top: -0.8em; }
  .Section img {
    margin-bottom: 2rem;
    margin-top: 2rem; }
    @media (min-width: 30em) {
      .Section img {
        margin-top: 0; } }
  .Section .image-no-margin img {
    margin: 0;
    padding: 0; }
  .Section-footnote {
    padding: 3rem 0 2.4rem; }
    .Section-footnote p, .Section-footnote .small {
      font-size: 0.875rem;
      line-height: 1.25rem;
      margin-bottom: 0.6rem; }
    .Section-footnote.drop-area p, .Section-footnote.drop-area .small {
      font-size: 1.5rem;
      line-height: 2rem;
      margin-bottom: 2rem; }
  .Section.LiveDemoAccountBar .right .LiveDemoAccountBar--cell-left {
    margin-left: 2rem; }
  .Section.LiveDemoAccountBar .right .LiveDemoAccountBar--cell-right {
    margin-left: 0; }
  @media (max-width: 62em) {
    .Section.LiveDemoAccountBar .right .LiveDemoAccountBar--cell-left {
      margin-left: 0; }
    .Section.LiveDemoAccountBar .right .LiveDemoAccountBar--cell-right {
      margin-left: 2rem; } }
  .Section.HelpSupport {
    padding-bottom: 6.5rem; }
  .Section-intro {
    padding-bottom: 0;
    margin-bottom: -1rem; }
    @media (min-width: 480px) {
      .Section-intro {
        margin-bottom: -4rem; } }
    .Section-intro p {
      font-size: 1.125rem;
      line-height: 2rem; }
    .Carousel-mask .Section-intro {
      padding-top: 0.5rem; }
      @media (min-width: 480px) {
        .Carousel-mask .Section-intro {
          padding-top: 3.5rem; } }
  .Section--with-slant {
    padding-top: 3rem; }

table {
  margin-bottom: 2rem; }
  table th,
  table td {
    padding: 1rem 1.8rem; }
    @media (min-width: 48em) {
      table th,
      table td {
        padding: 1rem 1rem; } }
    @media (min-width: 62em) {
      table th,
      table td {
        padding: 1rem 1.8rem; } }

.Button--white-bg {
  background: #fff;
  color: #58585a; }

.horizontal-divider {
  border: 0;
  border-bottom: 2px solid #e8e9ed;
  margin: 0; }

p.intro-text {
  font-size: 1.125rem;
  line-height: 2rem; }

/*
* Form extends
*/
form .Button {
  width: 100%;
  max-width: 100%;
  margin-top: 20px; }

/*home page icons */
.IconOverText .IconOverText-icon {
  background: #e4e5e7 !important; }

.inline-icons span {
  display: block; }

.inline-icons .Icon {
  position: relative;
  top: 5px;
  line-height: 10px; }

.inline-icons + p {
  margin-bottom: 0; }

.icon-img-circle {
  background: #e8e9ed;
  border-radius: 50%;
  height: 164px;
  line-height: 164px;
  margin-bottom: 26px;
  text-align: center;
  width: 164px; }
  .icon-img-circle img {
    display: inline;
    margin: 0 !important;
    vertical-align: middle; }
  .icon-img-circle.text-center {
    margin: 0 auto 26px; }

.NewsAnalysisTeaser .NewsAnalysisTeaser--icon-holder .Icon.Icon--youtube {
  font-size: 5rem; }

@media (min-width: 48em) {
  .wrapper .Button {
    min-width: 220px;
    padding-left: 8px;
    padding-right: 8px;
    width: auto; } }

.wrapper .Button.Button--image {
  min-width: 0;
  padding: 0; }

.wrapper .app-buttons div {
  display: inline-block;
  padding-right: 1rem; }
  .wrapper .app-buttons div img {
    margin: 0 0 2rem; }

.PhotoWall img {
  margin-bottom: 0; }

.AsSeenOn {
  padding: 60px 20px 50px; }
  .AsSeenOn img, .AsSeenOn ul, .AsSeenOn li {
    margin: 0; }
  .AsSeenOn li {
    padding: 20px; }

.overflow-hidden {
  overflow: hidden; }

.contact-us {
  margin-bottom: 20px; }
  .contact-us ul {
    padding-bottom: 20px; }
  .contact-us img {
    margin: 0;
    padding: 0; }
  .contact-us .padded {
    padding: 35px 20px; }
  .contact-us .overflow-hidden a {
    display: block;
    height: 24px;
    line-height: 24px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; }
  .contact-us .Hat-call-icon {
    margin-right: 10px;
    line-height: 12px;
    color: #00c5e8;
    font-size: 1.3rem; }

.break-word {
  word-wrap: break-word; }

.pad-20 {
  padding: 20px; }

.pad-40 {
  padding: 40px; }

.padtop-xs-20 {
  padding-top: 20px; }

@media (max-width: 30em) {
  .padTop-sm-20 {
    padding-top: 20px; } }

/* Remove once new Carousel is live */
.ArticleTrailer--is-double-width .ArticleTrailer-image-overlay {
  opacity: 0.8 !important; }

.ArticleTrailer--is-double-width .ArticleTrailer-headline--small {
  color: #fff; }

.same-height-box {
  min-height: 0;
  transition: .5s min-height; }

.alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px; }

.alert-success {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6; }

.alert-warning {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc; }

.alert-danger {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1; }

.pull-right {
  float: right !important; }

.no-padding {
  padding: 0 !important; }

.no-padding-bottom {
  padding-bottom: 0 !important; }

.no-margin {
  margin: 0 !important; }

/* Fixing spacing issue in nav/create account/dropdown WF-4397 */
.CreateAccountPanel-button:first-of-type + .CreateAccountPanel-warning {
  font-size: 1rem;
  margin: -23px 0 2rem; }

/* As part of WF-4324, to make copy/paste for CKEditor b,i,u styles adding those in CSS */
b, strong {
  font-weight: bold; }

i, em {
  font-style: italic; }

/* Fix for products header*/
.ParallaxHero.ParallaxHero-level2.Products .StatsCell .StatsNumber.add-plus:after {
  content: '+';
  font-family: 'ubunturegular', sans-serif;
  font-size: 0.9em;
  font-weight: 300;
  opacity: 0;
  animation-name: statsNoFadeIn;
  animation-duration: 1s;
  animation-delay: 3s;
  animation-fill-mode: forwards; }

@keyframes statsNoFadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@media (min-width: 992px) {
  .col-lg-offset-1-5 {
    margin-left: 12.5%; }
  .col-lg-offset-1-6 {
    margin-left: 25%; } }

/**5 Equal grid system*/
.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
  position: relative;
  min-height: 1px;
  padding: 0;
  overflow: hidden; }

.col-xs-15:first-child, .col-sm-15:first-child, .col-md-15:first-child, .col-lg-15:first-child {
  border: none; }

.col-xs-15 {
  width: 20%;
  float: left; }

@media (min-width: 768px) {
  .col-sm-15 {
    width: 20%;
    float: left; } }

@media (min-width: 992px) {
  .col-md-15 {
    width: 20%;
    float: left; } }

@media (min-width: 1200px) {
  .col-lg-15 {
    width: 20%;
    float: left; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.ribbon {
  overflow: hidden;
  position: relative;
  width: 150px;
  height: 50px; }
  .ribbon .ribbon-content,
  .ribbon .ribbon-content-featured {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: .3rem 0.15rem .3rem 0.8rem;
    z-index: 1;
    font-family: latobold,sans-serif;
    font-size: .7rem;
    text-transform: uppercase;
    color: #fff; }
    .ribbon .ribbon-content:before,
    .ribbon .ribbon-content-featured:before {
      content: "";
      position: absolute;
      top: 0;
      left: -48px;
      width: 200%;
      height: 100%;
      background: #1AB99F;
      -moz-transform: skew(-40deg, 0deg);
      -o-transform: skew(-40deg, 0deg);
      -ms-transform: skew(-40deg, 0deg);
      -webkit-transform: skew(-40deg, 0deg);
      transform: skew(-40deg, 0deg);
      z-index: -1; }
    .ribbon .ribbon-content .ribbon-star,
    .ribbon .ribbon-content-featured .ribbon-star {
      position: absolute;
      top: 10px;
      left: 10px;
      width: 12px;
      height: 12px;
      background: url("https://assets.cmcmarkets.com/images/ribbon-star.png");
      background-size: cover; }
  .ribbon .ribbon-content-featured {
    padding: .3rem 0.15rem .3rem 1.8rem; }
    .ribbon .ribbon-content-featured:before {
      left: -86px; }

/* CORE COMPONENTS */
/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.addthis_custom_sharing, .follow-social-links {
  display: inline-block;
  min-height: 76px; }

.at-share-tbx-element.addthis_32x32_style .at-share-btn {
  border: 0;
  display: inline-block;
  height: 40px;
  margin: 0 8px 15px 0;
  max-height: 1000px !important;
  max-width: 1000px !important;
  width: 40px; }
  .at-share-tbx-element.addthis_32x32_style .at-share-btn.at-svc-facebook {
    color: #205499; }
    .at-share-tbx-element.addthis_32x32_style .at-share-btn.at-svc-facebook .at-icon-wrapper {
      border-color: #205499; }
      .at-share-tbx-element.addthis_32x32_style .at-share-btn.at-svc-facebook .at-icon-wrapper:hover {
        background: #205499 !important;
        color: #fff; }
      .at-share-tbx-element.addthis_32x32_style .at-share-btn.at-svc-facebook .at-icon-wrapper:before {
        content: "\e60e"; }
    .at-share-tbx-element.addthis_32x32_style .at-share-btn.at-svc-facebook + .at_flat_counter {
      color: #205499; }
  .at-share-tbx-element.addthis_32x32_style .at-share-btn.at-svc-twitter {
    color: #00bae8; }
    .at-share-tbx-element.addthis_32x32_style .at-share-btn.at-svc-twitter .at-icon-wrapper {
      border-color: #00bae8; }
      .at-share-tbx-element.addthis_32x32_style .at-share-btn.at-svc-twitter .at-icon-wrapper:hover {
        background: #00bae8 !important;
        color: #fff; }
      .at-share-tbx-element.addthis_32x32_style .at-share-btn.at-svc-twitter .at-icon-wrapper:before {
        content: "\e60f"; }
    .at-share-tbx-element.addthis_32x32_style .at-share-btn.at-svc-twitter + .at_flat_counter {
      color: #00bae8; }
  .at-share-tbx-element.addthis_32x32_style .at-share-btn.at-svc-youtube {
    color: #D0021B; }
    .at-share-tbx-element.addthis_32x32_style .at-share-btn.at-svc-youtube .at-icon-wrapper {
      border-color: #D0021B; }
      .at-share-tbx-element.addthis_32x32_style .at-share-btn.at-svc-youtube .at-icon-wrapper:hover {
        background: #D0021B !important;
        color: #fff; }
      .at-share-tbx-element.addthis_32x32_style .at-share-btn.at-svc-youtube .at-icon-wrapper:before {
        content: "\e628"; }
    .at-share-tbx-element.addthis_32x32_style .at-share-btn.at-svc-youtube + .at_flat_counter {
      color: #D0021B; }
  .at-share-tbx-element.addthis_32x32_style .at-share-btn.at-svc-linkedin {
    color: #1e61bd; }
    .at-share-tbx-element.addthis_32x32_style .at-share-btn.at-svc-linkedin .at-icon-wrapper {
      border-color: #1e61bd; }
      .at-share-tbx-element.addthis_32x32_style .at-share-btn.at-svc-linkedin .at-icon-wrapper:hover {
        background: #1e61bd !important;
        color: #fff; }
      .at-share-tbx-element.addthis_32x32_style .at-share-btn.at-svc-linkedin .at-icon-wrapper:before {
        content: "\e610"; }
    .at-share-tbx-element.addthis_32x32_style .at-share-btn.at-svc-linkedin + .at_flat_counter {
      color: #1e61bd; }
  .at-share-tbx-element.addthis_32x32_style .at-share-btn.at-svc-google_plusone_share {
    color: #dd4b39; }
    .at-share-tbx-element.addthis_32x32_style .at-share-btn.at-svc-google_plusone_share .at-icon-wrapper {
      border-color: #dd4b39; }
      .at-share-tbx-element.addthis_32x32_style .at-share-btn.at-svc-google_plusone_share .at-icon-wrapper:hover {
        background: #dd4b39 !important;
        color: #fff; }
      .at-share-tbx-element.addthis_32x32_style .at-share-btn.at-svc-google_plusone_share .at-icon-wrapper:before {
        content: "\e611"; }
    .at-share-tbx-element.addthis_32x32_style .at-share-btn.at-svc-google_plusone_share + .at_flat_counter {
      color: #dd4b39; }

.at-custom-share-span {
  background: none;
  border-radius: 0;
  margin: 0;
  height: 40px;
  width: 40px; }
  .at-custom-share-span .at-icon {
    display: none; }
  .at-custom-share-span .at-icon-wrapper {
    background: none !important;
    border: 2px solid;
    border-radius: 50%;
    cursor: pointer;
    font-family: icomoon;
    speak: none;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    height: 40px !important;
    text-align: center;
    text-indent: 0;
    text-transform: none;
    line-height: 40px !important;
    transition: background-color .2s ease-in-out, color .2s ease-in-out;
    width: 40px !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; }
    .at-custom-share-span .at-icon-wrapper:before {
      position: relative;
      top: -2px; }

.addthis_32x32_style .at_flat_counter {
  background: none;
  cursor: default;
  font-family: latoregular, sans-serif;
  font-size: 11px !important;
  font-weight: normal !important;
  height: 15px !important;
  letter-spacing: 0.4px;
  line-height: 15px !important;
  margin: 40px 8px 21px -48px !important;
  padding: 6px 0 0;
  text-align: center;
  transition: none;
  width: 40px; }
  .addthis_32x32_style .at_flat_counter:after {
    display: none; }
  .addthis_32x32_style .at_flat_counter:hover {
    background: none; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.OrderExecution li {
  list-style: none; }
  .OrderExecution li a .Icon:before {
    content: '';
    display: block;
    width: 45px;
    height: 33px;
    margin: 0 auto;
    background: url("https://assets.cmcmarkets.com/images/advanced-orders-sprite.png") no-repeat 50% 0; }
  .OrderExecution li a .Icon--one-click-trading:before {
    background-position: 50% -300px; }
  .OrderExecution li a .Icon--price-ladder:before {
    background-position: 50% -400px; }
  .OrderExecution li a .Icon--long-short:before {
    background-position: 50% 0; }
  .OrderExecution li a .Icon--boundary-orders:before {
    background-position: 50% -200px; }
  .OrderExecution li a .Icon--guaranteed-stops:before {
    background-position: 50% -100px; }
  .OrderExecution li a:hover .Icon--one-click-trading:before {
    background-position: 50% -350px; }
  .OrderExecution li a:hover .Icon--price-ladder:before {
    background-position: 50% -450px; }
  .OrderExecution li a:hover .Icon--long-short:before {
    background-position: 50% -50px; }
  .OrderExecution li a:hover .Icon--boundary-orders:before {
    background-position: 50% -250px; }
  .OrderExecution li a:hover .Icon--guaranteed-stops:before {
    background-position: 50% -150px; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.js-analysts-container {
  /*margin: 0 auto;
  max-width: 1270px;*/ }
  .js-analysts-container ul {
    width: 100%;
    padding: 0;
    float: left;
    background: #fff;
    list-style-type: none; }
    .js-analysts-container ul li {
      float: left;
      width: 100%;
      padding: 0;
      margin: 0;
      background: #2e558c;
      border: 2px solid #fff;
      overflow: hidden; }
      .js-analysts-container ul li:before, .js-analysts-container ul li:after {
        content: ''; }
      @media (min-width: 320px) {
        .js-analysts-container ul li {
          width: 50%; } }
      @media (min-width: 768px) {
        .js-analysts-container ul li {
          width: 33.3333%; }
          .js-analysts-container ul li:first-child:nth-last-child(11),
          .js-analysts-container ul li:first-child:nth-last-child(11) ~ li, .js-analysts-container ul li:first-child:nth-last-child(12),
          .js-analysts-container ul li:first-child:nth-last-child(12) ~ li {
            width: 33.3333%; }
          .js-analysts-container ul li:first-child:nth-last-child(9), .js-analysts-container ul li:first-child:nth-last-child(9) ~ li {
            width: 25%; } }
      @media (min-width: 990px) {
        .js-analysts-container ul li {
          width: 25%; }
          .js-analysts-container ul li:first-child:nth-last-child(9),
          .js-analysts-container ul li:first-child:nth-last-child(9) ~ li, .js-analysts-container ul li:first-child:nth-last-child(11),
          .js-analysts-container ul li:first-child:nth-last-child(11) ~ li, .js-analysts-container ul li:first-child:nth-last-child(12),
          .js-analysts-container ul li:first-child:nth-last-child(12) ~ li {
            width: 25%; } }
      .js-analysts-container ul li.text {
        width: 100% !important; }
        .js-analysts-container ul li.text p {
          padding: 40px;
          margin: 0;
          font-size: 16px;
          background: #f1f2f4; }
        @media (min-width: 768px) {
          .js-analysts-container ul li.text:nth-child(10) {
            width: 100% !important; }
          .js-analysts-container ul li.text:nth-child(11) {
            width: 66.6666% !important; }
          .js-analysts-container ul li.text:nth-child(12) {
            width: 33.3333% !important; } }
        @media (min-width: 990px) {
          .js-analysts-container ul li.text:nth-child(10) {
            width: 75% !important; }
          .js-analysts-container ul li.text:nth-child(11) {
            width: 50% !important; }
          .js-analysts-container ul li.text:nth-child(12) {
            width: 100% !important; } }
    .js-analysts-container ul a {
      position: relative;
      float: left;
      margin: 0; }
      .js-analysts-container ul a:hover img {
        -ms-transform: scale(1.075);
        -webkit-transform: scale(1.075);
        transform: scale(1.075); }
      .js-analysts-container ul a:hover .analyst-item-overlay {
        opacity: 0.65; }
      .js-analysts-container ul a img {
        float: left;
        width: 100%;
        transition: -webkit-transform 0.4s ease-in-out;
        transition: transform 0.4s ease-in-out; }
      .js-analysts-container ul a .analyst-item-overlay {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: #0a264d;
        background: rgba(16, 42, 76, 0.85);
        transition: opacity 0.4s ease-in-out; }
      .js-analysts-container ul a .analyst-item-content {
        position: absolute;
        right: 1rem;
        bottom: 1rem;
        left: 1rem; }
        .js-analysts-container ul a .analyst-item-content h2 {
          color: #fff; }
        .js-analysts-container ul a .analyst-item-content p {
          color: #fff;
          margin: 0;
          font-family: "ubunturegular", sans-serif;
          font-size: 0.687rem;
          letter-spacing: 0.025rem;
          line-height: 1.125rem;
          text-transform: uppercase; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.ebook-registration h2 {
  color: #979b9e;
  font-family: "latobold", sans-serif;
  font-size: 18px; }

.ebook-registration .hero {
  position: relative;
  padding: 4em 0 3em 0; }
  .ebook-registration .hero h1.Section-title {
    color: #00c5e8;
    margin: 0 0 10px 0; }
  .ebook-registration .hero h1 p {
    margin: 0; }

.ebook-registration .ebook-content {
  z-index: 1; }
  .ebook-registration .ebook-content ul {
    padding: 0; }
    .ebook-registration .ebook-content ul li {
      position: relative;
      float: left;
      width: 100%;
      padding: 0;
      margin: 10px 0;
      font-family: "latoregular", sans-serif;
      font-size: 18px; }
      .ebook-registration .ebook-content ul li::before {
        -webkit-border-radius: 100%;
        -moz-border-radius: 100%;
        border-radius: 100%;
        display: table;
        position: relative;
        float: left;
        content: "\e616";
        top: -5px;
        left: 0;
        width: 20px;
        height: 18px;
        padding: 11px 7px 7px;
        margin: 0 10px 20px 0;
        font-size: 1.2rem;
        border: 2px solid;
        color: #00c5e8;
        font-family: icomoon; }
  .ebook-registration .ebook-content .sub-heading {
    font-family: "latoregular", sans-serif;
    font-size: 18px;
    font-weight: bold; }
  .ebook-registration .ebook-content .book-image {
    z-index: 1; }
    .ebook-registration .ebook-content .book-image img {
      -webkit-box-shadow: 5px 5px 30px #979b9e;
      -moz-box-shadow: 5px 5px 30px #979b9e;
      box-shadow: 5px 5px 30px #979b9e; }
  .ebook-registration .ebook-content .book-hub-image img:hover {
    -webkit-box-shadow: 10px 15px 20px #979b9e;
    -moz-box-shadow: 10px 15px 20px #979b9e;
    box-shadow: 10px 15px 20px #979b9e;
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    -webkit-transition-duration: 0.5;
    -moz-transition-duration: 0.5;
    transition-duration: 0.5;
    transition-timing-function: ease-in-out; }
  @media (max-width: 768px) {
    .ebook-registration .ebook-content .ebook-division:nth-child(even) {
      clear: right; } }
  .ebook-registration .ebook-content .ebook-title {
    margin-bottom: 0.5em;
    min-height: 85px;
    font-family: 'ubunturegular', sans-serif;
    letter-spacing: 0;
    font-size: 22px; }
  .ebook-registration .ebook-content .ebook-blurb {
    margin: 0; }
    @media (min-width: 480px) {
      .ebook-registration .ebook-content .ebook-blurb {
        height: 190px;
        position: relative; }
        .ebook-registration .ebook-content .ebook-blurb:after {
          background-image: linear-gradient(to bottom, transparent, #fff);
          content: ' ';
          width: 100%;
          height: 30px;
          position: absolute;
          bottom: 0;
          left: 0; } }
  .ebook-registration .ebook-content .share-text {
    color: #000;
    font-family: ubunturegular;
    font-size: 20px;
    margin-bottom: 15px; }
  .ebook-registration .ebook-content .addthis_custom_sharing .at-share-tbx-element .at-share-btn {
    -moz-transform: scale(2);
    -o-transform: scale(2);
    -ms-transform: scale(2);
    -webkit-transform: scale(2);
    transform: scale(2);
    margin: 0 15px 0 5px !important; }
    .ebook-registration .ebook-content .addthis_custom_sharing .at-share-tbx-element .at-share-btn:hover, .ebook-registration .ebook-content .addthis_custom_sharing .at-share-tbx-element .at-share-btn:active {
      -moz-transform: scale(1.75);
      -o-transform: scale(1.75);
      -ms-transform: scale(1.75);
      -webkit-transform: scale(1.75);
      transform: scale(1.75); }
  .ebook-registration .ebook-content .addthis_custom_sharing .at-share-tbx-element svg {
    -moz-transform: scale(0.75);
    -o-transform: scale(0.75);
    -ms-transform: scale(0.75);
    -webkit-transform: scale(0.75);
    transform: scale(0.75); }
  .ebook-registration .ebook-content .Button {
    min-width: 100%;
    margin: 2em 0 3em 0; }
    @media (min-width: 768px) {
      .ebook-registration .ebook-content .Button {
        min-width: 220px; } }

.ebook-registration .ebook-registration-form {
  background: #f1f2f4;
  border: 1px solid #00c5e8; }
  @media (min-width: 992px) {
    .ebook-registration .ebook-registration-form {
      margin-top: -150px; } }
  .ebook-registration .ebook-registration-form form {
    padding: 0 25px 20px 25px; }
    @media (min-width: 480px) and (max-width: 768px) {
      .ebook-registration .ebook-registration-form form {
        padding: 20px 40px; } }
    .ebook-registration .ebook-registration-form form .Button {
      font-size: 22px;
      padding: 20px;
      width: 100%; }
  .ebook-registration .ebook-registration-form .h2 {
    color: #000;
    font-size: 22px;
    font-family: "latobold", sans-serif;
    margin-top: 1rem; }
  .ebook-registration .ebook-registration-form p {
    margin-bottom: 15px;
    font-size: 14px; }

.ebook-registration .grey-button {
  padding: 16px 60px 16px 22px;
  background: url("https://assets.cmcmarkets.com/fonts/form-arrow2x.svg") no-repeat 95%;
  /* important tag to reset all the hover and unnecessary colors*/
  color: #979b9e !important;
  border: 1px solid #f1f2f4;
  border-radius: 0 !important; }

.ebook-registration .ebook-arrow {
  position: absolute;
  bottom: -60px;
  width: 155px;
  margin-left: 50%;
  left: -77px;
  font-size: 14px;
  text-align: center;
  z-index: 16; }
  @media (min-width: 992px) {
    .ebook-registration .ebook-arrow {
      display: none; } }
  .ebook-registration .ebook-arrow a {
    display: block;
    color: #979b9e; }
    .ebook-registration .ebook-arrow a:after {
      -webkit-border-radius: 100%;
      -moz-border-radius: 100%;
      border-radius: 100%;
      -webkit-transition-duration: 0.5s;
      -moz-transition-duration: 0.5s;
      transition-duration: 0.5s;
      transition-timing-function: ease-in-out;
      content: "\e60c";
      position: relative;
      display: block;
      width: 45px;
      padding: 15px 0;
      margin: 10px auto;
      background: #00c5e8;
      color: #fff;
      font-family: 'icomoon';
      font-weight: bold;
      line-height: 1;
      vertical-align: middle;
      text-align: center; }
    .ebook-registration .ebook-arrow a:hover:after {
      -webkit-box-shadow: 0 0 20px #222;
      -moz-box-shadow: 0 0 20px #222;
      box-shadow: 0 0 20px #222; }

.ebook-registration.ebook-thank-you #ebook-registration-form #demoLandingFormIframe {
  width: 100%;
  border: 0; }

.ebook-registration.ebook-thank-you .ebook-registration-form {
  margin-top: 0;
  border: 0; }

.ebook-registration.ebook-thank-you .thankyou-content h2 {
  font-size: 20px;
  color: #000; }

.ebook-registration.ebook-thank-you .tick-list ul {
  list-style-type: none;
  margin-bottom: 1.6rem;
  padding-left: 0; }
  .ebook-registration.ebook-thank-you .tick-list ul li {
    position: relative;
    padding-left: 35px;
    margin-bottom: 0.5em;
    font-size: 18px;
    color: #000; }
    .ebook-registration.ebook-thank-you .tick-list ul li:before {
      display: block;
      position: absolute;
      top: 5px;
      left: 0;
      width: 20px;
      font-size: 1rem;
      line-height: 1rem;
      background: url("https://assets.cmcmarkets.com/images/demo-landing-list-tick.png") no-repeat;
      content: "";
      height: 20px; }

.ebook-registration.ebook-thank-you .watch-link a {
  color: #000;
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  line-height: normal;
  padding-left: 37px;
  position: relative; }
  .ebook-registration.ebook-thank-you .watch-link a:before {
    background: url("https://assets.cmcmarkets.com/images/video-link-play-icn-sprite.png") no-repeat;
    content: "";
    display: inline-block;
    height: 22px;
    left: 0;
    margin: -11px 0 0 0;
    position: absolute;
    top: 50%;
    vertical-align: middle;
    width: 22px; }
  .ebook-registration.ebook-thank-you .watch-link a:hover:before {
    background-position-x: 0;
    background-position-y: 100%; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.faq {
  margin: 0;
  padding: 0; }
  .faq li {
    margin: 0;
    padding: 0; }
    .faq li:before {
      display: none; }
    .faq li a {
      text-decoration: none; }
      .faq li a:hover {
        text-decoration: underline; }
  .faq-topics a, .faq-sub-topics a {
    display: block;
    border: solid #e8e9ed;
    color: #58585a; }
  .faq-topics li:first-child a, .faq-sub-topics li:first-child a {
    border-top-width: 1px; }
  .faq-topics li.current a, .faq-sub-topics li.current a {
    color: #00c5e8; }
  .faq-topics li a {
    padding: 15px 5px 15px 32px;
    border-width: 0 1px 1px 1px; }
  .faq-topics li.back a {
    background: #f1f2f4 url("https://assets.cmcmarkets.com/images/icn-faq-arrow-left.png") no-repeat 10px 50%;
    text-transform: uppercase; }
  .faq-sub-topics li a {
    padding: 23px 5px 23px 0;
    border-width: 0 0 1px 0;
    background: url("https://assets.cmcmarkets.com/images/icn-faq-arrow.png") no-repeat 96% 50%; }
  .faq-sub-topics a.btn {
    border-radius: 0;
    text-align: left; }
  .faq-questions {
    counter-reset: questions; }
    .faq-questions li a {
      display: block;
      padding: 23px 35px 23px 0;
      border-bottom: 1px solid #e8e9ed;
      color: #333;
      font-size: 18px;
      position: relative; }
      .faq-questions li a:before {
        content: counter(questions) ". ";
        counter-increment: questions; }
      .faq-questions li a:after {
        background: url("https://assets.cmcmarkets.com/images/icn-faq-arrow-down.png") no-repeat 0 0;
        content: '';
        display: block;
        height: 9px;
        margin-top: -5px;
        position: absolute;
        right: 10px;
        top: 50%;
        width: 15px; }
  .faq-answers {
    counter-reset: answers; }
    .faq-answers li {
      position: relative;
      margin-bottom: 25px;
      padding-top: 25px;
      border-top: 1px solid #e8e9ed; }
      .faq-answers li:first-child {
        border-top: none; }
      .faq-answers li h4 {
        color: #333;
        font-size: 18px;
        text-transform: none; }
        .faq-answers li h4:before {
          content: counter(answers) ". ";
          counter-increment: answers; }
      .faq-answers li li {
        border: 0;
        margin-bottom: 12px;
        padding-top: 12px; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.glossary {
  background: #e8e9ed;
  margin-bottom: 80px;
  padding-top: 90px;
  text-align: center;
  font-size: 0; }
  .glossary h1 {
    text-align: center; }
    .glossary h1 span {
      text-transform: uppercase; }
  .glossary a {
    display: inline-block;
    width: 45px;
    height: 45px;
    margin: 0 3px 3px 0;
    color: #979b9e;
    background-color: white;
    line-height: 45px;
    font-size: 26px;
    text-decoration: none;
    text-align: center; }
    .glossary a:hover {
      background-color: #f1f2f4; }
    .glossary a.active {
      color: #00c5e8; }
  .glossary .btn-group {
    padding: 34px 0 50px; }
  .glossary-terms .row {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e8e9ed; }
  .glossary-terms h3 {
    color: #333333;
    font-family: latoregular, sans-serif;
    font-size: 18px;
    text-transform: none; }
  .glossary-box {
    max-width: 800px;
    margin: 5rem auto;
    padding: 30px;
    border: 1px solid #e8e9ed; }
    .glossary-box a {
      display: block;
      margin-bottom: 8px;
      padding-right: 20%;
      color: #58585a;
      background: url("https://assets.cmcmarkets.com/images/icn-faq-arrow.png") no-repeat 82% 50%;
      text-decoration: none; }
      .glossary-box a:hover {
        text-decoration: underline; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/* PLATFORM SECTION */
.Background-trading-tools, .Background-android, .Background-news-insights, .Background-mobile-trading-platform, .Background-iphone, .Background-ipad, .Background-charting-features, .Background-order-features, .Background-trading-guides, .Background-cfd, .Background-sb, .Background-sb-2, .Background-countdowns, .Background-roms, .Background-standard-stockbroking, .Background-pro-stockbroking, .Background-germany30-lp {
  min-height: 511px;
  width: 100%; }

.Background-grey-mosaic, .Background-dark-mosaic, .Background-dark-blue-mosaic, .Background-variety-charity {
  height: auto;
  width: 100%; }

.Background {
  /* PRODUCT SECTION */ }
  .Background-trading-tools {
    background-color: #979b9e;
    background-image: url("https://assets.cmcmarkets.com/images/innovative-trading-tools-v2_small.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top; }
    @media (min-width: 480px) {
      .Background-trading-tools {
        background-image: url("https://assets.cmcmarkets.com/images/innovative-trading-tools-v2_medium.jpg");
        background-size: cover; } }
    @media (min-width: 768px) {
      .Background-trading-tools {
        background-image: url("https://assets.cmcmarkets.com/images/innovative-trading-tools-v2_large.jpg");
        background-size: cover; } }
    @media (min-width: 992px) {
      .Background-trading-tools {
        background-image: url("https://assets.cmcmarkets.com/images/innovative-trading-tools-v2.jpg");
        background-size: cover; } }
  .Background-android {
    background-color: #58585a;
    background-image: url("https://assets.cmcmarkets.com/images/android-trading-app-v2_small.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top; }
    @media (min-width: 480px) {
      .Background-android {
        background-image: url("https://assets.cmcmarkets.com/images/android-trading-app-v2_medium.jpg");
        background-size: cover; } }
    @media (min-width: 768px) {
      .Background-android {
        background-image: url("https://assets.cmcmarkets.com/images/android-trading-app-v2_large.jpg");
        background-size: cover; } }
    @media (min-width: 992px) {
      .Background-android {
        background-image: url("https://assets.cmcmarkets.com/images/android-trading-app-v2.jpg");
        background-size: cover; } }
  .Background-news-insights {
    background-color: #979b9e;
    background-image: url("https://assets.cmcmarkets.com/images/news-and-insights-v2_small.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top; }
    @media (min-width: 480px) {
      .Background-news-insights {
        background-image: url("https://assets.cmcmarkets.com/images/news-and-insights-v2_medium.jpg");
        background-size: cover; } }
    @media (min-width: 768px) {
      .Background-news-insights {
        background-image: url("https://assets.cmcmarkets.com/images/news-and-insights-v2_large.jpg");
        background-size: cover; } }
    @media (min-width: 992px) {
      .Background-news-insights {
        background-image: url("https://assets.cmcmarkets.com/images/news-and-insights-v2.jpg");
        background-size: cover; } }
  .Background-mobile-trading-platform {
    background-color: #979b9e;
    background-image: url("https://assets.cmcmarkets.com/images/mobile-trading-platform-v2_small.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top; }
    @media (min-width: 480px) {
      .Background-mobile-trading-platform {
        background-image: url("https://assets.cmcmarkets.com/images/mobile-trading-platform-v2_medium.jpg");
        background-size: cover; } }
    @media (min-width: 768px) {
      .Background-mobile-trading-platform {
        background-image: url("https://assets.cmcmarkets.com/images/mobile-trading-platform-v2_large.jpg");
        background-size: cover; } }
    @media (min-width: 992px) {
      .Background-mobile-trading-platform {
        background-image: url("https://assets.cmcmarkets.com/images/mobile-trading-platform-v2.jpg");
        background-size: cover; } }
  .Background-iphone {
    background-color: #979b9e;
    background-image: url("https://assets.cmcmarkets.com/images/iphone-trading-app-v2_small.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top; }
    @media (min-width: 480px) {
      .Background-iphone {
        background-image: url("https://assets.cmcmarkets.com/images/iphone-trading-app-v2_medium.jpg");
        background-size: cover; } }
    @media (min-width: 768px) {
      .Background-iphone {
        background-image: url("https://assets.cmcmarkets.com/images/iphone-trading-app-v2_large.jpg");
        background-size: cover; } }
    @media (min-width: 992px) {
      .Background-iphone {
        background-image: url("https://assets.cmcmarkets.com/images/iphone-trading-app-v2.jpg");
        background-size: cover; } }
  .Background-ipad {
    background-color: #979b9e;
    background-image: url("https://assets.cmcmarkets.com/images/ipad-trading-app-v2_small.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top; }
    @media (min-width: 480px) {
      .Background-ipad {
        background-image: url("https://assets.cmcmarkets.com/images/ipad-trading-app-v2_medium.jpg");
        background-size: cover; } }
    @media (min-width: 768px) {
      .Background-ipad {
        background-image: url("https://assets.cmcmarkets.com/images/ipad-trading-app-v2_large.jpg");
        background-size: cover; } }
    @media (min-width: 992px) {
      .Background-ipad {
        background-image: url("https://assets.cmcmarkets.com/images/ipad-trading-app-v2.jpg");
        background-size: cover; } }
  .Background-charting-features {
    background-color: #979b9e;
    background-image: url("https://assets.cmcmarkets.com/images/charting-v2_small.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top; }
    @media (min-width: 480px) {
      .Background-charting-features {
        background-image: url("https://assets.cmcmarkets.com/images/charting-v2_medium.jpg");
        background-size: cover; } }
    @media (min-width: 768px) {
      .Background-charting-features {
        background-image: url("https://assets.cmcmarkets.com/images/charting-v2_large.jpg");
        background-size: cover; } }
    @media (min-width: 992px) {
      .Background-charting-features {
        background-image: url("https://assets.cmcmarkets.com/images/charting-v2.jpg");
        background-size: cover; } }
  .Background-order-features {
    background-color: #979b9e;
    background-image: url("https://assets.cmcmarkets.com/images/order-execution-v2_small.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top; }
    @media (min-width: 480px) {
      .Background-order-features {
        background-image: url("https://assets.cmcmarkets.com/images/order-execution-v2_medium.jpg");
        background-size: cover; } }
    @media (min-width: 768px) {
      .Background-order-features {
        background-image: url("https://assets.cmcmarkets.com/images/order-execution-v2_large.jpg");
        background-size: cover; } }
    @media (min-width: 992px) {
      .Background-order-features {
        background-image: url("https://assets.cmcmarkets.com/images/order-execution-v2.jpg");
        background-size: cover; } }
  .Background-trading-guides {
    background-color: #979b9e;
    background-image: url("https://assets.cmcmarkets.com/images/seo-hub-hero_small.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top; }
    @media (min-width: 480px) {
      .Background-trading-guides {
        background-image: url("https://assets.cmcmarkets.com/images/seo-hub-hero_medium.jpg");
        background-size: cover; } }
    @media (min-width: 768px) {
      .Background-trading-guides {
        background-image: url("https://assets.cmcmarkets.com/images/seo-hub-hero_large.jpg");
        background-size: cover; } }
    @media (min-width: 992px) {
      .Background-trading-guides {
        background-image: url("https://assets.cmcmarkets.com/images/seo-hub-hero.jpg");
        background-size: cover; } }
  .Background-short-background-banner {
    min-height: 451px; }
  .Background-trading-tools .Section,
  .Background-android .Section,
  .Background-news-insights .Section,
  .Background-ipad .Section,
  .Background-mobile-trading-platform .Section,
  .Background-iphone .Section,
  .Background-charting-features .Section,
  .Background-order-features .Section {
    background-color: transparent; }
  .Background-cfd {
    background-color: #979b9e;
    background-image: url("https://assets.cmcmarkets.com/images/cfd-v2_small.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top; }
    @media (min-width: 480px) {
      .Background-cfd {
        background-image: url("https://assets.cmcmarkets.com/images/cfd-v2_medium.jpg");
        background-size: cover; } }
    @media (min-width: 768px) {
      .Background-cfd {
        background-image: url("https://assets.cmcmarkets.com/images/cfd-v2_large.jpg");
        background-size: cover; } }
    @media (min-width: 992px) {
      .Background-cfd {
        background-image: url("https://assets.cmcmarkets.com/images/cfd-v2.jpg");
        background-size: cover; } }
  .Background-sb {
    background-color: #979b9e;
    background-image: url("https://assets.cmcmarkets.com/images/spreadbetting-v2_small.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top; }
    @media (min-width: 480px) {
      .Background-sb {
        background-image: url("https://assets.cmcmarkets.com/images/spreadbetting-v2_medium.jpg");
        background-size: cover; } }
    @media (min-width: 768px) {
      .Background-sb {
        background-image: url("https://assets.cmcmarkets.com/images/spreadbetting-v2_large.jpg");
        background-size: cover; } }
    @media (min-width: 992px) {
      .Background-sb {
        background-image: url("https://assets.cmcmarkets.com/images/spreadbetting-v2.jpg");
        background-size: cover; } }
  .Background-sb-2 {
    background-color: #ffffff;
    background-image: url("https://assets.cmcmarkets.com/images/sb-header-2560x462_small.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top; }
    @media (min-width: 480px) {
      .Background-sb-2 {
        background-image: url("https://assets.cmcmarkets.com/images/sb-header-2560x462_medium.png");
        background-size: cover; } }
    @media (min-width: 768px) {
      .Background-sb-2 {
        background-image: url("https://assets.cmcmarkets.com/images/sb-header-2560x462_large.png");
        background-size: cover; } }
    @media (min-width: 992px) {
      .Background-sb-2 {
        background-image: url("https://assets.cmcmarkets.com/images/sb-header-2560x462.png");
        background-size: cover; } }
  .Background-countdowns {
    background-color: #979b9e;
    background-image: url("https://assets.cmcmarkets.com/images/countdowns-v2_small.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top; }
    @media (min-width: 480px) {
      .Background-countdowns {
        background-image: url("https://assets.cmcmarkets.com/images/countdowns-v2_medium.jpg");
        background-size: cover; } }
    @media (min-width: 768px) {
      .Background-countdowns {
        background-image: url("https://assets.cmcmarkets.com/images/countdowns-v2_large.jpg");
        background-size: cover; } }
    @media (min-width: 992px) {
      .Background-countdowns {
        background-image: url("https://assets.cmcmarkets.com/images/countdowns-v2.jpg");
        background-size: cover; } }
  .Background-roms {
    background-color: #979b9e;
    background-image: url("https://assets.cmcmarkets.com/images/range-of-markets-v2_small.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top; }
    @media (min-width: 480px) {
      .Background-roms {
        background-image: url("https://assets.cmcmarkets.com/images/range-of-markets-v2_medium.jpg");
        background-size: cover; } }
    @media (min-width: 768px) {
      .Background-roms {
        background-image: url("https://assets.cmcmarkets.com/images/range-of-markets-v2_large.jpg");
        background-size: cover; } }
    @media (min-width: 992px) {
      .Background-roms {
        background-image: url("https://assets.cmcmarkets.com/images/range-of-markets-v2.jpg");
        background-size: cover; } }
  .Background-grey-mosaic {
    background-color: #979b9e;
    background-image: url("https://assets.cmcmarkets.com/images/mosaic-white-v2_small.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top; }
    @media (min-width: 480px) {
      .Background-grey-mosaic {
        background-image: url("https://assets.cmcmarkets.com/images/mosaic-white-v2_medium.jpg");
        background-size: cover; } }
    @media (min-width: 768px) {
      .Background-grey-mosaic {
        background-image: url("https://assets.cmcmarkets.com/images/mosaic-white-v2_large.jpg");
        background-size: cover; } }
    @media (min-width: 992px) {
      .Background-grey-mosaic {
        background-image: url("https://assets.cmcmarkets.com/images/mosaic-white-v2.jpg");
        background-size: cover; } }
  .Background-dark-mosaic {
    background-color: #979b9e;
    background-image: url("https://assets.cmcmarkets.com/images/mosaic-dark-v2_small.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%; }
    @media (min-width: 480px) {
      .Background-dark-mosaic {
        background-image: url("https://assets.cmcmarkets.com/images/mosaic-dark-v2_medium.png");
        background-size: cover; } }
    @media (min-width: 768px) {
      .Background-dark-mosaic {
        background-image: url("https://assets.cmcmarkets.com/images/mosaic-dark-v2_large.png");
        background-size: cover; } }
    @media (min-width: 992px) {
      .Background-dark-mosaic {
        background-image: url("https://assets.cmcmarkets.com/images/mosaic-dark-v2.png");
        background-size: cover; } }
  .Background-dark-blue-mosaic {
    background-color: #979b9e;
    background-image: url("https://assets.cmcmarkets.com/images/mosaic-dark-blue-v2_small.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%; }
    @media (min-width: 480px) {
      .Background-dark-blue-mosaic {
        background-image: url("https://assets.cmcmarkets.com/images/mosaic-dark-blue-v2_medium.jpg");
        background-size: cover; } }
    @media (min-width: 768px) {
      .Background-dark-blue-mosaic {
        background-image: url("https://assets.cmcmarkets.com/images/mosaic-dark-blue-v2_large.jpg");
        background-size: cover; } }
    @media (min-width: 992px) {
      .Background-dark-blue-mosaic {
        background-image: url("https://assets.cmcmarkets.com/images/mosaic-dark-blue-v2.jpg");
        background-size: cover; } }
  .Background-variety-charity {
    background-color: #979b9e;
    background-image: url("https://assets.cmcmarkets.com/images/variety-hero-v2_small.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    padding-bottom: 42% !important; }
    @media (min-width: 480px) {
      .Background-variety-charity {
        background-image: url("https://assets.cmcmarkets.com/images/variety-hero-v2_medium.jpg");
        background-size: cover; } }
    @media (min-width: 768px) {
      .Background-variety-charity {
        background-image: url("https://assets.cmcmarkets.com/images/variety-hero-v2_large.jpg");
        background-size: cover; } }
    @media (min-width: 992px) {
      .Background-variety-charity {
        background-image: url("https://assets.cmcmarkets.com/images/variety-hero-v2.jpg");
        background-size: cover; } }
    .Background-variety-charity h1 {
      margin-bottom: 260px; }
    @media (min-width: 768px) {
      .Background-variety-charity {
        background-position: center center;
        padding-bottom: 300px !important;
        padding-top: 70px !important; }
        .Background-variety-charity h1 {
          margin-bottom: 260px; } }
  .Background-countdowns .Section,
  .Background-roms .Section,
  .Background-grey-mosaic .Section,
  .Background-cfd .Section {
    background-color: transparent; }
  .Background-standard-stockbroking {
    background-color: #979b9e;
    background-image: url("https://assets.cmcmarkets.com/images/standard-stockbroking-v2_small.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center; }
    @media (min-width: 480px) {
      .Background-standard-stockbroking {
        background-image: url("https://assets.cmcmarkets.com/images/standard-stockbroking-v2_medium.jpg");
        background-size: cover; } }
    @media (min-width: 768px) {
      .Background-standard-stockbroking {
        background-image: url("https://assets.cmcmarkets.com/images/standard-stockbroking-v2_large.jpg");
        background-size: cover; } }
    @media (min-width: 992px) {
      .Background-standard-stockbroking {
        background-image: url("https://assets.cmcmarkets.com/images/standard-stockbroking-v2.jpg");
        background-size: cover; } }
  .Background-pro-stockbroking {
    background-color: #979b9e;
    background-image: url("https://assets.cmcmarkets.com/images/pro-stockbroking-v2_small.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center; }
    @media (min-width: 480px) {
      .Background-pro-stockbroking {
        background-image: url("https://assets.cmcmarkets.com/images/pro-stockbroking-v2_medium.jpg");
        background-size: cover; } }
    @media (min-width: 768px) {
      .Background-pro-stockbroking {
        background-image: url("https://assets.cmcmarkets.com/images/pro-stockbroking-v2_large.jpg");
        background-size: cover; } }
    @media (min-width: 992px) {
      .Background-pro-stockbroking {
        background-image: url("https://assets.cmcmarkets.com/images/pro-stockbroking-v2.jpg");
        background-size: cover; } }
  .Background-germany30-lp {
    background-color: #979b9e;
    background-image: url("https://assets.cmcmarkets.com/images/germany-hero-v2_small.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%; }
    @media (min-width: 480px) {
      .Background-germany30-lp {
        background-image: url("https://assets.cmcmarkets.com/images/germany-hero-v2_medium.jpg");
        background-size: cover; } }
    @media (min-width: 768px) {
      .Background-germany30-lp {
        background-image: url("https://assets.cmcmarkets.com/images/germany-hero-v2_large.jpg");
        background-size: cover; } }
    @media (min-width: 992px) {
      .Background-germany30-lp {
        background-image: url("https://assets.cmcmarkets.com/images/germany-hero-v2.jpg");
        background-size: cover; } }
  .Background-knockouts {
    background-color: #979b9e;
    background-image: url("https://assets.cmcmarkets.com/images/knockouts-hero-v2_small.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%; }
    @media (min-width: 480px) {
      .Background-knockouts {
        background-image: url("https://assets.cmcmarkets.com/images/knockouts-hero-v2_medium.jpg");
        background-size: cover; } }
    @media (min-width: 768px) {
      .Background-knockouts {
        background-image: url("https://assets.cmcmarkets.com/images/knockouts-hero-v2_large.jpg");
        background-size: cover; } }
    @media (min-width: 992px) {
      .Background-knockouts {
        background-image: url("https://assets.cmcmarkets.com/images/knockouts-hero-v2.jpg");
        background-size: cover; } }
  @media (min-width: 48em) {
    .Background-world-map {
      background: url("https://assets.cmcmarkets.com/images/liveinfo_background.png") top no-repeat;
      background-size: contain; } }

.ParallaxHero.ParallaxHero-level2.Support .background-image {
  background-color: #979b9e;
  background-image: url("https://assets.cmcmarkets.com/images/support-medium_small.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%; }
  @media (min-width: 480px) {
    .ParallaxHero.ParallaxHero-level2.Support .background-image {
      background-image: url("https://assets.cmcmarkets.com/images/support-medium_medium.jpg");
      background-size: cover; } }
  @media (min-width: 768px) {
    .ParallaxHero.ParallaxHero-level2.Support .background-image {
      background-image: url("https://assets.cmcmarkets.com/images/support-medium_large.jpg");
      background-size: cover; } }
  @media (min-width: 992px) {
    .ParallaxHero.ParallaxHero-level2.Support .background-image {
      background-image: url("https://assets.cmcmarkets.com/images/support-medium.jpg");
      background-size: cover; } }

@media (max-width: 414px) {
  .ParallaxHero.ParallaxHero-level2.Products .background-image {
    background-image: url("https://assets.cmcmarkets.com/images/product_hero_mobile.jpg") !important; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.hero {
  height: auto;
  padding-top: 116px; }
  .hero h1 {
    font-size: 3rem;
    line-height: 3.3125rem;
    margin-bottom: 1.5rem; }
  .hero p {
    font-size: 1.125rem;
    line-height: 2rem; }
  .hero h1, .hero h1.Section-title, .hero p {
    color: #fff; }
  .hero-bg-dark h1, .hero-bg-dark h1.Section-title, .hero-bg-dark p, .hero-bg-dark ul, .hero-bg-dark li {
    color: #fff; }
  .hero-bg-light h1, .hero-bg-light h1.Section-title, .hero-bg-light p {
    color: #1b2429; }
  .hero .Section {
    padding: 0; }
  .hero .Button {
    display: block;
    margin-top: 2.25rem;
    min-width: 0;
    max-width: 350px;
    padding-left: 5px;
    padding-right: 5px;
    width: 100%; }
  .hero .Button-wideA {
    max-width: 370px; }
  .hero img {
    margin-bottom: 10px;
    margin-top: 20px; }
  .hero .col-sm-2 p, .hero .col-md-2 p, .hero .col-sm-3 p, .hero .col-md-3 p, .hero .col-sm-4 p, .hero .col-md-4 p {
    font-size: 1rem;
    line-height: 1.562rem; }
  @media (min-width: 48em) {
    .hero .col-sm-4 p.button {
      padding-left: 8px;
      padding-right: 8px; } }

/* Products hero */
.Products .ParallaxHero-links.FourBtns .Button {
  margin-bottom: 1rem; }
  @media (min-width: 30rem) {
    .Products .ParallaxHero-links.FourBtns .Button {
      max-width: 100%; } }
  @media (min-width: 48rem) {
    .Products .ParallaxHero-links.FourBtns .Button {
      min-width: 0;
      width: 100%; } }

.video-hero {
  color: #fff;
  padding: 3.5rem 0 1.5rem;
  font-family: ubunturegular, sans-serif;
  background-color: #000;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%; }
  .video-hero > .page-headline {
    color: #fff; }
  .video-hero .intro-copy {
    font-size: 18px; }
  .video-hero .element-wrapper {
    clear: both; }
  .video-hero .disclaimer {
    clear: both; }
  .video-hero ul li {
    position: relative;
    margin-bottom: 0.4em; }
  .video-hero .button {
    margin: 0px 0 1em; }
  .video-hero .small.text-item {
    text-align: center;
    display: block;
    margin: 0 auto; }
    @media (min-width: 48em) {
      .video-hero .small.text-item {
        text-align: left;
        margin: 0 0 2rem; } }
  .video-hero .text-item a {
    /* was .secondary */
    display: block;
    margin: 12px auto 12px auto;
    text-align: center; }
    @media (min-width: 48em) {
      .video-hero .text-item a {
        text-align: left;
        /*margin: 12px 12px 12px -50px;*/
        margin: 12px 12px 12px 0; } }
  .video-hero .video-player {
    margin: 25px 5px; }
  @media (max-width: 1280px) {
    .video-hero .Button {
      min-width: auto;
      max-width: auto;
      padding-left: 28px;
      padding-right: 28px; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
body {
  height: 100%;
  padding-top: 72px; }

@media (min-width: 1024px) {
  body {
    padding-top: 135px; } }

/* Fix to position expandable banner correctly for Ipad pro */
@media (min-width: 1024px) {
  .mobileEvery .megaMenu .navCMC,
  .mobileEvery .megaMenu .container-fluid,
  .mobileEvery .megaMenu .navCMC .navCMC-cat1,
  .mobileEvery .megaMenu .navCMC .navCMC-btn {
    height: 72px; }
  .mobileEvery .megaMenu .navCMC-cat1 > li a.Button {
    margin-top: 13px; }
  .mobileEvery .megaMenu .navCMC-logo a {
    top: 9px; } }

.megaMenu {
  position: fixed;
  top: 0;
  z-index: 100;
  width: 100%;
  /**
	* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
	* Hat - Top part of a page with languages, personal, partner groups etc
	* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
	*/
  /**
	* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
	* Main Menu
	* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
	*/ }
  .megaMenu .container-fluid {
    padding: 0 10px;
    position: relative;
    height: 72px; }
  @media (min-width: 1024px) {
    .megaMenu .container-fluid {
      height: 92px; } }
  .megaMenu .col-xs-12 {
    padding-left: 0;
    padding-right: 0; }
  .megaMenu .hat {
    /*display: none;*/
    position: relative;
    z-index: 100;
    height: 0;
    overflow: hidden;
    background-color: #fff;
    -webkit-transition: background-color 0.3s ease-in-out;
    -moz-transition: background-color 0.3s ease-in-out;
    -ms-transition: background-color 0.3s ease-in-out;
    -o-transition: background-color 0.3s ease-in-out;
    transition: background-color 0.3s ease-in-out; }
    .megaMenu .hat nav {
      float: left;
      height: 45px; }
    .megaMenu .hat ul {
      padding-left: 0; }
    .megaMenu .hat li {
      display: inline-block;
      margin: 0 14px 0 0;
      padding-left: 0;
      font-size: 0.687rem;
      letter-spacing: 0.025rem;
      line-height: 45px;
      text-transform: uppercase;
      color: #58585a;
      -webkit-transition: color 0.3s ease-in-out;
      -moz-transition: color 0.3s ease-in-out;
      -ms-transition: color 0.3s ease-in-out;
      -o-transition: color 0.3s ease-in-out;
      transition: color 0.3s ease-in-out; }
      .megaMenu .hat li.active a {
        text-decoration: underline; }
      .megaMenu .hat li:before {
        display: none; }
      .megaMenu .hat li:after {
        display: block;
        content: "|";
        float: right;
        margin-left: 14px; }
      .megaMenu .hat li:last-child:after {
        display: none; }
      .megaMenu .hat li a {
        transition: color 0.3s ease-in-out;
        color: #58585a;
        text-decoration: none; }
        .megaMenu .hat li a:hover {
          text-decoration: underline; }
    .megaMenu .hat-language-btn {
      float: right;
      margin-left: 27px;
      height: 25px;
      margin-top: 10px;
      padding-left: 22px;
      border-radius: 4px;
      background-color: #f1f2f4;
      color: #58585a;
      font-size: 0.687rem;
      letter-spacing: 0.025rem;
      line-height: 25px;
      transition: all 0.2s ease-in-out;
      text-decoration: none;
      -webkit-transition: color 0.3s ease-in-out;
      -moz-transition: color 0.3s ease-in-out;
      -ms-transition: color 0.3s ease-in-out;
      -o-transition: color 0.3s ease-in-out;
      transition: color 0.3s ease-in-out; }
      .megaMenu .hat-language-btn i {
        padding-left: 17px;
        padding-right: 17px;
        color: #00c5e8; }
    .megaMenu .hat-call-btn {
      float: right;
      margin-left: 36px;
      height: 45px;
      letter-spacing: 0.025rem;
      line-height: 1.125rem;
      font-size: 0.75rem;
      -webkit-transition: color 0.3s ease-in-out;
      -moz-transition: color 0.3s ease-in-out;
      -ms-transition: color 0.3s ease-in-out;
      -o-transition: color 0.3s ease-in-out;
      transition: color 0.3s ease-in-out; }
      .megaMenu .hat-call-btn i {
        margin-right: 10px;
        line-height: 45px;
        font-size: 1.3rem;
        color: #00c5e8; }
      .megaMenu .hat-call-btn a {
        position: relative;
        top: -5px;
        line-height: 45px;
        font-size: 0.75rem;
        color: #58585a;
        transition: color 0.3s ease-in-out;
        text-decoration: none; }
  .megaMenu .lang {
    visibility: hidden;
    height: 0;
    z-index: 1;
    overflow: hidden;
    position: relative;
    background: #f1f2f4; }
    .megaMenu .lang > div.container-fluid {
      position: relative; }
    .megaMenu .lang-close-btn {
      position: absolute;
      right: 6px;
      top: 50px;
      z-index: 30;
      color: #979b9e;
      cursor: pointer;
      -webkit-transition: color 0.3s ease-in-out;
      -moz-transition: color 0.3s ease-in-out;
      -ms-transition: color 0.3s ease-in-out;
      -o-transition: color 0.3s ease-in-out;
      transition: color 0.3s ease-in-out; }
      .megaMenu .lang-close-btn:hover {
        color: #1b2429; }
    .megaMenu .lang-heading {
      font-family: "lato", sans-serif;
      font-size: 1.56rem;
      letter-spacing: 0.135rem;
      line-height: 1.875rem;
      text-transform: none;
      margin-top: 1.5em;
      margin-bottom: 2em;
      -webkit-transition: color 0.3s ease-in-out;
      -moz-transition: color 0.3s ease-in-out;
      -ms-transition: color 0.3s ease-in-out;
      -o-transition: color 0.3s ease-in-out;
      transition: color 0.3s ease-in-out; }
    .megaMenu .lang-list ul {
      list-style-type: none;
      margin-bottom: 0; }
    .megaMenu .lang-list li:before {
      display: none; }
    .megaMenu .lang-list > ul > li {
      overflow: hidden;
      padding: 0.65rem 1rem;
      border: 1px solid transparent; }
      .megaMenu .lang-list > ul > li:hover {
        border: 1px solid #fff; }
        .megaMenu .lang-list > ul > li:hover .lang-country-name {
          color: #0a264d; }
      .megaMenu .lang-list > ul > li.lang-list-multiple {
        margin-bottom: 0.3rem; }
      .megaMenu .lang-list > ul > li .lang-flag {
        float: left;
        width: 20%;
        font-size: 0.875rem;
        letter-spacing: 0.025rem;
        line-height: 1.562rem; }
      .megaMenu .lang-list > ul > li .lang-country-name {
        display: block;
        text-transform: uppercase;
        letter-spacing: 0.4pt;
        font-size: 14px; }
    .megaMenu .lang-list ul ul {
      float: right;
      width: 80%;
      padding-left: 0;
      margin-bottom: 0;
      text-align: left;
      list-style-type: none;
      line-height: 0.8rem; }
      .megaMenu .lang-list ul ul li {
        display: inline-block;
        font-size: 0.687rem;
        letter-spacing: 0.025rem;
        line-height: 0.8rem;
        text-transform: uppercase;
        margin-right: 5px;
        margin-bottom: 0;
        padding-left: 0; }
        .megaMenu .lang-list ul ul li a:hover {
          color: #0a264d; }
        .megaMenu .lang-list ul ul li a:after {
          display: block;
          content: "|";
          float: right;
          margin-left: 5px;
          color: #00c5e8; }
        .megaMenu .lang-list ul ul li:last-child a:after {
          display: none; }
  @media (min-width: 1024px) {
    .megaMenu .hat {
      display: block;
      height: 45px; } }
  .megaMenu .navCMC {
    position: relative;
    margin: 0;
    padding: 0;
    height: 72px;
    background: #f1f2f4;
    border-top: 1px solid #e8e9ed;
    border-bottom: 1px solid #fff;
    -webkit-transition: 0.3s linear background-color, 0.3s linear border-top-color, 0.3s linear border-bottom-color;
    -moz-transition: 0.3s linear background-color, 0.3s linear border-top-color, 0.3s linear border-bottom-color;
    -ms-transition: 0.3s linear background-color, 0.3s linear border-top-color, 0.3s linear border-bottom-color;
    -o-transition: 0.3s linear background-color, 0.3s linear border-top-color, 0.3s linear border-bottom-color;
    transition: 0.3s linear background-color, 0.3s linear border-top-color, 0.3s linear border-bottom-color;
    font-family: latoregular, sans-serif; }
    .megaMenu .navCMC ul {
      position: relative;
      margin-bottom: 0;
      padding-left: 0; }
    .megaMenu .navCMC ul li {
      position: static;
      margin-bottom: 0;
      padding-left: 0; }
    .megaMenu .navCMC li:before {
      display: none; }
    .megaMenu .navCMC a {
      color: #1b2429;
      transition: color 0.1s ease-in-out; }
    .megaMenu .navCMC-dark {
      background-color: #1b2429;
      border-top: 1px solid #1b2429;
      border-bottom: 1px solid #222e35; }
      .megaMenu .navCMC-dark > div > ul > li > a {
        color: #fff; }
    .megaMenu .navCMC-underline {
      position: absolute;
      bottom: 1px;
      width: 0;
      opacity: 0;
      border-bottom: 4px solid #00c5e8;
      -moz-transform: translate3d(0, 0, 0);
      -o-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      -webkit-transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
      -moz-transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
      -ms-transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
      -o-transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
      transition: transform 0.3s ease-in-out, width 0.3s ease-in-out; }
    .megaMenu .navCMC-logo {
      display: inline-block;
      padding-right: 15px; }
      .megaMenu .navCMC-logo a {
        position: relative;
        width: 82px;
        height: 50px;
        top: 9px;
        float: left;
        background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iNTAiIHdpZHRoPSI4NyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZpZXdCb3g9IjAgMCA4NyA1MCI+PGcgZmlsbD0iIzBlYmNkYyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMSAuODUpIj48cGF0aCBpZD0iYSIgZD0iTTUuMyA0Ni44Yy41IDAgMS4xLS4xIDEuOC0uNGwuNi0uMnYxLjVsLS40LjFjLS44LjItMS42LjQtMi4yLjQtMi4xIDAtMy42LTEuMy0zLjYtNCAwLTIuNiAxLjUtNCAzLjYtNCAuNiAwIDEuNC4xIDIuMi40bC40LjF2MS41bC0uNi0uMmMtLjgtLjItMS40LS40LTEuOC0uNC0xLjQgMC0yLjEuOC0yLjEgMi42cy43IDIuNiAyLjEgMi42eiIvPjxwYXRoIGlkPSJiIiBkPSJNMTEgNDguMUg5LjR2LTYuM2MwLS43LjMtMSAuOS0xLjIuOS0uMyAxLjYtLjQgMi4zLS40LjkgMCAxLjYuMiAyIC42LjgtLjQgMS42LS42IDIuNS0uNiAyIDAgMi44IDEuMSAyLjggMi43VjQ4aC0xLjZ2LTVjMC0uOC0uMy0xLjQtMS4zLTEuNC0uNyAwLTEuMS4yLTEuNi40LjEuMi4yLjYuMi45VjQ4SDE0di01YzAtLjgtLjMtMS40LTEuMy0xLjQtLjQgMC0uOCAwLTEuNS4zdjYuMnoiLz48dXNlIHhsaW5rOmhyZWY9IiNhIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxOS45KSIgaGVpZ2h0PSIxMDAlIiB3aWR0aD0iMTAwJSIvPjxwYXRoIGQ9Ik00OS45IDQ1Ljl2LTNjMC0xLjktLjktMi42LTMtMi42LS44IDAtMS42LjEtMi42LjR2MS40aC4xYy45LS4zIDEuNy0uNCAyLjQtLjQgMS4zIDAgMS41LjQgMS41IDEuM3YuNWgtMS43Yy0xLjggMC0zLjUuNS0zLjUgMi40IDAgMi41IDMuMSAyLjQgMy43IDIuNCAwIDAgMS44LS4xIDIuMy0uNC40LS4zLjctLjcuNy0xLjIuMS0uNi4xLS44LjEtLjh6bS0xLjUuNWMwIC4yLS4xLjMtLjIuMy0uMi4yLTEuMi4yLTEuMi4yLS43IDAtMi4yLjEtMi4yLTEuMSAwLS44LjYtMS4yIDEuNy0xLjJoMS45djEuOHoiLz48dXNlIHhsaW5rOmhyZWY9IiNiIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMS45KSIgaGVpZ2h0PSIxMDAlIiB3aWR0aD0iMTAwJSIvPjxwYXRoIGQ9Ik01NS41IDQwLjNjLS4zIDAtLjctLjEtMS0uMS0yIDAtMyAuOC0zIDIuNlY0OGgxLjd2LTUuMmMwLS45LjItMS4zIDEuNS0xLjMuMiAwIC41IDAgLjguMXYtMS4zek02Mi4yIDQ4LjFsLTIuMy0zLjctLjcuOGMtLjUuNS0uNC44LS40IDEuN3YxLjJoLTEuNlYzOGgxLjZ2NS40bDIuNy0zaDJMNjEuMSA0M2wzIDUuMWgtMS45ek03Ny40IDQ2LjVjLS4zLjItLjcuMy0xLjQuMy0uOCAwLTEuMS0uNS0xLjEtMS4zdi0zLjhINzd2LTEuM2gtMlYzOGgtMS42djIuNGgtMS4xdjEuM2gxLjF2My44YzAgMS44LjggMi43IDIuNSAyLjcuOCAwIDEuMy0uMiAxLjYtLjN2LTEuNHpNNzAuOCA0Ni40bC0uNC4xYy0uOS4zLTEuNS4zLTIuMi4zLTEuMyAwLTIuMi0uNi0yLjMtMmg0LjhjLjUgMCAuOC0uMy44LS44IDAtMi42LTEuNC0zLjgtMy41LTMuOC0xLjkgMC0zLjYgMS4yLTMuNiA0IDAgMi42IDEuNSAzLjkgMy44IDMuOS45IDAgMS41LS4xIDIuNS0uNGguMXYtMS4zek02OCA0MS41YzEuNCAwIDEuOS45IDEuOSAyLjFINjZjLjEtMS4zLjgtMi4xIDItMi4xek04MC44IDQ0LjhsMS41LjJjLjguMSAxLjEuNSAxLjEuOSAwIC44LS43IDEtMS41IDFzLTEuNCAwLTIuNi0uNGwtLjUtLjF2MS40bC4zLjFjMS4xLjMgMS44LjQgMi44LjQgMS43IDAgMy4xLS43IDMuMS0yLjQgMC0xLjItLjgtMS45LTIuMi0yLjFsLTEuNC0uMmMtLjgtLjEtMS4xLS40LTEuMS0uOSAwLS43LjYtMSAxLjMtMSAuOCAwIDEuNy4yIDIuNS41aC4xdi0xLjRjLS45LS4zLTEuNi0uNC0yLjYtLjQtMS42IDAtMi45LjgtMi45IDIuNCAwIDEuMS44IDEuNyAyLjEgMnoiLz48cGF0aCBpZD0iYyIgZD0iTTI0LjYgMjMuOGwtMi4zLjdjLTMgLjgtNS40IDEuNC03LjMgMS40LTUuNCAwLTguMi0zLjMtOC4yLTEwLjFDNi44IDguOSA5LjUgNS42IDE1IDUuNmMxLjkgMCA0LjMuNiA3LjMgMS40bDIuMy43VjEuOWwtMS41LS40QzE5LjguNSAxNi45IDAgMTQuMyAwIDUuOCAwIDAgNS40IDAgMTUuOGMwIDEwLjggNS44IDE1LjggMTQuNCAxNS44IDIuNSAwIDUuNC0uNiA4LjgtMS42bDEuNS0uNHYtNS44eiIvPjxwYXRoIGQ9Ik0zNC4zIDMxLjJjMSAwIDEuOC0uOCAxLjgtMS44VjguOGMwLTIuNy0xLjQtNC0zLjktNC44LTEtLjMtMi0uNi0yLjktLjh2MjguMWMwLS4xIDQtLjEgNS0uMXpNNTYuMiAyOS41Vi4yYy0uOS4yLTEuOS41LTIuOS44LTIuNS44LTMuOSAyLjEtMy45IDQuOFYzMS4yaDVjMSAwIDEuOC0uOCAxLjgtMS43ek00NC40IDMxLjJjMSAwIDEuOC0uOCAxLjgtMS44VjljMC0yLjctMS40LTQtMy45LTQuOC0xLS4zLTItLjYtMi45LS44djI3LjhoNXoiLz48dXNlIHhsaW5rOmhyZWY9IiNjIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2MC4xKSIgaGVpZ2h0PSIxMDAlIiB3aWR0aD0iMTAwJSIvPjwvZz48L3N2Zz4=") no-repeat 50% 50%;
        background-size: contain; }
      .megaMenu .navCMC-logo img {
        /* TODO: should remove Logo img from Menu and clean up CSS */
        display: none; }
    .megaMenu .navCMC-menu {
      display: none; }
    .megaMenu .navCMC-cat1 {
      margin: 0 auto;
      height: 72px; }
      .megaMenu .navCMC-cat1 > li {
        /*display: inline-block;*/
        margin: 0; }
        .megaMenu .navCMC-cat1 > li:first-child a {
          padding-left: 0; }
        .megaMenu .navCMC-cat1 > li:last-child a {
          padding-right: 0; }
        .megaMenu .navCMC-cat1 > li > a {
          display: block;
          padding: 0 8px;
          height: 90px;
          font-size: 13px;
          line-height: 90px;
          letter-spacing: 0.4px;
          text-transform: uppercase; }
          .megaMenu .navCMC-cat1 > li > a:hover {
            color: #00c5e8; }
        .megaMenu .navCMC-cat1 > li a.Button {
          height: auto;
          margin-top: 12px;
          line-height: inherit;
          padding: 7px 6px;
          text-transform: none;
          font-size: 15px; }
        .megaMenu .navCMC-cat1 > li a.btn-create-account {
          color: #fff;
          border-color: #0a264d;
          background-position: -500px -100px;
          -webkit-transition: background-position 0.4s ease-in-out, color 0.5s, border-color 0.5s;
          -moz-transition: background-position 0.4s ease-in-out, color 0.5s, border-color 0.5s;
          -ms-transition: background-position 0.4s ease-in-out, color 0.5s, border-color 0.5s;
          -o-transition: background-position 0.4s ease-in-out, color 0.5s, border-color 0.5s;
          transition: background-position 0.4s ease-in-out, color 0.5s, border-color 0.5s; }
          .megaMenu .navCMC-cat1 > li a.btn-create-account:hover {
            background-position: -300px -100px;
            border-color: #0a264d; }
          .megaMenu .navCMC-cat1 > li a.btn-create-account.Button--large-max-width:hover {
            background-position: -140px -100px; }
        .megaMenu .navCMC-cat1 > li a.btn-login {
          color: #00C5EB;
          background-position: -500px -200px;
          -webkit-transition: background-position 0.4s ease-in-out, color 0.5s ease-out, border-color 0.5s;
          -moz-transition: background-position 0.4s ease-in-out, color 0.5s ease-out, border-color 0.5s;
          -ms-transition: background-position 0.4s ease-in-out, color 0.5s ease-out, border-color 0.5s;
          -o-transition: background-position 0.4s ease-in-out, color 0.5s ease-out, border-color 0.5s;
          transition: background-position 0.4s ease-in-out, color 0.5s ease-out, border-color 0.5s; }
          .megaMenu .navCMC-cat1 > li a.btn-login:hover {
            background-position: -300px -200px; }
        .megaMenu .navCMC-cat1 > li.navCMC-mobile {
          margin-left: 20px;
          float: right; }
          .megaMenu .navCMC-cat1 > li.navCMC-mobile a {
            position: relative;
            margin-top: 20px;
            height: auto;
            color: #00c5e8;
            font-size: 20px;
            line-height: 0;
            text-align: center; }
            .megaMenu .navCMC-cat1 > li.navCMC-mobile a span {
              text-transform: lowercase;
              font-size: 10px; }
    .megaMenu .navCMC-btn {
      margin-left: 10px;
      float: right;
      height: 72px; }
    @media (min-width: 1024px) {
      .megaMenu .navCMC .navCMC-cat1 {
        height: 92px; }
      .megaMenu .navCMC .navCMC-btn {
        height: 92px; } }
    .megaMenu .navCMC-slide {
      position: absolute;
      width: 100%;
      top: 91px;
      bottom: 0;
      display: none;
      visibility: hidden;
      background: #FBFBFB;
      z-index: -1;
      border-right: 1px solid rgba(0, 0, 0, 0.1);
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      border-left: 1px solid rgba(0, 0, 0, 0.1);
      will-change: transform;
      -moz-transform: translate3d(0px, -320px, 0);
      -o-transform: translate3d(0px, -320px, 0);
      -ms-transform: translate3d(0px, -320px, 0);
      -webkit-transform: translate3d(0px, -320px, 0);
      transform: translate3d(0px, -320px, 0); }
      .megaMenu .navCMC-slide-container {
        position: relative;
        width: 100%;
        /*max-width: 1150px;*/
        min-height: 320px;
        top: 0;
        padding: 20px 60px 63px;
        display: inline-block;
        overflow-y: hidden; }
    .megaMenu .navCMC-cross, .megaMenu .navCMC-cross_search {
      position: absolute;
      width: 46px;
      height: 46px;
      bottom: -21px;
      left: calc(50% - 23px);
      border-radius: 50%;
      background: #FBFBFB;
      cursor: pointer;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
      .megaMenu .navCMC-cross:before, .megaMenu .navCMC-cross_search:before {
        position: absolute;
        content: '';
        width: 28px;
        height: 28px;
        top: 10px;
        left: 9px;
        background: #00c5e8;
        border-radius: 50%; }
      .megaMenu .navCMC-cross:after, .megaMenu .navCMC-cross_search:after {
        position: absolute;
        content: '';
        background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSIxMnB4IiB2aWV3Qm94PSItMiAtMiAxMiAxMiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggMzkuMSAoMzE3MjApIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8cGF0aCBkPSJNMCwwIEw4LjAxMzE0OTI2LDguMDEzMTQ5MjYiIGlkPSJMaW5lIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgZmlsbD0ibm9uZSI+PC9wYXRoPgogICAgPHBhdGggZD0iTTAsMCBMOC4wMTMxNDkyNiw4LjAxMzE0OTI2IiBpZD0iTGluZSIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiIGZpbGw9Im5vbmUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQuMDA2NTc1LCA0LjAwNjU3NSkgc2NhbGUoLTEsIDEpIHRyYW5zbGF0ZSgtNC4wMDY1NzUsIC00LjAwNjU3NSkgIj48L3BhdGg+Cjwvc3ZnPg==") no-repeat 0 0;
        width: 12px;
        height: 12px;
        top: 18px;
        left: 17px;
        transition: transform 0.3s;
        transform: rotate(0deg); }
      .megaMenu .navCMC-cross:hover:after, .megaMenu .navCMC-cross_search:hover:after {
        transform: rotate(180deg); }
    .megaMenu .navCMC-cat2 {
      padding: 0;
      overflow: hidden; }
      .megaMenu .navCMC-cat2 li {
        padding-left: 0; }
        .megaMenu .navCMC-cat2 li a {
          display: block;
          font-size: 15px;
          line-height: 1.8em;
          text-overflow: ellipsis;
          overflow: hidden;
          letter-spacing: 0.5px;
          color: #1b2429; }
          .megaMenu .navCMC-cat2 li a:hover {
            color: #00c5e8; }
          .megaMenu .navCMC-cat2 li a i {
            position: relative;
            top: 4px;
            margin-right: 6px;
            font-size: 20px; }
        .megaMenu .navCMC-cat2 li a:not(:first-child) {
          margin-top: 20px; }
        .megaMenu .navCMC-cat2 li ul {
          padding: 0; }
      .megaMenu .navCMC-cat2:first-child {
        padding-left: 0; }
      .megaMenu .navCMC-cat2:last-child {
        padding-right: 0; }
      .megaMenu .navCMC-cat2 li.navCMC-cat2-title {
        /* thanks to bios silly setup - need to override this way */
        margin-bottom: 12px;
        padding-bottom: 12px;
        padding-right: 20px;
        opacity: 0;
        -webkit-transition: opacity 0.2s ease-in-out;
        -moz-transition: opacity 0.2s ease-in-out;
        -ms-transition: opacity 0.2s ease-in-out;
        -o-transition: opacity 0.2s ease-in-out;
        transition: opacity 0.2s ease-in-out; }
        .megaMenu .navCMC-cat2 li.navCMC-cat2-title:nth-child(4n+5) {
          clear: both; }
        .megaMenu .navCMC-cat2 li.navCMC-cat2-title:nth-child(4n+4) {
          padding-right: 0; }
      .megaMenu .navCMC-cat2-title > a {
        margin-bottom: 16px;
        padding-bottom: 16px;
        padding-left: 16px;
        background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOHB4IiBoZWlnaHQ9IjEwcHgiIHZpZXdCb3g9Ii0xIC0xIDggMTAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+Cjxwb2x5bGluZSBpZD0iUGF0aC0xIiBzdHJva2U9IiNBM0EzQTMiIHN0cm9rZS13aWR0aD0iMiIgZmlsbD0ibm9uZSIgcG9pbnRzPSIwIDAgNSA0IDAgOCI+PC9wb2x5bGluZT48L3N2Zz4=") no-repeat 0 9px;
        border-bottom: 1px solid #D8D8D8;
        font-weight: bold; }
    .megaMenu .navCMC-cat1 > li > a.active {
      color: #00c5e8; }
    .megaMenu .navCMC-cat1 > li > a.active ~ .navCMC-slide {
      /*display: block;*/ }
    .megaMenu .navCMC-createAccount {
      position: absolute;
      width: 100%;
      opacity: 0;
      will-change: transform; }
      .no-js .megaMenu .navCMC-createAccount {
        top: -1000em; }
      .megaMenu .navCMC-createAccount i.navCMC-triangle {
        position: absolute;
        left: 0;
        top: 0;
        -webkit-transition: transform 0.3s ease-in-out;
        -moz-transition: transform 0.3s ease-in-out;
        -ms-transition: transform 0.3s ease-in-out;
        -o-transition: transform 0.3s ease-in-out;
        transition: transform 0.3s ease-in-out; }
        .megaMenu .navCMC-createAccount i.navCMC-triangle:after {
          content: "";
          position: absolute;
          top: -16px;
          right: 0;
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 0 17px 17px 17px;
          border-color: transparent transparent #3a4044 transparent; }
      .megaMenu .navCMC-createAccount-wrap {
        position: relative;
        display: none;
        max-height: calc(100vh - 116px);
        max-width: 1360px;
        margin: 0 auto;
        overflow-y: auto; }
        .megaMenu .navCMC-createAccount-wrap .col-md-4 {
          padding: 0; }
          .megaMenu .navCMC-createAccount-wrap .col-md-4 div {
            padding: 50px 50px 20px; }
      .megaMenu .navCMC-createAccount-close {
        position: absolute;
        right: 26px;
        top: 26px;
        z-index: 30;
        color: #f1f2f4;
        cursor: pointer;
        transition: color 0.3s ease-in-out; }
        .megaMenu .navCMC-createAccount-close:hover {
          color: #00c5e8; }
      .megaMenu .navCMC-createAccount-dark div {
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/$color-dark-blue-1+0,3a4044+70 */
        background: #1b2429;
        /* Old browsers */
        background: -moz-linear-gradient(45deg, #1b2429 0%, #3a4044 70%);
        /* FF3.6-15 */
        background: -webkit-linear-gradient(45deg, #1b2429 0%, #3a4044 70%);
        /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(45deg, #1b2429 0%, #3a4044 70%);
        /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ }
      .megaMenu .navCMC-createAccount-light div {
        background: rgba(232, 234, 236, 0.99);
        background: -moz-linear-gradient(45deg, rgba(232, 234, 236, 0.99) 0%, rgba(241, 242, 244, 0.99) 70%);
        background: -webkit-linear-gradient(45deg, rgba(232, 234, 236, 0.99) 0%, rgba(241, 242, 244, 0.99) 70%);
        background: -ms-linear-gradient(45deg, rgba(232, 234, 236, 0.99) 0%, rgba(241, 242, 244, 0.99) 70%);
        background: linear-gradient(45deg, rgba(232, 234, 236, 0.99) 0%, rgba(241, 242, 244, 0.99) 70%); }
      .megaMenu .navCMC-createAccount h2 {
        margin-bottom: 40px;
        font-size: 22px;
        text-align: center;
        color: #1b2429; }
      .megaMenu .navCMC-createAccount p {
        margin-top: 8px; }
        .megaMenu .navCMC-createAccount p.navCMC-createAccount-small {
          font-size: 14px;
          line-height: 20px; }
      .megaMenu .navCMC-createAccount .Button--dark-bg {
        color: #fff; }
      .megaMenu .navCMC-createAccount .Button {
        margin-bottom: 0; }
      .megaMenu .navCMC-createAccount ul {
        margin: 0 0 2.5em 0;
        padding: 0; }
      .megaMenu .navCMC-createAccount ul li {
        position: relative;
        margin-bottom: 1.2em;
        padding-left: 50px; }
        .megaMenu .navCMC-createAccount ul li:before {
          content: "\e618";
          display: block;
          position: absolute;
          left: 0;
          top: 5px;
          color: #00c5e8;
          font-family: 'icomoon';
          font-size: 1.8rem;
          font-style: normal;
          font-weight: normal;
          font-variant: normal;
          text-transform: none;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          background-color: transparent; }
      .megaMenu .navCMC-createAccount-dark h2 {
        color: #fff; }
      .megaMenu .navCMC-createAccount-dark p {
        color: #00c5e8; }
      .megaMenu .navCMC-createAccount-dark a {
        color: #fff; }
      .megaMenu .navCMC-createAccount-dark ul li {
        color: #00c5e8; }
    .megaMenu .navCMC .btn-login {
      display: none; }
    @media (min-width: 480px) {
      .megaMenu .navCMC-cat1 > li a.Button.btn-create-account {
        padding: 9px 10px;
        margin-left: 15px; } }
    @media (min-width: 1024px) {
      .megaMenu .navCMC {
        height: 92px; }
        .megaMenu .navCMC-cat1 > li {
          display: inline-block; }
          .megaMenu .navCMC-cat1 > li a.Button {
            min-width: 100px;
            width: auto;
            margin-top: 24px; }
          .megaMenu .navCMC-cat1 > li.navCMC-mobile {
            display: none; }
        .megaMenu .navCMC-createAccount-wrap {
          display: block; }
        .megaMenu .navCMC-menu {
          display: block; }
        .megaMenu .navCMC .btn-login {
          display: block; }
        .megaMenu .navCMC-logo a {
          top: 17px; } }
    @media (min-width: 1200px) {
      .megaMenu .navCMC-slide, .megaMenu .navCMC-container {
        max-width: 1150px; }
      .megaMenu .navCMC-cat1 > li > a {
        padding: 0 20px; }
        .megaMenu .navCMC-cat1 > li > a.Button {
          min-width: 150px; }
      .megaMenu .navCMC-createAccount-wrap {
        position: relative;
        max-height: calc(100vh - 135px); } }
  .megaMenu .navCMC-magnifier {
    display: none !important; }
    .megaMenu .navCMC-magnifier-box {
      position: absolute;
      padding: 70px 0;
      top: auto;
      left: 10px;
      right: 10px;
      height: 200px;
      transform: translate3d(0, -240px, 0);
      visibility: hidden;
      z-index: -1;
      background: #FBFBFB;
      border-right: 1px solid rgba(0, 0, 0, 0.1);
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      border-left: 1px solid rgba(0, 0, 0, 0.1); }
    .megaMenu .navCMC-magnifier-fields {
      position: relative;
      margin: 0 auto;
      max-width: 800px;
      border: 1px solid rgba(94, 94, 94, 0.1);
      background: white; }
      .megaMenu .navCMC-magnifier-fields label {
        padding-left: 16px;
        line-height: 47px;
        color: rgba(10, 38, 77, 0.3);
        transition: color 0.3s; }
      .megaMenu .navCMC-magnifier-fields input {
        padding: 0 40px 0 16px; }
      .megaMenu .navCMC-magnifier-fields input:focus + label {
        color: rgba(10, 38, 77, 0.1); }
      .megaMenu .navCMC-magnifier-fields button i:before {
        position: relative;
        top: -1px;
        font-size: 26px;
        transition: color 0.3s; }
      .megaMenu .navCMC-magnifier-fields button:focus i:before, .megaMenu .navCMC-magnifier-fields button:active i:before {
        color: #0a264d; }
  @media (min-width: 1200px) {
    .megaMenu .navCMC-magnifier-box {
      left: 68px;
      right: 68px; }
      .megaMenu .navCMC-magnifier-box label {
        line-height: 60px; }
      .megaMenu .navCMC-magnifier-box button i:before {
        top: -4px; } }

/**
* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
* Mobile Menu - is added dynamically, therefore has ID and lives alone as module itself
* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
*/
#navCMC-mob {
  z-index: 10;
  position: fixed;
  overflow: hidden;
  max-width: 480px;
  width: 100%;
  top: 0;
  bottom: 0;
  padding-top: 70px;
  padding-bottom: 40px;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
  will-change: transform;
  -moz-transform: translate3d(-480px, 0, 0);
  -o-transform: translate3d(-480px, 0, 0);
  -ms-transform: translate3d(-480px, 0, 0);
  -webkit-transform: translate3d(-480px, 0, 0);
  transform: translate3d(-480px, 0, 0);
  -webkit-transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
  -moz-transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
  -ms-transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
  -o-transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, width 0.3s ease-in-out; }
  #navCMC-mob ul {
    position: relative;
    margin-bottom: 0;
    padding: 0; }
  #navCMC-mob ul li {
    margin-bottom: 0;
    padding-left: 0; }
  #navCMC-mob li:before {
    display: none; }
  #navCMC-mob .slimScrollDiv, #navCMC-mob-inner {
    -webkit-overflow-scrolling: touch !important; }

ul#navCMC-menu {
  margin: 0;
  border-top: 2px solid #ffffff; }
  ul#navCMC-menu > li > .url .title {
    text-transform: uppercase; }
  ul#navCMC-menu .url {
    position: relative;
    height: 51px;
    border-bottom: 1px solid #ffffff;
    background: #f9f9f9;
    cursor: default; }
  ul#navCMC-menu .title {
    display: block;
    position: relative;
    margin-right: 50px;
    padding-left: 35px;
    padding-top: 1px;
    line-height: 50px;
    font-size: 14px;
    color: #1b2429; }
    ul#navCMC-menu .title:before {
      content: "+";
      position: absolute;
      width: 12px;
      top: -1px;
      left: 12px;
      color: #00c5e8;
      font-size: 20px;
      text-align: center;
      text-shadow: none; }
  ul#navCMC-menu .open > .url .title:before {
    content: "-";
    top: -2px; }
  ul#navCMC-menu .open > .url > .title {
    font-weight: bold; }
  ul#navCMC-menu ul ul li a {
    background: #e8e9ed; }
  ul#navCMC-menu a {
    position: absolute;
    display: block;
    width: 52px;
    height: 50px;
    top: 0;
    right: 0;
    padding-right: 52px;
    color: transparent;
    font-size: 15px;
    background: #f1f2f4;
    border-left: 1px solid #ffffff;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-transition: background 0.3s ease-in-out, color 0.1s ease-in-out;
    -moz-transition: background 0.3s ease-in-out, color 0.1s ease-in-out;
    -ms-transition: background 0.3s ease-in-out, color 0.1s ease-in-out;
    -o-transition: background 0.3s ease-in-out, color 0.1s ease-in-out;
    transition: background 0.3s ease-in-out, color 0.1s ease-in-out; }
    ul#navCMC-menu a:after {
      content: "\e612";
      position: absolute;
      width: 20px;
      top: 14px;
      right: 15px;
      height: 20px;
      color: #00c5e8;
      text-align: center;
      font-size: 14px;
      font-weight: bold;
      font-family: 'icomoon'; }
    ul#navCMC-menu a i {
      position: relative;
      top: 4px;
      margin-right: 10px;
      font-size: 20px; }
  ul#navCMC-menu li ul {
    display: none;
    padding-left: 0;
    transform: translate3d(0, 0, 0); }
    ul#navCMC-menu li ul li .url {
      background: #eeeeee; }
    ul#navCMC-menu li ul li .title {
      font-size: 15px;
      margin-left: 20px; }
    ul#navCMC-menu li ul ul {
      display: none;
      padding-left: 0;
      transform: translate3d(0, 0, 0); }
      ul#navCMC-menu li ul ul li .url {
        background: #EDF3F4; }
      ul#navCMC-menu li ul ul li .title {
        font-size: 15px; }
        ul#navCMC-menu li ul ul li .title:before {
          display: none; }
  ul#navCMC-menu .js-mobile > .url a.single {
    padding-left: 35px;
    color: #1b2429;
    font-size: 14px;
    text-transform: uppercase; }
  ul#navCMC-menu a.single {
    position: relative;
    width: 100%;
    padding-left: 55px;
    line-height: 50px;
    background: transparent;
    color: #00c5e8; }
    ul#navCMC-menu a.single:after {
      line-height: 24px; }

#navCMC-mob {
  background: #fff; }
  #navCMC-mob .js-btn-log-in {
    margin: 14px 0 14px 35px;
    max-width: 150px; }
  #navCMC-mob #flags {
    display: none;
    margin: 25px 0 0 35px; }
    #navCMC-mob #flags > li {
      margin: 15px 0; }
      #navCMC-mob #flags > li:first-child {
        margin: 0; }
      #navCMC-mob #flags > li:hover .lang-country-name {
        color: #0a264d; }
    #navCMC-mob #flags li .lang-flag {
      margin-right: 10px; }
    #navCMC-mob #flags li .lang-country-name {
      position: relative;
      top: 1px;
      text-transform: uppercase; }
    #navCMC-mob #flags li.multiple-countries ul {
      margin-left: 35px; }
      #navCMC-mob #flags li.multiple-countries ul li {
        display: inline-block;
        font-size: 0.687rem;
        letter-spacing: 0.025rem;
        line-height: 0.8rem;
        text-transform: uppercase;
        margin-right: 5px;
        margin-bottom: 0;
        padding-left: 0; }
        #navCMC-mob #flags li.multiple-countries ul li:after {
          display: block;
          content: "|";
          float: right;
          margin-left: 5px;
          color: #00c5e8; }
        #navCMC-mob #flags li.multiple-countries ul li a:hover {
          color: #0a264d; }
      #navCMC-mob #flags li.multiple-countries ul li:last-child:after {
        display: none; }
  #navCMC-mob p.lang-heading {
    display: block;
    position: relative;
    margin: 15px 0 0 0;
    padding-left: 35px;
    line-height: 50px;
    font-size: 14px;
    text-transform: uppercase;
    cursor: default; }
    #navCMC-mob p.lang-heading a.lang-flag {
      position: relative;
      top: -1px;
      margin-right: 14px; }
    #navCMC-mob p.lang-heading a.lang-country-name {
      position: relative;
      top: 1px;
      font-size: 16px; }
    #navCMC-mob p.lang-heading:before {
      content: "+";
      position: absolute;
      width: 12px;
      top: -1px;
      left: 12px;
      color: #00c5e8;
      font-size: 20px;
      text-align: center;
      text-shadow: none; }
    #navCMC-mob p.lang-heading.open:before {
      content: "-";
      top: -2px; }
  #navCMC-mob .hat-call-btn {
    margin: 6px 12px 12px 33px; }
    #navCMC-mob .hat-call-btn a {
      margin-left: 9px;
      color: #58585a;
      font-size: 14px; }
      #navCMC-mob .hat-call-btn a span {
        color: #00c5e8;
        font-size: 16px; }
      #navCMC-mob .hat-call-btn a:hover, #navCMC-mob .hat-call-btn a:hover span {
        color: #0a264d; }
  #navCMC-mob .hat-sites {
    margin-left: 35px;
    line-height: 50px; }
    #navCMC-mob .hat-sites li {
      display: inline-block; }
      #navCMC-mob .hat-sites li:after {
        display: block;
        content: "|";
        float: right;
        margin-left: 5px;
        color: #00c5e8; }
      #navCMC-mob .hat-sites li:first-child a {
        padding-left: 0; }
    #navCMC-mob .hat-sites li:last-child:after {
      display: none; }
    #navCMC-mob .hat-sites a {
      padding: 0 10px; }
      #navCMC-mob .hat-sites a:hover {
        color: #0a264d; }
  #navCMC-mob .navCMC-magnifier-box {
    display: none !important;
    position: relative;
    height: 51px;
    line-height: 51px;
    background: #f9f9f9;
    /* magic with different states of search box and label and button colors */ }
    #navCMC-mob .navCMC-magnifier-box:after {
      content: "";
      position: absolute;
      background: white;
      top: 8px;
      bottom: 8px;
      right: 60px;
      left: 35px; }
    #navCMC-mob .navCMC-magnifier-box input {
      padding-left: 39px;
      padding-right: 50px;
      height: 51px; }
    #navCMC-mob .navCMC-magnifier-box input:focus + label {
      color: rgba(10, 38, 77, 0.05); }
      #navCMC-mob .navCMC-magnifier-box input:focus + label + button {
        color: #00c5e8; }
    #navCMC-mob .navCMC-magnifier-box label {
      padding-left: 39px;
      padding-right: 50px;
      height: 51px;
      line-height: 51px;
      color: rgba(10, 38, 77, 0.3);
      transition: color 0.3s; }
    #navCMC-mob .navCMC-magnifier-box button {
      /* This doesn't appear to be used -- overridden by '.SearchBar-button'. If it does show it's face, it should really have the global var for $color-grey-1 for color style:; but test first before changing */
      background: #f1f2f4;
      height: 100%;
      top: 0;
      width: 53px;
      right: 0;
      border-left: 1px solid #fff;
      color: #aaaaaa; }
      #navCMC-mob .navCMC-magnifier-box button i:before {
        position: relative;
        top: -2px;
        font-size: 15px;
        transition: color 0.3s; }
      #navCMC-mob .navCMC-magnifier-box button:focus i:before, #navCMC-mob .navCMC-magnifier-box button:active i:before {
        color: #0a264d; }
  #navCMC-mob .Icon.Icon--phone-24 {
    top: 8px;
    position: relative;
    color: #00c5e8; }
    #navCMC-mob .Icon.Icon--phone-24:before {
      font-size: 30px; }
  #navCMC-mob .FlagImage {
    width: 28px;
    height: 21px;
    background: url("https://assets.cmcmarkets.com/images/flags.png") center center no-repeat; }
    #navCMC-mob .FlagImage--australia {
      background-position: center -18px; }
    #navCMC-mob .FlagImage--austria {
      height: 19px;
      background-position: center 0; }
    #navCMC-mob .FlagImage--canada {
      background-position: center -38px; }
    #navCMC-mob .FlagImage--france {
      height: 22px;
      background-position: center -58px; }
    #navCMC-mob .FlagImage--germany {
      height: 20px;
      background-position: center -79px; }
    #navCMC-mob .FlagImage--ireland {
      background-position: center -99px; }
    #navCMC-mob .FlagImage--italy {
      background-position: center -119px; }
    #navCMC-mob .FlagImage--new-zealand {
      background-position: center -139px; }
    #navCMC-mob .FlagImage--norway {
      height: 23px;
      background-position: center -159px; }
    #navCMC-mob .FlagImage--poland {
      height: 19px;
      background-position: center -266px; }
    #navCMC-mob .FlagImage--singapore {
      height: 21px;
      background-position: center -181px; }
    #navCMC-mob .FlagImage--spain {
      height: 23px;
      background-position: center -202px; }
    #navCMC-mob .FlagImage--sweden {
      background-position: center -224px; }
    #navCMC-mob .FlagImage--united-kingdom {
      height: 23px;
      background-position: center -244px; }
    #navCMC-mob .FlagImage--globe {
      margin-top: 4px;
      height: 23px;
      background-position: center -285px; }

/**
* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
* JS detects if mobile device (Tablets/phones) and adding class to body
* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
*/
body.mobileEvery .megaMenu .navCMC-cat1 > li.navCMC-mobile {
  display: block; }

body.mobileEvery .megaMenu .navCMC-createAccount-wrap {
  display: none; }

body.mobileEvery .megaMenu .navCMC-menu {
  display: none; }

body.mobileEvery .megaMenu .navCMC .btn-login {
  display: none; }

div#debugger:after {
  content: '0 - 320';
  position: fixed;
  bottom: 0;
  right: 0;
  padding: 1px 8px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  z-index: 100001;
  font-size: 11px;
  border-top-left-radius: 10px;
  box-shadow: 0 0 2px 1px #000; }

@media (min-width: 320px) {
  div#debugger:after {
    content: "size > 320px"; } }

@media (min-width: 480px) {
  div#debugger:after {
    content: "size > 480px"; } }

@media (min-width: 768px) {
  div#debugger:after {
    content: "size > 768px"; } }

@media (min-width: 1024px) {
  div#debugger:after {
    content: "size > 1024px"; } }

@media (min-width: 1200px) {
  div#debugger:after {
    content: "size > 1200px"; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.Section-platform-guides h3 {
  color: #0a264d; }

.Section-platform-guides .Article-list {
  padding-bottom: 133px; }

.Article-list {
  padding-bottom: 48px; }
  @media (min-width: 991px) {
    .Article-list .col-article-list-single-item {
      margin: 0 0 0 33%; } }
  .Article-list .ArticleTrailer {
    margin-bottom: 12px; }
  .Article-list .ArticleTrailer-details {
    background: #f1f2f4;
    z-index: 2; }
    .Article-list .ArticleTrailer-details .ArticleTrailer-headline--small {
      color: #0a264d; }
    .Article-list .ArticleTrailer-details .ArticleTrailer-metaData {
      color: #0a264d;
      font-size: 0.6rem;
      padding-left: 0;
      right: 10px; }
      .Article-list .ArticleTrailer-details .ArticleTrailer-metaData .Icon--dot {
        background: #0a264d;
        margin-left: 0.25rem; }
      .Article-list .ArticleTrailer-details .ArticleTrailer-metaData > div {
        width: 80%; }
    .Article-list .ArticleTrailer-details .Icon--webinar,
    .Article-list .ArticleTrailer-details .Icon--article {
      display: inline-block;
      font-size: 1.9rem;
      margin-left: 0;
      margin-right: 7px;
      vertical-align: middle; }
  .Article-list.Article-list-spacer {
    padding-top: 3.6875rem; }

.ArticleTrailerVideo:after {
  background: url("https://assets.cmcmarkets.com/images/youtube-play.png") no-repeat 50% 50%;
  background-size: 38px auto;
  content: '';
  height: 195px;
  left: 0;
  opacity: 0.4;
  position: absolute;
  right: 0;
  top: 0;
  transition: top 0.4s ease-in-out, opacity 0.4s ease-in-out;
  z-index: 1; }

@media (min-width: 62em) {
  .ArticleTrailerVideo:hover:after {
    top: -5%;
    opacity: 1; } }

.ArticleTrailerArticle .ArticleTrailer-details {
  min-height: 100%;
  padding: 88px 25px 25px;
  position: static; }
  .ArticleTrailerArticle .ArticleTrailer-details .ArticleTrailer-headline--small {
    min-height: 5.4375rem; }
  .ArticleTrailerArticle .ArticleTrailer-details p {
    max-height: 100%;
    opacity: 1; }
  .ArticleTrailerArticle .ArticleTrailer-details .Icon--article {
    margin-right: 2px; }

.ArticleTrailerArticle .ArticleTrailer-metaData {
  bottom: auto;
  left: 20px;
  top: 32px; }

.ArticleTrailerSpreadBet {
  border: 0;
  border-bottom: 5px solid #00c5e8; }

.ArticleTrailerCFD {
  border: 0;
  border-bottom: 5px solid #1b2429; }

.ArticleTrailerCountdown,
.ArticleTrailerForex {
  border: 0;
  border-bottom: 5px solid #0a264d; }

img {
  transition: transform .3s ease-out, opacity .3s; }

img[data-sizes="auto"] {
  display: block;
  width: 100%; }

/* fade image in after load */
img.img-fixed {
  max-width: 100%;
  width: auto;
  display: initial; }

img.lazyload {
  /*width: 100%;*/
  max-width: inherit;
  transition: transform .3s ease-out, opacity 3s;
  opacity: 0.8;
  filter: blur(10px);
  transform: scale(0.98);
  /*outline: 3px solid blue;*/ }

.no-js .lazyload {
  opacity: 0.8;
  filter: blur(10px);
  transform: scale(0.98);
  transition: transform .3s ease-out, opacity 3s;
  /*outline: 3px solid yellow;*/ }

.lazyloading {
  opacity: 0.8;
  filter: blur(10px);
  transform: scale(0.98);
  /*filter: blur(4px) grayscale(80%);*/
  /*outline: 3px solid red;*/ }

.lazyloaded {
  opacity: 1;
  transform: scale(1);
  /*outline: 3px solid green;*/ }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/* Styles for search tags */
.tags, .search-results-tags .search-tag, .carouselV2-megaFilter .carouselV2-selected-tags div {
  position: relative;
  display: block;
  margin-right: 0.25rem;
  margin-bottom: 0.5rem;
  padding: 0.25rem 1.8rem 0.25rem 1rem;
  float: right;
  background: #fff;
  border-radius: 3px;
  color: #0a264d;
  font-size: 13px;
  cursor: pointer; }
  .tags:before, .search-results-tags .search-tag:before, .carouselV2-megaFilter .carouselV2-selected-tags div:before {
    content: "\e61c";
    position: absolute;
    right: 8px;
    top: 6px;
    font-size: 9px;
    font-family: 'icomoon'; }
  .tags.light-tag, .search-results-tags .light-tag.search-tag, .carouselV2-megaFilter .carouselV2-selected-tags div.light-tag {
    background-color: #00c5e8;
    color: #fff; }
  .tags.dark-tag, .search-results-tags .dark-tag.search-tag, .carouselV2-megaFilter .carouselV2-selected-tags div.dark-tag {
    background-color: #0a264d;
    color: #fff; }

.search-results .row {
  border-bottom: 1px solid #f1f2f4;
  margin-bottom: 30px;
  padding-bottom: 40px; }
  .search-results .row:first-of-type {
    margin-top: 50px; }
  .search-results .row:last-of-type {
    margin-bottom: 50px; }
  .search-results .row h3 {
    color: #00c5e8;
    text-transform: none; }
  .search-results .row p {
    margin-bottom: 1rem; }

.search-results-header {
  width: 100%;
  margin: 50px 0;
  font-family: "ubuntulight", sans-serif;
  font-size: 2.125rem;
  letter-spacing: 0.2rem;
  line-height: 2.687rem;
  color: #58585a;
  -webkit-font-smoothing: antialiased; }

.search-results-count {
  position: relative;
  float: right;
  width: 100%;
  text-align: left;
  color: #58585a;
  font-family: latoregular, sans-serif;
  font-size: 16px;
  line-height: normal;
  letter-spacing: normal; }
  @media (min-width: 768px) {
    .search-results-count {
      width: auto;
      text-align: right; } }

.search-results-found {
  padding: 0 10px;
  font-size: 24px; }
  .search-results-found h1 {
    display: inline-block;
    margin: 0;
    font-size: 24px; }
  .search-results-found strong {
    color: #00c5e8;
    font-family: ubuntulight, sans-serif; }
  @media (min-width: 480px) {
    .search-results-found {
      padding: 0;
      font-size: 34px; }
      .search-results-found h1 {
        font-size: 34px; } }

.search-results-type {
  position: relative;
  float: right;
  margin-top: 8px;
  padding: 4px 8px 4px 2px;
  background-color: #f1f2f4; }
  .search-results-type:after {
    z-index: -1;
    content: "";
    position: absolute;
    width: 18px;
    height: 100%;
    top: 0;
    left: -9px;
    background-color: #f1f2f4;
    -webkit-transform: skew(30deg);
    -moz-transform: skew(30deg);
    -o-transform: skew(30deg);
    transform: skew(30deg); }
  .search-results-type-Page {
    color: green; }
  .search-results-type-Faq {
    color: blue; }
  .search-results-type-News {
    color: pink; }

.search-results-glossaryTerm {
  margin: 45px 0 55px;
  padding: 45px 35px;
  line-height: 28px;
  font-size: 18px;
  background: #F2F2F2; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/* Sponsorship banner */
.Sponsorship {
  padding: 0 !important; }

.Sponsorship-section .Section-title {
  text-align: center !important; }

@media (min-width: 48em) {
  .Sponsorship-section {
    padding-top: 1rem; }
    .Sponsorship-section .col-lg-7 {
      padding-left: 2rem;
      padding-right: 1rem; }
    .Sponsorship-section p {
      margin-bottom: 1.2rem; } }

@media (min-width: 62em) {
  .Sponsorship-section {
    min-height: 270px; }
    .Sponsorship-section .Section-title {
      text-align: left !important; }
    .Sponsorship-section .Sponsorship-section-image picture img {
      width: auto;
      height: 100%; } }

@media (min-width: 87.5em) {
  .Sponsorship-section {
    min-height: 310px; } }

@media (min-width: 1400px) {
  .Sponsorship-section--left .col-lg-7 {
    padding-left: 3.3rem;
    padding-right: 1rem; }
  .Sponsorship-section--right .col-lg-7 {
    padding-right: 3rem; } }

/* IPO banner */
.Section--ipo-banner {
  background: #1ab99f;
  border-top: 1rem solid #e8e9ed; }
  .Section--ipo-banner .Section-title {
    margin-bottom: 1.225rem; }
  .Section--ipo-banner .large {
    font-size: 1.3125rem;
    margin-bottom: 1.5625rem; }
  @media (min-width: 480px) {
    .Section--ipo-banner {
      border-top-width: 2rem;
      padding: 4.5rem 0 2.625rem; } }

/* Spread Betting banner */
.-cfd-banner-background {
  /* cfd background Betting banner */
  background-color: #ffffff;
  background-image: url("https://assets.cmcmarkets.com/images/cfd-header-background_small.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top; }
  @media (min-width: 480px) {
    .-cfd-banner-background {
      background-image: url("https://assets.cmcmarkets.com/images/cfd-header-background_medium.png");
      background-size: cover; } }
  @media (min-width: 768px) {
    .-cfd-banner-background {
      background-image: url("https://assets.cmcmarkets.com/images/cfd-header-background_large.png");
      background-size: cover; } }
  @media (min-width: 992px) {
    .-cfd-banner-background {
      background-image: url("https://assets.cmcmarkets.com/images/cfd-header-background.png");
      background-size: cover; } }

/* Spread Betting banner */
.-sb-banner-background {
  /* cfd background Betting banner */
  background-color: #ffffff;
  background-image: url("https://assets.cmcmarkets.com/images/sb-header-background_small.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top; }
  @media (min-width: 480px) {
    .-sb-banner-background {
      background-image: url("https://assets.cmcmarkets.com/images/sb-header-background_medium.png");
      background-size: cover; } }
  @media (min-width: 768px) {
    .-sb-banner-background {
      background-image: url("https://assets.cmcmarkets.com/images/sb-header-background_large.png");
      background-size: cover; } }
  @media (min-width: 992px) {
    .-sb-banner-background {
      background-image: url("https://assets.cmcmarkets.com/images/sb-header-background.png");
      background-size: cover; } }

.Section--sb-banner {
  border-top: 0 !important;
  margin: 0;
  padding: 50px 0; }
  .Section--sb-banner h1 {
    color: #00c5e8;
    text-align: center;
    padding-bottom: 20px; }
  .Section--sb-banner p {
    color: #58585a;
    font-size: 16px;
    letter-spacing: 1.5px;
    line-height: 25px;
    padding: 0;
    margin: 0; }
    @media (min-width: 768px) {
      .Section--sb-banner p {
        font-size: 18px; } }
  .Section--sb-banner a {
    text-align: left;
    color: #0a264d;
    font-size: 18px; }
  .Section--sb-banner img {
    padding: 0 15px 0 5px;
    display: inline;
    margin: 0; }
  .Section--sb-banner .play-img {
    margin: 0; }
  .Section--sb-banner .Section-title {
    margin-bottom: 0; }
  .Section--sb-banner .sb-hero-intro {
    margin-top: 5px; }
    @media (min-width: 768px) {
      .Section--sb-banner .sb-hero-intro {
        margin-top: 25px;
        padding: 0; } }
  .Section--sb-banner .sb-hero-info {
    margin: 20px 0 10px 25px;
    text-align: left; }
    @media (min-width: 768px) {
      .Section--sb-banner .sb-hero-info {
        margin: 40px 0 0 0;
        text-align: center; } }
    .Section--sb-banner .sb-hero-info p {
      text-align: left;
      font-size: 28px;
      padding: 5px 0; }
      @media (min-width: 768px) {
        .Section--sb-banner .sb-hero-info p {
          text-align: center; } }
  .Section--sb-banner .sb-hero-product {
    font-family: ubunturegular, sans-serif;
    margin: 0 0 0 20px;
    font-size: 24px; }
    @media (min-width: 768px) {
      .Section--sb-banner .sb-hero-product {
        margin: 50px 0; } }
    .Section--sb-banner .sb-hero-product img {
      padding: 0 15px 30px 5px;
      float: left;
      clear: both;
      margin-top: 0; }
      @media (min-width: 375px) {
        .Section--sb-banner .sb-hero-product img {
          padding: 0 15px 0 5px; } }
      @media (min-width: 480px) {
        .Section--sb-banner .sb-hero-product img {
          margin-top: 15px;
          padding-bottom: 30px; } }
      @media (min-width: 768px) {
        .Section--sb-banner .sb-hero-product img {
          margin-top: 25px;
          padding-bottom: 50px; } }
    .Section--sb-banner .sb-hero-product p {
      margin-top: 20px; }

/* Binary banner */
.Section--binary-banner {
  background: #00c5e8;
  border-top: 0 !important; }
  .Section--binary-banner .Section-title {
    color: #fff;
    margin-bottom: 1.225rem; }
  .Section--binary-banner p {
    color: #fff; }
    @media (min-width: 30em) {
      .Section--binary-banner p {
        padding-right: 40px; } }
  .Section--binary-banner .large {
    font-size: 1.3125rem;
    margin-bottom: 1.5625rem; }
  @media (min-width: 480px) {
    .Section--binary-banner {
      border-top-width: 0 !important;
      padding: 4.5rem 0 2.625rem; } }

.Section--binary-banner2 {
  background: #00c5e8;
  border-top: 1rem solid #e8e9ed; }
  .Section--binary-banner2 .container-fluid {
    background: url("https://assets.cmcmarkets.com/images/binaries-banner-background.png") no-repeat 100% 100%;
    background-size: 200% auto;
    padding-bottom: 47%; }
  .Section--binary-banner2 .Section-title {
    color: #fff;
    margin-bottom: 1.225rem; }
  .Section--binary-banner2 p {
    color: #fff; }
    @media (min-width: 30em) {
      .Section--binary-banner2 p {
        padding-right: 40px; } }
  .Section--binary-banner2 .large {
    font-size: 1.3125rem;
    margin-bottom: 1.5625rem; }
  @media (min-width: 480px) {
    .Section--binary-banner2 {
      border-top-width: 2rem;
      padding: 4.5rem 0 0; } }
  @media (min-width: 48em) {
    .Section--binary-banner2 .container-fluid {
      background-position: 50% 100%;
      background-size: 100% auto;
      padding-bottom: 2.625rem; } }

/* Live/demo simple banner */
.Section-apply-now-banner {
  background: #F3F5F9;
  border-bottom: 1px solid #e8e9ed;
  border-top: 1px solid #e8e9ed;
  padding: 20px 0 30px; }
  .Section-apply-now-banner .Section-title {
    color: #1b2429;
    font-size: 1.5625rem;
    margin: 0;
    padding: 13px 0 5px; }
  .Section-apply-now-banner .Button {
    margin-top: 10px;
    min-width: 100px;
    width: 100%; }
  .Section-apply-now-banner p {
    margin: 0;
    padding: 4px 0 7px; }
  @media (min-width: 48em) {
    .Section-apply-now-banner .col-lg-6 .Section-title {
      margin-bottom: -15px;
      padding: 0 0 5px; }
    .Section-apply-now-banner p {
      margin-bottom: -30px; } }
  @media (min-width: 850px) {
    .Section-apply-now-banner .col-lg-6 .Section-title {
      padding-right: 20px; } }
  @media (min-width: 62em) {
    .Section-apply-now-banner .col-lg-6 .Section-title {
      padding: 13px 0 5px; } }

.Section-stockbroking-banner .Section-title {
  text-align: center; }

.Section-stockbroking-banner .Button {
  max-width: 300px; }

@media (min-width: 62em) {
  .Section-stockbroking-banner .Section-title {
    line-height: 1.875rem;
    padding: 0 10px 0 0;
    text-align: left; } }

/* Large CTA banner */
.Section-large-cta-banner {
  background: #F3F5F9;
  border-bottom: 1px solid #e8e9ed;
  border-top: 1px solid #e8e9ed;
  padding: 30px 0; }
  .Section-large-cta-banner .Section-title {
    margin-bottom: 1.6rem; }
  .Section-large-cta-banner .Button {
    margin-bottom: 25px; }
  .Section-large-cta-banner img {
    margin-bottom: 10px; }
    .Section-large-cta-banner img + .small {
      margin: 0 0 -15px; }
  @media (min-width: 48em) {
    .Section-large-cta-banner .Section-title {
      padding: 22px 0 0; }
    .Section-large-cta-banner .Button {
      margin-bottom: 15px; } }

/* Brexit Banner */
.Section--brexit {
  background: #091118;
  border-top: 1rem solid #e8e9ed; }
  .Section--brexit .container-fluid {
    background: url("https://assets.cmcmarkets.com/images/brexit-hero.png") no-repeat 100% 100%;
    background-size: 200% auto;
    padding-bottom: 47%; }
  .Section--brexit .Section-title {
    color: #fff;
    margin-bottom: 1.225rem; }
  .Section--brexit p {
    color: #fff; }
    @media (min-width: 30em) {
      .Section--brexit p {
        padding-right: 40px; } }
  .Section--brexit .large {
    font-size: 1.3125rem;
    margin-bottom: 1.5625rem; }
  @media (min-width: 480px) {
    .Section--brexit {
      padding: 3rem 0 0; } }
  @media (min-width: 48em) {
    .Section--brexit .container-fluid {
      background-position: 50% 100%;
      background-size: contain;
      padding-bottom: 1.5rem; } }

.Section--brexit2 {
  border-top: 0; }

/* Order execution*/
.OrderExecution video {
  max-width: 364px;
  width: 100%; }

/* 404 */
.Section-404 {
  padding-bottom: 12.5rem; }

/* CFD/Share diff */
.CFD-Share-diff h2.Section-title {
  color: #fff;
  font-size: 1.2rem;
  margin: 0;
  text-align: center; }

.CFD-Share-diff p {
  color: #fff;
  margin: 10px 0 20px; }

.CFD-Share-diff .Button {
  display: block;
  margin-top: 10px;
  max-width: 260px; }

@media (min-width: 62em) {
  .CFD-Share-diff h2.Section-title {
    display: inline-block;
    text-align: left; }
  .CFD-Share-diff p {
    display: inline-block;
    margin: 10px 0; }
  .CFD-Share-diff .Button {
    display: inline-block;
    margin: 0 0 0 20px;
    vertical-align: middle; } }

/* Stockbroking Standard/Pro diff */
.pro-standard-diff h2.Section-title {
  color: #fff;
  font-size: 1.2rem;
  margin: 0;
  text-align: center; }

.pro-standard-diff p {
  color: #fff;
  margin: 10px 0 20px; }

.pro-standard-diff .Button {
  display: block;
  margin-top: 10px;
  max-width: 260px; }

.pro-standard-diff img {
  display: none; }

@media (min-width: 62em) {
  .pro-standard-diff img {
    bottom: 0;
    display: block;
    left: 0;
    margin: 0;
    position: absolute; }
  .pro-standard-diff h2.Section-title {
    line-height: 1.875rem;
    padding: 1.375rem 0;
    padding-left: 320px;
    text-align: left; }
  .pro-standard-diff .Button {
    margin-top: 28px; } }

/* Cash rebates */
.what-is-a-cash-rebate .highlight-box {
  margin-bottom: 30px;
  padding: 11px 0 14px; }
  .what-is-a-cash-rebate .highlight-box p {
    margin: 0; }
    .what-is-a-cash-rebate .highlight-box p u {
      color: #0a264d;
      display: block;
      font-size: 29px;
      padding: 11px 0;
      text-decoration: none; }

.choose-your-account-type .Section-title {
  margin-bottom: 1.6rem; }

.choose-your-account-type .Button {
  width: 100% !important;
  max-width: 450px; }

@media (min-width: 480px) {
  .choose-your-account-type {
    padding: 4rem 0 3rem; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.whyCMCheader h1 {
  color: #fff;
  font-size: 2.375rem;
  margin-bottom: 1.8125rem; }

.whyCMCheader .intro {
  font-size: 1.125rem; }

.whyCMCheader .Slider-scroll {
  background: none;
  color: #000;
  display: inline-block;
  padding-top: 39px;
  position: static; }
  .whyCMCheader .Slider-scroll .Icon {
    color: #000; }

.whyCMCheader .Section-slant-overlay {
  background-color: #f1f2f4; }

.whyCMCheader .background-image {
  background-image: url("https://assets.cmcmarkets.com/images/whycmcheaderbg768.jpg"); }
  @media (min-width: 768px) {
    .whyCMCheader .background-image {
      background-image: url("https://assets.cmcmarkets.com/images/whycmcheaderbg.jpg"); } }

#whyCMCpoints {
  display: none;
  padding-top: 5px; }
  @media (min-width: 480px) {
    #whyCMCpoints {
      display: block; } }
  #whyCMCpoints .col-md-3 {
    cursor: pointer;
    padding: 1px;
    z-index: 1; }
    #whyCMCpoints .col-md-3.close .pointBlockBg,
    #whyCMCpoints .col-md-3.close .pointBlockBody {
      transition: none; }
    @media (min-width: 768px) {
      #whyCMCpoints .col-md-3.open {
        z-index: 2; }
        #whyCMCpoints .col-md-3.open .pointBlockBg {
          box-sizing: content-box;
          height: 200%;
          padding: 0 4px 2px 0;
          position: absolute;
          width: 300%; }
          #whyCMCpoints .col-md-3.open .pointBlockBg .pointBlockHeader {
            padding: 3rem 0.875rem 1rem;
            text-align: left; }
          #whyCMCpoints .col-md-3.open .pointBlockBg h2 {
            padding: 0;
            position: static; }
          #whyCMCpoints .col-md-3.open .pointBlockBg .pointBlockBody {
            opacity: 1;
            padding: 0 1.25rem 0.875rem 0.875rem;
            position: static;
            text-align: left; }
          #whyCMCpoints .col-md-3.open .pointBlockBg p:not(.button) a {
            color: #fff;
            text-decoration: underline; }
        #whyCMCpoints .col-md-3.open.last-row .pointBlockBg {
          bottom: 0; }
        #whyCMCpoints .col-md-3.open.col-number-4 .pointBlockBg, #whyCMCpoints .col-md-3.open.col-number-3 .pointBlockBg {
          right: 0; } }
    @media (min-width: 992px) {
      #whyCMCpoints .col-md-3.open .pointBlockBg {
        padding-right: 2px;
        width: 200%; }
      #whyCMCpoints .col-md-3.open.col-number-3 .pointBlockBg {
        left: 0;
        right: auto; } }
  #whyCMCpoints .pointBlock {
    height: 200px;
    position: relative; }
    #whyCMCpoints .pointBlock .pointBlockBg {
      height: 100%;
      overflow: hidden;
      transition: background 0.2s ease-in-out, width 0.4s ease-in-out, height 0.4s ease-in-out;
      width: 100%; }
    #whyCMCpoints .pointBlock .pointBlockBody {
      left: -9999px;
      opacity: 0;
      position: absolute;
      transition: opacity 0.2s ease-in-out 0.4s; }
    #whyCMCpoints .pointBlock .icon-img-small {
      left: 0.875rem;
      position: absolute;
      top: 1.25rem; }
    #whyCMCpoints .pointBlock h2 {
      bottom: 1.25rem;
      font-family: ubuntubold, sans-serif;
      font-size: 1.25rem;
      left: 0.875rem;
      letter-spacing: 0.02rem;
      line-height: 1.8rem;
      margin: 10px 0 0;
      padding-right: 0.875rem;
      position: absolute;
      text-align: left !important; }
      @media (min-width: 992px) {
        #whyCMCpoints .pointBlock h2 {
          font-size: 1.75rem;
          line-height: 2.4375rem; } }
    #whyCMCpoints .pointBlock p {
      margin-bottom: 1.2rem; }
    #whyCMCpoints .pointBlock .closeBtn {
      bottom: 20px;
      color: #fff;
      font-size: 0.875rem;
      left: 50%;
      margin-left: -50px;
      opacity: 0.4;
      position: absolute;
      text-align: center;
      text-decoration: none;
      transition: opacity 0.2s ease-in-out;
      width: 100px; }
      #whyCMCpoints .pointBlock .closeBtn:hover {
        opacity: 1; }
      #whyCMCpoints .pointBlock .closeBtn:after {
        content: ' \e61c';
        font-family: 'icomoon';
        vertical-align: middle; }
  #whyCMCpoints .bgColour1:hover {
    background: rgba(27, 36, 41, 0.6); }
  #whyCMCpoints .bgColour1,
  #whyCMCpoints .open .bgColour1,
  #whyCMCpoints .open .bgColour1:hover {
    background: #1b2429; }
  #whyCMCpoints .bgColour2:hover {
    background: rgba(10, 38, 77, 0.6); }
  #whyCMCpoints .bgColour2,
  #whyCMCpoints .open .bgColour2,
  #whyCMCpoints .open .bgColour2:hover {
    background: #0a264d; }
  #whyCMCpoints .bgColour3:hover {
    background: rgba(0, 105, 210, 0.6); }
  #whyCMCpoints .bgColour3,
  #whyCMCpoints .open .bgColour3,
  #whyCMCpoints .open .bgColour3:hover {
    background: #0069d2; }
  #whyCMCpoints .bgColour4:hover {
    background: rgba(0, 197, 232, 0.6); }
  #whyCMCpoints .bgColour4,
  #whyCMCpoints .open .bgColour4,
  #whyCMCpoints .open .bgColour4:hover {
    background: #00c5e8; }
  #whyCMCpoints .bgColour5:hover {
    background: rgba(26, 186, 160, 0.6); }
  #whyCMCpoints .bgColour5,
  #whyCMCpoints .open .bgColour5,
  #whyCMCpoints .open .bgColour5:hover {
    background: #1ab99f; }

.whyCMCsection {
  padding: 6rem 0;
  position: relative; }
  .whyCMCsection .Section-title {
    color: #1b2429;
    padding-bottom: 34px;
    position: relative;
    text-align: center; }
    .whyCMCsection .Section-title:after {
      background-color: #fff;
      bottom: 0;
      content: '';
      height: 6px;
      left: 50%;
      margin-left: -47px;
      position: absolute;
      width: 95px; }
    @media (min-width: 768px) {
      .whyCMCsection .Section-title {
        text-align: left; }
        .whyCMCsection .Section-title.text-center {
          text-align: center; }
        .whyCMCsection .Section-title:after {
          left: 0;
          margin-left: 0; }
        .whyCMCsection .Section-title.text-center:after {
          left: 50%;
          margin-left: -47px; } }
  .whyCMCsection p {
    color: #1b2429;
    font-size: 1.375rem;
    line-height: 2.25rem;
    text-align: center; }
    @media (min-width: 768px) {
      .whyCMCsection p {
        text-align: left; }
        .whyCMCsection p.text-center {
          text-align: center; } }
    .whyCMCsection p.reevoo-note {
      font-size: 15px;
      margin: 0; }
  .whyCMCsection .icon-img {
    margin-bottom: 1.25rem; }
  .whyCMCsection.Section--with-slant {
    overflow: hidden; }
  .whyCMCsection.Section--with-slant-left .Section-slant-overlay {
    transform: skew(0deg, 4deg); }
  .whyCMCsection.Section--with-slant-right .Section-slant-overlay {
    transform: skew(0deg, -4deg); }
  @media (min-width: 768px) {
    .whyCMCsection.whyCMCminHeight .container-fluid {
      min-height: 658px;
      position: relative; }
    .whyCMCsection.whyCMCminHeight .row {
      margin: 0;
      position: absolute;
      top: 50%;
      transform: translate(0, -50%); } }

.Section--white-text {
  color: #fff; }
  .Section--white-text .Section-title {
    color: #fff; }
  .Section--white-text p {
    color: #fff; }

.WhyCMC .hidden {
  display: none !important; }

.WhyCMC .Background-grey-mosaic {
  background-color: #fff;
  background-size: cover; }

.WhyCMC .wrapper .Button {
  max-width: 300px;
  padding-left: 2rem;
  padding-right: 2rem;
  width: auto; }

.WhyCMC .bgColour1 {
  background-color: #1b2429; }

.WhyCMC .bgColour2 {
  background-color: #0a264d; }

.WhyCMC .bgColour3 {
  background-color: #0069d2; }

.WhyCMC .bgColour4 {
  background-color: #00c5e8; }

.WhyCMC .bgColour5 {
  background-color: #1ab99f; }

.WhyCMC .bgColour6 {
  background-color: #efefef; }

.WhyCMC .bgColour7 {
  background-color: #1b2429; }

.WhyCMC .Section-slant-overlay {
  bottom: -200px;
  top: auto; }
  @media (min-width: 62em) {
    .WhyCMC .Section-slant-overlay {
      bottom: -300px; } }

.WhyCMC .Section--with-slant-top .Section-slant-overlay {
  bottom: auto;
  top: -200px;
  transform-origin: left; }
  @media (min-width: 62em) {
    .WhyCMC .Section--with-slant-top .Section-slant-overlay {
      bottom: auto;
      top: -300px; } }

.whyCMCtradeAnywhere {
  background-color: #8c7c7c;
  background-image: url("https://assets.cmcmarkets.com/images/whycmc_tradeanywherebgmobile.jpg");
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: 100% auto;
  padding-bottom: 65%; }
  @media (min-width: 769px) {
    .whyCMCtradeAnywhere {
      background-image: url("https://assets.cmcmarkets.com/images/whycmc_tradeanywherebglg.jpg");
      background-position: 50% 50%;
      background-size: cover;
      padding-bottom: 6rem; } }
  @media (min-width: 1400px) {
    .whyCMCtradeAnywhere {
      background-image: url("https://assets.cmcmarkets.com/images/whycmc_tradeanywherebg.jpg"); } }
  .whyCMCtradeAnywhere .container-fluid {
    padding-bottom: 60px;
    padding-top: 60px; }

.whyCMCmultiAward {
  background-image: url("https://assets.cmcmarkets.com/images/why-cmc-awards-2016-mobile.jpg");
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: 100% auto;
  padding-bottom: 33%; }
  @media (min-width: 768px) {
    .whyCMCmultiAward {
      background-image: url("https://assets.cmcmarkets.com/images/why-cmc-awards-2016-wide.jpg");
      background-size: contain; } }

.whyCMCmultiAwardZH {
  background-image: url("https://assets.cmcmarkets.com/images/why-cmc-awards-zh-large.jpg");
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: cover;
  padding-bottom: 490px; }

.whyCMCstillUnsure {
  background-image: url("https://assets.cmcmarkets.com/images/stillunsureimage.jpg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover; }
  .whyCMCstillUnsure .col-md-10 {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid #fff;
    padding: 2rem 2rem 1rem; }
  @media (min-width: 992px) {
    .whyCMCstillUnsure .col-md-10 {
      padding: 6rem 6rem 3rem; } }

.whyCMCdedicatedSupport {
  background-image: url("https://assets.cmcmarkets.com/images/whycmcdedicatedsupportbgmobile.jpg");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% auto;
  padding-bottom: 82%; }
  @media (min-width: 768px) {
    .whyCMCdedicatedSupport {
      background-image: url("https://assets.cmcmarkets.com/images/whycmcdedicatedsupportbglg.jpg");
      background-position: 50% 50%;
      background-size: cover;
      padding-bottom: 10rem;
      background-image: url("data:image/gif;base64,R0lGODlhAQABAPAAABq6oP///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="), url("https://assets.cmcmarkets.com/images/whycmcdedicatedsupportbglg.jpg");
      background-repeat: no-repeat, no-repeat;
      background-position: 0 0, 50% 50%;
      background-size: 50% 100%, cover; } }
  @media (min-width: 1400px) {
    .whyCMCdedicatedSupport {
      background-image: url("https://assets.cmcmarkets.com/images/whycmcdedicatedsupportbg.jpg");
      background-image: url("data:image/gif;base64,R0lGODlhAQABAPAAABq6oP///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="), url("https://assets.cmcmarkets.com/images/whycmcdedicatedsupportbg.jpg");
      background-repeat: no-repeat, no-repeat;
      background-position: 0 0, 50% 50%;
      background-size: 50% 100%, cover; } }

.whyCMCOurTeam {
  background-repeat: no-repeat; }
  @media (min-width: 768px) {
    .whyCMCOurTeam {
      background-image: url("https://assets.cmcmarkets.com/images/whycmc-our-team-large.jpg");
      background-position: 50% 50%;
      background-size: cover;
      background-image: url("data:image/gif;base64,R0lGODlhAQABAPAAAABp0v///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="), url("https://assets.cmcmarkets.com/images/whycmc-our-team-large.jpg");
      background-repeat: no-repeat, no-repeat;
      background-position: 0 0, 50% 50%;
      background-size: 50% 100%, cover; } }

.whyCMC25yearsExperience {
  background-image: url("https://assets.cmcmarkets.com/images/whycmc25yearsexperiencebgmobile.jpg");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% auto;
  padding-bottom: 70%; }
  @media (min-width: 768px) {
    .whyCMC25yearsExperience {
      background-image: url("https://assets.cmcmarkets.com/images/whycmc25yearsexperiencebglg.jpg");
      background-position: 50% 50%;
      background-size: cover;
      padding-bottom: 6rem;
      background-image: url("data:image/gif;base64,R0lGODlhAQABAPAAABq6oP///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="), url("https://assets.cmcmarkets.com/images/whycmc25yearsexperiencebglg.jpg");
      background-repeat: no-repeat, no-repeat;
      background-position: 0 0, 50% 50%;
      background-size: 50% 100%, cover; } }
  @media (min-width: 1400px) {
    .whyCMC25yearsExperience {
      background-image: url("https://assets.cmcmarkets.com/images/whycmc25yearsexperiencebg.jpg");
      background-image: url("data:image/gif;base64,R0lGODlhAQABAPAAABq6oP///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="), url("https://assets.cmcmarkets.com/images/whycmc25yearsexperiencebg.jpg");
      background-repeat: no-repeat, no-repeat;
      background-position: 0 0, 50% 50%;
      background-size: 50% 100%, cover; } }

.whyCMCstandardBg {
  background-image: url("https://assets.cmcmarkets.com/images/whycmcbgmobile.jpg");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% auto;
  padding-bottom: 70%; }
  @media (min-width: 768px) {
    .whyCMCstandardBg {
      background-image: url("https://assets.cmcmarkets.com/images/whycmcbglg.jpg");
      background-position: 50% 50%;
      background-size: cover;
      padding-bottom: 6rem;
      background-repeat: no-repeat, no-repeat;
      background-position: 50% 50%;
      background-size: cover; } }
  @media (min-width: 1400px) {
    .whyCMCstandardBg {
      background-image: url("https://assets.cmcmarkets.com/images/whycmcbg.jpg");
      background-repeat: no-repeat, no-repeat;
      background-position: 50% 50%;
      background-size: cover; } }

.whyCMCourPlatform {
  background-image: url("https://assets.cmcmarkets.com/images/whycmcawardwinningbgmobile.jpg");
  background-repeat: no-repeat;
  background-position: 100% 100%;
  background-size: 100% auto;
  padding-bottom: 94%; }
  @media (min-width: 768px) {
    .whyCMCourPlatform {
      background-image: url("https://assets.cmcmarkets.com/images/whycmcawardwinningbglg.jpg");
      background-position: 50% 100%;
      background-size: auto 100%;
      padding-bottom: 6rem; } }
  @media (min-width: 1400px) {
    .whyCMCourPlatform {
      background-image: url("https://assets.cmcmarkets.com/images/whycmcawardwinningbg.jpg"); } }
  .whyCMCourPlatform .Section-slant-overlay {
    background-color: #e1e1e1; }

.whyCMCourPlatformDol {
  background-image: url("https://assets.cmcmarkets.com/images/whycmc-platform-dol.jpg");
  background-size: 200% auto; }
  @media (min-width: 768px) {
    .whyCMCourPlatformDol {
      background-image: url("https://assets.cmcmarkets.com/images/whycmc-platform-dol.jpg");
      background-size: auto 100%; } }
  @media (min-width: 1400px) {
    .whyCMCourPlatformDol {
      background-image: url("https://assets.cmcmarkets.com/images/whycmc-platform-dol.jpg"); } }

.whyCMCspeedControl {
  background-image: url("https://assets.cmcmarkets.com/images/whycmcspeedcontrolbgmobile.jpg");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% auto;
  padding-bottom: 80%; }
  @media (min-width: 768px) {
    .whyCMCspeedControl {
      background-image: url("https://assets.cmcmarkets.com/images/whycmcspeedcontrolbglg.jpg");
      background-position: 50% 50%;
      background-size: cover;
      background-image: url("data:image/gif;base64,R0lGODlhAQABAPAAABskKf///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="), url("https://assets.cmcmarkets.com/images/whycmcspeedcontrolbglg.jpg");
      background-repeat: no-repeat, no-repeat;
      background-position: 0 0, 50% 50%;
      background-size: 50% 100%, cover;
      padding-bottom: 6rem; }
      .whyCMCspeedControl .col-md-6 {
        padding-right: 3rem; } }
  @media (min-width: 1400px) {
    .whyCMCspeedControl {
      background-image: url("https://assets.cmcmarkets.com/images/whycmcspeedcontrolbg.jpg");
      background-image: url("data:image/gif;base64,R0lGODlhAQABAPAAABskKf///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="), url("https://assets.cmcmarkets.com/images/whycmcspeedcontrolbg.jpg");
      background-repeat: no-repeat, no-repeat;
      background-position: 0 0, 50% 50%;
      background-size: 50% 100%, cover;
      padding-bottom: 6rem; } }

.whyCMCvalueForMoney {
  background-image: url("https://assets.cmcmarkets.com/images/whycmcvalueformoneybgmobile.jpg");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% auto;
  padding-bottom: 76%; }
  @media (min-width: 768px) {
    .whyCMCvalueForMoney {
      background-image: url("https://assets.cmcmarkets.com/images/whycmcvalueformoneybglg.jpg");
      background-position: 50% 50%;
      background-size: cover;
      padding-bottom: 6rem;
      background-image: url("data:image/gif;base64,R0lGODlhAQABAPAAAAomTf///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="), url("https://assets.cmcmarkets.com/images/whycmcvalueformoneybglg.jpg");
      background-repeat: no-repeat, no-repeat;
      background-position: 0 0, 50% 50%;
      background-size: 50% 100%, cover; } }
  @media (min-width: 1400px) {
    .whyCMCvalueForMoney {
      background-image: url("https://assets.cmcmarkets.com/images/whycmcvalueformoneybg.jpg");
      background-image: url("data:image/gif;base64,R0lGODlhAQABAPAAAAomTf///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="), url("https://assets.cmcmarkets.com/images/whycmcvalueformoneybg.jpg");
      background-repeat: no-repeat, no-repeat;
      background-position: 0 0, 50% 50%;
      background-size: 50% 100%, cover; } }

.whyCMCcharting {
  background-color: #e1e1e1;
  background-image: url("https://assets.cmcmarkets.com/images/whycmcchartingbgmobile.jpg");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% auto;
  padding-bottom: 27%; }
  @media (min-width: 768px) {
    .whyCMCcharting {
      background-image: url("https://assets.cmcmarkets.com/images/whycmcchartingbglg.jpg"); } }
  @media (min-width: 1400px) {
    .whyCMCcharting {
      background-image: url("https://assets.cmcmarkets.com/images/whycmcchartingbg.jpg"); } }
  .whyCMCcharting .container-fluid {
    padding-bottom: 50px;
    padding-top: 50px; }

.whyCMCeductaion .container-fluid {
  padding-bottom: 50px;
  padding-top: 50px; }

@media (min-width: 768px) {
  .whyCMCSecurityFunds .col-md-6 {
    padding: 0 1.5rem; } }

@media (min-width: 992px) {
  .whyCMCSecurityFunds .col-md-6 {
    padding: 0 3rem; } }

.whyCMCtradingOpportunities .Section-title:after,
.whyCMCourPlatform .Section-title:after,
.whyCMCtradeAnywhere .Section-title:after,
.whyCMCspeedControl .Section-title:after,
.whyCMCriskManagement .Section-title:after,
.whyCMC25yearsExperience .Section-title:after,
.whyCMCmultiAward .Section-title:after,
.whyCMCcharting .Section-title:after {
  background-color: #0069d2; }

.whyCMCOurTeam .Section-title:after {
  background-color: #1ab99f; }

/* SUB PAGES FOR CHINA*/
.WhyCMCSubPages .why-cmc-subnav {
  margin-right: 0 !important;
  margin-top: 30px; }
  @media (min-width: 62em) {
    .WhyCMCSubPages .why-cmc-subnav {
      margin-top: 0; } }
  .WhyCMCSubPages .why-cmc-subnav a {
    padding: 25px 15px 26px 88px; }
  .WhyCMCSubPages .why-cmc-subnav .header {
    background: #f1f2f4; }
    .WhyCMCSubPages .why-cmc-subnav .header a {
      color: #000;
      padding-left: 24px;
      text-decoration: none; }
  .WhyCMCSubPages .why-cmc-subnav .history-link {
    background: url("https://assets.cmcmarkets.com/images/icon-history.png") no-repeat 30px 50%; }
  .WhyCMCSubPages .why-cmc-subnav .regulated-link {
    background: url("https://assets.cmcmarkets.com/images/icon-regulated.png") no-repeat 30px 50%; }
  .WhyCMCSubPages .why-cmc-subnav .awards-link {
    background: url("https://assets.cmcmarkets.com/images/icon-awards.png") no-repeat 30px 50%; }
  .WhyCMCSubPages .why-cmc-subnav .our-team-link {
    background: url("https://assets.cmcmarkets.com/images/icon-our-team.png") no-repeat 30px 50%; }
  .WhyCMCSubPages .why-cmc-subnav .compare-link {
    background: url("https://assets.cmcmarkets.com/images/icon-compare.png") no-repeat 30px 50%; }

.WhyCMCSubPages .Section h1.Section-title {
  color: #0a264d; }

.WhyCMCSubPages .main-col h2.Section-title {
  color: #00c5e8;
  font-size: 1.875rem; }

.WhyCMCSubPages .history-year-list {
  margin-top: 54px; }
  .WhyCMCSubPages .history-year-list .row {
    margin: 3.375rem 0 3.75rem; }
    .WhyCMCSubPages .history-year-list .row > div {
      background: #0a264d;
      min-height: 200px;
      padding-left: 10px;
      padding-right: 10px; }
      .WhyCMCSubPages .history-year-list .row > div:nth-child(16n+2), .WhyCMCSubPages .history-year-list .row > div:nth-child(16n+9), .WhyCMCSubPages .history-year-list .row > div:nth-child(16n+12), .WhyCMCSubPages .history-year-list .row > div:nth-child(16n+15) {
        background: #0069d2; }
      .WhyCMCSubPages .history-year-list .row > div:nth-child(16n+3), .WhyCMCSubPages .history-year-list .row > div:nth-child(16n+5), .WhyCMCSubPages .history-year-list .row > div:nth-child(16n+10) {
        background: #1ab99f; }
      .WhyCMCSubPages .history-year-list .row > div:nth-child(16n+4), .WhyCMCSubPages .history-year-list .row > div:nth-child(16n+7), .WhyCMCSubPages .history-year-list .row > div:nth-child(16n+14) {
        background: #00c5e8; }
      .WhyCMCSubPages .history-year-list .row > div:nth-child(16n+6), .WhyCMCSubPages .history-year-list .row > div:nth-child(16n+13) {
        background: #1b2429; }
      @media (min-width: 30em) {
        .WhyCMCSubPages .history-year-list .row > div {
          min-height: 290px; } }
      @media (min-width: 62em) {
        .WhyCMCSubPages .history-year-list .row > div {
          min-height: 340px; } }
      @media (min-width: 75em) {
        .WhyCMCSubPages .history-year-list .row > div {
          min-height: 315px; } }
      .WhyCMCSubPages .history-year-list .row > div p {
        color: #fff;
        font-size: 0.875rem;
        line-height: 1.25rem; }
      .WhyCMCSubPages .history-year-list .row > div p:first-child {
        color: rgba(255, 255, 255, 0.6);
        font-size: 50px;
        line-height: 50px;
        margin-bottom: 0;
        margin-left: -4px;
        padding-bottom: 46px;
        padding-top: 20px; }
        @media (min-width: 30em) {
          .WhyCMCSubPages .history-year-list .row > div p:first-child {
            font-size: 60px;
            line-height: 60px; } }
        @media (min-width: 70em) {
          .WhyCMCSubPages .history-year-list .row > div p:first-child {
            font-size: 72px;
            line-height: 72px; } }

.WhyCMCSubPages .compare-accounts-block {
  padding-top: 1.8125rem; }

.WhyCMCSubPages .regulated-block {
  padding-bottom: 78px;
  padding-top: 31px; }
  .WhyCMCSubPages .regulated-block .row {
    margin-left: -6px;
    margin-right: -6px; }
  .WhyCMCSubPages .regulated-block .col-sm-6 > div {
    background: #0a264d;
    padding: 37px 10px 34px; }
  .WhyCMCSubPages .regulated-block .col-sm-6:last-child > div {
    background: #1ab99f; }
  .WhyCMCSubPages .regulated-block .col-sm-6:last-child h2.Section-title {
    color: #fff; }
  .WhyCMCSubPages .regulated-block .col-sm-6 p {
    color: #fff; }

.WhyCMCSubPages .awards-tables h3 {
  color: #0a264d;
  font-family: 'ubunturegular', sans-serif;
  font-size: 1.8125rem;
  margin-bottom: 1.125rem; }

.WhyCMCSubPages .awards-tables table {
  border: 0;
  margin-bottom: 5.1875rem; }

.WhyCMCSubPages .awards-tables tr {
  background: #f6f6f6;
  border: 0; }
  .WhyCMCSubPages .awards-tables tr:nth-child(2n) {
    background: #fff; }

.WhyCMCSubPages .awards-tables td {
  border: 0; }
  .WhyCMCSubPages .awards-tables td:first-child {
    background: url("https://assets.cmcmarkets.com/images/award-icon.png") no-repeat 15px center;
    font-family: 'latobold', sans-serif;
    padding-left: 4.25rem; }

.WhyCMCSubPages .compare-table th:first-child {
  background: #d1d1d1;
  color: #58585a; }

.WhyCMCSubPages .compare-table th:nth-child(2) {
  background: #00c5e8; }

.WhyCMCSubPages .compare-table th:nth-child(3) {
  background: #0a264d; }

.WhyCMCSubPages .contact-us {
  background-color: #f6f6f6;
  background-image: url("https://assets.cmcmarkets.com/images/why-cmc-our-team-sydney-buildings.jpg");
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: 100% auto;
  padding: 20px 20px 72%; }
  .WhyCMCSubPages .contact-us h2, .WhyCMCSubPages .contact-us p {
    text-align: center; }
  @media (min-width: 48em) {
    .WhyCMCSubPages .contact-us {
      background-image: linear-gradient(105deg, transparent, transparent 48%, #f6f6f6 48.15%), url("https://assets.cmcmarkets.com/images/why-cmc-our-team-sydney-buildings.jpg");
      background-position: 0 0;
      background-repeat: no-repeat, no-repeat;
      background-size: auto, auto 100%;
      padding: 60px 0; }
      .WhyCMCSubPages .contact-us h2, .WhyCMCSubPages .contact-us p {
        text-align: left; } }
  .WhyCMCSubPages .contact-us.contact-us-singapore {
    /* This class added into in-page div class */
    background-image: url("https://assets.cmcmarkets.com/images/republic-plaza-singapore.jpeg");
    background-position: 50% 100%;
    background-repeat: no-repeat;
    background-size: 100% auto; }
    @media (min-width: 48em) {
      .WhyCMCSubPages .contact-us.contact-us-singapore {
        background-image: linear-gradient(105deg, transparent, transparent 48%, #f6f6f6 48.15%), url("https://assets.cmcmarkets.com/images/republic-plaza-singapore.jpeg");
        background-position: 0 0;
        background-repeat: no-repeat, no-repeat;
        background-size: auto, auto 100%;
        padding: 60px 0; }
        .WhyCMCSubPages .contact-us.contact-us-singapore h2, .WhyCMCSubPages .contact-us.contact-us-singapore p {
          text-align: left; } }

@media (min-width: 480px) {
  .WhyCMCSubPages .Section-client-quotes {
    padding-bottom: 6.8125rem; } }

.WhyCMCSubPages .Section-client-quotes .row-quotes {
  background: #e8e9ed;
  margin: 0;
  position: relative; }
  .WhyCMCSubPages .Section-client-quotes .row-quotes .col-md-3 {
    border-bottom: 12px solid #fff;
    padding: 63px 16px 29px; }
    .WhyCMCSubPages .Section-client-quotes .row-quotes .col-md-3 p {
      color: #000;
      font-family: 'ubuntubold', sans-serif;
      font-size: 1.125rem; }
      .WhyCMCSubPages .Section-client-quotes .row-quotes .col-md-3 p:first-child {
        font-family: 'ubunturegular', sans-serif;
        font-style: italic;
        line-height: 1.875rem;
        margin-bottom: 3.5625rem; }
        .WhyCMCSubPages .Section-client-quotes .row-quotes .col-md-3 p:first-child:before, .WhyCMCSubPages .Section-client-quotes .row-quotes .col-md-3 p:first-child:after {
          color: #00c5e8;
          content: '\201c';
          display: inline-block;
          font-family: 'latobold', sans-serif;
          font-size: 3.5rem;
          line-height: 0;
          vertical-align: text-top; }
        .WhyCMCSubPages .Section-client-quotes .row-quotes .col-md-3 p:first-child:before {
          margin-right: 19px;
          margin-top: 23px; }
        .WhyCMCSubPages .Section-client-quotes .row-quotes .col-md-3 p:first-child:after {
          margin-left: 15px;
          margin-top: -12px;
          content: '\201e'; }
  @media (min-width: 30em) {
    .WhyCMCSubPages .Section-client-quotes .row-quotes .col-md-3 {
      border: 0;
      position: static; }
      .WhyCMCSubPages .Section-client-quotes .row-quotes .col-md-3:nth-child(1) {
        padding-right: 22px; }
      .WhyCMCSubPages .Section-client-quotes .row-quotes .col-md-3:nth-child(2) {
        padding-left: 22px; }
      .WhyCMCSubPages .Section-client-quotes .row-quotes .col-md-3:nth-child(3) {
        padding-right: 22px;
        padding-top: 0; }
        .WhyCMCSubPages .Section-client-quotes .row-quotes .col-md-3:nth-child(3) p:first-child {
          padding-top: 75px; }
        .WhyCMCSubPages .Section-client-quotes .row-quotes .col-md-3:nth-child(3):before {
          background: #fff;
          content: '';
          display: block;
          height: 12px;
          left: 0;
          position: absolute;
          width: 100%; }
      .WhyCMCSubPages .Section-client-quotes .row-quotes .col-md-3:nth-child(4) {
        padding-left: 22px;
        padding-top: 0; }
        .WhyCMCSubPages .Section-client-quotes .row-quotes .col-md-3:nth-child(4) p:first-child {
          padding-top: 75px; }
        .WhyCMCSubPages .Section-client-quotes .row-quotes .col-md-3:nth-child(4):before {
          background: #fff;
          bottom: 0;
          content: '';
          display: block;
          left: 50%;
          margin-left: -6px;
          position: absolute;
          top: 0;
          width: 12px; } }
  @media (min-width: 48em) {
    .WhyCMCSubPages .Section-client-quotes .row-quotes .col-md-3 {
      padding: 63px 19px 29px 16px; }
      .WhyCMCSubPages .Section-client-quotes .row-quotes .col-md-3 p:first-child {
        padding-top: 0; }
      .WhyCMCSubPages .Section-client-quotes .row-quotes .col-md-3:nth-child(1) {
        padding-right: 28px; }
      .WhyCMCSubPages .Section-client-quotes .row-quotes .col-md-3:nth-child(2) {
        padding-left: 19px;
        padding-right: 25px; }
        .WhyCMCSubPages .Section-client-quotes .row-quotes .col-md-3:nth-child(2):before {
          background: #fff;
          bottom: 0;
          content: '';
          display: block;
          left: 25%;
          margin-left: -9px;
          position: absolute;
          top: 0;
          width: 12px; }
      .WhyCMCSubPages .Section-client-quotes .row-quotes .col-md-3:nth-child(3) {
        padding-left: 22px;
        padding-right: 22px; }
        .WhyCMCSubPages .Section-client-quotes .row-quotes .col-md-3:nth-child(3):before {
          bottom: 0;
          height: auto;
          left: 50%;
          margin-left: -6px;
          top: 0;
          width: 12px; }
      .WhyCMCSubPages .Section-client-quotes .row-quotes .col-md-3:nth-child(4) {
        padding-left: 25px; }
        .WhyCMCSubPages .Section-client-quotes .row-quotes .col-md-3:nth-child(4):before {
          left: 75%;
          margin-left: -3px; } }

.WhyCMCSubPages .Section-offices h2.Section-title {
  color: #000; }

@media (min-width: 480px) {
  .WhyCMCSubPages .Section-offices {
    padding-top: 5.125rem; }
    .WhyCMCSubPages .Section-offices h2.Section-title {
      margin-bottom: 5.125rem; } }

.whyCMCAnchors ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap; }

.whyCMCAnchors ul li {
  margin-bottom: 2rem;
  display: flex; }

.whyCMCAnchors ul li:before {
  content: "";
  width: 0;
  height: 0;
  display: none !important; }

.whyCMCAnchors a {
  max-width: 100% !important;
  width: 100% !important;
  text-align: left;
  line-height: 33px;
  -webkit-border-radius: 4px !important;
  -moz-border-radius: 4px !important;
  border-radius: 4px !important;
  border: 2px solid #fff;
  color: #ffffff !important;
  display: block;
  padding: 7px 15px;
  overflow: hidden;
  background: none;
  position: relative; }

.whyCMCAnchors a .Button-panel {
  position: absolute;
  background: #fff;
  width: 0;
  height: 120px;
  left: -30%;
  top: -35%;
  transition: width 0.3s ease-out !important;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  -ms-transform: skewX(-36deg);
  -webkit-transform: skewX(-36deg);
  transform: skewX(-36deg);
  z-index: -1; }

.whyCMCAnchors a:hover .Button-panel {
  width: 140%; }

.whyCMCAnchors a:hover span {
  color: #0a264d !important; }

.whyCMCAnchors a:hover .icon-image img {
  top: -32px; }

.whyCMCAnchors .icon-image {
  margin-bottom: 0;
  margin-right: 15px;
  margin-top: 0;
  vertical-align: top;
  width: 32px;
  height: 32px;
  overflow: hidden;
  display: inline-block;
  position: relative; }

.whyCMCAnchors .icon-image img {
  position: absolute;
  top: 0;
  left: 0; }

.whyCMCAnchorsLinks i:before {
  content: "\e60c";
  line-height: 32px;
  display: inline-block;
  float: right;
  text-align: right;
  width: 23px; }

.whyCMCAnchorsText {
  display: inline-block;
  width: calc(100% - 80px);
  line-height: 24px; }

.WhyCMCNew .whyCMCheader .background-image {
  background-image: url("https://assets.cmcmarkets.com/images/whyCMC-768x1024.jpg"); }
  @media (min-width: 768px) {
    .WhyCMCNew .whyCMCheader .background-image {
      background-image: url("https://assets.cmcmarkets.com/images/whyCMC-2560x1635.jpg");
      background-position: center 100%; } }

.WhyCMCNew .Slider-scroll-icon {
  margin-left: 0; }

.WhyCMCNew .Slider-scroll, .WhyCMCNew .Slider-scroll .Icon {
  color: #ffffff; }

.WhyCMCNew .Slider-scroll .Icon--arrow-down:before {
  font-size: 34px; }

/* COMPONENTS */
/*@import 'components/widgets';*/
/* All files starting with 'widgets. ... ' broken out from widgets.scss in same order as found in file */
/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
@media (min-width: 992px) {
  .animate-arrow-container:hover .animate-arrow:after {
    margin-left: 15px; } }

.animate-arrow-container .animate-arrow:after {
  position: absolute;
  content: '\003e';
  margin-left: 10px;
  color: #00c5e8;
  -webkit-transition-duration: 0.25s;
  -moz-transition-duration: 0.25s;
  transition-duration: 0.25s;
  transition-timing-function: ease-in-out; }
  @media (max-width: 480px) {
    .animate-arrow-container .animate-arrow:after {
      display: none; } }

.animate-arrow:after {
  position: absolute;
  content: '\003e';
  margin-left: 10px;
  color: #00c5e8;
  -webkit-transition-duration: 0.25s;
  -moz-transition-duration: 0.25s;
  transition-duration: 0.25s;
  transition-timing-function: ease-in-out; }
  @media (max-width: 480px) {
    .animate-arrow:after {
      display: none; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.Widget-blue-box, .Widget-blue-box-light {
  background-color: #1b2429;
  background-image: url("https://assets.cmcmarkets.com/images/dark-blue-bg-v2_small.jpg");
  background-repeat: "no-repeat";
  background-size: cover;
  background-position: "contain";
  margin: 0 0 1.5rem;
  padding: 50px 24px 10px;
  color: #fff;
  background-size: contain;
  text-align: center; }
  @media (min-width: 480px) {
    .Widget-blue-box, .Widget-blue-box-light {
      background-image: url("https://assets.cmcmarkets.com/images/dark-blue-bg-v2_medium.jpg");
      background-size: cover; } }
  @media (min-width: 768px) {
    .Widget-blue-box, .Widget-blue-box-light {
      background-image: url("https://assets.cmcmarkets.com/images/dark-blue-bg-v2_large.jpg");
      background-size: cover; } }
  @media (min-width: 992px) {
    .Widget-blue-box, .Widget-blue-box-light {
      background-image: url("https://assets.cmcmarkets.com/images/dark-blue-bg-v2.jpg");
      background-size: "50% 50%"; } }
  .Widget-blue-box .Button, .Widget-blue-box-light .Button {
    margin-bottom: 16px; }

.Widget-blue-box-light {
  background: url("https://assets.cmcmarkets.com/images/light-blue-bg.jpg") 50% 50% no-repeat #0158CC; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.reevoo-badge-cmc {
  /*Kill swithc for reevoo review badge. Can be set to display:none to hide this badge*/
  /*display:none;*/
  display: block;
  width: 240px;
  margin: 1rem auto; }
  .reevoo-badge-cmc.reevoo-badge-round {
    width: 150px; }
  @media (min-width: 768px) {
    .reevoo-badge-cmc.reevoo-badge-cmc-left-align,
    .reevoo-badge-cmc-left-align .reevoo-badge-cmc {
      margin: 1rem 0 2rem; } }
  .reevoo-badge-cmc a.reviews span {
    letter-spacing: -0.25px; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.four-column-anchor {
  margin: 2em 0 0;
  padding: 0; }
  .four-column-anchor .row {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
    min-height: 90px;
    max-height: 93px;
    margin: 0;
    background: #fff;
    border: 1px solid #e8e9ed;
    padding: 1.5em; }
  .four-column-anchor a {
    color: #58585a; }
  .four-column-anchor .row img, .four-column-anchor .row p {
    margin: 0 auto; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.HomepageHero {
  width: 100%;
  z-index: 0; }

.expandable-banner-products {
  position: relative;
  float: left;
  width: 100%;
  z-index: 10; }
  .expandable-banner-products .expandable-ribbon {
    position: relative;
    float: left;
    width: 100%;
    background: #1ab99f;
    letter-spacing: 1.5px;
    cursor: pointer;
    z-index: 1; }
    @media (min-width: 768px) {
      .expandable-banner-products .expandable-ribbon {
        min-height: 46px; } }
    @media (min-width: 992px) {
      .expandable-banner-products .expandable-ribbon {
        min-height: 50px; } }
    .expandable-banner-products .expandable-ribbon .expandable-icon {
      position: absolute;
      width: 45px;
      height: 45px;
      bottom: -25px;
      left: 50%;
      margin-left: -20px;
      background: #1ab99f;
      z-index: -1;
      -webkit-border-radius: 100%;
      -moz-border-radius: 100%;
      border-radius: 100%;
      -webkit-transition-duration: 0.25s;
      -moz-transition-duration: 0.25s;
      transition-duration: 0.25s;
      transition-timing-function: ease-in-out; }
      .expandable-banner-products .expandable-ribbon .expandable-icon.expanded {
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg); }
      .expandable-banner-products .expandable-ribbon .expandable-icon span {
        display: block;
        height: 21px;
        width: 21px;
        margin: 12px auto 0 auto;
        font-size: 28px;
        background: #25A992;
        color: #fff;
        font-weight: normal;
        -webkit-border-radius: 100%;
        -moz-border-radius: 100%;
        border-radius: 100%;
        text-align: center;
        line-height: 18px;
        letter-spacing: 0; }
        @media (min-width: 768px) {
          .expandable-banner-products .expandable-ribbon .expandable-icon span {
            margin: 12px auto 0 auto;
            height: 21px;
            width: 21px;
            font-weight: normal; } }
    .expandable-banner-products .expandable-ribbon .expandable-title {
      padding: 10px 0 20px 10px;
      color: #fff;
      font-size: 12px;
      letter-spacing: 1.33px;
      text-transform: uppercase;
      line-height: 16px; }
      @media (min-width: 768px) {
        .expandable-banner-products .expandable-ribbon .expandable-title {
          font-size: 14px;
          letter-spacing: 1.5px; } }
      @media (min-width: 992px) {
        .expandable-banner-products .expandable-ribbon .expandable-title {
          padding: 14px;
          font-size: 16px; } }
      .expandable-banner-products .expandable-ribbon .expandable-title span {
        color: #181818; }
  .expandable-banner-products .expandable-content {
    display: none;
    position: relative;
    float: left;
    width: 100%;
    padding: 4rem 0;
    background: -moz-radial-gradient(60%, ellipse cover, #454c52 0%, #0c131a 100%, #0c131a 129%);
    /* ff3.6+ */
    background: -webkit-gradient(radial, 60% 60%, 0, 60% 60%, 100%, color-stop(0%, #454c52), color-stop(100%, #0c131a), color-stop(129%, #0c131a));
    /* safari4+,chrome */
    background: -webkit-radial-gradient(60%, ellipse cover, #454c52 0%, #0c131a 100%, #0c131a 129%);
    /* safari5.1+,chrome10+ */
    background: -o-radial-gradient(60%, ellipse cover, #454c52 0%, #0c131a 100%, #0c131a 129%);
    /* opera 11.10+ */
    background: -ms-radial-gradient(60%, ellipse cover, #454c52 0%, #0c131a 100%, #0c131a 129%);
    /* ie10+ */
    background: radial-gradient(ellipse at 60%, #454c52 0%, #0c131a 100%, #0c131a 129%);
    /* w3c */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#454c52', endColorstr='#0c131a', GradientType=1);
    /* ie6-9 */ }
    @media (min-width: 768px) {
      .expandable-banner-products .expandable-content.fluid-bg {
        background-size: 1282px; }
        .expandable-banner-products .expandable-content.fluid-bg .top-expandable-text {
          min-height: 355px; }
      .expandable-banner-products .expandable-content.bg-us-elections {
        background: #010101; }
      .expandable-banner-products .expandable-content.bg-us-elections-flag-full-width {
        background: #000 url("https://assets.cmcmarkets.com/images/us-elections-winner-2.jpg") no-repeat center;
        background-size: 2560px 389px; }
      .expandable-banner-products .expandable-content.bg-us-elections-badges {
        background: #000 url("https://assets.cmcmarkets.com/images/election-badges_de_new.jpg") no-repeat center;
        background-size: 1295px; }
      .expandable-banner-products .expandable-content.bg-knockouts-germany {
        background: #030305 url("https://assets.cmcmarkets.com/images/de-ctfe-hero-bg4.png?v=1") no-repeat center;
        background-size: initial; }
      .expandable-banner-products .expandable-content.us-elections-badges {
        background: #030305 url("https://assets.cmcmarkets.com/images/bg-expandable-knockouts-germany.jpg?v=1") no-repeat center;
        background-size: 1295px; } }
    .expandable-banner-products .expandable-content.bg-heckyl h2 {
      max-width: 100%; }
    @media (min-width: 992px) {
      .expandable-banner-products .expandable-content.bg-heckyl {
        background: #091118 url("https://assets.cmcmarkets.com/images/bg-heckyl.png?v=2") no-repeat top;
        background-size: 1295px 100%; } }
    .expandable-banner-products .expandable-content h2 {
      font-family: "ubuntulight", sans-serif;
      font-size: 24px;
      letter-spacing: 1.45px;
      line-height: 32px;
      color: #00c5e8; }
      @media (min-width: 768px) {
        .expandable-banner-products .expandable-content h2 {
          font-size: 34px;
          line-height: 43px; } }
    .expandable-banner-products .expandable-content p {
      color: #fff;
      font-size: 18px;
      letter-spacing: 0.1px;
      line-height: 30px; }
      @media (min-width: 992px) {
        .expandable-banner-products .expandable-content p {
          max-width: 850px;
          margin: 1em auto; } }
    .expandable-banner-products .expandable-content img {
      display: block;
      margin: 0 auto;
      max-height: 300px; }
      @media (max-width: 992px) {
        .expandable-banner-products .expandable-content img {
          width: 100%; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.LiveInfo {
  padding-bottom: 0; }
  .LiveInfo .container-fluid {
    padding-top: 2.5em;
    padding-bottom: 0;
    background: none; }
    @media (min-width: 992px) {
      .LiveInfo .container-fluid {
        padding-top: 4.5em; } }
  .LiveInfo h2 {
    font-family: "ubuntulight", sans-serif;
    font-size: 24px;
    color: #00c5e8;
    letter-spacing: 1.5px;
    line-height: 42px; }
    @media (min-width: 768px) {
      .LiveInfo h2 {
        font-size: 34px; } }

.market-price-widget.no-arrow,
.market-price-widget.hidden-arrow {
  width: 100%; }
  @media (min-width: 768px) {
    .market-price-widget.no-arrow,
    .market-price-widget.hidden-arrow {
      padding: 0; } }
  .market-price-widget.no-arrow .prices,
  .market-price-widget.hidden-arrow .prices {
    background: none; }
  @media (min-width: 768px) {
    .market-price-widget.no-arrow .markets,
    .market-price-widget.hidden-arrow .markets {
      padding: 0;
      margin-bottom: 20px; } }
  .market-price-widget.no-arrow .arrows,
  .market-price-widget.hidden-arrow .arrows {
    display: none; }

.market-price-widget.hidden-arrow {
  /* Still activated in JS but hidden on desktop views - only show for mobile view */ }
  @media (max-width: 767px) {
    .market-price-widget.hidden-arrow .arrows {
      display: block; } }

.market-price-widget {
  position: relative;
  width: 100%;
  margin: 0;
  background: #000;
  margin-right: 6px; }
  .market-price-widget table {
    margin-bottom: 0; }
  .market-price-widget .table {
    margin-bottom: 10px; }
  @media (min-width: 768px) {
    .market-price-widget {
      float: right;
      width: 668px;
      margin: 0 auto; } }
  @media (min-width: 992px) {
    .market-price-widget {
      float: right;
      width: 700px;
      padding: 0 65px;
      margin-right: 6px; } }
  @media (min-width: 1330px) {
    .market-price-widget {
      float: right;
      width: 900px;
      padding: 0 65px; } }
  .market-price-widget * {
    vertical-align: middle; }
    .market-price-widget * ul, .market-price-widget * li {
      padding: 0;
      margin: 0; }
      .market-price-widget * ul:before, .market-price-widget * li:before {
        content: ''; }
  .market-price-widget:after {
    clear: both; }
  .market-price-widget .markets {
    float: left;
    width: 500%;
    padding: 0;
    margin: 0; }
    @media (min-width: 768px) {
      .market-price-widget .markets {
        width: 100%;
        padding: 0 15px;
        margin: 0; } }
    .market-price-widget .markets li {
      float: left;
      width: 15%;
      padding: 1em 0;
      margin: 0 2.5%;
      color: #00c5e8;
      font-size: 14px;
      text-align: center;
      text-transform: uppercase;
      cursor: pointer; }
      @media (min-width: 768px) {
        .market-price-widget .markets li {
          width: 20%;
          padding: 5px 0;
          margin: 0;
          background: #fff;
          border: 1px solid #e8e9ed;
          border-left: 0; }
          .market-price-widget .markets li:first-child {
            border: 0; } }
      .market-price-widget .markets li:hover {
        color: #fff; }
      .market-price-widget .markets li.active {
        background: #0a264d;
        color: #fff; }
        .market-price-widget .markets li.active:after {
          content: '';
          width: 0;
          height: 0;
          border-left: 10px solid transparent;
          border-right: 10px solid transparent;
          border-top: 10px solid #0a264d;
          font-size: 0;
          line-height: 0;
          bottom: -10px;
          margin-left: -10px;
          left: 50%;
          position: absolute; }
      .market-price-widget .markets li:before {
        content: ''; }
  .market-price-widget .prices {
    width: 100%;
    background: #000;
    border: 1px solid #e8e9ed;
    overflow: hidden; }
    .market-price-widget .prices li {
      width: 100%;
      margin: 1px 0;
      list-style-type: none; }
      .market-price-widget .prices li::before, .market-price-widget .prices li::after {
        display: none; }
      .market-price-widget .prices li ul {
        width: 100%;
        padding: 0;
        display: table; }
        @media (min-width: 320px) {
          .market-price-widget .prices li ul {
            padding: 0 1em; } }
        @media (min-width: 768px) {
          .market-price-widget .prices li ul {
            padding: 0 2em; } }
        @media (min-width: 992px) {
          .market-price-widget .prices li ul {
            padding: 0 3.5em; } }
        .market-price-widget .prices li ul.titles li {
          font-family: "latoregular", sans-serif;
          font-size: 13px; }
          .market-price-widget .prices li ul.titles li:nth-child(3), .market-price-widget .prices li ul.titles li:nth-child(4), .market-price-widget .prices li ul.titles li:nth-child(5) {
            padding: 0.25em 1em; }
            @media (min-width: 768px) {
              .market-price-widget .prices li ul.titles li:nth-child(3), .market-price-widget .prices li ul.titles li:nth-child(4), .market-price-widget .prices li ul.titles li:nth-child(5) {
                padding: 0.25em 1.5em; } }
        .market-price-widget .prices li ul li {
          width: 25%;
          display: table-cell;
          text-align: right;
          padding: 0 0.5em;
          color: #fff;
          font-family: "latoregular", sans-serif;
          font-size: 13px;
          font-weight: normal;
          vertical-align: middle; }
          .market-price-widget .prices li ul li:first-child {
            width: 30%;
            text-align: left; }
          .market-price-widget .prices li ul li:nth-child(2) {
            width: 20%; }
          @media (max-width: 320px) {
            .market-price-widget .prices li ul li {
              padding: 0 0.25em; } }
          @media (min-width: 768px) {
            .market-price-widget .prices li ul li {
              width: 20%; }
              .market-price-widget .prices li ul li:nth-child(2) {
                width: 10%; } }
          .market-price-widget .prices li ul li.LiveInfo-title {
            text-transform: uppercase; }
          .market-price-widget .prices li ul li.LiveInfo-spread, .market-price-widget .prices li ul li.LiveInfo-change {
            font-weight: normal; }
          .market-price-widget .prices li ul li.LiveInfo-change {
            color: #00c5e8;
            -webkit-transition-duration: 0.3s;
            -moz-transition-duration: 0.3s;
            transition-duration: 0.3s;
            transition-timing-function: ease-in-out; }
          @media (min-width: 768px) {
            .market-price-widget .prices li ul li.sell-buy {
              width: 40%; } }
          .market-price-widget .prices li ul li .sell,
          .market-price-widget .prices li ul li .buy {
            width: 100%;
            font-size: 15px;
            font-weight: normal;
            -webkit-transition-duration: 0.3s;
            -moz-transition-duration: 0.3s;
            transition-duration: 0.3s;
            transition-timing-function: ease-in-out; }
            @media (min-width: 768px) {
              .market-price-widget .prices li ul li .sell,
              .market-price-widget .prices li ul li .buy {
                float: left;
                width: 50%; } }
        .market-price-widget .prices li ul .LiveInfo-up {
          color: #30D039; }
        .market-price-widget .prices li ul .LiveInfo-down {
          color: #FB252C !important; }
    .market-price-widget .prices .price-slider {
      width: 500%; }
      .market-price-widget .prices .price-slider .price-slide {
        float: left;
        width: 20%;
        padding: 0; }
        .market-price-widget .prices .price-slider .price-slide ul:nth-child(odd) {
          background: #333; }
  .market-price-widget .slider-footnote {
    font-size: 12px; }
  .market-price-widget .arrows a {
    position: absolute;
    width: 43px;
    height: 43px;
    background-position: -25px;
    color: #D8D8D8;
    top: 0.5em;
    right: -0.5em;
    font-family: 'icomoon';
    speak: none;
    font-size: 26px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    cursor: pointer;
    -webkit-transition-duration: 0.75s;
    -moz-transition-duration: 0.75s;
    transition-duration: 0.75s;
    transition-timing-function: ease-in-out; }
    @media (min-width: 768px) {
      .market-price-widget .arrows a {
        font-size: 42px; } }
    .market-price-widget .arrows a:hover {
      color: #00c5e8; }
    .market-price-widget .arrows a.right:before {
      content: "\e612"; }
    @media (min-width: 768px) {
      .market-price-widget .arrows a.right {
        top: 3em;
        right: -1.25em; } }
    @media (min-width: 992px) {
      .market-price-widget .arrows a.right {
        right: 0; } }
    .market-price-widget .arrows a.left {
      background-position: 0;
      left: 0; }
      .market-price-widget .arrows a.left:before {
        content: "\e617"; }
      @media (min-width: 768px) {
        .market-price-widget .arrows a.left {
          top: 3em;
          left: -1.25em; } }
      @media (min-width: 992px) {
        .market-price-widget .arrows a.left {
          left: 0; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
#hero-video {
  padding: 0; }

.home-page-hero {
  background-color: transparent;
  background-image: url("https://assets.cmcmarkets.com/images/video-hero-background-v2_small.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  float: left;
  width: 100%;
  height: auto;
  overflow: hidden; }
  @media (min-width: 480px) {
    .home-page-hero {
      background-image: url("https://assets.cmcmarkets.com/images/video-hero-background-v2_medium.jpg");
      background-size: cover; } }
  @media (min-width: 768px) {
    .home-page-hero {
      background-image: url("https://assets.cmcmarkets.com/images/video-hero-background-v2_large.jpg");
      background-size: cover; } }
  @media (min-width: 992px) {
    .home-page-hero {
      background-image: url("https://assets.cmcmarkets.com/images/video-hero-background-v2.jpg");
      background-size: cover; } }
  @media (min-width: 992px) {
    .home-page-hero {
      height: 642px;
      /*background: url('https://assets.cmcmarkets.com/images/video-hero-bg-mobile.jpg') no-repeat;
    background-size: cover;
    @media(min-width: 990px) {
      height: 645px;
      background: url('https://assets.cmcmarkets.com/images/video-hero-bg.jpg?v=4') no-repeat;
      background-size: cover;
    }*/ } }
  .home-page-hero:after {
    clear: both; }
  .home-page-hero .home-page-hero-background {
    position: absolute;
    width: 100%;
    height: 350px;
    top: 0;
    z-index: -1; }
    @media (min-width: 1280px) and (max-width: 1680px) {
      .home-page-hero .home-page-hero-background {
        width: 1680px;
        margin: 0 auto; } }
  .home-page-hero_wrap {
    position: relative; }
  .home-page-hero_bg-anim {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    will-change: opacity;
    transform: translate3d(0, 0, 0);
    opacity: 0;
    transition: opacity 5s;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#efe683+0,8997e5+20,fbdfbc+40,bae2ee+78,efe683+100 */
    /*background: -moz-linear-gradient(left,  rgba(239,230,131,1) 0%, rgba(137,151,229,1) 20%, rgba(251,223,188,1) 40%, rgba(186,226,238,1) 78%, rgba(239,230,131,1) 100%);
    background: -webkit-linear-gradient(left,  rgba(239,230,131,1) 0%,rgba(137,151,229,1) 20%,rgba(251,223,188,1) 40%,rgba(186,226,238,1) 78%,rgba(239,230,131,1) 100%);
    background: linear-gradient(to right,  rgba(239,230,131,1) 0%,rgba(137,151,229,1) 20%,rgba(251,223,188,1) 40%,rgba(186,226,238,1) 78%,rgba(239,230,131,1) 100%);*/
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#efe683+0,8997e5+17,b10552+34,00a8dd+50,fbdfbc+66,bae2ee+84,efe683+100 */
    background: -moz-linear-gradient(left, #efe683 0%, #8997e5 17%, #b10552 34%, #00a8dd 50%, #fbdfbc 66%, #bae2ee 84%, #efe683 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #efe683 0%, #8997e5 17%, #b10552 34%, #00a8dd 50%, #fbdfbc 66%, #bae2ee 84%, #efe683 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #efe683 0%, #8997e5 17%, #b10552 34%, #00a8dd 50%, #fbdfbc 66%, #bae2ee 84%, #efe683 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    background-position: 0 0;
    background-size: 400% 100%;
    animation: gradientBgSlide 160s infinite linear; }
  .home-page-hero .home-page-hero-content {
    float: left;
    width: 100%;
    padding: 3em 0.75em 2em 0.75em;
    background: none;
    color: #fff;
    z-index: 10; }
    @media (min-width: 992px) {
      .home-page-hero .home-page-hero-content {
        padding: 4em 0.75em 2em 0.75em; } }
    .home-page-hero .home-page-hero-content h1 {
      margin: 10px 0 0 0;
      font-family: "ubuntulight", sans-serif;
      font-size: 15px;
      letter-spacing: 0.97px;
      line-height: 22px; }
      @media (min-width: 375px) {
        .home-page-hero .home-page-hero-content h1 {
          margin-top: 1em;
          line-height: 22px; } }
    .home-page-hero .home-page-hero-content p {
      font-family: "ubuntulight", sans-serif;
      font-size: 22px;
      letter-spacing: 1.5px;
      line-height: 26px; }
      @media (min-width: 375px) {
        .home-page-hero .home-page-hero-content p {
          font-size: 24px;
          line-height: 26px; } }
      @media (min-width: 768px) {
        .home-page-hero .home-page-hero-content p {
          margin: 0 auto;
          font-size: 32px;
          line-height: 43px;
          padding: 0 3.25em; } }
      @media (min-width: 1024px) {
        .home-page-hero .home-page-hero-content p {
          padding: 0;
          font-size: 24px;
          line-height: 26px; } }
      @media (min-width: 1025px) {
        .home-page-hero .home-page-hero-content p {
          font-size: 34px;
          line-height: 43px; } }
    .home-page-hero .home-page-hero-content .cta-holder {
      max-width: 768px;
      margin: 0 auto; }
    .home-page-hero .home-page-hero-content .live-account-cta p {
      font-size: 15px;
      letter-spacing: 1.5px;
      line-height: 32px; }
      @media (min-width: 480px) {
        .home-page-hero .home-page-hero-content .live-account-cta p {
          font-size: 16px; } }
    .home-page-hero .home-page-hero-content .live-account-cta .demo-account-cta {
      margin: 1em 0 0 0; }
      @media (min-width: 768px) {
        .home-page-hero .home-page-hero-content .live-account-cta .demo-account-cta {
          margin: 0; } }
      @media (min-width: 992px) {
        .home-page-hero .home-page-hero-content .live-account-cta .demo-account-cta {
          margin: 32px 0 0 -160px;
          float: left;
          font-weight: bold; } }
      .home-page-hero .home-page-hero-content .live-account-cta .demo-account-cta p {
        font-size: 16px;
        letter-spacing: 1.5px;
        line-height: 32px;
        text-align: center; }
    .home-page-hero .home-page-hero-content .live-account-cta .button-large {
      padding: 6px 15px;
      margin: 1em auto 0 auto;
      font-size: 18px;
      letter-spacing: 1.05px;
      line-height: 30px; }
      @media (min-width: 768px) {
        .home-page-hero .home-page-hero-content .live-account-cta .button-large {
          float: left;
          min-width: 350px;
          padding: 12px 0;
          margin: 1em 0 0.5em 50%;
          left: -175px; } }
    @media (min-width: 768px) {
      .en-ca .home-page-hero .home-page-hero-content .live-account-cta .button-large {
        float: left;
        min-width: 410px;
        left: -205px; } }

@keyframes gradientBgSlide {
  0% {
    background-position: 0; }
  100% {
    background-position: 400%; } }
  .home-page-hero p {
    font-size: 16px;
    letter-spacing: 1.5px;
    line-height: 32px;
    text-align: center; }

.wrapper .button-large {
  padding: 6px 15px;
  margin: 1em auto 0 auto;
  font-size: 18px;
  letter-spacing: 1.05px;
  line-height: 30px; }
  @media (min-width: 768px) {
    .wrapper .button-large {
      float: left;
      min-width: 350px;
      padding: 12px 0;
      margin: 1em 0 0.5em 50%;
      left: -175px; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.shadow-background-home-hero {
  display: inline-block;
  width: 100%;
  background: url("https://assets.cmcmarkets.com/images/shadow-background-home-hero.jpg") no-repeat top #fff; }
  .shadow-background-home-hero_zh {
    display: block;
    min-height: 100px; }

.products-banner {
  position: relative;
  padding: 30px 0; }
  @media (min-width: 992px) {
    .products-banner {
      padding: 45px 0;
      background: #fff;
      max-width: 1280px;
      margin: -330px auto 0 auto;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      border-radius: 3px; } }
  .products-banner h2 {
    font-family: "ubuntulight", sans-serif;
    font-size: 24px;
    letter-spacing: 1.45px;
    line-height: 32px;
    color: #0a264d; }
    @media (min-width: 768px) {
      .products-banner h2 {
        font-size: 34px;
        line-height: 43px; } }
  .products-banner a {
    font-size: 12px;
    color: #00c5e8;
    letter-spacing: 0.41px;
    text-transform: uppercase; }
  @media (min-width: 768px) {
    .products-banner .row {
      margin-top: 3em; } }
  .products-banner .what-is-forex {
    text-align: left; }
    @media (min-width: 768px) {
      .products-banner .what-is-forex {
        text-align: center; } }
  .products-banner .large-cta-container {
    padding-top: 4em; }
    @media (min-width: 480px) {
      .products-banner .large-cta-container {
        padding: 45px 90px 0 90px; } }
    @media (min-width: 992px) {
      .products-banner .large-cta-container .col-offset-single-cta {
        margin-left: 38%; } }
  @media (min-width: 320px) and (max-width: 768px) {
    .products-banner .commodities-icon .product-icon img {
      width: auto;
      height: 55px; } }
  @media (min-width: 768px) and (max-width: 992px) {
    .products-banner .commodities-icon {
      clear: right;
      margin-bottom: 5em; } }
  .products-banner a {
    font-size: 12px;
    color: #00c5e8;
    letter-spacing: 0.41px;
    line-height: 30px;
    text-transform: uppercase; }
  .products-banner .product-item {
    padding: 1em 0;
    margin-bottom: 1em;
    border: 1px solid #fff; }
    @media (min-width: 768px) {
      .products-banner .product-item {
        margin-bottom: 0;
        text-align: center; } }
    .products-banner .product-item:hover {
      border: 1px solid #f1f2f4; }
    .products-banner .product-item h3 {
      margin: 0;
      font-size: 18px;
      color: #0a264d;
      letter-spacing: 0.95px;
      line-height: 30px;
      text-transform: none; }
    .products-banner .product-item p {
      margin: 0;
      font-size: 16px;
      color: #979b9e;
      letter-spacing: 0.15px;
      line-height: 22px;
      text-transform: none; }
  @media (min-width: 320px) and (max-width: 768px) {
    .products-banner .product-icon img {
      width: 55px; } }
  @media (min-width: 768px) {
    .products-banner .product-icon {
      min-height: 77px;
      margin-bottom: 25px; }
      .products-banner .product-icon:before {
        content: ' ';
        display: inline-block;
        vertical-align: middle;
        height: 77px; }
      .products-banner .product-icon img {
        display: inline-block;
        vertical-align: middle; }
        .products-banner .product-icon img:hover {
          fill: #00c5e8; } }
  .products-banner-v5 {
    margin-top: 0; }

.large-cta-button {
  padding: 15px 20px;
  margin-top: 20px;
  background: #FFFFFF;
  border: 2px solid #00c5e8;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-transition-duration: 0.25s;
  -moz-transition-duration: 0.25s;
  transition-duration: 0.25s;
  transition-timing-function: ease-in-out; }
  @media (min-width: 768px) {
    .large-cta-button {
      max-width: 280px; }
      .large-cta-button span:nth-child(1) {
        max-width: 280px; } }
  .large-cta-button:hover {
    background: #00c5e8; }
    .large-cta-button:hover * {
      color: #fff !important; }
    .large-cta-button:hover .animate-arrow:after {
      color: #fff; }
  .large-cta-button span {
    text-transform: none; }
    .large-cta-button span:nth-child(1) {
      margin: auto;
      font-size: 18px;
      color: #0a264d;
      font-family: "ubunturegular", sans-serif;
      letter-spacing: 0.19px;
      line-height: 30px; }
    .large-cta-button span:nth-child(2) {
      font-size: 16px;
      color: #979b9e;
      letter-spacing: 0.15px;
      line-height: 22px; }
      @media (min-width: 992px) and (max-width: 1200px) {
        .large-cta-button span:nth-child(2) {
          font-size: 12px; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.trading-platforms-banner {
  padding-top: 2.5em;
  padding-bottom: 0;
  background-color: #f1f2f4;
  background-image: url("https://assets.cmcmarkets.com/images/home-devices-dark-mosaic-background_small.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  background-size: 1750px; }
  @media (min-width: 992px) {
    .trading-platforms-banner {
      padding-top: 4.5em; } }
  @media (min-width: 480px) {
    .trading-platforms-banner {
      background-image: url("https://assets.cmcmarkets.com/images/home-devices-dark-mosaic-background_medium.png");
      background-size: cover; } }
  @media (min-width: 768px) {
    .trading-platforms-banner {
      background-image: url("https://assets.cmcmarkets.com/images/home-devices-dark-mosaic-background_large.png");
      background-size: cover; } }
  @media (min-width: 992px) {
    .trading-platforms-banner {
      background-image: url("https://assets.cmcmarkets.com/images/home-devices-dark-mosaic-background.png");
      background-size: 1750px; } }
  .trading-platforms-banner_zh {
    background-color: #58585a;
    background-image: url("https://assets.cmcmarkets.com/images/china-skyline_small.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top; }
    @media (min-width: 480px) {
      .trading-platforms-banner_zh {
        background-image: url("https://assets.cmcmarkets.com/images/china-skyline_medium.png");
        background-size: cover; } }
    @media (min-width: 768px) {
      .trading-platforms-banner_zh {
        background-image: url("https://assets.cmcmarkets.com/images/china-skyline_large.png");
        background-size: cover; } }
    @media (min-width: 992px) {
      .trading-platforms-banner_zh {
        background-image: url("https://assets.cmcmarkets.com/images/china-skyline.png");
        background-size: 1750px; } }
    .trading-platforms-banner_zh p.description {
      color: #333333; }
  @media (min-width: 768px) {
    .trading-platforms-banner {
      background-size: 2080px; } }
  @media (min-width: 992px) {
    .trading-platforms-banner {
      background-size: 2250px; } }
  @media (min-width: 2250px) {
    .trading-platforms-banner {
      background-size: 100%;
      background-position: 0 -5em; } }
  .trading-platforms-banner h2 {
    color: #00c5e8;
    font-family: "ubuntulight", sans-serif;
    font-size: 24px;
    letter-spacing: 1.45px;
    line-height: 32px; }
    @media (min-width: 768px) {
      .trading-platforms-banner h2 {
        font-size: 34px;
        line-height: 43px; } }
  .trading-platforms-banner p {
    margin-bottom: 0;
    color: #FFFFFF;
    font-size: 18px;
    letter-spacing: 0.1px;
    line-height: 30px; }
    @media (min-width: 992px) {
      .trading-platforms-banner p {
        max-width: 850px;
        margin: 1em auto 0 auto; } }
  .trading-platforms-banner .trading-platforms-holder {
    position: relative;
    width: 85%;
    min-height: 145px;
    margin: 2.5em auto 2.5em auto; }
    @media (min-width: 480px) {
      .trading-platforms-banner .trading-platforms-holder {
        width: 45%; } }
    @media (min-width: 768px) {
      .trading-platforms-banner .trading-platforms-holder {
        width: 85%;
        min-height: 325px; } }
    @media (min-width: 992px) {
      .trading-platforms-banner .trading-platforms-holder {
        width: 1008px;
        min-height: 510px; } }
    .trading-platforms-banner .trading-platforms-holder img {
      position: absolute;
      margin: 0; }
      .trading-platforms-banner .trading-platforms-holder img.devices-laptop {
        top: 0;
        left: 14%;
        width: 245px; }
        @media (min-width: 768px) {
          .trading-platforms-banner .trading-platforms-holder img.devices-laptop {
            width: 550px; } }
      .trading-platforms-banner .trading-platforms-holder img.devices-android {
        right: 2.5%;
        bottom: 1%;
        width: 40px; }
        @media (min-width: 768px) {
          .trading-platforms-banner .trading-platforms-holder img.devices-android {
            width: 97px; } }
      .trading-platforms-banner .trading-platforms-holder img.devices-iphone {
        right: 8%;
        bottom: -2%;
        width: 50px; }
        @media (min-width: 768px) {
          .trading-platforms-banner .trading-platforms-holder img.devices-iphone {
            width: 113px; } }
      .trading-platforms-banner .trading-platforms-holder img.devices-ipad {
        left: 0;
        bottom: 0;
        width: 145px; }
        @media (min-width: 768px) {
          .trading-platforms-banner .trading-platforms-holder img.devices-ipad {
            width: 350px; } }
      @media (min-width: 992px) {
        .trading-platforms-banner .trading-platforms-holder img.devices-laptop, .trading-platforms-banner .trading-platforms-holder img.devices-android, .trading-platforms-banner .trading-platforms-holder img.devices-iphone, .trading-platforms-banner .trading-platforms-holder img.devices-ipad {
          width: auto; } }
  .trading-platforms-banner .quick-links {
    -webkit-box-shadow: 0 2px 0 #D8D8D8;
    -moz-box-shadow: 0 2px 0 #D8D8D8;
    box-shadow: 0 2px 0 #D8D8D8;
    padding: 28px 0;
    margin-bottom: 2px;
    background: #f9f9f9;
    font-family: "latoregular", sans-serif;
    font-weight: normal; }
    .trading-platforms-banner .quick-links .quick-link {
      margin-top: 1em; }
      @media (min-width: 768px) {
        .trading-platforms-banner .quick-links .quick-link {
          margin-top: 0; } }
      .trading-platforms-banner .quick-links .quick-link a {
        font-size: 16px;
        color: #00c5e8;
        letter-spacing: 0.5px;
        line-height: 30px;
        text-transform: uppercase; }
        .trading-platforms-banner .quick-links .quick-link a.active {
          color: #0a264d; }
        @media (min-width: 992px) and (max-width: 1200px) {
          .trading-platforms-banner .quick-links .quick-link a {
            font-size: 12px; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.learn-banner {
  padding-top: 2.5em;
  padding-bottom: 3.5em;
  background-color: #eeeff2; }
  @media (min-width: 992px) {
    .learn-banner {
      padding-top: 4.5em; } }
  .learn-banner_zh {
    background: url("https://assets.cmcmarkets.com/images/learn-more-bg-zh-small.jpg") no-repeat 50% 50%;
    background-size: cover; }
    @media (min-width: 480px) {
      .learn-banner_zh {
        background-image: url("https://assets.cmcmarkets.com/images/learn-more-bg-zh-medium.jpg"); } }
    @media (min-width: 768px) {
      .learn-banner_zh {
        background-image: url("https://assets.cmcmarkets.com/images/learn-more-bg-zh-large.jpg"); } }
  .learn-banner h2 {
    color: #00c5e8;
    font-family: "ubuntulight", sans-serif;
    font-size: 24px;
    letter-spacing: 1.45px;
    line-height: 32px; }
    @media (min-width: 768px) {
      .learn-banner h2 {
        font-size: 34px;
        line-height: 43px; } }
  .learn-banner p {
    margin-bottom: 40px;
    font-family: "latoregular", sans-serif;
    color: #58585a;
    font-size: 18px;
    letter-spacing: 0.1px;
    line-height: 30px; }
    @media (min-width: 992px) {
      .learn-banner p {
        max-width: 850px;
        margin: 1em auto 40px auto; } }
  .learn-banner img {
    width: 100%;
    display: block;
    margin: 0; }
  .learn-banner a {
    margin-bottom: 1em; }
    .learn-banner a .learn-item {
      padding: 1em;
      background: #FFF; }
      @media (min-width: 992px) {
        .learn-banner a .learn-item {
          padding: 1em 1em 3em 1em; } }
      .learn-banner a .learn-item .learn-title {
        margin-bottom: 20px;
        font-family: "latoregular", sans-serif;
        font-size: 20px;
        color: #0a264d;
        letter-spacing: 1.24px;
        line-height: 30px; }
        @media (min-width: 768px) and (max-width: 992px) {
          .learn-banner a .learn-item .learn-title {
            padding: 0 20%; } }
      .learn-banner a .learn-item .Button {
        display: none; }
        @media (min-width: 992px) {
          .learn-banner a .learn-item .Button {
            display: inline-block; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.why-cmc-banner {
  padding-top: 30px; }
  @media (min-width: 768px) {
    .why-cmc-banner {
      padding-top: 40px; } }
  @media (min-width: 992px) {
    .why-cmc-banner {
      padding-top: 75px; } }
  .why-cmc-banner h2 {
    font-family: "ubuntulight", sans-serif;
    font-size: 24px;
    letter-spacing: 1.45px;
    line-height: 32px;
    margin-bottom: 60px;
    color: #0a264d; }
    @media (min-width: 768px) {
      .why-cmc-banner h2 {
        font-size: 34px;
        line-height: 43px; } }
  .why-cmc-banner .why-cmc-items {
    margin-bottom: 48px; }
    .why-cmc-banner .why-cmc-items .item-wrapper {
      margin-bottom: 10px; }
      .why-cmc-banner .why-cmc-items .item-wrapper .why-cmc-item {
        padding: 35px 18px; }
        @media (min-width: 992px) {
          .why-cmc-banner .why-cmc-items .item-wrapper .why-cmc-item {
            height: 280px; } }
        .why-cmc-banner .why-cmc-items .item-wrapper .why-cmc-item * {
          color: #FFF;
          font-family: "latoregular", sans-serif; }
        .why-cmc-banner .why-cmc-items .item-wrapper .why-cmc-item h3 {
          font-family: "ubuntubold", sans-serif;
          font-size: 18px;
          letter-spacing: 0.95px;
          line-height: 30px;
          text-transform: none; }
        .why-cmc-banner .why-cmc-items .item-wrapper .why-cmc-item p {
          font-size: 18px;
          letter-spacing: 0.1px;
          line-height: 30px;
          font-size: 15px;
          letter-spacing: 0.79px;
          line-height: 25px; }
          @media (min-width: 992px) {
            .why-cmc-banner .why-cmc-items .item-wrapper .why-cmc-item p {
              max-width: 850px;
              margin: 1em auto; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.support-banner {
  position: relative;
  padding: 20px 0; }
  .support-banner .container-fluid {
    position: relative; }
  .support-banner .support-items {
    display: inline-block;
    vertical-align: middle;
    /*padding-bottom: 120px;*/ }
    @media (min-width: 480px) {
      .support-banner .support-items {
        padding-bottom: 0; } }
    .support-banner .support-items .support-item {
      text-align: center; }
      @media (min-width: 992px) {
        .support-banner .support-items .support-item {
          text-align: center; } }
      .support-banner .support-items .support-item::before {
        content: "";
        display: inline-block;
        vertical-align: middle;
        height: 55px;
        line-height: normal; }
      .support-banner .support-items .support-item img {
        width: 35px;
        margin: 10px 10px 10px 0;
        vertical-align: middle; }
        .support-banner .support-items .support-item img.ftse {
          width: 44px;
          margin-top: 6px; }
      .support-banner .support-items .support-item span {
        color: #979b9e;
        font-size: 13px; }
        @media (min-width: 320px) {
          .support-banner .support-items .support-item span {
            font-size: 15px; } }
  .support-banner .support-reevoo-badge {
    position: absolute;
    left: 50%;
    bottom: -50px;
    margin-left: -80px;
    width: 150px;
    height: 150px;
    z-index: 12; }
    @media (min-width: 480px) {
      .support-banner .support-reevoo-badge {
        left: auto;
        margin-left: auto;
        right: 60px;
        bottom: -60px;
        width: 160px; } }
    @media (min-width: 992px) {
      .support-banner .support-reevoo-badge {
        left: auto;
        right: -20px;
        margin-left: auto;
        bottom: auto;
        top: -65px;
        width: 160px; } }
    @media (min-width: 992px) and (max-width: 1200px) {
      .support-banner .support-reevoo-badge {
        display: none; } }
    @media (min-width: 1200px) {
      .support-banner .support-reevoo-badge {
        display: block; } }
    .support-banner .support-reevoo-badge img {
      width: 100%;
      margin: 0; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.Section-ebook {
  border-top: 1px solid #D8D8D8;
  border-bottom: 1px solid #D8D8D8; }
  .Section-ebook h2 {
    font-family: "ubuntulight", sans-serif;
    font-size: 24px;
    color: #1b2429;
    letter-spacing: 2.09px;
    line-height: 32px; }
  .Section-ebook p {
    font-family: "latoregular", sans-serif;
    font-size: 18px;
    color: #1b2429;
    letter-spacing: 0.01px;
    line-height: 30px; }
  .Section-ebook img {
    margin: 0; }
  .Section-ebook .container-fluid {
    position: relative;
    overflow: hidden;
    padding: 44px 1.2rem; }
    @media (min-width: 768px) {
      .Section-ebook .container-fluid {
        padding: 44px 10px; } }
  .Section-ebook .ArticleTrailer-highlight-panel {
    background: #0a264d; }
  .Section-ebook .ebook-images {
    padding: 1rem; }
    @media (min-width: 768px) {
      .Section-ebook .ebook-images {
        padding: 0 36px; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.single-field-submission {
  position: relative;
  float: left;
  width: 100%;
  height: 78px;
  overflow: hidden; }
  .single-field-submission fieldset {
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
    display: block;
    position: relative;
    padding: 0;
    margin: 0;
    border: 0; }
    .single-field-submission fieldset.active {
      margin-top: -105px; }
  .single-field-submission button {
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
    position: absolute;
    right: 0;
    top: 0;
    padding: 5px;
    margin: 0;
    width: 117px;
    height: 45px;
    background: #C5CACF;
    font-size: 20px;
    color: #fff;
    overflow: hidden; }
    .single-field-submission button:before {
      display: block;
      content: "\e612";
      right: 15px;
      font-size: 18px;
      font-family: 'icomoon';
      font-weight: bold; }
    .ebook-right-hand-side-cta .single-field-submission button {
      width: 45px; }
  .single-field-submission.active button {
    background: #00c5e8; }
    .single-field-submission.active button:before {
      -webkit-animation-name: iconSlideAnimationVertical;
      -webkit-animation-duration: 0.75s;
      nimation-name: iconSlideAnimationVertical;
      animation-duration: 0.75s; }
  .single-field-submission.hasError input[type="email"] {
    color: #D0021B !important;
    border-color: #D0021B;
    background-color: #fff3f3;
    box-shadow: none; }
  .single-field-submission.hasError button {
    background: #D0021B; }
    .single-field-submission.hasError button:before {
      -webkit-animation-name: iconSlideAnimationHorizontal;
      -webkit-animation-duration: 0.75s;
      nimation-name: iconSlideAnimationHorizontal;
      animation-duration: 0.75s;
      content: "\e61c"; }
  .single-field-submission.submitted button {
    background: #1ab99f; }
    .single-field-submission.submitted button:before {
      -webkit-animation-name: iconSlideAnimationHorizontal;
      -webkit-animation-duration: 0.75s;
      nimation-name: iconSlideAnimationHorizontal;
      animation-duration: 0.75s;
      content: "\e616"; }
  .single-field-submission.submitted input[type="email"] {
    color: #1ab99f !important;
    border-color: #1ab99f;
    background-color: #f9feff;
    box-shadow: none; }

.single-field-subscribe {
  padding: 45px 0 12px 0;
  margin-bottom: 40px;
  color: #000;
  border-top: 1px solid #D8D8D8;
  border-bottom: 1px solid #D8D8D8; }
  .single-field-subscribe.single-field-dark {
    background: #0a264d;
    color: #fff; }
  .single-field-subscribe p {
    margin: 0 0 20px 0; }
  @media (max-width: 480px) {
    .single-field-subscribe .container-fluid {
      padding: 0 5px; } }
  .single-field-subscribe .sectionTitle {
    padding: 5px 10px 5px 0;
    font-size: 18px;
    font-family: ubuntubold, sans-serif;
    line-height: 32px; }
    @media (min-width: 992px) {
      .single-field-subscribe .sectionTitle {
        padding: 5px 10px 10px 0;
        font-size: 22px; } }
    .single-field-subscribe .sectionTitle img {
      width: auto;
      margin: 0 20px 0 0; }
  .ebook-right-hand-side-cta .single-field-subscribe {
    padding: 45px 20px;
    border: 0; }
  .single-field-subscribe .g-recaptcha {
    margin: 60px auto 0 auto;
    display: block;
    width: 303px; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.Section-ebook {
  border-top: 1px solid #D8D8D8;
  border-bottom: 1px solid #D8D8D8; }
  .Section-ebook [class*=col-] {
    float: left !important; }
  .Section-ebook.news-ebook-cta h2 {
    font-size: 20px;
    font-family: ubuntubold, sans-serif;
    letter-spacing: 0; }
  .Section-ebook.news-ebook-cta p {
    padding: 0;
    font-size: 16px; }
  .Section-ebook.news-ebook-cta .ebook-images img {
    width: 175px;
    max-width: 175px; }
    @media (min-width: 768px) {
      .Section-ebook.news-ebook-cta .ebook-images img {
        position: absolute;
        top: -15px;
        left: 0; } }
  .Section-ebook.news-ebook-cta .container-fluid {
    padding-top: 54px; }
  .Section-ebook h2 {
    font-family: "ubuntulight", sans-serif;
    font-size: 24px;
    color: #1b2429;
    letter-spacing: 2.09px;
    line-height: 32px; }
  .Section-ebook p {
    font-family: "latoregular", sans-serif;
    font-size: 18px;
    color: #1b2429;
    letter-spacing: 0.01px;
    line-height: 30px; }
  .Section-ebook img {
    margin: 0; }
  .Section-ebook .container-fluid {
    position: relative;
    overflow: hidden;
    padding: 44px 18px; }
  .Section-ebook .ArticleTrailer-highlight-panel {
    background: #0a264d; }
  .Section-ebook .ebook-images {
    padding: 16px; }

@media (min-width: 768px) {
  .Section-ebook .container-fluid {
    padding: 44px 10px; } }

@media (min-width: 768px) {
  .Section-ebook .ebook-images {
    padding: 0 36px; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.ebook-right-hand-side-cta {
  border: 1px solid #e8e9ed;
  display: block;
  margin-bottom: 18px;
  overflow: hidden;
  position: relative; }
  .ebook-right-hand-side-cta .info-corner:after {
    background: #0a264d; }
  .ebook-right-hand-side-cta .img-div {
    background: #e8e9ed; }
    .ebook-right-hand-side-cta .img-div img {
      width: 104px;
      margin: 0 auto;
      display: block;
      padding: 20px 0; }
  .ebook-right-hand-side-cta .copy-div {
    background: #fff;
    padding: 22px 27px; }
  .ebook-right-hand-side-cta h3 {
    color: #000;
    font-family: 'ubuntubold', sans-serif;
    font-size: 1.125rem;
    letter-spacing: normal;
    line-height: 1.75rem;
    margin: 0 0 10px;
    text-transform: none; }
  .ebook-right-hand-side-cta p {
    color: #58585a;
    margin-bottom: 10px; }
  .ebook-right-hand-side-cta .Button {
    margin-bottom: 0;
    margin-top: 9px;
    max-width: 300px;
    padding-bottom: 8px;
    padding-top: 7px;
    width: 100%; }
  .ebook-right-hand-side-cta #rc-imageselect, .ebook-right-hand-side-cta .g-recaptcha {
    -moz-transform: scale(0.85);
    -o-transform: scale(0.85);
    -ms-transform: scale(0.85);
    -webkit-transform: scale(0.85);
    transform: scale(0.85);
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0; }
  .ebook-right-hand-side-cta .single-field-subscribe {
    padding: 45px 20px 0; }

.info-corner {
  color: #fff;
  font-family: latobold,sans-serif;
  font-size: .7rem;
  padding: .3rem 1rem .3rem 1.25rem;
  position: absolute;
  right: 0;
  text-transform: uppercase;
  top: 0;
  z-index: 3; }
  .info-corner:after {
    background: #0a264d;
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transform: skew(40deg, 0deg);
    width: 200%;
    z-index: -1; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.badge-row {
  position: relative; }
  .badge-row .badge {
    background: #fff; }
    .badge-row .badge p {
      text-align: center;
      padding: 0;
      margin: 0;
      line-height: 1em;
      font-weight: bold;
      position: relative;
      z-index: 2;
      font-size: 12px;
      color: #00c5e8;
      margin-bottom: 5px; }
      .badge-row .badge p.award {
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 0;
        margin-bottom: 5px;
        color: #000; }

/* Positioning/style for platform page */
.badge-platform .badge {
  position: absolute;
  top: -83px;
  right: 100px;
  height: 140px;
  width: 140px;
  border: 6px solid #00c5e8;
  border-radius: 100px;
  padding-top: 15px; }
  @media (max-width: 480px) {
    .badge-platform .badge {
      top: -95px;
      right: 30px; } }

/* Positioning/style for binary page */
.badge-binary .badge {
  position: relative;
  height: 140px;
  width: 160px;
  padding-top: 15px;
  margin: 0 auto; }
  .badge-binary .badge:before {
    display: block;
    content: "";
    background: url(https://assets.cmcmarkets.com/images/award-left-bg.jpg);
    position: absolute;
    top: 12px;
    left: -30px;
    width: 40px;
    height: 69px; }
  .badge-binary .badge:after {
    display: block;
    content: "";
    background: url(https://assets.cmcmarkets.com/images/awards-right-bg.jpg);
    position: absolute;
    top: 12px;
    right: -30px;
    width: 40px;
    height: 69px; }

.awards {
  background: #00c5e8;
  padding: 27px 0 0;
  text-align: center; }
  .awards .col-lg-3 {
    padding-bottom: 10px; }
    .awards .col-lg-3:before, .awards .col-lg-3:after {
      content: ' ';
      display: table; }
    .awards .col-lg-3:after {
      clear: both; }
  .awards .year {
    background: url("https://assets.cmcmarkets.com/images/demo-landing-award.png") no-repeat 50% 0;
    background-size: 100% auto;
    color: #fff;
    float: left;
    font-family: 'ubunturegular', sans-serif;
    font-size: 12px;
    height: 65px;
    letter-spacing: normal;
    line-height: 1.625rem;
    margin: 0 1.5rem 0 0;
    padding-top: 7px;
    text-align: center;
    text-transform: uppercase;
    width: 75px; }
    .awards .year:before {
      content: '\00a0'; }
    .awards .year sub {
      bottom: 0;
      color: #1b2429;
      display: block;
      font-family: 'latoregular', sans-serif;
      font-size: 12px;
      line-height: 0; }
  .awards .category {
    color: #333333;
    font-family: 'latoregular', sans-serif;
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: normal;
    line-height: normal;
    margin: 0 0 3px;
    text-align: left; }
  .awards .award {
    color: #fff;
    font-size: 14px;
    line-height: 1.125rem;
    margin-bottom: 0;
    min-height: 24px;
    text-align: left !important; }
  @media (min-width: 30em) {
    .awards .col-lg-3 {
      min-height: 230px;
      padding-bottom: 10px; }
    .awards .year {
      background-size: auto;
      float: none;
      font-size: 20px;
      height: 118px;
      margin: 8px 0 0;
      padding-top: 30px;
      width: auto; }
      .awards .year sub {
        font-size: 18px;
        line-height: 1.625rem; }
    .awards .category {
      text-align: center; }
    .awards .award {
      text-align: center !important; } }
  .awards-white {
    background: #fff; }
    .awards-white .year {
      color: #0a264d; }
    .awards-white .category {
      color: #58585a; }
    .awards-white .award, .awards-white .year sub {
      color: #979b9e; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
#stb-table {
  color: #000;
  margin-bottom: 50px; }
  #stb-table table {
    table-layout: fixed;
    border: 1px solid #C5CACF; }
    @media (max-width: 768px) {
      #stb-table table {
        border: 0; } }
    #stb-table table tr {
      border: 1px solid #D8D8D8;
      background: none; }
      @media (max-width: 768px) {
        #stb-table table tr {
          border-bottom: 1px solid #C5CACF; } }
      @media (max-width: 768px) {
        #stb-table table tr.read-more {
          border: 0; }
          #stb-table table tr.read-more .highlight {
            padding: 10px;
            border: 0;
            background: none; }
            #stb-table table tr.read-more .highlight .highlight-footer {
              border: 0;
              padding: 0; }
          #stb-table table tr.read-more th, #stb-table table tr.read-more td:not(.highlight) {
            display: none; } }
    #stb-table table thead {
      border-left: 1px solid #C5CACF; }
      #stb-table table thead td {
        border-left: 1px solid #C5CACF;
        font-size: 24px;
        text-align: left;
        padding-left: 20px;
        background: #f1f2f4;
        line-height: 30px;
        letter-spacing: 1.73px;
        color: #58585a; }
      #stb-table table thead th {
        background: #c6c6c6;
        background-clip: padding-box;
        font-size: 24px;
        font-weight: normal;
        font-family: ubuntulight;
        color: #58585a;
        text-align: center;
        position: relative;
        padding: 35px 5px;
        line-height: 30px;
        letter-spacing: 1.73px;
        border-left: 1px dotted #C5CACF; }
        @media (max-width: 1024px) {
          #stb-table table thead th {
            font-size: 18px; } }
        #stb-table table thead th.highlight {
          border-top: 25px solid #0a264d;
          height: 160px;
          background: #0a264d;
          color: #fff;
          font-family: ubunturegular;
          padding-top: 0;
          border-bottom: 1px solid #0a264d; }
          #stb-table table thead th.highlight:nth-child(even), #stb-table table thead th.highlight:nth-child(odd) {
            background: #0a264d; }
          #stb-table table thead th.highlight .product-name {
            color: #00c5e8;
            bottom: 20px; }
        #stb-table table thead th .product-name {
          color: #fff;
          font-size: 16px;
          font-family: latoregular;
          position: absolute;
          bottom: 5px;
          left: 0;
          width: 100%;
          line-height: 24px;
          letter-spacing: 1.38px; }
          @media (max-width: 1024px) {
            #stb-table table thead th .product-name {
              position: relative;
              margin-top: 25px;
              display: block; } }
    #stb-table table tbody th {
      font-family: latoregular;
      border-left: 1px solid #C5CACF;
      font-size: 24px;
      text-align: left;
      padding-left: 20px;
      background: #f1f2f4;
      border-top: 0;
      color: #58585a; }
      @media (max-width: 768px) {
        #stb-table table tbody th {
          color: #00c5e8;
          font-size: 18px;
          border-right: 1px dotted #c6c6c6;
          border-top: 1px dotted #c6c6c6; } }
    #stb-table table tbody td:nth-child(odd) {
      background: #f9f9f9; }
    #stb-table table tbody td:nth-child(even) {
      background: #f1f2f4; }
    #stb-table table tbody td:before {
      white-space: pre; }
    #stb-table table td {
      border-top: 0;
      border-left: 1px dotted #c6c6c6;
      text-align: center;
      padding: 1rem; }
      @media (max-width: 768px) {
        #stb-table table td {
          text-align: left;
          font-size: 16px;
          border-right: 1px dotted #c6c6c6;
          border-top: 1px dotted #c6c6c6; } }
  #stb-table .highlight {
    background: #fff;
    border-left: 5px solid #0a264d;
    border-right: 5px solid #0a264d;
    position: relative; }
    #stb-table .highlight:nth-child(even), #stb-table .highlight:nth-child(odd) {
      background: #fff; }
    #stb-table .highlight:before {
      color: #fff; }
    @media (max-width: 768px) {
      #stb-table .highlight {
        background: #0a264d;
        color: #fff;
        margin-left: -5px;
        margin-right: -5px; }
        #stb-table .highlight:nth-child(even), #stb-table .highlight:nth-child(odd) {
          background: #0a264d; } }
    #stb-table .highlight.last {
      border-right: 0;
      border-left: 0;
      border-bottom: 0; }
      #stb-table .highlight.last span {
        border-right: 5px solid #0a264d;
        border-left: 5px solid #0a264d;
        border-bottom: 5px solid #0a264d;
        -moz-border-start-width: 3px;
        -moz-border-end-width: 2px;
        display: block;
        position: absolute;
        top: 0;
        left: -3px;
        padding: 1rem 1rem;
        background: #fff; }
        @media (max-width: 768px) {
          #stb-table .highlight.last span {
            position: relative;
            width: 100% !important;
            background: none; } }
        @media (max-width: 1024px) {
          #stb-table .highlight.last span {
            padding: 1rem 0.5rem; } }
        #stb-table .highlight.last span .Button {
          min-width: 0;
          width: 100%;
          color: #fff; }
          @media (max-width: 768px) {
            #stb-table .highlight.last span .Button {
              background: none;
              color: #00c5e8;
              padding: 0; } }

.hpv5 .Section-title.h2,
.hpv5 .Section--hpv5-trade h1.Section-title,
.hpv5 .products-banner-v5 p.h2,
.hpv5 p.h2,
.hpv5 h2 {
  letter-spacing: 2px;
  font-family: ubuntulight,sans-serif;
  color: #0a264d; }
  @media (max-width: 767px) {
    .hpv5 .Section-title.h2,
    .hpv5 .Section--hpv5-trade h1.Section-title,
    .hpv5 .products-banner-v5 p.h2,
    .hpv5 p.h2,
    .hpv5 h2 {
      font-size: 26px !important; } }

.hpv5 .expandable-banner-products .expandable-ribbon {
  margin-bottom: 4rem; }

.Section.Section--hpv5-hero {
  background-size: cover !important; }
  .Section.Section--hpv5-hero h3.Section-title, .Section.Section--hpv5-hero a, .Section.Section--hpv5-hero p {
    color: #fff; }
  .Section.Section--hpv5-hero a {
    margin-top: 2.25rem;
    display: block; }
  .Section.Section--hpv5-hero .row {
    max-width: 56rem;
    margin: 0 auto !important; }
  .Section.Section--hpv5-hero .btn-bg-transparent {
    text-decoration: underline; }
    .Section.Section--hpv5-hero .btn-bg-transparent:hover {
      color: #0a264d; }
  @media (min-width: 768px) {
    .Section.Section--hpv5-hero h1 {
      margin-top: 3rem;
      margin: 6rem auto 4rem auto; } }
  @media (max-width: 767px) {
    .Section.Section--hpv5-hero {
      padding-top: 3rem; }
      .Section.Section--hpv5-hero h1 {
        margin-top: 0;
        font-size: 1.8rem;
        margin-bottom: 1.6rem;
        line-height: normal; }
      .Section.Section--hpv5-hero h3 {
        font-size: 1.2rem; }
      .Section.Section--hpv5-hero .col-md-12 {
        padding-left: 1.6rem;
        padding-right: 1.6rem; }
      .Section.Section--hpv5-hero .open-live-account a {
        margin-top: 0rem; }
      .Section.Section--hpv5-hero .open-live-account + p {
        margin-bottom: 0;
        position: relative;
        top: 60px; }
      .Section.Section--hpv5-hero .btn-bg-transparent {
        margin-top: 0.4rem;
        position: relative;
        top: -35px; }
      .Section.Section--hpv5-hero .button-bg-white {
        margin-top: 2rem;
        margin-bottom: 8rem; } }

.button-circle {
  width: 50px;
  height: 50px;
  background: #fff;
  border-radius: 50%;
  margin: 4rem auto -50px auto;
  cursor: pointer; }

.button-circle:after {
  font-family: icomoon;
  display: block;
  text-align: center;
  content: '\e60c';
  color: #00c5e8;
  font-size: 26px;
  line-height: 56px; }

.Section--hpv5-products {
  padding-bottom: 0; }

.products-banner-v5 {
  padding-top: 0; }
  .products-banner-v5 p.h3 {
    font-weight: bold; }
  .products-banner-v5 img {
    height: 60px;
    width: auto;
    margin-bottom: 0; }
    @media (max-width: 767px) {
      .products-banner-v5 img {
        margin-top: 0;
        height: 70px;
        max-width: 60px; } }
  .products-banner-v5 .small {
    letter-spacing: normal;
    line-height: 1; }
  .products-banner-v5 .product-icon {
    margin-bottom: 0; }
  .products-banner-v5 .product-item {
    padding: 0; }
    .products-banner-v5 .product-item > a {
      padding: 1.6em;
      display: block; }
      @media (max-width: 767px) {
        .products-banner-v5 .product-item > a {
          padding: 2% 0; } }
    .products-banner-v5 .product-item:hover img {
      color: #00c5e8; }
    .products-banner-v5 .product-item:hover a:not([href*='forex']),
    .products-banner-v5 .product-item:hover .uppercase-link[href*='forex']:hover {
      color: #0a264d; }
  .products-banner-v5 .product-item:hover .container-fluid {
    padding-left: 0;
    padding-right: 0; }
  .products-banner-v5 .animate-arrow-container .animate-arrow:after {
    display: inline-block;
    position: absolute;
    content: '\003e';
    transition: margin .25s;
    color: #00c5e8;
    font-size: 18px;
    line-height: 28px;
    transform: scaleX(0.7);
    margin-left: 0; }
  .products-banner-v5 .animate-arrow-container:hover .animate-arrow:after {
    margin-left: 10px; }

.arrow-gray .animate-arrow:after {
  color: #979b9e;
  margin-left: 5px;
  transform: scaleX(0.7); }

.arrow-gray:hover .animate-arrow {
  color: #00c5e8; }

.LiveInfo .h2 {
  color: #071b36;
  margin-bottom: 0; }

.LiveInfo ul, .LiveInfo li, .LiveInfo div {
  border: 0 !important; }

.LiveInfo .markets {
  padding: 0;
  background: #333; }

.LiveInfo .markets li {
  padding: 0;
  font-size: 16px;
  background-color: #333;
  text-transform: none;
  color: #fff; }

.LiveInfo .markets li.active {
  color: #fff;
  background: #071b36; }

.LiveInfo li.active:after {
  display: none; }

.LiveInfo .market-price-widget .prices .price-slider {
  width: 600%; }
  .LiveInfo .market-price-widget .prices .price-slider .price-slide {
    width: 16.666%; }

@media (min-width: 768px) {
  .LiveInfo .market-price-widget .right,
  .LiveInfo .market-price-widget .left {
    color: #fff;
    transform: scale(0.5); }
  .LiveInfo .market-price-widget .markets li {
    width: 16.666%; } }

@media (max-width: 767px) {
  .LiveInfo .market-price-widget .markets {
    width: 600%; }
  .LiveInfo .market-price-widget .markets li {
    width: 11.666%; } }

.market-price-widget .prices li ul li {
  text-align: center; }

.market-price-widget .prices li ul li.LiveInfo-change {
  text-align: right; }

.market-price-widget .prices li ul.titles li:last-child {
  text-align: right; }

.tick-list-blue ul {
  padding-left: 5px;
  margin-right: -20px; }

.tick-list-blue ul li:before {
  content: '\e616'; }

.flex-valign-center {
  display: flex;
  align-items: center;
  justify-content: center; }

.Section--hpv5-trade h3.Section-title {
  font-family: latoregular;
  font-weight: bold;
  font-size: 1.2rem;
  color: #071b36;
  margin: 1rem  0 .5rem; }

.Section--hpv5-trade p.text-item {
  margin-top: 0.4rem;
  margin-bottom: 0.4rem;
  color: #979b9e; }

.Section--hpv5-trade .button {
  margin: 2rem 0; }

@media (max-width: 767px) {
  .Section--hpv5-trade {
    padding-bottom: 4rem; }
    .Section--hpv5-trade p.h2 {
      text-align: center; } }

@media (max-width: 767px) {
  .Section--hpv5-trade + div .support-banner .support-items {
    padding-bottom: 0;
    display: block; }
    .Section--hpv5-trade + div .support-banner .support-items .support-item {
      text-align: center;
      margin: 1rem auto; } }

@media (max-width: 767px) {
  .Section--hpv5-trade + div .support-banner .support-items {
    display: table;
    margin: 0 auto; }
    .Section--hpv5-trade + div .support-banner .support-items .support-item {
      display: table-row; }
      .Section--hpv5-trade + div .support-banner .support-items .support-item img, .Section--hpv5-trade + div .support-banner .support-items .support-item span {
        display: table-cell;
        vertical-align: middle;
        text-align: left; }
      .Section--hpv5-trade + div .support-banner .support-items .support-item img {
        margin: 1.4rem;
        text-align: center;
        max-width: 40px; }
      .Section--hpv5-trade + div .support-banner .support-items .support-item span {
        padding-left: 1rem; }
      .Section--hpv5-trade + div .support-banner .support-items .support-item::before {
        display: none; } }

.Section--hpv5-trade + div .support-banner .support-items span {
  color: #071b36; }

.analysts-banner {
  padding: 20px 0; }
  @media (max-width: 767px) {
    .analysts-banner p {
      margin: 1.6rem 0; } }
  .analysts-banner img {
    max-height: 40px;
    width: auto;
    max-width: 180px; }
  .analysts-banner .flex-image-row {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap; }
  .analysts-banner .flex-image-row img {
    flex: 0 1 auto;
    margin: 5px; }
  .analysts-banner .flex-image-row p {
    flex: 0 1 auto;
    margin: 15px 0;
    align-items: center; }
  @media (max-width: 992px) {
    .analysts-banner .flex-image-row p {
      width: 100%;
      margin: 25px; } }

@media (min-width: 768px) {
  .row > div:first-child > .well-white {
    float: right;
    margin-right: 10px; }
  .row > div:nth-child(2) > .well-white {
    float: left;
    margin-left: 10px; } }

.well-white {
  background: #fff;
  border-radius: 5px;
  padding: 40px;
  margin-left: 10px;
  max-width: 400px;
  margin: 20px auto;
  width: 100%; }
  @media (max-width: 319px) {
    .well-white {
      padding: 20px; } }
  .well-white .Button {
    display: block; }
  .well-white h3.Section-title {
    font-weight: bold;
    font-size: 1.4em;
    color: #071b36;
    border-bottom: 1px solid #eee;
    margin-bottom: 1rem;
    padding-bottom: 1.3rem; }
  .well-white .button {
    margin-bottom: 0.4em; }
  .well-white .button + p {
    margin-bottom: 0; }

.open-live-account {
  margin-bottom: 0; }
  .open-live-account a {
    display: block; }
  .open-live-account + p {
    margin-top: 0.4rem; }

.app-store-buttons {
  margin-bottom: 2rem; }
  .app-store-buttons a {
    opacity: 0.3;
    text-align: center;
    max-width: 180px;
    width: 45%;
    display: inline-block;
    margin-right: 5%; }
    .app-store-buttons a img {
      width: 100%;
      margin: 0; }
    .app-store-buttons a:hover {
      opacity: 0.6; }
  @media (max-width: 768px) {
    .app-store-buttons {
      text-align: center; }
      .app-store-buttons a {
        clear: both;
        margin: 10px auto;
        display: block;
        width: 180px; } }

@media (max-width: 768px) {
  .Section--hpv5-access-anywhere .text-item,
  .Section--hpv5-access-anywhere .Section-title {
    text-align: center; } }

.text-blue-bold-caps {
  text-transform: uppercase;
  color: #071b36;
  font-weight: bold;
  letter-spacing: 1px; }

@media (max-width: 767px) {
  .text-left-sm {
    text-align: left; }
  .text-center-sm {
    text-align: center; }
  .text-right-sm {
    text-align: right; } }

@media (min-width: 768px) {
  .text-left-md {
    text-align: left; }
  .text-centre-md {
    text-align: center; }
  .text-centre-md {
    text-align: center; } }

@media (max-width: 767px) {
  .Section--hpv5-complete-package h1 {
    font-size: 24px; } }

.learn-banner-compact {
  padding: 3rem 0; }
  .learn-banner-compact .container-fluid {
    max-width: 1140px;
    padding: 0; }
  .learn-banner-compact .col-md-4 {
    margin-bottom: 20px; }
  .learn-banner-compact .h2 {
    margin-bottom: 1.4rem; }
  .learn-banner-compact img {
    padding: 0; }
  .learn-banner-compact .col-xs-8 {
    padding: 5%; }
  .learn-banner-compact a {
    display: block;
    background: #fff;
    margin: 8px; }
    .learn-banner-compact a > .row {
      margin: 0; }
  .learn-banner-compact .h3 {
    color: #071b36;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 0.6rem; }
  .learn-banner-compact img {
    margin: 0;
    max-width: 122px;
    max-height: 122px; }
  @media (min-width: 768px) and (max-width: 1042px) {
    .learn-banner-compact .h3 {
      font-size: 16px;
      margin-bottom: 0.3rem; }
    .learn-banner-compact a {
      margin: 0; }
    .learn-banner-compact .col-xs-8 {
      padding: 4%; } }
  @media (max-width: 767px) {
    .learn-banner-compact .container-fluid {
      max-width: 480px; } }

.invisible {
  visibility: hidden; }

/* Found sitting amidst widgets.scss - this is global, not a component! Needs careful re-integration */
dd, dl, dt {
  margin: 0;
  padding: 0; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.heckyl-section {
  padding-top: 0; }
  .heckyl-section p {
    margin: 0.5em 0 0 0;
    padding: 0; }

.widget-heckyl {
  position: relative;
  padding-bottom: 0;
  background: #00c5e8;
  color: #fff; }
  .widget-heckyl h2 {
    font-family: "ubuntulight", sans-serif;
    font-size: 34px;
    line-height: 42px; }
  .widget-heckyl p {
    font-size: 20px;
    line-height: 28px; }
  .widget-heckyl img {
    width: 100%;
    margin: 4em 0 0 0; }
    @media (min-width: 1200px) {
      .widget-heckyl img {
        margin: 0; } }

/*
TODO: Create a single side bar style file and extend different versions
*/
.heckyl-sidebar {
  height: 450px; }
  .heckyl-sidebar .ArticleTrailer-details {
    padding-bottom: 2em; }
    .heckyl-sidebar .ArticleTrailer-details p {
      min-height: 100px;
      height: auto;
      opacity: 1;
      font-size: 16px; }
  .heckyl-sidebar .Button {
    width: 100%; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.widget-us-elections-winner {
  background: #000 url("https://assets.cmcmarkets.com/images/us-elections-winner-2.jpg") no-repeat center;
  background-size: cover; }
  .widget-us-elections-winner h2 {
    color: #00c5e8;
    font-size: 34px;
    line-height: 43px;
    font-family: "ubuntulight", sans-serif;
    text-align: center; }
    @media (min-width: 768px) {
      .widget-us-elections-winner h2 {
        text-align: left; } }
  .widget-us-elections-winner p {
    color: #fff;
    margin: 1em auto;
    font-size: 18px;
    letter-spacing: 0.1px;
    line-height: 30px;
    text-align: center; }
    @media (min-width: 768px) {
      .widget-us-elections-winner p {
        max-width: 500px;
        margin: 1em 0;
        text-align: left; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.reevoo-embeded-reviews ul li:before {
  content: ''; }

.reevoo-embeded-reviews .pagination {
  display: block; }

#reevoomark .pagination .current {
  background: #999;
  color: #fff; }
  #reevoomark .pagination .current:hover {
    color: #999; }

#reevoomark .pagination a:nth-child(6), #reevoomark .pagination a:nth-child(7), #reevoomark .pagination a:nth-child(8), #reevoomark .pagination a:nth-child(9), #reevoomark .pagination a:nth-child(10), #reevoomark .pagination a:nth-child(11) {
  display: none; }

@media (min-width: 375px) {
  #reevoomark .pagination a {
    display: inline-block !important; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.widget-trade-today {
  margin-bottom: 34px;
  border: 1px solid #58585a; }
  .widget-trade-today .widget-content {
    padding: 0 30px 10px 30px; }
  .widget-trade-today .list-big-numbers {
    margin-bottom: 22px; }
    .widget-trade-today .list-big-numbers li {
      padding: 7px 0 0 57px;
      margin-bottom: 10px;
      min-height: 44px; }
      .widget-trade-today .list-big-numbers li:before {
        content: counter(big-number-counter);
        counter-increment: big-number-counter;
        width: 44px;
        height: 44px;
        display: block;
        position: absolute;
        top: 50%;
        left: 0;
        line-height: 38px;
        margin-top: -20px;
        color: #00c5e8;
        font-size: 18px;
        text-align: center; }
      .widget-trade-today .list-big-numbers li:after {
        position: absolute;
        content: "";
        width: 40px;
        height: 40px;
        left: 0;
        top: 50%;
        margin-top: -22px;
        border-radius: 50%;
        border: 2px solid #00c5e8; }
  .widget-trade-today .Button {
    display: block;
    min-width: unset;
    max-width: 250px; }
    @media (min-width: 992px) {
      .widget-trade-today .Button {
        max-width: 100%; } }
  .widget-trade-today h3 {
    padding: 18px 30px 20px 30px;
    background: #F1F2F2;
    text-transform: none;
    font-size: 18px;
    font-family: 'ubuntubold', sans-serif; }
  .widget-trade-today span {
    display: block;
    margin: 10px 0;
    text-align: center; }
  .Section--grey-gradient .widget-trade-today {
    border: none; }
    .Section--grey-gradient .widget-trade-today h3 {
      margin-bottom: 15px;
      padding: 0;
      background: none; }
    .Section--grey-gradient .widget-trade-today .widget-content {
      padding-left: 0; }
  @media (min-width: 768px) {
    .widget-trade-today h3 {
      padding: 18px 10px 20px 10px; }
    .widget-trade-today .widget-content {
      padding: 0 10px 10px 10px; } }
  @media (min-width: 992px) {
    .widget-trade-today h3 {
      padding: 18px 30px 20px 30px; }
    .widget-trade-today .widget-content {
      padding: 18px 30px 10px 30px; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
@media (min-width: 768px) {
  .welcome-faqs p {
    margin: 1em 2em 0 0; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.widget-fscs {
  margin-bottom: 24px; }
  .widget-fscs .widget-content {
    background: #6A2873;
    padding: 24px 6px; }
    .widget-fscs .widget-content a {
      display: block;
      text-align: center; }
    .widget-fscs .widget-content img {
      max-width: 100%;
      margin: 0; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.widget-bank-cards {
  margin: 0 0 70px;
  padding: 0; }
  @media (min-width: 992px) {
    .widget-bank-cards {
      margin: 65px 0; } }
  .widget-bank-cards li {
    display: inline;
    top: 0;
    min-height: 43px;
    margin: 0 28px 0 0;
    padding: 0; }
    .widget-bank-cards li.block {
      margin-right: 80px; }
      .widget-bank-cards li.block:after {
        content: "";
        position: absolute;
        height: 35px;
        right: -37px;
        bottom: -10px;
        background: #333333;
        width: 1px; }
    .widget-bank-cards li:before {
      display: none; }
  .widget-bank-cards img {
    display: inline;
    margin: 0;
    vertical-align: middle;
    max-width: 100%; }
  @media (max-width: 990px) {
    .widget-bank-cards li.block {
      margin-right: 28px; }
      .widget-bank-cards li.block:after {
        right: -17px;
        bottom: -15px; }
    .widget-bank-cards img {
      margin-top: 10px;
      max-width: 40px; } }
  @media (max-width: 480px) {
    .widget-bank-cards {
      overflow: hidden; }
      .widget-bank-cards li {
        display: block;
        float: left; }
        .widget-bank-cards li:nth-child(4), .widget-bank-cards li:nth-child(6) {
          clear: both; }
        .widget-bank-cards li:after {
          display: none; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.widget-free-guide {
  border: 1px solid #e8e9ed;
  display: block;
  margin-bottom: 18px;
  overflow: hidden;
  position: relative; }
  .widget-free-guide .info-corner {
    color: #fff;
    font-family: "latobold", sans-serif;
    font-size: 0.7rem;
    padding: 0.3rem 1rem 0.3rem 1.25rem;
    position: absolute;
    right: 0;
    text-transform: uppercase;
    top: 0;
    z-index: 3; }
    .widget-free-guide .info-corner:after {
      content: '';
      position: absolute;
      width: 200%;
      height: 100%;
      left: 0;
      top: 0;
      background: #0a264d;
      transform: skew(40deg, 0deg);
      z-index: -1; }
  .widget-free-guide .img-div {
    background: #e8e9ed; }
    .widget-free-guide .img-div img {
      margin: 0; }
  .widget-free-guide .copy-div {
    background: #fff;
    padding: 22px 27px; }
  .widget-free-guide h3 {
    color: #000;
    font-family: "ubuntubold", sans-serif;
    font-size: 1.125rem;
    letter-spacing: normal;
    line-height: 1.75rem;
    margin: 0 0 10px;
    text-transform: none; }
  .widget-free-guide p {
    color: #58585A;
    margin-bottom: 10px; }
  .widget-free-guide .Button {
    margin-bottom: 0;
    margin-top: 9px;
    max-width: 300px;
    padding-bottom: 8px;
    padding-top: 7px;
    width: 100%; }
  @media (max-width: 768px) {
    .widget-free-guide h3, .widget-free-guide p {
      text-align: center; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.podcasts-promo {
  position: relative;
  min-height: 325px;
  padding: 0;
  color: #fff;
  font-family: ubunturegular,sans-serif; }
  .podcasts-promo.podcasts-promo-square {
    background: url("https://assets.cmcmarkets.com/images/podcast-widget-bg.png") no-repeat;
    background-size: cover;
    background-position: 0 bottom; }
    .podcasts-promo.podcasts-promo-square:after {
      content: '';
      position: absolute;
      top: 25px;
      right: 25px;
      width: 44px;
      height: 17px;
      background: url("https://assets.cmcmarkets.com/images/up_down_arrow.svg") no-repeat; }
    .podcasts-promo.podcasts-promo-square a, .podcasts-promo.podcasts-promo-square a:visited, .podcasts-promo.podcasts-promo-square a:hover {
      display: block;
      min-height: auto;
      color: #fff;
      padding: 40px 27px; }
      @media (min-width: 1024px) {
        .podcasts-promo.podcasts-promo-square a, .podcasts-promo.podcasts-promo-square a:visited, .podcasts-promo.podcasts-promo-square a:hover {
          min-height: 405px; } }
      .podcasts-promo.podcasts-promo-square a .Section-title, .podcasts-promo.podcasts-promo-square a:visited .Section-title, .podcasts-promo.podcasts-promo-square a:hover .Section-title {
        color: #fff;
        font-size: 28px;
        margin-bottom: 1rem;
        text-align: left;
        font-family: ubunturegular,sans-serif;
        font-size: 28px;
        line-height: 42px;
        font-weight: 600;
        letter-spacing: .2pt; }
      .podcasts-promo.podcasts-promo-square a .text-item, .podcasts-promo.podcasts-promo-square a:visited .text-item, .podcasts-promo.podcasts-promo-square a:hover .text-item {
        padding-right: 120px;
        font-size: 18px;
        color: #fff;
        padding-right: 0; }
        @media (min-width: 768px) {
          .podcasts-promo.podcasts-promo-square a .text-item, .podcasts-promo.podcasts-promo-square a:visited .text-item, .podcasts-promo.podcasts-promo-square a:hover .text-item {
            padding-right: 140px; } }
        @media (min-width: 1024px) {
          .podcasts-promo.podcasts-promo-square a .text-item, .podcasts-promo.podcasts-promo-square a:visited .text-item, .podcasts-promo.podcasts-promo-square a:hover .text-item {
            padding-right: 250px; } }
  .podcasts-promo.promo-learn {
    min-height: auto;
    padding: 55px 27px 30px 27px;
    color: #58585a;
    background: #f1f2f4; }
    @media (min-width: 1024px) {
      .podcasts-promo.promo-learn {
        min-height: 405px; } }
    .podcasts-promo.promo-learn h3.Section-title {
      color: inherit;
      margin-bottom: 30px;
      font-size: 2.125rem; }
    .podcasts-promo.promo-learn p {
      margin-bottom: 20px;
      padding: 0 25px;
      font-size: 1.125rem;
      line-height: 1.875rem; }
      @media (min-width: 340px) {
        .podcasts-promo.promo-learn p {
          padding: 0 45px; } }
      @media (min-width: 480px) {
        .podcasts-promo.promo-learn p {
          padding: 0 25px; } }
      @media (min-width: 1024px) {
        .podcasts-promo.promo-learn p {
          padding: 0 85px; } }

/* END: .podcasts-promo */
.podcasts-promo-sidebar {
  position: relative;
  margin: 0 0 1.5rem;
  padding: 50px 24px 10px;
  color: #fff;
  text-align: center;
  font-family: ubunturegular,sans-serif;
  background: url("https://assets.cmcmarkets.com/images/podcast-widget-bg.png") no-repeat;
  background-size: cover;
  background-position: 50% bottom; }
  .podcasts-promo-sidebar:after {
    content: '';
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 17px;
    background: url("https://assets.cmcmarkets.com/images/up_down_arrow.svg") no-repeat; }
  .podcasts-promo-sidebar .h2 {
    font-family: ubunturegular,sans-serif;
    font-size: 1.56rem;
    letter-spacing: .135rem;
    line-height: 1.875rem; }
  .podcasts-promo-sidebar p {
    margin-bottom: 1.5rem; }
  .podcasts-promo-sidebar .Button {
    margin-bottom: 25px;
    padding: 11px 40px; }

.podcasts-promo-banner {
  padding: 25px 0 30px 0;
  background: url("https://assets.cmcmarkets.com/images/footer_podcast_graphic2560x147.png") no-repeat;
  background-size: cover;
  background-position-x: 50%;
  background-position-y: bottom; }
  .podcasts-promo-banner .-ppb-left {
    position: relative;
    text-align: center; }
    @media (min-width: 768px) {
      .podcasts-promo-banner .-ppb-left {
        text-align: left;
        padding: 0 20px; } }
    .podcasts-promo-banner .-ppb-left .Section-title {
      color: #fff;
      font-size: 28px;
      margin-bottom: 3px;
      padding-left: 40px;
      text-align: center;
      font-family: ubunturegular,sans-serif;
      font-size: 27px;
      line-height: 42px;
      font-weight: 600;
      letter-spacing: .2pt; }
      @media (min-width: 480px) {
        .podcasts-promo-banner .-ppb-left .Section-title {
          /* Override previous .Section-title styles */
          text-align: center; } }
      @media (min-width: 768px) {
        .podcasts-promo-banner .-ppb-left .Section-title {
          text-align: left; } }
      .podcasts-promo-banner .-ppb-left .Section-title:before {
        content: '';
        position: absolute;
        width: 33px;
        height: 36px;
        margin: 2px 0 0 -44px;
        background: url("https://assets.cmcmarkets.com/images/podcast-icon.svg") no-repeat; }
    .podcasts-promo-banner .-ppb-left .text-item {
      font-size: 15px;
      color: #fff; }
    .podcasts-promo-banner .-ppb-left:after {
      content: '';
      display: none;
      position: absolute;
      top: 10px;
      right: 0;
      width: 44px;
      height: 17px;
      background: url("https://assets.cmcmarkets.com/images/up_down_arrow.svg") no-repeat; }
      @media (min-width: 440px) {
        .podcasts-promo-banner .-ppb-left:after {
          display: block; } }
      @media (min-width: 768px) {
        .podcasts-promo-banner .-ppb-left:after {
          /* Display on small sizes - hide on larger, showing instead on right col */
          display: none; } }
  .podcasts-promo-banner .-ppb-right {
    position: relative;
    padding-top: 0;
    padding-bottom: 10px;
    text-align: center; }
    @media (min-width: 768px) {
      .podcasts-promo-banner .-ppb-right {
        text-align: left;
        padding-top: 10px;
        padding-bottom: 0; } }
    .podcasts-promo-banner .-ppb-right:after {
      content: '';
      display: none;
      position: absolute;
      width: 44px;
      height: 17px;
      background: url("https://assets.cmcmarkets.com/images/up_down_arrow.svg") no-repeat; }
      @media (min-width: 768px) {
        .podcasts-promo-banner .-ppb-right:after {
          display: block;
          top: 0px;
          right: 18px; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.bs-box-row > div {
  padding-right: 6px; }
  @media (min-width: 768px) {
    .bs-box-row > div + div {
      padding-left: 24px; } }

.bs-box-row img {
  margin-bottom: 20px; }

.bs-box-row h3 {
  margin-bottom: 20px !important; }

@media (min-width: 48em) {
  .bs-box-row h3 {
    min-height: 70px;
    margin-bottom: 10px !important; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.js-math-captcha {
  font-size: 34px;
  padding: 10px 20px;
  color: #00c5e8; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/* Styles for search tags */
.tags, .search-results-tags .search-tag, .carouselV2-megaFilter .carouselV2-selected-tags div {
  position: relative;
  display: block;
  margin-right: 0.25rem;
  margin-bottom: 0.5rem;
  padding: 0.25rem 1.8rem 0.25rem 1rem;
  float: right;
  background: #fff;
  border-radius: 3px;
  color: #0a264d;
  font-size: 13px;
  cursor: pointer; }
  .tags:before, .search-results-tags .search-tag:before, .carouselV2-megaFilter .carouselV2-selected-tags div:before {
    content: "\e61c";
    position: absolute;
    right: 8px;
    top: 6px;
    font-size: 9px;
    font-family: 'icomoon'; }
  .tags.light-tag, .search-results-tags .light-tag.search-tag, .carouselV2-megaFilter .carouselV2-selected-tags div.light-tag {
    background-color: #00c5e8;
    color: #fff; }
  .tags.dark-tag, .search-results-tags .dark-tag.search-tag, .carouselV2-megaFilter .carouselV2-selected-tags div.dark-tag {
    background-color: #0a264d;
    color: #fff; }

.carouselV2 {
  display: none; }
  .carouselV2-viewport {
    position: relative; }
  .carouselV2:before, .carouselV2:after {
    content: " ";
    display: table; }
  .carouselV2 ul.row {
    display: none;
    position: relative;
    margin: 0;
    padding: 0;
    transition: 0.6s all;
    transition-timing-function: ease-out; }
  .carouselV2 li {
    position: relative;
    margin: 0;
    padding: 0;
    float: left;
    overflow: hidden; }
    .carouselV2 li:before {
      display: none; }
  .carouselV2 a {
    display: block; }
  .carouselV2-navRight, .carouselV2-navLeft {
    position: absolute;
    width: 70px;
    top: 0;
    bottom: 0;
    z-index: 2;
    font-family: 'icomoon';
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    font-size: 2.6rem;
    line-height: 70px; }
    .carouselV2-navRight a, .carouselV2-navLeft a {
      position: absolute;
      width: 100%;
      height: 70px;
      margin-top: -35px;
      top: 50%;
      color: #979b9e; }
      .carouselV2-navRight a:hover, .carouselV2-navLeft a:hover {
        color: #00c5e8; }
      .carouselV2-navRight a:before, .carouselV2-navLeft a:before {
        position: absolute;
        top: 1px; }
    .carouselV2-navRight.inactive a, .carouselV2-navLeft.inactive a {
      cursor: default;
      color: rgba(151, 155, 158, 0.3); }
      .carouselV2-navRight.inactive a:hover, .carouselV2-navLeft.inactive a:hover {
        color: rgba(151, 155, 158, 0.3); }
  .carouselV2-navLeft {
    left: -70px; }
    .carouselV2-navLeft a:before {
      content: "\e617";
      left: 15px; }
  .carouselV2-navRight {
    right: -70px; }
    .carouselV2-navRight a:before {
      content: "\e612";
      right: 15px; }
  .carouselV2-navLeft:not(.inactive) a:after {
    content: "\e617";
    left: 70px; }
  .carouselV2-navLeft:not(.inactive) a:hover:before {
    opacity: 0;
    left: -50px; }
  .carouselV2-navLeft:not(.inactive) a:hover:after {
    opacity: 1;
    left: 15px; }
  .carouselV2-navRight:not(.inactive) a:after {
    content: "\e612";
    right: 70px; }
  .carouselV2-navRight:not(.inactive) a:hover:before {
    opacity: 0;
    right: -50px; }
  .carouselV2-navRight:not(.inactive) a:hover:after {
    opacity: 1;
    right: 15px; }
  .carouselV2-container {
    max-width: 1422px;
    padding: 0 70px; }
    .carouselV2-container-inner {
      position: relative; }
  @media (max-width: 768px) {
    .carouselV2 .carouselV2-container {
      padding: 0 35px; }
    .carouselV2-navRight {
      right: -35px; }
      .carouselV2-navRight a:before {
        right: 0; }
    .carouselV2-navLeft {
      left: -35px; }
      .carouselV2-navLeft a:before {
        left: 0; }
    .carouselV2-navRight, .carouselV2-navLeft {
      width: 35px; }
    .carouselV2-navLeft:not(.inactive) a:before {
      left: 0; }
    .carouselV2-navLeft:not(.inactive) a:after {
      left: 35px; }
    .carouselV2-navLeft:not(.inactive) a:hover:after {
      left: 0; }
    .carouselV2-navRight:not(.inactive) a:before {
      right: 0; }
    .carouselV2-navRight:not(.inactive) a:after {
      right: 35px; }
    .carouselV2-navRight:not(.inactive) a:hover:after {
      right: 0; } }
  .carouselV2-gradientRight, .carouselV2-gradientLeft {
    content: "";
    z-index: 0;
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0; }
  .carouselV2-gradientRight {
    left: 100%;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgi…3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=");
    background-size: 100%;
    background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(255, 255, 255, 0.6)), color-stop(10%, rgba(255, 255, 255, 0.8)), color-stop(30%, rgba(255, 255, 255, 0.95)), color-stop(80%, #ffffff));
    background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0.95) 30%, #ffffff 80%);
    background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0.95) 30%, #ffffff 80%);
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0.95) 30%, #ffffff 80%); }
    .Section--grey-light .carouselV2-gradientRight {
      background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgi…3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=");
      background-size: 100%;
      background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(241, 242, 244, 0.6)), color-stop(10%, rgba(241, 242, 244, 0.8)), color-stop(30%, rgba(241, 242, 244, 0.95)), color-stop(80%, #f1f2f4));
      background-image: -moz-linear-gradient(left, rgba(241, 242, 244, 0.6) 0%, rgba(241, 242, 244, 0.8) 10%, rgba(241, 242, 244, 0.95) 30%, #f1f2f4 80%);
      background-image: -webkit-linear-gradient(left, rgba(241, 242, 244, 0.6) 0%, rgba(241, 242, 244, 0.8) 10%, rgba(241, 242, 244, 0.95) 30%, #f1f2f4 80%);
      background-image: linear-gradient(to right, rgba(241, 242, 244, 0.6) 0%, rgba(241, 242, 244, 0.8) 10%, rgba(241, 242, 244, 0.95) 30%, #f1f2f4 80%); }
    .Section--grey-medium .carouselV2-gradientRight {
      background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgi…3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=");
      background-size: 100%;
      background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(232, 233, 237, 0.6)), color-stop(10%, rgba(232, 233, 237, 0.8)), color-stop(30%, rgba(232, 233, 237, 0.95)), color-stop(80%, #e8e9ed));
      background-image: -moz-linear-gradient(left, rgba(232, 233, 237, 0.6) 0%, rgba(232, 233, 237, 0.8) 10%, rgba(232, 233, 237, 0.95) 30%, #e8e9ed 80%);
      background-image: -webkit-linear-gradient(left, rgba(232, 233, 237, 0.6) 0%, rgba(232, 233, 237, 0.8) 10%, rgba(232, 233, 237, 0.95) 30%, #e8e9ed 80%);
      background-image: linear-gradient(to right, rgba(232, 233, 237, 0.6) 0%, rgba(232, 233, 237, 0.8) 10%, rgba(232, 233, 237, 0.95) 30%, #e8e9ed 80%); }
  .carouselV2-gradientLeft {
    right: 100%;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgi…3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=");
    background-size: 100%;
    background-image: -webkit-gradient(linear, 100% 50%, 0% 50%, color-stop(0%, rgba(255, 255, 255, 0.6)), color-stop(10%, rgba(255, 255, 255, 0.8)), color-stop(30%, rgba(255, 255, 255, 0.95)), color-stop(80%, #ffffff));
    background-image: -moz-linear-gradient(right, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0.95) 30%, #ffffff 80%);
    background-image: -webkit-linear-gradient(right, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0.95) 30%, #ffffff 80%);
    background-image: linear-gradient(to left, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0.95) 30%, #ffffff 80%); }
    .Section--grey-light .carouselV2-gradientLeft {
      background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgi…3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=");
      background-size: 100%;
      background-image: -webkit-gradient(linear, 100% 50%, 0% 50%, color-stop(0%, rgba(241, 242, 244, 0.6)), color-stop(10%, rgba(241, 242, 244, 0.8)), color-stop(30%, rgba(241, 242, 244, 0.95)), color-stop(80%, #f1f2f4));
      background-image: -moz-linear-gradient(right, rgba(241, 242, 244, 0.6) 0%, rgba(241, 242, 244, 0.8) 10%, rgba(241, 242, 244, 0.95) 30%, #f1f2f4 80%);
      background-image: -webkit-linear-gradient(right, rgba(241, 242, 244, 0.6) 0%, rgba(241, 242, 244, 0.8) 10%, rgba(241, 242, 244, 0.95) 30%, #f1f2f4 80%);
      background-image: linear-gradient(to left, rgba(241, 242, 244, 0.6) 0%, rgba(241, 242, 244, 0.8) 10%, rgba(241, 242, 244, 0.95) 30%, #f1f2f4 80%); }
    .Section--grey-medium .carouselV2-gradientLeft {
      background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgi…3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=");
      background-size: 100%;
      background-image: -webkit-gradient(linear, 100% 50%, 0% 50%, color-stop(0%, rgba(232, 233, 237, 0.6)), color-stop(10%, rgba(232, 233, 237, 0.8)), color-stop(30%, rgba(232, 233, 237, 0.95)), color-stop(80%, #e8e9ed));
      background-image: -moz-linear-gradient(right, rgba(232, 233, 237, 0.6) 0%, rgba(232, 233, 237, 0.8) 10%, rgba(232, 233, 237, 0.95) 30%, #e8e9ed 80%);
      background-image: -webkit-linear-gradient(right, rgba(232, 233, 237, 0.6) 0%, rgba(232, 233, 237, 0.8) 10%, rgba(232, 233, 237, 0.95) 30%, #e8e9ed 80%);
      background-image: linear-gradient(to left, rgba(232, 233, 237, 0.6) 0%, rgba(232, 233, 237, 0.8) 10%, rgba(232, 233, 237, 0.95) 30%, #e8e9ed 80%); }

.carouselV2.carouselV2-twitter {
  background-color: #071b36;
  position: relative;
  color: #f1f2f4;
  font-size: 0.875rem;
  line-height: 1.25rem;
  padding: 50px 0 30px;
  /*span {
        color: #fff;
    }*/ }
  .carouselV2.carouselV2-twitter a {
    display: inline-block; }
  .carouselV2.carouselV2-twitter .carouselV2 {
    /* THESE STYLES MOVED TO .twitter.scss */
    /*&-tweet {
            padding: 32px 18px;
        }

        &-username {
            margin-bottom: 8px;
            b {
                display: block;
                font-family: latoregular, sans-serif;
                font-size: 14px;
            }
            span {
                display: inline-block;
            }
        }

        &-content {
            margin-bottom: 8px;
        }

        &-metaData {
            color: $color-medium-blue-1;
            font-family: "ubuntubold", sans-serif;
            font-size: 0.687rem;
            letter-spacing: 0.025rem;
            line-height: 1.125rem;
            text-transform: uppercase;
        }*/
    /*        &-join-Twitter {
            position: absolute;
            width: auto;
            left: auto;
            top: 50%;
            right: 0;
            padding: 0 20px;
            @include translate(0%, -50%);

            a.Button {
                .Icon {
                    font-size: 3rem;
                    line-height: 0.4;
                    vertical-align: middle;
                }

                span {
                    @include transition(color 0.3s ease-out);
                }

                &:hover span {
                    color: $color-blue-1;
                }
            }
        }*/ }
    .carouselV2.carouselV2-twitter .carouselV2-gradientRight, .carouselV2.carouselV2-twitter .carouselV2-gradientLeft {
      display: none; }
    .carouselV2.carouselV2-twitter .carouselV2-viewport {
      overflow: hidden; }
    .carouselV2.carouselV2-twitter .carouselV2-container {
      position: relative;
      background: url("https://assets.cmcmarkets.com/images/twitter-bar-small-bg.png") 84% 50% no-repeat; }
    .carouselV2.carouselV2-twitter .carouselV2-navRight a:after, .carouselV2.carouselV2-twitter .carouselV2-navLeft a:after {
      display: none; }
    .carouselV2.carouselV2-twitter .carouselV2-navRight a:hover:before, .carouselV2.carouselV2-twitter .carouselV2-navLeft a:hover:before {
      opacity: 1; }
    .carouselV2.carouselV2-twitter .carouselV2-navRight a:hover:before {
      right: 15px; }
    .carouselV2.carouselV2-twitter .carouselV2-navLeft a:hover:before {
      left: 15px; }
    .carouselV2.carouselV2-twitter .carouselV2-inline {
      text-align: center; }
      .carouselV2.carouselV2-twitter .carouselV2-inline a {
        display: inline-block;
        margin: 10px 0; }
    @media (max-width: 768px) {
      .carouselV2.carouselV2-twitter .carouselV2-container {
        background-image: none; }
      .carouselV2.carouselV2-twitter .carouselV2-navRight {
        right: -41px; }
      .carouselV2.carouselV2-twitter .carouselV2-navLeft {
        left: -41px; }
      .carouselV2.carouselV2-twitter .carouselV2-navRight a:after, .carouselV2.carouselV2-twitter .carouselV2-navLeft a:after {
        display: none; }
      .carouselV2.carouselV2-twitter .carouselV2-navRight a:hover:before {
        right: 0; }
      .carouselV2.carouselV2-twitter .carouselV2-navLeft a:hover:before {
        left: 0; }
      .carouselV2.carouselV2-twitter .carouselV2-navLeft:not(.inactive) a:hover:before {
        left: 0;
        opacity: 1; }
      .carouselV2.carouselV2-twitter .carouselV2-navRight:not(.inactive) a:hover:before {
        right: 0;
        opacity: 1; }
      .carouselV2.carouselV2-twitter .carouselV2-join-Twitter {
        position: relative;
        -moz-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        width: 100%; } }

.carouselV2.carouselV2-newsCarousel .carouselV2-navLeft a, .carouselV2.carouselV2-newsCarousel .carouselV2-navRight a {
  color: #00c5e8;
  background: rgba(255, 255, 255, 0.2);
  overflow: hidden;
  -webkit-transition: 0.15s;
  -moz-transition: 0.15s;
  -ms-transition: 0.15s;
  -o-transition: 0.15s;
  transition: 0.15s; }
  .carouselV2.carouselV2-newsCarousel .carouselV2-navLeft a:before, .carouselV2.carouselV2-newsCarousel .carouselV2-navLeft a:after, .carouselV2.carouselV2-newsCarousel .carouselV2-navRight a:before, .carouselV2.carouselV2-newsCarousel .carouselV2-navRight a:after {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s; }
  .carouselV2.carouselV2-newsCarousel .carouselV2-navLeft a:after, .carouselV2.carouselV2-newsCarousel .carouselV2-navRight a:after {
    position: absolute;
    top: 1px;
    color: #fff;
    opacity: 0.4; }
  .carouselV2.carouselV2-newsCarousel .carouselV2-navLeft a:hover, .carouselV2.carouselV2-newsCarousel .carouselV2-navRight a:hover {
    background: #0069d2; }

.carouselV2.carouselV2-newsCarousel .carouselV2-navLeft.inactive a, .carouselV2.carouselV2-newsCarousel .carouselV2-navRight.inactive a {
  background: rgba(255, 255, 255, 0.2);
  color: rgba(151, 155, 158, 0.3); }
  .carouselV2.carouselV2-newsCarousel .carouselV2-navLeft.inactive a:hover, .carouselV2.carouselV2-newsCarousel .carouselV2-navRight.inactive a:hover {
    background: rgba(255, 255, 255, 0.2);
    color: rgba(151, 155, 158, 0.3); }

.carouselV2.carouselV2-newsCarousel .carouselV2-news-frame {
  position: relative;
  height: 395px;
  overflow: hidden;
  border: 1px solid #e8e9ed;
  background: #fff; }
  .carouselV2.carouselV2-newsCarousel .carouselV2-news-frame img {
    width: 100%;
    margin: 0;
    -webkit-transition: transform 0.4s ease-in-out;
    -moz-transition: transform 0.4s ease-in-out;
    -ms-transition: transform 0.4s ease-in-out;
    -o-transition: transform 0.4s ease-in-out;
    transition: transform 0.4s ease-in-out; }
    .carouselV2.carouselV2-newsCarousel .carouselV2-news-frame img.img-placeholder {
      padding: 40px 20px 0;
      max-width: 200px;
      display: block;
      margin: 0 auto; }
  .carouselV2.carouselV2-newsCarousel .carouselV2-news-frame:hover img {
    -moz-transform: translate(0, -5%);
    -o-transform: translate(0, -5%);
    -ms-transform: translate(0, -5%);
    -webkit-transform: translate(0, -5%);
    transform: translate(0, -5%); }
  .carouselV2.carouselV2-newsCarousel .carouselV2-news-frame:hover .carouselV2-overlay {
    opacity: 0.8; }
  .carouselV2.carouselV2-newsCarousel .carouselV2-news-frame:hover p {
    opacity: 1;
    max-height: 10rem; }

.carouselV2.carouselV2-newsCarousel .carouselV2-featured {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.3rem 1rem 0.3rem 1.25rem;
  z-index: 1;
  font-family: "latobold", sans-serif;
  font-size: 0.7rem;
  text-transform: uppercase;
  color: #fff; }
  .carouselV2.carouselV2-newsCarousel .carouselV2-featured:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background: #0069d2;
    -moz-transform: skew(40deg, 0deg);
    -o-transform: skew(40deg, 0deg);
    -ms-transform: skew(40deg, 0deg);
    -webkit-transform: skew(40deg, 0deg);
    transform: skew(40deg, 0deg);
    z-index: -1; }
  .carouselV2.carouselV2-newsCarousel .carouselV2-featured_recommended:after {
    background: #1ab99f; }

.carouselV2.carouselV2-newsCarousel .carouselV2-overlay {
  -webkit-transition: opacity 0.4s ease-in-out;
  -moz-transition: opacity 0.4s ease-in-out;
  -ms-transition: opacity 0.4s ease-in-out;
  -o-transition: opacity 0.4s ease-in-out;
  transition: opacity 0.4s ease-in-out;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #0a264d;
  opacity: 0; }

.carouselV2.carouselV2-newsCarousel .carouselV2-details {
  position: absolute;
  bottom: 0;
  padding: 25px 25px 60px 25px;
  width: 100%;
  min-height: 50%;
  background: #fff; }

.carouselV2.carouselV2-newsCarousel .carouselV2-metaData {
  position: absolute;
  right: 25px;
  bottom: 25px;
  left: 25px;
  color: #1ab99f;
  font-family: "ubuntubold", sans-serif;
  font-size: 0.687rem;
  letter-spacing: 0.025rem;
  line-height: 1.125rem;
  text-transform: uppercase; }

.carouselV2.carouselV2-newsCarousel .doubleSizeFrame .carouselV2-details {
  padding-right: 20%; }

.carouselV2.carouselV2-newsCarousel .doubleSizeFrame .carouselV2-news-frame:hover img {
  -moz-transform: scale(1.2);
  -o-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  transform: scale(1.2); }

.carouselV2.carouselV2-newsCarousel ul.row > li:nth-child(2n) .carouselV2-details {
  background: #f1f2f4; }

.carouselV2.carouselV2-newsCarousel h3 {
  color: #1b2429;
  font-family: "ubuntubold", sans-serif;
  font-size: 1.125rem;
  letter-spacing: 0.04rem;
  line-height: 1.625rem;
  text-transform: none; }

.carouselV2.carouselV2-newsCarousel p {
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  font-size: 0.875rem;
  line-height: 1.25rem;
  margin-bottom: 0;
  max-height: 0;
  overflow: hidden;
  color: #1b2429;
  opacity: 0; }

.carouselV2.carouselV2-newsCarousel .Icon--dot {
  display: inline-block;
  position: relative;
  top: -2px;
  margin: 0 0.25rem 0 0.5rem;
  width: 4px;
  height: 4px;
  background: #1ab99f;
  border-radius: 100%; }

.carouselV2.carouselV2-events {
  display: block; }
  .carouselV2.carouselV2-events .carouselV2-navLeft a, .carouselV2.carouselV2-events .carouselV2-navRight a {
    color: #00c5e8;
    background: rgba(255, 255, 255, 0.2);
    overflow: hidden;
    -webkit-transition: 0.15s;
    -moz-transition: 0.15s;
    -ms-transition: 0.15s;
    -o-transition: 0.15s;
    transition: 0.15s; }
    .carouselV2.carouselV2-events .carouselV2-navLeft a:before, .carouselV2.carouselV2-events .carouselV2-navLeft a:after, .carouselV2.carouselV2-events .carouselV2-navRight a:before, .carouselV2.carouselV2-events .carouselV2-navRight a:after {
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s; }
    .carouselV2.carouselV2-events .carouselV2-navLeft a:after, .carouselV2.carouselV2-events .carouselV2-navRight a:after {
      position: absolute;
      top: 1px;
      color: #fff;
      opacity: 0.4; }
    .carouselV2.carouselV2-events .carouselV2-navLeft a:hover, .carouselV2.carouselV2-events .carouselV2-navRight a:hover {
      background: #0069d2; }
  .carouselV2.carouselV2-events .carouselV2-navLeft.inactive a, .carouselV2.carouselV2-events .carouselV2-navRight.inactive a {
    background: rgba(255, 255, 255, 0.2);
    color: rgba(151, 155, 158, 0.3); }
    .carouselV2.carouselV2-events .carouselV2-navLeft.inactive a:hover, .carouselV2.carouselV2-events .carouselV2-navRight.inactive a:hover {
      background: rgba(255, 255, 255, 0.2);
      color: rgba(151, 155, 158, 0.3); }
  .carouselV2.carouselV2-events .carouselV2-frame {
    position: relative;
    height: 395px;
    padding: 25px; }
    .carouselV2.carouselV2-events .carouselV2-frame:hover .carouselV2-month {
      background: #fff;
      color: #1b2429; }
    .carouselV2.carouselV2-events .carouselV2-frame:hover .Button-panel {
      width: 140%;
      transition: width .3s ease-out !important; }
  .carouselV2.carouselV2-events .carouselV2-event:before, .carouselV2.carouselV2-events .carouselV2-event_reversed:before, .carouselV2.carouselV2-events .carouselV2-webinar:before, .carouselV2.carouselV2-events .carouselV2-webinar_reversed:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-transition: opacity 0.2s ease-out;
    -moz-transition: opacity 0.2s ease-out;
    -ms-transition: opacity 0.2s ease-out;
    -o-transition: opacity 0.2s ease-out;
    transition: opacity 0.2s ease-out;
    opacity: 0; }
  .carouselV2.carouselV2-events .carouselV2-event:hover:before, .carouselV2.carouselV2-events .carouselV2-event_reversed:hover:before, .carouselV2.carouselV2-events .carouselV2-webinar:hover:before, .carouselV2.carouselV2-events .carouselV2-webinar_reversed:hover:before {
    opacity: 1; }
  .carouselV2.carouselV2-events .carouselV2-event {
    color: #fff;
    background-color: #1ab99f; }
    .carouselV2.carouselV2-events .carouselV2-event .Button {
      color: #fff; }
    .carouselV2.carouselV2-events .carouselV2-event:hover .Button {
      color: #1ab99f; }
    .carouselV2.carouselV2-events .carouselV2-event:hover:before {
      background-color: #17a48d; }
  .carouselV2.carouselV2-events .carouselV2-event_reversed {
    color: #1ab99f;
    background-color: #f1f2f4; }
    .carouselV2.carouselV2-events .carouselV2-event_reversed .Button, .carouselV2.carouselV2-events .carouselV2-event_reversed .Button:hover {
      color: #1ab99f; }
    .carouselV2.carouselV2-events .carouselV2-event_reversed:hover:before {
      background-color: #e3e5e9; }
  .carouselV2.carouselV2-events .carouselV2-webinar {
    color: #fff;
    background-color: #0069d2; }
    .carouselV2.carouselV2-events .carouselV2-webinar .Button {
      color: #fff; }
    .carouselV2.carouselV2-events .carouselV2-webinar:hover .Button {
      color: #0069d2; }
    .carouselV2.carouselV2-events .carouselV2-webinar:hover:before {
      background-color: #005cb8; }
  .carouselV2.carouselV2-events .carouselV2-webinar_reversed {
    color: #0069d2;
    background-color: #f1f2f4; }
    .carouselV2.carouselV2-events .carouselV2-webinar_reversed .Button, .carouselV2.carouselV2-events .carouselV2-webinar_reversed .Button:hover {
      color: #0069d2; }
    .carouselV2.carouselV2-events .carouselV2-webinar_reversed:hover:before {
      background-color: #e3e5e9; }
  .carouselV2.carouselV2-events .carouselV2-detail, .carouselV2.carouselV2-events .carouselV2-icon, .carouselV2.carouselV2-events .carouselV2-date {
    position: relative; }
  .carouselV2.carouselV2-events .carouselV2-icon {
    margin-bottom: 0.8rem;
    display: block;
    font-size: 2rem; }
    .carouselV2.carouselV2-events .carouselV2-icon span {
      position: relative;
      top: -10px;
      margin-left: 10px;
      margin-bottom: 1rem;
      line-height: 1.125rem;
      font-family: ubuntubold, sans-serif;
      font-size: .687rem;
      letter-spacing: .025rem;
      text-transform: uppercase; }
  .carouselV2.carouselV2-events .carouselV2-day {
    font-family: ubuntulight, sans-serif;
    font-size: 6rem;
    letter-spacing: -.4rem;
    line-height: 1; }
  .carouselV2.carouselV2-events .carouselV2-month {
    display: inline-block;
    width: 3rem;
    margin-left: .5rem;
    padding: 1rem 0;
    background: #0a264d;
    border-radius: 100%;
    color: #fff;
    font-family: ubuntubold, sans-serif;
    font-size: 1rem;
    letter-spacing: .025rem;
    line-height: 1rem;
    text-align: center;
    text-transform: uppercase;
    -moz-transform: translate(0, -2rem);
    -o-transform: translate(0, -2rem);
    -ms-transform: translate(0, -2rem);
    -webkit-transform: translate(0, -2rem);
    transform: translate(0, -2rem);
    -webkit-transition: background 0.2s ease-out, color 0.2s ease-out;
    -moz-transition: background 0.2s ease-out, color 0.2s ease-out;
    -ms-transition: background 0.2s ease-out, color 0.2s ease-out;
    -o-transition: background 0.2s ease-out, color 0.2s ease-out;
    transition: background 0.2s ease-out, color 0.2s ease-out; }
  .carouselV2.carouselV2-events .carouselV2-metaData {
    position: absolute;
    right: 25px;
    bottom: 25px;
    left: 25px; }
  .carouselV2.carouselV2-events .carouselV2-location {
    display: block;
    margin-bottom: 2px;
    font-family: ubunturegular, sans-serif;
    text-transform: none;
    font-size: 11px;
    line-height: 1rem; }
  .carouselV2.carouselV2-events .carouselV2-time {
    display: block;
    font-size: .687rem;
    line-height: 1.125rem;
    letter-spacing: .025rem;
    text-transform: uppercase;
    font-family: ubuntubold, sans-serif; }
  .carouselV2.carouselV2-events h3 {
    height: 77px;
    position: relative;
    margin: 0.5rem 0 1rem;
    overflow: hidden;
    font-size: 1.125rem;
    letter-spacing: .04rem;
    line-height: 1.625rem;
    text-transform: none;
    font-weight: 400;
    font-family: ubuntubold, sans-serif; }
  .carouselV2.carouselV2-events .Icon--dot {
    display: inline-block;
    position: relative;
    top: -2px;
    margin: 0 0.25rem 0 0.5rem;
    width: 4px;
    height: 4px;
    background: #1ab99f;
    border-radius: 100%; }
  .carouselV2.carouselV2-events .Button {
    min-width: 150px;
    max-width: inherit; }

.carouselV2-filter-nav {
  margin: 0 0 30px 0;
  padding: 0;
  text-align: center;
  display: none;
  opacity: 0; }
  .carouselV2-filter-nav li {
    display: inline-block;
    margin: 0 1rem;
    padding: 0; }
    .carouselV2-filter-nav li a {
      display: block;
      padding: 7px 20px;
      background: none !important;
      border: 2px solid transparent;
      border-radius: 3px;
      color: #1b2429;
      text-decoration: none;
      text-transform: uppercase; }
      .carouselV2-filter-nav li a:hover {
        color: #00c5e8; }
    .carouselV2-filter-nav li.active a {
      border: 2px solid #00c5e8;
      color: #00c5e8; }
    .carouselV2-filter-nav li:before {
      display: none; }
    .carouselV2-filter-nav li.disabled a {
      color: #D8D8D8;
      cursor: default; }
      .carouselV2-filter-nav li.disabled a:hover {
        color: #D8D8D8; }
  .carouselV2-filter-nav.filter-dropdown {
    display: block;
    margin: 0 0 10px 0; }
    .carouselV2-filter-nav.filter-dropdown li {
      display: block; }
    .carouselV2-filter-nav.filter-dropdown a {
      display: block; }

.carouselV2-filter-temp {
  position: absolute;
  opacity: inherit;
  top: 0;
  width: 100%; }
  .carouselV2-filter-temp ul {
    transition: 0.2s opacity;
    transition-timing-function: ease-out; }

.carouselV2.carouselV2-megaFilter {
  /* to stop jumping on page load */
  display: block;
  opacity: 0;
  min-height: 515px; }

.carouselV2-megaFilter .carouselV2-filterBy {
  margin-bottom: 20px;
  min-height: 42px; }
  .carouselV2-megaFilter .carouselV2-filterBy .filter-label {
    font-size: 0.8rem; }

.carouselV2-megaFilter .carouselV2-filter-options {
  margin-bottom: 10px; }
  .carouselV2-megaFilter .carouselV2-filter-options .carouselV2-panel {
    position: relative;
    margin: 0 20px 10px 0;
    background: transparent;
    border: none; }
    .carouselV2-megaFilter .carouselV2-filter-options .carouselV2-panel ul {
      display: none;
      position: absolute;
      width: 100%;
      padding: 0;
      max-height: 0;
      transition: 0.3s max-height; }
    .carouselV2-megaFilter .carouselV2-filter-options .carouselV2-panel li {
      padding: 0;
      margin: 0; }
    .carouselV2-megaFilter .carouselV2-filter-options .carouselV2-panel a.topic {
      position: relative;
      display: block;
      margin: 0;
      padding: 6px 0;
      border: 2px solid #fff;
      border-radius: 3px;
      background: transparent;
      color: #0a264d;
      text-align: center;
      font-size: 14px; }
      .carouselV2-megaFilter .carouselV2-filter-options .carouselV2-panel a.topic:after {
        content: "\e60c";
        position: absolute;
        right: 16px;
        top: 5px;
        font-size: 14px;
        transition: 0.3s all;
        font-family: 'icomoon'; }
    .carouselV2-megaFilter .carouselV2-filter-options .carouselV2-panel.open ul {
      display: block; }
    .carouselV2-megaFilter .carouselV2-filter-options .carouselV2-panel.open li {
      padding: 0 1px;
      background: #fff;
      border-left: 1px solid #e8e9ed;
      border-right: 1px solid #e8e9ed; }
      .carouselV2-megaFilter .carouselV2-filter-options .carouselV2-panel.open li a {
        line-height: 30px; }
      .carouselV2-megaFilter .carouselV2-filter-options .carouselV2-panel.open li:last-of-type {
        border-bottom: 1px solid #e8e9ed;
        border-radius: 0 0 3px 3px; }
        .carouselV2-megaFilter .carouselV2-filter-options .carouselV2-panel.open li:last-of-type a {
          padding-bottom: 12px; }
    .carouselV2-megaFilter .carouselV2-filter-options .carouselV2-panel.open a.topic {
      padding-top: 7px;
      background: #e8e9ed;
      border-top: 1px solid #e8e9ed;
      border-right: 1px solid #e8e9ed;
      border-left: 1px solid #e8e9ed;
      border-bottom: none;
      border-radius: 3px 3px 0 0; }
    .carouselV2-megaFilter .carouselV2-filter-options .carouselV2-panel.open a.topic:after {
      -moz-transform: rotate(180deg);
      -o-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg); }
  .carouselV2-megaFilter .carouselV2-filter-options li {
    display: block;
    width: 100%;
    z-index: 10; }
    .carouselV2-megaFilter .carouselV2-filter-options li a {
      display: block;
      width: 100%;
      padding: 4px 0;
      color: #979b9e;
      text-align: center;
      background: #ffffff; }
      .carouselV2-megaFilter .carouselV2-filter-options li a:after {
        display: none; }
      .carouselV2-megaFilter .carouselV2-filter-options li a:hover {
        color: #1ab99f; }
    .carouselV2-megaFilter .carouselV2-filter-options li.active a {
      color: #1ab99f;
      background: #f1f2f4; }
      .carouselV2-megaFilter .carouselV2-filter-options li.active a:before {
        content: "\e616";
        position: absolute;
        right: 16px;
        top: 5px;
        font-size: 14px;
        font-family: 'icomoon'; }

@media only screen and (max-width: 480px) {
  [data-hide="mobile"],
  [data-hide="mobile"].carouselV2-filter,
  .carouselV2-filter-title {
    display: none !important; } }

@media only screen and (min-device-width: 320px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
  [data-hide="mobile"],
  [data-hide="mobile"].carouselV2-filter,
  .carouselV2-filter-title {
    display: none !important; } }

@media only screen and (min-device-width: 320px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {
  [data-hide="mobile"],
  [data-hide="mobile"].carouselV2-filter,
  .carouselV2-filter-title {
    display: none !important; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.cta-box-row h2 {
  color: #0a264d !important;
  margin-bottom: 35px; }

@media (min-width: 48em) {
  .cta-box-row {
    padding-top: 6em;
    padding-bottom: 6em; } }

.cta-box-row-box-ctr {
  background-color: #f1f2f4; }
  .Section--grey-light .cta-box-row-box-ctr {
    background-color: white; }
  @media (min-width: 48em) {
    .cta-box-row-box-ctr {
      background-image: url(data:image/gif;base64,R0lGODlhAQABAPAAAP///////yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==), url(data:image/gif;base64,R0lGODlhAQABAPAAAP///////yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==);
      background-position: 33.333% 0, 66.666% 0;
      background-repeat: repeat-y, repeat-y;
      background-size: 2px 1px, 2px 1px;
      position: relative; }
      .Section--grey-light .cta-box-row-box-ctr {
        background-image: url(data:image/gif;base64,R0lGODlhAQABAPAAAPHy9P///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==), url(data:image/gif;base64,R0lGODlhAQABAPAAAPHy9P///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==); } }
  .cta-box-row-box-ctr h3.Section-title {
    font-size: 1.6rem;
    margin-bottom: 1.5rem; }
  .cta-box-row-box-ctr p {
    color: inherit; }
    .cta-box-row-box-ctr p:last-child {
      margin-bottom: 0; }
    @media (min-width: 48em) {
      .cta-box-row-box-ctr p.button {
        bottom: 4rem;
        margin-left: -1rem;
        padding: 0 0.8rem;
        position: absolute;
        width: 33.333333333%; }
        .cta-box-row-box-ctr p.button .Button {
          width: 100%; } }
    @media (min-width: 62em) {
      .cta-box-row-box-ctr p.button {
        margin-left: -3rem;
        padding: 0 2rem; } }
  .cta-box-row-box-ctr .Button {
    color: black;
    background-color: #f1f2f4 !important;
    background-position: -500px 0 !important;
    border-color: white !important; }
    .cta-box-row-box-ctr .Button .Button-panel {
      background-color: white; }
    .Section--grey-light .cta-box-row-box-ctr .Button {
      border-color: #f1f2f4 !important;
      background-color: white !important;
      background-position: -500px -300px !important; }
      .Section--grey-light .cta-box-row-box-ctr .Button .Button-panel {
        background-color: #f1f2f4; }
    .cta-box-row-box-ctr .Button:hover, .cta-box-row-box-ctr .Button:focus {
      background-position: 0 0 !important;
      border-color: white !important;
      color: black; }
      .Section--grey-light .cta-box-row-box-ctr .Button:hover, .Section--grey-light .cta-box-row-box-ctr .Button:focus {
        background-position: 0 -300px !important;
        border-color: #f1f2f4 !important; }
  .cta-box-row-box-ctr .col-xs-12 {
    padding: 4rem 3rem !important; }
    @media (max-width: 47.99em) {
      .cta-box-row-box-ctr .col-xs-12 {
        border-bottom: 2px solid white; }
        .Section--grey-light .cta-box-row-box-ctr .col-xs-12 {
          border-bottom: 2px solid #f1f2f4; }
        .cta-box-row-box-ctr .col-xs-12:last-child {
          border-bottom: 0; } }
    @media (min-width: 48em) {
      .cta-box-row-box-ctr .col-xs-12 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        padding-bottom: 8rem !important;
        position: static; } }
    @media (min-width: 62em) {
      .cta-box-row-box-ctr .col-xs-12 {
        padding-left: 3rem !important;
        padding-right: 3rem !important; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.list-shield-icons li {
  font-size: 18px;
  padding-top: 15px;
  padding-left: 50px;
  margin-top: 30px;
  vertical-align: bottom; }
  .list-shield-icons li:before {
    content: "";
    display: inline-block;
    height: 45px;
    width: 45px;
    background-image: url("https://assets.cmcmarkets.com/images/costs-shield-tick.svg");
    background-repeat: no-repeat;
    background-size: contain; }

.list-big-numbers {
  padding: 0;
  counter-reset: big-number-counter; }
  .list-big-numbers li {
    padding: 0 0 0 75px; }
    .list-big-numbers li:before {
      content: counter(big-number-counter);
      counter-increment: big-number-counter;
      width: auto;
      height: auto;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      color: #00c5e8;
      font-family: ubuntulight,sans-serif;
      font-size: 50px;
      line-height: 50px; }
  .list-big-numbers h3 {
    color: #333333;
    font-family: latoregular, sans-serif;
    font-size: 18px;
    margin-bottom: 0.375rem;
    text-transform: none; }

.list-event-time {
  padding: 0;
  margin: 0; }
  .list-event-time li {
    margin: 0 0 0 6px;
    padding: 0 10px 2px 0;
    display: inline-block;
    border-right: 1px solid #00c5e8;
    line-height: 12px; }
    .list-event-time li:before {
      display: none; }
    .list-event-time li:last-child {
      border-right: none; }

.list-tick-icons li, .reset-bio-list.list-tick-icons li {
  min-height: 50px;
  padding: 0 0 0 60px;
  margin-bottom: 10px; }
  .list-tick-icons li:after, .reset-bio-list.list-tick-icons li:after {
    content: "";
    position: absolute;
    width: 35px;
    height: 35px;
    top: 0;
    left: 0;
    border: 1px solid #e8e9ed;
    border-radius: 50%;
    background: rgba(250, 250, 250, 0.7) url("https://assets.cmcmarkets.com/images/icn-tick.png") 50% 50% no-repeat; }

.img-list-centered {
  position: relative;
  margin: 0;
  padding: 80px 0 40px; }
  .img-list-centered li {
    margin: 0;
    padding: 60px 0 0 0; }
    .img-list-centered li:before {
      display: none; }
    .img-list-centered li:first-child {
      padding-top: 0; }

.as-seen-on {
  width: 100%; }
  .as-seen-on img {
    margin: 0;
    padding: 0 20px; }

.as-seen-on-label {
  z-index: 1;
  position: absolute;
  top: 0;
  right: 6px;
  width: auto;
  max-width: 80%;
  min-height: 25px;
  padding: 5px 15px 5px 12px;
  text-align: right;
  font-size: 11px;
  color: #fff;
  line-height: 25px;
  text-transform: uppercase;
  font-weight: 700;
  background: #1ab99f; }
  .as-seen-on-label:before {
    content: "";
    position: absolute;
    left: -30px;
    top: 0;
    width: 20px;
    min-height: 25px;
    border-top: 35px solid #1ab99f;
    border-left: 30px solid transparent; }

.table-div {
  display: table;
  table-layout: fixed;
  min-height: 300px;
  width: 100%; }

.table-row {
  display: table-row; }

.table-cell {
  display: table-cell;
  vertical-align: middle; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.live-demo-cta {
  padding: 1rem 0.5rem;
  color: #fff;
  background-color: #0a264d;
  overflow: hidden; }
  @media (min-width: 320px) {
    .live-demo-cta {
      padding: 2.5rem 0; } }
  @media (min-width: 990px) {
    .live-demo-cta {
      padding: 25px 0; } }
  .live-demo-cta h2 {
    font-family: "ubuntulight", sans-serif;
    font-size: 34px;
    text-align: center;
    line-height: 2.5rem;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; }
    @media (min-width: 481px) {
      .live-demo-cta h2 {
        margin: 0.5rem 0 0 0; } }
    @media (min-width: 768px) {
      .live-demo-cta h2 {
        margin: 1.5rem; } }
    @media (min-width: 1024px) {
      .live-demo-cta h2.text-left {
        text-align: left; } }
  .live-demo-cta p {
    margin: 0; }
  .live-demo-cta ul.check-list {
    padding: 0;
    margin: 0 0 1rem 1rem; }
    @media (min-width: 768px) {
      .live-demo-cta ul.check-list {
        margin: 1.5rem 0 0.5rem 1rem; } }
    .live-demo-cta ul.check-list li {
      margin-bottom: 0.5rem; }
      .live-demo-cta ul.check-list li:before {
        content: "\e616";
        color: #fff;
        font-weight: 700; }
  .live-demo-cta.narrow-container {
    max-width: 1000px;
    margin: 0 auto; }
    @media (min-width: 990px) {
      .live-demo-cta.narrow-container {
        padding: 36.5px 16px; }
        .live-demo-cta.narrow-container h2 {
          text-align: left;
          margin: 0.5rem 1rem 0 1rem; } }
  .live-demo-cta.three-step-apply {
    background: #0069d2; }
    @media (min-width: 768px) {
      .live-demo-cta.three-step-apply {
        padding: 16px 0 40px 0; } }
    .live-demo-cta.three-step-apply h2 {
      margin-bottom: 2rem; }
    .live-demo-cta.three-step-apply h4 {
      text-transform: none;
      font-size: 2rem;
      display: inline-block;
      vertical-align: middle; }
      @media (min-width: 990px) {
        .live-demo-cta.three-step-apply h4 {
          text-align: left; } }
    @media (min-width: 480px) and (max-width: 768px) {
      .live-demo-cta.three-step-apply .container-fluid {
        padding: 0; } }
    .live-demo-cta.three-step-apply .number-head {
      text-align: center; }
      @media (min-width: 768px) {
        .live-demo-cta.three-step-apply .number-head {
          text-align: left; } }
      .live-demo-cta.three-step-apply .number-head .number {
        padding: 0.65rem 0;
        margin: 0 10px 0 0;
        width: 50px;
        height: 50px;
        background: #1ab99f;
        color: #FFF;
        font-size: 26px;
        text-align: center;
        line-height: 1.75rem;
        border-radius: 100%;
        display: inline-block;
        vertical-align: middle; }
      .live-demo-cta.three-step-apply .number-head .number-text {
        width: 100%;
        margin-top: 0.5rem;
        display: inline-block;
        vertical-align: middle;
        font-size: 1.5rem; }
        @media (min-width: 480px) {
          .live-demo-cta.three-step-apply .number-head .number-text {
            font-size: 2rem;
            width: auto; } }
    @media (min-width: 990px) {
      .live-demo-cta.three-step-apply .risk-warning {
        margin: 14px 0 0 0; } }
    @media (min-width: 480px) {
      .live-demo-cta.three-step-apply .button-green {
        margin-top: 0; }
        .live-demo-cta.three-step-apply .button-green .Button {
          margin-top: 0; } }
  .live-demo-cta .risk-warning {
    margin: 1rem 0 0 0;
    font-size: 16px; }
    @media (min-width: 990px) {
      .live-demo-cta .risk-warning {
        margin: 0; } }
  .live-demo-cta .button-green {
    margin-top: 1rem; }
    @media (min-width: 990px) {
      .live-demo-cta .button-green {
        margin-top: 0.5rem; } }
    .live-demo-cta .button-green .Button {
      font-size: 18px; }
      @media (min-width: 480px) {
        .live-demo-cta .button-green .Button {
          max-width: 275px; } }
  .live-demo-cta .rebate-iphone-img {
    top: 22px;
    position: absolute;
    /*transform: scale(1.15);
    -webkit-transform: scale(1.15);
    -moz-transform: scale(1.15);*/ }

.no-bottom-padding {
  padding-bottom: 0; }

.buy-sell {
  margin-bottom: 1rem;
  display: inline-block;
  vertical-align: middle;
  text-transform: uppercase; }
  @media (min-width: 990px) {
    .buy-sell {
      margin-top: 2rem; } }

.arrow-buy {
  width: 0;
  height: 0;
  margin: auto 0 auto 0.5rem;
  display: inline-block;
  margin-right: 3px;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-bottom: 25px solid #4cf72e;
  vertical-align: middle; }

.arrow-sell {
  width: 0;
  height: 0;
  margin: auto 0.5rem auto 0;
  display: inline-block;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-top: 25px solid #f60c1a;
  vertical-align: middle; }

.counter {
  color: #00c5e8;
  font-weight: 700;
  margin: 0 4rem;
  line-height: 4rem; }
  @media (min-width: 480px) {
    .counter {
      margin: 0;
      line-height: 2.5rem; } }
  @media (min-width: 768px) {
    .counter {
      padding: 0 1rem 0 1rem; } }
  .counter span {
    color: #fff; }

.Section .info-box img {
  margin-top: 1rem;
  margin-bottom: 0; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.Section--Login-widget {
  padding-top: 0; }
  .Section--Login-widget img {
    margin: 0; }
  .Section--Login-widget h2 {
    font-family: "ubuntulight", SansSerif, sans-serif;
    margin-bottom: 0;
    text-align: center;
    font-size: 1.46rem; }
    .Section--Login-widget h2 a {
      color: #fff; }
    .Section--Login-widget h2 span {
      display: block;
      text-transform: uppercase;
      font-weight: bold;
      font-size: 1.1rem; }
  .Section--Login-widget p {
    margin: 0;
    text-align: center; }
    .Section--Login-widget p span {
      white-space: nowrap; }
  .Section--Login-widget.version3 p.have-account {
    padding: 10px 0;
    text-align: left; }
  .Section--Login-widget a.Button {
    max-width: 175px;
    margin-top: 10px;
    margin-bottom: 10px; }
  .Section--Login-widget .action.text-center {
    text-align: center; }
    .Section--Login-widget .action.text-center h2 {
      text-align: center; }
    .Section--Login-widget .action.text-center p {
      padding-left: 0;
      text-align: center; }
  .Section--Login-widget .StatisticCard {
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 474px;
    margin: auto;
    padding: 0;
    max-width: 100%;
    float: none;
    border: none;
    border-collapse: separate;
    background: transparent; }
  .Section--Login-widget .table-cell {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    padding-bottom: 8px; }
    .Section--Login-widget .table-cell:after {
      content: "";
      position: absolute;
      width: 100%;
      height: 8px;
      left: 0;
      background: #fff;
      bottom: -1px; }
  .Section--Login-widget .table-row {
    display: table-row; }
  .Section--Login-widget .action {
    color: #fff;
    text-align: inherit;
    /* Override existing property */ }
    .Section--Login-widget .action-sb {
      background: #00c5e8; }
    .Section--Login-widget .action-cfd {
      background: #1b2429; }
    .Section--Login-widget .action-mm {
      background: #0a264d; }
    .Section--Login-widget .action-ko {
      background: #e8e9ed; }
      .Section--Login-widget .action-ko h2, .Section--Login-widget .action-ko h2 a {
        color: #00c5e8; }
      .Section--Login-widget .action-ko a.Button {
        border-color: #D8D8D8; }
    .Section--Login-widget .action-trade {
      background: #f1f2f4;
      color: #1b2429;
      text-align: center; }
      .Section--Login-widget .action-trade h2 a {
        color: #1b2429; }
    .Section--Login-widget .action-text {
      background: transparent;
      color: #1b2429; }
    .Section--Login-widget .action .Button--white {
      color: inherit; }
    .Section--Login-widget .action-pod {
      position: relative;
      overflow: hidden;
      /*background-image: url('../pages/img/color/login-842x465-v3.jpeg');
			background-size: cover;*/
      color: inherit;
      text-align: center; }
      .Section--Login-widget .action-pod img {
        position: absolute;
        height: 474px;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0; }
      .Section--Login-widget .action-pod h2, .Section--Login-widget .action-pod p {
        padding: 0; }
      .Section--Login-widget .action-pod h2 {
        font-family: 'ubunturegular', sans-serif;
        margin-bottom: 1.5em; }
      .Section--Login-widget .action-pod .slide {
        position: absolute;
        width: 100%;
        top: 0;
        bottom: 0;
        right: 100%;
        height: 474px;
        padding: 30px;
        background: rgba(230, 230, 230, 0.9);
        text-align: center;
        transition: all 0.5s;
        animation: slideIn 1s ease-out 1s 1 forwards; }
      .Section--Login-widget .action-pod a.Button {
        text-align: center;
        margin-top: 2em; }
    .Section--Login-widget .action .text-left h2, .Section--Login-widget .action .text-left p {
      text-align: left; }
  .Section--Login-widget .float a.Button {
    position: relative;
    float: right;
    top: auto; }
  .Section--Login-widget.version1 a.Button:not(.register), .Section--Login-widget.version3 a.Button:not(.register) {
    position: relative; }
  .Section--Login-widget.version1 .float h2, .Section--Login-widget.version3 .float h2 {
    margin-top: 10px; }
  .Section--Login-widget.version1 .float a.Button, .Section--Login-widget.version3 .float a.Button {
    position: relative;
    float: none;
    top: auto; }
  .Section--Login-widget.version2 h2, .Section--Login-widget.version2 p {
    padding: 0; }
  .Section--Login-widget.version2 p {
    padding-top: 6px; }
  .Section--Login-widget.version2 a.Button:not(.register) {
    position: relative;
    max-width: 190px;
    width: 100%; }
  .Section--grey-light .Section--Login-widget .table-cell:after {
    background: #f1f2f4; }

@media (max-width: 40em) {
  .Section--Login-widget .col-sm-6 {
    width: 100%; }
  .Section--Login-widget.version1 .action-trade h2, .Section--Login-widget.version2 .action-trade h2 {
    padding: 10px 0 0; }
  .Section--Login-widget.version1 .action-trade p, .Section--Login-widget.version2 .action-trade p {
    padding: 0 0 10px; }
  .Section--Login-widget.version3 .left .table-cell {
    height: 33%; }
  .Section--Login-widget.version3 p.have-account {
    padding: 10px 0 18px;
    text-align: center; }
  .Section--Login-widget .action-pod .slide {
    padding: 50px 50px 0; } }

@media (max-width: 30em) {
  .Section--Login-widget .table {
    height: 100%; }
  .Section--Login-widget .table, .Section--Login-widget .table-row, .Section--Login-widget .table-cell {
    display: block; }
  .Section--Login-widget .left .table-row:last-child .table-cell {
    border: none; }
  .Section--Login-widget .left .table-cell {
    margin-bottom: 6px;
    padding: 0 0 6px 0;
    background: #fff;
    border-bottom: 1px solid #ccc; }
    .Section--Login-widget .left .table-cell.no-border {
      margin-bottom: 0;
      border: none; }
    .Section--Login-widget .left .table-cell:after {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      top: 0;
      left: 0;
      bottom: 0;
      background: none; }
    .Section--Login-widget .left .table-cell h2 {
      position: relative;
      margin: 0;
      text-align: left; }
      .Section--Login-widget .left .table-cell h2:after {
        content: "";
        position: absolute;
        width: 8px;
        height: auto;
        top: 0;
        left: 0;
        bottom: 0;
        background: #00c5e8; }
      .Section--Login-widget .left .table-cell h2 a {
        display: block;
        padding: 10px 30px 10px 16px; }
      .Section--Login-widget .left .table-cell h2 span {
        display: inline; }
    .Section--Login-widget .left .table-cell a.Button {
      position: absolute;
      width: 30px;
      height: 40px;
      top: 50%;
      right: 0;
      margin-top: -20px;
      padding: 0;
      border: none;
      text-indent: -9999em;
      transition: none; }
      .Section--Login-widget .left .table-cell a.Button:after {
        font-weight: 900;
        content: "\e612";
        font-family: 'icomoon';
        position: absolute;
        top: 0;
        left: 0;
        padding: 8px 5px;
        color: black;
        font-size: 1.2em;
        text-indent: 0;
        transform: none; }
      .Section--Login-widget .left .table-cell a.Button:hover {
        background: none; }
    .Section--Login-widget .left .table-cell p.have-account {
      padding: 10px 0; }
  .Section--Login-widget .left .action-sb h2, .Section--Login-widget .left .action-sb h2 a {
    color: #00c5e8; }
  .Section--Login-widget .left .action-sb h2:after {
    background: #00c5e8; }
  .Section--Login-widget .left .action-sb a.Button:after {
    color: #00c5e8; }
  .Section--Login-widget .left .action-mm h2, .Section--Login-widget .left .action-mm h2 a {
    color: #0a264d; }
  .Section--Login-widget .left .action-mm h2:after {
    background: #0a264d; }
  .Section--Login-widget .left .action-mm a.Button:after {
    color: #0a264d; }
  .Section--Login-widget .left .action-cfd h2, .Section--Login-widget .left .action-cfd h2 a {
    color: #1b2429; }
  .Section--Login-widget .left .action-cfd h2:after {
    background: #1b2429; }
  .Section--Login-widget .left .action-cfd a.Button:after {
    color: #0a264d; }
  .Section--Login-widget .left .action-ko h2, .Section--Login-widget .left .action-ko h2 a {
    color: #00c5e8; }
  .Section--Login-widget .left .action-ko h2:after {
    background: #00c5e8; }
  .Section--Login-widget .left .action-ko a.Button:after {
    color: #00c5e8; }
  .Section--Login-widget .left .action-trade {
    background: #f1f2f4; }
    .Section--Login-widget .left .action-trade h2 {
      position: relative;
      padding: 20px 0 0;
      text-align: center; }
      .Section--Login-widget .left .action-trade h2:after {
        display: none; }
  .Section--Login-widget .right .table-cell {
    padding: 0;
    height: 471px; }
    .Section--Login-widget .right .table-cell:after {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      top: 0;
      left: 0;
      bottom: 0;
      background: none; }
  .Section--Login-widget .right img {
    position: relative; }
  .Section--Login-widget .action-pod .slide {
    padding: 40px 20px 0; }
  .Section--Login-widget.version3 .left .table-cell.action-cfd {
    border-bottom: 1px solid #ccc; }
  .Section--Login-widget.version3 p.have-account {
    padding: 16px 0 18px; } }

@media (min-width: 40em) {
  .Section--Login-widget.version1 .action-trade h2, .Section--Login-widget.version2 .action-trade h2 {
    padding: 10px 0 0; }
  .Section--Login-widget.version1 .action-trade p, .Section--Login-widget.version2 .action-trade p {
    padding: 0 0 10px; }
  .Section--Login-widget.version1 h2 {
    padding-left: 4px;
    padding-right: 4px; }
  .Section--Login-widget.version3 .left .table-cell {
    height: 33%; }
  .Section--Login-widget.version3 p.have-account {
    padding: 10px 0 18px;
    text-align: left; } }

@media (min-width: 48em) {
  .Section--Login-widget .action-pod .slide {
    padding: 30px 40px; }
    .Section--Login-widget .action-pod .slide h2 {
      padding-top: 1em; }
  .Section--Login-widget .left h2, .Section--Login-widget .left p {
    text-align: left; }
  .Section--Login-widget .left h2 {
    padding-top: 25px;
    padding-bottom: 4px; }
  .Section--Login-widget .left .action-trade h2 {
    padding: 20px 0 0; }
  .Section--Login-widget.version1 .table-cell, .Section--Login-widget.version3 .table-cell {
    vertical-align: top; }
  .Section--Login-widget.version1 a.Button:not(.register), .Section--Login-widget.version3 a.Button:not(.register) {
    position: absolute;
    bottom: 15px;
    right: 17px;
    min-width: 145px; }
  .Section--Login-widget.version1 .left h2, .Section--Login-widget.version1 .left p, .Section--Login-widget.version3 .left h2, .Section--Login-widget.version3 .left p {
    padding-left: 25px; }
  .Section--Login-widget.version1 .float, .Section--Login-widget.version3 .float {
    text-align: center; }
    .Section--Login-widget.version1 .float h2, .Section--Login-widget.version3 .float h2 {
      padding: 0 10px;
      float: none; }
    .Section--Login-widget.version1 .float a.Button:not(.register), .Section--Login-widget.version3 .float a.Button:not(.register) {
      position: relative;
      bottom: auto;
      right: auto;
      float: none; }
  .Section--Login-widget.version1 h2 {
    text-align: center; }
  .Section--Login-widget.version1 p.have-account {
    padding: 10px 10px 0; }
  .Section--Login-widget.version2 a.Button:not(.register) {
    max-width: 190px;
    width: 100%; } }

@media (min-width: 62em) {
  .Section--Login-widget .action-pod .slide {
    padding: 30px 30px 0; }
  .Section--Login-widget.version1 .action-sb, .Section--Login-widget.version1 .action-cfd {
    height: 110px; }
  .Section--Login-widget.version1 .action-ko {
    height: 100px; }
    .Section--Login-widget.version1 .action-ko + .action-cfd {
      height: 100px; }
  .Section--Login-widget.version1 .float h2 {
    max-width: 215px;
    text-align: left; }
  .Section--Login-widget.version1 .float a.Button:not(.register) {
    position: absolute;
    right: 10px;
    bottom: 10px; }
  .Section--Login-widget.version3 .float {
    text-align: center; }
    .Section--Login-widget.version3 .float h2 {
      padding: 0 25px;
      text-align: center; }
  .Section--Login-widget .action-pod .slide {
    width: 50%; } }

@keyframes slideIn {
  from {
    right: -100%; }
  to {
    right: 0; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.cmc-cta-notice,
.cmc-cta-notice-hubpage {
  /* .cmc-cta-notice is connected to some javascript for EN* sites that changes URLS in this widget - the hubpage version of this class is to escape this JS and keep using the styles in hubpages - where the URLs should be manulayy updated */
  margin-bottom: 2.125rem;
  margin-top: 2rem;
  padding: 0.875rem 0 1rem; }
  .cmc-cta-notice:first-child,
  .cmc-cta-notice-hubpage:first-child {
    margin-top: 0; }
  .cmc-cta-notice *,
  .cmc-cta-notice-hubpage * {
    font-family: "latoregular", sans-serif;
    line-height: 1.5625rem;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: subpixel-antialiased;
    -webkit-font-smoothing: antialiased; }
  .cmc-cta-notice .row,
  .cmc-cta-notice-hubpage .row {
    margin-left: -6px !important;
    margin-right: -6px !important; }
  .cmc-cta-notice .col-md-6:first-child,
  .cmc-cta-notice-hubpage .col-md-6:first-child {
    padding-bottom: 2rem; }
  @media (min-width: 48em) {
    .cmc-cta-notice .col-md-6,
    .cmc-cta-notice-hubpage .col-md-6 {
      padding-bottom: 0 !important;
      padding-right: 50px; } }
  .cmc-cta-notice h3, .cmc-cta-notice h4, .cmc-cta-notice h5, .cmc-cta-notice .cta-section-title,
  .cmc-cta-notice-hubpage h3,
  .cmc-cta-notice-hubpage h4,
  .cmc-cta-notice-hubpage h5,
  .cmc-cta-notice-hubpage .cta-section-title {
    margin-bottom: 0;
    margin-top: 0;
    color: #000;
    font-family: "ubuntubold", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.625rem;
    text-transform: none;
    letter-spacing: 0.04375rem; }
    @media (min-width: 480px) {
      .cmc-cta-notice h3, .cmc-cta-notice h4, .cmc-cta-notice h5, .cmc-cta-notice .cta-section-title,
      .cmc-cta-notice-hubpage h3,
      .cmc-cta-notice-hubpage h4,
      .cmc-cta-notice-hubpage h5,
      .cmc-cta-notice-hubpage .cta-section-title {
        margin-top: 0; } }
  .cmc-cta-notice h3,
  .cmc-cta-notice-hubpage h3 {
    color: #1b2429; }
  .cmc-cta-notice h4.cta-section-title,
  .cmc-cta-notice-hubpage h4.cta-section-title {
    margin-bottom: 7px; }
  .cmc-cta-notice p,
  .cmc-cta-notice p:first-child,
  .cmc-cta-notice-hubpage p,
  .cmc-cta-notice-hubpage p:first-child {
    padding: 0 !important;
    margin: 0;
    color: #333333;
    font-size: 15px !important;
    line-height: 1.5625rem !important; }
  .cmc-cta-notice .Button,
  .cmc-cta-notice-hubpage .Button {
    margin: 0.3125rem 0 0; }
  .cmc-cta-notice .list + .button .Button,
  .cmc-cta-notice-hubpage .list + .button .Button {
    margin-top: 0.625rem; }
  .cmc-cta-notice .text-center .Button,
  .cmc-cta-notice-hubpage .text-center .Button {
    margin-left: auto;
    margin-right: auto; }
  .cmc-cta-notice img,
  .cmc-cta-notice-hubpage img {
    margin-bottom: 0 !important; }
  .cmc-cta-notice .title-arrow,
  .cmc-cta-notice-hubpage .title-arrow {
    background: url("https://assets.cmcmarkets.com/images/cmc-cta-notice-arrow.png") no-repeat 3px 5px;
    padding: 0 0 0 20px;
    margin-bottom: 0 !important;
    text-align: left !important; }

a {
  text-decoration: none;
  color: #00c5e8; }

.cmc-cta-notice-border {
  border-top: 1px solid #f1f2f4;
  border-bottom: 1px solid #f1f2f4;
  margin-bottom: 2.125rem;
  margin-top: 2.4375rem;
  padding-left: 20px; }
  .cmc-cta-notice-border .title-arrow {
    margin-left: -20px; }

.cmc-cta-notice-no-padding {
  padding: 0 !important; }

.cmc-cta-notice-no-border {
  border: 0 !important; }

.cmc-cta-notice-content {
  padding: 0; }

.cmc-cta-notice-title {
  padding: 0;
  margin: 0;
  color: #000;
  font-weight: 700;
  font-size: 18px;
  text-transform: none;
  letter-spacing: 0; }

.cta-learn-notice .Button {
  max-width: 300px !important;
  width: 100% !important; }

.cmc-cta-notice .process p {
  padding: 0 !important;
  margin: 5px 0;
  color: #222 !important;
  font-size: 15px !important;
  line-height: 1.5625rem !important; }

.cta-learn-info-box {
  counter-reset: steps;
  position: relative;
  padding: 19px 20px 0;
  margin: 0 0 18px;
  background: #f9feff;
  border: 1px solid #00c5e8;
  border-radius: 4px; }
  .cta-learn-info-box:after {
    display: block;
    position: absolute;
    width: 69px;
    height: 27px;
    left: 47.5%;
    bottom: -27px;
    background: url("https://assets.cmcmarkets.com/images/cmc-cta-notice-info-box-arrow.png") no-repeat;
    content: ''; }
  .cta-learn-info-box .col-md-4 {
    padding: 0 13px 23px; }
  .cta-learn-info-box h5 {
    color: #1b2429;
    font-size: 15px;
    font-weight: 700;
    min-height: 37px;
    padding-left: 35px;
    position: relative;
    text-transform: none; }
    .cta-learn-info-box h5:before {
      background: #29b9a0;
      border-radius: 50%;
      color: #fff;
      counter-increment: steps;
      content: counter(steps);
      display: block;
      font-family: 'latobold', sans-serif;
      height: 28px;
      left: 0;
      line-height: 28px;
      position: absolute;
      text-align: center;
      top: -1px;
      width: 28px; }
  .cta-learn-info-box p {
    margin: 0; }
  .cta-learn-info-box .number-head {
    margin: 10px 0;
    display: table;
    border-spacing: 0; }
  .cta-learn-info-box .number {
    padding: 0;
    margin: 0 10px 0 0;
    width: 30px;
    height: 30px;
    background: #29b9a0;
    color: #FFF;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    line-height: 1.75rem;
    vertical-align: middle;
    border: 1px solid #00c5e8;
    border-radius: 100%; }

.btn-wide {
  width: 250px;
  max-width: 300px;
  margin-top: 10px; }
  @media (min-width: 480px) {
    .btn-wide {
      width: 300px; } }

.cmc-cta-notice-block {
  padding: 20px;
  padding-left: 28px;
  border: 1px solid #ddd; }
  .cmc-cta-notice-block .title-arrow {
    margin-left: -20px; }

.cmc-cta-grey {
  background: #f1f2f4;
  padding: 25px 30px 25px 30px; }
  .cmc-cta-grey .title-arrow {
    margin-bottom: 13px !important;
    margin-left: -20px !important; }
  @media (min-width: 48em) {
    .cmc-cta-grey {
      padding: 35px 30px 33px 40px; } }

.cmc-cta-notice-block-sidebar {
  padding: 0 20px; }

.cmc-cta-notice ul {
  margin: 0.25rem 0 0.25rem 1px; }
  .cmc-cta-notice ul li {
    padding: 0;
    margin: 0 0 0 0;
    font-size: 15px; }
    .cmc-cta-notice ul li::before {
      content: ''; }

.cmc-cta-notice .cmc-cta-notice-simple-list li {
  list-style-type: disc; }

.cmc-cta-notice .cmc-cta-notice-check-list {
  padding: 0; }
  .cmc-cta-notice .cmc-cta-notice-check-list ul {
    padding: 0; }
  .cmc-cta-notice .cmc-cta-notice-check-list li {
    padding: 0 0 0 20px;
    margin: 0;
    background: url("https://assets.cmcmarkets.com/images/cmc-cta-notice-check.png") no-repeat 0 5px; }

.cmc-cta-image-copy img {
  display: block;
  margin: 6px 0 1.5rem 0 !important;
  max-width: 100%;
  width: auto; }

@media (min-width: 48em) {
  .cmc-cta-image-copy img {
    margin: 6px 0 0 0 !important; }
  .cmc-cta-image-copy .col-md-8 {
    padding-left: 13px; } }

.cmc-cta-notice-reevoo {
  padding: 1em 2em !important; }
  .cmc-cta-notice-reevoo h4 {
    padding: 1em 0 0 0;
    margin: 0;
    font-family: "ubuntulight", sans-serif;
    font-size: 25px;
    font-weight: bold; }
  .cmc-cta-notice-reevoo ul.cmc-cta-notice-check-list {
    margin: 1rem 0; }
    .cmc-cta-notice-reevoo ul.cmc-cta-notice-check-list li {
      background: url("https://assets.cmcmarkets.com/images/cmc-cta-notice-check-green.png") no-repeat center left; }
  .cmc-cta-notice-reevoo .cmc-cta-notice-content {
    position: relative;
    float: left;
    margin-top: 0; }

.ArticleMain .ArticleBody-Copy .cmc-cta-notice .row {
  display: block; }

.ArticleMain .ArticleBody-Copy .cmc-cta-notice [class*="col-"] {
  display: block;
  float: left; }

.ArticleMain .ArticleBody-Copy .cmc-cta-notice img {
  margin-top: 0;
  max-width: 100%;
  width: auto; }

@media (min-width: 48em) {
  .ArticleMain .ArticleBody-Copy .cmc-cta-notice {
    margin-left: 1.5rem; } }

.ArticleMain--Sidebar .ArticleSidebar > ul > li:nth-child(2n+1) {
  clear: both; }

.ArticleMain--Sidebar .ArticleSidebar li .cmc-cta-notice {
  margin-bottom: 0;
  padding: 0 0 1rem; }
  .ArticleMain--Sidebar .ArticleSidebar li .cmc-cta-notice li {
    float: none; }
  @media (min-width: 62em) {
    .ArticleMain--Sidebar .ArticleSidebar li .cmc-cta-notice img {
      margin-bottom: 1rem; } }

.ArticleMain--Sidebar .cmc-cta-notice .col-lg-12 {
  padding-left: 26px;
  padding-right: 26px; }

.ArticleMain--Sidebar .cmc-cta-notice .cta-image-col {
  padding-right: 6px; }
  .ArticleMain--Sidebar .cmc-cta-notice .cta-image-col img {
    display: block;
    margin: 6px 0 0 0 !important;
    max-width: 100%;
    width: auto; }

.ArticleMain--Sidebar .Section-title.title-arrow {
  color: #1b2429;
  font-family: "ubuntubold", sans-serif;
  font-weight: 700;
  font-size: 18px;
  height: auto;
  letter-spacing: 0.04375rem;
  line-height: 1.625rem;
  margin: 0 0 0 -20px;
  text-transform: none; }

@media (max-width: 47.999em) {
  .ArticleMain--Sidebar .cmc-cta-notice .cta-image-col {
    padding-bottom: 1.5rem; } }

@media (min-width: 62em) {
  .ArticleMain--Sidebar .cmc-cta-notice {
    margin-bottom: 1.5rem;
    margin-top: 0; }
    .ArticleMain--Sidebar .cmc-cta-notice .cta-image-col {
      padding-bottom: 1.5rem;
      padding-left: 6px;
      padding-right: 6px; }
      .ArticleMain--Sidebar .cmc-cta-notice .cta-image-col img {
        margin: 0 auto !important; }
    .ArticleMain--Sidebar .cmc-cta-notice .Button {
      width: 100%; }
    .ArticleMain--Sidebar .cmc-cta-notice .button + p {
      text-align: center; }
  .ArticleMain--Sidebar .Button {
    min-width: 0 !important; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.NewsHighlights-item-row {
  padding: 0 0 5rem; }
  .NewsHighlights-item-row .NewsHighlights-item {
    text-align: center; }
    .NewsHighlights-item-row .NewsHighlights-item h3 {
      color: #0a264d;
      font-family: 'ubuntubold',sans-serif;
      margin-bottom: 0.2rem;
      min-height: 5rem;
      padding: 0 1rem;
      text-transform: none; }
    .NewsHighlights-item-row .NewsHighlights-item .img-wrapper {
      margin-bottom: 2rem;
      overflow: hidden;
      padding-top: 47.619%;
      position: relative; }
      .NewsHighlights-item-row .NewsHighlights-item .img-wrapper img {
        left: 0;
        position: absolute;
        top: 50%;
        width: 100%;
        transform: translate(0, -50%); }
  .NewsHighlights-item-row .Section-title {
    color: #0a264d;
    font-size: 1.56rem;
    letter-spacing: .135rem;
    line-height: 1.875rem;
    margin-bottom: 1.8rem;
    text-align: center; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
@media (min-width: 48em) {
  .StatisticCard .Button {
    min-width: 175px; } }

.Section--promo-pod {
  padding-top: 0; }
  .Section--promo-pod .StatisticCard {
    display: table;
    table-layout: fixed;
    width: 100%;
    max-width: 100%;
    height: 471px;
    margin: auto;
    padding: 0;
    background: yellow;
    float: none;
    border: none;
    border-collapse: separate;
    text-align: left; }
    .Section--promo-pod .StatisticCard .SocialLinks li {
      padding-bottom: 4.5%; }
  .Section--promo-pod .table-cell {
    position: relative;
    display: table-cell;
    vertical-align: middle; }
    .Section--promo-pod .table-cell:after {
      content: "";
      position: absolute;
      width: 100%;
      height: 4px;
      bottom: 0;
      left: 0;
      background: #fff; }
  .Section--promo-pod .table-row {
    display: table-row; }
  .Section--promo-pod .action {
    color: #fff;
    text-align: center; }
    .Section--promo-pod .action-sb {
      background: #00c5e8; }
    .Section--promo-pod .action-sfd {
      background: #1b2429; }
    .Section--promo-pod .action-mm {
      background: #1b2429; }
    .Section--promo-pod .action .Button--white {
      color: inherit; }
    .Section--promo-pod .action-pod {
      position: relative;
      overflow: hidden;
      background: #f1f2f4;
      color: inherit; }
      .Section--promo-pod .action-pod > div {
        position: relative; }
      .Section--promo-pod .action-pod .padded {
        padding: 30px; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.Footer {
  padding-bottom: 9rem !important; }

#footerAlerts {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 997;
  width: 100%; }

#CookieAlert.v1 {
  background: #1b2429;
  color: #fff;
  padding: 8px 0 0; }
  #CookieAlert.v1 p {
    font-size: 14px;
    line-height: 20px;
    margin: 0 0 8px;
    padding-right: 20px; }
  #CookieAlert.v1 #cookieAlertContinue {
    display: block;
    font-size: 1.5rem;
    height: 30px;
    line-height: 30px;
    position: absolute;
    right: 4px;
    text-align: center;
    top: 0px;
    width: 30px; }

#CookieAlert.v2 {
  animation: CookieAlertFadein 1.5s;
  background: #1b2429;
  border-top: 1px solid transparent;
  min-height: 68px;
  padding: 12px 15px 16px;
  position: relative; }
  #CookieAlert.v2 p {
    color: #fff;
    font-family: 'latobold', sans-serif;
    font-size: 14px;
    line-height: 19px;
    margin: 0;
    max-width: 630px;
    padding: 0 80px 0 0; }
    #CookieAlert.v2 p a {
      color: #fff;
      font-family: 'latoregular', sans-serif;
      text-decoration: underline;
      white-space: nowrap; }
      #CookieAlert.v2 p a:hover {
        text-decoration: none; }
  #CookieAlert.v2 .Button {
    background-color: #17a48d;
    background-image: linear-gradient(135deg, transparent 0%, transparent 10%, #fff 10%, #fff 70%, transparent 70%);
    background-repeat: no-repeat;
    background-size: 200% 100%;
    background-position: 200% 0;
    border: 0;
    color: #fff;
    display: inline-block;
    font-size: 14px;
    margin-left: 47px;
    min-width: 60px;
    padding: 6px 5px;
    position: absolute;
    right: 15px;
    top: 15px;
    width: auto; }
    #CookieAlert.v2 .Button:hover {
      background-position: 25% 0;
      color: #0a264d; }
  @media (min-width: 768px) {
    #CookieAlert.v2 p {
      font-family: 'latoregular', sans-serif;
      font-size: 16px;
      line-height: 25px;
      max-width: 700px;
      padding-right: 90px; }
    #CookieAlert.v2 .Button {
      font-size: 16px;
      min-width: 77px; } }
  @media (min-width: 992px) {
    #CookieAlert.v2 {
      padding: 14px 0;
      text-align: center; }
      #CookieAlert.v2 p {
        display: inline-block;
        max-width: 100%;
        padding: 4px 0 0; }
      #CookieAlert.v2 .Button {
        position: static; } }

@keyframes CookieAlertFadein {
  0% {
    opacity: 0; }
  75% {
    opacity: 0; }
  100% {
    opacity: 1; } }

#footerRiskWarning {
  background: #e8e9ed;
  color: #000; }
  #footerRiskWarning .col-xs-12 {
    padding: 4px;
    font-size: 12px;
    line-height: 14px; }
    @media (min-width: 768px) {
      #footerRiskWarning .col-xs-12 {
        font-size: 15px;
        line-height: 18px; } }

#footerRiskWarning #fullRiskWarning {
  display: none; }

#footerRiskWarning .close {
  color: #979b9e; }

/* Chat icon styles */
#chatContainer .chatLauncher {
  bottom: 20px !important; }

#chatContainer .attentionGrabber {
  bottom: 120px  !important; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/* Smart Banner to point for proper mobile apps (google | apple) */
.sbCMC {
  position: fixed;
  width: 100%;
  height: 72px;
  top: 0;
  z-index: 100;
  font-family: "ubuntulight", sans-serif;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#dbdbd8+0,f2f2f2+8,d1d1d1+100 */
  background: #dbdbd8;
  /* Old browsers */
  background: -moz-linear-gradient(top, #dbdbd8 0%, #f2f2f2 8%, #d1d1d1 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #dbdbd8 0%, #f2f2f2 8%, #d1d1d1 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #dbdbd8 0%, #f2f2f2 8%, #d1d1d1 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ }
  .sbCMC-close {
    position: relative;
    width: 28px;
    height: 72px;
    background: url("https://assets.cmcmarkets.com/fonts/x.svg") no-repeat 50% 31px;
    background-size: 10px 10px;
    cursor: pointer; }
  .sbCMC-icn {
    position: absolute;
    width: 56px;
    height: 56px;
    top: 8px;
    left: 28px;
    background: url("https://assets.cmcmarkets.com/fonts/logo.svg") 0 0 no-repeat;
    background-size: 56px 55px; }
  .sbCMC-text {
    position: absolute;
    width: 100%;
    top: 0;
    padding: 0 70px 0 94px;
    margin-top: 12px;
    font-size: 14px;
    line-height: 18px;
    color: #333333;
    letter-spacing: 1px; }
    .sbCMC-text span {
      display: block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; }
    .sbCMC-text-store {
      font-size: 11px;
      color: #58585a; }
  .sbCMC-go {
    position: absolute;
    width: 88px;
    padding: 28px;
    top: 0;
    right: 0;
    height: 72px;
    text-align: center;
    color: #0069d2; }

/* --------------------------------------- */
/** TODO: remove this SCSS part once new SmartBanner is implemented everywhere */
/* --------------------------------------- */
/* --------------------------------------- */
#smartbanner {
  display: none;
  position: absolute;
  left: 0;
  top: -82px;
  border-bottom: 1px solid #e8e8e8;
  width: 100%;
  height: 78px;
  font-family: 'Helvetica Neue', sans-serif;
  background: -webkit-linear-gradient(top, #f4f4f4 0%, #cdcdcd 100%);
  background-image: -ms-linear-gradient(top, #F4F4F4 0%, #CDCDCD 100%);
  background-image: -moz-linear-gradient(top, #F4F4F4 0%, #CDCDCD 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  z-index: 9998;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  -webkit-text-size-adjust: none; }

#smartbanner, html.sb-animation {
  -webkit-transition: all .3s ease; }

#smartbanner .sb-container {
  margin: 0 auto; }

#smartbanner .sb-close {
  position: absolute;
  left: 5px;
  top: 5px;
  display: block;
  border: 2px solid #fff;
  width: 14px;
  height: 14px;
  font-family: 'ArialRoundedMTBold', Arial;
  font-size: 15px;
  line-height: 15px;
  text-align: center;
  color: #fff;
  background: #070707;
  text-decoration: none;
  text-shadow: none;
  border-radius: 14px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
  -webkit-font-smoothing: subpixel-antialiased; }

#smartbanner .sb-close:active {
  font-size: 13px;
  color: #aaa; }

#smartbanner .sb-icon {
  position: absolute;
  left: 30px;
  top: 10px;
  display: block;
  width: 57px;
  height: 57px;
  background: rgba(0, 0, 0, 0.6);
  background-size: cover;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }

#smartbanner.no-icon .sb-icon {
  display: none; }

#smartbanner .sb-info {
  position: absolute;
  left: 98px;
  top: 18px;
  width: 44%;
  font-size: 11px;
  line-height: 1.2em;
  font-weight: bold;
  color: #6a6a6a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); }

#smartbanner #smartbanner.no-icon .sb-info {
  left: 34px; }

#smartbanner .sb-info strong {
  display: block;
  font-size: 13px;
  color: #4d4d4d;
  line-height: 18px; }

#smartbanner .sb-info > span {
  display: block; }

#smartbanner .sb-info em {
  font-style: normal;
  text-transform: uppercase; }

#smartbanner .sb-button {
  position: absolute;
  right: 20px;
  top: 24px;
  border: 1px solid #bfbfbf;
  padding: 0 10px;
  min-width: 10%;
  height: 24px;
  font-size: 14px;
  line-height: 24px;
  text-align: center;
  font-weight: bold;
  color: #6a6a6a;
  background: -webkit-linear-gradient(top, #efefef 0%, #D8D8D8 100%);
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 0 rgba(255, 255, 255, 0.7) inset; }

#smartbanner .sb-button:active, #smartbanner .sb-button:hover {
  background: -webkit-linear-gradient(top, #D8D8D8 0%, #efefef 100%); }

#smartbanner .sb-icon.gloss:after {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  border-top: 1px solid rgba(255, 255, 255, 0.8);
  width: 100%;
  height: 50%;
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.2) 100%);
  border-radius: 10px 10px 12px 12px; }

#smartbanner.android {
  border-color: #212228;
  background: #3d3d3d url("data:image/gif;base64,R0lGODlhCAAIAIABAFVVVf///yH5BAEHAAEALAAAAAAIAAgAAAINRG4XudroGJBRsYcxKAA7");
  border-top: 5px solid #88B131;
  box-shadow: none; }

#smartbanner.android .sb-close {
  border: 0;
  width: 17px;
  height: 17px;
  line-height: 17px;
  color: #b1b1b3;
  background: #1c1e21;
  text-shadow: 0 1px 1px #000;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) inset, 0 1px 1px rgba(255, 255, 255, 0.3); }

#smartbanner.android .sb-close:active {
  color: #eee; }

#smartbanner.android .sb-info {
  color: #ccc;
  text-shadow: 0 1px 2px #000; }

#smartbanner.android .sb-info strong {
  color: #fff; }

#smartbanner.android .sb-button {
  min-width: 12%;
  border: 1px solid #DDDCDC;
  padding: 1px;
  color: #d1d1d1;
  background: none;
  border-radius: 0;
  box-shadow: none;
  min-height: 28px; }

#smartbanner.android .sb-button span {
  text-align: center;
  display: block;
  padding: 0 10px;
  background-color: #42B6C9;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#42B6C9), to(#39A9BB));
  background-image: -moz-linear-gradient(top, #42B6C9, #39A9BB);
  text-transform: none;
  text-shadow: none;
  box-shadow: none; }

#smartbanner.android .sb-button:active, #smartbanner.android .sb-button:hover {
  background: none; }

#smartbanner.android .sb-button:active span, #smartbanner.android .sb-button:hover span {
  background: #2AC7E1; }

#smartbanner.windows .sb-icon {
  border-radius: 0px; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/* This is an extraction of .carouselV2.carouselV2-twitter */
/* .carouselV2.carouselV2-twitter should have been coded so twitter listings were a separate component as below */
/* The following can replace carouselV2 twitter styles with some appropraite development and markup changes, but currently they are still in place */
.carouselV2-twitter .tweet {
  padding: 10px; }
  .carouselV2-twitter .tweet .twitter-name {
    display: none; }

.twitter {
  overflow: hidden;
  background-color: #071b36;
  position: relative;
  margin-bottom: 25px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  /* ============= VARIANTS ================= */
  /* END -light */
  /* ============= END VARIANTS ============= */
  /*&.-gradientRight, &.-gradientLeft {
        display: none;
    }

    &.viewport {
        overflow: hidden;
    }

    &.container {
        position: relative;
        background: url("https://assets.cmcmarkets.com/images/twitter-bar-small-bg.png") 84% 50% no-repeat;
    }*/
  /*&-navRight, &-navLeft {
        a:after {
            display: none;
        }
        a:hover:before {
            opacity: 1;
        }
    }
    &-navRight a:hover:before {
        right: 15px;
    }
    &-navLeft a:hover:before {
        left: 15px;
    }

    &-inline {
        text-align: center;
        a {
            display: inline-block;
            margin: 10px 0;
        }
    }

    @media (max-width: 768px) {
        &-container {
            background-image: none;
        }
        &-navRight {
            right: -41px;
        }
        &-navLeft {
            left: -41px;
        }
        &-navRight, &-navLeft {
            a:after {
                display: none;
            }
        }
        &-navRight a:hover:before {
            right: 0;
        }
        &-navLeft a:hover:before {
            left: 0;
        }
        &-navLeft:not(.inactive) a {
            &:hover:before {
                left: 0;
                opacity: 1;
            }
        }
        &-navRight:not(.inactive) a {
            &:hover:before {
                right: 0;
                opacity: 1;
            }
        }

        .join-Twitter {
            position: relative;
            @include translate(0, 0);
            width: 100%;
        }
    }*/ }
  .twitter .carouselV2.carouselV2-twitter {
    /* This is a theoretically a temporary fix whilst the original non-dynamic JSON based twitter widgets are still in place. THey require padding - the new ones don't */
    padding: 0; }
  .twitter.-dark {
    background: #0a264d; }
    .twitter.-dark .twitter-header {
      color: #0a264d;
      background: #fff; }
    .twitter.-dark .tweet .username .twitter-name {
      color: #fff; }
    .twitter.-dark .tweet .content {
      color: #f1f2f4; }
    .twitter.-dark .tweet .article-meta {
      color: #00c5e8; }
    .twitter.-dark .twitter-listing .tweet-container {
      border: 1px dashed #0069d2; }
    .twitter.-dark a:hover {
      color: #0a264d; }
      .twitter.-dark a:hover span {
        color: #0a264d; }
  .twitter.-light {
    background: #f9f9f9; }
    .twitter.-light .twitter-header {
      color: #fff;
      background: #0a264d; }
    .twitter.-light .twitter-listing .tweet-container {
      border: 1px solid #e8e9ed; }
    .twitter.-light .tweet .username .name {
      color: #0a264d; }
    .twitter.-light .tweet .username .twitter-name {
      color: #979b9e; }
    .twitter.-light .tweet .content {
      color: #1b2429; }
    .twitter.-light .tweet .article-meta {
      color: #0a264d; }
    .twitter.-light .twitter-listing .tweet-container {
      border: 1px solid #e8e9ed; }
    .twitter.-light .twitter-brand {
      color: #1b2429; }
  .twitter.-vertical {
    width: 306px; }
    .twitter.-vertical .join-twitter .Icon--twitter {
      display: none; }
    .twitter.-vertical .join-twitter .twitter-brand {
      display: none; }
  .twitter.-horizontal .twitter-listing .tweet-container {
    border: none; }
  .twitter.-horizontal .tweet {
    padding: 32px 18px; }
  .twitter.-horizontal.-dark .tweet .username .name {
    color: #00c5e8; }
  .twitter.-horizontal.-light .carouselV2.carouselV2-twitter {
    border-top: 1px solid #e8e9ed;
    border-bottom: 1px solid #e8e9ed;
    background: #f9f9f9; }
    .twitter.-horizontal.-light .carouselV2.carouselV2-twitter .carouselV2-container {
      background: none; }
  .twitter.-horizontal.-light .join-twitter .Button-copy {
    color: #0a264d; }
    .twitter.-horizontal.-light .join-twitter .Button-copy .Icon {
      color: #0a264d; }
  .twitter.-horizontal.-light .join-twitter:hover .Button-copy {
    color: #fff; }
    .twitter.-horizontal.-light .join-twitter:hover .Button-copy .Icon {
      color: #fff; }
  .twitter.-horizontal .join-twitter {
    position: absolute;
    width: auto;
    left: auto;
    top: 50%;
    right: 0;
    padding: 20px;
    -moz-transform: translate(0%, -50%);
    -o-transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
    -webkit-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
    text-align: center;
    display: inline-block; }
    .twitter.-horizontal .join-twitter .twitter-brand {
      display: block;
      margin: 20px 0 0 0; }
    @media (max-width: 768px) {
      .twitter.-horizontal .join-twitter {
        position: relative;
        -moz-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        width: 100%; } }
  .twitter.-horizontal.-flat .tweet {
    padding: 20px 18px; }
  .twitter .twitter-header {
    padding: 25px;
    margin: 0;
    font-size: 1.2rem;
    text-transform: none;
    font-family: "ubuntubold", sans-serif; }
    .twitter .twitter-header .Icon {
      float: right;
      font-size: 3rem;
      line-height: 0.4;
      vertical-align: middle; }
  .twitter .twitter-listing {
    margin: 0;
    padding: 0; }
    .twitter .twitter-listing .tweet-container {
      margin: 0 0 -1px 0;
      padding: 0; }
      .twitter .twitter-listing .tweet-container:before {
        content: ''; }
  .twitter .tweet {
    padding: 15px; }
    .twitter .tweet .username {
      margin-bottom: 8px; }
      .twitter .tweet .username .name {
        display: inline-block;
        font-family: latobold, sans-serif;
        font-size: 14px; }
      .twitter .tweet .username .twitter-name {
        display: inline-block;
        margin-left: 4px; }
    .twitter .tweet .content {
      margin-bottom: 8px; }
  .twitter .join-twitter {
    /*position: absolute;
        width: auto;
        left: auto;
        top: 50%;
        right: 0;*/
    padding: 25px;
    /*padding: 0 20px;*/
    /*@include translate(0%, -50%);*/ }
    .twitter .join-twitter .Button {
      /*&:hover span {
                color: $color-blue-1;
            }*/ }
      .twitter .join-twitter .Button .Icon {
        font-size: 3rem;
        line-height: 0.4;
        vertical-align: middle; }
      .twitter .join-twitter .Button span {
        -webkit-transition: color 0.3s ease-out;
        -moz-transition: color 0.3s ease-out;
        -ms-transition: color 0.3s ease-out;
        -o-transition: color 0.3s ease-out;
        transition: color 0.3s ease-out; }
  @media (min-width: 48em) {
    .twitter {
      /* Overwrite of some random style! */ }
      .twitter .Button {
        /* display: inline-block; */
        width: auto; } }

/* 
It seems to be unclear what this .tw, and .ring classes are used for. It appears to be an old fix that was later superseded?
If you know please replace this with a description
Otherwise we should try removing it and testing for any change
*/
.tw {
  border: 1px solid #e8e9ed;
  margin: 0;
  padding: 0;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 18px; }
  .tw li {
    position: relative;
    margin: 0;
    padding: 12px 8px 12px 68px;
    border-top: 1px solid #e8e9ed;
    list-style: none; }
    .tw li:before {
      display: none; }
    .tw li:first-child {
      border-top: none; }
    .tw li:hover {
      background: #f5f8fa; }
  .tw p {
    margin: 0;
    padding: 0;
    cursor: default; }
  .tw img {
    position: absolute;
    width: 48px;
    height: 48px;
    left: 8px;
    top: 15px;
    background: #fff;
    border-radius: 4px; }

.ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 77px;
  height: 77px; }
  .ring-mask {
    position: absolute;
    top: 0;
    left: 0;
    background: url("https://assets.cmcmarkets.com/images/mask.png"); }
  .ring-face {
    position: absolute;
    top: 0;
    left: 0; }

ul.contributors {
  max-width: 300px;
  margin: 45px auto;
  padding: 0; }
  ul.contributors li {
    position: relative;
    margin: 0 0 45px 0;
    padding: 0 0 0 95px; }
    ul.contributors li:before {
      display: none; }
  ul.contributors h3 {
    color: #00c5e8;
    line-height: inherit;
    margin: 0; }
  ul.contributors p {
    margin: 0 0 2px 0; }

@media (max-width: 768px) {
  ul.contributors {
    max-width: 100%;
    margin: 45px 0; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.article-listing {
  overflow: hidden;
  padding: 0; }
  .article-listing > .listing {
    margin: 0 0 15px 0;
    padding: 0;
    background: #f1f2f4; }
    .article-listing > .listing:before {
      content: '';
      /* Kill global list style: on that point >>> TODO: the global list style should be based on a class */ }
    .article-listing > .listing > .article-link {
      overflow: hidden;
      display: block;
      padding: 30px 25px 25px 25px; }
    .article-listing > .listing > .content {
      display: inline-block;
      vertical-align: top; }
  .article-listing .article-meta .article-meta-author {
    display: none; }
  .article-listing.-no-author > .listing {
    border: 1px solid #e8e9ed;
    background: #f9f9f9; }
  .article-listing.-no-author .article-listing-author {
    display: none; }
  .article-listing.-no-author .article-meta {
    color: #1ab99f; }
    .article-listing.-no-author .article-meta .article-meta-author {
      display: inline-block; }

.article-listing-intro > .article-listing-title {
  font-size: 1.125rem !important; }

.article-listing-intro > .article-listing-copy {
  min-height: 40px;
  margin: 0 0 1em 0;
  line-height: 1.5;
  font-size: 14px;
  color: #58585a; }

.article-listing-author {
  margin: 30px 0 0 0;
  text-align: center; }
  .article-listing-author > .author {
    margin: 0 0 15px 0; }
    @media (min-width: 768px) {
      .article-listing-author > .author {
        margin: 0 0 20px 0; } }
  @media (min-width: 768px) {
    .article-listing-author {
      margin: 0 0 0 0; } }

.sal {
  /* sal == Single article listing */
  display: block;
  position: relative;
  height: 390px;
  overflow: hidden;
  margin: 0 0 20px 0;
  border: 1px solid #e8e9ed;
  background: #fff;
  /* VARIANTS */ }
  .sal > .image {
    position: relative;
    width: 100%;
    height: 239px;
    background-size: cover;
    background-position: 50% 0%;
    /*THIS GETS MOVED TO SPECIFIC CLASSES THAT NEED IT: width: 100%;*/
    -webkit-transition: transform 0.4s ease-in-out;
    -moz-transition: transform 0.4s ease-in-out;
    -ms-transition: transform 0.4s ease-in-out;
    -o-transition: transform 0.4s ease-in-out;
    transition: transform 0.4s ease-in-out; }
    .sal > .image.img-placeholder {
      padding: 40px 20px 0;
      max-width: 200px;
      display: block;
      margin: 0 auto; }
  .sal > .overlay {
    display: none;
    /*//@include transition(opacity 0.4s ease-in-out);*/
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 163px;
    /* background: $color-blue-1; */
    /* opacity: 0;*/
    background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(50, 50, 50, 0.8)), to(rgba(80, 80, 80, 0.2)), color-stop(0.5, #333333));
    background-image: url(https://assets.cmcmarkets.com/images/bg.sal.overlay.png);
    background-repeat: repeat-x;
    background-size: contain; }
  .sal > .copy {
    position: absolute;
    bottom: 0;
    padding: 25px 25px 60px 25px;
    width: 100%;
    min-height: 151px;
    background: #fff; }
    .sal > .copy > .article-listing-copy {
      -webkit-transition: all 0.4s ease-in-out;
      -moz-transition: all 0.4s ease-in-out;
      -ms-transition: all 0.4s ease-in-out;
      -o-transition: all 0.4s ease-in-out;
      transition: all 0.4s ease-in-out;
      font-size: 0.875rem;
      /*       line-height: 1.25rem;*/
      margin-bottom: 0;
      max-height: 0;
      /* overflow: hidden;*/
      color: #1b2429;
      opacity: 0; }
    .sal > .copy > .meta {
      position: absolute;
      right: 25px;
      bottom: 25px;
      left: 25px;
      color: #1ab99f;
      font-size: 0.687rem; }
  .sal:hover {
    /*img {
            @include translate(0, -5%);
        }*/ }
    .sal:hover .overlay {
      /*opacity: 0.8;*/ }
    .sal:hover > .copy > .article-listing-copy {
      opacity: 1;
      max-height: 10rem; }
  .sal.-general-article {
    background: none !important; }
    .sal.-general-article > .copy {
      padding: 25px; }
      .sal.-general-article > .copy > .article-meta {
        display: none; }
  .sal.-analyst-article {
    background: none !important; }
  .sal.-imagebox-article {
    background: none !important; }
    .sal.-imagebox-article > .copy > .article-listing-copy {
      /*display: none;*/ }
    .sal.-imagebox-article > .copy > .article-meta {
      color: #0069d2; }
  .sal.-general-feature {
    background-size: cover;
    background-position: top center;
    /* background-image: none !important;*/ }
    .sal.-general-feature > .image {
      height: 100%; }
    .sal.-general-feature > .overlay {
      display: block; }
    .sal.-general-feature > .meta {
      display: none; }
    .sal.-general-feature > .copy {
      min-height: auto;
      padding: 25px;
      background: transparent; }
      .sal.-general-feature > .copy > .article-listing-title,
      .sal.-general-feature > .copy > .article-listing-copy {
        color: #fff; }
      .sal.-general-feature > .copy > .article-meta {
        display: none; }
    .sal.-general-feature.-img-with-light-background .overlay {
      height: 245px; }
  .sal.-analyst-feature {
    background-size: cover;
    background-position: top center;
    /* background-image: none !important;*/ }
    .sal.-analyst-feature > .image {
      height: 100%; }
    .sal.-analyst-feature > .overlay {
      display: block; }
    .sal.-analyst-feature > .meta {
      display: none; }
    .sal.-analyst-feature > .copy {
      min-height: auto;
      background: transparent; }
      .sal.-analyst-feature > .copy > .article-listing-title,
      .sal.-analyst-feature > .copy > .article-listing-copy {
        color: #fff; }
      .sal.-analyst-feature > .copy > .article-meta {
        color: #fff; }
    .sal.-analyst-feature.-img-with-light-background .overlay {
      height: 245px; }
  .sal.-video > .control {
    z-index: 2;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 85px;
    height: 85px;
    margin: -63px 0 0 -43px; }
    .sal.-video > .control:before {
      content: '';
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 2000px;
      /*                background: $color-medium-blue-1;*/
      background: #00c5e8;
      /* The Fallback */
      background: #00c5e8; }
    .sal.-video > .control:hover:before {
      background: #00c5e8;
      /* The Fallback */
      background: rgba(0, 197, 232, 0.7); }
  .sal.-video-general {
    background: none !important; }
    .sal.-video-general > .control {
      top: 35%; }
    .sal.-video-general > .copy {
      padding: 25px; }
      .sal.-video-general > .copy > .article-meta {
        display: none; }
  .sal.-video-feature {
    background-size: cover;
    background-position: top center;
    /* background-image: none !important;*/ }
    .sal.-video-feature > .image {
      height: 100%; }
    .sal.-video-feature > .overlay {
      display: block; }
    .sal.-video-feature > .meta {
      display: none; }
    .sal.-video-feature > .copy {
      min-height: auto;
      background: transparent;
      padding: 25px 25px 25px 25px; }
      .sal.-video-feature > .copy > .article-listing-title,
      .sal.-video-feature > .copy > .article-listing-copy {
        color: #fff; }
      .sal.-video-feature > .copy > .article-meta {
        color: #fff; }

.play {
  /* For video .control */
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.5em;
  height: 1.5em;
  margin: -0.75em 0 0 -0.40em;
  background-color: #fff;
  text-align: left;
  transform: rotate(45deg);
  transform: rotate(30deg) skewX(-30deg) scale(1, 0.866);
  border-top-right-radius: 30%; }
  .play:before, .play:after {
    content: '';
    position: absolute;
    background-color: inherit;
    width: 1.5em;
    height: 1.5em;
    border-top-right-radius: 30%; }
  .play:before {
    transform: rotate(-135deg) skewX(-45deg) scale(1.414, 0.707) translate(0, -50%); }
  .play:after {
    transform: rotate(135deg) skewY(-45deg) scale(0.707, 1.414) translate(50%); }
  .play:hover {
    /* background: rgba(0,0,255,.5)
        
        &:before {
            background: rgba(255,0,0,.5)
        }
        &:after {
            background: rgba(255,0,0,.5)
        }*/ }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/* .event-listing is based upon and can supersede events carousel panels (with further adjustements) version in that it is standalone as a component and reusable in all instances, including the carousels */
.event-listing {
  position: relative;
  display: block;
  color: #0069d2;
  background-color: #f9f9f9;
  height: 390px;
  padding: 25px;
  margin: 0 0 20px 0; }
  .event-listing:hover {
    color: #0069d2;
    background-color: #e8e9ed;
    transition: background-color .45s ease-out !important; }
    .event-listing:hover .Button-panel {
      width: 140%;
      transition: width .3s ease-out !important; }
  .event-listing:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-transition: opacity 0.2s ease-out;
    -moz-transition: opacity 0.2s ease-out;
    -ms-transition: opacity 0.2s ease-out;
    -o-transition: opacity 0.2s ease-out;
    transition: opacity 0.2s ease-out;
    opacity: 0; }
  .event-listing.-event {
    color: #1ab99f; }
    .event-listing.-event .event-icon {
      display: block; }
    .event-listing.-event .webinar-icon {
      display: none; }
    .event-listing.-event .article-listing-title {
      color: #1ab99f; }
    .event-listing.-event .Button {
      color: #1ab99f; }
    .event-listing.-event:hover .Button {
      color: #1ab99f; }
    .event-listing.-event:hover:before {
      background-color: #e8e9ed; }
    .event-listing.-event .Icon--dot {
      background: #1ab99f; }
  .event-listing.-webinar {
    /* @include background-image(linear-gradient(225deg,$color-green-1 0,$color-green-2 100%)); */
    /*color: #fff;*/ }
    .event-listing.-webinar .event-icon {
      display: none; }
    .event-listing.-webinar .webinar-icon {
      display: block; }
    .event-listing.-webinar .article-listing-title {
      color: #0069d2; }
    .event-listing.-webinar .Button-copy {
      color: #0069d2; }
    .event-listing.-webinar:hover .Button {
      color: #0069d2; }
    .event-listing.-webinar:hover:before {
      background-color: #e8e9ed; }
    .event-listing.-webinar .Icon--dot {
      background: #0069d2; }
  .event-listing .event-icon,
  .event-listing .webinar-icon {
    margin-bottom: 0.8rem;
    display: block;
    font-size: 2rem; }
    .event-listing .event-icon span,
    .event-listing .webinar-icon span {
      position: relative;
      top: -10px;
      margin-left: 10px;
      margin-bottom: 1rem;
      line-height: 1.125rem;
      font-family: ubuntubold, sans-serif;
      font-size: .687rem;
      letter-spacing: .025rem;
      text-transform: uppercase; }
  .event-listing > .details .day {
    font-family: ubuntulight, sans-serif;
    font-size: 6rem;
    letter-spacing: -.4rem;
    line-height: 1; }
  .event-listing > .details .month {
    display: inline-block;
    width: 3rem;
    margin-left: .5rem;
    padding: 1rem 0;
    background: #0a264d;
    border-radius: 100%;
    color: #fff;
    font-family: ubuntubold, sans-serif;
    font-size: 1rem;
    letter-spacing: .025rem;
    line-height: 1rem;
    text-align: center;
    text-transform: uppercase;
    -moz-transform: translate(0, -2rem);
    -o-transform: translate(0, -2rem);
    -ms-transform: translate(0, -2rem);
    -webkit-transform: translate(0, -2rem);
    transform: translate(0, -2rem);
    -webkit-transition: background 0.2s ease-out, color 0.2s ease-out;
    -moz-transition: background 0.2s ease-out, color 0.2s ease-out;
    -ms-transition: background 0.2s ease-out, color 0.2s ease-out;
    -o-transition: background 0.2s ease-out, color 0.2s ease-out;
    transition: background 0.2s ease-out, color 0.2s ease-out; }
  .event-listing > .meta {
    position: absolute;
    right: 25px;
    bottom: 20px;
    left: 25px; }
    .event-listing > .meta .address {
      display: block;
      margin-bottom: 8px;
      text-transform: none; }
    .event-listing > .meta .time {
      display: block; }
  .event-listing > .article-listing-title {
    position: relative;
    overflow: hidden;
    min-height: 40px;
    margin: 0.5rem 0 1rem; }
  .event-listing .Icon--dot {
    display: inline-block;
    position: relative;
    top: -2px;
    margin: 0 0.5rem 0 0.5rem;
    width: 4px;
    height: 4px;
    border-radius: 100%; }
  .event-listing .Button {
    width: 200px;
    min-width: 200px;
    max-width: inherit;
    margin: 0 0 50px 0; }

.col-md-6 .event-listing .day,
.col-md-7 .event-listing .day,
.col-md-8 .event-listing .day,
.col-md-9 .event-listing .day,
.col-md-10 .event-listing .day,
.col-md-11 .event-listing .day,
.col-md-12 .event-listing .day,
.col-lg-6 .event-listing .day,
.col-lg-7 .event-listing .day,
.col-lg-8 .event-listing .day,
.col-lg-9 .event-listing .day,
.col-lg-10 .event-listing .day,
.col-lg-11 .event-listing .day,
.col-lg-12 .event-listing .day {
  font-size: 7em;
  letter-spacing: -.8rem;
  margin-right: 8px; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.price-feed-search {
  /*padding: 0 0 25px 0;
	//padding: 15px 0 ;*/
  /*background-color: $color-white;*/
  overflow: auto;
  font-family: ubunturegular, sans-serif;
  /* Placeholders that wrap */ }
  @media (min-width: 768px) {
    .price-feed-search {
      /*padding: 40px 0;
		background-color: $color-light-grey-1;
		border-top: 1px solid $color-medium-grey-2;
		border-bottom: 1px solid $color-medium-grey-2;*/ } }
  .price-feed-search ul li {
    font-family: ubuntulight, sans-serif;
    list-style: none;
    margin: 0;
    padding: 0; }
    .price-feed-search ul li:before {
      content: ""; }
  .price-feed-search h2 {
    letter-spacing: 2.16px;
    text-align: center;
    color: #1b2429; }
    @media (min-width: 768px) {
      .price-feed-search h2 {
        text-align: right; } }
  .price-feed-search input, .price-feed-search textarea {
    outline: none; }
  .price-feed-search input::-ms-clear {
    display: none; }
  .price-feed-search ::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    white-space: pre-line;
    position: relative;
    top: -7px; }
  .price-feed-search ::-moz-placeholder {
    /* Firefox 19+ */
    white-space: pre-line;
    position: relative;
    top: -7px; }
  .price-feed-search :-ms-input-placeholder {
    /* IE 10+ */
    white-space: pre-line;
    position: relative;
    top: -7px; }
  .price-feed-search :-moz-placeholder {
    /* Firefox 18- */
    white-space: pre-line;
    position: relative;
    top: -7px; }
  .price-feed-search .Section-title-h3-regular {
    color: #1b2429;
    text-align: center;
    margin-bottom: 15px; }
    @media (min-width: 768px) {
      .price-feed-search .Section-title-h3-regular {
        text-align: right;
        margin-bottom: 0; } }
    @media (min-width: 992px) {
      .price-feed-search .Section-title-h3-regular {
        margin-top: 0px; } }
    @media (min-width: 1024px) {
      .price-feed-search .Section-title-h3-regular {
        margin-top: 0px; } }
    @media (min-width: 1200px) {
      .price-feed-search .Section-title-h3-regular {
        margin: 15px 0; } }
    @media (min-width: 768px) and (max-width: 1024px) {
      .price-feed-search .Section-title-h3-regular {
        font-size: 20px; } }
  .price-feed-search .search-form {
    display: block; }
    .price-feed-search .search-form ::placeholder {
      transform: translate3d(0, 7px, 0); }
    .price-feed-search .search-form .search-input {
      display: inline-block;
      padding: 22px 140px 17px 20px;
      width: 100%;
      border: 1px solid #C5CACF;
      border-left: 8px solid #C5CACF;
      border-radius: 0 !important;
      display: inline;
      color: #f1f2f4;
      letter-spacing: 1.56px;
      font-size: 16px;
      height: 50px;
      padding: 10px 15px;
      max-width: 78%;
      /*&.active {*/
      border: 1px solid #0a264d;
      border-left: 8px solid #0a264d;
      background: #ffffff;
      color: #0a264d;
      /*}*/ }
      @media (min-width: 375px) {
        .price-feed-search .search-form .search-input {
          font-size: 16px;
          height: 50px;
          padding: 10px 15px;
          max-width: 80%; } }
      @media (min-width: 768px) {
        .price-feed-search .search-form .search-input {
          max-width: 75%;
          height: 60px;
          font-size: 18px;
          padding: 10px 15px; } }
      @media (min-width: 992px) {
        .price-feed-search .search-form .search-input {
          max-width: 80%; } }
      @media (min-width: 1024px) {
        .price-feed-search .search-form .search-input {
          max-width: 70%; } }
      .price-feed-search .search-form .search-input .highlight {
        /* & */
        border: 1px solid #00c5e8;
        border-left: 8px solid #00c5e8;
        background: #ffffff;
        color: #0a264d; }
      .price-feed-search .search-form .search-input.error:focus {
        border: 1px solid #D0021B;
        border-left: 8px solid #D0021B;
        background: #fff3f3;
        color: #D0021B; }
      .price-feed-search .search-form .search-input:focus {
        border: 1px solid #0a264d;
        border-left: 8px solid #0a264d;
        background: #ffffff;
        color: #0a264d; }
    .price-feed-search .search-form .search-button {
      cursor: pointer;
      background-image: linear-gradient(-135deg, #0A264D 0%, #071B36 100%);
      border: 1px solid #0a264d;
      border-radius: 0;
      margin-left: -5px;
      color: #ffffff;
      height: 50px;
      padding: 10px 15px;
      vertical-align: top;
      font-size: 25px;
      /*			&:disabled {
				border: 1px solid #0a264d;
				border: none;
				background: #dddddd;
			}*/ }
      .price-feed-search .search-form .search-button.highlight {
        border: 1px solid #00c5e8;
        background: #00c5e8; }
      @media (min-width: 768px) {
        .price-feed-search .search-form .search-button {
          height: 60px;
          vertical-align: top;
          font-size: 30px;
          padding: 10px 30px; } }
      @media (min-width: 1024px) {
        .price-feed-search .search-form .search-button {
          font-size: 35px;
          padding: 10px 35px; } }
  .price-feed-search .autocomplete-error {
    border: 1px solid #ff142f;
    color: #CE0624;
    background: #FFF3F3;
    width: 100%;
    max-width: 80%;
    height: 50px;
    font-size: 14px;
    letter-spacing: 0.57px; }
    .price-feed-search .autocomplete-error li {
      padding: 10px 0; }
      @media (min-width: 768px) {
        .price-feed-search .autocomplete-error li {
          margin-top: -5px;
          padding: 0 5px; } }
      @media (min-width: 992px) {
        .price-feed-search .autocomplete-error li {
          padding: 5px;
          margin: 0px; } }
    @media (min-width: 768px) {
      .price-feed-search .autocomplete-error {
        max-width: 75%;
        height: 60px;
        font-size: 16px;
        padding: 10px 20px; } }
    @media (min-width: 992px) {
      .price-feed-search .autocomplete-error {
        max-width: 80%; } }
    @media (min-width: 1024px) {
      .price-feed-search .autocomplete-error {
        max-width: 70%; } }
  .price-feed-search .autocomplete-results {
    width: 100%;
    max-width: 80%;
    border: 1px solid #0a264d;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
    max-height: 165px;
    overflow: hidden;
    overflow-y: auto;
    color: #0a264d;
    background: #ffffff;
    padding: 0;
    cursor: pointer; }
    @media (min-width: 768px) {
      .price-feed-search .autocomplete-results {
        font-weight: bold;
        font-size: 18px;
        max-width: 75%; } }
    @media (min-width: 992px) {
      .price-feed-search .autocomplete-results {
        max-width: 80%; } }
    @media (min-width: 1024px) {
      .price-feed-search .autocomplete-results {
        max-width: 70%;
        margin-top: 0; } }
    .price-feed-search .autocomplete-results li {
      padding: 15px 10px;
      border-bottom: 1px solid #0a264d; }
      .price-feed-search .autocomplete-results li:hover {
        background: #95dae5;
        color: #ffffff; }
    .price-feed-search .autocomplete-results .selected {
      background: #00C5EB;
      color: #ffffff; }
  .price-feed-search .panel-popup-container {
    font-family: ubuntu, sans-serif;
    height: 90%;
    width: 100%;
    position: fixed;
    /* Stay in place */
    z-index: 98;
    /* Sit on top but below sticky menu */
    left: 0;
    top: 10%;
    background-color: black;
    /* Black fallback color */
    background-color: rgba(0, 0, 0, 0.8);
    /* Black w/opacity */
    overflow-x: hidden;
    /* Disable horizontal scroll */
    transition: 0.5s;
    /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */ }
    @media (min-width: 768px) {
      .price-feed-search .panel-popup-container {
        position: relative;
        max-width: 75%;
        margin-top: 15px;
        margin-bottom: 10px;
        border: 1px solid #0a264d;
        box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
        height: 100%;
        max-height: 350px;
        z-index: 102;
        /* Sit on top */ } }
    @media (min-width: 992px) {
      .price-feed-search .panel-popup-container {
        max-width: 80%;
        max-height: 310px; } }
    @media (min-width: 1024px) {
      .price-feed-search .panel-popup-container {
        max-width: 70%; } }
    .price-feed-search .panel-popup-container .overlay {
      height: 90%;
      width: 90%;
      margin: 5%;
      margin-top: 70px;
      background: #ffffff; }
      @media (min-width: 768px) {
        .price-feed-search .panel-popup-container .overlay {
          height: 100%;
          width: 100%;
          margin: 0;
          background: #ffffff;
          overflow: hidden; } }
      .price-feed-search .panel-popup-container .overlay .price-feed-popup-title {
        padding: 5px 10px 0 10px;
        background: #ffffff; }
        @media (min-width: 480px) {
          .price-feed-search .panel-popup-container .overlay .price-feed-popup-title {
            padding-right: 0; } }
        @media (min-width: 768px) {
          .price-feed-search .panel-popup-container .overlay .price-feed-popup-title {
            padding: 15px 10px; } }
        .price-feed-search .panel-popup-container .overlay .price-feed-popup-title h3 {
          color: #00c5e8;
          font-size: 18px;
          text-align: left;
          margin-top: 30px; }
          @media (min-width: 480px) {
            .price-feed-search .panel-popup-container .overlay .price-feed-popup-title h3 {
              margin-top: 40px;
              font-size: 20px; } }
          @media (min-width: 768px) {
            .price-feed-search .panel-popup-container .overlay .price-feed-popup-title h3 {
              font-size: 22px;
              margin: 0; } }
      .price-feed-search .panel-popup-container .overlay .price-feed-popup-content .price-feed-popup-close {
        float: right;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #0a264d;
        cursor: pointer;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        color: #ffffff;
        margin-right: 5px; }
        @media (min-width: 480px) {
          .price-feed-search .panel-popup-container .overlay .price-feed-popup-content .price-feed-popup-close {
            margin-right: 10px; } }
        .price-feed-search .panel-popup-container .overlay .price-feed-popup-content .price-feed-popup-close::before, .price-feed-search .panel-popup-container .overlay .price-feed-popup-content .price-feed-popup-close::after {
          content: '';
          position: absolute;
          height: 2px;
          width: 16px;
          margin-top: 14px;
          margin-left: 7px;
          background: #ffffff; }
        .price-feed-search .panel-popup-container .overlay .price-feed-popup-content .price-feed-popup-close::before {
          -moz-transform: rotate(45deg);
          -o-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
          -webkit-transform: rotate(45deg);
          transform: rotate(45deg); }
        .price-feed-search .panel-popup-container .overlay .price-feed-popup-content .price-feed-popup-close::after {
          -moz-transform: rotate(-45deg);
          -o-transform: rotate(-45deg);
          -ms-transform: rotate(-45deg);
          -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg); }
      .price-feed-search .panel-popup-container .overlay .price-feed-popup-content .price-feed-popup-sub-title {
        background: #0a264d;
        color: #ffffff;
        padding: 5px 10px;
        text-transform: uppercase;
        letter-spacing: 2px;
        font-size: 14px; }
        @media (min-width: 768px) {
          .price-feed-search .panel-popup-container .overlay .price-feed-popup-content .price-feed-popup-sub-title {
            padding-left: 10px; } }
      .price-feed-search .panel-popup-container .overlay .price-feed-popup-content .price-feed-popup-body {
        color: #58585a;
        padding: 5px 20px;
        padding: 0;
        line-height: 1.5em;
        border-bottom: 1px solid #e8e9ed; }
        @media (min-width: 480px) {
          .price-feed-search .panel-popup-container .overlay .price-feed-popup-content .price-feed-popup-body {
            padding: 5px 1px; } }
        @media (min-width: 768px) {
          .price-feed-search .panel-popup-container .overlay .price-feed-popup-content .price-feed-popup-body {
            padding: 5px 10px; } }
        @media (min-width: 992px) {
          .price-feed-search .panel-popup-container .overlay .price-feed-popup-content .price-feed-popup-body {
            padding: 0 10px; } }
        .price-feed-search .panel-popup-container .overlay .price-feed-popup-content .price-feed-popup-body h3 {
          font-weight: bold;
          margin: 10px 0; }
        .price-feed-search .panel-popup-container .overlay .price-feed-popup-content .price-feed-popup-body .product-title {
          text-transform: uppercase;
          padding: 5px 0 10px 0;
          text-align: center;
          color: #0a264d;
          font-size: 14px;
          width: 95%; }
          @media (min-width: 375px) {
            .price-feed-search .panel-popup-container .overlay .price-feed-popup-content .price-feed-popup-body .product-title {
              width: 100%;
              padding: 5px 0 10px 0;
              font-size: 16px; } }
          @media (min-width: 480px) {
            .price-feed-search .panel-popup-container .overlay .price-feed-popup-content .price-feed-popup-body .product-title {
              text-align: left;
              padding: 10px 0 20px 0; } }
          @media (min-width: 768px) {
            .price-feed-search .panel-popup-container .overlay .price-feed-popup-content .price-feed-popup-body .product-title {
              text-align: center;
              font-size: 14px; } }
          @media (min-width: 992px) {
            .price-feed-search .panel-popup-container .overlay .price-feed-popup-content .price-feed-popup-body .product-title {
              padding: 10px 0 10px 0; } }
        .price-feed-search .panel-popup-container .overlay .price-feed-popup-content .price-feed-popup-body .product-info {
          font-size: 24px;
          text-align: center;
          color: #0a264d;
          padding-bottom: 15px;
          border-bottom: 1px #e8e9ed solid;
          width: 95%; }
          .price-feed-search .panel-popup-container .overlay .price-feed-popup-content .price-feed-popup-body .product-info:last-child {
            border: none; }
          @media (min-width: 375px) {
            .price-feed-search .panel-popup-container .overlay .price-feed-popup-content .price-feed-popup-body .product-info {
              width: 100%;
              padding-bottom: 25px;
              font-size: 28px; } }
          @media (min-width: 480px) {
            .price-feed-search .panel-popup-container .overlay .price-feed-popup-content .price-feed-popup-body .product-info {
              padding-bottom: 25px;
              text-align: left; } }
          @media (min-width: 768px) {
            .price-feed-search .panel-popup-container .overlay .price-feed-popup-content .price-feed-popup-body .product-info {
              text-align: center;
              font-size: 24px;
              margin-top: 0px; } }
          @media (min-width: 992px) {
            .price-feed-search .panel-popup-container .overlay .price-feed-popup-content .price-feed-popup-body .product-info {
              font-size: 32px; } }
      .price-feed-search .panel-popup-container .overlay .price-feed-popup-content .price-feed-popup-footer {
        padding: 10px 10px;
        font-size: 18px;
        color: #00AFCF;
        border-top: 1px #e8e9ed solid;
        background: #f1f2f4; }
        .price-feed-search .panel-popup-container .overlay .price-feed-popup-content .price-feed-popup-footer p {
          margin: 0 0 5px 0; }
        .price-feed-search .panel-popup-container .overlay .price-feed-popup-content .price-feed-popup-footer .terms {
          font-size: 14px;
          color: #1b2429; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.sb-price-table-banner {
  padding: 40px 0; }
  .sb-price-table-banner .container-fluid {
    padding: 0; }
  .sb-price-table-banner ul, .sb-price-table-banner li {
    margin: 0;
    padding: 0;
    list-style: none; }
    .sb-price-table-banner ul :before, .sb-price-table-banner li :before {
      content: ""; }
  .sb-price-table-banner h2 {
    color: #0a264d; }
  .sb-price-table-banner .Section-title {
    color: #0a264d; }
  .sb-price-table-banner p {
    color: #979b9e;
    font-size: 18px; }
  .sb-price-table-banner .col-xs-15,
  .sb-price-table-banner .col-sm-15,
  .sb-price-table-banner .col-md-15,
  .sb-price-table-banner .col-lg-15 {
    overflow: hidden;
    border: none; }
    @media (min-width: 992px) {
      .sb-price-table-banner .col-xs-15,
      .sb-price-table-banner .col-sm-15,
      .sb-price-table-banner .col-md-15,
      .sb-price-table-banner .col-lg-15 {
        border-left: 1px dashed #979b9e; } }
    .sb-price-table-banner .col-xs-15:first-child,
    .sb-price-table-banner .col-sm-15:first-child,
    .sb-price-table-banner .col-md-15:first-child,
    .sb-price-table-banner .col-lg-15:first-child {
      border: none; }
  .sb-price-table-banner .price-table .price-table-container {
    background-color: #f9f9f9;
    border: none; }
    @media (min-width: 992px) {
      .sb-price-table-banner .price-table .price-table-container {
        border: 1px solid #979b9e; } }
  .sb-price-table-banner .price-table .info.active:after {
    display: block;
    content: ' ';
    background: url("https://assets.cmcmarkets.com/images/accordion-minus.png");
    background-image: url("https://assets.cmcmarkets.com/images/accordion-minus.svg"), none;
    background-size: 42px 42px;
    float: right;
    height: 42px;
    width: 42px;
    margin-left: 20px;
    margin-top: -50px; }
    @media (min-width: 992px) {
      .sb-price-table-banner .price-table .info.active:after {
        background: none; } }
  .sb-price-table-banner .price-table .info {
    background: #f1f2f4;
    padding: 15px 20px 20px 20px;
    letter-spacing: 1.5px;
    border-bottom: 2px #D8D8D8 solid;
    cursor: pointer; }
    .sb-price-table-banner .price-table .info:after {
      display: block;
      content: ' ';
      background: url("https://assets.cmcmarkets.com/images/accordion-plus.png");
      background-image: url("https://assets.cmcmarkets.com/images/accordion-plus.svg"), none;
      background-size: 42px 42px;
      float: right;
      height: 42px;
      width: 42px;
      margin-left: 20px;
      margin-top: -50px; }
      @media (min-width: 992px) {
        .sb-price-table-banner .price-table .info:after {
          background: none; } }
    @media (min-width: 992px) {
      .sb-price-table-banner .price-table .info {
        background: #0a264d;
        cursor: default;
        border: none; } }
    .sb-price-table-banner .price-table .info .title {
      margin: 5px 0;
      color: #00c5e8;
      font-family: latobold, sans-serif;
      font-size: 18px;
      letter-spacing: 1.5px;
      display: inline; }
      @media (min-width: 992px) {
        .sb-price-table-banner .price-table .info .title {
          display: block; } }
    .sb-price-table-banner .price-table .info .starting-from {
      margin: 5px 0;
      font-family: ubuntulight, sans-serif;
      color: #979b9e;
      font-size: 18px;
      padding-left: 10px;
      display: inline; }
      @media (min-width: 992px) {
        .sb-price-table-banner .price-table .info .starting-from {
          font-size: 14px; } }
    .sb-price-table-banner .price-table .info .value {
      font-family: ubuntulight, sans-serif;
      padding-top: 15px;
      font-size: 52px;
      color: #0a264d; }
      @media (min-width: 992px) {
        .sb-price-table-banner .price-table .info .value {
          font-family: ubuntulight, sans-serif;
          color: #ffffff;
          font-size: 52px; } }
      .sb-price-table-banner .price-table .info .value .points {
        font-family: ubuntulight, sans-serif;
        font-size: 24px; }
        @media (min-width: 992px) {
          .sb-price-table-banner .price-table .info .value .points {
            font-family: latobold, sans-serif;
            font-size: 26px; } }
  .sb-price-table-banner .price-table .content {
    background-color: #e8e9ed;
    font-size: 16px;
    padding: 0 20px;
    background-color: #f9f9f9; }
    @media (min-width: 992px) {
      .sb-price-table-banner .price-table .content {
        padding: 20px;
        background-color: #f9f9f9; } }
    .sb-price-table-banner .price-table .content li {
      padding: 15px 0;
      border-bottom: 1px solid #979b9e; }
      @media (min-width: 992px) {
        .sb-price-table-banner .price-table .content li {
          border-bottom: 1px solid #D8D8D8; } }
    .sb-price-table-banner .price-table .content li:last-child {
      border: none; }
  .sb-price-table-banner .price-table .content.alternative {
    background-color: #e8e9ed; }
    @media (min-width: 992px) {
      .sb-price-table-banner .price-table .content.alternative {
        background-color: #f1f2f4; } }
  .sb-price-table-banner .price-table .Button {
    margin: 15px 0;
    max-width: 220px;
    padding: 10px 0px;
    font-size: 16px; }
    @media (min-width: 480px) {
      .sb-price-table-banner .price-table .Button {
        min-width: 200px; } }
    @media (min-width: 992px) {
      .sb-price-table-banner .price-table .Button {
        min-width: 170px;
        padding: 10px 0px;
        font-size: 14px; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/** spread betting overview banner info*/
.sb-info-banner-section {
  margin-top: 25px;
  padding: 0px 5px; }
  @media (min-width: 480px) {
    .sb-info-banner-section {
      margin-top: 35px; } }
  .sb-info-banner-section .container-fluid {
    padding: 0px; }
  .sb-info-banner-section ul:before, .sb-info-banner-section li:before {
    content: ""; }
  .sb-info-banner-section h2 {
    text-align: center;
    color: #0a264d;
    margin: 5px 0; }
    @media (min-width: 992px) {
      .sb-info-banner-section h2 {
        text-align: left;
        margin: 25px 0; } }
  .sb-info-banner-section h3 {
    color: #0a264d;
    text-transform: none;
    font-size: 24px;
    margin-bottom: 0px; }
    @media (min-width: 480px) {
      .sb-info-banner-section h3 {
        margin-bottom: 20px; } }
  .sb-info-banner-section p {
    text-align: center;
    font-size: 18px;
    line-height: 30px;
    padding: 0 10px; }
    @media (min-width: 480px) {
      .sb-info-banner-section p {
        padding: 0 20px;
        text-align: left;
        font-size: 18px;
        line-height: 30px; } }
    @media (min-width: 992px) {
      .sb-info-banner-section p {
        padding-right: 80px; } }
  .sb-info-banner-section .Section-title {
    color: #58585a; }
    @media (min-width: 480px) {
      .sb-info-banner-section .Section-title {
        padding: 0; } }
    @media (min-width: 992px) {
      .sb-info-banner-section .Section-title {
        color: #0a264d; } }
  .sb-info-banner-section .betting-details {
    background: #f1f2f4;
    padding: 35px 10px 0 10px; }
    @media (min-width: 992px) {
      .sb-info-banner-section .betting-details {
        background-image: url("https://assets.cmcmarkets.com/images/details_block.png");
        background-repeat: no-repeat;
        padding-top: 40px; } }
    .sb-info-banner-section .betting-details .Section-title {
      font-family: ubunturegular, sans-serif;
      color: #0a264d;
      letter-spacing: 0;
      margin-bottom: 0; }
      @media (min-width: 992px) {
        .sb-info-banner-section .betting-details .Section-title {
          letter-spacing: 0;
          margin-bottom: 0; } }
    .sb-info-banner-section .betting-details ul {
      margin: 0;
      padding-top: 20px;
      padding-bottom: 30px;
      padding-left: 10px;
      padding-right: 10px; }
    .sb-info-banner-section .betting-details li {
      font-family: latobold, sans-serif;
      font-size: 15px;
      padding: 10px 0;
      border-bottom: 2px #ffffff solid;
      color: #0a264d;
      margin: 0; }
      @media (min-width: 992px) {
        .sb-info-banner-section .betting-details li {
          padding-bottom: 10px; } }
    .sb-info-banner-section .betting-details li:first-child {
      padding-top: 15px; }
      @media (min-width: 480px) {
        .sb-info-banner-section .betting-details li:first-child {
          border-top: 2px #ffffff solid; } }
    .sb-info-banner-section .betting-details li:last-child {
      border: none;
      padding-bottom: 0; }
      @media (min-width: 480px) {
        .sb-info-banner-section .betting-details li:last-child {
          border-bottom: 2px #ffffff solid;
          padding-bottom: 10px; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/** spread betting overview banner*/
.sb-headline-spread-banner-widget {
  background: #0a264d;
  font-family: latoregular, sans-serif;
  color: #ffffff;
  font-size: 22px;
  text-align: center;
  margin: 0px;
  padding: 40px 0 15px 0; }
  @media (min-width: 992px) {
    .sb-headline-spread-banner-widget {
      padding: 0; } }
  .sb-headline-spread-banner-widget .headline {
    margin-top: 10px; }
    @media (min-width: 992px) {
      .sb-headline-spread-banner-widget .headline {
        margin: 35px 0; } }
  .sb-headline-spread-banner-widget .points-items {
    padding: 0 55px;
    margin-top: 20px;
    margin-bottom: 20px; }
    @media (min-width: 992px) {
      .sb-headline-spread-banner-widget .points-items {
        background-image: url("https://assets.cmcmarkets.com/images/headline-spreads-separator.png");
        background-size: 150%;
        padding: 0;
        margin: 0; } }
    .sb-headline-spread-banner-widget .points-items .points-item {
      padding: 10px 0;
      border-bottom: 1px #f9f9f9 solid;
      letter-spacing: 2px;
      color: #00c5e8;
      font-size: 22px;
      font-family: latobold, sans-serif; }
      @media (min-width: 992px) {
        .sb-headline-spread-banner-widget .points-items .points-item {
          font-family: ubunturegular, sans-serif;
          font-size: 32px;
          padding: 30px 0;
          border: none;
          background-image: url("https://assets.cmcmarkets.com/images/headline-spreads-separator.png");
          background-size: 100%; } }
      .sb-headline-spread-banner-widget .points-items .points-item:last-child {
        border: none; }
      .sb-headline-spread-banner-widget .points-items .points-item .pt-label {
        font-size: 20px; }
        @media (min-width: 992px) {
          .sb-headline-spread-banner-widget .points-items .points-item .pt-label {
            font-size: 14px; } }
      .sb-headline-spread-banner-widget .points-items .points-item .index {
        text-transform: uppercase;
        font-size: 20px;
        color: #C5CACF;
        display: inline;
        font-family: ubuntulight, sans-serif;
        padding-left: 10px; }
        @media (min-width: 992px) {
          .sb-headline-spread-banner-widget .points-items .points-item .index {
            padding-left: 20px;
            font-family: latoregular, sans-serif;
            letter-spacing: 1px;
            font-size: 15px;
            text-align: center;
            display: block;
            color: #ffffff; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.sb-award-banner-widget {
  background: #0a264d;
  text-align: center;
  padding: 40px 0;
  margin: 20px 0; }
  @media (min-width: 992px) {
    .sb-award-banner-widget {
      margin: 20px 0;
      padding: 15px 0;
      padding: 0;
      margin: 0; } }
  .sb-award-banner-widget .award-info {
    display: inline-block;
    margin-bottom: 80px; }
    @media (min-width: 992px) {
      .sb-award-banner-widget .award-info {
        margin-bottom: 0px;
        margin: 20px 0 15px 0; } }
    .sb-award-banner-widget .award-info h2 {
      text-align: center;
      color: #ffffff;
      font-family: latoregular, sans-serif; }
      @media (min-width: 992px) {
        .sb-award-banner-widget .award-info h2 {
          display: inline; } }
    .sb-award-banner-widget .award-info img {
      width: 50px;
      margin: 10px auto;
      display: block; }
      @media (min-width: 992px) {
        .sb-award-banner-widget .award-info img {
          display: inline;
          margin-right: 25px; } }
      .sb-award-banner-widget .award-info img.award {
        width: 50px; }
  @media (min-width: 992px) {
    .sb-award-banner-widget .support-reevoo-badge {
      top: -55px; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.sb-cta-ready-to-switch-sb {
  background: #ffffff; }
  @media (min-width: 992px) {
    .sb-cta-ready-to-switch-sb {
      margin: 50px 0; } }
  @media (min-width: 992px) {
    .sb-cta-ready-to-switch-sb .inner-overlay {
      background: #ffffff; } }
  @media (min-width: 992px) {
    .sb-cta-ready-to-switch-sb .inner-overlay .overlay {
      background: #0a264d;
      padding: 10px 0; } }
  @media (min-width: 480px) {
    .sb-cta-ready-to-switch-sb {
      background: #f1f2f4; } }
  .sb-cta-ready-to-switch-sb .container-fluid {
    padding: 0px; }
  .sb-cta-ready-to-switch-sb ul, .sb-cta-ready-to-switch-sb li:before {
    content: "";
    padding: 0; }
  .sb-cta-ready-to-switch-sb h2 {
    font-family: ubuntulight, sans-serif;
    font-size: 30px;
    line-height: 30px; }
  .sb-cta-ready-to-switch-sb .switch-account {
    padding: 35px 20px;
    background: #0a264d;
    color: #ffffff;
    text-align: center; }
    @media (min-width: 768px) {
      .sb-cta-ready-to-switch-sb .switch-account {
        padding: 50px 20px 60px 20px; } }
    @media (min-width: 768px) {
      .sb-cta-ready-to-switch-sb .switch-account h2 {
        margin-bottom: 30px; } }
    .sb-cta-ready-to-switch-sb .switch-account p {
      font-size: 16px;
      letter-spacing: 0.8px; }
    .sb-cta-ready-to-switch-sb .switch-account .button {
      font-size: 18px;
      padding: 15px; }
      @media (min-width: 480px) {
        .sb-cta-ready-to-switch-sb .switch-account .button {
          line-height: 1.1rem;
          min-width: 290px; } }
    .sb-cta-ready-to-switch-sb .switch-account .risk-warning {
      margin-top: 10px;
      text-align: center; }
  .sb-cta-ready-to-switch-sb .more-info {
    padding: 25px 20px;
    text-align: center; }
    @media (min-width: 768px) {
      .sb-cta-ready-to-switch-sb .more-info {
        padding: 50px 20px 0 20px;
        text-align: left; } }
    .sb-cta-ready-to-switch-sb .more-info h2 {
      color: #0a264d;
      margin-bottom: 30px; }
      @media (min-width: 768px) {
        .sb-cta-ready-to-switch-sb .more-info h2 {
          margin-left: 90px; } }
    .sb-cta-ready-to-switch-sb .more-info li {
      padding: 0 0 15px 0;
      color: #00c5e8;
      font-family: latobold, sans-serif;
      font-size: 18px;
      border-bottom: 1px #D8D8D8 solid;
      text-align: left; }
      @media (min-width: 768px) {
        .sb-cta-ready-to-switch-sb .more-info li {
          margin-left: 90px;
          margin-right: 90px; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*
.sb-cost-overview-banner {
	//background: $color-blue-1;
	font-family: latoregular, sans-serif;
	color: $color-white;
	text-align: center;
	margin: 0px;
	background-image: url('https://assets.cmcmarkets.com/images/home-devices-dark-mosaic-background.png');
	//padding-top: 30px;
	height: 80px;
	padding: 30px 0 20px 0;

	@media(min-width: $desktop) {
		//padding: 30px 0 20px 0;
		padding-top: 50px;
		height: 120px;
	}

	.container-fluid{
		padding: 0;
	}

	h3{
		font-family:latoregular, sans-serif;
		text-transform: none;
		color: $color-medium-blue-1;
		font-size: 18px;
		@media(min-width: $mobile_landscape) {
			font-size: 22px;
			//padding: 30px 0 20px 0;
		}
	}


	a{
		color: $color-white;
	}

	p{
		text-align: right;
		font-size: 18px;
		@media(min-width: $mobile_landscape) {
			font-size: 22px;
			letter-spacing: 3px;
		}
		@media(min-width: $tablet) {
			text-align:right;
		}
	}

	.underline{
		padding-bottom: 3px;
		border-bottom: $color-white 1px solid;
	}

}*/
/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
@media (min-width: 768px) {
  .sb-why-spreadbet-banner {
    margin-top: 50px; } }

.sb-why-spreadbet-banner b {
  font-size: 18px; }

.sb-why-spreadbet-banner li {
  margin: 0 0 30px 0; }
  .sb-why-spreadbet-banner li:before {
    font-size: 24px;
    margin-left: -15px; }

.sb-why-spreadbet-banner p {
  font-size: 40px; }

.sb-why-spreadbet-banner .list {
  margin-left: 20px;
  padding-right: 50px; }

.sb-why-spreadbet-banner .Button {
  margin-left: 30px; }

@media (min-width: 768px) {
  .sb-why-spreadbet-banner .Section-title {
    margin-top: 70px;
    padding-left: 30px; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/** Vertical grid tabs */
.Section-vertical-grid-tabs .table {
  margin-bottom: 10px; }

.Section-vertical-grid-tabs table {
  margin-bottom: 10px; }

.Section-vertical-grid-tabs .vertical-grid-tabs {
  list-style: none;
  border: 1px solid #e8e9ed;
  margin: 0;
  padding: 0;
  margin-right: 15px;
  max-width: 320px; }
  .Section-vertical-grid-tabs .vertical-grid-tabs:focus {
    outline-width: 0; }
  @media (max-width: 767px) {
    .Section-vertical-grid-tabs .vertical-grid-tabs {
      max-width: 100%;
      margin-right: 0;
      margin-bottom: 50px; } }
  .Section-vertical-grid-tabs .vertical-grid-tabs ul, .Section-vertical-grid-tabs .vertical-grid-tabs li {
    margin: 0; }
  .Section-vertical-grid-tabs .vertical-grid-tabs ul, .Section-vertical-grid-tabs .vertical-grid-tabs li:before {
    content: "";
    padding: 0; }
  .Section-vertical-grid-tabs .vertical-grid-tabs li {
    cursor: pointer;
    border-bottom: 1px solid #e8e9ed;
    margin-bottom: 0;
    font-size: 14px;
    color: #1b2429;
    padding: 17px 60px 17px 22px;
    position: relative;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: #fff; }
    @media (max-width: 767px) {
      .Section-vertical-grid-tabs .vertical-grid-tabs li {
        color: #00c5e8; } }
    .Section-vertical-grid-tabs .vertical-grid-tabs li.active {
      color: #fff;
      background: #00c5e8; }
      @media (max-width: 767px) {
        .Section-vertical-grid-tabs .vertical-grid-tabs li.active {
          background: #fff;
          color: #00c5e8; } }
      @media (min-width: 768px) {
        .Section-vertical-grid-tabs .vertical-grid-tabs li.active:after {
          content: "";
          width: 0;
          border-top: 12px solid transparent;
          border-bottom: 10px solid transparent;
          border-left: 11px solid #00c5e8;
          position: absolute;
          right: -11px;
          top: 50%;
          margin-top: -10px; } }
    @media (max-width: 767px) {
      .Section-vertical-grid-tabs .vertical-grid-tabs li:after {
        content: "";
        position: absolute;
        top: 50%;
        width: 13px;
        height: 13px;
        background: transparent;
        border-top: 2px solid #00c5e8;
        border-right: 2px solid #00c5e8;
        border-bottom: none;
        border-left: none;
        box-shadow: 0 0 0 lightgray;
        transition: all 200ms ease;
        right: 32px;
        transform: translate3d(0, -50%, 0) rotate(135deg);
        margin-top: -5px; } }
    .Section-vertical-grid-tabs .vertical-grid-tabs li:before {
      display: none; }
    .Section-vertical-grid-tabs .vertical-grid-tabs li:last-child {
      border: none; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/** Vertical grid tabs */
.vertical-accordion {
  list-style: none;
  border: 1px solid #e8e9ed;
  border-top: none;
  padding: 0;
  background: #fff;
  max-width: 90%;
  margin-bottom: 47px; }
  .vertical-accordion li {
    padding: 0;
    margin-bottom: 0; }
    .vertical-accordion li:before {
      display: none; }
  @media (max-width: 768px) {
    .vertical-accordion {
      max-width: 100%; } }
  .vertical-accordion .question {
    font-size: 16px;
    text-transform: inherit;
    color: #00c5e8;
    border-top: 1px solid #e8e9ed;
    line-height: 25px;
    padding: 14px 52px 11px 27px;
    position: relative;
    margin: 0;
    cursor: pointer; }
    .vertical-accordion .question .cross {
      background: #00c5e8;
      height: 2px;
      position: absolute;
      width: 16px;
      display: block;
      right: 22px;
      top: 25px;
      text-indent: -999em; }
      .vertical-accordion .question .cross:after {
        background: #00c5e8;
        content: "";
        height: 16px;
        left: 7px;
        position: absolute;
        top: -7px;
        width: 2px;
        transition: all 1s;
        transform: rotate(0); }
    .vertical-accordion .question.active .cross:after {
      transform: rotate(90deg); }
    .vertical-accordion .question.active + .answer {
      display: block; }
  .vertical-accordion .answer {
    padding: 0 27px;
    display: none; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/** Box layout **/
.box-layout {
  border-bottom: 4px solid #0a264d;
  padding: 0;
  font-family: "ubuntulight", sans-serif; }
  @media (max-width: 768px) {
    .box-layout {
      border-bottom: none; } }
  .box-layout h2, .box-layout .Section-title {
    color: #0a264d;
    font-size: 30px;
    font-family: "ubuntulight", sans-serif;
    letter-spacing: 1.5px;
    line-height: 35px;
    margin-bottom: 26px; }
    @media (max-width: 992px) {
      .box-layout h2, .box-layout .Section-title {
        font-size: 24px;
        letter-spacing: 1.2px;
        line-height: 28px; } }
  .box-layout p {
    font-size: 17px;
    letter-spacing: 0.2px;
    line-height: 28px;
    padding: 0 15%;
    margin: 0; }
    @media (max-width: 992px) {
      .box-layout p {
        font-size: 15px;
        letter-spacing: 0.18px;
        line-height: 23px; } }
  .box-layout .box {
    background: #f1f2f4;
    margin-right: .3%;
    width: 33.13%;
    min-height: 315px;
    padding: 64px 0 0;
    text-align: center;
    color: #0a264d; }
    .box-layout .box:last-child {
      margin-right: 0; }
    @media (max-width: 992px) {
      .box-layout .box {
        padding: 45px 0 0; } }
    @media (max-width: 768px) {
      .box-layout .box {
        width: 100%;
        margin: 0 0 4px;
        min-height: auto;
        padding: 45px 0; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/** Gallery layout **/
.Section-gallery-2 {
  margin-top: 40px; }
  @media (max-width: 992px) {
    .Section-gallery-2 {
      display: none;
      margin-top: 30px; } }
  .Section-gallery-2 li {
    position: absolute;
    /*top: 20px;*/
    opacity: 0;
    /*transform: scale(0);*/
    transition: 1s; }
    .Section-gallery-2 li.active {
      opacity: 1;
      /*transform: scale(1);*/
      transition: 1s; }

.Section-gallery-1 {
  margin-top: 40px; }
  @media (max-width: 992px) {
    .Section-gallery-1 {
      width: 100%; } }

.gallery {
  position: relative;
  width: 600px;
  height: 430px;
  overflow: hidden;
  padding: 0;
  margin: 0 auto;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  transition-property: transform; }
  .gallery ul {
    top: 0;
    left: 0;
    width: 100%;
    padding: 0; }
    .gallery ul li {
      position: absolute;
      top: 0;
      left: 0;
      padding: 0;
      margin: 0; }
      .gallery ul li img {
        margin: 0; }
      .gallery ul li:before {
        display: none; }

.arrow {
  position: absolute;
  width: 70px;
  top: 0;
  bottom: 0;
  z-index: 2;
  font-family: 'icomoon';
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  font-size: 2.6rem;
  line-height: 70px;
  cursor: pointer; }

.arrow-right {
  right: 20px;
  position: absolute;
  width: 50px;
  height: 70px;
  margin-top: -35px;
  top: 50%;
  color: #979b9e; }
  .arrow-right:before {
    content: "\e612";
    left: 7px;
    position: relative; }

.arrow-left {
  left: 20px;
  position: absolute;
  width: 50px;
  height: 70px;
  margin-top: -35px;
  top: 50%;
  color: #979b9e; }
  .arrow-left:before {
    content: "\e617"; }

.Section--cfd-wrapper .Section-title {
  font-size: 34px; }
  @media (max-width: 768px) {
    .Section--cfd-wrapper .Section-title {
      font-size: 28px;
      margin-bottom: 6px; } }

.Section--cfd-wrapper .Section-title-h3-regular {
  text-transform: none;
  color: #000; }
  @media (max-width: 768px) {
    .Section--cfd-wrapper .Section-title-h3-regular {
      margin-bottom: 15px; } }

.Section--cfd-wrapper .intro {
  font-size: 18px;
  color: #1b2429;
  line-height: 26px;
  letter-spacing: 0.3px;
  margin-bottom: 62px; }
  @media (max-width: 768px) {
    .Section--cfd-wrapper .intro {
      margin-bottom: 30px;
      font-size: 15px; } }

.Section--cfd-wrapper .more-info-link a {
  font-size: 16px;
  line-height: 30px;
  letter-spacing: 1.38px; }

@media (max-width: 768px) {
  .Section--cfd-wrapper .more-info-link {
    text-align: center; } }

.Section--cfd-wrapper .back-to-top-link {
  display: none; }
  @media (max-width: 768px) {
    .Section--cfd-wrapper .back-to-top-link {
      display: block; } }

.Section--cfd-wrapper .arrow-up {
  padding-right: 22px; }
  .Section--cfd-wrapper .arrow-up:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 11px;
    height: 11px;
    background: transparent;
    border-top: 2px solid #00c5e8;
    border-right: 2px solid #00c5e8;
    border-bottom: none;
    border-left: none;
    box-shadow: 0 0 0 lightgray;
    transition: all 200ms ease;
    right: 0;
    transform: translate3d(0, -5%, 0) rotate(-45deg);
    margin-top: -1px; }
  .Section--cfd-wrapper .arrow-up:hover:after {
    border-top: 2px solid #fff;
    border-right: 2px solid #fff; }

.sb-feature {
  border: 1px solid #e8e9ed;
  display: block;
  margin-bottom: 18px;
  overflow: hidden;
  position: relative; }
  .sb-feature .info-corner:after {
    background: #0a264d; }
  .sb-feature .img-div {
    background: #e8e9ed; }
    .sb-feature .img-div img {
      margin: 0; }
  .sb-feature .copy-div {
    background: #fff;
    padding: 22px 27px; }
  .sb-feature h3 {
    color: #000;
    font-family: 'ubuntubold', sans-serif;
    font-size: 1.125rem;
    letter-spacing: normal;
    line-height: 1.75rem;
    margin: 0 0 10px;
    text-transform: none; }
  .sb-feature p {
    color: #58585a;
    margin-bottom: 10px; }
  .sb-feature .Button {
    margin-bottom: 0;
    margin-top: 9px;
    max-width: 300px;
    padding-bottom: 8px;
    padding-top: 7px;
    width: 100%; }

.things-you-didnt-know h3 {
  color: #D0021B; }

.info-corner {
  color: #fff;
  font-family: "latobold", sans-serif;
  font-size: 0.7rem;
  padding: 0.3rem 1rem 0.3rem 1.25rem;
  position: absolute;
  right: 0;
  text-transform: uppercase;
  top: 0;
  z-index: 3; }
  .info-corner:after {
    background: #d0011b;
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transform: skew(40deg, 0deg);
    width: 200%;
    z-index: -1; }

a.news-div .img-div,
a.sb-feature .img-div {
  position: relative; }
  a.news-div .img-div:after,
  a.sb-feature .img-div:after {
    background: rgba(10, 38, 77, 0.8);
    bottom: 0;
    content: '';
    display: block;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: opacity 0.3s;
    width: 100%; }

a.news-div:hover .img-div:after,
a.sb-feature:hover .img-div:after {
  opacity: 1; }

.similar-links {
  border: 1px solid #e8e9ed;
  margin-bottom: 28px; }
  .similar-links h3 {
    background: #f1f2f4;
    border-bottom: 1px solid #e8e9ed;
    color: #000;
    font-family: 'ubuntubold', sans-serif;
    font-size: 1.125rem;
    letter-spacing: normal;
    margin: 0;
    padding: 20px 20px 18px 25px;
    text-transform: none; }
  .similar-links ul {
    margin: 0; }
  .similar-links li {
    font-size: 1rem;
    margin-bottom: 0.875rem; }
  .similar-links div {
    padding: 32px 15px 22px 16px; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.podcast-header,
.expandable-banner-products .expandable-content.podcast-header {
  /* Expandable relates to the podcast expandable banner promo on homepage FOR Widget: "Homepage expandable | Asia Pacific Podcasts promo" */
  background: url("https://assets.cmcmarkets.com/images/artful_trader_podcast_2560x600.jpg.jpeg?a") no-repeat;
  background-size: cover;
  background-position-x: 35%;
  padding: 6rem 0 2.5rem; }
  @media (max-width: 768px) {
    .podcast-header,
    .expandable-banner-products .expandable-content.podcast-header {
      background-position-x: 22%; } }
  @media (max-width: 480px) {
    .podcast-header .article-meta,
    .expandable-banner-products .expandable-content.podcast-header .article-meta {
      text-align: center; } }
  .podcast-header .page-headline.Section-title,
  .expandable-banner-products .expandable-content.podcast-header .page-headline.Section-title {
    color: #fff;
    font-size: 44px; }
  .podcast-header .podcasts-intro,
  .expandable-banner-products .expandable-content.podcast-header .podcasts-intro {
    color: #fff;
    font-family: ubunturegular,sans-serif; }
    @media (min-width: 1230px) {
      .podcast-header .podcasts-intro,
      .expandable-banner-products .expandable-content.podcast-header .podcasts-intro {
        /* Custom size to give text orphan a sister */
        font-size: 16.2px; } }
  .podcast-header .button,
  .expandable-banner-products .expandable-content.podcast-header .button {
    margin: 0 0 1em; }
  @media (max-width: 768px) {
    .podcast-header [data-content~='social'],
    .expandable-banner-products .expandable-content.podcast-header [data-content~='social'] {
      text-align: center; } }
  .podcast-header .ShareBlock-title,
  .expandable-banner-products .expandable-content.podcast-header .ShareBlock-title {
    color: #00c5eb; }

.expandable-banner-products .expandable-content.podcast-header {
  /* Overrides for expandable banner promo as per above */
  padding: 2rem 0 2.5rem; }
  .expandable-banner-products .expandable-content.podcast-header .article-meta {
    color: #00c5e8;
    font-size: 11px;
    letter-spacing: .4pt;
    line-height: 1.125rem; }

.podast iframe {
  margin: 5px 0 10px 0; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.go-to-content-container {
  position: relative; }
  .go-to-content-container .go-to-content {
    position: absolute;
    bottom: -60px;
    width: 155px;
    margin-left: 50%;
    left: -77px;
    font-size: 14px;
    text-align: center;
    z-index: 16; }
    @media (min-width: 768px) {
      .go-to-content-container .go-to-content {
        display: none; } }
    .go-to-content-container .go-to-content a {
      display: block;
      color: #979b9e; }
      .go-to-content-container .go-to-content a:after {
        -webkit-border-radius: 100%;
        -moz-border-radius: 100%;
        border-radius: 100%;
        -webkit-transition-duration: 0.5s;
        -moz-transition-duration: 0.5s;
        transition-duration: 0.5s;
        transition-timing-function: ease-in-out;
        content: "\e60c";
        position: relative;
        display: block;
        width: 45px;
        padding: 15px 0;
        margin: 10px auto;
        background: #00c5e8;
        color: #fff;
        font-family: 'icomoon';
        font-weight: bold;
        line-height: 1;
        vertical-align: middle;
        text-align: center; }
      .go-to-content-container .go-to-content a:hover:after {
        -webkit-box-shadow: 0 0 20px #222;
        -moz-box-shadow: 0 0 20px #222;
        box-shadow: 0 0 20px #222; }

@media (max-width: 768px) {
  .bookmark-spacer {
    margin-top: 120px; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.modal-bg {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 998; }

.modal {
  display: none;
  width: 100%;
  height: 100%;
  max-width: 840px;
  padding: 30px 0;
  background: #fff;
  position: fixed;
  top: 0;
  overflow: hidden;
  z-index: 999; }
  @media (min-width: 768px) {
    .modal {
      top: 100px;
      left: 50%;
      margin-left: -400px;
      padding: 30px 10px;
      height: 80%;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px; } }
  .modal .js-modal-close {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
    z-index: 999; }
  .modal .modal-content {
    height: 100%;
    overflow-y: scroll; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/* CSS required for Reevoo reviews to be rendered - as advised on http://reevoo.github.io/docs/reevoomark/embedded-customer-experience-reviews/ */
.icons-sprite, body #reevoomark ol.questions .with-facebook .facebook .logo, body #reevoomark #ask-an-owner-answer-tab .with-facebook .facebook .logo, body #reevoomark ol.questions .from-reevoo span.org, body #reevoomark #ask-an-owner-answer-tab .from-reevoo span.org, body #reevoomark #reevoomark form.ask-an-owner .share-via-facebook span.inline-facebook-logo, body #reevoomark .retailer_review .summary li.overall.true .icon, body #reevoomark .retailer_review .summary li.overall.false .icon, body #reevoomark .retailer_review .summary li.delivery.true .icon, body #reevoomark .retailer_review .summary li.delivery.false .icon, body #reevoomark .retailer_review .summary li.collection.true .icon, body #reevoomark .retailer_review .summary li.collection.false .icon, body #reevoomark .retailer_review .summary li.customer-service.true .icon, body #reevoomark .retailer_review .summary li.customer-service.false .icon {
  background-image: url(https://cdn.mark.reevoo.com/assets/icons-s3dc9cec0f1.png);
  background-repeat: no-repeat; }

body #reevoomark div, body #reevoomark span, body #reevoomark applet, body #reevoomark object, body #reevoomark iframe, body #reevoomark h1, body #reevoomark h2, body #reevoomark h3, body #reevoomark h4, body #reevoomark h5, body #reevoomark h6, body #reevoomark p, body #reevoomark blockquote, body #reevoomark pre, body #reevoomark a, body #reevoomark abbr, body #reevoomark acronym, body #reevoomark address, body #reevoomark big, body #reevoomark cite, body #reevoomark code, body #reevoomark del, body #reevoomark dfn, body #reevoomark em, body #reevoomark font, body #reevoomark img, body #reevoomark ins, body #reevoomark kbd, body #reevoomark q, body #reevoomark s, body #reevoomark samp, body #reevoomark small, body #reevoomark strike, body #reevoomark strong, body #reevoomark sub, body #reevoomark sup, body #reevoomark tt, body #reevoomark var, body #reevoomark dl, body #reevoomark dt, body #reevoomark dd, body #reevoomark ol, body #reevoomark ul, body #reevoomark li, body #reevoomark fieldset, body #reevoomark form, body #reevoomark label, body #reevoomark legend, body #reevoomark table, body #reevoomark caption, body #reevoomark tbody, body #reevoomark tfoot, body #reevoomark thead, body #reevoomark tr, body #reevoomark th, body #reevoomark td, body #reevoomark article {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
  text-transform: none;
  width: auto;
  float: none;
  line-height: initial; }

body #reevoomark :focus {
  outline: 0; }

body #reevoomark ol, body #reevoomark ul {
  list-style: none; }

body #reevoomark table {
  border-collapse: separate;
  border-spacing: 0; }

body #reevoomark caption, body #reevoomark th, body #reevoomark td {
  text-align: left;
  font-weight: normal;
  background: inherit;
  color: inherit; }

body #reevoomark blockquote:before, body #reevoomark blockquote:after, body #reevoomark q:before, body #reevoomark q:after {
  content: ""; }

body #reevoomark blockquote, body #reevoomark q {
  quotes: "" ""; }

html.reevoomark_WBA div#reviewHeader {
  display: none; }

body #reevoomark {
  font-family: "Arial", sans-serif;
  margin: 0;
  padding: 0;
  font-size: 13px;
  background: white;
  color: black;
  font-weight: normal; }

body #reevoomark body, body #reevoomark html {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-size: 13px;
  background: white; }

body #reevoomark * {
  font-family: "Arial", sans-serif;
  font-size: 100%;
  padding: 0;
  margin: 0; }

body #reevoomark body.iframe-contents {
  background: transparent; }

body #reevoomark input.placeholder {
  color: #999; }

body #reevoomark a img {
  border: none; }

body #reevoomark a {
  color: #1278db;
  text-decoration: none; }

body #reevoomark a:hover, body #reevoomark a:focus, body #reevoomark a:active {
  text-decoration: underline; }

body #reevoomark table {
  width: 100%;
  border-collapse: collapse; }

body #reevoomark th, body #reevoomark td {
  padding: 0.5em 0.75em;
  text-align: left; }

body #reevoomark thead th {
  background-color: #f1f1f1; }

body #reevoomark thead th span {
  position: absolute;
  left: -1000em;
  width: 500em; }

body #reevoomark section, body #reevoomark article {
  display: block; }

body #reevoomark p {
  line-height: 1.5em;
  margin: 1em 0; }

body #reevoomark h1 {
  font-weight: normal;
  font-size: 18px;
  color: #FF7811;
  padding: 18px 0;
  display: block; }

body #reevoomark h2 {
  clear: both;
  margin: 0 0 1em 0;
  color: #333333; }

body #reevoomark h3 {
  font-weight: bold;
  margin: 0 0 10px;
  clear: both; }

body #reevoomark h4 {
  font-size: inherit;
  color: #333333;
  font-weight: bold;
  margin: 8px 0 4px 0; }

body #reevoomark header {
  display: block; }

body #reevoomark section.product_details {
  overflow: auto;
  zoom: 1; }

body #reevoomark section.product_details div.product-image {
  width: 90px;
  height: 90px;
  padding: 5px;
  background: #fff;
  border: 1px solid #ddd;
  margin: 0 auto; }

body #reevoomark .image-and-score-module {
  float: left;
  width: 110px;
  overflow: hidden;
  text-align: center;
  margin-right: 3%; }

body #reevoomark section.product_details div.average_score {
  width: 110px;
  height: 0;
  padding-top: 90px;
  overflow: hidden;
  background-repeat: no-repeat;
  margin: 0 auto; }

body #reevoomark section.product_details div.average_score.stars {
  width: 110px;
  height: 100%;
  padding-top: 23px;
  background-repeat: no-repeat;
  margin: 5% auto;
  color: #666; }

body #reevoomark section.product_details > section {
  display: inline-block;
  vertical-align: top;
  margin-bottom: 10px; }

body #reevoomark section.product_details section.multi-regional {
  width: 25%; }

body #reevoomark section.product_details section.multi-regional h2.toggle-dropdown {
  margin-bottom: 15px; }

body #reevoomark section.product_details section.score_breakdown {
  float: right;
  width: 70%; }

body #reevoomark section.product_details section.score_breakdown a {
  display: block;
  text-align: right;
  color: #999; }

body #reevoomark .moving-window-notice {
  padding: 20px 20px 0 20px; }

@media only screen and (max-width: 820px) {
  body #reevoomark section.product_details section.multi-regional {
    display: none; } }

@media only screen and (max-width: 590px) {
  body #reevoomark a.show-all {
    display: none !important; } }

@media only screen and (max-width: 470px) {
  body #reevoomark section.product_details section.score_breakdown {
    width: 100%; }
  body #reevoomark section.product_details > section {
    width: 83%; }
  body #reevoomark section.product_details div.product-image {
    float: left; }
  body #reevoomark section.product_details div.average_score {
    float: right; } }

body #reevoomark .scores {
  margin-bottom: 10px; }

body #reevoomark .scores th {
  text-align: right;
  font-weight: normal;
  line-height: 13px;
  padding: 5px 10px 5px 0;
  width: 55%; }

body #reevoomark .scores td {
  padding: 3px 0;
  vertical-align: middle; }

body #reevoomark .scores td div {
  display: block;
  background: #bbb;
  width: 100%; }

body #reevoomark .score-bar, body #reevoomark .facet-bar, body #reevoomark .scores td div span {
  background: #6ec148;
  padding: 0 2px;
  text-align: right;
  color: #fff;
  display: block;
  font-weight: bold;
  font-size: 12px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

body #reevoomark .score-0 td div span, body #reevoomark .score-12 td div span {
  background-color: #b9529e; }

body #reevoomark .score-1 td div span, body #reevoomark .score-13 td div span {
  background-color: #00adee; }

body #reevoomark .score-2 td div span, body #reevoomark .score-14 td div span {
  background-color: #21a029; }

body #reevoomark .score-3 td div span, body #reevoomark .score-15 td div span {
  background-color: #10ce9e; }

body #reevoomark .score-4 td div span, body #reevoomark .score-16 td div span {
  background-color: #ce6b73; }

body #reevoomark .score-5 td div span, body #reevoomark .score-17 td div span {
  background-color: #c8a274; }

body #reevoomark .score-6 td div span, body #reevoomark .score-18 td div span {
  background-color: #9ba156; }

body #reevoomark .score-7 td div span, body #reevoomark .score-19 td div span {
  background-color: #76ced9; }

body #reevoomark .score-8 td div span, body #reevoomark .score-20 td div span {
  background-color: #657f97; }

body #reevoomark .score-9 td div span, body #reevoomark .score-21 td div span {
  background-color: #888; }

body #reevoomark .score-10 td div span, body #reevoomark .score-22 td div span {
  background-color: #8dc63f; }

body #reevoomark .score-11 td div span, body #reevoomark .score-23 td div span {
  background-color: #84aeab; }

body #reevoomark table.scores .overall td div span {
  background-color: #ff7811; }

body #reevoomark .scores .value-for-money td div span {
  background-color: #feb913; }

@media only screen and (max-width: 530px) {
  body #reevoomark table.scores th {
    text-align: left;
    width: 50%;
    font-size: 11px; } }

body #reevoomark .review_options, body #reevoomark .partner_response {
  display: block;
  position: relative;
  padding: 10px;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  border-radius: 7px;
  zoom: 1;
  margin: 20px 0 10px 23%;
  width: 55%; }

@media only screen and (max-width: 590px) {
  body #reevoomark .partner_response {
    margin: 3% 0 10px 3%;
    width: auto; } }

body #reevoomark .partner_response {
  border: 5px solid #AAA; }

body #reevoomark .review_options {
  border: 10px solid #deebf5;
  background-color: #deebf5; }

body #reevoomark .partner_response:after, body #reevoomark .review_options:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  overflow: hidden; }

body #reevoomark .review_options .vcard, body #reevoomark .partner_response .partner_response_metadata {
  font-size: 11px;
  border-bottom: 1px dotted #999;
  padding-bottom: 10px;
  margin-bottom: 10px; }

body #reevoomark .review_options .vcard img.org, body #reevoomark .partner_response .partner_response_metadata img.org {
  margin-bottom: -8px; }

body #reevoomark .review_options .vcard p, body #reevoomark .partner_response .partner_response_metadata p {
  display: inline;
  margin-top: 0;
  line-height: 1.3em; }

body #reevoomark .review_options .vcard .time, body #reevoomark .partner_response .partner_response_metadata .time {
  float: right; }

body #reevoomark .review_options .vcard .fn, body #reevoomark .partner_response .partner_response_metadata .fn {
  font-size: 13px;
  margin-bottom: 10px;
  font-weight: bold; }

body #reevoomark .review_options .vcard .title, body #reevoomark .partner_response .partner_response_metadata .title {
  color: #666; }

body #reevoomark .review_options form {
  margin: 0 0 0 80px; }

body #reevoomark .partner_response p.response-text {
  margin: 0 0 1em 0;
  word-wrap: break-word; }

body #reevoomark .response-form textarea {
  width: 370px;
  padding: 5px;
  height: 5em;
  border: 0;
  margin-bottom: 10px;
  font-size: 13px;
  font-family: 'Arial', sans-serif; }

body #reevoomark .response-form p.small-print {
  font-size: 11px;
  margin-bottom: 0; }

body #reevoomark .response-form .character-count {
  float: right;
  font-size: 11px;
  line-height: 23px; }

body #reevoomark .invalid .character-count {
  font-weight: bold;
  color: #cf2332; }

body #reevoomark .retailer.vcard .review-filters {
  border-bottom: none; }

body #reevoomark .review-filters .summary {
  float: left;
  margin: 0;
  line-height: 30px; }

body #reevoomark .review-filters {
  clear: both;
  padding: 5px 20px;
  vertical-align: middle;
  position: relative;
  background: #ddd;
  color: #666; }

body #reevoomark #translation-by-google {
  float: left;
  max-width: 220px;
  margin-left: 0.5em;
  margin-top: 7px; }

body #reevoomark .review-filters .filters, body #reevoomark .review-filters p.region-links {
  float: right;
  margin: 0;
  line-height: 30px;
  vertical-align: middle; }

body #reevoomark .review-filters p.region-links {
  float: left; }

body #reevoomark .review-filters .filters label {
  margin-left: 5px;
  white-space: nowrap; }

body #reevoomark .tab .filters span.filter {
  display: inline-block;
  margin-right: 10px; }

body #reevoomark .tab .filters span.label {
  padding: 0 15px 0 0; }

@media only screen and (max-width: 590px) {
  body #reevoomark .tab .filters span.filter {
    display: none; } }

body #reevoomark a.more-by-segment {
  cursor: pointer; }

body #reevoomark #ready-to-buy {
  text-align: center; }

body #reevoomark .review-brands {
  clear: both;
  padding-bottom: 10px; }

body #reevoomark .review-brands p {
  margin: 5px 0; }

body #reevoomark .review-brands ul {
  list-style-type: none;
  padding: 0;
  margin: 0; }

body #reevoomark .review-brands li {
  padding-right: 16px;
  display: inline; }

body #reevoomark .review-brands li.last {
  padding-right: 0; }

body #reevoomark .no-reviews-available ul {
  padding: 0; }

body #reevoomark .no-reviews-available li {
  line-height: 24px;
  list-style: none; }

body #reevoomark .no-reviews-available h3 span {
  color: #666;
  font-weight: normal; }

body #reevoomark .review.highlighted {
  background-color: #DEEBF5; }

body #reevoomark .moving_window_toggle {
  padding: 20px;
  border-bottom: 1px solid #ddd;
  text-align: center; }

body #reevoomark #header:after, body #reevoomark .review-filters:after, body #reevoomark .reviewer-segments:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden; }

body #reevoomark #reevoomark .reviewer-details, body #reevoomark #header, body #reevoomark .review-filters, body #reevoomark .reviewer-segments {
  zoom: 1; }

body #reevoomark .hidden {
  display: none; }

body #reevoomark #ask-an-owner-tab-content .followup {
  padding: 5px 4px;
  padding-top: 5px; }

body #reevoomark #ask-an-owner-tab-content .followup .thanks {
  padding: 15px 0;
  text-align: center;
  font-size: 18px;
  background-color: #55555f;
  color: #ffa300; }

body #reevoomark #ask-an-owner-tab-content .followup .thanks p {
  margin: 0;
  line-height: 1.5em; }

body #reevoomark #ask-an-owner-tab-content .followup .thanks p a {
  color: #FFF;
  text-decoration: underline; }

body #reevoomark #ask-an-owner-tab-content .followup .thanks p.big-thanks {
  font-size: 28px; }

body #reevoomark #ask-an-owner-tab-content .followup .thanks p.small-thanks {
  color: white;
  padding: 0 15%; }

body #reevoomark #ask-an-owner-tab-content .flag {
  margin-left: 7px; }

body #reevoomark .followup strong {
  margin-bottom: 0.5em; }

body #reevoomark .followup .additional-question {
  position: relative;
  overflow: hidden; }

body #reevoomark .followup .additional-question.first .ask_an_owner_question {
  border: none;
  margin-top: 0; }

body #reevoomark .intro h2 {
  font-weight: normal;
  font-size: 18px;
  color: #58585a; }

body #reevoomark .ask-an-owner.tab section.tab-summary {
  padding: 0 0 7px 0;
  background-color: white; }

body #reevoomark .ask-an-owner.tab section.tab-summary #header {
  padding: 0 20px;
  background-color: #eaeaea; }

body #reevoomark .ask-an-owner.tab section.tab-summary #header h1 {
  font-weight: normal; }

body #reevoomark .ask-an-owner.tab section.tab-summary #no-search {
  text-align: center; }

body #reevoomark .ask-an-owner.tab section.tab-summary #no-search span {
  color: #ffa300;
  font-size: 18px; }

body #reevoomark .ask-an-owner.tab section.tab-summary #no-search span a {
  color: white;
  text-decoration: underline; }

body #reevoomark .ask-an-owner.tab section.tab-summary #search, body #reevoomark .ask-an-owner.tab section.tab-summary #no-search {
  padding: 20px;
  background-color: #55555f;
  border: solid 4px #eaeaea; }

body #reevoomark .ask-an-owner.tab section.tab-summary #search #keywords, body #reevoomark .ask-an-owner.tab section.tab-summary #no-search #keywords {
  padding: 10px;
  padding-bottom: 20px;
  width: 100%; }

body #reevoomark .ask-an-owner.tab section.tab-summary #search #keywords span, body #reevoomark .ask-an-owner.tab section.tab-summary #no-search #keywords span {
  font-size: 16px;
  color: #fff2eb;
  text-align: center;
  text-decoration: underline;
  font-weight: bolder; }

body #reevoomark .ask-an-owner.tab section.tab-summary #search #keywords td.last, body #reevoomark .ask-an-owner.tab section.tab-summary #no-search #keywords td.last {
  border-left: solid 1px #FD7A23; }

body #reevoomark .ask-an-owner.tab section.tab-summary #search #keywords td.last span, body #reevoomark .ask-an-owner.tab section.tab-summary #no-search #keywords td.last span {
  color: #FD7A23; }

body #reevoomark .ask-an-owner.tab section.tab-summary #search #search-form, body #reevoomark .ask-an-owner.tab section.tab-summary #no-search #search-form {
  width: 340px;
  margin: 0 auto; }

body #reevoomark .ask-an-owner.tab section.tab-summary #search #search-form input, body #reevoomark .ask-an-owner.tab section.tab-summary #no-search #search-form input {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  border: 3px solid #ff6200;
  height: 35px;
  width: 230px;
  margin-right: 10px;
  padding: 3px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -ie-border-radius: 3px;
  -moz-border-radius: 3px;
  -o-border-radius: 3px; }

body #reevoomark .ask-an-owner.tab section.tab-summary #search #search-form input:focus, body #reevoomark .ask-an-owner.tab section.tab-summary #no-search #search-form input:focus {
  outline: none; }

body #reevoomark .ask-an-owner.tab section.tab-summary #search #search-form.searched, body #reevoomark .ask-an-owner.tab section.tab-summary #no-search #search-form.searched {
  min-width: 455px; }

body #reevoomark .ask-an-owner.tab section.tab-summary #search #search-form span.view-all-questions, body #reevoomark .ask-an-owner.tab section.tab-summary #no-search #search-form span.view-all-questions {
  padding-left: 15px; }

body #reevoomark .ask-an-owner.tab section.tab-summary #search #search-form span.view-all-questions a, body #reevoomark .ask-an-owner.tab section.tab-summary #no-search #search-form span.view-all-questions a {
  font-size: 13px;
  color: #FD7A23;
  text-decoration: underline; }

body #reevoomark .ask-an-owner.tab section.tab-summary .box-shadow-container {
  height: 8px;
  padding: 0;
  overflow: hidden; }

body #reevoomark .ask-an-owner.tab section.tab-summary .box-shadow-container .box-shadow {
  height: 16px;
  top: -16px;
  position: relative;
  background-color: #eaeaea;
  -webkit-box-shadow: 0px 1px 6px 2px #666;
  -moz-box-shadow: 0px 1px 6px 2px #666;
  box-shadow: 0px 1px 6px 2px #666;
  width: 200%;
  margin-left: -50%; }

body #reevoomark .ask-an-owner.tab section.tab-summary #call-to-action {
  text-align: center;
  padding: 22px 0px;
  background-color: #eaeaea; }

body #reevoomark .ask-an-owner.tab section.tab-summary #call-to-action span.mobile {
  display: none; }

body #reevoomark .ask-an-owner.tab section.tab-summary #call-to-action span {
  font-size: 17px; }

body #reevoomark .ask-an-owner.tab section.tab-summary #call-to-action span a {
  color: #55555f;
  text-decoration: underline;
  font-weight: bold; }

body #reevoomark .ask-an-owner.tab section.tab-summary .triangle-with-shadow {
  margin: 0 auto;
  width: 100px;
  height: 45px;
  position: relative;
  overflow: hidden;
  top: -8px; }

body #reevoomark .ask-an-owner.tab section.tab-summary .triangle-with-shadow .after {
  content: "";
  position: absolute;
  width: 50px;
  height: 50px;
  background: #eaeaea;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  top: -25px;
  left: 25px;
  -webkit-box-shadow: 0px 1px 6px 2px #666;
  -moz-box-shadow: 0px 1px 6px 2px #666;
  box-shadow: 0px 1px 6px 2px #666; }

body #reevoomark #tab-container button.orange-submit-button, body #reevoomark .photo-upload-input .orange-submit-button, body #reevoomark #reevoomark form.ask-an-owner button.orange-submit-button {
  height: 35px;
  color: #FFF;
  padding: 0 20px;
  font-size: 16px;
  position: relative;
  top: 1px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -ie-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  background-color: #f70;
  background-image: linear-gradient(to top, #ff6200 47%, #ff7700 79%);
  background-image: -webkitlinear-gradient(bottom, #ff6200 47%, #ff7700 79%);
  background-image: -ielinear-gradient(bottom, #ff6200 47%, #ff7700 79%);
  background-image: -mozlinear-gradient(bottom, #ff6200 47%, #ff7700 79%);
  background-image: -olinear-gradient(bottom, #ff6200 47%, #ff7700 79%);
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.47, #ff6200), color-stop(0.79, #f70)); }

body #reevoomark #tab-container button.orange-submit-button:disabled, body #reevoomark .photo-upload-input .orange-submit-button:disabled, body #reevoomark #reevoomark form.ask-an-owner button.orange-submit-button:disabled {
  cursor: auto;
  background-color: white;
  background-image: linear-gradient(to top, rgba(255, 98, 0, 0.6) 47%, rgba(255, 119, 0, 0.6) 79%);
  background-image: -webkitlinear-gradient(bottom, rgba(255, 98, 0, 0.6) 47%, rgba(255, 119, 0, 0.6) 79%);
  background-image: -ielinear-gradient(bottom, rgba(255, 98, 0, 0.6) 47%, rgba(255, 119, 0, 0.6) 79%);
  background-image: -mozlinear-gradient(bottom, rgba(255, 98, 0, 0.6) 47%, rgba(255, 119, 0, 0.6) 79%);
  background-image: -olinear-gradient(bottom, rgba(255, 98, 0, 0.6) 47%, rgba(255, 119, 0, 0.6) 79%);
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.47, rgba(255, 98, 0, 0.6)), color-stop(0.79, rgba(255, 119, 0, 0.6))); }

body #reevoomark ul.ask-an-owner-search-suggestions {
  padding-left: 20px; }

body #reevoomark ul.ask-an-owner-search-suggestions li {
  padding: 5px 0px; }

body #reevoomark ol.questions, body #reevoomark ol.responses {
  list-style: none;
  padding: 0;
  margin: 0; }

body #reevoomark ol.questions em, body #reevoomark ol.responses em {
  font-weight: bold;
  font-style: normal; }

body #reevoomark ol.questions img, body #reevoomark ol.responses img {
  display: block;
  margin: 5px auto; }

body #reevoomark .ask-an-owner-body {
  margin: 0 auto;
  max-width: 800px;
  padding: 0 20px; }

body #reevoomark ol.questions em, body #reevoomark #ask-an-owner-answer-tab em {
  background-color: #e6c054; }

body #reevoomark ol.questions > li, body #reevoomark #ask-an-owner-answer-tab > li {
  margin-bottom: 30px;
  border-bottom: #ddd 1px solid; }

body #reevoomark ol.questions .aao-question-container, body #reevoomark #ask-an-owner-answer-tab .aao-question-container {
  margin: 30px 0;
  max-width: 530px; }

body #reevoomark ol.questions .ask_an_owner_question .aao-wrapper, body #reevoomark ol.questions .aao-question-container .aao-wrapper, body #reevoomark #ask-an-owner-answer-tab .ask_an_owner_question .aao-wrapper, body #reevoomark #ask-an-owner-answer-tab .aao-question-container .aao-wrapper {
  background-color: #ffecb6; }

body #reevoomark ol.questions .aao-wrapper .title, body #reevoomark #ask-an-owner-answer-tab .aao-wrapper .title {
  margin-bottom: 13px;
  border-bottom: 2px solid #e6c054;
  padding-bottom: 7px; }

body #reevoomark ol.questions .aao-wrapper .title .clear, body #reevoomark #ask-an-owner-answer-tab .aao-wrapper .title .clear {
  clear: both; }

body #reevoomark ol.questions .aao-wrapper .title .first_name, body #reevoomark #ask-an-owner-answer-tab .aao-wrapper .title .first_name {
  font-size: 17px;
  font-weight: bold;
  line-height: 30px;
  color: #333333; }

body #reevoomark ol.questions .right-aligned, body #reevoomark #ask-an-owner-answer-tab .right-aligned {
  float: right;
  line-height: 30px;
  font-size: 13px;
  color: #333333; }

body #reevoomark ol.questions .entry, body #reevoomark #ask-an-owner-answer-tab .entry {
  width: 85%;
  font-size: 13px;
  color: #333333;
  margin-bottom: 4px;
  word-wrap: break-word; }

body #reevoomark ol.questions .aao-question-wrapper, body #reevoomark #ask-an-owner-answer-tab .aao-question-wrapper {
  max-width: 500px;
  margin: 20px auto 20px 0;
  padding-right: 20px;
  zoom: 1; }

body #reevoomark ol.questions li ol.responses li, body #reevoomark #ask-an-owner-answer-tab li ol.responses li {
  max-width: 500px;
  margin: 20px 0 20px auto;
  zoom: 1;
  padding-left: 20px;
  list-style-type: none; }

body #reevoomark ol.questions li .fb-icon, body #reevoomark #ask-an-owner-answer-tab li .fb-icon {
  float: left; }

body #reevoomark ol.questions span.title, body #reevoomark #ask-an-owner-answer-tab span.title {
  font-style: italic; }

body #reevoomark ol.questions .aao-response-container, body #reevoomark #ask-an-owner-answer-tab .aao-response-container {
  margin: 30px 0; }

body #reevoomark ol.questions .with-facebook .aao-wrapper, body #reevoomark #ask-an-owner-answer-tab .with-facebook .aao-wrapper {
  padding-top: 20px; }

body #reevoomark ol.questions .with-facebook .facebook, body #reevoomark #ask-an-owner-answer-tab .with-facebook .facebook {
  float: left;
  position: relative;
  margin-right: 10px; }

body #reevoomark ol.questions .with-facebook .facebook .avatar, body #reevoomark #ask-an-owner-answer-tab .with-facebook .facebook .avatar {
  width: 30px;
  height: 30px; }

body #reevoomark ol.questions .with-facebook .facebook .logo, body #reevoomark #ask-an-owner-answer-tab .with-facebook .facebook .logo {
  background-position: 0 0;
  position: absolute;
  z-index: 10;
  width: 10px;
  height: 10px;
  top: 20px;
  left: 0; }

body #reevoomark ol.questions .with-facebook .vcard, body #reevoomark #ask-an-owner-answer-tab .with-facebook .vcard {
  margin-left: 10px; }

body #reevoomark ol.questions .with-facebook .meta time, body #reevoomark #ask-an-owner-answer-tab .with-facebook .meta time {
  display: block;
  text-align: left; }

body #reevoomark ol.questions .from-reevoo span.org, body #reevoomark #ask-an-owner-answer-tab .from-reevoo span.org {
  width: 67px;
  height: 13px;
  display: inline-block;
  zoom: 1;
  background-position: 0 -96px;
  overflow: hidden;
  vertical-align: middle;
  text-indent: 9999px; }

body #reevoomark ol.questions .responder, body #reevoomark #ask-an-owner-answer-tab .responder {
  width: auto;
  float: right;
  margin: -20px 0 0 0; }

body #reevoomark ol.questions .meta .fb-icon, body #reevoomark #ask-an-owner-answer-tab .meta .fb-icon {
  margin: 0 15px 0 0;
  width: 30px;
  height: 30px; }

body #reevoomark .ask_an_owner_question .meta {
  color: #999;
  margin: 0 10px 1em;
  padding-top: 0.5em; }

body #reevoomark .ask_an_owner_question .meta .author {
  color: #333333;
  line-height: 1.2em; }

body #reevoomark .ask_an_owner_question .meta .author span.fn {
  font-weight: bold; }

body #reevoomark ol.responses .meta {
  text-align: right; }

body #reevoomark ol.responses .with-facebook .facebook, body #reevoomark ol.responses .vcard {
  display: inline-block;
  text-align: right;
  *display: inline;
  zoom: 1; }

body #reevoomark form.ask-an-owner, body #reevoomark p.ask-a-question {
  margin: 20px 0px; }

body #reevoomark p.ask-a-question.intro {
  color: #FD7A23;
  font-size: 18px;
  font-weight: normal; }

body #reevoomark form.ask-an-owner, body #reevoomark .ask_an_owner_question .aao-wrapper, body #reevoomark .aao-question-container .aao-wrapper {
  background-color: #55555f;
  padding: 6px 20px 20px;
  color: #FFF;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -ie-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  font-size: 1.2em;
  line-height: 1.8; }

body #reevoomark form.ask-an-owner label, body #reevoomark .ask_an_owner_question .aao-wrapper label, body #reevoomark .aao-question-container .aao-wrapper label {
  color: white; }

body #reevoomark form.ask-an-owner span.on-behalf, body #reevoomark .ask_an_owner_question .aao-wrapper span.on-behalf, body #reevoomark .aao-question-container .aao-wrapper span.on-behalf {
  padding-left: 15px; }

body #reevoomark .ask_an_owner_question .aao-wrapper {
  background-color: #ffecb6; }

body #reevoomark .upload-photo {
  margin: 5px auto; }

body #reevoomark #photo-upload {
  margin-top: 35px;
  box-sizing: border-box; }

body #reevoomark .photo-upload-question {
  width: auto;
  float: left; }

body #reevoomark .photo-upload-input input[type="file"] {
  position: fixed;
  width: 0;
  height: 0;
  outline: none; }

body #reevoomark .photo-upload-input {
  margin-bottom: 20px; }

body #reevoomark .photo-upload-input .orange-submit-button {
  height: 35px;
  min-width: 150px;
  display: inline-block;
  line-height: 35px;
  cursor: pointer;
  box-sizing: border-box;
  background-color: #ff6200;
  background-image: none; }

body #reevoomark .take_photo {
  display: none;
  height: 100%; }

body #reevoomark .add_photo {
  display: block;
  height: 100%;
  text-align: center; }

body #reevoomark .mobile-text {
  display: none; }

body #reevoomark .desktop-text {
  display: block; }

body #reevoomark .photo-upload-image-name {
  border: 1px solid #ff6200;
  padding: 5px 10px;
  border-radius: 5px;
  display: none; }

body #reevoomark .photo-upload-image-name .text {
  display: inline; }

body #reevoomark .photo-upload-image-name .clear-upload {
  color: #FFF;
  display: inline;
  margin-left: 10px;
  margin-right: 3px;
  font-size: 16px; }

body #reevoomark .photo-upload-image-name .clear-upload:hover {
  text-decoration: none; }

body #reevoomark .photo_and_question {
  margin-bottom: 50px; }

body #reevoomark .responses li .aao-response-container .aao-wrapper, body #reevoomark #ask-an-owner-answer-tab li .aao-response-container .aao-wrapper {
  background-color: #eee;
  margin-right: 0; }

body #reevoomark .responses li .aao-response-container .title, body #reevoomark #ask-an-owner-answer-tab li .aao-response-container .title {
  border-bottom-color: #bbb; }

body #reevoomark .responses li.from-reevoo .aao-wrapper, body #reevoomark #ask-an-owner-answer-tab li.from-reevoo .aao-wrapper {
  background-color: #FF9F55; }

body #reevoomark ol.responses em, body #reevoomark #ask-an-owner-answer-tab em {
  background-color: #b9b9b9; }

body #reevoomark ol.responses .aao-response-container .aao-wrapper.from-reevoo, body #reevoomark ol.responses .aao-response-container .aao-wrapper.from-retailer, body #reevoomark #ask-an-owner-answer-tab .aao-response-container .aao-wrapper.from-reevoo, body #reevoomark #ask-an-owner-answer-tab .aao-response-container .aao-wrapper.from-retailer {
  color: #333333;
  background-color: white;
  border: #dceaf4 solid 3px; }

body #reevoomark ol.responses .aao-response-container .aao-wrapper.from-reevoo em, body #reevoomark ol.responses .aao-response-container .aao-wrapper.from-retailer em, body #reevoomark #ask-an-owner-answer-tab .aao-response-container .aao-wrapper.from-reevoo em, body #reevoomark #ask-an-owner-answer-tab .aao-response-container .aao-wrapper.from-retailer em {
  background-color: #ccd8e0; }

body #reevoomark ol.responses .aao-response-container .aao-wrapper.from-reevoo .job-title, body #reevoomark ol.responses .aao-response-container .aao-wrapper.from-retailer .job-title, body #reevoomark #ask-an-owner-answer-tab .aao-response-container .aao-wrapper.from-reevoo .job-title, body #reevoomark #ask-an-owner-answer-tab .aao-response-container .aao-wrapper.from-retailer .job-title {
  color: #333333; }

body #reevoomark ol.responses .aao-response-container .aao-wrapper.from-reevoo .title, body #reevoomark ol.responses .aao-response-container .aao-wrapper.from-retailer .title, body #reevoomark #ask-an-owner-answer-tab .aao-response-container .aao-wrapper.from-reevoo .title, body #reevoomark #ask-an-owner-answer-tab .aao-response-container .aao-wrapper.from-retailer .title {
  border-bottom-color: #dceaf4; }

body #reevoomark ol.responses .aao-response-container .aao-wrapper.from-reevoo span.org img, body #reevoomark ol.responses .aao-response-container .aao-wrapper.from-retailer span.org img, body #reevoomark #ask-an-owner-answer-tab .aao-response-container .aao-wrapper.from-reevoo span.org img, body #reevoomark #ask-an-owner-answer-tab .aao-response-container .aao-wrapper.from-retailer span.org img {
  vertical-align: middle;
  margin-left: 3px;
  max-height: 40px; }

body #reevoomark form.aao-helpfulness {
  display: inline-block;
  zoom: 1;
  *display: inline;
  margin: 0 2px; }

body #reevoomark .ask-an-owner-voting {
  padding-top: 6px;
  margin: 8px 0; }

body #reevoomark .ask-an-owner-voting.hidden {
  display: none; }

body #reevoomark .ask-an-owner-voting span {
  vertical-align: middle;
  font-size: 12px;
  text-align: left;
  display: inline-block;
  zoom: 1;
  color: #999;
  *display: inline; }

body #reevoomark .ask-an-owner-voting span.status {
  margin-left: 5px; }

body #reevoomark #reevoomark .ask-an-owner-voting button.greyed-out {
  color: #ccc;
  background: #eee;
  border-color: #eee; }

body #reevoomark #reevoomark .ask-an-owner-voting .selected button {
  color: #000; }

body #reevoomark #reevoomark .ask-an-owner-voting button {
  zoom: 1;
  display: inline;
  display: inline-block;
  cursor: pointer;
  background: #ddd;
  margin-right: 2px;
  height: 16px; }

body #reevoomark #reevoomark .ask-an-owner-voting button.upvote {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  -webkit-border-top-right-radius: 0;
  -webkit-border-bottom-right-radius: 0;
  -ie-border-top-right-radius: 0;
  -ie-border-bottom-right-radius: 0;
  -moz-border-top-right-radius: 0;
  -moz-border-bottom-right-radius: 0;
  -o-border-top-right-radius: 0;
  -o-border-bottom-right-radius: 0; }

body #reevoomark #reevoomark .ask-an-owner-voting button.downvote {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  -webkit-border-top-left-radius: 0;
  -webkit-border-bottom-left-radius: 0;
  -ie-border-top-left-radius: 0;
  -ie-border-bottom-left-radius: 0;
  -moz-border-top-left-radius: 0;
  -moz-border-bottom-left-radius: 0;
  -o-border-top-left-radius: 0;
  -o-border-bottom-left-radius: 0; }

body #reevoomark #reevoomark .ask-an-owner-voting .submitted.complete button {
  cursor: default; }

body #reevoomark #reevoomark form.ask-an-owner input.text {
  background: #FFFFFF;
  height: auto;
  border: none;
  margin: 0.75em 0 0;
  padding: 4px; }

body #reevoomark #reevoomark form.ask-an-owner #question_question {
  border-radius: 5px;
  padding: 4px;
  box-sizing: border-box; }

body #reevoomark #reevoomark form.ask-an-owner .share-via-facebook {
  zoom: 1; }

body #reevoomark #reevoomark form.ask-an-owner .share-via-facebook span.inline-facebook-logo {
  background-position: 0 -137px;
  width: 27px;
  height: 27px;
  margin: -8px 10px;
  display: inline-block; }

body #reevoomark #reevoomark form.ask-an-owner:after {
  content: '.';
  display: block;
  clear: both;
  visibility: hidden;
  font-size: 0; }

body #reevoomark #reevoomark form.ask-an-owner .name-and-email {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 30px; }

body #reevoomark #reevoomark form.ask-an-owner .name-and-email .name {
  width: 40%;
  position: absolute; }

body #reevoomark #reevoomark form.ask-an-owner .name-and-email .email {
  box-sizing: border-box;
  width: 60%;
  position: absolute;
  right: 0;
  padding-left: 10px; }

body #reevoomark #reevoomark form.ask-an-owner .name-and-email input[name='question[first_name]'], body #reevoomark #reevoomark form.ask-an-owner .name-and-email input[name="response[first_name]"] {
  width: 100%;
  height: 100%;
  box-sizing: border-box; }

body #reevoomark #reevoomark form.ask-an-owner .name-and-email input[name='question[email]'], body #reevoomark #reevoomark form.ask-an-owner .name-and-email input[name="response[job_title]"] {
  width: 100%;
  height: 100%;
  box-sizing: border-box; }

body #reevoomark #reevoomark form.ask-an-owner p {
  line-height: 1.25em; }

body #reevoomark #reevoomark form.ask-an-owner p.call-to-action {
  clear: both;
  font-size: 15px; }

body #reevoomark #reevoomark form.ask-an-owner p.call-to-action a {
  color: #FFF;
  text-decoration: underline; }

body #reevoomark #reevoomark form.ask-an-owner .buttons {
  margin-top: 25px; }

body #reevoomark form.answer.ask-an-owner label {
  display: block; }

body #reevoomark form.ask-an-owner label.asker-information {
  display: inline;
  float: left;
  margin: 0.5em 8px 0.5em 0;
  width: 30%; }

body #reevoomark form.ask-an-owner label.email {
  float: right;
  width: 60%; }

body #reevoomark form.ask-an-owner label.asker-information input {
  display: block;
  width: 100%;
  margin-top: 0; }

body #reevoomark .ie form.ask-an-owner textarea {
  margin-left: 10px; }

body #reevoomark form.ask-an-owner textarea {
  display: block;
  width: 100%;
  height: 6em;
  margin: 0.75em 0; }

body #reevoomark form.answer.ask-an-owner textarea {
  margin-top: 20px; }

body #reevoomark #ask-an-owner-answer-tab .aao-response-container {
  padding-left: 40%; }

body #reevoomark #ask-an-owner-answer-tab .product-info {
  float: right;
  padding-left: 10px;
  margin-bottom: 2px; }

body #reevoomark #ask-an-owner-answer-tab .float-left p {
  margin-top: 32px;
  color: #FD7A23;
  font-size: 18px; }

body #reevoomark #ask-an-owner-answer-tab .product-image {
  border: 1px solid #bbb;
  margin-top: 5px; }

body #reevoomark #ask-an-owner-answer-tab .clear {
  clear: both; }

body #reevoomark #ask-an-owner-answer-tab .product-info p {
  margin: 0px; }

body #reevoomark #ask-an-owner-answer-tab .error {
  color: #ffa300; }

body #reevoomark #ask-an-owner-answer-tab .error::-webkit-input-placeholder {
  color: red; }

body #reevoomark #ask-an-owner-answer-tab .error:-moz-placeholder {
  color: red; }

body #reevoomark #ask-an-owner-answer-tab .error::-moz-placeholder {
  color: red; }

body #reevoomark #ask-an-owner-answer-tab .error:-ms-input-placeholder {
  color: red; }

body #reevoomark #ask-a-question label.error {
  border: 2px solid red; }

body #reevoomark #ask-a-question label.error::-webkit-input-placeholder {
  color: red; }

body #reevoomark #ask-a-question label.error:-moz-placeholder {
  color: red; }

body #reevoomark #ask-a-question label.error::-moz-placeholder {
  color: red; }

body #reevoomark #ask-a-question label.error:-ms-input-placeholder {
  color: red; }

body #reevoomark #ask-a-question textarea.error, body #reevoomark #ask-a-question input.error {
  border: 1px solid #cd2332; }

@media only screen and (max-width: 590px) {
  body #reevoomark ol.questions .aao-wrapper {
    max-width: 100%;
    margin: 20px 0; }
  body #reevoomark form.ask-an-owner label.asker-information, body #reevoomark form.answer.ask-an-owner label {
    display: block;
    float: none;
    width: 100%;
    margin-right: 8px; }
  body #reevoomark .ask-an-owner-voting {
    display: none; } }

body #reevoomark #answer-a-question.crushed {
  height: 1px;
  padding: 0 10px;
  background-color: black; }

body #reevoomark #opt-out {
  margin: 0 1em; }

body #reevoomark #contact-settings {
  color: #ff7811;
  font-size: 1.5em;
  font-weight: normal; }

body #reevoomark #ask-an-owner-confirmation p, body #reevoomark #visit-reevoo, body #reevoomark #contact-settings {
  padding-top: 2em; }

body #reevoomark #change-settings {
  width: 70%; }

body #reevoomark #contact-settings, body #reevoomark #visit-reevoo, body #reevoomark #ask-an-owner-confirmation p {
  border-top: 1px dotted #999; }

body #reevoomark #ask-an-owner-logo {
  position: absolute;
  top: 20px;
  right: 20px; }

body #reevoomark #ask-an-owner-answer-tab .fake-tab-padding {
  padding-right: 17%;
  padding-top: 45px; }

@media only screen and (max-width: 640px) {
  body #reevoomark #ask-an-owner-answer-tab .fake-tab-padding {
    padding-top: 0px; }
  body #reevoomark #ask-an-owner-answer-tab .product-info {
    float: left; } }

@media only screen and (max-width: 470px) {
  body #reevoomark p.ask-a-question.intro br {
    padding: 20px 0;
    line-height: 2em; }
  body #reevoomark section.tab-summary #header {
    padding: 0 10px; }
  body #reevoomark section.tab-summary #header h1 {
    padding: 10px 0;
    font-size: 17px; }
  body #reevoomark section.tab-summary #header h1 span {
    display: none; }
  body #reevoomark section.tab-summary #search {
    padding: 10px; }
  body #reevoomark section.tab-summary #search #search-form span.view-all-questions {
    padding-left: 0 !important;
    padding-top: 10px;
    display: block; }
  body #reevoomark section.tab-summary #call-to-action {
    padding: 3px 10px 8px 10px; }
  body #reevoomark section.tab-summary #call-to-action span.mobile {
    display: inline; }
  body #reevoomark section.tab-summary #call-to-action span.desktop {
    display: none; }
  body #reevoomark section.tab-summary #search #search-form input[type='search'] {
    width: 51% !important; }
  body #reevoomark section.tab-summary #search #search-form.searched input[type='search'] {
    width: 38% !important; }
  body #reevoomark #reevoomark form.ask-an-owner .name-and-email input[name='question[email]'], body #reevoomark #reevoomark form.ask-an-owner .name-and-email input[name="response[job_title]"] {
    margin-left: 0; } }

@media only screen and (max-width: 530px) {
  body #reevoomark p.ask-a-question.intro br {
    padding: 20px 0;
    line-height: 2em; }
  body #reevoomark section.tab-summary #header {
    padding: 0 10px; }
  body #reevoomark section.tab-summary #header h1 {
    padding: 10px 0;
    font-size: 17px; }
  body #reevoomark section.tab-summary #header h1 span {
    display: none; }
  body #reevoomark section.tab-summary #search {
    padding: 10px; }
  body #reevoomark section.tab-summary #search #search-form span.view-all-questions {
    padding-left: 0 !important;
    padding-top: 10px;
    display: block; }
  body #reevoomark section.tab-summary #call-to-action {
    padding: 3px 10px 8px 10px; }
  body #reevoomark section.tab-summary #call-to-action span.mobile {
    display: inline; }
  body #reevoomark section.tab-summary #call-to-action span.desktop {
    display: none; }
  body #reevoomark section.tab-summary #search #search-form {
    width: 100%; }
  body #reevoomark section.tab-summary #search #search-form input {
    width: 76%; } }

body #reevoomark .thanks .aao-question-container {
  max-width: 800px; }

body #reevoomark .thanks .aao-question-container .button.orange {
  float: right;
  display: block;
  position: relative;
  top: -15px; }

body #reevoomark img.loading {
  display: none;
  padding-left: 10px; }

body #reevoomark .photos {
  text-align: center; }

body #reevoomark .photos .photo-frame {
  display: inline-block; }

body #reevoomark .photos .photo-frame .caption {
  font-style: italic;
  color: black; }

@media only screen and (max-width: 590px) {
  body #reevoomark .mobile-text, body #reevoomark .take_photo {
    display: block; }
  body #reevoomark .desktop-text, body #reevoomark .add_photo {
    display: none; }
  body #reevoomark .photo-upload-input {
    text-align: center;
    width: 100%; }
  body #reevoomark .photo-upload-input .orange-submit-button {
    height: 70px;
    width: 100%;
    line-height: 70px; }
  body #reevoomark #reevoomark form.ask-an-owner .name-and-email .name, body #reevoomark #reevoomark form.ask-an-owner .name-and-email .email {
    width: 100%;
    position: relative; }
  body #reevoomark #reevoomark form.ask-an-owner .name-and-email .email {
    padding-left: 0; } }

body #reevoomark .retailer_review .summary {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 11px;
  color: #666;
  float: left; }

body #reevoomark .retailer_review .attribution-container, body #reevoomark .retailer_review .comment {
  margin-top: 0;
  margin-left: 135px; }

body #reevoomark .retailer_review .attribution .town {
  font-weight: normal;
  padding-left: 10px;
  color: #999; }

body #reevoomark .retailer_review .summary:after {
  content: '';
  clear: both;
  display: block; }

body #reevoomark .retailer_review .summary li {
  position: relative;
  padding-left: 20px;
  margin-right: 20px;
  margin-bottom: 10px;
  width: 95px;
  line-height: 1.5; }

body #reevoomark .retailer_review .summary li.customer-service {
  margin-right: 0; }

body #reevoomark .retailer_review .summary li.nil {
  color: #ccc; }

body #reevoomark .retailer_review.reevoo_review .summary, body #reevoomark .retailer_review .purchase_date {
  color: #999;
  font-size: 11px; }

body #reevoomark .retailer_review .purchase_date, body #reevoomark .retailer_review .review-content {
  display: inline-block;
  *display: inline;
  zoom: 1;
  vertical-align: top; }

body #reevoomark .retailer_review .review-content {
  width: 80%; }

body #reevoomark .retailer_review .purchase_date {
  border-left: 1px solid #eaeaea;
  padding-left: 10px;
  width: 17%; }

body #reevoomark .retailer_review .purchase_date .date {
  display: block; }

@media only screen and (max-width: 820px) {
  body #reevoomark .retailer-reviews.tab .retailer_review .summary li.delivery, body #reevoomark .retailer-reviews.tab .retailer_review .summary li.customer-service {
    display: block !important; }
  body #reevoomark .retailer-reviews.tab .retailer_review .service-review-details {
    display: none; } }

@media only screen and (max-width: 530px) {
  body #reevoomark .retailer_review .review-content, body #reevoomark .retailer_review .purchase_date {
    width: auto !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    border: none !important;
    margin-top: 0 !important;
    max-width: none !important; }
  body #reevoomark .retailer_review .purchase_date .date {
    display: inline !important; }
  body #reevoomark .retailer_review .summary li {
    width: auto;
    display: inline-block; }
  body #reevoomark .retailer_review .review-content {
    display: box;
    display: -moz-box;
    display: -webkit-box;
    box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-box-orient: vertical; }
  body #reevoomark .retailer_review .attribution-container {
    box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -webkit-box-ordinal-group: 1;
    margin-left: 0; }
  body #reevoomark .retailer_review .summary {
    float: none !important;
    box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -webkit-box-ordinal-group: 2; }
  body #reevoomark .retailer_review .comment {
    box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    -webkit-box-ordinal-group: 3;
    margin-left: 0; }
  body #reevoomark .retailer_review .summary .response-text span {
    display: block; }
  body #reevoomark .retailer-reviews.tab .retailer_review .summary li.delivery, body #reevoomark .retailer-reviews.tab .retailer_review .summary li.customer-service {
    display: inline-block !important; } }

body #reevoomark .retailer_review .summary li .icon {
  position: absolute;
  top: 3px;
  left: 0;
  display: block;
  width: 15px;
  height: 15px; }

body #reevoomark .retailer_review .summary li.overall.true .icon {
  background-position: 0 -312px; }

body #reevoomark .retailer_review .summary li.overall.false .icon {
  background-position: 0 -267px; }

body #reevoomark .retailer_review .summary li.delivery.true .icon {
  background-position: 0 -297px; }

body #reevoomark .retailer_review .summary li.delivery.false .icon {
  background-position: 0 -252px; }

body #reevoomark .retailer_review .summary li.collection.true .icon {
  background-position: 0 -297px; }

body #reevoomark .retailer_review .summary li.collection.false .icon {
  background-position: 0 -252px; }

body #reevoomark .retailer_review .summary li.customer-service.true .icon {
  background-position: 0 -282px; }

body #reevoomark .retailer_review .summary li.customer-service.false .icon {
  background-position: 0 -237px; }

body #reevoomark #retailer-reviews-tab-content .old-review-notice {
  display: block;
  border-bottom: 1px dotted #999;
  padding: 10px 5px 30px; }

body #reevoomark #service-review-response {
  background-color: #fff;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  padding: 10px 15px;
  font-size: 11px;
  color: #333333;
  width: 60%;
  margin: 20px auto; }

body #reevoomark #service-review-response .matador {
  width: 30%;
  zoom: 1;
  display: inline-block;
  *display: inline;
  line-height: 1.5em; }

body #reevoomark #service-review-response .retailer-name {
  font-weight: bold;
  display: block; }

body #reevoomark #service-review-response .timestamp {
  display: block;
  color: #666; }

body #reevoomark #service-review-response p {
  zoom: 1;
  display: inline-block;
  *display: inline;
  margin: 0;
  vertical-align: top;
  width: 65%; }

body #reevoomark .retailer_review .service-review-details {
  margin-top: 0;
  margin-left: 135px; }

body #reevoomark .retailer-reviews.tab .retailer_review .summary li.delivery, body #reevoomark .retailer-reviews.tab .retailer_review .summary li.customer-service {
  display: none; }

body #reevoomark .retailer_review .service-review-details li {
  width: 160px !important;
  display: block !important; }

body #reevoomark .show-all-service-reviews-details {
  color: #999;
  text-decoration: none;
  font-size: 12px; }

body #reevoomark .retailer-reviews-show-all {
  padding-bottom: 10px; }

body #reevoomark .retailer_review .score-bar-label, body #reevoomark .retailer_review .score-bar-meter {
  display: inline-block;
  width: 150px; }

body #reevoomark .retailer_review .score-bar-meter {
  background: #bbb; }

body #reevoomark .retailer_review .service-score-breakdown.summary {
  clear: both;
  margin-top: 10px; }

body #reevoomark .retailer-reviews.tab .retailer_review .toggle-score-breakdown.tiptip {
  float: left; }

body #reevoomark .retailer-details .vcard.retailer {
  font-size: 12px;
  color: #666;
  line-height: 1.5;
  display: inline-block;
  *display: inline;
  zoom: 1;
  vertical-align: top; }

body #reevoomark .retailer-details .retailer-logo {
  padding: 10px;
  background-color: #fff;
  border-radius: 15px;
  display: inline-block; }

body #reevoomark .retailer-details .show-all-scores-section {
  width: 200px; }

body #reevoomark .retailer-details .show-all.all-scores {
  color: #999; }

body #reevoomark .retailer-details .vcard.retailer .branch_name {
  font-size: 12px;
  text-align: center;
  width: 140px; }

@media only screen and (max-width: 820px) {
  body #reevoomark .retailer-details .vcard.retailer {
    display: none; } }

body #reevoomark .retailer-details .vcard.retailer dt, body #reevoomark .retailer-details .vcard.retailer dd {
  margin: 0;
  padding: 0; }

body #reevoomark .retailer-details .vcard.retailer dd {
  margin-bottom: 10px; }

body #reevoomark .retailer-details ul.scores {
  list-style: none;
  display: inline-block;
  *display: inline;
  zoom: 1; }

body #reevoomark .retailer-details ul.scores li {
  display: block;
  float: left;
  margin-right: 20px;
  font-size: 16px; }

body #reevoomark .retailer-details ul.scores li p {
  width: 160px; }

body #reevoomark .retailer-details ul.scores h2 {
  color: #999;
  text-transform: uppercase;
  font-size: 0.7em; }

body #reevoomark .retailer-details ul.scores p {
  color: #666;
  font-size: 0.9em; }

body #reevoomark .retailer-details ul.scores.travel_agent li.overall {
  text-align: left;
  width: 100%;
  font-family: inherit;
  margin-right: 0px; }

body #reevoomark .retailer-details ul.scores.travel_agent li.overall img, body #reevoomark .retailer-details ul.scores.travel_agent li.overall p {
  display: inline-block;
  vertical-align: middle;
  float: left;
  margin-top: 15px; }

body #reevoomark .retailer-details ul.scores.travel_agent li.overall p {
  color: #333333;
  margin-left: 140px;
  display: block;
  float: none; }

body #reevoomark body.automotive #reevoomark li.customer-service {
  display: none; }

body #reevoomark .scores .retailer-reviews h2 {
  height: 2.3em;
  display: table-cell;
  vertical-align: bottom;
  width: 140px;
  padding-bottom: 1em; }

@media only screen and (max-width: 530px) {
  body #reevoomark .retailer-details ul.scores {
    width: 100%; }
  body #reevoomark .retailer-details ul.scores li {
    float: none; }
  body #reevoomark .retailer-details ul.scores li img {
    float: left;
    margin-right: 6%;
    margin-bottom: 6%; }
  body #reevoomark .retailer-details ul.scores li p {
    width: auto;
    margin-top: 0px; }
  body #reevoomark #service-review-response p, body #reevoomark body #service-review-response .matador {
    width: 100%; }
  body #reevoomark #service-review-response {
    width: 90%; } }

@media only screen and (max-width: 300px) {
  body #reevoomark .retailer-details .scores p {
    clear: left; } }

body #reevoomark .retailer-details .scores .respondents {
  font-size: 0.7em; }

body #reevoomark .button_container a.her span {
  background-color: #fade00;
  border-color: #fade00;
  color: black; }

body #reevoomark .pagination {
  padding: 15px 0;
  text-align: center;
  background: #ddd;
  margin-top: -1px; }

body #reevoomark .pagination em, body #reevoomark .pagination a {
  border-radius: 3px;
  -o-border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ie-border-radius: 3px;
  margin-right: 5px;
  font-style: normal;
  font-weight: bold;
  padding: 5px 9px;
  color: #999; }

body #reevoomark .pagination a:hover {
  background: white; }

body #reevoomark .pagination em {
  background: #999;
  color: white; }

body #reevoomark .pagination span.disabled {
  display: none; }

@media only screen and (max-width: 820px) {
  body #reevoomark iframe {
    height: 575px; }
  body #reevoomark .embedded-non-paginated .retailer_review .summary li.delivery, body #reevoomark .embedded-non-paginated .retailer_review .summary li.customer-service {
    display: block; }
  body #reevoomark .embedded-paginated .retailer_review .summary li.delivery, body #reevoomark .embedded-paginated .retailer_review .summary li.customer-service {
    display: none; } }

@media only screen and (max-width: 590px) {
  body #reevoomark iframe {
    height: 575px; }
  body #reevoomark .embedded-non-paginated .retailer_review .summary li.delivery, body #reevoomark .embedded-non-paginated .retailer_review .summary li.customer-service {
    display: block; }
  body #reevoomark .embedded-paginated .retailer_review .summary li.delivery, body #reevoomark .embedded-paginated .retailer_review .summary li.customer-service {
    display: none; }
  body #reevoomark iframe {
    height: 540px; }
  body #reevoomark .filters span.label {
    display: none !important; }
  body #reevoomark article.reevoo_review > section.review-content dl dt {
    display: block !important;
    width: 0 !important;
    min-width: 0 !important; }
  body #reevoomark .reevoo_review .review-options {
    margin-left: 0; }
  body #reevoomark article.reevoo_review > section.purchase_date {
    padding: 0;
    border: none;
    display: block;
    margin: 5px 0 0 20px;
    max-width: 100%;
    width: auto; }
  body #reevoomark article.reevoo_review > section.purchase_date .date {
    display: inline; }
  body #reevoomark article.reevoo_review > section.review-content {
    display: block !important;
    margin: 5px 0 !important;
    width: 100% !important; }
  body #reevoomark article.reevoo_review section.overall-scores {
    width: auto;
    float: left;
    margin-top: 6px; }
  body #reevoomark article.reevoo_review .overall_score {
    margin-left: 0 !important; }
  body #reevoomark article.reevoo_review .review-options {
    display: none; }
  body #reevoomark a.show-all {
    display: none !important; }
  body #reevoomark body .reviewer-segments {
    display: none; } }

@media only screen and (max-width: 530px) {
  body #reevoomark iframe {
    height: 575px; }
  body #reevoomark .embedded-non-paginated .retailer_review .summary li.delivery, body #reevoomark .embedded-non-paginated .retailer_review .summary li.customer-service {
    display: block; }
  body #reevoomark .embedded-paginated .retailer_review .summary li.delivery, body #reevoomark .embedded-paginated .retailer_review .summary li.customer-service {
    display: none; }
  body #reevoomark iframe {
    height: 540px; }
  body #reevoomark .filters span.label {
    display: none !important; }
  body #reevoomark article.reevoo_review > section.review-content dl dt {
    display: block !important;
    width: 0 !important;
    min-width: 0 !important; }
  body #reevoomark .reevoo_review .review-options {
    margin-left: 0; }
  body #reevoomark article.reevoo_review > section.purchase_date {
    padding: 0;
    border: none;
    display: block;
    margin: 5px 0 0 20px;
    max-width: 100%;
    width: auto; }
  body #reevoomark article.reevoo_review > section.purchase_date .date {
    display: inline; }
  body #reevoomark article.reevoo_review > section.review-content {
    display: block !important;
    margin: 5px 0 !important;
    width: 100% !important; }
  body #reevoomark article.reevoo_review section.overall-scores {
    width: auto;
    float: left;
    margin-top: 6px; }
  body #reevoomark article.reevoo_review .overall_score {
    margin-left: 0 !important; }
  body #reevoomark article.reevoo_review .review-options {
    display: none; }
  body #reevoomark a.show-all {
    display: none !important; }
  body #reevoomark body .reviewer-segments {
    display: none; }
  body #reevoomark iframe {
    height: 580px; }
  body #reevoomark .collected-by, body #reevoomark .embedded .retailer-details {
    font-size: 14px; }
  body #reevoomark .retailer-details ul.scores {
    width: 100%; }
  body #reevoomark .retailer-details ul.scores li {
    float: none; }
  body #reevoomark .retailer-details ul.scores li img {
    float: left;
    margin-right: 6%;
    margin-bottom: 6%; }
  body #reevoomark .retailer-details ul.scores li p {
    width: auto;
    margin-top: 0px; }
  body #reevoomark #service-review-response p, body #reevoomark body #service-review-response .matador {
    width: 100%; }
  body #reevoomark #service-review-response {
    width: 90%; }
  body #reevoomark .retailer_review .review-content, body #reevoomark .retailer_review .purchase_date {
    width: auto;
    margin-left: 0;
    padding-left: 0;
    border: none;
    margin-top: 0; }
  body #reevoomark .retailer_review .purchase_date {
    max-width: none; }
  body #reevoomark .retailer_review .purchase_date .date {
    display: inline; }
  body #reevoomark .retailer_review .summary li {
    width: auto;
    display: inline-block; }
  body #reevoomark .retailer_review .review-content {
    display: box;
    display: -moz-box;
    display: -webkit-box;
    box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-box-orient: vertical; }
  body #reevoomark .attribution-container {
    box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -webkit-box-ordinal-group: 1;
    margin-left: 0 !important; }
  body #reevoomark .retailer_review .summary {
    float: none !important;
    box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -webkit-box-ordinal-group: 2; }
  body #reevoomark .retailer_review .comment {
    box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    -webkit-box-ordinal-group: 3;
    margin-left: 0; }
  body #reevoomark .retailer_review .summary .response-text span {
    display: block; }
  body #reevoomark table.scores th {
    text-align: left;
    width: 50%;
    font-size: 11px; }
  body #reevoomark .embedded-non-paginated .retailer_review .summary li.delivery, body #reevoomark .embedded-non-paginated .retailer_review .summary li.customer-service, body #reevoomark .embedded-paginated .retailer_review .summary li.delivery, body #reevoomark .embedded-paginated .retailer_review .summary li.customer-service {
    display: inline-block !important; }
  body #reevoomark .retailer-reviews-show-all {
    display: none; }
  body #reevoomark .retailer_review .service-review-details {
    display: none; } }

@media only screen and (max-width: 470px) {
  body #reevoomark iframe {
    height: 575px; }
  body #reevoomark .embedded-non-paginated .retailer_review .summary li.delivery, body #reevoomark .embedded-non-paginated .retailer_review .summary li.customer-service {
    display: block; }
  body #reevoomark .embedded-paginated .retailer_review .summary li.delivery, body #reevoomark .embedded-paginated .retailer_review .summary li.customer-service {
    display: none; }
  body #reevoomark iframe {
    height: 540px; }
  body #reevoomark .filters span.label {
    display: none !important; }
  body #reevoomark article.reevoo_review > section.review-content dl dt {
    display: block !important;
    width: 0 !important;
    min-width: 0 !important; }
  body #reevoomark .reevoo_review .review-options {
    margin-left: 0; }
  body #reevoomark article.reevoo_review > section.purchase_date {
    padding: 0;
    border: none;
    display: block;
    margin: 5px 0 0 20px;
    max-width: 100%;
    width: auto; }
  body #reevoomark article.reevoo_review > section.purchase_date .date {
    display: inline; }
  body #reevoomark article.reevoo_review > section.review-content {
    display: block !important;
    margin: 5px 0 !important;
    width: 100% !important; }
  body #reevoomark article.reevoo_review section.overall-scores {
    width: auto;
    float: left;
    margin-top: 6px; }
  body #reevoomark article.reevoo_review .overall_score {
    margin-left: 0 !important; }
  body #reevoomark article.reevoo_review .review-options {
    display: none; }
  body #reevoomark a.show-all {
    display: none !important; }
  body #reevoomark body .reviewer-segments {
    display: none; }
  body #reevoomark iframe {
    height: 580px; }
  body #reevoomark .collected-by, body #reevoomark .embedded .retailer-details {
    font-size: 14px; }
  body #reevoomark .retailer-details ul.scores {
    width: 100%; }
  body #reevoomark .retailer-details ul.scores li {
    float: none; }
  body #reevoomark .retailer-details ul.scores li img {
    float: left;
    margin-right: 6%;
    margin-bottom: 6%; }
  body #reevoomark .retailer-details ul.scores li p {
    width: auto;
    margin-top: 0px; }
  body #reevoomark #service-review-response p, body #reevoomark body #service-review-response .matador {
    width: 100%; }
  body #reevoomark #service-review-response {
    width: 90%; }
  body #reevoomark .retailer_review .review-content, body #reevoomark .retailer_review .purchase_date {
    width: auto;
    margin-left: 0;
    padding-left: 0;
    border: none;
    margin-top: 0; }
  body #reevoomark .retailer_review .purchase_date {
    max-width: none; }
  body #reevoomark .retailer_review .purchase_date .date {
    display: inline; }
  body #reevoomark .retailer_review .summary li {
    width: auto;
    display: inline-block; }
  body #reevoomark .retailer_review .review-content {
    display: box;
    display: -moz-box;
    display: -webkit-box;
    box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-box-orient: vertical; }
  body #reevoomark .attribution-container {
    box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -webkit-box-ordinal-group: 1;
    margin-left: 0 !important; }
  body #reevoomark .retailer_review .summary {
    float: none !important;
    box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -webkit-box-ordinal-group: 2; }
  body #reevoomark .retailer_review .comment {
    box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    -webkit-box-ordinal-group: 3;
    margin-left: 0; }
  body #reevoomark .retailer_review .summary .response-text span {
    display: block; }
  body #reevoomark table.scores th {
    text-align: left;
    width: 50%;
    font-size: 11px; }
  body #reevoomark .embedded-non-paginated .retailer_review .summary li.delivery, body #reevoomark .embedded-non-paginated .retailer_review .summary li.customer-service, body #reevoomark .embedded-paginated .retailer_review .summary li.delivery, body #reevoomark .embedded-paginated .retailer_review .summary li.customer-service {
    display: inline-block !important; }
  body #reevoomark .retailer-reviews-show-all {
    display: none; }
  body #reevoomark .retailer_review .service-review-details {
    display: none; }
  body #reevoomark iframe {
    height: 750px;
    width: 96.5%;
    margin: 0 5px !important; }
  body #reevoomark div.aao-wrapper {
    margin: 0 5px !important; }
  body #reevoomark section.product_details section.score_breakdown {
    width: 100%; }
  body #reevoomark section.product_details > section {
    width: 83%; }
  body #reevoomark section.product_details div.product-image {
    float: left; }
  body #reevoomark section.product_details div.average_score {
    float: right; }
  body #reevoomark a.about-reevoo {
    display: none; } }

@media only screen and (max-width: 300px) {
  body #reevoomark iframe {
    height: 575px; }
  body #reevoomark .embedded-non-paginated .retailer_review .summary li.delivery, body #reevoomark .embedded-non-paginated .retailer_review .summary li.customer-service {
    display: block; }
  body #reevoomark .embedded-paginated .retailer_review .summary li.delivery, body #reevoomark .embedded-paginated .retailer_review .summary li.customer-service {
    display: none; }
  body #reevoomark iframe {
    height: 540px; }
  body #reevoomark .filters span.label {
    display: none !important; }
  body #reevoomark article.reevoo_review > section.review-content dl dt {
    display: block !important;
    width: 0 !important;
    min-width: 0 !important; }
  body #reevoomark .reevoo_review .review-options {
    margin-left: 0; }
  body #reevoomark article.reevoo_review > section.purchase_date {
    padding: 0;
    border: none;
    display: block;
    margin: 5px 0 0 20px;
    max-width: 100%;
    width: auto; }
  body #reevoomark article.reevoo_review > section.purchase_date .date {
    display: inline; }
  body #reevoomark article.reevoo_review > section.review-content {
    display: block !important;
    margin: 5px 0 !important;
    width: 100% !important; }
  body #reevoomark article.reevoo_review section.overall-scores {
    width: auto;
    float: left;
    margin-top: 6px; }
  body #reevoomark article.reevoo_review .overall_score {
    margin-left: 0 !important; }
  body #reevoomark article.reevoo_review .review-options {
    display: none; }
  body #reevoomark a.show-all {
    display: none !important; }
  body #reevoomark body .reviewer-segments {
    display: none; }
  body #reevoomark iframe {
    height: 580px; }
  body #reevoomark .collected-by, body #reevoomark .embedded .retailer-details {
    font-size: 14px; }
  body #reevoomark .retailer-details ul.scores {
    width: 100%; }
  body #reevoomark .retailer-details ul.scores li {
    float: none; }
  body #reevoomark .retailer-details ul.scores li img {
    float: left;
    margin-right: 6%;
    margin-bottom: 6%; }
  body #reevoomark .retailer-details ul.scores li p {
    width: auto;
    margin-top: 0px; }
  body #reevoomark #service-review-response p, body #reevoomark body #service-review-response .matador {
    width: 100%; }
  body #reevoomark #service-review-response {
    width: 90%; }
  body #reevoomark .retailer_review .review-content, body #reevoomark .retailer_review .purchase_date {
    width: auto;
    margin-left: 0;
    padding-left: 0;
    border: none;
    margin-top: 0; }
  body #reevoomark .retailer_review .purchase_date {
    max-width: none; }
  body #reevoomark .retailer_review .purchase_date .date {
    display: inline; }
  body #reevoomark .retailer_review .summary li {
    width: auto;
    display: inline-block; }
  body #reevoomark .retailer_review .review-content {
    display: box;
    display: -moz-box;
    display: -webkit-box;
    box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-box-orient: vertical; }
  body #reevoomark .attribution-container {
    box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -webkit-box-ordinal-group: 1;
    margin-left: 0 !important; }
  body #reevoomark .retailer_review .summary {
    float: none !important;
    box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -webkit-box-ordinal-group: 2; }
  body #reevoomark .retailer_review .comment {
    box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    -webkit-box-ordinal-group: 3;
    margin-left: 0; }
  body #reevoomark .retailer_review .summary .response-text span {
    display: block; }
  body #reevoomark table.scores th {
    text-align: left;
    width: 50%;
    font-size: 11px; }
  body #reevoomark .embedded-non-paginated .retailer_review .summary li.delivery, body #reevoomark .embedded-non-paginated .retailer_review .summary li.customer-service, body #reevoomark .embedded-paginated .retailer_review .summary li.delivery, body #reevoomark .embedded-paginated .retailer_review .summary li.customer-service {
    display: inline-block !important; }
  body #reevoomark .retailer-reviews-show-all {
    display: none; }
  body #reevoomark .retailer_review .service-review-details {
    display: none; }
  body #reevoomark iframe {
    height: 750px;
    width: 96.5%;
    margin: 0 5px !important; }
  body #reevoomark div.aao-wrapper {
    margin: 0 5px !important; }
  body #reevoomark section.product_details section.score_breakdown {
    width: 100%; }
  body #reevoomark section.product_details > section {
    width: 83%; }
  body #reevoomark section.product_details div.product-image {
    float: left; }
  body #reevoomark section.product_details div.average_score {
    float: right; }
  body #reevoomark a.about-reevoo {
    display: none; }
  body #reevoomark .retailer-details .scores p {
    clear: left; } }

body #reevoomark iframe {
  height: 520px;
  width: 100%; }

body #reevoomark .embedded h2 {
  margin: 1em 0 1.2em 0;
  font-weight: bold; }

body #reevoomark .embedded .product_details {
  padding-top: 20px; }

body #reevoomark .embedded .product_details, body #reevoomark .embedded .retailer-details {
  border-bottom: 1px solid #dddddd;
  padding-left: 20px;
  padding-right: 20px; }

body #reevoomark .embedded .product_details div.average_score, body #reevoomark .embedded .retailer-details div.average_score {
  float: left !important; }

body #reevoomark .embedded div.button_container {
  text-align: center;
  padding-bottom: 10px;
  margin: 0 auto; }

body #reevoomark .embedded div.button_container button, body #reevoomark .embedded div.button_container .button {
  margin: 1em; }

body #reevoomark .embedded div.button_container a.about-reevoo, body #reevoomark .embedded div.button_container a.alternate-region span {
  color: #666;
  font-size: 14px;
  margin-top: 1em;
  text-align: center; }

body #reevoomark .embedded .collected-by, body #reevoomark .embedded .retailer-details {
  background: white;
  font-size: 18px;
  padding: 0 20px; }

body #reevoomark .embedded .collected-by img, body #reevoomark .embedded .retailer-details img {
  margin-bottom: -1px; }

body #reevoomark .embedded.conversations img, body #reevoomark .embedded.conversations p {
  padding: 0 20px; }

body #reevoomark .embedded.conversations .retailer-details {
  font-size: 16px;
  padding: 0;
  border-bottom: none; }

body #reevoomark .embedded.rich-snippets-fragmented .rating-and-votes {
  color: #999;
  font-size: 11px;
  display: block; }

body #reevoomark .embedded .rich-snippets-contiguous {
  margin: 30px 0 10px 40px;
  font-weight: bold; }

body #reevoomark .embedded .rich-snippets-contiguous .rating {
  text-transform: lowercase; }

body #reevoomark .embedded.hreview-aggregate {
  display: block; }

body #reevoomark select {
  background-color: white;
  height: 28px; }

body #reevoomark .large.medium.small.mobile.tiny iframe {
  height: 575px; }

body #reevoomark .large.medium.small.mobile.tiny .embedded-non-paginated .retailer_review .summary li.delivery, body #reevoomark .large.medium.small.mobile.tiny .embedded-non-paginated .retailer_review .summary li.customer-service {
  display: block; }

body #reevoomark .large.medium.small.mobile.tiny .embedded-paginated .retailer_review .summary li.delivery, body #reevoomark .large.medium.small.mobile.tiny .embedded-paginated .retailer_review .summary li.customer-service {
  display: none; }

body #reevoomark .large.medium.small.mobile.tiny iframe {
  height: 540px; }

body #reevoomark .large.medium.small.mobile.tiny .filters span.label {
  display: none !important; }

body #reevoomark .large.medium.small.mobile.tiny article.reevoo_review > section.review-content dl dt {
  display: block !important;
  width: 0 !important;
  min-width: 0 !important; }

body #reevoomark .large.medium.small.mobile.tiny .reevoo_review .review-options {
  margin-left: 0; }

body #reevoomark .large.medium.small.mobile.tiny article.reevoo_review > section.purchase_date {
  padding: 0;
  border: none;
  display: block;
  margin: 5px 0 0 20px;
  max-width: 100%;
  width: auto; }

body #reevoomark .large.medium.small.mobile.tiny article.reevoo_review > section.purchase_date .date {
  display: inline; }

body #reevoomark .large.medium.small.mobile.tiny article.reevoo_review > section.review-content {
  display: block !important;
  margin: 5px 0 !important;
  width: 100% !important; }

body #reevoomark .large.medium.small.mobile.tiny article.reevoo_review section.overall-scores {
  width: auto;
  float: left;
  margin-top: 6px; }

body #reevoomark .large.medium.small.mobile.tiny article.reevoo_review .overall_score {
  margin-left: 0 !important; }

body #reevoomark .large.medium.small.mobile.tiny article.reevoo_review .review-options {
  display: none; }

body #reevoomark .large.medium.small.mobile.tiny a.show-all {
  display: none !important; }

body #reevoomark .large.medium.small.mobile.tiny body .reviewer-segments {
  display: none; }

body #reevoomark .large.medium.small.mobile.tiny iframe {
  height: 580px; }

body #reevoomark .large.medium.small.mobile.tiny .collected-by, body #reevoomark .large.medium.small.mobile.tiny .embedded .retailer-details {
  font-size: 14px; }

body #reevoomark .large.medium.small.mobile.tiny .retailer-details ul.scores {
  width: 100%; }

body #reevoomark .large.medium.small.mobile.tiny .retailer-details ul.scores li {
  float: none; }

body #reevoomark .large.medium.small.mobile.tiny .retailer-details ul.scores li img {
  float: left;
  margin-right: 6%;
  margin-bottom: 6%; }

body #reevoomark .large.medium.small.mobile.tiny .retailer-details ul.scores li p {
  width: auto;
  margin-top: 0px; }

body #reevoomark .large.medium.small.mobile.tiny #service-review-response p, body #reevoomark .large.medium.small.mobile.tiny body #service-review-response .matador {
  width: 100%; }

body #reevoomark .large.medium.small.mobile.tiny #service-review-response {
  width: 90%; }

body #reevoomark .large.medium.small.mobile.tiny .retailer_review .review-content, body #reevoomark .large.medium.small.mobile.tiny .retailer_review .purchase_date {
  width: auto;
  margin-left: 0;
  padding-left: 0;
  border: none;
  margin-top: 0; }

body #reevoomark .large.medium.small.mobile.tiny .retailer_review .purchase_date {
  max-width: none; }

body #reevoomark .large.medium.small.mobile.tiny .retailer_review .purchase_date .date {
  display: inline; }

body #reevoomark .large.medium.small.mobile.tiny .retailer_review .summary li {
  width: auto;
  display: inline-block; }

body #reevoomark .large.medium.small.mobile.tiny .retailer_review .review-content {
  display: box;
  display: -moz-box;
  display: -webkit-box;
  box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-orient: vertical; }

body #reevoomark .large.medium.small.mobile.tiny .attribution-container {
  box-ordinal-group: 1;
  -moz-box-ordinal-group: 1;
  -webkit-box-ordinal-group: 1;
  margin-left: 0 !important; }

body #reevoomark .large.medium.small.mobile.tiny .retailer_review .summary {
  float: none !important;
  box-ordinal-group: 2;
  -moz-box-ordinal-group: 2;
  -webkit-box-ordinal-group: 2; }

body #reevoomark .large.medium.small.mobile.tiny .retailer_review .comment {
  box-ordinal-group: 3;
  -moz-box-ordinal-group: 3;
  -webkit-box-ordinal-group: 3;
  margin-left: 0; }

body #reevoomark .large.medium.small.mobile.tiny .retailer_review .summary .response-text span {
  display: block; }

body #reevoomark .large.medium.small.mobile.tiny table.scores th {
  text-align: left;
  width: 50%;
  font-size: 11px; }

body #reevoomark .large.medium.small.mobile.tiny .embedded-non-paginated .retailer_review .summary li.delivery, body #reevoomark .large.medium.small.mobile.tiny .embedded-non-paginated .retailer_review .summary li.customer-service, body #reevoomark .large.medium.small.mobile.tiny .embedded-paginated .retailer_review .summary li.delivery, body #reevoomark .large.medium.small.mobile.tiny .embedded-paginated .retailer_review .summary li.customer-service {
  display: inline-block !important; }

body #reevoomark .large.medium.small.mobile.tiny .retailer-reviews-show-all {
  display: none; }

body #reevoomark .large.medium.small.mobile.tiny .retailer_review .service-review-details {
  display: none; }

body #reevoomark .large.medium.small.mobile.tiny iframe {
  height: 750px;
  width: 96.5%;
  margin: 0 5px !important; }

body #reevoomark .large.medium.small.mobile.tiny div.aao-wrapper {
  margin: 0 5px !important; }

body #reevoomark .large.medium.small.mobile.tiny section.product_details section.score_breakdown {
  width: 100%; }

body #reevoomark .large.medium.small.mobile.tiny section.product_details > section {
  width: 83%; }

body #reevoomark .large.medium.small.mobile.tiny section.product_details div.product-image {
  float: left; }

body #reevoomark .large.medium.small.mobile.tiny section.product_details div.average_score {
  float: right; }

body #reevoomark .large.medium.small.mobile.tiny a.about-reevoo {
  display: none; }

body #reevoomark .large.medium.small.mobile.tiny .retailer-details .scores p {
  clear: left; }

body #reevoomark .large.medium.small.mobile iframe {
  height: 575px; }

body #reevoomark .large.medium.small.mobile .embedded-non-paginated .retailer_review .summary li.delivery, body #reevoomark .large.medium.small.mobile .embedded-non-paginated .retailer_review .summary li.customer-service {
  display: block; }

body #reevoomark .large.medium.small.mobile .embedded-paginated .retailer_review .summary li.delivery, body #reevoomark .large.medium.small.mobile .embedded-paginated .retailer_review .summary li.customer-service {
  display: none; }

body #reevoomark .large.medium.small.mobile iframe {
  height: 540px; }

body #reevoomark .large.medium.small.mobile .filters span.label {
  display: none !important; }

body #reevoomark .large.medium.small.mobile article.reevoo_review > section.review-content dl dt {
  display: block !important;
  width: 0 !important;
  min-width: 0 !important; }

body #reevoomark .large.medium.small.mobile .reevoo_review .review-options {
  margin-left: 0; }

body #reevoomark .large.medium.small.mobile article.reevoo_review > section.purchase_date {
  padding: 0;
  border: none;
  display: block;
  margin: 5px 0 0 20px;
  max-width: 100%;
  width: auto; }

body #reevoomark .large.medium.small.mobile article.reevoo_review > section.purchase_date .date {
  display: inline; }

body #reevoomark .large.medium.small.mobile article.reevoo_review > section.review-content {
  display: block !important;
  margin: 5px 0 !important;
  width: 100% !important; }

body #reevoomark .large.medium.small.mobile article.reevoo_review section.overall-scores {
  width: auto;
  float: left;
  margin-top: 6px; }

body #reevoomark .large.medium.small.mobile article.reevoo_review .overall_score {
  margin-left: 0 !important; }

body #reevoomark .large.medium.small.mobile article.reevoo_review .review-options {
  display: none; }

body #reevoomark .large.medium.small.mobile a.show-all {
  display: none !important; }

body #reevoomark .large.medium.small.mobile body .reviewer-segments {
  display: none; }

body #reevoomark .large.medium.small.mobile iframe {
  height: 580px; }

body #reevoomark .large.medium.small.mobile .collected-by, body #reevoomark .large.medium.small.mobile .embedded .retailer-details {
  font-size: 14px; }

body #reevoomark .large.medium.small.mobile .retailer-details ul.scores {
  width: 100%; }

body #reevoomark .large.medium.small.mobile .retailer-details ul.scores li {
  float: none; }

body #reevoomark .large.medium.small.mobile .retailer-details ul.scores li img {
  float: left;
  margin-right: 6%;
  margin-bottom: 6%; }

body #reevoomark .large.medium.small.mobile .retailer-details ul.scores li p {
  width: auto;
  margin-top: 0px; }

body #reevoomark .large.medium.small.mobile #service-review-response p, body #reevoomark .large.medium.small.mobile body #service-review-response .matador {
  width: 100%; }

body #reevoomark .large.medium.small.mobile #service-review-response {
  width: 90%; }

body #reevoomark .large.medium.small.mobile .retailer_review .review-content, body #reevoomark .large.medium.small.mobile .retailer_review .purchase_date {
  width: auto;
  margin-left: 0;
  padding-left: 0;
  border: none;
  margin-top: 0; }

body #reevoomark .large.medium.small.mobile .retailer_review .purchase_date {
  max-width: none; }

body #reevoomark .large.medium.small.mobile .retailer_review .purchase_date .date {
  display: inline; }

body #reevoomark .large.medium.small.mobile .retailer_review .summary li {
  width: auto;
  display: inline-block; }

body #reevoomark .large.medium.small.mobile .retailer_review .review-content {
  display: box;
  display: -moz-box;
  display: -webkit-box;
  box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-orient: vertical; }

body #reevoomark .large.medium.small.mobile .attribution-container {
  box-ordinal-group: 1;
  -moz-box-ordinal-group: 1;
  -webkit-box-ordinal-group: 1;
  margin-left: 0 !important; }

body #reevoomark .large.medium.small.mobile .retailer_review .summary {
  float: none !important;
  box-ordinal-group: 2;
  -moz-box-ordinal-group: 2;
  -webkit-box-ordinal-group: 2; }

body #reevoomark .large.medium.small.mobile .retailer_review .comment {
  box-ordinal-group: 3;
  -moz-box-ordinal-group: 3;
  -webkit-box-ordinal-group: 3;
  margin-left: 0; }

body #reevoomark .large.medium.small.mobile .retailer_review .summary .response-text span {
  display: block; }

body #reevoomark .large.medium.small.mobile table.scores th {
  text-align: left;
  width: 50%;
  font-size: 11px; }

body #reevoomark .large.medium.small.mobile .embedded-non-paginated .retailer_review .summary li.delivery, body #reevoomark .large.medium.small.mobile .embedded-non-paginated .retailer_review .summary li.customer-service, body #reevoomark .large.medium.small.mobile .embedded-paginated .retailer_review .summary li.delivery, body #reevoomark .large.medium.small.mobile .embedded-paginated .retailer_review .summary li.customer-service {
  display: inline-block !important; }

body #reevoomark .large.medium.small.mobile .retailer-reviews-show-all {
  display: none; }

body #reevoomark .large.medium.small.mobile .retailer_review .service-review-details {
  display: none; }

body #reevoomark .large.medium.small.mobile iframe {
  height: 750px;
  width: 96.5%;
  margin: 0 5px !important; }

body #reevoomark .large.medium.small.mobile div.aao-wrapper {
  margin: 0 5px !important; }

body #reevoomark .large.medium.small.mobile section.product_details section.score_breakdown {
  width: 100%; }

body #reevoomark .large.medium.small.mobile section.product_details > section {
  width: 83%; }

body #reevoomark .large.medium.small.mobile section.product_details div.product-image {
  float: left; }

body #reevoomark .large.medium.small.mobile section.product_details div.average_score {
  float: right; }

body #reevoomark .large.medium.small.mobile a.about-reevoo {
  display: none; }

body #reevoomark .large.medium.small iframe {
  height: 575px; }

body #reevoomark .large.medium.small .embedded-non-paginated .retailer_review .summary li.delivery, body #reevoomark .large.medium.small .embedded-non-paginated .retailer_review .summary li.customer-service {
  display: block; }

body #reevoomark .large.medium.small .embedded-paginated .retailer_review .summary li.delivery, body #reevoomark .large.medium.small .embedded-paginated .retailer_review .summary li.customer-service {
  display: none; }

body #reevoomark .large.medium.small iframe {
  height: 540px; }

body #reevoomark .large.medium.small .filters span.label {
  display: none !important; }

body #reevoomark .large.medium.small article.reevoo_review > section.review-content dl dt {
  display: block !important;
  width: 0 !important;
  min-width: 0 !important; }

body #reevoomark .large.medium.small .reevoo_review .review-options {
  margin-left: 0; }

body #reevoomark .large.medium.small article.reevoo_review > section.purchase_date {
  padding: 0;
  border: none;
  display: block;
  margin: 5px 0 0 20px;
  max-width: 100%;
  width: auto; }

body #reevoomark .large.medium.small article.reevoo_review > section.purchase_date .date {
  display: inline; }

body #reevoomark .large.medium.small article.reevoo_review > section.review-content {
  display: block !important;
  margin: 5px 0 !important;
  width: 100% !important; }

body #reevoomark .large.medium.small article.reevoo_review section.overall-scores {
  width: auto;
  float: left;
  margin-top: 6px; }

body #reevoomark .large.medium.small article.reevoo_review .overall_score {
  margin-left: 0 !important; }

body #reevoomark .large.medium.small article.reevoo_review .review-options {
  display: none; }

body #reevoomark .large.medium.small a.show-all {
  display: none !important; }

body #reevoomark .large.medium.small body .reviewer-segments {
  display: none; }

body #reevoomark .large.medium.small iframe {
  height: 580px; }

body #reevoomark .large.medium.small .collected-by, body #reevoomark .large.medium.small .embedded .retailer-details {
  font-size: 14px; }

body #reevoomark .large.medium.small .retailer-details ul.scores {
  width: 100%; }

body #reevoomark .large.medium.small .retailer-details ul.scores li {
  float: none; }

body #reevoomark .large.medium.small .retailer-details ul.scores li img {
  float: left;
  margin-right: 6%;
  margin-bottom: 6%; }

body #reevoomark .large.medium.small .retailer-details ul.scores li p {
  width: auto;
  margin-top: 0px; }

body #reevoomark .large.medium.small #service-review-response p, body #reevoomark .large.medium.small body #service-review-response .matador {
  width: 100%; }

body #reevoomark .large.medium.small #service-review-response {
  width: 90%; }

body #reevoomark .large.medium.small .retailer_review .review-content, body #reevoomark .large.medium.small .retailer_review .purchase_date {
  width: auto;
  margin-left: 0;
  padding-left: 0;
  border: none;
  margin-top: 0; }

body #reevoomark .large.medium.small .retailer_review .purchase_date {
  max-width: none; }

body #reevoomark .large.medium.small .retailer_review .purchase_date .date {
  display: inline; }

body #reevoomark .large.medium.small .retailer_review .summary li {
  width: auto;
  display: inline-block; }

body #reevoomark .large.medium.small .retailer_review .review-content {
  display: box;
  display: -moz-box;
  display: -webkit-box;
  box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-orient: vertical; }

body #reevoomark .large.medium.small .attribution-container {
  box-ordinal-group: 1;
  -moz-box-ordinal-group: 1;
  -webkit-box-ordinal-group: 1;
  margin-left: 0 !important; }

body #reevoomark .large.medium.small .retailer_review .summary {
  float: none !important;
  box-ordinal-group: 2;
  -moz-box-ordinal-group: 2;
  -webkit-box-ordinal-group: 2; }

body #reevoomark .large.medium.small .retailer_review .comment {
  box-ordinal-group: 3;
  -moz-box-ordinal-group: 3;
  -webkit-box-ordinal-group: 3;
  margin-left: 0; }

body #reevoomark .large.medium.small .retailer_review .summary .response-text span {
  display: block; }

body #reevoomark .large.medium.small table.scores th {
  text-align: left;
  width: 50%;
  font-size: 11px; }

body #reevoomark .large.medium.small .embedded-non-paginated .retailer_review .summary li.delivery, body #reevoomark .large.medium.small .embedded-non-paginated .retailer_review .summary li.customer-service, body #reevoomark .large.medium.small .embedded-paginated .retailer_review .summary li.delivery, body #reevoomark .large.medium.small .embedded-paginated .retailer_review .summary li.customer-service {
  display: inline-block !important; }

body #reevoomark .large.medium.small .retailer-reviews-show-all {
  display: none; }

body #reevoomark .large.medium.small .retailer_review .service-review-details {
  display: none; }

body #reevoomark .large.medium iframe {
  height: 575px; }

body #reevoomark .large.medium .embedded-non-paginated .retailer_review .summary li.delivery, body #reevoomark .large.medium .embedded-non-paginated .retailer_review .summary li.customer-service {
  display: block; }

body #reevoomark .large.medium .embedded-paginated .retailer_review .summary li.delivery, body #reevoomark .large.medium .embedded-paginated .retailer_review .summary li.customer-service {
  display: none; }

body #reevoomark .large.medium iframe {
  height: 540px; }

body #reevoomark .large.medium .filters span.label {
  display: none !important; }

body #reevoomark .large.medium article.reevoo_review > section.review-content dl dt {
  display: block !important;
  width: 0 !important;
  min-width: 0 !important; }

body #reevoomark .large.medium .reevoo_review .review-options {
  margin-left: 0; }

body #reevoomark .large.medium article.reevoo_review > section.purchase_date {
  padding: 0;
  border: none;
  display: block;
  margin: 5px 0 0 20px;
  max-width: 100%;
  width: auto; }

body #reevoomark .large.medium article.reevoo_review > section.purchase_date .date {
  display: inline; }

body #reevoomark .large.medium article.reevoo_review > section.review-content {
  display: block !important;
  margin: 5px 0 !important;
  width: 100% !important; }

body #reevoomark .large.medium article.reevoo_review section.overall-scores {
  width: auto;
  float: left;
  margin-top: 6px; }

body #reevoomark .large.medium article.reevoo_review .overall_score {
  margin-left: 0 !important; }

body #reevoomark .large.medium article.reevoo_review .review-options {
  display: none; }

body #reevoomark .large.medium a.show-all {
  display: none !important; }

body #reevoomark .large.medium body .reviewer-segments {
  display: none; }

body #reevoomark .large iframe {
  height: 575px; }

body #reevoomark .large .embedded-non-paginated .retailer_review .summary li.delivery, body #reevoomark .large .embedded-non-paginated .retailer_review .summary li.customer-service {
  display: block; }

body #reevoomark .large .embedded-paginated .retailer_review .summary li.delivery, body #reevoomark .large .embedded-paginated .retailer_review .summary li.customer-service {
  display: none; }

body #reevoomark .purchase_date {
  border-left: 1px solid #eaeaea;
  padding-left: 10px;
  color: #999;
  font-size: 11px;
  margin: 45px 0 0 0;
  line-height: 14px;
  max-width: 15%; }

body #reevoomark .purchase_date .date {
  display: block; }

body #reevoomark .purchase_date .location {
  line-height: 1.3em;
  margin-bottom: 0; }

body #reevoomark .purchase_date a {
  color: inherit;
  text-decoration: underline;
  display: block;
  margin-top: 0.5em; }

body #reevoomark article.reevoo_review {
  border-bottom: 1px solid #ddd;
  padding: 30px 20px; }

body #reevoomark article.reevoo_review > section {
  vertical-align: top;
  display: inline-block;
  *display: inline;
  zoom: 1; }

body #reevoomark article.reevoo_review section.overall-scores {
  width: 20%;
  margin: -5px 10px 0 0; }

body #reevoomark article.reevoo_review section.review-content {
  width: 57%; }

body #reevoomark article.reevoo_review section.review-content.review-options {
  font-size: 11px;
  margin: 10px 0 0 0; }

body #reevoomark article.reevoo_review section.review-content .review-photo-container {
  position: relative; }

body #reevoomark article.reevoo_review section.review-content .review-photo-container .photo-frame {
  margin: 0 0 10px 2em; }

body #reevoomark article.reevoo_review section.review-content .review-photo-container .review-photo img, body #reevoomark article.reevoo_review section.review-content .review-photo-container .review-photo-thumbnail img {
  cursor: pointer; }

body #reevoomark article.reevoo_review section.review-content .review-photo-container .review-photo-icon {
  position: absolute; }

body #reevoomark article.reevoo_review section.review-content .review-photo-container .review-photo {
  display: none;
  text-align: center; }

body #reevoomark article.reevoo_review section.review-content .review-photo-container .photo-caption {
  margin: 10px auto 0;
  max-width: 500px; }

@media only screen and (max-width: 820px) {
  body #reevoomark article.reevoo_review section.review-content .review-photo-container .review-photo img {
    max-width: 89%; } }

body #reevoomark article.reevoo_review img.flag {
  display: inline-block;
  margin: 0; }

body #reevoomark article.reevoo_review img.avatar {
  float: left;
  width: 25px;
  height: 25px;
  margin-right: 10px; }

body #reevoomark article.reevoo_review span.overall_score {
  display: block;
  background-repeat: no-repeat;
  background-position: 0 0;
  height: 0;
  margin: auto;
  padding-top: 62px;
  overflow: hidden; }

body #reevoomark article.reevoo_review .overall_score_stars {
  color: #666;
  margin: 0 auto;
  height: 100%;
  padding-top: 20px;
  text-align: center;
  font-size: 11px; }

body #reevoomark article.reevoo_review.highlighted {
  background-color: #DEEBF5;
  border-top: 45px solid transparent;
  margin-top: -45px;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box; }

body #reevoomark article.retailer_review section.review-content {
  margin-left: 85px; }

body #reevoomark .reevoo_review .purchase_date .video-review {
  width: 100px; }

body #reevoomark .reevoo_review .purchase_date .video-review img {
  width: 100px;
  margin-top: 10px; }

@media only screen and (max-width: 590px) {
  body #reevoomark article.reevoo_review > section.purchase_date {
    padding: 0;
    border: none;
    display: block;
    margin: 5px 0 0 20px;
    max-width: 100%;
    width: auto; }
  body #reevoomark article.reevoo_review > section.purchase_date .date {
    display: inline; }
  body #reevoomark article.reevoo_review > section.review-content {
    display: block !important;
    margin: 5px 0 !important;
    width: 100% !important; }
  body #reevoomark article.reevoo_review section.overall-scores {
    width: auto;
    float: left;
    margin-top: 6px; }
  body #reevoomark article.reevoo_review .overall_score {
    margin-left: 0 !important; }
  body #reevoomark article.reevoo_review .review-options {
    display: none; } }

body #reevoomark .attribution-container {
  margin-bottom: 20px;
  height: 27px; }

body #reevoomark .attribution-name {
  font-weight: bold;
  color: #000;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  padding: 0;
  line-height: 19px; }

body #reevoomark .attribution-details {
  font-weight: normal;
  color: #666;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  padding: 0;
  line-height: 14px; }

body #reevoomark .attribution-details .location {
  margin-right: 5px; }

body #reevoomark .attribution-details .seperator {
  margin: 0 10px 0 5px;
  border-left: 1px solid #ccc; }

body #reevoomark dl {
  position: relative;
  overflow: hidden;
  zoom: 1;
  clear: both;
  margin: 0; }

body #reevoomark dl .general, body #reevoomark dl .pros, body #reevoomark dl .cons {
  line-height: 18px;
  margin-bottom: 10px;
  padding-right: 15px;
  text-align: left;
  display: block;
  zoom: 1; }

body #reevoomark dd.pros, body #reevoomark dd.cons {
  padding-left: 2em; }

body #reevoomark dd.pros.cons.no-comment {
  padding-left: 0; }

body #reevoomark dt {
  position: absolute;
  width: 13px;
  height: 16px;
  overflow: hidden;
  font-size: 20px;
  line-height: 20px;
  vertical-align: top;
  text-align: center; }

body #reevoomark dt label {
  position: absolute;
  left: -10000px; }

body #reevoomark dt.pros {
  color: #6ec148; }

body #reevoomark dt.cons {
  color: #cf2332; }

body #reevoomark dt.general {
  display: none; }

body #reevoomark dt.no-comment {
  display: none; }

body #reevoomark .no-comment {
  color: #999;
  font-style: italic; }

body #reevoomark p.tips {
  line-height: 1em;
  margin-left: 19px; }

body #reevoomark .reevoo_review {
  zoom: 1;
  margin: 0;
  padding: 25px 0 10px 0;
  position: relative; }

body #reevoomark .reevoo_review .review-options {
  font-size: 11px;
  color: #999; }

body #reevoomark .reevoo_review .review-options a {
  color: #999;
  text-decoration: none;
  cursor: pointer; }

body #reevoomark .reevoo_review .review-options a .webfont-icon {
  background: #ddd;
  margin: 0; }

body #reevoomark .reevoo_review .review-options a .webfont-icon.downvote {
  margin-left: 10px; }

body #reevoomark .reevoo_review .review-options .previous_voters {
  margin-left: 10px; }

body #reevoomark .reevoo_review .review-options .vote {
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid #ddd; }

body #reevoomark .reevoo_review .score-breakdown {
  margin: 10px 0 0 19px;
  padding: 10px 0; }

body #reevoomark .reevoo_review .score-breakdown h5 {
  margin: 10px 0;
  font-size: 1em;
  font-weight: normal; }

body #reevoomark .reevoo_review.retailer_review .summary {
  display: block; }

@media only screen and (max-width: 590px) {
  body #reevoomark .reevoo_review .review-options {
    margin-left: 0; } }

body #reevoomark .reevoo-launch-disclamer {
  background: #fff5cd url(https://cdn.mark.reevoo.com/assets/reevoo-launch-asterisk.png) no-repeat 5px 5px;
  padding: 0.5em 0.5em 0.5em 25px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  margin-bottom: 20px; }

body #reevoomark .supplementary-info-entry {
  margin: 10px 0; }

body #reevoomark .supplementary-product-image {
  float: left;
  display: inline-block; }

body #reevoomark .supplementary-info {
  float: left;
  display: inline-block;
  margin: -5px 5px 0 5px;
  padding: 5px;
  position: absolute;
  cursor: pointer; }

body #reevoomark .supplementary-info ul {
  margin: 0 0 0 10px !important;
  padding: 0 0 0 5px !important;
  border-bottom: none !important; }

body #reevoomark .shaded-supplementary-info {
  background: #e6e6e6;
  z-index: 100000;
  border-radius: 5px; }

body #reevoomark .show-more {
  color: #1278db;
  margin: 0;
  padding: 0; }

#reevoomark button, #reevoomark .button {
  overflow: visible;
  white-space: nowrap;
  width: auto;
  height: 25px;
  padding: 0;
  margin: 0;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  border: none;
  background: transparent;
  text-decoration: none;
  font-size: 14px;
  zoom: 1;
  float: none; }

#reevoomark button::-moz-focus-inner, #reevoomark .button::-moz-focus-inner {
  border: none;
  padding: 0; }

#reevoomark button:hover, #reevoomark .button:hover, #reevoomark button:focus, #reevoomark .button:focus {
  outline: none;
  text-decoration: none; }

#reevoomark button span, #reevoomark .button span {
  color: #FFF;
  position: relative;
  cursor: pointer;
  display: block;
  height: 23px;
  line-height: 23px;
  margin: 0;
  padding: 0 15px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border: 1px solid #ff7811;
  background-color: #ff7811;
  background-position: 0 0;
  background-repeat: repeat-x; }

#reevoomark button:hover span, #reevoomark .button:hover span, #reevoomark button:focus span, #reevoomark button:focus span, #reevoomark button:active span, #reevoomark button:active span {
  color: #FFF;
  background-position: 0 -5px;
  outline: none;
  text-decoration: underline;
  background-color: #df6204; }

#reevoomark button:active span, #reevoomark .button:active span {
  background-image: none;
  line-height: 23px; }

#reevoomark a.button:visited {
  color: #333333; }

#reevoomark button:disabled span {
  color: #999;
  cursor: default; }

#reevoomark button:disabled:hover span {
  background-position: 0 0;
  text-decoration: none; }

#reevoomark h2 button, #reevoomark h2 .button {
  font-size: 0.66em; }

#reevoomark .button img {
  margin-bottom: -2px;
  padding-right: 5px; }

#reevoomark button.link {
  background: transparent;
  height: auto;
  padding: 0;
  margin: 0;
  display: inline;
  color: red;
  text-align: left;
  text-shadow: none; }

#reevoomark button.link span {
  position: static;
  display: inline;
  height: auto;
  line-height: inherit;
  padding: 0;
  margin: 0;
  background: transparent;
  font-weight: normal;
  border: none;
  line-height: 1.2em; }

#reevoomark button.link:hover span {
  color: #1278db; }

#reevoomark a.button.grey span, #reevoomark button.grey span {
  border-color: #bbb;
  background-color: #bbb;
  background-image: url(https://cdn.mark.reevoo.com/assets/buttons/grey.gif);
  text-shadow: 0 1px #fff; }

#reevoomark a.button.grey:active span, #reevoomark button.grey:active span {
  background-color: #999;
  background-image: none; }

#reevoomark a.button.red span, #reevoomark button.red span {
  color: #fff;
  border-color: #cf2332;
  background-color: #cf2332;
  background-image: url(https://cdn.mark.reevoo.com/assets/buttons/red.gif);
  text-shadow: 0 1px #7c1019; }

#reevoomark a.button.red:active span, #reevoomark button.red:active span {
  background-color: #d22130;
  background-image: none; }

#reevoomark form.button-to, #reevoomark form.button-to div {
  display: inline; }

#reevoomark form.button-to button.solo {
  margin-top: 1em; }

#reevoomark.lex {
  overflow-x: visible;
  background: transparent; }

#reevoomark.lex .embedded button span, #reevoomark.lex .embedded .button span {
  font-weight: bold;
  font-size: 11px;
  color: #757575;
  padding: 11px 0px 12px 15px;
  display: block;
  width: 90px;
  background-color: white;
  display: inline;
  border: none;
  vertical-align: middle;
  -webkit-border-radius: 19px;
  -moz-border-radius: 19px;
  border-radius: 19px;
  -webkit-box-shadow: 1px 1px 2px #C2C2C2;
  -moz-box-shadow: 1px 1px 2px #C2C2C2;
  box-shadow: 1px 1px 2px #C2C2C2;
  -webkit-transition: all 0.42s ease; }

#reevoomark.lex .embedded button span img, #reevoomark.lex .embedded .button span img {
  margin-bottom: -12px; }

#reevoomark.lex .embedded button span:hover, #reevoomark.lex .embedded .button span:hover {
  background-color: #4589CE;
  text-decoration: none;
  color: white; }

#reevoomark.lex .embedded div.button_container a {
  margin-bottom: 10px;
  font-size: 11px;
  line-height: 4em;
  color: #757575; }

#reevoomark.lex .score-sprite-60 {
  background-image: url(//cdn.images.reevoo.com/en-GB/scores/grey/transparent/60/sprite.png); }

#reevoomark.kus, #reevoomark.kud, #reevoomark.kuf, #reevoomark.kun {
  font-family: inherit; }

#reevoomark.kus article.reevoo_review, #reevoomark.kud article.reevoo_review, #reevoomark.kuf article.reevoo_review, #reevoomark.kun article.reevoo_review {
  padding: 15px 20px; }

#reevoomark.kus h4.attribution-name, #reevoomark.kud h4.attribution-name, #reevoomark.kuf h4.attribution-name, #reevoomark.kun h4.attribution-name {
  font-weight: bolder; }

#reevoomark.kus h5.attribution-details, #reevoomark.kud h5.attribution-details, #reevoomark.kuf h5.attribution-details, #reevoomark.kun h5.attribution-details {
  font-size: 11px; }

#reevoomark.kus h5.attribution-details .seperator, #reevoomark.kud h5.attribution-details .seperator, #reevoomark.kuf h5.attribution-details .seperator, #reevoomark.kun h5.attribution-details .seperator {
  border-left: 1px solid #ccc;
  margin: 0 10px; }

#reevoomark.kus .embedded.medium article.reevoo_review section.review-content, #reevoomark.kud .embedded.medium article.reevoo_review section.review-content, #reevoomark.kuf .embedded.medium article.reevoo_review section.review-content, #reevoomark.kun .embedded.medium article.reevoo_review section.review-content {
  width: 75% !important;
  display: inline-block !important; }

#reevoomark.kus article.reevoo_review section.purchase_date, #reevoomark.kud article.reevoo_review section.purchase_date, #reevoomark.kuf article.reevoo_review section.purchase_date, #reevoomark.kun article.reevoo_review section.purchase_date {
  margin: 0;
  width: 100%;
  border-left: 0;
  text-align: right; }

#reevoomark.kus article.reevoo_review section.purchase_date .date, #reevoomark.kud article.reevoo_review section.purchase_date .date, #reevoomark.kuf article.reevoo_review section.purchase_date .date, #reevoomark.kun article.reevoo_review section.purchase_date .date {
  display: inline; }

#reevoomark.kus div.button_container a.read-more span, #reevoomark.kud div.button_container a.read-more span, #reevoomark.kuf div.button_container a.read-more span, #reevoomark.kun div.button_container a.read-more span {
  font-size: 13px;
  font-weight: bolder;
  padding: 5px 15px;
  color: #015790;
  background-color: #f4fafd;
  border-color: #dbeff9; }

#reevoomark.kus div.button_container a.about-reevoo, #reevoomark.kud div.button_container a.about-reevoo, #reevoomark.kuf div.button_container a.about-reevoo, #reevoomark.kun div.button_container a.about-reevoo {
  display: none; }

#reevoomark.kus .attribution-details .location, #reevoomark.kud .attribution-details .location, #reevoomark.kuf .attribution-details .location, #reevoomark.kun .attribution-details .location {
  margin: 0; }

#reevoomark.kus .score-sprite-60, #reevoomark.kud .score-sprite-60, #reevoomark.kuf .score-sprite-60, #reevoomark.kun .score-sprite-60 {
  background-image: url(//cdn.images.reevoo.com/en-GB/scores/no_quotes/blue/transparent/60/sprite.png); }

body #reevoomark .embedded .summary .permalink, body #reevoomark .embedded .reevoo_review .type, body #reevoomark .embedded .reevoo_review .item, body #reevoomark .embedded .reevoo_review h4 .role {
  display: none; }

body #reevoomark .embedded .compact_review .fn, body #reevoomark .embedded .compact_review .locality, body #reevoomark .embedded .retailer_review .fn, body #reevoomark .embedded .retailer_review .locality {
  display: inline; }

body #reevoomark .embedded #details-prefix {
  border-bottom: 1px solid #999;
  clear: both; }

body #reevoomark .embedded .slim_review {
  padding-left: 10px;
  padding-top: 20px; }

body #reevoomark .embedded .slim_review .review-details {
  margin-bottom: 10px;
  width: 120px;
  float: left; }

body #reevoomark .embedded .slim_review .review-details .purchase_date, body #reevoomark .embedded .slim_review .review-details h4, body #reevoomark .embedded .slim_review .review-details .score-border {
  display: inline-block;
  *display: inline;
  *float: left;
  zoom: 1;
  vertical-align: top;
  margin: 0;
  padding: 0; }

body #reevoomark .embedded .slim_review .review-details h4 {
  width: 100px;
  text-align: center; }

body #reevoomark .embedded .slim_review .review-details .purchase_date {
  width: auto;
  text-align: right;
  float: right; }

body #reevoomark .embedded .slim_review .review-details .purchase_date span.date {
  display: block; }

body #reevoomark .embedded .slim_review .review-details .purchase_date p.series-product-name {
  margin-bottom: 0; }

body #reevoomark .embedded .slim_review .review-details .score-border {
  border-width: 1px 0 0 0;
  border-color: #ddd;
  border-style: dotted;
  padding-right: 10px;
  margin-right: 10px;
  margin-top: 5px;
  padding-top: 5px;
  width: 100px; }

body #reevoomark .embedded .slim_review .review-content {
  min-height: 0;
  width: 200px;
  overflow: initial; }

body #reevoomark .embedded .slim_review .flag {
  display: none; }

body #reevoomark .embedded .compact_review {
  margin: 0 0 10px 0;
  padding: 0; }

body #reevoomark .embedded .compact_review .review-details .score-border {
  width: 60px; }

body #reevoomark .embedded .compact_review .review-details .purchase_date, body #reevoomark .embedded .compact_review .review-details h4, body #reevoomark .embedded .compact_review .review-details .score-border {
  display: inline-block;
  *display: inline;
  *float: left;
  zoom: 1;
  vertical-align: top;
  margin: 0;
  padding: 0;
  border: none; }

body #reevoomark .embedded .compact_review .review-details h4 {
  padding-top: 11px;
  padding: 11px 0 0 7px;
  color: black;
  font-size: 13px; }

body #reevoomark .embedded .compact_review .review-content {
  min-height: 0;
  width: 100%;
  color: #222; }

body #reevoomark .embedded .button_container.compact_button {
  margin-top: 10px;
  padding-bottom: 0; }

body #reevoomark .embedded .button_container.compact_button a {
  text-decoration: none;
  font-size: 11px;
  color: #606; }

body #reevoomark .embedded .button_container.compact_button a.button {
  margin-bottom: 5px;
  text-decoration: none;
  font-size: 12px; }

body #reevoomark .embedded .clear {
  clear: both; }

body #reevoomark .embedded .review {
  clear: both; }

body #reevoomark .embedded .explanatory-content {
  padding: 50px 0 30px 0;
  max-width: 500px;
  margin: auto;
  text-align: center;
  font-size: 14px; }

body #reevoomark .embedded .with-product-id-text .explanatory-content {
  padding: 25px 0 30px 0; }

body #reevoomark .embedded .explanatory-content h3 {
  font-size: 18px;
  margin-bottom: 35px;
  font-weight: bold; }

body #reevoomark .embedded .explanatory-content p {
  margin-bottom: 20px;
  margin: 0 80px; }

body #reevoomark .embedded .explanatory-content a {
  color: black; }

body #reevoomark .embedded .explanatory-content a#sony-registration-link, body #reevoomark .embedded .explanatory-content a#sony-registration-link:visited {
  color: #0E5FD8; }

body #reevoomark .embedded .explanatory-content a#sony-registration-link:hover {
  color: #0E5FD8;
  text-decoration: underline; }

body #reevoomark .embedded .no-review-separator {
  border-top: 1px dotted #BBB;
  margin-bottom: 25px; }

body #reevoomark .embedded.no-scores .score_breakdown {
  display: none; }

body #reevoomark .embedded.no-scores #product_details div.summary {
  max-width: none; }

body #reevoomark .hidden {
  position: absolute;
  left: -99999px; }

body #reevoomark .filters span.filter {
  display: inline-block;
  margin-right: 10px; }

*[data-reevoo-action] {
  cursor: pointer; }

.a55 .translate-link-container {
  display: none; }

body #reevoomark .supplementary-info-entry .supplementary-info li {
  list-style-type: disc !important;
  float: none !important; }

body #reevoomark .supplementary-info-entry .toggleable {
  display: none; }

body #reevoomark .supplementary-info-entry .show-more {
  display: list-item; }

body #reevoomark .supplementary-info-entry.expanded .supplementary-info {
  background: #e6e6e6;
  z-index: 100000;
  border-radius: 5px; }

body #reevoomark .supplementary-info-entry.expanded .toggleable {
  display: list-item; }

body #reevoomark .supplementary-info-entry.expanded .show-more {
  display: none; }

body #reevoomark .embedded section.review-content .review-photo-thumbnail {
  display: none; }

body #reevoomark .embedded section.review-content .review-photo {
  display: block !important; }

body #reevoomark .embedded .embeddable-header {
  background-color: #eaeaea;
  padding-left: 20px; }

body #reevoomark .embedded .embeddable-header h1 {
  padding: 15px 0 5px 0; }

body #reevoomark .embedded .retailer-reviews-show-all a.tiptip, body #reevoomark .embedded .review-options a.tiptip, body #reevoomark .embedded .conversation-options a.tiptip, body #reevoomark .embedded .service-review-details a.tiptip {
  width: 20px;
  height: 20px;
  display: block;
  float: left; }

body #reevoomark .embedded .retailer-reviews-show-all a.tiptip span, body #reevoomark .embedded .review-options a.tiptip span, body #reevoomark .embedded .conversation-options a.tiptip span, body #reevoomark .embedded .service-review-details a.tiptip span {
  display: none; }

body #reevoomark .embedded .retailer-reviews-show-all a.tiptip.upvotelink, body #reevoomark .embedded .review-options a.tiptip.upvotelink, body #reevoomark .embedded .conversation-options a.tiptip.upvotelink, body #reevoomark .embedded .service-review-details a.tiptip.upvotelink {
  background-image: url(https://cdn.mark.reevoo.com/assets/buttons/upvote-btn.png);
  margin-right: 7px; }

body #reevoomark .embedded .retailer-reviews-show-all a.tiptip.downvotelink, body #reevoomark .embedded .review-options a.tiptip.downvotelink, body #reevoomark .embedded .conversation-options a.tiptip.downvotelink, body #reevoomark .embedded .service-review-details a.tiptip.downvotelink {
  background-image: url(https://cdn.mark.reevoo.com/assets/buttons/downvote-btn.png); }

body #reevoomark .embedded .retailer-reviews-show-all a.tiptip.toggle-score-breakdown, body #reevoomark .embedded .review-options a.tiptip.toggle-score-breakdown, body #reevoomark .embedded .conversation-options a.tiptip.toggle-score-breakdown, body #reevoomark .embedded .service-review-details a.tiptip.toggle-score-breakdown {
  background-image: url(https://cdn.mark.reevoo.com/assets/buttons/stats-btn.png); }

body #reevoomark .embedded .retailer-reviews-show-all .vote, body #reevoomark .embedded .review-options .vote, body #reevoomark .embedded .conversation-options .vote, body #reevoomark .embedded .service-review-details .vote {
  float: left;
  display: block;
  height: 20px;
  line-height: 2em; }

body #reevoomark .embedded .conversation-options {
  margin-top: 8px;
  padding-bottom: 12px;
  color: #666;
  font-size: 11px; }

body #reevoomark .embedded .conversation-options .button-collection {
  padding-left: 10px; }

body #reevoomark .embedded .overall_score_stars {
  height: auto !important; }

body #reevoomark .embedded .average_score.stars {
  height: auto !important; }

/* PAGES */
/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.ArticleMain {
  padding-top: 5.9375rem; }
  .ArticleMain .ArticleBody-Copy img {
    width: auto;
    max-width: 100%; }

.ArticleMain--Sidebar .Section-title {
  color: #1b2429;
  display: block;
  font-size: 1.5rem;
  height: 4rem;
  margin: 0 0 0 0;
  text-transform: uppercase; }
  @media (min-width: 62em) {
    .ArticleMain--Sidebar .Section-title {
      margin-top: -4rem; } }

.ArticleMain--Sidebar .ArticleSidebar li:before, .ArticleMain--Sidebar .ArticleSidebar-Crypto li:before {
  display: none; }

.ArticleMain--Sidebar .ArticleSidebar .ArticleTrailer.video, .ArticleMain--Sidebar .ArticleSidebar .ArticleTrailer-Crypto.video, .ArticleMain--Sidebar .ArticleSidebar-Crypto .ArticleTrailer.video, .ArticleMain--Sidebar .ArticleSidebar-Crypto .ArticleTrailer-Crypto.video {
  height: 310px; }
  @media (min-width: 62em) {
    .ArticleMain--Sidebar .ArticleSidebar .ArticleTrailer.video .ArticleTrailer-details, .ArticleMain--Sidebar .ArticleSidebar .ArticleTrailer-Crypto.video .ArticleTrailer-details, .ArticleMain--Sidebar .ArticleSidebar-Crypto .ArticleTrailer.video .ArticleTrailer-details, .ArticleMain--Sidebar .ArticleSidebar-Crypto .ArticleTrailer-Crypto.video .ArticleTrailer-details {
      padding-bottom: 2rem; } }
  .ArticleMain--Sidebar .ArticleSidebar .ArticleTrailer.video .ArticleTrailer-metaData, .ArticleMain--Sidebar .ArticleSidebar .ArticleTrailer-Crypto.video .ArticleTrailer-metaData, .ArticleMain--Sidebar .ArticleSidebar-Crypto .ArticleTrailer.video .ArticleTrailer-metaData, .ArticleMain--Sidebar .ArticleSidebar-Crypto .ArticleTrailer-Crypto.video .ArticleTrailer-metaData {
    padding-left: 0; }

@media (min-width: 30em) {
  .ArticleMain--Sidebar .ArticleSidebar li, .ArticleMain--Sidebar .ArticleSidebar-Crypto li {
    width: 49.7%;
    float: left; } }

@media (min-width: 62em) {
  .ArticleMain--Sidebar .ArticleSidebar li, .ArticleMain--Sidebar .ArticleSidebar-Crypto li {
    width: 100%; } }

.Carousel-mask.js-AssetsCarousel .ArticleTrailer-metaData {
  /*https://uat-local-preview-www.cmcmarkets.com/en/news-and-analysis*/
  padding-left: 2rem; }

.ArticleBody {
  padding-bottom: 4rem; }
  .ArticleBody-Hero img {
    margin-bottom: 10px; }

@media (min-width: 48em) {
  .ArticleBody-Copy h1 {
    padding-left: 1.5rem; } }

.ArticleMain--Body > p:first-child {
  color: #0a264d;
  font-size: 1.375rem;
  line-height: 2.25rem;
  margin-bottom: 2.6875rem; }

.ArticleMain--Body h2.Section-title {
  color: #333333;
  font-family: 'ubunturegular';
  font-size: 1.5625rem;
  letter-spacing: 0.09375rem;
  line-height: 2rem;
  margin-bottom: 2.1875rem; }

.ArticleMain--Body h3.Section-title {
  color: #333333;
  font-family: 'ubunturegular';
  font-size: 1.25rem;
  letter-spacing: 0.09375rem;
  line-height: 1.875rem;
  margin-bottom: 1.9375rem; }

@media (min-width: 62em) {
  .ArticleMain--Body .col-lg-2 {
    text-align: center; } }

.ArticleMain--Body .col-lg-10 {
  padding-bottom: 19px; }
  .ArticleMain--Body .col-lg-10 h2.Section-title {
    color: #00c5e8; }

@media (min-width: 48em) {
  .ArticleMain .ArticleMetaShare {
    text-align: left; } }

@media (min-width: 62em) {
  .ArticleMain .ArticleMetaShare {
    height: 300px;
    text-align: center; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.crypto-landing-page .megaMenu {
  border-top: 6px solid #00c5e8; }
  .crypto-landing-page .megaMenu .navCMC {
    background-color: #1b2429;
    border-top: 1px solid #1b2429;
    border-bottom: 1px solid #222e35; }

.crypto-landing-page h1 {
  color: #00c5e8; }

.crypto-landing-page h2, .crypto-landing-page .ArticleMain h1 {
  color: #1b2429; }

.crypto-landing-page .main-question .h2 {
  font-size: 30px;
  font-family: ubuntulight, sans-serif !important; }

.crypto-landing-page .live-demo-cta .h2 {
  margin: 1.5rem 1.5rem 0.5rem 1.5rem; }

.crypto-landing-page .live-demo-cta .h3 {
  margin: 0 1.5rem 0.5rem 1.5rem;
  color: #00c5e8; }
  @media (max-width: 768px) {
    .crypto-landing-page .live-demo-cta .h3 {
      text-align: center; } }

@media (max-width: 480px) {
  .crypto-landing-page .Section.hero {
    background-image: url("https://assets.cmcmarkets.com/images/Hero_banner_400x600-withouticons.jpg") !important;
    background-size: cover !important; } }

@media (max-width: 992px) {
  .crypto-landing-page .Section.hero {
    background-image: url("https://assets.cmcmarkets.com/images/Hero_banner_768x660-withouticons.jpg") !important;
    background-size: cover !important; } }

@media (max-width: 768px) {
  .crypto-landing-page .Section.hero h1.Section-title {
    font-size: 35px; } }

.crypto-landing-page .crypto-article {
  height: 280px;
  position: relative;
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 20px;
  cursor: pointer;
  overflow: hidden; }
  @media (min-width: 768px) {
    .crypto-landing-page .crypto-article {
      height: 200px !important; } }
  @media (min-width: 1280px) {
    .crypto-landing-page .crypto-article {
      height: 280px !important; } }
  .crypto-landing-page .crypto-article img {
    position: relative;
    float: left;
    width: 100%; }
  .crypto-landing-page .crypto-article span {
    font-size: 18px;
    color: #0a264d;
    padding: 40px 20px;
    background: #e8e9ed;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-bottom: 6px solid #005cb8; }
    .crypto-landing-page .crypto-article span::after {
      content: "\e612";
      position: absolute;
      right: 15px;
      color: #00c5e8;
      font-family: icomoon;
      font-style: normal;
      font-weight: 400;
      font-variant: normal;
      text-transform: none;
      -webkit-font-smoothing: antialiased;
      transition-duration: .5s; }
  .crypto-landing-page .crypto-article:hover img {
    transform: scale(1.2); }
  .crypto-landing-page .crypto-article:hover span::after {
    right: 15px; }

.crypto-landing-page .scroll-to-link-dark a {
  margin: 10px 0 0;
  padding: 10px 0;
  float: left;
  text-align: center;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  color: #ffffff; }

.crypto-landing-page .html-arrow {
  transform: scale(1, 0.75);
  display: inline-block; }

.crypto-landing-page .crypto-price-wgt {
  padding: 20px 150px;
  background: #f1f2f4 url(https://assets.cmcmarkets.com/images/SellWidgetProfit.png) no-repeat 97% 20px; }
  .crypto-landing-page .crypto-price-wgt-loss {
    background: #f1f2f4 url(https://assets.cmcmarkets.com/images/SellWidgetLoss.png) no-repeat 97% 20px; }
  @media (max-width: 768px) {
    .crypto-landing-page .crypto-price-wgt {
      padding: 40px 20px;
      background-position: 95% 93%; } }
  .crypto-landing-page .crypto-price-wgt span {
    color: #071b36;
    font-weight: bold;
    text-transform: uppercase; }
    .crypto-landing-page .crypto-price-wgt span.price {
      display: block;
      font-size: 28px;
      margin-top: 10px; }

.crypto-landing-page .js-crypto-trader, .crypto-landing-page .js-crypto-pro-trader {
  display: none; }

.crypto-landing-page #WhyTradeCryptocurrencies h3.Section-title {
  text-align: left;
  min-height: 60px;
  margin-bottom: 1.3em; }

.crypto-landing-page #WhyTradeCryptocurrencies img {
  height: 50px;
  width: auto; }

.crypto-landing-page .blue-heading {
  color: #00c5e8 !important; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*
Regards colours, there are some unique colours in this file
Due to the unique design needs in this instance we have not globalised
*/
body.landingpage {
  /*
	* On landing pages hiding SmartBanner, overriding JS logic to push page to top
	*/
  padding-top: 72px !important; }
  body.landingpage .GlobalHeader .Hat,
  body.landingpage .GlobalHeader .NavBar-nav-icon,
  body.landingpage .GlobalHeader .NavBar-level-1,
  body.landingpage .GlobalHeader .NavBar-search-button,
  body.landingpage .GlobalHeader .NavBar-mobile-button-group,
  body.landingpage .GlobalHeader .NavBar-create-account-button {
    display: none; }
  body.landingpage .megaMenu {
    top: 0 !important; }
    body.landingpage .megaMenu .hat,
    body.landingpage .megaMenu li.navCMC-menu,
    body.landingpage .megaMenu .navCMC-btn,
    body.landingpage .megaMenu .navCMC-mobile,
    body.landingpage .megaMenu #navCMC-mob {
      display: none !important; }
    body.landingpage .megaMenu .navCMC-btn:last-child {
      /* this is the login button */
      display: block !important; }
  body.landingpage .anchor-push:before {
    height: 90px;
    margin-top: -90px; }
  @media (min-width: 1024px) {
    body.landingpage .wrapper {
      /*margin-top: -43px;*/ }
      body.landingpage .wrapper .anchor-push:before {
        height: 153px;
        margin-top: -153px; } }
  body.landingpage .MobileCreateAccount + .wrapper {
    margin-top: 0 !important; }
    body.landingpage .MobileCreateAccount + .wrapper .anchor-push:before {
      height: 90px;
      margin-top: -90px; }
      @media (min-width: 75em) {
        body.landingpage .MobileCreateAccount + .wrapper .anchor-push:before {
          height: 110px;
          margin-top: -110px; } }
  body.landingpage .Footer .container-fluid:first-child,
  body.landingpage .Footer .Footer-contact {
    display: none; }
  @media (min-width: 75em) {
    body.landingpage {
      padding-top: 90px; } }
  body.landingpage.no-login .megaMenu .navCMC-btn:last-child {
    display: none !important; }

.demo-landingpage .tick-list-light ul {
  padding: 0; }

.demo-landingpage .tick-list-light li {
  padding-left: 1.7rem; }

.demo-landingpage .tick-list {
  color: #fff;
  font-size: 15px; }
  .demo-landingpage .tick-list ul {
    margin-bottom: 1.6rem;
    padding-left: 0; }
  .demo-landingpage .tick-list li {
    margin-bottom: 0.4rem;
    padding-left: 2rem; }
    .demo-landingpage .tick-list li:before {
      background: url("https://assets.cmcmarkets.com/images/demo-landing-list-tick.png") no-repeat 0 0;
      content: '';
      height: 20px; }
  @media (min-width: 62em) {
    .demo-landingpage .tick-list {
      font-size: 18px; }
      .demo-landingpage .tick-list ul {
        margin-bottom: 1rem;
        padding-left: 5px; }
      .demo-landingpage .tick-list li {
        margin-bottom: 0.5625rem;
        padding-left: 2.1875rem; } }

.demo-landingpage .corner-text {
  background: #4CC21D;
  box-sizing: border-box;
  height: 100px;
  position: absolute;
  right: -50px;
  top: -50px;
  transform: rotate(45deg);
  width: 100px; }
  .demo-landingpage .corner-text p {
    bottom: 0.3rem;
    color: #fff;
    font-size: 0.7rem;
    font-weight: bold;
    line-height: 0.9rem;
    margin: 0 !important;
    padding: 0 20px;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    width: 100%; }
  @media (min-width: 62em) {
    .demo-landingpage .corner-text {
      height: 144px;
      right: -72px;
      top: -72px;
      width: 144px; }
      .demo-landingpage .corner-text p {
        font-size: 1rem;
        line-height: 1.2rem; } }

.demo-landingpage .Section {
  padding: 2.1875rem 0 0.625rem; }
  @media (min-width: 62em) {
    .demo-landingpage .Section {
      padding: 3.25rem 0 0.625rem; } }

.demo-landingpage .Section.hero {
  background: #888888;
  background: radial-gradient(circle at 50% 90%, #bcbcbc 0%, #0b1119 75%);
  overflow: hidden;
  padding-bottom: 2rem;
  padding-top: 2rem;
  position: relative; }
  .demo-landingpage .Section.hero .Section-slant-overlay {
    background: #00afcf;
    bottom: -400px;
    height: 500px;
    top: auto; }
  .demo-landingpage .Section.hero.Section-bg-white-house {
    background-color: #000;
    background-image: url("https://assets.cmcmarkets.com/images/trump-bg_small.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center; }
    @media (min-width: 480px) {
      .demo-landingpage .Section.hero.Section-bg-white-house {
        background-image: url("https://assets.cmcmarkets.com/images/trump-bg_medium.jpg");
        background-size: cover; } }
    @media (min-width: 768px) {
      .demo-landingpage .Section.hero.Section-bg-white-house {
        background-image: url("https://assets.cmcmarkets.com/images/trump-bg_large.jpg");
        background-size: cover; } }
    @media (min-width: 992px) {
      .demo-landingpage .Section.hero.Section-bg-white-house {
        background-image: url("https://assets.cmcmarkets.com/images/trump-bg.jpg");
        background-size: cover; } }
  .demo-landingpage .Section.hero.Section-bg-oil-station {
    background-color: #000;
    background-image: url("https://assets.cmcmarkets.com/images/bg-oil_small.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center; }
    @media (min-width: 480px) {
      .demo-landingpage .Section.hero.Section-bg-oil-station {
        background-image: url("https://assets.cmcmarkets.com/images/bg-oil_medium.jpg");
        background-size: cover; } }
    @media (min-width: 768px) {
      .demo-landingpage .Section.hero.Section-bg-oil-station {
        background-image: url("https://assets.cmcmarkets.com/images/bg-oil_large.jpg");
        background-size: cover; } }
    @media (min-width: 992px) {
      .demo-landingpage .Section.hero.Section-bg-oil-station {
        background-image: url("https://assets.cmcmarkets.com/images/bg-oil.jpg");
        background-size: cover; } }
  .demo-landingpage .Section.hero .container-fluid {
    position: relative;
    z-index: 2; }
  .demo-landingpage .Section.hero h1.Section-title {
    color: #00c5e8;
    font-size: 1.6rem;
    line-height: 2rem;
    margin-bottom: 1.4rem;
    text-align: left; }
  .demo-landingpage .Section.hero h1 + p {
    color: #fff;
    font-family: 'ubunturegular', sans-serif;
    font-size: 1rem;
    letter-spacing: 0.046rem;
    line-height: 1.6rem;
    margin-bottom: 1.2rem;
    text-align: left; }
  .demo-landingpage .Section.hero p {
    margin-bottom: 1rem; }
  .demo-landingpage .Section.hero .button + p {
    font-size: 1rem;
    line-height: 1.562rem;
    margin-top: -0.9rem;
    text-align: center; }
  .demo-landingpage .Section.hero .watch-link a {
    color: #fff;
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    line-height: normal;
    padding-left: 37px;
    position: relative; }
    .demo-landingpage .Section.hero .watch-link a:before {
      background: url("https://assets.cmcmarkets.com/images/video-link-play-icn-sprite.png") no-repeat;
      content: '';
      display: inline-block;
      height: 22px;
      left: 0;
      margin: -11px 0 0 0;
      position: absolute;
      top: 50%;
      vertical-align: middle;
      width: 22px; }
    .demo-landingpage .Section.hero .watch-link a:hover:before {
      background-position: 0 100%; }
  .demo-landingpage .Section.hero .box-feature {
    background: rgba(255, 255, 255, 0.16);
    box-shadow: inset 0px 0px 0px 1px #1ab99f;
    margin: 2rem 0 2.6rem;
    overflow: hidden;
    padding: 1.6rem 3rem 0 0;
    position: relative; }
    .demo-landingpage .Section.hero .box-feature.wider {
      padding-right: 10px;
      margin-left: 45px; }
    .demo-landingpage .Section.hero .box-feature .tick-list ul {
      padding-left: 1rem; }
    .demo-landingpage .Section.hero .box-feature .tick-list li {
      font-size: 1rem;
      font-weight: bold; }
      .demo-landingpage .Section.hero .box-feature .tick-list li:before {
        background-position: 0 -20px;
        top: 2px; }
  .demo-landingpage .Section.hero .scroll-to-link {
    font-size: 15px;
    margin: 0.5rem 0 -1.5rem;
    position: relative;
    z-index: 1; }
    .demo-landingpage .Section.hero .scroll-to-link a {
      color: #fff; }
      .demo-landingpage .Section.hero .scroll-to-link a:after {
        border: 7px solid transparent;
        border-bottom: 0;
        border-top: 9px solid #99efff;
        content: '';
        display: inline-block;
        height: 0;
        margin-left: 8px;
        width: 0; }
      .demo-landingpage .Section.hero .scroll-to-link a:hover:after {
        border-top-color: #fff; }
  .demo-landingpage .Section.hero iframe {
    border: 0;
    height: 700px;
    margin-top: 2rem;
    width: 100%; }
  @media (min-width: 30em) {
    .demo-landingpage .Section.hero h1.Section-title {
      font-size: 2.125rem;
      line-height: 2.75rem;
      margin-bottom: 1.125rem; }
    .demo-landingpage .Section.hero h2.Section-title {
      font-size: 1.125rem;
      letter-spacing: 0.07rem;
      line-height: 1.6875rem;
      margin-bottom: 1.75rem; } }
  @media (min-width: 48em) {
    .demo-landingpage .Section.hero .box-feature {
      margin-top: 5px; } }
  @media (min-width: 62em) {
    .demo-landingpage .Section.hero {
      padding-top: 3rem; }
      .demo-landingpage .Section.hero h1.Section-title {
        font-size: 2.125rem;
        line-height: 2.75rem;
        margin-bottom: 1.125rem; }
      .demo-landingpage .Section.hero h2.Section-title {
        font-size: 1.125rem;
        letter-spacing: 0.07rem;
        line-height: 1.6875rem;
        margin-bottom: 1.75rem; }
      .demo-landingpage .Section.hero .watch-link a {
        font-size: 1rem; }
      .demo-landingpage .Section.hero p {
        margin-bottom: 2rem; }
      .demo-landingpage .Section.hero .button-green .Button {
        margin-left: 0; }
      .demo-landingpage .Section.hero .button + p {
        margin-top: -1.9rem;
        text-align: left; }
      .demo-landingpage .Section.hero .box-feature {
        margin: 5px 0 2.25rem 55px;
        padding: 1rem 75px 0 0; }
      .demo-landingpage .Section.hero .Section-slant-overlay {
        bottom: -460px; }
      .demo-landingpage .Section.hero iframe {
        margin-top: 0; }
      .demo-landingpage .Section.hero .col-lg-5 {
        padding-left: 75px; } }
  @media (min-width: 1300px) {
    .demo-landingpage .Section.hero .Section-slant-overlay {
      bottom: -392px;
      transform-origin: center; } }
  .demo-landingpage .Section.hero.demo-form + .Section {
    position: relative; }
  @media (min-width: 62em) {
    .demo-landingpage .Section.hero.demo-form {
      overflow: visible;
      padding-bottom: 1.5rem; }
      .demo-landingpage .Section.hero.demo-form .col-demo-form {
        position: absolute;
        right: 0;
        z-index: 100; }
        .demo-landingpage .Section.hero.demo-form .col-demo-form iframe {
          height: 1200px; }
      .demo-landingpage .Section.hero.demo-form .Section-slant-overlay {
        bottom: -404px; } }
  @media (min-width: 1300px) {
    .demo-landingpage .Section.hero.demo-form .Section-slant-overlay {
      bottom: -330px; } }
  @media (min-width: 62em) {
    .demo-landingpage .Section.hero.live-form .Section-slant-overlay {
      bottom: -404px; } }
  @media (min-width: 1300px) {
    .demo-landingpage .Section.hero.live-form .Section-slant-overlay {
      bottom: -330px; } }

.demo-landingpage .Section.demo-account {
  background: #0a264d;
  overflow: hidden;
  padding: 1.8rem 0 0.6rem;
  position: relative; }
  .demo-landingpage .Section.demo-account .col-lg-6 + .col-lg-6 {
    margin-top: 2.8rem; }
  .demo-landingpage .Section.demo-account h2.Section-title {
    color: #fff;
    font-size: 1.6rem;
    line-height: 2.27rem;
    margin-bottom: 1.8rem;
    padding: 0 20px; }
  .demo-landingpage .Section.demo-account .button + p {
    color: #fff;
    font-size: 1rem;
    margin-top: -1.5rem;
    text-align: center; }
  @media (min-width: 48em) {
    .demo-landingpage .Section.demo-account h2.Section-title {
      font-size: 2.125rem;
      line-height: 2.687rem;
      padding: 0; }
    .demo-landingpage .Section.demo-account .Button {
      display: block;
      margin-left: auto;
      margin-right: auto; }
    .demo-landingpage .Section.demo-account .corner-text {
      height: 144px;
      right: -72px;
      top: -72px;
      width: 144px; }
      .demo-landingpage .Section.demo-account .corner-text p {
        font-size: 1rem;
        line-height: 1.2rem; } }
  @media (min-width: 62em) {
    .demo-landingpage .Section.demo-account {
      padding: 45px 0; }
      .demo-landingpage .Section.demo-account .col-lg-6 + .col-lg-6 {
        margin-top: 0; }
      .demo-landingpage .Section.demo-account h2.Section-title {
        margin-bottom: 2.6rem; }
      .demo-landingpage .Section.demo-account .Button {
        display: inline-block; }
      .demo-landingpage .Section.demo-account .button {
        text-align: center; } }

.demo-landingpage .Section.info-section {
  padding: 2.4rem 0 1.8rem; }
  .demo-landingpage .Section.info-section .col-lg-6 + .col-lg-6 {
    padding-top: 0.6rem; }
  .demo-landingpage .Section.info-section .Section-title {
    color: #00c5e8;
    text-align: left; }
  .demo-landingpage .Section.info-section h2, .demo-landingpage .Section.info-section h2.Section-title, .demo-landingpage .Section.info-section h3, .demo-landingpage .Section.info-section h3.Section-title {
    font-family: 'ubunturegular', sans-serif;
    font-size: 1.375rem;
    letter-spacing: normal;
    line-height: 1.875rem;
    margin: 1.8125rem 0 0.8125rem; }
    .demo-landingpage .Section.info-section h2:first-child, .demo-landingpage .Section.info-section h2.Section-title:first-child, .demo-landingpage .Section.info-section h3:first-child, .demo-landingpage .Section.info-section h3.Section-title:first-child {
      margin-top: 0; }
  .demo-landingpage .Section.info-section p {
    margin: 0 0 0.6875rem; }
  .demo-landingpage .Section.info-section ul {
    list-style: disc;
    margin: 0 0 0.6875rem;
    padding: 0 0 0 1.875rem; }
    .demo-landingpage .Section.info-section ul li {
      margin: 0;
      padding-left: 0.375rem; }
      .demo-landingpage .Section.info-section ul li:before {
        display: none; }
  .demo-landingpage .Section.info-section div[itemprop="video"] {
    margin: 0 0 0.8125rem;
    padding-top: 0.5625rem; }
  .demo-landingpage .Section.info-section .video-container iframe {
    height: 195px; }
  .demo-landingpage .Section.info-section .button {
    margin-bottom: 0.8125rem;
    margin-top: 2.2rem; }
  .demo-landingpage .Section.info-section .Button {
    min-width: 70%; }
  @media (min-width: 48em) {
    .demo-landingpage .Section.info-section .col-lg-6 {
      margin: 0 auto;
      max-width: 600px; }
    .demo-landingpage .Section.info-section .video-container iframe {
      height: 330px; } }
  @media (min-width: 62em) {
    .demo-landingpage .Section.info-section {
      padding: 3.375rem 0 3.75rem; }
      .demo-landingpage .Section.info-section .col-lg-6 {
        margin: 0;
        max-width: none; }
        .demo-landingpage .Section.info-section .col-lg-6:first-child {
          padding-right: 2.5rem; }
        .demo-landingpage .Section.info-section .col-lg-6 + .col-lg-6 {
          padding-top: 0;
          padding-left: 1.25rem; }
      .demo-landingpage .Section.info-section .video-container iframe {
        height: 350px; }
      .demo-landingpage .Section.info-section .button {
        margin-bottom: 0.8125rem;
        margin-top: 3.75rem; } }

.demo-landingpage .Section.best-platform {
  background: url("https://assets.cmcmarkets.com/images/demo-landing-quote-bg.jpg") no-repeat 50% 50%;
  background-size: cover;
  padding: 28px 0 70px; }
  .demo-landingpage .Section.best-platform .box-feature {
    background: rgba(255, 255, 255, 0.9);
    margin: 0;
    padding: 16px 8px 11px; }
    .demo-landingpage .Section.best-platform .box-feature p:first-of-type {
      color: #1b2429;
      font-family: 'ubuntulight', sans-serif;
      font-size: 18px;
      letter-spacing: normal;
      line-height: 1.8rem;
      margin: 0 0 6px;
      text-align: center; }
    .demo-landingpage .Section.best-platform .box-feature p {
      color: #333333;
      font-size: 14px;
      line-height: normal;
      margin: 0;
      text-align: center; }
  @media (min-width: 48em) {
    .demo-landingpage .Section.best-platform {
      padding: 40px 0 70px; }
      .demo-landingpage .Section.best-platform .box-feature {
        margin: 0 40px;
        padding: 21px 65px 11px; }
        .demo-landingpage .Section.best-platform .box-feature p:first-of-type {
          font-size: 24px;
          line-height: 2.25rem; }
        .demo-landingpage .Section.best-platform .box-feature p {
          font-size: 16px;
          margin: 0 0 10px; } }
  @media (min-width: 62em) {
    .demo-landingpage .Section.best-platform {
      padding: 40px 0 134px; } }

.demo-landingpage .Section.world-map {
  background: url("https://assets.cmcmarkets.com/images/demo-landing-world-map.png") no-repeat 50% 0;
  padding: 2.2rem 0 0; }
  .demo-landingpage .Section.world-map h2.Section-title {
    color: #1b2429;
    font-size: 1.466667rem;
    line-height: 1.8rem;
    margin-bottom: 3.4rem;
    text-align: center; }
  .demo-landingpage .Section.world-map .col-md-4 {
    margin: 0 auto;
    max-width: 350px; }
    .demo-landingpage .Section.world-map .col-md-4:before, .demo-landingpage .Section.world-map .col-md-4:after {
      content: ' ';
      display: table; }
    .demo-landingpage .Section.world-map .col-md-4:after {
      clear: both; }
  .demo-landingpage .Section.world-map img {
    margin: -5px auto 20px; }
  .demo-landingpage .Section.world-map p.Section-title {
    color: #1b2429;
    font-family: 'latobold', sans-serif;
    font-size: 50px;
    line-height: 1.875rem;
    margin: 0 0 21px;
    text-align: center; }
    .demo-landingpage .Section.world-map p.Section-title sub {
      display: inline;
      font-size: 21px;
      line-height: 0; }
  .demo-landingpage .Section.world-map sub {
    bottom: 0; }
  .demo-landingpage .Section.world-map p {
    color: #1b2429;
    font-size: 17px;
    line-height: 25px;
    margin-bottom: 3rem;
    text-align: center; }
    .demo-landingpage .Section.world-map p sub {
      display: block;
      font-size: 13px;
      line-height: 25px; }
  .demo-landingpage .Section.world-map .button + p {
    font-size: 1rem;
    margin-top: -2.5rem; }
  .demo-landingpage .Section.world-map .Button {
    padding-left: 2rem;
    padding-right: 2rem;
    max-width: 100%; }
  @media (min-width: 30em) {
    .demo-landingpage .Section.world-map img {
      float: left;
      margin: -5px 10px 0 0; } }
  @media (min-width: 48em) {
    .demo-landingpage .Section.world-map {
      background-size: auto 100%;
      padding: 103px 0 33px; }
      .demo-landingpage .Section.world-map .col-md-4 {
        margin: 0;
        max-width: none; }
      .demo-landingpage .Section.world-map h2.Section-title {
        font-size: 2.125rem;
        line-height: 2.687rem;
        margin-bottom: 4.6rem; }
      .demo-landingpage .Section.world-map img {
        float: none;
        margin: 0 auto 52px; } }

.demo-landingpage .Section.Section-footnote {
  padding: 24px 0 21px; }
  .demo-landingpage .Section.Section-footnote p {
    color: #000; }
  @media (min-width: 62em) {
    .demo-landingpage .Section.Section-footnote {
      padding: 37px 0 21px; } }

.demo-landingpage .Section.support {
  background: #051a39;
  padding: 30px 0;
  text-align: center; }
  .demo-landingpage .Section.support .col-lg-6:before, .demo-landingpage .Section.support .col-lg-6:after {
    content: ' ';
    display: table; }
  .demo-landingpage .Section.support .col-lg-6:after {
    clear: both; }
  .demo-landingpage .Section.support .col-lg-6:first-child {
    padding-bottom: 1rem; }
  .demo-landingpage .Section.support img {
    float: left;
    margin: 0 20px 0 0; }
  .demo-landingpage .Section.support p {
    color: #fff;
    font-family: 'latoregular', sans-serif;
    font-size: 20px;
    letter-spacing: normal;
    line-height: 26px;
    margin: 0;
    padding-top: 10px;
    text-align: left; }
  @media (min-width: 30em) {
    .demo-landingpage .Section.support .col-lg-6 {
      margin: 0 auto;
      max-width: 600px; }
    .demo-landingpage .Section.support p {
      padding-top: 2rem; } }
  @media (min-width: 62em) {
    .demo-landingpage .Section.support {
      background: #051a39 url("https://assets.cmcmarkets.com/images/landingpage-banner-divider_large.jpg") no-repeat 48% 50%; }
      .demo-landingpage .Section.support .col-lg-6 {
        margin: 0;
        max-width: 1000px;
        padding: 0 30px !important; }
      .demo-landingpage .Section.support p {
        padding-top: 2rem; } }

.demo-landingpage .Section.CFD-Share-diff {
  padding: 1em 0; }

.demo-landingpage .bs-box-row > div {
  padding-left: 6px !important; }
  .demo-landingpage .bs-box-row > div p:first-of-type {
    font-size: 1.25rem;
    margin: 0 0 1rem !important;
    min-height: 0;
    text-align: left; }
  .demo-landingpage .bs-box-row > div img {
    margin: 0 0 0.8rem; }

@media (min-width: 48em) {
  .demo-landingpage .bs-box-row > div {
    padding-right: 15px; } }

@media (min-width: 62em) {
  .demo-landingpage .bs-box-row.bs-box-row-tall {
    /* Added to accomodate extra long signup forms */
    margin-top: 110px; }
  .demo-landingpage .bs-box-row + .bs-box-row {
    padding-top: 0.5rem; }
  .demo-landingpage .bs-box-row > div {
    padding-right: 60px; }
    .demo-landingpage .bs-box-row > div p:first-of-type {
      margin-bottom: 20px !important; }
    .demo-landingpage .bs-box-row > div img {
      margin: 0 0 0.8125rem; } }

@media (min-width: 78em) {
  .demo-landingpage .bs-box-row.bs-box-row-tall {
    /* Added to accomodate extra long signup forms */
    margin-top: 70px; } }

body.no-click .navCMC-logo a {
  pointer-events: none !important; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*
Custom CSS for https://www.cmcmarkets.com/en-gb/eoc/trading_cashback_offer_2017
Should expire by September 2017 but check with Nicole Onianwa or Lewis Hunter 
*/
.cashback-lp .Section-slant-overlay {
  bottom: -352px;
  transform-origin: center;
  height: 500px;
  top: auto; }

.cashback-lp .button-green .Button {
  margin-left: 0;
  display: block !important;
  font-size: 1.1em;
  line-height: normal;
  font-size: 20px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  max-width: 347px; }

.cashback-lp .button + p {
  margin-top: -1.5rem; }

.cashback-lp .tick-list {
  color: #fff;
  font-size: 18px; }
  .cashback-lp .tick-list ul {
    margin-bottom: 1.6rem;
    padding-left: 0; }
  .cashback-lp .tick-list li {
    margin-bottom: 0.5rem;
    padding-left: 2rem; }
    .cashback-lp .tick-list li:before {
      background: url("https://assets.cmcmarkets.com/images/demo-landing-list-tick.png") no-repeat 0 0;
      content: '';
      height: 20px; }

.cashback-lp .tick-list + .text-item {
  font-size: 17px;
  font-family: ubuntulight,sans-serif;
  font-weight: bold;
  line-height: 26px;
  letter-spacing: 1.45px; }

.cashback-lp .button + .text-item {
  font-size: 20px; }

@media (min-width: 992px) {
  .cashback-lp .video {
    padding-top: 4rem;
    padding-left: 4%; } }

.cashback-lp h2 {
  font-family: ubuntulight,sans-serif;
  font-size: 38px;
  letter-spacing: 1.45px;
  line-height: normal;
  color: #0a264d; }

.cashback-lp ol.easy-steps {
  padding-left: 0;
  list-style-type: none;
  text-align: center; }
  .cashback-lp ol.easy-steps p {
    line-height: 55px;
    font-family: ubuntulight, sans-serif;
    font-size: 20px;
    margin-bottom: 1rem; }
  .cashback-lp ol.easy-steps li p:before {
    content: "1";
    display: inline-block;
    border-radius: 50%;
    width: 55px;
    height: 55px;
    background: #0a264d;
    margin-right: 1.25rem;
    text-align: center;
    color: #fff;
    font-size: 30px;
    font-weight: bold;
    position: relative;
    top: 5px; }
  .cashback-lp ol.easy-steps li:nth-child(2) p:before {
    content: "2"; }
  .cashback-lp ol.easy-steps li:nth-child(3) p:before {
    content: "3"; }
  .cashback-lp ol.easy-steps li .svg-placeholder {
    padding-top: 50%;
    margin: 0 10%;
    background: url("https://assets.cmcmarkets.com/images/cashback-lp-1-apply-now.svg") no-repeat center;
    background-size: contain; }
  .cashback-lp ol.easy-steps li:nth-child(2) .svg-placeholder {
    background-image: url("https://assets.cmcmarkets.com/images/cashback-lp-2-start-trading.svg"); }
  .cashback-lp ol.easy-steps li:nth-child(3) .svg-placeholder {
    background-image: url("https://assets.cmcmarkets.com/images/cashback-lp-3-receive-cashback.svg"); }
  @media (max-width: 991px) {
    .cashback-lp ol.easy-steps .svg-placeholder {
      display: none; }
    .cashback-lp ol.easy-steps p {
      max-width: 300px;
      text-align: left;
      margin-left: auto;
      margin-right: auto; } }

.cashback-lp .Section-steps {
  padding-top: 3.5rem; }
  .cashback-lp .Section-steps h2 {
    margin-bottom: 3.5rem; }
  .cashback-lp .Section-steps p.button-green,
  .cashback-lp .Section-steps .button-green + p.text-center {
    text-align: center;
    max-width: 347px;
    margin-left: auto;
    margin-right: auto; }
  .cashback-lp .Section-steps .terms-and-conditions p {
    margin: 0; }
    .cashback-lp .Section-steps .terms-and-conditions p a {
      font-size: 18px; }

.cashback-lp .logos {
  padding: 2%;
  margin-top: 2rem;
  margin-bottom: 2rem; }
  .cashback-lp .logos img {
    width: 16%;
    margin: 2%;
    display: block;
    float: left; }
    @media (max-width: 991px) {
      .cashback-lp .logos img {
        width: 40%;
        margin: 5%; }
        .cashback-lp .logos img:nth-child(3), .cashback-lp .logos img:nth-child(4), .cashback-lp .logos img:nth-child(5) {
          display: none; } }
    @media (max-width: 479px) {
      .cashback-lp .logos img {
        width: 80%;
        margin-left: auto;
        margin-right: auto; } }

.cashback-lp .Section.gray-bg {
  background: #888888;
  background: radial-gradient(circle at 50% 90%, #bcbcbc 0%, #0b1119 75%);
  overflow: hidden;
  position: relative;
  color: #fff; }
  .cashback-lp .Section.gray-bg p.button-green,
  .cashback-lp .Section.gray-bg .button-green + p.text-center {
    margin-left: 0; }
    @media (max-width: 992px) {
      .cashback-lp .Section.gray-bg p.button-green,
      .cashback-lp .Section.gray-bg .button-green + p.text-center {
        margin-left: auto;
        margin-right: auto; } }
  @media (min-width: 992px) {
    .cashback-lp .Section.gray-bg {
      padding-bottom: 7rem;
      padding-top: 2rem; } }
  .cashback-lp .Section.gray-bg .Section-slant-overlay {
    background: #00afcf; }
  .cashback-lp .Section.gray-bg .container-fluid {
    position: relative;
    z-index: 2; }
  .cashback-lp .Section.gray-bg h1.Section-title {
    color: #00c5e8;
    margin-bottom: 2rem;
    text-align: left; }
  @media (min-width: 62em) {
    .cashback-lp .Section.gray-bg {
      padding-top: 4rem; }
      .cashback-lp .Section.gray-bg h1.Section-title {
        font-size: 2.125rem;
        line-height: 2.75rem;
        margin-bottom: 2rem; }
      .cashback-lp .Section.gray-bg h2.Section-title {
        font-size: 1.125rem;
        letter-spacing: 0.07rem;
        line-height: 1.6875rem;
        margin-bottom: 1.75rem; }
      .cashback-lp .Section.gray-bg .watch-link a {
        font-size: 1rem; }
      .cashback-lp .Section.gray-bg p {
        margin-bottom: 2rem; }
      .cashback-lp .Section.gray-bg .box-feature {
        margin: 5px 0 2.25rem 55px;
        padding: 1rem 75px 0 0; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.Section-learn-lists {
  padding-top: 0; }
  .Section-learn-lists .list-header {
    height: 10rem;
    position: relative; }
  .Section-learn-lists h2 {
    bottom: 0;
    position: absolute;
    width: 100%; }
  .Section-learn-lists .link-list {
    margin-top: -20px; }
  .Section-learn-lists p {
    margin: 0 0 12px; }
    .Section-learn-lists p a {
      background: #fff;
      border-left: 5px solid #0069d2;
      color: #000;
      display: block;
      padding: 2rem 4rem 2rem 4.75rem;
      position: relative; }
      .Section-learn-lists p a:before, .Section-learn-lists p a:after {
        color: #0a264d;
        content: '\e62f';
        font: normal normal 2.2rem 'icomoon';
        left: 20px;
        margin-top: -1rem;
        position: absolute;
        top: 50%; }
      .Section-learn-lists p a:before {
        color: #00c5e8;
        content: '\e612';
        font-size: 1.9rem;
        left: auto;
        right: 1.625rem; }
  .Section-learn-lists .col-md-6:last-child h2 {
    color: #1ab99f; }
  .Section-learn-lists .col-md-6:last-child p a {
    border-left-color: #1ab99f; }
  @media (min-width: 768px) {
    .Section-learn-lists .col-md-6:first-child {
      padding-right: 2rem; }
    .Section-learn-lists .col-md-6:last-child {
      padding-left: 2rem; } }

.Section--Platform-guide .container-fluid {
  padding-left: 12px;
  padding-right: 12px; }

.Section--Platform-guide .col-md-6 {
  padding-right: 0;
  background-color: #00c5e8; }
  .Section--Platform-guide .col-md-6 img {
    display: block;
    position: relative; }

.Section--Platform-guide .col-md-4 {
  padding-top: 3rem; }

.Section--Platform-guide.-grey .col-md-6 {
  background-color: #f1f2f4; }

@media (min-width: 768px) {
  .Section--Platform-guide .container-fluid {
    padding-left: 12px;
    padding-right: 12px; }
  .Section--Platform-guide .col-md-6 {
    min-height: 400px; }
    .Section--Platform-guide .col-md-6 img {
      position: absolute;
      bottom: 0;
      right: 0; } }

@media (min-width: 1400px) {
  .Section--Platform-guide .col-wi-6 .Button {
    min-width: 190px; } }

.SupportTopics .icon-image {
  margin-bottom: 0;
  margin-right: 10px;
  margin-top: 0;
  vertical-align: middle; }

.SupportTopics a.Button {
  max-width: 100%;
  padding-top: 0.3rem !important; }

@media (max-width: 61.99em) and (min-width: 48em) {
  .SupportTopics ul li:nth-child(2n + 1) {
    clear: both; }
  .SupportTopics ul li:nth-child(3n + 1) {
    clear: none; } }

@media (min-width: 62em) {
  .SupportTopics ul li:nth-child(3n + 1) {
    clear: both; }
  .SupportTopics ul li:nth-child(4n + 1) {
    clear: none; } }

.Section.Glossary {
  padding: 3rem 0 5rem; }

@media (min-width: 62em) {
  .Glossary-item {
    width: 7.6923%; } }

.LearnFAQs {
  padding-top: 3rem; }
  .LearnFAQs h2.Section-title {
    margin-bottom: 1rem; }
  .LearnFAQs p {
    margin-bottom: 4rem; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
ul.faq-topics {
  margin-bottom: 2rem; }
  @media (min-width: 48em) and (max-width: 61.99em) {
    ul.faq-topics {
      margin-right: 1.5rem; } }

.LegalContent h1.Section-title {
  line-height: 2.5rem;
  margin-bottom: 2.3125rem;
  text-align: left; }

.LegalContent h2.Section-title {
  font-family: 'ubunturegular';
  font-size: 1.625rem;
  letter-spacing: 0.14625rem;
  line-height: 2rem;
  margin-bottom: 1.375rem;
  text-align: left; }

.LegalContent h3.Section-title {
  font-family: 'ubunturegular';
  font-size: 1.25rem;
  letter-spacing: 0.09375rem;
  line-height: 1.625rem;
  margin-bottom: 1rem;
  text-align: left; }

.LegalContent p + h3.Section-title {
  margin-top: 2.75rem; }

.LegalContent ul li {
  margin-bottom: 1.5625rem; }

@media (min-width: 30em) {
  .LegalContent .row .col-sm-6 {
    padding-left: 1rem; }
  .LegalContent .row .col-sm-6:first-child {
    padding-left: 6px;
    padding-right: 1rem; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
.sb-cost-overview-banner {
  float: left;
  width: 100%;
  font-family: latoregular, sans-serif;
  color: #ffffff;
  text-align: center;
  margin: 0px;
  background-image: url("https://assets.cmcmarkets.com/images/home-devices-dark-mosaic-background.png");
  height: 80px;
  padding: 30px 0 20px 0; }
  @media (min-width: 992px) {
    .sb-cost-overview-banner {
      padding-top: 50px;
      height: 120px; } }
  .sb-cost-overview-banner .container-fluid {
    padding: 0; }
  .sb-cost-overview-banner h3 {
    font-family: latoregular, sans-serif;
    text-transform: none;
    color: #ffffff;
    font-size: 18px; }
    @media (min-width: 480px) {
      .sb-cost-overview-banner h3 {
        font-size: 22px; } }
  .sb-cost-overview-banner a {
    color: #ffffff; }
    .sb-cost-overview-banner a.active {
      color: #00c5e8;
      border-bottom: 3px solid #00c5e8;
      padding: 0 0 15px 0;
      display: -webkit-inline-box; }
  .sb-cost-overview-banner p {
    text-align: right;
    font-size: 18px; }
    @media (min-width: 480px) {
      .sb-cost-overview-banner p {
        font-size: 22px;
        letter-spacing: 1px; } }
    @media (min-width: 768px) {
      .sb-cost-overview-banner p {
        text-align: right; } }
  .sb-cost-overview-banner .underline {
    border-bottom: #ffffff 1px solid; }

.sticky-product-tabs {
  transition-duration: 1s;
  position: fixed;
  z-index: 101;
  width: 100%;
  top: 0;
  box-shadow: 5px 5px 10px #D8D8D8;
  background: #fff; }
  @media (min-width: 768px) {
    .sticky-product-tabs .ppNav {
      padding: 10px 0; } }

.ppBanner {
  min-height: 435px; }
  .ppBanner a {
    color: #0a264d;
    font-size: 18px;
    line-height: 42px; }
    .ppBanner a img {
      margin: 0 0 0 15px; }
  .ppBanner h1 {
    color: #0a264d !important; }

.ppBannerTicks {
  text-align: center; }
  .ppBannerTicks br {
    display: none; }
    @media (min-width: 768px) {
      .ppBannerTicks br {
        display: block; } }
  .ppBannerTicks ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline-block;
    width: auto; }
    @media (min-width: 768px) {
      .ppBannerTicks ul {
        width: 100%; } }
    .ppBannerTicks ul li {
      font-size: 18px;
      display: block;
      padding: 0 0 0 50px;
      color: #0a264d;
      text-align: left;
      width: 100%;
      line-height: 18px; }
      @media (min-width: 768px) {
        .ppBannerTicks ul li {
          display: inline-block;
          margin-left: 50px;
          margin-bottom: 20px;
          text-align: center;
          width: auto; } }
      @media (min-width: 768px) {
        .ppBannerTicks ul li:first-child {
          margin-left: 0px; } }
    .ppBannerTicks ul li:before {
      content: url("https://assets.cmcmarkets.com/images/green-tick.svg");
      display: block;
      position: absolute;
      top: 0px;
      left: 0;
      width: 32px;
      height: 26px; }

.ppNav {
  background-image: url(https://assets.cmcmarkets.com/images/home-devices-dark-mosaic-background.png);
  background-size: 300%;
  padding: 0; }
  @media (max-width: 768px) {
    .ppNav {
      border-top: 1px solid #0a264d; } }
  .ppNav .container-fluid {
    padding: 0; }
  .ppNav .col-sm-3 {
    float: left;
    width: 25%;
    padding: 0; }
  .ppNav p {
    font-size: 10px;
    line-height: 20px;
    letter-spacing: 1px;
    padding: 0;
    margin: 0; }
  .ppNav a {
    color: #ffffff; }
    @media (max-width: 768px) {
      .ppNav a {
        display: block;
        padding: 20px 10px; } }
    @media (min-width: 769px) {
      .ppNav a:hover {
        color: #00c5e8;
        border-bottom: #00c5e8 2px solid; } }
  @media (min-width: 360px) {
    .ppNav p {
      font-size: 12px; } }
  @media (min-width: 480px) {
    .ppNav p {
      font-size: 16px; } }
  @media (min-width: 768px) {
    .ppNav {
      padding: 10px 0; }
      .ppNav .container-fluid {
        padding: 0 3em; }
      .ppNav .col-sm-3 {
        padding: 0 6px; }
      .ppNav p {
        font-size: 22px;
        line-height: 60px;
        letter-spacing: 3px;
        padding: 0;
        margin: 0; }
      .ppNav a:hover {
        border-bottom: #00c5e8 2px solid; } }
  @media (min-width: 1280px) {
    .ppNav {
      padding: 30px 0; } }

.sb-overview .Section .Section-title, .sb-markets .Section .Section-title, .sb-platform .Section .Section-title, .sb-costs .Section .Section-title {
  color: #0a264d; }
  @media (max-width: 768px) {
    .sb-overview .Section .Section-title, .sb-markets .Section .Section-title, .sb-platform .Section .Section-title, .sb-costs .Section .Section-title {
      font-size: 24px; } }

.sb-overview .awards, .sb-markets .awards, .sb-platform .awards, .sb-costs .awards {
  border-top: 1px solid #C5CACF;
  border-bottom: 1px solid #C5CACF; }

.sb-overview .lmsp-content .text-center, .sb-markets .lmsp-content .text-center, .sb-platform .lmsp-content .text-center, .sb-costs .lmsp-content .text-center {
  text-align: left; }
  @media (min-width: 481px) {
    .sb-overview .lmsp-content .text-center, .sb-markets .lmsp-content .text-center, .sb-platform .lmsp-content .text-center, .sb-costs .lmsp-content .text-center {
      text-align: center; } }

/* Navigation active states */
.sb-active-state, .sb-overview .ppNav #overview, .sb-markets .ppNav #markets, .sb-platform .ppNav #platform, .sb-costs .ppNav #costs {
  background-color: #ffffff; }
  .sb-active-state a, .sb-overview .ppNav #overview a, .sb-markets .ppNav #markets a, .sb-platform .ppNav #platform a, .sb-costs .ppNav #costs a {
    color: #00c5e8; }
    @media (min-width: 769px) {
      .sb-active-state a, .sb-overview .ppNav #overview a, .sb-markets .ppNav #markets a, .sb-platform .ppNav #platform a, .sb-costs .ppNav #costs a {
        border-bottom: #00c5e8 2px solid; } }
    @media (max-width: 768px) {
      .sb-active-state a:after, .sb-overview .ppNav #overview a:after, .sb-markets .ppNav #markets a:after, .sb-platform .ppNav #platform a:after, .sb-costs .ppNav #costs a:after {
        content: '';
        display: block;
        height: 2px;
        background: #00c5e8;
        margin: 0 10%;
        width: 80%; } }
    @media (min-width: 480px) and (max-width: 768px) {
      .sb-active-state a:after, .sb-overview .ppNav #overview a:after, .sb-markets .ppNav #markets a:after, .sb-platform .ppNav #platform a:after, .sb-costs .ppNav #costs a:after {
        margin: 0 20%;
        width: 60%; } }
  @media (min-width: 768px) {
    .sb-active-state, .sb-overview .ppNav #overview, .sb-markets .ppNav #markets, .sb-platform .ppNav #platform, .sb-costs .ppNav #costs {
      background-color: transparent; } }

.sb-platform {
  /*.awards .year {
    background-size: auto;
    float: none;
    font-size: 20px;
    height: 118px;
    margin: 8px 0 0;
    padding-top: 30px;
    width: auto;
  }

  .awards .category, .awards .award {
    text-align: center !important;
  }

  .awards .col-lg-3 {
    min-height: 230px;
  }*/ }

.ppCrumbs {
  display: block;
  border-bottom: 1px solid #c5cacf; }
  .ppCrumbs .container-fluid {
    max-width: none;
    min-width: auto;
    padding: 0; }
  .ppCrumbs .list {
    /*overflow-x: scroll;*/
    /* Needs style to hide scroll bar for use */
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    position: relative;
    min-height: 45px;
    text-align: center;
    padding: 0;
    background-color: #fff; }
    @media (min-width: 600px) {
      .ppCrumbs .list {
        width: 100%; } }
    @media (min-width: 992px) {
      .ppCrumbs .list {
        width: auto;
        overflow: hidden; } }
  .ppCrumbs ul {
    position: relative;
    top: 0;
    left: 0;
    width: auto;
    margin: 0;
    padding: 0 0 0 4px;
    list-style: none;
    display: block; }
    @media (min-width: 768px) {
      .ppCrumbs ul {
        display: inline-block; } }
    .ppCrumbs ul li {
      margin: 0;
      padding: 0;
      border-left: none;
      display: inline-block;
      vertical-align: middle;
      /*min-width: 100px;*/ }
      .ppCrumbs ul li:first-child {
        border-left: 0; }
      .ppCrumbs ul li:before {
        content: none; }
      .ppCrumbs ul li a {
        position: relative;
        padding: 0;
        margin: 7px 15px;
        font-size: 12px;
        display: inline-block;
        color: #c5cacf;
        line-height: 24px;
        letter-spacing: 1px; }
        .ppCrumbs ul li a.active, .ppCrumbs ul li a:hover {
          color: #0a264d; }
          @media (max-width: 1200px) {
            .ppCrumbs ul li a.active, .ppCrumbs ul li a:hover {
              border-bottom: 1px solid; } }
  @media (min-width: 1200px) {
    .ppCrumbs .container-fluid {
      padding: 0 3em; }
    .ppCrumbs ul {
      width: auto;
      display: inline-block;
      padding: 0; }
      .ppCrumbs ul li {
        float: none;
        display: inline-block;
        border-left: 1px solid #c5cacf; }
        .ppCrumbs ul li a {
          padding: 0 50px;
          font-size: 15px;
          line-height: 34px;
          letter-spacing: 1px; } }

.ppCta {
  text-align: center; }
  .ppCta a, .ppCta div {
    display: inline-block; }
  .ppCta a {
    margin-right: 20px; }
    .ppCta a:first-child {
      margin-bottom: 20px; }
  .ppCta div a {
    margin-bottom: 5px !important; }
  .ppCta .Button {
    min-width: 260px;
    padding-left: 20px !important;
    padding-right: 20px !important; }
    @media (min-width: 481px) {
      .ppCta .Button {
        min-width: 0; } }

.ppCta-left .ppCta {
  text-align: left; }

.ppLightGrey {
  background: #f9f9f9; }

.ppMarg40 {
  margin: 40px 0; }
  .ppMarg40 img {
    height: 50px;
    margin-top: 0;
    margin-bottom: 0; }
    @media (min-width: 481px) {
      .ppMarg40 img {
        height: 65px;
        margin-top: 2rem;
        margin-bottom: 2rem; } }
  .ppMarg40 p {
    font-size: 18px;
    color: #0a264d;
    float: left; }
    @media (min-width: 481px) {
      .ppMarg40 p {
        float: none; } }
    .ppMarg40 p span {
      font-size: 14px;
      line-height: 16px;
      color: #979b9e;
      display: block;
      margin: 10px 0; }
  @media (max-width: 768px) {
    .ppMarg40 p {
      text-align: left; } }
  @media (min-width: 769px) {
    .ppMarg40 .col-md-2 .ppProductIcon img {
      opacity: 0; }
    .ppMarg40 .col-md-2 .ppProductIcon .hover-div {
      position: absolute;
      margin-top: 2rem;
      width: 100%;
      height: 65px; }
    .ppMarg40 .col-md-2 .hover-div {
      background-image: url("https://assets.cmcmarkets.com/fonts/indices-icn.svg?v=070916");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: 45%; }
    .ppMarg40 .col-md-2:nth-child(2) .hover-div {
      background-image: url("https://assets.cmcmarkets.com/fonts/forex-icn.svg?v=070916"); }
    .ppMarg40 .col-md-2:nth-child(3) .hover-div {
      background-image: url("https://assets.cmcmarkets.com/fonts/commodities-icn.svg?v=070916"); }
    .ppMarg40 .col-md-2:nth-child(4) .hover-div {
      background-image: url("https://assets.cmcmarkets.com/fonts/shares-icn.svg?v=070916"); }
    .ppMarg40 .col-md-2:nth-child(5) .hover-div {
      background-image: url("https://assets.cmcmarkets.com/fonts/treasuries-icn.svg?v=070916"); }
    .ppMarg40 .col-md-2:hover:nth-child(1) .hover-div {
      background-image: url("https://assets.cmcmarkets.com/fonts/indices-icn-hover.svg"); }
    .ppMarg40 .col-md-2:hover:nth-child(2) .hover-div {
      background-image: url("https://assets.cmcmarkets.com/fonts/forex-icn-hover.svg"); }
    .ppMarg40 .col-md-2:hover:nth-child(3) .hover-div {
      background-image: url("https://assets.cmcmarkets.com/fonts/commodities-icn-hover.svg"); }
    .ppMarg40 .col-md-2:hover:nth-child(4) .hover-div {
      background-image: url("https://assets.cmcmarkets.com/fonts/shares-icn-hover.svg"); }
    .ppMarg40 .col-md-2:hover:nth-child(5) .hover-div {
      background-image: url("https://assets.cmcmarkets.com/fonts/treasuries-icn-hover.svg"); } }

.ppOrder ul {
  margin-left: 0px;
  padding-left: 0px; }

.ppOrder ul li {
  padding: 11px 0 0 50px;
  width: 100%;
  display: block; }

.ppOrder ul li:before {
  content: '';
  width: 37px;
  height: 37px;
  background: url(https://assets.cmcmarkets.com/images/one-click-icon.png) no-repeat;
  background-position: center center !important; }

.ppOrder .ppLadder:before {
  background: url(https://assets.cmcmarkets.com/images/price-ladder-icon.png) no-repeat; }

.ppOrder .ppBoundary:before {
  background: url(https://assets.cmcmarkets.com/images/1522148135_boundary-orders.png) no-repeat; }

.ppOrder .ppGuaranteed:before {
  background: url(https://assets.cmcmarkets.com/images/1522148146_guaranteed-stop-loss-icon.png) no-repeat; }

.ppOrder .ppSim:before {
  background: url(https://assets.cmcmarkets.com/images/1522148140_copy-tech-analysis-med-blue.png) no-repeat; }

.ppLeftImage {
  background-image: url("https://assets.cmcmarkets.com/images/Trade-directly-from-charts1-1023x629.png");
  background-repeat: no-repeat;
  width: 120%;
  height: 629px;
  background-position: 82%;
  margin-left: -10%; }
  @media (min-width: 480px) and (max-width: 768px) {
    .ppLeftImage {
      margin-left: -60px; } }
  @media (min-width: 768px) {
    .ppLeftImage {
      width: 100%;
      margin-left: -30px;
      background-position: right center; } }

.ppNoPad {
  padding: 3rem 0 1.5rem 0; }

.ppImgCol {
  padding: 0; }

.ppImageMaxWidth {
  max-width: 100%; }

.ppCenterMobile {
  text-align: center; }

@media (min-width: 769px) {
  .ppImageFull {
    padding: 3rem 0 1.5rem 0; }
  .ppImageFull .container-fluid {
    max-width: none; }
  .ppRightCol {
    padding-left: 50px; }
  .ppColMax {
    max-width: 641px; }
  .ppTextMarg {
    margin: 4.5rem 0 2rem 0; }
  .ppOrder ul li {
    display: inline-block;
    width: 50%; }
  .ppCenterMobile {
    text-align: left; } }

/*========================
////////// ALL ///////////
=========================*/
.large-promo-copy {
  font-size: 20px;
  color: #0a264d;
  line-height: 1.6; }

.awpb {
  /* .award-winning-platform-banner */
  padding: 2.5em 0 1.5em 0;
  background-color: #0a264d; }
  .awpb .awpb-content {
    width: 100%;
    margin: 0 auto;
    text-align: center; }
    @media (min-width: 769px) {
      .awpb .awpb-content .google-play-icon {
        background: transparent url("https://assets.cmcmarkets.com/images/google-play-white1x.svg") no-repeat center;
        background-size: contain; }
        .awpb .awpb-content .google-play-icon img {
          opacity: 0; }
        .awpb .awpb-content .google-play-icon:hover {
          background: transparent url("https://assets.cmcmarkets.com/images/google-play-brand-blue.svg") no-repeat center; }
      .awpb .awpb-content .appstore-icon {
        background: transparent url("https://assets.cmcmarkets.com/images/apple-logo-white1x.svg") no-repeat center;
        background-size: contain; }
        .awpb .awpb-content .appstore-icon img {
          opacity: 0; }
        .awpb .awpb-content .appstore-icon:hover {
          background: transparent url("https://assets.cmcmarkets.com/images/apple-logo-brand-blue.svg") no-repeat center; } }
    .awpb .awpb-content h2 {
      font-size: 2.1rem;
      font-family: ubuntulight, sans-serif;
      color: white;
      text-align: center; }
    .awpb .awpb-content .awpb-copy {
      text-align: center;
      font-size: 1.1rem;
      color: #00c5e8; }
    .awpb .awpb-content a {
      display: block;
      vertical-align: top;
      margin: 1em 0 1em 0; }
      @media (min-width: 380px) {
        .awpb .awpb-content a {
          display: inline-block;
          margin: 0 25px 0 0; } }
      .awpb .awpb-content a img {
        margin: 0; }
        @media (min-width: 380px) {
          .awpb .awpb-content a img {
            margin: 2em 0; } }
    .awpb .awpb-content .awpb-cta {
      display: inline-block;
      vertical-align: top;
      margin: 1em 0; }
      @media (min-width: 380px) {
        .awpb .awpb-content .awpb-cta {
          margin: 2em 0; } }
      .awpb .awpb-content .awpb-cta a {
        min-width: 180px;
        margin: 0;
        padding-left: 0;
        padding-right: 0; }
      .awpb .awpb-content .awpb-cta p {
        color: white;
        text-align: center;
        margin: 0; }
    @media (min-width: 768px) {
      .awpb .awpb-content {
        width: 616px; } }

.lmsp {
  /* .lmsb = "Learn more about spread betting" */ }
  .lmsp .lmsp-content {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    /* END list */ }
    @media (min-width: 768px) {
      .lmsp .lmsp-content {
        width: 645px; } }
    .lmsp .lmsp-content h2 {
      font-size: 2.1rem;
      font-family: ubuntulight, sans-serif;
      color: #0a264d;
      text-align: center; }
    .lmsp .lmsp-content .learn-list {
      border-top: 1px solid #D8D8D8;
      /* END li */ }
      .lmsp .lmsp-content .learn-list li {
        margin: 0;
        padding: 0;
        text-align: left;
        border-bottom: 1px solid #D8D8D8;
        /* END a */ }
        .lmsp .lmsp-content .learn-list li:before {
          /* Switch off default list style*/
          content: '';
          display: none; }
        .lmsp .lmsp-content .learn-list li a {
          display: block;
          padding: 25px 60px 25px 0; }
          .lmsp .lmsp-content .learn-list li a:before {
            content: '\e612';
            position: absolute;
            top: 50%;
            margin-top: -15px;
            left: auto;
            right: 10px;
            font: normal normal 2.2rem icomoon;
            font-size: 1.9rem;
            text-align: left; }
          .lmsp .lmsp-content .learn-list li a h4 {
            font-size: 1.1rem;
            margin: 0;
            text-transform: none;
            color: #333333; }
          .lmsp .lmsp-content .learn-list li a p {
            margin: 0;
            color: #58585a; }
          .lmsp .lmsp-content .learn-list li a:hover h4, .lmsp .lmsp-content .learn-list li a:hover p {
            color: #0a264d; }
    .lmsp .lmsp-content .lmsp-more {
      font-size: 1.1rem; }
    .lmsp .lmsp-content .lmsp-ctas {
      text-align: center; }
      .lmsp .lmsp-content .lmsp-ctas a, .lmsp .lmsp-content .lmsp-ctas div {
        display: inline-block; }
      .lmsp .lmsp-content .lmsp-ctas div {
        margin: 20px; }
        @media (min-width: 635px) {
          .lmsp .lmsp-content .lmsp-ctas div {
            margin-top: 0; } }
      .lmsp .lmsp-content .lmsp-ctas a {
        margin-right: 0; }
        @media (min-width: 635px) {
          .lmsp .lmsp-content .lmsp-ctas a {
            margin-right: 20px; } }
    .lmsp .lmsp-content .questions {
      font-size: 1.9rem; }

.sb-terms-section {
  padding-top: 4em; }

.sb-terms-container {
  padding: 2.5em 0 0 0; }

/*=============================
////////// OVERVIEW ///////////
==============================*/
/* Start spread betting */
.Section.ssb-vid .Section-title {
  margin-bottom: 2.5em;
  color: #0a264d; }

/* What can I trade */
.sb-overview #what-can-i-trade .text-center {
  text-align: left; }
  @media (min-width: 481px) {
    .sb-overview #what-can-i-trade .text-center {
      text-align: center; } }

.sb-overview #what-can-i-trade .ppMarg40 a {
  width: 100%;
  display: inline-block; }

.sb-overview #what-can-i-trade .ppMarg40 .ppProductText > .inner-link {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  margin: 6px 0 0 0px;
  text-transform: uppercase;
  text-decoration: none;
  color: #00c5e8; }

.sb-overview #what-can-i-trade .ppMarg40 .col-md-2 {
  border: 1px solid #ffffff; }
  @media (min-width: 480px) {
    .sb-overview #what-can-i-trade .ppMarg40 .col-md-2:hover {
      border: 1px solid #f1f2f4; } }
  .sb-overview #what-can-i-trade .ppMarg40 .col-md-2:hover img {
    color: #00c5e8; }

.sb-overview .ppProductIcon {
  float: left;
  width: 70px;
  margin-right: 20px; }
  @media (min-width: 481px) {
    .sb-overview .ppProductIcon {
      float: none;
      width: auto;
      margin-right: 0; } }

.ssb-vid video {
  width: 100%; }
  @media (min-width: 992px) {
    .ssb-vid video {
      width: auto; } }

.ssb-vid p {
  position: relative;
  padding-left: 40px;
  border-left: 2px dotted #02c4e8;
  margin: 0 0 0 40px;
  padding-bottom: 2em; }
  @media (min-width: 992px) {
    .ssb-vid p {
      padding-left: 65px; } }
  @media (min-width: 992px) {
    .ssb-vid p {
      margin: 0 0 0 -20px; } }
  .ssb-vid p:before {
    z-index: 2;
    position: absolute;
    top: -5px;
    left: -22px;
    padding: 15px;
    font-size: 23px;
    color: #00c5e8; }
  .ssb-vid p:after {
    content: '';
    z-index: 1;
    position: absolute;
    top: 0px;
    left: -23px;
    width: 45px;
    height: 45px;
    padding: 20px;
    border: 2px solid #00c5e8;
    border-radius: 70px;
    background: white; }

.ssb-vid p:first-child:before {
  content: '1'; }

.ssb-vid p:first-child + p:before {
  content: '2'; }

.ssb-vid p:first-child + p + p:before {
  content: '3'; }

.ssb-vid p:first-child + p + p + p:before {
  content: '4'; }

.ssb-vid p:first-child + p + p + p + p:before {
  content: '5'; }

.ssb-vid p:first-child + p + p + p + p + p:before {
  content: '6'; }

.ssb-vid p:last-child {
  border: none; }

.new-product-mobile-video-btn {
  background: #f1f2f4;
  padding: 2em;
  cursor: pointer; }
  .new-product-mobile-video-btn span {
    font-family: 'latobold';
    font-size: 20px;
    line-height: 24px;
    letter-spacing: 1px;
    color: #0a264d;
    display: block;
    margin: 0 0 .5em 0; }
  .new-product-mobile-video-btn img {
    margin: 0; }

.htmr {
  /* How to manage risk */ }
  .htmr ul li {
    padding: 11px 0 0 50px; }
    .htmr ul li:before {
      content: '';
      width: 32px;
      height: 38px;
      background: url(https://assets.cmcmarkets.com/images/stop-loss-icon.png) no-repeat; }
    .htmr ul li.stop-loss-trailing:before {
      background-image: url(https://assets.cmcmarkets.com/images/trailing-stop-loss-icon.png); }
    .htmr ul li.stop-los-guaranteed:before {
      background-image: url(https://assets.cmcmarkets.com/images/guaranteed-stop-loss-icon.png); }

/*=============================
////////// PLATFORM ///////////
=============================*/
/*=====================
//////// COSTS ////////
======================*/
.gfsp {
  /* global finance services provider */ }
  .gfsp img {
    width: auto;
    height: 48px;
    margin: -20px auto 25px auto;
    text-align: center; }

/*============================
////////// MARKETS ///////////
============================*/
/*
  .price-feed-search : See _price-feed-search.scss
*/
.csam {
  /* Competitive spreads and margins */ }
  .csam .market-price-widget {
    /*    @media (min-width: 1240px){
            width: 1220px;
        }*/ }
    .csam .market-price-widget table th {
      font-size: .8375rem; }
    .csam .market-price-widget .prices {
      background: none; }
    .csam .market-price-widget .table {
      margin-bottom: none; }
    .csam .market-price-widget #notes {
      text-align: right; }
    @media (min-width: 768px) {
      .csam .market-price-widget .arrows a.left,
      .csam .market-price-widget .arrows a.right {
        top: 37%; } }
    @media (min-width: 992px) {
      .csam .market-price-widget .arrows a.left,
      .csam .market-price-widget .arrows a.right {
        top: 46%; } }

/* TABLE size - supported by JS search for tallest TD */
.sb-overview .market-price-widget, .sb-markets .market-price-widget, .sb-platform .market-price-widget, .sb-costs .market-price-widget {
  clear: both; }
  .sb-overview .market-price-widget table th,
  .sb-overview .market-price-widget table td, .sb-markets .market-price-widget table th,
  .sb-markets .market-price-widget table td, .sb-platform .market-price-widget table th,
  .sb-platform .market-price-widget table td, .sb-costs .market-price-widget table th,
  .sb-costs .market-price-widget table td {
    padding: 0.45rem 1.6rem; }
  @media (min-width: 480px) and (max-width: 768px) {
    .sb-overview .market-price-widget li, .sb-markets .market-price-widget li, .sb-platform .market-price-widget li, .sb-costs .market-price-widget li {
      font-size: 12px; } }

@media (max-width: 768px) {
  .sb-overview table.stay-formed td, .sb-overview table.stay-formed th, .sb-markets table.stay-formed td, .sb-markets table.stay-formed th, .sb-platform table.stay-formed td, .sb-platform table.stay-formed th, .sb-costs table.stay-formed td, .sb-costs table.stay-formed th {
    font-size: 12px;
    padding: 1rem .2rem;
    line-height: 15px; }
    .sb-overview table.stay-formed td:first-child, .sb-overview table.stay-formed td:last-child, .sb-overview table.stay-formed th:first-child, .sb-overview table.stay-formed th:last-child, .sb-markets table.stay-formed td:first-child, .sb-markets table.stay-formed td:last-child, .sb-markets table.stay-formed th:first-child, .sb-markets table.stay-formed th:last-child, .sb-platform table.stay-formed td:first-child, .sb-platform table.stay-formed td:last-child, .sb-platform table.stay-formed th:first-child, .sb-platform table.stay-formed th:last-child, .sb-costs table.stay-formed td:first-child, .sb-costs table.stay-formed td:last-child, .sb-costs table.stay-formed th:first-child, .sb-costs table.stay-formed th:last-child {
      padding: 1rem 10px; }
  .sb-overview table.stay-formed td:first-child, .sb-markets table.stay-formed td:first-child, .sb-platform table.stay-formed td:first-child, .sb-costs table.stay-formed td:first-child {
    font-weight: bold; } }

@media (max-width: 399px) {
  .sb-overview table.stay-formed td, .sb-overview table.stay-formed th, .sb-markets table.stay-formed td, .sb-markets table.stay-formed th, .sb-platform table.stay-formed td, .sb-platform table.stay-formed th, .sb-costs table.stay-formed td, .sb-costs table.stay-formed th {
    height: auto !important; } }

.ppSupportBanner span {
  color: #0a264d !important; }

.ppSupportBanner .text-center {
  text-align: left; }
  @media (min-width: 481px) {
    .ppSupportBanner .text-center {
      text-align: center; } }

.ppSupportImageWrap {
  display: inline-block;
  width: 65px;
  text-align: left; }

.ppSupportBanner .support-item {
  text-align: left !important; }

@media (min-width: 481px) {
  .ppSupportBanner .support-item {
    text-align: center !important; }
  .ppSupportImageWrap {
    width: auto; } }

#how-do-i-start-spread-betting h2.text-center, #risk-management .text-center, #instrument-search .text-center, #spreads-margins .text-center, .sb-platform .Section-title {
  text-align: left; }
  @media (min-width: 481px) {
    #how-do-i-start-spread-betting h2.text-center, #risk-management .text-center, #instrument-search .text-center, #spreads-margins .text-center, .sb-platform .Section-title {
      text-align: center; } }

#instrument-search .search-input {
  border-left: 1px solid #0a264d;
  border-radius: 0; }
  @media (min-width: 481px) {
    #instrument-search .search-input {
      border-left: 8px solid #0a264d; } }

.ppContainer {
  margin: 0 auto;
  min-width: 320px;
  max-width: 1282px;
  padding-left: 1.2em;
  padding-right: 1.2em; }
  @media (min-width: 481px) {
    .ppContainer {
      padding-left: 3rem;
      padding-right: 3rem; } }

.ppTestGrantClick .video-play-icon {
  background: transparent url("https://assets.cmcmarkets.com/images/watch-video-btn.svg") no-repeat center;
  background-size: contain; }
  .ppTestGrantClick .video-play-icon img {
    opacity: 0; }
  .ppTestGrantClick .video-play-icon:hover {
    background: transparent url("https://assets.cmcmarkets.com/images/Play-button-dark-blue.svg") no-repeat center;
    background-size: contain; }

.cmc-pro {
  padding-top: 0;
  /*General styles*/
  /*Buttons & links*/
  /*Top banner section*/
  /*Why CMC Pro?*/
  /*PEGA CHAT STYLES*/ }
  .cmc-pro.landingpage {
    padding-top: 0 !important; }
  .cmc-pro header {
    display: flex;
    justify-content: space-between;
    max-width: 1282px;
    margin: 0 auto; }
    .cmc-pro header nav ul {
      display: flex;
      justify-content: center;
      margin: 0; }
      .cmc-pro header nav ul li {
        margin: 0;
        padding: 10px 0; }
        .cmc-pro header nav ul li a {
          border-right: 1px solid #000;
          text-transform: uppercase;
          color: #000;
          font-size: 12px;
          line-height: 14px;
          padding: 0 8px;
          display: inline-block;
          font-family: ModernEra, sans-serif; }
          .cmc-pro header nav ul li a.active {
            text-decoration: underline; }
          .cmc-pro header nav ul li a.first {
            padding-left: 0; }
          .cmc-pro header nav ul li a.last {
            border-right: 0; }
        .cmc-pro header nav ul li:before {
          display: none; }
    @media (max-width: 768px) {
      .cmc-pro header nav {
        display: none; } }
    .cmc-pro header p {
      margin: 0 32px 0 0;
      padding: 10px 0;
      font-size: 14px;
      line-height: 1.6em;
      font-family: ModernEraLight, sans-serif; }
      @media (max-width: 768px) {
        .cmc-pro header p {
          text-align: right;
          width: 100%; } }
  .cmc-pro footer {
    background: #1A2429;
    color: #fff;
    padding-top: 64px;
    position: relative;
    z-index: 0; }
    .cmc-pro footer p {
      font-size: 14px; }
    @media (max-width: 992px) {
      .cmc-pro footer {
        padding: 32px 16px; } }
    .cmc-pro footer .content {
      max-width: 1282px;
      width: 100%;
      margin: 0 auto; }
      .cmc-pro footer .content .logo {
        margin-bottom: 40px; }
        @media (max-width: 992px) {
          .cmc-pro footer .content .logo {
            margin-bottom: 32px; } }
      @media (max-width: 768px) {
        .cmc-pro footer .content .footer-links {
          border-top: 1px solid #979B9E;
          padding: 24px 0; } }
      .cmc-pro footer .content .footer-links ul {
        display: flex;
        padding: 0;
        margin: 0;
        justify-content: flex-end; }
        @media (max-width: 480px) {
          .cmc-pro footer .content .footer-links ul {
            justify-content: center; } }
        .cmc-pro footer .content .footer-links ul li {
          flex: 0 1 auto;
          padding: 0;
          margin: 0; }
          .cmc-pro footer .content .footer-links ul li:before {
            display: none; }
          .cmc-pro footer .content .footer-links ul li a {
            border-right: 1px solid #979B9E;
            padding: 0 16px;
            color: #fff;
            font-family: ModernEra, sans-serif; }
            .cmc-pro footer .content .footer-links ul li a.last {
              border: 0; }
      .cmc-pro footer .content .border {
        border-top: 1px solid #979B9E;
        padding-top: 24px; }
      .cmc-pro footer .content .footer-end {
        padding-bottom: 64px; }
        .cmc-pro footer .content .footer-end ul {
          padding: 0;
          margin: 0; }
          .cmc-pro footer .content .footer-end ul li {
            padding: 0;
            margin: 0;
            display: block;
            float: left; }
            .cmc-pro footer .content .footer-end ul li.last {
              padding-left: 16px;
              margin-left: auto;
              float: right; }
              @media (max-width: 1024px) {
                .cmc-pro footer .content .footer-end ul li.last {
                  float: none;
                  padding-top: 40px;
                  clear: both;
                  padding-left: 0;
                  text-align: center; } }
            .cmc-pro footer .content .footer-end ul li:before {
              display: none; }
            .cmc-pro footer .content .footer-end ul li a {
              border-right: 1px solid #fff;
              line-height: 1.4em;
              color: #fff;
              padding: 0 16px 0 0;
              margin-right: 16px;
              display: block;
              font-size: 13px; }
              .cmc-pro footer .content .footer-end ul li a.end {
                border-right: 0; }
              .cmc-pro footer .content .footer-end ul li a.first {
                padding-left: 0; }
  .cmc-pro .Section {
    padding-top: 56px; }
    @media (max-width: 768px) {
      .cmc-pro .Section {
        padding: 56px 24px 0; } }
  .cmc-pro .navCMC {
    /*display: none;*/ }
  .cmc-pro .title-1, .cmc-pro .title-2, .cmc-pro .title-3, .cmc-pro .tagline {
    color: #0a264d;
    font-family: ModernEraLight, sans-serif; }
  .cmc-pro .title-2 {
    margin-bottom: 32px;
    font-size: 28px;
    line-height: 34px;
    color: #0a264d;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: 0; }
    @media (max-width: 768px) {
      .cmc-pro .title-2 {
        margin-bottom: 24px; } }
  .cmc-pro .cta-primary a {
    font-size: 24px;
    padding: 18px 36px;
    background: linear-gradient(90deg, #98F1FE 0%, #66F4D3 100%);
    text-align: center;
    border-radius: 40px;
    color: #0a264d;
    display: inline-block;
    cursor: pointer;
    font-family: ModernEraLight, sans-serif; }
    .cmc-pro .cta-primary a:hover {
      background: #0a264d;
      border: 1px solid #fff;
      color: #fff;
      padding: 17px 36px; }
  .cmc-pro .cta-secondary a {
    font-size: 18px;
    text-align: center;
    border: 1px solid #00EDB6;
    border-radius: 30px;
    display: inline-block;
    padding: 10px 36px;
    margin: -8px auto 0;
    color: #000;
    cursor: pointer; }
    .cmc-pro .cta-secondary a:hover {
      border: 1px solid #0a264d;
      background: #00ed86;
      color: #0a264d; }
  .cmc-pro .cta-secondary-v2 a, .cmc-pro .cta-secondary-v2 input {
    font-size: 18px;
    text-align: center;
    border-radius: 30px;
    display: inline-block;
    padding: 10px 36px;
    margin: -8px auto 0;
    color: #0a264d;
    min-width: 200px;
    background: linear-gradient(90deg, #98F1FE 0%, #66F4D3 100%);
    cursor: pointer; }
    .cmc-pro .cta-secondary-v2 a:hover, .cmc-pro .cta-secondary-v2 input:hover {
      border: 1px solid #0a264d;
      background: #00ed86;
      color: #0a264d;
      padding: 9px 36px; }
  .cmc-pro .link-basic a {
    border-bottom: 1px solid rgba(0, 130, 255, 0.8);
    color: rgba(0, 130, 255, 0.8); }
  .cmc-pro .link-anchor {
    position: relative; }
    .cmc-pro .link-anchor a:after {
      position: relative;
      content: "";
      border-right: 2px solid rgba(0, 130, 255, 0.8);
      border-bottom: 2px solid rgba(0, 130, 255, 0.8);
      width: 12px;
      height: 12px;
      right: auto;
      display: inline-block;
      top: -1px;
      transform: rotate(45deg);
      margin-left: 10px; }
  .cmc-pro .page-end {
    border-top: 1px solid #C7C9D1;
    padding-top: 32px;
    line-height: 24px; }
  .cmc-pro a {
    color: #0082ff; }
    .cmc-pro a:hover {
      color: #00DEFF; }
  .cmc-pro p {
    font-family: ModernEraLight, sans-serif; }
  .cmc-pro .hero {
    min-height: 650px;
    background: url(https://assets.cmcmarkets.com/images/header_bckgrd_2560x650.jpg) no-repeat center top;
    background-size: cover; }
    .cmc-pro .hero.no-bg {
      min-height: 0;
      background: none; }
      .cmc-pro .hero.no-bg .logo {
        margin: 0 auto 80px; }
      .cmc-pro .hero.no-bg .title-1 {
        margin-bottom: 24px; }
    @media (max-width: 320px) {
      .cmc-pro .hero {
        padding: 32px 24px 0; } }
    .cmc-pro .hero .logo {
      width: 172px;
      margin: 0 auto 200px; }
      @media (max-width: 320px) {
        .cmc-pro .hero .logo {
          margin: 0 auto 80px; } }
      @media (max-width: 768px) {
        .cmc-pro .hero .logo {
          margin: 0 auto 80px; } }
      .cmc-pro .hero .logo img {
        margin: 0; }
    .cmc-pro .hero .title-1 {
      font-size: 58px;
      line-height: 70px;
      margin-bottom: 56px;
      color: #0a264d;
      font-family: ModernEraLight, sans-serif;
      letter-spacing: 0.6rem; }
      @media (max-width: 480px) {
        .cmc-pro .hero .title-1 {
          font-size: 38px;
          line-height: 58px; } }
    .cmc-pro .hero .tagline {
      font-size: 24px;
      line-height: 28px;
      margin-bottom: 40px;
      padding: 0 40px; }
  .cmc-pro .why-cmc-pro {
    max-width: 1280px;
    margin: 0 auto;
    padding: 56px 0 0 0;
    /*background: #FAFBFB;*/ }
    .cmc-pro .why-cmc-pro p {
      font-size: 16px; }
    .cmc-pro .why-cmc-pro.icons-only {
      padding-top: 0; }
    .cmc-pro .why-cmc-pro .why-cmc-benefits {
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
      margin: 0 auto;
      padding: 0; }
      .cmc-pro .why-cmc-pro .why-cmc-benefits.border {
        border-bottom: 2px solid #ccc; }
      @media (max-width: 992px) {
        .cmc-pro .why-cmc-pro .why-cmc-benefits {
          display: block;
          border-bottom: 1px solid #ccc;
          max-width: 600px;
          width: 100%;
          margin: 0 auto 32px; } }
      .cmc-pro .why-cmc-pro .why-cmc-benefits li {
        padding: 0;
        margin: 40px 0 80px;
        position: relative; }
        @media (max-width: 992px) {
          .cmc-pro .why-cmc-pro .why-cmc-benefits li {
            width: 100%;
            display: block;
            padding: 24px;
            margin: 0;
            border-top: 1px solid #ccc; } }
        .cmc-pro .why-cmc-pro .why-cmc-benefits li .benefits-img {
          min-height: 100px; }
          @media (max-width: 992px) {
            .cmc-pro .why-cmc-pro .why-cmc-benefits li .benefits-img {
              display: inline-block;
              min-height: auto; } }
        .cmc-pro .why-cmc-pro .why-cmc-benefits li .benefits-icon, .cmc-pro .why-cmc-pro .why-cmc-benefits li .benefits-open {
          margin: 0 auto;
          display: block; }
          @media (max-width: 992px) {
            .cmc-pro .why-cmc-pro .why-cmc-benefits li .benefits-icon, .cmc-pro .why-cmc-pro .why-cmc-benefits li .benefits-open {
              margin: 0; } }
        @media (max-width: 992px) {
          .cmc-pro .why-cmc-pro .why-cmc-benefits li .benefits-icon {
            width: 50px;
            height: 50px; } }
        .cmc-pro .why-cmc-pro .why-cmc-benefits li .benefits-open {
          display: none; }
          @media (max-width: 992px) {
            .cmc-pro .why-cmc-pro .why-cmc-benefits li .benefits-open {
              display: block;
              position: absolute;
              top: 34px;
              right: 24px;
              width: 32px;
              height: 32px;
              background: url(https://assets.cmcmarkets.com/images/plus_symbol1x.svg) no-repeat 0 0;
              background-size: 32px; }
              .cmc-pro .why-cmc-pro .why-cmc-benefits li .benefits-open:hover {
                background: url(https://assets.cmcmarkets.com/images/plus_symbol-hover.svg) no-repeat 0 0; }
              .cmc-pro .why-cmc-pro .why-cmc-benefits li .benefits-open.open {
                background: url(https://assets.cmcmarkets.com/images/subtract_minus1x.svg) no-repeat 0 0;
                background-size: 32px; }
                .cmc-pro .why-cmc-pro .why-cmc-benefits li .benefits-open.open:hover {
                  background: url(https://assets.cmcmarkets.com/images/subtract_minus-hover.svg) no-repeat 0 0; } }
        .cmc-pro .why-cmc-pro .why-cmc-benefits li .title-3, .cmc-pro .why-cmc-pro .why-cmc-benefits li p {
          text-align: center; }
          @media (max-width: 992px) {
            .cmc-pro .why-cmc-pro .why-cmc-benefits li .title-3, .cmc-pro .why-cmc-pro .why-cmc-benefits li p {
              margin: 0;
              display: inline-block;
              text-align: left; } }
        .cmc-pro .why-cmc-pro .why-cmc-benefits li .title-3 {
          font-size: 26px;
          font-family: ModernEra, sans-serif;
          margin: 24px 0; }
          @media (max-width: 992px) {
            .cmc-pro .why-cmc-pro .why-cmc-benefits li .title-3 {
              font-size: 24px;
              margin: 24px 0;
              position: absolute;
              top: 0;
              left: 100px; } }
        .cmc-pro .why-cmc-pro .why-cmc-benefits li p {
          max-width: 210px; }
          @media (max-width: 992px) {
            .cmc-pro .why-cmc-pro .why-cmc-benefits li p {
              position: absolute;
              top: 50px;
              left: 100px;
              max-width: 100%; } }
        .cmc-pro .why-cmc-pro .why-cmc-benefits li .additional-content {
          border-top: 2px solid #0a264d;
          padding: 32px 8px 0; }
          .cmc-pro .why-cmc-pro .why-cmc-benefits li .additional-content p {
            text-align: left; }
          @media (max-width: 992px) {
            .cmc-pro .why-cmc-pro .why-cmc-benefits li .additional-content {
              display: none;
              border: 0;
              position: relative; }
              .cmc-pro .why-cmc-pro .why-cmc-benefits li .additional-content.open {
                display: block; }
              .cmc-pro .why-cmc-pro .why-cmc-benefits li .additional-content p {
                position: relative;
                top: auto;
                left: auto; } }
        .cmc-pro .why-cmc-pro .why-cmc-benefits li:before {
          display: none; }
    .cmc-pro .why-cmc-pro .protections-lost {
      max-width: 960px;
      margin: 0 auto 56px;
      padding: 0 16px;
      border-top: 1px solid #ccc; }
      .cmc-pro .why-cmc-pro .protections-lost .title-3 {
        text-transform: none;
        font-size: 22px;
        margin: 56px 0 32px; }
      .cmc-pro .why-cmc-pro .protections-lost p {
        margin-bottom: 0; }
  .cmc-pro .cmc-pro-banner {
    background: #0a264d; }
    .cmc-pro .cmc-pro-banner ul {
      display: flex;
      justify-content: center;
      max-width: 1280px;
      margin: 0 auto; }
      @media (max-width: 768px) {
        .cmc-pro .cmc-pro-banner ul {
          display: block;
          padding: 24px 0; } }
      .cmc-pro .cmc-pro-banner ul li {
        margin: 0;
        padding: 0;
        text-align: center; }
        .cmc-pro .cmc-pro-banner ul li p {
          margin: 36px 0;
          padding: 0 48px;
          border-right: 1px solid #fff;
          color: #fff;
          font-size: 20px;
          font-family: ModernEra, sans-serif; }
          @media (max-width: 768px) {
            .cmc-pro .cmc-pro-banner ul li p {
              border: 0;
              margin: 24px 0; } }
          .cmc-pro .cmc-pro-banner ul li p.last {
            border: 0; }
        .cmc-pro .cmc-pro-banner ul li:before {
          display: none; }
  .cmc-pro .cmc-pro-eligible {
    padding-top: 80px; }
    @media (max-width: 768px) {
      .cmc-pro .cmc-pro-eligible {
        padding: 32px 0 80px; } }
    .cmc-pro .cmc-pro-eligible .center-list {
      display: flex;
      justify-content: center; }
    .cmc-pro .cmc-pro-eligible .title-2 {
      padding: 0 34px; }
    .cmc-pro .cmc-pro-eligible .title-3 {
      margin-top: 64px;
      margin-bottom: 32px;
      font-family: ModernEra, sans-serif; }
    .cmc-pro .cmc-pro-eligible p {
      margin: 0; }
      .cmc-pro .cmc-pro-eligible p a {
        font-family: ModernEra, sans-serif; }
    .cmc-pro .cmc-pro-eligible li {
      font-family: ModernEraLight, sans-serif; }
      .cmc-pro .cmc-pro-eligible li:before {
        background: url(https://assets.cmcmarkets.com/images/green_arrow_arrow1x.svg) no-repeat 0 0;
        content: "";
        width: 24px; }
    @media (max-width: 768px) {
      .cmc-pro .cmc-pro-eligible .end-row {
        margin-bottom: 80px; } }
    .cmc-pro .cmc-pro-eligible .list {
      max-width: 560px; }
  .cmc-pro .cmc-pro-not-eligible .w440 {
    max-width: 440px;
    margin: 0 auto 54px; }
  .cmc-pro .cmc-pro-not-eligible .title-2 {
    font-size: 24px;
    text-transform: none; }
  .cmc-pro .cmc-pro-not-eligible .cta-secondary {
    margin-bottom: 4px; }
  .cmc-pro .cmc-pro-not-eligible .rw {
    margin-bottom: 80px; }
  .cmc-pro .cmc-pro-what-to-trade {
    background: #f1f2f4 !important; }
    .cmc-pro .cmc-pro-what-to-trade .h2 {
      margin-top: 56px;
      font-family: ModernEra, sans-serif; }
    .cmc-pro .cmc-pro-what-to-trade.LiveInfo .container-fluid {
      padding-top: 0; }
      @media (min-width: 992px) {
        .cmc-pro .cmc-pro-what-to-trade.LiveInfo .container-fluid {
          padding-top: 0; } }
  .cmc-pro .cmc-pro-bought-to-you {
    padding-bottom: 48px; }
  .cmc-pro .cmc-pro-apply-now {
    color: #fff;
    padding-top: 56px; }
    @media (max-width: 992px) {
      .cmc-pro .cmc-pro-apply-now {
        padding: 32px 0 56px; } }
    .cmc-pro .cmc-pro-apply-now .cmc-pro-buttons {
      margin-bottom: 57px; }
      .cmc-pro .cmc-pro-apply-now .cmc-pro-buttons .col-sm-6 {
        padding: 0;
        width: 50%;
        float: left; }
      .cmc-pro .cmc-pro-apply-now .cmc-pro-buttons p {
        display: inline-block;
        font-size: 18px;
        padding: 14px 40px;
        width: 280px;
        text-align: center;
        color: #0a264d;
        margin: 0;
        cursor: pointer; }
        @media (max-width: 992px) {
          .cmc-pro .cmc-pro-apply-now .cmc-pro-buttons p {
            padding: 14px 2px;
            width: 150px;
            font-size: 12px; } }
        @media (min-width: 320px) and (max-width: 768px) {
          .cmc-pro .cmc-pro-apply-now .cmc-pro-buttons p {
            padding: 14px 24px;
            width: 204px;
            font-size: 14px; } }
      .cmc-pro .cmc-pro-apply-now .cmc-pro-buttons .pro-not-client {
        background: grey;
        border-radius: 30px 0 0 30px;
        float: right; }
        .cmc-pro .cmc-pro-apply-now .cmc-pro-buttons .pro-not-client.active {
          background: linear-gradient(90deg, #98F1FE 0%, #66F4D3 100%); }
      .cmc-pro .cmc-pro-apply-now .cmc-pro-buttons .pro-already {
        background: grey;
        border-radius: 0 30px 30px 0;
        float: left; }
        .cmc-pro .cmc-pro-apply-now .cmc-pro-buttons .pro-already.active {
          background: linear-gradient(90deg, #98F1FE 0%, #66F4D3 100%); }
    .cmc-pro .cmc-pro-apply-now .icon1 {
      padding-top: 91px;
      margin-bottom: 32px;
      background: url(https://assets.cmcmarkets.com/images/step1-icon-faded.svg) no-repeat;
      background-position: center 25px; }
      .cmc-pro .cmc-pro-apply-now .icon1.active {
        background: url(https://assets.cmcmarkets.com/images/step1-icon-highlight.svg) no-repeat;
        background-position: center 25px; }
      @media (max-width: 992px) {
        .cmc-pro .cmc-pro-apply-now .icon1 {
          background-position: 0 25px !important; } }
    .cmc-pro .cmc-pro-apply-now .flex {
      display: flex;
      justify-content: center; }
      @media (max-width: 992px) {
        .cmc-pro .cmc-pro-apply-now .flex {
          display: block; } }
    .cmc-pro .cmc-pro-apply-now .icon2 {
      padding-top: 91px;
      margin-bottom: 32px;
      background: url(https://assets.cmcmarkets.com/images/step2-icon-faded.svg) no-repeat;
      background-position: center top; }
      .cmc-pro .cmc-pro-apply-now .icon2 .v1 {
        display: block; }
      .cmc-pro .cmc-pro-apply-now .icon2 .v2 {
        display: none; }
      .cmc-pro .cmc-pro-apply-now .icon2.active {
        background: url(https://assets.cmcmarkets.com/images/step2-icon-highlight.svg) no-repeat;
        background-position: center top; }
        .cmc-pro .cmc-pro-apply-now .icon2.active .v1 {
          display: none; }
        .cmc-pro .cmc-pro-apply-now .icon2.active .v2 {
          display: block; }
    .cmc-pro .cmc-pro-apply-now .icon3 {
      padding-top: 91px;
      margin-bottom: 32px;
      background: url(https://assets.cmcmarkets.com/images/step3-icon-faded.svg) no-repeat;
      background-position: center top; }
    .cmc-pro .cmc-pro-apply-now .icon4 {
      padding-top: 91px;
      margin-bottom: 32px;
      background: url(https://assets.cmcmarkets.com/images/step4-icon-faded.svg) no-repeat;
      background-position: center 40px; }
    .cmc-pro .cmc-pro-apply-now .icon1, .cmc-pro .cmc-pro-apply-now .icon2, .cmc-pro .cmc-pro-apply-now .icon3, .cmc-pro .cmc-pro-apply-now .icon4 {
      position: relative;
      padding: 91px 32px 0; }
      @media (max-width: 992px) {
        .cmc-pro .cmc-pro-apply-now .icon1, .cmc-pro .cmc-pro-apply-now .icon2, .cmc-pro .cmc-pro-apply-now .icon3, .cmc-pro .cmc-pro-apply-now .icon4 {
          background: none !important;
          padding: 0 32px 0;
          margin: 0;
          max-width: 100%;
          background-position: 0 0;
          margin: 0 0 64px 20px;
          width: auto; }
          .cmc-pro .cmc-pro-apply-now .icon1 .number, .cmc-pro .cmc-pro-apply-now .icon2 .number, .cmc-pro .cmc-pro-apply-now .icon3 .number, .cmc-pro .cmc-pro-apply-now .icon4 .number {
            position: absolute;
            left: -15px;
            top: -5px;
            z-index: 0;
            /*Draw the lines*/ }
            .cmc-pro .cmc-pro-apply-now .icon1 .number:before, .cmc-pro .cmc-pro-apply-now .icon2 .number:before, .cmc-pro .cmc-pro-apply-now .icon3 .number:before, .cmc-pro .cmc-pro-apply-now .icon4 .number:before {
              display: none; }
            .cmc-pro .cmc-pro-apply-now .icon1 .number:after, .cmc-pro .cmc-pro-apply-now .icon2 .number:after, .cmc-pro .cmc-pro-apply-now .icon3 .number:after, .cmc-pro .cmc-pro-apply-now .icon4 .number:after {
              display: none; }
          .cmc-pro .cmc-pro-apply-now .icon1 p:not(.number), .cmc-pro .cmc-pro-apply-now .icon1 .title-3, .cmc-pro .cmc-pro-apply-now .icon2 p:not(.number), .cmc-pro .cmc-pro-apply-now .icon2 .title-3, .cmc-pro .cmc-pro-apply-now .icon3 p:not(.number), .cmc-pro .cmc-pro-apply-now .icon3 .title-3, .cmc-pro .cmc-pro-apply-now .icon4 p:not(.number), .cmc-pro .cmc-pro-apply-now .icon4 .title-3 {
            text-align: left;
            margin: 0;
            padding: 0; } }
      .cmc-pro .cmc-pro-apply-now .icon1 .title-3, .cmc-pro .cmc-pro-apply-now .icon1 p, .cmc-pro .cmc-pro-apply-now .icon2 .title-3, .cmc-pro .cmc-pro-apply-now .icon2 p, .cmc-pro .cmc-pro-apply-now .icon3 .title-3, .cmc-pro .cmc-pro-apply-now .icon3 p, .cmc-pro .cmc-pro-apply-now .icon4 .title-3, .cmc-pro .cmc-pro-apply-now .icon4 p {
        color: #3B5170;
        margin-bottom: 0; }
      .cmc-pro .cmc-pro-apply-now .icon1 .title-3, .cmc-pro .cmc-pro-apply-now .icon2 .title-3, .cmc-pro .cmc-pro-apply-now .icon3 .title-3, .cmc-pro .cmc-pro-apply-now .icon4 .title-3 {
        margin: 8px auto;
        font-size: 22px;
        letter-spacing: initial;
        max-width: 200px;
        font-family: ModernEra, sans-serif; }
        @media (max-width: 992px) {
          .cmc-pro .cmc-pro-apply-now .icon1 .title-3, .cmc-pro .cmc-pro-apply-now .icon2 .title-3, .cmc-pro .cmc-pro-apply-now .icon3 .title-3, .cmc-pro .cmc-pro-apply-now .icon4 .title-3 {
            max-width: 100%; } }
      .cmc-pro .cmc-pro-apply-now .icon1.active p, .cmc-pro .cmc-pro-apply-now .icon2.active p, .cmc-pro .cmc-pro-apply-now .icon3.active p, .cmc-pro .cmc-pro-apply-now .icon4.active p {
        color: #fff; }
      .cmc-pro .cmc-pro-apply-now .icon1.active .title-3, .cmc-pro .cmc-pro-apply-now .icon2.active .title-3, .cmc-pro .cmc-pro-apply-now .icon3.active .title-3, .cmc-pro .cmc-pro-apply-now .icon4.active .title-3 {
        color: #fff; }
      .cmc-pro .cmc-pro-apply-now .icon1.active .number, .cmc-pro .cmc-pro-apply-now .icon2.active .number, .cmc-pro .cmc-pro-apply-now .icon3.active .number, .cmc-pro .cmc-pro-apply-now .icon4.active .number {
        background-color: #fff;
        color: #0a264d; }
    .cmc-pro .cmc-pro-apply-now .number {
      padding: 8px;
      font-size: 24px;
      color: #0a264d !important;
      background-color: #3B5170;
      display: block;
      text-align: center;
      margin: 0 auto;
      width: 40px;
      border-radius: 25px;
      z-index: 2;
      /*Draw the lines*/ }
      .cmc-pro .cmc-pro-apply-now .number.first:before {
        display: none; }
      .cmc-pro .cmc-pro-apply-now .number.last:after {
        display: none; }
      .cmc-pro .cmc-pro-apply-now .number:after {
        width: calc(50% - 12px);
        content: "";
        position: absolute;
        top: 109px;
        right: -7px;
        height: 1px;
        background-color: #3B5170; }
      .cmc-pro .cmc-pro-apply-now .number:before {
        width: calc(50% - 12px);
        content: "";
        position: absolute;
        top: 109px;
        left: -7px;
        height: 1px;
        background-color: #3B5170; }
    .cmc-pro .cmc-pro-apply-now .title-2 {
      color: #fff; }
    .cmc-pro .cmc-pro-apply-now .open-account p {
      margin-bottom: 8px; }
      .cmc-pro .cmc-pro-apply-now .open-account p.cta-primary {
        margin-bottom: 4px; }
    .cmc-pro .cmc-pro-apply-now .request-invitation p {
      margin-bottom: 8px; }
      .cmc-pro .cmc-pro-apply-now .request-invitation p.cta-primary {
        margin-bottom: 4px; }
  .cmc-pro .cmc-pro-popup {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 0; }
    .cmc-pro .cmc-pro-popup .title-3 {
      position: relative;
      padding-top: 40px;
      margin-bottom: 12px; }
    .cmc-pro .cmc-pro-popup .content {
      max-width: 800px;
      width: calc(100% - 16px);
      height: 640px;
      background: #fff;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      border-radius: 50px;
      border: 1px solid #00ed86;
      display: flex;
      justify-content: center;
      text-align: center; }
      .cmc-pro .cmc-pro-popup .content .main-form {
        width: 600px;
        padding: 0 32px;
        /*display: none;*/ }
        .cmc-pro .cmc-pro-popup .content .main-form label {
          text-align: left;
          color: #000; }
        .cmc-pro .cmc-pro-popup .content .main-form input[type="text"], .cmc-pro .cmc-pro-popup .content .main-form input[type="email"] {
          width: 100%;
          border-left: 7px solid #00ed86;
          margin-bottom: 36px; }
          .cmc-pro .cmc-pro-popup .content .main-form input[type="text"].hasError, .cmc-pro .cmc-pro-popup .content .main-form input[type="email"].hasError {
            border-color: red; }
        .cmc-pro .cmc-pro-popup .content .main-form select {
          opacity: 0; }
        .cmc-pro .cmc-pro-popup .content .main-form .has-single .styled-select .btn, .cmc-pro .cmc-pro-popup .content .main-form .styled-select .btn .filter-option {
          border-left: 7px solid #00ed86; }
        .cmc-pro .cmc-pro-popup .content .main-form input[type="submit"] {
          margin-top: 34px; }
      .cmc-pro .cmc-pro-popup .content .complete {
        display: none;
        padding: 24px; }
        .cmc-pro .cmc-pro-popup .content .complete .ticket {
          width: 50%;
          margin: 88px auto;
          display: block; }
        .cmc-pro .cmc-pro-popup .content .complete p, .cmc-pro .cmc-pro-popup .content .complete .title-2 {
          color: #0a264d; }
      .cmc-pro .cmc-pro-popup .content .close-btn {
        position: absolute;
        top: 32px;
        right: 32px;
        width: 32px;
        height: 32px;
        background: url(https://assets.cmcmarkets.com/images/close_icon1x.svg) no-repeat 0 0;
        text-indent: -999em;
        cursor: pointer; }
        .cmc-pro .cmc-pro-popup .content .close-btn:hover {
          background: url(https://assets.cmcmarkets.com/images/close_icon-hover.svg) no-repeat 0 0; }
  .cmc-pro .cmc-pro-talk-to-us {
    background-color: #FAFBFB;
    padding-bottom: 56px; }
    .cmc-pro .cmc-pro-talk-to-us .title-3 {
      margin-bottom: 24px; }
    .cmc-pro .cmc-pro-talk-to-us p {
      margin: 0; }
    .cmc-pro .cmc-pro-talk-to-us .talk-to-us-block {
      margin-top: 56px; }
      @media (max-width: 768px) {
        .cmc-pro .cmc-pro-talk-to-us .talk-to-us-block {
          margin-top: 32px; } }
      .cmc-pro .cmc-pro-talk-to-us .talk-to-us-block p, .cmc-pro .cmc-pro-talk-to-us .talk-to-us-block a {
        font-size: 18px; }
      .cmc-pro .cmc-pro-talk-to-us .talk-to-us-block a {
        font-family: ModernEra, sans-serif; }
    @media (max-width: 1024px) {
      .cmc-pro .cmc-pro-talk-to-us .cta-secondary {
        margin: 24px 0; } }
    .cmc-pro .cmc-pro-talk-to-us.invert {
      background-color: #0a264d; }
      .cmc-pro .cmc-pro-talk-to-us.invert .title-3, .cmc-pro .cmc-pro-talk-to-us.invert p, .cmc-pro .cmc-pro-talk-to-us.invert a {
        color: #fff; }
      .cmc-pro .cmc-pro-talk-to-us.invert .title-3 {
        font-family: ModernEra, sans-serif; }
  .cmc-pro .cmc-pro-faq {
    padding-top: 80px;
    padding-bottom: 0; }
    @media (max-width: 768px) {
      .cmc-pro .cmc-pro-faq {
        padding: 32px 4px 0;
        margin: 0; } }
    .cmc-pro .cmc-pro-faq .title-2 {
      font-family: ModernEra, sans-serif; }
    .cmc-pro .cmc-pro-faq .title-3 {
      margin-bottom: 0; }
      .cmc-pro .cmc-pro-faq .title-3.more-questions {
        margin-top: 40px;
        margin-bottom: 16px;
        font-family: ModernEra, sans-serif; }
    .cmc-pro .cmc-pro-faq .row {
      margin-bottom: 24px; }
      @media (max-width: 768px) {
        .cmc-pro .cmc-pro-faq .row {
          margin-bottom: 0; } }
    .cmc-pro .cmc-pro-faq .faq-show-hide {
      margin: 0;
      position: relative; }
      .cmc-pro .cmc-pro-faq .faq-show-hide .title-3 {
        border-bottom: 1px solid #ccc;
        margin: 0;
        padding: 24px 20% 24px 0;
        position: relative;
        cursor: pointer;
        font-family: ModernEra, sans-serif; }
        .cmc-pro .cmc-pro-faq .faq-show-hide .title-3:hover::after {
          background: url(https://assets.cmcmarkets.com/images/plus_symbol-hover.svg) no-repeat 0 0; }
        .cmc-pro .cmc-pro-faq .faq-show-hide .title-3:after {
          content: "";
          position: absolute;
          right: 30px;
          top: 50%;
          width: 32px;
          height: 32px;
          background: url(https://assets.cmcmarkets.com/images/plus_symbol1x.svg) no-repeat 0 0;
          background-size: 32px;
          z-index: 0;
          margin-top: -16px; }
        @media (max-width: 768px) {
          .cmc-pro .cmc-pro-faq .faq-show-hide .title-3 {
            text-align: left; }
            .cmc-pro .cmc-pro-faq .faq-show-hide .title-3:after {
              right: 20px; } }
        .cmc-pro .cmc-pro-faq .faq-show-hide .title-3.open {
          border-bottom: 0; }
          .cmc-pro .cmc-pro-faq .faq-show-hide .title-3.open:hover::after {
            background: url(https://assets.cmcmarkets.com/images/subtract_minus-hover.svg) no-repeat 0 0; }
          .cmc-pro .cmc-pro-faq .faq-show-hide .title-3.open:after {
            background: url(https://assets.cmcmarkets.com/images/subtract_minus1x.svg) no-repeat 0 0;
            background-size: 32px; }
      .cmc-pro .cmc-pro-faq .faq-show-hide p {
        display: none;
        border-bottom: 2px solid #0a264d;
        margin-bottom: 0;
        padding-bottom: 24px;
        padding-right: 16%; }
        .cmc-pro .cmc-pro-faq .faq-show-hide p.open {
          display: block; }
      .cmc-pro .cmc-pro-faq .faq-show-hide.first {
        border-top: 1px solid #ccc; }
        .cmc-pro .cmc-pro-faq .faq-show-hide.first.open {
          border-top: 1px solid #0a264d; }
    .cmc-pro .cmc-pro-faq .cta-secondary-v2 {
      margin-bottom: 8px; }
  .cmc-pro .cmc-pro-how-to-apply {
    background-color: #FAFBFB; }
    @media (max-width: 992px) {
      .cmc-pro .cmc-pro-how-to-apply {
        padding: 32px 0 0; } }
    .cmc-pro .cmc-pro-how-to-apply .rw {
      margin-top: 16px; }
    .cmc-pro .cmc-pro-how-to-apply .eligibility-container {
      padding: 0 16px;
      max-width: 1282px;
      margin: 0 auto;
      width: 100%;
      float: none; }
    .cmc-pro .cmc-pro-how-to-apply [type=checkbox] {
      position: absolute;
      visibility: hidden; }
      .cmc-pro .cmc-pro-how-to-apply [type=checkbox]:checked + label:before {
        content: '';
        border: 1px solid #00c5eb;
        background: url(https://assets.cmcmarkets.com/images/cmcprotick.svg) no-repeat -3px -3px;
        padding-top: 5px;
        padding-left: 6px; }
      .cmc-pro .cmc-pro-how-to-apply [type=checkbox] + label:before {
        width: 30px;
        height: 30px;
        position: absolute;
        left: 0;
        top: 5px;
        content: ' ';
        font-family: icomoon;
        color: #fff;
        line-height: 1.3;
        border: 1px solid #ccc; }
    .cmc-pro .cmc-pro-how-to-apply label {
      position: relative;
      padding-left: 50px;
      margin: 10px 0 40px;
      color: #000; }
    .cmc-pro .cmc-pro-how-to-apply .steps {
      border: 1px solid rgba(0, 130, 255, 0.8);
      border-radius: 25px;
      padding: 35px 35px 35px 70px;
      display: flex;
      counter-reset: section;
      position: relative;
      margin-bottom: 56px;
      background-color: #fff; }
      @media (max-width: 992px) {
        .cmc-pro .cmc-pro-how-to-apply .steps {
          display: block;
          border: 0;
          background-color: #FAFBFB;
          padding: 0 24px;
          margin-bottom: 40px; } }
      .cmc-pro .cmc-pro-how-to-apply .steps:after {
        width: 50px;
        height: 50px;
        content: "";
        border-left: 1px solid rgba(0, 130, 255, 0.8);
        border-bottom: 1px solid rgba(0, 130, 255, 0.8);
        position: absolute;
        bottom: -26px;
        left: 86px;
        transform: rotate(-45deg);
        background: #fff; }
        @media (max-width: 992px) {
          .cmc-pro .cmc-pro-how-to-apply .steps:after {
            display: none; } }
      .cmc-pro .cmc-pro-how-to-apply .steps li {
        position: relative;
        padding: 0 20px 0 80px;
        margin: 0;
        max-width: 400px;
        width: 100%; }
        @media (max-width: 992px) {
          .cmc-pro .cmc-pro-how-to-apply .steps li {
            padding: 0 0 0 86px;
            margin-bottom: 48px; } }
        .cmc-pro .cmc-pro-how-to-apply .steps li:first-child:before {
          background: #0a264d; }
        .cmc-pro .cmc-pro-how-to-apply .steps li:first-child:after {
          color: #fff; }
        .cmc-pro .cmc-pro-how-to-apply .steps li:after {
          display: block;
          counter-increment: section;
          content: counter(section);
          color: #0a264d;
          position: absolute;
          top: 16px;
          left: 21px;
          font-size: 35px;
          text-align: center; }
        .cmc-pro .cmc-pro-how-to-apply .steps li:before {
          content: "";
          width: 61px;
          height: 61px;
          background: #fff;
          border-radius: 50px;
          border: 4px solid #0a264d;
          position: absolute;
          top: 0;
          left: 0; }
        .cmc-pro .cmc-pro-how-to-apply .steps li .box .title-3 {
          font-size: 22px;
          line-height: 27px;
          text-transform: none;
          font-family: ModernEra, sans-serif; }
        .cmc-pro .cmc-pro-how-to-apply .steps li .box p {
          margin-bottom: 0; }
    .cmc-pro .cmc-pro-how-to-apply .criteria {
      border: 1px solid #00EDB6;
      border-radius: 25px;
      padding: 32px;
      text-align: center;
      background-color: #fff; }
      .cmc-pro .cmc-pro-how-to-apply .criteria .title-3 {
        text-align: center;
        text-transform: none;
        font-size: 28px;
        line-height: 34px;
        font-family: ModernEra, sans-serif; }
      .cmc-pro .cmc-pro-how-to-apply .criteria .box {
        display: flex; }
        .cmc-pro .cmc-pro-how-to-apply .criteria .box label {
          font-weight: normal;
          font-family: ModernEra, sans-serif;
          text-align: left;
          margin-left: 20px; }
      .cmc-pro .cmc-pro-how-to-apply .criteria .cta-primary a.disabled {
        background: #ccc;
        color: #979797;
        pointer-events: none;
        cursor: default; }
      .cmc-pro .cmc-pro-how-to-apply .criteria .rw {
        margin-bottom: 8px; }
  @media (max-width: 992px) {
    .cmc-pro #pegaContainer {
      display: none; } }
  .cmc-pro #pegaContainer #chatContainer .chatLauncher {
    bottom: 26px; }
    .cmc-pro #pegaContainer #chatContainer .chatLauncher .chatOrb {
      background: #00edb6 !important; }
    .cmc-pro #pegaContainer #chatContainer .chatLauncher:hover .attentionGrabber {
      display: block !important; }
  .cmc-pro #pegaContainer #chatContainer .attentionGrabber {
    bottom: 124px;
    display: none !important; }
  .cmc-pro #pegaContainer #chatContainer #chatBox {
    bottom: 26px; }
    .cmc-pro #pegaContainer #chatContainer #chatBox #chatFloater {
      background: #00edb6 !important; }

/*FONTS*/
@font-face {
  font-family: 'ModernEraLight';
  src: url("https://assets.cmcmarkets.com/fonts/ModernEra-Light.eot");
  /* IE9 Compat Modes */
  src: url("https://assets.cmcmarkets.com/fonts/ModernEra-Light.eot?#iefix") format("embedded-opentype"), url("https://assets.cmcmarkets.com/fonts/ModernEra-Light.woff") format("woff"), url("https://assets.cmcmarkets.com/fonts/ModernEra-Light.ttf") format("truetype"), url("https://assets.cmcmarkets.com/fonts/ModernEra-Light.svg#ModernEra-Light") format("svg");
  /* Legacy iOS */
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility; }

@font-face {
  font-family: 'ModernEra';
  src: url("https://assets.cmcmarkets.com/fonts/ModernEra-Regular.eot");
  /* IE9 Compat Modes */
  src: url("https://assets.cmcmarkets.com/fonts/ModernEra-Regular.eot?#iefix") format("embedded-opentype"), url("https://assets.cmcmarkets.com/fonts/ModernEra-Regular.woff") format("woff"), url("https://assets.cmcmarkets.com/fonts/ModernEra-Regular.ttf") format("truetype"), url("https://assets.cmcmarkets.com/fonts/ModernEra-Regular.svg#ModernEra-Regular") format("svg");
  /* Legacy iOS */
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility; }

/* BAKERY IMPORTS - used globally in each site*/
/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
table.which-account-head caption:before, .mob-friendly-table th:last-child:before, .mob-friendly-table caption:last-child:before, .mob-friendly-table.no-fancy-head caption:before {
  background: url("https://assets.cmcmarkets.com/images/icn-faq-arrow-down.png") no-repeat 0 50%;
  content: '';
  display: block;
  height: 18px;
  margin-top: -5px;
  position: absolute;
  right: 40px;
  top: 48%;
  width: 15px;
  -moz-transition: -moz-transform 0.3s ease-in-out;
  -o-transition: -o-transform 0.3s ease-in-out;
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  -moz-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg); }

table.which-account-head {
  margin: 0;
  border: none; }

table.which-account-head caption {
  display: none;
  position: relative;
  padding: 1.5rem 1.8rem;
  background: #e8e9ed;
  text-align: left;
  color: #1b2429;
  font-size: 18px;
  font-family: "latoregular", sans-serif;
  cursor: pointer; }

table.which-account-head.close caption {
  cursor: pointer; }

table.which-account-head.close caption:before {
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg); }

table.which-account-head.close tr.title-caption {
  display: none; }

table.which-account-head tr {
  border: none; }

table.which-account-head td {
  margin: 0;
  padding: 0;
  border: none;
  vertical-align: bottom;
  background: #fff; }

table.which-account-head td div {
  margin: 1px;
  padding: 25px 0;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px; }

table.which-account-head tr.title-caption {
  background: none; }

table.which-account-head tr.title-caption td {
  background: #f9f9f9;
  border-left: 1px dashed #00c5e8;
  padding: 1rem 1.8rem;
  vertical-align: middle; }

table.which-account-head tr.title-caption td.empty {
  background: none;
  border-left: none; }

table.which-account-head h3, table.which-account-head p {
  margin: 0;
  padding: 0;
  color: #fff;
  text-align: center;
  text-transform: none; }

table.which-account-head h3 {
  font-size: 20px;
  line-height: 24px; }

table.which-account-head p {
  font-size: 11px;
  line-height: 12px; }

table.which-account-head .SBA div {
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYmJkZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwOTlkYiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==");
  background-size: 100%;
  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #00bbde), color-stop(100%, #0099db));
  background-image: -moz-linear-gradient(left, #00c5e8, #0099db);
  background-image: -webkit-linear-gradient(left, #00c5e8, #0099db);
  background-image: linear-gradient(to right, #00c5e8, #0099db); }

table.which-account-head .SBA div h3 {
  padding-bottom: 10px; }

table.which-account-head .CFD div {
  background: #1b2429; }

table.which-account-head .CA div {
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBhMjY0ZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzA3MWIzNiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==");
  background-size: 100%;
  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #0a264e), color-stop(100%, #071b36));
  background-image: -moz-linear-gradient(left, #0a264d, #071b36);
  background-image: -webkit-linear-gradient(left, #0a264d, #071b36);
  background-image: linear-gradient(to right, #0a264d, #071b36); }

table.which-account-head .KO div {
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjAuMCIgeDI9IjAuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VmZWZlZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ViZWJlYiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==");
  background-size: 100%;
  background-image: -moz-linear-gradient(225deg, #efefef 0%, #e8e9ed 100%);
  background-image: -webkit-linear-gradient(225deg, #efefef 0%, #e8e9ed 100%);
  background-image: linear-gradient(-135deg, #efefef 0%, #e8e9ed 100%);
  border: 1px solid #D8D8D8;
  padding: 24px 0; }

table.which-account-head .KO div h3 {
  color: #00c5e8; }

table.which-account-head .light-blue div {
  background: #00c5e8; }

table.which-account-head .dark-blue div {
  background: #0a264d; }

table.which-account-head .dark-grey div {
  background: #1b2429; }

table.which-account-head tr.mob-title {
  display: none; }

@media (max-width: 47.99em) {
  table.which-account-head tr.large-title {
    display: none; }
  table.which-account-head tr.title-caption {
    border: 1px solid #e8e9ed;
    border-bottom: 2px solid #979b9e;
    border-top: 0; }
  table.which-account-head tr.title-caption td {
    border-left: 0; }
  table.which-account-head caption {
    display: block; } }

.which-account-table th {
  white-space: nowrap; }

.mob-friendly-table {
  margin-bottom: 2px;
  border-bottom: 2px solid #fff;
  overflow: hidden;
  table-layout: fixed; }

.mob-friendly-table:last-child {
  margin-bottom: 3rem; }

.mob-friendly-table th, .mob-friendly-table caption {
  position: relative;
  background: #e8e9ed;
  padding: 1.5rem 1.8rem;
  color: #1b2429;
  font-size: 18px;
  text-align: left;
  font-family: "latoregular", sans-serif; }

.mob-friendly-table th:not(:first-child), .mob-friendly-table caption:not(:first-child) {
  color: #e8e9ed; }

.mob-friendly-table th:last-child, .mob-friendly-table caption:last-child {
  cursor: pointer; }

.mob-friendly-table.no-fancy-head caption {
  display: none;
  cursor: pointer; }

.mob-friendly-table.no-fancy-head.close caption:before {
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg); }

.mob-friendly-table tr {
  margin-bottom: 0;
  border: none; }

.mob-friendly-table td {
  vertical-align: top;
  text-align: center; }

.mob-friendly-table td:first-child {
  text-align: left; }

.mob-friendly-table td p {
  margin: 10px 0; }

.mob-friendly-table.close tbody tr {
  opacity: 0;
  display: none; }

.mob-friendly-table.close th:before {
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg); }

.mob-friendly-table ul {
  margin: 0;
  padding: 0; }

.mob-friendly-table li {
  position: relative;
  margin: 0;
  padding: 5px 0 5px 40px;
  text-align: left; }

.mob-friendly-table li:before {
  content: "";
  position: absolute;
  width: 18px;
  height: 15px;
  top: 10px;
  left: 0;
  background-size: contain;
  background: url("https://assets.cmcmarkets.com/images/icn-tick.png") 50% 50% no-repeat; }

@media (max-width: 47.99em) {
  .mob-friendly-table.no-fancy-head caption {
    display: block;
    text-align: left; } }

table.footer {
  table-layout: fixed;
  border-bottom: 0;
  color: #58585a; }

table.footer tr {
  background: #fff;
  border-left: none; }

/* .border-corporate doesn't appear to be used */
table.footer .border-CB, table.footer .border-CFD, table.footer .border-corporate, table.footer .border-light-blue, table.footer .border-dark-blue, table.footer .border-dark-grey, table.footer .border-grey {
  position: relative;
  background: #ffffff;
  text-align: center; }

table.footer .border-CB .Button, table.footer .border-CFD .Button, table.footer .border-corporate .Button, table.footer .border-light-blue .Button, table.footer .border-dark-blue .Button, table.footer .border-dark-grey .Button, table.footer .border-grey .Button {
  margin-bottom: 22px;
  margin-top: 18px;
  min-width: 0;
  width: 100%; }

table.footer .border-CB a, table.footer .border-CFD a, table.footer .border-corporate a, table.footer .border-light-blue a, table.footer .border-dark-blue a, table.footer .border-dark-grey a, table.footer .border-grey a {
  width: auto; }

table.footer .border-CB:after, table.footer .border-CFD:after, table.footer .border-corporate:after, table.footer .border-light-blue:after, table.footer .border-dark-blue:after, table.footer .border-dark-grey:after, table.footer .border-grey:after {
  content: "";
  position: absolute;
  height: 4px;
  left: 0;
  bottom: 0;
  right: 0; }

table.footer .border-CB p, table.footer .border-CFD p, table.footer .border-corporate p, table.footer .border-light-blue p, table.footer .border-dark-blue p, table.footer .border-dark-grey p, table.footer .border-grey p {
  margin: -1rem 0 1rem; }

table.footer .border-CB:after {
  background: #00c5e8; }

table.footer .border-CFD:after {
  background: #0069d2; }

table.footer .border-corporate:after {
  background: #0a264d; }

table.footer .border-light-blue:after {
  background: #00c5e8; }

table.footer .border-dark-blue:after {
  background: #0a264d; }

table.footer .border-dark-grey:after {
  background: #1b2429; }

table.footer .border-grey:after {
  background: #979797; }

table.footer .Button--grey-dark {
  background: #1b2429;
  color: #fff; }

table.footer .Button--grey-dark .Button-panel {
  background: #00c5e8; }

table.footer .Button--blue-dark .Button-panel {
  background: #00c5e8; }

table.footer .Button--white-grey {
  border: 2px solid #979b9e;
  color: #00c5e8; }

table.footer .Button--white-grey .Button-panel {
  background: #979b9e; }

@media (max-width: 47.99em) {
  .mob-friendly-table.twoColOnly thead tr {
    height: auto;
    width: auto;
    position: relative; }
  .mob-friendly-table.multiCol td, .multiCol td {
    text-align: left !important; }
  table.footer tr {
    border-right: none; }
  table.footer .Button {
    margin-top: 30px; }
  table.footer p {
    text-align: center; } }

table.collapse-button {
  margin-bottom: 0; }

table.collapse-button tr.hide {
  display: none; }

table.collapse-button + button {
  position: relative;
  margin-bottom: 2rem;
  padding: 10px 50px 10px 20px;
  background: #0a264d;
  color: #fff;
  outline: none; }

table.collapse-button + button:before, table.collapse-button + button:after {
  content: "";
  position: absolute;
  background: #00c5e8;
  box-shadow: #00c5e8 0 0 3px 0; }

table.collapse-button + button:before {
  height: 1px;
  width: 19px;
  top: 22px;
  right: 15px; }

table.collapse-button + button:after {
  height: 19px;
  width: 1px;
  top: 13px;
  right: 24px; }

table.collapse-button + button.icn-hide:after {
  display: none; }

table.collapse-button + button:hover:before, table.collapse-button + button:hover:after {
  box-shadow: none; }

table td .tick {
  background: url("https://assets.cmcmarkets.com/images/icn-tick.png") no-repeat 50% 50%;
  display: block;
  text-indent: -9999px; }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/* Specifies background image - min-width 62em, stripped from styles.css */
@media (min-width: 62em) {
  .LiveDemoAccountBar {
    background-image: url(https://assets.cmcmarkets.com/images/cta-background.jpg); }
  .LiveDemoAccountBar .LiveDemoAccountBar--container {
    padding: 2rem 0; }
  .LiveDemoAccountBar .LiveDemoAccountBar--content {
    min-height: 0;
    background-image: none; } }

/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/* References to background images for IconOverText class */
.IconOverText .IconOverText-icon {
  margin: 0 auto 2rem;
  width: 190px;
  height: 190px;
  background: url("https://assets.cmcmarkets.com/images/background-1.png") center center no-repeat; }

.IconOverText:nth-child(2n) .IconOverText-icon {
  background: url("https://assets.cmcmarkets.com/images/background-2.png") center center no-repeat; }

.IconOverText:nth-child(3n) .IconOverText-icon {
  background: url("https://assets.cmcmarkets.com/images/background-3.png") center center no-repeat; }

/*HELPERS */
/* Place all !important declarations here;*/
/* REGIONS */
/* For icons inside submission buttons, slides the icon to far right, makes it disappear, and brings it in from the left hand side*/
@keyframes iconSlideAnimationVertical {
  0% {
    margin-top: 0; }
  25% {
    margin-top: 150%; }
  26% {
    margin-top: -150%; }
  35% {
    margin-top: -50%; }
  50% {
    margin-top: 0; } }

@keyframes iconSlideAnimationHorizontal {
  0% {
    margin-left: 0; }
  25% {
    margin-left: 150%; }
  26% {
    margin-left: -150%; }
  35% {
    margin-left: -50%; }
  50% {
    margin-left: 0; } }

/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/*

DO NOT CREATE MORE EXTENDS i.e. Using '%extend' WITHOUT READING LINKS IN RETAIL CSS WIKI: 
http://gitlab.cmc.local/WEB/retailcss/wikis/css-refactor

The following used to be extends converted to mixins to keep things cleaner in processed CSS

*/
/* GENERAL */
/*///////////////////////////////////////
///// REGISTERED STYLE GUIDE COLOURS /////
/////////////////////////////////////////

 Any variations form the following colour vars should be confirmed with the design team

 Numerical increments don't need to necessarily imitate relative darkness/lightness (though they currently do), they are there to allow colour vars lisitng to scale easily without strange names like $colour-grey-dark $colour-grey-darker, $colour-grey-darkest, $colour-grey-super-dark $colour-grey-darker-super-dark etc, which don't scale well when new colours need to be added!

////////////////////////////////////////*/
/*/////////////////
////// WHITE //////
/////////////////*/
/*/////////////////
////// BLUES //////
/////////////////*/
/* Form focus bg */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/* Supporting blue for gradients.  TODO: Add to style guide colours.html */
/*/////////////////
////// GREYS //////
/////////////////*/
/*/////////////////
////// GREENS /////
/////////////////*/
/* Supporting green for gradients and hover states.  TODO: Add to style guide colours.html */
/* Gradient colour */
/* Gradient colour */
/*////////////////
////// REDS //////
////////////////*/
/* Form error bg */
/*///////////////
/// GRADIENTS ///
///////////////*/
/* LIGHT BLUE */
/* $color-medium-blue-1 >>>> TO >>>> $color-medium-blue-3  */
/* @include linear-gradient(90deg, $color-medium-blue-1, $color-medium-blue-3); */
/* MEDIUM BLUE */
/* $color-medium-blue-2 >>>> TO >>>> $color-medium-blue-4 */
/* @include linear-gradient(90deg, $color-medium-blue-2, $color-medium-blue-4);*/
/* DARK BLUE */
/* $color-blue-1 >>>> TO >>>> $color-blue-2 */
/* @include linear-gradient(90deg, $color-blue-1, $color-blue-2);*/
/* MEDIUM GREEN */
/* $color-green-1 >>>> TO >>>> $color-green-2 */
/* @include linear-gradient(90deg, $color-green-1, $color-green-2);*/
/* BRIGHT GREEN */
/* $color-bright-green-1 >>>> TO >>>> $color-bright-green-2 */
/* @include linear-gradient(90deg, $color-bright-green-1, $color-bright-green-2);*/
/* Bio Fonts */
@font-face {
  font-family: ubuntubold;
  src: url("https://assets.cmcmarkets.com/fonts/ubuntu-b-webfont.eot");
  src: url("https://assets.cmcmarkets.com/fonts/ubuntu-b-webfont.eot?#iefix") format("embedded-opentype"), url("https://assets.cmcmarkets.com/fonts/ubuntu-b-webfont.woff2") format("woff2"), url("https://assets.cmcmarkets.com/fonts/ubuntu-b-webfont.woff") format("woff"), url("https://assets.cmcmarkets.com/fonts/ubuntu-b-webfont.ttf") format("truetype"), url("https://assets.cmcmarkets.com/fonts/ubuntu-b-webfont.svg#ubuntubold") format("svg");
  font-weight: 400;
  font-style: normal; }

@font-face {
  font-family: ubuntulight;
  src: url("https://assets.cmcmarkets.com/fonts/ubuntu-l-webfont.eot");
  src: url("https://assets.cmcmarkets.com/fonts/ubuntu-l-webfont.eot?#iefix") format("embedded-opentype"), url("https://assets.cmcmarkets.com/fonts/ubuntu-l-webfont.woff2") format("woff2"), url("https://assets.cmcmarkets.com/fonts/ubuntu-l-webfont.woff") format("woff"), url("https://assets.cmcmarkets.com/fonts/ubuntu-l-webfont.ttf") format("truetype"), url("https://assets.cmcmarkets.com/fonts/ubuntu-l-webfont.svg#ubuntulight") format("svg");
  font-weight: 400;
  font-style: normal; }

@font-face {
  font-family: ubunturegular;
  src: url("https://assets.cmcmarkets.com/fonts/ubuntu-r-webfont.eot");
  src: url("https://assets.cmcmarkets.com/fonts/ubuntu-r-webfont.eot?#iefix") format("embedded-opentype"), url("https://assets.cmcmarkets.com/fonts/ubuntu-r-webfont.woff2") format("woff2"), url("https://assets.cmcmarkets.com/fonts/ubuntu-r-webfont.woff") format("woff"), url("https://assets.cmcmarkets.com/fonts/ubuntu-r-webfont.ttf") format("truetype"), url("https://assets.cmcmarkets.com/fonts/ubuntu-r-webfont.svg#ubunturegular") format("svg");
  font-weight: 400;
  font-style: normal; }

@font-face {
  font-family: latobold;
  src: url("https://assets.cmcmarkets.com/fonts/lato-bold-webfont.eot");
  src: url("https://assets.cmcmarkets.com/fonts/bold/lato-bold-webfont.eot?#iefix") format("embedded-opentype"), url("https://assets.cmcmarkets.com/fonts/lato-bold-webfont.woff2") format("woff2"), url("https://assets.cmcmarkets.com/fonts/lato-bold-webfont.woff") format("woff"), url("https://assets.cmcmarkets.com/fonts/lato-bold-webfont.ttf") format("truetype"), url("https://assets.cmcmarkets.com/fonts/lato-bold-webfont.svg#latobold") format("svg");
  font-weight: 400;
  font-style: normal; }

@font-face {
  font-family: latobold_italic;
  src: url("https://assets.cmcmarkets.com/fonts/lato-bolditalic-webfont.eot");
  src: url("https://assets.cmcmarkets.com/fonts/lato-bolditalic-webfont.eot?#iefix") format("embedded-opentype"), url("https://assets.cmcmarkets.com/fonts/lato-bolditalic-webfont.woff2") format("woff2"), url("https://assets.cmcmarkets.com/fonts/lato-bolditalic-webfont.woff") format("woff"), url("https://assets.cmcmarkets.com/fonts/lato-bolditalic-webfont.ttf") format("truetype"), url("https://assets.cmcmarkets.com/fonts/lato-bolditalic-webfont.svg#latobold_italic") format("svg");
  font-weight: 400;
  font-style: normal; }

@font-face {
  font-family: latoitalic;
  src: url("https://assets.cmcmarkets.com/fonts/lato-italic-webfont.eot");
  src: url("https://assets.cmcmarkets.com/fonts/lato-italic-webfont.eot?#iefix") format("embedded-opentype"), url("https://assets.cmcmarkets.com/fonts/lato-italic-webfont.woff2") format("woff2"), url("https://assets.cmcmarkets.com/fonts/lato-italic-webfont.woff") format("woff"), url("https://assets.cmcmarkets.com/fonts/lato-italic-webfont.ttf") format("truetype"), url("https://assets.cmcmarkets.com/fonts/lato-italic-webfont.svg#latoitalic") format("svg");
  font-weight: 400;
  font-style: normal; }

@font-face {
  font-family: latoregular;
  src: url("https://assets.cmcmarkets.com/fonts/lato-regular-webfont.eot");
  src: url("https://assets.cmcmarkets.com/fonts/lato-regular-webfont.eot?#iefix") format("embedded-opentype"), url("https://assets.cmcmarkets.com/fonts/lato-regular-webfont.woff2") format("woff2"), url("https://assets.cmcmarkets.com/fonts/lato-regular-webfont.woff") format("woff"), url("https://assets.cmcmarkets.com/fonts/lato-regular-webfont.ttf") format("truetype"), url("https://assets.cmcmarkets.com/fonts/lato-regular-webfont.svg#latoregular") format("svg");
  font-weight: 400;
  font-style: normal; }

@font-face {
  font-family: icomoon;
  src: url("https://assets.cmcmarkets.com/fonts/icomoon.eot?sry3e1");
  src: url("https://assets.cmcmarkets.com/fonts/icomoon.eot?#iefixsry3e1") format("embedded-opentype"), url("https://assets.cmcmarkets.com/fonts/icomoon.ttf?sry3e1") format("truetype"), url("https://assets.cmcmarkets.com/fonts/icomoon.woff?sry3e1") format("woff"), url("https://assets.cmcmarkets.com/fonts/icomoon.svg?sry3e1#icomoon") format("svg");
  font-weight: 400;
  font-style: normal; }

/* DO NOT DIST WITH A REGION ACTIVE BELOW - ALL REGIONS SHOULD BE COMMENTED OUT: This section is for testing purposes ONLY! */
/* Currently to test with fonts working  - a region needs to be active */
/* Either uncomment a region here or add region stylesheet to page you are testing, underneath the main.css file */
/* Or you can use Gulp task 'update-css-path' for each folder you want to change CSS path and task will create two CSS files in HTML plus remove backup files*/
/*@import 'regions/de-at';*/
/*@import 'regions/de-de';*/
/*@import 'regions/de';*/
/*@import 'regions/en-au';*/
/*@import 'regions/en-gb';*/
/*@import 'regions/en-ie';*/
/*@import 'regions/en-nz';*/
/*@import 'regions/en-sg';*/
/*@import 'regions/en';*/
/*@import 'regions/fr-fr';*/
/*@import 'regions/pl-pl';*/
/*@import 'regions/se';*/
/*@import 'regions/zh';*/

/*# sourceMappingURL=main.css.map */