@font-face {				font-family: 'BrandonGrotesque';
						src: url('https://www.perfectstrangers.com/public/fonts/brandon_reg-webfont.eot');
						src: url('https://www.perfectstrangers.com/public/fonts/brandon_reg-webfont.eot?#iefix') format('embedded-opentype'),
							url('https://www.perfectstrangers.com/public/fonts/brandon_reg-webfont.woff') format('woff'),
							url('https://www.perfectstrangers.com/public/fonts/brandon_reg-webfont.ttf') format('truetype'),
							url('https://www.perfectstrangers.com/public/fonts/brandon_reg-webfont.svg#BrandonGrotesque') format('svg');
						font-weight: normal;
						font-style: normal;
}

@font-face {				font-family: 'BrandonGrotesque';
						src: url('https://www.perfectstrangers.com/public/fonts/brandon_reg_it-webfont.eot');
						src: url('https://www.perfectstrangers.com/public/fonts/brandon_reg_it-webfont.eot?#iefix') format('embedded-opentype'),
							url('https://www.perfectstrangers.com/public/fonts/brandon_reg_it-webfont.woff') format('woff'),
							url('https://www.perfectstrangers.com/public/fonts/brandon_reg_it-webfont.ttf') format('truetype'),
							url('https://www.perfectstrangers.com/public/fonts/brandon_reg_it-webfont.svg#BrandonGrotesque') format('svg');
						font-weight: normal;
						font-style: italic;
}

@font-face {				font-family: 'BrandonGrotesque';
						src: url('https://www.perfectstrangers.com/public/fonts/brandon_bld-webfont.eot');
						src: url('https://www.perfectstrangers.com/public/fonts/brandon_bld-webfont.eot?#iefix') format('embedded-opentype'),
							url('https://www.perfectstrangers.com/public/fonts/brandon_bld-webfont.woff') format('woff'),
							url('https://www.perfectstrangers.com/public/fonts/brandon_bld-webfont.ttf') format('truetype'),
							url('https://www.perfectstrangers.com/public/fonts/brandon_bld-webfont.svg#BrandonGrotesque') format('svg');
						font-weight: bold;
						font-style: normal;
}

@font-face {				font-family: 'BrandonGrotesque';
						src: url('https://www.perfectstrangers.com/public/fonts/brandon_bld_it-webfont.eot');
						src: url('https://www.perfectstrangers.com/public/fonts/brandon_bld_it-webfont.eot?#iefix') format('embedded-opentype'),
							url('https://www.perfectstrangers.com/public/fonts/brandon_bld_it-webfont.woff') format('woff'),
							url('https://www.perfectstrangers.com/public/fonts/brandon_bld_it-webfont.ttf') format('truetype'),
							url('https://www.perfectstrangers.com/public/fonts/brandon_bld_it-webfont.svg#BrandonGrotesque') format('svg');
						font-weight: bold;
						font-style: italic;
}

html.busy, html.busy * { cursor:wait !important; }
* {	padding:0; margin:0; }
html, body { height:100%; font-family: 'BrandonGrotesque','HelveticaNeue','Helvetica','Verdana',sans-serif; }

