@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
@font-face{
	font-family:"Jane Austen";
	src:url("/_res/fonts/JaneAust.woff2") format("woff2");
}

:root {
	/* Colors */
	--color-primary: #662D91;
	--color-secondary: #046307;
	--color-highlight: #CC5500;
	--color-black: #090909;
	--color-white: #ffffff;
	/* Text */
	--font-script: "Jane Austen";
	--font-heading: "tahoma";
	--font-body: Montserrat;
	--font-icons: "Material Icons";
	/* Layout Props */
	--col-count: 12;
	--desktop-breakpoint: 850px;
	--page-padding: 10px;
	--dropshadow-small: 0px 0px 10px -5px var(--color-black);
	--dropshadow-large: 0px 0px 40px 0px var(--color-black);
}
* {
	box-sizing: border-box;
}
html {
	font-family: var(--font-body), arial, sans-serif;
	font-size: 16px;
	overflow-x:hidden;
}
body {
	/* overflow-x: hidden; */
	font-family: var(--font-body);
}
p {
	font-size: 1rem;
	line-height: 200%;
}
p + p {
	margin-top: 1.4rem;
}
ol {
    list-style: decimal;
    padding-left: 3em;
}
ul{
    list-style:disc;
    padding-left:3em;
}

li {
    padding-left: .5em;
    margin-top: 1em;
    font-size: 1rem;
    line-height: 200%;
}
a {
	text-decoration: none;
}
strong {
    font-weight: bold;
}
button{
	font-family:var(--font-body);
	background:none;
	border:none;
}
img {
    max-width: 100%;
    height: auto;
}

.list-reset,
.list-reset-all > li {
    list-style: none;
    padding: 0;
    margin: 0;
}
.list-elegant ::marker {
    font-size: 2.6em;
    font-weight: bold;
    font-family: var(--font-script);
}
.list-stroked li:after {
    content: "";
    display: block;
    height: 50px;
    background: url(/_res/img/strokes.png);
    background-position-y: -18%;
}

.list-stroked li:nth-child(5n+1):after {
    background-position-y: -40%;

}
.list-stroked li:nth-child(5n+2):after {
    background-position-y: -62%;

}
.list-stroked li:nth-child(5n+3):after {
    background-position-y: -84%;

}
.list-stroked li:nth-child(5n+4):after {
    background-position-y: -106%;

}


/*

Layout
*/
.l-flex {
	display: flex;
}
.l-col-1 {
	flex: 1;
}
.l-col-3 {
	flex: 3;
}
.l-col-4 {
	flex: 4;
}
/* utility */

.offscreen {
	font-size: 0;
	width: 1px;
	height: 1px;
	display: inline-block;
	overflow: hidden;
	position: absolute !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	clip: rect(1px, 1px, 1px, 1px);
}

@media (min-width:850px){
	.display-sm{
		display:none;
	}
}
@media (max-width:849px){
	.display-lg{
		display:none;
	}
}

