body{
    background:#020e22;
    display:block;
    height:100%;
    width:100%;
    z-index:0;
    text-decoration:none;
}

a{
    color:white;
    text-decoration:none;
}

a:hover{
    text-decoration:none;
}

a:visited{
    color:white;
    text-decoration:none;
}

.hidden{
    position:absolute;
    z-index:-200;
}

.blackbg{
    position:absolute;
    display:block;
    height:100%;
    width:100%;
    background:black;
    opacity:.75;
    z-index:900;
}

#title{
    position:absolute;
    display:block;
    top:50%;
    left:50%;
    width:750px;
    color:white;
    text-align:center;
    padding:20px 50px;
    cursor:context-menu;
    border-radius:25px;
    z-index:5000;
    transform: translate(-50%, -50%);
    background:#171717;
    transition-duration:1s;
    user-select:none;
    border:1px solid white;
}

#title img{
    position:relative;
    display:block;
    left:50%;
    width:150px;
    margin:25px;
    margin-left:-75px;
    z-index:200;
}

#play{
    height:50px;
    margin:25px;
    cursor:pointer;
    opacity:.5;
    transition-duration:.25s;
}

#play:hover{
    opacity:1;
}

#title span{
    font-family:Montserrat;
    font-weight:bold;
    font-size:30px;
}

#title h4{
    font-size:15px;
    font-family:Arial;
    font-weight:normal;
}

.region-data{
    position:absolute;
    bottom:20px;
    left:50%;
    width:200px;
    margin-left:-100px;
    color:white;
    z-index:200;
    background:#202020;
    padding:15px;
    text-align:center;
    border-radius:100px;
    cursor:pointer;
    user-select:none;
    font-size:11px;
}

.region-data:hover{
    background:#bf212f;
}

.region-data2{
    position:absolute;
    display:none;
    bottom:20px;
    left:50%;
    width:200px;
    margin-left:-100px;
    color:white;
    z-index:200;
    background:#bf212f;
    padding:15px;
    text-align:center;
    border-radius:100px;
    cursor:pointer;
    user-select:-moz-none;
    user-select:none;
    font-size:11px;
}

.years{
    position:absolute;
    display:block;
    top:0px;
    bottom:0px;
    left:0px;
    width:300px;
    z-index:500;
}

.year-bar{
    position:relative;
    background:#202020;
    height:11.1%;
    width:1px;
    margin-bottom:2px;
    z-index:500;
    cursor:pointer;
    transition:.25s;
}

.year-bar:hover{
    background-color:#bf212f;
}

#line{
    position:absolute;
    border-left:1px solid #fff;
    height:100%;
    top:-4.5%;
    left:30px;
    z-index:700;
    animation:3s line 1;
}

.circle{
    position:absolute;
    top:50%;
    height:15px;
    width:15px;
    border-radius:100px;
    background:#fff;
    margin-left:30px;
    -webkit-user-select: none; /* Chrome, Opera, Safari */
    -moz-user-select: none; /* Firefox 2+ */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Standard syntax */
    cursor:context-menu;
    z-index:500;
    transform: translate(-50%, -50%);
}

.year-bar span{
    position:absolute;
    top:50%;
    color:white;
    vertical-align:middle;
    left:60px;
    margin-top:-7.5px;
    font-family:Montserrat;
    font-size:15px;
    font-weight:500;
    z-index:500;
}

.data-bar{
    position:absolute;
    display:none;
    bottom:10px;
    left:50%;
    height:100px;
    width:250px;
    border-radius:5000px;
    background:#bf212f;
    text-align:center;
    z-index:500;
    transition-duration:1s;
    transform: translate(-50%, 0%);
    cursor:pointer;
    color:white;
}

.big-circle{
    position:absolute;
    display:block;
    top:50%;
    left:450px;
    height:350px;
    width:350px;
    border-radius:5000px;
    background:#bf212f;
    text-align:center;
    z-index:500;
    transition-duration:1s;
    transform: translate(-50%, -50%);
    animation:2s bigcircle 1;
    cursor:pointer;
}