h1 { margin:1em 0em; text-align:center; font-size:25px; font-weight:bold; color:black; }
h2 {	margin:20px 0px; font-size:25px; font-weight:normal; text-align:center; }
h3 {	margin:10px 0px; font-size:20px; font-weight:normal; color:#67A0D5; }
h4 {	margin:10px 0px; font-size:15px; font-weight:normal; color:#67A0D5; }
p {	margin:14px 0px; font-size:17px; line-height:135%; }
a { text-decoration:none; color:#67A0D5; }


input, textarea {	 		padding:4px 8px; border:0px;
						background-color:#eee; color:#333;
						font:inherit; font-size:16px; 
						-webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;
						
		border-radius:			6px 6px 6px 6px;
		-moz-border-radius:		6px 6px 6px 6px;
		-webkit-border-radius:	6px 6px 6px 6px;
	 outline:0px; -webkit-appearance:none; }					
input[type='checkbox'] {		padding:4px 8px; border:0px;
						background-color:#eee; color:#333;
						font:inherit; font-size:16px; 
						-webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;
						
		border-radius:			6px 6px 6px 6px;
		-moz-border-radius:		6px 6px 6px 6px;
		-webkit-border-radius:	6px 6px 6px 6px;
	 outline:0px; -webkit-appearance:checkbox; }
input[type='radio'] {		padding:4px 8px; border:0px;
						background-color:#eee; color:#333;
						font:inherit; font-size:16px; 
						-webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;
						
		border-radius:			6px 6px 6px 6px;
		-moz-border-radius:		6px 6px 6px 6px;
		-webkit-border-radius:	6px 6px 6px 6px;
	 outline:0px; -webkit-appearance:radio; }
select {					padding:4px 8px; border:0px;
						background-color:#eee; color:#333;
						font:inherit; font-size:16px; 
						-webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;
						
		border-radius:			6px 6px 6px 6px;
		-moz-border-radius:		6px 6px 6px 6px;
		-webkit-border-radius:	6px 6px 6px 6px;
	 outline:0px; }

button {					padding:4px 8px; border:0px; 
						background-color:#67A0D5; color:#fff;
						font:inherit; font-size:14px; 
						
		border-radius:			8px 8px 8px 8px;
		-moz-border-radius:		8px 8px 8px 8px;
		-webkit-border-radius:	8px 8px 8px 8px;
	 outline:0px; -webkit-appearance:none;
						
		transition:			all 0.2s ease-in-out;
		-moz-transition:		all 0.2s ease-in-out;
		-webkit-transition:		all 0.2s ease-in-out;
	 }		
button:hover {				background-color:; cursor:pointer; }


div.primary-container {
	width:100%; height:100%; min-width:300px; min-height:300px; position:relative; }
div.secondary-container {
	width:100%; min-width:300px; min-height:300px; position:relative; }
div.minor-container {
	width:100%; min-width:300px; min-height:100px; position:relative; padding:10px 0px; }

div.single-column { width:90%; max-width:550px; margin:50px auto; }

div#menu-bar {
	position:fixed; height:100%; width:26px; padding:0px 4px;
	background-color:transparent; z-index:10; 
		transition:			all 0.2s ease-in-out;
		-moz-transition:		all 0.2s ease-in-out;
		-webkit-transition:		all 0.2s ease-in-out;
	 }

div#menu-bar-h {
	position:fixed; width:100%; 
	background-color:rgba(255,255,255,0.5);
	letter-spacing:0.1em; font-size:14px; text-transform:capitalize;
	text-align:center; z-index:10; 
		transition:			all 0.2s ease-in-out;
		-moz-transition:		all 0.2s ease-in-out;
		-webkit-transition:		all 0.2s ease-in-out;
	 }

div#menu-bar-h.white { background-color:rgba(255,255,255,1.0); }

div#menu-bar-h.dark { color:rgba(255,255,255,0.7); background-color:rgba(32,32,32,0.2); }
div#menu-bar-h.dark.white { background-color:rgba(32,32,32,0.2); }

div#menu-bar-h span, div#menu-bar-bottom span { display:inline-block; padding:3px 8px; color:#555; }
div#menu-bar-h.dark span { color:rgba(255,255,255,0.7); }

div#menu-bar-bottom {
	width:100%; background-color:#fff; text-align:center; z-index:10; 
		transition:			all 0.2s ease-in-out;
		-moz-transition:		all 0.2s ease-in-out;
		-webkit-transition:		all 0.2s ease-in-out;
	 }

#menu-current span { background-color:rgba(0,128,256,0.1); } 

