/* Header */

.bg-topic {
    background: red;
    text-align: center;
}

.bg-topic h1 {
    margin: 0;
    padding: 10px 0px 10px 0px;
}
.bg-topic h1{
    font-size: 24px;
}
.bg-topic h1 a {
    font-size: 24px;
    color: white;
    margin: 0;
    font-weight: normal;
}

.content-index {
    /*background: url('../images/products/img-content-index.png') no-repeat center center;*/
    min-height: 650px;
    background-size: contain !important;
    text-align: center;
    margin: 5px 0px 5px 0px;
}

.content-index h2 {
    margin: 0;
}

.d-flex{
    display:flex;
}

.content-index h2 a {
    font-size: 1000%;
    color: #2400fe;
    -webkit-text-fill-color: #5c9ee4;
    /* Will override color (regardless of order) */
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #2400fe;
    font-weight: bold;
    margin: 0;
}

.bg-header {
    /* background: url('../images/banners/bg-header.png') center center no-repeat; */
    text-align: center;
    background-size: cover;
    /*min-height: 460px;*/
    position: relative;
    margin-bottom: 5px;
    background-repeat: no-repeat;
    background-position: center center;
    padding-bottom:20px;
    height:auto;
    /*aspect-ratio: 3/1.1;*/
}

/* Our vision  */

.topicOurVision {
    text-align: center;
    background: red;
    padding: 10px 0px 10px 0px;
    margin-bottom: 5px;
}

.topicOurVision h1 {
    padding: 0;
    margin: 0;
    color: #fff;
}

.our-vison-page {
    position: relative;
}

.our-vison-page h2 {
    font-size: 50px !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 200px !important;
    position: absolute;
    top: 60px;
    right: 0;
    left: 0;
    text-align: center;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #9b8d00;
}

