@charset "UTF-8";
/* CSS Document */

/* SITE WIDE VARS & ELEMENTS */
:root {
    --siteFont: "Source Sans 3",/*Inter*/"Helvetica Neue", Helvetica, "sans-serif";
	--fontStdWeight: 300;
	--fontBoldWeight: 400;
	--fontBolderWeight: 500;
	--fontHeavyWeight: 600;
	--fontHeavierWeight: 700;
    --siteColor: #040404;
    --linkColor: rgba(85,85,85,1.00);
    --ruleColor: rgba(38,38,38,1.00);
    --linkBorderColor: rgba(179,179,179,1.00);
    --linkHoverColor: #000;
	--linkHoverBgColor:#f7f7f7;
	--smallButtonBg: #F5F5F5;
    --siteBackground: #FFF/*OLD #eeeeee*/;
	--siteBackgroundTrans: rgba(255,255,255,0.96)/*rgba(238,238,238,0.96)*/;
    --pagePaddingSide: 25px;
    --pagePaddingTop: 40px;
    --notchTop: env(safe-area-inset-top);
    --notchBottom: env(safe-area-inset-bottom);
    --transition: 0.18s cubic-bezier(0.47, 0.15, 0.42, 0.81);
	--menuTransition: 0.15s cubic-bezier(0.53, 0.27, 0.52, 0.9);
	--imageMaxWidth: 1080px;
    --rootFontSize: 85%;
    --rootFontSizeMobile: 95%;
	--mobileMenuButtonActiveBg: rgba(224,224,224,0.2);
}

@media screen and (prefers-color-scheme: dark) {
    :root {
        --siteColor: rgba(211,211,211,1.00);
        --linkColor: rgba(203,203,203,1.00);
		--ruleColor: rgba(230,230,230,1);
        --linkBorderColor: rgba(131,131,131,1.00);
        --linkHoverColor: rgba(255,255,255,1.00);
		--linkHoverBgColor:#303030;
		--smallButtonBg: #222222;
        --siteBackground: #0B0B0B;
        --siteBackgroundTrans: rgba(11,11,11,0.92);
		--mobileMenuButtonActiveBg: rgba(38,38,38,0.2);
    }
}

@media all and (max-width: 600px) {
    :root {
        --pagePaddingSide: calc(13px + 0.6vw);
        --pagePaddingTop: 15px;
    }
}

html {
    background: var(--siteBackground);
    height: 100%;
    margin: 0px;
    padding: 0px;
    -webkit-text-size-adjust: 100%;
    font-size: var(--rootFontSize);
}

body {
    background: var(--siteBackground);
    font-family: var(--siteFont);
    font-weight: var(--fontStdWeight);
    color: var(--siteColor);
    height: 100%;
	min-height: min-content;
	height: min-content;
    margin: 0px;
    padding: 0px;
}

a {
    color: var(--linkColor);
    text-decoration: none;
    transition: color var(--transition), border-color var(--transition), border var(--transition);
    -webkit-transition: color var(--transition), border-color var(--transition), border var(--transition);
    -moz-transition: color var(--transition), border-color var(--transition), border var(--transition);
    border-bottom: 1px solid;
    border-color: var(--linkBorderColor);
}

a:visited {
    color: var(--linkColor);
    text-decoration: none;
}

a:hover, a:active {
    color: var(--linkHoverColor);
    text-decoration: none;
	border-bottom: 2px solid;
    border-color: var(--linkHoverColor);
}

p {
    margin-block-start: 0px;
    margin-block-end: 0px;
    padding-bottom: 1.3em;
    margin-bottom: 0px;
    padding-top: 0px;
    line-height: 1.4em;
}

p:last-child {
    margin-bottom: 0px;
}

h1 {
	font-size: 1.3em;
	font-weight: var(--fontBoldWeight);
	margin: 0px;
	margin-block-start: 0px;
    margin-block-end: 0px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
	margin-bottom: 0.9em;
}

img {
    border: none;
    outline: none;
    outline-color: transparent;
}

img[data-src-load], img[data-src-load-thumb] {
    display: none;
    border: none;
    border-color: transparent;
    outline: none;
    outline-color: transparent;
    outline-width: 0px;
    opacity: 0;
    transition: opacity 0.1s linear;
    -webkit-transition: opacity 0.1s linear;
}

img[data-src-load].loaded, img[data-src-load-thumb].loaded {
    opacity: 1;
}

