html {
	scroll-behavior: smooth!important;
	background-color: var(--rf_theme_base);
}
body{
	background-color: var(--rf_theme_base);
}



/*.btnPrimary{
	color: var(--rf_theme_base);
	background-color: var(--rf_theme_buttonPrimaryBG);
	border-color: var(--rf_theme_buttonPrimaryBG);
}
.btnSecondary{
	color: var(--rf_theme_text);
	background-color: var(--rf_theme_base);
	border-color: var(--rf_theme_text);
}
*/

.clarityHeader{
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	height: 72px;
	line-height: 72px;
	box-sizing: border-box;
	z-index: 400;
	background-color: var(--rf_theme_base);
	color: var(--rf_theme_text);
}
.clarityPageTitle{
	position: relative;
	font-family: 'rf_proximaNovaLight',"RFgothamLight",Helvetica,Arial,sans-serif;;
	font-size: 40px;
	padding-top: 24px;
	padding-bottom: 24px;
	line-height: 56px;
	text-transform: uppercase;

}
.updatedContainer{
	position: absolute;
	right: 0px;
	bottom: 0px;
	z-index: 2;
	padding-right: 16px;
	font-family: 'rf_proximaNovaLight',"RFgothamLight",Helvetica,Arial,sans-serif;;
	font-size: 12px;
	line-height: 12px;
	color: #8a8a8a;
	background-color: #ff00ff;
}




.claritySubNav {
	position: relative;
	padding: 0px!important;
	margin: 0px!important;
}
.claritySubNav > span > hr{
	background-color: #2f82ab;
	border: none;
	position: absolute;
	height: 0px;
	top: 16px;
	left: 0px;
	width: 0%;
	margin: 0px;
	padding: 0px;
	transition: all .3s ease;
}

.claritySubNav:hover > span > hr {
	width: 100%;
	height: 2px;
}

.clarityHover {
	background-color: transparent;
	transition: all .3s ease;
}
.clarityHover:hover {
	background-color: var(--rf_theme_offBase);
	box-shadow: 0 0 1px 0 rgba(34, 34, 34,.5) inset;
}
.clarityMinus300{
	position: relative;
	left: -387px;
	padding-left: 400px;
	width: 100%;
	color: #dcdcdc;
	transition: all .6s ease;
}
.clarityMinus300:hover {
	color: #222222;
	transition: all .3s ease;
}
.clarityHGrid{
	background-image: url('../images/icons/hGrid2.svg');
	background-repeat: repeat;
	background-position: 0px -3.5px!important;
	background-size: 8px 8px!important;
	overflow: hidden;
}
.clarityHGrid:hover{
	background-image: url('../images/icons/hGrid2.svg');
}
.clarityHGrid li{
	
	margin-left: 32px;
}




.clarityHR{
	height: 1px;
	margin-top: 0px;
	margin-bottom: -1px;
	border: none;
	background-color: #dcdcdc;
	width: 100%;
	position: relative;
	text-align: left;
}

.whiteTransBG{
	background-color: rgba(255,255,255,1);
	box-shadow: 0 0 0 1px #dcdcdc inset;
	padding-left: 16px;
	padding-right: 16px;
}
.whiteTransBG:hover{
	background-color: rgba(255,255,255,.50);
}

.clarityFakeButtonSecondary, .clarityFakeButtonPrimary {
	border-radius: 2px;
}
.clarityFakeButtonSecondary{
	box-shadow: 0 0 0 1px #222222 inset;
	background-color: var(--rf_theme_base);
}
.clarityFakeButtonPrimary{
	background-color: #222222;
	color: var(--rf_theme_base);
}


.claritySplit5050{

}
.clarityWidth350{
	width: 350px;
}
.clarityWidthFull{
	width: 100%;
}


.clarityColorContainer{
	border: thin solid #e5e5e5;
	margin: 10px;
	margin-top: 0px;
	margin-bottom: 5px;
	width: 150px;
	clear: both;
}
.clarityColorContainer:after{
	clear: both;
}
.clarityColorContainer span{
	line-height: 40px;
	text-transform: uppercase;
	font-size: 12px;
}
.clarityColorNames{
	font-size: 12px;

}
.clarityColorNames > p{
	text-align: left!important;
	line-height: 12px!important;
	margin: 5px!important;

}
.clarityColorContainer span{
	width: 100%;
}
.clarityColorBox{
	height:150px;
	width:150px;
}
.clarityColorWrapper{
	display: flex;
	flex-wrap: wrap;
	justify-content: left;
	align-items: flex-start;
}


.clarityMenu{
	display: none;
	position: fixed;
	top: 0px;
	left: 10px;
	z-index: 1000000;
	border: 1px solid #b3b3b3;
	background-color: #4d4d4d;
	padding: 15px;
	height: 20px;
	transition: all .3s ease-in;
	overflow: hidden;
}
.clarityMenu * {
	color: #f2f2f2!important;

}
.offsetLeftHover{
	//	position: absolute;
	left: -150px!important;
	transition: all .5s ease-out;
	bottom: 80%!important;
	overflow: hidden;
}
.offsetLeftHover:hover, .offsetLeftHover:active {
	left: 0px!important;
	bottom: 0px!important;
}

.clarityMenu a {
	display: block;
	text-align: left;
}
.clarityMenu:hover {
	//	width: 50px;
	height: 90%;
	overflow: scroll;

}

a .noStyling{

}



.clarityNavSubP > a{
	margin: 0px!important;
	padding: 0px!important;
	text-decoration: none;
}

.clarityAnchor{
	display: inline-block;
	position: relative;
	width: 0px; 
	height: 0px;
	background-color: transparent;
	
	//	visibility: hidden;
}
.clarityAnchor a {
	position: absolute;
	top: -140px;
}
.clarityAnchor.optionFilter a{
	top: -190px!important;
}
.clarityAnchors{
	color: #80aec9;
	cursor: pointer;
}
.clarityAnchors:hover {
	color: #2f82ab;
}
.clarityAnchorContainer{
	margin-bottom: 24px;
}





.clarityNavContainer{
	position: fixed;
	top: 72px;
	left: 0px;
	bottom: 0px;
	width: 250px;
	padding: 0px;
	background-color: var(--rf_theme_base);
	-webkit-backdrop-filter: blur(1.5px);
	backdrop-filter: blur(1.5px);
	font-size: 14px;
	z-index: 1;
	transition: all .3s ease;
	//	overflow: hidden;
	border-right: 1px solid var(--rf_theme_border);
	font-family:'rf_proximaNovaLight','RFgothamLight',Helvetica,Arial,sans-serif;



}

.clarityNavContainer:after, .clarityNavContainer:before{
	position: absolute;
	content: "";
	//	background-color: #ff00ff;
	left: 0px;
	right: 0px;
	z-index:20;
}
.clarityNavContainer:before{
	//background-image: linear-gradient(to bottom, var(--rf_theme_base), transparent);
	height: 16px;
	top: 81px;
	top: 48px;
}
.clarityNavContainer:after{
	height: 48px;
	bottom: 0px;
	//background-image: linear-gradient(to top, var(--rf_theme_base), transparent);
}





