ul#profiles {
	display: flex;
	flex-flow: row wrap;
}
[id*="profile-"] {
	padding: .25rem;
	flex: 0 1 20%;
}
[id*="profile-"] .img {
	position: relative;
	display: inline-block;
	padding: .125rem;
	cursor: pointer;
}
[id*="profile-"] .img svg {
	width: 50%;
	height: auto;
	position: absolute;
	bottom: 2em;
	right: 2em;
}
[id*="profile-"].expanded {
	flex: 0 1 40%;
}
[id*="profile-"].expanded .img,
[id*="profile-"].expanded .desc {
	width: 50%;
}
[id*="profile-"] > div {
	background: rgba(255,255,255,.3);
	border: rgba(255,255,255,.1) 2px solid;
	position: relative;
	height: 100%;
	min-height: 20rem;
}
[id*="profile-"].custom > div {
	min-height: 0;
}
[id*="profile-"] > div:not(.price) {
	
}
[id*="profile-"] > div:hover {
	border-color: rgba(255,255,255,.9);
}
[id*="profile-"] > div:not(.price) > h3 {
	margin: .25em;
	padding: .25em .25em .5em;
	border-bottom: 1px solid #eeeeee;
}
[id*="profile-"] h3 {
	font-size: 2em;
}
[id*="profile-"] h3 span{
	cursor: pointer;
}
.rc-new, .rc-popular {
	font-size: 2.5rem;
	line-height: .6em;
	float: left;
	margin-right: .25rem;
}
.rc-new {
	color: darkcyan;
}
.rc-popular {
	color: gold;
	text-shadow: 0 0 2px #444400;
}
.corner {
	max-width: 300px;
    width: 100%;
/*	float: left; 183px > */
}
.col-50 .corner {
	width: 40%;
}
.desc {
	float: right;/**/
	width: 60%;
	color: #727272;
	display: inline-block;
}
.desc p {
	margin: 0;
	min-height: 51.2px;
	font-size: 1.25em;
	line-height: 1.3em;
}
[id*="profile-"].profile-hidden > div {
	background: rgba(255,255,255,.1);
}
[id*="profile-"].profile-hidden:hover > div {
	background: rgba(255,255,255,.2);
}
/*[id*="profile-"].profile-hidden h3 {
	color: #444444;
}
[id*="profile-"].profile-hidden {
	opacity: .75;
}
[id*="profile-"].profile-hidden:hover {
	opacity: .9;
}*/
[id*="profile-"] ul.no-bullet { 
	margin: 0;
	padding: 0;
}
[id*="profile-"] ul li {
	padding-right: .5rem;
	display: inline-block;
	font-size: small;
	color: #727272;
	font-weight: normal;
}
[id*="profile-"] .desc ul {
	position: absolute;
	bottom: 0;
	padding-bottom: .5rem;
}
[id*="profile-"] .desc ul li {
	font-size: 1.25rem;
}
[id*="profile-"] .desc strong {
	color: black;
}
[id*="profile-"] select, [id*="profile-"] input, [id*="profile-"] button {
	padding: .25rem;
	color: #727272;
	background: rgba(255,255,255,.5);
	border: rgba(0,0,0,.3) solid 1px;
}
form.addToOrder {
	
}
label[id*="-price"] {
	display: inline-block;
	width: 50%;
	font-size: 2rem;
	margin: 1rem;
	color: #727272;
}
span[id*="-preview"] {
    position: absolute;
    left: 150px;
    bottom: 1rem;
	color: rgba(0, 0, 0, 0.25);
}
span[id*="-preview"]:hover {
	color: rgba(0, 0, 0, 0.75);
	cursor: pointer;
}
.col-25 > div > label[id*='-price'] {
    right: 0px;
    position: absolute;
    bottom: 0px;
    line-height: 2rem;
}

input[name*="-quantity"], button[name*="-submit"] {
	font-size: 1rem;
	display: inline-block;
	margin: .25rem .5rem;
	width: auto;
	vertical-align: bottom;
}
.profileOptions {
	display: block;
}
#BYF #sizes input, #BYF #sizes select, #BYF #sizes label{
	width: auto;
	display: inline-block;
}
#BYF label {
	font-size: 1.15rem;
	display: inline-block;
	width: auto;
}
#BYF #lenght {
	
}
#BYF #searchbar {
	width: 50%;
}
#BYF #length,
#BYF #width {
	width: 25%;
}
#BYF #sizes {
}
#searchbar input {
	width: 80%;
}
#filters {
	line-height: 2rem;
}
#color {
	display: inline-block;
	line-height: 2rem;
	vertical-align: top;
}

