/*
	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_fixed { /*You can adjust the width here to fit your design. i.e: 980px, 1280px if you wnat a fixed container*/
	width:1024px;
	margin: 0 auto;
	display: table;
}

.container {
	width: 92%;
	margin-left: 4%;
	margin-right: 4%;
	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:link {color: #444;} a:hover{color: #f9f9f9;} 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: 800px) {



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

}

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

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
   /* Add your styles for devices with a maximum width of 1024 */
}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
  /* Add your styles for devices with a maximum width of 768 */
}