/* 
$desktop: 1380px
$laptop: 1199px;
$tablet: 991px;
$mobile: 767px;
$phone: 575px;
$phone5: 320px; 
*/

/* DEFAULTS */

/*

  MAIN NAV

*/


.container-nav {
  max-width: 100%;
  padding: 0px 60px 0px 15px;
}

#main-nav .navbar-brand {
  max-width: 400px; /* needs to be wider than .home-logo */ 
  padding: 0;
  transition: max-width 0.33s;
}

#main-nav .home-logo {
    height: 44px;
    /* height: auto; */
    /* width: 300px; */ /* optional - logo width */
}

#main-nav .navbar-brand.scrolled  {
  max-width: 400px; /* needs to be wider than .home-logo */ 
  padding: 0;
  transition: max-width 0.33s;
}

#main-nav .navbar {
  margin-top: 40px; /* top gutter */
  padding: 0; /* fix bootstrap padding */
  /* height: 44px; */
  transition: margin-top 0.33s;
}

#main-nav .navbar.scrolled {
  margin-top: 10px; /* top gutter */
  padding: 0; /* fix bootstrap padding */
  /* height: 44px;*/ /* logo height */
  transition: margin-top 0.33s;
}

/* 
  height of the nav background when the page is scrolled
  this should be approximately (.container-nav.padding-top) + (.container-nav.padding-bottom) + (logo.height)
  it needs to be the same in both #main-nav and #main-nav.scrolled !!!
*/
#main-nav {
  height: 120px;
  transition: height 0.33s
}

#main-nav.scrolled {
  height: 80px;
  transition: height 0.33s
}




/*

  NAV BUTTON IN TOP RIGHT

*/
/*
#main-nav #menu-main-menu .nav-item .nav-link {
 
  font-family: Helvetica LT Bold, sans-serif;
  font-size: 18px;
  font-weight: 700;
  padding: 0px 20px 30px 42px;
  transition: padding 0.33s;
}

#main-nav #menu-main-menu .nav-item .nav-link.scrolled {
   
  font-family: Helvetica LT Bold, sans-serif;
  font-size: 18px;
  font-weight: 700;
  padding: 0px 20px 0px 42px;
  transition: padding 0.33s;
}
*/


#main-nav #menu-main-menu .nav-item .nav-link {
  /* text-transform: none; */
  
  font-size: 18px;
  font-weight: 400;

  /* Y X Y WORKX */
  padding: 0px 12px 0px 60px;
  transition: padding 0.33s;
}

#main-nav #menu-main-menu .nav-item .nav-link.scrolled {
    /* text-transform: none; */
 
  font-size: 18px;
  font-weight: 400;
  padding: 0px 12px 0px 60px;
  transition: padding 0.33s;
}





/*

  VIDEO OVERLAY/CAPTIONS

*/

#video-caption { 
  bottom: 46px; 
/*   bottom: 72px;    */

  padding-left: 50px;
  visibility: "hidden";
}

.video-caption-content {
  font-weight: 600;
  font-size: 48px; /* bottom gutter */
  line-height: 52px;
  letter-spacing: .6px;
  filter: drop-shadow(0px 0px 50px rgba(0, 0, 0, 0.900));
  position: relative;
  top: -24px; /* move UP */
}

/* this removes the dropshadow from the top text - creating a stronger highlight */
#video-caption:first-of-type .video-caption-content {
  filter: none;
}
#video-caption-thumbnail-stack {
  width: 172px;
  height: 82px;
  padding-top: 24; /* keep stack from affecting caption Y positioning */
  display: block;
  margin-left: -15px; /* move left (keeps original desktop alignment) */
}

#video-caption-thumbnail-button {
  width: 172;
  height: 100%;
  padding-top: 24px; /* padding from top of thumb to bottom of text */
  padding-left: 24px;
  display: none;
  margin-left: -15px; /* move left */
}

/*
















/*

  CARDS

*/

.flex-wrap .card .card-title h3 {
  font-size: 32px;
  font-weight: 580;
  color: #000;
  line-height: 1.16;
  letter-spacing: -0.8px;
  padding-top: .9rem;
  padding-bottom: 25.6px;
  margin-bottom: 0px;
}

.flex-wrap .card .card-title h3 span {
  font-size: 32px;
  font-weight: 580;
  color: #969696;
  line-height: 1.14;
  letter-spacing: -0.8px;
  padding-top: 0;
  padding-bottom: 0px;
  margin-bottom: 25.6px;
}


/*

  SHORTCUT CARATS



/* color of the down-carat */
/* not used anymore since we just include a svg file */
/*
#more-carat svg {
  fill: rgba(1, 1, 1, 0.8);
}
*/


