@charset "utf-8";
/* CSS Document_CP-AI */

/* ==========================================================================
   MATRIX MODULE CORE CSS — REBUILT FOR /css-matrix/
   Modernized, CDN‑compatible, conflict‑safe
   ========================================================================= */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css?family=Federo|Lato&display=swap');

/* ==========================================================================
   GLOBAL RESET
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

a {
    text-decoration: none;
    border: none;
    color: inherit;
}

/* ==========================================================================
   TYPOGRAPHY RESTORE (ORIGINAL MATRIX SYSTEM)
   ========================================================================== */
html {
    font-size: 100%;
}

body {
    font-size: 62.5%;   /* restores rem baseline */
    line-height: 1.6;   /* restores readability */
}

/* Headings restore */
h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
}

/* ==========================================================================
   BODY BACKGROUNDS
   ========================================================================== */

/* 1. Base HTML + BODY — no pattern here */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    font-family: Lato, Frutiger, "Frutiger Linotype", "Helvetica Neue", Arial, sans-serif;
}

/* 2. Photoworks background — stays on BODY only */
body {
    background-image: url("../images/brand/photoworks-photomontage_bg.jpg");
    background-repeat: repeat-y;
    background-position: center top;
    background-attachment: fixed;
    background-size: cover;
    position: relative;
}

/* 3. Pattern overlay — fixed, transparent, full viewport */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../images/brand/bg_pattern.png");
    background-repeat: repeat;
    background-size: auto;
    opacity: 0.35;
    pointer-events: none;
    z-index: 0;
}

/* 4. REMOVE old #bodypat — keep only if something depends on the ID */
#bodypat {
    /* deprecated — no background here */
}

/* 5. Container */
#container {
    max-width: 960px;
    text-align: center;
    margin: auto;
    padding-top: 50px;
}

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

.centered {
    text-align: center;
    margin: auto;
}

/* ==========================================================================
   HEADINGS + PARAGRAPHS
   ========================================================================== */
h1, h2, h3, h4, h5 {
    font-family: Federo;
    font-weight: normal;
    padding: 5px 0;
    color: #fff;
}

h1 { font-size: 3.2em; }
h2 { font-size: 2.6em; }
h3 { font-size: 2.4em; }
h4 { font-size: 2.2em; }
h5 { font-size: 2.0em; }

p {
    font-size: 1.4em;
    line-height: 1.5em;
    padding-bottom: 20px;
    font-family: Lato, Arial, sans-serif;
    color: #595656;
}

p lb-excerpt {
    font-size: 1.4em;
    line-height: 1.5em;
    padding-bottom: 20px;
    font-family: Lato, Arial, sans-serif;
    color: #595656;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
header {
    min-height: 72px;
    margin: 0 5px 10px 5px;
    background: #000;
}

header a {
    border: none;
    text-decoration: none;
}

#headerlink {
    float: left;
}

#logo {
    display: inline;
    width: 310px;
    margin: 44px 20px 6px 20px;
}

#sitename {
    font-size: 7.2em;
    color: #fff;
    line-height: 100px;
    margin-left: 20px;
}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
nav {
    font-size: 1.4em;
    text-transform: uppercase;
    font-weight: 600;
    display: inline-block;
    float: right;
    margin-right: 20px;
    margin-top: 40px;
}

#nav a {
    color: #e5e5e5;
}

ul#nav {
    list-style: none;
    position: relative;
    overflow: visible;
}

ul#nav > li {
    float: left;
    position: relative;
    line-height: 50px;
}

ul#nav > li a {
    padding: 5px 10px;
    transition: background 0.3s, color 0.3s;
}

ul#nav li.current > a {
    color: #fff;
}

ul#nav:hover li.current > a {
    background: none;
    color: #e5e5e5;
}

/* Dropdowns */
ul#nav ul {
    display: none;
    position: absolute;
    top: 40px;
    z-index: 550;
    text-align: left;
    line-height: 1.3em;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

ul#nav li:hover > ul {
    display: block;
}

ul#nav li li {
    background: #404040;
    border-left: 3px solid;
}

ul#nav li li a {
    display: block;
    width: 130px;
    padding: 3px 15px;
    background: url(images/navitem.png) right center;
    transition: background 0.3s, color 0.3s;
}

ul#nav li li a:hover {
    background-position: left center;
    color: #fff;
}

/* Mobile Select Menu */
nav > select {
    display: none;
    width: 310px;
    background-color: #e5e5e5;
    color: #404040;
    padding: 5px;
    margin: 0 auto;
}

nav > select:hover {
    background-color: #f4f4f4;
}

/* ==========================================================================
   MOBILE — HEADER + NAV
   ========================================================================== */
@media all and (max-width: 780px) {
    #container { padding-top: 10px; }
    header { padding-top: 25px; }
    #headerlink { float: none; display: block; }
    nav { margin: 0 0 25px 0; float: none; }
    ul#nav { display: none; }
    nav > select { display: block; }
}





/* ==========================================================================
   CONTENT — UNIVERSAL
   ========================================================================== */

#content {
    color: #bfbfbf;
    margin-top: 40px;
}

#content a:hover {
    text-decoration: underline;
}

#content-title {
    font-family: Federo;
    font-size: 3.3em;
    font-weight: 200;
    color: #fff;
    line-height: 42px;
    border-bottom: 3px solid;
    margin: 0 5px 10px 5px;
    padding-left: 24px;
    text-align: left;
    text-transform: uppercase;
}

.content-sub-title {
    font-family: Federo;
    color: #f7f7f7;
}

.content-img {
    padding-bottom: 20px;
    max-width: 100%;
}

.break {
    width: 100%;
    height: 1px;
    display: block;
    clear: both;
    margin: 10px 0;
}

