/* --- Samples --- */

.sti-samples div.border {
	position: relative;
	display: inline-block;
}
.sti-samples div.border:after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	border: 1px solid #b0b0b0;
	border-radius: 7px;
}
.sti-samples div.border img {
	border-radius: 8px;
}


/* --- Samples list --- */

div.page-header .tabs > div.break-line {
	flex-basis: 100%;
}
.sti-samples .links a.disabled {
	display: none;
}
@media (max-width: 1190px) {
	div.page-header .tabs > div.break-line {
		flex-basis: auto;
	}
}
@media (max-width: 480px) {
	.sti-samples .article .columns:not(.reverse) > div:not(:last-child) {
		margin: 0;
	}
	.sti-samples .article.links a.sample {
		border-bottom: 5px solid #eeeeee;
	}
	.sti-samples .article.links img {
		display: none;
	}
	.sti-samples .article.links:after {
		content: '';
		display: block;
		position: relative;
		height: 5px;
		background: white;
		bottom: 5px;
	}
}

/* -- Tiles -- */

.sti-samples .tiles .tile h3 {
	margin-bottom: 5px;
}
.sti-samples .tiles .tile span {
	display: block;
	width: 100%;
	text-align: center;
	font-size: 14px;
	text-transform: none;
	font-weight: 400;
}
.sti-samples .tiles .tile img {
	padding-top: 68px;
}


/* --- Tags --- */

.sti-samples .tiles.tags {
	justify-content: normal;
}
.sti-samples .tiles.tags a {
	width: auto;
	height: auto;
	padding: 10px 20px;
	white-space: nowrap;
	font-size: 16px;
	font-weight: 400;
}
.sti-samples .tiles.tags a:not(.disabled):hover,
.sti-samples .tiles.tags a.selected {
	box-shadow: 0 0 0 3px #3498db;
}
.sti-samples .tiles.tags a.back {
	padding-left: 35px;
	font-weight: 600;
}
.sti-samples .tiles.tags a.back:before {
	content: '\00AB';
	position: absolute;
	top: 3px;
	left: 15px;
	font-size: 23px;
	font-weight: normal;
}
.sti-samples .tiles.tags a.disabled {
	cursor: default;
	color: #ccd1d1;
}
.sti-samples .tiles.tags a span,
.sti-samples .tiles.tags a.selected span:last-child {
	display: inline-block;
	position: relative;
	width: auto;
	margin: 0 -5px 0 5px;
	color: #3498db;
	text-transform: none;
}
.sti-samples .tiles.tags a span:last-child {
	display: none;
	font-weight: 600;
}
.sti-samples .tiles.tags a.selected:hover span {
	color: #e74c3c;
}


/* --- Search --- */

.sti-samples:not(.search) form {
	margin-top: 10px;
}
.sti-samples input[type='text'] {
	height: 40px;
	padding: 5px 10px;
	font-size: 14px;
	border: 1px solid #c8c8c8;
}
.sti-samples.search input[type='text'] {
	margin: 0 0 10px 0;
}
.sti-samples input[type='text']:focus {
	border: 1px solid #1ba1e2;
}
.sti-samples input[type='radio'] {
	cursor: pointer;
}
.sti-samples input[type='submit'] {
	position: absolute;
	width: 24px;
	height: 24px;
	margin: 8px 0 0 -30px;
	cursor: pointer;
	border: 0;
	background: url('/media/com_stisamples/images/search.svg');
	background-repeat: no-repeat;
	background-size: 16px;
	background-position: center;
}
.sti-samples label {
	margin: 0 10px 0 2px;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
}
@media (max-width: 860px) {
	.sti-samples input[type='text'] {
		max-width: 100%;
	}
}