#triangle-spawn li {
    position: absolute;
    top: 30%;
    left: 700px;
    margin:0;
    opacity:1;
    width: 10px;
    height: 10px;
    background:#5ca9ff;
    border-radius:100%;
    animation-timing-function: linear;
    animation-direction: normal;
    animation-iteration-count: infinite;
}

#directional-arrow-in{
    position:absolute;
    z-index:2;
    width: 0; 
    height: 0;
    top:25%;
    left:95%; 
	border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-right: 20px solid #f68935;
}

.stripe {
    width: 100%;
    height: 100%;
    transform: translateY(100%) skewX(-20deg);
    position: relative;
    animation: stripe 1s forwards;
    animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}



.shift-arrow-in{
    top:86% !important;
    left:89% !important;
}

#directional-arrow-out{
    position:absolute;
    z-index:2;
    width: 0; 
    height: 0;
    top:81.5%;
    left:89%; 
	border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 20px solid #f68935;
}

.shift-arrow-out{
    top:3% !important;
    left:91.2% !important;
}

.about-us-header {
    transform: rotateX(25deg);
    background: white;
    position: absolute;
    top: -500px;
    width: 100%;
    height: 1000px;
    z-index: -1;
}

.about-us-header::after {
    content: "";
    left: 0;
    right: 0;
    position: absolute;
    height: 100%;
    background-image: url("scroll-image.jpg");
    background-size: 100% 1000px;
    background-position:0 0;
    background-repeat: repeat-y;
    animation: scroll-image 40s linear infinite;
}

#about-svg svg{
    width: 500px;
    height: 500px;
}

.about-us-body .cap {
    animation: cap-animation 30s linear infinite;
    opacity:0;
}

.uk-accordion .uk-open span svg{
    transform: rotateZ(90deg);
}

#cap1{
    animation-delay:0s;
}
#cap2{
    animation-delay:5s;
}
#cap3{
    animation-delay:10s;
}
#cap4{
    animation-delay:15s;
}
#cap5{
    animation-delay:20s;
}
#cap6{
    animation-delay:25s;
}

@keyframes stripe {
0%{transform:translateY(100%) skewX(-20deg);}
100%{transform:translateY(0) skewX(-20deg)}
}

@keyframes scroll-image {
	0% { background-position: 0 0; }
	100% { background-position: 0 -1000px; }
}

@keyframes cap-animation {
    0% { transform:translateY(100px); opacity:0;}
    2% {transform:translateY(0);opacity:1;}
    14% {transform:translateY(0);opacity:1;}
    16.66% { transform:translateY(-100px);opacity:0;}
    100%{opacity:0;}
}