p.linkWrapper {
	margin-top: 0px;
}

.linkWrapper a {
	display: inline-block;
	font-weight: var(--fontBoldWeight);
	padding-top: 0.5em;
	margin-right: 1.4em;
	margin-top: 1rem;
}

.linkWrapper a:last-child {
	margin-right: 0px;
}

.button {
	position: relative;
	border: 2px solid;
	border-color: var(--siteColor);
	padding-top: 0.5em;
	padding-bottom: 0.45em;
	padding-left: 0.7em;
	padding-right: 0.7em;
	margin-right: 0px;
	color: var(--siteColor);
	border-radius: 5px;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, top 0.2s ease;
	moz-transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, top 0.2s ease;
	webkit-transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, top 0.2s ease;
}

.button:hover {
	background-color: var(--siteColor);
	border-color: var(--siteColor);
	color: var(--siteBackground);
}

.button:active {
	top: 1px;
	background-color: var(--siteColor);
	border-color: var(--siteColor);
	color: var(--siteBackground);
}

.wide .button {
	min-width: 20%;
	padding-left: 1.2em;
	padding-right: 1.2em;
	text-align: center;
}

.smallButton {
	position: relative;
	border: 2px solid;
	border-bottom: 2px solid;
	border-color: transparent;
	padding-top: 0.2em;
	padding-bottom: 0.25em;
	padding-left: 0.3em;
	padding-right: 0.3em;
	color: var(--siteColor);
	background-color: var(--smallButtonBg);
	border-radius: 5px;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, top 0.2s ease;
	moz-transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, top 0.2s ease;
	webkit-transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, top 0.2s ease;
}

.smallButton:hover {
	background-color: var(--siteColor);
	border-color: var(--siteColor);
	color: var(--siteBackground);
}

.button:active {
	top: 1px;
	background-color: var(--siteColor);
	border-color: var(--siteColor);
	color: var(--siteBackground);
}

/* PAGE STRUCTURE */
#wrapper {
    box-sizing: border-box;
    width: calc(100vw - 2 * var(--pagePaddingSide));
	height: 80%;
    margin-left: var(--pagePaddingSide);
    margin-right: var(--pagePaddingSide);
    position: relative;
	max-width: var(--imageMaxWidth);
    margin: 0 auto;
	/* Flex to push footer to bottom */
	display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#wrapper > .content {
    box-sizing: border-box;
    max-width: 100%;
}

#wrapper > .content#gallery {
    width: 100%;
    text-align: center;
}

#navContainer {
	width: 100vw;
    box-sizing: border-box;
    line-height: 1.2em;
    padding-left: var(--pagePaddingSide);
    padding-right: var(--pagePaddingSide);
	padding-bottom: var(--pagePaddingSide);
	margin-bottom: 2vh;
	padding-top: 1vh;
    background: var(--siteBackground);
    overflow-y: auto;
    overflow-x: hidden;
}

footer {
	width: 100%;
	box-sizing: border-box;
	padding-top: calc(0.5vh + 0.3em);
	padding-bottom: calc(0.5vh + 0.3em);
	display: flex;
    justify-content: space-between;
    align-items: center;
	column-gap: calc(1em + 2vw);
}

/* NAVIGATION */
#navInner {
    width: 100%;
	max-width: var(--imageMaxWidth);
    position: relative;
    margin: 0 auto; /* Centers */
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
	display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    column-gap: 5vw;
	font-weight: var(--fontStdWeight);
}

#navContainer .siteTitleBlock {
}

#navContainer .siteTitleBlock a {
    color: var(--siteColor);
    border-bottom: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

#navContainer .siteTitleBlock:hover a, #navContainer .siteTitleBlock:active a {
    color: var(--siteColor);
    text-decoration: none;
}

#navContainer .siteTitleBlock .title {
    margin-bottom: 0.9rem;
	font-family: "Literata",serif; /*Alts: Brygada 1918, Source Serif 4 */
	font-weight: 600;
    font-size: 2.2rem;
	font-style: normal;
	letter-spacing: 0.1rem;
    line-height: 1.75rem;
	white-space: nowrap;
}

#navContainer .siteTitleBlock .tag {
    font-size: 1.22rem; /* Larger than cine */
    font-weight: var(--fontStdWeight);
    line-height: 1.25em;
}

#navContainer nav {
    font-size: 1.15rem;
}

