/*
* 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
***********************************************/

/***** Grid setup *****/
.grid                                           { margin:0 auto; max-width:1200px; width:100%; display:grid; gap:var(--spaceM); }

/***** Grid column overrides *****/
.grid--1                                        { grid-template-columns:repeat(1, 1fr); }
.grid--2                                        { grid-template-columns:repeat(2, 1fr); }
.grid--3                                        { grid-template-columns:repeat(3, 1fr); }
.grid--4                                        { grid-template-columns:repeat(4, 1fr); }
.grid--5                                        { grid-template-columns:repeat(5, 1fr); }
.grid--6                                        { grid-template-columns:repeat(6, 1fr); }
.grid--7                                        { grid-template-columns:repeat(7, 1fr); }
.grid--8                                        { grid-template-columns:repeat(8, 1fr); }
.grid--9                                        { grid-template-columns:repeat(9, 1fr); }
.grid--10                                       { grid-template-columns:repeat(10, 1fr); }
.grid--11                                       { grid-template-columns:repeat(11, 1fr); }
.grid--12                                       { grid-template-columns:repeat(12, 1fr); }

/***** Grid width 100% *****/
.grid--fluid                                    { margin:initial; max-width:100%; }

/***** Grid items setup *****/
.grid__item                                     { display:flex; gap:16px; flex-direction:column; align-items:flex-start; }

/***** Grid alignment *****/
.grid__item.txt--center                         { align-items:center; }
.grid__item--vcentered                          { justify-content:center; }

/***** Grid ordering *****/
.grid__item--alignStart                         { order:-1; }
.grid__item--alignEnd                           { order:2; }

/***** Grid overrides & offsettings *****/
.grid__item--1                                  { grid-column:span 1; }
.grid__item--2                                  { grid-column:span 2; }
.grid__item--3                                  { grid-column:span 3; }
.grid__item--4                                  { grid-column:span 4; }
.grid__item--5                                  { grid-column:span 5; }
.grid__item--6                                  { grid-column:span 6; }
.grid__item--7                                  { grid-column:span 7; }
.grid__item--8                                  { grid-column:span 8; }
.grid__item--9                                  { grid-column:span 9; }
.grid__item--10                                 { grid-column:span 10; }
.grid__item--11                                 { grid-column:span 11; }
.grid__item--12                                 { grid-column:span 12; }


/*********************************************** 
Mobile HD - This applies from 420px onwards
***********************************************/
@media (min-width: 420px)                       {
  .grid                                         { display:grid; grid-template-columns:repeat(12, 1fr); gap:var(--spaceM); }
}