.our-vison-page h4 {
    font-size: 45px !important;
    position: absolute;
    bottom: 50px;
    text-align: center;
    left: 0;
    right: 0;
    color: #fff;
    font-weight: normal;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.our-vison-page h6 {
    font-size: 30px !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    text-align: center;
    color: #fff;
    font-weight: normal;
}

.page-headers .bottom-fixed h1, .page-headers .our-vision h4 {
    font-size: 167px;
    text-align: right;
    margin-right: 150px;
    font-family: 'Times New Roman', Times, serif;
}

.page-headers .advantage h1, .page-headers .our-vision h4 {
    font-size: 50px;
    color: white;
}

.page-headers .advantage {
    background: rgba(154, 154, 154, 0.50);
    margin-bottom: 70px;
    padding: 10px 0px;
}

.page-headers .advantage h1 {
    color: var(--primary-text-header);
    text-shadow: none;
    margin: 0px 150px 0px 0px;
    font-weight: bold;
}

.bg-header h1, .bg-header h3 {
    color: white;
    text-shadow: 1px 1px 1px #000;
}

.bg-header .bottom-fixed {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
}

.wrapper-search {
    background: #054466;
    color: white;
    border-radius: 4px;
    display: flex;
    padding: 2px;
    position: relative;
}

.ux-search-box {
    background: #054466;
    border: 1px solid #054466;
    border-radius: 4px;
    color: white;
    position: relative;
    padding: 0px 0px 0px 15px;
}

.flex-col {
    display: flex;
    align-items: center;
}

form .search-categories {
    left: 0px;
    top: 0px;
    width: 250px;
}

.input {
    width: 60%;
    height: 40px;
    line-height: 40px;
    padding: 0px 15px;
    color: black;
    border: none;
    background-color: white;
    -webkit-box-shadow: 0px 0px 0px 1px #DADADA inset, 0px 0px 0px 5px transparent;
    box-shadow: 0px 0px 0px 1px #DADADA inset, 0px 0px 0px 5px transparent;
    -webkit-transition: 0.3s all;
    transition: 0.3s all;
    outline: transparent;
}

.ux-search-box form .search-btn {
    top: 0px;
    right: 0px;
    padding: 0 30px;
    height: 40px;
    background-color: #368ac0;
    border: none;
}

.ux-search-box form ul {
    display: flex;
}

form ul li {
    float: left;
}

.ux-search-box form ul.nav li span {
    padding: 10px 0;
    display: block;
}

form ul li a {
    color: white;
}

.search-category ul {
    margin: 0
}

.search-category ul li a:hover {
    color: white;
    text-decoration: none;
}

.search-category .element {
    padding: 0 15px 0 0;
}

.social-header {
    right: 10px;
    bottom: 0;
}

.social-header a {
    color: white;
    padding: 0 5px;
}

/* Menu */

.menu {
    text-align: left;
    display: none;
    /* display: block; */
}

.menu.open {
    display: block;
    position: absolute;
    z-index: 10;
}

.menu ul {
    background: rgba(5, 68, 102, 0.8);
    float: left;
    overflow-y: scroll;
    max-height: 490px;
}

.menu ul li {
    border-bottom: 1px solid white;
}

.menu ul li a.view-row::after {
    content: "\f105";
    font-family: FontAwesome;
    float: right;
    right: 0;
    position: absolute;
    padding: 0px 10px;
}

.menu ul li a {
    color: white;
    padding: 10px 30px 10px 15px;
}

.menu ul li a:hover {
    color: var(--primary-text-color);
    background: transparent;
}

.menu ul li:hover>.sub-menu {
    display: block;
}

.menu ul li ul.sub-menu {
    display: none;
    position: absolute;
    top: 0;
    width: 100%;
    left: 100%;
    background-color: rgba(5, 68, 102, 0.8);
    padding: 0px;
    margin-left: 1px;
}

/* End Menu */

/* home-page */
.home-page .cell-product{
    margin: 10px 0px;
}
/* Product */

.cell-product, .cell-child {
    position: relative;
    overflow: hidden;
}

.cell-product .box-title {
    position: absolute;
    top: 0;
    left: 10px;
    right: 10px;
    /* background: #054466; */
    background-color: rgba(0, 66, 107, 0.8);
    text-align: center;
    padding: 10px;
    z-index: 10;
    height: 65px;
    overflow: hidden;
    word-spacing: 5px;
}

.cell-child .title h4 {
    text-align: center;
    color: black;
    font-size: 14px;
}

.cell-product .box-title h4 {
    color: white;
    font-size: 14px;
    text-transform: uppercase;
    font-family: 'Helvetica Neue';
}

.cell-product .box-img, .cell-child .box-img {
    position: relative;
    overflow: hidden;
}

.cell-product .box-img img {
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    max-height: 304px;
    height: 304px;
}

.cell-child .box-img img {
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    max-height: 241px;
    height: 241px;
}

.cell-product .box-img:hover img, .cell-child .box-img:hover img {
    -ms-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}

.box-zoom:hover i{
    -ms-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}

.page-content {
    padding-bottom: 10px;
    position: relative;
}

.page-content h2 {
    font-size: 20px;
    color: var(--primary-footer);
}

.page-content p {
    margin: 20px 0px;
}

/* iLift */

.iLift-page .cell-child {
    margin: 5px 0px;
}

.box-header {
    background: #ff0000;
    padding: 1px 20px;
    color: white;
    text-align: center;
    margin-bottom: 10px;
}
.box-header h1, .box-header h1 p{
	padding: 0;
	margin: 0;
}

.box-header h1 p,.box-header h1 span {
	padding: 15px 0px;
    vertical-align: middle;
    display: grid;
}
.page-content img {
    margin-bottom: 15px;
}

.box-header h5 {
    font-size: 36px;
    font-weight: normal;
}

.footer-content {
    position: relative;
    clear: both;
    margin-bottom: 15px;
}

.footer-content h1 {
    position: absolute;
    bottom: 50px;
    color: #fff;
    font-weight: bold;
    font-size: 30px;
    text-align: center;
    left: 0;
    right: 0;
}

.footer-content h5 {
    position: absolute;
    bottom: 15px;
    left: 0;
    right: 0;
    text-align: center;
    color: #fff;
    font-size: 30px;
    font-weight: normal;
}

/* End  iLift */

/* International */

.list-style-category h2 {
    text-transform: uppercase;
    margin-bottom: 20px;
}

.list-style-category ul {
    margin: 0;
    padding: 0;
}

.list-style-category ul li:before {
    content: '*';
    font-weight: bold;
    margin-right: 10px;
}

.list-style-category ul li {
    margin: 8px 0px;
    font-weight: bold;
    word-spacing: 5px;
}

.list-certificate {
    margin-top: 20px;
    margin-bottom: 20px;
}

.list-certificate a.carousel-control {
    background: transparent;
}

/* ----slider---- */

#slider-certificate .carousel-inner .item {
    text-align: center;
    left: 0 !important;
    right: 0 !important;
}