#navContainer nav #navLinksWrapper {
    width: 100%;
	display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 0.1em;
}

#navContainer nav a {
    display: block;
	text-align: center;
    color: var(--siteColor);
    text-decoration: none;
	padding: 0.75em;
	border-radius: 5px;
	transition: background-color 0.2s ease, color 0.2s ease;
	moz-transition: background-color 0.2s ease, color 0.2s ease;
	webkit-transition: background-color 0.2s ease, color 0.2s ease;
}

#navContainer nav a:not(.smallButton,.button) {
	border-bottom: none;
}

#navContainer nav a:hover {
    color: var(--linkHoverColor);
	background-color: var(--linkHoverBgColor);
    text-decoration: underline;
}

#navContainer nav a.currentPage {
    text-decoration: underline;
    cursor: default;
    font-weight: var(--fontBoldWeight);
}

#navContainer nav a.currentParentPage {
    text-decoration: underline;
}

/* Prevent color change on current page */
#navContainer nav a.currentPage:hover {
    color: var(--siteColor);
	background-color: transparent;
}

#navContainer nav .divider {
    width: 1px;
	margin-left: 0.5em;
	margin-right: 0.5em;
    background: var(--ruleColor);
    height: 1.2em;
	opacity: 20%;
}

#mobileMenuButton {
    display: none;
}

/* CONTENT STRUCTURE */

/* Footer Elements */
#footerCTA {
	font-size: 1.1rem;
}

footer #copyright {
	font-size: 0.85em;
	text-align: right;
}

/* IMAGE GALLERY */
#gallery {
    --goRightCursor: e-resize;
    --goLeftCursor: w-resize;
	--goRightCursor:  url('/images/cursor-right.png'), e-resize;
    --goLeftCursor: url('/images/cursor-left.png'), w-resize;
}

#gallery .items {
	width: 100%;
    height: 100%; /* Reset in JS */
	max-width: var(--imageMaxWidth);
    margin: 0 auto;
	position: relative;
}

#gallery .items .panel {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    display: none;
	justify-content: center;
    align-items: center;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background: none;
}

#gallery .items .panel.hidden {
	display: none;
}

#gallery .items .panel.loaded {
}

#gallery .items .panel.currentPanel {
    display: flex;
	column-gap: 2vw;
}

#gallery .items .panel img {
    width: 100%;
    height: 100%;
    max-width: var(--imageMaxWidth);
    max-height: var(--imageMaxWidth);
    object-fit: contain;
    cursor: var(--goRightCursor);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: none;
    outline: none;
}

#gallery .items .panel.double img {
	width: 50%;
	object-position: right;
}

#gallery .items .panel.double img:last-child {
	width: 50%;
	object-position: left;
}

#gallery .items .panel.loaded img {
    background: none;
    border: none;
    outline: none;
}

#gallery .items .panel img.clickGoRight {
    cursor: var(--goRightCursor);
}

#gallery .items .panel img.clickGoLeft {
    cursor: var(--goLeftCursor);
}

#gallery .items .panel img.clickGoNone {
    cursor: default;
}

#gallery .items .panel:last-of-type img {
    cursor: default;
}

#gallery #galleryNav {
    margin-top: 20px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

@media all and (max-width:780px) {
	#gallery #galleryNav {
		margin-top: 10px;
	}
}

#gallery #galleryNav #leftArrow {
    margin-right: 5px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#gallery #galleryNav #rightArrow {
    margin-left: 5px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#gallery #galleryNav img {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
	
#gallery #galleryNav #leftArrow, #gallery #galleryNav #rightArrow  {
	display: inline-block;
	opacity: 0.65;
	cursor: pointer;
	transition: opacity var(--transition);
	moz-transition: opacity var(--transition);
	webkit-transition: opacity var(--transition);
}

@media screen and (prefers-color-scheme: dark) {
    #gallery #galleryNav #leftArrow, #gallery #galleryNav #rightArrow  {
        filter: invert(1);
    }
}

#gallery #galleryNav #leftArrow img, #gallery #galleryNav #rightArrow img  {
	height: 25px;
}

@media (hover: hover) {
    #gallery #galleryNav #leftArrow:hover, #gallery #galleryNav #rightArrow:hover {
        opacity: 0.95;
    }
}

#gallery #galleryNav #leftArrow:active, #gallery #galleryNav #rightArrow:active  {
    opacity: 0.95;
}

