@import url('reset.css');
@import url(https://fonts.googleapis.com/css?family=Courgette);
@import url('https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i');

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i');

body{font-family: 'Nunito', sans-serif;!important}
.text-reflect {position: relative;}
.text-reflect:before, .text-reflect:after {display: block;position: absolute;bottom: -0.5em; left: 0; right: 0;}
.text-reflect:before {content:'';opacity: .3;color:#666;-webkit-transform: scaleY(-1);-moz-transform: scaleY(-1);-o-transform: scaleY(-1);transform: scateY(-1);}
.text-reflect:after {height: 1em;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0)), to(rgb(255,255,255)));
background: -moz-linear-gradient(top, rgba(255,255,255,0), rgb(255,255,255));
background: linear-gradient(top, rgba(255,255,255,0), rgb(255,255,255));
content: ' ';}

/*******sub tilte reflec*******/

a{ 
cursor:pointer !important;
outline:none !important;
color:#000; text-decoration:none !important;
-webkit-transition: all .3s .1s;
-moz-transition: all .3s .1s;
-o-transition: all .3s .1s;
transition: all .3s .1s;
			 }
a:hover{ 
color:#ed1b24; text-decoration:none !important;
-webkit-transition: all .3s .1s;
    -moz-transition: all .3s .1s;
     -o-transition: all .3s .1s;
        transition: all .3s .1s;
}

