/* ==========================================================================
   Theme4: jack.works-style portfolio layout
   ========================================================================== */

/* --- 4.1 Base styles --- */
body, html{
margin: 0;
padding: 0;
border: 0;
font: normal 1em/1.5 latolight, 'Lato', helvetica, arial, sans-serif;
background: #1a1a2e;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
color: #fff;
}

/* --- 4.2 Link colors --- */
a{
color: #00bff3;
text-decoration: none;
}

a:hover{
color: #44d7ff;
text-decoration: underline;
}

/* --- Wrapper --- */
#wrapper{
width: 1650px;
margin: 0 auto;
}

/* ==========================================================================
   2.1 Sidebar layout
   ========================================================================== */

#nav{
width: 290px;
float: left;
padding: 72px 72px 0 0;
font-weight: bold;
}

#profile{
width: 4em;
height: 4em;
float: left;
margin: 0 0 0 -1.1em;
border-radius: 6em;
overflow: hidden;
background: rgba(255,255,255,.2); /* fallback when no logo is set */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

#title{
float: left;
margin: 1.5em 0 0 2em;
font-size: 1em;
line-height: 1.5;
}

/* ==========================================================================
   2.2 Navigation — indented tree with a connecting rail

   Robust, font-size-independent layout. Each list draws a continuous rail
   (its left border); node markers are absolutely positioned onto that rail,
   while labels sit in a fixed column at the list's content edge. Nested lists
   indent and carry their own connected rail, so a folder reads as a branch.
   No floats, no negative-margin guesswork.
   ========================================================================== */

#nav ul{
list-style: none;
margin: 0;
padding: 0 0 0 1.2em;
border-left: 2px solid rgba(255, 255, 255, .16);
}

#nav>ul{
clear: both;
margin: 2.4em 0 0 0.6em;
}

/* nested list: step inward so its rail branches in from the parent node */
#nav li>ul{
margin-left: 0.5em;
}

#nav li{
position: relative;
list-style: none;
}

/* shared row layout for leaves (<a>) and folders (<span class="label">) */
#nav li>a,
#nav li>.label{
position: relative;
display: inline-block;
padding: 0.32em 0.7em;
margin: 0.05em 0;
border-radius: 6px;
color: #cfd3dd;
font-weight: 600;
line-height: 1.25;
text-decoration: none;
white-space: nowrap;
}

/* node marker on the rail — leaf: hollow circle */
#nav li>a::before,
#nav li>.label::before{
content: "";
position: absolute;
left: -1.55em;
top: 50%;
width: 0.62em;
height: 0.62em;
margin-top: -0.31em;
border-radius: 50%;
border: 0.14em solid rgba(255, 255, 255, .5);
background: #1a1a2e;             /* punch a hole through the rail */
box-sizing: border-box;
}

/* folder marker — filled rounded square, distinct from leaf circles */
#nav li.label-item>.label::before{
border-radius: 0.16em;
background: rgba(255, 255, 255, .5);
}

/* private-gallery lock indicator — inline SVG after the label, inherits color */
#nav .lock{
width: 0.8em;
height: 0.8em;
margin-left: 0.35em;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
vertical-align: -0.06em;
opacity: 0.55;
}

/* ==========================================================================
   2.3 Hover + active
   ========================================================================== */

#nav li>a:hover,
#nav.collapsible li.label-item>.label:hover{
background: rgba(255, 255, 255, .06);
color: #fff;
text-decoration: none;
}

/* active leaf — cyan node, text, and a faint pill */
#nav li.gallery.active>a{
color: #2ec5ff;
background: rgba(46, 197, 255, .10);
}

#nav li.gallery.active>a::before{
border-color: #2ec5ff;
background: #2ec5ff;
}

/* ==========================================================================
   2.4 Origin dot — caps the bottom of the main rail
   ========================================================================== */

#origin{
width: 0.62em;
height: 0.62em;
margin: 0.2em 0 0 0.29em;
border-radius: 50%;
background: rgba(255, 255, 255, .35);
box-sizing: border-box;
}

/* ==========================================================================
   3.1 Main content area
   ========================================================================== */

#main{
float: left;
width: 1280px;
}

.icon{
width: 2em;
height: 2em;
float: left;
margin: 0 0.9em 0 0;
}

/* ==========================================================================
   3.2 Header links — pill buttons
   ========================================================================== */

#links{
float: right;
width: 100%;
margin: 4.2em 0 3em 0;
padding: 0;
clear: both;
line-height: 2em;
font-weight: bold;
}

#links li{
float: right;
list-style: none;
margin: 0 -1em 0 3em;
}

#links li a{
color: #fff;
padding: 0.3em 1em;
border: 0.125em solid transparent;
border-radius: 3px;
float: left;
}

#links li a:hover{
border: 0.125em solid #fff;
text-decoration: none;
}

/* ==========================================================================
   3.3 Slide elements
   ========================================================================== */

.slide{
float: left;
width: 100%;
background-color: #000;
clear: both;
position: relative;
}

.slide img, .slide video{
margin: 0;
padding: 0;
width: 100%;
height: auto;
float: left;
position: absolute;
left: 0;
top: 0;
z-index: 2;
}

.slide video{
position: absolute;
left: 0;
top: 0;
z-index: 5;
}

/* ==========================================================================
   3.4 Post / text content
   ========================================================================== */

