/*Theme Name: GIDKP
Theme URI: www.dietkantongplastik.info
Description: theme wordpress untuk website dietkantongplastik.info. Theme bukan untuk publik. Hak cipta pada dietkantongplastik.info.
Version: 1.0
Author: Bhawika Arthadhana - Kumata Studio
Author Bhawika Arthadhana
Author URI: http://www.kumata-studio.com/
Version: 1
*/
/*GENERAL */

/*
    font content = font-family: 'Lato', sans-serif;
    font title = font-family: BebasNeue;
    font article = font-family: 'Lora', serif;

*/


/* GENERAL */
* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

@font-face {
    font-family: BebasNeue;
    src: url(font/BebasNeue.otf);
}

HTML,
BODY {
    padding: 0;
    margin: 0;
}

BODY {
    font-family: 'Lato', sans-serif;
    color: #555;
    font-size: 16px;
}

BODY * {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

A {
    color: #555;
    text-decoration: none;
    transition: all ease-out 0.2s;
    -webkit-transition: all ease-out 0.2s
}

A:hover {
    text-decoration: none;
    color: #666;
}

A IMG {
    border: 0;
}

p {
    margin-top: 20px;
    margin-bottom: 20px;
    line-height: 1.4em;
}

article P, article DIV {
    font-size: 18px;
    line-height: 1.5em;
    margin: 0 0 30px;
}
article OL, article UL {
    font-size: 18px;
    line-height: 1.5em;
}
article OL LI, article UL LI {
    margin-bottom: 5px;
}


::-webkit-input-placeholder {
    color:    #555;
}
:-moz-placeholder {
    color:    #555;
}
::-moz-placeholder {
    color:    #555;
}
:-ms-input-placeholder {
    color:    #555;
}



/* LAYOUT */

.wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 80px 60px;
}
.wrap-medium {
    padding: 50px 60px;
}
.wrap-header {
    max-width: 1366px;
    padding: 30px 60px!important;   
}
.wrap-long {
    padding: 0!important;
    max-width: 1366px;
}
.wrap-article {
    width: 800px;
    padding: 80px 40px;
}
.wrap-article article {
    font-family: 'Lora', serif;
    font-size: 20px;
}
.wrap-article article IFRAME {
    width: 100%;
    height: 405px;
    border: none;
}


/* TABLE DISPLAY */
.table {
    display: table;
    width: 100%;
    height: 100%;
}
.table > DIV {
    display: table-cell;
}
UL.table > LI {
    display: table-cell;
}


/* TABLE COL */
.table-col {
    position: relative;
}
.table-col > DIV {
    vertical-align: middle;
    padding: 20px;
}
.table-col-35-65 > DIV:nth-child(1) {
    width: 35%;
}
.table-col-35-65 > DIV:nth-child(2) {
    width: 65%;
}
.table-col-65-35 > DIV:nth-child(1) {
    width: 65%;
}
.table-col-65-35 > DIV:nth-child(2) {
    width: 35%;
}
.table-col-25-75 > DIV:nth-child(1) {
    width: 25%;
}
.table-col-25-75 > DIV:nth-child(2) {
    width: 75%;
}
.table-col-info-content {
    background: #5ABFC7;
    color: #FFF;
    padding: 40px 60px;
}
.table-col-info-content .section-title {
    color: #FFF!important;
    margin: 0 0 10px!important;
    text-align: left;
}
.table-col-info-desc {
    font-size: 16px;
}
.table-col-info-image {
    min-height: 350px;
}
.table-col-content {
    padding: 40px 60px!important;
}
.table-col-action {
    margin-top: 20px;
}
.table-col-action .button {
    margin: 0 10px 10px 0;
}
.table-col-action .button:last-child {
    margin: 0 0 10px;
}
.table-col-nav-bottom {
    padding: 20px;
}
.table-valign-top > DIV {
    vertical-align: top!important;
}



/* LIST TABLE COL */

.list-table-col {
    padding: 0;
    margin: 0;
    list-style: none;
}
.list-table-col > LI {
    display: inline-block;
    vertical-align: top;
    width: 45%;
    margin: 0 20px 20px 0;
    padding: 20px 40px;
    background: #FFF;
    transition: all ease-out 0.2s;
    -webkit-transition: all ease-out 0.2s
}
.list-table-col > LI:hover {
    box-shadow: 0 3px 7px #999;
    transform: translateY(-1px);
    -webkit-transform: translateY(-1px);
}
.list-table-col-inside > LI {
    padding: 0;
}
.list-table-col-inside > LI:hover {
    padding: 0;
    box-shadow: none;
    transform: none;
    -webkit-transform: none;
}
.list-table-col > LI:hover .list-table-col-action .button {
    box-shadow: 0 3px 6px #333;
    transform: translateY(-3px);
    -webkit-transform: translateY(-3px);
    border: transparent 2px solid!important;
}
.list-table-col-subtitle-top {
    color: #5ABFC7;
    font-weight: 700;
    text-transform: capitalize;
    font-size: 14px;
    margin-bottom: 10px;
}
.list-table-col-subtitle-bottom {
    font-size: 12px;
    text-transform: uppercase;
}
.list-table-col-title {
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 700
}

.list-table-col-action {
    margin-top: 20px;
}
.list-table-col-action A {
    color: #555;
}





/*  FORM  */
.form-group {
    margin-bottom: 40px;
}
.form-title {
    text-transform: uppercase;
    font-family: BebasNeue;
    font-size: 25px;
    margin-bottom: 10px;
}
.form-list {
    padding: 0;
    margin: 0;
    list-style: none;
}
.form-list > LI, .form-list > DIV {
    display: block;
    padding: 5px 0;
}
.form-list .label {
    display: block;
    margin-bottom: 10px;
}
.label-right {
    margin-left: 15px;
}
input[type="text"],  input[type="email"], 
input[type="password"] {
    padding: 8px 15px;
    border: 1px solid #5ABFC7;
    width: 100%;
    border-radius: 3px;
}
input[type="date"] {
    padding: 8px 15px;
    border: 1px solid #5ABFC7;
    width: 180px;
    border-radius: 3px;
}
SELECT {
    padding: 8px 15px;
    border: 1px solid #5ABFC7;
    width: 100%;
    color: #555;
    border-radius: 3px;
}
textarea {
    padding: 8px 15px;
    border: 1px solid #5ABFC7;
    width: 100%;
    min-height: 150px;
    border-radius: 3px;
}
.form-input-desc {
    font-size: 14px;
    font-style: italic;
    margin-top: 5px;
}
.form-inline {
    display: inline-block;
    vertical-align: top;
    margin-right: 40px;
}
.button-form-bottom {
    margin-top: 20px;
}
.form-center {
    display: block;
    max-width: 580px;
    margin: 0 auto;
}





/* HEADER */
.header {
    display: table;
    width: 100%;
}
.header > DIV {
    display: table-cell;
    vertical-align: middle;
}
.header-left {
    width: 30%;
    text-align: left;
}
.header-right {
    width: 70%;
    text-align: right;
}

.header-menu-top {
    display: inline-block;
    vertical-align: middle;
    padding: 0;
    margin: 0;
    list-style: none;
}
.header-menu-top > LI {
    display: inline-block;
    vertical-align: middle;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 400;
    margin-right: 15px;
}
.search-top {
    display: inline-block;
    vertical-align: middle;
    padding: 6px 15px;
    border: 1px solid #DDD;
    border-radius: 35px;
    -webkit-border-radius: 35px; 
    -moz-border-radius: 35px; 
    margin-left: 10px;
    background: #FFF
}
header #input-search-top {
    width: 1px;
    height: 1px;
    padding: 0!important;
    border: none!important;
    color: #555;
    transition: width 0.5s;
    -webkit-transition: width 0.5s;
    vertical-align: middle;
}
#input-search-top::-webkit-input-placeholder {
    color: #555;
    font-size: 12px;
}
#input-search-top:-moz-placeholder {
    color: #555;
    font-size: 12px;
}
#input-search-top::-moz-placeholder {
    color: #555;
    font-size: 12px;
}
#input-search-top:-ms-input-placeholder {
    color: #555;
    font-size: 12px;
}

