/*
	34 Responsive Grid System
	Multi-state, responsive CSS grid system

	Developer	: Kemal Yılmaz
	URL			: http://34grid.com
	Contact		: http://kemalyilmaz.com
				: http://twitter.com/xkema
				: http://www.facebook.com/pages/34Grid/401562963236958
	Version		: 1.0

	LICENSED UNDER Creative Commons Attribution 3.0 Unported License.
*/



/*
	Reset styles.
	============================================================ CONTAINER ====
*/
/* I didn't add any reset styles, use your own */



/*
	Main width-controller for your content. think ".container"
	class as a holder for ".row" classes for a basic layout.
	Default centered with margin 0 auto; style.
	============================================================ CONTAINER ====
*/
.container { margin: 0 auto; }



/*
	Main grouping blocks. You can dump "n*100%"" width content to a
	single ".row". (with the little help of .skip-float and manual
	.user-float classes)
	================================================================== ROW ====
*/
.row { width: 100%; }



/*
	A basic transitions for immediate childs of ".row" classes. I added
	transitions assuming your html layout keeps "col_*"" elements right
	after ".row" classes. (col_*'s are immediate childs of .row's)
	Delete this block to get rid of transitions.
	(transitions are incompatible with some browsers.
	("some browsers" usually refers to internet explorer :)
	====================================================== ROW TRANSITIONS ====
*/
/*
.row > * {
	-webkit-transition	: all 400ms ease-out;
	-moz-transition		: all 400ms ease-out;
	-o-transition		: all 400ms ease-out;
	-ms-transition		: all 400ms ease-out;
	transition			: all 400ms ease-out;
}
*/


/*
	Auto clearfix for all rows. Borrowed from HTML5BOILERPLATE.
	====================================================== ROW TRANSITIONS ====
*/
.row:before, .row:after { content: ""; display: table; }
.row:after { clear: both; }
.row { *zoom: 1; }



/*
	Column (col_*) and complement (col_*c) classes.
	.col_0 class is not a must but i added it to
	keep things organized. You can use it for
	marginless 100% widths.
	================================================ COLUMNS & COMPLEMENTS ====
*/

/* columns & complements (autogenerated styles) */
.col_0 {
	width: 100%;
	margin-bottom: 0px;
	display: block;
  float: left;
}

.col_1,
.col_2,
.col_3, .col_3c,
.col_4, .col_4c,
.col_5, .col_5c,
.col_6, .col_6c, .col_6f {
	margin-left		: 1%;
	margin-right	: 1%;
	margin-bottom	: 0px;
	float		: left;
	display		: block;
}

/* columns (autogenerated styles) */
.col_1 { width: 98%; }
.col_2 { width: 48%; }
.col_3 { width: 31.3333333333%; }
.col_4 { width: 23%; }
.col_5 { width: 18%; }
.col_6 { width: 14.6666666667%; }

/* complements (autogenerated styles) */
.col_3c { width: 64.6666666667%; }
.col_4c { width: 73%; }
.col_5c { width: 78%; }
.col_6c { width: 81.3333333333%; }
.col_6f { width: 83.3333333333%; margin-left: 0; margin-right: 0;}

/* special hard margin boxes */
.hard-margins .col_1 {width: 100%; margin-left: 0; margin-right: 0;}

.hard-margins .col_2 {width: 49%;}
.hard-margins .col_2.itm_1 {margin-left:    0; margin-right: 0.5%;}
.hard-margins .col_2.itm_2 {margin-left: 0.5%; margin-right: 0;}

.hard-margins .col_3 {width: 32.6666666667%;}
.hard-margins .col_3.itm_1 {margin-left:    0; margin-right: 0.5%;}
.hard-margins .col_3.itm_2 {margin-left: 0.5%; margin-right: 0.5%;}
.hard-margins .col_3c,
.hard-margins .col_3.itm_3 {margin-left: 0.5%; margin-right: 0;}

.hard-margins .col_4 {width: 24.25%;}
.hard-margins .col_4.itm_1 {margin-left:    0; margin-right: 0.5%;}
.hard-margins .col_4.itm_2,
.hard-margins .col_4.itm_3 {margin-left: 0.5%; margin-right: 0.5%;}
.hard-margins .col_4c,
.hard-margins .col_4.itm_4 {margin-left: 0.5%; margin-right: 0;}

.hard-margins .col_5 {width: 19.2%;}
.hard-margins .col_5.itm_1 {margin-left:    0; margin-right: 0.5%;}
.hard-margins .col_5.itm_2,
.hard-margins .col_5.itm_3,
.hard-margins .col_5.itm_4 {margin-left: 0.5%; margin-right: 0.5%;}
.hard-margins .col_5c,
.hard-margins .col_5.itm_5 {margin-left: 0.5%; margin-right: 0;}

.hard-margins .col_6 {width: 15.8333333333%;}
.hard-margins .col_6.itm_1 {margin-left:    0; margin-right: 0.5%;}
.hard-margins .col_6.itm_2,
.hard-margins .col_6.itm_3,
.hard-margins .col_6.itm_4,
.hard-margins .col_6.itm_5 {margin-left: 0.5%; margin-right: 0.5%;}
.hard-margins .col_6c,
.hard-margins .col_6.itm_6 {margin-left: 0.5%; margin-right: 0;}

.col_3.hard-left   {width: 33%; margin-left: 0;   margin-right: 0.5%;}
.col_3c.hard-right {width: 66%; margin-left: 0.5%; margin-right: 0;}

/*
	100% width auto control for "img", "object" and
	"embed" controls.
	============================================ IMAGE FULL WIDTH CONTROLS ====
*/
img, object, embed { max-width: 100%; }
img { height: auto; }
figure img { max-width: 100%; }



/*
	Use ".skip-float" class to start from brand new lines.
	Clears left of current 100% group for new 100%
	lines in same ".row" group.
	@see webpage for details
	=============================================== FLOATING PROBLEM FIXER ====
*/
.skip-float { clear: left; }



/*
	CSS hack for responsive videos.
	@see http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
	@see http://webdesignerwall.com/tutorials/css-elastic-videos
	========================================================= VIDEO HOLDER ====
*/
.video-holder {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
	display: block;
}

.video-holder iframe, .video-holder object, .video-holder embed {
	position: absolute;	top: 0;	left: 0; width: 100%; height: 100%;
}