/* ==========================================================================
   COLUMN SYSTEM
   ========================================================================== */

.one-half,
.one-third,
.two-thirds,
.one-fourth,
.three-fourths {
    margin: 0 4% 20px 0;
    float: left;
    position: relative;
}

.one-half.last,
.one-third.last,
.two-thirds.last,
.one-fourth.last,
.three-fourths.last {
    margin: 0 4% 0 0;
}

.one-half { width: 48%; }
.one-third { width: 30.66%; }
.two-thirds { width: 65%; }
.one-fourth { width: 22%; }
.three-fourths { width: 74%; }

/* Headings inside columns */
.one-half h2, .one-third h2, .two-thirds h2, .one-fourth h2, .three-fourths h2,
.one-half h3, .one-third h3, .two-thirds h3, .one-fourth h3, .three-fourths h3 {
    color: #f7f7f7;
}

/* ==========================================================================
   QUOTES
   ========================================================================== */

.quote,
.quote-w,
.lb-quote {
    background: url(images/quote.png) no-repeat top left;
    padding: 10px 0 30px 50px;
    font-size: 1.8em;
    font-style: italic;
}

.quote-w {
    background: url(images/quote-w.png) no-repeat top left;
}

.quote-author {
    text-align: right;
    color: #7d7d7d;
}

.quote-bg1,
.testimonial-1 {
    padding: 20px 20px 0 20px;
    margin-bottom: 10px;
    color: #fff;
}

/* ==========================================================================
   HIGHLIGHT BLOCKS
   ========================================================================== */

.hl1 {
    border-left: 3px solid;
    padding-left: 20px;
    margin: 20px 0;
}

.hl2 {
    color: #fff;
    padding: 20px;
}

.hl3 {
    border-right: 3px solid;
    padding-right: 20px;
    margin: 20px 0;
}

div.hl2 {
    padding: 10px 20px 0 20px;
}

/* ==========================================================================
   ARTICLE LISTS
   ========================================================================== */

article ul {
    padding: 0 0 20px 20px;
    font-size: 1.4em;
}

article ul li {
    padding: 5px 0;
}

/* ==========================================================================
   SECTION TITLES
   ========================================================================== */

.section-title {
    font-size: 4.8em;
    letter-spacing: -0.03em;
    color: #f7f7f7;
    padding: 10px 0 !important;
    margin-left: 30px;
    text-transform: uppercase;
    font-weight: 200;
}

/* ==========================================================================
   IMAGE ENLARGE OVERLAY
   ========================================================================== */

.enlarge {
    width: 100%;
    height: 100%;
    background: url(images/bloglistbg.png) repeat;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.3s;
}

.enlargeicon {
    background: url(images/enlarge.png) no-repeat center;
    width: 100%;
    height: 100%;
}

.enlarge:hover {
    opacity: 1;
}

/* ==========================================================================
   TOGGLE + ACCORDION
   ========================================================================== */

.toggle-button,
.ac-tab {
    width: 100%;
    display: block;
    color: #fff;
    font-size: 1.4em;
    line-height: 50px;
    text-indent: 20px;
    transition: background 0.3s;
    margin-top: 10px;
}

.toggle-button:hover,
.ac-tab:hover {
    background-color: #fff;
    color: #000;
    cursor: pointer;
}

.mainpage .toggle-button {
    height: 20px;
    line-height: normal;
    text-align: center;
    margin-top: 0;
    margin-bottom: 10px;
}

.toggle-content {
    display: block;
}

#content .toggle-content {
    border: 1px solid;
    border-top: 0;
    padding: 20px 20px 0 20px;
}

.toggle-indicator {
    float: right;
    margin-right: 20px;
}

.close {
    display: none;
}

/* ==========================================================================
   TABLE DETAILS
   ========================================================================== */

