html, body {height: 100%; margin: 0; padding: 0; background: url('../img/bg.jpg') repeat 0 0; font-family: 'Raleway';}
#wrap {min-height: 100%;}
#main {overflow:auto; padding-bottom: 590px;}  /* must be same height as the footer */
#footer {position: relative; margin-top: -590px; min-height: 590px;	clear:both; overflow: hidden;} 
/*Opera Fix*/
body:before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;
}

.clear {clear: both;}
img {max-width: 100%;}
a:link, a:visited, a:active {-webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; transition: all .2s; text-decoration: none;}
a:hover {text-decoration: none;}
.inline-container {padding-right:5%; padding-left: 5%;}

#header {padding-top: 15px; padding-bottom: 15px; background: #FFF; border-bottom: 1px solid #555658;}
.logo {width: 148px; float: left;}
.logo a:hover {opacity: 0.7;}
.navigation-container {float: right; padding-top: 12px;}
.nav-item {float: left; margin-left: 20px;}
.nav-item a {color: #000;}
.nav-item a:hover {color: #999;}

.item-lang {margin-left: 10px; padding-left: 25px; font-weight: 900;}
.item-lang.indo {background: url('../img/icon-lang-id.png') no-repeat left center; }
.item-lang.english {background: url('../img/icon-lang-en.png') no-repeat left center; }

.section {padding-top: 55px; padding-bottom: 55px;}
.section.darkgrey {background: #555658; color: #FFF;}
.section-title {padding-left: 2%; padding-right: 2%; color: #555658; font-size: 30px; font-weight: bold; text-align: center; background: url('../img/title-line.png') no-repeat center bottom; padding-bottom: 25px; margin-bottom: 40px;}
.section.darkgrey .section-title {color: #FFF; background-image: url('../img/title-line-white.png');}
.section-content {font-size: 14px;}

.button-container {text-align: center;}
.more-button {color: #555658; display: inline-block; border: 2px solid #555658; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 5px 40px; font-weight: 900; cursor: pointer; -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; transition: all .2s;}
.more-button:hover {background: #555658; color: #FFF;}
.more-button.dark {border: 2px solid #FFF; color: #FFF;}
.more-button.dark:hover {border: 2px solid #FFF; background-color: #FFF; color: #555658}

.footer-contact {margin-bottom: 30px;}
#section-contact {padding-top: 0;}
#section-contact .section-title {text-align: left; background: none; margin-bottom: 0px; padding-left: 0;}
.contact-item {margin-bottom: 10px; font-size: 16px;}
.contact-item img {margin-right: 7px;}
.contact-item .hover {display: none;}
.contact-item a {color: #000;}
.contact-item a:hover {color: #999;}
.contact-item a:hover .normal {display: none;}
.contact-item a:hover .hover {display: inline-block;}

.footer-form {margin-bottom: 40px;}
#contact-form input[type="text"], #contact-form textarea {font-size: 14px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-box-shadow: 0; box-shadow: 0; height: auto; padding: 15px 20px 15px 30px;}
#contact-form .help-block {margin-top: 0; margin-bottom: 0;}
#contact-form .form-group {margin-bottom: 0;}
.btn-send-container {margin-top: 20px; text-align: right;}
.btn-send {color: #555658; display: inline-block; border: 2px solid #555658; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 5px 40px; font-weight: 900; cursor: pointer; -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; transition: all .2s;}
.btn-send:hover {background: #555658; color: #FFF;}

.copyright {position: absolute; left: 0; right: 0; bottom: 0; background: #555658; color: #FFF; padding-top: 15px; padding-bottom: 15px;}

.back-to-top {display: none; position: fixed; bottom: 20px; right: 5%; width: 61px; height: 61px; background: url('../img/icon-back-to-top.png') no-repeat top center; cursor: pointer;}
.back-to-top:hover {background-position: bottom center;}

#section-wwa h1.section-title {padding-bottom: 22px; margin-top: 0;}
#section-wwa .section-content {background: url('../img/who-image.png') no-repeat top right; background-size: contain; line-height: 1.8em; letter-spacing: 1px;}
#section-wwa .section-content p {margin-bottom: 20px;}
#section-wwa .inline-container {padding-right: 50%;}
.vision-title {background: url('../img/icon-vision.png') no-repeat center left; padding-left: 40px; font-size: 26px; line-height: 1.8em;}
.mission-title {background: url('../img/icon-mission.png') no-repeat center left; padding-left: 40px; font-size: 26px; line-height: 1.8em;}

#section-wwd {padding-top: 20px; margin-bottom: 0;}
#section-wwd h2.section-title {padding-bottom: 22px; margin-top: 0;}
#section-wwd .section-content p {margin-bottom: 20px; letter-spacing: 1px; line-height: 1.8em;}
.wwd-item {margin-bottom: 50px;}
.wwd-title {font-size: 30px; font-weight: 300; margin-bottom: 25px;}
.wwd-left {float: left; width: 49%; margin-right: 1%;}
.wwd-content img {display: none}
.wwd-right {float: right; width: 49%; margin-left: 1%;}
#wwd-website .wwd-right {text-align: center;}
.wwd-feature-container {margin-top: 30px;}
.wwd-feature-title {font-size: 22px; font-weight: 300; text-align: center; margin-bottom: 30px;}
.wwd-feature-item {text-align: center; margin-bottom: 20px;}
.wwd-feature-item-icon {margin-bottom: 10px;}
.wwd-feature-item-title {font-weight: bold; font-size: 18px; margin-bottom: 15px;}
.wwd-feature-item-desc {line-height: 1.8em; letter-spacing: 1px;}

.category-container {text-align: center; margin-bottom: 40px;}
.category-item-all {text-align: center;}
.category-item {cursor: pointer; display: inline-block; padding: 5px 20px; background: #FFF; border: 1px solid #555658; margin-bottom: 10px; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; transition: all .2s;}
.category-item:hover, .category-item.active {color: #FFF; background: #555658;}

.more-button img.icon-loading {width: 20px; display: none;}

.project-container {margin-bottom: 50px;}
.project-item {float: left; width: 48%; position: relative; margin-bottom: 40px; margin-left: 1%; margin-right: 1%;}
/* .project-item.left {margin-right: 2%;} */
/* .project-item.right {margin-left: 2%;} */
.project-item-image {width: 100%; background-repeat: no-repeat; background-position: top center; background-size: cover; margin-bottom: 15px; position: relative;}
.project-item-image:after {content: ""; display: block; padding-bottom: 80%;}
.project-item-image a {color: #FFF;}
.project-item-image a:hover {color: #CCC;}
.project-item-desc-container {position: relative;}
.project-item-left {padding-right: 100px;}
.project-item-left.no-link {padding-right: 0;}
.project-item-right {position: absolute; width: 80px; text-align: center; top: 0; right: 0;}
.project-item-right a {color: #000; }
.project-item-right a img {opacity: 1; -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; transition: all .2s;}
.project-item-right a:hover {color: #999;}
.project-item-right a:hover img {opacity: 0.7;}
.project-item-title {font-weight: bold; font-size: 20px; margin-bottom: 10px;}

.project-item-shade {padding: 0px 3% 0px 3%; text-align: center; color: #FFF; position: absolute; top: 0; left: 0; right: 0; bottom: 100%; background: url('../img/project-shade-bg.png') repeat 0 0; -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; transition: all .2s;}
.project-item-image:hover .project-item-shade {bottom: 0;}
.project-item-image:hover .project-shade-category, .project-item-image:hover .project-shade-title, .project-item-image:hover .project-shade-more-info {display: block;}
.project-item-short-desc {line-height: 1.8em;}

.project-shade-category {font-size: 20px; font-weight: bold; display: none; margin-top: 60px;}
.project-shade-title {position: absolute; top:50%; transform: translate(0, -50%); font-size: 30px; font-weight: 900; left: 3%; right: 3%; display: none;}
.project-shade-more-info {position: absolute; bottom: 60px; left: 3%; right: 3%; display: none;}
.project-shade-more-info a {color: #FFF;}
.project-shade-more-info a:hover .hover {display: inline-block;}
.project-shade-more-info a:hover .normal {display: none;}
.project-shade-more-info .hover {display: none;}
.project-share-more-info-text {margin-bottom: 10px;}

#section-articles .article-item {margin-bottom: 40px;}
#section-articles .article-item-inner {padding: 5px; background: #FFF; border: 1px solid #999; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px;}
#section-articles .article-item-thumbnail {width: 100%; background-repeat: no-repeat; background-position: top left; background-size: cover; margin-bottom: 15px; position: relative; -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; transition: all .2s;}
#section-articles .article-item-thumbnail:after {content: ""; display: block; padding-bottom: 60%;}
#section-articles .article-item-info-container {padding-left: 5%; padding-right: 5%; padding-bottom: 20px;}
#section-articles .article-item-title {font-size: 18px; color: #000; font-weight: 700; line-height: 1.7em; margin-bottom: 10px;}
#section-articles .article-item-short-desc {font-size: 14px; color: #000; line-height: 1.8em; margin-bottom: 5px;}
#section-articles .article-item-separator {white-space: nowrap; text-align: center; margin-bottom: 10px;}
#section-articles .article-item-date-creator {color: #000;}
#section-articles .article-item-title, #section-articles .article-item-short-desc, #section-articles .article-item-separator, #section-articles .article-item-date-creator {-webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; transition: all .2s;}
#section-articles .article-item-date {font-weight: 600;}
#section-articles .article-item-creator {font-weight: 300;}
#section-articles .article-item-inner a:hover .article-item-thumbnail {opacity: 0.7;}
#section-articles .article-item-inner a:hover .article-item-title, #section-articles .article-item-inner a:hover .article-item-short-desc, #section-articles .article-item-inner a:hover .article-item-separator, #section-articles .article-item-inner a:hover .article-item-date-creator {color: #999;}

#section-article-detail .article-banner {text-align: center; margin-bottom: 60px;}
#section-article-detail .article-share-container {float: left; width: 145px; text-align: center; margin-bottom: 20px;}
#section-article-detail .article-share-title {font-size: 14px; letter-spacing: 1px; font-weight: bold; color: #555658; margin-bottom: 20px;}
#section-article-detail .article-main-content-container {overflow: hidden;}
#section-article-detail .article-created-date {float: left; font-weight: 500;}
#section-article-detail .article-writer {float: right;}
#section-article-detail .article-date-creator-container {margin-bottom: 15px; border-bottom: 1px solid #555658; padding-bottom: 5px;}
#section-article-detail .article-long-desc {letter-spacing: 1px; line-height: 1.8em;}
#section-article-detail .article-share-icon {width: 60px; height: 60px; background-repeat: no-repeat; background-position: top left; background-size: cover; margin: auto; margin-bottom: 15px;}
#section-article-detail .article-share-icon:hover {background-position: bottom left;}
#section-article-detail .article-share-icon.fb {background-image: url('../img/icon-share-fb.jpg');}
#section-article-detail .article-share-icon.twitter {background-image: url('../img/icon-share-twitter.jpg');}
#section-article-detail .article-share-icon.linked {background-image: url('../img/icon-share-linked.jpg');}

#section-article-more {margin-bottom: 40px;}
#section-article-more .article-slide {padding-bottom: 100px;}
#section-article-more .article-item {padding-left: 0.3%; padding-right: 0.3%; position: relative;}
#section-article-more .article-slide .slick-prev, #section-article-more .article-slide .slick-next {width: 55px; height: 55px; top: unset; bottom: 0;}
#section-article-more .article-slide .slick-prev {left: 10%; background-image: url('../img/icon-slide-prev.png') !important; background-repeat: no-repeat; background-position: top left;}
#section-article-more .article-slide .slick-next {right: 10%; background-image: url('../img/icon-slide-next.png') !important; background-repeat: no-repeat; background-position: top left;}
#section-article-more .article-slide .slick-prev:hover, #section-article-more .article-slide .slick-next:hover {background-position: bottom left;}
#section-article-more .article-slide .slick-prev:before, #section-article-more .article-slide .slick-next:before {content: none;}
#section-article-more .article-desc-container {display: none; border: 1px solid #555658; position: absolute; top: 50%; width: 70%; left: 50%; margin-left: -35%; background: #FFF; transform: translate(0, -50%); padding: 20px 3% 20px 3%; text-align: center; color: #555658; -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75); -moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75); box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75); -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; transition: all .2s;}
#section-article-more .article-created {font-size: 11px; margin-bottom: 10px;}
#section-article-more .article-title {font-size: 20px; font-weight: bold; margin-bottom: 10px;}
#section-article-more .article-short-desc {font-size: 14px;}
#section-article-more .article-image-container {position: relative;}
#section-article-more .article-shade {background: url('../img/article-shade.png') repeat 0 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0;}
#section-article-more .article-item.slick-active .article-shade {display: none;}
#section-article-more .article-item.slick-active .article-desc-container {display: block;}
#section-article-more .article-image-container a:hover .article-desc-container {background: #555658; color: #FFF;}

.slider-container {float: left; width: 50%; border: 0;}
.slider-container .flex-direction-nav a {width: 45px; height: 45px; -webkit-transition: all 0s ease-in-out;
    -moz-transition: all 0s ease-in-out;
    -ms-transition: all 0s ease-in-out;
    -o-transition: all 0s ease-in-out;
    transition: all 0s ease-in-out;}
.slider-container .flex-direction-nav .flex-prev {left: 5px !important;}
.slider-container .flex-direction-nav .flex-next {right: 5px !important;}
.slider-container .flex-nav-next a {background: url('../img/slide-caret-right.png') no-repeat top left;}
.slider-container .flex-nav-next a:hover {background-position: bottom left;}
.slider-container .flex-nav-prev a {background: url('../img/slide-caret-left.png') no-repeat top left;}
.slider-container .flex-nav-prev a:hover {background-position: bottom left;}
.slider-container .flex-nav-next, .slider-container .flex-nav-prev {text-indent: 10000000px;}
.project-information-container {float: left; width: 47%; padding-left: 3%; color: #555658;}
.project-slide-item {width: 100%; height: 500px; background-repeat: no-repeat; background-position: top left; background-size: cover; overflow: hidden;}
.project-slide-item img {visibility: hidden;}
.project-info-title {font-weight: 300;}
.project-information-container a {font-weight: bold; color: #555658;}
.project-information-container a:hover {font-weight: normal; color: #000;}
.project-about {margin-bottom: 40px;}
.project-about p {line-height: 1.8em; letter-spacing: 1px;}
.prev-project, .next-project {opacity: 1; width: 55px; height: 55px;}
.prev-project {background: url('../img/icon-prev-project.png') no-repeat 0 0; float: left;}
.next-project {background: url('../img/icon-next-project.png') no-repeat 0 0; float: right;}
.prev-project:hover, .next-project:hover {opacity: 0.7;}

#btn-mobile-menu {display: none; margin-top: 13px; width: 30px; height: 20px; background: url('../img/btn-mobile-menu.png') no-repeat 0 0; cursor: pointer; float: right; background-size: contain;}
#menu-mobile-container {display: none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: #28282a; z-index: 99; overflow: auto;}
#btn-mobile-close {cursor: pointer; margin-top: 10px; width: 25px; height: 25px; background: url('../img/menu-button-close.png') no-repeat 0 0; float: right}
#wrap-mobile {min-height: 100%; padding-bottom: 80px;}
#header-mobile {padding: 20px 5% 1% 5%; margin-bottom: 20px;}
#logo-white {width: 150px; float: left;}
#logo-white img {max-width: 100%; height: auto; float: left;}
#content-mobile {color: #FFF; padding: 2% 5% 2% 5%;}
.menu-mobile-container a {color: #FFF;}
.menu-mobile-container a:hover {color: #CCC;}
.menu-mobile-container ul {list-style: none; padding-left: 0;}
.menu-mobile-container li {font-size: 20px; border-bottom: 1px solid #FFF; padding-bottom: 3%; padding-top: 3%;}
#footer-mobile {height: 80px; margin-top: -80px; font-size: 12px; text-align: right; padding: 1% 5% 1% 5%; color: #FFF;}
#social-media-container-mobile {margin-bottom: 5px;}
#social-media-container-mobile img {margin-right: 10px; -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; transition: all .2s; text-decoration: none;}
#social-media-container-mobile img:hover {opacity: 0.7;}

.grecaptcha-badge { display:none !important; }

@media all and (max-width:1100px) {
    .project-shade-category {font-size: 18px; margin-top: 40px;}
    .project-shade-title {font-size: 25px;}
    .project-shade-more-info {bottom: 40px;}
}

@media all and (max-width:1000px) {
    .project-shade-category {font-size: 16px; margin-top: 30px;}
    .project-shade-title {font-size: 22px;}
	.project-shade-more-info {bottom: 30px;}
	
    #section-wwa .section-content {background-position: 150% 0;}
    
    .project-slide-item {height: 400px;}
}

@media all and (max-width:900px) {
    .project-shade-category {font-size: 15px; margin-top: 25px;}
    .project-shade-title {font-size: 20px;}
    .project-shade-more-info {bottom: 25px;}
    .project-share-more-info-text {font-size: 12px;}
    .project-share-more-info-icon img {width: 40px; height: 40px;}
    .article-title {font-size: 18px;}
	.article-short-desc {font-size: 12px;}
	
	#section-wwa .section-content {background-position: 250% 0;}
	.vision-title {font-size: 23px;}
	.mission-title {font-size: 23px;}
}

@media all and (max-width:850px) {
    #section-wwa .section-content {background-position: 400% 0;}
    
    .project-slide-item {height: 370px;}
}

@media all and (max-width:800px) {
    .project-shade-category {font-size: 14px; margin-top: 20px;}
    .project-shade-title {font-size: 18px;}
	.project-shade-more-info {bottom: 20px;}
	#section-wwa .section-content {background-position: 8000% 0;}
	#section-wwa .section-content {background-image: url('../img/who-image-mobile.png'); background-position: bottom left;}
	#section-wwa .inline-container {padding-right: 5%; padding-bottom: 200px;}
}

@media all and (max-width:767px) {
	.navigation-container {display: none;}

    .project-item {width: 100%; float: none; margin-left: 0;}
    .project-item.left {margin-right: 0;}
    .project-item.right {margin-left: 0;}
    .project-shade-category {font-size: 20px; margin-top: 60px;}
    .project-shade-title {font-size: 30px;}
    .project-shade-more-info {bottom: 60px;}
    .project-share-more-info-text {font-size: 14px;}
    .project-share-more-info-icon img {width: 55px; height: 55px;}
	#footer {height: auto;}
	
	#wwd-website .wwd-left, #wwd-apps .wwd-left, #wwd-software .wwd-right {float: none; width: 100%; text-align: center;}
	.wwd-content img {display: inline-block;}
	#wwd-website .wwd-right, #wwd-apps .wwd-right, #wwd-software .wwd-left {display: none;}

    #btn-mobile-menu {display: block;}
    
    .slider-container {float: none; width: 100%;}
    .project-information-container {float: none; padding-left: 0;}
    .project-slide-item {height: 600px;}

    #section-article-detail .article-share-container {float: none; width: 100%; text-align: left;}
    #section-article-detail .article-share-icon {float: left; margin-right: 10px;}
}

@media all and (max-width:700px) {
    .article-short-desc {display: none;}
    .article-title {font-size: 16px;}
    .project-slide-item {height: 550px;}
}

@media all and (max-width:600px) {
    .section-title {font-size: 25px;}
    #section-about .section-content {font-size: 16px;}
    .project-shade-category {font-size: 16px; margin-top: 30px;}
    .project-shade-title {font-size: 22px;}
	.project-shade-more-info {bottom: 30px;}
	#section-wwa .inline-container {padding-right: 5%; padding-bottom: 150px;}
    .wwd-title {font-size: 25px;}

    .project-info-title {font-size: 20px;}
    .project-slide-item {height: 500px;}
}

@media all and (max-width:550px) {
    .project-slide-item {height: 450px;}
}

@media all and (max-width:500px) {
    .project-shade-category {font-size: 15px; margin-top: 25px;}
    .project-shade-title {font-size: 20px;}
    .project-shade-more-info {bottom: 25px;}
    .project-share-more-info-text {font-size: 12px;}
    .project-share-more-info-icon img {width: 40px; height: 40px;}
    .project-item-title {font-size: 18px;}
    .project-item-short-desc {font-size: 13px;}
    .project-item-right {font-size: 13px !important; width: 70px;}
    .project-item-right img {width: 40px; height: 40px;}
    .project-item-left {padding-right: 85px;}
	.article-desc-container {display: none !important;}
    #section-wwa .inline-container {padding-right: 5%; padding-bottom: 100px;}
    .project-slide-item {height: 400px;}
}

@media all and (max-width:450px) {
    .project-slide-item {height: 350px;}
}

@media all and (max-width:400px) {
    .project-shade-category {font-size: 14px; margin-top: 20px;}
    .project-shade-title {font-size: 18px;}
	.project-shade-more-info {bottom: 20px;}
    #section-wwa .inline-container {padding-right: 5%; padding-bottom: 80px;}
    .project-slide-item {height: 300px;}
}