html,
body {
height: auto !important;
}
a.dx-none {
text-decoration: none;
color: inherit;
}
.m-0 {
margin: 0px !important;
}
.mb-0 {
margin-bottom: 0px;
}
.mb-5 {
margin-bottom: 5px;
}
.mb-10 {
margin-bottom: 10px;
}
.mb-15 {
margin-bottom: 15px;
}
.mb-20 {
margin-bottom: 20px;
}
.mb-30 {
margin-bottom: 30px;
}
.mt-0 {
margin-top: 0px;
}
.mt-5 {
margin-top: 5px;
}
.mt-10 {
margin-top: 10px;
}
.mt-15 {
margin-top: 15px;
}
.mt-15-ip {
margin-top: 15px !important;
}
.mt-20 {
margin-top: 20px;
}
.mt-30 {
margin-top: 30px;
}
.mr-15 {
margin-right: 15px;
}
.mr-20 {
margin-right: 20px;
}
.ml-15 {
margin-left: 15px;
}
.ml-20 {
margin-left: 20px;
}
.pt-10 {
padding-top: 10px;
}
.pt-5 {
padding-top: 5px;
}
.pt-15 {
padding-top: 15px;
}
.pt-15-ip {
padding-top: 15px !important;
}
.pt-16 {
padding-top: 16px;
}
.pt-20 {
padding-top: 20px;
}
.pt-25 {
padding-top: 25px;
}
.pt-30 {
padding-top: 30px;
}
.pt-35 {
padding-top: 35px;
}
.pb-5 {
padding-bottom: 5px;
}
.pb-10 {
padding-bottom: 10px;
}
.pb-15 {
padding-bottom: 15px;
}
.pb-20 {
padding-bottom: 20px !important;
}
.pb-25 {
padding-bottom: 25px;
}
.pb-35 {
padding-bottom: 35px;
}
.pl-15-ip {
padding-left: 15px !important;
}
.pad-20 {
padding: 20px;
}
.pad-30 {
padding: 30px;
}
.w-100 {
width: 100px;
}
#nav {
z-index: 9;
position: relative;
}
#offcanvas .uk-offcanvas-bar li a,
#nav .uk-navbar-nav li a {
font-family: "MDGROTESQUE";
text-transform: capitalize;
font-weight: 400;
font-size: 14px;
color: #fff;
padding: 0 13px;
}
#offcanvas .uk-offcanvas-bar li a {
color: #b1b1b1;
}
#offcanvas .uk-offcanvas-bar li.uk-active a,
#nav .uk-navbar-nav li.uk-active a {
color: #475d54;
font-weight: 600;
}
#nav.white .uk-navbar-nav li.uk-active a {
color: #fff;
font-weight: 600;
}
#nav.green .uk-navbar-nav li a {
color: #475d54;
}
#offcanvas .uk-offcanvas-bar {
background: #fff;
}
#offcanvas img {
width: 80%;
}
#offcanvas .uk-offcanvas-close {
position: absolute;
top: 0px;
right: 0px;
padding-top: 3px;
}
#offcanvas .uk-offcanvas-close img {
width: 12px;
padding: 0px;
margin: 0px;
}
.section-footer {
padding: 30px 0px;
}
.br-1 {
border-right: 1px solid;
}
.bg-footer {
background: #3c3d41;
}
.section-footer .name {
color: #fff;
font-size: 26px;
font-weight: 500;
line-height: 36px;
margin-top: -6px;
}
.section-footer .name span {
color: #6e84ab;
}
.section-footer .copyright {
font-size: 11px;
color: #fff;
}
.section-footer .copyright a {
color: #fff;
text-decoration: none;
}
.section-footer .copyright a:hover {
color: #6e84ab;
}
@media (min-width: 960px) {
.section-footer .copyright {
padding-top: 120px;
}
}
@media (max-width: 959px) {
.br-1 {
border-right: 0px solid;
}
}
.section-footer .title {
color: #fff;
font-size: 16px;
font-weight: 500;
}
.section-footer #jam-kerja p {
margin: 3px 0px;
color: #fff;
font-size: 14px;
}
.section-footer #jam-kerja #jam {
padding-left: 7px;
}
.to-top-btn {
width: 30px;
height: 30px;
background: #475d54;
border: 1px solid #475d54;
position: fixed;
bottom: 20px;
right: 20px;
z-index: -1;
display: none;
cursor: pointer;
border-radius: 6px;
}
.to-top-btn svg {
margin: 10px 7px;
color: #fff;
}
.to-top-btn:hover,
.to-top-btn:focus {
background: #364740;
}
.to-top-btn:hover svg {
color: #fff;
}
.show-btn {
z-index: 1;
display: block;
}
.kontak-info {
margin: 4px 0px;
color: #fff;
font-size: 14px;
}
.kontak-info span {
color: #6e84ab;
font-weight: 700;
}
.login-bg {
height: auto;
}
.table-canvas {
margin: 0 auto;
height: 100vh;
display: table;
}
.table-cell {
vertical-align: middle;
display: table-cell;
}
@media (min-width: 960px) {
.login-bg {
width: 100%;
height: 100vh;
}
}
.login-bg-position {
position: relative;
}
.border-rounded {
border-radius: 20px;
}
.border-rounded .images {
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}
.login-banner {
position: absolute;
width: 100%;
top: 0px;
z-index: 1;
}
.login-banner p {
font-family: "Carmen Sans";
color: #fff;
font-weight: 100;
}
.login-banner p.head {
font-size: 36px;
font-weight: 300;
}
.pad-login-top {
padding-top: 70px;
}
.pad-login-bottom {
padding-top: 140px;
}
.pad-form-outter {
padding-top: 70px;
}
.input-form {
padding: 0px;
border-top: 0px;
border-left: 0px;
border-right: 0px;
border-bottom: 2px solid #274675;
color: #274675;
}
.input-form:focus {
border-color: #274675;
}
.input-form.error {
border-bottom: 2px solid #dc0000;
color: #dc0000;
}
.input-form:focus.error {
border-color: #dc0000;
}
.input-form::placeholder {
color: #274675;
font-family: "Carmen Sans";
font-size: 14px;
opacity: 1;
}
.input-form:-ms-input-placeholder {
color: #274675;
font-family: "Carmen Sans";
font-size: 14px;
}
.input-form::-ms-input-placeholder {
color: #274675;
font-family: "Carmen Sans";
font-size: 14px;
}
.input-form.white::placeholder {
color: #fff;
}
.input-form.white:-ms-input-placeholder {
color: #fff;
}
.input-form.white::-ms-input-placeholder {
color: #fff;
}
.input-form.white {
background: #336699;
color: #fff;
border-bottom: 2px solid #fff;
}
.error-message {
margin: 3px 0px;
font-size: 12px;
color: #dc0000;
}
.sucess-message {
margin: 3px 0px;
font-size: 12px;
color: #274675;
}
.sucess-message.white {
color: #fff;
}
.btn-ksm {
font-family: "Carmen Sans";
text-transform: capitalize;
background-color: #274675;
border-radius: 4px;
font-weight: 300;
font-size: 14px;
}
.btn-ksm.white {
color: #333;
background-color: #fff;
}
.btn-ksm:hover,
.btn-ksm:focus {
background-color: #435e87;
}
.btn-ksm.white:hover,
.btn-ksm.white:focus {
color: #fff;
background-color: #369;
border: 1px solid white;
}
.btn-ksm:disabled {
background-color: #566d93;
color: #fff;
border-color: #566d93;
}
.btn-ksm-light {
font-family: "Carmen Sans";
text-transform: capitalize;
background: #fff;
border-color: #274675;
border-radius: 4px;
font-weight: 500;
font-size: 14px;
color: #274675;
}
.btn-ksm-light.off-border {
border-color: transparent;
}
.btn-ksm-light:hover,
.btn-ksm-light:focus {
background: #3c6096;
}
.btn-ksm-light:disabled {
background-color: #fff;
}
.login-bg .uk-fieldset {
padding-top: 60px;
}
@media (max-width: 959px) {
.border-rounded {
border-radius: 0px;
}
.border-rounded .images {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
.pad-form-outter {
padding-top: 30px;
}
.login-bg .uk-fieldset {
padding-top: 0px;
}
.pad-mobile {
padding: 0px 15px;
}
}
.mobile-login-nav {
width: 100%;
background: url("../images/base/bg-login.png");
background-size: 120%;
background-color: #23416f;
position: absolute;
left: 0;
top: 0;
border-bottom-left-radius: 20px;
}
.mobile-login-nav img {
padding: 15px 30px;
}
.login-mobile {
font-family: "Carmen Sans";
font-size: 28px;
font-weight: 300;
color: #274675;
padding-top: 15px;
}
.note-login {
font-size: 12px;
font-family: "Carmen Sans";
margin-bottom: 0px;
}
.note-login strong {
color: #274675;
}
@media (max-width: 959px) {
.login-bg .uk-child-width-1-2\@s > * {
width: 100%;
}
}
.bg-profile {
background: #f8fdff;
}
.profile-picture {
border-radius: 50%;
padding: 15px;
}
.profile-circle {
width: 150px;
height: 150px;
border-radius: 50%;
background: #274675;
border: 6px solid #fff;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
margin: 25px !important;
}
.profile-info {
padding: 25px 0px;
}
.profile-info p {
font-family: "Carmen Sans";
font-size: 16px;
color: #333;
}
.profile-info .nomer {
margin: 0;
font-size: 14px;
color: #006633;
}
.profile-info .nama {
margin: 0;
font-size: 18px;
color: #333;
font-weight: 600;
margin-bottom: 5px;
}
.profile-info #profile-detail {
margin-bottom: 10px;
}
.profile-info #profile-detail p {
margin: 3px 0px;
}
.profile-info .marker-ico {
height: 18px;
margin-top: -8px;
}
.profile-info .bedge-ico {
height: 28px;
}
.profile-info .scope-ico {
height: 16px;
margin-top: -4px;
}
.profile-info #profile-detail #text-detail {
padding-left: 10px;
}
.profile-info #profile-detail #text-detail p {
font-family: "Carmen Sans";
}
@media (max-width: 959px) {
.profile-info {
padding: 0 0 25px 30px;
}
.profile-circle {
margin: 0 auto !important;
margin-top: 25px !important;
}
}
.table-sertif {
margin: 0px;
}
.sertif-section {
padding-top: 30px;
padding-bottom: 30px;
}
.sertif-section .uk-tab > .uk-active > a {
color: #274675;
border-color: #274675;
}
.sertif-section .uk-tab > * > a {
font-size: 16px;
color: #333;
font-family: "Carmen Sans";
text-transform: capitalize;
font-weight: 300;
border-bottom: 4px solid transparent;
}
.uk-table.table-sertif td {
padding: 10px;
font-size: 14px;
font-family: "Carmen Sans";
}
.uk-table.table-sertif td strong {
color: #274675;
}
.uk-table.table-sertif .left-bar {
padding: 0px;
width: 15px;
}
.uk-table.table-sertif tr.active {
background-color: #274675 !important;
}
.uk-table.table-sertif tr.active td,
.uk-table.table-sertif tr.active strong {
color: #fff !important;
}
.uk-table-striped.table-sertif tbody tr:nth-of-type(odd),
.uk-table-striped.table-sertif > tr:nth-of-type(odd) {
background: #fff;
}
.uk-table.table-sertif tbody tr {
background: #fff;
}
.head-sertif {
padding: 15px 30px;
background: #fff;
}
.head-sertif .nama-sertifikat strong {
color: #274675;
}
.head-sertif p {
font-family: "Carmen Sans";
margin: 0px;
}
.head-sertif .nama-sertifikat {
margin: 5px 0px;
}
.head-sertif .tanggal-penetapan {
margin: 5px 0px;
}
.sertificate-section {
margin-bottom: 20px;
}
.banner-blue-dot {
background: url(../images/base/blue-dot.png);
background-repeat: no-repeat;
background-position: 0px 120px;
background-size: 110px;
padding-top: 100px;
padding-bottom: 100px;
}
.banner-green-dot {
background: url(../images/base/green-dot.png);
background-repeat: no-repeat;
background-position: 80px 270px;
background-size: 110px;
}
#banner-home p {
font-family: "Carmen Sans";
}
#banner-home .head {
font-size: 16px;
color: #006633;
margin: 0px;
}
#banner-home .name {
font-family: MDGROTESQUE;
font-weight: 600;
font-size: 50px;
color: #274675;
margin-top: -10px;
}
.description {
font-size: 14px;
padding: 0;
margin-bottom: 10px;
}
.description strong {
color: #274675;
}
.description.inversed {
color: #fff;
}
.description.inversed strong {
color: #fff;
}
/*end banner resposive*/
#layanan p {
font-family: "Carmen Sans";
}
#layanan .head {
font-size: 32px;
font-family: MDGROTESQUE;
font-weight: 600;
color: #274675;
}
#layanan .layanan-container {
padding: 10px 50px;
}
#layanan #layanan-list .owl-nav {
position: absolute;
top: -60px;
right: 0;
}
#layanan #layanan-list button {
line-height: 10px;
padding: 10px !important;
border: 1px solid #274675;
border-radius: 5px;
background: white;
margin-right: 5px;
}
#layanan #layanan-list button:hover,
#layanan #layanan-list button:active,
#layanan #layanan-list button:focus {
color: white;
background: #274675;
outline: none;
}
#layanan #layanan-list button span {
font-size: 30px;
line-height: 0px;
}
#layanan .layanan-card {
cursor: pointer;
border-radius: 10px;
padding: 35px 40px;
}
#layanan .layanan-card:hover {
box-shadow: 0 1.5px 15px rgba(0, 0, 0, 0.2);
}
#layanan .layanan-card img {
width: 120px;
}
#layanan .layanan-card h3 {
font-family: MDGROTESQUE;
font-weight: 600;
margin-bottom: 5px;
margin-top: 20px;
}
#layanan .layanan-card p {
margin: 0px;
}
#layanan .layanan-card.blue h3 {
color: #013499;
}
#layanan .layanan-card.blue a {
color: #346699;
}
#layanan .layanan-card.blue a:hover,
#layanan .layanan-card.blue a:active,
#layanan .layanan-card.blue a:focus {
color: #013499;
text-decoration: none;
}
#layanan .layanan-card.green h3 {
color: #016734;
}
#layanan .layanan-card.green a {
color: #339966;
}
#layanan .layanan-card.green a:hover,
#layanan .layanan-card.green a:active,
#layanan .layanan-card.green a:focus {
color: #016734;
text-decoration: none;
}
#layanan .layanan-card.yellow h3 {
color: #ff6600;
}
#layanan .layanan-card.yellow a {
color: #ff9933;
}
#layanan .layanan-card.yellow a:hover,
#layanan .layanan-card.yellow a:active,
#layanan .layanan-card.yellow a:focus {
color: #ff6600;
text-decoration: none;
}
#layanan .item {
padding: 15px;
}
@media (max-width: 960px) {
#layanan .head {
font-size: 26px;
margin-bottom: 0px;
padding-top: 15px;
}
#layanan #layanan-list .owl-nav {
top: -65px;
}
}
@media (max-width: 400px) {
#layanan .head {
font-size: 22px;
padding-top: 10px;
}
#layanan #layanan-list .owl-nav {
top: -55px;
}
}
@media (max-width: 1024px) {
#layanan .layanan-container {
padding: 0px;
}
}
#contact .left-bg {
display: flex;
flex-direction: row-reverse;
/* background: url(../images/base/contact-bg.png); */
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
#contact .right-bg {
background: #f5f9fb;
}
#contact .left-bg .info,
#contact .right-bg .info {
background: none;
padding: 60px 0px;
box-shadow: 0 0 black;
max-width: 600px;
}
#contact .right-bg .info {
padding-left: 70px;
}
#contact .head {
font-size: 32px;
font-family: MDGROTESQUE;
font-weight: 600;
margin-bottom: 0px;
}
#contact .head.blue {
color: #274675;
}
#contact .head.white {
color: #fff;
}
#contact .bar {
width: 110px;
border-top: 4px solid #20703b;
margin-top: 0px;
}
#contact .bar.white {
border-top: 4px solid #fff;
}
#contact p {
font-family: "Carmen Sans";
font-size: 14px;
}
#contact strong {
font-family: MDGROTESQUE;
color: #485e55;
}
#contact i {
color: #485e55;
}
#contact span {
font-weight: 700;
color: #485e55;
}
#contact .left-bg .info .note {
width: 270px;
}
@media (max-width: 1279px) {
#contact .left-bg .info,
#contact .right-bg .info {
max-width: 460px;
}
#contact .right-bg .info {
padding-left: 40px;
}
}
@media (max-width: 990px) {
#contact .left-bg .info,
#contact .right-bg .info {
max-width: 440px;
}
#contact .left-bg .info {
padding-right: 30px;
}
#contact .right-bg .info {
padding-left: 30px;
}
}
@media (max-width: 989px) {
#contact .left-bg .info,
#contact .right-bg .info {
max-width: 1200px;
padding: 15px;
}
}
#layanan-info {
padding-top: 60px;
padding-bottom: 60px;
}
@media (max-width: 960px) {
#layanan-info {
padding-top: 30px;
padding-bottom: 30px;
}
}
#layanan-info hr {
margin-top: 8px;
width: 60px;
float: right;
margin-right: 10px;
border-top: 4px solid #006633;
}
#layanan-info .note {
font-size: 16px;
font-family: "Carmen Sans";
font-weight: 600;
color: #006633;
margin-bottom: 0px;
}
#layanan-info .head {
font-family: MDGROTESQUE;
font-size: 32px;
color: #274675;
font-weight: 500;
margin-top: 0px;
}
.layanan-info {
display: table;
height: 100%;
}
.layanan-info .middle {
display: table-cell;
vertical-align: middle;
}
@media (max-width: 1200px) {
#layanan-info .head {
padding-left: 0;
font-size: 28px;
}
#layanan-info .head.p {
padding-left: 0;
font-size: 24px;
}
}
@media (min-width: 959px) {
#layanan-info {
padding-left: 40px;
}
}
.bg-mandala-container {
background: url(../images/base/mandala-opc.png);
background-repeat: no-repeat;
background-position: -500px 80px;
background-size: 80%;
padding-top: 25px;
padding-bottom: 60px;
}
@media (max-width: 1200px) {
.bg-mandala-container {
background-position: -250px 100px;
background-size: 80%;
}
}
@media (max-width: 960px) {
.bg-mandala-container {
background-position: -200px 100px;
background-size: 80%;
}
}
@media (max-width: 599px) {
.bg-mandala-container {
background-position: -200px 80px;
background-size: 120%;
padding-top: 10px;
padding-bottom: 30px;
}
}
.bg-dots-container {
background: url(../images/base/dots.png);
background-repeat: no-repeat;
background-position: 0px 80px;
background-size: 100%;
padding-top: 60px;
padding-bottom: 100px;
}
.bg-dots-container.struktur {
padding-bottom: 80px;
}
#visi-misi h3 {
font-family: "Carmen Sans";
font-weight: 600;
font-size: 28px;
color: #274675;
margin-bottom: 5px;
}
#visi-misi hr {
width: 140px;
border-top: 4px solid #006633;
margin: 0 auto;
}
#visi-misi .visi {
padding-left: 50px;
font-size: 14px;
font-family: "Carmen Sans";
}
#visi-misi ul {
padding-left: 50px;
font-size: 14px;
font-family: "Carmen Sans";
}
#visi-misi [class*="uk-list"] > ::before {
font-size: 28px;
vertical-align: middle;
line-height: 18px;
color: #274675;
}
#visi-misi .inverted[class*="uk-list"] > ::before {
color: #fff;
}
@media (max-width: 1200px) {
.bg-dots-container {
background-position: 40px 120px;
background-size: calc(100% - 90px);
}
}
@media (max-width: 960px) {
#visi-misi h3 {
font-size: 20px;
}
#visi-misi .visi,
#visi-misi ul {
padding-left: 40px;
}
}
@media (max-width: 959px) {
.bg-dots-container {
background-size: 0px;
}
}
@media (max-width: 350px) {
#visi-misi .visi {
padding-left: 0px;
}
#visi-misi ul {
padding-left: 0px;
}
#visi-misi h3 {
font-size: 18px;
}
}
#keterangan,
#keterangan ul {
padding-left: 0px !important;
}
#keterangan [class*="uk-list"] > ::before {
font-size: 28px;
vertical-align: middle;
line-height: 18px;
color: #274675;
}
#keterangan li a {
font-family: "Carmen Sans";
font-weight: 700;
color: #274675;
}
#keterangan li p {
font-family: "Carmen Sans";
font-size: 14px;
}
#ketidakberpihakan p,
#ketidakberpihakan li a,
#ketidakberpihakan li p {
font-family: "Carmen Sans";
font-size: 14px;
}
#visi-misi #ketidakberpihakan ul {
padding-left: 0px;
}
#visi-misi #ketidakberpihakan [class*="uk-list"] > ::before {
font-size: 14px;
line-height: 21px;
}
.bg-global #copyright,
.bg-global-1 #copyright {
background: transparent;
padding: 30px 15px;
}
#copyright {
background: #f3f3f3;
padding: 10px 15px;
}
#copyright {
color: #333;
}
#copyright p {
font-size: 12px;
font-family: "Carmen Sans";
}
#copyright p a {
color: #fff;
}
#copyright p a:hover,
#copyright p a:active,
#copyright p a:focus {
color: #6e84ab;
text-decoration: none;
}
.bg-layanan-container {
background: url(../images/base/bg-layanan.png);
background-size: 100% auto;
background-repeat: no-repeat;
background-position-y: bottom;
padding-bottom: 100px;
background-size: 180% 40%;
background-position-x: center;
}
@media (max-width: 2000px) {
.bg-layanan-container {
padding-bottom: 100px;
background-size: 200% 40%;
}
}
@media (max-width: 1440px) {
.bg-layanan-container {
padding-bottom: 100px;
background-size: 220% 40%;
}
}
@media (max-width: 1025px) {
.bg-layanan-container {
padding-bottom: 60px;
background-size: 200% 30%;
}
}
@media (max-width: 640px) {
.bg-layanan-container {
padding-bottom: 45px;
background-size: 260% 20%;
}
}
.overlay-slider {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
.overlay-slider p {
color: #000;
}
.box-slider {
width: 40%;
background: rgb(255 255 255 / 83%);
padding: 30px;
}
.pad-slider {
padding-bottom: 30px;
}
@media (max-width: 640px) {
.pad-slider {
padding-bottom: 0px;
}
.box-slider {
display: none;
}
}
@media (max-width: 960px) {
.box-slider {
width: calc(100% - 60px);
}
}
.navy-btn {
padding: 8px 13px;
border: 1px solid #274675;
border-radius: 5px;
background: #274675;
font-size: 10px;
}
.navy-btn svg {
border: 1px solid #274675;
border-radius: 5px;
background: #274675;
font-size: 10px;
}
.tabs-title a {
text-transform: capitalize;
font-weight: 500;
color: #274675;
font-size: 14px;
border-bottom: 4px solid transparent;
}
.uk-tab .tabs-title.uk-active a {
color: #274675;
border-color: #274675;
}
@media (min-width: 1024px) {
.tabs-title a {
min-width: 150px;
}
}
@media (max-width: 1024px) {
.pt-35 {
padding-top: 0px;
}
}
@media (max-width: 960px) {
.description {
text-align: justify;
}
.tabs-title {
width: calc(50% - 30px);
}
.uk-tab .tabs-title a {
margin-left: 15px;
}
}
.uk-container-small-x {
max-width: 1000px;
}
.layanan-footer a {
color: #fff;
}
.layanan-footer a:hover,
.layanan-footer a:active,
.layanan-footer a:focus {
color: #6e84ab;
}
.social-icon {
display: inline-flex;
}
.social-icon .box {
height: 35px;
width: 35px;
background: #6a7ea2;
border-radius: 6px;
margin-right: 10px;
}
.social-icon .box:hover,
.social-icon .box:focus,
.social-icon .box:active {
background: #34517d;
}
.social-icon .box span {
color: #fff;
padding: 5px;
}
@media (min-width: 959px) {
.pad-right-footer-center {
padding-right: 30px;
}
}
@media (min-width: 1200px) {
.pad-right-footer-center {
padding-right: 40px;
}
}
.section30 {
max-width: 399.69px;
background: #ff000045;
}
.section70 {
max-width: 979.99px;
background: #61ff6159;
}
@media (max-width: 1279px) {
.section30 {
max-width: 100%;
}
.section70 {
max-width: 100%;
}
}
@media (max-width: 989px) {
.section30,
.section70 {
max-width: 1200px;
padding: 15px;
}
}
#quick-contact .left-bg {
/* background: url(../images/base/quick-contact-bg.jpg); */
background-size: cover;
background-repeat: no-repeat;
background-position: 40% 100%;
flex-direction: row-reverse;
background: url(assets/images/base/bg-banner.png);
height: 560px;
background-size: auto 100%;
background-repeat: no-repeat;
background-position: right top;
}
#quick-contact .right-bg {
background: url(../images/base/gear-bg.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: 20% 100%;
}
#quick-contact .logo-icon {
position: absolute;
bottom: 25px;
width: 50px;
}
#quick-contact .left-bg .uk-card,
#quick-contact .right-bg .uk-card,
#about-us .left-bg .uk-card,
#about-us .right-bg .uk-card,
#visi .left-bg .uk-card,
#visi .right-bg .uk-card {
box-shadow: none;
}
#quick-contact .gradient-bar {
position: absolute;
height: 15px;
width: 100%;
background: linear-gradient(
52deg,
rgba(48, 99, 63, 1) 0%,
rgba(42, 69, 91, 1) 100%
);
}
#quick-contact .title {
font-family: MDGROTESQUE;
font-weight: 500;
font-size: 28px;
color: #ffffff;
margin-bottom: 35px;
}
#quick-contact .btn-adjs {
padding: 0 5px;
min-width: 120px;
}
#quick-contact .container-info {
max-width: 320px;
margin: 0 auto;
margin-top: 100px;
margin-bottom: 100px;
}
.overlaping-container {
padding: 0px;
max-width: calc((100% - ((100vw - 1200px) / 2)) + 48px);
background: transparent;
}
@media (max-width: 1441px) {
.overlaping-container.max {
max-width: 100%;
}
}
.overlaping-container.left {
padding-left: 40px;
padding-right: 30px;
}
.overlaping-container.right {
padding-left: 30px;
padding-right: 40px;
}
@media (max-width: 960px) {
.overlaping-container.left,
.overlaping-container.right {
padding-left: 30px;
padding-right: 30px;
}
}
@media (max-width: 640px) {
.overlaping-container.left,
.overlaping-container.right {
padding-left: 15px;
padding-right: 15px;
}
}
@media (min-width: 360px) {
#quick-contact .btn-adjs {
padding: 0 25px;
min-width: 150px;
}
}
@media (min-width: 960px) {
#quick-contact .title {
font-size: 24px;
}
#quick-contact .btn-adjs {
padding: 0px;
min-width: 120px;
}
#quick-contact .left-bg {
background-position: 40% 100%;
}
#quick-contact .right-bg {
background-position: 20% 100%;
}
}
@media (min-width: 1024px) {
#quick-contact .btn-adjs {
padding: 0 15px;
min-width: 130px;
}
}
@media (min-width: 1200px) {
#quick-contact .title {
font-size: 28px;
}
#quick-contact .btn-adjs {
padding: 0 25px;
min-width: 140px;
}
#quick-contact .left-bg {
background-position: 100% 100%;
}
#quick-contact .right-bg {
background-position: 0 100%;
}
}
@media (min-width: 1800px) {
#quick-contact .left-bg {
background-position: 100% 80%;
}
#quick-contact .right-bg {
width: 45%;
}
#about-us .left-bg {
width: 45%;
}
}
.m-h-350 {
min-height: 350px;
}
.m-h-250 {
min-height: 250px;
}
.flo-r {
float: right;
}
.flo-l {
float: left;
}
#layanan .left-bg {
background-size: cover !important;
background-repeat: no-repeat !important;
background-position: 40% 100% !important;
flex-direction: row-reverse;
}
#layanan .left-bg.iso9001 {
background: url(../images/banner/slide1.jpg);
}
#layanan .left-bg.iso14001 {
background: url(../images/banner/slide2.jpg);
}
#layanan .left-bg.iso45001 {
background: url(../images/banner/slide3.jpg);
}
#layanan .left-bg.ohsas18001 {
background: url(../images/banner/slide4.jpg);
}
#layanan .left-bg.iso22000 {
background: url(../images/banner/slide5.jpg);
}
#layanan .left-bg.iso55001 {
background: url(../images/banner/slide6.jpg);
}
#layanan .left-bg.iso27001 {
background: url(../images/banner/slide7.jpg);
}
#layanan .left-bg.iso37001 {
background: url(../images/banner/slide8.jpg);
}
#layanan .left-bg.iso13485 {
background: url(../images/banner/slide9.jpg);
}
#layanan .left-bg.iso16949 {
background: url(../images/banner/slide10.jpg);
}
#layanan .right-bg {
background: #fff;
}
#layanan .logo-icon {
position: absolute;
bottom: 25px;
}
#layanan .left-bg .uk-card,
#layanan .right-bg .uk-card {
box-shadow: none;
}
#layanan [class*="uk-list"] > ::before {
font-size: 28px;
vertical-align: middle;
line-height: 18px;
color: #274675;
}
#layanan ul {
font-size: 14px;
font-family: "Carmen Sans";
}
#layanan ul li strong {
color: #274675;
}
#slideshow-ksm .uk-slideshow-items {
min-height: 650px !important;
max-height: 700px !important;
}
@media (max-width: 1390px) {
#slideshow-ksm .uk-slideshow-items {
min-height: 550px !important;
max-height: 600px !important;
}
}
@media (max-width: 640px) {
#slideshow-ksm .uk-slideshow-items {
min-height: 400px !important;
max-height: 600px !important;
}
}
#slideshow-ksm {
color: #fff;
}
#slideshow-ksm .uk-slideshow-items .uppercase-title {
font-size: 22px;
font-family: MDGROTESQUE;
font-weight: 300;
margin-bottom: 0px;
text-transform: uppercase;
width: 100%;
}
#slideshow-ksm .uk-slideshow-items .capitalize-desc {
font-family: "Carmen Sans";
text-transform: capitalize;
font-weight: 300;
font-size: 14px;
margin: 0px;
}
#slideshow-ksm .uk-slideshow-items .italic-head {
font-size: 64px;
font-family: MDGROTESQUE;
font-weight: 400;
font-style: italic;
margin: 10px 0 0 0;
}
@media (max-width: 960px) {
#slideshow-ksm .uk-slideshow-items .uppercase-title {
font-size: 18px;
}
#slideshow-ksm .uk-slideshow-items .capitalize-desc {
font-size: 12px;
}
#slideshow-ksm .uk-slideshow-items .italic-head {
font-size: 48px;
}
}
@media (max-width: 599px) {
#slideshow-ksm .uk-slideshow-items .uppercase-title {
font-size: 17px;
}
#slideshow-ksm .uk-slideshow-items .italic-head {
font-size: 32px;
}
}
.btn-ksm-slider {
font-family: "Carmen Sans";
text-transform: capitalize;
background-color: #274675 !important;
border-radius: 4px;
font-weight: 300;
font-size: 14px;
color: #fff !important;
}
.btn-ksm-slider.off-border {
border-color: transparent;
}
.btn-ksm-slider:hover,
.btn-ksm-slider:focus {
background-color: #3c6096 !important;
}
.btn-ksm-slider:disabled {
background-color: #3c6096 !important;
}
#slideshow-ksm .uk-slideshow-items .desc-layanan {
max-width: 450px;
font-family: "" Carmen Sans "";
text-transform: capitalize;
font-weight: 300;
font-size: 14px;
margin: 20px auto;
}
#slideshow-ksm .uk-slideshow-items .code-layanan {
font-size: 52px;
font-family: MDGROTESQUE;
font-weight: 400;
font-style: normal;
line-height: 50px;
margin: 0;
}
#slideshow-ksm .uk-slideshow-items .name-layanan {
font-family: "MDGROTESQUE";
text-transform: capitalize;
font-weight: 300;
font-size: 22px;
margin: 0;
}
#slideshow-ksm .uk-slideshow-items .overlay-black {
background: rgba(0, 0, 0, 0.4);
width: 100%;
height: 100%;
}
.z-ind-1 {
z-index: 1;
}
@media (max-width: 960px) {
#slideshow-ksm .uk-slideshow-items .desc-layanan {
font-size: 12px;
}
#slideshow-ksm .uk-slideshow-items .code-layanan {
font-size: 38px;
line-height: 50px;
}
#slideshow-ksm .uk-slideshow-items .name-layanan {
font-size: 18px;
}
}
@media (max-width: 599px) {
#slideshow-ksm .uk-slideshow-items .desc-layanan {
max-width: 350px;
font-size: 11px;
padding: 0 15px;
}
#slideshow-ksm .uk-slideshow-items .code-layanan {
font-size: 26px;
line-height: 40px;
}
#slideshow-ksm .uk-slideshow-items .name-layanan {
font-size: 12px;
}
.btn-ksm-slider {
font-size: 12px;
}
}
#about-us {
padding: 60px 0px;
}
#about-us .left-bg {
flex-direction: row-reverse;
}
#about-us .left-bg .blue {
background: #284776;
}
#about-us .padding-content {
padding: 60px 30px;
}
#about-us .right-bg.about-bg {
background: url(../images/base/about-bg.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 0%;
}
#about-us .right-bg.about-bg.second {
background: url(../images/base/about-bg-1.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 0%;
}
#about-us .overlaping-container.left {
padding-right: 7.5px;
}
#about-us .overlaping-container.right {
padding-left: 7.5px;
}
#about-us .margin-responsive {
margin: 20px 0px;
}
#about-us .name {
font-family: MDGROTESQUE;
font-weight: 600;
font-size: 40px;
color: #274675;
text-transform: uppercase;
line-height: 50px;
margin-top: 5px;
padding-left: 8px;
}
#about-us .head {
font-size: 16px;
color: #006633;
margin: 0px;
padding-left: 10px;
}
#about-us .logo-icon {
position: absolute;
right: 30px;
bottom: 30px;
width: 50px;
}
@media (max-width: 960px) {
#about-us .overlaping-container.left,
#about-us .overlaping-container.right {
padding-left: 30px;
padding-right: 30px;
}
#about-us .padding-content {
padding: 30px 0px;
}
#about-us {
padding: 30px 0px;
}
#about-us .overlaping-container.left.blues {
background: #284776;
}
#about-us .margin-responsive {
margin: 30px 0px;
}
#about-us .name {
padding-left: 0px;
font-size: 34px;
line-height: 40px;
}
#about-us .head {
padding-left: 0px;
}
}
@media (max-width: 640px) {
#about-us .overlaping-container.left,
#about-us .overlaping-container.right {
padding-left: 15px;
padding-right: 15px;
}
#about-us .padding-content {
padding: 15px 0px;
}
#about-us .margin-responsive {
margin: 15px 0px;
}
#about-us .name {
font-size: 22px;
line-height: 20px;
}
#about-us .head {
font-size: 12px;
}
}
@media (min-width: 1920px) {
#about-us .right-bg.about-bg,
#about-us .right-bg.about-bg.second {
background-position: 0% 20%;
}
}
#visi .left-bg {
background: url(../images/base/visi-misi-bg.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 0%;
flex-direction: row-reverse;
}
#visi .left-bg.second {
background: url(../images/base/visi-misi-bg-1.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 0%;
}
@media (min-width: 1920px) {
#visi .left-bg,
#visi .left-bg.second {
background-position: 0% 50%;
}
}
.global-title {
font-family: "" Carmen Sans "";
font-weight: 600;
font-size: 25px;
color: #274675;
text-transform: capitalize;
}
#visi .visi-misi-title {
margin: 0;
padding: 60px;
}
#visi .visi-left {
padding: 40px 30px 40px 0;
}
#visi .visi-right {
padding: 40px 0 40px 30px;
background: transparent;
}
#visi .visi-misi-desc {
font-family: "" Carmen Sans "";
font-weight: 300;
font-size: 22px;
color: #000;
text-transform: capitalize;
}
#visi .visi-misi-desc.inverted {
color: #fff;
}
#visi .uk-list.inverted {
font-size: 14px;
font-family: "Carmen Sans";
font-weight: 300;
color: #fff;
padding-left: 0px;
}
#visi #bg-blue-misi,
#visi #bg-blue-misi-1 {
position: absolute;
width: 50vw;
background: #284776;
bottom: 0px;
z-index: -1;
}
.o-h {
overflow: hidden;
}
@media (max-width: 950px) {
#visi #bg-blue-misi,
#visi #bg-blue-misi-1 {
width: 100vw;
}
#visi #bg-blue-misi,
#visi #bg-blue-misi-1 {
left: 0;
}
#visi .visi-left,
#visi .visi-right {
padding: 30px 0;
}
}
@media (max-width: 640px) {
#visi .visi-left,
#visi .visi-right {
padding: 20px 0;
}
}
#kami .title-container {
background: #294877;
padding-right: 40px;
}
#kami .content-container {
background: #f5f5f5;
box-shadow: none;
padding: 40px 10px;
}
#kami .content-container img {
width: 80px;
}
#kami .title {
font-family: "" Carmen Sans "";
font-weight: 600;
font-size: 32px;
color: #fff;
text-transform: capitalize;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.kenapa-kami-dasar {
background: #f5f5f5;
}
@media (max-width: 960px) {
#kami .title-container {
margin-top: 5px;
}
#kami .content-container {
padding: 40px 30px;
}
#kami .description {
text-align: center;
}
}
@media (max-width: 640px) {
#kami .content-container {
padding: 30px 15px;
}
#kami .title {
font-size: 22px;
}
}
@media (min-width: 1441px) {
#kami {
max-width: 1280px;
margin: 0 auto;
}
}
#layanan {
background: #fdfdfd;
padding-bottom: 60px;
}
#layanan .global-title {
margin: 0;
padding: 60px;
text-align: center;
}
#layanan .grid-layanan .translated {
transition: 0.2s;
}
#layanan .grid-layanan .translated:hover,
#layanan .grid-layanan .translated:active,
#layanan .grid-layanan .translated:focus {
-webkit-transform: translateY(-0.5rem);
transform: translateY(-0.5rem);
}
#layanan .grid-layanan .translated:hover .card-layanan,
#layanan .grid-layanan .translated:active .card-layanan,
#layanan .grid-layanan .translated:focus .card-layanan {
box-shadow: 0 0 3.5rem 0 rgb(0 0 0 / 20%);
}
#layanan .card-layanan {
background-color: #fff;
border-radius: 1rem;
box-shadow: 0 0 1.5rem rgb(0 0 0 / 10%);
margin-bottom: 2rem;
overflow: hidden;
}
#layanan .card-layanan .image-height {
height: 200px;
}
#layanan .card-layanan .code-layanan {
font-family: "MDGROTESQUE";
font-weight: 600;
font-size: 18px;
color: #274675;
text-transform: capitalize;
margin: 0px;
}
#layanan a:hover,
#layanan a:focus,
#layanan a:active {
color: transparent;
text-decoration: none;
}
#layanan .card-layanan .desc-layanan {
font-family: "" Carmen Sans "";
font-weight: 300;
font-size: 14px;
color: #333;
text-transform: capitalize;
margin: 0px;
margin: 0 0 5px 0;
}
#layanan .card-layanan .logo-container-layanan {
background: #f5f5f5;
}
#layanan .card-layanan .icon-layanan {
max-width: 180px;
}
#layanan .card-layanan .text-container {
min-height: 73.5px;
}
@media (max-width: 960px) {
#layanan .card-layanan .image-height {
height: 200px;
}
#layanan {
padding-bottom: 30px;
}
}
@media (max-width: 640px) {
#layanan .card-layanan .image-height {
height: 300px;
}
#layanan {
padding-bottom: 0px;
}
}
#absah-sertif .left-bg {
background: url(../images/base/keabsahan-sertifikasi-bg.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
flex-direction: row-reverse;
}
#absah-sertif {
overflow: hidden;
}
#absah-sertif .overlaping-container.right {
box-shadow: none;
padding-top: 60px;
padding-bottom: 60px;
}
#absah-sertif .bg-blue {
width: 100vw;
background: #284776;
position: absolute;
bottom: 60px;
left: 0;
z-index: -1;
}
#absah-sertif ul {
font-size: 14px;
font-family: "Carmen Sans";
font-weight: 300;
}
#absah-sertif .uk-list > * > ul,
#absah-sertif .uk-list > :nth-child(n + 2) {
margin-top: 5px;
}
#absah-sertif [class*="uk-list"] > ::before {
font-size: 28px;
vertical-align: middle;
line-height: 18px;
color: #274675;
}
#absah-sertif .global-title {
margin-bottom: 50px;
}
#absah-sertif #note {
padding: 5px 0;
}
#absah-sertif #note p {
margin-bottom: 0px !important;
}
#absah-sertif .absah-content {
margin-bottom: 30px;
}
#absah-sertif .absah-content li strong {
font-weight: bold !important;
}
@media (max-width: 640px) {
#absah-sertif .global-title {
margin-bottom: 15px;
}
#absah-sertif .overlaping-container.right {
padding-top: 30px;
padding-bottom: 30px;
}
#absah-sertif .bg-blue {
bottom: 30px;
}
#absah-sertif .absah-content {
margin-bottom: 15px;
}
}
.module {
overflow: hidden;
-webkit-overflow: hidden;
}
.module p {
margin: 0;
}
.line-clamp {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
width: 100%;
}
#berita {
background: #fdfdfd;
}
#berita .global-title {
margin: 0;
padding: 60px;
text-align: center;
}
#berita .grid-berita .translated {
transition: 0.2s;
}
#berita .grid-berita .translated:hover,
#berita .grid-berita .translated:active,
#berita .grid-berita .translated:focus {
-webkit-transform: translateY(-0.5rem);
transform: translateY(-0.5rem);
}
#berita .card-berita {
background-color: transparent;
box-shadow: none;
margin-bottom: 2rem;
overflow: hidden;
}
#berita .card-berita .image-height {
height: 220px;
}
#berita .card-berita .code-berita {
font-family: "MDGROTESQUE";
font-weight: 600;
font-size: 16px;
color: #082c64;
text-transform: capitalize;
margin: 0px;
padding: 10px 0px;
}
#berita a:hover,
#berita a:focus,
#berita a:active {
color: transparent;
text-decoration: none;
}
#berita .uk-pagination a:hover,
#berita .uk-pagination a:focus,
#berita .uk-pagination a:active {
color: #666;
text-decoration: none;
}
#berita .card-berita .desc-berita {
font-family: "" Carmen Sans "";
font-weight: 300;
font-size: 14px;
color: #444;
text-transform: capitalize;
margin: 0;
}
#berita .card-berita .text-container {
min-height: 73.5px;
padding: 0px;
}
.berita-info {
width: 100%;
}
.berita-info .left,
.berita-info .right {
width: 50%;
font-size: 14px;
color: #bbb;
}
.berita-info .right {
text-align: right;
}
.berita-info .left {
text-align: left;
}
#berita .berita-info a {
color: #bbb;
}
.berita-info a:hover,
.berita-info a:focus,
.berita-info a:active {
color: #3c6096;
}
@media (max-width: 960px) {
#berita .card-berita .image-height {
height: 200px;
}
}
@media (max-width: 640px) {
#berita .card-berita .image-height {
height: 300px;
}
}
.berita .hes {
width: 100%;
text-align: left;
border-bottom: 1px solid #274675;
line-height: 6px;
margin: 20px 0px;
font-weight: 600;
font-size: 16px;
color: #274675;
text-transform: capitalize;
}
.berita .hes span {
background: #fff;
padding-right: 10px;
}
.berita .search {
width: 100%;
}
.berita .btn-search {
padding: 0px 10px;
border-radius: 0px;
}
.transparent {
background: transparent !important;
}
.berita .code-berita-left {
font-family: "MDGROTESQUE";
font-weight: 600;
font-size: 14px;
color: #082c64;
text-transform: capitalize;
margin: 0px;
padding: 5px 0px 0px 0px;
text-align: left;
}
.berita .berita-text-left {
padding: 5px 10px 10px 10px;
}
.a-clean:hover,
.a-clean:focus,
.a-clean:active {
color: inherit;
text-decoration: none;
}
.berita .berita-left {
transition: 0.2s;
margin-bottom: 10px;
}
.berita .berita-left:hover,
.berita .berita-left:active,
.berita .berita-left:focus {
-webkit-transform: translateY(-0.5rem);
transform: translateY(-0.5rem);
}
.berita .img-berita-left {
height: 100%;
min-height: 100px;
}
.title-article {
font-family: "MDGROTESQUE";
font-weight: 600;
font-size: 32px;
color: #082c64;
text-transform: capitalize;
margin: 0px;
padding: 5px 0px 0px 0px;
text-align: left;
}
.share-to {
margin: 0px;
padding: 5px 20px 5px 5px;
}
#klien-kami .number-count {
font-family: "" Carmen Sans "";
font-weight: 600;
font-size: 75px;
color: #274675;
text-transform: capitalize;
margin: 0;
}
#klien-kami .desc {
margin: 0px;
font-size: 14px;
color: #333;
font-family: "" Carmen Sans "";
}
#klien-kami .container-counter {
padding: 60px 0px;
}
@media (max-width: 950px) {
#klien-kami .container-counter {
padding: 30px 0px;
}
}
.sertif-card {
padding: 0px;
background-color: #fff;
border-radius: 1rem;
box-shadow: 0 0 1.5rem rgb(0 0 0 / 10%);
margin-bottom: 2rem;
overflow: hidden;
}
.sertif-card:hover,
.sertif-card:focus,
.sertif-card:active {
-webkit-transform: translateY(-0.5rem);
transform: translateY(-0.5rem);
transition: 0.2s;
}
.bg-map {
background: url(../images/base/map.png);
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: 100% auto;
}
#wa_link {
position: fixed;
bottom: 15px;
right: 15px;
}
#wa_link img {
width: 60px;
}
.tags-container {
margin-top: 20px;
}
.tags-container .uk-label.tag-title,
.tags-container .uk-label:hover.tag-title,
.tags-container .uk-label:focus.tag-title,
.tags-container .uk-label:active.tag-title {
background: transparent;
color: #000;
padding: 2px 24px;
font-size: 16px;
font-weight: 700;
}
.tags-container .uk-label {
padding: 4px 16px;
text-transform: capitalize;
background: #355688;
margin-right: 5px;
margin-bottom: 10px;
}
.tags-container .uk-label:hover,
.tags-container .uk-label:focus,
.tags-container .uk-label:active {
padding: 4px 16px;
text-transform: capitalize;
background: #284776;
margin-right: 5px;
margin-bottom: 10px;
}
.not-found {
height: calc(100vh - 80px);
display: flex;
align-items: center;
justify-content: center;
padding-left: 30px;
padding-right: 30px;
}
.not-found img {
max-width: 400px;
}
@media (max-width: 960px) {
.not-found img {
max-width: 300px;
}
}
.title-nav {
font-family: MDGROTESQUE;
color: #475d54;
font-weight: 600;
font-size: 20px;
margin: 0;
}
.title-nav.white {
color: #fff;
}
.uk-sticky-fixed .title-nav.white {
color: #475d54;
}
.uk-light .uk-navbar-toggle.hambuger-nav {
color: #999;
}
.uk-navbar-toggle:hover.hambuger-nav,
.uk-navbar-toggle:focus.hambuger-nav,
.uk-navbar-toggle.uk-open.hambuger-nav {
color: #475d54;
}
.uk-navbar-container:not(.uk-navbar-transparent) {
background: #ffffff;
}
#nav.uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-nav li a {
color: #aaa9ab;
font-weight: 500;
}
#nav.uk-navbar-container:not(.uk-navbar-transparent)
.uk-navbar-nav
li.uk-active
a {
color: #475d54;
font-weight: 600;
}
#nav.white.uk-navbar-container:not(.uk-navbar-transparent) .title-nav {
color: #475d54;
}
.uk-offcanvas-bar hr.divider {
margin-top: 10px;
margin-bottom: 10px;
border-top-color: #475d54;
}
.content {
margin-top: -80px;
}
.content.default {
margin-top: 0;
}
.banner-height {
padding-top: 400px;
}
#banner {
z-index: 8;
position: relative;
}
#banner .left-bg {
flex-direction: row-reverse;
}
#banner .overlaping-container,
.pad-anatomi {
padding-top: 60px;
padding-bottom: 60px;
}
.item-flex-right-bottom {
display: flex;
justify-content: flex-end;
align-items: end;
}
.banner-title {
font-family: MDGROTESQUE;
color: #475d54;
font-weight: 600;
font-size: 36px;
margin: 0;
text-transform: capitalize;
}
.banner-title.gray {
color: #aaa9ab;
font-size: 36px;
}
.btn-white {
font-family: "Carmen Sans";
font-weight: 200;
text-transform: capitalize;
padding-bottom: 3px;
background-color: white;
border-radius: 5px;
color: #364740;
}
.btn-white:hover,
.btn-white:focus,
.btn-white:active {
background-color: #364740;
}
.btn-green {
font-family: "Carmen Sans";
font-weight: 200;
text-transform: capitalize;
padding-bottom: 3px;
background-color: #475d54;
border-radius: 5px;
}
.btn-green.register-w100 {
width: 100%;
margin-top: 15px;
height: 60px;
}
.btn-green.flex-btn {
height: fit-content;
}
.btn-green:hover,
.btn-green:focus,
.btn-green:active {
background-color: #364740;
}
.btn-green:disabled {
background-color: #7e8c87;
color: #fff;
}
.btn-green-light {
font-family: "Carmen Sans";
font-weight: 600;
text-transform: capitalize;
padding-bottom: 3px;
background-color: #a9d8c6;
border-radius: 5px;
color: #485e55;
}
.btn-green-light:hover,
.btn-green-light:focus,
.btn-green:active {
background-color: #364740;
}
.btn-green-light:disabled {
background-color: #7e8c87;
color: #fff;
}
.desc-banner {
font-family: "Carmen Sans";
font-weight: 400;
font-size: 14px;
padding-bottom: 5px;
}
.h-100 {
height: 100%;
}
@media (max-width: 1080px) {
.banner-title {
font-size: 28px;
}
}
@media (max-width: 959px) {
#banner .left-bg {
flex-direction: row-reverse;
}
.item-flex-right-bottom {
justify-content: center;
}
}
@media (max-width: 701px) {
#banner .left-bg {
flex-direction: row-reverse;
}
}
@media (max-width: 480px) {
.banner-title {
font-size: 20px;
}
.banner-height {
padding-top: 300px;
}
.btn-green.bigger {
height: 80px;
font-size: 20px;
font-weight: 700;
}
}
.bg-banner {
/*background: url(../images/base/bg-banner-canvas.png); */
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
#community .left-bg {
flex-direction: row-reverse;
background: #475d54;
}
.community-title {
font-family: MDGROTESQUE;
color: #ffffff;
font-weight: 300;
font-size: 24px;
margin: 0;
text-transform: capitalize;
}
.community-title.green {
font-weight: 400;
color: #485e55;
margin-top: 15px;
}
.community-title span {
font-weight: 400;
}
.community-title.small {
font-size: 18px;
}
.community-title.small span {
font-weight: 400;
}
.community-title.big {
font-size: 28px;
}
.community-title.big span {
font-weight: 400;
}
.community-title.big.coklat {
color: #475d54;
}
.community-desc {
font-family: "Carmen Sans";
font-weight: 400;
font-size: 14px;
}
.community-box {
border-left: 5px solid #fff;
padding-left: 10px;
padding-top: 12px;
padding-bottom: 0;
}
.community-bg {
background: url(../images/base/bg-community.png);
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
#community .overlaping-container.left,
#community .overlaping-container.right .uk-grid .community-bg,
#community .overlaping-container.right .uk-grid .community-desc {
padding-top: 60px;
padding-bottom: 60px;
}
.community-box-small {
padding: 20px 40px;
background: #475d54;
right: 50px;
position: relative;
max-width: 200px;
/* text-align: center; */
border-radius: 10px;
}
.community-small-desc {
font-family: "Carmen Sans";
font-weight: 200;
font-size: 14px;
color: #666;
}
.pad-l-30 {
padding-left: 30px;
}
@media (min-width: 961px) {
#community .overlaping-container.right {
padding-left: 0px;
}
}
@media (max-width: 960px) {
#community .overlaping-container.right {
padding: 0;
}
.pad-l-30 {
padding-left: 30px;
padding-right: 30px;
}
#community .overlaping-container.right .uk-grid .community-desc {
padding-top: 30px;
}
.bg-banner {
/*background: url(../images/base/bg-banner-canvas-mob.png); */
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
}
@media (max-width: 640px) {
.pad-l-30 {
padding-left: 15px;
padding-right: 15px;
}
}
.anatomi-img-box {
max-width: 800px;
margin: 0 auto;
padding: 30px 15px;
}
#modal-community .uk-modal-dialog {
border-radius: 10px;
padding: 0;
}
#modal-community .form-box,
#modal-community .logo-box {
padding: 30px;
}
#modal-community .logo-box {
background: #475d54;
border-radius: 0 10px 10px 0;
}
.flex-center {
display: flex;
justify-content: space-between;
}
.flex-center-justify {
display: flex;
justify-content: space-between;
align-items: center;
}
.flex-center-all {
display: flex;
justify-content: center;
align-items: center;
}
.form-join label,
.form-filter label {
font-family: MDGROTESQUE;
color: #475d54;
font-weight: 500;
font-size: 14px;
}
.form-join input,
.form-join textarea,
.form-join select,
.form-filter input,
.form-filter textarea,
.form-filter select {
font-family: MDGROTESQUE;
border-radius: 5px;
font-weight: 400;
border-color: #475d54;
font-size: 14px;
}
.form-join input:focus,
.form-join textarea:focus,
.form-join input:focus-visible,
.form-join textarea:focus-visible,
.form-filter input:focus,
.form-filter textarea:focus,
.form-filter input:focus-visible,
.form-filter textarea:focus-visible {
border-color: #364740;
}
.form-join.sm label,
.form-filter.sm label {
font-size: 12px;
}
.form-join.sm input,
.form-join.sm textarea,
.form-join.sm select,
.form-filter.sm input,
.form-filter.sm textarea,
.form-filter.sm select {
font-size: 12px;
}
.form-join.sm input,
.form-join.sm select,
.form-filter.sm input,
.form-filter.sm select {
height: 35px;
}
.bg-coklat {
background: url(../images/base/bg-coklat.png);
background-size: auto 400px;
background-repeat: no-repeat;
background-position: right top;
}
.img-content {
margin-top: 120px;
border-radius: 10px;
}
.history-title.black {
color: #333;
}
.history-title {
font-family: MDGROTESQUE;
color: #475d54;
font-size: 14px;
margin: 0;
text-transform: capitalize;
}
.history-title.mb-15 {
margin-bottom: 15px;
}
.history-title.fw-600 {
font-weight: 600;
text-transform: uppercase;
}
.history-title.medium {
font-weight: 500;
font-size: 16px;
}
.history-title.big {
font-weight: 600;
font-size: 18px;
}
.left-tab {
padding-left: 20px;
}
.list-history {
margin: 10px 0;
}
.list-history.mb-15 {
margin-bottom: 15px;
}
.list-history li {
font-family: MDGROTESQUE;
color: #333;
font-size: 14px;
margin: 0;
text-transform: capitalize;
}
.uk-list.list-history > :nth-child(n + 2),
.uk-list.list-history > * > ul {
margin-top: 0px;
}
.list-community {
margin: 10px 0;
}
.list-community.mb-15 {
margin-bottom: 15px;
}
.list-community li {
font-family: "Carmen Sans";
color: #333;
font-size: 14px;
margin: 0;
font-weight: 400;
text-transform: capitalize;
}
.uk-list.list-community > :nth-child(n + 2),
.uk-list.list-community > * > ul {
margin-top: 0px;
}
@media (max-width: 960px) {
.img-content {
/* padding-top: 80px; */
}
}
@media (max-width: 480px) {
.bg-coklat {
background: url(../images/base/bg-coklat.png);
background-size: auto 260px;
background-repeat: no-repeat;
background-position: right top;
}
}
.back-nav span {
color: #475d54;
}
.bg-global {
background: url(../images/base/bg-global.jpg);
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}
.bg-global-1 {
background: url(../images/base/bg-global-1.jpg);
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}
.card-rounded {
max-width: 460px;
margin: 0 auto;
box-shadow: 0 5px 12px rgb(0 0 0 / 15%);
border-radius: 10px;
padding: 30px;
width: 100%;
}
.card-rounded.max-w-900 {
max-width: 900px;
}
.card-rounded .title {
font-family: MDGROTESQUE;
color: #475d54;
font-weight: 600;
font-size: 17px;
margin: 0;
}
.card-rounded .title span {
font-weight: 400;
}
.card-rounded .desc {
font-family: "Carmen Sans";
font-weight: 400;
font-size: 14px;
margin: 0 auto;
max-width: 300px;
}
.card-rounded .info-bottom {
font-family: "Carmen Sans";
font-weight: 400;
font-size: 13px;
margin-top: 20px;
margin-bottom: 0px;
text-align: center;
}
.card-rounded .info-bottom.sm.it {
font-style: italic;
font-size: 11px;
margin-top: 0px;
text-align: left;
}
.card-rounded .info-bottom a {
color: #475d54;
}
.card-rounded .info-bottom a:hover,
.card-rounded .info-bottom a:focus,
.card-rounded .info-bottom a:active {
color: #364740;
}
.auth-center-container {
min-height: calc(100vh - 188px);
display: flex;
justify-content: center;
align-items: center;
}
.card-rounded .link-statis {
color: #475d54;
font-family: "Carmen Sans";
font-weight: 400;
font-size: 13px;
text-align: center;
}
.card-rounded .link-statis.md {
font-weight: 700;
font-size: 14px;
}
form .text-red,
form .text-red.hide.error {
color: #e50037;
margin-top: 5px;
margin-bottom: 0px;
font-size: 14px;
}
form .text-red.hide {
margin-top: 0px;
font-size: 0px;
}
.notify-box .title {
font-family: MDGROTESQUE;
color: #475d54;
font-weight: 600;
font-size: 30px;
margin-bottom: 0;
}
.notify-box .desc {
font-family: "Carmen Sans";
font-weight: 400;
font-size: 16px;
margin: 0 auto;
max-width: 550px;
}
.notify-box .notify-img {
max-width: 320px;
}
.notify-box .notify-img.circle {
background-color: #fff;
border-radius: 50%;
}
@media (max-width: 960px) {
.notify-box .title {
font-size: 28px;
}
.notify-box .notify-img {
max-width: 300px;
}
}
@media (max-width: 640px) {
.notify-box .title {
font-size: 26px;
}
}
.phils-404 span {
background-color: #a9d8c6;
padding: 5px 15px;
border-radius: 5px;
color: #485e55;
font-weight: 600;
padding-bottom: 8px;
}
.phils-404 span:hover {
background-color: #364740;
color: #fff;
}
.flex-login-remember {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.form-inline {
display: contents;
}
.lh40 a {
line-height: 40px;
}
.overlaping-container.left.break,
.overlaping-container.right.break {
padding-left: 0;
padding-right: 0;
}
.overlaping-container.left .text-content {
padding-left: 40px;
}
.join-box {
background: #485e55;
position: relative;
min-height: 200px;
}
.join-box .banner-title {
font-size: 24px;
color: #fff;
}
.join-box .desc-banner {
margin-bottom: 0px;
color: #fff;
position: absolute;
padding-right: 40px;
bottom: 40px;
}
@media (max-width: 640px) {
.join-box {
padding: 30px 15px;
}
.join-box .desc-banner {
padding-right: 15px;
}
}
.logo-box-bg {
background-color: #364740;
}
.left-slider-banner-arrow {
transform: translateY(70%) translateX(-200%) !important;
right: 0;
left: auto;
bottom: 0;
}
.right-slider-banner-arrow {
transform: translateY(70%) translateX(-60%) !important;
bottom: 0;
}
@media (max-width: 560px) {
.left-slider-banner-arrow {
transform: translateY(50%) translateX(-200%) !important;
}
.right-slider-banner-arrow {
transform: translateY(50%) translateX(-60%) !important;
}
}
.hero-container {
justify-content: flex-start;
align-items: center;
}
.hero-container .text-content {
/* padding-top: 160px */
}
.hero-container .text-content .banner-title.top {
font-size: 57.5px;
line-height: 35px;
}
.hero-container .text-content .banner-title.bottom {
font-size: 21px;
}
.hero-container .text-content .desc-banner {
max-width: 300px;
}
.hero-container .text-content .follow {
margin: 0;
padding-top: 120px;
}
@media (max-width: 1200px) {
.hero-container .text-content {
/* padding-top: 140px */
}
.hero-container .text-content .banner-title.top {
font-size: 48px;
}
.hero-container .text-content .banner-title.bottom {
font-size: 18px;
}
.hero-container .text-content .follow {
padding-top: 100px;
}
}
@media (max-width: 959px) {
.overlaping-container.left .text-content {
padding-left: 15px;
padding-right: 15px;
}
.hero-container .text-content {
padding-top: 50px;
margin: 0 auto;
}
.hero-container .text-content .follow {
padding-top: 30px;
}
}
@media (max-width: 321px) {
.hero-container .text-content .follow {
padding-top: 0px;
}
.hero-container .text-content .banner-title.top {
font-size: 42px;
}
.hero-container .text-content .banner-title.bottom {
font-size: 16px;
}
}
.grow {
transition: all 0.2s ease-in-out;
}
.grow:hover {
transform: scale(1.03);
}
@media (max-width: 960px) {
.grow:hover {
transform: scale(0.9);
}
}
.sejarah-img {
margin: 0 auto;
text-align: center;
}
.sejarah-img img {
padding: 20px 15px;
max-width: 400px;
width: 100%;
}
.sejarah-title-container .title {
font-family: MDGROTESQUE;
color: #485e55;
font-weight: 500;
font-size: 24px;
margin: 0;
text-transform: capitalize;
}
.sejarah-title-container .left-text {
font-family: MDGROTESQUE;
color: #485e55;
font-weight: 600;
font-size: 12px;
margin: 0;
text-transform: capitalize;
max-width: 200px;
}
.sejarah-title-container .left-text span {
font-weight: 400;
}
.flex {
display: flex;
}
.flex.space {
justify-content: space-between;
}
.color-green {
color: #475d54;
}
.color-white {
color: #fff;
}
.black .community-desc {
color: #333;
}
.container-comunity {
padding: 15px 0;
}
@media (min-width: 1400px) {
.container-comunity {
margin-right: 0;
}
}
@media (max-width: 960px) {
.container-comunity {
margin-right: auto;
}
}
@media (max-width: 640px) {
.container-comunity {
margin: 30px auto;
}
}
@media (min-width: 960px) {
.container-comunity {
margin-bottom: 40px;
}
}
.wrap-reverse {
flex-wrap: wrap-reverse;
}
.force-normal {
padding: 30px 0px;
border-left: 0;
margin: 0 auto;
max-width: 700px;
text-align: center;
}
.setempel-img {
height: 70px;
float: right;
margin-bottom: 30px;
}
.event-head,
.member-head,
.gallery-head {
background: #fff;
border-radius: 16px;
}
.event-head .back-icon,
.member-head .back-icon,
.gallery-head .back-icon {
margin: 20px 10px 20px 15px;
width: 20px;
}
.event-head .title,
.member-head .title,
.gallery-head .title {
font-family: MDGROTESQUE;
color: #475d54;
font-weight: 600;
font-size: 16px;
padding: 17px 0px 10px 5px;
text-transform: capitalize;
margin: 0;
line-height: 30px;
}
.event-head .title.small,
.member-head .title.small,
.gallery-head .title.small {
font-weight: 400;
font-size: 14px;
padding: 20px;
line-height: 16px;
}
.card-event {
padding: 20px;
border-radius: 16px;
box-shadow: none;
background: #fff;
}
.card-event.list {
transition: 0.2s;
}
.card-event.list:hover {
-webkit-transform: translateY(-0.5rem);
transform: translateY(-0.5rem);
}
.card-event .title {
font-family: MDGROTESQUE;
color: #475d54;
font-weight: 600;
font-size: 16px;
margin: 0;
text-transform: capitalize;
}
.card-event .title.big {
font-size: 22px;
}
.card-event .desc {
font-family: "Carmen Sans";
font-weight: 400;
font-size: 14px;
margin: 0px;
}
.card-event img {
border-radius: 10px;
margin-top: 10px;
width: 100%;
}
.card-event .status-event {
margin-top: 10px;
background: #f3f3f3;
border-radius: 8px;
display: flex;
justify-content: space-between;
}
.card-event .status-event p {
font-family: "Carmen Sans";
font-weight: 400;
font-size: 12px;
margin: 0px;
padding: 5px 10px;
}
.card-event .status-event .success {
background-color: #24774d;
font-family: "Carmen Sans";
font-weight: 400;
font-size: 12px;
margin: 0px;
color: #fff;
padding: 5px 10px;
border-radius: 8px;
}
.card-event .status-event .danger {
background-color: #b43e4b;
font-family: "Carmen Sans";
font-weight: 400;
font-size: 12px;
margin: 0px;
color: #fff;
padding: 5px 10px;
border-radius: 8px;
}
.card-event .status-event .info {
background-color: #707c8b;
font-family: "Carmen Sans";
font-weight: 400;
font-size: 12px;
margin: 0px;
color: #fff;
padding: 5px 10px;
border-radius: 8px;
}
.line-clamp {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
width: 100%;
}
.line-clamp.hidden {
overflow: hidden;
-webkit-overflow: hidden;
}
.content-event {
font-family: "Carmen Sans";
font-weight: 400;
font-size: 14px;
}
.content-event p {
margin-bottom: 0px;
margin-top: 10px;
}
.event-poster {
width: 100%;
}
.event-poster img {
width: auto;
}
.event-poster .poster {
padding-top: 16px;
padding-left: 15px;
}
.event-poster .poster .name {
font-family: MDGROTESQUE;
color: #000000;
font-weight: 600;
font-size: 14px;
margin: 0;
text-transform: capitalize;
}
.event-poster .poster .posting-time {
font-family: "Carmen Sans";
font-weight: 400;
font-size: 12px;
margin: 0;
color: #646464;
}
.card-event .share {
padding-top: 20px;
float: right;
}
.card-event .share span {
padding: 10px;
background: #d9d9d9;
border-radius: 50%;
}
.image-box {
position: relative;
}
.image-box .price-box {
padding: 0 10px;
position: absolute;
background: #485e55;
bottom: 0;
right: 0;
border-radius: 0 0 10px 0;
}
.image-box .price-box p {
font-family: "Carmen Sans";
font-weight: 400;
font-size: 12px;
margin: 0px;
color: #fff;
padding: 10px;
line-height: 10px;
}
.bottom-event {
display: block;
}
.price-event {
font-family: MDGROTESQUE;
color: #475d54;
font-weight: 600;
font-size: 16px;
margin: 0;
text-transform: capitalize;
min-width: 120px;
}
.price-event span {
font-weight: 400;
font-size: 12px;
color: #666;
}
@media (max-width: 640px) {
.bottom-event .flex {
justify-content: space-between;
}
}
.uk-border-circle {
border-radius: 50% !important;
border: 1px solid rgb(72 94 85 / 17%);
width: 120px;
height: 120px;
object-fit: cover;
}
.uk-border-circle.sm {
width: 50px;
height: 50px;
}
.uk-border-circle.xs {
width: 32px;
height: 32px;
}
.uk-border-circle.sm-40 {
width: 40px;
height: 40px;
}
.event-poster .uk-border-circle {
width: 48px;
height: 48px;
}
.event-price-container.event-info {
background: rgb(71 93 84 / 30%);
border-radius: 10px;
padding: 10px;
margin-top: 15px;
}
.card-event .event-price-container.event-info img {
margin-top: 0;
}
.event-price-container.event-info .event-poster svg {
padding: 5px;
}
.event-price-container.event-info .event-poster .poster {
padding-top: 5px;
padding-left: 10px;
}
@media (max-width: 560px) {
.event-price-container {
display: block;
position: relative;
}
.event-price-container .price-info {
display: block;
}
.event-price-container .price-info p {
text-align: right;
position: absolute;
top: 15px;
right: 0;
}
.event-price-container .price-info .btn-green {
width: 100%;
}
}
@media (max-width: 321px) {
.event-price-container .price-info {
display: flex;
}
.event-price-container .price-info p {
text-align: unset;
position: unset;
}
}
.card-profile {
padding: 30px;
border-radius: 16px;
box-shadow: none;
background: #fff;
}
.card-profile.side {
padding: 20px;
}
.card-profile.disabled {
padding: 0;
}
@media (min-width: 960px) {
.card-profile.-pad {
padding: 20px;
}
}
@media (max-width: 960px) {
.card-profile {
padding: 20px;
}
}
.card-profile.img {
background: #fff url("/front/assets/images/base/banner-profile.jpg") 50% 0%
no-repeat;
background-size: contain;
}
@media (max-width: 1280px) {
#card-profile {
background-size: 720px !important;
}
}
@media (max-width: 955px) {
#card-profile {
background-size: 955px !important;
background-position-x: 55%;
}
.card-profile.img {
background: #fff url("/front/assets/images/base/banner-profile-mob.jpg")
50% 0% no-repeat;
}
}
.card-profile .title {
font-family: MDGROTESQUE;
color: #475d54;
font-weight: 600;
font-size: 16px;
margin: 0;
text-transform: capitalize;
}
.card-profile.bottom-infografik {
display: flex;
justify-content: center;
align-items: end;
}
.card-profile .action {
font-family: "Carmen Sans";
font-weight: 400;
font-size: 14px;
}
.profile-tab::before {
border-bottom: 0;
}
.profile-tab li a {
font-family: MDGROTESQUE;
font-weight: 400;
font-size: 14px !important;
margin: 0;
text-transform: capitalize !important;
min-width: 100px;
border-radius: 10px;
text-align: center;
}
.profile-tab .uk-active a {
font-family: MDGROTESQUE;
color: #ffffff;
font-weight: 400;
font-size: 14px;
margin: 0;
text-transform: capitalize;
background: #475d54;
border-radius: 10px;
}
.profile-banner-content {
margin-top: 120px;
display: flex;
justify-content: space-between;
align-items: end;
}
@media (min-width: 960px) {
.profile-banner-content.right {
margin-top: 50px;
}
#card-profile.right {
background-size: 500px !important;
}
}
.member-name-mobile .btn-round,
.profile-banner-content .btn-round {
height: fit-content;
border-radius: 30px;
padding: 0px 20px;
font-weight: 500;
}
.summary-member {
padding-top: 10px;
}
.summary-member span {
font-family: MDGROTESQUE;
color: #475d54;
font-weight: 600;
font-size: 16px;
margin: 0;
text-transform: capitalize;
line-height: 0px;
}
.profile-info-list p {
font-family: "Carmen Sans";
font-weight: 400;
font-size: 14px;
padding-bottom: 5px;
color: #475d54;
background: rgb(72, 94, 85, 0.1);
border-radius: 10px;
padding: 0 15px 4px 15px;
margin-bottom: 10px;
margin-top: 0;
}
.profile-info-list.gray p {
background: #f3f3f3;
}
.profile-info-list p:last-child {
margin-bottom: 0px;
}
.profile-info-list span {
font-size: 12px;
font-weight: 700;
}
.drop-down-menu {
box-shadow: rgb(0 0 0 / 20%) 0px 1px 8px 0px;
border-radius: 10px;
padding: 0px;
padding-top: 1px;
}
.drop-down-menu ul li {
margin: 4px;
padding: 16px 12px;
line-height: 10px;
border-radius: 10px;
cursor: pointer;
}
.drop-down-menu ul li:hover {
background: #ecefee;
}
.drop-down-menu ul li a {
color: #8592a3 !important;
}
.drop-down-menu ul li:hover a {
color: #475d54 !important;
}
.user-info-mobile {
align-items: center;
}
.user-info-mobile .name {
margin: 0 0 0 10px;
font-family: "MDGROTESQUE";
text-transform: capitalize;
font-weight: 400;
font-size: 14px;
color: #b1b1b1;
}
.logout {
color: #495b54 !important;
font-weight: 500 !important;
text-decoration: underline !important;
}
.overide-action {
margin-top: 20px;
justify-content: end;
}
.modal-form {
border-radius: 10px;
}
.modal-form .title {
font-family: MDGROTESQUE;
color: #475d54;
font-weight: 600;
font-size: 16px;
margin: 0;
text-transform: capitalize;
}
@media (max-width: 321px) {
.modal-form {
padding: 20px;
}
}
.custom-file-input {
color: transparent;
}
.custom-file-input::-webkit-file-upload-button {
visibility: hidden;
}
.custom-file-input::before {
content: "Klik untuk memilih Foto Profil";
color: #4a5f57;
padding-top: 20px;
text-align: center;
}
.payment.custom-file-input::before {
content: "Klik untuk memilih Bukti Transfer";
}
.dog.custom-file-input::before {
content: "Klik untuk memilih Foto Anjing";
}
.custom-file-input:hover::before {
border-color: black;
}
.custom-file-input:active {
outline: 0;
}
#imagePrev {
display: flex;
justify-content: center;
align-items: center;
max-height: 200px;
border-radius: 5px;
margin: 15px auto;
}
#imagePrev:not([src]) {
display: none;
}
.box-hover {
background: #f3f3f3;
border-radius: 10px;
padding: 15px 0;
color: #333;
}
.box-hover:hover {
background: #ecefee;
color: #475d54;
}
.uk-timeline .uk-timeline-item .uk-card {
/* max-height: 300px; */
}
.uk-timeline .uk-timeline-item {
display: flex;
position: relative;
}
.uk-timeline .uk-timeline-item::before {
background: #dadee4;
content: "";
height: 100%;
left: 13.5px;
position: absolute;
top: 20px;
width: 2px;
z-index: -1;
}
.uk-timeline .uk-timeline-item .uk-timeline-icon .uk-badge {
margin-top: 4px;
width: 30px;
height: 30px;
}
.uk-timeline .uk-timeline-item .uk-timeline-content {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 0 0 0 1rem;
}
@media (max-width: 599px) {
.uk-timeline .uk-timeline-item::before {
left: 11px;
}
.uk-timeline .uk-timeline-item .uk-timeline-icon .uk-badge {
width: 25px;
height: 25px;
}
}
.uk-badge {
background: #485e55;
}
.card-activity {
border-radius: 10px;
}
.card-activity .tagihan-section {
padding-left: 10px;
border-left: 1px solid #485e55;
}
.card-activity .uk-card-header {
padding: 10px 15px;
border-radius: 10px;
background: #ecefee;
border-bottom: 0px;
}
.card-activity .uk-card-header.sm {
padding: 0 15px;
}
.card-activity .uk-card-header.md {
padding: 5px 15px;
}
.card-activity .uk-card-header .uk-card-title {
font-family: MDGROTESQUE;
color: #475d54;
font-weight: 400;
font-size: 12px;
margin: 0;
text-transform: capitalize;
}
.card-activity .uk-card-header .uk-label {
text-transform: capitalize;
font-family: "Carmen Sans";
font-weight: 400;
font-size: 12px;
padding-bottom: 2px;
border-radius: 5px;
}
.card-activity .uk-card-body {
padding: 10px 15px;
}
.card-activity .uk-card-body.top-10 {
padding: 10px 0 0 0;
}
.card-activity .uk-card-body .date {
text-transform: capitalize;
font-family: "Carmen Sans";
font-weight: 400;
font-size: 12px;
padding-bottom: 2px;
border-radius: 5px;
margin: 0;
}
.card-activity .uk-card-body .desc {
text-transform: capitalize;
font-family: "Carmen Sans";
font-weight: 400;
font-size: 14px;
padding-bottom: 2px;
border-radius: 5px;
margin: 0;
}
.card-activity .uk-card-body .img-trf {
width: 100%;
max-width: 400px;
max-height: 400px;
border: 1px solid #ecefee;
border-radius: 10px;
margin: 4px 0;
}
.btn-filter {
height: fit-content;
border-radius: 30px;
padding: 0px 20px;
font-weight: 400;
}
.vw100 {
width: 100vw;
}
.w100 {
width: 100%;
}
.list-data .uk-card-default {
box-shadow: none;
border: 2px dashed transparent;
}
.list-data .uk-card-default:hover {
border: 2px dashed #6d7d76;
}
.list-data .uk-card-default.no-dash:hover {
border: 2px dashed transparent;
}
.list-data.info {
margin-bottom: 10px;
border-radius: 10px;
}
.list-data.info .uk-card-default {
border: 0.15rem dashed #485e55;
}
.list-data .content-list {
padding: 5px 30px;
}
.list-data .content-list.no-pad {
padding: 0;
}
.list-data .title-kandang {
font-family: "Carmen Sans";
color: #475d54;
font-weight: 400;
font-size: 14px;
margin: 0;
text-transform: capitalize;
padding-bottom: 5px;
}
.list-data .title-kandang:last-child {
padding-bottom: 0px;
}
.list-data .title-kandang-n {
font-family: "Carmen Sans";
color: #475d54;
font-weight: 400;
font-size: 14px;
margin: 0;
text-transform: capitalize;
}
.list-data .title-kandang-n.note {
margin: 10px 0 5px 0;
background: #c8d3cf;
padding: 0px 3px 3px 3px;
border-radius: 6px;
}
.list-data .uk-flex .title-kandang {
margin-left: 10px;
}
.list-data.table .uk-flex .title-kandang {
padding-top: 9px;
}
.list-data.table .card-activity .uk-card-header {
padding: 2px 15px;
}
.list-data.table .content-list:nth-of-type(odd) {
background: transparent;
}
.list-data .count-dog {
font-family: MDGROTESQUE;
color: #ffffff;
font-weight: 400;
font-size: 14px;
text-transform: capitalize;
margin: 0;
line-height: 36px;
padding: 5px 20px;
background: #475d54;
border-radius: 15px;
}
.list-data .count-dog span {
font-family: "Carmen Sans";
font-size: 12px;
font-weight: 400;
}
.list-data .action-btn {
background: rgb(71, 93, 84, 0.8);
border-radius: 10px;
text-transform: capitalize;
}
.list-data .action-btn:hover {
background: #475d54;
border-radius: 10px;
text-transform: capitalize;
}
.list-data .badge-default {
font-family: MDGROTESQUE;
color: #ffffff;
font-weight: 400;
font-size: 14px;
text-transform: capitalize;
margin: 0;
line-height: 36px;
padding: 5px 20px;
border-radius: 15px;
}
.list-data .badge-default.warning {
background: #faa05a;
}
.list-data .badge-default.primary {
background: #475d54;
}
.list-data .badge-default.success {
background: #32d296;
}
.list-data .badge-default.danger {
background: #f0506e;
}
.footer-list-data {
border-top: 1px solid #f3f3f3;
padding: 20px 30px;
}
.footer-list-data .uk-pagination {
justify-content: flex-end;
margin: 0;
}
.uk-pagination > .uk-active > * {
color: #fff;
background: #485e55;
padding: 0 10px;
border-radius: 6px;
}
.mobile-justify {
border-top: 1px solid #475d54;
padding-top: 5px;
}
@media (max-width: 480px) {
.mobile-justify {
display: flex;
justify-content: space-between;
border-top: 1px solid #475d54;
padding-top: 10px;
}
}
.uk-notification-message-warning {
color: #fff;
background: #faa05a;
font-size: 14px;
padding: 10px 15px;
padding-right: 30px;
}
.uk-notification-message-primary {
color: #fff;
background: #475d54;
font-size: 14px;
padding: 10px 15px;
padding-right: 30px;
}
.uk-notification-message-success {
color: #fff;
background: #32d296;
font-size: 14px;
padding: 10px 15px;
padding-right: 30px;
}
.uk-notification-message-danger {
color: #fff;
background: #f0506e;
font-size: 14px;
padding: 10px 15px;
padding-right: 30px;
}
.uk-notification-close {
position: absolute;
right: 15px;
display: block;
color: #fff;
top: 14px;
}
.mh-36 {
min-height: 36px;
}
@media (max-width: 960px) {
.pad-30 {
padding: 30px 20px 20px 20px;
}
.list-data .content-list {
padding: 5px 20px;
}
}
@media (max-width: 321px) {
.pad-30 {
padding: 30px 15px 15px 15px;
}
.list-data .content-list {
padding: 5px 15px;
}
.card-profile {
padding: 15px;
}
.card-event {
padding: 15px;
}
.event-head .title.small {
padding: 15px;
}
.card-profile.side {
padding: 15px;
}
}
.switcher-phills li {
background: #f3f2f2;
border-radius: 10px;
padding: 5px 15px;
margin-bottom: 10px;
}
.switcher-phills li.uk-active {
background: #485e55;
}
.switcher-phills li.uk-active .history-title.black {
color: #fff;
}
@media (min-width: 960px) {
#switcher-container {
padding: 15px 15px 1px 15px;
background: #f3f2f2;
border-radius: 10px;
}
}
.img-anatomy {
height: 200px;
border-radius: 10px;
}
.text-img-anatomy {
max-width: 450px;
margin: 10px auto 15px;
font-size: 12px;
font-style: italic;
}
.fw-400 {
font-weight: 400;
}
.card-member {
padding: 15px;
border-radius: 10px;
transition: 0.2s;
}
.card-member:hover {
-webkit-transform: translateY(-0.5rem);
transform: translateY(-0.5rem);
}
.card-member .text {
font-family: "Carmen Sans";
font-weight: 400;
font-size: 14px;
color: #475d54;
margin-bottom: 10px;
margin-top: 0;
}
.card-member .name-member {
margin-left: -15px;
margin-right: -15px;
margin-top: -15px;
background: #485e55;
padding: 5px 15px;
border-radius: 10px;
}
.card-member .name-member.white {
background: #fff;
}
.card-member .name-member .text {
color: #fff;
margin-bottom: 0;
margin-left: 10px;
}
.card-member .name-member.white .text {
color: #485e55;
}
#imageProfileInput {
background: #ecefee;
border-radius: 10px;
border: 0.15rem dashed #485e55;
cursor: pointer;
display: flex;
width: 100%;
}
#imageProfileInput:hover {
background: #fff;
}
@media (max-width: 560px) {
.force-center-s {
justify-content: center !important;
}
.force-center-list {
width: 100%;
margin-top: 0 !important;
justify-content: center;
}
}
.rekening-container {
border: 1px solid #6d7d76;
padding: 6px 10px 10px 10px;
border-radius: 10px;
background: #ecefee;
margin-top: 10px;
}
.rekening-container .title-kandang-n {
font-size: 12px;
}
.rekening-container .title-kandang-n span {
font-weight: 700;
}
.fw-700 {
font-weight: 700;
}
.form-info {
background: rgb(72, 94, 85, 0.1);
border-radius: 10px;
padding: 10px;
margin-top: 15px;
}
.form-info p {
font-family: "Carmen Sans";
font-weight: 400;
font-size: 12px;
margin-bottom: 0;
margin-top: 0;
}
.img-status {
max-width: 300px;
padding: 0 15px;
min-width: auto;
}
.img-status-400 {
max-width: 400px;
padding: 15px;
min-width: auto;
}
@media (max-width: 450px) {
.img-status,
.img-status-400 {
width: 250px;
}
}
.img-status-title {
font-family: "MDGROTESQUE";
font-weight: 600;
font-size: 20px;
color: #475d54;
max-width: 500px;
text-align: center;
margin: 15px auto 0;
}
.img-status-text {
font-family: "Carmen Sans";
font-weight: 400;
font-size: 14px;
color: #000;
max-width: 500px;
text-align: center;
margin: 5px auto 15px;
padding: 0 15px 40px 15px;
}
.member-info-card {
padding: 15px 15px 0 15px;
margin-top: -15px;
background: white;
margin-left: -15px;
margin-right: -15px;
border-radius: 10px;
}
.member-info-card .member-info {
margin-bottom: 10px;
}
.member-info-card a:last-child .member-info {
margin-bottom: 0;
}
.member-info-card .member-info p {
margin-bottom: 0;
margin-left: 10px;
}
.member-info-card .cage-list {
max-height: 300px;
overflow: auto;
}
.member-info-card .cage-list .content-list {
padding: 0 !important;
}
.uk-subnav-pill.switcher-member a {
background: rgb(72, 94, 85, 0.1);
color: #495f56;
text-transform: capitalize;
border-radius: 10px;
font-weight: 400;
font-size: 14px;
font-family: "Carmen Sans";
padding-bottom: 8px;
}
.uk-subnav-pill.switcher-member .uk-active a {
background: #495f56;
color: #fff;
}
@keyframes skeleton-loading {
0% {
background-color: #ffffff;
}
100% {
background-color: #ecefee;
}
}
.card-dog {
background-color: #fff;
position: relative;
border-radius: 16px;
margin-bottom: 15px;
}
.info-kandang-600,
.info-barcode-600,
.card-dog.card-dog-600 {
max-width: 600px;
margin: 0 auto 15px;
}
.expand-barcode .info-barcode-600 {
max-width: 100%;
}
.card-dog:last-child {
margin-bottom: 0px;
}
.card-dog .dog-img {
border-radius: 10px 10px 0px 0px;
animation: skeleton-loading 1s linear infinite alternate;
width: 100%;
}
.card-dog .stb {
position: absolute;
bottom: 16px;
right: 16px;
background: #ffffff;
padding: 2px 26px;
border-radius: 10px;
color: #475d54;
}
.card-dog .cage path {
fill: #475d54;
}
.card-dog .cage.stroke path {
fill: transparent;
stroke: #475d54;
}
.card-dog .cage p {
font-family: "Carmen Sans";
color: #475d54;
font-weight: 600;
font-size: 13px;
margin: 0;
margin-left: 10px;
}
.card-dog .cage.stroke p {
color: #333;
font-weight: 400;
font-size: 12px;
}
.card-dog .dog-name {
font-family: MDGROTESQUE;
color: #475d54;
font-weight: 600;
margin: 5px 0;
font-size: 16px;
}
.card-dog .dog-age {
background: #475d54;
padding: 2px 26px;
border-radius: 10px;
color: #fff;
margin: 0;
position: absolute;
top: 16px;
left: 16px;
}
.card-dog .dog-desc {
font-family: "Carmen Sans";
color: #333;
font-weight: 400;
font-size: 13px;
margin: 0;
}
span.uk-icon {
min-width: 20px;
}
.pad-16 {
padding: 16px;
}
@media (max-width: 960px) {
.container-dog {
max-width: 550px;
margin: 0 auto;
}
}
.table-info-dog tbody {
vertical-align: baseline;
}
.table-info-dog td {
font-family: "Carmen Sans";
color: #333;
font-weight: 400;
font-size: 13px;
margin: 0;
}
@media (max-width: 360px) {
.card-dog .dog-img {
min-height: 250px;
}
}
.mw-300 {
min-width: 300px;
}
.another-cage-container {
background: #f3f3f3;
border-radius: 12px;
padding: 6px 10px;
cursor: pointer;
transition: 0.2s;
margin-bottom: 10px;
}
a:last-child .another-cage-container {
margin-bottom: 0px;
}
.another-cage-container:hover {
-webkit-transform: translateY(-0.3rem);
transform: translateY(-0.3rem);
}
.another-cage-container:hover {
background: #ecefee;
color: #475d54;
}
.another-cage-container .cage-name {
font-family: "Carmen Sans";
font-weight: 400;
font-size: 14px;
padding: 5px 10px;
color: #475d54;
background: transparent;
padding-bottom: 5px;
margin: 0;
}
.another-cage-container .desc {
font-family: "Carmen Sans";
font-weight: 400;
font-size: 14px;
color: #475d54;
background: transparent;
padding-bottom: 5px;
margin: 0;
}
#auth-link li a,
#community-link li a {
font-weight: 400 !important;
}
@media (max-width: 959px) {
.uk-visible-m {
display: none;
}
#card-profile {
position: relative;
}
.reverse-grid {
flex-direction: column-reverse;
}
.mobile-member {
display: flex;
justify-content: space-between;
align-items: center;
}
.mobile-member .float-edit {
position: absolute;
top: 62px;
left: 72px;
}
.mobile-member .float-edit .btn-round {
line-height: 0;
padding: 8px;
border: 2px solid #fff;
}
.mobile-member .profile-banner-content {
margin-top: 0;
}
.mobile-member .profile-banner-content .uk-border-circle {
min-width: 85px;
width: 85px;
height: 85px;
}
.mobile-member .summary-member {
margin-left: 15px;
display: flex;
overflow: auto;
padding-top: 0;
}
.mobile-member .summary-member .grid-inner {
min-width: 100px;
max-width: 120px;
}
.mobile-member .summary-member .overflow-menu {
flex-wrap: nowrap;
width: 100%;
}
.card-profile.img.disable-img {
background: #fff;
}
#profile-side-info .pt-30 {
padding-top: 0;
}
}
#kandang-title-info,
.kandang-title-info {
background: rgb(255, 255, 255);
border-radius: 0px 0px 10px 10px;
padding: 15px 20px;
color: rgb(51, 51, 51);
margin-top: -15px;
margin-bottom: 15px;
border-top: 1px solid rgb(243, 243, 243);
}
hidden#kandang-title-info,
hidden.kandang-title-info {
display: block;
}
#kandang-lainnya-info {
background: rgb(255, 255, 255);
border-radius: 20px;
padding: 0px 20px 20px 20px;
color: rgb(51, 51, 51);
overflow: auto;
}
#kandang-lainnya-info .another-kandang-container {
font-family: "Carmen Sans";
font-weight: 400;
font-size: 14px;
color: #475d54;
background: rgb(243 243 243);
border-radius: 10px;
padding: 0 15px 4px 15px;
margin-bottom: 10px;
margin-top: 0;
line-height: 0;
}
#kandang-lainnya-info .another-kandang-container .nama-kandang {
font-family: "Carmen Sans";
color: #475d54;
font-weight: 500;
font-size: 14px;
margin-left: 10px;
}
#kandang-lainnya-info a:last-child .another-kandang-container {
margin-bottom: 0;
}
#kandang-lainnya-info .another-kandang-container:hover {
background: rgb(72, 94, 85, 0.1);
}
#map-info .contact-title,
#contact .contact-title {
font-family: MDGROTESQUE;
color: #333;
font-weight: bold;
font-size: 150%;
margin: 0;
letter-spacing: 0.02em;
text-transform: capitalize;
}
#map-info .contact-title {
color: #fff;
}
#map-info .contact-underline,
#contact .contact-underline {
margin-top: 10px;
}
#map-info .contact-underline svg,
#contact .contact-underline svg {
width: 70px;
}
#map-info .desc,
#contact .desc {
font-family: "Carmen Sans";
font-size: 14px;
line-height: 1.325em;
letter-spacing: 0.076em;
}
#map-info .mw-290,
#contact .mw-290 {
max-width: 290px;
}
#contact .circle-contact-300 {
max-width: 300px;
max-height: 300px;
margin: 30px auto;
width: 300px;
height: 300px;
background: #495f56;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
@media (min-width: 960px) {
#contact .circle-contact-300 {
max-width: 400px;
max-height: 400px;
}
}
#contact .bottom-flex-info {
display: flex;
align-items: flex-end;
padding-bottom: 60px;
}
#contact .contact-container {
padding: 60px 0;
}
@media (max-width: 960px) {
#contact .contact-container {
padding-top: 30px;
}
}
@media (max-width: 560px) {
#contact .contact-container {
padding: 30px 0;
}
}
#contact .contact-number {
color: #fff;
font-family: "Carmen Sans";
font-size: 14px;
line-height: 1.325em;
letter-spacing: 0.076em;
margin-bottom: 0;
}
#contact .contact-number a {
color: #fff;
font-size: 18px;
margin-top: 15px;
line-height: 40px;
}
#map-info {
position: relative;
background: #495f56;
}
#map-info .separator-container {
position: absolute;
top: -1px;
bottom: auto;
left: 0;
width: 100%;
height: 3.75em;
text-align: center;
}
#map-info .separator-container .width-separator {
display: inline-block;
height: 100%;
}
#map-info .separator-container .width-separator svg {
width: 400px;
}
#map-info .left-bg {
flex-direction: row-reverse;
}
#map-info iframe {
width: 100%;
height: 300px;
border-radius: 16px;
}
#map-info .grid-padding {
padding-top: 80px;
padding-bottom: 60px;
}
.standardization-title-container .title {
font-family: MDGROTESQUE;
color: #485e55;
font-weight: 500;
font-size: 24px;
margin: 0;
text-transform: capitalize;
}
.standardization-title-container .title span {
font-weight: 400;
font-size: 16px;
}
.standardization-title-container .left-text {
font-family: MDGROTESQUE;
color: #485e55;
font-weight: 600;
font-size: 12px;
margin: 0;
text-transform: capitalize;
max-width: 200px;
}
.standardization-title-container .left-text span {
font-weight: 400;
}
@media (max-width: 640px) {
.standardization-title-container.flex {
display: block;
text-align: center;
}
.standardization-title-container .left-text {
max-width: 100%;
}
}
.card-img-rounded,
.card-img-rounded img {
border-radius: 10px;
}
.grow {
transition: all 0.2s ease-in-out;
}
.grow:hover {
transform: scale(1.1);
}
.modal-terms-conditions {
box-shadow: 0 5px 12px rgb(0 0 0 / 15%);
border-radius: 10px;
}
.terms-conditions-container p,
.terms-conditions-container h1,
.terms-conditions-container h2,
.terms-conditions-container h3,
.terms-conditions-container h4,
.terms-conditions-container h5,
.terms-conditions-container h6,
.terms-conditions-container ul,
.terms-conditions-container ul li {
background-color: transparent !important;
background: transparent !important;
font-family: MDGROTESQUE !important;
color: #475d54 !important;
}
.cst-phills-tabs.uk-tab a {
font-family: "MDGROTESQUE";
border-bottom: 3px solid transparent;
padding: 5px 16px;
border-radius: 6px 6px 0 0;
}
.cst-phills-tabs.uk-tab .uk-active a {
color: #333;
border-bottom: 3px solid #475d54;
font-weight: 600;
background: #c0c7c4;
}
@media (max-width: 640px) {
.cst-phills-tabs.uk-tab > * {
width: calc(100% - 20px) !important;
width: 94.5% !important;
}
}
.drop-filter-action {
font-family: MDGROTESQUE;
background: #475d54;
height: 36px;
padding: 0 20px;
margin-right: 15px;
margin-top: 10px;
border-radius: 10px;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
text-transform: capitalize;
}
.drop-filter-container {
margin-top: 30px;
}
.drop-filter {
border-radius: 20px;
background: #fff;
box-shadow: 0 5px 15px rgb(0 0 0 / 8%);
text-align: left;
}
.drop-filter .filter-item .head,
.drop-filter .filter-item .head-slim {
font-size: 16px;
font-weight: 600;
margin: 0;
font-family: MDGROTESQUE;
color: #475d54;
}
.drop-filter .filter-item .head-slim {
font-size: 14px;
font-weight: 400;
}
.drop-filter .filter-item .dragscroll {
padding-bottom: 15px;
margin-left: -30px;
margin-right: -30px;
}
@media (max-width: 321px) {
.drop-filter .filter-item .dragscroll {
margin-left: -15px;
margin-right: -15px;
}
}
.barcode-side {
display: flex;
justify-content: center;
}
.btn-register-container {
min-width: 290px;
}
.btn-register-container a,
.btn-register-container a button {
width: 100%;
}
.wa-button {
position: fixed;
bottom: 0px;
margin: 16px 65px;
right: 0px;
}
@media (max-width: 600px) {
.wa-button {
left: 16;
right: auto;
margin: 16px;
}
}