//layout mixins - start
@import 'variables';

@mixin mkdTableLayout() {
	position: relative;
	display: table;
	table-layout: fixed;
	height: 100%;
	width: 100%;
}

@mixin mkdTableCellLayout() {
	position: relative;
	display: table-cell;
	height: 100%;
	width: 100%;
	vertical-align: middle;
	text-align: center;
}

@mixin mkdRelativeHolderLayout() {
	position: relative;
	display: inline-block;
	width: 100%;
	vertical-align: middle;
}

@mixin mkdTypographyLayout() {
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	font-style: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}

@mixin mkdType1LeftToRightGradient() {
	background: -webkit-linear-gradient(left, $type1-gradient-first-color, $type1-gradient-second-color);
	background: -o-linear-gradient(right, $type1-gradient-first-color, $type1-gradient-second-color);
	background: -moz-linear-gradient(right, $type1-gradient-first-color, $type1-gradient-second-color);
	background: linear-gradient(to right, $type1-gradient-first-color, $type1-gradient-second-color);
}

@mixin mkdType1BotomToTopGradient($webkit) {
	@if $webkit == 'true' {
		background: -webkit-linear-gradient(bottom, $type1-gradient-first-color, $type1-gradient-second-color);
	} @else {
		background: -webkit-linear-gradient(bottom, $type1-gradient-first-color, $type1-gradient-second-color);
		background: -o-linear-gradient(top, $type1-gradient-first-color, $type1-gradient-second-color);
		background: -moz-linear-gradient(top, $type1-gradient-first-color, $type1-gradient-second-color);
		background: linear-gradient(to top, $type1-gradient-first-color, $type1-gradient-second-color);
	}
}

@mixin mkdType1LeftBottomToRightTopGradient($webkit) {
	@if $webkit == 'true' {
		background: -webkit-linear-gradient(right top, $type1-gradient-second-color, $type1-gradient-first-color);
	} @else {
		background: -webkit-linear-gradient(right top, $type1-gradient-second-color, $type1-gradient-first-color);
		background: -o-linear-gradient(right top, $type1-gradient-first-color, $type1-gradient-second-color);
		background: -moz-linear-gradient(right top, $type1-gradient-first-color, $type1-gradient-second-color);
		background: linear-gradient(to right top, $type1-gradient-first-color, $type1-gradient-second-color);
	}
}

@mixin mkdType1LeftToRightGradient2x() {
	background: -webkit-linear-gradient(left, $type1-gradient-first-color 0%, $type1-gradient-second-color 50%, $type1-gradient-first-color 100%);
	background: -o-linear-gradient(right, $type1-gradient-first-color 0%, $type1-gradient-second-color 50%, $type1-gradient-first-color 100%);
	background: -moz-linear-gradient(right, $type1-gradient-first-color 0%, $type1-gradient-second-color 50%, $type1-gradient-first-color 100%);
	background: linear-gradient(to right, $type1-gradient-first-color 0%, $type1-gradient-second-color 50%, $type1-gradient-first-color 100%);
}

@mixin mkdType2LeftToRightGradient() {
	background: -webkit-linear-gradient(left, $type2-gradient-first-color, $type2-gradient-second-color);
	background: -o-linear-gradient(right, $type2-gradient-first-color, $type2-gradient-second-color);
	background: -moz-linear-gradient(right, $type2-gradient-first-color, $type2-gradient-second-color);
	background: linear-gradient(to right, $type2-gradient-first-color, $type2-gradient-second-color);
}

@mixin mkdType2BotomToTopGradient($webkit) {
	@if $webkit == 'true' {
		background: -webkit-linear-gradient(bottom, $type2-gradient-first-color, $type2-gradient-second-color);
	} @else {
		background: -webkit-linear-gradient(bottom, $type2-gradient-first-color, $type2-gradient-second-color);
		background: -o-linear-gradient(top, $type2-gradient-first-color, $type2-gradient-second-color);
		background: -moz-linear-gradient(top, $type2-gradient-first-color, $type2-gradient-second-color);
		background: linear-gradient(to top, $type2-gradient-first-color, $type2-gradient-second-color);
	}
}

