body { }
main.main { }

div.home-hero {
	/* outline: 1px solid red; */
	aspect-ratio: 2/1;
	background-repeat: no-repeat; background-size: cover; background-position: center center;
	margin: 0 -24px 0 -24px;
	transform: translate(0, -48px);

	opacity: 0;
	animation-name: anim_homehero;
	animation-duration: 1800ms;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}

@keyframes anim_homehero {
	from { opacity: 0; transform: translate(0,0px) scale(0.85,0.85); }
	to { opacity: 1; transform: translate(0,-48px) scale(1,1); }
}


.home-grid {
	display: grid; grid-gap: 48px;
	grid-template-columns: repeat(1, 1fr);
	grid-template-rows: repeat(1, 1fr);
	/* grid-auto-flow: dense; */
	list-style: none; line-height: 0;

	& > li {
		position: relative; overflow: hidden;
		--cols: 1;
		--rows: 1;
		background-color: #fff; line-height: 0;
		/* outline: 1px dashed #0003; */

		opacity: 0;
		/* animation-name: anim_fromLeft-32; */
		animation-duration: 500ms;
		animation-timing-function: ease;
		animation-fill-mode: forwards;


		& > div {
			display: block;

			& figure {

				& > img {
					position: absolute; top: 0; right: 0; bottom: 0; left: 0;
					width: 100%; height: 100%; object-fit: cover;
					transition: all .3s;
				}

				& figcaption {
					position: absolute; top: 0; right: 0; bottom: 0; left: 0;
					display: flex; flex-direction: column; align-items: stretch; justify-content: start;
					line-height: 1;

					& h4 {
						margin: 0 0 1.0rem 0;
						display: flex; flex-direction: row; justify-content: space-between; align-items: center;
						padding: 0.5rem 0 0 0; top: 0; left: 0; right: 0; z-index: 0; color: #000;
						border-top: 2px solid #000;

						& nav.publinav {
							display: flex; flex-direction: row; justify-content: end; align-items: center; margin: -4px 0;
							& i {
								display: block; width: 21px; height: 21px; border: 1px solid var(--color-grey-b); box-sizing: border-box;
								border-radius: 50%; margin-left: 1rem; opacity: 1; cursor: pointer; transition: border 200ms linear;
								&:hover { border: 2px solid #000; }
								&.selected { opacity: 1; border: 2px solid #000;}
							}
						}
					}

					& a.btn-page {
						/* outline: 1px solid red; */
						/* font-weight: 400; */
						display: block; box-sizing: border-box;
						font-size: 0.85rem; color: var(--color-link);

						padding: 0.5rem 0 0.5rem 2rem;
						display: flex; flex-direction: row; justify-content: start; align-items: end; opacity: 0.9; transition: opacity 100ms ease;

						& span {
							position: relative;
							&:before { content: ""; position: absolute; bottom: -3px; left: 0; right: 0; height: 1px; background-color: var(--color-link); transition: all 100ms ease; }
						}

						&:hover {
							opacity: 1;
							& span {
								&:before { bottom: -6px; height: 2px; }
							}
						}
					}

					& ul.pages-shortlist {
						& li {
							/* outline: 1px solid red; */
							&:nth-child(1) { display: block; }
							&:nth-child(2) { display: block; }
							&:nth-child(3) { display: none; }
							&:nth-child(4) { display: none; }
							&:nth-child(5) { display: none; }
						}

						& b {padding-left: 0rem;}
					}



					& h1 {
						font-family: 'georgia', serif; font-size: 2rem; color: #fff!important; letter-spacing: -0.025em; line-height: 1.5rem;
						text-align: left; font-style: normal; padding: 0 1rem; margin-bottom: -11px;
					}


				}
			}
		}


		&.cel1 {
			animation-name: anim_fromLeft-32;
			animation-delay: 200ms;
			aspect-ratio: 1/1; --cols: 1; --rows: 1;
			& figcaption { background: none; }
			& h4 > span { display: block; min-width: 40%; border: 0px solid red;}
		}
		&.cel2 {
			animation-name: anim_fromRight-32;
			animation-delay: 600ms;
			aspect-ratio: 2/1; --cols: 1; --rows: 1;
			& figcaption {background: none; }
		}
		&.cel3 {
			animation-name: anim_fromTop-32;
			animation-delay: 1000ms;
			aspect-ratio: 2/1; --cols: 1; --rows: 1;
			& figcaption {background: none; }
			& ul li a > span { font-size: 0.85rem; font-weight: 600;}
		}
		&.cel4 {
			animation-name: anim_fromBottom-32;
			animation-delay: 1400ms;
			aspect-ratio: 2/1; --cols: 1; --rows: 1;
			& h4 > span { display: block; min-width: 40%; border: 0px solid red;}
		}
		&.cel5 {
			animation-name: anim_fromBottom-32;
			animation-delay: 1800ms;
			aspect-ratio: 2/1; --cols: 1; --rows: 1;
			& figure img { margin-top: 55px; }
			& svg {
				position: absolute; left: 0; right: 0; top: 55px; bottom: 0;
				border: 0px solid red; fill: #2025; stroke: #fff; stroke-width: 0.25;
			}
			& a.btn-page2 {
				/* border: 1px solid red; */
				position: absolute; top: 55px; left: 0; right: 0; bottom: 0; padding: 0;

				& span {
					position: relative; font-weight: 700; font-size: 1.1rem; margin: 0 0 1.5rem 1rem;
					&:before { content: ""; position: absolute; bottom: -6px; left: 0; width: 0; height: 3px; background-color: var(--color-link); transition: all 100ms ease; }
				}

				&:hover {
					opacity: 1;
					& span {
						&:before { width: 100%; height: 3px; }
					}
				}
			}
		}
	}
}


/* The animation code */
/* @keyframes anim_fromLeft-32 {
	from { opacity: 0; transform: translate(-32px,0); }
	to { opacity: 1; transform: translate(0,0); }
} */


ul.homeslide {
	position: relative;
	display: flex; flex-direction: row; justify-content: start; align-items: stretch;
	width: 100%;

	& > li {
		position: absolute;
		width: 100%;
		padding: 0rem;
		transform: translate(200px, 0); opacity: 0; transition: all 400ms ease;

		&.visible { opacity: 1 ; z-index: 1; transform: translate(0, 0); }

		& a {
			width: 100%;
			display: flex; flex-direction: row;

			& img { display: block; width: 46%;}



			& > span {
				display: flex; flex-direction: column; justify-content: start; align-items: start;
				width: 48%;

				& span.hdate { color: #fff;}
				& span.htitr {
					line-height: 1.5rem; margin-top: 1rem;
					position: relative;
					&:after { content: ""; position: absolute; bottom: -10px; left: 0px; width: 0px; height: 3px; background-color: #000; transition: all 200ms ease; transition-delay: 300ms;}
				}
			}

			&:hover {
				& span.htitr {
					&:after { width: 100%; transition-delay: 0ms;}
				}
			}
		}
	}
}

ul.hslide1 {
	aspect-ratio: 8/7;
	& li {
		aspect-ratio: 8/7;
		& a {
			aspect-ratio: 8/7;
			justify-content: space-between; align-items: center;
		}
	}
}
ul.hslide2 {
	position: absolute; top: 55px; bottom: 0; left: 0; right: 0;
	background: linear-gradient(180deg, #EFEFDE 25%, #0076ac 100% );

	& li {
		/* border: 1px solid red; */
		position: absolute; top: 0; bottom: 0; left: 0; right: 0;
		& a {
			justify-content: space-between; align-items: start;
			/* border: 1px solid red; */
			position: absolute; top: 0; bottom: 0; left: 0; right: 0;

			& div.divimage {

				/* border: 1px solid red; */
				position: absolute; top: 0; bottom: 0; right: 0;
				background-size: cover; background-position: center center;
				width: 46%;
			}
		}

		&:nth-child(1) a { background: linear-gradient(90deg, #0000 10%, #000F 100%); }
		&:nth-child(2) a { background: linear-gradient(157deg, #000B 32%, #DDD8 100%); color: #fff;}
		&:nth-child(3) a { background: linear-gradient(90deg, #0005 25%, #70af 75%); color: #fff; }
	}
}


ul.document-list {
	position: absolute; top: 55px; bottom: 0; left: 0; right: 0;
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;

	& li {
		position: relative;
		/* border: 1px solid red; */
		display: flex; flex-direction: row; justify-content: center; align-items: stretch; background-color: #000;

		& a {
			position: absolute; top: 0; left: 0; bottom: 0; right: 0; overflow: hidden;
			display: flex; flex-direction: column; justify-content: end; align-items: start;
			padding: 1.5rem 1rem; color: #fff;
			/* border: 0px solid grey; */

			& div.imajbg {
				position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 0;
				transform: scale(1,1); transition: transform 300ms ease;
				background-size: cover; background-position: center center;
			}
			& div.imajgd {
				position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 1;
				background: linear-gradient(#0560, #0367);
			}

			& > span { z-index: 1;}

			&:hover {
				& div.imajbg {
					 transform: scale(1.1,1.1);
				}

			}
		}
	}
}


div.home-icons {
	display: flex; flex-direction: row; justify-content: start; align-items: center; gap: 32px; flex-wrap: wrap;
	& svg { display: block; width: 24px; aspect-ratio: 1/1; outline: 1px solid #bbb; outline-offset: 8px; border-radius: 1px; }
}




header.h1 {
	& h1 {
		opacity: 0;
		animation-name: anim_fromRight-32;
		animation-duration: 700ms;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
	}
	& p {
		opacity: 0;
		animation-name: anim_fromLeft-32;
		animation-duration: 800ms;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
	}
}


@media screen and (min-width: 25rem) {}
@media screen and (min-width: 30rem) {
	.home-grid > li > div figure figcaption ul.pages-shortlist li {
		&:nth-child(1) { display: block;}
		&:nth-child(2) { display: block;}
		&:nth-child(3) { display: block;}
		&:nth-child(4) { display: none;}
		&:nth-child(5) { display: none;}
	}
}
@media screen and (min-width: 40rem) {
	.home-grid > li > div figure figcaption ul.pages-shortlist li {
		&:nth-child(1) { display: block;}
		&:nth-child(2) { display: block;}
		&:nth-child(3) { display: none;}
		&:nth-child(4) { display: none;}
		&:nth-child(5) { display: none;}
	}
}
@media screen and (min-width: 50rem) {
	.home-grid {
		grid-template-columns: repeat(2, 1fr);

		& > li {
			/* border: 1px solid red; */
			grid-column-start: span var(--cols);
			grid-row-start: span var(--rows);

			&.cel1 { aspect-ratio: 7/8; --cols: 1; --rows: 2; }
			&.cel2 { aspect-ratio: 2/1; --cols: 1; --rows: 1; }
			&.cel3 { aspect-ratio: 2/1; --cols: 1; --rows: 1; }
			&.cel4 { aspect-ratio: 1/1; --cols: 1; --rows: 1; }
			&.cel5 { aspect-ratio: 1/1; --cols: 1; --rows: 1; }
		}
	}
}
@media screen and (min-width: 60rem) {
	.home-grid > li > div figure figcaption ul.pages-shortlist li {
		&:nth-child(1) { display: block;}
		&:nth-child(2) { display: block;}
		&:nth-child(3) { display: none;}
		&:nth-child(4) { display: none;}
		&:nth-child(5) { display: none;}
	}
}
@media screen and (min-width: 70rem) {
	.home-grid {
		grid-template-columns: repeat(3, 1fr);

		& > li {

			/* border: 1px solid limegreen; */
			grid-column-start: span var(--cols);
			grid-row-start: span var(--rows);

			&.cel1 { aspect-ratio: 1/1; --cols: 2; --rows: 2;}
			&.cel2 { aspect-ratio: 1/1; --cols: 1; --rows: 1;}
			&.cel3 { aspect-ratio: 1/1; --cols: 1; --rows: 1;}
			&.cel4 { aspect-ratio: inherit; --cols: 2; --rows: 1;}
			&.cel5 { aspect-ratio: inherit; --cols: 1; --rows: 1;}

			& > div {
				padding-bottom: 52.65%;

				& figure figcaption h1 { color: #fff4; font-size: 2rem; line-height: 3.0rem; }
				& figure figcaption ul.pages-shortlist li {
					&:nth-child(1) { display: block;}
					&:nth-child(2) { display: block;}
					&:nth-child(3) { display: block;}
					&:nth-child(4) { display: block;}
					&:nth-child(5) { display: block;}

					& a img { display: block;}
				}


			}
		}
	}
	div.home-hero { margin: 0 -48px;}
}
@media screen and (min-width: 80rem) {
	div.home-hero { margin: 0 -64px;}
}
@media screen and (min-width: 90rem) {
	div.home-hero { margin: 0 -96px;}
}