.big-circle div{
    position:relative;
    top:45%;
    left:0px;
    right:0px;
    text-align:center;
    vertical-align:middle;
    margin-top:-50px;
    animation:2.5s appear 1;
}

.big-circle div span{
    position:relative;
    display:block;
    left:0px;
    right:0px;
    text-align:center;
    color:white;
    font-size:50px;
    font-family:Montserrat;
    font-weight:600;
}

.big-circle div div{
    position:relative;
    display:block;
    left:0px;
    right:0px;
    text-align:center;
    vertical-align:middle;
    color:white;
    font-size:15px;
    margin:10px;
    font-family:Montserrat;
}

.datanote{
    position:absolute;
    left:300px;
    bottom:20px;
    display:block;
    left:0px;
    width:100%;
    text-align:center;
    vertical-align:middle;
    color:black;
    font-size:12px;
    font-family:Montserrat;
    z-index:500;
}

.download{
    position:absolute;
    display:none;
    right:30px;
    bottom:50%;
    height:45px;
    width:45px;
    margin-bottom:75px;
    border-radius:100px;
    background:#202020;
    color:white;
    text-align:center;
    line-height:45px;
    font-size:12px;
    font-weight:bolder;
    z-index:1000;
    cursor:pointer;
    transition-duration:.5s;
    overflow:hidden;
}

.download:hover{
    width:225px;
    margin-left:-112.5px;
}

.download img{
    position:absolute;
    right:0px;
    height:45px;
}

.search img{
    position:absolute;
    right:0px;
    height:45px;
}

.request img{
    height:45px;
    position:absolute;
    right:0px;
}

.share img{
    position:absolute;
    right:0px;
    height:45px;
}

.search{
    position:absolute;
    display:none;
    right:30px;
    bottom:50%;
    height:45px;
    width:45px;
    margin-bottom:25px;
    border-radius:100px;
    background:#006f3c;
    color:white;
    text-align:center;
    line-height:45px;
    font-size:12px;
    font-weight:bolder;
    z-index:1000;
    cursor:pointer;
    transition-duration:.5s;
    overflow:hidden;
}

.search:hover{
    width:225px;
    margin-left:-112.5px;
}

.request{
    position:absolute;
    display:none;
    right:30px;
    bottom:50%;
    height:45px;
    width:45px;
    margin-bottom:-25px;
    border-radius:100px;
    background:#006f3c;
    color:white;
    text-align:center;
    line-height:45px;
    font-size:12px;
    font-weight:bolder;
    z-index:1000;
    cursor:pointer;
    transition-duration:.5s;
    overflow:hidden;
}

.request:hover{
    width:225px;
    margin-left:-112.5px;
}

.share{
    position:absolute;
    display:none;
    right:30px;
    bottom:50%;
    height:45px;
    width:45px;
    margin-bottom:-75px;
    margin-left:-100px;
    border-radius:100px;
    background:#3b5998;
    color:white;
    text-align:center;
    line-height:45px;
    font-size:12px;
    font-weight:bolder;
    z-index:1000;
    cursor:pointer;
    transition-duration:.5s;
    user-select:none;
    overflow:hidden;
}

.share:hover{
    width:225px;
    margin-left:-112.5px;
}

.w01{
    animation:.5s w01 1;
}

.w02{
    animation:.6s w02 1;
}

.w03{
    animation:.7s w03 1;
}

.w04{
    animation:.8s w04 1;
}

.w05{
    animation:.9s w05 1;
}

.w06{
    animation:1s w06 1;
}

.w07{
    animation:1.1s w07 1;
}

.w08{
    animation:1.2s w08 1;
}

.w09{
    animation:1.3s w09 1;
}

.w10{
    animation:1.4s w10 1;
}

.w11{
    animation:1.5s w11 1;
}

.l01{
    animation:1s l01 1;
}

.l02{
    animation:1.1s l01 1;
}

.l03{
    animation:1.2s l01 1;
}