#text-search-top {
    font-size: 12px;
    margin-right: 7px;
    vertical-align: middle;
    display: inline-block;
    width: 50px;
    text-align: center;
}
#submit-search-top {
    border: none;
    vertical-align: middle;
    margin-right: 0!important
}
.header-socmed-top {
    display: inline-block;
    vertical-align: middle;
    padding: 0;
    margin: 0 0 0 25px;
    list-style: none;
}
.header-socmed-top > LI {
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
}

.header-menu-main > UL, 
.header-menu-additional > UL {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
    display: block;
}
.header-menu-additional {
    display: none;
    margin: 0;
}
.header-menu-main > UL > LI, 
.header-menu-additional > UL > LI {
    display: inline-block;
    vertical-align: middle;
    position: relative;
}

.header-menu-main > UL > LI > A {
    border: 1px solid #FFF;
}    
    
.header-menu-main LI A, 
.header-menu-additional LI A {
    display: block;
    padding: 10px 20px;
    font-family: BebasNeue;
    font-size: 22px;
}
.header-menu-main > UL > LI.menu-item-has-children:hover > A {
    background: #5ABFC7;
    color: #FFF;
    border-bottom: 0
}
.header-menu-main > UL > LI.menu-item-has-children:hover > UL {
    display: block;
}
.header-menu-main > UL > LI.menu-item-has-children > A:after {
    display: inline-block;
    vertical-align: middle;
    content: "";
    margin-left: 10px;
    border-right: transparent 5px solid;
    border-left: transparent 5px solid;
    border-top: #555 5px solid;
}
.header-menu-main > UL > LI.menu-item-has-children:hover > A:after {
    border-top: #FFF 5px solid;
}
.header-menu-main > UL > LI.menu-item-has-children > UL, 
.header-menu-main LI.menu-item-has-children-child > UL {
    list-style: none;
    padding: 10px 0;
    margin: -1px 0 0 0;
    position: absolute;
    text-align: left;
    width: 250px;
    background: #5ABFC7;
    display: none;
    z-index: 999999999;
    border: 1px solid #FFF;
    border-top: 0
}
.header-menu-main LI.menu-item-has-children-child > UL {
    margin-left: -1px;
    border-top: 1px solid #FFF;
}
.header-menu-main > UL > LI.menu-item-has-children-right > UL {
    right:0;
}
.header-menu-main > UL > LI.menu-item-has-children > UL A, 
.header-menu-main LI.menu-item-has-children-child > UL A {
    color: #FFF
}

.header-menu-main LI.menu-item-has-children-child:hover > UL {
    display: block;
}
.header-menu-main LI.menu-item-has-children-child > UL {
    left: 250px;
    top: 0;
}
.header-menu-main LI.menu-item-has-children UL LI:hover > A {
    background: #2C787E;
}

.header-menu-main LI.menu-item-has-children-child > A:after {
    display: inline-block;
    vertical-align: middle;
    content: "";
    margin-left: 10px;
    border-bottom: transparent 5px solid;
    border-top: transparent 5px solid;
    border-left: #FFF 5px solid;
}
.header-menu-main ul.sub-menu {
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
}
.menu-on-mobile {
    font-size: 25px;
    text-transform: uppercase;
    display: none;
    cursor: pointer;
    font-family: BebasNeue;
    vertical-align: middle
}
.menu-on-mobile IMG {
    width: 25px;
    vertical-align: middle;
    margin-left: 10px;
    display: inline-block;
}
.menu-on-mobile-close {
    display: none;
    text-align: right;
    margin-bottom: 10px;
    position: fixed;
    top: 0;
    right: 0;
    width: 250px;
    padding: 10px 20px;
    background: #5ABFC7;
    cursor: pointer;
    z-index: 9999999
}
.menu-on-mobile-close IMG {
    width: 25px;
}
.cover-menu-top {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999999;
    display: none;
    position: fixed;
    background: rgba(255, 255, 255, 0.78);
}
.header-menu-user {
    padding: 0;
    margin: 0;
    margin-left: 15px;
    list-style: none;
    display: inline-block;
    vertical-align: middle;
    background: #5ABFC7;
    border-radius: 5px;
    color: #FFF;
}

.header-menu-user > LI {
    display: inline-block;
    vertical-align: middle;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 400;
    position: relative;
    padding: 10px 15px;
}
.header-menu-user > LI > A {
    color: #FFF   
}
.header-menu-user > LI.menu-item-has-children > A:after {
    display: inline-block;
    vertical-align: middle;
    content: "";
    margin-left: 10px;
    border-right: transparent 5px solid;
    border-left: transparent 5px solid;
    border-top: #FFF 5px solid;
}
.header-menu-user > LI.menu-item-has-children:hover UL {
    display: block;
}
.header-menu-user P {
    margin: 0!important;
    line-height: normal!important;
}
.header-menu-user UL {
    padding: 10px 0;
    margin: 0;
    list-style: none;
    position: absolute;
    background: #5ABFC7;
    z-index: 10;
    left: 0;
    display: none;
    width: 100%;
    border-radius: 0 0 5px 5px;
}
.header-menu-user UL LI {
    display: block;
    padding: 0;
    margin: 0;
}
.header-menu-user UL LI A {
    display: block;
    padding: 5px 15px;
    margin: 0;
    text-align: left;
    color: #FFF;
}
.header-menu-user UL LI A:hover {
    background: #2C787E;
}


/* LOGO */
.logo-top IMG {
    width: 83px;
}

.avatar-mobile {
    display: none;
    vertical-align: middle;
    margin-right: 20px;
    position: relative;
}
.avatar-mobile:after {
    display: inline-block;
    vertical-align: middle;
    content: "";
    margin-left: 5px;
    border-right: transparent 5px solid;
    border-left: transparent 5px solid;
    border-top: #333 5px solid;
}
.avatar-mobile-img {
    display: inline-block;
    vertical-align: middle;
    height: 40px;
    width: 40px;
    overflow: hidden;
    border-radius: 100px;
}
.avatar-mobile-img IMG {
    display: block;
    width: 100%;
    height: auto;
}
.avatar-mobile UL {
    padding: 5px 0;
    margin: 0;
    list-style: none;
    position: absolute;
    background: #FFF;
    text-align: left;
    top: 40px;
    left: 0;
    z-index: 9999999;
    box-shadow: 0 3px 5px #555;
    width: auto!important
}
.avatar-mobile UL LI {
    padding: 0;
    margin: 0;
    border-bottom: 1px solid #EEE
}
.avatar-mobile UL LI:last-child {
    border: none;
}
.avatar-mobile UL LI A {
    padding: 5px 20px;
    margin: 0;
    display: block;
    text-transform: uppercase;
    font-size: 12px;
    color: #555!important;
}
.avatar-mobile UL P {
    margin: 0;
}

/* LANGUAGE POLYLANG */
.language-top {
    display: inline-block;
    padding: 0;
    margin: 0 0 0 25px;
    list-style: none;
}
.language-top > A {
    display: inline-block;
    vertical-align: middle;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    margin-left: 5px;
}
.language-top > A IMG,
.language-top > A SPAN {
    vertical-align: middle;
    display: inline-block;
}



