@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');


/* 
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wdth,wght@8..144,112.5,100..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Space+Grotesk:wght@300..700&display=swap');
*/

	
/*!
Theme Name: Portfolio
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: portfolio
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Portfolio is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

html {line-height: 1.15;-webkit-text-size-adjust: 100%;}body {margin: 0;}main {display: block;}h1 {font-size: 2em;margin: 0.67em 0;}hr {box-sizing: content-box;height: 0;overflow: visible;}pre {font-family: monospace, monospace;font-size: 1em;}a {background-color: transparent;}abbr[title] {border-bottom: none;text-decoration: underline;text-decoration: underline dotted;}b, strong {font-weight: bolder;}code, kbd, samp {font-family: monospace, monospace;font-size: 1em;}small {font-size: 80%;}sub, sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;}sub {bottom: -0.25em;}sup {top: -0.5em;}img {border-style: none;}button, input, optgroup, select, textarea {font-family: inherit;font-size: 100%;line-height: 1.15;margin: 0;}button, input {overflow: visible;}button, select {text-transform: none;}button, [type="button"], [type="reset"], [type="submit"] {-webkit-appearance: button;}button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {border-style: none;padding: 0;}button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {outline: 1px dotted ButtonText;}fieldset {padding: 0.35em 0.75em 0.625em;}legend {box-sizing: border-box;color: inherit;display: table;max-width: 100%;padding: 0;white-space: normal;}progress {vertical-align: baseline;}textarea {overflow: auto;}[type="checkbox"], [type="radio"] {box-sizing: border-box;padding: 0;}[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {height: auto;}[type="search"] {-webkit-appearance: textfield;outline-offset: -2px;}[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}::-webkit-file-upload-button {-webkit-appearance: button;font: inherit;}details {display: block;}summary {display: list-item;}template {display: none;}[hidden] {display: none;}*, *::before, *::after {box-sizing: inherit;}html {box-sizing: border-box;}body, button, input, select, optgroup, textarea {color: #404040;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;font-size: 1rem;line-height: 1.5;}h1, h2, h3, h4, h5, h6 {clear: both;}p {margin-bottom: 1.5em;}dfn, cite, em, i {font-style: italic;}blockquote {margin: 0 1.5em;}address {margin: 0 0 1.5em;}pre {background: #eee;font-family: "Courier 10 Pitch", courier, monospace;line-height: 1.6;margin-bottom: 1.6em;max-width: 100%;overflow: auto;padding: 1.6em;}code, kbd, tt, var {font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;}abbr, acronym {border-bottom: 1px dotted #666;cursor: help;}mark, ins {background: #fff9c0;text-decoration: none;}big {font-size: 125%;}body {background: #fff;}hr {background-color: #ccc;border: 0;height: 1px;margin-bottom: 1.5em;}ul, ol {margin: 0 0 1.5em 3em;}ul {list-style: disc;}ol {list-style: decimal;}li > ul, li > ol {margin-bottom: 0;margin-left: 1.5em;}dt {font-weight: 700;}dd {margin: 0 1.5em 1.5em;}embed, iframe, object {max-width: 100%;}img {height: auto;max-width: 100%;}figure {margin: 1em 0;}table {margin: 0 0 1.5em;width: 100%;}a {color: #4169e1;}a:visited {color: #800080;}a:hover, a:focus, a:active {color: #191970;}a:focus {outline: thin dotted;}a:hover, a:active {outline: 0;}button, input[type="button"], input[type="reset"], input[type="submit"] {border: 1px solid;border-color: #ccc #ccc #bbb;border-radius: 3px;background: #e6e6e6;color: rgba(0, 0, 0, 0.8);line-height: 1;padding: 0.6em 1em 0.4em;}button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover {border-color: #ccc #bbb #aaa;}button:active, button:focus, input[type="button"]:active, input[type="button"]:focus, input[type="reset"]:active, input[type="reset"]:focus, input[type="submit"]:active, input[type="submit"]:focus {border-color: #aaa #bbb #bbb;}input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea {color: #666;border: 1px solid #ccc;border-radius: 3px;padding: 3px;}input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="range"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="time"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="color"]:focus, textarea:focus {color: #111;}select {border: 1px solid #ccc;}textarea {width: 100%;}.main-navigation {display: block;width: 100%;}.main-navigation ul {display: none;list-style: none;margin: 0;padding-left: 0;}.main-navigation ul ul {box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);float: left;position: absolute;top: 100%;left: -999em;z-index: 99999;}.main-navigation ul ul ul {left: -999em;top: 0;}.main-navigation ul ul li:hover > ul, .main-navigation ul ul li.focus > ul {display: block;left: auto;}.main-navigation ul ul a {width: 200px;}.main-navigation ul li:hover > ul, .main-navigation ul li.focus > ul {left: auto;}.main-navigation li {position: relative;}.main-navigation a {display: block;text-decoration: none;}.menu-toggle, .main-navigation.toggled ul {display: block;}@media screen and (min-width: 37.5em) {.menu-toggle {display: none;}.main-navigation ul {display: flex;}}.site-main .comment-navigation, .site-main .posts-navigation, .site-main .post-navigation {margin: 0 0 1.5em;}.comment-navigation .nav-links, .posts-navigation .nav-links, .post-navigation .nav-links {display: flex;}.comment-navigation .nav-previous, .posts-navigation .nav-previous, .post-navigation .nav-previous {flex: 1 0 50%;}.comment-navigation .nav-next, .posts-navigation .nav-next, .post-navigation .nav-next {text-align: end;flex: 1 0 50%;}.sticky {display: block;}.post, .page {margin: 0 0 1.5em;}.updated:not(.published) {display: none;}.page-content, .entry-content, .entry-summary {margin: 1.5em 0 0;}.page-links {clear: both;margin: 0 0 1.5em;}.comment-content a {word-wrap: break-word;}.bypostauthor {display: block;}.widget {margin: 0 0 1.5em;}.widget select {max-width: 100%;}.page-content .wp-smiley, .entry-content .wp-smiley, .comment-content .wp-smiley {border: none;margin-bottom: 0;margin-top: 0;padding: 0;}.custom-logo-link {display: inline-block;}.wp-caption {margin-bottom: 1.5em;max-width: 100%;}.wp-caption img[class*="wp-image-"] {display: block;margin-left: auto;margin-right: auto;}.wp-caption .wp-caption-text {margin: 0.8075em 0;}.wp-caption-text {text-align: center;}.gallery {margin-bottom: 1.5em;display: grid;grid-gap: 1.5em;}.gallery-item {display: inline-block;text-align: center;width: 100%;}.gallery-columns-2 {grid-template-columns: repeat(2, 1fr);}.gallery-columns-3 {grid-template-columns: repeat(3, 1fr);}.gallery-columns-4 {grid-template-columns: repeat(4, 1fr);}.gallery-columns-5 {grid-template-columns: repeat(5, 1fr);}.gallery-columns-6 {grid-template-columns: repeat(6, 1fr);}.gallery-columns-7 {grid-template-columns: repeat(7, 1fr);}.gallery-columns-8 {grid-template-columns: repeat(8, 1fr);}.gallery-columns-9 {grid-template-columns: repeat(9, 1fr);}.gallery-caption {display: block;}.infinite-scroll .posts-navigation, .infinite-scroll.neverending .site-footer {display: none;}.infinity-end.neverending .site-footer {display: block;}.screen-reader-text {border: 0;clip: rect(1px, 1px, 1px, 1px);clip-path: inset(50%);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute !important;width: 1px;word-wrap: normal !important;}.screen-reader-text:focus {background-color: #f1f1f1;border-radius: 3px;box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);clip: auto !important;clip-path: none;color: #21759b;display: block;font-size: 0.875rem;font-weight: 700;height: auto;left: 5px;line-height: normal;padding: 15px 23px 14px;text-decoration: none;top: 5px;width: auto;z-index: 100000;}#primary[tabindex="-1"]:focus {outline: 0;}.alignleft {float: left;margin-right: 1.5em;margin-bottom: 1.5em;}.alignright {float: right;margin-left: 1.5em;margin-bottom: 1.5em;}.aligncenter {clear: both;display: block;margin-left: auto;margin-right: auto;margin-bottom: 1.5em;}



/*------------------------------
 * 
BASIC STUFF
 * 
------------------------------*/


