@import "../../../_theme_variables";

.blog-image {
	margin-bottom:43px;
	position:relative;
	
	&:before{
		content:"";
		background:rgba(0,0,0,.5);
		position:absolute;top:21px;
		left:21px;
		bottom:21px;
		right:21px;
		@include opacity(0);
		@include transition(all 0.6s ease);	
		z-index:1;	
		}
		&:hover{			
			&:before{
			@include opacity(1);				
			}
			a{
			img{@include scale(1.2);
			 perspective:1;				
			}			
				&:before
		        {
				right: 10px;
				width:95%;
	@media (max-width: $screen-md-max) { //  max 1199px
				width:93%;	
	}	
					
	 @media (max-width: $screen-sm-max) { //  max 991px
			width:91%;		
	}		
		
        @media (max-width: $screen-xs-max) { // max 767px	
width:94%;	
        }			
					
					}
			 &:after{
				 
				 bottom:10px;
				height:89%;
				
					
	@media (max-width: $screen-md-max) { //  max 1199px
				height:85%;		
	}
	  @media (max-width: $screen-sm-max) { //  max 991px
				height:81%;			
	}	
				
				 }

			}			
			}
	
	a {
		display:block;
		@include blog-image;		
		position:relative;
		overflow:hidden;
		&:hover{
			color:$color1
			
			}
		
		
		&:before,
		&:after{			
				 border-bottom: 1px solid #fff;
				border-top: 1px solid #fff;	
				content: "";			
				position: absolute;
				@include  scale(1);
				-webkit-transform-origin: 0 0;
				-moz-transform-origin: 0 0;
				transform-origin: 0 0;
				z-index: 1;
				@include opacity(1);	
				@include transition(all 0.4s ease);
		
				
			}
		&:before{
			   bottom: 20px;		
				right: auto;
				width:0;
				top: 20px;
				left:10px;	
			}
		&:after{	
		border:none;		
		 border-left: 1px solid #fff;
		border-right: 1px solid #fff;	
	            bottom: auto;
				height:0;				
	            top: 10px;
				left:20px;
				right: 20px;
		}		
		
		img {
			@include transition(all 1s ease);
             @include scale(1);
			 @include  opacity(1);			
			@media only screen and (max-width:$screen-xs-max) {
				width:100%;	
			}
		}
	}
}

#homepage-blog {
	z-index:1;
	padding:84px 0 97px;
	margin:0;
	
     @media (max-width: $screen-xs-max) { // max 767px	
	    padding:50px 0;
      }
	
	li{visibility:hidden;position:relative}
		
	.title_block {
		color:#fff;
		padding-bottom:65px;
		margin-bottom:58px;
		border-bottom:1px solid #fff;
		font-family:$font-custom;
		visibility:hidden;	
		padding-right:0;	
		

        @media (max-width: $screen-xs-max) { // max 767px	
           font-size:23px;
		   padding-bottom:30px;
		    margin-bottom:30px;
        }
				
			
		a{color:#fff;
		   &:hover{color:$color1}
		
		}
		
		text-align:center;			
		&:after {
			display:none;	
		}
	}
	
	h5{margin:0 0 8px;}
	
   .date-added{display:none}
	.product-name{
		font-size:18px;
		line-height:1em;
	   color:#fff;	
	   	   font-family:$font-custom;
	  &:hover{color:$color1}	
	}
	
	.post-descr{color:#fff;font-size:16px;line-height:24px;margin-bottom:36px;	   font-family:$font-custom;}	
	
	a.btn{
		padding:0 0 0 35px;
		position:relative;
		text-transform:uppercase;
		color:#fff;
		font-size:22px;
		line-height:26px;	
      font-family:$font-custom;
		@include transition(all 0.3s ease);

		&:before{
			color:#fff;
			display:block;
			position:absolute;
			top:-1px;left:0;
			font-size:26px;
			line-height:1em;
			content: "";
			font-family:$font-icon;
			@include transition(all 0.3s ease);

			}	
			
			&:hover{
           color:$color1;
			  &:before{
			 	-webkit-animation: spinAroundX 1.5s linear infinite;
				-moz-animation: spinAroundX 1.5s linear infinite;
				animation: spinAroundX 1.5s linear infinite;
						
				}			
				
			}		
			
		}
	
	
	li {
		margin-bottom:30px;
		@media (min-width: $screen-md) { // min 991px
			&.first-in-line {
				clear: left;
			}
		}
		@media only screen and (min-width:$screen-xs) and (max-width:$screen-xs-max) {
			width:50%;
			float:left;	
		}
		@media (min-width: $screen-sm) and (max-width: $screen-sm-max) { // min 480px max 991px
			&.first-item-of-tablet-line {
				clear: left;
			}
		}
		@media only screen and (max-width: $screen-xs-max) { 
			&.first-item-of-mobile-line {
				clear: left;
			}
		}
	}
}


@-webkit-keyframes spinAroundX {
	from {
		-webkit-transform: rotateX(0deg)
	}
	to {
		-webkit-transform: rotateX(360deg);
	}
}
@-moz-keyframes spinAroundX {
	from {
		-moz-transform: rotateX(0deg)
	}
	to {
		-moz-transform: rotateX(360deg);
	}
}
@keyframes spinAroundX {
	from {
		transform: rotateX(0deg)
	}
	to {
		transform: rotateX(360deg);
	}
}