/*
|
|
|  BASE
|
|
*/
HTML, BODY {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

BODY {
  background: #008A45;
  color: #FFF;
  font-size: 18px;
  line-height: 25px;
  font-family: "PT Sans", Helvetica, Arial, sans-serif;
  font-weight: 400;
}

P {
  font-size: 18px;
  line-height: 25px;
  margin-bottom: 35px;
}

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

A {
  text-decoration: none;
  color: #9FEEFF;
}

A:hover {
	color:#FFF;
}

A IMG {
  border: none;
}

H1, H2, H3, H4 {
  margin: 0;
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
  line-height: 1.3em;
}

H1 {
  font-size: 40px;
}

H2 {
  font-size: 30px;
}

H3 {
  font-size: 23px;
}

SELECT {
  vertical-align: middle;
  padding: 5px 10px;
  border: none;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
}

INPUT[type=text], INPUT[type=number], 
INPUT[type=password], INPUT[type=email], SELECT {
  vertical-align: middle;
  padding: 5px 10px;
  border: none;
  font-size: 16px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
}

TEXTAREA {
  padding: 5px 10px;
  min-height: 130px;
  border: none;
  font-size: 16px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
}

/*
|
|
|  END BASE
|
|
*/
/*
|
|
|  LAYOUT
|
|
*/
HEADER, FOOTER {
  width: 100%;
  padding: 0;
  margin: 0;
}

HEADER {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999999;
}

FOOTER {
  padding: 5px 0;
  font-size: 15px;
}

.content {
  margin: 0;
  padding-top: 130px;
  background: #008A45; /* 189DD6 */
}
#content_home {
    padding-top: 50px;
 }
.content H1, .content H2, .content H3 {
  margin: 0;
  display: block;
}
.content H1.page_title, .content H2.page_title, .content H3.page_title {
  color: #FFF;
}
.content H1 A, .content H2 A, .content H3 A {
  color: #008A45;
}
.content H1 A:hover, .content H2 A:hover, .content H3 A:hover {
  color: #116b92;
}

.page_intro {
  margin-bottom: 20px;
}

.page_info {
	text-align: center;
}

.page_info H1.page_title {
	border-bottom: none!important;
	padding-bottom: 0!important;
	margin-bottom: auto!important
}

.content H1.page_title {
  font-weight: 800;
  text-transform: capitalize;
  margin-bottom: 20px;
}
.content H1.page_title SPAN {
    display: block;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
    line-height: 2em;
}
.content H2.page_title {
  margin: 30px 0;
}
.content H3.page_title {
  margin: 20px 0;
  font-size: 22px;
}

.wrap {
  width: 1300px;
  margin: 0 auto;
  padding: 50px 20px;
}
.page_info .wrap {
	padding: 10px 20px;
}

.wrap2 {
  width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

.header-top {
  display: table;
  margin: 0;
  width: 100%;
  background: #ffffff /*#21252e*/
}
.header-top > DIV {
  display: table-cell;
  padding: 0;
  vertical-align: middle;
  height: 100px;
}
.header-top-home {
    background: transparent!important;
}

.logo-top {
  text-align: left;
  padding: 25px 0 0 70px!important;
  position: relative;
}

.logo-top IMG {
  height: 51px;
  top: 25px;
  display: block;
  position: absolute;
  z-index: 999999999
}
.logo-banner-home {
    text-align: center;
    padding-left: 38px;
}
.logo-banner-home IMG {
    max-width: 70%
}

.nav-top {
  text-align: right;
}
.nav-top > UL {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    background: #ffffffcf;
    width: 100%;
    height: 100%;
    padding-top: 110px;
    padding-right: 60px;
    display: none;
}
.nav-top > UL > LI {
    display: block;
    vertical-align: middle;
    text-align: right;
    padding: 0;
    text-transform: uppercase;
    font-size: 45px;
}
.nav-top > UL > LI A:hover {
  color: #008A45;
}
.nav-top > UL > LI > A {
    color: #222;
    display: block;
    padding: 15px 20px;
    font-weight: 800;
    transition: color 0.5s ease;
    -moz-transition: color 0.5s ease;
    -webkit-transition: color 0.5s ease;
}
.nav-top .has-submenu {
	position: relative;
}
.nav-top .has-submenu > A:after {
	display: inline-block;
	margin-left: 15px;
	border-right: transparent solid 5px;
	border-left: transparent solid 5px;
	border-top: #FFF solid 5px;
	content: "";
	width: 1px;
	height: 1px;
}
.nav-top .has-submenu:hover > UL {
	display: block;
}
.nav-top .has-submenu > UL {
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
  position: absolute;
  background: #21252e;
  top: 79px;
  width: 200px;
}
.nav-top .has-submenu > UL > LI {
  vertical-align: middle;
  padding: 0;
  text-align: left;
  font-size: 16px;
  text-transform: uppercase;
  transition: background-color 0.5s ease;
  -moz-transition: background-color 0.5s ease;
  -webkit-transition: background-color 0.5s ease;
}
.nav-top .has-submenu > UL > LI > A {
  color: #FFF;
  display: block;
  padding: 10px 20px;
  font-weight: 400;
}
.nav-top .has-submenu > UL > LI:hover {
  background-color: #444;
}
.medsos-top {
    margin-top: 40px;
    margin-right: 10px;
}



.hero {
  padding: 0;
  margin: 0 0 30px 0;
  background-repeat: no-repeat;
  background-position: top center;
}
.hero-big {
	padding-top: 40px;
}

/* ================ BANNER =============== */


.wrap-banner {
    position: absolute;
    height: 100%;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* BANNER */


#banner-top {
    position: relative;
    width: 100%;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
}

.banner-home {
    height: 650px;
}
.banner-slideshow-home {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.banner-slideshow-home .slick-slide img {
    width: 100%;
}


.banner-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    overflow: hidden;
}


.banner-video VIDEO {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: -1;
}

.banner-content {
    position: absolute;
    width: 100%;
    height: 100%;
    color: #FFF;
    display: table;
    z-index: 9;
}
.banner-content > DIV {
    display: table-cell;
    vertical-align: middle;
}
.banner-content-subtitle {
    font-size: 30px;
    margin-bottom: 50px;
}

@media (min-width: 1500px) {
    .banner-content-left-content {
        max-width: 1000px;
    }
    .banner-content-title {
        font-size: 70px;
    }
}


@media only screen and (max-width: 1200px) {

    /* BANNER */
    
    #banner-top {
        position: relative;
    }
    .banner-content-left {
        width: 80%;
    }
    .banner-content-right {
        width: 20%;
    }
    .banner-video VIDEO {
        display: none!important;
    }
    .banner-content-title {
        font-size: 50px;
        margin-bottom: 15px;
    }
    .banner-content-subtitle {
        margin-bottom: 40px;
    }    

}


