#canh2-wrap .wrap-ma-tang{
    width: 100%;
    height: 200px;
    overflow: hidden;
}

#canh2-wrap .wrap-ma-tang .ma-tang{
    width: 100%;
    height: 100%;
}
#canh2-wrap .wrap-ma-tang .ma-tang ul li{
    font-size: 100px;
    line-height: 200px;
    font-weight: bold;
    width: 100%;
    text-align: center;
    margin: 0 auto;
}

.maTang{
    animation-name: maTang;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-delay: 2s;
    animation-timing-function: ease-out;

    -webkit-animation-name: maTang;
    -webkit-animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-delay: 2s;
    -webkit-animation-timing-function: ease-out;

}

@keyframes maTang {
    0%{
        margin-top: 0;
    }
    30%{
        margin-top: 0;
    }
    40%{
        margin-top: -200px;
    }
    60%{
        margin-top: -200px;
    }
    70%{
        margin-top: -400px;
    }
    90%{
        margin-top: -400px;
    }
    100%{
        margin-top: -600px;
    }
}
@-webkit-keyframes maTang {
    0%{
        margin-top: 0;
    }
    30%{
        margin-top: 0;
    }
    40%{
        margin-top: -200px;
    }
    60%{
        margin-top: -200px;
    }
    70%{
        margin-top: -400px;
    }
    90%{
        margin-top: -400px;
    }
    100%{
        margin-top: -600px;
    }
 }

.maGiam{
    animation-name: maGiam;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-delay: 2s;
    animation-timing-function: ease-out;

    -webkit-animation-name: maGiam;
    -webkit-animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-delay: 2s;
    -webkit-animation-timing-function: ease-out;

}

@keyframes maGiam {
    0%{
        margin-top: 0;
    }
    30%{
        margin-top: 0;
    }
    40%{
        margin-top: -400px;
    }
    60%{
        margin-top: -400px;
    }
    70%{
        margin-top: -200px;
    }
    90%{
        margin-top: -200px;
    }
    100%{
        margin-top: 0;
    }
}
@-webkit-keyframes maGiam {
    0%{
        margin-top: 0;
    }
    30%{
        margin-top: 0;
    }
    40%{
        margin-top: -400px;
    }
    60%{
        margin-top: -400px;
    }
    70%{
        margin-top: -200px;
    }
    90%{
        margin-top: -200px;
    }
    100%{
        margin-top: 0;
    }
}


.textTang {
    text-transform: uppercase;
    animation: textTang .75s ease-out infinite;
    text-shadow: 0px 0px 5px #72ff06, 0px 0px 7px #96ff8f;
}

@keyframes textTang {
    from {
        text-shadow: 0px 0px 10px #fff,
        0px 0px 10px #ff0302,
        0px 0px 25px #ff7e1f,
        0px 0px 25px #ff000d,
        0px 0px 25px #25ff26,
        0px 0px 25px #67ff12,
        0px 0px 25px #fffa19,
        0px 0px 25px #ff26bd,
        0px 0px 50px #ffb95b,
        0px 0px 50px #ff4707,
        0px 0px 50px #7b96b8,
        0px 0px 150px #7B96B8,
        0px 10px 100px #7B96B8,
        0px 10px 100px #7B96B8,
        0px 10px 100px #7B96B8,
        0px 10px 100px #7B96B8,
        0px -10px 100px #7B96B8,
        0px -10px 100px #7B96B8;
    }
}
.textGiam {
    text-transform: uppercase;
    animation: textGiam 1.75s ease-out infinite;
    text-shadow: 0px 0px 5px red, 0px 0px 7px red;
}

@keyframes textGiam {
    from {
        text-shadow: 0px 0px 10px #ddd,
        0px 0px 10px #000,
        0px 0px 25px #000,
        0px 0px 25px #000,
        0px 0px 25px #000,
        0px 0px 25px #000,
        0px 0px 25px #fffa19,
        0px 0px 25px #38fff7,
        0px 0px 50px #ff7f1e,
        0px 0px 50px #ff4707,
        0px 0px 50px #7b96b8,
        0px 0px 150px #7B96B8,
        0px 10px 100px #7B96B8,
        0px 10px 100px #7B96B8,
        0px 10px 100px #7B96B8,
        0px 10px 100px #7B96B8,
        0px -10px 100px #7B96B8,
        0px -10px 100px #7B96B8;
    }
}

/* iPhone 4 ----------- */
/*MOBILE*/
@media all and (max-width: 599px){

    #canh2-wrap .wrap-ma-tang .ma-tang ul li{
        font-size: 40px;
        font-weight: bold;
        line-height: 200px;
        margin: 0 auto;
        width: 100%;
        text-align: center;
    }

}



/*TABLET*/
@media all and (min-width: 600px) and (max-width:799px){
    #canh2-wrap .wrap-ma-tang .ma-tang ul li{
        font-size: 100px;
        font-weight: bold;
        line-height: 200px;
        margin: 0 auto;
        width: 100%;
        text-align: center;
    }

}
/* WIDTH 800*/
@media all and (min-width: 800px) and (max-width:1023px){

}