/* HERO */
#hero {
    background-color: #5ABFC7;
}
.hero {
    display: table;
    width: 100%;
    height: 400px;
}
.hero > DIV {
    display: table-cell;
    vertical-align: middle;
}
.hero-image {
    width: 40%;
    text-align: center;
    padding: 40px;
    position: relative;
    min-height: 250px;
}
.hero-content {
    width: 60%;
    color: #FFF;
    padding: 40px 60px;
    font-weight: 100;
}
.hero.hero-home {
    height: 480px;
}
.hero-image.has-layer:before {
    content: "";
    background: rgba(13, 57, 60, 0.2);
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    top: 0;
    left: 0;
}
.hero-home .hero-image {
    width: 60%;
    min-height: auto;
}
.hero-home .hero-content {
    width: 40%;
    text-align: left;
    font-weight: 400;
    padding: 40px 60px;
}
.hero-list {
    padding: 0;
    margin: 0;
    list-style: none;
    width: 350px;
    display: inline-block;
    text-align: left;
}
.hero-list LI {
    margin-bottom: 40px;
}
.hero-list LI:last-child {
    margin-bottom: 0;
}
.hero-list-title {
    font-family: BebasNeue;
    font-size: 23px;
    line-height: 1em;
    margin-bottom: 10px;
}
.hero-list LI:hover .hero-list-title {
    color: #B9F6FB;
}
.hero-list-content {
    font-size: 16px;
}
.hero-list-action {
    margin-top: 25px;
}
.slick-prev {
    right: 80px;
    left: auto!important;
}
.slick-next {
    right: 40px!important;
}
.slick-prev, .slick-next {
    bottom: 30px;
    top: auto!important;
    z-index: 999;
}
.slick-prev:before, .slick-next:before {
    font-size: 35px!important;
    width: 40px!important;
    height: 40px!important;
}
.slick-track:focus {
    outline: none!important
}
.slick-track *:focus {
    outline: none!important
}


.nav-in-hero {
    list-style: none;
    padding: 0;
    margin: 0;
}
.nav-in-hero LI {
    display: inline-block;
    vertical-align: top;
    margin: auto 15px 15px auto;
    color: #FFF;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 400;
}
.nav-in-hero LI A {
    color: #FFF;
}
.nav-in-hero LI A:hover {
    color: #C7FBFF;
}

    

/* PAGE TITLE & HERO CONTENT */
.page-title-big {
    font-family: BebasNeue;
    font-size: 60px;
    color: #FFF;
    line-height: 1em;
    text-shadow: 0 0 5px #555;
    font-weight: normal;
    position: relative;
    margin: 0;
}
.page-title-small {
    font-size: 14px;
    font-weight: normal;
    margin: 0 0 5px;
    text-transform: uppercase;
    color: #FFF;
}
.hero-content-title {
    font-size: 30px;
    font-weight: 400;
    margin-bottom: 20px;
}
H1.hero-content-title {
    font-weight: normal;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
}
.hero-content-subtitle {
    font-size: 20px;
    line-height: 1.2em;
    text-transform: capitalize;
}
.hero-content-action {
    margin-top: 40px;
}
.hero-content-action .button {
    margin: 0 10px 15px 0;
}


/*  
    ====== MODULE =====
*/


/* SECTION */
.section {
    padding: 0;
    margin: 0;
}
.section-title {
    font-family: BebasNeue;
    font-size: 40px;
    line-height: 1em;
    color: #5ABFC7;
    font-weight: normal;
    display: block;
    margin: 0 0 40px;
    text-align: center;
}
.section-desc {
    font-size: 18px;
    margin: 0 auto 40px auto;
    max-width: 750px;
    text-align: center;
    line-height: 1.3em;
}
.section-title.has-desc {
    margin-bottom: 20px;
}
.section-title-medium {
    font-size: 30px!important;
    margin: 0 0 20px;
}
.section-title-small {
    font-size: 25px!important;
    margin: 0 0 15px;
}
.section-title-no-bottom {
    margin: 0!important
}

.section-poster .table > DIV {
    padding: 0;
}




/* LIST-CARD */

.list-card {
    padding: 0;
    margin: 0;
    list-style: none;
}
.list-card > LI {
    width: 45%;
    display: inline-block;
    vertical-align: middle;
    margin: 0 60px 40px 0;
}
.list-card > LI:nth-child(2n) {
    margin: 0 0 40px 0;
}
.list-card-title {
    font-weight: 700;
    font-size: 20px;
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin-bottom: 5px;
}

.list-card-action {
    padding: 0;
    margin: 20px 0 0;
    list-style: none;
    display: table;
    width: 100%;
    font-size: 14px;
}
.list-card-action > LI {
    display: table-cell;
    vertical-align: middle;
    padding: 0;
}
.list-card-action > LI:nth-child(1) {
    padding-right: 10px;
}
.list-card-action > LI:nth-child(2) {
    text-align: right;
    padding-left: 10px;
}
.list-card-action-more {
    margin: 0;
    display: table;
    border: 1px solid #DDD;
    border-radius: 5px;
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    transition: all ease-out 0.2s;
    -webkit-transition: all ease-out 0.2s
}
.list-card-action-more:hover {
    box-shadow: 0 3px 7px #999;
    border: 1px solid transparent;
    transform: translateY(-1px);
    -webkit-transform: translateY(-1px);
}
.list-card-action-more > DIV {
    display: table-cell;
    vertical-align: middle;    
    padding: 25px;
}


.list-card-medium > LI {
    margin: 0 20px 20px 0;
}
.list-card-medium > LI:nth-child(2n) {
    margin: 0 0 20px 0;
}


/* testimonial box */
.div-list-testimonial {
    padding-bottom: 80px;
}
.list-testimonial {
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
}
.testimonial-box {
    color: #FFF;
    min-height: 330px;
    display: table;
}
.list-testimonial .testimonial-box {
    margin-bottom: 30px;
}
.testimonial-box > DIV {
    display: table-cell;
}
.testimonial-box-pic {
    width: 40%;
}
.testimonial-box-content {
    width: 60%;
}
.testimonial-box-content .table > DIV {
    padding: 40px 60px 0;
    vertical-align: middle;
    font-weight: 100;
}
.testimonial-box-quote {
    margin-bottom: 20px;
    position: relative;
    font-size: 18px;
    line-height: 1.4em;
    text-align: justify;
}
.testimonial-box-quote:before {
    content: '"';
    display: block;
    position: absolute;
    top: 25px;
    left: -20px;
    color: #FFF;
    font-size: 45px;
    padding: 0;
    margin: 0;
    line-height: 0;
    font-family: BebasNeue;
}
.testimonial-box-quote:after {
    content: '"';
    display: inline-block;
    vertical-align: bottom;
    color: #FFF;
    font-size: 45px;
    padding: 0;
    margin: 0 0 0 5px;
    line-height: 0;
    font-family: BebasNeue;
}
.testimonial-box-quote A {
    color: #FFF
}
.testimonial-box-name {
    font-size: 20px;
    margin-bottom: 5px;
    font-weight: 400;
}
.testimonial-box-title {
    font-style: italic;
}
.testimonial-box-action {
    display: table;
    font-size: 14px;
    width: 100%;
    padding: 40px 60px;
}
.testimonial-box-action > DIV {
    display: table-cell;
    vertical-align: middle;
}
.testimonial-box-action-left {
    text-align: left;
}
.testimonial-box-action-right {
    text-align: right;
}
.testimonial-box-action .sosmed {
    margin-bottom: auto!important;
}




/* DONASI */




/* TITLE COLUMN */
.title-column {
    display: table;
    width: 100%;
    margin-bottom: 40px;
}
.title-column > DIV {
    display: table-cell;
    vertical-align: middle;
}
.title-column-title {
    width: 40%;
    padding: 0 20px 0 0
}
.title-column-title .section-title {
    margin: 0;
    text-align: left;
}
.title-column-desc {
    width: 60%;
    font-size: 20px;
    padding: 0 0 0 20px;
    position: relative;
    min-height: 25px;
}
.title-column-desc-right {
    text-align: right
}