.button {
	display: block;
	padding: 1em;
	background: var(--color-highlight, #f00);
	text-align: center;
	color: var(--color-white, #fff);
	font-weight: bold;
}
.button:hover,
.button:focus{
	filter:saturate(.8) brightness(1.2);
}
.card {
	width: 100%;
	max-width: 35em;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	background: var(--color-white);
}
.card__picture {
	display: block;
	aspect-ratio: 8 / 5;
}
.card__image {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	object-position: center;
	aspect-ratio: 8 / 5;
}
.card__caption {
	padding: 1em 2em;
	flex: 1;
}
.card__caption-heading {
    font-family: var(--font-heading);
    font-size: 1.6rem;
}
/*--------------------------- Header BEGIN
*/
.header {
	position: relative;
	z-index: 1000;
	position: sticky;
	top: 0;
	background: var(--color-white);
	box-shadow: var(--dropshadow-small);
	/* transition: transform .3s; */
	transform: translateY(0);
}
.header[data-scroll="up"] {
    transform: translateY(0%);
    transition: transform .3s;
}
.header[data-scroll="down"] {
    transform: translateY(-100%);
    transition: transform .3s;
}
.header[data-scroll="reset"] {
	box-shadow:none;
}
.header__grid {
	display: grid;
	grid-template-columns: min(calc(100vw - 9rem),300px);
	grid-template-rows: 5rem;
	justify-content: center;
}
.logo__image {
	display: block;
}
.logo__link {
	display: block;
}
@media (min-width:850px){
	.header__grid {
		grid-template-columns: 300px auto;
		grid-template-rows: 5rem;
		justify-content: space-between;
	}
}
/*--------------------------- Nav BEGIN
*/
.mobile-nav-button {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    position: absolute;
    z-index:9999;
    inset: 10px 0px auto auto;
    top: .5rem;
    right: .5rem;
    width: 4rem;
    aspect-ratio: 1;
    padding: 1rem;
    border:none;
    background: none;
}
.mobile-nav-button span {
    display: block;
    width: 100%;
    height: 4px;
    background: var(--color-black);
    transform-origin:center center;
    transition:transform .5s, opacity .2s;
    grid-column: 1;
    grid-row: 1;
}
.mobile-nav-button span:nth-child(1) {
    transform: translateY(-10px) rotate(0deg) ;
}
.mobile-nav-button span:nth-child(3) {
    transform: translateY(10px) rotate(0deg) ;
}

.mobile-nav-button[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(50%) rotate(45deg) ;
}
.mobile-nav-button[aria-expanded="true"] span:nth-child(2){
    opacity:0;
}
.mobile-nav-button[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(50%) rotate(-45deg) ;
}



.nav{
	position:fixed;
	inset: 0 0 0 auto;
	top: -2rem;
	right: 0;
	bottom: 0;
	background:#fff;
	width: 20rem;
	max-width:90vw;
	padding: 7rem 0 0 0;
	box-shadow: 0 0 0rem 0rem #0000;
	transform: translateX(100%) rotate(16deg);
	transition: transform .3s, box-shadow 0.3s;
	transform-origin: 0 100%;
	height: calc(100vh + 2rem);
	overflow-y: auto;
	overflow-x: hidden;
}

.nav[data-open="true"]{
	box-shadow:0 0 200rem 200rem #000a;
	transform: translateX(0%) rotate(0deg);
}

.nav__link {
	color: #000;
	display: flex;
	width: 100%;
	padding: 1em;
	align-items: center;
	font-size: 1.2rem;
	background: none;
	border: none;
	line-height: 100%;
}
.nav__subheader:before {
    content: "expand_more";
    font-family: var(--font-icons);
    font-size: 1.3em;
    padding-right: .5em;
    transform: scaleY(1);
    transition: transform .3s;
}
.nav__item .nav__subheader[aria-expanded="true"]:before {
    /* content: "expand_less"; */
    transform: scaleY(-1);
}
.nav__icon {
	display: block;
	float: left;
	font-size: 1.3rem;
	width: 1rem;
	margin-right: .5rem;
	font-family: 'Material Icons';
}
.nav__label {
	display: block;
	font-weight: bold;
}
.nav__subheading {
	display: flex;
	padding: 12px 6px;
	align-items: center;
}
.nav__submenu {
	background: var(--color-primary);
	list-style: none;
	padding: 0;
	margin: 0;
	/* height: 100%; */
	max-height: 0px;
	transform-origin:top;
	transform:scaleY(0);
	transition: transform .2s, max-height .2s;
	overflow: hidden;
}
.nav__submenu .nav__link{
	background: var(--color-primary);
	color: var(--color-white);
	opacity: 0;
	transition: opacity .1s ease-in-out;
}

.nav__subheader[aria-expanded="true"] {
	background: var(--color-highlight);
	color: var(--color-white);
}
.nav__item {
    padding: 0;
    margin: 0;
    line-height: 100%;
}
.nav__submenu[data-open="true"] {
	transform:scaleY(1);
	max-height: 500px;
}
.nav__submenu[data-open="true"] .nav__link {
	opacity: 1;
	transition: opacity 75ms ease-in-out .1s;
}
.nav__subheader[data-open="true"], 
.nav__link:hover {
	background: var(--color-highlight);
	color: var(--color-white);
}
@media (min-width:850px){
	.mobile-nav-button {
		display: none;
	}
	.nav__menu {
		display: flex;
		justify-content: flex-end;
		gap: 2rem;
	}
	.nav {
		position:static;
		padding: 0 2em 0 0;
		width:auto;
		height: auto;
		background:none;
		transform: translateX(0) rotate(0deg) !important;
		transition: none;
		box-shadow:none !important;
		overflow: visible;
	}
	.nav__submenu {
		position: absolute;
	}
	.nav__link{
		padding:12px 6px;
	    font-size:1rem;
	}
	.nav__link:before {
        display: none;
    }
}
/*--------------------------- Main BEGIN
*/
.main {
    padding-top: 3em;
}


/*--------------------------- Full-Width BEGIN
*/
.template-full-image  .hero__content {
    padding: 6em;
}

@media (min-width:850px){
.template-full-image .hero{
    height: 80vh;
    max-height: 100%;
}
}


.row {
	display: grid;
	grid-template-columns: [full-start] minmax(1em, 1fr) [main-start] minmax(auto, 1200px) [main-end] minmax(1em, 1fr) [full-end];
}
.row::after, .row::before {
	content: "";
}
.row-spacer{
	padding-top:3em;
}
.row--narrow {
	--row-padding: 1em;
    grid-template-columns: [full-start] minmax(var(--row-padding), 1fr) [main-start] minmax(auto, 900px) [main-end] minmax(var(--row-padding), 1fr) [full-end];
}
.row__content {
    padding: 1em 0;
}
.row__grid {
	grid-column: main;
	display: grid;
	grid-template-columns: repeat(var(--col-count, 1), 1fr);
	grid-template-rows: repeat(var(--row-count, 1), minmax(3em, auto));
	column-gap: var(--page-padding);
	row-gap: var(--page-padding);
	height: inherit;
	max-height: inherit;
	min-height: inherit;
}
.row__grid > * {
	grid-column: 1 / -1;
	z-index: 1;
}
.row__grid--fullwidth {
	grid-column: full;
}
.even-columns-2 > * {
	grid-column: span 6;
}
.even-columns-3 > * {
	grid-column: span 4;
}
.even-columns-4 > * {
	grid-column: span 3;
}
.even-columns-6 > * {
	grid-column: span 2;
}
.grid-center-cells {
    align-items: center;
    justify-items: center;
}
@media screen and (min-width: 850px) {
	.row--narrow {
		--row-padding: 4em;
	}
}
/*--------------------------- Footer BEGIN
*/
.footer {
	padding: 1em 0;
	text-align: center;
    border-top: solid 1px #eee;
}
@media (min-width:850px){
    .footer {
        gap: 2em;
        flex-wrap: wrap;
    }
}
/*--------------------------- TEMPLATE END
*/
.hero {
	--row-count: 1;
}
.hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	grid-column: 1 / span 12;
	grid-row: 1 / -1;
	max-height: inherit;
	-webkit-mask: url(/_res/img/hero-mask-2.png);
	-webkit-mask-size: 100% 100%;
	-webkit-mask-position-y: bottom;
	-webkit-mask-position-x: 0vw;
}
.hero__image.top {
    object-position: top;
}
.hero__image.bottom {
    object-position: bottom;
}
.hero__content {
    background-image: url(/_res/img/title-bg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    grid-column: 1 / span 12;
    padding: 3em;
    margin: auto;
    grid-row: 1 / -1;
}
#page-home .hero__content {
	background-image: url(/_res/img/hp-hero-cta.png);
	background-size: 1300px 100%;
	padding: 4em calc(15% + 3vw) 4em calc(26% + 3vw);
	margin: -40px -15% 0 -26%;
	transform: translateY(-5%);
	grid-row: 2;
	max-width: none;
}

.hero-content__text {
	color: #fff;
	font-size: 1rem;
	font-weight: bold;
	line-height: 140%;
	margin-bottom: 1em;
}
.hero__form .form {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 5px;
	max-width: 100%;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}
.hero__form .form__input {
	border: aliceblue;
}
.hero__form .form__label {
	display: none;
}
@media screen and (min-width:550px) {
	.hero__form .form {
		/* gap: 5px; */
	}
	.hero__form .form > div {
		flex: 1;
	}
}
#page-home .hero__image {
	grid-row: 1;
	-webkit-mask: none;
}
#page-podcast .hero {
    max-height: calc(100vh - 10em);
}

