@red: #db231b;
@darkblue: #291670;
@lightblack: #8c8c8c;
@green: #83aa30;
@red1: #e74700;
@white: #ffffff;
@darkgray: #808080;
@gray: #969696;
@lightgray: #f3f3f3;

/*Media points*/
@mobile320: ~"(max-width: 320px)"; 
@mobile480: ~"(min-width: 321px) and (max-width: 480px)";
@mobile640: ~"(min-width: 481px) and (max-width: 640px)";
@screen768: ~"(min-width: 641px) and (max-width: 768px)";
@screen1024: ~"(min-width: 769px) and (max-width: 1024px)"; 
/**/

/*loader*/
.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url(../img/ring.gif) center no-repeat #fff;
}


/*fonts*/
@font-face {
  font-family: 'MyWebFont';
  src: url('../fonts/MyriadPro-Regular.woff') format('woff'), /* Pretty Modern Browsers */
       url('../fonts/MyriadPro-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/MyriadPro-Regular.otf');
}
@font-face {
  font-family: 'MyWebFontThin';
  src: url('../fonts/myriad-set-pro_thin.ttf'); /* IE9 Compat Modes */
}

body{
	color:#777;
	font-family: 'MyWebFont';
}

/*mixins*/
.transition{
	transition:all 0.2s ease;
	-webkit-transition:all 0.2s ease;
	-o-transition:all 0.2s ease;
	-moz-transition:all 0.2s ease;
}
.pad-it{
	padding: 100px 0;
}
.no-margin{
	margin:0;
}
.adjust-height{
	height: 363px;
}
.blue{
	color: @red;
}
.title{
	.no-margin;
	margin-bottom: 30px;
}
hr{margin-bottom: 10px;}
a:hover{
	text-decoration: none;
}
.owl-item,
.inner-owl-block{
	cursor: default !important;	
}
/**/
.img-thumbnail{
	padding: 10px;
}
.scroll-to-top{
	position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 45px;
    color: @white;
    background-color: @red;
    font-size: 40px;
    //border:1px solid @red;
    z-index: 999;
    display: none;
    box-shadow: 0 8px 8px -6px #404040;
    border-radius: 100%;
    &:hover,
    &:focus{
    	box-shadow: 0 8px 8px -3px #404040;
    	color:@white;
    }

}

.top-block{
	padding:5px 0;
	background-color: @red; 
	.inner-top-block{
		color:@white;
		@media @mobile320{
			text-align: right;
		}
		@media @mobile480{
			text-align: right;
		}
		@media @mobile640{
			text-align: right;
		}
		ul{
			margin:0;
			padding:0;
			list-style:none;
			li{
				color: @white;
				display:inline;
				margin-right: 16px;
				i{
					margin-right:5px;
				}
			}
		}
	}
}

.navbar-default{
	border-color:@white;
}
.sticky{
	position: fixed;
	width: 100%;
	z-index: 1000;
	border-bottom:2px solid @red;
	top:0;
	//height: 80px;
}
.sticky .navbar-brand img{
	width: 80% !important;
	margin-top: 10px !important;
}
.sticky .navbar-nav{
	margin-top: 17px !important;
}
.sticky .navbar-nav>li>a{
	//padding-top: 10px !important;
	//padding-bottom: 10px !important;
}
.gif-img-block{
	width: 600px;
	height: 80px;
	border:1px solid red;
		@media @mobile320{
			display: none;
		}
		@media @mobile480{
			display: none;
		}
		@media @mobile640{
			display: none;
		}
		@media @screen768{
			display: none;
		}
		@media @screen1024{
			width: 400px;
		}
}

.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus{
	background-color: @white;
}
.navbar-default .navbar-toggle{
	border-color: @red;
}
.navbar-toggle{
	margin-top:30px;
	margin-right: 0; 
}
.navbar-default .navbar-toggle .icon-bar{
	background-color: @red;
}