.title-column-bottom {
    margin-top: 40px;
    display: table;
    width: 100%;
}
.title-column-bottom > DIV {
    display: table-cell;
    vertical-align: top;
}
.title-column-bottom-left {
    text-align: left;
    padding-right: 20px;
}
.title-column-bottom-left .button {
    margin: 0 10px 10px 0;
}
.title-column-bottom-right {
    text-align: right;
    padding-left: 20px;
}


/* LONG BANNER */
.long-banner {
    height: 400px;
    position: relative;
}
.long-banner-title {
    background: #5ABFC7;
    color: #FFF;
    position: absolute;
    max-width: 300px;
    height: auto;
    padding: 30px 50px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    display: block;
    margin-bottom: 0!important
}


/*  BOX COLOR  */
.box-color {
    padding: 0;
    margin: 0;
    list-style: none;
    color: #FFF;
}
.box-color A {
    color: #FFF   
}
.box-color > LI {
    display: inline-block;
    width: 310px;
    height: 400px;
    margin: 0 10px 10px 0;
    position: relative;
    vertical-align: top;
    transition: all ease-out 0.2s;
    -webkit-transition: all ease-out 0.2s
}
.box-color > LI:hover {
    box-shadow: 0 7px 15px #999;
    transform: translateY(-1px);
    -webkit-transform: translateY(-1px);
}
.box-color-content {
    padding: 20px 30px;
}
.box-color-icon {
    text-align: right;
}
.box-color-title {
    font-family: BebasNeue;
    font-size: 25px;
    line-height: 1em;
    margin-bottom: 10px;
}
.box-color-desc {
    margin-bottom: 20px;
}
.box-color-list {
    padding: 0;
    margin: 0;
    list-style: none;
    margin-top: 20px;
}
.box-color-list > LI {
    text-transform: uppercase;
    padding: 0;
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    border-top: 1px solid #FFF;
    transition: all ease-out 0.2s;
    -webkit-transition: all ease-out 0.2s
}
.box-color-list > LI:first-child {
    border-top: 0;
}

.box-color-list > LI:hover {
    box-shadow: 0 3px 5px #555;
    border-top: transparent 1px solid;
}
.box-color-list > LI:hover + LI {
    border-top: transparent 1px solid;
}
.box-color-list > LI:hover A {
    padding: 10px 0 10px 15px;
}
.box-color-list > LI A {
    display: block;
    padding: 10px 0;
    margin: 0;
    transition: all ease-out 0.2s;
    -webkit-transition: all ease-out 0.2s
}

.box-color-bottom {
    padding: 5px;
    text-align: right;
    text-transform: uppercase;
    font-size: 14px;
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
}

.box-color-bottom .button-medium {
    padding: 10px 25px;
}
.box-color > LI.bg-green .box-color-bottom {
    background: #568028;
}
.box-color > LI.bg-blue .box-color-bottom {
    background: #2C787E
}
.box-color > LI.bg-brown .box-color-bottom {
    background: #876423
}
.box-color > LI.bg-red .box-color-bottom {
    background: #B76533
}


/* LIST BOX */
.list-box {
    padding: 0;
    margin: 0;
    list-style: none;
}
.list-box > LI {
    display: inline-block;
    vertical-align: top;
    margin: 0 10px 10px 0;
    width: 230px;
    min-height: 300px;
    overflow: hidden;
    padding: 0;
    background: #FFF;
    transition: all ease-out 0.2s;
    -webkit-transition: all ease-out 0.2s
}
.list-box > LI:hover {
    box-shadow: 0 7px 15px #999;
    transform: translateY(-1px);
    -webkit-transform: translateY(-1px);
}
.list-box-cover {
    width: 100%;
    height: 120px;
    min-height: 120px;
    overflow: hidden;
    position: relative;
}
.list-box-cover-title {
    font-family: 'Yanone Kaffeesatz', sans-serif;
    color: #FFF;
    font-size: 45px;
    position: absolute;
    width: 100%;
    height: 50%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    padding: 0 10px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.list-box-title {
    font-size: 16px;
    padding: 20px;
}
.list-box-title-warn {
    color: #B90000;
    font-size: 10px;
    text-transform: uppercase;
    margin-bottom: 5px;
}



/* LIST BOX LONG */

.list-box-long {
    padding: 0;
    margin: 0;
    list-style: none;
}
.list-box-long > LI {
    padding: 20px;
    background: #FFF;
    margin-bottom: 10px;
    transition: all ease-out 0.2s;
    -webkit-transition: all ease-out 0.2s
}
.list-box-long-title {
    margin-bottom: 10px;
    font-weight: 600;
}
.list-box-long > LI:hover {
    box-shadow: 0 7px 15px #999;
    transform: translateY(-1px);
    -webkit-transform: translateY(-1px);
}



/* LIST SUB CATEGORY */

.list-sub-category {
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0;
    font-size: 0;
    text-align: center;
}
.list-sub-category > LI {
    display: inline-block;
    padding: 0;
    margin: 0;
    vertical-align: middle;
    border: 1px solid #5ABFC7;
    border-right: none;
    transition: all ease-out 0.2s;
    -webkit-transition: all ease-out 0.2s
}
.list-sub-category > LI.current-cat {
    background: #5ABFC7;
}
.list-sub-category > LI:last-child {
    border-right: 1px solid #5ABFC7;
}
.list-sub-category > LI:hover {
    box-shadow: 0 3px 6px #999;
    transform: translateY(-3px);
    -webkit-transform: translateY(-3px);
    border: transparent 1px solid!important;
}
.list-sub-category > LI A {
    display: block;
    padding: 10px 20px;
    text-align: center;
    text-transform: uppercase;
    font-size: 14px;
}
.list-sub-category > LI.current-cat A {
    color: #FFF;
}


/* LIST-LOGO */

.list-logo {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center
}
.list-logo > LI {
    display: inline-block;
    margin: auto 20px 20px auto;
}
.list-logo > LI IMG {
    height: 150px;
}
#partners-home .list-logo > LI IMG {
    height: 100px;
}


/* LIST DROP DOWN */
.list-dropdown {
    padding: 0;
    margin: 0;
    list-style: none;
}
.list-dropdown > LI {
    margin-bottom: 10px;
    padding: 0;
    background: #5ABFC7;
    cursor: pointer;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    transition: all ease-out 0.2s;
    -webkit-transition: all ease-out 0.2s
}
.list-dropdown-title {
    padding: 10px 20px;
    color: #FFF;
    border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    margin: 0;
    transition: all ease-out 0.2s;
    -webkit-transition: all ease-out 0.2s
}
.list-dropdown > LI:hover {
    box-shadow: 0 3px 6px #999;
    transform: translateY(-3px);
    -webkit-transform: translateY(-3px);
}

.list-dropdown-desc {
    display: none;
    padding: 10px 20px;
    background: #FFF;
    margin: 0;
    font-size: 14px;
    border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
}
.list-dropdown-desc P {
    margin-top: 10px;
    margin-bottom: 10px;
}



/* LIST ROUND */
.list-round {
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}
.list-round > LI {
    display: inline-block;
    margin: 0 20px 20px;
    vertical-align: top;
    width: 150px;
}

