/*--------------------------------------------------------------------------
   

	Typefolio

	LESS-based responsive grid system

	0. YUI Library is used for CSS reset (http://yuilibrary.com/yui/docs/cssreset/)
	1. Body
	2. Typography
	3. Page Sections
		3.1. Topbar
		3.2. Intro
		3.3. Resume
		3.4. Works
			3.4.1 jQuery Reveal Plugin
		3.5. Contact / References / Testimonials
		3.6. Footer


--------------------------------------------------------------------------*/


@import "../../typegrid/typegrid.less";


// \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ 
//
//		0. Less Variables
//
// \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ 

// Less Variables

// Colors
@color-primary: #22eedd;
@color-primary-lighter: lighten( @color-primary, 5% );
@color-primary-darker: darken( @color-primary, 5% );

@color-contrast: white; 

// Font family
@font-sans: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-serif: 'Georgia', serif;



/*--------------------------------------------------------------------------
	1. Body
--------------------------------------------------------------------------*/

html {
}

body {
	color: #333;
	font-family: @font-sans;
	font-size: 14px;
	line-height: 25px;
	-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
	-webkit-text-size-adjust: 100%;

	@media @mobile {
		font-size: 12px;
		line-height: 22px; 
	}
}



/*--------------------------------------------------------------------------
	2. Typography
--------------------------------------------------------------------------*/

