/* ####################################### */
/* ############## CLEARFIX ############### */
/* ####################################### */

.clear {
	clear: both;
}

.clear-l {
	clear: left;
}

.clear-r {
	clear: right;
}

/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements in most situations.
nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
	content: "";
	display: table;
}

.clearfix:after {
	clear: both;
}
.clearfix {
	zoom: 1;
}

.offScreen {
	position: absolute;
	left: -9999px;
}

.block {
	display: block;
}

.inline {
	display: inline;
}

.transparent {
	opacity: 0;
}

.opaque {
	opacity: 1;
}

/* ####################################### */
/* ################ LISTS ################ */
/* ####################################### */

.list-reset,
.v-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.h-list,
.h-list-alt,
.slash-list,
.pipe-list,
.arrow-list,
.tick-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.h-list:before,
.h-list:after,
.h-list-alt:before,
.h-list-alt:after,
.v-list:before,
.v-list:after,
.slash-list:before,
.slash-list:after,
.pipe-list:before,
.pipe-list:after,
.arrow-list:before,
.arrow-list:after {
	content: "";
	display: table;
}

.h-list:after,
.h-list-alt:after,
.v-list:after,
.slash-list:after,
.pipe-list:after,
.arrow-list:after {
	clear: both;
}

.h-list,
.h-list-alt,
.v-list,
.slash-list,
.pipe-list,
.arrow-list {
	zoom: 1;
}

/* HORIZONTAL LIST
------------------------------------------------*/

.h-list li {
	float: left;
	margin-right: 1em;
}

.h-list-alt li {
	float: right;
	margin-left: 1em;
}


/* ARROW LIST
------------------------------------------------*/

.arrow-list li {
	display: block;
	background: url(/r/i/css_framework/graphics/arrow.gif) no-repeat 0 50%;
	padding: 0 12px;
}

/* SLASH LIST (such / as / breadcrumbs / nav)
------------------------------------------------*/

.slash-list li {
	float: left;
	margin-right: 0.5em;
}

.slash-list li:after {
	content: '/';
	pointer-events: none;
	margin: 0px 0px 0px 0.3em;
}

.slash-list li:last-child:after {
	content: '';
	margin: 0px;
}

/* PIP LIST (such | as | footer | links)
------------------------------------------------*/

.pipe-list li {
	float: left;
	margin-right: 0.5em;
}

.pipe-list li:after {
	content: '|';
	pointer-events: none;
	margin: 0px 0px 0px 0.3em;
}

.pipe-list li:last-child:after {
	content: '';
	margin: 0px;
}

/* TICk LIST
------------------------------------------------*/

.tick-list li {
	padding-left: 25px;
}

.tick-list li {
	background-image: url(/r/i/icons/svg/tick.svg);
	background-position: left 0.5em;
	background-repeat: no-repeat;
}

/* ####################################### */
/* ############# POSITIONING ############# */
/* ####################################### */

.fr,
.right {
	float: right;
}

.fl,
.left {
	float: left;
}

/* ####################################### */
/* ############### STACKING ############## */
/* ####################################### */

.h-stack > * {
	display: inline-block;
	margin-right: 0.5em;
}

.stack {
	margin-bottom: 1.3em;
}

/* ####################################### */
/* ############## IMAGERY ################ */
/* ####################################### */

.img-left {
	float: left;
	margin: 0 20px 1.5em 0;
}

.img-right {
	float: right;
	margin: 0 0 1.5em 20px;
}

/* ####################################### */
/* ########### HIDDEN CONTENT ############ */
/* ####################################### */

/* HIDE: SCREENREADERS & BROWSERS
------------------------------------------------*/

.hidden { /* css-discuss.incutio.com/wiki/Screenreader_Visibility */
	position: absolute !important;
	top: -9999px !important;
	left: -9999px !important;
	visibility: hidden;
}

.visible {
	visibility: visible;
	position: relative !important;
	top: 0px !important;
	left: 0px !important;
}

