/***********************************/
/**** **** 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: 500;
	}
}
 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> */
/****************************/
/**** **** LANGUAGE **** ***/
/**************************/
/* en or cn */
/***********************************/
/**** **** LAYOUT SETTINGS **** ***/
/*********************************/
/*********************************/
/**** **** GRID SETTINGS **** ***/
/*******************************/
/**********************************/
/**** **** BRAND SETTINGS **** ***/
/********************************/
/* form */
/*********************************/
/**** **** PATH SETTINGS **** ***/
/*******************************/
/*************************************/
/**** **** TYPEFACE SETTINGS **** ***/
/***********************************/
/*************************/
/**** *** BUTTON **** ***/
/***********************/
/**** **** PRIMARY TYPE **** ***/
/**** **** TEXT TYPE **** ***/
/**** **** ANIMATION **** ***/
 @-webkit-keyframes btn_text_arrow {
	 0% {
		 padding-left: 4px;
	}
	 50% {
		 padding-left: 8px;
	}
	 100% {
		 padding-left: 4px;
	}
}
 @-moz-keyframes btn_text_arrow {
	 0% {
		 padding-left: 4px;
	}
	 50% {
		 padding-left: 8px;
	}
	 100% {
		 padding-left: 4px;
	}
}
 @keyframes btn_text_arrow {
	 0% {
		 padding-left: 4px;
	}
	 50% {
		 padding-left: 8px;
	}
	 100% {
		 padding-left: 4px;
	}
}
/**** **** INIT **** ***/
 .btn.btn-primary {
	 font-family: 'Gotham', sans-serif;
	 font-weight: 700;
	 position: relative;
	 padding: 20px;
	 text-decoration: none;
	 display: inline-block;
	 text-transform: uppercase;
	 will-change: color, border, box-shadow, background;
	 transition: all 300ms ease-in-out;
	/* from laptop to desktop */
	/* only desktop */
	/* only laptop */
	/* only tablet */
	/* only mobile */
	/* only mobile small */
	/* sub type : primary */
	 color: var(--cm-light);
	 border: 2px solid brand(button_border);
	 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, );
	 background: var(--gb-primary);
	/* sub type : secondary */
}

 @media screen and (min-width: 960px) and (max-width: 9999px) {
	 .btn.btn-primary {
		 padding: 20px 30px;
	}
 }

	 @media screen and (min-width: 1800px) and (max-width: 9999px) {
		 .btn.btn-primary {
			 padding: 20px 30px;
		}
	}

	 @media screen and (min-width: 960px) and (max-width: 1800px) {
		 .btn.btn-primary {
			 padding: 20px 30px;
		}
	}


	 @media screen and (min-width: 959px) and (max-width: 1024px) {
		 .btn.btn-primary {
			 padding: 20px 30px;
		}
	}


	 @media screen and (max-width : 959px) {
		 .btn.btn-primary {
			 padding: 20px 30px;
		}
	}


	 @media screen and (max-width : 374px) {
		 .btn.btn-primary {
			 padding: 20px 30px;
		}
	}

 .btn.btn-primary:focus {
	 box-shadow: 0px 0px 11px 2px var(--gb-primary);
}
 .btn.btn-primary.hover, .btn.btn-primary:hover {
	 box-shadow: 0 3px 8px 0 rgba(0, 0, 0, );
	 color: var(--gb-primary);
	 background: var(--gb-secondary);
}

	 .btn.btn-primary.hover, .btn.btn-primary:hover {
		 box-shadow: 0 3px 8px 0 rgba(0, 0, 0, );
		 border: 2px solid var(--gb-primary);
		 background: var(--gb-primary_light);
	}

 .btn.btn-secondary {
	 font-family: 'Gotham', sans-serif;
	 font-weight: 700;
	 position: relative;
	 padding: 20px;
	 text-decoration: none;
	 display: inline-block;
	 text-transform: uppercase;
	 will-change: color, border, box-shadow, background;
	 transition: all 300ms ease-in-out;
	/* from laptop to desktop */
	/* only desktop */
	/* only laptop */
	/* only tablet */
	/* only mobile */
	/* only mobile small */
	/* sub type : primary */
	/* sub type : secondary */
}

 @media screen and (min-width: 960px) and (max-width: 9999px) {
	 .btn.btn-secondary {
		 padding: 20px 30px;
	}
}

	 @media screen and (min-width: 1800px) and (max-width: 9999px) {
		 .btn.btn-secondary {
			 padding: 20px 30px;
		}
	}


	 @media screen and (min-width: 960px) and (max-width: 1800px) {
		 .btn.btn-secondary {
			 padding: 20px 30px;
		}
	}


	 @media screen and (min-width: 959px) and (max-width: 1024px) {
		 .btn.btn-secondary {
			 padding: 20px 30px;
		}
	}


	 @media screen and (max-width : 959px) {
		 .btn.btn-secondary {
			 padding: 20px 30px;
		}
	}


	 @media screen and (max-width : 374px) {
		 .btn.btn-secondary {
			 padding: 20px 30px;
		}
	}

 .btn.btn-secondary:focus {
	 box-shadow: 0px 0px 11px 2px var(--gb-primary);
}

	 .btn.btn-secondary.hover, .btn.btn-secondary:hover {
		 box-shadow: 0 3px 8px 0 rgba(0, 0, 0, );
		 border: 2px solid var(--gb-primary);
		 background: var(--gb-primary_light);
	}

 .btn-text.btn-primary {
	 font-family: 'Gotham', sans-serif;
	 font-weight: 700;
	 padding-right: 20px;
	 position: relative;
	 text-decoration: none;
	 display: inline-block;
	/* sub type : primary */
	 color: var(--gb-primary);
	/* sub type : secondary */
}

 .btn-text.btn-primary:after {
	 font-family: 'Gotham', sans-serif;
	 font-weight: 400;
	 position: relative;
	 top: 2px;
	 padding-left: 4px;
	 content: '\00BB';
	 font-size: 28px;
	 will-change: padding;
}

 .btn-text.btn-primary:hover:after, .btn-text.btn-primary.hover:after {
	 -webkit-animation: btn_text_arrow 400ms ease-in forwards;
	 -moz-animation: btn_text_arrow 400ms ease-in forwards;
	 animation: btn_text_arrow 400ms ease-in forwards;
	 -webkit-animation-delay: 0ms;
	 -moz-animation-delay: 0ms;
	 animation-delay: 0ms;
}

	 .btn-text.btn-primary:after {
		 color: var(--gb-secondary);
	}

 .btn-text.btn-secondary {
	 font-family: 'Gotham', sans-serif;
	 font-weight: 700;
	 padding-right: 20px;
	 position: relative;
	 text-decoration: none;
	 display: inline-block;
	/* sub type : primary */
	/* sub type : secondary */
}

 .btn-text.btn-secondary:after {
	 font-family: 'Gotham', sans-serif;
	 font-weight: 400;
	 position: relative;
	 top: 2px;
	 padding-left: 4px;
	 content: '\00BB';
	 font-size: 28px;
	 will-change: padding;
}

 .btn-text.btn-secondary:hover:after, .btn-text.btn-secondary.hover:after {
	 -webkit-animation: btn_text_arrow 400ms ease-in forwards;
	 -moz-animation: btn_text_arrow 400ms ease-in forwards;
	 animation: btn_text_arrow 400ms ease-in forwards;
	 -webkit-animation-delay: 0ms;
	 -moz-animation-delay: 0ms;
	 animation-delay: 0ms;
}

	 .btn-text.btn-secondary:after {
		 color: var(--gb-secondary);
	}