@import url('https://fonts.googleapis.com/css?family=Rubik&display=swap');

        .BCEAO_title {
            font-family: Rubik;
            font-size: 130px;
            fill: #fff;
            /* make things invisible first */
            opacity: 0;
            /* call the keyframe named fadeIn, use animation ease-in and repeat 1 time */
            animation: ShowBCEAO ease-in;
            /* make sure fade-in stops at the last keyframe value (opacity: 1)*/
            /*
            animation-fill-mode: forwards;
            */
            animation-duration: 10s;
            animation-iteration-count: infinite; 
        }
        
        .BEAC_title {
            font-family: Rubik;
            font-size: 130px;
            fill: #fff;
            /* make things invisible first */
            opacity: 0;
            /* call the keyframe named fadeIn, use animation ease-in and repeat 1 time */
            animation: ShowBEAC ease-in;
            /* make sure fade-in stops at the last keyframe value (opacity: 1)*/
            /*
            animation-fill-mode: forwards;
            */
            animation-duration: 10s;
            animation-iteration-count: infinite; 
        }
            
        #BCEAO_countries {
            font-family: Rubik;
            font-size: 120px;
            fill: #fff;
            /* make things invisible first */
            opacity: 0;
            /* call the keyframe named fadeIn, use animation ease-in and repeat 1 time */
            animation: ShowBCEAO ease-in;
            /* make sure fade-in stops at the last keyframe value (opacity: 1)*/
            /*
            animation-fill-mode: forwards;
            */
            animation-duration: 10s;
            animation-iteration-count: infinite; 
        }
        
        #BEAC_countries {
            font-family: Rubik;
            font-size: 120px;
            fill: #fff;
            /* make things invisible first */
            opacity: 0;
            /* call the keyframe named fadeIn, use animation ease-in and repeat 1 time */
            animation: ShowBEAC ease-in;
            /* make sure fade-in stops at the last keyframe value (opacity: 1)*/
            /*
            animation-fill-mode: forwards;
            */
            animation-duration: 10s;
            animation-iteration-count: infinite;
        }
        
        .xofClass {
            fill: #ffcc00;
            animation-name: go-orange;
            animation-duration: 10s;
            animation-iteration-count: infinite;
            animation-timing-function: ease-in;
            /*animation-direction: alternate;*/
        }
        
        .xafClass {
            fill: #ffcc00;
            animation-name: go-green;
            animation-duration: 10s;
            animation-iteration-count: infinite;
            animation-timing-function: ease-in;
            /*animation-direction: alternate;*/
        }
               
        @keyframes ShowBCEAO {
            0% {
                opacity: 1;
            }
            50% {
                opacity: 1;
            }
            50.1% {
                opacity: 0;
            }
            100% {
                opacity: 0;
            }
        }
        
        @keyframes ShowBEAC {
            0% {
                opacity: 0;
            }
            50% {
                opacity: 0;
            }
            50.1% {
                opacity: 1;
            }
            100% {
                opacity: 1;
            }
        }

        @keyframes go-orange {
            0% {
                fill: #ff4300;
            }
            50% {
                fill: #ff4300;
            }
            50.1% {
                fill: #ffcc00;
            }
            100% {
                fill: #ffcc00;
            }
        }
        
        @keyframes go-green {
            0% {
                fill: #ffcc00;
            }
            50% {
                fill: #ffcc00;
            }
            50.1% {
                fill: #008000;
            }
            100% {
                fill: #008000;
            }
        }