/*  VARS: */
:root {
  --border-width: 1px;
  --minus-border-width: -1px;
  --animation-duration: 2.8s;
  /* --animation-delay: calc(var(--animation-duration) * 0.825); */
  /* --border-length: 62.5px;
  --border-length: 100px; */
  --border-color: rgba(255, 255, 255, 0.5);
  --animated-border-color: rgba(255, 255, 255, .1);
}

/* STYLES: */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
}

/*
.wrapper {
  margin: 50px auto;
  display: block;

} */

.box-outer {
  width: 100%;
  height: 100%;
}

.main_box {
  width: 100%;
  height: 100%;
  position: relative;
  background: transparent;
  border-width: var(--border-width);
  border-style: solid;
  border-color: var(--border-color);
}

.bar {
  position: absolute;
  width: 25%;
  height: var(--border-width);
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  background-color: var(--animated-border-color);
  /* transition: all 2.8s linear; */
  -webkit-animation-duration: var(--animation-duration);
  animation-duration: var(--animation-duration);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.5), 0 0 6px rgba(255, 255, 255, 0.5)/*,  0 0 12px rgba(255, 255, 255, 0.795)*/;
}
  header .bar.top {
    transform: translateY(101px);
    animation-delay: 1.9s;
  }
  footer .bar.bottom {
    animation-delay: 2.8s;
    transform: translateY(-101px);
  }
  header .bar {
    animation-duration: 2.8s;
  }

.bar.left, .bar.right {
  width: var(--border-width);
  height: 25%;
}

.bar.delay{
  animation-delay: 3.17s;
  -webkit-animation-delay: 3.17s;
  animation-delay: calc(var(--animation-duration)  * 0.825);
}

  .top {
    top: var(--minus-border-width);
    right: 100%;
  }

  .right{
    bottom: 0;
    right:var(--minus-border-width);
  }

  .bottom {
    bottom: var(--minus-border-width);
    right: 100%
  }

  .left {
    bottom: 100%;
    left: var(--minus-border-width);
  }

@keyframes h-move {
  0% {
    right: calc(100% + var(--border-width));
    left: var(--minus-border-width);
    width: 0;
  }
  20% {
    width: 25%;
    left: var(--minus-border-width);
    /* left: calc(0 + var(--border-width));; */
  }

  80% {
    right: var(--minus-border-width);
    width: 25%;
  }
  100% {
    width: 0;
    right: var(--minus-border-width);
    left: calc(100%  + var(--border-width));
  }
}

.top, .bottom {
  -webkit-animation-name: h-move;
  animation-name: h-move;
}


@keyframes v-move {
  0% {
    top: var(--minus-border-width);
    bottom: calc(100% + var(--border-width));
    height: 0;
  }
  20% {
    top: var(--minus-border-width);
    height: 25%;
  }

  80% {
    height: 25%;
    bottom: var(--minus-border-width);
  }
  100% {
    top: calc(100% + var(--border-width));
    bottom: var(--minus-border-width);
    height: 0;
  }
}

.right, .left  {
  -webkit-animation-name: v-move;
  animation-name: v-move;
}