#BYF input[id^="color-"], #capped {
	display: none;
}

#cap {
	display: inline-block;
}

input[id^="color-"] + label, #capped + label {
	-webkit-appearance: none;
	border: 1px solid #000;
	padding: 16px;
	margin: 0 2px;
	display: inline-block;
	position: relative;
}
input[name=length], input[name=width] {
	padding-right: .25rem;
}
#BYF select[name*="-frac"] {
	padding-left: 0;
}
input[id^="color-"] + label:hover {
	box-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

input[id^="color-"]:checked + label {
	color: #99a1a7;
	border: 1px solid #000;
	outline: 1px solid #000;
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
}

input[id^="color-"] + label:active, input[id^="color-"]:checked + label:active {
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
}

.clickable:hover {
	cursor: pointer;
	text-decoration: underline;
}

#capped + label { background: url(img/profiles/capped.jpg); background-size: cover; }
#color-white + label { background: url(img/profiles/color-white.jpg); background-size: cover; }
#color-gray + label { background: url(img/profiles/color-gray.jpg); background-size: cover; }
#color-bw-rope + label { background: url(img/profiles/bw-rope.jpg); background-size: cover; }
#color-aw-rope + label { background: url(img/profiles/aw-rope.jpg); background-size: cover; }
input:disabled + label { opacity: .5 }

#filters {
	position: relative;
	font-size: 1.5rem;
	padding: .25em;
}
ul.filters, ul.favorites {
	display: inline-block;
	margin: 0;
    position: absolute;
	right: .25em;
	top: .575em;
}
ul.filters li {
	margin-left: .5rem;
}
ul.filters span.rc {
	line-height: 1.6rem;
	height: 34px;
	/*width: 34px;*/
	padding: 5px;
}
ul.filters li.inactive {
	color: rgba(0,0,0,.25);
}
ul.filters li:hover {
	background: rgba(0,0,0,.25);
	cursor: pointer;
}

ul.favorites li {
	color: rgba(0,0,0,.25); 
	margin: 0;
	padding: 0;
}
ul.favorites li:hover {
	cursor: pointer;
	color: black;
}
ul.favorites li.active {
	color: black;
}
ul.favorites span.rc {
	line-height: 2rem;
	width: 28px;
}
ul.favorites .rc-star {
	color: rgba(0,0,0,0);
}
ul.favorites .active .rc-star-o {
	color: rgba(0,0,0,0);
}
ul.favorites .active .rc-star {
	color: rgb(255,220,0);
	text-shadow: 0 0 2px #444400;
}
@media screen and (max-width: 1200px) {
	[id*="profile-"] h3 {
		font-size: 1.4rem;
	}
	[id*="profile-"] {
		flex: 0 1 25%;
	}
	[id*="profile-"].expanded {
		flex: 0 1 50%;
	}
}
@media screen and (max-width: 1000px) {
	#BYF #searchbar {
		width: 70%;
	}
	#BYF #length,
	#BYF #width {
		width: 15%;
	}
}
@media screen and (max-width: 880px) {
	[id*="profile-"] {
		flex: 0 1 33.3%;
	}
	[id*="profile-"].expanded {
		flex: 0 1 66.6%;
	}
}
@media screen and (max-width: 650px) {
	[id*="profile-"] {
		flex: 0 1 50%;
	}
	[id*="profile-"].expanded {
		flex: 0 1 100%;
	}
	#searchbar {
		text-align: left;
	}
	#BYF input {
		width: calc(100% - 1em);
	}
	#BYF #searchbar input {
		width: 100%;
	}
	#BYF #searchbar {
		width: 60%;
	}
	#BYF #length,
	#BYF #width {
		width: 20%;
	}
	ul.filters, ul.favorites {
		top: .25em;
	}
	[id*="profile-"] > div {
		min-height: 15rem;
	}
	[id*="profile-"].expanded > div {
		min-height: 18rem;
	}
}