div#vispr-catalog {
	--vispr-color-accent:				#e9ecef;
	--vispr-color-accent-contrast:			blue;
	--vispr-color-search:				#616a78;
	--vispr-color-pagination:			#323232;
	--vispr-color-pagination-active:		var(--vispr-color-pagination);
	--vispr-color-pagination-border:		transparent;
	--vispr-color-pagination-border-active:		#444;
	--vispr-item-width:				368px;
	--vispr-item-text-height:			200px;
	--vispr-item-space-unit:			8px;
	--vispr-item-double-space:			calc(var(--vispr-item-space-unit) * 2);
	margin-bottom:					calc(var(--vispr-item-space-unit)*3);
}

div#vispr-catalog > div.grid {
	position:			relative;
	display:			-webkit-box;
	display:			-ms-flexbox;
	display:			flex;
	-webkit-box-orient:		horizontal;
	-webkit-box-direction:		normal;
	-ms-flex-direction:		row;
	flex-direction:			row;
	-webkit-box-pack:		start;
	-ms-flex-pack:			start;
	justify-content:		space-between;
	-webkit-box-align:		stretch;
	-ms-flex-align:			stretch;
	align-items:			stretch;
	-ms-flex-wrap:			wrap;
	flex-wrap:			wrap;
	width:				100%;
	padding-bottom:			40px;
	-webkit-animation:		tile-wrapp-appearence 0.3s ease;
	animation:			tile-wrapp-appearence 0.3s ease;
}

div#vispr-catalog.hidden {
	display:			none;
	visibility:			hidden;
}

div#vispr-catalog > div.grid > div {
	position:			relative;
	display:			-webkit-box;
	display:			-ms-flexbox;
	display:			flex;
	-webkit-box-orient:		vertical;
	-webkit-box-direction:		normal;
	-ms-flex-direction:		column;
	flex-direction:			column;
	-webkit-box-pack:		justify;
	-ms-flex-pack:			justify;
	justify-content:		space-between;
	border-radius:			0 0 3px 3px;
	width:				320px;
	animation:			fadeIn 1s ease;
}

div#vispr-catalog > div.grid > div.hidden {
	display:			none;
	visibility:			hidden;
}

@keyframes fadeIn {
	0% {
		display:		none;
		visibility:		hidden;
	}
	1% {
		display:		flex;
		visibility:		visible;
		opacity:		0;
	}
	100% {
		opacity:		1;
	}
}

div#vispr-catalog > div.grid > div:last-of-type {
	margin-right:			0;
}

div#vispr-catalog > div.grid > div > a > img {
	margin-bottom:			8px;
	width:				100%;
	max-height:			182.4px;
	object-fit:			scale-down;
}

div#vispr-catalog > div.grid > div > a > h2 {
	font-size:			18pt;
	padding-bottom:			var(--vispr-item-double-space);

}


div#vispr-catalog > div.grid > div > a > p {
	padding-top:			var(--vispr-item-double-space);
	height:				var(--vispr-item-text-height);
	border-top:			solid 0.8px var(--vispr-color-accent);
	overflow:			hidden;
}

div#vispr-catalog > div.grid > div > a > div.ribbon {
	width:				150px;
	height:				150px;
	overflow:			hidden;
	position:			absolute;
}


div#vispr-catalog > div.grid > div > a > div.ribbon span {
	position:			absolute;
	display:			block;
	width:				250px;
	padding:			15px 0;
	background-color:		gray;
	box-shadow:			0 5px 10px rgba(0,0,0,.1);
	color:				white !important;
	text-shadow:			0 1px 1px rgba(0,0,0,.2);
	text-align:			center;
}

div#vispr-catalog > div.grid > div.ad > a > div.ribbon span {
	text-transform:			uppercase;
	background-color:		rgba(0,0,255,.9);
}

/* top left*/
.ribbon-top-left {
	top:				-0px;
	left:				-0px;
}
.ribbon-top-left::before,
.ribbon-top-left::after {
	border-top-color:		transparent;
	border-left-color:		transparent;
}
.ribbon-top-left::before {
	top:				0;
	right:				0;
}
.ribbon-top-left::after {
	bottom:				0;
	left:				0;
}
.ribbon-top-left span {
	right:				-25px;
	top:				30px;
	transform:			rotate(-45deg);
}