.list-round-img {
    width: 140px;
    height: 140px;
    text-align: center;
    border-radius: 100%;
    overflow: hidden;
    padding: 15px;
    background: #FFF;
    transition: all ease-out 0.2s;
    -webkit-transition: all ease-out 0.2s
}
.list-round > LI:hover .list-round-img {
    box-shadow: 0 7px 15px #999;
    transform: translateY(-1px);
    -webkit-transform: translateY(-1px);
}
.list-round-img-mask {
    border-radius: 100%;
    width: 100px;
    height: 100px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    vertical-align: middle;
    border-radius: 100%;
    -webkit-border-radius: 100%; 
    -moz-border-radius: 100%; 
}
.list-round-img IMG {
    width: 100%;
    height: auto;
    display: block;
}
.list-round-title {
    font-size: 18px;
    text-transform: capitalize;
    font-weight: 700;
    margin-bottom: 5px;
    margin-top: 10px;
    /*text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
	width: 100%;*/
}
.list-round-subtitle {
    font-size: 14px;
}
.list-round-desc {
    font-size: 14px;
}


/* LISX IMAGE BOX */
.list-image-box {
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}
.list-image-box > LI {
    display: inline-block;
    margin: 0 10px 20px;
    vertical-align: top;
    width: 30%;
}
.list-image-box > LI:hover .list-image-box-img {
    box-shadow: 0 7px 15px #999;
    transform: translateY(-1px);
    -webkit-transform: translateY(-1px);
}
.list-image-box-img {
    width: 300px;
    height: 200px;
    text-align: center;
    overflow: hidden;
    padding: 15px;
    background: #FFF;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    transition: all ease-out 0.2s;
    -webkit-transition: all ease-out 0.2s;
}
.list-image-box-title {
    font-size: 18px;
    text-transform: capitalize;
    font-weight: 700;
    padding: 10px;
}


/* LIST TEXT VERTICAL */
.list-text-vertical {
    padding: 0;
    margin: 0;
    list-style: none;
}
.list-text-vertical > LI {
    margin-bottom: 10px;
    border-bottom: 1px solid #4EAAB1;
}
.list-text-vertical > LI:hover {
    background: #4EAAB1;
}



/* FOLLOW HOME */
.list-follow-home {
    display: block;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}
.list-follow-home > LI {
    display: inline-block;
    vertical-align: middle;
    margin: 5px;
    border-radius: 40px;
    background: #7aac40;
    transition: all ease-out 0.2s;
    -webkit-transition: all ease-out 0.2s;
}
.list-follow-home > LI:hover {
    transform: translateY(-1px);
    -webkit-transform: translateY(-1px);
    box-shadow: 0 7px 15px #5d8430;
}
.list-follow-home > LI IMG {
    display: block;
}



/* DAFTAR-AKSI */
#daftar-aksi.list-text-vertical {
    overflow-y: auto;
    height: 300px;
}
#daftar-aksi.list-text-vertical > LI {
    margin-bottom: 0;
    margin: 0;
    cursor: pointer;
}
#daftar-aksi.list-text-vertical > LI > DIV {
    padding: 10px 30px;
}

#daftar-aksi::-webkit-scrollbar-track
{
	-webkit-box-shadow: none;
	background-color: #5ABFC7;
}

#daftar-aksi::-webkit-scrollbar
{
	width: 14px;
	background-color: #5ABFC7;
    
}

#daftar-aksi::-webkit-scrollbar-thumb
{
	background-color: #2C787E;
	border: none;
    border: 2px #5ABFC7 solid;
    border-radius: 15px;
}




/* CALL TO ACTION */
.call-action-bottom {
    text-align: center;
}
.call-action-bottom .button {
    margin: 0 10px 10px 0;
}
.call-action-bottom .button:last-child {
    margin: 0 0 10px 0;
}




/* POPBOX */
.pop-box {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999999999;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8)
}
.pop-box-title {
    font-family: BebasNeue;
    font-size: 26px;
    color: #5ABFC7
}
.pop-content {
    padding: 40px;
    height: 570px;
    width: 700px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background: #FFF;
    box-shadow: 0 0 15px #AAA;
}
.pop-box-close {
    font-weight: 800;
    position: absolute;
    top: 15px;
    right: 15px;
    color: #5ABFC7;
    cursor: pointer;
}



/* SUBSCRIBE FOOTER */
.subscribe-footer-desc {
    margin-bottom: 20px;
}
.subscribe-footer-form {
    border: 1px solid #FFF;
    padding: 0;    
    display: inline-block;
}
.subscribe-footer-input {
    height: 40px;
    border: 0!important;
    padding: 0 20px!important;
    background: transparent;
    color: #FFF;
    max-width: 200px;
}

.subscribe-footer-form INPUT[type=submit] {
    height: 40px;
    border: 0;
    padding: 0 15px;
    text-transform: uppercase;
    font-size: 12px;
    vertical-align: top;
    background: #FFF;
}

.subscribe-footer-input::-webkit-input-placeholder {
    color: #FFF;
    font-size: 12px;
    text-transform: uppercase
}
.subscribe-footer-input:-moz-placeholder {
    color: #FFF;
    font-size: 12px;
    text-transform: uppercase
}
.subscribe-footer-input::-moz-placeholder {
    color: #FFF;
    font-size: 12px;
    text-transform: uppercase
}
.subscribe-footer-input:-ms-input-placeholder {
    color: #FFF;
    font-size: 12px;
    text-transform: uppercase
}


/* VICTORY LAP */
.list-vl {
    padding: 0;
    margin: 20px 0 0 0;
    list-style: none;
    display: block;
}
.list-vl > LI {
    display: block;
    position: relative;
    padding-left: 150px;
    padding-bottom: 5px;
    background: url(img/bg-line-blue.png) repeat-y 100px top;
}
.list-vl > LI:before {
    position: absolute;
    left: 120px;
    top: 16px;
    border-radius: 10px;
    height: 10px;
    width: 10px;
    background: #5abfc7;
    content: "";
}
.list-vl-content {
    padding: 0;
    background: #5ABFC7;
    cursor: pointer;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    transition: all ease-out 0.2s;
    -webkit-transition: all ease-out 0.2s
}
.list-vl-content:hover {
    box-shadow: 0 3px 6px #999;
    transform: translateY(-3px);
    -webkit-transform: translateY(-3px);
}
.list-vl-desc {
    display: none;
    padding: 0;
    background: #FFF;
    padding: 10px 20px;
    margin: 0;
    font-size: 14px;
    border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
}
.list-vl-desc P {
    margin: 0 0 20px 0;   
}
.list-vl-title {
    color: #FFF;
    font-size: 16px;
    font-weight: normal;
    padding: 10px 20px;
    border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    margin: 0;
    transition: all ease-out 0.2s;
    -webkit-transition: all ease-out 0.2s
}
.list-vl-date {
    position: absolute;
    left: -40px;
    text-align: right;
    width: 150px;
    top: 10px;
    font-size: 14px;
}
.list-vl-img {
    width: 200px;
    float: left;
    margin: 0 10px 10px 0;
}



/* PAGE NUMBERS */
.page-numbers {
    padding: 0;
    margin: 40px 0;
    list-style: none;
    text-align: center;
}
.page-numbers LI {
    display: inline-block;
    vertical-align: top;
    color: #FFF;
    text-align: center;
    font-size: 14px;
    text-transform: uppercase;
    margin-right: 2px;
    padding: 0;
    border-radius: 5px;
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    transition: all ease-out 0.2s;
    -webkit-transition: all ease-out 0.2s
}
.page-numbers LI A, 
.page-numbers LI SPAN {
    color: #FFF;
    padding: 5px 15px;
    background: #5ABFC7;
    display: block;
    margin: 0;
    border-radius: 5px;
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
}
.page-numbers.current {
    background: #8FC74F;
}

.page-numbers LI:hover {
    box-shadow: 0 3px 6px #333;
    transform: translateY(-3px);
    -webkit-transform: translateY(-3px);
}



/* COMMENT BOTTOM */
.comment-bottom-column {
    margin-top: 60px;
}



/* SCROLLABLE */

