/* 
Original Author - Joe Richo http://lemonade.im
Modified by - Chandan Pendkear 
Description - Styles for responsive container
Modifications - Changed breakpoints for devices
Date of Mod - 27.09.2015
*/

/* Makes container retain sizes even after padding */
* {
	margin: 0;	padding: 0;		-webkit-box-sizing:	border-box;		-moz-box-sizing: border-box;		box-sizing:	border-box;
}

/* container that wraps entire or part of a content */
.container {
	margin: 0 auto;		max-width: 100%;	padding: 0;	
}

.container:after {
	content: "";	display: table;		clear: both;
}

/* Apply fix padding to cols as per requirement */		
[class*='col-']{
	float: left;		padding: 0;
}

/* container inside col*/
.box {	color: #fff;	background: #1c1c1c;	font-size: 1.25em;	text-align: center;		padding: 1.25em 0; }


/**********************  
	Mobile first widths
**********************/

.container { margin: 0 auto;	max-width: auto;	}

/* 1/Nth */

.col-1-1	{	width: 100%;}
.col-1-2	{	width: 100%;}
.col-1-3	{	width: 100%;}
.col-1-4	{	width: 100%;}
.col-1-5	{	width: 100%;}
.col-1-6	{	width: 100%;}
.col-1-7	{	width: 100%;}
.col-1-8	{	width: 100%;}
.col-1-9	{	width: 100%;}
.col-1-10	{	width: 100%;}
.col-1-11	{	width: 100%;}
.col-1-12	{	width: 100%;}

/* Custom size */


/********************************************  
	IPAD Portrait - 768px ( container - 750px )
*********************************************/

@media only screen and ( min-width: 48em){

	.container { margin: 0 auto;	max-width: 46.875em;	}

	.col-1-1, .col-1-5, .col-1-7, .col-1-9, .col-1-11	{	width: 100%;}
	.col-1-3 {	width: 33.33%;}
	.col-1-2, .col-1-4, .col-1-6, .col-1-8, .col-1-10, .col-1-12	{	width: 50%;}

}
/* End of IPAD Portrait */


/***************************************************  
	IPAD Landscape - 1024px ( container - 1000px )
***************************************************/

@media only screen and ( min-width: 64em){

	.container { margin: 0 auto;	max-width: 62.500em;	}

	.col-1-1 {	width: 100%;}
	.col-1-3 {	width: 33.33%}
	.col-1-4 {	width: 25%;}
	.col-1-5 {	width: 20%;}
	.col-1-7 {	width: 14.28571428571429%;}
	.col-1-9 {	width: 11.11111111111111%;}
	.col-1-11 {	width: 9.090909090909091%;}
	.col-1-2, .col-1-6, .col-1-8, .col-1-10, .col-1-12	{	width: 50%;}

}
/* End of IPAD Landscape */



/****************************************************  
	Desktop - 1200px and higher ( container - 1170px )
*****************************************************/

@media only screen and ( min-width: 75em){

	.container { margin: 0 auto;	max-width: 73.125em;	}

	.col-1-1	{	width: 100%;}
	.col-1-2	{	width: 50%;}
	.col-1-3	{	width: 33.33%;}
	.col-1-4	{	width: 25%;}
	.col-1-5	{	width: 20%;}
	.col-1-6	{	width: 16.66666666666667%;}
	.col-1-7	{	width: 14.28571428571429%;}
	.col-1-8	{	width: 12.5%;}
	.col-1-9	{	width: 11.11111111111111%;}
	.col-1-10	{	width: 10%;}
	.col-1-11	{	width: 9.090909090909091%;}
	.col-1-12	{	width: 8.333333333333333%;}

}
/* End of Desktop - 1200px and higher */