.l04{
    animation:1.3s l01 1;
}

.l05{
    animation:1.4s l01 1;
}

.l06{
    animation:1.5s l01 1;
}

.l07{
    animation:1.6s l01 1;
}

.l08{
    animation:1.7s l01 1;
}

.l09{
    animation:1.8s l01 1;
}

.l10{
    animation:1.9s l01 1;
}

.l11{
    animation:2.0s l01 1;
}


@keyframes w01{
    0%{
        width:0px;
    }
    100%{
        width:134px;
    }
}

@keyframes w02{
    0%{
        width:0px;
    }
    100%{
        width:152.8px;
    }
}

@keyframes w03{
    0%{
        width:0px;
    }
    100%{
        width:155.6px;
    }
}

@keyframes w04{
    0%{
        width:0px;
    }
    100%{
        width:196.4px;
    }
}

@keyframes w05{
    0%{
        width:0px;
    }
    100%{
        width:203px;
    }
}

@keyframes w06{
    0%{
        width:0px;
    }
    100%{
        width:210.2px;
    }
}

@keyframes w07{
    0%{
        width:0px;
    }
    100%{
        width:202.3px;
    }
}

@keyframes w08{
    0%{
        width:0px;
    }
    100%{
        width:169.3px;
    }
}

@keyframes w09{
    0%{
        width:0px;
    }
    100%{
        width:151px;
    }
}

@keyframes w10{
    0%{
        width:0px;
    }
    100%{
        width:140.7px;
    }
}

@keyframes w11{
    0%{
        width:0px;
    }
    100%{
        width:141.2px;
    }
}

@keyframes line{
    0%{
        height:0px;
    }
    100%{
        height:100%;
    }
}

@keyframes l01{
    0%{
        height:0px;
        width:0px;
    }
    100%{
        height:15px;
        width:15px;        
    }
}

@keyframes bigcircle{
    0%{
        height:0px;
        width:0px;
    }
    100%{
        height:350px;
        width:350px;        
    }
}

@keyframes appear{
    0%{
        display:none;
        opacity:0;
    }
    60%{
        display:block;  
        opacity:0;
    }
    100%{
        opacity:1;
    }
}


