@charset "UTF-8";
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
/* line 9, ../sass/framework/core/styles/_normalize.scss */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/**
 * Remove default margin.
 */
/* line 19, ../sass/framework/core/styles/_normalize.scss */
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.
 */
/* line 33, ../sass/framework/core/styles/_normalize.scss */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
/* line 54, ../sass/framework/core/styles/_normalize.scss */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
/* line 67, ../sass/framework/core/styles/_normalize.scss */
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/11, Safari, and Firefox < 22.
 */
/* line 77, ../sass/framework/core/styles/_normalize.scss */
[hidden],
template {
  display: none;
}

/* Links
	 ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
/* line 89, ../sass/framework/core/styles/_normalize.scss */
a {
  background-color: transparent;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
/* line 97, ../sass/framework/core/styles/_normalize.scss */
a:active,
a:hover {
  outline: 0;
}

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

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
/* line 117, ../sass/framework/core/styles/_normalize.scss */
b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */
/* line 126, ../sass/framework/core/styles/_normalize.scss */
dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
/* line 135, ../sass/framework/core/styles/_normalize.scss */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */
/* line 144, ../sass/framework/core/styles/_normalize.scss */
mark {
  background: #ff0;
  color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */
/* line 153, ../sass/framework/core/styles/_normalize.scss */
small {
  font-size: 80%;
}

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

/* line 169, ../sass/framework/core/styles/_normalize.scss */
sup {
  top: -0.5em;
}

/* line 173, ../sass/framework/core/styles/_normalize.scss */
sub {
  bottom: -0.25em;
}

/* Embedded content
	 ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
/* line 184, ../sass/framework/core/styles/_normalize.scss */
img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */
/* line 192, ../sass/framework/core/styles/_normalize.scss */
svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
	 ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
/* line 203, ../sass/framework/core/styles/_normalize.scss */
figure {
  margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */
/* line 211, ../sass/framework/core/styles/_normalize.scss */
hr {
  box-sizing: content-box;
  height: 0;
}

/**
 * Contain overflow in all browsers.
 */
/* line 220, ../sass/framework/core/styles/_normalize.scss */
pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
/* line 228, ../sass/framework/core/styles/_normalize.scss */
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.
 */
/* line 251, ../sass/framework/core/styles/_normalize.scss */
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.
 */
/* line 265, ../sass/framework/core/styles/_normalize.scss */
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.
 */
/* line 276, ../sass/framework/core/styles/_normalize.scss */
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.
 */
/* line 289, ../sass/framework/core/styles/_normalize.scss */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -moz-appearance: button;
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */
/* line 301, ../sass/framework/core/styles/_normalize.scss */
button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */
/* line 310, ../sass/framework/core/styles/_normalize.scss */
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.
 */
/* line 321, ../sass/framework/core/styles/_normalize.scss */
input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
/* line 333, ../sass/framework/core/styles/_normalize.scss */
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`.
 */
/* line 345, ../sass/framework/core/styles/_normalize.scss */
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
 *    (include `-moz` to future-proof).
 */
/* line 356, ../sass/framework/core/styles/_normalize.scss */
input[type="search"] {
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
  /* 1 */
}

/**
 * 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).
 */
/* line 370, ../sass/framework/core/styles/_normalize.scss */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -moz-appearance: none;
  -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */
/* line 379, ../sass/framework/core/styles/_normalize.scss */
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.
 */
/* line 390, ../sass/framework/core/styles/_normalize.scss */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
/* line 399, ../sass/framework/core/styles/_normalize.scss */
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.
 */
/* line 408, ../sass/framework/core/styles/_normalize.scss */
optgroup {
  font-weight: bold;
}

/* Tables
	 ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
/* line 419, ../sass/framework/core/styles/_normalize.scss */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* line 424, ../sass/framework/core/styles/_normalize.scss */
td,
th {
  padding: 0;
}

/* line 5, ../sass/framework/core/styles/_base.scss */
html {
  box-sizing: border-box;
}

/* line 10, ../sass/framework/core/styles/_base.scss */
*, *:before, *:after {
  box-sizing: inherit;
}

/* line 22, ../sass/framework/core/styles/_base.scss */
html,
body {
  height: 100%;
}

/* line 27, ../sass/framework/core/styles/_base.scss */
html {
  line-height: 1.5;
  overflow-y: scroll;
  font-size: 100%;
  font-family: "myriad-pro", sans-serif;
}

/* line 34, ../sass/framework/core/styles/_base.scss */
html,
button,
input,
select,
textarea {
  color: #555;
}

/* line 13, ../sass/framework/core/mixins/_selection.scss */
::selection {
  text-shadow: none;
  background: #b3d4fc;
}

/* line 44, ../sass/framework/core/styles/_base.scss */
hr {
  display: block;
  border: 0;
  border-top: 1px solid #e2e2e2;
  padding: 0;
}

/* line 51, ../sass/framework/core/styles/_base.scss */
img {
  vertical-align: middle;
}

/* line 55, ../sass/framework/core/styles/_base.scss */
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/* line 61, ../sass/framework/core/styles/_base.scss */
textarea {
  resize: vertical;
}

/* line 65, ../sass/framework/core/styles/_base.scss */
h1, h2, h3, h4, h5, h6,
p, ul, ol, dl,
table, form, pre, hr {
  margin: 0 0 1rem 0;
}

/* line 71, ../sass/framework/core/styles/_base.scss */
.site-wide {
  max-width: 61.25em;
  padding-left: 20px;
  padding-right: 20px;
  margin: 0 auto;
  position: relative;
}

/* line 98, ../sass/framework/core/styles/_base.scss */
.viewport-wide {
  position: relative;
}
@media all and (min-width: 37.8125em) {
  /* line 98, ../sass/framework/core/styles/_base.scss */
  .viewport-wide {
    min-width: 61.25em;
  }
}

/* line 13, ../sass/framework/core/styles/_type.scss */
.heading-stack, h1,
.likeh1, h2,
.likeh2, h3,
.likeh3, h4,
.likeh4, h5,
.likeh5, h6,
.likeh6 {
  font-family: "myriad-pro", sans-serif;
  font-weight: 300;
}

/* line 22, ../sass/framework/core/styles/_type.scss */
.default-stack {
  font-family: "myriad-pro", sans-serif;
}

/* line 30, ../sass/framework/core/styles/_type.scss */
.uppercase {
  text-transform: uppercase;
}

/* line 34, ../sass/framework/core/styles/_type.scss */
.bold {
  font-weight: bold;
}

/* line 38, ../sass/framework/core/styles/_type.scss */
.italic {
  font-style: italic;
}

/* line 60, ../sass/framework/core/styles/_type.scss */
.form-default .transparent-field input[type="text"], .message, .small-list, .list-reset, .cms-modules-listing a, .question__update-message p, .attend-module__header, .module-certificates .certificate-name span, .module-certificates .certificate-links a, .radio-element .has-training-value, .radio-element .has-icon-info, .radio-element span + span, .create-module__title, .training-confirmation__date, form .training-confirmation__date label {
  font-size: 0.75rem;
}

/* line 60, ../sass/framework/core/styles/_type.scss */
.nav--footer a, button.btn--inline, .btn--border, .btn.btn--default-size, .copyright-wrapper p, .table-listing, select, .form-default input[type=text], .form-default input[type=search], .form-default input[type=email], .form-default input[type=url], .form-default input[type=tel], .form-default input[type=number], .form-default input[type=range], .form-default input[type=date], .form-default input[type=month], .form-default input[type=week], .form-default input[type=time], .form-default input[type=password], .form-default textarea, .form-default label, .form-default .mimic-label, .form-default .mimic-input, .has-pound-sign:before, label.required:after, .mimic-label.required:after, .text--small, .header-section p, .listing-courses p, .listing-contacts .view-more-wrapper a, .reset-listing-text li, .sub-header p, .callout .close-callout:before, .accordion-title, .tabs-container li a, .checkout-message p, .answer-module label, .is-answer-correct span, .is-answer-correct a, .add-answer span, .add-answer a, .module-appointments__details, .module-analytics__item p, .pass-rates, .radio-element span, .wysiwyg ul li, .wysiwyg ol li, .add-module {
  font-size: 0.875rem;
}

/* line 60, ../sass/framework/core/styles/_type.scss */
.nav--main li, .sectors-nav__content a, .sectors-nav__content span, .dashboard-tabs .tabs-container li a, .question__answer label, .attend-module__sub-header p, .attend-module__sub-header a, .attend-module__link p, .attend-module__link a, .radio-element label, .progress-bar__details p {
  font-size: 1rem;
}

/* line 60, ../sass/framework/core/styles/_type.scss */
.sub-panel, .no-payment, .module-analytics__sub-header, .create-module__sub-title p {
  font-size: 1.125rem;
}

/* line 60, ../sass/framework/core/styles/_type.scss */
.title-content h4 {
  font-size: 1.25rem;
}

/* line 60, ../sass/framework/core/styles/_type.scss */
.question__query p, .module-appointments .appointment-mt-y, .current-trainees {
  font-size: 1.375rem;
}

/* line 60, ../sass/framework/core/styles/_type.scss */
.header-section h2, .sectors-nav__title p, .sectors-nav__title button {
  font-size: 1.5rem;
}

/* line 60, ../sass/framework/core/styles/_type.scss */
.title-content h3 {
  font-size: 1.5625rem;
}

/* line 60, ../sass/framework/core/styles/_type.scss */
.checkout-training-details p {
  font-size: 1.625rem;
}

/* line 60, ../sass/framework/core/styles/_type.scss */
.sandc-wrapper h2 {
  font-size: 1.8125rem;
}

/* line 60, ../sass/framework/core/styles/_type.scss */
.module-analytics__header--title, .training-confirmation__ref {
  font-size: 2.1875rem;
}

/* line 60, ../sass/framework/core/styles/_type.scss */
.module-appointments .appointment-day {
  font-size: 5.625rem;
}

/* line 90, ../sass/framework/core/styles/_type.scss */
h1,
.likeh1 {
  font-size: 2.375rem;
  line-height: 1.05263;
}

/* line 90, ../sass/framework/core/styles/_type.scss */
h2,
.likeh2 {
  font-size: 1.625rem;
  line-height: 0.92308;
}

/* line 90, ../sass/framework/core/styles/_type.scss */
h3,
.likeh3 {
  font-size: 1.125rem;
  line-height: 1.11111;
}

/* line 90, ../sass/framework/core/styles/_type.scss */
h4,
.likeh4 {
  font-size: 1rem;
  line-height: 1.125;
}

/* line 90, ../sass/framework/core/styles/_type.scss */
h5,
.likeh5 {
  font-size: 0.875rem;
  line-height: 1.28571;
}

/* line 90, ../sass/framework/core/styles/_type.scss */
h6,
.likeh6 {
  font-size: 1rem;
}

/* line 7, ../sass/framework/core/structure/_quotes.scss */
q {
  quotes: "“" "”";
}
/* line 10, ../sass/framework/core/structure/_quotes.scss */
q:before {
  content: open-quote;
}
/* line 14, ../sass/framework/core/structure/_quotes.scss */
q:after {
  content: close-quote;
}

/* line 22, ../sass/framework/core/structure/_quotes.scss */
blockquote {
  quotes: "“" "”";
  text-indent: -0.41em;
}
/* line 28, ../sass/framework/core/structure/_quotes.scss */
blockquote p:before {
  content: open-quote;
}
/* line 32, ../sass/framework/core/structure/_quotes.scss */
blockquote p:after {
  content: close-quote;
}

/*doc
---
title: Images
name: Images
category: Structure
---

Image styling is set up with responsive in mind. By default all images will be set with `max-width: 100%` applied to them.
This can be overridden by using the class `img--stretch`. Images can also be positioned by using the classes in the examples below:

```html_example
	<img src="http://placehold.it/500x100" alt="Demo image" class="img--stretch">

	<img src="http://placehold.it/500x100" alt="Demo image">

	<img src="http://placehold.it/500x100" alt="Demo image" class="img--left">

	<img src="http://placehold.it/500x100" alt="Demo image" class="img--center">

	<img src="http://placehold.it/500x100" alt="Demo image" class="img--right">
```
*/
/* line 28, ../sass/framework/core/structure/_images.scss */
img {
  max-width: 100%;
  height: auto;
}

/* line 37, ../sass/framework/core/structure/_images.scss */
img[width],
img[height] {
  width: auto;
}

/* line 42, ../sass/framework/core/structure/_images.scss */
.img--stretch {
  width: 100%;
  height: auto;
}

/* line 47, ../sass/framework/core/structure/_images.scss */
.img--right {
  margin-bottom: 0.625rem;
  margin-left: 0.625rem;
  float: right;
}

/* line 53, ../sass/framework/core/structure/_images.scss */
.img--left {
  margin-right: 0.625rem;
  margin-bottom: 0.625rem;
  float: left;
}

/* line 59, ../sass/framework/core/structure/_images.scss */
.img--center {
  margin-bottom: 0.625rem;
  display: block;
  margin-right: auto;
  margin-left: auto;
}

/*doc
---
title: Lists
name: Lists
category: Structure
---

Not a lot going on with lists. Uses a class `list-reset` to reset the styling, rather than a global reset.:

```html_example
<ul>
	<li>Unordered list item 1</li>
	<li>Unordered list item 2</li>
	<li>Unordered list item 3</li>
	<li>Unordered list item 4</li>
	<li>Unordered list item 5</li>
</ul>

<ol>
	<li>Ordered list item 1</li>
	<li>Ordered list item 2</li>
	<li>Ordered list item 3</li>
	<li>Ordered list item 4</li>
	<li>Ordered list item 5</li>
</ol>

<ul>
	<li>Unordered list item 1</li>
	<li>Unordered list item 2
		<ul>
			<li>Nested list item 1</li>
			<li>Nested list item 2</li>
			<li>Nested list item 3</li>
		</ul>
	</li>
	<li>Unordered list item 3</li>
	<li>Unordered list item 4</li>
	<li>Unordered list item 5</li>
</ul>

<ul class="list-reset">
	<li>Unordered list item 1</li>
	<li>Unordered list item 2</li>
	<li>Unordered list item 3</li>
	<li>Unordered list item 4</li>
	<li>Unordered list item 5</li>
</ul>
```
*/
/* line 62, ../sass/framework/core/structure/_lists.scss */
.nav, .breadcrumb, .tabs-container .nav, .nav .sub-navigation, .breadcrumb .sub-navigation,
.nav ul,
.breadcrumb ul,
.tabs-container .nav ul,
.nav ol,
.breadcrumb ol,
.tabs-container .nav ol, .nav--footer ul, .list, .small-list, .wysiwyg ul, .wysiwyg ol, .list-reset-wrapper ul, .progression-listing, .sectors-nav__content ul, .checkout-process__steps, .attend-module, .create-module {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* line 66, ../sass/framework/core/structure/_lists.scss */
.list-reset {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* line 71, ../sass/framework/core/structure/_lists.scss */
li > ul,
li > ol {
  margin-bottom: 0;
}

/* line 39, ../sass/framework/core/structure/_tables.scss */
table {
  width: 100%;
}
/* line 43, ../sass/framework/core/structure/_tables.scss */
table th,
table td {
  border: 1px solid #e2e2e2;
  padding: 0.5em;
}

/*table*/
/* line 51, ../sass/framework/core/structure/_tables.scss */
.table--reset th,
.table--reset td {
  border: 0;
  padding: 0;
}

/* line 60, ../sass/framework/core/structure/_tables.scss */
.table--grid {
  table-layout: fixed;
  width: 100%;
}

/*doc
---
title: Forms
name: Forms
category: Structure
---

Default form styles. This is how all `form` elements should be marked up as a starting point:

```html_example
<form action="#">

	<label for="default-text-1">This is a label for a text input</label>

	<div class="input-container">
		<input id="default-text-1" type="text">
	</div>

	<div class="input-container">
		<input id="default-checkbox-1" type="checkbox">
		<label for="default-checkbox-1">This is a label for a checkbox input</label>
	</div>

	<div class="input-container">
		<input id="default-radio-1" type="radio">
		<label for="default-radio-1">This is a label for a radio input</label>
	</div>

	<div class="input-container">
		<button type="submit">Submit form</button>
	</div>

</form>
```
*/
/*doc

---
title: Forms Horizontal
parent: Forms
---

The mark up for this is identical to the mark up above. The only addition is the class `form--horizontal`

You can set the width of the label area in forms.scss. The variables `$label-container-width` and `$label-gutter` make this possible

```html_example
<form action="#" class="form--horizontal">

	<label for="horizontal-text-1">This is a label for a text input</label>

	<div class="input-container">
		<input id="horizontal-text-1" type="text">
	</div>

	<label for="horizontal-text-2">You can also change the width of the input by adding a width class to the <code>input-container</code></label>

	<div class="input-container mob-width-12 tab-width-6 desk-width-7">
		<input id="horizontal-text-2" type="text">
	</div>

	<div class="input-container form--elements-stack">
		<input id="horizontal-checkbox-1" type="checkbox">
		<label for="horizontal-checkbox-1">This is a label for a checkbox input</label>
	</div>

	<div class="input-container form--elements-stack">
		<input id="horizontal-radio-1" type="radio">
		<label for="horizontal-radio-1">This is a label for a radio input</label>
	</div>

	<div class="input-container">
		<button type="submit">Submit form</button>
	</div>

</form>
```

*/
/* line 95, ../sass/framework/core/structure/_forms.scss */
input[type=text], input[type=search], input[type=email], input[type=url], input[type=tel], input[type=number], input[type=range], input[type=date], input[type=month], input[type=week], input[type=time], input[type=password], textarea {
  width: 100%;
}

@media all and (min-width: 37.8125em) {
  /* line 103, ../sass/framework/core/structure/_forms.scss */
  .form--horizontal label, .form--horizontal-answer label, .form--horizontal-small label,
  .form--horizontal .mimic-label,
  .form--horizontal-answer .mimic-label,
  .form--horizontal-small .mimic-label {
    padding-top: 0.6875rem;
    float: left;
    text-align: right;
  }
  /* line 112, ../sass/framework/core/structure/_forms.scss */
  .form--horizontal .input-container input[type=text], .form--horizontal-answer .input-container input[type=text], .form--horizontal-small .input-container input[type=text], .form--horizontal .input-container input[type=search], .form--horizontal-answer .input-container input[type=search], .form--horizontal-small .input-container input[type=search], .form--horizontal .input-container input[type=email], .form--horizontal-answer .input-container input[type=email], .form--horizontal-small .input-container input[type=email], .form--horizontal .input-container input[type=url], .form--horizontal-answer .input-container input[type=url], .form--horizontal-small .input-container input[type=url], .form--horizontal .input-container input[type=tel], .form--horizontal-answer .input-container input[type=tel], .form--horizontal-small .input-container input[type=tel], .form--horizontal .input-container input[type=number], .form--horizontal-answer .input-container input[type=number], .form--horizontal-small .input-container input[type=number], .form--horizontal .input-container input[type=range], .form--horizontal-answer .input-container input[type=range], .form--horizontal-small .input-container input[type=range], .form--horizontal .input-container input[type=date], .form--horizontal-answer .input-container input[type=date], .form--horizontal-small .input-container input[type=date], .form--horizontal .input-container input[type=month], .form--horizontal-answer .input-container input[type=month], .form--horizontal-small .input-container input[type=month], .form--horizontal .input-container input[type=week], .form--horizontal-answer .input-container input[type=week], .form--horizontal-small .input-container input[type=week], .form--horizontal .input-container input[type=time], .form--horizontal-answer .input-container input[type=time], .form--horizontal-small .input-container input[type=time], .form--horizontal .input-container input[type=password], .form--horizontal-answer .input-container input[type=password], .form--horizontal-small .input-container input[type=password], .form--horizontal .input-container textarea, .form--horizontal-answer .input-container textarea, .form--horizontal-small .input-container textarea {
    display: block;
  }
  /* line 120, ../sass/framework/core/structure/_forms.scss */
  .form--horizontal .form--elements-stack label, .form--horizontal-answer .form--elements-stack label, .form--horizontal-small .form--elements-stack label,
  .form--horizontal .form--elements-stack .mimic-label,
  .form--horizontal-answer .form--elements-stack .mimic-label,
  .form--horizontal-small .form--elements-stack .mimic-label {
    float: none;
    text-align: left;
    padding-left: 0;
    width: auto;
  }
  /* line 131, ../sass/framework/core/structure/_forms.scss */
  .form--horizontal .row label, .form--horizontal-answer .row label, .form--horizontal-small .row label,
  .form--horizontal .row .mimic-label,
  .form--horizontal-answer .row .mimic-label,
  .form--horizontal-small .row .mimic-label,
  .form--horizontal .row .input-container,
  .form--horizontal-answer .row .input-container,
  .form--horizontal-small .row .input-container {
    padding-left: 0;
  }
}
/* line 185, ../sass/framework/core/structure/_forms.scss */
input[type=checkbox],
input[type=radio] {
  display: inline-block;
  margin-right: 5px;
}
/* line 190, ../sass/framework/core/structure/_forms.scss */
input[type=checkbox] + label,
input[type=radio] + label {
  display: inline-block;
}

/* line 198, ../sass/framework/core/structure/_forms.scss */
.custom-checkbox input[type=checkbox]:checked + label::before {
  background-image: url('../images/icons/icon-checkbox-check.png?1421058570');
}
/* line 204, ../sass/framework/core/structure/_forms.scss */
.custom-checkbox label {
  padding-left: 30px !important;
  padding-top: 0 !important;
  position: relative;
  width: auto !important;
  float: none;
}
/* line 211, ../sass/framework/core/structure/_forms.scss */
.custom-checkbox label::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-image: url('../images/icons/icon-checkbox-uncheck.png?1421058570');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/*doc
---
title: Buttons
name: Buttons
category: Structure
---

Button styles can be applied to any element. Typically you'll want to
use either a `<button>` or an `<a>` element:

```html_example
<button class="btn">Button</button>

<a class="btn" href="#">Link Button</a>

<button class="btn btn--small">Small</button>

<button class="btn btn--large">Large</button>

<button class="btn" disabled>Disabled</button>

<button class="btn btn--full">Full width</button>

```
*/
/* line 33, ../sass/framework/core/structure/_buttons.scss */
input[type=button], input[type=reset], input[type=submit], button,
.btn, .wysiwyg a, .wysiwyg-cookies a, .ui-state-default {
  display: inline-block;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 0;
  font-size: 100%;
  padding-left: 1em;
  padding-right: 1em;
  line-height: 3;
  height: 3em;
  color: inherit;
  font-family: inherit;
  background: none;
  padding-top: 0;
  padding-bottom: 0;
}

/* line 54, ../sass/framework/core/structure/_buttons.scss */
.btn--full {
  width: 100%;
  text-align: center;
}

/* line 62, ../sass/framework/core/structure/_buttons.scss */
.btn--small {
  padding-left: 0.5em;
  padding-right: 0.5em;
  line-height: 2;
  height: 2em;
}

/* line 69, ../sass/framework/core/structure/_buttons.scss */
.btn--large {
  padding-right: 1.5em;
  padding-left: 1.5em;
  line-height: 4;
  height: 4em;
}

/* line 78, ../sass/framework/core/structure/_buttons.scss */
.btn--disabled, .btn--disabled:hover, .btn--disabled:active, .btn--disabled:focus,
button[disabled],
button[disabled]:hover,
button[disabled]:active,
button[disabled]:focus {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: 0.5;
  cursor: default;
}

/* line 43, ../sass/framework/core/structure/layout/_grid.scss */
.row {
  margin: 0;
  padding: 0;
  position: relative;
  display: block;
  font-size: 0;
}

/* line 52, ../sass/framework/core/structure/layout/_grid.scss */
.grid-item {
  font-size: 1rem;
  width: 100%;
  position: relative;
  display: inline-block;
  vertical-align: top;
}

/* line 60, ../sass/framework/core/structure/layout/_grid.scss */
.grid-inner {
  display: block;
}

/* line 34, ../sass/framework/core/structure/layout/_grid-gutters.scss */
.row {
  margin-left: -1rem;
}
/* line 27, ../sass/framework/core/structure/layout/_grid-gutters.scss */
.row > .grid-item {
  padding-left: 1rem;
}

/* line 42, ../sass/framework/core/structure/layout/_grid-gutters.scss */
.grid--gutter-0 {
  margin-left: 0;
}
/* line 27, ../sass/framework/core/structure/layout/_grid-gutters.scss */
.grid--gutter-0 > .grid-item {
  padding-left: 0;
}

/* line 42, ../sass/framework/core/structure/layout/_grid-gutters.scss */
.grid--gutter-20 {
  margin-left: -1.25rem;
}
/* line 27, ../sass/framework/core/structure/layout/_grid-gutters.scss */
.grid--gutter-20 > .grid-item {
  padding-left: 1.25rem;
}

/* line 42, ../sass/framework/core/structure/layout/_grid-gutters.scss */
.grid--gutter-50 {
  margin-left: -3.125rem;
}
/* line 27, ../sass/framework/core/structure/layout/_grid-gutters.scss */
.grid--gutter-50 > .grid-item {
  padding-left: 3.125rem;
}

@media all and (min-width: 37.8125em) {
  /* line 65, ../sass/framework/core/mixins/_grid-calculator.scss */
  .desk-w-2-4, .desk-w-3-6, .desk-w-6-12 {
    width: 50%;
  }

  /* line 65, ../sass/framework/core/mixins/_grid-calculator.scss */
  .desk-w-2-6, .desk-w-3-9, .hero__info, .desk-w-4-12, .desk-w-1-3 {
    width: 33.33333%;
  }

  /* line 65, ../sass/framework/core/mixins/_grid-calculator.scss */
  .desk-w-4-6, .desk-w-6-9, .desk-w-8-12 {
    width: 66.66667%;
  }

  /* line 65, ../sass/framework/core/mixins/_grid-calculator.scss */
  .desk-w-3-12, .desk-w-1-4 {
    width: 25%;
  }

  /* line 65, ../sass/framework/core/mixins/_grid-calculator.scss */
  .desk-w-9-12 {
    width: 75%;
  }

  /* line 65, ../sass/framework/core/mixins/_grid-calculator.scss */
  .desk-w-2-12 {
    width: 16.66667%;
  }

  /* line 65, ../sass/framework/core/mixins/_grid-calculator.scss */
  .desk-w-10-12 {
    width: 83.33333%;
  }

  /* line 65, ../sass/framework/core/mixins/_grid-calculator.scss */
  .desk-w-5-8 {
    width: 62.5%;
  }

  /* line 65, ../sass/framework/core/mixins/_grid-calculator.scss */
  .desk-w-2-9 {
    width: 22.22222%;
  }

  /* line 65, ../sass/framework/core/mixins/_grid-calculator.scss */
  .desk-w-4-9 {
    width: 44.44444%;
  }

  /* line 65, ../sass/framework/core/mixins/_grid-calculator.scss */
  .desk-w-5-9 {
    width: 55.55556%;
  }

  /* line 65, ../sass/framework/core/mixins/_grid-calculator.scss */
  .desk-w-7-9 {
    width: 77.77778%;
  }

  /* line 65, ../sass/framework/core/mixins/_grid-calculator.scss */
  .desk-w-8-9 {
    width: 88.88889%;
  }

  /* line 65, ../sass/framework/core/mixins/_grid-calculator.scss */
  .desk-w-5-12 {
    width: 41.66667%;
  }

  /* line 65, ../sass/framework/core/mixins/_grid-calculator.scss */
  .desk-w-7-12 {
    width: 58.33333%;
  }
}
@media all and (min-width: 37.8125em) {
  /* line 75, ../sass/framework/core/mixins/_grid-calculator.scss */
  .desk-suffix-4-12 {
    right: 33.33333%;
  }

  /* line 65, ../sass/framework/core/mixins/_grid-calculator.scss */
  .desk-prefix-8-12 {
    left: 66.66667%;
  }
}
/* line 12, ../sass/framework/core/structure/layout/_block-format.scss */
.block-format-left {
  float: left;
}

/* line 16, ../sass/framework/core/structure/layout/_block-format.scss */
.block-format-right {
  float: right;
}

/* line 20, ../sass/framework/core/structure/layout/_block-format.scss */
.block-format-fluid {
  display: block;
  overflow: hidden;
  float: none;
}

@media all and (max-width: 37.8025em) {
  /* line 12, ../sass/framework/core/structure/layout/_block-format.scss */
  .mob-block-format-left {
    float: left;
  }

  /* line 16, ../sass/framework/core/structure/layout/_block-format.scss */
  .mob-block-format-right {
    float: right;
  }

  /* line 20, ../sass/framework/core/structure/layout/_block-format.scss */
  .mob-block-format-fluid {
    display: block;
    overflow: hidden;
    float: none;
  }
}
@media all and (min-width: 37.8125em) {
  /* line 12, ../sass/framework/core/structure/layout/_block-format.scss */
  .desk-block-format-left, .homepage-promo-row .course__img-container {
    float: left;
  }

  /* line 16, ../sass/framework/core/structure/layout/_block-format.scss */
  .desk-block-format-right {
    float: right;
  }

  /* line 20, ../sass/framework/core/structure/layout/_block-format.scss */
  .desk-block-format-fluid, .homepage-promo-row .course__text-container {
    display: block;
    overflow: hidden;
    float: none;
  }
}
/*ul*/
/* line 57, ../sass/framework/core/structure/layout/_listing-items.scss */
.listing-item, .listing-courses, .listing-contacts, .cms-modules-listing, .file-selector-listing {
  margin-left: -1rem;
  margin-top: -1rem;
  list-style: none;
  padding: 0;
  margin-bottom: 0;
  display: block;
  font-size: 0;
}
/* line 43, ../sass/framework/core/structure/layout/_listing-items.scss */
.listing-item > li, .listing-courses > li, .listing-contacts > li, .cms-modules-listing > li, .file-selector-listing > li {
  padding-left: 1rem;
}
/* line 52, ../sass/framework/core/structure/layout/_listing-items.scss */
.listing-item > li, .listing-courses > li, .listing-contacts > li, .cms-modules-listing > li, .file-selector-listing > li {
  padding-top: 1rem;
}
/* line 67, ../sass/framework/core/structure/layout/_listing-items.scss */
.listing-item > li, .listing-courses > li, .listing-contacts > li, .cms-modules-listing > li, .file-selector-listing > li {
  font-size: 1rem;
  width: 100%;
  display: inline-block;
  vertical-align: top;
}

@media all and (max-width: 37.8025em) {
  /* line 32, ../sass/framework/core/structure/layout/_listing-items.scss */
  .mob-1-items > li {
    width: 100%;
  }

  /* line 32, ../sass/framework/core/structure/layout/_listing-items.scss */
  .mob-2-items > li {
    width: 50%;
  }
}
@media all and (min-width: 37.8125em) {
  /* line 32, ../sass/framework/core/structure/layout/_listing-items.scss */
  .desk-2-items > li {
    width: 50%;
  }

  /* line 32, ../sass/framework/core/structure/layout/_listing-items.scss */
  .desk-3-items > li {
    width: 33.33333%;
  }

  /* line 32, ../sass/framework/core/structure/layout/_listing-items.scss */
  .desk-4-items > li {
    width: 25%;
  }
}
/* line 88, ../sass/framework/core/structure/layout/_listing-items.scss */
.listing--gutter-h-20 {
  margin-left: -1.25rem;
}
/* line 43, ../sass/framework/core/structure/layout/_listing-items.scss */
.listing--gutter-h-20 > li {
  padding-left: 1.25rem;
}

/* line 94, ../sass/framework/core/structure/layout/_listing-items.scss */
.listing--gutter-v-20 {
  margin-top: -1.25rem;
}
/* line 52, ../sass/framework/core/structure/layout/_listing-items.scss */
.listing--gutter-v-20 > li {
  padding-top: 1.25rem;
}

/* line 8, ../sass/framework/core/structure/layout/_navigation.scss */
.nav, .breadcrumb, .tabs-container .nav {
  font-size: 0;
}
/* line 12, ../sass/framework/core/structure/layout/_navigation.scss */
.nav li, .breadcrumb li, .tabs-container .nav li {
  font-size: 1rem;
  position: relative;
}
/* line 16, ../sass/framework/core/structure/layout/_navigation.scss */
.nav li, .breadcrumb li, .tabs-container .nav li,
.nav li > a,
.breadcrumb li > a,
.tabs-container .nav li > a {
  display: inline-block;
}
/* line 24, ../sass/framework/core/structure/layout/_navigation.scss */
.nav .sub-navigation, .breadcrumb .sub-navigation,
.nav ul,
.breadcrumb ul,
.tabs-container .nav ul,
.nav ol,
.breadcrumb ol,
.tabs-container .nav ol {
  display: none;
  position: absolute;
  top: 100%;
  min-width: 100%;
}
/* line 33, ../sass/framework/core/structure/layout/_navigation.scss */
.nav .sub-navigation a, .breadcrumb .sub-navigation a,
.nav ul a,
.breadcrumb ul a,
.tabs-container .nav ul a,
.nav ol a,
.breadcrumb ol a,
.tabs-container .nav ol a {
  white-space: nowrap;
  display: block;
}
/* line 40, ../sass/framework/core/structure/layout/_navigation.scss */
.nav li:hover > ul, .breadcrumb li:hover > ul,
.nav li:hover > ol,
.breadcrumb li:hover > ol {
  display: block;
}

/*ul or ol*/
/* line 66, ../sass/framework/core/structure/layout/_navigation.scss */
.nav--center {
  text-align: center;
}

/* line 70, ../sass/framework/core/structure/layout/_navigation.scss */
.nav--right {
  text-align: right;
}
/* line 73, ../sass/framework/core/structure/layout/_navigation.scss */
.nav--right ul,
.nav--right ol {
  right: 0;
}

/* line 80, ../sass/framework/core/structure/layout/_navigation.scss */
.nav--left {
  text-align: left;
}

/* line 85, ../sass/framework/core/structure/layout/_navigation.scss */
.nav--stacked li,
.nav--stacked a {
  display: block;
}
/* line 90, ../sass/framework/core/structure/layout/_navigation.scss */
.nav--stacked ul,
.nav--stacked ol {
  position: static;
}

/* line 97, ../sass/framework/core/structure/layout/_navigation.scss */
.nav--full {
  display: table;
  width: 100%;
}
/* line 101, ../sass/framework/core/structure/layout/_navigation.scss */
.nav--full > li {
  display: table-cell;
}
/* line 104, ../sass/framework/core/structure/layout/_navigation.scss */
.nav--full > li > a {
  display: block;
}

/* line 112, ../sass/framework/core/structure/layout/_navigation.scss */
.nav--hide-sub > li:hover > ul,
.nav--hide-sub > li:hover > ol {
  display: none;
}

@media all and (max-width: 37.8025em) {
  /* line 66, ../sass/framework/core/structure/layout/_navigation.scss */
  .mob-nav--center {
    text-align: center;
  }

  /* line 70, ../sass/framework/core/structure/layout/_navigation.scss */
  .mob-nav--right {
    text-align: right;
  }
  /* line 73, ../sass/framework/core/structure/layout/_navigation.scss */
  .mob-nav--right ul,
  .mob-nav--right ol {
    right: 0;
  }

  /* line 80, ../sass/framework/core/structure/layout/_navigation.scss */
  .mob-nav--left {
    text-align: left;
  }

  /* line 85, ../sass/framework/core/structure/layout/_navigation.scss */
  .mob-nav--stacked li,
  .mob-nav--stacked a {
    display: block;
  }
  /* line 90, ../sass/framework/core/structure/layout/_navigation.scss */
  .mob-nav--stacked ul,
  .mob-nav--stacked ol {
    position: static;
  }

  /* line 97, ../sass/framework/core/structure/layout/_navigation.scss */
  .mob-nav--full {
    display: table;
    width: 100%;
  }
  /* line 101, ../sass/framework/core/structure/layout/_navigation.scss */
  .mob-nav--full > li {
    display: table-cell;
  }
  /* line 104, ../sass/framework/core/structure/layout/_navigation.scss */
  .mob-nav--full > li > a {
    display: block;
  }

  /* line 112, ../sass/framework/core/structure/layout/_navigation.scss */
  .mob-nav--hide-sub > li:hover > ul,
  .mob-nav--hide-sub > li:hover > ol {
    display: none;
  }
}
@media all and (min-width: 37.8125em) {
  /* line 66, ../sass/framework/core/structure/layout/_navigation.scss */
  .desk-nav--center {
    text-align: center;
  }

  /* line 70, ../sass/framework/core/structure/layout/_navigation.scss */
  .desk-nav--right {
    text-align: right;
  }
  /* line 73, ../sass/framework/core/structure/layout/_navigation.scss */
  .desk-nav--right ul,
  .desk-nav--right ol {
    right: 0;
  }

  /* line 80, ../sass/framework/core/structure/layout/_navigation.scss */
  .desk-nav--left {
    text-align: left;
  }

  /* line 85, ../sass/framework/core/structure/layout/_navigation.scss */
  .desk-nav--stacked li,
  .desk-nav--stacked a {
    display: block;
  }
  /* line 90, ../sass/framework/core/structure/layout/_navigation.scss */
  .desk-nav--stacked ul,
  .desk-nav--stacked ol {
    position: static;
  }

  /* line 97, ../sass/framework/core/structure/layout/_navigation.scss */
  .desk-nav--full {
    display: table;
    width: 100%;
  }
  /* line 101, ../sass/framework/core/structure/layout/_navigation.scss */
  .desk-nav--full > li {
    display: table-cell;
  }
  /* line 104, ../sass/framework/core/structure/layout/_navigation.scss */
  .desk-nav--full > li > a {
    display: block;
  }

  /* line 112, ../sass/framework/core/structure/layout/_navigation.scss */
  .desk-nav--hide-sub > li:hover > ul,
  .desk-nav--hide-sub > li:hover > ol {
    display: none;
  }
}
/* line 27, ../sass/framework/core/structure/_spacing-helpers.scss */
.progression-listing__item, .progress-bar {
  margin-bottom: 1.25rem !important;
}

/* line 27, ../sass/framework/core/structure/_spacing-helpers.scss */
.sectors-nav, .modules-list {
  margin-bottom: 2.5rem !important;
}

/* line 27, ../sass/framework/core/structure/_spacing-helpers.scss */
.mb-0 {
  margin-bottom: 0 !important;
}

/* line 27, ../sass/framework/core/structure/_spacing-helpers.scss */
.mb-10 {
  margin-bottom: 0.625rem !important;
}

/* line 27, ../sass/framework/core/structure/_spacing-helpers.scss */
.mb-16 {
  margin-bottom: 1rem !important;
}

/* line 27, ../sass/framework/core/structure/_spacing-helpers.scss */
.mb-20 {
  margin-bottom: 1.25rem !important;
}

/* line 27, ../sass/framework/core/structure/_spacing-helpers.scss */
.mb-25 {
  margin-bottom: 1.5625rem !important;
}

/* line 27, ../sass/framework/core/structure/_spacing-helpers.scss */
.mb-30 {
  margin-bottom: 1.875rem !important;
}

/* line 27, ../sass/framework/core/structure/_spacing-helpers.scss */
.mb-40 {
  margin-bottom: 2.5rem !important;
}

/* line 27, ../sass/framework/core/structure/_spacing-helpers.scss */
.mb-50 {
  margin-bottom: 3.125rem !important;
}

/* line 27, ../sass/framework/core/structure/_spacing-helpers.scss */
.mb-60 {
  margin-bottom: 3.75rem !important;
}

@media all and (max-width: 37.8025em) {
  /* line 27, ../sass/framework/core/structure/_spacing-helpers.scss */
  .mob-mb-0 {
    margin-bottom: 0 !important;
  }

  /* line 27, ../sass/framework/core/structure/_spacing-helpers.scss */
  .mob-mb-10 {
    margin-bottom: 0.625rem !important;
  }

  /* line 27, ../sass/framework/core/structure/_spacing-helpers.scss */
  .mob-mb-16 {
    margin-bottom: 1rem !important;
  }

  /* line 27, ../sass/framework/core/structure/_spacing-helpers.scss */
  .mob-mb-20 {
    margin-bottom: 1.25rem !important;
  }

  /* line 27, ../sass/framework/core/structure/_spacing-helpers.scss */
  .mob-mb-25 {
    margin-bottom: 1.5625rem !important;
  }

  /* line 27, ../sass/framework/core/structure/_spacing-helpers.scss */
  .mob-mb-30 {
    margin-bottom: 1.875rem !important;
  }

  /* line 27, ../sass/framework/core/structure/_spacing-helpers.scss */
  .mob-mb-40 {
    margin-bottom: 2.5rem !important;
  }

  /* line 27, ../sass/framework/core/structure/_spacing-helpers.scss */
  .mob-mb-50 {
    margin-bottom: 3.125rem !important;
  }

  /* line 27, ../sass/framework/core/structure/_spacing-helpers.scss */
  .mob-mb-60 {
    margin-bottom: 3.75rem !important;
  }
}
@media all and (min-width: 37.8125em) {
  /* line 27, ../sass/framework/core/structure/_spacing-helpers.scss */
  .desk-mb-0 {
    margin-bottom: 0 !important;
  }

  /* line 27, ../sass/framework/core/structure/_spacing-helpers.scss */
  .desk-mb-10 {
    margin-bottom: 0.625rem !important;
  }

  /* line 27, ../sass/framework/core/structure/_spacing-helpers.scss */
  .desk-mb-16 {
    margin-bottom: 1rem !important;
  }

  /* line 27, ../sass/framework/core/structure/_spacing-helpers.scss */
  .desk-mb-20 {
    margin-bottom: 1.25rem !important;
  }

  /* line 27, ../sass/framework/core/structure/_spacing-helpers.scss */
  .desk-mb-25 {
    margin-bottom: 1.5625rem !important;
  }

  /* line 27, ../sass/framework/core/structure/_spacing-helpers.scss */
  .desk-mb-30 {
    margin-bottom: 1.875rem !important;
  }

  /* line 27, ../sass/framework/core/structure/_spacing-helpers.scss */
  .desk-mb-40 {
    margin-bottom: 2.5rem !important;
  }

  /* line 27, ../sass/framework/core/structure/_spacing-helpers.scss */
  .desk-mb-50 {
    margin-bottom: 3.125rem !important;
  }

  /* line 27, ../sass/framework/core/structure/_spacing-helpers.scss */
  .desk-mb-60 {
    margin-bottom: 3.75rem !important;
  }
}
/* line 10, ../sass/framework/core/styles/_helpers.scss */
.ir, .pagination .prev a, .pagination .previous a, .pagination .next a {
  background-color: transparent;
  border: 0;
  overflow: hidden;
}
/* line 15, ../sass/framework/core/styles/_helpers.scss */
.ir:before, .pagination .prev a:before, .pagination .previous a:before, .pagination .next a:before {
  content: "";
  display: block;
  width: 0;
  height: 150%;
}

/* line 24, ../sass/framework/core/styles/_helpers.scss */
.visuallyhidden, .mob-test, .desk-test, .course-filters__list input[type=checkbox] {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/* line 54, ../sass/framework/core/styles/_helpers.scss */
.invisible {
  visibility: hidden;
}

/* line 58, ../sass/framework/core/styles/_helpers.scss */
.float-left {
  float: left !important;
}

/* line 62, ../sass/framework/core/styles/_helpers.scss */
.float-right {
  float: right !important;
}

/* line 11, ../sass/framework/core/mixins/_hidden.scss */
.hide {
  display: none !important;
  visibility: hidden;
}

@media all and (max-width: 37.8025em) {
  /* line 11, ../sass/framework/core/mixins/_hidden.scss */
  .hide-mob {
    display: none !important;
    visibility: hidden;
  }
}
@media all and (min-width: 37.8125em) {
  /* line 11, ../sass/framework/core/mixins/_hidden.scss */
  .hide-desk {
    display: none !important;
    visibility: hidden;
  }
}
/* line 8, ../sass/framework/core/styles/_clearfix.scss */
.input-container:after, .row:after, .listing-item:after, .listing-courses:after, .listing-contacts:after, .cms-modules-listing:after, .file-selector-listing:after, .clearfix:after, .breadcrumb:after, .progression-listing__item:after, .progress-bar:after {
  content: " ";
  display: table;
  clear: both;
}

/* line 7, ../sass/framework/core/helpers/_media-test.scss */
.mob-test, .desk-test {
  display: none;
}

@media all and (max-width: 37.8025em) {
  /* line 21, ../sass/framework/core/helpers/_media-test.scss */
  .mob-test {
    display: block;
  }
}
@media all and (min-width: 37.8125em) {
  /* line 21, ../sass/framework/core/helpers/_media-test.scss */
  .desk-test {
    display: block;
  }
}
@media all and (min-width: 37.8125em) {
  /* line 2, ../sass/utils/_helpers.scss */
  .desk-float-left {
    float: left !important;
  }
}

@media all and (min-width: 37.8125em) {
  /* line 8, ../sass/utils/_helpers.scss */
  .desk-float-right {
    float: right !important;
  }
}

@media all and (max-width: 37.8025em) {
  /* line 14, ../sass/utils/_helpers.scss */
  .mob-float-left {
    float: left !important;
  }
}

/* line 20, ../sass/utils/_helpers.scss */
.reset-float {
  float: none !important;
}

/* line 24, ../sass/utils/_helpers.scss */
.display-table {
  display: table;
  width: 100%;
}

/* line 29, ../sass/utils/_helpers.scss */
.align-bottom {
  display: table-cell;
  vertical-align: bottom;
}

/* line 34, ../sass/utils/_helpers.scss */
.inline-block {
  display: inline-block !important;
}

/* line 38, ../sass/utils/_helpers.scss */
.mr-35 {
  margin-right: 2.1875rem;
}

/* line 42, ../sass/utils/_helpers.scss */
.reset-width {
  width: auto !important;
}

/* line 46, ../sass/utils/_helpers.scss */
.reset-height {
  height: auto !important;
}

/* line 7, ../sass/skin/_global.scss */
.primary-color, .table-listing td, .module-listing h3, .accordion-title, .tabs-container li a, .checkout-training-details p, .no-payment, .answer-module label, .is-answer-correct span, .is-answer-correct a, .add-answer span, .add-answer a, .module-appointments .appointment-day, .module-appointments .appointment-mt-y, .module-analytics__header--title, .module-analytics__sub-header, .module-certificates__header, .module-certificates .certificate-name p, .wysiwyg h1, .wysiwyg h2, .wysiwyg h3, .wysiwyg h4, .wysiwyg-cookies h1, .wysiwyg-cookies h2, .wysiwyg-cookies h3, .wysiwyg-cookies h4, .questions-nb span, .training-confirmation__content span {
  color: #0075cd;
}

/* line 11, ../sass/skin/_global.scss */
.secondary-color {
  color: #555;
}

/* line 19, ../sass/skin/_global.scss */
.pagination a, .nav-container .site-section a, .btn--no-style, .btn-view-more, .btn--border, .module-listing a, .sectors-nav__content a, .sectors-nav__content span, .tabs-container li a {
  text-decoration: none;
}
/* line 22, ../sass/skin/_global.scss */
.pagination a:hover, .nav-container .site-section a:hover, .btn--no-style:hover, .btn-view-more:hover, .btn--border:hover, .module-listing a:hover, .sectors-nav__content a:hover, .sectors-nav__content span:hover, .tabs-container li a:hover {
  text-decoration: underline;
}

/* line 27, ../sass/skin/_global.scss */
.breadcrumb > li a, .btn--standalone, .btn--inline, .btn--inline--alert, .accordion-button, .wysiwyg a, .wysiwyg-cookies a, .ui-state-default, .list, .small-list, .wysiwyg ul, .wysiwyg ol, .faq-list a, .tabs-container .nav a, .basket a {
  text-decoration: underline;
}
/* line 30, ../sass/skin/_global.scss */
.breadcrumb > li a:hover, .btn--standalone:hover, .btn--inline:hover, .btn--inline--alert:hover, .accordion-button:hover, .wysiwyg a:hover, .wysiwyg-cookies a:hover, .ui-state-default:hover, .list:hover, .small-list:hover, .wysiwyg ul:hover, .wysiwyg ol:hover, .faq-list a:hover, .tabs-container .nav a:hover, .basket a:hover {
  text-decoration: none;
}

/* line 35, ../sass/skin/_global.scss */
.sectors-nav .start-test, .training-confirmation__date, .training-confirmation__date.is-held, .training-confirmation__date .is-held {
  background-color: #74c13c;
}

/* line 39, ../sass/skin/_global.scss */
.sectors-nav .test-passed, .training-confirmation__date.is-booked, .training-confirmation__date .is-booked {
  background-color: #f86548;
}

/* line 43, ../sass/skin/_global.scss */
.sectors-nav .retake-test {
  background-color: #d6000f;
}

/* line 47, ../sass/skin/_global.scss */
.flush-mb, .form--horizontal-answer .answer-module input[type="text"], .answer-module .answer-text-wrapper input[type="text"], .module-certificates .certificate-name p, .training-confirmation__date p {
  margin-bottom: 0;
}

/* line 55, ../sass/skin/_global.scss */
.mt-20 {
  margin-top: 1.25rem;
}

/* line 59, ../sass/skin/_global.scss */
.media-wrapper {
  margin-bottom: 0.9375rem;
}

/* line 63, ../sass/skin/_global.scss */
.media-wrapper--narrow {
  max-width: 80%;
  margin: 0 auto;
}

/* line 76, ../sass/skin/_global.scss */
.global-spacing {
  margin-bottom: 1.25rem;
}

/* line 80, ../sass/skin/_global.scss */
.module-spacing {
  margin-bottom: 2.5rem;
}

/* line 92, ../sass/skin/_global.scss */
.line-divider {
  border-top: 1px solid #e2e2e2;
}

/* line 96, ../sass/skin/_global.scss */
.line-divider-wrapper {
  padding-top: 3.75rem;
  border-top: 1px solid #e2e2e2;
}

/* line 101, ../sass/skin/_global.scss */
.display-block {
  display: block;
}

@media all and (min-width: 18.75em) {
  /* line 105, ../sass/skin/_global.scss */
  .mob-display-block {
    display: block;
  }
}

/* line 111, ../sass/skin/_global.scss */
.full-width {
  width: 100%;
}

/* line 115, ../sass/skin/_global.scss */
.half-width {
  width: 50%;
}

/* line 119, ../sass/skin/_global.scss */
.align-top {
  display: inline-block;
  vertical-align: top;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
}

/* line 123, ../sass/skin/_global.scss */
.align-baseline {
  display: inline-block;
  vertical-align: baseline;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
}

/* line 127, ../sass/skin/_global.scss */
.padded-area {
  padding: 1.5625rem;
}

/* line 131, ../sass/skin/_global.scss */
.padded-area--xs {
  padding: 1.25rem;
}

/* line 143, ../sass/skin/_global.scss */
.border-radius {
  border-radius: 4px;
}

/* line 147, ../sass/skin/_global.scss */
.white-area {
  background-color: #fff;
}

@media all and (min-width: 37.8125em) {
  /* line 154, ../sass/skin/_global.scss */
  html.is-in-iframe {
    height: auto;
    overflow-y: auto;
  }
  /* line 158, ../sass/skin/_global.scss */
  html.is-in-iframe .viewport-wide {
    padding: 1.5625rem;
    min-width: 100%;
  }
  /* line 163, ../sass/skin/_global.scss */
  html.is-in-iframe .hide-in-iframe {
    display: none;
  }
  /* line 167, ../sass/skin/_global.scss */
  html.is-in-iframe .site-wide {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  /* line 173, ../sass/skin/_global.scss */
  html.is-in-iframe .primary-col {
    width: 100%;
  }
  /* line 177, ../sass/skin/_global.scss */
  html.is-in-iframe body {
    height: auto;
  }
}
/* line 185, ../sass/skin/_global.scss */
.overflow {
  overflow: auto;
}

/* line 189, ../sass/skin/_global.scss */
.text-white {
  color: #fff;
}

@media all and (min-width: 37.8125em) {
  /* line 193, ../sass/skin/_global.scss */
  .error-page {
    min-height: 25rem;
  }
}

/* line 200, ../sass/skin/_global.scss */
.accordion-faq .accordion-button:focus, .training-confirmation input:focus {
  outline: none;
}

/* line 205, ../sass/skin/_global.scss */
.reset-pt-std {
  padding-top: 0;
}

/* line 210, ../sass/skin/_global.scss */
.reset-pt label, .reset-pt .mimic-label {
  padding-top: 0.125rem;
}

/* line 229, ../sass/skin/_global.scss */
.listing-item li {
  position: relative;
}

/* line 234, ../sass/skin/_global.scss */
.pass-icon {
  top: -0.5625rem;
  right: -0.625rem;
  height: 1.5625rem;
  width: 1.5625rem;
  content: "";
  position: absolute;
  background-image: url('../images/icons/icon-pass.png?1442833318');
  background-repeat: no-repeat;
  background-size: 100%;
  z-index: 10;
}

/* line 247, ../sass/skin/_global.scss */
.pounds {
  font-size: 1.75rem;
  line-height: 1;
  margin-bottom: 0;
  font-weight: normal;
}
/* line 252, ../sass/skin/_global.scss */
.pounds:before {
  font-size: inherit;
  content: "\00A3";
  display: inline-block;
}

/* line 259, ../sass/skin/_global.scss */
.pennies {
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: 600;
}

/* line 264, ../sass/skin/_global.scss */
.cookie-disclaimer {
  -ms-transform: translateY(0);
  transform: translateY(0);
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  color: #fff;
  z-index: 200;
  background-color: rgba(0, 0, 0, 0.5);
  visibility: visible;
  transition: all 0.3s ease-in-out;
}
/* line 278, ../sass/skin/_global.scss */
.cookie-disclaimer.cookie-hidden {
  -ms-transform: translateY(100%);
  transform: translateY(100%);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  visibility: hidden;
}
/* line 284, ../sass/skin/_global.scss */
.cookie-disclaimer .cookie-disclaimer--content {
  padding: 20px;
  background-color: #1d5ba5;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
}
@media all and (min-width: 37.8125em) {
  /* line 284, ../sass/skin/_global.scss */
  .cookie-disclaimer .cookie-disclaimer--content {
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    max-width: 1000px;
    border-radius: 20px;
    padding: 50px;
    height: auto;
  }
}
@media all and (min-width: 37.8125em) {
  /* line 305, ../sass/skin/_global.scss */
  .cookie-disclaimer .cookie-disclaimer--flex {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
  }
}
/* line 313, ../sass/skin/_global.scss */
.cookie-disclaimer .cookie-disclaimer--inner + .cookie-disclaimer--inner {
  margin-top: 20px;
}
@media all and (min-width: 37.8125em) {
  /* line 313, ../sass/skin/_global.scss */
  .cookie-disclaimer .cookie-disclaimer--inner + .cookie-disclaimer--inner {
    margin-top: 0;
    margin-left: 20px;
  }
}
/* line 323, ../sass/skin/_global.scss */
.cookie-disclaimer .cookie-disclaimer--inner .likeh3 {
  margin-bottom: 20px;
}
/* line 327, ../sass/skin/_global.scss */
.cookie-disclaimer .cookie-disclaimer--inner p {
  margin-bottom: 0;
}

/* line 54, ../sass/skin/_icons.scss */
.sectors-nav .start-test:after, .sectors-nav .test-passed:after {
  background-image: url('../images/icons/icon-tick.png?1421058570');
  height: 13px;
  width: 17px;
  background-repeat: no-repeat;
}

/* line 54, ../sass/skin/_icons.scss */
.pagination .prev a, .pagination .previous a {
  background-image: url('../images/icons/arrow-prev.png?1421058570');
  height: 23px;
  width: 23px;
  background-repeat: no-repeat;
}

/* line 54, ../sass/skin/_icons.scss */
.pagination .next a {
  background-image: url('../images/icons/arrow-next.png?1421058570');
  height: 23px;
  width: 23px;
  background-repeat: no-repeat;
}

/* line 54, ../sass/skin/_icons.scss */
.create-module .icon-sort-module {
  background-image: url('../images/icons/icon-sort-module.png?1421058570');
  height: 23px;
  width: 21px;
  background-repeat: no-repeat;
}

/* line 54, ../sass/skin/_icons.scss */
.checkout-training-details i {
  background-image: url('../images/icons/icon-tick-large-green.png?1442833318');
  height: 32px;
  width: 32px;
  background-repeat: no-repeat;
}

/* line 54, ../sass/skin/_icons.scss */
.checker span {
  background-image: url('../images/icons/icon-checkbox-uncheck.png?1421058570');
  height: 20px;
  width: 20px;
  background-repeat: no-repeat;
}

/* line 54, ../sass/skin/_icons.scss */
.checker span.checked {
  background-image: url('../images/icons/icon-checkbox-check.png?1421058570');
  height: 20px;
  width: 20px;
  background-repeat: no-repeat;
}

/* line 54, ../sass/skin/_icons.scss */
.form-default .has-info:after, .icon-info-std, .radio-element .has-icon-info + i {
  background-image: url('../images/icons/icon-info.png?1421058570');
  height: 21px;
  width: 21px;
  background-repeat: no-repeat;
}

/* line 54, ../sass/skin/_icons.scss */
.coordinator-tick i {
  background-image: url('../images/icons/icon-tick-blue-xs.png?1425564191');
  height: 9px;
  width: 11px;
  background-repeat: no-repeat;
}

/* line 54, ../sass/skin/_icons.scss */
.sectors-nav .retake-test:after {
  background-image: url('../images/icons/icon-retake.png?1442833318');
  height: 17px;
  width: 18px;
  background-repeat: no-repeat;
}

/* line 54, ../sass/skin/_icons.scss */
.list-folder-manager__link:before {
  background-image: url('../images/icons/icon-folder.png?1442833318');
  height: 66px;
  width: 82px;
  background-repeat: no-repeat;
}

/* line 54, ../sass/skin/_icons.scss */
.form-default .is-completed:after {
  background-image: url('../images/icons/icon-tick-small-green.png?1442833318');
  height: 12px;
  width: 15px;
  background-repeat: no-repeat;
}

/* line 54, ../sass/skin/_icons.scss */
.attend-module .btn-delete {
  background-image: url('../images/icons/icon-close-grey.png?1442833318');
  height: 21px;
  width: 21px;
  background-repeat: no-repeat;
}

/* line 60, ../sass/skin/_icons.scss */
.icon-flag {
  background-image: url('../images/png/svg/icon-flag.png?1628530314');
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url('../images/svg/icon-flag.svg');
  width: 1.3125rem;
  height: 1.3125rem;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  background-repeat: no-repeat;
}

/* line 68, ../sass/skin/_icons.scss */
.icon-basket {
  background-image: url('../images/png/svg/icon-basket.png?1628530313');
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url('../images/svg/icon-basket.svg');
  width: 1.5625rem;
  height: 1.3125rem;
  display: inline-block;
  vertical-align: -2px;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  background-repeat: no-repeat;
}
@media all and (min-width: 37.8125em) {
  /* line 68, ../sass/skin/_icons.scss */
  .icon-basket {
    width: 1.125rem;
    height: 0.9375rem;
    margin-right: 0.875rem;
  }
}
/* line 81, ../sass/skin/_icons.scss */
.icon-basket--items {
  background-image: url('../images/png/svg/icon-basket-items.png?1628530313');
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url('../images/svg/icon-basket-items.svg');
}

/* line 86, ../sass/skin/_icons.scss */
.icon-bin {
  background-image: url('../images/png/svg/icon-bin.png?1628530313');
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url('../images/svg/icon-bin.svg');
  width: 1.1875rem;
  height: 1.25rem;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  margin-right: 0.625rem;
  background-repeat: no-repeat;
}

/* line 95, ../sass/skin/_icons.scss */
.icon-certificate-page {
  background-image: url('../images/png/svg/icon-certificate-page.png?1628530313');
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url('../images/svg/icon-certificate-page.svg');
  width: 3.1875rem;
  height: 4.9375rem;
  margin-bottom: 1.875rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
  background-repeat: no-repeat;
}

/* line 11, ../sass/skin/_breadcrumbs.scss */
.breadcrumb > li {
  font-size: 0.875rem;
}
/* line 14, ../sass/skin/_breadcrumbs.scss */
.breadcrumb > li + li:before {
  content: "\00A0" "\00A0" "\002F" "\00A0" "\00A0";
}
/* line 18, ../sass/skin/_breadcrumbs.scss */
.breadcrumb > li + li[data-breadcrumb]:before {
  content: " " attr(data-breadcrumb) " ";
}
/* line 22, ../sass/skin/_breadcrumbs.scss */
.breadcrumb > li a {
  color: #0075cd;
}

/*doc
---
title: Pagination
name: Pagination
category: Skin - Pagination
---

Extends navigation.scss


```html_example

<div class="style-guide-content">
	<nav class="pagination">
		<ul>
			<li class="prev"><a href=""><span class="visuallyhidden">Prev</span></a></li>
			<li><a href="">1</a></li>
			<li><a href="">2</a></li>
			<li class="current-page"><a href="">3</a></li>
			<li><a href="">4</a></li>
			<li><a href="">5</a></li>
			<li><a href="">6</a></li>
			<li class="next"><a href=""><span class="visuallyhidden">Next</span></a></li>
		</ul>
	</nav>
</div>


```
*/
/* line 38, ../sass/skin/_pagination.scss */
.pagination ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* line 43, ../sass/skin/_pagination.scss */
.pagination .prev a, .pagination .previous a {
  display: inline-block;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  margin-right: 0.3125rem;
}
/* line 52, ../sass/skin/_pagination.scss */
.pagination .next a {
  display: inline-block;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  margin-left: 0.3125rem;
}
/* line 60, ../sass/skin/_pagination.scss */
.pagination .first, .pagination .last {
  display: none;
}
/* line 64, ../sass/skin/_pagination.scss */
.pagination li {
  display: inline-block;
  vertical-align: top;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
}
/* line 68, ../sass/skin/_pagination.scss */
.pagination a {
  color: #999;
}
/* line 73, ../sass/skin/_pagination.scss */
.pagination span {
  display: inline-block;
  vertical-align: top;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  color: #0075cd;
}
/* line 79, ../sass/skin/_pagination.scss */
.pagination .current-page a {
  color: #0075cd;
}

/*doc
---
title: Navigation
name: Navigation
category: Skin - Navigation
---


```html_example

<div class="style-guide-content">

	<div class="nav-container">

        <div class="site-wide">
            <nav class="clearfix">
				<a class="hide-desk logo-mob" href="#"><img src="../assets/images/logo-nav-homepage.png"></a>
            	<button class="js-toggle-menu toggle-menu hide-desk" type="button"><span><span class="visuallyhidden">Menu</span></span></button>
                <ul class="nav nav--main">
                    <li class="site-section"><a target="_blank" href="#"><span>Product Training Portal</span></a></li>
                    <li class="menu-item"><a href="#"><span>Dashboard</span></a></li>
                    <li class="menu-item"><a href="#"><span>Courses</span></a></li>
                    <li class="menu-item"><a href="#"><span>Help</span></a></li>
                    <li class="menu-item hide-desk"><a href="#"><span>Logout</span></a></li>
                    <li class="homepage-link hide-mob"><a class="" href="#"><img src="../assets/images/logo-nav-homepage.png"></a></li>
                </ul>
            </nav>
        </div>
    </div>

    <div class="nav-container">

        <div class="site-wide">
            <nav class="clearfix">
				<a class="hide-desk logo-mob" href="#"><img src="../assets/images/logo-nav-homepage.png"></a>
            	<button class="js-toggle-menu toggle-menu hide-desk" type="button"><span><span class="visuallyhidden">Admin Training Portal</span></span></button>
                <ul class="nav nav--main">
                    <li class="site-section"><a target="_blank" href="#"><span>Training Requests</span></a></li>
                    <li class="menu-item"><a href="#"><span>Users</span></a></li>
                    <li class="menu-item"><a href="#"><span>Courses</span></a></li>
                    <li class="menu-item"><a href="#"><span>Analytics</span></a></li>
                    <li class="menu-item hide-desk"><a href="#"><span>Logout</span></a></li>
                    <li class="homepage-link hide-mob"><a class="" href="#"><img src="../assets/images/logo-nav-homepage.png"></a></li>
                </ul>
            </nav>
        </div>
    </div>

</div>


```
*/
@media all and (min-width: 37.8125em) {
  /* line 60, ../sass/skin/_navigation.scss */
  .nav--footer li + li {
    margin-left: 2.1875rem;
  }
}

/* line 80, ../sass/skin/_navigation.scss */
.nav-container {
  margin-bottom: 1.5625rem;
  min-height: 4.375rem;
  background-color: #0075cb;
  position: relative;
  z-index: 10;
}
/* line 87, ../sass/skin/_navigation.scss */
.nav-container .site-section {
  display: inline-block;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
}
/* line 90, ../sass/skin/_navigation.scss */
.nav-container .site-section a {
  display: inline-block;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
}
@media all and (min-width: 37.8125em) {
  /* line 90, ../sass/skin/_navigation.scss */
  .nav-container .site-section a {
    margin-right: 1.875rem;
  }
}
/* line 100, ../sass/skin/_navigation.scss */
.nav-container .homepage-link {
  max-width: 11.1875rem;
}
/* line 103, ../sass/skin/_navigation.scss */
.nav-container .homepage-link a {
  padding-bottom: 1.25rem;
}
/* line 108, ../sass/skin/_navigation.scss */
.nav-container__has-hero {
  margin-bottom: 0;
}

/* line 113, ../sass/skin/_navigation.scss */
.learning-text {
  float: left;
}
/* line 116, ../sass/skin/_navigation.scss */
.learning-text p {
  margin-top: 0.5625rem;
  font-size: 2.125rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #71d3ff;
  font-weight: 100;
}

@media all and (max-width: 37.8025em) {
  /* line 127, ../sass/skin/_navigation.scss */
  .nav-container--app .homepage-link,
  .nav-container--admin--mobile .homepage-link {
    display: none;
  }
}

@media all and (min-width: 37.8125em) {
  /* line 134, ../sass/skin/_navigation.scss */
  .nav--main__container {
    float: right;
  }
}

/* line 142, ../sass/skin/_navigation.scss */
.nav--footer {
  display: table-header-group;
  text-align: center;
}
@media all and (min-width: 37.8125em) {
  /* line 142, ../sass/skin/_navigation.scss */
  .nav--footer {
    display: table-cell;
    vertical-align: middle;
  }
}
/* line 152, ../sass/skin/_navigation.scss */
.nav--footer ul {
  display: inline-block;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
}
/* line 157, ../sass/skin/_navigation.scss */
.nav--footer li {
  line-height: 2.14286;
  display: block;
}
@media all and (min-width: 37.8125em) {
  /* line 157, ../sass/skin/_navigation.scss */
  .nav--footer li {
    display: inline-block;
    *vertical-align: auto;
    *zoom: 1;
    *display: inline;
  }
}

@media all and (min-width: 37.8125em) {
  /* line 173, ../sass/skin/_navigation.scss */
  .nav--main {
    padding-top: 0;
    display: block;
    text-align: right;
  }
}
@media all and (max-width: 37.8025em) {
  /* line 181, ../sass/skin/_navigation.scss */
  .nav-container--app .nav--main, .nav-container--admin--mobile .nav--main {
    top: 3.125rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    background-color: #0075cb;
  }
}
/* line 195, ../sass/skin/_navigation.scss */
.nav--main a,
.nav--main span {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #fff;
  text-transform: uppercase;
}
/* line 202, ../sass/skin/_navigation.scss */
.nav--main a {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  position: relative;
  text-decoration: none;
}
@media all and (min-width: 37.8125em) {
  /* line 202, ../sass/skin/_navigation.scss */
  .nav--main a {
    padding-top: 1.5625rem;
    padding-bottom: 1rem;
  }
}
/* line 214, ../sass/skin/_navigation.scss */
.nav--main li {
  display: block;
  text-align: center;
}
@media all and (min-width: 37.8125em) {
  /* line 214, ../sass/skin/_navigation.scss */
  .nav--main li {
    display: inline-block;
    *vertical-align: auto;
    *zoom: 1;
    *display: inline;
    vertical-align: bottom;
  }
}
/* line 225, ../sass/skin/_navigation.scss */
.nav--main li + li {
  border-top: 1px solid #fff;
}
@media all and (min-width: 37.8125em) {
  /* line 225, ../sass/skin/_navigation.scss */
  .nav--main li + li {
    margin-left: 1.875rem;
    border-top: 0;
  }
}
@media all and (min-width: 37.8125em) {
  /* line 68, ../sass/skin/_navigation.scss */
  .nav--main .menu-item.active-item:before, .nav--main .menu-item:hover:before {
    margin-left: -0.3125rem;
    margin-right: -0.3125rem;
    content: "";
    position: absolute;
    border-bottom: 3px solid #fff;
    bottom: 0;
    left: 0;
    right: 0;
  }
}

/* line 244, ../sass/skin/_navigation.scss */
.toggle-menu > span, .toggle-menu > span:before, .toggle-menu > span:after {
  transition-property: all;
  transition-duration: 100ms;
  transition-timing-function: ease-in-out;
  height: 0.3125rem;
  width: 2.1875rem;
  cursor: pointer;
  border-radius: 1px;
  background: #fff;
  position: absolute;
  display: block;
  content: "";
}

/* line 258, ../sass/skin/_navigation.scss */
.toggle-menu {
  padding: 0.625rem 0;
  right: 1.25rem;
  width: 2.5rem;
  top: 0;
  position: absolute;
  cursor: pointer;
}
/* line 274, ../sass/skin/_navigation.scss */
.toggle-menu > span:before {
  top: -0.625rem;
}
/* line 278, ../sass/skin/_navigation.scss */
.toggle-menu > span:after {
  bottom: -0.625rem;
}
/* line 283, ../sass/skin/_navigation.scss */
.toggle-menu.active + .nav--main {
  display: block;
}
/* line 287, ../sass/skin/_navigation.scss */
.toggle-menu.active > span {
  background-color: transparent;
}
/* line 290, ../sass/skin/_navigation.scss */
.toggle-menu.active > span:before, .toggle-menu.active > span:after {
  top: 0;
}
/* line 294, ../sass/skin/_navigation.scss */
.toggle-menu.active > span:before {
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
/* line 298, ../sass/skin/_navigation.scss */
.toggle-menu.active > span:after {
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

@media all and (max-width: 37.8025em) {
  /* line 304, ../sass/skin/_navigation.scss */
  .logo-mob-container {
    margin-left: -20px;
    margin-right: -20px;
    border-top: 50px solid #1d5ba5;
  }
}

/* line 325, ../sass/skin/_navigation.scss */
.logo-mob {
  margin-top: 1.5625rem;
  margin-bottom: 1.875rem;
  display: inline-block;
  z-index: 10;
}
/* line 331, ../sass/skin/_navigation.scss */
.logo-mob img {
  width: 10.625rem;
}

/* line 336, ../sass/skin/_navigation.scss */
.login-mob {
  right: 12.8125rem;
  top: 1.5625rem;
  margin-left: 5rem;
  position: absolute;
  color: #fff;
  z-index: 10;
}

/* line 345, ../sass/skin/_navigation.scss */
.profile-shortcuts {
  float: right;
}
@media all and (max-width: 37.8025em) {
  /* line 345, ../sass/skin/_navigation.scss */
  .profile-shortcuts {
    width: 100%;
  }
}
/* line 353, ../sass/skin/_navigation.scss */
.profile-shortcuts li + li {
  margin-left: 1.5625rem;
}
@media all and (min-width: 37.8125em) {
  /* line 353, ../sass/skin/_navigation.scss */
  .profile-shortcuts li + li {
    margin-left: 3.125rem;
  }
}

/* line 376, ../sass/skin/_navigation.scss */
.icon-certificate {
  background-image: url('../images/png/svg/icon-certificate.png?1628530314');
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url('../images/svg/icon-certificate.svg');
  width: 1.25rem;
  height: 1.875rem;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  margin-right: 0.75rem;
  background-repeat: no-repeat;
}
/* line 371, ../sass/skin/_navigation.scss */
.no-svg .icon-certificate {
  background-size: contain;
}

/* line 381, ../sass/skin/_navigation.scss */
.icon-certificate-disable {
  background-image: url('../images/png/svg/icon-certificate-disable.png?1628530313');
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url('../images/svg/icon-certificate-disable.svg');
  width: 1.25rem;
  height: 1.875rem;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  margin-right: 0.75rem;
  background-repeat: no-repeat;
}
/* line 371, ../sass/skin/_navigation.scss */
.no-svg .icon-certificate-disable {
  background-size: contain;
}

/* line 386, ../sass/skin/_navigation.scss */
.icon-user {
  background-image: url('../images/png/svg/icon-user.png?1628530314');
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url('../images/svg/icon-user.svg');
  width: 1.375rem;
  height: 1.4375rem;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  margin-right: 0.75rem;
  background-repeat: no-repeat;
}
/* line 394, ../sass/skin/_navigation.scss */
.no-svg .icon-user {
  background-size: contain;
}

/* line 399, ../sass/skin/_navigation.scss */
.icon-user-blue {
  background-image: url('../images/png/svg/icon-user-blue.png?1628530314');
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url('../images/svg/icon-user-blue.svg');
  width: 1.375rem;
  height: 1.4375rem;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  margin-right: 0.75rem;
  background-repeat: no-repeat;
}
/* line 407, ../sass/skin/_navigation.scss */
.no-svg .icon-user-blue {
  background-size: contain;
}

/* line 413, ../sass/skin/_navigation.scss */
.nav--loggedin li {
  margin-bottom: 0.75rem;
  display: block;
}

@media all and (min-width: 37.8125em) {
  /* line 428, ../sass/skin/_navigation.scss */
  .top-header {
    float: left;
    margin-top: 25px;
  }
}
@media all and (min-width: 37.8125em) {
  /* line 434, ../sass/skin/_navigation.scss */
  .top-header .btn--login {
    position: relative;
  }
  /* line 438, ../sass/skin/_navigation.scss */
  .top-header .btn--login::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    top: -25px;
    background-color: #1d5ba5;
  }
}
/* line 450, ../sass/skin/_navigation.scss */
.top-header .btn--login:hover::after {
  background-color: #194f8f;
}

/*doc
---
title: Buttons skin
name: Buttons skin
category: Skin - Buttons
---

Button structure is set up in core/structure/_buttons.scss

Button styles can be applied to any element. Typically you'll want to
use either a `<button>` or an `<a>` element:

```html_example

<button class="btn">Button</button>

<a class="btn" href="#">Link Button</a>

<button class="btn btn--small">Small</button>

<button class="btn btn--large">Large</button>

<button class="btn" disabled>Disabled</button>

<button class="btn btn--full">Full width</button>

<div class="style-guide-content">
	<!-- Primary button: -->
	<!-- Inactive -->
	<button class="btn btn--primary">Next</button>

	<!-- Hover -->
	<button class="btn btn--primary is-active">Next</button>

	<!-- Stroke -->
	<button class="btn btn--primary-stroke">Continue browsing</button>

</div>

<div class="style-guide-content">
	<!-- Primary button: -->
	<!-- Inactive -->
	<button class="btn btn--primary-arrow">Next</button>

	<!-- Hover -->
	<button class="btn btn--primary-arrow is-active">Next</button>

</div>

<div class="style-guide-content">
	<!-- Full width -->
	<button class="btn btn--primary btn--full">Next</button>
</div>

<div class="style-guide-content">
	<!-- Secondary button: -->
	<!-- Inactive -->
	<button class="btn btn--secondary btn--arrow-right">Next</button>

	<!-- Hover -->
	<button class="btn btn--secondary btn--arrow-right is-active">Next</button>
</div>

<div class="style-guide-content">
	<!-- Recessive button: -->
	<!-- Inactive -->
	<button class="btn btn--recessive">Back</button>

	<!-- Hover -->
	<button class="btn btn--recessive is-active">Back</button>
</div>

<div class="style-guide-content">
	<!-- Warning button: -->
	<button class="btn btn--warning">Remove this location</button>
</div>

<div class="style-guide-content">
	<!-- Standalone hyperlink: -->
	<!-- Inactive -->
	<a href="#" class="btn btn--standalone">Adipiscing Bibendum Tristique</a>

	<!-- Active -->
	<a href="#" class="btn btn--standalone is-active">Adipiscing Bibendum Tristique</a>
</div>

<div class="style-guide-content">
	<!-- Inline hyperlink: -->
	<!-- Inactive -->
	<a href="#" class="btn btn--inline">Adipiscing Bibendum Tristique</a>

	<!-- Active -->
	<a href="#" class="btn btn--inline is-active">Adipiscing Bibendum Tristique</a>
</div>

<div class="style-guide-content">
	<!-- Inline alert hyperlink: -->
	<!-- Inline alert -->
	<a href="#" class="btn btn--inline--alert">Adipiscing Bibendum Tristique</a>
</div>

```
*/
/* line 109, ../sass/skin/_buttons.scss */
.btn--radius, .btn--primary, .btn--primary-stroke, .btn--primary-arrow, .btn--orange-border, .btn--recessive, .btn--clear-bordered, .btn--warning {
  line-height: 2.375;
  border-radius: 4px;
  color: #fff;
  height: auto;
}

/* line 120, ../sass/skin/_buttons.scss */
.btn--secondary, .btn--standalone, .btn--inline, .btn--inline--alert, .accordion-button, .wysiwyg a, .wysiwyg-cookies a, .ui-state-default {
  color: #0075cd;
  height: auto;
  line-height: 100%;
  padding: 0;
}
/* line 126, ../sass/skin/_buttons.scss */
.btn--secondary:hover, .btn--standalone:hover, .btn--inline:hover, .btn--inline--alert:hover, .accordion-button:hover, .wysiwyg a:hover, .wysiwyg-cookies a:hover, .ui-state-default:hover, .is-active.btn--secondary, .is-active.btn--standalone, .is-active.btn--inline, .is-active.btn--inline--alert, .is-active.accordion-button, .wysiwyg a.is-active, .wysiwyg-cookies a.is-active, .is-active.ui-state-default {
  color: #004e86;
}

/* line 131, ../sass/skin/_buttons.scss */
.btn--primary, .btn--primary-stroke, .btn--primary-arrow, .btn--orange-border {
  padding-right: 1.875rem;
  padding-left: 1.875rem;
  background-color: #f86548;
  transition: all 0.4s ease;
}
/* line 138, ../sass/skin/_buttons.scss */
.btn--primary:hover, .btn--primary-stroke:hover, .btn--primary-arrow:hover, .btn--orange-border:hover, .is-active.btn--primary, .is-active.btn--primary-stroke, .is-active.btn--primary-arrow, .is-active.btn--orange-border {
  background-color: #e85840;
}

/* line 143, ../sass/skin/_buttons.scss */
.btn--no-style {
  color: #555;
  height: auto;
  line-height: 100%;
  padding: 0;
}

/* line 161, ../sass/skin/_buttons.scss */
.btn--primary__xs {
  padding-right: 0.9375rem;
  padding-left: 0.9375rem;
}

/* line 167, ../sass/skin/_buttons.scss */
.btn--primary-stroke {
  background-color: #fff;
  border: 1px solid #f86548;
  color: #f86548;
}
/* line 173, ../sass/skin/_buttons.scss */
.btn--primary-stroke:hover {
  color: #fff;
}

/* line 181, ../sass/skin/_buttons.scss */
.btn--primary-arrow:after {
  display: inline-block;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  height: 0;
  width: 0;
  border-left: 6px solid #fff;
  border-bottom: 4px solid transparent;
  border-top: 4px solid transparent;
  margin-left: 0.5rem;
  content: "";
}

/* line 189, ../sass/skin/_buttons.scss */
.btn--recessive {
  padding-right: 1.25rem;
  padding-left: 1.25rem;
  background-color: #999;
  transition: all 0.4s ease;
}
/* line 196, ../sass/skin/_buttons.scss */
.btn--recessive:hover, .btn--recessive.is-active {
  background-color: #6d6d6d;
}

/* line 201, ../sass/skin/_buttons.scss */
.btn--full-width {
  padding-left: 0;
  padding-right: 0;
  width: 100%;
  text-align: center;
}

@media all and (max-width: 37.8025em) {
  /* line 205, ../sass/skin/_buttons.scss */
  .btn--mob-full-width {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    text-align: center;
  }
}

/* line 212, ../sass/skin/_buttons.scss */
.btn--clear-bordered {
  background-color: transparent;
  border: 1px solid #f2f2f2;
}

/* line 218, ../sass/skin/_buttons.scss */
.btn--warning {
  padding-right: 0.9375rem;
  padding-left: 0.9375rem;
  background-color: #e11428;
}

/* line 228, ../sass/skin/_buttons.scss */
.btn--secondary:hover {
  background-color: transparent;
}

/* line 233, ../sass/skin/_buttons.scss */
.btn--tertiary {
  color: #1d5ba5;
  border-radius: 5px;
  padding: 10px 20px;
  background-color: rgba(255, 255, 255, 0.8);
  line-height: 1.8;
}
/* line 240, ../sass/skin/_buttons.scss */
.btn--tertiary:hover {
  background-color: #1d5ba5;
  color: #fff;
}

/* line 246, ../sass/skin/_buttons.scss */
.btn--blue-border {
  padding-right: 0.9375rem;
  padding-left: 0.9375rem;
  border-radius: 4px;
  color: #0075cd;
  border: 1px solid #0075cd;
  background-color: #fff;
  transition: all 0.4s ease;
}
/* line 255, ../sass/skin/_buttons.scss */
.btn--blue-border:hover, .btn--blue-border.is-active {
  background-color: #0075cd;
  color: #fff;
}

/* line 261, ../sass/skin/_buttons.scss */
.btn--orange-border {
  color: #f86548;
  border: 1px solid #f86548;
  background-color: #fff;
}
/* line 267, ../sass/skin/_buttons.scss */
.btn--orange-border:hover, .btn--orange-border.is-active {
  background-color: #f86548;
  color: #fff;
}

/* line 274, ../sass/skin/_buttons.scss */
.btn--arrow-right:after {
  display: inline-block;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  height: 0;
  width: 0;
  border-left: 6px solid #fff;
  border-bottom: 4px solid transparent;
  border-top: 4px solid transparent;
  margin-left: 0.5rem;
  content: "";
}
/* line 282, ../sass/skin/_buttons.scss */
.btn--arrow-right:hover:after, .btn--arrow-right.is-active:after {
  display: inline-block;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  height: 0;
  width: 0;
  border-left: 6px solid #fff;
  border-bottom: 4px solid transparent;
  border-top: 4px solid transparent;
}
/* line 289, ../sass/skin/_buttons.scss */
.btn--arrow-right.btn--secondary:after {
  height: 0;
  width: 0;
  border-left: 6px solid #0075cd;
  border-bottom: 4px solid transparent;
  border-top: 4px solid transparent;
}
/* line 293, ../sass/skin/_buttons.scss */
.btn--arrow-right.btn--secondary:hover:after, .btn--arrow-right.btn--secondary.is-active:before {
  height: 0;
  width: 0;
  border-left: 6px solid #004e86;
  border-bottom: 4px solid transparent;
  border-top: 4px solid transparent;
}

/* line 300, ../sass/skin/_buttons.scss */
.btn--arrow-left:before {
  display: inline-block;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  height: 0;
  width: 0;
  border-right: 6px solid #fff;
  border-bottom: 4px solid transparent;
  border-top: 4px solid transparent;
  margin-right: 0.5rem;
  content: "";
}
/* line 308, ../sass/skin/_buttons.scss */
.btn--arrow-left:hover:before, .btn--arrow-left.is-active:before {
  display: inline-block;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  height: 0;
  width: 0;
  border-right: 6px solid #fff;
  border-bottom: 4px solid transparent;
  border-top: 4px solid transparent;
}
/* line 315, ../sass/skin/_buttons.scss */
.btn--arrow-left.btn--secondary:before {
  height: 0;
  width: 0;
  border-right: 6px solid #0075cd;
  border-bottom: 4px solid transparent;
  border-top: 4px solid transparent;
}
/* line 319, ../sass/skin/_buttons.scss */
.btn--arrow-left.btn--secondary:hover:before, .btn--arrow-left.btn--secondary.is-active:before {
  height: 0;
  width: 0;
  border-right: 6px solid #004e86;
  border-bottom: 4px solid transparent;
  border-top: 4px solid transparent;
}

/* line 329, ../sass/skin/_buttons.scss */
.btn--standalone:after {
  display: inline-block;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  margin-left: 0.25rem;
  content: "\00BB";
}

/* line 336, ../sass/skin/_buttons.scss */
.btn--inline, .btn--inline--alert, .accordion-button, .wysiwyg a, .wysiwyg-cookies a, .ui-state-default {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* line 352, ../sass/skin/_buttons.scss */
.btn--inline--alert {
  color: #e11428;
}
/* line 356, ../sass/skin/_buttons.scss */
.btn--inline--alert:hover {
  color: #e11428;
}

/* line 361, ../sass/skin/_buttons.scss */
.btn--inline--wrap {
  white-space: normal;
  line-height: 1.25;
}

/* line 370, ../sass/skin/_buttons.scss */
.btn-view-more {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  background-color: #f86548;
  color: #fff;
  display: block;
  text-align: center;
}

/* line 380, ../sass/skin/_buttons.scss */
.align-btn-wrapper {
  display: table;
  width: 100%;
}
/* line 384, ../sass/skin/_buttons.scss */
.align-btn-wrapper .preview-link {
  padding-right: 1.25rem;
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  text-align: right;
}

@media all and (min-width: 18.75em) {
  /* line 393, ../sass/skin/_buttons.scss */
  .mob-stack-button {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

/* line 401, ../sass/skin/_buttons.scss */
.btn--browse {
  margin-bottom: 1.125rem;
}

/* line 405, ../sass/skin/_buttons.scss */
.btn--blue {
  line-height: 3.125;
  height: 3.125rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  margin-left: -1.25rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-transform: uppercase;
  color: #fff;
  background-color: #1d5ba5;
  font-weight: normal;
}
@media all and (min-width: 37.8125em) {
  /* line 405, ../sass/skin/_buttons.scss */
  .btn--blue {
    line-height: 2.5;
    height: 2.5rem;
    margin-left: 0;
  }
}
/* line 423, ../sass/skin/_buttons.scss */
.btn--blue:hover {
  background-color: #194f8f;
}

/* line 428, ../sass/skin/_buttons.scss */
.btn--course-entry {
  border-radius: 5px;
  background-color: #0075cb;
  color: #fff;
  font-size: 14px;
  width: 100%;
}
/* line 435, ../sass/skin/_buttons.scss */
.btn--course-entry:hover {
  background-color: #1d5ba5;
}
/* line 439, ../sass/skin/_buttons.scss */
.form-entry-checked .btn--course-entry {
  display: none;
}

/* line 444, ../sass/skin/_buttons.scss */
.btn--course-entry-submit {
  width: 20px;
  height: 20px;
  background-color: #0075cb;
  border-radius: 50%;
  position: absolute;
  right: 10px;
  top: 50%;
  margin-top: -10px;
  padding: 0;
  background-image: url('../images/icons/icon-chevron-right.png?1536136271');
  background-size: 8px;
  background-position: 55% 50%;
  background-repeat: no-repeat;
}

/* line 460, ../sass/skin/_buttons.scss */
.btn--login {
  text-transform: uppercase;
}
/* line 464, ../sass/skin/_buttons.scss */
.btn--login:before {
  background-image: url('../images/icons/icon-user-white-small.png?1442833318');
  height: 14px;
  width: 13px;
  margin-right: 0.625rem;
  display: inline-block;
  vertical-align: baseline;
  content: "";
}

/* line 474, ../sass/skin/_buttons.scss */
.btn--pwd.btn--pwd {
  font-size: 0.75rem;
  font-weight: normal;
}

/* line 484, ../sass/skin/_buttons.scss */
.btn--border {
  padding: 0.375rem 0.5rem;
  border: 1px solid #0075cd;
  border-radius: 3px;
}
/* line 491, ../sass/skin/_buttons.scss */
.btn--border:hover {
  border-color: #004e86;
}

/* line 496, ../sass/skin/_buttons.scss */
.btn--line-height, .btn--multiple-lines {
  line-height: 1.25;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* line 506, ../sass/skin/_buttons.scss */
.btn--multiple-lines {
  white-space: normal;
  text-align: center;
}
@media all and (min-width: 37.8125em) {
  /* line 506, ../sass/skin/_buttons.scss */
  .btn--multiple-lines {
    max-width: 15rem;
  }
}

@media all and (min-width: 18.75em) {
  /* line 523, ../sass/skin/_buttons.scss */
  .forgotten-password {
    margin-bottom: 0.9375rem;
  }
}

/* line 530, ../sass/skin/_buttons.scss */
.tabs-nav-prev-next .disabled {
  display: none;
}

/* line 535, ../sass/skin/_buttons.scss */
.btn--rounded-bottom {
  border-radius: 0 0 5px 5px;
}

/* line 539, ../sass/skin/_buttons.scss */
.slick-prev,
.slick-next {
  -ms-transform: translateY(-50%) scale(1);
  transform: translateY(-50%) scale(1);
  position: absolute;
  font-size: 0;
  height: 40px;
  width: 40px;
  top: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding: 0;
  margin: 0;
}
/* line 553, ../sass/skin/_buttons.scss */
.slick-prev:hover,
.slick-next:hover {
  -ms-transform: translateY(-50%) scale(0.9);
  transform: translateY(-50%) scale(0.9);
}

/* line 559, ../sass/skin/_buttons.scss */
.slick-next {
  right: -50px;
  background-image: url('../images/icons/icon-carousel-chevron-right.jpg?1536136272');
}

/* line 564, ../sass/skin/_buttons.scss */
.slick-prev {
  left: -50px;
  background-image: url('../images/icons/icon-carousel-chevron-left.jpg?1536136272');
}

/* line 569, ../sass/skin/_buttons.scss */
.btn--filter-sector {
  padding-left: 30px;
  position: relative;
}
/* line 573, ../sass/skin/_buttons.scss */
.btn--filter-sector::before {
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  background-image: url('../images/icons/icon-filter.png?1536136272');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 25px;
  height: 15px;
}

@media all and (min-width: 37.8125em) {
  /* line 7, ../sass/skin/_footer.scss */
  .footer-push {
    min-height: 100%;
    padding-bottom: 106px;
  }

  /* line 12, ../sass/skin/_footer.scss */
  .footer-pull {
    margin-top: -106px;
  }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  /* line 19, ../sass/skin/_footer.scss */
  .footer-push {
    padding-bottom: 0;
    min-height: 1050px;
  }

  /* line 24, ../sass/skin/_footer.scss */
  .footer-pull {
    margin-top: 0;
  }
}
/* line 29, ../sass/skin/_footer.scss */
.footer-container {
  display: table;
  width: 100%;
}
@media all and (max-width: 37.8025em) {
  /* line 29, ../sass/skin/_footer.scss */
  .footer-container {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}
@media all and (min-width: 37.8125em) {
  /* line 29, ../sass/skin/_footer.scss */
  .footer-container {
    height: 106px;
  }
}

/* line 43, ../sass/skin/_footer.scss */
.copyright-wrapper {
  margin-bottom: 0.9375rem;
  display: block;
  text-align: center;
}
@media all and (min-width: 37.8125em) {
  /* line 43, ../sass/skin/_footer.scss */
  .copyright-wrapper {
    display: table-cell;
    text-align: left;
    vertical-align: middle;
  }
}
/* line 54, ../sass/skin/_footer.scss */
.copyright-wrapper p {
  line-height: 100%;
}

/* line 60, ../sass/skin/_footer.scss */
.logo-footer {
  display: block;
  text-align: center;
}
@media all and (min-width: 37.8125em) {
  /* line 60, ../sass/skin/_footer.scss */
  .logo-footer {
    display: table-cell;
    text-align: right;
    vertical-align: middle;
  }
}

/* line 5, ../sass/skin/_table.scss */
.table-listing {
  border-collapse: separate;
  border-spacing: 0 18px;
  border: 0;
}
/* line 12, ../sass/skin/_table.scss */
.table-listing td {
  border: 0;
  text-align: center;
}
/* line 17, ../sass/skin/_table.scss */
.table-listing td:first-child {
  text-align: left;
}
/* line 23, ../sass/skin/_table.scss */
.table-listing tbody tr {
  background-color: #edf5fb;
  border: 0;
}
@media all and (min-width: 37.8125em) {
  /* line 29, ../sass/skin/_table.scss */
  .table-listing .course-title {
    width: 90%;
  }
}
/* line 35, ../sass/skin/_table.scss */
.table-listing .name-col {
  width: 9.375rem;
  text-align: left;
}
/* line 40, ../sass/skin/_table.scss */
.table-listing .email-col {
  width: 13.125rem;
  text-align: left;
}

/*doc
---
title: Form
name: Form
category: Skin - Form
---


```html_example

<div class="style-guide-content">

<div class="site-wide">
	<form action="#" class="form-default form--horizontal">

		<div class="field-wrapper">
			<label for="horizontal-text-1">First name<span class="asterisk">&nbsp;&#42;</span></label>

			<div class="input-container">
				<input id="horizontal-text-1" type="text">
			</div>
		</div>

		<div class="field-wrapper error">
			<label for="horizontal-text-2">First name<span class="asterisk">&nbsp;&#42;</span></label>

			<div class="input-container">
				<input id="horizontal-text-2" type="text">
				<p class="message message--error"><span class="bold">First name</span> should not be empty</p>
			</div>
		</div>

		<div class="field-wrapper">
			<label for="horizontal-text-2">First name<span class="asterisk">&nbsp;&#42;</span></label>

			<div class="input-container">
				<span class="is-completed"><input id="horizontal-text-2" type="text"></span>
			</div>
		</div>

		<!-- <div class="field-wrapper">
			<label for="horizontal-text-2">First name</label>

			<div class="input-container mob-width-12 tab-width-6 desk-width-7">
				<span class="is-completed"><input id="horizontal-text-2" type="text"></span>
				<p class="message message--error"><span class="bold">First name</span> should not be empty</p>
			</div>

		<div> -->

		<div class="input-container">
			<button type="submit" class="btn btn--primary">Submit form</button>
		</div>

	</form>
</div>

</div>


```
*/
/* line 70, ../sass/skin/_form.scss */
select, .form-default input[type=text], .form-default input[type=search], .form-default input[type=email], .form-default input[type=url], .form-default input[type=tel], .form-default input[type=number], .form-default input[type=range], .form-default input[type=date], .form-default input[type=month], .form-default input[type=week], .form-default input[type=time], .form-default input[type=password], .form-default textarea {
  border-radius: 3px;
  margin-bottom: 1.125rem;
  height: 2.875rem;
  padding-left: 0.625rem;
  border: 4px solid #e2e2e2;
  width: 100%;
  line-height: normal;
}
/* line 80, ../sass/skin/_form.scss */
select:focus, .form-default input[type=text]:focus, .form-default input[type=search]:focus, .form-default input[type=email]:focus, .form-default input[type=url]:focus, .form-default input[type=tel]:focus, .form-default input[type=number]:focus, .form-default input[type=range]:focus, .form-default input[type=date]:focus, .form-default input[type=month]:focus, .form-default input[type=week]:focus, .form-default input[type=time]:focus, .form-default input[type=password]:focus, .form-default textarea:focus {
  transition: border 0.2s cubic-bezier(0.6, -0.28, 0.74, 0.05);
  border: 4px solid #555;
  outline: none;
}

/* line 87, ../sass/skin/_form.scss */
select {
  background-color: #fff;
}
/* line 91, ../sass/skin/_form.scss */
select[multiple="multiple"] {
  min-height: 7.5rem;
}
/* line 96, ../sass/skin/_form.scss */
.ui-datepicker .ui-datepicker-title select + select {
  margin-left: 0.9375rem;
}

/* line 24, ../sass/skin/_validation.scss */
.form-default .error input[type=text], .form-default .error input[type=search], .form-default .error input[type=email], .form-default .error input[type=url], .form-default .error input[type=tel], .form-default .error input[type=number], .form-default .error input[type=range], .form-default .error input[type=date], .form-default .error input[type=month], .form-default .error input[type=week], .form-default .error input[type=time], .form-default .error input[type=password], .form-default .error textarea {
  border: 4px solid #f00 !important;
}
/* line 114, ../sass/skin/_form.scss */
.form-default textarea {
  min-height: 3.75rem;
}
@media all and (min-width: 37.8125em) {
  /* line 114, ../sass/skin/_form.scss */
  .form-default textarea {
    min-height: 6.25rem;
  }
}
/* line 123, ../sass/skin/_form.scss */
.form-default .min-width {
  min-width: 17.5rem;
}
/* line 128, ../sass/skin/_form.scss */
.form-default .is-completed:after {
  display: inline-block;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  margin-top: -0.9375rem;
  right: 0.9375rem;
  content: "";
  position: absolute;
  top: 50%;
}
/* line 139, ../sass/skin/_form.scss */
.form-default .is-completed {
  display: inline-block;
  vertical-align: top;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  position: relative;
  width: auto;
}
/* line 155, ../sass/skin/_form.scss */
.form-default .has-info {
  display: inline-block;
  vertical-align: top;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  position: relative;
  width: 100%;
}
/* line 160, ../sass/skin/_form.scss */
.form-default .has-info:after {
  margin-top: -1.25rem;
  right: 0.625rem;
  content: "";
  position: absolute;
  top: 50%;
}
/* line 170, ../sass/skin/_form.scss */
.form-default .transparent-field {
  display: inline-block;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
}
/* line 173, ../sass/skin/_form.scss */
.form-default .transparent-field input[type="text"] {
  display: inline-block;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  max-width: 4.375rem;
  box-shadow: none;
  background: transparent;
  border: 0 !important;
  color: #fff;
  padding: 0;
  line-height: 100% !important;
  margin: 0 !important;
  width: auto;
  outline: none;
}
/* line 188, ../sass/skin/_form.scss */
.form-default .transparent-field .ui-datepicker-trigger {
  margin-top: -0.5rem;
  cursor: pointer;
}
/* line 194, ../sass/skin/_form.scss */
.form-default .reset-input-width {
  width: auto !important;
  display: inline-block !important;
  vertical-align: top;
}

/* line 203, ../sass/skin/_form.scss */
.form--elements-stack label {
  margin-right: 0.9375rem;
}
/* line 208, ../sass/skin/_form.scss */
.form--horizontal label {
  text-align: left;
}

/* line 213, ../sass/skin/_form.scss */
.field-margin {
  margin-bottom: 1.125rem;
}

@media all and (min-width: 37.8125em) {
  /* line 149, ../sass/framework/core/structure/_forms.scss */
  .form--horizontal label,
  .form--horizontal .mimic-label {
    width: 13.125em;
  }
  /* line 154, ../sass/framework/core/structure/_forms.scss */
  .form--horizontal .input-container {
    padding-left: 14.375em;
    max-width: 510px;
  }

  /* line 166, ../sass/framework/core/structure/_forms.scss */
  form.form--horizontal .maintain-horizontal-space,
  form .form--horizontal .maintain-horizontal-space {
    padding-left: 14.375rem;
  }
}
@media all and (min-width: 37.8125em) {
  /* line 149, ../sass/framework/core/structure/_forms.scss */
  .form--horizontal-answer label,
  .form--horizontal-answer .mimic-label {
    width: 0;
  }
  /* line 154, ../sass/framework/core/structure/_forms.scss */
  .form--horizontal-answer .input-container {
    padding-left: 1.25em;
    max-width: 300px;
  }

  /* line 166, ../sass/framework/core/structure/_forms.scss */
  form.form--horizontal-answer .maintain-horizontal-space,
  form .form--horizontal-answer .maintain-horizontal-space {
    padding-left: 1.25rem;
  }
}
@media all and (min-width: 37.8125em) {
  /* line 149, ../sass/framework/core/structure/_forms.scss */
  .form--horizontal-small label,
  .form--horizontal-small .mimic-label {
    width: 10em;
  }
  /* line 154, ../sass/framework/core/structure/_forms.scss */
  .form--horizontal-small .input-container {
    padding-left: 11.25em;
    max-width: 460px;
  }

  /* line 166, ../sass/framework/core/structure/_forms.scss */
  form.form--horizontal-small .maintain-horizontal-space,
  form .form--horizontal-small .maintain-horizontal-space {
    padding-left: 11.25rem;
  }
}
/* line 224, ../sass/skin/_form.scss */
.form--horizontal {
  margin-bottom: 1.125rem;
}
/* line 227, ../sass/skin/_form.scss */
.form--horizontal .mimic-label {
  text-align: left;
}
/* line 232, ../sass/skin/_form.scss */
.form--horizontal .input-container.full-width {
  max-width: 100%;
}

/* line 239, ../sass/skin/_form.scss */
.form--grid label, .form--grid .mimic-label {
  padding-top: 0.6875rem;
  float: left;
}
/* line 245, ../sass/skin/_form.scss */
.form--grid .form--elements-stack label,
.form--grid .form--elements-stack .mimic-label {
  float: none;
  text-align: left;
  padding-left: 0;
  width: auto;
}

/* line 258, ../sass/skin/_form.scss */
.error input[type=text]:focus, .error input[type=search]:focus, .error input[type=email]:focus, .error input[type=url]:focus, .error input[type=tel]:focus, .error input[type=number]:focus, .error input[type=range]:focus, .error input[type=date]:focus, .error input[type=month]:focus, .error input[type=week]:focus, .error input[type=time]:focus, .error input[type=password]:focus, .error textarea:focus {
  transition: border 0.2s cubic-bezier(0.6, -0.28, 0.74, 0.05);
  outline: none;
}

/* line 265, ../sass/skin/_form.scss */
.message {
  font-style: italic;
}
/* line 269, ../sass/skin/_form.scss */
.message--error {
  color: #f00;
}
/* line 273, ../sass/skin/_form.scss */
.message--error--white {
  color: #fff;
}
/* line 277, ../sass/skin/_form.scss */
.message--error--orange {
  color: #e85840;
}
/* line 281, ../sass/skin/_form.scss */
.message--success {
  color: #74c13c;
}
/* line 285, ../sass/skin/_form.scss */
.message.filled {
  margin-bottom: 1.125rem;
}
/* line 288, ../sass/skin/_form.scss */
.message-container .message.filled {
  margin-top: 1.125rem;
}

/* line 296, ../sass/skin/_form.scss */
.message-container--no-margin .message {
  margin-top: 0;
  margin-bottom: 0;
}

/* line 303, ../sass/skin/_form.scss */
.message--error--login {
  color: #fff;
  margin-top: 15px;
  margin-bottom: 0;
  padding: 0 10px;
}
@media all and (min-width: 37.8125em) {
  /* line 303, ../sass/skin/_form.scss */
  .message--error--login {
    float: left;
    padding: 0;
    margin-top: 35px;
  }
}

/* line 317, ../sass/skin/_form.scss */
.asterisk {
  color: #f00;
}

/* line 321, ../sass/skin/_form.scss */
.has-pound-sign {
  margin-bottom: 1.125rem;
  position: relative;
  display: block;
}
/* line 326, ../sass/skin/_form.scss */
.has-pound-sign:before {
  display: inline-block;
  vertical-align: top;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  margin-top: -0.625rem;
  padding-left: 0.625rem;
  width: 0.9375rem;
  content: "\00A3";
  top: 50%;
  position: absolute;
}
/* line 337, ../sass/skin/_form.scss */
.has-pound-sign input[type="text"] {
  padding-left: 20px !important;
  text-indent: 0 !important;
  margin-bottom: 0 !important;
}

/* line 344, ../sass/skin/_form.scss */
.inline-input-wrapper {
  display: table;
  width: 100%;
}
@media all and (max-width: 37.8025em) {
  /* line 349, ../sass/skin/_form.scss */
  .inline-input-wrapper .input-container:first-child {
    display: table-footer-group;
  }
}
@media all and (min-width: 37.8125em) {
  /* line 349, ../sass/skin/_form.scss */
  .inline-input-wrapper .input-container:first-child {
    margin-left: 1.25rem;
  }
}
@media all and (max-width: 37.8025em) {
  /* line 361, ../sass/skin/_form.scss */
  .inline-input-wrapper .input-container:last-child {
    display: table-header-group;
  }
}

/* line 370, ../sass/skin/_form.scss */
.float-right label {
  padding-right: 0.625rem;
  text-align: right;
}
/* line 376, ../sass/skin/_form.scss */
.radio-element label.reset-input-width {
  padding-right: 0.4375rem;
}
/* line 381, ../sass/skin/_form.scss */
label a {
  color: #0075cd;
  text-decoration: none;
}
/* line 385, ../sass/skin/_form.scss */
label a:hover {
  text-decoration: underline;
}

/* line 393, ../sass/skin/_form.scss */
label.required:after, .mimic-label.required:after {
  display: inline-block;
  vertical-align: top;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  padding-left: 0.1875rem;
  padding-right: 0.1875rem;
  content: "\002A";
}

/* line 403, ../sass/skin/_form.scss */
.required-std {
  color: #f00;
}

/* line 407, ../sass/skin/_form.scss */
.folder-field {
  max-width: 25rem;
}

/* line 411, ../sass/skin/_form.scss */
.has-info-std {
  display: inline-block;
  width: 100%;
  position: relative;
}
@media all and (max-width: 37.8025em) {
  /* line 411, ../sass/skin/_form.scss */
  .has-info-std {
    padding-right: 35px;
  }
}

/* line 421, ../sass/skin/_form.scss */
.icon-info-std {
  display: inline-block;
  vertical-align: top;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  margin-left: 0.3125rem;
  margin-right: 0.3125rem;
}
/* line 427, ../sass/skin/_form.scss */
.has-info-std .icon-info-std {
  right: 0;
  margin-top: -1.25rem;
  position: absolute;
  top: 50%;
}
@media all and (min-width: 37.8125em) {
  /* line 427, ../sass/skin/_form.scss */
  .has-info-std .icon-info-std {
    right: -2.1875rem;
  }
}

/* line 439, ../sass/skin/_form.scss */
.parsley-success {
  position: relative;
}
/* line 442, ../sass/skin/_form.scss */
.parsley-success::before {
  margin-top: -0.875rem;
  content: "";
  position: absolute;
  height: 12px;
  width: 15px;
  right: 15px;
  top: 32px;
  background-image: url('../images/icons/icon-tick-small-green.png?1442833318');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 50;
}
/* line 459, ../sass/skin/_form.scss */
.parsley-success.custom-checkbox--container::before {
  display: none;
}
/* line 465, ../sass/skin/_form.scss */
.form--no-parsley-success .parsley-success::before {
  display: none;
}
/* line 470, ../sass/skin/_form.scss */
.parsley-success input[type=text],
.parsley-success input[type=number] {
  padding-right: 35px;
}

/* line 477, ../sass/skin/_form.scss */
.custom-checkbox--container .parsley-required {
  color: #f00;
}

/* line 482, ../sass/skin/_form.scss */
input[type=checkbox] {
  margin-top: 0.625rem;
  margin-bottom: 1.125rem;
}

/* line 490, ../sass/skin/_form.scss */
.nav-container--app .login-btn-container,
.nav-container--admin--mobile .login-btn-container {
  position: absolute;
}
@media all and (max-width: 37.8025em) {
  /* line 490, ../sass/skin/_form.scss */
  .nav-container--app .login-btn-container,
  .nav-container--admin--mobile .login-btn-container {
    left: 1.25rem;
    right: 1.25rem;
  }
}
@media all and (min-width: 37.8125em) {
  /* line 490, ../sass/skin/_form.scss */
  .nav-container--app .login-btn-container,
  .nav-container--admin--mobile .login-btn-container {
    position: relative;
  }
}

/* line 504, ../sass/skin/_form.scss */
.login-btn-container {
  min-width: 18.75rem;
  float: left;
}
@media all and (min-width: 37.8125em) {
  /* line 504, ../sass/skin/_form.scss */
  .login-btn-container {
    position: relative;
  }
}
/* line 513, ../sass/skin/_form.scss */
.login-btn-container p a {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-top: 0.5rem;
  margin-left: 1.25rem;
  color: #fff;
  text-transform: uppercase;
}

/* line 523, ../sass/skin/_form.scss */
.login-popout {
  padding: 1.875rem;
  margin-top: 0.9375rem;
  z-index: 10;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #1d5ba5;
  color: #fff;
}
@media all and (min-width: 37.8125em) {
  /* line 523, ../sass/skin/_form.scss */
  .login-popout {
    width: 16.875rem;
    right: auto;
  }
}
/* line 539, ../sass/skin/_form.scss */
.login-popout .form-default {
  margin-bottom: 0;
}
/* line 543, ../sass/skin/_form.scss */
.login-popout:before {
  margin-bottom: -0.625rem;
  height: 0;
  width: 0;
  border-bottom: 21px solid #1d5ba5;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  position: absolute;
  bottom: 100%;
  left: 0;
  content: "";
}
@media all and (min-width: 37.8125em) {
  /* line 543, ../sass/skin/_form.scss */
  .login-popout:before {
    left: 2.5rem;
  }
}

/* line 557, ../sass/skin/_form.scss */
.arrow-box {
  padding: 0.5rem 0.75rem 0.5rem 0;
  margin-left: 0.625rem;
  background-color: #efefef;
  font-weight: bold;
}
/* line 563, ../sass/skin/_form.scss */
.arrow-box:before {
  height: 0;
  width: 0;
  border-right: 6px solid #efefef;
  border-bottom: 4px solid transparent;
  border-top: 4px solid transparent;
  margin-right: 0.75rem;
  margin-left: -0.375rem;
  content: "";
  display: inline-block;
  vertical-align: 2px;
}

/* line 574, ../sass/skin/_form.scss */
.checkbox-wrapper input {
  margin-top: 0.875rem;
  margin-right: 0.625rem;
  float: left;
}
/* line 580, ../sass/skin/_form.scss */
.checkbox-wrapper label {
  float: none;
  width: auto;
}

/* line 586, ../sass/skin/_form.scss */
.multiple-select {
  width: 9.375rem;
  display: table;
}
/* line 590, ../sass/skin/_form.scss */
.multiple-select select {
  width: 45%;
  display: table-cell;
}
/* line 594, ../sass/skin/_form.scss */
.multiple-select select + select {
  margin-left: 8%;
}

/* line 600, ../sass/skin/_form.scss */
.form--course-entry {
  position: relative;
  display: none;
}
/* line 604, ../sass/skin/_form.scss */
.form-entry-checked .form--course-entry {
  display: block;
}

/* line 609, ../sass/skin/_form.scss */
.input--course-entry {
  border-radius: 5px;
  border: 1px solid #0075cb;
  height: 45px;
  padding: 0 15px;
  padding-right: 45px;
}
/* line 616, ../sass/skin/_form.scss */
.input--course-entry:hover, .input--course-entry:focus {
  border-color: #1d5ba5;
}

/* line 623, ../sass/skin/_form.scss */
.select[multiple="multiple"] {
  padding: 0;
  min-height: 160px;
}
/* line 627, ../sass/skin/_form.scss */
.select[multiple="multiple"] option {
  padding: 10px;
}
/* line 630, ../sass/skin/_form.scss */
.select[multiple="multiple"] option:checked {
  background-color: #0075cb;
}

/* line 636, ../sass/skin/_form.scss */
.form-inner {
  display: none;
}
@media all and (min-width: 37.8125em) {
  /* line 636, ../sass/skin/_form.scss */
  .form-inner {
    display: block;
  }
}

/*doc
---
title: Typo
name: Typo
category: Skin - Typography
---


```html_example

<div class="style-guide-content">
	
	<h1 class="primary-color">Title</h1>
	<h2 class="primary-color">Title</h2>
	<h3 class="primary-color">Title</h3>
	<h4 class="secondary-color">Title</h4>
	<h5 class="secondary-color">Title</h5>

	<p>Lorem ipsum</p>

	<ul class="list">
		<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam, odio.</li>
		<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam, odio.</li>
		<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam, odio.</li>
		<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam, odio.</li>
	</ul>

	<ul class="small-list">
		<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam, odio.</li>
		<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam, odio.</li>
		<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam, odio.</li>
		<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam, odio.</li>
	</ul>

</div>

```
*/
/* line 72, ../sass/skin/_typo.scss */
.sub-panel, .checkout-training-details p, .checkout-message p, .no-payment, .module-appointments .appointment-day, .module-appointments .appointment-mt-y, .module-analytics__header--title, .module-analytics__sub-header, .create-module__sub-title p {
  font-family: "myriad-pro", sans-serif;
  font-style: normal;
  font-weight: 300;
}

/* line 78, ../sass/skin/_typo.scss */
.nav--main li {
  font-family: "myriad-pro", sans-serif;
  font-style: normal;
  font-weight: 400;
}

/* line 102, ../sass/skin/_typo.scss */
.text--bold-italic {
  font-family: "myriad-pro", sans-serif;
  font-style: italic;
  font-weight: 700;
}

/* line 108, ../sass/skin/_typo.scss */
.text--xs {
  font-size: 0.75rem;
}

/* line 116, ../sass/skin/_typo.scss */
.false-heading {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 1.375rem;
  line-height: 1.09091;
  font-weight: bold;
  letter-spacing: -1px;
}
@media all and (min-width: 37.8125em) {
  /* line 116, ../sass/skin/_typo.scss */
  .false-heading {
    line-height: 0.90909;
  }
}

/* line 128, ../sass/skin/_typo.scss */
.text--small-header {
  font-size: 1.125rem;
  line-height: 1.22222;
  font-weight: bold;
}

/* line 133, ../sass/skin/_typo.scss */
.text--center, .no-payment {
  text-align: center;
}

@media all and (max-width: 37.8025em) {
  /* line 137, ../sass/skin/_typo.scss */
  .text--mob-center {
    text-align: center;
  }
  /* line 141, ../sass/skin/_typo.scss */
  .text--mob-center p {
    text-align: center;
  }
}

/* line 147, ../sass/skin/_typo.scss */
.text--left {
  text-align: left !important;
}

/* line 151, ../sass/skin/_typo.scss */
.text--right {
  text-align: right;
}

/* line 155, ../sass/skin/_typo.scss */
.text--bold {
  font-weight: bold;
}

/* line 163, ../sass/skin/_typo.scss */
.text--italic {
  font-style: italic;
}

/* line 167, ../sass/skin/_typo.scss */
.text--grey {
  color: #aeaeae;
}

/* line 171, ../sass/skin/_typo.scss */
.grey-heading {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 1.125rem;
  line-height: 1.22222;
  color: #aeaeae;
  font-weight: bold;
}

/* line 178, ../sass/skin/_typo.scss */
.has-sub-heading {
  margin-bottom: 0;
}

/* line 182, ../sass/skin/_typo.scss */
.header-section {
  margin-bottom: 2.1875rem;
  margin-top: 2.5rem;
  text-align: center;
}

/* line 9, ../sass/skin/_list.scss */
.list li, .small-list li, .wysiwyg ul li, .wysiwyg ol li {
  font-size: 1rem;
  line-height: 1.625;
  color: #0075cd;
}

/* line 19, ../sass/skin/_list.scss */
.list a {
  vertical-align: top;
}

/* line 29, ../sass/skin/_list.scss */
.small-list li:before {
  font-size: 0.75rem;
  line-height: 1.33333;
  padding-right: 0.625rem;
  margin-left: -0.875rem;
  margin-top: -0.3125rem;
}

/* line 41, ../sass/skin/_list.scss */
.list-reset li {
  word-wrap: break-word;
}

/* line 52, ../sass/skin/_list.scss */
.list-reset-wrapper p {
  color: #555;
}

/* line 57, ../sass/skin/_list.scss */
.custom-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* line 62, ../sass/skin/_list.scss */
.custom-list li {
  padding-left: 30px;
  position: relative;
  margin-bottom: 10px;
}
/* line 67, ../sass/skin/_list.scss */
.custom-list li::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  height: 21px;
  width: 21px;
  background-image: url('../images/icons/icon-tick-circle.png?1421058570');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/*doc
---
title: Listing
name: Listing
category: Skin - Listing item
---


```html_example

<div class="style-guide-content">
	
	<ul class="listing-item module-listing desk-3-items mob-1-items listing--gutter-h-8">
			
		<li>
			<div class="list-inner">
				<div class="media-wrapper">
					<img src="http://placehold.it/400x200" class="img--stretch" />
				</div>
				<h3>Microbiology</h3>
			</div>
		</li>
		<li>
			<div class="list-inner">
				<div class="media-wrapper">
					<img src="http://placehold.it/400x200" class="img--stretch" />
				</div>
				<h3>Practice & Procedures</h3>
			</div>
		</li>
		<li>
			<div class="list-inner">
				<div class="media-wrapper">
					<img src="http://placehold.it/400x200" class="img--stretch" />
				</div>
				<h3>Personal Protection</h3>
			</div>
		</li>
		<li>
			<div class="list-inner">
				<div class="media-wrapper">
					<img src="http://placehold.it/400x200" class="img--stretch" />
				</div>
				<h3>Instruments & Appliances</h3>
			</div>
		</li>
		<li>
			<div class="list-inner">
				<div class="media-wrapper">
					<img src="http://placehold.it/400x200" class="img--stretch" />
				</div>
				<h3>In Surgery Environment</h3>
			</div>
		</li>
		<li>
			<div class="list-inner">
				<div class="media-wrapper">
					<img src="http://placehold.it/400x200" class="img--stretch" />
				</div>
				<h3>Other Environments</h3>
			</div>
		</li>
		<li>
			<div class="list-inner">
				<div class="media-wrapper">
					<img src="http://placehold.it/400x200" class="img--stretch" />
				</div>
				<h3>The Business Perspective</h3>
			</div>
		</li>

	</ul>

</div>

<div class="style-guide-content">
	<ul class="listing-item icons-listing desk-3-items mob-1-items">
				
		<li>
			<div class="list-inner text--center">
				<div class="media-wrapper">
					<img src="../../assets/images/professional-accreditation.png" class="img--center" />
				</div>
				<h3 class="primary-color">Professional Accreditation</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste dolorum sed adipisci perferendis non accusamus nesciunt repellendus obcaecati quidem nam.</p>
			</div>
		</li>
		<li>
			<div class="list-inner text--center">
				<div class="media-wrapper">
					<img src="../../assets/images/online.png" class="img--center" />
				</div>
				<h3 class="primary-color">Everything you need online</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste dolorum sed adipisci perferendis non accusamus nesciunt repellendus obcaecati quidem nam.</p>
			</div>
		</li>
		<li>
			<div class="list-inner text--center">
				<div class="media-wrapper">
					<img src="../../assets/images/print-certificate.png" class="img--center" />
				</div>
				<h3 class="primary-color">Print your own certificate</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste dolorum sed adipisci perferendis non accusamus nesciunt repellendus obcaecati quidem nam.</p>
			</div>
		</li>

	</ul>
</div>


```
*/
/* line 143, ../sass/skin/_listings.scss */
.module-listing a {
  width: 100%;
}
/* line 148, ../sass/skin/_listings.scss */
.module-listing .media-wrapper {
  position: relative;
}
@media all and (max-width: 37.8025em) {
  /* line 148, ../sass/skin/_listings.scss */
  .module-listing .media-wrapper {
    max-width: 6.875rem;
    margin-right: 0.9375rem;
    float: left;
  }
}
/* line 158, ../sass/skin/_listings.scss */
.module-listing__text {
  font-size: 1.375rem;
  display: block;
  overflow: hidden;
  float: none;
}

/* line 166, ../sass/skin/_listings.scss */
.module-progression {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  transition: all 0.5s ease-in-out;
  position: absolute;
  height: 100%;
  width: 100%;
}
/* line 216, ../sass/skin/_global.scss */
.module-progression:before {
  box-shadow: inset 0 0 30px 0 rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  content: "";
  background: rgba(11, 4, 4, 0.5);
}
/* line 174, ../sass/skin/_listings.scss */
.module-progression__content {
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  top: 50%;
  position: absolute;
  width: 100%;
  text-align: center;
}
/* line 181, ../sass/skin/_listings.scss */
.module-progression__content p {
  font-size: 2.5rem;
  margin-bottom: 0;
  color: #fff;
}
/* line 188, ../sass/skin/_listings.scss */
a:hover .module-progression {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}

/* line 196, ../sass/skin/_listings.scss */
.listing-courses .media-wrapper {
  margin-bottom: 0;
  position: relative;
}

/* line 209, ../sass/skin/_listings.scss */
.listing-contacts .panel {
  padding-bottom: 0.625rem;
  background-color: #fff;
}
/* line 214, ../sass/skin/_listings.scss */
.listing-contacts ul {
  margin-bottom: 1.5625rem;
}
/* line 218, ../sass/skin/_listings.scss */
.listing-contacts .view-more-wrapper {
  display: block;
  text-align: right;
}

/* line 236, ../sass/skin/_listings.scss */
.faq-list li {
  font-size: 0.875rem;
  line-height: 2.07143;
}
/* line 240, ../sass/skin/_listings.scss */
.faq-list a {
  color: #555;
}

/* line 246, ../sass/skin/_listings.scss */
.title-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* line 252, ../sass/skin/_listings.scss */
.title-container {
  display: table;
  width: 100%;
  height: 100%;
}
/* line 216, ../sass/skin/_global.scss */
.title-container:before {
  box-shadow: inset 0 0 30px 0 rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  content: "";
  background: rgba(11, 4, 4, 0.2);
}

/* line 259, ../sass/skin/_listings.scss */
.title-content {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  color: #fff;
  position: relative;
}

/* line 275, ../sass/skin/_listings.scss */
.icons-listing {
  margin-top: 0;
}
/* line 278, ../sass/skin/_listings.scss */
.icons-listing li {
  padding-top: 0;
}

/* line 290, ../sass/skin/_listings.scss */
.progression-listing__item > p {
  padding-right: 5.625rem;
}

/* line 307, ../sass/skin/_listings.scss */
.file-selector-listing button {
  height: 100%;
  padding: 0;
}
/* line 312, ../sass/skin/_listings.scss */
.file-selector-listing img {
  width: 100%;
}

/*doc
---
title: Panel
name: Panel
category: Skin - Panel
---


```html_example

<div class="style-guide-content">

	<div class="row">
		<div class="grid-item desk-w-3-12">
			<div class="panel panel--border location-wrapper">
				<h3 class="primary-color">Location Name</h3>
				<p>Address line 1</p>
				<p>Address line 2</p>
				<p>Town</p>
				<p>Postcode</p>
			</div>
		</div><!-- end grid item -->
	</div><!-- end row -->

</div>

<div class="style-guide-content">

	<div class="row">
		<div class="grid-item desk-w-3-12">
			<div class="panel panel--border panel--xs panel--radius">
				<p>Augue pellentesque diam? Mattis lorem? Velit nascetur, a velit, non non risus scelerisque turpis eu et, tortor natoque porta, adipiscing! Nec. Vel hac eu. Nec, amet eu, lacus ridiculus a sit etiam.</p>
			</div>
		</div><!-- end grid item -->
	</div><!-- end row -->

</div>

<div class="style-guide-content">

	<div class="row">
		<div class="grid-item desk-w-9-12 mb-20">
			<div class="panel panel--bottom-20 panel--border panel--radius">
				<h2 class="primary-color mb-30">Infection Control Dental Team Training</h2>

				<p class="flush-mb"><span class="text--bold">Price</span> (per trainee)</p>
				<div class="review-basket">
					<div class="review-basket__price">
						<p class="likeh1 primary-color inline-block">&pound;299</p>
					</div>
					<div class="review-basket__remove">
						<a class="btn--inline text--small" href=""><i class="icon-bin"><span class="visuallyhidden">Icon remove</span></i>Remove</a>
					</div>
				</div>

			</div>
		</div><!-- end grid item -->

		<div class="grid-item desk-w-3-12">
			<div class="panel panel--border panel--bg-light panel--radius">
				<p class="mob-mb-20 desk-mb-30">You will be able to configure trainee access and any on-site training requirements whilst checking out.</p>
				<button class="btn btn--primary btn--full-width">Proceed to checkout</button>
			</div>
		</div><!-- end grid item -->
	</div><!-- end row -->

</div>

<div class="style-guide-content">

	<div class="row">
		<div class="grid-item desk-w-3-12">
			<div class="panel panel--widget panel--bg-light panel--radius">

				<p>Course(s)</p>

				<div class="panel--widget__content">
					<span class="">£---</span>
					<p>Infection Control Dental Team Training</p>

					<span class="">£---</span>
					<p>Understanding MRSA</p>

					<span class="">£---</span>
					<p>Dental Hygiene Training</p>

				</div>

				<div class="panel--widget__footer">
					<p class="subtotal-title">Subtotal</p>
					<span class="pounds">299.<span class="pennies">00</span></span>
				</div>

			</div>
		</div><!-- end grid item -->
	</div><!-- end row -->

</div>


<div class="style-guide-content">

	<div class="row">
		<div class="grid-item desk-w-3-12">
			<div class="panel panel--widget panel--bg-light panel--radius">

				<p>Course(s)</p>

				<div class="panel--widget__content">
					<span class="">£---</span>
					<p>Infection Control Dental Team Training</p>

					<span class="">£---</span>
					<p>Understanding MRSA</p>

					<span class="">£---</span>
					<p>Dental Hygiene Training</p>

				</div>

				<div class="panel--widget__footer">
					<p class="subtotal-title">Subtotal</p>
					<span class="pounds">299.<span class="pennies">00</span></span>
				</div>

			</div>
		</div><!-- end grid item -->
	</div><!-- end row -->

</div>


```
*/
/* line 140, ../sass/skin/_panel.scss */
.panel, .panel--border {
  padding: 1.875rem;
  position: relative;
  z-index: 5;
}

/* line 150, ../sass/skin/_panel.scss */
.panel--large {
  padding: 2.8125rem;
}

/* line 154, ../sass/skin/_panel.scss */
.panel--border {
  border: 1px solid #e2e2e2;
}
/* line 158, ../sass/skin/_panel.scss */
.panel--border__no-bottom {
  border-bottom: 0;
}

/* line 163, ../sass/skin/_panel.scss */
.panel--radius {
  border-radius: 5px;
  overflow: hidden;
}

/* line 168, ../sass/skin/_panel.scss */
.panel--no-padding-bottom {
  padding-bottom: 0;
}

/* line 172, ../sass/skin/_panel.scss */
.panel--no-padding {
  padding: 0;
}

@media all and (max-width: 37.8025em) {
  /* line 176, ../sass/skin/_panel.scss */
  .panel--mob-no-padding-bottom {
    padding-bottom: 0;
  }
}

/* line 182, ../sass/skin/_panel.scss */
.panel--bottom-20 {
  padding: 1.25rem;
}

/* line 186, ../sass/skin/_panel.scss */
.border-area {
  border: 1px solid #e2e2e2;
}

/* line 190, ../sass/skin/_panel.scss */
.trl-border {
  border-style: solid;
  border-color: #e2e2e2;
  border-width: 1px;
  border-bottom: 0;
}

/* line 197, ../sass/skin/_panel.scss */
.panel--even-padding {
  padding: 0.9375rem;
  background-color: #fff;
}

@media all and (min-width: 37.8125em) {
  /* line 203, ../sass/skin/_panel.scss */
  .panel--padding-large {
    padding: 3.4375rem;
  }
}
/* line 208, ../sass/skin/_panel.scss */
.panel--bg {
  background-color: #edf5fb;
}

/* line 212, ../sass/skin/_panel.scss */
.panel--bg-light {
  background-color: #efefef;
}

/* line 216, ../sass/skin/_panel.scss */
.panel--bg-white {
  background-color: #fff;
}

/* line 220, ../sass/skin/_panel.scss */
.panel--bg-theme {
  background-color: #1d5ba5;
  color: #fff;
}

/* line 225, ../sass/skin/_panel.scss */
.panel--xs {
  padding: 0.9375rem;
}

/* line 229, ../sass/skin/_panel.scss */
.panel--md {
  padding: 1.25rem;
}

/* line 234, ../sass/skin/_panel.scss */
.panel--widget > p {
  margin-bottom: 0.3125rem;
}

/* line 239, ../sass/skin/_panel.scss */
.panel--widget__content {
  padding: 0.625rem 1.25rem;
}
/* line 243, ../sass/skin/_panel.scss */
.panel--widget__content span {
  float: right;
  font-weight: bold;
}
/* line 248, ../sass/skin/_panel.scss */
.panel--widget__content p {
  padding-right: 1.5625rem;
  margin-bottom: 0.625rem;
  overflow: hidden;
  float: none;
  display: block;
}
/* line 256, ../sass/skin/_panel.scss */
.panel--widget__content span, .panel--widget__content p {
  font-size: 0.875rem;
  line-height: 1.28571;
}
/* line 260, ../sass/skin/_panel.scss */
.panel--widget__content .panel--widget__title {
  font-size: 1rem;
}
/* line 264, ../sass/skin/_panel.scss */
.panel--widget__content .panel__vat-title {
  margin: 0;
  padding: 0;
  text-align: right;
  font-weight: bold;
}
/* line 271, ../sass/skin/_panel.scss */
.panel--widget__content .panel__vat-amount {
  font-weight: normal;
}

/* line 276, ../sass/skin/_panel.scss */
.panel--widget__content--alt {
  background-color: #d7d7d7;
}

/* line 280, ../sass/skin/_panel.scss */
.panel--widget__middle,
.panel--widget__footer {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-right: 1.25rem;
  padding-left: 1.25rem;
  padding-bottom: 0.5rem;
  padding-top: 0.5rem;
  background-color: #f86548;
  color: #fff;
  text-align: right;
}
/* line 291, ../sass/skin/_panel.scss */
.panel--widget__middle p,
.panel--widget__footer p {
  font-size: 0.875rem;
  line-height: 1.28571;
  margin-bottom: 0;
  font-weight: bold;
}

/* line 298, ../sass/skin/_panel.scss */
.panel--widget__middle {
  background-color: #d7d7d7;
  color: #555;
}

@media all and (max-width: 37.8025em) {
  /* line 303, ../sass/skin/_panel.scss */
  .panel--form-width {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
  }
}
@media all and (min-width: 37.8125em) {
  /* line 303, ../sass/skin/_panel.scss */
  .panel--form-width {
    width: 30.625rem;
  }
}

@media all and (min-width: 37.8125em) {
  /* line 314, ../sass/skin/_panel.scss */
  .panel--form-width__tooltip {
    width: 34.375rem;
    padding-right: 3.125rem;
  }
}

@media all and (max-width: 37.8025em) {
  /* line 321, ../sass/skin/_panel.scss */
  .panel--flush {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
  }
}

@media all and (min-width: 37.8125em) {
  /* line 328, ../sass/skin/_panel.scss */
  .panel--loggedin {
    padding-left: 3.125rem;
    padding-right: 3.125rem;
  }
}
/* line 335, ../sass/skin/_panel.scss */
.panel--loggedin h2 {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.23077;
  margin-bottom: 1.875rem;
}

/* line 342, ../sass/skin/_panel.scss */
.sub-panel {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 0.9375rem;
  background-color: #0075cd;
  color: #fff;
}
/* line 350, ../sass/skin/_panel.scss */
.sub-panel p {
  font-size: 1em;
}

/* line 355, ../sass/skin/_panel.scss */
.sub-panel--fz16 {
  font-size: 1rem;
}

/* line 359, ../sass/skin/_panel.scss */
.sub-header {
  padding: 0.9375rem;
  background-color: #edf5fb;
}

/* line 368, ../sass/skin/_panel.scss */
.is-sub-panel {
  margin-top: -0.3125rem;
  padding-top: 1.5625rem;
  z-index: 1;
}
/* line 373, ../sass/skin/_panel.scss */
.is-sub-panel p {
  margin-bottom: 0.625rem;
}
@media all and (min-width: 37.8125em) {
  /* line 373, ../sass/skin/_panel.scss */
  .is-sub-panel p {
    margin-bottom: 0;
  }
}

@media all and (min-width: 37.8125em) {
  /* line 382, ../sass/skin/_panel.scss */
  .has-percentage-right {
    padding-right: 12.5rem;
  }
}

/* line 388, ../sass/skin/_panel.scss */
.review-basket {
  display: table;
  width: 100%;
}
/* line 392, ../sass/skin/_panel.scss */
.review-basket__price {
  display: table-cell;
  margin-bottom: 0;
}
/* line 396, ../sass/skin/_panel.scss */
.review-basket__price p {
  margin-bottom: 0;
}
/* line 401, ../sass/skin/_panel.scss */
.review-basket__remove {
  display: block;
  text-align: right;
}

@media all and (max-width: 37.8025em) {
  /* line 408, ../sass/skin/_panel.scss */
  .mob-panel--reset {
    border: 0;
    padding: 0;
  }
}
/* line 414, ../sass/skin/_panel.scss */
.panel--course-entry {
  padding: 1.25rem;
  background-color: #efefef;
  border-radius: 5px;
  overflow: hidden;
  text-align: center;
}
@media all and (min-width: 37.8125em) {
  /* line 414, ../sass/skin/_panel.scss */
  .panel--course-entry {
    position: absolute;
  }
}

/* line 427, ../sass/skin/_panel.scss */
.course-entry-message {
  margin: -1.25rem -1.25rem 1.25rem;
  padding: 0.625rem 1.25rem;
  color: #fff;
}

/* line 433, ../sass/skin/_panel.scss */
.course-entry-message--success {
  background-color: #2ea307;
}

/* line 437, ../sass/skin/_panel.scss */
.course-entry-message--error {
  background-color: #d00018;
}

@media all and (min-width: 37.8125em) {
  /* line 441, ../sass/skin/_panel.scss */
  .flex-container {
    display: -ms-flexbox;
    display: flex;
  }
  /* line 445, ../sass/skin/_panel.scss */
  .flex-container .push-right {
    margin-left: auto;
  }
}

/* line 451, ../sass/skin/_panel.scss */
.panel--register {
  width: 100%;
  padding: 20px;
  margin: 0 auto 20px;
  border-radius: 5px;
}
@media all and (min-width: 37.8125em) {
  /* line 451, ../sass/skin/_panel.scss */
  .panel--register {
    float: right;
    max-width: 220px;
  }
}

/*doc
---
title: Callout
name: Callout
category: Skin - Callout
---


```html_example

<div class="style-guide-content">
	
	<div class="row">
		<div class="grid-item desk-w-10-12">
			<div class="js-remove-callout callout callout--success">
				<p class="likeh3">Location updated successfully</p>
				<p class="">The location record for Lanswood Dental Practice has been updated.</p>
				<span class="js-close-callout close-callout"></span>
			</div>

			<div class="js-remove-callout callout callout--success">
				<p class="likeh3">Location removed successfully</p>
				<p class="">The location record for Lanswood Dental Practice has been removed.</p>
				<span class="js-close-callout close-callout"></span>
			</div>

			<div class="js-remove-callout callout callout--danger">
				<p class="likeh3">Location record could not be updated</p>
				<p class="">The system is unable to update the record for Lanswood Dental Practice at this time, please try again later.</p>
				<span class="js-close-callout close-callout"></span>
			</div>
		</div>
	</div>

</div>


```
*/
/* line 45, ../sass/skin/_callout.scss */
.callout {
  padding: 1.5625rem;
  margin-bottom: 1.25rem;
  display: inline-block;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  border-radius: 4px;
  border-width: 1px;
  border-style: solid;
  position: relative;
  width: 100%;
}
/* line 55, ../sass/skin/_callout.scss */
.callout p + p {
  margin-bottom: 0;
}
/* line 59, ../sass/skin/_callout.scss */
.callout .close-callout {
  right: 0.625rem;
  position: absolute;
  top: 0;
  cursor: pointer;
}
/* line 65, ../sass/skin/_callout.scss */
.callout .close-callout:before {
  display: inline-block;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  width: 0.625rem;
  height: 0.625rem;
  content: "\00D7";
}

/* line 77, ../sass/skin/_callout.scss */
.callout--success {
  border-color: #74c13c;
}
/* line 82, ../sass/skin/_callout.scss */
.callout--success p:first-child {
  color: #74c13c;
}
/* line 87, ../sass/skin/_callout.scss */
.callout--success .close-callout,
.callout--success ul {
  color: #74c13c;
}
/* line 77, ../sass/skin/_callout.scss */
.callout--danger {
  border-color: #d6000f;
}
/* line 82, ../sass/skin/_callout.scss */
.callout--danger p:first-child {
  color: #d6000f;
}
/* line 87, ../sass/skin/_callout.scss */
.callout--danger .close-callout,
.callout--danger ul {
  color: #d6000f;
}

/* line 101, ../sass/skin/_callout.scss */
.registration-callout-inline {
  margin-top: 1.25rem;
  color: #d6000f;
}

/* line 11, ../sass/skin/_hero.scss */
.hero-container {
  min-height: 23.4375rem;
  margin-top: 0;
  position: relative;
  background-image: url('../images/homepage.jpg?1442833318');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  text-align: center;
}
@media all and (min-width: 37.8125em) {
  /* line 11, ../sass/skin/_hero.scss */
  .hero-container {
    min-height: 27.3125rem;
    text-align: left;
  }
}

@media all and (min-width: 37.8125em) {
  /* line 27, ../sass/skin/_hero.scss */
  .hero__title {
    font-size: 3.375rem;
    line-height: 1.16667;
    width: 40%;
  }
}

/* line 35, ../sass/skin/_hero.scss */
.hero__info {
  font-size: 1.25rem;
  padding: 0.625rem;
  margin-bottom: 1.25rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #1d5ba5;
  color: #fff;
  font-weight: 200;
  text-align: center;
  position: relative;
}
/* line 47, ../sass/skin/_hero.scss */
.hero__info:after {
  height: 0;
  width: 0;
  border-top: 21px solid #1d5ba5;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -14px;
  margin-top: -10px;
  content: "";
}

/* line 60, ../sass/skin/_hero.scss */
.hero__info-link-container:after {
  content: normal;
}

/* line 65, ../sass/skin/_hero.scss */
.hero__info-link {
  margin: -0.625rem;
  padding: 0.625rem;
  color: #fff;
  text-decoration: none;
  display: block;
  border-radius: 5px;
}
/* line 73, ../sass/skin/_hero.scss */
.hero__info-link:hover {
  background-color: #194f8f;
}

/* line 78, ../sass/skin/_hero.scss */
.content-wrapper {
  backface-visibility: hidden;
  padding-top: 2.5rem;
  color: #1d5ba5;
  width: 100%;
  z-index: 50;
}
@media all and (min-width: 37.8125em) {
  /* line 78, ../sass/skin/_hero.scss */
  .content-wrapper {
    padding-bottom: 15rem;
  }
}
/* line 93, ../sass/skin/_hero.scss */
.content-wrapper .content-container {
  width: 100%;
}

/* line 104, ../sass/skin/_hero.scss */
.pull-content-up {
  margin-top: -11.25rem;
}

/*doc
---
title: Sectors-nav
name: Sectors-nav
category: Skin - Sectors-nav
---


```html_example

<div class="style-guide-content">
	
	<div class="row">
		<!-- Sectors-nav test your knowledge -->
		<div class="grid-item desk-w-1-3">

			<!-- Do not copy the grid markup -->
			<div class="sectors-nav sectors-nav--progression">
				<div class="sectors-nav__header">
					<img src="http://placehold.it/225x225" alt="" class="img--stretch">
					<div class="sectors-nav__title">
						<p class="likeh2">Microbiology</p>
					</div>
				</div>

				<div class="sectors-nav__content">
					<ul>
						<li><a href="#">Introduction</a></li>
						<li><a href="#">Minimum Infective Dose</a></li>
						<li class="active-test"><a href="#">Bacteria</a></li>
						<li><a href="#">Fungi</a></li>
						<li><a href="#">Viruses</a></li>
						<li><a href="#">Other Transmissable Agents</a></li>
						<li><a href="#">The Future</a></li>
						<li class="start-test"><a href="#">Test your knowledge</a></li>
					</ul>
				</div>
			</div>
		</div><!-- end grid-item -->

		<!-- Sectors-nav test passed -->
		<div class="grid-item desk-w-1-3">
			<!-- Do not copy the grid markup -->
			<div class="sectors-nav sectors-nav--progression">
				<div class="sectors-nav__header">
					<img src="http://placehold.it/225x225" alt="" class="img--stretch">
					<div class="sectors-nav__title">
						<p class="likeh2">Microbiology</p>
					</div>
				</div>

				<div class="sectors-nav__content">
					<ul>
						<li><a href="#">Introduction</a></li>
						<li><a href="#">Minimum Infective Dose</a></li>
						<li class="active-test"><a href="#">Bacteria</a></li>
						<li><a href="#">Fungi</a></li>
						<li><a href="#">Viruses</a></li>
						<li><a href="#">Other Transmissable Agents</a></li>
						<li><a href="#">The Future</a></li>
						<li class="test-passed"><a href="#">Test your knowledge</a></li>
					</ul>
				</div>
			</div>
		</div><!-- end grid-item -->

		<!-- Sectors-nav retake test -->
		<div class="grid-item desk-w-1-3">
			<!-- Do not copy the grid markup -->
			<div class="sectors-nav sectors-nav--progression">
				<div class="sectors-nav__header">
					<img src="http://placehold.it/225x225" alt="" class="img--stretch">
					<div class="sectors-nav__title">
						<p class="likeh2">Microbiology</p>
					</div>
				</div>

				<div class="sectors-nav__content">
					<ul>
						<li><a href="#">Introduction</a></li>
						<li><a href="#">Minimum Infective Dose</a></li>
						<li class="active-test"><a href="#">Bacteria</a></li>
						<li><a href="#">Fungi</a></li>
						<li><a href="#">Viruses</a></li>
						<li><a href="#">Other Transmissable Agents</a></li>
						<li><a href="#">The Future</a></li>
						<li class="retake-test"><a href="#">Test your knowledge</a></li>
					</ul>
				</div>
			</div>
		</div><!-- end grid-item -->

	</div><!-- end row -->

</div>

```
*/
/* line 104, ../sass/skin/_sidebar.scss */
.sectors-nav .start-test, .sectors-nav .test-passed, .sectors-nav .retake-test {
  border-top: 0;
  border-bottom: 0;
  position: relative;
  padding: 0;
}
/* line 110, ../sass/skin/_sidebar.scss */
.sectors-nav .start-test:after, .sectors-nav .test-passed:after, .sectors-nav .retake-test:after {
  display: inline-block;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  margin-top: -0.375rem;
  right: 0.9375rem;
  content: "";
  top: 50%;
  position: absolute;
}
/* line 119, ../sass/skin/_sidebar.scss */
.sectors-nav .start-test a, .sectors-nav .test-passed a, .sectors-nav .retake-test a, .sectors-nav .start-test span, .sectors-nav .test-passed span, .sectors-nav .retake-test span {
  padding: 0.9375rem 1.25rem;
  color: #fff;
  font-weight: normal;
}

/* line 127, ../sass/skin/_sidebar.scss */
.sectors-nav__title p:after, .sectors-nav__title button:after {
  display: inline-block;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  margin-left: 0.3125rem;
  height: 0;
  width: 0;
  border-top: 9px solid #fff;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  content: "";
}

/* line 136, ../sass/skin/_sidebar.scss */
.sectors-nav button.modules-list-active:after {
  border-bottom: 9px solid #fff;
  border-top: 0;
}

/* line 142, ../sass/skin/_sidebar.scss */
.sidebar--padding, .sectors-nav {
  border: 1px solid #e2e2e2;
  background-color: #fff;
}

/* line 148, ../sass/skin/_sidebar.scss */
.sidebar--padding {
  padding: 1.25rem;
}

/* line 154, ../sass/skin/_sidebar.scss */
.side-padding {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}

/* line 159, ../sass/skin/_sidebar.scss */
.sectors-nav {
  border-bottom: 1px solid #c3c3c3;
}
/* line 164, ../sass/skin/_sidebar.scss */
.sectors-nav__header {
  transform-style: preserve-3d;
  position: relative;
}
/* line 169, ../sass/skin/_sidebar.scss */
.sectors-nav__title {
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  top: 50%;
  position: absolute;
  width: 100%;
  text-align: center;
}
/* line 216, ../sass/skin/_global.scss */
.sectors-nav__title:before {
  box-shadow: inset 0 0 30px 0 rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  content: "";
  background: rgba(11, 4, 4, 0.5);
}
/* line 177, ../sass/skin/_sidebar.scss */
.sectors-nav__title p, .sectors-nav__title button {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  height: auto;
  margin-bottom: 0;
  color: #fff;
  white-space: normal;
  position: relative;
}
/* line 196, ../sass/skin/_sidebar.scss */
.sectors-nav__content {
  padding-bottom: 1.25rem;
}
@media all and (min-width: 37.8125em) {
  /* line 196, ../sass/skin/_sidebar.scss */
  .sectors-nav__content {
    padding-bottom: 5rem;
  }
}
/* line 207, ../sass/skin/_sidebar.scss */
.sectors-nav__content li {
  padding: 0.625rem 1.75rem;
}
/* line 211, ../sass/skin/_sidebar.scss */
.sectors-nav__content a, .sectors-nav__content span {
  display: inline-block;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  width: 100%;
  color: #0075cd;
  white-space: normal;
}
/* line 220, ../sass/skin/_sidebar.scss */
.sectors-nav__content span:hover {
  text-decoration: none;
}
/* line 225, ../sass/skin/_sidebar.scss */
.sectors-nav .active-test {
  background-color: #f2f2f2;
  border-top: 1px solid #e2e2e2;
  border-bottom: 1px solid #e2e2e2;
}
/* line 240, ../sass/skin/_sidebar.scss */
.sectors-nav .test-passed {
  color: #282828;
}

/* line 262, ../sass/skin/_sidebar.scss */
.sectors-nav--no-module .sectors-nav__content {
  padding-bottom: 1.875rem;
}
/* line 266, ../sass/skin/_sidebar.scss */
.sectors-nav--no-module a {
  color: #fff;
}

/* line 271, ../sass/skin/_sidebar.scss */
.sectors-nav--progression {
  border-bottom: 1px solid #e2e2e2;
}
/* line 274, ../sass/skin/_sidebar.scss */
.sectors-nav--progression .sectors-nav__content {
  padding-bottom: 0;
}

/* line 280, ../sass/skin/_sidebar.scss */
.coordinator-tick i {
  display: inline-block;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  margin-right: 0.1875rem;
}

/* line 287, ../sass/skin/_sidebar.scss */
.modules-list {
  border-bottom: 1px solid #e2e2e2;
}

/*doc
---
title: Accordion
name: Accordion
category: Skin - Accordion
---


```html_example

<div class="style-guide-content">
	
	<div class="site-wide">
		
		<div class="js-accordion-container accordion-container">
			<div class="js-accordion-item accordion-item ">
				<button type="button" class="js-accordion-button accordion-title">Title here</button>
				<div class="js-accordion-content accordion-content">
					<div class="accordion-inner">
						HELLO WORLD
					</div>
				</div>
			</div>
		</div>

	</div>

</div>


```
*/
/* line 39, ../sass/skin/_accordion.scss */
.accordion-item {
  margin-bottom: 0.9375rem;
  border: 1px solid #e2e2e2;
}
/* line 43, ../sass/skin/_accordion.scss */
.dashboard-tabs .accordion-item {
  margin-left: -20px;
  margin-right: -20px;
  border: 0;
  margin-bottom: 0;
}

/* line 51, ../sass/skin/_accordion.scss */
.accordion-title {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  width: 100%;
  text-align: left;
  outline: none;
  position: relative;
  white-space: normal;
  line-height: 1.4;
}
/* line 63, ../sass/skin/_accordion.scss */
.accordion-title:after {
  height: 0;
  width: 0;
  border-bottom: 6px solid #0075cd;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  margin-top: -0.1875rem;
  right: 1.25rem;
  content: "";
  position: absolute;
  top: 50%;
}
/* line 72, ../sass/skin/_accordion.scss */
.js-accordion-open .accordion-title:after {
  height: 0;
  width: 0;
  border-top: 6px solid #0075cd;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 0;
}

/* line 79, ../sass/skin/_accordion.scss */
.accordion-content {
  padding: 1.25rem;
  border-top: 1px solid #e2e2e2;
}
/* line 83, ../sass/skin/_accordion.scss */
.dashboard-tabs .accordion-content {
  border-top: 0;
}

/* line 88, ../sass/skin/_accordion.scss */
.accordion-button {
  position: relative;
}
@media all and (max-width: 37.8025em) {
  /* line 88, ../sass/skin/_accordion.scss */
  .accordion-button {
    height: 3.25rem;
    padding-left: 1.25rem;
    width: 100%;
    text-align: left;
  }
}
/* line 99, ../sass/skin/_accordion.scss */
.accordion-button:after {
  height: 0;
  width: 0;
  border-top: 7.5px solid #0075cd;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  margin-top: -0.125rem;
  right: 1.25rem;
  content: "";
  position: absolute;
  top: 50%;
}
/* line 107, ../sass/skin/_accordion.scss */
.dashboard-tabs .accordion-button:after {
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 52px;
  height: 30px;
  background-image: url('../images/icon-chevron.svg?1571839944');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border: 0;
  margin-top: 0;
}
/* line 119, ../sass/skin/_accordion.scss */
.js-accordion-open .accordion-button:after {
  height: 0;
  width: 0;
  border-bottom: 7.5px solid #0075cd;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 0;
}
/* line 123, ../sass/skin/_accordion.scss */
.dashboard-tabs .js-accordion-open .accordion-button:after {
  -ms-transform: translateY(-50%) rotate(180deg);
  transform: translateY(-50%) rotate(180deg);
  width: 52px;
  height: 30px;
  border: 0;
}
/* line 132, ../sass/skin/_accordion.scss */
.dashboard-tabs .accordion-button {
  background-color: #0075cd;
  color: #fff;
  text-transform: uppercase;
  font-size: 30px;
  text-decoration: none;
  padding: 15px;
  height: auto;
}

/* line 145, ../sass/skin/_accordion.scss */
.accordion-faq .accordion-button {
  padding-left: 3.75rem;
  position: relative;
}
@media all and (max-width: 37.8025em) {
  /* line 145, ../sass/skin/_accordion.scss */
  .accordion-faq .accordion-button {
    padding-bottom: 0.625rem;
    height: auto;
    line-height: 25px;
    text-align: left;
    white-space: normal;
  }
}
/* line 158, ../sass/skin/_accordion.scss */
.accordion-faq .accordion-button:before {
  margin-top: -0.8125rem;
  left: 0.875rem;
  display: inline-block;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  content: "";
  background-image: url('../images/icons/icon-plus.png?1425564191');
  background-size: 100%;
  width: 26px;
  height: 26px;
  position: absolute;
  top: 50%;
}
@media all and (max-width: 37.8025em) {
  /* line 158, ../sass/skin/_accordion.scss */
  .accordion-faq .accordion-button:before {
    margin-top: 0;
    top: 0;
  }
}
/* line 179, ../sass/skin/_accordion.scss */
.accordion-faq .accordion-button:after {
  display: none;
}
/* line 184, ../sass/skin/_accordion.scss */
.accordion-faq .accordion-item {
  border: 0;
}
/* line 188, ../sass/skin/_accordion.scss */
.accordion-faq .accordion-inner {
  padding-left: 3.75rem;
}
@media all and (min-width: 37.8125em) {
  /* line 188, ../sass/skin/_accordion.scss */
  .accordion-faq .accordion-inner {
    padding-left: 5rem;
  }
}
/* line 196, ../sass/skin/_accordion.scss */
.accordion-faq .js-accordion-open {
  border-bottom: 1px solid #e2e2e2;
}
/* line 199, ../sass/skin/_accordion.scss */
.accordion-faq .js-accordion-open .accordion-button:before {
  background-image: url('../images/icons/icon-minus.png?1425564191');
}
/* line 204, ../sass/skin/_accordion.scss */
.accordion-faq .accordion-content {
  border-top: 0;
}

/* line 210, ../sass/skin/_accordion.scss */
.tabs-nav-prev-next {
  padding: 0 1.25rem;
  margin-top: -60px;
}

/*doc
---
title: Tabs
name: Tabs
category: Skin - Tabs
---


```html_example

<div class="style-guide-content">

	<div class="" style="background: #edf5fb; padding: 20px;">

		<!-- tabs markup -->
		<div class="js-accordion-container accordion-container" data-tabs-enabled="desk">
		    <div class="js-accordion-item accordion-item">
		        <button type="button" role="tab" class="js-accordion-button accordion-button">Tab1</button>
		        <div class="js-accordion-content accordion-content" role="tabpanel">
		            <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
		        </div>
		    </div>
		    <div class="js-accordion-item accordion-item">
		        <button type="button" role="tab" class="js-accordion-button accordion-button">Tab2</button>
		        <div class="js-accordion-content accordion-content" role="tabpanel">
		            <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
		        </div>
		    </div>
		    <div class="js-accordion-item accordion-item js-accordion-open">
		        <button type="button" role="tab" class="js-accordion-button accordion-button">Tab3</button>
		        <div class="js-accordion-content accordion-content" role="tabpanel">
		            <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
		            <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
		        </div>
		    </div>
		</div>
		<!-- end tabs markup -->

	</div>

</div>


```
*/
/* line 53, ../sass/skin/_tabs.scss */
.tabs-container .nav {
  margin-bottom: -0.0625rem;
}
/* line 58, ../sass/skin/_tabs.scss */
.dashboard-tabs .tabs-container .nav {
  margin-bottom: 20px;
}
/* line 62, ../sass/skin/_tabs.scss */
.tabs-container .nav a {
  padding: 0.625rem 1.25rem;
  color: #0075cd;
  text-align: center;
}
/* line 69, ../sass/skin/_tabs.scss */
.tabs-container .nav li + li {
  margin-left: 0.0625rem;
}
/* line 76, ../sass/skin/_tabs.scss */
.dashboard-tabs .tabs-container li {
  width: 50%;
}
/* line 79, ../sass/skin/_tabs.scss */
.dashboard-tabs .tabs-container li + li {
  margin-left: -1px;
}
/* line 89, ../sass/skin/_tabs.scss */
.dashboard-tabs .tabs-container li a {
  border-radius: 5px 5px 0 0;
  text-decoration: none;
  padding: 15px;
  display: block;
  text-align: center;
  background-color: #fff;
  border: 1px solid #0075cd;
  color: #0075cd;
  text-transform: uppercase;
}
/* line 103, ../sass/skin/_tabs.scss */
.tabs-container li.active-tab a {
  background-color: #fff;
  border: 1px solid #e2e2e2;
  border-bottom: 0;
}
/* line 108, ../sass/skin/_tabs.scss */
.dashboard-tabs .tabs-container li.active-tab a {
  color: #fff;
  border-color: #0075cd;
  background-color: #0075cd;
  border-bottom: 1px solid #0075cd;
}
/* line 117, ../sass/skin/_tabs.scss */
.tabs-container .tabs-content {
  padding: 1.25rem 1.25rem 6.25rem 1.25rem;
  background-color: #fff;
  border: 1px solid #e2e2e2;
}
/* line 122, ../sass/skin/_tabs.scss */
.dashboard-tabs .tabs-container .tabs-content {
  padding: 0;
  border: 0;
}

/* line 134, ../sass/skin/_tabs.scss */
.course-filters__tabs li + li,
.dashboard__tabs li + li {
  margin-left: -1px;
}

/* line 141, ../sass/skin/_tabs.scss */
.tab-content--container {
  margin-bottom: 50px;
}

/* line 145, ../sass/skin/_tabs.scss */
.tab-button {
  padding: 15px;
  border: 1px solid #e2e2e2;
  border-radius: 5px 5px 0 0;
  position: relative;
  z-index: 5;
}
/* line 152, ../sass/skin/_tabs.scss */
.tab-button:hover {
  cursor: pointer;
}
/* line 156, ../sass/skin/_tabs.scss */
.tab-button.active-tab {
  border-bottom: 1px solid #fff;
  color: #0075cd;
  font-weight: 400;
}
/* line 162, ../sass/skin/_tabs.scss */
.dashboard__tabs .tab-button {
  width: 50%;
  text-align: center;
  border-color: #0075cd;
  color: #0075cd;
}
/* line 168, ../sass/skin/_tabs.scss */
.dashboard__tabs .tab-button.active-tab {
  background-color: #0075cd;
  color: #fff;
}

/* line 175, ../sass/skin/_tabs.scss */
.tab-content {
  display: none;
}
/* line 178, ../sass/skin/_tabs.scss */
.tab-content.active-tab-content {
  display: block;
}

/*doc
---
title: Modal Popup
name: Modal Popup
category: Skin - Popup
---


```html_example

<div class="style-guide-content">
	
	<div class="site-wide">
		
		<div class="row">

			<div class="grid-item desk-w-9-12">

				<a class="js-popup js-popup-forgotten-pwd fancybox fancybox.iframe btn btn--inline" href="../iframe.html">Iframe example</a>
				
				<h2 class="primary-color module-spacing">Forgotten your password?</h2>

				<form action="#" class="form-default">

					<label for="default-text-1">Enter your email address:</label>

					<div class="inline-input-wrapper">
						<div class="input-container desk-block-format-right">
							<button type="submit" class="btn btn--primary">Reset Password</button>
						</div>

						<div class="input-container desk-block-format-fluid">
							<input id="default-text-1" type="text"> 
						</div>
					</div>

				</form>

			</div>
		
		</div>

	</div><!-- site wide -->

</div>

```
*/
/*doc
---
title: Course details
name: Course details
category: Skin - Course
---


```html_example

<div class="style-guide-content">

	<div class="site-wide">

		<h1 class="primary-color">Understanding MRSA</h1>

		<div class="row">

			<div class="grid-item desk-w-8-12">
				<img src="http://placehold.it/350x150?text=Image" class="img--stretch" />
			</div>

			<div class="grid-item desk-w-4-12">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur ullam aliquid, numquam sed quidem veniam modi vitae, eligendi architecto ut!</p>

				<p class="likeh1 primary-color">&pound;999.99</p>

				<a href="#" class="btn btn--primary">Get Started</a>

			</div>

		</div>

	</div><!-- site wide -->

</div>

```
*/
/* line 47, ../sass/skin/_courses-details.scss */
.course-listing-wrapper hr:last-child {
  display: none;
}
@media all and (min-width: 37.8125em) {
  /* line 52, ../sass/skin/_courses-details.scss */
  .course-listing-wrapper .wysiwyg {
    padding-right: 4.0625rem;
  }
}

/* line 59, ../sass/skin/_courses-details.scss */
.checkbox-filter--container {
  display: none;
}
@media all and (min-width: 37.8125em) {
  /* line 59, ../sass/skin/_courses-details.scss */
  .checkbox-filter--container {
    display: block;
  }
}

/* line 68, ../sass/skin/_courses-details.scss */
.course-listing {
  padding: 30px 0;
}

/* line 72, ../sass/skin/_courses-details.scss */
.course-listing__inner {
  border: 1px solid #e2e2e2;
}
/* line 75, ../sass/skin/_courses-details.scss */
.course-listing__inner a {
  text-decoration: none;
}

/* line 80, ../sass/skin/_courses-details.scss */
.course-content {
  padding: 20px;
}
/* line 83, ../sass/skin/_courses-details.scss */
.course-content h3 {
  color: #0075cd;
}

/* line 88, ../sass/skin/_courses-details.scss */
.testimonial {
  padding: 40px 35px;
  position: relative;
}
@media all and (min-width: 37.8125em) {
  /* line 88, ../sass/skin/_courses-details.scss */
  .testimonial {
    padding: 40px 70px;
  }
}
/* line 96, ../sass/skin/_courses-details.scss */
.testimonial::before {
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 1px;
  background-color: #e2e2e2;
}
/* line 107, ../sass/skin/_courses-details.scss */
.testimonial:first-child {
  padding: 0 35px 40px;
}
@media all and (min-width: 37.8125em) {
  /* line 107, ../sass/skin/_courses-details.scss */
  .testimonial:first-child {
    padding: 0 70px 40px;
  }
}
/* line 114, ../sass/skin/_courses-details.scss */
.testimonial:first-child::before {
  display: none;
}
/* line 119, ../sass/skin/_courses-details.scss */
.testimonial .stars {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  text-align: center;
}
/* line 126, ../sass/skin/_courses-details.scss */
.testimonial .stars.one-star .star:nth-child(-n+1) {
  background-image: url('../images/icon-star-gold.svg?1571839944');
}
/* line 132, ../sass/skin/_courses-details.scss */
.testimonial .stars.two-star .star:nth-child(-n+2) {
  background-image: url('../images/icon-star-gold.svg?1571839944');
}
/* line 138, ../sass/skin/_courses-details.scss */
.testimonial .stars.three-star .star:nth-child(-n+3) {
  background-image: url('../images/icon-star-gold.svg?1571839944');
}
/* line 144, ../sass/skin/_courses-details.scss */
.testimonial .stars.four-star .star:nth-child(-n+4) {
  background-image: url('../images/icon-star-gold.svg?1571839944');
}
/* line 150, ../sass/skin/_courses-details.scss */
.testimonial .stars.five-star .star:nth-child(-n+5) {
  background-image: url('../images/icon-star-gold.svg?1571839944');
}
/* line 156, ../sass/skin/_courses-details.scss */
.testimonial .star {
  height: 21px;
  width: 21px;
  background-image: url('../images/icon-star.svg?1571839944');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: inline-block;
  margin-right: 5px;
  padding: 0;
}
/* line 168, ../sass/skin/_courses-details.scss */
.testimonial .quote {
  position: relative;
}
/* line 171, ../sass/skin/_courses-details.scss */
.testimonial .quote::before, .testimonial .quote::after {
  content: "";
  height: 19px;
  width: 22px;
  position: absolute;
  background-image: url('../images/icon-quote.svg?1571839943');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* line 184, ../sass/skin/_courses-details.scss */
.testimonial .quote::before {
  left: -30px;
  top: 0;
}
/* line 189, ../sass/skin/_courses-details.scss */
.testimonial .quote::after {
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
  right: -30px;
  bottom: 0;
}
/* line 197, ../sass/skin/_courses-details.scss */
.testimonial p {
  font-size: 18px;
  text-align: center;
}

/* line 5, ../sass/skin/_course-filters.scss */
.course-filters-container {
  margin-bottom: 1.875rem;
  font-weight: 300;
  position: relative;
}
/* line 8, ../sass/framework/core/styles/_clearfix.scss */
.course-filters-container:after {
  content: " ";
  display: table;
  clear: both;
}
/* line 11, ../sass/skin/_course-filters.scss */
.course-filters-container::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  width: 100%;
  bottom: 0;
  background-color: #e2e2e2;
  z-index: 0;
}

/* line 24, ../sass/skin/_course-filters.scss */
.course-filters__title {
  margin-right: 1.25rem;
  font-size: 1.125rem;
  color: #0075cd;
}
@media all and (min-width: 37.8125em) {
  /* line 24, ../sass/skin/_course-filters.scss */
  .course-filters__title {
    float: left;
  }
}

/* line 34, ../sass/skin/_course-filters.scss */
.checkbox-filter {
  display: block;
  margin-right: 10px;
  margin-bottom: 10px;
}
@media all and (min-width: 37.8125em) {
  /* line 34, ../sass/skin/_course-filters.scss */
  .checkbox-filter {
    display: inline-block;
  }
}

/* line 44, ../sass/skin/_course-filters.scss */
.course-filters__list {
  top: -0.5625rem;
  position: relative;
  list-style: none;
  padding: 30px 0;
  border-bottom: 1px solid #e2e2e2;
  overflow: hidden;
  display: block;
}
/* line 53, ../sass/skin/_course-filters.scss */
.course-filters__list li {
  padding-top: 0.625rem;
}
@media all and (min-width: 37.8125em) {
  /* line 53, ../sass/skin/_course-filters.scss */
  .course-filters__list li {
    width: 33.33%;
  }
}
/* line 61, ../sass/skin/_course-filters.scss */
.course-filters__list .checker {
  display: inline-block;
  vertical-align: middle;
}
/* line 69, ../sass/skin/_course-filters.scss */
.course-filters__list input[type=checkbox]:checked + label {
  color: #fff;
  background-color: #0075cd;
}
/* line 73, ../sass/skin/_course-filters.scss */
.course-filters__list input[type=checkbox]:checked + label::after {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
  visibility: visible;
}
/* line 80, ../sass/skin/_course-filters.scss */
.course-filters__list label {
  background-color: #e2e2e2;
  color: #0075cd;
  display: block;
  width: 100%;
  vertical-align: middle;
  padding: 10px 30px;
  border-radius: 5px;
  position: relative;
  text-align: left;
}
@media all and (min-width: 37.8125em) {
  /* line 80, ../sass/skin/_course-filters.scss */
  .course-filters__list label {
    width: auto;
    display: inline-block;
    text-align: center;
  }
}
/* line 97, ../sass/skin/_course-filters.scss */
.course-filters__list label::after {
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  content: "";
  position: absolute;
  height: 12px;
  width: 15px;
  top: 50%;
  right: 10px;
  background-image: url('../images/icons/icon-tick-white.png?1536136271');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  visibility: hidden;
}

/* line 116, ../sass/skin/_course-filters.scss */
.sector-filter select {
  color: #0075cd;
}

/* line 7, ../sass/skin/_sticky-content.scss */
.sticky-content.-is-active {
  position: fixed;
}

/* line 6, ../sass/skin/_carousel.scss */
.carousel-learn {
  margin: 30px 60px 0;
}
@media all and (min-width: 37.8125em) {
  /* line 6, ../sass/skin/_carousel.scss */
  .carousel-learn {
    margin: 30px 0 0;
  }
}

/* line 14, ../sass/skin/_carousel.scss */
.carousel-outer {
  border-top: 1px solid #e2e2e2;
  border-bottom: 1px solid #e2e2e2;
  padding: 80px 0;
}

/* line 20, ../sass/skin/_carousel.scss */
.carousel--inner {
  padding: 0 20px;
}
/* line 23, ../sass/skin/_carousel.scss */
.carousel--inner img {
  margin: 0 auto;
  border-radius: 50%;
  margin-bottom: 20px;
  max-width: 140px;
}
/* line 30, ../sass/skin/_carousel.scss */
.carousel--inner h3 {
  font-size: 22px;
}

/*doc
---
title: Module Question
name: Module Question
category: Module - Question
---


```html_example

<div class="style-guide-content">
	
	<div class="site-wide">
		
		<div class="row">

			<div class="grid-item desk-w-9-12">

				<div class="question">

					<div class="question__header">
						<h1 class="primary-color">Microbiology</h1>
						<p class="likeh4 primary-color">Question 2/10</p>
					</div>

					<div class="question__query">
						<p class="likeh3 secondary-color">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
					</div>

					<div class="question__answer">
						<form action="#" class="">
							<div class="js-equal-heights-row row grid--gutter-10">

								<div class="grid-item desk-w-1-3">
									<div class="input-container form--elements-stack">
										<div class="checkbox">
											<input id="horizontal-checkbox-1" class="" type="checkbox">
											<label for="horizontal-checkbox-1"><span class="js-equal-heights-row-padding">This is a label for a checkbox input</span></label>
										</div>
									</div>
								</div><!-- end grid-item -->

								<div class="grid-item desk-w-1-3">
									<div class="input-container form--elements-stack">
										<div class="checkbox">
											<input id="horizontal-checkbox-2" type="checkbox">
											<label for="horizontal-checkbox-2"><span class="js-equal-heights-row-padding">This is a label for a checkbox input</span></label>
										</div>
									</div>
								</div><!-- end grid-item -->

								<div class="grid-item desk-w-1-3">
									<div class="input-container form--elements-stack">
										<div class="checkbox">
											<input id="horizontal-checkbox-3" type="checkbox">
											<label for="horizontal-checkbox-3"><span class="js-equal-heights-row-padding">This is a label for a checkbox input</span></label>
										</div>
									</div>
								</div><!-- end grid-item -->

							</div><!-- end row -->

							<!-- <div class="input-container">
								<button type="submit">Submit form</button>
							</div> -->
						</form>	
					</div>

				</div>
			</div>
		
		</div>

		<div class="row">

			<div class="grid-item desk-w-9-12">

				<div class="question">

					<div class="question__header question__header--end">
						<h1 class="primary-color">Well Done!</h1>
						<p class="likeh4 primary-color">You answered all 25 questions correctly!</p>
					</div>

					<div class="question__update-message">
						<p class="likeh3 secondary-color">Your results have been saved to your profile, click continue to progress onto the next module</p>
					</div>

					<div class="text--center">
						<button class="btn btn--primary-arrow">Continue</button>
					</div>
				</div>
			</div>
		
		</div>

	</div><!-- site wide -->

</div>

```
*/
/* line 110, ../sass/skin/_module-question.scss */
.question__header {
  margin-bottom: 3.75rem;
}
/* line 113, ../sass/skin/_module-question.scss */
.question__header h1, .question__header p {
  text-align: center;
}
/* line 117, ../sass/skin/_module-question.scss */
.question__header--end {
  margin-bottom: 1.25rem;
}
/* line 122, ../sass/skin/_module-question.scss */
.question__query {
  text-align: center;
}
/* line 125, ../sass/skin/_module-question.scss */
.question__query p {
  margin-bottom: 1.875rem;
}
/* line 131, ../sass/skin/_module-question.scss */
.question .input-container {
  position: relative;
}
/* line 136, ../sass/skin/_module-question.scss */
.question__answer label {
  border-radius: 4px;
  padding: 3.75rem 1.25rem 1.25rem 1.25rem;
  background-color: #edf5fb;
  width: 100%;
  top: 0;
  left: 0;
  text-align: center;
  cursor: pointer;
}
/* line 148, ../sass/skin/_module-question.scss */
.question__answer input[type=checkbox], .question__answer input[type=radio] {
  top: 1.875rem;
  display: block;
  margin: 0 auto;
  z-index: 10;
  position: relative;
}
/* line 156, ../sass/skin/_module-question.scss */
.question__answer input[type=checkbox]:checked + label, .question__answer input[type=radio]:checked + label {
  color: #fff;
  font-style: normal;
  background-color: #0075cd;
}
/* line 163, ../sass/skin/_module-question.scss */
.question .checkbox {
  position: relative;
}
/* line 168, ../sass/skin/_module-question.scss */
.question .checkbox span {
  display: block;
  margin: 0 auto;
}
/* line 174, ../sass/skin/_module-question.scss */
.question__update-message {
  text-align: center;
}

/*doc
---
title: Checkout
name: Checkout
category: Module - Checkout
---


```html_example

<div class="style-guide-content">

	<div class="checkout-process mob-mb-30 desk-mb-40">
		<ul class="checkout-process__steps clearfix">
		
			<li>
				<a class="current-step" href="">Your details</a>
			</li>
			<li>
				<a href="">Trainers</a>
			</li>
			<li>
				<a href="">Course Configuration</a>
			</li>
			<li>
				<a href="">Pay</a>
			</li>
			<li>
				<a href="">Confirmation</a>
			</li>
		
		</ul>
	</div>

	<div class="checkout-training-details">
		<p><i class=""></i>Your training is confirmed</p>	
	</div>

	<div class="checkout-training-details">
		<p><i class=""></i>Your training is confirmed</p>	
	</div>
			
	<div class="checkout-message">
		<p>Before clicking submit please confirm that the details opposite are correct and all your training requirements are met</p>
	</div>

</div>


```
*/
/* line 79, ../sass/skin/_module-checkout.scss */
.checkout-process__steps {
  padding-bottom: 0.625rem;
  border-bottom: 1px solid #c3c3c3;
}
@media all and (max-width: 37.8025em) {
  /* line 79, ../sass/skin/_module-checkout.scss */
  .checkout-process__steps {
    margin-left: -1.875rem;
    padding-left: 0.625rem;
  }
}
/* line 89, ../sass/skin/_module-checkout.scss */
.checkout-process__steps li {
  margin-left: 1.25rem;
}
@media all and (min-width: 38.4375em) {
  /* line 89, ../sass/skin/_module-checkout.scss */
  .checkout-process__steps li {
    margin-left: 0;
    float: left;
  }
}
@media all and (min-width: 38.4375em) {
  /* line 97, ../sass/skin/_module-checkout.scss */
  .checkout-process__steps li + li {
    margin-left: 2.5rem;
  }
}
/* line 104, ../sass/skin/_module-checkout.scss */
.checkout-process__steps a {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #c3c3c3;
  text-decoration: none;
}
/* line 109, ../sass/skin/_module-checkout.scss */
.checkout-process__steps a.active-process {
  color: #555;
  font-weight: bold;
  position: relative;
}
/* line 58, ../sass/skin/_module-checkout.scss */
.checkout-process__steps a.active-process:before {
  height: 0;
  width: 0;
  border-left: 9px solid #c3c3c3;
  border-bottom: 6px solid transparent;
  border-top: 6px solid transparent;
  left: -1.25rem;
  margin-top: -0.4375rem;
  content: "";
  position: absolute;
  top: 50%;
}
@media all and (min-width: 38.4375em) {
  /* line 58, ../sass/skin/_module-checkout.scss */
  .checkout-process__steps a.active-process:before {
    height: 0;
    width: 0;
    border-top: 9px solid #c3c3c3;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    margin-left: -0.3125rem;
    bottom: -1.625rem;
    border-top-width: 7px;
    left: 50%;
    top: auto;
    margin-top: auto;
  }
}

/* line 118, ../sass/skin/_module-checkout.scss */
.checkout-training-details {
  margin-bottom: 1.25rem;
}
/* line 127, ../sass/skin/_module-checkout.scss */
.checkout-training-details i {
  display: inline-block;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  margin-right: 0.625rem;
}
/* line 133, ../sass/skin/_module-checkout.scss */
.checkout-training-details a {
  color: #0075cd;
}

/* line 138, ../sass/skin/_module-checkout.scss */
.checkout-message {
  margin-top: 3.125rem;
  margin-bottom: 1.875rem;
  padding: 1.5625rem;
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
}
/* line 145, ../sass/skin/_module-checkout.scss */
.checkout-message p {
  text-align: center;
  font-weight: bold;
  margin-bottom: 0;
}

/* line 161, ../sass/skin/_module-checkout.scss */
.course-config-remove {
  margin-bottom: 1.5625rem;
  float: right;
}
@media all and (min-width: 37.8125em) {
  /* line 161, ../sass/skin/_module-checkout.scss */
  .course-config-remove {
    top: 1.5625rem;
    right: 1.875rem;
    position: absolute;
    float: none;
    margin-bottom: 0;
  }
}

/* line 174, ../sass/skin/_module-checkout.scss */
.course-config__footer {
  margin-left: -1.875rem;
  margin-right: -1.875rem;
  padding-left: 1.875rem;
  padding-right: 1.875rem;
  padding-top: 0.9375rem;
  padding-bottom: 0.9375rem;
  display: block;
  clear: both;
  background-color: #efefef;
}
@media all and (min-width: 37.8125em) {
  /* line 174, ../sass/skin/_module-checkout.scss */
  .course-config__footer {
    margin-bottom: -1.875rem;
  }
  /* line 188, ../sass/skin/_module-checkout.scss */
  .course-config__footer input[type="text"] {
    width: 9.375rem;
    margin-bottom: 0;
  }
  /* line 193, ../sass/skin/_module-checkout.scss */
  .course-config__footer .input-container {
    padding-left: 2.375rem;
    display: inline-block;
  }
}
/* line 200, ../sass/skin/_module-checkout.scss */
.course-config__footer a {
  font-size: 0.875rem;
  float: left;
}
@media all and (min-width: 37.8125em) {
  /* line 200, ../sass/skin/_module-checkout.scss */
  .course-config__footer a {
    margin-left: 0.9375rem;
    float: none;
  }
}
/* line 210, ../sass/skin/_module-checkout.scss */
.course-config__footer .pounds {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  float: right;
}
@media all and (min-width: 37.8125em) {
  /* line 210, ../sass/skin/_module-checkout.scss */
  .course-config__footer .pounds {
    margin-top: 0.5rem;
  }
}

/*doc
---
title: Attend
name: Attend
category: Module - Attend
---


```html_example

<div class="style-guide-content">

	<div class="site-wide">
		
		<ul class="attend-module">
	        <li>
	            <div class="attend-module__item">
	            	<div class="attend-module__nb">1</div>
	                <div class="attend-module__trainee-name">
		                <div class="attend-module__header">Module 1</div>
		                <div class="attend-module__sub-header"><p>Microbiology</p></div>
		            </div>
		            <div class="attend-module__trainee-email">
		                <div class="attend-module__header">Email</div>
		                <div class="attend-module__sub-header"><a href="mailto:jane.appleseed@somewhere.com">jane.appleseed@somewhere.com</a></div>
		            </div>
		            <div class="attend-module__link">
		                <a href="#">I will not be attending training myself</a>
		            </div>
	            </div>
	        </li>
	        <li>
	            <div class="attend-module__item">
	            	<div class="attend-module__nb">2</div>
	                <div class="attend-module__trainee-name">
		                <div class="attend-module__header">Module 1</div>
		                <div class="attend-module__sub-header"><p>Microbiology</p></div>
		            </div>
		            <div class="attend-module__trainee-email">
		                <div class="attend-module__header">Email</div>
		                <div class="attend-module__sub-header"><a href="mailto:jane.appleseed@somewhere.com">jane.appleseed@somewhere.com</a></div>
		            </div>
		            <div class="attend-module__link">
						<button type="button" class="btn js-btn-delete btn-delete"></button>
		            </div>
	            </div>
	        </li>
	        <li>
	            <div class="attend-module__item">
	            	<div class="attend-module__nb">3</div>
	                <div class="attend-module__trainee-name">
		                <div class="attend-module__header">Module 1</div>
		                <div class="attend-module__sub-header"><p>Microbiology</p></div>
		            </div>
		            <div class="attend-module__trainee-email">
		                <div class="attend-module__header">Email</div>
		                <div class="attend-module__sub-header"><a href="mailto:jane.appleseed@somewhere.com">jane.appleseed@somewhere.com</a></div>
		            </div>
		            <div class="attend-module__link">
		                <button type="button" class="btn js-btn-delete btn-delete"></button>
		            </div>
	            </div>
	        </li>
	    </ul>

	</div>

</div>


```
*/
/* line 79, ../sass/skin/_module-attend.scss */
.attend-module {
  position: relative;
}
/* line 83, ../sass/skin/_module-attend.scss */
.attend-module li {
  margin-bottom: 0.125rem;
  padding: 0.9375rem 1.25rem;
  display: inline-block;
  vertical-align: top;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  background-color: #efefef;
  width: 100%;
  position: relative;
  border-radius: 8px;
}
/* line 93, ../sass/skin/_module-attend.scss */
.attend-module__item {
  display: table;
  width: 100%;
}
/* line 103, ../sass/skin/_module-attend.scss */
.attend-module__sub-header p, .attend-module__sub-header a, .attend-module__link p, .attend-module__link a {
  color: #555;
  font-weight: bold;
  text-decoration: none;
  margin-bottom: 0;
}
/* line 112, ../sass/skin/_module-attend.scss */
.attend-module__nb {
  font-size: 1.5rem;
  line-height: 0.91667;
  vertical-align: top;
  color: #555;
  display: table-cell;
  width: 30px;
  font-weight: bold;
}
@media all and (min-width: 37.8125em) {
  /* line 112, ../sass/skin/_module-attend.scss */
  .attend-module__nb {
    vertical-align: middle;
  }
}
/* line 125, ../sass/skin/_module-attend.scss */
.attend-module__trainee-name {
  display: inline-block;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  margin-bottom: 0.625rem;
  width: 100%;
}
@media all and (min-width: 37.8125em) {
  /* line 125, ../sass/skin/_module-attend.scss */
  .attend-module__trainee-name {
    min-width: 10.625rem;
    width: auto;
    margin-bottom: 0;
  }
}
/* line 137, ../sass/skin/_module-attend.scss */
.attend-module__trainee-email {
  display: inline-block;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  width: 100%;
}
@media all and (min-width: 37.8125em) {
  /* line 137, ../sass/skin/_module-attend.scss */
  .attend-module__trainee-email {
    min-width: 15rem;
    width: auto;
  }
}
/* line 147, ../sass/skin/_module-attend.scss */
.attend-module__link {
  position: absolute;
  right: 15px;
  top: 15px;
}
@media all and (min-width: 37.8125em) {
  /* line 147, ../sass/skin/_module-attend.scss */
  .attend-module__link {
    max-width: 11.875rem;
    position: relative;
    display: table-cell;
    text-align: right;
    vertical-align: middle;
    width: auto;
    right: auto;
    top: auto;
  }
}
/* line 163, ../sass/skin/_module-attend.scss */
.attend-module__link a {
  vertical-align: top;
}
/* line 168, ../sass/skin/_module-attend.scss */
.attend-module .btn-delete {
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  padding: 0;
}

/*doc
---
title: Answer Module
name: Answer Module
category: Module - Answer
---


```html_example

<div class="style-guide-content">
	
	<div class="site-wide">
		
		<div class="js-accordion-container accordion-container">
			<div class="js-accordion-item accordion-item ">
				<button type="button" class="js-accordion-button accordion-button accordion-title">HIV Stands for:</button>
				<div class="js-accordion-content accordion-content">
					<div class="accordion-inner">
						HELLO WORLD
					</div>
				</div>
			</div>
			<div class="js-accordion-item accordion-item ">
				<button type="button" class="js-accordion-button accordion-button accordion-title">The agent that causes Creutzfeltd-Jakob isease (CJD) is:</button>
				<div class="js-accordion-content accordion-content">
					<div class="accordion-inner">
						<div class="is-answer-correct"><span>Is correct?</span></div>
						<div class="answer-module">
							<form action="#" class="form-default form--horizontal-answer">
								
								<div class="answer-module__item">
									<div class="answer-module__title">
										<div class="input-container form--elements-stack">
											<label for="answer-1">Answer 1</label>
											<div class="answer-text-wrapper">
												<input id="answer-1" type="text">
											</div>
											<div class="answer-checkbox-wrapper">
												<input type="checkbox" class="js-checkbox">
											</div>
										</div>
									</div>
								</div>

							</form>
						</div>
						<div class="add-answer"><a href="#">+Add Answer</a></div>
					</div>
				</div>
			</div>
		</div>

	</div>

</div>


```
*/
/* line 69, ../sass/skin/_module-answer.scss */
.answer-module label {
  margin-right: 1.25rem;
}
/* line 76, ../sass/skin/_module-answer.scss */
.answer-module__title .input-container {
  display: table;
  width: 100%;
  max-width: 100%;
}
/* line 83, ../sass/skin/_module-answer.scss */
.answer-module__item {
  padding: 0.625rem 1.25rem;
  margin-bottom: 0.625rem;
  background-color: #edf5fb;
}
/* line 95, ../sass/skin/_module-answer.scss */
.answer-module .answer-text-wrapper {
  display: inline-block;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  min-width: 80%;
}
/* line 104, ../sass/skin/_module-answer.scss */
.answer-module .answer-checkbox-wrapper {
  display: table-cell;
}

/* line 113, ../sass/skin/_module-answer.scss */
.is-answer-correct, .add-answer {
  margin-bottom: 0.9375rem;
  width: 100%;
  text-align: right;
}
/* line 118, ../sass/skin/_module-answer.scss */
.is-answer-correct span, .is-answer-correct a, .add-answer span, .add-answer a {
  display: inline-block;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
}

/* line 125, ../sass/skin/_module-answer.scss */
.is-answer-correct {
  padding-right: 2.5rem;
}

/* line 129, ../sass/skin/_module-answer.scss */
.add-answer {
  padding-right: 1.875rem;
  margin-bottom: 0;
}

/* line 135, ../sass/skin/_module-answer.scss */
.review-questions .question-container {
  margin-bottom: 20px;
}

/* line 141, ../sass/skin/_module-answer.scss */
.review-answers .incorrect {
  background-color: #d6000f;
  padding: 80px 30px 30px;
  background-image: url('../images/icon-cross.svg?1571839944');
  background-position: center 20px;
  background-repeat: no-repeat;
  background-size: 50px;
  border-radius: 4px;
  color: #fff;
}
/* line 152, ../sass/skin/_module-answer.scss */
.review-answers .correct {
  background-color: #74c13c;
  padding: 80px 30px 30px;
  background-image: url('../images/icon-tick.svg?1571839944');
  background-position: center 10px;
  background-repeat: no-repeat;
  background-size: 80px;
  border-radius: 4px;
  color: #000;
}

/*doc
---
title: Module Appointments
name: Module Appointments
category: Module - Appointments
---


```html_example

<div class="style-guide-content">
	
	<div class="site-wide">

		<div class="" style="background: #0075cb; padding: 20px;">
			<div class="row">
				<div class="grid-item desk-w-3-12 secondary-col">
					<div class="sidebar--padding">

						<!-- module-appointments -->
						<div class="module-appointments">
							<div class="module-appointments__header">
								<div class="module-appointments__header--date">
									<span class="appointment-day">15</span>
									<span class="appointment-mt-y">december 2014</span>
								</div>
								<div class="module-appointments__details">
									<p>Your next training appointments</p>
								</div>
							</div>
						</div>
						<!-- module-appointments -->

					</div>
				</div><!-- end grid-item -->
			</div><!-- end row -->
		</div>

	</div><!-- site wide -->

</div>

```
*/
/* line 51, ../sass/skin/_module-appointments.scss */
.module-appointments .appointment-day, .module-appointments .appointment-mt-y {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* line 59, ../sass/skin/_module-appointments.scss */
.module-appointments .appointment-day {
  line-height: 0.61111;
  margin-bottom: 0.625rem;
  display: block;
}

/*doc
---
title: Module Analytics
name: Module Analytics
category: Module - Analytics
---


```html_example

<div class="style-guide-content">

	<div class="site-wide">

		<div class="" style="background: #0075cb; padding: 20px;">
			<div class="row">
				<div class="grid-item desk-w-3-12 secondary-col">
					<div class="sidebar--padding">

						<!-- module appointments -->
						<div class="module-appointments">
							<div class="module-appointments__header">
								<div class="module-appointments__header--date">
									<span class="appointment-day">15</span>
									<span class="appointment-mt-y">december 2014</span>
								</div>
								<div class="module-appointments__details">
									<p>Your next training appointments</p>
								</div>
							</div>
						</div>
						<!-- module appointments -->

					</div>
				</div><!-- end grid-item -->

				<div class="grid-item desk-w-3-12 secondary-col">
					<div class="sidebar--padding">

						<!-- module appointments -->
						<div class="module-analytics">
							<div class="module-analytics__header">
								<span class="module-analytics__header--title">Analytics</span>
							</div>
							<div class="module-analytics__content">
								<span class="module-analytics__sub-header">Current Trainees</span>
								<div class="module-analytics__item">
									<div><span class="current-trainees">24</span></div>
									<p>Cross Infecton Control</p>
								</div>
								<div class="module-analytics__item">
									<div><span class="current-trainees">45</span></div>
									<p>Understanding MRSA</p>
								</div>
							</div>

							<div class="module-analytics__content">
								<span class="module-analytics__sub-header">Pass Rates</span>
								<div class="module-analytics__item">
									<div><span class="pass-rates">67%</span></div>
									<p>Cross Infecton Control</p>
								</div>
								<div class="module-analytics__item">
									<div><span class="pass-rates">98%</span></div>
									<p>Understanding MRSA</p>
								</div>
							</div>
						</div>
						<!-- module appointments -->

					</div>
					<a href="#" class="btn-view-more">View More</a>
				</div><!-- end grid-item -->

			</div><!-- end row -->
		</div>

	</div><!-- site wide -->

</div>

```
*/
/* line 90, ../sass/skin/_module-analytics.scss */
.module-analytics__header--title, .module-analytics__sub-header {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* line 96, ../sass/skin/_module-analytics.scss */
.current-trainees, .pass-rates {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #0075cd;
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  color: #fff;
  border-radius: 50%;
}

/* line 120, ../sass/skin/_module-analytics.scss */
.module-analytics__item {
  margin-top: 1.875rem;
  padding: 1.5625rem 0.625rem 0.625rem;
  border-radius: 4px;
  border: 1px solid #0075cd;
  text-align: center;
  position: relative;
}
/* line 128, ../sass/skin/_module-analytics.scss */
.module-analytics__item div {
  margin-top: -2.8125rem;
  position: absolute;
  width: 100%;
  left: 0;
}
/* line 141, ../sass/skin/_module-analytics.scss */
.module-analytics__content + div {
  margin-top: 1.5625rem;
}

/* line 147, ../sass/skin/_module-analytics.scss */
.current-trainees--square, .pass-rates--square {
  line-height: 1;
  border-radius: 3px;
}

/* line 152, ../sass/skin/_module-analytics.scss */
.current-trainees {
  padding: 0.5rem;
  line-height: 1.13636;
}

/* line 163, ../sass/skin/_module-analytics.scss */
.pass-rates {
  padding: 0.375rem;
  line-height: 2;
}

/* line 176, ../sass/skin/_module-analytics.scss */
.module-appointments .appointment-day {
  line-height: 0.61111;
}

/*doc
---
title: Module Certificates
name: Module Certificates
category: Module - Certificates
---


```html_example

<div class="style-guide-content">

	<div class="site-wide">

		<div class="module-certificates">
			<div class="module-certificates__header">
				<h1>Your Certificates</h1>
			</div>
			<div class="module-certificates__content">
				<div class="module-certificates__item">
					<i></i>
					<div class="certificate-details">
						<div class="certificate-name">
							<p class="likeh2">Cross Infection Control</p>
							<span>Acheived on 25/10/14</span>
						</div>
						<div class="certificate-links">
							<a href="#" class="btn--inline">Download PDF</a>
							<a href="#" class="btn--inline">Request Print</a>
						</div>
					</div>
				</div>
				<div class="module-certificates__item">
					<i></i>
					<div class="certificate-details">
						<div class="certificate-name">
							<p class="likeh2">Cross Infection Control</p>
							<span>Acheived on 25/10/14</span>
						</div>
						<div class="certificate-links">
							<a href="#" class="btn--inline">Download PDF</a>
							<a href="#" class="btn--inline">Request Print</a>
						</div>
					</div>
				</div>
			</div>
		</div>

	</div><!-- site wide -->

</div>

```
*/
/* line 61, ../sass/skin/_module-certificates.scss */
.module-certificates {
  margin-bottom: 1.875rem;
}
@media all and (min-width: 37.8125em) {
  /* line 61, ../sass/skin/_module-certificates.scss */
  .module-certificates {
    margin-bottom: 3.75rem;
  }
}
/* line 72, ../sass/skin/_module-certificates.scss */
.module-certificates__header h2 {
  line-height: 1.36364;
}
/* line 77, ../sass/skin/_module-certificates.scss */
.module-certificates__details {
  margin-bottom: 1.875rem;
}
/* line 81, ../sass/skin/_module-certificates.scss */
.module-certificates__details p {
  margin-bottom: 0;
}
/* line 86, ../sass/skin/_module-certificates.scss */
.module-certificates .certificate-name {
  display: inline-block;
  vertical-align: top;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
}
/* line 99, ../sass/skin/_module-certificates.scss */
.module-certificates .certificate-links {
  display: inline-block;
  vertical-align: top;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  float: right;
}
/* line 103, ../sass/skin/_module-certificates.scss */
.module-certificates .certificate-links a {
  margin-bottom: 0.625rem;
  display: block;
}

/* line 5, ../sass/skin/_module-file-manager.scss */
.list-file-manager__image-container {
  margin-right: 1.25rem;
  max-width: 50%;
}

/* line 10, ../sass/skin/_module-file-manager.scss */
.list-folder-manager__inner {
  text-align: center;
}

/* line 15, ../sass/skin/_module-file-manager.scss */
.list-folder-manager__link:before {
  content: "";
  display: block;
  margin: 0 auto 20px;
}

/*doc
---
title: Module Completed
name: Module Completed
category: Module - Completed
---

```html_example


<h2 class="primary-color mb-30">Infection Control Dental Team Training</h2>

<div class="mb-40">

	<div class="panel panel--border panel--radius panel--no-padding-bottom white-area">

		<h3 class="likeh2 primary-color mb-10 has-percentage-right">Infection Control Dental Team Training</h3>
		
		<div class="mob-mb-20 desk-mb-30">
			<p class="flush-mb text--italic text--small">Order Number: <span class="text--bold">24618290</span></p>
			<p class="flush-mb text--italic text--small">Order Number: <span class="text--bold">24618290</span></p>
		</div>

		<div class="mob-mb-20 desk-mb-25">
			<a class="btn btn--inline" href="#">Download Certificate</a>
		</div>

		<div class="percentage percentage--score">
			<div class="percentage__content">
				<div class="percentage__text">Score</div>
				<div class="percentage__value">74<span>%</span></div>
			</div>
		</div>

	</div>

</div>


<div class="panel panel--border panel--radius panel--no-padding-bottom white-area">

	<h3 class="likeh2 primary-color mb-10 has-percentage-right">Infection Control Dental Team Training</h3>
	
	<div class="mob-mb-20 desk-mb-30">
		<p class="flush-mb text--italic text--small">Order Number: <span class="text--bold">24618290</span></p>
		<p class="flush-mb text--italic text--small">Order Number: <span class="text--bold">24618290</span></p>
	</div>

	<div class="mob-mb-20 desk-mb-25">
		<a class="btn btn--inline" href="#">Download Certificate</a>
	</div>

	<div class="percentage percentage--score">
		<div class="percentage__content">
			<div class="percentage__text">Score</div>
			<div class="percentage__value">74<span>%</span></div>
		</div>
	</div>

</div>

<div class="panel--md panel--bg-light panel--border panel--radius is-sub-panel">
	<div class="row">
		
		<div class="grid-item desk-w-4-9">
			<p class="">Trainee List</p>
			<p class="false-heading">Dental Assistants Training</p>
		</div>

		<div class="grid-item desk-w-3-9">
			<p class="">Number of Trainees</p>
			<p class="false-heading">4</p>
		</div>

		<div class="grid-item desk-w-2-9">
			<button class="btn btn--primary desk-float-right">View all results</button>
		</div>

	</div>
</div>



```
*/
/*doc
---
title: Radio Element
name: Radio Element
category: Skin - Radio Element
---


```html_example

<div class="style-guide-content">
	
	<div class="site-wide">
		
		<div class="radio-element checked-label">
			<form action="#" class="">
				
				<div class="radio-wrapper">
				    <input id="horizontal-radio-11" type="radio" name="user">
				    <label for="horizontal-radio-11"><span>Admin</span><span>Manager</span></label>
				</div>
				<div class="radio-wrapper">
				    <input id="horizontal-radio-22" type="radio" name="user">
				    <label for="horizontal-radio-22"><span>Trainee</span></label>
				</div>
				<div class="radio-wrapper">
				    <input id="horizontal-radio-33" type="radio" name="user">
				    <label for="horizontal-radio-33"><span>Sales Executive</span></label>
				</div>

			</form> 
		</div>
				
		<div class="radio-element">
		    <form action="#" class="">
			
		        <div class="radio-wrapper">
		            <input id="horizontal-radio-21" type="radio" name="training-required">
		            <label for="horizontal-radio-21"><span class="has-training-value">Yes</span><span>+99</span></label>
		        </div>

		        <div class="radio-wrapper">
		            <input id="horizontal-radio-31" type="radio" name="training-required">
		            <label for="horizontal-radio-31"><span class="has-icon-info">No</span><i></i></label>
		        </div>

		    </form> 
		</div>

	</div>

</div>


```
*/
/* line 63, ../sass/skin/_radio-elements.scss */
.radio-element.checked-label input[type=radio]:checked + label {
  font-style: normal;
  background-color: #efefef;
  border: 1px solid transparent;
}

/* line 70, ../sass/skin/_radio-elements.scss */
.radio-element .has-training-value, .radio-element .has-icon-info {
  display: inline-block;
  vertical-align: top;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
}

/* line 78, ../sass/skin/_radio-elements.scss */
.radio-element.checked-label input[type=radio] {
  margin-top: 1rem;
  margin-left: 1.0625rem;
}
/* line 84, ../sass/skin/_radio-elements.scss */
.radio-element.checked-label label {
  padding: 0.625rem 1.5625rem 0.625rem 2.8125rem;
  border: 1px solid #efefef;
}
/* line 89, ../sass/skin/_radio-elements.scss */
.radio-element.checked-label span:first-child {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 1.3125rem;
  line-height: 1.33333;
  font-weight: bold;
}
/* line 96, ../sass/skin/_radio-elements.scss */
.radio-element input[type=radio] {
  margin-top: 0.625rem;
  margin-left: 0.3125rem;
  z-index: 10;
  position: absolute;
}
/* line 103, ../sass/skin/_radio-elements.scss */
.radio-element label {
  border-radius: 4px;
  padding: 0.625rem 1.5625rem 0.625rem 1.5625rem;
  text-align: left;
}
/* line 111, ../sass/skin/_radio-elements.scss */
.radio-element__no-bg input[type=radio] {
  margin-top: 0.1875rem;
  margin-left: 0;
}
/* line 116, ../sass/skin/_radio-elements.scss */
.radio-element__no-bg label {
  padding: 0.125rem 1.5625rem 0.625rem 1.25rem;
}
/* line 121, ../sass/skin/_radio-elements.scss */
.radio-element span {
  display: block;
}
/* line 133, ../sass/skin/_radio-elements.scss */
.radio-element .has-training-value + span {
  display: inline-block;
  vertical-align: top;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  margin-left: 0.3125rem;
  padding-left: 0.3125rem;
  padding-right: 0.3125rem;
  background-color: #0075cd;
  border-radius: 4px;
  color: #fff;
}
/* line 147, ../sass/skin/_radio-elements.scss */
.radio-element .has-icon-info + i {
  display: inline-block;
  vertical-align: top;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  margin-top: -0.1875rem;
  margin-left: 0.25rem;
}

/* line 156, ../sass/skin/_radio-elements.scss */
.radio-wrapper {
  display: block;
}
@media all and (min-width: 37.8125em) {
  /* line 156, ../sass/skin/_radio-elements.scss */
  .radio-wrapper {
    display: inline-block;
    vertical-align: top;
    *vertical-align: auto;
    *zoom: 1;
    *display: inline;
  }
}
@media all and (min-width: 37.8125em) {
  /* line 163, ../sass/skin/_radio-elements.scss */
  .radio-wrapper + .radio-wrapper {
    margin-left: 1.25rem;
    margin-top: 0;
  }
}

/* line 7, ../sass/skin/_location.scss */
.location-wrapper p {
  margin-bottom: 0;
}

/*doc
---
title: Grid
name: Grid
category: Skin - Grid
---


```html_example

<div class="style-guide-content">
	
	<h3 class="primary-color">Typical bacteria Characteristics</h3>
	<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget urna mollis ornare vel eu leo. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum. Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
	<div class="media-wrapper">
		<img src="http://placehold.it/400x200?text=Image+or+Video" class="img--stretch" />
	</div>

	<!-- Primary col and Secondary col -->
	<div class="row grid--gutter-20">
		<div class="grid-item desk-w-9-12 primary-col">
			<div class="grid-inner">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea distinctio quis laborum dicta, fuga mollitia rerum minima eius magni sit.</p>
			</div>
		</div><!-- end grid-item -->

		<div class="grid-item desk-w-3-12 secondary-col">
			<div class="grid-inner">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea distinctio quis laborum dicta, fuga mollitia rerum minima eius magni sit.</p>
			</div>
		</div><!-- end grid-item -->
	</div><!-- end row -->

	<!-- Grid variations -->
	<div class="row grid--gutter-20">
		<div class="grid-item desk-w-9-12 primary-col">
			<!-- 1 column -->
			<div class="grid-inner">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea distinctio quis laborum dicta, fuga mollitia rerum minima eius magni sit.</p>
			</div>

			<div class="row">
				<!-- 2 column (left main) -->
				<div class="grid-item desk-w-9-12">
					<div class="grid-inner">
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea distinctio quis laborum dicta, fuga mollitia rerum minima eius magni sit.</p>
					</div>
				</div>
				<div class="grid-item desk-w-3-12">
					<div class="grid-inner">
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea distinctio quis laborum dicta, fuga mollitia rerum minima eius magni sit.</p>
					</div>
				</div>
			</div>

			<div class="row">
				<div class="grid-item desk-w-3-12">
					<div class="grid-inner">
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea distinctio quis laborum dicta, fuga mollitia rerum minima eius magni sit.</p>
					</div>
				</div>
				<!-- 2 column (right main) -->
				<div class="grid-item desk-w-9-12">
					<div class="grid-inner">
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea distinctio quis laborum dicta, fuga mollitia rerum minima eius magni sit.</p>
					</div>
				</div>
			</div>

		</div><!-- end grid-item -->
	</div><!-- end row -->

	<div class="row">
		<!-- Text only -->
		<div class="grid-item desk-w-1-4">
			<div class="grid-inner">
			<h3 class="primary-color">Typical bacteria Characteristics</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea distinctio quis laborum dicta, fuga mollitia rerum minima eius magni sit.</p>
			</div>
		</div><!-- end grid-item -->

		<!-- Text + images -->
		<div class="grid-item desk-w-1-4">
			<div class="grid-inner">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea distinctio quis laborum dicta, fuga mollitia rerum minima eius magni sit.</p>
				<div class="media-wrapper">
					<img src="http://placehold.it/400x200?text=Image+or+Video" class="img--stretch" />
				</div>
				<div class="media-wrapper">
					<img src="http://placehold.it/400x200?text=Image+or+Video" class="img--stretch" />
				</div>
			</div>
		</div><!-- end grid-item -->

		<!-- Image only -->
		<div class="grid-item desk-w-1-4">
			<div class="grid-inner">
				<div class="media-wrapper">
					<img src="http://placehold.it/400x200?text=Image+or+Video" class="img--stretch" />
				</div>
			</div>
		</div><!-- end grid-item -->
	</div><!-- end row -->

</div>

<div class="style-guide-content">

	<div class="row">
		<!-- Text + wide image or video -->
		<div class="grid-item desk-w-6-12">
			<div class="grid-inner">
				<h3 class="primary-color">Typical bacteria Characteristics</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea distinctio quis laborum dicta, fuga mollitia rerum minima eius magni sit.</p>
				<div class="media-wrapper">
					<img src="http://placehold.it/400x200?text=Image+or+Video" class="img--stretch" />
				</div>
			</div>
		</div><!-- end grid-item -->

		<!-- Text + 2 images -->
		<div class="grid-item desk-w-6-12">
			<div class="grid-inner">
				<h3 class="primary-color">Typical bacteria Characteristics</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea distinctio quis laborum dicta, fuga mollitia rerum minima eius magni sit.</p>
				<div class="media-wrapper">
					<img src="http://placehold.it/400x200?text=Image+or+Video" class="img--stretch" />
				</div>

				<ul class="listing-item desk-2-items">
					<li>
						<div class="list-inner">
							<div class="media-wrapper">
								<img src="http://placehold.it/400x200" class="img--stretch" />
							</div>
						</div>
					</li>
					<li>
						<div class="list-inner">
							<div class="media-wrapper">
								<img src="http://placehold.it/400x200" class="img--stretch" />
							</div>
						</div>
					</li>
				</ul>

			</div>
		</div><!-- end grid-item -->

	</div><!-- end row -->

</div>

```

*/
@media all and (max-width: 37.8025em) {
  /* line 266, ../sass/skin/_grid.scss */
  .mob-w-1-2 {
    width: 50%;
  }
}

/* line 272, ../sass/skin/_grid.scss */
.grid-inner {
  margin-bottom: 1.25rem;
}
/* line 276, ../sass/skin/_grid.scss */
.style-guide-content .grid-inner {
  border: 1px solid #0075cd;
}

/* line 281, ../sass/skin/_grid.scss */
.row-center {
  text-align: center;
}
@media all and (min-width: 37.8125em) {
  /* line 284, ../sass/skin/_grid.scss */
  .row-center .grid-item {
    text-align: left;
  }
}

/*doc
---
title: Progress bar skin
name: Progress bar skin
category: Skin - Progress bar
---

```html_example

<div class="progress-bar progress-bar--large mb-40">

	<p class="mob-float-left text--bold">My progress</p>

	<div class="progress-bar__mob-switch">
		<div class="percentage percentage--progression">
			<div class="percentage__content">
				<div class="percentage__value">80<span>%</span></div>
			</div>
		</div>

		<div class="progress-bar__content mb-20">
			<div class="inner-bar" style="width:80%;"></div>
		</div>
	</div>

	<div class="progress-bar__details clearfix">
			
		<div class="progress-bar__details--left">
			<p class="">0/5 modules completed</p>
		</div>

		<div class="progress-bar__details--right">
			<div class="mob-float-left desk-float-right">
				<p class="text--italic">Course Expiry Date: <span class="text--bold">07/06/16</span></p>
			</div>
		</div>
			
		</div>
	</div>

</div>

<div class="progress-bar progress-bar--small">

	<p class="mob-float-left text--bold">Trainee Progress: <span>Dental Assistants Training</span></p>

	<div class="progress-bar__details progress-bar__details--header">
		<p>Mark Sanders</p>
	</div>

	<div class="percentage percentage--progression">
		<div class="percentage__content">
			<div class="percentage__value">80<span>%</span></div>
		</div>
	</div>

	<div class="progress-bar__content">
		<div class="inner-bar" style="width:80%;"></div>
	</div>

</div>


<div class="panel panel--border panel--radius">
	<h2 class="primary-color mb-30">Infection Control Dental Team Training</h2>

	<div class="progress-bar progress-bar--large mb-40">

		<p class="mob-float-left text--bold">My progress</p>

		<div class="progress-bar__mob-switch">

			<div class="percentage percentage--progression">
				<div class="percentage__content">
					<div class="percentage__value">80<span>%</span></div>
				</div>
			</div>


			<div class="progress-bar__content mob-mb-20 desk-mb-40">
				<div class="inner-bar" style="width:80%;"></div>
			</div>
		</div>

		<div class="progress-bar__details clearfix">
			
			<div class="progress-bar__details--left">
				<p class="">0/5 modules completed</p>
			</div>

			<div class="progress-bar__details--right">
				<div class="mob-float-left desk-float-right">
					<p class="text--italic">Course Expiry Date: <span class="text--bold">07/06/16</span></p> <button class="btn btn--primary">Start Course</button>
				</div>
			</div>
				
			</div>
		</div>

	</div>

</div>



```
*/
@media all and (min-width: 37.8125em) {
  /* line 117, ../sass/skin/_progress-bar.scss */
  .percentage .percentage__content {
    margin-top: 1rem;
  }
}
/* line 123, ../sass/skin/_progress-bar.scss */
.percentage .percentage__text {
  font-size: 0.875rem;
  line-height: 1.57143;
  margin-bottom: 0.5rem;
}
/* line 128, ../sass/skin/_progress-bar.scss */
.percentage .percentage__value {
  font-size: 2.375rem;
  font-weight: bold;
  color: #555;
}
/* line 133, ../sass/skin/_progress-bar.scss */
.percentage .percentage__value span {
  font-size: 1.375rem;
}

/* line 139, ../sass/skin/_progress-bar.scss */
.percentage--score {
  margin-left: -1.875rem;
  margin-right: -1.875rem;
  padding: 1.25rem;
  background-color: #efefef;
  position: relative;
  display: block;
  text-align: center;
}
@media all and (max-width: 37.8025em) {
  /* line 149, ../sass/skin/_progress-bar.scss */
  .percentage--score .percentage__text, .percentage--score .percentage__value {
    display: inline-block;
  }
}
@media all and (min-width: 37.8125em) {
  /* line 139, ../sass/skin/_progress-bar.scss */
  .percentage--score {
    width: 13.125rem;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    padding: 0;
    margin: 0;
    text-align: center;
  }
  /* line 165, ../sass/skin/_progress-bar.scss */
  .percentage--score .percentage__content {
    margin-top: 2.875rem;
  }
}

/* line 171, ../sass/skin/_progress-bar.scss */
.progress-bar {
  position: relative;
}
/* line 176, ../sass/skin/_progress-bar.scss */
.progress-bar > p {
  margin-bottom: 0.625rem;
}
@media all and (min-width: 37.8125em) {
  /* line 176, ../sass/skin/_progress-bar.scss */
  .progress-bar > p {
    margin-bottom: 1.25rem;
  }
}
/* line 183, ../sass/skin/_progress-bar.scss */
.progress-bar > p span {
  font-weight: normal;
}
@media all and (max-width: 37.8025em) {
  /* line 183, ../sass/skin/_progress-bar.scss */
  .progress-bar > p span {
    display: block;
  }
}

@media all and (max-width: 37.8025em) {
  /* line 196, ../sass/skin/_progress-bar.scss */
  .progress-bar--small .progress-bar__details {
    float: left;
  }
  /* line 200, ../sass/skin/_progress-bar.scss */
  .progress-bar--small .progress-bar__content {
    clear: both;
  }
  /* line 204, ../sass/skin/_progress-bar.scss */
  .progress-bar--small .percentage--progression {
    line-height: 0.78571;
    margin-top: -0.1875rem;
    float: right;
  }
}
/* line 211, ../sass/skin/_progress-bar.scss */
.progress-bar--small .progress-bar__content {
  margin-bottom: 1.25rem;
}
/* line 215, ../sass/skin/_progress-bar.scss */
.progress-bar--small .percentage__value {
  font-size: 1.75rem;
  line-height: 1;
}

@media all and (max-width: 37.8025em) {
  /* line 222, ../sass/skin/_progress-bar.scss */
  .progress-bar--large .percentage__value {
    margin-top: 0.4375rem;
  }
}
@media all and (min-width: 37.8125em) {
  /* line 228, ../sass/skin/_progress-bar.scss */
  .progress-bar--large .percentage__value {
    min-width: 5.125rem;
  }
}
/* line 233, ../sass/skin/_progress-bar.scss */
.progress-bar--large .percentage--progression {
  margin-top: -0.875rem;
}
@media all and (min-width: 37.8125em) {
  /* line 233, ../sass/skin/_progress-bar.scss */
  .progress-bar--large .percentage--progression {
    margin-top: -1.375rem;
  }
}
/* line 241, ../sass/skin/_progress-bar.scss */
.progress-bar--large .progress-bar__content {
  background-color: #fff;
  padding: 3px;
  border: 1px solid #555;
}
@media all and (max-width: 37.8025em) {
  /* line 241, ../sass/skin/_progress-bar.scss */
  .progress-bar--large .progress-bar__content {
    width: 100%;
  }
}
/* line 250, ../sass/skin/_progress-bar.scss */
.progress-bar--large .progress-bar__content .inner-bar {
  height: 10px;
}
/* line 255, ../sass/skin/_progress-bar.scss */
.progress-bar--large .percentage__value {
  font-size: 2.375rem;
  line-height: 0.57895;
}

/* line 260, ../sass/skin/_progress-bar.scss */
.percentage--progression {
  margin-left: 1.5625rem;
  margin-top: -1.5rem;
  float: right;
}
@media all and (min-width: 37.8125em) {
  /* line 260, ../sass/skin/_progress-bar.scss */
  .percentage--progression {
    margin-top: -2.1875rem;
  }
}

/* line 270, ../sass/skin/_progress-bar.scss */
.progress-bar__content {
  border-radius: 50px;
  background-color: #e5e5e5;
  display: block;
  overflow: hidden;
  float: none;
}

/* line 278, ../sass/skin/_progress-bar.scss */
.inner-bar {
  height: 6px;
  border-radius: 8px;
  background-color: #92c145;
}

/* line 284, ../sass/skin/_progress-bar.scss */
.progress-bar__details {
  clear: both;
}
@media all and (min-width: 37.8125em) {
  /* line 284, ../sass/skin/_progress-bar.scss */
  .progress-bar__details {
    display: table;
    width: 100%;
  }
}
/* line 292, ../sass/skin/_progress-bar.scss */
.progress-bar__details p {
  font-weight: 400;
  display: inline-block;
  margin-bottom: 0;
}

@media all and (min-width: 37.8125em) {
  /* line 301, ../sass/skin/_progress-bar.scss */
  .progress-bar__details--header p {
    margin-bottom: 0.625rem;
  }
}

@media all and (min-width: 37.8125em) {
  /* line 308, ../sass/skin/_progress-bar.scss */
  .progress-bar__details--left {
    vertical-align: bottom;
    display: table-cell;
  }
}

/* line 316, ../sass/skin/_progress-bar.scss */
.progress-bar__details--right p {
  font-size: 0.875rem;
  font-style: italic;
  vertical-align: bottom;
}
@media all and (max-width: 37.8025em) {
  /* line 316, ../sass/skin/_progress-bar.scss */
  .progress-bar__details--right p {
    margin-bottom: 0.9375rem;
    width: 100%;
  }
}
@media all and (min-width: 37.8125em) {
  /* line 327, ../sass/skin/_progress-bar.scss */
  .progress-bar__details--right a {
    margin-left: 1.25rem;
  }
}

@media all and (min-width: 37.8125em) {
  /* line 5, ../sass/skin/_homepage.scss */
  .login-area {
    min-height: 15.625rem;
  }
}
/* line 11, ../sass/skin/_homepage.scss */
.login-area input[type="text"], .login-area input[type="password"] {
  font-family: Arial, sans-serif;
}

/* line 16, ../sass/skin/_homepage.scss */
.login-area__message {
  text-align: center;
}
/* line 19, ../sass/skin/_homepage.scss */
.login-area__message h2 {
  font-size: 1.5rem;
  line-height: 1.25;
  margin-bottom: 0.625rem;
}
/* line 24, ../sass/skin/_homepage.scss */
.login-area__message p {
  font-size: 14px;
  font-weight: 100;
}
/* line 29, ../sass/skin/_homepage.scss */
.login-area__message a {
  color: #fff;
  text-decoration: underline;
}
/* line 34, ../sass/skin/_homepage.scss */
.login-area__message svg {
  width: 1.75rem;
  margin-bottom: 1.25rem;
}
/* line 38, ../sass/skin/_homepage.scss */
.login-area__message svg .shape {
  fill: #fff;
}

/* line 44, ../sass/skin/_homepage.scss */
.sandc-wrapper {
  padding-top: 2.8125rem;
  position: relative;
  background-color: #0075cd;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
}
@media all and (min-width: 37.8125em) {
  /* line 44, ../sass/skin/_homepage.scss */
  .sandc-wrapper {
    min-height: 33.875rem;
    padding-top: 4.6875rem;
  }
}
/* line 57, ../sass/skin/_homepage.scss */
.sandc-wrapper h2 {
  margin-bottom: 2.8125rem;
  color: #fff;
}
@media all and (min-width: 37.8125em) {
  /* line 57, ../sass/skin/_homepage.scss */
  .sandc-wrapper h2 {
    margin-bottom: 3.4375rem;
  }
}

/* line 68, ../sass/skin/_homepage.scss */
.user-login-field, .user-password-field {
  display: inline-block;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  position: relative;
  width: 100%;
}
/* line 73, ../sass/skin/_homepage.scss */
.user-login-field input, .user-password-field input {
  -moz-appearance: none;
  -webkit-appearance: none;
  padding-left: 50px !important;
  margin-bottom: 0 !important;
  border-width: 1px !important;
}
/* line 79, ../sass/skin/_homepage.scss */
.user-login-field input:focus, .user-password-field input:focus {
  border: 1px solid #e2e2e2 !important;
}
/* line 84, ../sass/skin/_homepage.scss */
.user-login-field label, .user-password-field label {
  position: absolute;
  height: 100%;
  border-right: 1px solid #e2e2e2;
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
}
/* line 91, ../sass/skin/_homepage.scss */
.user-login-field label:before, .user-password-field label:before {
  display: inline-block;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  content: "";
  position: absolute;
  top: 50%;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center center;
}

/* line 103, ../sass/skin/_homepage.scss */
.user-login-field {
  margin-bottom: 1.125rem;
}
/* line 107, ../sass/skin/_homepage.scss */
.user-login-field label {
  width: 2.5rem;
}
/* line 110, ../sass/skin/_homepage.scss */
.user-login-field label:before {
  background-image: url('../images/png/svg/icon-user.png?1628530314');
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url('../images/svg/icon-user.svg');
  margin-top: -0.5rem;
  left: 0.75rem;
  width: 0.9375rem;
  height: 0.9375rem;
}

/* line 123, ../sass/skin/_homepage.scss */
.user-password-field label {
  width: 2.5rem;
}
/* line 126, ../sass/skin/_homepage.scss */
.user-password-field label:before {
  margin-top: -0.5rem;
  left: 0.75rem;
  width: 0.9375rem;
  height: 0.9375rem;
  background-image: url('../images/icons/icon-pwd.png?1422365217');
}

/* line 187, ../sass/skin/_homepage.scss */
.homepage-promo-block {
  margin-bottom: 1.25rem;
}
/* line 140, ../sass/skin/_homepage.scss */
.homepage-promo-block .grid-inner {
  padding: 0.9375rem 1.25rem;
  background-color: #fff;
  margin-bottom: 0;
}
/* line 146, ../sass/skin/_homepage.scss */
.homepage-promo-block .course__img-container {
  margin-bottom: 1.25rem;
}
@media all and (max-width: 37.8025em) {
  /* line 152, ../sass/skin/_homepage.scss */
  .homepage-promo-block .grid-inner {
    background-color: #f7f7f7;
  }
  /* line 157, ../sass/skin/_homepage.scss */
  .homepage-promo-block:first-child .grid-inner {
    background-color: #fff;
  }
}
@media all and (min-width: 37.8125em) {
  /* line 192, ../sass/skin/_homepage.scss */
  .homepage-promo-block + .homepage-promo-block .grid-inner {
    background-color: #f7f7f7;
  }
}

/* line 199, ../sass/skin/_homepage.scss */
.homepage-promo-row {
  margin-bottom: 1.25rem;
}
/* line 140, ../sass/skin/_homepage.scss */
.homepage-promo-row .grid-inner {
  padding: 0.9375rem 1.25rem;
  background-color: #fff;
  margin-bottom: 0;
}
/* line 146, ../sass/skin/_homepage.scss */
.homepage-promo-row .course__img-container {
  margin-bottom: 1.25rem;
}
@media all and (max-width: 37.8025em) {
  /* line 152, ../sass/skin/_homepage.scss */
  .homepage-promo-row .grid-inner {
    background-color: #f7f7f7;
  }
  /* line 157, ../sass/skin/_homepage.scss */
  .homepage-promo-row:first-child .grid-inner {
    background-color: #fff;
  }
}
@media all and (min-width: 37.8125em) {
  /* line 199, ../sass/skin/_homepage.scss */
  .homepage-promo-row {
    margin-bottom: 1.25rem;
  }
  /* line 171, ../sass/skin/_homepage.scss */
  .homepage-promo-row .grid-inner {
    background-color: #f7f7f7;
    margin-bottom: 0;
  }
  /* line 176, ../sass/skin/_homepage.scss */
  .homepage-promo-row .course__img-container {
    margin-right: 1.25rem;
    margin-bottom: 0;
  }
}

@media all and (max-width: 37.8025em) {
  /* line 209, ../sass/skin/_homepage.scss */
  .login-home {
    margin-bottom: 20px;
  }
}
/* line 215, ../sass/skin/_homepage.scss */
.mission__text-container {
  padding: 30px 20px;
}
/* line 218, ../sass/skin/_homepage.scss */
.mission__text-container p {
  font-size: 20px;
  font-weight: 100;
}
/* line 222, ../sass/skin/_homepage.scss */
.mission__text-container p a {
  font-size: 18px;
  color: #1d5ba5;
  text-decoration: none;
}
/* line 227, ../sass/skin/_homepage.scss */
.mission__text-container p a::after {
  content: ">";
  display: inline-block;
  margin-left: 5px;
  font-size: 10px;
}
/* line 234, ../sass/skin/_homepage.scss */
.mission__text-container p a:hover {
  text-decoration: underline;
}

@media all and (min-width: 37.8125em) {
  /* line 241, ../sass/skin/_homepage.scss */
  .sector-container {
    margin-top: -25px;
  }
}

/* line 247, ../sass/skin/_homepage.scss */
.sector-inner {
  padding: 45% 30px 30px;
  display: block;
  margin-bottom: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
/* line 256, ../sass/skin/_homepage.scss */
.sector-inner:hover .btn--tertiary {
  background-color: #1d5ba5;
  color: #fff;
}

/* line 5, ../sass/skin/_basket.scss */
.basket {
  margin-top: 0.875rem;
  right: 5rem;
  position: absolute;
}
@media all and (min-width: 37.8125em) {
  /* line 5, ../sass/skin/_basket.scss */
  .basket {
    margin-top: 0.4375rem;
    float: right;
    position: relative;
    right: auto;
  }
}
/* line 17, ../sass/skin/_basket.scss */
.basket a {
  font-size: 0.8125rem;
  line-height: 1.84615;
  color: #fff;
  float: left;
}
/* line 23, ../sass/skin/_basket.scss */
.basket a:last-child:before {
  padding-left: 0.4375rem;
  padding-right: 0.4375rem;
  content: "\0020\007C\0020";
  display: inline-block;
}

/* line 6, ../sass/skin/_wysiwyg.scss */
.field-wrapper .cke {
  margin-bottom: 1.125rem;
}

/* line 12, ../sass/skin/_wysiwyg.scss */
.wysiwyg .table-wrapper {
  display: block;
  overflow: auto;
}
/* line 27, ../sass/skin/_wysiwyg.scss */
.wysiwyg iframe {
  max-width: 100%;
}
/* line 31, ../sass/skin/_wysiwyg.scss */
.wysiwyg ul, .wysiwyg ol {
  text-decoration: none;
}
/* line 35, ../sass/skin/_wysiwyg.scss */
.wysiwyg ul li, .wysiwyg ol li {
  margin-bottom: 0.625rem;
}
/* line 41, ../sass/skin/_wysiwyg.scss */
.wysiwyg a {
  line-height: 1.33333;
  word-break: break-all;
  white-space: normal;
}

/* line 12, ../sass/skin/_wysiwyg.scss */
.wysiwyg-cookies .table-wrapper {
  display: block;
  overflow: auto;
}
/* line 61, ../sass/skin/_wysiwyg.scss */
.wysiwyg-cookies iframe {
  max-width: 100%;
}
/* line 65, ../sass/skin/_wysiwyg.scss */
.wysiwyg-cookies a {
  line-height: 1.33333;
  word-break: break-all;
  white-space: normal;
}

/*doc
---
title: Sortable Widget
name: Sortable Widget
category: Skin - Sortable Widget
---

Extends navigation.scss


```html_example

<div class="style-guide-content">
	<h2 class="primary-color has-sub-heading">Course Modules</h2>
	<div class="add-module"><span>+Add module</span></div>
	<ul id="sortable" class="js-sort-module-styleguide create-module">
		<li>
			<div class="create-module__item">
				<div class="create-module__title">Module 1</div>
				<div class="create-module__sub-title"><p>Microbiology</p></div>
			</div>
			<div class="icon-sort-module"></div>
		</li>
		<li>
			<div class="create-module__item">
				<div class="create-module__title">Module 2</div>
				<div class="create-module__sub-title"><p>Practice & procedures</p></div>
			</div>
			<div class="icon-sort-module"></div>
		</li>
		<li>
			<div class="create-module__item">
				<div class="create-module__title">Module 3</div>
				<div class="create-module__sub-title"><p>Personal Protection</p></div>
			</div>
			<div class="icon-sort-module"></div>
		</li>
	</ul>
</div>


```
*/
/* line 52, ../sass/skin/_sortable-widget.scss */
.create-module li {
  margin-bottom: 0.9375rem;
  padding: 0.9375rem 1.25rem;
  display: inline-block;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  background-color: #edf5fb;
  width: 100%;
  position: relative;
  cursor: pointer;
}
/* line 67, ../sass/skin/_sortable-widget.scss */
.create-module__sub-title p {
  color: #0075cd;
  margin-bottom: 0;
}
/* line 75, ../sass/skin/_sortable-widget.scss */
.create-module .icon-sort-module {
  margin-top: -0.625rem;
  right: 0.9375rem;
  position: absolute;
  top: 50%;
}

/* line 85, ../sass/skin/_sortable-widget.scss */
.add-module {
  margin-bottom: 0.9375rem;
  color: #0075cd;
  float: right;
}

/* line 92, ../sass/skin/_sortable-widget.scss */
.questions-nb {
  float: right;
  text-align: center;
}
/* line 96, ../sass/skin/_sortable-widget.scss */
.questions-nb span {
  display: block;
}

/*doc
---
title: Date Picker
name: Date Picker
category: Skin - Date Picker
---


```html_example

<div class="" style="background: #0075cb; padding: 20px;">
	
	<div class="row">
		<div class="grid desk-w-3-12">
			<div class="training-confirmation mb-20">
				<div class="panel--even-padding training-confirmation__content">
					<p>Training confirmation no.</p>
					<span class="likeh1">010024</span>
				</div>
				<div class="training-confirmation__date is-held">
					<p>Training held on: 6 Sept 14</p>
				</div>
			</div>

			<div class="training-confirmation mb-20">
				<div class="panel--even-padding training-confirmation__content">
					<p>Training confirmation no.</p>
					<span class="likeh1">010024</span>
				</div>
				<div class="training-confirmation__date is-booked">
					<label>Training held on:</label>
					<input type="text" class="js-date-picker-sg reset-date-container" value="6 Sept 14">
					
				</div>
			</div>
		</div>
</div>

```
*/
/* line 47, ../sass/skin/_date-picker.scss */
.coordinator-details .mimic-label {
  padding-top: 0;
}
/* line 51, ../sass/skin/_date-picker.scss */
.coordinator-details .mimic-input {
  vertical-align: top;
}

/* line 64, ../sass/skin/_date-picker.scss */
.training-confirmation__ref {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 300;
}
/* line 70, ../sass/skin/_date-picker.scss */
.training-confirmation__date {
  padding: 0.9375rem;
  color: #fff;
  text-align: center;
}
/* line 78, ../sass/skin/_date-picker.scss */
form .training-confirmation__date label {
  width: auto;
  padding-top: 0;
  text-align: center;
  float: none;
  display: block;
  margin-bottom: 10px;
}
/* line 101, ../sass/skin/_date-picker.scss */
.training-confirmation .ui-datepicker-trigger {
  margin-top: -0.5rem;
  cursor: pointer;
}
/* line 106, ../sass/skin/_date-picker.scss */
.training-confirmation input {
  box-shadow: none !important;
  border: 0 !important;
}
/* line 111, ../sass/skin/_date-picker.scss */
.training-confirmation input.reset-date-container {
  font-size: 0.75rem;
  line-height: 1.41667;
  padding-right: 0.625rem;
  width: auto;
  border: 0;
  border-radius: 0;
  text-indent: 0;
  background-color: transparent;
  color: #fff;
  margin-bottom: 0;
  height: auto;
  padding-left: 0;
  text-align: right;
  max-width: 75px;
}

/* line 134, ../sass/skin/_date-picker.scss */
.ui-datepicker {
  margin-top: 0.625rem;
  border-radius: 3px;
}

/* line 8, ../sass/skin/_pdf.scss */
.site-wide-pdf {
  width: 794px;
  height: 1122px;
  background-image: url('../images/pdf/banner.jpg?1571839944');
  background-position: center bottom;
  background-repeat: no-repeat;
  padding: 120px 30px 0;
  position: relative;
}
/* line 17, ../sass/skin/_pdf.scss */
.site-wide-pdf ol,
.site-wide-pdf ul {
  padding-left: 0;
}

/* line 23, ../sass/skin/_pdf.scss */
.certificate-content {
  padding: 0 65px;
}

/* line 27, ../sass/skin/_pdf.scss */
.certificate__date {
  font-size: 1.125rem;
  color: #fff;
  position: relative;
  top: -15px;
}

/* line 34, ../sass/skin/_pdf.scss */
.certificate__info {
  float: left;
  width: 50%;
}

/* line 39, ../sass/skin/_pdf.scss */
.certificate__panel {
  font-size: 1.375rem;
  padding: 20px;
}

/* line 45, ../sass/skin/_pdf.scss */
.certificate__aims {
  font-size: 1rem;
  width: 100%;
}

/* line 50, ../sass/skin/_pdf.scss */
.certificate--text-small {
  font-size: 0.8125rem;
}

/* line 54, ../sass/skin/_pdf.scss */
.certificate--text-xsmall {
  font-size: 0.6875rem;
}

/* line 58, ../sass/skin/_pdf.scss */
.certificate--text {
  font-size: 0.9375rem;
}

/* line 64, ../sass/skin/_pdf.scss */
.certificate__details dt,
.certificate__details dd {
  margin-bottom: 7px;
}
/* line 69, ../sass/skin/_pdf.scss */
.certificate__details dt {
  float: left;
  clear: left;
  min-width: 173px;
  color: #0075cd;
  padding-top: 4px;
  padding-left: 30px;
}
/* line 78, ../sass/skin/_pdf.scss */
.certificate__details dd {
  font-size: 1.25rem;
  float: left;
}

/* line 84, ../sass/skin/_pdf.scss */
.certificate__qualification {
  font-size: 2.1875rem;
  color: #0075cd;
  text-align: center;
  margin-left: -50px;
  margin-right: -50px;
}

/* line 92, ../sass/skin/_pdf.scss */
.course-criteria {
  margin-left: -50px;
  margin-right: -50px;
}

/* line 97, ../sass/skin/_pdf.scss */
.certificate__logos {
  position: absolute;
  bottom: 127px;
  right: 128px;
  left: 308px;
  font-size: 0;
  text-align: center;
}

/* line 106, ../sass/skin/_pdf.scss */
.certificate__logo {
  display: inline-block;
  vertical-align: bottom;
  width: 33.33%;
  padding-left: 20px;
}

/* line 5, ../sass/skin/_social.scss */
.social-icons {
  list-style: none;
  margin: 20px 0;
  padding: 0;
}
@media all and (min-width: 37.8125em) {
  /* line 5, ../sass/skin/_social.scss */
  .social-icons {
    padding-left: 20px;
    margin-left: auto;
  }
}
/* line 15, ../sass/skin/_social.scss */
.social-icons li {
  display: inline-block;
  vertical-align: middle;
}
/* line 20, ../sass/skin/_social.scss */
.social-icons a {
  display: block;
  background-color: #0075cd;
  height: 40px;
  width: 40px;
  position: relative;
  transition: background-color 0.3s ease-in-out;
}
/* line 28, ../sass/skin/_social.scss */
.social-icons a:hover {
  background-color: #004981;
}
/* line 32, ../sass/skin/_social.scss */
.social-icons a svg {
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
}

/* line 42, ../sass/skin/_social.scss */
.social-icons__container {
  padding-top: 30px;
}

/* line 46, ../sass/skin/_social.scss */
.sharing-center {
  text-align: center;
}

/* line 51, ../sass/skin/_social.scss */
.social-share-product-details .social-icons {
  margin: 0;
}
@media all and (min-width: 37.8125em) {
  /* line 51, ../sass/skin/_social.scss */
  .social-share-product-details .social-icons {
    padding-left: 20px;
    margin-left: auto;
  }
}
/* line 60, ../sass/skin/_social.scss */
.social-share-product-details .social-icons__container {
  padding: 30px;
  border: 1px solid #eee;
  color: #333;
}
@media all and (min-width: 37.8125em) {
  /* line 60, ../sass/skin/_social.scss */
  .social-share-product-details .social-icons__container {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
  }
  /* line 69, ../sass/skin/_social.scss */
  .social-share-product-details .social-icons__container p {
    margin-bottom: 0;
  }
}
/* line 74, ../sass/skin/_social.scss */
.social-share-product-details .social-icons__container p {
  font-size: 18px;
  font-weight: bold;
}

/*! jQuery UI - v1.11.2 - 2014-12-07
* http://jqueryui.com
* Includes: core.css, sortable.css, datepicker.css
* Copyright 2014 jQuery Foundation and other contributors; Licensed MIT */
/* Layout helpers
----------------------------------*/
/* line 8, ../sass/libs/_jquery-ui.scss */
.ui-helper-hidden {
  display: none;
}

/* line 11, ../sass/libs/_jquery-ui.scss */
.ui-helper-hidden-accessible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/* line 21, ../sass/libs/_jquery-ui.scss */
.ui-helper-reset {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  line-height: 1.3;
  text-decoration: none;
  font-size: 100%;
  list-style: none;
}

/* line 31, ../sass/libs/_jquery-ui.scss */
.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
  content: "";
  display: table;
  border-collapse: collapse;
}

/* line 37, ../sass/libs/_jquery-ui.scss */
.ui-helper-clearfix:after {
  clear: both;
}

/* line 40, ../sass/libs/_jquery-ui.scss */
.ui-helper-clearfix {
  min-height: 0;
  /* support: IE7 */
}

/* line 43, ../sass/libs/_jquery-ui.scss */
.ui-helper-zfix {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  opacity: 0;
  filter: Alpha(Opacity=0);
  /* support: IE8 */
}

/* line 53, ../sass/libs/_jquery-ui.scss */
.ui-front {
  z-index: 100;
}

/* Interaction Cues
----------------------------------*/
/* line 60, ../sass/libs/_jquery-ui.scss */
.ui-state-disabled {
  cursor: default !important;
}

/* Icons
----------------------------------*/
/* states and images */
/* line 69, ../sass/libs/_jquery-ui.scss */
.ui-icon {
  display: block;
  text-indent: -99999px;
  overflow: hidden;
  background-repeat: no-repeat;
}

/* Misc visuals
----------------------------------*/
/* Overlays */
/* line 81, ../sass/libs/_jquery-ui.scss */
.ui-widget-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* line 88, ../sass/libs/_jquery-ui.scss */
.ui-sortable-handle {
  -ms-touch-action: none;
  touch-action: none;
}

/* line 92, ../sass/libs/_jquery-ui.scss */
.ui-datepicker {
  width: 17em;
  padding: .2em .2em 0;
  display: none;
  background-color: #fff;
  border: 1px solid #e2e2e2;
}

/* line 99, ../sass/libs/_jquery-ui.scss */
.ui-datepicker .ui-datepicker-header {
  position: relative;
  padding: .2em 0;
}

/* line 103, ../sass/libs/_jquery-ui.scss */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  position: absolute;
  top: 2px;
  width: 1.8em;
  height: 1.8em;
}

/* line 110, ../sass/libs/_jquery-ui.scss */
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
  top: 1px;
}

/* line 114, ../sass/libs/_jquery-ui.scss */
.ui-datepicker .ui-datepicker-prev {
  left: 2px;
}

/* line 117, ../sass/libs/_jquery-ui.scss */
.ui-datepicker .ui-datepicker-next {
  right: 2px;
}

/* line 120, ../sass/libs/_jquery-ui.scss */
.ui-datepicker .ui-datepicker-prev-hover {
  left: 1px;
}

/* line 123, ../sass/libs/_jquery-ui.scss */
.ui-datepicker .ui-datepicker-next-hover {
  right: 1px;
}

/* line 126, ../sass/libs/_jquery-ui.scss */
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
  display: block;
  position: absolute;
  left: 50%;
  margin-left: -8px;
  top: 50%;
  margin-top: -8px;
}

/* line 135, ../sass/libs/_jquery-ui.scss */
.ui-datepicker .ui-datepicker-title {
  margin: 0 2.3em;
  line-height: 1.8em;
  text-align: center;
}

/* line 140, ../sass/libs/_jquery-ui.scss */
.ui-datepicker .ui-datepicker-title select {
  font-size: 1em;
  margin: 1px 0;
}

/* line 144, ../sass/libs/_jquery-ui.scss */
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
  width: 45%;
}

/* line 148, ../sass/libs/_jquery-ui.scss */
.ui-datepicker table {
  width: 100%;
  font-size: .9em;
  border-collapse: collapse;
  margin: 0 0 .4em;
}

/* line 154, ../sass/libs/_jquery-ui.scss */
.ui-datepicker th {
  padding: .7em .3em;
  text-align: center;
  font-weight: bold;
  border: 0;
}

/* line 160, ../sass/libs/_jquery-ui.scss */
.ui-datepicker td {
  border: 0;
  padding: 1px;
}

/* line 164, ../sass/libs/_jquery-ui.scss */
.ui-datepicker td span,
.ui-datepicker td a {
  display: block;
  padding: .2em;
  text-align: right;
  text-decoration: none;
}

/* line 171, ../sass/libs/_jquery-ui.scss */
.ui-datepicker .ui-datepicker-buttonpane {
  background-image: none;
  margin: .7em 0 0 0;
  padding: 0 .2em;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}

/* line 179, ../sass/libs/_jquery-ui.scss */
.ui-datepicker .ui-datepicker-buttonpane button {
  float: right;
  margin: .5em .2em .4em;
  cursor: pointer;
  padding: .2em .6em .3em .6em;
  width: auto;
  overflow: visible;
}

/* line 187, ../sass/libs/_jquery-ui.scss */
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
  float: left;
}

/* with multiple calendars */
/* line 192, ../sass/libs/_jquery-ui.scss */
.ui-datepicker.ui-datepicker-multi {
  width: auto;
}

/* line 195, ../sass/libs/_jquery-ui.scss */
.ui-datepicker-multi .ui-datepicker-group {
  float: left;
}

/* line 198, ../sass/libs/_jquery-ui.scss */
.ui-datepicker-multi .ui-datepicker-group table {
  width: 95%;
  margin: 0 auto .4em;
}

/* line 202, ../sass/libs/_jquery-ui.scss */
.ui-datepicker-multi-2 .ui-datepicker-group {
  width: 50%;
}

/* line 205, ../sass/libs/_jquery-ui.scss */
.ui-datepicker-multi-3 .ui-datepicker-group {
  width: 33.3%;
}

/* line 208, ../sass/libs/_jquery-ui.scss */
.ui-datepicker-multi-4 .ui-datepicker-group {
  width: 25%;
}

/* line 211, ../sass/libs/_jquery-ui.scss */
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
  border-left-width: 0;
}

/* line 215, ../sass/libs/_jquery-ui.scss */
.ui-datepicker-multi .ui-datepicker-buttonpane {
  clear: left;
}

/* line 218, ../sass/libs/_jquery-ui.scss */
.ui-datepicker-row-break {
  clear: both;
  width: 100%;
  font-size: 0;
}

/* RTL support */
/* line 225, ../sass/libs/_jquery-ui.scss */
.ui-datepicker-rtl {
  direction: rtl;
}

/* line 228, ../sass/libs/_jquery-ui.scss */
.ui-datepicker-rtl .ui-datepicker-prev {
  right: 2px;
  left: auto;
}

/* line 232, ../sass/libs/_jquery-ui.scss */
.ui-datepicker-rtl .ui-datepicker-next {
  left: 2px;
  right: auto;
}

/* line 236, ../sass/libs/_jquery-ui.scss */
.ui-datepicker-rtl .ui-datepicker-prev:hover {
  right: 1px;
  left: auto;
}

/* line 240, ../sass/libs/_jquery-ui.scss */
.ui-datepicker-rtl .ui-datepicker-next:hover {
  left: 1px;
  right: auto;
}

/* line 244, ../sass/libs/_jquery-ui.scss */
.ui-datepicker-rtl .ui-datepicker-buttonpane {
  clear: right;
}

/* line 247, ../sass/libs/_jquery-ui.scss */
.ui-datepicker-rtl .ui-datepicker-buttonpane button {
  float: left;
}

/* line 250, ../sass/libs/_jquery-ui.scss */
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
.ui-datepicker-rtl .ui-datepicker-group {
  float: right;
}

/* line 254, ../sass/libs/_jquery-ui.scss */
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
  border-right-width: 0;
  border-left-width: 1px;
}

/* line 9, ../sass/libs/_uniform.scss */
.checker input[type=checkbox],
.checker input[type=radio],
.radio input[type=checkbox],
.radio input[type=radio] {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* line 19, ../sass/libs/_uniform.scss */
.checker > span,
.radio > span {
  position: relative;
  display: block;
}

/* line 27, ../sass/libs/_uniform.scss */
.checker span {
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  margin-top: -0.375rem;
  z-index: 1;
}

/* line 39, ../sass/libs/_uniform.scss */
.selector {
  position: relative;
}
/* line 42, ../sass/libs/_uniform.scss */
.selector select {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: none;
}

/*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */
/* line 2, ../sass/libs/_fancybox.scss */
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp {
  padding: 0;
  margin: 0;
  border: 0;
  outline: none;
  vertical-align: top;
}

/* line 20, ../sass/libs/_fancybox.scss */
.fancybox-wrap {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 8020;
}

/* line 27, ../sass/libs/_fancybox.scss */
.fancybox-skin {
  position: relative;
  background: #fff;
  color: #444;
  text-shadow: none;
  border-radius: 2px;
}

/* line 37, ../sass/libs/_fancybox.scss */
.fancybox-opened {
  z-index: 8030;
}

/* line 41, ../sass/libs/_fancybox.scss */
.fancybox-opened .fancybox-skin {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

/* line 47, ../sass/libs/_fancybox.scss */
.fancybox-outer, .fancybox-inner {
  position: relative;
}

/* line 51, ../sass/libs/_fancybox.scss */
.fancybox-inner {
  overflow: hidden;
}

/* line 55, ../sass/libs/_fancybox.scss */
.fancybox-type-iframe .fancybox-inner {
  -webkit-overflow-scrolling: touch;
}

/* line 59, ../sass/libs/_fancybox.scss */
.fancybox-error {
  color: #444;
  font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
  margin: 0;
  padding: 15px;
  white-space: nowrap;
}

/* line 67, ../sass/libs/_fancybox.scss */
.fancybox-image, .fancybox-iframe {
  display: block;
  width: 100%;
  height: 100%;
}

/* line 73, ../sass/libs/_fancybox.scss */
.fancybox-image {
  max-width: 100%;
  max-height: 100%;
}

/* line 78, ../sass/libs/_fancybox.scss */
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
  background-image: url("../images/fancybox/fancybox_sprite.png");
}

/* line 82, ../sass/libs/_fancybox.scss */
#fancybox-loading {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -22px;
  margin-left: -22px;
  background-position: 0 -108px;
  opacity: 0.8;
  cursor: pointer;
  z-index: 8060;
}

/* line 94, ../sass/libs/_fancybox.scss */
#fancybox-loading div {
  width: 44px;
  height: 44px;
  background: url("../images/fancybox/fancybox_loading.gif") center center no-repeat;
}

/* line 100, ../sass/libs/_fancybox.scss */
.fancybox-close {
  position: absolute;
  top: -18px;
  right: -18px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  z-index: 8040;
  background: url("../images/fancybox/btn-close.png") center center no-repeat;
}

/* line 111, ../sass/libs/_fancybox.scss */
.fancybox-nav {
  position: absolute;
  top: 0;
  width: 40%;
  height: 100%;
  cursor: pointer;
  text-decoration: none;
  background: transparent url("../images/fancybox/blank.gif");
  /* helps IE */
  -webkit-tap-highlight-color: transparent;
  z-index: 8040;
}

/* line 123, ../sass/libs/_fancybox.scss */
.fancybox-prev {
  left: 0;
}

/* line 127, ../sass/libs/_fancybox.scss */
.fancybox-next {
  right: 0;
}

/* line 131, ../sass/libs/_fancybox.scss */
.fancybox-nav span {
  position: absolute;
  top: 50%;
  width: 36px;
  height: 34px;
  margin-top: -18px;
  cursor: pointer;
  z-index: 8040;
  visibility: hidden;
}

/* line 142, ../sass/libs/_fancybox.scss */
.fancybox-prev span {
  left: 10px;
  background-position: 0 -36px;
}

/* line 147, ../sass/libs/_fancybox.scss */
.fancybox-next span {
  right: 10px;
  background-position: 0 -72px;
}

/* line 152, ../sass/libs/_fancybox.scss */
.fancybox-nav:hover span {
  visibility: visible;
}

/* line 156, ../sass/libs/_fancybox.scss */
.fancybox-tmp {
  position: absolute;
  top: -99999px;
  left: -99999px;
  visibility: hidden;
  max-width: 99999px;
  max-height: 99999px;
  overflow: visible !important;
}

/* Overlay helper */
/* line 168, ../sass/libs/_fancybox.scss */
.fancybox-lock {
  overflow: hidden !important;
  width: auto;
}

/* line 173, ../sass/libs/_fancybox.scss */
.fancybox-lock body {
  overflow: hidden !important;
}

/* line 177, ../sass/libs/_fancybox.scss */
.fancybox-lock-test {
  overflow-y: hidden !important;
}

/* line 181, ../sass/libs/_fancybox.scss */
.fancybox-overlay {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  display: none;
  z-index: 8010;
  background: url("../images/fancybox/fancybox_overlay.png");
}

/* line 191, ../sass/libs/_fancybox.scss */
.fancybox-overlay-fixed {
  position: fixed;
  bottom: 0;
  right: 0;
}

/* line 197, ../sass/libs/_fancybox.scss */
.fancybox-lock .fancybox-overlay {
  overflow: auto;
  overflow-y: scroll;
}

/* Title helper */
/* line 204, ../sass/libs/_fancybox.scss */
.fancybox-title {
  visibility: hidden;
  font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
  position: relative;
  text-shadow: none;
  z-index: 8050;
}

/* line 212, ../sass/libs/_fancybox.scss */
.fancybox-opened .fancybox-title {
  visibility: visible;
}

/* line 216, ../sass/libs/_fancybox.scss */
.fancybox-title-float-wrap {
  position: absolute;
  bottom: 0;
  right: 50%;
  margin-bottom: -35px;
  z-index: 8050;
  text-align: center;
}

/* line 225, ../sass/libs/_fancybox.scss */
.fancybox-title-float-wrap .child {
  display: inline-block;
  margin-right: -100%;
  padding: 2px 20px;
  background: transparent;
  /* Fallback for web browsers that doesn't support RGBa */
  background: rgba(0, 0, 0, 0.8);
  border-radius: 15px;
  text-shadow: 0 1px 2px #222;
  color: #FFF;
  font-weight: bold;
  line-height: 24px;
  white-space: nowrap;
}

/* line 241, ../sass/libs/_fancybox.scss */
.fancybox-title-outside-wrap {
  position: relative;
  margin-top: 10px;
  color: #fff;
}

/* line 247, ../sass/libs/_fancybox.scss */
.fancybox-title-inside-wrap {
  padding-top: 10px;
}

/* line 251, ../sass/libs/_fancybox.scss */
.fancybox-title-over-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  color: #fff;
  padding: 10px;
  background: #000;
  background: rgba(0, 0, 0, 0.8);
}

/*Retina graphics!*/
/*
 * qTip2 - Pretty powerful tooltips - v2.2.1
 * http://qtip2.com
 *
 * Copyright (c) 2014 
 * Released under the MIT licenses
 * http://jquery.org/license
 *
 * Date: Tue Sep 9 2014 07:03 EDT-0400
 * Plugins: tips viewport
 * Styles: core
 */
/* line 13, ../sass/libs/_jquery.qtip.scss */
.qtip {
  position: absolute;
  left: -28000px;
  top: -28000px;
  display: none;
  max-width: 280px;
  min-width: 50px;
  font-size: 10.5px;
  line-height: 12px;
  direction: ltr;
  box-shadow: none;
  padding: 0;
}

/* line 31, ../sass/libs/_jquery.qtip.scss */
.qtip-content {
  position: relative;
  padding: 8px;
  overflow: hidden;
  text-align: left;
  word-wrap: break-word;
}
/* line 38, ../sass/libs/_jquery.qtip.scss */
.qtip-content p {
  line-height: 1.66667;
  margin-bottom: 0;
}

/* line 44, ../sass/libs/_jquery.qtip.scss */
.qtip-titlebar {
  position: relative;
  padding: 5px 35px 5px 10px;
  overflow: hidden;
  border-width: 0 0 1px;
  font-weight: bold;
}

/* line 53, ../sass/libs/_jquery.qtip.scss */
.qtip-titlebar + .qtip-content {
  border-top-width: 0 !important;
}

/* Default close button class */
/* line 56, ../sass/libs/_jquery.qtip.scss */
.qtip-close {
  position: absolute;
  right: -9px;
  top: -9px;
  z-index: 11;
  /* Overlap .qtip-tip */
  cursor: pointer;
  outline: medium none;
  border: 1px solid transparent;
}

/* line 67, ../sass/libs/_jquery.qtip.scss */
.qtip-titlebar .qtip-close {
  right: 4px;
  top: 50%;
  margin-top: -9px;
}

/* line 72, ../sass/libs/_jquery.qtip.scss */
* html .qtip-titlebar .qtip-close {
  top: 16px;
}

/* IE fix */
/* line 74, ../sass/libs/_jquery.qtip.scss */
.qtip-titlebar .ui-icon,
.qtip-icon .ui-icon {
  display: block;
  text-indent: -1000em;
  direction: ltr;
}

/* line 81, ../sass/libs/_jquery.qtip.scss */
.qtip-icon, .qtip-icon .ui-icon {
  border-radius: 3px;
  text-decoration: none;
}

/* line 88, ../sass/libs/_jquery.qtip.scss */
.qtip-icon .ui-icon {
  width: 18px;
  height: 14px;
  line-height: 14px;
  text-align: center;
  text-indent: 0;
  font: normal bold 10px/13px Tahoma,sans-serif;
  color: inherit;
  background: transparent none no-repeat -100em -100em;
}

/* Applied to 'focused' tooltips e.g. most recently displayed/interacted with */
/* Applied on hover of tooltips i.e. added/removed on mouseenter/mouseleave respectively */
/* Default tooltip style */
/* line 108, ../sass/libs/_jquery.qtip.scss */
.qtip-default {
  border: 1px solid #e2e2e2;
  background-color: #fff;
  color: #555;
  border-radius: 3px;
}

/* line 115, ../sass/libs/_jquery.qtip.scss */
.qtip-default .qtip-titlebar {
  background-color: #FFEF93;
}

/* line 119, ../sass/libs/_jquery.qtip.scss */
.qtip-default .qtip-icon {
  border-color: #CCC;
  background: #F1F1F1;
  color: #777;
}

/* line 125, ../sass/libs/_jquery.qtip.scss */
.qtip-default .qtip-titlebar .qtip-close {
  border-color: #AAA;
  color: #111;
}

/* line 131, ../sass/libs/_jquery.qtip.scss */
.qtip .qtip-tip {
  margin: 0 auto;
  overflow: hidden;
  z-index: 10;
}

/* Opera bug #357 - Incorrect tip position
https://github.com/Craga89/qTip2/issues/367 */
/* line 140, ../sass/libs/_jquery.qtip.scss */
x:-o-prefocus, .qtip .qtip-tip {
  visibility: hidden;
}

/* line 144, ../sass/libs/_jquery.qtip.scss */
.qtip .qtip-tip,
.qtip .qtip-tip .qtip-vml,
.qtip .qtip-tip canvas {
  position: absolute;
  color: #123456;
  background: transparent;
  border: 0 dashed transparent;
}

/* line 154, ../sass/libs/_jquery.qtip.scss */
.qtip .qtip-tip canvas {
  top: 0;
  left: 0;
}

/* line 156, ../sass/libs/_jquery.qtip.scss */
.qtip .qtip-tip .qtip-vml {
  behavior: url(#default#VML);
  display: inline-block;
  visibility: visible;
}

@media all and (max-width: 37.8025em) {
  /* line 164, ../sass/libs/_jquery.qtip.scss */
  .qtip-tipsy {
    left: 20px !important;
  }

  /* line 168, ../sass/libs/_jquery.qtip.scss */
  .qtip-tip {
    display: none !important;
  }
}
/* Slider */
/* line 3, ../sass/libs/_slick.scss */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

/* line 17, ../sass/libs/_slick.scss */
.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}
/* line 24, ../sass/libs/_slick.scss */
.slick-list:focus {
  outline: none;
}
/* line 28, ../sass/libs/_slick.scss */
.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

/* line 33, ../sass/libs/_slick.scss */
.slick-slider .slick-track,
.slick-slider .slick-list {
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/* line 42, ../sass/libs/_slick.scss */
.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
/* line 50, ../sass/libs/_slick.scss */
.slick-track:before, .slick-track:after {
  content: "";
  display: table;
}
/* line 56, ../sass/libs/_slick.scss */
.slick-track:after {
  clear: both;
}
/* line 60, ../sass/libs/_slick.scss */
.slick-loading .slick-track {
  visibility: hidden;
}

/* line 64, ../sass/libs/_slick.scss */
.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none;
}
/* line 68, ../sass/libs/_slick.scss */
[dir="rtl"] .slick-slide {
  float: right;
}
/* line 71, ../sass/libs/_slick.scss */
.slick-slide img {
  display: block;
}
/* line 74, ../sass/libs/_slick.scss */
.slick-slide.slick-loading img {
  display: none;
}
/* line 80, ../sass/libs/_slick.scss */
.slick-slide.dragging img {
  pointer-events: none;
}
/* line 84, ../sass/libs/_slick.scss */
.slick-initialized .slick-slide {
  display: block;
}
/* line 88, ../sass/libs/_slick.scss */
.slick-loading .slick-slide {
  visibility: hidden;
}
/* line 92, ../sass/libs/_slick.scss */
.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

/* line 98, ../sass/libs/_slick.scss */
.slick-arrow.slick-hidden {
  display: none;
}