/***********************************/
/**** **** 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);
	 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> */
/******************************/
/**** **** SASS RESET **** ***/
/****************************/
 * {
	 margin: 0;
	 padding: 0;
	 font-size: 100%;
	 border: 0;
	 border-radius: 0;
	 vertical-align: baseline;
	 box-sizing: border-box;
	 background-repeat: none;
	 background-position: 0 0;
}
 article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {
	 display: block;
}
 html, body {
	 height: 100%;
}
 html, body, #layout {
	 width: 100%;
	 -webkit-text-size-adjust: 100%;
}
 #layout {
	 overflow: hidden;
}
 blockquote, q {
	 quotes: none;
}
 blockquote:before, blockquote:after, q:before, q:after {
	 content: none;
}
 table {
	 border-collapse: collapse;
	 border-spacing: 0;
}
 input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="date"], input[type="submit"], textarea, button, select, option {
	 appearance: none;
	 -webkit-appearance: none;
	 resize: none;
	 background: none;
}
 a, button, input[type="submit"], .pointer {
	 cursor: pointer;
}
 ::-ms-clear {
	 display: none;
}
 ::-ms-reveal {
	 display: none;
}
 input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
	 margin: 0;
	 -webkit-appearance: none;
}
 input[type=number] {
	 -moz-appearance: textfield;
}
 input::-webkit-contacts-auto-fill-button {
	 position: absolute;
	 right: 0;
	 visibility: hidden;
	 display: none !important;
	 pointer-events: none;
}
/* var : only used for getting variables */
 var {
	 display: none;
}
 b, strong {
	 font-weight: 700;
}
 i, em {
	 font-style: oblique;
}