@mixin cf{
	/* For modern browsers */
	&:before,&:after {
		content:"";
		display:table;
	}
	&:after {
	clear:both;
	}
	/* For IE 6/7 (trigger hasLayout) */
	*zoom:1;
}
/*================ FUNCTIONS =================*/
@function black($opacity){
	@return rgba(0,0,0,$opacity);
}
@function white($opacity){
	@return rgba(255,255,255,$opacity);
}
@function red($opacity){
	@return rgba($red,$opacity);
}
/*================ CLASSES =================*/
.popover{
	background:white;
	border:1px solid $red;
	@include border-radius(3px);
	@include box-shadow(0px 1px 2px 0px black(0.25));
	z-index:100;
	@include transition(all, 300ms);
}
.grid-block{
	background:#fff;
	@include border-radius(3px);
	// border:1px solid $light-blue;
	padding:$grid-padding;
	margin-bottom:$grid-margin;
	@include box-shadow(0 1px 1px black(0.15));
}
.cf{
	@include cf;
}
/*================ MIXINS =================*/
@mixin border-box{
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}
@mixin nav-ul {
	list-style-type:none;
	padding:0;
	margin:0;
	@include cf;
	& li{
		display:block;
		float:left;
		&:last-child{
			margin-right:0px;
		}
	}
}
@mixin hide-text{
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
@mixin hide-text2{
	font: 0/0 a;
	text-shadow: none;
	color: transparent;
}
@mixin letterpress($opacity){
	text-shadow:white($opacity) 0 1px 0;
}
@mixin box-emboss($opacity, $opacity2){
	box-shadow:white($opacity) 0 1px 0, inset black($opacity2) 0 1px 0;
}

@mixin breakpoint($point) {
  @if $point == wide {
    @media (max-width: 9999px) { @content; }
  }
  @if $point == large {
    @media (max-width: 1200px) { @content; }
  }
  @if $point == tablet {
    @media (max-width: 800px) { @content; }
  }
  @else if $point == phone {
    @media (max-width: 320px)  { @content; }
  }
}