@mixin mkdType2LeftBottomToRightTopGradient($webkit) {
	@if $webkit == 'true' {
		background: -webkit-linear-gradient(right top, $type2-gradient-second-color, $type2-gradient-first-color);
	} @else {
		background: -webkit-linear-gradient(right top, $type2-gradient-second-color, $type2-gradient-first-color);
		background: -o-linear-gradient(right top, $type2-gradient-first-color, $type2-gradient-second-color);
		background: -moz-linear-gradient(right top, $type2-gradient-first-color, $type2-gradient-second-color);
		background: linear-gradient(to right top, $type2-gradient-first-color, $type2-gradient-second-color);
	}
}

@mixin mkdType2LeftToRightGradient2x() {
	background: -webkit-linear-gradient(left, $type2-gradient-first-color 0%, $type2-gradient-second-color 50%, $type2-gradient-first-color 100%);
	background: -o-linear-gradient(right, $type2-gradient-first-color 0%, $type2-gradient-second-color 50%, $type2-gradient-first-color 100%);
	background: -moz-linear-gradient(right, $type2-gradient-first-color 0%, $type2-gradient-second-color 50%, $type2-gradient-first-color 100%);
	background: linear-gradient(to right, $type2-gradient-first-color 0%, $type2-gradient-second-color 50%, $type2-gradient-first-color 100%);
}

@mixin mkdType3LeftToRightGradient() {
	background: -webkit-linear-gradient(left, $type3-gradient-first-color, $type3-gradient-second-color);
	background: -o-linear-gradient(right, $type3-gradient-first-color, $type3-gradient-second-color);
	background: -moz-linear-gradient(right, $type3-gradient-first-color, $type3-gradient-second-color);
	background: linear-gradient(to right, $type3-gradient-first-color, $type3-gradient-second-color);
}

@mixin mkdType3BotomToTopGradient($webkit) {
	@if $webkit == 'true' {
		background: -webkit-linear-gradient(bottom, $type3-gradient-first-color, $type3-gradient-second-color);
	} @else {
		background: -webkit-linear-gradient(bottom, $type3-gradient-first-color, $type3-gradient-second-color);
		background: -o-linear-gradient(top, $type3-gradient-first-color, $type3-gradient-second-color);
		background: -moz-linear-gradient(top, $type3-gradient-first-color, $type3-gradient-second-color);
		background: linear-gradient(to top, $type3-gradient-first-color, $type3-gradient-second-color);
	}
}

@mixin mkdType3LeftBottomToRightTopGradient($webkit) {
	@if $webkit == 'true' {
		background: -webkit-linear-gradient(right top, $type3-gradient-second-color, $type3-gradient-first-color);
	} @else {
		background: -webkit-linear-gradient(right top, $type3-gradient-second-color, $type3-gradient-first-color);
		background: -o-linear-gradient(right top, $type3-gradient-first-color, $type3-gradient-second-color);
		background: -moz-linear-gradient(right top, $type3-gradient-first-color, $type3-gradient-second-color);
		background: linear-gradient(to right top, $type3-gradient-first-color, $type3-gradient-second-color);
	}
}

@mixin mkdType3LeftToRightGradient2x() {
	background: -webkit-linear-gradient(left, $type3-gradient-first-color 0%, $type3-gradient-second-color 50%, $type3-gradient-first-color 100%);
	background: -o-linear-gradient(right, $type3-gradient-first-color 0%, $type3-gradient-second-color 50%, $type3-gradient-first-color 100%);
	background: -moz-linear-gradient(right, $type3-gradient-first-color 0%, $type3-gradient-second-color 50%, $type3-gradient-first-color 100%);
	background: linear-gradient(to right, $type3-gradient-first-color 0%, $type3-gradient-second-color 50%, $type3-gradient-first-color 100%);
}

