/*********************************************************************************************



Project : rwdgrid - responsive grid system for your next project

URI: http://rwdgrid.com/

Version: 1.0

Author: Vineeth G S 

Author URI: http://www.gsvineeth.com

Github URI: https://github.com/gsvineeth/rwdgrid/
**********************************************************************************************
1.  CSS Reset             
2.  Grid 1200px
3.  Grid 960px
4.  Grid 720px
5.  Grid lt 720px/ Mobile 
6.  Responsive Image
**********************************************************************************************/
/********************************************************************************************* 
1.  CSS Reset by Eric Meyer http://meyerweb.com/eric/tools/css/reset/

*********************************************************************************************/   
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/********************************************************************************************* 
2.  Grid 1200px
*********************************************************************************************/

.container-16, .container-12 {
        margin:0 auto;
        width: 1200px;
}
.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12, .grid-13, .grid-14, .grid-15, .grid-16 {
        display:inline;
        float: left;
        margin-left: 5px;
        margin-right: 5px;
}
.alpha {
        margin-left: 0;
}
.omega {
        margin-right: 0;
}
.beta {
        margin-left: 0;
        margin-right: 0;
}
.container-16 .grid-1 {
        width:55px;
}
.container-16 .grid-2 {
        width:130px;
}
.container-16 .grid-3 {
        width:205px;
}
.container-16 .grid-4 {
        width:280px;
}
.container-16 .grid-5 {
        width:355px;
}
.container-16 .grid-6 {
        width:430px;
}
.container-16 .grid-7 {
        width:505px;
}
.container-16 .grid-8 {
        width:580px;
}
.container-16 .grid-9 {
        width:655px;
}
.container-16 .grid-10 {
        width:730px;
}
.container-16 .grid-11 {
        width:805px;
}
.container-16 .grid-12 {
        width:880px;
}
.container-16 .grid-13 {
        width:955px;
}
.container-16 .grid-14 {
        width:1030px;
}
.container-16 .grid-15 {
        width:1105px;
}
.container-16 .grid-16 {
        width:1180px;
}
.container-12 .grid-1 {
        width:80px;
}
.container-12 .grid-2 {
        width:180px;
}
.container-12 .grid-3 {
        width:280px;
}
.container-12 .grid-4 {
        width:380px;
}
.container-12 .grid-5 {
        width:480px;
}
.container-12 .grid-6 {
        width:580px;
}
.container-12 .grid-7 {
        width:680px;
}
.container-12 .grid-8 {
        width:780px;
}
.container-12 .grid-9 {
        width:880px;
}
.container-12 .grid-10 {
        width:980px;
}
.container-12 .grid-11 {
        width:1080px;
}
.container-12 .grid-12 {
        width:1180px;
}
.grid-1 img, .grid-2 img, .grid-3 img, .grid-4 img, .grid-5 img, .grid-6 img, .grid-7 img, .grid-8 img, .grid-9 img, .grid-10 img, .grid-11 img, .grid-12 img, .grid-13 img, .grid-14 img, .grid-15 img, .grid-16  img { max-width:100%; }

.grid-1 iframe, .grid-2 iframe, .grid-3 iframe, .grid-4 iframe, .grid-5 iframe, .grid-6 iframe, .grid-7 iframe, .grid-8 iframe, .grid-9 iframe, .grid-10 iframe, .grid-11 iframe, .grid-12 iframe, .grid-13 iframe, .grid-14 iframe, .grid-15 iframe, .grid-16 iframe{ max-width:100%; }