#page-podcast .hero__content {
    background: none;
    max-width: 50em;
    padding: 0em;
}
#page-podcast .hero-content {
	background:#fff;
	padding: 3em;
}
@media (min-width:850px){
#page-podcast .hero__content {
    padding: 3em;
}
}

@media screen and (min-width:850px) {
	.hero {
		--row-count: 1;
		height: 100%;
		max-height: 55vh;
	}
	.hero__image--right {
		grid-column: 4 / span 9;
		object-position: center left;
	}
	.hero__image--left {
		grid-column-end: -4;
	}
	.hero-content__text {
		font-size: min(1.8rem, calc(2vw + .0125em));
	}
	#page-home .hero{
		max-height:80vh;
	}
	#page-home .hero__content {
		grid-column: 1 / 7;
		grid-row: 1;
		align-self: center;
		background-size: contain;
		background-position: left;
		padding: 10% 10% 3em 3vw;
		margin: 0;
		aspect-ratio: 8/5;
		transform: translatey(0);
	}
}

/* SECTION - Who We Are */
.who-we-are__heading {
    grid-row: 1;
}
.who-we-are__image {
	grid-row: 1;
	transform: translateY(-6em);
	height: 0;
	opacity: 0.3;
	z-index: -1;
}
.who-we-are__image img {
	width: 100%;
}
.who-we-are__gold-image {
	display: none;
}
@media screen and (min-width:850px) {
	.who-we-are {
		--row-count: 4;
	}
	.who-we-are__heading {
		grid-row: 1;
		grid-column: 2/8;
	}
	.who-we-are__content {
		grid-row: 2;
		grid-column: 3 / span 6;
	}
	.who-we-are__link {
		grid-row: 3;
		grid-column: 6 / span 3;
	}
	.who-we-are__image {
		grid-row: 1 / span 3;
		grid-column: 9 / span 4;
		opacity: 1;
		z-index: 1;
	}
	.who-we-are__gold-image {
		position: absolute;
		display: block;
		left: 0;
		z-index: 0;
		transform: translateY(-6em);
	}
	.who-we-are__gold-image img {
		max-width: 16vw;
	}
}
/* SECTION - Live in Enchantment */
@media screen and (min-width:850px) {
	.live-enchantment {
		--row-count: 4;
	}
	.live-enchantment__heading {
		grid-row: 2;
		grid-column: 2/8;
	}
	.live-enchantment__content {
		grid-row: 3;
		grid-column: 3 / 9;
	}
	.live-enchantment__link {
		grid-row: 4;
		grid-column: 7/9;
	}
}
/* SECTION - The Latest */
.getting-started {
	background: #e7e7e1;
	padding: var(--page-padding) 0;
}
.getting-started__heading {
	padding: .5em;
    position: relative;
    z-index: 11;
}
@media screen and (min-width:850px) {
	.getting-started {
		--page-padding: 1em;
		background: #e7e7e1;
		padding: 60px 0;
	}
	.getting-started__heading {
		/* display: flex; */
	}
	.getting-started__heading:before {
		content: "";
		border-top: dotted 1em var(--color-highlight);
		flex: 1;
	}
}