#gallery #galleryNav #leftArrow.inactive, #gallery #galleryNav #rightArrow.inactive, #gallery #galleryNav .inactive:hover, #gallery #galleryNav .inactive:active  {
	opacity: 0.15;
	cursor: default;
}
	
#gallery #galleryNav #leftArrow img {
	-ms-transform: rotate(180deg);
  	-webkit-transform: rotate(180deg);
   	transform: rotate(180deg);
}

#gallery #galleryNavOverlayWrapper {
    display: none;
    position: absolute;
    z-index: 999;
    left: 0px;
    top: 0px;
    width: 100%;
	max-width: var(--imageMaxWidth);
    height: 100%;
    cursor: var(--goRightCursor);
}

#gallery #galleryNavOverlayWrapper.clickGoRight {
    cursor: var(--goRightCursor);
}

#gallery #galleryNavOverlayWrapper.clickGoLeft {
    cursor: var(--goLeftCursor);
}

#gallery #galleryNavOverlayWrapper.clickGoNone {
    cursor: default;
    display: none;
}

#gallery #galleryNavOverlayWrapper .galleryNavOverlay {
    display: inline-block;
    height: 100%;
}

#gallery #galleryNavOverlayWrapper #galleryNavOverlayLeft {
    width: 30%;
    cursor: var(--goLeftCursor);
}

#gallery #galleryNavOverlayWrapper #galleryNavOverlayRight {
    width: 70%;
    cursor: var(--goRightCursor);
}

@media all and (min-width: 1080px) {
    #gallery #galleryNavOverlayWrapper #galleryNavOverlayLeft {
        width: calc((100% - 1080px)/2 + (1080px * 0.3));
    }

    #gallery #galleryNavOverlayWrapper #galleryNavOverlayRight {
         width: calc((100% - 1080px)/2 + (1080px * 0.7));
    }
}

@media all and (max-width:880px) {
	#gallery .items .panel.double img {
		object-position: center;
	}

	#gallery .items .panel.double img:last-child {
		object-position: center;
	}
	
	#gallery #galleryNav #leftArrow img, #gallery #galleryNav #rightArrow img  {
		height: 22px;
	}
}

@media all and (max-width:730px) {
	#gallery .items .panel.double img {
		object-position: left;
	}

	#gallery .items .panel.double img:last-child {
		object-position: right;
	}
}

#gallery #galleryNavOverlayWrapper #galleryNavOverlayRight.inactive, #gallery #galleryNavOverlayWrapper #galleryNavOverlayLeft.inactive {
    cursor: default;
}

#gallery #galleryText {
	font-size: 1.2rem;
	text-align: left;
	max-width: calc(0.7 * var(--imageMaxWidth));
	margin: 2em auto;
	margin-bottom: 1em;
}

/* When moved inline for mobile */
#gallery #galleryText.panel {
	margin-top: -4vh;
	margin-bottom: -4vh;
}

/* TEXT PAGES */
.textContainer {
    box-sizing: border-box;
    min-height: 100%;
    max-width: var(--imageMaxWidth);
	margin: 0 auto;
    padding-top: calc(var(--pagePaddingTop) + env(safe-area-inset-top));
    padding-bottom: calc(var(--pagePaddingTop) + env(safe-area-inset-bottom));
}

.textContainer .rule {
    height:1px;
    background: var(--ruleColor);
    margin-top: 0.5em;
    margin-bottom: 1.8em;
    width: 5%;
    min-width: 50px;
}

.textContainer .rule.spacer {
    height:1px;
    background: none;
    margin-top: 0.5em;
    margin-bottom: 1.8em;
    width: 100%;
}

.textContainer .bold {
    font-weight: var(--fontBoldWeight);
}

.textContainer .clientBlock {
	font-weight: 400;
	text-align: center;
	line-height: 130%;
}

.textContainer .clientBlock span {
	display: inline-block;
	margin-left: 1em;
	margin-right: 1em;
	margin-top: 0.3em;
	margin-bottom: 0.3em;
	background: rgba(244,244,244,0.40);
	padding: 0.1em;
	border-radius: 4px;
}

@media screen and (prefers-color-scheme: dark) {
	.textContainer .clientBlock span {
		background: rgba(45,45,45,0.40);
	}
}

.textContainer .contactBlock {
    font-weight: var(--fontBoldWeight);
	font-size: 1.1em;
    line-height: 2em;
	margin-top: 1em;
	margin-bottom: 1.2em;
}

