/***********************************/
/**** **** MATRIX SETTINGS **** ***/
/*********************************/
/* Usage: Update matrix gutter HTML: <nav data-matrix=""> <a> <a> SASS: @include matrix_setting([number of matrix], [gutter space], '[child element]');
 Example: @include matrix_setting(2, 30px, 'div');
 */
/************************************************/
/**** **** TYPEFACE SETTINGS (LOCAL) v2 **** ***/
/**********************************************/
/* Usage: $local-font-settings: ( (Gotham, Gotham-Light_Web, '200'), (Gotham, Gotham-Book_Web, '400'), (Gotham, Gotham-Medium_Web, '500') );
 $font_path : '../_assets/core/fonts';
 Usage: @include localFontSetup($local-font-settings, $font_path);
 Usage: @mixin gotham($font) {
	 font-family: 'Gotham', sans-serif;
	 @if $font == light {
		 font-weight: 200;
	}
	 @else if $font == book {
		 font-weight: 400;
	}
	 @else if $font == medium {
		 font-weight: 600;
	}
}
 body {
	 @include gotham(book);
}
 */
/*****************************/
/**** **** ANIMATION **** ***/
/***************************/
/* Usage: @include animationFrames(fade) {
	 0% {
		 opacity: 1;
	}
	 50% {
		 opacity: 0;
	}
}
 */
/* Usage: @include animation(300ms fade ease-in-out forwards, 100);
 */
/**************************************/
/**** *** PAGE WIDTH SETTINGS **** ***/
/************************************/
/**** **** GRID MIXIN **** ***/
/****************************/
/**** **** FLEX SET **** ***/
/**************************/
/******************************/
/**** **** RESET LIST **** ***/
/****************************/
/*****************************/
/**** **** FOR PRINT **** ***/
/***************************/
/**** **** SETTING UP TYPEFACE **** ***/
/**** **** PREMADE VIEWPORT **** ***/
/**** **** CUSTOM VIEWPORT **** ***/
/* Usage: @include viewport-custom(200, 300) {
	 h1 {
		 font-size: 20px;
	}
}
 */
/**** **** SPECIFIC VIEWPORT **** ***/
/* ipad specific */
/* iphone 6/7/8 specific */
/* ie11 specific */
/**** **** PRIMARY TYPE **** ***/
/**** **** TEXT TYPE **** ***/
/**** **** CLOSE **** ***/
/* Usage: @include close-icon([width of icon], [height of icon], [icon colour]);
 Examples: @include close-icon(25px, 3px, var(--gb-primary));
 @include close-icon($width: 25px);
 @include close-icon;
 */
/* init */
 [data-icon="close"] span {
	 position: absolute;
	 top: 50%;
	 left: 50%;
	 width: 100%;
	 height: 100%;
	 transform: translate(-50%, -50%);
}
 [data-icon="close"] span:before, [data-icon="close"] span:after {
	 content: '';
	 position: absolute;
	 top: 50%;
	 left: 50%;
	 width: 100%;
	 height: 3px;
	 transform-origin: 0 0;
	 background: var(--gb-primary);
}
 [data-icon="close"] span:before {
	 transform: rotate(45deg) translate(-50%, -50%);
}
 [data-icon="close"] span:after {
	 transform: rotate(-45deg) translate(-50%, -50%);
}
/**** **** HAMBURGER **** ***/
/* Usage: @include hamburger([width of icon], [height of icon], [space between lines], [icon colour]);
 Examples: @include hamburger(25px, 2px, 1, #fff);
 @include hamburger($width: 25px, $bg: #f00);
 @include hamburger;
 */
/* init */
 [data-icon="hamburger"] span {
	 position: absolute;
	 top: 50%;
	 left: 50%;
	 width: 100%;
	 height: 3px;
	 transform: translate(-50%, -50%);
	 background: var(--gb-primary);
}
 [data-icon="hamburger"] span:before, [data-icon="hamburger"] span:after {
	 content: '';
	 position: absolute;
	 left: 0;
	 width: 100%;
	 height: 3px;
	 transform-origin: 0 0;
	 background: var(--gb-primary);
}
 [data-icon="hamburger"] span:before {
	 bottom: 7.5px;
}
 [data-icon="hamburger"] span:after {
	 top: 7.5px;
}
/**** **** PLUS/MINUS **** ***/
/* Usage: @plus-minus-icon([width of icon], [height of icon], [icon colour]);
 Examples: @plus-minus-icon(25px, 2px, #fff);
 @include plus-minus-icon($width: 13px);
 @plus-minus-icon;
 */
/* init */
 [data-icon="plus-minus"] span {
	 position: absolute;
	 top: 50%;
	 left: 50%;
	 width: 100%;
	 height: 100%;
	 transform: translate(-50%, -50%);
}
 [data-icon="plus-minus"] span:before, [data-icon="plus-minus"] span:after {
	 content: '';
	 position: absolute;
	 top: 50%;
	 left: 50%;
	 width: 100%;
	 height: 3px;
	 transform-origin: 0 0;
	 background: var(--gb-primary);
}
 [data-icon="plus-minus"] span:before {
	 transform: translate(-50%, -50%);
}
 [data-icon="plus-minus"] span:after {
	 transform: rotate(90deg) translate(-50%, -50%);
}
/**** **** YELLOW CIRCLE WORD ICONS **** ***/
/* Usage: <p data-dot>Vs</p> */
/******************************/
/**** **** GRID MIXIN **** ***/
/****************************/
/* Usage: @include grid(col, 12, 15px);
 @include grid(mobile, 6, 15px);
 @include grid(desktop, 12, 15px);
 HTML: <article data-row> <section data-col="col-12 mobile-12 desktop-3"></section> </article> */