/* SECTION About Us */
.five-is__graphic {
    display: block;
    margin: 0 auto;
    width: 80vw;
    max-width: 40em;
}



/* SECTION Member Bio */
.member{
	margin-top: 3em;
}
.member__heading {
	background: var(--color-primary);
	color: var(--color-white);
	grid-row: 2;
}
.member__name {
	padding: .2em;
}

.member__title {
	display: block;
	background: var(--color-black);
	padding: .5em 1em;
}
.member__photo {
    aspect-ratio: 1 / 1;
    max-width: 60vw;
    margin: auto;
}
.member__photo img {
    width: 100%;
    aspect-ratio: 1 / 1;
    -webkit-mask: url(/_res/img/graphic-circle.png) no-repeat;
    -webkit-mask-size: contain;
    object-fit: cover;
    object-position: top center;
}
#member-sara .member__photo {
    filter: drop-shadow(2em 1em 0 var(--color-highlight));
}
#member-anna .member__photo {
    filter: drop-shadow(-2em 1em 0 var(--color-highlight));
}
@media (min-width: 850px){
	
	#member-sara .member__photo {
		filter: drop-shadow(3em 5em 0 var(--color-highlight));
	}
	#member-anna .member__photo {
		filter: drop-shadow(-3em 5em 0 var(--color-highlight));
	}
    .member__photo {
        grid-column: 9 / span 4;
        grid-row: 1 / span 3;
        margin:0;
    }
    .member__heading {
        grid-column: 1 / span 9;
        margin:0;
    }
    .member__content {
        grid-row: 3;
        grid-column: 2 / span 7;
    }
    .member--mirrored .member__photo {
        grid-column-start: 1;
    }
    .member--mirrored .member__heading {
        grid-column-start: 4;
        text-align:right;
    }
    .member--mirrored .member__content {
        grid-column-start: 5;
    }
    .member--founder .member__photo{
    	grid-column: 8 / span 5;
    }
    .member--founder .member__heading{
    	grid-column-end: span 10;
    }
    .member--founder .member__content{
    	grid-column-end: span 6;
    }
    .member--founder.member--mirrored .member__photo{
    	grid-column-start: 1;
    }
    .member--founder.member--mirrored .member__content{
    	grid-column-start: 6;
    }


}



