/* _normalize.scss */
* {
outline:0;
margin: 0;
padding: 0;
border: 0;
width:auto;
height:auto;
font-style:normal;
font-weight:normal;
position:relative;
list-style:none;
text-rendering:optimizeLegibility;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent; /* For some Androids */
box-sizing: border-box;
}

a,
button,
label,
select {
  > * {
    pointer-events: none;
  }
}
/*div.email > span:nth-child(1),
div.email > span:nth-child(2),
div.email > span:nth-child(3) {
	display: none;
}*/
div.email {
display:none;
}

/* begin ++++++++++++++ STRUCTURE +++++++++++ */
html,
body,
html::after {
width: 100%;
height: 100%;
padding: env(safe-area-inset, 0);
overflow-x:hidden;
}

html {
font-size: 62.5%;
background:var(--black);
-webkit-text-size-adjust: 100%;
/*-ms-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;*/
text-size-adjust: 100%;
}
html::after {
content:"";
position:absolute;
top:0;left:0;
background:var(--grayT3-deg306);
opacity:0.75;
}
/* begin ++++++++++++++ PRIMARY BODY STYLE +++++ */
body {
font:var(--body);
color: var(--gray5);
/*background:var(--gray3);*/
grid-template-areas: 
"main-nav"
"main-content"
"main-footer"; 
display: grid;
}
body {
	grid-template-columns:100%;
	grid-template-rows: 7.0rem max-content 7.0rem;
	}
body::before,
body::after {
	content:"";
	width:100%;
	height:100vmax;
	background-position:center center;
	background-repeat:repeat;
	position:fixed;
	}
body::after {
	min-width:100%;
	min-height:100vh;
	background: url("../../images/backgrounds/pattern-alt2.svg");
	/*background-size:6.935rem 6.935rem;*/
	background-size: var(--fs-background-sm);
	background-position:center;
	background-repeat:repeat;
	transform: rotate(0);
	opacity:.85;
	}
body::before {
	min-width:100%;
	min-height:100vh;
	background-image: url("../../images/backgrounds/pattern-alt.svg");
	/*background-size: 7.812rem 7.812rem;*/
	background-size: var(--fs-background-base);
	background-position:center;
	background-repeat:repeat;
	transform:rotate(180deg);
	opacity:1.0;
	}
.bg-gradient {
	background:var(--black50T-deg270);
	width:100%;
	height:100vmax;
	background-position:center center;
	background-repeat:repeat;
	position:fixed;
	transform:rotate(180deg);
	opacity:.70;
	z-index:1;
	}
/* end ++++++++++++++ PRIMARY BODY STYLE +++++ */
main {
	grid-area: main-content;
	width:100vmin;
	height:100vmax;
	top:0;
	}
footer .nav-footer {
	display:flex;
	flex-flow: row nowrap;
	justify-content:space-between;
	align-items:baseline;
	}

/* +++ begin ----------- HYPERLINKS ------ */
 /* unvisited link */
a.invisible:link,
a.invisible:visited,
a.invisible:hover,
a.invisible:visited {
	color: transparent;
	text-decoration:none;
}
/* +++ end ----------- HYPERLINKS ------ */
.no-style {
	min-width:0;
	min-height:0;
	padding:0;
	margin:0;
	}
.hidden-content {
	visibility:hidden;
	}
.not-shown {
	width:0;
	height:0;
	display:none;
	opacity:0;
	}
.shown {
	min-width:0;
	min-height:0;
	display:block;
	opacity:1;
	}
.wrapper-home,
.wrapper-fa,
.wrapper-il,
.wrapper-de,
.wrapper-ab {
	width:100vw;
	display:flex;
	flex-flow: column nowrap;
	justify-content:space-between;
	}
.wrapper-home::before,
.wrapper-fa::before,
.wrapper-il::before,
.wrapper-de::before,
.wrapper-ab::before,
.wrapper-home::after,
.wrapper-fa::after,
.wrapper-il::after,
.wrapper-de::after,
.wrapper-ab::after {
	content:"";
	background-repeat: no-repeat;
	background-attachment:fixed;
	display:inline-block;
	position:fixed;
	z-index:1;
	}
.wrapper-home::before,
.wrapper-fa::before,
.wrapper-il::before,
.wrapper-de::before,
.wrapper-ab::before {
	height:100vh;
	width:1.125rem;
	background-position: 0 0;
	background-size: 100% 100%;
	top:0;left:0;
	}
