/* ==========================================================================
   CSS Reset
   ========================================================================== */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1.15;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}


/* ==========================================================================
   SaSS Replacement Variables
   ========================================================================== */

/*
 
-- Color Palette --
&color-brand: #ff0066;
&color-link: #3399cc;
&color-warn: #ff908b;
$color-moderator #ff0066;  || Standardized to brand redish color
$color-externallink #9fbb58; || Standardized blue but left to test later

#color-lighter-grey: #fafafa;
&color-light-grey: #eee;
&color-dark-grey: #b8b8b8;  [ been using #b8b8b8 in some instances -- will test with sass later ]
&color-darker-grey: #4a4a4a;

$color-box-shadow: #f6f6f6;

-- Type Weights --
$weight-light: 300;
$weight-medium: 400;
$weight-bold: 700;
$weight-black: 900;



-- Layout Patterns --

&card-box-shadow ___ box-shadow: 0 0 4px 1px #eee;


*/


/* ==========================================================================
   GLOBAL HTML ELEMENTS
   ========================================================================== */

body	{
	background: #fff; 
	color: #4a4a4a; /* color-darker-grey */
	font-family: Lato, sans-serif;
	font-size: 1em;
	font-weight: 400; /* weight-medium */
	min-height: 100vh;
}


a	{
	color: #3399cc; /* color-link */
	text-decoration: none;
}
	
	/*
	a:visted	{
		color: #3399cc;
		text-decoration: none;
		}
	*/
	
	a.warn	{
		color: #ff908b !important; /* color-warn */
		fill: #ff908b !important; /* color-warn */
	}

h1	{
	font-size: 1.5em;
	font-weight: 300; /* weight-light */
	margin-bottom: 12px;
	-webkit-text-size-adjust: 100%;
}

h2	{
	color: #8b8b8b; /* color-dark-grey */
	font-size: .65em;
	letter-spacing: .1em;
	text-transform: uppercase;
	-webkit-text-size-adjust: 100%;
}
	
	
h3	{
	color: #4a4a4a;
	line-height: 1.25em;
	-webkit-text-size-adjust: 100%;
}


h4	{
	font-size: .9em;
	line-height: 1em;
	-webkit-text-size-adjust: 100%;
}


h5	{
	border: 2px solid #4a4a4a;
	color: #4a4a4a;
	display: inline-block;
	font-size: .8em;
	font-weight: 700;
	letter-spacing: .2em;
	margin: 0 auto 12px auto;
	padding: 12px 24px;
	text-align: center;
	text-transform: uppercase;
}

p	{
	font-weight: 300;
}
	
	p.fineprint	{
		color: #8b8b8b;
		font-size: .9em !important;
		font-style: italic;
	}
	
	p a	{
		font-weight: 400;
	}

time {
			color: #8b8b8b; /* color-dark-grey: */
			clear: left;
			display: block;
			font-size: .8em !important;
			font-style: italic;
			font-weight: 300;
			margin: 0 0 12px 0;
			text-align: left;
		}
		
	time a {
		font-weight: 400 !important;
	}



/* CARD HEADERS (Feed, Comment, Shop, Listing, Sell/Buy modal)
============================================================== */
 article[class^="feeditem-"] header,
 .comment header,
 .shop header,
 .listing-card > header,
 .offer header	{
	align-items: center;
	display: flex;
	padding: 6px 0;
}

article[class^="feeditem-"] header > a,
.comment header > a,
.shop header > a,
.listing-card > header > a,
.offer header > a,
#form-sell-item .shop header > span	{ 
	align-items: center;
	display: flex;
	flex-shrink: 0;
	height: 50px;
	justify-content: center;
	width: 50px;
}

article[class^="feeditem-"] header svg,
.comment header svg,
.shop header svg,
.listing-card > header svg,
.offer header svg {
	height: 36px;
  width: 36px;
}

article[class^="feeditem-"] header p	{
	font-size: .9em;
	margin: 0 auto 0 0;
}

.comment header div,
.shop header div,
.listing-card > header div,
.offer header div	{
	margin: 0 auto 0 0;
}

article[class^="feeditem-"] header p a,
.comment header h3 a,
.shop header h3 a,
.listing-card > header h3 a,
.offer header h3 a		{
	color: #4a4a4a;
}


/* PROFILE PAGE WITH ICONS & COLORS 
=================================== */
	.royale h1,
	.verified h1,
	.moderator h1	{
		display: inline-block;
		padding-right: 20px;
	}
	
	
	.royale h1 {
		background: url(../_svg/bg-icon-royale.svg) 100% 70% no-repeat;
		
	}
	
	.verified h1 {
		background: url(../_svg/bg-icon-verified.svg) 100% 70% no-repeat;
	}
	
	.moderator h1 {
		background: url(../_svg/bg-icon-moderator.svg) 100% 70% no-repeat;
	}
	
	/* OVERRIDE - profile h2 matches for moderators */
	#profile.moderator h2	{
		color: #ff0066; 
	}




/* AVATAR HEADERS WITH ICONS & COLORS
===================================== */
	.royale h3	{
		background: url(../_svg/bg-icon-royale.svg) 100% 4px no-repeat;
		background-size: 14px 14px;
		display: inline-block;
		padding-right: 18px;
	}
	
	.verified h3	{
		background: url(../_svg/bg-icon-verified.svg) 100% 4px no-repeat;
		background-size: 14px 14px;
		display: inline-block;
		padding-right: 18px;
	}

	.moderator h3	{
		background: url(../_svg/bg-icon-moderator.svg) 100% 4px no-repeat;
		background-size: 14px 14px;
		display: inline-block;
		padding-right: 18px;
	}
	
	


/* REPLY UPDATES - AVATAR HEADERS WITH ICONS & COLORS
====================================================== */
		
		
		.reply.royale h3,
		.reply.verified h3,
		.reply.moderator h3	{
			background-position: 100% 3px;
			background-size: 12px 12px;
			padding-right: 16px;
		}






			
/* VIEWPORT 
=========== */
							@media (min-width: 760px) {
							  
									h1 {
										font-size: 2.25em;
									}
									
									#profile.royale h1,
									#profile.verified h1,
									#profile.moderator h1	{
										padding-right: 26px;
									}
									
									
									#profile.verified h1 {
										background: url(../_svg/bg-icon-verified.svg) 100% 70% no-repeat;
										background-size: 20px 20px;
									}
								   
								  #profile.moderator h1 {
										background: url(../_svg/bg-icon-moderator.svg) 100% 70% no-repeat;
										background-size: 20px 20px;
									}
									
									#profile.royale h1	{
										background: url(../_svg/bg-icon-royale.svg) 100% 70% no-repeat;
										background-size: 20px 20px;
									}
									
									
									
								
							}	


/* ==========================================================================
   Icons and Buttons
   ========================================================================== */



/* 
  ICONS (item actions)
====================== */
a.icon	{
	align-items: center;
	display: flex;
	fill: #b8b8b8; /* color-dark-grey */
	height: 50px;
	position: relative;
	width: 50px;
}

a.icon:hover	{
	fill: #4a4a4a; /* color-darker-grey */
}

	a.icon img	{
		display: block;
		margin: auto;
	}
	
	a.icon svg	{
		display: block;
		height: 50px;
		margin: auto;
		width: 50px;
	}
	
	a.icon strong	{
		border: 1px solid #fff;
		border-radius: 14px;
		font-size: .5em;
		font-weight: 700; /* weight-bold */
		left: 7px;
		min-width: 13px;
		padding: 4px 3px 4px 2px;
		position: absolute;
		text-align: center;
		top: 8px;
	}		
	

/* Icon - inherit color */		
a svg[id^="icon-"]	{
	fill: currentColor;
	}

a:hover svg[id^="icon-"]	{
	fill: currentColor;
	}

/* 
  LINK BUTTONS (collection shop, promo, etc)
================================= */	
a[class^="btn-"]	{
	border-radius: 12px;
	display: inline-block;
	font-weight: 700; /* weight-bold */
	letter-spacing: 1px;
	text-transform: uppercase;
}
	
/* ITEM COLLECTION */
a[class^="btn-collect"]	{
	align-items: center;
	background: #333333;
	border: 1px solid #333333;
	color: #fff !important;
	display: flex;
	fill: #fff;
	font-size: .7em;
	justify-content: center;
	padding: 4px 16px 4px 0;
	transition: 500ms ease-in-out;
	}

a[class^="btn-collect"] svg	{
	height: 38px;
	margin: 0 -3px 0 0;
	width: 38px;
	}


a[class^="btn-collect"]:hover,
a[class^="btn-collect"].active	{
	background: #3399cc;
	border: 1px solid #3399cc;
}


a[class^="btn-collect"].active:hover	{
	background: #4a4a4a; /* temp to black */
	border: 1px solid #4a4a4a; /* temp to black */
	
	/* Old red remove - now black with manage feature
	background: #ff908b; 
	border: 1px solid #ff908b;  */
}


a[class^="btn-collect"].disabled,
a[class^="btn-collect"].disabled:hover		{
background: #fafafa;
border: 1px solid #b8b8b8;
color: #8b8b8b;
cursor: default;
fill: #8b8b8b;
}
		
		
/* SYSTEM BUTTONS */
.btn-link	{
	border: 1px solid #3399cc; /* color-link */
	display: block;
	font-size: .7em;
	padding:  16px 18px; 
	margin: 8px 0 0 0;
	min-width: 90px;
	text-align: center;
	transition: 300ms ease-in-out;

}

.btn-link:hover	{
	background: #3399cc; /* color-link */
	color: #fff;
}

.btn-link.active	{
	background: #3399cc; /* color-link */
	border: 1px solid #3399cc;
	color: #fff;
	opacity: .8;
}

.btn-link.active:hover	{
	background: #4a4a4a; /* color-dark */
	border: 1px solid #4a4a4a;
	color: #fff;
	opacity: 1;
}


.btn-link.disabled	{
	background: #fafafa; /* color-link */
	border-color: #eee;
	color: #8b8b8b;
	cursor: none;
}


			

/* SMALL BUTTONS */
.btn-small	{
	border: 1px #4a4a4a solid; /* color-darker-grey */
	color: #4a4a4a;
	font-size: .5em;
	padding: 6px 8px !important;
	}	
	
.btn-small:hover	{
	background: #4a4a4a; 
	color: #fff; /* color-darker-grey */	
	
	}	

		/* Small button - active */
		.btn-small.active	{
			background: #4a4a4a; 
			color: #fff; /* color-darker-grey */
		}
		
		.btn-small.active:hover	{
			background: #fff; 
			border: 1px #ff908b solid; /* color-link */
			color: #ff908b; /* color-link */
		}
		
		/* Small button - blocked or muted */
		.btn-small.blocked	{
			background: #ff908b !important; 
			border: 1px solid #ff908b !important;
			color: #fff !important;
		}
		
		.btn-small.blocked:hover	{
			background: #fff; 
			border: 1px #ff908b solid; /* color-link */
			color: #ff908b; /* color-link */
		}
		

		/* Small button - nav */
		.btn-small.mobile-nav	{
			align-self: center;
			border: 1px #fff solid;
			color: #fff;
		}
		




/* ==========================================================================
   Loading, Dialog, and Toast
   Lazy loading, Add another dialog, and confirmation Toasts
   ========================================================================== */


/* LAZY LOAD FEED & COLLECTIONS 
=============================== */
.loader	{
	clear: both;
	padding: 60px 0;
}


.loading	{
	background: #4a4a4a;	/* color-darker-grey */ 
	border-radius: 6px;
	margin: 0 auto;
	padding: 12px 16px;
	text-align: center;
	width: 200px;
}
		
	.loading svg {
	  height: 24px;
	  width: 24px;
	  margin: 0 auto 6px auto;
	  display: block;
	}
	
	#loader svg path,
	#loader svg rect{
	  fill: #fff;
	}
	
	.loading label	{
		color: #fff;
		font-size: .7em;
		text-transform: uppercase;
	}


/* ADDDING ITEMS TO LIBRARY (ADD ANOTHER) 
========================================= */
.dialog	{
	align-items: center;
	background: #fafafa;
	border: 1px solid #eee; /* color-light-grey */
	clear: both;
	display: flex;
	margin: 12px 12px 18px 12px;
	max-width: 500px;
	padding: 8px 12px;
	
}

	.dialog h3	{
		align-items: center;
		display: flex;
		margin: 0;
	}
	
	.dialog svg {
		height: 36px;
		margin: 0 6px 0 -6px;
		width: 36px;
	}
	
	.dialog .btn-small	{
		margin: 0 0 0 auto;
	}

		.dialog .btn-small:hover,
		.dialog .btn-small:active	{
			border: 1px solid #4a4a4a;
			color: #4a4a4a;
		}
		
		#form-item .dialog h3	{
			padding: 0 !important;
			text-transform: none !important;
		}


/* ACTION CONFIRMATION (bottom bar) 
=================================== */
#toast-dialog	{
	align-items: center;
	background: #4a4a4a;
	border-radius: 4px;
	bottom: 0;
	color: #fff;
	display: flex;
	fill: #fff;
	margin: 0 8px 8px 8px;
	opacity: .9;
	padding: 4px 12px 6px 0;
	position: fixed;
	width: calc(100% - 28px);
}

#toast-dialog:hover	{
	opacity: 1;
}

#toast-dialog.warn {
	background: #ff908b;
	color: #fff !important;
}

	#toast-dialog svg	{
		height: 48px;
		width: 48px;
	}
	
	#toast-dialog a	{
		color: #fff;
	}
	
	#toast-dialog p	{
		font-size: .9em;
		margin: 0;
	}
	
	#toast-dialog p strong	{
		display: block;
		font-size: 1em;
		font-weight: 700;
	}
	
	#toast-dialog a.btn-small	{
		border: 1px solid #fff;
		color: #fff;
		margin: 0 0 0 auto;
	}
	
	#toast-dialog a.btn-small:hover	{
		background: #fff;
		color: #4a4a4a;
	}
	
	
/* VIEWPORT 
=========== */
						@media (min-width: 600px) {
							
								#toast-dialog {
									bottom: 12px;
									right: 12px;
									width: 380px;
								}
								
								.dialog	{
									margin: 12px auto 18px auto;
								}
								
							
						}
	

/*==========================================================================
	Tabs (Home feed, item & profile subsections, misc sections
========================================================================== */	

.tabs-wrapper	{
	background: #fafafa; /* color-lighter-grey */
	border-bottom: 1px solid #eee; /* color-dark-grey */
	border-top: 1px solid #eee; /* color-light-grey */
	clear: both;

}

	.tabs	{
		align-items: center;
		border-bottom: 1px solid #eee;
		display: flex;
		justify-content: space-around;
	}
		
	.tabs a	{
		align-items: baseline;
		color: #8b8b8b; /* color-dark-grey */
		border-bottom: 3px solid #fafafa; /* color-lighter-grey */
		display: block;
		font-size: .7em;
		fill: #8b8b8b; /* color-dark-grey */
		letter-spacing: .1em;
		padding: 14px 4px 14px 4px;
		text-align: center;
		text-transform: uppercase;
	}
		
		.tabs a.active	{
			color: #ff0066; /* &color-brand */
			fill: #ff0066; /* &color-brand */
			border-bottom: 3px solid #ff0066; /* &color-brand */
		}
		
		.tabs a:hover	{
			color: #ff0066; /* &color-brand */
			fill: #ff0066; /* &color-brand */
		}

	.tabs a strong {
		display: block;
		font-size: 2.25em;
		font-weight: 900;
		margin-bottom: 2px;
		text-transform: none;
	}

	.tabs a svg	{
		height: 50px;
		margin: -16px 0 -10px 0;
		width: 50px;
	}	


/*==========================================================================
	Null content (collection, comments, shop, notifications, search)
========================================================================== */
#null-content	{
	margin: 24px auto 36px auto;
	max-width: 300px;
	text-align: center;
}

	#null-content svg {
		fill: #eee;
		height: 200px;
		width: 200px;
	}
	
	#null-content.warn svg {
		fill: #ff908b;
	}
	
	#null-content h3	{
		color: #8b8b8b;
		font-size: 1.2em;
		margin: -24px 0 8px 0;
		padding: 0 !important;
		text-transform: none !important;
	}
	
		#null-content.warn h3 {
		color: #ff908b;
		}
	
	#null-content p	{
		line-height: 1.3em;
		margin: 0 0 16px 0;
	}	

	#null-content p strong	{
		font-weight: 500;
	}

/* ==========================================================================
   Input Styles
   ========================================================================== */

input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  display: none;
}
																	/* FIX */
																  input:-webkit-autofill,
																  input:-webkit-autofill:hover,
																  input:-webkit-autofill:focus textarea:-webkit-autofill,
																  textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus,
																  select:-webkit-autofill,
																  select:-webkit-autofill:hover,
																  select:-webkit-autofill:focus,
																  input:-internal-autofill-selected {
																    background: #fff !important;
																    -webkit-text-fill-color: #4a4a4a !important;
																    -webkit-box-shadow: 0px 0px 0px 2px #b8b8b8 inset !important;
																    transition: background-color 5000s ease-in-out 0s !important;
																  }
																
																
																
																/* FIX */
																input:-webkit-autofill,
																input:-webkit-autofill:hover, 
																input:-webkit-autofill:focus
																input:-webkit-autofill, 
																textarea:-webkit-autofill,
																textarea:-webkit-autofill:hover
																textarea:-webkit-autofill:focus,
																select:-webkit-autofill,
																select:-webkit-autofill:hover,
																select:-webkit-autofill:focus {
																  border: 0;
																  -webkit-text-fill-color: #4a4a4a;
																  -webkit-box-shadow: 0 0 0px 1000px #fff inset;
																  transition: background-color 5000s ease-in-out 0s;
																  background-color: transparent;
																}




input[type="checkbox"]	{
	border: 1px solid #b8b8b8;
	height: 14px;
	margin: 0 4px 0 0;
}

	.checkbox	{
		display: block;
		color: #8b8b8b;
		font-size: .9em;
		margin: 0 0 12px 0;
	}  			
	
	.checkbox:hover label	{
		color: #4a4a4a;
		cursor: pointer;
		
	}



