body { background: url('../images/bg-login.jpg') no-repeat #3c329e; color: #fff;/* background-size: 100%; */background-size: cover !important; -webkit-background-size: cover !important; -moz-background-size: cover !important; -o-background-size: cover !important; background-size: cover !important; }
.login-container{ position: relative; z-index: 1; }
.login-container .login-box { width: 400px; margin: 0px auto; padding-top: 100px; }
.row { margin-left: -15px; margin-right: -15px; }
.error-container { width: 100%; max-width: 530px; margin: 50px auto 0px; }
#non_organik_container, #organik_container, #non_organik_login, #forget_pass { display: none; }
/*.span-hover { display: none; }
.btn-first:hover span { display: block; transition: 1s; }
.btn-first:hover i { display: none; transition: 1s; }*/
img.img-pkt { max-width: 200px; margin-bottom: 5px; }
img.img-egc { width: 100%; max-width: 160px; margin-bottom: 5px; }
.title-logo { font-size: 16px; color: #fff; }
.welcome { font-size: 36px; color: #fff; margin-top: 40px; }
.desc-title { color: #fff; margin-bottom: 40px; font-size: 17px; }
.login-buttons .btn{ margin-bottom: 10px; }
p.contact { font-size: 16px; color: #fff; }
.contact-div { padding-top: 40px; }
/*.contact-div { position: absolute; bottom: 0; text-align: center; width: 100%; padding: 15px; left: 0; }*/
.btn-first { background: #93cf43 !important; border: none; }
.btn-first span { display: block; padding-top: 5px; }
.btn-first:hover, .btn-first:focus { background:#739e39 !important; }
img.img-login-button { max-width: 35px; margin-right: 10px; float: left; }
.login-body { background: #594f8d; padding: 30px; }
.login-footer { padding-top: 10px; padding-bottom: 10px; }
.login-title { padding-bottom: 10px; font-size: 18px; }
.btn.btn-info.btn-block.btn-login.btn-first.btn-kembali { background: #ed1b24 !important; }
.btn.btn-info.btn-block.btn-login.btn-first.btn-kembali:hover { background: #c81920 !important; }

.bubble-area{
    display: none;
    width: 300px;
    position: fixed;
    top: 0;
    bottom: 0;
}
@media screen and (max-width: 767px){
    .btn.btn-info.btn-block.btn-login.btn-first.btn-kembali {
        margin-top: 10px;
    }
}
@media screen and (min-width: 994px) {
   .bubble-area{
       display: block;
   }
}
.bubble-area.left{
    left: -20px;
}
.bubble-area.right{
    right: -20px;
}

.bubble{
    border: 0;
    display: block;
    width: 50px;
    height: 50px;
    opacity: .6;
    position: absolute;
    left: 50%;
    top: 50%;
}
.bubbling{
    -webkit-animation: bubbling 2s linear .1s infinite;
    -o-animation: bubbling 2s linear .1s infinite;
    animation: bubbling 2s linear .1s infinite;
}
.bubbling2x{
    -webkit-animation: bubbling2x 2s linear .1s infinite;
    -o-animation: bubbling2x 2s linear .1s infinite;
    animation: bubbling2x 2s linear .1s infinite;
}

@-webkit-keyframes bubbling {
    0%{
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
    25%{
        -webkit-transform: translateY(-10px);
        -moz-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
        -o-transform: translateY(-10px);
        transform: translateY(-10px);
    }
    75%{
        -webkit-transform: translateY(10px);
        -moz-transform: translateY(10px);
        -ms-transform: translateY(10px);
        -o-transform: translateY(10px);
        transform: translateY(10px);
    }
    100%{
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
}

@-o-keyframes bubbling {
    0%{
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
    25%{
        -webkit-transform: translateY(-10px);
        -moz-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
        -o-transform: translateY(-10px);
        transform: translateY(-10px);
    }
    75%{
        -webkit-transform: translateY(10px);
        -moz-transform: translateY(10px);
        -ms-transform: translateY(10px);
        -o-transform: translateY(10px);
        transform: translateY(10px);
    }
    100%{
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
}

@-moz-keyframes bubbling {
    0%{
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
    25%{
        -webkit-transform: translateY(-10px);
        -moz-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
        -o-transform: translateY(-10px);
        transform: translateY(-10px);
    }
    75%{
        -webkit-transform: translateY(10px);
        -moz-transform: translateY(10px);
        -ms-transform: translateY(10px);
        -o-transform: translateY(10px);
        transform: translateY(10px);
    }
    100%{
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes bubbling {
    0%{
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
    25%{
        -webkit-transform: translateY(-10px);
        -moz-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
        -o-transform: translateY(-10px);
        transform: translateY(-10px);
    }
    75%{
        -webkit-transform: translateY(10px);
        -moz-transform: translateY(10px);
        -ms-transform: translateY(10px);
        -o-transform: translateY(10px);
        transform: translateY(10px);
    }
    100%{
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
}
@-webkit-keyframes bubbling2x {
    0%{
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
    25%{
        -webkit-transform: translateY(-20px);
        -moz-transform: translateY(-20px);
        -ms-transform: translateY(-20px);
        -o-transform: translateY(-20px);
        transform: translateY(-20px);
    }
    75%{
        -webkit-transform: translateY(20px);
        -moz-transform: translateY(20px);
        -ms-transform: translateY(20px);
        -o-transform: translateY(20px);
        transform: translateY(20px);
    }
    100%{
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
}

@-o-keyframes bubbling2x {
    0%{
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
    25%{
        -webkit-transform: translateY(-20px);
        -moz-transform: translateY(-20px);
        -ms-transform: translateY(-20px);
        -o-transform: translateY(-20px);
        transform: translateY(-20px);
    }
    75%{
        -webkit-transform: translateY(20px);
        -moz-transform: translateY(20px);
        -ms-transform: translateY(20px);
        -o-transform: translateY(20px);
        transform: translateY(20px);
    }
    100%{
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
}

@-moz-keyframes bubbling2x {
    0%{
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
    25%{
        -webkit-transform: translateY(-20px);
        -moz-transform: translateY(-20px);
        -ms-transform: translateY(-20px);
        -o-transform: translateY(-20px);
        transform: translateY(-20px);
    }
    75%{
        -webkit-transform: translateY(20px);
        -moz-transform: translateY(20px);
        -ms-transform: translateY(20px);
        -o-transform: translateY(20px);
        transform: translateY(20px);
    }
    100%{
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes bubbling2x {
    0%{
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
    25%{
        -webkit-transform: translateY(-20px);
        -moz-transform: translateY(-20px);
        -ms-transform: translateY(-20px);
        -o-transform: translateY(-20px);
        transform: translateY(-20px);
    }
    75%{
        -webkit-transform: translateY(20px);
        -moz-transform: translateY(20px);
        -ms-transform: translateY(20px);
        -o-transform: translateY(20px);
        transform: translateY(20px);
    }
    100%{
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
}