@media only screen and (max-width: 1220px) {
    
    
    /* HEADER - TOP NAVIGATION */
    
    .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
    }
    .header-menu-additional {
        display: block;
    }
    .header-menu-main, 
    .header-menu-additional {
        text-align: left;   
    }
    .header-menu-main > UL > LI, 
    .header-menu-additional > UL > LI {
        display: block;    
    }
    .header-menu-main > UL > LI > A {
        border: none;
    }  
    .header-menu-main A, 
    .header-menu-additional A {
        color: #FFF;
    }
    .header-menu-main > UL > LI.menu-item-has-children > UL, 
    .header-menu-main LI.menu-item-has-children-child > UL {
        position: static;
        margin-left: 20px;
    }
    .header-menu-main > UL > LI.menu-item-has-children:hover > A {
        border: 0;
    }
    .header-menu-main LI.menu-item-has-children-child > UL {
        border-left: none;   
    }
    .header-menu-main > UL > LI.menu-item-has-children > 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 {
        border: 0;
    }
    .header-menu-main LI.menu-item-has-children-child > UL {
        border-top: 0;
    }
    .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;
    }
    .search-top {
        display: block;   
    }
    .header-socmed-top {
        display: block;
        margin-top: 10px;
    }
    ul.language-top {
        display: block;
        margin-top: 10px;
        margin-right: 10px;
    }
    .header-menu-top {
        display: none;   
    }
    
    #text-search-top {
        display: none;
    }
    header #input-search-top {
        display: inline-block;
        width: 120px;
        height: 25px;
    }
    .menu-on-mobile {
        display: inline-block;
    }
    .menu-on-mobile-close {
        display: block;
    }
    .header-menu-user {
        margin: 20px 0 0;
        margin-left: 0;
        background: #4A9CA2;
        border-radius: 0;
        width: 100%;
        padding: 10px 0
    }

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

    
    
    
    /* LAYOUT */
    
    .table-col {
        display: block!important;
    }
    .table-col > DIV {
        display: block!important;
    }
    .table-col-35-65 > DIV:nth-child(1) {
        width: 100%!important;
    }
    .table-col-35-65 > DIV:nth-child(2) {
        width: 100%!important;
    }
    .table-col-65-35 > DIV:nth-child(1) {
        width: 100%!important;
    }
    .table-col-65-35 > DIV:nth-child(2) {
        width: 100%!important;
    }
    .table-col-25-75 > DIV:nth-child(1) {
        width: 100%!important;
    }
    .table-col-25-75 > DIV:nth-child(2) {
        width: 100%!important;
    }
    .table-col-content {
        padding: 40px!important;
    }
    .table-col-info {
        display: table;
    }
    .table-col-info > DIV {
        display: table-cell;
        vertical-align: middle;
        width: 50%;
    }
    .table-col-info-image {
        min-height: 200px;
    }
    .list-table-col > LI {
        width: 45%;
        margin: 0 20px 20px 0;
    }
    
    /* LIST BOX */
    .list-box {
        text-align: center;
    }
    
    
    /* HERO */
    H1.page-title-big {
        font-size: 50px;   
    }
    .hero-content {
        padding: 40px;
    }
    .hero-content-title {
        font-size: 25px;
    }
    
    
    /*  
        ====== MODULE =====
    */
        
    /* SECTION */

    .section-title {
        font-size: 35px;
        text-align: center;
    }
    .section-desc {
        font-size: 18px;
    }
    .section-title-medium.section-title-no-bottom {
        margin: 0 0 15px 0!important
    }
    
    
    
    /* TESTIMOIAL BOX */
    
    .list-testimonial {
        width: 90%;
    }
    .testimonial-box {
        height: auto;
    }
    .testimonial-box-action {
        width: 100%;
        float: none!important;
        padding: 15px 20px;
    }
    .testimonial-box-quote {
        font-size: 20px;
    }
    .testimonial-box-quote:before {
        display: inline-block;
        position: static;
        font-size: 35px;
        vertical-align: middle;
        margin-right: 5px;
    }
    .testimonial-box-quote:after {
        font-size: 35px;
    }
    .testimonial-box-name {
        font-size: 18px;
    }
    .testimonial-box-content .table > DIV {
        padding: 40px 20px;
    }
    
    
    
    
    /* LIST ROUND */
    
    .list-round > LI {
        margin: 0 10px 20px;
    }
    
    
    
    /*  TITLE COLUMN  */
    .title-column {
        display: block;
        margin-bottom: 40px;
    }
    .title-column > DIV {
        display: block;
    }
    .title-column-title .section-title {
        text-align: center;
    }
    
    .title-column-bottom {
        text-align: center;
    }
    
    .title-column-bottom {
        display: block;
    }
    .title-column-bottom > DIV {
        display: block;
    }
    .title-column-bottom-left {
        padding-right: 0;
        text-align: center;
        margin-bottom: 20px;
    }
    .title-column-bottom-right {
        padding-left: 0;
        text-align: center;
    }
    .title-column-title {
        width: 100%;
        text-align: center;
        padding: 0;
        margin-bottom: 20px;
    }
    .title-column-desc {
        width: 100%;
        font-size: 18px;
        padding: 0;
        text-align: center
    }
    
    
    
    /* FOOTER */
    .footer-top > DIV {
        display: block;
        text-align: center;
    }
    .footer-top-right {
        margin-left: 0;
    }
    
    
    
    /*  BOX COLOR  */
    .box-color {
        padding: 0;
        margin: 0 auto;
        list-style: none;
        color: #FFF;
        max-width: 650px;
    }
    
    
    /* FORM PETA AKSI */
    
    .iframe-map-create {
        height: 300px;
    }
    .iframe-map-view {
        height: 300px;
    }
    
    
    
    /* DAFTAR AKSI */
    #daftar-aksi.list-text-vertical {
        padding-top: 10px;
    }
    
        
    /*  
        ====== END MODULE =====
    */
    
    
    /* BUTTON */
    .button-has-submenu.button-dropdown-top {
        left: 0;
        width: 270px;
        margin: 0 auto;
    }
    
    
    /* ETC */
    .icon-sosmed-share {
        margin-top: 10px;
        display: block;
    }
}



