.post-div {
text-align: center;
font-size: 16pt;
color: #fff;
font-family: 'Barlow', sans-serif;
font-weight: 500;
}
post-title {
font-size: 60pt;
color: #fff;
font-family: 'Barlow', sans-serif;
font-weight: 500;
}
.content-post {
font-size: 16pt;
color: #282d3f;
font-family: 'Barlow', sans-serif;
font-weight: 500;
padding: 20px 0 10px 0;
}
search-title {
font-size: 38pt;
color: #fff;
font-family: 'Barlow', sans-serif;
font-weight: 400;
}
.hero-search {
padding: 20px 140px;
}
.hero-search p {
color: #fff;
margin-top: -10px;
}
.mt-100 {
margin-top: 10px
!important
}
p.search {
font-size: 18pt;
font-family: 'Barlow', sans-serif;
font-weight: 400;
margin:10px 0 40px 20px;
}
.searchCon {
border: none;
height: 71px;
background-color: #fff;
box-sizing: border-box;
width: 600px;
display: flex;
margin-bottom: 30px
}
.searchCon .searchKotak {
flex : 1; 
font-size: 14pt;
font-weight: 700;
border: none;
padding: 0 20px;
}
.button-search {
border: none;
background-color: #fff;
padding-right: 20px;}
i.search {
color: #5cb9ca;
font-size: 24pt;
} 
.dgwt-wcas-search-wrapp {
min-width: 150px;
}
ul.melist {
list-style-type: none;
padding: 0;
margin: 0;
}
li.melist {
float: left;
}
li.melist a {
display: block;
color: white;
text-align: left;
padding: 10px 60px 0 0;
text-decoration: none;
}
li.melist a:hover {
color: #0000ff;
}
.nav-ml-2 {
margin:0 0 0 20px;
}
.t-mobiles{margin:0}
.t-side {
font-size: 20pt;
font-weight: 600;
font-family: 'Barlow', sans-serif;
color: #5cb9ca;
margin-top:12px;
}
.ds-side {
font-size: 18pt;
font-weight: 400;
font-family: 'Barlow', sans-serif;
color: #858997;
border-bottom: 1px solid #eeeff3;
border-right: 1px solid #eeeff3;
padding: 10px 0;
}
.ds-side a{
color: #858997;
}
.ds-side a{
color: #858997;
}
div.under-side {
border-bottom: 2px solid #5cb9ca;
padding:9px 0 10px 0;
}
div.under-side-2 {
background:#5cb9ca;
height: 2px;
width: 75px;
margin:10px 0 10px 20px;
}
.konten-service {
font-size: 14pt;
color: #2d2d2d;
line-height: 1.6;
padding: 20px;
}
.gambar-service {
padding: 100px 0;
}
.fff-service {
background: #fff;
padding: 50px 0;
}
div.under-side-3 {
background:#5cb9ca;
height: 2px;
width: 75px;
margin: 10px 0 30px 0;
}
.bio {
background: #1f2839
}
.h-bio {
font-family: 'Barlow', sans-serif;
color: #5cb9ca;
padding: 180px 120px 120px 120px;
font-size: 20pt;
font-weight: 400;
letter-spacing: 4px;
}
.bio-icon {
width: 40px;
height: auto;
margin-top: 20px;
margin-right: 10px;
}
.bio-foto {
background: #fff;
border: 1px solid #1f2839;
width: 400px;
height: 400px;
float: right;
margin-right: 20px;
margin-top: -300px
}
.t-bio {
padding: 40px 20px;
}
.back-text {
font-family: 'Barlow', sans-serif;
font-size: 80pt;
font-weight: 700;
color: #f3f3f4;
}
.font-text {
font-family: 'Barlow', sans-serif;
font-size:35pt;
color: #1f2839;
font-weight: 800;
margin-left: 160px;
margin-top: -110px;
letter-spacing: 2px;
}
.bio-content {
padding: 30px 0;
background: #fff;
}
.j-bio {
color: #1f2839;
font-weight: 800;
}
.side-bio {
font-family: 'Barlow', sans-serif;
background: #e2e2e2;
font-size: 14;
color: #282d3f;
padding: 20px;
margin-bottom: 30px;
}
.side-bio p {
font-family: 'Barlow', sans-serif;
font-size: 14;
color: #282d3f;
font-weight: 500;
line-height: 1.5;
}
a.bio-link:link{
color: #282d3f;
}
a.bio-link:hover{
color: #0e3ce2;
}
.bio-img {
margin-top: auto;
margin-bottom: auto;
}
div.kontak-bio {
background: #22313f;
width: 80%;
margin: auto;
margin-top: 40px;
padding: 20px 40px 10px 40px;
border-radius: 12px;
}
.tt-kontak-bio {
width: 80%;
margin:auto;
font-family: 'Barlow', sans-serif;
font-size: 80pt;
font-weight: 900;
color: #2e3c49;
text-align: center;
}
.des-kontak-bio {
width: 80%;
margin:auto;
font-family: 'Barlow', sans-serif;
font-size: 30pt;
font-weight: 700;
color: #ffffff;
text-align: center;
margin-top: -105px;
}
.side-kontak-bio {
padding: 120px 60px 0 20px;
color: #fff;
font-size: 16pt;
font-weight: 500;
}
.bio-kontak-form {
padding-top: 60px;
}
.bio-icon-2 {
width: 40px;
height: auto;
margin: 10px;
}