p,
p:empty,
.post,
.page,
.page-content,
.entry-content,
.entry-summary {
  margin: 0;
}
figure {
  margin: 0;
}
p {
margin-bottom: 1em;
}

::selection {
  background: #404040;
  color: #fff;
}

/*------------------------------
 * 
SCROLLING
 * 
------------------------------*/

@media (prefers-reduced-motion: no-preference) {
html:focus-within,
body:focus-within {
  scroll-behavior: smooth;
}
}




/*------------------------------
 * 
VARIABLES
 * 
------------------------------*/

:root {
  --radius: 5px;
  --radius: 0px;

}



/*------------------------------
 * 
FONTS
 * 
------------------------------*/


body {
  line-height: 1.6;
	font-size: .875rem;
font-family: "Syne", "SF Pro Text", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
	font-family: "Inter", "SF Pro Text", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
font-optical-sizing: auto;
font-variation-settings: "slnt" 0;
font-style: normal;
font-weight: 400;
}
@media all and (min-width: 700px) {
body {
font-size: .8125rem
}
}

p,
button,
input,
select,
optgroup,
textarea {

}




h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 .66em;
  padding: 0;
  border: 0;
	font-weight: 200;
	font-weight: 650;
letter-spacing: -.01em;
/* 	  font-family: "Space Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
		  font-weight: 425; */
}

