/*veamcaststyles.css*/


#NavigationButton {
    position: absolute;
    top: 0vh;
    right: 0;
    height: 18vh;
    padding: 0vw;
    margin: .2vw;
}

.NavigationImage {
    height: 18vh;
    filter: drop-shadow(2px 4px 6px black);
}



@keyframes navigationimagerotate {
    0% {
        transform: rotate(0deg)scale(0.7);
        opacity: 1;
    }

    10% {
        transform: rotate(0deg)scale(0.7);
        content: url("../images/Navigate2.svg");
        opacity: 1;
    }

    20% {
        transform: rotate(360deg)scale(0.66);
        opacity: .18;
    }

    22% {
        transform: rotate(360deg) scale(0.7);
        opacity: .18;
    }

    25% {
        content: url("../images/Share.svg");
        opacity: 1;
    }

    40% {
        opacity: 1;
        content: url("../images/Share.svg");
        transform: rotate(0deg)scale(0.7);
    }

    50% {
        transform: rotate(360deg)scale(0.66);
        opacity: .18;
        content: url("../images/share.svg");
    }

    54% {
        content: url("../images/share.svg");
        transform: rotate(360deg)scale(0.66);
        opacity: .18;
    }

    60% {
        content: url("../images/Download.svg");
        transform: rotate(0deg) scale(0.7);
        opacity: 1;
    }


    80% {
        transform: rotate(360deg)scale(0.66);
        content: url("../images/Download.svg");
        opacity: 1;
    }

    90% {
        content: url("../images/Download.svg");
        transform: rotate(360deg)scale(0.66);
        opacity: .18;
    }

    100% {
        content: url("../images/Navigate2.svg");
        transform: rotate(0deg) scale(0.7);
        opacity: 1;
    }
}

@-webkit-keyframes navigationimagerotate {
}

.NavigationButton {
    background: rgba(0,0,0,.01); /*clickable*/
    border-radius: 3px;
    /*transform: scale(.88,.88);*/
    z-index: 999;
}

    .NavigationButton:hover {
        background: rgba(0,0,0,.34);
        transition: all 1s;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: scale(1.0,1.0);
        -webkit-transform: scale(1.0,1.0);
        -moz-transform: scale(1.0,1.0);
        -o-transform: scale(1.0,1.0);
    }

.NavigationImage {
    content: url("../images/Navigate2.svg");
    -webkit-animation: navigationimagerotate 18s infinite !important; /* Chrome, Safari, Opera */
    animation: navigationimagerotate 18s infinite !important;
    filter: drop-shadow(2px 4px 6px black);
}


/*Rotate*/

.RotateImage {
    -webkit-animation: buttonrotate 18s infinite !important; /* Chrome, Safari, Opera */
    animation: buttonrotate 18s infinite !important;
}

    .RotateImage:hover {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
    }