.grid_container
{
	position:absolute;
	z-index:100;
	width:100%;
	height:calc(100% - 4em);
	overflow-x:hidden;
	overflow-y:auto;
	padding:0;
		
	mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
  	-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
  	  	
  	will-change: transform;
  	
  	scroll-behavior:smooth;
  	
  	/* Hiding scrollbar */
  	-ms-overflow-style: none;
}

.grid_container::-webkit-scrollbar 
{ 
    display: none; 
}

.grid_container .logo
{
	margin-top:2em;
	margin-bottom:1em;
	width:100%;
	text-align:center;
}

.grid_container .logo img
{
	width:5em;
	height:auto;
}

.grid 
{
	margin:auto;
  	max-width:calc(100% - 4rem);  	
  	margin-top:3rem;
  	margin-bottom:3rem;
  	margin-left:2rem;
  	margin-right:2rem;
}

.grid-item 
{
  	float: left;    
  	perspective:10px;
   	
 	/* Animation init values */
	opacity:1;
	
	/* Responsiveness dependency */
  	width: 7em; /* Will be changed dynamically in code */
  	height: 7em; /* Will be changed dynamically in code */
	margin-bottom:1rem;
}

.grid-item:nth-child(1) .gridBox
{
	animation-delay:0.1s;
}

.grid-item:nth-child(2) .gridBox
{
	animation-delay:0.2s;
}

.grid-item:nth-child(3) .gridBox
{
	animation-delay:0.3s;
}

.grid-item:nth-child(4) .gridBox
{
	animation-delay:0.4s;
}

.grid-item:nth-child(5) .gridBox
{
	animation-delay:0.5s;
}

.grid-item:nth-child(6) .gridBox
{
	animation-delay:0.6s;
}

.grid-item:nth-child(7) .gridBox
{
	animation-delay:0.7s;
}

.grid-item:nth-child(8) .gridBox
{
	animation-delay:0.8s;
}

.grid-item:nth-child(9) .gridBox
{
	animation-delay:0.9s;
}

.grid-item:nth-child(10) .gridBox
{
	animation-delay:1.0s;
}

.grid-item:nth-child(11) .gridBox
{
	animation-delay:1.1s;
}

.grid-item:nth-child(12) .gridBox
{
	animation-delay:1.2s;
}

.grid-item:nth-child(13) .gridBox 
{
	animation-delay:1.3s;
}

.grid-item:nth-child(1) .article
{
	animation-delay:0.1s;
}

.grid-item:nth-child(2) .article
{
	animation-delay:0.2s;
}

.grid-item:nth-child(3) .article
{
	animation-delay:0.3s;
}

.grid-item:nth-child(4) .article
{
	animation-delay:0.4s;
}

.grid-item:nth-child(5) .article
{
	animation-delay:0.5s;
}

.grid-item:nth-child(6) .article
{
	animation-delay:0.6s;
}

.grid-item:nth-child(7) .article
{
	animation-delay:0.7s;
}

.grid-item:nth-child(8) .article
{
	animation-delay:0.8s;
}

.grid-item:nth-child(9) .article
{
	animation-delay:0.9s;
}

.grid-item:nth-child(10) .article
{
	animation-delay:1.0s;
}

.grid-item:nth-child(11) .article
{
	animation-delay:1.1s;
}

.grid-item:nth-child(12) .article
{
	animation-delay:1.2s;
}

.grid-item:nth-child(13) .article 
{
	animation-delay:1.3s;
}

.grid-item.tall 
{ 
	height:10em;
}

.grid-item.large
{
	width:calc(20em + 20px);
}

.grid-item.article
{
	height:auto;
	margin:0;
	box-shadow:none;
}

.grid-item.article h1
{
	background:none;
}

.gridBox 
{
	position:relative;
	cursor: pointer;
	overflow:hidden;
	transition: border-color 0.2s ease-in-out, background 0.4s ease-in-out;
	will-change: transform;
	
	/* Variables */
	box-shadow: 0em 0.05em 0.05em rgba(10,10,10,0.4);
	background:url('../../images/includes/grain60p.png') var(--color-grey);
	border-radius:0.2em;
		
	/* Responsiveness dependency */
	height: 100%;
	width: 100%;
}

.gridBox::before 
{
	content: '';
	
	z-index: 1;
	position: absolute;
	
	height: 100%;
	width: 100%;
	
	transition: background 0.2s ease-in-out, box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out, border-color 0.2s ease-in-out;
	
	/* Variables */
	
}

