i.fa.fa-long-arrow-right{
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}

i.fa.fa-long-arrow-left{
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}

.form-inline label {
    justify-content: left!important;
}

.fa {
    font-family: 'Font Awesome 5 Free' !important;
    font-weight: 600 !important;
}


.fa.fa-whatsapp {
    font-family: "Font Awesome 5 Brands" !important;
    font-weight: 500 !important;
}


html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}


/*------------------------------------------------------*/


/* LOGO */

/*
#sp-header #sp-logo {
    BACKGROUND-COLOR: WHITE !IMPORTANT;
      box-shadow: 0 0 8px 0px #00000024;

} */

@media screen and (max-width: 990px) {
#sp-header .logo {

      display: unset !important;
 BACKGROUND-COLOR: WHITE !IMPORTANT;
}

#sp-header #sp-logo {
    margin-top: auto !important;
    margin-bottom: auto !important;
}
  
}

@media screen and (min-width: 991px) and (max-width: 1200px){
  
#sp-header .logo {
    height: unset !important;
      display: unset !important;
}

#sp-header #sp-logo {
    margin-top: auto !important;
    margin-bottom: auto !important;
}
  
  .logo-image {
    height: 90px !important;
    margin-right: auto;
    margin-left: auto;
}
  
  #sp-header #sp-logo {
    BACKGROUND-COLOR: WHITE !IMPORTANT;
         box-shadow: 0 0 8px 0px #00000024 !important;

}
  
  
}


@media screen and (min-width: 1201px){
  
#sp-header .logo {
    height: unset !important;
      display: unset !important;
}

#sp-header #sp-logo {
    margin-top: auto !important;
    margin-bottom: auto !important;
}
  
  .logo-image {
    height: 100px !important;
    margin-right: auto;
    margin-left: auto;

}
  
  div#sp-logo .sp-column {
    
     BACKGROUND-COLOR: WHITE !IMPORTANT;
     box-shadow: 0 0 8px 0px #00000024 !important;
    
  }
  
  
}


/* END OF LOGO */


/* NAV MENU */

@media screen and (min-width: 1351px){
  
.topCONTACT{
      PADDING: 0PX 0PX 0PX 88PX !IMPORTANT;
  }
}



@media screen and (min-width: 991px) and (max-width: 1350px){
  
  
  .topCONTACT{
      PADDING: 0PX 0PX 0PX 17PX !IMPORTANT;
    FONT-SIZE: 12PX !IMPORTANT;
  }
  
}




.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
    text-transform: uppercase !important;
}



.sp-contact-info {
    display: flex;
    justify-content: end;
}

#sp-top-bar .sp-module {
    display: block !IMPORTANT;
}

#sp-top-bar a {
    color: #fff !IMPORTANT;
 
}

#sp-top-bar a:hover {
    color: #ffffffc7 !IMPORTANT;
     text-decoration: underline !IMPORTANT;
}


#sp-top-bar {
    color: #fff !IMPORTANT;
  padding: 6px 0px !important;
}




#sp-top-bar {
     background-image: linear-gradient(#CE1126, #A20D1D) !IMPORTANT;
  }

#sp-header {
    background-image: linear-gradient(#002B7F, #001640) !IMPORTANT;
    border-bottom: UNSET !important;
}


#sp-header.header-sticky {
    background-image: linear-gradient(#002B7F, #001640) !IMPORTANT;
}


.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span {
    display: inline-block;
    padding: 0 15px;
    line-height: 80px;
    font-size: 14px !important;
    margin: 0;
    font-family: 'Play', sans-serif !important;
    text-transform: uppercase !important;
    font-weight: bolder !important;
    color: white !important;
}



/*

li.sp-menu-item.sp-has-child.active:before{
  content: '';
    background: url(/images/00pusakabiru/logo/hat2.svg);
    width: 20px;
    height: 30px;
    position: absolute;
    right: 0;
    left: -7px;
    opacity: 1;
    top: 14px;
    background-repeat: no-repeat;
    background-size: contain;
    filter: invert(1);
    margin: auto;
}


.sp-menu-item.current-item.active:before {
content: '';
    background: url(/images/00pusakabiru/logo/hat2.svg);
    width: 20px;
    height: 30px;
    position: absolute;
    right: 0;
    left: -7px;
    opacity: 1;
    top: 14px;
    background-repeat: no-repeat;
    background-size: contain;
    filter: invert(1);
    margin: auto;
    }

li.sp-menu-item.sp-has-child.active:before {
    animation-name            : shadow2    ;
    animation-duration        : 0.9s     ;
    animation-iteration-count : infinite  , infinite  ;
    animation-direction       : alternate , alternate ;
}

li.sp-menu-item.current-item.active:before {
    animation-name            : shadow2    ;
    animation-duration        : 0.9s     ;
    animation-iteration-count : infinite  , infinite  ;
    animation-direction       : alternate , alternate ;
}

@keyframes shadow2 {
    from { filter: drop-shadow(0px 0px 0px #4dadff); }
    to   { filter: drop-shadow(0px 0px 8px #4dadff); }
}

*/



