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

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

/* columns (autogenerated styles) */
.col_1 {
  width: 98%;
}

.col_2 {
  width: 48%;
}

.col_3 {
  width: 31.3333333333%;
}

/* Ergänzung HSD */
.col_1c {
  width: 99%;
  margin-left: 0%;
  margin-right: 1%;
  float: left;
  display: block;
}

.col_2c {
  width: 49%;
  margin-left: 0%;
  margin-right: 1%;
  float: left;
  display: block;
}

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

  .col_3c .col_2c {
    margin-top: 0px;
  }

/* Fester Abstand links für die ersten Columns je Row - Ergänzung HSD */
.row > .col_1,
.row > .col_2:first-of-type,
.row > .col_3:first-of-type,
.row > .col_3c:first-of-type {
  margin-left: 8px;
}


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