/**
 * Media query breakpoint
 * Usage:
 * @include breakpoint(breakpointname) {
		Styles here
 * }
 *
 * e.g. 
 * @include breakpoint(sm) { ...
 */
@mixin breakpoint($point) {
	@if $point == xs {
		@media (max-width: $screen-xs-max) { @content ; }
	}

	@elseif $point == sm {
		@media (max-width: $screen-sm-max) { @content ; }
	}

	@elseif $point == md {
		@media (max-width: $screen-md-max) { @content ; }
	}

	@elseif $point == lg {
		@media (min-width: $screen-lg) { @content ; }
	}

	@else {
		@media (max-width: $point) { @content ; }
	}
}

@mixin general-text {
	color:black;
	//font-size:1.12em;
	font-size:14px;
	font-weight:300;
	a{
		color:inherit;
		font-size:inherit;
		font-weight:inherit;
		text-decoration: none;
	}
	a:hover{
		color:inherit;
		font-size:inherit;
		font-weight:inherit;
		text-decoration: none;	
	}
}

@mixin body-fonts {
	font-size: 1.286em;
}

/**
 * Generate CSS for given icon, including retina
 * Usage:
 * @include icon(icon_name);
 * 
 * e.g. icon named "my_icon" inside "assets/img/icons"
 *      .icons.my_icon {
 *      	@include icon(my_icon);
 *		}
 * 
 * 		Generates all the CSS to display the icon
 *		as a block element
*/
@mixin icon($icon_name) {
	height: icons-sprite-height($icon_name);
	width: icons-sprite-width($icon_name);
	display: inline-block;
	vertical-align: middle;

	background-image: sprite-url($icons_sprites);
	background-position: sprite-position($icons_sprites, $icon_name);
	background-repeat: no-repeat;

	@media (-webkit-min-device-pixel-ratio: 1.33), (min--moz-device-pixel-ratio: 1.33), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.33) {
		$background-pos: sprite-position($icons2x_sprites, $icon_name);
		background-image: sprite-url($icons2x_sprites);
		background-position: nth($background-pos, 1) nth($background_pos, 2)/2;
		@include background-size(ceil(image-width(sprite-path($icons2x_sprites)) / 2) auto);
	}

	@if sprite_has_selector($icons_sprites, $icon_name, 'hover') {
		a:hover &,
		.active & {
			@include sprite-background-position($icons_sprites, "#{$icon_name}_hover", 0, 0);
		}
	}
}


@mixin production-image-baseline {
	margin-top:-200px;
	display:inline-block;
	@include breakpoint(lg) {
			width:100%;
	}
	@include breakpoint(sm) {
		margin-top:-100px;
		width:100%;
	}
	@include breakpoint(xs) {
		margin-top:0px;
	}
}

@mixin production-button-baseline{
	margin-top:90px;
	display:inline-block;

	@include breakpoint(lg){
		margin-top:45px;
	}
	
	@include breakpoint(md) {
		margin-top:10px;
	}	
	@include breakpoint(sm) {
		margin-top:0px;
	}	
	@include breakpoint(xs) {
		margin-top:0px;
	}	
	p{
		margin-top:10px;
		//padding:0 10px;
		display:inline-block;
		width:65%;
		color:$blue;
		word-wrap: break-word;
		@include breakpoint(md) {
			width:80%;
			font-size:2em;
		}	
		@include breakpoint(sm) {
			width:90%;
			font-size:2em;
		}
		@include breakpoint(xs) {
			width:100%;
			font-size:2em;
		}
	}
	span {
		margin:10px;
		@include breakpoint(md) {
			margin-top:25px;
		}	
		@include breakpoint(sm) {
			margin-top:0px;
		}	
	}
}

@mixin set-square{
	@include border-radius(50%);
	background-color:rgba(255,255,255,0.8);
	margin:2%;
	position: relative;
    overflow: hidden;
    width:42%;
	&:after{
	    content: "";
	    display: block;
	    padding-bottom: 100%;
	}
}
@mixin information-background-baseline{
		background-size:cover;
		background-repeat:no-repeat;
		background-position:50%;
}


@mixin dynamic-fonts {
		@include breakpoint(xs){
			font-size:10px
		}
		@include breakpoint(sm){
			font-size:10px
		}
		@include breakpoint(md){
			font-size:12px
		}
		@include breakpoint(lg){
			font-size:14px
		}
}
@mixin hover-zoom {
	&:hover{
		img{
			transform:scale(1.2);
			@include transition-property(all);
			@include transition-duration(0.3s);
			@include transition-timing-function(ease);
		}
	}
}

@mixin button($background, $border, $color) {
	background-color: $background;
	border-color: $border;
	border-style: solid;
	border-width: 2px;
	border-radius: 20px;
	color: $color;
	padding: 5px 30px;
	margin: 5px 0;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	font-size: 1.143em;
	font-family: $sans-serif-bold-font;
	height: 34px;
	display: inline-block;
	line-height: 1.25em;
	vertical-align: middle;
	-webkit-appearance: none;

	&:hover,
	&:focus,
	&.focus,
	&:active,
	&.active {
		border-color: $border;
		background-color: $white;
		color: $border;
		box-shadow: none;
	}

	& + & {
		margin-right: 20px;
	}
}

@mixin button-compact {
	@include button(transparent, $silver, $dove-grey);
	padding: 4px 5px 5px 5px;
	border-radius: 30px;
}

@mixin button-primary {
	@include button(transparent, $alizarin-crimson, $dove-grey);
}

@mixin button-prominent {
	@include button($alizarin-crimson, $alizarin-crimson, $white);
	font-size: 1.400em;
	padding: 8px 30px;
	height: 44px;

	@include breakpoint(md) {
		font-size: 1.2em;
	}
}

@mixin button-prominent-alternate {
	@include button($black-haze, $black-haze, $dove-grey);
}

@mixin button-prominent-red {
  @include button($alizarin-crimson, $alizarin-crimson, $white);
}

@mixin button-hollow {
  @include button(transparent, $white, $white);

  	&:hover,
	&:focus,
	&.focus,
	&:active,
	&.active {
		color: $blue;
	}
}

@mixin vertical-align($position: relative) {
  position: $position;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

@mixin image-2x($image, $width, $height) {
  @media (min--moz-device-pixel-ratio: 1.3),
         (-o-min-device-pixel-ratio: 2.6/2),
         (-webkit-min-device-pixel-ratio: 1.3),
         (min-device-pixel-ratio: 1.3),
         (min-resolution: 1.3dppx) {
    background-image: url($image);
    background-size: $width $height;
  }
}