body{
	height: 100%;
    margin: 0;
    font: 400 15px/1.8 "Lato", sans-serif;
    color: #EEE;
}

#bgImg{
	display: block;
	background-image: url(bgImage1.jpg);
    min-height: 200px;
}

h2
{
	text-rendering:inherit;
}

.parallax
{
	position: relative;
    opacity: 0.65;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


.caption {
    position: absolute;
    left: 0;
	top: 60px;
    width: 100%;
    text-align: center;
    color: #000;
}

.caption span.border {
    color: #fff;
    padding: 18px;
    font-size: 40px;
    letter-spacing: 5px;

}

#conentPanel1{
	color: #777;
	background-color:#E6E6E6;
}

#mpcGraph {
	width: 50%; 
	height: 300px;
	margin: auto;
	color: #FFF;
}

.contentPanel{
	text-align: center;
    display: flex;
	padding: 20px 0px 20px 0px;
	text-align: justify;
	justify-content: center;
}


#conentPanel2{
	padding: 20px 0px 20px 0px;
	background-color: #282E34;
}

#bgImg2{
	background-image:url(ZC_System.jpg);
	height: 500px;
	z-index:1;
}

#b3{
	z-index:999;
	color: #000;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	text-align:center;
	padding: 20px 0px 20px 0px;
	
}

#p3{
	color: #000;
	font-size: 16px;
	max-width:800px;
	margin: 10px auto;
	align-self: center;
}


#conentPanel3{
	padding: 20px 0px 20px 0px;
	color: #777;
	background: radial-gradient( #FFFFFF 10%, #E6E6E6 80%);
	width: 100%;
	text-align:center;
}

#conentPanel4{
	padding: 20px 0px 20px 0px;
	background-color: #282E34;
	color: #FFF;
}

#conentPanel6{
	padding: 10px 0px 10px 0px;
    color: #777;
    width: 100%;
    text-align: center;
    box-shadow: 0px 0px 20px rgba(0,0,0,0.1);
    border: 1px solid #FFF;
    background: linear-gradient(#EEE 5%, #FFF 35%, #FFF 50%, #EEE 100%);
}

#sysPic{
	max-width:90%;
}


#b4{
	width:100%;
	color: #111;
}

#


#topBannerContainer
{
	text-align: center;
    height: 200px;
}

#p1{
    margin: 10px;
    margin-left: 20px;
    text-align: center;
	font-size:16px;
	color: #111;
	max-width:800px;
	margin: auto;
	align-self: center;
}

#p2{
	color: #FFF;
	
}

#p5{
	color: #FFF;
}

.bannerText{
	letter-spacing: 5px;
    font: 25px "Lato", sans-serif;
	text-align:center;
}

.pDiv
{
	font-size: 16px;
	margin: 10px auto;
	max-width:800px;
	align-self: center;
}

#b2{
	color: #FFF;
}

#zcSystem{
	display:inline-block;
}

h3{
	letter-spacing: 5px;
    text-transform: uppercase;
    font: 25px "Lato", sans-serif;
    color: #111;
}

#textGlow{
	width: 60%;	
	height:300px;
	display: flex;
	align-self: center;
	background-image: radial-gradient(rgba(255,255,255,1) 10%, rgba(0,0,0,0) 80%);
}


#textBlock1{
	
    position: relative;
    float: left;
	align-self: center;
	width:100%;
	vertical-align:middle;	
}

#textBlock2{
	
    position: relative;
    float: left;
	align-self: center;
	width:100%;
	vertical-align:middle;	
}

.textBlock{	
    position: relative;
    float: left;
	align-self: center;
	width:100%;
	vertical-align:middle;	
}




#zcPic{
	width:100%;
	vertical-align:middle;
}

#zcWraper{
	max-width: 30%;
	align-self: center;
	z-index:10;
}

#subText{
    color: #FFF;
    font: 12px "Lato", sans-serif;
    letter-spacing: 3px;
    margin: 6px;
    margin-top: -5px;
    text-decoration: underline;
    display: block;
}

#textBackground{
	display:inline-block;
	background-color: rgba(0,0,0,0.7);
} 

.specTable
{
	background: #f5f5f5;
	border-collapse: separate;
	box-shadow: inset 0 1px 0 #fff;
	font-size: 12px;
	line-height: 24px;
	margin: 30px auto;
	text-align: left;
	width: 800px;
}

.specTable th {
	
	background: linear-gradient(#777, #444);
	border-left: 1px solid #555;
	border-right: 1px solid #777;
	border-top: 1px solid #555;
	border-bottom: 1px solid #333;
	box-shadow: inset 0 1px 0 #999;
	color: #fff;
  font-weight: bold;
	padding: 10px 15px;
	position: relative;
	text-shadow: 0 1px 0 #000;	
}

.specTable th:after {
	background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.08));
	content: '';
	display: block;
	height: 25%;
	left: 0;
	margin: 1px 0 0 0;
	position: absolute;
	top: 25%;
	width: 100%;
}

.specTable th:first-child {
	border-left: 1px solid #777;	
	box-shadow: inset 1px 1px 0 #999;
}

.specTable th:last-child {
	box-shadow: inset -1px 1px 0 #999;
}

.specTable td {
	border-right: 1px solid #fff;
	border-left: 1px solid #e8e8e8;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #e8e8e8;
	padding: 10px 15px;
	position: relative;
	transition: all 300ms;
}

.specTable td:first-child {
	box-shadow: inset 1px 0 0 #fff;
}	

.specTable td:last-child {
	border-right: 1px solid #e8e8e8;
	box-shadow: inset -1px 0 0 #fff;
}	

.specTable tr {
}

.specTable tr:nth-child(odd) td {
	background: #f1f1f1;	
}

#buyNow
{
	min-width: 150px;
    min-height: 40px;
    box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.32),inset 0px 20px 0px rgba(255,255,255,0.05);
    background: radial-gradient(farthest-corner at 50% 0px ,rgba(255,255,255,0.1) 10%, rgba(0,0,0,0.1) 92%);
    border: 1px solid rgba(255,255,255,0.15);
    background-color: #444;
    color: #fff;
    border-radius: 10px;
    cursor: pointer;
    margin: 10px;
    font-size: 16px;
    font-weight: bold;
    text-shadow: 1px 1px 0px #000;
    outline: none;
}


.specTable tr:last-of-type td {
	box-shadow: inset 0 -1px 0 #fff; 
}

.specTable tr:last-of-type td:first-child {
	box-shadow: inset 1px -1px 0 #fff;
}	

.specTable tr:last-of-type td:last-child {
	box-shadow: inset -1px -1px 0 #fff;
}