@import url('https://fonts.googleapis.com/css2?family=Google+Sans:opsz@17..18&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bad+Script&family=Brygada+1918:ital,wght@0,400..700;1,400..700&family=Kablammo&family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&family=Rubik+Dirt&family=Rubik+Spray+Paint&family=Shantell+Sans:ital,wght@0,300..800;1,300..800&family=Viaoda+Libre&display=swap');

/* Root */


:root {	
	@media screen and (max-width: 1023px) {	
		--spacing-base: 30px;
		--spacing-sm: 15px;
		--spacing-md-min: 25;
		--spacing-md-max: 30;
		--spacing-lg-min: 30;
		--spacing-lg-max: 50;
		--spacing-xl-min: 35;
		--spacing-xl-max: 80;
		--spacing-xxl-min: 50;
		--spacing-xxl-max: 105;
		--spacing-outer-min: 15;
		--spacing-outer-max: 40;		
      --font-size-base: 18px;   
	  --font-size-sm-min: 16;
	  --font-size-sm-max: 18;
	  --font-size-md-min: 18;
	  --font-size-md-max: 24;
	  --font-size-lg-min: 25;
	  --font-size-lg-max: 28;
	  --font-size-xl-min: 36;
	  --font-size-xl-max: 44;
	  --font-size-xxl-min: 44;
	  --font-size-xxl-max: 48;
	  --font-size-h6-min: 16;
	  --font-size-h6-max: 18;
	  --font-size-h5-min: 16;
	  --font-size-h5-max: 18;
	  --font-size-h4-min: 18;
	  --font-size-h4-max: 24;
	  --font-size-h3-min: 25;
	  --font-size-h3-max: 28;
	  --font-size-h2-min: 36;
	  --font-size-h2-max: 44;
	  --font-size-h1-min: 44;
	  --font-size-h1-max: 48;
	}
	
	@media screen and (min-width: 1024px) {
	  --font-size-base: 21px;
	  --font-size-sm-min: 18;
	  --font-size-sm-max: 19;
	  --font-size-md-min: 22;
	  --font-size-md-max: 24;
	  --font-size-lg-min: 25;
	  --font-size-lg-max: 34;
	  --font-size-xl-min: 42;
	  --font-size-xl-max: 48;
	  --font-size-xxl-min: 76;
	  --font-size-xxl-max: 86;
	  --font-size-h6-min: 18;
	  --font-size-h6-max: 22;
	  --font-size-h5-min: 20;
	  --font-size-h5-max: 24;
	  --font-size-h4-min: 24;
	  --font-size-h4-max: 28;
	  --font-size-h3-min: 25;
	  --font-size-h3-max: 34;
	  --font-size-h2-min: 42;
	  --font-size-h2-max: 48;
	  --font-size-h1-min: 64;
	  --font-size-h1-max: 76;
	  --letter-spacing-h6: 0;
	  --letter-spacing-h5: 0;
	  --letter-spacing-h4: -0.01em;
	  --letter-spacing-h3: -0.02em;
	  --letter-spacing-h2: -0.025em;
	  --letter-spacing-h1: -0.03em;
	  --letter-spacing-lg: -0.035em;
	  --letter-spacing-xl: -0.04em;
	  --letter-spacing-xxl: -0.045em;
	  --line-height-base: 1.45;
	  --line-height-h6: 1.3;
	  --line-height-h5: 1.2;
	  --line-height-h4: 1.2;
	  --line-height-h3: 1.2;
	  --line-height-h2: 1.1;
	  --line-height-h1: 1;
	  --line-height-sm: 1.2;
	  --line-height-md: 1.2;
	  --line-height-lg: 1.1;
	  --line-height-xl: 1;
	  --line-height-xxl: 1;
	}
}

/* Effects */

.shadow-sm {
    box-shadow: 0.5rem 0.5rem 1.5rem rgba(0, 0, 0, 0.03);
}

.shadow-md {
    box-shadow: 1rem 1rem 3rem rgba(0, 0, 0, 0.06);
}

.shadow-lg {
      box-shadow: 2rem 2rem 4rem rgba(0, 0, 0, 0.09);
}

/* Margins */

.m-x-outer {
	margin-left: var(--spacing-outer);
    margin-right: var(--spacing-outer);
}

