/*** LAYOUT NOTES  ***/

.layout-notes {
	padding-top: 30px;
}



/***  FILTER BAR  ***/

.filter-bar {
	padding-top: 30px;
	text-align: center;
}

.filter-form {margin: 0 !important;}

.filter-form .filter-text, 
.filter-form .filter-select {padding: 15px;}

.filter-form .filter-select {height: 50px;}

@media screen and (min-width: 901px) {
.filter-form .filter-text, 
.filter-form .filter-select {width: 20%;}
}

@media screen and (max-width: 900px) {
.filter-form .filter-text, 
.filter-form .filter-select {margin-bottom: 5px;}
}

.filter-form .filter-submit {
	margin: 2px;
	vertical-align: middle;
}

.filter-form .filter-submit:hover {
}

.filter-form .filter-submit:active {
}

.filter-form .filter-reset {
	padding-top: 11px;
	padding-bottom: 11px;
	background-color: var(--light-2);
	border-color: var(--light-1);
	color: var(--dark-2);
}

.filter-form .filter-reset:hover {
	background-color: var(--light-1);
	border-color: var(--light-1);
	color: var(--dark-2);
}

/* Loading Overlay */

.filter-loading-overlay {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	width: 100%;
	height: 0;
	overflow: hidden;
	background-color: rgba(0,0,0,0.5);
}

.filter-loading-overlay.active {height: 100%;}

.filter-loading-overlay-inner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
}

.filter-loading-overlay .fa {color: white;}



/***  LAYOUT COLS  ***/

.layout-cols .grid {justify-content: center;}

.layout-cols .layout-link {
	display: block;
	border: 1px solid var(--light-1);
	background-color: white;
	text-align: center;
	box-shadow: 0 4px 16px rgba(0,0,0,0.15);
	transition: all 300ms ease-in-out;
}

.layout-cols .layout-link:hover {
	box-shadow: 0 6px 24px rgba(0,0,0,0.24);
	text-decoration: none;
}

.layout-cols .layout-link .layout-screenshot-wrap {position: relative;}

.layout-cols .layout-link .layout-open {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	transform: translateX(-50%) translateY(-50%);
	display: inline-block;
	padding: 10px 16px;
	border-radius: var(--radius-2);
	background: rgba(0,0,0,0.6);
	content: 'Open Demo';
	color: white;
	opacity: 0;
	transition: all 300ms ease-in-out;
}

.layout-cols .layout-link .layout-open .fal {color: white;}

.layout-cols .layout-link:hover .layout-open {
	opacity: 1;
}

.layout-cols .layout-link .layout-open:hover {
	background-color: var(--primary);
}

.layout-cols .layout-screenshot {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1.15;
	object-position: top center;
	object-fit: cover;
	transition: all 3000ms ease-in-out;
}

.layout-cols .layout-link:hover .layout-screenshot {
	object-position: bottom center;
}

.layout-cols .layout-text-wrap {
	padding: 15px;
}