.ui-card-container,
.details-drop {
	display: flex;
	flex-wrap: wrap;
}
.ui-card-container.rows {
display:block;
}

.ui-card {
	box-sizing: border-box;
	padding: 10px;
	display: flex;
}

.ui-card-wrap {
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
	display: flex;
	flex: 1 1 auto;
	padding: 10px;
	flex-direction: row;
	flex-wrap: wrap;
}

.ui-card-wrap:hover {
	box-shadow: 0 7px 12px rgba(0,0,0,0.25), 0 7px 10px rgba(0,0,0,0.22);
}

.card-contents.has-image {
	width: 75%;
}

.card-contents.no-image {
	width: 100%;
}

.card-image {
	width: 25%;
	padding-left: 10px;
	box-sizing: border-box;
}
.rows .card-image {
	text-align:center;
}
.card-contents,
.card-image {
	display: inline-block;
	align-self: flex-start;
}

.card-image img {
	max-width: 100%;
}

.card-title,
.card-title a {
	color: #313131;
	font-size: 18px;
	font-weight: bold;
	text-decoration: none;
	word-break:break-word;
}

.card-date,
.card-restricted {
	font-size: 15px;
	color: #959595;
	line-height: 24px;
}
.card-count,
.card-user-name {
	font-size:14px;
	color:#000;
	line-height:24px;
}

.card-subtitle {
font-weight:bold;
line-height:24px;
margin-top:10px;
}
.card-user-name a {
	font-size:14px;
	text-decoration:none;
}
.card-viewlink {
	font-size: 15px;
	color: #000;
	font-weight: bold;
	text-decoration: none;
	line-height: 24px;
	#align-self: flex-end;
	transition: all .5s ease;
	display:block;
}
.card-multiple-links {
align-self:flex-end;
}
.card-viewlink:hover {
	color: var(--colorSec);
}

.card-viewlink .material-icons {
	vertical-align: middle;
	margin-left:5px;
}

.card-viewlink-2 .material-icons {
	margin-left:5px;
}
.card-viewport-image {
	width: 100%;
	height: 250px;
	background-size: cover;
	background-repeat: no-repeat;
	display: none;
}

.card-summary {
	font-size: 14px;
	word-break:break-word;
	white-space:pre-line;
}
.card-info-link {
	width:100%;
	align-self:flex-end;
}
.ui-card-container.cards.ui-med .ui-card {
width:50%;
}
.ui-card-container.cards.ui-small .ui-card {
	width: 100%;
}
@media(min-width: 768px) and (max-width:1024px){
	.ui-card {
		width: 50%;
	}
	.rows .ui-card {
		width: 100%;
	}
}

@media(min-width: 56rem) {
	.ui-card {
		width: 33.3333%;
	}
	.rows .ui-card {
		width:100%;
	}
}

@media(max-width:767px) {
	.ui-card {
		width: 100%;
	}

	.card-viewport-image {
		display: block;
	}

	.card-contents.has-image {
		width: 100%;
	}

	.card-image {
		display: none;
	}
}