.textContainer .contactBlock.center {
		text-align: center;
	}

.textContainer .contactBlock span {
	display: block;
	margin-bottom: 0.5em;
}

.textContainer .contactBlock span:last-child {
	margin-bottom: 0.1em;
}

.textContainer #returnLink {
	margin-top: -1em;
	font-size: 0.98em;
	margin-bottom:1.2em;
	font-weight: 400;
}

.textContainer #returnLink a {
	opacity: 0.88;
}

.textContainer #returnLink a:hover, .textContainer #returnLink a:active {
	opacity: 1;
}

/* Home page */

#homeGrid {
	width: 100%;
	flex: 1 1 auto;
    min-height: 50%;
	max-height: 84vh;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: 1fr;
    justify-content: center;
    row-gap: calc(10px + 1.5vh);
    column-gap: calc(2px + 1vh + 2vw);
    margin-bottom: 2vh;
}

#homeGrid .item {
	height: 100%;
	max-height: calc(var(--imageMaxWidth) * 0.66);
	position: relative;
	overflow: hidden;
}

/* Portrait or almost square: use rows */
@media (max-aspect-ratio: 1/1) {
  #homeGrid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
  }
}

/* Landscape: use columns */
@media (min-aspect-ratio: 1/1) and (max-height: 1085px) {
  #homeGrid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
  }
}

#homeGrid a.item, .textContainer .homeGrid a.item:hover, .textContainer .homeGrid a.item:active {
	border-bottom: 0px;
}

#homeGrid .item .image {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #fff;
}

#homeGrid .item .image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	-moz-transition: transform var(--transition);
	-webkit-transition: transform var(--transition);
	transition: transform var(--transition);
}

#homeGrid .item .text {
	width: 100%;
	min-height: 10px;
	font-weight: var(--fontBoldWeight);
	color: var(--linkColor);
    padding-top: 0.2em;
    font-size: 1.4rem;
    font-weight: var(--fontBoldWeight);
    position: absolute;
    bottom: 0px;
    box-sizing: border-box;
    padding: 0.4em;
    background: rgba(255, 255, 255, 0.65);
    text-align: center;
	-moz-transition: background var(--transition), color var(--transition), padding-top var(--transition), padding-bottom var(--transition), bottom var(--transition);
	-webkit-transition: background var(--transition), color var(--transition), padding-top var(--transition), padding-bottom var(--transition), bottom var(--transition);
	transition: background var(--transition), color var(--transition), padding-top var(--transition), padding-bottom var(--transition), bottom var(--transition);
}

#homeGrid a.item:hover .text {
	background: rgba(255, 255, 255, 0.95);
	color: var(--linkHoverColor);
	padding-top: 1.2em;
	padding-bottom: 1.2em;
}

#homeGrid a.item:hover .image img {
	transform: scale(1.1);
}

#homeGrid a.item:active .text{
	background: rgba(255, 255, 255, 1);
	color: var(--linkHoverColor);
	padding-top: 1.2em;
	padding-bottom: 1.2em;
	bottom: -2px;
}

#homeGrid a.item:active .image img {
	transform: scale(1.03);
	opacity: 0.9;
}

/* Text & Image Sections + Services */
.textImageSection {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	column-gap: calc(1em + 2vw);
	width: 100%;
}

.textImageSection img {
	width: 33%;
	max-width: var(--imageMaxWidth);
	object-fit: cover;
}

.textImageSection .text {
	width: 70%;
	font-size: 1.1rem;
}

.textImageSection .text p {
	line-height: 1.5em;
}

.textImageSection h1 {
	font-size: 1.4em;
}

.serviceSection {
	margin-bottom: calc(3em + 1.5vh);
	padding-top: calc(3em + 1.5vh);
}	

.singleSectionVisible .serviceSection {
	margin-bottom: calc(2em + 1.5vh);
	padding-top: calc(1.3em + 1vh);
}

@media all and (max-width:880px) {
	.textImageSection {
		align-items: stretch;
		flex-direction: column;
    	row-gap: calc(1.5em + 0.5vh);
	}
	
	.serviceSection {
		margin-bottom: calc(2em + 1vh);
		padding-top: calc(2em + 1vh)
	}
	
	.textImageSection img {
		width: 100%;
		max-height: 350px;
	}
	
	.textImageSection .text {
		width: 100%;
	}
}

