/*

	Public Side Community Dashboard CSS for WingStuff.com by Glendale Designs: GDCP

*/

/* community navbar */
.x-community-topnav--list { 
	flex-direction: column;
}
@media (max-width: 959px) {
	.x-community-topnav--link {
		font-size: 1.5rem;
		margin-bottom:0.5em;
	}
}
@media (min-width: 960px) {
	.x-community-topnav--container {
		margin: 0;
		padding: 0;
		border-bottom:2px solid #333333;
	}
	.x-community-topnav--list {
		margin: 0;
		padding: 0;
		background-color: #b70000;
		flex-direction: row;
		justify-content: center;
		align-content: center;
		font-size: 1.143rem;
	}
	.x-community-topnav--link {
		color: #ffffff;
		border-left:2px solid #333333;
		margin: 0;
		padding: 0.75rem 1rem;
		transition: all ease-in-out 0.2s;
		line-height: 1.1;
		position: relative;
	}
	.x-community-topnav--link:last-of-type{
		border-right:2px solid #333333;
	}
	.x-community-topnav--link--current {
		color: #b70000;
		background-color:#ffffff;
	}
	.x-community-topnav--link--current:after {
		content: '';
		display: block;
		position: absolute;
		width: 100%;
		height: 4px;
		bottom:-3px;
		left:0;
		background-color: #ffffff;
		z-index: 2;
	}
	
	/* Hovers and animation */
	.x-hover--allowed .x-community-topnav--link:hover {
		background-color: #191919;
	}
	.x-hover--allowed .x-community-topnav--link--current:hover {
		background-color: #ffffff;
	}
}


/* Top Hero on Community Section */
.x-community-hero--container {
	flex-direction: column;
}
.x-community-hero--content {
	background-position: center top;
	background-repeat: no-repeat;
	background-size:cover;
}
.x-community-hero--content-padding {
	padding:2rem 3rem;
}
.x-community-hero--title {
	font-size: 1.5rem;
}

@media (min-width: 960px) {
	.x-community-hero--content-padding {
		padding:85px 0 68px 0;
		margin: 0 auto;
		width:70%;
	}
	.x-community-hero__nocounts .x-community-hero--content-padding {
		padding:65px 0 48px 0;
	}
	.x-community-hero--title {
		font-size: 2rem;
	}
	.x-community-hero--counts {
		padding-top: 2rem;
	}
}



/* SFNT Home Page Community Section  */
.t-sfnt-community--container {
	flex-direction: column;
}
.t-sfnt-community--image {
	display: none;
}
.t-sfnt-community--content {
	
}
.t-sfnt-community--content-padding {
	padding:2rem 3rem;
}
@media (max-width: 959px) {
	.t-sfnt-community--content {
		background: url('/design-assets/theme/home-page-community-right-background.jpg') center center no-repeat;
		background-size:cover;
	}
}
@media (min-width: 960px) {
	.t-sfnt-community {
		/* need to cut off the sides because of the skew GDCP */
		max-width:114%;
		width:114%;
		margin-left:-7%;		
	}
	.t-sfnt-community--container {
		flex-direction: row;
		justify-content:space-between; 
		align-items:stretch;
	}
	.t-sfnt-community--image {
		 display: flex;
		position: relative;
		overflow: hidden;
		border-right:24px solid #b70000;
		border-left:1px solid #000000;
	}
	/*  Help doc on transforming just a background image www.sitepoint.com/css3-transform-background-image/ GDCP */
	.t-sfnt-community--image:before {
		content: "";
		position: absolute;
		width: 130%;
		height: 100%;
		top: 0;
		right: -100px;
		z-index: -1;
		/* background: url('/design-assets/theme/home-page-community-left-side-image.jpg') right center no-repeat; */
		background-size:cover;
		transform: skewX(20deg) !important;
	}
	.t-sfnt-community--content {
		position: relative;
		overflow: hidden;
		border-left:2px solid #ffffff;
		border-right:1px solid #000000;
	}
	.t-sfnt-community--content:before {
		content: "";
		position: absolute;
		width: 130%;
		height: 100%;
		top: 0;
		left: -100px;
		z-index: -1;
		/* background: url('/design-assets/theme/home-page-community-right-background.jpg') left center no-repeat; */
		background-size:cover;
		transform: skewX(20deg) !important;
	}
	.t-sfnt-community--content-padding {
		padding:2rem 10rem 2rem 4rem;
	}
}
@media (min-width: 1440px) {
	.t-sfnt-community--content-padding {
		padding:2rem 20rem 2rem 4rem;
	}
}


