/* --------------------------------------------- Ikhlas Capital Powered by OrangeSoft --------------------------------------------- */ /* Font Face font-family: 'Asap', sans-serif; --------------------------------------------- */ @import url('https://fonts.googleapis.com/css?family=Asap:400,400i,500,500i,600,600i,700,700i'); @import url('https://fonts.googleapis.com/css?family=Roboto+Condensed'); @font-face {font-family: sofia-pro; src: url("../fonts/Sofia-Pro-normal.otf");} @font-face {font-family: sofia-pro-bold; src: url("../fonts/Sofia-Pro-Bold.otf");} @font-face {font-family: sofia-pro-medium; src: url("../fonts/Sofia-Pro-Medium.ttf");} /*Body Font*/ @font-face {font-family: Minion Pro Regular; src: url("../fonts/minionpro-regular.otf");} @font-face {font-family: Minion Pro Cond; src: url("../fonts/minionpro-boldcn.otf");} @font-face {font-family: Minion Pro Cond italic; src: url("../fonts/minionpro-boldcnitsubh.otf");} @font-face {font-family: Minion Pro Italic Subhead; src: url("../fonts/Minion%20Pro%20Italic%20Subhead.html");} @font-face {font-family: futura-pt-demi; src: url("../fonts/FuturaPTDemi.otf");} /* Import all css files at here --------------------------------------------- */ @import url('default.css'); @import url('general.css'); @import url('animate.css'); /* Note --------------------------------------------- Responsive: @media (min-width: 1200px) {} @media (max-width: 1199px) {} @media (min-width: 992px) {} @media (max-width: 991px) {} @media (min-width: 768px) {} @media (max-width: 767px) {} @media (min-width: 481px) {} @media (max-width: 480px) {} */ /*Animated*/ /*@keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }*/ /*.slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; }*/ /* --------------------------------------------- General ---------------------------------------------*/ /*body, html {height: 100%;}*/ body {font-family: 'Minion Pro Regular',sans-serif;font-style: normal;line-height: 1.5em;text-transform: none;color: rgba(40,26,23,.6);font-size: 18px;-webkit-font-smoothing: antialiased;text-align: justify;} h2 {color: #4a4a4a; font-family: 'sofia-pro-medium', sans-serif;font-size:40px;font-weight: 600;} p {margin-bottom:20px; text-align: justify;} hr {margin-top: 50px;margin-bottom: 50px;border: 0;border-top: 1px solid rgba(255,108,69,.4)} .semi {font-family: 'sofia-pro', sans-serif;margin-top: -20px;margin-bottom: 30px;line-height: 1.2;} .btn-bor {color: #ff6c45;transition: 0.1s background-color linear, 0.1s color linear;-webkit-transition: 0.1s background-color linear, 0.1s color linear;-moz-transition: 0.1s background-color linear, 0.1s color linear;-o-transition: 0.1s background-color linear, 0.1s color linear; font-family: 'Roboto Condensed', sans-serif;font-size: 18px;font-weight: 600;letter-spacing: 2px;border: 2px solid #ff6c45;padding: 15px 20px;} .btn-bor:hover, .btn-bor:focus {background-color: #ff6c45;color: #ffffff;cursor: pointer;} /* --------------------------------------------- Home(About) ---------------------------------------------*/ /* Header & Menu */ div.main-container { margin-top: 120px; } header#header.header-static.minimize-header.header-left-and-right {position: fixed; top: 0; width: 100%;z-index: 200;} .user-logged-in #header.header-static.minimize-header.header-left-and-right { top: 80px; } header#header.header-static.minimize-header.header-left-and-right.stickymenu .header-row .header-logo .logo img {width: 80px;} header#header {background-color: #F2F2F2;} header#header .header-row .header-logo .logo img {width: 100px;} ul.menu.menu--ikhlas-main-menu.nav {float: right;text-transform: uppercase;font-family: 'Roboto Condensed', sans-serif;letter-spacing: 2px;} ul.menu.menu--ikhlas-main-menu.nav > li {display: inline-block;} ul.menu.menu--ikhlas-main-menu.nav > li a {color: #4a2f47;transition: 0.1s linear;-webkit-transition:0.1s linear;-moz-transition: 0.1s linear;-o-transition: 0.1s linear;} ul.menu.menu--ikhlas-main-menu.nav > li a:hover, ul.menu.menu--ikhlas-main-menu.nav > li a:focus {color: #a96643;background: none;} /* Slider */ .paragraph-sliders .paragraph-slider .slider-title {text-align: center;text-transform: uppercase;font-family: "Helvetica Neue",Arial,sans-serif;color: #fefefe;font-size:35px;font-weight: 600;width: 64%;line-height: 1;margin: auto;padding: 20px;position: relative;top: 180px;line-height: 1.3;background-color: rgba(0, 0, 0, .3);} /* Body Paragraph */ .paragraph.body-paragraph {margin: 50px 0;} .page-node-31 .paragraph.body-paragraph {margin: 0 0 40px;} .paragraph.body-paragraph h2.bor-left {border-left: 1px solid rgba(255,108,69,.4);padding-left: 30px;} /* We are Firm for ASEAN */ #text-with-background-403 {background-attachment:fixed;} #text-with-background-403 .text-align-left {margin: 80px 0;text-align: justify;text-align-last: left;} #text-with-background-403 h2 {color: #ffffff;font-family: Minion Pro Regular,sans-serif;font-size: 32px;-webkit-font-smoothing: antialiased;font-weight: normal;margin: 50px 0;} #text-with-background-403 p {color: #ffffff;margin-bottom: 30px;} /* ABC Purpose */ .big-asean.text-with-image-parapgraph h2 {margin-bottom:30px;margin-top: 0;font-size: 35px;font-family: 'sofia-pro', sans-serif;font-weight: 400;} .title-abc {text-align: center;} .title-abc .title-text {border-bottom: 1px solid rgba(40,26,23,.6);display: inline-block;margin: auto;} .title-abc .title-text h1 {font-size: 50px;} .big-asean.text-with-image-parapgraph span.big-word {font-size: 53px;font-weight: 600;} .big-asean.text-with-image-parapgraph img {position: relative;margin: auto;} /* --------------------------------------------- Approach ---------------------------------------------*/ /* Banner */ .page-node-32 .container.bg-banner, .page-node-33 .container.bg-banner, .page-node-42 .container.bg-banner, .page-node-17 .container.bg-banner, .path-gallery1 .container.bg-banner, .page-node-type-gallery .container.bg-banner {background: url(../img/bgasd.jpg)no-repeat center;width: 100%;background-size: cover; background-position-y: -120px; height: 280px;margin-bottom: 80px;} .page-node-32 h1.page-header, .page-node-33 h1.page-header, .page-node-42 h1.page-header, .page-node-17 h1.page-header, .path-gallery1 h1.page-header, .page-node-type-gallery h1.page-header {width: 1170px;margin: 110px auto;font-family: sofia-pro-medium, sans-serif;font-weight: 600;color: #ffffff;text-transform: uppercase;font-size: 40px;} /* Content */ .page-node-32 .text-with-image-parapgraph.bold-title h2 {color: #281a17;font-family: 'sofia-pro', sans-serif;font-weight: 400;} .text-with-image-parapgraph.bold-title img {margin: auto;} .page-node-32 .paragraph.body-paragraph ul {margin-left: 10px;} .page-node-32 .main-container {margin-bottom: 0;} #text-with-background-422 {color: #ffffff;margin-bottom: 0;} #text-with-background-422 h2 {color: #ffffff;margin-bottom: 30px;} .col-md-12.sector {margin-bottom: 30px;} .bor-cir {border: 2px solid #ffffff;text-align: center;padding: 10px;border-radius: 50%;width: 135px;height: 135px;display: table-cell;line-height: 1.2;vertical-align: middle;transition: .2s all ease-in-out;-webkit-transition: .2s all ease-in-out;-moz-transition: .2s all ease-in-out;-ms-transition: .2s all ease-in-out;-o-transition: .2s all ease-in-out;} .bor-cir:hover {border-color: #AE6B45;} #text-with-background-422 .btn-text {margin-top: 50px;} /* --------------------------------------------- Our Team ---------------------------------------------*/ /*Team listing*/ /*.row.team{display: flex;flex-wrap: wrap;margin: 0 -20px;}*/ .page-node-42 .paragraph.body-paragraph {margin: 30px 0;} .page-node-42 .body-width {width: 70%;margin: auto;} .page-node-42 .ikhlas-team .col-md-3.col-sm-4.col-xs-6 a.wrap {position: relative;display: block;margin-bottom: 30px;} .page-node-42 .ikhlas-team .col-md-3.col-sm-4.col-xs-6 .thumb img {margin: auto;} .page-node-42 .ikhlas-team .text-team {text-align: center;} .page-node-42 .ikhlas-team .text-team h4 {padding: 0 40px;} .page-node-42 .ikhlas-team .text-team h3, .page-node-42 .ikhlas-team .text-team h4 {color: rgba(40,26,23,.6);} .page-node-42 .bod-text {font-size: 15px;font-family: sofia-pro, sans-serif;color: rgba(40,26,23,.8);margin-bottom: 30px;} /*Team Detail Page*/ .page-node-type-profile h1.page-header {font-family: futura-pt-demi,sans-serif; color: #222222; text-align: center; font-size: 50px;margin-bottom: 0;margin-top: 100px;} .page-node-type-profile h5 {color: rgba(40,26,23,.8);font-size: 18px;font-family: sofia-pro-medium, sans-serif;text-transform: uppercase;text-align: center;letter-spacing: 2px;margin-top: 0;margin-bottom: 50px;} .page-node-type-profile .btn-text {text-align: center;margin-top: 50px;margin-bottom: 80px;} .page-node-type-profile .title-pager {margin: 50px 0;} .page-node-type-profile .title-pager .tp-prev {display: inline-block;float: left;} .page-node-type-profile .title-pager .tp-next {float: right;text-align: right;} .page-node-type-profile .title-pager a.btn-prev {display: block;\text-transform: uppercase;font-family: Roboto Condensed, sans-serif;font-size: 14px;color: #222;letter-spacing: 1px;} .page-node-type-profile .title-pager a.btn-title {font-family: futura-pt-demi, sans-serif;font-size: 24px;} .page-node-type-profile .title-pager a.btn-title:hover {color: #00000099;} .user-logged-in .views-field.views-field-edit-node {display: block;} .views-field.views-field-edit-node {display: none;} /* --------------------------------------------- Gallery ---------------------------------------------*/ .view-gallery .gallery .title a {color: #ff6c45; font-family: 'sofia-pro-medium', sans-serif; font-size: 24px; font-weight: 600; margin-bottom: 20px; text-align: center; padding: 25px 10px; border-radius: 10px; border:solid 3px #ff6c45; width: 100%; display: inline-grid; transition: 0.1s background-color linear, 0.1s color linear;-webkit-transition: 0.1s background-color linear, 0.1s color linear;-moz-transition: 0.1s background-color linear, 0.1s color linear;-o-transition: 0.1s background-color linear, 0.1s color linear; } .view-gallery .gallery .title a:hover, .view-gallery .gallery .title a:focus {background-color: #ff6c45; color: #ffffff; cursor: pointer;} .page-node-type-gallery .paragraph--type--text-with-image h2 { color: #4a4a4a; font-family: 'sofia-pro-medium', sans-serif; font-size: 24px; font-weight: 600; } /* --------------------------------------------- Contact Us ---------------------------------------------*/ .cont-link a {color: #000;} .cont-link a:hover {color: #00000099;} .page-node-33 .cont-link p {margin-bottom: 0;} .fa-phone:before, .fa-envelope:before {padding-right: 10px;} /* --------------------------------------------- Footer ---------------------------------------------*/ #footer {background-color: #272727;color: #ffffff;padding-bottom: 30px;} ul.menu.menu--ikhlas-footer-menu.nav {text-align: center;text-transform: uppercase;font-family: 'Roboto Condensed', sans-serif;font-size: 18px;letter-spacing: 2px;} ul.menu.menu--ikhlas-footer-menu.nav li {display: inline-block;} ul.menu.menu--ikhlas-footer-menu.nav > li a, #footer .footer-copyright .col-md-6 p.text-align-right a {color: #ffffff;transition: 0.15s ease-out;-webkit-transition:0.15s ease-out;-moz-transition: 0.15s ease-out;-o-transition: 0.15s ease-out;} ul.menu.menu--ikhlas-footer-menu.nav > li a:hover, ul.menu.menu--ikhlas-footer-menu.nav > li a:focus, #footer .footer-copyright .col-md-6 p.text-align-right a:hover {color: rgba(255,255,255,.5);background: none;} footer#footer .footer-copyright {padding: 0;} #footer .footer-copyright .col-md-6, #footer .footer-copyright .col-md-6 p.text-align-right {text-align: center;width: 100%;margin: 0;} #footer .footer-copyright .col-md-6 p.text-align-right {margin-bottom: 30px;} #footer .footer-copyright .col-md-6 p {text-align: center;} #footer .footer-copyright .col-md-6 p.text-align-right {display: none;} /* --------------------------------------------- Responsive ---------------------------------------------*/ @media (max-width: 1024px) { .page-node-32 h1.page-header, .page-node-33 h1.page-header, .page-node-42 h1.page-header {width: 100%;} .page-node-42 .ikhlas-team .text-team h4 {padding: 0;} .page-node-type-profile h1.page-header {margin-top: 90px;} .page-node-type-profile .btn-text {margin-top: 50px;margin-bottom: 50px;} } @media (max-width: 992px) { .paragraph-sliders .paragraph-slider {background-blend-mode: overlay;background-color: rgba(78, 78, 78, 0.4);} .paragraph.body-paragraph {margin: 20px 0;} p.cont-link {margin-bottom: 20px;} .big-asean.text-with-image-parapgraph .col-md-6 img {margin-bottom: 30px;} #text-with-background-422 .col-md-3.col-sm-6.sector {text-align: center;} .our-sector {display: inline-block;} } /*@media (max-width: 824px) { .row.team{display: flex;flex-wrap: wrap;} .big-asean#text_with_image_404 .col-md-6 img {top: 0;} }*/ @media (max-width: 767px) { body,html {overflow-x: hidden;height: auto;} body {font-size: 20px;} /*Header & Menu*/ header#header .header-row .header-menu.active .menu-overlay, ul.menu.menu--ikhlas-main-menu.nav > li {display: none;} ul.menu.menu--ikhlas-main-menu.nav {float: none;text-align: center;height: 0;transition: 0.3s all ease-out;-webkit-transition: 0.3s all ease-out;-moz-transition: 0.3s all ease-out;-ms-transition: 0.3s all ease-out;-o-transition: 0.3s all ease-out;} ul.menu.menu--ikhlas-main-menu.nav.open {float: none;text-align: center;height: auto;} ul.menu.menu--ikhlas-main-menu.nav.open > li {display: inline-block;} ul.menu.menu--ikhlas-main-menu.nav.open > li > a, ul.menu.menu--ikhlas-main-menu.nav > li > a{padding: 5px 15px;} /*Sliders*/ .paragraph-sliders .paragraph-slider .slider-title {font-size: 20px;padding: 10px;top: 200px;} /*Inner page*/ .page-node-32 .container.bg-banner, .page-node-33 .container.bg-banner, .page-node-42 .container.bg-banner {height: 280px;margin-bottom: 20px;} .page-node-31 .title-abc .title-text {width: 60%;} .title-abc .title-text h1 {font-size: 36px;} /*We Are Big Asean*/ /*.big-asean#text_with_image_404 .col-md-6 img {top: 0;}*/ } @media (max-width: 480px){ /*Global*/ h2 {font-size: 30px;} hr {margin-top: 40px;} /*Header & Menu*/ ul.menu.menu--ikhlas-main-menu.nav.open > li > a, ul.menu.menu--ikhlas-main-menu.nav > li > a {padding: 5px;font-size: 16px;} .paragraph-sliders .paragraph-slider .slider-title {font-size: 18px;padding: 10px 5px;width: 55%;} .paragraph-sliders .slick-prev {left: 8px;} .paragraph-sliders .slick-next {right: 8px;} /*Home*/ /*Inner page*/ .page-node-32 h1.page-header, .page-node-33 h1.page-header, .page-node-42 h1.page-header {width: 100%;font-size: 30px;margin: 60px auto;} .paragraph.body-paragraph {margin: 20px 0;} .page-node-type-profile .title-pager a.btn-title {font-size: 20px;} /*Footer*/ ul.menu.menu--ikhlas-footer-menu.nav > li a {padding: 5px;font-size: 16px;} footer#footer .footer-content {padding: 25px 0 0;} #footer .footer-copyright .col-md-6, #footer .footer-copyright .col-md-6 p.text-align-right {font-size: 16px;} } @media (min-width: 768px) and (max-width: 991px) { .col-sm-2:nth-child(6n+1), .col-sm-1-5:nth-child(5n+1), .col-sm-3:nth-child(4n+1), .col-sm-4:nth-child(3n+1), .col-sm-6:nth-child(2n+1) {clear: both;} } @media (min-width: 992px) and (max-width: 1199px) { .col-md-2:nth-child(6n+1), .col-md-1-5:nth-child(5n+1), .col-md-3:nth-child(4n+1), .col-md-4:nth-child(3n+1), .col-md-6:nth-child(2n+1) {clear: both;} } @media (min-width: 992px) { .col-md-3:nth-child(4n+1) { clear: both; } .page-node-31 .text-with-image-parapgraph .container, .page-node-32 .text-with-image-parapgraph .container {width: 940px;} } @media (min-width: 1200px) { .col-lg-2:nth-child(6n+1), .col-lg-1-5:nth-child(5n+1), .col-lg-3:nth-child(4n+1), .col-lg-4:nth-child(3n+1), .col-lg-6:nth-child(2n+1) {clear: both;} .page-node-31 .text-with-image-parapgraph .container, .page-node-32 .text-with-image-parapgraph .container {width: 1140px;} } @media(max-width: 767px) { ul.menu.menu--ikhlas-main-menu.nav {} ul.menu.menu--ikhlas-main-menu.nav.open > li { display: block; } .dropdown-menu { position: static; width: 100%; box-shadow: none; border: none; background: transparent; text-align: center; float: none; } ul.menu.menu--ikhlas-main-menu.nav > li a { font-weight: bold; } ul.menu.menu--ikhlas-main-menu.nav .dropdown-menu > li > a, ul.menu.menu--ikhlas-main-menu.nav .dropdown-menu > li > span { font-weight: normal; } ul.menu.menu--ikhlas-main-menu.nav .dropdown-menu > .active > a, ul.menu.menu--ikhlas-main-menu.nav .dropdown-menu > .active > a:hover, ul.menu.menu--ikhlas-main-menu.nav .dropdown-menu > .active > a:focus { background: transparent; color: #a96643; } }