/* -------------------------------------------------------------------------- *
 * ========================================================================== *
 * Mohunky Cornerstone v7.0.8
 * Layout
 * ========================================================================== *
 * -------------------------------------------------------------------------- *
             	
                                    .-.
                                   |_:_|
                                  /(_Y_)\
             .                   ( \/M\/ )
              '.               _.'-/'-'\-'._
                ':           _/.--'[[[[]'--.\_
                  ':        /_'  : |::"| :  '.\
                    ':     //   ./ |oUU| \.'  :\
                      ':  _:'..' \_|___|_/ :   :|
                        ':.  .'  |_[___]_|  :.':\
                         [::\ |  :  | |  :   ; : \
                          '-'   \/'.| |.' \  .;.' |
                          |\_    \  '-'   :       |
                          |  \    \ .:    :   |   |
                          |   \    | '.   :    \  |
                          /       \   :. .;       |
                         /     |   |  :__/     :  \\
                        |  |   |    \:   | \   |   ||
                       /    \  : :  |:   /  |__|   /|
                       |     : : :_/_|  /'._\  '--|_\
                       /___.-/_|-'   \  \
                                      '-'
        	
        		These aren't the codes you're looking for!							   */


/* -------------------------------------------------------------------------- *
 * Breakpoints
 * -------------------------------------------------------------------------- *

	Context Device	|	Class name	|	ACTUAL PIXELS
	---------------|--------------|-----------------------
	Desktop			|					|	1401px and upwards
	Laptop Large	|	.ll			|	1400px and under
	Laptop Small	|	.ls			|	1200px and under
	Tablet Large	|	.tl			|	1000px and under
	Tablet Small	|	.ts			|	800px and under
	Mobile Large	|	.ml			|	600px and under
	Mobile Small	|	.ms			|	400px and under

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


/* -------------------------------------------------------------------------- *
 * Baselines
 * -------------------------------------------------------------------------- */
:root
{
  --columns: 12;
}
@media only screen and (min-width: 801px) and (max-width: 1000px) {
	:root {
	  --columns: 8;
	}
}
@media only screen and (min-width: 601px) and (max-width: 800px) {
	:root {
	  --columns: 6;
	}
}
@media only screen and (min-width: 401px) and (max-width: 600px) {
	:root {
	  --columns: 4;
	}
}
@media only screen and (min-width: 0px) and (max-width: 400px) {
	:root {
	  --columns: 2;
	}
}
html, body
{
	min-width: 320px;
	height: 100%;
	margin: 0;
	scroll-behavior: smooth;
}

	html:focus-within
	{
		scroll-behavior: smooth;
	}

img
{
	display: block;
	max-width: 100%;
	height: auto;
}


/* -------------------------------------------------------------------------- *
 * Core Layouts
 * -------------------------------------------------------------------------- */
/* ----- Containers ----- */
.container
{
	position: relative;
	width: 100%;
	max-width: 1220px;
	margin: 0 auto;
}

	.container.wide, .container.-wide
	{
		max-width: 1440px;
	}

	.container.wider, .container.-wider
	{
		max-width: 1920px;
	}

	.container.widest, .container.-widest
	{
		max-width: none;
	}

/* --- Rows --- */
.row
{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	margin: 0 -1rem;
	word-break: break-word;
}

.container.wide .row, .container.-wide .row,
.container.wider .row, .container.-wider .row,
.container.widest .row, .container.-widest .row
{
	margin: 0;
}

	.container.wide .row .row, .container.-wide .row .row,
	.container.-wider .row .row,
	.container.widest .row .row, .container.-widest .row .row
	{
		margin: 0 -1rem;
	}
/* --- Columns --- */
.col,
.column
{
	box-sizing: border-box;
	flex-basis: 0;
	flex-grow: 1;
	flex-shrink: 1;
	padding: 1rem;
	max-width: 100%;
}

	.col.demo, .col.-demo,
	.column.demo, .column.-demo
	{
		background-color: var(--colorPrimary);
		border: 1px solid #fff;
		border-radius: 0.375rem;
	}

		.col.demo .col.demo, .col.-demo .col.-demo,
		.column.demo .column.demo, .column.-demo .column.-demo
		{
			background-color: var(--colorSecondary);
		}