/* SECTION Free Offer */
.offer {
    grid-auto-rows: auto;
    margin: 2em 0;
    align-items: center;
}

.offer__name {
    grid-row: 2;
    margin-top: 1em;
}


.offer__image {
    grid-row: 1;
    width: 90%;
    max-width: 50vw;
    aspect-ratio: 8/5;
    margin:auto;
}

.offer__text {
    grid-row: 3;
    margin: 1em 0;
}

.offer__button {
    grid-column:2 / -2;
    grid-row: 4;
}
@media (min-width:850px){

.offer__name {
    grid-row: 2;
    grid-column: 5 / -1;
    margin-top: 0em;
}


.offer__image {
    grid-column: 1 / span 4;
    grid-row: 1 / 6;
}

.offer__text {
    grid-row: 3;
    grid-column: 6 / -1;
    margin: 1em 0;
}

.offer__button {
    grid-column: span 4 / -2;
    grid-row: 4;
}
}
@media (max-width:849px){
.free-offerings {grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: var(--page-padding);align-items: start;margin: 1em;}

.free-offerings:before,.free-offerings:after {
    display: none;
}
.offer {
    grid-area: auto;
}}



/* SECTION Testimonials */
#testimonial-list {
    padding-bottom: 5em;
}
.testimonial {
    --col-count: 1;
    background: var(--color-primary);
    color: var(--color-white);
    padding: 10em 0 0em 0;
}
.testimonial:nth-child(3n-2) {
    background: var(--color-secondary);
    color: var(--color-white);
}

