/*=============================================================================
  File:         readwritetools.com/css/badges.css
  Language:     CSS
  Copyright:    Read Write Tools © 2019
  License:      CC-BY-NC-ND 4.0
  Initial date: Aug 11, 2019
  Contents:     Badges
=============================================================================*/

.badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 0 0 0;
	padding: 0.5rem 0;
	background-color: var(--black);
	border-top: 1px solid var(--light-black);
}
.badge {
	--badge-height: 1.75rem;
	--badge-width: 11rem;
	--img-size: calc(1.5rem - 4px);
	--group-width: calc(var(--badge-width) - 1.5rem); 
}
a.badge {
	position: relative;
	top: 0px;
	left: 0px;
	display: inline-block;
	height: var(--badge-height);
	width: var(--badge-width); 
	background-color: var(--medium-black);
	border: 1px solid var(--pure-black);
	margin: 0.25rem 0.5rem;
	box-shadow: 5px 5px 8px var(--pure-black);
}
a.badge:hover {
	border-width: 1px;
	border-style: solid;
	background-color: var(--pure-black);
	border-color: var(--nav-black) var(--black) var(--black) var(--nav-black);
}
.badge img {
	position: absolute;
	top: 2px;
	left: 2px;
	height: var(--img-size);
	width: var(--img-size); 
}
.badge .group {
	position: absolute;
	top: 0;
	left: var(--img-size);
	height: var(--badge-height);
	width: var(--group-width);
}
.badge .group:hover {
	top: 1px;
	left: calc(var(--img-size) + 1px);
}
.badge .tagline,
.badge .product {
	position: absolute;
	left: 0;
	width: var(--group-width);
	font-family: var(--sans-serif-font);
	text-align: center;
	color: var(--white);
	box-sizing: border-box;
	margin: 0;
	padding: 0 0 0 0.5rem;
	white-space: pre;
	overflow-x: hidden;
}
.badge .tagline {
	top: 0rem;
	margin-top: -2px;
	font-size: 0.75rem;
	font-weight: 300;
	letter-spacing: 1px;
}
.badge .product {
	top: 0.6rem;
	font-size: 0.75rem;
	font-weight: 700;
}