/**************************** Grid ****************************/
body {
width: 100%;
margin:0;
padding:0;
}
.container_12 { margin-left: auto;  margin-right: auto; }

/* ==== 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  {
display: inline;
float: left;
}

.offset_1, .offset_2, .offset_3, .offset_4, .offset_5, .offset_6, .offset_7, .offset_8, .offset_9, .offset_10, .offset_11, .offset_12 {
float:left;
}

/* === 1. Base Grid === */ 
.container_12 { width: 960px; }   
.container_12 .grid_1 { width: 60px; }
.container_12 .grid_2 { width: 140px; }
.container_12 .grid_3 { width: 220px; }
.container_12 .grid_4 { width: 300px; }
.container_12 .grid_5 { width: 380px; }
.container_12 .grid_6 { width: 460px; }
.container_12 .grid_7 { width: 540px; }
.container_12 .grid_8 { width: 620px; }
.container_12 .grid_9 { width: 700px; }
.container_12 .grid_10 { width: 780px; }
.container_12 .grid_11 { width: 860px; }
.container_12 .grid_12 { width: 940px; }
.container_12 .offset_1 { padding-left: 76px; }
.container_12 .offset_2 { padding-left: 156px; }
.container_12 .offset_3 { padding-left: 236px; }
.container_12 .offset_4 { padding-left: 316px; }
.container_12 .offset_5 { padding-left: 396px; }
.container_12 .offset_6 { padding-left: 476px; }
.container_12 .offset_7 { padding-left: 556px; }
.container_12 .offset_8 { padding-left: 636px; }
.container_12 .offset_9 { padding-left: 716px; }
.container_12 .offset_10 { padding-left: 796px; }
.container_12 .offset_11 { padding-left: 876px; }

@media only screen and (min-width: 768px) and (max-width: 10000px) {
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {
margin-left: 10px;
margin-right: 10px;
}

.grid_12 .grid_2, .grid_12 .grid_3, .grid_12 .grid_4, .grid_12 .grid_6, .grid_12 .grid_9 {
margin:0;
}
.jcarousel-skin-tango .jcarousel-container-horizontal {
width:900px;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
width:816px;
}
}


/* === Pour les grandes écrans === */
@media only screen and (min-width: 1400px) {
.container_12 { width: 1224px; }   
.container_12 .grid_1 { width: 82px; }
.container_12 .grid_2 { width: 184px; }
.container_12 .grid_3 { width: 286px; }
.container_12 .grid_4 { width: 388px; }
.container_12 .grid_5 { width: 490px; }
.container_12 .grid_6 { width: 592px; }
.container_12 .grid_7 { width: 694px; }
.container_12 .grid_8 { width: 796px; }
.container_12 .grid_9 { width: 898px; }
.container_12 .grid_10 { width: 1000px; }
.container_12 .grid_11 { width: 1102px; }
.container_12 .grid_12 { width: 1204px; }
.container_12 .offset_1 { padding-left: 98px; }
.container_12 .offset_2 { padding-left: 200px; }
.container_12 .offset_3 { padding-left: 302px; }
.container_12 .offset_4 { padding-left: 404px; }
.container_12 .offset_5 { padding-left: 506px; }
.container_12 .offset_6 { padding-left: 608px; }
.container_12 .offset_7 { padding-left: 710px; }
.container_12 .offset_8 { padding-left: 812px; }
.container_12 .offset_9 { padding-left: 914px; }
.container_12 .offset_10 { padding-left: 1016px; }
.container_12 .offset_11 { padding-left: 1118px; }

.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {
margin-left:10px;
margin-right:10px;
}

.jcarousel-skin-tango .jcarousel-container-horizontal {
width:1160px;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
width:1076px;
}
}


