.red {color:#E74C3C}
    .green {color:#1ABC9C}
    body {font-size:14px;    
        background: url(bg1-2.jpg?111) no-repeat #000 top  fixed;
        background-size: 1000px auto;
        color:#34495E
    }
    ul {padding:0;margin:0}
    p,h1 {margin:0}
    em {font-style:normal}
    span.loading {
        display: inline-block;
        width: 16px;
        height: 16px;
        background: url("data:image/gif;base64,R0lGODlhEAAQALMMAKqooJGOhp2bk7e1rZ2bkre1rJCPhqqon8PBudDOxXd1bISCef///wAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFAAAMACwAAAAAEAAQAAAET5DJyYyhmAZ7sxQEs1nMsmACGJKmSaVEOLXnK1PuBADepCiMg/DQ+/2GRI8RKOxJfpTCIJNIYArS6aRajWYZCASDa41Ow+Fx2YMWOyfpTAQAIfkEBQAADAAsAAAAABAAEAAABE6QyckEoZgKe7MEQMUxhoEd6FFdQWlOqTq15SlT9VQM3rQsjMKO5/n9hANixgjc9SQ/CgKRUSgw0ynFapVmGYkEg3v1gsPibg8tfk7CnggAIfkEBQAADAAsAAAAABAAEAAABE2QycnOoZjaA/IsRWV1goCBoMiUJTW8A0XMBPZmM4Ug3hQEjN2uZygahDyP0RBMEpmTRCKzWGCkUkq1SsFOFQrG1tr9gsPc3jnco4A9EQAh+QQFAAAMACwAAAAAEAAQAAAETpDJyUqhmFqbJ0LMIA7McWDfF5LmAVApOLUvLFMmlSTdJAiM3a73+wl5HYKSEET2lBSFIhMIYKRSimFriGIZiwWD2/WCw+Jt7xxeU9qZCAAh+QQFAAAMACwAAAAAEAAQAAAETZDJyRCimFqbZ0rVxgwF9n3hSJbeSQ2rCWIkpSjddBzMfee7nQ/XCfJ+OQYAQFksMgQBxumkEKLSCfVpMDCugqyW2w18xZmuwZycdDsRACH5BAUAAAwALAAAAAAQABAAAARNkMnJUqKYWpunUtXGIAj2feFIlt5JrWybkdSydNNQMLaND7pC79YBFnY+HENHMRgyhwPGaQhQotGm00oQMLBSLYPQ9QIASrLAq5x0OxEAIfkEBQAADAAsAAAAABAAEAAABE2QycmUopham+da1cYkCfZ94UiW3kmtbJuRlGF0E4Iwto3rut6tA9wFAjiJjkIgZAYDTLNJgUIpgqyAcTgwCuACJssAdL3gpLmbpLAzEQA7") no-repeat;
        background-size: cover;
    }
    .speed .content{

    }
    .speed .box {}
    .speed .box div {
        position: relative;
        padding:10px 15px;
        text-align: center;
        cursor: pointer;
        font-size: 16px;
        border-radius: 4px;
        border-bottom: 1px solid #ddd;
        background:#fff;
        margin-bottom: 15px;
        box-shadow: 0px 1px 21px 0px rgb(0 0 0 / 30%);
        transition: all 0.2s;
        border:1px solid transparent;
    }

    .speed .box div.action {
        border-color:rgba(255,0,0,0);
    }

    .speed .box div.action::after {
        filter: blur(20px);
        content: "";
        position: absolute;
        border-radius: 20px;
        top: -10px;
        left: -10px;
        bottom: -10px;
        right: -10px;
        background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000 );
        background-size: 400%;
        z-index: -1;
        animation: animate 20s linear infinite;
    }

    .speed .box div.action::before {
        content: "";
        position: absolute;
        border-radius: 6px;
        top: -4px;
        left: -4px;
        bottom: -4px;
        right: -4px;
        background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000 );
        background-size: 400%;
        z-index: -1;
        animation: animate 20s linear infinite;
    }

    @keyframes animate {
        0% {
            background-position: 0 0;
        }
        50% {
            background-position: 300% 0;
        }
        100% {
            background-position: 0 0;
        }
    }

    .speed .box div.lost {
        position: relative;
        opacity: .3
    }

    .speed .box div.lost::after {
        content:"";
        position: absolute;
        left: -1px;
        top: -1px;
        right: -1px;
        bottom: -1px;
        background: rgba(0,0,0,.7);
/*        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(3px);*/
    }


    .speed .box ul {
        padding: 5px 0;
    }

    .speed .box ul.s1 {
        flex:1;
    }
    .speed .box ul.s1 h2{
        font-size: 16px;
        margin-bottom: 5px
    }
    .speed .box ul.s1 p{
        font-size: 16px;
        font-weight: bold;
        color: #ff3b4f
    }
    .speed .box ul.s3 {
        min-width: 150px;
        font-size: 14px;
        font-weight: bold;
    }

    button {
        transition: all 0.3s;
    }

    button:hover{
        opacity: .6
    }

    button:active{
        opacity: .3
    }

    .button-style-1 {
        width: 80px;
        height: 40px;
        color: #666;
        border:none;
        border-radius: 3px;
        cursor: pointer;
        border: 1px solid #ccc;
        background: #fff;
        margin-right: 10px;
        font-size: 16px;
        font-weight: bold;
    }

    .button-style-1:hover {
        border-color: #fd3246;
        color: #fd3246
    }

    .button-style-2 {
        width: 80px;
        height: 40px;
        background: #fd3246;
        color: #fff;
        border:none;
        border-radius: 3px;
        cursor: pointer;
        font-size: 16px;
        font-weight: bold;
    }

    .test {margin:40px auto auto auto;}
    .test .t {text-align: center;color: #fff;font-size: 20px;margin-bottom:20px;}
    .test .t h3 {font-size: 26px;color:yellow;margin:0;text-shadow: 0px 0px 7px rgba(0,0,0,.3)}
    .test .t h1 {font-size: 34px;margin-bottom: 10px;text-shadow: 0px 0px 7px rgba(0,0,0,.3)}
    .test .t p {
        background: rgba(0,0,0,.3);
        display: inline-block;
        padding: 5px 15px;
        border-radius: 30px;
    }

    .test .t p .going {
        animation: blink .5s linear infinite;
        -webkit-animation: blink .5s linear infinite;
        -moz-animation: blink .5s linear infinite;
        -ms-animation: blink .5s linear infinite;
        -o-animation: blink .5s linear infinite; 
    }

    .test .c {margin:20px;}
    .tt {
        text-align: center;
        color: #fff;
        margin: auto auto 60px auto;
        width:800px;
        font-size: 16px;
    }
    h2,p{
        margin:0;
    }

    @keyframes blink {
        0% {
            color: #fff;
            text-shadow: 0px 0px 1px #fff;
        }

        33% {
            color: yellow;
            text-shadow: 0px 0px 1px yellow;
        }

        66% {
            color: #f77112;
            text-shadow: 0px 0px 1px #f77112;
        }

        100% {
            color: #fff;
            text-shadow: 0px 0px 1px #fff;
        }
    }

    @media (min-width: 800px){
        body {
            background-size: 1800px auto;
        }

        .test {
            width:800px;
        }

        .speed .box div {
            display: flex;
            flex-wrap: wrap;
            align-items: center
        }
        .speed .box ul.s1 {
            text-align: left
        }
    }