.log-panel > .hd {
    width: 100%;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background: #f9f9f9;
    color: #626262;
    font-size: 18px;
    padding: 9px 0px;
    border-bottom: 1px #cfcfcf solid;
    margin-bottom: 15px;
}

label {
    float: left; font-size:12px !important; color:#000 !important; text-transform:uppercase !important;
}

.log-panel > .data-row {
    padding:7px 15px;
}

.log-panel {
    width: 90%;
    margin: 0px auto;
    border-radius: 12px;
    border: 5px #3c2765 solid;
    background-color: #fff;
}

.r-panel {
    height: 100% !important;
    padding: 10px;
    vertical-align: middle;
    position: fixed;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    right: 0;
    text-align: center;
    background: #323232;
}

.log-btn {
    background-color: rgba(252,139,28,0.9);
    line-height: 40px !important;
    height: 40px !Important; border:0px; border-radius:4px;
}
.log-btn:hover {
    background-color: rgba(252,139,28,0.7);
    line-height: 40px !important;
    height: 40px !Important;
}

.r-panel > .log-block {
    width: 90%;
    margin: 0px auto;
}

.link > a {
    color: #a3a3a3;
    display: block;
}

    .link > a:hover {
        color: #00b2eb;
    }

.l-panel {
    float: left;
}

@media (max-width:768px) {
    .l-panel, .sp-container {
        width: 0%;
        display: none;
    }

    .r-panel {
        width: 100%;
    }
}

@media (min-width:769px) and (max-width:992px) {
    .l-panel, .sp-container {
        width: 55%;
    }

    .r-panel {
        width: 45%;
    }
}

@media (min-width:993px) and (max-width:1199px) {
    .l-panel, .sp-container {
        width: 60%;
    }

    .r-panel {
        width: 40%;
    }
}
@media (min-width:1200px) {
    .l-panel, .sp-container {
        width: 70%;
    }

    .r-panel {
        width: 30%;
    }
}

.sp-container {
    position: absolute;
    top: 0px;
    float: left;
    left: 0px;
    height: 100%;
}

.sp-content {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    z-index: 1000;
}

.sp-container h2 {
    position: absolute;
    top: 50%;
    line-height: 100px;
    height: 90px;
    margin-top: -50px;
    font-size: 90px;
    width: 100%;
    text-align: center;
    color: transparent;
    -webkit-animation: blurFadeInOut 3s ease-in backwards;
    -moz-animation: blurFadeInOut 3s ease-in backwards;
    -ms-animation: blurFadeInOut 3s ease-in backwards;
    animation: blurFadeInOut 3s ease-in backwards;
}

    .sp-container h2.frame-1 {
        -webkit-animation-delay: 0s;
        -moz-animation-delay: 0s;
        -ms-animation-delay: 0s;
        animation-delay: 0s;
    }

    .sp-container h2.frame-2 {
        -webkit-animation-delay: 3s;
        -moz-animation-delay: 3s;
        -ms-animation-delay: 3s;
        animation-delay: 3s;
    }

    .sp-container h2.frame-3 {
        -webkit-animation-delay: 6s;
        -moz-animation-delay: 6s;
        -ms-animation-delay: 6s;
        animation-delay: 6s;
    }

    .sp-container h2.frame-4 {
        font-size: 200px;
        -webkit-animation-delay: 9s;
        -moz-animation-delay: 9s;
        -ms-animation-delay: 9s;
        animation-delay: 9s;
    }

    .sp-container h2.frame-5 {
        -webkit-animation: none;
        -moz-animation: none;
        -ms-animation: none;
        animation: none;
        color: transparent;
        text-shadow: 0px 0px 1px #fff;
    }

        .sp-container h2.frame-5 span {
            -webkit-animation: blurFadeIn 3s ease-in 12s backwards;
            -moz-animation: blurFadeIn 1s ease-in 12s backwards;
            -ms-animation: blurFadeIn 3s ease-in 12s backwards;
            animation: blurFadeIn 3s ease-in 12s backwards;
            color: transparent;
            text-shadow: 0px 0px 1px #fff;
        }

            .sp-container h2.frame-5 span:nth-child(2) {
                -webkit-animation-delay: 13s;
                -moz-animation-delay: 13s;
                -ms-animation-delay: 13s;
                animation-delay: 13s;
            }

            .sp-container h2.frame-5 span:nth-child(3) {
                -webkit-animation-delay: 14s;
                -moz-animation-delay: 14s;
                -ms-animation-delay: 14s;
                animation-delay: 14s;
            }


