/* GOOGLE FONTS (need to bo loaded at first) ---------------------------------------*/ @import url("https://fonts.googleapis.com/css?family=Lobster|Lobster+Two|Open+Sans:300,400,600,700"); @charset "UTF-8"; /* STYLE.SCSS ---------------------------------------*/ /** Here we start to pull everything together into one big stylesheet. SETUP Settings, tools, mixins, etc. GENERIC normalize.css, reset, shared styles, etc. BASE Basic HTML elements. OBJECTS Objects, abstractions, design patterns. BLOCKS Components and modules. TRUMPS Helpers, overrides, ‘trump-cards’. */ /* COLORS, SIZES, ETC */ [theme~="generic"] { --secondary: #4D7F99; --secondary--hover: #5590AD; --secondary--active: #417087; } [theme~="adult"] { --secondary: #033085; --secondary--hover: #0C3F9C; --secondary--active: #022469; } [theme~="junior"] { --secondary: #14A7E0; --secondary--hover: #1AB3F0; --secondary--active: #0898D1; } [theme~="light"] { --body__bg: #F8F9FB; --card__bg: #FFFFFF; --btn__bg: #F8F9FB; --btn--hover__bg: #FFFFFF; --btn--active__bg: #ECF0F4; --btn__color:#293746; --btn--hover__color:#293746; --btn--disabled__bg: none; --btn--disabled__color: #CAD3DB; --elem--hover__bg: #ECF0F4; --elem--disabled__color: #CAD3DB; --elem__color:#293746; --elem__shadow: 0 2px 4px rgba(50, 67, 85, 0.1), 0 0 1px rgba(50, 67, 85, 0.05); --elem--muted__color:#425970; --form__color:#CAD3DB; --form__label__color:#425970; --form--disabled__color:#ECF0F4; --grid__bg: linear-gradient(#CAD3DB 0, rgba(202, 211, 219, 0) 1px); } [theme~="light"] [status="success"] { --status: #2FD683; --status__bg: rgba(47, 214, 131, 0.1); } [theme~="light"] [status="error"] { --status: #FF542E; --status__bg: rgba(255, 84, 46, 0.07); } [theme~="light"] [status="info"] { --status: #14A7E0; --status__bg: rgba(20, 167, 224, 0.09); } [theme~="light"] [status="warning"] { --status: #F7C80C; --status__bg: rgba(247, 200, 12, 0.1); } [theme~="dark"] { --body__bg: #293746; --card__bg: #202C37; --btn__bg: #293746; --btn--hover__bg: #202C37; --btn--active__bg: #324355; --btn__color:#ECF0F4; --btn--hover__color:#ECF0F4; --btn--disabled__bg: none; --btn--disabled__color: #425970; --elem--hover__bg: #324355; --elem--disabled__color: #425970; --elem__color:#ECF0F4; --elem__shadow: 0 2px 4px #202C37, 0 0 1px #202C37; --elem--muted__color:#CAD3DB; --form__color:#425970; --form__label__color:#CAD3DB; --form--disabled__color:#324355; --grid__bg: linear-gradient(#425970 0, rgba(66, 89, 112, 0) 1px); --secondary: #5590AD; } [theme~="dark"] [status="success"] { --status: #2FD683; --status__bg: rgba(47, 214, 131, 0.1); } [theme~="dark"] [status="error"] { --status: #FF542E; --status__bg: rgba(255, 84, 46, 0.13); } [theme~="dark"] [status="info"] { --status: #14A7E0; --status__bg: rgba(20, 167, 224, 0.1); } [theme~="dark"] [status="warning"] { --status: #F7C80C; --status__bg: rgba(247, 200, 12, 0.1); } [theme~="primary-item"] { --secondary: #EC0929; --secondary--hover: #FF1925; --secondary--active: #D90000; } [theme~="generic-item"] { --secondary: #4D7F99; --secondary--hover: #5590AD; --secondary--active: #417087; } [theme~="adult-item"] { --secondary: #033085; --secondary--hover: #0C3F9C; --secondary--active: #022469; } [theme~="junior-item"] { --secondary: #14A7E0; --secondary--hover: #1AB3F0; --secondary--active: #0898D1; } [theme~="primary-item"], [theme~="generic-item"], [theme~="adult-item"], [theme~="junior-item"] { --btn__bg: var(--secondary); --btn__color: #F8F9FB; --btn--hover__bg: var(--secondary--hover); --btn--active__bg: var(--secondary--active); --btn--hover__color: #F8F9FB; --btn--active__color: #F8F9FB; --btn--disabled__bg: var(--elem--disabled__color); --btn--disabled__color: var(--elem--muted__color); --btn--disabled__icon__color: var(--elem--muted__color); } [theme~="none"] { --btn__bg: none; --btn__color: var(--secondary); --btn--hover__bg: none; --btn--hover__color: var(--secondary--hover); --btn--active__bg: none; --btn--active__color: var(--secondary--active); --btn--disabled__bg: none; --btn--disabled__color: var(--elem--disabled__color); --btn--disabled__icon__color: var(--elem--disabled__color); } /* LAYOUT */ a { -webkit-transition: color 0.3s; transition: color 0.3s; color: #EC0929; } a:hover { color: #FF1925; } a.disabled { pointer-events: none; color: var(--secondary); } .click { cursor: pointer; outline: none; } .loading { background: url("assets/css-svg/alpadia-loading.svg") no-repeat center; background-size: 96px; width: 100%; min-height: 160px; } .bkg { background: var(--body__bg); color: var(--elem__color); } /* ELEMENTS */ .flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -webkit-align-items: start; -ms-flex-align: start; align-items: start; } .flex > * { box-sizing: border-box; margin: 8px; } .flex--no-gap > * { margin: 0; } .flex--1c > * { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(100% - 16px); -ms-flex: 0 1 calc(100% - 16px); flex: 0 1 calc(100% - 16px); } .flex--2c > * { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(50% - 16px); -ms-flex: 0 1 calc(50% - 16px); flex: 0 1 calc(50% - 16px); } .flex--3c > * { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(33.333% - 16px); -ms-flex: 0 1 calc(33.333% - 16px); flex: 0 1 calc(33.333% - 16px); } .flex--4c > * { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(25% - 16px); -ms-flex: 0 1 calc(25% - 16px); flex: 0 1 calc(25% - 16px); } .flex--5c > * { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(20% - 16px); -ms-flex: 0 1 calc(20% - 16px); flex: 0 1 calc(20% - 16px); } .flex--6c > * { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(16.667% - 16px); -ms-flex: 0 1 calc(16.667% - 16px); flex: 0 1 calc(16.667% - 16px); } .flex--7c > * { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(14.286% - 16px); -ms-flex: 0 1 calc(14.286% - 16px); flex: 0 1 calc(14.286% - 16px); } .flex--8c > * { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(12.5% - 16px); -ms-flex: 0 1 calc(12.5% - 16px); flex: 0 1 calc(12.5% - 16px); } .flex--9c > * { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(11.111% - 16px); -ms-flex: 0 1 calc(11.111% - 16px); flex: 0 1 calc(11.111% - 16px); } .flex--10c > * { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(10% - 16px); -ms-flex: 0 1 calc(10% - 16px); flex: 0 1 calc(10% - 16px); } .flex--11c > * { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(9.091% - 16px); -ms-flex: 0 1 calc(9.091% - 16px); flex: 0 1 calc(9.091% - 16px); } .flex--12c > * { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(8.333% - 16px); -ms-flex: 0 1 calc(8.333% - 16px); flex: 0 1 calc(8.333% - 16px); } @media screen and (min-width: 768px) { .flex--1c--gt-sm > * { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(100% - 16px); -ms-flex: 0 1 calc(100% - 16px); flex: 0 1 calc(100% - 16px); } .flex--2c--gt-sm > * { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(50% - 16px); -ms-flex: 0 1 calc(50% - 16px); flex: 0 1 calc(50% - 16px); } .flex--3c--gt-sm > * { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(33.333% - 16px); -ms-flex: 0 1 calc(33.333% - 16px); flex: 0 1 calc(33.333% - 16px); } .flex--4c--gt-sm > * { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(25% - 16px); -ms-flex: 0 1 calc(25% - 16px); flex: 0 1 calc(25% - 16px); } .flex--5c--gt-sm > * { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(20% - 16px); -ms-flex: 0 1 calc(20% - 16px); flex: 0 1 calc(20% - 16px); } .flex--6c--gt-sm > * { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(16.667% - 16px); -ms-flex: 0 1 calc(16.667% - 16px); flex: 0 1 calc(16.667% - 16px); } .flex--7c--gt-sm > * { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(14.286% - 16px); -ms-flex: 0 1 calc(14.286% - 16px); flex: 0 1 calc(14.286% - 16px); } .flex--8c--gt-sm > * { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(12.5% - 16px); -ms-flex: 0 1 calc(12.5% - 16px); flex: 0 1 calc(12.5% - 16px); } .flex--9c--gt-sm > * { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(11.111% - 16px); -ms-flex: 0 1 calc(11.111% - 16px); flex: 0 1 calc(11.111% - 16px); } .flex--10c--gt-sm > * { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(10% - 16px); -ms-flex: 0 1 calc(10% - 16px); flex: 0 1 calc(10% - 16px); } .flex--11c--gt-sm > * { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(9.091% - 16px); -ms-flex: 0 1 calc(9.091% - 16px); flex: 0 1 calc(9.091% - 16px); } .flex--12c--gt-sm > * { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(8.333% - 16px); -ms-flex: 0 1 calc(8.333% - 16px); flex: 0 1 calc(8.333% - 16px); } } @media screen and (min-width: 960px) { .flex--1c--gt-md > * { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(100% - 16px); -ms-flex: 0 1 calc(100% - 16px); flex: 0 1 calc(100% - 16px); } .flex--2c--gt-md > * { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(50% - 16px); -ms-flex: 0 1 calc(50% - 16px); flex: 0 1 calc(50% - 16px); } .flex--3c--gt-md > * { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(33.333% - 16px); -ms-flex: 0 1 calc(33.333% - 16px); flex: 0 1 calc(33.333% - 16px); } .flex--4c--gt-md > * { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(25% - 16px); -ms-flex: 0 1 calc(25% - 16px); flex: 0 1 calc(25% - 16px); } .flex--5c--gt-md > * { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(20% - 16px); -ms-flex: 0 1 calc(20% - 16px); flex: 0 1 calc(20% - 16px); } .flex--6c--gt-md > * { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(16.667% - 16px); -ms-flex: 0 1 calc(16.667% - 16px); flex: 0 1 calc(16.667% - 16px); } .flex--7c--gt-md > * { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(14.286% - 16px); -ms-flex: 0 1 calc(14.286% - 16px); flex: 0 1 calc(14.286% - 16px); } .flex--8c--gt-md > * { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(12.5% - 16px); -ms-flex: 0 1 calc(12.5% - 16px); flex: 0 1 calc(12.5% - 16px); } .flex--9c--gt-md > * { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(11.111% - 16px); -ms-flex: 0 1 calc(11.111% - 16px); flex: 0 1 calc(11.111% - 16px); } .flex--10c--gt-md > * { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(10% - 16px); -ms-flex: 0 1 calc(10% - 16px); flex: 0 1 calc(10% - 16px); } .flex--11c--gt-md > * { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(9.091% - 16px); -ms-flex: 0 1 calc(9.091% - 16px); flex: 0 1 calc(9.091% - 16px); } .flex--12c--gt-md > * { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(8.333% - 16px); -ms-flex: 0 1 calc(8.333% - 16px); flex: 0 1 calc(8.333% - 16px); } } @media screen and (min-width: 1200px) { .flex--1c--gt-lg > * { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(100% - 16px); -ms-flex: 0 1 calc(100% - 16px); flex: 0 1 calc(100% - 16px); } .flex--2c--gt-lg > * { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(50% - 16px); -ms-flex: 0 1 calc(50% - 16px); flex: 0 1 calc(50% - 16px); } .flex--3c--gt-lg > * { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(33.333% - 16px); -ms-flex: 0 1 calc(33.333% - 16px); flex: 0 1 calc(33.333% - 16px); } .flex--4c--gt-lg > * { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(25% - 16px); -ms-flex: 0 1 calc(25% - 16px); flex: 0 1 calc(25% - 16px); } .flex--5c--gt-lg > * { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(20% - 16px); -ms-flex: 0 1 calc(20% - 16px); flex: 0 1 calc(20% - 16px); } .flex--6c--gt-lg > * { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(16.667% - 16px); -ms-flex: 0 1 calc(16.667% - 16px); flex: 0 1 calc(16.667% - 16px); } .flex--7c--gt-lg > * { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(14.286% - 16px); -ms-flex: 0 1 calc(14.286% - 16px); flex: 0 1 calc(14.286% - 16px); } .flex--8c--gt-lg > * { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(12.5% - 16px); -ms-flex: 0 1 calc(12.5% - 16px); flex: 0 1 calc(12.5% - 16px); } .flex--9c--gt-lg > * { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(11.111% - 16px); -ms-flex: 0 1 calc(11.111% - 16px); flex: 0 1 calc(11.111% - 16px); } .flex--10c--gt-lg > * { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(10% - 16px); -ms-flex: 0 1 calc(10% - 16px); flex: 0 1 calc(10% - 16px); } .flex--11c--gt-lg > * { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(9.091% - 16px); -ms-flex: 0 1 calc(9.091% - 16px); flex: 0 1 calc(9.091% - 16px); } .flex--12c--gt-lg > * { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(8.333% - 16px); -ms-flex: 0 1 calc(8.333% - 16px); flex: 0 1 calc(8.333% - 16px); } } .flex--1s { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(8.333% - 16px); -ms-flex: 0 1 calc(8.333% - 16px); flex: 0 1 calc(8.333% - 16px); } .flex--2s { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(16.667% - 16px); -ms-flex: 0 1 calc(16.667% - 16px); flex: 0 1 calc(16.667% - 16px); } .flex--3s { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(25% - 16px); -ms-flex: 0 1 calc(25% - 16px); flex: 0 1 calc(25% - 16px); } .flex--4s { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(33.333% - 16px); -ms-flex: 0 1 calc(33.333% - 16px); flex: 0 1 calc(33.333% - 16px); } .flex--5s { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(41.667% - 16px); -ms-flex: 0 1 calc(41.667% - 16px); flex: 0 1 calc(41.667% - 16px); } .flex--6s { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(50% - 16px); -ms-flex: 0 1 calc(50% - 16px); flex: 0 1 calc(50% - 16px); } .flex--7s { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(58.333% - 16px); -ms-flex: 0 1 calc(58.333% - 16px); flex: 0 1 calc(58.333% - 16px); } .flex--8s { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(66.667% - 16px); -ms-flex: 0 1 calc(66.667% - 16px); flex: 0 1 calc(66.667% - 16px); } .flex--9s { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(75% - 16px); -ms-flex: 0 1 calc(75% - 16px); flex: 0 1 calc(75% - 16px); } .flex--10s { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(83.333% - 16px); -ms-flex: 0 1 calc(83.333% - 16px); flex: 0 1 calc(83.333% - 16px); } .flex--11s { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(91.667% - 16px); -ms-flex: 0 1 calc(91.667% - 16px); flex: 0 1 calc(91.667% - 16px); } .flex--12s { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(100% - 16px); -ms-flex: 0 1 calc(100% - 16px); flex: 0 1 calc(100% - 16px); } .flex--1o { -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1; } .flex--2o { -webkit-box-ordinal-group: 3; -webkit-order: 2; -ms-flex-order: 2; order: 2; } .flex--3o { -webkit-box-ordinal-group: 4; -webkit-order: 3; -ms-flex-order: 3; order: 3; } .flex--4o { -webkit-box-ordinal-group: 5; -webkit-order: 4; -ms-flex-order: 4; order: 4; } .flex--5o { -webkit-box-ordinal-group: 6; -webkit-order: 5; -ms-flex-order: 5; order: 5; } .flex--6o { -webkit-box-ordinal-group: 7; -webkit-order: 6; -ms-flex-order: 6; order: 6; } .flex--7o { -webkit-box-ordinal-group: 8; -webkit-order: 7; -ms-flex-order: 7; order: 7; } .flex--8o { -webkit-box-ordinal-group: 9; -webkit-order: 8; -ms-flex-order: 8; order: 8; } .flex--9o { -webkit-box-ordinal-group: 10; -webkit-order: 9; -ms-flex-order: 9; order: 9; } .flex--10o { -webkit-box-ordinal-group: 11; -webkit-order: 10; -ms-flex-order: 10; order: 10; } .flex--11o { -webkit-box-ordinal-group: 12; -webkit-order: 11; -ms-flex-order: 11; order: 11; } .flex--12o { -webkit-box-ordinal-group: 13; -webkit-order: 12; -ms-flex-order: 12; order: 12; } .flex--no-wrap { -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .flex--vc { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .flex--hc { -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .flex--col { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-flow: column; -ms-flex-flow: column; flex-flow: column; } .flex--row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-flow: row; -ms-flex-flow: row; flex-flow: row; } .flex--grow { -webkit-box-flex: 1; -webkit-flex: 1 0; -ms-flex: 1 0; flex: 1 0; } .flex--shrink { -webkit-box-flex: 0; -webkit-flex: 0 1; -ms-flex: 0 1; flex: 0 1; } @media screen and (min-width: 768px) { .flex--1s--gt-sm { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(8.333% - 16px); -ms-flex: 0 1 calc(8.333% - 16px); flex: 0 1 calc(8.333% - 16px); } .flex--2s--gt-sm { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(16.667% - 16px); -ms-flex: 0 1 calc(16.667% - 16px); flex: 0 1 calc(16.667% - 16px); } .flex--3s--gt-sm { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(25% - 16px); -ms-flex: 0 1 calc(25% - 16px); flex: 0 1 calc(25% - 16px); } .flex--4s--gt-sm { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(33.333% - 16px); -ms-flex: 0 1 calc(33.333% - 16px); flex: 0 1 calc(33.333% - 16px); } .flex--5s--gt-sm { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(41.667% - 16px); -ms-flex: 0 1 calc(41.667% - 16px); flex: 0 1 calc(41.667% - 16px); } .flex--6s--gt-sm { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(50% - 16px); -ms-flex: 0 1 calc(50% - 16px); flex: 0 1 calc(50% - 16px); } .flex--7s--gt-sm { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(58.333% - 16px); -ms-flex: 0 1 calc(58.333% - 16px); flex: 0 1 calc(58.333% - 16px); } .flex--8s--gt-sm { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(66.667% - 16px); -ms-flex: 0 1 calc(66.667% - 16px); flex: 0 1 calc(66.667% - 16px); } .flex--9s--gt-sm { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(75% - 16px); -ms-flex: 0 1 calc(75% - 16px); flex: 0 1 calc(75% - 16px); } .flex--10s--gt-sm { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(83.333% - 16px); -ms-flex: 0 1 calc(83.333% - 16px); flex: 0 1 calc(83.333% - 16px); } .flex--11s--gt-sm { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(91.667% - 16px); -ms-flex: 0 1 calc(91.667% - 16px); flex: 0 1 calc(91.667% - 16px); } .flex--12s--gt-sm { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(100% - 16px); -ms-flex: 0 1 calc(100% - 16px); flex: 0 1 calc(100% - 16px); } .flex--1o--gt-sm { -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1; } .flex--2o--gt-sm { -webkit-box-ordinal-group: 3; -webkit-order: 2; -ms-flex-order: 2; order: 2; } .flex--3o--gt-sm { -webkit-box-ordinal-group: 4; -webkit-order: 3; -ms-flex-order: 3; order: 3; } .flex--4o--gt-sm { -webkit-box-ordinal-group: 5; -webkit-order: 4; -ms-flex-order: 4; order: 4; } .flex--5o--gt-sm { -webkit-box-ordinal-group: 6; -webkit-order: 5; -ms-flex-order: 5; order: 5; } .flex--6o--gt-sm { -webkit-box-ordinal-group: 7; -webkit-order: 6; -ms-flex-order: 6; order: 6; } .flex--7o--gt-sm { -webkit-box-ordinal-group: 8; -webkit-order: 7; -ms-flex-order: 7; order: 7; } .flex--8o--gt-sm { -webkit-box-ordinal-group: 9; -webkit-order: 8; -ms-flex-order: 8; order: 8; } .flex--9o--gt-sm { -webkit-box-ordinal-group: 10; -webkit-order: 9; -ms-flex-order: 9; order: 9; } .flex--10o--gt-sm { -webkit-box-ordinal-group: 11; -webkit-order: 10; -ms-flex-order: 10; order: 10; } .flex--11o--gt-sm { -webkit-box-ordinal-group: 12; -webkit-order: 11; -ms-flex-order: 11; order: 11; } .flex--12o--gt-sm { -webkit-box-ordinal-group: 13; -webkit-order: 12; -ms-flex-order: 12; order: 12; } .flex--no-wrap--gt-sm { -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .flex--vc--gt-sm { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .flex--hc--gt-sm { -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .flex--col--gt-sm { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-flow: column; -ms-flex-flow: column; flex-flow: column; } .flex--row--gt-sm { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-flow: row; -ms-flex-flow: row; flex-flow: row; } .flex--grow--gt-sm { -webkit-box-flex: 1; -webkit-flex: 1 0; -ms-flex: 1 0; flex: 1 0; } .flex--shrink--gt-sm { -webkit-box-flex: 0; -webkit-flex: 0 1; -ms-flex: 0 1; flex: 0 1; } } @media screen and (min-width: 960px) { .flex--1s--gt-md { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(8.333% - 16px); -ms-flex: 0 1 calc(8.333% - 16px); flex: 0 1 calc(8.333% - 16px); } .flex--2s--gt-md { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(16.667% - 16px); -ms-flex: 0 1 calc(16.667% - 16px); flex: 0 1 calc(16.667% - 16px); } .flex--3s--gt-md { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(25% - 16px); -ms-flex: 0 1 calc(25% - 16px); flex: 0 1 calc(25% - 16px); } .flex--4s--gt-md { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(33.333% - 16px); -ms-flex: 0 1 calc(33.333% - 16px); flex: 0 1 calc(33.333% - 16px); } .flex--5s--gt-md { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(41.667% - 16px); -ms-flex: 0 1 calc(41.667% - 16px); flex: 0 1 calc(41.667% - 16px); } .flex--6s--gt-md { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(50% - 16px); -ms-flex: 0 1 calc(50% - 16px); flex: 0 1 calc(50% - 16px); } .flex--7s--gt-md { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(58.333% - 16px); -ms-flex: 0 1 calc(58.333% - 16px); flex: 0 1 calc(58.333% - 16px); } .flex--8s--gt-md { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(66.667% - 16px); -ms-flex: 0 1 calc(66.667% - 16px); flex: 0 1 calc(66.667% - 16px); } .flex--9s--gt-md { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(75% - 16px); -ms-flex: 0 1 calc(75% - 16px); flex: 0 1 calc(75% - 16px); } .flex--10s--gt-md { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(83.333% - 16px); -ms-flex: 0 1 calc(83.333% - 16px); flex: 0 1 calc(83.333% - 16px); } .flex--11s--gt-md { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(91.667% - 16px); -ms-flex: 0 1 calc(91.667% - 16px); flex: 0 1 calc(91.667% - 16px); } .flex--12s--gt-md { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(100% - 16px); -ms-flex: 0 1 calc(100% - 16px); flex: 0 1 calc(100% - 16px); } .flex--1o--gt-md { -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1; } .flex--2o--gt-md { -webkit-box-ordinal-group: 3; -webkit-order: 2; -ms-flex-order: 2; order: 2; } .flex--3o--gt-md { -webkit-box-ordinal-group: 4; -webkit-order: 3; -ms-flex-order: 3; order: 3; } .flex--4o--gt-md { -webkit-box-ordinal-group: 5; -webkit-order: 4; -ms-flex-order: 4; order: 4; } .flex--5o--gt-md { -webkit-box-ordinal-group: 6; -webkit-order: 5; -ms-flex-order: 5; order: 5; } .flex--6o--gt-md { -webkit-box-ordinal-group: 7; -webkit-order: 6; -ms-flex-order: 6; order: 6; } .flex--7o--gt-md { -webkit-box-ordinal-group: 8; -webkit-order: 7; -ms-flex-order: 7; order: 7; } .flex--8o--gt-md { -webkit-box-ordinal-group: 9; -webkit-order: 8; -ms-flex-order: 8; order: 8; } .flex--9o--gt-md { -webkit-box-ordinal-group: 10; -webkit-order: 9; -ms-flex-order: 9; order: 9; } .flex--10o--gt-md { -webkit-box-ordinal-group: 11; -webkit-order: 10; -ms-flex-order: 10; order: 10; } .flex--11o--gt-md { -webkit-box-ordinal-group: 12; -webkit-order: 11; -ms-flex-order: 11; order: 11; } .flex--12o--gt-md { -webkit-box-ordinal-group: 13; -webkit-order: 12; -ms-flex-order: 12; order: 12; } .flex--no-wrap--gt-md { -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .flex--vc--gt-md { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .flex--hc--gt-md { -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .flex--col--gt-md { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-flow: column; -ms-flex-flow: column; flex-flow: column; } .flex--row--gt-md { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-flow: row; -ms-flex-flow: row; flex-flow: row; } .flex--grow--gt-md { -webkit-box-flex: 1; -webkit-flex: 1 0; -ms-flex: 1 0; flex: 1 0; } .flex--shrink--gt-md { -webkit-box-flex: 0; -webkit-flex: 0 1; -ms-flex: 0 1; flex: 0 1; } } @media screen and (min-width: 1200px) { .flex--1s--gt-lg { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(8.333% - 16px); -ms-flex: 0 1 calc(8.333% - 16px); flex: 0 1 calc(8.333% - 16px); } .flex--2s--gt-lg { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(16.667% - 16px); -ms-flex: 0 1 calc(16.667% - 16px); flex: 0 1 calc(16.667% - 16px); } .flex--3s--gt-lg { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(25% - 16px); -ms-flex: 0 1 calc(25% - 16px); flex: 0 1 calc(25% - 16px); } .flex--4s--gt-lg { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(33.333% - 16px); -ms-flex: 0 1 calc(33.333% - 16px); flex: 0 1 calc(33.333% - 16px); } .flex--5s--gt-lg { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(41.667% - 16px); -ms-flex: 0 1 calc(41.667% - 16px); flex: 0 1 calc(41.667% - 16px); } .flex--6s--gt-lg { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(50% - 16px); -ms-flex: 0 1 calc(50% - 16px); flex: 0 1 calc(50% - 16px); } .flex--7s--gt-lg { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(58.333% - 16px); -ms-flex: 0 1 calc(58.333% - 16px); flex: 0 1 calc(58.333% - 16px); } .flex--8s--gt-lg { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(66.667% - 16px); -ms-flex: 0 1 calc(66.667% - 16px); flex: 0 1 calc(66.667% - 16px); } .flex--9s--gt-lg { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(75% - 16px); -ms-flex: 0 1 calc(75% - 16px); flex: 0 1 calc(75% - 16px); } .flex--10s--gt-lg { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(83.333% - 16px); -ms-flex: 0 1 calc(83.333% - 16px); flex: 0 1 calc(83.333% - 16px); } .flex--11s--gt-lg { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(91.667% - 16px); -ms-flex: 0 1 calc(91.667% - 16px); flex: 0 1 calc(91.667% - 16px); } .flex--12s--gt-lg { -webkit-box-flex: 0; -webkit-flex: 0 1 calc(100% - 16px); -ms-flex: 0 1 calc(100% - 16px); flex: 0 1 calc(100% - 16px); } .flex--1o--gt-lg { -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1; } .flex--2o--gt-lg { -webkit-box-ordinal-group: 3; -webkit-order: 2; -ms-flex-order: 2; order: 2; } .flex--3o--gt-lg { -webkit-box-ordinal-group: 4; -webkit-order: 3; -ms-flex-order: 3; order: 3; } .flex--4o--gt-lg { -webkit-box-ordinal-group: 5; -webkit-order: 4; -ms-flex-order: 4; order: 4; } .flex--5o--gt-lg { -webkit-box-ordinal-group: 6; -webkit-order: 5; -ms-flex-order: 5; order: 5; } .flex--6o--gt-lg { -webkit-box-ordinal-group: 7; -webkit-order: 6; -ms-flex-order: 6; order: 6; } .flex--7o--gt-lg { -webkit-box-ordinal-group: 8; -webkit-order: 7; -ms-flex-order: 7; order: 7; } .flex--8o--gt-lg { -webkit-box-ordinal-group: 9; -webkit-order: 8; -ms-flex-order: 8; order: 8; } .flex--9o--gt-lg { -webkit-box-ordinal-group: 10; -webkit-order: 9; -ms-flex-order: 9; order: 9; } .flex--10o--gt-lg { -webkit-box-ordinal-group: 11; -webkit-order: 10; -ms-flex-order: 10; order: 10; } .flex--11o--gt-lg { -webkit-box-ordinal-group: 12; -webkit-order: 11; -ms-flex-order: 11; order: 11; } .flex--12o--gt-lg { -webkit-box-ordinal-group: 13; -webkit-order: 12; -ms-flex-order: 12; order: 12; } .flex--no-wrap--gt-lg { -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .flex--vc--gt-lg { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .flex--hc--gt-lg { -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .flex--col--gt-lg { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-flow: column; -ms-flex-flow: column; flex-flow: column; } .flex--row--gt-lg { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-flow: row; -ms-flex-flow: row; flex-flow: row; } .flex--grow--gt-lg { -webkit-box-flex: 1; -webkit-flex: 1 0; -ms-flex: 1 0; flex: 1 0; } .flex--shrink--gt-lg { -webkit-box-flex: 0; -webkit-flex: 0 1; -ms-flex: 0 1; flex: 0 1; } } .grid { width: 100%; grid-gap: 16px; -webkit-box-align: start; -webkit-align-items: start; -ms-flex-align: start; align-items: start; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } @supports (display: grid) { .grid { display: grid; grid-template-columns: repeat(var(--grid-mode, auto-fit), minmax(var(--grid-min-width, 1fr), 1fr)); } } .grid--2c { --grid-min-width: calc( (100% - 32px - 16px) / 2 ); } .grid--2c > * { width: calc(50% - 16px); } .grid--3c { --grid-min-width: calc( (100% - 32px - 32px) / 3 ); } .grid--3c > * { width: calc(33% - 16px); } .grid--4c { --grid-min-width: calc( (100% - 32px - 48px) / 4 ); } .grid--4c > * { width: calc(25% - 16px); } .grid--5c { --grid-min-width: calc( (100% - 32px - 64px) / 5 ); } .grid--5c > * { width: calc(20% - 16px); } .grid--6c { --grid-min-width: calc( (100% - 32px - 80px) / 6 ); } .grid--6c > * { width: calc(16% - 16px); } .grid--7c { --grid-min-width: calc( (100% - 32px - 96px) / 7 ); } .grid--7c > * { width: calc(14% - 16px); } .grid--8c { --grid-min-width: calc( (100% - 32px - 112px) / 8 ); } .grid--8c > * { width: calc(12% - 16px); } .grid--9c { --grid-min-width: calc( (100% - 32px - 128px) / 9 ); } .grid--9c > * { width: calc(11% - 16px); } .grid--10c { --grid-min-width: calc( (100% - 32px - 144px) / 10 ); } .grid--10c > * { width: calc(10% - 16px); } .grid--11c { --grid-min-width: calc( (100% - 32px - 160px) / 11 ); } .grid--11c > * { width: calc(9% - 16px); } .grid--12c { --grid-min-width: calc( (100% - 32px - 176px) / 12 ); } .grid--12c > * { width: calc(8% - 16px); } .grid--100 { width: 100%; } .grid--no-gap { grid-gap: 0; } .grid--hc { justify-items: center; } .grid--vc { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .grid--fill { --grid-mode: auto-fill; } .grid--fill__cell { -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; } @media screen and (min-width: 768px) { .grid--2c--gt-sm { --grid-min-width: calc( (100% - 32px - 16px) / 2 ); } .grid--2c--gt-sm > * { width: calc(50% - 16px); } .grid--3c--gt-sm { --grid-min-width: calc( (100% - 32px - 32px) / 3 ); } .grid--3c--gt-sm > * { width: calc(33% - 16px); } .grid--4c--gt-sm { --grid-min-width: calc( (100% - 32px - 48px) / 4 ); } .grid--4c--gt-sm > * { width: calc(25% - 16px); } .grid--5c--gt-sm { --grid-min-width: calc( (100% - 32px - 64px) / 5 ); } .grid--5c--gt-sm > * { width: calc(20% - 16px); } .grid--6c--gt-sm { --grid-min-width: calc( (100% - 32px - 80px) / 6 ); } .grid--6c--gt-sm > * { width: calc(16% - 16px); } .grid--7c--gt-sm { --grid-min-width: calc( (100% - 32px - 96px) / 7 ); } .grid--7c--gt-sm > * { width: calc(14% - 16px); } .grid--8c--gt-sm { --grid-min-width: calc( (100% - 32px - 112px) / 8 ); } .grid--8c--gt-sm > * { width: calc(12% - 16px); } .grid--9c--gt-sm { --grid-min-width: calc( (100% - 32px - 128px) / 9 ); } .grid--9c--gt-sm > * { width: calc(11% - 16px); } .grid--10c--gt-sm { --grid-min-width: calc( (100% - 32px - 144px) / 10 ); } .grid--10c--gt-sm > * { width: calc(10% - 16px); } .grid--11c--gt-sm { --grid-min-width: calc( (100% - 32px - 160px) / 11 ); } .grid--11c--gt-sm > * { width: calc(9% - 16px); } .grid--12c--gt-sm { --grid-min-width: calc( (100% - 32px - 176px) / 12 ); } .grid--12c--gt-sm > * { width: calc(8% - 16px); } .grid--100 { width: 100%; } .grid--no-gap { grid-gap: 0; } .grid--hc { justify-items: center; } .grid--vc { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .grid--fill { --grid-mode: auto-fill; } .grid--fill__cell { -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; } } @media screen and (min-width: 960px) { .grid--2c--gt-md { --grid-min-width: calc( (100% - 32px - 16px) / 2 ); } .grid--2c--gt-md > * { width: calc(50% - 16px); } .grid--3c--gt-md { --grid-min-width: calc( (100% - 32px - 32px) / 3 ); } .grid--3c--gt-md > * { width: calc(33% - 16px); } .grid--4c--gt-md { --grid-min-width: calc( (100% - 32px - 48px) / 4 ); } .grid--4c--gt-md > * { width: calc(25% - 16px); } .grid--5c--gt-md { --grid-min-width: calc( (100% - 32px - 64px) / 5 ); } .grid--5c--gt-md > * { width: calc(20% - 16px); } .grid--6c--gt-md { --grid-min-width: calc( (100% - 32px - 80px) / 6 ); } .grid--6c--gt-md > * { width: calc(16% - 16px); } .grid--7c--gt-md { --grid-min-width: calc( (100% - 32px - 96px) / 7 ); } .grid--7c--gt-md > * { width: calc(14% - 16px); } .grid--8c--gt-md { --grid-min-width: calc( (100% - 32px - 112px) / 8 ); } .grid--8c--gt-md > * { width: calc(12% - 16px); } .grid--9c--gt-md { --grid-min-width: calc( (100% - 32px - 128px) / 9 ); } .grid--9c--gt-md > * { width: calc(11% - 16px); } .grid--10c--gt-md { --grid-min-width: calc( (100% - 32px - 144px) / 10 ); } .grid--10c--gt-md > * { width: calc(10% - 16px); } .grid--11c--gt-md { --grid-min-width: calc( (100% - 32px - 160px) / 11 ); } .grid--11c--gt-md > * { width: calc(9% - 16px); } .grid--12c--gt-md { --grid-min-width: calc( (100% - 32px - 176px) / 12 ); } .grid--12c--gt-md > * { width: calc(8% - 16px); } .grid--100 { width: 100%; } .grid--no-gap { grid-gap: 0; } .grid--hc { justify-items: center; } .grid--vc { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .grid--fill { --grid-mode: auto-fill; } .grid--fill__cell { -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; } } @media screen and (min-width: 1200px) { .grid--2c--gt-lg { --grid-min-width: calc( (100% - 32px - 16px) / 2 ); } .grid--2c--gt-lg > * { width: calc(50% - 16px); } .grid--3c--gt-lg { --grid-min-width: calc( (100% - 32px - 32px) / 3 ); } .grid--3c--gt-lg > * { width: calc(33% - 16px); } .grid--4c--gt-lg { --grid-min-width: calc( (100% - 32px - 48px) / 4 ); } .grid--4c--gt-lg > * { width: calc(25% - 16px); } .grid--5c--gt-lg { --grid-min-width: calc( (100% - 32px - 64px) / 5 ); } .grid--5c--gt-lg > * { width: calc(20% - 16px); } .grid--6c--gt-lg { --grid-min-width: calc( (100% - 32px - 80px) / 6 ); } .grid--6c--gt-lg > * { width: calc(16% - 16px); } .grid--7c--gt-lg { --grid-min-width: calc( (100% - 32px - 96px) / 7 ); } .grid--7c--gt-lg > * { width: calc(14% - 16px); } .grid--8c--gt-lg { --grid-min-width: calc( (100% - 32px - 112px) / 8 ); } .grid--8c--gt-lg > * { width: calc(12% - 16px); } .grid--9c--gt-lg { --grid-min-width: calc( (100% - 32px - 128px) / 9 ); } .grid--9c--gt-lg > * { width: calc(11% - 16px); } .grid--10c--gt-lg { --grid-min-width: calc( (100% - 32px - 144px) / 10 ); } .grid--10c--gt-lg > * { width: calc(10% - 16px); } .grid--11c--gt-lg { --grid-min-width: calc( (100% - 32px - 160px) / 11 ); } .grid--11c--gt-lg > * { width: calc(9% - 16px); } .grid--12c--gt-lg { --grid-min-width: calc( (100% - 32px - 176px) / 12 ); } .grid--12c--gt-lg > * { width: calc(8% - 16px); } .grid--100 { width: 100%; } .grid--no-gap { grid-gap: 0; } .grid--hc { justify-items: center; } .grid--vc { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .grid--fill { --grid-mode: auto-fill; } .grid--fill__cell { -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; } } .grid > * { margin: 8px; } @supports (display: grid) { .grid > * { margin: 0; width: auto; } } .card { margin-bottom: 16px; position: relative; border-radius: 2px; background: var(--card__bg); box-sizing: border-box; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; overflow: auto; color: var(--elem__color); --elem--hover__bg: var(--body__bg); min-height: 72px; } @media screen and (min-width: 768px) { .card { box-shadow: var(--elem__shadow); } } .card > figure { -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; } .card:last-child { margin-bottom: 0; } .card--row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: start; -webkit-align-items: start; -ms-flex-align: start; align-items: start; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .card__title { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding-left: 16px; padding-right: 16px; } .card__content { padding-bottom: 16px; overflow-x: hidden; } .hidden { display: none !important; } .visible { display: -webkit-box !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; } @media screen and (min-width: 768px) { .hidden--gt-sm { display: none !important; } .visible--gt-sm { display: -webkit-box !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; } } @media screen and (min-width: 768px) and (max-width: 959px) { .hidden--sm { display: none !important; } .visible--sm { display: -webkit-box !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; } } @media screen and (min-width: 960px) { .hidden--gt-md { display: none !important; } .visible--gt-md { display: -webkit-box !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; } } @media screen and (min-width: 960px) and (max-width: 1199px) { .hidden--md { display: none !important; } .visible--md { display: -webkit-box !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; } } @media screen and (min-width: 1200px) { .hidden--gt-lg { display: none !important; } .visible--gt-lg { display: -webkit-box !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; } } mat-icon { color: var(--status, var(--secondary)); position: relative; } mat-icon[size="1.5"] { width: 36px; height: 36px; } mat-icon[size="1.5"] svg { -webkit-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; } mat-icon[size="2"] { width: 48px; height: 48px; } mat-icon[size="2"] svg { -webkit-transform: scale(2); -ms-transform: scale(2); transform: scale(2); -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; } mat-icon[size="3"] { width: 72px; height: 72px; } mat-icon[size="3"] svg { -webkit-transform: scale(3); -ms-transform: scale(3); transform: scale(3); -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; } mat-icon svg { position: absolute; top: 0; left: 0; } mat-icon.disabled, .disabled mat-icon { color: var(--elem--muted__color); } mat-icon.icon--m-r { margin-right: 8px; } svg[size="1.5"] { width: 36px; height: 36px; } svg[size="2"] { width: 48px; height: 48px; } svg[size="3"] { width: 72px; height: 72px; } .btn:disabled, .btn[disabled], .btn.disabled, .btn--icon:disabled, .btn--icon[disabled], .btn--icon.disabled { pointer-events: none; color: var(--btn__color--disabled); } .btn-holder { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .btn-holder--right { -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; } .btn { -webkit-transition: background 0.3s, color 0.3s; transition: background 0.3s, color 0.3s; cursor: default; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; padding: 8px 16px; border: 0; border-radius: 2px; box-shadow: var(--elem__shadow); font: 600 16px / 24px "Open Sans", sans-serif; text-decoration: none; text-transform: uppercase; outline: none; background: var(--btn__bg); margin-bottom: 8px; letter-spacing: 0.03em; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-right: 8px; } .btn, .btn mat-icon { color: var(--btn__color); } .btn:last-child { margin-right: 0; } .btn mat-icon { margin: 0 8px 0 -8px; } [theme~='none'] .btn, .btn[theme~='none'] { box-shadow: none; padding-left: 0; } .btn:disabled, .btn[disabled], .btn.disabled { background: var(--btn--disabled__bg); color: var(--btn--disabled__color); } .btn:disabled mat-icon, .btn[disabled] mat-icon, .btn.disabled mat-icon { color: var(--btn--disabled__icon__color); } .btn:hover, .btn:focus { background: var(--btn--hover__bg); color: var(--btn--hover__color); } .btn--lg { padding: 10px 24px 10px 12px; font-size: 20px; line-height: 32px; } .btn--icon { padding: 8px; margin: 0; background: none; border: none; outline: none; box-shadow: none; border-radius: 50%; cursor: pointer; } .btn--icon mat-icon { -webkit-transition: color 0.3s; transition: color 0.3s; color: var(--status, var(--secondary)); margin: 0; margin: 0; } .btn--active, .btn:active, .btn--active:focus, .btn:focus:active { background: var(--btn--active__bg); color: var(--btn--active__color); } figure { position: relative; } .img--cover { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; position: absolute; top: 0; } .tag { display: inline-block; background: var(--btn--active__bg); padding: 4px 8px; border-radius: 2px; margin-right: 8px; margin-bottom: 8px; } .pad { padding: 8px; } .pad--0 { padding: 0px; } .pad--2 { padding: 16px; } .pad--4 { padding: 32px; } .pad--t, .pad--v { padding-top: 8px; } .pad--t--0, .pad--v--0 { padding-top: 0px; } .pad--t--2, .pad--v--2 { padding-top: 16px; } .pad--t--4, .pad--v--4 { padding-top: 32px; } .pad--b, .pad--v { padding-bottom: 8px; } .pad--b--0, .pad--v--0 { padding-bottom: 0px; } .pad--b--2, .pad--v--2 { padding-bottom: 16px; } .pad--b--4, .pad--v--4 { padding-bottom: 32px; } .pad--l, .pad--h { padding-left: 8px; } .pad--l--0, .pad--h--0 { padding-left: 0px; } .pad--l--2, .pad--h--2 { padding-left: 16px; } .pad--l--4, .pad--h--4 { padding-left: 32px; } .pad--r, .pad--h { padding-right: 8px; } .pad--r--0, .pad--h--0 { padding-right: 0px; } .pad--r--2, .pad--h--2 { padding-right: 16px; } .pad--r--4, .pad--h--4 { padding-right: 32px; } .mgn { margin: 8px; } .mgn--0 { margin: 0px; } .mgn--2 { margin: 16px; } .mgn--4 { margin: 32px; } .mgn--t, .mgn--v { margin-top: 8px; } .mgn--t--0, .mgn--v--0 { margin-top: 0px; } .mgn--t--2, .mgn--v--2 { margin-top: 16px; } .mgn--t--4, .mgn--v--4 { margin-top: 32px; } .mgn--b, .mgn--v { margin-bottom: 8px; } .mgn--b--0, .mgn--v--0 { margin-bottom: 0px; } .mgn--b--2, .mgn--v--2 { margin-bottom: 16px; } .mgn--b--4, .mgn--v--4 { margin-bottom: 32px; } .mgn--l, .mgn--h { margin-left: 8px; } .mgn--l--0, .mgn--h--0 { margin-left: 0px; } .mgn--l--2, .mgn--h--2 { margin-left: 16px; } .mgn--l--4, .mgn--h--4 { margin-left: 32px; } .mgn--r, .mgn--h { margin-right: 8px; } .mgn--r--0, .mgn--h--0 { margin-right: 0px; } .mgn--r--2, .mgn--h--2 { margin-right: 16px; } .mgn--r--4, .mgn--h--4 { margin-right: 32px; } @media screen and (min-width: 768px) { .pad--gt-sm { padding: 8px; } .pad--0--gt-sm { padding: 0px; } .pad--2--gt-sm { padding: 16px; } .pad--4--gt-sm { padding: 32px; } .pad--t--gt-sm, .pad--v--gt-sm { padding-top: 8px; } .pad--t--0--gt-sm, .pad--v--0--gt-sm { padding-top: 0px; } .pad--t--2--gt-sm, .pad--v--2--gt-sm { padding-top: 16px; } .pad--t--4--gt-sm, .pad--v--4--gt-sm { padding-top: 32px; } .pad--b--gt-sm, .pad--v--gt-sm { padding-bottom: 8px; } .pad--b--0--gt-sm, .pad--v--0--gt-sm { padding-bottom: 0px; } .pad--b--2--gt-sm, .pad--v--2--gt-sm { padding-bottom: 16px; } .pad--b--4--gt-sm, .pad--v--4--gt-sm { padding-bottom: 32px; } .pad--l--gt-sm, .pad--h--gt-sm { padding-left: 8px; } .pad--l--0--gt-sm, .pad--h--0--gt-sm { padding-left: 0px; } .pad--l--2--gt-sm, .pad--h--2--gt-sm { padding-left: 16px; } .pad--l--4--gt-sm, .pad--h--4--gt-sm { padding-left: 32px; } .pad--r--gt-sm, .pad--h--gt-sm { padding-right: 8px; } .pad--r--0--gt-sm, .pad--h--0--gt-sm { padding-right: 0px; } .pad--r--2--gt-sm, .pad--h--2--gt-sm { padding-right: 16px; } .pad--r--4--gt-sm, .pad--h--4--gt-sm { padding-right: 32px; } .mgn--gt-sm { margin: 8px; } .mgn--0--gt-sm { margin: 0px; } .mgn--2--gt-sm { margin: 16px; } .mgn--4--gt-sm { margin: 32px; } .mgn--t--gt-sm, .mgn--v--gt-sm { margin-top: 8px; } .mgn--t--0--gt-sm, .mgn--v--0--gt-sm { margin-top: 0px; } .mgn--t--2--gt-sm, .mgn--v--2--gt-sm { margin-top: 16px; } .mgn--t--4--gt-sm, .mgn--v--4--gt-sm { margin-top: 32px; } .mgn--b--gt-sm, .mgn--v--gt-sm { margin-bottom: 8px; } .mgn--b--0--gt-sm, .mgn--v--0--gt-sm { margin-bottom: 0px; } .mgn--b--2--gt-sm, .mgn--v--2--gt-sm { margin-bottom: 16px; } .mgn--b--4--gt-sm, .mgn--v--4--gt-sm { margin-bottom: 32px; } .mgn--l--gt-sm, .mgn--h--gt-sm { margin-left: 8px; } .mgn--l--0--gt-sm, .mgn--h--0--gt-sm { margin-left: 0px; } .mgn--l--2--gt-sm, .mgn--h--2--gt-sm { margin-left: 16px; } .mgn--l--4--gt-sm, .mgn--h--4--gt-sm { margin-left: 32px; } .mgn--r--gt-sm, .mgn--h--gt-sm { margin-right: 8px; } .mgn--r--0--gt-sm, .mgn--h--0--gt-sm { margin-right: 0px; } .mgn--r--2--gt-sm, .mgn--h--2--gt-sm { margin-right: 16px; } .mgn--r--4--gt-sm, .mgn--h--4--gt-sm { margin-right: 32px; } } @media screen and (min-width: 960px) { .pad--gt-md { padding: 8px; } .pad--0--gt-md { padding: 0px; } .pad--2--gt-md { padding: 16px; } .pad--4--gt-md { padding: 32px; } .pad--t--gt-md, .pad--v--gt-md { padding-top: 8px; } .pad--t--0--gt-md, .pad--v--0--gt-md { padding-top: 0px; } .pad--t--2--gt-md, .pad--v--2--gt-md { padding-top: 16px; } .pad--t--4--gt-md, .pad--v--4--gt-md { padding-top: 32px; } .pad--b--gt-md, .pad--v--gt-md { padding-bottom: 8px; } .pad--b--0--gt-md, .pad--v--0--gt-md { padding-bottom: 0px; } .pad--b--2--gt-md, .pad--v--2--gt-md { padding-bottom: 16px; } .pad--b--4--gt-md, .pad--v--4--gt-md { padding-bottom: 32px; } .pad--l--gt-md, .pad--h--gt-md { padding-left: 8px; } .pad--l--0--gt-md, .pad--h--0--gt-md { padding-left: 0px; } .pad--l--2--gt-md, .pad--h--2--gt-md { padding-left: 16px; } .pad--l--4--gt-md, .pad--h--4--gt-md { padding-left: 32px; } .pad--r--gt-md, .pad--h--gt-md { padding-right: 8px; } .pad--r--0--gt-md, .pad--h--0--gt-md { padding-right: 0px; } .pad--r--2--gt-md, .pad--h--2--gt-md { padding-right: 16px; } .pad--r--4--gt-md, .pad--h--4--gt-md { padding-right: 32px; } .mgn--gt-md { margin: 8px; } .mgn--0--gt-md { margin: 0px; } .mgn--2--gt-md { margin: 16px; } .mgn--4--gt-md { margin: 32px; } .mgn--t--gt-md, .mgn--v--gt-md { margin-top: 8px; } .mgn--t--0--gt-md, .mgn--v--0--gt-md { margin-top: 0px; } .mgn--t--2--gt-md, .mgn--v--2--gt-md { margin-top: 16px; } .mgn--t--4--gt-md, .mgn--v--4--gt-md { margin-top: 32px; } .mgn--b--gt-md, .mgn--v--gt-md { margin-bottom: 8px; } .mgn--b--0--gt-md, .mgn--v--0--gt-md { margin-bottom: 0px; } .mgn--b--2--gt-md, .mgn--v--2--gt-md { margin-bottom: 16px; } .mgn--b--4--gt-md, .mgn--v--4--gt-md { margin-bottom: 32px; } .mgn--l--gt-md, .mgn--h--gt-md { margin-left: 8px; } .mgn--l--0--gt-md, .mgn--h--0--gt-md { margin-left: 0px; } .mgn--l--2--gt-md, .mgn--h--2--gt-md { margin-left: 16px; } .mgn--l--4--gt-md, .mgn--h--4--gt-md { margin-left: 32px; } .mgn--r--gt-md, .mgn--h--gt-md { margin-right: 8px; } .mgn--r--0--gt-md, .mgn--h--0--gt-md { margin-right: 0px; } .mgn--r--2--gt-md, .mgn--h--2--gt-md { margin-right: 16px; } .mgn--r--4--gt-md, .mgn--h--4--gt-md { margin-right: 32px; } } @media screen and (min-width: 1200px) { .pad--gt-lg { padding: 8px; } .pad--0--gt-lg { padding: 0px; } .pad--2--gt-lg { padding: 16px; } .pad--4--gt-lg { padding: 32px; } .pad--t--gt-lg, .pad--v--gt-lg { padding-top: 8px; } .pad--t--0--gt-lg, .pad--v--0--gt-lg { padding-top: 0px; } .pad--t--2--gt-lg, .pad--v--2--gt-lg { padding-top: 16px; } .pad--t--4--gt-lg, .pad--v--4--gt-lg { padding-top: 32px; } .pad--b--gt-lg, .pad--v--gt-lg { padding-bottom: 8px; } .pad--b--0--gt-lg, .pad--v--0--gt-lg { padding-bottom: 0px; } .pad--b--2--gt-lg, .pad--v--2--gt-lg { padding-bottom: 16px; } .pad--b--4--gt-lg, .pad--v--4--gt-lg { padding-bottom: 32px; } .pad--l--gt-lg, .pad--h--gt-lg { padding-left: 8px; } .pad--l--0--gt-lg, .pad--h--0--gt-lg { padding-left: 0px; } .pad--l--2--gt-lg, .pad--h--2--gt-lg { padding-left: 16px; } .pad--l--4--gt-lg, .pad--h--4--gt-lg { padding-left: 32px; } .pad--r--gt-lg, .pad--h--gt-lg { padding-right: 8px; } .pad--r--0--gt-lg, .pad--h--0--gt-lg { padding-right: 0px; } .pad--r--2--gt-lg, .pad--h--2--gt-lg { padding-right: 16px; } .pad--r--4--gt-lg, .pad--h--4--gt-lg { padding-right: 32px; } .mgn--gt-lg { margin: 8px; } .mgn--0--gt-lg { margin: 0px; } .mgn--2--gt-lg { margin: 16px; } .mgn--4--gt-lg { margin: 32px; } .mgn--t--gt-lg, .mgn--v--gt-lg { margin-top: 8px; } .mgn--t--0--gt-lg, .mgn--v--0--gt-lg { margin-top: 0px; } .mgn--t--2--gt-lg, .mgn--v--2--gt-lg { margin-top: 16px; } .mgn--t--4--gt-lg, .mgn--v--4--gt-lg { margin-top: 32px; } .mgn--b--gt-lg, .mgn--v--gt-lg { margin-bottom: 8px; } .mgn--b--0--gt-lg, .mgn--v--0--gt-lg { margin-bottom: 0px; } .mgn--b--2--gt-lg, .mgn--v--2--gt-lg { margin-bottom: 16px; } .mgn--b--4--gt-lg, .mgn--v--4--gt-lg { margin-bottom: 32px; } .mgn--l--gt-lg, .mgn--h--gt-lg { margin-left: 8px; } .mgn--l--0--gt-lg, .mgn--h--0--gt-lg { margin-left: 0px; } .mgn--l--2--gt-lg, .mgn--h--2--gt-lg { margin-left: 16px; } .mgn--l--4--gt-lg, .mgn--h--4--gt-lg { margin-left: 32px; } .mgn--r--gt-lg, .mgn--h--gt-lg { margin-right: 8px; } .mgn--r--0--gt-lg, .mgn--h--0--gt-lg { margin-right: 0px; } .mgn--r--2--gt-lg, .mgn--h--2--gt-lg { margin-right: 16px; } .mgn--r--4--gt-lg, .mgn--h--4--gt-lg { margin-right: 32px; } } body { margin: 0; } figure { display: block; width: 100%; } .section figure { width: auto; } .btn { text-transform: none; } .btn--outline { border: 1px solid rgba(248, 249, 251, 0.5); } .card { overflow: visible !important; } .card > figure { margin: 0; } alp-need-help .btn + .btn { margin-left: 0; } .topbar { font-size: 14px; height: 40px; } .testimonial-holder { -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; } svg { color: #425970; } svg.light { color: #ECF0F4; } .sidemenu { background: #293746; } .contact-card { min-height: 200px; } figure.banner__img:after { display: block; content: ' '; background: -webkit-gradient(linear, left bottom, left top, from(rgba(41, 55, 70, 0.2)), to(transparent)); background: linear-gradient(to top, rgba(41, 55, 70, 0.2), transparent); position: absolute; top: 0; bottom: 0; left: 0; right: 0; } #organization a { display: block; } #organization a[href^='mailto:'] { display: inline; } #mobile-phone { position: fixed; bottom: 0; width: 100%; z-index: 10; } #home-cta { margin: 32px auto; } p { word-break: break-word; } .tabs--new { -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; } .tabs--new a { border-top: 3px solid transparent; padding: 8px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; text-align: center; } .tabs--new a.active { border-color: #EC0929; background: white; } s-sticky { position: relative; z-index: 10; } .input, [is='s-label-push'] > span { height: 40px; line-height: 40px; } [is='s-label-push'] > span { padding: 0 8px; } s-sticky.s-sticky--sticked { margin-top: -32px; } .s-sticky--sticked [role='banner'] { padding: 0; } .s-sticky--sticked .header { padding: 0 !important; } .hamburger { margin-left: 16px; } .hamburger--squeeze { height: auto; } .s-select.input:not(input) { padding: 8px; height: 40px; } .flatpickr-months { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .flatpickr-month { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } table .th:before, table td:before { content: none !important; } /* SETUP ---------------------------------------*/ /** Settings, variables and tools. */ /* SETUP Load compass and all files of level : 01_setup folder (variables, colors vars, griddle conf vars, ...) ---------------------------------------*/ /** Parse and return the Map respresentation of a border property The $border argument will be parsed with the [s-parse-properties](../core/functions/_s-parse-properties.scss) function. @param {List} $border The border property to parse @return {Map} The Map represenration of the border @example s-border(1px solid white); // return // ( // width : 1px, // color : white, // style : solid // ) @author Olivier Bossel */ /** Return the Map representation of a columns properties @param {Interger} [$count=null] The number of columns @param {Number} [$gap=null] The gap width between each columns @param {String} [$fill=null] The fill property (balance,auto,initial,inherit) @param {Number} [$width=null] The width of the columns @param {Integer}{String} [$span=null] The column-span property (1,all,initial,inherit) @param {List} [$rule=null] The column-rule property @param {String} [$rule-style=null] The column-rule-style property @param {Color} [$rule-color=null] The column-rule-color property @param {Number} [$rule-width=null] The column-rule-width property @return {Map} The map representation or the columns properties @example s-columns(2, 20px); // return // ( // column-count : 2, // column-gap : 20px // ) @author Olivier Bossel */ /** Parse and return the Map respresentation of a margin property The $margin argument will be parsed with the [s-parse-properties](../core/functions/_s-parse-properties.scss) function. @param {List}{Number} $margin The margin property to parse @return {Map} The map representation @example s-margin(10px); // => ( top:10px, right:10px, bottom:10px, left:10px ) s-margin(10px 20px); // => ( top:10px, right:20px, bottom:10px, left:20px ) s-margin(5px 10px 15px 20px); // => ( top:5px, right:10px, bottom:15px, left:20px ) @author Olivier Bossel */ /** Return the representation of a position styling like position:absolute; top:0; left:100%; etc... This function gives you some shortcuts to align your element top, bottom, middle, center, etc... @param {String} [$position=absolute] The position css property @param {String} [$vertical-align=top] The vertical alignement wanted (top,middle,bottom) @param {String} [$align=left] The horizontal alignement wanted (left,center,right) @param {Number} [$top=null] The top property wanted @param {Number} [$right=null] The right property wanted @param {Number} [$bottom=null] The bottom property wanted @param {Number} [$left=null] The left property wanted @return {Map} The map representation of the position wanted @example s-position(absolute, top, right); s-position(absolute, middle, center); s-position(relative, bottom, right); s-position(absolute, bottom, center); // etc... @author Olivier Bossel */ /** Return the Map properties representation for the rhythme width The rhythme width is the width of an element that target a certain number of letters by line @param {Integer} [$letters-count=settings.typo.line-letters-count] The number of letters to target by line @return {Map} The Map properties representation @example s-rhythme-width(50); // return // ( // display : block, // max-width : 50ex // ) @author Olivier Bossel */ /** Return the Map properties representation of a translate x,y and z @param {Number} [$x=0] The x translate value @param {Number} [$y=0] The y translate value @param {Number} [$z=0] The z translate value @return {Map} The translate Map representation @example s-translate(10px,20px); // return // ( // transform: translateX(10px) translateY(20px) translateZ(0) // ) @author Olivier Bossel */ /** Return the settings.vertical-rhythme.scope-class value @return {String} The settings.vertical-rhythme.scope-class value @author Olivier Bossel */ /** Helper mixin to set a background image @param {String} [$repeat=null] The background-repeat property @param {String} [$size=null] The background-size property @param {String} [$attachment=null] The background-attachment property @param {String} [$blend-mode=null] The background-blend-mode property @param {String} [$clip=null] The background-clip property @param {String} [$url=null] The background-image url property @param {Number} [$width=null] The background-size width property @param {Number} [$height=null] The background-size height property @param {Number} [$top=null] The background-position top property @param {Number} [$left=null] The background-position left property @param {String} [$suffix2x=@2x] The suffix to add the the url if the 2x resolution if wanted @param {String} [$suffix3x=@3x] The suffix to add the the url if the 3x resolution if wanted @param {String} [$suffix4x=@4x] The suffix to add the the url if the 4x resolution if wanted @param {List} [$resolution=null] The resolution wanted like 2x, 3x and 4x @param {List} [$position=null] The background-position property @example .my-cool-element { \@include s-background( $url : 'img/my-cool-image.jpg', $size : cover, resolution : 2x 3x 4x ); } @author Olivier Bossel */ /** Center block */ /* # CLEARFIX More infos to come.. https://github.com/stubbornella/oocss/blob/master/oocss/src/components/utils/_clearfix-me.scss clearfix used project wide to clear floats and create a new formatting context usage @include clearfix-me() $clearfix-method sets default method */ .clearfix-overflow { overflow: hidden; } .clearfix-facebook { display: table-cell; vertical-align: top; width: 10000px !important; } .clearfix-float { float: left; width: 100%; } .clearfix, .list > li, .text-format ul > li, .text-format ol > li, .text-format dl > li, .markdown-format ul > li, .markdown-format ol > li, .markdown-format dl > li, .list > .list__item, .text-format ul > .list__item, .text-format ol > .list__item, .text-format dl > .list__item, .markdown-format ul > .list__item, .markdown-format ol > .list__item, .markdown-format dl > .list__item, .tabs, .clearfix-micro { zoom: 1; } .clearfix:before, .list > li:before, .text-format ul > li:before, .text-format ol > li:before, .text-format dl > li:before, .markdown-format ul > li:before, .markdown-format ol > li:before, .markdown-format dl > li:before, .list > .list__item:before, .text-format ul > .list__item:before, .text-format ol > .list__item:before, .text-format dl > .list__item:before, .markdown-format ul > .list__item:before, .markdown-format ol > .list__item:before, .markdown-format dl > .list__item:before, .tabs:before, .clearfix-micro:before, .clearfix:after, .list > li:after, .text-format ul > li:after, .text-format ol > li:after, .text-format dl > li:after, .markdown-format ul > li:after, .markdown-format ol > li:after, .markdown-format dl > li:after, .list > .list__item:after, .text-format ul > .list__item:after, .text-format ol > .list__item:after, .text-format dl > .list__item:after, .markdown-format ul > .list__item:after, .markdown-format ol > .list__item:after, .markdown-format dl > .list__item:after, .tabs:after, .clearfix-micro:after { content: " "; display: table; } .clearfix:after, .list > li:after, .text-format ul > li:after, .text-format ol > li:after, .text-format dl > li:after, .markdown-format ul > li:after, .markdown-format ol > li:after, .markdown-format dl > li:after, .list > .list__item:after, .text-format ul > .list__item:after, .text-format ol > .list__item:after, .text-format dl > .list__item:after, .markdown-format ul > .list__item:after, .markdown-format ol > .list__item:after, .markdown-format dl > .list__item:after, .tabs:after, .clearfix-micro:after { clear: both; } @-webkit-keyframes s-DOMNodeInserted { from { opacity: .99; } to { opacity: 1; } } @keyframes s-DOMNodeInserted { from { opacity: .99; } to { opacity: 1; } } /** Get a registered color by name or wrap a new color into a s-color call to manipulate it with ease. Supported actions : - hue {Deg} - lighten {Percent} - darken {Percent} - saturate {Percent} - desaturate {Percent} - grayscale {Boolean} - complement {Boolean} - invert {Boolean} - opacity {Percent} - mix {Color} @param {String}{Color} $color The color name or the color value to manipulate @param {String}{List} [$modifier=null] The color modifier to apply. Can be a registered modifier name or a modifier list @return {Color} The actual color value @example scss // default color (settings.colors.default) $myColor : s-color(default); // primary color (settings.colors.primary) $primary : s-color(primary); // manipulate $primary-dark : s-color(primary, -darken 10%); // registered modifier $primary-light : s-color(primary, light); @author Olivier Bossel */ /** Return the color in a modifier list @param {List} $modifiers The modifiers list @return {String} The color name @example $my-color : s-color-modifier(outline primary); // => primary @author Olivier Bossel */ /** Return the css class selector for the current component setted by the [core/mixins/_s-component.scss] mixin and build with the passed arguments. This function generate the class selector depending of the settings.selector.method setting or the selector method setted by the [s-selector-method mixin](../mixins/_s-selector-method.scss) @param {String} [$element=null] The element name of the class selector | '&' if target the same element like `&s-component-selector("&", ) {}` @param {String} [$modifier=null] The modifier name of the class selector @param {String} [$state=null] The state name of the class selector @param {String} [$modifierName=null] The modifier name that will be used for webcomponent method like [$modifierName="$modifier"] @param {String} [$method=null] The method wanted to generate the selector. [See here](../_selector-methods.scss) @return {String} The generated class selector @example \@incluse s-component('my-component') { // if settings.selector.method === 'BEM' s-component-selector('item') // => '.my-component__item' s-component-selector(null, 'red') // => '.my-component--red' s-component-selector('coco',null,'active') // => '.my-component__coco--active' // if setting.selector.method === 'SMACCS' s-component-selector('item') // => '.my-component-item' s-component-selector(null, 'red') // => '.my-component-red' s-component-selector('coco',null,'active') // => '.my-component-coco.is-active' } // if target the same element with & : \@include s-component('my-component') { s-component-selector(, red, , "color") { &s-component-selector("&", , "active") { // something here... } } } @author Olivier Bossel */ /** Return the name of the top level component setted with the [../mixins/_s-component.scss] mixin @param {String} [$default=null] The name to return if no top component name exist @return {String} The component name @example s-component('hello') // => 'hello' \@include s-component('my-component') { s-component('hello') // => 'my-component' \@include s-component('another-component') { s-component('hello') // => 'my-component' } } @author Olivier Bossel ; */ /** Convert a passed value to the wanted unit The conversion between some units that depends on a font-size will take the settings.typo.font-size value as reference. Available conversions - from px - to em - to rem - to pt - to % - from em - to rem - to px - to pt - to % - from pt - to em - to rem - to px - to pt - to % - from rem - to em - to px - to pt - to % @param {Number} $value The value to convert @param {String} $unit The unit in which to convert the value @return {Number} The converted value @example // if the settings.typo.font-size === 16px s-convert(24px, rem) // 1.5rem s-convert(3rem, pt) // 36pt @author Olivier Bossel */ /** Transform a dash notation value into a map Dash notation value is : -key1 value1 -key2 value2 @param {List} $dash The dash list notation to transform @return {Map} The map generated @example $dash : -hello world -coco universe s-dash-to-map($dash); // ( // hello : world, // coco : universe // ) @author Olivier Bossel */ /** Convert the passed value to em @param {Number} $value The value to convert @return {Number} The em converted value @author Olivier Bossel */ /** Convert the passed value to the closest even value @param {Number} $value The value to convert @return {Number} The closest even converted value @author Olivier Bossel */ /** Take a filter as parameter and parse it to return the {Map} corresponding The $filter parameter can be either a registered filter name or a filter formated like `filterName(filterValue)` @param {List} $filter The registered filter name or the filter string to transform into map @return {Map} The corresponding filter map properties @example // register a filter \@include s-setup(( filters : ( myCoolFilter : box-shadow(#000 0 0 10px) blur(30px), // other filters... ) )); // registered filter s-filter-map(myCoolFilter); // { // box-shadow : #000 0 0 10px, // blur : 30px // } // custom filter s-filter-map(blur(10px)); // { // blur : 10px // } @author Olivier Bossel */ /** Return a list with all the filters that are passed as argument This will use the [./_s-filter-map.scss] function to parse the filters @param {List} $filters The registered filter(s) name(s) or the filter(s) string(s) to transform into list @return {List} The converted filters list to use as css property @example // register a filter \@include s-setup(( filters : ( myCoolFilter : box-shadow(#000 0 0 10px) blur(30px), // other filters... ) )); // registered filter .my-cool-elememt { filter : s-filter(myCoolFilter); // filter : box-shadow(#000 0 0 10px) blur(30px); } // custom filter .my-cool-element { filter : s-filter(myCoolFilter invert(100%)); // filter : box-shadow(#000 0 0 10px) blur(30px) invert(100%); } @author Olivier Bossel */ /** Return the font-family string or a registered font @param {String} $name The name of the registered font @return {String} The corresponding font-family property to set in your css @example // register a font \@include s-setup(( fonts : ( myCoolFont : ( font-family : 'Helvetica Neue', font-weight : 'bold', // etc... ), // other fonts... ) )); // apply the font .my-cool-element { font-family : s-font-family(myCoolFont); // font-family : 'Helvetica Neue'; } @author Olivier Bossel */ /** Return the font {Map} that correspond to the passed arguments @param {String} [$family=null] The font family wanted (can be a registered font name) @param {Color} [$color=null] The color wanted (can be a registered color name) @param {Number} [$size=null] The font-size wanted @param {String} [$style=null] The font-style wanted @param {String} [$variant=null] The font-variant wanted @param {String}{Number} [$weight=null] The font-weight wanted @param {String} [$decoration=null] The text-decoration wanted @param {String} [$align=null] The text-align wanted @param {String} [$transform=null] The text-transform wanted @param {String} [$stretch=null] The font-stretch wanted @param {String} [$white-space=null] The white-space wanted @param {Number} [$height=null] The line-height wanted @param {Number} [$spacing=null] The letter-spacing wanted @param {Number} [$indent=null] The text-indent wanted @param {String} [$break=null] The line-break wanted @param {String} [$wrap=null] The word-wrap wanted @return {Map} The corresponding font map @example s-font( $family : 'Helvetica Neue', $size : 12px, $wrap : norwap ); // ( font-family : 'Helvetica Neue', font-size : 12px, word-wrap : nowrap // ) @author Olivier Bossel */ /** Return the specified or calculated value of the given stack and size depending on the settings.sizes ratios stack @param {Map} $stack The stack from which to interpolate the value @param {String} $size The size wanted (has to exist in the settings.sizes stack) @return {Number} The $stack.$size value or the interpolated one depending on the settings.sizes ratios @example // settings.sizes \@include s-setup(( sizes : ( small : 0.5, default : 1, // default is ALWAYS 1 big : 1.5 ) )); $myStack : ( default : 3rem, big : 6rem ) s-interpolate($myStack, big) // 6rem cause specified in the $myStack value s-interpolate($myStack, small) // 1.5rem => calculated like : 3rem * 0.5 = 1.5rem @author Olivier Bossel */ /** Check if the passed value is of a certain type Here's the available types that you can check - mixed => mean anything - null - url - px - pt - rem - em - percent | % - vw - vh - ex - ch - cm - mm - in - pc - s | second - boolean | bool - function - number - int | integer - string - color - list - map - deg | degree - list-{type} => check if is a list of the specified type - map-{type} => check if is a map of the specified type @param {Mixed} $value The value to check @param {String} $type The type to check @return {Boolean} true if match the type, false if not @example s-is(hello, string) // => true s-is('hello', string) // => true s-is(#fff, color) // => true s-is(hello #fff, list-color) // => false s-is(#fff #ddd, list-color) // => true // etc... @author Olivier Bossel */ /** Alias to the [./_s-look-and-feel.scss] function Return a settings.look-and-feel stack value @param {String} $name The look and feel value name @param {String} [$size=default] The size wanted. @return {Number} The look and feel value in em @example .my-cool-element { padding : s-lnf(padding-horizontal) s-lnf(padding-vertical); } @author Olivier Bossel */ /** Return a settings.look-and-feel stack value @param {String} $name The look and feel value name @param {String} [$size=default] The size wanted. @return {Number} The look and feel value in em @example .my-cool-element { padding : s-look-and-feel(padding-horizontal) s-look-and-feel(padding-vertical); } @author Olivier Bossel */ /** Convert the passed value to the closest odd value @param {Number} $value The value to convert @return {Number} The closest odd converted value @author Olivier Bossel */ /** Parse a given string/list properties and return the Map corresponding to the Map description @param {List} $properties The properties to parse @param {Map} $descriptor The descriptor map to use to parse the properties @return {Map} The properties in map format @example s-parse-properties(10px hello -delay 20s, ( myNumber : Number, myOtherNumber : Number, myString : String, myCoolVar : String, delay : second )); // => ( // myNumber : 10px, // myString : hello, // delay : 20s // ) @author Olivier Bossel */ /** Convert the passed value to % @param {Number} $value The value to convert @return {Number} The % converted value @author Olivier Bossel */ /** Convert the passed value to pt @param {Number} $value The value to convert @return {Number} The pt converted value @author Olivier Bossel */ /** Convert the passed value to px @param {Number} $value The value to convert @return {Number} The px converted value @author Olivier Bossel */ /** Convert the passed value to rem @param {Number} $value The value to convert @return {Number} The rem converted value @author Olivier Bossel */ /** Return the passed values in the same unit but that has been even rounded on the corresponding px value This ensure that your passed value will be a round px value for final rander in the viewport @param {Number} $value The value to process @return {Number} The rounded value in same input unit but px rounded @example // if settings.typo.font-size == 16px s-render-round-even(5.2rem); // 1. transform to px values : 5.2 * 16px = 83.2px // 2. round even the px value : 84px // 3. transform to passed unit value : 84px / 16px = 5.25rem @author Olivier Bossel */ /** Return the passed values in the same unit but that has been odd rounded on the corresponding px value This ensure that your passed value will be a round px value for final rander in the viewport @param {Number} $value The value to process @return {Number} The rounded value in same input unit but px rounded @example // if settings.typo.font-size == 16px s-render-round-odd(5.2rem); // 1. transform to px values : 5.2 * 16px = 83.2px // 2. round odd the px value : 83px // 3. transform to passed unit value : 84px / 16px = 5.1875rem @author Olivier Bossel */ /** Return the passed values in the same unit but that has been rounded on the corresponding px value This ensure that your passed value will be a round px value for final rander in the viewport @param {Number} $value The value to process @return {Number} The rounded value in same input unit but px rounded @example // if settings.typo.font-size == 16px s-render-round(5.2rem); // 1. transform to px values : 5.2 * 16px = 83.2px // 2. round even the px value : 83px // 3. transform to passed unit value : 84px / 16px = 5.1875rem @author Olivier Bossel */ /** Search and replace tokens like colors #primary in a passed string, list or map Supported tokens types : 1. Colors : colorName @example s-replace-tokens(12px #primary hello #secondary); // > 12px #ddd hello #fff; @author Olivier Bossel */ /** Return a selector builded with the params passed, depending on the settings.selector.method base setting. @param {String} $block The block part of the selector @param {String} [$element=null] The element part of the selector @param {String} [$modifier=null] The modifier part of the selector @param {String} [$state=null] The state part of the selector @param {String} [$modifierName=null] The modifier name that will be used for webcomponent method like [$modifierName="$modifier"] @param {String} [$method=BEM] The method used to build the selector (BEM or SMACCS) @return {String} The generated class selector @example s-selector(my-component, item, null, active, null, BEM); // => .my-component__item--active s-selector(my-component, item, null, active, null, SMACCS); // => .my-component-item.is-active @author Olivier Bossel */ /** Return the selector method define at the top level with the the [../mixins/_s-selector-method.scss] mixin @param {String} [$default=settings.selector.method] The selector method to return if no top selector method exist @return {String} The selector method @example s-selector-method() // => settings.selector.method s-selector-method(BEM) // => BEM \@include s-selector-method(SMACCS) { s-selector-method(BEM) // => SMACCS \@include s-selector-method(WEBCOMPONENT) { s-selector-method() // => SMACCS } } @author Olivier Bossel ; */ /** Get a settings from the global settings stack @param {String} $path The setting path wanted separated by dots @param {String} [$context=s-context()] The context name to get the setting @return {Mixed} The setting value¨ @example $font-size : s-setting('typo.font-size'); // etc... @author Olivier Bossel */ /** Return a value interpolated from the settings.spaces stack @param {String} $size The space size wanted. Must exist in the settings.sizes stack @return {Number} The actual space value @example .my-cool-section { padding : s-pace(big); } @author Olivier Bossel */ /** Return a number without any units @param {Number} $number The number to process @return {Number} The number without units @example s-strip-units(12px); // => 12 s-strip-units(30rem); // => 30 @author Olivier Bossel */ /** Test an argument passed to a function or a mixin to ensure his type, value, etc... If the argument does not pass the test, an error will be thrown, unless the $check-only argument is true @param {String} $method The function/mixin name (debug purpose) @param {String} $argument The argument name to test (debug purpose) @param {List}{String} $type-or-values If string, the type(s) that the argument must match, if list, the possible values that the argument can take @param {Mixed} $value The actual argument value @param {Boolean} [$check-only=false] If this is true, will not thrown any error @return {Mixed} The value if ok, false if not @example \@mixin my-cool-mixin($argument1, $argument2) { $argument1 : s-test-argument(my-cool-mixin, argument1, string, $argument1); $argument2 : s-test-argument(my-cool-mixin, argument2, (hello,world,12), $argument2); } \@mixin my-cool-mixin(hello, world); // ok \@mixin my-cool-mixin(hello, universe); // throw an error \@mixin my-cool-mixin(12, world); // throw an error @author Olivier Bossel */ /** Take a transition as parameter and parse it to return the {Map} corresponding The $transition parameter can be either a registered transition name or a custom css transition like : all .2s ease-in-out 2s The $transition argument will be parsed with the [./_s-parse-properties.scss] function. @param {List} $transition The registered transition name or the transition string to transform into map @return {Map} The corresponding transition map properties @example // register a transition \@include s-setup(( transitions : ( fast : all .2s ease-in-out, // other transitions... ) )); // registered transition s-transition-map(fast); // { // property : all, // duration : .2s, // ease : ease-in-out // } // custom transition s-transition-map(fast -delay .5s); // { // property : all, // duration : .2s, // ease : ease-in-out, // delay : .5s // } @author Olivier Bossel */ /** Take a transition as parameter and parse it to return the {List} corresponding The $transitions parameter can be either a registered transition name or a custom css transition like : all .2s ease-in-out 2s The $transitions argument will be parsed with the [./_s-parse-properties.scss] function. @param {List} $transitions The registered transition(s) name(s) or the transition(s) strings(s) to transform into list @return {List} The corresponding transition list properties @example // register a transition \@include s-setup(( transitions : ( fast : all .2s ease-in-out 0s, // other transitions... ) )); // registered transition .my-cool-element { transition : s-transition(fast); // transition : all .2s ease-in-out 0s; } // custom transition .my-cool-element { transition : s-transition(fast -delay .5s, fast width ease-in); // transition : all .2s ease-in-out .5s, width .2s ease-in 0s; } @author Olivier Bossel */ /** Return the unit context if has been set by the [../mixins/_s-unit-context.scss] mixin @return {String} The unit context setted @author Olivier Bossel */ /** Return the generated vertical rhythme properties map calculated depending on the passed arguments @param {Number} [$font-size=settings.typo.font-size] The font size wanted @param {String} [$font-family=settings.typo.font-family] The font family to use @param {Number} [$line-height=null] The line height to use @param {Number} [$margin-top=0] The targeted margin-top @param {Number} [$margin-bottom=0] The targeted margin-bottom @param {Number} [$padding-top=0] The targeted padding-top @param {Number} [$padding-bottom=0] The targeted padding-bottom @param {List} [$margin=null] The targeted margin property @param {List} [$padding=null] The targeted padding property @param {List} [$border-top=null] The targeted border-top property @param {List} [$border-bottom=null] The targeted border-bottom property @param {Number} [$border-top-width=0] The targeted border-top-width property @param {Number} [$border-bottom-width=0] The targeted border-bottom-width property @param {Number} [$border=null] The targeted border property @param {Number} [$cap-height=null] The font cap-height used to calculate the vertical ryhthme @param {Boolean}{String}  [$calculate-height=false] If true|min-height|max-height|height, will return the corresponding absolute height value in the map @TODO example @see https://medium.com/written-in-code/aligning-type-to-baseline-the-right-way-using-sass-e258fce47a9b#.lck2lgbni @author Olivier Bossel */ /** Generic sugar function can return multiple settings types like: - any settings : s('settings.{path}') - look and feel : s('look-and-feel.{property}', $size) - s('lnf.{property}', $size) - space : s('space.{size}') - color : s('color.{name}', $modifier) - transition : s('transition.{name}') - filter : s('filter.{name}') @example $my-color : s('color.primary'); $my-transition : s('transition.fast'); $my-font-size : s('settings.typo.font.size') // etc... @author Olivier Bossel */ /** Print out the animation property calculated with the passed arguments This mixin support all the standard css animation properties like name, duration, delay, ease, direction and fill-mode. The $animations argument will be parsed with the [../functions/_s-parse-properties.scss] function. If you specify multiple animations at a time, this mixin will take care of the delay calculation for each animations and make them play one after another @param {List} $animations The animations wanted like : coco .2s ease-in-out reverse @example .my-cool-element { @include s-animation(my-animation 1s ease-in-out, another-animation 4s); // animation : my-animation 1s 0s ease-in-out 1 normal forwards, another-animation 4s 1s ease-in-out 1 normal forwards; } @author Olivier Bossel */ /** Print out all wanted registered classes like padding helpers, margin helpers, font helpers, etc... Available namespaces - `sugar.filter.{name}` : .fi-{name} - `sugar.transition.{name}` : .tr-{name} - `sugar.font.family.{name}` : .f-{name} - `sugar.margin.bottom.{size}` : .m-b-{size} - `sugar.margin.top.{size}` : .m-t-{size} - `sugar.margin.left.{size}` : .m-l-{size} - `sugar.margin.right.{size}` : .m-r-{size} - `sugar.margin.side.{size}` : .m-s-{size} - `sugar.padding.all.{size}` : .p-{size} - `sugar.padding.top.{size}` : .p-t-{size} - `sugar.padding.bottom.{size}` : .p-b-{size} - `sugar.padding.left.{size}` : .p-l-{size} - `sugar.padding.right.{size}` : .p-r-{size} - `sugar.padding.side.{size}` : .p-s-{size} - `sugar.size.{size}` : .s-{size} - `sugar.size.rel.{size}` : .s-{size}-rel - `sugar.padding.no.top` : .no-p-t - `sugar.padding.no.bottom` : .no-p-b - `sugar.padding.no.left` : .no-p-l - `sugar.padding.no.right` : .no-p-r - `sugar.padding.no.side` : .no-p-s - `sugar.margin.no.top` : .no-m-t - `sugar.margin.no.bottom` : .no-m-b - `sugar.margin.no.left` : .no-m-l - `sugar.margin.no.right` : .no-m-r - `sugar.margin.no.side` : .no-m-s - `sugar.color.{name}.color` .c-{name} - `sugar.color.{name}.bkg` : .bkg-{name} - `sugar.color.{name}.modifier.{mod-name}.color` : .c-{name}--{mod-name} - `sugar.color.{name}.modifier.{mod-name}.bkg` : .bkg-{name}--{mod-name} - `sugar.pull.left` : .pull-left - `sugar.pull.right` : .pull-right - `sugar.position.relative` : .relative - `sugar.position.absolute` : .absolute - `sugar.clear.left` : .clear-left - `sugar.clear.right` : .clear-right - `sugar.clear.both` : .clear - `sugar.display.show` : .show - `sugar.display.show-inline` : .show-inline - `sugar.display.hidden` : .hidden - `sugar.display.hide` : .hide - `sugar.display.visible` : .visible - `sugar.display.invisible` : .invisible - `sugar.display.visually-hidden` : .visually-hidden - `sugar.text.hidden` : .t-hidden - `sugar.text.truncate` : .t-truncate - `sugar.text.align.left` : .t-left - `sugar.text.align.right` : .t-right - `sugar.text.align.center` : .t-center - `sugar.text.align.justify` : .t-justify - `sugar.text.transform.lowercase` : .t-lowercase - `sugar.text.transform.uppercase` : .t-uppercase - `sugar.text.transform.capitalize` : .t-capitalize - `sugar.font.weight.bold` : .f-bold - `sugar.font.weight.lighter` : .f-lighter - `sugar.font.weight.bolder` : .f-bolder - `sugar.font.weight.normal` : .f-normal - `sugar.font.style.italic` : .f-italic - `sugar.font.style.oblique` : .f-oblique - `sugar.font.variant.small-caps` : .f-small-caps - `sugar.block.align.center` : .block-center - `sugar.clearfix.default` : .clearfix - `sugar.clearfix.float` : .clearfix-float - `sugar.clearfix.micro` : .clearfix-micro - `sugar.clearfix.overflow` : .clearfix-overflow - `sugar.clearfix.facebook` : .clearfix-facebook - `sugar.no-transitions` : .no-transitions - `sugar.clear-transitions` : .clear-transitions - `sugar.no-animations` : .no-animations - `sugar.clear-animations` : .clear-animations - `sugar.no-transmations` : .no-transmations - `sugar.clear-transmations` : .clear-transmations @param {List} $namespaces The classes namespaces wanted @example \@include s-classes(); // will print out all the classes \@include s-classes('sugar.font'); // will print all the font classes \@include s-classes('sugar.clearfix' 'sugar.pull'); // the clearfixes and the pull classes // etc... @author Olivier Bossel */ /** Print out the scoped color schema css @param {String} $name The color schema name @example \@include s-color-schema(light) { h1, h2 { color : white; } } // will print .cs-light h1, .cs-light h2 { color : white; } h1, h2 { \@include s-color-schema(light) { color : white; } } // will print .cs-light h1, h1.cs-light, .cs-light h2, h2.cs-light { color : white; } @author Olivier Bossel */ /** Set the name of the component that will be handled inside the mixin @param {String} [$name=null] The name of the component to set @param {String}{Map} [$context=null] A context name or map to use inside the mixin @example \@include s-component('my-component') { s-component('hello') // => 'my-component' \@include s-component('another-component') { s-component('hello') // => 'my-component' } } @author Olivier Bossel ; */ /** Register a context with a name to use it later @param {String} $name The context name @param {Map} $settings The settings to override for this context @example \@include s-context-setup(my-cool-context, ( look-and-feel : ( padding-vertical : ( default : 0.6em ) ) )); // using your context \@include s-context(my-cool-context) { s-look-and-feel(padding-vertical); // => 0.6em } @author Olivier Bossel */ /** Set a context to be used inside the mixin @param {String}{Map} $name-or-map The name of a registered context or a map @example // register a context \@include s-context-setup(my-cool-context, ( look-and-feel : ( padding-vertical : ( default : 0.6em ) ) )); // registered context \@include s-context(my-cool-context) { // your code here... } // inline context \@include s-context(( look-and-feel : ( padding-vertical : ( default : .3em ) ) )) { // your code here... } @author Olivier Bossel */ /** Print out a list with all the filters that are passed as argument This will use the [../functions/_s-filter-map.scss] function to parse the filters @param {List} $filters The registered filter(s) name(s) or the filter(s) string(s) to transform into list @example // register a filter \@include s-setup(( filters : ( myCoolFilter : box-shadow(#000 0 0 10px) blur(30px), // other filters... ) )); // registered filter .my-cool-elememt { \@include s-filter(myCoolFilter); // filter : box-shadow(#000 0 0 10px) blur(30px); } // custom filter .my-cool-element { \@include s-filter(myCoolFilter invert(100%)); // filter : box-shadow(#000 0 0 10px) blur(30px) invert(100%); } @author Olivier Bossel */ /** Helper to print a font-face @param {String} $font-family The font-family @param {String} $src The source url (only 1 extension) @param {List} [$extensions=woff2] The extensions list that you have available @param {String} [$font-weight=normal] The font-weight property @param {String} [$font-style=normal] The font-style property @example // if you have these extensions files : .woff .eot .woff2 \@include s-font-face( $name : my-cool-font, $src : '/fonts/my-font.eot', $extensions : eot woff woff2 ) @author Olivier Bossel */ /** Print all the fonts properties that correspond to the passed arguments @param {String} [$family=null] The font family wanted (can be a registered font name) @param {Color} [$color=null] The color wanted (can be a registered color name) @param {Number} [$size=null] The font-size wanted @param {String} [$style=null] The font-style wanted @param {String} [$variant=null] The font-variant wanted @param {String}{Number} [$weight=null] The font-weight wanted @param {String} [$decoration=null] The text-decoration wanted @param {String} [$align=null] The text-align wanted @param {String} [$transform=null] The text-transform wanted @param {String} [$stretch=null] The font-stretch wanted @param {String} [$white-space=null] The white-space wanted @param {Number} [$height=null] The line-height wanted @param {Number} [$spacing=null] The letter-spacing wanted @param {Number} [$indent=null] The text-indent wanted @param {String} [$break=null] The line-break wanted @param {String} [$wrap=null] The word-wrap wanted @return {Map} The corresponding font map @example .my-cool-elememt { \@include s-font( $family : 'Helvetica Neue', $size : 12px, $wrap : norwap ); // print font-family : 'Helvetica Neue', font-size : 12px, word-wrap : nowrap } @author Olivier Bossel */ /** Init the sugar toolkit. This has to be called **AFTER** all the [./_s-setup.scss] mixin call and **BEFORE** all the others sugar mixins and functions calls @example \@include s-init(); @author Olivier Bossel */ /** Register all the dynamic helper classes that depends on the settings, etc... This is used internaly @example \@include s-init-classes(); @author Olivier Bossel */ /** Register a helper class under a certain namespace @param {String} $classname The classname that will be printed out @param {String} $namespace The dots separated namespace under which the class will live @example \@include s-register-class(my-cool-class, 'my.cool.namespace') { background : pink; } \@include s-register-class(another-cool-class, 'my.another.namespace') { background : red; } // print out my helpers classes \@include s-classes('my'); @author Olivier Bossel */ /** Set the selector method that will be handled inside the mixin [See here](../_selector-methods.scss) for available selector methods @param {String} [$method=null] The selector method to set @example \@include s-selector-method(SMACCS) { s-selector-method(BEM) // => SMACCS \@include s-selector-method(WEBCOMPONENT) { s-selector-method() // => 'SMACCS' } } @author Olivier Bossel ; */ /** Setup sugar toolkit by overriding the default [settings](../_settings.scss) This has to be called **BEFORE** the [s-init mixin](./_s-init.scss) @param {Map}  $settings The settings to override @example \@include s-setup(( typo : ( font-size : 12px ), sizes : ( small : 0.5, big : 1.5 ) )); // this mixin can be called as many times as you need // this allows you to separate your configs setup into multiple // files... @author Olivier Bossel */ /** Display the vertical rhythme @param {Color} The color wanted @example body { @include s-show-vertical-rhythme(); } @author Olivier Bossel */ /** Take a transition as parameter and print the corresponding transition property The $transitions parameter can be either a registered transition name or a custom css transition like : all .2s ease-in-out 2s The $transitions argument will be parsed with the [./_s-parse-properties.scss] function. @param {List} $transitions The registered transition(s) name(s) or the transition(s) strings(s) to transform into list @return {List} The corresponding transition list properties @example // register a transition \@include s-setup(( transitions : ( fast : all .2s ease-in-out 0s, // other transitions... ) )); // registered transition .my-cool-element { \@include s-transition(fast>); // transition : all .2s ease-in-out 0s; } // custom transition .my-cool-element { \@include s-transition(fast -delay .5s, fase width ease-in); // transition : all .2s ease-in-out .5s, width .2s ease-in 0s; } @author Olivier Bossel */ /** Set the unit context to use inside the mixin. This mean that if you set a unit context, then get a number setting through the [s-setting function](../functions/_s-setting.scss), The value that will be returned will be converted into the unit context if possible @param {String} $unit The unit wanted @example // if settings.typo.font-size == 16px s-setting('typo.font-size'); // => 16px \@incluse s-unit-context(rem) { s-setting('typo.font-size'); // => 1rem } @author Olivier Bossel */ /** Print out the vertical rhythme properties map calculated depending on the passed arguments @param {Number} [$font-size=settings.typo.font-size] The font size wanted @param {String} [$font-family=settings.typo.font-family] The font family to use @param {Number} [$line-height=null] The line height to use @param {Number} [$margin-top=0] The targeted margin-top @param {Number} [$margin-bottom=0] The targeted margin-bottom @param {Number} [$padding-top=0] The targeted padding-top @param {Number} [$padding-bottom=0] The targeted padding-bottom @param {List} [$margin=null] The targeted margin property @param {List} [$padding=null] The targeted padding property @param {List} [$border-top=null] The targeted border-top property @param {List} [$border-bottom=null] The targeted border-bottom property @param {Number} [$border-top-width=0] The targeted border-top-width property @param {Number} [$border-bottom-width=0] The targeted border-bottom-width property @param {Number} [$border=null] The targeted border property @param {Number} [$cap-height=null] The font cap-height used to calculate the vertical ryhthme @param {Boolean}{String}  [$calculate-height=false] If true|min-height|max-height|height, will return the corresponding absolute height value in the map @TODO example @see https://medium.com/written-in-code/aligning-type-to-baseline-the-right-way-using-sass-e258fce47a9b#.lck2lgbni @author Olivier Bossel */ /** This file is responsible to register the static helper classes like pull-right, clear, etc... @author Olivier Bossel */ .pull-left { float: left; } .pull-right { float: right; } .relative { position: relative; } .absolute { position: absolute; } .clear-left { clear: left; } .clear-right { clear: right; } .clear { clear: both; } .show { display: block; } .show-inline { display: inline-block; } .hidden { display: none; } .hide { display: none; } .visible { visibility: visible; } .invisible { visibility: hidden; } .visually-hidden { margin: -1px; padding: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip: rect(0, 0, 0, 0); position: absolute; } .t-hidden { overflow: hidden; text-indent: -9000px; display: block; } .t-truncate { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .t-truncate > * { text-overflow: ellipsis; overflow: hidden; } .t-left { text-align: left; } .t-right { text-align: right; } .t-center { text-align: center; } .t-justify { text-align: justify; } .t-lowercase { text-transform: lowercase; } .t-uppercase { text-transform: uppercase; } .t-capitalize { text-transform: capitalize; } .f-bold, .read-more-block:after, .read-more--block:after { font-weight: bold; } .f-lighter { font-weight: lighter; } .f-bolder { font-weight: bolder; } .f-normal { font-weight: normal; font-style: normal; } .f-italic { font-style: italic; } .f-oblique { font-weight: oblique; } .f-small-caps { font-variant: small-caps; } .block-center { display: block; margin-left: auto; margin-right: auto; } .no-transitions, .no-transitions:before, .no-transitions:after { -webkit-transition: none !important; transition: none !important; } .clear-transitions, .clear-transitions:before, .clear-transitions:after, .clear-transitions *, .clear-transitions *:before, .clear-transitions *:after { -webkit-transition: none !important; transition: none !important; } .no-animations, .no-animations:before, .no-animations:after { -webkit-animation: none !important; animation: none !important; } .clear-animations, .clear-animations:before, .clear-animations:after, .clear-animations *, .clear-animations *:before, .clear-animations *:after { -webkit-animation: none !important; animation: none !important; } .no-transmations, .no-transmations:before, .no-transmations:after { -webkit-transition: none !important; transition: none !important; -webkit-animation: none !important; animation: none !important; } .clear-transmations, .clear-transmations:before, .clear-transmations:after, .clear-transmations *, .clear-transmations *:before, .clear-transmations *:after { -webkit-transition: none !important; transition: none !important; -webkit-animation: none !important; animation: none !important; } /** This file contains all the default settings that can be overrided by the [s-setup mixin](./mixins/_s-setup.scss). @author Olivier Bossel */ /** Create an arrow bubble effect @param {String} [$side=bottom] The side (top,right,bottom,left) @param {String} [$align=center] The alignement (left,center,right,top,middle,bottom) @param {Number} [$size=10px] The size of the arrow @param {Color} [$color=s-color(primary)] The color of the bubble @param {Number} [$arrow-offset=10px] The arrow offset from the side of the bubble @param {Number} [$border-width=0] The border width of the bubble @param {Color} [$border-color=null] The border color of the bubble @example .my-cool-bubble { \@include s-bubble( $color : s-color(secondary) ); color : white; } @see https://codepen.io/kirkas/pen/otqyJ @author Olivier Bossel */ /** Generate a drop shadow depending on the depth specified @param {Integer} $depth The depth wanted (1,2,3,4,etc...) @param {Color} [$color=rgba(0,0,0,.2)] The drop shadow color @example .my-cool-element { \@include s-depth(2); } @author Olivier Bossel */ /** Create a poping dot effect to catch user attention on a particular item This mixin affect the :before and :after pseudo selector of the item @param {String} [$vertical-align=top] Where to put the dot verticaly (top,middle,bottom) @param {String} [$align=left] Where to put the dot horizontaly (left,center,right) @param {Number} [$size=20px] The size of the dot @param {Color} [$color=primary] The color of the dot @param {Number} [$offset-top=0] The offset top @param {Number} [$offset-right=0] The offset right @param {Number} [$offset-bottom=0] The offset bottom @param {Number} [$offset-left=0] The offset left @example .my-cool-element { \@include s-hey( $align : right, $color : secondary, $size : 10px, $offset-top : -10px, $offset-right : -10px ); } @author Olivier Bossel */ /** Generate a full animated, single element, bars loader @param {String} [$shape=rect] The shape of the bars (rect,circle) @param {Color} [$color=primary] The color(s) of the loader. Can be a list of colors @param {Number} [$width=.5em] The width of each bars @param {Number} [$height=2em] The height of each bars @param {Integer} [$count=5] How many bars you want @param {Number} [$gap=.5em] The gap between each bars @param {Number} [$opacity=1] The initial opacity of each bars @param {Number} [$a-opacity=null] The opacity of the animated bars @param {Second} [$a-duration=1s] The overall animation duration @param {Second} [$a-delay=0s] The delay between two animation cycle @param {Integer} [$a-near=1] How many bars are affected by the animated one @param {String} [$a-ease=ease-in-out] The ease to use to animate each bars @param {Number} [$a-offset=null] The offset to move the animated bar @param {String} [$a-direction=both] The direction in which to move the bars (up,down,both) @param {Boolean} [$a-continuous=true] If true, the first bars will be animated at same time at the last ones @example .my-cool-loader { \@include s-loader-bars( $color : primary, $a-offset : .5em ); } @author Olivier Bossel */ /** Generate a full animated, single element, circle loader @param {Color} [$color=primary] The color(s) of the loader. Can be a list of colors @param {Number} [$size=.33em] The size of each dot @param {Number} [$radius=1em] The distance of each dot from the center of the loader @param {Integer} [$count=5] How many bars you want @param {Number} [$opacity=1] The initial opacity of each bars @param {Number} [$a-opacity=null] The opacity of the animated bars @param {Second} [$a-duration=1s] The overall animation duration @param {Second} [$a-delay=0s] The delay between two animation cycle @param {Integer} [$a-near=1] How many bars are affected by the animated one @param {String} [$a-ease=ease-in-out] The ease to use to animate each bars @TODO finish documentation @author Olivier Bossel */ /** Generate a full animated, single element, couch-potato style loader @param {Number} [$size=1em] The size of the loader @param {Color} [$color=primary] The color of the loader @param {Second} [$a-duration=1s] The overall animation duration @param {Second} [$a-delay=0s] The delay between two animation cycle @param {String} [$a-ease=ease-in-out] The ease to use for the animation @param {Degree} [$a-rotate=360deg] The animation rotation @param {Number} [$a-scale=.7] The animation scale @example .my-cool-loader { \@include s-loader-couch-potato(); } @author Olivier Bossel */ /** Generate a full animated, single element, flip ball style loader @param {String} [$shape=circle] The shape of the loader (circle,rect) @param {Number} [$size=1em] The size of the loader @param {Color} [$color=primary] The color of the loader. Can be a list of colors @param {Second} [$a-duration=1s] The overall animation duration @param {Second} [$a-delay=0s] The delay between two animation cycle @param {String} [$a-ease=ease-in-out] The ease to use for the animation @example .my-cool-loader { \@include s-loader-flip-ball(); } @author Olivier Bossel */ /** Generate a long shadow effect like [this](https://www.google.ch/search?q=long+shadow&espv=2&biw=2560&bih=1316&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjjne6x49LPAhVBHRQKHat8AW8Q_AUIBigB) @param {Color} [$color=rgba(0,0,0,.3)] The shadow color @param {String} [$type=text] The shadow type (text,box) @param {Degree} [$angle=135deg] The shadow angle @param {Integer} [$depth=20] The shadow depth @param {Boolean} [$fade=false] If true, the shadow will fade itself @param {Number} [$blur=0] The blur amount of the shadow @param {Number} [$blur-ratio=0] The ratio to blur each depth more @example .my-cool-title { \@include s-long-shadow( $depth : 10 ); } .my-cool-box { \@include s-long-shadow( $type : box ); } @author Olivier Bossel */ /** Create side lines around an item @param {String} [$style=solid] The line style, same possible values as the border-style property @param {String} [$side=both] The side where to put lines (left,right,both) @param {Number} [$height=1px] The lines height @param {Number} [$width=50%] The width of the lines @param {Color} [$color=text] The color of the lines @param {Number} [$padding=0] The padding between the lines and the content @param {Number} [$offset-top=null] The line offset top @example h1 { \@include s-side-lined( $padding : 20px, $side : right, $width : 100% ); } @author Olivier Bossel */ /** Load all components */ /** 04-03-2017 Xavier As I have better thing to do than fix a f*cking poorly designed architecture just know that the no-touch classname is injected in the Alpadia template (in the main JS file) That allows to detect no touch device and set the hover style only on this case. Because there is a trouble with link on iOS devices: The first touch is for the hover, the second for the link's actions... Youhouhou Have fun with Sugar.. */ button { line-height: 1; } /** Load all components */ @-webkit-keyframes s-ripple { 0% { opacity: 1; -webkit-transform: translateX(-50%) translateY(-50%) scale(0, 0); transform: translateX(-50%) translateY(-50%) scale(0, 0); } 100% { opacity: 0; -webkit-transform: translateX(-50%) translateY(-50%) scale(1, 1); transform: translateX(-50%) translateY(-50%) scale(1, 1); } } @keyframes s-ripple { 0% { opacity: 1; -webkit-transform: translateX(-50%) translateY(-50%) scale(0, 0); transform: translateX(-50%) translateY(-50%) scale(0, 0); } 100% { opacity: 0; -webkit-transform: translateX(-50%) translateY(-50%) scale(1, 1); transform: translateX(-50%) translateY(-50%) scale(1, 1); } } @-webkit-keyframes infinite-rotate { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes infinite-rotate { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes nav-circle-appear { from { -webkit-transform: translateX(0) translateY(-20px) translateZ(0); transform: translateX(0) translateY(-20px) translateZ(0); opacity: 0; } to { -webkit-transform: translateX(0) translateY(0) translateZ(0); transform: translateX(0) translateY(0) translateZ(0); opacity: 1; } } @keyframes nav-circle-appear { from { -webkit-transform: translateX(0) translateY(-20px) translateZ(0); transform: translateX(0) translateY(-20px) translateZ(0); opacity: 0; } to { -webkit-transform: translateX(0) translateY(0) translateZ(0); transform: translateX(0) translateY(0) translateZ(0); opacity: 1; } } /* # GRIDLE vars Define the gridle configuration vars For the documentation check : http://gridle.org/ */ /* TOOLS Load all files of level: 02_tools folder (clearfix, helpers, ...) Comments for these level can be upgraded... ---------------------------------------*/ /** Mixin */ /** to get an element width 100% apply the .auto-width class */ .autowidth { width: 100%; height: auto; } @media screen and (max-width: 640px) { .autowidthmobile { width: 100%; height: auto; } } @media screen and (min-width: 641px) and (max-width: 1023px) { .autowidthtablet { width: 100%; height: auto; } } @media screen and (max-width: 1023px) { .autowidthmoblet { width: 100%; height: auto; } } @media screen and (min-width: 1024px) { .autowidthdesktop { width: 100%; height: auto; } } @media screen and (min-width: 1200px) { .autowidthlarge-desktop { width: 100%; height: auto; } } @media (max-height: 700px) { .autowidthheight-small { width: 100%; height: auto; } } @media (max-height: 900px) { .autowidthheight-medium { width: 100%; height: auto; } } @media (min-height: 901px) { .autowidthheight-big { width: 100%; height: auto; } } /**/ /** Calc */ /** Absolute cover */ /** Abs-contain */ /** Images */ .img-cover { background-size: cover; background-position: 50% 50%; } /** Fix picture scale */ /* GENERIC ---------------------------------------*/ /** These are far reaching styles that affect and underpin every element on the page, e.g. `* {}`. */ /* GENERIC Load all files of level : 03_generics folder (import gridle and fonts, icons, general proprietes like box-sizing, ...) Icons file is generated by grunt! So check /assets-src/fonts/icons.html for full list of icons. For the intern doc: 03_generic/_generics.scss and ---------------------------------------*/ /** Color schema */ .cs-light { color: white; } .cs-light .h1, .cs-light .text-format h1, .text-format .cs-light h1, .cs-light .h2, .cs-light .text-format h2, .text-format .cs-light h2, .cs-light .markdown-format h1, .markdown-format .cs-light h1, .cs-light .h3, .cs-light .text-format h3, .text-format .cs-light h3, .cs-light .markdown-format h2, .markdown-format .cs-light h2, .cs-light .h4, .cs-light .text-format h4, .text-format .cs-light h4, .cs-light .markdown-format h3, .markdown-format .cs-light h3, .cs-light .h5, .cs-light .text-format h5, .text-format .cs-light h5, .cs-light .markdown-format h4, .markdown-format .cs-light h4, .cs-light .h6, .cs-light .text-format h6, .text-format .cs-light h6, .cs-light .markdown-format h5, .markdown-format .cs-light h5, .cs-light .p, .cs-light a, .cs-light [class*="icon-"] { color: white; } .cs-light .btn:hover { color: white !important; } .cs-dark { color: #293746; } .cs-dark .h1, .cs-dark .text-format h1, .text-format .cs-dark h1, .cs-dark .h2, .cs-dark .text-format h2, .text-format .cs-dark h2, .cs-dark .markdown-format h1, .markdown-format .cs-dark h1, .cs-dark .h3, .cs-dark .text-format h3, .text-format .cs-dark h3, .cs-dark .markdown-format h2, .markdown-format .cs-dark h2, .cs-dark .h4, .cs-dark .text-format h4, .text-format .cs-dark h4, .cs-dark .markdown-format h3, .markdown-format .cs-dark h3, .cs-dark .h5, .cs-dark .text-format h5, .text-format .cs-dark h5, .cs-dark .markdown-format h4, .markdown-format .cs-dark h4, .cs-dark .h6, .cs-dark .text-format h6, .text-format .cs-dark h6, .cs-dark .markdown-format h5, .markdown-format .cs-dark h5, .cs-dark .p, .cs-dark a, .cs-dark [class*="icon-"] { color: #293746; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after { content: ''; content: none; } q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } .s-settings:after { content: '{"unit": "rem", "reset": true, "border-box": true, "sizes": {"smaller": 0.6, "small": 0.8, "default": 1, "medium": 1.5, "big": 2, "bigger": 3}, "typo": {"font-family": "open-sans-normal", "font-size": "16px", "font-sizes": null, "line-letters-count": 55, "font-format": {"eot": "embedded-opentype", "woff2": "woff2", "woff": "woff", "ttf": "truetype", "otf": "opentype", "svg": "svg", "svgz": "svgz"}}, "look-and-feel": {"border-radius": {"default": "0em"}, "padding-vertical": {"default": "1em"}, "padding-horizontal": {"default": "1.2em"}, "font-size": {"default": "1em", "smaller": "0.6em", "small": "0.8em", "medium": "1.5em", "big": "2em", "bigger": "3em"}, "disabled-opacity": {"default": 0.5}}, "spaces": {"default": "20px"}, "colors": {"default": "#f8f9fb", "text": {"color": "#293746"}, "link": {"color": "primary"}, "primary": {"color": "#ec0928", "modifiers": {"dark": "#d3031d", "light": ["-lighten", "10%"]}}, "secondary": "#293746", "success": {"color": "#2fd683"}, "warning": {"color": "#f7c80c"}, "error": {"color": "#d9534f"}, "info": {"color": "#2199e8"}, "tuition": {"color": "#e6dfcd", "modifiers": {"dark": ["-darken", "10%"], "light": ["-lighten", "10%"]}}, "adult": {"color": "#003087", "modifiers": {"ondark": "#4e6cb0"}}, "junior": {"color": "#00a8e2", "modifiers": {"dark": ["-darken", "10%"], "light": "#f5f7fa"}}, "lightblue": {"color": "#F8F9FB", "modifiers": {"dark": "#ebedf1", "light": "#f9fbfe"}}, "lightgrey": {"color": "#F8F9FB", "modifiers": {"dark": "#f5f7fa", "light": "#fbfbfb"}}, "grey": {"color": "#cad3db"}, "darkgrey": {"color": "#4d5054", "modifiers": {"dark": "#293746", "light": "#65696e"}}, "white": {"color": "#ffffff"}, "border": {"color": "#ecf0f4"}, "twitter": {"color": "#55acee"}, "facebook": {"color": "#3b5998"}, "linkedin": {"color": "#0976b4"}, "googleplus": {"color": "#dd4b39"}, "pinterest": {"color": "#cc2127"}}, "vertical-rhythme": {"enabled": true, "scope-class": ["vr", "text-format"], "no-vertical-rhythme-class": false}, "selector": {"method": "BEM"}, "BEM": {"standelone-modifier": false, "element-separator": "__", "modifier-separator": "--"}, "modular-scale": {"base": "1rem", "ratio": 1.618034, "range": null, "fluid": false}, "fonts": {"default": {"font-family": ["Helvetica Neue", "Helvetica", "Verdana", "Arial", "sans-serif"], "font-weight": "normal", "cap-height": 0.65}, "code": {"font-family": ["Menlo", "Monaco", "Consolas", "Courier New", "monospace"], "font-weight": "normal", "cap-height": 0.65}, "open-sans-light": {"font-family": ["Open Sans", "sans-serif"], "font-weight": 300}, "open-sans-normal": {"font-family": ["Open Sans", "sans-serif"], "font-weight": 400}, "open-sans-semibold": {"font-family": ["Open Sans", "sans-serif"], "font-weight": 600}, "open-sans-bold": {"font-family": ["Open Sans", "sans-serif"], "font-weight": 700}, "lobster": {"font-family": ["Lobster", "cursive"], "font-weight": 400}, "lobster-two": {"font-family": ["Lobster Two", "cursive"], "font-weight": 400}}, "filters": {"shadow": "box-shadow(#text 0 0 32px)", "shadowed-text": "drop-shadow(rgba(0, 0, 0, 0.5) 0 0 10px)"}, "transitions": {"default": ["all", "0.2s", "ease-in-out", "0s"], "fast": ["all", "0.1s", "ease-in-out", "0s"], "slow": ["all", "0.4s", "ease-in-out", "0s"]}}'; display: none; } html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } html { font-size: 16Px; font-family: "Open Sans", sans-serif; font-weight: 400; } body { color: #293746; } /* # GRIDLE check in 01_setup/_gridle.scss for the variables configuration For the documentation check : http://gridle.org/ # Init * import the gridle file * set default states : mobile, tablet, desktop * generate additional classes to use in html @include gridle_register_default_states(); @include gridle_generate_classes(); */ .container:after { content: ""; display: table; clear: both; } .row, .row-reverse { height: inherit; } .row:before, .row-reverse:before, .row:after, .row-reverse:after { content: ""; display: table; } .row:after, .row-reverse:after { clear: both; } .row, .row-reverse { zoom: 1; } .gr-1-5, .gr-0, .gr-1, .gr-2, .gr-3, .gr-4, .gr-5, .gr-6, .gr-7, .gr-8, .gr-9, .gr-10, .gr-11, .gr-12, .list--sitemap > li { display: inline-block; height: inherit; line-height: 1; float: left; box-sizing: border-box; vertical-align: top; padding-right: 10px; padding-left: 10px; } .gr-adapt { display: table-cell; width: 1px; white-space: nowrap !important; line-height: 1; box-sizing: border-box; padding-right: 10px; padding-left: 10px; } .gr-grow { display: table-cell; width: 99999px; line-height: 1; box-sizing: border-box; padding-right: 10px; padding-left: 10px; } .push-1-5, .push-0, .push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12 { position: relative; } .pull-1-5, .pull-0, .pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11, .pull-12 { position: relative; } .nowrap { white-space: nowrap; } .nowrap > * { white-space: normal; } .wrap { white-space: normal; } .gr-centered { display: block !important; float: none !important; margin-left: auto !important; margin-right: auto !important; clear: both !important; } @media screen and (max-width: 640px) { .container\@mobile:after { content: ""; display: table; clear: both; } } @media screen and (max-width: 640px) { .row\@mobile, .row-reverse\@mobile { height: inherit; } .row\@mobile:before, .row-reverse\@mobile:before, .row\@mobile:after, .row-reverse\@mobile:after { content: ""; display: table; } .row\@mobile:after, .row-reverse\@mobile:after { clear: both; } .row\@mobile, .row-reverse\@mobile { zoom: 1; } } @media screen and (max-width: 640px) { .gr-1-5\@mobile, .gr-0\@mobile, .gr-1\@mobile, .gr-2\@mobile, .gr-3\@mobile, .gr-4\@mobile, .gr-5\@mobile, .gr-6\@mobile, .gr-7\@mobile, .gr-8\@mobile, .gr-9\@mobile, .gr-10\@mobile, .gr-11\@mobile, .gr-12\@mobile { display: inline-block; height: inherit; line-height: 1; float: left; box-sizing: border-box; vertical-align: top; padding-right: 10px; padding-left: 10px; } } @media screen and (max-width: 640px) { .gr-adapt\@mobile { display: table-cell; width: 1px; white-space: nowrap !important; line-height: 1; box-sizing: border-box; padding-right: 10px; padding-left: 10px; } } @media screen and (max-width: 640px) { .gr-grow\@mobile { display: table-cell; width: 99999px; line-height: 1; box-sizing: border-box; padding-right: 10px; padding-left: 10px; } } @media screen and (max-width: 640px) { .push-1-5\@mobile, .push-0\@mobile, .push-1\@mobile, .push-2\@mobile, .push-3\@mobile, .push-4\@mobile, .push-5\@mobile, .push-6\@mobile, .push-7\@mobile, .push-8\@mobile, .push-9\@mobile, .push-10\@mobile, .push-11\@mobile, .push-12\@mobile { position: relative; } } @media screen and (max-width: 640px) { .pull-1-5\@mobile, .pull-0\@mobile, .pull-1\@mobile, .pull-2\@mobile, .pull-3\@mobile, .pull-4\@mobile, .pull-5\@mobile, .pull-6\@mobile, .pull-7\@mobile, .pull-8\@mobile, .pull-9\@mobile, .pull-10\@mobile, .pull-11\@mobile, .pull-12\@mobile { position: relative; } } @media screen and (max-width: 640px) { .nowrap\@mobile { white-space: nowrap; } .nowrap\@mobile > * { white-space: normal; } } @media screen and (max-width: 640px) { .wrap\@mobile { white-space: normal; } } @media screen and (max-width: 640px) { .gr-centered\@mobile { display: block !important; float: none !important; margin-left: auto !important; margin-right: auto !important; clear: both !important; } } @media screen and (min-width: 641px) and (max-width: 1023px) { .container\@tablet:after { content: ""; display: table; clear: both; } } @media screen and (min-width: 641px) and (max-width: 1023px) { .row\@tablet, .row-reverse\@tablet { height: inherit; } .row\@tablet:before, .row-reverse\@tablet:before, .row\@tablet:after, .row-reverse\@tablet:after { content: ""; display: table; } .row\@tablet:after, .row-reverse\@tablet:after { clear: both; } .row\@tablet, .row-reverse\@tablet { zoom: 1; } } @media screen and (min-width: 641px) and (max-width: 1023px) { .gr-1-5\@tablet, .gr-0\@tablet, .gr-1\@tablet, .gr-2\@tablet, .gr-3\@tablet, .gr-4\@tablet, .gr-5\@tablet, .gr-6\@tablet, .gr-7\@tablet, .gr-8\@tablet, .gr-9\@tablet, .gr-10\@tablet, .gr-11\@tablet, .gr-12\@tablet { display: inline-block; height: inherit; line-height: 1; float: left; box-sizing: border-box; vertical-align: top; padding-right: 10px; padding-left: 10px; } } @media screen and (min-width: 641px) and (max-width: 1023px) { .gr-adapt\@tablet { display: table-cell; width: 1px; white-space: nowrap !important; line-height: 1; box-sizing: border-box; padding-right: 10px; padding-left: 10px; } } @media screen and (min-width: 641px) and (max-width: 1023px) { .gr-grow\@tablet { display: table-cell; width: 99999px; line-height: 1; box-sizing: border-box; padding-right: 10px; padding-left: 10px; } } @media screen and (min-width: 641px) and (max-width: 1023px) { .push-1-5\@tablet, .push-0\@tablet, .push-1\@tablet, .push-2\@tablet, .push-3\@tablet, .push-4\@tablet, .push-5\@tablet, .push-6\@tablet, .push-7\@tablet, .push-8\@tablet, .push-9\@tablet, .push-10\@tablet, .push-11\@tablet, .push-12\@tablet { position: relative; } } @media screen and (min-width: 641px) and (max-width: 1023px) { .pull-1-5\@tablet, .pull-0\@tablet, .pull-1\@tablet, .pull-2\@tablet, .pull-3\@tablet, .pull-4\@tablet, .pull-5\@tablet, .pull-6\@tablet, .pull-7\@tablet, .pull-8\@tablet, .pull-9\@tablet, .pull-10\@tablet, .pull-11\@tablet, .pull-12\@tablet { position: relative; } } @media screen and (min-width: 641px) and (max-width: 1023px) { .nowrap\@tablet { white-space: nowrap; } .nowrap\@tablet > * { white-space: normal; } } @media screen and (min-width: 641px) and (max-width: 1023px) { .wrap\@tablet { white-space: normal; } } @media screen and (min-width: 641px) and (max-width: 1023px) { .gr-centered\@tablet { display: block !important; float: none !important; margin-left: auto !important; margin-right: auto !important; clear: both !important; } } @media screen and (min-width: 1024px) { .container\@desktop:after { content: ""; display: table; clear: both; } } @media screen and (min-width: 1024px) { .row\@desktop, .row-reverse\@desktop { height: inherit; } .row\@desktop:before, .row-reverse\@desktop:before, .row\@desktop:after, .row-reverse\@desktop:after { content: ""; display: table; } .row\@desktop:after, .row-reverse\@desktop:after { clear: both; } .row\@desktop, .row-reverse\@desktop { zoom: 1; } } @media screen and (min-width: 1024px) { .gr-1-5\@desktop, .gr-0\@desktop, .gr-1\@desktop, .gr-2\@desktop, .gr-3\@desktop, .gr-4\@desktop, .gr-5\@desktop, .gr-6\@desktop, .gr-7\@desktop, .gr-8\@desktop, .gr-9\@desktop, .gr-10\@desktop, .gr-11\@desktop, .gr-12\@desktop { display: inline-block; height: inherit; line-height: 1; float: left; box-sizing: border-box; vertical-align: top; padding-right: 10px; padding-left: 10px; } } @media screen and (min-width: 1024px) { .gr-adapt\@desktop { display: table-cell; width: 1px; white-space: nowrap !important; line-height: 1; box-sizing: border-box; padding-right: 10px; padding-left: 10px; } } @media screen and (min-width: 1024px) { .gr-grow\@desktop { display: table-cell; width: 99999px; line-height: 1; box-sizing: border-box; padding-right: 10px; padding-left: 10px; } } @media screen and (min-width: 1024px) { .push-1-5\@desktop, .push-0\@desktop, .push-1\@desktop, .push-2\@desktop, .push-3\@desktop, .push-4\@desktop, .push-5\@desktop, .push-6\@desktop, .push-7\@desktop, .push-8\@desktop, .push-9\@desktop, .push-10\@desktop, .push-11\@desktop, .push-12\@desktop { position: relative; } } @media screen and (min-width: 1024px) { .pull-1-5\@desktop, .pull-0\@desktop, .pull-1\@desktop, .pull-2\@desktop, .pull-3\@desktop, .pull-4\@desktop, .pull-5\@desktop, .pull-6\@desktop, .pull-7\@desktop, .pull-8\@desktop, .pull-9\@desktop, .pull-10\@desktop, .pull-11\@desktop, .pull-12\@desktop { position: relative; } } @media screen and (min-width: 1024px) { .nowrap\@desktop { white-space: nowrap; } .nowrap\@desktop > * { white-space: normal; } } @media screen and (min-width: 1024px) { .wrap\@desktop { white-space: normal; } } @media screen and (min-width: 1024px) { .gr-centered\@desktop { display: block !important; float: none !important; margin-left: auto !important; margin-right: auto !important; clear: both !important; } } @media screen and (min-width: 1200px) { .container\@large-desktop:after { content: ""; display: table; clear: both; } } @media screen and (min-width: 1200px) { .row\@large-desktop, .row-reverse\@large-desktop { height: inherit; } .row\@large-desktop:before, .row-reverse\@large-desktop:before, .row\@large-desktop:after, .row-reverse\@large-desktop:after { content: ""; display: table; } .row\@large-desktop:after, .row-reverse\@large-desktop:after { clear: both; } .row\@large-desktop, .row-reverse\@large-desktop { zoom: 1; } } @media screen and (min-width: 1200px) { .gr-1-5\@large-desktop, .gr-0\@large-desktop, .gr-1\@large-desktop, .gr-2\@large-desktop, .gr-3\@large-desktop, .gr-4\@large-desktop, .gr-5\@large-desktop, .gr-6\@large-desktop, .gr-7\@large-desktop, .gr-8\@large-desktop, .gr-9\@large-desktop, .gr-10\@large-desktop, .gr-11\@large-desktop, .gr-12\@large-desktop { display: inline-block; height: inherit; line-height: 1; float: left; box-sizing: border-box; vertical-align: top; padding-right: 10px; padding-left: 10px; } } @media screen and (min-width: 1200px) { .gr-adapt\@large-desktop { display: table-cell; width: 1px; white-space: nowrap !important; line-height: 1; box-sizing: border-box; padding-right: 10px; padding-left: 10px; } } @media screen and (min-width: 1200px) { .gr-grow\@large-desktop { display: table-cell; width: 99999px; line-height: 1; box-sizing: border-box; padding-right: 10px; padding-left: 10px; } } @media screen and (min-width: 1200px) { .push-1-5\@large-desktop, .push-0\@large-desktop, .push-1\@large-desktop, .push-2\@large-desktop, .push-3\@large-desktop, .push-4\@large-desktop, .push-5\@large-desktop, .push-6\@large-desktop, .push-7\@large-desktop, .push-8\@large-desktop, .push-9\@large-desktop, .push-10\@large-desktop, .push-11\@large-desktop, .push-12\@large-desktop { position: relative; } } @media screen and (min-width: 1200px) { .pull-1-5\@large-desktop, .pull-0\@large-desktop, .pull-1\@large-desktop, .pull-2\@large-desktop, .pull-3\@large-desktop, .pull-4\@large-desktop, .pull-5\@large-desktop, .pull-6\@large-desktop, .pull-7\@large-desktop, .pull-8\@large-desktop, .pull-9\@large-desktop, .pull-10\@large-desktop, .pull-11\@large-desktop, .pull-12\@large-desktop { position: relative; } } @media screen and (min-width: 1200px) { .nowrap\@large-desktop { white-space: nowrap; } .nowrap\@large-desktop > * { white-space: normal; } } @media screen and (min-width: 1200px) { .wrap\@large-desktop { white-space: normal; } } @media screen and (min-width: 1200px) { .gr-centered\@large-desktop { display: block !important; float: none !important; margin-left: auto !important; margin-right: auto !important; clear: both !important; } } @media screen and (max-width: 400px) { @-ms-viewport { width: device-width; } } .gr-1-5 { width: 20%; } .push-1-5 { left: 20%; right: auto; } .pull-1-5 { right: 20%; left: auto; } .prefix-1-5 { margin-left: 20%; } .suffix-1-5 { margin-right: 20%; } .gr-0 { width: 0%; } .push-0 { left: 0%; right: auto; } .pull-0 { right: 0%; left: auto; } .prefix-0 { margin-left: 0%; } .suffix-0 { margin-right: 0%; } .gr-1 { width: 8.33333333%; } .push-1 { left: 8.33333333%; right: auto; } .pull-1 { right: 8.33333333%; left: auto; } .prefix-1 { margin-left: 8.33333333%; } .suffix-1 { margin-right: 8.33333333%; } .gr-2 { width: 16.66666667%; } .push-2 { left: 16.66666667%; right: auto; } .pull-2 { right: 16.66666667%; left: auto; } .prefix-2 { margin-left: 16.66666667%; } .suffix-2 { margin-right: 16.66666667%; } .gr-3 { width: 25%; } .push-3 { left: 25%; right: auto; } .pull-3 { right: 25%; left: auto; } .prefix-3 { margin-left: 25%; } .suffix-3 { margin-right: 25%; } .gr-4 { width: 33.33333333%; } .push-4 { left: 33.33333333%; right: auto; } .pull-4 { right: 33.33333333%; left: auto; } .prefix-4 { margin-left: 33.33333333%; } .suffix-4 { margin-right: 33.33333333%; } .gr-5 { width: 41.66666667%; } .push-5 { left: 41.66666667%; right: auto; } .pull-5 { right: 41.66666667%; left: auto; } .prefix-5 { margin-left: 41.66666667%; } .suffix-5 { margin-right: 41.66666667%; } .gr-6 { width: 50%; } .push-6 { left: 50%; right: auto; } .pull-6 { right: 50%; left: auto; } .prefix-6 { margin-left: 50%; } .suffix-6 { margin-right: 50%; } .gr-7 { width: 58.33333333%; } .push-7 { left: 58.33333333%; right: auto; } .pull-7 { right: 58.33333333%; left: auto; } .prefix-7 { margin-left: 58.33333333%; } .suffix-7 { margin-right: 58.33333333%; } .gr-8 { width: 66.66666667%; } .push-8 { left: 66.66666667%; right: auto; } .pull-8 { right: 66.66666667%; left: auto; } .prefix-8 { margin-left: 66.66666667%; } .suffix-8 { margin-right: 66.66666667%; } .gr-9 { width: 75%; } .push-9 { left: 75%; right: auto; } .pull-9 { right: 75%; left: auto; } .prefix-9 { margin-left: 75%; } .suffix-9 { margin-right: 75%; } .gr-10 { width: 83.33333333%; } .push-10 { left: 83.33333333%; right: auto; } .pull-10 { right: 83.33333333%; left: auto; } .prefix-10 { margin-left: 83.33333333%; } .suffix-10 { margin-right: 83.33333333%; } .gr-11 { width: 91.66666667%; } .push-11 { left: 91.66666667%; right: auto; } .pull-11 { right: 91.66666667%; left: auto; } .prefix-11 { margin-left: 91.66666667%; } .suffix-11 { margin-right: 91.66666667%; } .gr-12 { width: 100%; } .push-12 { left: 100%; right: auto; } .pull-12 { right: 100%; left: auto; } .prefix-12 { margin-left: 100%; } .suffix-12 { margin-right: 100%; } .row { padding-left: 0 !important; padding-right: 0 !important; margin-left: -10px; margin-right: -10px; } [class*="no-gutter"] > .row { margin-left: 0 !important; margin-right: 0 !important; } .row-reverse { padding-left: 0 !important; padding-right: 0 !important; margin-left: -10px; margin-right: -10px; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .row-reverse > [class*="gr-"] { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); } [class*="no-gutter"] > .row-reverse { margin-left: 0 !important; margin-right: 0 !important; } .row-full { width: 100vw; margin-left: 50% !important; margin-right: 0 !important; -webkit-transform: translateX(-50%); -moz-transition: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .col { padding-left: 0 !important; padding-right: 0 !important; margin-left: -10px; margin-right: -10px; } .col-reverse { padding-left: 0 !important; padding-right: 0 !important; margin-left: -10px; margin-right: -10px; -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } .col-reverse > [class*="gr-"] { -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); } .gr-table { display: table-cell; float: none; vertical-align: top; } .row-no-gutter { margin-left: 0; margin-right: 0; } .row-no-gutter > [class*="gr-"] { padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; } .row-no-gutter-top { margin-left: 0; margin-right: 0; } .row-no-gutter-top > [class*="gr-"] { padding-top: 0; } .row-no-gutter-right { margin-left: 0; margin-right: 0; } .row-no-gutter-right > [class*="gr-"] { padding-right: 0; } .row-no-gutter-bottom { margin-left: 0; margin-right: 0; } .row-no-gutter-bottom > [class*="gr-"] { padding-bottom: 0; } .row-no-gutter-left { margin-left: 0; margin-right: 0; } .row-no-gutter-left > [class*="gr-"] { padding-left: 0; } .row-align-left { font-size: 0; word-spacing: 0; letter-spacing: 0; clear: both; text-align: left; } .row-align-left > * { word-spacing: normal; letter-spacing: normal; float: none !important; vertical-align: top; font-size: 1rem; } .row-align-center { font-size: 0; word-spacing: 0; letter-spacing: 0; clear: both; text-align: center; } .row-align-center > * { word-spacing: normal; letter-spacing: normal; float: none !important; vertical-align: top; font-size: 1rem; } .row-align-center > * { text-align: left; } .row-align-right { font-size: 0; word-spacing: 0; letter-spacing: 0; clear: both; text-align: right; } .row-align-right > * { word-spacing: normal; letter-spacing: normal; float: none !important; vertical-align: top; font-size: 1rem; } .row-align-right > * { text-align: left; } .row-align-middle { font-size: 0; word-spacing: 0; letter-spacing: 0; clear: both; vertical-align: middle; } .row-align-middle > * { word-spacing: normal; letter-spacing: normal; float: none !important; vertical-align: middle; font-size: 1rem; } .row-align-top { font-size: 0; word-spacing: 0; letter-spacing: 0; clear: both; vertical-align: top; } .row-align-top > * { word-spacing: normal; letter-spacing: normal; float: none !important; vertical-align: top; font-size: 1rem; } .row-align-bottom { font-size: 0; word-spacing: 0; letter-spacing: 0; clear: both; vertical-align: bottom; } .row-align-bottom > * { word-spacing: normal; letter-spacing: normal; float: none !important; vertical-align: bottom; font-size: 1rem; } body { direction: ltr; } [class*="gr-"] > [class^="row"], [class*="gr-"] > [class^="col"] { margin-left: -10px; margin-right: -10px; } @media screen and (max-width: 640px) { [class*="gr-"] > [class^="row"], [class*="gr-"] > [class^="col"] { margin-left: -10px; margin-right: -10px; } } @media screen and (min-width: 641px) and (max-width: 1023px) { [class*="gr-"] > [class^="row"], [class*="gr-"] > [class^="col"] { margin-left: -10px; margin-right: -10px; } } @media screen and (max-width: 1023px) { [class*="gr-"] > [class^="row"], [class*="gr-"] > [class^="col"] { margin-left: -10px; margin-right: -10px; } } @media screen and (min-width: 1024px) { [class*="gr-"] > [class^="row"], [class*="gr-"] > [class^="col"] { margin-left: -10px; margin-right: -10px; } } @media screen and (min-width: 1200px) { [class*="gr-"] > [class^="row"], [class*="gr-"] > [class^="col"] { margin-left: -10px; margin-right: -10px; } } @media (max-height: 700px) { [class*="gr-"] > [class^="row"], [class*="gr-"] > [class^="col"] { margin-left: -10px; margin-right: -10px; } } @media (max-height: 900px) { [class*="gr-"] > [class^="row"], [class*="gr-"] > [class^="col"] { margin-left: -10px; margin-right: -10px; } } @media (min-height: 901px) { [class*="gr-"] > [class^="row"], [class*="gr-"] > [class^="col"] { margin-left: -10px; margin-right: -10px; } } @media screen and (max-width: 640px) { [class*='gr-'] { width: 100%; } } @media screen and (min-width: 1200px) { .gr-1-5\@large-desktop { width: 20%; } .push-1-5\@large-desktop { left: 20%; right: auto; } .pull-1-5\@large-desktop { right: 20%; left: auto; } .prefix-1-5\@large-desktop { margin-left: 20%; } .suffix-1-5\@large-desktop { margin-right: 20%; } .gr-0\@large-desktop { width: 0%; } .push-0\@large-desktop { left: 0%; right: auto; } .pull-0\@large-desktop { right: 0%; left: auto; } .prefix-0\@large-desktop { margin-left: 0%; } .suffix-0\@large-desktop { margin-right: 0%; } .gr-1\@large-desktop { width: 8.33333333%; } .push-1\@large-desktop { left: 8.33333333%; right: auto; } .pull-1\@large-desktop { right: 8.33333333%; left: auto; } .prefix-1\@large-desktop { margin-left: 8.33333333%; } .suffix-1\@large-desktop { margin-right: 8.33333333%; } .gr-2\@large-desktop { width: 16.66666667%; } .push-2\@large-desktop { left: 16.66666667%; right: auto; } .pull-2\@large-desktop { right: 16.66666667%; left: auto; } .prefix-2\@large-desktop { margin-left: 16.66666667%; } .suffix-2\@large-desktop { margin-right: 16.66666667%; } .gr-3\@large-desktop { width: 25%; } .push-3\@large-desktop { left: 25%; right: auto; } .pull-3\@large-desktop { right: 25%; left: auto; } .prefix-3\@large-desktop { margin-left: 25%; } .suffix-3\@large-desktop { margin-right: 25%; } .gr-4\@large-desktop { width: 33.33333333%; } .push-4\@large-desktop { left: 33.33333333%; right: auto; } .pull-4\@large-desktop { right: 33.33333333%; left: auto; } .prefix-4\@large-desktop { margin-left: 33.33333333%; } .suffix-4\@large-desktop { margin-right: 33.33333333%; } .gr-5\@large-desktop { width: 41.66666667%; } .push-5\@large-desktop { left: 41.66666667%; right: auto; } .pull-5\@large-desktop { right: 41.66666667%; left: auto; } .prefix-5\@large-desktop { margin-left: 41.66666667%; } .suffix-5\@large-desktop { margin-right: 41.66666667%; } .gr-6\@large-desktop { width: 50%; } .push-6\@large-desktop { left: 50%; right: auto; } .pull-6\@large-desktop { right: 50%; left: auto; } .prefix-6\@large-desktop { margin-left: 50%; } .suffix-6\@large-desktop { margin-right: 50%; } .gr-7\@large-desktop { width: 58.33333333%; } .push-7\@large-desktop { left: 58.33333333%; right: auto; } .pull-7\@large-desktop { right: 58.33333333%; left: auto; } .prefix-7\@large-desktop { margin-left: 58.33333333%; } .suffix-7\@large-desktop { margin-right: 58.33333333%; } .gr-8\@large-desktop { width: 66.66666667%; } .push-8\@large-desktop { left: 66.66666667%; right: auto; } .pull-8\@large-desktop { right: 66.66666667%; left: auto; } .prefix-8\@large-desktop { margin-left: 66.66666667%; } .suffix-8\@large-desktop { margin-right: 66.66666667%; } .gr-9\@large-desktop { width: 75%; } .push-9\@large-desktop { left: 75%; right: auto; } .pull-9\@large-desktop { right: 75%; left: auto; } .prefix-9\@large-desktop { margin-left: 75%; } .suffix-9\@large-desktop { margin-right: 75%; } .gr-10\@large-desktop { width: 83.33333333%; } .push-10\@large-desktop { left: 83.33333333%; right: auto; } .pull-10\@large-desktop { right: 83.33333333%; left: auto; } .prefix-10\@large-desktop { margin-left: 83.33333333%; } .suffix-10\@large-desktop { margin-right: 83.33333333%; } .gr-11\@large-desktop { width: 91.66666667%; } .push-11\@large-desktop { left: 91.66666667%; right: auto; } .pull-11\@large-desktop { right: 91.66666667%; left: auto; } .prefix-11\@large-desktop { margin-left: 91.66666667%; } .suffix-11\@large-desktop { margin-right: 91.66666667%; } .gr-12\@large-desktop { width: 100%; } .push-12\@large-desktop { left: 100%; right: auto; } .pull-12\@large-desktop { right: 100%; left: auto; } .prefix-12\@large-desktop { margin-left: 100%; } .suffix-12\@large-desktop { margin-right: 100%; } .row\@large-desktop { padding-left: 0 !important; padding-right: 0 !important; margin-left: -10px; margin-right: -10px; } [class*="no-gutter"] > .row\@large-desktop { margin-left: 0 !important; margin-right: 0 !important; } .row-reverse\@large-desktop { padding-left: 0 !important; padding-right: 0 !important; margin-left: -10px; margin-right: -10px; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .row-reverse\@large-desktop > [class*="gr-"] { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); } [class*="no-gutter"] > .row-reverse\@large-desktop { margin-left: 0 !important; margin-right: 0 !important; } .row-full\@large-desktop { width: 100vw; margin-left: 50% !important; margin-right: 0 !important; -webkit-transform: translateX(-50%); -moz-transition: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .col\@large-desktop { padding-left: 0 !important; padding-right: 0 !important; margin-left: -10px; margin-right: -10px; } .col-reverse\@large-desktop { padding-left: 0 !important; padding-right: 0 !important; margin-left: -10px; margin-right: -10px; -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } .col-reverse\@large-desktop > [class*="gr-"] { -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); } .gr-table\@large-desktop { display: table-cell; float: none; vertical-align: top; } .row-no-gutter\@large-desktop { margin-left: 0; margin-right: 0; } .row-no-gutter\@large-desktop > [class*="gr-"] { padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; } .row-no-gutter-top\@large-desktop { margin-left: 0; margin-right: 0; } .row-no-gutter-top\@large-desktop > [class*="gr-"] { padding-top: 0; } .row-no-gutter-right\@large-desktop { margin-left: 0; margin-right: 0; } .row-no-gutter-right\@large-desktop > [class*="gr-"] { padding-right: 0; } .row-no-gutter-bottom\@large-desktop { margin-left: 0; margin-right: 0; } .row-no-gutter-bottom\@large-desktop > [class*="gr-"] { padding-bottom: 0; } .row-no-gutter-left\@large-desktop { margin-left: 0; margin-right: 0; } .row-no-gutter-left\@large-desktop > [class*="gr-"] { padding-left: 0; } .row-align-left\@large-desktop { font-size: 0; word-spacing: 0; letter-spacing: 0; clear: both; text-align: left; } .row-align-left\@large-desktop > * { word-spacing: normal; letter-spacing: normal; float: none !important; vertical-align: top; font-size: 1rem; } .row-align-center\@large-desktop { font-size: 0; word-spacing: 0; letter-spacing: 0; clear: both; text-align: center; } .row-align-center\@large-desktop > * { word-spacing: normal; letter-spacing: normal; float: none !important; vertical-align: top; font-size: 1rem; } .row-align-center\@large-desktop > * { text-align: left; } .row-align-right\@large-desktop { font-size: 0; word-spacing: 0; letter-spacing: 0; clear: both; text-align: right; } .row-align-right\@large-desktop > * { word-spacing: normal; letter-spacing: normal; float: none !important; vertical-align: top; font-size: 1rem; } .row-align-right\@large-desktop > * { text-align: left; } .row-align-middle\@large-desktop { font-size: 0; word-spacing: 0; letter-spacing: 0; clear: both; vertical-align: middle; } .row-align-middle\@large-desktop > * { word-spacing: normal; letter-spacing: normal; float: none !important; vertical-align: middle; font-size: 1rem; } .row-align-top\@large-desktop { font-size: 0; word-spacing: 0; letter-spacing: 0; clear: both; vertical-align: top; } .row-align-top\@large-desktop > * { word-spacing: normal; letter-spacing: normal; float: none !important; vertical-align: top; font-size: 1rem; } .row-align-bottom\@large-desktop { font-size: 0; word-spacing: 0; letter-spacing: 0; clear: both; vertical-align: bottom; } .row-align-bottom\@large-desktop > * { word-spacing: normal; letter-spacing: normal; float: none !important; vertical-align: bottom; font-size: 1rem; } body { direction: ltr; } } [class*="gr-"] > [class^="row"], [class*="gr-"] > [class^="col"] { margin-left: -10px; margin-right: -10px; } @media screen and (max-width: 640px) { [class*="gr-"] > [class^="row"], [class*="gr-"] > [class^="col"] { margin-left: -10px; margin-right: -10px; } } @media screen and (min-width: 641px) and (max-width: 1023px) { [class*="gr-"] > [class^="row"], [class*="gr-"] > [class^="col"] { margin-left: -10px; margin-right: -10px; } } @media screen and (max-width: 1023px) { [class*="gr-"] > [class^="row"], [class*="gr-"] > [class^="col"] { margin-left: -10px; margin-right: -10px; } } @media screen and (min-width: 1024px) { [class*="gr-"] > [class^="row"], [class*="gr-"] > [class^="col"] { margin-left: -10px; margin-right: -10px; } } @media screen and (min-width: 1200px) { [class*="gr-"] > [class^="row"], [class*="gr-"] > [class^="col"] { margin-left: -10px; margin-right: -10px; } } @media (max-height: 700px) { [class*="gr-"] > [class^="row"], [class*="gr-"] > [class^="col"] { margin-left: -10px; margin-right: -10px; } } @media (max-height: 900px) { [class*="gr-"] > [class^="row"], [class*="gr-"] > [class^="col"] { margin-left: -10px; margin-right: -10px; } } @media (min-height: 901px) { [class*="gr-"] > [class^="row"], [class*="gr-"] > [class^="col"] { margin-left: -10px; margin-right: -10px; } } @media screen and (min-width: 1024px) { .gr-1-5\@desktop { width: 20%; } .push-1-5\@desktop { left: 20%; right: auto; } .pull-1-5\@desktop { right: 20%; left: auto; } .prefix-1-5\@desktop { margin-left: 20%; } .suffix-1-5\@desktop { margin-right: 20%; } .gr-0\@desktop { width: 0%; } .push-0\@desktop { left: 0%; right: auto; } .pull-0\@desktop { right: 0%; left: auto; } .prefix-0\@desktop { margin-left: 0%; } .suffix-0\@desktop { margin-right: 0%; } .gr-1\@desktop { width: 8.33333333%; } .push-1\@desktop { left: 8.33333333%; right: auto; } .pull-1\@desktop { right: 8.33333333%; left: auto; } .prefix-1\@desktop { margin-left: 8.33333333%; } .suffix-1\@desktop { margin-right: 8.33333333%; } .gr-2\@desktop { width: 16.66666667%; } .push-2\@desktop { left: 16.66666667%; right: auto; } .pull-2\@desktop { right: 16.66666667%; left: auto; } .prefix-2\@desktop { margin-left: 16.66666667%; } .suffix-2\@desktop { margin-right: 16.66666667%; } .gr-3\@desktop { width: 25%; } .push-3\@desktop { left: 25%; right: auto; } .pull-3\@desktop { right: 25%; left: auto; } .prefix-3\@desktop { margin-left: 25%; } .suffix-3\@desktop { margin-right: 25%; } .gr-4\@desktop { width: 33.33333333%; } .push-4\@desktop { left: 33.33333333%; right: auto; } .pull-4\@desktop { right: 33.33333333%; left: auto; } .prefix-4\@desktop { margin-left: 33.33333333%; } .suffix-4\@desktop { margin-right: 33.33333333%; } .gr-5\@desktop { width: 41.66666667%; } .push-5\@desktop { left: 41.66666667%; right: auto; } .pull-5\@desktop { right: 41.66666667%; left: auto; } .prefix-5\@desktop { margin-left: 41.66666667%; } .suffix-5\@desktop { margin-right: 41.66666667%; } .gr-6\@desktop { width: 50%; } .push-6\@desktop { left: 50%; right: auto; } .pull-6\@desktop { right: 50%; left: auto; } .prefix-6\@desktop { margin-left: 50%; } .suffix-6\@desktop { margin-right: 50%; } .gr-7\@desktop { width: 58.33333333%; } .push-7\@desktop { left: 58.33333333%; right: auto; } .pull-7\@desktop { right: 58.33333333%; left: auto; } .prefix-7\@desktop { margin-left: 58.33333333%; } .suffix-7\@desktop { margin-right: 58.33333333%; } .gr-8\@desktop { width: 66.66666667%; } .push-8\@desktop { left: 66.66666667%; right: auto; } .pull-8\@desktop { right: 66.66666667%; left: auto; } .prefix-8\@desktop { margin-left: 66.66666667%; } .suffix-8\@desktop { margin-right: 66.66666667%; } .gr-9\@desktop { width: 75%; } .push-9\@desktop { left: 75%; right: auto; } .pull-9\@desktop { right: 75%; left: auto; } .prefix-9\@desktop { margin-left: 75%; } .suffix-9\@desktop { margin-right: 75%; } .gr-10\@desktop { width: 83.33333333%; } .push-10\@desktop { left: 83.33333333%; right: auto; } .pull-10\@desktop { right: 83.33333333%; left: auto; } .prefix-10\@desktop { margin-left: 83.33333333%; } .suffix-10\@desktop { margin-right: 83.33333333%; } .gr-11\@desktop { width: 91.66666667%; } .push-11\@desktop { left: 91.66666667%; right: auto; } .pull-11\@desktop { right: 91.66666667%; left: auto; } .prefix-11\@desktop { margin-left: 91.66666667%; } .suffix-11\@desktop { margin-right: 91.66666667%; } .gr-12\@desktop { width: 100%; } .push-12\@desktop { left: 100%; right: auto; } .pull-12\@desktop { right: 100%; left: auto; } .prefix-12\@desktop { margin-left: 100%; } .suffix-12\@desktop { margin-right: 100%; } .row\@desktop { padding-left: 0 !important; padding-right: 0 !important; margin-left: -10px; margin-right: -10px; } [class*="no-gutter"] > .row\@desktop { margin-left: 0 !important; margin-right: 0 !important; } .row-reverse\@desktop { padding-left: 0 !important; padding-right: 0 !important; margin-left: -10px; margin-right: -10px; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .row-reverse\@desktop > [class*="gr-"] { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); } [class*="no-gutter"] > .row-reverse\@desktop { margin-left: 0 !important; margin-right: 0 !important; } .row-full\@desktop { width: 100vw; margin-left: 50% !important; margin-right: 0 !important; -webkit-transform: translateX(-50%); -moz-transition: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .col\@desktop { padding-left: 0 !important; padding-right: 0 !important; margin-left: -10px; margin-right: -10px; } .col-reverse\@desktop { padding-left: 0 !important; padding-right: 0 !important; margin-left: -10px; margin-right: -10px; -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } .col-reverse\@desktop > [class*="gr-"] { -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); } .gr-table\@desktop { display: table-cell; float: none; vertical-align: top; } .row-no-gutter\@desktop { margin-left: 0; margin-right: 0; } .row-no-gutter\@desktop > [class*="gr-"] { padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; } .row-no-gutter-top\@desktop { margin-left: 0; margin-right: 0; } .row-no-gutter-top\@desktop > [class*="gr-"] { padding-top: 0; } .row-no-gutter-right\@desktop { margin-left: 0; margin-right: 0; } .row-no-gutter-right\@desktop > [class*="gr-"] { padding-right: 0; } .row-no-gutter-bottom\@desktop { margin-left: 0; margin-right: 0; } .row-no-gutter-bottom\@desktop > [class*="gr-"] { padding-bottom: 0; } .row-no-gutter-left\@desktop { margin-left: 0; margin-right: 0; } .row-no-gutter-left\@desktop > [class*="gr-"] { padding-left: 0; } .row-align-left\@desktop { font-size: 0; word-spacing: 0; letter-spacing: 0; clear: both; text-align: left; } .row-align-left\@desktop > * { word-spacing: normal; letter-spacing: normal; float: none !important; vertical-align: top; font-size: 1rem; } .row-align-center\@desktop { font-size: 0; word-spacing: 0; letter-spacing: 0; clear: both; text-align: center; } .row-align-center\@desktop > * { word-spacing: normal; letter-spacing: normal; float: none !important; vertical-align: top; font-size: 1rem; } .row-align-center\@desktop > * { text-align: left; } .row-align-right\@desktop { font-size: 0; word-spacing: 0; letter-spacing: 0; clear: both; text-align: right; } .row-align-right\@desktop > * { word-spacing: normal; letter-spacing: normal; float: none !important; vertical-align: top; font-size: 1rem; } .row-align-right\@desktop > * { text-align: left; } .row-align-middle\@desktop { font-size: 0; word-spacing: 0; letter-spacing: 0; clear: both; vertical-align: middle; } .row-align-middle\@desktop > * { word-spacing: normal; letter-spacing: normal; float: none !important; vertical-align: middle; font-size: 1rem; } .row-align-top\@desktop { font-size: 0; word-spacing: 0; letter-spacing: 0; clear: both; vertical-align: top; } .row-align-top\@desktop > * { word-spacing: normal; letter-spacing: normal; float: none !important; vertical-align: top; font-size: 1rem; } .row-align-bottom\@desktop { font-size: 0; word-spacing: 0; letter-spacing: 0; clear: both; vertical-align: bottom; } .row-align-bottom\@desktop > * { word-spacing: normal; letter-spacing: normal; float: none !important; vertical-align: bottom; font-size: 1rem; } body { direction: ltr; } } [class*="gr-"] > [class^="row"], [class*="gr-"] > [class^="col"] { margin-left: -10px; margin-right: -10px; } @media screen and (max-width: 640px) { [class*="gr-"] > [class^="row"], [class*="gr-"] > [class^="col"] { margin-left: -10px; margin-right: -10px; } } @media screen and (min-width: 641px) and (max-width: 1023px) { [class*="gr-"] > [class^="row"], [class*="gr-"] > [class^="col"] { margin-left: -10px; margin-right: -10px; } } @media screen and (max-width: 1023px) { [class*="gr-"] > [class^="row"], [class*="gr-"] > [class^="col"] { margin-left: -10px; margin-right: -10px; } } @media screen and (min-width: 1024px) { [class*="gr-"] > [class^="row"], [class*="gr-"] > [class^="col"] { margin-left: -10px; margin-right: -10px; } } @media screen and (min-width: 1200px) { [class*="gr-"] > [class^="row"], [class*="gr-"] > [class^="col"] { margin-left: -10px; margin-right: -10px; } } @media (max-height: 700px) { [class*="gr-"] > [class^="row"], [class*="gr-"] > [class^="col"] { margin-left: -10px; margin-right: -10px; } } @media (max-height: 900px) { [class*="gr-"] > [class^="row"], [class*="gr-"] > [class^="col"] { margin-left: -10px; margin-right: -10px; } } @media (min-height: 901px) { [class*="gr-"] > [class^="row"], [class*="gr-"] > [class^="col"] { margin-left: -10px; margin-right: -10px; } } @media screen and (max-width: 640px) { .gr-1-5\@mobile { width: 20%; } .push-1-5\@mobile { left: 20%; right: auto; } .pull-1-5\@mobile { right: 20%; left: auto; } .prefix-1-5\@mobile { margin-left: 20%; } .suffix-1-5\@mobile { margin-right: 20%; } .gr-0\@mobile { width: 0%; } .push-0\@mobile { left: 0%; right: auto; } .pull-0\@mobile { right: 0%; left: auto; } .prefix-0\@mobile { margin-left: 0%; } .suffix-0\@mobile { margin-right: 0%; } .gr-1\@mobile { width: 8.33333333%; } .push-1\@mobile { left: 8.33333333%; right: auto; } .pull-1\@mobile { right: 8.33333333%; left: auto; } .prefix-1\@mobile { margin-left: 8.33333333%; } .suffix-1\@mobile { margin-right: 8.33333333%; } .gr-2\@mobile { width: 16.66666667%; } .push-2\@mobile { left: 16.66666667%; right: auto; } .pull-2\@mobile { right: 16.66666667%; left: auto; } .prefix-2\@mobile { margin-left: 16.66666667%; } .suffix-2\@mobile { margin-right: 16.66666667%; } .gr-3\@mobile { width: 25%; } .push-3\@mobile { left: 25%; right: auto; } .pull-3\@mobile { right: 25%; left: auto; } .prefix-3\@mobile { margin-left: 25%; } .suffix-3\@mobile { margin-right: 25%; } .gr-4\@mobile { width: 33.33333333%; } .push-4\@mobile { left: 33.33333333%; right: auto; } .pull-4\@mobile { right: 33.33333333%; left: auto; } .prefix-4\@mobile { margin-left: 33.33333333%; } .suffix-4\@mobile { margin-right: 33.33333333%; } .gr-5\@mobile { width: 41.66666667%; } .push-5\@mobile { left: 41.66666667%; right: auto; } .pull-5\@mobile { right: 41.66666667%; left: auto; } .prefix-5\@mobile { margin-left: 41.66666667%; } .suffix-5\@mobile { margin-right: 41.66666667%; } .gr-6\@mobile { width: 50%; } .push-6\@mobile { left: 50%; right: auto; } .pull-6\@mobile { right: 50%; left: auto; } .prefix-6\@mobile { margin-left: 50%; } .suffix-6\@mobile { margin-right: 50%; } .gr-7\@mobile { width: 58.33333333%; } .push-7\@mobile { left: 58.33333333%; right: auto; } .pull-7\@mobile { right: 58.33333333%; left: auto; } .prefix-7\@mobile { margin-left: 58.33333333%; } .suffix-7\@mobile { margin-right: 58.33333333%; } .gr-8\@mobile { width: 66.66666667%; } .push-8\@mobile { left: 66.66666667%; right: auto; } .pull-8\@mobile { right: 66.66666667%; left: auto; } .prefix-8\@mobile { margin-left: 66.66666667%; } .suffix-8\@mobile { margin-right: 66.66666667%; } .gr-9\@mobile { width: 75%; } .push-9\@mobile { left: 75%; right: auto; } .pull-9\@mobile { right: 75%; left: auto; } .prefix-9\@mobile { margin-left: 75%; } .suffix-9\@mobile { margin-right: 75%; } .gr-10\@mobile { width: 83.33333333%; } .push-10\@mobile { left: 83.33333333%; right: auto; } .pull-10\@mobile { right: 83.33333333%; left: auto; } .prefix-10\@mobile { margin-left: 83.33333333%; } .suffix-10\@mobile { margin-right: 83.33333333%; } .gr-11\@mobile { width: 91.66666667%; } .push-11\@mobile { left: 91.66666667%; right: auto; } .pull-11\@mobile { right: 91.66666667%; left: auto; } .prefix-11\@mobile { margin-left: 91.66666667%; } .suffix-11\@mobile { margin-right: 91.66666667%; } .gr-12\@mobile { width: 100%; } .push-12\@mobile { left: 100%; right: auto; } .pull-12\@mobile { right: 100%; left: auto; } .prefix-12\@mobile { margin-left: 100%; } .suffix-12\@mobile { margin-right: 100%; } .row\@mobile { padding-left: 0 !important; padding-right: 0 !important; margin-left: -10px; margin-right: -10px; } [class*="no-gutter"] > .row\@mobile { margin-left: 0 !important; margin-right: 0 !important; } .row-reverse\@mobile { padding-left: 0 !important; padding-right: 0 !important; margin-left: -10px; margin-right: -10px; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .row-reverse\@mobile > [class*="gr-"] { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); } [class*="no-gutter"] > .row-reverse\@mobile { margin-left: 0 !important; margin-right: 0 !important; } .row-full\@mobile { width: 100vw; margin-left: 50% !important; margin-right: 0 !important; -webkit-transform: translateX(-50%); -moz-transition: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .col\@mobile { padding-left: 0 !important; padding-right: 0 !important; margin-left: -10px; margin-right: -10px; } .col-reverse\@mobile { padding-left: 0 !important; padding-right: 0 !important; margin-left: -10px; margin-right: -10px; -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } .col-reverse\@mobile > [class*="gr-"] { -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); } .gr-table\@mobile { display: table-cell; float: none; vertical-align: top; } .row-no-gutter\@mobile { margin-left: 0; margin-right: 0; } .row-no-gutter\@mobile > [class*="gr-"] { padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; } .row-no-gutter-top\@mobile { margin-left: 0; margin-right: 0; } .row-no-gutter-top\@mobile > [class*="gr-"] { padding-top: 0; } .row-no-gutter-right\@mobile { margin-left: 0; margin-right: 0; } .row-no-gutter-right\@mobile > [class*="gr-"] { padding-right: 0; } .row-no-gutter-bottom\@mobile { margin-left: 0; margin-right: 0; } .row-no-gutter-bottom\@mobile > [class*="gr-"] { padding-bottom: 0; } .row-no-gutter-left\@mobile { margin-left: 0; margin-right: 0; } .row-no-gutter-left\@mobile > [class*="gr-"] { padding-left: 0; } .row-align-left\@mobile { font-size: 0; word-spacing: 0; letter-spacing: 0; clear: both; text-align: left; } .row-align-left\@mobile > * { word-spacing: normal; letter-spacing: normal; float: none !important; vertical-align: top; font-size: 1rem; } .row-align-center\@mobile { font-size: 0; word-spacing: 0; letter-spacing: 0; clear: both; text-align: center; } .row-align-center\@mobile > * { word-spacing: normal; letter-spacing: normal; float: none !important; vertical-align: top; font-size: 1rem; } .row-align-center\@mobile > * { text-align: left; } .row-align-right\@mobile { font-size: 0; word-spacing: 0; letter-spacing: 0; clear: both; text-align: right; } .row-align-right\@mobile > * { word-spacing: normal; letter-spacing: normal; float: none !important; vertical-align: top; font-size: 1rem; } .row-align-right\@mobile > * { text-align: left; } .row-align-middle\@mobile { font-size: 0; word-spacing: 0; letter-spacing: 0; clear: both; vertical-align: middle; } .row-align-middle\@mobile > * { word-spacing: normal; letter-spacing: normal; float: none !important; vertical-align: middle; font-size: 1rem; } .row-align-top\@mobile { font-size: 0; word-spacing: 0; letter-spacing: 0; clear: both; vertical-align: top; } .row-align-top\@mobile > * { word-spacing: normal; letter-spacing: normal; float: none !important; vertical-align: top; font-size: 1rem; } .row-align-bottom\@mobile { font-size: 0; word-spacing: 0; letter-spacing: 0; clear: both; vertical-align: bottom; } .row-align-bottom\@mobile > * { word-spacing: normal; letter-spacing: normal; float: none !important; vertical-align: bottom; font-size: 1rem; } body { direction: ltr; } } [class*="gr-"] > [class^="row"], [class*="gr-"] > [class^="col"] { margin-left: -10px; margin-right: -10px; } @media screen and (max-width: 640px) { [class*="gr-"] > [class^="row"], [class*="gr-"] > [class^="col"] { margin-left: -10px; margin-right: -10px; } } @media screen and (min-width: 641px) and (max-width: 1023px) { [class*="gr-"] > [class^="row"], [class*="gr-"] > [class^="col"] { margin-left: -10px; margin-right: -10px; } } @media screen and (max-width: 1023px) { [class*="gr-"] > [class^="row"], [class*="gr-"] > [class^="col"] { margin-left: -10px; margin-right: -10px; } } @media screen and (min-width: 1024px) { [class*="gr-"] > [class^="row"], [class*="gr-"] > [class^="col"] { margin-left: -10px; margin-right: -10px; } } @media screen and (min-width: 1200px) { [class*="gr-"] > [class^="row"], [class*="gr-"] > [class^="col"] { margin-left: -10px; margin-right: -10px; } } @media (max-height: 700px) { [class*="gr-"] > [class^="row"], [class*="gr-"] > [class^="col"] { margin-left: -10px; margin-right: -10px; } } @media (max-height: 900px) { [class*="gr-"] > [class^="row"], [class*="gr-"] > [class^="col"] { margin-left: -10px; margin-right: -10px; } } @media (min-height: 901px) { [class*="gr-"] > [class^="row"], [class*="gr-"] > [class^="col"] { margin-left: -10px; margin-right: -10px; } } @media screen and (min-width: 641px) and (max-width: 1023px) { .gr-1-5\@tablet { width: 20%; } .push-1-5\@tablet { left: 20%; right: auto; } .pull-1-5\@tablet { right: 20%; left: auto; } .prefix-1-5\@tablet { margin-left: 20%; } .suffix-1-5\@tablet { margin-right: 20%; } .gr-0\@tablet { width: 0%; } .push-0\@tablet { left: 0%; right: auto; } .pull-0\@tablet { right: 0%; left: auto; } .prefix-0\@tablet { margin-left: 0%; } .suffix-0\@tablet { margin-right: 0%; } .gr-1\@tablet { width: 8.33333333%; } .push-1\@tablet { left: 8.33333333%; right: auto; } .pull-1\@tablet { right: 8.33333333%; left: auto; } .prefix-1\@tablet { margin-left: 8.33333333%; } .suffix-1\@tablet { margin-right: 8.33333333%; } .gr-2\@tablet { width: 16.66666667%; } .push-2\@tablet { left: 16.66666667%; right: auto; } .pull-2\@tablet { right: 16.66666667%; left: auto; } .prefix-2\@tablet { margin-left: 16.66666667%; } .suffix-2\@tablet { margin-right: 16.66666667%; } .gr-3\@tablet { width: 25%; } .push-3\@tablet { left: 25%; right: auto; } .pull-3\@tablet { right: 25%; left: auto; } .prefix-3\@tablet { margin-left: 25%; } .suffix-3\@tablet { margin-right: 25%; } .gr-4\@tablet { width: 33.33333333%; } .push-4\@tablet { left: 33.33333333%; right: auto; } .pull-4\@tablet { right: 33.33333333%; left: auto; } .prefix-4\@tablet { margin-left: 33.33333333%; } .suffix-4\@tablet { margin-right: 33.33333333%; } .gr-5\@tablet { width: 41.66666667%; } .push-5\@tablet { left: 41.66666667%; right: auto; } .pull-5\@tablet { right: 41.66666667%; left: auto; } .prefix-5\@tablet { margin-left: 41.66666667%; } .suffix-5\@tablet { margin-right: 41.66666667%; } .gr-6\@tablet { width: 50%; } .push-6\@tablet { left: 50%; right: auto; } .pull-6\@tablet { right: 50%; left: auto; } .prefix-6\@tablet { margin-left: 50%; } .suffix-6\@tablet { margin-right: 50%; } .gr-7\@tablet { width: 58.33333333%; } .push-7\@tablet { left: 58.33333333%; right: auto; } .pull-7\@tablet { right: 58.33333333%; left: auto; } .prefix-7\@tablet { margin-left: 58.33333333%; } .suffix-7\@tablet { margin-right: 58.33333333%; } .gr-8\@tablet { width: 66.66666667%; } .push-8\@tablet { left: 66.66666667%; right: auto; } .pull-8\@tablet { right: 66.66666667%; left: auto; } .prefix-8\@tablet { margin-left: 66.66666667%; } .suffix-8\@tablet { margin-right: 66.66666667%; } .gr-9\@tablet { width: 75%; } .push-9\@tablet { left: 75%; right: auto; } .pull-9\@tablet { right: 75%; left: auto; } .prefix-9\@tablet { margin-left: 75%; } .suffix-9\@tablet { margin-right: 75%; } .gr-10\@tablet { width: 83.33333333%; } .push-10\@tablet { left: 83.33333333%; right: auto; } .pull-10\@tablet { right: 83.33333333%; left: auto; } .prefix-10\@tablet { margin-left: 83.33333333%; } .suffix-10\@tablet { margin-right: 83.33333333%; } .gr-11\@tablet { width: 91.66666667%; } .push-11\@tablet { left: 91.66666667%; right: auto; } .pull-11\@tablet { right: 91.66666667%; left: auto; } .prefix-11\@tablet { margin-left: 91.66666667%; } .suffix-11\@tablet { margin-right: 91.66666667%; } .gr-12\@tablet { width: 100%; } .push-12\@tablet { left: 100%; right: auto; } .pull-12\@tablet { right: 100%; left: auto; } .prefix-12\@tablet { margin-left: 100%; } .suffix-12\@tablet { margin-right: 100%; } .row\@tablet { padding-left: 0 !important; padding-right: 0 !important; margin-left: -10px; margin-right: -10px; } [class*="no-gutter"] > .row\@tablet { margin-left: 0 !important; margin-right: 0 !important; } .row-reverse\@tablet { padding-left: 0 !important; padding-right: 0 !important; margin-left: -10px; margin-right: -10px; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .row-reverse\@tablet > [class*="gr-"] { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); } [class*="no-gutter"] > .row-reverse\@tablet { margin-left: 0 !important; margin-right: 0 !important; } .row-full\@tablet { width: 100vw; margin-left: 50% !important; margin-right: 0 !important; -webkit-transform: translateX(-50%); -moz-transition: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .col\@tablet { padding-left: 0 !important; padding-right: 0 !important; margin-left: -10px; margin-right: -10px; } .col-reverse\@tablet { padding-left: 0 !important; padding-right: 0 !important; margin-left: -10px; margin-right: -10px; -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } .col-reverse\@tablet > [class*="gr-"] { -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); } .gr-table\@tablet { display: table-cell; float: none; vertical-align: top; } .row-no-gutter\@tablet { margin-left: 0; margin-right: 0; } .row-no-gutter\@tablet > [class*="gr-"] { padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; } .row-no-gutter-top\@tablet { margin-left: 0; margin-right: 0; } .row-no-gutter-top\@tablet > [class*="gr-"] { padding-top: 0; } .row-no-gutter-right\@tablet { margin-left: 0; margin-right: 0; } .row-no-gutter-right\@tablet > [class*="gr-"] { padding-right: 0; } .row-no-gutter-bottom\@tablet { margin-left: 0; margin-right: 0; } .row-no-gutter-bottom\@tablet > [class*="gr-"] { padding-bottom: 0; } .row-no-gutter-left\@tablet { margin-left: 0; margin-right: 0; } .row-no-gutter-left\@tablet > [class*="gr-"] { padding-left: 0; } .row-align-left\@tablet { font-size: 0; word-spacing: 0; letter-spacing: 0; clear: both; text-align: left; } .row-align-left\@tablet > * { word-spacing: normal; letter-spacing: normal; float: none !important; vertical-align: top; font-size: 1rem; } .row-align-center\@tablet { font-size: 0; word-spacing: 0; letter-spacing: 0; clear: both; text-align: center; } .row-align-center\@tablet > * { word-spacing: normal; letter-spacing: normal; float: none !important; vertical-align: top; font-size: 1rem; } .row-align-center\@tablet > * { text-align: left; } .row-align-right\@tablet { font-size: 0; word-spacing: 0; letter-spacing: 0; clear: both; text-align: right; } .row-align-right\@tablet > * { word-spacing: normal; letter-spacing: normal; float: none !important; vertical-align: top; font-size: 1rem; } .row-align-right\@tablet > * { text-align: left; } .row-align-middle\@tablet { font-size: 0; word-spacing: 0; letter-spacing: 0; clear: both; vertical-align: middle; } .row-align-middle\@tablet > * { word-spacing: normal; letter-spacing: normal; float: none !important; vertical-align: middle; font-size: 1rem; } .row-align-top\@tablet { font-size: 0; word-spacing: 0; letter-spacing: 0; clear: both; vertical-align: top; } .row-align-top\@tablet > * { word-spacing: normal; letter-spacing: normal; float: none !important; vertical-align: top; font-size: 1rem; } .row-align-bottom\@tablet { font-size: 0; word-spacing: 0; letter-spacing: 0; clear: both; vertical-align: bottom; } .row-align-bottom\@tablet > * { word-spacing: normal; letter-spacing: normal; float: none !important; vertical-align: bottom; font-size: 1rem; } body { direction: ltr; } } [class*="gr-"] > [class^="row"], [class*="gr-"] > [class^="col"] { margin-left: -10px; margin-right: -10px; } @media screen and (max-width: 640px) { [class*="gr-"] > [class^="row"], [class*="gr-"] > [class^="col"] { margin-left: -10px; margin-right: -10px; } } @media screen and (min-width: 641px) and (max-width: 1023px) { [class*="gr-"] > [class^="row"], [class*="gr-"] > [class^="col"] { margin-left: -10px; margin-right: -10px; } } @media screen and (max-width: 1023px) { [class*="gr-"] > [class^="row"], [class*="gr-"] > [class^="col"] { margin-left: -10px; margin-right: -10px; } } @media screen and (min-width: 1024px) { [class*="gr-"] > [class^="row"], [class*="gr-"] > [class^="col"] { margin-left: -10px; margin-right: -10px; } } @media screen and (min-width: 1200px) { [class*="gr-"] > [class^="row"], [class*="gr-"] > [class^="col"] { margin-left: -10px; margin-right: -10px; } } @media (max-height: 700px) { [class*="gr-"] > [class^="row"], [class*="gr-"] > [class^="col"] { margin-left: -10px; margin-right: -10px; } } @media (max-height: 900px) { [class*="gr-"] > [class^="row"], [class*="gr-"] > [class^="col"] { margin-left: -10px; margin-right: -10px; } } @media (min-height: 901px) { [class*="gr-"] > [class^="row"], [class*="gr-"] > [class^="col"] { margin-left: -10px; margin-right: -10px; } } .container { max-width: 1200px; width: 100%; margin-left: auto; margin-right: auto; } @media screen and (min-width: 0) and (max-width: 1250px) { .container { padding-left: 16px !important; padding-right: 16px !important; } } /** @category Typography */ .h1, .text-format h1, .h2, .text-format h2, .markdown-format h1, .h3, .text-format h3, .markdown-format h2, .h4, .text-format h4, .markdown-format h3, .h5, .text-format h5, .markdown-format h4 { line-height: 1.4; } .vr .h1, .vr .text-format h1, .text-format .vr h1, .vr .h2, .vr .text-format h2, .text-format .vr h2, .vr .markdown-format h1, .markdown-format .vr h1, .vr .h3, .vr .text-format h3, .text-format .vr h3, .vr .markdown-format h2, .markdown-format .vr h2, .vr .h4, .vr .text-format h4, .text-format .vr h4, .vr .markdown-format h3, .markdown-format .vr h3, .vr .h5, .vr .text-format h5, .text-format .vr h5, .vr .markdown-format h4, .markdown-format .vr h4, .vr.h1, .text-format h1.vr, .vr.h2, .text-format h2.vr, .markdown-format h1.vr, .vr.h3, .text-format h3.vr, .markdown-format h2.vr, .vr.h4, .text-format h4.vr, .markdown-format h3.vr, .vr.h5, .text-format h5.vr, .markdown-format h4.vr, .h1[class*="m-b"], .text-format h1[class*="m-b"], .h2[class*="m-b"], .text-format h2[class*="m-b"], .markdown-format h1[class*="m-b"], .h3[class*="m-b"], .text-format h3[class*="m-b"], .markdown-format h2[class*="m-b"], .h4[class*="m-b"], .text-format h4[class*="m-b"], .markdown-format h3[class*="m-b"], .h5[class*="m-b"], .text-format h5[class*="m-b"], .markdown-format h4[class*="m-b"] { line-height: 1; } .h1 a, .text-format h1 a, .h2 a, .text-format h2 a, .markdown-format h1 a, .h3 a, .text-format h3 a, .markdown-format h2 a, .h4 a, .text-format h4 a, .markdown-format h3 a, .h5 a, .text-format h5 a, .markdown-format h4 a { color: inherit; } .h1 .btn, .text-format h1 .btn, .h2 .btn, .text-format h2 .btn, .markdown-format h1 .btn, .h3 .btn, .text-format h3 .btn, .markdown-format h2 .btn, .h4 .btn, .text-format h4 .btn, .markdown-format h3 .btn, .h5 .btn, .text-format h5 .btn, .markdown-format h4 .btn { color: white; } /**/ /** Make all summer camps big titles in secondary font */ body.summer-camps .h1, body.summer-camps .text-format h1, .text-format body.summer-camps h1 { font-family: "Lobster Two", cursive; font-weight: 400; font-style: italic; margin-left: -0.2ex; } [lang="ru"] body.summer-camps .h1, [lang="ru"] body.summer-camps .text-format h1, .text-format [lang="ru"] body.summer-camps h1 { font-family: "Lobster", cursive; font-weight: 400; font-style: normal !important; margin-left: 0; } .h1, .text-format h1, .h2, .text-format h2, .markdown-format h1, .h3, .text-format h3, .markdown-format h2, .h4, .text-format h4, .markdown-format h3, .h5, .text-format h5, .markdown-format h4 { font-family: "Open Sans", sans-serif; font-weight: 300; } .h1 img[src$=".svg"], .text-format h1 img[src$=".svg"], .h2 img[src$=".svg"], .text-format h2 img[src$=".svg"], .markdown-format h1 img[src$=".svg"], .h3 img[src$=".svg"], .text-format h3 img[src$=".svg"], .markdown-format h2 img[src$=".svg"], .h4 img[src$=".svg"], .text-format h4 img[src$=".svg"], .markdown-format h3 img[src$=".svg"], .h5 img[src$=".svg"], .text-format h5 img[src$=".svg"], .markdown-format h4 img[src$=".svg"] { height: 1em; vertical-align: bottom; } .h1, .text-format h1 { font-size: 50px; } .h1.vr, .text-format h1.vr, .vr .h1, .vr .text-format h1, .text-format .vr h1 { margin-bottom: 20px; } .h1.text-format, .text-format h1.text-format, .text-format .h1, .text-format h1 { margin-bottom: 20px; } .h2, .text-format h2, .markdown-format h1 { font-size: 40px; } .h2.vr, .text-format h2.vr, .markdown-format h1.vr, .vr .h2, .vr .text-format h2, .text-format .vr h2, .vr .markdown-format h1, .markdown-format .vr h1 { margin-bottom: 20px; } .h2.text-format, .text-format h2.text-format, .markdown-format h1.text-format, .text-format .h2, .text-format h2, .text-format .markdown-format h1, .markdown-format .text-format h1 { margin-bottom: 20px; } .h3, .text-format h3, .markdown-format h2 { font-size: 28px; } .h3.vr, .text-format h3.vr, .markdown-format h2.vr, .vr .h3, .vr .text-format h3, .text-format .vr h3, .vr .markdown-format h2, .markdown-format .vr h2 { margin-bottom: 20px; } .h3.text-format, .text-format h3.text-format, .markdown-format h2.text-format, .text-format .h3, .text-format h3, .text-format .markdown-format h2, .markdown-format .text-format h2 { margin-bottom: 20px; } .h4, .text-format h4, .markdown-format h3 { font-family: "Open Sans", sans-serif; font-weight: 600; font-size: 20px; } .h4.vr, .text-format h4.vr, .markdown-format h3.vr, .vr .h4, .vr .text-format h4, .text-format .vr h4, .vr .markdown-format h3, .markdown-format .vr h3 { margin-bottom: 20px; } .h4.text-format, .text-format h4.text-format, .markdown-format h3.text-format, .text-format .h4, .text-format h4, .text-format .markdown-format h3, .markdown-format .text-format h3 { margin-bottom: 20px; } .h4 .h__circle, .text-format h4 .h__circle, .markdown-format h3 .h__circle { font-size: 0.90em; } .h5, .text-format h5, .markdown-format h4 { font-family: "Open Sans", sans-serif; font-weight: 600; font-size: 17px; } .h5.vr, .text-format h5.vr, .markdown-format h4.vr, .vr .h5, .vr .text-format h5, .text-format .vr h5, .vr .markdown-format h4, .markdown-format .vr h4 { margin-bottom: 20px; } .h5.text-format, .text-format h5.text-format, .markdown-format h4.text-format, .text-format .h5, .text-format h5, .text-format .markdown-format h4, .markdown-format .text-format h4 { margin-bottom: 20px; } p.p, .text-format p, .markdown-format p { line-height: 1.7; color: #455d76; padding: 0; } p.p.vr, .text-format p.vr, .markdown-format p.vr, .vr p.p, .vr .text-format p, .text-format .vr p, .vr .markdown-format p, .markdown-format .vr p { margin-bottom: 20px; } p.p.text-format, .text-format p.text-format, .markdown-format p.text-format, .text-format p.p, .text-format p, .text-format .markdown-format p, .markdown-format .text-format p { margin-bottom: 20px; } p.p.p--lead, .text-format p.p--lead, .markdown-format p.p--lead { font-size: 22px; } .cs-light p.p, .cs-light .text-format p, .text-format .cs-light p, .cs-light .markdown-format p, .markdown-format .cs-light p, p.p.cs-light, .text-format p.cs-light, .markdown-format p.cs-light { color: white; } @media screen and (max-width: 1023px) { .h1, .text-format h1 { font-size: 34px; } .h1.vr, .text-format h1.vr, .vr .h1, .vr .text-format h1, .text-format .vr h1 { font-size: 2.125rem; line-height: 3rem; padding-top: 0.45001rem; padding-bottom: 0rem; margin-bottom: 0.54999rem; } .h1.text-format, .text-format h1.text-format, .text-format .h1, .text-format h1 { font-size: 2.125rem; line-height: 3rem; padding-top: 0.45001rem; padding-bottom: 0rem; margin-bottom: 0.54999rem; } .h2, .text-format h2, .markdown-format h1 { font-size: 28px; } .h2.vr, .text-format h2.vr, .markdown-format h1.vr, .vr .h2, .vr .text-format h2, .text-format .vr h2, .vr .markdown-format h1, .markdown-format .vr h1 { font-size: 1.75rem; line-height: 2rem; padding-top: 0.90001rem; padding-bottom: 0rem; margin-bottom: 1.09999rem; } .h2.text-format, .text-format h2.text-format, .markdown-format h1.text-format, .text-format .h2, .text-format h2, .text-format .markdown-format h1, .markdown-format .text-format h1 { font-size: 1.75rem; line-height: 2rem; padding-top: 0.90001rem; padding-bottom: 0rem; margin-bottom: 1.09999rem; } .h3, .text-format h3, .markdown-format h2 { font-size: 25px; } .h3.vr, .text-format h3.vr, .markdown-format h2.vr, .vr .h3, .vr .text-format h3, .text-format .vr h3, .vr .markdown-format h2, .markdown-format .vr h2 { font-size: 1.5625rem; line-height: 2rem; padding-top: 0.87501rem; padding-bottom: 0rem; margin-bottom: 1.12499rem; } .h3.text-format, .text-format h3.text-format, .markdown-format h2.text-format, .text-format .h3, .text-format h3, .text-format .markdown-format h2, .markdown-format .text-format h2 { font-size: 1.5625rem; line-height: 2rem; padding-top: 0.87501rem; padding-bottom: 0rem; margin-bottom: 1.12499rem; } .h4, .text-format h4, .markdown-format h3 { font-size: 20px; } .h4.vr, .text-format h4.vr, .markdown-format h3.vr, .vr .h4, .vr .text-format h4, .text-format .vr h4, .vr .markdown-format h3, .markdown-format .vr h3 { font-size: 1.25rem; line-height: 2rem; padding-top: 0.50001rem; padding-bottom: 0rem; margin-bottom: 1.49999rem; } .h4.text-format, .text-format h4.text-format, .markdown-format h3.text-format, .text-format .h4, .text-format h4, .text-format .markdown-format h3, .markdown-format .text-format h3 { font-size: 1.25rem; line-height: 2rem; padding-top: 0.50001rem; padding-bottom: 0rem; margin-bottom: 1.49999rem; } .h5, .text-format h5, .markdown-format h4 { font-size: 17px; } .h5.vr, .text-format h5.vr, .markdown-format h4.vr, .vr .h5, .vr .text-format h5, .text-format .vr h5, .vr .markdown-format h4, .markdown-format .vr h4 { font-size: 1.0625rem; line-height: 2rem; padding-top: 0.47501rem; padding-bottom: 0rem; margin-bottom: 0.52499rem; } .h5.text-format, .text-format h5.text-format, .markdown-format h4.text-format, .text-format .h5, .text-format h5, .text-format .markdown-format h4, .markdown-format .text-format h4 { font-size: 1.0625rem; line-height: 2rem; padding-top: 0.47501rem; padding-bottom: 0rem; margin-bottom: 0.52499rem; } } a { text-decoration: none; color: inherit; -webkit-font-smoothing: subpixel-antialiased; } .link, .h1 a.link, .text-format h1 a.link, .h2 a.link, .text-format h2 a.link, .markdown-format h1 a.link, .h3 a.link, .text-format h3 a.link, .markdown-format h2 a.link, .h4 a.link, .text-format h4 a.link, .markdown-format h3 a.link, .h5 a.link, .text-format h5 a.link, .markdown-format h4 a.link, .text-format a:not(.btn), .markdown-format a { color: #d3031d; word-wrap: break-word; cursor: pointer; } .link:hover, .h1 a.link:hover, .text-format h1 a.link:hover, .h2 a.link:hover, .text-format h2 a.link:hover, .h3 a.link:hover, .text-format h3 a.link:hover, .h4 a.link:hover, .text-format h4 a.link:hover, .h5 a.link:hover, .text-format h5 a.link:hover, .text-format a:hover:not(.btn), .markdown-format a:hover, .link:active, .h1 a.link:active, .text-format h1 a.link:active, .h2 a.link:active, .text-format h2 a.link:active, .h3 a.link:active, .text-format h3 a.link:active, .h4 a.link:active, .text-format h4 a.link:active, .h5 a.link:active, .text-format h5 a.link:active, .text-format a:active:not(.btn), .markdown-format a:active, .link:focus, .h1 a.link:focus, .text-format h1 a.link:focus, .h2 a.link:focus, .text-format h2 a.link:focus, .h3 a.link:focus, .text-format h3 a.link:focus, .h4 a.link:focus, .text-format h4 a.link:focus, .h5 a.link:focus, .text-format h5 a.link:focus, .text-format a:focus:not(.btn), .markdown-format a:focus { text-decoration: underline; } .link-hover { -webkit-transition: all 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; transition: all 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; outline-color: black; } .link-hover:hover { color: #ec0928; } [lang="ru"] .font-secondary { font-family: "Lobster", cursive; font-weight: 400; font-style: normal !important; } strong, b, .bold { font-family: "Open Sans", sans-serif; font-weight: 700; } figure.vr, .vr figure { margin-bottom: 20px; } figure.text-format, .text-format figure { margin-bottom: 20px; } @font-face { font-family: "icons"; src: url("../fonts/icons.eot"); src: url("../fonts/icons.eot?#iefix") format("eot"), url("../fonts/icons.woff") format("woff"), url("../fonts/icons.ttf") format("truetype"), url("../fonts/icons.svg#icons") format("svg"); } .icon:before, ul.list--puce > li:before, ul.list--puce > .list__item:before, ul.list--bullet > li:before, ul.list--bullet > .list__item:before, ol.list--puce > li:before, ol.list--puce > .list__item:before, ol.list--bullet > li:before, ol.list--bullet > .list__item:before, ul.list--puce.list--primary > li:before, .text-format ul.list--puce > li:before, ul.list--puce.list--primary > .list__item:before, .text-format ul.list--puce > .list__item:before, ul.list--bullet.list--primary > li:before, .text-format ul.list--bullet > li:before, ul.list--bullet.list--primary > .list__item:before, .text-format ul.list--bullet > .list__item:before, ol.list--puce.list--primary > li:before, .text-format ol.list--puce > li:before, ol.list--puce.list--primary > .list__item:before, .text-format ol.list--puce > .list__item:before, ol.list--bullet.list--primary > li:before, .text-format ol.list--bullet > li:before, ol.list--bullet.list--primary > .list__item:before, .text-format ol.list--bullet > .list__item:before, ul.list--puce-alpadia > li:before, ul.list--puce-alpadia > .list__item:before, ul.list--alpadia > li:before, .text-format ul > li:before, ul.list--alpadia > .list__item:before, .text-format ul > .list__item:before, ol.list--puce-alpadia > li:before, ol.list--puce-alpadia > .list__item:before, ol.list--alpadia > li:before, ol.list--alpadia > .list__item:before, ul.list--puce-alpadia.list--primary > li:before, .text-format ul.list--puce-alpadia > li:before, ul.list--puce-alpadia.list--primary > .list__item:before, .text-format ul.list--puce-alpadia > .list__item:before, ul.list--alpadia.list--primary > li:before, ul.list--alpadia.list--primary > .list__item:before, ol.list--puce-alpadia.list--primary > li:before, .text-format ol.list--puce-alpadia > li:before, ol.list--puce-alpadia.list--primary > .list__item:before, .text-format ol.list--puce-alpadia > .list__item:before, ol.list--alpadia.list--primary > li:before, .text-format ol.list--alpadia > li:before, ol.list--alpadia.list--primary > .list__item:before, .text-format ol.list--alpadia > .list__item:before, .s-dialog__close:before, [class^="icon-"]:before { font-family: "icons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; /* speak: none; only necessary if not using the private unicode range (firstGlyph option) */ text-decoration: none; text-transform: none; } .icon-accommodation-apartment:before { content: "\E001" !important; } .icon-accommodation-homestay:before { content: "\E002" !important; } .icon-accommodation-host-family-twin:before { content: "\E003" !important; } .icon-accommodation-host-family:before { content: "\E004" !important; } .icon-accommodation-hotel:before { content: "\E005" !important; } .icon-accommodation-other:before { content: "\E006" !important; } .icon-accommodation-residence-double-quadruple:before { content: "\E007" !important; } .icon-accommodation-residence-double-triple:before { content: "\E008" !important; } .icon-accommodation-residence-double:before { content: "\E009" !important; } .icon-accommodation-residence-quadruple:before { content: "\E00A" !important; } .icon-accommodation-residence-single-double:before { content: "\E00B" !important; } .icon-accommodation-residence-single-twin:before { content: "\E00C" !important; } .icon-accommodation-residence-single:before { content: "\E00D" !important; } .icon-accommodation-residence-triple-quadruple:before { content: "\E00E" !important; } .icon-accommodation-residence-triple:before { content: "\E00F" !important; } .icon-accommodation-residence:before { content: "\E010" !important; } .icon-accommodation-studio:before { content: "\E011" !important; } .icon-accommodation-without:before { content: "\E012" !important; } .icon-airplane:before { content: "\E013" !important; } .icon-alpadia-20-years:before { content: "\E014" !important; } .icon-alpadia:before, ul.list--puce-alpadia > li:before, ul.list--puce-alpadia > .list__item:before, ul.list--alpadia > li:before, .text-format ul > li:before, ul.list--alpadia > .list__item:before, .text-format ul > .list__item:before, ol.list--puce-alpadia > li:before, ol.list--puce-alpadia > .list__item:before, ol.list--alpadia > li:before, ol.list--alpadia > .list__item:before, ul.list--puce-alpadia.list--primary > li:before, .text-format ul.list--puce-alpadia > li:before, ul.list--puce-alpadia.list--primary > .list__item:before, .text-format ul.list--puce-alpadia > .list__item:before, ul.list--alpadia.list--primary > li:before, ul.list--alpadia.list--primary > .list__item:before, ol.list--puce-alpadia.list--primary > li:before, .text-format ol.list--puce-alpadia > li:before, ol.list--puce-alpadia.list--primary > .list__item:before, .text-format ol.list--puce-alpadia > .list__item:before, ol.list--alpadia.list--primary > li:before, .text-format ol.list--alpadia > li:before, ol.list--alpadia.list--primary > .list__item:before, .text-format ol.list--alpadia > .list__item:before { content: "\E015" !important; } .icon-archives:before { content: "\E016" !important; } .icon-arrow-down:before { content: "\E017" !important; } .icon-arrow-left:before { content: "\E018" !important; } .icon-arrow-right:before { content: "\E019" !important; } .icon-arrow-up:before { content: "\E01A" !important; } .icon-at:before { content: "\E01B" !important; } .icon-badminton:before { content: "\E01C" !important; } .icon-basketball:before { content: "\E01D" !important; } .icon-beach-games:before { content: "\E01E" !important; } .icon-bell:before { content: "\E01F" !important; } .icon-book:before { content: "\E020" !important; } .icon-briefcase:before { content: "\E021" !important; } .icon-bubbles:before { content: "\E022" !important; } .icon-bullet-alpadia:before, ul.list--puce > li:before, ul.list--puce > .list__item:before, ul.list--bullet > li:before, ul.list--bullet > .list__item:before, ol.list--puce > li:before, ol.list--puce > .list__item:before, ol.list--bullet > li:before, ol.list--bullet > .list__item:before, ul.list--puce.list--primary > li:before, .text-format ul.list--puce > li:before, ul.list--puce.list--primary > .list__item:before, .text-format ul.list--puce > .list__item:before, ul.list--bullet.list--primary > li:before, .text-format ul.list--bullet > li:before, ul.list--bullet.list--primary > .list__item:before, .text-format ul.list--bullet > .list__item:before, ol.list--puce.list--primary > li:before, .text-format ol.list--puce > li:before, ol.list--puce.list--primary > .list__item:before, .text-format ol.list--puce > .list__item:before, ol.list--bullet.list--primary > li:before, .text-format ol.list--bullet > li:before, ol.list--bullet.list--primary > .list__item:before, .text-format ol.list--bullet > .list__item:before { content: "\E023" !important; } .icon-bus:before { content: "\E024" !important; } .icon-calendar:before { content: "\E025" !important; } .icon-capital:before { content: "\E026" !important; } .icon-certif-delf-dalf:before { content: "\E027" !important; } .icon-certif-goethe:before { content: "\E028" !important; } .icon-certif-tcf:before { content: "\E029" !important; } .icon-certif-telc-hochschule:before { content: "\E02A" !important; } .icon-certif-telc:before { content: "\E02B" !important; } .icon-certif-testdaf:before { content: "\E02C" !important; } .icon-certif:before { content: "\E02D" !important; } .icon-certifs:before { content: "\E02E" !important; } .icon-chevron-down:before { content: "\E02F" !important; } .icon-chevron-left:before { content: "\E030" !important; } .icon-chevron-right:before { content: "\E031" !important; } .icon-chevron-up:before { content: "\E032" !important; } .icon-choice:before { content: "\E033" !important; } .icon-circle-play:before { content: "\E034" !important; } .icon-circle-star:before { content: "\E035" !important; } .icon-circle-tick:before { content: "\E036" !important; } .icon-course-combi:before { content: "\E037" !important; } .icon-course-exam:before { content: "\E038" !important; } .icon-course-finder:before { content: "\E039" !important; } .icon-course-intensive:before { content: "\E03A" !important; } .icon-course-premium:before { content: "\E03B" !important; } .icon-course-private:before { content: "\E03C" !important; } .icon-course-standard-30-plus:before { content: "\E03D" !important; } .icon-course-standard:before { content: "\E03E" !important; } .icon-course-uni:before { content: "\E03F" !important; } .icon-cross:before, .s-dialog__close:before { content: "\E040" !important; } .icon-discovery:before { content: "\E041" !important; } .icon-dollar:before { content: "\E042" !important; } .icon-download:before { content: "\E043" !important; } .icon-edit:before { content: "\E044" !important; } .icon-email:before { content: "\E045" !important; } .icon-enlarge:before { content: "\E046" !important; } .icon-facebook:before { content: "\E047" !important; } .icon-fax:before { content: "\E048" !important; } .icon-football:before { content: "\E049" !important; } .icon-fullscreen:before { content: "\E04A" !important; } .icon-game-coding:before { content: "\E04B" !important; } .icon-global-leadership:before { content: "\E04C" !important; } .icon-globe:before { content: "\E04D" !important; } .icon-googleplus:before { content: "\E04E" !important; } .icon-handball:before { content: "\E04F" !important; } .icon-help:before { content: "\E050" !important; } .icon-hiking:before { content: "\E051" !important; } .icon-home:before { content: "\E052" !important; } .icon-info:before { content: "\E053" !important; } .icon-instagram:before { content: "\E054" !important; } .icon-internship:before { content: "\E055" !important; } .icon-kayaking:before { content: "\E056" !important; } .icon-key:before { content: "\E057" !important; } .icon-keyfact-24-hours:before { content: "\E058" !important; } .icon-keyfact-accommodation:before { content: "\E059" !important; } .icon-keyfact-activities-all-in-one:before { content: "\E05A" !important; } .icon-keyfact-activities:before { content: "\E05B" !important; } .icon-keyfact-bathroom:before { content: "\E05C" !important; } .icon-keyfact-blackboard:before { content: "\E05D" !important; } .icon-keyfact-cafeteria:before { content: "\E05E" !important; } .icon-keyfact-central-location:before { content: "\E05F" !important; } .icon-keyfact-classroom:before { content: "\E060" !important; } .icon-keyfact-exams:before { content: "\E061" !important; } .icon-keyfact-excursions:before { content: "\E062" !important; } .icon-keyfact-free-computer:before { content: "\E063" !important; } .icon-keyfact-free-library:before { content: "\E064" !important; } .icon-keyfact-full-board:before { content: "\E065" !important; } .icon-keyfact-fullboard-accommodation:before { content: "\E066" !important; } .icon-keyfact-garden:before { content: "\E067" !important; } .icon-keyfact-international-classes:before { content: "\E068" !important; } .icon-keyfact-ipad-area:before { content: "\E069" !important; } .icon-keyfact-kitchen:before { content: "\E06A" !important; } .icon-keyfact-loundge:before { content: "\E06B" !important; } .icon-keyfact-premium:before { content: "\E06C" !important; } .icon-keyfact-school-size-l:before { content: "\E06D" !important; } .icon-keyfact-school-size-m:before { content: "\E06E" !important; } .icon-keyfact-school-size-s:before { content: "\E06F" !important; } .icon-keyfact-schoolbus:before { content: "\E070" !important; } .icon-keyfact-student-lounge:before { content: "\E071" !important; } .icon-keyfact-study-area:before { content: "\E072" !important; } .icon-keyfact-supervised-activity:before { content: "\E073" !important; } .icon-keyfact-terrace:before { content: "\E074" !important; } .icon-keyfact-terrasse:before { content: "\E075" !important; } .icon-keyfact-wifi:before { content: "\E076" !important; } .icon-language-plus:before { content: "\E077" !important; } .icon-leaf:before { content: "\E078" !important; } .icon-link:before { content: "\E079" !important; } .icon-linkedin:before { content: "\E07A" !important; } .icon-list:before { content: "\E07B" !important; } .icon-loading:before { content: "\E07C" !important; } .icon-logo-aduqua:before { content: "\E07D" !important; } .icon-logo-alto:before { content: "\E07E" !important; } .icon-logo-avdep:before { content: "\E07F" !important; } .icon-logo-bildungsurlaub:before { content: "\E080" !important; } .icon-logo-british-council:before { content: "\E081" !important; } .icon-logo-csn:before { content: "\E082" !important; } .icon-logo-dekra:before { content: "\E083" !important; } .icon-logo-eaquals:before { content: "\E084" !important; } .icon-logo-esl-schools:before { content: "\E085" !important; } .icon-logo-fadaf:before { content: "\E086" !important; } .icon-logo-fle:before { content: "\E087" !important; } .icon-logo-fsep:before { content: "\E088" !important; } .icon-logo-icc:before { content: "\E089" !important; } .icon-logo-private-school-register:before { content: "\E08A" !important; } .icon-logo-souffle:before { content: "\E08B" !important; } .icon-logo-suisse-tourisme-quality:before { content: "\E08C" !important; } .icon-logo-suisse-tourisme:before { content: "\E08D" !important; } .icon-logo-work-abroad:before { content: "\E08E" !important; } .icon-logo-wysetc:before { content: "\E08F" !important; } .icon-magnifier:before { content: "\E090" !important; } .icon-map-england:before { content: "\E091" !important; } .icon-map-france:before { content: "\E092" !important; } .icon-map-germany:before { content: "\E093" !important; } .icon-map-switzerland:before { content: "\E094" !important; } .icon-map:before { content: "\E095" !important; } .icon-medias:before { content: "\E096" !important; } .icon-menu:before { content: "\E097" !important; } .icon-minigolf:before { content: "\E098" !important; } .icon-paddleboard:before { content: "\E099" !important; } .icon-pdf:before { content: "\E09A" !important; } .icon-pedalo:before { content: "\E09B" !important; } .icon-phone:before { content: "\E09C" !important; } .icon-picture:before { content: "\E09D" !important; } .icon-pinterest:before { content: "\E09E" !important; } .icon-play:before { content: "\E09F" !important; } .icon-premium-adrenaline:before { content: "\E0A0" !important; } .icon-premium-cooking:before { content: "\E0A1" !important; } .icon-premium-creative-arts:before { content: "\E0A2" !important; } .icon-premium-fashion:before { content: "\E0A3" !important; } .icon-premium-golf:before { content: "\E0A4" !important; } .icon-premium-horseriding:before { content: "\E0A5" !important; } .icon-premium-performing-arts:before { content: "\E0A6" !important; } .icon-premium-rugby:before { content: "\E0A7" !important; } .icon-premium-running:before { content: "\E0A8" !important; } .icon-premium-tennis:before { content: "\E0A9" !important; } .icon-premium-waters-sports-plus:before { content: "\E0AA" !important; } .icon-premium:before { content: "\E0AB" !important; } .icon-printer:before { content: "\E0AC" !important; } .icon-quality:before { content: "\E0AD" !important; } .icon-quote:before { content: "\E0AE" !important; } .icon-sightseeing:before { content: "\E0AF" !important; } .icon-simple-quote-reverse:before { content: "\E0B0" !important; } .icon-simple-quote:before { content: "\E0B1" !important; } .icon-skype:before { content: "\E0B2" !important; } .icon-smiley-sunglasses:before { content: "\E0B3" !important; } .icon-star:before { content: "\E0B4" !important; } .icon-sun:before { content: "\E0B5" !important; } .icon-support:before { content: "\E0B6" !important; } .icon-swimming:before { content: "\E0B7" !important; } .icon-table-tennis:before { content: "\E0B8" !important; } .icon-train:before { content: "\E0B9" !important; } .icon-transfert:before { content: "\E0BA" !important; } .icon-trash:before { content: "\E0BB" !important; } .icon-twitter-bird:before { content: "\E0BC" !important; } .icon-twitter:before { content: "\E0BD" !important; } .icon-uni:before { content: "\E0BE" !important; } .icon-unihockey:before { content: "\E0BF" !important; } .icon-university-pathway:before { content: "\E0C0" !important; } .icon-users:before { content: "\E0C1" !important; } .icon-volleyball:before { content: "\E0C2" !important; } .icon-volunteering:before { content: "\E0C3" !important; } .icon-why:before { content: "\E0C4" !important; } .icon-work-experience:before { content: "\E0C5" !important; } .icon-work-internship:before { content: "\E0C6" !important; } /** Icons helpers */ [class^=icon-], [class*=" icon-"] { vertical-align: middle; margin-right: 10px; } [class^="icon-"]:before, [class*=" icon-"]:before { vertical-align: top; } /** Icons overlay */ .icon--overlay { font-size: 100px; opacity: .8; -webkit-filter: drop-shadow(rgba(0, 0, 0, 0.5) 0 0 10px); filter: drop-shadow(rgba(0, 0, 0, 0.5) 0 0 10px); -webkit-transition: all 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; transition: all 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; outline-color: black; color: white; } :hover > .icon--overlay { opacity: 1; font-size: 120px; } .icon--adaptive-size { font-size: 3vw; } @media screen and (max-width: 640px) { .icon--adaptive-size { font-size: 8vw; } } /** Images generic styling */ @-webkit-keyframes image-in { from { opacity: 0; } to { opacity: 1; } } @keyframes image-in { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes image-in-cover { from { opacity: 0; -webkit-transform: scale(1, 1); transform: scale(1, 1); } to { opacity: 1; -webkit-transform: scale(1.05, 1.05); transform: scale(1.05, 1.05); } } @keyframes image-in-cover { from { opacity: 0; -webkit-transform: scale(1, 1); transform: scale(1, 1); } to { opacity: 1; -webkit-transform: scale(1.05, 1.05); transform: scale(1.05, 1.05); } } img { line-height: 1; height: auto; border: none; } img[src]:not([src$="svg"]) { -webkit-animation: image-in 0.3s 0s ease-in-out 1 normal forwards; animation: image-in 0.3s 0s ease-in-out 1 normal forwards; } img.abs-cover[src]:not([src$="svg"]) { -webkit-animation: image-in-cover 0.3s 0s ease-in-out 1 normal forwards; animation: image-in-cover 0.3s 0s ease-in-out 1 normal forwards; } img[src$="svg"] { min-width: auto; } img:not([src]) { opacity: 0.001; } figure { background-color: #F8F9FB; } /** @category Base */ .default-font, body { font-family: 'Open Sans', sans-serif; } *::selection { background-color: rgba(236, 9, 40, 0.2); } html { height: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-overflow-scrolling: touch; } body { height: 100%; color: #293746; line-height: 1.4; letter-spacing: 0.02rem; overflow-x: hidden; } * { -webkit-overflow-scrolling: touch; } object { overflow: hidden; width: 100%; height: auto; } svg { width: 100%; } .markdown-format h1 { margin-bottom: 2.5rem !important; } .markdown-format h2 { background-color: #f8f9fb; padding: 1rem; margin: 2.5rem 0 !important; } .markdown-format h3 { margin-top: 1.875rem !important; } .markdown-format h4 { margin-top: 1.25rem !important; } .markdown-format p { color: #717171 !important; } .markdown-format hr { display: none; } .markdown-format blockquote { border-left: solid 4px lightgrey; padding-left: 15px; padding-top: 3px; padding-bottom: 3px; } .markdown-format blockquote p { margin-bottom: 0 !important; } .markdown-format blockquote.vr, .vr .markdown-format blockquote { margin-bottom: 20px; } .markdown-format blockquote.text-format, .text-format .markdown-format blockquote { margin-bottom: 20px; } .markdown-format hr { border: 1px solid lightgrey; } .markdown-format ul { list-style: square !important; padding-left: 20px; } .markdown-format ul li { overflow: visible; color: #717171 !important; } .markdown-format ul li::before { display: none; } .markdown-format ul li ul { margin-top: 0px; } .markdown-format ol li { overflow: visible; padding-left: 0; cursor: pointer; color: #717171 !important; } .markdown-format ol li::before { display: none; } .markdown-format ol li:focus, .markdown-format ol li:hover { background: rgba(236, 9, 40, 0.03); outline: none; } .markdown-format ol li:focus { background: rgba(236, 9, 40, 0.06); } .markdown-format ol li ul { margin-top: 0px; } .markdown-format code { font-family: "Menlo", "Liberation Mono", "Consolas", "DejaVu Sans Mono", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace; white-space: pre-wrap; word-wrap: normal; padding: 2px 4px; font-size: 90%; color: #c7254e; background-color: #f9f2f4; border-radius: 3px; } .markdown-format dl > li, .markdown-format ul > li, .markdown-format ol > li { margin-bottom: 0 !important; } /* OBJECTS ---------------------------------------*/ /** These are design-free objects, abstractions and design patterns. These create constructs that you lay your designs over. */ /* OBJECTS ---------------------------------------*/ .accreditation-accet, .accreditation-alto, .accreditation-avdep, .accreditation-bildungsurlaub, .accreditation-british-council, .accreditation-csn, .accreditation-dekra, .accreditation-eaquals, .accreditation-english-uk, .accreditation-fadaf, .accreditation-fle, .accreditation-fsep, .accreditation-icc, .accreditation-languages-canada, .accreditation-private-school-register, .accreditation-souffle, .accreditation-suisse-tourisme, .accreditation-suisse-tourisme-quality, .accreditation-telc, .accreditation-telc-hochschule, .accreditation-work-abroad, .accreditation-wysetc { background: url("../img/accreditations-sprite.svg") no-repeat; } .accreditation-accet { background-position: 0 0; } .accreditation-accet-dims { width: 80px; height: 27.8px; } .accreditation-alto { background-position: 0 76.33255269320843%; } .accreditation-alto-dims { width: 80px; height: 46.5px; } .accreditation-avdep { background-position: 33.47280334728033% 0; } .accreditation-avdep-dims { width: 80px; height: 37.48px; } .accreditation-bildungsurlaub { background-position: 33.47280334728033% 15.212273723516518%; } .accreditation-bildungsurlaub-dims { width: 80px; height: 13.62px; } .accreditation-british-council { background-position: 94.82418016594232% 23.80952380952381%; } .accreditation-british-council-dims { width: 65.9px; height: 50px; } .accreditation-csn { background-position: 94.37672040896578% 43.14063848144952%; } .accreditation-csn-dims { width: 64.7px; height: 28.2px; } .accreditation-dekra { background-position: 43.477508650519034% 99.74761904761905%; } .accreditation-dekra-dims { width: 30px; height: 50px; } .accreditation-eaquals { background-position: 66.94560669456067% 21.95873843964904%; } .accreditation-eaquals-dims { width: 80px; height: 49.15px; } .accreditation-english-uk { background-position: 0 99.74761904761905%; } .accreditation-english-uk-dims { width: 50.21px; height: 50px; } .accreditation-fadaf { background-position: 33.47280334728033% 32.20074286679048%; } .accreditation-fadaf-dims { width: 80px; height: 23.08px; } .accreditation-fle { background-position: 17.611364433532092% 99.74761904761905%; } .accreditation-fle-dims { width: 33.9px; height: 50px; } .accreditation-fsep { background-position: 99.80869999168262% 0; } .accreditation-fsep-dims { width: 78.54px; height: 50px; } .accreditation-icc { background-position: 33.47280334728033% 52.19106237267565%; } .accreditation-icc-dims { width: 80px; height: 29.29px; } .accreditation-languages-canada { background-position: 33.47280334728033% 72.58919424524521%; } .accreditation-languages-canada-dims { width: 80px; height: 35.49px; } .accreditation-private-school-register { background-position: 0 55.376195732156%; } .accreditation-private-school-register-dims { width: 80px; height: 42.56px; } .accreditation-souffle { background-position: 30.314279535788945% 99.74761904761905%; } .accreditation-souffle-dims { width: 41.54px; height: 50px; } .accreditation-suisse-tourisme { background-position: 66.94560669456067% 40.55489462950373%; } .accreditation-suisse-tourisme-dims { width: 80px; height: 24.64px; } .accreditation-suisse-tourisme-quality { background-position: 90.78529278256921% 61.04761904761904%; } .accreditation-suisse-tourisme-quality-dims { width: 54.64px; height: 50px; } .accreditation-telc { background-position: 66.94560669456067% 0; } .accreditation-telc-dims { width: 80px; height: 46.3px; } .accreditation-telc-hochschule { background-position: 33.47280334728033% 21.728962027469485%; } .accreditation-telc-hochschule-dims { width: 80px; height: 24.83px; } .accreditation-work-abroad { background-position: 0 35.33907726514731%; } .accreditation-work-abroad-dims { width: 80px; height: 44.12px; } .accreditation-wysetc { background-position: 0 13.143586591650514%; } .accreditation-wysetc-dims { width: 80px; height: 48.49px; } /** @Category Agent zone availabilities */ .agent-zone-availabilities__cell { border-radius: 5px; color: white; position: relative; } .agent-zone-availabilities__cell:after { content: ''; display: block; position: absolute; width: 65px; height: 65px; top: 0; left: 0; border: 1px solid white; pointer-events: none; } .agent-zone-availabilities__status-0 { background: #b5d603; } .agent-zone-availabilities__status-0.active { background: #a0bd03; } .agent-zone-availabilities__status-1 { background: #f9cd00; } .agent-zone-availabilities__status-1.active { background: #e0b800; } .agent-zone-availabilities__status-2 { background: #dd3131; } .agent-zone-availabilities__status-2.active { background: #d22323; } .agent-zone-availabilities__disabled { background: #f1f1f1 !important; } .agent-zone-availabilities__disabled.active { background: #f1f1f1 !important; } .agent-zone-availabilities__cell--head { font-size: rem(12); } /** Section navigation */ s-sticky alp-section-navigation { display: block; overflow: hidden; height: 0; } s-sticky alp-section-navigation .nav__item { text-align: center !important; padding: 0 2em; } s-sticky alp-section-navigation .nav--justify > .nav__item { padding-right: 2em; } s-sticky.s-sticky--sticked alp-section-navigation { height: auto; } /** Arrow */ .arrow--right { position: relative; background: #ffffff; border-style: solid; border-width: 0; } .arrow--right:after, .arrow--right:before { border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; visibility: visible; } .arrow--right:after { border-width: 1em; border-left-color: #ffffff; right: -2em; top: 0em; } .arrow--right:before { border-width: 1em; right: -2em; top: 0em; } .arrow--left { position: relative; background: #ffffff; border-style: solid; border-width: 0; } .arrow--left:after, .arrow--left:before { border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; visibility: visible; } .arrow--left:after { border-width: 1em; border-right-color: #ffffff; left: -2em; top: 0em; } .arrow--left:before { border-width: 1em; left: -2em; top: 0em; } .arrow--up { position: relative; background: #ffffff; border-style: solid; border-width: 0; } .arrow--up:after, .arrow--up:before { border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; visibility: visible; } .arrow--up:after { border-width: 1em; border-bottom-color: #ffffff; top: -2em; } .arrow--up:before { border-width: 1em; top: -2em; } .arrow--bottom { position: relative; background: #ffffff; border-style: solid; border-width: 0; } .arrow--bottom:after, .arrow--bottom:before { border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; visibility: visible; } .arrow--bottom:after { border-width: 1em; border-top-color: #ffffff; bottom: -2em; } .arrow--bottom:before { border-width: 1em; bottom: -2em; } /** Dropdown */ .dropdown__menu { visibility: hidden; opacity: 0; position: absolute; top: 100%; pointer-events: none; } .dropdown:hover .dropdown__menu, .dropdown.active .dropdown__menu, .dropdown.dropdown--active .dropdown__menu { visibility: visible; opacity: 1; pointer-events: all; } .dropdown { position: relative; } .dropdown:hover, .dropdown.active, .dropdown.dropdown--active { z-index: 1; } .dropdown:hover .dropdown__menu, .dropdown.active .dropdown__menu, .dropdown.dropdown--active .dropdown__menu { top: 100%; } .dropdown.dropdown--right .dropdown__menu { left: auto; right: 0; } .dropdown.dropdown--up .dropdown__menu { top: auto; bottom: 100%; } .dropdown.dropdown--up:hover .dropdown__menu, .dropdown.dropdown--up.active .dropdown__menu, .dropdown.dropdown--up.dropdown--active .dropdown__menu { top: auto; bottom: 100%; } .dropdown__menu { -webkit-transition: all, 0.2s, ease-in-out, 0s, outline-color 0.000001s linear 0s; transition: all, 0.2s, ease-in-out, 0s, outline-color 0.000001s linear 0s; outline-color: black; } .dropdown__item { white-space: nowrap; } .dropdown__item > a { padding: 1.1875em 1em; display: block; } .dropdown__menu { background: #f8f9fb; box-shadow: rgba(0, 0, 0, 0.2) 0 4px 6px; -webkit-transition: all 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; transition: all 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; outline-color: black; overflow: hidden; } .dropdown__item { border-top: solid 1px rgba(248, 249, 251, 0.2); -webkit-transition: all 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; transition: all 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; outline-color: black; background-color: white; left: 0; position: relative; color: #293746; -webkit-transition: left 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; transition: left 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; outline-color: black; } .dropdown__item:hover, .dropdown__item.active, .dropdown__item.dropdown--active { left: 5px; } .dropdown__item > a { color: #293746; display: block; width: 100%; } .dropdown .dropdown__menu { background-color: #f8f9fb; } .dropdown--primary .dropdown__menu { background-color: #ec0928; } /** Flags */ .flag { width: 1.5em; height: 1.2em; display: inline-block; vertical-align: middle; } /** Gallery */ .gallery { min-width: 100%; max-width: 100%; width: 100%; position: relative; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background: #293746; } .gallery:before { content: ''; display: block; height: 0; padding-top: 56.25%; } @media screen and (max-width: 640px) { .gallery { width: 100vw; } } @media screen and (max-width: 640px) { .s-dialog .gallery { top: calc((100vh - 40px) / 2); -webkit-transform: translateX(0) translateY(-50%) translateZ(0); transform: translateX(0) translateY(-50%) translateZ(0); } } .gallery__description { position: absolute; bottom: 0; width: 100%; background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#293746)); background: linear-gradient(to bottom, transparent, #293746); color: white; font-size: 1.5vw; padding: 1.1875em 1em; padding-right: 15.625rem; opacity: 0; -webkit-transform: translateX(0) translateY(50%) translateZ(0); transform: translateX(0) translateY(50%) translateZ(0); -webkit-transition: all 0.2s ease-out 0.2s, outline-color 0.000001s linear 0s; transition: all 0.2s ease-out 0.2s, outline-color 0.000001s linear 0s; outline-color: black; } .gallery__description p { -webkit-transition: all 0.2s ease-out 0.3s, outline-color 0.000001s linear 0s; transition: all 0.2s ease-out 0.3s, outline-color 0.000001s linear 0s; outline-color: black; -webkit-transform: translateX(0) translateY(-50px) translateZ(0); transform: translateX(0) translateY(-50px) translateZ(0); opacity: 0; } [active] .gallery__description { opacity: 1; -webkit-transform: translateX(0) translateY(0) translateZ(0); transform: translateX(0) translateY(0) translateZ(0); } [active] .gallery__description p { -webkit-transform: translateX(0) translateY(0) translateZ(0); transform: translateX(0) translateY(0) translateZ(0); opacity: 1; } @media screen and (max-width: 640px) { .gallery__description { display: none !important; } } .gallery__navigation { position: absolute; z-index: 2; bottom: 0.625rem; right: 0.625rem; } .gallery__navigation-item { display: inline-block; padding: 1.1875em 1em; min-height: 3.4375rem; font-size: 1em; background: white; margin-left: 0.3125rem; cursor: pointer; -webkit-transition: all 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; transition: all 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; outline-color: black; } .gallery__navigation-item:hover { background: #293746; color: white; } /** Gallery preview */ .gallery-preview { position: relative; overflow: hidden; } .gallery-preview:before { content: ''; display: block; height: 0; padding-top: 56.25%; } .gallery-preview__image { position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); min-width: 100%; min-height: 100%; max-width: 100%; } .gallery-preview__count { position: absolute; bottom: 0%; right: 0%; padding: 1rem 1.25rem; color: white; font-size: 20px; background: rgba(77, 80, 84, 0.7); } /** Input */ .input, .s-select.input { display: inline-block; font-family: "Open Sans", sans-serif; font-weight: 400; -webkit-appearance: none; -moz-appearance: none; border: none; outline: none; width: 100%; font-size: 1em; } .input:not(.input-addon):not(textarea) { line-height: 1 !important; } .s-select { border-width: 1px; border-bottom-width: 3px; border-style: solid; color: #293746; -webkit-transition: all 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; transition: all 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; outline-color: black; } .s-select::-webkit-input-placeholder { color: rgba(41, 55, 70, 0.4); } .s-select:-moz-placeholder { color: rgba(41, 55, 70, 0.4); } .s-select::-moz-placeholder { color: rgba(41, 55, 70, 0.4); } .s-select:-ms-input-placeholder { color: rgba(41, 55, 70, 0.4); } .input--placeholder { color: rgba(41, 55, 70, 0.4); } [data-input-activator]:focus ~ .s-select, .s-select:focus { border-left-width: 5px; } .s-select:disabled { opacity: 0.25; cursor: not-allowed; } .input { border-radius: 0em; padding: 0 1em; height: 3.375em; } .input:not(input) { padding: 1.1875em 1em; } .input.vr, .vr .input, .input ~  span.vr, .vr .input ~  span { margin-bottom: 1rem; } .input.text-format, .text-format .input, .input ~  span.text-format, .text-format .input ~  span { margin-bottom: 1rem; } textarea.input { height: auto !important; line-height: 1.5; padding: 1.1875em 1em; display: inline-block; } textarea.input.vr, .vr textarea.input { margin-bottom: 1rem; } textarea.input.text-format, .text-format textarea.input { margin-bottom: 1rem; } /** Radiobox */ input[is="s-radiobox"][type="radio"] + .s-radiobox, input[is="s-radiobox"][type="checkbox"] + .s-radiobox { display: inline-block; position: relative; cursor: pointer; vertical-align: middle; } input[is="s-radiobox"][type="radio"] + .s-radiobox:before, input[is="s-radiobox"][type="checkbox"] + .s-radiobox:before { content: ''; display: block; position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0); transform: translateX(-50%) translateY(-50%) translateZ(0); height: 100%; width: 100%; pointer-events: none; } input[is="s-radiobox"][type="radio"] + .s-radiobox:after, input[is="s-radiobox"][type="checkbox"] + .s-radiobox:after { content: ''; display: block; position: absolute; top: 50%; left: 50%; width: 30%; height: 30%; -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0); transform: translateX(-50%) translateY(-50%) translateZ(0); z-index: 1; } input[is="s-radiobox"][type="radio"] { border-radius: 50% !important; } input[is="s-radiobox"][type="radio"] + .s-radiobox, input[is="s-radiobox"][type="radio"] + .s-radiobox:after, input[is="s-radiobox"][type="radio"] + .s-radiobox:before { border-radius: 50% !important; } input[is="s-radiobox"] + .s-radiobox { width: 1.3em; height: 1.3em; } input[is="s-radiobox"] + .s-radiobox:after { border-radius: 0em; } input[is="s-radiobox"] + .s-radiobox:before { border-radius: 0em; } input[is="s-radiobox"]:checked + .s-radiobox:after { border-radius: 0em; } .s-radiobox + span { margin-left: .5em; } input[color="default"] + .s-radiobox:before { background-color: white; border: 1px solid rgba(248, 249, 251, 0.1); } input[color="default"] + .s-radiobox:after { background-color: rgba(248, 249, 251, 0.1); background-color: white; } input[color="default"] + .s-radiobox:hover:after { background-color: rgba(248, 249, 251, 0.15); } input[color="default"] + .s-radiobox:hover:after, input[color="default"] + .s-radiobox:hover:before { width: 60% !important; height: 60% !important; } input[color="default"]:checked + .s-radiobox:after { background-color: #f8f9fb; } input[color="primary"] + .s-radiobox:before { background-color: white; border: 1px solid rgba(236, 9, 40, 0.1); } input[color="primary"] + .s-radiobox:after { background-color: rgba(236, 9, 40, 0.1); background-color: white; } input[color="primary"] + .s-radiobox:hover:after { background-color: rgba(236, 9, 40, 0.15); } input[color="primary"] + .s-radiobox:hover:after, input[color="primary"] + .s-radiobox:hover:before { width: 60% !important; height: 60% !important; } input[color="primary"]:checked + .s-radiobox:after { background-color: #ec0928; } input[color="secondary"] + .s-radiobox:before { background-color: white; border: 1px solid rgba(41, 55, 70, 0.1); } input[color="secondary"] + .s-radiobox:after { background-color: rgba(41, 55, 70, 0.1); background-color: white; } input[color="secondary"] + .s-radiobox:hover:after { background-color: rgba(41, 55, 70, 0.15); } input[color="secondary"] + .s-radiobox:hover:after, input[color="secondary"] + .s-radiobox:hover:before { width: 60% !important; height: 60% !important; } input[color="secondary"]:checked + .s-radiobox:after { background-color: #293746; } input[is="s-radiobox"] + .s-radiobox, input[is="s-radiobox"] + .s-radiobox:before, input[is="s-radiobox"] + .s-radiobox:after { -webkit-transition: all 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; transition: all 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; outline-color: black; } input[is="s-radiobox"]:checked + .s-radiobox:after { width: 40%; height: 40%; } input[is="s-radiobox"] + .s-radiobox { font-size: 1.5em; vertical-align: middle; } input[is="s-radiobox"] + .s-radiobox:before { border: 1px solid #ecf0f4; } /** Placeholder */ .input::-webkit-input-placeholder { color: rgba(41, 55, 70, 0.4); } .input:-moz-placeholder { color: rgba(41, 55, 70, 0.4); } .input::-moz-placeholder { color: rgba(41, 55, 70, 0.4); } .input:-ms-input-placeholder { color: rgba(41, 55, 70, 0.4); } .input--placeholder { color: rgba(41, 55, 70, 0.4); } /** Colors */ .input { border: 1px solid #ecf0f4; background-color: white; } .input:not([type="checkbox"]):not([type="radio"]) { background-color: white; color: #293746; } /** Error */ .input[invalid][dirty] { border-color: #ec0928; color: #ec0928 !important; } .input[invalid][dirty]::-webkit-input-placeholder { color: rgba(236, 9, 40, 0.5); } .input[invalid][dirty]:-moz-placeholder { color: rgba(236, 9, 40, 0.5); } .input[invalid][dirty]::-moz-placeholder { color: rgba(236, 9, 40, 0.5); } .input[invalid][dirty]:-ms-input-placeholder { color: rgba(236, 9, 40, 0.5); } .input--placeholder { color: rgba(236, 9, 40, 0.5); } /** Valid */ .input[valid][dirty][has-value] { border-color: #2fd683; -webkit-transition: all 0.1s ease-in-out 0s, margin-bottom 0.1s ease-in-out 0.2s, outline-color 0.000001s linear 0s; transition: all 0.1s ease-in-out 0s, margin-bottom 0.1s ease-in-out 0.2s, outline-color 0.000001s linear 0s; outline-color: black; } /** Search input */ .input.input--search { background-color: #d3031d !important; color: white !important; border: none; width: 180px !important; } .input.input--search::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.5); } .input.input--search:-moz-placeholder { color: rgba(255, 255, 255, 0.5); } .input.input--search::-moz-placeholder { color: rgba(255, 255, 255, 0.5); } .input.input--search:-ms-input-placeholder { color: rgba(255, 255, 255, 0.5); } .input--placeholder { color: rgba(255, 255, 255, 0.5); } .input.input--as-placeholder { color: rgba(255, 255, 255, 0.5) !important; } /** Select */ .input-select { background: white url(/assets/img/chevron-down.svg) calc(100% - 1em) center no-repeat; padding: 1em !important; line-height: 1.2em !important; } /** Input error styling */ .input-error { margin-top: 0.75rem; color: #ec0928; -webkit-transition: all 0.1s ease-in-out 0.1s, outline-color 0.000001s linear 0s; transition: all 0.1s ease-in-out 0.1s, outline-color 0.000001s linear 0s; outline-color: black; opacity: 0; position: relative; margin-left: 1.25rem; } .input-error--in { opacity: 1; margin-left: 0; } /** Generic list */ .list > li, .text-format ul > li, .text-format ol > li, .text-format dl > li, .markdown-format ul > li, .markdown-format ol > li, .markdown-format dl > li, .list > .list__item, .text-format ul > .list__item, .text-format ol > .list__item, .text-format dl > .list__item, .markdown-format ul > .list__item, .markdown-format ol > .list__item, .markdown-format dl > .list__item { line-height: 1.7; color: #3c5066; } .list.vr, .text-format ul.vr, .text-format ol.vr, .text-format dl.vr, .markdown-format ul.vr, .markdown-format ol.vr, .markdown-format dl.vr, .vr .list, .vr .text-format ul, .text-format .vr ul, .vr .text-format ol, .text-format .vr ol, .vr .text-format dl, .text-format .vr dl, .vr .markdown-format ul, .markdown-format .vr ul, .vr .markdown-format ol, .markdown-format .vr ol, .vr .markdown-format dl, .markdown-format .vr dl { margin-bottom: 1rem; } .list.text-format, .text-format ul.text-format, .text-format ol.text-format, .text-format dl.text-format, .markdown-format ul.text-format, .markdown-format ol.text-format, .markdown-format dl.text-format, .text-format .list, .text-format ul, .text-format ol, .text-format dl, .text-format .markdown-format ul, .markdown-format .text-format ul, .text-format .markdown-format ol, .markdown-format .text-format ol, .text-format .markdown-format dl, .markdown-format .text-format dl { margin-bottom: 1rem; } /** List caption */ .list-caption { background-color: #f8f9fb; padding: 1.1875em 1em; font-family: "Open Sans", sans-serif; font-weight: 700; } /** Striped list */ .list--striped > li, .list--striped > .list__item { line-height: 1; } .list--striped:not(dl) > li:nth-child(even), .list--striped:not(dl) > .list__item:nth-child(even) { background-color: rgba(248, 249, 251, 0.6); } dl.list--striped > li:nth-of-type(2n+2), dl.list--striped > .list__item:nth-of-type(2n+2) { background-color: rgba(248, 249, 251, 0.6); } /** Unordered list */ ul.list, .text-format ul, .markdown-format ul { counter-reset: s-list; } ul.list.vr > li, .text-format ul.vr > li, .markdown-format ul.vr > li, ul.list.vr > .list__item, .text-format ul.vr > .list__item, .markdown-format ul.vr > .list__item, .vr ul.list > li, .vr .text-format ul > li, .text-format .vr ul > li, .vr .markdown-format ul > li, .markdown-format .vr ul > li, .vr ul.list > .list__item, .vr .text-format ul > .list__item, .text-format .vr ul > .list__item, .vr .markdown-format ul > .list__item, .markdown-format .vr ul > .list__item { margin-bottom: 1rem; } ul.list.text-format > li, .text-format ul.text-format > li, .markdown-format ul.text-format > li, ul.list.text-format > .list__item, .text-format ul.text-format > .list__item, .markdown-format ul.text-format > .list__item, .text-format ul.list > li, .text-format ul > li, .text-format .markdown-format ul > li, .markdown-format .text-format ul > li, .text-format ul.list > .list__item, .text-format ul > .list__item, .text-format .markdown-format ul > .list__item, .markdown-format .text-format ul > .list__item { margin-bottom: 1rem; } /** Ordered list */ ol.list, .text-format ol, .markdown-format ol { counter-reset: s-list; } ol.list > li, .text-format ol > li, .markdown-format ol > li, ol.list > .list__item, .text-format ol > .list__item, .markdown-format ol > .list__item { padding-left: 20px; position: relative; } ol.list > li:before, .text-format ol > li:before, .markdown-format ol > li:before, ol.list > .list__item:before, .text-format ol > .list__item:before, .markdown-format ol > .list__item:before { content: counter(s-list, decimal); counter-increment: s-list; } ol.list > li:before, .text-format ol > li:before, .markdown-format ol > li:before, ol.list > .list__item:before, .text-format ol > .list__item:before, .markdown-format ol > .list__item:before { left: 0; color: rgba(41, 55, 70, 0.6) !important; } ol.list > li:before, .text-format ol > li:before, .markdown-format ol > li:before, ol.list > .list__item:before, .text-format ol > .list__item:before, .markdown-format ol > .list__item:before { position: absolute; display: block; } ol.list > li > ul, .text-format ol > li > ul, .markdown-format ol > li > ul, ol.list > li > ol, .text-format ol > li > ol, .markdown-format ol > li > ol, ol.list > li > dl, .text-format ol > li > dl, .markdown-format ol > li > dl, ol.list > .list__item > ul, .text-format ol > .list__item > ul, .markdown-format ol > .list__item > ul, ol.list > .list__item > ol, .text-format ol > .list__item > ol, .markdown-format ol > .list__item > ol, ol.list > .list__item > dl, .text-format ol > .list__item > dl, .markdown-format ol > .list__item > dl { margin-left: 0; margin-bottom: 0; } ol.list > li:before, .text-format ol > li:before, .markdown-format ol > li:before, ol.list > .list__item:before, .text-format ol > .list__item:before, .markdown-format ol > .list__item:before { -webkit-transition: all, 0.2s, ease-in-out, 0s, outline-color 0.000001s linear 0s; transition: all, 0.2s, ease-in-out, 0s, outline-color 0.000001s linear 0s; outline-color: black; margin-left: 0; border-radius: 0.1875rem; } ol.list > li:focus:before, .text-format ol > li:focus:before, .markdown-format ol > li:focus:before, ol.list > li:hover:before, .text-format ol > li:hover:before, .markdown-format ol > li:hover:before, ol.list > .list__item:focus:before, .text-format ol > .list__item:focus:before, .markdown-format ol > .list__item:focus:before, ol.list > .list__item:hover:before, .text-format ol > .list__item:hover:before, .markdown-format ol > .list__item:hover:before { background-color: #ec0928; color: white !important; padding: 0 0.25rem 0 0.25rem; margin-left: -0.25rem; } ol.list > li.vr, .text-format ol > li.vr, .markdown-format ol > li.vr, .vr ol.list > li, .vr .text-format ol > li, .text-format .vr ol > li, .vr .markdown-format ol > li, .markdown-format .vr ol > li, ol.list > .list__item.vr, .text-format ol > .list__item.vr, .markdown-format ol > .list__item.vr, .vr ol.list > .list__item, .vr .text-format ol > .list__item, .text-format .vr ol > .list__item, .vr .markdown-format ol > .list__item, .markdown-format .vr ol > .list__item { margin-bottom: 1rem; } ol.list > li.text-format, .text-format ol > li.text-format, .markdown-format ol > li.text-format, .text-format ol.list > li, .text-format ol > li, .text-format .markdown-format ol > li, .markdown-format .text-format ol > li, ol.list > .list__item.text-format, .text-format ol > .list__item.text-format, .markdown-format ol > .list__item.text-format, .text-format ol.list > .list__item, .text-format ol > .list__item, .text-format .markdown-format ol > .list__item, .markdown-format .text-format ol > .list__item { margin-bottom: 1rem; } ol.list.list--primary > li:before, .text-format ol > li:before, .markdown-format ol.list--primary > li:before, .markdown-format .text-format ol > li:before, .text-format .markdown-format ol > li:before, ol.list.list--primary > .list__item:before, .text-format ol > .list__item:before, .markdown-format ol.list--primary > .list__item:before, .markdown-format .text-format ol > .list__item:before, .text-format .markdown-format ol > .list__item:before { color: #ec0928; } /** Definition list */ dl.list > dt, .text-format dl > dt, .markdown-format dl > dt, dl.list > dd, .text-format dl > dd, .markdown-format dl > dd, dl.list .list__item, .text-format dl .list__item, .markdown-format dl .list__item { padding: 1.1875em 1em; } dl.list > dt, .text-format dl > dt, .markdown-format dl > dt, dl.list dt.list__item, .text-format dl dt.list__item, .markdown-format dl dt.list__item { float: left; font-family: "Open Sans", sans-serif; font-weight: 700; } dl.list > dd, .text-format dl > dd, .markdown-format dl > dd, dl.list dd.list__item, .text-format dl dd.list__item, .markdown-format dl dd.list__item { padding-left: 33%; text-align: right; } /** List bullet (puce for compatibility) */ ul.list--puce > li, ul.list--puce > .list__item, ul.list--bullet > li, ul.list--bullet > .list__item, ol.list--puce > li, ol.list--puce > .list__item, ol.list--bullet > li, ol.list--bullet > .list__item { padding-left: 20px; position: relative; position: relative; } ul.list--puce > li:before, ul.list--puce > .list__item:before, ul.list--bullet > li:before, ul.list--bullet > .list__item:before, ol.list--puce > li:before, ol.list--puce > .list__item:before, ol.list--bullet > li:before, ol.list--bullet > .list__item:before { left: 0; color: #d8dde8 !important; } ul.list--puce > li:before, ul.list--puce > .list__item:before, ul.list--bullet > li:before, ul.list--bullet > .list__item:before, ol.list--puce > li:before, ol.list--puce > .list__item:before, ol.list--bullet > li:before, ol.list--bullet > .list__item:before { position: absolute; display: block; } ul.list--puce > li > ul, ul.list--puce > li > ol, ul.list--puce > li > dl, ul.list--puce > .list__item > ul, ul.list--puce > .list__item > ol, ul.list--puce > .list__item > dl, ul.list--bullet > li > ul, ul.list--bullet > li > ol, ul.list--bullet > li > dl, ul.list--bullet > .list__item > ul, ul.list--bullet > .list__item > ol, ul.list--bullet > .list__item > dl, ol.list--puce > li > ul, ol.list--puce > li > ol, ol.list--puce > li > dl, ol.list--puce > .list__item > ul, ol.list--puce > .list__item > ol, ol.list--puce > .list__item > dl, ol.list--bullet > li > ul, ol.list--bullet > li > ol, ol.list--bullet > li > dl, ol.list--bullet > .list__item > ul, ol.list--bullet > .list__item > ol, ol.list--bullet > .list__item > dl { margin-left: 0; margin-bottom: 0; } ul.list--puce.list--primary > li, .text-format ul.list--puce > li, ul.list--puce.list--primary > .list__item, .text-format ul.list--puce > .list__item, ul.list--bullet.list--primary > li, .text-format ul.list--bullet > li, ul.list--bullet.list--primary > .list__item, .text-format ul.list--bullet > .list__item, ol.list--puce.list--primary > li, .text-format ol.list--puce > li, ol.list--puce.list--primary > .list__item, .text-format ol.list--puce > .list__item, ol.list--bullet.list--primary > li, .text-format ol.list--bullet > li, ol.list--bullet.list--primary > .list__item, .text-format ol.list--bullet > .list__item { padding-left: 20px; position: relative; position: relative; } ul.list--puce.list--primary > li:before, .text-format ul.list--puce > li:before, ul.list--puce.list--primary > .list__item:before, .text-format ul.list--puce > .list__item:before, ul.list--bullet.list--primary > li:before, .text-format ul.list--bullet > li:before, ul.list--bullet.list--primary > .list__item:before, .text-format ul.list--bullet > .list__item:before, ol.list--puce.list--primary > li:before, .text-format ol.list--puce > li:before, ol.list--puce.list--primary > .list__item:before, .text-format ol.list--puce > .list__item:before, ol.list--bullet.list--primary > li:before, .text-format ol.list--bullet > li:before, ol.list--bullet.list--primary > .list__item:before, .text-format ol.list--bullet > .list__item:before { left: 0; color: #ec0928 !important; } ul.list--puce.list--primary > li:before, .text-format ul.list--puce > li:before, ul.list--puce.list--primary > .list__item:before, .text-format ul.list--puce > .list__item:before, ul.list--bullet.list--primary > li:before, .text-format ul.list--bullet > li:before, ul.list--bullet.list--primary > .list__item:before, .text-format ul.list--bullet > .list__item:before, ol.list--puce.list--primary > li:before, .text-format ol.list--puce > li:before, ol.list--puce.list--primary > .list__item:before, .text-format ol.list--puce > .list__item:before, ol.list--bullet.list--primary > li:before, .text-format ol.list--bullet > li:before, ol.list--bullet.list--primary > .list__item:before, .text-format ol.list--bullet > .list__item:before { position: absolute; display: block; } ul.list--puce.list--primary > li > ul, .text-format ul.list--puce > li > ul, ul.list--puce.list--primary > li > ol, .text-format ul.list--puce > li > ol, ul.list--puce.list--primary > li > dl, .text-format ul.list--puce > li > dl, ul.list--puce.list--primary > .list__item > ul, .text-format ul.list--puce > .list__item > ul, ul.list--puce.list--primary > .list__item > ol, .text-format ul.list--puce > .list__item > ol, ul.list--puce.list--primary > .list__item > dl, .text-format ul.list--puce > .list__item > dl, ul.list--bullet.list--primary > li > ul, .text-format ul.list--bullet > li > ul, ul.list--bullet.list--primary > li > ol, .text-format ul.list--bullet > li > ol, ul.list--bullet.list--primary > li > dl, .text-format ul.list--bullet > li > dl, ul.list--bullet.list--primary > .list__item > ul, .text-format ul.list--bullet > .list__item > ul, ul.list--bullet.list--primary > .list__item > ol, .text-format ul.list--bullet > .list__item > ol, ul.list--bullet.list--primary > .list__item > dl, .text-format ul.list--bullet > .list__item > dl, ol.list--puce.list--primary > li > ul, .text-format ol.list--puce > li > ul, ol.list--puce.list--primary > li > ol, .text-format ol.list--puce > li > ol, ol.list--puce.list--primary > li > dl, .text-format ol.list--puce > li > dl, ol.list--puce.list--primary > .list__item > ul, .text-format ol.list--puce > .list__item > ul, ol.list--puce.list--primary > .list__item > ol, .text-format ol.list--puce > .list__item > ol, ol.list--puce.list--primary > .list__item > dl, .text-format ol.list--puce > .list__item > dl, ol.list--bullet.list--primary > li > ul, .text-format ol.list--bullet > li > ul, ol.list--bullet.list--primary > li > ol, .text-format ol.list--bullet > li > ol, ol.list--bullet.list--primary > li > dl, .text-format ol.list--bullet > li > dl, ol.list--bullet.list--primary > .list__item > ul, .text-format ol.list--bullet > .list__item > ul, ol.list--bullet.list--primary > .list__item > ol, .text-format ol.list--bullet > .list__item > ol, ol.list--bullet.list--primary > .list__item > dl, .text-format ol.list--bullet > .list__item > dl { margin-left: 0; margin-bottom: 0; } /** List bullet alpadia (puce for compatibility) */ ul.list--puce-alpadia > li, ul.list--puce-alpadia > .list__item, ul.list--alpadia > li, .text-format ul > li, ul.list--alpadia > .list__item, .text-format ul > .list__item, ol.list--puce-alpadia > li, ol.list--puce-alpadia > .list__item, ol.list--alpadia > li, ol.list--alpadia > .list__item { padding-left: 25px; position: relative; position: relative; } ul.list--puce-alpadia > li:before, ul.list--puce-alpadia > .list__item:before, ul.list--alpadia > li:before, .text-format ul > li:before, ul.list--alpadia > .list__item:before, .text-format ul > .list__item:before, ol.list--puce-alpadia > li:before, ol.list--puce-alpadia > .list__item:before, ol.list--alpadia > li:before, ol.list--alpadia > .list__item:before { left: 0; color: #d8dde8 !important; } ul.list--puce-alpadia > li:before, ul.list--puce-alpadia > .list__item:before, ul.list--alpadia > li:before, .text-format ul > li:before, ul.list--alpadia > .list__item:before, .text-format ul > .list__item:before, ol.list--puce-alpadia > li:before, ol.list--puce-alpadia > .list__item:before, ol.list--alpadia > li:before, ol.list--alpadia > .list__item:before { position: absolute; display: block; } ul.list--puce-alpadia > li > ul, ul.list--puce-alpadia > li > ol, ul.list--puce-alpadia > li > dl, ul.list--puce-alpadia > .list__item > ul, ul.list--puce-alpadia > .list__item > ol, ul.list--puce-alpadia > .list__item > dl, ul.list--alpadia > li > ul, .text-format ul > li > ul, ul.list--alpadia > li > ol, .text-format ul > li > ol, ul.list--alpadia > li > dl, .text-format ul > li > dl, ul.list--alpadia > .list__item > ul, .text-format ul > .list__item > ul, ul.list--alpadia > .list__item > ol, .text-format ul > .list__item > ol, ul.list--alpadia > .list__item > dl, .text-format ul > .list__item > dl, ol.list--puce-alpadia > li > ul, ol.list--puce-alpadia > li > ol, ol.list--puce-alpadia > li > dl, ol.list--puce-alpadia > .list__item > ul, ol.list--puce-alpadia > .list__item > ol, ol.list--puce-alpadia > .list__item > dl, ol.list--alpadia > li > ul, ol.list--alpadia > li > ol, ol.list--alpadia > li > dl, ol.list--alpadia > .list__item > ul, ol.list--alpadia > .list__item > ol, ol.list--alpadia > .list__item > dl { margin-left: 0; margin-bottom: 0; } ul.list--puce-alpadia.list--primary > li, .text-format ul.list--puce-alpadia > li, ul.list--puce-alpadia.list--primary > .list__item, .text-format ul.list--puce-alpadia > .list__item, ul.list--alpadia.list--primary > li, .text-format ul > li, ul.list--alpadia.list--primary > .list__item, .text-format ul > .list__item, ol.list--puce-alpadia.list--primary > li, .text-format ol.list--puce-alpadia > li, ol.list--puce-alpadia.list--primary > .list__item, .text-format ol.list--puce-alpadia > .list__item, ol.list--alpadia.list--primary > li, .text-format ol.list--alpadia > li, ol.list--alpadia.list--primary > .list__item, .text-format ol.list--alpadia > .list__item { padding-left: 25px; position: relative; position: relative; } ul.list--puce-alpadia.list--primary > li:before, .text-format ul.list--puce-alpadia > li:before, ul.list--puce-alpadia.list--primary > .list__item:before, .text-format ul.list--puce-alpadia > .list__item:before, ul.list--alpadia.list--primary > li:before, .text-format ul > li:before, ul.list--alpadia.list--primary > .list__item:before, .text-format ul > .list__item:before, ol.list--puce-alpadia.list--primary > li:before, .text-format ol.list--puce-alpadia > li:before, ol.list--puce-alpadia.list--primary > .list__item:before, .text-format ol.list--puce-alpadia > .list__item:before, ol.list--alpadia.list--primary > li:before, .text-format ol.list--alpadia > li:before, ol.list--alpadia.list--primary > .list__item:before, .text-format ol.list--alpadia > .list__item:before { left: 0; color: #ec0928 !important; } ul.list--puce-alpadia.list--primary > li:before, .text-format ul.list--puce-alpadia > li:before, ul.list--puce-alpadia.list--primary > .list__item:before, .text-format ul.list--puce-alpadia > .list__item:before, ul.list--alpadia.list--primary > li:before, .text-format ul > li:before, ul.list--alpadia.list--primary > .list__item:before, .text-format ul > .list__item:before, ol.list--puce-alpadia.list--primary > li:before, .text-format ol.list--puce-alpadia > li:before, ol.list--puce-alpadia.list--primary > .list__item:before, .text-format ol.list--puce-alpadia > .list__item:before, ol.list--alpadia.list--primary > li:before, .text-format ol.list--alpadia > li:before, ol.list--alpadia.list--primary > .list__item:before, .text-format ol.list--alpadia > .list__item:before { position: absolute; display: block; } ul.list--puce-alpadia.list--primary > li > ul, .text-format ul.list--puce-alpadia > li > ul, ul.list--puce-alpadia.list--primary > li > ol, .text-format ul.list--puce-alpadia > li > ol, ul.list--puce-alpadia.list--primary > li > dl, .text-format ul.list--puce-alpadia > li > dl, ul.list--puce-alpadia.list--primary > .list__item > ul, .text-format ul.list--puce-alpadia > .list__item > ul, ul.list--puce-alpadia.list--primary > .list__item > ol, .text-format ul.list--puce-alpadia > .list__item > ol, ul.list--puce-alpadia.list--primary > .list__item > dl, .text-format ul.list--puce-alpadia > .list__item > dl, ul.list--alpadia.list--primary > li > ul, .text-format ul > li > ul, ul.list--alpadia.list--primary > li > ol, .text-format ul > li > ol, ul.list--alpadia.list--primary > li > dl, .text-format ul > li > dl, ul.list--alpadia.list--primary > .list__item > ul, .text-format ul > .list__item > ul, ul.list--alpadia.list--primary > .list__item > ol, .text-format ul > .list__item > ol, ul.list--alpadia.list--primary > .list__item > dl, .text-format ul > .list__item > dl, ol.list--puce-alpadia.list--primary > li > ul, .text-format ol.list--puce-alpadia > li > ul, ol.list--puce-alpadia.list--primary > li > ol, .text-format ol.list--puce-alpadia > li > ol, ol.list--puce-alpadia.list--primary > li > dl, .text-format ol.list--puce-alpadia > li > dl, ol.list--puce-alpadia.list--primary > .list__item > ul, .text-format ol.list--puce-alpadia > .list__item > ul, ol.list--puce-alpadia.list--primary > .list__item > ol, .text-format ol.list--puce-alpadia > .list__item > ol, ol.list--puce-alpadia.list--primary > .list__item > dl, .text-format ol.list--puce-alpadia > .list__item > dl, ol.list--alpadia.list--primary > li > ul, .text-format ol.list--alpadia > li > ul, ol.list--alpadia.list--primary > li > ol, .text-format ol.list--alpadia > li > ol, ol.list--alpadia.list--primary > li > dl, .text-format ol.list--alpadia > li > dl, ol.list--alpadia.list--primary > .list__item > ul, .text-format ol.list--alpadia > .list__item > ul, ol.list--alpadia.list--primary > .list__item > ol, .text-format ol.list--alpadia > .list__item > ol, ol.list--alpadia.list--primary > .list__item > dl, .text-format ol.list--alpadia > .list__item > dl { margin-left: 0; margin-bottom: 0; } /** Sidemenu list */ .list--sidemenu .list__item { margin-bottom: 0.5em; } /** Sitemap */ .list--sitemap > li { width: 33.33333333%; } .list--sitemap > li:nth-of-type(3n+1) { clear: both; } /** Need help styling */ alp-need-help { position: fixed; right: 0; top: 20vh; display: block; width: 21.25rem; z-index: 10; background-color: #ec0928; padding: 1.25rem; -webkit-transform: translateX(150%) translateY(0) translateZ(0); transform: translateX(150%) translateY(0) translateZ(0); -webkit-transition: all 0.2s ease-in-out 0.1s, outline-color 0.000001s linear 0s; transition: all 0.2s ease-in-out 0.1s, outline-color 0.000001s linear 0s; outline-color: black; background-image: url("/assets/img/alpadia-logo--grey-transparent.svg"); background-repeat: no-repeat; background-size: 300px auto; background-position: 50% 50%; } @media screen and (max-width: 640px) { alp-need-help { display: none; } } .need-help--visible alp-need-help { -webkit-transform: translateX(100%) translateY(0) translateZ(0); transform: translateX(100%) translateY(0) translateZ(0); } .need-help--cta-visible alp-need-help { -webkit-transform: translateX(0) translateY(0) translateZ(0); transform: translateX(0) translateY(0) translateZ(0); } .need-help--visible.need-help--opened alp-need-help { -webkit-transform: translateX(0) translateY(0) translateZ(0); transform: translateX(0) translateY(0) translateZ(0); box-shadow: rgba(0, 0, 0, 0.2) 0 10px 15px; } .need-help--visible.need-help--opened alp-need-help .need-help__cta { background-color: #d3031d; } .need-help__cta { background-color: #ec0928; position: absolute; top: 0; left: 0; -webkit-transform: translateX(-100%) translateY(0) translateZ(0); transform: translateX(-100%) translateY(0) translateZ(0); padding: 0.75rem 1.25rem; font-size: 1rem; } .need-help__cta .icon-cross, .need-help__cta .s-dialog__close { display: none; cursor: pointer; } .need-help--visible.need-help--opened .need-help__cta .icon-cross, .need-help--visible.need-help--opened .need-help__cta .s-dialog__close, .need-help--cta-visible .need-help__cta .icon-cross, .need-help--cta-visible .need-help__cta .s-dialog__close { display: block; } .need-help--visible.need-help--opened .need-help__cta .icon-help, .need-help--cta-visible .need-help__cta .icon-help { display: none; } s-read-more { -webkit-transition: max-height 0.2s ease-in-out 0s, outline-color 0.000001s linear 0s; transition: max-height 0.2s ease-in-out 0s, outline-color 0.000001s linear 0s; outline-color: black; position: relative; display: block; overflow: hidden; } s-read-more a { pointer-events: all; } s-read-more[disabled], s-read-more:empty { padding-bottom: 0 !important; } s-read-more[disabled]:before, s-read-more[disabled]:after, s-read-more:empty:before, s-read-more:empty:after { display: none !important; } s-read-more:before { display: block; opacity: 1; background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(3rem, rgba(255, 255, 255, 0))); background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0) 3rem); mix-blend-mode: normal; -webkit-transition: all, 0.2s, ease-in-out, 0s, outline-color 0.000001s linear 0s; transition: all, 0.2s, ease-in-out, 0s, outline-color 0.000001s linear 0s; outline-color: black; position: absolute; bottom: 0; left: -1px; top: 0; right: 0; height: 100%; content: ''; z-index: 1; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } @-moz-document url-prefix() { s-read-more:before { mix-blend-mode: normal; } } s-read-more[more] { padding-bottom: 30px; } s-read-more[more]:after { pointer-events: all; } s-read-more[more]:before { background: linear-gradient(to bottom, #fff 20px, rgba(255, 255, 255, 0)); } s-read-more[more]:after { content: attr(more); cursor: pointer; position: absolute; z-index: 1; bottom: 0; left: 0; border-bottom: 0 solid #ec0928; pointer-events: all; -webkit-transition: background 0.3s, color 0.3s; transition: background 0.3s, color 0.3s; cursor: default; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; padding: 8px 16px; border: 0; border-radius: 2px; box-shadow: var(--elem__shadow); font: 600 16px / 24px "Open Sans", sans-serif; text-decoration: none; outline: none; background: var(--btn__bg); margin-bottom: 8px; letter-spacing: 0.03em; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } s-read-more[more]:after:hover { text-decoration: underline; border-bottom-width: 3px; } s-read-more[active]:before, s-read-more.active:before { opacity: 0; pointer-events: none; } s-read-more[active][less]:after, s-read-more.active[less]:after { content: attr(less); } s-read-more[disabled] { pointer-events: all !important; max-height: none !important; overflow: visible !important; } .bkg-lightgrey s-read-more:before, .read-more--lightgrey:before { background: -webkit-gradient(linear, left top, left bottom, from(#F8F9FB), to(rgba(255, 255, 255, 0))); background: linear-gradient(to bottom, #F8F9FB, rgba(255, 255, 255, 0)); } .bkg-lightgrey s-read-more[more]:before, .read-more--lightgrey[more]:before { background: linear-gradient(to bottom, #F8F9FB 20px, rgba(255, 255, 255, 0)); } .card s-read-more:before { background: -webkit-gradient(linear, left top, left bottom, from(white), to(rgba(255, 255, 255, 0))); background: linear-gradient(to bottom, white, rgba(255, 255, 255, 0)); } .card s-read-more[more]:before { background: linear-gradient(to bottom, white 20px, rgba(255, 255, 255, 0)); } .read-more-block, .read-more--block { padding-bottom: calc(3.375em + 1.25rem) !important; } .read-more-block[disabled], .read-more--block[disabled] { padding-bottom: 0 !important; } .read-more-block:before, .read-more--block:before { max-height: 200px; top: auto; } .read-more-block:after, .read-more--block:after { background: #F8F9FB; border: 1px solid #ecf0f4 !important; text-align: center; padding: 1.1875em 1em; font-size: 1em; color: #293746 !important; } /** Read more equalizer */ /** Sizes */ .read-more { max-height: 150px; } .read-more--smaller { max-height: 50px; } .read-more--small { max-height: 100px; } .read-more--medium { max-height: 200px; } .read-more--big { max-height: 250px; } .read-more--big { max-height: 300px; } /** addthis styling */ .pin_it_iframe_widget { display: none !important; } s-corner-badge { position: absolute; display: block; } s-corner-badge > * { position: relative; } s-corner-badge:before { content: ''; display: block; position: absolute; border-style: solid; border-color: transparent; } s-corner-badge { font-size: 1em; width: 3em; height: 3em; padding: 0.4em; } s-corner-badge:before { border-width: 1.5em; } s-corner-badge[align="tl"] { top: 0; left: 0; } s-corner-badge[align="tl"]:before { border-right-color: transparent !important; border-bottom-color: transparent !important; border-left-color: transparent !important; top: 0; left: 0; } s-corner-badge[align="tr"] { top: 0; right: 0; text-align: right; } s-corner-badge[align="tr"]:before { border-bottom-color: transparent !important; border-left-color: transparent !important; top: 0; right: 0; } s-corner-badge[align="bl"] { bottom: 0; left: 0; } s-corner-badge[align="bl"]:before { border-top-color: transparent !important; border-right-color: transparent !important; border-bottom-color: transparent !important; bottom: 0; left: 0; } s-corner-badge[align="br"] { bottom: 0; right: 0; } s-corner-badge[align="br"]:before { border-top-color: transparent !important; border-right-color: transparent !important; border-left-color: transparent !important; bottom: 0; right: 0; } s-corner-badge[color="primary"] { color: white; } s-corner-badge[color="primary"]:before { border-color: #ec0928; } s-corner-badge[color="secondary"] { color: white; } s-corner-badge[color="secondary"]:before { border-color: #293746; } s-corner-badge[color="junior"] { color: white; } s-corner-badge[color="junior"]:before { border-color: #00a8e2; } s-corner-badge { text-shadow: rgba(0, 0, 0, 0.2) 0 0 5px; } s-corner-badge[align="tr"] { padding-left: 1.5rem; text-align: right; } .flatpickr-calendar.open { box-shadow: rgba(0, 0, 0, 0.2) 0 12px 18px; } .flatpickr-calendar { -webkit-transition: margin-top 0.1s ease-in-out 0s, opacity 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; transition: margin-top 0.1s ease-in-out 0s, opacity 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; outline-color: black; border-radius: 0em; } .flatpickr-month { color: #293746; fill: #293746; } .flatpickr-day { border-radius: 0em; -webkit-transition: all 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; transition: all 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; outline-color: black; } .flatpickr-calendar[color="default"] .flatpickr-day.inRange, .flatpickr-calendar[color="default"] .flatpickr-day.nextMonthDay.inRange, .flatpickr-calendar[color="default"] .flatpickr-day.nextMonthDay:focus, .flatpickr-calendar[color="default"] .flatpickr-day.nextMonthDay:hover, .flatpickr-calendar[color="default"] .flatpickr-day.prevMonthDay.inRange, .flatpickr-calendar[color="default"] .flatpickr-day.prevMonthDay:focus, .flatpickr-calendar[color="default"] .flatpickr-day.prevMonthDay:hover, .flatpickr-calendar[color="default"] .flatpickr-day:focus:not(.disabled), .flatpickr-calendar[color="default"] .flatpickr-day:hover:not(.disabled) { cursor: pointer; outline: 0; background: rgba(248, 249, 251, 0.1); } .flatpickr-calendar[color="default"] .flatpickr-day.today { color: #f8f9fb; font-weight: bold; } .flatpickr-calendar[color="default"] .flatpickr-day.selected, .flatpickr-calendar[color="default"] .flatpickr-day.selected.nextMonthDay, .flatpickr-calendar[color="default"] .flatpickr-day.selected.prevMonthDay, .flatpickr-calendar[color="default"] .flatpickr-day.selected:focus, .flatpickr-calendar[color="default"] .flatpickr-day.selected:hover { background: #f8f9fb; color: #fff; } .flatpickr-calendar[color="default"] .flatpickr-time input:focus, .flatpickr-calendar[color="default"] .flatpickr-time input:hover { background: rgba(248, 249, 251, 0.1); } .flatpickr-calendar[color="default"] .flatpickr-am-pm:focus, .flatpickr-calendar[color="default"] .flatpickr-am-pm:hover { background: rgba(248, 249, 251, 0.1); } .flatpickr-calendar[color="default"] .flatpickr-current-month .cur-year:hover { background: rgba(248, 249, 251, 0.1); } .flatpickr-calendar[color="default"] .flatpickr-rContainer + .flatpickr-time { border-top: 1px solid rgba(248, 249, 251, 0.1); } .flatpickr-calendar[color="default"] .flatpickr-weekwrapper .flatpickr-weeks { border-right: 1px solid rgba(248, 249, 251, 0.1); } .flatpickr-calendar[color="default"] .flatpickr-next-month svg:hover, .flatpickr-calendar[color="default"] .flatpickr-prev-month svg:hover { fill: #f8f9fb; } .flatpickr-calendar[color="default"] .flatpickr-next-month:hover, .flatpickr-calendar[color="default"] .flatpickr-prev-month:hover { color: #f8f9fb; } .flatpickr-calendar[color="primary"] .flatpickr-day.inRange, .flatpickr-calendar[color="primary"] .flatpickr-day.nextMonthDay.inRange, .flatpickr-calendar[color="primary"] .flatpickr-day.nextMonthDay:focus, .flatpickr-calendar[color="primary"] .flatpickr-day.nextMonthDay:hover, .flatpickr-calendar[color="primary"] .flatpickr-day.prevMonthDay.inRange, .flatpickr-calendar[color="primary"] .flatpickr-day.prevMonthDay:focus, .flatpickr-calendar[color="primary"] .flatpickr-day.prevMonthDay:hover, .flatpickr-calendar[color="primary"] .flatpickr-day:focus:not(.disabled), .flatpickr-calendar[color="primary"] .flatpickr-day:hover:not(.disabled) { cursor: pointer; outline: 0; background: rgba(236, 9, 40, 0.1); } .flatpickr-calendar[color="primary"] .flatpickr-day.today { color: #ec0928; font-weight: bold; } .flatpickr-calendar[color="primary"] .flatpickr-day.selected, .flatpickr-calendar[color="primary"] .flatpickr-day.selected.nextMonthDay, .flatpickr-calendar[color="primary"] .flatpickr-day.selected.prevMonthDay, .flatpickr-calendar[color="primary"] .flatpickr-day.selected:focus, .flatpickr-calendar[color="primary"] .flatpickr-day.selected:hover { background: #ec0928; color: #fff; } .flatpickr-calendar[color="primary"] .flatpickr-time input:focus, .flatpickr-calendar[color="primary"] .flatpickr-time input:hover { background: rgba(236, 9, 40, 0.1); } .flatpickr-calendar[color="primary"] .flatpickr-am-pm:focus, .flatpickr-calendar[color="primary"] .flatpickr-am-pm:hover { background: rgba(236, 9, 40, 0.1); } .flatpickr-calendar[color="primary"] .flatpickr-current-month .cur-year:hover { background: rgba(236, 9, 40, 0.1); } .flatpickr-calendar[color="primary"] .flatpickr-rContainer + .flatpickr-time { border-top: 1px solid rgba(236, 9, 40, 0.1); } .flatpickr-calendar[color="primary"] .flatpickr-weekwrapper .flatpickr-weeks { border-right: 1px solid rgba(236, 9, 40, 0.1); } .flatpickr-calendar[color="primary"] .flatpickr-next-month svg:hover, .flatpickr-calendar[color="primary"] .flatpickr-prev-month svg:hover { fill: #ec0928; } .flatpickr-calendar[color="primary"] .flatpickr-next-month:hover, .flatpickr-calendar[color="primary"] .flatpickr-prev-month:hover { color: #ec0928; } .flatpickr-calendar[color="secondary"] .flatpickr-day.inRange, .flatpickr-calendar[color="secondary"] .flatpickr-day.nextMonthDay.inRange, .flatpickr-calendar[color="secondary"] .flatpickr-day.nextMonthDay:focus, .flatpickr-calendar[color="secondary"] .flatpickr-day.nextMonthDay:hover, .flatpickr-calendar[color="secondary"] .flatpickr-day.prevMonthDay.inRange, .flatpickr-calendar[color="secondary"] .flatpickr-day.prevMonthDay:focus, .flatpickr-calendar[color="secondary"] .flatpickr-day.prevMonthDay:hover, .flatpickr-calendar[color="secondary"] .flatpickr-day:focus:not(.disabled), .flatpickr-calendar[color="secondary"] .flatpickr-day:hover:not(.disabled) { cursor: pointer; outline: 0; background: rgba(41, 55, 70, 0.1); } .flatpickr-calendar[color="secondary"] .flatpickr-day.today { color: #293746; font-weight: bold; } .flatpickr-calendar[color="secondary"] .flatpickr-day.selected, .flatpickr-calendar[color="secondary"] .flatpickr-day.selected.nextMonthDay, .flatpickr-calendar[color="secondary"] .flatpickr-day.selected.prevMonthDay, .flatpickr-calendar[color="secondary"] .flatpickr-day.selected:focus, .flatpickr-calendar[color="secondary"] .flatpickr-day.selected:hover { background: #293746; color: #fff; } .flatpickr-calendar[color="secondary"] .flatpickr-time input:focus, .flatpickr-calendar[color="secondary"] .flatpickr-time input:hover { background: rgba(41, 55, 70, 0.1); } .flatpickr-calendar[color="secondary"] .flatpickr-am-pm:focus, .flatpickr-calendar[color="secondary"] .flatpickr-am-pm:hover { background: rgba(41, 55, 70, 0.1); } .flatpickr-calendar[color="secondary"] .flatpickr-current-month .cur-year:hover { background: rgba(41, 55, 70, 0.1); } .flatpickr-calendar[color="secondary"] .flatpickr-rContainer + .flatpickr-time { border-top: 1px solid rgba(41, 55, 70, 0.1); } .flatpickr-calendar[color="secondary"] .flatpickr-weekwrapper .flatpickr-weeks { border-right: 1px solid rgba(41, 55, 70, 0.1); } .flatpickr-calendar[color="secondary"] .flatpickr-next-month svg:hover, .flatpickr-calendar[color="secondary"] .flatpickr-prev-month svg:hover { fill: #293746; } .flatpickr-calendar[color="secondary"] .flatpickr-next-month:hover, .flatpickr-calendar[color="secondary"] .flatpickr-prev-month:hover { color: #293746; } .flatpickr-calendar[color="success"] .flatpickr-day.inRange, .flatpickr-calendar[color="success"] .flatpickr-day.nextMonthDay.inRange, .flatpickr-calendar[color="success"] .flatpickr-day.nextMonthDay:focus, .flatpickr-calendar[color="success"] .flatpickr-day.nextMonthDay:hover, .flatpickr-calendar[color="success"] .flatpickr-day.prevMonthDay.inRange, .flatpickr-calendar[color="success"] .flatpickr-day.prevMonthDay:focus, .flatpickr-calendar[color="success"] .flatpickr-day.prevMonthDay:hover, .flatpickr-calendar[color="success"] .flatpickr-day:focus:not(.disabled), .flatpickr-calendar[color="success"] .flatpickr-day:hover:not(.disabled) { cursor: pointer; outline: 0; background: rgba(47, 214, 131, 0.1); } .flatpickr-calendar[color="success"] .flatpickr-day.today { color: #2fd683; font-weight: bold; } .flatpickr-calendar[color="success"] .flatpickr-day.selected, .flatpickr-calendar[color="success"] .flatpickr-day.selected.nextMonthDay, .flatpickr-calendar[color="success"] .flatpickr-day.selected.prevMonthDay, .flatpickr-calendar[color="success"] .flatpickr-day.selected:focus, .flatpickr-calendar[color="success"] .flatpickr-day.selected:hover { background: #2fd683; color: #fff; } .flatpickr-calendar[color="success"] .flatpickr-time input:focus, .flatpickr-calendar[color="success"] .flatpickr-time input:hover { background: rgba(47, 214, 131, 0.1); } .flatpickr-calendar[color="success"] .flatpickr-am-pm:focus, .flatpickr-calendar[color="success"] .flatpickr-am-pm:hover { background: rgba(47, 214, 131, 0.1); } .flatpickr-calendar[color="success"] .flatpickr-current-month .cur-year:hover { background: rgba(47, 214, 131, 0.1); } .flatpickr-calendar[color="success"] .flatpickr-rContainer + .flatpickr-time { border-top: 1px solid rgba(47, 214, 131, 0.1); } .flatpickr-calendar[color="success"] .flatpickr-weekwrapper .flatpickr-weeks { border-right: 1px solid rgba(47, 214, 131, 0.1); } .flatpickr-calendar[color="success"] .flatpickr-next-month svg:hover, .flatpickr-calendar[color="success"] .flatpickr-prev-month svg:hover { fill: #2fd683; } .flatpickr-calendar[color="success"] .flatpickr-next-month:hover, .flatpickr-calendar[color="success"] .flatpickr-prev-month:hover { color: #2fd683; } /** Pagination */ s-pagination { display: block; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } s-pagination-item { display: inline-block; border-radius: 0em; padding: 1.1875em 1em; height: 3.375em; line-height: 1; margin-right: 0.5em; cursor: pointer; } s-pagination-item:last-of-type { margin-right: 0; } s-pagination-item[disabled] { opacity: .3; pointer-events: none; } s-pagination-item { background: #F8F9FB; color: #293746; -webkit-transition: all 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; transition: all 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; outline-color: black; } s-pagination-item:hover { background: #ebedf1; } s-pagination-item[active] { background: #293746; color: white; } s-tooltip { position: absolute !important; pointer-events: none; border-radius: 0em; padding: 1.1875em 1em; opacity: 0; -webkit-transition: all 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; transition: all 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; outline-color: black; } :hover > s-tooltip, .active > s-tooltip { opacity: 1; } s-tooltip { box-shadow: rgba(0, 0, 0, 0.2) 0 10px 15px; } @-webkit-keyframes s-tooltip-component { 0% { -webkit-transform: scale(0.9, 0.9); transform: scale(0.9, 0.9); } 100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } } @keyframes s-tooltip-component { 0% { -webkit-transform: scale(0.9, 0.9); transform: scale(0.9, 0.9); } 100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } } @-webkit-keyframes s-tooltip-component--c { 0% { -webkit-transform: scale(0.9, 0.9) translateX(-50%) translateY(-50%); transform: scale(0.9, 0.9) translateX(-50%) translateY(-50%); } 100% { -webkit-transform: scale(1, 1) translateX(-50%) translateY(-50%); transform: scale(1, 1) translateX(-50%) translateY(-50%); } } @keyframes s-tooltip-component--c { 0% { -webkit-transform: scale(0.9, 0.9) translateX(-50%) translateY(-50%); transform: scale(0.9, 0.9) translateX(-50%) translateY(-50%); } 100% { -webkit-transform: scale(1, 1) translateX(-50%) translateY(-50%); transform: scale(1, 1) translateX(-50%) translateY(-50%); } } @-webkit-keyframes s-tooltip-component--t { 0% { -webkit-transform: scale(0.9, 0.9) translateX(-50%); transform: scale(0.9, 0.9) translateX(-50%); } 100% { -webkit-transform: scale(1, 1) translateX(-50%); transform: scale(1, 1) translateX(-50%); } } @keyframes s-tooltip-component--t { 0% { -webkit-transform: scale(0.9, 0.9) translateX(-50%); transform: scale(0.9, 0.9) translateX(-50%); } 100% { -webkit-transform: scale(1, 1) translateX(-50%); transform: scale(1, 1) translateX(-50%); } } s-tooltip { background-color: #f8f9fb; color: #97a6c3; } s-tooltip[align="c"] { left: 50%; top: 50%; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0); transform: translateX(-50%) translateY(-50%) translateZ(0); } [active] > s-tooltip[align="c"], .active > s-tooltip[align="c"], :hover > s-tooltip[align="c"] { -webkit-animation: s-tooltip-component--c 0.1s 0s ease-in-out 1 normal forwards; animation: s-tooltip-component--c 0.1s 0s ease-in-out 1 normal forwards; } s-tooltip[align="t"] { -webkit-transform-origin: 0 calc(100% + 0.5em); -ms-transform-origin: 0 calc(100% + 0.5em); transform-origin: 0 calc(100% + 0.5em); left: 50%; bottom: calc(100% + 1em); -webkit-transform: translateX(-50%) translateY(0) translateZ(0); transform: translateX(-50%) translateY(0) translateZ(0); position: relative; background: #f8f9fb; border-style: solid; border-width: 0; } s-tooltip[align="t"]:after, s-tooltip[align="t"]:before { border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; visibility: visible; } s-tooltip[align="t"]:after { border-width: 0.5em; border-top-color: #f8f9fb; bottom: -1em; right: 50%; margin-right: -0.5em; } s-tooltip[align="t"]:before { border-width: 0.5em; bottom: -1em; right: 50%; margin-right: -0.5em; } [active] > s-tooltip[align="t"], .active > s-tooltip[align="t"], :hover > s-tooltip[align="t"] { -webkit-animation: s-tooltip-component--t 0.1s 0s ease-in-out 1 normal forwards; animation: s-tooltip-component--t 0.1s 0s ease-in-out 1 normal forwards; } s-tooltip[align="tr"] { -webkit-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; right: 0; bottom: calc(100% + 1em); position: relative; background: #f8f9fb; border-style: solid; border-width: 0; } s-tooltip[align="tr"]:after, s-tooltip[align="tr"]:before { border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; visibility: visible; } s-tooltip[align="tr"]:after { border-width: 0.5em; border-top-color: #f8f9fb; bottom: -1em; right: 0.5em; } s-tooltip[align="tr"]:before { border-width: 0.5em; bottom: -1em; right: 0.5em; } [active] > s-tooltip[align="tr"], .active > s-tooltip[align="tr"], :hover > s-tooltip[align="tr"] { -webkit-animation: s-tooltip-component 0.1s 0s ease-in-out 1 normal forwards; animation: s-tooltip-component 0.1s 0s ease-in-out 1 normal forwards; } s-tooltip[color="primary"] { background-color: #ec0928; color: white; } s-tooltip[color="primary"][align="c"] { left: 50%; top: 50%; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0); transform: translateX(-50%) translateY(-50%) translateZ(0); } [active] > s-tooltip[color="primary"][align="c"], .active > s-tooltip[color="primary"][align="c"], :hover > s-tooltip[color="primary"][align="c"] { -webkit-animation: s-tooltip-component--c 0.1s 0s ease-in-out 1 normal forwards; animation: s-tooltip-component--c 0.1s 0s ease-in-out 1 normal forwards; } s-tooltip[color="primary"][align="t"] { -webkit-transform-origin: 0 calc(100% + 0.5em); -ms-transform-origin: 0 calc(100% + 0.5em); transform-origin: 0 calc(100% + 0.5em); left: 50%; bottom: calc(100% + 1em); -webkit-transform: translateX(-50%) translateY(0) translateZ(0); transform: translateX(-50%) translateY(0) translateZ(0); position: relative; background: #ec0928; border-style: solid; border-width: 0; } s-tooltip[color="primary"][align="t"]:after, s-tooltip[color="primary"][align="t"]:before { border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; visibility: visible; } s-tooltip[color="primary"][align="t"]:after { border-width: 0.5em; border-top-color: #ec0928; bottom: -1em; right: 50%; margin-right: -0.5em; } s-tooltip[color="primary"][align="t"]:before { border-width: 0.5em; bottom: -1em; right: 50%; margin-right: -0.5em; } [active] > s-tooltip[color="primary"][align="t"], .active > s-tooltip[color="primary"][align="t"], :hover > s-tooltip[color="primary"][align="t"] { -webkit-animation: s-tooltip-component--t 0.1s 0s ease-in-out 1 normal forwards; animation: s-tooltip-component--t 0.1s 0s ease-in-out 1 normal forwards; } s-tooltip[color="primary"][align="tr"] { -webkit-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; right: 0; bottom: calc(100% + 1em); position: relative; background: #ec0928; border-style: solid; border-width: 0; } s-tooltip[color="primary"][align="tr"]:after, s-tooltip[color="primary"][align="tr"]:before { border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; visibility: visible; } s-tooltip[color="primary"][align="tr"]:after { border-width: 0.5em; border-top-color: #ec0928; bottom: -1em; right: 0.5em; } s-tooltip[color="primary"][align="tr"]:before { border-width: 0.5em; bottom: -1em; right: 0.5em; } [active] > s-tooltip[color="primary"][align="tr"], .active > s-tooltip[color="primary"][align="tr"], :hover > s-tooltip[color="primary"][align="tr"] { -webkit-animation: s-tooltip-component 0.1s 0s ease-in-out 1 normal forwards; animation: s-tooltip-component 0.1s 0s ease-in-out 1 normal forwards; } s-tooltip[color="secondary"] { background-color: #293746; color: white; } s-tooltip[color="secondary"][align="c"] { left: 50%; top: 50%; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0); transform: translateX(-50%) translateY(-50%) translateZ(0); } [active] > s-tooltip[color="secondary"][align="c"], .active > s-tooltip[color="secondary"][align="c"], :hover > s-tooltip[color="secondary"][align="c"] { -webkit-animation: s-tooltip-component--c 0.1s 0s ease-in-out 1 normal forwards; animation: s-tooltip-component--c 0.1s 0s ease-in-out 1 normal forwards; } s-tooltip[color="secondary"][align="t"] { -webkit-transform-origin: 0 calc(100% + 0.5em); -ms-transform-origin: 0 calc(100% + 0.5em); transform-origin: 0 calc(100% + 0.5em); left: 50%; bottom: calc(100% + 1em); -webkit-transform: translateX(-50%) translateY(0) translateZ(0); transform: translateX(-50%) translateY(0) translateZ(0); position: relative; background: #293746; border-style: solid; border-width: 0; } s-tooltip[color="secondary"][align="t"]:after, s-tooltip[color="secondary"][align="t"]:before { border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; visibility: visible; } s-tooltip[color="secondary"][align="t"]:after { border-width: 0.5em; border-top-color: #293746; bottom: -1em; right: 50%; margin-right: -0.5em; } s-tooltip[color="secondary"][align="t"]:before { border-width: 0.5em; bottom: -1em; right: 50%; margin-right: -0.5em; } [active] > s-tooltip[color="secondary"][align="t"], .active > s-tooltip[color="secondary"][align="t"], :hover > s-tooltip[color="secondary"][align="t"] { -webkit-animation: s-tooltip-component--t 0.1s 0s ease-in-out 1 normal forwards; animation: s-tooltip-component--t 0.1s 0s ease-in-out 1 normal forwards; } s-tooltip[color="secondary"][align="tr"] { -webkit-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; right: 0; bottom: calc(100% + 1em); position: relative; background: #293746; border-style: solid; border-width: 0; } s-tooltip[color="secondary"][align="tr"]:after, s-tooltip[color="secondary"][align="tr"]:before { border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; visibility: visible; } s-tooltip[color="secondary"][align="tr"]:after { border-width: 0.5em; border-top-color: #293746; bottom: -1em; right: 0.5em; } s-tooltip[color="secondary"][align="tr"]:before { border-width: 0.5em; bottom: -1em; right: 0.5em; } [active] > s-tooltip[color="secondary"][align="tr"], .active > s-tooltip[color="secondary"][align="tr"], :hover > s-tooltip[color="secondary"][align="tr"] { -webkit-animation: s-tooltip-component 0.1s 0s ease-in-out 1 normal forwards; animation: s-tooltip-component 0.1s 0s ease-in-out 1 normal forwards; } s-tooltip { white-space: nowrap; } /** Validator form */ s-validator { margin-top: 0.75rem; color: #ec0928; -webkit-transition: all 0.1s ease-in-out 0.1s, outline-color 0.000001s linear 0s; transition: all 0.1s ease-in-out 0.1s, outline-color 0.000001s linear 0s; outline-color: black; opacity: 0.001; position: relative; max-height: 0; margin-top: 0; display: block; } s-validator[active] { opacity: 1; max-height: 1em; margin-top: 0.75rem; } /** Slideshow */ s-slideshow { position: relative; } [s-slideshow-slide], s-slideshow-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } [s-slideshow-previous], s-slideshow-previous, [s-slideshow-next], s-slideshow-next, [s-slideshow-total], s-slideshow-total, [s-slideshow-current], s-slideshow-current { display: inline-block; } [s-slideshow-slide], s-slideshow-slide, s-slideshow { display: block; } [s-slideshow-slide], s-slideshow-slide { -webkit-transition: outline-color 0.000001s linear 0s, -webkit-transform 0.4s cubic-bezier(0.81, 0.005, 0.735, 1) 0s; transition: outline-color 0.000001s linear 0s, -webkit-transform 0.4s cubic-bezier(0.81, 0.005, 0.735, 1) 0s; transition: transform 0.4s cubic-bezier(0.81, 0.005, 0.735, 1) 0s, outline-color 0.000001s linear 0s; transition: transform 0.4s cubic-bezier(0.81, 0.005, 0.735, 1) 0s, outline-color 0.000001s linear 0s, -webkit-transform 0.4s cubic-bezier(0.81, 0.005, 0.735, 1) 0s; outline-color: black; -webkit-transform: translateX(-100%) translateY(0) translateZ(0); transform: translateX(-100%) translateY(0) translateZ(0); overflow: hidden; z-index: 0; } [active] ~ [s-slideshow-slide], [active] ~ s-slideshow-slide { -webkit-transform: translateX(100%) translateY(0) translateZ(0); transform: translateX(100%) translateY(0) translateZ(0); z-index: 0; } [s-slideshow-slide][active], s-slideshow-slide[active] { -webkit-transform: translateX(0) translateY(0) translateZ(0); transform: translateX(0) translateY(0) translateZ(0); outline-color: #3215b9; z-index: 1; } .template-navigation { position: fixed; top: 20vh; left: 0; z-index: 9999; -webkit-transform: translateX(-95%) translateY(0) translateZ(0); transform: translateX(-95%) translateY(0) translateZ(0); -webkit-transition: all, 0.2s, ease-in-out, 0s, outline-color 0.000001s linear 0s; transition: all, 0.2s, ease-in-out, 0s, outline-color 0.000001s linear 0s; outline-color: black; background: white; box-shadow: rgba(0, 0, 0, 0.2) 0 10px 15px; } .template-navigation:hover { -webkit-transform: translateX(0) translateY(0) translateZ(0); transform: translateX(0) translateY(0) translateZ(0); } /** Tables styling */ [class*="bkg-"] .table--striped > tbody > .tr:nth-of-type(odd), [class*="bkg-"] .text-format table > tbody > .tr:nth-of-type(odd), .text-format [class*="bkg-"] table > tbody > .tr:nth-of-type(odd), [class*="bkg-"] .table--striped > tbody > tr:nth-of-type(odd), [class*="bkg-"] .text-format table > tbody > tr:nth-of-type(odd), .text-format [class*="bkg-"] table > tbody > tr:nth-of-type(odd) { background-color: white; } /** Tables */ .table--responsive { min-height: 0.01%; overflow-x: auto; width: 100%; overflow-y: hidden; } .table--center td, .table--center .td, .table--center th, .table--center .th { text-align: center; } .table--middle td, .table--middle .td, .table--middle th, .table--middle .th { vertical-align: middle; } .table, .text-format table, .markdown-format table { width: 100%; } .table .th, .text-format table .th, .markdown-format table .th, .table th, .text-format table th, .markdown-format table th { text-align: left; } .table .th, .text-format table .th, .markdown-format table .th, .table th, .text-format table th, .markdown-format table th, .table .td, .text-format table .td, .markdown-format table .td, .table td, .text-format table td, .markdown-format table td { padding: 1.1875em 1em; position: relative; } .table .th:last-child, .text-format table .th:last-child, .markdown-format table .th:last-child, .table th:last-child, .text-format table th:last-child, .markdown-format table th:last-child, .table .td:last-child, .text-format table .td:last-child, .markdown-format table .td:last-child, .table td:last-child, .text-format table td:last-child, .markdown-format table td:last-child { border-right: none; } .table .th:before, .text-format table .th:before, .markdown-format table .th:before, .table th:before, .text-format table th:before, .markdown-format table th:before, .table .td:before, .text-format table .td:before, .markdown-format table .td:before, .table td:before, .text-format table td:before, .markdown-format table td:before { content: ''; display: block; position: absolute; top: 50%; left: 0; -webkit-transform: translateX(0) translateY(-50%) translateZ(0); transform: translateX(0) translateY(-50%) translateZ(0); width: 100%; height: 100%; -webkit-transition: all 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; transition: all 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; outline-color: black; border-width: 0; border-color: transparent; border-style: solid; border-top-width: 0.0625rem; border-bottom-width: 0.0625rem; pointer-events: none; } .table .th:last-child:before, .text-format table .th:last-child:before, .markdown-format table .th:last-child:before, .table th:last-child:before, .text-format table th:last-child:before, .markdown-format table th:last-child:before, .table .td:last-child:before, .text-format table .td:last-child:before, .markdown-format table .td:last-child:before, .table td:last-child:before, .text-format table td:last-child:before, .markdown-format table td:last-child:before { border-right-width: 1px; } .table .th:first-child:before, .text-format table .th:first-child:before, .markdown-format table .th:first-child:before, .table th:first-child:before, .text-format table th:first-child:before, .markdown-format table th:first-child:before, .table .td:first-child:before, .text-format table .td:first-child:before, .markdown-format table .td:first-child:before, .table td:first-child:before, .text-format table td:first-child:before, .markdown-format table td:first-child:before { border-left-width: 1px; } .table .th, .text-format table .th, .markdown-format table .th, .table th, .text-format table th, .markdown-format table th { font-weight: bold; position: relative; } .table .tr:last-child .td, .text-format table .tr:last-child .td, .markdown-format table .tr:last-child .td, .table tr:last-child td, .text-format table tr:last-child td, .markdown-format table tr:last-child td, .table .tr:last-child:not(:first-child) .th, .text-format table .tr:last-child:not(:first-child) .th, .markdown-format table .tr:last-child:not(:first-child) .th, .table tr:last-child:not(:first-child) th, .text-format table tr:last-child:not(:first-child) th, .markdown-format table tr:last-child:not(:first-child) th { border-bottom: none !important; } .table .caption, .text-format table .caption, .markdown-format table .caption, .table caption, .text-format table caption, .markdown-format table caption { font-family: italic left; } .table .caption:before, .text-format table .caption:before, .markdown-format table .caption:before, .table caption:before, .text-format table caption:before, .markdown-format table caption:before { content: "\2014 \00A0"; } .table .td.adapt, .text-format table .td.adapt, .markdown-format table .td.adapt, .table td.adapt, .text-format table td.adapt, .markdown-format table td.adapt, .table .th.adapt, .text-format table .th.adapt, .markdown-format table .th.adapt, .table th.adapt, .text-format table th.adapt, .markdown-format table th.adapt { width: 1px; white-space: nowrap; } .table .td.grow, .text-format table .td.grow, .markdown-format table .td.grow, .table td.grow, .text-format table td.grow, .markdown-format table td.grow, .table .th.grow, .text-format table .th.grow, .markdown-format table .th.grow, .table th.grow, .text-format table th.grow, .markdown-format table th.grow { width: 9999999px; } .table.table--shadowed, .text-format table.table--shadowed, .markdown-format table.table--shadowed { -webkit-transition: all, 0.2s, ease-in-out, 0s, outline-color 0.000001s linear 0s; transition: all, 0.2s, ease-in-out, 0s, outline-color 0.000001s linear 0s; outline-color: black; } .table.table--shadowed .table--hover, .text-format table.table--shadowed .table--hover, .markdown-format table.table--shadowed .table--hover, .table.table--shadowed:hover, .text-format table.table--shadowed:hover, .markdown-format table.table--shadowed:hover { box-shadow: #293746 0 0 32px; } .table.table.table--striped > thead > .tr:nth-of-type(odd) > td, .text-format table > thead > .tr:nth-of-type(odd) > td, .markdown-format table.table--striped > thead > .tr:nth-of-type(odd) > td, .markdown-format .text-format table > thead > .tr:nth-of-type(odd) > td, .text-format .markdown-format table > thead > .tr:nth-of-type(odd) > td, .table.table.table--striped > thead > .tr:nth-of-type(odd) > th, .text-format table > thead > .tr:nth-of-type(odd) > th, .markdown-format table.table--striped > thead > .tr:nth-of-type(odd) > th, .markdown-format .text-format table > thead > .tr:nth-of-type(odd) > th, .text-format .markdown-format table > thead > .tr:nth-of-type(odd) > th, .table.table.table--striped > thead > tr:nth-of-type(odd) > td, .text-format table > thead > tr:nth-of-type(odd) > td, .markdown-format table.table--striped > thead > tr:nth-of-type(odd) > td, .markdown-format .text-format table > thead > tr:nth-of-type(odd) > td, .text-format .markdown-format table > thead > tr:nth-of-type(odd) > td, .table.table.table--striped > thead > tr:nth-of-type(odd) > th, .text-format table > thead > tr:nth-of-type(odd) > th, .markdown-format table.table--striped > thead > tr:nth-of-type(odd) > th, .markdown-format .text-format table > thead > tr:nth-of-type(odd) > th, .text-format .markdown-format table > thead > tr:nth-of-type(odd) > th { background-color: #f8f9fb; } .table.table.table--striped > tbody > .tr:nth-of-type(even) > td, .text-format table > tbody > .tr:nth-of-type(even) > td, .markdown-format table.table--striped > tbody > .tr:nth-of-type(even) > td, .markdown-format .text-format table > tbody > .tr:nth-of-type(even) > td, .text-format .markdown-format table > tbody > .tr:nth-of-type(even) > td, .table.table.table--striped > tbody > .tr:nth-of-type(even) > th, .text-format table > tbody > .tr:nth-of-type(even) > th, .markdown-format table.table--striped > tbody > .tr:nth-of-type(even) > th, .markdown-format .text-format table > tbody > .tr:nth-of-type(even) > th, .text-format .markdown-format table > tbody > .tr:nth-of-type(even) > th, .table.table.table--striped > tbody > tr:nth-of-type(even) > td, .text-format table > tbody > tr:nth-of-type(even) > td, .markdown-format table.table--striped > tbody > tr:nth-of-type(even) > td, .markdown-format .text-format table > tbody > tr:nth-of-type(even) > td, .text-format .markdown-format table > tbody > tr:nth-of-type(even) > td, .table.table.table--striped > tbody > tr:nth-of-type(even) > th, .text-format table > tbody > tr:nth-of-type(even) > th, .markdown-format table.table--striped > tbody > tr:nth-of-type(even) > th, .markdown-format .text-format table > tbody > tr:nth-of-type(even) > th, .text-format .markdown-format table > tbody > tr:nth-of-type(even) > th { background-color: rgba(248, 249, 251, 0.6); } .table.table.table--bordered, .text-format table.table--bordered, .markdown-format table.table--bordered { border: 1px solid #f8f9fb; } .table.table.table--bordered td, .text-format table.table--bordered td, .markdown-format table.table--bordered td, .table.table.table--bordered th, .text-format table.table--bordered th, .markdown-format table.table--bordered th { border-right: 1px solid rgba(248, 249, 251, 0.8); } .table.table.table--hover > tbody > .tr:hover td, .text-format table.table--hover > tbody > .tr:hover td, .markdown-format table.table--hover > tbody > .tr:hover td, .table.table.table--hover > tbody > .tr:hover .td, .text-format table.table--hover > tbody > .tr:hover .td, .markdown-format table.table--hover > tbody > .tr:hover .td, .table.table.table--hover > tbody > .tr:hover th, .text-format table.table--hover > tbody > .tr:hover th, .markdown-format table.table--hover > tbody > .tr:hover th, .table.table.table--hover > tbody > .tr:hover .th, .text-format table.table--hover > tbody > .tr:hover .th, .markdown-format table.table--hover > tbody > .tr:hover .th, .table.table.table--hover > tbody > tr:hover td, .text-format table.table--hover > tbody > tr:hover td, .markdown-format table.table--hover > tbody > tr:hover td, .table.table.table--hover > tbody > tr:hover .td, .text-format table.table--hover > tbody > tr:hover .td, .markdown-format table.table--hover > tbody > tr:hover .td, .table.table.table--hover > tbody > tr:hover th, .text-format table.table--hover > tbody > tr:hover th, .markdown-format table.table--hover > tbody > tr:hover th, .table.table.table--hover > tbody > tr:hover .th, .text-format table.table--hover > tbody > tr:hover .th, .markdown-format table.table--hover > tbody > tr:hover .th { background-color: #f8f9fb; } .table.table.table--hover > tbody > .tr:hover td:before, .text-format table.table--hover > tbody > .tr:hover td:before, .markdown-format table.table--hover > tbody > .tr:hover td:before, .table.table.table--hover > tbody > .tr:hover .td:before, .text-format table.table--hover > tbody > .tr:hover .td:before, .markdown-format table.table--hover > tbody > .tr:hover .td:before, .table.table.table--hover > tbody > .tr:hover th:before, .text-format table.table--hover > tbody > .tr:hover th:before, .markdown-format table.table--hover > tbody > .tr:hover th:before, .table.table.table--hover > tbody > .tr:hover .th:before, .text-format table.table--hover > tbody > .tr:hover .th:before, .markdown-format table.table--hover > tbody > .tr:hover .th:before, .table.table.table--hover > tbody > tr:hover td:before, .text-format table.table--hover > tbody > tr:hover td:before, .markdown-format table.table--hover > tbody > tr:hover td:before, .table.table.table--hover > tbody > tr:hover .td:before, .text-format table.table--hover > tbody > tr:hover .td:before, .markdown-format table.table--hover > tbody > tr:hover .td:before, .table.table.table--hover > tbody > tr:hover th:before, .text-format table.table--hover > tbody > tr:hover th:before, .markdown-format table.table--hover > tbody > tr:hover th:before, .table.table.table--hover > tbody > tr:hover .th:before, .text-format table.table--hover > tbody > tr:hover .th:before, .markdown-format table.table--hover > tbody > tr:hover .th:before { border-color: #d8dde8; } .table.table--primary.table--striped > thead > .tr:nth-of-type(odd) > td, .text-format table.table--primary > thead > .tr:nth-of-type(odd) > td, .markdown-format table.table--primary.table--striped > thead > .tr:nth-of-type(odd) > td, .markdown-format .text-format table.table--primary > thead > .tr:nth-of-type(odd) > td, .text-format .markdown-format table.table--primary > thead > .tr:nth-of-type(odd) > td, .table.table--primary.table--striped > thead > .tr:nth-of-type(odd) > th, .text-format table.table--primary > thead > .tr:nth-of-type(odd) > th, .markdown-format table.table--primary.table--striped > thead > .tr:nth-of-type(odd) > th, .markdown-format .text-format table.table--primary > thead > .tr:nth-of-type(odd) > th, .text-format .markdown-format table.table--primary > thead > .tr:nth-of-type(odd) > th, .table.table--primary.table--striped > thead > tr:nth-of-type(odd) > td, .text-format table.table--primary > thead > tr:nth-of-type(odd) > td, .markdown-format table.table--primary.table--striped > thead > tr:nth-of-type(odd) > td, .markdown-format .text-format table.table--primary > thead > tr:nth-of-type(odd) > td, .text-format .markdown-format table.table--primary > thead > tr:nth-of-type(odd) > td, .table.table--primary.table--striped > thead > tr:nth-of-type(odd) > th, .text-format table.table--primary > thead > tr:nth-of-type(odd) > th, .markdown-format table.table--primary.table--striped > thead > tr:nth-of-type(odd) > th, .markdown-format .text-format table.table--primary > thead > tr:nth-of-type(odd) > th, .text-format .markdown-format table.table--primary > thead > tr:nth-of-type(odd) > th { background-color: #ec0928; } .table.table--primary.table--striped > tbody > .tr:nth-of-type(even) > td, .text-format table.table--primary > tbody > .tr:nth-of-type(even) > td, .markdown-format table.table--primary.table--striped > tbody > .tr:nth-of-type(even) > td, .markdown-format .text-format table.table--primary > tbody > .tr:nth-of-type(even) > td, .text-format .markdown-format table.table--primary > tbody > .tr:nth-of-type(even) > td, .table.table--primary.table--striped > tbody > .tr:nth-of-type(even) > th, .text-format table.table--primary > tbody > .tr:nth-of-type(even) > th, .markdown-format table.table--primary.table--striped > tbody > .tr:nth-of-type(even) > th, .markdown-format .text-format table.table--primary > tbody > .tr:nth-of-type(even) > th, .text-format .markdown-format table.table--primary > tbody > .tr:nth-of-type(even) > th, .table.table--primary.table--striped > tbody > tr:nth-of-type(even) > td, .text-format table.table--primary > tbody > tr:nth-of-type(even) > td, .markdown-format table.table--primary.table--striped > tbody > tr:nth-of-type(even) > td, .markdown-format .text-format table.table--primary > tbody > tr:nth-of-type(even) > td, .text-format .markdown-format table.table--primary > tbody > tr:nth-of-type(even) > td, .table.table--primary.table--striped > tbody > tr:nth-of-type(even) > th, .text-format table.table--primary > tbody > tr:nth-of-type(even) > th, .markdown-format table.table--primary.table--striped > tbody > tr:nth-of-type(even) > th, .markdown-format .text-format table.table--primary > tbody > tr:nth-of-type(even) > th, .text-format .markdown-format table.table--primary > tbody > tr:nth-of-type(even) > th { background-color: rgba(236, 9, 40, 0.6); } .table.table--primary.table--bordered, .text-format table.table--primary.table--bordered, .markdown-format table.table--primary.table--bordered { border: 1px solid #ec0928; } .table.table--primary.table--bordered td, .text-format table.table--primary.table--bordered td, .markdown-format table.table--primary.table--bordered td, .table.table--primary.table--bordered th, .text-format table.table--primary.table--bordered th, .markdown-format table.table--primary.table--bordered th { border-right: 1px solid rgba(236, 9, 40, 0.8); } .table.table--primary.table--hover > tbody > .tr:hover td, .text-format table.table--primary.table--hover > tbody > .tr:hover td, .markdown-format table.table--primary.table--hover > tbody > .tr:hover td, .table.table--primary.table--hover > tbody > .tr:hover .td, .text-format table.table--primary.table--hover > tbody > .tr:hover .td, .markdown-format table.table--primary.table--hover > tbody > .tr:hover .td, .table.table--primary.table--hover > tbody > .tr:hover th, .text-format table.table--primary.table--hover > tbody > .tr:hover th, .markdown-format table.table--primary.table--hover > tbody > .tr:hover th, .table.table--primary.table--hover > tbody > .tr:hover .th, .text-format table.table--primary.table--hover > tbody > .tr:hover .th, .markdown-format table.table--primary.table--hover > tbody > .tr:hover .th, .table.table--primary.table--hover > tbody > tr:hover td, .text-format table.table--primary.table--hover > tbody > tr:hover td, .markdown-format table.table--primary.table--hover > tbody > tr:hover td, .table.table--primary.table--hover > tbody > tr:hover .td, .text-format table.table--primary.table--hover > tbody > tr:hover .td, .markdown-format table.table--primary.table--hover > tbody > tr:hover .td, .table.table--primary.table--hover > tbody > tr:hover th, .text-format table.table--primary.table--hover > tbody > tr:hover th, .markdown-format table.table--primary.table--hover > tbody > tr:hover th, .table.table--primary.table--hover > tbody > tr:hover .th, .text-format table.table--primary.table--hover > tbody > tr:hover .th, .markdown-format table.table--primary.table--hover > tbody > tr:hover .th { background-color: #ec0928; } .table.table--primary.table--hover > tbody > .tr:hover td:before, .text-format table.table--primary.table--hover > tbody > .tr:hover td:before, .markdown-format table.table--primary.table--hover > tbody > .tr:hover td:before, .table.table--primary.table--hover > tbody > .tr:hover .td:before, .text-format table.table--primary.table--hover > tbody > .tr:hover .td:before, .markdown-format table.table--primary.table--hover > tbody > .tr:hover .td:before, .table.table--primary.table--hover > tbody > .tr:hover th:before, .text-format table.table--primary.table--hover > tbody > .tr:hover th:before, .markdown-format table.table--primary.table--hover > tbody > .tr:hover th:before, .table.table--primary.table--hover > tbody > .tr:hover .th:before, .text-format table.table--primary.table--hover > tbody > .tr:hover .th:before, .markdown-format table.table--primary.table--hover > tbody > .tr:hover .th:before, .table.table--primary.table--hover > tbody > tr:hover td:before, .text-format table.table--primary.table--hover > tbody > tr:hover td:before, .markdown-format table.table--primary.table--hover > tbody > tr:hover td:before, .table.table--primary.table--hover > tbody > tr:hover .td:before, .text-format table.table--primary.table--hover > tbody > tr:hover .td:before, .markdown-format table.table--primary.table--hover > tbody > tr:hover .td:before, .table.table--primary.table--hover > tbody > tr:hover th:before, .text-format table.table--primary.table--hover > tbody > tr:hover th:before, .markdown-format table.table--primary.table--hover > tbody > tr:hover th:before, .table.table--primary.table--hover > tbody > tr:hover .th:before, .text-format table.table--primary.table--hover > tbody > tr:hover .th:before, .markdown-format table.table--primary.table--hover > tbody > tr:hover .th:before { border-color: #bb0720; } .table.table--secondary.table--striped > thead > .tr:nth-of-type(odd) > td, .text-format table.table--secondary > thead > .tr:nth-of-type(odd) > td, .markdown-format table.table--secondary.table--striped > thead > .tr:nth-of-type(odd) > td, .markdown-format .text-format table.table--secondary > thead > .tr:nth-of-type(odd) > td, .text-format .markdown-format table.table--secondary > thead > .tr:nth-of-type(odd) > td, .table.table--secondary.table--striped > thead > .tr:nth-of-type(odd) > th, .text-format table.table--secondary > thead > .tr:nth-of-type(odd) > th, .markdown-format table.table--secondary.table--striped > thead > .tr:nth-of-type(odd) > th, .markdown-format .text-format table.table--secondary > thead > .tr:nth-of-type(odd) > th, .text-format .markdown-format table.table--secondary > thead > .tr:nth-of-type(odd) > th, .table.table--secondary.table--striped > thead > tr:nth-of-type(odd) > td, .text-format table.table--secondary > thead > tr:nth-of-type(odd) > td, .markdown-format table.table--secondary.table--striped > thead > tr:nth-of-type(odd) > td, .markdown-format .text-format table.table--secondary > thead > tr:nth-of-type(odd) > td, .text-format .markdown-format table.table--secondary > thead > tr:nth-of-type(odd) > td, .table.table--secondary.table--striped > thead > tr:nth-of-type(odd) > th, .text-format table.table--secondary > thead > tr:nth-of-type(odd) > th, .markdown-format table.table--secondary.table--striped > thead > tr:nth-of-type(odd) > th, .markdown-format .text-format table.table--secondary > thead > tr:nth-of-type(odd) > th, .text-format .markdown-format table.table--secondary > thead > tr:nth-of-type(odd) > th { background-color: #293746; } .table.table--secondary.table--striped > tbody > .tr:nth-of-type(even) > td, .text-format table.table--secondary > tbody > .tr:nth-of-type(even) > td, .markdown-format table.table--secondary.table--striped > tbody > .tr:nth-of-type(even) > td, .markdown-format .text-format table.table--secondary > tbody > .tr:nth-of-type(even) > td, .text-format .markdown-format table.table--secondary > tbody > .tr:nth-of-type(even) > td, .table.table--secondary.table--striped > tbody > .tr:nth-of-type(even) > th, .text-format table.table--secondary > tbody > .tr:nth-of-type(even) > th, .markdown-format table.table--secondary.table--striped > tbody > .tr:nth-of-type(even) > th, .markdown-format .text-format table.table--secondary > tbody > .tr:nth-of-type(even) > th, .text-format .markdown-format table.table--secondary > tbody > .tr:nth-of-type(even) > th, .table.table--secondary.table--striped > tbody > tr:nth-of-type(even) > td, .text-format table.table--secondary > tbody > tr:nth-of-type(even) > td, .markdown-format table.table--secondary.table--striped > tbody > tr:nth-of-type(even) > td, .markdown-format .text-format table.table--secondary > tbody > tr:nth-of-type(even) > td, .text-format .markdown-format table.table--secondary > tbody > tr:nth-of-type(even) > td, .table.table--secondary.table--striped > tbody > tr:nth-of-type(even) > th, .text-format table.table--secondary > tbody > tr:nth-of-type(even) > th, .markdown-format table.table--secondary.table--striped > tbody > tr:nth-of-type(even) > th, .markdown-format .text-format table.table--secondary > tbody > tr:nth-of-type(even) > th, .text-format .markdown-format table.table--secondary > tbody > tr:nth-of-type(even) > th { background-color: rgba(41, 55, 70, 0.6); } .table.table--secondary.table--bordered, .text-format table.table--secondary.table--bordered, .markdown-format table.table--secondary.table--bordered { border: 1px solid #293746; } .table.table--secondary.table--bordered td, .text-format table.table--secondary.table--bordered td, .markdown-format table.table--secondary.table--bordered td, .table.table--secondary.table--bordered th, .text-format table.table--secondary.table--bordered th, .markdown-format table.table--secondary.table--bordered th { border-right: 1px solid rgba(41, 55, 70, 0.8); } .table.table--secondary.table--hover > tbody > .tr:hover td, .text-format table.table--secondary.table--hover > tbody > .tr:hover td, .markdown-format table.table--secondary.table--hover > tbody > .tr:hover td, .table.table--secondary.table--hover > tbody > .tr:hover .td, .text-format table.table--secondary.table--hover > tbody > .tr:hover .td, .markdown-format table.table--secondary.table--hover > tbody > .tr:hover .td, .table.table--secondary.table--hover > tbody > .tr:hover th, .text-format table.table--secondary.table--hover > tbody > .tr:hover th, .markdown-format table.table--secondary.table--hover > tbody > .tr:hover th, .table.table--secondary.table--hover > tbody > .tr:hover .th, .text-format table.table--secondary.table--hover > tbody > .tr:hover .th, .markdown-format table.table--secondary.table--hover > tbody > .tr:hover .th, .table.table--secondary.table--hover > tbody > tr:hover td, .text-format table.table--secondary.table--hover > tbody > tr:hover td, .markdown-format table.table--secondary.table--hover > tbody > tr:hover td, .table.table--secondary.table--hover > tbody > tr:hover .td, .text-format table.table--secondary.table--hover > tbody > tr:hover .td, .markdown-format table.table--secondary.table--hover > tbody > tr:hover .td, .table.table--secondary.table--hover > tbody > tr:hover th, .text-format table.table--secondary.table--hover > tbody > tr:hover th, .markdown-format table.table--secondary.table--hover > tbody > tr:hover th, .table.table--secondary.table--hover > tbody > tr:hover .th, .text-format table.table--secondary.table--hover > tbody > tr:hover .th, .markdown-format table.table--secondary.table--hover > tbody > tr:hover .th { background-color: #293746; } .table.table--secondary.table--hover > tbody > .tr:hover td:before, .text-format table.table--secondary.table--hover > tbody > .tr:hover td:before, .markdown-format table.table--secondary.table--hover > tbody > .tr:hover td:before, .table.table--secondary.table--hover > tbody > .tr:hover .td:before, .text-format table.table--secondary.table--hover > tbody > .tr:hover .td:before, .markdown-format table.table--secondary.table--hover > tbody > .tr:hover .td:before, .table.table--secondary.table--hover > tbody > .tr:hover th:before, .text-format table.table--secondary.table--hover > tbody > .tr:hover th:before, .markdown-format table.table--secondary.table--hover > tbody > .tr:hover th:before, .table.table--secondary.table--hover > tbody > .tr:hover .th:before, .text-format table.table--secondary.table--hover > tbody > .tr:hover .th:before, .markdown-format table.table--secondary.table--hover > tbody > .tr:hover .th:before, .table.table--secondary.table--hover > tbody > tr:hover td:before, .text-format table.table--secondary.table--hover > tbody > tr:hover td:before, .markdown-format table.table--secondary.table--hover > tbody > tr:hover td:before, .table.table--secondary.table--hover > tbody > tr:hover .td:before, .text-format table.table--secondary.table--hover > tbody > tr:hover .td:before, .markdown-format table.table--secondary.table--hover > tbody > tr:hover .td:before, .table.table--secondary.table--hover > tbody > tr:hover th:before, .text-format table.table--secondary.table--hover > tbody > tr:hover th:before, .markdown-format table.table--secondary.table--hover > tbody > tr:hover th:before, .table.table--secondary.table--hover > tbody > tr:hover .th:before, .text-format table.table--secondary.table--hover > tbody > tr:hover .th:before, .markdown-format table.table--secondary.table--hover > tbody > tr:hover .th:before { border-color: #161e26; } .table, .text-format table, .markdown-format table { table-layout: auto; } @media screen and (max-width: 640px) { .table .td-hide\@mobile, .text-format table .td-hide\@mobile, .markdown-format table .td-hide\@mobile { width: 0; padding: 0; overflow: hidden; } .table .td-hide\@mobile > *, .text-format table .td-hide\@mobile > *, .markdown-format table .td-hide\@mobile > * { display: none; } } /** Sample week */ .table--sample-week { table-layout: fixed; } .table--sample-week .td, .table--sample-week .th { padding-top: 3em; padding-bottom: 3em; } .table--sample-week thead .th { text-align: center; } .table--sample-week thead .th, .table--sample-week .td:not([rowspan]) { width: 14%; } /** @category Tooltip */ /** Default tooltip @description Only use with JS script
Here is your text
*/ .tooltip { border-radius: 5px; display: inline-block; font-size: 16px; font-weight: 500; position: relative; padding: 8px 20px; text-align: center; border: 1px solid grey; background-color: white; } .tooltip.hidden { opacity: 0; z-index: 30; visibility: hidden; max-width: 300px; margin-top: 5px; } .tooltip.visible { opacity: 1; visibility: visible; margin-top: 0; } /** tooltip, position is : bottom left
Hello !
*/ .tooltip--bottom-left.hidden { margin-left: 1rem; } /** tooltip, position is : bottom right
Hello !
*/ .tooltip--bottom-right.hidden { margin-left: -1rem; } /** tooltip, position is : top left
Hello !
*/ .tooltip--top-left.hidden { margin-left: 1rem; } /** tooltip, position is : top right
Hello !
*/ .tooltip--top-right.hidden { margin-left: -1rem; } /**/ /* BLOCKS ---------------------------------------*/ /** These are your components and modules; things like sections, accordions, carousels, etc. */ /* BLOCKS ---------------------------------------*/ /** Banner styling */ .banner { position: relative; } .banner__img { position: relative; overflow: hidden; } .banner__img:before { content: ''; display: block; height: 0; padding-top: 33.33333333%; } @media screen and (min-width: 1200px) { .banner__img { position: relative; overflow: hidden; } .banner__img:before { content: ''; display: block; height: 0; padding-top: 25%; } } @media screen and (min-width: 641px) and (max-width: 1023px) { .banner__img { position: relative; overflow: hidden; } .banner__img:before { content: ''; display: block; height: 0; padding-top: 50%; } } @media screen and (max-width: 640px) { .banner__img { position: relative; overflow: hidden; } .banner__img:before { content: ''; display: block; height: 0; padding-top: 66.66666667%; } } .banner__content { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding-bottom: 1.875rem; -webkit-filter: drop-shadow(rgba(0, 0, 0, 0.5) 0 0 10px); filter: drop-shadow(rgba(0, 0, 0, 0.5) 0 0 10px); } @media screen and (min-width: 641px) and (max-width: 1023px) { .banner__content { padding-bottom: 1rem; } } @media screen and (max-width: 640px) { .banner__content { padding-bottom: 1rem; } } .banner__content, .banner__content * { color: white; } .banner__content h1 { font-family: "Open Sans", sans-serif; font-size: 4vw; font-weight: 600; max-width: 75%; } .cookie-checker { max-height: 0; overflow: hidden; display: block; padding: 0 !important; background: #282a2c; -webkit-transition: all 0.4s ease-in-out 0s, outline-color 0.000001s linear 0s; transition: all 0.4s ease-in-out 0s, outline-color 0.000001s linear 0s; outline-color: black; text-shadow: rgba(0, 0, 0, 0.3) 0 0 20px; } .cookie-checker .btn { box-shadow: rgba(0, 0, 0, 0.3) 0 0 20px; } .cookie-checker i { font-size: 3.125rem; } .cookie-checker[enabled] { padding: 0.75rem 0 !important; max-height: 1000px; } /** Menu drawer */ html, body { height: 100%; } input[is="s-drawer-toggle"] { position: fixed; top: 0; left: 0; opacity: 0; } s-drawer[name="menu"] { position: fixed; display: block; -webkit-transform: translateX(0) translateY(0) translateZ(0); transform: translateX(0) translateY(0) translateZ(0); left: 100%; height: 100%; width: 360px; top: 0; z-index: 2; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; -webkit-transition: all, 0.2s, ease-in-out, 0s, outline-color 0.000001s linear 0s; transition: all, 0.2s, ease-in-out, 0s, outline-color 0.000001s linear 0s; outline-color: black; } /* actual page content pane */ s-drawer-content { -webkit-transform: translateX(0) translateY(0) translateZ(0); transform: translateX(0) translateY(0) translateZ(0); width: 100%; min-height: 100vh; -webkit-transition: all, 0.2s, ease-in-out, 0s, outline-color 0.000001s linear 0s; transition: all, 0.2s, ease-in-out, 0s, outline-color 0.000001s linear 0s; outline-color: black; background-color: white; position: relative; display: block; z-index: 1; } label[is="s-drawer-overlay"][for="menu"] { position: fixed; top: 0; left: 0; right: 0; bottom: 0; height: 100%; width: 100%; background: rgba(255, 255, 255, 0); opacity: 0; pointer-events: none; -webkit-transform: translateX(0) translateY(0) translateZ(0); transform: translateX(0) translateY(0) translateZ(0); -webkit-transition: all, 0.2s, ease-in-out, 0s, outline-color 0.000001s linear 0s; transition: all, 0.2s, ease-in-out, 0s, outline-color 0.000001s linear 0s; outline-color: black; z-index: 2; } s-drawer-bkg[for="menu"] { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; visibility: hidden; -webkit-transition: all, 0.2s, ease-in-out, 0s, outline-color 0.000001s linear 0s; transition: all, 0.2s, ease-in-out, 0s, outline-color 0.000001s linear 0s; outline-color: black; } input[is="s-drawer-toggle"][name="menu"]:checked ~ label[is="s-drawer-overlay"][for="menu"] { opacity: 1; pointer-events: all; -webkit-transform: translateX(-360px) translateY(0) translateZ(0); transform: translateX(-360px) translateY(0) translateZ(0); cursor: pointer; } input[is="s-drawer-toggle"][name="menu"]:checked ~ s-drawer-bkg[for="menu"] { visibility: visible; -webkit-transition: visibility 0s linear 0s, outline-color 0.000001s linear 0s; transition: visibility 0s linear 0s, outline-color 0.000001s linear 0s; outline-color: black; } input[is="s-drawer-toggle"][name="menu"]:checked ~ s-drawer[name="menu"] { -webkit-transform: translateX(-360px) translateY(0) translateZ(0); transform: translateX(-360px) translateY(0) translateZ(0); } /** Generic drawer styling */ s-drawer[name="menu"] { box-shadow: rgba(0, 0, 0, 0.2) 0 0px 0px; } input[is="s-drawer-toggle"][for="menu"]:checked ~ s-drawer[name="menu"] { box-shadow: rgba(0, 0, 0, 0.2) 0 80px 120px; } s-drawer-content { -webkit-transform: none; -ms-transform: none; transform: none; } label[is="s-drawer-overlay"][for="menu"] { background: rgba(77, 80, 84, 0.8); } body.s-drawer-menu { overflow-y: hidden; } .form-group { display: -webkit-box !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-flex: 1 !important; -webkit-flex: 1 !important; -ms-flex: 1 !important; flex: 1 !important; } .form-group input[type="submit"], .form-group button, .form-group .form-addon { -webkit-box-flex: 0; -webkit-flex: 0 auto; -ms-flex: 0 auto; flex: 0 auto; } .form-group > input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), .form-group > label:first-of-type:last-of-type { -webkit-box-flex: 1 !important; -webkit-flex: 1 !important; -ms-flex: 1 !important; flex: 1 !important; margin-top: 0 !important; } /** Form */ form[loading] button, form[loading] .btn { opacity: .2; pointer-events: none; } form:invalid input[type="submit"] { opacity: 0.25; cursor: not-allowed !important; pointer-events: none; } /** Fields */ .field--disabled { opacity: 0.6; } .field--inline { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .field--inline > * { margin-right: 8px; } .field--inline > *:last-child { margin-right: 0; } /** Textarea label */ label { position: relative; display: block; font-weight: 600; } label ~ label { margin-left: 1rem; } label > textarea { padding-top: 3.375em !important; } label > textarea ~ span { position: absolute; top: 3px; left: 1px; right: 1px; padding: 1.1875em 1em; color: rgba(41, 55, 70, 0.4); background-color: white; display: block; } [is="s-label-push"] { position: relative; display: block; } [is="s-label-push"] > input { -webkit-transition: all 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; transition: all 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; outline-color: black; } [is='s-label-push'] > span { display: inline-block; padding: 1.1875em 1em; height: 3.375em; position: absolute; top: 0; left: 0; white-space: nowrap; pointer-events: none; text-overflow: ellipsis; overflow: hidden; -webkit-transform: translateX(0) translateY(0) translateZ(0); transform: translateX(0) translateY(0) translateZ(0); -webkit-transition: left 0.2s ease-in-out 0s, opacity 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s, -webkit-transform 0.2s ease-in-out 0s; transition: left 0.2s ease-in-out 0s, opacity 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s, -webkit-transform 0.2s ease-in-out 0s; transition: left 0.2s ease-in-out 0s, transform 0.2s ease-in-out 0s, opacity 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; transition: left 0.2s ease-in-out 0s, transform 0.2s ease-in-out 0s, opacity 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s, -webkit-transform 0.2s ease-in-out 0s; outline-color: black; } [is="s-label-push"] > input[placeholder] ~ span, [is="s-label-push"] > input[has-value] ~ span, [is="s-label-push"] > input:focus ~ span { left: 100%; -webkit-transform: translateX(-100%) translateY(0) translateZ(0); transform: translateX(-100%) translateY(0) translateZ(0); } [is='s-label-push'] > span { color: rgba(41, 55, 70, 0.4); } label > [required] ~ span:after { content: ' *'; color: #d9534f; font-size: .7em; } /* Functional styling; These styles are required for noUiSlider to function. You don't need to change these rules to apply your design. */ .noUi-target, .noUi-target * { -webkit-touch-callout: none; -webkit-user-select: none; -ms-touch-action: none; touch-action: none; -moz-user-select: none; -ms-user-select: none; user-select: none; box-sizing: border-box; } .noUi-target { position: relative; direction: ltr; } .noUi-base { width: 100%; height: 100%; position: relative; z-index: 1; /* Fix 401 */ } .noUi-background:before { content: ''; display: block; position: absolute; top: 50%; left: 0; width: 100%; height: 0.1em; border-radius: 0.05em; } .noUi-origin { position: absolute; right: 0; top: 0; left: 0; bottom: 0; } .noUi-handle { position: relative; z-index: 1; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; } .noUi-stacking .noUi-handle { /* This class is applied to the lower origin when its values is > 50%. */ z-index: 10; } .noUi-state-drag * { cursor: inherit !important; } /* Painting and performance; Browsers can paint handles in their own layer. */ .noUi-base, .noUi-handle { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } /* Handles and cursors; */ .noUi-draggable { cursor: w-resize; } .noUi-vertical .noUi-draggable { cursor: n-resize; } .noUi-handle__value { position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0); transform: translateX(-50%) translateY(-50%) translateZ(0); } [is="s-range"] + [s-range-container] { padding-top: .5em; padding-bottom: .5em; } [is="s-range"] + [s-range-container] .noUi-target { margin-left: 1em; margin-right: 1em; cursor: pointer; } [is="s-range"] + [s-range-container] .noUi-target.noUi-horizontal { height: 1em; } [is="s-range"] + [s-range-container] .noUi-target.noUi-vertical { width: 1em; } [is="s-range"] + [s-range-container] .noUi-handle .tooltip { display: inline-block; pointer-events: none; font-size: 1rem !important; padding: 1.1875em 1em; border-radius: 0em; } [is="s-range"] + [s-range-container] .noUi-handle { width: 2em; height: 2em; border-radius: 50%; -webkit-transform: translateX(-50%) translateY(-25%) translateZ(0); transform: translateX(-50%) translateY(-25%) translateZ(0); } [is="s-range"] + [s-range-container] .noUi-handle:focus { outline: 0; } [is="s-range"] + [s-range-container] .noUi-active { width: 1em; height: 1em; -webkit-transform: translateX(-50%) translateY(0) translateZ(0); transform: translateX(-50%) translateY(0) translateZ(0); } [is="s-range"] + [s-range-container] .noUi-handle__value { font-size: 0.6em; } [is="s-range"] + [s-range-container] .noUi-active .noUi-handle__value { font-size: 0; } [is="s-range"] + [s-range-container] .noUi-target.noUi-background, [is="s-range"] + [s-range-container] .noUi-background { background: white; } [is="s-range"] + [s-range-container] .noUi-target.noUi-background:before, [is="s-range"] + [s-range-container] .noUi-background:before { -webkit-transition: background-color 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; transition: background-color 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; outline-color: black; } [is="s-range"] + [s-range-container] .noUi-horizontal { -webkit-transition: background-color 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; transition: background-color 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; outline-color: black; } [is="s-range"] + [s-range-container] .noUi-target.noUi-horizontal .noUi-base { -webkit-transition: background-color 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; transition: background-color 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; outline-color: black; } [is="s-range"] + [s-range-container] .noUi-handle { -webkit-transition: all 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; transition: all 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; outline-color: black; } [is="s-range"] + [s-range-container] .noUi-handle:before { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0); transform: translateX(-50%) translateY(-50%) translateZ(0); border-radius: 50%; -webkit-transition: all 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; transition: all 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; outline-color: black; } [is="s-range"] + [s-range-container] .noUi-handle:focus { outline: 0; } [is="s-range"] + [s-range-container] .noUi-handle:hover:before { width: 150%; height: 150%; } [is="s-range"] + [s-range-container] .noUi-active:before { width: 400% !important; height: 400% !important; } [is="s-range"] + [s-range-container] .noUi-handle__value { text-align: center; font-weight: bold; color: white; position: relative; -webkit-transition: all 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; transition: all 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; outline-color: black; } [is="s-range"] + [s-range-container] .noUi-handle .tooltip { color: white; position: absolute !important; top: 0; left: 50%; -webkit-transform: translateX(-50%) translateY(-100%) translateZ(0); transform: translateX(-50%) translateY(-100%) translateZ(0); opacity: 0; -webkit-transition: all 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; transition: all 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; outline-color: black; } [is="s-range"] + [s-range-container] .noUi-active .tooltip { opacity: 1; top: -15px; } .noUi-state-tap .noUi-origin { -webkit-transition: left 0.1s ease-in-out 0s, top 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; transition: left 0.1s ease-in-out 0s, top 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; outline-color: black; } [is="s-range"][color="primary"] + [s-range-container] .noUi-horizontal { background-color: rgba(236, 9, 40, 0.1); } [is="s-range"][color="primary"] + [s-range-container] .noUi-target.noUi-horizontal .noUi-base { background-color: rgba(236, 9, 40, 0.1); } [is="s-range"][color="primary"] + [s-range-container] .noUi-target:hover .noUi-horizontal { background-color: rgba(236, 9, 40, 0.3); } [is="s-range"][color="primary"] + [s-range-container] .noUi-target:hover.noUi-horizontal .noUi-base { background-color: rgba(236, 9, 40, 0.3); } [is="s-range"][color="primary"] + [s-range-container] .noUi-target.noUi-background:before, [is="s-range"][color="primary"] + [s-range-container] .noUi-background:before { background-color: rgba(236, 9, 40, 0.1); } [is="s-range"][color="primary"] + [s-range-container] .noUi-target:hover.noUi-background:before, [is="s-range"][color="primary"] + [s-range-container] .noUi-target:hover .noUi-background:before { background-color: rgba(236, 9, 40, 0.3); } [is="s-range"][color="primary"] + [s-range-container] .noUi-handle { background-color: #ec0928; } [is="s-range"][color="primary"] + [s-range-container] .noUi-handle:before { background-color: rgba(236, 9, 40, 0.3); } [is="s-range"][color="primary"] + [s-range-container] .noUi-handle:focus { outline: 0; } [is="s-range"][color="primary"] + [s-range-container] .noUi-handle:hover { background-color: #bb0720; } [is="s-range"][color="primary"] + [s-range-container] .noUi-active { background-color: #8a0517 !important; box-shadow: rgba(236, 9, 40, 0.3) 0 6px 9px; } [is="s-range"][color="primary"] + [s-range-container] .noUi-active:before { background-color: rgba(236, 9, 40, 0.2); } [is="s-range"][color="primary"] + [s-range-container] .noUi-active .noUi-handle__value { color: #8a0517; } [is="s-range"][color="primary"] + [s-range-container] .noUi-handle .tooltip { position: relative; background: #fff; border-style: solid; border-width: 0; box-shadow: rgba(0, 0, 0, 0.3) 0 6px 9px; color: #293746; } [is="s-range"][color="primary"] + [s-range-container] .noUi-handle .tooltip:after, [is="s-range"][color="primary"] + [s-range-container] .noUi-handle .tooltip:before { border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; visibility: visible; } [is="s-range"][color="primary"] + [s-range-container] .noUi-handle .tooltip:after { border-width: 5px; border-top-color: #fff; bottom: -10px; right: 50%; margin-right: -5px; } [is="s-range"][color="primary"] + [s-range-container] .noUi-handle .tooltip:before { border-width: 5px; bottom: -10px; right: 50%; margin-right: -5px; } input[type=range] { -webkit-appearance: none; margin: 4px 0; } input[type=range]:focus { outline: none; } input[type=range]:focus::-webkit-slider-runnable-track { background: #ebedf1; } input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 8px; cursor: pointer; box-shadow: 0; background: #ebedf1; border-radius: 2px; border: 0; } input[type=range]::-moz-range-track { width: 100%; height: 8px; cursor: pointer; box-shadow: 0; background: #ebedf1; border-radius: 2px; border: 0; } input[type=range]::-webkit-slider-thumb { box-shadow: 0; border: 0; height: 16px; width: 16px; border-radius: 50px; background: #ec0928; cursor: pointer; -webkit-appearance: none; margin-top: -4px; } input[type=range]::-moz-range-thumb { box-shadow: 0; border: 0; height: 16px; width: 16px; border-radius: 50px; background: #ec0928; cursor: pointer; } input[type=range]::-ms-track { width: 100%; height: 8px; cursor: pointer; background: transparent; border-color: transparent; color: transparent; } input[type=range]::-ms-fill-lower { background: #ebedf1; border: 0; border-radius: 4px; box-shadow: 0; } input[type=range]::-ms-fill-upper { background: #ebedf1; border: 0; border-radius: 4px; box-shadow: 0; } input[type=range]::-ms-thumb { box-shadow: 0; border: 0; height: 16px; width: 16px; border-radius: 50px; background: #ec0928; cursor: pointer; height: 8px; } input[type=range]:focus::-ms-fill-lower { background: #ebedf1; } input[type=range]:focus::-ms-fill-upper { background: #ebedf1; } @media screen and (max-width: 639px) { .price-range input[type=range] { width: 100%; } } @media screen and (min-width: 640px) { .price-range { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -webkit-justify-content: start; -ms-flex-pack: start; justify-content: start; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .price-range label { width: 140px; } .price-range input[type=range] { width: auto; } .adult .price-range input[type=range] { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; min-width: 500px; } .junior .price-range input[type=range] { width: 160px; } } .s-select { position: relative; cursor: pointer; } select:disabled + .s-select { opacity: 0.25; pointer-events: none; cursor: not-allowed; } .s-select__dropdown { opacity: 0; pointer-events: none; position: absolute; top: 100%; left: 0; z-index: 1; width: 100%; height: 0; overflow-y: hidden; } .s-select__selection { vertical-align: middle; } .s-select__selection > * { display: inline-block; vertical-align: middle; } .s-select__dropup .s-select__dropdown { top: auto; bottom: calc(100% + 10px); } .s-select--opened .s-select__dropdown { opacity: 1; pointer-events: all; height: auto; } .s-select__options { overflow-y: auto; overflow-x: hidden; height: 100%; max-height: 100vh; position: relative; } .s-select__option { list-style: none; cursor: pointer; } .s-select__option--disabled { opacity: 0.25; pointer-events: none; } .s-select__option--hidden { display: none; } .s-select__selection-tag { display: inline-block; } .s-select__reset { display: none; background-size: 100% 100%; background-color: transparent; border: none; position: absolute; } :hover > .s-select__reset { display: inline-block; } .s-select__selection-tag-close { background-size: 100% 100%; } .s-select__selection-tag-close { height: 0.8em; width: 0.8em; vertical-align: middle; cursor: pointer; display: inline-block; } .s-select__reset { right: 3.5625em; top: 1em; height: 1em; width: 1em; vertical-align: middle; cursor: pointer; } .s-select__search-field { border-radius: 0em; padding: 1.1875em 1em; } .s-select.input { background-size: 9px 6px; background-position: right center; background-origin: content-box; background-repeat: no-repeat; border-radius: 0em; padding: 0 1em; height: 3.375em; } .s-select.input:not(input) { padding: 1.1875em 1em; } .s-select.input.s-select__multiple { -webkit-transition: none; transition: none; } .s-select.input.s-select__multiple:not(.s-select--placeholder) { padding: 0.35625em 0.7125em; height: auto !important; } .s-select.input .s-select__dropdown { border-radius: 0em; } .s-select.input .s-select__search-container { padding: 1.1875em 1em; } .s-select.input .s-select__search-field { border-radius: 0em; padding: 0 1em; height: 3.375em; border-radius: 0em; } .s-select.input .s-select__search-field:not(input) { padding: 1.1875em 1em; } .s-select.input .s-select__selection-tag { border-radius: 0em; font-size: 0.8em; margin-right: 0.5em; margin-top: 0.35625em; margin-bottom: 0.35625em; padding: 0.59375em 0.5em; } .s-select.input .s-select__selection-tag-close { margin-left: 0.33333333em; } .s-select.input .s-select__option:not(.s-select__option--custom), .s-select.input .s-select__optgroup:not(.s-select__optgroup--custom) { padding: 1.1875em 1em; } .s-select.input .s-select__option--in-optgroup { padding-left: 2.375em !important; } .s-select { background-color: white; border-color: rgba(41, 55, 70, 0.1); border-bottom-color: rgba(41, 55, 70, 0.3); background-image: url('data:image/svg+xml;utf8,'); } [data-input-activator]:focus ~ .s-select, [data-input-activator]:checked ~ .s-select, .s-select:hover:not(:disabled), .s-select:focus:not(:disabled), .s-select.active:not(:disabled) { border-bottom-color: rgba(41, 55, 70, 0.6); } [data-input-activator]:focus ~ .s-select, [data-input-activator]:checked ~ .s-select, .s-select:focus:not(:disabled), .s-select.active:not(:disabled) { border-left-color: rgba(41, 55, 70, 0.6); } .s-select.vr, .vr .s-select { margin-bottom: 1rem; } .s-select.text-format, .text-format .s-select { margin-bottom: 1rem; } .s-select__search-field { width: 100%; height: 100%; outline: none; color: #293746; background-color: white; border: 1px solid rgba(41, 55, 70, 0.5); } .s-select__search-field::-webkit-input-placeholder { color: rgba(41, 55, 70, 0.4); } .s-select__search-field:-moz-placeholder { color: rgba(41, 55, 70, 0.4); } .s-select__search-field::-moz-placeholder { color: rgba(41, 55, 70, 0.4); } .s-select__search-field:-ms-input-placeholder { color: rgba(41, 55, 70, 0.4); } .input--placeholder { color: rgba(41, 55, 70, 0.4); } .s-select__dropdown { top: calc(100% + 3px); margin-top: -20px; -webkit-transition: all 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; transition: all 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; outline-color: black; background: white; box-shadow: rgba(0, 0, 0, 0.2) 0 12px 18px; } .s-select--opened .s-select__dropdown { margin-top: 0; } .s-select.input .s-select__optgroup:not(.s-select__optgroup--custom) { font-weight: bold; } .s-select__option { color: #293746; -webkit-transition: all 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; transition: all 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; outline-color: black; } select[required] + .s-select--placeholder .s-select__selection:after { content: ' *'; color: #d9534f; font-size: .7em; } .s-select .s-select__search-container { background: rgba(41, 55, 70, 0.1); border-bottom: 1px solid rgba(41, 55, 70, 0.2); } .s-select .s-select__selection-tag { background: rgba(41, 55, 70, 0.6); color: white; } .s-select .s-select__reset, .s-select .s-select__selection-tag-close { background-image: url('data:image/svg+xml;utf8,'); opacity: .65; } .s-select .s-select__reset:hover, .s-select .s-select__selection-tag-close:hover { opacity: 1; } .s-select .s-select__option--selected { background: rgba(41, 55, 70, 0.2); } .s-select .s-select__option.active { background: rgba(41, 55, 70, 0.3); } .s-select .s-select__option:hover, .s-select .s-select__option:active { background: rgba(41, 55, 70, 0.6); color: white; } .s-select .s-select__search-result { background: #293746; color: white; } .s-select { border: 1px solid #ecf0f4 !important; } select[invalid] + .s-select { border: solid 1px #d9534f !important; } select[valid][dirty][has-value] + .s-select { border: solid 1px #2fd683 !important; } /** Header styling */ .header { position: relative; z-index: 2; overflow: visible !important; } .header .flex { position: relative; } .header .header__mega-dropdown-container { pointer-events: none; opacity: 0; -webkit-transition: all 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; transition: all 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; outline-color: black; } .header .header__mega-dropdown-container.active { pointer-events: all; opacity: 1; } @media screen and (max-width: 640px) { .header .header__mega-dropdown-container { display: none; } } .header .header__mega-dropdown-container.active ~ .flex .header__logo { height: 40px; width: auto; margin: 15px 0; } .s-sticky--sticked .header { padding: 0.75rem 0 !important; } .s-sticky--sticked .header .header__logo { height: 30px !important; width: auto !important; margin: 0 !important; } .header__logo { height: 70px; margin-right: 20px; width: auto !important; } .header__logo:last-child { margin-right: 0; } @media screen and (min-width: 641px) and (max-width: 1023px) { .header__logo { height: 50px; } } @media screen and (max-width: 640px) { .header__logo { height: 40px; } } .header__mega-dropdown { position: absolute; top: -1.25rem; left: -1.25rem; right: -1.25rem; padding: 1.875rem; padding-top: 6.25rem; background: white; box-shadow: rgba(0, 0, 0, 0.2) 0 10px 15px; } .header__mega-dropdown li.active { color: #ec0928; } .header__mega-dropdown li.active figure { border: solid 1px #ec0928; } .header__mega-dropdown .h3, .header__mega-dropdown .text-format h3, .text-format .header__mega-dropdown h3, .header__mega-dropdown .markdown-format h2, .markdown-format .header__mega-dropdown h2 { height: 2em; } .menu__school-list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .nav--inline, .nav--justify { list-style: none; padding: 0; margin: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .nav--inline { display: block; } .nav--inline > li, .nav--inline > .nav__item { position: relative; display: inline-block; padding-right: 2em; } .nav--inline > li:last-of-type, .nav--inline > .nav__item:last-of-type { padding-right: 0 !important; } .nav--inline > li:first-of-type, .nav--inline > .nav__item:first-of-type { padding-left: 0 !important; } .nav--right { text-align: right; } .nav--right > li, .nav--right > .nav__item { padding-right: 0; padding-left: 2em; } .nav--justify { display: table; width: 100%; } .nav--justify > li, .nav--justify > .nav__item { display: table-cell; vertical-align: middle; padding-right: 2em; text-align: center; } .nav--right { text-align: right; } .nav--right > li, .nav--right > .nav__item { padding-right: 0; padding-left: 2em; } /** Default navigation */ .nav:not(.nav--inline) .nav__item { padding-top: 1.1875em; padding-bottom: 1.1875em; -webkit-transition: all 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; transition: all 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; outline-color: black; } /** Tabs */ .nav--tabs .nav__item { background: #F8F9FB; } .nav--tabs .nav__item:hover, .nav--tabs .nav__item.active { background: #ec0928; color: white; } @media screen and (max-width: 640px) { .nav--tabs .nav__item { display: block !important; } } /** Other navigation */ .nav--inline .nav__item { padding-left: 0.5em; padding-right: 0.5em; } .nav--list .nav__item { display: block; } /** Breadcrumb navigation */ .nav--breadcrumb .nav__item { padding: 0 0.5em !important; } .nav--breadcrumb .nav__item:not(:last-of-type):after { content: '>'; display: inline-block; margin-left: 1em; } /** Primary navigation This is the navigation that will be sticked on top of the page */ @-webkit-keyframes sticky-primary-nav { from { max-height: 0; } to { max-height: 100px; } } @keyframes sticky-primary-nav { from { max-height: 0; } to { max-height: 100px; } } s-sticky .nav--primary-sticky-container { -webkit-animation: sticky-primary-nav 0.4s 0s ease-in-out 1 normal forwards; animation: sticky-primary-nav 0.4s 0s ease-in-out 1 normal forwards; background: #F8F9FB; overflow: hidden; } s-sticky .nav--primary-sticky-container .nav--primary { max-width: 1200px; margin: 0 auto; } s-sticky .nav--primary-sticky-container .nav--primary .nav__item { padding: 1em 2em !important; } .nav--primary .nav__item { padding: 2.5em 2em !important; } @media screen and (max-width: 640px) { .nav--primary .nav__item { padding: 1em 1em !important; border-bottom: solid 1px #ebedf1; } } [s-activate-target=""] { display: none; } [s-activate-target=""].read-more--active, [s-activate-target=""].active { display: block; } [s-activate-target=""].read-more--active.flex, [s-activate-target=""].active.flex { display: block; } [s-activate-target="toggle"] { display: block !important; max-height: 0; overflow: hidden; opacity: 0.001; -webkit-transition: all 0.4s ease-in-out 0s, outline-color 0.000001s linear 0s; transition: all 0.4s ease-in-out 0s, outline-color 0.000001s linear 0s; outline-color: black; } [s-activate-target="toggle"].read-more--active, [s-activate-target="toggle"].active { max-height: 500px; opacity: 1; } [s-activate-target="slide"] { display: block !important; max-height: 0; overflow: hidden; opacity: 0.001; padding: 0 !important; -webkit-transform: translateX(-20px) translateY(0) translateZ(0); transform: translateX(-20px) translateY(0) translateZ(0); -webkit-transition: opacity 0.2s ease-in-out 0s, max-height 0.3s step-end 0s, outline-color 0.000001s linear 0s, -webkit-transform 0.2s ease-in-out 0s; transition: opacity 0.2s ease-in-out 0s, max-height 0.3s step-end 0s, outline-color 0.000001s linear 0s, -webkit-transform 0.2s ease-in-out 0s; transition: transform 0.2s ease-in-out 0s, opacity 0.2s ease-in-out 0s, max-height 0.3s step-end 0s, outline-color 0.000001s linear 0s; transition: transform 0.2s ease-in-out 0s, opacity 0.2s ease-in-out 0s, max-height 0.3s step-end 0s, outline-color 0.000001s linear 0s, -webkit-transform 0.2s ease-in-out 0s; outline-color: black; } [s-activate-target="slide"].read-more--active, [s-activate-target="slide"].active { -webkit-transform: translateX(0) translateY(0) !important; -ms-transform: translateX(0) translateY(0) !important; transform: translateX(0) translateY(0) !important; -webkit-transition: opacity 0.2s ease-in-out 0.3s, max-height 0.2s step-start 0.3s, outline-color 0.000001s linear 0s, -webkit-transform 0.2s ease-in-out 0.3s; transition: opacity 0.2s ease-in-out 0.3s, max-height 0.2s step-start 0.3s, outline-color 0.000001s linear 0s, -webkit-transform 0.2s ease-in-out 0.3s; transition: transform 0.2s ease-in-out 0.3s, opacity 0.2s ease-in-out 0.3s, max-height 0.2s step-start 0.3s, outline-color 0.000001s linear 0s; transition: transform 0.2s ease-in-out 0.3s, opacity 0.2s ease-in-out 0.3s, max-height 0.2s step-start 0.3s, outline-color 0.000001s linear 0s, -webkit-transform 0.2s ease-in-out 0.3s; outline-color: black; max-height: 9999px; opacity: 1; } [s-activate-target="slide"].active ~ [s-activate-target="slide"] { -webkit-transform: translateX(20px) translateY(0) translateZ(0); transform: translateX(20px) translateY(0) translateZ(0); } s-ajax-form { overflow: hidden; height: 0; display: block; } s-ajax-form[dirty], s-ajax-form[s-template-dirty] { height: auto; } /** Dialog */ .s-dialog { padding: 3.75rem; -webkit-animation: dialog-out-container 0.2s 0s ease-in-out 1 normal forwards; animation: dialog-out-container 0.2s 0s ease-in-out 1 normal forwards; } @media screen and (max-width: 640px) { .s-dialog { padding: 0; } } .s-dialog .s-dialog__container { padding: 2.5rem; } .s-dialog .gallery { top: 0; -webkit-transform: none; -ms-transform: none; transform: none; } .s-dialog__overlay { background: rgba(77, 80, 84, 0.8); -webkit-animation: dialog-in-overlay 0.1s 0s ease-out 1 normal forwards; animation: dialog-in-overlay 0.1s 0s ease-out 1 normal forwards; bottom: 0; } .s-dialog__content { width: calc(100vw - 40px); background: white; -webkit-animation: dialog-in-content 0.2s 0s ease-in-out 1 normal forwards; animation: dialog-in-content 0.2s 0s ease-in-out 1 normal forwards; box-shadow: rgba(0, 0, 0, 0.2) 0 10px 15px; } @media screen and (min-width: 1200px) { .s-dialog__content { max-width: 75rem !important; } } @media screen and (min-width: 1024px) { .s-dialog__content { width: 95%; max-width: 95%; min-height: calc(100vh - 40px); min-height: inherit; } } @media screen and (max-width: 1023px) { .s-dialog__content { width: 95%; max-width: 95%; min-height: calc(100vh - 40px); min-height: inherit; } } .s-dialog__close { -webkit-animation: dialog-in-content 0.2s 0s ease-in-out 1 normal forwards; animation: dialog-in-content 0.2s 0s ease-in-out 1 normal forwards; position: absolute; right: 18px; top: 20px; background: #293746; color: white; padding: 0.625rem; font-size: 20px; display: block; width: 50px; height: 50px; text-align: center; cursor: pointer; } .s-dialog__close:before { vertical-align: middle; } @media screen and (max-width: 640px) { .s-dialog__close { display: block !important; } } .s-dialog--out .s-dialog__overlay { -webkit-animation: dialog-out-overlay 0.2s 0s ease-out 1 normal forwards; animation: dialog-out-overlay 0.2s 0s ease-out 1 normal forwards; } .s-dialog--out .s-dialog__content, .s-dialog--out .s-dialog__close { -webkit-animation: dialog-out-content 0.1s 0s ease-out 1 normal forwards; animation: dialog-out-content 0.1s 0s ease-out 1 normal forwards; } @-webkit-keyframes dialog-in-overlay { from { opacity: 0; } to { opacity: 1; } } @keyframes dialog-in-overlay { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes dialog-in-content { from { opacity: 0; -webkit-transform: translateY(-50px); transform: translateY(-50px); } to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes dialog-in-content { from { opacity: 0; -webkit-transform: translateY(-50px); transform: translateY(-50px); } to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes dialog-out-container { from { } to { } } @keyframes dialog-out-container { from { } to { } } @-webkit-keyframes dialog-out-overlay { from { opacity: 1; } to { opacity: 0; } } @keyframes dialog-out-overlay { from { opacity: 1; } to { opacity: 0; } } @-webkit-keyframes dialog-out-content { from { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } to { -webkit-transform: translateY(50px); transform: translateY(50px); opacity: 0; } } @keyframes dialog-out-content { from { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } to { -webkit-transform: translateY(50px); transform: translateY(50px); opacity: 0; } } /** Sticky */ s-sticky { display: block; } s-sticky.s-sticky--sticked { z-index: 100; background: white; -webkit-animation: sticky-header-in 0.4s 0s ease-out 1 normal forwards; animation: sticky-header-in 0.4s 0s ease-out 1 normal forwards; box-shadow: rgba(0, 0, 0, 0.2) 0 2px 3px; -webkit-transition: margin-top 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; transition: margin-top 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; outline-color: black; margin-top: -40px; } s-sticky.s-sticky--sticked:hover { margin-top: 0; } s-sticky.sticky-header--fixed, s-sticky.sticky-header--fixed:hover { margin-top: -10px; } @-webkit-keyframes sticky-header-in { from { -webkit-transform: translateX(0) translateY(-100%) translateZ(0); transform: translateX(0) translateY(-100%) translateZ(0); } to { -webkit-transform: translateX(0) translateY(0) translateZ(0); transform: translateX(0) translateY(0) translateZ(0); } } @keyframes sticky-header-in { from { -webkit-transform: translateX(0) translateY(-100%) translateZ(0); transform: translateX(0) translateY(-100%) translateZ(0); } to { -webkit-transform: translateX(0) translateY(0) translateZ(0); transform: translateX(0) translateY(0) translateZ(0); } } @-webkit-keyframes sticky-header-out { from { -webkit-transform: translateX(0) translateY(0) translateZ(0); transform: translateX(0) translateY(0) translateZ(0); } to { -webkit-transform: translateX(0) translateY(-100%) translateZ(0); transform: translateX(0) translateY(-100%) translateZ(0); } } @keyframes sticky-header-out { from { -webkit-transform: translateX(0) translateY(0) translateZ(0); transform: translateX(0) translateY(0) translateZ(0); } to { -webkit-transform: translateX(0) translateY(-100%) translateZ(0); transform: translateX(0) translateY(-100%) translateZ(0); } } s-sticky.s-sticky--out { -webkit-animation: none; animation: none; } /** Section styling */ .section { position: relative; } .section header { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margin-bottom: 1.25rem; } @media screen and (max-width: 640px) { .section header { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } } .section header h1 { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } /** Image */ .section__img { position: relative; overflow: hidden; position: absolute; top: 0; right: 0; min-width: 50%; overflow: hidden; z-index: -1; } .section__img:before { content: ''; display: block; height: 0; padding-top: 100%; } .section__img:after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #f85032; background: radial-gradient(circle farthest-side at 100% 0, rgba(255, 255, 255, 0), white 100%); } /** Alpadia logo */ .section--alpadia-logo { background-image: url("../img/alpadia-logo--grey-transparent.svg"); background-size: auto 130%; background-position: -10% center; background-repeat: no-repeat; } /** Sizes */ .section--smaller { padding-top: 0.75rem; padding-bottom: 0.75rem; } .section--small { padding-top: 1rem; padding-bottom: 1rem; } .section--medium { padding-top: 1.875rem; padding-bottom: 1.875rem; } @media screen and (max-width: 1023px) { .section--medium { padding-top: 1.875rem; padding-bottom: 1.875rem; } } .section--big { padding-top: 2.5rem; padding-bottom: 2.5rem; } @media screen and (max-width: 1023px) { .section--big { padding-top: 1.875rem; padding-bottom: 1.875rem; } } .section--bigger { padding-top: 3.75rem; padding-bottom: 3.75rem; } @media screen and (max-width: 1023px) { .section--bigger { padding-top: 1.875rem; padding-bottom: 1.875rem; } } /** Dark section */ .section--dark { background: url("/assets/img/section--dark-juniors.png") no-repeat 50% 50%, -webkit-gradient(linear, left bottom, left top, from(#293746), to(#161e26)); background: url("/assets/img/section--dark-juniors.png") no-repeat 50% 50%, linear-gradient(to top, #293746, #161e26); background-size: cover; } /** Side menu */ .sidemenu { background: #4d5054; font-size: 0.9rem; } .tabs { background-color: #ebedf1; } .tabs__tab a { padding: 8px; text-align: center; display: block; } .tabs__tab a, .tabs__tab a:before, .tabs__tab a:after { -webkit-transition: all 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; transition: all 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; outline-color: black; } .tabs__tab a:hover, .tabs__tab a.active { background: white; } /** Mobile tab adjustement */ .topbar { background: #ec0928; position: relative; } .topbar:hover { z-index: 10; } .grid-swiss-quality { display: grid; grid-gap: 20px; grid-template-areas: "lessons" "motivated" "in-touch" "pedagogic" "support" "accommodation" "classroom" "activities"; } @media screen and (min-width: 600px) { .grid-swiss-quality { grid-template-areas: "lessons . support" "motivated img in-touch" "pedagogic img accommodation" "classroom img activities"; } } @media screen and (min-width: 1000px) { .grid-swiss-quality { grid-template-columns: 3fr minmax(100px, 6fr) 5fr; } } @media screen and (min-width: 1200px) { .grid-swiss-quality { padding: 0 80px; } } .swiss-quality__graph, .swiss-quality__graph__title { display: none; } .swiss-quality__graph { max-width: 100%; } @media screen and (min-width: 1000px) { .swiss-quality__graph { display: block; grid-area: img; -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; justify-self: center; } } @media screen and (min-width: 1000px) { .swiss-quality__graph__title { display: block; max-width: 200px; text-align: center; margin-top: 4em; } } /* LAYOUT ---------------------------------------*/ /** These are the classes that are specific to certain section id's other styles, e.g. `#home-products figure`. */ /* TRUMPS ---------------------------------------*/ /** These are helper classes and overrides that should take precedence over all other styles, e.g. `.float--left {}`. */ /* TRUMPS ---------------------------------------*/ /** Animations trumps */ .no-animation, .no-animation * { -webkit-animation: none !important; animation: none !important; } .no-transition, .no-transition * { -webkit-transition: none !important; transition: none !important; } .no-transimation, .no-transimation * { -webkit-transition: none !important; transition: none !important; -webkit-animation: none !important; animation: none !important; } .float-left { float: left; } .float-right { float: right; } .clear { clear: both; } .clear-left { clear: left; } .clear-right { clear: right; } .auto-height { height: inherit; min-height: inherit; max-height: inherit; } .no-gutter { padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; } .no-gutter-left { padding-left: 0; } .no-gutter-right { padding-right: 0; } .no-gutter-top { padding-top: 0; } .no-gutter-bottom { padding-bottom: 0; } .row > .gutter, .gutter { padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; } .row > .gutter-left, .gutter-left { padding-left: 10px; } .row > .gutter-right, .gutter-right { padding-right: 10px; } .row > .gutter-top, .gutter-top { padding-top: 10px; } .row > .gutter-bottom, .gutter-bottom { padding-bottom: 10px; } .hide { display: none !important; } .not-visible { visibility: hidden; } .show { display: block !important; } .show-inline { display: inline-block !important; } .visible { visibility: visible; } .clear-each-2 > [class*="gr-"]:nth-of-type(2n+1) { clear: left; } .clear-each-3 > [class*="gr-"]:nth-of-type(3n+1) { clear: left; } .clear-each-4 > [class*="gr-"]:nth-of-type(4n+1) { clear: left; } .clear-each-5 > [class*="gr-"]:nth-of-type(5n+1) { clear: left; } .clear-each-6 > [class*="gr-"]:nth-of-type(6n+1) { clear: left; } body { direction: ltr; } @media screen and (min-width: 1024px) { .float-left\@desktop { float: left; } .float-right\@desktop { float: right; } .clear\@desktop { clear: both; } .clear-left\@desktop { clear: left; } .clear-right\@desktop { clear: right; } .auto-height\@desktop { height: inherit; min-height: inherit; max-height: inherit; } .no-gutter\@desktop { padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; } .no-gutter-left\@desktop { padding-left: 0; } .no-gutter-right\@desktop { padding-right: 0; } .no-gutter-top\@desktop { padding-top: 0; } .no-gutter-bottom\@desktop { padding-bottom: 0; } .row > .gutter\@desktop, .gutter\@desktop { padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; } .row > .gutter-left\@desktop, .gutter-left\@desktop { padding-left: 10px; } .row > .gutter-right\@desktop, .gutter-right\@desktop { padding-right: 10px; } .row > .gutter-top\@desktop, .gutter-top\@desktop { padding-top: 10px; } .row > .gutter-bottom\@desktop, .gutter-bottom\@desktop { padding-bottom: 10px; } .hide\@desktop { display: none !important; } .not-visible\@desktop { visibility: hidden; } .show\@desktop { display: block !important; } .show-inline\@desktop { display: inline-block !important; } .visible\@desktop { visibility: visible; } .clear-each-2\@desktop > [class*="gr-"]:nth-of-type(2n+1) { clear: left; } .clear-each-3\@desktop > [class*="gr-"]:nth-of-type(3n+1) { clear: left; } .clear-each-4\@desktop > [class*="gr-"]:nth-of-type(4n+1) { clear: left; } .clear-each-5\@desktop > [class*="gr-"]:nth-of-type(5n+1) { clear: left; } .clear-each-6\@desktop > [class*="gr-"]:nth-of-type(6n+1) { clear: left; } body { direction: ltr; } } @media screen and (max-width: 640px) { .float-left\@mobile { float: left; } .float-right\@mobile { float: right; } .clear\@mobile { clear: both; } .clear-left\@mobile { clear: left; } .clear-right\@mobile { clear: right; } .auto-height\@mobile { height: inherit; min-height: inherit; max-height: inherit; } .no-gutter\@mobile { padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; } .no-gutter-left\@mobile { padding-left: 0; } .no-gutter-right\@mobile { padding-right: 0; } .no-gutter-top\@mobile { padding-top: 0; } .no-gutter-bottom\@mobile { padding-bottom: 0; } .row > .gutter\@mobile, .gutter\@mobile { padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; } .row > .gutter-left\@mobile, .gutter-left\@mobile { padding-left: 10px; } .row > .gutter-right\@mobile, .gutter-right\@mobile { padding-right: 10px; } .row > .gutter-top\@mobile, .gutter-top\@mobile { padding-top: 10px; } .row > .gutter-bottom\@mobile, .gutter-bottom\@mobile { padding-bottom: 10px; } .hide\@mobile { display: none !important; } .not-visible\@mobile { visibility: hidden; } .show\@mobile { display: block !important; } .show-inline\@mobile { display: inline-block !important; } .visible\@mobile { visibility: visible; } .clear-each-2\@mobile > [class*="gr-"]:nth-of-type(2n+1) { clear: left; } .clear-each-3\@mobile > [class*="gr-"]:nth-of-type(3n+1) { clear: left; } .clear-each-4\@mobile > [class*="gr-"]:nth-of-type(4n+1) { clear: left; } .clear-each-5\@mobile > [class*="gr-"]:nth-of-type(5n+1) { clear: left; } .clear-each-6\@mobile > [class*="gr-"]:nth-of-type(6n+1) { clear: left; } body { direction: ltr; } } @media screen and (min-width: 641px) and (max-width: 1023px) { .float-left\@tablet { float: left; } .float-right\@tablet { float: right; } .clear\@tablet { clear: both; } .clear-left\@tablet { clear: left; } .clear-right\@tablet { clear: right; } .auto-height\@tablet { height: inherit; min-height: inherit; max-height: inherit; } .no-gutter\@tablet { padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; } .no-gutter-left\@tablet { padding-left: 0; } .no-gutter-right\@tablet { padding-right: 0; } .no-gutter-top\@tablet { padding-top: 0; } .no-gutter-bottom\@tablet { padding-bottom: 0; } .row > .gutter\@tablet, .gutter\@tablet { padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; } .row > .gutter-left\@tablet, .gutter-left\@tablet { padding-left: 10px; } .row > .gutter-right\@tablet, .gutter-right\@tablet { padding-right: 10px; } .row > .gutter-top\@tablet, .gutter-top\@tablet { padding-top: 10px; } .row > .gutter-bottom\@tablet, .gutter-bottom\@tablet { padding-bottom: 10px; } .hide\@tablet { display: none !important; } .not-visible\@tablet { visibility: hidden; } .show\@tablet { display: block !important; } .show-inline\@tablet { display: inline-block !important; } .visible\@tablet { visibility: visible; } .clear-each-2\@tablet > [class*="gr-"]:nth-of-type(2n+1) { clear: left; } .clear-each-3\@tablet > [class*="gr-"]:nth-of-type(3n+1) { clear: left; } .clear-each-4\@tablet > [class*="gr-"]:nth-of-type(4n+1) { clear: left; } .clear-each-5\@tablet > [class*="gr-"]:nth-of-type(5n+1) { clear: left; } .clear-each-6\@tablet > [class*="gr-"]:nth-of-type(6n+1) { clear: left; } body { direction: ltr; } } @media (max-height: 700px) { .hide\@height-small { display: none !important; } .show\@height-small { display: block !important; } body { direction: ltr; } } @media (max-height: 900px) { .hide\@height-medium { display: none !important; } .show\@height-medium { display: block !important; } body { direction: ltr; } } @media (min-height: 901px) { .hide\@height-big { display: none !important; } .show\@height-big { display: block !important; } body { direction: ltr; } } /** Cover */ .abs-cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; font-family: 'object-fit: cover;'; overflow: hidden; } .rel-cover { position: relative; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; font-family: 'object-fit: contain;'; overflow: hidden; } /** Greyscale */ /** Accreditations */ .filter-accreditation { -webkit-filter: grayscale(100%); filter: grayscale(100%); opacity: .4; -webkit-transition: all 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; transition: all 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; outline-color: black; } .filter-accreditation:hover { -webkit-filter: grayscale(0); filter: grayscale(0); opacity: 1; } /** Mobile specific */ @media screen and (max-width: 640px) { *, *:after, *:before { -webkit-transition: none !important; transition: none !important; } } /** Position styling */ /** sizes */ .abs-fit { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /** Ratios */ .ratio-1-1 { position: relative; overflow: hidden; } .ratio-1-1:before { content: ''; display: block; height: 0; padding-top: 100%; } .ratio-2-1 { position: relative; overflow: hidden; } .ratio-2-1:before { content: ''; display: block; height: 0; padding-top: 50%; } .ratio-3-1 { position: relative; overflow: hidden; } .ratio-3-1:before { content: ''; display: block; height: 0; padding-top: 33.33333333%; } .ratio-4-1 { position: relative; overflow: hidden; } .ratio-4-1:before { content: ''; display: block; height: 0; padding-top: 25%; } .ratio-5-1 { position: relative; overflow: hidden; } .ratio-5-1:before { content: ''; display: block; height: 0; padding-top: 20%; } .ratio-16-9 { position: relative; overflow: hidden; } .ratio-16-9:before { content: ''; display: block; height: 0; padding-top: 56.25%; } .ratio-4-3 { position: relative; overflow: hidden; } .ratio-4-3:before { content: ''; display: block; height: 0; padding-top: 75%; } .ratio-identity-picture { position: relative; overflow: hidden; } .ratio-identity-picture:before { content: ''; display: block; height: 0; padding-top: 128.57142857%; } .ratio-2-1 { position: relative; overflow: hidden; } .ratio-2-1:before { content: ''; display: block; height: 0; padding-top: 50%; } @media screen and (max-width: 640px) { .ratio-2-1\@mobile { position: relative; overflow: hidden; } .ratio-2-1\@mobile:before { content: ''; display: block; height: 0; padding-top: 50%; } } @media screen and (min-width: 641px) and (max-width: 1023px) { .ratio-2-1\@tablet { position: relative; overflow: hidden; } .ratio-2-1\@tablet:before { content: ''; display: block; height: 0; padding-top: 50%; } } @media screen and (max-width: 1023px) { .ratio-2-1\@moblet { position: relative; overflow: hidden; } .ratio-2-1\@moblet:before { content: ''; display: block; height: 0; padding-top: 50%; } } @media screen and (min-width: 1024px) { .ratio-2-1\@desktop { position: relative; overflow: hidden; } .ratio-2-1\@desktop:before { content: ''; display: block; height: 0; padding-top: 50%; } } @media screen and (min-width: 1200px) { .ratio-2-1\@large-desktop { position: relative; overflow: hidden; } .ratio-2-1\@large-desktop:before { content: ''; display: block; height: 0; padding-top: 50%; } } @media (max-height: 700px) { .ratio-2-1\@height-small { position: relative; overflow: hidden; } .ratio-2-1\@height-small:before { content: ''; display: block; height: 0; padding-top: 50%; } } @media (max-height: 900px) { .ratio-2-1\@height-medium { position: relative; overflow: hidden; } .ratio-2-1\@height-medium:before { content: ''; display: block; height: 0; padding-top: 50%; } } @media (min-height: 901px) { .ratio-2-1\@height-big { position: relative; overflow: hidden; } .ratio-2-1\@height-big:before { content: ''; display: block; height: 0; padding-top: 50%; } } .ratio-4-1 { position: relative; overflow: hidden; } .ratio-4-1:before { content: ''; display: block; height: 0; padding-top: 25%; } @media screen and (max-width: 640px) { .ratio-4-1\@mobile { position: relative; overflow: hidden; } .ratio-4-1\@mobile:before { content: ''; display: block; height: 0; padding-top: 25%; } } @media screen and (min-width: 641px) and (max-width: 1023px) { .ratio-4-1\@tablet { position: relative; overflow: hidden; } .ratio-4-1\@tablet:before { content: ''; display: block; height: 0; padding-top: 25%; } } @media screen and (max-width: 1023px) { .ratio-4-1\@moblet { position: relative; overflow: hidden; } .ratio-4-1\@moblet:before { content: ''; display: block; height: 0; padding-top: 25%; } } @media screen and (min-width: 1024px) { .ratio-4-1\@desktop { position: relative; overflow: hidden; } .ratio-4-1\@desktop:before { content: ''; display: block; height: 0; padding-top: 25%; } } @media screen and (min-width: 1200px) { .ratio-4-1\@large-desktop { position: relative; overflow: hidden; } .ratio-4-1\@large-desktop:before { content: ''; display: block; height: 0; padding-top: 25%; } } @media (max-height: 700px) { .ratio-4-1\@height-small { position: relative; overflow: hidden; } .ratio-4-1\@height-small:before { content: ''; display: block; height: 0; padding-top: 25%; } } @media (max-height: 900px) { .ratio-4-1\@height-medium { position: relative; overflow: hidden; } .ratio-4-1\@height-medium:before { content: ''; display: block; height: 0; padding-top: 25%; } } @media (min-height: 901px) { .ratio-4-1\@height-big { position: relative; overflow: hidden; } .ratio-4-1\@height-big:before { content: ''; display: block; height: 0; padding-top: 25%; } } .fi-shadow { box-shadow: #293746 0 0 32px; } .fi-shadowed-text { -webkit-filter: drop-shadow(rgba(0, 0, 0, 0.5) 0 0 10px); filter: drop-shadow(rgba(0, 0, 0, 0.5) 0 0 10px); } .tr-default { -webkit-transition: all 0.2s ease-in-out 0s, outline-color 0.000001s linear 0s; transition: all 0.2s ease-in-out 0s, outline-color 0.000001s linear 0s; outline-color: black; } .tr-fast { -webkit-transition: all 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; transition: all 0.1s ease-in-out 0s, outline-color 0.000001s linear 0s; outline-color: black; } .tr-slow { -webkit-transition: all 0.4s ease-in-out 0s, outline-color 0.000001s linear 0s; transition: all 0.4s ease-in-out 0s, outline-color 0.000001s linear 0s; outline-color: black; } .f-default { font-family: "Helvetica Neue", Helvetica, Verdana, Arial, sans-serif; font-weight: normal; } .f-code { font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-weight: normal; } .f-open-sans-light { font-family: "Open Sans", sans-serif; font-weight: 300; } .f-open-sans-normal { font-family: "Open Sans", sans-serif; font-weight: 400; } .f-open-sans-semibold { font-family: "Open Sans", sans-serif; font-weight: 600; } .f-open-sans-bold { font-family: "Open Sans", sans-serif; font-weight: 700; } .f-lobster { font-family: "Lobster", cursive; font-weight: 400; } .f-lobster-two { font-family: "Lobster Two", cursive; font-weight: 400; } .m-b-smaller { margin-bottom: 0.75rem; } .m-t-smaller { margin-top: 0.75rem; } .m-l-smaller { margin-left: 0.75rem; } .m-r-smaller { margin-right: 0.75rem; } .m-s-smaller { margin-left: 0.75rem; margin-right: 0.75rem; } .p-smaller { padding: 0.75rem; } .p-b-smaller { padding-bottom: 0.75rem; } .p-t-smaller { padding-top: 0.75rem; } .p-l-smaller { padding-left: 0.75rem; } .p-r-smaller { padding-right: 0.75rem; } .p-s-smaller { padding-left: 0.75rem; padding-right: 0.75rem; } .m-b-small { margin-bottom: 1rem; } .m-t-small { margin-top: 1rem; } .m-l-small { margin-left: 1rem; } .m-r-small { margin-right: 1rem; } .m-s-small { margin-left: 1rem; margin-right: 1rem; } .p-small { padding: 1rem; } .p-b-small { padding-bottom: 1rem; } .p-t-small { padding-top: 1rem; } .p-l-small { padding-left: 1rem; } .p-r-small { padding-right: 1rem; } .p-s-small { padding-left: 1rem; padding-right: 1rem; } .m-b { margin-bottom: 1.25rem; } .m-t { margin-top: 1.25rem; } .m-l { margin-left: 1.25rem; } .m-r { margin-right: 1.25rem; } .m-s { margin-left: 1.25rem; margin-right: 1.25rem; } .p { padding: 1.25rem; } .p-b { padding-bottom: 1.25rem; } .p-t { padding-top: 1.25rem; } .p-l { padding-left: 1.25rem; } .p-r { padding-right: 1.25rem; } .p-s { padding-left: 1.25rem; padding-right: 1.25rem; } .m-b-medium { margin-bottom: 1.875rem; } .m-t-medium { margin-top: 1.875rem; } .m-l-medium { margin-left: 1.875rem; } .m-r-medium { margin-right: 1.875rem; } .m-s-medium { margin-left: 1.875rem; margin-right: 1.875rem; } .p-medium { padding: 1.875rem; } .p-b-medium { padding-bottom: 1.875rem; } .p-t-medium { padding-top: 1.875rem; } .p-l-medium { padding-left: 1.875rem; } .p-r-medium { padding-right: 1.875rem; } .p-s-medium { padding-left: 1.875rem; padding-right: 1.875rem; } .m-b-big { margin-bottom: 2.5rem; } .m-t-big { margin-top: 2.5rem; } .m-l-big { margin-left: 2.5rem; } .m-r-big { margin-right: 2.5rem; } .m-s-big { margin-left: 2.5rem; margin-right: 2.5rem; } .p-big { padding: 2.5rem; } .p-b-big { padding-bottom: 2.5rem; } .p-t-big { padding-top: 2.5rem; } .p-l-big { padding-left: 2.5rem; } .p-r-big { padding-right: 2.5rem; } .p-s-big { padding-left: 2.5rem; padding-right: 2.5rem; } .m-b-bigger { margin-bottom: 3.75rem; } .m-t-bigger { margin-top: 3.75rem; } .m-l-bigger { margin-left: 3.75rem; } .m-r-bigger { margin-right: 3.75rem; } .m-s-bigger { margin-left: 3.75rem; margin-right: 3.75rem; } .p-bigger { padding: 3.75rem; } .p-b-bigger { padding-bottom: 3.75rem; } .p-t-bigger { padding-top: 3.75rem; } .p-l-bigger { padding-left: 3.75rem; } .p-r-bigger { padding-right: 3.75rem; } .p-s-bigger { padding-left: 3.75rem; padding-right: 3.75rem; } .s-smaller { font-size: 0.6rem; } .s-smaller-rel { font-size: 0.6em; } .s-small { font-size: 0.8rem; } .s-small-rel { font-size: 0.8em; } .s-default { font-size: 1rem; } .s-default-rel { font-size: 1em; } .s-medium { font-size: 1.5rem; } .s-medium-rel { font-size: 1.5em; } .s-big { font-size: 2rem; } .s-big-rel { font-size: 2em; } .s-bigger { font-size: 3rem; } .s-bigger-rel { font-size: 3em; } .no-p-t { padding-top: 0 !important; } .no-p-r { padding-right: 0 !important; } .no-p-b { padding-bottom: 0 !important; } .no-p-l { padding-left: 0 !important; } .no-p-s { padding-left: 0 !important; padding-right: 0 !important; } .no-m-t { margin-top: 0 !important; } .no-m-r { margin-right: 0 !important; } .no-m-b { margin-bottom: 0 !important; } .no-m-l { margin-left: 0 !important; } .no-m-s { margin-left: 0 !important; margin-right: 0 !important; } .c-default { color: #f8f9fb; } .bkg-default { background-color: #f8f9fb; } .c-text { color: #293746; } .bkg-text { background-color: #293746; } .c-link { color: #ec0928; } .bkg-link { background-color: #ec0928; } .c-primary { color: #ec0928; } .bkg-primary { background-color: #ec0928; } .c-primary--dark { color: #d3031d; } .bkg-primary--dark { background-color: #d3031d; } .c-primary--light { color: #f7314c; } .bkg-primary--light { background-color: #f7314c; } .c-secondary { color: #293746; } .bkg-secondary { background-color: #293746; } .c-success { color: #2fd683; } .bkg-success { background-color: #2fd683; } .c-warning { color: #f7c80c; } .bkg-warning { background-color: #f7c80c; } .c-error { color: #d9534f; } .bkg-error { background-color: #d9534f; } .c-info { color: #2199e8; } .bkg-info { background-color: #2199e8; } .c-tuition { color: #e6dfcd; } .bkg-tuition { background-color: #e6dfcd; } .c-tuition--dark { color: #d5c9ab; } .bkg-tuition--dark { background-color: #d5c9ab; } .c-tuition--light { color: #f7f5ef; } .bkg-tuition--light { background-color: #f7f5ef; } .c-adult { color: #003087; } .bkg-adult { background-color: #003087; } .c-adult--ondark { color: #4e6cb0; } .bkg-adult--ondark { background-color: #4e6cb0; } .c-junior { color: #00a8e2; } .bkg-junior { background-color: #00a8e2; } .c-junior--dark { color: #0082af; } .bkg-junior--dark { background-color: #0082af; } .c-junior--light { color: #f5f7fa; } .bkg-junior--light { background-color: #f5f7fa; } .c-lightblue { color: #F8F9FB; } .bkg-lightblue { background-color: #F8F9FB; } .c-lightblue--dark { color: #ebedf1; } .bkg-lightblue--dark { background-color: #ebedf1; } .c-lightblue--light { color: #f9fbfe; } .bkg-lightblue--light { background-color: #f9fbfe; } .c-lightgrey { color: #F8F9FB; } .bkg-lightgrey { background-color: #F8F9FB; } .c-lightgrey--dark { color: #f5f7fa; } .bkg-lightgrey--dark { background-color: #f5f7fa; } .c-lightgrey--light { color: #fbfbfb; } .bkg-lightgrey--light { background-color: #fbfbfb; } .c-grey { color: #cad3db; } .bkg-grey { background-color: #cad3db; } .c-darkgrey { color: #4d5054; } .bkg-darkgrey { background-color: #4d5054; } .c-darkgrey--dark { color: #293746; } .bkg-darkgrey--dark { background-color: #293746; } .c-darkgrey--light { color: #65696e; } .bkg-darkgrey--light { background-color: #65696e; } .c-white { color: #ffffff; } .bkg-white { background-color: #ffffff; } .c-border { color: #ecf0f4; } .bkg-border { background-color: #ecf0f4; } .c-twitter { color: #55acee; } .bkg-twitter { background-color: #55acee; } .c-facebook { color: #3b5998; } .bkg-facebook { background-color: #3b5998; } .c-linkedin { color: #0976b4; } .bkg-linkedin { background-color: #0976b4; } .c-googleplus { color: #dd4b39; } .bkg-googleplus { background-color: #dd4b39; } .c-pinterest { color: #cc2127; } .bkg-pinterest { background-color: #cc2127; } .m-t-smaller { margin-top: 0.75rem; } @media screen and (max-width: 640px) { .m-t-smaller\@mobile { margin-top: 0.75rem; } } @media screen and (min-width: 641px) and (max-width: 1023px) { .m-t-smaller\@tablet { margin-top: 0.75rem; } } @media screen and (max-width: 1023px) { .m-t-smaller\@moblet { margin-top: 0.75rem; } } @media screen and (min-width: 1024px) { .m-t-smaller\@desktop { margin-top: 0.75rem; } } @media screen and (min-width: 1200px) { .m-t-smaller\@large-desktop { margin-top: 0.75rem; } } @media (max-height: 700px) { .m-t-smaller\@height-small { margin-top: 0.75rem; } } @media (max-height: 900px) { .m-t-smaller\@height-medium { margin-top: 0.75rem; } } @media (min-height: 901px) { .m-t-smaller\@height-big { margin-top: 0.75rem; } } .m-t-small { margin-top: 1rem; } @media screen and (max-width: 640px) { .m-t-small\@mobile { margin-top: 1rem; } } @media screen and (min-width: 641px) and (max-width: 1023px) { .m-t-small\@tablet { margin-top: 1rem; } } @media screen and (max-width: 1023px) { .m-t-small\@moblet { margin-top: 1rem; } } @media screen and (min-width: 1024px) { .m-t-small\@desktop { margin-top: 1rem; } } @media screen and (min-width: 1200px) { .m-t-small\@large-desktop { margin-top: 1rem; } } @media (max-height: 700px) { .m-t-small\@height-small { margin-top: 1rem; } } @media (max-height: 900px) { .m-t-small\@height-medium { margin-top: 1rem; } } @media (min-height: 901px) { .m-t-small\@height-big { margin-top: 1rem; } } .m-t { margin-top: 1.25rem; } @media screen and (max-width: 640px) { .m-t\@mobile { margin-top: 1.25rem; } } @media screen and (min-width: 641px) and (max-width: 1023px) { .m-t\@tablet { margin-top: 1.25rem; } } @media screen and (max-width: 1023px) { .m-t\@moblet { margin-top: 1.25rem; } } @media screen and (min-width: 1024px) { .m-t\@desktop { margin-top: 1.25rem; } } @media screen and (min-width: 1200px) { .m-t\@large-desktop { margin-top: 1.25rem; } } @media (max-height: 700px) { .m-t\@height-small { margin-top: 1.25rem; } } @media (max-height: 900px) { .m-t\@height-medium { margin-top: 1.25rem; } } @media (min-height: 901px) { .m-t\@height-big { margin-top: 1.25rem; } } .m-t-medium { margin-top: 1.875rem; } @media screen and (max-width: 640px) { .m-t-medium\@mobile { margin-top: 1.875rem; } } @media screen and (min-width: 641px) and (max-width: 1023px) { .m-t-medium\@tablet { margin-top: 1.875rem; } } @media screen and (max-width: 1023px) { .m-t-medium\@moblet { margin-top: 1.875rem; } } @media screen and (min-width: 1024px) { .m-t-medium\@desktop { margin-top: 1.875rem; } } @media screen and (min-width: 1200px) { .m-t-medium\@large-desktop { margin-top: 1.875rem; } } @media (max-height: 700px) { .m-t-medium\@height-small { margin-top: 1.875rem; } } @media (max-height: 900px) { .m-t-medium\@height-medium { margin-top: 1.875rem; } } @media (min-height: 901px) { .m-t-medium\@height-big { margin-top: 1.875rem; } } .p { padding: 1.25rem; } @media screen and (max-width: 640px) { .p\@mobile { padding: 1.25rem; } } @media screen and (min-width: 641px) and (max-width: 1023px) { .p\@tablet { padding: 1.25rem; } } @media screen and (max-width: 1023px) { .p\@moblet { padding: 1.25rem; } } @media screen and (min-width: 1024px) { .p\@desktop { padding: 1.25rem; } } @media screen and (min-width: 1200px) { .p\@large-desktop { padding: 1.25rem; } } @media (max-height: 700px) { .p\@height-small { padding: 1.25rem; } } @media (max-height: 900px) { .p\@height-medium { padding: 1.25rem; } } @media (min-height: 901px) { .p\@height-big { padding: 1.25rem; } } .p-small { padding: 1rem; } @media screen and (max-width: 640px) { .p-small\@mobile { padding: 1rem; } } @media screen and (min-width: 641px) and (max-width: 1023px) { .p-small\@tablet { padding: 1rem; } } @media screen and (max-width: 1023px) { .p-small\@moblet { padding: 1rem; } } @media screen and (min-width: 1024px) { .p-small\@desktop { padding: 1rem; } } @media screen and (min-width: 1200px) { .p-small\@large-desktop { padding: 1rem; } } @media (max-height: 700px) { .p-small\@height-small { padding: 1rem; } } @media (max-height: 900px) { .p-small\@height-medium { padding: 1rem; } } @media (min-height: 901px) { .p-small\@height-big { padding: 1rem; } } /** Typography trumps classes */ .two-cols[min-width~="600px"] { -webkit-column-count: 2; column-count: 2; -webkit-column-gap: 20px; column-gap: 20px; } @media screen and (max-width: 640px) { .two-cols { -webkit-column-count: 1 !important; column-count: 1 !important; } } /* VENDORS ---------------------------------------*/ /** Vendors packages */ .atvImg { border-radius: 5px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .atvImg img { box-shadow: 0 2px 8px rgba(14, 21, 47, 0.25); } .atvImg-container { position: relative; width: 100%; height: 100%; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .atvImg-container.over .atvImg-shadow { box-shadow: 0 45px 100px rgba(14, 21, 47, 0.4), 0 16px 40px rgba(14, 21, 47, 0.4); box-shadow: 0 45px 100px #e8ebf2, 0 16px 40px #d8dde8; } .atvImg-layers { position: relative; width: 100%; height: 100%; overflow: hidden; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .atvImg-rendered-layer { position: absolute; width: 104%; height: 104%; top: -2%; left: -2%; background-repeat: no-repeat; background-position: center; background-color: transparent; background-size: cover; -webkit-transition: all 0.1s ease-out; transition: all 0.1s ease-out; } .atvImg-shadow { position: absolute; top: 5%; left: 5%; bottom: 10%; right: 5%; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; box-shadow: 0 8px 30px #F8F9FB; } .atvImg-shine { pointer-events: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 5px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 60%); mix-blend-mode: overlay; } /** Hamburgers settings */ /*! Hamburgers @description Tasty CSS-animated hamburgers @author Jonathan Suh @jonsuh @site https://jonsuh.com/hamburgers @link https://github.com/jonsuh/hamburgers */ .hamburger { padding: 0 0; display: inline-block; cursor: pointer; -webkit-transition-property: opacity, -webkit-filter; transition-property: opacity, -webkit-filter; transition-property: opacity, filter; transition-property: opacity, filter, -webkit-filter; -webkit-transition-duration: 0.15s; transition-duration: 0.15s; -webkit-transition-timing-function: linear; transition-timing-function: linear; font: inherit; color: inherit; text-transform: none; background-color: transparent; border: 0; margin: 0; overflow: visible; } .hamburger:hover { opacity: 0.7; } .hamburger-box { width: 25px; height: 15px; display: inline-block; position: relative; } .hamburger-inner { display: block; top: 50%; margin-top: -1.5px; } .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width: 25px; height: 3px; background-color: #293746; border-radius: 2px; position: absolute; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-duration: 0.15s; transition-duration: 0.15s; -webkit-transition-timing-function: ease; transition-timing-function: ease; } .hamburger-inner::before, .hamburger-inner::after { content: ""; display: block; } .hamburger-inner::before { top: -6px; } .hamburger-inner::after { bottom: -6px; } /* Squeeze */ .hamburger--squeeze .hamburger-inner { -webkit-transition-duration: 0.1s; transition-duration: 0.1s; -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--squeeze .hamburger-inner::before { -webkit-transition: top 0.1s 0.14s ease, opacity 0.1s ease; transition: top 0.1s 0.14s ease, opacity 0.1s ease; } .hamburger--squeeze .hamburger-inner::after { -webkit-transition: bottom 0.1s 0.14s ease, -webkit-transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.1s 0.14s ease, -webkit-transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.1s 0.14s ease, transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.1s 0.14s ease, transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--squeeze.is-active .hamburger-inner { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition-delay: 0.14s; transition-delay: 0.14s; -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--squeeze.is-active .hamburger-inner::before { top: 0; opacity: 0; -webkit-transition: top 0.1s ease, opacity 0.1s 0.14s ease; transition: top 0.1s ease, opacity 0.1s 0.14s ease; } .hamburger--squeeze.is-active .hamburger-inner::after { bottom: 0; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transition: bottom 0.1s ease, -webkit-transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.1s ease, -webkit-transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.1s ease, transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.1s ease, transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1); } figure { display: block; width: 100%; } .section figure { width: auto; } .btn { text-transform: none; } .btn--outline { border: 1px solid rgba(248, 249, 251, 0.5); } .card { overflow: visible !important; } .card > figure { margin: 0; } alp-need-help .btn + .btn { margin-left: 0; } .topbar { font-size: 14px; height: 40px; } .testimonial-holder { -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; } svg { color: #425970; } svg.light { color: #ECF0F4; } .sidemenu { background: #293746; } .contact-card { min-height: 200px; } figure.banner__img:after { display: block; content: ' '; background: -webkit-gradient(linear, left bottom, left top, from(rgba(41, 55, 70, 0.2)), to(transparent)); background: linear-gradient(to top, rgba(41, 55, 70, 0.2), transparent); position: absolute; top: 0; bottom: 0; left: 0; right: 0; } #organization a { display: block; } #organization a[href^='mailto:'] { display: inline; } #mobile-phone { position: fixed; bottom: 0; width: 100%; z-index: 10; } #home-cta { margin: 32px auto; } p { word-break: break-word; } .tabs--new { -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; } .tabs--new a { border-top: 3px solid transparent; padding: 8px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; text-align: center; } .tabs--new a.active { border-color: #EC0929; background: white; } s-sticky { position: relative; z-index: 10; } .input, [is='s-label-push'] > span { height: 40px; line-height: 40px; } [is='s-label-push'] > span { padding: 0 8px; } s-sticky.s-sticky--sticked { margin-top: -32px; } .s-sticky--sticked [role='banner'] { padding: 0; } .s-sticky--sticked .header { padding: 0 !important; } .hamburger { margin-left: 16px; } .hamburger--squeeze { height: auto; } .s-select.input:not(input) { padding: 8px; height: 40px; } .flatpickr-months { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .flatpickr-month { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } table .th:before, table td:before { content: none !important; }