.d_ {}
.m_ {display:none;}


body {
 max-width:100%;
 display: flex;
 height: 100vh;
 overflow-x:hidden;
 overflow-y: scroll;
}


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;
}


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);
}






.textGreyOut {color:#5B5D58;font-style: italic;}





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





.nav-left {
  position:fixed;left:0;
  z-index:8;
  width:14.3%;height:100%;

}
.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;
}



ul {padding:0 0 0 12%;}

ul#navMain_m {display:none;}


.nav-left div#nav {
  width:100%;height:33%;
  letter-spacing: 2px;
  margin-top:100%;
}
.nav-left div#social {
  position:absolute;bottom:0;
  display:flex;flex:1; flex-direction:column;
  justify-content:center;align-items:center;
  width:100%;height:12%;
}
.nav-left div#social div {padding:5% 0 5% 0;width:100%;text-align:center;}
.nav-left div#social div#icons img {width:24px;margin:0 4% 0 4%;}



.nav-left div#nav ul.nav li {
  position:relative;
  font-size:15px;color:#C4C6C0;
  padding:20px 0 24px 0;
  border-bottom:1px solid #C4C6C0;
}
.nav-left div#nav ul.nav li:hover {
  left:-12%;padding-left:12%;padding-right:100%;
  background-color:#C4C6C0;
  color:#5B5D58;/*font-weight:bold;*/
}





/* NAV - T h u m b   M e n u  */

#nav-btm {display:none;}

#thumbs {
  float:left; overflow-y:scroll;
  position:fixed;top:0;z-index:7;left:-14.3%;
  width:27.35%;height:100%;
  padding:1.25% 0 0 1.25%;
  background-color:#5B5D58;
  border-right:1px solid #C4C6C0;
  opacity:93%;
}
#thumbs.active {left:14.3%;}

#thumbs #tab {
  position:absolute;top:0;right:-30px;
  width:30px;height:5%;
  display:flex;
  justify-content:center;align-items:center;
  background-color:#C4C6C0;
  border-radius:0 9px 18px 0;
  transition: all .2s .1s ease-in-out;
}
#thumbs #tab:hover {
  width:52px;right:-52px;
  background-color:#5B5D58;
  box-shadow:2px 2px 6px #5B5D58;
}
#thumbs #tab img {width:50%;
  background-color:transparent;outline:none;

}
#thumbs #section {
  display:flex;flex:1;flex-direction:column;justify-content:center;align-items:center;
  width:100%;height:21%;
}
#thumbs #section div {letter-spacing:2px;padding:1%;}
#thumbs #section #main {
  font-size:15px;font-style:normal;font-weight:bold;
}
#thumbs #section #sub {
  font-size:12px;font-style:italic;
}

#thumbs img {
  width:30%;
  margin:1%;
  filter:grayscale(100%);/*mix-blend-mode: multiply;*/
  background-color:#C4C6C0;
  border:0 solid transparent;outline:1px solid #C5C6C0;outline-offset:-1px;
}













ul#nav.sub li {
  padding:20px 0 24px 0;
  border-bottom:1px solid transparent;}
ul#nav.sub li:hover {font-weight:bold;}
ul#nav.sub li.active {border-bottom:1px solid #C4C6C0;font-weight:bold;}


#cover {
 /*overflow-x:hidden;*/
 position:relative;z-index:9;
 width:100%;height:100%;
 margin-bottom:100%;
 align-items: center;
 border:0 solid transparent;
 background-color: #5B5D58;
}
#frame {
  width:100%;height:100%;
}
#frame.A {
 display:flex;flex:1;
 justify-content:center;
 flex-direction: column;
 border:1px solid grey;
 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;

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

