@charset "UTF-8";
/* CSS Document */


/* layout */

p {margin: 0;}
h1, h2, h3, p { padding:0px; }
a:link, a:visited { color: #f9f9f6; text-decoration: none; }
img { max-width: 100%; vertical-align: middle; -ms-interpolation-mode: bicubic; }
html { overflow-x: hidden;  }
body {   }
#container { padding:15px; }


/* Index */

.col { width:33.3333%; float: left; }
#work { z-index: 1; margin:-140px 0px 0px 0px; }
#work_thumb { z-index: 10; }
.work_thumb img { width:100%; height:auto; }


.col_1 { width:40%; float: left; }
.col_2 { width:40%; float: left; }
.col_3 { width:0%; clear:both; }


/*  CSS Fade */

.fade {
	transition: opacity .7s ease-in-out;
	-moz-transition: opacity .7s ease-in-out;
	-webkit-transition: opacity .7s ease-in-out;
	-o-transition: opacity .7s ease-in-out;
	color: #3CC;
	
 	
   }

.fade:hover {
    opacity: 0.3;
	
	outline-offset: -15px; }


/* --- If <= 1400 = 3 colonnes */
@media only screen and (max-width: 1400px) {
.col, .col_1 { width:33.3333%;  }
.col_2 { width:66.6666%;  }
.old img { width:49.9%; }
}

/* --- If <= 1200 = 3 colonnes */
@media only screen and (max-width: 1200px) {
.col, .col_1, { width:40.0000%;  }
.col_2 { width:84.3333%; }

}

/* --- If <= 800 = 2 colonnes */
@media only screen and (max-width: 800px) {
#container { padding:10px; }
.col { width:50%; }
.col_1, .col_3 { width: 20%; }
.col_2 { width:74%; }

}

/* --- If <= 740 = iphone landscape */
@media only screen and (max-width: 740px) {

.col_1, .col_3 { width: 10%; }
.col_2 { width:90%; }
#left a { width: 100px; right: 110px; background-position: -20px; }
}

/* --- If <= 460 = iphone portrait */
@media only screen and (max-width: 460px) {
#container { padding:10px; }
.col { width:100%; }
.col_1, .col_3 { width: 60%; }
.col_2 { width:74%; }