@import url('reset.css');
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);


body{
 	font:normal 80%/1.5 'Open Sans', sans-serif;
	background:#000;
	/*font-size: 13px;*/
	text-align:justify;
	/*line-height:21px;*/
	color:#000;
	min-width:1000px;
	margin:0;	
	/*text-shadow:0 1px 0 rgba(255,255,255,.8);*/
	-webkit-font-smoothing: subpixel-antialiased;
}

.bg_path{background:url(../lz_images/bg_top.jpg) repeat-x 0% 0%; height:364px; position:absolute; width:100%; z-index:-3}

a{ 
color:#000; 
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:#3399cc; 
text-decoration:none;
-webkit-transition: all .3s .1s;
    -moz-transition: all .3s .1s;
     -o-transition: all .3s .1s;
        transition: all .3s .1s;
			 }
			 
.clr{clear:both;}
			 
/*.bg {
	
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -5000;
    height: 100%;
}*/


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

/*----------------------------header----------------------------------*/

header { width:100%; }
#header{width:100%; position:absolute; z-index:2;}
.inner{ width:1000px; margin:0 auto; }

	
/*------------------------------------menu----------------------------------------------*/
#menu
{ 
width:100%; 
color:#fff;  
margin:0 auto; 
background:#282828;
text-transform:uppercase;
padding:5px 0;
height:20px;
text-align:center;
/*-webkit-box-shadow: 0px 0px 1px 1px rgba(221, 221, 221, .75);
-moz-box-shadow: 0px 0px 1px 1px rgba(221, 221, 221, .75);
box-shadow: 0px 0px 1px 1px rgba(221, 221, 221, .75);*/
}

ul#mainNav { list-style:none; z-index:999; margin:0 auto; width:1000px; text-align:center;}
#mainNav li { position:relative; display:inline-block;  z-index:999; padding:0px 30px 5px 30px;color:#fff; line-height:20px; }
/*#mainNav li a 
{ 
text-decoration:none; 
z-index:99999;  
color:#000; 
letter-spacing:-0.01em; 
text-align:center;
-webkit-transition: all .3s .1s;
-moz-transition: all .3s .1s;
-o-transition: all .3s .1s;
transition: all .3s .1s;
 }*/
 
#mainNav li a:hover 
{ 
color:#ff0000; 
border-top:5px solid #ff0000;
-webkit-transition: all .3s .1s;
    -moz-transition: all .3s .1s;
     -o-transition: all .3s .1s;
        transition: all .3s .1s;
-webkit-text-shadow: 1px 1px 1px 2px rgba(221, 221, 221, .75);
-moz-text-shadow: 1px 1px 1px 2px rgba(221, 221, 221, .75);
text-shadow: 1px 1px 1px 2px rgba(221, 221, 221, .75);
}

#mainNav li a {
text-decoration:none; 
z-index:99999;  
color:#fff;
letter-spacing:-0.01em; 
text-align:center;
	position: relative;
    -webkit-animation: mymove 2s ; /* Chrome, Safari, Opera */ 
    animation: mymove 2s ;
}

/* Chrome, Safari, Opera */ 
@-webkit-keyframes mymove {
    0%   {top: 0px; left: 0px; }
    25%  {top: 0px; left: 50px; }
    100% {top: 0px; left: 0px;}
}

/* Standard syntax */
@keyframes mymove {
    0%   {top: 0px; left: 0px; }
    25%  {top: 0px; left: 50px;}
    100% {top: 0px; left: 0px;}
}
/*
#mainNav li a {
      -moz-animation-duration: 3s;
      -webkit-animation-duration: 3s;
      -moz-animation-name: slidein;
      -webkit-animation-name: slidein;
    }
	
@-moz-keyframes slidein {
      from {
        margin-left:20%;
        width:100%
      }
      
      to {
        margin-left:0%;
        width:100%;
      }
    }
    
@-webkit-keyframes slidein {
      from {
        margin-left:20%;
        width:100%
      }
      
      to {
        margin-left:0%;
        width:100%;
      }
    }
*/
#mainNav li:hover { z-index:999;  }
#mainNav ul { position: absolute; padding: 5px; display: none; left:0px; top:20px; list-style: none;  z-index:99999;  background:url(../lz_images/black_path.png) repeat left top; border-bottom-left-radius:0.5em; border-bottom-right-radius:0.5em; -webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, .45);
-moz-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, .45);
box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, .45);}

#mainNav li li{  z-index:999; width:200px; padding:1px 0; margin: 2px 0; border-bottom:thin solid #aaa; background:none; text-align:left}
#mainNav li li a{ color: #ddd; float: none; padding: 3px 3px 3px 25px; display:block; z-index:9999; font-size:12px; text-align:left;}
#mainNav li li a:hover{ display:block; font-weight:400; color:#fff; border:none;}
#mainNav li li:hover { z-index:999; }
#mainNav li:hover ul { margin-left: 0; display: inline-block;  z-index:999; }