/* HIDE: VISUALLY FOR BROWSERS
------------------------------------------------*/

/* Hide only visually, but have it available for screenreaders: by Jon Neal.
  www.webaim.org/techniques/css/invisiblecontent/  &  j.mp/visuallyhidden */
.vh,
.v-hidden {
	position: absolute !important;
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
}

.vh.focusable:active,
.vh.focusable:focus
.v-hidden.focusable:active,
.v-hidden.focusable:focus {
	clip:auto;
	height:auto;
	overflow:visible;
	position:static;
	width:auto;
	margin:0;
}

/* HIDE: VISUALLY FROM ALL + MAINTAIN LAYOUT
------------------------------------------------*/

/* Hide visually and from screenreaders, but maintain layout */
.invisible {
	visibility:hidden;
}

/* HIDE: FROM FRONTEND OF WEBSITE BUT VISIBLE IN THE BACKEND
------------------------------------------------------------*/

.hiddenFrontend {
	display: none;
}
.ifxless-on .hiddenFrontend {
	display: inherit;
}

/* ####################################### */
/* ############### =SPACING ############## */
/* ####################################### */

/* spacing helpers
p,m = padding,margin
a,t,r,b,l,h,v = all,top,right,bottom,left,horizontal,vertical
s,m,l,n = small(5px),medium(10px),large(20px),none(0px)
*/

.ptn,.pvn,.pan			{padding-top:0px !important}
.pts,.pvs,.pas			{padding-top:5px !important}
.ptm,.pvm,.pam			{padding-top:10px !important}
.ptl,.pvl,.pal			{padding-top:20px !important}
.ptxl,.pvxl,.paxl		{padding-top:30px !important}
.ptxxl,.pvxxl,.paxxl	{padding-top:40px !important}
.prn,.phn,.pan			{padding-right:0px !important}
.prs,.phs,.pas			{padding-right:5px !important}
.prm,.phm,.pam			{padding-right:10px !important}
.prl,.phl,.pal			{padding-right:20px !important}
.prxl,.phxl,.paxl		{padding-right:30px !important}
.prxxl,.phxxl,.paxxl	{padding-right:40px !important}
.pbn,.pvn,.pan			{padding-bottom:0px !important}
.pbs,.pvs,.pas			{padding-bottom:5px !important}
.pbm,.pvm,.pam			{padding-bottom:10px !important}
.pbl,.pvl,.pal			{padding-bottom:20px !important}
.pbxl,.pvxl,.paxl		{padding-bottom:30px !important}
.pbxxl,.pvxxl,.paxxl	{padding-bottom:40px !important}
.pln,.phn,.pan			{padding-left:0px !important}
.pls,.phs,.pas			{padding-left:5px !important}
.plm,.phm,.pam			{padding-left:10px !important}
.pll,.phl,.pal			{padding-left:20px !important}
.plxl,.phxl,.paxl		{padding-left:30px !important}
.plxxl,.phxxl,.paxxl	{padding-left:40px !important}
.mtn,.mvn,.man			{margin-top:0px !important}
.mts,.mvs,.mas			{margin-top:5px !important}
.mtm,.mvm,.mam			{margin-top:10px !important}
.mtl,.mvl,.mal			{margin-top:20px !important}
.mtxl,.mvxl,.maxl		{margin-top:30px !important}
.mtxxl,.mvxxl,.maxxl	{margin-top:40px !important}
.mrn,.mhn,.man			{margin-right:0px !important}
.mrs,.mhs,.mas			{margin-right:5px !important}
.mrm,.mhm,.mam			{margin-right:10px !important}
.mrl,.mhl,.mal			{margin-right:20px !important}
.mrxl,.mhxl,.maxl		{margin-right:30px !important}
.mrxxl,.mhxxl,.maxxl	{margin-right:40px !important}
.mbn,.mvn,.man			{margin-bottom:0px !important}
.mbs,.mvs,.mas			{margin-bottom:5px !important}
.mbm,.mvm,.mam			{margin-bottom:10px !important}
.mbl,.mvl,.mal			{margin-bottom:20px !important}
.mbxl,.mvxl,.maxl		{margin-bottom:30px !important}
.mbxxl,.mvxxl,.maxxl	{margin-bottom:40px !important}
.mln,.mhn,.man			{margin-left:0px !important}
.mls,.mhs,.mas			{margin-left:5px !important}
.mlm,.mhm,.mam			{margin-left:10px !important}
.mll,.mhl,.mal			{margin-left:20px !important}
.mlxl,.mhxl,.maxl		{margin-left:30px !important}
.mlxxl,.mhxxl,.maxxl	{margin-left:40px !important}

