:root {
 /* C O L O U R */
 --light:#E8EADD;
 --midlight:#C2C4B7;
 --middark:#5B5D50;
 --dark:#3D3F32;
 --antilight:#5e5050;
 --antimidlight:#C4BABA;
 --antimiddark:#5E5050;
 --antidark:#372F2F;
 /* S I Z I N G */
 --s-art-w:500px;
 --s-navLeft:14.3%;
}


 /* - - - - - - - - - - - -
  - - - - - - - - - - - - - sizing
 - - - - - - - - - - - - */

 .s-art-w {
  width:100%;max-width:var(--s-art-w);
 }


.row {
 display:flex; flex-direction:row;
}

.space-between {
 justify-content:space-between;
}

container#nav_gallery {
 position:fixed;z-index:100;
 bottom:6%;left:var(--navLeft);
 margin:6%;

}
container#nav_gallery .row {
}

/* - - - - - - - - - - - - spacing
*/
.mItem {
 margin:6% 6% 0 6%;
}


html {
 width:100%;height:100%;

 background-color:var(--light);
 color:var(--middark);

 font-family:'Exo 2',sans-serif;
 font-size:1em;line-height:1.4em;
}
body {
 display:flex; height:100vh;
 overflow-x:hidden;overflow-y:scroll;

 font-size:21px;font-weight:300;
 letter-spacing:0;
}


i {
 width:60px;height:60px;
 border-radius:100%;
 overflow:hidden;

 background-position:center;
 background-repeat:no-repeat;
 background-size:auto var(--i-size);
}

i.large {
 width:120px;height:120px;
}

i#arrow-circle-left {
 background-image:url('/D/icons/arrow-circle-left-C4C6C0.svg');
}
i#arrow-circle-right {
 background-image:url('/D/icons/arrow-circle-right-C4C6C0.svg');
}

counter {
 z-index:110; position:fixed;
 top:1%;left:15.3%;
 background-color:white;
 border:1px solid black;
 width:210px; height:60px;

 display:flex; flex:1;
 justify-content: center;align-items: center;

 display:none;
}

threshold {
 z-index:10; position:fixed; top:0; left:0;
 height:100%;width:0;
 border-right:3px solid white;
}



div#colour {
 z-index:0; position:absolute;
 width:100%; height:100%; }