.testimonial:nth-child(3n-1) {
    background: var(--color-white);
    color: var(--color-black);
}
.testimonial__graphic {
    grid-row: 1;
    max-width:70vw;
    justify-self:center;
    margin-bottom:2em;
    filter: drop-shadow(0 0 10px var(--color-black));
    width: 100%;
}
.testimonial__video {
    padding: 0 2em;
}

@media (min-width:850px){
.testimonial {
    --col-count: 2;
    padding-top: 8em;
}
.testimonial__name{
    grid-row: 2;
}
.testimonial__content {
    grid-row: 3;
}
.testimonial__name,
.testimonial__content{
    grid-column: 2;
}
.testimonial__graphic {
    grid-column: 1;
    grid-row: 1 / span 3;
}
.testimonial:nth-child(2n) .testimonial__name,
.testimonial:nth-child(2n) .testimonial__content{
	grid-column:1;
}
.testimonial:nth-child(2n) .testimonial__graphic{
    grid-column: 2;
}


.testimonial__image {
    -webkit-mask: url('/_res/img/testimonial-mask.png?');
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    object-fit: contain;
    position: sticky;
    top: 3em;
   }
}


/* SECTION contact us */
.contact-us-form {
    /* margin-top: 4em; */
}










.form {
	max-width: 100%;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}
.form__input {
	padding: 8px 5px;
	width: 100%;
	border: solid 1px var(--color-black);
	border-radius: 3px;
	font-size: 1rem;
	font-family: var(--font-body);
	margin-bottom: 2em;
}

.form__input--submit {
	background: var(--color-highlight);
	color: var(--color-white);
}

.form__input--textarea {
    height: 20em;
}
.form__input--submit {
	background: var(--color-highlight);
	color: var(--color-white);
}

hr.texture-border {
    grid-area: full;
    -webkit-mask: url(/_res/img/hero-mask-2.png);
    -webkit-mask-size: 100%;
    -webkit-mask-position-y: bottom;
    background: inherit;
    height: 5em;
    border: none;
    margin: 0px 0 -5em 0;
    display: block;
}
.auto-size-video {
    width: 100%;
    height: 100%;
}

.social__link {
    width: 2.5rem;
    display: block;
}
.social svg {
    width: 2.5rem;
    height: 2.5rem;
}
.social svg * {
	transition: 0.2s;
}
.social svg:hover circle {
	r: 30;
}


.font-script{
	font-family: var(--font-script);
	font-size: larger;
}
.font-heading{
	font-family: var(--font-heading);
}
.font-body{
	font-family: var(--font-body);
}
.txt-h1,
.txt-sm-h1 {
	font-family: var(--font-script);
	font-size: 4rem;
}
.txt-h2,
.txt-sm-h2 {
	display: block;
	font-family: var(--font-script);
	font-size: 3.2rem;
}
.txt-h3,
.txt-sm-h3 {
	font-family: var(--font-script);
	font-size: 2rem;
}

.txt-heading {
    font-family: var(--font-heading);
    padding-bottom: 1em;
    font-size:1.6rem;
}

.txt-bigger {font-size: 1.6rem;}
.txt-big {     font-size: 1.2rem; }
.txt-small{    font-size: .7rem; }


.txt-bold{
	font-weight: bold;
}
.txt-clr-black{
	color:var(--color-black);
}
.txt-clr-white{
	color:var(--color-white);
}
.txt-clr-primary{
	color:var(--color-primary);
}
.txt-clr-secondary{
	color:var(--color-secondary);
}
.txt-clr-highlight{
	color:var(--color-highlight);
}

.center-all {
	display: grid;
	align-items: center;
	justify-content: center;
}
.center-vertical {
	align-items: center;
}
.center-horizotal {
	justify-content: center;
}

