/* the important styles */

.arrow-wrap {
    position: absolute;
    z-index: 1000;
    /*left: 50%;*/
    /*top: -5em;*/
    /*margin-left: -5em;*/
    /*background: transparent;*/
    opacity: .3;
    width: 10em;
    height: 10em;
    padding: 4em 2em;
    border-radius: 50%;
    font-size: .5em;
    display: block;
    box-shadow: 0 0 50px 0 #333;
    margin: 1em;
}


    .arrow-wrap:hover {
        opacity: 1;
    }

.arrow {
    position: relative;
    /*width: 0;*/
    /*height: 0;*/
    border-style: solid;
    border-width: 3em;
    border-color: transparent transparent transparent transparent;
    /*-moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);*/
}


    .arrow:after {
        content: '';
        position: absolute;
        left: -4em;
        /*top: -2em;*/
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 4em 4em 0 4em;
        border-color: teal transparent transparent transparent;
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }

  /*  .arrow.up:after {
        top: -2em;
        border-color: green transparent transparent transparent;
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }*/



@-moz-keyframes arrows {
    0% {
        top: 0;
    }

    10% {
        top: -25%;
    }

    20% {
        top: 0;
    }

    30% {
        top: 50%;
    }

    40% {
        top: -50%;
    }

    50% {
        top: 50%;
    }

    60% {
        top: 0;
    }

    70% {
        top: 75%;
    }

    80% {
        top: -75%;
    }

    90% {
        top: 75%;
    }

    100% {
        top: 0;
    }
}

@-webkit-keyframes arrows {
    0% {
        top: 0;
    }

    10% {
        top: -25%;
    }

    20% {
        top: 0;
    }

    30% {
        top: 50%;
    }

    40% {
        top: -50%;
    }

    50% {
        top: 50%;
    }

    60% {
        top: 0;
    }

    70% {
        top: 75%;
    }

    80% {
        top: -75%;
    }

    90% {
        top: 75%;
    }

    100% {
        top: 0;
    }
}

@keyframes arrows {
    0% {
        top: 0;
    }

    10% {
        top: -25%;
    }

    20% {
        top: 0;
    }

    30% {
        top: 50%;
    }

    40% {
        top: -50%;
    }

    50% {
        top: 50%;
    }

    60% {
        top: 0;
    }

    70% {
        top: 75%;
    }

    80% {
        top: -75%;
    }

    90% {
        top: 75%;
    }

    100% {
        top: 0;
    }
}

.arrow-wrap .arrow {
    -moz-animation: arrows 2.8s 0.4s;
    -o-animation: arrows 2.8s 0.4s;
    -webkit-animation: arrows 2.8s 0.4s;
    animation: arrows 2.8s 0.4s;
    -moz-animation-delay: 2s;
    -o-animation-delay: 2s;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}