body{
  font-family: 'Lato', Arial, Helvetica, Arial, Tahoma, sans-serif!important;
}
.body-content{
    padding-top: 20px;
}

.nav>li>a {
    position: relative;
    display: block;
    padding: 10px 15px;
}

.row-fullwidth{
    width: 100vw;
    margin-left: calc((100% - 100vw) / 2);
    background: #F7F7F7;
    padding: 30px 40px;
}
.row-custom-size{
    max-width: 1260px;
    margin: auto!important;
    width: 100%;
}
img {
    width: 100%;
    max-width: 100%;
    height: auto;
}
.branding {
  padding: 10px;
}
/* .navbar-brand{
    display: block!important;
}
#page-header{
  margin-bottom: 20px;
  border-bottom: #d6d6d6 1px solid;
} */
.mobilenav{
  display: none!important;
}

#latest-pullout img, #latest-pullout .main-btn{
    width: 90%;
}

.modalPullout{
    top: 10%!important;
}
.modal .modalPulloutContent{
    width: 65%;
}
.modalPulloutContent .modal-header {
    padding: 15px 20px;
    margin-bottom: 0px;
}
.modalPulloutContent .modal-title {
    margin-bottom: 0px;
}
.w-90{
    width: 90%;
}
.w-80{
    width: 80%;
}
.w-60{
    width: 60%;
}
.w-65{
    width: 65%;
}
.w-55{
    width: 55%;
}
.w-20{
    width: 20%!important;
}
.w-15{
    width: 15%;
}
.w-10{
    width: 10%;
}
.w-5{
    width: 5%;
}