/* ----- Column Defaults ----- */
.span1			{   flex:none; width: calc(100% / var(--columns) * 1);   }
.span2			{   flex:none; width: calc(100% / var(--columns) * 2);   }
.span3			{   flex:none; width: calc(100% / var(--columns) * 3);   }
.span4			{   flex:none; width: calc(100% / var(--columns) * 4);   }
.span5			{   flex:none; width: calc(100% / var(--columns) * 5);   }
.span6			{   flex:none; width: calc(100% / var(--columns) * 6);   }
.span7			{   flex:none; width: calc(100% / var(--columns) * 7);   }
.span8			{   flex:none; width: calc(100% / var(--columns) * 8);   }
.span9			{   flex:none; width: calc(100% / var(--columns) * 9);   }
.span10			{   flex:none; width: calc(100% / var(--columns) * 10);   }
.span11			{   flex:none; width: calc(100% / var(--columns) * 11);   }
.span12			{   flex:none; width: 100%;   }

/* ----- Offsets ----- */
.offset1			{   margin-left: calc(100% / var(--columns) * 1);   }
.offset2			{   margin-left: calc(100% / var(--columns) * 2);   }
.offset3			{   margin-left: calc(100% / var(--columns) * 3);   }
.offset4			{   margin-left: calc(100% / var(--columns) * 4);   }
.offset5			{   margin-left: calc(100% / var(--columns) * 5);   }
.offset6			{   margin-left: calc(100% / var(--columns) * 6);   }
.offset7			{   margin-left: calc(100% / var(--columns) * 7);   }
.offset8			{   margin-left: calc(100% / var(--columns) * 8);   }
.offset9			{   margin-left: calc(100% / var(--columns) * 9);   }
.offset10		{   margin-left: calc(100% / var(--columns) * 10);   }
.offset11		{   margin-left: calc(100% / var(--columns) * 11);   }



@media screen and (prefers-reduced-motion: reduce) {
	html:focus-within {   scroll-behavior:auto;   }
}

/* -------------------------------------------------------------------------- *
 * Responsive variants
 * -------------------------------------------------------------------------- */
