/*!
Theme Name: Underscores Child
Theme URI: 
Author: James Morrison
Author URI: http://www.bluesquash.co.uk/
Description: Bespoke theme for Blue Squash Design
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: blue-squash-design
Tags: portfolio

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

Blue Squash 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.
Normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
*/

/* 
 * 
 * 
HOSTED FONTS
VARIABLES
SCROLLING
LINK STYLING

LAZY LOADING - LAZYSIZES
BUTTON & INPUT STYLING

COLOURS
SVG ICONS

BASIC LAYOUT

HEADINGS & TEXT STYLING
HEADER & MENU (hidden at the top of individual pages)

PROJECT PAGES (Menu bar placed in the content)
PROJECT PAGES: HERO IMAGE SECTION
PROJECT PAGES: HERO IMAGE TITLE

PROJECT PAGES: INTRO SECTION
PROJECT PAGES: INTRO SECTION LINK STYLING

PROJECT PAGES: SECTIONS
PROJECT PAGES: SECTIONS / HEIGHT & WIDTH MODIFIERS
PROJECT PAGES: SECTIONS----> BLOCKS INSIDE SECTIONS
PROJECT PAGES: SECTIONS----> BLOCKS INSIDE SECTIONS / 2X & 3X WIDTH MODIFIERS
PROJECT PAGES: SECTIONS----> BLOCKS INSIDE SECTIONS----> TEXT & IMAGE CONTENT INSIDE BLOCKS
PROJECT PAGES: SECTIONS----> BLOCKS INSIDE SECTIONS----> TEXT & IMAGE CONTENT INSIDE BLOCKS / SQUARE RATIO
PROJECT PAGES: SECTIONS----> BLOCKS INSIDE SECTIONS----> TEXT & IMAGE CONTENT INSIDE BLOCKS / ADD BORDERS
PROJECT PAGES: SECTIONS----> BLOCKS INSIDE SECTIONS----> TEXT & IMAGE CONTENT INSIDE BLOCKS / SPLIT BLOCKS INTO 4 SECTIONS
PROJECT PAGES: SECTIONS----> BLOCKS INSIDE SECTIONS----> TEXT & IMAGE CONTENT INSIDE BLOCKS----> TEXT & IMAGE MODIFIERS

SKETCHBOOK SECTION
NEXT/PREVIOUS PROJECTS LINK & SKETCHBOOK NEXT/PREVIOUS PROJECTS
BACK TO TOP LINK & SKETCHBOOK BACK TO TOP LINK

SKETCHBOOK GALLERY
SKETCHBOOK GALLERY POPUP
 *
 *
 *
*/


 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;}


.edit-link { display: none; }

body:has(~ .main-navigation.toggled) {
height: 100vh;
overflow: hidden;
}

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

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 300;
  src: local(""), url("https://jmtestwebsite.com/public_html/five/wp-content/fonts/archivo-v18-latin-300.woff2") format("woff2"), url("https://jmtestwebsite.com/public_html/five/wp-content/fonts/archivo-v18-latin-300.woff") format("woff");
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 600;
  src: local(""), url("https://jmtestwebsite.com/public_html/five/wp-content/fonts/archivo-v18-latin-600.woff2") format("woff2"), url("https://jmtestwebsite.com/public_html/five/wp-content/fonts/archivo-v18-latin-600.woff") format("woff");
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 700;
  src: local(""), url("https://jmtestwebsite.com/public_html/five/wp-content/fonts/archivo-v18-latin-700.woff2") format("woff2"), url("https://jmtestwebsite.com/public_html/five/wp-content/fonts/archivo-v18-latin-700.woff") format("woff");
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 800;
  src: local(""), url("https://jmtestwebsite.com/public_html/five/wp-content/fonts/archivo-v18-latin-800.woff2") format("woff2"), url("https://jmtestwebsite.com/public_html/five/wp-content/fonts/archivo-v18-latin-800.woff") format("woff");
}

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

:root {
  --masthead-font-size: max(1rem, 1.25rem);

  --global-padding-unit: 2vw;

  --page-colour-main: #fff;
  --colour-grey: rgba(0, 0, 0, 0.025);
  --colour-dark: #222;
}



/*
Note: JS creates a custom --vh property = 1% of innerwindow height.
CSS calc(var(--vh) * 100) = 1% of innerwindow height.
*/


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

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



/*------------------------------
 * 
LINK STYLING
 * 
 * link/visited text colour with underline
 * focus the same, with underline
 * focus-visible has background + reverse colour for keyboard access. Fallback for browsers not using focus-visible is to put this styling on focus
 * hover the same with no underline
 * active has background + reverse colour for keyboard access, like focus-visible
 * 
 * 
------------------------------*/



/* a {
    outline-color: transparent;
    border: 0;
    text-decoration: none;
  padding: 1px;
  color: #404040;
	 transition: color 1s, text-decoration-color 1s;
  }
  
  a:link, a:visited {
    color: inherit;
    text-decoration: underline;
 transition: color .2s, background-color .2s, text-decoration-color .2s;
  }
  
  a:focus {
    text-decoration: underline;
	outline-color: transparent;
  }

  a:focus-visible {
    color: #eee;
  background: #404040;
	  text-decoration: none;
  }

  a:hover {
	   text-decoration-color: transparent;
 -webkit-text-decoration-color: transparent;
 -moz-text-decoration-color: transparent;
  }
  
  
  a:active {
    color: #eee;
  background: #404040;
	  text-decoration: none;
  }

@supports not selector(:focus-visible) {
  a:focus {
    color: #eee;
  background: #404040;
	  text-decoration: none;
  }
}
 */


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