@media only screen and (max-width: 800px) {
    
    /* LAYOUT */
    .wrap {
        padding: 40px;   
    }
    .wrap-article {
        width: 100%;
    }
    .wrap-article article {
        font-size: 18px;
    }
    
    
    /* HERO */
    .hero {
        display: block;
        height: auto;
    }
    .hero.hero-home {
        height: auto;
    }
    .hero > DIV {
        display: block;
    }
    .hero .hero-image {
        width: 100%;
    }
    .hero .hero-content {
        width: 100%;
        color: #FFF;
    }
    .hero-home .hero-image {
        width: 100%;
        padding: 60px 40px;
    }
    .hero-home .hero-content {
        width: 100%;
    }
    .hero-list {
        width: 100%;
    }
    .hero-list LI {
        margin-bottom: 20px;
    }
    
    .hero-content-title {
        font-size: 20px;
    }
    .hero-content-subtitle {
        font-size: 18px;
    }
    .hero-content-desc {
        font-size: 14px;
    }
    .hero-content-action {
        margin-top: 30px;
    }
    
    /*  
        ====== MODULE =====
    */
        
    /* SECTION */

    .section-title {
        font-size: 30px;
        margin-bottom: 30px;
    }
    .section-title-medium {
        font-size: 26px!important;
        margin-bottom: 20px;
    }
    .section-title-small {
        font-size: 23px!important;
        margin-bottom: 15px;
    }
        
        
        
    /* LIST-CARD */
    

    .list-card > LI {
        display: block;
        margin: 0 40px 20px 0;
        width: 100%;
    }
    .list-card > LI:nth-child(2n) {
        margin: 0 40px 20px 0;
    }
    .list-card-title {
        font-size: 18px;
    }
    .list-card-action {
        margin: 40px 0 0
    }
    .list-card-action-more > DIV {
        padding: 15px;
    }
    
    
    /* LIST IMAGE BOX*/
    .list-image-box > LI {
        width: 40%
    }
    
    
    /* LIST ROUND */
    .list-round-title {
        font-size: 16px;
    }
    
    /* LIST SUB CATEGORY */
    .list-sub-category > LI A {
        font-size: 12px;
    }
    
    
    /* TESTIMONIAL BOX */
    
    .testimonial-box-quote {
        font-size: 18px;
    }
    .testimonial-box-name {
        font-size: 16px;
    }
    .testimonial-box-title {
        font-size: 14px;
    }
    H1.page-title-small {
        font-size: 12px;
        font-weight: 100;
    }
    .testimonial-box-content .table > DIV {
        padding: 20px;
    }
    .div-load-btn {
        margin-top: 40px;
    }
    
    /* BOX COLOR */
    
    .box-color-bottom {
        position: static;
    }
    .box-color > LI {
        width: 45%;
        height: auto;
        vertical-align: top;
    }
    
    
    
    /* LIST LOGO */
    
    .list-logo > LI IMG {
        height: 120px;
    }
    #partners-home .list-logo > LI IMG {
        height: 70px;
    }
    
    
    /* POP BOX */
    .pop-content {
        padding: 30px;
        height: 95%;
        width: 95%;
        overflow-y: scroll;
    }
        
    /*  
        ====== END MODULE =====
    */
    
    
    
    /* ICON */
    .wa-share {
        display: inline-block!important;
    }
}




