/* Polices */
@font-face { font-family: 'arial_narrowregular'; src: url('fonts/arial_narrow-webfont.eot'); src: url('fonts/arial_narrow-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/arial_narrow-webfont.woff') format('woff'), url('fonts/arial_narrow-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; }
@font-face { font-family:'BebasNeueRegular'; src:url('fonts/BebasNeue-webfont.eot'); src:url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/BebasNeue-webfont.woff') format('woff'), url('fonts/BebasNeue-webfont.ttf') format('truetype'); font-weight:normal; font-style:normal; }
@font-face { font-family: 'antoniolight'; src: url('fonts/antonio-light-webfont.eot'); src: url('fonts/antonio-light-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/antonio-light-webfont.woff') format('woff'), url('fonts/antonio-light-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'im_fell_english_proregular'; src: url('fonts/FeENrm28C-webfont.eot'); src: url('fonts/FeENrm28C-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/FeENrm28C-webfont.woff2') format('woff2'), url('fonts/FeENrm28C-webfont.woff') format('woff'), url('fonts/FeENrm28C-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'function_regular'; src: url('fonts/function_regular-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; }

html, body{ min-height:100%; }

*:focus, *active{ outline:0; }

/* Page de preload */
#preload{ display:block; background:#000 url('chargement.jpg') no-repeat scroll center center; -moz-background-size:cover; -webkit-background-size:cover; -o-background-size:cover; -ms-background-size:cover; background-size:cover; width:100%; height:100%; position:fixed; top:0; left:0; z-index:1500; font-family:'arial_narrowregular',arial,sans-serif; }
#pourcent{ display:block; color:#fff; font-size:0; text-align:center; margin:auto; font-family:'arial_narrowregular',arial,sans-serif; }
#load_ext_bar{ width:400px; height:1px; border:1px solid #aaa; border-width:1px 0; padding:1px; background:transparent; margin:0 auto; }
#load_bar{ width:0; height:1px; margin:0 auto; background:#fff; }

/* Site */

a{ color:#a00; -moz-transition:all ease 0.3s; -webkit-transition:all ease 0.3s; -o-transition:all ease 0.3s; -ms-transition:all ease 0.3s; transition:all ease 0.3s; }
a:hover{ color:#fff; text-decoration:none; }

#header_menu{ display:table; width:300px; position:absolute; top:0; left:50px; bottom:0; height:100%; z-index:10; }

#menu{ display:table-cell; vertical-align:middle; }

#menu a{ display:block; text-decoration:none; text-align:center; text-transform:uppercase; font-family:'BebasNeueRegular','ubuntu_condensedregular','arial_narrowregular',arial,sans-serif; margin:0 auto 2px auto; color:#fff; -moz-transition:all ease 0.3s; -webkit-transition:all ease 0.3s; -o-transition:all ease 0.3s; -ms-transition:all ease 0.3s; transition:all ease 0.3s; }

#menu .white{ color:#cbcbcb; }
#menu .grey{ color:#fff; }
#menu a:hover{ color:#fff; }
#menu .white:hover{ color:#fff; }
#menu .grey:hover{ color:#333; }

#menu .cercle{ display:block; position:relative; background:url('bg_menu.png'); width:300px; height:300px; -moz-border-radius:150px; -webkit-border-radius:150px; -o-border-radius:150px; -ms-border-radius:150px; border-radius:150px; }
#menu .cercle .inter_circle{ display:table; width:300px; height:300px; }
#menu .cercle .inner_circle{ display:table-cell; vertical-align:middle; }

#menu #accueil_link{ font-size:55px; height:40px; line-height:44px; letter-spacing:1px; }
#menu #services_link{ font-size:50px; height:35px; line-height:39px; }
#menu #portfolio_link{ font-size:45px; height:35px; line-height:39px; }
#menu #contact_link{ font-size:55px; height:40px; line-height:42px; letter-spacing:-1px; }
#menu #alice_link{ font-size:54px; height:38px; line-height:40px; letter-spacing:3px; }
#menu #mentions-legales_link{ font-size:24px; height:18px; line-height:20px; }
#menu #blog_link{ font-size:25px; height:20px; line-height:45px; }
#menu #blog_link:before{ content:"- "; }
#menu #blog_link:after{ content:" -"; }

#menu .lv1{ position:relative; }
#menu .lv1 .lv2{ display:block; position:absolute; background:url('bg_menu.png'); top:-11px; left:225px; z-index:2; width:0; padding:10px 0; overflow:hidden; -moz-border-radius:0 30px 30px 0; -webkit-border-radius:0 30px 30px 0; -o-border-radius:0 30px 30px 0; -ms-border-radius:0 30px 30px 0; border-radius:0 30px 30px 0; -moz-transition:all ease 0.3s; -webkit-transition:all ease 0.3s; -o-transition:all ease 0.3s; -ms-transition:all ease 0.3s; transition:all ease 0.3s; }
#menu .lv1:hover .lv2{ width:215px; }
#menu .lv1 .lv2 a{ text-align:left; font-size:30px; position:relative; padding:0 0 0 18px; margin:0; vertical-align:0; white-space:nowrap; }
#menu .lv1 .lv2 a:before{ content:"\25B8"; display:block; position:absolute; top:0; left:0; line-height:33px; -moz-opacity:0; -webkit-opacity:0; -o-opacity:0; -ms-opacity:0; opacity:0; -moz-transition:all ease 0.3s; -webkit-transition:all ease 0.3s; -o-transition:all ease 0.3s; -ms-transition:all ease 0.3s; transition:all ease 0.3s; }
#menu .lv1 .lv2 a:hover:before{ -moz-opacity:1; -webkit-opacity:1; -o-opacity:1; -ms-opacity:1; opacity:1; }

#credits{ display:block; font-family:'arial_narrowregular',arial,sans-serif; color:#cbcbcb; background:url('bg_cadres2.png'); padding:5px 0; margin:0; width:200px; text-align:center; position:absolute; bottom:15px; left:50px; z-index:2; -moz-border-radius:5px; -webkit-border-radius:5px; -o-border-radius:5px; -ms-border-radius:5px; border-radius:5px; -moz-text-shadow:0 0 6px #000; -webkit-text-shadow:0 0 6px #000; -o-text-shadow:0 0 6px #000; -ms-text-shadow:0 0 6px #000; text-shadow:0 0 6px #000; }
#credits a{ color:#cbcbcb; font-size:14px; font-weight:bold; text-decoration:none; -moz-transition:all ease 0.3s; -webkit-transition:all ease 0.3s; -o-transition:all ease 0.3s; -ms-transition:all ease 0.3s; transition:all ease 0.3s; }
#credits a:hover{ color:#fff; }

#ambiance{ display:block; border-collapse:collapse; border:1px solid #555; overflow:hidden; width:70px; height:20px; margin:0 auto; }

#tvfx{ display:block; position:absolute; top:0; left:0; z-index:-1; width:100%; height:100%; background:url('tvfx.png'); }

/* Accueil */

#accueil .contenu h1{ position:absolute; margin:0; top:0; right:50px; text-transform:uppercase; font-family:'BebasNeueRegular','arial_narrowregular',arial,sans-serif; font-weight:normal; color:#fff; font-size:100px; top:-150px; }
#accueil .contenu h1:before{ content:''; display:inline-block; position:relative; margin-right:10px; height:1em; width:1em; background:transparent url('titlemug.png') no-repeat right bottom; -moz-background-size:contain; -webkit-background-size:contain; -o-background-size:contain; -ms-background-size:contain; background-size:contain; }

.page .contenu h1, .page .contenu h2{ margin:0; font-family:'BebasNeueRegular','arial_narrowregular',arial,sans-serif; font-weight:normal; }
.page .contenu{ display:block; position:absolute; padding:30px 50px 50px 50px; top:50px; left:400px; right:50px; background:url('bg_cadres2.png'); color:#fff; font-family:'function_regular','arial_narrowregular',arial,sans-serif; font-size:20px; text-align:justify; }
.page .contenu:after{ content:''; display:block; height:136px; width:75px; position:absolute; background:transparent url('small_mug.png') no-repeat right top; bottom:-60px; right:10px; }

/*#accueil .contenu:after{ display:none; }
#accueil .contenu{ display:inline; position:static; padding:0; margin:0; background:none; -moz-text-shadow:none; -webkit-text-shadow:none; -o-text-shadow:none; -ms-text-shadow:none; text-shadow:none; }*/
#accueil .contenu h1 small{ font-family:'arial_narrowregular',arial,sans-serif; text-transform:lowercase; vertical-align:50px; font-size:0.5em; }
#accueil .contenu h1 small:before{ content:"<"; }
#accueil .contenu h1 small:after{ content:">"; }

#accueil .contenu{ top:150px; }

/* Services */

#services .contenu{ width:850px; margin:auto; background:#fdfdfd url('bg_services.jpg') center bottom; color:#000; -moz-text-shadow:none; -webkit-text-shadow:none; -o-text-shadow:none; -ms-text-shadow:none; text-shadow:none; border:3px dashed #222; -moz-box-shadow:15px 15px 30px #000; -webkit-box-shadow:15px 15px 30px #000; -o-box-shadow:15px 15px 30px #000; -ms-box-shadow:15px 15px 30px #000; box-shadow:15px 15px 30px #000; }
#services .contenu a:hover{ color:#000; }
#services .contenu h1{ border-bottom:4px double #000; }
#services .contenu hr{ display:block; height:0; background:none; border:4px double #000; border-width:4px 0 0 0; margin:30px 0; }
#services .contenu .servs{ display:table; width:100%; }
#services .contenu .servs br{ display:none; }
#services .contenu .servs hr{ display:table-row; width:0; height:0; padding:0; border:0; margin:0; }
#services .contenu .servs small{ display:table-cell; width:50%; padding:0 5px 5px 5px; text-align:left; }
#services .contenu .servs small:before{ content:"\25A0"; margin-right:5px; color:#900; vertical-align:2px; }
#services .contenu .ciseaux{ display:block; border:0; width:100px; height:auto; position:absolute; bottom:150px; right:-3px; }

/* Portfolio Menu */

#portfolio .contenu{ background:none; }
#portfolio .contenu p{ display:block; }
#portfolio .contenu a{ display:inline-block; position:relative; width:200px; height:200px; background:#a00 url('icon-portfolio-web.png') no-repeat center center; border:1px solid #a00; color:#fff; text-decoration:none; text-align:center; font-family:'antoniolight','arial_narrowregular',arial,sans-serif; text-transform:uppercase; margin:0 20px 0 0; font-size:26px !important; overflow:hidden; -moz-text-shadow:1px 1px 5px #000; -webkit-text-shadow:1px 1px 5px #000; -o-text-shadow:1px 1px 5px #000; -ms-text-shadow:1px 1px 5px #000; text-shadow:1px 1px 5px #000; -moz-box-shadow:0 0 15px #000; -webkit-box-shadow:0 0 15px #000; -o-box-shadow:0 0 15px #000; -ms-box-shadow:0 0 15px #000; box-shadow:0 0 15px #000; -moz-transition:all ease 0.5s; -webkit-transition:all ease 0.5s; -o-transition:all ease 0.5s; -ms-transition:all ease 0.5s; transition:all ease 0.5s; }
#portfolio .contenu a:nth-of-type(2){ background:#0a0 url('icon-portfolio-print.png') no-repeat center center; border:1px solid #0a0; }
#portfolio .contenu a:nth-of-type(3){ background:#00a url('icon-portfolio-applications.png') no-repeat center center; border:1px solid #00a; margin:0; }
#portfolio .contenu a:hover{ border:1px solid #fff; -moz-box-shadow:0 0 15px #fff; -webkit-box-shadow:0 0 15px #fff; -o-box-shadow:0 0 15px #fff; -ms-box-shadow:0 0 15px #fff; box-shadow:0 0 15px #fff; }
#portfolio .contenu a strong{ font-weight:normal; font-style:normal; display:block; position:absolute; width:200px; height:200px; line-height:200px; top:0; left:0; -moz-transition:all ease 0.5s; -webkit-transition:all ease 0.5s; -o-transition:all ease 0.5s; -ms-transition:all ease 0.5s; transition:all ease 0.5s; }
#portfolio .contenu a em{ font-weight:normal; font-style:normal; display:block; position:absolute; width:140px; height:140px; border:1px solid #fff; padding:10px; top:219px; left:19px; font-size:18px !important; text-transform:none; font-family:'arial_narrowregular',arial,sans-serif; -moz-transition:all ease 0.5s; -webkit-transition:all ease 0.5s; -o-transition:all ease 0.5s; -ms-transition:all ease 0.5s; transition:all ease 0.5s; }
#portfolio .contenu a strong{ top:0; left:0; }
#portfolio .contenu a em{ top:219px; left:19px; }
#portfolio .contenu a:hover strong{ top:-200px; left:0; }
#portfolio .contenu a:hover em{ top:19px; left:19px; }

/* Portfolio pages */

#portfolio-web, #portfolio-print{ background-image:url('../backgrounds/portfolio.jpg'); }
#portfolio-web .contenu, #portfolio-print .contenu{ background:transparent; padding:0 0 30px 0; right:0; }
#portfolio .contenu .center:first-of-type, #portfolio-web .contenu .center:first-of-type, #portfolio-print .contenu .center:first-of-type { display:block; width:680px; height:auto; text-align:left; background:none; padding:0; margin:0; position:relative; font-size:1.2em; float:none; -moz-border-radius:0; -webkit-border-radius:0; -o-border-radius:0; -ms-border-radius:0; border-radius:0; }

#portfolio .contenu .selectLink p, #portfolio-web .contenu .selectLink p, #portfolio-print .contenu .selectLink p{ margin:8px 0; }
#portfolio .contenu .selectLink p:last-of-type, #portfolio-web .contenu .selectLink p:last-of-type, #portfolio-print .contenu .selectLink p:last-of-type{ margin-bottom:4px; }

#portfolio .contenu .center:first-of-type a, #portfolio .contenu .center:first-of-type p a:first-of-type, #portfolio-web .contenu .center:first-of-type a, #portfolio-web .contenu .center:first-of-type p a:first-of-type, 
#portfolio-print .contenu .center:first-of-type a, #portfolio-print .contenu .center:first-of-type p a:first-of-type{ display:inline; color:#dedede; text-decoration:none; }
#portfolio .contenu .center:first-of-type a:before, #portfolio .contenu .center:first-of-type p a:first-of-type:before, #portfolio .contenu .center:first-of-type a:after, #portfolio .contenu .center:first-of-type p a:first-of-type:after, #portfolio-web .contenu .center:first-of-type a:before, #portfolio-web .contenu .center:first-of-type p a:first-of-type:before, #portfolio-web .contenu .center:first-of-type a:after, #portfolio-web .contenu .center:first-of-type p a:first-of-type:after, #portfolio-print .contenu .center:first-of-type a:before, #portfolio-print .contenu .center:first-of-type p a:first-of-type:before, #portfolio-print .contenu .center:first-of-type a:after, #portfolio-print .contenu .center:first-of-type p a:first-of-type:after{ content:''; }
#portfolio .contenu .center:first-of-type a:hover, #portfolio-web .contenu .center:first-of-type a:hover, #portfolio-print .contenu .center:first-of-type a:hover{ color:#fff; }
#portfolio .contenu .selectLink, #portfolio-web .contenu .selectLink, #portfolio-print .contenu .selectLink{ display:block; background:url('bg_cadres2.png'); font-size:0.8em; text-transform:uppercase; font-family:'BebasNeueRegular','ubuntu_condensedregular','arial_narrowregular',arial,sans-serif; padding:5px 10px; margin:0 0 15px 0; text-align:left; -moz-text-shadow:none; -webkit-text-shadow:none; -o-text-shadow:none; -ms-text-shadow:none; }
#portfolio .contenu .selectLink strong, #portfolio-web .contenu .selectLink strong, #portfolio-print .contenu .selectLink strong{ font-weight:normal; font-size:0.9em; }
#portfolio .contenu section, #portfolio-web .contenu section, #portfolio-print .contenu section{ display:block; width:650px; height:228px; max-width:700px; max-height:250px; text-align:left; background:url('bg_cadres2.png'); padding:15px 15px 70px 15px; margin:0 15px 15px 0; position:relative; font-size:15px; float:left; overflow:hidden; -moz-text-shadow:none; -webkit-text-shadow:none; -o-text-shadow:none; -ms-text-shadow:none; text-shadow:none; -moz-border-radius:5px; -webkit-border-radius:5px; -o-border-radius:5px; -ms-border-radius:5px; border-radius:5px; -moz-transition:all ease 1s; -webkit-transition:all ease 1s; -o-transition:all ease 1s; -ms-transition:all ease 1s; transition:all ease 1s; }
#portfolio .contenu section a, #portfolio-web .contenu section a, #portfolio-print .contenu section a{ color:#f88; }
#portfolio .contenu section a:hover, #portfolio-web .contenu section a:hover, #portfolio-print .contenu section a:hover{ color:#fff; text-decoration:none; }
#portfolio .contenu section h2, #portfolio-web .contenu section h2, #portfolio-print .contenu section h2{ font-family:'antoniolight','arial_narrowregular',arial,sans-serif; text-transform:uppercase; background:#000; margin:-15px -15px 15px -15px; font-size:1.6em; height:2em; line-height:2em; padding:0 10px; -moz-border-radius:5px 5px 0 0; -webkit-border-radius:5px 5px 0 0; -o-border-radius:5px 5px 0 0; -ms-border-radius:5px 5px 0 0; border-radius:5px 5px 0 0; }
#portfolio .contenu section h2 a, #portfolio-web .contenu section h2 a, #portfolio-print .contenu section h2 a{ color:#fff; text-decoration:none; display:table-cell; height:1.6em; vertical-align:middle; }

#portfolio .contenu section small, #portfolio-web .contenu section small, #portfolio-print .contenu section small{ display:block; font-size:0.85em; clear:both; position:absolute; left:0; right:0; bottom:0; background:#000; height:45px; padding:5px 10px; text-align:justify; -moz-border-radius:0 0 5px 5px; -webkit-border-radius:0 0 5px 5px; -o-border-radius:0 0 5px 5px; -ms-border-radius:0 0 5px 5px; border-radius:0 0 5px 5px; }

.galerie{ display:inline-block; text-align:left; padding:0; margin:0 10px 0 0; float:left; }
.galerie .vignette{ display:block; border:1px solid #000; height:181px; width:auto; padding:0; margin:0; vertical-align:top; -moz-border-radius:5px; -webkit-border-radius:5px; -o-border-radius:5px; -ms-border-radius:5px; border-radius:5px; }
.galerie .vignette:hover{ border:1px solid #fff; }
#seeimg{ border:1px solid #ccc; }
.galerie [data-info]{ display:inline; margin:0; padding:0; }
.galerie [data-info]:hover:before { display:none; }

#portfolio .contenu section .galerie [data-info], #portfolio-web .contenu section .galerie [data-info], #portfolio-print .contenu section .galerie [data-info]{ display:none; }
#portfolio .contenu section .galerie [data-info]:first-of-type, #portfolio-web .contenu section .galerie [data-info]:first-of-type, #portfolio-print .contenu section .galerie [data-info]:first-of-type{ display:block; }

#portfolio-web .contenu section img, #portfolio-print .contenu section img{ display:inline-block; margin:0 10px 0 0; float:left; border:1px solid #000; height:181px; width:auto; -moz-border-radius:5px; -webkit-border-radius:5px; -o-border-radius:5px; -ms-border-radius:5px; border-radius:5px; }

/* Portfolio Applications Web */

#portfolio-applications .contenu{ padding:30px 50px 50px 50px; }

#portfolio-applications{ background-image:url('../backgrounds/portfolio.jpg'); }

#portfolio-applications .contenu h2{
display:inline-block;
clear:both;
width:auto;
height:36px;
position:relative;
font-family:'antoniolight','BebasNeueRegular','ubuntu_condensedregular','arial_narrowregular',arial,sans-serif;
text-transform:uppercase;
font-size:36px;
margin:30px 0 30px -50px;
background:#fff url('h2-portfolio-applications.png') no-repeat right center;
color:#000;
padding:8px 60px 8px 100px;
-webkit-padding-after:16px;
-webkit-padding-before:0;
-moz-border-radius:0 26px 26px 0;
-webkit-border-radius:0 26px 26px 0;
-o-border-radius:0 26px 26px 0;
-ms-border-radius:0 26px 26px 0;
border-radius:0 26px 26px 0;
}

#portfolio-applications .contenu h2:after{
content:"";
display:block;
width:104px;
height:2px;
background:#000;
position:absolute;
bottom:11px;
left:0;
}

#portfolio-applications .contenu h3{
display:block;
height:30px;
clear:both;
position:relative;
font-family:'antoniolight','arial_narrowregular',arial,sans-serif;
text-transform:uppercase;
font-size:30px;
font-weight:normal;
margin:30px 0 30px -50px;
padding:7px 15px 7px 100px;
-webkit-padding-after:14px;
-webkit-padding-before:0;
}

#portfolio-applications .contenu h3:after{
content:"";
display:block;
width:103px;
height:2px;
background:#fff;
position:absolute;
bottom:10px;
left:0;
}

#portfolio-applications .contenu .galerie{ display:block; text-align:center; padding:0; margin:30px 0; float:none; clear:both; }
#portfolio-applications .contenu .galerie .vignette{ display:inline; border:1px solid #000; height:100%; width:100%; width:auto; padding:0; margin:0; -moz-border-radius:0; -webkit-border-radius:0; -o-border-radius:0; -ms-border-radius:0; border-radius:0; }
#portfolio-applications .contenu .galerie .vignette:hover{ border:1px solid #fff; }
#portfolio-applications .contenu .galerie [data-info]{ display:inline-block; width:322px; height:181px; padding:0; margin:0 10px 20px 10px; }
#portfolio-applications .contenu .galerie [data-info]:before{ content:attr(data-info); position:absolute; padding:5px; border:1px solid #ddd; background:transparent url('bg_galerie.png'); bottom:150px; left:0; width:312px; max-width:312px; -moz-border-radius:3px; -webkit-border-radius:3px; -o-border-radius:3px; -ms-border-radius:3px; border-radius:3px; color: #fff; font-size:13px; margin:0; -moz-text-shadow:1px 1px 3px #000; -webkit-text-shadow:1px 1px 3px #000; -o-text-shadow:1px 1px 3px #000; -ms-text-shadow:1px 1px 3px #000; text-shadow:1px 1px 3px #000; -moz-transition:all ease 0.3s; -webkit-transition:all ease 0.3s; -o-transition:all ease 0.3s; -ms-transition:all ease 0.3s; transition:all ease 0.3s; visibility:hidden; -moz-opacity:0; -webkit-opacity:0; -o-opacity:0; -ms-opacity:0; opacity:0; }
#portfolio-applications .contenu .galerie [data-info]:hover:before { display:block; bottom:185px; left:0; font-size:13px; visibility:visible; -moz-opacity:1; -webkit-opacity:1; -o-opacity:1; -ms-opacity:1; opacity:1; }

/* Contact */

#contact .contenu{ width:850px; margin:auto; }
#contact .contenu .error_message { text-align:center; display:block; margin:20px 0; text-transform:uppercase; font-weight:bold; color:#a00; }

#contact .contenu form{
display:block;
width:470px;
margin:auto;
}

#contact .contenu form label{
display:inline-block;
width:175px;
text-align:right;
padding-right:5px;
margin:0;
font-family:'antoniolight','arial_narrowregular',arial,sans-serif;
float:left;
}

#contact .contenu form input[type='text'], #contact .contenu form textarea{
display:inline-block;
width:275px;
background:#fff url('bgfields.png') repeat-x center top;
border:1px solid #000;
margin-bottom:10px;
font-size:15px;
padding:3px;
vertical-align:3px;
font-family:'arial_narrowregular',arial,sans-serif;

}

#contact .contenu form textarea{
-moz-resize:none;
-webkit-resize:none;
-ms-resize:none;
resize:none;
height:250px;
}

#label_votre-message{
vertical-align:240px;
}

#contact .contenu form input[type='submit']{
display:block;
width:100%;
text-align:center;
border:0;
background:transparent;
font-family:'BebasNeueRegular','ubuntu_condensedregular','arial_narrowregular',arial,sans-serif;
color:#cbcbcb;
cursor:pointer;
font-size:40px;
-moz-transition:all ease 0.3s;
-webkit-transition:all ease 0.3s;
-o-transition:all ease 0.3s;
-ms-transition:all ease 0.3s;
transition:all ease 0.3s;
}

#contact .contenu form input[type='submit']:hover{ color:#fff; }

#contact .contenu .center:nth-of-type(2){ font-size:0.8em; }

/* Alice */

#alice .contenu { background:none; color:#330; padding-top:0; }
#alice .contenu a:hover{ color:#000; }

#alice .contenu h1{ font-family:'im_fell_english_proregular','BebasNeueRegular','ubuntu_condensedregular','arial_narrowregular',arial,sans-serif; font-size:4em; margin-top:0; }
#alice .contenu h2{ font-family:'im_fell_english_proregular','BebasNeueRegular','ubuntu_condensedregular','arial_narrowregular',arial,sans-serif; font-size:2em; margin-bottom:0; }
#alice .contenu .note_link{ font-size:0.8em; text-decoration:none; color:#a00; }
#alice .contenu .note_link:hover{ color:#000; }
#notes_de_bas_de_page{ font-size:0.8em; }
#notes_de_bas_de_page a{ text-decoration:none; }
#notes_de_bas_de_page a:hover{ color:#000; }

#alice .floatright{ margin:0 0 15px 15px; }

#alice .floatright:nth-of-type(3){ border:1px solid #ccc; width:300px; }

#alice .floatright img{ max-width:100%; vertical-align:top; }

#alice .contenu hr{ border:0; display:block; clear:both; }

/* Mentions légales */

#mentions-legales .contenu{ width:850px; margin:auto; }
#mentions-legales .contenu h2{ display:block; clear:both; }
#mentions-legales .contenu .floatright{ margin-left:15px; }
#mentions-legales .contenu .floatright img{ border:1px solid #aaa; width:150px; }

/*-----------------------------------
Autres résolutions d'écran
-------------------------------------*/

@media (max-width: 1400px) {

#services .contenu, #contact .contenu, #mentions-legales .contenu { width:700px; }
}

@media (max-width: 1250px) {
#header_menu{ left:-50px; }
#credits{ left:85px; }
.page .contenu{ left:275px; }
#services .contenu, #contact .contenu, #mentions-legales .contenu{ width:600px; }
#services .contenu .ciseaux { width:80px; }
.page .contenu:after{ content:''; display:block; height:116px; width:66px; position:absolute; background:transparent url('small_mug2.png') no-repeat right top; bottom:-60px; right:10px; }
}

@media (max-width: 1090px) {
#portfolio .contenu p{ text-align:center; }
#portfolio .contenu a{ margin:0 20px 40px 20px !important; }
}

@media (max-width: 1000px) {
#header_menu{ display:block; width:100%; position:absolute; top:auto; left:0; bottom:0; height:30px; padding-top:5px; background:#000; z-index:10; }

.page{ height:auto !important; bottom:35px !important; }

#menu .lv1 { display:inline; }
#menu .lv1 .lv2{ top:-41px; left:0; background:#000; padding:5px 10px 0 10px; width:auto; border:1px solid #ccc; border-width:1px 1px 0 1px; visibility:hidden; -moz-opacity:0; -webkit-opacity:0; -o-opacity:0; -ms-opacity:0; opacity:0; -moz-border-radius:5px 5px 0 0; -webkit-border-radius:5px 5px 0 0; -o-border-radius:5px 5px 0 0; -ms-border-radius:5px 5px 0 0; border-radius:5px 5px 0 0; -moz-transition:all ease 0.3s; -webkit-transition:all ease 0.3s; -o-transition:all ease 0.3s; -ms-transition:all ease 0.3s; transition:all ease 0.3s; }
#menu .lv1:hover .lv2{ left:-10px; width:auto; visibility:visible; -moz-opacity:1; -webkit-opacity:1; -o-opacity:1; -ms-opacity:1; opacity:1; }
#menu .lv1 .lv2 a{ display:inline; font-size:20px; padding:0; }
#menu .lv1 .lv2 a:before{ display:none; }

#menu{ display:block; text-align:right; }
#menu a{ display:inline-block; text-decoration:none; text-align:center; text-transform:uppercase; font-family:'BebasNeueRegular','ubuntu_condensedregular','arial_narrowregular',arial,sans-serif; margin:0; padding-top:2px; color:#fff; -moz-transition:all ease 0.3s; -webkit-transition:all ease 0.3s; -o-transition:all ease 0.3s; -ms-transition:all ease 0.3s; transition:all ease 0.3s; }

#menu a:after{ content:'\0020 |\0020 '; }
#menu a:last-of-type{ margin-right:20px; }
#menu a:last-of-type:after{ content:''; }
#menu #portfolio_link{ margin:0; }
#menu #portfolio_link:after{ content:'\0020 |\0020 '; margin:0; }
#menu .white{ color:#cbcbcb; }
#menu .grey{ color:#cbcbcb; }
#menu a:hover{ color:#fff; }
#menu .white:hover{ color:#fff; }
#menu .grey:hover{ color:#fff; }
#menu .cercle{ display:inline; position:relative; background:none; width:auto; height:auto; -moz-border-radius:0; -webkit-border-radius:0; -o-border-radius:0; -ms-border-radius:0; border-radius:0; }
#menu .cercle .inter_circle{ display:inline; width:auto; height:auto; }
#menu .cercle .inner_circle{ display:inline; }

#menu #accueil_link, #menu #services_link, #menu #portfolio_link, #menu #contact_link, #menu #alice_link, #menu #mentions-legales_link, #menu #blog_link{ font-size:25px; height:25px; line-height:24px; letter-spacing:0; }
#menu #blog_link:before, #menu #blog_link:after{ content:''; }
#credits{ font-size:0 !important; border:0; padding:0; margin:0; width:70px; height:20px; position:fixed; bottom:7px; left:15px; top:auto; right:auto; z-index:2; -moz-border-radius:0; -webkit-border-radius:0; -o-border-radius:0; -ms-border-radius:0; border-radius:0; -moz-text-shadow:none; -webkit-text-shadow:none; -o-text-shadow:none; -ms-text-shadow:none; text-shadow:none; }
#credits p:last-of-type{ display:none; }
#credits p{ display:block; position:absolute; width:200px; background:#000; top:-54px; left:-15px; border:1px solid #ccc; border-width:1px 1px 0 0; visibility:hidden; -moz-opacity:0; -webkit-opacity:0; -o-opacity:0; -ms-opacity:0; opacity:0; -moz-border-radius:0 5px 0 0; -webkit-border-radius:0 5px 0 0; -o-border-radius:0 5px 0 0; -ms-border-radius:0 5px 0 0; border-radius:0 5px 0 0; -moz-transition:all ease 0.3s; -webkit-transition:all ease 0.3s; -o-transition:all ease 0.3s; -ms-transition:all ease 0.3s; transition:all ease 0.3s; }
#credits:hover p, #credits p:hover{ visibility:visible; -moz-opacity:1; -webkit-opacity:1; -o-opacity:1; -ms-opacity:1; opacity:1; }
#credits a{ /*color:#cbcbcb; font-size:0;*/ font-weight:bold; text-decoration:none; -moz-transition:all ease 0.3s; -webkit-transition:all ease 0.3s; -o-transition:all ease 0.3s; -ms-transition:all ease 0.3s; transition:all ease 0.3s; }
#credits a:hover{ color:#fff; }

/* Accueil */

.page .contenu{ display:block; position:absolute; padding:30px 50px 50px 50px; top:35px; left:100px; right:100px; }
.page .contenu:after{ content:''; display:block; height:100px; width:66px; position:absolute; background:transparent url('small_mug2.png') no-repeat right top; bottom:-45px; right:10px; }
.page .contenu:before{ content:'Photographie : Yohann Robin';  display:block; color:#fff; font-size:0.75em; position:absolute; bottom:-30px; right:-50px; -moz-text-shadow:0 0 6px #000; -webkit-text-shadow:0 0 6px #000; -o-text-shadow:0 0 6px #000; -ms-text-shadow:0 0 6px #000; text-shadow:0 0 6px #000; }
#accueil .contenu:before, #portfolio .contenu:before, #portfolio-web .contenu:before, #portfolio-print .contenu:before, #portfolio-applications .contenu:before{ bottom:10px; right:auto; left:10px; }
#alice .contenu:before{ content:'Illustration : John Tenniel';  display:block; color:#222; font-size:0.75em; position:absolute; bottom:-30px; right:-50px; -moz-text-shadow:none; -webkit-text-shadow:none; -o-text-shadow:none; -ms-text-shadow:none; text-shadow:none; }

/*#accueil .contenu:after{ display:none; }*/

/*#accueil .contenu{ display:inline; position:static; padding:0; margin:0; background:none; -moz-text-shadow:none; -webkit-text-shadow:none; -o-text-shadow:none; -ms-text-shadow:none; text-shadow:none; }*/

/* Services */

#services .contenu, #contact .contenu, #mentions-legales .contenu{ width:auto; margin:auto; }

#services .contenu .ciseaux{
display:block;
border:0;
width:60px;
height:auto;
position:absolute;
bottom:150px;
right:-3px;
}

/* Alice */

#alice .contenu { background:none; color:#330; padding-top:0; }
#alice .contenu h1{ font-family:'im_fell_english_proregular','BebasNeueRegular','ubuntu_condensedregular','arial_narrowregular',arial,sans-serif; font-size:4em; margin-top:0; }
#alice .contenu hr{ border:0; display:block; clear:both; }

}

@media (max-width: 880px) {
#menu .lv1 .lv2{ top:-39px; }
#menu #accueil_link, #menu #services_link, #menu #portfolio_link, #menu #contact_link, #menu #alice_link, #menu #mentions-legales_link, #menu #blog_link{ font-size:20px; height:25px; line-height:22px; }
#accueil .contenu h1{font-size:80px; }
.page .contenu{ display:block; position:absolute; padding:30px 50px 50px 50px; top:30px; left:50px; right:50px; }
.page .contenu:after{ content:''; display:block; height:95px; width:66px; position:absolute; background:transparent url('small_mug2.png') no-repeat right top; bottom:-40px; right:10px; }
}

@media (max-width: 760px) {
#accueil .contenu h1:before{ display:none; }
#portfolio .contenu, #portfolio-web .contenu, #portfolio-print .contenu{ display:block; position:absolute; padding:30px 0 50px 0; top:0; left:0; right:0; }
#portfolio .contenu h1, #portfolio-web .contenu h1, #portfolio-print .contenu h1, #portfolio-applications .contenu h1, { margin:0 0 15px 30px; }
#portfolio .contenu .center:first-of-type, #portfolio-web .contenu .center:first-of-type, #portfolio-print .contenu .center:first-of-type{ display:block; width:auto; float:none; margin:0; }
#portfolio .contenu section, #portfolio-web .contenu section, #portfolio-print .contenu section{ display:block; width:auto; float:none; margin:0 0 15px 0; -moz-border-radius:0; -webkit-border-radius:0; -o-border-radius:0; -ms-border-radius:0; border-radius:0; }
#portfolio-applications .contenu h2, #portfolio-applications .contenu h3{ margin-left:-20px; padding-left:90px; }
#portfolio-applications .contenu h2:after, #portfolio-applications .contenu h3:after{ width:93px; }
}

@media (max-width: 680px) {
#accueil .contenu h1{font-size:70px; }
.page .contenu{ display:block; position:absolute; padding:10px 30px 30px 30px; top:30px; left:30px; right:30px; font-size:0.95em; }
.page .contenu:before{ content:'Photographie : Yohann Robin';  display:block; color:#fff; font-size:0.75em; position:absolute; bottom:-30px; right:-10px; -moz-text-shadow:0 0 6px #000; -webkit-text-shadow:0 0 6px #000; -o-text-shadow:0 0 6px #000; -ms-text-shadow:0 0 6px #000; text-shadow:0 0 6px #000; }
#alice .contenu:before{ content:'Illustration : John Tenniel';  display:block; color:#222; font-size:0.75em; position:absolute; bottom:-30px; right:-10px; -moz-text-shadow:none; -webkit-text-shadow:none; -o-text-shadow:none; -ms-text-shadow:none; text-shadow:none; }
#portfolio .contenu .center:first-of-type, #portfolio-web .contenu .center:first-of-type, #portfolio-print .contenu .center:first-of-type, #portfolio-applications .contenu .center:first-of-type{ font-size:1.5em; }
}

@media (max-width: 640px) {

html, body, #wrapper, #main, .page{ width:500px !important; float:none !important; padding:0 !important; margin:0 !important; position:absolute !important; overflow:visible !important; background:#000 !important; border:0 !important; }
html, body{ min-height:100%; }
html, #wrapper, #main{ background:none !important; }
body{ background:#000 url('../backgrounds/accueil_phone.jpg') repeat-y center top !important; }
*:focus, *:active{ outline:0; outline:none; outline-style:none; }

#openmenu{ display:block; position:absolute; top:0; left:0; right:0; width:auto; text-align:left; padding:0 0 0 15px; color:#fff; font-family:arial, sans-serif; font-weight:normal; font-size:50px; height:60px; line-height:60px; text-decoration:none; background:#000; cursor:pointer; }
#openmenu:focus, #openmenu:active{ outline:0; }
#openmenu:after{ content:'GuillaumeRoos.com'; position:absolute; top:0; right:20px; font-size:30px; height:60px; line-height:60px; font-weight:normal; text-align:right; font-family:'antoniolight','arial_narrowregular',arial,sans-serif; }

.page .contenu{ font-size:1.5em !important; position:relative !important; float:none !important; margin:0 !important; width:auto !important; padding:20px !important; border:0 !important; }
#seebig, #seenot{ width:500px; }

#seeprev, #seenext{ -moz-opacity:1; -webkit-opacity:1; -o-opacity:1; -ms-opacity:1; opacity:1; }

.page .prive{ padding:0 0 50px 0 !important; position:relative; }

a{ color:#f00; -moz-transition:all ease 0.3s; -webkit-transition:all ease 0.3s; -o-transition:all ease 0.3s; -ms-transition:all ease 0.3s; transition:all ease 0.3s; }
a:hover{ color:#fff; text-decoration:none; }

#menu .lv1 .lv2, #menu .lv1:hover .lv2{ display:none !important; }
#menu .cercle, #menu .cercle .inter_circle, #menu .cercle .inner_circle{ display:inline; position:relative; background:none; width:auto; height:auto; -moz-border-radius:0; -webkit-border-radius:0; -o-border-radius:0; -ms-border-radius:0; border-radius:0; }

#header_menu{ display:block !important; width:100% !important; height:auto !important; position:absolute !important; top:60px !important; left:-110%; bottom:auto !important; border:0 !important; z-index:100 !important; -moz-opacity:1 !important; -webkit-opacity:1 !important; -o-opacity:1 !important; -ms-opacity:1 !important; opacity:1 !important; visibility:visible !important; -moz-transition:all ease 1s; -webkit-transition:all ease 1s; -o-transition:all ease 1s; -ms-transition:all ease 1s; transition:all ease 1s; }
#menu{ display:block !important; -moz-opacity:1 !important; -webkit-opacity:1 !important; -o-opacity:1 !important; -ms-opacity:1 !important; opacity:1 !important; visibility:visible !important; }
#menu a{ display:block !important; margin:0 !important; padding:0.5em 0 !important; font-size:2em !important; -moz-opacity:1 !important; -webkit-opacity:1 !important; -o-opacity:1 !important; -ms-opacity:1 !important; opacity:1 !important; visibility:visible !important; }

#menu a:before, #menu a:after{ content:'' !important; display:none !important; }

/* Site */

.page{ background:none !important; }
.page .contenu{ top:60px !important; border:0 !important; }
.page .contenu:before{ display:none !important; }

#credits, #tvfx{ display:none; }

/* Accueil */

#accueil .contenu h1{ position:relative; margin:0; top:0; right:0; text-transform:uppercase; font-family:'BebasNeueRegular','ubuntu_condensedregular','arial_narrowregular',arial,sans-serif; font-weight:normal; color:#fff; font-size:55px; display:block; height:500px; text-align:center; background:transparent url('mug.png') no-repeat center bottom; }
#accueil .contenu h1:after{ content:'VERSION SMARTPHONE'; color:#fff; display:block; width:100%; padding:0; text-align:center; position:absolute; bottom:0; font-size:0.5em; }

.page .contenu h1, .page .contenu h2{ margin:0; font-family:'BebasNeueRegular','ubuntu_condensedregular','arial_narrowregular',arial,sans-serif; font-weight:normal; }

.page .contenu, #services .contenu, #accueil .contenu{ display:block; background:none !important; position:relative; padding:30px 30px 30px 30px; top:0; left:0; right:0; color:#fff !important; font-family:'arial_narrowregular',arial,sans-serif; font-size:1em; text-align:justify; -moz-box-shadow:none; -webkit-box-shadow:none; -o-box-shadow:none; -ms-box-shadow:none; box-shadow:none;   }

.page .contenu:after{ content:'Photographie : Yohann Robin'; color:#fff !important; display:block; height:auto; padding:50px 0 25px 0; width:100%; font-size:0.7em; text-indent:15px; text-align:left; position:absolute; background:transparent url('small_mug.png') no-repeat right bottom; bottom:-70px; right:0; }

#accueil .contenu:after{ display:none; }

/* Services */

#services .contenu h1{ border:0; }
#services .contenu hr{ border-color:#ccc; }
#services .contenu .servs{ display:block; width:auto; }
#services .contenu .servs br{ display:none; }
#services .contenu .servs hr{ display:none; }
#services .contenu .servs small{ display:block; font-size:0.9em; padding:0 0 10px 0; width:auto; }
#services .contenu .servs small:before{ content:"\25A0"; margin-right:5px; color:#f00; vertical-align:2px; }
#services .contenu .ciseaux{ display:none; }

/* Portfolio */

#portfolio .contenu h1, #portfolio-web .contenu h1, #portfolio-print .contenu h1{ padding:20px 0 0 20px; }

#portfolio .contenu, #portfolio-web .contenu, #portfolio-print .contenu{ padding:0 0 30px 0 !important; }

#portfolio .contenu .center:first-of-type, #portfolio-web .contenu .center:first-of-type, #portfolio-print .contenu .center:first-of-type{
display:block;
width:auto;
height:auto;
text-align:left;
background:none;
padding:0;
margin:0;
position:relative;
font-size:1.1em;
float:none;
-moz-border-radius:0;
-webkit-border-radius:0;
-o-border-radius:0;
-ms-border-radius:0;
border-radius:0;
}

#portfolio .contenu .center:first-of-type a, #portfolio-web .contenu .center:first-of-type a, #portfolio-print .contenu .center:first-of-type a{ color:#dedede; text-decoration:none; }
#portfolio .contenu .center:first-of-type a:hover, #portfolio-web .contenu .center:first-of-type a:hover, #portfolio-print .contenu .center:first-of-type a:hover{ color:#fff; }

#portfolio .contenu .selectLink, #portfolio-web .contenu .selectLink, #portfolio-print .contenu .selectLink{ text-align:center; }

#portfolio .contenu .selectLink strong, #portfolio-web .contenu .selectLink strong, #portfolio-print .contenu .selectLink strong{ font-weight:normal; font-size:0.9em; }

#portfolio .contenu section, #portfolio-web .contenu section, #portfolio-print .contenu section{
display:block;
width:auto;
height:auto;
text-align:left;
background:url('bg_cadres2.png');
padding:15px 15px 30px 15px;
margin:0 0 15px 0;
position:relative;
font-size:0.7em;
float:none;
overflow:hidden;
max-height:500px;
-moz-text-shadow:none;
-webkit-text-shadow:none;
-o-text-shadow:none;
-ms-text-shadow:none;
text-shadow:none;
-moz-border-radius:0;
-webkit-border-radius:0;
-o-border-radius:0;
-ms-border-radius:0;
border-radius:0;
-moz-transition:all ease 1s;
-webkit-transition:all ease 1s;
-o-transition:all ease 1s;
-ms-transition:all ease 1s;
transition:all ease 1s;
}

#portfolio .contenu section a, #portfolio-web .contenu section a, #portfolio-print .contenu section a{ color:#f88; }
#portfolio .contenu section a:hover, #portfolio-web .contenu section a:hover, #portfolio-print .contenu section a:hover{ color:#fff; text-decoration:none; }

#portfolio .contenu section h2, #portfolio-web .contenu section h2, #portfolio-print .contenu section h2{
font-family:'antoniolight','BebasNeueRegular','ubuntu_condensedregular','arial_narrowregular',arial,sans-serif;
text-transform:uppercase;
background:#eee;
color:#000;
margin:-15px -15px 15px -15px;
font-size:1.4em;
letter-spacing:-1px;
text-align:left;
/*padding:5px 10px;*/
-moz-border-radius:0;
-webkit-border-radius:0;
-o-border-radius:0;
-ms-border-radius:0;
border-radius:0;
}

#portfolio .contenu section h2 a, #portfolio-web .contenu section h2 a, #portfolio-print .contenu section h2 a, #portfolio .contenu section h2 a:hover, #portfolio-web .contenu section h2 a:hover, #portfolio-print .contenu section h2 a:hover{ color:#000; text-decoration:none; }

#portfolio .contenu section small, #portfolio-web .contenu section small, #portfolio-print .contenu section small{
display:block;
clear:both;
position:relative;
left:0;
right:0;
bottom:0;
background:#eee;
color:#000;
height:auto;
padding:5px 10px;
text-align:justify;
font-size:0.9em;
-moz-border-radius:0;
-webkit-border-radius:0;
-o-border-radius:0;
-ms-border-radius:0;
border-radius:0;
margin:0;
}

#portfolio .contenu section p:last-of-type, #portfolio-web .contenu section p:last-of-type, #portfolio-print .contenu section p:last-of-type{ display:block; position:relative; margin:20px -15px -30px -15px; }

#portfolio .contenu:after, #portfolio-web .contenu:after, #portfolio-print .contenu:after{ display:none !important; }

#portfolio .contenu section .galerie, #portfolio-web .contenu section .galerie, #portfolio-print .contenu section .galerie{ display:block; width:100%; text-align:center; padding:0; margin:0 0 20px 0; }
#portfolio .contenu section .galerie .vignette, #portfolio-web .contenu section .galerie .vignette, #portfolio-print .contenu section .galerie .vignette{ display:block; border:1px solid #fff; height:181px; width:auto; padding:0; margin:0 auto; -moz-border-radius:5px; -webkit-border-radius:5px; -o-border-radius:5px; -ms-border-radius:5px; border-radius:5px; }
#seeimg{ border:1px solid #000; }
#portfolio .contenu section img, #portfolio-web .contenu section img, #portfolio-print .contenu section img{ display:block; float:none; margin:0 auto 20px auto; }

/* Alice */

#alice .contenu{ font-size:1.3em !important; }
#alice .contenu:after{ background-color:#000 !important; padding-top:25px !important; }
#alice .contenu { background:url('../backgrounds/alice_phone.jpg') repeat-y left top !important; color:#330 !important; padding-top:0; }
#alice .contenu h1{ font-family:'im_fell_english_proregular','BebasNeueRegular','ubuntu_condensedregular','arial_narrowregular',arial,sans-serif; font-size:4em; margin-top:0; }
#alice .contenu img{ width:100%; }
#alice .floatright{ display:block; width:80%; margin:20px auto; float:none; clear:both; }


/* Mentions légales */

#mentions-legales .contenu{ width:850px; margin:auto; }


}

@media (max-width:640px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio:2) {
  body { -webkit-text-size-adjust: 70%; }
}