/*
--------------------
Test CSS 1 for PN homepage
Created: 01/24/2023
Created by: TGOPS
--------------------
*/

/*
	----------------
	- Global
	----------------
*/

#ipsLayout_body{
	max-width: none;
	padding: 0;
}

#ipsLayout_mainArea{
	padding: 0 !important;
}

.ipsBreadcrumb{
	display: none !important;
}

#elCmsPageWrap .ipsLayout_container{
	max-width: var(--container--width);
	padding: 0 15px;
	margin: 0 auto;
}

body #ipsLayout_footer{
	margin: 0;
}

.ipsCarousel .ipsCarousel_inner > [data-role="carouselItems"] {
  padding: 0;
  margin: auto;
  list-style: none;
  white-space: nowrap;
  position: absolute;
  transition: transform .2s ease-in-out;
  display: flex;
}


/*
	----------------
	- Hero
	----------------
*/

.homepage__hero{
	background-color: #59758a;
	/* background-image: url(//content.invisioncic.com/l323473/pages_media/1218959703_0_pnorigbannerv3.png); */
	background-image: url(//content.invisioncic.com/l323473/pages_media/0_photo-net-homepage-hero.jpg);
	background-size: cover;
	background-position: 50%;
	text-align: center;
	padding: 150px 0;
	box-shadow: inset rgba(0,0,0,.1) 0px 1px 0px 0px, inset rgba(0,0,0,.1) 0px -1px 0px 0px;
	/* margin-bottom: 20px; */
}

	.homepage__hero ._width{
		max-width: 1000px;
		margin: 0 auto;
	}

		.homepage__hero ._text{
			text-transform: uppercase;
			color: #fff;
			text-shadow: rgba(0,0,0,.2) 0px 2px 2px, rgba(0,0,0,.2) 0px 6px 12px;
			font-size: 65px;
			font-size: clamp(24px, 6vw, 65px);
			line-height: 1.1;
		}

			.homepage__hero ._text span{
				display: block;
				font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
				font-weight: 100;
			}

	.homepage__hero ._buttons{
		display: flex;
		justify-content: center;
		text-transform: uppercase;
		margin-top: 30px;
		font-size: 21px;
		font-size: clamp(16px, 3vw, 21px);
	}

		.homepage__hero ._buttons a{
			display: block;
			padding: .4em 1.2em;
			color: #fff;
			background: #27ae60;
			margin: 5px;
			border-radius: 6px;
		}

		.homepage__hero ._buttons a:nth-child(2){
			background: #27ae60;
		}

			.homepage__hero ._buttons a:hover{
				background-image: linear-gradient(to right, rgba(255,255,255,.1) 0% 100%);
			}

		.homepage__hero ._buttons .fa{
			font-size: 0.9em;
			margin-right: .2em;
		}

.homepage__hero-text{
	background: #fff;
	padding: 7px;
	color: #111;
	text-transform: uppercase;
	text-align: center;
	font-size: clamp(13px, 2.4vw, 34px);
	margin-bottom: 20px;
}

/*
	----------------
	- Sections
	----------------
*/

.homepage__section{
	background-color: rgb(var(--theme-area_background_reset));
	border-radius: 0px;
	padding: 10px;
	padding: min(6vw, 50px);
	margin-bottom: 20px;
}

	@media (max-width: 767px){
		.homepage__section{
			margin-left: -15px;
			margin-right: -15px;
			border-radius: 0;
		}
	}

	.homepage__section-title{
		margin-bottom: 40px;
		letter-spacing: -0.02em;
	}

		.homepage__section-title h2,
		.homepage__section-title h3{
			margin: 0;
			font-size: 34px;
			font-size: clamp(20px, 5vw, 34px);
			color: rgb(var(--theme-brand_primary));
			-moz-osx-font-smoothing: grayscale;
			font-weight: 700;
		}

			.homepage__section-title p{
				margin: 0;
				font-size: 15px;
				font-weight: 600;
				-moz-osx-font-smoothing: grayscale;
			}

.homepage__section--dark{
	--theme-link: 255,255,255;
	--theme-link_hover: 255,255,255;
	background-color: #2c3e50;
	color: rgba(255,255,255,.9);
}

	.homepage__section--dark .homepage__section-title h2,
	.homepage__section--dark .homepage__section-title h3{
		color: #fff;
	}


.homepage__sub-title{
	margin: 0;
	margin-bottom: 1em;
	font-size: 20px;
	font-size: clamp(18px, 5vw, 20px);
	color: rgb(var(--theme-text_dark));
	-moz-osx-font-smoothing: grayscale;
	font-weight: 700;
	/* Align titles when they contain icons */
	display: flex;
	align-items: center;
}

	.homepage__sub-title svg{
		width: 24px;
		height: auto;
		margin-right: 0.7em;
		color: rgb(var(--theme-brand_primary));
		fill: currentColor;
	}

	.fa-secondary{ opacity:.4 }


/*
	----------------
	- Topic feed
	----------------
*/

.topic-feed{
	flex: 1 0 auto;
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
}

	/* Allow clicking of full block */
	.topic-feed a{
		position: relative;
		z-index: 1;
		color: #fff;
	}

	.topic-feed a:focus,
	.topic-feed a:hover{
		text-decoration: underline;
	}

	.topic-feed > *{
		display: flex;
		align-items: center;
		padding: 20px;
		position: relative;
	}

		.topic-feed > *:hover,
		.topic-feed > *:focus-within{
			background-color: rgba(0,0,0,.2);
		}

		.topic-feed ._align{
			display: flex;
		}

			.topic-feed ._avatar{
				flex: 0 0 auto;
				margin-right: 15px;
			}

				.topic-feed ._avatar .ipsUserPhoto_tiny{
					width: 24px;
					height: 24px;
				}

			.topic-feed ._text{
				flex: 1 1 100%;
			}

				.topic-feed ._title{
					font-weight: 600;
					font-size: 1.1em;
					margin-bottom: 0.7em;
					line-height: 1.3;
				}

					.topic-feed ._title a{
						position: static;
					}

						.topic-feed ._title a::before{
							content: '';
							position: absolute;
							top: 0;
							left: 0;
							right: 0;
							bottom: 0;
						}

				.topic-feed ._meta{
					color: rgba(var(--theme-text_light),.7);
					margin: 0;
					padding: 0;
					list-style: none;
				}

					.topic-feed ._meta a{
						color: inherit;
					}


/*
	----------------
	- Topic feed: Featured
	----------------
*/

.topic-feed--featured > *{
	padding: 15px 20px;
	border-top: 1px solid rgba(255,255,255,.1);
	background-clip: padding-box;
}

.topic-feed--featured ._meta{
	color: rgba(255,255,255,.6);
}


/*
	----------------
	- Topic feed: Active
	----------------
*/

.topic-feed--active{
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
	grid-gap: 15px;
	gap: 15px;
}

	.topic-feed--active > *{
		border-radius: 8px;
		background: rgba(255,255,255,.03);
	}

		.topic-feed--active > *:hover,
		.topic-feed--active > *:focus-within{
			background-color: rgba(255,255,255,.07);
		}

	.topic-feed--active ._meta{
		color: rgba(255,255,255,.6);
	}


/*
	----------------
	- Browse categories columns
	----------------
*/

.homepage__browse-columns{
	display: grid;
	gap: 20px;
}

	@media (min-width: 768px){
		.homepage__browse-columns{
			grid-template-columns: 1fr 340px;
		}
	}


/*
	----------------
	- Browse categories grid
	----------------
*/

.homepage__browse-categories{
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
	grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
	flex: 1 0 auto;
}

	@media (max-width: 767px){
		.homepage__browse-categories{
			margin-left: calc(min(6vw, 50px) * -1);
			margin-right: calc(min(6vw, 50px) * -1);
		}
	}

	.homepage__browse-categories > *{
		padding: 30px;
		position: relative;
		border-radius: 12px;
		display: flex;
		align-items: center;
	}

		.homepage__browse-categories > *:hover,
		.homepage__browse-categories > *:focus-within{
			background: rgba(var(--theme-brand_primary),.07);
		}

	.homepage__browse-categories ._align{
		display: flex;
		align-items: flex-start;
	}

	.homepage__browse-categories ._icon {
		display: flex;
		margin-right: 25px;
		flex: 0 0 30px;
	}

		.homepage__browse-categories ._icon svg{
			width: 100%;
			height: auto;
			fill: rgb(var(--theme-brand_primary));
		}

		.homepage__browse-categories ._text{
			flex: 1 1 auto;
		}

			.homepage__browse-categories ._link{
				display: block;
				color: rgb(var(--theme-text_dark));
				text-decoration: none;
			}

				.homepage__browse-categories ._link::before{
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
				}

				.homepage__browse-categories ._title{
					display: block;
					font-weight: bold;
					font-size: 20px;
					line-height: 1.2;
					margin: 0;
					margin-bottom: 10px;
				}

			.homepage__browse-categories ._desc{
				margin: 0;
				color: rgb(var(--theme-text_light));
			}


/*
	----------------
	- Masonry grid
	----------------
*/

.homepage__masonry{
	--ratio: 1/1;
	--gap: 5px;
	--bo-ra: 0px;
	display: flex;
	flex-wrap: wrap;
 	margin: calc(var(--gap) * -1) 0 0 calc(var(--gap) * -1);
  padding-right: 100px;
  padding-left: 100px;
} 

	@supports (width: min(1vw, 30px)){
		.homepage__masonry{
			--gap: min(2vw, 30px);
		}
	}

	.homepage__masonry > *{
		flex: calc(10 * (var(--ratio))) 0 0%;
		margin: var(--gap) 0 0 var(--gap);
	}

	.homepage__masonry a{
		position: relative;
		display: block;
		color: rgb(var(--theme-brand_primary));
		background: rgb(var(--theme-area_background_reset));
		border-radius: var(--bo-ra);
	}

		.homepage__masonry a::before{
			content: '';
			display: block;
			padding-top: calc(100% / (var(--ratio)));
			position: relative;
			z-index: 1;
			/* box-shadow: inset rgba(0,0,0,.1) 0px 0px 0px 1px; */
			border-radius: inherit;
		}

			.homepage__masonry a:hover::before,
			.homepage__masonry a:focus::before{
				background: rgba(0,0,0,.15);
			}

	.homepage__masonry img{
		position: absolute;
		top: 0px;
		left: 0px;
      	width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: var(--bo-ra);
	}

	.homepage__masonry a:empty::after{
		content: '\f083';
		font: normal normal normal 14px/1 FontAwesome;
		font-size: 30px;
		text-rendering: auto;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.homepage__masonry hr{
		border: 0;
		height: 0;
		display: none;
		margin: 5px;
		flex: 0 1 101%;
	}

		.homepage__masonry hr:last-child{
			display: none !important;
		}

	/* Show how many images per row */
	.homepage__masonry > hr:nth-of-type(2n){
		display: block;
	}
	@media (min-width: 600px){
		.homepage__masonry hr:nth-of-type(n){
			display: none;
		}
		.homepage__masonry > hr:nth-of-type(3n){
			display: block;
		}
	}
	@media (min-width: 980px){
		.homepage__masonry hr:nth-of-type(n){
			display: none;
		}
		.homepage__masonry > hr:nth-of-type(4n){
			display: block;
		}
	}

.homepage__masonry-all a{
	margin-top: 30px;
	display: block;
	padding: 1em;
	text-align: center;
	color: rgb(var(--theme-area_background_dark));
	background: rgb(var(--theme-area_background));
	font-weight: bold;
	text-transform: uppercase;
	font-size: 16px;
	border-radius: 0px;
}

	.homepage__masonry-all a:hover{
		background-image: linear-gradient(rgba(0,0,0,.06) 0 100%);
	}



/*
	----------------
	- Latest topics
	----------------
*/

.homepage__latest-columns{
	--_gap: 50px;
	display: flex;
	flex-wrap: wrap;
	margin: calc(var(--_gap) * -1) 0 0 calc(var(--_gap) * -1);
}

	.homepage__latest-columns > *{
		margin: var(--_gap) 0 0 var(--_gap);
		flex: 1 1 300px;
		display: flex;
		flex-direction: column;
	}

.homepage__latest{
	flex: 1 1 auto;
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
	grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr));
	grid-gap: 12px;
	gap: 12px;
}

	/* Allow clicking of full block */
	.homepage__latest a{
		position: relative;
		z-index: 1;
	}

	.homepage__latest a:focus,
	.homepage__latest a:hover{
		text-decoration: underline;
	}

	.homepage__latest > *{
		display: flex;
		align-items: center;
		border-radius: 8px;
		padding: 20px;
		position: relative;
		background: rgba(0,0,0,.1);
		/*background: rgb(var(--theme-area_background_reset));*/
		/*box-shadow: rgba(var(--theme-text_color),.08) 0px 0px 70px, rgba(var(--theme-text_color),.12) 0px 1px 2px;*/
	}

		.homepage__latest ._align{
			display: flex;
		}

			.homepage__latest ._avatar{
				flex: 0 0 auto;
				margin-right: 15px;
			}

				.homepage__latest ._avatar .ipsUserPhoto_tiny{
					width: 24px;
					height: 24px;
				}

			.homepage__latest ._text{
				flex: 1 1 100%;
			}

				.homepage__latest ._title{
					font-weight: 600;
					font-size: 1.1em;
					margin-bottom: 0.4em;
					line-height: 1.3;
				}

					.homepage__latest ._title a{
						position: static;
					}

						.homepage__latest ._title a::before{
							content: '';
							position: absolute;
							top: 0;
							left: 0;
							right: 0;
							bottom: 0;
						}

				.homepage__latest ._meta{
					margin: 0;
					padding: 0;
					list-style: none;
					opacity: .6;
				}

					.homepage__latest ._meta a{
						color: inherit;
					}