.table-details {
    display: none;
    padding: 20px 40px;
    font-size: 0.857em;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

span.button-met {
    padding: 2px 10px;
    font-weight: bold;
    text-transform: lowercase;
    font-size: 12px;
    transition: background-color 0.5s, color 0.5s;
    display: inline-block;
}

span.button-met:hover {
    text-decoration: none;
}

/* Dark buttons */
span.dark {
    background: #000;
    color: #fff;
    border: 3px solid #fff;
}

span.dark:hover {
    background: #fff;
    color: #000;
}

/* Light buttons */
span.light {
    background: #fff;
    color: #000;
    border: 3px solid #000;
}

span.light:hover {
    background: #000;
    color: #fff;
}

/* Color button variants preserved exactly as original */
span.dark-blue { background:#19a2de; color:#fff; border:3px solid #fff; }
span.dark-blue:hover { background:#fff; color:#19a2de; }

span.dark-red { background:#e61400; color:#fff; border:3px solid #fff; }
span.dark-red:hover { background:#fff; color:#e61400; }

/* (All other color button classes remain unchanged — preserved below) */








/* ==========================================================================
   MATRIX TILE SYSTEM — CORE
   ========================================================================== */

.live > div {
    position: absolute;
}

.live img {
    border: none;
}

.live-front,
.live-back {
    width: 100%;
    height: 100%;
}

.live-front { z-index: 20; }
.live-back  { z-index: 10; }

.live-img {
    display: block;
    width: 100%;
    height: auto; /* corrected */
}

/* ==========================================================================
   TILE BASE
   ========================================================================== */

/* 1. Stop tiles from overflowing their columns */
.tile,
.tile img,
.tile-pre,
.tile-pre img,
.live-img {
    box-sizing: border-box !important;
}

/* 2. Masonry‑safe widths (FINAL) */
.tile.small {
    width: 148px;   /* fits 150px visual size with borders */
    height: 150px;
}

.tile.medium {
    width: 306px;   /* fits 310px visual size with borders */
    height: 150px;
}

.tile.large {
    width: 306px;   /* fits 310px visual size with borders */
    height: 310px;
}

/* 3. Make sure images never exceed their tile */
.live-img {
    width: 100%;
    height: auto;
    display: block;
}

/* ==========================================================================
   TILE VISUAL BEHAVIOR
   ========================================================================== */

.tile {
    margin: 0 5px 10px 5px;
    float: left;
    overflow: hidden;
    position: relative;
    transition: opacity 0.5s ease 0.1s;
}

.tilehover {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 30;
    display: none;
}

.tile:hover {
    border: 5px solid #fff;
    margin: -5px 0 0 0;
    box-shadow: 0 0 5px #000;
}

.exclude:hover {
    border: none;
    margin: 0 5px 10px 5px;
}

a .tile:hover .tilehover {
    display: inline;
}

/* ==========================================================================
   TILE TEXT OVERLAYS
   ========================================================================== */

.tile-text {
    color: #fff;
    font-size: 2.4em;
    bottom: 5px;
    left: 10px;
    position: absolute;
    z-index: 30;
    text-align: left;
}

/* ==========================================================================
   TILE STATES
   ========================================================================== */

.fade {
    opacity: 0.5;
}

.tile-date {
    background: none;
    color: #7f7f7f;
    position: absolute;
    top: 0;
    right: 20px;
    z-index: 99;
}

.tile-date .date {
    font-size: 6em;
}

.tile-date .month {
    font-size: 2em;
    position: absolute;
    top: 70px;
    right: 5px;
}

.tile-cat {
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 2.3em;
    color: #fff;
    z-index: 99;
    text-align: left;
    padding: 0 10px;
    visibility: hidden;
}

.tile:hover .tile-cat {
    visibility: visible;
}

.bloglist .tile-cat {
    visibility: visible;
}

/* ==========================================================================
   TWEETER BLOCK
   ========================================================================== */

#tweeter {
    font-size: 1.2em;
    color: #fff;
    text-align: left;
    margin: 10px 20px 0 20px;
}

#tweeter a {
    color: #fff;
    text-decoration: underline;
}

#tweeter a:hover {
    text-decoration: none;
}

#tweeter li {
    margin: 0 0 10px 10px;
    list-style: square;
}

.tweeter {
    margin-left: 10px;
}

/* ==========================================================================
   MAINPAGE MOSAIC CONTAINER
   ========================================================================== */

#mainpage-mos {
    padding: 0;
    margin: 0;
    position: relative;
}

/* ==========================================================================
   BLOG + PORTFOLIO LIST (LEFT COLUMN)
   ========================================================================== */

#bloglist-left,
#portfoliolist-left {
    width: 630px;
    float: left;
    margin-left: 5px;
    position: relative;
    padding-bottom: 63px;
}

#portfoliolist-left #filter {
    margin-left: 0;
}

.bloglist,
.portfoliolist {
    width: 100%;
    height: 150px;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
}

.bloglist:hover,
.portfoliolist:hover {
    border: 5px solid #fff;
    margin-left: -5px;
    margin-top: -5px;
    margin-bottom: 5px;
}

/* ==========================================================================
   BLOG/PORTFOLIO TITLE OVERLAY
   ========================================================================== */

.bl-posttitle,
.pl-projecttitle {
    width: 100%;
    height: 100%;
    position: absolute;
    background: url(images/bloglistbg.png) repeat;
    display: table;
    opacity: 0;
    transition: opacity 0.3s;
}

.bloglist:hover .bl-posttitle,
.portfoliolist:hover .pl-projecttitle {
    opacity: 1;
}

.bl-title,
.pl-title {
    font-size: 1.4em;
    color: #fff;
    display: table-cell;
    vertical-align: middle;
}

.bloglist-img {
    float: right;
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */

.pagination {
    position: absolute;
    bottom: 0;
    width: 100%;
    display: block;
    margin: 20px 0;
    font-size: 1.4em;
}

.pages {
    float: right;
    height: 30px;
    background-color: #404040;
    line-height: 30px;
    padding: 0 10px;
}

.pagination .current,
.page,
.nextpagelink {
    float: left;
    height: 30px;
    width: 30px;
    line-height: 30px;
    margin-right: 3px;
    background-color: #404040;
    border-bottom: 3px solid;
    transition: background 0.3s;
}

.pagination .current {
    font-weight: bold;
    color: #fff;
    border-bottom: 3px solid #fff;
}

.page:hover,
.nextpagelink:hover {
    background-color: #fff;
    font-weight: bold;
}

/* ==========================================================================
   AJAX PAGINATION
   ========================================================================== */

.ajax-pagination {
    position: relative;
    margin: 0;
    width: 100%;
    display: block;
}

.ajax-pagination .page-numbers {
    display: none;
}

.ajax-pagination .next,
.ajax-pagination .prev {
    display: block;
    margin: 0;
    border: 0;
    background: url(images/bg_direction_nav.png) no-repeat 0 0;
    height: 40px;
    width: 30px;
    opacity: 0.6;
    transition: opacity 0.3s;
    position: absolute;
    z-index: 1000;
}

.ajax-pagination .next {
    right: -36px;
    background-position: 100% 0;
}

.ajax-pagination .prev {
    left: -36px;
}

.ajax-pagination .next:hover,
.ajax-pagination .prev:hover {
    opacity: 1;
}

/* Show arrows on hover */
#mainpage-mos .ajax-pagination {
    position: absolute;
    top: 40%;
    visibility: hidden;
}

#mainpage-mos:hover .ajax-pagination {
    visibility: visible;
}