a:after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
	bottom: -2px;
	  right: 0;
  display: block;
	background: rgba(255,255,255,.75);
  transition: width .25s ease;
  -webkit-transition: width .25s ease;
}

a:hover:after{
  width: 100%;
  left: 0;
  background: rgba(255,255,255,.75);
}

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;
  }
}



/*------------------------------
 * 
LAZY LOADING - LAZYSIZES
 * 
 * fade in images after lazy loading
 * https://github.com/aFarkas/lazysizes/blob/gh-pages/README.md
 * 
 * 
------------------------------*/

.lazyload,
.lazyloading {
	opacity: 0;
}
.lazyloaded {
	opacity: 1;
	transition: opacity .25s;
}


/*------------------------------
 * 
BUTTON & INPUT STYLING
 * 
 * link/visited text colour with underline
 * focus the same, with underline
 * focus-visible has background + reverse colour for keybroad access. Fallback for browsers not using focus-visible is to put this styling on focus
 * hover the same with no underline
 * active has background + reverse colour for keybroad access, like focus-visible
 * 
 * 
------------------------------*/

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  border: 2px solid #555;
  border-radius: 0;
  background: 0 0;
  color: #404040;
  line-height: 1;
  padding: 1em;
	transition: color .2s, background-color .2s;
	cursor: pointer;
	font-size: inherit;
}
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
    border: 2px solid #404040;
    background: #404040;
    color: #fff;
}
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: 2px solid #404040;
    background: 0 0;
    color: #404040;
}

button:focus-within,
input[type="button"]:focus-within,
input[type="reset"]:focus-within,
input[type="submit"]:focus-within {
    border: 2px solid #404040;
    background: #404040;
    color: #eee;
}

@supports not selector(:focus-visible) {
    button:focus,
    input[type="button"]:focus,
    input[type="reset"]:focus,
    input[type="submit"]:focus {
        border: 2px solid #404040;
        background: #404040;
        color: #eee;
    }
  }



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: #404040;
  border: 2px solid #555;
  border-radius: 0;
  padding: .1em;
}
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;
}





/*------------------------------
 * 
COLOURS
 * 
------------------------------*/
  
.dark {
  background: var(--colour-dark);
}

.dark > * {
  color: #f1f1f1;
}

.dark h1 {
  color: #eee;
	border-bottom: thin solid #555;
}


.dark a {
  color: #f1f1f1;
  }
  
.dark a:focus-visible,
.dark a:active {
      color: #222;
    background: #f1f1f1;
    }

@supports not selector(:focus-visible) {
.dark a:focus {
    color: #222;
  background: #f1f1f1;
  }
}



.dark .to-top-link a,
.dark .to-top-link a:visited,
.dark .to-top-link a:focus {
	  color: #eee;
}

.dark .to-top-link a:focus-visible,
.dark .to-top-link a:hover,
.dark .to-top-link a:active {
	  color: #222;
	background: #eee;
			border-bottom: thin solid #eee;
}

@supports not selector(:focus-visible) {
.dark .to-top-link a:focus {
    color: #222;
  background: #eee;
	border-bottom: thin solid #eee;
  }
}





  .grey {
    background: var(--colour-grey);
  }




/*------------------------------
 * 
SVG ICONS
 * 
------------------------------*/

.main-navigation .menu-toggle svg,
.entry-intro-block-text svg,
.entry-hero-block-text svg,
.entry-section-title svg,
.to-top-link svg,
.previous-link svg,
.next-link svg {
  position: relative;
  vertical-align: middle;
  top: -.1em;
}

.main-navigation .menu-toggle svg,
.entry-intro-block-text svg,
.entry-hero-block-text svg,
.entry-section-title svg {
left: -24px;
	margin-right: -18px;
}

#icon-menu-open-med,
#icon-menu-close-med,
 #icon-menu-open-med,
 #icon-menu-close-med,
		#icon-highlight-med,
	#icon-gallery-popup-med,
	#icon-previous-med,
	#icon-next-med,
	#icon-contact-med,
	#icon-to-top-med {
display: none;
}

.main-navigation .menu-toggle svg {
	position: absolute;
  transform-origin: top center;
	transition: opacity .33s ease;
}

.main-navigation .menu-toggle #icon-menu-open,
.main-navigation .menu-toggle #icon-menu-open-med {
	opacity: 1;
}
.main-navigation .menu-toggle #icon-menu-close,
.main-navigation .menu-toggle #icon-menu-close-med {
	opacity: 0;
}
.main-navigation.toggled .menu-toggle #icon-menu-open,
.main-navigation.toggled .menu-toggle #icon-menu-open-med {
	opacity: 0;
}
.main-navigation.toggled .menu-toggle #icon-menu-close,
.main-navigation.toggled .menu-toggle #icon-menu-close-med {
	opacity: 1;
}
	.main-navigation .menu-toggle #icon-menu-open-med,
.main-navigation .menu-toggle #icon-menu-close-med,
.main-navigation.toggled .menu-toggle #icon-menu-open-med,
.main-navigation.toggled .menu-toggle #icon-menu-close-med {
display: none;
}


/* .entry-section-title svg {
margin-left: 0;
} */

/* .entry-intro-block-text svg {
  height: 34px;
  width: 34px;
	margin: auto .25em;
} */
/* .entry-hero-block-text svg {
margin-left: 0;
}

 */
svg .line,
svg .linedark {
transition: stroke .3s ease;
}
svg .line.border {
transition: stroke .3s ease;
}
svg .box {
transition: stroke .3s ease;
	transition-delay: .125s;
}