/* BUTTON */
.main-button{
    width: 250px!important;
}
.slider-button{

}
.bg-color-red{
    background-color: #DA2128;
}
.color-red{
    color: #DA2128;
}
.btn-dark:hover{
    opacity: .9;
}
.btn.bg-color-red:hover{
    background-color: #C91D24;
}
.btn-outline-danger:hover{
    background-color: #C91D24;
}
.btn:focus{
    box-shadow: none;
}
/* BOOKSHELF */
.bookshelf{
    position: absolute;
    height: 130px;
    bottom: -40px;
}
.bookshelf-left{
    left: 0;
    width: 82px;
    background: url(https://uat.starbiz7.com.my/css/images/asset/bookshelf/bookshelf-left.png);
    background-repeat: no-repeat;
}
.bookshelf-mid{
    left: 82px;
    right: 100px;
    background: url(https://uat.starbiz7.com.my/css/images/asset/bookshelf/bookshelf-mid.png);
}
.bookshelf-right{
    right: 0;
    width: 100px;
    background: url(https://uat.starbiz7.com.my/css/images/asset/bookshelf/bookshelf-right.png);
    background-repeat: no-repeat;
}
.pullout-shadow{
    box-shadow: 6px 6px 5px 0px rgba(129,128,128,0.75);
    -webkit-box-shadow: 6px 6px 5px 0px rgba(129,128,128,0.75);
    -moz-box-shadow: 6px 6px 5px 0px rgba(129,128,128,0.75);
}
/* END BOOKSHELF */

/* CAROUSEL */
.owl-carousel{
    padding-left: 70px;
    padding-right: 70px;
}
.owl-carousel .owl-stage {
    margin: 0 auto;
}
.owl-carousel .owl-nav {
  overflow: hidden;
  height: 0px;
}
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
  background: #5110e9;
}

.owl-carousel .item {
  padding: 10px;
  text-align: center;
}
.owl-carousel .nav-button {
  width: 25px;
  cursor: pointer;
  position: absolute;
  top: 160px !important;
}
.owl-carousel .owl-prev.disabled,
.owl-carousel .owl-next.disabled {
  pointer-events: none;
  opacity: 0.25;
}
.owl-carousel .owl-prev {
  left: 0;
  padding-right:10px;
}
.owl-carousel .owl-next {
  right: 0;
}
.owl-theme .owl-nav [class*=owl-] {
  width: 35px!important;
  color: #ffffff;
  font-size: 39px;
  background: #000000;
  border-radius: 3px;
  padding: 0px!important;
}
.owl-carousel .prev-carousel:hover {
  background-position: 0px -53px;
}
.owl-carousel .next-carousel:hover {
  background-position: -24px -53px;
}
.owl-item.active {
 background: none!important;
}

.cov-title{
    font-size: 1.3rem;
    font-weight: bold;
    padding: 10px;
}

.btn-slider{
    padding: 10px 30px;
    background-color: #DA2128;
}

.owl-item > div {
    cursor: pointer;
    margin: 6% 8%;
    transition: margin 0.4s ease;
  }
  .owl-item.center > div {
    cursor: auto;
    margin: 0;
  }
  .owl-item:not(.center) > div:hover {
    opacity: .75;
  }
  .owl-item:not(.center){
    bottom: -30px;
  }
  .owl-item:not(.center) .btn-group,
  .owl-item:not(.center) .cov-title {
    visibility: hidden;
  }

  .owl-item.active.center img{
    -webkit-transform: scale(1);
    transform: scale(1);
 }
  .owl-item.active.center .btn-group{
	transform: translateY(-200%);
	opacity: 0;
	animation: move-button 0.4s ease-out forwards;
  }
  .owl-item.active.center .cov-title {
	transform: translateY(-200%);
	opacity: 0;
	animation: move-title 0.4s ease-out forwards;
  }
  @keyframes move-title {
    20% {
		opacity: 0;
	}
	100% {
		opacity: 1;
		transform: translateY(0%);
	}
  }
  @keyframes move-button {
    20% {
		opacity: 0;
	}
	100% {
		opacity: 1;
		transform: translateY(0%);
	}
  }
 .owl-nav.disabled{
    display: block!important;
 }
 .slider__image
 {
     max-width:250px;
 }

  .slider-sx {
    position: relative;
 }
 .owl-theme .custom-nav {
      position: absolute;
      top: 28%;
      left: 0;
      right: 0;
  }
.owl-prev,
.owl-next {
    position: absolute;
    height: 100px;
    color: inherit;
    background: none;
    border: none;
    z-index: 100;
}
.owl-prev {
    left: 0;
}
.owl-next {
    right: 0;
}
.owl-nav .owl-prev, .owl-nav .owl-next {
    top: 40%;
    position: absolute;
    width: 50px !important;
    text-align: center;
    background: none;
}
#sb7listing .owl-nav .owl-prev i, .owl-nav .owl-next i {
    color: #000;
    position: relative;
    left: 0px;
    background: none;
}
.owl-theme .owl-nav [class*=owl-]
{
    -webkit-transform:translate3d(0,0,0);
    z-index: 100;
	width: 50px !important;
	color: black;
}
.custom-nav-left {
  display: inline-block;
  width: 3em;
  height: 3em;
  border: 0.15em solid #B00;
  border-radius: 50%;
  margin-right: 1.5em;
}
.custom-nav-left:after {
  content: '';
  display: inline-block;
  margin-top: 0.9em;
  margin-left: 0.4em;
  width: 0.9em;
  height: 0.9em;
  border-top: 0.2em solid #B00;
  border-right: 0.2em solid #B00;
  -moz-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.custom-nav-left:hover {
    border-color: #333;
}
.custom-nav-left:hover:after {
    content: '';
    display: inline-block;
    margin-top: 0.9em;
    margin-left: 0.4em;
    width: 0.9em;
    height: 0.9em;
    border-top: 0.2em solid #333;
    border-right: 0.2em solid #333;
    -moz-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }
.owl-next.disabled .custom-nav-left{
    border-color:#A9A9A9;
}
.owl-next.disabled .custom-nav-right:left{
    border-color:#A9A9A9;
}
.custom-nav-right {
  display: inline-block;
  width: 3em;
  height: 3em;
  border: 0.15em solid #B00;
  border-radius: 50%;
}
.custom-nav-right:after {
  content: '';
  display: inline-block;
  margin-top: 0.9em;
  margin-left: -0.3em;
  width: 0.9em;
  height: 0.9em;
  border-top: 0.2em solid #B00;
  border-right: 0.2em solid #B00;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.custom-nav-right:hover {
    border-color: #333;
}
.custom-nav-right:hover:after {
    content: '';
  display: inline-block;
  margin-top: 0.9em;
  margin-left: -0.3em;
  width: 0.9em;
  height: 0.9em;
  border-top: 0.2em solid #333;
  border-right: 0.2em solid #333;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.owl-next.disabled .custom-nav-right{
    border-color:#A9A9A9;
}
.owl-next.disabled .custom-nav-right:after{
    border-color:#A9A9A9;
}

/* END CAROUSEL */

/* DETAIL PAGE */
.page{
    max-width:800px;
}

#btn-back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
}
/* END DETAIL PAGE */

/* MODAL */
.story-wrapper{
    padding-top: 50px;
}
/* END MODAL */

/* FOOTER */
#wrapperFooter {
    padding-bottom: 0px!important;
}
/*.footer-n__links {
    width: 25%!important;
}*/
.footer-n__links ul li a{
    text-align: center;
}
/* END FOOTER */