/* h3,
h4,
h5,
h6 {
letter-spacing: 0.022em;
} */
	/* p,
.header-nav,
.footer-nav {
  font-size: 13px;
} 

h1 {
  font-size: max(1.75rem, 2vw);
}
h2 {
	font-size: max(1.75rem, 1.75vw);
}
h3 {
font-size: max(1.1rem, 1vw);
}
*/


h1 {
font-size: 2.027em;
line-height: 1.125;
letter-spacing: -.015em;
}
h2 {
font-size: 1.802em;
line-height: 1.166;
}
h3 {
font-size: 1.602em;
line-height: 1.2;
}
h4 {
font-size: 1.424em;
line-height: 1.175;
}
h5 {
font-size: 1.266em;
line-height: 1.466;
}
h6 {
font-size: 1.175em;
line-height: 1.5;
}

small {
font-size: 0.833em;
}
b, strong {
  font-weight: 600;
}

@media all and (min-width: 700px) {
	h1 {
font-size: 2.2em;
line-height: 1.125;
letter-spacing: -.015em;
}
h2 {
font-size: 2em;
line-height: 1.166;
}
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  hanging-punctuation: first last;
}


.services-list-text {
font-weight: 600;
}

/*------------------------------
 * 
LINKS
 * 
------------------------------*/


a, a:link {
  position: relative;
  text-decoration: none;
  width: 100%;
border-bottom: 1px solid #ccc;
	color: inherit;
	  padding-bottom: 1px;
}

a:after {
  content: '';
  position: absolute;
  width: 0;
  height: 1px;
	bottom: -1px;
	  right: 0;
  display: block;
	background: #404040;
  transition: width .25s ease;
  -webkit-transition: width .25s ease;
}

a:hover:after{
  width: 100%;
  left: 0;
  background: #404040;
}

a:visited, a:active {
	color: inherit;
}
a:focus {
    color: #eee;
  background: #404040;
  }

@supports selector(:focus-visible) {
a:focus-visible {
    color: #eee;
  background: #404040;
  }
a:focus {
    color: inherit;
  background: 0 0;
  }
}




/*------------------------------
 * 
SQUARE BOX SVG ICONS * 
------------------------------*/

svg .box {
stroke: #dedede;
	stroke-width: 8px;
	stroke-linejoin: round;
	transition: stroke .25s ease;
}
svg.ext-link-small-icon .box {
	stroke-width: 4px;
}


svg .line-border {
stroke: #fff;
	stroke-width: 6px;
	transition: stroke .25s ease;
}


svg.close-icon .line-border,
svg.run-icon .line-border {
stroke-linecap: square;
}
svg.close-icon .box {
stroke-width: 0;
}

svg .line {
stroke: #404040;
	stroke-width: 2px;
	transition: stroke .25s ease;
}


svg.ext-link-small-icon .line-border {
	stroke-width: 5px;
}
svg.ext-link-small-icon .line {
	stroke-width: 1.33px;
}


a:hover svg .box {
stroke: #404040;
}
button:hover svg .box {
stroke: #404040;
}


@media screen and (min-width: 1124px) {
	svg .box {
	stroke-width: 10px;
}
	svg.ext-link-small-icon .box {
	stroke-width: 5px;
}
}



/*------------------------------
 * 
SMALL EXTERNAL LINK ICON - PUTTING IT HERE FOR NOW
 * 
------------------------------*/

.ext-link-small-icon {
margin: -3px 0 0 5px;
}




/*------------------------------
 * 
GRID PAGES: GRID LAYOUT
 * 
------------------------------*/
.grid-wrapper {
background: #fff;
}
.grid-wrapper:nth-of-type(even) {
background: #f8f8f8;
}

.grid {
display: grid;
grid-auto-flow: row dense;
grid-template-columns: 1fr;
gap: 20px;
padding: 20px max(20px, 3vw); /* 20px for when we stack more than one grid; this value is equal to gap */
width: 100%;
max-width: 1920px;
margin: 0 auto;
}

