@charset "UTF-8";
/* CSS Document */

@font-face {
    font-family: 'questrialregular';
    src: url('fonts/questrial-regular-webfont.woff2') format('woff2'),
         url('fonts/questrial-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.box {
	width: 300px;
	height: 460px;
	position: relative;
	background: rgba(255,255,255,1);
	display: inline-block;
	margin: 0 10px 10px;
	cursor: pointer;
	color: #5193ce;
	box-shadow: inset 0 0 0 3px #5193ce;
	-webkit-transition: background 0.4s 0.5s;
	transition: background 0.4s 0.5s;
	padding: 0 20px;
	vertical-align: top;
}

#book{
	margin-top: 40px;
	height: 60px;
}

.box:hover {
	background: rgba(255,255,255,0);
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}

.box span {
    font-family: 'questrialregular';
	display: block;
	letter-spacing: 1px;
	font-size: 24px;
	padding: 5px;
}

.box span#book-now {
    font-family: 'questrialregular';
	display: block;
	letter-spacing: 1px;
	font-size: 40px;
	padding: 7px 5px 5px;
}

.box span {
	-webkit-transition: color 0.4s 0.5s;
	transition: color 0.4s 0.5s;
}

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





@media screen and (min-width:0) and (max-width:399px){
#book{
	margin-top: 20px;
	width: 230px;
	height: 60px;
}

.box span#book-now {
	font-size: 30px;
	padding-top:10px;
}
	
}