@charset "UTF-8";
.cf,
.clear,
.clearfix, .wrap {
zoom: 1;
}
.cf:before,
.clear:before,
.clearfix:before, .wrap:before, .cf:after,
.clear:after,
.clearfix:after, .wrap:after {
content: " ";
display: table;
}
.cf:after,
.clear:after,
.clearfix:after, .wrap:after {
clear: both;
}
:root {
--forced-color-button-text: ButtonText;
--forced-color-disabled-text: GrayText;
--forced-color-link-text: LinkText;
--forced-color-background: Canvas;
--forced-light-colour-blue: #00009f;
--forced-light-colour-black: #000;
--forced-dark-border-colour-white: #fff;
--forced-light-link-colour: var(--forced-light-colour-blue);
--forced-dark-link-colour: rgb(255, 255, 0);
}
:root {
--header-height: 1px;
--footer-height: 1px;
}
/*! normalize.css v3.0.1 | 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.
*/
html {
font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/**
* Remove default margin.
*/
body {
margin: 0;
}
/* HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined for any HTML5 element in IE 8/9.
* Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
* Correct `block` display not defined for `main` in IE 11.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary,
picture {
display: block;
}
/**
* 1. Correct `inline-block` display not defined in IE 8/9.
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
*/
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.
*/
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.
*/
[hidden],
template {
display: none;
}
/* Links
========================================================================== */
/**
* Remove the gray background color from active links in IE 10.
*/
a {
background: transparent;
}
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/* Text-level semantics
========================================================================== */
/**
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
*/
abbr[title] {
border-bottom: 0.063em dotted;
}
/**
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
*/
b,
strong {
font-weight: bold;
}
/**
* Address styling not present in Safari and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari, and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Address styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000;
}
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* Embedded content
========================================================================== */
/**
* Remove border when inside `a` element in IE 8/9/10.
*/
img {
border: 0;
}
/**
* Correct overflow not hidden in IE 9/10/11.
*/
svg:not(:root) {
overflow: hidden;
}
/* Grouping content
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari.
*/
figure {
margin: 1em 40px;
}
/**
* Address differences between Firefox and other browsers.
*/
hr {
box-sizing: content-box;
height: 0;
}
/**
* Contain overflow in all browsers.
*/
pre {
overflow: auto;
}
/**
* Address odd `em`-unit font size rendering in all browsers.
*/
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.
*/
button,
input,
optgroup,
select,
textarea {
color: inherit; /* 1 */
font: inherit; /* 2 */
margin: 0; /* 3 */
}
/**
* Address `overflow` set to `hidden` in IE 8/9/10/11.
*/
button {
overflow: visible;
}
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
* Correct `select` style inheritance in Firefox.
*/
button,
select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
*/
button,
html [type=button],
[type=reset],
[type=submit] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
input {
line-height: normal;
}
/**
* 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.
*/
input[type=checkbox],
input[type=radio] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
* `font-size` values of the `input`, it causes the cursor style of the
* decrement button to change from `default` to `text`.
*/
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome
* (include `-moz` to future-proof).
*/
input[type=search] {
-webkit-appearance: textfield; /* 1 */ /* 2 */
box-sizing: content-box;
}
/**
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
* Safari (but not Chrome) clips the cancel button when the search input has
* padding (and `textfield` appearance).
*/
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct `color` not being inherited in IE 8/9/10/11.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0; /* 1 */
padding: 0; /* 2 */
}
/**
* Remove default vertical scrollbar in IE 8/9/10/11.
*/
textarea {
overflow: auto;
}
/**
* Don't inherit the `font-weight` (applied by a rule above).
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
*/
optgroup {
font-weight: bold;
}
/* Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
html,
body {
height: 100%;
}
body {
overflow-x: hidden;
}
html {
font-size: 16px;
font-size: 1rem;
line-height: 1.5;
background-color: #fff;
}
body,
pre,
select,
input,
textarea,
button {
color: #111;
font-family: "proxima-nova", arial, -apple-system, BlinkMacSystemFont, "avenir next", avenir, helvetica, "helvetica neue", ubuntu, roboto, noto, "segoe ui", "Arial Unicode MS", "DejaVu Sans", "Lucida Sans Unicode", "Segoe UI Symbol", "FreeSans", "Meiryo UI", "MS UI Gothic", "Everson Mono Unicode", Meiryo, "MS Gothic", "MS Mincho", "MS PGothic", "MS PMincho", "Meslo LG L", "Meslo LG L DZ", "Meslo M L", "Meslo M L DZ", "Meslo S L", "Meslo S L DZ", "Symbola", "DejaVu Sans Condensed", "DejaVu Sans Mono", Code2000, "Everson Mono", Quivira, sans-serif;
text-rendering: optimizeLegibility;
font-feature-settings: "ss01";
font-feature-settings: "ss01" on;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-l, .display-xl, .display-xxl {
font-family: proxima-nova;
font-weight: bold;
transition: font-size 0.2s linear;
color: #111;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
.h1 a, .h2 a, .h3 a, .h4 a, .h5 a, .h6 a,
.display-l a, .display-xl a, .display-xxl a {
text-decoration: none;
color: #111;
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover,
.h1 a:hover, .h2 a:hover, .h3 a:hover, .h4 a:hover, .h5 a:hover, .h6 a:hover,
.display-l a:hover, .display-xl a:hover, .display-xxl a:hover {
color: #00aca1;
}
h1, .h1 {
font-size: 30px;
font-size: 1.875rem;
line-height: 1;
letter-spacing: -0.02em;
margin: 1.125em 0 0.75em 0;
}
@media (min-width: 701px) {
h1, .h1 {
font-size: 36px;
font-size: 2.25rem;
line-height: 1.1666666667;
letter-spacing: -0.0277777778em;
}
}
@media (min-width: 941px) {
h1, .h1 {
font-size: 36px;
font-size: 2.25rem;
line-height: 1.1666666667;
letter-spacing: -0.0277777778em;
}
}
h2, .h2 {
font-size: 21px;
font-size: 1.3125rem;
line-height: 1.1428571429;
letter-spacing: -0.0142857143em;
margin: 1.125em 0 0.75em 0;
}
@media (min-width: 701px) {
h2, .h2 {
font-size: 28px;
font-size: 1.75rem;
line-height: 1.0714285714;
letter-spacing: -0.0214285714em;
}
}
@media (min-width: 941px) {
h2, .h2 {
font-size: 28px;
font-size: 1.75rem;
line-height: 1.0714285714;
letter-spacing: -0.0214285714em;
}
}
h3, .h3 {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.3333333333;
letter-spacing: 0em;
margin: 1.125em 0 0.75em 0;
}
@media (min-width: 701px) {
h3, .h3 {
font-size: 21px;
font-size: 1.3125rem;
line-height: 1.1428571429;
letter-spacing: -0.0142857143em;
}
}
@media (min-width: 941px) {
h3, .h3 {
font-size: 21px;
font-size: 1.3125rem;
line-height: 1.1428571429;
letter-spacing: -0.0142857143em;
}
}
h4, .h4 {
font-size: 16px;
font-size: 1rem;
line-height: 1.5;
letter-spacing: 0em;
margin: 1.125em 0 0.75em 0;
}
@media (min-width: 701px) {
h4, .h4 {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.3333333333;
letter-spacing: 0em;
}
}
@media (min-width: 941px) {
h4, .h4 {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.3333333333;
letter-spacing: 0em;
}
}
h5, .h5 {
font-size: 16px;
font-size: 1rem;
line-height: 1.5;
letter-spacing: 0em;
margin: 1.125em 0 0.75em 0;
}
@media (min-width: 701px) {
h5, .h5 {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.3333333333;
letter-spacing: 0em;
}
}
@media (min-width: 941px) {
h5, .h5 {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.3333333333;
letter-spacing: 0em;
}
}
h6, .h6 {
font-size: 16px;
font-size: 1rem;
line-height: 1.5;
letter-spacing: 0em;
margin: 1.125em 0 0.75em 0;
}
@media (min-width: 701px) {
h6, .h6 {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.3333333333;
letter-spacing: 0em;
}
}
@media (min-width: 941px) {
h6, .h6 {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.3333333333;
letter-spacing: 0em;
}
}
.display-xs {
font-size: 16px;
font-size: 1rem;
line-height: 1.5;
letter-spacing: 0em;
margin: 1.125em 0 0.75em 0;
}
@media (min-width: 701px) {
.display-xs {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.3333333333;
letter-spacing: 0em;
}
}
@media (min-width: 941px) {
.display-xs {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.3333333333;
letter-spacing: 0em;
}
}
.display-s {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.3333333333;
letter-spacing: 0em;
margin: 1.125em 0 0.75em 0;
}
@media (min-width: 701px) {
.display-s {
font-size: 21px;
font-size: 1.3125rem;
line-height: 1.1428571429;
letter-spacing: 0em;
}
}
@media (min-width: 941px) {
.display-s {
font-size: 21px;
font-size: 1.3125rem;
line-height: 1.1428571429;
letter-spacing: 0em;
}
}
.display-m {
font-size: 21px;
font-size: 1.3125rem;
line-height: 1.1428571429;
letter-spacing: -0.0142857143em;
margin: 1.125em 0 0.75em 0;
}
@media (min-width: 701px) {
.display-m {
font-size: 28px;
font-size: 1.75rem;
line-height: 1.0714285714;
letter-spacing: -0.0214285714em;
}
}
@media (min-width: 941px) {
.display-m {
font-size: 28px;
font-size: 1.75rem;
line-height: 1.0714285714;
letter-spacing: -0.0214285714em;
}
}
.display-l {
font-size: 24px;
font-size: 1.5rem;
line-height: 1;
letter-spacing: -0.025em;
margin: 1.125em 0 0.75em 0;
}
@media (min-width: 701px) {
.display-l {
font-size: 36px;
font-size: 2.25rem;
line-height: 1;
letter-spacing: -0.0277777778em;
}
}
@media (min-width: 941px) {
.display-l {
font-size: 48px;
font-size: 3rem;
line-height: 1;
letter-spacing: -0.0208333333em;
}
}
.display-xl {
font-size: 30px;
font-size: 1.875rem;
line-height: 1;
letter-spacing: -0.02em;
margin: 1.125em 0 0.75em 0;
}
@media (min-width: 701px) {
.display-xl {
font-size: 48px;
font-size: 3rem;
line-height: 1;
letter-spacing: -0.0208333333em;
}
}
@media (min-width: 941px) {
.display-xl {
font-size: 60px;
font-size: 3.75rem;
line-height: 1;
letter-spacing: -0.0166666667em;
}
}
.display-xxl {
font-size: 36px;
font-size: 2.25rem;
line-height: 1;
letter-spacing: -0.0166666667em;
margin: 1.125em 0 0.75em 0;
}
@media (min-width: 701px) {
.display-xxl {
font-size: 60px;
font-size: 3.75rem;
line-height: 0.5;
letter-spacing: -0.0166666667em;
}
}
@media (min-width: 941px) {
.display-xxl {
font-size: 72px;
font-size: 4.5rem;
line-height: 1;
letter-spacing: -0.0138888889em;
}
}
p {
margin: 0 0 1.5em 0;
}
blockquote {
font-family: "Georgia", Times, serif;
font-style: italic;
margin-left: 0;
padding-left: 24px;
border-left: 2px solid #ddd;
margin-bottom: 12px;
}
blockquote p {
margin-bottom: 0;
}
.quotee {
text-align: right;
}
hr {
display: block;
height: 0;
margin: 1.5em 0;
color: transparent;
border-top: 1px dashed #bbb;
border-style: dashed;
}
.hr--solid {
border-top: 2px solid rgba(187, 187, 187, 0.66);
}
sub,
sup {
font-size: smaller;
line-height: 90%;
vertical-align: sub;
}
sup {
vertical-align: super;
}
mark,
ins {
background-color: #fff9dd;
line-height: 90%;
padding: 0 0.125em;
}
ins {
background-color: #f0f0f0;
}
del,
s {
line-height: 90%;
text-decoration: line-through;
}
small,
.small {
font-size: 15px;
}
.leader {
font-size: 21px;
}
.info {
color: #767676;
}
.greyed-out {
color: #bbb;
}
.charanga-green {
color: #00aca1;
}
.charanga-green-on-white {
color: #01857c;
}
span.amp {
font-family: Baskerville, "Goudy Old Style", "Caslon", Palatino, "Book Antiqua", serif;
font-style: italic;
}
.unicode {
font-family: "Arial Unicode MS", "DejaVu Sans", "Lucida Sans Unicode", "Segoe UI Symbol", "FreeSans", "Meiryo UI", "MS UI Gothic", "Everson Mono Unicode", Meiryo, "MS Gothic", "MS Mincho", "MS PGothic", "MS PMincho", "Meslo LG L", "Meslo LG L DZ", "Meslo M L", "Meslo M L DZ", "Meslo S L", "Meslo S L DZ", "Symbola", "DejaVu Sans Condensed", "DejaVu Sans Mono", Code2000, "Everson Mono", Quivira, sans-serif;
}
.code {
font-family: Consolas, monaco, "Courier", "Courier New", monospace;
}
.bold {
font-weight: bold;
}
.regular {
font-weight: normal;
}
.italic {
font-style: italic;
}
.underline {
text-decoration: underline;
}
.small-caps {
font-variant: small-caps;
}
.lowercase {
text-transform: lowercase;
}
.uppercase {
text-transform: uppercase;
}
.capitalize {
text-transform: capitalize;
}
.align-left {
text-align: left;
}
.align-center {
text-align: center;
}
.align-right {
text-align: right;
}
.align-justify {
text-align: justify;
}
.nowrap {
white-space: nowrap;
}
.break-word {
word-wrap: break-word;
}
p:empty {
display: none;
}
.page-secondary blockquote p:last-of-type:after {
bottom: -93px;
}
h1 {
margin-top: 0;
}
sup {
top: 0;
}
.fs-s {
font-size: 14px;
}
.new {
color: #f44336;
font-size: 30px;
text-transform: uppercase;
}
.leader {
color: #000;
line-height: 1.3em;
margin-bottom: 18px;
}
.display-s,
.display-m {
color: #111;
}
.hero .display-xl {
text-shadow: 1px 1px 3px #999;
}
blockquote {
position: relative;
border-left: none;
padding-left: 45px;
padding-right: 40px;
}
blockquote p {
color: #767676;
font-family: "Georgia", Times, serif;
margin-bottom: 10px;
}
blockquote p:first-child,
blockquote p:last-child,
blockquote li:first-child,
blockquote li:last-child {
position: relative;
}
blockquote p:first-child:before,
blockquote li:first-child:before {
content: "“";
font-size: 100px;
position: absolute;
left: -48px;
top: -37px;
font-style: normal;
color: #999;
}
blockquote p:last-of-type:after,
blockquote li:last-of-type:after {
content: "”";
font-size: 100px;
vertical-align: sub;
position: absolute;
right: -45px;
bottom: -83px;
font-style: normal;
color: #999;
}
blockquote .quotee {
color: #767676;
font-style: normal;
line-height: 18px;
}
.page-about-charanga blockquote p:last-of-type:after {
right: auto;
}
.site-aside h2 {
color: #fff;
font-size: 19px;
font-weight: bold;
height: 36px;
line-height: 1.9em;
margin-bottom: 12px !important;
}
.site-aside h2:before {
color: #fff;
display: inline-block;
vertical-align: text-top;
}
.site-aside h2.what-teachers-say:before {
content: "“";
font-size: 145px;
font-weight: normal;
margin-top: 21px;
}
.site-aside h2.good-to-know:before {
content: "?";
font-size: 60px;
font-weight: bold;
padding-left: 5px;
margin-top: -4px;
margin-right: 5px;
}
.site-aside h2.key-facts:before {
content: "!";
font-size: 70px;
font-weight: bold;
padding-left: 5px;
margin-top: -10px;
margin-right: 5px;
}
.site-aside blockquote {
margin-top: 0;
padding-right: 0;
border-left: 0;
padding-left: 0;
margin-right: 2px;
}
.site-aside blockquote p:first-child:before {
content: "";
}
.site-aside blockquote p:last-of-type:after {
content: "";
}
.site-aside ul {
list-style: none;
padding-left: 0;
}
.site-aside ul li {
padding-bottom: 10px;
}
.site-aside ul li:last-of-type {
padding-bottom: 0;
}
@media screen {
.site-partner .site-aside h2,
.site-non-partner .site-aside h2 {
color: #111;
background-color: transparent !important;
margin-bottom: 0 !important;
}
.site-partner .site-aside h2:before,
.site-non-partner .site-aside h2:before {
display: none;
}
}
.no-quote-marks {
padding-right: 0;
border-left: 0;
padding-left: 0;
margin-right: 2px;
}
.no-quote-marks p:first-child:before {
content: "";
}
.no-quote-marks p:last-of-type:after {
content: "";
}
.team-member__heading {
font-size: 20px;
margin-top: 6px;
margin-bottom: 13px;
}
a {
cursor: pointer;
color: #333;
text-decoration: underline;
transition: color 0.15s ease-in;
/* start: These are technically the same, but use both */
/* end: These are technically the same, but use both */
}
a:hover,
a:focus,
a:active {
color: #00aca1;
text-decoration: underline;
}
#content {
outline: none;
}
.focus--mouse,
a.focus--mouse:focus,
button.focus--mouse:focus,
input.focus--mouse:focus,
select.focus--mouse:focus,
textarea.focus--mouse:focus {
outline: 0 none;
}
.print-link {
text-align: center;
width: 130px;
display: block;
float: right;
margin-right: 1px;
box-shadow: 0 2px 5px rgba(22, 29, 29, 0.15);
padding: 10px;
border-radius: 4px;
}
.print-link svg {
width: 32px;
color: #333;
cursor: pointer;
}
.print-link span {
display: block;
margin-top: 6px;
}
.breadcrumbs {
list-style: none;
padding-left: 0;
}
.breadcrumbs li {
display: inline;
}
.breadcrumbs li,
.breadcrumbs li a {
color: #767676;
}
.breadcrumbs a {
text-decoration: none;
}
.breadcrumbs li:after {
content: " ▸ ";
}
.breadcrumbs li:last-child:after {
content: none;
}
h1 + .breadcrumbs {
margin-top: -25px;
}
.previous-next {
margin-top: 80px;
display: block;
}
.link--previous {
width: 50%;
padding-right: 20px;
}
.link--next {
padding-left: 20px;
}
.link--previous-next {
color: #01857c;
text-decoration: none;
}
.link--previous-next:hover, .link--previous-next:focus {
text-decoration: none;
}
ul,
ol {
margin-top: 0;
padding-left: 20px;
}
nav ul,
nav ol {
list-style: none;
padding: 0;
margin: 0;
}
nav li {
position: relative;
}
nav a {
text-decoration: none;
display: block;
}
.list--unstyled {
list-style: none;
padding-left: 0;
margin-bottom: 0;
}
.list--ticks {
margin-left: 22px;
}
.list--ticks li:before {
position: absolute;
content: "✔";
color: #35af4c;
font-weight: bold;
font-size: 14pt;
margin-right: 6px;
margin-left: -22px;
}
@media (min-width: 501px) {
.list--two-columns {
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
-moz-column-gap: 10px;
column-gap: 10px;
}
}
form {
border: 0;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
label {
display: inline-block;
vertical-align: middle;
cursor: pointer;
}
legend {
border: 0;
white-space: normal;
}
textarea {
min-height: 5em;
vertical-align: top;
resize: vertical;
}
input,
button,
select,
label,
.btn {
vertical-align: middle;
font-family: inherit;
font-size: inherit;
}
.input-reset {
-webkit-appearance: none;
-moz-appearance: none;
}
:focus::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #fff;
}
:focus::-moz-placeholder { /* Firefox 19+ */
color: #fff;
}
:focus:-ms-input-placeholder { /* IE 10+ */
color: #fff;
}
:focus:-moz-placeholder { /* Firefox 18- */
color: #fff;
}
/* FORM FIELD PLACEHOLDER - (Global rules)
============================================= */
textarea,
input[type=text],
input[type=number],
input[type=email],
input[type=tel],
input[type=password],
input[type=url],
input[type=search] {
display: block;
max-width: 100%;
border: 1px solid #767676;
border-radius: 4px;
padding: 6px 12px;
box-sizing: border-box;
background-color: #fbfbfb;
font-family: inherit;
font-size: inherit;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
textarea::-ms-expand,
input[type=text]::-ms-expand,
input[type=number]::-ms-expand,
input[type=email]::-ms-expand,
input[type=tel]::-ms-expand,
input[type=password]::-ms-expand,
input[type=url]::-ms-expand,
input[type=search]::-ms-expand {
display: none;
}
textarea:focus,
input[type=text]:focus,
input[type=number]:focus,
input[type=email]:focus,
input[type=tel]:focus,
input[type=password]:focus,
input[type=url]:focus,
input[type=search]:focus {
background-color: #fff;
}
/* GLOBAL FORM STYLES
============================================= */
textarea {
width: 100%;
}
input::-moz-placeholder {
color: #999;
opacity: 1;
}
input:-ms-input-placeholder {
color: #999;
}
input::-webkit-input-placeholder {
color: #999;
}
.email-newsletter input,
.email-newsletter button[type=submit] {
width: 100%;
max-width: 230px;
}
a, .button-l {
cursor: pointer;
}
.button__unstyled {
text-align: left;
background: transparent;
border: none;
}
.button-l {
text-align: center;
text-decoration: none;
display: inline-block;
font-weight: 700;
padding: 0.25em 1em;
border-radius: 8px;
transition: all 0.3s;
background-color: #00aca1;
border: 5px solid transparent;
color: #fff;
box-shadow: 0 2px 5px rgba(22, 29, 29, 0.15);
}
.button-l:hover, .button-l:focus {
text-decoration: none;
transition: all 0s;
color: #fff;
background-color: #ff535e;
}
.button-l--secondary {
color: #000;
background-color: transparent;
border: 5px solid #00aca1;
}
.button-l--secondary:hover, .button-l--secondary:focus {
background: #ff535e;
color: #fff;
border: 5px solid #ff535e;
}
.site-header .button-l--secondary {
color: #fff;
}
.site-header .button-l--secondary:hover, .site-header .button-l--secondary:focus {
color: #fff;
}
.button-l--tertiary,
.button-l--tertiary:active {
color: #000;
background-color: #fff;
border: 5px solid #ddd;
}
.button-l--tertiary:hover, .button-l--tertiary:focus,
.button-l--tertiary:active:hover,
.button-l--tertiary:active:focus {
border: 5px solid #ff535e;
}
@media (min-width: 941px) {
.button--log-in--main {
position: absolute;
width: 125px;
top: 13px;
right: 24px;
font-size: 16px;
}
}
@media (min-width: 941px) {
.sidebar .button-l {
width: 100%;
}
}
@media (max-width: 940px) {
.sidebar .button-l {
width: 200px;
min-width: 230px;
}
}
@media (min-width: 700px) and (max-width: 940px) {
.sidebar .button-l:not([type=submit]) {
float: left;
min-height: 66px;
}
.sidebar .button-l:not([type=submit]):not(.button--free-trial) {
padding: 14px;
}
.sidebar .dropdown.is-active {
width: 230px;
float: left;
}
.sidebar .dropdown.is-active .dropdown__menu {
top: 75px;
}
}
@media (max-width: 700px) {
.sidebar .dropdown__menu {
left: 50%;
transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
}
}
.page-log-in .overlay__container .card--login .btn:hover,
.page-log-in .overlay__container .card--login .btn:focus {
background: #00b6a1;
}
.sidebar-buttons {
max-width: 240px;
}
.not-a-sidebar {
display: none;
width: 240px;
margin-left: auto;
margin-right: auto;
}
.not-a-sidebar .button-l {
display: block;
width: 100%;
}
@media (max-width: 940px) {
.sidebar .sidebar-buttons {
display: none;
}
.not-a-sidebar {
display: block;
}
}
.sidebar-buttons .button-l {
height: 54px;
padding: 4px;
vertical-align: middle;
line-height: 36px;
}
.sidebar-buttons .button-l:hover span {
color: rgba(255, 255, 255, 0.8);
}
.sidebar-buttons .button--free-trial {
line-height: 1.2;
}
a.button--more {
display: inline-block;
padding: 0.25em 1em;
border: 1px solid;
color: #767676;
text-decoration: none;
border-radius: 8px;
width: -moz-max-content;
width: max-content;
}
a.button--more:hover {
color: #000;
border-color: #00aca1;
}
.button--unstyled {
text-align: left;
background: transparent;
border: none;
}
img {
-ms-interpolation-mode: bicubic;
}
img,
svg,
object,
embed,
video {
max-width: 100%;
height: auto;
}
iframe {
max-width: 100%;
}
svg {
cursor: default;
}
audio,
canvas,
img,
svg,
video,
picture {
vertical-align: middle;
}
figure,
.wp-caption {
max-width: 100%;
}
figure {
margin: 0 0 1.25em 0;
}
figure img {
margin-bottom: 0.75em;
}
figcaption {
color: #767676;
}
.video-play-button {
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
margin: -150px 0 0 -50px;
cursor: pointer;
}
.video-play-button__triangle {
fill: #000;
}
.video-play-button__circle {
stroke: #000;
stroke-width: 7px;
}
.video-play-button:hover .video-play-button__triangle,
.video-play-button:focus .video-play-button__triangle {
fill: #fff;
}
.video-play-button__circle {
stroke: 16px;
}
.video-play-button:hover .video-play-button__circle,
.video-play-button:focus .video-play-button__circle {
stroke: #fff;
}
.svg__icon {
width: 24px;
height: 24px;
border-radius: 4px;
}
/********************* Musical School which scheme *********************/
.which-scheme {
position: absolute;
width: 85%;
max-width: 280px;
padding: 10px;
border-radius: 16px;
background-color: #fff;
margin-bottom: 30px;
box-shadow: 0 2px 5px rgba(22, 29, 29, 0.15);
}
.which-scheme__letter {
font-size: 62px;
font-weight: 700;
margin-right: 10px;
line-height: 0.8em;
padding-bottom: 10px;
}
.which-scheme__text {
line-height: 1em;
}
@media (min-width: 701px) {
.which-scheme--b {
top: 110px;
right: 0;
}
.which-scheme--c {
top: 220px;
left: 8%;
}
}
@media (max-width: 700px) {
.which-scheme__container {
margin-top: 20px;
height: 340px;
}
}
@media screen and (max-width: 700px) {
.which-scheme--b {
top: 130px;
left: 50%;
transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
z-index: 3;
}
}
@media (max-width: 700px) {
.which-scheme--c {
top: 30px;
right: 0;
z-index: 2;
}
}
@media (max-width: 500px) {
.which-scheme__container {
height: 430px;
}
.which-scheme--b {
top: 115px;
z-index: 2;
}
.which-scheme--c {
top: 230px;
z-index: 3;
}
}
@media (min-width: 701px) {
.charangascotland .which-scheme--c,
.scotland .which-scheme--c {
top: 120px;
left: auto;
right: 0;
}
}
@media (max-width: 700px) {
.charangascotland .which-scheme__container,
.scotland .which-scheme__container {
height: 270px;
}
.charangascotland .which-scheme,
.scotland .which-scheme {
max-width: 55%;
}
.charangascotland .which-scheme--c,
.scotland .which-scheme--c {
top: 70px;
}
}
/********************* Musical School which scheme *********************/
.logo {
display: inline-block;
height: auto;
max-height: 100px;
}
@media (min-width: 701px) {
.scottish-images {
margin-top: 80px;
}
}
@media (max-width: 500px) {
.scottish-images > div {
width: 50%;
}
}
.scottish-image {
width: 100%;
}
.trainer-grid__image {
filter: grayscale(1);
}
.trainer-grid__image:hover, .trainer-grid__image:focus {
filter: sepia(90%) hue-rotate(120deg);
}
#overlay {
overflow: hidden;
transform: translateY(30px);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto auto;
transition: all 0.3s ease-out;
z-index: 99999;
}
#overlay.is-active {
opacity: 1;
}
#overlay__mask {
position: fixed;
z-index: 9999;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
transition: all 0.6s ease;
}
#overlay__mask.is-active {
opacity: 1;
}
#overlay__navbar {
position: fixed;
height: 60px;
top: 0;
left: 0;
right: 0;
z-index: 99999;
background: #000;
}
.is-active #overlay__navbar {
background: #222;
}
#overlay__content {
position: relative;
width: 100%;
height: 0;
}
#overlay-iframe {
position: absolute;
width: 100%;
height: 100%;
border: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
@keyframes pulse {
0% {
background-color: #000;
}
50% {
background-color: #333;
}
75% {
background-color: #da4619;
}
100% {
background-color: #000;
}
}
#overlay__close {
position: absolute;
top: 0;
right: 0;
display: block;
width: 60px;
height: 60px;
line-height: 53px;
text-align: center;
background: #000;
color: #fff;
transform: rotate(0deg);
transition: transform 0.6s ease-out 0s;
text-decoration: none;
}
#overlay__close #overlay__close-icon {
font-size: 48px;
font-weight: normal;
}
.is-active #overlay__close {
animation: pulse 2s;
}
.is-activated #overlay__close {
transform: rotate(-360deg);
}
.is-active #overlay__close:hover {
transition-delay: 0s;
background: #da4619;
}
/* * * * * * * * * * * * * Mobile /under-l * * * * * * * * * * * * */
.site-nav-toggle {
display: inline-block;
width: 110px;
float: right;
top: 0;
right: 0;
padding: 0.75em;
position: absolute;
bottom: 0;
margin: auto 12px;
height: 45px;
background-color: #e7e7e7;
border: #767676;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
.site-nav-toggle:link, .site-nav-toggle:hover, .site-nav-toggle:active, .site-nav-toggle:focus {
text-decoration: none;
}
@media (min-width: 941px) {
.site-nav-toggle {
display: none;
}
}
.site-nav-toggle__icon {
position: relative;
margin-top: 8px;
margin-bottom: 8px;
float: left;
}
.site-nav-toggle__icon, .site-nav-toggle__icon:before, .site-nav-toggle__icon:after {
display: block;
width: 30px;
height: 3px;
background-color: #111;
transition-property: background-color, transform;
transition-duration: 0.3s;
}
.site-nav-toggle__icon:before, .site-nav-toggle__icon:after {
position: absolute;
content: "";
}
.site-nav-toggle__icon:before {
top: -8px;
}
.site-nav-toggle__icon:after {
top: 8px;
}
.site-nav-toggle__text {
margin-left: 12px;
display: inline-block;
font-size: 16px;
font-size: 1rem;
color: #111;
}
.nav-dropdown__item--parent.is-pinned > .nav-dropdown__link:after {
transform: rotate(90deg);
}
/* * * * * * * * * SIDEBAR MENU * * * * * * * * */
.sidebar .main-menu-label > a {
display: none;
}
.sidebar:not(.sidebar-news-or-blog) .sidebar__menu {
margin-bottom: 30px;
}
@media (max-width: 940px) {
.sidebar:not(.sidebar-news-or-blog) .sidebar__menu {
display: none;
}
}
@media (max-width: 940px) {
.menu-main-container {
display: none;
}
}
.menu {
padding-left: 0;
list-style: none;
}
.menu > li {
display: none;
}
.menu > .current-menu-item,
.menu > .current-menu-parent {
display: list-item;
}
.menu a {
text-decoration: none;
}
.menu > li > a {
font-weight: bold;
}
.menu .sub-menu {
padding-left: 0;
list-style: none;
}
.menu .sub-menu > li {
padding: 4px 0;
line-height: 1em;
}
.menu .sub-menu > li a {
display: inline-block;
color: #111;
border-bottom: 2px solid transparent;
padding: 2px 0;
}
.menu .sub-menu > li a:hover, .menu .sub-menu > li a:focus {
color: #111;
font-weight: initial;
border-bottom: 2px solid #222;
}
.menu .sub-menu > .current-menu-item a {
color: #111;
font-weight: 400;
border-bottom: 2px solid #00aca1;
}
.menu-label-heading {
display: inline-block;
font-size: 12px;
font-weight: normal;
text-transform: uppercase;
letter-spacing: 0.2em;
margin-top: 20px;
margin-bottom: 4px !important;
cursor: default;
color: #767675;
}
.menu-label-heading--first {
margin-top: 10px;
}
.sidebar__menu > .menu-label-heading--first,
.sidebar__news .menu-label-heading--first {
margin-top: 13px;
}
.menu-label-heading__item > a {
color: #111;
cursor: default;
}
@media (max-width: 940px) {
.nav-dropdown__item--menu-label-heading__item,
.nav-horizontal__item--menu-label-heading__item {
color: #888;
padding-left: 12px;
}
}
@media (max-width: 940px) {
.no-js .nav-dropdown__sub-menu {
top: 100%;
height: auto;
}
.no-js .nav-dropdown__sub-menu--2 {
display: block;
}
.site-nav-toggle {
top: 18px;
position: relative;
}
.site-nav-toggle-close {
display: none;
}
#navigation:target {
padding-top: 150px;
}
#navigation:target .site-nav-toggle-open {
display: none;
}
#navigation:target .site-nav-toggle-close {
display: block;
}
#navigation:target .site-nav-toggle__icon {
height: 0;
}
#navigation:target .site-nav-toggle__icon:before {
top: 0;
transform: rotate(45deg);
}
#navigation:target .site-nav-toggle__icon:after {
top: 0;
transform: rotate(135deg);
}
#navigation:target .screen-reader-text {
top: 0;
left: 0;
}
}
@media (min-width: 941px) {
.nav-dropdown__item--parent:focus-within .nav-dropdown__sub-menu,
.nav-dropdown__item--parent:hover .nav-dropdown__sub-menu {
top: 100%;
height: auto;
}
.nav-dropdown__item:focus-within > .nav-dropdown__link {
color: #00aca1;
}
}
@media (max-width: 940px) {
.nav-dropdown__item > .nav-dropdown__link--trigger {
padding: 14px;
}
.nav-dropdown__item--parent .nav-dropdown__link:after {
display: none;
}
.nav-dropdown__link--trigger {
position: absolute;
right: 8px;
padding-top: 11px;
padding-bottom: 7px;
width: 86px;
height: 49px;
margin-top: 1px;
border-left: 1px solid #999;
border-bottom: 1px solid #999;
z-index: 10;
}
.nav-dropdown__link--trigger:hover {
text-decoration: none;
}
.nav-dropdown__link--trigger:after {
font-size: 1.125rem;
position: absolute;
right: 12px;
content: "";
width: 0;
height: 0;
color: #eee;
border-top: 10px solid !important;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
margin-top: 3px;
margin-right: 20px;
}
.nav-dropdown__item--parent > .nav-dropdown__link--trigger.open:after,
.nav-dropdown__item--parent.is-pinned > .nav-dropdown__link--trigger:after {
transform: rotate(90deg);
}
.nav-dropdown__item--parent > .nav-dropdown__link--trigger:after {
transition-duration: 0.3s;
}
}
@media (min-width: 941px) {
.nav-dropdown__link--trigger {
display: none;
}
}
@media (max-width: 940px) {
.site-nav-toggle {
text-transform: uppercase;
background-color: #282828;
top: 6px;
width: 140px;
padding: 0.55em;
border-radius: 6px;
border: 4px solid #000;
}
.site-nav-toggle__icon,
.site-nav-toggle__icon:before,
.site-nav-toggle__icon:after {
background-color: #fff;
}
.site-nav-toggle__text {
color: #fff;
font-size: 26px;
line-height: 0.85em;
margin-left: 10px;
}
.nav-dropdown {
background-color: #fff;
height: 0;
margin-top: 0;
}
.nav-dropdown__link--trigger {
height: 54px;
border-left: none;
border-bottom: none;
}
.nav-dropdown__link--trigger:after {
color: #ccc;
margin-top: 10px;
}
#navigation:target {
margin-top: 0;
padding-top: 0;
}
#navigation:target .nav-dropdown {
height: auto;
margin-top: 45px;
margin-top: -10px;
}
.nav-dropdown.mobile-menu .open ~ ul {
top: -9px;
}
}
@media (min-width: 941px) {
.nav-dropdown__item--parent.is-hovered .nav-dropdown__sub-menu {
top: -9999px;
height: 0;
}
}
.fluid-video-embed-wrapper {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
cursor: pointer;
margin: 0 auto;
border-radius: 10px;
overflow: hidden;
transition: 0.1s ease-out;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
margin-bottom: 24px;
}
.fluid-video-embed-wrapper:hover,
.fluid-video-embed-wrapper:focus {
filter: saturate(105%) brightness(1.1);
box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
}
.js-content-blocker[data-active=false] .fluid-video-embed {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
outline-color: black;
z-index: 5;
background: white;
}
.pagination {
display: flex;
align-items: center;
margin-top: 50px;
}
.pagination__link {
background: #e4e4e4;
color: #666;
margin-right: 6px;
padding: 4px 8px;
text-align: center;
text-decoration: none;
border-radius: 3px;
min-height: 24px;
min-width: 24px;
}
.pagination__link.pagination__active {
color: #000;
background-color: #00aca1;
font-weight: bold;
margin-right: 4px;
padding: 4px 8px;
}
.pagination__link:hover {
background-color: #999;
color: #fff;
}
.dismissable-popup__overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.75);
z-index: 20;
}
.dismissable-popup {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 21;
background: white;
width: 75%;
max-width: 350px;
max-height: 750px;
height: auto;
padding: 20px;
}
.dismissable-popup__content {
height: 90%;
overflow: auto;
}
.dismissable-popup__content:focus-visible {
outline: none;
}
.popup__logo {
max-height: var(--logo-height);
}
.dismissable-popup__footer {
height: 10%;
}
.close-partner-popup {
background: green;
color: white;
border: 0 none;
border-bottom: 2px solid rgba(0, 0, 0, 0.4);
border-radius: 5px;
padding: 3px 40px;
margin: 0px 15px 0 0;
}
@media all and (max-width: 940px) {
.dismissable-popup {
padding: 10px;
}
.popup__logo {
max-height: 80px;
}
.dismissable-popup-open .site-nav-toggle-open {
margin-top: 10px;
}
}
@keyframes radar-pulse {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 #00aca1;
}
70% {
transform: scale(1.05);
box-shadow: 0 0 0 10px rgba(255, 177, 66, 0);
}
100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(255, 177, 66, 0);
}
}
.dismissable-popup-open .header .button-l--primary,
.dismissable-popup-open .site-nav-toggle-open {
position: static;
z-index: 22;
animation: radar-pulse 2s infinite;
margin-bottom: 10px;
}
.x-follow-btn {
position: relative;
height: 20px;
box-sizing: border-box;
padding: 1px 12px 1px 12px;
background-color: #000;
color: #fff;
border-radius: 9999px;
font-weight: 500;
cursor: pointer;
font-family: "Helvetica Neue", Arial, sans-serif;
font-size: 12px;
display: inline-block;
}
.x-follow-btn .label {
margin-left: 3px;
white-space: nowrap;
}
.x-logo {
width: 12px;
height: auto;
position: relative;
bottom: 2px;
}
a.external-link:after,
a .external-link:after {
content: "";
width: 11px;
height: 11px;
margin-left: 4px;
background-image: url("https://charanga.com/images/icons/external-link-icon.png");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
}
@media (prefers-color-scheme: dark) and (forced-colors: active) {
a.external-link:after,
a .external-link:after {
background-image: url("https://charanga.com/images/icons/external-link-icon-dark.png");
}
}
@media (prefers-color-scheme: light) and (forced-colors: active) {
a.external-link:after,
a .external-link:after {
background-image: url("https://charanga.com/images/icons/external-link-icon-light.png");
}
}
.btn-success.external-link:after,
.button--charanga-green.external-link:after {
background-image: url("https://charanga.com/images/icons/external-link-icon-white.png");
}
@media (prefers-color-scheme: dark) and (forced-colors: active) {
.btn-success.external-link:after,
.button--charanga-green.external-link:after {
background-image: url("https://charanga.com/images/icons/external-link-icon-dark.png");
}
}
@media (prefers-color-scheme: light) and (forced-colors: active) {
.btn-success.external-link:after,
.button--charanga-green.external-link:after {
background-image: url("https://charanga.com/images/icons/external-link-icon-light.png");
}
}
@keyframes pulse {
0% {
background-color: #000;
}
50% {
background-color: #333;
}
75% {
background-color: #da4619;
}
100% {
background-color: #2a0a0a;
}
}
/*
TODO - Find and Replace/Generalise demostyles
======================================================*/
/*
Overlay specific settings
======================================================*/
/* demostyles */
.overlay__container,
.overlay__container * {
box-sizing: border-box;
}
.overlay {
transform: translateZ(0);
background: rgba(0, 0, 0, 0.8);
opacity: 0;
display: none;
}
.overlay__container {
position: relative;
overflow: hidden;
/* demostyles */
width: 235px;
height: 100px;
}
.overlay__trigger {
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
transition: opacity 0.1s 0.5s;
z-index: 1;
/* demostyles */
display: block;
padding: 0;
color: #fff !important;
text-transform: capitalize;
background-image: none;
}
.overlay__trigger:hover, .overlay__trigger:focus {
background-image: none;
background: url("https://assets.charanga.com/charanga.com/wp-content/themes/charanga_2013/images/graphics/login.png") 0 0 no-repeat transparent;
background-position: 0 -100px;
}
.overlay__trigger:hover img, .overlay__trigger:focus img {
visibility: hidden;
}
.no-js .overlay {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
width: 100%;
z-index: 99999;
}
.no-js .overlay__container:target .overlay,
.lte-ie9 .overlay__container:target .overlay {
position: fixed;
display: block;
opacity: 1 !important;
}
.lte-ie9 .overlay__container .overlay__content,
.lte-ie9 .overlay__container .overlay__close {
opacity: 1 !important;
}
body[data-overlay] .overlay {
display: block;
position: fixed;
opacity: 0;
overflow: hidden;
background: rgba(0, 0, 0, 0.85);
transition: opacity 0.15s 0.3s, width 0.3s 0.1s, height 0.3s 0.1s, top 0.3s 0.1s, left 0.3s 0.1s;
/* demostyles */
height: 100px;
width: 235px;
}
body[data-overlay] .overlay__container.open .overlay {
transition: width 0.3s 0.1s, height 0.3s 0.1s, top 0.3s 0.1s, left 0.3s 0.1s;
z-index: 1900;
opacity: 1;
pointer-events: auto; /*???*/
top: 0 !important;
left: 0 !important;
width: 100%;
height: 100%;
}
.overlay__navbar {
width: 100%;
height: 60px;
background: #333;
position: relative;
overflow: hidden;
}
.overlay__title {
color: #fff;
padding-left: 24px;
}
@keyframes pulse {
0% {
opacity: 0;
background-color: #da4619;
transform: scale(0.1) rotate(0deg);
}
50% {
background-color: #da4619;
}
75% {
background-color: #ff3b00;
transform: scale(1.2);
}
100% {
background-color: #da4619;
transform: scale(1) rotate(-360deg);
opacity: 1;
}
}
.overlay__close {
opacity: 0;
position: absolute;
top: 0;
right: 0;
display: block;
width: 60px;
height: 60px;
background: #da4619;
color: #fff;
line-height: 60px;
font-size: 60px;
font-family: Arial, sans-serif;
text-align: center;
text-decoration: none;
transition: transform 0.6s ease-out, font-size 0.1s ease-out;
overflow: hidden;
transform: translateZ(0);
}
.overlay__container.open .overlay__close,
.overlay__container:target .overlay__close {
animation: pulse 0.3s ease-in-out 1s 1 normal forwards;
}
.ie9 .overlay__container.open .overlay__close,
.ie9 .overlay__container:target .overlay__close {
opacity: 1;
background-color: #da4619;
}
.overlay__close:hover {
transform: translateZ(0);
transition: font-size 0.2s;
text-decoration: none;
color: #fff;
font-size: 72px;
line-height: 60px;
}
.overlay__navbar .overlay__close,
.overlay__navbar .overlay__close:visited,
.overlay__navbar .overlay__close:hover,
.overlay__navbar .overlay__close:active {
color: #fff;
}
.overlay__content-wrapper {
height: calc(100vh - 60px); /* same as parent */
overflow: hidden;
position: relative;
}
@keyframes scaleAndFade {
0% {
opacity: 0.5;
transform: scale(0.9) translate3d(0, 0, 0);
overflow: hidden;
}
70% {
transform: scale(1.03);
}
85% {
opacity: 1;
}
99% {
transform: scale(1);
overflow: hidden;
}
100% {
opacity: 1;
overflow-x: hidden;
overflow-y: auto;
}
}
.overlay__content {
opacity: 0;
transition: all 0.5s ease-out;
overflow: hidden;
margin: 0 auto;
height: 100%;
padding-bottom: 60px;
}
.overlay__container.open .overlay__content,
.overlay__container:target .overlay__content {
animation: scaleAndFade 0.35s ease-in-out 0.5s 1 normal;
animation-fill-mode: forwards;
}
.ie9 .overlay__container.open .overlay__content,
.ie9 .overlay__container:target .overlay__content {
opacity: 1;
}
/*
Content specific:
LOGIN BOXES
======================================================*/
.overlay__container .login-wrapper {
max-width: 940px;
}
.overlay__container .gutters {
padding-left: 8px;
padding-right: 8px;
}
.overlay__container .gu1of3--over-m {
max-width: 320px;
margin: 20px auto;
}
.overlay__container .gu1of2--over-m {
max-width: 470px;
margin: 20px auto;
}
@media screen and (min-width: 900px) {
.overlay__container .login-wrapper {
align-items: center;
}
.overlay__container .gu1of3--over-m {
float: left;
width: 33.33%;
display: flex;
}
.overlay__container .gu1of2--over-m {
float: left;
width: 50%;
display: flex;
}
}
@media screen and (max-width: 900px) {
.overlay__container .login-wrapper {
padding-bottom: 80px;
-webkit-overflow-scrolling: touch;
}
}
.overlay__container .card--login {
background: #fff;
border-radius: 10px;
font-size: 14px;
box-shadow: 0 2px 5px rgba(22, 29, 29, 0.15);
width: 100%;
}
.overlay__container .card--login__header {
padding: 8px 16px;
}
.overlay__container .card--login__body,
.overlay__container .card--login__footer {
padding: 16px;
}
.overlay__container .card--login__header,
.overlay__container .card--login__body {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.overlay__container .card--login__heading {
font-size: 18px;
margin-bottom: 20px;
margin-top: 4px;
line-height: 1;
}
.overlay__container .card--login__header img {
max-width: 100%;
height: auto;
}
.overlay__container .card--login__body {
overflow: hidden;
}
.overlay__container .card--login__footer {
font-size: 14px;
min-height: 78px;
font-weight: 700;
}
.overlay__container .login-wrapper a {
text-decoration: none;
color: #01857c;
}
.overlay__container .login-wrapper .free-trial-link a {
text-decoration: underline;
}
.overlay__container .card--login__footer p {
margin: 0;
font-size: 14px;
}
.overlay__container .login-wrapper a:hover {
text-decoration: underline;
color: #e05b28;
}
.overlay__container .card--login textarea,
.overlay__container .card--login input[type=text],
.overlay__container .card--login input[type=password],
.overlay__container .card--login input[type=datetime],
.overlay__container .card--login input[type=datetime-local],
.overlay__container .card--login input[type=date],
.overlay__container .card--login input[type=month],
.overlay__container .card--login input[type=time],
.overlay__container .card--login input[type=week],
.overlay__container .card--login input[type=number],
.overlay__container .card--login input[type=email],
.overlay__container .card--login input[type=url],
.overlay__container .card--login input[type=search],
.overlay__container .card--login input[type=tel],
.overlay__container .card--login input[type=color],
.overlay__container .card--login .uneditable-input {
background-color: #fff;
border: 1px solid #888;
box-shadow: none;
border-radius: 4px;
color: #555;
display: inline-block;
height: 20px;
line-height: 20px;
margin-bottom: 10px;
padding: 4px 6px;
vertical-align: middle;
font-size: 14px;
transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
box-sizing: content-box;
}
.overlay__container .card--login label {
font-size: 14px;
line-height: 1.25;
display: block;
margin-bottom: 5px;
font-weight: 700;
}
.overlay__container .card--login .btn,
.overlay__container .card--login .btn:visited {
padding: 5px 15px;
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
cursor: pointer;
border-radius: 4px;
font-size: 16px;
text-decoration: none;
font-weight: 700;
line-height: 21px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.2);
background: transparent !important;
border: 0 none;
text-shadow: 0 -1px 0 #008F7E;
}
.overlay__container .card--login .mv1 {
margin-top: 8px;
margin-bottom: 8px;
}
.overlay__container .card--login .mt1, .overlay__container .card--login .mv1, .overlay__container .card--login .ma1 {
margin-top: 8px;
}
.overlay__container .card--login .pt1, .overlay__container .card--login .pv1, .overlay__container .card--login .pa1 {
padding-top: 8px;
}
.overlay__container .only-on-mobile {
display: none;
}
@media screen and (max-width: 900px) and (max-height: 580px) {
.overlay__container .only-on-mobile {
display: block;
}
.overlay__container .card--login__body,
.overlay__container .card--login__footer {
transition: all 0.2s ease-in-out 2s;
}
.overlay__container .card--login__body h2, .overlay__container .card--login__body form, .overlay__container .card--login__body iframe, .overlay__container .card--login__body p,
.overlay__container .card--login__footer h2,
.overlay__container .card--login__footer form,
.overlay__container .card--login__footer iframe,
.overlay__container .card--login__footer p {
top: 0px;
}
.overlay__container .card--login__body {
padding: 16px;
}
.overlay__container .card--login__footer {
height: 80px !important;
padding: 16px;
}
.overlay__container body[data-overlay=open] .js-card--collapsed-on-mobile .card--login__body,
.overlay__container body[data-overlay=open] .js-card--collapsed-on-mobile .card--login__footer {
overflow: hidden;
transition: all 0.2s ease-in-out 0s;
min-height: 0;
height: 0 !important;
overflow: hidden;
padding-top: 0;
padding-bottom: 0;
}
.overlay__container body[data-overlay=open] .js-card--collapsed-on-mobile .card--login__body h2, .overlay__container body[data-overlay=open] .js-card--collapsed-on-mobile .card--login__body form, .overlay__container body[data-overlay=open] .js-card--collapsed-on-mobile .card--login__body iframe, .overlay__container body[data-overlay=open] .js-card--collapsed-on-mobile .card--login__body p,
.overlay__container body[data-overlay=open] .js-card--collapsed-on-mobile .card--login__footer h2,
.overlay__container body[data-overlay=open] .js-card--collapsed-on-mobile .card--login__footer form,
.overlay__container body[data-overlay=open] .js-card--collapsed-on-mobile .card--login__footer iframe,
.overlay__container body[data-overlay=open] .js-card--collapsed-on-mobile .card--login__footer p {
position: relative;
top: -300px;
transition: all 0.1s ease-in-out;
}
.overlay__container body[data-overlay=open] .js-card--collapsed-on-mobile.js-card--collapsed .card--login__body {
padding: 16px;
}
.overlay__container body[data-overlay=open] .js-card--collapsed-on-mobile.js-card--collapsed .card--login__footer {
height: 80px !important;
padding: 16px;
}
.overlay__container body[data-overlay=open] .js-card--collapsed-on-mobile.js-card--collapsed h2, .overlay__container body[data-overlay=open] .js-card--collapsed-on-mobile.js-card--collapsed form, .overlay__container body[data-overlay=open] .js-card--collapsed-on-mobile.js-card--collapsed iframe, .overlay__container body[data-overlay=open] .js-card--collapsed-on-mobile.js-card--collapsed p {
top: 0px;
}
}
/*
Site specific
======================================================*/
[data-overlay=open] .nav-main-container {
display: block !important;
}
.button--login {
position: relative;
width: 190px;
top: 60px;
}
@media all and (max-width: 600px) {
.news-post img {
width: 100px;
height: 100px;
}
.news-post h3 {
font-size: 18px;
}
.news-post .news-post__description {
display: none;
}
}
.featured-news-preview.card {
width: 100%;
max-width: 750px;
padding: 0;
margin-bottom: 15px;
}
.featured-news-preview:hover h3 {
text-decoration: underline;
color: #01857c;
}
.featured-news-preview a {
text-decoration: none;
}
.featured-news-preview a.flex {
gap: 5%;
}
.featured-news-preview img {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
width: 118px;
height: 118px;
padding: 5px;
}
@media all and (max-width: 450px) {
.featured-news-preview h3 {
font-size: 16px;
}
}
.scottish-partners-grid a.card {
text-align: center;
}
.scottish-partners-grid .partner-logo {
border-top: 1px solid #dee2e1;
}
.trainer__card img {
max-width: 300px;
max-height: 300px;
}
.trainer__grid {
margin-left: -6px;
margin-right: -6px;
}
.trainer__grid .gutters {
padding: 6px;
}
.trainer__grid .card {
padding: 4px 5px;
}
@media (max-width: 500px) {
.trainer__grid .card {
width: 312px;
}
}
.cat a {
color: #00539f;
}
.cat {
margin: 0.25em;
border: dotted 1px #a1a1a1;
border-radius: 0.5em;
padding: 0.5em 1em;
font-size: 1.15em;
background-color: #f8fcfd;
}
.post-img {
max-width: 300px;
border-radius: 4px;
}
.news-twitter__container {
gap: 2.5%;
}
.featured__news {
display: flex;
min-height: 550px;
}
.news-twitter__container .twitter-timeline {
margin: 0 auto;
}
@media all and (max-width: 941px) {
.news-twitter__container {
flex-direction: column;
gap: 20px;
}
.featured-news-preview {
max-width: 450px;
}
.twitter-timeline {
margin-left: 0;
}
}
.homepage__global-vars .flex.u1of4 {
flex-direction: column;
width: 24%;
padding: 10px;
}
@media (max-width: 500px) {
.homepage__global-vars.global-vars {
flex-wrap: wrap;
}
.homepage__global-vars .flex.u1of4 {
width: 49%;
}
.homepage__global-vars .gutters__container {
display: block;
}
}
:root {
--logo-height: 110px;
--vh: 1vh;
}
.header {
box-shadow: 0 2px 5px rgba(22, 29, 29, 0.15);
}
/* GRID SETUP */
.header__container {
overflow: hidden;
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr min-content;
grid-template-rows: 1fr min-content;
grid-template-areas: "logo nav-secondary" "nav-primary btns";
}
.header__logo-container {
grid-area: logo;
display: flex;
align-items: center;
}
.header__secondary-nav-container {
grid-area: nav-secondary;
}
.header__main-nav-container {
grid-area: nav-primary;
overflow: hidden;
}
.header__btn-container {
grid-area: btns;
}
.header .button-l {
white-space: nowrap;
}
.header .button-l--secondary {
min-width: 125px;
/* width: auto; */
}
.header__logo {
max-height: var(--logo-height);
}
.nav .nav__top-level,
.either-main .nav__secondary {
gap: 30px;
padding-left: 0;
}
.either-main .nav__sub-level-item--link {
color: #fff;
}
.nav__link {
width: 100%;
transition: color 0.15s ease-in;
font-weight: bold;
font-size: 21px;
display: inline-block;
text-decoration: none;
white-space: nowrap;
}
body.header--small .hide-menu-item-text {
display: none;
}
.nav__link:hover {
text-decoration: none;
}
.is-partner .nav__link.active,
.is-partner .nav__item.active,
.is-partner .nav__sub-level.nav__item.active,
.is-partner .nav__sub-level-item--link.active,
.is-partner .nav__item:hover > .nav__link {
color: #01857c;
font-weight: bold;
}
.either-main .nav__link.active,
.either-main .nav__item.active,
.either-main .nav__sub-level.nav__item.active,
.either-main .nav__sub-level-item--link.active,
.either-main .nav__item:hover > .nav__link {
color: #00aca1;
font-weight: bold;
}
.is-partner .header a:active {
color: #01857c;
text-decoration: underline;
}
.either-main .header a:active {
color: #00aca1;
text-decoration: underline;
}
.nav__top-level,
.nav__sub-level {
list-style-type: none;
}
.nav__sub-level {
display: none;
}
.nav__sub-level,
.nav__item {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
/* Main site header */
.either-main .header {
background-color: #000;
}
.either-main .nav__link {
color: #fff;
}
.is-partner .nav__link.active,
.is-partner .nav__link.active {
color: #01857c;
font-weight: bold;
}
.either-main .nav__link.active,
.either-main .nav__link.active {
color: #00aca1;
font-weight: bold;
}
.either-main .nav__secondary {
list-style-type: none;
display: flex;
flex-direction: row;
}
.either-main .nav__link-secondary {
color: #a5a5a5;
font-size: 16px;
}
/* Get the dropdown arrow to work on mobile menu */
.nav-dropdown__link--trigger {
transform: rotate(0deg);
transition: all 0.3s ease-out;
}
.nav-dropdown__link--trigger.open {
transform: rotate(90deg);
transition: all 0.3s ease-out;
}
.nav-dropdown__link--trigger:after {
transform: rotate(0deg);
transition: all 0.3s ease-out;
margin-top: -6px;
}
.nav__sub-level-item--link {
display: inline-block;
width: 100%;
text-decoration: none;
font-weight: normal;
font-size: 16px;
line-height: 2em;
}
.nav__sub-level-item--link:hover {
text-decoration: none;
}
.nav__sub-level-item {
padding: 6px 12px;
}
.site-nav-toggle {
min-width: 140px;
height: var(--logo-height);
}
.site-nav-toggle__icon {
margin-top: 12px;
}
.site-nav-toggle__text {
margin-top: 2px;
}
.header.provided-by.wide-logo .header__logo-container {
margin-top: 30px;
}
.header.provided-by.wide-logo .supported-by {
position: absolute;
right: 24px;
}
@media all and (min-width: 941px) {
.ms-id-154 .lrg-logo__reg,
.ms-id-288 .lrg-logo__reg {
max-width: 395px;
margin: 10px 0;
}
}
/* On scroll desktop / lrg logo*/
@media all and (min-width: 940px) {
.header.scroll {
position: fixed;
width: 100%;
z-index: 500;
left: 0;
right: 0;
top: 0;
}
.header.scroll .header__container {
grid-template-columns: min-content 1fr min-content;
grid-template-rows: 1fr;
grid-template-areas: "logo nav-primary btns";
}
.header.scroll .header__btn-container {
align-items: center;
}
.header.scroll .header__logo {
max-height: 65px;
max-width: 250px;
}
.header .header__logo-container a {
padding-right: 0px;
}
.header.scroll .header__btn-container {
height: auto;
}
.header.scroll .nav {
align-items: center;
justify-content: center;
margin-right: 0;
}
.header.scroll .nav__link {
font-size: 16px;
}
.header.scroll .hide-menu-item-text {
display: none;
}
.header.scroll .nav .nav__top-level {
gap: 30px;
}
.header.scroll .button-l {
width: auto;
white-space: nowrap;
}
.header.scroll .button-l:nth-of-type(1) {
margin-right: 10px;
}
.header.scroll .button-l:nth-of-type(2) {
margin-right: 0;
}
.header.scroll .supported-by {
display: none;
}
.header.scroll.provided-by.wide-logo .header__logo-container {
margin-top: 0;
}
/* Main header */
.either-main .scroll .header__container {
height: auto;
}
.either-main .scroll .nav__secondary,
.either-main .scroll .header__btn-container,
.either-main .scroll .nav {
float: none;
}
.either-main .scroll .nav__secondary {
display: none;
}
/* .either-main .scroll .header__logo {
min-width: 200px;
} */
.either-main .scroll .button-l {
min-width: auto;
padding: 0.25em 0.5em;
}
.either-main .scroll .nav .nav__top-level {
gap: 15px;
}
}
/* Smaller desktop */
@media all and (min-width: 940px) and (max-width: 1210px) {
.header .button-l {
min-width: auto;
padding: 0.25em 0.5em;
}
.header .button-l {
width: auto;
white-space: nowrap;
}
.header.scroll .header__logo {
max-width: 150px;
}
.hide-menu-item-text {
display: none;
}
}
/* Mobile layout */
@media all and (max-width: 940px) {
:root {
--logo-height: 51px;
}
.header {
padding-left: 0;
padding-right: 0;
}
.header__container {
padding: 0;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(4, min-content);
grid-template-areas: "logo mobile-btns" "btns btns" "nav-primary nav-primary" "nav-secondary nav-secondary";
}
.header__mobile-dropdown-open-close {
grid-area: mobile-btns;
}
.header__logo {
max-height: var(--logo-height);
}
.header__logo-container {
margin: 0px 12px;
}
.header {
position: fixed;
top: 0;
width: 100%;
z-index: 500;
max-height: 87.5vh;
max-height: 100dvh;
overflow: auto;
padding: 6px 0;
}
.nav__secondary {
width: 100%;
margin-bottom: 0;
}
.header__container {
flex-direction: column;
}
.header__btn-container {
justify-content: space-between;
margin: 20px 10px;
}
.header .button-l {
width: 48%;
}
.is-partner .site-nav-toggle {
background-color: #fff;
border-color: rgb(204, 204, 204);
}
.is-partner .site-nav-toggle__text {
color: rgb(51, 51, 51);
}
.is-partner .site-nav-toggle__icon,
.is-partner .site-nav-toggle__icon:after,
.is-partner .site-nav-toggle__icon:before {
background-color: rgb(51, 51, 51);
}
#navigation:target {
overflow: hidden;
}
.header__secondary-nav-container,
.header__main-nav-container,
.header__btn-container {
display: none;
}
#navigation:target .header__secondary-nav-container,
#navigation:target .header__main-nav-container,
#navigation:target .header__btn-container {
display: flex;
}
#navigation:target .mask {
display: block;
}
#navigation:target .header {
padding-bottom: 0;
box-shadow: 0 2px 5px rgba(22, 29, 29, 0.15);
border-radius: 0 0 6px 6px;
}
.site-nav-toggle {
top: initial;
}
/* When the mobile menu is open, click off it to close the menu */
.mask {
position: absolute;
z-index: 499;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: none;
background: black;
opacity: 0.8;
}
.nav {
margin-left: 0;
}
.nav__top-level {
display: flex;
flex-direction: column;
padding-left: 0;
width: 100%;
}
.nav__sub-level {
padding: 0;
}
.nav__item,
.header__btn-container {
border-top: 1px solid #444;
}
.header__btn-container {
margin: 0;
margin-top: 6px;
padding: 12px 10px;
}
.nav__item:hover {
cursor: pointer;
}
.nav__link {
padding: 12px;
line-height: 2em;
font-size: 16px;
}
.either-main .nav__link {
color: #fff;
}
.hide-menu-item-text,
body.header--small .hide-menu-item-text {
display: inline;
}
.is-partner .nav__sub-level-item {
color: rgb(51, 51, 51);
}
.nav .nav__top-level,
.either-main .nav__secondary {
gap: 0;
margin-top: 0;
margin-right: 0;
}
.header__left-container {
background-color: #282828;
height: calc(var(--logo-height) * 1.25);
justify-content: space-between;
align-items: center;
}
.nav__sub-level.open,
.nav__sub-level.current {
display: block;
}
.nav__link:only-child:not(:contains("CPD & Training")) {
color: #a5a5a5;
}
.header.provided-by.wide-logo .header__logo-container {
margin-top: 0;
}
.header.provided-by.wide-logo .supported-by {
position: static;
right: 0;
}
.supported-by {
padding: 12px;
border-top: 1px solid #444;
width: 100%;
}
.supported-by a,
.supported-by {
color: #767676;
}
.supported-by a:hover {
color: #00aca1;
text-decoration: underline;
}
.subsidised-msg {
text-align: center;
}
.header__container.wrap {
height: auto;
padding: 0;
}
.either-main .nav__secondary,
.either-main .header__btn-container,
.either-main .nav {
float: none;
}
.either-main .nav__secondary {
display: flex;
flex-direction: column;
order: 3;
}
.either-main .header__logo {
min-width: auto;
}
}
@media all and (max-width: 1050px) {
.either-main .header__main-nav-container .nav__link {
font-size: 16px;
}
}
.header__btn-container .button--log-in--main,
.header__btn-container .button--free-trial--main {
border-width: 3px;
font-size: 18px;
}
.either-main .header__btn-container .button--log-in--main,
.either-main .header__btn-container .button--free-trial--main {
color: #fff;
background: #000;
}
.is-partner .header__btn-container .button--log-in--main,
.is-partner .header__btn-container .button--free-trial--main {
color: #000;
background: #fff;
}
.header__btn-container .button--log-in--main {
border-color: #00aca1;
}
.header__btn-container .button--free-trial--main {
border-color: #ff535e;
}
.header__btn-container .button--log-in--main:hover,
.header__btn-container .button--free-trial--main:hover,
.sidebar-buttons .button-l:hover {
background: #ff535e;
color: #fff;
border-color: transparent;
}
.subsidised-msg {
color: #111;
display: inline-block;
font-size: 18px;
margin-top: -10px;
background: #f5fff7;
padding: 10px;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(22, 29, 29, 0.15);
border: 1px solid #c7e6cc;
}
.subsidised-msg:before {
content: "✓";
font-family: "Segoe UI Symbol", "Arial Unicode MS", "DejaVu Sans", "Meiryo UI", "MS UI Gothic", "Everson Mono Unicode", Meiryo, "MS Gothic", "MS Mincho", "MS PGothic", "MS PMincho", "Meslo LG L", "Meslo LG L DZ", "Meslo M L", "Meslo M L DZ", "Meslo S L", "Meslo S L DZ", "Symbola", "DejaVu Sans Condensed", "DejaVu Sans Mono", Code2000, "Everson Mono", Quivira, sans-serif;
background: #38b84d;
color: #fff;
display: inline-block;
width: 30px;
height: 30px;
margin-right: 10px;
line-height: 30px;
text-align: center;
border-radius: 16px;
}
.js-music-services-list {
padding: 10px;
border: 1px #222 solid;
}
.js-music-services-list:hover {
text-decoration: none;
background-color: #222;
color: #fff;
cursor: pointer;
}
.no-js .contact-details-container {
display: none;
}
.free-trial-cards {
gap: 20px;
}
@media all and (max-width: 940px) {
.free-trial-cards {
align-items: center;
}
}
/* Free trial card */
.card--link__container .card--link {
max-width: 450px;
}
.list-of-ticks {
padding: 0 0 0 30px !important;
}
.list-of-ticks li:before {
content: "✓";
font-family: "Segoe UI Symbol", "Arial Unicode MS", "DejaVu Sans", "Meiryo UI", "MS UI Gothic", "Everson Mono Unicode", Meiryo, "MS Gothic", "MS Mincho", "MS PGothic", "MS PMincho", "Meslo LG L", "Meslo LG L DZ", "Meslo M L", "Meslo M L DZ", "Meslo S L", "Meslo S L DZ", "Symbola", "DejaVu Sans Condensed", "DejaVu Sans Mono", Code2000, "Everson Mono", Quivira, sans-serif;
position: absolute;
left: -30px;
top: -0.2em;
color: #38b84d;
font-size: 1.4em;
}
.list-of-ticks li {
position: relative;
margin-bottom: 0.5em;
list-style: none outside;
}
.list-of-ticks--center {
display: flex;
flex-direction: column;
align-items: center;
}
@media (min-width: 941px) {
.list-of-ticks--horizontal {
padding: 0 !important;
}
.list-of-ticks--horizontal li {
display: inline;
word-wrap: break-word;
white-space: nowrap;
margin-right: 2em;
}
.list-of-ticks--horizontal li:before {
position: static;
padding-right: 0.25em;
}
}
/* Footer */
.is-partner .site-footer p a {
font-size: 16px;
}
.site-footer p a {
white-space: nowrap;
display: inline-block;
}
/* Footer */
.is-partner .site-footer p a {
font-size: 16px;
}
/* Musical school sidebar */
@media all and (max-width: 941px) {
.page-musical-school #sidebar,
.page-secondary #sidebar {
margin-top: 0;
}
}
/* Put news sidebar at bottom on mobile */
@media all and (max-width: 940px) {
[class*=page-news] .row,
[class*=page-blog] .row,
[class*=page-category] .row {
display: flex;
flex-direction: column;
}
[class*=page-news] .sidebar__menu,
[class*=page-blog] .sidebar__menu,
[class*=page-category] .sidebar__menu {
display: block;
width: 50%;
}
[class*=page-news] #sidebar,
[class*=page-blog] #sidebar,
[class*=page-category] #sidebar {
order: 2;
}
.nav-dropdown__sub-menu__item:hover,
.menu .sub-menu > li a:focus {
background-color: transparent;
}
}
.sidebar-buttons .button-l {
border-width: 3px;
border-color: #c9caca;
}
.fluid-video-embed-wrapper {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
cursor: pointer;
margin: 0 auto;
border-radius: 10px;
overflow: hidden;
transition: 0.1s ease-out;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
margin-bottom: 24px;
}
.fluid-video-embed-wrapper:hover,
.fluid-video-embed-wrapper:focus {
filter: saturate(105%) brightness(1.1);
box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
}
.js-content-blocker[data-active=false] .fluid-video-embed {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
outline-color: black;
z-index: 5;
background: white;
}
.pagination {
display: flex;
align-items: center;
margin-top: 50px;
}
.pagination__link {
background: #e4e4e4;
color: #666;
margin-right: 6px;
padding: 4px 8px;
text-align: center;
text-decoration: none;
border-radius: 3px;
min-height: 24px;
min-width: 24px;
}
.pagination__link.pagination__active {
color: #000;
background-color: #00aca1;
font-weight: bold;
margin-right: 4px;
padding: 4px 8px;
}
.pagination__link:hover {
background-color: #999;
color: #fff;
}
.dismissable-popup__overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.75);
z-index: 20;
}
.dismissable-popup {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 21;
background: white;
width: 75%;
max-width: 350px;
max-height: 750px;
height: auto;
padding: 20px;
}
.dismissable-popup__content {
height: 90%;
overflow: auto;
}
.dismissable-popup__content:focus-visible {
outline: none;
}
.popup__logo {
max-height: var(--logo-height);
}
.dismissable-popup__footer {
height: 10%;
}
.close-partner-popup {
background: green;
color: white;
border: 0 none;
border-bottom: 2px solid rgba(0, 0, 0, 0.4);
border-radius: 5px;
padding: 3px 40px;
margin: 0px 15px 0 0;
}
@media all and (max-width: 940px) {
.dismissable-popup {
padding: 10px;
}
.popup__logo {
max-height: 80px;
}
.dismissable-popup-open .site-nav-toggle-open {
margin-top: 10px;
}
}
@keyframes radar-pulse {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 #00aca1;
}
70% {
transform: scale(1.05);
box-shadow: 0 0 0 10px rgba(255, 177, 66, 0);
}
100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(255, 177, 66, 0);
}
}
.dismissable-popup-open .header .button-l--primary,
.dismissable-popup-open .site-nav-toggle-open {
position: static;
z-index: 22;
animation: radar-pulse 2s infinite;
margin-bottom: 10px;
}
.js-content-blocker[data-active=true] {
width: -moz-max-content;
width: max-content;
min-height: -moz-max-content;
min-height: max-content;
margin-bottom: 5px;
position: relative;
max-width: 100%;
border-radius: 10px;
background: #F1F3F3;
min-width: 300px;
min-height: 400px;
max-height: 100%;
}
.js-content-blocker[data-active=false] {
background: none;
}
.content-blocker__overlay {
position: absolute;
width: 100%;
min-height: 100%;
background: #F1F3F3;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 5%;
border: 3px dashed #DCE0E0;
border-radius: 10px;
z-index: 5;
}
.featured__twitter .js-content-blocker,
.featured-twitter .twitter-timeline {
max-width: 100%;
}
.featured__twitter .content-blocker__overlay {
position: relative;
}
.featured__twitter .js-content-blocker[data-active=false] .content-blocker__overlay {
position: absolute;
}
.content-blocker__overlay.x-feed-display-error {
min-height: 0;
}
.content-blocker__logo {
opacity: 50%;
filter: grayscale(1);
margin-bottom: 50px;
}
.content-blocker__overlay .button-l {
padding: 0.5em 1em;
border: none;
width: 200px;
}
.content-blocker__overlay .button-l:hover {
background: #ff535e;
color: #fff;
border-color: transparent;
}
.content-blocker__overlay .button-l--primary {
background: #01857c;
}
.content-blocker__overlay .button-l--secondary {
background: #D9D9D9;
color: black;
font-weight: normal;
}
.block-link,
.block-link:hover {
display: block;
text-decoration: none;
color: #111;
cursor: pointer;
}
.block-link img, .block-link p, .block-link li, .block-link div, .block-link h1, .block-link h2, .block-link h3, .block-link h4, .block-link h5,
.block-link:hover img,
.block-link:hover p,
.block-link:hover li,
.block-link:hover div,
.block-link:hover h1,
.block-link:hover h2,
.block-link:hover h3,
.block-link:hover h4,
.block-link:hover h5 {
text-decoration: none;
}
/* Set background image */
.page-usa #content {
background: url("https://assets.charanga.com/charanga.com/files/2023/04/MFE-banner.png") top left #f7f7f9 no-repeat;
background-size: contain;
/* Below styles fix the margin-top issue on the .wrap class */
display: inline-block;
width: 100%;
}
/* Set styles on the main body .wrap element */
.page-usa #content .wrap:first-child {
background: #FFF;
border-radius: 2px;
margin-top: 8vw;
padding-left: 100px;
padding-right: 100px;
}
.page-usa .mfe-logo {
max-width: 500px;
width: 40%;
height: auto;
}
.page-usa .mfe-img {
width: 100%;
max-width: 100%;
height: auto;
}
/* Set widths for the containers */
.page-usa .mfe-curriculum > div:nth-child(1) {
width: 40%;
}
.page-usa .mfe-curriculum > div:nth-child(2) {
width: 60%;
}
.page-usa .mfe-user-friendly > div:nth-child(2) {
width: 50%;
}
.page-usa .mfe-user-friendly > div:nth-child(3) {
width: 50%;
}
/* Hide img in standard view, then show it on mobile in media query */
.page-usa .mfe-hidden {
display: none;
}
.page-usa .button-l--secondary {
color: #00aca1;
}
/* Smaller screens */
@media only screen and (max-width: 1000px) {
.page-usa #content .wrap:first-child {
/* Move .wrap further down to prevent cutting the background image off */
margin-top: 12vw;
/* reduce inner padding on smaller screens */
padding-left: 75px;
padding-right: 75px;
}
/* Resize the logo */
.page-usa #content .wrap:first-child div {
width: 100%;
}
.page-usa .mfe-logo {
width: 50%;
}
/* Center content in the containers */
.page-usa .mfe-user-friendly,
.page-usa .mfe-user-friendly div,
.page-usa .mfe-curriculum,
.page-usa .mfe-curriculum div {
display: flex;
flex-direction: column;
align-items: center;
}
/* resize imgs */
.page-usa .mfe-img {
width: 60%;
margin-bottom: 20px;
}
/* Show/hide the correct img for 2nd container */
.page-usa #mfe-showing {
display: none;
}
.page-usa .mfe-hidden {
display: block;
}
.page-usa .mfe-curriculum div {
padding-right: 0;
}
.page-usa .mfe-user-friendly {
margin-top: 50px;
}
.page-usa .mfe-user-friendly h2 {
margin-top: 15px;
}
}
.site-content > .wrap > .row,
.site-content > .wrap ~ .row {
overflow: visible;
}
.site-main {
max-width: 100%;
margin-top: 50px;
}
.site-main .hero {
margin-top: -50px;
}
.site-main:focus {
outline: #aaa dashed 1px;
outline-offset: -1px;
}
#main {
min-height: calc(110vh - var(--header-height) - var(--footer-height));
}
@media all and (min-width: 941px) {
body:not(.page-site).scroll #main {
margin-top: 224px;
}
body.page-site.scroll #main {
margin-top: 174px;
}
}
@media (max-width: 940px) {
body {
margin-top: 55px;
}
#masthead {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
}
}
.hero + .wrap .entry-header {
margin-top: 12px;
}
.site-main--no-sidebar .hero + .wrap .entry-header {
margin-top: 60px;
}
.sidebar {
margin-top: 44px;
}
.page-free-trial #main,
.page-pricing #main,
.page-sign-up #main,
.page-international-trial-select #main,
.page-international-pricing-select #main {
margin-left: auto !important;
margin-right: auto !important;
}
.sidebar {
z-index: 2;
}
/*********************** STICKY SIDEBAR ***********************/
@media (min-width: 941px) {
.sticky-sidebar-container,
.site-content > .wrap > .row {
display: flex;
flex-flow: row nowrap;
}
.site-partner .page-contact-us .site-content > .wrap > .row {
display: block;
}
.sticky-sidebar {
position: sticky;
top: 142px;
}
}
.hero {
position: relative;
background-image: url(https://assets.charanga.com/charanga.com/wp-content/themes/charanga_2019/images/schoolgirls-learning-keyboards.jpg);
background-color: #000;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
@media (min-width: 701px) {
.hero {
min-height: 302px;
}
}
@media (max-width: 700px) {
.hero {
min-height: 260px;
}
}
.hero .button-primary {
box-shadow: 0 2px 5px rgba(22, 29, 29, 0.15);
}
.hero .button-primary:hover {
transform: translateY(-1px);
box-shadow: 0 5px 10px rgba(22, 29, 29, 0.3);
}
.hero--primary {
background-image: url(https://assets.charanga.com/charanga.com/wp-content/themes/charanga_2019/images/young-children-in-music-class.jpg);
}
.hero--secondary {
background-image: url(https://assets.charanga.com/charanga.com/wp-content/themes/charanga_2019/images/students-singing-with-teacher.jpg);
}
.hero--combined {
background-image: url(https://www.charanga.co.za/files/2019/09/maki.png);
}
.hero--music-hubs {
background-image: url(https://assets.charanga.com/charanga.com/wp-content/themes/charanga_2019/images/student-with-clarinet-in-band.jpg);
background-image: url(https://assets.charanga.com/charanga.com/wp-content/themes/charanga_2019/images/students-playing-in-band.jpg);
}
.hero--cpd-training {
background-image: url(https://assets.charanga.com/charanga.com/wp-content/themes/charanga_2019/images/cpd-training-classroom.jpg);
}
.hero--cpd-training .cover-under {
opacity: 0.3;
}
.hero--international {
background-image: url(https://www.charanga.co.za/files/2019/09/maki.png);
background-image: url(https://assets.charanga.com/charanga.com/wp-content/themes/charanga_2019/images/asian-girl-playing-violin.jpg);
background-position: center -130px;
}
.hero--about-charanga {
background-image: url(https://assets.charanga.com/charanga.com/wp-content/themes/charanga_2019/images/hand-writing-musical-notes.jpg);
}
.hero--contact-us {
background-image: url(https://assets.charanga.com/charanga.com/wp-content/themes/charanga_2019/images/brighton-pier-in-autumn.jpg);
}
.cover-under {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
background: #000;
opacity: 0.5;
}
.hero--contact-us .cover-under {
opacity: 0.15;
}
.cover-over {
z-index: 2;
}
.fs-xl {
letter-spacing: 0;
transition: all 0.3s;
font-size: 1.4rem;
line-height: 1.1;
}
@media (min-width: 501px) {
.fs-xl {
font-size: 1.8rem;
}
}
@media (min-width: 941px) {
.fs-xl {
font-size: 2.1rem;
letter-spacing: -0.009em;
}
}
.fs-xxl {
letter-spacing: 0;
transition: all 0.3s;
font-size: 1.5rem;
line-height: 1.1;
}
@media (min-width: 501px) {
.fs-xxl {
font-size: 2rem;
}
}
@media (min-width: 941px) {
.fs-xxl {
font-size: 2.5rem;
letter-spacing: -0.009em;
}
}
.fs-xxxl {
letter-spacing: 0;
transition: all 0.3s;
font-size: 2rem;
line-height: 1;
}
@media (min-width: 501px) {
.fs-xxxl {
font-size: 2.8rem;
}
}
@media (min-width: 941px) {
.fs-xxxl {
font-size: 3.75rem;
letter-spacing: -0.009em;
line-height: 1;
}
}
@media (min-width: 701px) {
.site-partner .home .display-xl {
margin-top: 40px;
}
}
@media (min-width: 701px) {
.hero {
height: 200px;
min-height: 200px;
}
}
@media (max-width: 700px) {
.hero {
display: none;
}
}
.hero .cover-over {
display: none;
}
.hero--music-instr {
background-image: url("/site/images/instr.jpg");
}
.hero--platform {
background-image: url("/site/images/platform.jpg");
}
.hero-bd .layout-main-plus-sidebar {
display: flex;
flex-flow: row nowrap;
}
@media (max-width: 940px) {
.hero-bd {
margin-top: 110px;
}
}
.site-footer a {
text-decoration: none;
display: inline;
}
.site-footer a,
.site-footer span {
font-size: 18px;
}
@media (min-width: 501px) {
.columns-2 {
-moz-column-count: 2;
column-count: 2;
-moz-column-gap: 24px;
column-gap: 24px;
}
}
.columns-2 p:last-child {
margin-bottom: 0;
}
.card {
border: 1px solid #767676;
box-shadow: 0 2px 5px rgba(22, 29, 29, 0.15);
padding: 5px;
border-radius: 4px;
background: #fff;
margin-bottom: 2%;
padding: 10px;
}
.card {
border: 1px solid #eee !important;
}
.card--logo {
max-width: 200px;
}
.card--link,
.card--link:hover,
.card--link:focus {
text-decoration: none;
}
.card--link {
transition: box-shadow 0.3s ease-in;
}
.card--link:hover,
.card--link:focus {
box-shadow: 0 5px 10px rgba(22, 29, 29, 0.3);
transition: box-shadow 0.15s ease-in;
color: #111;
}
a.card {
transition: box-shadow 0.3s ease-in;
}
a.card,
a.card:hover,
a.card:focus {
text-decoration: none;
}
a.card:hover,
a.card:focus {
box-shadow: 0 5px 10px rgba(22, 29, 29, 0.3);
transition: box-shadow 0.15s ease-in;
}
/* * * * * * * * * * * * * * * PARTNER CARDS * * * * * * * * * * * * * * */
@media (max-width: 700px) {
.partner-card__container {
align-items: center;
flex-direction: column;
}
.partner-card.card {
width: 90%;
}
}
.partner-card {
width: 47.5%;
padding: 0;
flex-direction: column;
}
.partner-card__product-image {
width: 75%;
}
.partner-card img,
.sign-up-card img {
width: 100%;
max-width: 100%;
}
.partner-card__content,
.sign-up-card__content {
padding: 10px;
height: 100%;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.partner-card__content p,
.sign-up-card__content p {
margin: 10px 0 0 0;
}
.partner-card__content--flex-start,
.sign-up-card__content--flex-start {
justify-content: flex-start;
}
.partner-card__btn-container,
.sign-up-card__btn-container {
width: 100%;
gap: 5%;
}
.partner-card .button-l {
min-width: 170px;
}
/* * * * * * * * * * * * * * * SIGNUP CARDS * * * * * * * * * * * * * * */
.sign-up-card {
width: 35%;
}
.sign-up-card:hover {
display: flex;
}
.sign-up-card:hover .button-l {
background: #ff535e;
color: #fff;
border: 5px solid #ff535e;
}
@media (max-width: 700px) {
.sign-up-card {
width: 90%;
}
}
.sign-up-cards {
gap: 20px;
}
.page-about-charanga .gutters .card {
background-color: #eee;
}
.global-grid__container {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 18px;
}
.global-grid__1-col .global-grid__item {
grid-column: span 12;
}
.global-grid__2-col .global-grid__item {
grid-column: span 6;
}
@media only screen and (max-width: 800px) {
.global-grid__2-col .global-grid__item {
grid-column: span 12;
}
}
.global-grid__3-col .global-grid__item {
grid-column: span 4;
}
@media only screen and (max-width: 900px) {
.global-grid__3-col .global-grid__item {
grid-column: span 6;
}
}
@media only screen and (max-width: 600px) {
.global-grid__3-col .global-grid__item {
grid-column: span 12;
}
}
.global-grid__4-col .global-grid__item {
grid-column: span 3;
}
@media only screen and (max-width: 900px) {
.global-grid__4-col .global-grid__item {
grid-column: span 6;
}
}
@media only screen and (max-width: 600px) {
.global-grid__4-col .global-grid__item {
grid-column: span 12;
}
}
.global-grid__5-col .global-grid__item {
grid-column: span 5;
}
.global-grid__6-col .global-grid__item {
grid-column: span 2;
}
.global-grid__item--span-1 {
grid-column: span 12;
}
.global-grid__item--span-2 {
grid-column: span 6;
}
.global-grid__item--span-3 {
grid-column: span 4;
}
.global-grid__item--span-4 {
grid-column: span 3;
}
.global-grid__item--span-5 {
grid-column: span 5;
}
.global-grid__item--span-6 {
grid-column: span 2;
}
.global-grid__item--span-10 {
grid-column: span 10;
}
.global-grid__flex .global-grid__item {
display: flex;
flex-direction: column;
}
.global-grid__flex .global-grid__item.global-grid__item--flex-row {
flex-direction: row;
}
.global-grid__flex--row .global-grid__item {
display: flex;
flex-direction: row;
}
.global-grid__flex--position-last-bottom {
margin-top: auto;
}
.global-grid__gap-none {
gap: 0;
}
.global-grid__gap-xsmall {
gap: 5px;
}
.global-grid__gap-small {
gap: 10px;
}
.global-grid__gap-default {
gap: 18px;
}
.global-grid__gap-medium {
gap: 20px;
}
.global-grid__gap-large {
gap: 25px;
}
.global-grid__gap-xlarge {
gap: 30px;
}
@media (max-width: 940px) {
.global-grid__1-col-under-l .global-grid__item {
grid-column: span 12;
}
}
@media (max-width: 700px) {
.global-grid__1-col-under-m .global-grid__item {
grid-column: span 12;
}
}
@media (max-width: 500px) {
.global-grid__1-col-under-s .global-grid__item {
grid-column: span 12;
}
}
@media (min-width: 941px) {
.page-platform .grid-container {
display: grid;
gap: 30px;
grid-template-columns: repeat(12, 1fr);
}
.page-platform .grid-unit-1of2-over-l {
grid-column: span 6;
}
.page-platform .grid-unit-1of3-over-l {
grid-column: span 4;
}
.page-platform .grid-unit-1of4-over-l {
grid-column: span 3;
}
}
.border-top-scot:before {
height: 5px;
width: auto;
display: block;
content: "";
background: linear-gradient(82.03deg, #03539F 7.4%, #005EB8 28.09%, #005EB8 56.69%, #4295E3 91.68%);
}
/* ---------------------------------------------------------------------------------------------------------------------
*
* Name .dConcertina
*
* Description .generic, flexible show and hide
* Requires .jQuery
* Gotchas .
* Todos .
*/
.conc-content {
display: none;
}
.conc-trigger {
cursor: pointer;
}
.conc-trigger .active-message {
display: none;
}
.conc-trigger .inactive-message {
display: inline;
}
.conc-active .active-message {
display: inline;
}
.conc-active .inactive-message {
display: none;
}
.conc-trigger .active-message,
.conc-trigger .inactive-message {
color: var(--color-info);
padding: 0 0 0 7px;
}
.conc-scope .inactive-message {
display: inline-block;
}
.conc-active .active-message {
display: inline-block;
}
.conc-active .inactive-message {
display: none;
}
.conc-trigger-active .active-message {
display: inline;
}
.conc-trigger-active .inactive-message {
display: none;
}
.conc-trigger:not(.conc-trigger-active) .inactive-message {
display: inline;
}
.conc-trigger:not(.conc-trigger-active) .active-message {
display: none;
}
.conc-list {
margin-left: 0;
list-style: none outside;
}
.conc-list .conc-trigger {
color: var(--color-text);
}
.conc-list ul {
list-style: disc outside;
}
/* Set trigger width for triggers that are buttons */
.full-width-trigger {
width: 100%;
}
.flex-vid__outer {
max-width: 1280px;
width: 100%;
transition: 0.1s ease-in;
position: relative;
cursor: pointer;
}
.flex-vid__wrapper {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
margin: 0 auto;
border-radius: 10px;
overflow: hidden;
transition: 0.1s ease-out;
background: white !important;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
}
.flex-vid__outer:hover,
.flex-vid__outer:focus {
filter: saturate(105%) brightness(1.1);
box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
}
.flex-vid {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
outline-color: black;
z-index: 5;
background: white;
}
.flex-vid__icon {
display: none;
}
[data-js=true] .flex-vid__icon {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 16.6%;
height: auto;
max-height: 100px;
padding: 1px 6px;
z-index: 10;
transition: 0.3s ease-out;
cursor: pointer;
}
[data-playing="1"] .flex-vid__icon {
display: none;
}
.flex-vid__outer:hover .flex-vid__icon,
.flex-vid__outer:focus .flex-vid__icon {
width: 18%;
max-height: 110px;
transition: 0.1s ease-in;
}
.flex-vid__outer:hover .flex-vid__icon__circle,
.flex-vid__outer:focus .flex-vid__icon__circle {
transition: 0.2s;
fill: #00aca1;
}
body:not([data-overlay=true]) [data-playing="0"]:not([data-video-started=true]) .flex-vid__overlay-thumbnail {
display: block;
height: 100%;
width: 100%;
border-radius: 10px;
position: absolute;
top: 0;
z-index: 10;
left: 0;
background-size: cover;
background-position: center;
pointer-events: none;
}
.flex-vid__overlay-thumbnail {
display: none;
}
.hidden {
display: none;
}
.very-hidden {
display: none !important;
visibility: hidden;
}
.invisible {
visibility: hidden;
}
[class*="--hidden"] {
display: none;
}
@media (min-width: 501px) {
.block-over-s {
display: block;
}
.inline-block-over-s {
display: inline-block;
}
.hidden-over-s {
display: none;
}
.visually-hidden-over-s {
visibility: hidden;
}
}
@media (max-width: 500px) {
.block-under-s {
display: block;
}
.inline-block-under-s {
display: inline-block;
}
.hidden-under-s {
display: none;
}
.visually-hidden-under-s {
visibility: hidden;
}
}
@media (min-width: 701px) {
.block-over-m {
display: block;
}
.inline-block-over-m {
display: inline-block;
}
.hidden-over-m {
display: none;
}
.visually-hidden-over-m {
visibility: hidden;
}
}
@media (max-width: 700px) {
.block-under-m {
display: block;
}
.inline-block-under-m {
display: inline-block;
}
.hidden-under-m {
display: none;
}
.visually-hidden-under-m {
visibility: hidden;
}
}
@media (min-width: 941px) {
.block-over-l {
display: block;
}
.inline-block-over-l {
display: inline-block;
}
.hidden-over-l {
display: none;
}
.visually-hidden-over-l {
visibility: hidden;
}
}
@media (max-width: 940px) {
.block-under-l {
display: block;
}
.inline-block-under-l {
display: inline-block;
}
.hidden-under-l {
display: none;
}
.visually-hidden-under-l {
visibility: hidden;
}
}
@media (min-width: 1281px) {
.block-over-xl {
display: block;
}
.inline-block-over-xl {
display: inline-block;
}
.hidden-over-xl {
display: none;
}
.visually-hidden-over-xl {
visibility: hidden;
}
}
@media (max-width: 1280px) {
.block-under-xl {
display: block;
}
.inline-block-under-xl {
display: inline-block;
}
.hidden-under-xl {
display: none;
}
.visually-hidden-under-xl {
visibility: hidden;
}
}
/* Text meant only for screen readers. */
.screen-reader-text,
.visually-hidden {
position: fixed !important;
_position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
.screen-reader-text:focus, .screen-reader-text.focusable:active, .screen-reader-text.focusable:focus,
.visually-hidden:focus,
.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
z-index: 99999;
background: #fff;
color: #000;
width: auto;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.skip-widget {
text-indent: -9999px;
}
.skip-widget:focus {
text-indent: 0;
}
.skip-widget:focus {
display: block;
outline-offset: -1px;
padding: 1px 10px;
}
@media (max-width: 940px) {
#skip-side-nav:focus {
text-indent: -9999px;
}
}
.inline {
display: inline;
}
.block {
display: block;
}
.inline-block {
display: inline-block;
}
.table {
display: table;
}
.table-cell {
display: table-cell;
}
.hide {
display: none;
}
.clear-left {
clear: left;
}
.clear-right {
clear: right;
}
.clear-both {
clear: both;
}
@media (min-width: 501px) {
.inline-over-s {
display: inline;
}
.block-over-s {
display: block;
}
.inline-block-over-s {
display: inline-block;
}
.table-over-s {
display: table;
}
.table-cell-over-s {
display: table-cell;
}
.hide-over-s {
display: none;
}
}
@media (min-width: 701px) {
.inline-over-m {
display: inline;
}
.block-over-m {
display: block;
}
.inline-block-over-m {
display: inline-block;
}
.table-over-m {
display: table;
}
.table-cell-over-m {
display: table-cell;
}
.hide-over-m {
display: none;
}
}
@media (min-width: 941px) {
.inline-over-l {
display: inline;
}
.block-over-l {
display: block;
}
.inline-block-over-l {
display: inline-block;
}
.table-over-l {
display: table;
}
.table-cell-over-l {
display: table-cell;
}
.hide-over-l {
display: none;
}
}
@media (min-width: 1281px) {
.inline-over-xl {
display: inline;
}
.block-over-xl {
display: block;
}
.inline-block-over-xl {
display: inline-block;
}
.table-over-xl {
display: table;
}
.table-cell-over-xl {
display: table-cell;
}
.hide-over-xl {
display: none;
}
}
@media (max-width: 500px) {
.inline-under-s {
display: inline;
}
.block-under-s {
display: block;
}
.inline-block-under-s {
display: inline-block;
}
.table-under-s {
display: table;
}
.table-cell-under-s {
display: table-cell;
}
.hide-under-s {
display: none;
}
}
@media (max-width: 700px) {
.inline-under-m {
display: inline;
}
.block-under-m {
display: block;
}
.inline-block-under-m {
display: inline-block;
}
.table-under-m {
display: table;
}
.table-cell-under-m {
display: table-cell;
}
.hide-under-m {
display: none;
}
}
@media (max-width: 940px) {
.inline-under-l {
display: inline;
}
.block-under-l {
display: block;
}
.inline-block-under-l {
display: inline-block;
}
.table-under-l {
display: table;
}
.table-cell-under-l {
display: table-cell;
}
.hide-under-l {
display: none;
}
}
@media (max-width: 1280px) {
.inline-under-xl {
display: inline;
}
.block-under-xl {
display: block;
}
.inline-block-under-xl {
display: inline-block;
}
.table-under-xl {
display: table;
}
.table-cell-under-xl {
display: table-cell;
}
.hide-under-xl {
display: none;
}
}
.left {
float: left;
}
.right {
float: right;
}
.center,
.centred {
display: block;
float: none;
margin-right: auto !important;
margin-left: auto !important;
}
@media (min-width: 501px) {
.left-over-s {
float: left;
}
.right-over-s {
float: right;
}
.center-over-s {
display: block;
float: none;
margin-right: auto !important;
margin-left: auto !important;
}
}
@media (min-width: 701px) {
.left-over-m {
float: left;
}
.right-over-m {
float: right;
}
.center-over-m {
display: block;
float: none;
margin-right: auto !important;
margin-left: auto !important;
}
}
@media (min-width: 941px) {
.left-over-l {
float: left;
}
.right-over-l {
float: right;
}
.center-over-l {
display: block;
float: none;
margin-right: auto !important;
margin-left: auto !important;
}
}
@media (min-width: 1281px) {
.left-over-xl {
float: left;
}
.right-over-xl {
float: right;
}
.center-over-xl {
display: block;
float: none;
margin-right: auto !important;
margin-left: auto !important;
}
}
@media (max-width: 500px) {
.left-under-s {
float: left;
}
.right-under-s {
float: right;
}
.center-under-s {
display: block;
float: none;
margin-right: auto !important;
margin-left: auto !important;
}
}
@media (max-width: 700px) {
.left-under-m {
float: left;
}
.right-under-m {
float: right;
}
.center-under-m {
display: block;
float: none;
margin-right: auto !important;
margin-left: auto !important;
}
}
@media (max-width: 940px) {
.left-under-l {
float: left;
}
.right-under-l {
float: right;
}
.center-under-l {
display: block;
float: none;
margin-right: auto !important;
margin-left: auto !important;
}
}
@media (max-width: 1280px) {
.left-under-xl {
float: left;
}
.right-under-xl {
float: right;
}
.center-under-xl {
display: block;
float: none;
margin-right: auto !important;
margin-left: auto !important;
}
}
.cf,
.clear,
.clearfix {
zoom: 1;
}
.cf:before, .cf:after,
.clear:before,
.clear:after,
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.cf:after,
.clear:after,
.clearfix:after {
clear: both;
}
.clear-left {
clear: left;
}
.clear-right {
clear: right;
}
.clear-both {
clear: both;
}
.clear-none {
clear: none;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
@media (min-width: 501px) {
.text-left-over-s {
text-align: left;
}
.text-right-over-s {
text-align: right;
}
.text-center-over-s {
text-align: center;
}
}
@media (min-width: 701px) {
.text-left-over-m {
text-align: left;
}
.text-right-over-m {
text-align: right;
}
.text-center-over-m {
text-align: center;
}
}
@media (min-width: 941px) {
.text-left-over-l {
text-align: left;
}
.text-right-over-l {
text-align: right;
}
.text-center-over-l {
text-align: center;
}
}
@media (min-width: 1281px) {
.text-left-over-xl {
text-align: left;
}
.text-right-over-xl {
text-align: right;
}
.text-center-over-xl {
text-align: center;
}
}
@media (max-width: 500px) {
.text-left-under-s {
text-align: left;
}
.text-right-under-s {
text-align: right;
}
.text-center-under-s {
text-align: center;
}
}
@media (max-width: 700px) {
.text-left-under-m {
text-align: left;
}
.text-right-under-m {
text-align: right;
}
.text-center-under-m {
text-align: center;
}
}
@media (max-width: 940px) {
.text-left-under-l {
text-align: left;
}
.text-right-under-l {
text-align: right;
}
.text-center-under-l {
text-align: center;
}
}
@media (max-width: 1280px) {
.text-left-under-xl {
text-align: left;
}
.text-right-under-xl {
text-align: right;
}
.text-center-under-xl {
text-align: center;
}
}
.align-baseline {
vertical-align: baseline;
}
.align-top {
vertical-align: top;
}
.align-middle {
vertical-align: middle;
}
.align-bottom {
vertical-align: bottom;
}
.wrap {
margin: 0 auto;
position: relative;
max-width: 1200px;
padding-left: 12px;
padding-right: 12px;
}
@media (min-width: 701px) {
.wrap {
padding-left: 24px;
padding-right: 24px;
}
}
.row {
overflow: hidden;
}
@media (min-width: 501px) {
.u1of1-over-s {
width: 100%;
}
.u0of1-over-s {
width: 0%;
}
.u1of2-over-s {
width: 50%;
}
.u1of3-over-s {
width: 33.3333333333%;
}
.u2of3-over-s {
width: 66.6666666667%;
}
.u1of4-over-s {
width: 25%;
}
.u2of4-over-s {
width: 50%;
}
.u3of4-over-s {
width: 75%;
}
.u1of5-over-s {
width: 20%;
}
.u2of5-over-s {
width: 40%;
}
.u3of5-over-s {
width: 60%;
}
.u4of5-over-s {
width: 80%;
}
.u1of6-over-s {
width: 16.6666666667%;
}
.u2of6-over-s {
width: 33.3333333333%;
}
.u3of6-over-s {
width: 50%;
}
.u4of6-over-s {
width: 66.6666666667%;
}
.u5of6-over-s {
width: 83.3333333333%;
}
.u1of7-over-s {
width: 14.2857142857%;
}
.u2of7-over-s {
width: 28.5714285714%;
}
.u3of7-over-s {
width: 42.8571428571%;
}
.u4of7-over-s {
width: 57.1428571429%;
}
.u5of7-over-s {
width: 71.4285714286%;
}
.u6of7-over-s {
width: 85.7142857143%;
}
.u1of8-over-s {
width: 12.5%;
}
.u2of8-over-s {
width: 25%;
}
.u3of8-over-s {
width: 37.5%;
}
.u4of8-over-s {
width: 50%;
}
.u5of8-over-s {
width: 62.5%;
}
.u6of8-over-s {
width: 75%;
}
.u7of8-over-s {
width: 87.5%;
}
.u1of9-over-s {
width: 11.1111111111%;
}
.u2of9-over-s {
width: 22.2222222222%;
}
.u3of9-over-s {
width: 33.3333333333%;
}
.u4of9-over-s {
width: 44.4444444444%;
}
.u5of9-over-s {
width: 55.5555555556%;
}
.u6of9-over-s {
width: 66.6666666667%;
}
.u7of9-over-s {
width: 77.7777777778%;
}
.u8of9-over-s {
width: 88.8888888889%;
}
.u1of10-over-s {
width: 10%;
}
.u2of10-over-s {
width: 20%;
}
.u3of10-over-s {
width: 30%;
}
.u4of10-over-s {
width: 40%;
}
.u5of10-over-s {
width: 50%;
}
.u6of10-over-s {
width: 60%;
}
.u7of10-over-s {
width: 70%;
}
.u8of10-over-s {
width: 80%;
}
.u9of10-over-s {
width: 90%;
}
.u1of11-over-s {
width: 9.0909090909%;
}
.u2of11-over-s {
width: 18.1818181818%;
}
.u3of11-over-s {
width: 27.2727272727%;
}
.u4of11-over-s {
width: 36.3636363636%;
}
.u5of11-over-s {
width: 45.4545454545%;
}
.u6of11-over-s {
width: 54.5454545455%;
}
.u7of11-over-s {
width: 63.6363636364%;
}
.u8of11-over-s {
width: 72.7272727273%;
}
.u9of11-over-s {
width: 81.8181818182%;
}
.u10of11-over-s {
width: 90.9090909091%;
}
.u1of12-over-s {
width: 8.3333333333%;
}
.u2of12-over-s {
width: 16.6666666667%;
}
.u3of12-over-s {
width: 25%;
}
.u4of12-over-s {
width: 33.3333333333%;
}
.u5of12-over-s {
width: 41.6666666667%;
}
.u6of12-over-s {
width: 50%;
}
.u7of12-over-s {
width: 58.3333333333%;
}
.u8of12-over-s {
width: 66.6666666667%;
}
.u9of12-over-s {
width: 75%;
}
.u10of12-over-s {
width: 83.3333333333%;
}
.u11of12-over-s {
width: 91.6666666667%;
}
}
@media (min-width: 701px) {
.u1of1-over-m {
width: 100%;
}
.u0of1-over-m {
width: 0%;
}
.u1of2-over-m {
width: 50%;
}
.u1of3-over-m {
width: 33.3333333333%;
}
.u2of3-over-m {
width: 66.6666666667%;
}
.u1of4-over-m {
width: 25%;
}
.u2of4-over-m {
width: 50%;
}
.u3of4-over-m {
width: 75%;
}
.u1of5-over-m {
width: 20%;
}
.u2of5-over-m {
width: 40%;
}
.u3of5-over-m {
width: 60%;
}
.u4of5-over-m {
width: 80%;
}
.u1of6-over-m {
width: 16.6666666667%;
}
.u2of6-over-m {
width: 33.3333333333%;
}
.u3of6-over-m {
width: 50%;
}
.u4of6-over-m {
width: 66.6666666667%;
}
.u5of6-over-m {
width: 83.3333333333%;
}
.u1of7-over-m {
width: 14.2857142857%;
}
.u2of7-over-m {
width: 28.5714285714%;
}
.u3of7-over-m {
width: 42.8571428571%;
}
.u4of7-over-m {
width: 57.1428571429%;
}
.u5of7-over-m {
width: 71.4285714286%;
}
.u6of7-over-m {
width: 85.7142857143%;
}
.u1of8-over-m {
width: 12.5%;
}
.u2of8-over-m {
width: 25%;
}
.u3of8-over-m {
width: 37.5%;
}
.u4of8-over-m {
width: 50%;
}
.u5of8-over-m {
width: 62.5%;
}
.u6of8-over-m {
width: 75%;
}
.u7of8-over-m {
width: 87.5%;
}
.u1of9-over-m {
width: 11.1111111111%;
}
.u2of9-over-m {
width: 22.2222222222%;
}
.u3of9-over-m {
width: 33.3333333333%;
}
.u4of9-over-m {
width: 44.4444444444%;
}
.u5of9-over-m {
width: 55.5555555556%;
}
.u6of9-over-m {
width: 66.6666666667%;
}
.u7of9-over-m {
width: 77.7777777778%;
}
.u8of9-over-m {
width: 88.8888888889%;
}
.u1of10-over-m {
width: 10%;
}
.u2of10-over-m {
width: 20%;
}
.u3of10-over-m {
width: 30%;
}
.u4of10-over-m {
width: 40%;
}
.u5of10-over-m {
width: 50%;
}
.u6of10-over-m {
width: 60%;
}
.u7of10-over-m {
width: 70%;
}
.u8of10-over-m {
width: 80%;
}
.u9of10-over-m {
width: 90%;
}
.u1of11-over-m {
width: 9.0909090909%;
}
.u2of11-over-m {
width: 18.1818181818%;
}
.u3of11-over-m {
width: 27.2727272727%;
}
.u4of11-over-m {
width: 36.3636363636%;
}
.u5of11-over-m {
width: 45.4545454545%;
}
.u6of11-over-m {
width: 54.5454545455%;
}
.u7of11-over-m {
width: 63.6363636364%;
}
.u8of11-over-m {
width: 72.7272727273%;
}
.u9of11-over-m {
width: 81.8181818182%;
}
.u10of11-over-m {
width: 90.9090909091%;
}
.u1of12-over-m {
width: 8.3333333333%;
}
.u2of12-over-m {
width: 16.6666666667%;
}
.u3of12-over-m {
width: 25%;
}
.u4of12-over-m {
width: 33.3333333333%;
}
.u5of12-over-m {
width: 41.6666666667%;
}
.u6of12-over-m {
width: 50%;
}
.u7of12-over-m {
width: 58.3333333333%;
}
.u8of12-over-m {
width: 66.6666666667%;
}
.u9of12-over-m {
width: 75%;
}
.u10of12-over-m {
width: 83.3333333333%;
}
.u11of12-over-m {
width: 91.6666666667%;
}
}
@media (min-width: 941px) {
.u1of1-over-l {
width: 100%;
}
.u0of1-over-l {
width: 0%;
}
.u1of2-over-l {
width: 50%;
}
.u1of3-over-l {
width: 33.3333333333%;
}
.u2of3-over-l {
width: 66.6666666667%;
}
.u1of4-over-l {
width: 25%;
}
.u2of4-over-l {
width: 50%;
}
.u3of4-over-l {
width: 75%;
}
.u1of5-over-l {
width: 20%;
}
.u2of5-over-l {
width: 40%;
}
.u3of5-over-l {
width: 60%;
}
.u4of5-over-l {
width: 80%;
}
.u1of6-over-l {
width: 16.6666666667%;
}
.u2of6-over-l {
width: 33.3333333333%;
}
.u3of6-over-l {
width: 50%;
}
.u4of6-over-l {
width: 66.6666666667%;
}
.u5of6-over-l {
width: 83.3333333333%;
}
.u1of7-over-l {
width: 14.2857142857%;
}
.u2of7-over-l {
width: 28.5714285714%;
}
.u3of7-over-l {
width: 42.8571428571%;
}
.u4of7-over-l {
width: 57.1428571429%;
}
.u5of7-over-l {
width: 71.4285714286%;
}
.u6of7-over-l {
width: 85.7142857143%;
}
.u1of8-over-l {
width: 12.5%;
}
.u2of8-over-l {
width: 25%;
}
.u3of8-over-l {
width: 37.5%;
}
.u4of8-over-l {
width: 50%;
}
.u5of8-over-l {
width: 62.5%;
}
.u6of8-over-l {
width: 75%;
}
.u7of8-over-l {
width: 87.5%;
}
.u1of9-over-l {
width: 11.1111111111%;
}
.u2of9-over-l {
width: 22.2222222222%;
}
.u3of9-over-l {
width: 33.3333333333%;
}
.u4of9-over-l {
width: 44.4444444444%;
}
.u5of9-over-l {
width: 55.5555555556%;
}
.u6of9-over-l {
width: 66.6666666667%;
}
.u7of9-over-l {
width: 77.7777777778%;
}
.u8of9-over-l {
width: 88.8888888889%;
}
.u1of10-over-l {
width: 10%;
}
.u2of10-over-l {
width: 20%;
}
.u3of10-over-l {
width: 30%;
}
.u4of10-over-l {
width: 40%;
}
.u5of10-over-l {
width: 50%;
}
.u6of10-over-l {
width: 60%;
}
.u7of10-over-l {
width: 70%;
}
.u8of10-over-l {
width: 80%;
}
.u9of10-over-l {
width: 90%;
}
.u1of11-over-l {
width: 9.0909090909%;
}
.u2of11-over-l {
width: 18.1818181818%;
}
.u3of11-over-l {
width: 27.2727272727%;
}
.u4of11-over-l {
width: 36.3636363636%;
}
.u5of11-over-l {
width: 45.4545454545%;
}
.u6of11-over-l {
width: 54.5454545455%;
}
.u7of11-over-l {
width: 63.6363636364%;
}
.u8of11-over-l {
width: 72.7272727273%;
}
.u9of11-over-l {
width: 81.8181818182%;
}
.u10of11-over-l {
width: 90.9090909091%;
}
.u1of12-over-l {
width: 8.3333333333%;
}
.u2of12-over-l {
width: 16.6666666667%;
}
.u3of12-over-l {
width: 25%;
}
.u4of12-over-l {
width: 33.3333333333%;
}
.u5of12-over-l {
width: 41.6666666667%;
}
.u6of12-over-l {
width: 50%;
}
.u7of12-over-l {
width: 58.3333333333%;
}
.u8of12-over-l {
width: 66.6666666667%;
}
.u9of12-over-l {
width: 75%;
}
.u10of12-over-l {
width: 83.3333333333%;
}
.u11of12-over-l {
width: 91.6666666667%;
}
}
@media (min-width: 1281px) {
.u1of1-over-xl {
width: 100%;
}
.u0of1-over-xl {
width: 0%;
}
.u1of2-over-xl {
width: 50%;
}
.u1of3-over-xl {
width: 33.3333333333%;
}
.u2of3-over-xl {
width: 66.6666666667%;
}
.u1of4-over-xl {
width: 25%;
}
.u2of4-over-xl {
width: 50%;
}
.u3of4-over-xl {
width: 75%;
}
.u1of5-over-xl {
width: 20%;
}
.u2of5-over-xl {
width: 40%;
}
.u3of5-over-xl {
width: 60%;
}
.u4of5-over-xl {
width: 80%;
}
.u1of6-over-xl {
width: 16.6666666667%;
}
.u2of6-over-xl {
width: 33.3333333333%;
}
.u3of6-over-xl {
width: 50%;
}
.u4of6-over-xl {
width: 66.6666666667%;
}
.u5of6-over-xl {
width: 83.3333333333%;
}
.u1of7-over-xl {
width: 14.2857142857%;
}
.u2of7-over-xl {
width: 28.5714285714%;
}
.u3of7-over-xl {
width: 42.8571428571%;
}
.u4of7-over-xl {
width: 57.1428571429%;
}
.u5of7-over-xl {
width: 71.4285714286%;
}
.u6of7-over-xl {
width: 85.7142857143%;
}
.u1of8-over-xl {
width: 12.5%;
}
.u2of8-over-xl {
width: 25%;
}
.u3of8-over-xl {
width: 37.5%;
}
.u4of8-over-xl {
width: 50%;
}
.u5of8-over-xl {
width: 62.5%;
}
.u6of8-over-xl {
width: 75%;
}
.u7of8-over-xl {
width: 87.5%;
}
.u1of9-over-xl {
width: 11.1111111111%;
}
.u2of9-over-xl {
width: 22.2222222222%;
}
.u3of9-over-xl {
width: 33.3333333333%;
}
.u4of9-over-xl {
width: 44.4444444444%;
}
.u5of9-over-xl {
width: 55.5555555556%;
}
.u6of9-over-xl {
width: 66.6666666667%;
}
.u7of9-over-xl {
width: 77.7777777778%;
}
.u8of9-over-xl {
width: 88.8888888889%;
}
.u1of10-over-xl {
width: 10%;
}
.u2of10-over-xl {
width: 20%;
}
.u3of10-over-xl {
width: 30%;
}
.u4of10-over-xl {
width: 40%;
}
.u5of10-over-xl {
width: 50%;
}
.u6of10-over-xl {
width: 60%;
}
.u7of10-over-xl {
width: 70%;
}
.u8of10-over-xl {
width: 80%;
}
.u9of10-over-xl {
width: 90%;
}
.u1of11-over-xl {
width: 9.0909090909%;
}
.u2of11-over-xl {
width: 18.1818181818%;
}
.u3of11-over-xl {
width: 27.2727272727%;
}
.u4of11-over-xl {
width: 36.3636363636%;
}
.u5of11-over-xl {
width: 45.4545454545%;
}
.u6of11-over-xl {
width: 54.5454545455%;
}
.u7of11-over-xl {
width: 63.6363636364%;
}
.u8of11-over-xl {
width: 72.7272727273%;
}
.u9of11-over-xl {
width: 81.8181818182%;
}
.u10of11-over-xl {
width: 90.9090909091%;
}
.u1of12-over-xl {
width: 8.3333333333%;
}
.u2of12-over-xl {
width: 16.6666666667%;
}
.u3of12-over-xl {
width: 25%;
}
.u4of12-over-xl {
width: 33.3333333333%;
}
.u5of12-over-xl {
width: 41.6666666667%;
}
.u6of12-over-xl {
width: 50%;
}
.u7of12-over-xl {
width: 58.3333333333%;
}
.u8of12-over-xl {
width: 66.6666666667%;
}
.u9of12-over-xl {
width: 75%;
}
.u10of12-over-xl {
width: 83.3333333333%;
}
.u11of12-over-xl {
width: 91.6666666667%;
}
}
[class*=u1of], [class*=u2of], [class*=u3of], [class*=u4of],
[class*=u5of], [class*=u6of], [class*=u7of], [class*=u8of],
[class*=u9of], [class*=u10of], [class*=u11of], [class*=u12of] {
box-sizing: border-box;
}
@media (max-width: 500px) {
.u1of2-under-s {
width: 50%;
}
.u1of3-under-s {
width: 33.3333333333%;
}
.u1of4-under-s {
width: 25%;
}
.u1of5-under-s {
width: 20%;
}
}
[class*=gu1of], [class*=gu2of], [class*=gu3of], [class*=gu4of],
[class*=gu5of], [class*=gu6of], [class*=gu7of], [class*=gu8of],
[class*=gu9of], [class*=gu10of], [class*=gu11of], [class*=gu12of] {
float: left;
margin-left: 3%;
}
[class*=gu1of]:first-child, [class*=gu2of]:first-child, [class*=gu3of]:first-child, [class*=gu4of]:first-child,
[class*=gu5of]:first-child, [class*=gu6of]:first-child, [class*=gu7of]:first-child, [class*=gu8of]:first-child,
[class*=gu9of]:first-child, [class*=gu10of]:first-child, [class*=gu11of]:first-child, [class*=gu12of]:first-child {
margin-left: 0;
}
.gu1of2 {
width: 48.5%;
}
.gu1of3 {
width: 31.3333333333%;
}
.gu2of3 {
width: 65.6666666667%;
}
.gu1of4 {
width: 22.75%;
}
.gu2of4 {
width: 48.5%;
}
.gu3of4 {
width: 74.25%;
}
.gu1of5 {
width: 17.6%;
}
.gu2of5 {
width: 38.2%;
}
.gu3of5 {
width: 58.8%;
}
.gu4of5 {
width: 79.4%;
}
.gu1of6 {
width: 14.1666666667%;
}
.gu2of6 {
width: 31.3333333333%;
}
.gu3of6 {
width: 48.5%;
}
.gu4of6 {
width: 65.6666666667%;
}
.gu5of6 {
width: 82.8333333333%;
}
.gu1of7 {
width: 11.7142857143%;
}
.gu2of7 {
width: 26.4285714286%;
}
.gu3of7 {
width: 41.1428571429%;
}
.gu4of7 {
width: 55.8571428571%;
}
.gu5of7 {
width: 70.5714285714%;
}
.gu6of7 {
width: 85.2857142857%;
}
.gu1of8 {
width: 9.875%;
}
.gu2of8 {
width: 22.75%;
}
.gu3of8 {
width: 35.625%;
}
.gu4of8 {
width: 48.5%;
}
.gu5of8 {
width: 61.375%;
}
.gu6of8 {
width: 74.25%;
}
.gu7of8 {
width: 87.125%;
}
.gu1of9 {
width: 8.4444444444%;
}
.gu2of9 {
width: 19.8888888889%;
}
.gu3of9 {
width: 31.3333333333%;
}
.gu4of9 {
width: 42.7777777778%;
}
.gu5of9 {
width: 54.2222222222%;
}
.gu6of9 {
width: 65.6666666667%;
}
.gu7of9 {
width: 77.1111111111%;
}
.gu8of9 {
width: 88.5555555556%;
}
.gu1of10 {
width: 7.3%;
}
.gu2of10 {
width: 17.6%;
}
.gu3of10 {
width: 27.9%;
}
.gu4of10 {
width: 38.2%;
}
.gu5of10 {
width: 48.5%;
}
.gu6of10 {
width: 58.8%;
}
.gu7of10 {
width: 69.1%;
}
.gu8of10 {
width: 79.4%;
}
.gu9of10 {
width: 89.7%;
}
.gu1of11 {
width: 6.3636363636%;
}
.gu2of11 {
width: 15.7272727273%;
}
.gu3of11 {
width: 25.0909090909%;
}
.gu4of11 {
width: 34.4545454545%;
}
.gu5of11 {
width: 43.8181818182%;
}
.gu6of11 {
width: 53.1818181818%;
}
.gu7of11 {
width: 62.5454545455%;
}
.gu8of11 {
width: 71.9090909091%;
}
.gu9of11 {
width: 81.2727272727%;
}
.gu10of11 {
width: 90.6363636364%;
}
.gu1of12 {
width: 5.5833333333%;
}
.gu2of12 {
width: 14.1666666667%;
}
.gu3of12 {
width: 22.75%;
}
.gu4of12 {
width: 31.3333333333%;
}
.gu5of12 {
width: 39.9166666667%;
}
.gu6of12 {
width: 48.5%;
}
.gu7of12 {
width: 57.0833333333%;
}
.gu8of12 {
width: 65.6666666667%;
}
.gu9of12 {
width: 74.25%;
}
.gu10of12 {
width: 82.8333333333%;
}
.gu11of12 {
width: 91.4166666667%;
}
.pl,
.ph,
.gutters,
.gutter-left {
padding-left: 6px;
}
@media (min-width: 501px) {
.pl,
.ph,
.gutters,
.gutter-left {
padding-left: 6px;
}
}
@media (min-width: 701px) {
.pl,
.ph,
.gutters,
.gutter-left {
padding-left: 12px;
}
}
@media (min-width: 941px) {
.pl,
.ph,
.gutters,
.gutter-left {
padding-left: 18px;
}
}
@media (min-width: 1281px) {
.pl,
.ph,
.gutters,
.gutter-left {
padding-left: 18px;
}
}
.pr,
.ph,
.gutters,
.gutter-right {
padding-right: 6px;
}
@media (min-width: 501px) {
.pr,
.ph,
.gutters,
.gutter-right {
padding-right: 6px;
}
}
@media (min-width: 701px) {
.pr,
.ph,
.gutters,
.gutter-right {
padding-right: 12px;
}
}
@media (min-width: 941px) {
.pr,
.ph,
.gutters,
.gutter-right {
padding-right: 18px;
}
}
@media (min-width: 1281px) {
.pr,
.ph,
.gutters,
.gutter-right {
padding-right: 18px;
}
}
.pt,
.pv,
.gutter-top {
padding-top: 6px;
}
@media (min-width: 501px) {
.pt,
.pv,
.gutter-top {
padding-top: 6px;
}
}
@media (min-width: 701px) {
.pt,
.pv,
.gutter-top {
padding-top: 12px;
}
}
@media (min-width: 941px) {
.pt,
.pv,
.gutter-top {
padding-top: 18px;
}
}
@media (min-width: 1281px) {
.pt,
.pv,
.gutter-top {
padding-top: 18px;
}
}
.pb,
.pv,
.gutter-bottom {
padding-bottom: 6px;
}
@media (min-width: 501px) {
.pb,
.pv,
.gutter-bottom {
padding-bottom: 6px;
}
}
@media (min-width: 701px) {
.pb,
.pv,
.gutter-bottom {
padding-bottom: 12px;
}
}
@media (min-width: 941px) {
.pb,
.pv,
.gutter-bottom {
padding-bottom: 18px;
}
}
@media (min-width: 1281px) {
.pb,
.pv,
.gutter-bottom {
padding-bottom: 18px;
}
}
.gutters__container {
margin-left: -6px;
margin-right: -6px;
}
@media (min-width: 501px) {
.gutters__container {
margin-left: -6px;
margin-right: -6px;
}
}
@media (min-width: 701px) {
.gutters__container {
margin-left: -12px;
margin-right: -12px;
}
}
@media (min-width: 941px) {
.gutters__container {
margin-left: -18px;
margin-right: -18px;
}
}
@media (min-width: 1281px) {
.gutters__container {
margin-left: -18px;
margin-right: -18px;
}
}
.ml,
.mh {
margin-left: 6px;
}
@media (min-width: 501px) {
.ml,
.mh {
margin-left: 6px;
}
}
@media (min-width: 701px) {
.ml,
.mh {
margin-left: 12px;
}
}
@media (min-width: 941px) {
.ml,
.mh {
margin-left: 18px;
}
}
@media (min-width: 1281px) {
.ml,
.mh {
margin-left: 18px;
}
}
.mr,
.mh {
margin-right: 6px;
}
@media (min-width: 501px) {
.mr,
.mh {
margin-right: 6px;
}
}
@media (min-width: 701px) {
.mr,
.mh {
margin-right: 12px;
}
}
@media (min-width: 941px) {
.mr,
.mh {
margin-right: 18px;
}
}
@media (min-width: 1281px) {
.mr,
.mh {
margin-right: 18px;
}
}
.mt,
.mv {
margin-top: 6px;
}
@media (min-width: 501px) {
.mt,
.mv {
margin-top: 6px;
}
}
@media (min-width: 701px) {
.mt,
.mv {
margin-top: 12px;
}
}
@media (min-width: 941px) {
.mt,
.mv {
margin-top: 18px;
}
}
@media (min-width: 1281px) {
.mt,
.mv {
margin-top: 18px;
}
}
.mb,
.mv {
margin-bottom: 6px;
}
@media (min-width: 501px) {
.mb,
.mv {
margin-bottom: 6px;
}
}
@media (min-width: 701px) {
.mb,
.mv {
margin-bottom: 12px;
}
}
@media (min-width: 941px) {
.mb,
.mv {
margin-bottom: 18px;
}
}
@media (min-width: 1281px) {
.mb,
.mv {
margin-bottom: 18px;
}
}
.pt0, .pv0, .pa0 {
padding-top: 0px;
}
@media (min-width: 501px) {
.pt0-over-s {
padding-top: 0px;
}
}
@media (max-width: 500px) {
.pt0-under-s {
padding-top: 0px;
}
}
@media (min-width: 701px) {
.pt0-over-m {
padding-top: 0px;
}
}
@media (max-width: 700px) {
.pt0-under-m {
padding-top: 0px;
}
}
@media (min-width: 941px) {
.pt0-over-l {
padding-top: 0px;
}
}
@media (max-width: 940px) {
.pt0-under-l {
padding-top: 0px;
}
}
@media (min-width: 1281px) {
.pt0-over-xl {
padding-top: 0px;
}
}
@media (max-width: 1280px) {
.pt0-under-xl {
padding-top: 0px;
}
}
.pl0, .ph0, .pa0 {
padding-left: 0px;
}
@media (min-width: 501px) {
.pl0-over-s {
padding-left: 0px;
}
}
@media (max-width: 500px) {
.pl0-under-s {
padding-left: 0px;
}
}
@media (min-width: 701px) {
.pl0-over-m {
padding-left: 0px;
}
}
@media (max-width: 700px) {
.pl0-under-m {
padding-left: 0px;
}
}
@media (min-width: 941px) {
.pl0-over-l {
padding-left: 0px;
}
}
@media (max-width: 940px) {
.pl0-under-l {
padding-left: 0px;
}
}
@media (min-width: 1281px) {
.pl0-over-xl {
padding-left: 0px;
}
}
@media (max-width: 1280px) {
.pl0-under-xl {
padding-left: 0px;
}
}
.pb0, .pv0, .pa0 {
padding-bottom: 0px;
}
@media (min-width: 501px) {
.pb0-over-s {
padding-bottom: 0px;
}
}
@media (max-width: 500px) {
.pb0-under-s {
padding-bottom: 0px;
}
}
@media (min-width: 701px) {
.pb0-over-m {
padding-bottom: 0px;
}
}
@media (max-width: 700px) {
.pb0-under-m {
padding-bottom: 0px;
}
}
@media (min-width: 941px) {
.pb0-over-l {
padding-bottom: 0px;
}
}
@media (max-width: 940px) {
.pb0-under-l {
padding-bottom: 0px;
}
}
@media (min-width: 1281px) {
.pb0-over-xl {
padding-bottom: 0px;
}
}
@media (max-width: 1280px) {
.pb0-under-xl {
padding-bottom: 0px;
}
}
.pr0, .ph0, .pa0 {
padding-right: 0px;
}
@media (min-width: 501px) {
.pr0-over-s {
padding-right: 0px;
}
}
@media (max-width: 500px) {
.pr0-under-s {
padding-right: 0px;
}
}
@media (min-width: 701px) {
.pr0-over-m {
padding-right: 0px;
}
}
@media (max-width: 700px) {
.pr0-under-m {
padding-right: 0px;
}
}
@media (min-width: 941px) {
.pr0-over-l {
padding-right: 0px;
}
}
@media (max-width: 940px) {
.pr0-under-l {
padding-right: 0px;
}
}
@media (min-width: 1281px) {
.pr0-over-xl {
padding-right: 0px;
}
}
@media (max-width: 1280px) {
.pr0-under-xl {
padding-right: 0px;
}
}
@media (min-width: 501px) {
.pa0-over-s {
padding: 0px;
}
}
@media (max-width: 500px) {
.pa0-under-s {
padding: 0px;
}
}
@media (min-width: 701px) {
.pa0-over-m {
padding: 0px;
}
}
@media (max-width: 700px) {
.pa0-under-m {
padding: 0px;
}
}
@media (min-width: 941px) {
.pa0-over-l {
padding: 0px;
}
}
@media (max-width: 940px) {
.pa0-under-l {
padding: 0px;
}
}
@media (min-width: 1281px) {
.pa0-over-xl {
padding: 0px;
}
}
@media (max-width: 1280px) {
.pa0-under-xl {
padding: 0px;
}
}
.pt1, .pv1, .pa1 {
padding-top: 6px;
}
@media (min-width: 501px) {
.pt1-over-s {
padding-top: 6px;
}
}
@media (max-width: 500px) {
.pt1-under-s {
padding-top: 6px;
}
}
@media (min-width: 701px) {
.pt1-over-m {
padding-top: 6px;
}
}
@media (max-width: 700px) {
.pt1-under-m {
padding-top: 6px;
}
}
@media (min-width: 941px) {
.pt1-over-l {
padding-top: 6px;
}
}
@media (max-width: 940px) {
.pt1-under-l {
padding-top: 6px;
}
}
@media (min-width: 1281px) {
.pt1-over-xl {
padding-top: 6px;
}
}
@media (max-width: 1280px) {
.pt1-under-xl {
padding-top: 6px;
}
}
.pl1, .ph1, .pa1 {
padding-left: 6px;
}
@media (min-width: 501px) {
.pl1-over-s {
padding-left: 6px;
}
}
@media (max-width: 500px) {
.pl1-under-s {
padding-left: 6px;
}
}
@media (min-width: 701px) {
.pl1-over-m {
padding-left: 6px;
}
}
@media (max-width: 700px) {
.pl1-under-m {
padding-left: 6px;
}
}
@media (min-width: 941px) {
.pl1-over-l {
padding-left: 6px;
}
}
@media (max-width: 940px) {
.pl1-under-l {
padding-left: 6px;
}
}
@media (min-width: 1281px) {
.pl1-over-xl {
padding-left: 6px;
}
}
@media (max-width: 1280px) {
.pl1-under-xl {
padding-left: 6px;
}
}
.pb1, .pv1, .pa1 {
padding-bottom: 6px;
}
@media (min-width: 501px) {
.pb1-over-s {
padding-bottom: 6px;
}
}
@media (max-width: 500px) {
.pb1-under-s {
padding-bottom: 6px;
}
}
@media (min-width: 701px) {
.pb1-over-m {
padding-bottom: 6px;
}
}
@media (max-width: 700px) {
.pb1-under-m {
padding-bottom: 6px;
}
}
@media (min-width: 941px) {
.pb1-over-l {
padding-bottom: 6px;
}
}
@media (max-width: 940px) {
.pb1-under-l {
padding-bottom: 6px;
}
}
@media (min-width: 1281px) {
.pb1-over-xl {
padding-bottom: 6px;
}
}
@media (max-width: 1280px) {
.pb1-under-xl {
padding-bottom: 6px;
}
}
.pr1, .ph1, .pa1 {
padding-right: 6px;
}
@media (min-width: 501px) {
.pr1-over-s {
padding-right: 6px;
}
}
@media (max-width: 500px) {
.pr1-under-s {
padding-right: 6px;
}
}
@media (min-width: 701px) {
.pr1-over-m {
padding-right: 6px;
}
}
@media (max-width: 700px) {
.pr1-under-m {
padding-right: 6px;
}
}
@media (min-width: 941px) {
.pr1-over-l {
padding-right: 6px;
}
}
@media (max-width: 940px) {
.pr1-under-l {
padding-right: 6px;
}
}
@media (min-width: 1281px) {
.pr1-over-xl {
padding-right: 6px;
}
}
@media (max-width: 1280px) {
.pr1-under-xl {
padding-right: 6px;
}
}
@media (min-width: 501px) {
.pa1-over-s {
padding: 6px;
}
}
@media (max-width: 500px) {
.pa1-under-s {
padding: 6px;
}
}
@media (min-width: 701px) {
.pa1-over-m {
padding: 6px;
}
}
@media (max-width: 700px) {
.pa1-under-m {
padding: 6px;
}
}
@media (min-width: 941px) {
.pa1-over-l {
padding: 6px;
}
}
@media (max-width: 940px) {
.pa1-under-l {
padding: 6px;
}
}
@media (min-width: 1281px) {
.pa1-over-xl {
padding: 6px;
}
}
@media (max-width: 1280px) {
.pa1-under-xl {
padding: 6px;
}
}
.pt2, .pv2, .pa2 {
padding-top: 12px;
}
@media (min-width: 501px) {
.pt2-over-s {
padding-top: 12px;
}
}
@media (max-width: 500px) {
.pt2-under-s {
padding-top: 12px;
}
}
@media (min-width: 701px) {
.pt2-over-m {
padding-top: 12px;
}
}
@media (max-width: 700px) {
.pt2-under-m {
padding-top: 12px;
}
}
@media (min-width: 941px) {
.pt2-over-l {
padding-top: 12px;
}
}
@media (max-width: 940px) {
.pt2-under-l {
padding-top: 12px;
}
}
@media (min-width: 1281px) {
.pt2-over-xl {
padding-top: 12px;
}
}
@media (max-width: 1280px) {
.pt2-under-xl {
padding-top: 12px;
}
}
.pl2, .ph2, .pa2 {
padding-left: 12px;
}
@media (min-width: 501px) {
.pl2-over-s {
padding-left: 12px;
}
}
@media (max-width: 500px) {
.pl2-under-s {
padding-left: 12px;
}
}
@media (min-width: 701px) {
.pl2-over-m {
padding-left: 12px;
}
}
@media (max-width: 700px) {
.pl2-under-m {
padding-left: 12px;
}
}
@media (min-width: 941px) {
.pl2-over-l {
padding-left: 12px;
}
}
@media (max-width: 940px) {
.pl2-under-l {
padding-left: 12px;
}
}
@media (min-width: 1281px) {
.pl2-over-xl {
padding-left: 12px;
}
}
@media (max-width: 1280px) {
.pl2-under-xl {
padding-left: 12px;
}
}
.pb2, .pv2, .pa2 {
padding-bottom: 12px;
}
@media (min-width: 501px) {
.pb2-over-s {
padding-bottom: 12px;
}
}
@media (max-width: 500px) {
.pb2-under-s {
padding-bottom: 12px;
}
}
@media (min-width: 701px) {
.pb2-over-m {
padding-bottom: 12px;
}
}
@media (max-width: 700px) {
.pb2-under-m {
padding-bottom: 12px;
}
}
@media (min-width: 941px) {
.pb2-over-l {
padding-bottom: 12px;
}
}
@media (max-width: 940px) {
.pb2-under-l {
padding-bottom: 12px;
}
}
@media (min-width: 1281px) {
.pb2-over-xl {
padding-bottom: 12px;
}
}
@media (max-width: 1280px) {
.pb2-under-xl {
padding-bottom: 12px;
}
}
.pr2, .ph2, .pa2 {
padding-right: 12px;
}
@media (min-width: 501px) {
.pr2-over-s {
padding-right: 12px;
}
}
@media (max-width: 500px) {
.pr2-under-s {
padding-right: 12px;
}
}
@media (min-width: 701px) {
.pr2-over-m {
padding-right: 12px;
}
}
@media (max-width: 700px) {
.pr2-under-m {
padding-right: 12px;
}
}
@media (min-width: 941px) {
.pr2-over-l {
padding-right: 12px;
}
}
@media (max-width: 940px) {
.pr2-under-l {
padding-right: 12px;
}
}
@media (min-width: 1281px) {
.pr2-over-xl {
padding-right: 12px;
}
}
@media (max-width: 1280px) {
.pr2-under-xl {
padding-right: 12px;
}
}
@media (min-width: 501px) {
.pa2-over-s {
padding: 12px;
}
}
@media (max-width: 500px) {
.pa2-under-s {
padding: 12px;
}
}
@media (min-width: 701px) {
.pa2-over-m {
padding: 12px;
}
}
@media (max-width: 700px) {
.pa2-under-m {
padding: 12px;
}
}
@media (min-width: 941px) {
.pa2-over-l {
padding: 12px;
}
}
@media (max-width: 940px) {
.pa2-under-l {
padding: 12px;
}
}
@media (min-width: 1281px) {
.pa2-over-xl {
padding: 12px;
}
}
@media (max-width: 1280px) {
.pa2-under-xl {
padding: 12px;
}
}
.pt3, .pv3, .pa3 {
padding-top: 18px;
}
@media (min-width: 501px) {
.pt3-over-s {
padding-top: 18px;
}
}
@media (max-width: 500px) {
.pt3-under-s {
padding-top: 18px;
}
}
@media (min-width: 701px) {
.pt3-over-m {
padding-top: 18px;
}
}
@media (max-width: 700px) {
.pt3-under-m {
padding-top: 18px;
}
}
@media (min-width: 941px) {
.pt3-over-l {
padding-top: 18px;
}
}
@media (max-width: 940px) {
.pt3-under-l {
padding-top: 18px;
}
}
@media (min-width: 1281px) {
.pt3-over-xl {
padding-top: 18px;
}
}
@media (max-width: 1280px) {
.pt3-under-xl {
padding-top: 18px;
}
}
.pl3, .ph3, .pa3 {
padding-left: 18px;
}
@media (min-width: 501px) {
.pl3-over-s {
padding-left: 18px;
}
}
@media (max-width: 500px) {
.pl3-under-s {
padding-left: 18px;
}
}
@media (min-width: 701px) {
.pl3-over-m {
padding-left: 18px;
}
}
@media (max-width: 700px) {
.pl3-under-m {
padding-left: 18px;
}
}
@media (min-width: 941px) {
.pl3-over-l {
padding-left: 18px;
}
}
@media (max-width: 940px) {
.pl3-under-l {
padding-left: 18px;
}
}
@media (min-width: 1281px) {
.pl3-over-xl {
padding-left: 18px;
}
}
@media (max-width: 1280px) {
.pl3-under-xl {
padding-left: 18px;
}
}
.pb3, .pv3, .pa3 {
padding-bottom: 18px;
}
@media (min-width: 501px) {
.pb3-over-s {
padding-bottom: 18px;
}
}
@media (max-width: 500px) {
.pb3-under-s {
padding-bottom: 18px;
}
}
@media (min-width: 701px) {
.pb3-over-m {
padding-bottom: 18px;
}
}
@media (max-width: 700px) {
.pb3-under-m {
padding-bottom: 18px;
}
}
@media (min-width: 941px) {
.pb3-over-l {
padding-bottom: 18px;
}
}
@media (max-width: 940px) {
.pb3-under-l {
padding-bottom: 18px;
}
}
@media (min-width: 1281px) {
.pb3-over-xl {
padding-bottom: 18px;
}
}
@media (max-width: 1280px) {
.pb3-under-xl {
padding-bottom: 18px;
}
}
.pr3, .ph3, .pa3 {
padding-right: 18px;
}
@media (min-width: 501px) {
.pr3-over-s {
padding-right: 18px;
}
}
@media (max-width: 500px) {
.pr3-under-s {
padding-right: 18px;
}
}
@media (min-width: 701px) {
.pr3-over-m {
padding-right: 18px;
}
}
@media (max-width: 700px) {
.pr3-under-m {
padding-right: 18px;
}
}
@media (min-width: 941px) {
.pr3-over-l {
padding-right: 18px;
}
}
@media (max-width: 940px) {
.pr3-under-l {
padding-right: 18px;
}
}
@media (min-width: 1281px) {
.pr3-over-xl {
padding-right: 18px;
}
}
@media (max-width: 1280px) {
.pr3-under-xl {
padding-right: 18px;
}
}
@media (min-width: 501px) {
.pa3-over-s {
padding: 18px;
}
}
@media (max-width: 500px) {
.pa3-under-s {
padding: 18px;
}
}
@media (min-width: 701px) {
.pa3-over-m {
padding: 18px;
}
}
@media (max-width: 700px) {
.pa3-under-m {
padding: 18px;
}
}
@media (min-width: 941px) {
.pa3-over-l {
padding: 18px;
}
}
@media (max-width: 940px) {
.pa3-under-l {
padding: 18px;
}
}
@media (min-width: 1281px) {
.pa3-over-xl {
padding: 18px;
}
}
@media (max-width: 1280px) {
.pa3-under-xl {
padding: 18px;
}
}
.pt4, .pv4, .pa4 {
padding-top: 24px;
}
@media (min-width: 501px) {
.pt4-over-s {
padding-top: 24px;
}
}
@media (max-width: 500px) {
.pt4-under-s {
padding-top: 24px;
}
}
@media (min-width: 701px) {
.pt4-over-m {
padding-top: 24px;
}
}
@media (max-width: 700px) {
.pt4-under-m {
padding-top: 24px;
}
}
@media (min-width: 941px) {
.pt4-over-l {
padding-top: 24px;
}
}
@media (max-width: 940px) {
.pt4-under-l {
padding-top: 24px;
}
}
@media (min-width: 1281px) {
.pt4-over-xl {
padding-top: 24px;
}
}
@media (max-width: 1280px) {
.pt4-under-xl {
padding-top: 24px;
}
}
.pl4, .ph4, .pa4 {
padding-left: 24px;
}
@media (min-width: 501px) {
.pl4-over-s {
padding-left: 24px;
}
}
@media (max-width: 500px) {
.pl4-under-s {
padding-left: 24px;
}
}
@media (min-width: 701px) {
.pl4-over-m {
padding-left: 24px;
}
}
@media (max-width: 700px) {
.pl4-under-m {
padding-left: 24px;
}
}
@media (min-width: 941px) {
.pl4-over-l {
padding-left: 24px;
}
}
@media (max-width: 940px) {
.pl4-under-l {
padding-left: 24px;
}
}
@media (min-width: 1281px) {
.pl4-over-xl {
padding-left: 24px;
}
}
@media (max-width: 1280px) {
.pl4-under-xl {
padding-left: 24px;
}
}
.pb4, .pv4, .pa4 {
padding-bottom: 24px;
}
@media (min-width: 501px) {
.pb4-over-s {
padding-bottom: 24px;
}
}
@media (max-width: 500px) {
.pb4-under-s {
padding-bottom: 24px;
}
}
@media (min-width: 701px) {
.pb4-over-m {
padding-bottom: 24px;
}
}
@media (max-width: 700px) {
.pb4-under-m {
padding-bottom: 24px;
}
}
@media (min-width: 941px) {
.pb4-over-l {
padding-bottom: 24px;
}
}
@media (max-width: 940px) {
.pb4-under-l {
padding-bottom: 24px;
}
}
@media (min-width: 1281px) {
.pb4-over-xl {
padding-bottom: 24px;
}
}
@media (max-width: 1280px) {
.pb4-under-xl {
padding-bottom: 24px;
}
}
.pr4, .ph4, .pa4 {
padding-right: 24px;
}
@media (min-width: 501px) {
.pr4-over-s {
padding-right: 24px;
}
}
@media (max-width: 500px) {
.pr4-under-s {
padding-right: 24px;
}
}
@media (min-width: 701px) {
.pr4-over-m {
padding-right: 24px;
}
}
@media (max-width: 700px) {
.pr4-under-m {
padding-right: 24px;
}
}
@media (min-width: 941px) {
.pr4-over-l {
padding-right: 24px;
}
}
@media (max-width: 940px) {
.pr4-under-l {
padding-right: 24px;
}
}
@media (min-width: 1281px) {
.pr4-over-xl {
padding-right: 24px;
}
}
@media (max-width: 1280px) {
.pr4-under-xl {
padding-right: 24px;
}
}
@media (min-width: 501px) {
.pa4-over-s {
padding: 24px;
}
}
@media (max-width: 500px) {
.pa4-under-s {
padding: 24px;
}
}
@media (min-width: 701px) {
.pa4-over-m {
padding: 24px;
}
}
@media (max-width: 700px) {
.pa4-under-m {
padding: 24px;
}
}
@media (min-width: 941px) {
.pa4-over-l {
padding: 24px;
}
}
@media (max-width: 940px) {
.pa4-under-l {
padding: 24px;
}
}
@media (min-width: 1281px) {
.pa4-over-xl {
padding: 24px;
}
}
@media (max-width: 1280px) {
.pa4-under-xl {
padding: 24px;
}
}
.pt5, .pv5, .pa5 {
padding-top: 30px;
}
@media (min-width: 501px) {
.pt5-over-s {
padding-top: 30px;
}
}
@media (max-width: 500px) {
.pt5-under-s {
padding-top: 30px;
}
}
@media (min-width: 701px) {
.pt5-over-m {
padding-top: 30px;
}
}
@media (max-width: 700px) {
.pt5-under-m {
padding-top: 30px;
}
}
@media (min-width: 941px) {
.pt5-over-l {
padding-top: 30px;
}
}
@media (max-width: 940px) {
.pt5-under-l {
padding-top: 30px;
}
}
@media (min-width: 1281px) {
.pt5-over-xl {
padding-top: 30px;
}
}
@media (max-width: 1280px) {
.pt5-under-xl {
padding-top: 30px;
}
}
.pl5, .ph5, .pa5 {
padding-left: 30px;
}
@media (min-width: 501px) {
.pl5-over-s {
padding-left: 30px;
}
}
@media (max-width: 500px) {
.pl5-under-s {
padding-left: 30px;
}
}
@media (min-width: 701px) {
.pl5-over-m {
padding-left: 30px;
}
}
@media (max-width: 700px) {
.pl5-under-m {
padding-left: 30px;
}
}
@media (min-width: 941px) {
.pl5-over-l {
padding-left: 30px;
}
}
@media (max-width: 940px) {
.pl5-under-l {
padding-left: 30px;
}
}
@media (min-width: 1281px) {
.pl5-over-xl {
padding-left: 30px;
}
}
@media (max-width: 1280px) {
.pl5-under-xl {
padding-left: 30px;
}
}
.pb5, .pv5, .pa5 {
padding-bottom: 30px;
}
@media (min-width: 501px) {
.pb5-over-s {
padding-bottom: 30px;
}
}
@media (max-width: 500px) {
.pb5-under-s {
padding-bottom: 30px;
}
}
@media (min-width: 701px) {
.pb5-over-m {
padding-bottom: 30px;
}
}
@media (max-width: 700px) {
.pb5-under-m {
padding-bottom: 30px;
}
}
@media (min-width: 941px) {
.pb5-over-l {
padding-bottom: 30px;
}
}
@media (max-width: 940px) {
.pb5-under-l {
padding-bottom: 30px;
}
}
@media (min-width: 1281px) {
.pb5-over-xl {
padding-bottom: 30px;
}
}
@media (max-width: 1280px) {
.pb5-under-xl {
padding-bottom: 30px;
}
}
.pr5, .ph5, .pa5 {
padding-right: 30px;
}
@media (min-width: 501px) {
.pr5-over-s {
padding-right: 30px;
}
}
@media (max-width: 500px) {
.pr5-under-s {
padding-right: 30px;
}
}
@media (min-width: 701px) {
.pr5-over-m {
padding-right: 30px;
}
}
@media (max-width: 700px) {
.pr5-under-m {
padding-right: 30px;
}
}
@media (min-width: 941px) {
.pr5-over-l {
padding-right: 30px;
}
}
@media (max-width: 940px) {
.pr5-under-l {
padding-right: 30px;
}
}
@media (min-width: 1281px) {
.pr5-over-xl {
padding-right: 30px;
}
}
@media (max-width: 1280px) {
.pr5-under-xl {
padding-right: 30px;
}
}
@media (min-width: 501px) {
.pa5-over-s {
padding: 30px;
}
}
@media (max-width: 500px) {
.pa5-under-s {
padding: 30px;
}
}
@media (min-width: 701px) {
.pa5-over-m {
padding: 30px;
}
}
@media (max-width: 700px) {
.pa5-under-m {
padding: 30px;
}
}
@media (min-width: 941px) {
.pa5-over-l {
padding: 30px;
}
}
@media (max-width: 940px) {
.pa5-under-l {
padding: 30px;
}
}
@media (min-width: 1281px) {
.pa5-over-xl {
padding: 30px;
}
}
@media (max-width: 1280px) {
.pa5-under-xl {
padding: 30px;
}
}
.pt6, .pv6, .pa6 {
padding-top: 36px;
}
@media (min-width: 501px) {
.pt6-over-s {
padding-top: 36px;
}
}
@media (max-width: 500px) {
.pt6-under-s {
padding-top: 36px;
}
}
@media (min-width: 701px) {
.pt6-over-m {
padding-top: 36px;
}
}
@media (max-width: 700px) {
.pt6-under-m {
padding-top: 36px;
}
}
@media (min-width: 941px) {
.pt6-over-l {
padding-top: 36px;
}
}
@media (max-width: 940px) {
.pt6-under-l {
padding-top: 36px;
}
}
@media (min-width: 1281px) {
.pt6-over-xl {
padding-top: 36px;
}
}
@media (max-width: 1280px) {
.pt6-under-xl {
padding-top: 36px;
}
}
.pl6, .ph6, .pa6 {
padding-left: 36px;
}
@media (min-width: 501px) {
.pl6-over-s {
padding-left: 36px;
}
}
@media (max-width: 500px) {
.pl6-under-s {
padding-left: 36px;
}
}
@media (min-width: 701px) {
.pl6-over-m {
padding-left: 36px;
}
}
@media (max-width: 700px) {
.pl6-under-m {
padding-left: 36px;
}
}
@media (min-width: 941px) {
.pl6-over-l {
padding-left: 36px;
}
}
@media (max-width: 940px) {
.pl6-under-l {
padding-left: 36px;
}
}
@media (min-width: 1281px) {
.pl6-over-xl {
padding-left: 36px;
}
}
@media (max-width: 1280px) {
.pl6-under-xl {
padding-left: 36px;
}
}
.pb6, .pv6, .pa6 {
padding-bottom: 36px;
}
@media (min-width: 501px) {
.pb6-over-s {
padding-bottom: 36px;
}
}
@media (max-width: 500px) {
.pb6-under-s {
padding-bottom: 36px;
}
}
@media (min-width: 701px) {
.pb6-over-m {
padding-bottom: 36px;
}
}
@media (max-width: 700px) {
.pb6-under-m {
padding-bottom: 36px;
}
}
@media (min-width: 941px) {
.pb6-over-l {
padding-bottom: 36px;
}
}
@media (max-width: 940px) {
.pb6-under-l {
padding-bottom: 36px;
}
}
@media (min-width: 1281px) {
.pb6-over-xl {
padding-bottom: 36px;
}
}
@media (max-width: 1280px) {
.pb6-under-xl {
padding-bottom: 36px;
}
}
.pr6, .ph6, .pa6 {
padding-right: 36px;
}
@media (min-width: 501px) {
.pr6-over-s {
padding-right: 36px;
}
}
@media (max-width: 500px) {
.pr6-under-s {
padding-right: 36px;
}
}
@media (min-width: 701px) {
.pr6-over-m {
padding-right: 36px;
}
}
@media (max-width: 700px) {
.pr6-under-m {
padding-right: 36px;
}
}
@media (min-width: 941px) {
.pr6-over-l {
padding-right: 36px;
}
}
@media (max-width: 940px) {
.pr6-under-l {
padding-right: 36px;
}
}
@media (min-width: 1281px) {
.pr6-over-xl {
padding-right: 36px;
}
}
@media (max-width: 1280px) {
.pr6-under-xl {
padding-right: 36px;
}
}
@media (min-width: 501px) {
.pa6-over-s {
padding: 36px;
}
}
@media (max-width: 500px) {
.pa6-under-s {
padding: 36px;
}
}
@media (min-width: 701px) {
.pa6-over-m {
padding: 36px;
}
}
@media (max-width: 700px) {
.pa6-under-m {
padding: 36px;
}
}
@media (min-width: 941px) {
.pa6-over-l {
padding: 36px;
}
}
@media (max-width: 940px) {
.pa6-under-l {
padding: 36px;
}
}
@media (min-width: 1281px) {
.pa6-over-xl {
padding: 36px;
}
}
@media (max-width: 1280px) {
.pa6-under-xl {
padding: 36px;
}
}
.mt0, .mv0, .ma0 {
margin-top: 0px;
}
@media (min-width: 501px) {
.mt0-over-s {
margin-top: 0px;
}
}
@media (max-width: 500px) {
.mt0-under-s {
margin-top: 0px;
}
}
@media (min-width: 701px) {
.mt0-over-m {
margin-top: 0px;
}
}
@media (max-width: 700px) {
.mt0-under-m {
margin-top: 0px;
}
}
@media (min-width: 941px) {
.mt0-over-l {
margin-top: 0px;
}
}
@media (max-width: 940px) {
.mt0-under-l {
margin-top: 0px;
}
}
@media (min-width: 1281px) {
.mt0-over-xl {
margin-top: 0px;
}
}
@media (max-width: 1280px) {
.mt0-under-xl {
margin-top: 0px;
}
}
.ml0, .mh0, .ma0 {
margin-left: 0px;
}
@media (min-width: 501px) {
.ml0-over-s {
margin-left: 0px;
}
}
@media (max-width: 500px) {
.ml0-under-s {
margin-left: 0px;
}
}
@media (min-width: 701px) {
.ml0-over-m {
margin-left: 0px;
}
}
@media (max-width: 700px) {
.ml0-under-m {
margin-left: 0px;
}
}
@media (min-width: 941px) {
.ml0-over-l {
margin-left: 0px;
}
}
@media (max-width: 940px) {
.ml0-under-l {
margin-left: 0px;
}
}
@media (min-width: 1281px) {
.ml0-over-xl {
margin-left: 0px;
}
}
@media (max-width: 1280px) {
.ml0-under-xl {
margin-left: 0px;
}
}
.mb0, .mv0, .ma0 {
margin-bottom: 0px;
}
@media (min-width: 501px) {
.mb0-over-s {
margin-bottom: 0px;
}
}
@media (max-width: 500px) {
.mb0-under-s {
margin-bottom: 0px;
}
}
@media (min-width: 701px) {
.mb0-over-m {
margin-bottom: 0px;
}
}
@media (max-width: 700px) {
.mb0-under-m {
margin-bottom: 0px;
}
}
@media (min-width: 941px) {
.mb0-over-l {
margin-bottom: 0px;
}
}
@media (max-width: 940px) {
.mb0-under-l {
margin-bottom: 0px;
}
}
@media (min-width: 1281px) {
.mb0-over-xl {
margin-bottom: 0px;
}
}
@media (max-width: 1280px) {
.mb0-under-xl {
margin-bottom: 0px;
}
}
.mr0, .mh0, .ma0 {
margin-right: 0px;
}
@media (min-width: 501px) {
.mr0-over-s {
margin-right: 0px;
}
}
@media (max-width: 500px) {
.mr0-under-s {
margin-right: 0px;
}
}
@media (min-width: 701px) {
.mr0-over-m {
margin-right: 0px;
}
}
@media (max-width: 700px) {
.mr0-under-m {
margin-right: 0px;
}
}
@media (min-width: 941px) {
.mr0-over-l {
margin-right: 0px;
}
}
@media (max-width: 940px) {
.mr0-under-l {
margin-right: 0px;
}
}
@media (min-width: 1281px) {
.mr0-over-xl {
margin-right: 0px;
}
}
@media (max-width: 1280px) {
.mr0-under-xl {
margin-right: 0px;
}
}
@media (min-width: 501px) {
.ma0-over-s {
margin: 0px;
}
}
@media (max-width: 500px) {
.ma0-under-s {
margin: 0px;
}
}
@media (min-width: 701px) {
.ma0-over-m {
margin: 0px;
}
}
@media (max-width: 700px) {
.ma0-under-m {
margin: 0px;
}
}
@media (min-width: 941px) {
.ma0-over-l {
margin: 0px;
}
}
@media (max-width: 940px) {
.ma0-under-l {
margin: 0px;
}
}
@media (min-width: 1281px) {
.ma0-over-xl {
margin: 0px;
}
}
@media (max-width: 1280px) {
.ma0-under-xl {
margin: 0px;
}
}
.mt1, .mv1, .ma1 {
margin-top: 6px;
}
@media (min-width: 501px) {
.mt1-over-s {
margin-top: 6px;
}
}
@media (max-width: 500px) {
.mt1-under-s {
margin-top: 6px;
}
}
@media (min-width: 701px) {
.mt1-over-m {
margin-top: 6px;
}
}
@media (max-width: 700px) {
.mt1-under-m {
margin-top: 6px;
}
}
@media (min-width: 941px) {
.mt1-over-l {
margin-top: 6px;
}
}
@media (max-width: 940px) {
.mt1-under-l {
margin-top: 6px;
}
}
@media (min-width: 1281px) {
.mt1-over-xl {
margin-top: 6px;
}
}
@media (max-width: 1280px) {
.mt1-under-xl {
margin-top: 6px;
}
}
.ml1, .mh1, .ma1 {
margin-left: 6px;
}
@media (min-width: 501px) {
.ml1-over-s {
margin-left: 6px;
}
}
@media (max-width: 500px) {
.ml1-under-s {
margin-left: 6px;
}
}
@media (min-width: 701px) {
.ml1-over-m {
margin-left: 6px;
}
}
@media (max-width: 700px) {
.ml1-under-m {
margin-left: 6px;
}
}
@media (min-width: 941px) {
.ml1-over-l {
margin-left: 6px;
}
}
@media (max-width: 940px) {
.ml1-under-l {
margin-left: 6px;
}
}
@media (min-width: 1281px) {
.ml1-over-xl {
margin-left: 6px;
}
}
@media (max-width: 1280px) {
.ml1-under-xl {
margin-left: 6px;
}
}
.mb1, .mv1, .ma1 {
margin-bottom: 6px;
}
@media (min-width: 501px) {
.mb1-over-s {
margin-bottom: 6px;
}
}
@media (max-width: 500px) {
.mb1-under-s {
margin-bottom: 6px;
}
}
@media (min-width: 701px) {
.mb1-over-m {
margin-bottom: 6px;
}
}
@media (max-width: 700px) {
.mb1-under-m {
margin-bottom: 6px;
}
}
@media (min-width: 941px) {
.mb1-over-l {
margin-bottom: 6px;
}
}
@media (max-width: 940px) {
.mb1-under-l {
margin-bottom: 6px;
}
}
@media (min-width: 1281px) {
.mb1-over-xl {
margin-bottom: 6px;
}
}
@media (max-width: 1280px) {
.mb1-under-xl {
margin-bottom: 6px;
}
}
.mr1, .mh1, .ma1 {
margin-right: 6px;
}
@media (min-width: 501px) {
.mr1-over-s {
margin-right: 6px;
}
}
@media (max-width: 500px) {
.mr1-under-s {
margin-right: 6px;
}
}
@media (min-width: 701px) {
.mr1-over-m {
margin-right: 6px;
}
}
@media (max-width: 700px) {
.mr1-under-m {
margin-right: 6px;
}
}
@media (min-width: 941px) {
.mr1-over-l {
margin-right: 6px;
}
}
@media (max-width: 940px) {
.mr1-under-l {
margin-right: 6px;
}
}
@media (min-width: 1281px) {
.mr1-over-xl {
margin-right: 6px;
}
}
@media (max-width: 1280px) {
.mr1-under-xl {
margin-right: 6px;
}
}
@media (min-width: 501px) {
.ma1-over-s {
margin: 6px;
}
}
@media (max-width: 500px) {
.ma1-under-s {
margin: 6px;
}
}
@media (min-width: 701px) {
.ma1-over-m {
margin: 6px;
}
}
@media (max-width: 700px) {
.ma1-under-m {
margin: 6px;
}
}
@media (min-width: 941px) {
.ma1-over-l {
margin: 6px;
}
}
@media (max-width: 940px) {
.ma1-under-l {
margin: 6px;
}
}
@media (min-width: 1281px) {
.ma1-over-xl {
margin: 6px;
}
}
@media (max-width: 1280px) {
.ma1-under-xl {
margin: 6px;
}
}
.mt2, .mv2, .ma2 {
margin-top: 12px;
}
@media (min-width: 501px) {
.mt2-over-s {
margin-top: 12px;
}
}
@media (max-width: 500px) {
.mt2-under-s {
margin-top: 12px;
}
}
@media (min-width: 701px) {
.mt2-over-m {
margin-top: 12px;
}
}
@media (max-width: 700px) {
.mt2-under-m {
margin-top: 12px;
}
}
@media (min-width: 941px) {
.mt2-over-l {
margin-top: 12px;
}
}
@media (max-width: 940px) {
.mt2-under-l {
margin-top: 12px;
}
}
@media (min-width: 1281px) {
.mt2-over-xl {
margin-top: 12px;
}
}
@media (max-width: 1280px) {
.mt2-under-xl {
margin-top: 12px;
}
}
.ml2, .mh2, .ma2 {
margin-left: 12px;
}
@media (min-width: 501px) {
.ml2-over-s {
margin-left: 12px;
}
}
@media (max-width: 500px) {
.ml2-under-s {
margin-left: 12px;
}
}
@media (min-width: 701px) {
.ml2-over-m {
margin-left: 12px;
}
}
@media (max-width: 700px) {
.ml2-under-m {
margin-left: 12px;
}
}
@media (min-width: 941px) {
.ml2-over-l {
margin-left: 12px;
}
}
@media (max-width: 940px) {
.ml2-under-l {
margin-left: 12px;
}
}
@media (min-width: 1281px) {
.ml2-over-xl {
margin-left: 12px;
}
}
@media (max-width: 1280px) {
.ml2-under-xl {
margin-left: 12px;
}
}
.mb2, .mv2, .ma2 {
margin-bottom: 12px;
}
@media (min-width: 501px) {
.mb2-over-s {
margin-bottom: 12px;
}
}
@media (max-width: 500px) {
.mb2-under-s {
margin-bottom: 12px;
}
}
@media (min-width: 701px) {
.mb2-over-m {
margin-bottom: 12px;
}
}
@media (max-width: 700px) {
.mb2-under-m {
margin-bottom: 12px;
}
}
@media (min-width: 941px) {
.mb2-over-l {
margin-bottom: 12px;
}
}
@media (max-width: 940px) {
.mb2-under-l {
margin-bottom: 12px;
}
}
@media (min-width: 1281px) {
.mb2-over-xl {
margin-bottom: 12px;
}
}
@media (max-width: 1280px) {
.mb2-under-xl {
margin-bottom: 12px;
}
}
.mr2, .mh2, .ma2 {
margin-right: 12px;
}
@media (min-width: 501px) {
.mr2-over-s {
margin-right: 12px;
}
}
@media (max-width: 500px) {
.mr2-under-s {
margin-right: 12px;
}
}
@media (min-width: 701px) {
.mr2-over-m {
margin-right: 12px;
}
}
@media (max-width: 700px) {
.mr2-under-m {
margin-right: 12px;
}
}
@media (min-width: 941px) {
.mr2-over-l {
margin-right: 12px;
}
}
@media (max-width: 940px) {
.mr2-under-l {
margin-right: 12px;
}
}
@media (min-width: 1281px) {
.mr2-over-xl {
margin-right: 12px;
}
}
@media (max-width: 1280px) {
.mr2-under-xl {
margin-right: 12px;
}
}
@media (min-width: 501px) {
.ma2-over-s {
margin: 12px;
}
}
@media (max-width: 500px) {
.ma2-under-s {
margin: 12px;
}
}
@media (min-width: 701px) {
.ma2-over-m {
margin: 12px;
}
}
@media (max-width: 700px) {
.ma2-under-m {
margin: 12px;
}
}
@media (min-width: 941px) {
.ma2-over-l {
margin: 12px;
}
}
@media (max-width: 940px) {
.ma2-under-l {
margin: 12px;
}
}
@media (min-width: 1281px) {
.ma2-over-xl {
margin: 12px;
}
}
@media (max-width: 1280px) {
.ma2-under-xl {
margin: 12px;
}
}
.mt3, .mv3, .ma3 {
margin-top: 18px;
}
@media (min-width: 501px) {
.mt3-over-s {
margin-top: 18px;
}
}
@media (max-width: 500px) {
.mt3-under-s {
margin-top: 18px;
}
}
@media (min-width: 701px) {
.mt3-over-m {
margin-top: 18px;
}
}
@media (max-width: 700px) {
.mt3-under-m {
margin-top: 18px;
}
}
@media (min-width: 941px) {
.mt3-over-l {
margin-top: 18px;
}
}
@media (max-width: 940px) {
.mt3-under-l {
margin-top: 18px;
}
}
@media (min-width: 1281px) {
.mt3-over-xl {
margin-top: 18px;
}
}
@media (max-width: 1280px) {
.mt3-under-xl {
margin-top: 18px;
}
}
.ml3, .mh3, .ma3 {
margin-left: 18px;
}
@media (min-width: 501px) {
.ml3-over-s {
margin-left: 18px;
}
}
@media (max-width: 500px) {
.ml3-under-s {
margin-left: 18px;
}
}
@media (min-width: 701px) {
.ml3-over-m {
margin-left: 18px;
}
}
@media (max-width: 700px) {
.ml3-under-m {
margin-left: 18px;
}
}
@media (min-width: 941px) {
.ml3-over-l {
margin-left: 18px;
}
}
@media (max-width: 940px) {
.ml3-under-l {
margin-left: 18px;
}
}
@media (min-width: 1281px) {
.ml3-over-xl {
margin-left: 18px;
}
}
@media (max-width: 1280px) {
.ml3-under-xl {
margin-left: 18px;
}
}
.mb3, .mv3, .ma3 {
margin-bottom: 18px;
}
@media (min-width: 501px) {
.mb3-over-s {
margin-bottom: 18px;
}
}
@media (max-width: 500px) {
.mb3-under-s {
margin-bottom: 18px;
}
}
@media (min-width: 701px) {
.mb3-over-m {
margin-bottom: 18px;
}
}
@media (max-width: 700px) {
.mb3-under-m {
margin-bottom: 18px;
}
}
@media (min-width: 941px) {
.mb3-over-l {
margin-bottom: 18px;
}
}
@media (max-width: 940px) {
.mb3-under-l {
margin-bottom: 18px;
}
}
@media (min-width: 1281px) {
.mb3-over-xl {
margin-bottom: 18px;
}
}
@media (max-width: 1280px) {
.mb3-under-xl {
margin-bottom: 18px;
}
}
.mr3, .mh3, .ma3 {
margin-right: 18px;
}
@media (min-width: 501px) {
.mr3-over-s {
margin-right: 18px;
}
}
@media (max-width: 500px) {
.mr3-under-s {
margin-right: 18px;
}
}
@media (min-width: 701px) {
.mr3-over-m {
margin-right: 18px;
}
}
@media (max-width: 700px) {
.mr3-under-m {
margin-right: 18px;
}
}
@media (min-width: 941px) {
.mr3-over-l {
margin-right: 18px;
}
}
@media (max-width: 940px) {
.mr3-under-l {
margin-right: 18px;
}
}
@media (min-width: 1281px) {
.mr3-over-xl {
margin-right: 18px;
}
}
@media (max-width: 1280px) {
.mr3-under-xl {
margin-right: 18px;
}
}
@media (min-width: 501px) {
.ma3-over-s {
margin: 18px;
}
}
@media (max-width: 500px) {
.ma3-under-s {
margin: 18px;
}
}
@media (min-width: 701px) {
.ma3-over-m {
margin: 18px;
}
}
@media (max-width: 700px) {
.ma3-under-m {
margin: 18px;
}
}
@media (min-width: 941px) {
.ma3-over-l {
margin: 18px;
}
}
@media (max-width: 940px) {
.ma3-under-l {
margin: 18px;
}
}
@media (min-width: 1281px) {
.ma3-over-xl {
margin: 18px;
}
}
@media (max-width: 1280px) {
.ma3-under-xl {
margin: 18px;
}
}
.mt4, .mv4, .ma4 {
margin-top: 24px;
}
@media (min-width: 501px) {
.mt4-over-s {
margin-top: 24px;
}
}
@media (max-width: 500px) {
.mt4-under-s {
margin-top: 24px;
}
}
@media (min-width: 701px) {
.mt4-over-m {
margin-top: 24px;
}
}
@media (max-width: 700px) {
.mt4-under-m {
margin-top: 24px;
}
}
@media (min-width: 941px) {
.mt4-over-l {
margin-top: 24px;
}
}
@media (max-width: 940px) {
.mt4-under-l {
margin-top: 24px;
}
}
@media (min-width: 1281px) {
.mt4-over-xl {
margin-top: 24px;
}
}
@media (max-width: 1280px) {
.mt4-under-xl {
margin-top: 24px;
}
}
.ml4, .mh4, .ma4 {
margin-left: 24px;
}
@media (min-width: 501px) {
.ml4-over-s {
margin-left: 24px;
}
}
@media (max-width: 500px) {
.ml4-under-s {
margin-left: 24px;
}
}
@media (min-width: 701px) {
.ml4-over-m {
margin-left: 24px;
}
}
@media (max-width: 700px) {
.ml4-under-m {
margin-left: 24px;
}
}
@media (min-width: 941px) {
.ml4-over-l {
margin-left: 24px;
}
}
@media (max-width: 940px) {
.ml4-under-l {
margin-left: 24px;
}
}
@media (min-width: 1281px) {
.ml4-over-xl {
margin-left: 24px;
}
}
@media (max-width: 1280px) {
.ml4-under-xl {
margin-left: 24px;
}
}
.mb4, .mv4, .ma4 {
margin-bottom: 24px;
}
@media (min-width: 501px) {
.mb4-over-s {
margin-bottom: 24px;
}
}
@media (max-width: 500px) {
.mb4-under-s {
margin-bottom: 24px;
}
}
@media (min-width: 701px) {
.mb4-over-m {
margin-bottom: 24px;
}
}
@media (max-width: 700px) {
.mb4-under-m {
margin-bottom: 24px;
}
}
@media (min-width: 941px) {
.mb4-over-l {
margin-bottom: 24px;
}
}
@media (max-width: 940px) {
.mb4-under-l {
margin-bottom: 24px;
}
}
@media (min-width: 1281px) {
.mb4-over-xl {
margin-bottom: 24px;
}
}
@media (max-width: 1280px) {
.mb4-under-xl {
margin-bottom: 24px;
}
}
.mr4, .mh4, .ma4 {
margin-right: 24px;
}
@media (min-width: 501px) {
.mr4-over-s {
margin-right: 24px;
}
}
@media (max-width: 500px) {
.mr4-under-s {
margin-right: 24px;
}
}
@media (min-width: 701px) {
.mr4-over-m {
margin-right: 24px;
}
}
@media (max-width: 700px) {
.mr4-under-m {
margin-right: 24px;
}
}
@media (min-width: 941px) {
.mr4-over-l {
margin-right: 24px;
}
}
@media (max-width: 940px) {
.mr4-under-l {
margin-right: 24px;
}
}
@media (min-width: 1281px) {
.mr4-over-xl {
margin-right: 24px;
}
}
@media (max-width: 1280px) {
.mr4-under-xl {
margin-right: 24px;
}
}
@media (min-width: 501px) {
.ma4-over-s {
margin: 24px;
}
}
@media (max-width: 500px) {
.ma4-under-s {
margin: 24px;
}
}
@media (min-width: 701px) {
.ma4-over-m {
margin: 24px;
}
}
@media (max-width: 700px) {
.ma4-under-m {
margin: 24px;
}
}
@media (min-width: 941px) {
.ma4-over-l {
margin: 24px;
}
}
@media (max-width: 940px) {
.ma4-under-l {
margin: 24px;
}
}
@media (min-width: 1281px) {
.ma4-over-xl {
margin: 24px;
}
}
@media (max-width: 1280px) {
.ma4-under-xl {
margin: 24px;
}
}
.mt5, .mv5, .ma5 {
margin-top: 30px;
}
@media (min-width: 501px) {
.mt5-over-s {
margin-top: 30px;
}
}
@media (max-width: 500px) {
.mt5-under-s {
margin-top: 30px;
}
}
@media (min-width: 701px) {
.mt5-over-m {
margin-top: 30px;
}
}
@media (max-width: 700px) {
.mt5-under-m {
margin-top: 30px;
}
}
@media (min-width: 941px) {
.mt5-over-l {
margin-top: 30px;
}
}
@media (max-width: 940px) {
.mt5-under-l {
margin-top: 30px;
}
}
@media (min-width: 1281px) {
.mt5-over-xl {
margin-top: 30px;
}
}
@media (max-width: 1280px) {
.mt5-under-xl {
margin-top: 30px;
}
}
.ml5, .mh5, .ma5 {
margin-left: 30px;
}
@media (min-width: 501px) {
.ml5-over-s {
margin-left: 30px;
}
}
@media (max-width: 500px) {
.ml5-under-s {
margin-left: 30px;
}
}
@media (min-width: 701px) {
.ml5-over-m {
margin-left: 30px;
}
}
@media (max-width: 700px) {
.ml5-under-m {
margin-left: 30px;
}
}
@media (min-width: 941px) {
.ml5-over-l {
margin-left: 30px;
}
}
@media (max-width: 940px) {
.ml5-under-l {
margin-left: 30px;
}
}
@media (min-width: 1281px) {
.ml5-over-xl {
margin-left: 30px;
}
}
@media (max-width: 1280px) {
.ml5-under-xl {
margin-left: 30px;
}
}
.mb5, .mv5, .ma5 {
margin-bottom: 30px;
}
@media (min-width: 501px) {
.mb5-over-s {
margin-bottom: 30px;
}
}
@media (max-width: 500px) {
.mb5-under-s {
margin-bottom: 30px;
}
}
@media (min-width: 701px) {
.mb5-over-m {
margin-bottom: 30px;
}
}
@media (max-width: 700px) {
.mb5-under-m {
margin-bottom: 30px;
}
}
@media (min-width: 941px) {
.mb5-over-l {
margin-bottom: 30px;
}
}
@media (max-width: 940px) {
.mb5-under-l {
margin-bottom: 30px;
}
}
@media (min-width: 1281px) {
.mb5-over-xl {
margin-bottom: 30px;
}
}
@media (max-width: 1280px) {
.mb5-under-xl {
margin-bottom: 30px;
}
}
.mr5, .mh5, .ma5 {
margin-right: 30px;
}
@media (min-width: 501px) {
.mr5-over-s {
margin-right: 30px;
}
}
@media (max-width: 500px) {
.mr5-under-s {
margin-right: 30px;
}
}
@media (min-width: 701px) {
.mr5-over-m {
margin-right: 30px;
}
}
@media (max-width: 700px) {
.mr5-under-m {
margin-right: 30px;
}
}
@media (min-width: 941px) {
.mr5-over-l {
margin-right: 30px;
}
}
@media (max-width: 940px) {
.mr5-under-l {
margin-right: 30px;
}
}
@media (min-width: 1281px) {
.mr5-over-xl {
margin-right: 30px;
}
}
@media (max-width: 1280px) {
.mr5-under-xl {
margin-right: 30px;
}
}
@media (min-width: 501px) {
.ma5-over-s {
margin: 30px;
}
}
@media (max-width: 500px) {
.ma5-under-s {
margin: 30px;
}
}
@media (min-width: 701px) {
.ma5-over-m {
margin: 30px;
}
}
@media (max-width: 700px) {
.ma5-under-m {
margin: 30px;
}
}
@media (min-width: 941px) {
.ma5-over-l {
margin: 30px;
}
}
@media (max-width: 940px) {
.ma5-under-l {
margin: 30px;
}
}
@media (min-width: 1281px) {
.ma5-over-xl {
margin: 30px;
}
}
@media (max-width: 1280px) {
.ma5-under-xl {
margin: 30px;
}
}
.mt6, .mv6, .ma6 {
margin-top: 36px;
}
@media (min-width: 501px) {
.mt6-over-s {
margin-top: 36px;
}
}
@media (max-width: 500px) {
.mt6-under-s {
margin-top: 36px;
}
}
@media (min-width: 701px) {
.mt6-over-m {
margin-top: 36px;
}
}
@media (max-width: 700px) {
.mt6-under-m {
margin-top: 36px;
}
}
@media (min-width: 941px) {
.mt6-over-l {
margin-top: 36px;
}
}
@media (max-width: 940px) {
.mt6-under-l {
margin-top: 36px;
}
}
@media (min-width: 1281px) {
.mt6-over-xl {
margin-top: 36px;
}
}
@media (max-width: 1280px) {
.mt6-under-xl {
margin-top: 36px;
}
}
.ml6, .mh6, .ma6 {
margin-left: 36px;
}
@media (min-width: 501px) {
.ml6-over-s {
margin-left: 36px;
}
}
@media (max-width: 500px) {
.ml6-under-s {
margin-left: 36px;
}
}
@media (min-width: 701px) {
.ml6-over-m {
margin-left: 36px;
}
}
@media (max-width: 700px) {
.ml6-under-m {
margin-left: 36px;
}
}
@media (min-width: 941px) {
.ml6-over-l {
margin-left: 36px;
}
}
@media (max-width: 940px) {
.ml6-under-l {
margin-left: 36px;
}
}
@media (min-width: 1281px) {
.ml6-over-xl {
margin-left: 36px;
}
}
@media (max-width: 1280px) {
.ml6-under-xl {
margin-left: 36px;
}
}
.mb6, .mv6, .ma6 {
margin-bottom: 36px;
}
@media (min-width: 501px) {
.mb6-over-s {
margin-bottom: 36px;
}
}
@media (max-width: 500px) {
.mb6-under-s {
margin-bottom: 36px;
}
}
@media (min-width: 701px) {
.mb6-over-m {
margin-bottom: 36px;
}
}
@media (max-width: 700px) {
.mb6-under-m {
margin-bottom: 36px;
}
}
@media (min-width: 941px) {
.mb6-over-l {
margin-bottom: 36px;
}
}
@media (max-width: 940px) {
.mb6-under-l {
margin-bottom: 36px;
}
}
@media (min-width: 1281px) {
.mb6-over-xl {
margin-bottom: 36px;
}
}
@media (max-width: 1280px) {
.mb6-under-xl {
margin-bottom: 36px;
}
}
.mr6, .mh6, .ma6 {
margin-right: 36px;
}
@media (min-width: 501px) {
.mr6-over-s {
margin-right: 36px;
}
}
@media (max-width: 500px) {
.mr6-under-s {
margin-right: 36px;
}
}
@media (min-width: 701px) {
.mr6-over-m {
margin-right: 36px;
}
}
@media (max-width: 700px) {
.mr6-under-m {
margin-right: 36px;
}
}
@media (min-width: 941px) {
.mr6-over-l {
margin-right: 36px;
}
}
@media (max-width: 940px) {
.mr6-under-l {
margin-right: 36px;
}
}
@media (min-width: 1281px) {
.mr6-over-xl {
margin-right: 36px;
}
}
@media (max-width: 1280px) {
.mr6-under-xl {
margin-right: 36px;
}
}
@media (min-width: 501px) {
.ma6-over-s {
margin: 36px;
}
}
@media (max-width: 500px) {
.ma6-under-s {
margin: 36px;
}
}
@media (min-width: 701px) {
.ma6-over-m {
margin: 36px;
}
}
@media (max-width: 700px) {
.ma6-under-m {
margin: 36px;
}
}
@media (min-width: 941px) {
.ma6-over-l {
margin: 36px;
}
}
@media (max-width: 940px) {
.ma6-under-l {
margin: 36px;
}
}
@media (min-width: 1281px) {
.ma6-over-xl {
margin: 36px;
}
}
@media (max-width: 1280px) {
.ma6-under-xl {
margin: 36px;
}
}
/* Pages that need .gutters max-width */
.page-bonus-library .gutters,
.page-music-in-the-community .gutters,
.page-music-and-the-modern-world .gutters,
.page-vip-studio-sessions .gutters {
max-width: 300px;
}
@media (min-width: 501px) {
.page-contact-us .gutters {
width: 510px;
}
.page-contact-us .card {
min-height: 170px;
}
}
.relative {
position: relative;
}
.absolute {
position: absolute;
}
.fixed {
position: fixed;
}
.static {
position: static;
}
@media (min-width: 701px) {
.absolute-over-m {
position: absolute;
}
.fixed-over-m {
position: fixed;
}
}
@media (min-width: 941px) {
.absolute-over-l {
position: absolute;
}
.fixed-over-l {
position: fixed;
}
}
@media (min-width: 1281px) {
.absolute-over-xl {
position: absolute;
}
.fixed-over-xl {
position: fixed;
}
}
.top-0 {
top: 0;
}
.right-0 {
right: 0;
}
.bottom-0 {
bottom: 0;
}
.left-0 {
left: 0;
}
@media (min-width: 701px) {
.top-0-over-m {
top: 0;
}
.right-0-over-m {
right: 0;
}
.bottom-0-over-m {
bottom: 0;
}
.left-0-over-m {
left: 0;
}
}
@media (min-width: 941px) {
.top-0-over-l {
top: 0;
}
.right-0-over-l {
right: 0;
}
.bottom-0-over-l {
bottom: 0;
}
.left-0-over-l {
left: 0;
}
}
@media (min-width: 1281px) {
.top-0-over-xl {
top: 0;
}
.right-0-over-xl {
right: 0;
}
.bottom-0-over-xl {
bottom: 0;
}
.left-0-over-xl {
left: 0;
}
}
.z1 {
z-index: 1;
}
.z2 {
z-index: 2;
}
.z3 {
z-index: 3;
}
.z4 {
z-index: 4;
}
.flex {
display: flex;
}
.flex-column {
flex-direction: column;
}
.flex-wrap {
flex-wrap: wrap;
}
.items-start {
align-items: flex-start;
}
.items-end {
align-items: flex-end;
}
.items-center {
align-items: center;
}
.items-baseline {
align-items: baseline;
}
.items-stretch {
align-items: stretch;
}
.self-start {
align-self: flex-start;
}
.self-end {
align-self: flex-end;
}
.self-center {
align-self: center;
}
.self-baseline {
align-self: baseline;
}
.self-stretch {
align-self: stretch;
}
.justify-start {
justify-content: flex-start;
}
.justify-end {
justify-content: flex-end;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.justify-around {
justify-content: space-around;
}
.justify-evenly {
justify-content: space-evenly;
}
.content-start {
align-content: flex-start;
}
.content-end {
align-content: flex-end;
}
.content-center {
align-content: center;
}
.content-between {
align-content: space-between;
}
.content-around {
align-content: space-around;
}
.content-stretch {
align-content: stretch;
}
.flex-grow {
flex-grow: 1;
}
/* 1. Fix for Chrome 44 bug. https://code.google.com/p/chromium/issues/detail?id=506893 */
.flex-auto {
flex: 1 1 auto;
min-width: 0;
min-height: 0;
}
.flex-none {
flex: none;
}
@media (min-width: 501px) {
.flex-over-s {
display: flex;
}
.flex-column-over-s {
flex-direction: column;
}
.flex-wrap-over-s {
flex-wrap: wrap;
}
.items-start-over-s {
align-items: flex-start;
}
.items-end-over-s {
align-items: flex-end;
}
.items-center-over-s {
align-items: center;
}
.items-baseline-over-s {
align-items: baseline;
}
.items-stretch-over-s {
align-items: stretch;
}
.self-start-over-s {
align-self: flex-start;
}
.self-end-over-s {
align-self: flex-end;
}
.self-center-over-s {
align-self: center;
}
.self-baseline-over-s {
align-self: baseline;
}
.self-stretch-over-s {
align-self: stretch;
}
.justify-start-over-s {
justify-content: flex-start;
}
.justify-end-over-s {
justify-content: flex-end;
}
.justify-center-over-s {
justify-content: center;
}
.justify-between-over-s {
justify-content: space-between;
}
.justify-around-over-s {
justify-content: space-around;
}
.content-start-over-s {
align-content: flex-start;
}
.content-end-over-s {
align-content: flex-end;
}
.content-center-over-s {
align-content: center;
}
.content-between-over-s {
align-content: space-between;
}
.content-around-over-s {
align-content: space-around;
}
.content-stretch-over-s {
align-content: stretch;
}
.flex-grow-over-s {
flex-grow: 1;
}
.flex-none-over-s {
flex: none;
}
.flex-row-over-s {
flex-direction: row;
}
}
@media (min-width: 701px) {
.flex-over-m {
display: flex;
}
.flex-column-over-m {
flex-direction: column;
}
.flex-wrap-over-m {
flex-wrap: wrap;
}
.items-start-over-m {
align-items: flex-start;
}
.items-end-over-m {
align-items: flex-end;
}
.items-center-over-m {
align-items: center;
}
.items-baseline-over-m {
align-items: baseline;
}
.items-stretch-over-m {
align-items: stretch;
}
.self-start-over-m {
align-self: flex-start;
}
.self-end-over-m {
align-self: flex-end;
}
.self-center-over-m {
align-self: center;
}
.self-baseline-over-m {
align-self: baseline;
}
.self-stretch-over-m {
align-self: stretch;
}
.justify-start-over-m {
justify-content: flex-start;
}
.justify-end-over-m {
justify-content: flex-end;
}
.justify-center-over-m {
justify-content: center;
}
.justify-between-over-m {
justify-content: space-between;
}
.justify-around-over-m {
justify-content: space-around;
}
.content-start-over-m {
align-content: flex-start;
}
.content-end-over-m {
align-content: flex-end;
}
.content-center-over-m {
align-content: center;
}
.content-between-over-m {
align-content: space-between;
}
.content-around-over-m {
align-content: space-around;
}
.content-stretch-over-m {
align-content: stretch;
}
.flex-grow-over-m {
flex-grow: 1;
}
.flex-none-over-m {
flex: none;
}
.flex-row-over-m {
flex-direction: row;
}
}
@media (min-width: 941px) {
.flex-over-l {
display: flex;
}
.flex-column-over-l {
flex-direction: column;
}
.flex-wrap-over-l {
flex-wrap: wrap;
}
.items-start-over-l {
align-items: flex-start;
}
.items-end-over-l {
align-items: flex-end;
}
.items-center-over-l {
align-items: center;
}
.items-baseline-over-l {
align-items: baseline;
}
.items-stretch-over-l {
align-items: stretch;
}
.self-start-over-l {
align-self: flex-start;
}
.self-end-over-l {
align-self: flex-end;
}
.self-center-over-l {
align-self: center;
}
.self-baseline-over-l {
align-self: baseline;
}
.self-stretch-over-l {
align-self: stretch;
}
.justify-start-over-l {
justify-content: flex-start;
}
.justify-end-over-l {
justify-content: flex-end;
}
.justify-center-over-l {
justify-content: center;
}
.justify-between-over-l {
justify-content: space-between;
}
.justify-around-over-l {
justify-content: space-around;
}
.content-start-over-l {
align-content: flex-start;
}
.content-end-over-l {
align-content: flex-end;
}
.content-center-over-l {
align-content: center;
}
.content-between-over-l {
align-content: space-between;
}
.content-around-over-l {
align-content: space-around;
}
.content-stretch-over-l {
align-content: stretch;
}
.flex-grow-over-l {
flex-grow: 1;
}
.flex-none-over-l {
flex: none;
}
.flex-row-over-l {
flex-direction: row;
}
}
@media (min-width: 1281px) {
.flex-over-xl {
display: flex;
}
.flex-column-over-xl {
flex-direction: column;
}
.flex-wrap-over-xl {
flex-wrap: wrap;
}
.items-start-over-xl {
align-items: flex-start;
}
.items-end-over-xl {
align-items: flex-end;
}
.items-center-over-xl {
align-items: center;
}
.items-baseline-over-xl {
align-items: baseline;
}
.items-stretch-over-xl {
align-items: stretch;
}
.self-start-over-xl {
align-self: flex-start;
}
.self-end-over-xl {
align-self: flex-end;
}
.self-center-over-xl {
align-self: center;
}
.self-baseline-over-xl {
align-self: baseline;
}
.self-stretch-over-xl {
align-self: stretch;
}
.justify-start-over-xl {
justify-content: flex-start;
}
.justify-end-over-xl {
justify-content: flex-end;
}
.justify-center-over-xl {
justify-content: center;
}
.justify-between-over-xl {
justify-content: space-between;
}
.justify-around-over-xl {
justify-content: space-around;
}
.content-start-over-xl {
align-content: flex-start;
}
.content-end-over-xl {
align-content: flex-end;
}
.content-center-over-xl {
align-content: center;
}
.content-between-over-xl {
align-content: space-between;
}
.content-around-over-xl {
align-content: space-around;
}
.content-stretch-over-xl {
align-content: stretch;
}
.flex-grow-over-xl {
flex-grow: 1;
}
.flex-none-over-xl {
flex: none;
}
.flex-row-over-xl {
flex-direction: row;
}
}
@media (max-width: 500px) {
.flex-under-s {
display: flex;
}
.flex-column-under-s {
flex-direction: column;
}
.flex-wrap-under-s {
flex-wrap: wrap;
}
.items-start-under-s {
align-items: flex-start;
}
.items-end-under-s {
align-items: flex-end;
}
.items-center-under-s {
align-items: center;
}
.items-baseline-under-s {
align-items: baseline;
}
.items-stretch-under-s {
align-items: stretch;
}
.self-start-under-s {
align-self: flex-start;
}
.self-end-under-s {
align-self: flex-end;
}
.self-center-under-s {
align-self: center;
}
.self-baseline-under-s {
align-self: baseline;
}
.self-stretch-under-s {
align-self: stretch;
}
.justify-start-under-s {
justify-content: flex-start;
}
.justify-end-under-s {
justify-content: flex-end;
}
.justify-center-under-s {
justify-content: center;
}
.justify-between-under-s {
justify-content: space-between;
}
.justify-around-under-s {
justify-content: space-around;
}
.content-start-under-s {
align-content: flex-start;
}
.content-end-under-s {
align-content: flex-end;
}
.content-center-under-s {
align-content: center;
}
.content-between-under-s {
align-content: space-between;
}
.content-around-under-s {
align-content: space-around;
}
.content-stretch-under-s {
align-content: stretch;
}
.flex-grow-under-s {
flex-grow: 1;
}
.flex-none-under-s {
flex: none;
}
.flex-col-under-s {
flex-direction: column;
}
}
@media (max-width: 700px) {
.flex-under-m {
display: flex;
}
.flex-column-under-m {
flex-direction: column;
}
.flex-wrap-under-m {
flex-wrap: wrap;
}
.items-start-under-m {
align-items: flex-start;
}
.items-end-under-m {
align-items: flex-end;
}
.items-center-under-m {
align-items: center;
}
.items-baseline-under-m {
align-items: baseline;
}
.items-stretch-under-m {
align-items: stretch;
}
.self-start-under-m {
align-self: flex-start;
}
.self-end-under-m {
align-self: flex-end;
}
.self-center-under-m {
align-self: center;
}
.self-baseline-under-m {
align-self: baseline;
}
.self-stretch-under-m {
align-self: stretch;
}
.justify-start-under-m {
justify-content: flex-start;
}
.justify-end-under-m {
justify-content: flex-end;
}
.justify-center-under-m {
justify-content: center;
}
.justify-between-under-m {
justify-content: space-between;
}
.justify-around-under-m {
justify-content: space-around;
}
.content-start-under-m {
align-content: flex-start;
}
.content-end-under-m {
align-content: flex-end;
}
.content-center-under-m {
align-content: center;
}
.content-between-under-m {
align-content: space-between;
}
.content-around-under-m {
align-content: space-around;
}
.content-stretch-under-m {
align-content: stretch;
}
.flex-grow-under-m {
flex-grow: 1;
}
.flex-none-under-m {
flex: none;
}
.flex-col-under-m {
flex-direction: column;
}
}
@media (max-width: 940px) {
.flex-under-l {
display: flex;
}
.flex-column-under-l {
flex-direction: column;
}
.flex-wrap-under-l {
flex-wrap: wrap;
}
.items-start-under-l {
align-items: flex-start;
}
.items-end-under-l {
align-items: flex-end;
}
.items-center-under-l {
align-items: center;
}
.items-baseline-under-l {
align-items: baseline;
}
.items-stretch-under-l {
align-items: stretch;
}
.self-start-under-l {
align-self: flex-start;
}
.self-end-under-l {
align-self: flex-end;
}
.self-center-under-l {
align-self: center;
}
.self-baseline-under-l {
align-self: baseline;
}
.self-stretch-under-l {
align-self: stretch;
}
.justify-start-under-l {
justify-content: flex-start;
}
.justify-end-under-l {
justify-content: flex-end;
}
.justify-center-under-l {
justify-content: center;
}
.justify-between-under-l {
justify-content: space-between;
}
.justify-around-under-l {
justify-content: space-around;
}
.content-start-under-l {
align-content: flex-start;
}
.content-end-under-l {
align-content: flex-end;
}
.content-center-under-l {
align-content: center;
}
.content-between-under-l {
align-content: space-between;
}
.content-around-under-l {
align-content: space-around;
}
.content-stretch-under-l {
align-content: stretch;
}
.flex-grow-under-l {
flex-grow: 1;
}
.flex-none-under-l {
flex: none;
}
.flex-col-under-l {
flex-direction: column;
}
}
@media (max-width: 1280px) {
.flex-under-xl {
display: flex;
}
.flex-column-under-xl {
flex-direction: column;
}
.flex-wrap-under-xl {
flex-wrap: wrap;
}
.items-start-under-xl {
align-items: flex-start;
}
.items-end-under-xl {
align-items: flex-end;
}
.items-center-under-xl {
align-items: center;
}
.items-baseline-under-xl {
align-items: baseline;
}
.items-stretch-under-xl {
align-items: stretch;
}
.self-start-under-xl {
align-self: flex-start;
}
.self-end-under-xl {
align-self: flex-end;
}
.self-center-under-xl {
align-self: center;
}
.self-baseline-under-xl {
align-self: baseline;
}
.self-stretch-under-xl {
align-self: stretch;
}
.justify-start-under-xl {
justify-content: flex-start;
}
.justify-end-under-xl {
justify-content: flex-end;
}
.justify-center-under-xl {
justify-content: center;
}
.justify-between-under-xl {
justify-content: space-between;
}
.justify-around-under-xl {
justify-content: space-around;
}
.content-start-under-xl {
align-content: flex-start;
}
.content-end-under-xl {
align-content: flex-end;
}
.content-center-under-xl {
align-content: center;
}
.content-between-under-xl {
align-content: space-between;
}
.content-around-under-xl {
align-content: space-around;
}
.content-stretch-under-xl {
align-content: stretch;
}
.flex-grow-under-xl {
flex-grow: 1;
}
.flex-none-under-xl {
flex: none;
}
.flex-col-under-xl {
flex-direction: column;
}
}
@media (max-width: 500px) {
/* you shall not pass */
div,
textarea,
table,
td,
th,
code,
pre,
samp {
word-wrap: break-word;
-webkit-hyphens: auto;
hyphens: auto;
}
}
.overflow-hidden {
overflow: hidden;
}
.overflow-scroll {
overflow: scroll;
}
.overflow-auto {
overflow: auto;
}
.overflow-x-hidden {
overflow-x: hidden;
}
.overflow-y-hidden {
overflow-y: hidden;
}
.fit {
max-width: 100%;
}
.fill {
width: 100%;
box-sizing: border-box;
}
.absolute-fit {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
@media (max-width: 500px) {
div {
-webkit-hyphens: none;
hyphens: none;
}
}
.white {
color: #fff;
}
.bg-white {
background: #fff;
}
.bg-black {
background: #000;
}
.border {
border-style: solid;
border-width: 1px;
border-color: #ccc;
}
.border-top {
border-top-style: solid;
border-top-width: 1px;
border-top-color: #ccc;
}
.border-right {
border-right-style: solid;
border-right-width: 1px;
border-right-color: #ccc;
}
.border-bottom {
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #ccc;
}
.border-left {
border-left-style: solid;
border-left-width: 1px;
border-left-color: #ccc;
}
.border--dotted {
border-style: dotted;
}
.border--dashed {
border-style: dashed;
}
.border--solid {
border-style: solid;
}
.border--none {
border-style: none;
}
.rounded {
border-radius: 10px;
}
.circle {
border-radius: 50%;
}
.rounded-top {
border-radius: 10px 10px 0 0;
}
.rounded-right {
border-radius: 0 10px 10px 0;
}
.rounded-bottom {
border-radius: 0 0 10px 10px;
}
.rounded-left {
border-radius: 10px 0 0 10px;
}
.not-rounded {
border-radius: 0;
}
.text-drop {
text-shadow: 1px 1px 9px rgba(0, 0, 0, 0.6);
}
.bg-color {
background-color: #f7f7f7;
}
@media screen {
.line-before:before {
content: " ";
display: block;
width: 80px;
height: 7px;
background-color: #00aca1;
margin-bottom: 26px;
}
}
.text-drop {
text-shadow: 1px 1px 7px rgba(0, 0, 0, 0.6);
}
.box-shadow-s {
box-shadow: 0 2px 5px rgba(22, 29, 29, 0.15);
}
.box-shadow-l {
box-shadow: 0 20px 20px rgba(22, 29, 29, 0.5);
}
.border-radius-s {
border-radius: 4px;
}
.border-radius-m {
border-radius: 6px;
}
.border-radius-l {
border-radius: 8px;
}
.border-radius-xl {
border-radius: 10px;
}
.border-radius-xxl {
border-radius: 16px;
}
@media print {
@page {
margin: 1cm 1cm 0.5cm;
size: A4 portrait;
}
.print-only {
display: block !important;
}
.no-print {
display: none !important;
}
.print-url:after {
content: " (" attr(href) ")";
font-size: 12px;
color: #777;
font-weight: normal;
text-transform: lowercase;
word-wrap: break-word;
}
.entry-header + img {
margin-bottom: 24px;
}
.site-main {
margin-top: 0;
}
.hero-bd .site-main {
margin-top: -80px;
}
.site {
border: 0;
}
.page-site h1.screen-reader-text {
position: static !important;
text-align: center;
}
.page-site h1.screen-reader-text + .clearfix {
padding-top: 0;
}
.page-site .fs-xxxl {
font-size: 24px;
font-weight: normal;
color: #000;
text-align: center !important;
text-shadow: none;
}
.page-site .u1of2-over-l:has(.fs-xxxl) {
width: 100%;
margin: 0;
}
.page-site .hero {
height: 30px;
min-height: 30px;
}
.page-site .partner-card__container {
display: block;
width: 100%;
margin-top: 50px;
}
.page-site .partner-card {
display: block;
float: left;
}
.page-site .partner-card + .partner-card {
float: right;
}
.breadcrumbs {
display: none;
}
img {
max-width: 100% !important;
page-break-inside: avoid;
-moz-column-break-inside: avoid;
break-inside: avoid;
}
h1,
h2,
h3 {
page-break-after: avoid;
}
article.row {
page-break-inside: avoid;
-moz-column-break-inside: avoid;
break-inside: avoid;
}
.hero {
background: none;
}
h2, .h2 {
font-size: 14pt;
}
.leader {
font-size: 20px;
}
p,
ul,
ol,
td,
.quotee {
font-size: 10pt;
line-height: 13pt;
}
blockquote p:first-child:before {
top: 23px;
}
blockquote p:last-of-type:after {
bottom: -25px;
}
.featured__news,
.featured__twitter {
width: 50%;
}
.which-scheme {
position: static;
}
.page-which-charanga-scheme .sidebar + div {
margin-top: 0 !important;
}
.get-musical-school h2 {
margin-bottom: 0;
}
.get-musical-school .leader {
margin-bottom: 6px;
}
.get-musical-school .info {
margin-bottom: 6px;
}
.send h2 {
margin-top: 6px;
margin-bottom: 6px;
}
.get-musical-school h2 {
margin-top: 24px;
}
.instrumental-music h2:first-of-type {
margin-top: 24px;
margin-bottom: 18px;
}
.instrumental-music h3 + img {
height: 120px;
}
.section-page.workspace {
margin-top: 0;
}
.u1of2-over-m {
width: 50%;
}
.u1of3-over-m {
width: 33.33%;
}
.u2of3-over-m {
width: 66.66%;
}
.u1of4-over-m {
width: 25%;
}
.u3of4-over-m {
width: 75%;
}
.u1of5-over-m {
width: 20%;
}
.u2of5-over-m {
width: 40%;
}
.u3of5-over-m {
width: 60%;
}
.u2of11-over-m {
width: 18.18%;
}
.u5of11-over-m {
width: 45.45%;
}
.u7of11-over-m {
width: 63.64%;
}
.left-over-m {
float: left;
}
.right-over-m {
float: right;
}
.pl1-over-m {
padding-left: 6px;
}
.pl2-over-m {
padding-left: 20px;
}
.pl2-over-m {
padding-left: 12px;
}
.pl3-over-m {
padding-left: 18px;
}
.pl6-over-m {
padding-left: 36px;
}
.pr4-over-m {
padding-right: 24px;
}
.pr5-over-m {
padding-right: 30px;
}
.pr6-over-m {
padding-right: 36px;
}
.ml2-over-m {
margin-left: 12px;
}
.ml4-over-m {
margin-left: 24px;
}
.ml6-over-m {
margin-left: 36px;
}
}
/***** PAGE BREAK FOR PRINT *****/
@media all {
.page-break {
display: none;
}
}
@media print {
.page-break {
display: block;
page-break-before: always;
}
}
/***** PAGE BREAK FOR PRINT *****//*# sourceMappingURL=style.css.map */