.wrapper-home::after,
.wrapper-fa::after,
.wrapper-il::after,
.wrapper-de::after,
.wrapper-ab::after {
	width:100vw;
	height:0.2rem;
	background-position: 1.125rem 100%;
	background-size: 100% 100%;
	bottom:7.6rem;left:0;
	}

.wrapper-home::before {
	background-image:var(--LA-border-90deg);
	}
.wrapper-home::after {
	background:var(--LA-border);
	}

.wrapper-fa::before {
	background-image:var(--FA-border-90deg);
	}
.wrapper-fa::after {
	background:var(--FA-border);
	}
.wrapper-il::before {
	background-image:var(--IL-border-90deg);
	}
.wrapper-il::after {
	background:var(--IL-border);
	}
.wrapper-de::before {
	background-image:var(--DE-border-90deg);
	}
.wrapper-de::after {
	background-image:var(--DE-border);
	}
.wrapper-ab::before {
	background-image:var(--AB-border-90deg);
	}
.wrapper-ab::after {
	background-image:var(--AB-border);
	}

.expand {
	opacity:1;
	animation-name:page-expand;
	animation-iteration-count: 1;
	animation-fill-mode: forward;
	animation-timing-function:cubic-bezier(0.1, 0.3, 0.5, 0.6);
	animation-duration: 1.5s;
	}
@-webkit-keyframes page-expand {
	from {
	opacity: 0;
	transform: scaleX(0);
	translate: 0 100vh;
  }
	to {
	opacity: 1;
	transform: scaleX(1);
	translate: 0;
  }
}
@keyframes page-expand {
	from {
	opacity: 0;
	transform: scaleY(0);
	translate: 0 100vh;
  }
	to {
	opacity: 1;
	transform: scaleX(1);
	translate: 0 0;
  }
}

header,
section,
article {
	width:100%;
	}
header.landing {
	visibility:visible;
	}
figure {
	max-width: 100%;
	height:auto;
	}
figcaption {
	display:none;
	}
figcaption.show-caption {
	display:block;
	}
h1 {
	font: var(--head1);
	min-height:0;
	text-align:center;
	}
h1,
h2 {
	padding:0.6rem 0 0 0;
	display:block;
	}
h2 {
	font: var(--head2);
	text-align:center;
	line-height:.90;
	padding-bottom:0.9rem;
	}

.title {
	min-height:0;
	min-width:0;
	}

/* h2 tags, ROTATED */
.fine-art,
.illustration,
.design,
.about {
	font: var(--head3);
	white-space:nowrap;
	}
.fine-art::before {
content:"Fine Art";
	}
.illustration::before {
content:"Illustration";
	}
.design::before {
content:"Design";
	}
/*.about::before {
content:"About";*/
	}
.fine-art::after,
.illustration::after,
.design::after,
.about::after {
	content:attr(modifier);
	font: var(--head3-script);
	line-height:.90;
	}
.heading-top > h2,
.heading-top .mob-land > h2,
.heading-bottom > h2 {
	font: var(--head2); 
	text-align:center;
	}

.heading-top .mob-land > h2::before,
.heading-top > h2::before,
.heading-bottom > h2::before {
	content:attr(first-line)
	font: var(--head4);
	text-align:center;
	display:block;
	}
h3 {
	font: var(--head3);
	margin:1.2rem 0 0.6rem 0;
	}

h4 {
	font: var(--head4);
	margin:1.2rem 0 0.6rem 0;
	}
p {
	font: var(--body);
	text-indent: 3ch;
	}
p:first-of-type {
	/*padding-top:1.0rem;*/	
	text-indent: 0;
	}
/*p:last-of-type {
	padding-bottom:1.6rem;	
	}*/

p.footer-text {
	font: var(--sans-serif-body-small);
	padding-left:3.6rem;
	flex:0 0 66.66%;
	order:1;
	}
em, i {
	font: var(--body-italic);
	font-style:italic;
	}

strong {
	font: var(--body-bold);
	}

sup {
font-size:75%;
}
span.super {
	font-size:75%;
	vertical-align:10%;
	}
span.super::after {
	content:"";
	}

ul {
  width: 100%; 
}

li {
	width: 100%;
	line-height: 3.0rem;
	color:var(--white); 
	}
.about-title-align {
	text-align:center;
	margin-right:auto;
	margin-left:auto;
	}
.right-align {
	text-align:right;
	}
.inline {
	display:inline;
	}
