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);
} .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);
} .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);
} .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);
} .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;
} .tag-top-left {
top:				var(--vispr-item-space-unit);
left:				var(--vispr-item-space-unit);
}
.tag-top-left span {
} .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;
} .tag-bottom-left {
bottom:				var(--vispr-item-space-unit);
left:				var(--vispr-item-space-unit);
} .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%; }
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;
}