/* -------------------------------------------------------------------------- *
 * ========================================================================== *
 * Mohunky Cornerstone v7
 * ========================================================================== *
 * -------------------------------------------------------------------------- *
             	
                                    .-.
                                   |_:_|
                                  /(_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%;
	 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
	 {
		 max-width: 1920px;
	 }
 
	 .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.widest .row
 {
	 margin: 0;
 }
 
	 .container.wide .row .row,
	 .container.widest .row .row
	 {
		 margin: -1rem;
	 }
 /* --- Columns --- */
 .col,
 .column
 {
	 box-sizing: border-box;
	 flex-basis: 0;
	 flex-grow: 1;
	 flex-shrink: 1;
	 padding: 1rem;
	 max-width: 100%;
 }
 
	 .col.demo,
	 .column.demo
	 {
		 background-color: var(--colorPrimary);
		 border: 1px solid #fff;
		 border-radius: 0.375rem;
	 }
 
		 .col.demo .col.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.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);   }
	 
 }