/* RIGGING.CSS: the Responsive Interaction Grid */
/* Forces the html and body to fill 100% of the window; helpful when using backgrounds. Removes any extra margin from outer browser edge. */
html, body { height: 100%; margin: 0; }
/* Optional left and right padding can be added here to provide space for offests outside the vessel. (padding: 0 50px;)  */
/* This padding value can be adjusted for various screen sizes in the responsive rules at the end of this file. */
body { padding: 0; } 
/* Configure the grid container. */
.g-vessel {
	height: 100%; /* Force vessel to cover 100% of window; helpful when using backgrounds */
	max-width: 100%; /* Allows a maximum width to be set. This is helpful for very large monitors. Pixel value or 100% is recomended. Note, it is nesssary to change the responsive pixel values at the end of this file to corrispond to this number. */
	/*min-width: 960px;*/ /* Optional minimum width value. You can use this to prevent a breaking layout for very narrow windows. */
	/*min-width: 280px;  Optional minimum width value. You can use this to prevent a breaking layout for very narrow windows. */
	margin: 0 auto; /* Enables a centered layout, can remove the auto value for a layout that aligns to the left side of the window. */
	position: relative; /* Not required for Rigging to work but is usually desired to create a reference point for nested absolutly positioned elements. If you prefer, you can remove this.  */
}
.ie8 .g-vessel { min-width: 100%; } /* IE8 does not support media queries so a min width can be provided to prevent a crushed layout. */
.ie7 .g-vessel { max-width: 100%px; min-width: 100%; } /* IE7 performs poorly for resizing based on % which can cause erattic behaviors in the layout. Fixing the size eliminates the problem */
/* Clearfix. */
.g-sail:after { 
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.g-sail {
	position: relative; /* Not required for Rigging to work but is usually desired to create a reference point for nested absolutly positioned elements. If you prefer, you can remove this.  */
	/*display: inline-block !important;*/ /* Applies the float which is required to flow the layout */
	-moz-box-sizing: border-box; /* Required to apply the propper box model so padding does not break the layout. These styles are not inherited so there should be no effect on other elements. */
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	display: inline-block;
}
/* Only the percents used in your layouts are required. For very large scale sites with high traffic it could be worth removing non-used values. */
/* For most uses, leaving un-used values in place should have very little effect */
/* There can also be a very small performance loss by leaving extra values in place, for most uses, it should only be a few milliseconds so is probably not worth removing. */
.g-20 { width:20%; }
.g-24 { width:24%; }
.g-25 { width:25%; }
.g-33 { width:32% !important; }
.g-50 { width:50%; }
.g-67 { width:67%; }
.g-75 { width:75%; }
.g-100 { width:100%; }
.g-100_cap {
	width:100%;
	max-width: 1240px;
	margin: 0 auto;
	display: block;
	float: none;
	border-left: transparent solid 20px;
	border-right: transparent solid 20px;
}
/* If you don't need buffer, you can remove these. If you do use buffer but only need a few of these values you can remove the ones you don't need */
/* As noted above, removing un-used classes can provide a very small performance boost under some circumstances. */
/* Note, the sort order where 100 is at the end is required to prevent false matches between 10 and 100, It is also required to use 01 instead of 1 for the same reason.*/
.g-buffer10 { padding-left: 10px; }
/* If you don't need buffer, you can remove these. If you do use buffer but only need a few of these values you can remove the ones you don't need */
/* As noted above, removing un-used classes can provide a very small performance boost under some circumstances. */
/* Note, the sort order where 100 is at the end is required to prevent false matches between 10 and 100, It is also required to use 01 instead of 1 for the same reason.*/
.g-buffer-10 { padding-right: 10px; }
/* If you don't need offest, you can remove these. If you do use offset but only need a few of these values you can remove the ones you don't need */
/* As noted above, removing un-used classes can provide a very small performance boost under some circumstances. */
/* Note, the sort order where 100 is at the end is required to prevent false matches between 10 and 100, It is also required to use 01 instead of 1 for the same reason.*/
.g-offset-05 { margin: 0 5% 0 -5%; }
/* If you don't need offest, you can remove these. If you do use offset but only need a few of these values you can remove the ones you don't need */
/* As noted above, removing un-used classes can provide a very small performance boost under some circumstances. */
/* Note, the sort order where 100 is at the end is required to prevent false matches between 10 and 100, It is also required to use 01 instead of 1 for the same reason.*/
.g-offset05 { margin: 0 -5% 0 5%; }
/* Defines Media Query values. The first value should be smaller than the max-width value defined for the vessel. */
/* These values are based on popular screen sizes. */
@media screen and (max-width: 1366px) { 
	.g-flow1 > .g-sail { float: none; width: 100%; display: block; margin: 0; padding: 0; } body { padding: 0; } /* Changes flow based on flow value. Body padding can be changed at each size range. */
	.g-flow1 > .g-stow { display: none; } /* Removes element at specific screen size. */
}
	
@media screen and (max-width: 1024px) { 
	.g-flow2 > .g-sail { float: none; width: 100%; display: block; margin: 0; padding: 0; } body { padding: 0; } 
	.g-flow2 > .g-stow { display: none; }
}
@media screen and (max-width: 800px) { 
	.g-flow3 > .g-sail { float: none; width: 100%;  display: block; margin: 0; padding: 0; } body { padding: 0; } 
	.g-flow3 > .g-stow { display: none; }
}
@media screen and (max-width: 650px) { 
	.g-flow4 > .g-sail { float: none; width: 100%;  display: block; margin: 0; padding: 0; } body { padding: 0; }
	.g-flow4 > .g-stow { display: none; }
}
@media screen and (max-width: 479px) { 
	.g-sail {
        width: 100%; 
        float: none; 
        /*display: block;*/ 
        margin: 0; 

	} 
    body { 
        padding: 0; 
    }
}