/*
 * Mixins
 */	

@mixin font-for-header($font-weight:300) {
font-family: 'Open Sans', sans-serif;font-weight:700;font-style: normal;
}

@mixin font-for-body($font-weight:300) {
font-family: 'Open Sans', sans-serif;font-weight:300;font-style: normal;
}

@mixin animate-element($duration:0.3s){
	transition: all $duration;
}

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


@mixin has-shadow($opacity:0.25,$size:1em){
	box-shadow: 0 0 $size rgba(0,0,0,$opacity);
}


@mixin text-shadow($opacity:0.25,$size:1em){
	text-shadow: 0.25rem 0.25rem $size rgba(0,0,0,$opacity);
}

@mixin radial-gradient(){
	
   background: rgb(255,255,255);
   background: radial-gradient(circle, rgba($light-gray,0.85) 0%, rgba($light-gray,0) 100%); 
   
}

@mixin linear-gradient(){
	
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.9+0,0+100 */
	background: -moz-linear-gradient(top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(0,0,0,0.9) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}

@mixin link-image(){
	background: url(/images/list.png) no-repeat 0 50%;
	background-size:0.875rem auto;
	padding-left:1.5rem;
	font-weight:700;
	@include animate-element(0.3s);
	
	
	&:hover{background-position:0.375rem 50%;}
	
}


@keyframes zoomImage{
	0%{
		transform:scale(1);
	}
	50%{
		transform:scale(1.1);
	}
	100%{
		transform:scale(1);
	}
}


@mixin button-white(){
	color:$white;
	border-color:$white;
	//text-shadow: 0 0 0.375rem rgba($black,1);
	
	&:hover{
		background:rgba($white,0.75);
		color:$black;		
	}
	
}

@mixin d($color:red){
	border:solid 1px $color;
}

@mixin dots($color:red){
	
	/*border-style: dotted;
	border-color: $color;
	border-image-source: url(../images/dots.svg);
	border-image-slice: 29% 29%; 
	border-image-repeat: round;
	border-width: 0 0 8px 0;*/

	border-style: dotted;
	border-color:$color;
	border-image-source: url(../images/dots2.svg);
	border-image-slice: 33% 33%;
	border-image-repeat: round;
	border-width: 0.375rem;

}


@mixin blue-pointer-icon(){
	content:"";
	position:absolute;
	left:0;
	top:50%;
	transform:translateY(-50%);
	width:1.5rem;
	height:1.5rem;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 36'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:%23ea5b0c;%7D.b%7Bfill:%23f7941d;%7D.c%7Bfill:%23e30613;%7D%3C/style%3E%3C/defs%3E%3Cpath class='a' d='M4.53,0a4.42,4.42,0,0,0-3.2,1.39,4.94,4.94,0,0,0,0,6.74L10.72,18l3.2-3.37a4.38,4.38,0,0,1,6.4,0L7.73,1.39A4.44,4.44,0,0,0,4.53,0'/%3E%3Cpath class='b' d='M10.72,18,1.33,27.87a4.94,4.94,0,0,0,0,6.74,4.38,4.38,0,0,0,6.4,0L20.32,21.37a4.38,4.38,0,0,1-6.4,0Z'/%3E%3Cpath class='c' d='M17.12,13.24a4.42,4.42,0,0,0-3.2,1.39L10.72,18l3.2,3.37a4.38,4.38,0,0,0,6.4,0,4.93,4.93,0,0,0,0-6.74,4.42,4.42,0,0,0-3.2-1.39'/%3E%3C/svg%3E") no-repeat 0 50%;
}