/*
	960 Grid System ~ Core CSS.
	Learn more ~ http://960.gs/

	Licensed under GPL and MIT.

	COLORS
	verd: #97bf0d
	blau: #0c3183
	vermell: #d10c16
	verd gimp: #97c00e
*/

html {-webkit-text-size-adjust: none;}

/* =Containers
--------------------------------------------------------------------------------*/
	.container_16{position:absolute; z-index:-2; width:100%; background:#fff;overflow:hidden; margin-bottom:25px}
	
	.container_16 .grid_16{width: 98%;}
	.container_16 .grid_14{width: 85.5%;}
	.container_16 .grid_11 {width:98%;}
	.container_16 .grid_10 {width:98%;}
	.container_16 .grid_9 {width:98%;}
	.container_16 .grid_7 {width:98%;}
	.container_16 .grid_6 {width:98%;}
	.container_16 .grid_5 {width:98%;}
	.container_16 .grid_4 {width:98%;}
	.container_16 .grid_3 {width:98%;}
	.container_16 .grid_2 {width:98%;}

/* =Grid >> Global
--------------------------------------------------------------------------------*/

.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12,.grid_13,.grid_14,.grid_15,.grid_16, 
.grid_3_into_9, .grid_6_into_9, .grid_5_3{display: inline; float: left; margin-left: 1%; margin-right: 1%;}

/* =Clear Floated Elements
--------------------------------------------------------------------------------*/

/* http://sonspring.com/journal/clearing-floats */

html body * span.clear,
html body * div.clear,
html body * li.clear,
html body * dd.clear {background: none;border: 0;clear: both;display: block;float: none;font-size: 0;list-style: none;
	margin: 0;padding: 0;overflow: hidden;visibility: hidden;width: 0;height: 0;}

/* http://www.positioniseverything.net/easyclearing.html */
.clearfix:after{clear: both;content: '.';display: block;visibility: hidden;height: 0;}
.clearfix{display: inline-block;}
* html .clearfix{height: 1%;}
.clearfix{display: block;}

/* -------------------------------------------------------------------
PERSONNALISATION
------------------------------------------------------------------- */
@media screen and (min-width: 321px){
	.container_16 .grid_4  {width: 48%;}
}

@media screen and (min-width: 650px){
	.container_16 .grid_2  {width: 30%;}
	.container_16 .grid_3  {width: 30.666666667%;}
	.container_16 .grid_4  {width: 48%;}
	.container_16 .grid_5  {width: 36%;}
	.container_16 .grid_9  {width: 66%;}
	.container_16 .grid_11 {width: 60%;}

	#menu_bar  {display:none;}
	#phone_bar {display:none}
	#logo_bar {display:block; position:relative}
	#logo_bar .city,#logo_bar .phone{position:absolute; top:35%;font-size: 1.7em;color: #fff;font-weight: bold;}
	#logo_bar .phone{right:0;margin-right:2%;}
	#logo_bar .city{right:0;margin-right:30%}
	
	#logo_bar h1 {padding:0; margin:0}
	#nav_bar {display:none}
	#menu {display:block; background:#fff; position:relative; top:0; left:0}

	#navTop {display:block; background-color:#0c3183; overflow:hidden;text-align:center;padding-top:10px}
	#navTop a, #navTop a:visited {display:inline; /*float:left; text-align:center;*/ color:#fff; text-decoration: none; letter-spacing:1px; 
		line-height:27px; font-size:12px; font-weight:bold; padding:0 15px; margin-right:4px;}
	#navTop a:hover {color:#ccc}
	.boxprods h2, .boxprods h2 a  {height:35px;}
	.boxprods h2, .boxprods h2 a, .boxprods h3, .boxprods h3 a, .boxprods p {font-size:0.8rem;}
}

@media screen and (min-width: 960px){
	.container_16 .grid_4  {width: 23%;}
	.container_16 .grid_5  {width: 29.25%;}
	.container_16 .grid_11 {width: 66.75%;}
	#logo_bar .city,#logo_bar .phone{position:absolute; top:40%;font-size: 2.3em;color: #fff;font-weight: bold;}
}

@media screen and (min-width: 1100px){
	#logo_bar .city,#logo_bar .phone{position:absolute; top:43%;font-size: 2.5em;color: #fff;font-weight: bold;}
}

@media screen and (min-width: 1281px){
	.container_16{position:absolute; z-index:-2; width: 80%;margin-left: 10%;margin-right: 10%;background:#fff;
			overflow:hidden;  margin-bottom:25px}
	#logo_bar .city,#logo_bar .phone{position:absolute; top:40%;font-size: 2.2em;color: #fff;font-weight: bold;}
}