@import url('reset.css');
@import url(https://fonts.googleapis.com/css?family=Damion);
@import url(https://fonts.googleapis.com/css?family=Satisfy);
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic);




.navi-dsize ul {
	text-align:left !important;
	
}
.navi-dsize ul li {
	padding:10px 4.3% !important;
	
}

.text-reflect {
    position: relative;
}
.text-reflect:before, .text-reflect:after {
    display: block;
    position: absolute;
    bottom: -0.5em; /* You should change this value to fit your font */
    left: 0;
    right: 0;
}
.text-reflect:before {
    content:'';
    opacity: .3;
	color:#666;
    /* This is how the text is flipped vertically */
    -webkit-transform: scaleY(-1);
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    transform: scateY(-1);
}
.text-reflect:after {
    /* Fading using CSS gradient */
    /* Don't forget to change the colors to your background color */
    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));

    /* I left out the `filter` property, because IE doesn't know `:before` and `:after` pseudo-elements anyway */
    content: ' ';
    height: 1em;
}

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

.bg{ background:url(../lz_images/bg.jpg) repeat-y center -180% fixed; background-size:cover auto}

a{ 
color:#333; 
text-decoration:none;
-webkit-transition: all .3s .1s;
-moz-transition: all .3s .1s;
-o-transition: all .3s .1s;
transition: all .3s .1s;
/*-webkit-text-shadow: 0px 0px 1px 2px rgba(0, 0, 0, .55);
-moz-text-shadow: 0px 0px 1px 2px rgba(0, 0, 0, .55);
text-shadow: 0px 0px 1px 2px rgba(0, 0, 0, .55)*/
			 }
a:hover{ 
color:#ff6666; 
text-decoration:none;
-webkit-transition: all .3s .1s;
    -moz-transition: all .3s .1s;
     -o-transition: all .3s .1s;
        transition: all .3s .1s;
			 }

hr{
	color:#ddd;
	background-color:#ddd;
	height:1px;
	border:none;
	
}

#navigation {
position:relative;
bottom:50px;
width:100%;
padding:15px 0;
text-align:center;
margin:0px;
background:rgba(0,0,0,0.7);
}
#navigation li {
display:inline;
position: relative;
border-right:1px solid white;
} 

#navigation li:hover {color:#99cc33}
#navigation li a {
color: white;
padding: 10px 5%;
font-size: 15px;
}

#navigation li a:hover { text-decoration: none; color:#99cc33;transition-property: all;}
#navigation li ul {
position: absolute;
display:none;
z-index: 1000;
width:300px;
left:0px;
border:0;
}

#navigation li:hover ul {
bottom:30px;
display:block;
background:rgba(0,0,0,0.8);
padding:2% 5% 2% 5%;
text-align:left;
border-bottom:thin solid #333;
max-height:350px;
overflow-y:scroll;
}

#navigation li ul li {
background: none;
width: 100%;
border:none;

}
#navigation li ul li:hover {
background: none;
color:#f8981d !important;
}
#navigation li ul li a {
text-align:left !important;
color: white;
line-height:1.6em;
font-size:100%;
padding:5px 0;
width: 100%;
clear:both;
}

/*------------------------------------menu----------------------------------------------*/

nav#topmenu {color:#666; font-size: 15px; z-index:99; /*font-family: 'Damion', cursive;*/position:relative;/*top:100px; */ background:rgba(0,0,0,0.7); padding:7px 0;}

nav#topmenu ul {padding:0;list-style:none; z-index:999; text-align:center;}

nav#topmenu ul li {display:inline-block; z-index:999; padding:10px 5%;position:relative;list-style:none;margin:0; border:thin solid #fff; border-top:none; border-bottom:none; border-left:0}
nav#topmenu ul li:first-child {/*border-top:1px solid #ccc;*/}
nav#topmenu ul li a {z-index:99999; color:#fff; letter-spacing:-0.01em;outline:0;text-decoration:none;display:block;}
nav#topmenu ul li a:hover {color:#99cc33;outline:0;}
nav#topmenu ul li a:focus{color:#99cc33;outline:0;}
nav#topmenu ul li:hover > a {color:#99cc33;outline:0; }
/*nav#topmenu ul li span {background:url(arrow.png) center no-repeat;height:10px;position:absolute;text-indent:-9999px;top:10px;right:5px;width:10px;}
nav#topmenu ul li span.arrow {background-position:0 2px;}
nav#topmenu ul li span.arrow-right {background-position:-10px 2px;}*/
nav#topmenu ul li ul.sublist {
	float:left;
	list-style:none;
	margin:0;
	padding:5px 5px 10px 0;
	position:absolute;
	left:10%;
	top:30px;
	opacity:0;
	width:150%;
	text-align:left;
	visibility:hidden;
	-moz-transition:opacity 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear;
	-webkit-transition:opacity 0.3s ease-out, visibility 0.1s 0.1s linear;
	-o-transition:opacity 0.3s ease-out, visibility 0.1s 0.1s linear;
	transition:opacity 0.3s ease-out, visibility 0.1s 0.1s linear;
}
nav#topmenu ul li ul.sublist li {
	border:none;
	clear:both;
	margin-top:-15px;
	padding:0px 0 0px 20px; 
	text-align:left;
	-moz-transition:opacity 0.1s 0.15s ease-out, margin 0.3s 0.1s ease-out;
	-webkit-transition:opacity 0.1s 0.15s ease-out, margin 0.3s 0.1s ease-out;
	-o-transition:opacity 0.15s 0.15s ease-out, margin 0.3s 0.1s ease-out;
	transition:opacity 0.15s 0.15s ease-out, margin 0.3s 0.1s ease-out;
}