@media only screen and (max-width: 767px) {
    
    
    
     /* BANNER */
    
    .banner-content-left {
        width: 100%;
    }
    .banner-content-right {
        width: 100%;
    }
    .banner-content-title {
        font-size: 40px;
        margin-bottom: 10px;
    }
    .banner-content-subtitle {
        font-size: 25px;
        margin-bottom: 35px;
    }
    .banner-content-left-content {
        padding: 70px 50px;
    }
    
    
}



/* ================ END BANNER ============== */


.icon-menu-on-small {
  display: none;
  padding: 10px 20px 0;
}

.icon-menu-top, .icon-menu-close {
    position: absolute;
    top: 27px;
    right: 80px;
    z-index: 999;
    cursor: pointer;
}
.icon-menu-top IMG, .icon-menu-close IMG {
    width: 50px;
    height: 50px;
}
.icon-menu-top {
    background: url(../img/icon-menu-white.png) center center;
    background-size: cover;
    width: 50px;
    height: 50px;
}
.icon-menu-close {
    display: none;
    background: url(../img/icon-menu-close.png) center center;
    background-size: cover;
    width: 50px;
    height: 50px;
}


.show_mobile_menu {
  display: none;
  background: #111;
  position: fixed;
  padding-top: 30px!important;
  overflow-y: scroll;
  top: 79px;
  left: 0px;
  width: 100%;
  z-index: 99999;
}

.show_mobile_menu LI {
  display: block!important;
  padding: 10px 10px!important;
  margin: 0;
  text-align: left;
}
.show_mobile_menu LI:hover {
  background: #21252E;
}

#content_home, #content_services {
  padding-bottom: 0px!important;
}
.section {
  padding: 0;
  margin: 0;
  background: url(../img/divider.png) repeat-x center bottom;
}
.section_page {
	padding-bottom: 40px;
}
.section_info H2 {
  font-weight: 700;
  text-transform: capitalize;
  font-size: 40px;
}

.section_info H2.has-subtitle {
	margin-bottom: 15px!important;
}
.section-page-title {
    margin: 15px 0 10px;
    font-weight: bold;
    font-size: 20px;
}
.section-nobgimg {
    background: none!important;
}


#content_home .hero H1.page_title,
#content_services .hero H1.page_title {
  color: #FFF!important;
  text-shadow: 0 1px 5px #000;
  text-align: center;
  position: absolute;
  display: block;
  width: 90%;
  border-bottom: none;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto auto;
  height: 150px;
  font-weight: 600;
}

.call2action-bottom {
	background: #008A45;
	color: #FFF!important;
}
.call2action-bottom * {
	color: #FFF!important;
}
.call2action-bottom .section_info {
	margin-bottom: 20px;
}
.call2action-bottom A:hover {
	color: #9FEEFF!important;
}

.shortcut_page {
  display: table;
  margin: 0 auto;
  width: 100%;
}
.shortcut_page_60 {
	width: 60%;
}
.shortcut_page > DIV {
  display: table-cell;
  vertical-align: top;
  text-align: center;
  padding: 10px 40px;
  width: 25%;
}
.shortcut_page > DIV:hover .shortcut_page_title A {
	color: #FFF;
}

.shortcut_page_icon {
    margin-bottom: 15px;
}
.shortcut_page_icon IMG {
    width: 140px;
    height: 140px;
}
.shortcut_page_title {
  font-size: 25px;
  text-transform: capitalize;
  font-weight: 700;
  min-height: auto;
  margin-bottom: 15px;
}

.shortcut_page_content {
  	text-align: center;
	font-size: 16px;
	line-height: 1.4em;
}


.section_info {
  text-align: center;
  margin-bottom: 50px;
}
.subtitle_content {
    text-align: center;
    font-size: 27px;
    font-weight: 300;
    line-height: 1.2em;
    width: 70%;
    display: inline-block;
    margin: 0;
	font-family: "Open Sans", sans-serif;
}



.list-article {
  display: block;
  margin: 0 auto;
  width: 100%;
  text-align: center;
}
.list-article > DIV {
  display: inline-block;
  vertical-align: top;
  text-align: left;
  padding: 10px 30px;
  width: 45%;
}
.list-article.vertical > DIV {
  text-align: center;
}
.list-article.column-3 > DIV {
  width: 33%;
}
.list-article.column-3.medium.vertical > DIV {
  width: 25%;
}
.list-article.column-4 > DIV {
    width: 22%;
}
.list-article.column-5 > DIV {
    width: 18%;
}
.list-article > DIV:hover IMG {
  width: 160px;
  height: 160px;
  top: -20px;
  left: -20px;
}
.list-article > DIV:hover .list-article-img-small IMG {
  width: 100px;
  height: 100px;
  top: -10px;
  left: -10px;
}
.list-article .list-article-img {
  width: 120px;
  height: 120px;
  margin-bottom: 10px;
  display: inline-block;
}
.list-article.vertical .list-article-img {
  margin-right: 0!important;    
}
.list-article .list-article-img IMG {
  width: 120px;
  height: 120px;
}
.list-article .list-article-img-small {
  width: 80px;
  height: 80px;
}
.list-article .list-article-img-small IMG {
  width: 80px;
  height: 80px;
}

.list-article-content {
  display: table;
}
.list-article-content > DIV {
  display: table-cell;
  vertical-align: top;
}
.list-article-content > DIV:first-child {
  text-align: center;
}
.list-article-img {
  overflow: hidden;
  margin-right: 35px;
  position: relative;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
}
.list-article-img IMG {
  position: absolute;
  top: 0;
  left: 0;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
}
.list-article-title {
  font-size: 25px;
  line-height: 1.3em;
  font-weight: 700;
  margin-bottom: 10px; 
  color: #9FEEFF
}
.list-article-title A:hover {
  color: #FFF;
}
.list-article-desc {
    line-height: 1.3em;
}
.list-article.medium .list-article-title {
  font-size: 22px;
  margin-bottom: 0;
}
.list-article.medium .list-article-desc {
  font-size: 18px;
}
.list-article.small .list-article-title {
  font-size: 18px;
  margin-bottom: 0;
}
.list-article.small .list-article-desc {
  font-size: 14px;
}



.news_list {
  margin-bottom: 50px;
  display: table;
}
.news_list > DIV {
  display: table-cell;
  vertical-align: top;
}
.news_list .news_img {
  width: 150px;
  height: 150px;
}
.news_list .news_img IMG {
  width: 150px;
  height: 150px;
}
.news_list:hover IMG {
  width: 180px;
  height: 180px;
  top: -10px;
  left: -10px;
}
.news_list .news_title {
  font-size: 30px;
  line-height: 40px;
}

