/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */

/* #Page Styles
================================================== */

/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
        @media only screen and (max-width: 959px) {
            .content-link-icon {margin: 0;}            
            #main-content > .grid_8.omega.align-right {text-align: center;}
        }

	/* Tablet Portrait size to standard 960 (devices and browsers) */
        @media only screen and (min-width: 768px) and (max-width: 959px) {
            .container_16 {width: 768px;}
            .container_16 .grid_4 {width: 182px !important;}
            .container_16 .grid_5 {width: 250px !important;}
            .container_16 .grid_6 {width: 278px !important;}            
            .container_16 .grid_8 {width: 374px !important;}           
            .container_16 .grid_10 {width: 470px !important;}           
            .container_16 .grid_12 {width: 566px !important;}         
            
            .grid_16 {width: 748px !important;}
            #logo {width: 200px; overflow: hidden;}
            #logo img {width: 100%; padding: 16px 0;}
            #menu ul.menu li {}
            .feature.grid_4, .footer-block.grid_4 {width: 48% !important; margin: 0 1% !important;}
            #main-content > div {width: 100% !important; margin: 0 !important}
            
            .client {width: 32%; margin-right: 1%;}
            .client:nth-child(3n) {margin-right: 0;}
        }

	/* All Mobile Sizes (devices and browser) */
        @media only screen and (max-width: 767px) {
            #top {height: 122px; overflow: hidden}
            #logo {width: 100%; overflow: hidden; text-align: center; margin: 0 !important;}
            #logo img {padding: 16px 0;}
            
            #spotlight {height: 257px;}
            #spotlight-img {padding: 60px 0; width: 100%; background-image: url("../images/spotlight-opacity.png");}
        }

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
        @media only screen and (min-width: 480px) and (max-width: 767px) {
            .container_16 {width: 480px;}
            .container_16 .grid_4 {width: 110px !important; overflow: hidden;}
            .container_16 .grid_5 {width: 150px !important;} 
            .container_16 .grid_6 {width: 170px !important;}            
            .container_16 .grid_8 {width: 230px !important;}           
            .container_16 .grid_10 {width: 290px !important;}           
            .container_16 .grid_12 {width: 350px !important;}   
            .container_16 .grid_16 {width: 460px !important;}
            
            #menu ul.menu li {}
            .feature.grid_4, .footer-block.grid_4 {width: 48% !important; margin: 0 1% !important;}
            #main-content > div {width: 90% !important; margin: 0 5% !important}
            
            .client, .client:nth-child(3n)  {width: 48%; margin-right: 4%;}
            .client:nth-child(2n) {margin-right: 0;}
            .post-info.grid_12 {width: 300px !important;}            
           .depoimento-thumb.grid_4 > img {width: 100%; height: auto}
        }

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
        @media only screen and (max-width: 479px) {
            .container_16 {width: 100%; margin: 0;}
            .container_16 .grid_4,
            .container_16 .grid_5,
            .container_16 .grid_6,      
            .container_16 .grid_8,      
            .container_16 .grid_10,      
            .container_16 .grid_12 {width: 90% !important; margin: 0 5% !important;}
            .hide-480 {display: none;}
            
            .grid_16 {width: 90% !important; margin: 0 5% !important;}
            
            feature.grid_4 {width: 98% !important; margin: 0 1% !important;}
            #main-content > div {width: 90% !important; margin: 0 5% !important}
            
            #logo img {}
            
            .client {width: 100%; margin-right: 1%;}
            .client:nth-child(3n) {margin-right: 0;}
            .content-link-icon {font-size: 13pt;}
            
            #absolute-footer > div > div {width: 90% !important; margin: 0 5% !important; text-align: center;}
            .go-top {float: none;}
           .depoimento-thumb.grid_4 {margin-bottom: 10px !important;}
           .post-text > img {width: 100%; height: auto;}
        }


        @media only screen and (max-width: 340px) {
            #logo img {width: 90%;}
            #spotlight-img > img {width: 100%;}
        }
/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/