/***********************************************
Tablet - This applies from 750px onwards
***********************************************/
@media (min-width:750px)                        {
  /***** Grid alignment *****/
  .grid__item.txt--right                        { align-items:flex-end; }

  /***** Grid overrides & offsettings *****/
  .grid__item--1.grid__item--start-1            { grid-column:2/span 1; }
  .grid__item--1.grid__item--start-2            { grid-column:3/span 1; }
  .grid__item--1.grid__item--start-3            { grid-column:4/span 1; }
  .grid__item--1.grid__item--start-4            { grid-column:5/span 1; }
  .grid__item--1.grid__item--start-5            { grid-column:6/span 1; }
  .grid__item--1.grid__item--start-6            { grid-column:7/span 1; }
  .grid__item--1.grid__item--start-7            { grid-column:8/span 1; }
  .grid__item--1.grid__item--start-8            { grid-column:9/span 1; }
  .grid__item--1.grid__item--start-9            { grid-column:10/span 1; }
  .grid__item--1.grid__item--start-10           { grid-column:11/span 1; }
  .grid__item--1.grid__item--start-11           { grid-column:12/span 1; }

  .grid__item--2.grid__item--start-1            { grid-column:2/span 2; }
  .grid__item--2.grid__item--start-2            { grid-column:3/span 2; }
  .grid__item--2.grid__item--start-3            { grid-column:4/span 2; }
  .grid__item--2.grid__item--start-4            { grid-column:5/span 2; }
  .grid__item--2.grid__item--start-5            { grid-column:6/span 2; }
  .grid__item--2.grid__item--start-6            { grid-column:7/span 2; }
  .grid__item--2.grid__item--start-7            { grid-column:8/span 2; }
  .grid__item--2.grid__item--start-8            { grid-column:9/span 2; }
  .grid__item--2.grid__item--start-9            { grid-column:10/span 2; }
  .grid__item--2.grid__item--start-10           { grid-column:11/span 2; }
  .grid__item--2.grid__item--start-11           { grid-column:12/span 2; }

  .grid__item--3.grid__item--start-1            { grid-column:2/span 3; }
  .grid__item--3.grid__item--start-2            { grid-column:3/span 3; }
  .grid__item--3.grid__item--start-3            { grid-column:4/span 3; }
  .grid__item--3.grid__item--start-4            { grid-column:5/span 3; }
  .grid__item--3.grid__item--start-5            { grid-column:6/span 3; }
  .grid__item--3.grid__item--start-6            { grid-column:7/span 3; }
  .grid__item--3.grid__item--start-7            { grid-column:8/span 3; }
  .grid__item--3.grid__item--start-8            { grid-column:9/span 3; }
  .grid__item--3.grid__item--start-9            { grid-column:10/span 3; }
  .grid__item--3.grid__item--start-10           { grid-column:11/span 3; }
  .grid__item--3.grid__item--start-11           { grid-column:12/span 3; }

  .grid__item--4.grid__item--start-1            { grid-column:2/span 4; }
  .grid__item--4.grid__item--start-2            { grid-column:3/span 4; }
  .grid__item--4.grid__item--start-3            { grid-column:4/span 4; }
  .grid__item--4.grid__item--start-4            { grid-column:5/span 4; }
  .grid__item--4.grid__item--start-5            { grid-column:6/span 4; }
  .grid__item--4.grid__item--start-6            { grid-column:7/span 4; }
  .grid__item--4.grid__item--start-7            { grid-column:8/span 4; }
  .grid__item--4.grid__item--start-8            { grid-column:9/span 4; }
  .grid__item--4.grid__item--start-9            { grid-column:10/span 4; }
  .grid__item--4.grid__item--start-10           { grid-column:11/span 4; }
  .grid__item--4.grid__item--start-11           { grid-column:12/span 4; }

  .grid__item--5.grid__item--start-1            { grid-column:2/span 5; }
  .grid__item--5.grid__item--start-2            { grid-column:3/span 5; }
  .grid__item--5.grid__item--start-3            { grid-column:4/span 5; }
  .grid__item--5.grid__item--start-4            { grid-column:5/span 5; }
  .grid__item--5.grid__item--start-5            { grid-column:6/span 5; }
  .grid__item--5.grid__item--start-6            { grid-column:7/span 5; }
  .grid__item--5.grid__item--start-7            { grid-column:8/span 5; }
  .grid__item--5.grid__item--start-8            { grid-column:9/span 5; }
  .grid__item--5.grid__item--start-9            { grid-column:10/span 5; }
  .grid__item--5.grid__item--start-10           { grid-column:11/span 5; }
  .grid__item--5.grid__item--start-11           { grid-column:12/span 5; }

  .grid__item--6.grid__item--start-1            { grid-column:2/span 6; }
  .grid__item--6.grid__item--start-2            { grid-column:3/span 6; }
  .grid__item--6.grid__item--start-3            { grid-column:4/span 6; }
  .grid__item--6.grid__item--start-4            { grid-column:5/span 6; }
  .grid__item--6.grid__item--start-5            { grid-column:6/span 6; }
  .grid__item--6.grid__item--start-6            { grid-column:7/span 6; }
  .grid__item--6.grid__item--start-7            { grid-column:8/span 6; }
  .grid__item--6.grid__item--start-8            { grid-column:9/span 6; }
  .grid__item--6.grid__item--start-9            { grid-column:10/span 6; }
  .grid__item--6.grid__item--start-10           { grid-column:11/span 6; }
  .grid__item--6.grid__item--start-11           { grid-column:12/span 6; }

  .grid__item--7.grid__item--start-1            { grid-column:2/span 7; }
  .grid__item--7.grid__item--start-2            { grid-column:3/span 7; }
  .grid__item--7.grid__item--start-3            { grid-column:4/span 7; }
  .grid__item--7.grid__item--start-4            { grid-column:5/span 7; }
  .grid__item--7.grid__item--start-5            { grid-column:6/span 7; }
  .grid__item--7.grid__item--start-6            { grid-column:7/span 7; }
  .grid__item--7.grid__item--start-7            { grid-column:8/span 7; }
  .grid__item--7.grid__item--start-8            { grid-column:9/span 7; }
  .grid__item--7.grid__item--start-9            { grid-column:10/span 7; }
  .grid__item--7.grid__item--start-10           { grid-column:11/span 7; }
  .grid__item--7.grid__item--start-11           { grid-column:12/span 7; }

  .grid__item--8.grid__item--start-1            { grid-column:2/span 8; }
  .grid__item--8.grid__item--start-2            { grid-column:3/span 8; }
  .grid__item--8.grid__item--start-3            { grid-column:4/span 8; }
  .grid__item--8.grid__item--start-4            { grid-column:5/span 8; }
  .grid__item--8.grid__item--start-5            { grid-column:6/span 8; }
  .grid__item--8.grid__item--start-6            { grid-column:7/span 8; }
  .grid__item--8.grid__item--start-7            { grid-column:8/span 8; }
  .grid__item--8.grid__item--start-8            { grid-column:9/span 8; }
  .grid__item--8.grid__item--start-9            { grid-column:10/span 8; }
  .grid__item--8.grid__item--start-10           { grid-column:11/span 8; }
  .grid__item--8.grid__item--start-11           { grid-column:12/span 8; }

  .grid__item--9.grid__item--start-1            { grid-column:2/span 9; }
  .grid__item--9.grid__item--start-2            { grid-column:3/span 9; }
  .grid__item--9.grid__item--start-3            { grid-column:4/span 9; }
  .grid__item--9.grid__item--start-4            { grid-column:5/span 9; }
  .grid__item--9.grid__item--start-5            { grid-column:6/span 9; }
  .grid__item--9.grid__item--start-6            { grid-column:7/span 9; }
  .grid__item--9.grid__item--start-7            { grid-column:8/span 9; }
  .grid__item--9.grid__item--start-8            { grid-column:9/span 9; }
  .grid__item--9.grid__item--start-9            { grid-column:10/span 9; }
  .grid__item--9.grid__item--start-10           { grid-column:11/span 9; }
  .grid__item--9.grid__item--start-11           { grid-column:12/span 9; }

  .grid__item--10.grid__item--start-1           { grid-column:2/span 10; }
  .grid__item--10.grid__item--start-2           { grid-column:3/span 10; }
  .grid__item--10.grid__item--start-3           { grid-column:4/span 10; }
  .grid__item--10.grid__item--start-4           { grid-column:5/span 10; }
  .grid__item--10.grid__item--start-5           { grid-column:6/span 10; }
  .grid__item--10.grid__item--start-6           { grid-column:7/span 10; }
  .grid__item--10.grid__item--start-7           { grid-column:8/span 10; }
  .grid__item--10.grid__item--start-8           { grid-column:9/span 10; }
  .grid__item--10.grid__item--start-9           { grid-column:10/span 10; }
  .grid__item--10.grid__item--start-10          { grid-column:11/span 10; }
  .grid__item--10.grid__item--start-11          { grid-column:12/span 10; }

  .grid__item--11.grid__item--start-1           { grid-column:2/span 11; }
  .grid__item--11.grid__item--start-2           { grid-column:3/span 11; }
  .grid__item--11.grid__item--start-3           { grid-column:4/span 11; }
  .grid__item--11.grid__item--start-4           { grid-column:5/span 11; }
  .grid__item--11.grid__item--start-5           { grid-column:6/span 11; }
  .grid__item--11.grid__item--start-6           { grid-column:7/span 11; }
  .grid__item--11.grid__item--start-7           { grid-column:8/span 11; }
  .grid__item--11.grid__item--start-8           { grid-column:9/span 11; }
  .grid__item--11.grid__item--start-9           { grid-column:10/span 11; }
  .grid__item--11.grid__item--start-10          { grid-column:11/span 11; }
  .grid__item--11.grid__item--start-11          { grid-column:12/span 11; }
}

