.container {
   width:50px;
   height:300px;
}

.homeL1 {
    position:absolute;
    top:0;
    left:50%;
    border-left:2px solid #9e4535;
    width:0;
    height: 0;
    animation: line 3s linear forwards;
}

@keyframes line {
from {
    height:0;
}
to {
    height:80%;
}
}

.homeL2 {
    position:absolute;
    top:0;
    left:50%;
    border-left:2px solid #9e4535;
    width:0;
    height: 0;
    animation: line2 8s linear forwards;
}

@keyframes line2 {
from {
    height:0;
}
to {
    height:1000px;
} 
}

.homeL3 {
position:absolute;
top:0;
left:50%;
border-left:2px solid #F0EEE8;
width:0;
height: 0;
animation: line3 5s linear forwards;
}

@keyframes line3 {
from {
    height:0;
}
to {
    height:600px;
} 
}

.homeL4 {
position:absolute;
top:0;
left:50%;
border-left:2px solid #F0EEE8;
width:0;
height: 0;
animation: line4 3s linear forwards;
animation-delay: 4s;
}

@keyframes line4 {
from {
    height:0;
}
to {
    height:320px;
} 
}

.homeL5 {
position:absolute;
left:0;
border-top:2px solid #F0EEE8;
width:0;
height: 0;
animation: line5 3s linear forwards;
}

@keyframes line5 {
from {
    width:0;
}
to {
    width:90%;
}
}

.homeL6 {
position:absolute;
right:0;
border-top:2px solid #F0EEE8;
width:0;
height: 0;
animation: line6 3s linear forwards;
}

@keyframes line6 {
from {
    width:0;
}
to {
    width:90%;
}
}

.homeL7 {
    position:absolute;
    top:0;
    left:50%;
    border-left:2px solid #9e4535;
    width:0;
    height: 0;
    animation: line7 3s linear forwards;
}

@keyframes line7 {
from {
    height:0;
}
to {
    height:80%;
}
}