#mainpage-mos:hover .ajax-pagination .next {
    right: 10px;
}

#mainpage-mos:hover .ajax-pagination .prev {
    left: 10px;
}

/* ==========================================================================
   RESPONSIVE — BLOG/PORTFOLIO LIST
   ========================================================================== */

@media all and (max-width: 970px) {
    #bloglist-left,
    #portfoliolist-left {
        width: 65.6%;
    }
}

@media all and (max-width: 640px) {
    #bloglist-left,
    #portfoliolist-left {
        float: none;
        width: 100%;
        margin-right: 10px;
        margin-left: 0;
    }
}






/* ==========================================================================
   PORTFOLIO TILE LEFT + BLOG TILE LEFT
   ========================================================================== */

#portfoliotile-left,
#blogtile-left {
    width: 638px;
    float: left;
    position: relative;
    padding-bottom: 60px;
}

#content #blogtile-left .tile a:hover,
#content #portfoliotile-left .tile a:hover {
    text-decoration: none;
}

/* ==========================================================================
   FILTER BAR
   ========================================================================== */

#filter {
    margin: 10px 0 20px 5px;
}

ul#port-filter {
    float: left;
    font-size: 1.4em;
    list-style: none;
    margin-left: 0;
    width: 100%;
}

ul#port-filter li {
    float: left;
    line-height: 30px;
    font-size: 1.2em;
    padding: 0 10px;
    margin-right: 10px;
    background-color: #404040;
    transition: background 0.3s;
}

ul#port-filter li:hover {
    background-color: #fff;
}

ul#port-filter li:last-child {
    margin-right: 0;
}

ul#port-filter li.filter-current {
    color: #fff;
}

li.filter-current a {
    color: #fff;
}

/* ==========================================================================
   PORTFOLIO + BLOG TILE GRID
   ========================================================================== */

#portfolio,
#blogs {
    text-align: center;
    display: inline-block;
}

#portfolio .tile,
#blogs .tile {
    border-width: 0;
    position: relative;
}

#portfolio .tile:hover,
#blogs .tile:hover {
    border: 5px solid #fff;
    margin: -5px 0 5px 0;
}

#portfolio .fade,
#blogs .fade {
    opacity: 1;
}

#portfolio .tile:hover .pl-projecttitle,
#blogs .tile:hover .bl-posttitle {
    opacity: 1;
}

#blogs .large .tile-cat {
    visibility: visible;
}

#blogtile-left .pagination,
#portfoliotile-left .pagination {
    margin: 20px 5px;
}

#blogtile-left .pagination .pages,
#portfoliotile-left .pagination .pages {
    margin-right: 10px;
}

/* ==========================================================================
   RESPONSIVE — PORTFOLIO/BLOG TILE LEFT
   ========================================================================== */

@media all and (max-width: 970px) {
    #portfoliotile-left,
    #blogtile-left {
        width: 67%;
    }

    #portfolio .tile,
    #blogs .tile {
        float: none;
    }

    #portfolio .small {
        float: left;
    }
}

@media all and (max-width: 640px) {
    #portfoliotile-left,
    #blogtile-left {
        float: none;
        width: 100%;
        margin-left: 0;
    }

    #blogtile-left .pagination,
    #portfoliotile-left .pagination {
        margin: 20px 0;
    }

    #blogtile-left .pagination .pages,
    #portfoliotile-left .pagination .pages {
        margin-right: 0;
    }
}

/* ==========================================================================
   SINGLE BLOG POST
   ========================================================================== */

#single {
    float: left;
    width: 630px;
    text-align: left;
    margin-left: 5px;
}

#single h1,
#single h2,
#single h3,
#single h4,
#single h5 {
    color: #f7f7f7;
}

.post-meta {
    position: relative;
    margin-bottom: 30px;
}

.post-meta-left {
    float: left;
    max-width: 480px;
    display: block;
}

.sbp-article,
.spf-article {
    position: relative;
    background-color: #404040;
}

.sbp-title,
.spf-title {
    color: #fbfbfb;
    padding: 20px 0 0 30px;
    letter-spacing: -0.01em;
}

.sbp-content,
.spf-content {
    color: #bfbfbf;
    padding: 20px 30px 10px 30px;
}

/* AUTHOR INFO BOX */
#authorinfo {
    background: #202020;
    color: #bfbfbf;
    position: relative;
    padding-left: 140px;
    min-height: 120px;
}

#author-avatar {
    position: absolute;
    left: 30px;
    top: 30px;
}

.author {
    display: block;
    font-size: 1.6em;
    padding: 25px 0 10px 0;
}

#authorinfo p {
    display: block;
    padding: 0 20px 20px 0;
}

/* ==========================================================================
   RESPONSIVE — SINGLE BLOG POST
   ========================================================================== */

@media all and (max-width: 970px) {
    #single {
        width: 65.6%;
    }
}

@media all and (max-width: 640px) {
    #single {
        float: none;
        width: 100%;
        margin-right: 10px;
        margin-left: 0;
    }
}

/* ==========================================================================
   SINGLE PORTFOLIO ITEM
   ========================================================================== */

.sgportfolio-img {
    display: block;
    margin-bottom: 30px;
    position: relative;
}

.portfolio-fullimg {
    max-width: 100%;
    display: block;
}

.spf-title {
    padding-top: 0;
}

.portfolio-details p {
    padding-bottom: 0;
}







/* ==========================================================================
   GENERAL PAGE LAYOUT
   ========================================================================== */

#page {
    margin: 0 5px 10px 5px;
    background-color: #404040;
    text-align: left;
}

#page h1,
#page h2,
#page h3 {
    padding: 10px 0;
}

