/* ==========================================================================
   Functions, Mixins and extendable classes
   ========================================================================== */

@function calc-em($target-px, $context: $baseSize) {
	@return ($target-px / $context) * 1em;
}

@mixin breakpoint($point) {
	@if $point == bp-320 {
		// 360px
		@media (min-width: 20em) { @content; }
	}
	@else if $point == bp-480 {
		// 480px
		@media (min-width: 30em) { @content; }
	}
	@else if $point == bp-600 {
		// 600px
		@media (min-width: 37.5em) { @content; }
	}
	@else if $point == bp-640 {
		// 640px
		@media (min-width: 40em) { @content; }
	}
	@else if $point == bp-768 {
		// 768px
		@media (min-width: 48em) { @content; }
	}
	@else if $point == bp-800 {
		// 800px
		@media (min-width: 50em) { @content; }
	}
	@else if $point == bp-905 {
		// 905px
		@media (min-width: 56.563em) { @content; }
	}
	@else if $point == bp-980 {
		// 980px
		@media (min-width: 61.250em) { @content; }
	}
	@else if $point == bp-1024 {
		// 1024px
		@media (min-width: 64em) { @content; }
	}
	@else if $point == bp-1280 {
		// 1280px
		@media (min-width: 80em) { @content; }
	}
	@else if $point == bp-1680 {
		// 1680px
		@media (min-width: 105em) { @content; }
	}
	@else if $point == bp-1920 {
		// 1920px
		@media (min-width: 120em) { @content; }
	}
	@else if $point == bp-2560 {
	// 2560px
	@media (min-width: 160em) { @content; }
	}
}
@mixin wrapper {
	@include group;
	@extend .col-xs-12 !optional;
	//max-width: 80em;
	text-align: left;
	margin: 0 auto;
}
@mixin group {
	&:before,
	&:after {
	    content: "";
	    display: table;
	}
	&:after {
		clear:both;
	}
	zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
@mixin border-radius($radius) {
	border-radius: $radius;
	-o-border-radius: $radius;
	-ms-border-radius: $radius;
	-moz-border-radius: $radius;
	-webkit-border-radius: $radius;
}
@mixin box-shadow {
	box-shadow: 0 2px 7px rgba(50, 50, 50, 0.75);
	-o-box-shadow: 0 2px 7px rgba(50, 50, 50, 0.75);
	-ms-box-shadow: 0 2px 7px rgba(50, 50, 50, 0.75);
	-moz-box-shadow: 0 2px 7px rgba(50, 50, 50, 0.75);
	-webkit-box-shadow: 0 2px 7px rgba(50, 50, 50, 0.75);
}
@mixin text-shadow ($color) {
	text-shadow: 0 1px 1px $color;
	-o-text-shadow: 0 1px 1px $color;
	-ms-text-shadow: 0 1px 1px $color;
	-moz-text-shadow: 0 1px 1px $color;
	-webkit-text-shadow: 0 1px 1px $color;
}
/* Icon fonts - Entypo */
@mixin entypo ($colour, $fontSize) {
	[data-icon]:before {
	  font-family: 'entypo';
	  content: attr(data-icon);
	  speak:none;
	 }
	 [data-icon] {
		font-size:$fontSize;
		font-style:normal;
		display:inline-block;
		color:$colour;
		line-height:.5em;
	 }
	 -webkit-font-smoothing: antialiased;
	 -moz-osx-font-smoothing: grayscale;
}
@mixin entypo-social ($colour, $fontSize) {
	[data-icon]:before {
	  font-family: 'entypo-social';
	  content: attr(data-icon);
	  speak:none;
	 }
	 [data-icon] {
		 font-size:$fontSize;
		  font-style:normal;
		  display:inline-block;
		  color:$colour;
		  line-height:.5em;
	 }
	 -webkit-font-smoothing: antialiased;
	 -moz-osx-font-smoothing: grayscale;
}
.greyscale img{
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%); /* For Webkit browsers */
	filter: gray; /* For IE 6 - 9 */
	-webkit-transition: all .9s ease; /* Fade to color for Chrome and Safari */
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
}
.greyscale:hover img{
	filter: grayscale(0%);
	-webkit-filter: grayscale(0%);
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}
// center vertically and/or horizontally an absolute positioned element
@mixin center($xy:xy) {
  position: absolute;
  @if $xy == xy {
    left: 50%;
    top: 50%;
    bottom: auto;
    right: auto;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
  }
  @else if $xy == x {
    left: 50%;
    right: auto;
    transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
  }
  @else if $xy == y {
    top: 50%;
    bottom: auto;
    transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
  }
}
// Extend nested div to full-width
// Extend nested elements to full width
.extend-full {
	padding-left: 3000px;
	margin-left: -3000px;
	padding-right: 3000px;
	margin-right: -3000px;
	box-sizing: content-box;
}