.post{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
text-shadow: 0 1px 4px rgba(0,0,0,.7);
}

.post a{
color: inherit;
}

.post a:hover{
text-decoration: underline;
}

.post .content{
clear: both;
position: absolute;
width: 100%;
height: 100%;
}

.post h1, .post h2, .post h3{
display: block;
font: 100 4em 'Lato', helvetica, arial, sans-serif;
margin: 0;
padding: 20px 0 10px 0;
}

.post h2{
clear: both;
font-size: 2em;
padding: 10px 0 10px 0;
}

.post h3{
clear: both;
font: 300 1.2em 'Lato', helvetica, arial, sans-serif;
padding: 10px 0 10px 0;
}

.post p{
font: 300 1em/1.6 'Lato', helvetica, arial, sans-serif;
margin: 0 0 0.5em 0;
}

/* ==========================================================================
   3.5 Controls — fullscreen button
   ========================================================================== */

.controls{
position: absolute;
bottom: 0.5em;
right: 0.5em;
opacity: 0;
-webkit-transition: opacity 0.5s ease-in;
-moz-transition: opacity 0.5s ease-in;
-ms-transition: opacity 0.5s ease-in;
-o-transition: opacity 0.5s ease-in;
transition: opacity 0.5s ease-in;
cursor: pointer;
z-index: 20;
}

.slide:hover .controls{
opacity: 1;
}

.controls li{
list-style: none;
margin: 0;
padding: 0;
}

.controls li a.fullscreen{
background: transparent url(img/fullscreen.svg) no-repeat;
background-size: 2em 2em;
width: 2em;
height: 2em;
display: block;
}

/* ==========================================================================
   3.6 Video progress bar
   ========================================================================== */

.progress{
position: absolute;
z-index: 3;
width: 100%;
height: 6px;
top: 0;
left: 0;
opacity: 0;
-webkit-transition: opacity 0.5s ease-in;
-moz-transition: opacity 0.5s ease-in;
-ms-transition: opacity 0.5s ease-in;
-o-transition: opacity 0.5s ease-in;
transition: opacity 0.5s ease-in;
}

.progress.active{
opacity: 1;
}

.bar{
position: absolute;
top: 0;
left: 0;
height: 100%;
background-color: #ddd;
-webkit-transition: width 0.5s ease-in;
-moz-transition: width 0.5s ease-in;
-ms-transition: width 0.5s ease-in;
-o-transition: width 0.5s ease-in;
transition: width 0.5s ease-in;
}

/* ==========================================================================
   3.7 Fullscreen overlays
   ========================================================================== */

#fullscreen, #fullscreenvideo{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 20;
display: none;
}

#fullscreenvideo{
z-index: 21;
}

#fullscreen.active{
display: block;
background-color: #000;
}

#fullscreenvideo.active{
display: block;
}

#fullscreen img, #fullscreenvideo video{
margin: 0 auto;
display: block;
position: relative;
}

/* Top link */
#toplink{
margin-top: 20px;
width: 100%;
float: left;
clear: both;
}

/* Disqus */
#disqus_thread{
margin-top: 2em;
float: left;
width: 100%;
clear: both;
}

/* ==========================================================================
   5.1–5.4 Responsive breakpoints
   ========================================================================== */

@media screen and (max-width: 1700px){
body, html{
	font-size: 0.9em;
}

#wrapper{
width: 1390px;
}

#main{
	width: 1024px;
}

.post{
font-size: 1.2em;
}
}

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

#main{
width: 640px;
}

#nav{
padding: 72px 36px 0 36px;
}

#wrapper{
width: 1010px;
}

.content{
width: 100%;
}
}

@media screen and (min-width: 2400px){
body, html{
	font-size: 1.1em;
}

#nav{
width: 320px;
}

#wrapper{
width: 2350px;
}

#main{
	width: 1920px;
}
}

@media screen and (min-width: 3200px){
body, html{
	font-size: 1.3em;
}

#nav{
width: 400px;
margin-left: 40px;
}

#wrapper{
width: 3100px;
}

#main{
	width: 2560px;
}
}

/* ===========================================================================
   nested-galleries: breadcrumb trail + collapsible deep-tree menu
   =========================================================================== */

/* Breadcrumb trail on each gallery page */
.breadcrumb{
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	font-size: 14px;
	margin: 0 0 20px 0;
	opacity: 0.85;
}
.breadcrumb a{
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgba(255,255,255,0.3);
}
.breadcrumb a:hover{ border-bottom-color: currentColor; }
.breadcrumb .sep{ margin: 0 0.45em; opacity: 0.4; }
.breadcrumb .current{ font-weight: 400; }

/* Collapsible nested menu. These rules apply ONLY when JS adds .collapsible to
   #nav — without JS the menu stays fully expanded (progressive enhancement). */
#nav.collapsible li > ul{ display: none; }
#nav.collapsible li.open > ul{ display: block; }
#nav.collapsible li.label-item > .label{ cursor: pointer; }
#nav.collapsible li.label-item > .label::after{
	content: "\25B8";              /* ▸ collapsed */
	margin-left: 0.45em;
	font-size: 0.7em;
	opacity: 0.5;
	vertical-align: 0.1em;
}
#nav.collapsible li.label-item.open > .label::after{
	content: "\25BE";             /* ▾ expanded */
}