#slider-certificate .carousel-inner .item img {
    text-align: center;
    margin: 0 auto;
    border: 1px solid black;
}

.control-carousel {
    position: absolute;
    bottom: -40px;
    left: 0;
    right: 0;
    text-align: center;
}

.control-carousel .left {
    margin-right: 20px;
    font-size: 24px;
}

.control-carousel .right {
    margin-left: 20px;
    font-size: 24px;
}

/* advantage */

.advantage {
    margin: 20px auto;
}

.topicPage h1 {
    padding: 0;
    margin: 0;
    margin-bottom: 20px;
    text-align: center;
    color: #da4306;
}

.advantage .cell-child .box-img {
    text-align: center;
    background: var(--primary-bg);
}

.first.cell-child.col-2dot4 {
    padding-left: 0;
}

.last.cell-child.col-2dot4 {
    padding-right: 0;
}

.cell-child.col-2dot4 {
    padding-left: 5px;
    padding-right: 5px;
}

.row-child .content h5 {
    font-weight: bold;
    padding: 0;
    margin: 0;
    margin-bottom: 15px;
}

/* .advantage .cell-child img {
    width: auto;
    max-height: 290px !important;
    height: 290px !important;
} */

/* end advantage */

/* Footer */

.footer {
    background: var(--primary-footer);
    margin-top: 30px;
    padding: 20px 0px 10px 0px;
    /* padding: 20px 0px 70px 0px; */
    color: white;
    font-size: 14px;
}

</* .contact h5.title {
    margin-left: 25px;
} */>

.know-us .title, .contact .title {
    margin-bottom: 20px;
}

.footer ul {
    padding: 0;
}

.info-contact li {
    display: flex;
    align-items: flex-end;
}

.info-contact li, .category-footer li a {
    color: white;
    line-height: 25px;
    word-spacing: 5px;
}

.category-footer li a {
    text-transform: uppercase;
}

.category-footer li a.active {
    color: var(--primary-text-color);
}

.category-footer li:hover a {
    color: var(--primary-text-color);
}

.info-contact {
    margin: 0px 0px;
}

.info-contact li i {
    font-size: 18px;
    padding-right: 10px;
    padding-right: 10px;
    margin-bottom: 15px;
}

.info-contact li.title-list {
    font-weight: bold;
    /* text-transform: uppercase; */
}

.social-footer {
    margin: 0;
    position: absolute;
    bottom: 15px;
    left: 15px;
}

.social-footer li {
    display: inline-block;
}

.social-footer li a {
    padding: 5px 5px 0px 0px;
    color: white;
}

.back-to-top {
    position: absolute;
    right: 0;
    left: 0;
    text-align: center;
    width: 150px;
    height: 100px;
    margin: -50px auto;
    background: var(--primary-footer);
    border-radius: 100%;
    line-height: 40px;
    font-size: 24px;
    cursor: pointer;
}

/* malaisya */

.content p, .content ul {
    padding: 0;
    margin: 0 0 5px 0;
}

.content h5 {
    margin-top: 20px;
}

.cell-child .cell {
    text-align: center;
    position: relative;
    max-height: initial;
    height: auto;
    margin-right: 0px;
    padding-right: 0;
    margin-bottom: 0px;
}

.cell-child .cell img {
    width: 100%;
    height: 250px;
}

.cell-child .box-topic {
    background: #1c5877;
    padding: 8px 0px;
    margin-bottom: 10px;
}

.cell-child .cell p {
    text-align: justify;
    margin-top: 15px;
}