/* Community Slanted Search Forms  */
.x-community-slantedsearch--form label {
	cursor: pointer;
}
.x-community-slantedsearch--padding {
	padding:0.5rem 0 0 1rem;
}
.x-community-slantedsearch--skewedblock {
	border-right:5px solid #ffffff;
	border-left:5px solid #ffffff;
}
.x-community-slantedsearch--field-container {
	padding:0.25rem 1rem;
}
.x-community-slantedsearch--field-divider {
	font-size: 0.857rem;
	height: 0.857rem;
	line-height: 0.857rem;
	overflow: hidden;
}
.x-community-slantedsearch--bg-white {
	background-color: #ffffff;
	height: 4rem;
}
.x-community-slantedsearch-flex-item-label--radios {
	padding-top:0.5rem;
	padding-left:0.5rem;
	line-height: 1.3;
}
.x-community-slantedsearch--submitisoutside {
	width:260px; 
	margin:0 auto;
	padding:0.5rem 0 2rem 0; 
	justify-content:space-evenly;
}
@media (min-width: 640px) {
	.x-community-slantedsearch--padding {
		padding:0.5rem 3rem 0 3rem;
	}
	.x-community-slantedsearch-flex-item-label--radios {
		padding-left:1rem;
	}
}


/* Community - Search Filtering */
.x-community-searchfilters--form {
	width: 100%;
	display: block;
	margin: 0;
	padding: 0;
}
.x-community-searchfilters {
	background-color: #333333;
}
.x-community-searchfilters--padding {
	padding: 1rem;
	min-width: 100%;
}
.x-community-searchfilters .c-form-input {
	margin-bottom: 0;
}
.x-community-searchfilters--submit {
	margin-bottom: 0;
	white-space: nowrap;
	width: 100%;
}
.x-community-searchfilters--totals {
	text-align: center;
	margin:0 0 1rem 0;
}
.x-community-searchfilters--items {
	 display: flex;
	flex-direction: column;
	justify-content:space-around; 
	align-items:center;
}
.x-community-searchfilters--breaker {
	 display: flex;
	flex-direction: column;
	justify-content:center; 
	align-items:center;
	flex-basis: 90%;
	max-width: 90%;
	width: 90%;
}
.x-community-searchfilters--fields {
	flex-direction: column;
	flex-wrap: nowrap;
}
.x-community-searchfilters--fields label {
	/* design calls for no labels or floating labels here. I have programmed them in but they'll need a differnt color when "occupied" but turning off until then. GDCP */
	display: none !important;
}
.x-community-searchfilters--select-outer {
	margin-bottom:1rem;
	width:100%;
}
@media (min-width: 640px) {
	.x-community-searchfilters--totals {
		white-space: nowrap;
	}
	.x-community-searchfilters--items {
		flex-direction: row;
		align-items:flex-start;
		flex-grow: 2;
	}
	.x-community-searchfilters--breaker {
		 display: flex;
		flex-direction: column;
		justify-content:center; 
		align-items:center;
		flex-basis: 40%;
		max-width: 40%;
		width: auto;
	}
}
@media (min-width: 960px) {
	.x-community-searchfilters--padding {
		 display: flex;
		justify-content: center;
		min-width: 80%;
	}
	.x-community-searchfilters--totals {
		text-align: right;
		padding-right: 1rem;
		margin:0;
	}
	.x-community-searchfilters--fields {
		flex-direction: row;
		align-items:center;
		justify-content: 
	}
	.x-community-searchfilters--breaker {
		flex-direction: row;
		flex-basis: 100%;
		max-width: 100%;
	}
	.x-community-searchfilters--select-outer {
		border-right:12px solid #333333;
		margin-bottom:0;
	}
	.x-community-searchfilters--submit {
		width:auto;
	}
}



/* Community Results Pagination */
.x-community-dopagination--padding {
	padding: 1rem 0 3rem 0;
}
.x-community-dopagination--fields {
	 display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	justify-content:center; 
	align-items:center;
}
.x-community-dopagination--buttons {
	 display: flex;
	flex-wrap: nowrap;
	justify-content:center; 
	align-items:center;
}
.x-community-dopagination--fields .c-button {
	margin-right:12px;
	padding-left: 1rem;
	padding-right: 1rem;
}
@media (min-width: 640px) {
	.x-community-dopagination--totals {
		padding-right: 1rem;
		margin: 0;
	}
	.x-community-dopagination--fields {
		flex-direction: row;
	}
}


/* Community Dashboard / Hub (page: COMMUNITY) */
.t-page-community .t-main-content-element h1.h1,
.t-page-community .t-main-content-element h1.h2_size {
	margin-top:1rem;
	margin-bottom:2rem;
}
.x-community-dashboard {
	padding-top:1rem;
}


/* Community Reviews Page Overrides */
.x-community-reviews--padding {
	padding: 2rem 0 0 0;
}
.x-community-reviews--padding .x-reviews--review {
	margin:0;
	padding:0;
	border:none;
}


/* Community Members - Page Layout */
.x-community-members--padding {
	padding: 2rem 0 0 0;
}