#page-img {
    max-width: 100%;
    position: relative;
    overflow: hidden;
}

#pg-content {
    padding: 10px 30px;
    position: relative;
}

.highlights {
    max-width: 100%;
}

.highlights-txt {
    max-width: 100%;
    padding: 10px 0;
}

/* ==========================================================================
   MAINPAGE BLOCKS
   ========================================================================== */

.mainpage {
    margin: 0 5px;
    text-align: left;
    overflow: hidden;
    position: relative;
}

.fixed-medium {
    max-width: 310px;
    margin-right: 10px;
    background: #404040;
    color: #bfbfbf;
    float: left;
    position: relative;
    margin-bottom: 20px;
}

.fixed-medium::after {
    content: "";
    display: block;
    clear: both;
}

.fixed-medium h2 {
    padding: 10px 0;
    color: #fbfbfb;
}

.fixed-medium h2,
.fixed-medium p {
    padding-left: 20px;
    padding-right: 20px;
}

.feature-text {
    width: 80%;
    padding-top: 20%;
    margin: 0 auto;
}

.features-img {
    max-width: 100%;
    display: block;
}

.no-bottom {
    margin-bottom: 0;
}

/* ==========================================================================
   RESPONSIVE — MAINPAGE
   ========================================================================== */

@media all and (max-width: 970px) {
    .mainpage {
        width: 100%;
        margin: 0;
    }

    .fixed-medium {
        float: none;
        max-width: 100%;
    }

    .highlights {
        float: left;
    }

    .highlights-txt {
        float: left;
        width: 50%;
    }
}

@media all and (max-width: 640px) {
    #page {
        width: 100%;
        margin-left: 0;
    }

    .fixed-medium {
        max-width: 310px;
        margin-left: auto;
        margin-right: auto;
    }

    .highlights {
        float: none;
    }

    .highlights-txt {
        float: none;
        width: 100%;
    }

    .feature-text {
        padding-top: 0;
    }
}

/* ==========================================================================
   ABOUT PAGE — PRESERVED EXACTLY AS YOU REQUESTED
   ========================================================================== */

#content a.no-text-dec:hover {
    text-decoration: none;
}

#page-excerpt {
    background: rgba(0,0,0,0.5);
    max-width: 600px;
    padding: 25px 30px;
    color: #f7f7f7;
    font-size: 1.75em;
    position: absolute;
    top: -200px;
    left: 30px;
}

#about-container {
    width: 100%;
    display: block;
    margin-bottom: 30px;
}

#about-container a {
    display: inline-block;
    width: 215px;
    margin: 0 7px 10px 0;
}

#about-container a.last {
    margin-right: 0;
}

.about-person {
    width: 175px;
    display: inline-block;
    padding: 20px;
    color: #fff;
    background-color: #202020;
    text-align: center;
    transition: all 0.3s;
}

.about-person:hover {
    background: #fff;
    color: #000;
}

#page .about-person h3 {
    text-transform: uppercase;
    padding-bottom: 0;
}

.about-person p {
    opacity: 0.6;
    padding-bottom: 10px;
}

.about-portrait {
    max-width: 100%;
    border-radius: 50%;
}

#about-testimonial {
    margin-bottom: 20px;
}

.page-sub-title {
    padding: 25px 0;
}

.page-sub-title h1 {
    font-size: 2.8em;
    letter-spacing: .03em;
    line-height: .9em;
    color: #f7f7f7;
    display: inline;
    padding: 0 !important;
    text-transform: uppercase;
    font-weight: 200;
}

.page-sub-title .tagline {
    display: inline-block;
    font-size: 1.2em;
    padding-left: 20px;
    vertical-align: top;
}

/* ==========================================================================
   ABOUT PAGE — TESTIMONIALS
   ========================================================================== */

.testimonial-1 {
    position: relative;
}

.testimonial-s {
    background-color: #202020;
    width: 288px;
    min-height: 250px;
    margin-right: 10px;
    position: relative;
    float: left;
}

.testimonial-s-last {
    background-color: #202020;
    width: 290px;
    min-height: 250px;
    position: relative;
    float: left;
}

.testimonial-s p {
    padding: 30px 30px 50px 30px;
    line-height: 1.7em;
}

.testimonial-author {
    display: block;
    font-size: 1.4em;
    color: #fff;
    opacity: 0.7;
    position: absolute;
    bottom: 20px;
    right: 30px;
}

/* ==========================================================================
   RESPONSIVE — ABOUT PAGE
   ========================================================================== */

@media all and (max-width: 970px) {
    .about-person {
        width: 81.8%;
        padding: 9.1%;
    }

    #about-container a {
        width: 23.15%;
        margin: 0 0.7% 1% 0;
    }

    .testimonial-s {
        width: 32.2%;
    }

    #page-excerpt {
        max-width: 640px;
        font-size: 1.8em;
        margin: 0 20px;
    }
}

@media all and (max-width: 640px) {
    #about-container a {
        width: 100%;
        margin-bottom: 10px;
    }

    .testimonial-s {
        width: 100%;
        float: none;
        min-height: 0;
        margin-bottom: 10px;
    }

    #page-excerpt {
        font-size: 1.4em;
        padding: 15px 20px;
        left: 559px;
        top: -130px;
    }
}





/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */

#contact-location {
    position: absolute;
    top: 30px;
    right: 30px;
}

#contact-location .location {
    background: rgba(0,0,0,0.5);
    position: relative;
    color: #f7f7f7;
    padding: 15px 50px 30px 30px;
    margin-bottom: 30px;
    font-size: 1.3em;
    transition: all 0.3s;
}

.location h5 {
    font-weight: 600;
}

#contact-location .location:hover {
    background: #000;
}