.grid-wrapper:first-of-type .grid {
padding-top: max(20px, 3vw); /* when we only have a grid at the start of the page */
}
.grid-wrapper:last-of-type .grid {
padding-bottom: max(20px, 3vw); /* when we only have a grid at the end of the page */
}

.grid-wrapper .links-bar + .grid {
padding-top: 0; /* when we have a links bar in the first grid at the start of the page (usually the 'back' option) */
}

.grid.hero {
padding-bottom: max(20px, 3vw);
}

/* .grid-wrapper .grid + .lightbox {
  padding-bottom: calc(20px - (max(20px, 3vw) / 2)); when we have a lightbox in the last grid at the end of the page (image popups)
}
 */


@media all and (min-width: 700px) {
.grid {
grid-template-columns: repeat(2, 1fr);
gap: 25px;
padding: 25px max(20px, 3vw);
}
}
@media all and (min-width: 1124px) {
.grid {
grid-template-columns: repeat(3, 1fr);
gap: 30px;
padding: 30px max(20px, 3vw);
}
}
@media all and (min-width: 1600px) {
.grid {
grid-template-columns: repeat(4, 1fr);
gap: 50px;
padding: 50px max(20px, 3vw);
}
.grid.hero {
grid-template-columns: repeat(8, 1fr);
}
}



/*------------------------------
 * 
GRID PAGES: GRID CARDS LAYOUT FOR SINGLE, DOUBLE-WIDTH AND DOUBLE-HEIGHT ITEMS
 * 
------------------------------*/

.grid .card {
overflow:hidden;
border-radius: var(--radius);
width: 100%; /* 100% rather than 100vw beacuse of possible scrollbar */
height: calc(100vw - (2 * max(20px, 3vw))); /* make them more or less square */
}

.grid .header,
.grid .footer,
.grid .project-text {
height: auto; /* for overflowing text. here the grid is only 1 column wide, so there's no issue with aligning to other items */
}


@media all and (min-height: 700px) {
.grid .double-height {
height: 80vh; /* double the height only when there's enough viewport height to make it workable */
}
}



@media all and (min-width: 700px) {
.grid .card {
height: calc(((100vw - (2 * max(20px, 3vw))) - 25px) / 2); /* make them more or less square */
}

.grid .header,
.grid .footer,
.grid .project-text {
height: auto;
min-height: calc(((100vw - (2 * max(20px, 3vw))) - 25px) / 2);
}

.grid .width-2 {
grid-column: span 2;
}
.grid .height-2 {
grid-row: span 2;
height: calc(((((100vw - (2 * max(20px, 3vw))) - 25px) / 2) * 2) + 25px);
}
.grid .width-full {
grid-column: span 2;
height: calc(((((100vw - (2 * max(20px, 3vw))) - 25px) / 2) * 2) + 25px);
}
.grid .square-2x2 {
grid-column: span 2;
grid-row: span 2;
height: calc(((((100vw - (2 * max(20px, 3vw))) - 25px) / 2) * 2) + 25px); /* make them more or less square */
}

.grid.hero .card.project-image,
.grid.hero .card.header {
grid-column: span 2;
height: 84vh;
}
.grid.hero .card.header {
height: auto;
min-height: 0;
}	
}


@media all and (min-width: 700px) and (max-width: 1023px) and (orientation: portrait) {
.grid.hero .card.project-image {
height: calc((100vw - (2 * max(20px, 3vw))) - 25px);
}
}

@media all and (min-width: 1024px) and (max-width: 1123px) {
.grid.hero .card.project-image,
.grid.hero .card.header {
grid-column: span 1;
height: 84vh;
}
}


@media all and (min-width: 1124px) {
.grid .card {
height: calc(((100vw - (2 * max(20px, 3vw))) - 60px) / 3); /* make them more or less square */
}

.grid .header,
.grid .footer,
.grid .project-text {
height: auto;
min-height: calc(((100vw - (2 * max(20px, 3vw))) - 60px) / 3)
}

.grid .height-2,
.grid .square-2x2,
.grid .width-full {
height: calc(((((100vw - (2 * max(20px, 3vw))) - 60px) / 3) * 2) + 30px);
}
.grid .width-full {
grid-column: span 3;
}
.grid.hero .card.project-image {
height: 84vh;
}
.grid.hero .card.header {
grid-column: span 1;
height: 84vh;
}
}