/* Links */
a, a:visited { color: #333; text-decoration: none; outline: 0; }
a:hover, a:focus { color: #000; }
p a, p a:visited { line-height: inherit; }

/* Visibility */
.hide { display: none!important; }

/* Highlighted Text */
::selection { 
	background: @color-primary; 
	color:white; 
	text-shadow: none; 
}

/* Firefox */
::-moz-selection { 
	background: @color-primary; 
	color:white; 
	text-shadow: none; 
}

em, .italic { font-style: italic; }
strong { font-weight: bold; }
small { font-size: 80%; }

/* Colors */
.font-color-primary {
	color: @color-primary;
}

.background-color-primary {
	background: @color-primary;
}

.font-color-secondary {
	color: #a33;
}

.font-color-black {
	color: #000;
}

.font-color-white {
	color: white;
}

.background-color-white {
	background: white;
}

.underline {
	display: inline-block; 
	padding-bottom: 4px; 
	border-bottom: 1px solid @color-primary; 
}

h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
}

button, 
.button,
a.button {
	color: white;
	background: @color-primary; 
	font-size: 15px;
	text-align: center; 
	padding: 20px 25px; 
	border: none; 
	cursor: pointer; 
	display: inline-block; 

	.border-box(); 
	.rounded(4px); 

	&.small {
		font-size: 14px;
		line-height: 24px; 
		padding: 16px 24px;
		.rounded(3px);
	}

	&.full {
		display: block; 
		width: 100%; 
		.rounded(5px); 
		padding: 35px 40px !important; 
	}

	&:hover {
		background: @color-primary-darker;
	} // &:hover

	&.black {
		color: white; 
		background: #111;

		&:hover {
			color: @color-primary; 
			background: #222; 
		} // &:hover
	} // &.black

} // button, .button


form p,
label,
legend { 
	font-size: 15px;
	line-height: 24px; 
}

label {
	display: block;
	color: #111; 
	font-size: 13px;
	line-height: 23px; 
	margin: 20px 0; 
}

input, 
textarea, 
select { 
	width: 100%; 
	padding: 20px 25px; 
	color: #111; 
	margin: 0 0 15px 0; 
	border: 1px solid #ddd;
	outline: none;
	.border-box(); 
}

input:focus, 
textarea:focus, 
select:focus { 
	color: @color-primary;
	border: 1px solid @color-primary;
}

::-webkit-input-placeholder { color:#ddd; }
::-moz-placeholder { color:#ddd; } /* firefox 19+ */
:-ms-input-placeholder { color:#ddd; } /* ie */
input:-moz-placeholder { color:#ddd; }

button.submit {
	display: block;
	cursor: pointer;
	color:white;
	background:@color-primary;
	padding: 20px 28px;
	border: none;
	.rounded(4px);

	&:hover { 
		background: @color-primary-darker; 
	} // &:hover
}

span.required { 
	color: @color-primary;
} /* Select the color of the * if the field is required. */

p.title-desc {
	color: #bbb; 
} // p.title-desc


/*--------------------------------------------------------------------------
	3. Page Sections
--------------------------------------------------------------------------*/

/* Common Elements */
img {
	max-width: 100%;
}

.remove-line-height {
	line-height: 0; 
} // .remove-line-height

.padding-vertical {
	padding: 50px inherit;
} // .padding-vertical

section {
} // section

blockquote {
	p {
		color: @color-primary; 
		font-family: 'Roboto Slab', Georgia, serif; 
		font-size: 36px; 
		line-height: 60px; 
		font-weight: 300; 
		margin-bottom: 10px; 
	}

	footer {
		color: #ccc; 
	}
}

.border-top {
	border-top: 1px solid #f5f5f5;
	padding-top: 30px;
}

.post img.featured {
	margin-bottom: 50px;
}

.page {

	p.title-desc {
		color: #ddd; 
		font-weight: bold;
		margin-top: 0; 
	} // p.title-desc

	p.page-desc {
		color: #222; 
		font-size: 32px;
		line-height: 50px; 
		margin-top: 30px;
		margin-bottom: 50px; 
	}

	p {
		margin-top: 30px; 
	} // p

} // .page


.box-about {
	
	margin-top: 30px; 
	
	h3 {
		margin-bottom: 50px; 
	} // h3

	p.tagline {
		font-size: 24px; 
		line-height: 44px; 
		margin-top: 30px; 
		margin-bottom: 30px; 
	} // p.tagline

} // .box-about 


.sidebar {

	padding-bottom: 40px; 

	// Sticky Sidebar
	// Stick is the original element
	&.sticky {

	} // .sticky

	// .sticked is added on scroll 
	&.sticked {
		display: none;
		padding: 0 20px 20px 20px; 

		h3 {
			border-top: 0; 
		}
	} // .sticked


	p {
		color: #666; 
		font-size: 12px;
		line-height: 23px;  
	} // p

	&.full-width {
		font-size: 14px;
		line-height: 25px; 
	}


	@media @widescreen {
		p {
			font-size: 14px;
			line-height: 25px;  
		} // p
	} // @media @widescreen

} // .sidebar



.photography {
	img {
		margin-bottom: 60px; 
	}
}



.box-meta {
	line-height: 16px; 

	span.category,
	span.date {
		color: #ccc; 
		font-size: 12px;
		line-height: 22px; 
	}

	span.category {
		color: #333; 
		font-weight: bold; 
	}
}



/* Navigation */
.nav-pages {
	font-size: 11px; 
	margin-top: 30px;

	a.link-prev,
	a.link-next {
		color: #555; 
		text-transform: uppercase; 
		letter-spacing: 2px; 
		text-align: center; 
		padding: 25px 0;
		display: block;
		width: 50%; 
		float: left; 
		.border-box(); 
		
		span {
			display: inline-block;
			padding-bottom: 4px;
			border-bottom: 1px solid #555
		} // span
	} // a.link-prev, a.link-next

	a.link-prev {
		div {
			padding-right: 33.33333333%;
			
			@media @widescreen {
				padding-right: 50%;
			} // @media @widescreen
	
			@media @under-tablet {
				padding-right: 0%
			} // @media @tablet
		} // span
	} // a.link-next
	
	a.link-next {
		div {
			padding-left: 33.33333333%;
			
			@media @widescreen {
				padding-left: 50%;
			} // @media @widescreen
	
			@media @under-tablet {
				padding-left: 0%
			} // @media @tablet
		} // div
	} // a.link-next

		a:hover {
			color: @color-primary; 
			
			span {
				border-bottom-color: @color-primary;
			} // span
		} // a:hover
} // .nav-pages

.container .nav-pages {
	a.link-prev,
	a.link-next {
		padding: 20px 0;
	} // a.link-prev, a.link-next
	
	a.link-prev {
		text-align: left; 
	} // a.link-prev
	
	a.link-next {
		text-align: right; 
	} // a.link-next
}


	/*---------------------------------------------------
		3.2 Topbar
	---------------------------------------------------*/

	#topbar {
	}

		ul#nav {
			font-size: 12px;
			line-height: 21px;
			font-weight: bold; 
			overflow: visible; 
			
			@media @tablet {
				font-size: 11px;
				line-height: 21px;
			} // @media @tablet

			@media @mobile {
				display: none;
			} // @media @mobile

			/* Common li elements (all levels deep) */
			li {
				position: relative;

				ul {
					a {
						color: #555;
						padding: 25px 0;
						border-bottom: 1px solid #222;
					} // a
				} // ul

				&:hover {
					
				} // &.hover
			} // li

			/* Top Level (first) */
			& > li {
				zoom: 1; 
				width: 25%; 
				display: inline; 
				float: left; 

				&:last-child,
				&.last-child {
				} // :last-child, .last-child

				a {
					color: #aaa; 
					display: block;
					padding: 18px 0 15px 0;
					margin: 0 20px;
					border-bottom: 1px solid #f5f5f5;

					span.count {
						color: #ddd; 
						display: block; 
						font-size: 11px; 
					} // span.count

					&:last-child,
					&.last-child {
					} // :last-child, .last-child

					&:hover {
						color: white; 
						border-bottom: none; 

						span.count {
							color: white;
						} // span.count
					} // &:hover
				} // a

				&:hover,
				&.hover {
					background: #111; 
					margin: 0; 

					a {
						color: white; 
						border-bottom: none;

						span.count {
							color: white;
						} // span.count
					} // a

					ul li:last-child,
					ul li.last-child {
						& > a {
							border-bottom: none; 
						}
					}
				} // &:hover


				&.hasChild,
				&.hasChildren {
					&:hover {
						a {
							border-bottom: 1px solid #222; 
						}

						& > a {
							border-bottom: 1px solid #222 !important; 
						}
					} // &:hover

				} // &.no-child, &.no-chidlren

			} // &>li



			/* Second Level and third */
			li ul {
				background: #111;
				width: 100%; 
				visibility: hidden; 
				position: absolute;
				z-index: 10; 
				top: 100%;
				left: 0px; 

				a {
					&:hover {
						color: @color-primary;
						border-bottom: 1px solid #222;
					} // &:hover
				} // a

				li:last-child > a, 
				li.last-child > a {
					border-bottom: none; 
				}
			} // & li ul

			/* Deeper Level (Third and beyond) */
			& > li ul ul {
				position: absolute; 
				top: 0; 
				left: 100%; 
			} // & > li ul ul


		} // ul#nav





	/* Mobile Menu */
	#menu-mobile-wrapper {
		display: none; 

		@media @mobile {
			display: block; 
		} // @media-mobile


		#toggle-menu {
			cursor: pointer; 
			color: #222;
			display: block;
			font-size: 15px;
			line-height: 25px; 
			padding: 20px 0 20px 30px; 
			background: url('../images/menu_open.png') no-repeat left center;
			border-bottom: 1px solid #f5f5f5; 
		} // #toggle-menu

		&.toggle-open {
			#toggle-menu {
				background-image: url('../images/menu_closed.png');
			}

		} // &.toggle-open

		ul#menu-mobile {
			display: none; 
			margin-bottom: 15px; 

			li {
				font-size: 12px;
				line-height: 21px;
				display: block;

				a {
					color: #444; 
					display: block;
					padding: 12px 0; 
					border-bottom: 1px solid #f5f5f5; 

					&:hover {
						color: @color-primary; 
					} // &:hover
				} // a
			} // li 

			overflow: hidden; 
		} // ul#menu-mobile

	} // #menu-mobile-wrapper




	/*---------------------------------------------------
		3.2 Header
	---------------------------------------------------*/

	#header {

		.logo-wrap {
			padding: 50px 0 50px 0;
		}

		h1 {
			font-size: 24px;
			line-height: 34px; 
			font-weight: bold; 
		} // h1
		
		p.site-desc {
			color: #ccc;
			font-size: 12px;
			line-height: 19px;
		} // p.site-desc


	} // #header



	/*---------------------------------------------------
		3.3 Home
	---------------------------------------------------*/

	.box-recent {
			
		h3 {
			font-size: 16px;
			line-height: 26px; 
			padding: 30px 0 20px 0; 

			a {
				color: #ddd; 
			} // a
		} // h3


		a.permalink {
			display: block; 
			border-top: 1px solid #eee; 
			
			h4 {
				font-size: 22px;
				line-height: 36px; 
				font-weight: normal; 
				margin-bottom: 5px; 
			}

			p.meta {
				color: @color-primary; 

				span {
					color: #ccc;
				} // span
			} // p.meta

			&:hover {
				color: #22eedd;
				border-top: 1px solid #22eedd; 

				p.meta {
					span {
						color: @color-primary;
					} // span
				} // p.meta
			} // &:hover
		} // a.permalink

		.item {
			padding: 20px 0;
		} // .item
	} // .box-recent

	.box-about {

		h3 {
			color: @color-primary; 
		} // h3

		

		p {
			
		} // p
	} // .box-about



	/*---------------------------------------------------
		3.3 About
	---------------------------------------------------*/

	#about {
		
		h2 {
			padding-top: 30px;
		} // h2

		.services {
			
			h3 {
				font-size: 32px; 
				line-height: 42px; 
			} // h3

			.item {
				padding: 30px 0; 
			}

			h4 {
				font-size: 16px;
				line-height: 26px; 

				display: inline-block;
				padding-bottom: 5px;
				border-bottom: 1px solid #111; 
			} // h4

			p {
				font-size: 15px;
				line-height: 28px; 
				margin-top: 20px; 

			} // p


		} // .services

		p {
			&.tagline {
				color: white;
				font-size: 18px;
				line-height: 28px; 
				text-align: center; 
				margin: 0; 
			} // &.tagline
		} // p

	} // #about



	/*---------------------------------------------------
		3.3 Works
	---------------------------------------------------*/

	#works {
	

		.item {
			margin-bottom: 50px; 
		}

			.item h3 {
				color: #555;
				font-size: 12px;
				line-height: 22px;
				font-weight: bold; 
			}

				a.permalink:hover h3 {
					color: #111; 
				}

			.item span.category {
				color: #ccc;
				display: block; 
				font-size: 12px;
				line-height: 18px; 
				margin-bottom: 5px; 
			}

				a.permalink:hover span.category {
					color: @color-primary; 
				}

			.item p.excerpt {
				font-size: 13px;
				line-height: 18px; 
				margin-top: 10px; 
			}

		&.stackgrid {

			.item {
				width: 33.333333%;
				float: left; 
				margin-bottom: 0; 
				position: relative; 

				@media @widescreen {
					width: 25%;
				} // @media @widescreen


				@media @tablet {
					width: 50%;
				} // @media @tablet

				@media @mobile-landscape {
					width: 50%; 
				}

				@media @mobile-portrait {
					width: 100%;
				} // @media @mobile

				.box-desc {
					padding: 15px 30px; 
					text-align: center; 
				} // .box-desc
			} // .item

			&.images-only {
				
				.item {
					.box-desc {
						display: none;
						
						text-align: left;
						padding: 25px 30px;
						
						background: url('../images/alpha/bg_alpha60.png');
						
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						.border-box();
						 
						h3 {
							color: white;
						} // h3
					} // .box-desc
				} // .item
				
				/* Navigation */
				.nav-pages {
					margin-top: 0;
				
					a.link-prev,
					a.link-next {
						border-top: none;
					} // a.link-prev, a.link-next
				} .nav-pages
			} // &.images-only

		} // &.gridstack

	} // section#works


	/*---------------------------------------------------
		3.3 Shopw
	---------------------------------------------------*/
	
	#shop {

		h2 {
			font-weight: bold; 
			margin-bottom: 30px; 
		}


		.item {
			
			margin-bottom: 40px; 
			

			/* Item information */
			.box-info {

				width: 55%;
				float: left; 

				h4 {
					color: #aaa; 
					font-size: 12px;
					line-height: 21px;
					font-weight: bold; 
				} // h4

				span.category {
					color: #ccc; 
					font-size: 12px;
					line-height: 21px;
				} // span-category

			} // .box-info


			.box-price {
				
				color: #222;
				font-size: 12px;
				line-height: 21px; 

				width: 40%;
				float: right;
				text-align: right;
				border-left: 1px solid #f5f5f5; 

				span.markdown {
					color: #aaa; 
					text-decoration: line-through; 
					display: block; 
				}

				span.sale {
					color: #f54; 
					display: block; 
				}
			} // .box-price



			a {

				&:hover {
					.box-info {
						h4 {
							color: #222; 
						} // h4

						span.category {
							color: #999; 
						} // span-category
					} // .box-info
				} // &:hover

			}  // a

		} // .item
		
		.sidecart {

			h4 {
				font-size: 12px;
				line-height: 22px; 
				font-weight: bold; 

				a {
					background: url('../images/icons/icon_cart_white.png') no-repeat 20px center;
					display: block;
				} // a
			} // h4
		} // .cart

	} // #shop



	section#cart {
		h3 {
			padding: 30px 0; 

			a {
				color: #333;
			} // a
		} // h3

		.sidebar {
			p.title-desc { 
				margin-bottom: 20px; 
			}
		}

		p.vertical-divider {
			color: #ddd;
			font-size: 16px;
			font-style: italic; 
			font-weight: bold; 
			text-align: center; 
			padding: 15px 0;
		}
	} // #cart


	table.table-cart {
		
		color: #777; 
		width: 100%;
		margin-bottom: 30px; 

		td {
			padding: 15px 0;
			text-align: center; 


			&.product-name {
				color: #333; 
				text-align: left; 

				a {
					color: #333;

					&:hover {
						color: @color-primary;
					} // &:hover
				} // a
			} // .name

			&.product-remove {
				color: #e54; 

				a {
					color: #e54;
				} // a
			} // .remove
		} // td

		thead {
			color: #111; 
			font-weight: bold;

			tr {

				td {

					border-top: 1px solid #f5f5f5; 

					&.last,
					&:last-child {
					} // &.last

					&.product-name {
					} // &.product-name

					&.product-remove {
					} // .product-remove
				} // td
			} // tr
		} // thead

		tbody {
			color: #555; 

			tr {

				&.odd {

					td {

						&.last,
						&:last-child {
						} // &.last
					}
				} // &:odd

				&.even {

					td {

						&.last,
						&:last-child {
						} // &.last

						&.product-remove {
						}
					}

				} // &:even
				
				td {

					border-top: 1px solid #f5f5f5; 

					&.product-name {
						
					} // &.product-name

					&.product-remove {
					} // &.product-name
				} // td

			} // tr
		} // tbody

		tfoot {
				

			tr {
				td {

					border-top: 1px solid @color-primary-darker;

					&.product-total {
						color: #111; 
					} // &.product-total

					&.product-total-number {
						color: #111; 
					} // &.product-total-number
				} // td
			} // tr
		} // tfoot

		@media @mobile {
			font-size: 11px;
			line-height: 20px;

			.product-price {
				display: none; 
			}
		} // @media @mobile

	} // .table-cart






	/*---------------------------------------------------
		3.3 Archive
	---------------------------------------------------*/
	
	#archive {

		.entry {
			margin-bottom: 50px; 


			.box-meta {
				padding-top: 30px; 
			} // .box-meta

			.box-content {
				padding-top: 30px; 

				@media @under-tablet {
					border-top: none; 
				} // @media @under-tablet
			} // .box-content

			h4 {
				font-size: 18px;
				line-height: 26px;
				font-weight: bold; 
				margin-bottom: 28px; 
			}

			p {
				color: #333;
				margin-top: 40px; 
				font-size: 16px;
				line-height: 28px;
			}

			a {
				&:hover {
					h4 {
						color: @color-primary;
					} // h4
				} // &:hover
			} // a

		} // .entry

	} // #archive



	/*---------------------------------------------------
		3.3 Contact
	---------------------------------------------------*/

	section#contact {

		p.title-desc {
			margin-bottom: 40px; 
		}

		/* Register Form */
		form {
			margin-bottom: 40px; 
		}

		#contact-warning {
			display: none;
			color: white;
			background: #dd3333;
			padding: 20px 25px;
			margin-bottom: 30px;
		} // #contact-warning
		
		#contact-success {
			display: none;
			color: #77aa44;
			background: #111;
			padding: 20px 25px;
			margin-bottom: 30px;
		} // #contact-success
		
		.box-contact {
			font-size: 14px; 
			line-height: 28px; 
			background-size: cover; 

			h3 {
				color: @color-primary; 
				font-size: 14px; 
				line-height: 24px; 
				font-weight: normal; 
				margin-bottom: 15px; 
			} // h3

			p {
				margin-top: 0; 
			} // p
		} // .box-contact

		#map {
			height: 500px; 
			margin-bottom: 30px; 
		}

	} // section#contact



	/*---------------------------------------------------
		3.6 Footer
	---------------------------------------------------*/

	#footer {
		font-size: 13px;
		line-height: 24px;
		padding: 30px 0;
	}

		#footer p {
			margin-top: 30px;
		}

			#footer p a {
				color: @color-primary;
			}

		#footer ul#social {

		}

			#footer ul#social li {
				display: inline-block;
				float: left;
			}

			#footer ul#social li a {
				display: block;
				padding: 30px 40px 30px 0
			}






