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

   THE GRID : LAYOUT
   
-------------------------------------------------- */

/* -------------------------
	.row > .blk
------------------------- */

.row {
	clear:both;
}
.row .blk {
	padding-left:50px;
	padding-right:50px;
	margin-bottom:50px;
}
.row .blk.fat {
	padding-left:0;
	padding-right:0;
}
.row .blk.fat img {
	width:100%;
}

/* -------------------------
	.row.w2col > .blk.col
------------------------- */

.row.w2col {
	position:relative;
}
.row.w2col:after {
	content:'.';
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
.row.w2col .col {
	width:50%;
	-webkit-box-sizing:border-box;
	   -moz-box-sizing:border-box;
	        box-sizing:border-box;
}
.row.w2col.reg .col.c1 {
	float:left;
	padding-right:15px;
}
.row.w2col.reg .col.c2 {
	float:right;
	padding-left:15px;
}
.row.w2col.rev .col.c1 {
	float:right;
	padding-left:15px;
}
.row.w2col.rev .col.c2 {
	float:left;
	padding-right:15px;
}

/* img */

.row.w2col.reg .col.c2 img,
.row.w2col.rev .col.c1 img {
	margin-left:auto;
}

/* .xs & .xxs */

.row.w2col.xs .col.c1 { width:40%; }
.row.w2col.xs .col.c2 { width:60%; }
.row.w2col.xxs .col.c1 { width:30%; }
.row.w2col.xxs .col.c2 { width:70%; }

/* .xl & .xxl */

.row.w2col.xl .col.c1 { width:60%; }
.row.w2col.xl .col.c2 { width:40%; }
.row.w2col.xxl .col.c1 { width:70%; }
.row.w2col.xxl .col.c2 { width:30%; }

/* .align-bottom-on */

.row.w2col .col.align-bottom-on {
	position:absolute;
	bottom:0;
}
.row.w2col.reg .col.c1.align-bottom-on { left:0; }
.row.w2col.reg .col.c2.align-bottom-on { right:0; }
.row.w2col.rev .col.c1.align-bottom-on { right:0; }
.row.w2col.rev .col.c2.align-bottom-on { left:0; }

/* --------------------------------------------------
   WIDTH <= 800PX
-------------------------------------------------- */

@media
only screen and (max-width:800px)
{
	
	/* -------------------------
		.row > .blk
	------------------------- */
	
	.row .blk {
		padding-left:10%;
		padding-right:10%;
	}
	
	/* -------------------------
		.row.w2col > .blk.col
	------------------------- */
	
	.row.w2col .col.c1 {
		margin-bottom:20px;
	}
	.row.w2col.reg .col.c1,
	.row.w2col.reg .col.c2,
	.row.w2col.rev .col.c1,
	.row.w2col.rev .col.c2 {
		width:100%;
		padding-left:10%;
		padding-right:10%;
	}
	.row.w2col.reg .col.c1.fat,
	.row.w2col.rev .col.c2.fat { padding-left:0; }
	.row.w2col.rev .col.c1.fat,
	.row.w2col.reg .col.c2.fat { padding-right:0; }
	
	/* .align-bottom-on */
	
	.row.w2col .col.align-bottom-on {
		position:static;
		bottom:auto;
	}
	.row.w2col.reg .col.c1.align-bottom-on,
	.row.w2col.reg .col.c2.align-bottom-on,
	.row.w2col.rev .col.c1.align-bottom-on,
	.row.w2col.rev .col.c2.align-bottom-on {
		left:auto;
		right:auto;
	}
}

/* --------------------------------------------------
   WIDTH <= 500PX
-------------------------------------------------- */

@media
only screen and (max-width:500px)
{
	
	/* -------------------------
		.row > .blk
	------------------------- */
	
	.row .blk {
		padding-left:25px;
		padding-right:25px;
		margin-bottom:30px;
	}
	
	/* -------------------------
		.row.w2col > .blk.col
	------------------------- */
	
	.row.w2col .col.c1 {
		margin-bottom:10px;
	}
	.row.w2col.reg .col.c1,
	.row.w2col.reg .col.c2,
	.row.w2col.rev .col.c1,
	.row.w2col.rev .col.c2 {
		padding-left:25px;
		padding-right:25px;
	}
	.row.w2col.reg .col.c1.fat,
	.row.w2col.reg .col.c2.fat,
	.row.w2col.rev .col.c1.fat,
	.row.w2col.rev .col.c2.fat {
		padding-left:0;
		padding-right:0;
	}
}





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

   THE GRID : TYPOGRAPHY
   
-------------------------------------------------- */

.row .blk {
	text-align:justify;
}
.row.w2col.reg.xxl .col.c2,
.row.w2col.rev.xxs .col.c1 {
	text-align:left;
}
.row.w2col.reg.xxs .col.c1,
.row.w2col.rev.xxl .col.c2 {
	text-align:right;
}

/* --------------------------------------------------
   WIDTH <= 800PX
-------------------------------------------------- */

@media
only screen and (max-width:800px)
{
	.row.w2col.reg.xxl .col.c2,
	.row.w2col.rev.xxs .col.c1,
	.row.w2col.reg.xxs .col.c1,
	.row.w2col.rev.xxl .col.c2 {
		text-align:justify;
	}
}





/* --------------------------------------------------
	
	THE GRID : COMPONENTS
	
-------------------------------------------------- */

/* --------------------------------------------------
	CAPTION
-------------------------------------------------- * /

.caption {
	margin:.5em 1em;
	font-size:.8em;
	color:#888;
}

/* --------------------------------------------------
	PATCHWORK
-------------------------------------------------- */

.patchwork {
	position:relative;
}
.patchwork:after {
	height:0;
	clear:both;
	content:' ';
	display:block;
	overflow:hidden;
	visibility:hidden;
}

.patchwork .img {
	width:50%;
	float:left;
	-webkit-box-sizing:border-box;
	   -moz-box-sizing:border-box;
	        box-sizing:border-box;
}
.patchwork .img.img1 {
	padding-right:2px;
}
.patchwork .img.img2 {
	padding-left:2px;
}