@media only screen and (max-width: 599px) {
    
    
    article P, article DIV {
        font-size: 16px;
    }
    article OL, article UL {
        font-size: 16px;
    }
    
    
    /* HERO HOME */
    .slick-prev, .slick-next {
        bottom: auto;
        top: 40px!important;
        z-index: 999;
    }
    
    /* LAYOUT */
    .wrap {
        padding: 40px 20px;   
    }
    .wrap-header {
        padding: 20px!important;   
    }
    .wrap-article article {
        margin-bottom: 60px;
        font-size: 16px;
    }
    .wrap-article article IFRAME {
        height: 305px;
    }
    
    
    
    .table-col > DIV {
        padding: 0;
    }
    .table-col-content {
        padding: 40px 20px!important;
    }
    .table-col-info {
        display: block;
    }
    .table-col-info > DIV {
        display: block;
        width: 100%;
    }
    .table-col-info-content {
        padding: 40px 20px;
    }
    .list-table-col > LI {
        width: 100%;
        margin: 0 0 20px 0;
        border-bottom: 1px solid #DDD;
        padding-bottom: 20px;
    }
    .table-col-action .button {
        margin: 0 20px 10px 0;
    }
    
    
    /* FORM */
    .form-group {
        margin-bottom: 25px;
    }
    .form-title {
        font-size: 22px
    }
    input[type="text"], input[type="email"] {
        width: 100%;
    }
    textarea {
        width: 100%;
    }
    
    
    /* HEADER - TOP NAVIGATION */
    .logo-top-show {
        top: 20px;
    }
    .logo-top IMG {
        width: 65px;
    }
    
    
    
    
    /* HERO */
    
    .hero-image {
        min-height: 200px;
    }
    .hero-home .hero-image {
        padding: 60px 20px;
        min-height: 200px;
    }
    H1.page-title-big {
        font-size: 40px;
    }
    .hero .hero-content {
        padding: 20px;
    }
    .hero-home .hero-content {
        padding: 20px;
    }
    .hero-list LI {
        margin-bottom: 10px;
    }
    .hero-list-title {
        font-size: 20px;
    }
    
    
    /*  
        ====== MODULE =====
    */
        
    /* SECTION */

    .list-card-action {
        display: block;
    }
    .list-card-action > LI {
        display: block;
    }
    .list-card-action > LI:nth-child(1) {
        padding-right: 0;
    }
    .list-card-action > LI:nth-child(2) {
        padding-left: 0;
        text-align: left;
        margin-top: 20px;
    }
    .list-card-title {
        text-overflow: initial;
        white-space: normal;
    }
    
    
    /* TESTIMONIAL BOX */
    
    #testimonial-home .testimonial-box {
        margin: 0!important   
    }
    .testimonial-box {
        display: block;
    }
    .testimonial-box > DIV {
        display: block;
    }
    .testimonial-box-pic {
        width: 100%;
        overflow: auto;
        margin: 0;
        height: 300px;
    }
    .testimonial-box-content {
        width: 100%;
    }
    .testimonial-box-action {
        display: block;
        padding: 20px;
    }
    .testimonial-box-action > DIV {
        display: block;
    }
    .testimonial-box-action-left {
        margin-bottom: 20px;
    }
    .testimonial-box-action-right {
        text-align: left;
    }
    
    
    
    
    /* LIST ROUND */
    
    .list-round > LI {
        width: 110px;
    }
    .list-round-img {
        width: 100px;
        height: 100px;
        padding: 8px;
    }
    .list-round-img-mask {
        width: 75px;
        height: 75px;
    }
    
    
    /* LIST LOGO */
    
    .list-logo > LI IMG {
        height: 80px;
    }
    #partners-home .list-logo > LI IMG {
        height: 50px;
    }
    
    
    /*  LONG BANNER  */
    .long-banner {
        height: 300px;
    }
    .long-banner-title {
        padding: 30px;
    }
    
    
    
    /* TITLE COLUMN */
    .title-column-title {
        margin-bottom: 10px;
    }
    
    
    /* LIST BOX */
    .list-box > LI {
        display: block;
        margin: 0 0 20px 0;
        width: 100%;
        height: auto;
        overflow: auto;
    }
    
    .list-box-cover {
        overflow: auto;
        height: auto;
    }
    .list-box-cover-title {
        height: auto;
        padding: 20px;
        position: static;
        font-size: 35px;
    }
    .list-box-cover IMG {
        width: 100%;
    }
    
    
    /* LIST IMAGE BOX */
    
    .list-image-box > LI {
        display: block;
        margin: 0 0 20px;
        width: 100%;
    }
    .list-image-box-img {
        width: 100%;
        height: auto;
        display: block;
    }
    
    
    
    
    /*  BOX COLOR  */
    
    .box-color > LI {
        width: 100%;
    }
    .bg-blue-img {
        background-image: none;
    }
    .bg-poster-hand-blue {
        background-image: none;
    }
    
    
    
    
    /* SCROLLABLE */
    #contentScrollable
    {
        height: 250px;
    }
    
    
    
    /* FLOATING NAVIGATION */
    .floating-addt {
        bottom: 0;
        top: auto;
        padding: 10px;
    }
    .floating-addt-left {
        margin-bottom: 5px;
        float: none;
    }
    .floating-addt-right {
        float: none;   
    }
    .floating-addt .button-dropdown-float {
        top: auto;
        right: auto;
        position: static!important;
    }
    .list-box-float-top {
        position: static;   
    }
    .btn-artikel-terkait-float-top {
        width: 100%;
    }
    .btn-kategori-float-top {
        width: 100%;
    }
    
    /* VICTORY LAP */
    .list-vl-date {
        position: static;
        margin-bottom: 5px;
        text-align: left;
        width: auto;
        font-size: 14px;
    }
    .list-vl > LI {
        padding-left: 20px;
        padding-bottom: 15px;
        background: url(../img/bg-line-blue.png) repeat-y -20px top;
    }
    .list-vl > LI:before {
        left: 0;
        top: 5px;
    }
    .list-vl-img {
        width: 100%;
        float: none;
        margin: 0 0 10px 0;
    }
    
    
    /*  
        ====== END MODULE =====
    */
    
    
    
    /* BUTTON */
    .button-has-submenu.button-dropdown-top {
        width: 90%;
    }
    .button-has-submenu.button-dropdown-float {
        width: 100%;
    }
    
    
    /* FOOTER */
    .footer-top-left {
        display: none!important;
    }
    .subscribe-footer-input {    
        max-width: 145px;
    }
    .footer-socmed {
        margin-top: 30px;
    }
    
    
    /* ETC */
    .icon-sosmed-share {
        margin-left: 0;
    }
    .icon-sosmed-share .icon {
        margin-left: 0;
        margin-right: 5px;
    }
    
}