index.css

/*#####################################  Page Styling  ###############################################*/

a[href='http://www.amcharts.com/javascript-maps/']{ display: none !important}

h1, h2, h3, h4{
    color: white;
    font-family: 'Roboto', sans-serif;
}

h1 {
    font-size: 5rem;

}
.btn-floating.btn-large.btn-intro{
    width: 100px;
    height: 100px;
    padding: 0;
}

.btn-large.btn-intro i {
    font-size: 4rem;
    transform: translateY(20px);
}

nav {
    background-color: rgba(0,0,0,0.0);
}
nav.nav-center ul {
    text-align: center;
}
nav.nav-center ul li {
    display: inline;
    float: none;
}
nav.nav-center ul li a {
    display: inline-block;
}

.z-depth-1, nav, .card-panel, .card, .toast, .btn, .btn-large, .btn-floating, .dropdown-content, .collapsible, .side-nav {
    box-shadow: none;
}
/*#####################################  Map Styles and Animations   ###############################################*/
div#map {
    width: 100%;
    height: 100%;
    display: block;
}
.float-text-map-left{
    position: absolute;
    top: 80px;
    left: 50px;
}

.float-text-map-right{
    position: absolute;
    top: 80px;
    right: 50px;
    text-align: right;
}
.float-text-map-bottom-right {
    position: absolute;
    bottom: 65px;
    right: 16px;
    text-align: right;

}

.amcharts-map-image-customer{
    /*animation-name: changeColor;*/
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-play-state: unset;
}

@keyframes changeColor {
    0%   {
        fill: yellow;
        transform: scale(1);
    }
    50% {
        fill: yellow;
        transform: scale(1.5);
    }
    100% {
        fill: yellow;
        transform: scale(1);
    }
}

.amcharts-map-image-top{
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-play-state: unset;
}

@keyframes changeColortop {
    0%   {
        fill: #00FF00;
        transform: scale(1);
    }
    50% {
        fill: #00FF00;
        transform: scale(1.5);
    }
    100% {
        fill: #00FF00;
        transform: scale(1);
    }
}

.amcharts-map-image-new{
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-play-state: unset;
}

@keyframes changeColornew {
    0%   {
        fill: #00BFFF;
        transform: scale(1);
    }
    50% {
        fill: #00BFFF;
        transform: scale(1.5);
    }
    100% {
        fill: #00BFFF;
        transform: scale(1);
    }
}

/* Typing Carousel */
.typewriter h4 {
    color: #fff;
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    border-right: .15em solid orange; /* The typwriter cursor */
    white-space: nowrap; /* Keeps the content on a single line */
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */
    letter-spacing: .15em; /* Adjust as needed */
    animation:
            typing 3.5s steps(30, end),
            blink-caret .5s step-end infinite;
}

/* The typing effect */
@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: blue }
}
/*#################################################### HEATMAP ############################################*/
#heatmap {
    width: 90%;
    height: 400px;
    display: block;

}
.amcharts-polyline-group {
    display: none;
}
/*#################################################### PIE CHART ############################################*/
#piediv {
    width: 100%;
    height: 30rem;
    background-color:rgba(80,80,80,1);
}