.input-style {
  display: block;
  margin-bottom: 16px;
  position: relative;
}

.input-style a	{
	font-size: .8em;
	position: absolute;
	right: .7em;
	top: 2em;
	z-index: 1000;
}

	.input-sml-wrap,
	.input-med-wrap,
	.input-sell-wrap	 {
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
	}
	
	.input-sml	{
		width: 48%;
	}
	
																																		/* FIX - sell modal override */
																																		.input-sell-wrap .input-sml	{
																																			width: 31%;
																																		}
	
	.input-med	{
		width: 100%;
	}


	


/* FORM ELEMENTS (INPUT, SELECT, TEXTAREA)
==========================================	*/

/* input */
.input-style input {
  background: #fafafa;
  border: none;
  color: #4a4a4a;
  font-family: Lato, sans-serif;
  font-size: 1em;
  font-weight: 700;
  outline: none !important;
  padding: 1.8em .5em .8em .8em;
  position: relative;
  width: 100%;
          box-shadow: 0px 0px 0px 4px #eee;
  -webkit-box-shadow: 0px 0px 0px 4px #eee;
     -moz-box-shadow: 0px 0px 0px 4px #eee;
  transition: box-shadow 0.3s linear;
  -webkit-appearance: none;
     -moz-appearance: none;
      appearance: none;
  -ms-appearance: none;
  -webkit-border-radius: 0;  
     -moz-border-radius: 0;    
          border-radius: 0;   
}




/* select */
.input-style select	{
  background: #fafafa;
  border:none;
  color: #8b8b8b;
  font-family: Lato, sans-serif;
  font-size: 1em;
  height: 60px;
  outline: none !important;
  padding: .8em 0 0 .8em;
  width: 100%;
          box-shadow: 0px 0px 0px 4px #eee;
  -webkit-box-shadow: 0px 0px 0px 4px #eee;
     -moz-box-shadow: 0px 0px 0px 4px #eee;
  transition: box-shadow 0.3s linear;
  -webkit-appearance: none;
     -moz-appearance: none;
      appearance: none;
  -ms-appearance: none;
  -webkit-border-radius: 0;  
     -moz-border-radius: 0;    
          border-radius: 0;
   
  background-image:
    linear-gradient(45deg, transparent 50%, gray 50%),
    linear-gradient(135deg, gray 50%, transparent 50%);
  background-position:
    calc(100% - 20px) calc(1.6em + 2px),
    calc(100% - 15px) calc(1.6em + 2px);
  background-size:
    5px 5px,
    5px 5px;
  background-repeat: no-repeat;
}

/* textarea */
.input-style textarea	{
  background: #fafafa;
  border: none;
  color: #4a4a4a;
  font-family: Lato, sans-serif !important;
  font-size: 1em !important;
  font-weight: 400; /* weight-medium */
  height: 120px;
  outline: none !important;
  overflow: auto;
  padding: 1.8em .5em .8em .8em;
  position: relative;
  width: 100%;
          box-shadow: 0px 0px 0px 4px #eee;
  -webkit-box-shadow: 0px 0px 0px 4px #eee;
     -moz-box-shadow: 0px 0px 0px 4px #eee;
  transition: box-shadow 0.3s linear;
  -webkit-appearance: none;
     -moz-appearance: none;
      appearance: none;
  -ms-appearance: none;
  -webkit-border-radius: 0;  
     -moz-border-radius: 0;    
          border-radius: 0;

}


select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}


/* input element valid state */
.input-style input:valid,
.input-style textarea:valid { 
  				background: #fff;
          box-shadow: 0px 0px 0px 2px #b8b8b8;
  -webkit-box-shadow: 0px 0px 0px 2px #b8b8b8;
     -moz-box-shadow: 0px 0px 0px 2px #b8b8b8;
}

.input-style select:valid { 
  color: #4a4a4a;
  background: #fff;
  font-weight: 700;
          box-shadow: 0px 0px 0px 2px #b8b8b8;
  -webkit-box-shadow: 0px 0px 0px 2px #b8b8b8;
     -moz-box-shadow: 0px 0px 0px 2px #b8b8b8;
  
  background-image:
    linear-gradient(45deg, transparent 50%, gray 50%),
    linear-gradient(135deg, gray 50%, transparent 50%);
  background-position:
    calc(100% - 20px) calc(1.6em + 2px),
    calc(100% - 15px) calc(1.6em + 2px);
  background-size:
    5px 5px,
    5px 5px;
  background-repeat: no-repeat;
  outline: 0;
}

/* input element focus state */
.input-style input:focus,
.input-style textarea:focus { 
  background: #fff;
  color: #3399cc;
          box-shadow: 0px 0px 0px 2px #3399cc;
  -webkit-box-shadow: 0px 0px 0px 2px #3399cc;
     -moz-box-shadow: 0px 0px 0px 2px #3399cc;
}

.input-style select:focus { 
  color: #4a4a4a;
  background: #fff;
  font-weight: 700;
          box-shadow: 0px 0px 0px 2px #3399cc;
  -webkit-box-shadow: 0px 0px 0px 2px #3399cc;
     -moz-box-shadow: 0px 0px 0px 2px #3399cc;
  
  background-image:
    linear-gradient(45deg, transparent 50%, gray 50%),
    linear-gradient(135deg, gray 50%, transparent 50%);
  background-position:
    calc(100% - 20px) calc(1.6em + 2px),
    calc(100% - 15px) calc(1.6em + 2px);
  background-size:
    5px 5px,
    5px 5px;
  background-repeat: no-repeat;
  outline: 0;
}




/* input element labels */
.input-style label {
  color: #8b8b8b;
  cursor: text;
  display: block;
  font-size: 1em;
  font-weight: 400;
  left: 1em;
  position: absolute;
  top: 1.3em; 
  text-align: left;
  transition: all .15s ease-in-out;
}

	.input-style label em	{
		display: none;
	}

.input-style input:valid + label,
.input-style input:focus + label,
.input-style select:valid + label,
.input-style select:focus + label,
.input-style textarea:valid + label,
.input-style textarea:focus + label { 
  color: #8b8b8b;
  font-size: .8em;
  top: .7em;
  left: 1em;
  transition: all .20s ease-in-out;
}

.input-style input:focus + label em,
.input-style select:focus + label em,
.input-style textarea:focus + label em,
.input-style textarea:focus + label em	{
	display: inline-block;
	font-style: italic;
	font-size: .8em;
}

::-webkit-input-placeholder { color: #8b8b8b; font-size: 1em; font-weight: 300; }
:-moz-placeholder { color: #8b8b8b; font-size: 1em; font-weight: 300; }
::-moz-placeholder { color: #8b8b8b; font-size: 1em; font-weight: 300; }
:-ms-input-placeholder { color: #8b8b8b; font-size: 1em; font-weight: 300; }


																																															
																																															/* FIX -- INPUT ERRORS
																																															==============	*/
																																															.input-error input,
																																															.input-error select,
																																															.input-error textarea	{
																																																      background: #ffe5e5;
																																																      box-shadow: 0px 0px 0px 2px #f9461c;
																																															  -webkit-box-shadow: 0px 0px 0px 2px #f9461c;
																																															     -moz-box-shadow: 0px 0px 0px 2px #f9461c;
																																															}
																																															
																																															.input-error input:valid,
																																															.input-error textarea:valid,
																																															.input-error input:focus,
																																															.input-error textarea:focus  {
																																																				background: #ffe5e5;
																																															          box-shadow: 0px 0px 0px 2px #f9461c;
																																															  -webkit-box-shadow: 0px 0px 0px 2px #f9461c;
																																															     -moz-box-shadow: 0px 0px 0px 2px #f9461c;
																																															}
																																															
																																												
																																															.input-error label	{
																																															  color: #ff908b;
																																															}
																																															
																																															


/* SPECIAL INPUT - $PRICE
=========================	*/
	.input-price label:after,
	.input-handle label:after
	{
	    color: #8b8b8b;
	    content: attr(data-placeholder);
	    font-size: 1.2em;
	    left: 0;
	    opacity: 0;
	    position: absolute;
	    pointer-events: none;
	    top: 1.3em;
	    z-index: 10;
	    transition: opacity .40s ease-in-out;
	}
	
	.input-price input:valid + label:after,
	.input-price input:focus + label:after,
	.input-handle input:valid + label:after,
	.input-handle input:focus + label:after {
		opacity: 1 !important;
	}
	
	
	.input-price input,
	.input-handle input	{
		padding: 1.7em .5em .85em 1.6em;
	}

	
/* IMAGE UPLOAD
===============	*/	
#item-image-wrapper	{
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	padding: 0 0 18px 0;
}
	
	.item-image	{
		align-self: stretch;
		border: 1px solid #eee;
		border-radius: 8px;
		padding: 12px 4px;
		position: relative;
		margin: 0 6px 6px 0;
		text-align: center;
		width: 48%;
		
	}
	
		.item-image:hover	{
			box-shadow: 0 0 3px 1px #eee;
		}
	
	
	.item-image img	{
		height: 100%;
		width: 100%;
	}
	
	
	.item-image a.image-draggable	{
		cursor: move;
		display: block;
	}
	
	.item-image a.warn	{
		background: #4a4a4a;
		border-radius: 16px;
		display: block;
		height: 28px;
		position: absolute;
		right: 4px;
		top: 4px;
		width: 28px;
	}
	
		.item-image a.warn svg	{
			fill: #fff;
			height: 28px;
			width: 28px;
		}
	
	.item-image.progress	{
		background: #fafafa;
	}
	
	.item-image.progress svg	{
		height: 100%;
		margin: -18px 0 -24px 0;
		width: 100%;
	}

	#input-upload	{
			display: none;
		}

/* UPLOADING IMAGE STYLES */
.image-upload	{
	align-items: center;
	border: 1px dashed #3399cc;
}
		
	.image-upload:hover,
	.item-image-sell:hover	{
		box-shadow: 0 0 2px 1px #3399cc;
	}
	
	.image-upload a	{
		display: block;
	}
	
	.image-upload svg	{
		fill: #3399cc;
		height: 100px;
		margin: 0 -4px -12px -8px;
		width: 100px;
	}
	
	.image-upload p,
	.item-image-sell p	{
		color: #4a4a4a;
		margin: 0 !important;
	}
	
	.image-upload strong,
	.item-image-sell strong	{
		color: #3399cc;
		display: block;
		font-weight: 500;
	}
	
	.image-upload em,
	.item-image-sell em	{
		font-size: .9em;
		font-style: italic;
	}
	
	.image-progress	{
		border: 1px solid #b8b8b8;
	}

	.image-progress:hover	{
		box-shadow: none !important;
	}
		

/* One-time initial image upload sell item */
.item-image-sell {
	margin: 0 0 12px 0;
	
	width: 100%;
}

.item-image-sell a	{
	align-items: center;
	border: 1px dashed #3399cc;
	display: flex;
	justify-content: center;
	
}

	.item-image-sell svg	{
		fill: #3399cc;
		height: 60px;
		margin: 0 0 0 -24px;
		width: 60px;
	}


/*==========================================================================
  Global styles
  Styles for repeated backgrounds, layouts, elements
  ========================================================================== */
	
	/* Top margin for fixed site header */
	main {
		padding-top: 50px;
		}
	
	
	/* Clear floats - Used feeditem (comment & event) */
	.group::after {
		content: "";
		clear: both;
		display: table;
	} 
	
  /* <main> bg for feed, rep, stats, shop activity details */
  .bg-color	{
		background: #fafafa;
		min-height: calc(100vh - 180px);
	}	 
  
  /* sets max-width for container on desktop */
  .max	{
		margin: 0 auto;
		max-width: 1000px;
		padding: 0 12px;
  }
	
	/* profile avatar */
	.avtr {
		border: 2px solid #fff;
    border-radius: 50%;
    height: 36px;
    width: 36px;
	}
	
	/* three dot action menu
	Clicking on any action link will append
	class 'active' to the action-menu directly below	
	*/
	.actions	{
		color: #8b8b8b; /* color-dark-grey */
		fill: #8b8b8b; /* color-dark-grey */
		flex-shrink: 0;
		height: 36px;
		margin: 0;
		padding: 0;
		text-align: center;
		text-transform: uppercase;
		width: 36px;
	}
	
	.actions:hover,
	.actions.active	{
			color: #4a4a4a;
			fill: #4a4a4a; /* color-darker-grey */
		}
		
	.actions svg	{
			height: 36px;
			width: 36px;
		 }	
	
	
	/* action button copy (profile & item detail */
 	.actions span	{
			display: none;
		}
 	
 	.actions-copy	{
		height: 50px;
		width: 50px;
		
		/*
		float: right;
		margin: 4px -12px 0 0;
		
		*/
		
	}
 	
 	.actions-copy svg	{
		height: 28px;
		width: 28px;
	}

/*==========================================================================
  Generic white container for bg-color background
========================================================================== */

.container	{
	background: #fff;
	border: 1px solid #eee;
	box-shadow: 0 0 3px 1px #f6f6f6; 
	margin: 0 auto 36px auto;
	max-width: 600px;
	padding: 18px;
	position: relative;
}

.container div	{
	width: 100%
}

.container h5	{
	font-size: .6em;
	margin: 0 auto 18px auto 
}

.container p	{
	line-height: 1.3em;
	margin-bottom: 14px;
	max-width: 620px;
}

.container p strong	{
	font-weight: 700;
}

.two-col	{
		padding: 24px 0 !important;
	}




/* VIEWPORT 
=========== */
					   @media (min-width: 600px) {
								
								.max	{
									padding: 0 18px;
									position: relative;
								}
								
								.container	{
									width: 564px;
								}
									
							}
							
							
							@media (min-width: 760px) {
				 
								.actions-copy {
									margin: 4px 0 0 16px;
								}
								 
								.actions span	{
									display: block;
									font-size: .6em; 
								}

						
							}	
							
							@media (min-width: 960px) {	

								.container	{
									display: flex;
									padding: 24px 36px;
									max-width: inherit;
									width: 100%;
								}	 
								
								.two-col	{
									padding: 0 18px 24px 42px !important;
								}
			   
			   
							}


/* ==========================================================================
   Action Menus
   ========================================================================== */ 		
.action-menu	{
	border: 1px solid #eee;
	bottom: 0;
	box-shadow: 0 0 3px 1px #f6f6f6; 
	display: none;
	position: fixed;
	right: 0;
	width: 100%;
	z-index: 100;
}

/* Add 'active' class to action-menu
	 from .actions link to activate */		
.action-menu.active	{
	display: block;
}	


	.action-menu li	{
			background: #fff;
		}
	
	.action-menu a,
	.action-menu a:visited	{
		align-items: center;
		background: #fff;
		border-bottom: 1px solid #eee;
		border-radius: 0;
		color: #4a4a4a; 
		fill: #4a4a4a; 
		font-size: .7em;
		font-weight: 700; 
		display: flex;
		justify-content: space-between;
		height: 50px;
		letter-spacing: 1px;
		padding: 4px 4px 4px 16px;
		text-transform: uppercase;
		vertical-align: middle;
		
	}

	.action-menu a:hover,
	.action-menu a:active	{
		background: #3399cc; 
		color: #fff; 
		fill: #fff; 
	}
	
	
	.action-menu svg	{
		height: 50px;
		margin: 0 0 0 auto;
		width: 50px;
	}


/* COLOR VARIATIONS 
============================= */

/* Verify profile */
.action-menu a.positive	{
	color: #3399cc;
	fill: #3399cc;
}
			
.action-menu a:active.positive,
.action-menu a:hover.positive	{
	background: #3399cc;
	color: #fff;
	fill: #fff;
}

/* Delete, Reject, Suspend */
.action-menu a:active.warn,
.action-menu a:hover.warn	{
	background: #ff908b; 
	color: #fff !important;
	fill: #fff !important; 
}

/* Verified profile, locked item */
.action-menu a.disabled,
.action-menu a:hover.disabled	{
	background: #fafafa;
	color: #8b8b8b; 
	fill: #8b8b8b; 
	cursor: default;
}

/* Cancel action-menu on mobile */
.action-menu a.cancel	{
	color: #ff908b;
	display: block;
	line-height: 50px;
	text-align: center;
}

.action-menu a:hover.cancel	{
	background: #ff908b;
	color: #fff;
}


/* COLLECTION MENU FROM CARDS 
============================= */
.action-menu.action-collect	{
	border: 0;
	border-top: 1px solid #eee;
	box-shadow: 0 0 0 0 #fff !important;
}		

.action-menu.action-collect	a {
	justify-content: flex-start;
	padding: 4px 4px 4px 0;
}

	.action-menu.action-collect	a.active {
		background: #3399cc;
		color: #fff;
		fill: #fff;
	}
	
	.action-menu.action-collect	a.active:hover {
		background: #4a4a4a;
	}

.action-menu.action-collect svg	{
	margin: 0;
}


/* VIEWPORT 
=========== */
							@media (min-width: 600px) {
										
										.action-menu	{
											bottom: auto;
											position: absolute;
											top: 48px;						/* ITEM PAGE; */
											right: 12px;
											width: 260px;
										}	
										
											/* OVERRIDE FOR PROFILE PAGE */
											#profile .action-menu	{
												top: 68px;
											}
											
											/* OVERRIDE FOR FEED, COMMENT, SHOP */
											article[class^="feeditem-"] .action-menu,
											.comment .action-menu,
											.shop .action-menu
												{
												right: 0;
											}
										
										.reply .action-menu	{
											top: 24px;
											right: 12px;
										}

										.action-menu a	{
												padding: 0 2px 0 16px !important;
											}

										.action-menu a.cancel	{
											display: none;
										}
										
										/* Non-mobile .card nested action-menu */
										.action-menu.action-collect a	{
												padding: 0 2px 0 0 !important;
											}
										
										#view.grid .action-menu.action-collect	{
											bottom: 0;
											right: 0;
											top: auto;
											width: 100%;
										}
										
										#view.list .action-menu.action-collect	{
											right: 0;
											top: 110px;
											width: 100%;
										}
										
										
							}

							
							
/*==========================================================================
  Global header & navigation
========================================================================== */