.sp-megamenu-parent .sp-dropdown li.sp-menu-item:before {
  content: unset !important;
} 



.sp-megamenu-parent > li.active > a:before {
    content: unset !Important;
} 


.sp-megamenu-parent > li.active > a {
    color: #1b84df !important;
}

.sp-megamenu-parent > li > a:hover {
       color: #1b84df !important;
}

.sp-megamenu-parent > li.active:hover > a, .sp-megamenu-parent > li.active > a {
    color: #1b84df !important;
}


.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a {
    color: #187bd4 !important;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover {
    color: #187bd4 !important;
}


@media screen and (max-width: 767px){
  
  #sp-top-bar {
    font-size: 11px !important;
}
  
}


@media screen and (max-width: 990px){
  
#sp-header .logo .logo-image {
    margin-top: 6px !important;
  margin-right: 6px !important;
    margin-left: 10px !important;
}
  
  
  .logo-image {
    height: 70px !important;
}
  
  
  
}

@media screen and (min-width: 991px) and (max-width: 1350px){
  
  
  .sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span {
        font-size: 11px !important;
    padding: 0px 6px !important;
    
  }
  
  
}


/* END OF NAV MENU */



/* SCROLL UP */

.sp-scroll-up {
    bottom: 32px !IMPORTANT;
    right: 100px !IMPORTANT;
}

/* END OF SCROLL UP */




/* BUTTON */

.sppb-btn.sppb-btn-default {
  color: white !important;
  background-color: #002B7F !important;
  border-radius: 0px !important;
 padding: 15px 34px !important;
  border:  solid !important;
  text-transform: uppercase !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  text-align: center !important;
  border-radius: 0px !important;
  overflow: hidden !important;
  position: relative !important;
  font-family: 'Play', sans-serif !important;
    font-size: 16px !important;
  font-weight: bold !important;
      border-color: #021218 !important;
    border-width: 4px !important;
  transition: 0.5s;
box-shadow: 0 0 10px 1px #0000001f;
}





.sppb-btn.sppb-btn-default:hover{
background:#002B7F!important;
  color:white !important;
     transform: scale(1.05);
  box-shadow: 0 0 1px 1px #00000052;
}

.sppb-btn.sppb-btn-default:after{
  background: white !important;
  content: ""!important;
  height: 155px!important;
  left: -78px!important;
  opacity: .2!important;
  position: absolute!important;
  top: -50px!important;
  -webkit-transform: rotate(35deg)!important;
  transform: rotate(35deg)!important;
  -webkit-transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1)!important;
  transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1)!important;
  width: 50px!important;
  z-index: 10!important;
}

.sppb-btn.sppb-btn-default:hover:after{
  left: 120%!important;
  -webkit-transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1)!important;
  transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1)!important;
}





/* END OF BUTTON */



/* BUTTOM */

#sp-bottom .sp-module {
    margin-bottom: 0px !IMPORTANT;
}


#sp-bottom {
    padding: 50PX 0PX !IMPORTANT;
}

#sp-bottom .sp-module a:hover {
    color: #062440 !important;
}

#sp-bottom .sp-module a {
    color: #062440 !important;
}

#sp-bottom .sp-module ul > li > a {
    font-family: 'Play', sans-serif !important;
    font-size: 20px !important;
    font-weight: 600 !important;
  margin-bottom: 30px !Important;
}


/* END OF BUTTOM */



/* FOOTER */

div#sp-footer1 {
    justify-content: center !important;
    display: flex !important;
}

#sp-footer {

    background-image: linear-gradient( 180deg, #002a7d 0%, #00153f 100%) !IMPORTANT;
}


#sp-footer .container-inner {
    padding: 15px 0 !important;
}

.sp-copyright {
    color: white !important;
}

.sp-copyright a {
     color: white !important;
}

.sp-copyright a:hover {
    color: #1b84df !important;
}


/* END OF FOOTER */



/* CONTACT US */


@MEDIA SCREEN AND (MIN-WIDTH: 991PX) {

.contact01 {
  
      border-width: 6px 0PX 0PX 6PX !IMPORTANT;
    border-color: #121330 !IMPORTANT;
    border-style: solid !IMPORTANT;
  
}



.contact02 {
  
  border-width: 6px 6PX 0PX 0PX !IMPORTANT;
    border-color: #121330 !IMPORTANT;
    border-style: solid !IMPORTANT;
  
}


.contact03 {
  
 border-width: 0px 6PX 6PX 6PX !IMPORTANT;
    border-color: #121330 !IMPORTANT;
    border-style: solid !IMPORTANT;
  
}

}