.section-hscroller {
    position: relative;
}
.section-hscroller:hover .icon-scroll-h {
    display: none;
}
.section-hscroller .icon-scroll-h {
    position: absolute;
    z-index: 9;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
#contentScrollable
{
    width:100%;
    height: 330px;
    position: relative;
}
#contentScrollable div.scrollableArea img
{
    height: 100%;
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
    /* If you don't want the images in the scroller to be selectable, try the following
       block of code. It's just a nice feature that prevent the images from
       accidentally becoming selected/inverted when the user interacts with the scroller. */
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}


/*
    ====== END MODULE ====
*/





/* FOOTER */
footer {
    background: #2C787E;
    color: #FFF;
}
footer A {
    color: #FFF;
}
footer A:hover {
    color: #B6E3E7
}
.footer-top {
    width: 100%;
    text-align: center;
}
.footer-top > DIV {
    display: inline-block;
    vertical-align: top;
}
.footer-menu {
    margin-right: 50px;
}
.footer-menu > UL {
    padding: 0;
    margin: 0;
    list-style: none;
}
.footer-menu > UL UL {
    padding: 0;
    margin: 0;
    list-style: none;
    text-transform: capitalize;
}
.footer-menu > UL > LI {
    margin-bottom: 30px;
    display: inline-block;
    vertical-align: top;
    margin-right: 50px;
    text-align: left;
    width: 150px;
}
.footer-menu > UL > LI > A {
    text-transform: uppercase;
    font-family: BebasNeue;
    font-size: 25px;
    margin-bottom: 7px;
    display: block;
}
.footer-menu > UL > LI UL LI {
    margin-bottom: 5px;
}

.footer-top-left {
    text-align: left;
}
.footer-top-right {
    text-align: right;
    margin-left: 20px;
}
.footer-socmed {
    font-family: BebasNeue;    
    font-size: 20px;
    margin-top: 50px;
}
.footer-bottom {
    margin-top: 40px;
    padding-top: 30px;
    text-align: center;
    font-size: 14px;
    border-top: 1px solid #FFF;
}
.footer-bottom IMG {
    width: 31px;
    vertical-align: middle;
    display: inline-block;
    margin-right: 15px;
}




/* BUTTON */
.button {
    border: 2px solid #5ABFC7;
    display: inline-block;
    color: #5ABFC7;
    text-align: center;
    text-transform: uppercase;
    vertical-align: middle;
    cursor: pointer;
    word-wrap: break-word;
    position: relative;
    transition: all 0.3s;
    border-radius: 5px;
    font-weight: 600;
    transition: all ease-out 0.2s;
    -webkit-transition: all ease-out 0.2s
}
.button:hover {
    box-shadow: 0 3px 6px #333;
    transform: translateY(-3px);
    -webkit-transform: translateY(-3px);
    border: transparent 2px solid!important;
}

.button-xsmall {
    font-size: 10px;
    padding: 5px 13px;
}
.button-small {
    font-size: 12px;
    padding: 7px 25px;
}
.button-medium {
    font-size: 14px;
    padding: 10px 40px;
}
.button-large {
    font-size: 16px;
    padding: 12px 50px;
}

.button-white {
    border: #FFF 2px solid!important;
    color: #FFF!important;
}
.button-blue-navy {
    border: #2C787E 2px solid!important;
    color: #2C787E!important;
}

.button-blue-full {
    background: #5ABFC7!important;
    color: #FFF!important;
    border: 2px solid #5ABFC7!important
}
.button-green-full {
    background: #8FC74F!important;
    color: #FFF!important;
    border: 2px solid #8FC74F!important
}
.button-gray-full {
    background: #CCC!important;
    color: #555!important;
    border: 2px solid #CCC!important
}

.button-cancel {
    background: #EEEEEE!important;
    color: #888!important;
    border: 2px solid #EEEEEE!important
}

.button.no-border {
   border: 0!important;
}

.button-has-submenu.button-dropdown-float {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 9;
}

.button-has-submenu UL {
    padding: 10px 0;
    margin: 0;
    list-style: none;
    width: 100%;
    left: 0;
    border-radius: 5px;
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    display: none;
    text-align: left;
}

.button-has-submenu LI {
    padding: 0;
    margin: 0;
}
.button-has-submenu LI A {
    color: #FFF;
    display: block;
    padding: 5px 10px;
}
.button-has-submenu LI A:hover {
    box-shadow: 0 3px 6px #333;
    transform: translateY(-3px);
    -webkit-transform: translateY(-3px);
    border: transparent 2px solid!important;
}
.button.button-dropdown-float:after {
    display: inline-block;
    vertical-align: middle;
    content: "";
    margin-left: 10px;
    border-right: transparent 5px solid;
    border-left: transparent 5px solid;
    border-top: #FFF 5px solid;
}
.div-load-btn {
    margin-top: 80px;
}
.button-semua-aksi {
    display: none;
    position: absolute;
    z-index: 10;
    top: 10px;
    right: 10px;
}
.button-pilih-peta {
    position: absolute;
    z-index: 10;
    top: 10px;
    right: 10px;
}


/* ICON */
.icon {
    display: inline-block;
    vertical-align: middle;
    text-decoration: none;
    margin-right: 10px;
}
.icon-sosmed {
    margin-right: 0;
    cursor: pointer;
}

.icon-20 {
    width: 20px;
    height: 20px;
}
.icon-20.icon-search {
    background: url(img/icon/icon-20.png) no-repeat 0 0;
}
.icon-20.icon-more {
    background: url(img/icon/icon-20.png) no-repeat 0 -20px;
}
.icon-20.icon-more-white {
    background: url(img/icon/icon-20.png) no-repeat -20px -20px;
}
.icon-20.icon-person {
    background: url(img/icon/icon-20.png) no-repeat -20px -40px;
}
.icon-20.icon-pen {
    background: url(img/icon/icon-20.png) no-repeat 0px -60px;
}
.icon-20.icon-pen-white {
    background: url(img/icon/icon-20.png) no-repeat -20px -60px;
}
.icon-20.icon-menu-white {
    background: url(img/icon/icon-20.png) no-repeat -20px -80px;
}

.icon-25-sosmed {
    width: 25px;
    height: 25px;
}
.icon-25-sosmed.icon-fb {
    background: url(img/icon/icon-25-sosmed.png) no-repeat 0 0;
}
.icon-25-sosmed.icon-twitter {
    background: url(img/icon/icon-25-sosmed.png) no-repeat 0 -25px;
}
.icon-25-sosmed.icon-linkedin {
    background: url(img/icon/icon-25-sosmed.png) no-repeat 0 -50px;
}
.icon-25-sosmed.icon-wa {
    background: url(img/icon/icon-25-sosmed.png) no-repeat 0 -75px;
}
.icon-25-sosmed.icon-ig {
    background: url(img/icon/icon-25-sosmed.png) no-repeat 0 -100px;
}
.icon-25-sosmed.icon-yt {
    background: url(img/icon/icon-25-sosmed.png) no-repeat 0 -125px;
}
.icon-25-sosmed.icon-fb-white {
    background: url(img/icon/icon-25-sosmed.png) no-repeat -25px 0;
}
.icon-25-sosmed.icon-twitter-white {
    background: url(img/icon/icon-25-sosmed.png) no-repeat -25px -25px;
}
.icon-25-sosmed.icon-linkedin-white {
    background: url(img/icon/icon-25-sosmed.png) no-repeat -25px -50px;
}
.icon-25-sosmed.icon-wa-white {
    background: url(img/icon/icon-25-sosmed.png) no-repeat -25px -75px;
}
.icon-25-sosmed.icon-ig-white {
    background: url(img/icon/icon-25-sosmed.png) no-repeat -25px -100px;
}
.icon-25-sosmed.icon-yt-white {
    background: url(img/icon/icon-25-sosmed.png) no-repeat -25px -125px;
}
.wa-share {
    display: none!important;
}

.icon-35 {
    width: 35px;
    height: 35px;
}
.icon-35.icon-book {
    background: url(img/icon/icon-35.png) no-repeat 0 0;
}

.icon-50 {
    width: 50px;
    height: 50px;
}
.icon-50.icon-scroll-h {
    background: url(img/icon/icon-50.png) no-repeat 0 0;
}

.box-icon-download {
    position: absolute;
    width: 48px;
    height: 48px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}


/* CONTACT FORM 7 */
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output {
    border-color: #ffc107!important;
    background: #f3ffdd!important;
}
.wpcf7 form .wpcf7-response-output {
    padding: 10px 15px!important;
    border: 2px solid #5abfc7!important;
}
.wpcf7 form.sent .wpcf7-response-output {
    border-color: #70c75a!important;
    padding: 10px 15px!important;
    background: #bfffaf!important;
}
.wpcf7 .ajax-loader {
    vertical-align: middle;
    margin-top: 10px!important;
}
.wpcf7-not-valid-tip {
    background: #ff9e9e;
    font-size: 14px!important;
    padding: 5px 10px;
}

iframe.wp-embedded-content {
    max-width: 100%;
}

/* COLOR & BACKGROUND*/
.color-green {
    color: #8FC74F!important;
}
.color-blue {
    color: #5ABFC7!important;
}
.color-white {
    color: #FFF!important;
}
.bg-blue {
    background-color: #5ABFC7!important;
}
.bg-blue-1 {
    background-color: #F0FAFB!important;
}
.bg-blue-2 {
    background-color: #E6F5F7!important;
}
.bg-blue-3 {
    background-color: #4D9BCA!important;
}
.bg-green {
    background-color: #8FC74F!important;
}
.bg-brown {
    background-color: #D2A54F!important;
}
.bg-red {
    background-color: #CE8253!important;
}
    
.bg-blue-img {
    background-image: url(img/bg-blue-3.png);
    background-position: center top;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.bg-poster-hand-blue {
    background-color: #5ABFC7!important;
    background-image: url(img/bg-poster-hand-blue.png);
    background-position: 50px center;
    background-repeat: no-repeat;
    background-size: auto 100%; 
}

.is-green {
    background: #DEFFB9!important;
    border: 1px solid #8FC74F!important;
    color: #8FC74F!important;
}
.is-red {
    border: 1px solid #FF6060!important;
    background: #FFE3E3!important;
    color: #FF6060!important;
}
.inputWarning {
    border: 1px solid #FF9B9B!important;
}


.border-top-blue {
    border-top: 1px solid #5ABFC7!important;
}
.border-bottom-blue {
    border-bottom: 1px solid #5ABFC7!important;
}
.border-bottom-green {
    border-bottom: 1px solid #8FC74F!important;
}
.border-bottom-brown {
    border-bottom: 1px solid #D2A54F!important;
}
.border-bottom-red {
    border-bottom: 1px solid #CE8253!important;
}


.border-round-blue {
    border: 5px solid #5ABFC7!important;
}
.border-round-green {
    border: 5px solid #8FC74F!important;
}
.border-round-brown {
    border: 5px solid #D2A54F!important;
}
.border-round-red {
    border: 5px solid #CE8253!important;
}



/* CONDITIONAL */
.is_hide {
    display: none!important;
}
.no-margin {
    margin: 0!important;
}
.no-padding {
    padding: 0!important;
}
.align-left {
    text-align: left!important;
}
.align-right {
    text-align: right!important;
}
.align-center {
    text-align: center!important;
}
.has-timeline {
    overflow: hidden;
}



/* ETC */
.logo-top-show {
    position: absolute;
    z-index: 999999;
    top: 30px;
}
.sosmed {
    display: inline-block;
    font-size: 14px;
    text-transform: uppercase;
    margin-bottom: 50px;
}
.icon-sosmed-share {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
}
.icon-sosmed-share .icon {
    margin-left: 5px;
}
.icon-sosmed-share .icon:nth-child(1) {
    margin-left: 0;
}
.goToScroll {
    cursor: pointer
}
.gotoURL {
    cursor: pointer;
}

.text-no-wrap {
    text-overflow: inherit!important;
    white-space: normal!important;
    overflow: inherit!important;
}

.remove-quote:before, 
.remove-quote:after {
    content: ""!important;
    display: none!important;
    margin-right: 0!important
}

.clearfix:after {
    float: none;
    clear: both;
    content: "";
    display: block;
    width: 1px;
    height: 1px;
}

.capKontak {
    width: 250px;
    background: #5ABFC7;
    padding: 5px;
    border-radius: 5px;
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
}
#RefreshCaptcha {
    cursor: pointer;
}
INPUT#capca {
    width: 200px!important;
    border: none!important;
}
img#captcha {
    margin-bottom: 5px;
}

