.middle.pad{width:94%}
li.active{opacity:.7}

#logo-variations img {
	max-width: 80%;
	max-height: 100px;
	height: auto;
	width: auto;
	margin: auto;
	padding:12px;
}
#logo-variations a.modal{margin:14px auto;width:100%;display:block}

.mfp-figure {
	line-height: 0;
	background: #fff;
	padding: 20px;
}

.tints-and-shades{
	position: absolute;
	bottom: 0;
	left:0;
	right:0;
	width: 100%;
}
.hljs-selector-id {
	color: #ffffff;
	position: absolute;
	top: 8px;
	left:8px;
	letter-spacing: 1px;
	background: rgb(0,0,0,.2);
	padding: 4px 12px;
	-webkit-border-radius: 90px;
	-moz-border-radius: 90px;
	border-radius: 90px;
}

.copy-to-clipboard,
.code-badge-copy-icon{display:none;width:100%;height:100%;position:absolute}
.code-badge-copy-icon {
	font-size: 1.2em;
	cursor: pointer;
	padding:12px 8px;
	position: absolute;
	top: 0;
	right: 0;
	text-align:right;
}
.code-badge:hover .copy-to-clipboard {display:block}

.tints-and-shades .column{min-height:40px}
.tints-and-shades .hljs-selector-id{display:none}
.tints-and-shades .code-badge-copy-icon{font-size:85%;text-align:center}





.align-middle {
	display: flex;
	align-items: center;
}
.code-badge{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: row;
	white-space: normal;
	color: white;
	transition: opacity linear 0.5s;
	position: absolute;
}

.code-badge-pre{
	padding: 0;
	margin: 0;
	width: 100%;
}
.hljs{

}
.code-badge-language{display:none}