* 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) {}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
		.navigation ul li a { padding: 30px 15px 29px; }
		.twelve .blog-post .post-right { width: 456px; }
		.twelve .blog-post .post-right.variant { width: 296px; }
		.sixteen .blog-post .post-right { width: 648px; }
		#contact-form .contact-form textarea { width: 546px; }
		input[type="text"], input[type="password"], input[type="email"], textarea, select { width: 162px; }
		
		h3.front-page { margin-bottom: 0; }
		.recent-posts p { margin: -3px 0 20px 0; }
		.price-box.items { display: none; }
		.price-box { width: 188px; }
		.client-list li img { width: 152px; }
		.our-team > img { width: 224px; }
		.our-team .social { top: 200px; }

	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
		.navigation ul { margin: 0; }
		.navigation ul li a { width:134px; margin:2px 1px 0; padding: 20px 0; }
		.navigation ul ul { top: 100%; margin: 0 0 0 1px; }
		.navigation ul ul li { float: none; clear: both; }
		.navigation ul ul li a { margin: 0; }
		.navigation ul ul ul { box-shadow: none; left: -1px; top: 100%; display: block !important; visibility: visible !important; position: relative; }
		.navigation ul ul ul a { text-indent: 15px; }
		.social { float: left; }
		.social a { margin: 15px 10px 0 0; }
		.twelve .blog-post .post-right { width: 320px; }
		.twelve .blog-post .post-right.variant { width: 420px; }
		.sixteen .blog-post .post-right { width: 320px; }
		#contact-form .contact-form textarea { width: 410px; }
		input[type="text"], input[type="password"], input[type="email"], textarea, select { width: 410px; }
		ul.children { margin-left: 0; }
		h3.front-page { margin-bottom: 0; }
		.recent-posts p { margin: -3px 0 20px 0; }
		.slide-caption { display: none; }
		.flex-direction-nav a { right: 10px; bottom: 10px; }
		.flex-direction-nav .flex-next { right: 46px; }
		.flexslider { margin: 0 0 30px; }
		.home-blog { margin: 0 0 54px; }
		.our-work { margin-bottom: 30px; }
		.flex-control-nav { display: none; }
		.price-box.items { display: none; }
		
		.price-box { width: 50%; }
		.b-white { margin-right: 20px; }
		#filters ul li a { margin-bottom: 10px; }
		.our-work.our-work-margin { margin-bottom: 30px; }
		.flexslider.work-slider { margin-bottom: 50px; }
		.client-list li img { width: 139px; }
		.client-list li { margin: 0 -1px -1px 0; }
		.our-team > img { width: 224px; }
		.page-content .img-float-right { margin-left: 0; }
		.page-content .img-float-left { margin-right: 0; }



	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
		.navigation ul { margin: 0; }
		.navigation ul li a { width:146px; margin: 2px 1px 0; padding: 20px 0; }
		.navigation ul ul { top: 100%; margin: 0 0 0 1px; }
		.navigation ul ul li { float: none; clear: both; }
		.navigation ul ul li a { margin: 0; }
		.navigation ul ul ul { box-shadow: none; left: -1px; top: 100%; display: block !important; visibility: visible !important; position: relative; }
		.navigation ul ul ul a { text-indent: 15px; }
		.social { float: left; }
		.social a { margin: 15px 10px 0 0; }
		.twelve .blog-post .post-right { width: 200px; }
		.twelve .blog-post .post-right.variant { width: 300px; }
		.sixteen .blog-post .post-right { width: 200px; }
		#contact-form .contact-form textarea { width: 290px; }
		input[type="text"], input[type="password"], input[type="email"], textarea, select { width: 290px; }
		ul.children, .comments li .comment h4.author { margin-left: 0; }
		h3.front-page { margin-bottom: 0; }
		.recent-posts p { margin: -3px 0 20px 0; }
		.slide-caption { display: none; }
		.flex-direction-nav a { right: 10px; bottom: 10px; }
		.flex-direction-nav .flex-next { right: 46px; }
		.flexslider { margin: 0 0 30px; }
		.home-blog { margin: 0 0 54px; }
		.our-work { margin-bottom: 30px; }
		.flex-control-nav { display: none; }
		.price-box.items { display: none; }
		
		.price-box { width: 100%; margin-bottom: 20px; }
		.alert-success, .alert-info, .alert-warning, .alert-error, .alert-notice { font-size: 10px; }
		ul.tabs-nav li a { width: 95px; }
		#filters ul li a { margin-bottom: 10px; }
		.our-work.our-work-margin { margin-bottom: 30px; }
		.flexslider.work-slider { margin-bottom: 50px; }
		.client-list li img { width: 149px; }
		.client-list li { margin: 0 -1px -1px 0; }
		.page-content .img-float-right { margin-left: 0; }
		.page-content .img-float-left { margin-right: 0; }



		.slogan {
		font-family: 'OpenSansLight';
		font-size: 18px !important;
		color: #3a3a3a;
		text-transform: uppercase;
		line-height: 58px;
		padding: 45px 0;
		}

		.switcher {
		    opacity: .99;
		    position: fixed;
		    z-index: 9999;
		    top: 99px;
		    width: 173px !important;
		    background: #fbfbfb;
		}


		/* pour la navigation nToogle bar*/
		.navigation { display: none;}
		
	}


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



/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
	.topnav {display: block; !important;}
  /*.topnav a:not(:first-child) {display: none;}*/
  .topnav a {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}