.navbar-header{
	width: 150px;
	margin-right: 20px;
		@media @mobile320{
			width: 100%;
		}
		@media @mobile480{
			width: 100%;
		}
		@media @mobile640{
			width: 100%;
		}
}
.navbar{
	min-height:auto;
	margin-bottom:0;
	//border-bottom:2px solid @white;
	border-radius:0;
	background-color: @white;
	.transition;
	.navbar-brand{
		height:auto;
		min-height:110px;
		width:100%;
		@media @mobile320{
    		width: 30%;
		}
		@media @mobile480{
	    	width: 30%;
		}
		@media @mobile640{
	    	width: 30%;
		}	
		img{
			margin-top: 10px;
			width: 100%;
			.transition;
			@media @mobile320{
    			margin-top: 0;
			}
			@media @mobile480{
		    	margin-top: 0;
			}
			@media @mobile640{
		    	margin-top: 0;
			}	
		}
	}
	.navbar-nav{
		margin-top: 32px;
		@media @mobile320{
    		margin-top: 0;
		}
		@media @mobile480{
	    	margin-top: 0;
		}
		@media @mobile640{
	    	margin-top: 0;
		}	
		li{
			a{
				margin: 0 3px;
				.transition;
			}
		}
	}
}

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus{
	color: @red;
    background-color: transparent;
    border-radius:0px;
    border-bottom: 5px solid @red;
    @media @mobile320{
    	border-bottom: 0px;
	}
	@media @mobile480{
    	border-bottom: 0px;
	}
	@media @mobile640{
    	border-bottom: 0px;
	}	
}
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.open>a:focus{
	background-color:transparent;
}
.navbar-nav>li>.dropdown-menu{
	top:120%;
	margin: 2px -56px 0;
	animation-name: menuOpen;
    animation-duration: 0.2s;
    border: 1px solid @red;
    background-color: @white;
    @media @mobile320{
    	margin: 0;
	}
	@media @mobile480{
    	margin: 0;
	}
	@media @mobile640{
    	margin: 0;
	}
    li{
    	a{
    		&:hover{
    			color: @red;
    			background-color: @lightgray;
    		}
    	}
    }	
}
@keyframes menuOpen{
	from{top:170%; opacity:0;}
	to{top:120%; opacity:1;}
}
.dropdown-menu-xs{
	margin: 0;
}
/**/
.carousel-control{
	color: @red;
    text-shadow: none;
    filter: alpha(opacity=100);
    opacity: 1;
	&:hover,
	&:focus
	{
		color: @red;
	}
}
.carousel-control.left,
.carousel-control.right
{
	background-image: none;
}
.carousel-indicators li{
	background-color: rgba(0,0,0,0);
    border: 1px solid #fff;
}
/**/
#profile{
	background-color: @lightgray;
	.pad-it;
}
.box{
	.inner-box{
	background-color: @white;
	padding: 50px;
	box-shadow: 0px 6px 10px -6px #000;
		.icon-block{
			i{
				color: @red;
				font-size: 40px;
			}
		}
		h2{
			
		}
		p{
			
		}
	}
}

/**/
#products{
	.pad-it;
	h1{
		.title;
		text-align: center;
		span{
			font-size: 24px;
			padding-bottom: 3px;
			border-bottom: 5px solid @red;
		}
	}

	.owl-carousel{
		div.inner-owl-block{
			padding: 10px;
			border: 1px solid @gray;
			margin: 0px 5px;
			&:hover{
				.transition;
				border: 1px solid @red;
				cursor:pointer;
			}
			img{
				width: 80%;
				margin: 0 auto;
			}
			div.product-name-text{
					width: 100%;
					padding: 8px 0;
					margin-top: 15px;
					border-top: 1px solid @red;
				p{
					text-align: center;
					.no-margin;	
				}
			}	
		}
	}
}

/*parallax*/
#parallax{
	width: 100%;
	background-image: url('../img/3.jpg');
	background-size: cover;
	background-attachment: fixed;
	.overlay{
		width: 100%;
		overflow: hidden;
		height: 100%;
		background: rgba(25,25,25,0.5);
		padding: 50px 0;
		color:@white;
	}
}

/*ack*/
#ack{
	padding: 30px 0;
	background-color: @lightgray;
	h1{
		.title;
		text-align: center;
		span{
			font-size: 24px;
			padding-bottom: 3px;
			border-bottom: 5px solid @red;
		}
	}
	.inner-ack{
		padding: 20px;
		background-color: @white;
		text-align: center;
		box-shadow: 0px 6px 10px -6px #000;
	}
}


