//== Media queries breakpoints
//
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.

// Extra small screen / phone
// Note: Deprecated @screen-xs and @screen-phone as of v3.0.1
@screen-xs: 480px;
@screen-xs-min: @screen-xs;
@screen-phone: @screen-xs-min;

// Small screen / tablet
// Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1
@screen-sm: 768px;
@screen-sm-min: @screen-sm;
@screen-tablet: @screen-sm-min;

// Medium screen / desktop
// Note: Deprecated @screen-md and @screen-desktop as of v3.0.1
@screen-md: 992px;
@screen-md-min: @screen-md;
@screen-desktop: @screen-md-min;

// Large screen / wide desktop
// Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1
@screen-lg: 1200px;
@screen-lg-min: @screen-lg;
@screen-lg-desktop: @screen-lg-min;

// So media queries don't overlap when required, provide a maximum
@screen-xs-max: (@screen-sm-min - 1);
@screen-sm-max: (@screen-md-min - 1);
@screen-md-max: (@screen-lg-min - 1);


.border-radius (@radius-top-left: 8px, @radius-top-right: 8px, @radius-bottom-left: 8px, @radius-bottom-right: 8px) {
    -webkit-border-radius: @radius-top-left @radius-top-right @radius-bottom-left @radius-bottom-right;
    -moz-border-radius: @radius-top-left @radius-top-right @radius-bottom-left @radius-bottom-right;
    border-radius: @radius-top-left @radius-top-right @radius-bottom-left @radius-bottom-right;
}

.border-radius (@radius: 8px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}

.box-shadow(@shadow){
    -webkit-box-shadow: @shadow;
    -moz-box-shadow: @shadow;
    box-shadow: @shadow;
}

.gradient (@startColor, @endColor) {
    background-color: @startColor;
    background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
    background: -webkit-linear-gradient(top, @startColor, @endColor);
    background: -moz-linear-gradient(top, @startColor, @endColor);
    background: -ms-linear-gradient(top, @startColor, @endColor);
    background: -o-linear-gradient(top, @startColor, @endColor);
    background: linear-gradient(to bottom, @startColor, @endColor);	
}

/* STYLE BEGIN */

body{
    background: #cacaca url(background-pattern.png) top center fixed;
}

a{
	color: #ff0000;
}

input[type="email"],
input[type="text"],
input[type="password"],
select{
	background: #ffffff;
	border: 1px solid #CACACA;
	color: #000000;
}

button{
	background: #000000;
	color: #FFFFFF;
}

h2{
	border-bottom: 1px solid #E2E2E4;
}

.wrapper{
    background: #FFFFFF;
}

	.line{
		border-top: 1px solid #E2E2E4;						
	}

#header{
    .header-content{
		border-bottom: 1px solid #E1E2E4;	
        .menu{
            ul{
                li{
                    a{
                        color: #000000;
                    }
                }
            }
        }
        .search{
            form{
				.glyphicon{
					color: #aaaaaa;
				}				
            }
        }
        .cart{
            .cart-box{
                background: #ff0000 url(../img/background-pattern.png) center center;
                color: #FFFFFF;
            }
			.arrow{
				border-color: #ff0000 transparent transparent transparent;
			}
        }
		.pop-over{
			.arrow{
				border-color: transparent transparent #F3F3F5 transparent;				
			}
			.content{
				background: #F3F3F5;
				table{
					border-bottom: 1px solid #000000;
					tr{
						th{
							border-bottom: 1px solid #000000;
						}
						&:nth-child(odd){
							td{
								background: #FFFFFF;							
							}
						}							
					}
				}							
			}
                        .close-pop-over{
                            	color: #ff0000;
                        }
		}
    }
}