.main-navigation .menu-toggle svg .box {
	transition-delay: 0s;
}

svg .line {
stroke: #222;
	stroke-width: 2px;
}
svg .line.border {
stroke: #fff;
	stroke-width: 8px;
}
svg .box {
stroke: #aaa;
	stroke-width: 16px;
}


.to-top-link a:hover svg .line,
.previous-link a:hover svg .line,
.next-link a:hover svg .line,
.previous-link a:focus svg .line,
.next-link a:focus svg .line,
.previous-link a:focus-visible svg .line,
.next-link a:focus-visible svg .line {
  stroke: #eee;
}

.to-top-link a:hover svg .line.border,
.previous-link a:hover svg .line.border,
.next-link a:hover svg .line.border,
.previous-link a:focus svg .line.border,
.next-link a:focus svg .line.border,
.previous-link a:focus-visible svg .line.border,
.next-link a:focus-visible svg .line.border {
  stroke: #222;
}


.to-top-link a:hover svg .box,
.previous-link a:hover svg .box,
.next-link a:hover svg .box,
.previous-link a:focus svg .box,
.next-link a:focus svg .box,
.previous-link a:focus-visible svg .box,
.next-link a:focus-visible svg .box {
	  stroke: #eee;
}



.button.menu-toggle svg .line {
  stroke: #eee;
}
.main-navigation .menu-toggle:hover svg .box,
.main-navigation.toggled .menu-toggle:hover svg .box {
	stroke: #222;
}
.main-navigation.toggled .menu-toggle:hover svg .line {
	stroke: #222;
}




.sketchbook .main-navigation .menu-toggle svg .line {
  stroke: #eee;
}
.sketchbook .main-navigation .menu-toggle svg .box {
  stroke: #555;
}
.sketchbook .main-navigation .menu-toggle:hover svg .box {
  stroke: #eee;
}

/*
 * .sketchbook class is added to #masthead when scrolling over darker sketchbook sections
 * Changes icon colours to make them match .dark class icon colours
} */



.dark svg .line {
stroke: #eee;
}
.dark svg .box {
stroke: #555;
}

.dark .to-top-link a:hover svg .line,
.dark .previous-link a:hover svg .line,
.dark .next-link a:hover svg .line,
.dark .previous-link a:focus svg .line,
.dark .next-link a:focus svg .line,
.dark .previous-link a:focus-visible svg .line,
.dark .next-link a:focus-visible svg .line {
  stroke: #222;
}

.dark .to-top-link a:hover svg .box,
.dark .previous-link a:hover svg .box,
.dark .next-link a:hover svg .box,
.dark .previous-link a:focus svg .box,
.dark .next-link a:focus svg .box,
.dark .previous-link a:focus-visible svg .box,
.dark .next-link a:focus-visible svg .box {
  stroke: #aaa;
	  stroke: #222;
}


@media screen and (max-width: 1199px) {
.main-navigation .menu-toggle #icon-menu-open,
.main-navigation.toggled .menu-toggle #icon-menu-close,
	#icon-highlight,
	#icon-gallery-popup,
	#icon-previous,
	#icon-next,
	#icon-contact,
	#icon-to-top {
display: none;
}

.main-navigation .menu-toggle #icon-menu-open-med,
.main-navigation.toggled .menu-toggle #icon-menu-close-med,
		#icon-highlight-med,
	#icon-gallery-popup-med,
	#icon-previous-med,
	#icon-next-med,
	#icon-contact-med,
	#icon-to-top-med {
display: initial;
}

.main-navigation .menu-toggle svg,
.entry-intro-block-text svg,
.entry-hero-block-text svg,
.entry-section-title svg {
left: -18px;
}

svg .box {
	stroke-width: 12px;
}
}



/* 
 * 
 *
 * little link icon
 * 
 *
@media screen and (max-width: 767px) {
	.entry-hero-block-text svg,
.entry-section-title svg,
.to-top-link svg,
.previous-link svg,
.next-link svg {
  position: absolute;
  right: calc((2 * var(--global-padding-unit)) + 10px);
  top: calc(3 * var(--global-padding-unit));
}
.to-top-link svg,
.previous-link svg,
.next-link svg {
 top: calc((1 * var(--global-padding-unit)) + .5rem);
	}
}
 */



/*------------------------------
 * 
BASIC LAYOUT
 * 
------------------------------*/

body,
button,
input,
select,
optgroup,
textarea {
  font-family: "SF Pro Text", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
body,
button,
input,
select,
optgroup,
textarea {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 300;
}
body {
  line-height: 1.6;
  background-color: #fff;
}

p {
  margin-top: 0;
}
p:empty {
  margin: 0;
}

.post, .page {
  margin: 0;
}

#content {
  width: 100%;
  min-height: 100%;
  top: 0;
  left: 0;
  margin: 0;
}

.page-content,
.entry-content,
.entry-summary {
  margin: 0;
}



/*------------------------------
 * 
HEADINGS & TEXT STYLING
 * 
------------------------------*/

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  border: 0;
		  font-weight: 400;
}

h1 {
  font-size: max(1.66rem, 2.25vw);
}
h2 {
	font-size: max(1.2rem, 2vw);
}
h3 {
font-size: max(1.1rem, 1.25vw);
}

b, strong {
  font-weight: 600;
}

#masthead {
  font-size: var(--masthead-font-size);
  font-weight: 800;
  letter-spacing: .01em;
}
#primary {
		font-weight: 300;
			font-size: max(1.1rem, 1.25vw);
}