@media screen and (max-width: 768px) {

    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }

    #title{
        position:absolute;
        display:block;
        top:50%;
        left:50%;
        width:100%;
        color:white;
        text-align:center;
        padding:20px 50px;
        cursor:context-menu;
        border-radius:0px;
        z-index:5000;
        transform: translate(-50%, -50%);
        background:#171717;
        transition-duration:1s;
        user-select:none;
        border:none;
    }

    #title img{
        position:relative;
        display:block;
        left:50%;
        width:150px;
        margin:25px;
        margin-left:-75px;
        z-index:200;
    }

    #play{
        height:50px;
        margin:25px;
        cursor:pointer;
    }

    #title span{
        font-family:Spectral;
        font-size:30px;
    }

    #title h4{
        font-size:12px;
        font-family:Arial;
    }

    #subtitle{
        position:absolute;
        bottom:25px;
        right:50px;
        text-align:center;
        font-family:Montserrat;
        font-size:12px;
        color:white;
        -webkit-user-select: none; /* Chrome, Opera, Safari */
        -moz-user-select: none; /* Firefox 2+ */
        -ms-user-select: none; /* IE 10+ */
        user-select: none; /* Standard syntax */
        z-index:500;
    }

    .years{
        position:absolute;
        display:block;
        top:75px;
        bottom:5px;
        left:0px;
        width:300px;
        z-index:500;
    }

    .year-bar{
        position:relative;
        background:#202020;
        height:12.5%;
        width:1px;
        margin-bottom:2px;
        z-index:500;
        cursor:pointer;
        transition:.25s;
    }

    .year-bar:hover{
        background-color:#bf212f;
    }

    #line{
        position:absolute;
        border-left:1px solid #fff;
        height:100%;
        top:-5%;
        left:30px;
        z-index:700;
        animation:3s line 1;
    }

    .circle{
        position:absolute;
        top:50%;
        height:15px;
        width:15px;
        border-radius:100px;
        background:#fff;
        margin-left:30px;
        -webkit-user-select: none; /* Chrome, Opera, Safari */
        -moz-user-select: none; /* Firefox 2+ */
        -ms-user-select: none; /* IE 10+ */
        user-select: none; /* Standard syntax */
        cursor:context-menu;
        z-index:500;
        transform: translate(-50%, -50%);
    }

    .year-bar span{
        position:absolute;
        top:50%;
        color:white;
        vertical-align:middle;
        left:60px;
        margin-top:-7.5px;
        font-family:Montserrat;
        font-size:15px;
        font-weight:500;
        z-index:500;
    }

    .data-bar{
        position:absolute;
        display:block;
        bottom:10px;
        left:50%;
        height:100px;
        width:250px;
        border-radius:5000px;
        background:#bf212f;
        text-align:center;
        z-index:500;
        transition-duration:1s;
        transform: translate(-50%, 0%);
        cursor:pointer;
        color:white;
    }

    
    .data-bar div{
        position:relative;
        top:45%;
        left:0px;
        right:0px;
        text-align:center;
        vertical-align:middle;
        margin-top:-50px;
    }

    .data-bar div span{
        position:relative;
        display:block;
        top:25px;
        right:0px;
        text-align:center;
        color:white;
        font-size:30px;
        font-family:Montserrat;
        font-weight:600;
        line-height:50px;
    }

    .data-bar div div{
        position:relative;
        display:block;
        left:0px;
        right:0px;
        text-align:center;
        vertical-align:middle;
        color:white;
        font-size:15px;
        margin:10px;
        font-family:Montserrat;
    }
    
    .data-bar div h4{
        position:relative;
        display:none;
        left:0px;
        right:0px;
        text-align:center;
        vertical-align:middle;
        color:white;
        font-size:15px;
        margin:10px;
        font-family:Montserrat;
    }
    
    .big-circle{
        position:absolute;
        display:none;
        bottom:0px!important;
        left:50%;
        height:250px;
        width:250px;
        border-radius:5000px;
        background:#bf212f;
        text-align:center;
        z-index:500;
        transition-duration:1s;
        transform: translate(-50%, 0%);
        cursor:pointer;
    }

    .big-circle div{
        position:relative;
        top:45%;
        left:0px;
        right:0px;
        text-align:center;
        vertical-align:middle;
        margin-top:-50px;
    }

    .big-circle div span{
        position:relative;
        display:block;
        left:0px;
        right:0px;
        text-align:center;
        color:white;
        font-size:30px;
        font-family:Montserrat;
        font-weight:600;
    }

    .big-circle div div{
        position:relative;
        display:block;
        left:0px;
        right:0px;
        text-align:center;
        vertical-align:middle;
        color:white;
        font-size:15px;
        margin:10px;
        font-family:Montserrat;
    }

    .download{
        position:absolute;
        display:none;
        right:30px;
        bottom:50%;
        height:45px;
        width:45px;
        margin-bottom:75px;
        border-radius:100px;
        background:#202020;
        color:white;
        text-align:center;
        line-height:45px;
        font-size:12px;
        font-weight:bolder;
        z-index:1000;
        cursor:pointer;
        transition-duration:.5s;
        overflow:hidden;
    }

    .download:hover{
        width:225px;
        margin-left:-112.5px;
    }

    .download img{
        position:absolute;
        right:0px;
        height:45px;
    }

    .search img{
        position:absolute;
        right:0px;
        height:45px;
    }

    .request img{
        height:45px;
        position:absolute;
        right:0px;
    }

    .share img{
        position:absolute;
        right:0px;
        height:45px;
    }

    .search{
        position:absolute;
        display:none;
        right:30px;
        bottom:50%;
        height:45px;
        width:45px;
        margin-bottom:25px;
        border-radius:100px;
        background:#006f3c;
        color:white;
        text-align:center;
        line-height:45px;
        font-size:12px;
        font-weight:bolder;
        z-index:1000;
        cursor:pointer;
        transition-duration:.5s;
        overflow:hidden;
    }

    .search:hover{
        width:225px;
        margin-left:-112.5px;
    }

    .request{
        position:absolute;
        display:none;
        right:30px;
        bottom:50%;
        height:45px;
        width:45px;
        margin-bottom:-25px;
        border-radius:100px;
        background:#006f3c;
        color:white;
        text-align:center;
        line-height:45px;
        font-size:12px;
        font-weight:bolder;
        z-index:1000;
        cursor:pointer;
        transition-duration:.5s;
        overflow:hidden;
    }

    .request:hover{
        width:225px;
        margin-left:-112.5px;
    }

    .share{
        position:absolute;
        display:none;
        right:30px;
        bottom:50%;
        height:45px;
        width:45px;
        margin-bottom:-75px;
        margin-left:-100px;
        border-radius:100px;
        background:#3b5998;
        color:white;
        text-align:center;
        line-height:45px;
        font-size:12px;
        font-weight:bolder;
        z-index:1000;
        cursor:pointer;
        transition-duration:.5s;
        user-select:none;
        overflow:hidden;
    }

    .share:hover{
        width:225px;
        margin-left:-112.5px;
    }
}