.news_img {
  overflow: hidden;
  margin-right: 35px;
  position: relative;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
}
.news_img IMG {
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
}

.news_detail {
  padding-top: 50px;
  max-width: 630px;
  margin: 0 auto;
}
.news_detail .news_title {
  font-size: 48px;
  line-height: 50px;
  font-weight: 800;
  margin-bottom: 10px;
}
.news_detail .news_content_short {
  margin-bottom: 50px;
}
.news_detail .news_content_short H3 {
  font-weight: 700;
}
.news_detail P {
  font-size: 18px;
  line-height: 28px;
  margin-bottom: 20px;
}
.news_detail P A {
  font-weight: 700;
}
.news_detail HR {
    height: 1px;
    background-color: #FFF;
    border: none;
    margin: 50px 0;
}

.news_img_detail {
  text-align: center;
  margin: 20px 0;
}
.news_img_detail IMG {
  width: 100%;
}

.news_video_detail {
  position: relative;
  margin: 40px 0;
  display: block;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
.news_video_detail IFRAME, .news_video_detail OBJECT, .news_video_detail EMBED {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.news_title {
  font-size: 25px;
  line-height: 30px;
  font-weight: 700;
}
.news_title A:hover {
  color: #FFF;
}

.news_subtitle_detail {
  font-size: 25px!important;
  line-height: 30px!important;
  margin-top: 20px;
}

.news_date {
  font-size: 13px;
  margin-bottom: 10px;
}

.news_content_short {
  text-align: justify;
  margin-top: 10px;
}

.news_social_media {
  margin: 10px 0;
  text-align: right;
}
.news_social_media SPAN {
  vertical-align: middle;
  display: inline-block;
  font-size: 12px;
  text-transform: uppercase;
}


.list-box-h {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}
.list-box-h > LI {
    display: inline-block;
    margin-right: 40px;
    margin-bottom: 40px;
    width: 300px;
	background: #FFF;
	color: #21252e;
	cursor: pointer;
	vertical-align: top;
    position: relative;
    border-radius: 10px;
}
.list-box-h > LI:hover IMG {
    width: 340px;
    height: 340px;
    margin-left: -170px;
    margin-top: -170px;
}
#list-box-h-home > LI {
    width: 341px;
    margin-right: 20px;
    margin-bottom: 20px;
}
#list-box-h-home > LI:hover IMG {
    width: 380px;
    height: 380px;
    margin-left: -190px;
    margin-top: -190px;
}
.list-box-h-cover {
    overflow: hidden;
    width: 100%;
    height: 300px;
	position: relative;
    border-radius: 10px;
}
.list-box-h-cover IMG {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 300px;
    height: 300px;
    margin-left: -150px;
    margin-top: -150px;
    border-radius: 10px;
    transition: all ease 0.5s;
    -moz-transition: all ease 0.5s;
    -webkit-transition: all ease 0.5s;
}

#list-box-h-home .list-box-h-cover {
    height: 341px;
}

#list-box-h-home .list-box-h-cover IMG {
    width: 341px;
	height: 341px;
    margin-left: -170.5px;
    margin-top: -170.5px;
}
.list-box-h-title {
    padding: 10px 10px 0 10px;
	font-weight: 600;
    border-radius: 10px;
    line-height: 1.1em;
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 9;
    top: 0;
    left: 0;
    padding: 25px;
    color: #FFF;
    font-size: 30px;
    text-align: left;
    background: #000000a6;
    opacity: 0;
    width: 100%;
    height: 100%;
    transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   -webkit-transition: all 0.5s ease;
}
.list-box-h-title P {
    font-weight: 400;
    font-size: 14px;
    width: 100%;
    line-height: 1.4em;
    margin-bottom: 0;
}
#list-box-h-home .list-box-h-title P {
    width: 80%;
}

.list-box-h-title A, .list-box-h-title A:Hover {
    color: #FFF;
}
.list-box-h-subtitle {
    padding: 0 10px 10px 10px;
	font-size: 14px;
    display: none;
}
.list-box-h-desc {
    font-size: 14px;
    line-height: 1.3em;
    padding: 5px 20px 15px;
    height: 130px;
    text-align: left;
}

.list-box-h > LI:hover .list-box-h-title, 
.list-box-h > LI:hover .list-box-h-subtitle 
{
    display: block;
    opacity: 1;
}

#list-box-h-home > LI:nth-child(1) {
   width: 600px;
}
#list-box-h-home > LI:nth-child(2) {
   width: 450px;
}

#list-box-h-home  > LI:nth-child(1) .list-box-h-cover,
#list-box-h-home  > LI:nth-child(2) .list-box-h-cover {
    height: 350px;
}
#list-box-h-home  > LI:nth-child(1) .list-box-h-title P,
#list-box-h-home  > LI:nth-child(2) .list-box-h-title P {
    display: block;
}
#list-box-h-home  > LI:nth-child(1) .list-box-h-cover IMG {
    width: 600px;
	height: 350px;
    margin-left: -300px;
    margin-top: -175px;
}
#list-box-h-home  > LI:nth-child(2) .list-box-h-cover IMG {
    width: 450px;
	height: 350px;
    margin-left: -225px;
    margin-top: -175px;
}
#list-box-h-home  > LI:nth-child(1):hover .list-box-h-cover IMG {
    width: 650px;
    height: 379px;
    margin-left: -325px;
    margin-top: -189.5px;
}
#list-box-h-home  > LI:nth-child(2):hover .list-box-h-cover IMG {
    width: 500px;
    height: 389px;
    margin-left: -250px;
    margin-top: -194.5px;
}


UL.box_article {
    text-align: center;
    list-style: none;
    display: block;
    margin: 0;
    padding: 0;
}
UL.box_article > LI {
    display: inline-block;
    padding: 0;
    margin: 0 10px 20px;
    width: 280px;
    background: #FFF;
    vertical-align: top;
    border-radius: 10px;
}
UL.box_article > LI:hover IMG {
  width: 340px;
  height: 340px;
  top: -30px;
  left: -30px;
}
.box_article_img {
    overflow: hidden;
    height: 280px;
    width: 280px;
    position: relative;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.box_article_img IMG {
    width: 280px;
    height: 280px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
}
.box_article_content {
    color: #21252e;
    font-size: 14px;
    line-height: 1.3em;
    padding: 20px;
    text-align: left;
}
H3.box_article_title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3em;   
}
.box_article_desc {
    margin-top: 15px;
}