.clarityNavContainerInner::-webkit-scrollbar { 
	width: 0px!important ;
	height: 0px!important;
}
.clarityNavContainerInner {
	-ms-overflow-style: none; 
}
.clarityNavContainerInner {
	overflow: -moz-scrollbars-none; 
}

.clarityNavContainer.clarityNavMobileActive{
	//	box-shadow: 0 0 75px 0 #000000;
}

.clarityNavContainerMenu{
	color: #000000;
	position: absolute;
	top: 0px;
	text-align: center;
	right: 0px;
	width: 10px;
	height: 48px;
	line-height: 48px;
	background-color: rgba(255,255,255,.5);
	border-bottom-right-radius: 10px;
	border-bottom: 3px solid transparent;
	border-right: 1px solid transparent;
	z-index: -200;
	overflow: hidden;
}
.clarityNavContainerMenuOverlay{
	position: fixed;
	top: 0px;
	left: 0px;
	height: 0%;
	width: 0%;
	background-color: transparent;
	transition: background-color .3s ease 0s , height 0s ease 0ms, width 0s ease 0ms !important;
}
.clarityNavMobileActive > .clarityNavContainerMenuOverlay{
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	//	transition: background-color 3s ease 0s , height 0s ease 0ms, width 0s ease 0ms !important;
	background-color: rgba(255,255,255,.95);
	z-index: -1;
}
.clarityNavMobileActive > .clarityNavContainerMenu{
	border-bottom: 3px solid #e6e6e6;
	border-right: 10px solid #e6e6e6;
	width: 100px;
	right: -100px;
}
.clarityNavMobileActive > .clarityNavContainerInner{
	//	box-shadow: 0 0 50px 0 rgba(0,0,0,.1);
}


@media screen and (min-width: 1023px){
	.clarityNavContainerMenu{
		width: 0px!important;
		right: 0px!important;
		border-bottom: 3px solid transparent!important;
		border-right: 1px solid transparent!important;
	}	
}

@media screen and (max-width: 1024px){
	.clarityNavContainer:hover{
		//		box-shadow: 0 0 20px 0 #000000;
	}

	.clarityNavContainerMenu{

		width: 100px;
		left: 0px;
		height: 80px;
		line-height: 80px;
		font-size: 24px;
		background-color: transparent;
	}
	.clarityNavMobileActive.clarityNavContainer{
		left: 0px!important;
		//		width: 100%;
	}
	.clarityNavMobileActive > .clarityNavContainerMenu{
		width: 0px!important;
		right: 0px!important;
		border-bottom: 3px solid transparent!important;
		border-right: 1px solid transparent!important;
	}
	.clarityNavContainer{
		left: -250px;
		transition: all .3s ease;
	}

	.clarityMainContainer{
		left: 0px!important;
		width: 100%!important;
	}
}

.clarityNavSearch{
	z-index: 2;
	background-color: var(--rf_theme_base);
}









.hoverColor:hover{
	//	color: #ff00ff;

}



.padRight8{
	margin-right: 8px;
}

.square {
	width: 100%;
}

.square:after {
	content: "";
	display: block;
	padding-bottom: 100%;
}






.clarityNavLogo{
	position: absolute;
	height: 24px;
	left: 8px;
	top: 24px;
}
@media screen and (max-width: 1024px) {
	.clarityNavLogo{
		left: calc(50% - 81px);
	}
}



.clarityNavSearch ~ .clarityNavContainerInner {
	height: calc(100% - 48px);
}
.clarityNavContainerInner{
	height: calc(100% - 0px);
	z-index: 2;
	position: relative;
	top: 0px;
	bottom: 0px;
	overflow-y: scroll;
	background-color: var(--rf_theme_base);

}
.clarityNavHeader{
	top: 0px;
	margin: 0px;
	text-transform: capitalize;

}

.clarityNavHeaderP{
	line-height: 48px;
	height: 48px;
	margin: 0px;
	margin-left: 16px;
	max-width: calc(100% - 16px);
	transition: all .3s ease;
	position: relative;
	cursor: pointer;
	font-size: 16px;
	letter-spacing: .5px;
	font-family: 'rf_proximaNovaMedium','RFgothamBold',Helvetica,Arial,sans-serif;
	color: var(--rf_theme_text);
	text-transform: uppercase;
	
}

.clarityNavSub::-webkit-scrollbar { 
	width: 0px!important ;
	height: 0px!important;
}
.clarityNavSub {
	-ms-overflow-style: none; 
}
.clarityNavSub {
	overflow: -moz-scrollbars-none; 
}



.clarityNavHeaderPChevron{
	position: absolute;
	height: 48px;
	width: 48px;
	text-align: center;
	line-height: 48px;
	right: 0px;
	transform: rotate(0deg);
	transition: transform .3s ease;
}
.clarityNavHeaderActive > a > .clarityNavHeaderP > .clarityNavHeaderPChevron{
	transform: rotate(90deg);
}
.clarityNavHeaderP:hover{
	color: var(--rf_theme_text_alt);
}



.clarityNavHeaderP:before{
	background-color: transparent;
	height: 6px;
	width: 6px;
	position: absolute;
	//	content: "";
	top: calc(50% - 3px);
	left: -16px;
	border-radius: 100%;
	transition: all .5s ease;
	
}
.clarityNavHeaderP:hover:before{
	//	box-shadow: 0 0 0 10px #2f82ab inset!important;
	//	background-color: #222222;

}
.clarityNavHeaderCurrent > .clarityNavHeaderP{
	color: #000000;
}

.clarityNavHeaderCurrent > .clarityNavHeaderP:before{
	//	box-shadow: 0 0 0 2px #ff00ff inset;
	height: 4px;
	width: 4px;
	top: calc(50% - 2px);
	left: -12px;
	position: absolute;
	content: "";
}

.clarityNavHeaderActive > .clarityNavHeaderP:before{
	//	box-shadow: 0 0 0 1px #2f82ab inset;
	height: 10px;
	width: 10px;
	top: calc(50% - 5px);
	//	left: -18px;

}


.clarityNavHeaderActive > .clarityNavSub > .clarityNavSubP {
	line-height: 32px;
	height: 32px;
}




.clarityNavSubAnchorsDiv{
	font-size: 12px;
	font-family: 'rf_proximaNovaLight',"RFgothamExLight",Helvetica,Arial,sans-serif;
	height: 0px;
	//	overflow: hidden;
	transition: all .3s ease;
	margin-left: 48px;
	width: calc(100% - 48px);
	position: relative;
}
.clarityNavSubAnchors.optionActive{
	color: var(--rf_theme_link);
	//	font-family: 'rf_proximaNovaLight',"RFgothamLight",Helvetica,Arial,sans-serif;
	//	letter-spacing: 2px;
	//	font-size: 16px;
	//	text-shadow:  0 0 1px var(--rf_theme_link);
}
.clarityNavSubAnchors {
	color: var(--rf_theme_text);
	margin-left: 8px;
	text-decoration: none!important;
	max-width: calc(100% - 16px);
	display: block;
	border: none!important;
	position: relative;
	transition: all .3s ease;
}
.clarityNavSubAnchors > span{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	position: absolute;	
	left: 0px;
	right: 8px;
}




