body  {
	background: #F6F6F6;
	margin: 0px 0px 0px 0px;
	font: 100 13px/16px 'Roboto', sans-serif;
	color: #666;
	cursor: default;
}
   
li{
   list-style-position: inside;
   list-style-type: square;
}
a{
	text-decoration: none;
}

b, .bold{
	font-weight: 500;
}

input,textarea,select {
	margin: 0px;
	padding: 0 0 0 5px;
	width: 100%;
	font: 11px/13px "Verdana", Verdana;
	color: #777;
	outline: none;
	border: 2px solid #999;
	border-radius: 4px;
}
	input{
	   height: 24px;
	}
	select{
		height: 28px;
	}
	input:focus, textarea:focus, select:focus{
		border-color: #27337D;
	}
.button{
	display: inline-block;
	width: 100%;
	background: #27337D;
	color: #FFF;
	text-align: center;
	line-height: 30px;
	cursor: pointer;
}


.automargin{
	position: relative;
    margin: 0 auto;
    width: 900px;
}

#head{
	height: 100px;
	border-bottom: 8px solid #27337D;
}
	#head a{ float: left; }
	#logo{
		position: relative;
		float: left;
		top: 23px;
		width: 146px; height: 53px;
		background: url(logo.png) no-repeat;
		cursor: pointer;
	}
	#menu{
		position: relative;
		float: left;
		margin: 0 0 0 50px;
	}
		#menu .item{
			padding: 0 5px;
			height: 100px;
			color: #27337D; 
		}
			#menu .item .container{
				min-width: 70px;
				text-align: center;
			}
			
			#menu .item .icon{
				margin: 24px auto 0;
				display: inline-block;
				width: 48px; height: 48px;
				background: url(sprites.png) 0 0 no-repeat;
			}
				#menu .item.downloads .icon{
					background-position: -48px 0;
				}			
				#menu .item.contact .icon{
					background-position: -96px 0;
				}
			#menu .item .label{
				padding: 5px 0 0;
			}
			
		#menu .item:hover{
			background: #27337D;
		}
			#menu .item:hover .icon{
				filter: grayscale(1) brightness(20);
			}
			#menu .item:hover .label{
				color: #FFF;
			}
	#language{
		float: right;
		width: 80px; height: 100px;
		color: #27337D;
		cursor: pointer;
	}
		#language .title{
			padding: 10px 0 0 0;
			width: 80px; height: 90px;
			text-align: center;
		}
			#language:hover .title{
				display: none;
			}
				#language .title .arrow{
					margin: 0 auto;
					width: 11px; height: 5px;
					background: url(sprites.png) 0 -48px no-repeat;
				}
				#language .title .icon{
					margin: 5px 0 0 14px;
					width: 48px; height: 48px;
					border-radius: 50px;
					border: 2px solid #27337D;
				}
					#language .title .icon .background{
						margin: 2px 0 0 2px;
						width: 44px; height: 44px;
						border-radius: 50px;
						background: url(flags.png) 0 0 no-repeat;
						overflow: hidden;
					}			
						#language .title .icon .background.en{ background-position: -44px 0; }
			
		#language .container{
			padding: 10px 0 0 0;
			width: 80px; height: 90px;
			display: none;
		}
			#language:hover .container{
				display: block;
			}
			#language a{
				color: #27337D;
				text-decoration: none;
				margin: 0 0 0 -10px;
			}	
			#language a:hover{
				background: #27337D;
				color: #FFF; 
			}
				#language a .icon{
					margin: 0 5px 2px 0;
					float: left;
					width: 24px; height: 16px;
					background: url(sprites.png) -24px -48px no-repeat;
					line-height: 24px;
				}
				#language a .icon.en{
					background-position: -48px -48px;
				}
	
#body{
	margin-bottom: 30px;
}

table{
	width: 100%;
	border-spacing: 0;
    border-collapse: separate;
	padding: 0;
}
	td{
		text-align: left;
		vertical-align: top;
	}
table.form{
	border-spacing: 5px;
	padding: 10px 0;
}


.column0{ padding-right: 15px; }

.products table{
	margin: 15px 0 15px;
	background: #FFF;
	overflow: hidden;
	border: 1px solid #E6E6E6;
}
	.products .item td{
		padding: 10px;
		color: #666;
	}
	.products .item .title{
		padding: 2px 0 0 10px;
		background: #E6E6E6;
		line-height: 32px;
		color: #27337D;
	}
	.products .item .readmore{
		float: right;
		padding: 0 15px;
		background: #D5D5D5;
		line-height: 32px;
		color: #27337D;
	}