/**/
@-webkit-keyframes blurFadeInOut {
    0% {
        opacity: 0;
        text-shadow: 0px 0px 40px #fff;
        -webkit-transform: scale(1.3);
    }

    20%,75% {
        opacity: 1;
        text-shadow: 0px 0px 1px #fff;
        -webkit-transform: scale(1);
    }

    100% {
        opacity: 0;
        text-shadow: 0px 0px 50px #fff;
        -webkit-transform: scale(0);
    }
}

@-webkit-keyframes blurFadeIn {
    0% {
        opacity: 0;
        text-shadow: 0px 0px 40px #fff;
        -webkit-transform: scale(1.3);
    }

    50% {
        opacity: 0.5;
        text-shadow: 0px 0px 10px #fff;
        -webkit-transform: scale(1.1);
    }

    100% {
        opacity: 1;
        text-shadow: 0px 0px 1px #fff;
        -webkit-transform: scale(1);
    }
}

@-webkit-keyframes fadeInBack {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
    }

    50% {
        opacity: 0.4;
        -webkit-transform: scale(2);
    }

    100% {
        opacity: 0.2;
        -webkit-transform: scale(5);
    }
}

@-webkit-keyframes fadeInRotate {
    0% {
        opacity: 0;
        -webkit-transform: scale(0) rotate(360deg);
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1) rotate(0deg);
    }
}
/**/
@-moz-keyframes blurFadeInOut {
    0% {
        opacity: 0;
        text-shadow: 0px 0px 40px #fff;
        -moz-transform: scale(1.3);
    }

    20%,75% {
        opacity: 1;
        text-shadow: 0px 0px 1px #fff;
        -moz-transform: scale(1);
    }

    100% {
        opacity: 0;
        text-shadow: 0px 0px 50px #fff;
        -moz-transform: scale(0);
    }
}

@-moz-keyframes blurFadeIn {
    0% {
        opacity: 0;
        text-shadow: 0px 0px 40px #fff;
        -moz-transform: scale(1.3);
    }

    100% {
        opacity: 1;
        text-shadow: 0px 0px 1px #fff;
        -moz-transform: scale(1);
    }
}

@-moz-keyframes fadeInBack {
    0% {
        opacity: 0;
        -moz-transform: scale(0);
    }

    50% {
        opacity: 0.4;
        -moz-transform: scale(2);
    }

    100% {
        opacity: 0.2;
        -moz-transform: scale(5);
    }
}

@-moz-keyframes fadeInRotate {
    0% {
        opacity: 0;
        -moz-transform: scale(0) rotate(360deg);
    }

    100% {
        opacity: 1;
        -moz-transform: scale(1) rotate(0deg);
    }
}
/**/
@keyframes blurFadeInOut {
    0% {
        opacity: 0;
        text-shadow: 0px 0px 40px #fff;
        transform: scale(1.3);
    }

    20%,75% {
        opacity: 1;
        text-shadow: 0px 0px 1px #fff;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        text-shadow: 0px 0px 50px #fff;
        transform: scale(0);
    }
}

@keyframes blurFadeIn {
    0% {
        opacity: 0;
        text-shadow: 0px 0px 40px #fff;
        transform: scale(1.3);
    }

    50% {
        opacity: 0.5;
        text-shadow: 0px 0px 10px #fff;
        transform: scale(1.1);
    }

    100% {
        opacity: 1;
        text-shadow: 0px 0px 1px #fff;
        transform: scale(1);
    }
}

@keyframes fadeInBack {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    50% {
        opacity: 0.4;
        transform: scale(2);
    }

    100% {
        opacity: 0.2;
        transform: scale(5);
    }
}

@keyframes fadeInRotate {
    0% {
        opacity: 0;
        transform: scale(0) rotate(360deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}