/* top right*/
.ribbon-top-right {
	top:				-0px;
	right:				-0px;
}
.ribbon-top-right::before,
.ribbon-top-right::after {
	border-top-color:		transparent;
	border-right-color:		transparent;
}
.ribbon-top-right::before {
	top:				0;
	left:				0;
}
.ribbon-top-right::after {
	bottom:				0;
	right:				0;
}
.ribbon-top-right span {
	left:				-25px;
	top:				30px;
	transform:			rotate(45deg);
}

/* bottom left*/
.ribbon-bottom-left {
	bottom:				-0px;
	left:				-0px;
}
.ribbon-bottom-left::before,
.ribbon-bottom-left::after {
	border-bottom-color:		transparent;
	border-left-color:		transparent;
}
.ribbon-bottom-left::before {
	bottom:				0;
	right:				0;
}
.ribbon-bottom-left::after {
	top:				0;
	left:				0;
}
.ribbon-bottom-left span {
	right:				-25px;
	bottom:				30px;
	transform:			rotate(225deg);
}

/* bottom right*/
.ribbon-bottom-right {
	bottom:				-0px;
	right:				-0px;
}
.ribbon-bottom-right::before,
.ribbon-bottom-right::after {
	border-bottom-color:		transparent;
	border-right-color:		transparent;
}
.ribbon-bottom-right::before {
	bottom:				0;
	left:				0;
}
.ribbon-bottom-right::after {
	top:				0;
	right:				0;
}
.ribbon-bottom-right span {
	left:				-25px;
	bottom:				30px;
	transform:			rotate(-225deg);
}

div#vispr-catalog > div.grid > div.featured > a > div.tag {
	position:			absolute;
}

div#vispr-catalog > div.grid > div.featured > a > div.tag.featured-pro {
}

div#vispr-catalog > div.grid > div.featured > a > div.tag.featured-editors-choice {
}

div#vispr-catalog > div.grid > div.featured > a > div.tag > span {
	border-radius:			calc(var(--vispr-item-space-unit));
	padding:			calc(var(--vispr-item-space-unit));
	color:				white;
	font-weight:			bold;
	text-shadow:			0 2px 2px rgba(0,0,0,0.9);
}

div#vispr-catalog > div.grid > div.featured > a > div.tag.featured-pro > span {
	background-color:		blue;
}

div#vispr-catalog > div.grid > div.featured > a > div.tag.featured-editors-choice > span {
	background-color:		purple;
}

/* top left*/
.tag-top-left {
	top:				var(--vispr-item-space-unit);
	left:				var(--vispr-item-space-unit);
}

.tag-top-left span {
}

/* top right*/
.tag-top-right {
	top:				var(--vispr-item-space-unit);
	right:				var(--vispr-item-space-unit);
}

.tag-bottom-right span,
.tag-top-right span {
	text-align:			right;
}

/* bottom left*/
.tag-bottom-left {
	bottom:				var(--vispr-item-space-unit);
	left:				var(--vispr-item-space-unit);
}

/* bottom right*/
.tag-bottom-right {
	bottom:				var(--vispr-item-space-unit);
	right:				var(--vispr-item-space-unit);
}

div#vispr-detail {
	--vispr-item-space-unit:		8px;
	--vispr-detail-slider-height:		273.6px;
	--vispr-detail-slider-width:		480px;
	--vispr-detail-padding:			42px;
	--vispr-color-detail-background:	white;
	--vispr-detail-indicator-size:		calc(var(--vispr-item-space-unit) * 1.5);
	--vispr-color-detail-indicator:		rgba(128, 128, 128, 0.5);
	--vispr-color-detail-indicator-active:	rgba(0, 0, 0, 0.5);

	background-color:		var(--vispr-color-detail-background);
	padding:			var(--vispr-detail-padding);
	position:			absolute;
	height:				fit-content;
	width:				100%;
	z-index:			1;
	top:				0;
	left:				0;

	display:			flex;
	justify-content:		space-between;
}


div#slider iframe,
div#slider img {
	position:			absolute;
	height:				100%;
	width:				100%;
	border:				none;
}

div#slider .is-active {
	z-index:			2;
}