.gridBox:hover
{
}

.gridBox:hover::before 
{
	/* Variables */
	background: var(--color-light-bg-translucent);
	
}

.gridBox:hover > .gridContent .icon 
{
	/* Variables */
	transform: translateY(-0.7em) translateZ(0);
	background-color: var(--color-highlight);
}

.gridBox:hover > .gridContent .icon .caption
{
	/* Variables */
	color: var(--color-hover);
}

.gridBox:hover > .gridContent .icon::before 
{
	animation: none;
	
	/* Variables */
	background-color: var(--color-dark-bg-translucent);
	color: var(--color-hover);
}

.gridBox:hover > .gridContent .icon .caption::before
{
	/* Variables */
	transform: rotateZ(180deg);
	background-color:var(--color-hover);
}

.gridBox:hover > .imageWrapper img 
{
}


.gridBox:hover::after 
{
	width:100%;
	
	/* Responsiveness dependency */
	border-left-width: 1em;
}

.grid-item .gridBox
{
	animation: fadeIn_grid-item 0.4s 1 ease-in-out forwards;
	opacity:0;
}

.grid-item .article
{
	animation: fadeIn_grid-item 0.4s 1 ease-in-out forwards;
	opacity:0;
}

.gridContent .icon
{
	right:auto;
	left:0.5em;
	
	animation-delay:0.2s;
}

.gridBox:active
{	
}

.gridBox:active::after
{
	/* Variables */
	background-color: var(--color-hover);
}

.gridBox:active > .icon:before
{
	/* Variables */
	color: var(--color-highlight);
}

.gridBox:active > .imageWrapper img
{
	transition:transform 0.2s ease-in-out;
	transform: scale(1.1);
}

.gridBox::after {
	content: '';
	
	z-index: 1;
	position: absolute;
	width: 0;
	bottom: 0px;
	left: 0px;
	transition: width 0.1s ease-in-out, border-width 0.1s ease-in-out, background 0.2s ease-in-out;
	border-left-style: solid;
	border-left-width: 0em;
	
	/* Variables */
	background: var(--color-highlight);
	border-left-color: var(--color-dark-bg-translucent);
	
	/* Responsiveness dependency */
	height: 0.2em;
}


.imageWrapper 
{
	position:absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 60%;
	overflow: hidden;
}

.imageWrapper img 
{
	z-index: 0;
	width: 100%;
	height:100%;
	object-fit:cover;
	image-position: center center;
	transition:transform 0.4s ease-in-out;
}

.gridContent
{
	position:absolute;
	bottom:0;
	height:40%;
	width:100%;
	
	overflow:visible;
}

.gridContentInner
{
	overflow:hidden;
		
	height:100%;
	width:100%;
	mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 90%);
  	-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 90%);
  	
  	/* Responsiveness dependency */
  	padding-left:0.5em;
  	padding-right:0.5em;
	padding-top:0.3em;
	padding-bottom:0.3em;
}

.gridTitle
{
	margin:0;
	padding:0;
	font-size:var(--size-normal);
	color:var(--color-hover);
	line-height:1;
	
	/* Responsiveness dependency */
	margin-left:3rem;
	margin-bottom:0.5em;
}

.gridDate
{
	margin:0;
	padding:0;
	font-size:var(--size-smaller);
	color:var(--color-dimmer);
	line-height:1;
	font-weight:var(--weight-bold);
	
	transition:color 0.2s ease-in-out;
	
	/* Responsiveness dependency */
	margin-left:3rem;
}



.gridDescription
{
	margin:0;
	padding:0;
	font-size:var(--size-smaller);
	color:var(--color-dim);
	line-height:1;
	font-weight:var(--weight-normal);
	
	transition:color 0.2s ease-in-out;
}

.grid-item.selected .gridBox
{
	background:url('../../images/includes/grain60p.png') var(--color-highlight);
}


.grid-item.selected .gridBox::after
{
	background: var(--color-light-bg-transparent);
	border-left-width: 0em;
	width:100%;
	transition: width 10s linear, border-width 0.1s ease-in-out, background 0.2s ease-in-out;
}

.grid-item.selected .gridDate
{
	color:var(--color-normal);
}

.grid-item.selected .gridDescription
{
	color:var(--color-normal);
}

.gridReference
{
	display:none;
}