/*--------------------------------------------------------------------------
	5. jQuery Plugins
--------------------------------------------------------------------------*/


	/*---------------------------------------------------
		5.1 iosSlider
	---------------------------------------------------*/

	.containerOuter {
		background: #111;
		height: 357px;
		overflow: hidden;
	}

	.iosContainer {
		position: relative;
		width: 100%;
		height: 357px;
		margin: 0 auto;
		overflow: visible;
	}

	.iosContainer .iosSliderContainer {
		width: 100%;
		height: 357px;
		margin: 0;
		overflow: visible;
	}

	.iosSlider {
		position: relative;
		top: 0;
		left: 0;
		overflow: visible;
		width: 100%;
		height: 357px;
	}

	.iosSlider .slider {
		width: 10000px;
		height: 100%;
	}

	.iosSlider .slider .item {
		float: left;
		width: 920px;
		height: 100%;
	}

	.iosSlider .slider .item img {
		width: 100%;
	}

		.iosThumb2Load {
			height: 93px;
			background: #111; 
		}

		.iosThumb2Load .slider {
			width: 100%;
			height: 100%;
		}

		.iosThumb2Load .button-thumb {
			float: left;
			margin: 0; 
			width: 240px;
			height: 93px;
			.opacity(0.5);
		}

		.iosThumb2Load .selected {
			.opacity(1);
		}

		@media @widescreen {
			.iosSlider .slider .item {
				width: 1160px;
			}

			.containerOuter, 
			.iosContainer,
			.iosContainer .iosSliderContainer,
			.iosSlider {
				height: 450px;
			}
		}

		/* Note: Design for a width of 768px */
		@media @tablet {
			.iosSlider .slider .item {
				width: 660px;
			}

			.containerOuter, 
			.iosContainer,
			.iosContainer .iosSliderContainer,
			.iosSlider {
				height: 256px;
			}
		} // @media @tablet

		@media @mobile {
			.iosSlider .slider .item {
				width: 280px;
			}

			.containerOuter, 
			.iosContainer,
			.iosContainer .iosSliderContainer,
			.iosSlider {
				height: 109px;
			}

			.iosThumb2Load {
				visibility: hidden; 
				margin: 0;
				height: 0; 
			}
		}

		@media @mobile-landscape {
			.iosSlider .slider .item {
				width: 400px;
			}

			.containerOuter, 
			.iosContainer,
			.iosContainer .iosSliderContainer,
			.iosSlider {
				height: 150px;
			}

			.iosThumb2Load {
				visibility: hidden; 
				margin: 0;
				height: 0; 
			}
		}

    


	/*---------------------------------------------------
		5.2 FlexSlider
	---------------------------------------------------*/

	/*
	 * jQuery FlexSlider v2.0
	 * http://www.woothemes.com/flexslider/
	 *
	 * Copyright 2012 WooThemes
	 * Free to use under the GPLv2 license.
	 * http://www.gnu.org/licenses/gpl-2.0.html
	 *
	 * Contributing author: Tyler Smith (@mbmufffin)
	 */

	 
	/* FlexSlider Necessary Styles
	*********************************/ 
	.flexslider .slides > div {
		display: none; 
		-webkit-backface-visibility: hidden;
	} /* Hide the slides before the JS is loaded. Avoids image jumping */

	.flexslider .slides img {
		display: block; 
		width: 100%; 
	}

	.flex-pauseplay span {text-transform: capitalize;}

	/* Clearfix for the .slides element */
	.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} 
	html[xmlns] .slides {display: block;} 
	* html .slides {height: 1%;}



	/* FlexSlider for TypeFolio
	*********************************/
	.flexslider { 
		background: white;
		position: relative; 
		zoom: 1;
		overflow: hidden; 
	}

	.flex-viewport {
		max-height: 2000px; 
		-webkit-transition: all 1s ease; 
		-moz-transition: all 1s ease; 
		transition: all 1s ease;
	}

	.loading .flex-viewport {
		max-height: 300px;
	}

	.flexslider .slides {
		zoom: 1;
	}

	.flexslider .slides > div {
	}


	/* Direction Nav */
	.flex-direction-nav {
		*height: 0; 
	}

	.flex-direction-nav a {
		width: 30px; 
		height: 30px; 
		margin: -20px 0 0; 
		display: block; 
		background: url(../images/bg_direction_nav.png) no-repeat 0 0; 
		position: absolute; 
		top: 50%; 
		z-index: 10; cursor: pointer; 
		text-indent: -9999px; 
		opacity: 0; 
		-webkit-transition: all .3s ease;
	}

	.flex-direction-nav .flex-next {
		background-position: 100% 0; 
		right: -36px; 
	}
	.flex-direction-nav .flex-prev {
		left: -36px;
	}
	.flexslider:hover .flex-next {
		opacity: 0.8; 
		right: 5px;
	}
	.flexslider:hover .flex-prev {
		opacity: 0.8; left: 5px;
	}
	.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;}
	.flex-direction-nav .flex-disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;}

	/* Control Nav */
	.flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: center;}
	.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
	.flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3);}
	.flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
	.flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }

	.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
	.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
	.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
	.flex-control-thumbs img:hover {opacity: 1;}
	.flex-control-thumbs .flex-active {opacity: 1; cursor: default;}


	.flexslider-nav-carousel { 
		background: #111; 
		margin-bottom: 30px; 
	}

	.item-nav {
		cursor: pointer; 
		padding: 30px 0 30px 40px;  
		border-left: 1px solid #222; 
	
		span.category {
			display: block; 
			color: #444; 
			font-size: 13px;
			line-height: 23px; 
			margin-bottom: 5px; 
		} // span.cateogory

		h4 {
			color: #444; 
			font-size: 18px;
			line-height: 26px;
		} // h4

		&.flex-active {

			border-left: 1px solid #333; 

			span.category {
				color: white; 
			} // span.cateogory

			h4 {
				color: white;
			} // h4

		} // &.flex-active
	} // .item-nav

	@media screen and (max-width: 860px) {
		.flex-direction-nav .flex-prev {opacity: 1; left: 0;}
		.flex-direction-nav .flex-next {opacity: 1; right: 0;}
	}