//DISPLAY 
@mixin flexbox() {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display:         flex;
}

@mixin grid() {
	display: -ms-grid;
	   display: grid;
}

@mixin flex-center{
	align-items: center;
	justify-content: center;
}

// TRANSFORMS
@mixin transform($transforms) {
	-webkit-transform: $transforms;
	-moz-transform: $transforms;
	-ms-transform: $transforms;
	transform: $transforms;
}

// Rotate
@mixin rotate ($deg) { 
	@include transform(rotate(#{$deg}deg));
}

// Scale
@mixin scale($scale) {
	@include transform(scale($scale));
}

// Translate
@mixin translate ($x, $y) {
	@include transform(translate($x, $y));
}

// Translate
@mixin translate3d ($x, $y, $z) {
	@include transform(translate($x, $y, $z));
}

// Skew
@mixin skew ($x, $y) {
	@include transform(skew(#{$x}deg, #{$y}deg));
}

// Transform Origin
@mixin transform-origin ($origin) {
    	-webkit-transform-origin: $origin;
    	-moz-transform-origin: $origin;
	-ms-transform-origin: $origin;
	transform-origin: $origin;
}

// IMAGES
@mixin bg_img_contain(){
	background-size: contain;
	-webkit-background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	width: 100%;
}

@mixin bg_img_cover(){
	background-size: cover;
	-webkit-background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	width: 100%;
}

@mixin background_opacity($op) {
	content: " ";
	z-index: 1;
	display: block;
	position: absolute;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, $op);
}

// Banner and slider
// overlays

@mixin overlay_center() {
	position: absolute;
	top: 50%;
	left: 50%;
	@include translate(-50%, -50%);
}

@mixin overlay_cover() {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

// orange to trans on hover button style
@mixin btn01() {
	line-height: 1;
	position: relative;
	color: #fff;
	padding: 1.05rem 2.5rem;
	border: 1px solid #FF9914;
	transition: ease 0.25s all;
	display: inline-block;
	text-align: center;
	font-weight: normal;
	font-size: 0.6875rem;
	border-radius: 4rem;
	text-transform: uppercase;
	// linear colour change hover affect
	font-family: opensans_bold;
	background: #FF9914;
	height: auto;
}

@mixin btn01_mb() {
	@include btn01();
}

@mixin btn01_hover() {
	// color: #C47A19;
	// linear colour change hover affect
	border: 1px solid #E85D04;
	background: #E85D04;
}

// transparetn to black on hover
@mixin btn02() {
	line-height: 1;
	position: relative;
	color: #fff;
	padding: 1.05rem 2.5rem;
	border: 1px solid #2D863E;
	transition: ease 0.25s all;
	display: inline-block;
	background-color: #2D863E;
	text-align: center;
	font-weight: normal;
	font-size: 0.6875rem;
	border-radius: 5px;
	text-transform: uppercase;
	// linear colour change hover affect
	background: linear-gradient(to left, #2D863E 50%, transparent 50%) right;
	background-size: 220%;
	height: auto;
}

@mixin btn02_mb() {
	@include btn02();
}

@mixin btn02_hover() {
	background-position: left;
	color: #2D863E;
}
// white to gold on hvoer
@mixin btn03() {
	line-height: 1;
	position: relative;
	color: #000;
	padding: 1rem 4.56rem;
	border: 1px solid #fff;
	transition: ease 0.25s all;
	display: inline-block;
	background: #fff;
	text-align: center;
	font-weight: normal;
	border-radius: 5px;
	font-size: 0.6875rem;
	// linear colour change hover affect
	background: linear-gradient(to left, #fff 50%, #84754E 50%) right;
	background-size: 220%;
}

@mixin btn03_mb() {
	@include btn03();
	padding: 2vw 4vw;
}

@mixin btn03_hover() {
	border-color: #84754E;
	color: #fff;
	background-position: left;
}
// gold to black
@mixin btn04() {
	line-height: 1;
	position: relative;
	color: #fff;
	padding: 1rem 4.56rem;
	border: 1px solid #84754E;
	transition: ease 0.25s all;
	display: inline-block;
	background: #84754E;
	text-align: center;
	font-weight: normal;
	border-radius: 5px;
	font-size: 0.6875rem;
	// linear colour change hover affect
	background: linear-gradient(to left, #84754E 50%, #141414 50%) right;
	background-size: 220%;
}

@mixin btn04_mb() {
	@include btn04();
}

@mixin btn04_hover() {
	color: #84754E;
	border-color: #141414;
	background-position: left;
}

// balck to gold
@mixin btn05() {
	position: relative;
	line-height: 1;
	color: #fff;
	padding: 1rem 4.56rem;
	border: 1px solid #191919;
	transition: ease 0.25s all;
	display: inline-block;
	background: #191919;
	text-align: center;
	font-weight: normal;
	border-radius: 5px;
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	// linear colour change hover affect
	background: linear-gradient(to left, #191919 50%, #84754E 50%) right;
	background-size: 220%;
}

@mixin btn05_mb() {
	@include btn04();
}

@mixin btn05_hover() {
	background-position: left;
	border-color: #84754E;
}

@mixin checkbox_round() {
	    width: 0.75vw;
        height: 0.75vw;
        background-color: #fff;
        border-radius: 50%;
        vertical-align: middle;
        border: 2px solid #ddd;
        -webkit-appearance: none;
        outline: none;
        cursor: pointer;
}

@mixin checkbox_round_check() {
    background-color: #000;
}

@mixin center() {
	margin-left: auto;
	margin-right: auto;
}

@mixin ease($attr, $sec) {
	-webkit-transition: ease $sec $attr; /* Safari */
	transition: ease $sec $attr;
}

@mixin easein($attr, $sec) {
	-webkit-transition: ease-in $sec $attr; /* Safari */
	transition: ease-in $sec $attr;
}

@mixin easeinout($attr, $sec) {
	-webkit-transition: ease-in-out $sec $attr; /* Safari */
	transition: ease-in-out $sec $attr;
}

@mixin hdwarexcel() {
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

@mixin box_shadow($colour) {
	-webkit-box-shadow: 0 20px 60px -10px $colour; 
	box-shadow: 0 20px 60px -10px $colour;
}

@mixin box_shadow_lighter($colour) {
	-webkit-box-shadow: 0px 0px 10px -3px $colour;
	-moz-box-shadow: 0px 0px 10px -3px $colour;
	box-shadow: 0px 0px 10px -3px $colour;
}

@mixin box_shadow_archive($colour) {
	-webkit-box-shadow: 0px 0px 14px -3px $colour;
	-moz-box-shadow: 0px 0px 14px -3px $colour;
	box-shadow: 0px 0px 14px -3px $colour;
}

@mixin box_shadow_top($colour) {
	-webkit-box-shadow: 0px 0px 28px -5px $colour;
	-moz-box-shadow: 0px 0px 28px -5px $colour;
	box-shadow: 0px 0px 28px -5px $colour;
}