/*------------------------------
 * 
HEADER & MENU (hidden at the top of individual project pages)
 * 
------------------------------*/



/* 

#masthead,
#header,
#branding,
#menu,
#menu ul {
  display: flex;
}

#masthead {
  justify-content: space-between;
  position: fixed;
  z-index: 9999;
  width: 100%;
  top: 0;
  margin: 0;
  padding: 1rem calc(2 * var(--global-padding-unit));
  color: #fff;
	background: 0 0;
}

#masthead p {
  margin: 0;
}

#primary-menu ul {
  list-style: none;
}

#primary-menu li {
	margin: 0;
}
	#masthead a,
#primary-menu li a {
	display: inline-block;
  padding: .1em .33em;
}

  #masthead a {
  color: #fff;
  background: #333;
}
  #masthead a:link, #masthead a:visited {
    text-decoration: none;
  }

  #masthead a:focus-visible {
    color: #333;
  background: #f1f1f1;
  }

  #masthead a:hover {
    color: #333;
  background: #f1f1f1;
  }

  #masthead a:active {
    color: #333;
  background: #f1f1f1;
  }



@supports not selector(:focus-visible) {
  #masthead a:focus {
color: #333;
  background: #f1f1f1;
  }
}


@media screen and (min-width: 37.5em) {
.menu-toggle {
  display: block;
}
.main-navigation ul {
  display: none;
	justify-content: end;
}
}
 */


/*------------------------------
 * 
NEW HEADER & MENU (hidden at the top of individual project pages)
 * 
------------------------------*/

#masthead {
    z-index: 9999;
    position: fixed;
    padding: 0;
  }

  #masthead a {
  color: #222;
  background: #fff;
transition: background-color .3s, color .3s;
  }
#masthead a, #masthead a:link, #masthead a:visited {
      text-decoration: none;
		border-color: transparent;
    }
  
    #masthead a:focus-visible {
      color: #222;
    background: #f1f1f1;
    }
  
    #masthead a:hover {
color: #eee;
  background: #222;
    }
  
    #masthead a:active {
      color: #fff;
    }

    @supports not selector(:focus-visible) {
        #masthead a:focus {
      color: #222;
        background: #f1f1f1;
        }
      }

      



.main-navigation {
}
  .main-navigation.toggled {

  }



        button.menu-toggle {
            display: inline-block;
            position: absolute;
            z-index: 99999;
            cursor: pointer;
            top: 1rem ;
left: calc(2 * var(--global-padding-unit));
            padding: 0;
            font-size: max(1.66rem, 2.25vw);
          font-weight: 700;
          line-height: 1;
        }

        button.menu-toggle,
        button.menu-toggle:visited,
button.menu-toggle:hover,
button.menu-toggle:active {
    color: #404040;
    border: 0;
    background: 0 0;
}


button.menu-toggle:focus {
    border: 0;
    background: #404040;
    color: #eee;
}

@supports selector(:focus-visible) {
    button.menu-toggle:focus-visible {
        border: 0;
        background: #404040;
        color: #eee;
    }
    button.menu-toggle:focus {
        color: #404040;
        border: 0;
        background: 0 0;
    }
  }





        .menu-top-menu-container {
display: block;
position: fixed;
top: 0;
bottom: 0;
z-index: 99998;
outline: 1px solid transparent;
overflow-y: auto;
overflow-x: hidden;
box-sizing: border-box;
margin: 0;
padding: 0;
padding-top: calc(3 * var(--global-padding-unit));
			padding-top: 130px;
width: 100%;
top: 0;
transition: transform .5s;
transform: translateY(-100%);
-ms-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
background: #fff;

        }

        .main-navigation.toggled  .menu-top-menu-container {
            transform: translateY(0);
            -ms-transform: translateY(0);
            -webkit-transform: translateY(0);
            -moz-transform: translateY(0);
    }

                .main-navigation ul {
                    list-style: none;
                }

.main-navigation li {
  border-bottom: 1px solid rgba(0,0,0,.15);
  transition: border-color .3s;
}
.main-navigation li:hover {
  border-bottom: 1px solid #222;
}

                .main-navigation li a {
  padding: var(--global-padding-unit) calc(2 * var(--global-padding-unit));
  font-size: clamp(1.66rem, 2.25vw, 2.25vw);
  font-weight: 700;
  letter-spacing: 0;
  color: #222;
  background: #fff;
transition: background-color .3s, color .3s;
                }

.main-navigation li.current-menu-item a, .main-navigation li:hover a {
color: #eee;
  background: #222;
}

.main-navigation li a:after {
content: none;
}




                @media screen and (min-width: 37.5em) {
                    .menu-toggle {
                      display: block;
                    }
                  .main-navigation ul {
          display: block;
                    }
                    }

                    





/*------------------------------
 * 
INDIVIDUAL PROJECT PAGES (Menu bar placed in the content)
 * 
------------------------------*/
/* 

.entry-menu {
  position: fixed;
	z-index: 10;
  width: 100%;
  height: calc(var(--masthead-font-size) + 3rem);
  background: #333;
  top: 0;
  left: 0;
}

 */


/*------------------------------
 * 
INDIVIDUAL PROJECT PAGES: HERO IMAGE SECTION
 * 
------------------------------*/

.entry-hero {
	 height: 100vh;
	height: calc(var(--vh) * 100);
  position: relative;
  z-index: 100;
  overflow: hidden;
	  background-color: var(--page-colour-main);
}