.m-y-md {
	margin-top: var(--spacing-base);
    margin-bottom: var(--spacing-base);
}

.m-y-lg {
	margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.m-x-md {
	margin-left: var(--spacing-base);
    margin-right: var(--spacing-base);
}

.m-x-lg {
	margin-left: var(--spacing-lg);
    margin-right: var(--spacing-lg);
}

.m-t-md {
	margin-top: var(--spacing-md);
}

.m-t-lg {
	margin-top: var(--spacing-lg);
}

.m-b-md {
    margin-bottom: var(--spacing-md);
}

.m-b-lg {
    margin-bottom: var(--spacing-lg);
}


/* Rounds */

.rad-sm,
.all-rad-sm img,
.all-rad-sm .wp-block-column,
.all-rad-sm .wp-block-image
{
	 border-radius: 0.5rem;
	 overflow:hidden;
}

.rad-md,
.all-rad-md img,
.all-rad-md .wp-block-column,
.all-rad-md .wp-block-image {
	border-radius: var(--spacing-sm);
	overflow:hidden;
}

.rad-lg,
.all-rad-lg img,
.all-rad-lg .wp-block-column,
.all-rad-lg .wp-block-image {
	 border-radius: var(--spacing-base);
	 overflow:hidden;
}

/* Colors */

.txt-white {
    text-color: #ffffff;
}

.txt-light {
    text-color: #f5f5f5;
}

.txt-dark {
    text-color: #1c1c1c;
}

.txt-black {
    text-color: #000;
}

.bgd-white,
.all-white .wp-block-column
{
    background-color: #ffffff;
}

.bgd-light,
.all-light .wp-block-column
{
    background-color: #f5f5f5;
}

.bgd-dark,
.all-dark .wp-block-column
{
    background-color: #1c1c1c;
}

.bgd-black,
.all-black .wp-block-column
{
    background-color: #000000;
}

.bgd-blur,
.bgd-blur-light,
.all-blur-light .wp-block-column
{
    background-color: rgba(255, 255, 255, 0.20);
    backdrop-filter: blur(2rem);
}

.bgd-blur-dark,
.all-blur-dark .wp-block-column
{
    background-color: rgba(0, 0, 0, 0.30);
    backdrop-filter: blur(2rem);
}

/* Borders */

.brd-white,
.all-brd-white .wp-block-column
{
    border: 2px solid #ffffff;
}

.brd-light,
.brd-bgd-light,
.all-brd-light .wp-block-column
{
    border: 2px solid rgba(0, 0, 0, 0.10);
}

.brd-bgd-dark,
.all-brd-dark .wp-block-column
{
    border: 2px solid rgba(0, 0, 0, 0.90);
}

.brd-black,
.all-brd-black .wp-block-column
{
    border: 2px solid #000000;
}

/* Paddings */

.p-x-outer {
	padding-left: var(--spacing-outer);
    padding-right: var(--spacing-outer);
}

.p-x-sm {
	padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
}

.p-x-md {
	padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
}

.all-p-sm .wp-block-column
{
    padding: var(--spacing-sm);
    border-radius: 1.5rem;
}

.all-p-md .wp-block-column
{
    padding: var(--spacing-base);
    border-radius: 1.5rem;
}

.all-p-lg .wp-block-column
{
    padding: var(--spacing-md);
    border-radius: 3rem;
}

.all-p-md .wp-block-column img,
.all-p-lg .wp-block-column img
{
	border-radius: 0.25rem;
}

/* More */

.pos-sticky {
	position: sticky;
}

.w-100 {
	width:100%!important;
}

.no-animate {
	-o-transition-property: none !important;
	-moz-transition-property: none !important;
	-ms-transition-property: none !important;
	-webkit-transition-property: none !important;
	transition-property: none !important;

	-o-transform: none !important;
	-moz-transform: none !important;
	-ms-transform: none !important;
	-webkit-transform: none !important;
	transform: none !important;

	-webkit-animation: none !important;
	-moz-animation: none !important;
	-o-animation: none !important;
	-ms-animation: none !important;
	animation: none !important;
}

	.mob-hide {
		display:none;
	}

@media screen and (min-width: 1024px) {
	.mob-hide {
		display:inherit;
	}
}