/***********************************************
Tablet ONLY - This applies from 750px to 992px
***********************************************/
@media only screen and (min-width:750px) and (max-width:1000px) {
  .grid--1-tablet                               { grid-template-columns:repeat(1, 1fr); }
  .grid--2-tablet                               { grid-template-columns:repeat(2, 1fr); }
  .grid--3-tablet                               { grid-template-columns:repeat(3, 1fr); }
  .grid--4-tablet                               { grid-template-columns:repeat(4, 1fr); }
  .grid--5-tablet                               { grid-template-columns:repeat(5, 1fr); }
  .grid--6-tablet                               { grid-template-columns:repeat(6, 1fr); }
  .grid--7-tablet                               { grid-template-columns:repeat(7, 1fr); }
  .grid--8-tablet                               { grid-template-columns:repeat(8, 1fr); }
  .grid--9-tablet                               { grid-template-columns:repeat(9, 1fr); }
  .grid--10-tablet                              { grid-template-columns:repeat(10, 1fr); }
  .grid--11-tablet                              { grid-template-columns:repeat(11, 1fr); }
  
  .grid__item--6-tablet                         { grid-column:span 6; }
  .grid__item--12-tablet                        { grid-column:span 12; }
}

/***********************************************
Mobile ONLY - This applies from 0px to 749px
***********************************************/
@media only screen and (max-width:749px) {
  .grid__item                                   { grid-column:span 12; }
  .grid__item--6-mobile                         { grid-column:span 6; }
  .grid__item--alignStartMobile                 { order:-1; }
  .grid__item--alignEndMobile                   { order:2; }
}