.bio-input {padding:4px 15px;display:block;border:none;width:100%;background:#46525d;font-size:14px;color:#fff;}
input[type=text].bio-input:focus{background:#46525d;font-size:14px;color:#fff;outline:none}
::placeholder { 
font-family: 'Barlow', sans-serif;
color: #fff;
opacity: 1;
font-weight: 300;
}
.bio-button {padding:15px 50px;display:block;border:none;background:#5cb9ca;font-size:14px;color:#fff;margin:auto}
.sosmed-bio {
text-align: center;
margin:auto;
padding: 40px;
}
img.utama {
width: 100%;
height: 500px;
object-fit: cover;
}

.side-mobile {
padding-left: 0px;
margin-top: -18px
}

.share-mad {
position: relative;
margin-top: 40px;
padding: 40px 0;
}
.menu {
z-index: 10;
position: absolute;
padding: 0;
margin: 0;
list-style-type: none;
}
.menu .share i.fa {
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
background-color: #f5f5f5;
border-radius: 2px
!important
}

.menu .share:hover.bottom .submenu li:nth-child(1) {
opacity: 1;
top: 50px;
transform: rotate(0deg);
border-top: 1px dashed #cccccc;
transition-delay: 0.08s;
}
.menu .share:hover.bottom .submenu li:nth-child(2) {
opacity: 1;
top: 100px;
transform: rotate(0deg);
border-top: 1px dashed #cccccc;
transition-delay: 0.16s;
}
.menu .share:hover.bottom .submenu li:nth-child(3) {
opacity: 1;
top: 150px;
transform: rotate(0deg);
border-top: 1px dashed #cccccc;
transition-delay: 0.24s;
}
.menu .share:hover.bottom .submenu li:nth-child(4) {
opacity: 1;
top: 200px;
transform: rotate(0deg);
border-top: 1px dashed #cccccc;
transition-delay: 0.32s;
}
.menu .share:hover.bottom .submenu li:nth-child(5) {
opacity: 1;
top: 250px;
transform: rotate(0deg);
border-top: 1px dashed #cccccc;
transition-delay: 0.4s;
}
.menu .share:hover.left .submenu li:nth-child(1) {
opacity: 1;
left: -51px;
transform: rotate(0deg);
transition-delay: 0.5s;
border-right: 1px dashed #cccccc;
}
.menu .share:hover.left .submenu li:nth-child(2) {
opacity: 1;
left: -102px;
transform: rotate(0deg);
transition-delay: 1s;
border-right: 1px dashed #cccccc;
}
.menu .share:hover.left .submenu li:nth-child(3) {
opacity: 1;
left: -153px;
transform: rotate(0deg);
transition-delay: 1.5s;
border-right: 1px dashed #cccccc;
}
.menu .share:hover.left .submenu li:nth-child(4) {
opacity: 1;
left: -204px;
transform: rotate(0deg);
transition-delay: 2s;
border-right: 1px dashed #cccccc;
}
.menu .share:hover.left .submenu li:nth-child(5) {
opacity: 1;
left: -255px;
transform: rotate(0deg);
transition-delay: 2.5s;
border-right: 1px dashed #cccccc;
}
.menu .share:hover.right .submenu li:nth-child(1) {
opacity: 1;
left: 50px;
transform: rotate(0deg);
transition-delay: 0.08s;
border-left: 1px dashed #cccccc;
}
.menu .share:hover.right .submenu li:nth-child(2) {
opacity: 1;
left: 100px;
transform: rotate(0deg);
transition-delay: 0.16s;
border-left: 1px dashed #cccccc;
}
.menu .share:hover.right .submenu li:nth-child(3) {
opacity: 1;
left: 150px;
transform: rotate(0deg);
transition-delay: 0.24s;
border-left: 1px dashed #cccccc;
}
.menu .share:hover.right .submenu li:nth-child(4) {
opacity: 1;
left: 200px;
transform: rotate(0deg);
transition-delay: 0.32s;
border-left: 1px dashed #cccccc;
}
.menu .share:hover.right .submenu li:nth-child(5) {
opacity: 1;
left: 250px;
transform: rotate(0deg);
transition-delay: 0.4s;
border-left: 1px dashed #cccccc;
}
.menu .share:hover.right .submenu li:nth-child(6) {
opacity: 1;
left: 300px;
transform: rotate(0deg);
transition-delay: 0.48s;
border-left: 1px dashed #cccccc;
}
.menu .share:hover.right .submenu li:nth-child(7) {
opacity: 1;
left: 350px;
transform: rotate(0deg);
transition-delay: 0.56s;
border-left: 1px dashed #cccccc;
}
.menu .share:hover.right .submenu li:nth-child(8) {
opacity: 1;
left: 400px;
transform: rotate(0deg);
transition-delay: 0.64s;
border-left: 1px dashed #cccccc;
}
.menu .share:hover.top .submenu li:nth-child(1) {
opacity: 1;
top: -51px;
transition-delay: 0.08s;
transform: rotateY(0deg);
border-bottom: 1px dashed #d9d9d9;
}
.menu .share:hover.top .submenu li:nth-child(2) {
opacity: 1;
top: -102px;
transition-delay: 0.16s;
transform: rotateY(0deg);
border-bottom: 1px dashed #d9d9d9;
}
.menu .share:hover.top .submenu li:nth-child(3) {
opacity: 1;
top: -153px;
transition-delay: 0.24s;
transform: rotateY(0deg);
border-bottom: 1px dashed #d9d9d9;
}
.menu .share:hover.top .submenu li:nth-child(4) {
opacity: 1;
top: -204px;
transition-delay: 0.32s;
transform: rotateY(0deg);
border-bottom: 1px dashed #d9d9d9;
}
.menu .share:hover.top .submenu li:nth-child(5) {
opacity: 1;
top: -301px;
transition-delay: 0.4s;
transform: rotateY(0deg);
border-bottom: 1px dashed #d9d9d9;
}
.menu .share:hover.top .submenu li:nth-child(6) {
opacity: 1;
top: -255px;
transition-delay: 0.4s;
transform: rotateY(0deg);
border-bottom: 1px dashed #d9d9d9;
}
.menu .submenu {
list-style-type: none;
padding: 0;
margin: 0;
}
.menu .submenu li {
transition: all ease-in-out 0.5s;
position: absolute;
top: 0;
left: 0;
z-index: -1;
opacity: 0;
}
.menu .submenu li a {
color: #212121;
}
.menu .submenu li a:hover i.fa {
color: #fff;
}
.menu .submenu li a:hover.facebook i.fa {
background-color: #3b5999;
}
.menu .submenu li a:hover.twitter i.fa {
background-color: #55acee;
}
.menu .submenu li a:hover.googlePlus i.fa {
background-color: #dd4b39;
}
.menu .submenu li a:hover.pinterest i.fa {
background-color: #E60023;
}
.menu .submenu li a:hover.linkedin i.fa {
background-color: #0e76a8;
}
.menu .submenu li a:hover.whatsapp i.fa {
background-color: #34B7F1;
}
.menu .submenu li:nth-child(1) {
transform: rotateX(45deg);
}
.menu .submenu li:nth-child(2) {
transform: rotateX(90deg);
}
.menu .submenu li:nth-child(3) {
transform: rotateX(135deg);
}
.menu .submenu li:nth-child(4) {
transform: rotateX(180deg);
}
.menu .submenu li:nth-child(5) {
transform: rotateX(225deg);
}
.menu .submenu li:nth-child(6) {
transform: rotateX(270deg);
}
.menu.topLeft {
top: 10px;
left: 10px;
}
.menu.topRight {
top: 10px;
right: 10px;
}
.menu.bottomLeft {
bottom: 10px;
left: 10px;
}
.menu.bottomRight {
bottom: 10px;
right: 10px;
}
.blog-konten p{
margin-bottom: 30px;
}


@media (max-width: 1399px) {
post-title {
font-size: 50pt;
}
search-title {
font-size: 36pt;
}
.hero-search {
padding: 0 140px;
}
.t-side {
font-size: 18pt;
}
.ds-side {
font-size: 16pt;
}
.konten-service {
font-size: 12pt;
}
div.under-side {
padding: 9px 0 10px 0;
}

.side-mobile {
padding-left: 0px;
margin-top: -19px
}
}
@media (max-width: 1199px) {
post-title {
font-size: 48pt;
}
search-title {
font-size: 28pt;
}
.hero-search {
padding: 0 140px;
}
.t-side {
padding-top: 8px;
font-size: 14pt;
}
.ds-side {
font-size: 12pt;
}
.konten-service {
font-size: 12pt;
}
.gambar-service {
padding: 100px 0;
}
.bio-foto {
width: 380px;
height: 380px;
margin-right: 0;
margin-top: -300px
}
.t-bio {
padding: 40px 20px;
}
.back-text {
font-size: 55pt;
}
.font-text {
font-size: 25pt;
margin-left: 110px;
margin-top: -80px;
}
div.under-side {
padding:13px 0 10px 0;
}
.side-mobile {
padding-left: 0px;
margin-top: -15px
}

}

@media (max-width: 991px) {
.post-div {
font-size: 14pt;
}
search-title {
font-size: 24pt;
}
.hero-search {
padding: 0 10px;
}
.t-side {
font-size: 14pt;
margin-top: 5px;
padding-top: 0;
font-size: 16pt;
}
.konten-service {
font-size: 12pt;
}
.gambar-service {
padding: 50px 0;
}
.h-bio {
padding: 140px 10px 100px 10px;
font-size: 18pt;
font-weight: 400;
letter-spacing: 4px;
}
.bio-icon {
width: 30px;
height: auto;
margin-top: 20px;
}
.bio-foto {
width: 300px;
height: 300px;
margin-right: 0;
margin-top: -200px
}
.t-bio {
padding: 40px 20px;
}
.back-text {
font-size: 44pt;
}
.font-text {
font-size: 20pt;
margin-left: 85px;
margin-top: -65px;
}
.md-none {
display: none;
}
div.kontak-bio {
width: 90%;
}
.tt-kontak-bio {
width: 100%;
font-size: 70pt;
}
.des-kontak-bio {
width: 100%;
font-size: 24pt;
margin-top: -95px;
}
.bio-kontak-form {
 padding-top: 60px;
}
.side-kontak-bio {
padding: 80px 60px 0 20px;
} 
.bio-icon-2 {
width: 30px;
margin: 5px;
}
div.under-side {
padding:13px 0 10px 0;
}

.bio-button {padding:10px 45px;display:block;border:none;background:#5cb9ca;font-size:14px;color:#fff;margin:auto}

}

@media (max-width: 767px) {
.searchCon {
height: 60px;
width: 500px;
}
.side-mobile {
padding-left: 20px;
margin-top: 0;
margin-bottom: 40px
}
li.melist a {
text-align: left;
padding: 10px 20px 0 0;
font-size: 12px
}

}

@media (max-width: 575px) {
post-title {
font-size: 28pt;
}
.post-div {
font-size: 10pt;
}
search-title {
font-size: 20pt;
}	
.searchCon {
width: 220px
!important
}
li.melist a {
display: block;
color: white;
text-align: left;
padding: 10px 10px 0 0;
text-decoration: none;
font-size: 10px
}
.konten-service {
font-size: 10pt;
padding: 0;
}
.t-side {
font-size: 12pt;
margin-top: 8px;
}
.ds-side {
font-size: 10pt;
padding: 6px 0;
}
.nav-ml-2 {
margin: 0;
}
.t-mobiles{margin:20px}
div.under-side {
padding: 6px 0;
}
div.under-side-2 {
margin: 10px 0;
}
.gambar-service {
padding: 20px 0;
}
.h-bio {
padding: 140px 10px 100px 10px;
font-size: 18pt;
font-weight: 400;
letter-spacing: 4px;
}
.bio-icon {
width: 30px;
height: auto;
margin-top: 20px;
}
.bio-foto {
width: 150px;
height: 150px;
margin-right: 0;
margin-top: -120px;
margin-bottom: 10px
}
.t-bio {
padding: 40px 20px;
}
.back-text {
font-size: 34pt;
}
.font-text {
font-size: 18pt;
margin-left: 70px;
margin-top: -52px;
}
div.kontak-bio {
width: 98%;
}
.tt-kontak-bio {
width: 100%;
font-size: 34pt;
}
.des-kontak-bio {
width: 100%;
font-size: 14pt;
margin-top: -50px;
}
.bio-kontak-form {
padding-top: 60px;
}
.side-kontak-bio {
padding: 30px 10px 0 10px;
font-size: 12pt;
} 
.bio-input {font-size:10px;}

.side-mobile {
padding-left: 0px;
margin-top: 0;
margin-bottom: 30px
}
.bio-button {padding:8px 40px;display:block;border:none;background:#5cb9ca;font-size:14px;color:#fff;margin:auto}

.menu .share i.fa {
height: 35px;
width: 35px;
line-height: 35px;
}

.menu .share:hover.right .submenu li:nth-child(1) {
left: 35px;
}
.menu .share:hover.right .submenu li:nth-child(2) {
left: 70px;
}
.menu .share:hover.right .submenu li:nth-child(3) {
left: 105px;
}
.menu .share:hover.right .submenu li:nth-child(4) {
left: 140px;
}
.menu .share:hover.right .submenu li:nth-child(5) {
left: 175px;
}
.menu .share:hover.right .submenu li:nth-child(6) {
opacity: 1;
left: 210px;
}
.menu .share:hover.right .submenu li:nth-child(7) {
opacity: 1;
left: 245px;
}
.menu .share:hover.right .submenu li:nth-child(8) {
opacity: 1;
left: 280px;
}


}

@media (max-width: 329px) {
search-title {
font-size: 18pt;
}
.back-text {
font-size: 28pt;
}
.font-text {
font-size: 16pt;
margin-left: 45px;
margin-top: -45px;
}
.tt-kontak-bio {width: 100%;font-size: 28pt;}
.bio-icon-2 {
width: 20px;
margin: 1px;
}
div.kontak-bio {
width: 100%;
margin: auto;
margin-top: 40px;
padding: 20px 5px 1px 5px;
border-radius: 12px;
}

}