/*
	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 (autogenerated styles ====*/
.col_0 {
	width: 100%;
	margin-bottom: 25px;
	display: block;
}

.col_1,
.col_2,
.col_3, .col_3c,
.col_4, .col_4c,
.col_5, .col_5c {
	margin-left		: .5%;
	margin-right	: .5%;
	margin-bottom	: 25px;
	float		: left;
	display		: block;
}

/* columns (autogenerated styles) */
.col_1 { width: 99%; }
.col_2 { width: 49%; }
.col_3 { width: 32.3333333333%; }
.col_4 { width: 24%; }
.col_5 { width: 19%; }

/* complements (autogenerated styles) */
.col_3c { width: 65.6666666667%; }
.col_4c { width: 74%; }
.col_5c { width: 79%; }



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