@media only screen and (max-width: 1400px) {
	/* ---------------------------------------- *
	 * Laptop Large / .-ll- / 12 columns
	 * ---------------------------------------- */
	
	/* ----- Container overrides ----- */
	.container {
		 max-width:1168px;
	}
	.container.wide, .container.-wide, .conta.wider, .conta.-wider, .container.widest, .container.-widest {
		 width:100%;
	}

	/* ----- Column overrides ----- */
	.-ll-span1			{   flex:none; width: calc(100% / var(--columns) * 1);   }
	.-ll-span2			{   flex:none; width: calc(100% / var(--columns) * 2);   }
	.-ll-span3			{   flex:none; width: calc(100% / var(--columns) * 3);   }
	.-ll-span4			{   flex:none; width: calc(100% / var(--columns) * 4);   }
	.-ll-span5			{   flex:none; width: calc(100% / var(--columns) * 5);   }
	.-ll-span6			{   flex:none; width: calc(100% / var(--columns) * 6);   }
	.-ll-span7			{   flex:none; width: calc(100% / var(--columns) * 7);   }
	.-ll-span8			{   flex:none; width: calc(100% / var(--columns) * 8);   }
	.-ll-span9			{   flex:none; width: calc(100% / var(--columns) * 9);   }
	.-ll-span10			{   flex:none; width: calc(100% / var(--columns) * 10);   }
	.-ll-span11			{   flex:none; width: calc(100% / var(--columns) * 11);   }
	.-ll-span12			{   flex:none; width: 100%;   }
	
	/* ----- Offset overrides ----- */
	.-ll-offset0			{   margin-left: 0;   }
	.-ll-offset1			{   margin-left: calc(100% / var(--columns) * 1);   }
	.-ll-offset2			{   margin-left: calc(100% / var(--columns) * 2);   }
	.-ll-offset3			{   margin-left: calc(100% / var(--columns) * 3);   }
	.-ll-offset4			{   margin-left: calc(100% / var(--columns) * 4);   }
	.-ll-offset5			{   margin-left: calc(100% / var(--columns) * 5);   }
	.-ll-offset6			{   margin-left: calc(100% / var(--columns) * 6);   }
	.-ll-offset7			{   margin-left: calc(100% / var(--columns) * 7);   }
	.-ll-offset8			{   margin-left: calc(100% / var(--columns) * 8);   }
	.-ll-offset9			{   margin-left: calc(100% / var(--columns) * 9);   }
	.-ll-offset10		{   margin-left: calc(100% / var(--columns) * 10);   }
	.-ll-offset11		{   margin-left: calc(100% / var(--columns) * 11);   }


}
@media only screen and (max-width: 1200px) {
	/* ---------------------------------------- *
	 * Laptop Small / .-ls- / 12 columns
	 * ---------------------------------------- */

	/* ----- Container overrides ----- */
	.container			{   width:100%; max-width:1200px;   }
	.container .row	{   margin:0;   }

	/* ----- Column overrides ----- */
	.-ls-span1			{   flex:none; width: calc(100% / var(--columns) * 1);   }
	.-ls-span2			{   flex:none; width: calc(100% / var(--columns) * 2);   }
	.-ls-span3			{   flex:none; width: calc(100% / var(--columns) * 3);   }
	.-ls-span4			{   flex:none; width: calc(100% / var(--columns) * 4);   }
	.-ls-span5			{   flex:none; width: calc(100% / var(--columns) * 5);   }
	.-ls-span6			{   flex:none; width: calc(100% / var(--columns) * 6);   }
	.-ls-span7			{   flex:none; width: calc(100% / var(--columns) * 7);   }
	.-ls-span8			{   flex:none; width: calc(100% / var(--columns) * 8);   }
	.-ls-span9			{   flex:none; width: calc(100% / var(--columns) * 9);   }
	.-ls-span10			{   flex:none; width: calc(100% / var(--columns) * 10);   }
	.-ls-span11			{   flex:none; width: calc(100% / var(--columns) * 11);   }
	.-ls-span12			{   flex:none; width: 100%;   }
	
	/* ----- Offset overrides ----- */
	.-ls-offset0			{   margin-left: 0;   }
	.-ls-offset1			{   margin-left: calc(100% / var(--columns) * 1);   }
	.-ls-offset2			{   margin-left: calc(100% / var(--columns) * 2);   }
	.-ls-offset3			{   margin-left: calc(100% / var(--columns) * 3);   }
	.-ls-offset4			{   margin-left: calc(100% / var(--columns) * 4);   }
	.-ls-offset5			{   margin-left: calc(100% / var(--columns) * 5);   }
	.-ls-offset6			{   margin-left: calc(100% / var(--columns) * 6);   }
	.-ls-offset7			{   margin-left: calc(100% / var(--columns) * 7);   }
	.-ls-offset8			{   margin-left: calc(100% / var(--columns) * 8);   }
	.-ls-offset9			{   margin-left: calc(100% / var(--columns) * 9);   }
	.-ls-offset10		{   margin-left: calc(100% / var(--columns) * 10);   }
	.-ls-offset11		{   margin-left: calc(100% / var(--columns) * 11);   }
	
}
@media only screen and (max-width: 1000px) {
	/* ---------------------------------------- *
	 * Tablet Large / .-tl- / 8 columns
	 * ---------------------------------------- */

	/* ----- Column overrides ----- */
	.-tl-span1			{   flex:none; width: calc(100% / var(--columns) * 1);   }
	.-tl-span2			{   flex:none; width: calc(100% / var(--columns) * 2);   }
	.-tl-span3			{   flex:none; width: calc(100% / var(--columns) * 3);   }
	.-tl-span4			{   flex:none; width: calc(100% / var(--columns) * 4);   }
	.-tl-span5			{   flex:none; width: calc(100% / var(--columns) * 5);   }
	.-tl-span6			{   flex:none; width: calc(100% / var(--columns) * 6);   }
	.-tl-span7			{   flex:none; width: calc(100% / var(--columns) * 7);   }
	.-tl-span8			{   flex:none; width: 100%;   }

	/* ----- Offset overrides ----- */
	.-tl-offset0			{   margin-left: 0;   }
	.-tl-offset1			{   margin-left: calc(100% / var(--columns) * 1);   }
	.-tl-offset2			{   margin-left: calc(100% / var(--columns) * 2);   }
	.-tl-offset3			{   margin-left: calc(100% / var(--columns) * 3);   }
	.-tl-offset4			{   margin-left: calc(100% / var(--columns) * 4);   }
	.-tl-offset5			{   margin-left: calc(100% / var(--columns) * 5);   }
	.-tl-offset6			{   margin-left: calc(100% / var(--columns) * 6);   }
	.-tl-offset7			{   margin-left: calc(100% / var(--columns) * 7);   }


}
@media only screen and (max-width: 800px) {
	/* ---------------------------------------- *
	 * Tablet Small / .-ts- / 6 columns
	 * ---------------------------------------- */

	/* ----- Column overrides ----- */
	.-ts-span1			{   flex:none; width: calc(100% / var(--columns) * 1);   }
	.-ts-span2			{   flex:none; width: calc(100% / var(--columns) * 2);   }
	.-ts-span3			{   flex:none; width: calc(100% / var(--columns) * 3);   }
	.-ts-span4			{   flex:none; width: calc(100% / var(--columns) * 4);   }
	.-ts-span5			{   flex:none; width: calc(100% / var(--columns) * 5);   }
	.-ts-span6			{   flex:none; width: 100%;   }
	
	/* ----- Offset overrides ----- */
	.-ts-offset0			{   margin-left: 0;   }
	.-ts-offset1			{   margin-left: calc(100% / var(--columns) * 1);   }
	.-ts-offset2			{   margin-left: calc(100% / var(--columns) * 2);   }
	.-ts-offset3			{   margin-left: calc(100% / var(--columns) * 3);   }
	.-ts-offset4			{   margin-left: calc(100% / var(--columns) * 4);   }
	.-ts-offset5			{   margin-left: calc(100% / var(--columns) * 5);   }

}
@media only screen and (max-width: 600px) {
	/* ---------------------------------------- *
	 * Mobile Large / .-ml- / 4 columns
	 * ---------------------------------------- */

	/* ----- Column overrides ----- */
	.-ml-span1			{   flex:none; width: calc(100% / var(--columns) * 1);   }
	.-ml-span2			{   flex:none; width: calc(100% / var(--columns) * 2);   }
	.-ml-span3			{   flex:none; width: calc(100% / var(--columns) * 3);   }
	.-ml-span4			{   flex:none; width: 100%;   }
	
	/* ----- Offset overrides ----- */
	.-ml-offset0			{   margin-left: 0;   }
	.-ml-offset1			{   margin-left: calc(100% / var(--columns) * 1);   }
	.-ml-offset2			{   margin-left: calc(100% / var(--columns) * 2);   }
	.-ml-offset3			{   margin-left: calc(100% / var(--columns) * 3);   }

}
@media only screen and (max-width: 400px) {
	/* ---------------------------------------- *
	 * Mobile Small / .-ms- / 2 columns
	 * ---------------------------------------- */

	/* ----- Column overrides ----- */
	.-ms-span1			{   flex:none; width: calc(100% / var(--columns) * 1);   }
	.-ms-span2			{   flex:none; width: 100%;   }
	
	/* ----- Offset overrides ----- */
	.-ms-offset0			{   margin-left: 0;   }
	.-ms-offset1			{   margin-left: calc(100% / var(--columns) * 1);   }
	
}