/* end ++++++++++++++ STRUCTURE +++++++++++ */
/* begin ++++++++ LOGO AND LOGOTYPE expanded ++++++++ */
.landing-logo,
.landing-logo-desktop,
.page-head {
	width:calc(25vw - 0.6rem);
	height:13.091rem;
	background-repeat:no-repeat;
	background-position:top left;
	/*background-attachment:local, scroll;*/
	background-attachment:inherit;
	position:absolute;
	top:0.6rem;
	left:2.4rem;
		&::after {
		content:"wellington\A  visuals";
 		font-family: "Trajan-regular", serif;
		font-weight: 400;
		font-style: normal;
		white-space: pre-wrap;
		}
	}
	.page-head {
		background-image:url("../../images/icons/home-icon.svg");
		background-size:7.08rem 11.43rem;
		background-position:1.6rem 0;
		background-repeat:no-repeat;
		top:2.4rem;
		cursor:pointer;
		z-index:2;
 		&::after {
			font-size:2.21rem;
			line-height:1.1;
			position:absolute;
			top:3.1rem;left:8.2rem;
			}
		}
	.page-head:hover,
	.page-head:active {
		background-image: url("../../images/icons/home-icon-hover.svg");
		color:var(--gray7);
		}
	.landing-logo,
	.landing-logo-desktop {
		background-image:url("../../images/logos/logo_2.svg");
		background-size:8.113rem 13.091rem;
		background-position:1.6rem 0;
		background-repeat:no-repeat;
		/*position:absolute;*/
		&::after {
			position:absolute;
			font-size:2.47rem;
			line-height:1.1;
			top:3.6rem;left:9.6rem;
			color:var(--gray5);
			}
		}
	.landing-logo {
		top:1.6rem;
		}
	.landing-logo-desktop {
		top:1.3rem;
		}

/* end +++++++++ LOGO AND LOGOTYPE expanded */

/* begin ++++++++++++++ SCROLLBARS +++++++++++ */
.main-scroller {
	width:100vw;
	height:calc(100vmax - 15.6rem);
	top:7.6rem;left:-0.3rem;
	overflow-x:hidden;
	overflow-y:scroll;
	scroll-behavior: smooth;
	scroll-snap-type: y mandatory;
	scrollbar-width: thin;
	scrollbar-color:var(--gray4) var(--black);
	}
@supports selector(::-webkit-scrollbar) {
.main-scroller::-webkit-scrollbar {
	width: 0.8rem;
	-webkit-overflow-scrolling: touch;
	background: transparent; 
	display: none;
		&::-webkit-scrollbar-track {
		background:var(--gray1);
		}
		&::-webkit-scrollbar-thumb:vertical {
		height:66%;
		background-image:var(--gray4-deg180); 
		}
	}
}

/* end ++++++++++++++ SCROLLBARS +++++++++++ */

/* begin +++++++++++++ LANDING PAGE */
.home {
	display:flex;
	flex-flow: row wrap;
	justify-content: center;
	align-content: center;
	/*align-items: right;*/
	}
.home header {
	top:0.9rem;
	order:1;
	}

/* end +++++++++++++ LANDING PAGE */

/* begin +++++++++++ IMAGES +++++++++++ */
.thumbnail-wrapper {
	display:flex;
	flex-flow:row wrap;
	justify-content:flex-start;
	}

/* THUMB CAPTIONS  */
.thumb > img,
.thumb:hover > img,
.thumb:active > img,
.portfolio-image {
	max-width:100%;
	height:auto;
	display:block;
	}

.portfolio-image {
	border:0.2rem solid var(--gray5);
	}
.thumb > img {
	object-fit:contain;
	border:0.1rem solid var(--gray5);
	filter: unset;
	}
.thumb:hover > img, 
.thumb:active > img {
	filter: 
	grayscale(100%) 
	sepia(32%) 
	brightness(95%) 
	hue-rotate(179deg) 
	saturate(158%) 
	contrast(97%);
	border:0.1rem solid var(--gray7);
	}
/* Samples */
figure.sample {
	width:100%;
	padding-top:0.6rem;
	& figcaption {
	font: var(--body-small);
	display:block;
	}
}
/* end +++++++++++ IMAGES +++++++++++ */
/* begin ++++++++++ SAMPLES +++++ */
.sample-description h4 {
font: var(--head4);
	color:var(--gray6);
	display:inline;
	}
.sample-description h4::after {
	content:":\00a0"
	}
.text {
	font: var(--body);	
	margin:1.6rem 0 0 0;
	display:block;
	}
.text-note {
	font: var(--body-small);
	text-indent:-1ch;
	margin:2.9rem 0 0 0;
	display:block;
	}

/* end ++++++++++ SAMPLES +++++ */
/* end +++++++++++++ TEXT-HEAVY PAGES 

/* end +++++++++++++ TEXT-HEAVY PAGES */