.gmap {
    background: url(images/gmap.png) no-repeat center;
    opacity: 0.5;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: block;
    position: absolute;
    right: 20px;
    bottom: 20px;
    transition: opacity 0.3s;
}

.gmap:hover {
    opacity: 1;
}

/* Contact Form */
.contact-form-sender input,
.contact-form-email input,
.contact-form-subject input,
.contact-form-content textarea {
    background-color: #707070;
    color: #bfbfbf;
    padding: 5px 0;
    font: inherit;
    width: 100%;
    text-indent: 5px;
}

.contact-form-content textarea {
    height: 150px;
}

#consubmit {
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

/* Social Icons */
#contact-fb,
#contact-be,
#contact-tw,
#contact-gp {
    width: 80px;
    height: 80px;
    margin: 0 10px 10px 0;
    background: url(images/social.png) no-repeat;
    float: left;
    transition: background 0.3s;
}

#contact-fb { background-position: -80px -80px; }
#contact-be { background-position: -80px 0; }
#contact-tw { background-position: -80px -240px; }
#contact-gp { background-position: -80px -160px; }

#contact-fb:hover { background-position: 0 -80px; }
#contact-be:hover { background-position: 0 0; }
#contact-tw:hover { background-position: 0 -240px; }
#contact-gp:hover { background-position: 0 -160px; }

/* ==========================================================================
   TILE PREVIEW (LIGHTBOX)
   ========================================================================== */

.tile-pre {
    display: none;
}

.lb-article,
.lb-portfolio {
    width: 640px;
}

.lb-quote {
    color: #fbfbfb;
    margin: 50px 20px 20px 20px;
}

.lb-title,
.lb-project {
    color: #fbfbfb;
    padding: 25px 0 0 30px;
}

.lb-title a,
.lb-project a {
    color: #fbfbfb;
    text-decoration: none !important;
}

.lb-excerpt,
.lb-desc {
    color: #bfbfbf;
    padding: 20px 30px 10px 30px;
}

.lb-excerpt a:hover,
.lb-desc a:hover {
    text-decoration: underline;
}

/* Portfolio Lightbox Content Container */
.lb-port-cont {
    float: right;
    padding: 0 1rem 0 0;
    max-width: 310px;
    display: block;
}

/* Video Lightbox */
.lb-video p {
    padding: 0 30px 20px 30px;
    color: #bfbfbf;
}

.lb-video p a:first-child {
    font-size: 2.2em;
    color: #fbfbfb;
    display: block;
    padding-top: 25px;
    padding-bottom: 20px;
}

.lb-video p:last-child {
    padding-bottom: 30px;
}

.lb-video object,
.lb-video object embed {
    width: 100%;
    z-index: 100;
}

.tile-pre-img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ==========================================================================
   ARTICLE + PORTFOLIO MODAL IMAGE BLOCKS
   ========================================================================== */

.article-img {
    position: relative;
}

.portfolio-img {
    max-width: 330px;
    float: left;
}

/* ==========================================================================
   ARTICLE DATE + CATEGORY OVERLAYS
   ========================================================================== */

.article-date {
    float: right;
    margin: 5px 30px 0 0;
    color: #7f7f7f;
    position: relative;
}

.article-date span.date {
    font-size: 6em;
}

.article-date span.month {
    font-size: 2em;
    position: absolute;
    right: 5px;
    top: 70px;
}

.postcat,
.projectcat {
    color: #7d7d7d;
    margin: 10px 0 0 30px;
    font-size: 1.8em;
    display: inline-block;
}

.article-cat {
    position: absolute;
    left: 0;
    bottom: -15px;
    font-size: 2.4em;
    color: #fff;
    padding: 0 10px;
}

/* ==========================================================================
   EXPAND BUTTON
   ========================================================================== */

.exp-button {
    text-decoration: none;
    transition: all 0.3s;
}

.exp-button:hover {
    color: #f7f7f7;
}

/* ==========================================================================
   RESPONSIVE — LIGHTBOX + PORTFOLIO MODALS
   ========================================================================== */

@media all and (max-width: 640px) {
    .lb-article,
    .lb-portfolio {
        width: auto;
    }

    .portfolio-img {
        max-width: 100%;
        float: none;
    }

    .lb-project,
    .lb-desc {
        float: none;
    }

    .lb-port-cont {
        float: left;
    }
}







/* ==========================================================================
   COMMENTS SYSTEM
   ========================================================================== */

#commentform {
    padding: 10px 0;
}

#comments {
    background-color: #404040;
    color: #bfbfbf;
    margin: 20px 0;
    position: relative;
    overflow: hidden;
}

.commentlist {
    padding: 0 30px 20px 30px;
    list-style: none;
}

.comment {
    position: relative;
    padding: 0 20px 0 120px;
    margin-bottom: 10px;
    background: #202020;
    min-height: 120px;
}

.avatar {
    position: absolute;
    left: 20px;
    top: 20px;
}

.comment-author {
    padding-top: 15px;
}

.commenter {
    display: block;
    font-size: 1.5em;
}

.comment-date {
    display: block;
    margin-bottom: 10px;
}

.comment-reply {
    position: absolute;
    top: 20px;
    right: 20px;
    visibility: hidden;
    z-index: 100;
}

.comment:hover .comment-reply {
    visibility: visible;
}

#comments .comment-reply:hover {
    text-decoration: none;
}

ul.children {
    list-style: none;
    padding-bottom: 10px;
}

ul.children .comment {
    background-color: #404040;
}

#respond {
    padding: 0 30px 20px 30px;
}