div#slider iframe.hidden,
div#slider img.hidden {
	display:			none;
}

div#vispr-detail .close-button {
	margin:				12px;
	position:			absolute;
	right:				0;
	top:				0;
}

div#slider {
	position:			relative;
	margin:				0 auto;
	height:				var(--vispr-detail-slider-height);
	width:				var(--vispr-detail-slider-width);
}

div#slider section > * {
	width:				100%;
	height:				100%;
}

#slider-prev,
#slider-next {
	background-color:		rgba(0,0,0,0.5);
	height:				36px;
	width:				36px;
	padding-top:			8px;
	margin:				auto 6px;
	position:			absolute;
	border-radius:			50%;
	top:				0;
	bottom:				0;
	color:				white;
	border:				none;
	z-index:			3;
	transition:			transform 0.2s;
}

#slider-prev:not(.is-disabled):hover,
#slider-next:not(.is-disabled):hover {
	transform:			scale(1.2);
	background-color:		rgba(255,255,255,0.2);
}

#slider-prev.is-disabled,
#slider-next.is-disabled {
	opacity:			0.1;
}

#slider-prev > span,
#slider-next > span {
	height:				24px;
	width:				24px;
}

#slider-prev {
	padding-left:			4px;
	left:				0;
}

#slider-next {
	padding-left:			8px;
	right:				0;
}

div#slider > .indicator > ol {
	bottom:				24px;
	gap:				12px;
	position:			absolute;
	display:			flex;
	flex-flow:			row;
	justify-content:		center;
	padding:			0;
	margin:				0;
	width:				100%;
	z-index:			3;
}

div#slider > .indicator > ol > li {
	list-style-type:		none;
	height:				var(--vispr-detail-indicator-size);
	width:				var(--vispr-detail-indicator-size);
	padding:			0;
	margin:				0;
}

div#slider > .indicator > ol > li > button {
	background-color:		var(--vispr-color-detail-indicator);
	height:				100%;
	width:				100%;
	border-radius:			50%;
	/*
	opacity:			0.5;
	*/
}

div#slider > .indicator > ol > li > button.is-active {
	background-color:		var(--vispr-color-detail-indicator-active);
}

div#slider > .indicator > ol > li > button.is-disabled {
	display:			none;
}

div#data {
	display:			flex;
	-webkit-box-orient:		vertical;
	-webkit-box-direction:		column;
	-ms-flex-direction:		column;
	flex-direction:			column;
	-webkit-box-align:		start;
	-ms-flex-align:			start;
	align-items:			flex-start;
	width:				50%;
	padding-left:			40px;
	overflow:			hidden;
	box-sizing:			border-box;
	gap:				12px;

}

div#data > div.featured {
	margin-top:			10px;
}

div#data div.featured span.tag {
	border-radius:			calc(var(--vispr-item-space-unit));
	padding:			calc(var(--vispr-item-space-unit));
	color:				white;
	margin:				10px 0;
}

div#data div.featured span.tag.is-disabled {
	display:			none;
	visibility:			hidden;
}

div#data div.featured span.tag.featured-pro {
	background-color:		blue;
}

div#data div.featured span.tag.featured-editors-choice {
	background-color:		purple;
}

h1#startup-name {
	font-size:			24px;
	line-height:			normal;
	font-weight:			600;
	margin-top:			10px;
}

h2#pitch {
	font-size:			14px;
	word-break:			normal;
	font-weight:			normal;
	line-height:			1.28;
	margin-top:			5px;
	margin-bottom:			30px;
	color:				#616a78;
}

a#website {
	background-color:		#1a76d2;
	color:				#fff;
	box-shadow:			none;
	text-decoration:		none;
	max-width:			100%;
	padding:			15px 40px 15px;
	font-size:			16px;
	font-weight:			500;
	white-space:			nowrap;
	text-orientation:		ellipsis;
	text-align:			center;
	border-radius:			4px;
	opacity:			1;
	transition:			all 0.2s ease;
	display:			block;
	box-sizing:			border-box;
	margin-bottom:			20px;
}

a#website:hover {
	background-color:		#1da2ff;
}

#more {
	width:				100%;
	padding-top:			15px;
	box-sizing:			border-box;
}

