// media query mixins

@mixin small-screen {
	@media (min-width: #{$mobile-large-land-width}) {
		@content;
	}
}

@mixin medium-screen{
	@media (min-width: #{$tablet-port-width}){
		@content;
	}
}

// orientations

@mixin portrait {
	@media (orientation: portrait){
		@content;
	}
}

@mixin landscape {
	@media (orientation: landscape){
		@content;
	}
}

// orientations AND sizes

@mixin mobile-small-portrait {
	@media (orientation: portrait) and (min-width: #{$mobile-small-port-width}){
		@content;
	}
}

@mixin mobile-small-landscape {
	@media (orientation: landscape) and (min-width: #{$mobile-small-land-width}){
		@content;
	}
}

@mixin mobile-large-portrait {
	@media (orientation: portrait) and (min-width: #{$mobile-large-port-width}){
		@content;
	}
}

@mixin mobile-large-landscape {
	@media (orientation: landscape) and (min-width: #{$mobile-large-land-width}){
		@content;
	}
}

@mixin tablet-portrait {
	@media (orientation: portrait) and (min-width: #{$tablet-port-width} ){
		@content;
	}
}

@mixin landscape-or-large {
	@media (orientation: landscape) and (min-width: 668px) {
		@content;
	}
}


// Targets ie10+, just in case
@mixin ie11 {
	@media
	all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
		@content;
	}
}

@mixin retina-screen {
	@media
	(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	   @content;
	}
}

// Micro Clearfix
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
@mixin clearfix {
	*zoom: 1;

	&:before,
	&:after {
		content: " ";
		display: table;
	}

	&:after {
		clear: both;
	}
}


// cost bar backgrounds

@mixin cost-bar($color) {
	height: 20px;
	background: $color;
	float: left;
	display: block;
}



// absolute centerer
@mixin center($axis: "both"){
	position:absolute;
	@if $axis == "y"{
		top:50%;
		left: 0%;
        transform: translate(0%,-50%);
	}
	@if $axis == "x"{
		top: 0%;
		left:50%;
        transform: translate(-50%, 0%);
	}
	@if $axis == "both"{
		top:50%;
		left:50%;
        transform: translate(-50%, -50%);
	}
	@if $axis == "both-art"{
		top:50%;
		left:50%;
		transform: translate(-50%, -60%);
      }
	@if $axis == "both-footer"{
		top:50% - $footer-height;
		left:50%;
        transform: translate(-50%, -50% + ($footer-height /2));
    }

}