.box {/* width: 250px; */min-height: 150px;position: relative;background: rgba(255,255,255,1);display: inline-block;margin: 20px 0px;cursor: pointer;color: #2c3e50;box-shadow: inset 0 0 0 4px #f3f2f3;-webkit-transition: background 0.4s 0.5s;transition: background 0.4s 0.5s;padding-left: 10px;padding-right: 10px;padding-top: 15px !important;}
.box:hover { background: rgba(255,255,255,0); -webkit-transition-delay: 0s; transition-delay: 0s; box-shadow: inset 0 0 0 3px #f90 }
.box h3 { font-size: 180px; line-height: 370px; margin: 0; font-weight: 400; width: 100%; }
.box h2 { font-size: 14px !important; text-transform: none; color: #333 !important; margin: 0 !important }
.box span { display: block; font-weight: 400; text-transform: uppercase; letter-spacing: 1px; font-size: 13px; padding: 5px; }
.box h3, .box span { -webkit-transition: color 0.4s 0.5s; transition: color 0.4s 0.5s; }
.box:hover h3, .box:hover span { color: #fff; -webkit-transition-delay: 0s; transition-delay: 0s; }
.box svg { position: absolute; top: 0; left: 0; }
.box svg line { stroke-width: 3; stroke: #ecf0f1; 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: 330 240; }
.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); }
/* Alternatives */

/* Color */
.demo-2 .box { box-shadow: inset 0 0 0 10px #2c3e50; }
.demo-2 .box:hover h3, .demo-2 .box:hover span { color: #fe6f83; }
.demo-2 .box svg line { stroke-width: 8; }
.demo-2 .box:hover svg line { stroke: #fe6f83; }
/* Frame */
.demo-3 .box { background: rgba(0,0,0,0); color: #fff; box-shadow: none; -webkit-transition: background 0.3s; transition: background 0.3s; }
.demo-3 .box:hover { background: rgba(0,0,0,0.4); }
.demo-3 .box h3, .demo-3 .box span { -webkit-transition: none; transition: none; }
.demo-3 .box svg line { -webkit-transition: all .5s; transition: all .5s; }
.demo-3 .box:hover svg line { stroke-width: 10; -webkit-transition-delay: 0s; transition-delay: 0s; }
.demo-3 .box:hover svg line.top { -webkit-transform: translateX(-300px); transform: translateX(-300px); }
.demo-3 .box:hover svg line.bottom { -webkit-transform: translateX(300px); transform: translateX(300px); }
.demo-3 .box:hover svg line.left { -webkit-transform: translateY(460px); transform: translateY(460px); }
.demo-3 .box:hover svg line.right { -webkit-transform: translateY(-460px); transform: translateY(-460px); }
/* Spin */
.demo-4 .box { box-shadow: none; background: rgba(0,0,0,0.4); -webkit-transition: none; transition: none; color: #fff; }
.demo-4 .box h3, .demo-4 .box span { -webkit-transform: scale(0.9); transform: scale(0.9); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; }
.demo-4 .box:hover h3, .demo-4 .box:hover span { -webkit-transform: scale(1); transform: scale(1); }
.demo-4 .box svg line { stroke-width: 30; -webkit-transition: all .4s; transition: all .4s; }
.demo-4 .box:hover svg line { -webkit-transition-delay: 0s; transition-delay: 0s; }
.demo-4 .box:hover svg line { stroke-width: 0; }
.demo-4 .box svg line.top, .demo-4 .box svg line.bottom { stroke-dasharray: 300; }
.demo-4 .box svg line.left, .demo-4 .box svg line.right { stroke-dasharray: 460; }
.demo-4 .box:hover svg line.top { -webkit-transform: translateX(-300px); transform: translateX(-300px); }
.demo-4 .box:hover svg line.bottom { -webkit-transform: translateX(300px); transform: translateX(300px); }
.demo-4 .box:hover svg line.left { -webkit-transform: translateY(460px); transform: translateY(460px); }
.demo-4 .box:hover svg line.right { -webkit-transform: translateY(-460px); transform: translateY(-460px); }
@media (max-width:1000px) {
	.box svg line { stroke-width: 3; stroke: none; fill: none; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; }
	
}