/**
 * Icons and other styles related to icons.
 * Part of the font icon styles based on Font Awesome - http://fontawesome.io
 */



/* Icon %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

.ic {
	display: inline-block;
	font-family: ThemeIcons;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* If icon is applied to 'i' tag */
i.ic {
	font-style: normal;
}

/* Floating icons - with generic modifiers
-------------------------------------------------------------- */
.ic.left {
	margin-right: .3em;
}
.ic.right {
	margin-left: .3em;
}

/* Size
-------------------------------------------------------------- */
/* Makes the font 33% larger relative to the icon container */
.ic-lg {
	font-size: 1.33333333em;
	line-height: 0.75em;
	vertical-align: -15%;
}
.ic-2x {
	font-size: 2em;
}
.ic-3x {
	font-size: 3em;
}
.ic-4x {
	font-size: 4em;
}
.ic-5x {
	font-size: 5em;
}
.ic-6x {
	font-size: 6em;
}
.ic-7x {
	font-size: 7em;
}
.ic-8x {
	font-size: 8em;
}
.ic-fw {
	width: 1.28571429em;
	text-align: center;
}

/* Lists
-------------------------------------------------------------- */
.ic-ul {
	padding-left: 0;
	margin-left: 2.14285714em;
	list-style-type: none;
}
.ic-ul > li {
	position: relative;
}
.ic-li {
	position: absolute;
	left: -2.14285714em;
	width: 2.14285714em;
	top: 0.14285714em;
	text-align: center;
}
.ic-li.ic-lg {
	left: -1.85714286em;
}
.ic-border {
	padding: .2em .25em .15em;
	border: solid 0.08em #eeeeee;
	border-radius: .1em;
}
.pull-right {
	float: right;
}
.pull-left {
	float: left;
}
.ic.pull-left {
	margin-right: .3em;
}
.ic.pull-right {
	margin-left: .3em;
}

/* Stacking
-------------------------------------------------------------- */
.ic-stack {
	position: relative;
	display: inline-block;
	width: 2em;
	height: 2em;
	line-height: 2em;
	vertical-align: middle;
}
.ic-stack-1x,
.ic-stack-2x {
	position: absolute;
	left: 0;
	width: 100%;
	text-align: center;
}
.ic-stack-1x {
	line-height: inherit;
}
.ic-stack-2x {
	font-size: 2em;
}
.ic-inverse {
	color: #ffffff;
}

/* Effects
-------------------------------------------------------------- */
.ic-spin {
	-webkit-animation: spin 2s infinite linear;
	-moz-animation: spin 2s infinite linear;
	-o-animation: spin 2s infinite linear;
	animation: spin 2s infinite linear;
}
@-moz-keyframes spin {
	0% {
		-moz-transform: rotate(0deg);
	}
	100% {
		-moz-transform: rotate(359deg);
	}
}
@-webkit-keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(359deg);
	}
}
@-o-keyframes spin {
	0% {
		-o-transform: rotate(0deg);
	}
	100% {
		-o-transform: rotate(359deg);
	}
}
@keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(359deg);
		transform: rotate(359deg);
	}
}
.ic-rotate-90 {
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
}
.ic-rotate-180 {
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
}
.ic-rotate-270 {
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	-webkit-transform: rotate(270deg);
	-moz-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	-o-transform: rotate(270deg);
	transform: rotate(270deg);
}
.ic-flip-horizontal {
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
	-webkit-transform: scale(-1, 1);
	-moz-transform: scale(-1, 1);
	-ms-transform: scale(-1, 1);
	-o-transform: scale(-1, 1);
	transform: scale(-1, 1);
}
.ic-flip-vertical {
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
	-webkit-transform: scale(1, -1);
	-moz-transform: scale(1, -1);
	-ms-transform: scale(1, -1);
	-o-transform: scale(1, -1);
	transform: scale(1, -1);
}


/* Characters as icon (letters, numbers etc.)
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/
.ic-char {
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif !important;
}


/* Images as icons
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/
.ic-img {
	font-family: inherit; /* Remove icon font to fix vertical alignment */
}
/* Set max size for images displayed as icons */
.ic-img img,
.icon img /* For backward compatibility */
{
	vertical-align: middle;
}



/* Iconbox - an icon with background color %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

.ib,

/* For backward compatibility */
.social-links a > span.icon
{
	vertical-align: middle; /* TODO: check in which cases it's required */
	text-align: center;
	background-color: #e5e5e5;
/*	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
*/
}


/* Size
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/
.ib,
/* For backward compatibility: */
.feature > span.icon,
.social-links a > span.icon
{
	line-height: 36px;	
	width: 36px;
	height: 36px;
}
.ib-size-l,
/* For backward compatibility: */
.feature > span.icon.large
 {
	line-height: 48px;
	width: 48px;
	height: 48px;
}
.ib-size-xl {
	line-height: 60px;
	width: 60px;
	height: 60px;
}
.ib-size-xxl {
	line-height: 72px;
	width: 72px;
	height: 72px;
}
.ib-size-xxxl {
	line-height: 84px;
	width: 84px;
	height: 84px;
}

/* For backward compatibility: align center the content of the iconbox */
.feature > span.icon { text-align: center; }


/* Labels
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/
/* Label which immediately follows the iconbox */
.ib + .label {
	line-height: 36px;
	display: inline-block;
}
.ib-size-l + .label {
	line-height: 48px;
}
.ib-size-xl + .label {
	line-height: 60px;
}
.ib-size-xxl + .label {
	line-height: 72px;
}
.ib-size-xxxl + .label {
	line-height: 84px;
}


/* Hover state
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/
.ib-hover:hover, /* Apply hover state color only when special class is present */
.feature-icon-hover:hover .ib,

