@charset "utf-8";


/************************************************************************************************************/
/*******************************************       GENERAL       ********************************************/
/************************************************************************************************************/

html, body {height: 100%; width:100%; margin:0; padding:0;}
html, body, #wrapper, h1, h2, h3 {margin: 0; padding: 0; font-weight:300; font-size:1em; }
body {color:#5e5e5e; font-family: Roboto, Helvetica, Arial, sans-serif; font-weight:400; background:#000;}
ul {margin:0; padding:0;}
a, a:visited {text-decoration:none; color:#5a8ed4; }
a:hover {text-decoration:underline; }
.no-bg {background:none;}
.clear {clear:both;}
.justify {text-align:justify;}
.center {text-align:center;}
.f-left {float:left;}
.f-right {float:right;}
.white {color:#fff;}
.black {color:#000;}
.grey-96 {color:#969696;}
.grey-5c {color:#5c5c5c;}
.grey-3d {color:#3d3d3d;}
.bold {font-weight:bold;}
.norm {font-weight:300; font-style:normal;}
.italic {font-style:italic;}
.no-border {border:0;}
.f-12 {font-size:12px;}
.f-13 {font-size:13px;}
.f-14 {font-size:14px;}
.f-15 {font-size:15px;}
.f-16 {font-size:16px;}
.f-17 {font-size:17px;}
.f-18 {font-size:18px;}
.f-20 {font-size:20px;}
.f-22 {font-size:22px;}
.f-24 {font-size:24px;}
.f-26 {font-size:26px;}
.f-28 {font-size:28px;}
.f-30 {font-size:30px;}
.f-32 {font-size:32px;}
.f-34 {font-size:34px;}
ul {margin:0; padding:0;}
ul li {list-style-type:none;}





/************************************************************************************************************/
/******************************************       TRANSITIONS       *****************************************/
/************************************************************************************************************/
.liquid ul li a img { transition:all .5s ease; -o-transition:all .5s ease; -moz-transition:all .5s ease; -webkit-transition:all .5s ease; }
#top-categories .one-category .name {transition:all .3s ease; -o-transition:all .3s ease; -moz-transition:all .3s ease; -webkit-transition:all .3s ease;}





/************************************************************************************************************/
/********************************************       HEADER       ********************************************/
/************************************************************************************************************/

#header { background-color:#262626; height:100px; width:100%; padding:0; top:0; left:0; z-index:999; margin:0;}
#header .h-content { position:relative; top:28px; width:100%; max-width:1060px; margin:0 auto; }
#toppage #header .h-content { max-width:1280px; }
a.logo, a.logo:visited, a.logo:hover { text-decoration:none; border:0;}
#logo-top { background:url('../../../../../../../../../../../../assets/www.romainjl.net/portfolio/css/img/logo-top-retina.png') no-repeat; background-size:380px 45px; width:380px; height:45px; margin:0px 20px; text-indent:100%; white-space:nowrap; overflow:hidden; transition:all .5s ease; -o-transition:all .5s ease; -moz-transition:all .5s ease; -webkit-transition:all .5s ease; }

.fb_edge_widget_with_comment {float:left; margin:13px 0 0 0;}
#header ul { margin:0; padding:0 20px 0 0; position:absolute; top:-3px; right:0px;}
#header ul li { list-style-type:none; display:inline-block; overflow:hidden; line-height:33px; background:url('') no-repeat bottom right; background-size:2px 34px; padding:8px 15px 0 12px; font-weight:200;}
#header ul li a, #header ul li a:visited { color:#929292; font-size:12px; text-transform:uppercase; transition:all .3s ease; -o-transition:all .3s ease; -moz-transition:all .3s ease; -webkit-transition:all .3s ease; }
#header ul li a:hover { text-decoration:none; color:#ddd; }
#header ul li.social { padding:8px 0 0 5px; background:none; }
#header ul li.social:nth-child(3) { padding-left:10px; }

#header ul li.social a { text-indent:100%; white-space:nowrap; overflow:hidden; display:inline-block; width:33px; height:33px; background:url('') no-repeat; background-size:159px 33px; border:0; text-decoration:none; background-color:#555; -webkit-border-radius:18px; -moz-border-radius:18px; border-radius:18px; opacity:.7; cursor:pointer; }
#header ul li.social a:hover { border:0; text-decoration:none; opacity:1; }
#header ul li.social a.facebook {}
#header ul li.social a.facebook:hover { background-color:#3a589c; }
#header ul li.social a.deviantart { background-position:-42px 0; }
#header ul li.social a.deviantart:hover { background-color:#54675a; }
#header ul li.social a.instagram { background-position:-83px 0; }
#header ul li.social a.instagram:hover { background-color:#527fa4; }
#header ul li.social a.fivehundredpx { background-position:-125px 0; }
#header ul li.social a.fivehundredpx:hover { background-color:#888; }

.desktop #header ul li.desktop { display:inline-block; }
.desktop #header ul li.device { display:none; }
.device #header ul li.device { display:inline-block; }
.device #header ul li.desktop { display:none; }
.ios #header ul li.android { display:none !important; }
.android #header ul li.ios { display:none !important; }

@media screen and (max-width:800px) {  
#logo-top { width:338px; background-position:right 0; margin:0px auto; }
#header { height:110px; }
#header .h-content { top:15px; }
#header ul li.first { padding-left:0; }
#header ul li, #header ul li.social { padding-top:5px; } 
#header ul { position:relative; margin:0 auto; display:block; width:100%; text-align:center; }
}









/************************************************************************************************************/
/********************************************       MENU       **********************************************/
/************************************************************************************************************/

.gallery-nav { width:100%; top:49px; left:0; z-index:777; background:#10100f; height:36px; line-height:36px; border-top:solid 6px #3c3c3c; border-bottom:solid 1px #292828; text-align:center; margin:0; padding:0; overflow:hidden; }
.gallery-nav li { list-style-type:none; display:inline-block; margin:0 0 0 25px; font-size:11px; }
.gallery-nav li:first-child {margin:0;}
.gallery-nav li a, .gallery-nav li a:visited { color:#777; text-transform:uppercase; font-weight:400; }
.gallery-nav li a:hover, .gallery-nav li a:hover h2 { text-decoration:none; color:#ccc; }
.gallery-nav li.current, .gallery-nav li.current h1, .gallery-nav li.current h2, .gallery-nav li.current h3 { font-weight:600; color:#ccc; }
.gallery-nav li.current {background:url('../../../../../../../../../../../../assets/www.romainjl.net/portfolio/css/img/icons.png') no-repeat center -119px; }


.toggle-nav { display:none; width:100%; top:49px; left:0; background:#1b1b1b; height:38px; line-height:38px; border-top:solid 7px #3c3c3c; border-bottom:solid 0px #222; text-align:center; margin:0; padding:0; overflow:hidden; font-size:12px; font-weight:600; text-transform:uppercase; color:#888; }
.toggle-nav:hover { color:#ddd; text-decoration:none; }
.gallery-toggle-nav { display:block !important; height:0px; width:94%; background:#222; padding:0 3%; border-bottom:solid 1px #3b3b3b; overflow:hidden; transition:all .5s ease; -o-transition:all .5s ease; -moz-transition:all .5s ease; -webkit-transition:all .5s ease; }
.gallery-toggle-nav li { display:block; width:100%; background:#222; height:38px; line-height:38px; font-size:13px; color:#848484; text-align:center; border-bottom:solid 1px #333; }
.gallery-toggle-nav li a { color:#6b6b6b; text-transform:uppercase; font-weight:400; }
.gallery-toggle-nav li a:hover { text-decoration:none; color:#ccc; }
.gallery-toggle-nav li.current a { color:#ccc; }
.gallery-toggle-nav li:last-child { border-bottom:0; }


@media screen and (max-width:1060px) {  
.gallery-nav { display:none; }
.toggle-nav { display:block; }
}

@media screen and (min-width:1060px) {  
.gallery-toggle-nav { height:0px !important; }
.gallery-nav { display:block; }
}









/************************************************************************************************************/
/*****************************************       TOP PAGE       *********************************************/
/************************************************************************************************************/

#container { width:100%; margin:0 0 30px 0; padding:0; }
#toppage #container { text-align:center;}
.highlight { display:inline-block; margin:3% auto 2% auto; width:100%;  }
.highlight .content { display:block; width:100%; max-width:815px; height:auto; margin:0 auto; border:solid 10px #dbdbdb;}
.highlight .content:hover {border-color:#fff;}
.highlight .content img, .highlight .content:hover img { width:100%; text-decoration:none; border:0;}
.highlight .content .overlay { position:relative; border:none; background:url('../../../../../../../../../../../../assets/www.romainjl.net/portfolio/css/img/bg-black-tranparent.png'); width:100%; height:85px; margin:-85px auto 0 auto; z-index:2;}
.highlight .content .overlay .name { position:relative; float:left; width:100%; text-align:center; color:#ccc; text-transform:uppercase; letter-spacing:3px; font-size:16px; margin:16px 0 3px 0;}
.highlight .content .overlay .title {position:relative; float:left; width:100%; text-align:center; color:#538bd7; letter-spacing:1px; font-size:14px;}
.highlight .content:hover .overlay #top-categories .one-category.name { color:#fff; text-decoration:underline;}

@media screen and (max-width:850px) {
.highlight .content { width:90%; border-width:9px; }
}
@media screen and (max-width:550px) {
.highlight .content { border-width:7px; } 
.highlight .content .overlay {height:55px; margin-top:-55px} 
.highlight .content .overlay .name {font-size:14px; letter-spacing:1px;} 
.highlight .content .overlay .title { display:none;} 
}
@media screen and (max-width:350px) {
.highlight .content { border-width:5px; } 
.highlight .content .overlay {height:40px; margin-top:-40px} 
.highlight .content .overlay .name {font-size:12px; letter-spacing:1px; margin-top:8px;} 
}
@media screen and (max-width:280px) { 
.highlight .content .overlay .before { display:none;} 
}



#top-categories { width:100%; max-width:1364px; margin:0 auto; padding:25px 0 0% 0; text-align:center;}
#top-categories .one-category { display:inline-block; margin:0 .3% 0.6% .3%; width:32%; max-width:408px; max-height:233px; background:#dbdbdb; }
@media screen and (max-width:1300px) {
#top-categories { padding-top:15px; }
#top-categories .one-category { margin:0 0 1.8% 0; width:48%; max-width:408px; max-height:233px; } 
#top-categories .one-category:nth-child(2n) { margin-left:1%; }
}
@media screen and (max-width:550px) {
#top-categories { padding-top:15px; }
#top-categories .one-category { margin:0 4% 4% 4%; width:92%;}
}
#top-categories  a.one-category:hover { background:#fff;}
#top-categories .one-category .content { display:block; float:left; width:100%; height:100%; overflow:hidden; }
#top-categories .one-category .content img, #top-categories a.one-category:hover .content img { width:100%; border:none; text-decoration:none;}
#top-categories .one-category .name { position:relative; float:left; display:inline-block; opacity:0; border:none; color:#eee; text-transform:uppercase; letter-spacing:3px; font-size:14px; background:url('../../../../../../../../../../../../assets/www.romainjl.net/portfolio/css/img/bg-black-tranparent.png'); width:100%; overflow:hidden; height:0px; line-height:0px; margin:0 0 0 0; z-index:2; -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='img/bg-black-tranparent.png')"; /* IE8 */   
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='img/bg-black-tranparent.png');   /* IE6 & 7 */}
#top-categories a.one-category, #top-categories .one-category:hover,  #top-categories a.one-category:visited, #top-categories a.one-category:hover .name { text-decoration:none; color:#fff; }
#top-categories a.one-category:hover .name { background:#000; text-decoration:none; opacity:0.7; height:50px; line-height:50px; margin:-50px 0 0 0; }

@media screen and (max-width:1000px) {
#top-categories a.one-category .name, #top-categories a.one-category:hover .name { background:#000; text-decoration:none; opacity:0.7; font-size: 13px; height:35px; line-height:35px; margin:-35px 0 0 0; }
}









/************************************************************************************************************/
/******************************************      GALLERY PAGE       *****************************************/
/************************************************************************************************************/

#container.landscape, #container.portrait { background:#000; text-align:center; clear:both; padding:35px 0 0 0; margin-bottom:15px; }
@media screen and (max-width:800px) {
#container.landscape, #container.portrait { padding:18px 0 0 0; }	
}
@media screen and (max-height:650px) {
#gallery .landscape { height:auto; padding:0 0 15px 0;}
}
@media screen and (max-height:850px) {
#gallery .portrait { padding:35px 0 0 0;}
}
.landscape .wrapper, .portrait .wrapper{ margin:auto; text-align:center; display:inline-block; display:inline; min-height:400px; }
.landscape .wrapper { width:auto; height:100%;}
.portrait .wrapper { width:100%; height:100%;}
.wrapper .img-wrapper { width:100%; margin:0; position:relative; }
.wrapper .img-wrapper img.zoom { max-width:1000px; border:0; display:block; margin:0 auto; padding:0; }
.wrapper .img-wrapper a.prevnext { display:block; width:45px; height:90px; position:absolute; top:50%; margin:-45px 0 0 0;  }
.wrapper .img-wrapper a.prevnext .bg { display:block; width:45px; height:90px; background:#000; opacity:.5; transition:all .5s ease; -o-transition:all .5s ease; -moz-transition:all .5s ease; -webkit-transition:all .5s ease; }
.wrapper .img-wrapper a.prevnext:hover .bg { opacity:.7; }
.wrapper .img-wrapper a.prevnext .arrow { display:block; width:45px; height:90px; background:url('') no-repeat; background-size:45px 180px; text-indent:100%; white-space:nowrap; overflow:hidden; margin:-90px 0 0 0; position:absolute; opacity:.8; transition:all .5s ease; -o-transition:all .5s ease; -moz-transition:all .5s ease; -webkit-transition:all .5s ease; }
.wrapper .img-wrapper a.prevnext:hover .arrow { opacity:1; }
.wrapper .img-wrapper a.previous { left:0; }
.wrapper .img-wrapper a.previous .arrow { background-position:0 -90px; }
.wrapper .img-wrapper a.next { right:0; }

.portrait img.zoom { max-height:100%; }
@media screen and (max-width:1040px) { 
.Hong-Kong .landscape img.zoom { } 
.wrapper .img-wrapper img.zoom { max-width:100%; } 
}
@media screen and (max-width:800px) {
img.zoom {border-width:6px 7px;}
}
@media screen and (max-width:450px) {
img.zoom {border-width:4px 5px;}
}
.info-wrapper .info { line-height:10px; padding:5px 0 5px 0; }
.info-wrapper .info h3 { color:#898989; height:35px; line-height:35px; text-align:center; letter-spacing:1px; font-size:13px; display:inline; padding:0 8px 0 0; text-transform:uppercase; color:#777; }
.info-wrapper .info .link { font-size:13px; padding:0 0 0 8px; color:#bbb; text-transform: uppercase; }

.prev-next .previous { margin:0 20px 0 0; }


#slider-wrapper { background:#000; border-top:solid 1px #1b1b1b; width:100%; padding:0; margin:0; height:auto; padding:20px 0;}
.Vertical-Horizon #slider-wrapper, .Wild-Concrete #slider-wrapper, .HK-Neon-Signs #slider-wrapper, .Empty-Shell #slider-wrapper, .The-Blue-Moment #slider-wrapper {padding:20px 0;}
.liquid {padding:0 15px;}
.liquid .wrapper{text-align:center;}
.liquid .previous { display:block; height:75px; width:45px; background:url('../../../../../../../../../../../../assets/www.romainjl.net/portfolio/css/img/icons.png') no-repeat 15px -174px; float:left; margin:0; padding:0; cursor:pointer;}
.liquid .previous:hover { background-position:15px -242px;}
.liquid .next { display:block; height:75px; width:45px; background:url('../../../../../../../../../../../../assets/www.romainjl.net/portfolio/css/img/icons.png') no-repeat 20px -318px; float:right; margin:0; padding:0; cursor:pointer;}
.liquid .next:hover { background-position:20px -386px;}
.liquid ul li { display:inline-block; padding:4px 4px; margin:0; }
.liquid ul li a img { border:solid 5px #121212; max-width:155px; max-height:116px;}
.liquid ul li a:hover img, .liquid ul li a:active img, .liquid ul li.current a img{ border:solid 5px #cecece;}
@media screen and (max-width:650px) { 
#slider-wrapper {padding:24px 0;} 
.liquid {padding:0 10px;} 
.liquid .previous {height:61px; width:25px; background-position:0 -181px;} 
.liquid .previous:hover { background-position:0 -249px;} 
.liquid .next {height:61px; width:25px; background-position:10px -325px;} 
.liquid .next:hover { background-position:10px -393px;} 
.liquid ul li {} .liquid ul li a img { height:51px;} 
.info-wrapper .info h3 { letter-spacing:0; } 
}
@media screen and (max-width:650px) { 
#slider-wrapper {padding:12px 0; width:99%; } 
.wrapper{width:99%;} 
}
@media screen and (max-width:480px) { 
.info-wrapper .info .link { display:block; padding: 0 0 10px 0; } 
}








/************************************************************************************************************/
/****************************************       POP-UP MESSAGES       ***************************************/
/************************************************************************************************************/

#contact, #order { top:0; left:0; z-index:888; width:100%; height:300%; position:absolute; background:url('../../../../../../../../../../../../assets/www.romainjl.net/portfolio/css/img/bg-black-tranparent.png');}
.ie8 #contact, .ie8 #order{background:#000;}  
.popup .content { color:#989898; font-size:12px; width:90%; max-width:560px; height:80%; min-height:230px; max-height:480px; background:#000; border:solid #cecece; border-width:8px 9px; display:block; margin:65px auto; padding:0 0 20px 0;}
.popup #pop-up-contact { min-height:230px; max-height:420px; height:auto; margin:85px auto 0 auto;}
.popup #pop-up-order { min-height:230px; max-height:420px; height:auto; margin:-210px auto 0 -330px; position:fixed; top:50%; left:50%; }
.popup .content .close { text-align:right; margin:10px 5%; color:#fff; }
.popup .content .close a, .popup .content .close a:visited, .popup .content .close a:hover { color:#fff; font-weight:bold; text-decoration:none;}
.popup .content a, .popup .content a:hover { color:#fff; font-weight:bold;}
.popup .content .top{ color:#fff; margin:10px 9% 15px 9%; padding:0 0 20px 0; font-size:18px; border-bottom:solid 1px #2b2b2b;}
.popup .content .text{ margin:10px 9% 10px 9%; padding:0; text-align:justify; line-height:28px; font-size:16px; }
a.pop-facebook, a.pop-deviantart {background:url('../../../../../../../../../../../../assets/www.romainjl.net/portfolio/css/img/icons.png') no-repeat 0 5px; display:inline-block; height:15px; line-height:15px; color:#bbb; text-decoration:none; padding:5px 0 0 20px;}
a.pop-deviantart { background-position:0 -45px;}
a.pop-facebook:hover, a.pop-deviantart:hover { text-decoration:underline;}
@media screen and (max-width:600px) { 
.popup .content { height:auto; max-height:800px; }
.popup #pop-up-order { margin:85px auto 0 auto; position:relative; top:auto; left:auto; } 
}
@media screen and (max-width:450px) { 
.popup #pop-up-order {border-width:4px 5px; height:auto; max-height:1500px; width:80%;} 
.popup .content .close { margin:5px 5%;} 
.popup .content .top{margin:5px 6% 10px 6%; padding:0 0 10px 0; font-size:16px;} 
.popup .content .text{margin:5px 6% 10px 6%;}
}






/************************************************************************************************************/
/*****************************************       SPECIAL PAGE       *****************************************/
/************************************************************************************************************/
.short { display:none;}
.book-photo { margin:20px 0 30px 0; padding:40px 0 0 0; border-top:solid 1px #333; }
.book-photo a { display:inline-block; width:324px; height:215px; border:0; margin:0 12px 12px 0; overflow:hidden; opacity:1; transition:all .5s ease; -o-transition:all .5s ease; -moz-transition:all .5s ease; -webkit-transition:all .5s ease; }
.book-photo a:hover { opacity:1; }
.book-photo a:nth-child(3n) { margin:0 0 12px 0; }
.book-photo a img { border:0; width:100%; height:100%; }
.book-photo a:hover img { /* width:110%; margin:-2% 0 0 -5%; */ }
.book-info a.link-order { display:block; width:160px; height:47px; padding:0; background:url('') no-repeat; background-size:160px 47px; text-indent:100%; white-space:nowrap; overflow:hidden; transition:all .5s ease; -o-transition:all .5s ease; -moz-transition:all .5s ease; -webkit-transition:all .5s ease; opacity:.75; }
.book-info a.link-order:hover { text-decoration:none; opacity:1; }
.book-photo a .label { position:relative; width:100%; float:left; height:42px; line-height:42px; margin:-42px 0 0 0; opacity:0; transition:all .5s ease; -o-transition:all .5s ease; -moz-transition:all .5s ease; -webkit-transition:all .5s ease; }
.book-photo a:hover .label { text-decoration:none; opacity:1; }
.book-photo a .label .bg { display:block; width:100%; height:100%; padding:0; background:#000; opacity:.6; }
.book-photo a .label .name { position:absolute; top:0; width:94%; padding:5px 3%; color:#ccc; text-transform:uppercase; line-height:38px;font-size:12px; }

.block-exhibition, .block-press { display:block; width:100%; margin:25px 0 25px 0; text-align:center; color:#888; }
.block-exhibition .title, .block-press .title { display:block; width:100%; text-align:center; text-transform:uppercase; letter-spacing:5px; font-size:16px; font-weight:300; color:#666; border-top:solid 1px #333; padding:20px 0 8px 0; margin:25px 0 0 0;}
.block-exhibition .item, .block-press .item { display:block; width:100%; text-align:center; line-height:32px; font-size:12px; }
.block-exhibition .item em { color:#ccc; }
.block-press .item a { text-decoration:underline; font-style:italic; }
.block-press .item a:hover { text-decoration:none; }

@media screen and (max-width:1080px) { 
.book-photo { margin:15px auto;}
.book-photo a { width:32.6%; height:auto; margin-right:1%; }
.book-photo a:nth-child(3n) { margin-right:0; }
.book-photo a img { height:auto; }
}

@media screen and (max-width:730px) { 
.book-photo a { width:49%; margin:0 0 12px 0; height:auto; }
.book-photo a:nth-child(2n+1) { margin-right:2%; }
.book-photo a:nth-child(2n) { margin-right:0; }
.book-photo a img { height:auto; }
.book-photo a:hover .label { opacity:0; }
}

@media screen and (max-width:500px) { 
.book-photo { width:100%; margin:10px auto; padding:20px 0 0 0;} 
.book-photo a { width:100%; height:auto; }
.book-photo a:nth-child(2n) { margin-left:0; }
.book-photo a img { width:100%; height:auto; } 
}





/************************************************************************************************************/
/*************************************       THE BLUE MOMENT PAGE       *************************************/
/************************************************************************************************************/

#thebluemoment #container { width:100%; max-width:1000px; margin:0 auto 0; line-height:20px; padding:50px 0 20px 0;}
#thebluemoment .book-title { float:left; display:block; width:100%; height:auto; text-align:left;}
#thebluemoment .book-title .name { color:#5f95d6; text-transform:uppercase; font-size:28px; letter-spacing:1px;}
#thebluemoment .book-title .name .first { font-size:42px;}
#thebluemoment .book-title .text { font-style:italic; color:#999; width:100%; margin:22px 0 0 0; padding:0 35px 10px 0; border-width:0 1px 0 0;}

@media screen and (max-width:1080px) { 
#thebluemoment #container { width:90%; margin-top:0;} 
#thebluemoment .book-title { width:100%;} 
#thebluemoment .book-title .name { text-align:left;} 
#thebluemoment .book-title .text { width:100%; margin:0; padding:0; text-align:justify; border-width:0 0 1px 0; } 
#thebluemoment .long { display:none;} 
#thebluemoment .short { display:block;} 
}

@media screen and (max-width:730px) { 
}

@media screen and (max-width:500px) { 
#thebluemoment #container { padding:30px 0 15px; } 
#thebluemoment .book-title .name { font-size:20px; letter-spacing:0px;} 
#thebluemoment .book-title .name .first { font-size:32px;} 
}







/************************************************************************************************************/
/*************************************       VERTICAL HORIZON PAGE       ************************************/
/************************************************************************************************************/

#vh #container { width:100%; max-width:1000px; margin:0 auto 0; line-height:20px; padding:50px 0 20px 0;}
#vh .book-title { float:left; display:block; width:650px; height:auto; text-align:left;}
#vh .book-title .name { color:#737dcb; text-transform:uppercase; font-size:28px; letter-spacing:1px;}
#vh .book-title .name .first { font-size:42px;}
#vh .book-title .text { font-style:italic; color:#ccc; width:650px; margin:22px 0 0 0; padding:0 35px 10px 0; border-width:0 1px 0 0;}
#vh .book-info {float:left; display:block; width:515px; height:auto; padding:0 35px 10px 0; text-align:left; color:#999; font-size:12px; line-height:18px;}
#vh .book-info p { margin:0;}
#vh .book-info a { float:left; display:inline-block; margin:15px 0 0 0; padding:4px 0; color:#3971bc; }
#vh .book-img { margin:-150px 0 0 0; float:right; display:block; width:302px; height:282px; background:url('../../../../../../../../../../../../assets/www.romainjl.net/portfolio/css/img/vh-books.jpg') no-repeat; }


@media screen and (max-width:1080px) { 
#vh #container { width:90%; margin-top:0;} 
#vh .book-title { width:100%;} 
#vh .book-title .name { text-align:center;} 
#vh .book-title .text { width:100%; margin:0; padding:0; text-align:center; border-width:0 0 1px 0; } 
#vh .long { display:none;} 
#vh .short { display:block;} 
#vh .book-info { width:100%; padding:0 0 10px 0; text-align:center;  } 
#vh .book-info a { float:none; } 
#vh .book-img { display:none; } 
}

@media screen and (max-width:730px) { 
#vh #container { padding:30px 0 15px; } 
}

@media screen and (max-width:500px) { 
#vh .book-title .name { letter-spacing:0px;} 
#vh .book-title .name .first { } 
}







/************************************************************************************************************/
/***************************************       WILD CONCRETE PAGE       *************************************/
/************************************************************************************************************/

#wildconcrete #container { width:100%; max-width:1000px; margin:0 auto 0; line-height:20px; padding:50px 0 20px 0;}
#wildconcrete #container { width:100%; max-width:1000px; margin:0 auto 0; line-height:20px; padding:50px 0 20px 0;}
#wildconcrete .book-title { float:left; display:block; width:650px; height:auto; text-align:left;}
#wildconcrete .book-title .name { color:#74ac60; text-transform:uppercase; font-size:28px; letter-spacing:1px;}
#wildconcrete .book-title .name .first { font-size:42px;}
#wildconcrete .book-title .text { font-style:italic; color:#ccc; width:700px; margin:22px 0 0 0; padding:0 10px 10px 0; border-width:0 1px 0 0;}
#wildconcrete .book-info {float:left; display:block; width:515px; height:auto; padding:0 35px 10px 0; text-align:left; color:#999; font-size:12px; line-height:18px;}
#wildconcrete .book-info p { margin:0;}
#wildconcrete .book-info a { float:left; display:inline-block; margin:15px 0 0 0; padding:4px 0; color:#3971bc;}
#wildconcrete .book-img { margin:-218px 0 0 -30px; float:right; display:block; width:254px; height:430px; background:url('../../../../../../../../../../../../assets/www.romainjl.net/portfolio/css/img/wc-books.jpg') no-repeat;}

#wildconcrete .block-press .item a { color:#74ac60; }

#wildconcrete .book-photo a { width:241px; height:361px; overflow:hidden; display:inline-block; border:0; margin:0 12px 12px 0;}
#wildconcrete .book-photo a img { border:0; }
#wildconcrete .book-photo a:nth-child(4), #wildconcrete .book-photo a:nth-child(6), #wildconcrete .book-photo a:nth-child(10), #wildconcrete .book-photo a:nth-child(12), #wildconcrete .book-photo a:nth-child(16), #wildconcrete .book-photo a:nth-child(18), #wildconcrete .book-photo a:nth-child(22) { margin-right:0; }
#wildconcrete .book-photo a:nth-child(5), #wildconcrete .book-photo a:nth-child(6), #wildconcrete .book-photo a:nth-child(11), #wildconcrete .book-photo a:nth-child(12), #wildconcrete .book-photo a:nth-child(17), #wildconcrete .book-photo a:nth-child(18) { width:494px; }




@media screen and (max-width:1080px) { 
#wildconcrete #container { width:90%; margin-top:0;} 
#wildconcrete .book-title { width:100%;} 
#wildconcrete .book-title .text { width:100%; margin:0; padding:0; text-align:center; border-width:0 0 1px 0; } 
#wildconcrete .book-title .name { text-align:center;} 
#wildconcrete .long { display:none;} 
#wildconcrete .short { display:block;} 
#wildconcrete .book-info { width:100%; padding:0 0 10px 0; text-align:center; } 
#wildconcrete .book-info a { float:none; } 
#wildconcrete .book-img { display:none; } 

#wildconcrete .book-photo a { width:32%; height:auto; margin:0 2% 12px 0 !important; }

#wildconcrete .book-photo a:nth-child(5), #wildconcrete .book-photo a:nth-child(6), #wildconcrete .book-photo a:nth-child(17), #wildconcrete .book-photo a:nth-child(18) { width:66%; }
#wildconcrete .book-photo a:nth-child(11), #wildconcrete .book-photo a:nth-child(12) { width:49%; }

#wildconcrete .book-photo a:nth-child(3), #wildconcrete .book-photo a:nth-child(5), #wildconcrete .book-photo a:nth-child(7), #wildconcrete .book-photo a:nth-child(10), #wildconcrete .book-photo a:nth-child(12), #wildconcrete .book-photo a:nth-child(15), #wildconcrete .book-photo a:nth-child(17), #wildconcrete .book-photo a:nth-child(19), #wildconcrete .book-photo a:nth-child(22) { margin-right:0 !important; }

}

@media screen and (max-width:730px) { 
#wildconcrete #container { padding:30px 0 15px; } 
}

@media screen and (max-width:500px) { 
#wildconcrete .book-title .name { letter-spacing:0px;} 
#wildconcrete .book-title .name .first { } 
}




/*
@media screen and (max-width:800px) { 
#wildconcrete #container { width:90%; margin-top:0;} 
#wildconcrete .book-title { width:100%;} 
#wildconcrete .book-title .name { text-align:center;} 
#wildconcrete .book-title .text { width:100%; margin:0; padding:0; text-align:center; border-width:0 0 1px 0; } 
#wildconcrete .long { display:none;} #wildconcrete .short { display:block;} 
#wildconcrete #container { width:600px; } 
#wildconcrete .book-info a { float:none;} 
#wildconcrete .book-img { display:none;} 
#wildconcrete .book-info { width:100%; padding:0 0 25px 0; text-align:center;} 
}
@media screen and (max-width:600px) { 
#wildconcrete #container { padding:45px 5% 25px; width:90%; } 
#wildconcrete .book-photo { width:400px; margin:15px auto;} 
#wildconcrete .book-photo a img {max-height:165px;}  
#wildconcrete .book-photo a {max-height:165px;}
 }
@media screen and (max-width:450px) { 
#wildconcrete #container { padding:30px 0 15px; } 
#wildconcrete .book-photo a { height:245px;} 
}


*/








/************************************************************************************************************/
/******************************************       ABOUT       ***********************************************/
/************************************************************************************************************/

#about-content { max-width:1010px; width:100%; margin:0 auto; padding:45px 0; }
#about-content .profile-pic { float:left; width:285px; height:285px; }
#about-content .profile-pic img { width:100%; }
#about-content .info { display:block; text-align:justify; margin:0 0 0 320px; max-width:690px; }
#about-content .info .name { text-transform:uppercase; color:#fff; margin:0 0 4px 0; font-size:16px; }
#about-content .info .location { font-size:14px; margin:0 0 4px 0; color:#666; }
#about-content .info a.email { font-size:14px; color:#fff; }
#about-content .info .text { font-size:14px; color:#666; }

@media screen and (max-width:1100px) { 
#about-content { padding:30px 3%; width:94%; }
#about-content .profile-pic { width:30%; height:auto; }
#about-content .info { margin:0 0 0 33%; width:67%; }
}

@media screen and (max-width:500px) { 
#about-content { padding:20px 7%; width:86%; }
#about-content .profile-pic { text-align:center; }
#about-content .profile-pic img { max-width:240px;}
#about-content .profile-pic { width:100%; height:auto; float:none; }
#about-content .info { margin:15px 0 0 0; width:100%; }
#about-content .info .name { text-align:center; }
#about-content .info .location { text-align:center; }
#about-content .info a.email { text-align:center; display:block; }
#about-content .info .text { border-top:solid 1px #444; margin:30px 0 0 0; padding:10px 0 0 0; }
}






/************************************************************************************************************/
/**********************************************       FOOTER       ******************************************/
/************************************************************************************************************/

#toppage #footer {margin:-7px 0 0 0;}
#footer { width:100%;
background: #0a0a0a; /* Old browsers */
background: -moz-linear-gradient(top, #0a0a0a 0%, #000000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0a0a0a), color-stop(100%,#000000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #0a0a0a 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #0a0a0a 0%,#000000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #0a0a0a 0%,#000000 100%); /* IE10+ */
background: linear-gradient(top, #0a0a0a 0%,#000000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a0a0a', endColorstr='#000000',GradientType=0 ); /* IE6-9 */}
#footer .center-light-line {clear:both; float:left; margin:0; padding:0; line-height:1px; height:1px; width:100%; }
#footer .center-light-line .left { width:50%; height:100%; margin:0; padding:0; float:left;
background: #000000; /* Old browsers */
background: -moz-linear-gradient(left, #000000 0%, #3f403f 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#000000), color-stop(100%,#3f403f)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #000000 0%,#3f403f 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #000000 0%,#3f403f 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #000000 0%,#3f403f 100%); /* IE10+ */
background: linear-gradient(left, #000000 0%,#3f403f 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#3f403f',GradientType=1 ); /* IE6-9 */}
#footer .center-light-line .right { width:50%; height:100%; margin:0; padding:0; float:left;
background: #000000; /* Old browsers */
background: -moz-linear-gradient(left, #3f403f 0%, #000000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#3f403f), color-stop(100%,#000000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #3f403f 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #3f403f 0%,#000000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #3f403f 0%,#000000 100%); /* IE10+ */
background: linear-gradient(left, #3f403f 0%,#000000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f403f', endColorstr='#000000',GradientType=1 ); /* IE6-9 */}
#footer .copyrights { text-align:center; font-size:11px; padding:20px 0 30px 0; margin:0; letter-spacing:1px; color:#777; }
@media screen and (max-width:450px) {
#footer .copyrights {padding:20px 0 30px 0; letter-spacing:1px; font-size:10px;}
}
a.social-fb, a.social-da {background:url('../../../../../../../../../../../../assets/www.romainjl.net/portfolio/css/img/icons.png') no-repeat 0 5px; display:inline-block; height:15px; line-height:15px; color:#bbb; text-decoration:none; padding:5px 0 0 20px;}
a.social-da { background-position:0 -45px;}
a.social-fb:hover, a.social-da:hover { text-decoration:underline;}