.bg-vanderfox{background-color:#5cb9ca!important}
.bg-about{background-color:#ebebeb!important}
.bg-seken{background-color:#5CB9CA!important}
.buto{display:inline-block;padding:2px 20px;color:#fff;text-align:center;margin-left:40px;white-space:nowrap;vertical-align:baseline;border-radius:8px!important}
.buton{display:inline-block;padding:10px 18px;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:8px;font-size:14pt;font-family: 'Barlow', sans-serif;color: #5fbacb}
.nav-sp {
margin-left: 40px;
}
.banner-foot {
background: #415c7b;
color: #fff;
font-family: 'Barlow', sans-serif;
padding: 100px;
text-align: center;
}
a.buton-putih-home {
color: #fff;
padding: 12px 25px;
background: #5CB9CA;
font-weight: 500;
}
a.buton-putih-home:hover {
color: #fff
!important
}
.l-100 {
width: 90%;
margin:auto
}
.navbar .nav-link {
display: none;
}
.navbar.nav-sticky .nav-link {
display: inline-block
}
.cari {
color: #5cb9ca;
font-size: 30px
!important
}
input[type=text]:focus {
outline: none;
background-color:#fff;
}
.headbar {
padding: 70px;
}
.hamb {
border-right:1px solid #fff;
height:50px;
margin: 20px 10px 0 0;
padding:0px 20px;
margin-right: 30px
}
.vanderfox {
padding-right: 230px;
z-index: 999;
}
.searchBox {
padding: 10px 10px 10px 60px;
color: #606060;
font-weight: 500;
font-family: 'Barlow', sans-serif;
}
.searchBarContainer {
border: none;
height: 71px;
background-color: #fff;
box-sizing: border-box;
width: 100%;
display: flex;
}
.searchBarContainer .searchBox {
flex : 1; 
font-size: 14pt;
font-weight: 500;
font-family: 'Barlow', sans-serif;
border: none;
}
.searchBox::placeholder  {
color:#606060;
font-weight: 500;
}
.btn-search {
border: none;
background-color: #fff;
padding-right: 40px;}

.m-menu__checkbox {
display: none;
}
label.m-menu__toggle {
cursor: pointer;
}
.m-menu {
position: absolute;
top: 0;
left: 0;
max-width: 100%;
width: calc(100vw);
height: 600px;
-moz-transform: translate3d(-200%, 0, 0);
-o-transform: translate3d(-200%, 0, 0);
-ms-transform: translate3d(-200%, 0, 0);
-webkit-transform: translate3d(-200%, 0, 0);
transform: translate3d(-200%, 0, 0);
-moz-transition: transform 0;
-o-transition: transform 0;
-webkit-transition: transform 0;
transition: transform 0;
overflow: hidden;
background-color: #28353e;
transition: all 0.8s;
}
.m-menu__checkbox:not(:checked) ~ .m-menu {
animation: mymenu 2s linear 0s 1 normal forwards;
opacity: 0;
margin-top: -100%;
}
@keyframes mymenu {
	0% {
		opacity: 1;
		transform: rotateX(0deg);
		transform-origin: top;
	}

	100% {
		opacity: 0;
		transform: rotateX(-100deg);
		transform-origin: top;
	}
}
@keyframes menu-ani {
	0% {
		opacity: 0;
		transform: rotateX(-100deg);
		transform-origin: top;
	}

	100% {
		opacity: 1;
		transform: rotateX(0deg);
		transform-origin: top;
	}
}
.m-menu .menu-1 {
max-width: 40%;
width: calc(100vw);
height: 600px;
background-color: #28353e;
}
.m-menu__overlay {
position: absolute;
top: 0;
width: 40%;
bottom: 0;
z-index: 1;
display: none;
}
.m-menu__header {
padding: 1px 16px;
margin-bottom: 60px;
height: 71px;
display: -ms-flexbox;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-around;
justify-content: space-around;
-ms-flex-pack: space-around;
-webkit-align-items: center;
align-items: center;
border-bottom: 1px solid #fff;
}
.m-menu__header span {
font-size: 1.2rem;
font-weight: 500;
font-family: 'Barlow', sans-serif;
color: #fff;
padding-left:80px;
text-align: left;
width: 100%;
}
.menu-1 .menu-1 {
-moz-transform: translate3d(200%, 0, 0);
-o-transform: translate3d(200%, 0, 0);
-ms-transform: translate3d(200%, 0, 0);
-webkit-transform: translate3d(200%, 0, 0);
transform: translate3d(200%, 0, 0);
}
.m-menu ul {
height: 100%;
overflow-y: auto;
list-style: none;
}
.m-menu ul li a, nav .m-menu ul li button {
display: block;
text-align: left;
padding: 0 15px;
line-height: 2;
padding: 50px 0 0 80px;
text-decoration: none;
color: #fff;
cursor: pointer;
list-style: none;
font-size: 14pt;
font-family: 'Barlow', sans-serif;
font-weight: 500;
border-bottom: 0px solid #e8e8e8;
position: relative;
}
.m-menu ul li button.a-label__chevron::after {
content: "";
position: absolute;
display: inline-block;
height: 15px;
width: 15px;
list-style: none;
border-color: #fff;
border-style: solid;
border-width: 2px 2px 0 0;
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
top: 50%;
margin-top: 20px;
right: -200px;
}
.m-menu ul li .-invisible {
border-bottom: 0;
list-style: none;
}
.m-menu .m-menu label.m-menu__toggle {
display: -ms-flexbox;
display: -webkit-box;
display: -webkit-flex;
display: flex;
border-bottom: 0;
padding: 0;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.m-menu__checkbox:checked ~ .m-menu__overlay {
display: block;
}

.m-menu__checkbox:checked ~ .m-menu {
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
animation: menu-ani 1s linear 0s 0.2s normal forwards;
display: block;
z-index: 10000;
}

.judul {
border-bottom: 1px solid #141414;
}
.judul-text {
font-family: 'Barlow', sans-serif;
font-size: 14pt;
font-weight: 700;
line-height: 1;
}

a.judul-link, .konten-home li a {
font-family: 'Barlow', sans-serif;
color: #606060;
font-size: 14pt;
font-weight: 500;
line-height: 2;
}
a.judul-link:hover, .konten-home li a:hover {
color: #5cb9ca;
}

a.judul-link-x {
font-family: 'Barlow', sans-serif;
color: #606060;
font-size: 14pt;
font-weight: 700;
line-height: 0.5;
}
a.judul-link-x:hover {
color: #5cb9ca;
}

.konten-home {
padding: 20px 0;
}

.hero-text {
color: #fff;
font-family: 'Barlow', sans-serif;
font-size: 80pt;
font-weight: 500;
}

.hero-div {
margin-bottom:300px;
} 

.kolom-div {
background: #222222;
color: #fff;
}
.kolom-div-2 {
background: #f0f0f0;
color: #566986;
padding: 60px 0;
margin-top: -10px
}
.kol-1 {
padding: 30px 20px;
}
.kol-2 {
border-right: 3px solid #fff;
border-left: 3px solid #fff;
}
 .kolo{
font-size: 18pt;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
border-bottom: 1px solid #fff;
width: 50%;
}
 .kolo2 {
font-size: 14pt;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
}
.btn-text {
font-size: 30pt
!important;
background-color: #5CB9CA;
padding: 15px 30px;
color: #fff
!important;
font-weight: 700;
}
.btn-text:hover {
color: #fff
!important;
}
.t-about {
font-size: 36pt;
font-family: 'Barlow', sans-serif;
font-weight: 500;
color: #fff;
line-height: 1;
text-align: center;
}
.t-about2 {
font-size: 20pt;
font-family: 'Barlow', sans-serif;
font-weight: 400;
color: #435879;
text-align: center;
}
.mr-5 {
padding-right: 80px;
}
.pad-1 {
padding: 80px 0;
}
.pad-2 {
padding: 10px 0 80px 0;
}
 .t-tax {
font-size: 22pt;
font-family: 'Barlow', sans-serif;
font-weight: 400;
color: #435879;
}
 .title-tax {
font-size: 18pt;
font-family: 'Barlow', sans-serif;
font-weight: 700;
color: #435879;
line-height:1;
}
 .t2-tax {
font-size: 14pt;
font-family: 'Barlow', sans-serif;
font-weight: 400;
color: #435879;
}
.part {
background: #1f2839;
padding: 100px;
color: #fff;
}
 .t-part {
font-size: 20pt;
font-family: 'Barlow', sans-serif;
font-weight: 400;
color: #41798b;
}
 .t1-part {
font-size: 40pt;
font-family: 'Playfair Display', serif;
font-weight: 700;
color: #41798b;
}
 .t2-part {
font-size: 16pt;
font-family: 'Barlow', sans-serif;
font-weight: 400;
color: #909294;
margin-top: 20px;
border-bottom: 1px solid #909294;
}
.j-text {
font-size: 18pt;
font-family: 'Barlow', sans-serif;
font-weight: 500;
}
i.ikon {
font-size: 16pt;
margin-right: 10px;
}
i.ikon2 {
font-size: 50pt;
color: #456c88;
}

ul.foo {
list-style-type: none;
padding: 0;
margin: 0;
line-height: 1.4
}
ul.foo li {
margin-bottom: 10px;
}
.hamburger {
padding-bottom: 38px
!important
}
.dropdown-menu .nav-spa {
margin-left: 5px
!important;
margin-bottom: 0
!important;
color: #435879
!important
}
.dropdown-menu .nav-item {
margin: 0
!important;
padding: 0
!important
}
.dropdown-menu .nav-link {
color: #435879
!important;
margin: 0;
}
.konten-home li {
list-style: none
!important
}
.nav-spa {
margin-left:20px;
}
.copyright {
background: #161d2d;
padding: 40px;
text-align: center;
color: #fff;
font-size: 14px;
font-family: 'Barlow', sans-serif;
font-weight: 300;
}
a.cprg{
color: #fff;
}
a.cprg:hover{
color: #8b8f98;
}
.foot {
background: #1f2839;
padding: 40px 0;
color: #fff;
font-family: 'Barlow', sans-serif;
font-size: 14pt;
}
.date {
 color: #8b8f98;
 font-size: 8pt;
}
.date-insights{
color: #808080;
font-size: 10pt;
margin-bottom:10px
}
.date-insights-2{
color: #808080;
font-size: 10pt;
}
.thumb { 
object-fit: cover;
width: 70px;
height: 70px;
}

a.t-text{
color: #fff;
font-family: 'Barlow', sans-serif;
font-size: 14pt;
}
a.t-text:hover{
color: #8b8f98;
}
.desk {
font-size: 10pt;
font-weight: 300
}
.collab {
padding: 80px 0 20px 0;
font-family: 'Barlow', sans-serif;
}
.our-team {
text-align: center;
padding: 40px 0;
color: #fff;
font-size: 24pt;
font-family: 'Barlow', sans-serif;
line-height: 1.4;
}
.our-team h2 {
font-size: 38pt;
}
.our-team span{
color: #5cb9ca;
}
.our-team a{
color: #ffff;
padding: 25px;
border: 1px solid #fff;
}
.our-team a:hover{
color: #5cb9ca;
background: #fff;
}
.team-konten {
text-align: center;
font-family: 'Barlow', sans-serif;
color: #1b1d35;
padding: 40px 0;
font-size: 18pt;
font-weight: 700;
line-height: 1;
}
.team-konten h3{
font-size: 40pt;
font-weight: 400;
line-height: 2;
}
.team-konten span{
font-size: 14pt;
font-weight: 400;
color: #9e9ea9;
}
.w-100 .title-hero{
color: #fff;
margin-top: -680px;
padding-bottom: 400px;
text-align: center;
font-size: 80pt;
text-shadow: 1px 1px 1px rgb(0, 0, 0, 0.4);
font-family: 'Barlow', sans-serif
!important
}
.foto-team {
text-align: center;
padding: 80px 0 0 0;
}
.bingkai {
border-left: 1px solid #cecece;
border-right: 1px solid #cecece;
}
.brighten:nth-child(2), .brighten:nth-child(5), .brighten:nth-child(8), .brighten:nth-child(11),
.brighten:nth-child(14), .brighten:nth-child(17), .brighten:nth-child(20), .brighten:nth-child(23),
.brighten:nth-child(26), .brighten:nth-child(29), .brighten:nth-child(31), .brighten:nth-child(34),
.brighten:nth-child(37), .brighten:nth-child(40), .brighten:nth-child(43), .brighten:nth-child(46) {
border-left: 1px solid #cecece;
border-right: 1px solid #cecece;
}
.des-team {
text-align: left;
padding: 10px 0;
}
.our-tema-quote {
padding: 30px 0 30px 0;
background: #1a2333;
font-family: 'Open Sans', sans-serif;
color: #fff;
text-align: center;
font-weight: 300;
line-height: 2;
}
.our-tema-quote h4{
font-size: 28pt;
color: #fff;
font-weight: 500;
line-height: 2;
}
.our-tema-quote h5{
font-size: 18pt;
color: #5ebecf;
font-weight: 700;
line-height: 2;
font-style: italic;
}
.konten-submenu{
margin-left:-30px;
padding: 20px
}
.vanderfox-nav{display:inline-block;padding:0;width:200px;color:#fff;font-weight:500;background:transparent;white-space:nowrap;border:none;vertical-align:baseline!important}
.vanderfox-nav:hover{color:#5cb9ca!important}
button.nav-aktif{color:#5cb9ca!important}

.brighten img {
filter: brightness(100%);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.brighten img:hover {
filter: brightness(50%);
}

.garis {
width: 110px;
background: #5CB9CA;
height: 4px;
margin: auto;
margin-bottom: 40px
}
.hero,
.hero_content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.hero_video,
.hero iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 56.25vw; /* 9/16*100 = 56.25 */
  min-height: 100vh;
  min-width: 177.77vh; /* 16/9*100 = 177.77 */
}

.hero iframe {
  opacity: 0;
}

.hero iframe.loaded {
  opacity: 1;
}

.hero_content {
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: center;
  padding: 0 320px
}

.hero_content_title {
  color: #fff;
  font-size: 28pt
  !important;
  line-height: 1.75rem;
  text-align: left;
  text-shadow: 1px 1px 1px rgb(0, 0, 0, 0.4);
  font-family: 'Barlow', sans-serif
  !important;
  font-weight: 700;
  margin-bottom: 2.625rem;
}

.hero_content_title h1 {
font-size: 40pt
!important
}

.logo-video {
width: 300px;
height: auto;
}

.hero_content_play {
  display: block;
  position: relative;
  width: 8rem;
  height: 8rem;
  border: 3px solid #fff;
  border-radius: 50%;
  background: transparent;
  text-indent: -9999px;
  transition: border-color 0.3s ease;
  animation: pulse 3s infinite;
}

.hero_content_play:hover {
  border-color: #fff;
  animation: none;
}

.hero_content_play:after {
  content: "";
  display: block;
  position: absolute;
  top: 2.6rem;
  left: 3.225rem;
  width: 0;
  height: 0;
  border: 0;
  border-color: transparent transparent transparent #fff;
  border-style: solid;
  border-width: 1rem 0 1rem 1.5rem;
}
.bgt {
margin-top: 96vh;
}
.bg-putih {
background: #fff
!important;
z-index: 100
!important
}

@media (max-width: 1610px) { 

.t-about2 {
font-size: 18pt;
}
.btn-text {
font-size: 26pt
!important
}

.t-about {
font-size: 32pt;
}
.w-100 .title-hero{
margin-top: -600px;
padding-bottom: 350px;
text-align: center;
font-size: 70pt;
}
.hero_content {
padding: 0 170px
}
.hero_content_title h1 {
font-size: 35pt
!important
}


}

@media (max-width: 1399px) { 
a.t-text{
font-size: 12pt;
}
.mr-5 {
padding-right: 60px;
}
.hero-text {
font-size: 70pt;
}
.kolo{
font-size: 16pt;
}
.kolo2{
font-size: 12pt;
}
.j-text {
font-size: 16pt;
}
.foot {
font-size: 12pt;
}
.our-team {
padding: 20px 0;
font-size: 20pt;
}
.our-team a{
padding: 20px;
}
.team-konten {
font-size: 16pt;
}
.team-konten h3{
font-size: 36pt;
}
.team-konten span{
font-size: 12pt;
}
.our-tema-quote h4{
font-size: 24pt;
}
.our-tema-quote h5{
font-size: 16pt;
}
.t-about2 {
font-size: 16pt;
}
.t-about {
font-size: 28pt;
}
.btn-text {
font-size: 22pt
!important
}
a.buton-putih-home {
padding: 8px 20px;
}
.w-100 .title-hero{
margin-top: -500px;
padding-bottom: 300px;
text-align: center;
font-size: 60pt;
}
.hero_content {
padding: 0 140px
}
.hero_content_title h1 {
font-size: 32pt
!important
}

}

@media (max-width: 1199px) {
.hero-text {
font-size: 60pt;
}
a.t-text{
font-size: 10pt;
}

.hero-div {
margin-top:100px;
} 
.kolo{
font-size: 14pt;
}
.kolo2{
font-size: 12pt;
}
i.ikon {
font-size: 14pt;
margin-right: 10px;
}
.our-team {
padding: 5px;
font-size: 18pt;
}
.team-konten {
font-size: 14pt;
}
.team-konten h3{
font-size: 32pt;
}
.team-konten span{
font-size: 10pt;
}
.our-tema-quote h4{
font-size: 22pt;
}
.our-tema-quote h5{
font-size: 14pt;
}
.nav-spa {
margin-left:0;
}
a.buton-putih-home {
padding: 6px 15px;
font-size: 10pt;
}
.w-100 .title-hero{
margin-top: -450px;
padding-bottom: 250px;
text-align: center;
font-size: 50pt;
}

.hero_content {
padding: 0 120px
}
.hero_content_title h1 {
font-size: 28pt
!important
}

}


@media (max-width: 991px) {
.m-menu__toggle {display: none;}
.hero-text {
margin-top: -80px;
font-size: 48pt;
}
.nav-sp {
margin-left: 10px;
}
.hero-div {
margin-bottom: 0;
}
.j-text {
font-size: 14pt;
}
.kolo{
font-size: 14pt;
}
.kolo2{
font-size: 10pt;
}
.navbar .nav-link {
display: inline-block;
color: #333333
!important
}
.buto{
margin-left:0
}
.mr-5 {
padding-right: 40px;
}
.part {
background: #1f2839;
padding: 50px;
color: #fff;
}
.our-team {
font-size: 16pt;
}
.team-konten {
font-size: 12pt;
}
.team-konten h3{
font-size: 28pt;
}
.team-konten span{
font-size: 8pt;
}
.banner-foot {
padding: 80px;
}
.w-100 .title-hero{
margin-top: -300px;
padding-bottom: 150px;
font-size: 40pt;
}

.hero_content {
padding: 0 20px;
align-items: center;
justify-content: center;
}
.hero_content_title {
text-align: center;
}
.hero_content_title h1 {
font-size: 30pt
!important
}

}

@media (max-width: 767px) {
.m-menu__toggle {display: none;}
.hero-text {
font-size: 40pt;
}
.hero-div {
margin-bottom: 0;
}
.j-text {
font-size: 14pt;
}
.kolo{
font-size: 14pt;
}
.kolo2{
font-size: 10pt;
}
i.ikon {
font-size: 12pt;
margin-right: 10px;
}
.team-konten {
font-size: 10pt;
}
.team-konten h3{
font-size: 22pt;
}
.team-konten span{
font-size: 8pt;
}
.our-tema-quote{
font-size: 10pt;
}
.our-tema-quote h4{
font-size: 18pt;
}
.our-tema-quote h5{
font-size: 14pt;
}
.w-100 .title-hero{
margin-top: -260px;
padding-bottom: 110px;
font-size: 35pt;
}
.hero_content_title h1 {
font-size: 24pt
!important
}
.our-team {
padding: 20px 0
}
.our-team h2 {
font-size: 30pt;
}
.kol-2 {
border-right: none;
border-left: none;
}
.bgt {
margin-top: 82vh;
}

.kolom-div-2 {
background: #fff;
color: #566986;
}

}

 @media (max-width: 575px) {
.m-menu__toggle {display: none;}
.hero-text {
margin-top: -100px;
font-size: 30pt;
}
.hero-div {
margin-bottom: 0;
}
.kolo{
font-size: 12pt;
}
.kolo2{
font-size: 8pt;
}
.t1-part {
font-size: 30pt;
font-family: 'Playfair Display', serif;
font-weight: 700;
color: #41798b;
}
.mr-5 {
padding-right: 10px;
}
img.ikon2 {
font-size: 12pt;
color: #456c88;
}
.part {
background: #1f2839;
padding: 40px 10px;
color: #fff;
}
.kol-1 {
padding: 10px 10px;
}
.kol-2 {
border-right: none;
border-left: none;
}
.bingkai {
border-left: none;
border-right: none;
}
.foto-team {
text-align: center;
padding: 60px 0 0 0;
}
.our-tema-quote{
font-size: 8pt;
}
.our-tema-quote h4{
font-size: 16pt;
}
.our-tema-quote h5{
font-size: 12pt;
}
.t-about {
font-size: 22pt;
}
.t-about2 {
font-size: 14pt;
}
.btn-text {
font-size: 16pt
!important
}
.banner-foot {
padding: 50px 10px;
}
.title-tax {
font-size: 12pt;
}
.t2-tax{
font-size: 10pt;
}
.w-100 .title-hero{
margin-top: -150px;
padding-bottom: 50px;
font-size: 24pt;
}
.hero_content_title h1 {
font-size: 16pt
!important
}
.bgt {
margin-top: 90vh;
}
.garis {
margin-bottom: 30px
}

}