/*===========================
00. COMMON css
===========================*/
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
body {
font-family: 'Inter', sans-serif;
font-weight: normal;
font-style: normal;
color: #121212;
background-color: #f0f0f0;
}
html {
scroll-behavior: smooth;
}
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
img {
max-width: 100%;
}
a:focus,
input:focus,
textarea:focus,
button:focus {
text-decoration: none;
outline: none;
}
a:focus,
a:hover {
text-decoration: none;
}
i,
span,
a {
display: inline-block;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Inter', sans-serif;
font-weight: 600;
color: #121212;
margin: 0px;
}
h1 {
font-size: 48px;
}
h2 {
font-size: 36px;
}
h3 {
font-size: 28px;
}
h4 {
font-size: 22px;
}
h5 {
font-size: 18px;
}
h6 {
font-size: 16px;
}
ul,
ol {
margin: 0px;
padding: 0px;
list-style-type: none;
}
p {
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: #121212;
margin: 0px;
}
/*===========================
01. NAVBAR css
===========================*/
.navbar-area {
position: fixed;
height: 0px;
z-index: 5;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
@media only screen and (max-width: 768px) {
.navbar-area {
padding: 0px;
position: static;
height: auto;
z-index: 2;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
/* Top Navbar */
.navbar-area .navbar-image {
height: 60px;
width: auto;
margin-top: 10px;
margin-bottom: 10px;
}
@media only screen and (max-width: 768px) {
.navbar-area .navbar-image {
height: auto;
width: 100px;
margin-bottom: 20px;
}
}
@media only screen and (max-width: 576px) {
.navbar-area .navbar-image {
height: 40px;
width: 100px;
margin-bottom: 20px;
}
}
.navbar-area .navbar1 {
padding: 0px 15px;
}
.navbar-area .col {
padding: 20px;
align-items: center;
text-align: center;
}
.navbar-area .navbar-text {
padding: 20px;
margin-top: 12px;
align-items: center;
text-align: center;
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 14px;
/* identical to box height, or 100% */
color: #FFFFFF;
}
@media only screen and (min-width: 867px) and (max-width: 992px) {
.navbar-area .navbar-text {
padding: 20px 0px;
font-size: 13px;
}
}
@media only screen and (max-width: 900px) {
.navbar-area .navbar-text {
display: none;
}
}
.navbar-area .navbar-text-mobile {
display: none;
}
@media only screen and (min-width: 769px) and (max-width: 900px) {
.navbar-area .navbar-text-mobile {
display: block;
padding: 20px;
margin-top: 12px;
align-items: center;
text-align: center;
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 14px;
/* identical to box height, or 100% */
color: #FFFFFF;
}
}
@media only screen and (max-width: 768px) {
.navbar-area .navbar-text-mobile {
display: block;
padding: 20px;
margin-top: 6px;
align-items: center;
text-align: center;
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 14px;
/* identical to box height, or 100% */
color: #FFFFFF;
}
}
.navbar-area .navbar-btn-area {
padding: 10px;
margin-top: 12px;
}
@media only screen and (max-width: 992px) {
.navbar-area .navbar-btn-area {
padding: 10px 0px;
margin-top: 12px;
}
}
@media only screen and (max-width: 768px) {
.navbar-area .navbar-btn-area {
padding: 10px 0px;
margin-top: 2px;
}
}
.navbar-area .navbar-btn-area .navbar-btn1 {
color: #FFf;
background-color: #FF7B14;
padding: 10px 15px;
font-style: normal;
font-weight: bold;
font-size: 12px;
align-items: center;
text-align: center;
letter-spacing: 0.12em;
text-transform: uppercase;
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
}
.navbar-area .navbar-btn1:hover {
color: #FF7B14;
background-color: #fff;
}
/* Bottom Navbar */
.wrapper {
background: #F6F6F6;
/* position: fixed; */
width: 100%;
}
.wrapper nav {
position: relative;
display: flex;
z-index: 5;
/* max-width: calc(100% - 200px); */
margin: 0 auto;
height: 50px;
align-items: center;
/* text-align: center; */
justify-content: space-around;
}
nav .content {
display: flex;
align-items: center;
}
nav .content .links {
/* margin-left: 80px; */
display: flex;
}
.content .links li {
list-style: none;
line-height: 51px;
}
.content .links li a,
.content .links li label {
/* color: #fff; */
font-size: 12px;
/* font-weight: 500; */
padding: 0px 30px;
/* border-radius: 5px; */
transition: all 0.3s ease;
}
.content .links li label {
display: none;
}
.wrapper .search-icon,
.wrapper .menu-icon {
color: #164687;
font-size: 18px;
cursor: pointer;
line-height: 70px;
width: 70px;
text-align: center;
}
.wrapper .menu-icon {
display: none;
left: 10px;
}
/* .wrapper #show-search:checked~.search-icon i::before {
content: "\f00d";
} */
.wrapper .title-text {
color: #222222;
}
.wrapper .title-text:hover {
color: #fff;
background-color: #164687;
}
.wrapper .menu-text {
font-style: normal;
font-weight: 500;
font-size: 12px;
line-height: 12px;
letter-spacing: 0.02em;
color: #FFFFFF;
/* border-bottom: 1px solid #406392; */
}
.wrapper .menu-text:hover {
background-color: #406392;
}
.wrapper input[type="checkbox"] {
display: none;
}
/* Dropdown Menu code start */
.content .links ul {
position: absolute;
background: #164687;
top: 80px;
z-index: -1;
opacity: 0;
visibility: hidden;
}
.content .links li:hover>ul {
top: 50px;
opacity: 1;
visibility: visible;
transition: all 0.3s ease;
/* background-color: rebeccapurple; */
}
.content .links ul li a {
display: block;
width: 250px;
line-height: 30px;
border-radius: 0px!important;
padding: 10px 15px;
}
.content .links ul ul {
position: absolute;
top: 0;
/* right: calc(-100% + 8px); */
right: calc(-100% + 0px);
}
.content .links ul li {
position: relative;
}
.content .links ul li:hover ul {
top: 0;
}
/* Responsive code start */
@media screen and (max-width: 1250px) {
.wrapper nav {
max-width: 100%;
padding: 0 20px;
}
nav .content .links {
margin-left: 30px;
}
.content .links li a {
padding: 8px 13px;
}
/* .wrapper .search-box {
max-width: calc(100% - 100px);
}
.wrapper .search-box input {
padding: 0 100px 0 15px;
} */
.content .links li {
list-style: none;
line-height: 35px;
}
}
@media screen and (max-width: 975px) {
.wrapper .title-text {
color: #fff;
}
.wrapper .menu-icon {
display: block;
}
.wrapper .close-icon {
width: 100%;
display: flex;
justify-content: end;
align-items: center;
height: 50px;
padding-right: 15px;
}
.wrapper #show-menu:checked~.menu-icon i::before {
content: "\f00d";
}
nav .content .links {
display: block;
position: fixed;
background: #14181f;
height: 100%;
width: 100%;
top: 0px;
left: -100%;
margin-left: 0;
max-width: 350px;
overflow-y: auto;
padding-bottom: 100px;
transition: all 0.3s ease;
}
nav #show-menu:checked~.content .links {
left: 0%;
}
.content .links li {
margin: 15px 20px;
}
.content .links li a,
.content .links li label {
line-height: 40px;
font-size: 16px;
display: block;
padding: 8px 18px;
cursor: pointer;
}
.content .links li a.desktop-link {
display: none;
}
/* dropdown responsive code start */
.content .links ul,
.content .links ul ul {
position: static;
opacity: 1;
visibility: visible;
background: none;
max-height: 0px;
overflow: hidden;
}
.content .links #show-pelayanan:checked~ul,
.content .links #show-profil:checked~ul,
.content .links #show-bidang:checked~ul,
.content .links #show-bidang1:checked~ul,
.content .links #show-bidang2:checked~ul,
.content .links #show-bidang3:checked~ul,
.content .links #show-informasi:checked~ul {
max-height: 100vh;
}
.content .links ul li {
margin: 7px 20px;
}
.content .links ul li a {
font-size: 16px;
line-height: 30px;
border-radius: 5px!important;
}
}
@media screen and (max-width: 400px) {
.wrapper nav {
padding: 0 10px;
}
.content .logo a {
font-size: 27px;
}
}
@media screen and (min-width: 770px) {
.content-wrapper {
padding-top: 130px;
}
}
/*===========================
02. CAROUSEL & BACKGROUND css
===========================*/
/* Carousel 1 */
/* .carousel-area {
padding: 60px 0px 60px 0px;
} */
.carousel-area .swiper,
.carousel-area img {
height: 700px;
width: 100%;
object-fit: cover;
}
@media only screen and (max-width: 768px) {
.carousel-area .swiper,
.carousel-area img {
height: 500px;
width: 100%;
}
}
@media only screen and (max-width: 576px) {
.carousel-area .swiper,
.carousel-area img {
height: 300px;
width: 100%;
}
}
.swiper-button-next,
.swiper-button-prev {
width: 50px;
height: 50px;
top: 400px;
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
z-index: 1;
}
.swiper-button-prev {
left: 80px;
right: auto;
color: #fff;
}
.swiper-button-next {
right: 80px;
left: auto;
color: #fff;
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
background-color: #FF7B14;
border-radius: 50px;
}
.swiper-button-prev:after,
.swiper-button-next::after {
font-size: 20px;
}
@media only screen and (max-width: 900px) {
.swiper-button-prev,
.swiper-button-next {
display: none;
}
}
/* Background 1 */
.background-area1 {
/* padding: 0px 120px 60px 120px; */
background: #FFf;
}
/* @media only screen and (max-width: 576px) {
.background-area1 {
padding: 0px 0px 60px 0px;
}
} */
.background-area1 .container {
z-index: 3;
position: relative;
top: -206px;
}
@media only screen and (max-width: 768px) {
.background-area1 .container {
z-index: 3;
position: relative;
top: -96px;
}
}
.background-area1 .flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
}
.background-area1 .space-evenly {
justify-content: space-evenly;
}
.background-area1 .box-item1 {
background: rgba(22, 70, 135, 0.8);
padding: 30px 0px 30px 0px;
width: 700px;
height: auto;
text-align: center;
margin: auto;
}
.background-area1 .box-item2 {
background: #27272A;
padding: 30px 0px 30px 0px;
width: 700px;
height: auto;
text-align: center;
margin: auto;
}
@media only screen and (max-width: 768px) {
.background-area1 .box-item1,
.background-area1 .box-item2 {
padding: 15px 0px 15px 0px;
width: auto;
height: auto;
}
}
.background-area1 .background1-text1 {
font-style: normal;
font-weight: bold;
font-size: 12px;
line-height: 14px;
/* identical to box height, or 117% */
text-align: center;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #FFFFFF;
}
@media only screen and (max-width: 768px) {
.background-area1 .background1-text1 {
font-size: 10px;
}
}
.background-area1 .background1-text2 {
font-style: normal;
font-weight: bold;
font-size: 28px;
line-height: 36px;
/* or 129% */
text-align: center;
color: #E5E5E5;
margin-top: 23px;
}
@media only screen and (max-width: 768px) {
.background-area1 .background1-text2 {
line-height: 1.6;
font-size: 13px;
margin-top: 10px;
}
}
.background-area1 .background1-text3 {
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 18px;
/* or 112% */
text-align: center;
color: #E5E5E5;
}
@media only screen and (max-width: 768px) {
.background-area1 .background1-text3 {
font-size: 14px;
}
}
/* Background 2 */
.background-area2,
.background-area2 img {
height: auto;
width: 100%;
}
@media only screen and (min-width: 769px) and (max-width: 1199px) {
.background-area2,
.background-area2 img {
height: 200px;
}
}
.background-short,
.background-short img {
height: auto;
width: 100%;
}
/* @media only screen and (min-width: 769px) and (max-width: 1199px) {
.background-short,
.background-short img {
height: 200px;
}
} */
/* Background 3 */
.background-area3,
.background-area3 img {
height: auto;
width: 100%;
}
/*===========================
03. DATA css
===========================*/
.data-area {
height: 458px;
background-color: #164687;
}
@media only screen and (min-width: 993px) and (max-width: 1199px) {
.data-area {
height: 470px;
}
}
@media screen and (min-width: 769px) and (max-width: 992px) {
.data-area {
height: 518px;
}
}
@media only screen and (max-width: 768px) {
.data-area {
height: auto;
}
}
.data-area .data-col2 {
z-index: 1;
top: -50px;
}
@media only screen and (max-width: 768px) {
.data-area .data-col2 {
z-index: none !important;
top: auto !important;
}
}
.data-area .data-title {
font-style: normal;
font-weight: 600;
font-size: 18px;
line-height: 36px;
/* or 180% */
display: flex;
align-items: center;
color: #E5E5E5;
padding: 120px 30px 60px 0px;
}
@media only screen and (max-width: 768px) {
.data-area .data-title {
padding: 60px 30px 60px 0px;
}
}
.data-area .card {
border-radius: 0px;
border-color: transparent;
padding: 10px;
}
.data-area .card .card-body {
padding: 10px 0px 20px 0px;
}
@media screen and (min-width: 769px) and (max-width: 992px) {
.data-area .card .card-body {
padding: 20px 0px;
}
}
.data-area .data-card1 {
background: #FF8323;
}
.data-area .data-card2 {
background: #FF913A;
}
.data-area .data-card3 {
background: #659be6;
}
.data-area .data-card4 {
background: #3a7edf;
cursor: pointer;
}
.data-area .card img {
height: 60px;
}
.data-area .data-card-title {
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 24px;
/* identical to box height, or 100% */
text-align: center;
color: #FFFFFF;
margin-bottom: 12px;
}
@media screen and (min-width: 769px) and (max-width: 992px) {
.data-area .data-card-title {
font-size: 22px;
}
}
.data-area .data-card-text {
font-style: normal;
font-weight: bold;
font-size: 11px;
line-height: 12px;
/* or 120% */
text-align: center;
letter-spacing: 0.02em;
text-transform: uppercase;
color: #FFFFFF;
}
@media screen and (min-width: 993px) and (max-width: 1999px) {
.data-area .data-card-text {
font-style: normal;
font-weight: bold;
font-size: 11px;
line-height: 12px;
/* or 120% */
text-align: center;
letter-spacing: 0.02em;
text-transform: uppercase;
color: #FFFFFF;
}
}
@media screen and (min-width: 769px) and (max-width: 992px) {
.data-area .data-card-text {
font-style: normal;
font-weight: bold;
font-size: 9px;
line-height: 12px;
/* or 120% */
text-align: center;
letter-spacing: 0.02em;
text-transform: uppercase;
color: #FFFFFF;
}
}
/*===========================
04. PROFIL css
===========================*/
.profil-area {
padding: 100px 0px 60px 0px;
background-color: #f0f0f0;
}
#more {
display: none;
}
.profil-area .profil-img {
float: right;
height: 300px;
margin-bottom: 10px;
}
@media only screen and (max-width: 768px) {
.profil-area .profil-img {
float: none;
display: block;
margin-left: auto;
margin-right: auto;
background-color: #E5E5E5;
}
}
.profil-area .profil-title {
font-style: normal;
font-weight: 600;
font-size: 24px;
line-height: 36px;
/* text-align: center; */
color: #000000;
margin: 20px 0px 5px 0px;
}
.profil-area .profil-text {
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.02em;
color: #27272A;
margin: 20px 0 10px 0px;
}
.profil-area .profil-btn1 {
font-style: normal;
font-weight: 600;
font-size: 12px;
line-height: 12px;
letter-spacing: 0.02em;
color: #164687;
margin: 20px 0 10px 0px;
cursor: pointer;
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
}
.profil-area .profil-btn1:hover {
color: #FF7B14;
}
/*===========================
05. SEARCH css
===========================*/
.search-area {
padding: 60px 0px 60px 0px;
}
.search-area .search-left,
.search-area .search-right {
height: 450px;
width: 100%;
}
/* @media screen and (min-width: 768px) {
.search-area .search-left,
.search-area .search-right {
height: 100vh;
}
} */
.search-area .search-left {
background-color: #164687;
}
.search-area .search-right {
background-color: #FFF;
}
.search-area .search-left,
.search-area .search-right {
display: flex;
justify-content: space-around;
/* align-items: center; */
}
.search-area .search-container {
width: 75%;
padding: 60px 0px 60px 0px;
}
@media screen and (max-width: 768px) {
.search-area .search-container {
width: 95%;
padding: 60px 0px 60px 0px;
}
}
.search-area .search-title1 {
font-style: normal;
font-weight: bold;
font-size: 32px;
line-height: 44px;
align-items: center;
text-transform: capitalize;
color: #E5E5E5;
}
@media screen and (min-width: 993px) and (max-width: 1200px) {
.search-area .search-title1 {
font-size: 35px;
}
}
@media screen and (min-width: 769px) and (max-width: 992px) {
.search-area .search-title1 {
font-size: 30px;
}
}
.search-area .search-title2 {
font-style: normal;
font-weight: 600;
font-size: 24px;
line-height: 24px;
text-transform: capitalize;
color: #27272A;
margin-bottom: 15px;
}
.search-area button {
border-radius: 0px;
}
.search-area button.button1 {
font-style: normal;
font-weight: 500;
font-size: 16px;
text-align: center;
color: #E5E5E5;
border-color: #fff;
}
.search-area button.button2 {
border-radius: 0px;
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 14px;
text-align: center;
color: #FFFF;
background-color: #FF7B14;
}
.search-area button.button3 {
width: 100%;
border-radius: 0px;
font-style: normal;
font-weight: 900;
font-size: 14px;
line-height: 17px;
text-align: center;
letter-spacing: 0.04em;
color: #FFFFFF;
background-color: #FF7B14;
}
@media screen and (min-width: 993px) and (max-width: 1200px) {
.search-area button.button3 {
font-size: 12px;
}
}
@media screen and (min-width: 769px) and (max-width: 992px) {
.search-area button.button3 {
font-size: 10px;
}
}
@media screen and (min-width: 993px) and (max-width: 1200px) {
.search-area .input-group button.btn {
padding: 3px;
}
}
@media screen and (min-width: 769px) and (max-width: 992px) {
.search-area .input-group button.btn {
padding: 2px;
}
}
.search-area span,
.search-area input {
border-radius: 0px;
}
.search-area .search-popular a {
margin-right: 10px;
margin-bottom: 10px;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 24px;
padding: 5px 20px 5px 20px;
/* identical to box height, or 150% */
color: #27272A;
border: 1px solid #d9d9d9;
border-radius: 20px;
}
.search-area .search-popular a:hover {
color: #FFf;
background-color: #FF7B14;
border: 1px solid #FF7B14;
}
.search-area .search-popular a.active {
color: #FFf;
background-color: #FF7B14;
border: 1px solid #FF7B14;
}
/*===========================
06. LOWONGAN css
===========================*/
.lowongan-area {
padding: 60px 0px 60px 0px;
background-color: #f0f0f0;
}
.lowongan-area .lowongan-main-title {
font-weight: bold;
font-size: 32px;
line-height: 44px;
display: flex;
align-items: center;
text-transform: capitalize;
color: #27272A;
}
.lowongan-area .lowongan-search-title {
font-style: normal;
font-weight: 700;
font-size: 28px;
line-height: 28px;
/* identical to box height, or 100% */
display: flex;
align-items: center;
color: #27272A;
}
.lowongan-area .lowongan-text {
font-style: italic;
font-weight: 500;
font-size: 12px;
line-height: 18px;
/* or 150% */
display: flex;
align-items: center;
color: #C4C4C4;
}
.lowongan-area .lowongan-title1 {
font-style: normal;
font-weight: bold;
font-size: 14px;
line-height: 20px;
align-items: center;
text-align: center;
letter-spacing: 0.02em;
text-transform: uppercase;
color: #27272A;
}
.lowongan-area .lowongan-content .lowongan-title2 {
font-style: normal;
font-weight: bold;
font-size: 12px;
line-height: 16px;
align-items: center;
text-align: center;
text-transform: uppercase;
color: #4272C4;
display: flex;
justify-content: center;
gap: 10px;
}
.lowongan-area .lowongan-content .lowongan-text1 p {
font-style: normal;
font-weight: 500;
font-size: 12px;
/* or 150% */
display: flex;
align-items: center;
color: #71717A;
}
.lowongan-area .lowongan-card {
background: #FFFFFF;
box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.1), 0px 2px 5px rgba(0, 0, 0, 0.04);
border: 0;
padding: 10px 20px 10px;
}
.lowongan-area .lowongan-btn1 {
color: #fff;
background-color: #FF7B14;
border-color: #FF7B14 !important;
border: 2px solid;
font-weight: bold;
font-size: 12px;
line-height: 12px;
letter-spacing: 0.12em;
margin-top: 5px;
margin-bottom: 5px;
padding: 10px 68px;
text-align: center;
text-transform: uppercase;
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
}
.lowongan-area .lowongan-btn1:hover {
color: #FFf;
background-color: #164687;
border-color: #164687 !important;
/* border: 2px solid; */
}
.lowongan-area .lowongan-btn2 {
color: #FF7B14;
background-color: transparent;
border-color: #FF7B14;
border: 2px solid;
font-weight: bold;
font-size: 12px;
line-height: 12px;
letter-spacing: 0.12em;
margin-top: 5px;
margin-bottom: 10px;
padding: 10px 64px;
text-align: center;
text-transform: uppercase;
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
}
.lowongan-area .lowongan-btn2:hover {
color: #fff;
background-color: #FF7B14;
border-color: #FF7B14;
}
.lowongan-area .lowongan-btn3 {
font-style: normal;
font-weight: bold;
font-size: 12px;
line-height: 15px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #27272A;
text-transform: uppercase;
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
}
.lowongan-area .lowongan-btn3:hover {
color: #FF7B14;
}
.lowongan-area nav .page-link {
color: #27272A;
border-radius: 50%;
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 15px;
/* identical to box height */
letter-spacing: 0.04em;
text-transform: uppercase;
margin: 5px;
background: transparent;
border-color: transparent;
}
.lowongan-area nav .page-item.active .page-link {
background: #FF7B14;
border-color: transparent;
}
.lowongan-area nav .page-link:focus {
outline: none !important;
box-shadow: none;
}
/*===========================
07. PELATIHAN css
===========================*/
.pelatihan-area {
padding: 60px 0px 60px 0px;
background-color: #164687;
}
.pelatihan-area .pelatihan-main-title {
font-style: normal;
font-weight: bold;
font-size: 32px;
line-height: 44px;
display: flex;
align-items: center;
text-transform: capitalize;
color: #E5E5E5;
}
.pelatihan-area .pelatihan-text {
font-style: italic;
font-weight: 500;
font-size: 12px;
line-height: 18px;
display: flex;
align-items: center;
}
.pelatihan-area .title-wrapper {
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
}
.pelatihan-area .pelatihan-title1 {
font-style: normal;
font-weight: bold;
font-size: 13px;
align-items: center;
text-align: center;
text-transform: uppercase;
color: #27272A;
}
.pelatihan-area .pelatihan-card {
background: #FFFFFF;
box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.1), 0px 2px 5px rgba(0, 0, 0, 0.04);
border: 0;
padding: 10px 20px 10px;
}
.pelatihan-area .pelatihan-btn1 {
color: #fff;
background-color: #FF7B14;
border-color: #FF7B14 !important;
border: 2px solid;
font-weight: bold;
font-size: 12px;
line-height: 12px;
letter-spacing: 0.12em;
margin-top: 5px;
margin-bottom: 5px;
padding: 10px 68px;
text-align: center;
text-transform: uppercase;
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
}
.pelatihan-area .pelatihan-btn1:hover {
color: #FFf;
background-color: #164687;
border-color: #164687 !important;
}
/*===========================
08. BERITA css
===========================*/
.berita-area {
padding: 60px 0px 60px 0px;
background-color: #f0f0f0;
}
@media (min-width: 600px) {
.hide-mobile {
display: none;
}
}
.berita-slide {
padding: 20px;
cursor: pointer;
background-color: #FFF;
}
.berita-slide .berita-img {
overflow: hidden;
}
.berita-slide .berita-img img {
min-height: 100%;
min-width: 100%;
width: auto;
height: auto;
margin: 0;
padding: 0;
/* filter: grayscale(100%); */
opacity: 0.9;
transform: scale(1.1, 1.1);
transition: all 0.3s ease-in-out 0s;
}
.berita-slide:hover .berita-img img {
transform: scale(1.2, 1.2);
/* filter: none; */
filter: grayscale(100%);
opacity: 1;
}
.berita-slide .berita-content {
/* padding: 20px; */
font-weight: 700;
position: relative;
}
.berita-slide .berita-date {
min-width: 28px;
min-height: 28px;
line-height: 28px;
text-align: center;
background: #4272C4;
position: absolute;
top: 20px;
}
.berita-slide .month {
display: block;
font-size: 12px;
font-weight: 700;
color: #fff;
padding: 0 10px;
background: #FF7B14;
text-transform: uppercase;
}
.berita-slide .date {
font-size: 14px;
color: #fff;
}
.berita-slide .berita-cate {
font-style: normal;
font-weight: 500;
font-size: 12px;
line-height: 12px;
letter-spacing: 0.02em;
text-transform: uppercase;
color: #000000;
margin: 15px 0px 5px 0px;
}
.berita-slide .berita-title {
font-style: normal;
font-weight: bold;
font-size: 18px;
line-height: normal;
color: #000000;
margin: 10px 0px 5px 0px;
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.berita-slide .berita-title a {
color: #27272A;
font-size: 14px;
text-transform: uppercase;
transition: all 0.50s ease 0s;
}
.berita-slide .berita-description-wrapper {
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
}
.berita-slide .berita-description {
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 24px;
color: #71717A;
margin: 15px 0px 5px 0px;
}
.berita-area .berita-main-title {
font-weight: bold;
font-size: 32px;
line-height: 44px;
display: flex;
align-items: center;
text-transform: capitalize;
color: #27272A;
}
.berita-area .berita-btn1 {
font-style: normal;
font-weight: bold;
font-size: 12px;
line-height: 15px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #27272A;
text-transform: uppercase;
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
}
.berita-area .berita-btn1:hover {
color: #FF7B14;
}
/*===========================
09. KONTAK css
===========================*/
.kontak-area {
padding: 60px 0px 20px 0px;
background-color: #164687;
height: 300px;
}
@media (max-width: 992px) {
.kontak-area {
height: auto;
}
}
.kontak-area .kontak-main-title {
font-style: normal;
font-weight: bold;
font-size: 40px;
line-height: 40px;
/* or 100% */
/* display: flex; */
align-items: center;
text-align: center;
text-transform: capitalize;
color: #FFFFFF;
}
.kontak-area .kontak-text {
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 24px;
/* identical to box height, or 150% */
text-align: center;
letter-spacing: 0.02em;
color: #FFFFFF;
}
.kontak-area .kontak-card-group {
width: 800px;
}
@media (max-width: 992px) {
.kontak-area .kontak-card-group {
width: auto;
}
}
.kontak-area .kontak-card {
background: #FFFFFF;
border: 0;
padding: 30px 10px 10px;
text-align: center !important;
/* width: 100px !important; */
}
.kontak-area .kontak-title1 {
font-style: normal;
font-weight: bold;
font-size: 12px;
line-height: 14px;
/* identical to box height, or 117% */
text-align: center;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #27272A;
}
.kontak-area .kontak-text1 {
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 22px;
align-items: center;
text-align: center;
color: #27272A;
}
/*===========================
10. MAP css
===========================*/
.map-area iframe {
width: 100%;
height: 550px;
}
.map-area.container {
padding-left: 0px !important;
padding-right: 0px !important;
}
@media (max-width: 767px) {
.map-area iframe {
height: 350px;
}
}
/*===========================
11. LINK css
===========================*/
.link-area {
padding: 60px 0px 60px 0px;
background-color: #f0f0f0;
}
.link-padding.container {
padding: 0px 50px 0px 50px;
}
.link-area .link-main-title {
font-style: normal;
font-weight: bold;
font-size: 12px;
line-height: 14px;
align-items: center;
text-align: center;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #27272A;
}
.link-area .link-image {
/* display: block; */
margin-left: auto;
margin-right: auto;
max-height: 95px;
width: auto;
}
/*===========================
12. FOOTER css
===========================*/
.footer-img {
width: 100%;
height: auto;
}
.footer-area {
padding: 60px 0px 30px 0px;
background-color: #164687;
}
.footer-area .footer-title {
font-style: normal;
font-weight: bold;
font-size: 18px;
line-height: 16px;
align-items: center;
color: #E5E5E5;
}
.footer-area .footer-card {
position: relative;
z-index: 2;
top: -65px;
border-radius: 0px !important;
z-index: 1;
border: o;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
.footer-area .footer-card {
top: -60px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.footer-area .footer-card {
top: -55px;
}
}
.footer-area .footer-card img {
padding: 15px;
}
.footer-area .footer-text {
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 24px;
align-items: center;
color: #FFFFFF;
bottom: 200px !important;
}
.footer-area .footer-hr1 {
border: 4px solid #FF7B14;
width: 40px;
position: relative;
z-index: 2;
}
.footer-area .footer-hr2 {
border: 2px solid #406392;
width: 243px;
position: absolute;
z-index: 1;
top: 18px;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
.footer-area .footer-hr2 {
width: 180px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.footer-area .footer-hr2 {
width: 140px;
}
}
.footer-area ul li a {
font-style: normal;
font-weight: normal;
font-size: 12px;
line-height: 16px;
/* or 133% */
letter-spacing: 0.02em;
color: #FFFFFF;
}
.footer-area ul li a:hover {
color: #FF7B14;
}
.footer-area .footer-main-title {
font-style: normal;
font-weight: bold;
font-size: 12px;
line-height: 14px;
align-items: center;
text-align: center;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #FFFFFF;
}
/*===========================
13. Scroll Back To Top
===========================*/
#totop {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: #FF7B14;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 50%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
}
#totop:hover {
color: #FF7B14;
background-color: #fff;
}
/*===========================
14. Preloader
===========================*/
.preloader {
/* Body Overlay */
position: fixed;
top: 0;
left: 0;
display: table;
height: 100%;
width: 100%;
/* Change Background Color */
background: #fff;
z-index: 99999;
}
.preloader .loader {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.preloader .loader .ytp-spinner {
position: absolute;
left: 50%;
top: 50%;
width: 64px;
margin-left: -32px;
z-index: 18;
pointer-events: none;
}
.preloader .loader .ytp-spinner .ytp-spinner-container {
pointer-events: none;
position: absolute;
width: 100%;
padding-bottom: 100%;
top: 50%;
left: 50%;
margin-top: -50%;
margin-left: -50%;
-webkit-animation: ytp-spinner-linspin 1568.23529647ms linear infinite;
-moz-animation: ytp-spinner-linspin 1568.23529647ms linear infinite;
-o-animation: ytp-spinner-linspin 1568.23529647ms linear infinite;
animation: ytp-spinner-linspin 1568.23529647ms linear infinite;
}
.preloader .loader .ytp-spinner .ytp-spinner-container .ytp-spinner-rotator {
position: absolute;
width: 100%;
height: 100%;
-webkit-animation: ytp-spinner-easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
-moz-animation: ytp-spinner-easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
-o-animation: ytp-spinner-easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
animation: ytp-spinner-easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
.preloader .loader .ytp-spinner .ytp-spinner-container .ytp-spinner-rotator .ytp-spinner-left {
position: absolute;
top: 0;
left: 0;
bottom: 0;
overflow: hidden;
right: 50%;
}
.preloader .loader .ytp-spinner .ytp-spinner-container .ytp-spinner-rotator .ytp-spinner-right {
position: absolute;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
left: 50%;
}
.preloader .loader .ytp-spinner-circle {
box-sizing: border-box;
position: absolute;
width: 200%;
height: 100%;
border-style: solid;
/* Spinner Color */
border-color: #164687 #164687 #e9ecef;
border-radius: 50%;
border-width: 6px;
}
.preloader .loader .ytp-spinner-left .ytp-spinner-circle {
left: 0;
right: -100%;
border-right-color: #e9ecef;
-webkit-animation: ytp-spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
-moz-animation: ytp-spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
-o-animation: ytp-spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
animation: ytp-spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
.preloader .loader .ytp-spinner-right .ytp-spinner-circle {
left: -100%;
right: 0;
border-left-color: #e9ecef;
-webkit-animation: ytp-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
-moz-animation: ytp-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
-o-animation: ytp-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
animation: ytp-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
/* Preloader Animations */
@-webkit-keyframes ytp-spinner-linspin {
to {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes ytp-spinner-linspin {
to {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes ytp-spinner-easespin {
12.5% {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
25% {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
37.5% {
-webkit-transform: rotate(405deg);
-moz-transform: rotate(405deg);
-ms-transform: rotate(405deg);
-o-transform: rotate(405deg);
transform: rotate(405deg);
}
50% {
-webkit-transform: rotate(540deg);
-moz-transform: rotate(540deg);
-ms-transform: rotate(540deg);
-o-transform: rotate(540deg);
transform: rotate(540deg);
}
62.5% {
-webkit-transform: rotate(675deg);
-moz-transform: rotate(675deg);
-ms-transform: rotate(675deg);
-o-transform: rotate(675deg);
transform: rotate(675deg);
}
75% {
-webkit-transform: rotate(810deg);
-moz-transform: rotate(810deg);
-ms-transform: rotate(810deg);
-o-transform: rotate(810deg);
transform: rotate(810deg);
}
87.5% {
-webkit-transform: rotate(945deg);
-moz-transform: rotate(945deg);
-ms-transform: rotate(945deg);
-o-transform: rotate(945deg);
transform: rotate(945deg);
}
to {
-webkit-transform: rotate(1080deg);
-moz-transform: rotate(1080deg);
-ms-transform: rotate(1080deg);
-o-transform: rotate(1080deg);
transform: rotate(1080deg);
}
}
@keyframes ytp-spinner-easespin {
12.5% {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
25% {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
37.5% {
-webkit-transform: rotate(405deg);
-moz-transform: rotate(405deg);
-ms-transform: rotate(405deg);
-o-transform: rotate(405deg);
transform: rotate(405deg);
}
50% {
-webkit-transform: rotate(540deg);
-moz-transform: rotate(540deg);
-ms-transform: rotate(540deg);
-o-transform: rotate(540deg);
transform: rotate(540deg);
}
62.5% {
-webkit-transform: rotate(675deg);
-moz-transform: rotate(675deg);
-ms-transform: rotate(675deg);
-o-transform: rotate(675deg);
transform: rotate(675deg);
}
75% {
-webkit-transform: rotate(810deg);
-moz-transform: rotate(810deg);
-ms-transform: rotate(810deg);
-o-transform: rotate(810deg);
transform: rotate(810deg);
}
87.5% {
-webkit-transform: rotate(945deg);
-moz-transform: rotate(945deg);
-ms-transform: rotate(945deg);
-o-transform: rotate(945deg);
transform: rotate(945deg);
}
to {
-webkit-transform: rotate(1080deg);
-moz-transform: rotate(1080deg);
-ms-transform: rotate(1080deg);
-o-transform: rotate(1080deg);
transform: rotate(1080deg);
}
}
@-webkit-keyframes ytp-spinner-left-spin {
0% {
-webkit-transform: rotate(130deg);
-moz-transform: rotate(130deg);
-ms-transform: rotate(130deg);
-o-transform: rotate(130deg);
transform: rotate(130deg);
}
50% {
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
transform: rotate(-5deg);
}
to {
-webkit-transform: rotate(130deg);
-moz-transform: rotate(130deg);
-ms-transform: rotate(130deg);
-o-transform: rotate(130deg);
transform: rotate(130deg);
}
}
@keyframes ytp-spinner-left-spin {
0% {
-webkit-transform: rotate(130deg);
-moz-transform: rotate(130deg);
-ms-transform: rotate(130deg);
-o-transform: rotate(130deg);
transform: rotate(130deg);
}
50% {
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
transform: rotate(-5deg);
}
to {
-webkit-transform: rotate(130deg);
-moz-transform: rotate(130deg);
-ms-transform: rotate(130deg);
-o-transform: rotate(130deg);
transform: rotate(130deg);
}
}
@-webkit-keyframes ytp-right-spin {
0% {
-webkit-transform: rotate(-130deg);
-moz-transform: rotate(-130deg);
-ms-transform: rotate(-130deg);
-o-transform: rotate(-130deg);
transform: rotate(-130deg);
}
50% {
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-ms-transform: rotate(5deg);
-o-transform: rotate(5deg);
transform: rotate(5deg);
}
to {
-webkit-transform: rotate(-130deg);
-moz-transform: rotate(-130deg);
-ms-transform: rotate(-130deg);
-o-transform: rotate(-130deg);
transform: rotate(-130deg);
}
}
@keyframes ytp-right-spin {
0% {
-webkit-transform: rotate(-130deg);
-moz-transform: rotate(-130deg);
-ms-transform: rotate(-130deg);
-o-transform: rotate(-130deg);
transform: rotate(-130deg);
}
50% {
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-ms-transform: rotate(5deg);
-o-transform: rotate(5deg);
transform: rotate(5deg);
}
to {
-webkit-transform: rotate(-130deg);
-moz-transform: rotate(-130deg);
-ms-transform: rotate(-130deg);
-o-transform: rotate(-130deg);
transform: rotate(-130deg);
}
}
/*===========================
15. Tugas Fungsi CSS
===========================*/
.tugasfungsi-area {
padding: 0px 0px 60px 0px;
background-color: #fff
}
@media only screen and (max-width: 768px) {
.tugasfungsi-area .col2 {
display: none;
}
}
.tugasfungsi-area .container {
z-index: 3;
position: relative;
top: -120px;
}
@media only screen and (max-width: 768px) {
.tugasfungsi-area .container {
z-index: 3;
position: relative;
top: auto;
}
}
.tugasfungsi-area img {
height: auto;
width: 100%;
}
.tugasfungsi-area ul li {
list-style: inside;
}
.tugasfungsi-area .tugasfungsi-title {
font-style: normal;
font-weight: bold;
font-size: 28px;
line-height: 36px;
/* identical to box height, or 129% */
display: flex;
align-items: center;
color: #27272A;
}
.tugasfungsi-area .tugasfungsi-subtitle {
font-style: normal;
font-weight: bold;
font-size: 18px;
line-height: 24px;
/* or 133% */
letter-spacing: 0.02em;
color: #27272A;
text-transform: uppercase;
margin-top: 40px;
}
.tugasfungsi-area .tugasfungsi-text {
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 24px;
/* or 133% */
letter-spacing: 0.02em;
color: #27272A;
}
/*===========================
16. Motto CSS
===========================*/
.motto-area {
padding: 60px 0px 60px 0px;
background: #FF7B14;
}
.motto-area .motto-title {
font-style: normal;
font-weight: bold;
font-size: 40px;
line-height: 44px;
/* identical to box height, or 110% */
text-align: center;
color: #FFFFFF;
}
.motto-area .motto-text {
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 24px;
/* or 150% */
text-align: center;
letter-spacing: 0.02em;
color: #FFFFFF;
margin-top: 20px;
}
.motto-area1 {
padding: 0px 120px 60px 120px;
background: #FFf;
}
@media only screen and (max-width: 576px) {
.motto-area1 {
padding: 0px 0px 60px 0px;
}
}
.motto-area1 .container {
z-index: 3;
position: relative;
top: -30px;
}
.motto-area1 .flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
}
.motto-area1 .space-evenly {
justify-content: space-evenly;
}
.motto-area1 .box-item {
background: #164687;
padding: 5px;
width: 60px;
height: auto;
line-height: 50px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
margin: auto;
}
.motto-area1 .motto-text {
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 24px;
/* identical to box height, or 150% */
text-align: center;
letter-spacing: 0.02em;
color: #27272A;
margin-top: 10px;
}
/*===========================
17. Dinas Bagian CSS
===========================*/
.dinasbagian-area {
height: 200px;
/* padding: 60px 0px 60px 0px; */
}
@media only screen and (max-width: 992px) {
.dinasbagian-area {
height: auto;
padding: 120px 0px 0px 0px;
}
}
.dinasbagian-area .card1,
.dinasbagian-area .card2 {
height: 250px;
z-index: 4;
position: relative;
top: -125px;
}
@media only screen and (min-width: 769px) and (max-width: 992px) {
.dinasbagian-area .card1,
.dinasbagian-area .card2 {
height: 250px;
position: static;
/* margin: 50px; */
margin-bottom: 80px;
margin-top: 80px;
}
}
@media only screen and (max-width: 768px) {
.dinasbagian-area .card1,
.dinasbagian-area .card2 {
height: 250px;
position: static;
/* margin: 50px; */
margin-bottom: 50px;
margin-top: 50px;
}
}
.dinasbagian-area .card1 {
background: #164687;
}
.dinasbagian-area .card2 {
background: #406392;
;
}
.dinasbagian-area img {
z-index: 3;
position: relative;
top: -150px;
height: 270px;
width: auto;
}
@media only screen and (min-width: 769px) and (max-width: 1200px) {
.dinasbagian-area img {
z-index: 3;
position: relative;
top: -150px;
height: 235px;
width: auto;
}
}
@media only screen and (max-width: 768px) {
.dinasbagian-area img {
z-index: 3;
position: relative;
top: -100px;
height: 200px;
width: auto;
}
}
.dinasbagian-area .card-body {
z-index: 3;
position: relative;
top: -150px;
}
@media only screen and (max-width: 768px) {
.dinasbagian-area .card-body {
z-index: 3;
position: relative;
top: -100px;
}
}
.dinasbagian-area .dinasbagian-title {
font-style: normal;
font-weight: bold;
font-size: 14px;
line-height: 14px;
/* identical to box height, or 100% */
text-align: center;
letter-spacing: 0.02em;
text-transform: uppercase;
color: #FFFFFF;
}
.dinasbagian-area .dinasbagian-text {
font-style: normal;
font-weight: 500;
font-size: 12px;
line-height: 18px;
/* or 150% */
text-align: center;
letter-spacing: 0.02em;
color: #FFFFFF;
}
/*===========================
18. Organisasi CSS
===========================*/
.organisasi-area {
padding: 60px 0px 60px 0px;
}
.organisasi-area .organisasi-title {
font-weight: bold;
font-size: 40px;
line-height: 44px;
display: flex;
align-items: center;
text-transform: capitalize;
color: #27272A;
}
.organisasi-area img {
width: 100%;
height: auto;
}
/*===========================
19. Kontak Form CSS
===========================*/
.kontakform-area {
padding: 60px 0px 60px 0px;
z-index: 3;
position: relative;
top: -170px;
height: 530px;
}
@media only screen and (max-width: 992px) {
.kontakform-area {
padding: 60px 0px 60px 0px;
/* position: static; */
top: auto;
height: auto;
}
}
.kontakform-area .col1,
.kontakform-area .col2 {
padding: 40px;
}
.kontakform-area .col1 {
background-color: #fff;
}
.kontakform-area .col2 {
background-color: #164687;
}
.kontakform-area input:focus,
.kontakform-area textarea:focus {
outline: none !important;
box-shadow: none;
color: #27272A;
}
.kontakform-area input,
.kontakform-area textarea {
outline: 0;
border-width: 0 0 1px;
border-color: #C4C4C4;
border-radius: 0px;
}
.kontakform-area .kontakform-title1 {
font-style: normal;
font-weight: bold;
font-size: 28px;
line-height: 28px;
/* identical to box height, or 100% */
display: flex;
align-items: center;
color: #164687;
}
.kontakform-area .kontakform-title2 {
font-style: normal;
font-weight: bold;
font-size: 28px;
line-height: 28px;
/* identical to box height, or 100% */
display: flex;
align-items: center;
color: #FFFFFF;
}
.kontakform-area .kontakform-text {
font-style: normal;
font-weight: normal;
font-size: 12px;
line-height: 1.6;
/* or 117% */
display: flex;
align-items: center;
letter-spacing: 0.02em;
color: #FFFFFF;
}
.kontakform-area .kontakform-text2 {
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 14px;
/* identical to box height, or 100% */
display: flex;
align-items: center;
letter-spacing: 0.02em;
color: #27272A;
}
.kontakform-area label {
font-style: normal;
font-weight: normal;
font-size: 12px;
line-height: 14px;
/* identical to box height, or 117% */
display: flex;
align-items: center;
letter-spacing: 0.02em;
color: #71717A;
}
.kontakform-area .button-border {
border-radius: 50%;
border: none;
background: #FF7B14;
}
.kontakform-area .button-border:hover {
background-color: #ff9014;
}
.kontakform-area .button-border i {
width: auto;
padding: 10px;
}
.kontakform-area .img-border {
border-radius: 50%;
background: #E5E5E5;
}
.kontakform-area .img-border img {
width: auto;
padding: 12px;
}
.kontakform-area iframe {
width: 100%;
height: auto;
}
/*===========================
20. Kontak Form CSS
===========================*/
.galeri-area {
padding: 60px 0px 60px 0px;
}
.dinasbagian-area .card1,
.dinasbagian-area .card2 {
height: 250px;
z-index: 4;
position: relative;
top: -125px;
}
@media only screen and (min-width: 769px) and (max-width: 992px) {
.dinasbagian-area .card1,
.dinasbagian-area .card2 {
height: 250px;
position: static;
/* margin: 50px; */
margin-bottom: 80px;
margin-top: 80px;
}
}
@media only screen and (max-width: 768px) {
.dinasbagian-area .card1,
.dinasbagian-area .card2 {
height: 250px;
position: static;
/* margin: 50px; */
margin-bottom: 50px;
margin-top: 50px;
}
}
.dinasbagian-area .card1 {
background: #164687;
}
.dinasbagian-area .card2 {
background: #406392;
;
}
.dinasbagian-area img {
z-index: 3;
position: relative;
top: -150px;
height: 270px;
width: auto;
}
@media only screen and (min-width: 769px) and (max-width: 1200px) {
.dinasbagian-area img {
z-index: 3;
position: relative;
top: -150px;
height: 235px;
width: auto;
}
}
@media only screen and (max-width: 768px) {
.dinasbagian-area img {
z-index: 3;
position: relative;
top: -100px;
height: 200px;
width: auto;
}
}
.dinasbagian-area .card-body {
z-index: 3;
position: relative;
top: -150px;
}
@media only screen and (max-width: 768px) {
.dinasbagian-area .card-body {
z-index: 3;
position: relative;
top: -100px;
}
}
.dinasbagian-area .dinasbagian-title {
font-style: normal;
font-weight: bold;
font-size: 14px;
line-height: 14px;
/* identical to box height, or 100% */
text-align: center;
letter-spacing: 0.02em;
text-transform: uppercase;
color: #FFFFFF;
}
.dinasbagian-area .dinasbagian-text {
font-style: normal;
font-weight: 500;
font-size: 12px;
line-height: 18px;
/* or 150% */
text-align: center;
letter-spacing: 0.02em;
color: #FFFFFF;
}
/*===========================
18. Organisasi CSS
===========================*/
.organisasi-area {
padding: 60px 0px 60px 0px;
}
.organisasi-area .organisasi-title {
font-weight: bold;
font-size: 40px;
line-height: 44px;
display: flex;
align-items: center;
text-transform: capitalize;
color: #27272A;
}
.organisasi-area img {
width: 100%;
height: auto;
}
/*===========================
19. Kontak Form CSS
===========================*/
.kontakform-area {
padding: 60px 0px 60px 0px;
z-index: 3;
position: relative;
top: -170px;
height: 530px;
}
@media only screen and (max-width: 992px) {
.kontakform-area {
padding: 60px 0px 60px 0px;
/* position: static; */
top: auto;
height: auto;
}
}
.kontakform-area .col1,
.kontakform-area .col2 {
padding: 40px;
}
.kontakform-area .col1 {
background-color: #fff;
}
.kontakform-area .col2 {
background-color: #164687;
}
.kontakform-area input:focus,
.kontakform-area textarea:focus {
outline: none !important;
box-shadow: none;
color: #27272A;
}
.kontakform-area input,
.kontakform-area textarea {
outline: 0;
border-width: 0 0 1px;
border-color: #C4C4C4;
border-radius: 0px;
}
.kontakform-area .kontakform-title1 {
font-style: normal;
font-weight: bold;
font-size: 28px;
line-height: 28px;
/* identical to box height, or 100% */
display: flex;
align-items: center;
color: #164687;
}
.kontakform-area .kontakform-title2 {
font-style: normal;
font-weight: bold;
font-size: 28px;
line-height: 28px;
/* identical to box height, or 100% */
display: flex;
align-items: center;
color: #FFFFFF;
}
.kontakform-area .kontakform-text {
font-style: normal;
font-weight: normal;
font-size: 12px;
line-height: 1.6;
/* or 117% */
display: flex;
align-items: center;
letter-spacing: 0.02em;
color: #FFFFFF;
}
.kontakform-area .kontakform-text2 {
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 14px;
/* identical to box height, or 100% */
display: flex;
align-items: center;
letter-spacing: 0.02em;
color: #27272A;
}
.kontakform-area label {
font-style: normal;
font-weight: normal;
font-size: 12px;
line-height: 14px;
/* identical to box height, or 117% */
display: flex;
align-items: center;
letter-spacing: 0.02em;
color: #71717A;
}
.kontakform-area .button-border {
border-radius: 50%;
border: none;
background: #FF7B14;
}
.kontakform-area .button-border:hover {
background-color: #ff9014;
}
.kontakform-area .button-border i {
width: auto;
padding: 10px;
}
.kontakform-area .img-border {
border-radius: 50%;
background: #E5E5E5;
}
.kontakform-area .img-border img {
width: auto;
padding: 12px;
}
.kontakform-area iframe {
width: 100%;
height: auto;
}
/*===========================
20. Galeri CSS
===========================*/
.galeri-area {
padding: 60px 0px 60px 0px;
}
.galeri-area .galeri-title {
font-style: normal;
font-weight: bold;
font-size: 35px;
line-height: 44px;
align-items: center;
text-align: center;
text-transform: capitalize;
color: #27272A;
}
.galeri-slide {
cursor: pointer;
}
.galeri-slide .galeri-img {
overflow: hidden;
}
.galeri-slide .galeri-img img {
height: 200px;
width: auto;
opacity: 0.9;
object-fit: cover;
transform: scale(1.1, 1.1);
transition: all 0.3s ease-in-out 0s;
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
.galeri-slide .galeri-img img {
height: 150px;
width: 100%;
}
}
@media only screen and (max-width: 767px) {
.galeri-slide .galeri-img img {
height: 375px;
width: 100%;
}
}
/* @media only screen and (max-width: 576px) {
.galeri-slide .galeri-img img {
height: 280px;
width: 100%;
}
} */
.galeri-slide:hover .galeri-img img {
transform: scale(1.2, 1.2);
/* filter: none; */
filter: grayscale(100%);
opacity: 1;
}
.galeri-area .galeri-text1 {
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 14px;
/* identical to box height, or 100% */
display: flex;
align-items: center;
letter-spacing: 0.02em;
color: #27272A;
}
.galeri-area .galeri-text2 {
font-style: normal;
font-weight: normal;
font-size: 12px;
line-height: 14px;
/* identical to box height, or 117% */
display: flex;
align-items: center;
letter-spacing: 0.02em;
color: #71717A;
}
.galeri-area .galeri-text3 {
font-style: normal;
font-weight: bold;
font-size: 12px;
line-height: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #FFFFFF;
background: #FF7B14;
border: 0px;
border-radius: 0px;
padding: 15px 20px;
}
.galeri-area .galeri-text3:hover {
background-color: #ff9014;
}
.galeri-area .btn-area button:focus {
outline: none !important;
box-shadow: none !important;
}
.galeri-area .galeri-backbtn {
font-style: normal;
font-weight: bold;
font-size: 12px;
line-height: 15px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #27272A;
text-transform: uppercase;
cursor: pointer;
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
}
.galeri-area .galeri-backbtn:hover {
color: #FF7B14;
}
/*===========================
21. Berita Detail CSS
===========================*/
.berita-detail-area {
padding: 60px 0px 60px 0px;
}
.berita-detail-area .beridet-title {
font-weight: bold;
font-size: 30px;
line-height: 44px;
text-transform: capitalize;
color: #27272A;
justify-content: center;
}
.berita-detail-area img {
width: 100%;
height: auto;
}
.berita-detail-area .beridet-subtitle-image {
font-weight: normal;
font-style: italic;
font-size: 12px;
line-height: 20px;
color: #27272A;
justify-content: center;
}
.berita-detail-area .beridet-text1 {
font-weight: bold;
font-size: 16px;
line-height: 20px;
/* color: #FF7B14; */
color: #164687;
justify-content: center;
}
.berita-detail-area .beridet-tag a {
margin-right: 15px;
margin-bottom: 15px;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 24px;
padding: 5px 10px;
color: #FF7B14;
border: 1px solid #FF7B14;
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
}
.berita-detail-area .beridet-tag a:hover {
color: #FFf;
background-color: #FF7B14;
}
.berita-detail-area .beridet-tag a.active {
color: #FFf;
background-color: #FF7B14;
}
/*===========================
Judul CSS
===========================*/
section.content {
background: white;
}
.page-title {
background-image: url("/assets/image/bg-judul.png"), linear-gradient(88.81deg, #164687 48.22%, #FF7B14 85.78%);
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.45);
}
.page-title h1 {
font-style: normal;
font-weight: 700;
font-size: 40px;
line-height: 40px;
padding: 55px;
color: #FFFFFF;
}
.produk-hukum {
cursor: pointer;
background-color: #164687;
color: #FFFFFF;
}
.list-file-produk-hukum {
margin-bottom: 10px;
}
.list-file-produk-hukum a:hover {
border: 1px solid #FF7B14;
color: #FF7B14;
}
/*===========================
21. Kepala Dinas Masa Ke Masa CSS
===========================*/
.kadinmasakemas {
padding: 60px 0px 60px 0px;
}
.kadinmasakemas .content {
width: 100%;
align-items: center;
padding-top: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #DEDEDE;
}
.kadinmasakemas .left {
text-align: center;
margin-bottom: 15px;
}
.kadinmasakemas .center {
text-align: center;
margin-bottom: 15px;
}
.kadinmasakemas .right {
display: flex;
justify-content: center;
margin-bottom: 15px;
}
.kadinmasakemas .right img {
width: 120px;
height: 180px;
}
/*===========================
21. Kekuatan personil CSS
===========================*/
.kekuatanpersonil {
padding: 60px 0px 60px 0px;
}
.kekuatanpersonil .card {
width: 100%;
height: 100%;
}
.kekuatanpersonil .card .card-body img {
width: 100%;
height: auto;
}
.kekuatanpersonil .card .card-body .card-title {
font-size: 15px;
font-weight: bold;
margin-top: 15px;
}
.kekuatanpersonil .card .card-body .card-text {
font-size: 14px;
}
/*===========================
21. Bidang Kerja CSS
===========================*/
.tugasdanfungsi .kepala-seksi img {
width: 140px;
height: 200px;
}
.tugasdanfungsi .kepala-seksi .nama {
font-size: 16px;
font-weight: bold;
text-align: center;
margin-top: 10px;
}
.tugasdanfungsi .kepala-seksi .jabatan {
font-size: 12px;
text-align: center;
}
.tugasdanfungsi .data-terkait .wrapper {
background-color: #164687;
padding-top: 20px;
padding-bottom: 20px;
}
.tugasdanfungsi .data-terkait .jumlah {
font-size: 40px;
text-align: center;
color: #FFFFFF;
margin-top: 10px;
}
.tugasdanfungsi .data-terkait .nama {
font-size: 15px;
font-weight: bold;
text-align: center;
color: #FFFFFF;
margin-top: 30px;
}
.tugasdanfungsi .info-pelatihan .judul {
font-size: 16px;
font-weight: bold;
margin-top: 10px;
}
.tugasdanfungsi .info-pelatihan .waktu {
font-size: 12px;
}