@mixin mkdType4LeftToRightGradient() {
	background: -webkit-linear-gradient(left, $type4-gradient-first-color, $type4-gradient-second-color);
	background: -o-linear-gradient(right, $type4-gradient-first-color, $type4-gradient-second-color);
	background: -moz-linear-gradient(right, $type4-gradient-first-color, $type4-gradient-second-color);
	background: linear-gradient(to right, $type4-gradient-first-color, $type4-gradient-second-color);
}

@mixin mkdType4BotomToTopGradient($webkit) {
	@if $webkit == 'true' {
		background: -webkit-linear-gradient(bottom, $type4-gradient-first-color, $type4-gradient-second-color);
	} @else {
		background: -webkit-linear-gradient(bottom, $type4-gradient-first-color, $type4-gradient-second-color);
		background: -o-linear-gradient(top, $type4-gradient-first-color, $type4-gradient-second-color);
		background: -moz-linear-gradient(top, $type4-gradient-first-color, $type4-gradient-second-color);
		background: linear-gradient(to top, $type4-gradient-first-color, $type4-gradient-second-color);
	}
}

@mixin mkdType4LeftBottomToRightTopGradient($webkit) {
	@if $webkit == 'true' {
		background: -webkit-linear-gradient(right top, $type4-gradient-second-color, $type4-gradient-first-color);
	} @else {
		background: -webkit-linear-gradient(right top, $type4-gradient-second-color, $type4-gradient-first-color);
		background: -o-linear-gradient(right top, $type4-gradient-first-color, $type4-gradient-second-color);
		background: -moz-linear-gradient(right top, $type4-gradient-first-color, $type4-gradient-second-color);
		background: linear-gradient(to right top, $type4-gradient-first-color, $type4-gradient-second-color);
	}
}

@mixin mkdType4LeftToRightGradient2x() {
	background: -webkit-linear-gradient(left, $type4-gradient-first-color 0%, $type4-gradient-second-color 50%, $type4-gradient-first-color 100%);
	background: -o-linear-gradient(right, $type4-gradient-first-color 0%, $type4-gradient-second-color 50%, $type4-gradient-first-color 100%);
	background: -moz-linear-gradient(right, $type4-gradient-first-color 0%, $type4-gradient-second-color 50%, $type4-gradient-first-color 100%);
	background: linear-gradient(to right, $type4-gradient-first-color 0%, $type4-gradient-second-color 50%, $type4-gradient-first-color 100%);
}

@mixin mkdType1LeftToRightSeparatorGradient() {
	border-image: -webkit-linear-gradient(left, $type1-gradient-first-color 0%, $type1-gradient-second-color 100%);
	border-image: -o-linear-gradient(right, $type1-gradient-first-color 0%, $type1-gradient-second-color 100%);
	border-image: -moz-linear-gradient(right, $type1-gradient-first-color 0%, $type1-gradient-first-color 100%);
	border-image: linear-gradient(to right, $type1-gradient-first-color 0%, $type1-gradient-second-color 100%);
	border-image-slice: 1
}

@mixin mkdType2LeftToRightSeparatorGradient() {
	border-image: -webkit-linear-gradient(left, $type2-gradient-first-color 0%, $type2-gradient-second-color 100%);
	border-image: -o-linear-gradient(right, $type2-gradient-first-color 0%, $type2-gradient-second-color 100%);
	border-image: -moz-linear-gradient(right, $type2-gradient-first-color 0%, $type2-gradient-first-color 100%);
	border-image: linear-gradient(to right, $type2-gradient-first-color 0%, $type2-gradient-second-color 100%);
	border-image-slice: 1
}

@mixin mkdType3LeftToRightSeparatorGradient() {
	border-image: -webkit-linear-gradient(left, $type3-gradient-first-color 0%, $type3-gradient-second-color 100%);
	border-image: -o-linear-gradient(right, $type3-gradient-first-color 0%, $type3-gradient-second-color 100%);
	border-image: -moz-linear-gradient(right, $type3-gradient-first-color 0%, $type3-gradient-first-color 100%);
	border-image: linear-gradient(to right, $type3-gradient-first-color 0%, $type3-gradient-second-color 100%);
	border-image-slice: 1
}