/*

  FOOTER

*/
footer .textwidget {
  font-size: 1.4rem;
  font-weight: 600;
  padding-top: 3px;
}

footer a {
  font-size: 1.4rem;
  font-weight: 600;
  padding-top: 0px;
}








/*

  size overrides...

*/


 /* DESKTOP */
@media (max-width: 1380px) {

}

 /* LAPTOP */
@media (max-width: 1199px) {

}

/* TABLET */
@media (max-width: 991px) {
  .container-nav {
    max-width: 100%;
    padding: 0px 24px 0px 0px;
  }
  
  #main-nav .navbar-brand {
    max-width: 140px; /* logo width */
    padding: 0;
  }

  #main-nav .home-logo {
    height: 34px;
    /* height: auto; */
  }

  #main-nav .navbar-brand.scrolled  {
    max-width: 140px; /* logo width */
    padding: 0;
  }
  
  #main-nav .navbar {
    margin-top: 24px; /* top gutter */
    padding: 0; /* fix bootstrap padding */
    height: 35px; /* logo height */
    transition: margin-top 0.33s;
  }

  #main-nav .navbar.scrolled {
    margin-top: 17px; /* top gutter */
    padding: 0; /* fix bootstrap padding */
    height: 35px; /* logo height */
    transition: margin-top 0.33s;
  }

  #main-nav {
    height: 90px;
    transition: height 0.33s
  }

  #main-nav.scrolled {
    height: 70px;
    transition: height 0.33s
  }
  
  #main-nav #menu-main-menu .nav-item .nav-link {
    /* text-transform: none; */
    font-size: 16px;
    padding: 0px 0px 8px 16px; /* bottom padding is 1/2 font size in px */
  }

  #main-nav #menu-main-menu .nav-item .nav-link.scrolled {
    /* text-transform: none; */
  font-size: 16px;
  padding: 2px 0px 0px 16px;
  transition: padding 0.33s;
}
  
  #video-caption { 
    bottom: 24px;  /* bottom gutter */
    padding-left: 24px;
  }

#video-caption { 
  bottom: 30px; 
  padding-left: 24px;
  visibility: "hidden";
}

.video-caption-content {
  font-size: 46px; /* bottom gutter */
  line-height: 48px;
  letter-spacing: 0px;
  filter: drop-shadow(0px 0px 50px rgba(0, 0, 0, 0.900));
}

/* this removes the dropshadow from the top text - creating a stronger highlight */
#video-caption:first-of-type .video-caption-content {
  filter: none;
}
#video-caption-thumbnail-stack {
  width: 172px;
  height: 82px;
  padding-top: 0; /* keep stack from affecting caption Y positioning */
  display: block;
  margin-left: -15px; /* move left (keeps original desktop alignment) */
}

#video-caption-thumbnail-button {
  width: 172;
  height: auto;
  padding-top: 100px; /* padding from top of thumb to bottom of text */
  display: none;
}










/* MOBILE HD */
@media (max-width: 767px) {
  .more-carat-img {
    display: none;
  }


  #video-caption { 
    bottom: 30px;  /* bottom gutter */
    padding-left: 24px;
  }


}

/* MOBILE */
@media (max-width: 575px) {
  .container-nav {
    max-width: 100%;
    padding: 0px 22px 0px 0px;
  }
  
  #main-nav .navbar-brand {
    max-width: 182px; /* logo width */
    padding: 0;
  }

  #main-nav .navbar-brand.scrolled  {
    max-width: 182px; /* logo width */
    padding: 0;
  }
  
  #main-nav .navbar {
    margin-top: 22px; /* top gutter */
    padding: 0; /* fix bootstrap padding */
    height: 30px; /* logo height */
    transition: margin-top 0.33s;
  }

  #main-nav .navbar.scrolled {
    margin-top: 22px; /* top gutter */
    padding: 0; /* fix bootstrap padding */
    height: 30px; /* logo height */
    transition: margin-top 0.33s;
  }

  #main-nav {
    height: 80px;
    transition: height 0.33s
  }

  #main-nav.scrolled {
    height: 80px;
    transition: height 0.33s
  }
  
  #main-nav #menu-main-menu .nav-item .nav-link {
    /* text-transform: none; */
    font-size: 16px;
    padding: 0px 0px 8px 16px; /* bottom padding is 1/2 font size in px */
    transition: padding 0.33s;
  }

  #main-nav #menu-main-menu .nav-item .nav-link.scrolled {
    /* text-transform: none; */
    font-size: 16px;
    padding: 0px 0px 8px 16px; /* bottom padding is 1/2 font size in px */
    transition: padding 0.33s;
  }
  
 #video-caption { 
    bottom: 26px;  /* bottom gutter */
    padding-left: 24px;
  }

  .video-caption-content {
    font-size: 28px;
    line-height: 34px;
    letter-spacing: 0px;
    filter: drop-shadow(0px 0px 50px rgba(0, 0, 0, 0.900));
    top: -10px; /* move UP */
  }
