body, div, ul, li, h1, h2, textarea, title { margin:0; padding:0; }
body { background-color:#131313; color:#000; font-family:-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size:.9em; line-height:1.8em; -webkit-font-smoothing:antialiased; -moz-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-weight:300; overflow:auto; }
img { border:0; }

body, #sj, #sj a, #line, #menu a { transition:background-color 150ms linear, color 150ms linear, opacity 150ms linear; }

body.is-dark { background-color:#131313; color:#fff; }
body.is-dark #sj, body.is-dark #sj a, body.is-dark #line { color:#fff; }
body.is-dark #menu a { color:#fff; opacity:.75; }

body.menu-anim #content { transition:height 300ms linear; }

/*-------------------------------------------------------------------------------------------------------------------- TYPE */
p { margin:.1em 0 20px 0; }
a { color:#fff; opacity:1; text-decoration:none; outline:0; }
.media { color:#000; opacity:1; text-decoration:none; outline:0; }

.mL { opacity:.6; transition:opacity 0.2s ease; }
.mL:hover { opacity:1; }

.mmL { opacity:.6; transition:opacity 0.2s ease; }
.mmL:hover { opacity:1; }

#hcard-Sherman-Johnson { position:absolute; top:-500px; width:320px; height:25px; overflow:hidden; }
#title { position:relative; top:0; width:320px; height:1px; margin:0 auto; text-align:center; overflow:hidden; z-index:0; pointer-events:none;}
#title{pointer-events:none;}
#title *{pointer-events:none;}

#sherman { position:relative; top:0; width:320px; height:20px; margin:0 auto; text-align:center; overflow:hidden; z-index:0; }

h1 { color:#999; font-weight:400; font-size:2em; line-height:2em; letter-spacing:.1em; margin:25px 0 2px 0; }
h2 { color:#999; font-weight:200; font-size:1.2em; line-height:2em; letter-spacing:.2em; margin:15px 0 7px 0; }
h3 { color:#222; font-weight:200; font-size:.9em; line-height:1.8em; letter-spacing:.2em; margin:15px 0 2px 0; }

button { all:unset; display:inline-block; cursor:pointer; }

/*-------------------------------------------------------------------------------------------------------------------- HEADER */
#header { position:relative; top:0; left:0; width:100%; overflow:hidden; z-index:40; }
#headerContent { position:relative; left:0; width:1390px; margin:0 auto; }
#headerMargin { position:relative; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; }
.headerMargin { margin-top:20px; margin-bottom:20px; }
body.reel-page .headerMargin { margin-bottom:0; }



#sj { position:relative; margin:0; overflow:hidden; font-size:2em; font-weight:200; line-height:1.5em; letter-spacing:.05em; opacity:1; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; }
#dp { font-weight:100; display:inline; }
.shrink { margin-top:10px; margin-bottom:10px; }

/*-------------------------------------------------------------------------------------------------------------------- MENU */
#menu { position:relative; left:0; text-align:center; padding:0; font-size:.9em; letter-spacing:.1em; overflow:hidden; text-transform:uppercase; }
#menu ul { float:left; display:inline; }
/*#menu ul li { display:inline; list-style:none; padding:15px 30px 15px 0; } */


#menu ul li{display:inline; list-style:none; padding:0 30px 0 0;}
#menu a{display:inline-block; padding:8px 8px; line-height:1em;}



#menu a:hover {opacity: 1 !important; }

#subsections { margin-top:100px; }
#contact { float:right; }

#mobileMenuContainer { position:relative; width:100%; height:0; overflow:hidden; text-transform:uppercase; z-index:9999; }
#mobileMenuContainer ul { display:block; }
#mobileMenuContainer ul li { display:block; list-style:none; padding:8px 10px 5px 15px; text-align:center; }

#menuToggle { position:absolute; top:5px; left:8px; overflow:hidden; display:none; }
#menuToggle img { border:0; }

#openMenu { display:block; padding:0 2em 2em 0; }
#archive { position:relative; margin:1em 1em 3.5em 0; float:right; text-align:right; padding:0; font-size:1.1em; letter-spacing:.1em; overflow:hidden; text-transform:uppercase; }
#plus { font-size:1.3em; }

/*-------------------------------------------------------------------------------------------------------------------- MOBILE MENU PLAY */

#mobileMenuContainer ul li{padding:0; text-align:center;}

#mobileMenuContainer a{ display:block; padding:14px 15px; letter-spacing:.18em; font-weight:300; line-height:1.2; -webkit-tap-highlight-color: rgba(255,255,255,0.15);}

#mobileMenuContainer ul li + li{ border-top:0; box-shadow: inset 0 1px 0 rgba(70, 70, 70, 1); margin:0 31px;}

/*-------------------------------------------------------------------------------------------------------------------- LAYOUT */
#site { position:fixed; top:0; left:0; height:100%; width:100%; margin:0; padding:0; overflow:hidden; color:#fff;z-index:1; }


/* #content is always a scroller so its inner width is always consistent */
#content{overflow-y:scroll; overflow-x:hidden; -webkit-overflow-scrolling:touch; padding-left:10px; box-sizing:border-box; }

/* reserve gutter space when supported */
#content{scrollbar-gutter:stable; }

/* WebKit: keep width reserved, but make it invisible until hover */
#content::-webkit-scrollbar{width:10px; }
#content::-webkit-scrollbar-track{background:transparent; }
#content::-webkit-scrollbar-thumb{background:transparent; border-radius:6px; }

#content:hover::-webkit-scrollbar-track{background:#111; }
#content:hover::-webkit-scrollbar-thumb{background:#333; }
#content:hover::-webkit-scrollbar-thumb:hover{background:#555; }




/* always present scrollbar 

#content { position:relative; left:0; width:100%; display:block; overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch; z-index:1; }
#content.fade-in { opacity:0; }
#content.fade-in.is-visible { opacity:1; transition:opacity 300ms linear; }

#content::-webkit-scrollbar { width:10px; }
#content::-webkit-scrollbar-track { background:#111; }
#content::-webkit-scrollbar-thumb { background:#333; border-radius:6px; }
#content::-webkit-scrollbar-thumb:hover { background:#555; }
*/

#page { position:relative; width:1394px; padding:0; overflow:hidden; margin-left:auto; margin-right:auto; left:0 !important; }
.page { overflow:auto; }

#footer { position:absolute; left:0; text-align:center; font-size:.8em; height:10px; bottom:0; width:100%; background-color:#fff; z-index:110; }
#footer ul { display:inline; }
#footer ul li { display:inline; list-style:none; padding:15px; }

/*
#content { position:relative; left:0; width:100%; display:block; overflow-y:scroll; overflow-x:hidden; -webkit-overflow-scrolling:touch; z-index:1; }

#content.fade-in { opacity:0; }
#content.fade-in.is-visible { opacity:1; transition:opacity 300ms linear; }

WebKit scrollbar (Safari/Chrome) 
#content::-webkit-scrollbar { width:10px; }
#content::-webkit-scrollbar-track { background:transparent; }
#content::-webkit-scrollbar-thumb { background:transparent; border-radius:6px; }

/* Reveal only on hover 
#content:hover::-webkit-scrollbar-track { background:#111; }
#content:hover::-webkit-scrollbar-thumb { background:#333; }
#content:hover::-webkit-scrollbar-thumb:hover { background:#555; }
*/

/* ====================================================================== */
/* SHERMAN HOME FULLSCREEN REEL                                           */
/* ====================================================================== */

html, body{ height:100%; }

body.home-film{ overflow:hidden; background:#000; }
body.home-film #site{ position:fixed; inset:0; width:100%; height:100%; overflow:hidden; }

/* header overlays video */
body.home-film #header{ position:fixed; top:0; left:0; width:100%; z-index:10000; background:transparent; }
body.home-film #headerContent{ background:transparent; }
body.home-film #headerMargin{ margin-top:20px; margin-bottom:20px; }

/* white header treatment on home */
body.home-film #sj,
body.home-film #sj a,
body.home-film #line{ color:#fff; }

body.home-film #menu a{ color:#fff; opacity:.75; }
body.home-film #menu a:hover{ opacity:1; }

body.home-film .hamburger-inner,
body.home-film .hamburger-inner::before,
body.home-film .hamburger-inner::after{ background-color:#fff; }

body.home-film #mobileMenuContainer{
  position:fixed;
  top:0;
  left:0;
  right:0;
  width:100%;
  z-index:20000;
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(8px);
}

body.home-film #mobileMenuContainer a{ color:#fff; }

/* fullscreen canvas */
body.home-film #content{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
  z-index:1;
  padding-left:0;
  scrollbar-gutter:auto;
}

body.home-film #content::-webkit-scrollbar{ width:0; height:0; }



body.home-film #page{
  width:100%;
  max-width:none;
  height:100%;
  margin:0;
  padding:0;
  left:0 !important;
  right:auto;
  overflow:visible;
  box-sizing:border-box;
}

/* single reel */
body.home-film .homeReel{ position:absolute; inset:0; width:100%; height:100%; }
body.home-film .homeTrack{ position:absolute; inset:0; width:100%; height:100%; transform:none; transition:none; }
body.home-film .homeSlide{ position:relative; width:100%; height:100%; overflow:hidden; background:#000; }
body.home-film .homeVideo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }

body.home-film .homeOverlay{
  position:absolute;
  inset:0;
  background:linear-gradient(rgba(0,0,0,0.12), rgba(0,0,0,0.42));
  pointer-events:none;
}

body.home-film .homeMeta{
  position:absolute;
  right:22px;
  bottom:18px;
  text-align:right;
  color:#fff;
  z-index:5;
}

body.home-film .homeMetaTitle{
  font-size:1.05em;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.92;
}

body.home-film .homeMetaDirector{
  margin-top:6px;
  font-size:.95em;
  letter-spacing:.06em;
  opacity:.75;
}

@media only screen and (max-width:700px){
  body.home-film #headerMargin{ margin-top:20px; margin-bottom:0; }
  body.home-film .homeMeta{ right:14px; bottom:14px; }
  body.home-film .homeMetaTitle{ font-size:.95em; }
  body.home-film .homeMetaDirector{ font-size:.9em; }
}

/*-------------------------------------------------------------------------------------------------------------------- SPOTS / THUMBNAILS */
.th { position:relative; display:inline; float:left; overflow:hidden; border:0 solid #000; margin-bottom:40px; background-color:#131313; }
.th a.media { display:block; position:relative; line-height:0; }
.th a.media video { display:block; width:100%; height:auto; }

video { position:relative; width:100%; height:auto; border:none; outline:none; top:0; object-fit:cover; display:block; margin-top:0; }
.thVid { margin-top:0; }

.white { position:absolute; background-color:#fff; float:left; display:block; overflow:hidden; border:0 solid #000; z-index:100; }
.details { position:relative; float:left; bottom:0; padding:5px; display:inline; text-indent:0em; }

/*-------------------------------------------------------------------------------------------------- THUMB OVERLAY ONLY */
.th .rO { position:absolute; top:-1px; left:-1px; right:-1px; bottom:-1px; background-color:#000; opacity:.5; z-index:150; pointer-events:none; transform:translateZ(0); }
.th .rC { position:absolute; top:-1px; left:-1px; right:-1px; bottom:-1px; display:flex; align-items:center; justify-content:center; z-index:200; opacity:0; pointer-events:none; transition:opacity 200ms linear; transform:translateZ(0); }
.th:hover .rC { opacity:1; pointer-events:auto; }

/* THUMB TEXT (flex, full height of overlay) */
.th .rCtext { position:relative; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; z-index:210; color:#fff; } 
/* text-shadow:0 1px 4px rgba(0,0,0,.6);*/

/* LEGACY GLOBAL ROLLOVER TEXT (keep your old behavior) */
.rCtext { position:relative; display:table-cell; vertical-align:middle; font-size:2.4em; opacity:1;line-height:1.5em; text-align:center; letter-spacing:.1em; z-index:100; }

/*-------------------------------------------------------------------------------------------------------------------- LEGACY ROLLOVER TEXT (NON THUMBS) */
.rCtextMobile { position:relative; float:left; display:none; overflow:hidden; border:0 solid #000; margin:0 10px 40px 0; font-size:2em; }
.rCtextTitle { vertical-align:inherit; font-size:.5em; line-height:1em; text-align:center; letter-spacing:.1em; }
.rCtextType { vertical-align:inherit; font-size:.5em; line-height:1em; text-align:center; letter-spacing:.1em; font-style:italic; }
.transition { -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -o-transform:scale(1.1); transform:scale(1.1); }


/*------------------------------------------------------------- HAMBURGER */


.hamburger {padding: 10px 0px;display: inline-block;cursor: pointer;transition-property: opacity, filter;transition-duration: 0.15s;
  transition-timing-function: linear;font: inherit;color: inherit;text-transform: none;background-color: transparent;border: 0;margin: 0;overflow: visible; }

.hamburger-box {width: 30px;height: 18px;display: inline-block;position: relative; }

.hamburger-inner { display: block;top: 50%; margin-top: -2px; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {width: 30px;height: 3px;background-color: #fff;border-radius: 3px;position: absolute;transition-property:transform;transition-duration: 0.15s;transition-timing-function: ease; background-color: #fff;}
.hamburger-inner::before, .hamburger-inner::after {content: "";display: block; }
.hamburger-inner::before {top: -10px; }
.hamburger-inner::after {bottom: -10px; }
  
.hamburger-inner.changed, .hamburger-inner.changed:after, .hamburger-inner.changed:before {background-color: #fff;opacity:1}
  
.hamburger--collapse-r .hamburger-inner {top: auto;bottom: 0;transition-duration: .15s;transition-delay: 0;transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--collapse-r .hamburger-inner::after {top: -20px;transition: top 0.15s 0.08s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; }
.hamburger--collapse-r .hamburger-inner::before {transition: top 0.06s 0.10s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.06s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  
.hamburger--collapse-r.is-active .hamburger-inner {transform: translate3d(0, -10px, 0) rotate(45deg);transition-delay: 0.15s;transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  
.hamburger--collapse-r.is-active .hamburger-inner::after {top: 0;opacity: 0;transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.1s linear; }
  
.hamburger--collapse-r.is-active .hamburger-inner::before {top: 0;transform: rotate(90deg);transition: top 0.1s .1s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); }




/*-------------------------------------------------------------------------------------------------------------------- ABOUT */
#about { position:relative; margin:0 auto; padding:10px; background-color:#090909; }
#responsive-img1 { width:400px; height:600px; float:left; margin:10px 15px 15px 10px; }
#about ul { float:left; display:inline; }
#about ul li { display:inline; list-style:none; margin:0 6px 8px 0; white-space:nowrap; }

.wrap { display:block; }
.space { padding-left:5px; }
.sub { font-size:.35em; letter-spacing:0; font-style:italic; text-transform:none; }

/*-------------------------------------------------------------------------------------------------------------------- CONNECT */
#connect { position:relative; max-width:670px; margin:0 auto; padding:30px 10px 0 10px; }
#message { position:relative; width:400px; float:left; margin:0 0 20px 0; display:inline; }

#info { position:relative; float:left; margin:0 0 35px 0; display:inline; }
#connectInfo { line-height:1.8em; letter-spacing:.2em; font-size:1.2em; margin:3px 0 40px 0; }
#connectInfo a:hover { opacity:.6; transition:opacity 0.3s ease, transform 0.3s ease; }

.social-container { display:flex; justify-content:center; gap:10px; }
.social { width:25px; height:25px; margin:10px 5px 0 5px; display:inline; }
.social img { width:25px; height:25px; border:0; opacity:.9; transition:opacity 0.3s ease; }
.social a:hover { opacity:.6; transition:opacity 0.3s ease, transform 0.3s ease; }

/*-------------------------------------------------------------------------------------------------------------------- REEL CLOSE BUTTON */
#close { position:absolute; width:30px; height:30px; top:0; right:0; z-index:5000; display:block; float:none; cursor:pointer; margin:0; }
#close::before, #close::after { content:""; position:absolute; top:50%; left:50%; width:100%; height:3px; background-color:#bbb; transform-origin:center; transition:background-color 0.2s linear; }
#close::before { transform:translate(-50%, -50%) rotate(45deg); }
#close::after { transform:translate(-50%, -50%) rotate(-45deg); }
#close:hover::before, #close:hover::after { background-color:#fff; }

/*-------------------------------------------------------------------------------------------------------------------- MEDIA PLAYER */
#mediaWrap { position:relative; margin:0 auto; width:100%; max-width:1390px; padding-top:40px; overflow:visible; }
#mediaPlayer { position:relative; width:100%; padding:0; margin:0 auto; overflow:visible; height:auto; }
#mediaWin { position:relative; display:block; float:none; width:100%; padding:0; margin:0 auto; overflow:visible; }

#mediaInfo { position:relative; float:none; display:block; width:100%; text-align:left; white-space:nowrap; overflow:hidden; padding:10px 5px 0px 5px;  box-sizing:border-box; }
#mainInfo { position:relative; color:#fff; min-width:50%; float:left; margin-bottom:10px; text-align:left; white-space:nowrap; }
#awards { position:relative; color:#fff; float:right; display:inline; text-align:right; white-space:nowrap; }

#height { position:fixed; width:640px; margin-top:10px; text-align:left; bottom:-20em; overflow:hidden; z-index:-150; color:#232323; }
#fullDetails { position:relative; float:left; width:100%; margin-top:15px; white-space:normal; display:block; text-indent:0em; }
.tech { position:absolute; float:left; top:100%; padding:5px; display:block; text-indent:0em; }

#mediaInfo ul { display:block; }
#mediaInfo ul li { display:block; list-style:none; }


/* reel player ratio box (works for any aspect ratio) */
#mediaWin { position:relative; width:100%; overflow:hidden; }

/* creates height from width using --ar (width/height) */
#mediaWin::before { content:""; display:block; padding-top:calc(100% / var(--ar, 1.7778)); }

#mediaWin iframe,
#mediaWin video { position:absolute; top:0; left:0; width:100%; height:100%; border:0; }

/*-------------------------------------------------------------------------------------------------------------------- Z INDEX SAFETY */
#header { position:relative; z-index:10000; }
#content { position:relative; z-index:0; }

#header { position:relative; z-index:10000; }
#headerContent { position:relative; z-index:10001; }
#menu, #menu * { position:relative; z-index:10002; }

#mediaWrap, #mediaPlayer, #mediaWin { position:relative; z-index:0; }
iframe { position:relative; z-index:0; }

#mobileMenuContainer{z-index:0;}
#header{z-index:10000;}
#headerContent{z-index:10001;}
#menu{z-index:10002;}
#mobileMenuContainer{display:none;}
#mobileMenuContainer.is-open{display:block;}

/*-------------------------------------------------------------------------------------------------------------------- FOOTER */

#site-footer {
  margin-top:60px;
  padding:30px 0 40px 0;
  text-align:center;
  font-size:.85em;
  letter-spacing:.15em;
  opacity:.6;
}

#site-footer a {
  color:#fff;
  transition:opacity 150ms linear;
}

#site-footer a:hover {
  opacity:1;
}
#site-footer::before {
  content:"";
  display:block;
  width:40px;
  height:1px;
  background:#333;
  margin:0 auto 20px auto;
}

/*-------------------------------------------------------------------------------------------------------------------- LATERAL SLIDE */


@media (prefers-reduced-motion: reduce) {
  #content { transition: none !important; }
}

#content { will-change: transform, opacity; }

#content.navOutFade { transition: opacity 300ms linear; opacity: 0; }

#content.navOutLeft {
  transition: transform 260ms ease-out, opacity 260ms linear;
  transform: translateX(-8%);
  opacity: 0;
}

#content.navInFromRight {
  transform: translateX(8%);
  opacity: 0;
}

#content.navInAnimate {
  transition: transform 260ms ease-out, opacity 260ms linear;
  transform: translateX(0);
  opacity: 1;
}

/*-------------------------------------------------------------------------------------------------------------------- RESPONSIVE */
@media only screen and (max-width:1450px) {
  #headerContent { position:relative; left:31px; margin:0; }
  #page { width:100%; padding:0 4px 4px 4px; margin-left:auto; margin-right:auto; left:auto; right:auto; }
  .rCtextMobile { display:none; }
  .rCtext { font-size:2.4em; }
  #myslidesContainer { padding:0 10px; }
  #footer { height:10px; }
  #menu { display:block; }
  #menuToggle { display:none; }
}

@media only screen and (max-width:900px) {
  #headerContent { left:0; width:100%; margin:0; }
  #dp { display:block; font-size:70%; margin-top:-.8em; }
  .rCtextMobile { display:none; }
  .rCtext { font-size:2em; }
  #archive {margin:1em 1em 3.5em 0;}
  #line { display:none; }
  #sj { margin:0; text-align:center; }
  #menu { left:0; }
  #menu ul { float:none; }
  #awards { float:right; width:auto; text-align:right; }
}

@media only screen and (max-width:760px) {
  #headerContent { width:100%; margin:0; }
  #content{padding-left: 0px}
  #page { width:100%; padding:0 4px 4px 4px; margin-left:auto; margin-right:auto; left:auto; right:auto; }
  #myslidesContainer { padding:0 5px; }
  #footer { height:5px; }

  #menu { display:none; }
  #menuToggle { left:32px; top:7px; display:block; }

  .th { margin-bottom:0; }
  .th .rO { display:none; }
  .th .rC { display:none !important; }
  
  video.thumbVid { background:#000; display:block; width:100%; height:100%; }
  
  .rCtextMobile { display:block !important; margin:2px 0 20px 5px; color:#ccc; font-size:1.3em; }

  .rCtext { opacity:1; font-size:1.5em; text-align:left; }
  .rCtextTitle { text-align:left; }
  #archive {margin:3em 1em 3.5em 0;}
  #mediaInfo { font-size:1.1em; line-height:1.4em; white-space:normal; }

  #about img { display:inline; }
  #about { font-size:1em; line-height:1.5em; }
  .responsive-img { width:50%; }
  #responsive-img1 { width:200px; height:300px; }

  #connect { position:relative; max-width:370px; margin:0 auto; padding:0 10px 0 10px; }
  #awards { float:left; width:100%; text-align:left; }
}

@media only screen and (max-width:500px) {
  #sj { font-size:1.5em; }
  .rCtextMobile { margin-bottom:20px; display:block; }
  .rCtext { font-size:1.8em; }
  #archive {margin:3em 1em 3.5em 0;}
  #mediaInfo { font-size:1.1em; white-space:normal; }
  #about { font-size:16px; line-height:1.5em; }
  .responsive-img { width:50%; }
  #menu { bottom:0; right:0; display:none; }
  #content{padding-left: 0px}
  #page { width:100%; padding:0 4px 4px 4px; margin-left:auto; margin-right:auto; left:auto; right:auto; }
  #menuToggle { left:8px; top:7px; display:block; }
  #myslidesContainer { padding:0 5px; }
  #footer { height:5px; }
  #about { font-size:.8em; }
}