colour {
 position:absolute;

}
.tcolourL {color:#C4C6C0; }
colour, .colourL {background-color:#C4C6C0; }
.tcolourL2 {color:#72756F; /* C4C6C0-27% */}
colour, .colourL2 {background-color:#72756F; }
.tcolourM {color:#5B5D58; }
colour, .colourM {background-color:#5B5D58; }

.transparentA {opacity:93% }
.transparentB {opacity:63%; filter: grayscale(100%); }
.transparentC {opacity:33%}

.blendColour {mix-blend-mode:color;}

.imgMute {
 filter:grayscale(100%);
 filter:contrast(60%);
}

.rotate90 {
 -webkit-transform: rotate(90deg);
 -moz-transform: rotate(90deg);
 -o-transform: rotate(90deg);
 -ms-transform: rotate(90deg);
 transform: rotate(90deg);
}
.flipH {
 -moz-transform: scale(-1, 1);
 -webkit-transform: scale(-1, 1);
 -o-transform: scale(-1, 1);
 -ms-transform: scale(-1, 1);
 transform: scale(-1, 1);
}

.transition {
 -webkit-transition:  all .5s ease-in-out;
 -moz-transition:     all .5s ease-in-out;
 -ms-transition:      all .5s ease-in-out;
 transition: all .5s .4s ease-in-out;
}


a {color:#f9fff9; text-decoration:none; }
a:hover {color:white;}

a.n {color:#f9fff9; }
a.n:visited {color:#666; }
a.n:hover {color:white; }
a.n:active {color:#f9fff9; }
a.n:link {color:#666; }

a.LGT {color:#f9fff9; }
a.LGT:visited {color:#f9fff9; }
a.LGT:hover {color:white; }
a.LGT:active {color:#f9fff9; }
a.LGT:link {color:#f9fff9; }

a.anc {display:block; width:100%; height:12%; }
a#endCover {
 z-index:1000;
 position:absolute;bottom:-250%;left:0;
 width:1px;height:1px;
}








nav {
 font-size:15px;
}




article {
 width:88%;
 padding:6%;
}



h1 {
 color:white;
 font-size:51px;
 margin:12% 0 6px 0;
 padding:0 0 0 0;
 font-weight:100;
 letter-spacing:3px;
 line-height:63px;
}
h2 { /* inner titles */
 color:white;
 font-size:30px;
 font-weight:100;
 margin:30px 0 12px 0;
 letter-spacing: 1px;
 line-height:42px;
}
h3 { /* sub-header */
 color:white;
 font-size:12px;

 margin:0 0 0 0;
 padding:2% 0 2% 0;
 font-weight:700;
 letter-spacing:3px;
 line-height:12px;
 text-transform:uppercase;
}
h4 { /* Section Headers */
 font-size:45px;
 font-weight:100;
 letter-spacing:1px;
 line-height:42px;
}
h5 { /*figcaption titles*/
 font-size: 18px;
 font-weight: 300;
 margin:0 0 6px 0;
 padding:0;
}
h6 {
 font-size: 12px;
 font-style: italic;
 margin:3px 0 6px 0;
 padding:0;
}

p {
 font-weight:400;
 line-height:30px;
}

ul {
 list-style-type: none;
 margin:0;
 padding:0;
}
li {
 padding:12% 3% 12% 3%;
}


img#inline {
 display:inline-block;float:left;
 height:9px;
 margin:0 9px 0 9px;
}
li#inline {height:18px;}
li#inline div {float:left;}

span.mirror {
 display: inline-block; margin:0;

 -moz-transform: scale(-1, 1);
 -webkit-transform: scale(-1, 1);
 -o-transform: scale(-1, 1);
 -ms-transform: scale(-1, 1);
 transform: scale(-1, 1);
}

span.a-external::after {
 position:relative;top:-6px;left:4px;
 content:url(/D/icons/external-link-C4C6C0-9px.svg);
}


icon {
 cursor:pointer;
 width:60px;height:60px;

 position:absolute;

 display:flex; flex:1;
 flex-direction:column;
 justify-content:center; align-content:center;
 align-items:center;

 border-radius:100%;

}
icon img {
 position:relative;
 width:48%;height:48%;
}


#frame.A icon {
 display:none;
 /*background-color: #5B5D58;*/
 bottom:3%;
}
#frame.A icon img {
 width:100%;height:100%;
 opacity:.6;
}


nav#thumbs icon {
 z-index:8;
 top:50%;left:-30px;
 background-image: linear-gradient(to right,rgba(91,93,88,1),rgba(91,93,88,1),rgba(91,93,88,0));
}

#coverBorder {
 position:absolute;
 bottom:-1.5%;left:0;
 width:100%;height:1.5%;
 background-color: #5B5D58;
 border-bottom:1px solid black;
 border-radius:0 0 60px 0;
}
icon#coverTab {
 z-index:0;
 bottom:-10%;left:0;
 width:12.9%;height:8%;
 padding:1% 0 0 2%;

 background-color: #5B5D58;
 /*background-color: #C4C6C0;*/
 border-radius: 0 0 12px 0;
 /*box-shadow:3px 3px 3px rgba(91,93,88,0.3);*/
 color:#C4C6C0;
 font-size: 13px;
 letter-spacing: 3px;

 justify-content:center;
 align-content:center;
 align-items:flex-start;

 border-bottom:1px solid black;


}
icon#coverTab img {
 opacity:60%;
 width:8px;
 margin-top:12px;
}

icon#coverTab:hover {
 box-shadow:0px 3px 3px rgba(0,0,0,0.18);
}







div#brand {display:none;
 z-index:9;position:fixed;top:0;left:0;
 width:14.3%;padding:3% 0 0 0;
}
#brand ul {
 padding:0 0 0 12%;
}
div#brand li {
 font-size:12px;
 color:#FFF!important;
 letter-spacing: 2px;
}
div#brand li#logo img {width:8px;}





/*  NAV-LEFT : structure and colour  */

nav#left {
 z-index:9;
 position:fixed; top:0;left:0;
 width:14.3%; height:100%;

 border-right:1px solid #C4C6C0;
 box-shadow: 0 0 3px rgba(00,00,00,.42);
}

/*  TRAY - OPACITY  */
nav#left #opacityA {
 z-index:0;
 position:absolute; top:0;left:0;
 width:100%; height:100%;
 background-color: #5B5D58;
}
nav#left #opacityB {
 z-index:1;
 position:absolute; top:0;left:0;
 width:100%; height:100%;
 display:flex; flex:1; flex-direction:column;
 align-items:center;
}





/*  N A V   L E F T  */