/********************************************************************************************* 
3.  Grid 960px (mediaqueries)
*********************************************************************************************/
@media only screen and (min-width: 960px) and (max-width: 1199px) {
	
.container-16, .container-12 {

	margin-left:auto;margin-right:auto;

	width: 960px;

	border: 0px dotted #999;

}
 .grid-1, .grid-2, .grid-3,  .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12, .grid-13, .grid-14, .grid-15, .grid-16{

display:inline;float: left; margin-left: 3px;margin-right: 3px;position:relative;

}

 .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12{

margin-left: 5px;margin-right: 5px;position:relative;

}
.grid-1 img, .grid-2 img, .grid-3 img, .grid-4 img, .grid-5 img, .grid-6 img, .grid-7 img, .grid-8 img, .grid-9 img, .grid-10 img, .grid-11 img, .grid-12 img, .grid-13 img, .grid-14 img, .grid-15 img, .grid-16  img { max-width:100%; }



.grid-1 iframe, .grid-2 iframe, .grid-3 iframe, .grid-4 iframe, .grid-5 iframe, .grid-6 iframe, .grid-7 iframe, .grid-8 iframe, .grid-9 iframe, .grid-10 iframe, .grid-11 iframe, .grid-12 iframe, .grid-13 iframe, .grid-14 iframe, .grid-15 iframe, .grid-16 iframe{ max-width:100%; }

.container-16 .grid-1 {

	width:40px;
}

.container-16 .grid-2 {

	width:100px;
}

.container-16 .grid-3 {
	width:160px;
}
.container-16 .grid-4 {
	width:220px; border: 0px dotted #999;
}
.container-16 .grid-5 {
	width:280px;border: 0px dotted #999;
}
.container-16 .grid-6 {
	width:340px;
	border: 0px dotted #999;
}

.container-16 .grid-7 {
	width:400px;
}

.container-16 .grid-8 {
	width:460px;
}
.container-16 .grid-9 {
	width:520px;

}
.container-16 .grid-10 {
	width:620px; 1px dotted #999;
}
.container-16 .grid-11 {
	width:640px;
	border: 0px dotted #999;
}

.container-16 .grid-12 {

	width:700px; border: 1px dotted #999;
}
.container-16 .grid-13 {
	width:760px; 
}

.container-16 .grid-14 {

	width:820px;
}

.container-16 .grid-15 {
	width:880px;

}
.container-16 .grid-16 {
	width:940px; border: 0px dotted #999;
}
.container-12 .grid-1 {
	width:60px;
}

.container-12 .grid-2 {
	width:140px;
}
.container-12 .grid-3 {
	width:220px;

}
.container-12 .grid-3-5 {

	width:200px;
}

.container-12 .grid-4 {
	width:300px; border: 0px dotted #999;
}

.container-12 .grid-5 {

	width:380px;
}
.container-12 .grid-6 {

	width:460px;
}

.container-12 .grid-7 {

	width:540px;
}

.container-12 .grid-8 {
	width:620px; border: 0px dotted #999;
}
.container-12 .grid-9 {

	width:700px;
}
.container-12 .grid-10 {
	width:780px;
}

.container-12 .grid-11 {

	width:860px;

}
.container-12 .grid-12 {
	width:940px;
}

.js #nav { display: block; }

.js .selectnav { display: none; margin:5px 10px 5px 10px;padding:3px; color:#a5a5a5; font-family: "Open Sans", Arial, Helvetica, sans-serif; font-size:13px; font-weight:600; line-height:13px; text-decoration:none; text-transform:uppercase; width:90% !important; }

nav.alignright {display:block; float:none; text-align:center; }

}
/********************************************************************************************* 

4.  Grid 720px (mediaqueries)

*********************************************************************************************/

@media only screen and (min-width: 720px) and (max-width: 959px) {

.container-16, .container-12 {
	width: 720px;
}
.container-16 .grid-1 {
	width:25px;
}

.container-16 .grid-2 {
	width:70px;
}

.container-16 .grid-3 {
	width:115px;
}

.container-16 .grid-4 {
	width:160px;

}
.container-16 .grid-5 {
	width:205px;
}
.container-16 .grid-6 {
	width:250px;
}

.container-16 .grid-7 {
	width:295px;
}
.container-16 .grid-8 {
	width:340px;
}
.container-16 .grid-9 {
	width:385px;
}
.container-16 .grid-10 {
	width:430px;
}
.container-16 .grid-11 {
	width:475px;
}

.container-16 .grid-12 {
	width:520px;
}
.container-16 .grid-13 {
	width:565px;
}

.container-16 .grid-14 {
	width:610px;

}
.container-16 .grid-15 {
	width:655px;
}

.container-16 .grid-16 {
	width:700px;
}

.container-12 .grid-1 {
	width:40px;
}

.container-12 .grid-2 {
	width:100px;
}

.container-12 .grid-3 {
	width:160px;
}
.container-12 .grid-3-5 {
	width:180px;
}
.container-12 .grid-4 {
	width:220px;
}
.container-12 .grid-5 {
	width:280px;
}

.container-12 .grid-6 {
	width:340px;
}
.container-12 .grid-7 {
	width:400px;

}
.container-12 .grid-8 {
	width:460px;
}

.container-12 .grid-9 {

	width:520px;

}
.container-12 .grid-10 {
	width:580px;
}

.container-12 .grid-11 {
	width:640px;
}

.container-12 .grid-12 {

	width:700px;

}

/* .grid-9 textarea { width:90%; }

.grid-3 input[type="text"] { width:90%; }

**/

.js #nav { display: none;}

.js .selectnav { display: block; margin:5px 10px 5px 10px;padding:3px; color:#a5a5a5; font-family: "Open Sans", Arial, Helvetica, sans-serif; font-size:13px; font-weight:600; line-height:13px; text-decoration:none; text-transform:uppercase; width:90% !important; }

nav.alignright {display:block; float:none; text-align:center; }
		
}


/********************************************************************************************* 
5.  Grid lt 720px / Mobile (mediaqueries)

*********************************************************************************************/

	
@media only screen and (max-width: 719px) {

.container-12, .container-16 {

	width: 90%;

}

.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12, .grid-13, .grid-14, .grid-15, .grid-16 {

	width:100%;
	margin-left: 0px;
	margin-right: 0px;
}

.alpha {

	margin-left: 0;
}

.omega {

	margin-right: 0;
}

.beta {

	margin-left: 0;

	margin-right: 0;

}

.container-16 .grid-1, .container-16 .grid-2, .container-16 .grid-3, .container-16 .grid-4, .container-16 .grid-5, .container-16 .grid-6, .container-16 .grid-7, .container-16 .grid-8, .container-16 .grid-9, .container-16 .grid-10, .container-16 .grid-11, .container-16 .grid-12, .container-16 .grid-13, .container-16 .grid-14, .container-16 .grid-15, .container-16 .grid-16, .container-12 .grid-1, .container-12 .grid-2, .container-12 .grid-3, .container-12 .grid-4, .container-12 .grid-5, .container-12 .grid-6, .container-12 .grid-7, .container-12 .grid-8, .container-12 .grid-9, .container-12 .grid-10, .container-12 .grid-11, .container-12 .grid-12 {

	width:100%;

}

.js #nav { display: none;}

.js .selectnav { display: block; margin:5px 10px 5px 10px;padding:3px; color:#a5a5a5; font-family: "Open Sans", Arial, Helvetica, sans-serif; font-size:13px; font-weight:600; line-height:13px; text-decoration:none; text-transform:uppercase; width:90% !important; }

nav.alignright {display:block; float:none; text-align:center; }

}

/********************************************************************************************* 
6.  Responsive Image
*********************************************************************************************/

img.scale, img.responsive {

	max-width: 100%;

	height: auto;

}