#site	{
	background-image: linear-gradient(-225deg, #1b1b1b 0%, #3d3d3d 62%, #4a4a4a 100%);
	/* 
	background: #4a4a4a;
	background-image: linear-gradient(-225deg, #ff0066 0%, #d41872 62%, #a445b2 100%);
	*/
	position: fixed;
	width: 100%;
	z-index: 1000;
	}

.logo	{
	fill: #fff;
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
}	


#site nav	{
	align-items: center;
	display: flex;
}

	
.logo svg	{
	height: 30px;
	width: 120px; 
	}	


#nav-site	{
	display: none;
}
	
	#nav-site li a	{
		color: #fff;
		display: block;
		font-size: .8em;
		opacity: .7;
		padding: 8px 24px;
		text-transform: uppercase;
		transition: 300ms ease-in-out;
		vertical-align: middle;
	}
	
	#nav-site li a:hover,
	#nav-site li a.active {
		opacity: 1;
	}

#nav-actions	{
	align-items: center;
	display: flex;
	margin: 0 -12px 0 auto;
}
		
		#nav-actions .profile	{
			display: none;
		}
		
		#nav-actions .btn-small	{
			display: block !important;
		}
								
		/* SIZE OVERRIDE FOR NAVIGATION */
		#nav-actions .avtr	{
			height: 28px;
			width: 28px;
		}
		
		
	#nav-actions .icon	{
		fill: #fff;
	}
		
	#nav-actions .icon strong	{
		background: #ff0066;
		border: #ff0066;
		color: #fff; 
	}
		
		
	#nav-actions .active	{
		fill: #4a4a4a;
		background: #fafafa;
	}
		
	#nav-actions .profile.active	{
		background: #fff;
	}
		
		
	#nav-actions .icon.active strong	{
		color: #fff;
		background: #4a4a4a;
	}


/* MOBILE MENU
	 Click mobile menu button adds class '.mobile-menu' to the header 
=================================================================== */

	.mobile-menu	{
		height: 120px !important;
	}
	
	.mobile-menu #nav-site	{
		display: flex;
		left: 50%;
		/*
		max-width: 300px;
		*/
		position: absolute;
		top: 72px;
		transform: translateX(-50%);
	}
	
	.mobile-menu + #sitenav-actions	{
		padding-top: 120px;
	}
	
	
	
	

/* VIEWPORT 
=========== */

							@media (min-width: 600px) {
							  
								  .logo {
									  position: relative;
									  left: 0;
									  transform: translateX(0%);
								  }
								 
									.btn-small.mobile-nav	{
										display: none;
									}
									
									
									#nav-site	{
										display: flex;
									}
									
									#nav-actions {
										margin: 0 0 0 auto;
									}
									
									#nav-actions .profile	{
										align-items: center;
										display: flex;
									}
								
							}	




/*==========================================================================
	Global footer
========================================================================== */

  .footer {
	  
  }
  
  footer.links	{
	  border-top: 1px solid #eee;
	  color: #8b8b8b; /* color-dark-grey */
	  display: none;
	  font-size: .8em;
	  margin: 0 auto 24px auto;
	  max-width: 600px;
	  padding: 18px 0 0 0; 
  }
   
  footer.links svg {
	  flex-shrink: 0;
	  margin-right: 12px;
  } 

   
  footer.links a	{
	  color: #8b8b8b; /* color-dark-grey */
	  line-height: 1.8em
  }
   
   footer.links a:hover	{
	   color: #4a4a4a; /* color-darker-grey */
	}   
	
	
			/* FIX -- RENAME -- FOOTER FOR GRID, LEGAL, SUPPORT, & OTHERS */
			footer.grid-footer	{
				border-top: 2px #eee solid;
				display: flex;
				flex-direction: row;
				justify-content: center;
				max-width: inherit;
				padding: 24px 12px;
			}
																																							
																																							
			/* FIX -- RENAME -- FOOTER FOR GRID, LEGAL, SUPPORT, & OTHERS */
			footer.grid-footer .profile-social	{
				justify-content: left !important; 
				margin: 0 0 0 -12px;
				width: inherit;*/
				
			}																																				
																																							
	

/* VIEWPORT 
=========== */			
						@media (min-width: 600px) {
							
								
							
						}	
							
							
						@media (min-width: 960px) {
							  
							footer.links	{
							  display: flex;
							  flex-direction: row;	   
							}
							
							footer.links svg {
								min-width: 80px;
							}
							
							footer.grid-footer .links-content	{
								display: flex;
							}
							
							footer.grid-footer .links-content div	{
								padding-right: 60px;
							}
							
						}							
							
   
   
   
     
/*==========================================================================
  Homepage and profile feeds
  Feed layout and post formats
  ========================================================================== */   

  .feed-wrapper	{
	  padding: 24px 0 36px 0 !important;
	  position: relative;
  }

	#feed-sidebar	{
	  margin: 0 auto;
	  max-width: 600px;
	   
	 }


/* HOMEPAGE TAB OVERRIDE FOR FIXED HEADER 
========================================= */ 
	main.home .tabs-wrapper {
		position: fixed;
		width: 100%;
		z-index: 1000;
		}
	
	main.home .tabs-wrapper .tabs	{
		border-bottom: 0; /* color-dark-grey */
		justify-content: flex-start;
	}
																												
	main.home .tabs-wrapper .tabs li	{
		margin: 0 18px 0 0;
	}
	
	main.home .feed-wrapper	{
		padding: 68px 0 36px 0 !important;
	}


/* FEEDITEM LAYOUT 
=================== */ 
article[class^="feeditem-"]	{
	background: #fff;
  border-bottom: 1px solid #eee; /* color-dark-grey */
  box-shadow: 0 0 3px 1px #f6f6f6; /* color-box-shadow */ 
  margin: 0 auto 18px auto;
  max-width: 600px;
  position: relative;
	
}


/* FEEDITEM CONTENT 
=================== */ 
	article[class^="feeditem-"] section	{
		padding: 12px 16px 6px 16px;
	}
		
		article[class^="feeditem-"] section img	{
			height: auto;
			width: 100%;
		}
		
		article[class^="feeditem-"] section h2	{
			margin-bottom: 4px;
		}
		
			article[class^="feeditem-"] section h2 a	{
				color: #8b8b8b;
			}
		
		article[class^="feeditem-"] section h3	{
			font-size: 1.2em;
			line-height: 1.25em;
			margin-bottom: 8px;
		}
		
			article[class^="feeditem-"] section h3 a	{
				color: #4a4a4a;
			}

		article[class^="feeditem-"] section h4	{
			color: #8b8b8b;
			line-height: 1.4em;
			margin-bottom: 18px;
		}
		
		
		article[class^="feeditem-"] section p	{
			line-height: 1.4em;
			margin-bottom: 6px;
		}
		
			article[class^="feeditem-"] section p a	{
				font-style: italic;
			}
	
		article[class^="feeditem-"] section time	{
			margin: 0 0 18px 0;
			}
	

/* FEEDITEM SPECIALIZED CONTENT LAYOUT 
====================================== */ 

	/* Collection (library, have, want, sell, and pinned  */
	.feeditem-collection section ul	{
		display: flex;
		flex-flow: wrap;
		justify-content: space-between;
		margin: 0 0 18px 0;
	}

	.feeditem-collection section li	{
		margin: 0 auto 12px auto;
		width: 44%;
	}
	
	/* OVERRIDE - Collection indicator placement */
	.feeditem-collection a span	{
		margin: 2px 0 0 2px !important;
	}
	
	
	
	/* Instagram & news posts  */
	.feeditem-instagram header + a img,
	.feeditem-news header + a img	{
		width: 100%;
	}
	
	/* Events  */
	.feeditem-event section img	{
		border-radius: 50%;
    float: right;
    height: 150px !important;
    margin: 0 0 18px 18px;
    width: 150px !important;
	}
	
	/* Following */
	.feeditem-following section ul	{
		display: flex;
		flex-flow: wrap;
		margin: 0 0 18px 0;
	}
	
	.feeditem-following section li	{
		margin: 8px;
	}
	
	
	.feeditem-following section img	{
		border: 2px solid #fff;
    border-radius: 50%;
    height: 48px !important;
    width: 48px !important;
	}
	
	/* Comment */
	.feeditem-comment section img	{
		float: right;
    height: 150px !important;
    margin: 0 0 16px 16px;
    width: 150px !important;
	}
	
	.feeditem-comment section strong	{
		font-weight: 500;
	}
		
	.feeditem-comment footer form	{
		align-items: center;
		border-top: 1px solid #eee;
		display: flex;
		
	}
	
	.feeditem-comment footer input	{
		border: 0;
		font-family: Lato, sans-serif;
		font-size: 1em;
		font-weight: 300;
		padding: 16px;
		outline: 0;
		width: 100%;
	}
	
	
	.feeditem-comment footer button	{
		background: transparent;
		border: 0;
		color: #3399cc;
		font-size: .9em;
		font-weight: 500;
		padding: 0 16px;
		opacity: .3;
		 -webkit-appearance: none;
     -moz-appearance: none;
      appearance: none;
  -ms-appearance: none;
  -webkit-border-radius: 0;  
     -moz-border-radius: 0;    
          border-radius: 0 
	}
	
	.feeditem-comment footer input:focus + button	{
		opacity: 1;
	}
	
	
	
	
	/* Joined & Badge Earned */
	.feeditem-join section,
	.feeditem-earned section	{
		text-align: center;
	}
	
	.feeditem-join section p,
	.feeditem-earned section p	{
		margin: 0 auto 18px auto !important;
		max-width: 440px;
	}
	
	.feeditem-join section img,
	.feeditem-earned section svg	{
    height: 300px !important;
    margin: 0 0 18px 0;
    width: 300px !important;
	}

	.feeditem-join section ul	{
		justify-content: center !important;
    margin: 0;
    width: inherit;
	}




	

/* FEEDITEM LINK STYLES 
======================= */
	a.pinned	{
		color: #4a4a4a;
	}

	.more	{
		border: 1px solid #3399cc; /* color-link */
		border-radius: 12px;
		display: block;
		font-size: .65em;
		margin: 0 auto 12px auto !important;
		max-width: 150px;
		padding: 6px 12px;
		text-align: center;
		text-transform: uppercase;
		
	}
	
	.more:hover	{
		background: #3399cc; /* color-link */
		color: #fff;
	}
	
	/* OVERRIDE - GET TO TOP 99 LEADERBOARD */
	#results .more	{
		margin: 18px auto 12px auto !important;
	}
	


/* VIEWPORT 
=========== */
						@media (min-width: 600px) {
							
								article[class^="feeditem-"] {
									border: 1px solid #eee; /* &color-light-grey */
									margin: 0 auto 36px auto;
									width: 600px;
								}
								
								article[class^="feeditem-"] section h3	{
									font-size: 1.5em;
								}
								
								
								.feeditem-collection section li	{
									width: 23%;
								}
								
								.feeditem-following section li	{
									margin: 5px;
								}
								
								.feeditem-following section img	{
							    height: 42px !important;
							    width: 42px !important;
								}
							
						   
						}	

						
						@media (min-width: 960px) {
				   
						  .feed-wrapper	{
							  display: flex;
							  justify-content: space-between;
						  }
						   
						   
						  #feed	{
						  	order: 1;
						  }
						   
						  #feed-sidebar	{
							  margin-left: 658px;
							  max-width: 340px;
							  order: 2;
							  position: fixed;
							}	
							
							/* profile override */
							#profile + .feed-wrapper #feed-sidebar	{
								display: block;
								margin: 0 0 0 auto;
								position: relative;
							}

   
   				}
   				
   				
   				/* Remove Fixed Position if Tablet 
			   @media only screen 
					and (min-device-width : 768px) 
					and (max-device-width : 1024px) 
					and (orientation : landscape)
					
					 { 				
					   		#feed-sidebar	{
							   margin: 0 0 0 auto;
							   position: relative !important;
							   }
		}

*/
				  
   					
/*==========================================================================
  Profile header
  Avatar, buttons, social links
  ========================================================================== */
	
	#profile	{
	   background: #fff;
   }

	/* OVERRIDE - ACTION MENU ON MOBILE */
	#profile .actions	{
		margin-right: -12px;
	}

	#profile article	{
	   padding: 18px 12px 24px 12px;
	   text-align: center;
	   
   }
		 
	#profile img	{
		border: 2px solid #fff;
		border-radius: 50%;
		height: 100px;
		margin: -36px 0 12px 0;
		width: 100px;
	}
	
	.profile-actions	{
		align-content: flex-end;
		align-items: flex-start;
		display: flex;
		justify-content: flex-end;
	}

	.profile-actions .btn-small {
		border: 1px solid #3399cc;
		color: #3399cc;
		margin: 0 auto 0 0;
	}
	
		.profile-actions .btn-small.active,
		.profile-actions .btn-small:hover	{
			background: #3399cc;
			color: #fff;
		}
		
		.profile-actions .btn-small.active:hover	{
			background: #ff908b;
		}
		
	
	/* NOTE -- CLASS USED ON JOIN FEEDITEM & SITE FOOTER */
	.profile-social	{
		display: flex;
		justify-content: center;
		margin: 0 auto;
		width: 150px;
	}
	
		.profile-social a	{
			display: block;
			fill: #b8b8b8; /* color-dark-grey */
			height: 50px;
			width: 50px;
		}
		
		.profile-social a:hover	{
			fill: #4a4a4a; /* color-darker-grey */
		}
		
		.profile-social	svg	{
			height: 50px;
			width: 50px;
			
		}	



/* PROFILE TABS 
=============== */
	#profile .tabs	{
		border: 0;
		max-width: 580px;
	}


/* VIEWPORT 
=========== */
						@media (min-width: 600px) {
						
							#profile article	{
							  display: flex;
							  padding: 18px 16px 28px 16px;
							  text-align: left;
						   }
							
							#profile img	{
						  	height: 125px;
						    margin: 0 18px 0 0;
						    order: 1;
						    width: 125px;
						  }
						  
						  /* OVERRIDE - ACTION MENU ON MOBILE */
							#profile .actions	{
								margin-right: 0;
							}
						  
						  .profile-info	{
							  order: 2;
							  padding: 0 40px 0 0;
							  max-width: 600px;
						  }
						  
						  .profile-actions	{
							  order: 3;
							  margin: 0 0 0 auto;
							}
							
							#profile .profile-social	{
								margin: 0 0 0 -12px;
								justify-content: flex-start;
							}
							
							#feed-sidebar .profile-social	{
								margin: 0 0 0 -24px;
								justify-content: flex-start;
							}
							
						}

			
																													
																													/* FIX -- TEMP CAN'T GET TO VERTICALLY CENTER WITH ACTION MENU */
																													@media (min-width: 760px) {
																														.profile-actions .btn-small	{
																															margin-top: 18px;
																														}
																							
																													}





/*==========================================================================
  Reputation
  Layout, ratings, badges, etc
  ========================================================================== */


																													/* REMOVE AFTER STATS UPDATE
																													#reputation	{
																														padding-bottom: 36px;
																														padding-top: 24px;
																														
																													}
																													*/

/* REP RATINGS (GOOD, NEUTRAL, BAD) 
=================================== */
.rep-ratings	{
	display: flex;
	justify-content: space-between;
}
	.rep-ratings li	{
		text-align: center;
		width: 33%;
	}
	
	.rep-ratings li a	{
		display: block;
	}
	
	.rep-ratings li svg {
		fill: #3399cc;
		height: 120px;
		width: 120px;
		margin: -18px -18px -24px -18px;
	}
	
	.rep-ratings li strong	{
		display: block;
	}


/* REP LAYOUT 
============= */
#rep-earned	{
	margin: 0 auto 24px auto;
	position: relative;
}

#rep-earned header	{
	background: #fff;
	border-radius: 8px 8px 0 0;
	padding: 24px 0 36px 0;
	text-align: center;
}
	
	#rep-earned header h3	{
		font-size: 2.5em;
		font-weight: 900;
		margin: 4px 0 8px 0;
	}

.rep	{
	background: #fff;
	border-bottom: 1px dotted #eee;
	box-shadow: 0 0 3px 1px #f6f6f6; /* color-box-shadow */
	padding: 18px 16px;
}
		
		.rep h3	{
			display: flex;
			font-size: 1.3em;
			font-weight: 300;
			margin-bottom: 2px;
		}
		
		.rep h3 strong	{
			font-weight: 900;
			margin: 0 0 0 auto;
		}
		
		.rep p	{
			font-size: .9em;
		}
		
		.rep p em	{
			font-style: italic;
		}
		

/* BADGES 
========= */
#badges	{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	margin: 0 auto;
}
		
		
.badge	{
	border: 1px solid #fafafa;
	border-radius: 8px;
	margin: 0 auto 8px auto;
	padding: 6px 6px 12px 6px;
	text-align: center;
	width: 45%;
}
		
	.badge svg	{
		max-height: 100px;
		max-width: 100px;
		opacity: .4;
	}
	
	.badge h3	{
		color: #8b8b8b;
		margin: 6px 0 2px 0;;
	}
	
	
	.badge p	{
		font-size: .8em;
		line-height: 1.1em;
	}
	
	
/* Earned badge has class 'active' added */
.badge.active	{
	background: #fff;
	border: 1px solid #eee;
	box-shadow: 0 0 3px 1px #f6f6f6; /* color-box-shadow */
	
}

	.badge.active svg	{
		opacity: 1;
	}
	
	.badge.active h3	{
		color: #4a4a4a;
	}

/* VIEWPORT 
=========== */
					  @media (min-width: 600px) {
						   	#rep-earned,
						   	#badges	{
							   	width: 600px;
						   	}
						   	
						   	
						   	.badge {
							   	width: 30%;
						   	}
					   	
						}	
	   		
	   		
					  @media (min-width: 960px) {
					   	
							  #stats	{
								  display: flex;
								  flex-wrap: wrap;
							  }
							   
							  #rep-earned	{
									margin: 0 auto 0 0;
									width: 42%;
								}
							   
							  #badges	{
								  margin: 0 0 0 auto;
								  width: 56%;
								  
								}			   
				
					   
					  }




