.box {
	width: 150px;
	
height: 250px;
	
position: relative;
	
background: rgba(176,226,225,1);
    
	display: inline-block;
	
margin: 0 5px;
	
cursor: pointer;
	color: #2c3e50;
	

box-shadow: inset 0 0 0 3px #2c3e50;

	-webkit-transition: background 0.4s 0.5s;

	transition: background 0.4s 0.5s;
}



.box:hover {
	background: rgba(255,255,255,0);

	-webkit-transition-delay: 0s;
	
transition-delay: 0s;
}



.box h3 {
	font-family: "Ruthie", cursive;
	
font-size: 180px;

	line-height: 370px;

	margin: 0;

	font-weight: 00;

	width: 100%;
}



.box span {
	display: block;

	font-weight: 400;

	text-transform: uppercase;

	letter-spacing: 1px;

	font-size: 3px;

	padding: 20px;
}



.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);
}