#main{
	.sidebar{
		border-right: 1px solid #E1E2E4;
		.mobile-category-menu-button{
			color: #ff0000;
		}
		.mobile-filters-menu-button{
			color: #ff0000;
		}				
		.category-menu{
			ul{
				li{
					background: #F3F3F5;
					a{
						color: #676B76; 
						&:hover{
							color: #000000;
						}
					}
					ul{
						background: #F3F3F5;					
						li{		
							background: transparent;
							a{
								background: transparent;
							}						
						}
						li:nth-child(even){
							background: transparent;
						}
					}
				}
				li:nth-child(even){
					background: #E5E4E9;
					ul{
						background: #E5E4E9;					
						li{
							background: transparent;						
							a{
								background: transparent;
							}						
						}
					}
				}
			}
		}		
		.filters{
			ul{
				li{
					background: #F3F3F5;
					a{
						color: #676B76; 
						&:hover{
							color: #000000;
						}
					}
					.title{
						background: #E5E4E9;
					}
					ul{
						background: #F3F3F5;					
						li{		
							background: transparent;
							a{
								background: transparent;
							}						
						}
						li:nth-child(even){
							background: transparent;
						}
					}
				}
			}
		}
		.newsletter{
			background: #999999 url(../img/background-pattern.png) center center;
			color: #FFFFFF;
		}
		.item{
			.price{
				color: #000000;
			}
		}
	}
	.content{
		.slideshow{
			#prev-model,
			#next-model{
				.glyphicon{
					color: #cc0000;
				}
			}
		}
		.slideshow-banner{
			#prev-model,
			#next-model{
				.glyphicon{
					color: #cc0000;
				}
			}
		}		
		.product{
			.price-box{
				background: #ff0000 url(../img/background-pattern.png) center center;
				color: #FFFFFF;
			}
			.features{
				table{
					tr:nth-child(odd){
						background: #F3F3F5;
					}
					tr:nth-child(even){
						background: #E5E5E8;
					}
				}
			}
			.contact-box{
				background: #ff0000 url(../img/background-pattern.png) center center;
				color: #FFFFFF;
			}
		}
	}
	.cart{
		.link{
			background: #E5E5E8;
			.number{
				background: #676A74;
				color: #FFFFFF;
			}
			a{
				color: #676A74;
			}
			.right-arrow{
				border-color: transparent transparent transparent #E5E5E8;		
			}
			.right-arrow-line{
				border-color: transparent transparent transparent #FFFFFF;		
			}				
			&.active{
				background: #ff0000;
				.number{
					background: #FFFFFF;
					color: #717171;
				}
				a{
					color: #FFFFFF;
				}
				.right-arrow{
					border-color: transparent transparent transparent #ff0000;		
				}
				.right-arrow-line{
					border-color: transparent transparent transparent #FFFFFF;		
				}					
			}
		}
		table{
			tr{
				border-top: 1px solid #E2E2E4;
				border-bottom: 1px solid #E2E2E4;			
				th{

				}
				td{
					.price{
						color: #ff0000;
					}
				}
				.product-name{
					a{
						color: #676a74;					
					}
				}
				.recount,
				.delete{
					background: #E5E5E8;
					color: #000000;
				}					
				&.bottom{
					a{
						color: #000000;
					}
				}				
			}
			tr:nth-child(even){
				background: #FFFFFF;
			}			
			tr:nth-child(odd){
				background: #F3F3F5;
			}	
			tr:first-child{
				background: #FFFFFF;
			}
			tr:last-child{
				background: #E5E5E8;
				td{
					border-top: 2px solid #FFFFFF;				
				}
			}
		}
		.mode{
			.cart-row{
				margin-bottom: 10px;
				border-bottom: 1px solid #E2E2E4;			
			}
		}
		button{
			float: right;
		}			
	}	
	.search-form{
		background: #F3F3F5;
		select{
			background: #FFFFFF;
		}
	}	
	.item.search-item{
		.price-box{
			background: #f3f3f5 url(../img/background-pattern.png) center center;
			color: #FFFFFF;
			button{
				background: #ff0000;
			
			&:hover{
				background-color: #cc0000 ;
			}
			}
		}
		button{
			background: #000000;
		}
	}	
	.pager{
		a{
			color: #000000;
			&.active{
				color: #ff0000 ;
			}
			&:hover{
				color: #cc0000 ;
			}			
		}
	}	
	.item{
		a{
			color: #666666;	
			
			&:hover{
				color: #000000;	
				opacity: 0.8;			
			}		
		}
		
		button{
			color: #FFFFFF;
			background: #ff0000;
			&:hover{
				background: #aa0000;
			}			
		}
		.box{
			background: #Fff;
			border-bottom: 1px solid #cacaca;
		}
		.price{
			color: #FF0000;
		}		
	}
	.ribbon{
		background: #ff0000;
		color: #FFFFFF;
		.arrow{
			&.top{
				border-left: 10px solid #ff0000;
			}
			&.bottom{
				border-left: 10px solid #ff0000;
			}
		}			
	}	
}

#footer-content{
	.wrapper{
		border-top: 1px solid #E2E2E4;	
		background: #F7F7F7;
		.title{
			color: #000000;
		}
	}
}

#footer{
	.wrapper{
		background: #000000;
		color: #FFFFFF;		
	}
}


#callModal{
  .modal-body{
	background:#ffffff;
  }
  .modal-footer{
    button{
      color: #000000;
	  background-color:#E5E5E8;	   
    }	
  }
  form.contact{
    textarea, input[type="text"], input[type="password"], select{
      background-color: #FFFFFF;
      border: 1px solid #CDCDD1;
    }
    button{
	  background-color: #ff0000;	
	&:hover{
	background-color: #cc0000;	  }
    }
  }
}

@media(max-width: @screen-xs-max){
	#header{
		.header-content{
			.menu{
				ul{
					li{
						a{
							border-bottom: 1px solid #CACACA;
						}
					}
				}
			}
			.mobile-menu-button{
				color: #ff0000;
			}
		}
	}
}

@media(min-width: @screen-tablet){

}

@media(min-width: @screen-desktop){

}

@media(min-width: @screen-lg-desktop){

}

.modal{
	.modal-content{
		.cart-button{
			background: #ff0000;
		}
	}
	.modal-body{
		background: #F1F1F1;
	}
}

.next{
	background: #ff0000;
}

.arak {
	color: #ff0000;
}

/* STYLE END */


/* PRODUCT SLIDESHOW BEGIN */

#cycle-2 .cycle-slide { border: 1px solid #E0E2E7;}
#cycle-2 .cycle-slide-active { border:1px solid #004; }

/* PRODUCT SLIDESHOW  END*/

/* RADIO BUTTON START */

input[type="radio"] + label {
    color: #000000;
}
input[type="radio"] + label span.radio {
    color: #FFFFFF;
	background-color:#FFFFFF;
	border: 1px solid #CACED4;
}

input[type="radio"]:checked + label span.radio{
    background-color:#ff0000;
    color: #FFFFFF;
	border: 1px solid #ff0000;	
}

/* RADIO BUTTON END */