/* ==========================================================================
   Page header (library, shop, discover)
   ========================================================================== */
#page-header	{
	background: #fafafa !important; /* color-lighter-grey */
	border-bottom: 1px solid #eee; /* color-dark-grey */
	
	padding: 10px 0;
}

	#page-header h1	{
		margin: 0;
		text-transform: uppercase;
	}
	   		
	#page-header h2	{
		font-size: .7em;
		letter-spacing: 0;
	}
	
	#page-header .btn-small	{
		float: right;
		margin: 8px 0 0 0;
	}
	
	#page-header .icon-add	{
		display: none;
		float: right;
		height: 50px;
		margin-top: 4px;
		position: relative;
		width: 50px;
	}

	#page-header .icon-add svg	{
		height: 60px;
		margin: -16px -5px -12px -5px;
		width: 60px;
	}
	
	
/* VIEWPORT 
=========== */

							@media (min-width: 768px) {
								
								#page-header .btn-small	{
									display: none;
								}
								
								#page-header .icon-add	{
									display: block;
									
								}
								
								/* OVERRIDE -- for tags follow button in header */
								#page-header .library-tag .btn-small	{
									display: block;
									margin-top: 16px;
								}
								
				
							}


/* ==========================================================================
   Collction layouts (library, shop, have, want, sell)
   ========================================================================== */

/*
  FILTERS
========= */


#filter	{
	background: #fafafa !important; /* color-lighter-grey */
	border: 1px solid #ccc; /* color-light-grey */
	border-radius: 36px;
	box-shadow: 0 0 3px 1px #eee; /* color-box-shadow */ 
	color: #8b8b8b; /* color-dark-grey */
	display: flex;
	margin: 18px auto;
	max-width: 800px;
	position: relative;
	width: 94%;
	z-index: 500;
}

	#filter.fixed {
	 border: 1px solid #ccc; /* color-light-grey */
	 border-radius: 0;
	 left: 50%;
	 margin: 0;
	 position: fixed;
	 top: 48px;
	 transform: translateX(-50%);
	 width: 100%;
	}


#filter.active	{
	margin: 18px auto 48px auto;
}


#filter h2	{
	display: none;
}

/* clear active filters */	
	#filter p	{
		background: #fff;
		border-radius: 8px;
		font-size: .8em;
		font-weight: 700;
		left: 50%;
		opacity: 0;
		padding: 4px 8px;
		position: absolute;
		top: 56px;	
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
           transition: opacity 0.3s 0.3s ease;
	}
	
		#filter.active p	{
			opacity: 1;
		}
   		

/* Filter Option Links */
#filter-option-layout a,
#filter-options-btn a	{
	display: flex;
	justify-content: center;
	flex-direction: column;
	color: #8b8b8b; /* color-dark-grey */ 
	font-size: .7em;
	height: 50px;
	padding: 0 16px;
	text-align: right;
	text-transform: uppercase;
	white-space: nowrap;
}
	
#filter-option-layout a span,
#filter-options-btn a span	{
	display: block;
	font-size: 1.1em;
	font-style: italic;
	line-height: 1.4em;
	text-transform: none;
}	
	
	
#filter-option-layout div:hover a,
#filter-options-btn:hover a,
#filter-view:hover	{
	background: #fff;
	color: #4a4a4a; /* color-darker-grey */ 
}


#filter-options-btn a strong	{			
	background: #3399cc; /* color-darker-grey */
	border: 1px solid #3399cc;
	border-radius: 50%;
	color: #fff;
	font-size: .5em;
	font-weight: 700; /* weight-bold */
	line-height: .5em;
	margin: 0 0 0 6px;
	padding: 2px 4px;
	text-align: center;
}


#filter-option-layout ul a	{
			background: #fff;
			border-bottom: 1px solid #eee; /* color-light-grey */
			color: #4a4a4a !important; /* color-dark-grey */ 
		}
		
	#filter-option-layout ul a span	{
		color: #8b8b8b !important; /* color-dark-grey */ 
	}


	#filter-option-layout ul a:hover,
	#filter-option-layout ul a:hover span	{
		background: #3399cc; /* color-link */
		color: #fff !important; /* color-dark-grey */ 
	}

	#filter a.active,
	#filter a.active span,
	#filter button.active	{
				color: #3399cc !important; 
				fill: #3399cc !important; /* color-dark-grey */
				font-weight: 700;
			}
			
	#filter a.disabled,
	#filter a.disabled:hover	{
		background: #fafafa;
		color: #4a4a4a !important;
	}	
				
			
/* Filter Input -- clear controls with search section */
#filter-input	{
	display: flex;
	width: 100%;
}

#filter input	{
	background: #fafafa; /* color-lighter-grey */
	border: 0;
	font-family: Lato, sans-serif;
	font-size: 1em;
	height: 50px;
	outline: none;
	padding: 0;
	margin: 0;
	width: 100%;
	     -moz-box-sizing: border-box !important; /* For legacy (Firefox <29) Gecko based browsers */
	  -webkit-box-sizing: border-box !important; /* For legacy WebKit based browsers */
	          box-sizing: border-box !important; 
	  -webkit-appearance: none !important;

}

#filter-input input::placeholder	{
	color: #8b8b8b; /* color-dark-grey */
}

#filter input:focus::placeholder	{
	opacity: 0;
	transition: opacity 0.3s 0.3s ease;
}

	#filter-input > svg	{
		fill: #b8b8b8; /* color-dark-grey */
		height: 50px;
		width: 50px;
	}
			
			
			
/* Filter Option Layouts */
#filter-option-layout	{
	display: flex;
	margin: auto 0 auto auto;
}

#filter-option-layout	{
	display: none;
}

	#filter-option-layout ul	{
		display: none;
	}
	
	#filter-option-layout div,
	#filter-options-btn,
	#filter-view	{
		border-left: 1px solid #eee; /* color-light-grey */
		position: relative;
	}		
		
		   	
/* View Toggle Button */
#filter-view {	border-radius: 0 36px 36px 0;
}

.view-switch	{
	border: 0;
	fill: #b8b8b8;
	display: block;
	height: 50px;
	cursor: pointer;
	width: 50px;
}

	.view-switch.icon-list	{
		background: url(../_svg/bg-icon-view.svg) 0 0 no-repeat;
	}
	
	.view-switch.icon-list:hover	{
		background: url(../_svg/bg-icon-view.svg) 0 -50px no-repeat;
	}
	
	
	.view-switch.icon-grid	{
		background: url(../_svg/bg-icon-view.svg) 0 -100px no-repeat;
	}
	
	.view-switch.icon-grid:hover	{
		background: url(../_svg/bg-icon-view.svg) 0 -150px no-repeat;
	}
	
		   
/* Mobile filter (mobile only modal) */
	#filter-mobile	{
		padding: 24px 0 0 0;
	}
	
	#filter-mobile ul {
		display: flex;
		flex-direction: row;
		flex-flow: wrap;
		margin: 12px 0 18px 0;
	}
	
	
	#filter-mobile li a	{
		background: #fafafa;
		border: 1px solid #eee;
		border-radius: 6px;
		color: #4a4a4a;
		display: block;
		font-size: .8em;
		padding: 8px 12px;
		margin: 0 6px 16px 0;
	}
	
	#filter-mobile li a.active	{
		background: #4a4a4a;
		border: 1px solid #4a4a4a;
		color: #fff;
	}

	#filter-mobile .form-actions	{
		bottom: 0;
		position: fixed;
		width: calc(100% - 24px);
	}

	#search-clear,
	#filter-clear	{
		background: #fafafa;
		border: 0;
		cursor: pointer;
		outline: none;
		opacity: 0;
		margin: auto 0 auto auto;
		padding: 0;
		
		-moz-box-sizing: border-box !important; /* For legacy (Firefox <29) Gecko based browsers */
		  -webkit-box-sizing: border-box !important; /* For legacy WebKit based browsers */
		box-sizing: border-box !important; 
		-webkit-appearance: none !important;
	}
	
		#search-clear svg,
		#filter-clear svg	{
			fill: #4a4a4a;
			height: 32px;
			width: 32px;
		}
		
		.search-input input:focus + #search-clear,
		#filter-input input:focus + #filter-clear	{
			opacity: 1;
			transition: opacity 0.3s 0.3s ease;
		}


/* FAB for SHOP filter 
#filter-shop	{
	bottom: 12px;
	position: fixed;
	margin: 0 auto;
	max-width: 1000px;
	text-align: center;
	width: 100%;
	z-index: 100;
	}
	
	#filter-shop a	{	
		align-items: center;
		background-image: linear-gradient(-225deg, #ff0066 0%, #d41872 62%, #a445b2 100%);
		border-radius: 48px;
		box-shadow: 0 0 3px 1px #f6f6f6;
		color: #fff;
		display: inline-flex;
		margin: 0 8px 0 -2px;
		
	}
	
	#filter-shop strong	{
		padding: 0 24px 0 0;
	}
	
	
	#filter-shop svg {
		fill: #fff;
		height: 48px;
		padding: 0 2px 2px 0;
		width: 48px;
	}

*/



/*
  VIEWPORT
========== */
						@media (min-width: 600px) {
							
								#filter	{
								   margin: 36px auto 36px auto;
								}
								
								#filter.fixed {
									 max-width: inherit;
									}
								
								#filter.active	{
									margin: 36px auto 48px auto;
								}
								
								#filter-option-layout	{
									display: flex;
								}
								
								#filter-options-btn	{
									display: none;
								}
								
								
								#filter-option-layout div:hover ul {
									border: 1px solid #eee; /* color-light-grey */
									/* box-shadow: 0 0 3px 1px #f6f6f6;  */
									display: block;
									min-width: 138px;
									position: absolute;
									right: -1px;
									z-index: 500;
								}
											
							
						}
						
						
						
						
						
						
/*
  COLLECTION VIEW (cards for grid & list view)
============================================= */
#collection	{
	padding: 0 !important;
}

	/* OVERRIDE -- Item related collection - no filter */
	#view.related	{
		align-items: flex-start;
		padding: 36px 0 60px 0 !important;
	}


/* Grid view card layout (default) */
#view.grid	{
	
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	padding: 6px 16px;
}
	
	#view.grid .card	{
		border: 1px solid #fff;
		margin: 0 2px 8px 2px;
		position: relative;
		width: 31%;
	}
	
	#view.grid .card:hover	{
		border: 1px solid #eee;
	}
	
	#view.grid .card > a img	{
		align-content: center;
		height: auto;
		width: 100%;
	}
	
	#view.grid .card-content	{
		display: none;
		}
	
/* List view card layouts */
	#view.list .card	{
	 	background: #fff;
	 	border-bottom: 1px solid #eee; /* color-lighter-grey */
	 	display: flex;
	 	padding: 18px 12px 8px 12px;
	 	position: relative;
		}
				
		.card > a	{
			margin-right: 8px;
			position: relative;
		}
		
		.card > a img	{
			align-content: center;
			height: auto;
			width: 150px;
		}



		.card > a span,
		.feeditem-collection a span	{
			display: flex;
			margin: 2px 0 0 2px;
			position: absolute;
		}
		
		.card > a span em,
		.card > a span strong,
		.feeditem-collection a span em,
		.feeditem-collection a span strong	{
			background: #fff; 
			border: 1px solid #b8b8b8; /* color-dark-grey */
			border-radius: 3px;
			color: #4a4a4a; /* color-darker-grey */
			display: inline-block;
			font-size: .7em;
			margin: 0 2px 0 0;
			padding: 2px 4px;
			opacity: .95;
			text-align: center;
			text-transform: uppercase;
		}	
		
		.card > a span strong,
		.feeditem-collection a span strong	{
			background: #4a4a4a;
			color: #fff;
		}
		
		
													/* WHY WOULD I DO THIS? -- 
													GOING TO SHOW ON MOBILE AND SEE WHY I BLOCKED
													HIDES PRICES ON SMALL VIEWPORT IN GRID VIEW
													#view.grid .card > a span strong {
														display: none;
													}
													*/
		.card-content p	{
			font-size: .9em;
			margin-bottom: 4px;
		}
		
		.card-content h3 a	{
			color: #4a4a4a; /* color-darker-grey */
		}

/* Card actions (collection, comment, shop) */		
.card-actions	{
	margin-left: -8px;
}

.card-actions li	{
	float: left;
}

.card-actions a.icon strong	{
	color: #fff; 
	background: #4a4a4a; /*color-dark-grey */
	left: 4px;
	top: 6px;
}


/*
	Grid Pagination
================= */	
	#pagination	{
		color: #8b8b8b;
		margin: 24px auto 60px auto;
		padding: 18px 12px 0 12px;
		text-align: center;
	}
		
	.pagination-actions	{
		margin: 0 auto;
	}
	
	.pagination-actions .btn-link	{
		margin: 8px 2px 0 2px;
		width: 130px;
	}
		
		
/*
  VIEWPORT
========== */
				
						@media (min-width: 600px) {
							
							#view {
								min-height: 600px;
							}
							
							/* grid view */
							#view.grid .card-content	{
								background: #fff;
								bottom: 0;
								display: block;
								left: 0;
								opacity: .0;
								padding: 12px 10px 0 10px;
								position: absolute;
								transition: opacity 0.3s linear;
								transition-delay: .5s;
								width: calc(100% - 20px)
							}
			
							#view.grid .card:hover .card-content	{
								opacity: .95;
							}
							
							
							/* View list */
							#view.list	{
								display: flex;
								flex-flow: row wrap;
								justify-content: space-around;
								padding: 6px 16px;
							}
							
							#view.list .card	{
								border: 1px solid #fff;
								flex-direction: column;
								flex-wrap: wrap;
								margin-bottom: 12px;
								padding: 12px 8px;
								vertical-align: top;
								width: 250px;
							}
							
								#view.list .card:hover	{
									border: 1px solid #eee;
								}
							
							
							#view.list .card img	{
								height: auto;
								width: 250px
							}
							
							#view.list .card-content	{
								margin: 8px 0 0 0;
							}
							
							#view.list .card-content p	{
								margin: 0;
							}
							
							#view.list .card-actions	{
								background: #fff;
								opacity: .0;
								position: absolute;
								top: 216px;
								transition: opacity 0.3s linear;
								transition-delay: .5s;
								/* width: calc(100% - 16px) */
								width: 100%;
			
							}
							
							#view.list .card:hover .card-actions	{
								opacity: .95;
							}
							
							/* Pagination */
							#pagination{
								display: flex;
							}
								
								#pagination p	{
									text-align: left;
								}
								
								#pagination p strong	{
									display: block;
									font-weight: 700;
									margin-top: 2px;
									
								}
								
								.pagination-actions	{
									margin: 0 0 0 auto;
								}
							
							#view.grid .card > a span strong	{
								display: block;
							}
							
							
						}
			

						@media (min-width: 768px) {
							
								.card-actions a.icon strong	{
									background: #b8b8b8; /*color-dark-grey */
								}
								
								.card-actions a.icon:hover strong	{
									background: #4a4a4a; /*color-dark-grey */
								}
							
			
						}

						
						@media (min-width: 932px) {
							
								#view.grid .card	{
									margin: 0 4px 16px 4px;
									padding: 12px 8px;
									width: 22%;
								}
							
						
						}	



/* ==========================================================================
   Page Layout -- Item
   ========================================================================== */

#item	{
	border-bottom: 1px solid #eee; /* color-lighter-grey */
	box-shadow: 0 0 4px 2px #f6f6f6; /* color-box-shadow */
	padding: 62px 0 0 0;	
}
	
#item-header	{
	margin-bottom: 24px;
	padding: 0 12px;
}		

	#item-header .actions	{
		float: right;
		margin-right: -12px;
	}

#item-group	{
	padding: 0 12px;
}


/*
  IMAGE GALLERY (ITEM + LISTINGS)
================================= */
#image-gallery	{
	margin: 0 auto 16px auto;
	max-height: 624px;
	max-width: 600px;
	position: relative;
}
	
		#image-gallery img	{
			height: auto;
			margin: auto !important;
			width: 100%;
		}
		
		
		#image-count	{
			background: #4a4a4a;
			border-radius: 12px;
			box-shadow: 0 0 3px 1px #f6f6f6;
			color: #fff;
			font-size: .7em;
			padding: 3px 6px;
			position: absolute;
			right: 0;
		}
		
		
		.image-mod	{
			position: absolute;
			font-size: .9em;
			top: 0;
		}
		
		
#image-carousel	{
	margin: 8px auto;
	max-width: 44px;
	display: flex;
	flex-direction: row;
}
		
	#image-carousel li	{
		margin: 2px;
		background: #eee; /* color-light-grey */
		border-radius: 50%;
		display: block;
		height: 7px;
		width: 7px;
	}
	
	#image-carousel li.active	{
		background: #4a4a4a; /* color-link */
	}
		

/*
  ITEM CONTENT
============== */
#item-content	{
	max-width: 760px;
	margin: 0 auto;
}	
	
#item-collect	{
	display: flex;
	justify-content: space-between;
	margin: 0 auto 24px auto;
}

#item-collect li	{
	width: 32%;
}
		
#item-content > section	{
	border-top: 1px solid #eee; /* color-lighter-grey */
	color: #8b8b8b;  /* color-dark-grey */
	font-size: 1em;
	line-height: 1.5em;
	margin-bottom: 24px;
	padding: 8px 0 0 0;
}

	#item-content > section h2	{
		margin-bottom: 8px;
	}
	
	#item-details li	{
		display: flex;
		margin-bottom: 14px;
	}
	
	#item-content label	{
		color: #4a4a4a;
		min-width: 116px;
		vertical-align: top;	
	}
	
	#item-content strong	{
		width: 100%;
	}
			
			#item-production ul
			{
				display: flex;
				flex-flow: row wrap;	
			}
			
			#item-production li	{
				margin-bottom: 14px;
				width: 114px;
			}
			
			#item-production li label	{
				display: block;
			}
			
			#item-history	{
				position: relative
			}

																			/* TEMP UNTIL GRAPH DATA */
																			#item-history img	{
																				width: 100%	
																			}
																			
																			#item-history p	{
																				background: #fafafa;
																				border: 1px #eee solid;
																				border-radius: 16px;
																				color: #4a4a4a;
																				font-size: .8em;
																				font-style: italic;
																				padding: 0 12px;
																				position: absolute;
																				left: 50%;
																				top: 50%;
																				transform: translateX(-50%) translateY(-50%);
																				
																			}
			
			
			
			
			#item-history li	{
				background: #fafafa;
				border-bottom: 1px solid #ddd;
				display: flex;
				padding: 8px 12px;
			}
			
			#item-history li label	{
				margin: 0 auto 0 0;
			}
			
			#item-history li span	{
				color: #4a4a4a;
				font-style: italic;
				font-weight: 600;
			}