.clarityNavSubAnchors:hover {
	//	background-image: linear-gradient(to right, rgba(47, 130, 171,.25), rgba(47, 130, 171,0) )*/
}
.clarityNavSubAnchorsDiv:after{
	position: absolute;
	content: "";
	height: 100%;
	width: 1px;
	background-color: #dcdcdc;
	top: 50%;
	left: 0px;
	z-index: 0;
}
.clarityNavSubAnchorsDiv:first-of-type:after{
	height: 100%;
	top: 50%;
}
.clarityNavSubAnchorsDiv:last-of-type:after{
	height: 0%;
	bottom: 50%;
}
.clarityNavSubAnchors:before{
	position: absolute;
	content: "";
	height: 7px;
	width: 7px;
	border-radius: 100%;
	border: 1px solid #aaaaaa;
	background-color: #2f82ab;
	box-shadow: 0 0 0 5px var(--rf_theme_base) inset;
	top: 12px;
	left: -12px;
	transition: all .3s ease;
	z-index:2;
}
.clarityNavSubAnchors:hover:before {
	border-color: rgba(47, 130, 171,1);
	box-shadow: 0 0 0 0 var(--rf_theme_base) inset;
}
.clarityNavSubAnchors.optionActive:before {
	background-color: rgba(47, 130, 171,1);
	box-shadow: 0 0 0 0 var(--rf_theme_base) inset;
	//	opacity: .9;*/
}






.clarityNavHeaderActive > .clarityNavSub > * > .clarityNavSubAnchorsDiv {
	line-height: 32px;
	height: 32px;
}


.clarityNavSub{
	overflow: scroll;
}

.clarityNavSub::-webkit-scrollbar { 
	width: 0px!important ;
	height: 0px!important;
}
.clarityNavSub {
	-ms-overflow-style: none; 
}
.clarityNavSub {
	overflow: -moz-scrollbars-none; 
}

.clarityNavSubP {
	position: relative;
	line-height: 0px;
	height: 0px;
	padding: 0px;
	padding-left: 32px;
	margin: 0px;
	transition: all .3s ease;
	overflow: hidden;
	text-decoration: none;
	text-transform: capitalize;
	font-family: 'rf_proximaNovaLight','RFgothamLight',Helvetica,Arial,sans-serif;
}

.clarityNavSubP > a {
	color: var(--rf_theme_text);

}

.clarityNavSubP:hover > a {
	color: var(--rf_theme_text_alt);

}
.clarityNavSubActive.clarityNavSubP > a {
	color: var(--rf_theme_text);
	font-family: 'rf_proximaNovaLight','RFgothamLight',Helvetica,Arial,sans-serif;
}


.clarityNavSubP > hr{
	position: absolute;
	left: 0px;
	top: 50%;
	height: 0%;
	width: 0px;
	border: none;
	background-color: #2f82ab;
	color: #2f82ab;
	transition: all .3s ease;
	margin: 0px;
}
.clarityNavSubA:hover ~ hr, .clarityNavSubActive > hr, .clarityNavSubA:active ~ hr{
	top: 0%;
	height: 100%;
	width: 8px;
	z-index: 0;
}
.clarityNavSubActive > hr{
	top: 0%;
	height: 100%;
	width: 8px;
	z-index: 0;
}
.clarityNavSubActive{

	background-image: linear-gradient(to right, rgba(47, 130, 171,.25), rgba(47, 130, 171,0) )
}
.clarityNavSubActive > hr, .clarityNavSubP:active > hr{
	//	box-shadow: 0 0 200px 200px;
}

@keyframes clarityNavHR {
	50% {
		//		width: 6px;
		box-shadow: 0 0 200px 50px;
	}
	0%, 100% {
		//		width: 6px;
		box-shadow: 0 0 0 0 transparent;
	}
}






.clarityPageHead{
	padding: 48px;
	background-color: var(--rf_theme_offBase);
	color: var(--rf_theme_text);
}




.clarityMainContainer{
	position: relative;
	left: 250px;
	top: 0px!important;
	margin-top: 72px;
	margin-bottom: 0px;
	height: auto; 
	min-height: 100%;
	width: calc(100% - 250px);
	margin-bottom: 25vh;
	//font-family:'rf_proximaNovaLight','RFgothamMedium',Helvetica,Arial,sans-serif;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: .5px;
	//background-color: var(--rf_theme_base);
	color: var(--rf_theme_text);
}
.clarityMainContainer:after{
	position: absolute;
	background-color: 
	//	content: "2019 Rodan + Fields";
	font-family: 'rf_proximaNovaLight',"RFgothamLight",Helvetica,Arial,sans-serif;
	color: #6e6e6e;
	height: 24px;
	line-height: 24px;
	left: 0px;
	right: 0px;
	bottom: 0px;

	background-color: var(--rf_theme_offBase);
	text-align: center;
	z-index: 0;

}





.clarityTitle{
	text-align: center;
	//	background-color: var(--rf_theme_base);
	position: relative;	
	overflow: hidden;	
}


.clarityTitle p {
	color: rgba(0,0,0,1);
	position: relative;
	overflow: hidden;
	margin: 0px;
	padding: 0px;

}
.clarityTitleInner:hover p {
	//	letter-spacing: 10px;
}



.metallic{
	position: absolute;
	background-color: rgba(255,255,255,.75);
	box-shadow: 0 0 10px 0 var(--rf_theme_base);
	width: 100%;
	left: 0px;
	height: 15%;
	top: -120%;
	opacity: .95;
	transition: all 0s ease;
	transform: rotate(-3deg);
}
.metallicHover {
	text-transform: uppercase;
	overflow: hidden;
	position: relative;
}
.metallicHover:hover{

}
.metallicHover:hover .metallic{
	top: 150%;
	transition: all 1s ease;
}



.clarityPad48, .clarityCenteredContentBlock {
	margin: 0px;
	margin-left: auto;
	margin-right: auto;
	max-width: 1100px;
	width: calc(100% - 96px);
}




@media screen and (max-width: 375px){
	.clarityPad48, .clarityCenteredContentBlock {
		width: calc(100% - 16px);
	}
}

@media screen and (max-width: 1308px){
	.splitThirds.optionClarity{
		width: 100%;
		min-width: 304px
	}
	.splitThirds.optionClarity > .splitInner {
		display: block;
		width: 100%!important;
		max-width: 100%;
	}
}





@media screen and (max-width: 1024px ){
	.clarityPad48 > .split5050 {
		//		display: block
		width: 100%;
	}

	.clarityPad48 > .split5050 > .splitLeft, .clarityPad48 > .split5050 > .splitRight {
		float: none;
		width: 100%!important;
		display: block;
		margin-bottom: 16px;
	}
}
.claritySectionHeader p{
	background-color: #eeddcc;
	margin: 0px;
}
.claritySectionHeader p:nth-of-type(1){
	font-family: 'rf_proximaNovaMedium',"RFgothamBook",Helvetica,Arial,sans-serif;;
	font-size: 16px;
	line-height: 16px;
	color: #222222;
	padding: 0px;
	margin: 0px;
	margin-top: 64px;
	text-transform: uppercase;

	
}
.claritySectionHeader p:nth-of-type(2){
	font-family: 'rf_proximaNovaLight',"RFgothamLight",Helvetica,Arial,sans-serif;;
	font-size: 32px;
	line-height: 32px;
	color: #222222;
	padding: 0px;
	margin: 0px;
	margin-top: 12px;
	margin-bottom: 96px;
	text-transform: capitalize;


}

