/* -- BAR -- */

/* PLACE INSIDE ELEMENT:

	$content .= "<div class='bar top'></div>";
    $content .= "<div class='bar right delay'></div>";
    $content .= "<div class='bar bottom delay'></div>";
    $content .= "<div class='bar left'></div>";
    
*/
   
.bar {
	position: absolute;
	width: 50px;
	height: 5px;
	background: #fff;
	transition: all 1s linear;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}
.bar.delay {
	animation-delay: 0.5s;
	-webkit-animation-delay: 0.5s;
}
.top {
	top: -5px;
	left: -5px;
}
.right {
	top: 18px;
	right: -28px;
	transform: rotate(90deg);
}
.bottom {
	bottom: -5px;
	left: -5px;
}
.left {
	top: 18px;
	left: -28px;
	transform: rotate(90deg);
}
@-webkit-keyframes h-move {
	0% {
		left: -5px;
	}
	100% {
		left: 228px;
	}
}
@keyframes h-move {
	0% {
		left: -5px;
	}
	100% {
		left: 228px;
	}
}
.top, .bottom {
	-webkit-animation-name: h-move;
	animation-name: h-move;
}
@-webkit-keyframes v-move {
	0% {
		top: -5px;
	}
	100% {
		top:472px;
	}
}
@keyframes v-move {
	0% {
		top: -5px;
	}
	100% {
		top:472px;
	}
}
.right, .left {
	-webkit-animation-name: v-move;
	animation-name: v-move;
}
/* -- END BAR -- */

/* -- BOX -- */
@keyframes bg {
    0% {
        background-size:    0 3px,
                            3px 0,
                            0 3px,
                            3px 0;
    }
    25% {
        background-size:    100% 3px,
                            3px 0,
                            0 3px,
                            3px 0;
    }
    50% {
        background-size:    100% 3px,
                            3px 100%,
                            0 3px,
                            3px 0;
    }
    75% {
        background-size:    100% 3px,
                            3px 100%,
                            100% 3px,
                            3px 0;
    }
    100% {
        background-size:    100% 3px,
                            3px 100%,
                            100% 3px,
                            3px 100%;
    }
}

.box {
    margin: 10px auto;
    padding: 3px;
    
    background-repeat: no-repeat;
    background-image:   linear-gradient(to right, #C9C9C9 100%, #C9C9C9 100%),
                        linear-gradient(to bottom, #C9C9C9 100%, #C9C9C9 100%),
                        linear-gradient(to right, #C9C9C9 100%, #C9C9C9 100%),
                        linear-gradient(to bottom, #C9C9C9 100%, #C9C9C9 100%);
    background-size:    100% 3px,
                        3px 100%,
                        100% 3px,
                        3px 100%;
    background-position:    0 0,
                            100% 0,
                            100% 100%,
                            0 100%;
    animation: bg 1.25s cubic-bezier(0.19, 1, 0.22, 1) 1;
    animation-play-state: paused;
}

.box:hover {
    animation-play-state: running;
}
/* -- END BOX -- */