/* TEMP TEST			
.price-history	{
	background: #fff;
	border: 1px solid #eee;
	border-radius: 4px;
	box-shadow: 0 0 4px 2px #f6f6f6;
	color: #fff;
	display: flex;
	align-items: center;
	margin: 12px 0 0 0;
	max-width: 460px;
	padding: 8px 12px 8px 0;
}

	.price-history h3 {
		margin-bottom: 4px;
	}

	.price-history svg	{
		fill: #3399cc;
		height: 60px;
		width: 60px;
		flex-shrink: 0;
	}
	
	.price-history p	{
		color: #4a4a4a;
	}
	
	.price-history ul	{
		display: flex;
		justify-content: space-around;
		text-align: center;
		width: 100%;
	}
	
	.price-history ul li	{
	}
	
	.price-history span	{
		color: #4a4a4a;
		display: block;
		font-size: 1.5em;
		font-weight: 900;
		padding: 0 0 12px 0;
	}
*/			

		
/* VIEWPORT
=========== */
		
							@media (min-width: 760px) {
	  	
							  #item-header	{
								 border-bottom: 1px solid #eee; /* color-light-grey */
								 margin: 0 auto 32px auto !important;
							 	}
							  
							  #item-header .actions	{
								  margin-right: 0;
							  }
							  
							  #item-header .actions span	{
									display: block;
								}
							
							#item-history div	{
									display: flex;
								}	
							
							#item-history div img,
							#item-history div ul	{
								width: 50%;
							}
								
							}	
							
							@media (min-width: 1024px) {
							  
							  #item-group {
								  display: flex;
							  }
							  
							  #item-content	{
								  margin: 0 0 0 auto;
								  width: 360px;
							  }
							  
							  #item-history div	{
								  display: inherit !important;
							  }	
						  
						  #item-history div img,
						  #item-history div ul	{
							  width: inherit;
						  }
							  
							  
							  					
							}	



/*==========================================================================
	ITEM DETAIL PAGE - COLLECT ITEMS
========================================================================== */	

#form-collect {
	
}



#form-collect p	{
		margin-bottom: 16px;
		line-height: 1.4em;
	}		



.collect-details	{
	display: flex;
	justify-content: space-between;
}

	.collect-quantity	{
		width: 22%;
	}
	
	.collect-price	{
		width: 36%;
	}
	
	.collect-date {
		width: 36%;
	}
	
	.collect-method	{
		width: 60%;
	}
	

		#form-collect .toggle	{
			padding: 0 0 8px 0
		}
		
		#form-collect .toggle h3	{
			text-transform: none;
		}



	.delete-item	{
		align-items: center;
		border-bottom: 1px solid #eee;
		color: #ff908b !important;
		display: flex;
		padding: 0 0 12px 0;
		margin: 0 0 18px 0;
		width: calc(100% - 16px);
	}
	
		.delete-item svg	{
			fill: #ff908b !important;
			height: 48px;
			width: 48px;
		}
		
		.delete-item strong	{
			display: block;
			font-size: 1em;
			font-weight: 700;
		}

#form-collect	.shop-promo	{
	margin: 12px 0 24px 0;
}

#form-collect .shop-promo p	{
	margin: 0;
}




/*==========================================================================
  ITEM DETAIL PAGE - SUPPORTING COMMENT + SHOP
========================================================================== */


/* ITEM SUPPORTING
================== */
									 
									 
									 /* OVERRIDE TO MAKE CLICK BETWEENT WITHOUT PAGE LOAD? */
									 #item-supporting	{
										 padding-top: 50px;
									 }
 
 #item-supporting .tabs	{
	 border: 0;
	 max-width: 580px;
 }


	 
/* COMMENTS
=========== */
#item-comments	{
	padding: 18px 0 60px 0;
	min-height: 400px;
}


/* ADD COMMENT & REPLY INPUT */
#add-comment	{
	margin: 0 12px 18px 12px;
	max-width: 720px;
}	
	
	
	form.comment-reply	{
		align-items: center;
		background: #fafafa;
		border: 1px solid #eee;
		border-radius: 24px;
		display: flex;
		margin: 0 12px 0 0;
	}
	
	/* OVERRIDE ADD COMMENT */
	#add-comment .comment-reply	{
		border-radius: 0;
		height: 80px;
		margin: 0;
		padding: 0 4px;
	}

/* TAGPROFILE IN COMMENT & REPLY INPUT */
#comment-tagprofile	{
	background: #fff;
	border: 1px solid #eee; /* color-dark-grey */
  box-shadow: 0 0 3px 1px #f6f6f6; /* color-box-shadow */
	height: 310px !important;
	overflow: auto;
	position: absolute;
	width: 340px !important;
	z-index: 900;
	-webkit-overflow-scrolling: touch;
}
	
#comment-tagprofile #results	{
	padding: 4px !important;
}

/* SWITCH PROFILE IN COMMENT & REPLY INPUT */
#comment-switch	{
	background: #fff;
	border: 1px solid #eee; /* color-dark-grey */
  box-shadow: 0 0 3px 1px #f6f6f6; /* color-box-shadow */
	position: absolute;
	z-index: 900;
	/*TEMP POSITION */
	left: 14px;
	margin-top: -18px;
}



	
	
	form.comment-reply.verified a	{
		display: block;
		margin: 0 0 0 3px;
		padding: 0 14px 0 0;
		background-image:
    linear-gradient(45deg, transparent 50%, gray 50%),
    linear-gradient(135deg, gray 50%, transparent 50%);
	  background-position:
	    calc(100% - 8px) calc(1.6em + 2px),
	    calc(100% - 3px) calc(1.6em + 2px);
	  background-size:
	    5px 5px,
	    5px 5px;
	  background-repeat: no-repeat;
	}
	
	
	
	form.comment-reply input	{
		background: #fafafa;
		border: 0;
		border-radius: 24px 0 0 24px;
		color: #4a4a4a;
		font-family: Lato, sans-serif;
		font-size: 1em;
		font-weight: 300;
		padding: 16px;
		outline: 0;
		width: 100%;
	}
	
	form.add-comment.verified a + input	{
		padding: 16px 16px 16px 6px;
		border-radius: 0 !important;
	}
	
	
	form.comment-reply button	{
		background: transparent;
		border: 0;
		color: #3399cc;
		display: inline-flex;
		font-size: .9em;
		font-weight: 500;
		padding: 0 16px;
		opacity: .3;
		 -webkit-appearance: none;
     -moz-appearance: none;
      appearance: none;
  -ms-appearance: none;
  -webkit-border-radius: 0;  
     -moz-border-radius: 0;    
          border-radius: 0 
	}
	
	form.comment-reply input:focus + button	{
		opacity: 1;
	}


/* COMMENT LAYOUT */
.comment	{
	border-bottom: 1px solid #eee; /* color-lighter-grey */
	margin: 0 auto 18px auto;
	max-width: 720px;
	position: relative;
}

.comment p strong	{
	font-style: italic;
	font-weight: 400;
}

/* COMMENT CONTENT */
.comment section	{
	font-weight: 300;
	line-height: 1.4em;
	padding: 0 16px 0 14px;
}

.comment section p + p	{
	margin: 12px 0 0 0;
}

.comment-replies	{
	margin: 0 0 18px 14px;
	max-width: 500px;
}	

/* REPLY */
.reply	{
	display: flex;
	justify-content: space-between;
	position: relative;
	
}
	
	.reply > a img {
		border: 2px solid #fff;
		border-radius: 50%;
		height: 24px;
		width: 24px;
	}	
	
	.reply > a svg {
		border: 2px solid #fff;
		border-radius: 50%;
		height: 24px;
		margin: 0 0 0 -12px;
		width: 24px;
	}		
	
	.reply > div	{
		font-size: .9em;
		line-height: 1.3em;
		margin: 0 auto 0 6px;
		
	}

	.reply h3	{
		margin: 3px 0 2px 0;
	}
	
		.reply h3 a	{
			color: #4a4a4a; /* color-darker-grey */
		}



/* ITEM SHOP
============ */
#item-shop	{
	padding: 18px 0 60px 0;
}


.shop	{
	border-bottom: 1px solid #eee; /* color-lighter-grey */
	margin: 0 auto 24px auto;
	max-width: 720px;
	position: relative;
}

.shop section	{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	padding: 0 16px 24px 16px;
}

	.shop section img	{
		height: 150px;
		margin: 0 12px 12px 0 !important;
		width: 150px;
	}
	
	.shop section h2	{
		margin: 0 0 2px 0;
	}

	
	.shop-copy p {
		line-height: 1.25em;
		margin: 0 0 8px 0;
	}
	
	.shop-copy h2	{
	margin: 0 0 8px 0 !important;
	}
	
	.shop-copy h4 {
		margin: 0 0 6px 0;
	}

	
	.shop-copy ul	{
		display: flex;
	}
	
	.shop-copy ul li	{
		background: #4a4a4a; /*color-darker-grey */
		border-radius: 12px;
		color: #fff;
		font-size: .7em;
		padding: 4px 12px;
		margin: 0 8px 12px 0;
	}

		/* Overide to change flex order for buying */
								.buy-listings .shop-copy    {
									order: 1;
								}
								
								.buy-listings .shop-actions {
									order: 2;
								}



		
.shop-actions	{
	flex-shrink: 0;
	text-align: right;
	margin: 0 0 0 auto;
}
		
		.shop-actions strong	{
			font-size: 1.5em;
			font-weight: 900;
		}
		
		.shop-actions label	{
			font-size: .9em;
			font-weight: 300;
		}
		
		.shop-actions .btn-link	{
			min-width: 100px;
		}
	
	
	
/* SHOP EBAY PROMO (KEYWORD MATCH)
================================== */		
.shop-promo	{
	background: #fff;
	border: 1px solid #eee;
	border-radius: 4px;
	box-shadow: 0 0 4px 2px #f6f6f6;
	color: #fff;
	display: flex;
	align-items: center;
	margin: 80px 18px 24px 18px;
	max-width: 460px;
	padding: 8px 12px 8px 0;
}

	.shop-promo h3 {
		margin-bottom: 4px;
	}
	
	.shop-promo	img	{
		flex-shrink: 0;
		height: 50px;
		padding: 16px;
		width: 50px;
	}
	
	.shop-promo svg,
	.shop-promo object	{
		fill: #ff0099;
		height: 80px;
		width: 80px;
		flex-shrink: 0;
	}
	
	.shop-promo p	{
		color: #4a4a4a;
	}

	




/*==========================================================================
	TRANSACTION FLOWS -- SELL / BUY ITEMS
========================================================================== */	


/* OVERRIDE SHOP & FORM NESTED IN MODAL */
#form-sell-item .shop,
#form-buy-item .shop	{
	border: 0;
	margin: 0 auto 12px auto;
	padding: 0 0 12px 0;
}

#form-sell-item .shop header,
#form-buy-item .shop header	{
	margin: 0 0 0 -10px;
}



#form-sell-item .shop section {
	padding: 0;
}

#form-buy-item .shop section	{
	flex-flow: inherit;
	padding: 12px 0;
}

#form-buy-item .shop-copy	{
	padding: 0 18px 0 0;
}

#form-buy-item .fineprint	{
	margin: 0 0 18px 0;
}

#form-sell-item .item-image	{
	width: 48%;
}

#modal.purchase	{
		max-width: 1000px;
	}






																														/* TEMP -- PAYPAL BUTTON */
																														#paypal-buy	{
																															display: flex;
																															justify-content: space-between;
																														}	
																														
																															#paypal-buy .input-sml	{
																																width: 31%;
																															}
																														
																														
																															#paypal-buy img	{
																																align-self: flex-start;
																																height: inherit;
																																margin: -3px 0 0 0 !important;
																																width: inherit;
																															}



/* New Styles for checkboxes */

.collect-checkboxes,
.sell-item-checkboxes	{
	border-bottom: 1px solid #eee;
	display: flex;
	margin-bottom: 18px;
	
}
.collect-checkboxes .checkbox,
.sell-item-checkboxes .checkbox	{
	border: 2px solid #eee;
	background: #fafafa;
	border-radius: 16px;
	padding: 8px 16px;
	margin-right: 8px;
}


.collect-checkboxes .checkbox:hover,
.collect-checkboxes .checkbox + checkbox:checked,
.sell-item-checkboxes .checkbox:hover,
.sell-item-checkboxes .checkbox + checkbox:checked	{
	background: #fff;
}

.collect-checkboxes .checkbox:hover label,
.sell-item-checkboxes .checkbox:hover label	{
		color: #4a4a4a;
		cursor: pointer;
}





/* VIEWPORT
=========== */
						@media (min-width: 600px) {
								/* COMMENT ADJUSTMENTS */
								.comment section	{
									padding: 0 60px 0 54px;
									margin-top: -6px;
								}
								
								.comment-replies	{
									margin: 0 12px 18px 54px;
								}	
								
																	/*TEMP POSITION */
																	#comment-switch	{
																		left: 54px;
																	}
								
								.reply > a svg {
									display: none
									}		
								
								.reply:hover > a svg {
									display: block
									}
									
									
								/* SHOP ADJUSTMENTS */
								.shop section {
										flex-flow: inherit;
									}		
								
								.shop-content img {
									order: 1;
								}
								
								.shop-copy    {
									order: 2;
									padding: 0 18px 0 0;
								}
								
								.shop-actions {
									order: 3;
								}
								
								.shop-promo	{
									margin: 72px auto 24px auto;
								}
								
								
								/* OVERRIDE FLEX WHEN DESKTOP MODAL */
								#form-sell-item .shop section	{
									flex-flow: row wrap !important
								}
								
									
									#form-sell-item	.shop-content img {
											order: 1;
										}
										
									#form-sell-item	.shop-copy    {
											order: 3;
											
										}
										
									#form-sell-item	.shop-actions {
											order: 2;
										}
										
								#modal.purchase	{
									margin: 36px 12px;
								}		
								
						}
						
						@media (min-width: 768px) {
								
								/* ADD COMMENT & REPLY INPUT */
								#add-comment	{
									margin: 0 auto 18px auto;
								}	

								
								#modal.purchase	{
									margin: 36px auto;
								}	
								
								#form-buy-item	{
									display: flex;
									padding: 0 !important;
									justify-content: space-between;
								}
										
								.purchase-listing	{
									max-width: 400px;
									min-width: 340px;
									margin: 0 18px !important;
								}

						}
						
						

/*==========================================================================
  ITEM & PROFILE FORMS
========================================================================== */
section[id^="form-"] *,
section[id^="form-"] *:after,
section[id^="form-"] *:before { 
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	}

#form-item,
#form-profile	{
	padding: 0 16px 72px 16px;
	position: relative;
	margin: 0 auto;
}
	
	#form-item h4,
	#form-profile h4	{
		clear: both;
		padding: 16px 0;
		text-transform: uppercase;
	}

	#form-item section,
	#form-profile section	{
		padding: 0;
    margin: 0 auto 24px auto;
					    /* Caused lookup spacing issue on input - tested and looked good to remove
					    max-width: 620px;
					    */
	}
	
	/* OVERRIDE - COPY EXPLAINING SERIES UPDATES */
	#form-profile-social p,
	#form-profile-password p	{
		margin: -12px 0 18px 0 !important;
	}


	
	
	
#form-add-help	{
	display: none;
}

 .form-copy-exclusive .form-copy	{
	 text-align: left !important;
 }

/* Form -- Small Copy */
.form-copy	{
	padding-top: 16px;
	text-align: center;
}

.form-copy p {
	font-size: .8em;
	padding: 6px 0 18px 0;			
	width: 100%;
}


/* FORM BUTTONS
=============== */
.form-actions	{
	padding: 8px 0;
	text-align: right;
}		
	
	.form-actions button	{
		background: #fff;
		border: 1px solid #eee;
		border-radius: 8px;
		color: #8b8b8b; /* color-link */
		cursor: pointer;
		display: inline-flex;
		font-size: .8em;
		margin: 0 auto 8px auto;
		outline: 0;
		padding: 16px 32px;
		text-transform: uppercase;
	}
		
		.form-actions button:hover		{
			background: #fafafa;
			color: #4a4a4a; /* color-link */
			transition: 300ms ease-in-out;		
		}
		
		.form-actions button.submit		{
			background: #ff0066;
			color: #fff; /* color-link */			
		}
		
		
		.form-actions button.disabled	{
			background: #eee;
			color: #8b8b8b;
			cursor: default;
		}


	#add-item-tabs	{
		display: none;
		justify-content: space-between;
	}
	
		#add-item-tabs li	{
			width: 24%;
		}
	
		#add-item-tabs a	{
			border: 2px solid #b8b8b8; /* color-dark-grey */
			border-radius: 2px;
			color: #8b8b8b; /* color-dark-grey */
			display: block;
			font-size: .8em;
			min-width: 100px;
			padding: 16px 0;
			position: relative;
			text-align: center;
			text-transform: uppercase;
			
		}
		
		#add-item-tabs a.active	{
			background: #3399cc;
			border: 2px solid #3399cc; /* color-link */
			color: #fff; /* color-dark-grey */
		}
				
			#add-item-tabs a:hover	{
				border: 2px solid #3399cc; /* color-link */
				color: #3399cc; /* color-link */
			}
			
			#add-item-tabs a.active:hover	{
				color: #fff; /* color-link */
			}