/*footer*/
footer{
	padding-top:80px;
	padding-bottom:10px;
	background: @lightblack;
	.container{
		.row{
			.inner-footer-block{
				h2{
					margin:0;
					margin-bottom: 30px;
					span{
						color: @white;	
						font-size: 22px;
						border-bottom:5px solid @red;
						padding-bottom: 7px;
					}
				}
				p{
					color: @white;
					.no-margin;
					a{
						color: @white;
						.transition;
						&:hover{
							color: @red;
						}
					}
				}
				address{
					color:@white;
					strong{
						font-size: 18px;
					}
				}
				ul{
					list-style: none;
					margin:0;
					padding:0;
					li{
						//padding: 8px 0;
						//border-top: 1px dotted @lightgray;
						//border-bottom: 1px dotted @lightgray;
						a{
							color: @white;

							.transition;
							&:hover{
								text-decoration: none;
								color: @red;
							}
							i{
								margin-right: 20px;
							}
						}
					}
				}
			}
			.copyright-block{
				p{
					margin:0;
					color: @white;
					span{
						color: @red;
					}
				}
			}	
			.company-block{
				p{
					margin:0;
					color: @white;
					span{
						color: @red;
					}
				}
			}
		}
	}
}


/**/
#menu-block{
	background-image: url('../img/bg.jpg');
	background-size: cover;
	width: 100%;
	height: auto;
	padding: 50px 0;
	.menu-box{
		width: 100%;
		height: 400px;
		text-align: center;
		cursor: pointer;
		position: relative;
		    box-shadow: 2px 2px 10px #000;
			    border: 3px solid #fff;
    border-radius: 3px;
		.transition;
		.overlay{
			width: 100%;
			overflow: hidden;
			height: 100%;
			background: rgba(25,25,25,0.5);
			display: none;
			.menu-box-text{
				position: relative;
				color: @white;
				//animation-play-state: paused; 
			}
		}
		.menu-box-text-js{
			position: absolute;
			top:40%;
			left:50%;
			color: @white;
			h3{
				position: relative;
				left:-50%;
			}
		}
	}
}
/* .menu-box:hover .menu-box-text{
	 animation-play-state: running;
} */
#menu-box-1{
	background-image: url('../img/slider-2.jpg');
	background-size: cover;	
}
#menu-box-2{
	background-image: url('../img/slider-3.jpg');
	background-size: cover;	
}
#menu-box-3{
	background-image: url('../img/slider-1.jpg');
	background-size: cover;	
}
#menu-box-4{
	background-image: url('../img/banner2.jpg');
	background-size: cover;	
}
.animateMoveDown{
	animation-name: moveDown;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	//animation-iteration-count: infinite;
}
@keyframes moveDown {
    0%   {top: 0px;}
    100% {top: 140px;}
}
/*--------------------------------------About-----------------------------*/
#about{
	padding: 100px 0;
	h1{
		.title;
		text-align: center;
		span{
			font-size: 24px;
			padding-bottom: 3px;
			border-bottom: 5px solid @red;
		}
	}		
}
#mgnt{
	padding: 100px 0;
	background-color: @lightgray;
	h1{
		.title;
		text-align: center;
		span{
			font-size: 24px;
			padding-bottom: 3px;
			border-bottom: 5px solid @red;
		}
	}
	.inner-mgnt{
		background-color: @white;
		padding: 20px 0;
		text-align: center;
		    box-shadow: 0px 6px 10px -6px #000;
		.img-block{
			border:1px solid @gray;
			width: 150px;
			margin:0px auto;
			height: 150px;	
			border-radius: 100%;
			span{
				font-size: 100px;
			    margin-top: 15px;
			    color: #eee;
			}
		}	
		h3{
			margin-top: 10px;
			margin-bottom:0;
			font-size: 20px;
			color: @red;
		}
		p{

			margin:0;	
		}	
	}
}
/*---------------------------------------Conact---------------------------*/
#contact{
	padding: 100px 0;
	h1{
		.title;
		text-align: center;
		span{
			font-size: 24px;
			padding-bottom: 3px;
			border-bottom: 5px solid @red;
		}
	}
	.form-block{
		border-right: 1px solid @lightgray;
		.btncustom{
			background-color: @red;
			border:1px solid @red;
			border-radius: 0;
			color:@white;
			   .transition; 
			&:hover{
			/*background-color: @white;
			border:1px solid @red;
			color:@red;*/
			    box-shadow: 0px 6px 10px -6px #000;
				.transition;
			}
		}
	}
	.inner-contact{
		h4{
			margin-top: 0;
			margin-bottom: 5px;
		}
		p{

		}
		a{
			color: @red;
		}
	}		
}
.form-control-custom{
	width: 70%;
}
.map-block{
	margin-top: 50px;
}
/*---------------------------------------product--------------------------*/
.main-container{
	padding-bottom: 80px;
}

