a#title, a#title:hover { background-color:transparent; position:absolute; height:70px; top:80px; left:38px; margin:0 20px 0 0; padding:0; border-bottom:0; display:table; z-index:10; }
a#title h1 { color:#000; font-family:"Aptifer Sans W01_n2", "Aptifer Sans W01", Arial, Helvetica, sans-serif; font-size:34px; font-style:normal; font-weight:200; letter-spacing:0.125em; line-height:34px; display:table-cell; vertical-align:bottom; }

#works { background-color:transparent; position:relative; width:100%; margin:0 0 20px 0; padding:0; border:0; display:inline-block; vertical-align:top; }
#works #descriptif { background-color:transparent; position:relative; width:450px; margin:0 20px; padding:0 0 20px 20px; display:inline-block; vertical-align:top; }
#descriptif p { font-size:14px; line-height:22px; margin:0 0 22px 0; padding-right:20px; }
#descriptif p.resume { padding-top:35px; }
#descriptif p.title { font-size:12px; line-height:19px; margin:0 0 9px 0; }
#descriptif p strong { font-size:13px; }
#descriptif p strong.smallcap { font-size:12px; }
#descriptif p.detail, #descriptif p.detail strong { font-size:12px; line-height:19px; margin:0 0 9px 0; }
#descriptif p.detail.first { padding-top:25px; }
#descriptif p.detail.last { margin:0 0 22px 0; }
#descriptif p.exhibit { margin:0 0 9px 0; padding-top:25px; }
#descriptif p.below-detail { padding-top:35px; }
#descriptif p.detail.signature { text-align:right; margin:-11px 0 19px 0; }
#descriptif p.detail strong.smallcap { font-size:11px; }
#descriptif p.start { width:40px; margin:0 0 20px -20px; padding:0; border-top:1px #ddd solid; }
#descriptif p.bottom { width:20px; margin:64px 0 20px 0; padding:0; display:block; border-bottom:1px #ddd solid; }
#descriptif p span { color:#000; font-size:12px; letter-spacing:5px; text-transform:uppercase; }
#descriptif p span.detail, #descriptif span.detail strong { font-size:12px; letter-spacing:1px; text-transform:none; }
#descriptif p span.smallcap { font-size:11px; letter-spacing:1px; }

#works #thumbnail { background-color:transparent; position:absolute; right:20px; left:490px; margin:0; padding:20px 0 64px 20px; display:inline-block; vertical-align:top; border-top:1px solid #ddd; }
#thumbnail p.left { height:20px; margin:-20px 0 0 -20px; padding:0; border-left:1px #ddd solid; }
#thumbnail a.thumb { background-color:#fff; position:relative; height:120px; width:auto; margin:0 10px 10px 0; display:inline-block; border-bottom:0; }
#thumbnail a.thumb.large { height:120px; }
#thumbnail a.thumb.video { height:180px; margin-bottom:20px; }
#thumbnail a.thumb img { max-width:100%; max-height:100%; border:1px #efefef solid; }
#thumbnail a.thumb:focus img, #thumbnail a.thumb:hover img { filter:alpha(opacity=70); -moz-opacity:0.7; opacity:0.7; -khtml-opacity:0.7; }