/* PROFILE LOOKUP */
.library-tagprofile	{
	background: #fff;
	border-bottom: 2px solid #3399cc;
	border-left: 2px solid #3399cc;
	border-right: 2px solid #3399cc;
	height: 285px !important;
	margin: -16px 0 0 -2px !important;
	overflow: auto;
	position: absolute;
	width: calc(100% + 4px);
	z-index: 900;
	-webkit-overflow-scrolling: touch;
}
	
.library-tagprofile #results	{
	padding: 0 !important;
	margin: 0 !important;
}

#form-item-info,
.form-item-float,
.form-copy-exclusive	{
	position: relative;
}





/* PROFILE IMAGE UPDATE
======================== */
.input-profile-image	{
	border-bottom: 1px solid #eee;
	display: flex;
	padding: 16px 0;
	margin-bottom: 36px;
}
		
	.input-profile-image img	{
		border-radius: 50%;
		height: 80px !important;
		margin: 0 18px 0 0;
		width: 80px !important;
	}
	
	.input-profile-image h2	{
		margin: 6px 0 !important;
	}
	
	
	.input-profile-image p	{
		margin-bottom: 8px;
		max-width: 320px;
	}



/* VIEWPORT
=========== */	
						
						
						@media (min-width: 540px) {
			
								#form-item-info > div	{
									float: left;
									width: 48%;
								}	
								
								.add-item-select	{
									display: none;
								}
								
								#add-item-tabs	{
									display: flex;
								}
								
								.input-sml	{
									width: 31%;
								}
								
								.input-med	{
									width: 48% ;
								}
					
								
								.form-copy-exclusive	{
									float: right !important;
								}
								
								.form-copy	{
									display: none;
								}

																																			
								.item-image	{
									width: 24%;
								}	
								
								.item-image a.warn	{
									opacity: 0;
								}	
								
								.item-image:hover a.warn	{
									opacity: 1;
									transition: opacity 0.3s 0.3s ease; 
								}
								
								
								.input-profile-image img	{
									height: 125px !important;
									width: 125px !important;
								}
								
								.input-profile-image h2	{
									margin: 18px 0 2px 0;
								}
								
								
								.input-profile-image p	{
									font-size: 1em;
								}
			
						}


						@media (min-width: 840px) {
							
								.form-wrapper	{
									display: flex;
								}
								
								#form-item form	{
									margin: 24px 0 0 0;
									width: 640px;
									}
									
									/* OVERRIDE - Edit profile input width to short without secondary containers */
									#form-profile-info,
									#form-profile-password	{
										min-width: 620px;
									}
									
									
								#form-add-help	{
									display: block;
									margin: 0 0 0 auto;
									max-width: 280px;
									padding: 68px 12px 0 18px;
									position: relative;
								}
								
								#form-add-help p	{
									font-size: .8em;
									line-height: 1.4em;
									padding: 4px 0 8px 0;
								}
							
								.tips-exclusive	{
									position: absolute;
									text-align: left;
									top: 430px;
								}
								
								.tips-tags	{
									position: absolute;
									top: 650px;
								}
								
								.tips-images	{
									position: absolute;
									text-align: left;
									top: 950px;
								}
								
								.tips-password	{
									text-align: left;
									margin: 160px 0 0 36px;
								}
							
							
						}



/* ==========================================================================
   Guest form landing page (join, sign in)
========================================================================== */
#form-guest	{
	margin: 0 auto 120px auto;
	padding: 50px 18px !important;
}


#modal	{
	height: 100vh
}

#modal h4	{
	margin-bottom: 6px;
}



article[class^="modal-"]	{
	background: #fff;
	height: 100%;
	margin: 0 auto;

	}

																												/* FIX -- ?? ADDED WRAPPER TO KEEP THE MODAL 100%
																													HEIGHT WHEN MOBILE KEYBOARD ACTIVE */
																												.modal-wrapper	{
																														background: #fff;
																												    padding: 18px 12px;
																												    position: relative;
																												}

#form-guest > header,
.modal-wrapper > header	{
			margin: 18px 0 36px 0;
			text-align: center;
		}
											   		
  #form-guest > header h1,
  .modal-wrapper > header h1	{
   text-transform: uppercase;
   margin: 0 0 4px 0;
  }	
  
																												 /* CHECK THIS DOESN't MESS UP OTHER MODALS */ 
																												  .modal-wrapper h3	{
																													  margin-bottom: 4px;
																												  }
  
  
  
	#form-guest .tabs,
	.modal-wrapper .tabs	{
		margin-bottom: 24px; 
	}


/* OVERRIDE - wildcard selects .shop in modals */
	#form-guest p,
	#form-authenticate p,
	#form-reported p,
	#form-delete p	{
		margin-bottom: 16px;
		line-height: 1.4em;
	}																													
																												


/* 
  MODAL FORM BUTTONS
==================== */
#modal .form-actions	{
		text-align: center;
	}
		
		#modal .form-actions button {
			display: block;
			width: 100%;
		}


/* 
  GUEST FORM & REPORT
===================== */	
#form-authenticate	{
	margin-bottom: 60px;
	/* TBD - tabs make alignment shift -- align-self: center; */
}

#modal section[id^="form-"]	{
	margin: 0 auto 36px auto;
}

/* USERNAME CHECK */

.username-available,
.username-taken	{
	display: none;
	fill: #4a4a4a;
	position: absolute;
  right: -6px;
  top: 0;
  z-index: 1000;
}

.username-available svg,
.username-taken svg	{
	height: 60px;
	width: 60px;
}

.username-taken	{
	fill: #f9461c !important;
}

.username-available.active,
.username-taken.active	{
	display: block;
}



/* 
  GUEST FORM PROMO AREA
======================= */
.form-promo	{
	border-radius: 18px;
	background: #fafafa;
	box-shadow: 0 0 3px 1px #f6f6f6;
	padding: 0 24px 24px 24px;
	text-align: center;
}

	
	.form-promo img	{
		width: 100%;
		margin: 12px 0 12px 0;
	}
	
	.form-promo h1	{
		color: #4a4a4a;
		font-size: 1.8em;
	}


/* 
  ERROR FORM MESSAGE
==================== */

#error	{
		align-items: center;
		display: flex;
		margin: 0 0 18px 0;
	}
											
		#error svg	{
			fill: #f9461c;
			height: 50px;
			width: 50px;
		}
		
		
		#error h2	{
			color: #f9461c;
		}
		
		#error p	{
			font-size: .9em;
			font-style: italic;
			margin: 0;
		}


/* 
  VIEWPORT
========== */

						@media (min-width: 420px) {
						
									#modal	{
										height: inherit;
										margin: 36px auto;
										max-width: 500px;
									}
									
									#modal h1	{
										font-size: 1.5em !important;
									}
									
									#modal section[id^="form-"]	{
										margin: 0;
										padding: 0 36px;
									}
									
						
						}
						
						
						@media (min-width: 768px) {
									
									.modal-wrapper > header	{
										margin: 18px 0 60px 0;
									}		
												
									#form-guest header	{
										margin: 36px 0 52px 0;
										text-align: center;
									}
									
									#form-wrapper	{
										
										/* box-shadow: 0 0 3px 1px #f6f6f6; */
										display: flex;
									}
													
									#form-authenticate	{
										margin-bottom: 0;
										padding: 24px 36px;
										width: 60%;
									}	
												
									.form-promo	{
										margin: 0 0 0 auto;
										width: 40%;
									}
									
									#modal section[id^="form-"]	{
										width: inherit;
									}
									
									
						}



/*==========================================================================
	2-Col Pages (Settings, Legal, Help)
========================================================================== */	




/*  
	2 COLUMN PAGE -- PAGE NAV
=========================== */	

																									/* FIX -- TEMP HAMBURGER PLACEHOLDER */
																									.page-nav-desktop	{
																										display: none;
																									}
																									
																									.page-nav-mobile {
																										display: flex;
																										}
																										
																									.page-nav-mobile svg	{
																										margin: 2px 0 0 3px;
																									}



																									/* FIX -- MOBILE FRIENDLY NAV 2Col page navigation */
																										#page-nav	{
																										   display: none;
																									    }
																										   
																										   #page-nav a	{
																											   background: #fff;
																											   border-bottom: 1px solid #eee;
																											   border-left: 1px solid #eee;
																											   border-right: 1px solid #eee;
																											   color: #8b8b8b;
																											   display: block;
																											   padding: 12px 18px;
																										   }
																										   
																										   		#page-nav a:hover	{
																											   		background: #fafafa;
																											   		color: #4a4a4a;
																										   		}
																										   		
																										   		#page-nav a.active	{
																											   		background: #4a4a4a; /* color-brand */
																											   		color: #fff;
																										   		}




#page-2col	{
	display: flex;
}


#page-content	{
   margin: 8px 0 16px 0;
   width: 100%;
   }



/*  
2 COLUMN PAGE --  LEGAL + SUPPORT
================================= */	

#page-content h2	{
  color: #4a4a4a;
  display: flex;
  font-size: 2.25em;
  letter-spacing: normal;
  margin: .5em 0 1em 0;
  text-transform: none;
}
	
#page-content h3	{
	font-size: 1.5em;
	margin: 36px 0 12px 0;
}
		
#page-content h4	{
	font-size: 1em;
	margin-bottom: 6px;
}
		
#page-content p	{
	line-height: 1.5em;
	margin: 0 0 1.6em 0;
}
					
#page-content strong	{
	font-weight: 500;
}

#page-content em	{
	font-style: italic;
}
			
		
#page-content ul	{
	font-weight: 300;
	list-style: circle;
	margin: .75em 1em 2em 2.5em;
	;
}
	
	#page-content li	{
		margin: 0 0 1em 0;
	}


#page-content img	{
			width: 100%;
			margin: 0 0 36px 0;
		}

	ul.page-images	{
		display: flex;
		list-style: none !important;
		margin: 0 !important;
		
	}
		ul.page-images img	{
			width: 100%;
		}

/* Override for avatar images scaling to 100% inside page-content */
	#page-content article[class^="resultitem-"] img	{
		margin: 0 !important;
		width: inherit !important
	}


/*  
	2 COLUMN PAGE -- VERIFIED ICON LAYOUT
======================================= */		
	#getverified	{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-around;
	}
		
		.verified-benefit	{
			margin: 18px auto;
			max-width: 300px;
			text-align: center;
		}
		
		.verified-benefit	{
			fill: #ff0066;
		}


/*  
2 COLUMN PAGE --  SETTINGS & TOGGLES
======================================= */

.settings p	{
	max-width: 500px !important;
}


/* TOGGLE CONTAINER */
.toggle	{
	border-bottom: 1px solid #eee;
	display: flex;
	margin: 24px 0;
	max-width: 620px;
	
}	

.toggle h3,
.settings > h3	{
	font-size: 1em !important;
	margin: 0 0 8px 0 !important;
	text-transform: uppercase;
}


/* TOGGLE SWITCH */
.toggle-switch {
	margin: 0 0 0 auto;
	padding: 0 0 0 18px;
}


/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #b8b8b8;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #3399cc;
}

input:focus + .slider {
  box-shadow: 0 0 1px #3399cc;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.slider input [disabled]	{
	background: #eee;
}


/*  
2 COLUMN PAGE --  TABS OVERRIDE
=========================== */

#page-content .tabs	{
	list-style: none;
	margin: 0;
	max-width: 620px;
	
}


#page-content #results	{
	padding: 0 0 72px 0;
	max-width: 620px;
}


/*  
2 COLUMN PAGE --  NESTED FORM OVERRIDE
======================================= */

#page-content #form-profile	{
	border-bottom: 1px solid #eee;
	margin: 0;
	max-width: 620px;
	padding: 0;
}

#page-content #form-profile h2 {
	color: #8b8b8b; /* color-dark-grey */
	font-size: .65em;
	letter-spacing: .1em;
	text-transform: uppercase;
	-webkit-text-size-adjust: 100%;
}

#page-content #form-profile p	{
	margin: 0 0 8px 0;
}

#page-content #form-profile img	{
	margin: 0 18px 0 0 !important;
}


/*  
	VIEWPORT
========== */

					  
					  @media (min-width: 768px) {	
								
								
					  	  	#page-content	{
								 margin: 24px 0 60px 0;
								 width: 100%;
							 }
								 
							#page-content #results	{
								box-shadow: inset 0 -7px 9px -7px rgba(0,0,0,0.3);
							}
								
														/* FIX -- TEMP HAMBURGER PLACEHOLDER */
														.page-nav-desktop	{
															display: block;
														}
														
														.page-nav-mobile	{
															display: none;
														}
														
								
														  #page-nav	{
																  border-top: 1px solid #eee;
																  display: block;
																  min-width: 200px;
																  margin: 24px 48px 0 0;
															}
				
					   		
					   }






/*==========================================================================
	Result sets (modal and site navigation) includes:
	Stats, Rep, Purchase history, Notifications, Site search
========================================================================== */	


#results	{
	padding: 0 0 72px 0;
	position: relative;	
	
}

.modal-results .form-actions	{
	bottom: 0;
	position: fixed;
	width: calc(100% - 24px);
}	


article[class^="resultitem-"]	{
	border-bottom: 1px solid #eee;
	display: flex;
	padding: 12px 0 12px 0;
}

article[class^="resultitem-"] div	{
	margin: 0 auto 0 8px;
}

article[class^="resultitem-"] img	{
	margin: 0 !important;
}

article[class^="resultitem-"] h2	{
	color: #8b8b8b !important;
	font-size: .65em !important;
	letter-spacing: .1em !important;
	margin: 0 !important;
	text-transform: uppercase !important;
}

article[class^="resultitem-"] h3	{
	font-size: 1em !important;
	margin: 0 !important;
}

article[class^="resultitem-"] h3 a	{
	color: #4a4a4a;
}

article[class^="resultitem-"] p	{
	font-size: .9em !important;
	margin: 0 16px 0 0 !important;
}

article[class^="resultitem-"] span	{
	color: #4a4a4a;
	font-size: 1.25em;
	font-weight: 900;
}

.resultitem-follow	{
	align-items: center !important;
}

.resultitem-follow .btn-small {
	border: 1px solid #3399cc;
	color: #3399cc;
}

	.resultitem-follow .btn-small.active {
		background: #3399cc;
		color: #fff;
	}
	
	.resultitem-follow .btn-small.active:hover {
		background: #fff; 
		border: 1px #ff908b solid; /* color-link */
		color: #ff908b; /* color-link */
	}

*/ 




/*  
	MODAL REPUTATION
============================= */

#modal.modal-reputation	{
	max-width: 540px;
}


/* BAD FEEDBACK REPLY */
.feedback-reply	{
			font-style: italic;
		}
		
		.feedback-reply em	{
			font-weight: 500;
		}


/*  
	MODAL STATS
============= */
#modal.modal-stats	{
	max-width: 500px;
}

.modal-stats header	{
	margin: 18px 0 24px 0 !important;
}

.resultitem-stats	{
	align-items: center !important;
}

/*  
	VIEWPORT
========== */
					  @media (min-width: 420px) {	
						 			
						 			#results	{
							 			height: 500px;
							 			overflow: auto;
							 			padding: 0 12px 72px 12px;
							 			-webkit-overflow-scrolling: touch;
						 			}
						 			
						 			
						 			.modal-results .form-actions	{
										bottom: 0;
										position: absolute;
									}	

									.modal-results button	{
										width: 220px !important;
									}

						}

						@media (min-width: 1020px) {	
							
							.resultitem-follow	{
								padding: 12px 16px 12px 0 !important;
							}

						}



/* ==========================================================================
   SPONSOR -- FEED PROMO
========================================================================== */
#sponsor	{
	margin: 0 12px 18px 12px;
	display: none;
}


#sponsor h4	{
	color: #8b8b8b;
	display: block;
	font-size: .6em;
	letter-spacing: 1px;
	padding: 12px 0;
	text-align: center;
	text-transform: uppercase;
}

.sponsor-promo	{
		align-items: center;
		background-image: linear-gradient(15deg, #f8cf47 0%, #c79d10 100%); /* SPONSOR UPDATES - changes monthly per sponsor */
		border-radius: 16px;
		color: #fff;
		display: flex;
		flex-wrap: wrap;
		padding: 12px 12px;
	}
	
	.sponsor-promo img	{
		flex-shrink: 0;
		height: 75px;
		width: 75px;
	}
	
	.sponsor-promo div	{
		flex-basis: 65%;
		margin: 0 0 0 18px;
	}
	
	.sponsor-promo h5	{
		border: 2px solid #fff;
		color: #fff;
		font-size: .6em;
		margin: 0 0 6px 0;
		padding: 6px 8px;
	}
		
	.sponsor-promo p	{
		font-size: .9em;
		font-weight: 700;
	}


/*  
	SPONSOR MEMBER RANKING
======================== */

#sponsor-ranking	{
	border-top: 1px dotted #fff; /* SPONSOR UPDATES - changes monthly per sponsor */
	display: flex;
	flex-basis: 100%;
	font-size: .7em;
	justify-content: space-around;
	margin: 12px 0 0 0;
	padding: 18px 0 6px 0;
	text-align: center;
	text-transform: uppercase;
}

#sponsor-ranking strong {
    display: block;
    font-size: 3em;
    font-weight: 900;
    text-transform: none; 
}


/*  
	SPONSOR LEADERBOARD
====================== */
#sponsor #results	{
	background: #fff;
	display: none;
	height: inherit;
	overflow: inherit;
	padding: 0 0 6px 0;
}

#sponsor .tabs	{
	background: #fff;
	display: none;
}

.resultitem-leader	{
	align-items: center;
	padding: 12px 8px !important;
}


/*  
	VIEWPORT
========== */
					  @media (min-width: 600px) {	
						 			
						 		#sponsor	{
									margin: 0 0 18px 0;
								}
						  
						  
						  
						}
						
						
						@media (min-width: 960px) {	
						
						#sponsor #results {
							border-radius: 0 0 16px 16px 
						}
						
						.sponsor-leaders .sponsor-promo	{
							border-radius: 16px 16px 0 0 ;
						}
						
						.sponsor-leaders #results	{
							display: block !important;
						}
												
						.sponsor-leaders .tabs	{
							display: flex !important;
						}
						
						#sponsor h4 span	{
							display: none;
						}
						
						}