.entry-hero-block {
  position: absolute;
  width: 100%;
  height: 100%;
}

.entry-hero-block-image {
display: flex;
    width: 100%;
    height: 100%;
  }

.entry-hero-block-image p {
margin: 0;
  }

.entry-hero-block-image img {
	flex: 1;
  object-fit: cover;
	width: 100%;
height: 100%;
}






/*------------------------------
 * 
INDIVIDUAL PROJECT PAGES: HERO IMAGE TITLE
 * 
------------------------------*/

.entry-hero-block-text {
  position: absolute;
  width: 100%;
  height: auto;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background: #333;
  padding: 2rem calc(2 * var(--global-padding-unit)) 1.5rem;
  transition: padding-top .5s ease;
  background-color: var(--page-colour-main);
}

.entry-hero-block-text.expanded {
  padding-top: max(4rem, calc(3 * var(--global-padding-unit)));
}

.entry-hero-block-text > * {
  flex: 1;
}


/*------------------------------
 * 
INDIVIDUAL PROJECT PAGES: INTRO SECTION
 * 
------------------------------*/



.entry-intro {
  display: flex;
  padding-left: var(--global-padding-unit);
  padding-right: var(--global-padding-unit);
  background-color: var(--page-colour-main);
}

.entry-intro {
font-size: max(1.1rem, 1.15vw);
}


.entry-intro-block {
  flex: 1;
  padding-left: var(--global-padding-unit);
  padding-right: var(--global-padding-unit);
  padding-top: calc((1 * var(--global-padding-unit)) + .5rem);
  padding-bottom: max(3rem, calc(4 * var(--global-padding-unit)));
	padding-bottom: max(calc(4rem - 1.5em + var(--global-padding-unit)), calc(4 * var(--global-padding-unit)));
}
 

.entry-intro-block-text {
  display: flex;
padding-top: calc(var(--global-padding-unit) + 1rem);
  border-top: thin solid rgba(0,0,0,.15);
}

.entry-intro-block.right .entry-intro-block-text {
  margin: 0 auto;
	max-width: 45ch;
}

.entry-intro-block-text p {
  flex: 1;
}



@media screen and (max-width: 1199px) {
	.entry-intro-block-text {
  flex-direction: column;
}
}

@media screen and (max-width: 960px) {
	.entry-intro {
  flex-direction: column;
}
.entry-intro-block.right .entry-intro-block-text {
  max-width: 100%;
}
		.entry-intro-block.right .entry-intro-block-text p {
  max-width: 55ch;
}
	.entry-intro-block.left {
  padding-bottom: calc(var(--global-padding-unit) + 1rem);
}
}




/*------------------------------
 * 
INDIVIDUAL PROJECT PAGES: INTRO SECTION LINK STYLING
 * 
------------------------------*/

/* .entry-intro-block.left a {
  color: #404040;
  text-decoration: none;
  outline: none;
  display: inline-block;
  margin: .75em 0;
  transition: all .1s ease;
  border: 1px solid #777;
  padding: 2px 10px 2px 5px;
  position: relative;
  mix-blend-mode: multiply;
}
.entry-intro-block.left a:hover {
  background: #404040;
  border-color: #404040;
  color: #fff;
}

.entry-intro-block.left a:focus {
  outline: thin dotted;
  border: thin solid transparent;
} */

/* .entry-intro-block.left a::before,
.entry-intro-block.left a::after {
  height: 100%;
  aspect-ratio: 1;
  position: absolute;
  box-sizing: content-box;
  left: calc(100% + 1px);
  top: 0;
  border-radius: 999em;
  border: 1px solid #777;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='17' xml:space='preserve'%3E%3Cg fill='none' stroke='%23777'%3E%3Cpath d='M21.56 8.5H0M13.87 16.18l7.69-7.68L13.87.82'/%3E%3C/g%3E%3C/svg%3E") 0 50% no-repeat;
  transition: opacity .1s ease;
}

.entry-intro-block.left a::before {
  opacity: 1;
}

.entry-intro-block.left a::after {
  opacity: 0;
  border: 1px solid #404040;
  background: #404040 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='17' xml:space='preserve'%3E%3Cg fill='none' stroke='%23fff'%3E%3Cpath d='M21.56 8.5H0M13.87 16.18l7.69-7.68L13.87.82'/%3E%3C/g%3E%3C/svg%3E") 0 50% no-repeat;
}

.entry-intro-block.left a:hover:before {
  opacity: 0;
}

.entry-intro-block.left a:hover:after {
  opacity: 1;
}

@supports (aspect-ratio: 1 / 1) {
  .entry-intro-block.left a {
    border-radius: 0 999em 999em 0;
    margin-right: 3em;
  }
  .entry-intro-block.left a::before,
  .entry-intro-block.left a::after {
    content: " ";
  }
} */






/*------------------------------
 * 
INDIVIDUAL PROJECT PAGES: SECTIONS
 * 
------------------------------*/

.entry-section {
  display: flex;
flex: 1;
	flex-flow: wrap;
}

.entry-section[class*="border"][class*="top"] {
  padding-top: calc(2 * var(--global-padding-unit));
}
.entry-section[class*="border"][class*="right"] {
  padding-right: calc(2 * var(--global-padding-unit));
}
.entry-section[class*="border"][class*="bottom"] {
  padding-bottom: calc(2 * var(--global-padding-unit));
}
.entry-section[class*="border"][class*="left"] {
  padding-left: calc(2 * var(--global-padding-unit));
}

/*------------------------------
 * 
INDIVIDUAL PROJECT PAGES: SECTIONS / HEIGHT & WIDTH MODIFIERS
 * 
------------------------------*/

