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 {-webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; transition: all .2s;}
a:hover {text-decoration: none;}
.inline-container {padding-right:5%; padding-left: 5%;}

.lang-container {padding-top: 30px; text-align: right;}
.lang-container a {color: #000;}
.lang-container 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; }

.logo {text-align: center; margin-top: 0;}
.logo img {width: 100%; max-width: 327px;}
.subtitle {font-size: 18px; font-weight: 700; text-align: center; color: #555658;}
.tag {font-size: 45px; color: #555658; font-weight: 700; text-align: center;}

.menu-container {position: relative; padding-bottom: 115px; overflow: hidden;}
.diamond{
    width:50%;
    margin-left:21%;
    transform-origin:60% 0;
    transform: rotate(-45deg);
}
.diamond > a{
    float:left;
    width:19%;
    padding-bottom:19%;
    margin:0.5%;
    background:#555658;
    position: relative;
    color: #FFF;
    opacity: 1;
    -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; transition: all .2s;
}
.diamond > a:hover{
    opacity: 0.7;
}
.diamond > a:nth-child(4){
    clear:left;
    margin-left:20.5%;
}
.diamond > a:nth-child(1){
    visibility: hidden;;
}

.diamond-text {position: absolute; font-size: 16px;; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; transform: rotate(45deg);}
.diamond-text img {margin-bottom: 10px;}

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

#section-main {overflow:hidden;}

#section-about .section-content {font-size: 18px; color: #555658; text-align: center;}
.wwd-container {margin-bottom: 30px;}
.wwd-item {text-align: center; margin-bottom: 30px;}
.wwd-icon {margin-bottom: 10px;}
.wwd-title {margin-bottom: 10px; font-weight: bold; font-size: 18px; text-transform: uppercase;}
.wwd-desc {line-height: 1.7;}

.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}

.project-container {margin-bottom: 50px;}
.project-item {float: left; width: 48%; position: relative; margin-bottom: 40px;}
.project-item.left {margin-right: 2%;}
.project-item.right {margin-left: 2%;}
.project-item-image {width: 100%; background-repeat: no-repeat; background-position: top left; 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 img {margin-bottom: 5px;}
.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;}

.article-slide {padding-bottom: 100px;}
.article-item {padding-left: 0.3%; padding-right: 0.3%; position: relative;}
.article-slide .slick-prev, .article-slide .slick-next {width: 55px; height: 55px; top: unset; bottom: 0;}
.article-slide .slick-prev {left: 10%; background-image: url('../img/icon-slide-prev.png') !important; background-repeat: no-repeat; background-position: top left;}
.article-slide .slick-next {right: 10%; background-image: url('../img/icon-slide-next.png') !important; background-repeat: no-repeat; background-position: top left;}
.article-slide .slick-prev:hover, .article-slide .slick-next:hover {background-position: bottom left;}
.article-slide .slick-prev:before, .article-slide .slick-next:before {content: none;}
.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;}
.article-created {font-size: 11px; margin-bottom: 10px;}
.article-title {font-size: 20px; font-weight: bold; margin-bottom: 10px;}
.article-short-desc {font-size: 14px;}
.article-image-container {position: relative;}
.article-shade {background: url('../img/article-shade.png') repeat 0 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0;}
.article-item.slick-active .article-shade {display: none;}
.article-item.slick-active .article-desc-container {display: block;}
.article-image-container a:hover .article-desc-container {background: #555658; color: #FFF;}

#section-contact .section-title {text-align: left; background: none; margin-bottom: 10px; 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;}

.footer-contact {margin-bottom: 30px;}

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

@media all and (max-width:1100px) {
    .diamond {width: 62%; margin-left: 14%;}
    .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) {
    .diamond {width: 69%; margin-left: 10%;}
    .project-shade-category {font-size: 16px; margin-top: 30px;}
    .project-shade-title {font-size: 22px;}
    .project-shade-more-info {bottom: 30px;}
}

@media all and (max-width:900px) {
    .diamond {width: 76%; margin-left: 6%;}
    .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;}
}

@media all and (max-width:800px) {
    .diamond {width: 86%; margin-left: 0%;}
    .tag {font-size: 40px;}
    .project-shade-category {font-size: 14px; margin-top: 20px;}
    .project-shade-title {font-size: 18px;}
    .project-shade-more-info {bottom: 20px;}
}

@media all and (max-width:767px) {
    .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;}
}

@media all and (max-width:700px) {
    .diamond {width: 100%; margin-left: -7%;}
    .tag {font-size: 35px;}
    .article-short-desc {display: none;}
    .article-title {font-size: 16px;}
}

@media all and (max-width:600px) {
    .diamond {width: 116%; margin-left: -18%;}
    .logo img {width: 45%;}
    .subtitle {font-size: 15px;}
    .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;}
}

@media all and (max-width:500px) {
    .diamond {width: 139%; margin-left: -32%;}
    .logo img {width: 40%;}
    .subtitle {font-size: 14px;}
    .tag {font-size: 30px; margin-bottom: 20px;}
    .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;}
}

@media all and (max-width:400px) {
    .diamond {width: 160%; margin-left: -46%;}
    .logo img {width: 38%;}
    .subtitle {font-size: 14px;}
    .tag {font-size: 24px;}
    .project-shade-category {font-size: 14px; margin-top: 20px;}
    .project-shade-title {font-size: 18px;}
    .project-shade-more-info {bottom: 20px;}
}