@import url('https://fonts.googleapis.com/css?family=Montserrat:400,900&subset=latin-ext');

html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-weight: 300;
    background-color: #404040;
    font-family: 'Montserrat', sans-serif;
}
footer {
    color: #000000;
    position: absolute;
    z-index: 10;
    bottom: 3.5%;
    text-align: center;
    width: 100%;
}
footer a {
    color: #fff;
    text-decoration: none;
    font-size: 2.9vmin;
}

.bolive_logo {
    position: relative;
    display: block;
    text-decoration: none;
    width: 100vw;
    height: 100vh;
    text-align: center;
}
.bolive_logo .logo {
    height: 80%;
    max-width: 80%;
    width: auto;
    padding: 5%;
    display: inline-block;
}
.bolive_logo .hl1 path{
    fill: #fff !important;
}

html, body {
    -webkit-animation: bgColorAnim 20s infinite normal backwards;
            animation: bgColorAnim 20s infinite normal backwards
}

.bolive_logo .hl2 path{
    fill: #fff !important;
    -webkit-animation: fillColorAnim 20s infinite normal backwards!important;
            animation: fillColorAnim 20s infinite normal backwards!important;

}
.bolive_logo .borders path{
    fill: #fcc30c !important;
    -webkit-animation: fillColorAnim 20s infinite normal backwards!important;
            animation: fillColorAnim 20s infinite normal backwards!important;
}

.bolive_logo .hl2.hl-event {
    opacity: 0;
    -webkit-animation: toggleEvent 8s infinite normal backwards!important;
            animation: toggleEvent 8s infinite normal backwards!important;
}
.bolive_logo .hl2.hl-live {
    opacity: 0;
    -webkit-animation: toggleLive 8s infinite normal backwards!important;
            animation: toggleLive 8s infinite normal backwards!important;
}

@-webkit-keyframes toggleLive {
    0%   {opacity: 1; }
    25%  {opacity: 1; }
    50% {opacity: 1;  }
    65% {opacity: 0;  }
    75% {opacity: 0;  }
    100%  {opacity: 0; }
}

@keyframes toggleLive {
    0%   {opacity: 1; }
    25%  {opacity: 1; }
    50% {opacity: 1;  }
    65% {opacity: 0;  }
    75% {opacity: 0;  }
    100%  {opacity: 0; }
}

@-webkit-keyframes toggleEvent {
    0%   {opacity: 0; }
    25%  {opacity: 0; }
    50% {opacity: 0  }
    65% {opacity: 1;  }
    75% {opacity: 1;  }
    100%  {opacity: 1; }
}

@keyframes toggleEvent {
    0%   {opacity: 0; }
    25%  {opacity: 0; }
    50% {opacity: 0  }
    65% {opacity: 1;  }
    75% {opacity: 1;  }
    100%  {opacity: 1; }
}


@-webkit-keyframes bgColorAnim {
    0%  {background: #BF1C39;}
    5%  {background: #404040;}
    20%  {background: #404040;}

    25%   {background: #0069B3;}
    30%   {background: #0069B3;}
    40%   {background: #0069B3;}

    45%  {background: #EE7666;}
    50%  {background: #EE7666;}
    60%  {background: #EE7666;}

    65% {background: #FDC300;}
    70% {background: #FDC300;}
    80% {background: #FDC300;}

    85%  {background: #BF1C39;}
    90%  {background: #BF1C39;}
    100%  {background: #BF1C39;}
}


@keyframes bgColorAnim {
    0%  {background: #BF1C39;}
    5%  {background: #404040;}
    20%  {background: #404040;}

    25%   {background: #0069B3;}
    30%   {background: #0069B3;}
    40%   {background: #0069B3;}

    45%  {background: #EE7666;}
    50%  {background: #EE7666;}
    60%  {background: #EE7666;}

    65% {background: #FDC300;}
    70% {background: #FDC300;}
    80% {background: #FDC300;}

    85%  {background: #BF1C39;}
    90%  {background: #BF1C39;}
    100%  {background: #BF1C39;}
}


@-webkit-keyframes fillColorAnim {
    0%  {fill: #02B3C5;}
    5%  {fill: #EE7668;}
    20%  {fill: #EE7668;}

    25%   {fill: #FCC200;}
    30%   {fill: #FCC200;}
    40%   {fill: #FCC200;}

    45%  {fill: #000000;}
    50%  {fill: #000000;}
    60%  {fill: #000000;}

    65% {fill: #0069B3;}
    70% {fill: #0069B3;}
    80% {fill: #0069B3;}

    85%  {fill: #02B3C5;}
    90%  {fill: #02B3C5;}
    100%  {fill: #02B3C5;}
}


@keyframes fillColorAnim {
    0%  {fill: #02B3C5;}
    5%  {fill: #EE7668;}
    20%  {fill: #EE7668;}

    25%   {fill: #FCC200;}
    30%   {fill: #FCC200;}
    40%   {fill: #FCC200;}

    45%  {fill: #000000;}
    50%  {fill: #000000;}
    60%  {fill: #000000;}

    65% {fill: #0069B3;}
    70% {fill: #0069B3;}
    80% {fill: #0069B3;}

    85%  {fill: #02B3C5;}
    90%  {fill: #02B3C5;}
    100%  {fill: #02B3C5;}
}