/* NOT FOUND */
#notFoundContainer {
    text-align: center;
	font-size: 1.15rem;
}

/* Mobile menu */
body.noScroll {
	top: 0;
	left: 0;
	position: fixed !important; /* Overwrite media query changes */
	overflow: hidden !important;
	width: 100% !important;
}

body.mobile-menu #navContainer {
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	height: unset;
	align-items: flex-start;
	background: none;
	z-index: 1000;
	border-bottom: 1px solid rgba(120,120,120,0.3);
	overflow-y: unset;
	overflow: unset;
}

body.mobile-menu #navInner {
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: space-between;
	background: var(--siteBackgroundTrans);
	z-index: 1000;
	overflow-y: unset;
	overflow: unset;
	padding-top: 0.5vh;
	padding-bottom: 0.5vh;
	-webkit-transition: background var(--transition);
	-moz-transition: background var(--transition);
	transition: background var(--transition);
}
body.mobile-menu #navInner.openMenu {
	background: var(--siteBackground);
}

body.mobile-menu #mobileMenuButton {
	display: inline-flex;
	right: var(--pagePaddingSide);
	height: 20px;
    width: 25px;
	align-items: center;
	justify-content: space-between;
	flex-direction: column;
	margin-right: 0px;
	padding-left: var(--pagePaddingSide);
	padding-right: var(--pagePaddingSide);
	padding-top: 25px;
	padding-bottom: 25px;
	cursor: pointer;
	z-index: 999999;
	opacity: 1;
	background: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	tap-highlight-color: rgba(0,0,0,0);
}
body.mobile-menu #mobileMenuButton:active {
	background: var(--mobileMenuButtonActiveBg);
}
body.mobile-menu #mobileMenuButton div {
	opacity: 1;
	width: 110%;
	height: 2px;
	border-radius: 1px;
	background: rgba(120,120,120,1.00);
	position: relative;
	top: 0px;
	-webkit-transition: background var(--menuTransition), transform var(--menuTransition), opacity var(--menuTransition), top var(--menuTransition);
	-moz-transition: background var(--menuTransition), transform var(--menuTransition), opacity var(--menuTransition), top var(--menuTransition);
	transition: background var(--menuTransition), transform var(--menuTransition), opacity var(--menuTransition), top var(--menuTransition);
}
body.mobile-menu #mobileMenuButton.openMenu div {
	background: var(--linkColor);
}
body.mobile-menu #mobileMenuButton.openMenu:active div {
	background: rgba(165,165,165,1.00);
}
body.mobile-menu #mobileMenuButton.openMenu div:nth-child(1) {
	transform: rotate(45deg);
	top: calc(50% - 1px);
}
body.mobile-menu #mobileMenuButton.openMenu div:nth-child(2) {
	opacity: 0;
}
body.mobile-menu #mobileMenuButton.openMenu div:nth-child(3) {
	transform: rotate(-45deg);
	position: relative;
	top: calc(-50% + 1px);
}
body.mobile-menu #navContainer .siteTitleBlock {
	padding-left: var(--pagePaddingSide);
	padding-right: var(--pagePaddingSide);
	padding-top: 13px;
	padding-bottom: 10px;
	margin-bottom: 0px;
	z-index: 3;
	background: none;
}

body.mobile-menu #navContainer nav {
	display: none;
	position: fixed;
	width: 100%;
	height: calc(100vh - 95px); /* Re calc in JS */
	margin-top: 95px; /* Re calc in JS */
	top: 0px;
	background: var(--siteBackground);
	left: 0px;
	overflow-y: auto;
	padding-top: 1em;
	padding-left: var(--pagePaddingSide);
	padding-right: var(--pagePaddingSide);
	padding-bottom: calc(1em + env(safe-area-inset-bottom));
	box-sizing: border-box;
	justify-content: center;
	z-index: 2;
}
body.mobile-menu #navContainer nav #navLinksWrapper {
	margin: auto 0;
	display: flex;
	justify-content:space-between;
	flex-direction: column;
	text-align: center;
}
body.mobile-menu #navContainer nav a {
	font-size: 1.2em;
	margin-bottom: 1px;
	margin-top: 1px;
	padding-bottom: 0.7em;
	padding-top: 0.7em;
	width: 100%;
	box-sizing: border-box;
	display: none;
}
body.mobile-menu #navContainer nav a:first-of-type {
	margin-top: 0px;
}
body.mobile-menu #navContainer nav a:last-of-type {
	margin-bottom: 0px;
}