/* ==========================================================================
   SPONSOR -- GIVEAWAY PAGE LAYOUT
========================================================================== */
#sponsor-details > header	{
	color: #fff;
	padding: 24px 0 120px 0;
	position: relative;
	text-align: center;
}

#sponsor-details > header blockquote	{
  background-color: #fff;
  color: #000;
  font-size: .7em;
  font-style: italic;
  font-weight: 700;
  padding: 6px 18px;
  position: absolute;
  left: 24px; 
  text-transform: uppercase;
  transform: translate(-50%, -50%); /* Position text in the middle */
  transform: rotate(-6deg);
  mix-blend-mode: screen; /* This makes the cutout text possible */
}
	#sponsor-details .sponsor-logo	{
		padding: 36px 0 18px 0;
	}
	
	#sponsor-details > header p	{
		font-size: 1.25em;
		font-style: italic;
		font-weight: 700;
		margin: 0 auto 1em auto;
		max-width: 600px;
	}
	
	#sponsor-details > header p a	{
		border-bottom: 1px dotted #fff;
		color: #fff;
		font-weight: 500;
		
	}

/* override grid */
#sponsor-details #view	{
	min-height: inherit !important;
}


/* PAGE SECTION COMPONENTS */
	
	#sponsor-details article header	{
		padding: 0 18px 36px 18px;
	  text-align: center;
	  margin: 0 auto;
	}
	
	#sponsor-details #results	{
		display: block !important;
	}
	
	#sponsor-details .tabs	{
		display: flex !important;
	}

.sponsor-wrapper {
	align-items: center;
	margin-bottom: 40px;
}

.sponsor-badges	{
		display: flex;
		flex-wrap: wrap;
		padding-bottom: 36px;
	}

/*  
	GIVEAWAY PRIZES
================= */
#sponsor-details .card	{
	border: 0 !important;
}

/*  
SPONSOR CONTENT
================ */
.sponsor-content	{
	margin: 0 auto 0 0;
	padding: 0 12px;
}

	.sponsor-content h4	{
	 	font-size: 2.25em;
		font-weight: 700;
	 	letter-spacing: normal;
	 	margin: .5em 0 1em 0;
	}
	
	
	.sponsor-content  p	{
		margin: 0 0 1.5em 0;
		line-height: 1.4em;
	}	

	.sponsor-content  em	{
		font-style: italic;
	}
	
	.sponsor-content strong	{
		font-weight: 500;
	}
	
	.sponsor-content  ul	{
		font-weight: 300;
		list-style: circle;
		margin: 0 1em 2em 2.5em;
		;
	}
		
		.sponsor-content  li	{
			margin: 0 0 1em 0;
			line-height: 1.25em;
		}

.sponsor-image	{
	text-align: center;
}

.sponsor-image img	{
	width: 90%;
}

/* DARK BACKGROUND INVERT */
.invert h5	{
	border: 2px solid #fff;
	color: #fff;
}

.invert p	{
	color: #fff;
}

.invert blockquote	{
	color: #fff;
}


/*social link overrides */
#sponsor-details .profile-social	{
	justify-content: left;
	list-style: none;
	margin: -24px 0 0 -18px;
}
	#sponsor-details .profile-social a,
	#sponsor-details .profile-social svg	{
		height: 70px;
		width: 70px;
	}

/*  
TBD - COUNTDOWN CLOCK
====================== */

#countdown {
	  color: #fff;
	  margin: 0 auto 24px auto;
	  text-align: center;
	}
	
	
	#countdown li {
	  border-radius: 12px;
	  display: inline-block;
	  font-size: .8em;
	  list-style-type: none;
	  padding: 4px 12px 8px 12px;
	  text-transform: uppercase;
	}
	
	#countdown li span {
	  display: block;
	  font-size: 3em;
	  font-weight: 600;
	}

	


/*  
	VIEWPORT
========== */
						
						@media (min-width: 600px) {
								
						
								
								.sponsor-message	{
									display: flex;
								}
								
								.sponsor-badges .badge	{
									width: 22%;
								}
								
								#countdown li {
									  font-size: 1em;
									  padding: 8px 18px 12px 18px;
									}
									
									#countdown li span {
									  font-size: 3em;
									}
								
								
						}
						
						
						
						@media (min-width: 768px) {
								
									#sponsor-details > header	{
										padding: 36px 0 120px 0;
									}
									
									#sponsor-details > header p	{
										font-size: 1.75em;
										padding: 0;
									}
									
									#sponsor-details > header blockquote {
										font-size: 1.25em;
									}
									
									.sponsor-wrapper {
										display: flex;
									}
									
									.sponsor-content 	{
										max-width: 500px;
									}
									
									.sponsor-content p	{
										font-size: 1.25em;
									}
									
									.sponsor-wrapper #sponsor	{
										min-width: 400px;
									}
									
									.sponsor-image	{
										text-align: left;
									}
									

									
						}



/*==========================================================================
  Global header actions (profile, notifications, search)
========================================================================== */
#sitenav-actions	{
	padding: 50px 0 0 0;
}


#sitenav-actions .tabs	{
		background: #fafafa;
		justify-content: flex-start;
		width: 100%;
		z-index: 0;
	}

		#sitenav-actions .tabs li	{
			margin: 0 12px;
		}

#sitenav-actions #results	{
	padding: 0 !important;
}
				
				/* OVERRIDE - FIXED SEARCH ON MOBILE */
				#sitenav-actions.search	{
					position: absolute;
					top: 0;
					width: 100%;
					z-index: 1100;
				}

				/* OVERRIDE - FIXED NOTIFY TABS ON MOBILE */
				#sitenav-actions.notify #results,
				#sitenav-actions.search #results.active	{
					padding: 44px 0 0 0 !important;
				}
				
				
				
				#sitenav-actions.notify .tabs	{
					position: fixed;
					z-index: 1100;
				}

				
				






/* NOTIFICATIONS 
================ */

				
.resultitem-notify	{
	align-items: flex-start !important;
	padding: 12px 8px 8px 8px !important;
}

.resultitem-notify p	{
	line-height: 1.3em;
	
}

.resultitem-notify p + p	{
	font-style: italic;
	margin: 0 16px 2px 0 !important;
	
}

.resultitem-notify p a	{
	color: #4a4a4a;
	font-weight: 300;
}

.resultitem-notify p strong	{
	font-weight: 400;
}

.resultitem-notify span	{
	align-self: center;
	font-size: 1em !important;
	font-weight: 700 !important;
}


.notify-img	{
			height: 70px;
			width: 70px;
		}


/* SEARCH 
================ */
.search-input	{
	background: #fafafa;
	border-bottom: 1px solid #eee;
	display: flex;
	height: 50px;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1100;
}
	
	/* OVERRIDE - SEARCH INPUT ON TAGPOST */
	#form-tag-profiles .search-input	{
		position: relative;
	}
	
	
	.search-input + .tabs	{
		position: fixed;
		top: 50px;
		z-index: 1100 !important;
	}
	
	
	
	.search-input svg	{
		fill: #b8b8b8;
		height: 42px;
		margin: auto 0;
		width: 42px;
	}
	
	.search-input input	{
		background: #fafafa; /* color-lighter-grey */
		border: 0;
		font-family: Lato, sans-serif;
		font-size: 1em;
		outline: none;
		padding: 8px 0 8px 12px;
		margin: auto 0 auto -10px;
		width: 270px;
		
		-moz-box-sizing: border-box !important; /* For legacy (Firefox <29) Gecko based browsers */
		  -webkit-box-sizing: border-box !important; /* For legacy WebKit based browsers */
		box-sizing: border-box !important; 
		-webkit-appearance: none !important;
	}
	
		.search-input input::placeholder	{
			color: #8b8b8b !important; /* color-dark-grey */
		}
		
		.search-input input:focus::placeholder	{
			opacity: 0;
			transition: opacity 0.6s 0.6s ease;
		}
		
		.search-input .btn-small	{
			align-self: flex-start;
			margin: auto 12px auto 0;
		}
		
		

/* PREVIOUS RESULTS */
.search-recent	{
	padding: 24px 16px 12px 16px;
	z-index: 1000;

}

.search-recent ul li	{
	font-size: 1em;
	padding: 8px 0;
	line-height: 1.4em;
}

/* SEARCH RESULTS */
.resultitem-search	{
	padding: 0 !important;
}


.resultitem-search a	{
	align-items: center;
	display: flex;
	padding: 12px 8px;
	width: 100%;
}
	
	/* Active state for keydown on profile tag in comment */
	.resultitem-search a:hover,
	.resultitem-search a.active	{
		background: #fafafa;
	}
	

.resultitem-search svg	{
	flex-shrink: 0;
	height: 36px;
	width: 36px;
}	
	
	

/* PROFILE DROPDOWN */
#profile-options + .action-menu	{
		border: 0;
		box-shadow: none;
		display: block;
		position: relative;
		top: auto;
		right: auto;
		width: 100%;
	}
	
	#profile-options + .action-menu svg	{
		display: none;
	}

.resultitem-profile	{
	padding: 0 !important;
}

.resultitem-profile a	{
	align-items: center;
	display: flex;
	padding: 12px 8px;
	width: 90%;
}

.resultitem-profile a + a	{
	width: 10%
}



/* VIEWPORT 
=========== */
							@media (min-width: 768px) {
										
										#sitenav-content  {
											border-bottom: 1px solid #eee;
											border-left: 1px solid #eee;
											border-right: 1px solid #eee;
											position: absolute;
											right: 0;
											width: 400px !important;
										}
										
										#siteaction-wrapper .tabs	{
											width: 400px !important;
										}
										
										#sitenav-actions.search	{
											position: relative;
											z-index: inherit;;
										}
										
										
										.search-input + .tabs,
										#sitenav-actions.notify .tabs	{
											position: relative;
										}
									
										.search-input	{	
											border-bottom: 1px solid #eee;
											border-top: 0;
											top: 50px;
											width: 400px !important;
										}
										
												/* OVERRIDE TAGPOST */
												#form-tag-profiles .search-input	{
													top: 0;
												}
										
										
										.search-input input	{
											width: 340px;
										}
			
										.search-input .btn-small	{
											display: none;
										}
										
										
										
										
										
										#sitenav-actions.notify #results	{
											padding: 0 !important;
										}
										
										#sitenav-actions.search #results	{	
											padding: 42px 0 0 0 !important;	
										}
							
							}



/*==========================================================================
  Shop Activity
========================================================================== */
#shop-activity	{
	padding: 0;
}


.shop-listing	{
	border-bottom: 1px solid #eee;
	display: flex;
	flex-direction: row;
	padding: 18px 12px;
	margin: 0 auto;
	max-width: 728px;
	
}
	
.shop-listing a img	{
	height: 80px;
	width: 80px;
	
}

.shop-listing div	{
		margin: 0 auto 0 8px;
	}
	

.shop-listing div p	{
		font-size: .8em;
		font-style: italic;
		margin: 4px 0 0 0;
	}

	
.listing-actions	{
	text-align: right;
	margin: 0 0 0 18px;
}
		
	.listing-actions strong	{
		font-size: 1.1em;
		font-weight: 700;
	}	
			
	.listing-actions .status	{
		border: 1px solid #b8b8b8; /* color-dark-grey */
		border-radius: 3px;
		color: #4a4a4a; /* color-darker-grey */
		display: inline-block;
		font-size: .6em;
		margin: 0 0 8px 0;
		letter-spacing: 1px;
		padding: 2px 4px;
		opacity: .95;
		text-align: center;
		text-transform: uppercase;
	}	
	
	/* CHANGE BG ON NEEDS ATTENTION
	.listing-actions .status.attention	{
		border: 1px solid #4a4a4a;
		background: #4a4a4a;
		color: #fff;
	}
	*/





/* LISTING DETAIL 
================= */
#listing-detail	{
	padding: 50px 0 60px 0;
}

#listing-detail > header	{
	margin: 0 auto;
	max-width: 800px;
	padding: 18px 16px;
}

.listing-card	{
  background: #fff;
  border-bottom: 1px solid #eee; /* color-dark-grey */
  box-shadow: 0 0 3px 1px #f6f6f6; /* color-box-shadow */ 
  margin: 0 auto 18px auto;
  max-width: 800px;
  padding: 12px 0 24px 0;
  position: relative;
}

.listing-card + section	{
	padding: 0 12px;
}

.listing-card h4	{
	margin: 0 0 6px 0;
}

.listing-card p	{
	margin: 0 0 6px 0;
}


.listing-card #image-gallery	{
	margin: 16px 12px;
}



/* LISTING OFFER 
================ */
.offer {
	border-bottom: 1px solid #eee;
	padding: 18px 0 24px 0;
	margin: 0 auto ;
	max-width: 700px;
}

.offer .shop-actions li:last-child	{
	color: #8b8b8b;
	margin: 12px 0 0 0;
}


/* LISTING FOOTER + SHOP FEE 
============================ */
.listing-card footer	{
			border-top: 1px solid #eee;
			margin: 12px 0 0 0;
			padding: 8px 0 0 0;
		}   
		
			.listing-card footer ul	{
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				margin: 0 12px 0 0;
				white-space: nowrap;
			}
			
			
			.listing-card footer ul li	{
				margin: 18px 0 18px 18px;
			}


#shop-fee	{
	align-items: center;
	bottom: 0;
	display: flex;
	fill: #4a4a4a;
	padding: 4px 12px 6px 0;
	width: calc(100% - 16px);
}

	#shop-fee svg	{
		height: 48px;
		width: 48px;
	}
	
	#shop-fee p	{
		font-size: .9em;
		margin: 0;
	}
	
	#shop-fee p strong	{
		display: block;
		font-size: 1em;
		font-weight: 700;
	}
	


/* LISTING SHOP LAYOUT 
====================== */
.listing-card.shop section	{
	flex-flow: inherit !important;
	padding: 12px 12px 0 12px;
}

.offer.shop section	{
	flex-flow: inherit !important;
	padding: 0 12px;
}

.listing-card.shop .shop-copy,
.offer.shop .shop-copy	{
	max-width: 500px;
	padding: 0 18px 0 0;
}





/* LISTING PAYMENT LAYOUT 
========================= */
.payment {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 0 12px;
}

.payment > header	{
	color: #8b8b8b;
  display: block;
  font-size: .9em;
  padding: 18px 0;
  width: 100%;
}

.payment > header p	{
	margin: 8px 0 4px 0;
}


.payment-contact,
.payment-transaction	{
			width: 100%;
		}

.payment-contact p,
.payment-transaction p	{
			margin: 0 0 36px 0;
		}		
	
		
	.payment-contact span	{
		display: block;
		font-size: 1em;
		font-weight: 300;
		padding: 0 0 4px 0;
	}
		
	.payment-transaction p {
		margin: 8px 0 14px 0;
		text-align: right;
	}
	
/* TRANSACTION TABLE */
.payment-transaction table	{
	border-collapse: collapse;
	width: 100%;
}

.payment-transaction td	{
	font-weight: 300;
	padding: 0 0 12px 0;
	width: 75%;
}

.payment-transaction td em	{
	font-style: italic;
	font-size: .8em;
}
		
.payment-transaction td + td	{
	font-weight: 500;
	text-align: right;
	width: 25%;
}

.payment-transaction tfoot tr	{
	border-top: 1px solid #eee;
}

.payment-transaction tfoot td	{
	font-size: 1em;
	font-weight: 500;
	padding: 12px 0 8px 0;
	text-align: right;
}


/* FEEDBACK - INLINE & MODAL */
.feedback	{
	border-top: 1px solid #eee;
	width: 100%;
}

	.feedback a,
	.feedback.complete	{
		align-items: center;
		display: flex;
	}
	
	.feedback.complete	{
		padding: 12px 0 0 0;
	}
	
	.feedback a svg,
	.feedback.complete svg	{
		height: 60px;
		width: 60px;
	}
	
	.feedback.complete svg	{
		flex-shrink: 0;
	}
	
	.feedback.complete p	{
		font-size: .9em;
		font-style: italic;
		line-height: 1.2em;
		margin: 4px 16px 0 0;
	}
	
	.feedback.complete strong {
		display: block;
		font-size: 1em;
		font-weight: 500;
	}

/* MODAL - FEEDBACK RATING 
========================== */

.feedback-actions	{
		padding: 0 0 24px 0 !important;
	}
	
	.feedback-actions ul	{
		display: flex;
		justify-content: space-between;
	}
		.feedback-actions li	{
			text-align: center;
			width: 33%;
		}
		
		.feedback-actions a	{
			color: #8b8b8b;
			fill: #8b8b8b;
			display: block;
		}
		
		.feedback-actions a:hover,
		.feedback-actions a.active	{
			color: #3399cc;
			fill: #3399cc;
		}
		
		
		.feedback-actions li svg {
			height: 120px;
			width: 120px;
			margin: -24px 0 0 -4px;
		}
		
		.feedback-actions li strong	{
			display: block;
			margin-top: -24px;
		}





/* VIEWPORT 
=========== */
							@media (min-width: 600px) {
									
									.payment {
										display: flex;
									}
									
									.payment-contact,
									.payment-transaction	{
										flex: 1;
									}
									
									.listing-card footer	{
										align-items: center;
										display: flex;
										justify-content: space-between;
									}
									
									.listing-card footer ul li	{
											margin: 0 0 0 18px;
										}
									
									.listing-card #image-gallery	{
										margin: 16px auto;
									}
									
							}












/*==========================================================================
   Profiles - Stats & Publications
========================================================================== */	
#stats	{
	padding-bottom: 36px;
  padding-top: 24px;
}

																												/* TBD - MIGHT NOT NEED THIS 
																												#stats .two-col	{
																													min-width: 340px;
																												}
																												*/

#stats .tabs	{
	margin-bottom: 18px;
}

/* Breakdown */
.breakdown section	{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}




.breakdown a	{
	display: inline-block;
	margin: 0 auto 24px auto;
	padding: 12px 8px;
	width: 42%;
}

