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

[Core CSS]

Layout primitives, utilities and the grid helpers.

Site    : Make It Pop — Sarah J Hill
Author  : Sarah Hill
Contact : sarah@sarahjhill.com

Adapted from "Shock" (ThemeForest item g7OgNzSh) by
Codings, used under the purchased ThemeForest licence.
Modified for Sarah J Hill in 2026: rebranded,
unused components removed, and simplified to the
components this site actually uses.

See THIRD-PARTY-NOTICES.md for the full licence terms.

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

/* Stripped to the rules this site reaches. Verified against all
   three pages: computed layout and type unchanged. Regenerate
   rather than hand-edit if new components are added. */

body{
	width: 100%;
	height: 100%;
  margin: 0;
	font-family: var(--primary-font);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--gray-color);
}
a{
	text-decoration: none;
	-webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
a:not([href]):not([class]), a:not([href]):not([class]):hover{
  color: inherit;
  text-decoration: none;
}
hr{
  margin: 1.5rem 0;
  color: var(--color);
  background-color: currentColor;
  border: 0;
  opacity: 1;
}
hr:not([size]){
  height: 1px;
}
ol, ul{
  padding-left: 1.2rem;
}
ol, ul, dl{
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}
ol:last-child, ul:last-child, dl:last-child{
	margin-bottom: 0;
}
ol ol,
ul ul,
ol ul,
ul ol{
  margin-bottom: 0;
}
ol{
	list-style-type: none;
	counter-reset: item;
}
ol > li, ul > li{
	margin: 0.5rem 0;
}
ol > li:first-child, ul > li:first-child,
ol > li:last-child, ul > li:last-child{
	margin: 0;
}
ol > li{
	counter-increment: item;
}
ol > li::before{
	content: counters(item, ".") ". ";
	margin-left: -1.2rem;
	font-weight: 700;
}
li ol > li::before{
	content: counters(item, ".") " ";
	margin-right: 5px;
}
mark, .mark{
  padding: 0;
}
.blockquote{
	position: relative;
	width: fit-content;
	margin: 3rem auto 3rem 0;
  font-size: inherit;
	color: inherit;
}
.blockquote:last-child{
	margin-bottom: 0;
}
.blockquote-body{
	color: var(--color);
}
.blockquote-footer{
	margin: 0;
	font-size: inherit;
	color: inherit;
}
.blockquote-footer::before{
  content: "— ";
}
img, svg{
  vertical-align: middle;
}
@media (max-width: 991px){.blockquote{
		margin: 1.5rem auto 1.5rem 0;
	}}
@media (min-width: 1200px){.max-w-75{ max-width: 75% !important; }}
.vh-75{ height: 75vh !important; }
.g-4, .gx-4{ --bs-gutter-x: calc( 4rem / 2 ) !important; }
.g-4, .gy-4{ --bs-gutter-y: calc( 4rem / 2 ) !important; }
.g-5, .gx-5{ --bs-gutter-x: calc( 5rem / 2 ) !important; }
.g-5, .gy-5{ --bs-gutter-y: calc( 5rem / 2 ) !important; }
@media (min-width: 768px){.g-4, .gx-4{ --bs-gutter-x: 4rem !important; }
.g-4, .gy-4{ --bs-gutter-y: 4rem !important; }
.g-5, .gx-5{ --bs-gutter-x: 5rem !important; }
.g-5, .gy-5{ --bs-gutter-y: 5rem !important; }}
.mb-0{ margin-bottom: 0 !important; }
.mt-2{ margin-top: calc( 2rem / 2 ) !important; }
.mb-35{ margin-bottom: calc( 3.5rem / 2 ) !important; }
.mt-6{ margin-top: calc( 6rem / 2 ) !important; }
@media (min-width: 768px){.mt-2{ margin-top: 2rem !important; }
.mb-35{ margin-bottom: 3.5rem !important; }
.mt-6{ margin-top: 6rem !important; }}
.pt-1{ padding-top: calc( 1rem / 2 ) !important; }
.pt-3{ padding-top: calc( 3rem / 2 ) !important; }
.pb-3{ padding-bottom: calc( 3rem / 2 ) !important; }
.pt-5{ padding-top: calc( 5rem / 2 ) !important; }
.pb-5{ padding-bottom: calc( 5rem / 2 ) !important; }
.pt-6{ padding-top: calc( 6rem / 2 ) !important; }
.pb-6{ padding-bottom: calc( 6rem / 2 ) !important; }
@media (min-width: 768px){.pt-1{ padding-top: 1rem !important; }
.pt-3{ padding-top: 3rem !important; }
.pb-3{ padding-bottom: 3rem !important; }
.pt-5{ padding-top: 5rem !important; }
.pb-5{ padding-bottom: 5rem !important; }
.pt-6{ padding-top: 6rem !important; }
.pb-6{ padding-bottom: 6rem !important; }}
.align-v-center{ display: flex; align-items: center !important; }
.primary-15{ --color: var(--primary-15-color) !important; }
.primary-50{ --color: var(--primary-50-color) !important; }
.primary-50-hover{ --hover-color: var(--primary-50-color) !important; }
.secondary{ --color: var(--secondary-color) !important; }
.tertiary{ --color: var(--tertiary-color) !important; }
.tertiary-hover{ --hover-color: var(--tertiary-color) !important; }
.accent{ --color: var(--accent-color) !important; }
.white{ --color: var(--white-color) !important; }
.white-hover{ --hover-color: var(--white-color) !important; }
.white-50{ --color: var(--white-50-color) !important; }
.gray{ --color: var(--gray-color) !important; }
.gray-10{ --color: var(--gray-10-color) !important; }
.gray-25{ --color: var(--gray-25-color) !important; }
.black{ --color: var(--black-color) !important; }
.black-hover{ --hover-color: var(--black-color) !important; }
.black-65{ --color: var(--black-65-color) !important; }
:root .gradient.scheme-1,
:root .bg-gradient.scheme-1,
:root .border-gradient.scheme-1,
:root .text-gradient.scheme-1{
	--color-1: var(--primary-color);
	--color-2: var(--secondary-color);
}
:root .gradient.scheme-2,
:root .bg-gradient.scheme-2,
:root .border-gradient.scheme-2,
:root .text-gradient.scheme-2{
	--color-1: var(--secondary-color);
	--color-2: var(--tertiary-color);
}
:root .gradient.scheme-3,
:root .bg-gradient.scheme-3,
:root .border-gradient.scheme-3,
:root .text-gradient.scheme-3{
	--color-1: var(--tertiary-color);
	--color-2: var(--primary-color);
}
.text-italic{
	font-style: italic;
}
.text-outline{
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke-width: 1px;
}
.text-gradient, .text-gradient > *{
	background-image: -webkit-linear-gradient(45deg, var(--color-1) 0%, var(--color-2) 100%);
	background-image: linear-gradient(45deg, var(--color-1) 0%, var(--color-2) 100%);
	-webkit-background-clip: text;
	-moz-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.text-outline.text-gradient, .text-outline.text-gradient > *{
	padding: 0 0.3rem;
	-webkit-background-clip: text;
	-moz-background-clip: text;
	background-clip: text;
	-webkit-text-stroke: transparent;
	-webkit-text-stroke-width: 4px;
	-webkit-text-fill-color: inherit;
	color: var(--color);
}
.bg-color{
	background-color: var(--color) !important;
}
.has-overlay .overlay{
	content: '';
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--color);
	-webkit-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}
.shadow{
	box-shadow: 0px 20px 50px 0px rgb(0 0 0 / 15%) !important;
}
.small-shadow{
	box-shadow: 0 5px 10px 0 rgb(0 0 0 / 15%) !important;
}
.invert-color{
	filter: brightness(1) invert(1);
}
.mix-blend-difference{ mix-blend-mode: difference; }
@keyframes show-up-animation{
  from {
    margin-top: 0;
  }
  to {
    margin-top: -50px;
  }
}
@-webkit-keyframes show-up-animation{
  from {
    margin-top: 0;
  }
  to {
    margin-top: -50px;
  }
}
@keyframes show-down-animation{
  from {
    margin-top: -50px;
  }
  to {
    margin-top: 0;
  }
}
@-webkit-keyframes show-down-animation{
  from {
    margin-top: -50px;
  }
  to {
    margin-top: 0;
  }
}
@-webkit-keyframes bounce-in-up-animation{
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0) scaleY(5);
    transform: translate3d(0, 3000px, 0) scaleY(5);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }
  75% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95);
    transform: translate3d(0, 10px, 0) scaleY(0.95);
  }
  90% {
    -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985);
    transform: translate3d(0, -5px, 0) scaleY(0.985);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounce-in-up-animation{
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0) scaleY(5);
    transform: translate3d(0, 3000px, 0) scaleY(5);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }
  75% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95);
    transform: translate3d(0, 10px, 0) scaleY(0.95);
  }
  90% {
    -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985);
    transform: translate3d(0, -5px, 0) scaleY(0.985);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes bounce-out-down-animation{
  20% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985);
    transform: translate3d(0, 10px, 0) scaleY(0.985);
  }
  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0) scaleY(3);
    transform: translate3d(0, 2000px, 0) scaleY(3);
  }
}
@keyframes bounce-out-down-animation{
  20% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985);
    transform: translate3d(0, 10px, 0) scaleY(0.985);
  }
  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0) scaleY(3);
    transform: translate3d(0, 2000px, 0) scaleY(3);
  }
}
@keyframes scale-rotate-animation{
	to {
		opacity: 0;
		transform: scale3d(0.5, 0.5, 1) rotate(360deg);
	}
}
@-webkit-keyframes scale-rotate-animation{
	to {
		opacity: 0;
		transform: scale3d(0.5, 0.5, 1) rotate(360deg);
	}
}
@keyframes width-animation{
	0% {
		width: 0;
	}
	100% {
		width: 100%;
	}
}
@-webkit-keyframes width-animation{
	0% {
		width: 0;
	}
	100% {
		width: 100%;
	}
}
@keyframes up-down-animation{
	from {
		transform: translatey(0px);
	}
	to {
		transform: translatey(-20px);
	}
}
@-webkit-keyframes up-down-animation{
	from {
		transform: translatey(0px);
	}
	to {
		transform: translatey(-20px);
	}
}
@keyframes up-down-smooth-animation{
	from {
		transform: translatey(0px);
	}
	to {
		transform: translatey(-10px);
	}
}
@-webkit-keyframes up-down-smooth-animation{
	from {
		transform: translatey(0px);
	}
	to {
		transform: translatey(-10px);
	}
}
@keyframes left-animation{
	0% {
		left: 100%;
	}

	100% {
		left: 0;
	}
}
@-webkit-keyframes left-animation{
	0% {
		left: 100%;
	}

	100% {
		left: 0;
	}
}
@keyframes cross-left-animation{
  0% {
    left: -20px;
  }
  50% {
    left: 50%;
    width: 20px;
    height: 20px;
  }
  100% {
    left: 50%;
    width: 375px;
    height: 375px;
  }
}
@-webkit-keyframes cross-left-animation{
  0% {
    left: -20px;
  }
  50% {
    left: 50%;
    width: 20px;
    height: 20px;
  }
  100% {
    left: 50%;
    width: 375px;
    height: 375px;
  }
}
@keyframes cross-right-animation{
  0% {
    right: -20px;
  }
  50% {
    right: 50%;
    width: 20px;
    height: 20px;
  }
  100% {
    right: 50%;
    width: 375px;
    height: 375px;
  }
}
@-webkit-keyframes cross-right-animation{
  0% {
    right: -20px;
  }
  50% {
    right: 50%;
    width: 20px;
    height: 20px;
  }
  100% {
    right: 50%;
    width: 375px;
    height: 375px;
  }
}
@keyframes horizontal-line-animation{
  20%, 100% {
    opacity: 0;
    left: 100%;
  }
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
}
@-webkit-keyframes horizontal-line-animation{
  20%, 100% {
    opacity: 0;
    left: 100%;
  }
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
}
@keyframes vertical-line-animation{
  20%, 100% {
    opacity: 0;
    top: 100%;
  }
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
}
@-webkit-keyframes vertical-line-animation{
  20%, 100% {
    opacity: 0;
    top: 100%;
  }
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
}
@keyframes expand-animation{
	0% {
		margin-left: 10px;
		margin-right: 10px;
	}
	50% {
		margin-left: 15px;
		margin-right: 15px;
	}
	100% {
		margin-left: 10px;
		margin-right: 10px;
	}
}
@-webkit-keyframes expand-animation{
	0% {
		margin-left: 10px;
		margin-right: 10px;
	}
	50% {
		margin-left: 15px;
		margin-right: 15px;
	}
	100% {
		margin-left: 10px;
		margin-right: 10px;
	}
}
@keyframes spin-animation{
  0% {
    transform: rotateZ(360deg);
  }
  100% {
    transform: rotateZ(0deg);
  }
}
@-webkit-keyframes spin-animation{
  0% {
    transform: rotateZ(360deg);
  }
  100% {
    transform: rotateZ(0deg);
  }
}
@keyframes scroll-down-animation{
	0% {
		transform: translate(0, 0);
		opacity: 0;
	}
	40% {
		opacity: 1;
	}
	80% {
		transform: translate(0, 20px);
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}
@-webkit-keyframes scroll-down-animation{
	0% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
		opacity: 0;
	}
	40% {
		opacity: 1;
	}
	80% {
		-webkit-transform: translate(0, 20px);
		transform: translate(0, 20px);
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}
@keyframes rotate-animation{
	0% {
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -webkit-transform: rotate(0);
    transform: rotate(0);
	}

	100% {
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
	}
}
@-webkit-keyframes rotate-animation{
	0% {
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -webkit-transform: rotate(0);
    transform: rotate(0);
	}

	100% {
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
	}
}
.hover-up{
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.hover-up:hover{
	transform: translateY(-10px);
}
.hover-up-down:hover,
.parent:hover .hover-up-down{
	animation: hover-up-down 0.4s forwards ease-in-out;
}
@keyframes hover-up-down{
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10px);
	}
	0% {
		transform: translateY(0);
	}
}
.link{
	position: relative;
	z-index: 5;
	text-decoration: none;
	color: var(--color);
	pointer-events: all;
	-webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.link:hover,
.link:hover > *{
	color: var(--hover-color);
}
.link .icon{
	margin-right: 7.5px;
	vertical-align: middle;
	font-size: 0.75rem;
}
.holder{
	position: relative;
	width: 100%;
}
.gapped-grid{
	width: calc(100% + 26px);
	max-width: calc(100% + 26px);
	margin-left: -13px;
}
.gapped-grid .item{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 25px;
}
@media (max-width: 991px){.d-only-desktop{
		display: none !important;
	}}