@media all and (min-width: 1600px) {
.grid .card {
height: calc(((100vw - (2 * max(20px, 3vw))) - 150px) / 4); /* make them more or less square. note that gap value has changed */
}

.grid .header,
.grid .footer,
.grid .project-text {
height: auto;
min-height: calc(((100vw - (2 * max(20px, 3vw))) - 150px) / 4);
}

.grid .height-2,
.grid .square-2x2,
.grid .width-full {
height: calc(((((100vw - (2 * max(20px, 3vw))) - 150px) / 4) * 2) + 50px);
}
.grid .width-full {
grid-column: span 4;
}
.grid.hero .card.project-image {
grid-column: span 5;
}
.grid.hero .card.header {
grid-column: span 3;
}
}


@media all and (min-width: 1920px) {
.grid .card {
height: calc(((1920px - (2 * max(20px, 3vw))) - 150px) / 4); /* make them more or less square. note that max-width value has been reached */ 
}

.grid .header,
.grid .footer,
.grid .project-text {
height: auto;
min-height: calc(((1920px - (2 * max(20px, 3vw))) - 150px) / 4);
}

.grid .height-2,
.grid .square-2x2,
.grid .width-full {
height: calc(((((1920px - (2 * max(20px, 3vw))) - 150px) / 4) * 2) + 50px);
}
}





/* @media all and (min-width: 2460px) {
  .grid {
    grid-template-columns: repeat(5, 1fr);
  }
	.grid .card {
width: calc(((100vw - (2 * max(20px, 3vw))) - 100px) / 5);
height: calc(((100vw - (2 * max(20px, 3vw))) - 100px) / 5);
	}
.grid .hero-image {
width: calc(((((100vw - (2 * max(20px, 3vw))) - 100px) / 5) * 3) + 50px);
	height: 84vh;
	}
	
	.grid .card.header,
.grid .card.footer,
.grid .card.text {
	  height: auto;
	min-height: calc(((100vw - (2 * max(20px, 3vw))) - 100px) / 5);
}
	
			.grid .hero-image + .card.header {
				grid-column: span 2;
				width: calc(((((100vw - (2 * max(20px, 3vw))) - 100px) / 5) * 2) + 25px);
	height: 84vh;
	}
.grid .double-width {
width: calc(((((100vw - (2 * max(20px, 3vw))) - 100px) / 5) * 2) + 25px);
}
.grid .double-height {
height: calc(((((100vw - (2 * max(20px, 3vw))) - 100px) / 5) * 2) + 25px);
	}
}

@media all and (min-width: 3200px) {
  .grid {
    grid-template-columns: repeat(6, 1fr);
  }
		.grid .card {
width: calc(((100vw - (2 * max(20px, 3vw))) - 125px) / 6);
height: calc(((100vw - (2 * max(20px, 3vw))) - 125px) / 6);
	}
.grid .hero-image {
width: calc(((((100vw - (2 * max(20px, 3vw))) - 125px) / 6) * 4) + 75px);
	grid-column: span 4;
	height: 84vh;
	}
		.grid .card.header,
.grid .card.footer,
.grid .card.text {
	  height: auto;
	min-height: calc(((100vw - (2 * max(20px, 3vw))) - 125px) / 6);
}
			.grid .hero-image + .card.header {
				width: calc(((((100vw - (2 * max(20px, 3vw))) - 125px) / 6) * 2) + 25px);
	height: 84vh;
	}
.grid .double-width {
width: calc(((((100vw - (2 * max(20px, 3vw))) - 125px) / 6) * 2) + 25px);
}
.grid .double-height {
height: calc(((((100vw - (2 * max(20px, 3vw))) - 125px) / 6) * 2) + 25px);
	}
}
 */
/*------------------------------
 * 
GRID PAGES: GRID CARDS CONTENT
 * 
------------------------------*/

.card-inner {
	position: relative;
	width: 100%;
  height: 100%;
}

.project-image .card-inner {
  line-height: 0;
}



.card-inner img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}


/*------------------------------
 * 
GRID PAGES: CARDS WITH PROJECT IMAGE & INFO 
 * 
------------------------------*/
/* 
.grid .card.project .card-inner h3 {
line-height: 1.33;
}
 */

.project-image .card-inner h3 {
  font-size: 1.33em;
  line-height: 1.25;
  font-weight: 550;
  letter-spacing: 0;
}

.project-image .card-inner a.project-details {
  position: relative;
  width:100%;
  height: 100%;
  top: -100%;
  bottom: 0;
  left: 0;
  right: 0;
    border: 0;
  padding: 4vw;
padding-bottom: 3vw;
  text-align: center;
display: flex;
  justify-content: center;
  flex-direction: column;
  color: #fff;
background: rgba(50,50,50,.66);
  z-index: 10;
opacity: 1;
transition: opacity .2s ease;
}