/**** **** BASE LAYOUT **** ***/
 [data-row] {
	 display: flex;
	 flex-wrap: wrap;
	 justify-content: flex-start;
}
 [data-row*="center"] {
	 justify-content: center;
}
 [data-row*="right"] {
	 justify-content: flex-end;
}
 [data-row*="just-space"] {
	 justify-content: space-between;
}
/**** **** INIT **** ***/
 [data-row] {
	 margin-left: var(--gr-half-gutter) ;
	 margin-right: calc(var(--gr-half-gutter) * -1);
}
 [data-col] {
	 padding-right:  calc(var(--gr-half-gutter) * -1);
	 padding-left:  calc(var(--gr-half-gutter) * -1);
}
/* from laptop to desktop */
/* only desktop */
	 @media screen and (min-width: 1800px) and (max-width: 9999px) {
		 [data-row] {
			 margin-left: var(--gr-half-gutter) ;
			 margin-right: var(--gr-half-gutter) ;
		}
		 [data-col] {
			 padding-right:  calc(var(--gr-half-gutter) * -1);
			 padding-left:  calc(var(--gr-half-gutter) * -1);
		}
	}

/* only laptop */
	 @media screen and (min-width: 960px) and (max-width: 1800px) {
		 [data-row] {
			 margin-left: var(--gr-half-gutter) ;
			 margin-right: var(--gr-half-gutter) ;
		}
		 [data-col] {
			 padding-right:  calc(var(--gr-half-gutter) * -1);
			 padding-left:  calc(var(--gr-half-gutter) * -1);
		}
	}

/* only tablet */

	 @media screen and (min-width: 959px) and (max-width: 1024px) {
		 [data-row] {
			 margin-left: var(--gr-half-gutter) ;
			 margin-right: var(--gr-half-gutter) ;
		}
		 [data-col] {
			 padding-right:  calc(var(--gr-half-gutter) * -1);
			 padding-left:  calc(var(--gr-half-gutter) * -1);
		}
	}

/* only mobile */

	 @media screen and (max-width : 959px) {
		 [data-row] {
			 margin-left: var(--gr-half-gutter) ;
			 margin-right: var(--gr-half-gutter) ;
		}
		 [data-col] {
			 padding-right:  calc(var(--gr-half-gutter) * -1);
			 padding-left:  calc(var(--gr-half-gutter) * -1);
		}
	}

/* only mobile small */

	 @media screen and (max-width : 959px) {
		 [data-row] {
			 margin-left: var(--gr-half-gutter) ;
			 margin-right: var(--gr-half-gutter) ;
		}
		 [data-col] {
			 padding-right:  calc(var(--gr-half-gutter) * -1);
			 padding-left:  calc(var(--gr-half-gutter) * -1);
		}
	}

/* from laptop to desktop */
 @media screen and (min-width: 960px) and (max-width: 9999px) {
	 [data-row] {
		 margin-left: var(--gr-half-gutter) ;
		 margin-right: var(--gr-half-gutter) ;
	}
	 [data-col] {
		 padding-right:  calc(var(--gr-half-gutter) * -1);
		 padding-left:  calc(var(--gr-half-gutter) * -1);
	}
}
/* only desktop */

	 @media screen and (min-width: 1800px) and (max-width: 9999px) {
		 [data-row] {
			 margin-left: var(--gr-half-gutter) ;
			 margin-right: var(--gr-half-gutter) ;
		}
		 [data-col] {
			 padding-right:  calc(var(--gr-half-gutter) * -1);
			 padding-left:  calc(var(--gr-half-gutter) * -1);
		}
	}

/* only laptop */

	 @media screen and (min-width: 960px) and (max-width: 1800px) {
		 [data-row] {
			 margin-left: var(--gr-half-gutter) ;
			 margin-right: var(--gr-half-gutter) ;
		}
		 [data-col] {
			 padding-right:  calc(var(--gr-half-gutter) * -1);
			 padding-left:  calc(var(--gr-half-gutter) * -1);
		}
	}

/* only tablet */

	 @media screen and (min-width: 959px) and (max-width: 1024px) {
		 [data-row] {
			 margin-left: var(--gr-half-gutter) ;
			 margin-right: var(--gr-half-gutter) ;
		}
		 [data-col] {
			 padding-right:  calc(var(--gr-half-gutter) * -1);
			 padding-left:  calc(var(--gr-half-gutter) * -1);
		}
	}

/* only mobile */

	 @media screen and (max-width : 959px) {
		 [data-row] {
			 margin-left: var(--gr-half-gutter) ;
			 margin-right: var(--gr-half-gutter) ;
		}
		 [data-col] {
			 padding-right:  calc(var(--gr-half-gutter) * -1);
			 padding-left:  calc(var(--gr-half-gutter) * -1);
		}
	}

/* only mobile small */

	 @media screen and (max-width : 374px) {
		 [data-row] {
			 margin-left: var(--gr-half-gutter) ;
			 margin-right: var(--gr-half-gutter) ;
		}
		 [data-col] {
			 padding-right:  calc(var(--gr-half-gutter) * -1);
			 padding-left:  calc(var(--gr-half-gutter) * -1);
		}
	}