/* FADEIN OUT EFFECT */
.catch{
    display:none;
  }

.mv_fade_in{
    display: block;
    padding: 20px;
    background-color: cadetblue;
}

.fade_in{
    display: block;
    margin: auto;
    margin-top: 50px;
    width: 200px;
    height: 100px;
    background-color: blue;
}

.u-fade-type-left{
    transform: translateX(-100px);
    opacity: 0;
}

.u-fade-type-left.is-active{
    transition: 1s;
    transform: translateX(0);
    opacity: 1;
}

.u-fade-type-right{
    transform: translateX(100px);
    opacity: 0;
}

.u-fade-type-right.is-active{
    transition: 1s;
    transform: translateX(0);
    opacity: 1;
}

.u-fade-type-down{
    transform: translateY(50px);
    opacity: 0;
}


.u-fade-type-down.is-active{
    transition: 1.5s;
    transform: translateY(0);
    opacity: 1;
}

.u-fade-type-up{
    transform: translateY(-100px);
    opacity: 0;
}

.u-fade-type-up.is-active{
    transition: 2s;
    transform: translateY(0);
    opacity: 1;
}

.u-fade-type-static{
    opacity: 0;
}

.u-fade-type-static.is-active{
    transition: 2s;
    opacity: 1;
}
li#login_menu_mobile {
    xpadding-top: 9px;
}
/* END FADEIN OUT EFFECT */