nav#left ul {
 width:100%;
 letter-spacing:3px;
 margin-top:148%;
}
nav#left ul li {
 z-index:2; position:relative;
 width:82%; /* margin-left & padding-3 */
 margin-left:12%; /* padding:20px 0 24px 0; */

 color:#C4C6C0;
 border-bottom:1px solid #C4C6C0;
}

nav#left ul li.btm {border-bottom:none;}
nav#left ul li:hover {
 color:#FFF; font-weight:bold;
}

/*  Social  */
nav#left #social {
 position:absolute; bottom:0;

 display:flex; flex:1;
 flex-direction:row; flex-wrap:wrap;
 align-content:space-around;
 justify-content:space-evenly; align-items:center;

 width:100%;height:9%;
 padding:6% 0 6% 0;
 font-size:12px;
 letter-spacing:1px;
}
nav#left #social img {width:31px; margin:0 4% 0 4%;}
nav#left #social a {/* border:1px dashed white; */}
nav#left #social > :last-child {
 width:100%; text-align:center;
}





/* N A V   -   T h u m b n a i l s */

nav#thumbs { /* 2(14.3 px) */
 z-index:7;
 position:fixed; top:0;right:-27%;
 width:28.6%; height:100%;

 box-shadow: -18px 0 12px rgba(00,00,00,.07);
}
nav#thumbs.withdrawn {/* right:-26.9% */ right:0;}
icon#navThumbs.withdrawn {/* right:-26.9% */ right:0;}






nav#thumbs figure { /* figure thumnails */
 z-index:2; position:absolute; /* colour tray */
 overflow-y:scroll;
 width:91%;height:97%;
 margin:3%;
 padding:0 0 0 3%;
 border:1px solid #72756F;
}
nav#thumbs header {
 width:88%;
 padding:24% 6%;
 text-align:center;
}
nav#thumbs header h4 {
 font-size: 31px;
 padding:0;
 margin:0;
}
nav#thumbs header h3 {
 display:none;
 padding:0;
 margin:0;
}

nav#thumbs figure img {
 width:30.9%;
 margin:0 2% 2% 0;
 background-color:#72756F;
 outline: 1px solid #C4C6C0;
 outline-offset:-1px;
 cursor:pointer;
}
nav#thumbs img:hover {opacity:1;}










lens {display:;
 z-index:0;
 position:fixed; top:0%; left:14.3%;
 width:57.1%; height:100%; /* nav#left */
 background-color: white;
 opacity:12%;
}
lens.full {
 width:84.1%;
}






tray#gallery {
 z-index:0; position:fixed; top:0;
 width:85.7%; height:100%;
 padding-left:14.3%; /* nav-left */

 display:flex; flex:1;

 overflow-x: scroll; overflow-y: hidden;

 background-image:
  url('/D/texture/paper.png');
}

tray#gallery decal {
 z-index:1; position:absolute; left:0;
 margin-left:33%;
 width:33%; height:93%;
 border-left:1px solid white;
 border-right:1px solid white;
 opacity:.25;box-shadow: 1px 1px 4px #777;
}

tray#gallery figure,
tray#gallery header  {
 display:inline-block;
 position:relative;
 margin:6% 6% 0 6%;
 align-items:center;
 text-align:center;
}
tray#gallery header {
 display:flex;
 flex-direction:column;
 justify-content:center;
 align-content:center;
}
tray#gallery header p {
 margin:18% 18% 0 18%;
 line-height:30px;
}
tray#gallery figure img,
tray#gallery header h4 {
 z-index:2; position:relative;
 width:500px;
 border:3px solid #5B5D58;
 border-radius:5px;
 box-shadow:1px 1px 5px #72756F;
}
tray#gallery header h4, tray#gallery header h3 {
 color:#5B5D58;
}

tray#gallery figure img:hover {
 opacity:1;
 filter: grayscale(0%);
}
tray#gallery figure img::before {
 content: "test";
 position: absolute;
 top: 0;
 left: 0;
 background-image: linear-gradient(120deg, #eaee44, #33d0ff);
 opacity: .7;
}

tray#gallery figure colour,
tray#gallery header h4 {
 z-index:3;
 border:3px solid transparent;
 box-shadow:none;
}
tray#gallery header h4::before {
 content:'\002619 \0000A0';
 font-size: 127%;
 position:relative;top:6px;
}
tray#gallery header h4::after {
 content:'\0000A0 \002767';
 -moz-transform: scale(-1, 1);
 -webkit-transform: scale(-1, 1);
 -o-transform: scale(-1, 1);
 -ms-transform: scale(-1, 1);
 transform: scale(-1, 1);
}