@media (hover: hover) {
	/* hover effect where supported - otherwise project details are visible */
	.project-image .card-inner a.project-details {
opacity: 0;
	}
.project-image .card-inner .project-icon .box {
	transition-delay: .05s;
}
	
	/* zoom effect instead of hover (where supported) */
@supports (clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%)) or (-webkit-clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%)) {

.project-image .card-inner a.project-details {
opacity: 1;
transition: none;
}

.project-image .card-inner a.project-details {
webkit-clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
transition: clip-path .33s ease;
}
.project-image .card-inner:hover a.project-details,
.project-image .card-inner:active a.project-details,
.project-image .card-inner:focus a.project-details {
webkit-clip-path: polygon(50% -50%, 150% 50%, 50% 150%, -50% 50%);
clip-path: polygon(50% -50%, 150% 50%, 50% 150%, -50% 50%);
}
}
}




.project-image .card-inner:hover a.project-details,
.project-image .card-inner:active a.project-details,
.project-image .card-inner:focus a.project-details {
opacity: 1;
}

.project-image .card-inner a.project-details::after {
content: none;
}



.project-image .card-inner h3 {
  min-height: 50px;
}

/* .project-image .card-inner .project-icon {
margin-top: 15px;
} */

.project-image .card-inner .project-icon .box {
  stroke: #aaa;
  stroke-width: 8px;
}
.project-image .card-inner:hover a.project-details .project-icon .box,
.project-image .card-inner:active a.project-details .project-icon .box,
.project-image .card-inner:focus a.project-details .project-icon .box{
  stroke: #fff;
}
.project-image .card-inner .project-icon .line {
  stroke: #fff;
/*   stroke-width: 2px; */
}
.project-image .card-inner .project-icon .line-border {
  stroke: #5b5b5b;
/* stroke-width: 6px; */
}






/*------------------------------
 * 
GRID PAGES: HEADER, FOOTER & TEXT ONLY CARDS
 * 
------------------------------*/

.grid .card.border,
.grid .header,
.grid .footer,
.grid .project-text {
  border: thin solid #ccc;
}

.grid .header .card-inner,
.grid .footer .card-inner,
.grid .project-text .card-inner {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: max(25px, 3vw);
}


.header-details-wrap,
.footer-details-wrap,
.text-details-wrap {
  flex-grow: 1;
display: flex;
  flex-direction: column;
	justify-content: center;
	justify-content: start;
padding: max(25px, 6vw) 0 max(25px, 8vw);
}

.footer-details-wrap {
	justify-content: space-between;
/* 	gap: 3em; */
padding: .5em 0 1em;
}




.header-details,
.footer-details,
.text-details {
  padding-bottom: 2em;
}
.header-details:last-of-type,
.footer-details:last-of-type,
.text-details:last-of-type {
  padding-bottom: 0;
}

.header-details p:last-of-type,
.footer-details p:last-of-type,
.text-details p:last-of-type {
  margin-bottom: 0;
}


/* following for the header and links with icons */
.header-details {
display: flex;
  flex-direction: column;
  margin-right: auto;
}
.header-details-title,
.header-details-info {
	display: flex;
	flex-direction: column;
}

.header-details p,
.footer-details p,
.text-details p {
	padding-right: 1.5vw;
	max-width: 55ch;
}
.header-details .services-list-text p {
margin-bottom: .1em
}

.header-details .link-item-text + svg {
transform: scale(0.66); /* reducing the size of the bigger svg renders better than creating a new smaller version */
/* 	transform-origin: left; */
}



@media all and (min-width: 600px) and (max-width: 699px) {
.grid .header .card-inner,
.grid .footer .card-inner,
.grid .project-text .card-inner {
padding: max(30px, 1vw);
}
	.header-details-wrap,
.footer-details-wrap,
.text-details-wrap {
padding: max(30px, 3vw) 0 max(30px, 4vw);
}
}

@media all and (min-width: 700px) {

.header-details-wrap,
.footer-details-wrap,
.text-details-wrap {
padding: 1em 0 1.5em; /* this can be the minimum required to make it look okay at smaller sizes; otherwise the content here is aligned to the centre */
}
.grid.hero .header-details-wrap {
justify-content: start;
}
/* .footer-details-wrap,
.text-details-wrap {
padding: 0 0 1.5em;
} */
}

@media all and (min-width: 700px) and (max-width: 1023px) {
.grid.hero .header-details-info {
flex-direction: row;
gap: 24px;
}
.grid.hero .header-details-info .header-details {
width: 50%;
}
.grid.hero .header-details-info > .header-details + .header-details {
margin-top: 13px;
}
}

@media all and (min-width: 1124px) {
.grid .header .card-inner,
.grid .footer .card-inner,
.grid .project-text .card-inner {
padding: max(30px, 1vw);
}

}