/* For backward compatibility: */
.icon-hover:hover,
.feature-icon-hover:hover > span.icon
{
	background-color: #333;
	color: #fff;
}


/* Transitions
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/
.ib,
.icon-hover, /* For backward compatibility */
.feature-icon-hover .ib,
.feature-icon-hover .icon /* For backward compatibility */
{
	/* TODO: position animation deprecated */
	transition: 			color 300ms ease-in-out, background-color 300ms ease-in-out, background-position 300ms ease-in-out;
	-moz-transition: 		color 300ms ease-in-out, background-color 300ms ease-in-out, background-position 300ms ease-in-out;
	-webkit-transition: 	color 300ms ease-in-out, background-color 300ms ease-in-out, background-position 300ms ease-in-out;
	-o-transition: 			color 300ms ease-in-out, background-color 300ms ease-in-out, background-position 300ms ease-in-out;
}


/* Characters as icon - modify styles if inside iconbox
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/
.ib.ic-char,
.ib.i-char /* For backward compatibility */
{
	/*font-size: 16px;*/ /* Important: do not add font size here, it would override standard classes such as "ic-2x" */
	text-align: center;
}


/* Additional utility classes
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/

/* Background
-------------------------------------------------------------- */
/* Icon without background color */
.ib-no-bg,
.ib.no-bg-color /* For backward compatibility */
{
	background-color: transparent !important;
}

/* Shapes
-------------------------------------------------------------- */
.ib-circle,
.ib.circle /* For backward compatibility */
{
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}
.ib-rounded,
.ib.rounded /* For backward compatibility */
{
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.ib-square,
.ib.square /* For backward compatibility */
{
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
}

/* All icons square */
.ib-wrapper--square .ib,
.icon-wrapper-square .ib /* For backward compatibility */
{
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
}



/* Feature - box with icons, images, text etc. %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

/* Basic styles */
.feature { margin: 10px 0; }
.feature:after { display: block; content: "."; clear: both; font-size: 0; line-height: 0; height: 0; overflow: hidden; }
.feature.first { margin-top: 0; }
.feature.last { margin-bottom: 0; }

/* With top/bottom border line */
.feature.top-border { border-top: 1px solid #f5f5f5; padding-top: 10px; }
.feature.bottom-border { border-bottom: 1px solid #f5f5f5; padding-bottom: 10px; }

/* Wrapper with top/bottom line
-------------------------------------------------------------- */
.feature-wrapper.top-border {
	border-top: 1px solid #f5f5f5;
	margin-top: 20px;
	padding-top: 20px;
}
.feature-wrapper.bottom-border {
	border-bottom: 1px solid #f5f5f5;
	margin-bottom: 20px;
	padding-bottom: 20px;
}


/* Feature headings
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/
.feature .heading {
	font-size: 1.3333em; /*16px*/
	line-height: 1.25em; /*20px*/
	margin-bottom: 0.625em; /*10px*/
	font-weight: normal;
}
.feature .above-heading {
	margin: 0 0 5px;
	font-size: 11px;
	line-height: 1.4545em; /*16px*/
	text-transform: uppercase;
	color: #888;
}
.feature .below-heading {
	font-size: 1em;
	font-style: italic;
	line-height: 1.3333em; /*16px*/
	color: #888;
}


/* Feature and icons
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/

/* Floating icons - additional margin
-------------------------------------------------------------- */
.feature .ic.left {
	margin: 0 15px 10px 0;
}
.feature .ic.right {
	margin: 0 0 10px 15px;
}

/* Vertically centered icon
-------------------------------------------------------------- */
.feature.v-centered-content .v-center .ic {
	margin: 0 5px 0 0;
}


/* Indented feature
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/
/* IMPORTANT: inside indented feature, the first level icon automatically floats left */
.feature.indent > .ic,
.feature.indent > .icon /* For backward compatibility */
{
	float: left;
	margin: 0 15px 0 0;
}
/* But override this behavior if an icon is explicitly floated right */
.feature.indent > .ic.right,
.feature.indent > .icon.right /* For backward compatibility */
{
	float: right;
	margin: 0 0 0 15px;
}

/* Size of indentation
-------------------------------------------------------------- */
/* Size of indentation = width of iconbox + right margin of the iconbox */

/* Default */
.feature.indent
{
	padding-left: 51px; /* 36 + 15 */
}
.feature.indent > .ic,
.feature.indent > span.icon /* For backward compatibility */
{
	margin-left: -51px;
}

/* Large */
.feature.indent-size-l,
.feature.indent.large /* For backward compatibility */
{
	padding-left: 63px;
}
.feature.indent-size-l > .ic,
.feature.indent.large > .ic, /* For backward compatibility */
.feature.indent.large > span.icon.large /* For backward compatibility */
{
	margin-left: -63px;
}

/* X Large */
.feature.indent-size-xl
{
	padding-left: 75px;
}
.feature.indent-size-xl > .ic
{
	margin-left: -75px;
}

/* XX Large */
.feature.indent-size-xxl
{
	padding-left: 87px;
}
.feature.indent-size-xxl > .ic
{
	margin-left: -87px;
}

/* XXX Large */
.feature.indent-size-xxxl
{
	padding-left: 99px;
}
.feature.indent-size-xxxl > .ic
{
	margin-left: -99px;
}


/* Feature centered
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/
.feature.centered { text-align: center; }
.feature.centered .ic {
	margin: 0 0 10px;
}

/* Additional styles
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/
/* Auto-size: allow for big icons. IMPORTANT: don't use "span" tag together with "icon" in this selector! */
.feature .ic.auto-size { width: auto; max-width: none; height: auto; max-height: none; }



/* Utility classes %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */