/*
	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 */

.container > .row > div {
	box-sizing: border-box;
	padding: 3px;
}


/* 
	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%; margin-bottom: 2px; }



/* 
	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: 15px;
	display: block;
}

.col_1,
.col_2,
.col_3, .col_3c,
.col_4, .col_4c {
	margin-left		: 1.00%;
	margin-right	: 1.00%;
	margin-bottom	: 2px;
	float		: left;
	display		: block;
}

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

/* complements (autogenerated styles) */
.col_3c { width: 64.6666666667%; }
.col_4c { width: 73%; }



/* 
	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%;
}