/* moving header link styling onto a span instead of a, so the border only fits under the text part of the link */
.header-details a {
  width: auto;
  margin-bottom: 1em;
	margin-right: auto;
	display: flex;
	padding: 0;
	border: 0;
}
.header-details a::after {
content: none;
}

.header-details a span {
position: relative;
  text-decoration: none;
  border: 0;
  color: inherit;
  padding: 0;
}
.header-details a span::after {
  content: '';
  position: absolute;
  width: 0;
  height: 1px;
  bottom: -1px;
  right: 0;
  display: block;
  background: #404040;
  transition: width .25s ease;
  -webkit-transition: width .25s ease;
}
.header-details a:hover span::after {
  width: 100%;
  left: 0;
  background: #404040;
}






.header-nav {
  display: flex;
  flex-direction: row;
}

ul.header-menu-list,
ul.footer-menu-list {
	flex: auto;
  list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
  flex-direction: column;
  gap: 8px;
}

.header-nav-wrap {
  margin-bottom: 30px;
}

.header-nav-wrap + .header-details-wrap,
.footer-nav-wrap + .footer-details-wrap {
  justify-content: end;
}


.footer-nav {
	display: flex;
  flex-direction: column;
	gap:20px;
}
/* moving footer nav link styling onto a span instead of a, so the border only fits under the text part of the link */
.footer-nav a {
  border: 0;
	padding: 0;
  display: flex;
  align-content: center;
}
.footer-nav a::after {
  content: none;
}



.footer-row {
  display: flex;
	gap:20px;
}
.footer-row a {
display: flex;
}
.footer-row a:nth-child(2) {
justify-content: end;
}

/* .footer-row .link-item-text {
margin: 0 0 0 .66em;
}

.footer-row a:nth-child(2) .link-item-text {
margin: 0 .66em 0 0;
} */

.footer-row svg {
transform: scale(0.66); /* reducing the size of the bigger svg renders better than creating a new smaller version */
/* 	transform-origin: left; */
}
/* .footer-row a:nth-child(2) .link-item-text + svg {
	transform-origin: right;
} */

.footer-row .previous-link-icon {
  margin-left: -19px;
	margin-right: 4px;
}
.footer-row .next-link-icon {
	margin-left: 0;
  margin-right: -18px;
}
.footer-row .contact-link-icon {
  margin-left: -9px;
	margin-right: 2px;
	margin-top: 5px;
}
.footer-row .to-top-icon {
  margin-left: 4px;
	margin-right: -6px;
	margin-top: -7px;
}







/*------------------------------
 * 
GRID PAGES: CUSTOM COLOURS FOR PROJECTS
 * 
------------------------------*/

.bowild .card-inner a.project-details {
  color: #fff;
background: rgba(255,0,0,.8);
}

.bowild .card-inner .project-icon .box {
  stroke: #f78080;
}
.bowild .card-inner:hover a.project-details .project-icon .box,
.bowild .card-inner:active a.project-details .project-icon .box,
.bowild .card-inner:focus a.project-details .project-icon .box {
  stroke: #fff;
}

.bowild .card-inner .project-icon .line.border {
  stroke: #ff0000;
}

.bowild .card-inner .project-icon .line {
  stroke: #fff;
}




.tyl .card-inner a.project-details {
background: rgba(255,206,5,.85);
color: #951b14;
}

.tyl .card-inner .project-icon .box {
  stroke: #dd880d;
}
.tyl .card-inner:hover a.project-details .project-icon .box,
.tyl .card-inner:active a.project-details .project-icon .box,
.tyl .card-inner:focus a.project-details .project-icon .box {
  stroke: #ab2018;
}

.tyl .card-inner .project-icon .line-border {
  stroke: #ffce05;
}
.tyl .card-inner .project-icon .line {
  stroke: #ab2018;
}




/*------------------------------
 * 
PROJECT PAGES: IMAGE LIGHTBOX
 * 
------------------------------*/

/* Adding a link over the image grid item */
a.expandable-image {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  border: 0;
	cursor: pointer;
	text-decoration: none;
		padding: 0;
}
a.expandable-image::after {
  content: none;
}


/* Lightbox image container */
.lightbox-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  display: none;
  overflow: hidden;
z-index: 999999;
/*   justify-content: center;
  align-items: center; */
padding: 3vw;
opacity: 0;
	gap: 30px;
/* 			flex-direction: column-reverse;
	justify-content: start;
  align-items: end; */
	justify-content: space-between;
}