/* Community Members - Grid Item */
.x-community-membergrid {
	padding-top:1rem;
	padding-bottom:3rem;
}
.x-community-membergrid .x-product-list__inner {
	border-top:4px solid #b70000;
}
.x-community-membergrid--customer_flag {
	position: absolute;
	left: -1px;
	top:-27px;
	width:calc(100% + 2px);
	margin: 0;
	padding: 8px 0;
	line-height: 1;
	text-align: center;
	font-size: 1rem;
	font-weight: 400;
	font-style: italic;
	color:#ffffff;
	background-color:#b70000;
	border:1px solid #990000;
	border-bottom: none;
	border-top-right-radius: 3px;
	border-top-left-radius: 3px;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
	overflow: hidden;
}
.x-community-membergrid--date {
	position: absolute;
	left: -1px;
	bottom:-26px;
	width:calc(100% + 2px);
	margin: 0;
	padding: 8px 0;
	line-height: 1;
	text-align: center;
	font-size: 1rem;
	font-weight: 400;
	font-style: italic;
	color:#ffffff;
	background-color:#333333;
	border:1px solid #333333;
	border-bottom-right-radius: 3px;
	border-bottom-left-radius: 3px;
	border-top-right-radius: 0;
	border-top-left-radius: 0;
	overflow: hidden;
}
.x-community-membergrid--date-txt {
	display: none;
}
.x-community-membergrid--alias {
	line-height: 1.3;
	padding-top:0.5em;
	padding-bottom:0.5em;
}
.x-community-membergrid--location {
	min-height: 38px;
	line-height: 1.3;
}
.x-community-membergrid--divider {
	margin-left:0 !important;
	margin-top: 0.5rem;
	padding-top:0.5rem;
	border-top: 1px solid #cccccc;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-content: center;
	align-items: center;
}


/* Community Single Member Detail Profile Page */
.x-community-profile h1 {
	hyphens: auto;
}
.x-community-profile--counts {
	position: relative;
	flex-direction: row;
	padding: 2rem 0 1rem 0;
	border-radius: 4px;
}

.x-community-profile--avatar-container,
.x-community-profile--alias-container {
	margin-bottom:1rem;
	padding-left:0;
}
.x-community-profile--avatar-container .x-product-list__image-box {
	border-radius: 4px;
}
.x-community-countlink {
	cursor: pointer;
	transition: transform .2s; 
	line-height: 1;
}
.x-hover--allowed .x-community-countlink:hover {
	transform: scale(1.2);
}
.x-community-profile--member-avatar-hero {
	border-radius: 4px;
	border: 1px solid #cccccc;
	overflow: hidden;
}
@media (min-width: 640px) {
	.x-community-profile--counts:before {
		text-align: center;
		font-size: 1rem;
		color: #191919;
		margin-bottom: 0.5em;
		content: "Click to View:";
		font-weight: 700;
		font-style: italic;
		text-transform: none;
		color: #ffffff;
	}
	.x-community-membergrid--date-txt {
		display: inline;
	}
	.x-community-dashboard .x-community-membergrid--date-txt {
		display: none;
	}
	.x-community-membergrid--divider {
		flex-direction: row;
		justify-content: space-between;
	}
	.x-community-membergrid--divider .flex-item {
		padding:0 0.5em;
		white-space: nowrap;
	}
	.flex-item:nth-of-type(1) {
		padding-left: 0;
	}
	.flex-item:nth-of-type(2) {
		padding-right: 0;
	}
	.x-community-profile--counts {
		flex-direction: column;
	}
	.x-community-profile--avatar-container {
		padding-right:1rem;
	}
	.x-community-profile--alias-container {
		padding-left:1rem;
	}
	.x-community-profile--grid-bio {
		padding-right:1rem;
		border-right:1px solid #ccc;
	}
	.x-community-profile--grid-content {
		margin-bottom: 1rem;
	}
}
@media (min-width: 960px) {
	.x-community-dashboard .x-community-membergrid--divider .flex-item {
		font-size: 12px;
	}
	.x-community-profile--counts {
		padding: 1rem 0 0 0;
	}
	.x-community-profile--grid-bio {
		padding-right:0;
		border-right:none;
	}
	.x-community-profile--grid-content {
		padding-left:2rem;
		border-left:1px solid #ccc;
	}
}
.x-community-gallery--item {
	margin-bottom:24px;
	background: #ffffff url('/design-assets/loading.gif') center center no-repeat;
}
.x-community-wishlists--item {
	margin:0 0 1rem 0;
}
.x-community-wishlists .x-community-wishlists--image {
	padding:0.5rem;
}
.x-community-wishlists--viewbutton {
	position:relative;
	top:2em; 
	width:60%;
	margin:0 20%;
}
.x-community-wishlists--imagegrid {
	justify-content: center;
}