/* UNTUK SMALL */
UL.box_article.small > LI {
    width: 220px;
    min-height: 330px;
}
UL.box_article.small > LI:hover IMG {
  width: 280px;
  height: 280px;
  top: -30px;
  left: -30px;
}
UL.box_article.small .box_article_img {
    height: 220px;
    width: 220px;
}
UL.box_article.small .box_article_img IMG {
    width: 220px;
    height: 220px;
}
UL.box_article.small H3.box_article_title {
    text-align: center;
}



.list-img {
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
	display: inline-block;
}
.list-img > LI {
    display: inline-block;
    margin: 0 40px 40px;
}
.content_home_award {
	text-align: center;
}
.content_home_award .list-img {
	width: 1000px;
}
.content_home_award .list-img IMG {
	width: 200px;
}


.column_section {
  display: table;
}
.column_section > DIV {
  display: table-cell;
  vertical-align: top;
}

.contact_section > DIV:first-child {
  width: 50%;
  padding: 0 50px 0 0;
}
.contact_section > DIV:last-child {
  width: 50%;
  padding: 0 0 0 50px;
}


/* ACCORDION */
.content-accordion {
    padding: 0;
    margin: 0 auto;
    list-style: none;
}

.content-accordion > LI {
    padding: 0;
    margin-bottom: 10px;
	text-align: left;
	border-radius: 8px;
}

.content-accordion-title {
    text-transform: uppercase;
	border-radius: 8px;
    color: #21252e;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    padding: 20px 30px;
    background: #9FEEFF url(../img/icon/icon_right_blue.png) no-repeat right 20px center;
    background-size: auto;
    transition: all 0.3s
}

.content-accordion-title:hover {
    box-shadow: 0px 3px 9px 0 #303644;
    transform: translateY(-3px);
    background: #303644 url(../img/icon/icon_right_blue.png) no-repeat right 15px center;
    background-size: auto;
    color: #FFF
}

.content-accordion-title H3 {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

.content-accordion-hidden {
    display: none;
    padding: 20px 30px;
	font-size: 16px;
    color: #000
}

.content-accordion > LI.active {
	background: #64C5EE;	
}
.content-accordion > LI.active .content-accordion-title {
    background: #303644 url(../img/icon/icon_right_blue.png) no-repeat right 20px center;
    background-size: auto;
    color: #FFF!important;
    box-shadow: 0px 3px 9px 0 #303644;
}
.content-accordion-note-bottom {
    margin-top: 50px;
}
.content-accordion-action {
	margin-top:25px;
}
.content-accordion-action .button {
    margin-bottom: 5px;
}



/* LIST VERTICAL */
.box-vertical {
    padding: 0;
    margin: 0 auto;
    list-style: none;
}

.box-vertical > LI {
    margin-bottom: 10px;
	text-align: left;
	border-radius: 8px;
    text-transform: uppercase;
	border-radius: 8px;
    color: #21252e;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    padding: 20px 30px;
    background: #9FEEFF;
    transition: all 0.3s;
    position: relative;
}

.box-vertical > LI:hover {
    box-shadow: 0px 3px 9px 0 #303644;
    transform: translateY(-3px);
    background: #303644;
    background-size: auto;
    color: #FFF
}

.box-vertical-title H3 {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}
.box-vertical > LI.active {
	background: #64C5EE;	
}
.box-vertical > LI.active .box-vertical-title {
    background: #303644 url(../img/icon/icon_right_blue.png) no-repeat right 20px center;
    background-size: auto;
    color: #FFF!important;
    box-shadow: 0px 3px 9px 0 #303644;
}
.box-vertical-action {
	position: absolute;
    top: 18px;
    right: 20px;
}
.box-vertical-action .button {
    margin-bottom: 5px;
}



/* BOX BIRU */
.box {
	background: #9FEEFF;
	padding: 30px;
	border-radius: 15px;
    color: #21252e;
}
.box-title {
    font-size: 20px;
	font-weight: 600;
    margin: 0 0 20px 0;	
}
.box-content {
	display: table;
	font-size: 16px;
}
.box-content > DIV {
	display: table-cell;
	vertical-align:top;
	padding: 10px 15px;
}
.box-action {
    margin-top: 20px;
}
#box-internship {
	margin-top: 50px;	
}


/* FOOTER */
FOOTER A {
	color: #FFF;
}
FOOTER A:hover {
	color: #9FEEFF;
}
.footer_top {
  display: table;
  width: 100%;
}
.footer_top > DIV {
  display: table-cell;
  vertical-align: middle;
  color: #FFF;
  padding: 10px 20px;
}
.footer_top > DIV:last-child {
  text-align: right;
}
.footer_top > DIV:last-child A IMG:hover {
  transform: scale(1.1, 1.1);
  -webkit-transform: scale(1.1, 1.1);
}
.footer_content {
    display: table;
    width: 100%;
}
.footer_content > DIV {
	display: table-cell;
	vertical-align: top;
	padding: 50px;
}
.footer_content_left {
	width: 40%;
}
.footer_content_right {
	width: 60%;
}
.logo-footer {
	margin-bottom: 20px;
}
.logo-footer IMG {
    width: 150px;
}
.medsos-bottom {
    margin-top: 40px;
}
ul.menu_footer {
    padding: 0;
    margin: 0;
    list-style: none;
}
ul.menu_footer > LI {
    display: inline-block;
    margin-right: 50px;
	vertical-align: top;
	margin-bottom: 30px;
}
.menu_footer_group_title {
    font-weight: bold;
    color: #9FEEFF!important;
    font-size: 16px;
    margin-bottom: 10px;
}
ul.menu_footer UL {
    list-style: none;
    padding: 0;
}
ul.submenu_footer {
    list-style: square!important;
    padding-left: 40px!important;
}
.footer_bottom {
    padding: 20px;
    border-top: 1px solid #444;
}
.copyright-bottom {
    text-align: center;
}

.form INPUT[type=text], INPUT[type=number], 
.form INPUT[type=email], .form TEXTAREA, .form SELECT {
  width: 350px;
}
.form INPUT[type=submit] {
  margin-top: 30px;
}
.form .sub-input INPUT[type=text],  .form .sub-input INPUT[type=email], 
.form .sub-input TEXTAREA, .form .sub-input SELECT {
  width: 330px;
}

.form .button-section {
  margin-top: 50px;
}
.form .button-section INPUT[type=submit] {
  margin-top: 0!important;
}
.form .button-section INPUT, 
.form .button-section INPUT {
  margin-right: 15px;
  margin-bottom: 15px;
}
    


.table.table-form-list INPUT {
    width: 100%!important;
}

.capKontak {
  display: inline-block;
  background: #21252E;
  padding: 10px;
  width: auto;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
}
.capKontak INPUT[type=text] {
  width: 70%;
}
.capKontak #RefreshCaptcha {
  cursor: pointer;
}