.slider { background-color:#fff; position:fixed; top:0; right:0; bottom:0; left:0; padding:0; display:none; z-index:100; overflow:auto; }
.slide { background-color:transparent; text-align:center; position:relative; width:98%; height:100%; margin:auto; padding:0; }
.slider .photos { background-color:transparent; text-align:center; position:absolute; top:0; right:0; bottom:0; left:0; margin:0 auto; display:block; }
.slider .numb { background-color:transparent; text-align:center; font-size:11px; position:fixed; bottom:32px; right:57px; width:50px; height:20px; margin:0; }
.slider .photos img { max-width:100%; height:auto; max-height:84%; margin:37px auto 32px auto; border:1px #efefef solid; pointer-events:none; cursor:none; }
.slider .photos img.noborder { border:0; }
.slider .photos .iframe { margin:120px auto 0 auto; border:0; }
.slider .photos iframe { background-color:#000; border:0; }
.leg { text-align:center; font-size:11px; line-height:160%; width:auto; margin:0 auto; padding-bottom:40px; display:block; }
.leg span { color:#ccc; }
.leg span.subtitle { color:#000; letter-spacing:5px; text-transform:uppercase; }
.display { display:none; }
p strong.smallcap { color:#000; font-size:10px; font-variant:small-caps; line-height:160%; padding-bottom:40px; }

a.prev, a.next, a.close,
a#closeVideo { background-color:#fff; cursor:pointer; position:fixed; bottom:0; width:50px; height:100%; margin:0; transition: 0.6s ease; border-bottom:0; user-select: none; -webkit-user-select: none; z-index:200; }
a.next { background:url(../img/right.png) no-repeat; background-position:0 99%; right:32px; }
a.next:focus, a.next:hover { background:url(../img/rightH.png) no-repeat; background-position:0 99%; cursor:pointer; }
a.prev { background:url(../img/left.png) no-repeat; background-position:0 99%; right:82px; }
a.prev:focus, a.prev:hover { background:url(../img/leftH.png) no-repeat; background-position:0 99%; cursor:pointer; }
a.close, a#closeVideo { background:url(../img/close.png) no-repeat; background-position:0 99%; left:32px; width:150px; }
a.close:focus, a.close:hover,
a#closeVideo:focus, a#closeVideo:hover { background:url(../img/closeH.png) no-repeat; background-position:0 99%; cursor:pointer; }

@media screen and (min-width:1025px) and (max-width:1360px) {
#thumbnail a.thumb { height:100px; }
#thumbnail a.thumb.large { height:auto; }
#thumbnail a.thumb.video { height:150px; }
}
@media screen and (min-width:769px) and (max-width:1024px) {
#works #descriptif { width:410px; }
#works #thumbnail { left:450px; }
#thumbnail a.thumb { height:80px; }
#thumbnail a.thumb.large { height:auto; }
#thumbnail a.thumb.video { height:120px; }
}
@media screen and (min-width:481px) and (max-width:768px) {
a#title, a#title:hover { left:25px; line-height:29px; }
a#title h1 { font-size:29px; }
#works { display:block; }
#works #descriptif { width:92%; margin:0 20px 0 10px; display:block; }
#descriptif p.start { margin:0 0 20px -15px; }
#descriptif p.bottom { display:none; }
#works #thumbnail { position:relative; width:auto; right:auto; left:0; padding:20px 0 64px 30px; display:block; border-top:none; }
#thumbnail p.left { display:none; }
#thumbnail a.thumb { height:80px; }
#thumbnail a.thumb.large { height:auto; }
#thumbnail a.thumb.video { height:120px; }
.slider .numb { right:45px; bottom:22px }
.slider .photos img { max-height:80%; margin:20px 0 20px 0; }
.slider .photos .iframe { background-color:transparent; position:relative; height:0; margin:10% 0 0 0; padding-bottom:56.25%; }
.slider .photos iframe { position:absolute; top:0; left:0; width:100%; height:100%; }
.leg { width:60%; }
a.prev, a.next, a.close { bottom:0; height:70px; }
a.next { background-position:0 100%; right:20px; }
a.next:focus, a.next:hover { background-position:0 100%; }
a.prev { background-position:0 100%; right:70px; }
a.prev:focus, a.prev:hover { background-position:0 100%; }
a.close, a#closeVideo { background-position:0 100%; left:20px; width:50px; }
a.close:focus, a.close:hover,
a#closeVideo:focus, a#closeVideo:hover { background-position:0 100%; }
}
@media screen and (max-width:480px) { 
a#title, a#title:hover { left:19px; }
a#title h1 { font-size:24px; line-height:28px; }
#works { display:block; }
#works #descriptif { width:92%; padding:0 0 20px 0; display:block; }
#descriptif p.start { margin:0 0 20px 0; }
#descriptif p.bottom { display:none; }
#works #thumbnail { position:relative; width:auto; right:auto; left:0; padding:20px 0 64px 20px; display:block; border-top:none; }
#thumbnail p.left { display:none; }
#thumbnail a.thumb { height:auto; width:100%; padding-right:20px; margin:0 20px 10px 0; }
#thumbnail a.thumb.large { height:auto; width:100%; padding-right:20px; margin:0 20px 10px 0; }
#thumbnail a.thumb.video { height:auto; width:100%; padding-right:20px; margin:0 20px 10px 0; }
.slider .numb { right:35px; bottom:22px }
.slider .photos img { max-height:75%; margin:20px 0 10px 0; }
.slider .photos .iframe { background-color:transparent; position:relative; height:0; margin:20px 0 0 0; padding-bottom:56.25%; }
.slider .photos iframe { position:absolute; top:0; left:0; width:100%; height:100%; }
.leg { width:60%; }
a.prev, a.next, a.close { bottom:0; height:70px; }
a.next { right:10px; }
a.prev { right:60px; }
a.close { left:0; width:50px; }
a.next { background-position:0 100%; right:10px; }
a.next:focus, a.next:hover { background-position:0 100%; }
a.prev { background-position:0 100%; right:60px; }
a.prev:focus, a.prev:hover { background-position:0 100%; }
a.close, a#closeVideo { background-position:0 100%; left:10px; width:50px; }
a.close:focus, a.close:hover,
a#closeVideo:focus, a#closeVideo:hover { background-position:0 100%; }
}