.breakdown a:hover	{
	background: #fafafa;
}
	
	.breakdown span	{
		align-items: center;
		display: flex;
		
	}

	.breakdown strong	{
		font-size: 1.75em;
		font-weight: 900;
		margin: 0 0 0 8px;
	}	
	
	.breakdown h3	{
		color: #4a4a4a;
		margin: 2px 0 2px 0;;
	}
	
	
	.breakdown p	{
		color: #8b8b8b;
		font-size: .8em;
		line-height: 1.1em;
	}
	
/* PLATFORMS CREATED */

.created #view {
    min-height: inherit !important;
    width: 100%;
}


/* DTA LAYOUT */
.stats-dta	{
  margin: 6px 0 18px 0;
   
}
   		
.stats-dta li	{
  margin: 0 0 8px 0;
}	
 		
.stats-dta em	{
	color: #8b8b8b;
	font-size: 1em;
	font-style: italic;
	font-weight: 300;

}	


/* PUBLICATIONS */
.publications ul	{
	align-content: space-around;
	display: flex;
	flex-wrap: wrap;
	text-align: center;
}

.publications li	{
	margin: 0 auto 18px auto;
}


.publications a	{
	display: block;
	max-width: 136px;
}

.publications a img	{
	width: 100%;
}

.publications h3	{
	font-size: .8em;
}

/* VIEWPORT 
=========== */
							@media (min-width: 600px) {
								
								.stats-profile a	{
									font-size: .7em;
								}
								
								
								.stats-profile strong	{
									font-size: 3.75em;
								}
						   
						   	.breakdown a {
							   	width: 31%;
						   	}
								
							
							}

/*
							@media (min-width: 1024px) {
								
							 
						   	.breakdown a {
							   	width: 23%;
						   	}
								
							
							}
*/




/* ==========================================================================
   Activity Feed - Tag Posts
   ========================================================================== */

#modal.tagpost	{
		max-width: 1000px;
	}

#modal.tagpost .modal-wrapper	{
	padding: 0;
}

#modal.tagpost .tabs	{
	margin: 0;
}

#modal.tagpost #form-tag-profiles	{
	background: #fff;
	padding: 0 !important;
	position: relative;
}

#modal.tagpost .form-actions	{
	margin: 0 0 0 12px;
}


/* OVERRIDE POST DETAILS */
#modal.tagpost article[class^="feeditem-"]	{
	border: 0;
	box-shadow: none;
	display: none;
	width: inherit !important;
}


#modal.tagpost .feeditem-instagram > img,
#modal.tagpost .feeditem-news > img	{
	width: 100%;
}

					
/* VIEWPORT 
=========== */						
						@media (min-width: 768px) {
								
								#modal.tagpost	{
									height: inherit;
									margin: 36px auto;
								}	
								
								#modal.tagpost .modal-wrapper	{
									display: flex;
									padding: 0 !important;
									justify-content: space-between;
								}
								
								#modal.tagpost .tabs	{
									display: none;
								}

								#modal.tagpost #results	{
									height: 660px;
									padding: 0 !important;
								}
								
								#modal.tagpost article[class^="feeditem-"]	{
									display: block;
									margin: 0;
									order: 1;
								}
										
								#form-tag-profiles	{
									order: 2;
									width: 400px !important;
								}

						}








/* ==========================================================================
   ARTICLE LAYOUT (formating medium.com json)
========================================================================== */

/*  
	NEWS & RELATED STORY LAYOUT
============================= */
.stories	{
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 24px;
}

.stories article	{
	background: #fff;
	box-shadow: 0 0 3px 1px #f6f6f6;
	margin: 0 auto 24px auto;
	width: 100%;
}

	.stories section	{
		padding: 12px 16px 18px 16px;
	}
	
	.stories h2	{
		margin-bottom: 4px;
	}
	
	.stories h3 a	{
		color: #4a4a4a;
		display: block;
		font-size: 1.2em;
		line-height: 1.25em;
		margin-bottom: 8px;
	}
	
	.stories p	{
		line-height: 1.4em;
	}
	
	.stories img	{
		width: 100%
	}



/*  
	ARTICLE LAYOUT
================ */
#story header,
#story section	{
	max-width: 740px;
	margin-top: 24px;
}
	
	
	#story header h2	{
		font-size: .8em;
		font-weight: 800;
	}
	
	#story header p	{
		color: #8b8b8b;
		font-size: .9em;
		font-style: italic;
	}

#story figure	{
	margin: 0 auto;
	padding: 48px 0 24px 0; 
	text-align: center;
}

#story figcaption	{
	color: #8b8b8b;
	font-size: .8em;
	text-align: center;
	margin: 12px 0 24px 0;
}

	#story figcaption a	{
		color: #4a4a4a;
		font-weight: 600;
	}

#story img	{
	width: 100%;
}

#story section img	{
	max-width: 600px;
}

#story h1	{
	font-size: 2.25em;
	font-style: italic;
	font-weight: 400;
	margin: 0;
}

#story h3,
#story h4	{
	font-size: 1.8em;
	font-style: italic;
	font-weight: 600;
	padding: 0 0 8px 0;
}


#story p	{
	font-size: 1.2em;
	font-weight: 300;
	letter-spacing: .008em;
	line-height: 1.65em;
	padding-bottom: 1.8em;
}

#story h4 + p	{
	font-size: 1em;
	font-style: italic;
}


#story h4 a	{
	color: #4a4a4a;
	text-decoration: underline;
}

#story blockquote	{
	border-left: 2px solid #eee;
	color: #8b8b8b;
	font-size: 1.4em;
	font-style: italic;
	font-weight: 500; 
	padding: 12px 0 12px 12px;
	margin: 0 0 24px 12px;
}


#story ul	{
	font-size: 1.2em;
	font-weight: 300;
	list-style: circle;
	margin: 0 1em 4em 1.75em;
	;
}
	
	#story li	{
		margin: 0 0 1.5em 0;
	}


/*  
	MEDIUM LINKS
============== */
#story footer	{
	background: #4a4a4a;
	color: #fff;
}

#story footer section	{
	align-items: center;
	display: flex;
}

#story footer h4	{
	font-size: 1.2em;
}

#story footer h4 a	{
	color: #fff !important;
}

#story footer svg	{
	fill: #fff;
	height: 80px;
	width: 80px;
}

/*  
	RELATED STORY
=============== */

.story-related	{
	background: #fafafa;
	padding: 60px 0 48px 0;
}

.story-related header	{
	margin: 0 auto 36px auto;
	text-align: center;
}








/*  
	VIEWPORT
========== */
						
						
						@media (min-width: 600px) {
							.stories article	{
									width: 44%;
								}
							
						}
						
						@media (min-width: 768px) {
							
							#story h1	{
								font-size: 2.75em;
							}
							
							#story header p	{
								font-size: 1em;
							}
							
							#story p	{
								font-size: 1.3em;	
							}
							
							#story h4 + p	{
								font-size: 1.1em;
							}
							
							#story blockquote	{
								font-size: 1.8em;
								margin: 0 0 24px 24px;	
							}
							
							
							}


/* ==========================================================================
   DISCOVER LAYOUT
========================================================================== */


article[id^="discover-"]	{
	margin: 0 auto;
	position: relative;
}


article[id^="discover-"] header	{
	text-align: center;
	padding: 0 0 24px 0;
}

article[id^="discover-"] header svg {
	fill: #8b8b8b;
	margin: 24px 0 -18px 0;
}


/*  
DISCOVER - TRENDING
==================== */
#discover-trending {
	padding: 60px 0 0 0;
}

/*  
DISCOVER - PROFILES (+ NOTORIOUS WINNERS)
==================== */

#discover-profiles {
	background: #fafafa;
	padding: 48px 0 60px 0;
}

	#sponsor-winners {
		padding: 48px 0 60px 0;	
	}

#discover-profiles section,
#sponsor-winners section {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

#discover-profiles article,
#sponsor-winners article {
		background: #fff;
		border-radius: 8px;
		box-shadow: 0 0 4px 1px #eee;
		padding: 18px 0 12px 0;
		margin: 0 0 18px 0;
		text-align: center;
		width: 48%;
	}
	
	#sponsor-winners article {
		width: 100%;
	}

	
#discover-profiles article img,
#sponsor-winners article img {
		height: 100px;
		padding: 0 0 6px 0;
		width: 100px;
		
	}
	
#discover-profiles article p,
#sponsor-winners article p {
	padding: 18px 0 4px 0;
}

	#sponsor-winners article strong {
		display: block;
		font-size: 1.4em;
		font-weight: 800;
		margin: 12px 0;
	}
	
	#sponsor-winners article sup {
		font-size: .5em;
		vertical-align: super;
	}
	
	

#discover-profiles .btn-small {
	border: 1px solid #3399cc;
	color: #3399cc;
}

	#discover-profiles .btn-small:hover {
		background: #3399cc;		
		color: #fff;
	}


/*  
DISCOVER - YOUTUBE
==================== */
#discover-youtube  {
	
}

.youtube-thumb {
	padding: 12px 0 24px 0;
}

.youtube-thumb {
	display: flex;
	justify-content: space-between;
}

.youtube-thumb a {
	display: block;
	width: 36%;
}

.youtube-thumb img {
	display: block;
	margin: 0 8px 0 0;
	width: 100%;
}

.youtube-thumb div {
	width: 60%;
}



/*  
DISCOVER - INSTAGRAM
==================== */

#discover-instagram	{
	background: #f1f2f2;
}

#discover-instagram ul	{
	display: flex;
	flex-flow: wrap;
	justify-content: space-around;
	padding: 0 0 100px 0;
}

	#discover-instagram li {
		width: 33%;
	}
	
	#discover-instagram li img {
		display: block;
		width: 100%;
	}

			/* CUSTOM DIVIDERS */
			.divider-instagram-top {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				overflow: hidden;
				line-height: 0;
				transform: rotate(180deg);
			}
			
			.divider-instagram-top svg {
				position: relative;
				display: block;
				width: calc(100% + 1.3px);
				height: 53px;
			}
			
			.divider-instagram-top .shape-fill {
				fill: #FFFFFF;
			}
			
			.divider-instagram-bottom {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				overflow: hidden;
				line-height: 0;
			}
			
			.divider-instagram-bottom svg {
				position: relative;
				display: block;
				width: calc(100% + 1.3px);
				height: 53px;
			}
			
			.divider-instagram-bottom .shape-fill {
				fill: #fff;
			}

/*  
DISCOVER - SWAG
================= */
#discover-swag {
	padding: 60px 0 48px 0;
}


#discover-swag ul	{
	display: flex;
	flex-flow: wrap;
	justify-content: space-around;
	margin: 36px 0 0 0;
}

	#discover-swag li	{
		margin: 0 0 36px 0;
		text-align: center;
		width: 45%;
	}
	
	#discover-swag li a {
		color: #8b8b8b;
		font-size: 1em;
		font-weight: 600;
	}
	
		#discover-swag li a:hover {
			color: #3399cc;
		}
	
	#discover-swag img {
		display: block;
		margin: 0 0 12px 0;
		width: 100%
	}

/*  
DISCOVER - ROYALE
================= */
#discover-royale	{
	background: #ff0099;
	padding: 60px 0 0 0;
}

#discover-royale img	{
	display: block;
	min-width: 290px;
	width: 100%;
}

#discover-royale p	{
		color: #fff;
		font-size: 2em;
		font-style: italic;
		margin: 0 0 18px 0;
		text-align: left;
		
	}

	#discover-royale p strong	{
		opacity: .7;
	}

#discover-royale .btn-link {
	border: 1px solid #fff;
	color: #fff;
	margin: 0 0 36px 0;
}

#discover-royale .btn-link:hover {
	background: #fff;
	border: 1px solid #fff;
	color: #ff0099;
}

			/* CUSTOM DIVIDERS */
			.divider-discover-royale {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				overflow: hidden;
				line-height: 0;
			}
			
			.divider-discover-royale svg {
				position: relative;
				display: block;
				width: calc(100% + 1.3px);
				height: 60px;
			}
			
			.divider-discover-royale .shape-fill {
				fill: #FFFFFF;
			}


/*  
VIEWPORT
========== */
					
					
					@media (min-width: 600px) {
						#sponsor-winners article {
							max-width: 240px;
							width: 30%;
							
						}
						
						
						#discover-youtube section {
							display: flex;
							flex-wrap: wrap;
							justify-content: space-between;
							padding-bottom: 60px;
						}
						
							.youtube-thumb {
								display: block;
								width: 48%;
							}
							
							.youtube-thumb a {
								display: inherit;
								padding: 0;
								width: 100%;
							}
							
							.youtube-thumb a img {
								margin: 0 0 12px 0;
								width: 100%;
							} 
							
							.youtube-thumb div {
								width: 100%;
							}
							
							
							#discover-youtube article:first-child {
								width: 100%;
							}
							
							#discover-youtube article:first-child h3 {
								font-size: 1.25em;
							}
							
						
						#discover-instagram li {
							width: 25%;
							
						}
						
						
						#discover-royale section {
							align-items: center;
							display: flex;
						}
						
						#discover-royale img	{
							min-width: 360px;
						}
						
						
					}
					
					@media (min-width: 768px) {
						#discover-profiles article {
							width: 24%;
						}
						
						
					}
					
					@media (min-width: 1024px) {
						
						.youtube-thumb {
							width: 30%;
						}
						
						#discover-youtube article:nth-child(-n+2) {
							width: 48%;
						}
						
						#discover-youtube article:nth-child(-n+2) h3 {
							font-size: 1.25em;
						}
						
						#discover-swag li	{
							width: 24%;
						}
						
						#discover-royale p	{
							font-size: 3em;
						}
						
						
						
					}



/* ==========================================================================
   ROYALE LAYOUT
========================================================================== */


#royale-details > header	{
	align-items: center;
	background: url(../_i/pages/royale-background.png) no-repeat center center; 
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  background-size: cover;
	display: flex;
	height: 380px;
	padding: 24px 0;
	position: relative;
	text-align: center;
}


	#royale-details > header blockquote	{
		background: #ff0099;
		box-shadow: 0 0 4px 2px #eee;
		color: #fff;
		display: inline-block;
		font-size: 1.4em;
		font-style: italic;
		font-weight: 700;
		margin: 1px 0;
		opacity: .9;
		padding: 12px 8px;
		transform: rotate(-6deg);
	}

#royale-details article	{
	position: relative;
}

#royale-details article header	{
	padding: 48px 18px 36px 18px;
	text-align: center;
	margin: 0 auto;
}

.royale-wrapper {
	align-items: center;
	position: relative;
}

.royale-content	{
	margin: 0 auto 0 0;
	padding: 0 12px;
}




/* Royale - Large Callout under header */
#royale-callout {
	background: #ff0099;
	padding: 0 0 136px 0;
}
#royale-callout .royale-wrapper	{
	text-align: center;
}

#royale-callout .royale-wrapper svg	{
	fill: #fff;
	height: 160px;
	margin: 0 auto -24px auto;
	width: 160px;
}

#royale-callout p	{
	color: #fff;
	font-size: 2em;
	font-style: italic;
	text-align: left;
	
}

	#royale-callout p strong	{
		opacity: .7;
	}


#royale-upsell {
	background-image: linear-gradient(15deg, #13547a 0%, #80d0c7 100%);
}



/*  
VIEWPORT
========== */
					
					
					@media (min-width: 600px) {
						#royale-details > header	{
							height: 480px;
						}
						
						#royale-details > header blockquote	{
							font-size: 2.5em;
						}
						
						#royale-callout .royale-wrapper svg	{
							height: 220px;
							margin: 0 auto -36px auto;
							width: 220px;
						}
						
						#royale-callout p	{
							font-size: 3em;
						}
					}
					
					@media (min-width: 1024px) {
						
						#royale-details > header	{
							height: 620px;
						}
						
						#royale-details > header blockquote	{
							font-size: 4em;
						}
						
						#royale-callout .royale-wrapper svg	{
							height: 300px;
							margin: 0 auto -36px auto;
							width: 300px;
						}
						
						#royale-callout p	{
							font-size: 4em;
						}
						
					}











/* ==========================================================================
   CUSTOM SVG PAGE DIVIDERS
========================================================================== */


.custom-shape-divider-top {
	top: 0;
	left: 0;
	width: 100%;
	overflow: hidden;
	line-height: 0;
	transform: rotate(180deg);
}

.custom-shape-divider-top svg {
	position: relative;
	display: block;
	width: calc(100% + 1.3px);
	height: 70px;
}

.custom-shape-divider-top .shape-fill {
	fill: #fff;
}


/* DIVIDER BOTTOM OF ROYALE HERO */
.divider-royale-waves {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	overflow: hidden;
	line-height: 0;
	transform: rotate(180deg);
}

.divider-royale-waves svg {
	position: relative;
	display: block;
	width: calc(100% + 1.3px);
	height: 60px;
}

.divider-royale-waves .shape-fill {
	fill: #ff0099;
}


/* DIVIDER BOTTOM OF ROYALE CALLOUT */
.divider-callout-arrow  {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 80px;
	width: 100%;
	overflow: hidden;
	line-height: 0;
}

.divider-callout-arrow svg {
	position: relative;
	display: block;
	width: calc(100% + 1.3px);
	height: 80px;
}

.divider-callout-arrow .shape-fill {
	fill: #FFFFFF;
}



/* --------------------------------------  BELOW THIS NEEDS TO BE REVIEWED ------------------------------------------ */


/* --------------------------------------  BELOW THIS NEEDS TO BE REVIEWED ------------------------------------------ */


/* --------------------------------------  BELOW THIS NEEDS TO BE REVIEWED ------------------------------------------ */


/* --------------------------------------  BELOW THIS NEEDS TO BE REVIEWED ------------------------------------------ */


/* --------------------------------------  BELOW THIS NEEDS TO BE REVIEWED ------------------------------------------ */


/* --------------------------------------  BELOW THIS NEEDS TO BE REVIEWED ------------------------------------------ */


		
	

																															/* TEMP - fragments test */
																																body#fragment	{
																																	background: #4a4a4a;
																																}
																																
																																
																																body#fragment .action-menu {
																																	display: block;
																																	position: relative;
																																	top: 12px;
																																}
																																
																																#fragment h2	{
																																	font-size: 1em;
																																	margin: 42px 0 6px 0;
																																}
																																
																															/* TEMP - fragments test */