.full-height {
	 height: 100vh;
	height: calc(var(--vh) * 100);
}
.three-quarters-height {
	 height: 75vh;
	height: calc(var(--vh) * 75);
}
.half-height {
	 height: 50vh;
	height: calc(var(--vh) * 50);
}
.quarter-height {
	 height: 25vh;
	height: calc(var(--vh) * 25);
}



/*------------------------------
 * 
INDIVIDUAL PROJECT PAGES: SECTIONS----> BLOCKS INSIDE SECTIONS
 * 
------------------------------*/

.entry-section-block {
  display: flex;
flex: 1 1 1px;
	flex-flow: wrap;
	max-height: 100%;
}

.entry-section-block[class*="border"][class*="top"] {
  padding-top: calc(2 * var(--global-padding-unit));
}
.entry-section-block[class*="border"][class*="right"] {
  padding-right: calc(2 * var(--global-padding-unit));
}
.entry-section-block[class*="border"][class*="bottom"] {
  padding-bottom: calc(2 * var(--global-padding-unit));
}
.entry-section-block[class*="border"][class*="left"] {
  padding-left: calc(2 * var(--global-padding-unit));
}

.entry-section hr {
width: 100%;
	height: 0;
	padding: 0;
	margin: 0;
	border: 0;
	overflow: hidden;
}



@media screen and (max-width: 1280px) and (orientation: portrait) {
  .entry-section-block.spacer {
    flex: 0 1 20%;
  }

  }

  
@media screen and (max-width: 960px) {
  .entry-section hr {
display: none;
    }
    .entry-section-block {
      flex-basis: 50%;
    }
    .entry-section-block.spacer {
      flex-basis: 10%;
    }

  }

  @media screen and (max-width: 767px) {
  .entry-section-block.spacer {
    flex: 0 1 10%;
  }
    }
  @media screen and (max-width: 576px) {
      .entry-section-block {
        flex-basis: 100%;
      }
	  .entry-section-block.spacer + .entry-section-block {
    flex-basis: 80%;
  }
    }

/*------------------------------
 * 
INDIVIDUAL PROJECT PAGES: SECTIONS----> BLOCKS INSIDE SECTIONS / 2X & 3X WIDTH MODIFIERS
 * 
------------------------------*/

.double-width {
  flex-grow: calc(1 + 2/3);
}
.triple-width {
  flex-grow: 3;
}

  @media screen and (max-width: 576px) {
.double-width,
.triple-width {
  aspect-ratio: 1;
  overflow: hidden;
}
}



/*------------------------------
 * 
INDIVIDUAL PROJECT PAGES: SECTIONS----> BLOCKS INSIDE SECTIONS----> TEXT & IMAGE CONTENT INSIDE BLOCKS
 * 
------------------------------*/


.entry-section-block-text,
.entry-section-block-image {
  display: flex;
flex: 1;
	flex-flow: wrap;
	max-height: 100%;
  position: relative;
}

.entry-section-block-text {
	flex-direction: column;
  margin: auto;
  max-width: 66ch;
  padding-top: calc(6 * var(--global-padding-unit));
  padding-bottom: calc(6 * var(--global-padding-unit));
}

.entry-section-block-text p:last-of-type {
  margin: 0;
}

.entry-section-block-image {
line-height: 0;
}

  @media screen and (max-width: 767px) {
.entry-section-block-text {
  padding: calc(6 * var(--global-padding-unit));
}
}

/*------------------------------
 * 
INDIVIDUAL PROJECT PAGES: SECTIONS----> BLOCKS INSIDE SECTIONS----> TEXT & IMAGE CONTENT INSIDE BLOCKS / SQUARE RATIO
 * 
------------------------------*/
.square {
  aspect-ratio: 1;
  overflow: hidden;
}


/*------------------------------
 * 
INDIVIDUAL PROJECT PAGES: SECTIONS----> BLOCKS INSIDE SECTIONS----> TEXT & IMAGE CONTENT INSIDE BLOCKS / ADD BORDERS
 * 
------------------------------*/

.entry-section-block-image[class*="border"][class*="top"] {
  padding-top: calc(3 * var(--global-padding-unit));
}
.entry-section-block-text[class*="border"][class*="top"] {
  padding-top: calc(4 * var(--global-padding-unit));
}
.entry-section-block-image[class*="border"][class*="right"],
.entry-section-block-text[class*="border"][class*="right"] {
  padding-right: calc(3 * var(--global-padding-unit));
}
.entry-section-block-image[class*="border"][class*="bottom"] {
  padding-bottom: calc(3 * var(--global-padding-unit));
}
.entry-section-block-text[class*="border"][class*="bottom"] {
  padding-bottom: calc(4 * var(--global-padding-unit));
}
.entry-section-block-image[class*="border"][class*="left"],
.entry-section-block-text[class*="border"][class*="left"] {
  padding-left: calc(3 * var(--global-padding-unit));
}

  
  @media screen and (max-width: 767px) {
.entry-section-block-image[class*="border"][class*="top"] {
  padding-top: calc(6 * var(--global-padding-unit));
}
.entry-section-block-text[class*="border"][class*="top"] {
  padding-top: calc(8 * var(--global-padding-unit));
}
.entry-section-block-image[class*="border"][class*="right"],
.entry-section-block-text[class*="border"][class*="right"] {
  padding-right: calc(6 * var(--global-padding-unit));
}
.entry-section-block-image[class*="border"][class*="bottom"] {
  padding-bottom: calc(6 * var(--global-padding-unit));
}
.entry-section-block-text[class*="border"][class*="bottom"] {
  padding-bottom: calc(8 * var(--global-padding-unit));
}
.entry-section-block-image[class*="border"][class*="left"],
.entry-section-block-text[class*="border"][class*="left"] {
  padding-left: calc(6 * var(--global-padding-unit));
}
}

