/* Table of Contents:
  1. Tablet landscape
  2. Tablet portrait
  3. Mobile
*/



/*==========================================================================
1. Tablet landscape
===========================================================================*/

@media (max-width: 1200px) {
	.container-12{width: 960px;}

	.container-12 .grid-1{width: 60px;}
	.container-12 .grid-2{width: 140px;}
	.container-12 .grid-3{width: 220px;}
	.container-12 .grid-4{width: 300px;}
	.container-12 .grid-5{width: 380px;}
	.container-12 .grid-6{width: 460px;}
	.container-12 .grid-7{width: 540px;}
	.container-12 .grid-8{width: 620px;}
	.container-12 .grid-9{width: 700px;}
	.container-12 .grid-10{width: 780px;}
	.container-12 .grid-11{width: 860px;}
	.container-12 .grid-12{width: 940px;}


	/* Prefix Styles
	===========================================================================*/

	.container-12 .prefix-1{padding-left: 80px;}
	.container-12 .prefix-2{padding-left: 160px;}
	.container-12 .prefix-3{padding-left: 240px;}
	.container-12 .prefix-4{padding-left: 320px;}
	.container-12 .prefix-5{padding-left: 400px;}
	.container-12 .prefix-6{padding-left: 480px;}
	.container-12 .prefix-7{padding-left: 560px;}
	.container-12 .prefix-8{padding-left: 640px;}
	.container-12 .prefix-9{padding-left: 720px;}
	.container-12 .prefix-10{padding-left: 800px;}
	.container-12 .prefix-11{padding-left: 880px;}


	/* Suffix Styles
	===========================================================================*/

	.container-12 .suffix-1{padding-right: 80px;}
	.container-12 .suffix-2{padding-right: 160px;}
	.container-12 .suffix-3{padding-right: 240px;}
	.container-12 .suffix-4{padding-right: 320px;}
	.container-12 .suffix-5{padding-right: 400px;}
	.container-12 .suffix-6{padding-right: 480px;}
	.container-12 .suffix-7{padding-right: 560px;}
	.container-12 .suffix-8{padding-right: 640px;}
	.container-12 .suffix-9{padding-right: 720px;}
	.container-12 .suffix-10{padding-right: 800px;}
	.container-12 .suffix-11{padding-right: 880px;}
}



/*==========================================================================
2. Tablet portrait
===========================================================================*/
/* Note: Design for a width of 768px */

@media (max-width: 995px) {
	.container-12{width: 768px;}

	.container-12 .grid-1{width: 44px;}
	.container-12 .grid-2{width: 108px;}
	.container-12 .grid-3{width: 172px;}
	.container-12 .grid-4{width: 236px;}
	.container-12 .grid-5{width: 300px;}
	.container-12 .grid-6{width: 364px;}
	.container-12 .grid-7{width: 428px;}
	.container-12 .grid-8{width: 492px;}
	.container-12 .grid-9{width: 556px;}
	.container-12 .grid-10{width: 620px;}
	.container-12 .grid-11{width: 684px;}
	.container-12 .grid-12{width: 748px;}


	/* Prefix Styles
	===========================================================================*/

	.container-12 .prefix-1{padding-left: 64px;}
	.container-12 .prefix-2{padding-left: 128px;}
	.container-12 .prefix-3{padding-left: 192px;}
	.container-12 .prefix-4{padding-left: 256px;}
	.container-12 .prefix-5{padding-left: 320px;}
	.container-12 .prefix-6{padding-left: 384px;}
	.container-12 .prefix-7{padding-left: 448px;}
	.container-12 .prefix-8{padding-left: 512px;}
	.container-12 .prefix-9{padding-left: 576px;}
	.container-12 .prefix-10{padding-left: 640px;}
	.container-12 .prefix-11{padding-left: 704px;}


	/* Suffix Styles
	===========================================================================*/

	.container-12 .suffix-1{padding-right: 64px;}
	.container-12 .suffix-2{padding-right: 128px;}
	.container-12 .suffix-3{padding-right: 192px;}
	.container-12 .suffix-4{padding-right: 256px;}
	.container-12 .suffix-5{padding-right: 320px;}
	.container-12 .suffix-6{padding-right: 384px;}
	.container-12 .suffix-7{padding-right: 448px;}
	.container-12 .suffix-8{padding-right: 512px;}
	.container-12 .suffix-9{padding-right: 576px;}
	.container-12 .suffix-10{padding-right: 640px;}
	.container-12 .suffix-11{padding-right: 704px;}
}



/*==========================================================================
1. Mobile
===========================================================================*/
/* Note: Design for a width of 480px */

@media (max-width: 767px) {
	.container-12{
		padding: 0 15px;
		width: auto;
	}

	.container-12 [class*="grid-"]{
		display: block;
		float: none;
		margin: 0 0 30px;
		width: auto;
	}

	.grid-12,
	.omega{
		margin-bottom: 0 !important;
	}


	/* Prefix and suffix styles
	===========================================================================*/

	.container-12 [class*="prefix-"]{padding-left: 0;}
	.container-12 [class*="suffix-"]{padding-right: 0;}
}