.orangearrow {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjUxMiIgaGVpZ2h0PSI1MTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5vbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0xIiB4PSItMSIvPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxwYXRoIGlkPSJzdmdfMSIgZD0ibTI5My43NTEwMDcsNDU1Ljg2ODAxMWMtMjAuMTgxLDIwLjE3ODk4NiAtNTMuMTY0OTkzLDE5LjkxMjk5NCAtNzMuNjczMDA0LC0wLjU5NTAwMWwwLDBjLTIwLjUwNzk5NiwtMjAuNTA3OTk2IC0yMC43NzI5OTUsLTUzLjQ5MzAxMSAtMC41OTM5OTQsLTczLjY3MTk5N2wxODkuOTk4OTkzLC0xOTBjMjAuMTc4MDA5LC0yMC4xNzgwMDkgNTMuMTY0MDAxLC0xOS45MTMwMSA3My42NzE5OTcsMC41OTUwMDFsMCwwYzIwLjUwNzk5NiwyMC41MDkwMDMgMjAuNzcyMDAzLDUzLjQ5MTk4OSAwLjU5NTAwMSw3My42NzA5OWwtMTg5Ljk5ODk5MywxOTAuMDAxMDA3eiIgZmlsbD0iI2ZmOWMwMCIvPgogIDxwYXRoIGlkPSJzdmdfMiIgZD0ibTIyMC4yNDg5OTMsNDU1Ljg2ODAxMWMyMC4xNzk5OTMsMjAuMTc4OTg2IDUzLjE2NDAwMSwxOS45MTI5OTQgNzMuNjcxOTk3LC0wLjU5NTAwMWwwLDBjMjAuNTA5MDAzLC0yMC41MDc5OTYgMjAuNzczOTg3LC01My40OTMwMTEgMC41OTYwMDgsLTczLjY3MTk5N2wtMTkwLjAwMDAwOCwtMTkwYy0yMC4xNzgwMDEsLTIwLjE3ODAwOSAtNTMuMTY0MDAxLC0xOS45MTMwMSAtNzMuNjcxMDAxLDAuNTk1MDAxbDAsMGMtMjAuNTA3OTk5LDIwLjUwOTAwMyAtMjAuNzcxOTk5LDUzLjQ5MTk4OSAtMC41OTQ5OTksNzMuNjcwOTlsMTg5Ljk5ODAwMywxOTAuMDAxMDA3eiIgZmlsbD0iI2ZmOWMwMCIvPgogPC9nPgo8L3N2Zz4=);
  background-size: contain;
}

.greenarrow {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjUxMiIgaGVpZ2h0PSI1MTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5vbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0xIiB4PSItMSIvPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxwYXRoIGlkPSJzdmdfMSIgZD0ibTI5My43NTEwMDcsNDU1Ljg2ODAxMWMtMjAuMTgxLDIwLjE3ODk4NiAtNTMuMTY0OTkzLDE5LjkxMjk5NCAtNzMuNjczMDA0LC0wLjU5NTAwMWwwLDBjLTIwLjUwNzk5NiwtMjAuNTA3OTk2IC0yMC43NzI5OTUsLTUzLjQ5MzAxMSAtMC41OTM5OTQsLTczLjY3MTk5N2wxODkuOTk4OTkzLC0xOTBjMjAuMTc4MDA5LC0yMC4xNzgwMDkgNTMuMTY0MDAxLC0xOS45MTMwMSA3My42NzE5OTcsMC41OTUwMDFsMCwwYzIwLjUwNzk5NiwyMC41MDkwMDMgMjAuNzcyMDAzLDUzLjQ5MTk4OSAwLjU5NTAwMSw3My42NzA5OWwtMTg5Ljk5ODk5MywxOTAuMDAxMDA3eiIgZmlsbD0iI2E0ZGI1YiIvPgogIDxwYXRoIGlkPSJzdmdfMiIgZD0ibTIyMC4yNDg5OTMsNDU1Ljg2ODAxMWMyMC4xNzk5OTMsMjAuMTc4OTg2IDUzLjE2NDAwMSwxOS45MTI5OTQgNzMuNjcxOTk3LC0wLjU5NTAwMWwwLDBjMjAuNTA5MDAzLC0yMC41MDc5OTYgMjAuNzczOTg3LC01My40OTMwMTEgMC41OTYwMDgsLTczLjY3MTk5N2wtMTkwLjAwMDAwOCwtMTkwYy0yMC4xNzgwMDEsLTIwLjE3ODAwOSAtNTMuMTY0MDAxLC0xOS45MTMwMSAtNzMuNjcxMDAxLDAuNTk1MDAxbDAsMGMtMjAuNTA3OTk5LDIwLjUwOTAwMyAtMjAuNzcxOTk5LDUzLjQ5MTk4OSAtMC41OTQ5OTksNzMuNjcwOTlsMTg5Ljk5ODAwMywxOTAuMDAxMDA3eiIgZmlsbD0iI2E0ZGI1YiIvPgogPC9nPgo8L3N2Zz4=);
  background-size: contain;
}

.arrowposition {
  position: fixed;
  bottom: 80;
  right: 50;
  margin-left:-20px;
  width: 75px;
  height: 75px;
}

.animated {
    -webkit-animation-duration: 15s; 
    animation-duration: 15s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    animation-iteration-count:infinite; 
    -webkit-animation-iteration-count:infinite; 
}

.flip {
    -webkit-backface-visibility: visible !important; 
    -webkit-animation-name: flip; 
    backface-visibility: visible !important; 
    animation-name: flip; 
}

@-webkit-keyframes flip { 
    0% {
        -webkit-transform: perspective(400px) rotateY(0); 
        -webkit-animation-timing-function: ease-out; 
    }
    40% {
        -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg); 
        -webkit-animation-timing-function: ease-out; 
    }
    50% {
        -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); 
        -webkit-animation-timing-function: ease-in; 
    }
    80% {
        -webkit-transform: perspective(400px) rotateY(360deg) scale(.95); 
        -webkit-animation-timing-function: ease-in; 
    }
    100% {
        -webkit-transform: perspective(400px) scale(1); 
        -webkit-animation-timing-function: ease-in; 
    }
}

@keyframes flip {
    0% {
        transform: perspective(400px) rotateY(0); 
        animation-timing-function: ease-out; 
    }
    40% {
        transform: perspective(400px) translateZ(150px) rotateY(170deg); 
        animation-timing-function: ease-out; 
    }
    50% {
        transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); 
        animation-timing-function: ease-in; 
    }
    80% {
        transform: perspective(400px) rotateY(360deg) scale(.95); 
        animation-timing-function: ease-in; 
    }
    100% {
        transform: perspective(400px) scale(1); 
        animation-timing-function: ease-in; 
    }
}