hr{color:#ddd !important;background-color:#ddd !important;height:1px;border:none;}
.bg-grey{background:rgba(0,0,0,0.8) !important; color:#fff; border-bottom:0 !important; height:100px;font-family: 'Archivo Black', sans-serif;font-size:20px}
.bg-no{background:none !important;}
#header{header:100px;}
.header{margin:0 auto; position:relative; z-index:999999999; width:100%; left:0; right:0;}
.clearfix{clear:both; height:20px;}
.clearfix-10{clear:both; height:10px;}
.position-relative{position:relative !important}
.position-absolute{position:absolute}
.padding-reset,.padding-remove{padding:0 !important}
.clearfix-100{clear:both; height:100px;}
@media(max-width:767px){.bg-grey{height:55px}.clearfix-100{height:55px;}.padding-reset{padding:0 !important}}
/*------------------------------------ general styling ----------------------------------------------*/
/*font-family: 'Roboto', sans-serif;*/

.logo{float:left; padding-top:30px}
.bar{background:#ab0000; height:3px; width:15%; margin:10px auto;}
.rotate-360:hover{-ms-transform: rotate(360deg);-webkit-transform: rotate(360deg); transform: rotate(360deg);-webkit-transition: all .3s .1s;-moz-transition: all .3s .1s;-o-transition: all .3s .1s;transition: all .3s .1s;}
.border-bottom{border-bottom:2px solid #333; margin-bottom:20px}


.project-img{color:#fff; position:relative; overflow:hidden;-moz-transition: all 0.3s; -webkit-transition: all 0.3s;transition: all 0.3s}
.project-img:hover{-moz-transition: all 0.3s; -webkit-transition: all 0.3s;transition: all 0.3s}
.project-img:hover img{-webkit-filter: grayscale(100%);   filter: grayscale(100%);-webkit-transform: scale(1.1);transform: scale(1.1);-moz-transition: all 0.3s; -webkit-transition: all 0.3s;transition: all 0.3s}
.project-desc-fadeIn{background:rgba(0,0,0,.7);padding:15px; position:absolute; left:-100%; top:0;-moz-transition: all 0.3s; -webkit-transition: all 0.3s;transition: all 0.3s;opacity:0; width:100%; height:100%; padding-top:50%}
.project-img:hover .project-desc-fadeIn{-moz-transition: all 0.3s; -webkit-transition: all 0.3s;transition: all 0.3s; opacity:1; left:0;}


.showroom{color:#fff; background:url(../images/D%27lockShowrrom.jpg) no-repeat center 140% fixed; background-size:100% auto;}
.showroom-overlay{background:rgba(0,0,0,.6) ;padding:8% 0; }
@media(max-width:767px){.showroom{background-size:auto 100%;}}

.framing{border:thin solid #ddd; position:relative; overflow:hidden;-moz-transition: all 0.3s; -webkit-transition: all 0.3s;transition: all 0.3s}
.framing:hover{border:thick solid #ddd;-moz-transition: all 0.3s; -webkit-transition: all 0.3s;transition: all 0.3s}
.label-tip{background:rgba(0,0,0,.7); color:#fff; padding:15px; position:absolute; left:-20%; bottom:0;-moz-transition: all 0.3s; -webkit-transition: all 0.3s;transition: all 0.3s;opacity:0}
.framing:hover .label-tip{-moz-transition: all 0.3s; -webkit-transition: all 0.3s;transition: all 0.3s; opacity:1; left:0;}
.framing p{color:#000; font-size:25px;/*font-family: 'Rozha One', serif;*/font-family: 'Archivo Black', sans-serif;}
.margin-bot{margin-bottom:10px}

.product-img{overflow:hidden;height:250px; background:#efefef}


.services{margin:0 1px; background:#000; position:relative; overflow: hidden;}
.services img{max-width:100%;-moz-transition: all 0.3s;-webkit-transition: all 0.3s;transition: all 0.3s;-webkit-filter: grayscale(100%);   filter: grayscale(100%);}
.services:hover img{-moz-transform: scale(1.1); -webkit-transform: scale(1.1);transform: scale(1.1);-webkit-filter: grayscale(0%);   filter: grayscale(0%);}
.services b{position:absolute; bottom:45%; left:0; right:0; margin:auto;text-align:center; color:#fff;}
.services:hover b{display:none}
.overlay{position:absolute; color:#fff; opacity:0; width:100%; height:100%; left:0; top:0;text-align:center; color:#fff; padding:5%}
.overlay:hover{left:0; right:0;opacity:1; -moz-transition: all 0.3s; -webkit-transition: all 0.3s;transition: all 0.3s; padding-top:40%}
.overlay b{font-size:150%;bottom:55%;}
.overlay:hover b{display:block}
.services-bg{background:rgba(0,0,0,.6)}

.bar{background:#fff; height:2px; width:80px; margin:10px auto}
.line{background:#fff; height:3px; width:100px; margin:5px 0; }


.btn-view{color:#333;font-weight:400;-webkit-transition: all .3s .1s;-moz-transition: all .3s .1s;-o-transition: all .3s .1s;transition: all .3s .1s;}
.btn-view:hover{-webkit-transition: all .3s .1s;-moz-transition: all .3s .1s;-o-transition: all .3s .1s;transition: all .3s .1s; opacity:.5}

.btn-transparent{border:thin solid #fff;  background:rgba(0,0,0,.6); color:#fff; padding:10px 20px}
.btn-transparent:hover{color:#fff;background:rgba(255,50,50,.6); font-weight:600; }

.btn-normal,.btn-normal a{background:#465666; padding:10px 15px; width:100%; color:#fff;-webkit-transition: all .3s .1s;-moz-transition: all .3s .1s;-o-transition: all .3s .1s;transition: all .3s .1s; font-weight:800; text-transform:uppercase; cursor:pointer}
.btn-normal:hover{background:#ff0000; color:#fff;-webkit-transition: all .3s .1s;-moz-transition: all .3s .1s;-o-transition: all .3s .1s;transition: all .3s .1s;}

.btn-logo{background:rgba(255,255,255,.5); border:thin solid #999; padding:15px 5px;-moz-transition: all .3s .1s;-o-transition: all .3s .1s;transition: all .3s .1s;}
.btn-logo:hover,.btn-logo-active{border:2px solid #999; background:rgba(88,88,88,.2);-moz-transition: all .3s .1s;-o-transition: all .3s .1s;transition: all .3s .1s;}

.link-normalise{color:#000;-moz-transition: all .3s .1s;-o-transition: all .3s .1s;transition: all .3s .1s; }
.link-normalise:hover{color:#ff0000;-moz-transition: all .3s .1s;-o-transition: all .3s .1s;transition: all .3s .1s;}

.link-product{color:#000;-moz-transition: all .3s .1s;-o-transition: all .3s .1s;transition: all .3s .1s; }
.link-product:hover{color:#666;-moz-transition: all .3s .1s;-o-transition: all .3s .1s;transition: all .3s .1s;}

.link-grey{color:#666;}
.link-grey:hover{color:#039;}

.title-black{color:#000; font-size:35px; font-weight:300;line-height:1.5em}
.title-sub{color:#000; font-size:15px; font-weight:300;line-height:1.5em; font-weight:600; min-height:50px}
.text-25{font-size:150%;}
.text-small{font-size:90%;}
.text-black{color:#000; font-size:35px; font-weight:300;line-height:1.5em}
.text-red{color:#ab0000; font-size:35px; font-weight:300;line-height:1.5em}
.font-family{/*font-family: 'Rozha One', serif;*/font-family: 'Archivo Black', sans-serif; letter-spacing:.3em;}
.text-bold-grey{font-size:120%; color:#888; font-weight:700; line-height:1.2em}
.text{font-size:12px; color:#999; line-height:1.2em}
.text-bold{font-weight:600}
.text-details{font-size:13px; color:#000; line-height:1.2em; padding:10px 15px; border:thin solid #000;}
.text-details:hover{color:#ff0000;border:thin solid #ff0000;}
.brand-title{color:#F30; letter-spacing:1em; font-weight:300; font-size:200%}
@media(max-width:767px){.brand-title{letter-spacing:.1em;}.text-black{line-height:1em}.font-family{letter-spacing:.02em;}}