/**
 * Absolutes
 */

.at, .atr, .atl {
	position: absolute;
	top: 0px;
}

.ab, .abr, .abl {
	position: absolute;
	bottom: 0px;
}

.al, .atl, .abl {
	position: absolute;
	left: 0px;
}

.ar, .atr, .abr {
	position: absolute;
	right: 0px;
}

.atm {
	position: absolute;
	left: 50%;
	top: 0;
	-webkit-transform: translateX(-50%);
	   -moz-transform: translateX(-50%);
}

.abm {
	position: absolute;
	left: 50%;
	bottom: 0;
	-webkit-transform: translateX(-50%);
	   -moz-transform: translateX(-50%);
}

.amm {
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	   -moz-transform: translate(-50%, -50%);
}

.aml {
	position: absolute;
	left: 0;
	top: 50%;
	-webkit-transform: translate(0%, -50%);
	   -moz-transform: translate(0%, -50%);
}

.amr {
	position: absolute;
	right: 0;
	top: 50%;
	-webkit-transform: translate(0%, -50%);
	   -moz-transform: translate(0%, -50%);
}

.alm {
	position: absolute;
	left: 0;
	top: 50%;
	-webkit-transform: translateY(-50%);
	   -moz-transform: translateY(-50%);
}

.arm {
	position: absolute;
	right: 0;
	top: 50%;
	-webkit-transform: translateY(-50%);
	   -moz-transform: translateY(-50%);
}

/* ####################################### */
/* ################ Images ############### */
/* ####################################### */

.img-rounded {
	border-radius: 5px;
}

.img-circle,
.img-ellipse {
	border-radius: 50%;
}

.img-thumbnail {
	padding: 4px;
	border: 1px solid #DDD;
}

.img-greyscale,
.img-grayscale {
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
	filter: gray; /* IE 6-9 */
}

.m-left,
.fig-left {
	float: left;
	margin: 0 1.5em 1.5em 0;
}

.m-right,
.fig-right {
	float: right;
	margin: 0 0 1.5em 1.5em;
}

figcaption {
	font-style: italic;
	margin-top: 5px;
}

.img-block {
	width: 100%;
	display: block;
}

/* ####################################### */
/* ############# Transitions ############# */
/* ####################################### */

.no-transition {
	-webkit-transition: 0ms !important;
	transition: 0ms !important;
}

.quick-transition {
	-webkit-transition: 100ms !important;
	transition: 100ms !important;
}

/* ####################################### */
/* ################ RULE ################# */
/* ####################################### */

.rt,
.rv,
.rule-top {
	border-top: 1px solid #DDD;
}

.rb,
.rv,
.rule-bottom {
	border-bottom: 1px solid #DDD;
}

.rl,
.rh,
.rule-left {
	border-left: 1px solid #DDD;
}

.rr,
.rh,
.rule-right {
	border-right: 1px solid #DDD;
}

/* ####################################### */
/* ########## VERTICAL ALIGN ############# */
/* ####################################### */

.valign {
	width: 100%;
	height: 100%;
	display: table;
}

.valign-inner {
	display: table-cell;
	vertical-align: middle;
}