@charset "utf-8";
@font-face {
  font-family: 'Futura';
  font-style: normal;
  font-weight: 400;
  src: local('FuturaLight'), url(FuturaLight.ttf) format('truetype');
 
}
@font-face {
  font-family: 'Samarkan';
  font-style: normal;
  font-weight: 400;
  src: local('samarkan'), url(samarkan.ttf) format('truetype');
 
}
@font-face {
  font-family: 'Trajan';
  font-style: normal;
  font-weight: 400;
  src: local('TrajanPro'), url(TrajanPro.otf) format('opentype');
 
}
a:hover{ text-decoration: none; color: inherit; cursor: pointer;}
body,html{height: 100%; font-family: 'Futura'}
nav.sidebar, .main{-webkit-transition: margin 200ms ease-out; -moz-transition: margin 200ms ease-out; -o-transition: margin 200ms ease-out; transition: margin 200ms ease-out; }
.main{padding: 10px 10px 0 10px; }
.red{color:#F31C24;}
.yellow{color:#FECB01;}
.white{color:#ddd;}
.brown{color:#795548;}
.home-content h1, .home-content h3{font-family: 'Samarkan'}
.animated{
	-webkit-animation-duration:2s;
	-o-animation-duration:2s;
	animation-duration:2s;
	-webkit-animation-iteration-count: infinite;
	-o-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-o-animation-timing-function: linear;
	animation-timing-function: linear;
}
.needle.animated{
	-webkit-animation-duration:5s;
	-o-animation-duration:5s;
	animation-duration:5s;
	-webkit-animation-iteration-count: infinite;
	-o-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-o-animation-timing-function: linear;
	animation-timing-function: linear;
}
.c-holder{width: 300px; height: 300px; background-image: url(../img/cback.png); background-size: 100% 100% ; position: relative; margin: 20px auto;}
.needle{position: absolute; width: 100%; height: 100%; top:0px; left: 0px;}

.enquiry .form-control{background: rgba(0,0,0,0.7);border-radius: 0px; color:#FECB01; font-size: 18px; border-color:rgba(100,100,100,0.5); border-left:#FECB01 1px solid;}
.enquiry input{height: 40px;}
.enquiry-btn{font-family: 'Trajan'; color:#FECB01; font-size: 20px; padding: 10px 20px 5px 20px; display: inline-block; background: rgba(0,0,0,0.5); border:1px solid rgba(100,100,100,0.5)}
#map-canvas{width: 100%; height: 200px; background: none !important;}
.locate{font-family: 'Trajan'; color:#FECB01; font-size: 20px; padding: 25px 0px;}
 @media (min-width: 765px) {
	.navbar-brand{float: none; display: block; height: auto; padding:15px 15px 15px 35px;}
    .main{  height: 100%; position: fixed; overflow-y: auto; }
    .main-index{background-image: url(../img/bg.jpg);background-size: cover }
    .main-about{background-image: url(../img/bg2.jpg); background-size: cover }
    .main-service{background-image: url(../img/bg1.jpg);background-size: cover }
    .main-enquiry{background-image: url(../img/bg2.jpg);background-size: cover }
    .main-spage{background-image: url(../img/bg4.jpg);background-size: cover; }

    .sidebar .navbar-brand, .sidebar .navbar-header{text-align: center; width: 100%; margin-left: 0px; }
    .sidebar .navbar-collapse, .sidebar .container-fluid{padding: 0 0px 0 0px; }
    .sidebar{ position: fixed;    top: 0px;    bottom: 0;    left: 0;    z-index: 1000;    display: block;   padding: 0px; overflow:visible	;   overflow-x: visible;    overflow-y: auto; background: #000;}
    .sidebar .navbar-default{background: none; border:none; box-shadow: none}
    .sidebar li {width: 100%; }
    .navbar-nav>li>a{font-family: 'Trajan'; font-weight: bold; font-size: 14px;padding-left: 25px; color:#F31C24 !important; line-height: 1; -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s; text-shadow:none;}
    .navbar-nav>li>a:hover,.navbar-nav>.active>a{background: #F31C24 !important; color:#fff !important;box-shadow: rgba(0,0,0,0.5) 0px 2px 2px;text-shadow:none;}
	 .dropdown-menu {  width: 100%;  background: #333;	padding-top: 0px; padding-bottom: 0px; -webkit-transition: all .3s ease;	-o-transition: all .3s ease;	transition: all .3s ease;}
	 .dropdown-menu>li>a{color:#fff;}
	hr{margin-right: 20px; margin-left: 20px; border-color: #333}
	footer{padding: 15px 15px 15px 25px; margin-top: 10px; text-align: left; color:#aaa;}
.face{position: absolute;right:0px; bottom: 50px; max-width: 33%}

	.service-nav{margin-right:0px;text-align: center; color:#fff;background: rgba(62,39,35,0);
    background: -moz-linear-gradient(top, rgba(62,39,35,0) 0%, rgba(62,39,35,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(62,39,35,0)), color-stop(100%, rgba(62,39,35,1)));
    background: -webkit-linear-gradient(top, rgba(62,39,35,0) 0%, rgba(62,39,35,1) 100%);
    background: -o-linear-gradient(top, rgba(62,39,35,0) 0%, rgba(62,39,35,1) 100%);
    background: -ms-linear-gradient(top, rgba(62,39,35,0) 0%, rgba(62,39,35,1) 100%);
    background: linear-gradient(to bottom, rgba(62,39,35,0) 0%, rgba(62,39,35,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3e2723', endColorstr='#3e2723', GradientType=0 );  font-size: 16px; position: fixed;bottom: 0px; left:16.66666667%;width: calc(100% - 16.66666667%-30px);}
	.service-nav ul{margin-left: 0px;background: rgba(0,0,0,0.2);}
  .service-nav li{padding: 0px;}
    .service-nav li>a{cursor:pointer;padding-top: 20px; padding-bottom: 20px; -webkit-transition: all .3s;    -o-transition: all .3s; 
    transition: all .3s; color:#fff;}
    .service-nav li>a:hover,.service-nav .active>a{background:#000 }
    .service-nav li>a:hover div,.service-nav .active>a div{ color:#FECB01; font-weight: bold;}
    .service-nav img{display: inline-block; width: 30px;}
    .service-nav li>a>div{padding:20px 5px 10px 5px;letter-spacing: .3px; -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;}
    .service-nav li>a:after{position: absolute;right:0px;top:20%; height: 60%; width: 1px; background: rgba(0,0,0,0.5); content: ''}
    .service-nav li>a:last-child::after{display: none}

    
    .home-content{text-align: center; padding-top: 5%; padding-bottom: 150px}
	
	.isotope{width: 100%; padding: 0px; margin: 0px}
    .isotope .item,.isotope .grid-sizer{width: 33.33333%; display: inline-block;}
    .isotope .item{padding:30px 20px; -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;}
    .item img{display: inline-block;}
    .item h4{ color: #FECB01; font-family: 'Trajan'; padding: 13px 10px 10px 10px; display: inline-block; position: relative; line-height: 1; margin: 15px 0px 5px 0px;}
    .item h4:before{content: ''; position: absolute;width: 0%; left:0px; top:0px; background: #FECB01; height: 1px; -webkit-transition: all .7s;
    -o-transition: all .7s;
    transition: all .7s;}
    .item h4:after{content: ''; position: absolute;width: 0%; right:0px; bottom:0px; background: #FECB01; height: 1px;-webkit-transition: all .7s;
    -o-transition: all .7s;
    transition: all .7s;}
    .item:hover{background: rgba(0,0,0,0.2)}
    .item p{font-size: 14px; color:#ddd; padding: 0px 30px;  overflow: hidden;  height:70px;  display: block;   display: -webkit-box;  text-overflow: ellipsis;  -webkit-line-clamp: 3;  -webkit-box-orient: vertical;}
    .item:hover h4:after,.item:hover h4:before{width: 100%}
	.home-content p{font-size: 16px; color:#ddd;}
  .main-spage p{color:#795548;}

  .p-isotope{ padding: 0px; margin: 0px; width:100%; display: block; }
    .p-item,.p-grid-sizer{width: 25%; display: inline-block}
    .p-item img{display: block}
    .p-item{padding:5px;}
    .product-info{background: #fff; color:#000; -webkit-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;}
    .mp-data{text-align: center;}
    .p-item h4,.mp-data h4{ font-weight: bold;font-family: 'Trajan'; margin:0px;padding: 10px 0px 5px 0px; text-transform: capitalize;}
    .p-item p,.mp-data p{ font-weight: bold; padding: 3px 0px 10px 0px; color:#666;font-size: 14px !important;margin:0px;position: relative;}
    .p-item p:before{content: ''; position: absolute;width: 10px; height: 1px; top:0px; left:50%; margin-left: -5px;background: #F31C24}
    .filter-nav>li{color:#fff;font-size: 18px;font-family: 'Trajan'; padding: 10px 30px; cursor: pointer;}
    .filter-nav>li.active{color:#F31C24;}
    .p-item>div{position: relative;}
    .img-cont{overflow: hidden; text-align: center;background: #fff}
    .img-cont img{display: inline-block;}
    .p-item>div:after{position: absolute;width: 0%; height: 100%; border-top:3px solid #F31C24;z-index: 1; content: ''; border-bottom:3px solid #F31C24;top:0px; left: 50%; -webkit-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;}
    .p-item:hover>div:after{width: 100%; left:0px;}
    .p-item>div:before{position: absolute;width: 100%; height: 0%; border-right:3px solid #F31C24;z-index: 1; content: ''; border-left:3px solid #F31C24;top:50%; left: 0%; -webkit-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;}
    .p-item:hover>div:before{height: 100%; top:0px;}
    


}
   
@media (min-width: 1330px) {
	.home-content h1{font-size: 52px;} 
	.home-content h3{font-size:36px}
	.home-content p{font-size: 20px}
    nav.sidebar{margin-left: 0px; float: none; width: 300px;}
    .service-nav{left:16.66666667%;width: calc(100% - 16.66666667%-30px);}
    .item p{height: 80px;}
}
@media (max-width: 765px) {
  p{padding: 0px 10px;}
  h1,h3,h4{padding: 0px 10px}
  .c-holder{width: 230px; height: 230px; }
  .navbar-brand{ padding:0px ; width: 150px;margin-top: -10px}
    .main{ padding:20px 0px 0px 0px; }
    .main-index{background-image: url(../img/bg.jpg);background-size: cover }
    .main-about{background-image: url(../img/bg2.jpg); background-size: cover }
    .main-service{background-image: url(../img/bg1.jpg);background-size: cover; }
    .main-enquiry{background-image: url(../img/bg2.jpg);background-size: cover }
    .main-spage{background: #fffefe }
    .sidebar{  background: #000;padding-top: 10px; padding-bottom: 10px;}
    .sidebar .navbar-default{background: none; border:none; box-shadow: none; margin-bottom: 0px;}
    .navbar-nav>li>a{font-family: 'Trajan'; font-weight: bold; font-size: 14px;line-height:2;padding-left: 25px; color:#F31C24 !important; line-height: 1; -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s; text-shadow:none;}
    .navbar-nav>li>a:hover{background: #F31C24 !important; color:#fff !important;box-shadow: rgba(0,0,0,0.5) 0px 2px 2px;text-shadow:none;}
   footer{display: none}
   .face{max-width: 100%}
  .service-nav{text-align: center; color:#fff;background: rgba(62,39,35,0);
    background: -moz-linear-gradient(top, rgba(62,39,35,0) 0%, rgba(62,39,35,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(62,39,35,0)), color-stop(100%, rgba(62,39,35,1)));
    background: -webkit-linear-gradient(top, rgba(62,39,35,0) 0%, rgba(62,39,35,1) 100%);
    background: -o-linear-gradient(top, rgba(62,39,35,0) 0%, rgba(62,39,35,1) 100%);
    background: -ms-linear-gradient(top, rgba(62,39,35,0) 0%, rgba(62,39,35,1) 100%);
    background: linear-gradient(to bottom, rgba(62,39,35,0) 0%, rgba(62,39,35,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3e2723', endColorstr='#3e2723', GradientType=0 );  font-size: 16px;width: 100%;}
  .service-nav ul{margin-left: 0px;background: rgba(0,0,0,0.2);}
  .service-nav li{padding: 0px;width:49%; display: inline-block;}
    .service-nav li>a{cursor:pointer;padding-top: 20px; padding-bottom: 20px; -webkit-transition: all .3s;    -o-transition: all .3s; 
    transition: all .3s; color:#fff;}
    .service-nav li>a:hover,.service-nav .active>a{background:#000 }
    .service-nav li>a:hover div,.service-nav .active>a div{ color:#FECB01; font-weight: bold;}
    .service-nav img{display: inline-block; width: 30px;}
    .service-nav li>a>div{padding:20px 5px 10px 5px;letter-spacing: .3px; -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;}
    .service-nav li>a:after{position: absolute;right:0px;top:20%; height: 60%; width: 1px; background: rgba(0,0,0,0.5); content: ''}
    .service-nav li>a:last-child::after{display: none}

    
    .home-content{text-align: center; padding-top: 5%; padding-bottom: 0px;}
    .home-content>.container-fluid{padding: 3px;}
  
  .isotope{width: 100%; padding: 0px; margin: 0px}
    .isotope .item,.isotope .grid-sizer{width: 100%; display: inline-block;}
    .isotope .item{padding:30px 20px; -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;}

    .item img{display: inline-block;}
    .item h4{ color: #FECB01; font-family: 'Trajan'; padding: 13px 10px 10px 10px; display: inline-block; position: relative; line-height: 1; margin: 15px 0px 5px 0px;}
    .item h4:before{content: ''; position: absolute;width: 0%; left:0px; top:0px; background: #FECB01; height: 1px; -webkit-transition: all .7s;
    -o-transition: all .7s;
    transition: all .7s;}
    .item h4:after{content: ''; position: absolute;width: 0%; right:0px; bottom:0px; background: #FECB01; height: 1px;-webkit-transition: all .7s;
    -o-transition: all .7s;
    transition: all .7s;}
    .item:hover{background: rgba(0,0,0,0.2)}
    .item p{font-size: 14px; color:#ddd; padding: 0px 30px;  overflow: hidden;  height:70px;  display: block;   display: -webkit-box;  text-overflow: ellipsis;  -webkit-line-clamp: 3;  -webkit-box-orient: vertical;}
    .item:hover h4:after,.item:hover h4:before{width: 100%}
  .home-content p{font-size: 16px; color:#ddd;}
  .main-spage p{color:#795548;}
.p-isotope{width: 100%}
.p-item,.p-grid-sizer{width: 50%; display: inline-block}
.product-info{background: #fff; color:#000; -webkit-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;}
    .p-item{padding:3px;}
 .p-item h4{ font-weight: bold;font-family: 'Trajan'; margin:0px;padding: 10px 3px 5px 3px; text-transform: capitalize;font-size: 12px; min-height: 45px}
    .p-item p{ font-weight: bold; padding: 3px 0px 10px 0px; color:#666;font-size: 14px !important;margin:0px;}
    .filter-nav>li{color:#fff;font-size: 14px;font-family: 'Trajan'; padding: 10px 15px; cursor: pointer;}
    .filter-nav>li.active{color:#F31C24;}
    .p-item>div{position: relative;}
    .img-cont{overflow: hidden; text-align: center;background: #fff}
    .img-cont img{display: inline-block;}
    .p-item>div:after{position: absolute;width: 0%; height: 100%; border-top:3px solid #F31C24;z-index: 1; content: ''; border-bottom:3px solid #F31C24;top:0px; left: 50%; -webkit-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;}
    .p-item:hover>div:after{width: 100%; left:0px;}
    .p-item>div:before{position: absolute;width: 100%; height: 0%; border-right:3px solid #F31C24;z-index: 1; content: ''; border-left:3px solid #F31C24;top:50%; left: 0%; -webkit-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;}
    .p-item:hover>div:before{height: 100%; top:0px;}
  }