.divMsg {
    color: #FFF;
    padding: 10px 25px;
    margin-bottom: 20px;
    text-align: center;
    text-transform: uppercase;
    font-size: 14px;
    border-radius: 5px;
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    display: none;
}
.loader-peta {
    display: none;
    margin-right: 10px;
    vertical-align: middle;
}
.chromeframe {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    color: #FFF;
    margin: 0;
    padding: 30px 20px;
    background: #5ABFC7;
    z-index: 9999999999999999999;
    text-align: center;
}

.chromeframe A {
    color: yellow;
}



/* FORM PETA AKSI */
FORM#peta-aksi {
    margin: 0;
}
FORM#peta-aksi label {
    font-weight: normal!important;
    color: #FFF;
    width: 100%;
    float: none;
}
FORM#peta-aksi .mb-right-column {
    width: 100%;
    float: none;
}
FORM#peta-aksi .description {
    display: none;
}
FORM#peta-aksi INPUT[type=text] {
    padding: 8px 15px;
    border: none;
    width: 100%;
    border-radius: 3px;
}
FORM#peta-aksi TEXTAREA {
    min-height: 100px;
    padding: 8px 15px;
    border: none;
    width: 100%;
    border-radius: 3px;
}

FORM#peta-aksi input[type=submit] {
    font-size: 14px;
    padding: 7px 25px;
    background: none!important;
    color: #FFF!important;
    border: 1px solid #FFF!important;
    display: inline-block;
    color: #FFF;
    text-align: center;
    text-transform: uppercase;
    vertical-align: middle;
    cursor: pointer;
    word-wrap: break-word;
    position: relative;
    transition: all 0.3s;
    border-radius: 5px;
    font-weight: 400;
    transition: all ease-out 0.2s;
    -webkit-transition: all ease-out 0.2s
}
FORM#peta-aksi input[type=submit]:hover {
    box-shadow: 0 3px 6px #333;
    transform: translateY(-3px);
    -webkit-transform: translateY(-3px);
    border: transparent 1px solid!important;
}
.iframe-map-create {
    height: 500px;
    width: 100%;
    display: block;
}
.iframe-map-view {
    height: 400px;
    width: 100%;
    display: block;
}
.fep-container.peta-aksi {
    text-align: left;
}
#fep-longitude, #fep-latitude {
    display: none;
}
label[for="latitude"], label[for="longitude"] {
    display: none!important;
}

.form-isian-peta {
    padding: 20px!important;
    text-align: center;
    color: #FFF;
}