@mixin mkdType4LeftToRightSeparatorGradient() {
	border-image: -webkit-linear-gradient(left, $type4-gradient-first-color 0%, $type4-gradient-second-color 100%);
	border-image: -o-linear-gradient(right, $type4-gradient-first-color 0%, $type4-gradient-second-color 100%);
	border-image: -moz-linear-gradient(right, $type4-gradient-first-color 0%, $type4-gradient-first-color 100%);
	border-image: linear-gradient(to right, $type4-gradient-first-color 0%, $type4-gradient-second-color 100%);
	border-image-slice: 1
}

//layout mixins - end

//transition mixins - start

@mixin mkdTransition($transition-param...) {
	-webkit-transition: $transition-param;
	-moz-transition: $transition-param;
	transition: $transition-param;
}

@mixin mkdTransform($transform-param...) {
	-webkit-transform: $transform-param;
	-moz-transform: $transform-param;
	transform: $transform-param;
}

@mixin mkdAnimation($animation-param...) {
	-webkit-animation: $animation-param;
	-moz-animation: $animation-param;
	animation: $animation-param;
}

@mixin mkdTransformOrigin($animation-param...) {
	-webkit-transform-origin: $animation-param;
	-moz-transform-origin: $animation-param;
	transform-origin: $animation-param;
}

@mixin mkdBoxShadow($shadow-property...) {
	-webkit-box-shadow: $shadow-property;
	-moz-box-shadow: $shadow-property;
	box-shadow: $shadow-property;
}

@mixin mkdBorderRadius($border-radius...) {
	-webkit-border-radius: $border-radius;
	-moz-border-radius: $border-radius;
	border-radius: $border-radius;
}

@mixin mkdGradient($gradient...) {
	background: -webkit-linear-gradient($gradient);
	background: -o-linear-gradient($gradient);
	background: -moz-linear-gradient($gradient);
	background: linear-gradient($gradient);
}

@mixin mkdBoxSizing($box-sizing) {
	-webkit-box-sizing: $box-sizing;
	-moz-box-sizing: $box-sizing;
	box-sizing: $box-sizing;
}

@mixin mkdTransitionTransform($transition-time, $transition-function) {
	-webkit-transition: -webkit-transform $transition-time $transition-function;
	transition: transform $transition-time $transition-function;
}

@mixin mkdTransitionDelay($transition-delay...) {
	-webkit-transition-delay: $transition-delay;
	-moz-transition-delay: $transition-delay;
	transition-delay: $transition-delay;
}

@mixin mkdBackfaceVisibility($visibility) {
	-webkit-backface-visibility: $visibility;
	backface-visibility: $visibility;
}

@mixin mkdPlaceholder {
	&::-webkit-input-placeholder {
		@content
	}
	&:-moz-placeholder {
		@content
	}
	&::-moz-placeholder {
		@content
	}
	&:-ms-input-placeholder {
		@content
	}
}

@mixin mkdClearfix() {
	&:before,
	&:after {
		content: " "; /* 1 */
		display: table; /* 2 */
	}

	&:after {
		clear: both;
	}

	& {
		*zoom: 1;
	}
}

//transition mixins - end

//vertical menu
@mixin vertical-menu-laptop-wide-landscape {
	@media only screen and (min-width: map-get($breakpoints, vertical-menu-laptop-landscape)) and (max-width: map-get($breakpoints, vertical-menu-laptop-wide-landscape)) {
		@content;
	}
}

@mixin vertical-menu-laptop-landscape {
	@media only screen and (min-width: map-get($breakpoints, vertical-menu-ipad-landscape)) and (max-width: map-get($breakpoints, vertical-menu-laptop-landscape)) {
		@content;
	}
}