@media screen and (max-width: 1024px){
	.claritySectionHeader p:nth-of-type(2){
		font-size: 32px;
		line-height: 32px;
	}
}
.claritySectionTabContainer{
	width: 100%;
	position: relative;
	border-bottom: 1px solid #dcdcdc;
	clear: both;
	height: 31px;
}
.claritySectionTabHeader{
	float: left;
	position: relative;
	height: 32px;
	padding-left: 8px;
	padding-right: 8px;
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	transition: all .3s ease;
	margin: 0px;
	font-size: 0px;
}
.claritySectionTabHeader:not(:first-of-type){
	margin-left: 20px;
}
.claritySectionTabHeader:hover{
	background-color: rgba(0,0,0,.02);
	box-shadow: 0 0 4px -1px  rgba(0,0,0,.1)
}
.claritySectionTabHeader > hr {
	position: absolute;
	bottom: 0px;
	height: 0px;
	left: 50%;
	width: 0%;
	background-color: transparent;
	border: none;
	transition: all .3s ease;

}
.claritySectionTabHeaderActive > hr{
	height: 4px;
	left: 0%;
	width: 100%;
	background-color: #2f82ab;

}
.claritySectionTabHeader:hover > hr {
	height: 4px;
	left: 0%;
	width: 100%;
	background-color: #80AEC9;

}
.claritySectionTabHeaderActive:hover > hr{
	background-color: #2f82ab;
}
.claritySectionTabHeader p {
	font-family: 'rf_proximaNovaMedium','RFgothamBook',Helvetica,Arial,sans-serif;
	font-size: 16px;
	line-height: 32px;
	padding: 0px;
	margin: 0px;
	text-align: center;
	color: #757575;
	transition: all .3s ease;
}
.claritySectionTabHeaderActive p, .claritySectionTabHeader:hover p {
	color: #222222;
}


.clarityFilterBarContainer{
	position: relative;
	//	padding: 16px;
	height: 80px;
	//	width: calc(100% - 0px);
	right: 0px;
	background-color: rgba(248,248,248,1);
}
.clarityFilterBar{
	position: absolute;
	top: 0px;
	//	left: 0px;
	right: 0px;
	width: calc(100% - 64px);
	height: 80px;
	line-height: 80px;
	background-color: rgba(248,248,248,.95);
	padding: 0px; 
	padding-right: 16px;
	padding-left: 48px;
	font-size: 16px;
	font-family:'rf_proximaNovaMedium', RFgothamBook,Helvetica,Arial,sans-serif;
	clear: both;
	margin-bottom: 48px;
	z-index: 1;
	-webkit-backdrop-filter: blur(1.5px);
	backdrop-filter: blur(1.5px);
	transition: box-shadow .3s ease;
	box-shadow: 0 0 0 -2px rgba(0,0,0,0);
	text-transform: uppercase;
}
.clarityFilterBarFixed{
	position: fixed;
	left: 250px;
	background-color: rgba(248,248,248,.95);
	width: calc(100% - 250px - 64px);
	box-shadow : 0 2px 4px -2px rgba(0,0,0,.5);
}
@media screen and (max-width: 1024px){
	.clarityFilterBarFixed{
		left: 0px;
		width: calc(100% - 64px);


	}
}
.clarityFilterOuter{
	border: none;
	position: absolute;
	top: 16px;
	right: 16px;
	height: 48px;
	line-height: 48px;
	//	max-width: 50%;
	font-size: 0px;
	display: inline-block;
	margin-left: 16px;
}
.clarityFilterInner{
	height: 46px;
	line-height: 48px;
	position: relative;
	display: inline-block;
	width: 112px;	
	//	left: 24px;
	text-align: center;
	font-size: 14px;
	font-family:'rf_proximaNovaMedium', RFgothamBook,Helvetica,Arial,sans-serif;
	border: 1px solid #bfbfbf;
	background-color: var(--rf_theme_base); 
	color: #a6a6a6;
	text-transform: uppercase;
}
.clarityFilterInlineOuter{
	//	background-color: #00ffff;
}


@media screen and (max-width: 768px){
	.clarityFilterBarContainer{
		height: 64px;
	}
	.clarityFilterBar{
		height: 64px;
		line-height: 64px;
	}
	.clarityFilterOuter{
		height: 16px;
		line-height: 16px;
		position: relative;
		top: 0px;

	}

	.clarityFilterInner{
		background-color: var(--rf_theme_base);		
		left: 0px;
		margin-top: 0px;
		height: 24px;
		line-height: 24px;
		width: auto!important;
		padding-left: 8px;
		padding-right: 8px;
		//		border: none;
	}
	.clarityFilterInner:not(:first-of-type){
		//			border-left: 1px solid #222222!important;

	}
}
.clarityFilterInner:not(:first-of-type){
	border-left: none;
	//	margin-left: -1px;
	width: 112px;
	box-shadow: 0 0 0 0 transparent;
}
.clarityFilterInner:hover{
	background-color: #80AEC9;
	color: var(--rf_theme_base);
	box-shadow: 0 0 2px 0 #80AEC9;
	z-index: 20;
}

.clarityFilterInnerActive, .clarityFilterInnerActive:hover {
	background-color: #2F82AB;
	color: var(--rf_theme_base);
	box-shadow: 0 0 0 0 transparent;

}
.clarityFilterUpdate{
	position: absolute;
	top: 0px;
	right: 16px;
	font-size: 14px;
}




.claritySectionContent{
	margin-top: 48px;

	
}
.claritySectionContentTab{
	transition: all .3s ease;
	opacity: 1;
	height: auto;
	pointer-events: all;
}
.claritySectionContentHeader, .claritySectionContentSubHeader{
	padding: 0px;
	margin: 0px;
}
.claritySectionUpdated{
	font-family: 'rf_proximaNovaLight',"RFgothamExLight",Helvetica,Arial,sans-serif;
	font-size: 12px;
	line-height: 24px;
}
.claritySectionSub{
	font-family: 'rf_proximaNovaLight',"RFgothamLight",Helvetica,Arial,sans-serif;
	font-size: 14px;
	line-height: 24px;
}
.claritySectionContentHeader{
	font-family: 'rf_proximaNovaLight',"RFgothamExLight",Helvetica,Arial,sans-serif;
	position: relative;
	display: inline-block;
	margin: 0px;
	padding: 0px;
	vertical-align: bottom;
	color:  var(--rf_theme_accent);
}
.claritySectionWrapper{
	color: var(--rf_theme_accent);
}