textarea.inputUrl {
    height: 60px;
    min-height: 60px!important;
}
.section-form-title {
    font-weight: 700;
    border-bottom: 1px solid #9FEEFF;
    border-top: 1px solid #9FEEFF;
    padding: 10px 0;
	margin-bottom: 10px;
}
.section-form-desc {
    font-weight: normal;
    font-size: 16px;
	margin-bottom: 20px;
}
.section-form-desc P {
    font-weight: normal;
    font-size: 16px;
	margin-bottom: 20px;
}
.radioCheck SPAN {
	display: inline-block;
    vertical-align: top;
    background: #137ca9;
    padding: 3px 10px;
    border-radius: 5px;
    margin-right: 8px;
}
.section-form {
    margin-bottom: 40px;
}

.divMsg {
  background: #209201;
  padding: 5px 20px;
  color: #FFF;
  text-align: center;
  margin: 30px 0;
  text-transform: uppercase;
  font-size: 11px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
}
.divMsg.error {
    background: #d81704;
}

/* PAGINATION */
.pagination-section {
    margin-top: 80px;
    text-align: center;
}
.pagination-section A {
    padding: 6px 12px;
    display: inline-block;
    background: #158bbd;
    font-size: 18px;
    border-radius: 3px;
    color: #FFF;
}
.pagination-section A:hover {
    background: #21252e;
}
A.active-page {
    background: #21252e;
}

.content_page_service .section_info {
	margin-bottom: 0!important;
}


.list_services {
  margin-bottom: 20px;
  padding-bottom: 20px;
}
.list_services:last-child {
  border-bottom: none;
  padding-bottom: 40px;
}
.list_services > DIV:nth-child(2) {
  display: block;
  margin-bottom: 10px;
}
.list_services > DIV:nth-child(1) {
  display: table;
  margin-bottom: 20px;
}
.list_services > DIV:nth-child(3) {
  text-align: justify;
}
.list_services .list_services_left {
  display: table-cell;
  padding-right: 30px;
  vertical-align: middle;
  width: 30%;
  text-align: center;
}
.list_services .list_services_right {
  display: table-cell;
  vertical-align: middle;
  width: 70%;
}
.list_services .list_services_right H3 {
  font-weight: 700;
  font-size: 25px;
  color: #9FEEFF;
  margin-bottom: 10px;
}

.list_properties {
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: 1px dotted #008A45;
}
.list_properties:last-child {
  border-bottom: none;
}
.list_properties .list_properties_desc {
  margin: 15px 0 20px;
}
.list_properties .list_properties_img {
  text-align: center;
}
.list_properties .list_properties_img P {
  text-align: left!important;
}
.list_properties H2 {
  font-weight: 800;
  color: #189DD6;
}

.tab-nav-middle {
  width: 100%;
  display: inline-table;
  padding: 0;
  margin: 30px 0;
}
.tab-nav-middle > li {
  display: table-cell;
  padding: 0;
  text-align: center;
  vertical-align: middle;
  font-size: 18px;
  width: 33.333%;
}
.tab-nav-middle .active A {
  padding: 20px 15px;
  background: #189DD6;
}
.tab-nav-middle .active A:hover {
  background: #168dbf;
}
.tab-nav-middle A {
  display: block;
  background: #999;
  padding: 10px 15px;
  background: #21252e;
  color: #FFF;
  text-transform: capitalize;
}
.tab-nav-middle A IMG {
  vertical-align: middle;
  margin-right: 10px;
}
.tab-nav-middle A:hover {
  background: #2c313d;
}

.propertis-video-trailer {
  text-align: center;
  max-width: 100%;
  margin: 30px auto;
}
.propertis-video-trailer VIDEO {
  width: 100%;
}
.propertis-video-trailer IMG {
  width: 100%;
  display: block;
}

.title-works {
    margin-top: 50px;
}
.media-works-big {
    margin-top: 30px;
}

.properties-detail {
  border: 1px solid #21252e;
  width: 100%;
  margin: 30px auto;
  font-size: 14px;
}
.properties-detail .row:last-child .column {
  border-bottom: none;
}
.properties-detail .column {
  padding: 5px 15px;
  border-bottom: 1px solid #21252e;
  vertical-align: middle;
}
.properties-detail .label {
  background: #21252e;
  border-bottom: 1px solid #21252e;
}
.properties-detail .label:last-child {
  border-bottom: none;
}

.showhide-properties {
  position: relative;
  height: 50px;
  margin-bottom: 30px;
}
.showhide-properties > DIV {
  padding: 10px 0;
  position: absolute;
  top: 0;
  left: 0;
  text-transform: capitalize;
  width: 205px;
  height: 45px;
  text-align: left;
  background: #21252e;
  padding-left: 25px;
}
.showhide-properties > DIV A {
  color: #FFF;
}
.showhide-properties > DIV.active {
  background: #189DD6;
}
.showhide-properties > DIV.active:hover {
  background: #168dbf;
}
.showhide-properties > DIV:hover {
  background: #2c313d;
}
.showhide-properties > DIV IMG {
  vertical-align: middle;
  margin-right: 10px;
}
.showhide-properties .btn-showhide-properties {
  z-index: 5;
  color: #FFF;
  cursor: pointer;
  padding-left: 45px;
  border-radius: 5px;
}
.showhide-properties .btn-showhide-properties IMG {
  position: absolute;
  top: 12px;
  right: 7px;
  left: auto;
  transition: all ease 1s;
  -moz-transition: all ease 1s;
  -webkit-transition: all ease 1s;
}
.showhide-properties .inpro {
  z-index: 4;
}
.showhide-properties .indev {
  z-index: 3;
}
.showhide-properties .completed {
  z-index: 2;
}

.career_list {
    width: 45%;
    float: left;
    margin-right: 20px;
    margin-bottom: 20px;
    background-color: #FFF;
    color: #333;
	border-top: 5px solid #33DBFF;
    padding: 20px;
}

.career_title {
	font-size: 18px;
    line-height: 1.2em;
    text-transform: capitalize;
    font-weight: 600;
	margin-bottom: 10px;
}
.career_content {
	font-size: 16px;
}
.career_content UL {
    margin-top: 0;
}

.putar_reset {
  left: 0;
  top: 0;
}

.putar_h {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  -moz-transform: rotate(180deg);
}

.putar_v {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  -moz-transform: rotate(90deg);
}

.back_to_parent_top {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 10px;
  display: block;
  color: #9FEEFF;
  text-transform: uppercase;
}
.back_to_parent_top:hover {
  color: #FFF;
}