@mixin vertical-menu-small-laptop-landscape {
	@media only screen and (min-width: map-get($breakpoints, ipad-landscape)) and (max-width: map-get($breakpoints, vertical-menu-ipad-landscape)) {
		@content;
	}
}

@mixin vertical-menu-ipad-landscape {
	@media only screen and (max-width: map-get($breakpoints, ipad-landscape)) {
		@content;
	}
}

@mixin laptop-landscape-large {
	@media only screen and (max-width: map-get($breakpoints, laptop-landscape-large)) {
		@content;
	}
}

//media query mixins - start
@mixin large-laptop {
	@media only screen and (max-width: map-get($breakpoints, large-laptop)) {
		@content;
	}
}

@mixin large-laptop-min {
	@media only screen and (min-width: map-get($breakpoints, large-laptop-plus-pixel)) {
		@content;
	}
}

@mixin laptop-landscape {
	@media only screen and (max-width: map-get($breakpoints, laptop-landscape)) {
		@content;
	}
}

@mixin laptop-landscape-min {
	@media only screen and (min-width: map-get($breakpoints, laptop-landscape-plus-pixel)) {
		@content;
	}
}

@mixin mac {
	@media only screen and (max-width: map-get($breakpoints, mac)) {
		@content;
	}
}

@mixin ipad-landscape {
	@media only screen and (max-width: map-get($breakpoints, ipad-landscape)) {
		@content;
	}
}

@mixin ipad-landscape-min {
	@media only screen and (min-width: map-get($breakpoints, ipad-landscape-plus-pixel)) {
		@content;
	}
}

@mixin ipad-portrait {
	@media only screen and (max-width: map-get($breakpoints, ipad-portrait)) {
		@content;
	}
}

@mixin ipad-portrait-min {
	@media only screen and (min-width: map-get($breakpoints, ipad-portrait-plus-pixel)) {
		@content;
	}
}

@mixin phone-landscape {
	@media only screen and (max-width: map-get($breakpoints, phone-landscape)) {
		@content;
	}
}

@mixin phone-landscape-min {
	@media only screen and (min-width: map-get($breakpoints, phone-landscape)) {
		@content;
	}
}

@mixin phone-portrait {
	@media only screen and (max-width: map-get($breakpoints, phone-portrait)) {
		@content;
	}
}

@mixin smaller-phone-portrait {
	@media only screen and (max-width: map-get($breakpoints, smaller-phone-portrait)) {
		@content;
	}
}

//media query mixins - end

//animation mixin - start

@mixin keyframes($name) {
	@-webkit-keyframes #{$name} {
		@content
	}
;
	@keyframes #{$name} {
		@content
	}
;
}

@mixin animation($name, $duration, $repeat, $timing, $delay) {
	-webkit-animation-name: $name;
	-webkit-animation-duration: $duration;
	-webkit-animation-iteration-count: $repeat;
	-webkit-animation-timing-function: $timing;
	-webkit-animation-delay: $delay;
	-webkit-animation-fill-mode: forwards; /* this prevents the animation from restarting! */

	animation-name: $name;
	animation-duration: $duration;
	animation-iteration-count: $repeat;
	animation-timing-function: $timing;
	animation-delay: $delay;
	animation-fill-mode: forwards; /* this prevents the animation from restarting! */
}

//animation mixin - end

@mixin inputStyle($use-background-color: true, $use-margin: true) {
	width: 100%;
	padding: 15px 17px;
	border: 1px solid rgba(#b9c0cb, 0.22);
	outline: 0;
	font-family: $headings-font-family;
	font-size: 14px;
	color: #5c5c5c;
	border-radius: 0;
	@include mkdBoxSizing(border-box);

	@include mkdPlaceholder {
		color: #5c5c5c;
	}

	@if ($use-background-color) {
		background-color: #fbfbfc;
	}

	@if ($use-margin) {
		margin-bottom: 11px;
	}

	@include mkdTransition(border-color 0.2s ease-out);

	&:focus {
		border: 1px solid $first-main-color;
	}

	resize: none;
}