a{
  position:absolute;
  font-size:15px;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
  animation: box-visible 1s ease 5.5s alternate both running;
  text-decoration:none;
}
.c1{
  top:-50px;
  left:25px;
}
.c2{
  top:40px;
  left:150px;
}
.c3{
  top:140px;
  left:28px;
}
.c4{
  top:40px;
  left:-80px;
}
.canvas {
  position: absolute;
  left:50%;
  top:50%;
  transform: translateX(-50px) scale(1.3);
}
.line {
  background: #000;
}

.line1,
.line3 {
  width: 1px;
  height: 100px;
}

.line2,
.line4 {
  width: 100px;
  height: 1px;
}

.line1 {
  animation: transform1 2s ease 0s alternate forwards running,
    line-visible 1s ease 2s alternate forwards;
}

.line2 {
  animation: transform2 2s ease 0s alternate forwards running,
    line-visible 1s ease 2s alternate forwards;
}

.line3 {
  position: relative;
  top: -100px;
  left: 100px;
  animation: transform3 2s ease 0s alternate forwards running,
    line-visible 1s ease 2s alternate forwards;
}

.line4 {
  position: relative;
  top: -200.5px;
  animation: transform4 2s ease 0s alternate forwards running,
    line-visible 1s ease 2s alternate forwards;
}

.box {
  position: relative;
  top: -201px;
  width: 100px;
  height: 100px;
  background: #000;
  animation: box-visible 0.8s ease 2s alternate backwards running,
    box-rotation 1s ease 2.8s alternate forwards,
    line-visible 2s ease 5s alternate forwards;
}
.logo{
  position:absolute;
  top:-20px;
  left:-20px;
  width:141px;
  height:141px;
  animation: box-visible 1s ease 4s alternate both running;
}
.visible{
  animation: line-visible 1.5s ease 0s alternate both running;
  /*animation: line-visible 0.5s ease 0s altenate both runing;*/
}
@keyframes transform1 {
  0% {
    transform: translateY(300px);
  }
}

@keyframes transform2 {
  0% {
    transform: translateX(300px);
  }
}

@keyframes transform3 {
  0% {
    transform: translateY(-300px);
  }
}

@keyframes transform4 {
  0% {
    transform: translateX(-300px);
  }
}

@keyframes box-visible {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes box-rotation{
  100%{
    transform:rotate(45deg);
  }
}
@keyframes line-visible{
  100%{
    opacity:0;
  }
}