/* Card Styles */

.wr-card-outer
{
}

.wr-card-grid
{
	grid-gap: 5px;
}

.wr-card-title {
	text-align: center;
	grid-area: title;
	font-weight: bold;
	font-size: large;
}

@container (width: 100%) {

}

.wr-card-subtitle {
	text-align: center;
	grid-area: subtitle;
	font-size: small;
}

.wr-card-spacer {
	display: none;
	grid-area: spacer;
}

.wr-card-picture {
	grid-area: picture;
	display: table;
	height: 100%;
	overflow: hidden;
}

.wr-card-picture-image {
	display: table-cell;
	vertical-align: middle;
	width: 128px; 
	height: 128px; 
	background-size: cover; 
	background-repeat: no-repeat; 
	border-radius: 50%
}

.wr-card-picture-image img {
	border-radius: 50%;
}
.wr-card-footer-inner {
	display: table-cell;
	vertical-align: bottom;
	padding-top: 5px;
	padding-left: 5px;
	padding-right: 5px;
}

.wr-card-description {
	grid-area: description;
	padding: 5px;
}

.wr-card-left-align .wr-card-grid {
	display: grid;
	grid-template-areas: 
		"title title" 
		"subtitle subtitle" 
		"picture description";

	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto 1fr;
	min-height: 100%;
	margin-bottom: 2rem;
}

.wr-card-right-align .wr-card-grid {
	display: grid;
	grid-template-areas: "title title" "subtitle subtitle" "description picture";
	grid-template-columns: 1fr auto;
	grid-template-rows: auto auto 1fr;
	min-height: 100%;
	margin-bottom: 2rem;
}

.wr-card-outer-border {

}

.wr-card-color {

}

.wr-card-background
{

}

.wr-card-unpublished
{
	opacity: 0.7;
}

@media only screen and (max-width: 720px) {
	.wr-card-right-align .wr-card-grid {
		display: grid;
		grid-template-areas: "picture title" "picture subtitle" "description description";
		grid-template-columns: auto 1fr;
		grid-template-rows: auto auto 1fr;
		min-height: 100%;
		margin-bottom: 2rem;
	}

	.wr-card-left-align .wr-card-grid {
		display: grid;
		grid-template-areas: "picture title" "picture subtitle" "description description";
		grid-template-columns: auto 1fr;
		grid-template-rows: auto auto 1fr;
		min-height: 100%;
		margin-bottom: 2rem;
	}

	.wr-card-picture-image {
		display: table-cell;
		vertical-align: middle;
		width: 64px;
		height: 64px;
		background-size: cover;
		background-repeat: no-repeat;
		border-radius: 50%
	}

	.wr-card-title {
		text-align: left;
	}

	.wr-card-subtitle {
		text-align: left;
	}
}

.wr-card-dark .wr-theme-background-color {
	background-color: rgba(10,10,10,1.0);
}

.wr-card-dark .wr-card-text-color, wr-card-dark .wr-card-text-color a:link, wr-card-dark .wr-card-text-color a:hover, wr-card-dark .wr-card-text-color a:visited {
	color: rgba(240, 240, 240, 1.0);
}

.wr-card-dark .wr-card-title-color {
	color: white;
}

.wr-card-dark .wr-card-footer-color a:visited {
	color: white;
}

.wr-card-dark .wr-card-footer-color a:hover a:link {
	color: white;
}

.wr-card-dark .pc-footer-color a:link {
	color: white;
}

.wr-card-dark .wr-card-outer-border-color {
	border: solid white 1px;
}

.wr-card-light .wr-card-background-color {
	background-color: rgba(240, 240, 240, 1.0);
}

.wr-card-light .wr-card-background-color {
	background-color: rgba(10,10,10,1.0);
}

.wr-card-light .wr-card-outer-border-color
{
	border: solid black 1px;
}

.delete-button{

}

/* lgbt colors*/

.lgbt-color-0 {
	color: RGB(255, 0, 24);
}

.lgbt-color-1 {
	color: RGB(255, 165, 44);
}

.lgbt-color-2 {
	color: RGB(255, 255, 65);
}

.lgbt-color-3 {
	color: RGB(0, 128, 24);
}

.lgbt-color-4 {
	color: RGB(0, 0, 249);
}

.lgbt-color-5 {
	color: RGB(134, 0, 125);
}

/* lgbt colors*/

.lgbt-background-0 {
	background: linear-gradient(180deg, RGBA(255, 0, 24, 1.0) 0%, RGBA(255,0,24, 0.5) 100%);
	color: white;
}

.lgbt-background-1 {
	background: linear-gradient(180deg, RGBA(255, 165, 44, 1.0) 0%, RGBA(255, 165, 44, 0.5) 100%);
	color: white;
}

.lgbt-background-2 {
	background: linear-gradient(180deg, RGBA(255, 255, 65, 1.0) 0%, RGBA(255, 255, 65, 0.5) 100%);
	color: black !important;
}

.lgbt-background-3 {
	background: linear-gradient(180deg, RGBA(0, 128, 24, 1.0) 0%, RGBA(0, 128, 24, 0.5) 100%);
	color: white;
}

.lgbt-background-4 {
	background: linear-gradient(180deg, RGBA(0, 0, 249, 1.0) 0%, RGBA(0, 0, 249, 0.5) 100%);
	color: white;
}

.lgbt-background-5 {
	background: linear-gradient(180deg, RGBA(134, 0, 125, 1.0) 0%, RGBA(134, 0, 125, 0.5) 100%);
	color: white;
}

.lgbt-background-flag {
	background-image: linear-gradient(to right, RGB(255, 0, 24) 0%, RGB(255, 0, 24) 16.6%, RGB(255, 165, 44) 16.6%, RGB(255, 165, 44) 33.3%, RGB(255, 255, 65) 33.3%, RGB(255, 255, 65) 50%, RGB(0, 128, 24) 50%, RGB(0, 128, 24) 66.6%, RGB(0, 0, 249) 66.6%, RGB(0, 0, 249) 83.3%, RGB(134, 0, 125) 83.3%, RGB(134, 0, 125) 100%);
}