.txt-center,
.txt-sm-center {
	text-align: center;
}
@media (min-width:850px) {
	.txt-sm-center {
		text-align: inherit;
	}
	.txt-sm-h1,
	.txt-sm-h2,
	.txt-sm-h3{
		font-size:inherit;
	}
	
	.txt-lg-h1{
		display: block;
		font-family: var(--font-script);
	    font-size: 4rem;
	}
	.txt-lg-h2{
		display: block;
		font-family: var(--font-script);
		font-size: 3.2rem;
	}
	.txt-lg-h3{
		font-family: var(--font-script);
	    font-size: 2rem;
	}
	.txt-big {
		font-size: 1.4rem;
	}


}
.mar-all {
	margin: .5em;
}
.mar-bottom {
	margin-bottom: .5em;
}
.mar-top {
	margin-top: .5em;
}
.mar-right {
	margin-right: .5em;
}
.mar-left {
	margin-left: .5em;
}
.pad-all {
	padding: .5em;
}
.pad-bottom {
	padding-bottom: .5em;
}
.pad-top {
	padding-top: .5em;
}
.pad-right {
	padding-right: .5em;
}
.pad-left {
	padding-left: .5em;
}

.mar-all-big {
	margin: 1.5em;
}
.mar-bottom-big {
	margin-bottom: 1.5em;
}
.mar-top-big {
	margin-top: 1.5em;
}
.mar-right-big {
	margin-right: 1.5em;
}
.mar-left-big {
	margin-left: 1.5em;
}
.pad-all-big {
	padding: 1.5em;
}
.pad-bottom-big {
	padding-bottom: 1.5em;
}
.pad-top-big {
	padding-top: 1.5em;
}
.pad-right-big {
	padding-right: 1.5em;
}
.pad-left-big {
	padding-left: 1.5em;
}
.gap {
	gap: 1em;
}
.grid {
    display: grid;
    gap: var(--page-padding);
}
.divider-right {
    margin-right: 1em;
    padding-right: 1em;
}
.divider-left {
    margin-left: 1em;
    padding-left: 1em;
}
/*
xs: 0 - 550px,
sm: 0 - 850px,
lg: 850px < X
*/

.flex {	display: flex; }

.grid__span-1 { grid-column-end: span 1;}
.grid__span-2 { grid-column-end: span 2;}
.grid__span-3 { grid-column-end: span 3;}
.grid__span-4 { grid-column-end: span 4;}
.grid__span-4 { grid-column-end: span 5;}
.grid__span-6 { grid-column-end: span 6;}
.grid__span-7 { grid-column-end: span 7;}
.grid__span-8 { grid-column-end: span 8;}
.grid__span-9 { grid-column-end: span 9;}
.grid__span-10 { grid-column-end: span 10;}
.grid__span-11 { grid-column-end: span 11;}
.grid__span-12 { grid-column-end: span 12;}

