/*
	Responsive Boilerplate V.2.1
	Designed & Built by Fernando Monteiro, http://www.newaeonweb.com.br	
	Licensed under MIT license, http://opensource.org/licenses/mit-license.php

	1120px full
	1180px content

	colummn 80px
	gutter 20px

*/

/* #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; }


/* #Containers
================================================================================================= */
.container {
	width: 80%;
	margin-left: 10%;
	margin-right: 10%;
	display: inline-block;
	
}

/* #Colummns
================================================================================================= */
.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {
	float: left;
	position: relative;
	margin-left: 1%;
	margin-right: 1%;
}

/* #Grind 12 Colummns
================================================================================================= */
.col1 {width:6.333%;}
.col2 {width:14.667%;}
.col3 {width:23.0%;}
.col4 {width:31.333%;}
.col5 {width:39.667%;}
.col6 {width:48.0%;}
.col7 {width:56.333%;}
.col8 {width:64.667%;}
.col9 {width:73.0%;}
.col10 {width:81.333%;}
.col11 {width:89.667%;}
.col12 {width:98.0%;}

/* #Clear Margin left and right
================================================================================================= */
.first {margin-left: 0;}
.last {margin-right: 0;}

/* Media - Fluid Images - Video 
============================================================================================== */
figure {margin: 0}
img, object, embed, video {max-width: 100%;	_width: 100%} /* Fluid images */
img {border: 0;	-ms-interpolation-mode: bicubic} /* Improve IE's resizing of images */
svg:not(:root) {overflow: hidden} /* Correct IE9 overflow */
img {height: auto;}

/* Links (No outline borders) 
============================================================================================== */
a:focus, a:hover, a:active {outline: 0;}

/* Responsive Navigation Basic Style 
----------------------------------------------------------------------------------------------------*/
nav ul {list-style: none;}
nav li {display: inline-block;}
nav a {display: inline-block;}
nav select {display: none;}
    
/*You can adjust the width size when you want to resize the menu*/
@media (max-width: 480px) {
    nav ul {display: none;}
    nav select {display: inline-block;}
}

/* Clear 
----------------------------------------------------------------------------------------------------*/
.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}
/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */
.clearfix:after {
	clear: both;
	content: ' ';
	display: block;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
	height: 0;
}
.clearfix {display: inline-block;}
* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}
/* General small screen Mobile 
============================================================================================== */
@media handheld, only screen and (max-width: 767px) {

	body {
	font-size: 1.0em;
	-webkit-text-size-adjust: none;
	-ms-text-size-adjust: none;
	}
	
	.container {
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
	min-width: 0;
	padding-left: 0px;
	padding-right: 0px;
	}
	
	.col1, .col2,  .col3,  .col4,  .col5,  .col6,  .col7,  .col8, .col9, .col10, .col11, .col12 {
	width: auto;
	float: none;
	margin-left: 10px;
	margin-right: 10px;
	padding-left: 10px;
	padding-right: 10px;
	}

}

/* Custom sizes
============================================================================================== */
@media screen and (max-width: 480px) {
 /* Add your styles for devices with a maximum width of 480 */
}

@media screen and (max-width: 768px) {
 /* Add your styles for devices with a maximum width of 768 */
}

@media screen and (max-width: 320px) {
 /* Add your styles for devices with a maximum width of 320 */
}

@media screen and (max-width: 1024px) {
 /* Add your styles for devices with a maximum width of 1024 */
}