nav#topmenu ul li ul.sublist li a {
	color:#666;
	text-align:left;
	padding:0px 0 0px 0px; 
	margin: 1px 0 2px 0; 
	z-index:999; 
	font-size:14px;
}
nav#topmenu ul li:hover ul.sublist {
	opacity:1;
	visibility:visible;
}
nav#topmenu ul li:hover ul.sublist li {
	margin-top:0;
	opacity:1;
}
nav#topmenu ul li:hover ul.sublist li a {
	color:rgba(153,204,51,1);	
	-moz-transition:color 0.1s ease-out;
	-webkit-transition:color 0.1s ease-out;
	-o-transition:color 0.1s ease-out;
	transition:color 0.1s ease-out;
}
nav#topmenu ul li:hover ul.sublist li a:hover {
	color:rgba(255,255,255,1);	
	-moz-transition:color 0.3s ease-out;
	-webkit-transition:color 0.3s ease-out;
	-o-transition:color 0.3s ease-out;
	transition:color 0.3s ease-out;
}
nav#topmenu ul li:hover ul.sublist li:hover > a {
	color:#fff;
}
/* SUB SUB LIST */
nav#topmenu ul li ul.sublist li ul.subsublist {
	float:left;
	list-style:none;
	margin:0;
	padding:5px 10px 10px 20px; 
	position:absolute;
	left:70%;
	text-align:left;
	top:5px;
	opacity:0;
	visibility:hidden;
	background:url(../lz_images/black_path1.png) repeat left top;
	-moz-transition:opacity 0.2s 0.01s ease-in-out, left 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear;
	-webkit-transition:opacity 0.2s 0.01s ease-in-out, left 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear;
	-o-transition:opacity 0.2s 0.01s ease-in-out, left 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear;
	transition:opacity 0.2s 0.01s ease-in-out, left 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear;
}
nav#topmenu ul li ul.sublist li ul.subsublist li{border:none;text-align:left;clear:both;margin:0;padding:0;
opacity:1;}
nav#topmenu ul li ul.sublist li:hover ul.subsublist {opacity:1;left:99.9%;visibility:visible;}

@media(max-width:980px){#navigation li a {padding: 10px 3%;}
nav#topmenu ul li {padding: 10px 3%;}
}

@media(max-width:800px){#navigation li a {padding: 10px 4%;}
nav#topmenu ul li {padding: 10px 4%;}
}
/**************content****************/

