.box {
	width: 270px;
	height: 365px;
	position: relative;
	background: #ECECEC;
	display: inline-block;
	margin: 0;
	cursor: pointer;
	color: #2c3e50;
	/*box-shadow: inset 0 0 0 2px #ECECEC;*/
	-webkit-transition: background 0.4s 0.5s;
	transition: background 0.4s 0.5s;
   margin-right:15px;
}
.box_3 {margin-right:0;}

.box>div {background:#333e48;margin:5px;padding:5px;width:260px;height:355px;display:block;-webkit-transition: background 0.5s 0.2s;transition: background 0.5s 0.2s;}
.box:hover>div {background:#ECECEC;}

.box>div>div {border:2px solid #fff;width:250px;height:345px;display:block;-webkit-transition: border 0.5s 0.2s;transition: border 0.5s 0.2s;}
.box:hover>div>div {border:2px solid #333e48;}

.box a {width:250px;height:345px;display:block;background-image:url(../img/servicos/desenvolvimento.png);color:#fff;padding-top:160px;background-repeat: no-repeat;background-position:top 50px center;}
.box a.selected {background-image:url(../img/servicos/desenvolvimento_over.png);}
.box_2 a {background-image:url(../img/servicos/consultoria.png);}
.box_2 a.selected {background-image:url(../img/servicos/consultoria_over.png);}
.box_3 a {background-image:url(../img/servicos/implementacao.png);}
.box_3 a.selected {background-image:url(../img/servicos/implementacao_over.png);}

.box h4{text-transform:uppercase;text-align:center;font-size:14px;-webkit-transition: color 0.5s 0.2s;transition: color 0.5s 0.2s;}
.box p {text-align:center;font-size:13px;padding:0 25px;color:#b8bbbd;font-weight:300;line-height:1.2;-webkit-transition: color 0.5s 0.2s;transition: color 0.5s 0.2s;}
.box:hover h4, .box:hover p {color:#333e48;}
.box span {width:250px;height:17px;display:block;margin-top:45px;background:url(../img/servicos/seta_over2.png) no-repeat center center;}

.box svg {
	position: absolute;
	top: 0;
	left: 0;
}

.box svg line {
	stroke-width: 3;
	stroke: #fff;
	fill: none;
	-webkit-transition: all .8s ease-in-out;
	transition: all .8s ease-in-out;
}

.box:hover svg line {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

.box svg line.top,
.box svg line.bottom {
	stroke-dasharray: 270 330; 
}

.box svg line.left,
.box svg line.right {
	stroke-dasharray: 490 400;
}

.box:hover svg line.top {
	-webkit-transform: translateX(-600px);
	transform: translateX(-600px);
}

.box:hover svg line.bottom {
	-webkit-transform: translateX(600px);
	transform: translateX(600px);
}

.box:hover svg line.left {
	-webkit-transform: translateY(920px);
	transform: translateY(920px);
}

.box:hover svg line.right {
	-webkit-transform: translateY(-920px);
	transform: translateY(-920px);
}