#canh4-wrap .wrap-ma-tang{
    width: 100%;
    height: 200px;
    overflow: hidden;
}

#canh4-wrap .wrap-ma-tang .ma-tang{
    width: 100%;
    height: 100%;
}
#canh4-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 1.5s 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 10px #1eff4e;
;
    }
}
.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 #fff,
        0px 0px 50px #ff000d;
    }
}

/* iPhone 4 ----------- */
/*MOBILE*/
@media all and (max-width: 599px){

    #canh4-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){
    #canh4-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){

}