/*******************************************************
  Style Color
********************************************************/
@import 'bourbon/bourbon';

// Bootstrap mixins
.no-margin{margin: 0 !important;}
@mixin linkColor($color1,$color2){
	color: $color1;text-decoration: none;
	&:hover{color: $color2;}
}
@mixin link(){
	color: $linkColor;text-decoration: none;
	&:hover{color: lighten($linkColor, 10%);}
}
@mixin linkGrayDark(){
	color: $gray-dark;
	&:hover{color: $linkColor;}
}

@mixin linkGray(){
	color: #666 ;
	&:hover{color: $linkColor;}
}
@mixin linkGraylighter(){
	color: #999 ;
	&:hover{color: $linkColor;}
}
@mixin buttonGray(){
	padding: 7px 12px; background: $gray;color: #fff;  text-transform: capitalize; border-radius: 0; border-color: $gray;
	&:hover{background: $background1; border-color: $linkColor;color: #fff; }
}

@mixin buttonColor(){
	@include buttonGray();
	background: $background; border-color: $background;
	&:hover{background: $gray;border-color: $gray;}
}


@mixin clearfix() {
  &:before,
  &:after {
    content: " "; // 1
    display: table; // 2
  }
  &:after {
    clear: both;
  }
}

/* @group Banners hover effect */
.banners-effect-1 .banners > div {
	img { @include transition(all 0.2s ease-in);
		&:hover{opacity: 0.8;}
	}
	
}

.banners-effect-2 .banners > div a{display: block;position: relative;overflow: hidden;
	&:hover{
		&:before,&:after{left: 0;opacity: 1;}
	}	
	&:before,&:after{
		background-color: rgba(255, 255, 255, 0.4);
		display: block;
		width: 100%;
		height: 100%;
		left: -100%;
		opacity: 0;
		filter: alpha(opacity=0);
		position: absolute;
		top: 0;
		@include transition(all 0.3s ease-in);
		content: "";
		z-index: 1;
	}
	
}

.banners-effect-3 .banners > div a {display: block;position: relative;overflow: hidden;
	&:hover{
		&:before,&:after{border: 0 solid rgba(0, 0, 0, 0.7);opacity: 0;filter: alpha(opacity=0);}
	}	
	&:before,&:after{
		border: 50px solid transparent;
		border-top-right-radius: 50px;
		border-top-left-radius: 50px;
		border-bottom-right-radius: 50px;
		border-bottom-left-radius: 50px;
		box-sizing: border-box;
		cursor: pointer;
		display: inline-block;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		position: absolute;
		top: 0;
		content: "";
		opacity: 1;
		filter: alpha(opacity=100);
		width: 100px;
		height: 100px;
		@include transform(scale(7));
		@include transition(all 0.4s ease-in-out);
		
		visibility: visible;
		z-index: 1;
	}
}

.banners-effect-4 .banners > div a {display: block;position: relative;overflow: hidden;
	&:hover{
		&:before,&:after{
			opacity: 1;
			
			@include transform(rotate3d(0, 0, 1, 45deg) scale3d(1, 4, 1));
		}
	}	
	&:before,&:after{
		 border-bottom: 50px solid rgba(0, 0, 0, 0.2);
		border-top: 50px solid rgba(0, 0, 0, 0.2);
		content: "";
		height: 100%;
		left: 0;
		opacity: 0;
		filter: alpha(opacity=0);
		position: absolute;
		top: 0;
		
		transform-origin: 50% 50% 0;
		width: 100%;
		@include transform(rotate3d(0, 0, 1, 45deg) scale3d(1, 0, 1));
		@include transition(opacity 0.4s ease 0s, transform 0.35s ease 0s);
		
		visibility: visible;
		z-index: 1;
	}
}

.banners-effect-5 .banners > div a {display: block;position: relative;overflow: hidden;
	&:hover{
		&:before,&:after{
			opacity: 0;
               filter: alpha(opacity=0);
               border: 0 double rgba(255, 255, 255, 0.7);
               visibility: hidden;
		}
	}	
	&:before,&:after{
		 bottom: 0;
		content: "";
		left: 0;
		position: absolute;
		right: 0;
		top: 0;
		
		z-index: 1;
		border: 200px double transparent;
		opacity: 1;
		filter: alpha(opacity=100);
		visibility: visible;
		
		@include transition(all 0.4s cubic-bezier(0.94, 0.85, 0.1, 0.62) 0s);
		
		
	}
}


.banners-effect-6 .banners > div a {
     display: inline-block;
	vertical-align: top;
     position: relative;
     overflow: hidden;
     background: #000;
}

    
     .banners-effect-6 .banners > div a img {
          backface-visibility: hidden;
          opacity: 1;
          filter: alpha(opacity=100);
          -webkit-transition: opacity 1s ease 0s, transform 1s ease 0s;
          -o-transition: opacity 1s ease 0s, transform 1s ease 0s;
          transition: opacity 1s ease 0s, transform 1s ease 0s;
     }
     
          
          .banners-effect-6 .banners > div a:hover img {
               opacity: 0.8;
               filter: alpha(opacity=80);
               transform: scale3d(1.1, 1.1, 1);
          }
          

.banners-effect-7 .banners > div a {
     display: block;
     position: relative;
     overflow: hidden;
}

     
     .banners-effect-7 .banners > div a:before {
          position: absolute;
          background: rgba(0, 0, 0, 0.3);
          width: 0;
          top: 0;
          left: 50%;
          content: "";
          transition: all 0.3s ease-in-out 0s;
     }
     
          
          .banners-effect-7 .banners > div a:hover:before {
               width: 100%;
               left: 0;
               top: 0;
               height: 100%;
          }
          

.banners-effect-8 .banners > div a {
     display: inline-block;
     position: relative;
     overflow: hidden;
     background: #000;
	vertical-align: top;
}
     
     .banners-effect-8 .banners > div a:before,
     .banners-effect-8 .banners > div a:after {
          bottom: 20px;
          content: "";
          left: 20px;
          opacity: 0;
          position: absolute;
          right: 20px;
          top: 20px;
          -webkit-transition: opacity 0.35s ease 0s, transform 0.35s ease 0s;
          -o-transition: opacity 0.35s ease 0s, transform 0.35s ease 0s;
          transition: opacity 0.35s ease 0s, transform 0.35s ease 0s;
          z-index: 1;
     }
     
          .banners-effect-8 .banners > div a:before {
               border-bottom: 1px solid #ffffff;
               border-top: 1px solid #ffffff;
               -webkit-transform: scale(0, 1);
               -ms-transform: scale(0, 1);
               -o-transform: scale(0, 1);
               transform: scale(0, 1);
          }
          
          .banners-effect-8 .banners > div a:after {
               border-left: 1px solid #ffffff;
               border-right: 1px solid #ffffff;
               -webkit-transform: scale(1, 0);
               -ms-transform: scale(1, 0);
               -o-transform: scale(1, 0);
               transform: scale(1, 0);
          }
     
          .banners-effect-8 .banners > div img {
               opacity: 1;
               filter: alpha(opacity=100);
               -webkit-transition: opacity 0.35s ease 0s;
               -o-transition: opacity 0.35s ease 0s;
               transition: opacity 0.35s ease 0s;
          }
          
               .banners-effect-8 .banners > div a:hover:before,
               .banners-effect-8 .banners > div a:hover:after {
                    opacity: 1;
                    filter: alpha(opacity=100);
                    -webkit-transform: scale(1);
                    -ms-transform: scale(1);
                    -o-transform: scale(1);
                    transform: scale(1);
               }
               
               .banners-effect-8 .banners > div a:hover img {
                    opacity: 0.5;
                    filter: alpha(opacity=50);
               }


.banners-effect-9 .banners > div a {
     display: block;
     position: relative;
     z-index: 10;
}
     

     .banners-effect-9 .banners > div a:before {
     	position: absolute;
     	top: 0;
     	left: 0;
     	z-index: 0;
     	width: 100%;
     	height: 100%;
     	background: #000;
     	content: '';
     	-webkit-transition: opacity 0.35s;
     	transition: opacity 0.35s;
     	box-shadow: 0 3px 30px rgba(0,0,0,0.2);
     	opacity: 0;
     }
     
          .banners-effect-9 .banners > div a:hover:before {
               opacity: 1;
          }

     .banners-effect-9 .banners > div a img {
          opacity: 1;
          -webkit-transition: -webkit-transform 0.35s;
          transition: transform 0.35s;
          -webkit-transform: perspective(1000px) translate3d(0,0,0);
          transform: perspective(1000px) translate3d(0,0,0);
     }
     
          .banners-effect-9 .banners > div a:hover img {
               -webkit-transform: perspective(1000px) translate3d(0,0,21px);
               transform: perspective(1000px) translate3d(0,0,21px);
          }
          
.banners-effect-10 .banners > div a {
     display: block;
     position: relative;
     overflow: hidden;
}
     
     .banners-effect-10 .banners > div a:before {
     	position: absolute;
     	top: 0;
     	left: 0;
     	width: 100%;
     	height: 100%;
     	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 75%);
     	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 75%);
     	content: '';
     	opacity: 0;
     	-webkit-transform: translate3d(0,50%,0);
     	transform: translate3d(0,50%,0);
     	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
     	transition: opacity 0.35s, transform 0.35s;
     }
     
          .banners-effect-10 .banners > div a:hover:before {
               opacity: 1;
               -webkit-transform: translate3d(0,0,0);
               transform: translate3d(0,0,0);
          }


.banners-effect-11 .banners > div a {display: block;position: relative;overflow: hidden;
	&:hover{
		&:before,&:after{
			width:100%;height: 100%;
		}
	}
	
	&:before,&:after{
		 background-color: rgba(0, 0, 0, 0.15);
		content: "";
		height: 0;
		left: 0;
		margin: auto;
		position: absolute;
		
		width: 0;
		@include transition(all 0.3s ease-out 0s);
	}
	&:after{left: auto;right: 0; bottom: 0;}
}

.banners-effect-12 .banners > div {
	img { @include transition(all 0.3s ease-in);
		&:hover{@include filter(grayscale(100%));}
	}
	
}
/* @end */