/**** All ****/

*{margin:0; padding:0;}

.clearer{clear:both; margin-bottom:0;}
.wrap{ width:960px; margin:0 auto; }
a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer { cursor: pointer; }

body{ background:#efefef; width:100%; }

@font-face{ font-family : "mank"; src : url('../font/MankSans-Medium.ttf'); }
/*@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); /* IE9 Compat Modes 
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 
    url('webfont.woff') format('woff'), /* Modern Browsers
    url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS 
    url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS 
}*/

h2, h3, p, li{ font-family:'mank', Arial, sans-serif; color:#1d1829; }

/**** Header ****/

header{ padding-top:51px; }
header #logo{ float:left; height:157px; width:270px; margin:0; }
header #logo-resp{ display:none; }

/* Nav */

nav{ float:right; margin-top:60px; }
nav ul{float:right; }
nav ul .active{background:#2e2b40;-moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}
nav ul .active a{color:#fff;}
nav ul li{list-style-type:none; float:left; margin:0 2px; }
nav ul li a{ font-family:'mank', Arial, sans-serif; color:#2e2b40; text-decoration:none; padding:7px 10px; display:block; }
nav ul li:hover{ background:#2e2b40; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; }
nav ul li:hover a{ color:#fff;}

#menu-resp, #menu{ display:none; }

.mm-panels > .mm-panel{ padding:0 !important; }
.mm-panels > .mm-panel.mm-hasnavbar{ padding-top:20px !important; }

/* Bandeau */

#bandeau{ height:100%; width:100%; margin:50px 0; overflow:hidden; }
#bandeau img{ height:100%; width:100%; border-bottom:2px solid #2e2b40; border-top:2px solid #2e2b40; }

/**** Container ****/

#container{ margin-bottom:70px; }

/* Accueil */

#home article{ float:left; width:300px; margin-right:25px; }
#home article:last-child{ margin-right:0; }
#home article ul li{ width:300px; height:200px; margin-bottom:20px; overflow:hidden; }
#home article ul li img{ height:100%; width:100%; transition:.5s ease-in-out; transform:scale(1); }
#home article ul li img:hover{ transform:scale(1.1); }
#home #home-videos ul li img{ transition:0s; transform:scale(1); }
#home #home-videos ul li img:hover{ transform:scale(1); }


/* Creations */

#creations article{ margin:0 0 20px 0; }
#creations article ul li{ height:200px; width:300px; float:left; margin:0 20px 20px 0; overflow:hidden; }
#creations article ul li:last-child, #creations article ul li:nth-child(3n+3){ margin-right:0; }
#creations article ul li img{ height:100%; width:100%; transition:.5s ease-in-out; transform:scale(1); }
#creations article ul li img:hover{ transform:scale(1.1); }


/* Videos */

#videos ul li{ width:300px; height:200px; float:left; margin:0 20px 60px 0; }
#videos ul li:last-child, #videos ul li:nth-child(3n+3){ margin-right:0; }


/* Photos */

#photos{ margin:0 0 20px 0; }
#photos ul li{ height:200px; width:300px; float:left; margin:0 20px 20px 0; overflow:hidden; }
#photos ul li:last-child, #photos ul li:nth-child(3n+3){ margin-right:0; }
#photos ul li img{ height:100%; width:100%; transition:.5s ease-in-out; transform:scale(1); }
#photos ul li img:hover{ transform:scale(1.1); }


/* A propos */

#about .list-icon{ margin-bottom:10px; }
#about .list-about{ margin-bottom:30px; }
#about .list-about li{ list-style-type:none; margin-bottom:10px; }
#about .list-about li p{ margin-bottom:5px; }
#about .list-about li .sub-list-about{ margin-bottom:20px; }
#about .list-about li .sub-list-about li:before{ content:"> "; }
#about .list-about li .sub-list-about li{ margin-left:10px; }
#about .list-about li .sub-list-about li:first-child{ padding-top:5px; }
#about span{ color:#2e2b40; font-weight:bolder; }
#about a, #about a:active{ font-style:italic; text-decoration:none; color:#339b47; }
#about a:hover{ text-decoration:underline; }
#about #left{float:left; width:480px; padding-right:10px;}
#about #right{float:right; width:370px; }
#about .list-about .icon-about{ text-indent:-9999px; height:40px; width:55px; float:left; margin:0 15px 10px 0; }
#about .list-about .icon-about:last-child{ margin-right:0; }
#about .list-about #ps{ background:url('../img/sprite.png') no-repeat -5px -295px; }
#about .list-about #ai{ background:url('../img/sprite.png') no-repeat -93px -295px; }
#about .list-about #id{ background:url('../img/sprite.png') no-repeat -177px -295px; }
#about .list-about #fl{ background:url('../img/sprite.png') no-repeat -260px -295px; }
#about .list-about #pr{ background:url('../img/sprite.png') no-repeat -346px -295px; }
#about .list-about #ae{ background:url('../img/sprite.png') no-repeat -429px -295px; }
#about .list-about #max{ background:url('../img/sprite.png') no-repeat -516px -295px; }
#about .list-about #html{ background:url('../img/sprite.png') no-repeat -602px -295px; }
#about .list-about #css{ background:url('../img/sprite.png') no-repeat -688px -295px; }

#about .list-about #graph{ background:url('../img/sprite.png') no-repeat -5px -198px; }
#about .list-about #cine{ background:url('../img/sprite.png') no-repeat -91px -198px; }
#about .list-about #music{ background:url('../img/sprite.png') no-repeat -177px -198px; }
#about .list-about #photo{ background:url('../img/sprite.png') no-repeat -258px -198px; }
#about .list-about #sport{ background:url('../img/sprite.png') no-repeat -344px -198px; }
#about .list-about #jeux{ background:url('../img/sprite.png') no-repeat -431px -198px; }
#about .list-about #sortie{ background:url('../img/sprite.png') no-repeat -516px -198px; }

#about #box-cv #cv{ background:url('../img/sprite.png') no-repeat -5px -386px; margin:0; }


/* Contact */

#contact #formulaire{ margin:20px auto; }

#contact label, #contact input, #contact textarea, #contact #sendConfirmation, #contact button{ font-family:'mank', Arial, sans-serif; }

#contact fieldset{ border:0; }
#contact fieldset ol{list-style-type:none;}
#contact fieldset ol li input{ width:96%; height:30px; padding:7px 20px; }
#contact fieldset ol li textarea{ width:96%; height:200px; padding:15px 20px; }

fieldset ol li{ border-radius:10px; margin-bottom:5px; padding:5px; }

fieldset ol li>label{width:55px; float:left; padding-right:20px; text-align:right; margin-top:8px;}

#contact #formulaire button{ background:url('../img/sprite.png') no-repeat -83px -381px #2e2b40; float:right; display:block; padding:15px 15px 15px 40px ; width:150px; border:none; color:#fff; font-size:16px; }
#contact #formulaire button:hover{ background-color:#514c71; }

#contact #sendConfirmation{ margin:0 0 0 10px; }

/**** Footer ****/
	
footer { position:relative; bottom: 0; width: 100%; background: #2e2b40; padding:40px 0 30px; }
footer hr{ border:0; height:0; border-top:1px solid rgba(0, 0, 0, 0.1); border-bottom:1px solid #2a2548; margin:30px 0; } 
	
footer ul li{ font-family:'mank', Arial, sans-serif; color:#9f9f9f; list-style-type:none; float:left; }
footer ul li a{ text-decoration:none; color:#9f9f9f; }
footer ul li a:hover{ text-decoration:underline; }

footer #rs{ height:42px; width:840px; margin:0 auto; }
footer #rs ul li{ margin-right:150px; }
footer #rs ul li:last-child{ margin-right:0; }
footer #rs ul li a{ background: url(../img/sprite.png) no-repeat; text-indent:-9999px; height:42px; width:42px; display:block; }
footer #rs ul li a:hover{ ; }
footer #rs ul li #fb{ background: url(../img/sprite.png) no-repeat 0 0; }
footer #rs ul li #fb:hover{ background: url(../img/sprite.png) no-repeat 0 -93px; }
footer #rs ul li #link{ background: url(../img/sprite.png) no-repeat -128px 0; }
footer #rs ul li #link:hover{ background: url(../img/sprite.png) no-repeat -128px -93px; }
footer #rs ul li #vimeo{ background: url(../img/sprite.png) no-repeat -266px 0; width:50px; }
footer #rs ul li #vimeo:hover{ background: url(../img/sprite.png) no-repeat -266px -94px; }
footer #rs ul li #insta{ background: url(../img/sprite.png) no-repeat -412px 0; }
footer #rs ul li #insta:hover{ background: url(../img/sprite.png) no-repeat -412px -93px; }
footer #rs ul li #be{ background: url(../img/sprite.png) no-repeat -557px 0; width:63px; }
footer #rs ul li #be:hover{ background: url(../img/sprite.png) no-repeat -557px -93px; }
footer #rs ul li #cinq{ background: url(../img/sprite.png) no-repeat -717px 0; }
footer #rs ul li #cinq:hover{ background: url(../img/sprite.png) no-repeat -717px -93px; }

footer #copyright{ width:960px; margin:0 auto; }
footer #copyright p{ color:#9f9f9f; text-align:center; }

footer #logo-footer{ float:left; }
footer #logo-footer img{ width:190px; height:110px; }

footer #liens{ float:right; margin:45px 0 0 0; }
footer #liens ul li{ margin:0 5px; }

	
/* IE 6 */
* html footer { position: relative; top: expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px'); }

/**** Media Queries ****/

/* 1024 px ----------- */
@media only screen and (max-width : 1024px) {

.wrap{ width:96%; margin:0 auto; padding:0 2%; }
img{ height:96%; width:auto; }
h2{ font-size:1.9em; }

header{ padding-top:3%; }
header #logo{ height:100%; width:30%; }
header #logo img{ width:90%; height:90%; }

nav{ margin-top:6%; }

#bandeau{ margin:3% 0; }

#home article{ width:32%; margin-right:2%; }
#home article ul li{ width:100%; height:auto; margin-bottom:5%; }
#home article ul li img, #home article ul li img:hover, #creations article ul li img, #creations article ul li img:hover, #photos ul li img, #photos ul li img:hover{ transform:scale(1); }

#creations article, #videos ul, #photos ul{ width:100%; margin-bottom:1%; }
#creations article ul li, #videos ul li, #photos ul li{ width:31%; height:auto; margin-bottom:2%; margin-right:3%; }

#videos ul li img{ width:100%; height:100%; }

#about #left{ width:55%; padding-right:2%; }
#about #right{ width:38%; }

#contact #formulaire{ padding-right:10px; }
#contact fieldset ol li input{ width:95%; height:20%; padding:2% 3%; }
#contact fieldset ol li textarea{ width:95%; padding:2% 3%; font-size:.9em; }
#contact #formulaire button{ font-size:1em; }

footer #rs{ width:88%; }
footer #rs ul li{ margin-right:15%; }
footer #rs ul li:first-child{ margin-left:2%; }

footer #copyright{ width:100%; }
footer #copyright p{ font-size:1em; }

}

/* 768 px ----------- */
@media only screen and (max-width : 768px) {

h2{ font-size:1.5em; }

header{ padding:3%; }

nav{ display:none; }
#menu-resp, #menu{ display:block; float:right; margin-top:6%; background:#efefef;}
#menu-resp a{ background:url('../img/sprite.png') no-repeat -702px -392px; display:block; text-indent:-9999px; height:24px; width:24px; }
#menu.nav-resp ul li.clearer{ border-top:1px solid #d1d1d1; margin-top:15px; margin-bottom:15px; }
#menu.nav-resp ul li.menu-rs a{ height:22px; width:10px; display:block; margin-left:16px; margin-right:16px; float:left; }
#menu.nav-resp ul li.menu-rs:last-child a{ margin-right:0; }
#menu.nav-resp ul li.menu-rs #fb{ background: url(../img/sprite.png) no-repeat 0 -534px; }
/*#menu.nav-resp ul li.menu-rs:hover #fb{ background: url(../img/sprite.png) no-repeat 0 -465px; }*/
#menu.nav-resp ul li.menu-rs #link{ background: url(../img/sprite.png) no-repeat -124px -534px; }
/*#menu.nav-resp ul li.menu-rs:hover #link{ background: url(../img/sprite.png) no-repeat -124px -465px; }*/
#menu.nav-resp ul li.menu-rs #vimeo{ background: url(../img/sprite.png) no-repeat -251px -534px; }
/*#menu.nav-resp ul li.menu-rs:hover #vimeo{ background: url(../img/sprite.png) no-repeat -251px -465px; }*/
#menu.nav-resp ul li.menu-rs #insta{ background: url(../img/sprite.png) no-repeat -387px -534px; }
/*#menu.nav-resp ul li.menu-rs:hover #insta{ background: url(../img/sprite.png) no-repeat -387px -465px; }*/
#menu.nav-resp ul li.menu-rs #be{ background: url(../img/sprite.png) no-repeat -523px -534px; }
/*#menu.nav-resp ul li.menu-rs:hover #be{ background: url(../img/sprite.png) no-repeat -523px -465px; }*/
#menu.nav-resp ul li.menu-rs #cinq{ background: url(../img/sprite.png) no-repeat -674px -534px; }
/*#menu.nav-resp ul li.menu-rs:hover #cinq{ background: url(../img/sprite.png) no-repeat -674px -465px; }*/

.nav-resp ul{ float:left; width:100%; margin:-20px 0 !important; }
.nav-resp ul .active{ -moz-border-radius:0; -webkit-border-radius:0; border-radius:0; }
.nav-resp ul li{ float:none; }
.nav-resp ul li:hover{ -moz-border-radius:0; -webkit-border-radius:0; border-radius:0; }

#bandeau{ display:none; }

#contact #sendConfirmation{ width:100%; }

footer{display:none;}

}
 
/* 480 px ----------- */
@media only screen and (max-width : 480px) {

h2, h3{ font-size:1.4em; }

header #logo{ display:none; }
header #logo-resp{ float:left; display:block; height:100%; width:30%; }
header #logo-resp img{ width:90%; height:90%; }

#home article{ float:none; width:100%; margin-right:2%; clear:both; }
#home article ul li{ width:48%; float:left; margin-right:3%; margin-bottom:3%; }
#home article ul li:nth-child(2n+2), #creations article ul li:last-child, #creations article ul li:nth-child(2n+2), #videos ul li:last-child, #videos ul li:nth-child(2n+2), #photos ul li:last-child, #photos ul li:nth-child(2n+2){ margin-right:0; }

#creations article ul li, #videos ul li, #photos ul li{ width:46%; margin-right:5%; }
#creations article ul li:nth-child(3n+3), #videos ul li:nth-child(3n+3), #photos ul li:nth-child(3n+3){ margin-right:5%; }
#creations article ul li:nth-child(even), #videos ul li:nth-child(even), #photos ul li:nth-child(even){ margin-right:0; }

#about article{ float:none; }
#about #left{ width:100%; padding-right:0; }
#about #right{ width:100%; }

#contact #sendConfirmation{ font-size:.9em; width:89%; }

footer #rs{ width:230px; }
footer #rs ul li{ margin-right:47px; }

}
 
/* 320px ----------- */
@media only screen and (max-width : 320px) {

h2, h3{ font-size:1.2em; }

#home article ul li{ width:95%; margin-right:0; margin-bottom:5%; }

#creations article ul li, #videos ul li, #photos ul li{ width:95%; margin-bottom:5%; }
#creations article ul li, #creations article ul li:last-child, #creations article ul li:nth-child(2n+2), #creations article ul li:nth-child(3n+3), #videos ul li, #videos article ul li:last-child, #videos ul li:nth-child(2n+2), #videos ul li:nth-child(3n+3), #photos ul li, #photos article ul li:last-child, #photos ul li:nth-child(2n+2), #photos ul li:nth-child(3n+3){ margin-right:0; }

#contact #sendConfirmation{ font-size:.8em; width:90%; }

footer #copyright p{ font-size:.8em; }

}

/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {
  /* Styles */
}