.cell-child h5 {
    padding: 0;
    margin: 0;
    color: #fff;
    font-weight: normal;
}

.reset-col {
    text-align: center;
}

/* Gallery */

.slide-photo-gallery {
    text-align: center;
}

.slide-photo-gallery h5 {
    margin-top: 50px;
}

.slide-photo-gallery .carousel-inner .item img {
    vertical-align: middle;
    line-height: normal;
    display: inline-block;
    height: 100%;
}

.slide-photo-gallery .carousel-inner .item {
    width: 100%;
    height: 540px;
    border: 1px solid var(--primary-footer);
    align-items: center;
    background: var(--primary-bg);
}

.cell-gallery .box-img img {
    transform: scale(1) !important;
    width: 100%;
}

.play-video {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1;
    top: 35%;
    bottom: 0;
    margin: 0 auto;
    background: rgba(0, 0, 0, 0.6);
    width: 70px;
    height: 50px;
    border-radius: 15px;
    text-align: center;
    line-height: 55px;
    color: #fff;
    cursor: pointer;
}

.cell-gallery .box-img:hover .play-video {
    background: red;
}

.play-video i {
    font-size: 24px;
}

.cell-gallery .open .photo-video, .cell-gallery .view-video {
    display: none;
}

.cell-gallery .open .view-video {
    display: block;
}

/* end malaisya */

/* barrablue */

.sourcing .barrablue .cell, .barrablue .content-right-cell {
    padding-left: 5px;
    padding-right: 5px;
}

.barrablue ul {
    padding: 0px 0px 10px 10px;
}

.barrablue h5 {
    margin-top: 15px;
    display: inline-block;
    margin-bottom: 0;
}

.barrablue ul li p {
    margin-bottom: 0;
}

.box-line h5 {
    text-align: center;
    font-size: 36px;
    color: #000;
    font-weight: bold;
    margin: 15px 0px 30px 0px;
}

/* end barrablue */

/* content-right-cell */

.content-right-cell .cell {
    padding: 5px;
}

.content-right-cell img {
    width: 100%;
    height: auto;
    margin-bottom: 5px;
}

/* end content-right-cell */
.overflow-first{
    margin-top: 5px;
}
.fish-wholesale{
    display: inline-block;
}
.fish-wholesale p{
    margin: 10px 0px;
}

.content-fist{
    max-height: auto;
    position: relative;
}
.content-fist img, .content-fist a{
    width: 100%;
    height: 100%;
    margin: 0 auto;
}
.content-fist .absolute{
    bottom: 30px;
    
}
.content-fist .absolute h4{
    color: #ffffff;
    font-weight: bold;
    font-size: 24px;
    text-shadow: 1px 2px #000;
}
.title-gallery{
    height: 45px;
    margin-bottom: 10px;
    overflow: hidden;
    vertical-align: middle;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*==================Login=============*/
.modal-dialog-centered {
    display:flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
}

.modal-content {
    width:100%;
}

/* Full-width input fields */


/* Set a style for all buttons */
.login-page button {
  background-color: #04AA6D;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}

.login-page button:hover {
  opacity: 0.8;
}

/* Extra styles for the cancel button */
.login-page .cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}

/* Center the image and position the close button */
.login-page .imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
  position: relative;
}

.login-page span.psw {
  float: right;
  padding-top: 16px;
}


/* The Close Button (x) */
.login-page .close {
  position: absolute;
  right: 25px;
  top: 0;
  color: #000;
  font-size: 35px;
  font-weight: bold;
}

.login-page .close:hover,
.login-page .close:focus {
  color: red;
  cursor: pointer;
}
/* Add Zoom Animation */
.login-page .animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
}
  
@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  .login-page span.psw {
     display: block;
     float: none;
  }
  .login-page .cancelbtn {
     width: 100%;
  }
}
.icon-play-video{
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-items: center;
    align-self: center;
    justify-content: center;
    font-size: 48px;
    color: #767070;
    cursor: pointer;
}

.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-xs-1,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9 {
    position: relative;
    min-height: 1px;
    padding-right: 10px !important;
    padding-left: 10px !important;
}