/* FORM WCK */
#wppb_register_pre_form_message {
    display: none;
}
.wppb-user-forms UL {
    padding: 0;
    margin: 0;
    list-style: none;  
}
.wppb-user-forms UL LI {
    margin-bottom: 20px;
}
.wppb-user-forms LABEL {
    margin-bottom: 8px;
    display: block;
}
.wppb-user-forms input[type="text"],  
.wppb-user-forms input[type="email"], 
.wppb-user-forms input[type="password"] {
    padding: 8px 15px!important;
    border: 1px solid #5ABFC7!important;
}
.wppb-user-forms SELECT {
    padding: 8px 15px!important;
    border: 1px solid #5ABFC7!important;
}
.wppb-user-forms textarea {
    padding: 8px 15px!important;
    border: 1px solid #5ABFC7!important;
}
.wppb-default-password:after {
    display: block;
    clear: both;
    content: "";
}
.wppb-description-delimiter {
    font-size: 14px;
    text-transform: none;
    font-style: italic;
    display: block;
    margin: 5px 0;
    float: left;
}
.wppb-recaptcha LABEL {
    display: none!important;
}
#pass-strength-result {
    background-color: #5ABFC7!important;
    float: right!important;
    color: #FFF;
    font-size: 12px;
    padding: 8px 20px!important;
    text-transform: uppercase;
    margin-top: 5px!important;
    height: auto!important;
}
#pass-strength-result.short, 
#pass-strength-result.bad {
    border: 1px solid #FF6060!important;
    background: #FFE3E3!important;
    color: #FF6060!important;
}
#pass-strength-result.good {
    background: #FFDA93;
    border: 1px solid #C17F00;
    color: #C17F00;
}

#pass-strength-result.strong {
    background: #DEFFB9!important;
    border: 1px solid #8FC74F!important;
    color: #8FC74F!important;
}
.form-submit .button {
    font-size: 16px;
    padding: 12px 50px;
    background: #5ABFC7!important;
    color: #FFF!important;
    border: 2px solid #5ABFC7!important
}
.login-submit input[type=submit] {
    font-size: 14px;
    padding: 10px 40px;
    background: #5ABFC7!important;
    color: #FFF!important;
    border: 1px solid #5ABFC7!important;
    display: inline-block;
    color: #5ABFC7;
    text-align: center;
    text-transform: uppercase;
    vertical-align: middle;
    cursor: pointer;
    word-wrap: break-word;
    position: relative;
    transition: all 0.3s;
    border-radius: 5px;
    font-weight: 400;
    transition: all ease-out 0.2s;
    -webkit-transition: all ease-out 0.2s
}
.login-submit input[type=submit]:hover {
    box-shadow: 0 3px 6px #333;
    transform: translateY(-3px);
    -webkit-transform: translateY(-3px);
    border: transparent 1px solid!important;
}

.wppb-required {
    color: #FF6060;
    margin-left: 5px;
}
#wppb_form_success_message {
    font-size: 16px;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: lighter;
    background: #DEFFB9!important;
    border: 1px solid #8FC74F!important;
    color: #8FC74F!important;
}
#wppb_general_top_error_message {
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: lighter;
    border: 1px solid #FF6060!important;
    background: #FFE3E3!important;
    color: #FF6060!important;
}
.wppb-form-error {
    color: #FF6060!important;
    margin-top: 5px;
    display: block;
    font-size: 12px;
    text-transform: uppercase;
}

.wppb-warning, .wppb-error {
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: lighter;
    border: 1px solid #FF6060!important;
    background: #FFE3E3!important;
    color: #FF6060!important;
}
P.login-remember {
    margin-top: 10px!important;
}


/* FLOATING NAVIGATION */
.floating-nav {
    padding: 20px 40px;
    background: #FFF;
    height: 70px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99999999;
    box-shadow: 0 0 3px #555;
    display: none;
    text-align: right;
}

.floating-nav .menu-on-mobile {
    display: block;
    text-align: right;
}
.floating-nav .menu-on-mobile-close {
    display: block;
}

.floating-nav .top-navigation {
    position: fixed;
    right: 0;
    top: 0;
    padding: 50px 20px 20px;
    width: 250px;
    background: #5ABFC7;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    display: none;
    z-index: 999999999
}
.floating-nav .top-navigation .header-menu-additional {
    display: block;
}
.floating-nav .top-navigation .header-menu-main, 
.floating-nav .top-navigation .header-menu-additional {
    text-align: left;   
}
.floating-nav .top-navigation .header-menu-main > UL > LI, 
.floating-nav .top-navigation .header-menu-additional > LI {
    display: block;    
}
.floating-nav .top-navigation .header-menu-main > UL > LI > A {
    border: none;
} 
.floating-nav .top-navigation .header-menu-main A, 
.floating-nav .top-navigation .header-menu-additional A {
    color: #FFF;
}
.floating-nav .top-navigation .header-menu-main > UL > LI.menu-item-has-children > UL, 
.floating-nav .top-navigation .header-menu-main LI.menu-item-has-children-child > UL {
    position: static;
    margin-left: 20px;
    border: 0;
}
.floating-nav .top-navigation .header-menu-main > UL > LI.menu-item-has-children:hover > A {
    border: 0;
}
.floating-nav .top-navigation .header-menu-main > UL LI.menu-item-has-children-child > UL {
    border-left: none;   
}
.floating-nav .top-navigation .header-menu-main > UL > LI.menu-item-has-children > A:after {
    border-top: #FFF 5px solid;
}
.floating-nav .top-navigation.header-menu-main > UL > LI.menu-item-has-children > UL, 
.floating-nav .top-navigation .header-menu-main LI.menu-item-has-children-child > UL {
    border: 0;
}
.floating-nav .top-navigation .header-menu-main LI.menu-item-has-children-child > UL {
    border-top: 0;
}
.floating-nav .top-navigation .header-menu-main LI.menu-item-has-children-child > A:after {
    border-bottom: none;
    border-right: transparent 5px solid;
    border-left: transparent 5px solid;
    border-top: #FFF 5px solid;
}
.floating-nav .top-navigation .search-top {
    display: block;
}
.floating-nav .top-navigation .header-socmed-top {
    display: block;
    margin-top: 10px;
}
.floating-nav .top-navigation .language-top {
    display: block;
    margin-top: 10px;
    margin-right: 10px;
}
.floating-nav .top-navigation .header-menu-top {
    display: none;   
}

.floating-nav .top-navigation #text-search-top {
    display: none;
}
.floating-nav .top-navigation INPUT#input-search-top {
    display: inline-block;
    padding: 0!important;
    width: 120px;
    height: 25px;
    border: none!important;
    color: #555;
    vertical-align: middle;
}

.floating-nav .top-navigation .header-menu-user {
    margin: 20px 0 0;
    margin-left: 0;
    background: #4A9CA2;
    border-radius: 0;
    width: 100%;
    padding: 10px 0
}

.floating-nav .top-navigation .header-menu-user > LI {
    padding: 0;
    width: 100%;
}
.floating-nav .top-navigation .header-menu-user > LI.menu-item-has-children > A:after {
    display: none;
}
.floating-nav .top-navigation .header-menu-user UL {
    padding: 0 20px 10px;
    position: static;
    background: #4A9CA2;
    display: block;
    border-radius: 0;
}

.floating-nav .avatar-mobile {
    display: none!important;
}

.floating-nav-menu {
    position: absolute;
    right: 20px;
    top: 20px;
}
.floating-nav-logo {
    position: absolute;
    left: 20px;
    top: 20px;
}
.floating-addt {
    padding: 20px;
    display: none;
    width: 100%;
    float: none;
    clear: both;
    background: #f4f4f4;
    position: fixed;
    left: 0;
    border-bottom: 1px solid #CCC;
    top: 70px;
}
.floating-addt-content {
    display: none;
}
.floating-addt-left {
    float: left;
    text-align: left;
}
.floating-addt-right {
    float: right;
}
.floating-addt .button-dropdown-float {
    top: 23px;
    right: 15px;
}
.list-box-float-top {
    display: none;
    position: absolute;
    margin-top: 20px;
    background: #F4F4F4;
    padding: 20px;
    border-bottom: 1px solid #CCC;
    border-left: 1px solid #CCC;
    border-right: 1px solid #CCC;
}