/*
* 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
––––––––––––––––––––––––––––––––––––––––––––––––––
- List
- list - Simple
- list - Range
- list - 2 columns
- list - Gallery
- list - Hover / Boxed
*/

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

/***** List *****/
.list                                             { margin:0; padding:0; list-style:none; width:100%; }
*+.list                                           { margin-top:20px; }
.list+*                                           { margin-top:20px; }
.list li                                          { display:flex; flex-direction:column; gap:20px; position:relative; }

.list--simple                                     { display:flex; gap:20px; flex-direction:column; }
.section--black .list--simple                     { gap:6px; }

.list--cols                                       { margin-right:0; margin-left:0; grid-gap:0; max-width:100%; display:grid; align-items:initial; }
.list--cols > li                                  { padding:20px 0; gap:20px; border-bottom:1px solid var(--color-cream500); }
.list--cols span                                  { display:flex; gap:20px; width:100%; align-items:center; }
.list--cols span h4                               { align-items:flex-start; gap:4px; }
.list--cols span h4 small                         { font-size:1.8rem; font-weight:bold; color:var(--color-gray500); font-family:inherit; max-width:900px; }

.section--creamDark .list--cols li                { border-bottom:1px solid var(--color-creamLite); border-right:1px solid var(--color-creamLite); }

.list--colsAll                                    { display:flex; }
.list--colsAll li                                 { flex:1; justify-content: flex-start; border-bottom:none; }
.list--colsAll li:last-child                      { border-right:none; }
.list--colsAll .img--120px                        { width:80px; }

.list--timeline                                   { display:flex; gap:50px; max-width:800px; flex-direction:column; counter-reset:timeline; position:relative; }
.list--timeline li:before                         { content:''; width:1px; height:calc(100% + 150px); background-color:var(--color-creamDark); position:absolute; top:0; left:50%; }
.list--timeline li:after                          { content:counter(timeline); font-weight:bold; font-family:abrilfatface; counter-increment:timeline; display:flex; align-items:center; justify-content:center; width:39px; height:39px; border-radius:39px; background-color:var(--color-creamDark); position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }
.list--timeline li                                { min-height:300px; align-items:flex-start; text-align:left; justify-content:center; }

.list--timeline li:first-child                    { justify-content:flex-start; }
.list--timeline li:first-child:after              { top:0; transform:translate(-50%, 0) }

.list--timeline li:last-child:before              { top:0; height:50%; }

.list--timeline li:nth-child(odd)                 { padding-left:calc(50% + 40px); }
.list--timeline li:nth-child(odd) .img--timeline  { width:300px; height:auto; position:absolute; right:calc(50% + 40px); }

.list--timeline li:nth-child(even)                { padding-right:calc(50% + 40px); }
.list--timeline li:nth-child(even) .img--timeline { width:300px; height:auto; position:absolute; left:calc(50% + 40px); }

.list--gallery                                    { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:20px; }
.list--gallery img                                { border-radius:var(--radius); }


.list--range                                    { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:30px; }
.list--range img                                { border-radius:var(--radius); }
.list--range li                                 { gap:6px; }
.list--range li p                               { display:flex; font-size:13px; min-width:100%; text-align:left; font-weight:bold; }
.list--range li .price                          { margin-left:auto; font-weight:normal; }
.list--range li.soldout                         { opacity:.3; filter:grayscale(1); }

.list--opening                                  { display:flex; flex-direction:column; align-items:flex-start; gap:10px; max-width:600px; }
.list--opening li                               { display:flex; flex-direction:row; justify-content:space-between; width:100%; background-color:var(--color-cream100); border-radius:10px; }
.list--opening li span                          { padding:10px; display:inline-block; }
.list--opening li strong                        { padding:10px; border-radius:10px 0 0 10px; min-width:200px; color:var(--color-snow); }
.list--opening li:first-child strong            { background-color:#FD605D; }
.list--opening li:nth-child(2) strong           { background-color:#FB9F00; }
.list--opening li:nth-child(3) strong           { background-color:#EFCF0F; }
.list--opening li:nth-child(4) strong           { background-color:#ADE45E; }
.list--opening li:nth-child(5) strong           { background-color:#64C8E5; }
.list--opening li:nth-child(6) strong           { background-color:#FD89ED; }
.list--opening li:nth-child(7) strong           { background-color:#CB27AB; }

/***********************************************
Tablet - This applies from 750px onwards
***********************************************/
@media (min-width:750px)                        {
	.list--cols > li                                  { padding:20px; border-right:1px solid var(--color-cream500); }

	.list--cols2                                      { grid-template-columns:repeat(2, 1fr); }
	.list--cols2 li:nth-child(2n+2)                   { border-right-color:transparent; }
	.list--cols2 li:first-child:nth-last-child(2),
	.list--cols2 li:first-child:nth-last-child(2) ~ li,
	.list--cols2 li:nth-child(2n):nth-last-child(-n+3) ~ li  { border-bottom-color:transparent; }

	.list--cols3                                      { grid-template-columns:repeat(3, 1fr); }
	.list--cols3 li:nth-child(3n+3)                   { border-right-color:transparent; }
	.list--cols3 li:first-child:nth-last-child(3),
	.list--cols3 li:first-child:nth-last-child(3) ~ li,
	.list--cols3 li:nth-child(3n):nth-last-child(-n+4) ~ li  { border-bottom-color:transparent; }

	.list--cols4                                      { grid-template-columns:repeat(4, 1fr); }
	.list--cols4 li:nth-child(4n+4)                   { border-right-color:transparent; }
	.list--cols4 li:first-child:nth-last-child(4),
	.list--cols4 li:first-child:nth-last-child(4) ~ li,
	.list--cols4 li:nth-child(4n):nth-last-child(-n+5) ~ li  { border-bottom-color:transparent; }

	.list--cols5                                      { grid-template-columns:repeat(5, 1fr); }
	.list--cols5 li:nth-child(5n+5)                   { border-right-color:transparent; }
	.list--cols5 li:first-child:nth-last-child(5),
	.list--cols5 li:first-child:nth-last-child(5) ~ li,
	.list--cols5 li:nth-child(5n):nth-last-child(-n+6) ~ li  { border-bottom-color:transparent; }
	
	.list.txt--center li                              { align-items:center; }
}

/***********************************************
Mobile ONLY - This applies from 0px to 749px
***********************************************/
@media only screen and (max-width:749px)        {
	.list--cols4Mobile                          { grid-template-columns:repeat(2, 1fr); }
	.list--cols4Mobile li                   	{ padding:20px; border-right:1px solid var(--color-cream500); }
	.list--cols4Mobile li:nth-child(2n+2)       { border-right-color:transparent; }
	.list--cols4Mobile li:first-child:nth-last-child(2),
	.list--cols4Mobile li:first-child:nth-last-child(2) ~ li,
	.list--cols4Mobile li:nth-child(2n):nth-last-child(-n+3) ~ li  { border-bottom-color:transparent; }
}