/* xs */
@media (max-width:550px){
	.flex_xs{ display:flex; }

    .grid_xs_span-1 { grid-column-end: span 1;}
    .grid_xs_span-2 { grid-column-end: span 2;}
    .grid_xs_span-3 { grid-column-end: span 3;}
    .grid_xs_span-4 { grid-column-end: span 4;}
	.grid_xs_span-4 { grid-column-end: span 5;}
	.grid_xs_span-6 { grid-column-end: span 6;}
	.grid_xs_span-7 { grid-column-end: span 7;}
	.grid_xs_span-8 { grid-column-end: span 8;}
	.grid_xs_span-9 { grid-column-end: span 9;}
	.grid_xs_span-10 { grid-column-end: span 10;}
	.grid_xs_span-11 { grid-column-end: span 11;}
	.grid_xs_span-12 { grid-column-end: span 12;}

    .grid_xs_col-start-1 {grid-column-start: 1;}
    .grid_xs_col-start-2 {grid-column-start: 2;}
    .grid_xs_col-start-3 {grid-column-start: 3;}
    .grid_xs_col-start-4 {grid-column-start: 4;}
    .grid_xs_col-start-4 {grid-column-start: 5;}
    .grid_xs_col-start-6 {grid-column-start: 6;}
    .grid_xs_col-start-7 {grid-column-start: 7;}
    .grid_xs_col-start-8 {grid-column-start: 8;}
    .grid_xs_col-start-9 {grid-column-start: 9;}
    .grid_xs_col-start-10 {grid-column-start: 10;}
    .grid_xs_col-start-11 {grid-column-start: 11;}
}
/* sm */
@media (max-width:850px){
	.flex_sm{ display:flex; }

    .grid_sm_span-1 { grid-column-end: span 1;}
    .grid_sm_span-2 { grid-column-end: span 2;}
    .grid_sm_span-3 { grid-column-end: span 3;}
    .grid_sm_span-4 { grid-column-end: span 4;}
	.grid_sm_span-4 { grid-column-end: span 5;}
	.grid_sm_span-6 { grid-column-end: span 6;}
	.grid_sm_span-7 { grid-column-end: span 7;}
	.grid_sm_span-8 { grid-column-end: span 8;}
	.grid_sm_span-9 { grid-column-end: span 9;}
	.grid_sm_span-10 { grid-column-end: span 10;}
	.grid_sm_span-11 { grid-column-end: span 11;}
	.grid_sm_span-12 { grid-column-end: span 12;}

    .grid_sm_col-start-1 {grid-column-start: 1;}
    .grid_sm_col-start-2 {grid-column-start: 2;}
    .grid_sm_col-start-3 {grid-column-start: 3;}
    .grid_sm_col-start-4 {grid-column-start: 4;}
    .grid_sm_col-start-4 {grid-column-start: 5;}
    .grid_sm_col-start-6 {grid-column-start: 6;}
    .grid_sm_col-start-7 {grid-column-start: 7;}
    .grid_sm_col-start-8 {grid-column-start: 8;}
    .grid_sm_col-start-9 {grid-column-start: 9;}
    .grid_sm_col-start-10 {grid-column-start: 10;}
    .grid_sm_col-start-11 {grid-column-start: 11;}
    .grid_sm_col-start-12 {grid-column-start: 12;}
}
/* lg */
@media (min-width:850px){
	.grid_lg{ display:grid;    gap: var(--page-padding); }
	.flex_lg{ display:flex; }

    .grid_lg_span-1 { grid-column-end: span 1;}
    .grid_lg_span-2 { grid-column-end: span 2;}
    .grid_lg_span-3 { grid-column-end: span 3;}
    .grid_lg_span-4 { grid-column-end: span 4;}
	.grid_lg_span-4 { grid-column-end: span 5;}
	.grid_lg_span-6 { grid-column-end: span 6;}
	.grid_lg_span-7 { grid-column-end: span 7;}
	.grid_lg_span-8 { grid-column-end: span 8;}
	.grid_lg_span-9 { grid-column-end: span 9;}
	.grid_lg_span-10 { grid-column-end: span 10;}
	.grid_lg_span-11 { grid-column-end: span 11;}
	.grid_lg_span-12 { grid-column-end: span 12;}

    .grid_lg_col-start-1 {grid-column-start: 1;}
    .grid_lg_col-start-2 {grid-column-start: 2;}
    .grid_lg_col-start-3 {grid-column-start: 3;}
    .grid_lg_col-start-4 {grid-column-start: 4;}
    .grid_lg_col-start-4 {grid-column-start: 5;}
    .grid_lg_col-start-6 {grid-column-start: 6;}
    .grid_lg_col-start-7 {grid-column-start: 7;}
    .grid_lg_col-start-8 {grid-column-start: 8;}
    .grid_lg_col-start-9 {grid-column-start: 9;}
    .grid_lg_col-start-10 {grid-column-start: 10;}
    .grid_lg_col-start-11 {grid-column-start: 11;}
    .grid_lg_col-start-12 {grid-column-start: 12;}
}