.gallery_list {
  padding: 0;
  margin: 0 auto;
  width: 100%;
  display: block;
}
.gallery_list > LI {
  display: inline-block;
  overflow: hidden;
  width: 146px;
  height: 146px;
  padding: 0;
  margin: 0 16px 16px 0;
  cursor: pointer;
  position: relative;
}
.gallery_list > LI:nth-child(4n+0) {
  margin-right: 0;
}
.gallery_list > LI IMG {
  position: absolute;
  left: 0;
  top: 0;
  transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  width: 146px;
  height: 146px;
}
.gallery_list > LI IMG:hover {
  width: 166px;
  height: 166px;
  left: -10px;
  top: -10px;
}

.gallery_list_ket {
  font-size: 14px;
  font-style: italic;
  width: 100%;
  margin: 0 auto 10px;
}
.gallery_list_ket IMG {
  vertical-align: middle;
}

#video-trailer {
  display: inline-block;
}

.stButton .stLarge {
  height: 25px!important;
  width: 25px!important;
  background-size: 100% 100%!important;
}

.stButton .stLarge:hover {
  background-position: inherit!important;
}


UL.tab-horizontal {
    display: table;
    list-style: none;
    padding: 0;
    margin: 40px 0;
    width: 100%;
    border-radius: 10px;
    border: 1px #21252e solid;
}
UL.tab-horizontal > LI {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    border-radius: 8px;
    width: 50%
}
UL.tab-horizontal > LI.active {
    background: #21252e;
}

UL.tab-horizontal > LI > A {
    padding: 10px 20px;
    display: block;
}
.content-tab {
    display: none;
}
.content-tab.active {
    display: block;
}


.popBox {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background: rgba(24, 157, 214, 0.9);
	display: none;
	z-index: 99999999
}

.popBox-content {
	width: 90%;
	height: 90%;
	position: fixed;
	padding: 0;
	margin: auto auto;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}
.popBox.halfsize .popBox-content {
    width: 50%;
}
.popBoxIframe {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	padding: 0;
	margin: 0;
	left: 0;
	top: 0;
	border: none;
}
.popBoxClose {
	position: absolute;
	top: 5px;
	right: 5px;
	z-index: 999;
	cursor: pointer;
}

/*
|
|
|  AND LAYOUT
|
|
*/
/*
|
|
|  THEME
|
|
*/
/* =========== THEME FOR LAYOUT ================= */
FOOTER {
  background: #21252e;
}

.banner-home-slide {
    width: 100%;
    height: 650px;
}  
.bslide-4 {
    background: url(../banner/2018-banner-4.jpg) center center;
    background-size: cover;
}
.bslide-3 {
    background: url(../banner/2018-banner-3.jpg) center center;
    background-size: cover;
}
.bslide-2 {
    background: url(../banner/2018-banner-2.jpg) center center;
    background-size: cover;
}
.bslide-1 {
    background: url(../banner/2018-banner-1.jpg) center center;
    background-size: cover;
}


#content_home .hero {
  background-image: url(../banner/home.jpg);
  background-size: cover;
  height: 400px;
}

#content_services .hero {
  background-image: url(../banner/services.jpg);
  height: 200px;
  background-size: cover;
}

#content_contact .hero {
  background-image: url(../banner/services.jpg);
  height: 200px;
  background-size: cover;
}

#content_services .hero {
  background-image: url(../banner/services.jpg);
  height: 200px;
  background-size: cover;
}

#content_about .hero {
  background-image: url(../banner/services.jpg);
  height: 200px;
  background-size: cover;
}

#content_news .hero {
  background-image: url(../banner/services.jpg);
  height: 200px;
  background-size: cover;
}

#content_properties .hero {
  background-image: url(../banner/services.jpg);
  height: 200px;
  background-size: cover;
}

#content_works .hero {
  background-image: url(../banner/services.jpg);
  height: 200px;
  background-size: cover;
}

#content_career .hero {
  background-image: url(../banner/services.jpg);
  height: 200px;
  background-size: cover;
}
#content_career .section-page-title {
    text-align: center;
}

#content_properties.milesstone .hero {
  background-image: url(../banner/milesstone.jpg);
  height: 200px;
}

#content_properties.haymd .hero {
  background-image: url(../banner/haymd.jpg);
  height: 200px;
}

#content_properties.trashtalk .hero {
  background-image: url(../banner/trashtalk.jpg);
  height: 200px;
}

#content_properties.demits .hero {
  background-image: url(../banner/thedemits.jpg);
  height: 200px;
}

#content_properties.kiosaki .hero {
  background-image: url(../banner/kiosaki.jpg);
  height: 200px;
}

#content_properties.gallileolei .hero {
  background-image: url(../banner/gallileolei.jpg);
  height: 200px;
}

#content_properties.littleelf .hero {
  background-image: url(../banner/littleelf.jpg);
  height: 200px;
}

#content_properties.katabrak .hero {
  background-image: url(../banner/katabrak.jpg);
  height: 200px;
}

#content_properties.mocho .hero {
  background-image: url(../banner/mocho.jpg);
  height: 200px;
}

#content_properties.tumblin .hero {
  background-image: url(../banner/tumblin.jpg);
  height: 200px;
}

#content_properties.fantasyend .hero {
  background-image: url(../banner/fantasyend.jpg);
  height: 200px;
}

#content_properties.biggubuddy .hero {
  background-image: url(../banner/biggubuddy.jpg);
  height: 200px;
}

/*
|
|
|  END THEME
|
|
*/
/*
|
|
|  STATE
|
|
*/

.bg-blue-1 {
  background: #008A45!important;
}
.bg-blue-3 {
  background: #E1F5FC!important;
}
.color-white {
  color: #FFF!important;
}
.color-blue-2 {
	color: #9FEEFF!important;
}
.no-border {
	border: none!important;
	background: none!important;
}
.is-inline {
	display: inline-block!important;
}
.short-paragraph {
	max-width: 800px;
}
.align-center {
	text-align: center!important;
}
.align-left {
	text-align: left!important;
}
.align-right {
	text-align: right!important;
}

/*
|
|
|  END STATE
|
|
*/
/*
|
|
|  MSC
|
|
*/
.button {
  text-decoration: none;
  display: inline-block;
  vertical-align: middle;
  border: none;
  text-transform: uppercase;
  background-color: #21252E;
  color: #FFF;
}
.button:hover {
  background-color: #196180;
  -webkit-transition: background 200ms ease;
  -moz-transition: background 200ms ease;
  -o-transition: background 200ms ease;
  -ms-transition: background 200ms ease;
  transition: background 200ms ease;
}
.button.small {
  padding: 3px 15px;
  font-size: 14px;
  border-radius: 5px;
}
.button.medium {
  padding: 10px 25px;
  font-size: 16px;
  border-radius: 8px;
}
.button.icon-back {
  background-image: url(../img/icon/icon_left.png);
  background-position: 10px center;
  background-repeat: no-repeat;
  padding-left: 30px;
}

