/* SEVENTY-SEVEN BRAND OVERRIDES
   Sourced from the live site's custom-style.php output (Wayback 2015-11-25).
   These are the authoritative font + color values that the static recreation
   reproduces in lieu of the (lost) _sr_options database rows. */


/* CUSTOM FONTS */
body { font-family: 'PT Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 21px; }
h1, h2, h3, h4, h5, h6 { font-family: 'Raleway', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: normal; }
nav#main-nav ul li > a  { font-family: 'PT Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; font-weight: normal; }


/* CUSTOM COLOR — main color is #000 on the live site */
::selection { background: #000; }
::-moz-selection { background: #000; }
::-webkit-selection { background: #000; }
input[type=submit]:hover { background: #000; }
a { color: #000; }
a.more-link:hover { background: #000; }
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { color: #000; }
nav#main-nav ul .sub-menu li a:hover { color: #000; }
#dropdown-menu { color: #000; }
#totop { background-color: #000; }
.meta_date a:hover { color: #000; }
.quote { background: #000; }
.filter ul li a:hover, .filter ul li a.active { color: #000; }
#single-pagination ul li a:hover { background-color: #000; }
#load-more a { background: #000; }
.widget ul li a { color: #000; }
.tag-list a:hover { color: #000; }
a.standard { color: #000; }
.skill .skill_bar .skill_active { background: #000; }
.toggle .toggle_title .toggle_icon { background-color: #000; }
.imgoverlay a .overlay { background-color: #000; }
.loading span { background-color: #000; }
.notfound h1 { color: #000; }
.flex-direction-nav li { background-color: #000; }
.fancybox-close { background-color: #000; }
.fancybox-prev span, .fancybox-next span { background-color: #000; }
#fancybox-overlay { background: #000; }
.fancybox-outer { background: #000; }
div.jp-volume-bar-value { background: #000; }
div.jp-play-bar { background: #000; }


/* SPACINGS — header/footer padding from live custom-style.php */
.header-inner { padding-top: 20px; padding-bottom: 20px; }
#footer-inner { padding-top: 15px; padding-bottom: 15px; }
nav#main-nav { margin-top: 0px; }
.filter { margin-top: 0px; }
.filter-seperator { margin-top: 0px; }


/* CUSTOM CSS (Theme Options) — explicit override from the live site's
   "Custom CSS" theme option. Removes the FlexSlider yellow nav background. */
.flex-direction-nav li {
	background-color: transparent;
}


/* ----------------------------------------------------------------------
   Static-recreation supplements
   These rules supply layout the upstream Mila CSS doesn't cover for our
   reduced static DOM (no WordPress sidebar/widget infrastructure).
   ---------------------------------------------------------------------- */

/* Global resets */
body { margin: 0; padding: 0; background: #0e0e0e; color: #ddd; }

/* Header — full width, 30px L/R padding, no max-width */
header { color: #fff; width: 100%; }
header .header-inner { padding: 20px 30px; max-width: none; margin: 0; box-sizing: border-box; }
#logo { display: inline-block; }
#logo img { display: block; }
.left_float { float: left; }
.right_float { float: right; }
.clearfix:after { content: ""; display: table; clear: both; }

/* Header text + nav */
header a, nav#main-nav ul li > a, #logo { color: #fff; }
nav#main-nav ul { list-style: none; margin: 0; padding: 0; display: inline-block; }
nav#main-nav ul li { display: inline-block; margin-left: 20px; }
nav#main-nav ul li > a { opacity: 0.65; text-decoration: none; }
nav#main-nav ul li:hover > a, nav#main-nav ul li.current-menu-item > a { opacity: 1; }

/* Filter dropdown in header */
.filter { display: inline-block; margin-left: 20px; position: relative; }
.filter .openfilter { display: inline-block; cursor: pointer; color: #fff; opacity: 0.65; text-decoration: none; }
.filter .openfilter:hover { opacity: 1; }
.filter ul.masonryfilter { list-style: none; margin: 0; padding: 0; display: none; position: absolute; top: 100%; right: 0; background: #000; min-width: 180px; z-index: 100; }
.filter:hover ul.masonryfilter { display: block; }
.filter ul.masonryfilter li { display: block; margin: 0; }
.filter ul.masonryfilter li a { display: block; padding: 8px 16px; color: #fff; text-decoration: none; cursor: pointer; opacity: 0.65; }
.filter ul.masonryfilter li a:hover, .filter ul.masonryfilter li a.active { color: #fff; opacity: 1; }
.filter-seperator { display: none; }

/* Loader */
#loading { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; }
#loading span { display: block; position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; margin: -60px 0 0 -60px; background: url(../images/loader-dark.gif) center center no-repeat; text-indent: -9999px; border-radius: 500px; overflow: hidden; }

/* Main section — full width, dark bg, no L/R padding.
   Top padding clears the position:fixed header (Mila's `#main { padding-top: 90px }`
   replaced with a measured-at-runtime value via JS in the index template's resize
   handler; here we set the static fallback so the grid starts below the header
   even before JS runs). */
section#main { background: #0e0e0e; width: 100%; padding: 0; padding-top: 120px; margin: 0; }
#main-inner { background: #0e0e0e; max-width: none; margin: 0; padding: 30px 0; box-sizing: border-box; }

/* Portfolio grid — Isotope manages layout in fitRows mode.
   The grid JS sizes each .masonry-item to fill the container width perfectly
   (cols = floor(containerWidth / MIN_THUMB_WIDTH); thumbWidth = containerWidth / cols)
   and calls Isotope.layout on resize. We just override the upstream
   `.masonry { width: 110% }` to 100% so nothing overflows the viewport. */
.masonry { width: 100% !important; margin: 0 !important; }
.masonry > .masonry-item { margin: 0 !important; padding: 0 !important; }
.masonry > .masonry-item.is-hidden { display: none; }
.masonry-item { position: relative; overflow: hidden; background: #1a1a1a; }
.masonry-item a { display: block; width: 100%; height: 100%; }
.masonry-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.masonry-item .overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); color: #fff; opacity: 0; transition: opacity 0.2s ease; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.masonry-item:hover .overlay { opacity: 1; }
.masonry-item .overlay .title { font-family: 'Raleway', sans-serif; font-size: 18px; text-transform: uppercase; letter-spacing: 0.1em; color: #fff; }

/* Single project pages — header is NOT fixed (overrides Mila's `header { position: fixed }`)
   so the page scrolls under a static header instead of overlaying it. The `padding-top` on
   #main is also removed since the header now flows in the document. The header background
   is also nulled out (overrides Mila's `header { background: #00a276 }`) so project pages
   blend into the dark main bg without a coloured header band. */

.entry.single-portfolio header {
  position: static !important;
  background: transparent !important;
  background-color: transparent !important;
}
.page-project section#main,
body.single-portfolio section#main { padding-top: 0; }

/* Single project + blog — dark bg, light text */
.entry.single-portfolio, .entry.single-blog { padding: 100px 30px 30px; max-width: 1280px; margin: 30px auto; color: #ddd; }
.entry.single-portfolio h1, .entry.single-blog h1 { color: #fff; }

/* Strip the explicit #000 background the global custom-style.php color block
   applies to `.flexslider` so the slider blends into the page on project pages. */
.entry.single-portfolio .flexslider {
  background: transparent !important;
  background-color: transparent !important;
}

/* Project-page slider arrows — pin to the left/right edges of the viewport
   with a white pill background. The upstream flexslider.css absolute-positions
   these inside the .flexslider container, which sits inside a 1280px-max,
   30px-padded wrapper — so by default the arrows end up indented from the
   viewport edges. Switching to position: fixed lets them sit flush with the
   browser edges and stay on screen while the user scrolls the project page.

   The LI is a wider pill that uses flex to horizontally center the 50px-wide
   `<a>` (which carries the chevron sprite) — sprite centering inside a 50px
   button is mathematically right but the chevron's asymmetric ink density
   reads as off-centre, so the pill is widened to give the icon obvious
   breathing room on both sides. */
.entry.single-portfolio .flex-direction-nav li {
  position: fixed;
  top: 50%;
  margin-top: -50px;
  width: 60px;
  height: 100px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eee !important;
  opacity: 1;
  z-index: 200;
}
.entry.single-portfolio .flex-direction-nav li:first-child { left: 0;  right: auto; }
.entry.single-portfolio .flex-direction-nav li:last-child  { right: 0; left: auto;  }
.entry.single-portfolio .flex-direction-nav li:hover {
  background: #fff !important;
  background-color: #fff !important;
}
/* Keep the dark-icon sprite on hover too — flexslider.css's default hover swaps
   to a light icon meant for the dark hover background, which would be invisible
   on white. */
.entry.single-portfolio .flex-direction-nav li .flex-prev:hover { background: url(../images/next-prev-dark.png) no-repeat -15px 0px; }
.entry.single-portfolio .flex-direction-nav li .flex-next:hover { background: url(../images/next-prev-dark.png) no-repeat -92px 0px; }

/* Video slides — videos used to render in a `.video-embed` block below the
   flexslider; they're now folded into the slides UL as their own `<li>` so
   the slider can paginate through them alongside the image slides. The
   wrapper uses the standard 16:9 aspect-ratio padding trick so the iframe
   scales with the slider width. */
.flexslider .slides > li .video-slide {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  background: #000;
}
.flexslider .slides > li .video-slide iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.entry-header h1 { font-size: 32px; margin: 0 0 10px; }
.meta { color: #888; font-size: 12px; }
.cats .cat { margin-left: 8px; color: #888; text-decoration: none; }
.flexslider { margin: 30px 0; }
.entry-content { color: #ddd; }
.entry-content a { color: #fff; text-decoration: underline; }
.back a { color: #fff; text-decoration: none; opacity: 0.65; }
.back a:hover { opacity: 1; }

/* Page title */
.page-title { font-family: 'Raleway', sans-serif; font-size: 28px; margin-bottom: 20px; color: #fff; }

/* Wrapper used inside .mainside for content pages — Mila convention */
.mainside .wrapper { max-width: 1280px; margin: 0 auto; padding: 30px; box-sizing: border-box; color: #ddd; }
.mainside .wrapper h1, .mainside .wrapper h2, .mainside .wrapper h3,
.mainside .wrapper h4, .mainside .wrapper h5, .mainside .wrapper h6 { color: #fff; }
.mainside .wrapper a { color: #fff; }

/* Column shortcodes — Mila .column .one_half / .one_third / etc. layout */
.column img { max-width: 100%; height: auto; display: block; }
.column ul.follow { list-style: none; margin: 0; padding: 0; }
.column ul.follow li { margin: 4px 0; }
.column ul.follow li a { color: #fff; text-decoration: none; }
.column ul.follow li a:hover { text-decoration: underline; }

/* Contact page — 2-column layout: grayscale Chicago map left, contact info right.
   The `#main` element gets padding-top equal to the fixed header height (~120px),
   and the footer is also position:fixed at ~60px tall.
   `#main-inner` is sized to fill the visible viewport between header and footer
   (calc(100vh - 120px - 60px)) so the map covers the full viewable area. */
.page-contact #main-inner {
  position: relative;
  height: calc(100vh - 120px - 60px);
  min-height: 400px;
  padding: 0;
}
.page-contact #map {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  background: #1a1a1a;
}
.page-contact #map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: grayscale(100%) contrast(0.95);
  -webkit-filter: grayscale(100%) contrast(0.95);
}
.page-contact .mainside {
  width: 50%;
  height: 100%;
  margin-left: 50%;
  background: transparent;
  float: none;
  overflow: auto;
  box-sizing: border-box;
}
.page-contact .mainside .wrapper { padding: 60px 30px; max-width: none; color: #ddd; }
.page-contact .mainside .wrapper a { color: #fff; }
.socials.inline { list-style: none; margin: 20px 0; padding: 0; }
.socials.inline li { display: inline-block; margin-right: 16px; }
.socials.inline li a { color: #fff; text-decoration: none; opacity: 0.65; }
.socials.inline li a:hover { opacity: 1; }

/* On narrow viewports, stack map above content (no fixed-height layout) */
@media (max-width: 720px) {
  .page-contact #main-inner { height: auto; min-height: 0; }
  .page-contact #map { position: relative; width: 100%; height: 50vh; min-height: 320px; }
  .page-contact .mainside { width: 100%; height: auto; margin-left: 0; }
}

/* Blog list */
.blog-list { list-style: none; margin: 0; padding: 0; }
.blog-list .entry-blog { padding: 20px 0; border-bottom: 1px solid #222; }
.blog-list h2 { margin: 0 0 4px; font-size: 22px; }
.blog-list h2 a { color: #fff; text-decoration: none; }
.blog-list h2 a:hover { text-decoration: underline; }
.blog-list .excerpt { margin: 12px 0; color: #ddd; }
.blog-list a.more { color: #fff; text-decoration: none; opacity: 0.65; }
.blog-list a.more:hover { opacity: 1; }

/* Video embed */
.video-embed { margin: 30px 0; }
.video-embed iframe { max-width: 100%; }

/* Footer — full width, 30px L/R padding, sprite icons, right-aligned copy */
footer { background: #000; color: #888; padding: 0; margin: 0; width: 100%; }
#footer-inner { max-width: none; margin: 0; padding: 15px 30px; box-sizing: border-box; }
footer ul.socials { list-style: none; margin: 0; padding: 0; float: left; }
footer ul.socials li { display: inline-block; margin-right: 6px; }
footer ul.socials li a.icon {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-image: url(../images/social-icons-theme.png);
  background-repeat: no-repeat;
  background-position: 0 0;
  text-indent: -9999px;
  overflow: hidden;
  opacity: 1;
}
footer ul.socials li a.icon span { display: none; }
/* Sprite is 390x60: 13 icons across × 2 rows (top: default-grey, bottom: hover-color).
   Order observed in the sprite (left to right): facebook, twitter, tumblr, vimeo,
   dribbble, ?, behance, ?, ?, linkedin, rss, googleplus, ?. */
footer ul.socials li a.icon-facebook { background-position:    0px 0; }
footer ul.socials li a.icon-twitter  { background-position:  -30px 0; }
footer ul.socials li a.icon-linkedin { background-position: -270px 0; }
footer ul.socials li a.icon-facebook:hover { background-position:    0px -30px; }
footer ul.socials li a.icon-twitter:hover  { background-position:  -30px -30px; }
footer ul.socials li a.icon-linkedin:hover { background-position: -270px -30px; }

footer .copy { float: right; color: #888; margin: 0; font-size: 12px; text-align: right; }