/*
	Variable Grid System.
	Learn more ~ http://www.spry-soft.com/grids/
	Based on 960 Grid System - http://960.gs/

	Licensed under GPL and MIT.
*/

/* Containers
----------------------------------------------------------------------------------------------------*/
.container_resp{ 
	position: relative; 
	width: 960px; 
	margin: 0 auto; 
	padding: 0; 
	z-index:2;
}

/* Grid >> Global
----------------------------------------------------------------------------------------------------*/
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11{ float: left; display: inline; margin-left:5px; margin-right:5px; }

.grid_10{float: left; display: inline; margin-left:5px; margin-right:25px; }

/* Base Grid */
.container_resp .grid_1 { width: 30px; }
.container_resp .grid_2 { width: 70px; }
.container_resp .grid_3 { width: 110px; }
.container_resp .grid_4 { width: 150px; }
.container_resp .grid_5 { width: 190px; }
.container_resp .grid_6 { width: 230px; }
.container_resp .grid_7 { width: 270px; }
.container_resp .grid_8 { width: 310px; }
.container_resp .grid_9 { width: 350px; }
.container_resp .grid_10 { width: 690px; }
.container_resp .grid_11 { width: 950px; }

#products-comparison .container_resp .grid_10 { width: 99%; }

/* >> Tablet 768px (Portrait)
----------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
.container_resp { width: 768px; }
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_11{ margin-left: 5px; margin-right: 5px; }
.grid_10{ margin-right:25px; }

.container_resp .grid_1 { width: 22px; }
.container_resp .grid_2 { width: 54px; }
.container_resp .grid_3 { width: 86px; }
.container_resp .grid_4 { width: 118px; }
.container_resp .grid_5 { width: 150px; }
.container_resp .grid_6 { width: 182px; }
.container_resp .grid_7 { width: 214px; }
.container_resp .grid_8 { width: 246px; }
.container_resp .grid_9 { width: 278px; }
.container_resp .grid_10 { width: 546px; }
.container_resp .grid_11 { width: 758px; }
}

/* >> Mobile 320px (Portrait)
----------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 767px) {
.container_resp { width: 300px; }
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11{ margin: 0; }

.container_resp .grid_1,
.container_resp .grid_2,
.container_resp .grid_3,
.container_resp .grid_4,
.container_resp .grid_5,
.container_resp .grid_6,
.container_resp .grid_7,
.container_resp .grid_8,
.container_resp .grid_9,
.container_resp .grid_10,
.container_resp .grid_11{ width: 300px; }
}

/* >> Mobile 480px (Landscape)
----------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 480px) and (max-width: 767px) {
.container_resp { width: 420px; }
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11{ margin: 0; }


.container_resp .grid_1,
.container_resp .grid_2,
.container_resp .grid_3,
.container_resp .grid_4,
.container_resp .grid_5,
.container_resp .grid_6,
.container_resp .grid_7,
.container_resp .grid_8,
.container_resp .grid_9,
.container_resp .grid_10,
.container_resp .grid_11{ width: 420px; }
}