/*
* Amazium (http://www.amazium.co.uk)
* Copyright 2010 - 2019, Mike Ballan
* Licensed under MIT (https://github.com/OwlyStuff/Amazium/blob/master/LICENSE)
*/

/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Font-face setup
- Fonts overrides
- Navigation
- Color examples setup
- Media Queries
*/

/***********************************************
Mobile First - This applies from 0px to 749px
***********************************************/

/***** Resets *****/
html                                            { overflow:-moz-scrollbars-vertical; overflow-y:scroll; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; font-size:62.5%; }
body                                            { margin:0; padding:0; letter-spacing:1.2px; line-height:2.2rem; font-size:1.5rem; font-weight:normal; font-family:sans-serif; background-color:#F8F9FD; }
*, *:before, *:after                            { margin:0; padding:0; border:none; box-sizing:inherit; }

/***** Typography *****/
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6                    { padding:0; font-weight:bold; line-height:initial; display:inline-flex; gap:8px; align-items:center; position:relative; }

h1, .h1                                         { font-size:3.5rem; }
h2, .h2                                         { font-size:3rem; }
h3, .h3                                         { font-size:2.5rem; }
h4, .h4                                         { font-size:2rem; }
h5, .h5                                         { font-size:1.4rem; }
h6, .h6                                         { font-size:1.4rem; font-weight:normal; }

small, .txt--small                              { font-size:1.2rem; }
sup, sub                                        { height:0; line-height:0; vertical-align:baseline; position:relative; font-size:80%; }
sup                                             { top:-5px; }
sub                                             { bottom:-5px; }

*+pre                                           { margin-top:20px; }
pre                                             { padding:0; display:table; table-layout:fixed; width:100%; }
pre code                                        { padding:20px; overflow:auto; width:100%; }
code                                            { margin:0; padding:0 3px; font-family:'Consolas', Courier, monospace; font-size:1.1rem; text-align:left; text-transform:initial; font-weight:initial; color:var(--color-haze); display:inline-block; vertical-align:middle; background-color:var(--color-black); border:1px solid var(--color-mist); border-radius:var(--radius); overflow:hidden; white-space:pre; }

abbr[title],
abbr[data-original-title]                       { border-bottom:1px dotted var(--color-gray300); cursor:help; }

address                                         { margin:26px 0; padding:0; display:block; font-style:normal; line-height:20px; }

hr                                              { padding:0; border:0; border-top:1px solid var(--color-mist); height:1px; width:100%; display:block; }

/***** Lists *****/
ul, ol, dl                                      { margin-left:20px; display:block; }
ul ul, ul ol, ol ol, ol ul                      { margin-top:1em; }
ol                                              { padding-left:10px; }
li                                              { padding:0; }

ul.square, ul.square ul, ul.circle ul.square    { list-style:square; }
ul.circle, ul.circle ul, ul.square ul.circle    { list-style:circle; }
ul.disc, ul.disc ul                             { list-style:disc; }
ul.square li, ul.circle li, ul.disc li          { margin:0 0 5px 0; padding:0; line-height:18px; background:none; }

dl                                              { margin-left:0; padding:0; }
dt                                              { font-weight:bold; }
dd                                              { margin-top:6px; }

.dl-inline dt                                   { margin-top:0; padding:0 10px 16px 0; float:left; width:30%; clear:left; }
.dl-inline dd                                   { margin-top:0; margin-left:30%; padding-bottom:16px; }
.dl-inline dd:last-child                        { padding:0; }

/***** Blockquotes *****/
figure                                          { padding:10px 0 10px 20px; border-left:2px solid var(--color-gray800); position:relative; top:0; left:0; }

blockquote                                      { margin:0; padding:0; }
blockquote p                                    { font-style:italic; }
blockquote a                                    { display:inline-block; }

figcaption                                      { padding:0; font-size:1.4re,; }
figcaption:before                               { content:'\2014'; display:block; }
figcaption>span                                 { margin:0; padding:0 5px; display:inline-block; background-color:var(--color-gray800); color:var(--color-snow); border-radius:var(--radius); }


/***** Links *****/
a                                               { color:inherit; text-decoration:underline; outline:0;
  transition:
    color 0.33s cubic-bezier(0.33, 0, 0.2, 1) 0s,
    fill 0.33s cubic-bezier(0.33, 0, 0.2, 1) 0s,
    background 0.33s cubic-bezier(0.33, 0, 0.2, 1) 0s
  ;
  -moz-transition:
    color 0.33s cubic-bezier(0.33, 0, 0.2, 1) 0s,
    fill 0.33s cubic-bezier(0.33, 0, 0.2, 1) 0s,
    background 0.33s cubic-bezier(0.33, 0, 0.2, 1) 0s
  ;
  -webkit-transition:
    color 0.33s cubic-bezier(0.33, 0, 0.2, 1) 0s,
    fill 0.33s cubic-bezier(0.33, 0, 0.2, 1) 0s,
    background 0.33s cubic-bezier(0.33, 0, 0.2, 1) 0s
  ;
  -o-transition:
    color 0.33s cubic-bezier(0.33, 0, 0.2, 1) 0s,
    fill 0.33s cubic-bezier(0.33, 0, 0.2, 1) 0s,
    background 0.33s cubic-bezier(0.33, 0, 0.2, 1) 0s
  ;
}
a:focus                                         { outline:none; -moz-outline-style:none; }
.overall                                        { width:100%; height:100%; position:absolute; top:0; left:0; z-index:10; cursor:pointer; }

/***** Images, iFrames & Videos *****/
img                                             { border:0; vertical-align:middle; border:none; -ms-interpolation-mode:bicubic; }
.img--left,
.img--right,
.img--max                                       { margin-bottom:16px; max-width:100%; display:block; }

.img--left                                      { margin-right:30px; float:left; }
.img--right                                     { margin-left:30px; float:right; }
.img--max                                       { width:100%; height:auto; }

.media                                          { padding-bottom:53%; padding-top:25px; width:100%; background-color:var(--color-mist); height:0; position:relative; overflow:hidden; }
.media iframe, .media object, .media embed      { width:100%; height:100%; position:absolute; top:0; left:0; }

/***** Aspect Ratio *****/
.aspect                                         { position:relative; }
.aspect:before                                  { display:block; content:''; width:100%; }
.aspect__content                                { position:absolute; top:0; left:0; right:0; bottom:0; overflow:hidden; }

.aspect--1-1:before                             { padding-top:calc(1 / 1 * 100%); }
.aspect--4-3:before                             { padding-top:calc(3 / 4 * 100%); }
.aspect--5-4:before                             { padding-top:calc(4 / 5 * 100%); }
.aspect--16-9:before                            { padding-top:calc(9 / 16 * 100%); }
.aspect--16-10:before                           { padding-top:calc(10 / 16 * 100%); }

/***** Icons setup *****/
.icon                                           { height:16px; width:16px; display:inline-block; flex-shrink:0; fill:currentColor; vertical-align:middle; position:relative; }

/***** Icons location *****/
.icon--onLeft                                   { margin-right:8px; }
.icon--onRight                                  { margin-left:8px; }

.icon--alignRight                               { margin-left:auto; }

/***** Icons sizes *****/
.icon--xxl                                      { height:64px; width:64px; }
.icon--xl                                       { height:36px; width:36px; }
.icon--l                                        { height:28px; width:28px; }
.icon--m                                        { height:16px; width:16px; }
.icon--s                                        { height:12px; width:12px; }

.icon--xl.icon--onLeft                          { margin-right:12px; }

/***** Icons colors *****/
.icon--colorPositive                            { color:var(--color-positive500); }
.icon--colorInfo                                { color:var(--color-info500); }
.icon--colorNegative                            { color:var(--color-negative500); }
.icon--colorWarning                             { color:var(--color-warning500); }
.icon--colorSnow                                { color:var(--color-snow); }

/***** Pills *****/
.pill                                           { padding:4px 12px; min-height:20px; display:inline-flex; min-height:26px; align-self:flex-start; line-height:initial; align-items:center; justify-content:center; gap:8px; font-size:1.2rem; font-weight:bold; background-color:var(--color-mist); fill:currentColor; color:var(--color-gray500); border:1px solid var(--color-gray500); border-radius:20px; vertical-align:middle; transition:background 0.33s cubic-bezier(0.33, 0, 0.2, 1) 0s; }
.pill+.pill,
.pill--onRight                                  { margin-left:6px; }

.pill--s                                        { padding:4px 8px; font-size:.9rem; min-height:12px; }
.pill--s .icon                                  { width:10px; height:10px; }
.pill--l                                        { padding:4px 16px; font-size:1.4rem; min-height:40px; }

.pill--defaultSolid                             { background-color:var(--color-gray500); color:var(--color-snow); border-color:var(--color-gray500); }

.pill--info                                     { background-color:var(--color-info100); color:var(--color-info500); border-color:var(--color-info500); }
.pill--infoSolid                                { background-color:var(--color-info500); color:var(--color-snow); border-color:var(--color-info500); }

.pill--negative                                 { background-color:var(--color-negative100); color:var(--color-negative500); border-color:var(--color-negative500); }
.pill--negativeSolid                            { background-color:var(--color-negative500); color:var(--color-snow); border-color:var(--color-negative500); }

.pill--positive                                 { background-color:var(--color-positive100); color:var(--color-positive500); border-color:var(--color-positive500); }
.pill--positiveSolid                            { background-color:var(--color-positive500); color:var(--color-snow); border-color:var(--color-positive500); }

.pill--warning                                  { background-color:var(--color-warning100); color:var(--color-warning500); border-color:var(--color-warning500); }
.pill--warningSolid                             { background-color:var(--color-warning500); color:var(--color-snow); border-color:var(--color-warning500); }

.pill--snow                                     { background-color:transparent; color:var(--color-snow); border-color:var(--color-snow); }
.pill--snowSolid                                { background-color:var(--color-snow); border-color:var(--color-snow); }

.pill--ghost                                    { background-color:transparent; border-color:var(--color-mist); }

/***** Message Blocks *****/
.message                                        { padding:20px; display:flex; flex-direction:row; gap:8px; flex-grow:1; box-shadow:0px 0px 1px 1px var(--color-mist) inset; background-color:var(--color-haze); border-radius:var(--radius); width:100%; position:relative; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
.message .icon                                  { top:2px; }

.message--positive                              { box-shadow:0px 0px 1px 1px var(--color-positive500) inset; background-color:var(--color-positive100); }
.message--positive strong,
.message--positive .icon                        { color:var(--color-positive500); }

.message--info                                  { box-shadow:0px 0px 1px 1px var(--color-info500) inset; background-color:var(--color-info100); }
.message--info strong,
.message--info .icon                            { color:var(--color-info500); }

.message--warning                               { box-shadow:0px 0px 1px 1px var(--color-warning500) inset; background-color:var(--color-warning100); }
.message--warning strong,
.message--warning .icon                         { color:var(--color-warning500); }

.message--negative                              { box-shadow:0px 0px 1px 1px var(--color-negative500) inset; background-color:var(--color-negative100); }
.message--negative strong,
.message--negative .icon                        { color:var(--color-negative500); }


/***********************************************
Utility Classes
***********************************************/

/***** Text truncate *****/
.txt--truncate                                  { white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.txt--noWrap                                    { white-space:nowrap; }

/***** Border radius *****/
.rounded                                        { border-radius:50%; }
.radius                                         { border-radius:var(--radius); }

/***** Resets *****/
.reset--padding                                 { padding:0; }
.reset--margin                                  { margin:0; }
.reset--indent                                  { margin-left:0; padding-left:0; }
.reset--bullet                                  { list-style:none; list-style-image:none; }
.reset--styling                                 { margin:0; padding:0; list-style:none; }

/***** Display *****/
.inline                                         { display:inline; }
.block, .show                                   { display:block; }
.hidden, .hide                                  { display:none; }

/***** Visibility *****/
.invisible                                      { display:none; visibility:hidden; }
.visible                                        { display:block; visibility:visible; }

/***** Show & Hide *****/
.showMobile                                     { display:inherit !important; }
.showTablet                                     { display:none !important; }
.showScreen                                     { display:none !important; }

.hideMobile                                     { display:none !important; }
.hideTablet                                     { display:inherit !important; }
.hideScreen                                     { display:inherit !important; }


/***********************************************
Tablet - This applies from 750px onwards
***********************************************/
@media (min-width:750px)                        {
  /***** Show & Hide *****/
  .showMobile                                   { display:none !important; }
  .showTablet                                   { display:inherit !important; }
  .showScreen                                   { display:none !important; }

  .hideMobile                                   { display:inherit !important; }
  .hideTablet                                   { display:none !important; }
  .hideScreen                                   { display:inherit !important; }

  /***** Text alignment *****/
  .txt--left                                    { text-align:left; justify-content:flex-start; align-items:flex-start; }
  .txt--right                                   { text-align:right; justify-content:flex-end; align-items:flex-end; }
  .txt--center                                  { text-align:center; justify-content:center; align-items:center; }
  .txt--justify                                 { text-align:justify; justify-content:center; align-items:center; }
}

/***********************************************
Desktop - This applies from 1000px onwards
***********************************************/
@media (min-width:1000px) {
  /***** Show & Hide *****/
  .showMobile                                   { display:none !important; }
  .showTablet                                   { display:none !important; }
  .showScreen                                   { display:inherit !important; }

  .hideMobile                                   { display:inherit !important; }
  .hideTablet                                   { display:inherit !important; }
  .hideScreen                                   { display:none !important; }
}