@media (max-width: 499.99px) {
	.slider-sx{
        min-height: 500px;
    }
    .owl-item:not(.center) img{
        -webkit-transform: scale(0.6)!important;
        transform: scale(0.6)!important;
     }
    .owl-item.active.center img{
        -webkit-transform: scale(0.8)!important;
        transform: scale(0.8)!important;
        transition-duration: 500ms;
     }
     .owl-carousel {
        padding-left: 2px;
        padding-right: 2px;
      }
      .owl-item.active.center img{
        margin-top: -30px;
      }
      .owl-item:not(.center){
        bottom: -1px;
      }
      li.dropdown--subscribe {
        padding-top: 6px!important;
      }
      li#login_menu_mobile {
        margin-top: 11px!important;
      }
      .btn--subscribe {
        padding: 6px 10px!important;
        margin-top: 5px!important;
      }
      .cov-title {
        margin-top: -30px;
      }
      .slider-sx{
        margin-bottom: 30px;
      }
      .slider__image {
        max-width: 310px;
	  }
	  .owl-prev {
        left: 2!important;
		}
		.owl-next {
			right: 2!important;
	 }

}
@media (min-width:499px) and (max-width: 599.98px) {
  .container, .container-sm {
    width: 100%;
    padding-right: 25px!important;
    padding-left: 25px!important;
    margin-right: auto;
    margin-left: auto;
  }
  .footer-n__links {
    width: 50%!important;
  }
  .btn-slider{
    padding: 5px 10px;
  }
  .owl-carousel {
    padding-left: 50px;
    padding-right: 50px;
  }
  .cov-title {
    font-size: 1rem;
    padding: 5px;
  }
  /* .owl-item.active.center img{
    -webkit-transform: scale(1.2)!important;
    transform: scale(1.2)!important;
    margin-top: 40px;
    margin-bottom: 25px;
  }
 .owl-item:not(.center) {
    -webkit-transform: scale(1)!important;
    transform: scale(1)!important;
    bottom: -50px;
 } */
 li.dropdown--subscribe {
    padding-top: 6px!important;
  }
  .btn--subscribe{
    padding: 6px 7px!important;
  }
  li#login_menu_mobile {
    margin-top: 11px!important;
  }
}
@media (max-width: 767.98px) {
    #navbar-main.navbar .login {
        margin-top: 12px!important;
        padding: 6px 7px!important;
    }

	.btn--subscribe {
      margin-right: 12px!important;
    }

}
@media (min-width: 599.99px) and (max-width: 767.98px) {
  .container {
    width: 100%;
    padding-right: 25px!important;
    padding-left: 25px!important;
    margin-right: auto;
    margin-left: auto;
  }
  .btn-slider{
    padding: 5px 10px;
  }

  .cov-title {
    font-size: 1rem;
    padding: 5px;
  }
  .latestPullout{
    width: 42%!important;
  }
  .owl-item:not(.center) {
    -webkit-transform: scale(0.8)!important;
    transform: scale(0.8)!important;
    bottom: -1px;
 }
 .owl-item.active.center img{
    -webkit-transform: scale(1)!important;
    transform: scale(1)!important;
 }
 .owl-carousel {
	padding-left: 25px;
    padding-right: 25px;
 }
 li.dropdown--subscribe {
    padding-top: 6px!important;
  }
  .btn--subscribe{
    padding: 6px 7px!important;
  }
  li#login_menu_mobile {
    margin-top: 11px!important;
  }
}
@media only screen and (max-width: 991px){
    #navbar-main.navbar {
        border-top: none;
        min-height: 90px!important;
        display: block;
        padding-top: 0;
        padding-bottom: 0;
    }
}
@media (min-width: 767.99px) and (max-width: 991.99px) {
    .latestPullout{
        width: 42%!important;
      }
      .owl-item.active.center img{
        -webkit-transform: scale(1.2)!important;
        transform: scale(1.2)!important;
        margin-top: 20px;
        margin-bottom: 10px;
     }
     .owl-item:not(.center) {
        -webkit-transform: scale(1)!important;
        transform: scale(1)!important;
        bottom: -1px;
     }
     li.dropdown--subscribe {
        padding-top: 10px!important;
      }
      /* .btn--subscribe{
        padding: 8px 12px!important;
      } */
    #navbar-main.navbar .login {
        margin-top: 15px!important;
    }
    li#login_menu_mobile {
        margin-top: 15px!important;
    }
}
@media (max-width: 1024px){
    #page-header nav .navbar-right {
        margin-top: 10px;
    }
    .footer-n {
        padding: 30px 10px 0 10px!important;
    }
}
@media (min-width: 1330px) {
	.slider-sx{
        min-height: 500px;
        padding: 0px 130px;
    }
    .fixed-top {
        top: 35px!important;
    }
	 .owl-carousel{
        padding-left: 40px;
        padding-right: 25px;
    }
    /* .nav .btn--subscribe {
        padding: 5px 10px 6px 10px!important;
    } */
}
@media (min-width: 1600px) {
    .owl-carousel{
        width: 90%!important;
		padding-left: 0px;
        padding-right: 0px;
    }
    .slider-sx{
        margin-top: 30px;
        padding: 0;
    }
    .slider__image {
        max-width: 310px!important;
        height: 462px!important;
    }

	.owl-item:not(.center) .slider__image{
        width: auto;
        max-height: 440;
     }
	 .owl-item:not(.center){
        bottom: 0px;
      }
     .owl-theme .custom-nav {
        top: 35%;
    }

}
/* MENU */
ul.dropdown-menu.log-in li {
    padding: 10px 12px!important;
}
ul.dropdown-menu.log-in li:active {
    background-color: white!important;
}
ul.dropdown-menu.log-in li a {
    font-weight: 400!important;
    font-size: 14px!important;
}
ul#loginDrop {
    position: absolute;
}
.log-in .icon.sprite-icon {
    background-position: -675px -26px!important;
}
li.top-bar:hover>.dropdown-menu {
    margin-top: 5px!important;
}
ul.social-branding li {
    padding: 8px 0!important;
}
.btn--subscribe{
    display: block!important;
}
a.login{
    display: block!important;
}
.dropdown.top-bar.login_menu{
    /* margin-top: 10px!important; */
}