.claritySectionContentHeaderBackground > .claritySectionContentHeader {
	//	background-color: var(--rf_theme_base);
	//	color: #000000;
	z-index: 1;
	//	mix-blend-mode: screen;
}
.claritySectionContentHeaderBackground{
	display: inline-block;
	margin: 0px;
	padding: 0px;
	background-image: linear-gradient(to bottom, #f04e30 0%,  #00bbe6 100%);
}
.claritySectionTitle{
	display: table-cell;
	vertical-align: top;
}
.claritySectionTitleRight{
	display: table-cell;
	min-width: 304px;
	vertical-align: top;
	text-align: right;
	float: right;

}

.claritySectionTitleLeft{
	display: table-cell;
	min-width: 304px;
	vertical-align: top;
	text-align: left;
	float: left;
	
}
@media screen and (max-width: 768px){
	.claritySectionTitleRight, .claritySectionTitle{
		display: inline-block;
		text-align: left;
		width: 100%;
	}
}
.claritySectionTitleBar{
	position: relative;
	padding-top: 0px;
}
.claritySectionTitleBar:before{
	display: block;
	content: " ";
	position: absolute;
	height: 1px;
	top: 48px;
	left: 0px;
	width: 100%;
	background-color: var(--rf_theme_border);
	//background-image: linear-gradient(to right, var(--rf_theme_border), rgba(128, 174, 201,1));
}
@media screen and (max-width: 1024px){
	.claritySectionTitleBar:before{
		width: calc(100vw - 0px);
	}	
}




.claritySectionContentSubHeader{
	font-family:'rf_proximaNovaLight', RFgothamLight,Helvetica,Arial,sans-serif;
	font-size: 14px;
	line-height: 22px;
	text-transform: none;
}
.claritySectionContentTabInactive{
	height: 0px!important;
	overflow: hidden;
	opacity: .5;
	pointer-events: none;
	//	background-color: #ffccaa;
}
.claritySectionContentTabActive{

}



.claritySwatchWrongColor{
	//	box-shadow: 0 0 0 1px #ff00ff inset !important;
}

@keyframes wrongColor {
	50% {

		background-color: #ff00ff!important;
	}
}

.clarityDataVisSwatchContainer{
	
}
.clarityDataVisSwatch{
	max-width: 50px!important;
	width: calc(100% / 12);
	display: inline-block;
}
.clarityDataVisSwatch img {
	height: 100%;
	width: 100%;
	padding: 0px;
	margin: 0px;
	display: block;
}

.claritySwatchWrapper{
	position: relative;
	height: 178px;
	width: 178px;
	margin-right: 20px;
	margin-bottom: 32px;
	margin-top: 0px;
	border-radius: 4px;
	vertical-align: top;	
	display: inline-block;
	transition: all .2s ease, width .4s ease;
	transition-delay: all .2s ease, width 0s ease;
}
.claritySwatchContainer, .claritySwatchInfo{
	height: 178px;
	width: 178px;
	border: 1px solid #d6d6d6;
	background-color: var(--rf_theme_base);
	margin-right: 20px;
	margin-bottom: 32px;
	margin-top: 0px;
	border-radius: 4px;
	overflow: hidden;
	vertical-align: top;
	transition: all .3s ease;
	position: absolute;
	top: 0px;

}
.claritySwatchInfo{
	transform: rotate3d(0,1,0,90deg) translateZ(90px) translateX(90px);
	perspective-origin: 100% 0%;
	opacity: 0;

	
}
.claritySwatchInfo p {
	padding: 8px;
	padding-top: 16px;
}

.claritySwatchContainerDeactive{
	pointer-events: none;
	opacity: .15!important;
/*	height: 0px!important;
	width: 0px!important;
	border: none!important;
	margin-right: 0px!important;
	overflow: hidden!important;*/
	perspective: 0px;
}

.claritySwatch{
	width: 178px;
	height: 150px;
	box-shadow: 0 0 0 0;
	transition: all .5s ease;
	cursor: pointer;
}
.claritySwatchActive{
	height: 50px;
	transition: all .3s ease;
}

.claritySwatch:hover {
	box-shadow: 0 0 4px 0;	
}
.claritySwatchContainer p{
	font-size: 10px;
	line-height: 18px;
	padding: 0px;
	margin: 0px;
	padding-left: 8px;
}
.claritySwatchContainer p:first-of-type{
	padding-top: 0px;
	font-size: 12px;
	line-height: 30px;
	text-transform: uppercase;
	background-color: #ffccaa;
}
.clarityHiddenTextArea{
	position: fixed;
	top: 0px;
	left: 0px;
	height: 0px;
	width: 0px;
	border: none;
	z-index: -100;
	opacity: 0;
}

.claritySwatchPerspective{
	perspective: 1000;
	perspective-origin: 50% 50%;
	-webkit-perspective: 1000;
	-webkit-perspective-origin: 50% 50%;
	-moz-perspective: 1000;
	-moz-perspective-origin: 50% 50%;	
}


.claritySwatchInfoButton{
	display: none;
	position: absolute;
	left: 148px;
	top: 0px;
	z-index: 3;
	width: 32px;
	height: 32px;
	text-align: center;
	line-height: 32px;
	//	background-color: var(--rf_theme_base);
	border-bottom-left-radius: 20px;
}

.claritySwatchInfoButtonActive + .claritySwatchPerspective > .claritySwatchContainer{
	transform: rotate3d(0,1,0,-90deg) translateZ(90px) translateX(-90px);
	opacity: 0;
}
.claritySwatchInfoButtonActive + .claritySwatchPerspective > .claritySwatchInfo{
	transform: rotate3d(0,0,0,90deg) translateZ(0px) translateX(0px);
	opacity: 1;
}





.clarityShadesTintsContainer{
	padding: 0px;
	margin: 0px;
	border: 0px;
}
.clarityShadesTintsContainer td{
	padding: 0px;
	margin: 0px;	
}
.clarityShadesTintsBase{
	height: 150px;
	width: 75px;
}
.clarityShadesTintsShade, .clarityShadesTintsTone, .clarityShadesTintsTint{
	height: 50px;
	width: 50px;
}





.profilePhotoContainer{
	//	background-color: #ffccaa;
	max-width: 300px;
}
.profilePhotoImg {
	height: 180px;
	width: 180px;
	transform: rotate(-45deg);
	transition: all .3s ease;
}
.profilePhoto {
	position: relative;
	margin-bottom: 27px;
	top: 27px;
	height: 127px;
	width: 127px;
	border-radius: 64px;
	//	border: 5px solid transparent;
	overflow: hidden;
	box-shadow: 0 1px 5px 0 rgba(0,0,0,.2);
	transform: rotate(45deg);
	transition: all .3s ease;
}
.profilePhoto:hover {
	margin-bottom: -27px;
	top: 0px;
	height: 180px;
	width: 180px;
	transform: rotate(0deg);
	border-radius: 0px;
}
.profilePhoto:hover .profilePhotoImg {
	transform: rotate(0deg);
}








*[class*="EffectContainer"] {
	overflow: hidden;
	left: 0px;
}


*[class*="EffectContainer"] * {
	left: 0px;
	transition: all 1.2s ease;
	filter: blur(0);
}

.effect{
	position: relative;
	//	opacity: 0;
	transform: scale(1);
	
}
.effectDelay{
	transition-delay: 1.2s;
}

.effectContainer * {
	//	transition: all 5s ease;
	//	left: 0px;
}


.blurOutEffectContainer > .effect {
	filter: blur(2px);
}



.slideInEffectContainer.splitLeft > .effect {
	left: -100%!important;	
}

.slideInEffectContainer.splitRight > .effect {
	left: 100%;
}
.zoomInEffectContainer > .effect{
	transform: scale(.75)!important;
}
.zoomOutEffectContainer > .effect, .zoomContainer > .effect{
	transform: scale(1.25)!important;
}
.fadeInEffectContainer{
	//	background-color: #ff00ff;
}

.fadeInEffectContainer > .effect{
	opacity: 0;
}
.perspectiveEffectContainer {
	perspective: 1000px;
}

.perspectiveEffectContainer > .effect{
	transform: rotate3d(-1,0,0,-90deg) ;
	perspective-origin: 100% 0%;
}



.RFinvert{
	filter: invert(100);
}




.clarityCodeContainer{
	height: auto;
	border: none;
	//	border-top: 1px solid rgba(0,0,0,.05);
	box-shadow: 1px 1px 3px 0 rgba(0,0,0,.15) ;
	overflow: hidden;
	border-radius: 3px;
	padding: 16px;
	background-color: var(--rf_theme_offBase);
}
.clarityCodeHeader{
	font-family: 'rf_proximaNovaLight','RFgothamLight',Helvetica,Arial,sans-serif;
	font-size: 14px;
	line-height: 24px;
	height: 24px;
	color: var(--rf_theme_link);
}
.clarityCodeHeader > div {
	position: relative;
	display: inline-block;
	border-radius: 100%;
	height: 22px;
	width: 22px;
	font-size: 10px;
	line-height: 24px;
	text-align: center;
	//	box-shadow: -1px 1px 2px 0 rgba(0,0,0,.75), 1px 1px 2px 0 rgba(0,0,0,.0) inset;
	margin-right: 16px;
	transition: all .3s ease;
	background-color: #2f82ab;
	transform: rotate(-45deg);
	color: var(--rf_theme_base);
}
.clarityCodeContent{
	overflow: hidden;
	position: relative;
	font-family: "Courier New", Courier, monospace;
	top: 16px;
	height: 0px;
	//	box-shadow: 5px 5px 30px -5px rgba(0,0,0,.1) inset;
	background-color: #282828;
	//	background-color: var(--rf_theme_offBase);
	transition: all .3s ease;
	line-height: 18px;
	font-size: 14px;
	margin-bottom: 0px;
	border-radius: 5px;
	//	background-image: radial-gradient(circle at 50% 0%, #595959, transparent );


}






.clarityCodeContent span{
	display: block;
	color: #ffb000;
	//	color: #222222;
	margin: 0px;
	padding: 0px;
	padding-left: 16px;
	padding-right: 16px;
	//	text-shadow: 0 0 1px #ffb000;
	position: relative;
}
.clarityCodeContent span:first-of-type{
	padding-top: 16px;
}
.clarityCodeContent span:last-of-type{
	padding-bottom: 16px;
}
.clarityCodeCursor{
	content: "";
	position: relative;
	display: inline-block;
	top: 4px;
	left: 4px;
	height: 16px;
	width: 8px;
	background-color: #ffb000;

}
.clarityCodeSpace1{
	padding-left: calc(32px * 1)!important;
}
.clarityCodeSpace2{
	padding-left: calc(32px * 2)!important;
}
.clarityCodeSpace3{
	padding-left: calc(32px * 3)!important;

}
.clarityCodeSpace4{
	padding-left: calc(32px * 4)!important;
}
.clarityCodeSpace5{
	padding-left: calc(32px * 5)!important;
}
.clarityCodeSpace6{
	padding-left: calc(32px * 6)!important;
}
.clarityCodeActive ~ .clarityCodeContent > span:last-of-type:after {
	position: relative;
	top: 3px;
	left: 4px;
	display: inline-block;
	content: "";
	color: transparent;
	height: 16px;
	width: 10px;
	animation-name: clarityCodeCursorBlink;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.clarityCodeActive ~ .clarityCodeContent > span > .clarityCodeCursor {
	animation-name: clarityCodeCursorBlink;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@keyframes clarityCodeCursorBlink {
	50%, 100% {
		background-color: transparent;
	}
	1%, 49% {
		background-color: #ffb000;
	}
}
.clarityCodeActive  ~ .clarityCodeContent{
	margin-bottom: 16px;
}

.clarityCodeActive > div {
	background-color: #666666;
	color: var(--rf_theme_base);
	box-shadow: -1px 1px 2px 0 rgba(0,0,0,.0), 1px 1px 2px 0 rgba(0,0,0,.75) inset;
	transform: rotate(0deg);
	text-shadow: 1px 1px 2px #000000;
}








.clarityModal{
	position: fixed;
	top: 24px;
	left: 50%;
	height: 100%;
	max-height: calc(100% - 48px);
	width: 768px;
	max-width: calc(100% - 48px);
	min-width: 304px;
	z-index: 400;
	transform: translateX(-50%);
	background-color: var(--rf_theme_base);
	box-shadow: 0 0 0 0 rgba(0,0,0,0);
	transition: all .3s ease;
	pointer-events: none;
}
.clarityModalActive > .clarityModal {
	box-shadow: 0 0 20px 0 rgba(0,0,0,.25);
}
.clarityModalBackground{
	position: fixed;
	top: 0%;
	bottom: 0%;
	left: 0%;
	right: 0%;
	background-color: rgba(255,255,255,0);
	-webkit-backdrop-filter: blur(0px);
	backdrop-filter: blur(0px);
	z-index: 399;
	transition: all .3s ease;
	pointer-events: none;
}
.clarityModalActive ~ .clarityModalBackground {
	background-color: rgba(255,255,255,.8);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	pointer-events: all;
}
.clarityModalContainer{
	position: fixed;
	top: 50%;
	bottom: 50%;
	left: 50%;
	right: 50%;
	z-index: 400;
	transition: all .3s ease;
	overflow: hidden;
	pointer-events: 

}
.clarityModalActive.clarityModalContainer{
	top: 0%;
	bottom: 0%;
	left: 0%;
	right: 0%;

}
.clarityModalInner{
	position: absolute;
	overflow: hidden;
	top: 0px;
	right: 0px;
	left: 0px;
	bottom: 0px;
}
.clarityModalHeader{
	height: 48px;
	line-height: 48px;
	font-size: 14px;
	text-align: right;
}
.clarityModalHeader span{
	padding-right: 16px;
}
.clarityModalContent{

	height: 100%;
	width: 100%;
	overflow-y: scroll;
}





.RF_containerIcons{
	height: 108px;
	width: 128px;
	vertical-align: top;
	margin-bottom: 16px;
	margin-right: 16px;
	overflow: hidden;
	transition: all .3s ease;
	text-align: center;
}


.RF_containerIconsOuter{
	height: 80px;
	width: 80px;
	border: 1px solid rgba(0,0,0,.1);
	
	transition: all .3s ease;
	margin: 0 auto;
	margin-bottom: 8px;
}
.RF_containerIcons.optionActive > .RF_containerIconsOuter {
	height: 32px;
}
.RF_containerIcons.optionActive > .RF_containerIconsOuter > * > .RF_containerIconsIcon{
	font-size: 24px;
	height: 24px;
	line-height: 32px;
}
.RF_containerIconsIcon{
	font-size: 32px;
	height: 40px;
	line-height: 80px;
	margin: 0px;
	transition: all .3s ease;
}




.clarityFixedSearch{
	position: relative;
	width: 100%;
	background-color: var(--rf_theme_base);
	

}
.clarityFixedSearch.optionFixed{
	position: fixed;
	top: 79px;
	z-index: 1000;
}

.logosImage{
	padding: 8px;
	max-width: 184px;
	max-height: 184px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
	margin-bottom: -8px;
}


.clarityMainOverlay{
	position: fixed;
	top: 50%;
	bottom: 50%;
	right: 50%;
	left: 50%;
	background-color: transparent;
	transition: all .3s ease, top 0s .3s ease, bottom 0s .3s ease, left 0s .3s ease, right 0s .3s ease , opacity .3s 0s ease;
	z-index: 500;
	opacity: 0;
	pointer-events: none;
}
.clarityMainOverlay.optionActive{
	opacity: 1;
	top: 0%;
	bottom: 0%;
	right: 0%;
	left: 0%;
	z-index: 500;
	pointer-events: all;
	background-color: rgba(0,0,0,.5);
	transition: all .3s ease, top 0s 0s ease, bottom 0s 0s ease, left 0s 0s ease, right 0s 0s ease, opacity 0s 0s ease;
}

.clarityMainOverlayBackground{
	background-color: transparent;
	position: absolute;
	top: 0px;
	bottom: 0px;
	right: 0px;
	left: 0px;	
}
.clarityMainOverlayModalWrapper{

	position: absolute;
	top: 50%;
	bottom: 50%;
	right: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: table;
	vertical-align: middle;
	width:  calc(100% - 96px);
	max-width: 500px;
	min-width: 304px;
}
.clarityMainOverlayModalContainer{
	background-color: var(--rf_theme_base);
	//color: var(--rf_theme_text);
	border-radius: 2px;
	box-shadow: 0 0 20px 0 rgba(0,0,0,.5);

}
.clarityMainOverlayModalHeaderClose{
	width: 16px;
	height: 16px;
	position: absolute;
	right: 16px;
	top: 16px;
}
.clarityMainOverlayModalHeaderContent{
	width: calc(100% - 32px);
	font-size: 16px;
	font-family: 'rf_proximaNovaRegular',"g";
	text-transform: uppercase;
}
.clarityMainOverlayModalContent{
	
	color: var(--rf_theme_text);
	padding: 16px;

}
.clarityMainOverlayModalHeader{
	font-size: 14px;
	font-family: rf_proximaNovaRegular ;
	color: var(--rf_theme_text);
	line-height: 16px;
	padding: 16px; 
	min-height: 15px;
	border-bottom: 1px solid rgba(0,0,0,.1);
	position: relative;
}
.clarityMainOverlayModalHeaderDismissBar{
	position: absolute;
	top: 0px;
	left: 0%;
	right: 0px;
	transition: left 0s linear;
	//	background-color: #008000;
}
.clarityMainOverlay.optionAuto > .clarityMainOverlayModalWrapper >  .clarityMainOverlayModalContainer > .clarityMainOverlayModalHeader >.clarityMainOverlayModalHeaderDismissBar {
	left: 100%;
	height: 6px;
	background-color: #2f82ab;
	transition: left 5s linear;	
}


@media print {
	.clarityMainContainer {
		left: 0px!important;
		margin-top: 0px!important;
	}
	nav {
		display: none;
	}
}












.redirectCSS * {
	margin: 0px;
	margin-bottom: 2vh;
	margin-top: 4vh;
}
.redirectCSS > p:first-of-type{
	font-size: 5vw;
}
.redirectCSS > a:first-of-type{
	font-size: 4vw;
}
.redirectCSS > p:last-of-type{
	font-size: 16px;
	line-height: 24px;
	margin-left: auto;
	margin-right: auto;
	width: calc(100% - 48px);
	max-width: 1140px;
}



@media screen and (min-width: 1000px) {
	.redirectCSS > p:first-of-type{
		font-size: 50px;
	}
	.redirectCSS > a:first-of-type{
		font-size: 40px;
	}
	.redirectCSS > p:last-of-type{
		font-size: 16px;
	}
}





@media screen and (max-width: 640px) {
	.redirectCSS > p:first-of-type{
		font-size: 32px;
	}
}



@media screen and (max-width: 480px) {			
	.redirectCSS > a:first-of-type{
		font-size: 24px;
	}

}
.searchClear{
	position: absolute;
	right: 8px;
	font-size: 16px;
	top: 0px;
	line-height: 32px;
	cursor: pointer;
	color: var(--rf_theme_text);
}
.positionRelative{
	position: relative;
}



.clarity_tabs{
	width: 100%;
	//max-width: 600px;
	//margin: 0px auto;
	margin-bottom: 48px;
}
.clarity_tabsList{
	font-size: 0px;
	margin-bottom: 24px;
	height: 48px;
	box-sizing: border-box;
	border-bottom: 1px solid var(--rf_theme_border);
	overflow-x: scroll;
}
.clarity_tabsList span{
	box-sizing: border-box;
	border-bottom: 0px solid transparent;
	display: inline-block;
	transition: all .1s ease, border 0s ease;
	font-size: 16px;
	font-family: rf_proximaNovaMedium;
	color: var(--rf_theme_accent);
	letter-spacing: .5;
	line-height: 48px;
	height: 48px;
	text-transform: uppercase;
}
.clarity_tabsList span:hover{
	cursor: pointer;
	//border-bottom: 3px solid var(--manifestoNew_shade_40);
	//color: var(--manifestoNew_shade_40);
}
.clarity_tabsList span.active{
	border-bottom: 3px solid var(--manifestoNew);
	color: var(--manifestoNew);
	pointer-events: none;
}
.clarity_tabsList span:not(:last-of-type){
	margin-right: 16px;
}
.clarity_tabsWrapper{
	min-height: 300px;
	height: 100%;
	width: 100%;
	display: table;
	table-layout: fixed;
	//background-color: #fbfbfb;
	transition: height 3s ease;
	position: relative;
}

.clarity_checkerboard{
	position: relative;	
	z-index: 0;
}
.clarity_checkerboard:before{
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	background-image: url('../images/transparentBackgroundGrid.png');
	content: " ";
	z-index: -1;
	opacity: .1;
}
.clarity_tabsWrapper:hover:before{
	//opacity: .1;
}
.clarity_tabsContainer.active{
	display: table-cell;
	vertical-align: middle;
	width: 100%;
}
.clarity_tabsContainer{
	display: none;
	box-sizing: border-box;
	padding: 24px;
	position: relative;
	text-align: center;
}

.clarity_tabsContainer * {
	//text-align: initial;
}


.clarity_tabsContent{
	text-align: initial;
	margin: auto;
	display: inline-block;
}

.clarity_tabsOptions{
	position: absolute;
	top: 0px;
	right: 0px;
	height: 48px;
	background-color: rgba(var(--rf_theme_offBase_rgb),.95);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	box-sizing: border-box;
	width: 100px;
	box-shadow: 0 2px 4px 0 rgba(34,34,34,.125);
	transition: all .3s ease;
	border-bottom-left-radius: 24px;
	overflow: hidden;
}
.clarity_tabsOptionsButton{
	box-sizing: border-box;
	font-family: rf_proximaNovaRegular;
	font-size: 16px;
	line-height: 16px;
	padding: 16px;
	height: 48px;
	width: 100%;
	top: 0px;
	right: 0px;
	text-align: center;
	background-color: var(--rf_theme_offBase);
	position: relative;
	border-bottom: 1px solid rgba(34,34,34,0);
	transition: all .3s ease;
}
.clarity_tabsOptions.active{
	width: 250px;
	height: calc(100% - 0px);
	display: block;
	border-bottom-left-radius: 0px;
}


.clarity_tabsOptions.active .clarity_tabsOptionsButton{
	width:  100%;
	//background-color: transparent;
	border-bottom: 1px solid var(--rf_theme_dropShadow);
} 
.clarity_tabsOptionsInner{
	box-sizing: border-box;
/*	overflow-y: scroll;
	padding: 16px;
	position: relative;
	margin-bottom: 48px;*/
}

.clarity_tabsOptionsInner{	
	height: calc(100% - 48px);
}
.clarity_tabsOptions.hasFooter .clarity_tabsOptionsInner{
	height: calc(100% - 96px);
}
.clarity_tabsOptionsInner form{
	box-sizing: border-box;
	height: calc(100% - 0px);
	overflow-y: scroll;
	padding: 16px;
	position: relative;
}
.clarity_tabsOptionsFooter{
	box-sizing: border-box;
	background-color: rgba(var(--rf_theme_offBase_rgb),.9);
	-webkit-backdrop-filter: blur(1px);
	backdrop-filter: blur(1px);
	position: relative;
	bottom: 0px;
	left:  0px;
	width: 250px;
	overflow: hidden;
	box-shadow: 0 -2px 4px 0 rgba(34,34,34,.25);
	display:  table;
	table-layout: fixed;
	color:  var(--linkBlue);
	transition: all .3s ease;
}

.clarity_tabsOptionsFooter span{
	font-family: rf_proximaNovaLight;
	box-sizing: border-box;
	padding: 16px 0px;
	line-height: 16px;
	font-size: 16px;
	display: table-cell;
	text-align: center;
	cursor: pointer;
}
.clarity_tabsOptionsFooter[data-cols="1"] span{
	width: 100%!important;
}
.clarity_tabsOptionsFooter[data-cols="2"] span{
	width: 50%!important;
}
.clarity_tabsOptionsFooter[data-cols="3"] span{
	width: calc(100% / 3)!important;
}
.clarity_tabsOptionsFooter[data-cols="4"] span{
	width: 25%!important;
}




.clarity_tabsOptionsFooter span:hover{
	background-color: var(--linkBlue);
	color: var(--rf_theme_base);
}
.clarity_tabsOptionsFooter span:active{
	background-color: var(--linkBlueHover);
	color: var(--rf_theme_base);
}


.frostedWhite{
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	background-color: rgba(255,255,255,.8);
}










.rf_selectWrapper{
	position: relative;
	background-color: var(--rf_theme_base);
	display: inline-block;
	height: 48px;
	width:  100%;
	max-width: 304px;
	margin-bottom: 24px;
	border: transparent 1px solid;
	border-bottom-color: var(--rf_theme_border);
	box-sizing: border-box;
}
.rf_selectWrapper:after{
	content: "\e906";
	font-family: rf-icons;
	position: absolute;
	height: 16px;
	line-height: 16px;
	width: 16px;
	top: 16px;
	right: 0px;
	pointer-events: none;
	vertical-align: middle;
	color: var(--rf_theme_accent);

}
.rf_selectWrapper select{
	width: 100%;
	font-size: 16px;
	line-height: 48px;
	border-radius: 0px;
	font-family: rf_proximaNovaLight;
	text-transform: capitalize;
	-webkit-appearance: none;
	position: relative;
	border:  none;
	margin: 0px;
	padding: 0px;
	background-color: transparent;
	color: var(--rf_theme_text);
}

.rf_selectWrapper select > option{
	font-size: 14px;
	line-height: 16px;
	font-family: rf_proximaNovaLight;
	-webkit-appearance: none;
}


.clarityColorCardContainer{
	display: inline-block;
	height: 96px;
	width: 216px;
	position: relative;
	box-sizing: border-box;
	margin-right: 24px;
	margin-bottom: 48px;
}
.clarityColorCardContainer p{
	font-size: 16px;
	line-height: 24px;
	margin: 0px;
	padding: 0px;
}
.clarityColorCard{
	display: block;
	position: absolute;
	height: auto;
	width: 216px;
	box-sizing: border-box;
	box-shadow: 0 2px 4px 0 rgba(34,34,34,0);
	overflow: hidden;
	border-radius: 0px;
	transition: all .3s ease;
}
.clarityColorCard.optionBorder{
	box-shadow: 0 0 0 1px rgba(34,34,34,.2);
}
.clarityColorSwatchWrapper{
	height: 72px;
	width: 100%;
	display: table;
	table-layout: fixed;
	z-index: 1;
}
.clarityColorSwatch{
	height: 100%;
	display: table-cell;
	cursor: pointer;
}.
.clarityColorSwatchWrapper[data-swatches="5"] .clarityColorSwatch{
	width: calc(100% / 5);
}
.clarityColorSwatchWrapper[data-swatches="4"] .clarityColorSwatch{
	width: calc(100% / 4);
}
.clarityColorSwatchWrapper[data-swatches="3"] .clarityColorSwatch{
	width: calc(100% / 3);
}
.clarityColorSwatchWrapper[data-swatches="2"] .clarityColorSwatch{
	width: calc(100% / 2);
}
.clarityColorSwatchWrapper[data-swatches="1"] .clarityColorSwatch{
	width: calc(100% / 1);
}
.clarityColorDropDown{
	position: relative;
	z-index: 2;
}
.clarityColorBand{
	position: relative;
	height: 0px;
	width: 100%;
	box-sizing: border-box;
	margin-top: 0;
	transition: all .2s 0 ease;
	overflow: hidden;
}
.clarityColorBand span{
	cursor: pointer;
}
.clarityColorDetails{
	position: relative;
	height: 0px;
	overflow: hidden;
	width: 100%;
	box-sizing: border-box;
	transition: all .3s 0 ease;
	background-color: var(--rf_theme_base);

}
.clarityColorDetails > div{
	padding: 8px;
	position: absolute;
	transition: all .6s .3s ease;
	height: 144px;
	width: 100%;
	box-sizing: border-box;
}
.clarityColorDetails p{
	margin: 0px;
	padding: 0px;
	font-size: 14px;
	line-height: 24px;
}
.clarityColorCard:not([data-card-open="false"]){
	box-shadow: 0 4px 8px 0 var(--rf_theme_dropShadow);
	z-index: 3;
}
.clarityColorCard:not([data-card-open="false"]) .clarityColorBand{
	margin-top: 0px;
	height: 24px;
	transition: all .1s 0 ease-out;
}
.clarityColorCard:not([data-card-open="false"]) .clarityColorDetails{
	transition: all .2s .05s ease-out;
	height: 144px;

}
.clarityColorCard:not([data-card-open="false"]) .clarityColorDetails > div{
	bottom: 0%;

}




.rf_sansSerif{
	font-family: rf_proximaNovaLight!important;
}