.product {
	background: #27337D;
}
	.product h1{
		margin: 0;
		padding: 20px 0 10px;
		color: #27337D;
		font-weight: 500;
		font-size: 22px;
		line-height: 22px;
	}
		
	.product .resume{
		padding: 0 55px;
		color: #FFF;
	}
		.product .resume .title{
			padding-top: 20px;
			font-size: 38px;
			line-height: 38px;
		}
		.product .resume .subtitle{
			padding: 10px 0;
			font-weight: 400;
			font-size: 18px;
			line-height: 18px;
		}
		.product .resume .text{
			padding: 15px 0 15px 0;
			font-weight: 100;
		}
		.product .box{
			float: right;
			display: block;
			padding: 0 0 0 40px;
			height: 200px;
		}
		
	.product .fan{
		position: relative; 
	}
		.product .fan .background1{ height: 140px; }
		.product .fan .background2{
			background: #FFF; height: 120px; 
			border: 1px solid #E6E6E6;
			border-width: 0 1px;
		}
		.product .fan .container{
			position: absolute;
			top: 30px; left: 170px;
			width: 300px; height: 220px;
		}
			.product .fan .container .card{
				position: absolute;
				height: 220px;
				z-index: 50;
			}
				.product .fan .container .card img{
					height: 100%;
				}
			.product .fan .container .card.n1, .product .fan .container .card.n3{
				height: 180px;
				z-index: 10;
			}
			.product .fan .container .card.n1{
				margin: 20px 0 0 -110px;
				transform: perspective( 600px ) rotateY( 20deg );
			}

			.product .fan .container .card.n3{
				margin: 20px 0 0 180px;
				transform: perspective( 600px ) rotateY( -20deg );
			}
			
				.product.zksmallbusiness .fan .container .card.n3{
					margin-left: 205px;
				}

			.product .fan .container .card.n2::before{
				content: "";
				position: absolute;
				width: 100%; height: 90%; bottom: 5px;
				box-shadow: 0 0 25px rgba(0,0,0,0.75);
				z-index: -1;
			}
			.product .fan .container .card.n1::before, .product .fan .container .card.n3::before{
				position: absolute;
				bottom: 5px;
				width: 100%; height: 32%;
				content: "";
				transform-origin: 0 100%;
				z-index: -1;
			}
			.product .fan .container .card.n1::before{
				left: 80px;
				box-shadow: -86px 0 17px rgba(0,0,0,0.25);
				transform: skew(26deg);
			}
			.product .fan .container .card.n3::before{
				left: -80px;
				box-shadow: 85px 0 15px rgba(0,0,0,0.25);
				transform: skew(-26deg);
			}
	.product .features{
		padding: 0 45px;
		background: #FFF;
		color: #000;
		border: 1px solid #E6E6E6;
		border-width: 0 1px;
	}
		.product .features .item{
			padding: 10px 0;
		}
			.product .features .item .title, .product .features .item .text{
				margin: 0 0 0 42px;
			}
			.product .features .item .title{				
				color: #27337D;
				font-weight: 400;
			}
				.product .features .item .icon{
					position: absolute;
					width: 32px; height: 32px;
					background: url(sprites.png) -144px 0;
				}
					.product .features .item .icon.datos{ background-position: -144px 0; }
					.product .features .item .icon.empleado{ background-position: -144px -32px; }
					.product .features .item .icon.horario{ background-position: -176px 0px; }
					.product .features .item .icon.calendario{ background-position: -176px -32px; }
					.product .features .item .icon.incidencia{ background-position: -208px 0px; }
					.product .features .item .icon.fichaje{ background-position: -208px -32px; }
					.product .features .item .icon.coste{ background-position: -240px 0px; }
					.product .features .item .icon.listado{ background-position: -240px -32px; }
					.product .features .item .icon.backup{ background-position: -272px 0px; }
					.product .features .item .icon.varios{ background-position: -272px -32px; }
					.product .features .item .icon.terminal{ background-position: -304px 0px; }
					.product .features .item .icon.idioma{ background-position: -304px -32px; }
					.product .features .item .icon.formula{ background-position: -336px 0px; }
					.product .features .item .icon.balance{ background-position: -336px -32px; }
	
	.product .screenshots{
		padding: 10px 45px 30px;
		background: #FFF;
		border: 1px solid #E6E6E6;
		border-width: 0 1px;		
	}
		.product .screenshots img{
			display: inline-block;
			margin: 5px;
			width: 144px;
			cursor: pointer;
		}
			.product .screenshots img:hover{
				margin: 1px;
				border: 4px solid #79BC28;
			}	
	.product .requisites{
		padding: 0 45px 30px;
		color: #FFF;
	}
		.product .requisites h1{
			color: #FFF;
		}
		.product .requisites .text{
			padding: 0 10px;
			color: #FFF;
		}
	

.group{
	padding: 20px 45px 30px;
	background: #27337D;
	color: #FFF;
}
	.group>.title{
		font-size: 38px;
		line-height: 38px;		
	}
	.group>.text{
		padding: 0 0 10px;
	}
		.group .item{
			padding: 10px 10px;
		}
			.group .item .title{
				font-weight: 500;
			}
			.group .item .text{
				padding-bottom: 5px;
			}
			.group .item .note{
				margin: -7px 0 9px;
				font-size: 10px;
				line-height: 10px;
			}
	.group.style0{
		padding-top: 0;
	}
		
		.group.style0:first-child{
			padding-top: 20px;
		}
		.group.style0 .item{
			padding-top: 0;
		}
		.group.style0 .button{
			background: #18204e;
			color: #FFF;
		}
	.group.style1{
		background: #FFF;
		color: #000;
	}
	.group.style2{
		background: #E6E6E6;
		color: #27337D;
	}
		.group.style2 .button{
			background: #CCC;
			color: #27337D;
		}
			
			
	#modal{
		position: fixed;
		left: 0; top: 0;
		width: 100%; height: 100%;
		background: #000;
		cursor: pointer;
		z-index: 100;
		opacity: 0.5;
	}
	
	#modalWindow{
		position: fixed;
		left: 50%; top: 0;
		cursor: pointer;
		z-index: 100;
	}
		#modalWindow img{
			left: -50%;
			position: relative; 
		}