.custom-hr{
	margin:10px 0;
}
/*side Menu*/
.side-menu{
	@media @mobile320{
		display: none;
	}
	@media @mobile480{
		display: none;
	}
	@media @mobile640{
		display: none;
	}
	h2{
		font-size: 20px;
		background-color: @red;
		padding: 8px 0 8px 15px;
		color: @white;
		margin: 0;
		margin-bottom: 15px;
		box-shadow: 0px 3px 5px #404040;
	}
}

.panel-group{
	margin-bottom: 0;
}
.panel {
    margin-bottom: 20px;
    background-color: @white;
    border: 1px solid transparent;
    border-radius: 0px;
    -webkit-box-shadow: 0 0px 0px rgba(0,0,0,.05);
    box-shadow: 0 0px 0px rgba(0,0,0,.05);
}
.panel-group .panel{
	border-radius: 0px;
}
.panel-default>.panel-heading{
	color: @white;
    background-color: @red;
    border-bottom:1px solid @red;
}
.panel-heading{
	padding: 5px 15px;
	box-shadow: 0px 3px 5px #404040;
}
.panel-heading a{
	color:@white;
	&:focus,
	&:hover{
		color :@white;
		text-decoration: none;
	}
}
.panel-title{
	font-size: 14px;
	&:focus{
		text-decoration: none;
	}
}
.panel-title i{
	color:@white;
}
.panel-body{
	    background-color: rgb(243, 243, 243);
    box-shadow: 0px 3px 10px #404040;
	ul{
		list-style: none;
		margin: 0;
		padding: 0;
		li{
			a{
				color:@gray;
				&:hover{
					color:@red;
					text-decoration: none;
				}
				&:focus{
					text-decoration: none;
				}
			}
		}
	}
}
/*ends*/
.right-container{
	h2{
		font-size: 20px;
	}
}
#breadcrumbs{
	//border-top: 1px solid @red;
}
.breadcrumb{
	background-color: @lightgray;
	padding: 8px 15px;
	margin: 20px 0 25px 0;
    list-style: none;
    //background-color: @white;
    border-radius: 0px;
    //border-bottom: 1px solid @gray;
    li{
    	color:@white;
    	a{
			color:#777;
			cursor:default !important;
			&:hover{
				text-decoration: none;
			}
    	}
    }
    li.active{
    	color: @red;
    }
}
.inner-product{
	border:1px solid #ddd;
	padding: 10px;
	margin-bottom: 20px;
	box-shadow: 0 8px 8px -6px #404040;
	.transition;
	&:hover{
		box-shadow: 0 8px 22px -6px #404040;
	    .transition;
	}
	.img-block-product{
		width: 60%;
		margin:0px auto;
		position: relative;
		img{
			.transition;
		}
	}
	p{

	}
	.detail-btn{
		background-color: @red;
		color:@white;
		border:1px solid @red;
		border-radius: 0;
		text-transform: capitalize;
		.transition;
		@media @mobile320{
			width: 100%;
		}
		@media @mobile480{
			width: 100%;

		}
		@media @mobile640{
			width: 100%;
		}
		&:hover{
			/* background-color: @white;
			border:1px solid @red;
			color: @red; */
			box-shadow: 0px 10px 22px -6px #404040;
			.transition;
		}
		&:focus{
			outline: none;
		}
	} 
}
.img-block-product:hover img{
	-moz-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}


/*Product detail*/
.product-descp{
	margin: 0;
	padding: 0;
	list-style-type: none;
	width: 70%;
	li{
		padding: 2px 0 2px 5px;
		border-bottom: 1px solid @lightgray;
		&:nth-child(even){
			background-color: @lightgray;
		}
		span.push-it{
			font-weight: 600;
			font-size: 16px;
			width: 300px;
			display: inline-block;
		}
	}
}


/*scroll bar*/
body::-webkit-scrollbar {
    width: 9px;
        //background-color: rgba(219, 35, 27, 0.16);
		background-color: rgb(255, 255, 255);
        margin:10px 0px;
        border-radius:7px;
}
 
body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(255,255,255,0.3);
}
 
body::-webkit-scrollbar-thumb {
  background-color:  rgba(219, 35, 27, 0.71);
  outline: 1px solid slategrey;
  border-radius: 10px;
}
body::-webkit-scrollbar-thumb:hover {
  background-color:  rgba(219, 35, 27, 0.90);
  outline: 2px solid slategrey;
  border-radius: 12px;
}

/******************/