div.arrow-text-below {
	position:absolute; bottom:10px; left:50%; font-weight:bold; color:#aaa; }
div.home-navigator a { color:#fff; }
div.home-navigator {
	width:90%; max-width:400px; margin:0px auto;
	color:white; background-color:rgba(128,128,128,0.4); border:2px solid white;
	text-align:center; font-size:13px; letter-spacing:1px; text-transform:uppercase;}
div.home-navigator.caption {
	padding:0px 10px; text-transform:none; text-align:left; font-size:13px; }
div.home-navigator.caption p {
	font-size:12px; }
div.home-navigator.caption p a { color:#eee; font-size:11px; }

div.info-container { width:100%; margin:0px auto; overflow:hidden; }
div.info-column-left { display:inline-block; width:450px; height:450px; vertical-align:top; }
div.info-column-right { display:inline-block; width:450px; vertical-align:top; }
.info-text-padding-box { height:55%; border-right:3px solid #ddd; padding-right:22px; }
@media(max-width:700px) {
	div.info-column-left, div.info-column-right { width:100%; min-width:300px; max-width:450px; }
	div.info-column-right > img { width:100%; max-width:450px; margin:0px auto; }
	.info-text { padding:0px 20px; }
}
@media(max-width:330px) { .info-text-padding-box { border-right:0px; } }

div.issue-panel { position:relative; display:block; width:180px; margin:0px auto; background-color:#fff; }
div.issue-panel .issue-overlay {
	position:absolute; width:100%; height:100%; top:0px; background-color:#999; opacity:0;
	
		transition:			all 0.2s ease-in-out;
		-moz-transition:		all 0.2s ease-in-out;
		-webkit-transition:		all 0.2s ease-in-out;
	 }
div.issue-panel:hover .issue-overlay { opacity:0.5; }
div.issue-panel .issue-title {
	position:absolute; width:100%; height:100%; top:0px; opacity:0;
	
		transition:			all 0.2s ease-in-out;
		-moz-transition:		all 0.2s ease-in-out;
		-webkit-transition:		all 0.2s ease-in-out;
	 }
div.issue-panel:hover .issue-title { opacity:1; }

.collapsible-head { cursor:pointer; }

div#shop-container { width:100%; background-color:#fff; }

div.shop-item-description { text-align:center; margin:0px auto; padding:4px 0px 0px; }
div.shop-item-description p { margin:4px 0px; font-size:12px; text-transform:uppercase; letter-spacing:1px; color:#555; }

label.shop-item { 			cursor:pointer; }
label#shipping-label { 		padding:10px 0px; }
label#shipping-label select {	cursor:pointer; }

#dialog-shop-item p {		font-size:15px; }
#dialog-shop-item p.dialog-shop-item-headline {	margin:10px 0px; font-size:18px; color:#999; }
#dialog-shop-item p.dialog-shop-item-price {	color:#aaa; }

.shop-info-box {			margin:0px 0px 12px; padding:8px; background-color:#fff;
text-align:center; border:5px solid #eee;}

.shop-info-box td { font-size:15px; }

.rounded { 
		border-radius:			8px 8px 8px 8px;
		-moz-border-radius:		8px 8px 8px 8px;
		-webkit-border-radius:	8px 8px 8px 8px;
	 }
.rounded-12 { 
		border-radius:			12px 12px 12px 12px;
		-moz-border-radius:		12px 12px 12px 12px;
		-webkit-border-radius:	12px 12px 12px 12px;
	 }
.rounded-16 { 
		border-radius:			16px 16px 16px 16px;
		-moz-border-radius:		16px 16px 16px 16px;
		-webkit-border-radius:	16px 16px 16px 16px;
	 }
.rounded-20 { 
		border-radius:			20px 20px 20px 20px;
		-moz-border-radius:		20px 20px 20px 20px;
		-webkit-border-radius:	20px 20px 20px 20px;
	 }
.rounded-24 { 
		border-radius:			24px 24px 24px 24px;
		-moz-border-radius:		24px 24px 24px 24px;
		-webkit-border-radius:	24px 24px 24px 24px;
	 }
.rounded-28 { 
		border-radius:			28px 28px 28px 28px;
		-moz-border-radius:		28px 28px 28px 28px;
		-webkit-border-radius:	28px 28px 28px 28px;
	 }

div.rounded-inputs label {	display:block; margin:8px 0px; }
div.rounded-inputs label span { color:#777; }
div.rounded-inputs input, div.rounded-inputs select { width:100%; }
	
#shop-submit {
	color:#fff; background-color:#67A0D5; cursor:pointer;}
#issue-buy-this { 
	color:#67A0D5; background-color:#fff; border:1px dashed #67A0D5; cursor:pointer;}

#shop-form table tbody {	color:#666; font-size:small; }

#subscribe-main-column { display:inline-block; width:62%; max-width:480px; margin:20px 15px 20px 8px; vertical-align:top; }
#subscribe-main-column label { display:block; margin:4px 0px; }
#subscribe-side-column { display:inline-block; width:30%; max-width:280px; margin:20px 8px 20px 15px; vertical-align:top; text-align:left; }

div.subs-panel-head { font-size:14px; padding:4px; background-color:#f5fbff; text-transform:uppercase; letter-spacing:0.1em; }
div.subs-panel-body { display:block; text-align:left; }
div.subs-panel-address { display:block; text-align:left; }

div.subs-panel-body label { font-size:16px; }

div.subs-panel-address p { font-size:16px; }
div.subs-panel-address span { font-size:14px; color:#777; }
div.subs-panel-address input, div.subs-panel-address select { width:100%; }

div.subs-store-product { margin:10px; background:#fff; border:6px solid #eee; text-align:center; }
div.subs-store-product > div { padding:12px 0px 8px; }
div.subs-store-product td { color:#555; }

div.subs-panel-issues label .issue-overlay {
	position:absolute; width:100%; height:100%; top:0px; left:0px; background-color:#999; opacity:0; 
		transition:			all 0.2s ease-in-out;
		-moz-transition:		all 0.2s ease-in-out;
		-webkit-transition:		all 0.2s ease-in-out;
	 }
div.subs-panel-issues label:hover .issue-overlay { opacity:0.3; }
div.subs-panel-issues label .border-color-blue.issue-overlay { opacity:0.8; }

div.subs-panel-issues label .issue-overlay-text {
	position:absolute; width:100%; height:100%; top:0px; left:0px; color:#fff; opacity:0; 
		transition:			all 0.2s ease-in-out;
		-moz-transition:		all 0.2s ease-in-out;
		-webkit-transition:		all 0.2s ease-in-out;
	 }
div.subs-panel-issues label:hover .issue-overlay-text, div.subs-panel-issues label .border-color-blue.issue-overlay-text { opacity:1; }

div.subs-info-text p { font-size:15px; color:#555; text-align:left; }

.issue-overlay-text table {
	width:100%; height:100%; font-size:16px; }
.issue-overlay-text table td {
	text-align:center; text-transform:uppercase; letter-spacing:0.1em; }
.issue-overlay-text table td div {
	width:44px; margin:0px auto; padding:3px; border:1px solid #fff; font-size:11px; }

.sidebar-total { width:100%; padding:9px; border:1px solid #eee; background-color:#fafafa; }
.sidebar-total .table-total td { font-size:21px; color:#aaa; }
.sidebar-total .table-body-dynamic td { font-size:14px; color:#333; }

#blog-container img { width:100%; max-width:600px; }
#blog-container > div { width:100%; max-width:600px; margin:50px auto; padding:20px 0px; background-color:#fff; }
#blog-container > div > div { width:90%; max-width:500px; margin:0px auto; }

#no-template-pager > div { display:inline-block; height:35px; overflow:hidden; 
		transition:			all 0.1s ease-in-out;
		-moz-transition:		all 0.1s ease-in-out;
		-webkit-transition:		all 0.1s ease-in-out;
	 }
#no-template-pager > div > div { padding-top:8px; 
		transition:			all 0.1s ease-in-out;
		-moz-transition:		all 0.1s ease-in-out;
		-webkit-transition:		all 0.1s ease-in-out;
	 }
#no-template-pager > div.cycle-pager-active > div { padding-top:0px; }
#no-template-pager > div > div > div { background-color:#ccc; }
#no-template-pager img { width:60px; opacity:0.25; 
		transition:			all 0.1s ease-in-out;
		-moz-transition:		all 0.1s ease-in-out;
		-webkit-transition:		all 0.1s ease-in-out;
	 }
#no-template-pager .cycle-pager-active img { opacity:1.0; }

.wide-panel { width:90%; min-width:290px; margin:0px auto; }

.stockist-panel { margin-bottom:10px; padding-bottom:10px; text-align:left; border-bottom: 2px solid #f1f1f1; }
.stockist-panel a { color:#aaa; }

.blog-head-cell { width:30%; float:left; }
.blog-body-cell { width:70%; float:left; }
.blog-body-cell-padding { margin:0px 10px; }

.stockist-headline { color:#777; font-size:24px; line-height:95%; margin:0px 0px 0px 0px; }
.stockist-body { color:#555; font-size:14px; line-height:130%; }

.staff-panel {
position:relative; float:left; width:109px; height:115px; margin:2px; overflow:hidden; text-align:left; }

.staffbox-panel {			margin-bottom:10px; padding-bottom:10px; text-align:left; }
.staffbox-headline {		color:#999; font-size:21px; line-height:95%; 
						margin:0px 0px 0px 0px;}
.staffbox-body {			color:#555; font-size:14px; line-height:120%;}

.info-navigator a { color:#aaa; }
.info-text p.info-headline { font-size:13px; margin:0px 0px 15px; text-transform:uppercase; letter-spacing:0.2em; }
.info-text { text-align:left; padding:0px 35px 0px 25px; width:64%; }
.info-text a { color:#aaa; }
.info-text p { font-size:15px; }
.info-text.issue-text p { font-size:13px; line-height:130%; }
.info-caption { margin:2px 0px; text-align:right; font-size:12px; color:#333; }
.info-caption a { color:#999; }
.info-address { font-size:13px; color:#999; }

.left-column {float:left; width:41%;}
.right-column {float:left; width:58%;}
@media (max-width:700px) {
	.left-column, .right-column { width:100%; min-width:300px; }
	.left-column > div, .right-column > div { padding:36px; }
}

.transition { 
		transition:			all 0.2s ease-in-out;
		-moz-transition:		all 0.2s ease-in-out;
		-webkit-transition:		all 0.2s ease-in-out;
	 }

.social-buttons {			list-style: none; list-style-type: none;}
.social-buttons-vertical {	margin:8px 0px 0px 0px; padding:10px 0px; text-align:left;}
.social-buttons-vertical li {	text-align:left; list-style: none; list-style-type: none;}
.social-buttons-horizontal {	width:180px; margin:0px auto; padding:20px 0px 25px; text-align:center; }

.required, #shop-form span.required, #subscribe-main-column span.required { color:#67A0D5; }

.grey { color:#888; }




/* perfect strangers */

.card-block {
	margin:30px 0px; border:5px solid #ddd; padding:30px; }

.card-block-white {
	margin:30px 0px; border:5px solid #fff; padding:30px; background-color:rgba(255,255,255,0.25); }

#form-load-wrapper { width:100%; }
div#form-load-container { position:relative; width:100%; height:30px; margin:0px auto; }
div#form-load-container > div { position:absolute; width:50%; font-size:12px; text-transform:uppercase; text-align:center; letter-spacing:0.1em; cursor:pointer; }
div#form-load-container > div > div { padding:7px 0px; }

div.form-load-button {	background-color:rgba(85,166,242,0.25); color:#fff; }
div.form-load-button-active { background-color:rgba(85,166,242,1.0); color:#fff; }
div#form-load-signup {	left:0px;
					-webkit-border-top-left-radius:8px; -moz-border-top-left-radius:8px; border-top-left-radius:8px; 
					-webkit-border-bottom-left-radius:8px; -moz-border-bottom-left-radius:8px; border-bottom-left-radius:8px; }
div#form-load-login { 	right:0px;
					-webkit-border-top-right-radius:8px; -moz-border-top-right-radius:8px; border-top-right-radius:8px;
					-webkit-border-bottom-right-radius:8px; -moz-border-bottom-right-radius:8px; border-bottom-right-radius:8px; }


#penpal-signup-container, #penpal-login-container, #penpal-reset-container { 
	width:95%; max-width:320px; margin:0px auto; text-align:center; } 

#penpal-signup-update-container { 
	width:95%; max-width:480px; margin:0px auto; text-align:center; } 

.penpal-signup-divider {
	margin:30px 0px; border:5px solid #ddd; padding:30px; }

#penpal-landing a { border-bottom:2px dotted #ccc; color:#888; }

#penpal-landing p { color:#555; }

#penpal-landing .card-block-white p { color:#222; }
	
#penpal-landing input, #penpal-landing select { 
	width:100%; font-size:larger; text-align:center; }

#penpal-landing textarea { 
	width:100%; text-align:center; height:144px; }

#penpal-landing textarea.large { height:144px; }
#penpal-landing textarea.small { height:72px; }


#penpal-landing .slider-container { margin:0px 0px 30px; color:rgba(0,0,0,0.6); }

#penpal-landing input[type="range"] {
	display:block; -webkit-appearance:none; height:10px; border-radius:5px; margin:0 auto; outline: 0;
}

#penpal-landing input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance:none; width:40px; height:40px; background-color:white; background-position:center center; background-size:cover;
	border-radius:50%; border:2px solid #eee; cursor:pointer; transition: .3s ease-in-out;
}
#penpal-landing .p_hoard input[type="range"]::-webkit-slider-thumb { background-image:url('https://www.perfectstrangers.com/public/images/site/laundry_7.png'); }
#penpal-landing .p_art input[type="range"]::-webkit-slider-thumb { background-image:url('https://www.perfectstrangers.com/public/images/site/laundry_3.png'); }
#penpal-landing .p_science input[type="range"]::-webkit-slider-thumb { background-image:url('https://www.perfectstrangers.com/public/images/site/laundry_4.png'); }
#penpal-landing .p_glitter input[type="range"]::-webkit-slider-thumb { background-image:url('https://www.perfectstrangers.com/public/images/site/laundry_1.png'); }
#penpal-landing .p_soph input[type="range"]::-webkit-slider-thumb { background-image:url('https://www.perfectstrangers.com/public/images/site/laundry_5.png'); }
#penpal-landing .p_indie input[type="range"]::-webkit-slider-thumb { background-image:url('https://www.perfectstrangers.com/public/images/site/laundry_6.png'); }
#penpal-landing .p_green input[type="range"]::-webkit-slider-thumb { background-image:url('https://www.perfectstrangers.com/public/images/site/laundry_2.png'); }

#penpal-landing input[type="range"]::-webkit-slider-thumb:hover { border: 2px solid rgba(85,166,242,1); }
#penpal-landing input[type="range"]::-webkit-slider-thumb:active { transform: scale(1.25); }


#penpal-landing input[type="checkbox"] { width:20px; }

#penpal-landing input:focus, #penpal-landing select:focus, #penpal-landing textarea:focus { background-color:rgba(85,166,242,0.25); }

#penpal-landing button { width:100%; margin:20px 0px; background-color:rgba(85,166,242,1.0); color:#fff; }
 
.error-message { margin:0.5em 0em; text-align:center; color:#700; }

#penpal-landing .error-message { max-width:320px; margin:1em auto; }

.secondary-container { padding:35px 0px; }

.vertical-container { display:table; width:100%; max-width:400px; margin:5px auto; }
.vertical-content { display:table-cell; vertical-align:middle; text-align:left; }
.vertical-content > div { width:65%; margin:20px auto; }

.short-bubble { height:300px; }
.long-bubble { height:370px; }

#swap-details textarea { resize:none; height:178px; }
#swap-details textarea.small { resize:none; height:110px; }

#partner-details textarea { resize:none; height:219px; }
#swap-details label, #partner-details label { display:block; margin:0px 0px 10px; }
#swap-details label > input, #swap-details label > textarea,
#partner-details label > input, #partner-details label > textarea { width:100%; }


#swap-details .slider-container { margin:0px 0px 30px; color:rgba(0,0,0,0.6); }

#swap-details input[type="range"] {
	display:block; -webkit-appearance:none; height:10px; width:100%; border-radius:5px; margin:0 auto; outline: 0;
}

#swap-details input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance:none; width:40px; height:40px; background-color:white; background-position:center center; background-size:cover;
	border-radius:50%; border:2px solid #eee; cursor:pointer; transition: .3s ease-in-out;
}
#swap-details .p_hoard input[type="range"]::-webkit-slider-thumb { background-image:url('https://www.perfectstrangers.com/public/images/site/laundry_7.png'); }
#swap-details .p_art input[type="range"]::-webkit-slider-thumb { background-image:url('https://www.perfectstrangers.com/public/images/site/laundry_3.png'); }
#swap-details .p_science input[type="range"]::-webkit-slider-thumb { background-image:url('https://www.perfectstrangers.com/public/images/site/laundry_4.png'); }
#swap-details .p_glitter input[type="range"]::-webkit-slider-thumb { background-image:url('https://www.perfectstrangers.com/public/images/site/laundry_1.png'); }
#swap-details .p_soph input[type="range"]::-webkit-slider-thumb { background-image:url('https://www.perfectstrangers.com/public/images/site/laundry_5.png'); }
#swap-details .p_indie input[type="range"]::-webkit-slider-thumb { background-image:url('https://www.perfectstrangers.com/public/images/site/laundry_6.png'); }

#swap-details input[type="range"]::-webkit-slider-thumb:hover { border: 2px solid rgba(85,166,242,1); }
#swap-details input[type="range"]::-webkit-slider-thumb:active { transform: scale(1.25); }


#swap-details .p_green input[type="range"]::-webkit-slider-thumb {
	border:2px solid #eee; background-color:white; background-position:center center; background-size:cover;
	background-image:url('https://www.perfectstrangers.com/public/images/site/laundry_2.png');
}




input, textarea, select { background-color:#f2f2f2; 
		transition:			all 0.1s ease-in-out;
		-moz-transition:		all 0.1s ease-in-out;
		-webkit-transition:		all 0.1s ease-in-out;
	 }

input:focus, textarea:focus, select:focus { background-color:rgba(85,166,242,0.25); }

div.inactive, textarea.inactive { opacity:0.2; }

.circle { 
	border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; 
	width:39px; height:39px; line-height:39px; color:#fff; background-color:rgba(85,166,242,0.65);
	text-align:center;
}
.circle-large { width:45px; height:45px; line-height:45px; }
.circle-huge { width:52px; height:52px; line-height:52px; }

.timeline-block-container { position:relative; display:inline-block; width:100px; }
.timeline-block { 
	display:block; width:100px; height:100px; margin-bottom:90px; 
	background-position:center center; background-size:cover; 
	background-image:url('https://www.perfectstrangers.com/public/images/site/post_stamp_blank.png');
	opacity:0.15;
}
.timeline-divider { 
	display:inline-block; width:50px; height:100px; margin-bottom:90px; opacity:0.2;
}
.timeline-block.active { opacity:0.5; }
.timeline-block table { width:100%; height:100%; text-align:center; font-size:larger; }
.timeline-block-container label { position:absolute; display:block; width:120px; height:0px; left:-10px; top:110px; font-size:14px; }

.timeline-divider table { width:100%; height:100%; text-align:center; font-size:larger; }
.timeline-divider hr { border-top:0px; border-bottom:5px dotted black; }