* { transition: all ease .5s; }
body { font-family: 'Open Sans', sans-serif; font-size: 16px; color: #333; }

a { color: #DB0000; text-decoration: none; }
a:hover { color: #FF1515; }

h2 { font-weight: 600; margin: 0 0 .8em 0; padding: 0; }
h2:after{
  content: '';
  margin: .5em 0 0 0;
  display: block;
  width: 50px; 
  height: 5px;
  background: #DB0000;
}
h3 { font-weight: 700; margin: 0 0 .5em 0; padding: 0; }

.container, .container-lg, .container-md, .container-sm { max-width: 1200px !important; }

.toparea { position: relative; height: 100vh; }
.toparea-wrapper { position: relative; }
.topmenu { position: fixed !important; z-index: 99; width: 100%; height: 135px; }
.brand { position: absolute; top: 1em; }
.brand img { width: 100px; height: auto; filter: brightness(0%) grayscale(100%) invert(100%) }
.button_container {
  position: absolute;
  top: 50px;
  right: 0;
  height: 27px;
  width: 35px;
  cursor: pointer;
  z-index: 100;
  transition: all .25s ease;
}

.flowing { background: #DB0000; height: 100px; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; }
.flowing .brand img { width: 68px; }
.flowing .button_container {
  top: 35px;
}

.button_container:hover {
  opacity: .7;
}
.button_container.active .top {
  transform: translateY(11px) translateX(0) rotate(45deg);
  background: #FFF;
}
.button_container.active .middle {
  opacity: 0;
  background: #FFF;
}
.button_container.active .bottom {
  transform: translateY(-11px) translateX(0) rotate(-45deg);
  background: #FFF;
}
.button_container span {
  background: #FFF;
  border: none;
  height: 5px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: all .35s ease;
  cursor: pointer;
}
.button_container span:nth-of-type(2) {
  top: 11px;
}
.button_container span:nth-of-type(3) {
  top: 22px;
}

.overlay {
  position: fixed;
  background: #DB0000;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s, visibility .35s, height .35s;
  overflow: hidden;
  z-index: 99;
}
.overlay.open {
  opacity: .95;
  visibility: visible;
  height: 100%;
}
.overlay.open li {
  animation: fadeInRight .5s ease forwards;
  animation-delay: .35s;
}
.overlay.open li:nth-of-type(2) {
  animation-delay: .4s;
}
.overlay.open li:nth-of-type(3) {
  animation-delay: .45s;
}
.overlay.open li:nth-of-type(4) {
  animation-delay: .50s;
}
.overlay nav {
  position: relative;
  height: 33%;
  top: 40%;
  transform: translateY(-50%);
  font-size: 30px;
  text-align: center;
}
.overlay ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  position: relative;
  height: 100%;
}
.overlay ul li {
  display: block;
  height: 25%;
  height: calc(100% / 4);
  min-height: 50px;
  position: relative;
  opacity: 0;
}
.overlay ul li a {
  display: block;
  position: relative;
  color: #FFF;
  text-decoration: none;
  overflow: hidden;
}
.overlay ul li a:hover:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
  width: 100%;
}
.overlay ul li a:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0%;
  transform: translateX(-50%);
  height: 3px;
  background: #FFF;
  transition: .35s;
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}


.aboutus { height: 100vh; position: relative; background: linear-gradient(60deg, rgba(219,0,0,1) 20%, rgba(219,0,0,0) 100%); color: #FFF; }
.aboutus-content { position: absolute; top: 50%; transform: translateY(-50%); }
.aboutus h2 { font-size: 2.5em; margin: 0 0 .5em 0; padding: 0; }
h2:after {
  background: #FFF; transition: all ease .5s;
}
.aboutus:hover h2:after {
  width: 150px; 
}
.aboutus .readmore { margin: 2em 0 0 0; }
.aboutus .readmore a { border: 2px solid #FFF; color: #FFF; padding: .5em 2em; border-radius: .35rem; }
.aboutus .readmore a:hover { color: #DB0000; background: #FFF; }

.display { position: absolute; height: 100vh; width: 100%; }
.display-slider {}
.display-slider div { position: relative; width: 100%; height: 0; padding-bottom: 60%; }
.display-slider img { position: absolute; width: 100%; height: 100%; top: 50%; object-fit:cover; transform: translateY(-50%); }


.promotion { background: #FFD500; padding: 10em 0 2em 0; position: relative; box-shadow: -1px -5px 5px 0px rgba(0,0,0,0.5); }
.promotion img.big { position: absolute; width: 300px; top: 0; left: 50%; transform: translate(-50%,-50%); filter: drop-shadow(0 -5px 10px rgb(0 0 0 / 0.5)); }
.promotion h3 { font-size: 2em; font-weight: 600; text-align: center; }

.services { padding: 0 0 8em 0; position: relative; }
.services .box { position: relative; background: #EAEAEA; padding: 2em 1em 0 1em; height: 100%; border-radius: 10px 10px 0 0; }
.services i { font-size: 4em; margin: 0 0 20px 0; color: #DF1D1D; }
.services h2 { font-size: 2.5em; text-align: center; }
.services h2:after{
  margin: .5em auto 0 auto;
}
.services:hover h2:after{
  width: 320px;
  background: #DB0000;
}
.services .title { font-size: 1.5em; font-weight: 800; min-height: 80px; }
.services .text { margin: 1em 0 0 0; }

.career { padding: 3em; position: relative; background: #FFD500 url(images/bg-career.png) no-repeat 400px -200px; background-size: 800px; border-radius: 10px; }
.career img { width: 100%; max-width: 200px; height: auto; }
.career h2 { font-size: 2.5em; font-weight: 900; color: #DB0000; margin-bottom: .5em; }
.career h2:after{
	background: #DB0000;
}
.career:hover h2:after{
  width: 120px;
  background: #DB0000;
}
.career h3 { font-size: 1.5em; font-weight: 700; }
.career .readmore { margin: 2em 0 0 0; }
.career .readmore a { border: 2px solid #DB0000; color: #FFF; background: #DB0000; padding: .5em 2em; border-radius: .35rem; }
.career .readmore a:hover { border: 2px solid #DB0000; background: none; color: #DB0000; padding: .5em 2em; border-radius: .35rem; }


.bottomarea { padding: 3em 0 0 0; position: relative; background: #EAEAEA; text-align: center; }
.bottomarea h2 { font-size: 2em; font-weight: 900; text-align: center; }
.bottomarea h2:after{
  background: #DB0000; margin: .7em auto 0 auto; width: 0;
}
.bottomarea:hover h2:after{
  width: 300px;
}
.bottomarea img { width: 100%; height: auto; }

.contact {}
.contact-form { margin: 2em 0 5em 0; }
.btn-contact { background: #DB0000; border-color: #DB0000; }
.btn-contact:hover { background: #990000; border-color: #990000; }

.contact-form-internal { margin: 0; }

.footer { padding: 3em 0; position: relative; background: #DB0000; color: #FFF; text-align: left; }
.footer h3 { font-size: 1.25em; }
.footer a { color: #FFF; }
.footer img.logo { width: 150px; height: auto; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li {}
.footer i { font-size: 2em; margin: 0 .5em 0 0; }


.internal { height: 100px; background: #DB0000; }

.internal-2 {}
.internal-2 h1 { font-weight: 800; color: #DB0000; margin: 0 0 1em 0; }
.internal-2 h2 { font-weight: 800; color: #DB0000; margin: 0; padding: 0; }
.internal-2 h3 { margin: 0; padding: 0; }

.internal-3 { padding: 3em 0 0 0; position: relative; background: #EAEAEA; }
.internal-4 { padding: 3em 0 0 0; position: relative; background: #FFF; }

.internal-about { padding: 0 0 3em 0; }

.reward { padding: 0 0 3em 0; }
.reward h2 { font-size: 2em; font-weight: 900; text-align: center; }
.reward h2:after{
  background: #DB0000; margin: .7em auto 0 auto; width: 0;
}
.reward:hover h2:after{
  width: 250px;
}
.reward-box { background: #FFF; border-radius: 10px; padding: 1em; text-align: center; font-weight: 800; }
.reward-box img { width: 100px; height: auto; margin: 0 0 1em 0; }
.reward-box h3 { font-size: 1.5em; font-weight: 600; color: #DB0000; }

.visimisi { padding: 0 0 3em 0; }


.galeri-content { margin: 0 0 5em 0; }
.galeri-content img { width: 100%; height: auto; }
.galeri-title { text-align: right; padding-right: 1em; }
.galeri-title img { width: 100%; max-width: 150px; }
.galeri-img { border-left: 5px solid #FFD500; padding-left: 2em; }

.mgt { text-align: center; }
.mgt h4 { margin: 0; padding: 0; font-size: 1.2em; font-weight: 600; }
.img-mgt { position: relative; height: 0; padding-bottom: 100%; border-radius: 50%; overflow: hidden; margin: 0 0 1em 0; }
.img-mgt img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); height: 100%; width: 100%; object-fit: cover; }

.employee {}
.employee a { color: inherit; }
.employee a:hover { color: #DB0000; }

.employee-detail { text-align: left; }
.employee-detail-list { margin-bottom: 1em; }
.img-employee { position: relative; width: 250px; height: 250px; border-radius: 50%; overflow: hidden; margin: 0 0 2em 0; }
.img-employee img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); height: 100%; width: 100%; object-fit: cover; }

.qr-mobile { display: none; }
.qr-mobile img { width: 100%; max-width: 150px; }

.location { padding: 3em 0; position: relative; background: #EEE; }
.location h2 { font-size: 2.5em; font-weight: 900; color: #DB0000; }
.location h2:after{
  background: #DB0000;
}
.location:hover h2:after{
  width: 300px;
}
.location img { width: 100%; height: auto; }
.map { position: relative; }
.pulse{
    background: #DB0000;
    border-radius: 50%;
    animation: animate-pulse 3s linear infinite;
	position: absolute;
}
.pulse-big{
    width: 25px;
	height: 25px;
}
.pulse-small{
    width: 15px;
	height: 15px;
}
.pulse1 { left: 37%; top: 48%; }
.pulse2 { left: 45.8%; top: 61.5%; }
.pulse3 { left: 50.5%; top: 42%; }
.pulse4 { left: 60%; top: 64%; }
.pulse5 { left: 76.5%; top: 51%; }
.pulse6 { left: 81.5%; top: 69%; }
@keyframes animate-pulse{
    0%{
        box-shadow: 0 0 0 0 rgba(255,109,74,0.7),  0 0 0 0 rgba(255,109,74,0.7);
    }
    40%{
        box-shadow: 0 0 0 50px rgba(255,109,74,0.0),  0 0 0 0 rgba(255,109,74,0.7);
    }
    80%{
        box-shadow: 0 0 0 50px rgba(255,109,74,0.0),  0 0 0 30px rgba(255,109,74,0);
    }
    100%{
        box-shadow: 0 0 0 0 rgba(255,109,74,0.0),  0 0 0 30px rgba(255,109,74,0);
    }
    
}


.job-box { border: 1px solid #EEE; border-radius: 5px; padding: 1em; margin: 0 0 1em 0; }
.job-box h3 { font-size: 1.2em; color: #DB0000; margin: 0 0 .5em 0; }
.job-box p { margin: 0; }
.job-box i { width: 30px; text-align: center; color: #002A94; }
.job-box a.btn-custom { background: #DB0000; margin: 1em 0 0 0; }

.karir-title { text-align: left; padding: 0 0 1em 0; }
.karir-title h3 { font-size: 1.2em; color: #DB0000; margin: 0 0 .5em 0; }
.karir-form h3 { margin: 0 0 .5em 0; }

.produk-box { position: relative; background: #EEE; border-radius: 5px; margin: 0; margin-top: 20px; padding: 1em; }
.produk-box h3 { font-size: 1.2em; color: #DB0000; margin: 0 0 .5em 0; }
.produk-box-content { padding: 0 0 4em 0; }
.produk-box a { position: absolute; bottom: 1em; left: 1em; }
.produk-box a.btn-custom { background: #DB0000; margin: 1em 0 0 0; }

.slick-slide > div { margin: 0; }
.slick-list { margin: 0; }
.slick-prev:before, .slick-next:before { font-family: FontAwesome !important; font-size: 50px !important; line-height: 1 !important; color: #FFF !important; opacity: 0.75 !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; }   
.slick-prev:before { content: "\f053" !important; }
.slick-next:before { content: "\f054" !important; }
.slick-prev { z-index: 2; left: 20px !important; top: 50% !important; transform: translateY(-50%) !important; }
.slick-next { z-index: 2; right: 37px !important; top: 50% !important; transform: translateY(-50%) !important; }
.slick-prev:before,
.slick-next:before { opacity: 1 !important; }
.slick-dotted.slick-slider
{
    margin-bottom: 0;
}

.slick-dots
{
    position: absolute;
    bottom: 1em;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
	z-index: 2;
}
.slick-dots li
{
    position: relative;
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;
    display: block;
    width: 10px;
    height: 10px;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
    opacity: 1;
}
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 30px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    content: '•';
    text-align: center;
    opacity: .25;
    color: #FFF;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
    opacity: .75;
    color: #FFF;
}


.ba-we-love-subscribers {
	width: 290px;
	height: 50px;
	background-color: #fff;
	border-radius: 15px;
	box-shadow: 0px 12px 45px rgba(0, 0, 0, .15);
	font-family: 'Roboto', sans-serif;
	text-align: center;
	margin: 0 0 10px 0;
	overflow: hidden;
	opacity: 0;
}
.ba-we-love-subscribers.open {
	height: 120px;
	opacity: 1;
}
.ba-we-love-subscribers.popup-ani {
	-webkit-transition: all .8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transition: all .8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.ba-we-love-subscribers h1 {
	font-size: 20px;
	color: #757575;
	padding: 25px 0;
	margin: 0;
  font-weight:400;
  font-family: 'Roboto', sans-serif;

}
.ba-we-love-subscribers .love {
	width: 20px;
	height: 20px;
	background-position: 35px 84px;
	display: inline-block;
	margin: 0 6px;
	background-size: 62px;
}
.ba-we-love-subscribers .ba-logo {
	width: 65px;
	height: 25px;
	background-position: 0px;
	margin: 0 auto;
	opacity: .5;
	cursor: pointer;
}
.ba-we-love-subscribers .ba-logo:hover {
	opacity: 1;
}
.logo-ani {
	transition: 0.5s linear;
	-webkit-transition: 0.5s linear;
}
.ba-we-love-subscribers input {
	font-size: 14px;
	padding: 12px 15px;
	border-radius: 15px;
	border: 0;
	outline: none;
	margin: 8px 0;
	width: 100%;
	box-sizing: border-box;
	line-height: normal;
	/*Bootstrap Overide*/
	font-family: sans-serif;
	/*Bootstrap Overide*/
}
.ba-we-love-subscribers form {
	padding: 5px 30px 0;
	margin-bottom: 15px;
}
.ba-we-love-subscribers input[name="email"] {
	background-color: #eee;
}
.ba-we-love-subscribers input[name="submit"] {
	background-color: #00aeef;
	cursor: pointer;
	color: #fff;
}
.ba-we-love-subscribers input[name="submit"]:hover {
	background-color: #26baf1;
}
.ba-we-love-subscribers-fab {
	width: 65px;
	height: 65px;
	background-color: #00aeef;
	border-radius: 30px;
	float: right;
	box-shadow: 0px 12px 45px rgba(0, 0, 0, .3);
	z-index: 5;
	position: relative;
}
.ba-we-love-subscribers-fab .img-fab {
	height: 30px;
	width: 30px;
	margin: 15px auto;
	background-image: url("images/barrel-we-love-subscribers-img2.png");
	background-position: -1px -53px;
}
.ba-we-love-subscribers-fab .wrap {
	transform: rotate(0deg);
	-webkit-transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
	transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
}
.ba-we-love-subscribers-fab .ani {
	transform: rotate(45deg);
	-webkit-transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
	transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
}
.ba-we-love-subscribers-fab .close {
	background-position: -2px 1px;
	transform: rotate(-45deg);
	float: none;
	/*Bootstrap Overide*/
	opacity: 1;
	/*Bootstrap Overide*/
}
.ba-we-love-subscribers-wrap {
	position: fixed;
	right: 25px;
	bottom: 25px;
	z-index: 1000;
}
.ba-settings {
	position: absolute;
	top: -25px;
	right: 0px;
	padding: 10px 20px;
	background-color: #555;
	border-radius: 5px;
	color: #fff;
}
.baloon1 { left: 0; }
.baloon2 { right: 0; }

@media (min-aspect-ratio: 16/9) {

}

@media (max-aspect-ratio: 16/9) {

}

@media (max-width: 798px) {
.topmenu { height: 110px; }
.button_container { top: 38px; width: 25px; }
.button_container span { height: 2px; }
.topmenu img { width: 80px; height: auto; }
.flowing { height: 80px; }
.flowing .brand img { width: 50px; }
.flowing .button_container { top: 25px; }
.promotion { padding: 7em 0 2em 0; }
.promotion img.big { width: 200px; }
.promotion h3 { font-size: 1.5em; }
.display { position: absolute; height: 100vh; width: 100%; }
.display-slider {}
.display-slider div { position: relative; width: 100%; height: 100vh; overflow: hidden; }
.display-slider img { position: absolute; width: 100%; height: 100%; top: 50%; object-fit:cover; transform: translateY(-50%); }
.services { padding: 0 0 3em 0; }
.services .box { padding: 2em 1em; height: auto; }
.services i { font-size: 4em; margin: 0 0 20px 0; color: #DF1D1D; }
.services h2 { font-size: 2em; text-align: center; }
.services .title { font-size: 1.2em; min-height: auto; }
.services .text { margin: 1em 0 0 0; }

.galeri-content { margin: 0 0 3em 0; }
.galeri-title { text-align: left; padding-right: 0; margin: 0 0 1em 0; }
.galeri-title img { display: none; }
.galeri-img { border-left: 0 solid #FFD500; padding-left: 0; }

.job-box { border: 1px solid #CCC; }

.qr-mobile { display: block; }

}