@charset "UTF-8";

*, *:before, *:after { -ms-box-sizing: border-box; box-sizing: border-box; }
/*:root { font-size: calc(12px + (24 - 12) * ((100vw - 400px) / (1140 - 400))); }*/


:root {
	--link: #00bfff;
	--link-alt2: #563918;
	--link-alt1: #b3a44a;
	--accent1: #9b7e12;
	--accent2: #b3a44a;
	--accent3: #563918;
	--btn-bg: #5D4C42;
	--link-hover: #003466;
	--light-slate: #2f3a4f;
	--shadow: #CCC;
	--padding: 5vw;
  --max-width: 180ch;
  --logo-green: #316542;
  --logo-light-green: #4b9965;
  --logo-gold: #ad8713;
  --logo-brown: #5D4C42;
  --logo-dark-gold: #80630e;
  --logo-light-gold: #ffc61c;
  --txt: #11112A;
  --color: #fafafa;
  --bg: #202020;
  --white: #FFF;
  --purple: #8d44ad;
  --blue: #2a7fb8;
  --indigo: #003466;
  --green: #8fb021;
  --orange: #d25400;
  --pink: #d45b9e;
  --red: #bb3c2d;
  --teal: #179f87;
  --slate: #263238;
  --cyan: #27ae61;
  --light-gray: #444;
  --light-purple: #ffbfe0;
  --light-blue: #0063da;
  --light-indigo: #003466;
  --light-green: #3baf04;
  --light-orange: #ffa800;
  --light-pink: #ff0084;
  --light-red: #fc0000;
  --light-teal: #04acad;
  --light-slate: #263238;

	--border-color: #444;

	--checkerboard-light: #FFF;
	--checkerboard-dark: #DDD;

  --fluid-type-min: 1.5rem;
  --fluid-type-max: 2.5rem;
  --fluid-type-target: 20vw;


  /* Perfect Fourth */
  --type-ratio: 1.33;

  /*  Body font size  */
  --body-font-size: 1rem;

  /* Compounded headlines sizes */
  --font-size-5: calc(var(--body-font-size) * var(--type-ratio));
  --font-size-4: calc(var(--font-size-5) * var(--type-ratio));
  --font-size-3: calc(var(--font-size-4) * var(--type-ratio));
  --font-size-2: calc(var(--font-size-3) * var(--type-ratio));
  --font-size-1: calc(var(--font-size-2) * var(--type-ratio));

  --padding: 5vw;
  --max-width: 180ch;

  --default-font: clamp(2rem, 14vw + 1rem, 15rem);

  --gold: #ffb338;
  --light-shadow: #77571d;
  --dark-shadow: #3e2904;

  --site-bg: #1d1d1d;
  --line-dark: #000;
  --line-light: #333;
  --nav-bg: #1d1d1d;
  --header-bg: #171717;
}

/* --- Custom mini reset ---------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }

ol , ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
/* -------------------------------------------------------------------- */

html, body { width: 100%; min-height: 100%; }

body { font-family: 'Fontela'; font-size: 100%; /* 16px = 1rem */ height: 100%!important; -webkit-font-smoothing: antialiased; color: var(--color); margin: 0; padding: 0; position: relative; overflow-x: hidden; overflow-y: scroll; background: var(--site-bg); }

.shiny-gold-border { border-width: 4px; border-image-source: linear-gradient(-15deg, #FEDB37 0%, #876415 40%, #ffd88b 60%, #FEDB37 90%); }

.shiny:after { content: ''; position: absolute; top: 0; left: 0; width: 50%; height: 100%; background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.5) 40%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 1.0) 52%, rgba(255, 255, 255, 0.8) 51%, rgba(255, 255, 255, 0.5) 53%, transparent 60%); z-index: 1000; }