@MEDIA SCREEN AND (MAX-WIDTH: 990PX) {

.contact01 {
  
     
border-width: 6px 6PX 0PX 6PX !IMPORTANT;
    border-color: #121330 !IMPORTANT;
    border-style: solid !IMPORTANT;
  
}



.contact02 {
  
     border-width: 0px 6px 0px 6px !IMPORTANT;
    border-color: #121330 !IMPORTANT;
    border-style: solid !IMPORTANT;
  
}


.contact03 {
  
 border-width: 0px 6PX 6PX 6PX !IMPORTANT;
    border-color: #121330 !IMPORTANT;
    border-style: solid !IMPORTANT;
  
}

}

 .bfQuickMode .form-group-actions {
    margin-bottom: 0px !important;
}



  

.button#bfSubmitButton {
  color: white !important;
  background-color: #002B7F !important;
  border-radius: 0px !important;
 padding: 15px 34px !important;
  border:  solid !important;
  text-transform: uppercase !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  text-align: center !important;
  border-radius: 0px !important;
  overflow: hidden !important;
  position: relative !important;
  font-family: 'Play', sans-serif !important;
    font-size: 16px !important;
  font-weight: bold !important;
      border-color: #021218 !important;
    border-width: 4px !important;
  transition: 0.5s;
box-shadow: 0 0 10px 1px #0000001f;
}





.button#bfSubmitButton:hover{
background:#002B7F!important;
  color:white !important;
     transform: scale(1.05);
  box-shadow: 0 0 1px 1px #00000052;
}

.button#bfSubmitButton:after{
  background: white !important;
  content: ""!important;
  height: 155px!important;
  left: -78px!important;
  opacity: .2!important;
  position: absolute!important;
  top: -50px!important;
  -webkit-transform: rotate(35deg)!important;
  transform: rotate(35deg)!important;
  -webkit-transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1)!important;
  transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1)!important;
  width: 50px!important;
  z-index: 10!important;
}

.button#bfSubmitButton:hover:after{
  left: 120%!important;
  -webkit-transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1)!important;
  transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1)!important;
}

  .bfQuickMode .bfbs3-form-inline .bfbs3-form-control, .bfQuickMode .form-inline .form-control {
    width: 100% !important;
}



/* END OF CONTACT US */



/* OFFCANAVS */



@media screen and (max-width: 991px){
  
  div#sp-menu1 {
    padding: 0px !important;
}
  
  #offcanvas-toggler.offcanvas-toggler-left {

    display: flex !important;
    align-items: center !important;
    align-content: center !important;
    flex-direction: row !important;
    justify-content: center !important;
    margin-left: 15px !important;
    
    float: unset !Important;
    margin-right: unset !important;
    
}
  
  
  
  
  
}




.offcanvas-menu .offcanvas-inner .sp-module ul.menu > li > a {
    font-size: 22px !important;
    text-transform: uppercase;
    font-family: 'Play', sans-serif !important;
    font-weight: 600 !important;
  color: white !important;
}



.offcanvas-menu .offcanvas-inner .sp-module ul.menu-child > li > a {
    position: relative;
    display: inline-block;
    text-transform: uppercase !important;
    margin-bottom: 6px !important;
    font-size: 14px !important;
}


.offcanvas-menu {
background-color: rgb(2 16 46)  !important;
    color: #131313;
 /*   background-image: url(/images/00pusakabiru/slideshow/slideshow03.jpg) !important; */
    background-position: -970px 0px !important;
    background-size: cover !important;
    background-blend-mode: multiply !important;
}

.offcanvas-menu .offcanvas-inner .sp-module ul > li.menu-parent > a > .menu-toggler{
    color: #ff0018 !important;
}

.offcanvas-menu .offcanvas-inner .sp-module ul.menu > li > a:before, .offcanvas-menu .offcanvas-inner .sp-module ul.menu-child > li > a:before {
    content: unset !Important;
}


.offcanvas-menu .offcanvas-inner .sp-module ul > li ul li a {
    color: white !important;
}


.offcanvas-menu .offcanvas-inner .sp-module ul > li a:hover {
 color: #ff0018 !important;
}

 .offcanvas-menu .offcanvas-inner .sp-module ul > li a:focus, .offcanvas-menu .offcanvas-inner .sp-module ul > li span:focus {
 color: #ff0018 !important;
}

.offcanvas-menu .offcanvas-inner {
    padding-top: 115px !important;
}

.offcanvas-menu .offcanvas-inner .sp-module ul.menu > li {
    margin-bottom: 15px !important;
}


.close-offcanvas > span {
    color: #ffffff !important; 
}

.close-offcanvas {
    border: 1px solid #ffffff !important; 

}


/* END OF OFFCANVAS */