/* Target pseudo class added on click displays the lightbox image.
 * An animation could be used here to open the image when :target is added, but there is no way to close it smoothly with CSS, or to use the 'prev' & 'next' links smoothly */
.lightbox-image:target {
  display: flex;
opacity: 1;
}


@media all and (min-width: 1124px) {
/* .expanded-image {
	flex-direction: row;
	align-items: start;
} */
}


.lightbox-image .lightbox-image-inner {
	display: flex;
  justify-content: center;
  align-items: start;
/* 	width: 100%;
  height: 100%; */
	 background: #fff;
	position: relative;
  width: 100%;
  height: 100%;
}

.expanded-image {
display: block;
  width: 100%;
  height: 100%;
  position: absolute;
}

.expanded-image img {
object-fit: contain;
  width: 100%;
  height: 100%;
}







.lightbox-image .controls-wrapper {
display: flex;
gap: 20px;
	align-items: start;
}

.lightbox-image .controls-wrapper a {
  border: 0;
  padding: 0;
	width: auto;
	line-height: 0;
}
.lightbox-image .controls-wrapper a::after {
  content: none;
}

/* .expanded-image .controls-wrapper .disabled {
opacity: .33;
} */

.lightbox-image .controls-wrapper svg.disabled .line {
stroke: #e2e2e2;
}

.lightbox-image .controls-wrapper svg.disabled .box,
.lightbox-image .controls-wrapper svg.disabled:hover .box {
stroke: #ececec;
}


/* Lightbox image
.lightbox-image .image-wrapper img {
  max-width: 100%;
  max-height: 100%;
 object-fit: contain;
}
*/





/* Lightbox close button */

/* 
a.close {
  position: absolute;
width: 40px;
height: 40px;
padding: 0;
  top: 20px;
left: 0;
bottom: 0;
  right: 20px;
  display: flex;
  text-decoration: none;
  justify-content: center;
  align-items: center;
} */

a.close::after {
content: none;
}



@media all and (orientation: portrait) {
.lightbox-image {
    flex-direction: column;
	padding-bottom: max(30px, 3vw);
  }
	.lightbox-image .controls-wrapper {
justify-content: end;
	justify-content: center;
		flex-grow: 1;
    align-items: end;
	}
}




/* Fade-in animation - not being used

.expanded-image:target {
animation: fadeIn 0.2s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}


*/





/*------------------------------
 * 
PROJECT PAGES: SCROLLING GRID ITEM FOR TALLER THINGS LIKE WEBSITE SCREENSHOTS
 * 
------------------------------*/


.scroll-container {
	background: #f9f9f9;
	border: 4vw solid #f9f9f9;
	  contain: size;
  overflow-y: auto;
  overscroll-behavior: contain;

}

.card-inner.scroll-container img {
  height: auto;
}



/*------------------------------
 * 
PROJECT PAGES: BACK TO PREVIOUS PAGE LINK
 * 
------------------------------*/

.links-bar {
	display: flex;
	max-width: 1920px;
	margin: 0 auto;
padding: calc(max(20px, 3vw) / 2) max(20px, 3vw);
}




.links-bar .link-item {
display: flex;
}
.links-bar .link-item:last-of-type a {
justify-content: end;
}

/* moving header link styling onto a span instead of a, so the border only fits under the text part of the link */
.links-bar a {
  border: 0;
	padding: 0;
  display: flex;
  align-content: center;
}
.links-bar a::after {
  content: none;
}



@media all and (min-width: 1600px) {
.links-bar {
  padding: calc(max(20px, 2.5vw) / 2) max(20px, 3vw);
}
}




/* link item is a div added to link text for when there's something like an svg icon before or following it.
 * we also style the link slightly differently to normal body links */
.link-item-text {
	position: relative;
  display: flex;
  justify-content: center;
flex-direction: column;
margin: 0;
}

.link-item-text span {
position: relative;
}

a .link-item-text span::after {
  content: '';
  position: absolute;
  width: 0;
  height: 1px;
  bottom: -1px;
  right: 0;
  display: block;
  background: #404040;
  transition: width .25s ease;
  -webkit-transition: width .25s ease;
}
a:hover .link-item-text span::after {
  width: 100%;
  left: 0;
  background: #404040;
}


.links-bar .link-item-text {
margin: 0 .66em;
}






/*------------------------------
 * 
PROJECT PAGES: ANIMATION BUTTON
 * 
------------------------------*/

.project-animation .animate-button {
position: absolute;
display: flex;
  align-items: center;
  justify-content: center;
width: 100%;
height: 100%;
z-index: 100;
opacity: 1;
mix-blend-mode: multiply;
background: 0 0;
border: 0;
}