.bg-pad { display: inline; padding: 0.2rem 0.5rem; line-height: 2; color: #fff; background: rgba(0, 0, 0, 0.75); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

h1, h2, h3, h4, h5, h6 { display: block; }

h1 { font-size: clamp(1rem, 2rem, 4rem); }
h2 { font-size: clamp(1rem, 2rem, 4rem); }
/*h3 { font-size: clamp(1.5rem, calc(10vw + 1rem), 4rem); }*/
h4 { display: block; font-size: 2rem; /*position: sticky; top: 0;*/ color: var(--logo-green); background-color: #FFF; padding: 0 0 10px 0; text-shadow: 1px 1px 1px var(--logo-gold); text-align: center; margin: 2rem 0 0 0; text-transform: none; font-style: italic; z-index: 1000; }

h4.mr { margin-right: 1rem; padding: 0; }
h4.ml { margin-left: 1rem; padding: 0; }
h5 {  }
h6 { color: var(--txt);margin-top: 3rem; margin-bottom: 1rem; font-size: 1.75rem; }

h2 { display: block; color: var(--light-slate); /*color: var(--logo-gold);*/ padding: 0.5rem 0; text-shadow: 1px 1px 1px #FFF, 2px 2px 1px #AAA, 3px 3px 1px #AAA; }
h2 a { color: var(--logo-lighter-gold); text-decoration: none; }

h3 { font-family: 'FreeSerif Bold'; margin: 0; display: block; font-size: 1.5rem; color: #07d; letter-spacing: clamp(0.1rem, 5vw, 0.25rem); padding: 0; text-align: center; text-transform: uppercase; }

.lg { font-size: 1.25rem; }
.gold-gradient { background: linear-gradient(to bottom, var(--logo-gold) 0%, var(--logo-light-gold) 30%, var(--logo-dark-gold) 80%); -webkit-background-clip: text; /*-webkit-text-fill-color: transparent;*/ background-clip: text; /*text-fill-color: transparent;*/ }

h5 { font-size: 1.25rem; position: relative; width: 100%; margin: 2rem auto 0.5rem auto; display: block; color: var(--logo-green); padding: 0 0 0.25rem 0; }
h5 > span { background: #FFF; padding-left: 1rem; padding-right: 1rem; }

.thumbs { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 1rem; grid-template-rows: repeat(auto-fit, minmax(max-content, 1fr)); width: 100%; }
.thumbs > a { grid-column: span 1; grid-row: span 1; margin-bottom: 0.5rem; position: relative; }
.thumbs > a:nth-of-type(1n+5) { display: none; }

.gallery { height: 100%; display: grid; /*grid-auto-flow: dense;*/ grid-template-columns: 1fr 1fr 1fr 1fr; /*grid-template-rows: 10rem;*/ grid-gap: 1rem; }
.gallery > * { border: 0; outline: 0; border: none; outline: none; grid-area: span 1/span 1; }
.gallery .wide { grid-area: span 1/span 2; }
.gallery .tall { grid-area: span 2/span 1; }
.gallery .wider { grid-area: span 1/span 3; }
.gallery .widest { grid-area: span 1/span 4; }
.gallery .tallest { grid-area: span 4/span 1; }
.gallery .taller { grid-area: span 3/span 1; }
.gallery .box { grid-area: span 2/span 2; }
.gallery .item { grid-area: span 1/span 1; }

figure { display: block; width: 100%; height: 100%; }
figure img { transform: scale(125%); transition: transform 0.25s; }
figure:hover img { transform: scale(100%); }

span.fl:first-letter { color: var(--accent1); }

.evade { visibility: hidden; opacity: 0; }

.btn { display: none; /*font-size: 1rem;*/ line-height: 2rem; border: none; background: var(--logo-brown); padding: 0.5rem 1rem; color: #FFF; text-decoration: none; margin: 0.5rem auto; text-align: center; }
.btn:hover { filter: brightness(115%); cursor: pointer; }

.goto { position: absolute; bottom: 0.5rem; left: 50%; transform: translate(-50%);/*font-size: 1rem;*/ border: none; display: block; padding: 0.25rem 1rem; color: var(--logo-brown); text-decoration: none; margin: 0.5rem auto; text-align: center; background: #EEE; border-radius: 0.5rem; }
.goto:hover { filter: brightness(115%); cursor: pointer; }

.preview-images { display: flex; flex-flow: row wrap; justify-content: space-between; }
.preview-images > div { flex: 0 0 22%; background: #EEE; }

p { display: block; color: var(--txt); font-size: 1.25rem; line-height: 1.33; margin: 0 0 0.5rem 0;  padding: 0.25rem 0; letter-spacing: 0.12rem; }
p:last-child() { margin-bottom: 1rem; }

nav { background: var(--nav-bg); border-bottom: 2px solid var(--line-dark); }

header { display: block; position: relative; overflow: hidden; border-bottom: 2px solid var(--line-dark); border-top: 2px solid var(--line-light); background: var(--header-bg); }
header #header-blur-image, header #header-content { position: absolute; top: 0; left: 50%; width: 100%; height: 100%; }
#header-blur-image { z-index: 10; }
#header-content { z-index: 20; }

main { height: 100%; padding-top: 2rem; border-top: 2px solid var(--line-light); }

a.glightbox3 { position: relative; display: block; width: 100%; height: auto; object-fit: contain; overflow: hidden; box-shadow: 0.25rem 0.25rem 0.5rem 0.25rem rgba(0, 0, 0, 0.5); margin: 0.5rem; border: 3px solid transparent; background-image: repeating-linear-gradient(5deg, var(--gold) 0%, var(--light-shadow) 23%, var(--gold) 37%); border-image-slice: 1; } 

.wrapper { background: radial-gradient(#272727, #1b1b1b); display: grid; grid-template-areas: 'overlap'; place-content: center; text-transform: uppercase; }
.wrapper > div { background-clip: text; -webkit-background-clip: text; color: #363833; font-family: 'Poppins', sans-serif; font-weight:666; font-size: clamp( 4em, 2vw, 11rem); grid-area: overlap; letter-spacing: 7px; -webkit-text-stroke: 2px transparent; }
div.bg { background-image: repeating-linear-gradient( 105deg,  var(--gold) 0% , var(--dark-shadow) 5%, var(--gold) 12%); color: transparent; filter: drop-shadow(5px 15px 15px black); transform: scaleY(1.666); transform: scaleX(0.99); transform-origin: top; }
div.fg { background-image: repeating-linear-gradient(5deg, var(--gold) 0%, var(--light-shadow) 23%, var(--gold) 37%); color: #1e2127; transform: scale(1); }

.gold-border { background-image: repeating-linear-gradient( 105deg, var(--gold) 0%, var(--dark-shadow) 5%, var(--gold) 12%); color: transparent; filter: drop-shadow(5px 15px 15px black); transform: scaleY(1.666); transform: scaleX(0.99); transform-origin: top;  }

.more { background: rgba(0, 0, 0, 0.5); font-size: 2rem; display: flex; flex-flow: column nowrap; align-items: center; color: #FFF; }

#progress { position: absolute; bottom: 0; height: 6px; width: 0px; background: rgba(255, 255, 255, 0.5); z-index: 500; }

.arrow { position: absolute; bottom: 2rem; left: calc(50% - 1.5rem); transform: translateX(-50%); padding: 0; z-index: 2000; color: #FFF; /*font-size: 3rem;*/ }
.bounce { animation: bounce 5s infinite; }
@keyframes bounce {
	0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
	40% { transform: translateY(-30px); }
	60% { transform: translateY(-15px); }
}

.img-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

footer { display: block; font-size: 0.75rem; padding: 0; color: #FFF; }
footer a { color: var(--logo-gold); }
#footerlogo { position: relative; width: 10rem; height: auto; margin: 0 auto; }
footer p { font-size: 1rem; color: #FFF; display: block; margin: 0; padding: 0; /*text-shadow: 1px 1px 1px #000;*/ }
#footerlogo img { width: 100%; height: 100%; object-fit: contain; }

ul { display: flex; width: 100%; flex-flow: row wrap; align-items: stretch; list-style-type: none; margin: 1rem 0; padding: 0; }
ul li { flex-grow: 0; flex-shrink: 1; flex-basis: 50%; padding: 0 0.25rem; }

.icon { display: inline-block; width: 5rem; height: 5rem; }

/* font-size: clamp(1.5rem, 2.5vw, 4rem); */

/*div.leaf { border: 2px solid var(--logo-gold); }*/
.descTxt { padding: 1rem; }

#portfolio { display: flex; flex-flow: row wrap; align-items: stretch; }
#portfolio > div { flex-shrink: 1; flex-grow: 0; flex-basis: calc(50% - 1rem); margin-bottom: 1rem; }
#portfolio > div:nth-child(odd) { padding-right: 1rem; }
#portfolio > div:nth-child(even) { padding-left: 1rem; }

.inview { visibility: hidden; opacity: 0; overflow: hidden; }

.services-block { position: relative; margin: 1rem 0; }
.services_text { display: block; background: #FFF; margin: 4rem 0 4rem 26rem; }

/*.leaf { border-top-left-radius: 2rem; border-bottom-right-radius: 2rem; }*/
.leaf-sm { border-top-left-radius: 1rem; border-bottom-right-radius: 1rem; }
.radius-all { border-radius: 2rem; }
.circle { verticle-align: middle; background: #2F6541; display: none; width: 1.25rem; height: 1.25rem; border-radius: 50%; text-align: center; line-height: 1.25rem; color: #fff; }

a.button.four:before, a.button.four:after{ content: ''; position: absolute; width: 0%; height: 100%; border-bottom: 2px solid white; transition: width 0.3s ease; }
a.button.four:before{ bottom: 0; right: 50%; }
a.button.four:after{ bottom: 0; left: 50%; }
a.button.four:hover:after, a.button.four:hover:before{ width: 40%; transition: width .2s ease; }

/* Common helper classes --------------------------------------------------- */
.flex-centered { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.flex-centered-left { display: flex; align-items: flex-start; justify-content: flex-start; width: 100%; height: 100%; }
.flex-centered-right { display: flex; align-items: right; justify-content: right; width: 100%; height: 100%; }

.flex-centered-to-bottom { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 100%; }

.respond { display: block; width: 100%; height: 100%; object-fit: cover; }
.fit { display: block; margin: 0 auto; width: 100%; height: 100%; object-fit: contain; }
.respond-fit { display: block; margin: 0 auto; width: 80%; height: 80%; object-fit: contain; }
.respond-fill { display: block; width: 100%; height: 100%; object-fit: cover; }
.limit { width: 90%!important; max-width: 960px!important; margin-left: auto; margin-right: auto; }
.uc { text-transform: uppercase; }
.txt-center { text-align: center; }
.txt-right { text-align: right; }
.txt-left { text-align: left; }

.txt-fill { display: flex; flex-flow: row nowrap; justify-content: space-around; align-items: center; }
.txt-fill span { flex: 1 1 auto; text-align: center; display: inline-block; }
/* ------------------------------------------------------------------------- */

::-webkit-input-placeholder { color: #BBB; }
::-moz-placeholder { color: #BBB; }
:-ms-input-placeholder { color: #BBB; }
:-moz-placeholder { color: #BBB; }

.smallthumbs { display: flex; flex-flow: row wrap; align-items: stretch; margin: 1rem 0; }
.smallthumbs a { flex-grow: 0; flex-shrink: 0; flex-basis: 6rem; margin-right: 0.5rem; margin-bottom: 0.5rem;  }

.lb-css { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); padding: 1rem 1.5rem; }
.lb-css:before { content: ''; position: absolute; top: 1rem; right: 1rem; }
.lb-css img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; width: auto; height: 94%; object-fit: contain; }

.thumbgrid { list-style: none; padding: 0; width: 100%; display: flex; overflow: hidden; flex-wrap: wrap; margin: -2.5px; }
.thumbgrid:after { content: ''; flex-grow: 999999999; min-width: 50px; height: 0; }
.thumbgrid > * { position: relative; display: block; height: 150px; margin: 2.5px; flex-grow: 1; }
.thumbgrid > * > img { height: 150px; object-fit: cover; max-width: 100%; min-width: 100%; vertical-align: bottom; }
.thumbgrid.thumbgrid-margin { margin: 2.5px; overflow: hidden; }
@media (max-width: 980px) {
  .thumbgrid { display: flex; overflow: hidden; flex-wrap: wrap; margin: -2.5px;  }
  .thumbgrid:after { content: ''; flex-grow: 999999999; min-width: 120px; height: 0;  }
  .thumbgrid > * { position: relative; display: block; height: 120px; margin: 2.5px; flex-grow: 1; }
  .thumbgrid > * > img { height: 120px; object-fit: cover; max-width: 100%; min-width: 100%; vertical-align: bottom; }
  .thumbgrid.thumbgrid-margin { margin: 2.5px; }
}
@media (max-width: 400px) {
  .thumbgrid { display: flex; overflow: hidden; flex-wrap: wrap; margin: -2.5px; }
  .thumbgrid:after { content: ''; flex-grow: 999999999; min-width: 80px; height: 0; }
  .thumbgrid > * { position: relative; display: block; height: 80px; margin: 2.5px; flex-grow: 1; }
  .thumbgrid > * > img { height: 80px; object-fit: cover; max-width: 100%; min-width: 100%; vertical-align: bottom;   }
  .thumbgrid.thumbgrid-margin { margin: 2.5px; }
}

/*.fancy { overflow: hidden; border-radius: 0.25rem; border: 2px solid var(--logo-gold); }*/

/* --- CSS Loader ---------------------------------------------------------- */


@keyframes spinner {
  to {transform: rotate(360deg);}
}
 
.spinner:before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  border-radius: 50%;
  border: 2px solid #ccc;
  border-top-color: #000;
  animation: spinner .6s linear infinite;
}
.loader, .loader:after { border-radius: 50%; width: 4rem; height: 4rem; margin: -2rem 0 0 -2rem; }
.loader { position: absolute; text-indent: -9999em; border-top: 0.25rem solid var(--logo-green); border-right: 0.25rem solid var(--logo-green); border-bottom: 0.25rem solid #FFF; border-left: 0.25rem solid #ffffff; top: 50%; left: 50%; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation: load8 1.1s infinite linear; animation: load8 1.1s infinite linear; }
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/* --- END CSS Loader ------------------------------------------------------ */

.responsiveGrid {
  --min: 33.3333%;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min)), 1fr));
}
.responsiveGrid > * { border: 8px solid #FFF; max-height: clamp(4rem, 10vw + 1rem, 6rem); }

/* No Media Query Grid ----------------------------------------------------- */
.grid:before, .grid:after { content: ''; display: table; }
.grid:after { clear: both; }
.grid { display: flex; flex-flow: row wrap; align-items: stretch; }
[class*="column--"] { flex-grow: 0; flex-shrink: 1; position: relative; padding: 0.5rem; }
.column--full { min-width: 100%; max-width: 100%; flex-basis: calc((700px - 100%) * 700); }
.column--half { min-width: 50%; max-width: 100%; flex-basis: calc((700px - 100%) * 700); }
.column--one-fifth, .column--fifth { min-width: 20%; max-width: 100%; flex-basis: calc((700px - 100%) * 700); }
.column--two-fifth { min-width: 40%; max-width: 100%; flex-basis: calc((700px - 100%) * 700); }
.column--three-fifth { min-width: 60%; max-width: 100%; flex-basis: calc((700px - 100%) * 700); }
.column--four-fifth { min-width: 80%; max-width: 100%; flex-basis: calc((700px - 100%) * 700); }
.column--quarter { min-width: 25%; max-width: 100%; flex-basis: calc((700px - 100%) * 700); }
.column--third { min-width: 33.3333%; max-width: 100%; flex-basis: calc((700px - 100%) * 700); }
.column--three-quarter { min-width: 75%; max-width: 100%; flex-basis: calc((700px - 100%) * 700); }
.column--two-third { min-width: 66.6666%; max-width: 100%; flex-basis: calc((700px - 100%) * 700); }
/* ------------------------------------------------------------------------- */

/* --- Clamp CSS --------------------------------------------------- */
.line-clamp { display: block; display: -webkit-box; -webkit-box-orient: vertical; position: relative; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; }
.line-clamp:after { content: '\022EE'; color: #666!important; text-align: right; bottom: 0; right: 0; width: 10%; display: block; position: absolute; height: calc(0.75rem * 0.9rem); }
@supports (-webkit-line-clamp: 1) {
	.line-clamp:after { display : none !important; }
}
.line-clamp-1 { -webkit-line-clamp: 1; height: calc(var(--fs-sm) * 1.5 * 1); }
.line-clamp-2 { -webkit-line-clamp: 2; height: calc(var(--fs-sm) * 1.5 * 2); }
.line-clamp-3 { -webkit-line-clamp: 3; height: calc(var(--fs-sm) * 1.5 * 3); }
.line-clamp-4 { -webkit-line-clamp: 4; height: calc(0.75rem * 1.25 * 4); }
.line-clamp-5 { -webkit-line-clamp: 5; height: calc(0.75rem * 1.25 * 5); }
/* ----------------------------------------------------------------- */

/* --- Flexbox Grid ------------------------------------------------ */
.row:before, .row:after { content: ''; display: table; }
.row:after { clear: both; }
.row { display: flex; flex-flow: row wrap; }
[class*="col-"] { flex: 0; position: relative; }
.col-1of12 { flex-basis: calc((1/12) * 100%); }
.col-2of12 { flex-basis: calc((2/12) * 100%); }
.col-3of12 { flex-basis: calc((3/12) * 100%); }
.col-4of12 { flex-basis: calc((4/12) * 100%); max-width: calc((4/12) * 100%); }
.col-5of12 { flex-basis: calc((5/12) * 100%); }
.col-6of12 { flex-basis: calc((6/12) * 100%); }
.col-7of12 { flex-basis: calc((7/12) * 100%); }
.col-8of12 { flex-basis: calc((8/12) * 100%); max-width: calc((8/12) * 100%); }
.col-9of12 { flex-basis: calc((9/12) * 100%); }
.col-10of12 { flex-basis: calc((10/12) * 100%); }
.col-11of12 { flex-basis: calc((11/12) * 100%); }
.col-12of12 { flex-basis: calc((12/12) * 100%); }
/* ----------------------------------------------------------------- */

.sticky-content { position: relative; transition: 0.25s; }
.sticky-content span { display: inline-block; font-size: 20px; opacity: 0; overflow: hidden; transition: 0.25s; width: 0; }
.sticky-content h2 { display: inline-block; }
.sticky-container { position: sticky; top: 0; z-index: 1000; }
.sticky-container.active .sticky-content { background-color: rgba(0, 0, 0, 0.8); color: #fff; padding: 10px; }
.sticky-container.active .sticky-content span { opacity: 1; transition: 0.25s 0.5s; width: 20px; }

#back2top { display: none; background-color: #FF8000!important; width: 3rem; height: 3rem; text-align: center; border-radius: 4px; position: fixed; bottom: 2rem; right: 2rem; z-index: 10000; }
#back2top:after { content: "\2191"; font-weight: 900; font-style: bold; font-size: 2rem; line-height: 2.5rem; color: #fff; }
#back2top:hover { cursor: pointer; background-color: #333; }
#back2top:active { background-color: #555; }
#back2top.show { display:block; }

.mask1, .mask2, .mask3, .mask4, .mask5, .mask6, .mask7 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; -webkit-mask-size: 110% 110%; -webkit-mask-repeat: no-repeat; mask-size: 110% 110%; mask-repeat: no-repeat; }
.mask1 { -webkit-mask-image: url('/assets/masks/014.png'); mask-image: url('/assets/masks/014.png'); }
.mask2 { -webkit-mask-image: url('/assets/masks/013.png'); mask-image: url('/assets/masks/013.png'); }
.mask3 { -webkit-mask-image: url('/assets/masks/mask3.png'); mask-image: url('/assets/masks/mask3.png'); }
.mask4 { -webkit-mask-image: url('/assets/masks/007.png'); mask-image: url('/assets/masks/007.png'); }
.mask5 { -webkit-mask-image: url('/assets/masks/mask6.png'); mask-image: url('/assets/masks/mask6.png'); }
.mask6 { -webkit-mask-image: url('/assets/masks/008.png'); mask-image: url('/assets/masks/008.png'); }
.mask7 { -webkit-mask-image: url('/assets/masks/134-1340998_brush-strokes-5-sketch-clipart.png'); mask-image: url('/assets/masks/134-1340998_brush-strokes-5-sketch-clipart.png'); }

.thm-mask1, .thm-mask2, .thm-mask3, .thm-mask4, .thm-mask5, .thm-mask6, .thm-mask7 { object-fit: cover; -webkit-mask-size: 100% 96%; -webkit-mask-repeat: no-repeat; mask-size: 100% 96%; mask-repeat: no-repeat; }
.thm-mask1 { -webkit-mask-image: url('/assets/masks/thumb-masks/008.png'); mask-image: url('/assets/masks/thumb-masks/008.png'); }
.thm-mask2 { -webkit-mask-image: url('/assets/masks/thumb-masks/009.png'); mask-image: url('/assets/masks/thumb-masks/009.png'); }
.thm-mask3 { -webkit-mask-image: url('/assets/masks/thumb-masks/010.png'); mask-image: url('/assets/masks/thumb-masks/010.png'); }
.thm-mask4 { -webkit-mask-image: url('/assets/masks/thumb-masks/008.png'); mask-image: url('/assets/masks/thumb-masks/008.png'); }
.thm-mask5 { -webkit-mask-image: url('/assets/masks/thumb-masks/008.png'); mask-image: url('/assets/masks/thumb-masks/011.png'); }
.thm-mask6 { -webkit-mask-image: url('/assets/masks/thumb-masks/008.png'); mask-image: url('/assets/masks/thumb-masks/012.png'); }
.thm-mask7 { -webkit-mask-image: url('/assets/masks/thumb-masks/008.png'); mask-image: url('/assets/masks/thumb-masks/mask11.png'); }

.edgetop { background: url('/assets/masks/edgetopa.png') no-repeat top center; background-size: 100% auto; display: block; width: 100%; /*height: 4rem;*/ }
.edgebottom { background: url('/assets/masks/edgetopb.webp') no-repeat top center; background-size: cover; display: block; width: 100%; height: 4rem; }

.edgetop2 { background: url('/assets/masks/edgetop1.webp') no-repeat top center; background-size: cover; display: block; width: 100%; height: 4rem; }
.edgebottom2 { background: url('/assets/masks/edgetop2.webp') no-repeat top center; background-size: cover; display: block; width: 100%; height: 4rem; }

.stroke1, .stroke2, .stroke3, .stroke4, .stroke5, .stroke6 { padding: 1rem 2rem; background-repeat: no-repeat; background-position: center center; background-size: 100% 95%; z-index: -1; }
.stroke1 { background-image: url('/strokes/stroke1a.svg'); }
.stroke2 { background-image: url('/strokes/stroke2.svg'); }
.stroke3 { background-image: url('/strokes/stroke3.svg'); }
.stroke4 { background-image: url('/strokes/stroke4.svg'); }
.stroke5 { background-image: url('/strokes/stroke5.svg'); }
.stroke6 { background-image: url('/strokes/stroke6.svg'); }