#frame.A div {
 padding:1.8% 0 1.8% 0;
 /*border:1px dashed white;*/
}
#frame.A div#logo img {
 width:42px;mix-blend-mode:overlay;
}
#frame.A div#title {
 width:100%;
 mix-blend-mode:overlay;
}
#frame.A div#title img {
 width:90%;max-width:1220px;
}
#frame.A div#subtitle {
 font-size:33px;letter-spacing:1px;
}
#frame.A div#intro.mobile {display:none;}
#frame.A div#intro {
 position:absolute;bottom:0;
 padding:0 0 30px 0;margin-left:33%;
 width:33%;

 font-size:18px;font-weight:100;
 text-align:center;line-height:23px;
}
#frame.B{
  position:relative;
  padding:1.2% 1.2% .6% 1.2%;
  /* border thickness */
  width:97.7%;height:97.6%;
  /* faux-border compensation */
  background-color:#C4C6C0;/*border-color*/
}

#frame.B #banner {
  border:1px solid transparent;
  /* don't understand why this is necessary*/
  width:100%;height:31.8%;
  margin-bottom:1.2%;
  background-image:url('http://www.jeremiahleblanc.com/images/BG_patterns/texture.png');
  position:relative;
  line-height: 90px;
}
#frame.B #banner div#title {
  margin-top:6%;
  padding:0 0 0 3%;
}
#frame.B #banner div#info {
  display:flex;align-content:center;
  position:absolute;bottom:0;left:0;
  padding:0 0 0 3%;
  width:100%;height:39%;
  color:#5B5D58;
  font-size:48px;letter-spacing:1px;
  font-weight:bold;
}

#frame.B #banner div#content {
  position:absolute;right:0;top:0;
  margin-right:1%;
  width:50%;height:100%;
}
#frame.B #banner #title {
  font-size:120px;
  letter-spacing:6px;
  font-weight:bold;
  mix-blend-mode:overlay;
}
#frame.B #banner #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 #banner #learnMore:hover {
  mix-blend-mode: overlay;
}
#frame.B #banner #learnMore img {
  width:25%;
}

/* INSTAGRAM */
#frame.B #banner.C {
}
#frame.B #banner.C div#content {
 position:absolute;right:0;
 /* check box border */
 width:50%;height:100%;
 overflow:hidden;
 display:flex;flex:1;
 align-items:center;justify-content:flex-end;
}
#frame.B #banner.C div#content img {
 border:3px solid #C4C6C0;
 filter:grayscale(100%);
 float:right;
 margin:3% 3% 3% 0;
 width:24%;
}
#frame.B #banner.C div#content img:hover {
 filter:grayscale(10%);
}

#frame.C {
 width:0%;height:150%;
 border:1px solid transparent;
}




/*
   G A L L E R Y   M A I N   S E C T I O N
*/

#container.gallery {
 position:fixed;z-index:1;top:0;
 margin-left:14.3%;padding:0;
 width:85.7%;height:99.9%;
 display:flex; overflow-x:auto;overflow-y:hidden;
 background-image:url('http://www.jeremiahleblanc.com/images/BG_patterns/texture.png');
 display:;
}
#container figure {
  display:inline-block;
  position:relative;
  margin:6% 6% 0 6%;
  align-items: center;
}
#container figure#mobile {display:none;}

#container figure#desktop div#container {
 position:relative;left:6%;
  display:inline-block;
  position:relative;
  width:500px;height:100%;
}

#container figure#desktop div#container img {
 z-index:0;  position:absolute;top:0;left:0;
 display:inline-block;
 box-shadow:none;
 opacity:10%;
 display:none;
}
#container figure#desktop div#container #frameInit {
 z-index:1;position:absolute;top:0;left:0;
 margin:0 0 0 0;padding:0 1% 0 1%;
 width:96%;height:100%;
 background-color:none;
 border:3px solid transparent;
 text-align:center;
 display:inline-block;
}
#frameInit #title {
 margin:6% 0 3% 0;
 width:100%;height:72%;
 color:#5B5D58;

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

 font-weight:200;
}
#frameInit #title #main {
 margin:6% 0 0 0;
 height:6%;
 font-size:45px;
}
#frameInit #title #sub {
 margin:9% 0 6% 0;
 font-size:15px;font-weight:600;letter-spacing:2px;
}
#frameInit #title #descript {
 margin:18% 18% 0 18%;
 font-weight:300;font-size:18px;line-height:30px;
}
#frameInit #title #decor {
 position:absolute;top:84%;
 display:flex; justify-content:center;
 margin:6% 0 0 0;
 width:100%;height:24%;
}
#frameInit #title #decor div {
 border-left:2px solid #5B5D58;
}