@media screen and (max-width: 425px) {

    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }

    .blackbg{
    position:absolute;
    display:none;
    height:100%;
    width:100%;
    background:black;
    opacity:.75;
    z-index:900;
    }
    
    #title{
        position:absolute;
        display:none;
        top:50%;
        left:50%;
        width:100%;
        color:white;
        text-align:center;
        padding:20px 50px;
        cursor:context-menu;
        border-radius:25px;
        z-index:5000;
        transform: translate(-50%, -50%);
        background:#171717;
        transition-duration:1s;
        user-select:none;
        border:1px solid white;
    }

    #title img{
        position:relative;
        display:block;
        left:50%;
        width:150px;
        margin:25px;
        margin-left:-75px;
        z-index:200;
    }

    #play{
        height:50px;
        margin:25px;
        cursor:pointer;
    }

    #title span{
        font-family:Spectral;
        font-size:30px;
    }

    #title h4{
        font-size:12px;
        font-family:Arial;
    }

    #subtitle{
        position:absolute;
        bottom:25px;
        right:50px;
        text-align:center;
        font-family:Montserrat;
        font-size:12px;
        color:white;
        -webkit-user-select: none; /* Chrome, Opera, Safari */
        -moz-user-select: none; /* Firefox 2+ */
        -ms-user-select: none; /* IE 10+ */
        user-select: none; /* Standard syntax */
        z-index:500;
    }

    .years{
        position:absolute;
        display:block;
        top:75px;
        bottom:5px;
        left:0px;
        width:300px;
        z-index:500;
    }

    .year-bar{
        position:relative;
        background:transparent;
        height:12.5%;
        width:1px;
        margin-bottom:2px;
        z-index:500;
        cursor:pointer;
        transition:.25s;
    }

    .year-bar:hover{
        background-color:#bf212f;
    }

    #line{
        position:absolute;
        border-left:1px solid #fff;
        height:100%;
        top:-5%;
        left:30px;
        z-index:700;
        animation:3s line 1;
    }

    .circle{
        position:absolute;
        top:50%;
        height:15px;
        width:15px;
        border-radius:100px;
        background:#fff;
        margin-left:30px;
        -webkit-user-select: none; /* Chrome, Opera, Safari */
        -moz-user-select: none; /* Firefox 2+ */
        -ms-user-select: none; /* IE 10+ */
        user-select: none; /* Standard syntax */
        cursor:context-menu;
        z-index:500;
        transform: translate(-50%, -50%);
    }

    .year-bar span{
        position:absolute;
        top:50%;
        color:white;
        vertical-align:middle;
        left:60px;
        margin-top:-7.5px;
        font-family:Montserrat;
        font-size:15px;
        font-weight:500;
        z-index:500;
    }

    .data-bar{
        position:absolute;
        display:block;
        top:2.5px;
        left:2.5px;
        right:2.5px;
        height:50px;
        border-radius:5000px;
        background:#bf212f;
        text-align:center;
        z-index:5000;
        transition-duration:1s;
        transform: translate(0%, 0%);
        cursor:pointer;
        color:white;
    }
    
    .data-bar div{
        position:relative;
        top:45%;
        left:0px;
        right:0px;
        text-align:center;
        vertical-align:middle;
        margin-top:-50px;
    }

    .data-bar div span{
        position:relative;
        display:block;
        top:25px;
        right:0px;
        text-align:center;
        color:white;
        font-size:30px;
        font-family:Montserrat;
        font-weight:600;
        line-height:50px;
    }

    .data-bar div div{
        position:relative;
        display:none;
        left:0px;
        right:0px;
        text-align:center;
        vertical-align:middle;
        color:white;
        font-size:15px;
        margin:10px;
        font-family:Montserrat;
    }
    
    .data-bar div h4{
        position:relative;
        display:none;
        left:0px;
        right:0px;
        text-align:center;
        vertical-align:middle;
        color:white;
        font-size:15px;
        margin:10px;
        font-family:Montserrat;
    }

    .big-circle{
        position:absolute;
        display:none;
        bottom:0px!important;
        left:50%;
        height:250px;
        width:250px;
        border-radius:5000px;
        background:#bf212f;
        text-align:center;
        z-index:500;
        transition-duration:1s;
        transform: translate(-50%, 0%);
        cursor:pointer;
    }

    

    .download{
        position:absolute;
        display:none;
        right:30px;
        bottom:50%;
        height:45px;
        width:45px;
        margin-bottom:75px;
        border-radius:100px;
        background:#202020;
        color:white;
        text-align:center;
        line-height:45px;
        font-size:12px;
        font-weight:bolder;
        z-index:1000;
        cursor:pointer;
        transition-duration:.5s;
        overflow:hidden;
    }

    .download:hover{
        width:225px;
        margin-left:-112.5px;
    }

    .download img{
        position:absolute;
        right:0px;
        height:45px;
    }

    .search img{
        position:absolute;
        right:0px;
        height:45px;
    }

    .request img{
        height:45px;
        position:absolute;
        right:0px;
    }

    .share img{
        position:absolute;
        right:0px;
        height:45px;
    }

    .search{
        position:absolute;
        display:none;
        right:30px;
        bottom:50%;
        height:45px;
        width:45px;
        margin-bottom:25px;
        border-radius:100px;
        background:#006f3c;
        color:white;
        text-align:center;
        line-height:45px;
        font-size:12px;
        font-weight:bolder;
        z-index:1000;
        cursor:pointer;
        transition-duration:.5s;
        overflow:hidden;
    }

    .search:hover{
        width:225px;
        margin-left:-112.5px;
    }

    .request{
        position:absolute;
        display:none;
        right:30px;
        bottom:50%;
        height:45px;
        width:45px;
        margin-bottom:-25px;
        border-radius:100px;
        background:#006f3c;
        color:white;
        text-align:center;
        line-height:45px;
        font-size:12px;
        font-weight:bolder;
        z-index:1000;
        cursor:pointer;
        transition-duration:.5s;
        overflow:hidden;
    }

    .request:hover{
        width:225px;
        margin-left:-112.5px;
    }

    .share{
        position:absolute;
        display:none;
        right:30px;
        bottom:50%;
        height:45px;
        width:45px;
        margin-bottom:-75px;
        margin-left:-100px;
        border-radius:100px;
        background:#3b5998;
        color:white;
        text-align:center;
        line-height:45px;
        font-size:12px;
        font-weight:bolder;
        z-index:1000;
        cursor:pointer;
        transition-duration:.5s;
        user-select:none;
        overflow:hidden;
    }

    .share:hover{
        width:225px;
        margin-left:-112.5px;
    }
}