.center-width{ text-align:center; color:#000; margin:0 auto; padding:5% 15%}
.path-grey{background:#efefef; padding:2% 0; text-align:center}
.services-box a{ color:#fff; }
.services-box a:hover{text-decoration:none !important; color:#68c4ff;}
.services-box{background:#0072bc; color:#fff; font-weight:600; text-align:center; padding:5%;-webkit-transition: all .6s .1s; 
-moz-transition: all .6s .1s;
-o-transition: all .6s .1s;
transition: all .6s .1s;
-webkit-transform:rotateY(0deg);
-moz-transform:rotateY(0deg);
-ms-transform:rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.services-box:hover{background:repeat rgba(0, 0, 0, 0.8);color:#68c4ff; text-decoration:none !important; 
-webkit-transition: all .6s .1s;
-moz-transition: all .6s .1s; 
-o-transition: all .6s .1s;
ransition: all .6s .1s;
transform-style: preserve-3d;
-webkit-transform:rotateY(360deg);
-moz-transform:rotateY(360deg);
-ms-transform:rotateY(360deg);
-o-transform: rotateY(360deg);
transform: rotateY(360deg);
}
 

.Title{font-size:250%; color:#333; text-align:left; line-height:2em}
.Title-1{font-size:250%; color:#333; text-align:center; line-height:2em}
.sub-title{color:#ddd; font-weight:300; font-size:200%; line-height:1em;font-family: 'Roboto', sans-serif;}
.slogan{padding:0; margin-top:-6%;}
.height{height:350px}
.circle{border-radius:50%; width:150px; height:150px; margin:0 auto; box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
.heading{background:#0072bc url(../lz_images/title-bg.png) repeat left center; color:#fff; padding:0; font-weight:600; font-size:300%; margin-top:-32px; clear:both; position:relative; z-index:999; text-align:center;font-family: 'Archivo Narrow', sans-serif; line-height:2.5em}

.contact-info{position:absolute; top:10%; right:0%;    background:rgba(255, 255, 255, 0.8); text-align:right;/*background:url(../lz_images/dropdown_bg.png) repeat left top;margin:0 auto;left:5%;*/ width:30%; padding:2% 3%}

/*-------------------------------products style--------------------------------*/

.effects {padding-left: 15px;}
.effects .img {
  position: relative;
  display:inline-block;
  padding:5px;
  border:thin solid #ddd;
  margin-bottom: 5px;
  width: 25%;
  overflow: hidden;
}
.effects .img:nth-child(n) { margin-right: 5px;}
.effects .img:first-child { margin-left: -15px;}
.effects .img:last-child {  margin-right: 0;}
.effects .img img {
  display: block;
  margin: 0;
  padding: 0;
  max-width: 100%;
  height: auto;
}

.overlay {
  display: block;
  position: absolute;
  background: rgba(0, 0, 0, 0.8) no-repeat center 25%;
  background-size:40px 40px;
  z-index: 20;
  /*background:;*/
  overflow: hidden;
  text-align:center;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
.overlay a{/*top:60%;*/ color:#fff !important; line-height:1em !important; text-decoration:none !important;}
a.close-overlay {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 100;
  width: 45px;
  height: 45px;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  line-height: 45px;
  text-align: center;
  background-color: #000;
  cursor: pointer;
}
a.close-overlay.hidden {
  display: none;
}

a.expand {
  display: block;
  position: absolute;
  z-index: 100;
  width:90%;
  height: 60px;
  /*border: solid 5px #fff;*/
  text-align: center;
  color: #fff;
  line-height:2.5em;
  font-weight: 300;
  font-size: 15px;
  /*-webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
  border-radius: 30px;*/
}

/* ============================================================
  EFFECT 1 - SLIDE IN BOTTOM
============================================================ */
#effect-1 .overlay {
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 0;
}
#effect-1 .overlay a.expand {
  left: 0;
  right: 0;
  bottom: 50%;
  margin: 0 auto -30px auto;
}
#effect-1 .img.hover .overlay {
  height:100%;
}
@media only screen and (max-width: 1100px) {
  .effects {padding-left: 5px;}
  .effects .img { width: 50%;}
  .effects .img:nth-child(n) { margin-right: 5px;}
  .effects .img:first-child {margin-left: 0;}
  .effects .img:nth-child(2n-1) {margin-left: -5px;}
  .effects .img:nth-child(2n) {margin-right: 0;}
  .effects .img:last-child {margin-right: 0;}
}
@media only screen and (max-width: 520px) {
  .effects .img { width: 100%;}
  .effects .img:nth-child(n) { margin-right: 0;}
  .effects .img:first-child { margin-left: 0;}
  .effects .img:nth-child(2n-1) { margin-left: 0;}
  .effects .img:nth-child(2n) { margin-right: 0; }
  .effects .img:last-child {margin-right: 0;}
  .effects .img img {margin: 0 auto;}
}



.categories{background:url(../lz_images/frame.png) no-repeat center center; background-size:100% auto; position:relative}
.pro-cat{color:#000; position:absolute; bottom:15%; text-align:center; margin:0 auto; left:0; right:0; font-weight:600;}
.rotate{transition: transform 1s;}
	
.rotate:hover{  
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(7deg);
}


@media only screen and (max-width: 768px) {
.Title{/*font-family: 'Satisfy', cursive;*/font-size:200%; color:#333; text-align:center; clear:both; line-height:1em}
.Title-1{font-size:200%; text-align:center; clear:both; line-height:1em}
.center-width{padding:5% 0}
.slogan{padding:0; margin-top:0px}
.height{height:150px}
.contact-info{background:none; position:relative;padding:0; left:0; right:0; width:100%; text-align:left/*right:1%; left:1%; margin:0 auto; width:90%;  margin:5px;*/}
}