div#navGal {
 display:flex; flex-direction:row;
 justify-content:center;

 position:fixed;z-index:2;
 top:82%;left:21%;
 width:500px;height:18%;
 display:none;
}
div#navGal a {
 display:flex; flex-direction:row;
 align-content:center; justify-content:center;

 padding:0;
 width:30%;height:39%;
}
div#navGal img {
  width:30%;height:auto;
  opacity:50%;
}
div#navGal img:hover {opacity:90%;}





#container figure#desktop #descr {padding:0 0 48% 0;}

#container figure div#threads {
 position:absolute;z-index:1;
 margin-left:33%;
 width:33%;
 height:150%;top:-50%;
 border-left:1px solid white;
 border-right:1px solid white;
 opacity:.25;box-shadow: 1px 1px 4px #777;
}
#container figure img {
 position:relative;z-index:2;
 width:500px;
 border:3px solid #5B5D58; border-radius:12px;
 box-shadow: 1px 1px 4px #5B5D58;
}
#container figcaption {
 position:absolute;z-index:3;bottom:-2.4%;

 display:flex;flex:1;flex-direction:column;justify-content:flex-start;align-items:flex-start; text-align: left;

 width:88%;height:6%;overflow:hidden;
 padding:6% 6% 6% 6%;
 background-color:#5B5D58;
 border:3px solid #5B5D58;
 border-radius:12px 12px 0 0;

 /*transition: all 3s ease-in-out 1s;*/
 /*transition-property:height;*/
 /*transition-duration:3s;*/
 /*transition-delay:1s;*/
 /*transition-timing-function:ease-in-out;*/
 -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;

}
#container figcaption:hover {
 height:95%;
 box-shadow: 1px 1px 4px #5B5D58;
 opacity:.97;

}
#container figcaption div {
 margin:3px 0 6px 0;width:100%;
 color:#C4C6C0;text-align:center;
}
#container figcaption div#title {
  font-size:18px;
  font-style:normal;
}
#container figcaption div#description {
  margin:9% 0 0 0;padding:15% 0 0 0;
  color:#DDD;font-size:18px;font-style:italic;
  line-height:27px;
  border-top:1px solid #444;
 }

#container figcaption div#fade {
  width:106%;height:30%;max-height:24px;border-bottom:6px solid #5B5D58;
  /*border-top:1px solid white;*/
  margin:0;
  position:absolute;bottom:0;left:-6%;z-index:2;
  background-image: linear-gradient(rgba(91, 93, 88, 0), #5B5D58);
}
#container::-webkit-scrollbar {
  display: none;
}


#container figcaption.initial {display:none;
  text-align: center;
  margin:0 0 0 1%;padding:0 6% 0 6%;
  width:87%;height:14%;
  border:none;
  border-top:1px solid #FFF;
  border-radius:0px;
  background-color:#5B5D58;
  opacity:21%;

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

#container figcaption.initial:hover {
  height:81%;padding-top:24%;
  border:1px solid transparent;
  border-radius:12px;
  opacity:.97;
}






#btn {
 display:inline-block;
 margin:3% 0 3% 0;padding:2% 3% 2% 3%;
 width:auto;height:auto;
 border-radius:6px;

 box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);

 text-align:center;letter-spacing:2px;
 text-transform: uppercase;font-weight: 700;
 color:white;
}

#btn.lvl1 {
 background:linear-gradient(267.29deg, #5B5D58 -21.34%, #5B5D58 122.88%);;
}

#btn.lvl2 {
 background-color:#E19500;
}