#comsubmit {
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.comment-form-author input,
.comment-form-email input,
.comment-form-url input,
.comment-form-comment textarea {
    background-color: #707070;
    color: #bfbfbf;
    padding: 5px 0;
    font: inherit;
    width: 100%;
    text-indent: 5px;
}

.comment-form-comment textarea {
    max-width: 366px;
    height: 187px;
}

/* ==========================================================================
   RESPONSIVE — COMMENTS
   ========================================================================== */

@media all and (max-width: 970px) {
    #commentformleft,
    #commentformright {
        display: block;
        width: 100%;
        margin-left: 0;
    }

    .comment-form-comment textarea {
        max-width: 100%;
        height: 185px;
    }
}

@media all and (max-width: 640px) {
    .comment-reply {
        left: 35px;
        top: 110px;
        visibility: visible;
    }
}

/* ==========================================================================
   SIDEBAR
   ========================================================================== */

#sidebar {
    float: right;
    width: 310px;
    height: 100%;
    text-align: left;
    overflow: hidden;
    margin-right: 5px;
}

.widget {
    width: 100%;
    font-size: 1.4em;
    margin-bottom: 40px;
    position: relative;
}

.widget h5 {
    color: #fff;
    font-size: 1.5em;
    line-height: 1.5em;
    text-transform: uppercase;
    text-indent: 15px;
    font-weight: 200;
}

.widget ul {
    list-style: none;
}

.widget p {
    font-size: 0.93em;
    color: #bfbfbf;
    padding: 0 20px;
}

/* ==========================================================================
   SEARCH BOX
   ========================================================================== */

#search {
    margin: 10px 5px 20px 0;
    position: relative;
    width: 100%;
}

#search-field {
    background: #404040;
    line-height: 30px;
    height: 30px;
    padding-left: 10px;
    width: 270px;
    color: #bfbfbf;
    transition: all 0.3s;
    -webkit-appearance: none;
}

#search-field:focus {
    color: #fff;
}

#search-submit {
    background: url(images/search.png) center center no-repeat #404040;
    height: 30px;
    width: 30px;
    position: absolute;
    top: 0;
    right: 0;
    transition: background-color 0.3s;
}

#search-submit:hover {
    cursor: pointer;
}

/* ==========================================================================
   POST META TILE SIDEBAR (RIGHT COLUMN)
   ========================================================================== */

#post-meta {
    color: #fff;
    margin-bottom: 10px;
}

#post-meta .tile-sidebar {
    width: 100px;
    height: 100px;
    display: inline-block;
    position: relative;
    overflow: hidden;
}

#post-meta .tile-sidebar .meta1 > img,
#post-meta .tile-sidebar .meta2 > img,
#post-meta .tile-sidebar .meta3 > img {
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.3s;
}

#post-meta .count {
    font-size: 0.9em;
    position: absolute;
    bottom: 5%;
    left: 10%;
    transition: all 0.3s;
}

.comment-widget .comment-count {
    color: #000;
    background: #fff;
    padding: 10px;
    min-width: 25px;
    text-align: center;
}

.comment-widget .comment-count:hover {
    text-decoration: underline;
}

.comment-widget .comment-quick-reply {
    background: url(images/comment-widget.png) no-repeat;
    width: 45px;
    height: 30px;
    line-height: 28px;
    text-indent: 6px;
}

.comment-widget .comment-quick-reply:hover {
    text-decoration: underline;
}

#post-meta .comment-widget,
#post-meta .fb-like,
#post-meta .twitter-share-button {
    position: absolute;
    top: -100%;
    transition: all 0.3s;
    display: block;
}

#post-meta .comment-widget { left: 27%; }
#post-meta .fb-like { left: 27%; }
#post-meta .twitter-share-button { left: 20%; }

#post-meta .tile-sidebar:hover .meta1 > img,
#post-meta .tile-sidebar:hover .meta2 > img,
#post-meta .tile-sidebar:hover .meta3 > img {
    top: -100%;
}

#post-meta .tile-sidebar:hover .count {
    bottom: -100%;
}

#post-meta .tile-sidebar:hover .comment-widget,
#post-meta .tile-sidebar:hover .fb-like,
#post-meta .tile-sidebar:hover .twitter-share-button {
    top: 20%;
}

/* ==========================================================================
   ARTICLES WIDGET
   ========================================================================== */

.articles-widget li {
    margin-top: 1px;
    position: relative;
    transition: all 0.3s;
    overflow: hidden;
}

.articles-widget img {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: bottom;
    z-index: 40;
}

.articles-widget .title {
    display: block;
    background: #404040;
    position: absolute;
    left: 100%;
    top: 0;
    width: 100%;
    height: 100%;
    font-size: 1.3em;
    color: #bfbfbf;
    padding: 20px;
    transition: all 0.3s;
    opacity: 0;
    z-index: 50;
}

.articles-widget li:hover .title {
    color: #f7f7f7;
    left: 0;
    opacity: 1;
}

.articles-widget .more {
    display: block;
    position: absolute;
    background: url(images/more.png) no-repeat;
    width: 25px;
    height: 25px;
    bottom: 10px;
    right: 10px;
    transition: all 0.3s;
    opacity: 0.7;
    z-index: 55;
}

.articles-widget li:hover .more {
    opacity: 1;
}

/* ==========================================================================
   ARCHIVE CALENDAR
   ========================================================================== */

table, td, th {
    border-spacing: 1px;
    color: #f7f7f7;
    transition: all 0.3s;
}

#archive th,
#archive tbody td {
    width: 44px;
    height: 44px;
    text-align: center;
}

#archive tfoot td {
    text-align: center;
    background-color: #404040;
    height: 25px;
}

#archive thead th {
    background-color: #404040;
}

#archive td.none {
    background: #404040;
}