.button-hero {
    cursor: pointer;
    /*position: absolute;
      margin: -20px -150px 0;
      top: 50%;
      left: 50%;
    */
    margin: 40px auto;
    width: 250px;
    background: rgba(255, 255, 255, 0.44);
    border-radius: 50px;
    padding: 4px;
    box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.2);
    -webkit-transition: all 0.2s; /* Safari 3.1 to 6.0 */
    transition: all ease-out 0.2s;
}
.button-hero:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.2);
}
.button-hero DIV {
    font-size: 17px;
    text-align: center;
    font-weight: 600;
    padding: 15px;
    text-transform: uppercase;
    border-radius: 50px;
    letter-spacing: 1px;
    border: 1px solid #168BBD;
    /*
    box-shadow: inset 0px 0px 20px -1px rgb(8, 80, 111);
    -webkit-box-shadow: inset 0px 0px 20px -1px rgb(8, 80, 111);
    -moz-box-shadow: inset 0px 0px 20px -1px rgb(8, 80, 111);
    */
    background: rgba(24,157,214,1);
    background: -moz-linear-gradient(top, rgba(24,157,214,1) 0%, rgba(18,121,165,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(24,157,214,1)), color-stop(100%, rgba(18,121,165,1)));
    background: -webkit-linear-gradient(top, rgba(24,157,214,1) 0%, rgba(18,121,165,1) 100%);
    background: -o-linear-gradient(top, rgba(24,157,214,1) 0%, rgba(18,121,165,1) 100%);
    background: -ms-linear-gradient(top, rgba(24,157,214,1) 0%, rgba(18,121,165,1) 100%);
    background: linear-gradient(to bottom, rgba(24,157,214,1) 0%, rgba(18,121,165,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#189dd6', endColorstr='#1279a5', GradientType=0 );
}

.button-blue {
    background-color: #196180!important;
}
.button-blue:hover {
    background-color: #21252E!important;
}
.button-orange {
    color: #FFF!important;
    background-color: #F7941E!important;
}
.button-orange:hover {
    background-color: #21252E!important;
}



/* ICON */

.icon {
    display: inline-block;
    vertical-align: middle;
    text-decoration: none;
    margin-right: 10px;
}

.icon-32 {
    width: 32px;
    height: 32px;
    margin-top: -3px;
}
.icon-32.icon-play {
    background: url(../img/icon/icon-32.png) no-repeat 0 0;
}
.icon-32.icon-fb-black {
    background: url(../img/icon/icon-32.png) no-repeat -32px -32px;
}
.icon-32.icon-ig-black {
    background: url(../img/icon/icon-32.png) no-repeat -32px -64px;
}
.icon-32.icon-yt-black {
    background: url(../img/icon/icon-32.png) no-repeat -32px -96px;
}
.icon-32.icon-fb-white {
    background: url(../img/icon/icon-32.png) no-repeat 0 -32px;
}
.icon-32.icon-ig-white {
    background: url(../img/icon/icon-32.png) no-repeat 0 -64px;
}
.icon-32.icon-yt-white {
    background: url(../img/icon/icon-32.png) no-repeat 0 -96px;
}

A.whatsapp {
    background: #57BB63;
    font-size: 14px;
    display: inline-block;
    vertical-align: middle;
    border-radius: 50px;
    margin-bottom: 10px;
    padding: 2px 15px;
    text-decoration: none;
    color: #FFF;
}
A.whatsapp IMG {
    display: inline-block;
    vertical-align: text-bottom;
}


.form .label {
  margin: 25px 0 5px 0;
  text-align: left;
}
.form .label-desc {
	display: block;
    font-size: 14px;
    line-height: 1.3em;
    margin-top: 15px;
}
.form .input {
  margin: 5px 0 10px 0;
  text-align: left;
}
.form .sub-label {
  margin-left: 20px;
  margin-top: 10px;
}
.form .sub-input {
  margin-left: 20px;
}
.long-input {
  width: 100%!important;
}

.table {
  display: table;
  padding: 0;
  list-style: none;
}
.table .label {
  font-weight: 600;
  padding-right: 20px;
}

.table-info-h .table-info-h-title {
    text-transform: uppercase;
    font-weight: 600;
    display: block;
    margin-bottom: 5px;
}
.table-info-works {
    font-size: 14px;
    margin-bottom: 50px;
}
.table-info-works .column {
    padding: 0 80px 0 0;
}
.table-form {
	width: 100%
}
.table-form .column {
	padding: 0 10px;
}

.row {
  display: table-row;
}

.column {
  display: table-cell;
}
.two-columns .column {
  width: 50%;
}

.table.table-form-list {
	font-size: 16px;
}
.table.table-form-list .column {
    padding: 5px 10px 10px;
	border-bottom: 1px solid #189dd6;
	border-right: 1px solid #189dd6;
}
.row.row-header .column {
    font-weight: 700;
    font-size: 16px;
    padding: 10px;
	line-height: 1.3em
}
.row.row-header .column SPAN {
	display: block;
    font-size: 14px;
    font-weight: normal;
}
.table-wrapper {
    background: #1392c7;
    border-radius: 10px;
	margin-bottom: 40px;
}

.table-horizontal-2-column {
    width: 100%;
    font-size: 14px;
    background: #9FEEFF;
    color: #222
}
.table-horizontal-2-column .column {
    width: 50%;
    border: 1px solid #64C5EE;
}
.table-horizontal-title {
    background: #64C5EE;
    padding: 10px 20px;
    font-weight: bold;
    text-align: center
}
.table-horizontal-content {
    padding: 20px;
}
.table-horizontal-2-column-ctt {
    margin: 10px 0 50px;
    font-size: 14px;
}

.left {
  float: left;
}

.right {
  float: right;
}

.align_left {
  text-align: left;
}

.align_right {
  text-align: right;
}

.valign_bottom {
  vertical-align: bottom;
}

.valign_top {
  vertical-align: top;
}

.valign_middle {
  vertical-align: middle;
}

.inputWarning {
  border: 2px solid #F33!important;
  background: #ffcccc url(../img/warn_input.png) center right no-repeat;
  padding-right: 10px;
}

.video-showreel {
    max-width: 1050px;
    margin: 30px auto;
    position: relative;
    display: block;
    padding-bottom: 40%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
.video-showreel IFRAME {
    display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	padding: 0;
	margin: 0;
	left: 0;
	top: 0;
	border: none;
}


UL.faq {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
    font-size: 14px;
}
UL.faq > LI {
    display: block;
    margin-bottom: 10px;
}

.faq-answer {
    display: none;
    padding: 0 20px;
}
.faq-question {
    border-radius: 5px;
    padding: 5px 10px;
    margin-bottom: 5px;
    padding-right: 30px;
    cursor: pointer;
    color: #000;
    background: #9feeff url(../img/icon/icon_right_blue.png) no-repeat right 10px center;
    background-size: auto;
    transition: all 0.3s;
}
.faq-question:hover {
    background: #303644 url(../img/icon/icon_right_blue.png) no-repeat right 10px center;
    background-size: auto;
    color: #FFF
}

@media only screen and (min-width: 1201px) {
    .animate {
        opacity: 0;
        transition: all 1s!important;
        -webkit-transition: all 1s!important;
    }
    .animateTop {
        transform: translateY(100px);
        -ms-transform: translateY(100px);
        -webkit-transform: translateY(100px);
    }
    
    .animateLeft {
        transform: translateX(50px);
        -ms-transform: translateX(50px);
        -webkit-transform: translateX(50px);
    }
    .animateRight {
        transform: translateX(-50px);
        -ms-transform: translateX(-50px);
        -webkit-transform: translateX(-50px);
    }
    .toTop {
        transform: translateY(0);
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0);
        opacity: 1;
    }
    
    .toLeft {
        transform: translateX(0);
        -ms-transform: translateX(0);
        -webkit-transform: translateX(0);
        opacity: 1;
    }
    .toRight {
        transform: translateX(0);
        -ms-transform: translateX(0);
        -webkit-transform: translateX(0);
        opacity: 1;
    }
}




/* SLICK DOTS & CAROUSEL */
.slick-dots {
    position: static!important;
    margin-top: 20px!important;
}
.slick-dots li button {
    width: 10px!important;
    height: 10px!important;
    background: #FFF!important;
    border-radius: 50px;
}
.slick-dots li.slick-active button {
    background: #21252e!important;
    width: 15px!important;
    height: 15px!important;
}
.slick-dots li button::before {
    color: #189dd6!important
}
.slick-dots li.slick-active button:before {
    color: transparent!important;
}
.carousel-box {
    display: table;
    text-align: left;
    margin: 0 auto;
    width: 1000px;
}
.carousel-box > DIV {
    display: table-cell;
    vertical-align: top;
    width: 50%;
}
.carousel-box-image IMG {
    width: 100%;
    border-radius: 10px;
}
.carousel-info {
    padding: 0 20px
}
H3.carousel-box-title {
    font-weight: 600;
    color: #9FEEFF;
}
.carousel-box-desc {
    margin-top: 15px;
}
.carousel-box-action {
    margin-top: 35px;
}

.clear {
  clear: both;
}

A.more {
  color: #666;
  text-transform: lowercase;
}

.small_direction {
  padding: 10px 15px;
  text-transform: uppercase;
  font-size: 11px;
  display: inline-block;
  margin-top: 20px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
}

.back {
  background: #111111 url(../img/icon_arrow_left.png) 10px center no-repeat;
  padding-left: 25px;
}
.back:hover {
  background: #222222 url(../img/icon_arrow_left.png) 10px center no-repeat;
}

.goToUrl {
	cursor: pointer;
}

.div-btn-load {
    margin: 20px auto;
    text-align: center;
}
.hide {
    display: none!important;
}
.section-backto {
    margin-top: 80px;
}


/* clearfix, proteksi element dari float */
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  line-height: 0;
  content: " ";
  clear: both;
  height: 0;
  width: 0;
}

* html .clearfix {
  height: 1%;
}

.text-cut {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

/* end clearfix */
/*
|
|
|  END MSC
|
|
*/


/*
    ADDITIONAL
*/
.list-box-alur {
    padding: 0;
    margin: 20px 0 0;
    list-style: none;
    text-align: center
}
.list-box-alur > LI {
    display: inline-block;
    vertical-align: top;
    text-align: left;
    width: 31%;
    margin: 10px;
    padding: 20px;
    background: #FFF;
    color: #333;
    border-radius: 10px;
    min-height: 320px;
    position: relative;
}
.list-box-alur > LI:nth-child(1) {
    margin-left: 0;
}
.list-box-alur > LI:nth-child(3) {
    margin-right: 0;
}
.box-content-alur {
    margin: 50px auto;
    padding: 0;
}
.box-content-alur-header {
    display: table;
    width: 100%;
}
.box-content-alur-header > DIV {
    display: table-cell;
    vertical-align: middle;
}
.box-content-alur-header > DIV:nth-child(1) {
    text-align: left;
    width: 70%;
}
.box-content-alur-header > DIV:nth-child(2) {
    text-align: right;
    width: 30%;
}
.box-content-alur-header .button {
    padding: 10px 20px;
    border-radius: 10px;
    background: #e6722c;
}
.box-content-alur-action {
    margin-top: 20px;
    text-align: center
}
.box-content-alur-action .button {
    padding: 10px 20px;
    border-radius: 10px;
    background: #e6722c;
    margin-bottom: 10px;
    width: 40%; 
}
.box-content-alur-action .button.unggah {
    background-color: #333;
}
.list-box-alur > LI H3 {
    font-size: 16px;
    font-weight: 600;
    text-align: center
}
.list-box-alur > LI H3 SPAN.number {
    display: block;
    vertical-align: middle;
    padding: 9px 10px 3px;
    color: #FFF;
    background: #333;
    border-radius: 20px;
    width: 40px;
    height: 40px;
    text-align: center;
    margin: 0 auto 20px;
}
.list-box-alur > LI H3 SPAN.sub {
    display: block;
    font-size: 13px!important;
    text-transform: uppercase;
    color: #888;
}
.list-box-alur > LI P {
    font-size: 14px;
    line-height: 1.3em
}
.list-box-alur-img IMG {
    width: 100%;
    display: block;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.list-box-alur-title {
    text-align: center;
    font-weight: 600;
    font-size: 25px;
    margin-bottom: 10px;
    font-family: "Open Sans", sans-serif;
}
.list-box-alur-action {
    margin-top: 20px;
    text-align: center;
    position: absolute;
    bottom: 30px;
    left: 0;
    width: 100%;
}
.list-box-alur-action .button {
    padding: 7px 15px;
    font-size: 12px;
    border-radius: 8px;
    background: #333;
}
.list-box-alur-action .button:hover {
    background: #9FEEFF;
    color: #21252e
}
.list-box-alur UL {
    font-size: 14px;
    line-height: 1.5em;
    margin-top: 10px;
}