/*------------------------------
 * 
INDIVIDUAL PROJECT PAGES: SECTIONS----> BLOCKS INSIDE SECTIONS----> TEXT & IMAGE CONTENT INSIDE BLOCKS / SPLIT BLOCKS INTO 4 SECTIONS
 * 
------------------------------*/

.grid-4 > * {
  aspect-ratio: 1;
    width: 50%;
  }



/*------------------------------
 * 
INDIVIDUAL PROJECT PAGES: SECTIONS----> BLOCKS INSIDE SECTIONS----> TEXT & IMAGE CONTENT INSIDE BLOCKS----> TEXT & IMAGE MODIFIERS
 * 
------------------------------*/


.entry-section-block-image img {
object-fit: contain;
}


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





  


/*------------------------------
 * 
FOOTER
 * 
------------------------------*/
#colophon {
	padding: calc(2 * var(--global-padding-unit)) calc(2 * var(--global-padding-unit)) var(--global-padding-unit);
	color: #969494;
}
.site-info {
  text-align: center;
padding: calc(var(--global-padding-unit) + 1rem) 0 var(--global-padding-unit);
font-size: calc(0.75 * max(1.66rem, 2.25vw));
font-weight: 700;
}




/*------------------------------
 * 
SKETCHBOOK SECTION
 * 
------------------------------*/

.entry-section-title {
	position: relative;
	width: 100%;
	padding: 0 calc(2 * var(--global-padding-unit));
}
.entry-section-title h1 {
	padding: calc(3 * var(--global-padding-unit)) 0 calc(var(--global-padding-unit) + .5rem);
	padding: max(4rem, calc(3 * var(--global-padding-unit))) 0 1.5rem;
border-bottom: thin solid rgba(255,255,255,.25);
}



/*------------------------------
 * 
NEXT/PREVIOUS PROJECTS LINK & SKETCHBOOK NEXT/PREVIOUS PROJECTS
 * 
------------------------------*/

.previous-next {
  display: flex;
  justify-content: space-between;
	border-bottom: thin solid rgba(0,0,0,.15);
  padding: 0;
  margin: 0 auto;
  width: calc(100% - calc(4 * var(--global-padding-unit)));
}

.previous-next + .previous-next {
    padding-top: calc(3 * var(--global-padding-unit));
}

.previous-link {
  margin-right: calc(0.5 * var(--global-padding-unit));
  flex-grow: 1;
	width: 50%;
}
.next-link {
  margin-left: calc(0.5 * var(--global-padding-unit));
  flex-grow: 1;
  text-align: right;
	width: 50%;
}



.previous-link a, .previous-link a:link,
.next-link a, .next-link a:link {
  display: block;
  padding: calc(var(--global-padding-unit) + .5rem) 0;
  font-size: clamp(1.66rem, 2.25vw, 2.25vw);
  font-weight: 700;
  background: 0 0;
  text-decoration: none;
  border: 0;
  transition: background-color .3s, color .3s;
/* 	margin-bottom: -2px; */
}
.previous-link a, .previous-link a:link {
	padding-left: 44px;
}
.next-link a, .next-link a:link { 
padding-right: 44px;
}

.previous-link a:after,
.next-link a:after {
  display: none;
}

.previous-link a:focus, .previous-link a:hover,
.next-link a:focus, .next-link a:hover {
  color: #eee;
  background: #222;
	  border: 0;
}

@supports selector(:focus-visible) {
.previous-link a:focus-visible,
	.next-link a:focus-visible {
    color: #eee;
  background: #222;
	border: 0;
  }
.previous-link a:focus,
.next-link a:focus {
    color: #eee;
  background: #222;
}
}


.dark .previous-link a, .dark .previous-link a:visited, .dark .previous-link a:focus,
.dark .next-link a, .dark .next-link a:visited, .dark .next-link a:focus {
color: #eee;
}
.dark .previous-link a:focus, .dark .previous-link a:hover,
.dark .next-link a:focus, .dark .next-link a:hover {
  color: #222;
  background: #eee;
}
@supports selector(:focus-visible) {
.dark .previous-link a:focus-visible,
	.dark .next-link a:focus-visible {
  color: #222;
  background: #eee;
  }
	.dark .previous-link a:focus,
	.dark .next-link a:focus {
  color: #eee;
  background: 0 0;
  }
}

@media screen and (max-width: 1199px) {
	.previous-link a, .previous-link a:link {
	padding-left: 24px;
}
.next-link a, .next-link a:link { 
padding-right: 24px;
}
}

@media screen and (max-width: 767px) {
.previous-next {
flex-direction: column;
	border: 0;
}
	.previous-next + .previous-next {
    padding-top: 0;
}
.previous-link,
.next-link {
  flex-shrink: 0;
	width: 100%;
	margin: .5rem 0;
	text-align: center;
border: thin solid #555;
}
	
.previous-link a, .previous-link a:link,
.next-link a, .next-link a:link {
  padding: calc(var(--global-padding-unit) + .5rem) 0;
	}
	
	
	.previous-link a, .previous-link a:link {
	padding-left: 0;
}
.next-link a, .next-link a:link { 
padding-right: 0;
}
	
	
	.previous-link svg, .next-link svg {
		margin: auto .15em;
	}
}