/* === 8. Tablet (Portrait For 768px width) === */
@media only screen and (min-width: 768px) and (max-width: 959px) {
.container_12 { width: 768px; }   
.container_12 .grid_1 { width: 44px; }
.container_12 .grid_2 { width: 108px; }
.container_12 .grid_3 { width: 172px; }
.container_12 .grid_4 { width: 236px; }
.container_12 .grid_5 { width: 300px; }
.container_12 .grid_6 { width: 364px; }
.container_12 .grid_7 { width: 428px; }
.container_12 .grid_8 { width: 492px; }
.container_12 .grid_9 { width: 556px; }
.container_12 .grid_10 { width: 620px; }
.container_12 .grid_11 { width: 684px; }
.container_12 .grid_12 { width: 748px; }
.container_12 .offset_1 { padding-left: 60px; }
.container_12 .offset_2 { padding-left: 124px; }
.container_12 .offset_3 { padding-left: 188px; }
.container_12 .offset_4 { padding-left: 252px; }
.container_12 .offset_5 { padding-left: 316px; }
.container_12 .offset_6 { padding-left: 380px; }
.container_12 .offset_7 { padding-left: 444px; }
.container_12 .offset_8 { padding-left: 508px; }
.container_12 .offset_9 { padding-left: 572px; }
.container_12 .offset_10 { padding-left: 636px; }
.container_12 .offset_11 { padding-left: 700px; }

.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {
margin-left:10px;
margin-right:10px;
}

.jcarousel-skin-tango .jcarousel-container-horizontal {
width:745px;
margin:0px 0px 0px 0px;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
width:661px;
}

.jcarousel-skin-tango .jcarousel-item {
margin-right:14px !important;
margin-left:14px !important;
}
}

/* === 9. Mobile (Portrait For 320px width) === */
@media only screen and (max-width: 767px) {
.container_12 .grid_1, .container_12 .grid_2, .container_12 .grid_3, .container_12 .grid_4, .container_12 .grid_5, .container_12 .grid_6, .container_12 .grid_7, .container_12 .grid_8, .container_12 .grid_9, .container_12 .grid_10, .container_12 .grid_11, .container_12 .grid_12 { 
width:280px;  
}
.container_12 { width: 300px; }
.container_12 .offset_1, .container_12 .offset_2, .container_12 .offset_3, .container_12 .offset_4, .container_12 .offset_5, .container_12 .offset_6, .container_12 .offset_7, .container_12 .offset_8, .container_12 .offset_9, .container_12 .offset_10, .container_12 .offset_11 {
padding-left: 0;
}

.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {
margin-left: 10px;
margin-right: 10px;
}

.jcarousel-skin-tango .jcarousel-container-horizontal {
width:240px;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
width:156px;
}

.jcarousel-skin-tango .jcarousel-item {
margin-right:3px !important;
margin-left:3px !important;
}
}

/* === 10. Mobile (Landscape For 480px width) === */ 
@media only screen and (min-width: 480px) and (max-width: 767px) {
.container_12 { width: 420px; }   
.container_12 .grid_1, .container_12 .grid_2, .container_12 .grid_3, .container_12 .grid_4, .container_12 .grid_5, .container_12 .grid_6, .container_12 .grid_7, .container_12 .grid_8, .container_12 .grid_9, .container_12 .grid_10, .container_12 .grid_11, .container_12 .grid_12 { 
width: 400px;  
}
.container_12 .offset_1, .container_12 .offset_2, .container_12 .offset_3, .container_12 .offset_4, .container_12 .offset_5, .container_12 .offset_6, .container_12 .offset_7, .container_12 .offset_8, .container_12 .offset_9, .container_12 .offset_10, .container_12 .offset_11 {
padding-left: 0;
}

.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {
margin-left: 10px;
margin-right: 10px;
}

.jcarousel-skin-tango .jcarousel-container-horizontal {
width:360px;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
width:276px;
}

.jcarousel-skin-tango .jcarousel-item {
margin-right:4px !important;
margin-left:4px !important;
}
}

@media only screen and (max-width: 480px) {

}

/* === 11. Clearing === */
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}

.clearfix:before, .clearfix:after, .container_12:before, .container_12:after {
content: '.';
display: block;
overflow: hidden;
visibility: hidden;
font-size: 0;
line-height: 0;
width: 0;
height: 0;
}

.clearfix:after, .container_12:after {
clear: both;
}

/* The following zoom:1 rule is specifically for IE6 + IE7. Move to separate stylesheet if invalid CSS is a problem. */
.clearfix, .container_12 {
zoom: 1;
}