#more > .more {
	display:			-webkit-box;
	display:			-ms-flexbox;
	display:			flex;
	-webkit-box-align:		end;
	-ms-flex-align:			end;
	align-items:			flex-end;
	-webkit-box-pack:		justify;
	-ms-flex-pack:			justify;
	justify-content:		space-between;
	box-sizing:			border-box;
	margin-top:			10px;
}

#more > .more.hidden {
	display:			none;
	visibility:			hidden;
}

#more > .more > .key {
	color:				#616a78;
	-webkit-box-flex:		0;
	-ms-flex:			none;
	flex:				none;
	max-width:			130px;
	padding-right:			8px;
	font-size:			12px;
	overflow:			hidden;
	text-overflow:			ellipsis;
	box-sizing:			border-box;
}

#more > .more > .value {
	-webkit-box-flex:		0;
	-ms-flex:			none;
	flex:				none;
	max-width:			calc(100%-140px);
	padding-left:			8px;
	font-size:			12px;
	font-weight:			600;
	overflow:			hidden;
	text-overflow:			ellipsis;
	box-sizing:			border-box;
}

#more > .more > .spacer {
	border-bottom:			#d8d8d8 1px dashed;
	width:				100%;
	margin-bottom:			4px;
	box-sizing:			border-box;
}


span#close-detail {
	font-size:			32pt;
	height:				42px;
	width:				42px;
}

span#close-detail:hover {
	opacity:			0.8;
}

div#vispr-detail.hidden {
	display:			none;
	visibility:			hidden;
}


#vispr-catalog > .header {
	position:			relative;
	display:			-webkit-box;
	display:			-ms-flexbox;
	display:			flex;
	-webkit-box-align:		end;
	-ms-flex-align:			end;
	align-items:			flex-end;
	-webkit-box-pack:		justify;
	-ms-flex-pack:			justify;
	justify-content:		space-between;
	-ms-flex-wrap:			wrap;
	flex-wrap:			wrap;
	margin-bottom:			30px;
	border-bottom:			1px solid #e9ecef;
}

#vispr-catalog > .header > .catalog-search {
	display:			-webkit-box;
	display:			-ms-flexbox;
	display:			flex;
	-webkit-box-align:		end;
	-ms-flex-align:			end;
	align-items:			flex-end;
	width:				75%;
	height:				40px;
	margin-bottom:			10px;
}

#vispr-catalog > .header > .catalog-search > input {
	background-color:		transparent;
	border:				none;
	font-size:			14pt;
	width:				100%;
}

#vispr-catalog > .header > .catalog-search > i.fa-search {
	margin-right:			12px;
	color:				var(--vispr-color-search);
}

#vispr-catalog > .header > .catalog-search > i.fa-solid:before {
	font-size:			14pt;
	font-style:			normal;
}

#vispr-catalog > .header > .catalog-filter {
	width:				100%;
	display:			flex;
	justify-content:		space-between;
}

#order-by {
	width:				fit-content;
	min-width:			200px;
	max-width:			800px;
}

#filter-category .content,
#order-by .content {
	width:				100%;
}

#vispr-catalog > .header > .catalog-filter > select {
	width:				25%;
}

#vispr-catalog > .header > .catalog-filter > select.hidden {
	visibility:			hidden;
}

#pagination {
	display:			flex;
	width:				max-content;
	margin:				0 auto;
	justify-content:		space-between;
}

#pagination a {
	text-decoration:		none;
	text-align:			center;
	border:				solid 1px;
	border-color:			var(--vispr-color-pagination-border);
	color:				var(--vispr-color-pagination);
	border-radius:			4px;
	height:				40px;
	width:				40px;
	line-height:			40px;
	margin:				2px;
	font-weight:			bold;
	font-size:			14pt;
}

#pagination a span.dashicons {
	height:				40px;
	width:				40px;
	font-size:			32pt;
}

#pagination a.selected {
	border-color:			var(--vispr-color-pagination-border-active);
}


#pagination a:first-of-type,
#pagination a:last-of-type {
	border-color:				transparent;
	color:				var(--vispr-color-pagination);
}

#pagination a:first-of-type.disabled span,
#pagination a:last-of-type.disabled span {
	color:				transparent;
}