body.mobile-menu #navContainer nav a.currentPage {
	font-weight: var(--fontBoldWeight);
}

body.mobile-menu #navContainer nav .divider {
	height: 1px;
	width: 2.5em;
	align-self: center;
	margin-left: 0px;
	margin-top: 1.1em;
	margin-bottom: 1em;
	margin-right: 0px;
	margin-left: 0px;
}

/* RESPONSIVE - SMALL SCREENS */
@media all and (max-width: 600px) {
    html {
        font-size: var(--rootFontSizeMobile);
    }
    p {
        padding-bottom: 1.5em;
    }
    #wrapper {
        align-items: unset;
    }
	footer {
		padding-top: calc(0.7vh + 0.85em);
		padding-bottom: calc(0.5vh + 0.5em);
	}
	footer #contact {
		font-size: 0.85em;
		flex-grow: 1;
		text-wrap: nowrap;
	}
	footer #copyright {
		font-size: 0.55em;
		line-height: 98%;
	}
	#homeGrid {
		margin-bottom: 0px;
	}
	#homeGrid .item .text {
		font-size: 1.2rem;
	}
	#homeGrid .item .text {
    	background: rgba(255, 255, 255, 0.72);
	}
    .page-type-portfolio #wrapper {
		display: block; /*Disable click gallery*/
        padding-left: var(--pagePaddingSide);
        padding-right: var(--pagePaddingSide);
        width:100%;
		height: unset;
    }
    #wrapper > .content {
        width: 100vw;
        padding-left: 0px;
        padding-right: 0px;
    }
    
    body.page-type-portfolio {
        position: unset;/*Disable click gallery*/
        width:100%;
    }
	
	#navContainer .siteTitleBlock {
		width: 70%;
		padding-left: var(--pagePaddingSide);
		padding-right: var(--pagePaddingSide);
		padding-top: 13px;
		padding-bottom: 10px;
		margin-bottom: 0px;
		z-index: 3;
		background: none;
	}
	#navContainer .siteTitleBlock .title {
		margin-right: 1em;
		position: relative;
		margin-bottom: 10px;
		font-size: 1.3rem;
		line-height: 1.2rem;
	}
	#navContainer .siteTitleBlock .tag {
		font-size: 0.95rem;
	}
    
    #gallery {
        overflow-y: auto;/*Disable click gallery*/
		--goRightCursor: default;
		--goLeftCursor: default;
    }
    
    #gallery #galleryNav {
        position: fixed;
        top: unset;
        bottom: 1vh;
        width: 100vw;
        left: 0px;
        margin-top: 0px;
		display: none; /*Disable click gallery*/
    }
    
    .instagram #gallery #galleryNav {
        margin-top: 1.5vh;
        bottom: unset;
    }
    
    #gallery #galleryNav #leftArrow {
        margin-right: 7vw;
        padding: 1.2vw;
        padding-bottom: 0.5vw;
        padding-left: 0.2vw;
        border-radius: 1vw;
    }
    
    #gallery #galleryNav #rightArrow {
        margin-left: 7vw;
        padding: 1.2vw;
        padding-bottom: 0.5vw;
        padding-right: 0.2vw;
        border-radius: 1vw;
    }
	
	#gallery #galleryNav #leftArrow:not(.inactive), #gallery #galleryNav #rightArrow:not(.inactive) {
		-webkit-tap-highlight-color: rgba(0,0,0,0);
        tap-highlight-color: rgba(0,0,0,0);
	}
    
    #gallery #galleryNav #leftArrow:not(.inactive):active, #gallery #galleryNav #rightArrow:not(.inactive):active  {
        opacity: 1;
        background: rgba(144,144,144,1.00);
    }
    
    #gallery #galleryNav #leftArrow img, #gallery #galleryNav #rightArrow img {
        height: 3.5vh;
        max-height: 30px;
    }
	
	#gallery .items{
		height: auto; /*Disable click gallery*/
	}
	
	#gallery .items .panel:first-child {
		padding-top: 0px;
	}
	
	#gallery .items .panel {
		/*Disable click gallery*/
		position: static;
		overflow: auto;
		display: block;
		padding-top: 8vh;
	}
    
    .textContainer {
    }
    
    .textContainer .rule {
        margin-bottom: 2em;
    }
    
    #notFoundContainer {
        text-align: center;
    }
} /* Media query width 600px ends */