#video-caption-thumbnail-stack {
  width: 172px;
  height: 82px;
  padding-top: 0;
  display: block;
  margin-left: -15px;
  transform: scale(0.90);        /* shrink to 75% — adjust to taste */
  transform-origin: top left;    /* scale from its current position */
}

#video-caption-thumbnail-button {
  width: 100px;
  height: auto;
  padding-top: 16px; /* padding from top of thumb to bottom of text */
  display: none;
}




}











/* MOBILE OG */
@media (max-width: 320px) {
    
}

/*

LANDSCAPE MODES - MOBILE
https://stackoverflow.com/questions/46313640/iphone-x-8-8-plus-css-media-queries
https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

*/
/* landscape + iPad */

/*
  (max-device-width: 768px)
  might want to just use (width : 375px)??
*/
@media screen 
  and (orientation:landscape) 
  and (max-device-width: 768px) {
   
}

/* landscape + MobileHD+ (iphone 6+ etc) */
@media screen 
  and (orientation:landscape) 
  and (max-device-width: 414px) {
   
}

/* landscape + MobileHD (iPhone 6, X etc) */
@media screen 
  and (orientation:landscape) 
  and (max-device-width: 375px) {
    
}

/* landscape + Mobile */
@media screen 
  and (orientation:landscape) 
  and (max-device-width: 320px) { 
    
}




/*
MISC OVERRIDES AND FIXES
  id == #
  class == .
*/

/* fix the nav links to not pad to the right */
#main-nav #menu-main-menu {
  margin-right: 0px;
}

/* fix nav links to anchors and smooth scrolling behavior */
html {
  /* scroll-behavior: smooth; */
  overflow-y: scroll; /* has to be scroll, not auto */
  -webkit-overflow-scrolling: touch;
}
/* 
  move the padding from the bottom of the headline to the top of the work section,
  so that our anchor tag will occur visually below the navigation bar's bg
*/
#headline {
  padding-bottom: 0;
}

#work {
  padding-top: 7.5rem;
}

/*

    iOS devices running safari

  https://allthingssmitty.com/2020/05/11/css-fix-for-100vh-in-mobile-webkit/
  
*/
@supports (-webkit-touch-callout: none) {

    /*
    fix video size so that it doesn't get occluded my the bottom safari navigation  
    */
  .home #hero .hero-fullscreen {
    /* height: 100vh; */
    height: -webkit-fill-available;
  }
}




/* --- Featured Work grid: prevent rows from being vertically distributed --- */
.featured-work,
#featured-work,
.work,
.work-section {
  /* if any ancestor is using flex and centering vertically */
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

.featured-work-grid,
.work-grid,
.work-thumbnails,
.featured-work .row,
.featured-work .grid {
  /* THIS is the key for wrapped flex rows */
  align-content: flex-start !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

/* Prevent individual cards from baseline/inline quirks */
.featured-work-grid .card,
.work-grid .card,
.work-grid .work-item,
.featured-work .card {
  align-self: flex-start !important;
}

/* Remove the extra “inline image descender gap” */
.work-grid img,
.featured-work img {
  display: block;
}

body.preloader-active {
  overflow: hidden;
}



/* =========================
   Homepage card APNG rollover (replaces hover background)
   ========================= */

/* Remove the existing hover background "shape" (keep title/copy color transitions) */
#work .flex-wrap .card:hover,
#work .flex-wrap .card:focus-within{
  background-color: transparent !important;
  background: transparent !important;
}

/* Make the thumbnail link a reliable box for the animated background */
#work .flex-wrap .card .card-img-top{
  display: block;
  position: relative;
  overflow: hidden;          /* clip to thumbnail bounds */
  line-height: 0;            /* avoid inline gap */
}

/* Ensure the thumbnail image fills the box and sits above the APNG */
#work .flex-wrap .card .card-img-top img{
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 3;                /* above animated bg */
}

/* The APNG lives WHERE the old hover background lived: as the thumbnail's background */
#work .flex-wrap .card:hover .card-img-top,
#work .flex-wrap .card:focus-within .card-img-top{
  background: url("../img/rollover.apng") center calc(50% + 12px) / cover no-repeat;
}

/* If the APNG has transparency, keep the static thumbnail visible above it.
   If you ever want the APNG to be the *only* thing visible, we can fade the img on hover. */