/* 3RD LEVEL OF NAVIGATION BELOW */
#mainNav li:hover ul li ul { display: none;  z-index:999; width:200px;  }
#mainNav li ul li ul { display: none; left:-210px; top:-5px; z-index:999;  }
#mainNav li ul li:hover ul { display: block;  z-index:999; }
#mainNav li ul li ul li { border-bottom:dotted 1px #ccc; z-index:999; clear:both; width:200px; } 
#mainNav li ul li ul li:hover { z-index:1; display: inline-block;  z-index:999;}
#mainNav ul > li > ul > li.has-sub > a {
  background: url(../menu_images/icon_plus.png) 96% center no-repeat;
}
/* 4TH LEVEL OF NAVIGATION BELOW */
#mainNav li:hover ul li ul li ul { display: none;  z-index:999; width:200px;  }
#mainNav li ul li ul li ul { display: none; left:-210px; top:-5px; z-index:999;  }
#mainNav li ul li ul li:hover ul { display: block;  z-index:999; }
#mainNav li ul li ul li ul li { border-bottom:dotted 1px #ccc; z-index:999; clear:both; width:200px; } 
#mainNav li ul li ul li ul li:hover { z-index:1; }

/*----------------------------footer----------------------------------*/


footer{width:100%; background:#fff;font-size:11px;}
#footer{ width:100%; background:#fff; color:#000; line-height:1.5em; padding:10px 0;}

#footer .inner{width:1000px; margin:0 auto; text-align:center;}
#footer a{color:#000;}
#footer a:hover{color:#666;}

/*----------------------------content----------------------------------*/
	 
#wrapper{ margin:0 auto; width:100%; }
.wrapper
{
	width:1000px;  
	margin:0 auto; 
	/*padding:0 140px;*/

	/*-webkit-box-shadow: 0px 0px 1px 1px rgba(221, 221, 221, .75);
	-moz-box-shadow: 0px 0px 1px 1px rgba(221, 221, 221, .75);
	box-shadow: 0px 0px 1px 1px rgba(221, 221, 221, .75);*/
} 


.shape{position:absolute; width:337px; height:260px; display:inline-block; }
.shape a{color:#fff;}
.shape a:hover{color:#66ffff;}

.read_btn{color:#fff;}
.read_btn a{color:#fff; background:#000; padding:5px 10px;}
.read_btn a:hover{color:#ff0000; background:#000; text-decoration:none;}

/*.demo
{width:1280px;}*/

.box{margin:10px 10px; padding:10px 10px; border:thin solid #ddd; font-size:15px; text-transform:uppercase; display:inline-block; text-align:center;}

.box p{font-size:12px;text-transform:none; text-align:right}

.box:hover {opacity:0.9;}

.client{float:left; display:inline; border:thin solid #ddd; padding:5px;}
.client:hover{opacity:0.7; cursor:default}

.services{margin-left:20px;}
.services li{display:inline-block; width:200px; list-style:none; text-align:center; line-height:15px; margin-bottom:20px; border:thin solid #ddd; padding:5px;}

.contact{
	border:thick solid #fff;
	border-radius:50%;
	padding:20px;
	width:50px;
	text-align:center;
}

#contact{width:220px; display:inline-block; text-align:center;}



/************************************************ PORTFOLIO STYLE *********************************************/
.block_holder {
    padding: 5px;
    background: #f6f6f6;
    -webkit-box-shadow:  0px 0px 3px 1px rgba(0, 0, 0, 0.15);
    box-shadow:  0px 0px 3px 1px rgba(0, 0, 0, 0.15);
    float: left;
    margin: 1px;
} 

.hover_block {
    position: relative;
    overflow: hidden;
}

.hover_info {
    width: 320px;
    height: 192px;
    position: absolute;
    top: 0;
    left: 0;
}

.hover_info h1 { font-size: 2em; padding: 10px 20px; background: rgba(207, 138, 5, 0.7); color: #E7E7E7; position: absolute; top: 25px; left: -100%; transition: left 200ms linear; -webkit-transition: left 200ms linear; -moz-transition: left 200ms linear; }
.hover_info p { font-size: 1.5em; line-height: 1.4; color: #fff;position: absolute; top: 85px; left: 10%; width: 80%; text-align: center; opacity: 0; transition: opacity 200ms linear; -webkit-transition: opacity 200ms linear; -moz-transition: opacity 200ms linear; }
.hover_info a { font-size: 1.5em; padding: 10px 20px; background: rgba(207, 138, 5, 0.7); color: #E7E7E7; position: absolute; bottom: 25px; right: -100%; }
.hover_info:hover h1 { left: 0; transition-delay: 250ms; -webkit-transition-delay: 250ms; -moz-transition-delay: 250ms; }
.hover_info:hover p { opacity: 1; transition-delay: 600ms; -webkit-transition-delay: 600ms; -moz-transition-delay: 600ms; }
.hover_info:hover a { right: 0; transition: right 200ms linear 700ms, color, background 200ms linear; -webkit-transition: right 200ms linear 700ms, color, background 200ms linear; -moz-transition: right 200ms linear 700ms, color, background 200ms linear; }
.hover_info a:hover { background: rgba(207, 138, 5, 1.0); color: #F7F7F7; }


/*Snake*/
.block_22 .piece_1,
.block_22 .piece_2,
.block_22 .piece_3,
.block_22 .piece_4,
.block_22 .piece_5,
.block_22 .piece_6,
.block_22 .piece_7 {
    background: rgba(0, 0, 0, 0.8);
    position: absolute;
}

.block_22 .piece_1 { width: 0%; height: 25%; left: 0; top: 75%; }
.block_22:hover .piece_1 { width: 100%;
transition: all 250ms linear; 
-webkit-transition: all 250ms linear;  
-moz-transition: all 250ms linear;
}

.block_22 .piece_2 { width: 20%; height: 0%; right: 0; bottom: 25%; }
.block_22:hover .piece_2 { height: 75%; 
transition: all 150ms linear; 
-webkit-transition: all 150ms linear;  
-moz-transition: all 150ms linear;
transition-delay: 250ms; -webkit-transition-delay: 250ms; -moz-transition-delay: 250ms; }

.block_22 .piece_3 { width: 0%; height: 25%; right: 20%; top: 0; }
.block_22:hover .piece_3 { width: 80%;
transition: all 200ms linear; 
-webkit-transition: all 200ms linear;  
-moz-transition: all 200ms linear;
transition-delay: 400ms; -webkit-transition-delay: 400ms; -moz-transition-delay: 400ms; }

.block_22 .piece_4 { width: 20%; height: 0%; left: 0; top: 25%; }
.block_22:hover .piece_4 { height: 50%; 
transition: all 100ms linear; 
-webkit-transition: all 100ms linear;  
-moz-transition: all 100ms linear;
transition-delay: 600ms; -webkit-transition-delay: 600ms; -moz-transition-delay: 600ms; }

.block_22 .piece_5 { width: 0; height: 25%; left: 20%; top: 50%; }
.block_22:hover .piece_5 { width: 60%; 
transition: all 150ms linear; 
-webkit-transition: all 150ms linear;  
-moz-transition: all 150ms linear;
transition-delay: 700ms; -webkit-transition-delay: 700ms; -moz-transition-delay: 700ms; }

.block_22 .piece_6 { width: 20%; height: 0%; right: 20%; bottom: 50%; }
.block_22:hover .piece_6 { height: 25%; 
transition: all 50ms linear; 
-webkit-transition: all 50ms linear;  
-moz-transition: all 50ms linear;
transition-delay: 850ms; -webkit-transition-delay: 850ms; -moz-transition-delay: 850ms; }

.block_22 .piece_7 { width: 0; height: 25%; right: 40%; }
.block_22:hover .piece_7 { width: 40%; top: 25%;
transition: all 100ms linear; 
-webkit-transition: all 100ms linear;  
-moz-transition: all 100ms linear;
transition-delay: 900ms; -webkit-transition-delay: 900ms; -moz-transition-delay: 900ms; }


.block_22:hover h1 { transition-delay: 1.05s; -webkit-transition-delay: 1.05s; -moz-transition-delay: 1.05s; }
.block_22:hover p { transition-delay: 1.35s; -webkit-transition-delay: 1.35s; -moz-transition-delay: 1.35s; }
.block_22:hover a { transition: right 200ms linear 1.45s, color, background 200ms linear; -webkit-transition: right 200ms linear 1.45s, color, background 200ms linear; -moz-transition: right 200ms linear 1.45s, color, background 200ms linear; }


/*****************************************type setting********************************************/

h1{ font-size:30px; color:#af0000; letter-spacing:normal; font-weight:700; line-height:1.0em; text-transform:uppercase;}

h2{ font-size:23px; color:#333; letter-spacing:normal; line-height:1.5em;font-weight:300; text-align:left}

h3{ font-size:15px; font-weight:600;  color:#ff0000; text-align:left}

h4{font-size:15px; font-weight:600; color:#00ff12; text-align:left; padding:5px; background:#000;}

h5{font-size:15px; color:#333; letter-spacing:normal; line-height:1.5em; text-transform:uppercase;font-weight:300; text-align:left}