/*
 * Friends - Friends List CSS code.
 */

ol.friends-list,
ul.friends-list {
	margin-left:     0;
	display:         flex;
	flex-flow:       column;
	justify-content: flex-start;
}

ol.friends-list > .friend-recurring,
ol.friends-list > .friend-sustaining {
	width:   100%;
	margin:  0;
	padding: 3px 32px;
}

ol.friends-list > .friend-recurring .friend-recurring__wrapper,
ol.friends-list > .friend-sustaining .friend-sustaining__wrapper {
	background:  white;
	margin:      3px 10px;
	font-size:   14px;
	margin-left: 0;
	height:      100%;
	display:     flex;
	align-items: center;
}

.friend-name {
	flex-grow: 1;
}

.friend-twitter svg {
	fill:        #95BF3A;
	padding-top: 0;
	width:       18px;
}

.friend-twitter:hover svg {
	fill: white;
}

.friend-twitter:hover {
	background-color: #95BF3A;
}

.friend-twitter {
	border:          2px solid #95BF3A;
	padding:         5px;
	margin:          0 10px;
	transition:      300ms ease all;
	display:         flex;
	align-items:     center;
	border-radius:   100%;
	justify-content: center;
	flex:            0 0 25px;
	height:          31px;
}

.friend-level-gold, .friend-level-pillar {
	padding:        0 10px;
	color:          white;
	text-transform: uppercase;
	letter-spacing: .06em;
	height:         100%;
	display:        flex;
	align-items:    center;
	font-style:     italic;
	font-size:      .9em;
	font-weight:    900;
}

.friend-level-gold {
	background-color: goldenrod;
}

.friend-level-pillar {
	background-color: cadetblue;
}

ul.friends-list {
	list-style: none;
}

.friend-pillar,
.friend-gold {
	width: 50%;
	text-align: center;
}

.friends-list li.friend-recurring img,
.friends-list li.friend-sustaining img {
	vertical-align: middle;
	margin-right:   6px;
}

.friends-list .friend-pillar img,
.friends-list .friend-gold img {
	margin-bottom: 20px;
}

.friends-list .friend-pillar img {
	max-width: 98%;
}

.friends-list .friend-gold img {
	max-width: 80%;
}

@media (min-width: 550px) {
	ol.friends-list,
	ul.friends-list {
		flex-flow: row wrap;
	}

	ol.friends-list > .friend-recurring,
	ol.friends-list > .friend-sustaining {
		width: 50%;
	}

	ol.friends-list > .friend-recurring .friend-recurring__wrapper, ol.friends-list > .friend-sustaining .friend-sustaining__wrapper {
		margin-left: -30px;
	}
}