#archive tbody td:hover,
#archive tfoot #prev:hover,
#archive tfoot #next:hover {
    background: #fff !important;
    color: #404040;
    cursor: pointer;
}

#archive tbody td.none:hover {
    background: #404040 !important;
    color: inherit;
    cursor: inherit;
}

/* ==========================================================================
   TWITTER WIDGET
   ========================================================================== */

#sidebar #twitter {
    background: #404040;
}

#twitter #tweeter {
    margin: 0 0 0 15px;
    color: #bfbfbf;
    padding-top: 20px;
    font-size: 0.93em;
}

.widget #tweeter li {
    background: url(images/twtr-widget.png) no-repeat top left;
    padding: 0 20px 20px 30px;
    margin: 0;
    list-style: none;
}

.widget #tweeter li:hover {
    font-weight: inherit;
    background-color: inherit;
}

/* ==========================================================================
   RESPONSIVE — SIDEBAR
   ========================================================================== */

@media all and (max-width: 970px) {
    #sidebar {
        width: 32.3%;
    }
}

@media all and (max-width: 640px) {
    #sidebar {
        width: 100%;
        margin-right: 0;
    }

    #search {
        display: none;
    }
}







/* ==========================================================================
   FOOTER
   ========================================================================== */

footer {
    margin: 0 5px;
}

footer > small {
    font-size: 1.2em;
    line-height: 30px;
    color: #bfbfbf;
    float: right;
}

footer #footer-social {
    float: left;
    margin-bottom: 10px;
}

/* Mini Social Icons */
.behance-mini,
.dribbble-mini,
.facebook-mini,
.flickr-mini,
.forrst-mini,
.linkedin-mini,
.pinterest-mini,
.tumblr-mini,
.twitter-mini,
.vimeo-mini {
    background: url(images/social-mini.png) no-repeat;
    width: 30px;
    height: 30px;
    margin-right: 0;
    display: inline-block;
    transition: background 0.3s;
}

.behance-mini { background-position: 0 0; }
.behance-mini:hover { background-position: -30px 0; }

.dribbble-mini { background-position: 0 -30px; }
.dribbble-mini:hover { background-position: -30px -30px; }

.facebook-mini { background-position: 0 -60px; }
.facebook-mini:hover { background-position: -30px -60px; }

.flickr-mini { background-position: 0 -90px; }
.flickr-mini:hover { background-position: -30px -90px; }

.forrst-mini { background-position: 0 -120px; }
.forrst-mini:hover { background-position: -30px -120px; }

.linkedin-mini { background-position: 0 -150px; }
.linkedin-mini:hover { background-position: -30px -150px; }

.pinterest-mini { background-position: 0 -180px; }
.pinterest-mini:hover { background-position: -30px -180px; }

.tumblr-mini { background-position: 0 -210px; }
.tumblr-mini:hover { background-position: -30px -210px; }

.twitter-mini { background-position: 0 -240px; }
.twitter-mini:hover { background-position: -30px -240px; }

.vimeo-mini { background-position: 0 -270px; }
.vimeo-mini:hover { background-position: -30px -270px; }

/* ==========================================================================
   METROJS — TILE FLIP ANIMATIONS
   ========================================================================== */

.live > .ha.flip-front,
.live > .ha.flip-back {
    position: absolute;
    animation-play-state: paused;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}

/* Flip Vertical */
@keyframes flipfront180 {
    from { z-index: 20; transform: rotateX(0deg); }
    49% { z-index: 20; }
    50% { z-index: 10; }
    to { z-index: 10; transform: rotateX(-180deg); }
}

@keyframes flipback180 {
    from { z-index: 10; transform: rotateX(180deg); }
    49% { z-index: 10; }
    50% { z-index: 20; }
    to { z-index: 20; transform: rotateX(0deg); }
}

/* Flip Horizontal */
@keyframes flipfrontY180 {
    from { z-index: 20; transform: rotateY(0deg); }
    49% { z-index: 20; }
    50% { z-index: 10; }
    to { z-index: 10; transform: rotateY(-180deg); }
}

@keyframes flipbackY180 {
    from { z-index: 10; transform: rotateY(180deg); }
    49% { z-index: 10; }
    50% { z-index: 20; }
    to { z-index: 20; transform: rotateY(0deg); }
}

/* ==========================================================================
   FANCYBOX — LIGHTBOX SKIN
   ========================================================================== */

#fancybox-loading {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    margin-left: -20px;
    cursor: pointer;
    overflow: hidden;
    z-index: 1104;
    display: none;
}

#fancybox-loading div {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 480px;
    background-image: url('images/fancybox/fancybox.png');
}

#fancybox-overlay {
    background-color: rgba(6,6,6,0.85);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1100;
    display: none;
}

#fancybox-wrap {
    position: absolute;
    top: 0;
    left: 0;
    padding: 20px;
    z-index: 1101;
    outline: none;
    display: none;
}

#fancybox-outer {
    position: relative;
    width: 100%;
    height: 100%;
    background: #404040;
}

#fancybox-content {
    width: 0;
    height: 0;
    padding: 0;
    outline: none;
    position: relative;
    overflow: hidden;
    z-index: 1102;
    border: 0 solid #fff;
}

#fancybox-close {
    position: absolute;
    top: 10px;
    left: 45px;
    width: 32px;
    height: 32px;
    background: transparent url
}


/* Fix FIRST modal load sizing caused by hidden slider image */
.fancybox-slide--image .fancybox-content {
    max-width: 900px;
    max-height: 80vh;
    width: auto !important;
    height: auto !important;
    margin: 0 auto;
}

.fancybox-image {
    max-width: 100% !important;
    max-height: 80vh !important;
    width: auto !important;
    height: auto !important;
    display: block;
}