tray#gallery figcaption {
 z-index:3; position:absolute; bottom:0;

 display:flex;flex:1;
 flex-direction:column;

 width:88%; height:6%;
 padding:6% 6% 0 6%;
 background-color:#5B5D58;
 /*border-top:3px solid #5B5D58;*/
 border-radius:5px 5px 0 0;
 overflow:hidden;
}
tray#gallery figcaption p {
  margin:9% 0 0 0;
  padding:15% 0 15% 0;
  color:#DDD;
  font-size:18px;
  font-style:italic;
  line-height:27px;
  border-top:1px solid #444;
}
tray#gallery figcaption:hover {
 height:97%; /* (padding)/2 */
 box-shadow: 1px 1px 4px #5B5D58;
 opacity:.93;
}
tray#Gallery header decor {
 position:absolute;bottom:0;
 border-left:3px solid #5B5D58;
 width:0;height:24%;

}










/*  include $K.'cover/main.php;' */

cover {
 /*overflow-x:hidden;*/
 z-index:10;
 position:relative;
 width:100%;height:100%;
 margin-bottom:100%;
 align-items: center;
 border:0 solid transparent;
 /*background-color: #5B5D58;*/
}

cover #frame {
 width:100%;height:100%;
}

#frame.A {
 display:flex;flex:1;
 flex-direction:column;
 justify-content:center;
 align-items:center;

 color:white;
 text-align:center;

 background-image:url('http://www.jeremiahleblanc.com/images/banner/2020-01-test.jpg');
 background-position:center;
 background-repeat: no-repeat;
 background-size:cover;
 background-color: #5B5D58;

 border:0 solid #5B5D58;
 outline:18px solid #5B5D58;
 outline-offset: -18px;
}

#frame.A div {
 width:90%;
 padding:1.8% 0 1.8% 0;
 /*border:1px dashed white;*/
}
#frame.A #logo {
 padding:6% 0 6% 0;
}
#frame.A #logo img {
 width:42px;mix-blend-mode:overlay;
}
#frame.A #title {
 mix-blend-mode:overlay;
}
#frame.A #title img {
 width:90%;max-width:1220px;
}
#frame.A #subtitle {
 font-size:33px;letter-spacing:1px;
}
#frame.A #intro {
 max-width:600px;

 font-size:18px;
 font-weight:100;
 text-align:center;

 text-shadow: 1px 1px 2px #000;
}


#frame.B {
position:relative;
padding:1%;
width:98%;height:96.4%;
/* faux-border compensation */
background-color:#C4C6C0;/*border-color*/
}
#frame.B #banner {
 display:flex;flex:1;
 flex-direction: column;
 justify-content:space-around;

 z-index:1;
 position:relative;
 padding:0 0 0 3%;
 width:97%;height:31.6%;
 margin-bottom:1.2%;

 background-image:url('http://www.jeremiahleblanc.com/images/BG_patterns/texture.png');
 border:1px solid transparent;
}
 #frame.B #title {
   color:white;
   font-size:9vw;
   font-weight:bold;
   word-wrap:break-word;
   mix-blend-mode:overlay;

 }
 #frame.B #info {
   width:100%;
   color:#5B5D58;
   font-size:3vw;
   letter-spacing:1px;
   font-weight:bold;
 }

 #frame.B #content {
   position:absolute;right:0;top:0;
   margin-right:1%;
   /* check box border */
   width:50%;height:100%;
   overflow:hidden;
   display:flex;flex:1;
   align-items:center;justify-content:flex-end;
 }
 #frame.B #learnMore {
   display:flex;
   align-content:center;justify-content:center;
   position:absolute;
   right:0;top:0px;
   width:12%;height:100%;
   mix-blend-mode: multiply;
 }
 #frame.B #learnMore:hover {
   mix-blend-mode: overlay;
 }
 #frame.B #learnMore img {width:25%; }


 /* INSTAGRAM */

 #frame.B #banner.C img {
  border:3px solid #C4C6C0;
  filter:grayscale(100%);
  float:right;
  margin:3% 3% 3% 0;
  width:24%;
 }
 #frame.B #banner.C #content img:hover {
  filter:grayscale(10%);
 }



 #frame.C {
  z-index:0;
  position:relative;
  width:0%;
  border:1px solid transparent;
 }




 .d_ {}
 .m_block {display:none;}
 .m_inline {display:none;}