@keyframes tutsFade {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

@keyframes animate-fade-top{
    0%{
        padding-top: 10px;
        opacity: .4;
    }
    100%{
        padding-top: 0;
        opacity: 1;
    }
}
@keyframes animate-fade-left{
    0%{
        padding-right: 10px;
        opacity: 0;
    }
    100%{
        padding-right: 0;
        opacity: 1;
    }
}
@keyframes fadein{
    from{opacity: .3;}
    to{opacity: 1;}
}
@-moz-keyframes fadein{
    from{opacity: .6;}
    to{opacity: 1;}
}
@-webkit-keyframes fadein{
    from{opacity: .6;}
    to{opacity: 1;}
}
@-o-keyframes fadein{
    from{opacity: .6;}
    to{opacity: 1;}
}

@keyframes animate-blink-log{
    0%{color: #fff;}
    50%{color: #ff1f1f;}
    100%{color: #fff;}
}
@-moz-keyframes animate-blink-log{
    0%{color: #fff;}
    50%{color: #ff1f1f;}
    100%{color: #fff;}
}
@-webkit-keyframes animate-blink-log{
    0%{color: #fff;}
    50%{color: #ff1f1f;}
    100%{color: #fff;}
}
@-o-keyframes animate-blink-log{
    0%{color: #fff;}
    50%{color: #ff1f1f;}
    100%{color: #fff;}
}
.blink-log{
    animation: animate-blink-log 1s ease-in-out 5;
    -webkit-animation: animate-blink-log 1s ease-in-out 5;
}

@keyframes animate-blink-preview{
    0%{border-color: #0000;}
    50%{border-color: #ff1f1f;}
    100%{border-color: #0000;}
}
@-moz-keyframes animate-blink-preview{
    0%{border-color: #0000;}
    50%{border-color: #ff1f1f;}
    100%{border-color: #0000;}
}
@-webkit-keyframes animate-blink-preview{
    0%{border-color: #0000;}
    50%{border-color: #ff1f1f;}
    100%{border-color: #0000;}
}
@-o-keyframes animate-blink-preview{
    0%{border-color: #0000;}
    50%{border-color: #ff1f1f;}
    100%{border-color: #0000;}
}
.blink-preview:before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 7px solid #0000;
    pointer-events: none;
    box-sizing: border-box;
    z-index: 3;
    animation: animate-blink-preview 1s ease-in-out 5;
    -webkit-animation: animate-blink-preview 1s ease-in-out 5;
}

border: 7px solid #fff;

@keyframes animate-list-in{
    0%{
        margin-bottom: -160px;
        opacity: 0;
    }
    100%{
        margin-bottom: 2px;
        opacity: 1;
    }
}

@keyframes animate-nav-flip{
    0%{
        margin-top: -20px;
        opacity: 0;
    }
    100%{
        margin-top: 0;
        opacity: 1;
    }
}

.tutsFade{
    animation: tutsFade .6s 0s linear alternate;
}
.animate-fade-left{
    animation: animate-fade-left .4s linear alternate;
}
.animate-fade-top{
    animation: animate-fade-top .7s linear alternate;
}

.animate-fade{
    animation: fadein 1000ms cubic-bezier(0.51, 0.04, 0.5, 1.07);
    -moz-animation: fadein 1000ms cubic-bezier(0.42, 0, 0.34, 1.13) ;
    -webkit-animation: fadein 1000ms cubic-bezier(0.42, 0, 0.34, 1.13) ;
    -o-animation: fadein 1000ms cubic-bezier(0.42, 0, 0.34, 1.13) ;
}
.animate-list-in{
    animation: animate-list-in .5s linear alternate;
}
.animate-nav-flip{
    animation: animate-nav-flip .2s linear alternate;
}


body.screen-expend .header{margin-top: -68px;}
body.screen-expend .content-wrapper{height: 100%;}
body.screen-expend .panel-cctv-list{margin-right: -390px;}
body.screen-expend .panel-view{padding: 0;}
body.screen-expend .panel-control{box-shadow: none;padding: 0 16px;}


.animate-expend.header,
.animate-expend.submenu{transition: margin .5s .1s cubic-bezier(0.42, 0, 0.34, 1.13);}
.animate-expend.content-wrapper{transition: height .5s .1s cubic-bezier(0.42, 0, 0.34, 1.13);}
.animate-expend.panel-cctv-list{transition: margin .6s cubic-bezier(0.42, 0, 0.34, 1.13);}
.animate-expend.panel-view{transition: padding .6s cubic-bezier(0.42, 0, 0.34, 1.13);}