/*------------------------------
 * 
BACK TO TOP LINK & SKETCHBOOK BACK TO TOP LINK
 * 
------------------------------*/

/* .to-top {
  padding: 0;
  margin: 0 auto;
  width: calc(100% - calc(4 * var(--global-padding-unit)));
}
.to-top-link {
position: relative;
	text-align: right;
}


.to-top-link a:link,
.to-top-link a:visited,
.to-top-link a:focus {
	display: block;
	padding: calc(var(--global-padding-unit) + .5rem) 10px;
font-size: clamp(1.66rem, 2.25vw, 2.25vw);
font-weight: 700;
	background: 0 0;
	text-decoration: none;
			border-bottom: thin solid #555;
	transition: border-color .5s ease, background-color .5s ease, color .33s ease;
}

.to-top-link a:focus-visible,
.to-top-link a:hover,
.to-top-link a:active {
	  color: #eee;
	background: #222;
		border-bottom: thin solid #222;
}

@supports not selector(:focus-visible) {
.to-top-link a:focus {
	  color: #eee;
	background: #222;
		border-bottom: thin solid #222;
  }
} */



/*------------------------------
 * 
SKETCHBOOK GALLERY
 * 
------------------------------*/

.gallery {
	padding: calc(3 * var(--global-padding-unit));
	  padding-top: max(4rem, calc(4 * var(--global-padding-unit)));
padding-bottom: max(calc(4rem - 1.5em + var(--global-padding-unit)), calc(4 * var(--global-padding-unit)));
	margin: 0;
}
.rl-basicgrid-gallery::after {
  min-width: 1px !important;
}

.gallery .rl-gallery .rl-gallery-item {
 align-items: center;
	justify-content: center;
  display: flex;
	padding: calc(2 * var(--global-padding-unit));
}
.gallery .rl-gallery .rl-gallery-link {
	display: flex;
	flex-direction: column;
}


.rl-gallery-item a {
	text-decoration: none;
}
.rl-gallery-item a:active {
  background: 0 0;
}

a.rl-gallery-link:focus-visible .rl-gallery-item-title {
  color: #f1f1f1;
}



@supports not selector(:focus-visible) {
.rl-gallery-item a:focus {
  color: #f1f1f1;
  }
}

.rl-gallery .rl-gallery-link .rl-gallery-caption {
	position: relative !important;
	padding: 1em 1.5em 1em 0 !important;
}


@media (max-width: 768px) {
#rl-gallery-container-1 .rl-basicgrid-gallery .rl-gallery-item {
  width: 50% !important;
}
}


@media (max-width: 576px) {
#rl-gallery-container-1 .rl-basicgrid-gallery .rl-gallery-item {
  width: 100% !important;
}
}


.dark .rl-gallery-item-title {
  color: #f1f1f1 !important;
}
.dark a.rl-gallery-link:focus-visible .rl-gallery-item-title {
  color: #222 !important;
}
@supports not selector(:focus-visible) {
.dark a.rl-gallery-link:focus .rl-gallery-item-title {
  color: #222 !important;
}
}

/*------------------------------
 * 
SKETCHBOOK GALLERY POPUP
 * 
------------------------------*/

.tos-desktop .tos-wrapper.tos-fixed {
	background: #222;
}

.tos-wrapper.tos-fixed {
  z-index: 999999;
}
.tos-desktop .tos-wrapper:hover .tos-close.tos-disabled,
.tos-desktop .tos-wrapper:hover .tos-next.tos-disabled,
.tos-desktop .tos-wrapper:hover .tos-prev.tos-disabled,
.tos-touch .tos-wrapper.tos-hover .tos-close.tos-disabled,
.tos-touch .tos-wrapper.tos-hover .tos-next.tos-disabled,
.tos-touch .tos-wrapper.tos-hover .tos-prev.tos-disabled {
  opacity: 0;
}
.tos-close,
.tos-next,
.tos-prev {
  height: 80px;
  width: 80px;
  border-radius: 9999em;
}
.tos-close span::after,
.tos-close span::before {
  width: 18px;
  height: 18px;
  margin-top: -9px;
}
.tos-close span::after {
  left: 21px;
}
.tos-close span::before {
  left: 48px;
}
.tos-close span::after,
.tos-close span::before,
.tos-next span,
.tos-prev span {
  width: 20px;
  height: 20px;
  margin: -9px -5px;
}
.tos-close span::after,
.tos-next span {
  border-top: thin solid #fff;
  border-right: thin solid #fff;
}
.tos-close span::before,
.tos-prev span {
  border-bottom: thin solid #fff;
  border-left: thin solid #fff;
}
.tos-wrapper.tos-has-thumbnails .tos-pagination a {
  width: 60px;
  height: 60px;
}

@media only screen and (max-width: 991px) {
  .tos-close,
  .tos-next,
  .tos-prev {
    width: 60px;
    height: 60px;
  }
  .tos-close span::after,
  .tos-close span::before {
    width: 15px;
    height: 15px;
    margin-top: -9px;
  }
  .tos-close span::after {
    left: 17px;
  }
  .tos-close span::before {
    left: 37px;
  }
  .tos-next,
  .tos-prev {
    margin-top: -80px;
  }
  .tos-close,
  .tos-next {
    right: 10px;
  }
  .tos-prev {
    left: 10px;
  }
  .tos-close span::after,
  .tos-close span::before,
  .tos-next span,
  .tos-prev span {
    width: 15px;
    height: 15px;
    margin: -7px -5px;
  }
}