@media all and (max-width: 480px) {
    #EventCarousel{
        margin-left: 0;
        margin-right: 0;
    }
    #HomeBottomSlide img, #HomeBottomSlide .directory-carousel .carousel-inner{
        min-height: auto;
        height: initial !important;
    }
    /* #MainCategoryLeftSide1Carousel img, #MainCategoryLeftSide1Carousel .directory-carousel .carousel-inner{
        min-height: auto;
        height: initial !important;
        object-fit: contain;
    }
    #MainCategoryLeftSide2Carousel img, #MainCategoryLeftSide2Carousel .directory-carousel .carousel-inner{
        min-height: auto;
        height: initial !important;
        object-fit: contain;
    } */
    .header-banner-logo{
        width: 200px;
    }
    .home-news-loading .wrapper-loader{
        width: 100%;
    }
    footer#sticky-footer{
        margin-top: 40px !important;
    }
    footer .footer-wrapper{
        padding: 5px !important;
    }
    .home-sustainability-banner a img{
        height: 150px !important;
        max-height: 150px !important;
    }
    .container-advertising img.d-block{
        height: auto !important;
        max-height: 240px !important;
    }
    .sustainability-card-wrapper{
        margin-bottom: 20px !important;
    }
    .sustainability-card-wrapper .company-img img{
        max-height: 86px !important;
    }
    .sustainability-card-wrapper .company-img{
        width: 100% !important;
        height: 86px !important;
    }
    .sustainability-card-wrapper  .card-body h5{
        padding-top:10px;
    }
    .sustainability-card-wrapper .card-body{
        width: 100% !important;
    }
    .event-home-calendar {
        padding-right: 1rem !important;
    }
    .events-wrapper-img{
        width: 100% !important;
    }
    .events-wrapper-img img{
        width: 100% !important;
    }
    .text-title-event{
        line-height: 27px !important;
        font-size: 20px !important;
    }
    .questionnaire-modal .modal-body{
        padding: 0 25px 25px 35px !important;
    }
    .questionnaire-modal .btn-questionnaire-wrapper button{
        float: left;
        width: 45%;
        padding: 10px 5px;
        font-size: 14px;
    }
    .financial-service-section.container.main-secction{
        margin-top:1rem !important;
    }
    .financial-service-section .ck-content{
        display: grid;
    }
    .financial-service-section .ck-content figure{
        margin: auto !important;
    }
    .financial-service-section .ck-content .img-2{
        width: 100%;
        max-width: 100% !important;
        text-align: center;
        margin-left: 0;
    }
    .financial-service-section .ck-content .img-2 figure{
        float: left !important;
        width: 50%;
    }
    .financial-service-section .ck-content .img-2 figure img{
        width: 100%;
    }
    .banner-news a img{
        min-height: 150px;
    }
    .banner-news .position-absolute{
        bottom: 0 !important;
        background: #fff;
        padding: 5px !important;
        opacity: 0.7;
        font-size: 11px;
        width: 93%;
    }
    .quotes-title{
        font-size: 1.2rem;
    }
    #carouselSlidesOnly .carousel-indicators {
        bottom: -30px !important;
    }
    .btn-view-more-lv2{
        margin-left: 33.33333% !important;
    }

    .directory-carousel .carousel-inner {
        height: 160px;
    }
    .directory-carousel .carousel-item img {
        height: auto;
        object-fit: contain !important;
    }
    .d-block .card-img-top{
        object-fit: contain !important;
        height: auto;
    }
    #BannerAdsCarousel .carousel-inner.w-100{
        height: 220px !important;
    }
    /* #searchHomeForm{
        justify-content: flex-start !important;
    } */
    .carousel-item img.d-block, .carousel-item .video-wrapper{
        object-fit: contain !important;
        height: auto !important;
    }
    #Homecarousel .carousel-inner {
        margin-bottom: 0;
        height: 150px;
    }
    .directory-carousel .carousel-item .position-absolute {
        display: none;
    }
    .branding-logo img{
        max-height: 60px;
    }
    .navbar.bg-blue{
        height: 10px;
    }
    .signout-caption{
        padding: 15px 10px 10px 10px;
    }
    a.navbar-brand img{
        width: 110px;
    }
    .nav-menu-wrapper{
        padding: 15px 10px !important;
    }
    .container-content.container-register{
        padding: 0px;
    }
    .container-register .register-wrapper{
        padding: 0;
    }
    .container-register .activation-wrapper{
        padding: 0;
    }
    .main-dark-red{
        border: 0;
    }
    .footer-content{
        border: 0;
        margin: 0 !important;
    }
    .list-view{
        margin-left: 0;
        width: 100%;
    }
    footer .container{
        padding: 0;
    }
    .banner .container{
        background-size: contain;
        height: 120px;
        margin-bottom: 35px;
    }
    a.nav-menu{
        height: 25px;
        font-size: 1.2em;
    }
    .profile-cover {
        margin: 0 0 10px 0;
    }
    .profile-cover h2 {
        font-size: 1em;
        padding: 5px 0 !important;
        margin: 0 !important;
    }
    .profile-cover .image-section {
        height: auto;
    }
    .company-detail-cover .image-section{
        padding: 5px 10px 20px 10px;
    }
    .company-detail h4{
        font-size: 1rem;
    }
    .user-profil-part{
        padding-bottom: 0 !important;
        width: 35%;
    }
    .profile-right-section{
        padding: 0 10px 0 0 !important;
        width: 65%;
    }
    .profile-right-section h2{
       font-size: 1em
    }
    .profile-right-section h5{
       font-size: .8em;
       color: #888;
    }
    .card-layer ,.card-layer-signup{
        display: none;
    }
    .container-content{
        padding: 0 30px;
        background-size: cover;
    }
    .wraper-btn-signup{
        font-size: 15px !important;
    }
    .card-directory{
        display: block;
    }
    .card-directory .company-img{
        float: left;
        width: 30%;
        margin-bottom: 0;
        background-origin: content-box;
        /* padding: 2px;
        border: 1px solid #ddd; */
        height: 60px;
        /* min-height: 10px; */
    }
    .card-directory .company-img img{
        /* border: 1px solid #ddd; */
        margin-bottom: 0;
    }
    .card-directory .card-body{
        float: left;
        width: 70%;
    }
    .wrapper-catgory{
        /* display: none; */
    }
    .banner-caption{
        padding: 10px;
        width: 240px;
    }
    .banner-caption h3{
        font-size: .9rem;
    }.banner-caption h4{
        font-size: .8rem;
    }
    .empty {
        width: 100%;
    }
    .card-directory.h-90{
        height: auto !important;
        margin-bottom: .5rem;
    }
    .card-directory .card-text {
        text-align: left !important;
    }
    .container-content-login, .container-register{
        padding: 0;
    }
    .sustainability-card .card-img{
        max-height: 125px;
        object-fit: cover;
    }
}


@media only screen and (min-width: 768px){
    .container-content {
        background: url(/img/loginBg.webp);
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100% 500px;
    }
    .login-wrapper, .register-wrapper{
        -ms-flex: 0 0 30%;
        flex: 0 0 30%;
        max-width: 30%;
    }
}

@media only screen and (max-width: 576px) {
    header .navbar .main-dark-red {
      height: 8px;
    }
    header .signout-caption {
      padding: 20px 10px 10px 10px;
    }
    header .navbar-brand img {
      height: 44px;
    }
    header a.nav-menu {
      font-size: 18px !important;
      height: 28px !important;
    }
  
    [role=main] .banner .container {
      height: 100px !important;
    }
    [role=main] .banner-caption > h3 {
      font-size: 16px;
    }
    [role=main] .banner-caption > h4 {
      font-size: 14px;
    }
  
    #pjax-container-company .card-directory .card-text {
      text-align: left !important;
    }
    #pjax-container-company .pagination {
      float: none !important;
      text-align: center;
      align-items: center;
      justify-content: center;
    }
  
    .profile-cover > .image-section {
      height: 50px;
    }
    .profile-cover > .image-section > h2 {
      font-size: 14px;
    }
    .profile-cover .profile-right-section h2 {
      font-size: 14px;
      font-weight: bold;
    }
    .profile-cover .profile-right-section h5 {
      font-size: 12px;
      opacity: 0.8;
    }
  
    .card-body h4 {
      font-size: 16px;
    }
  
    .profile-cover + div {
      margin-top: 8px !important;
    }
  
    .card-directory .company-img {
      height: 60px;
      overflow: hidden;
      border: 1px solid #ddd;
    }
    .card-directory .company-img .card-img-top {
      object-fit: contain;
      max-height: 58px;
    }
    .sustainability-card .card-img{
        max-height: 125px;
        object-fit: cover;
    }
    .table-wrapper-auto{
        overflow: auto;
    }
    .btn-home-search{
        -webkit-border-radius: .25rem !important;
        -moz-border-radius: .25rem !important;
        border-radius: .25rem !important;
    }
    .company-img + .card-body .card-text{
        bottom: 0 !important;
    }
    .nav-tabs-product{
        display: flex;
    }
    .nav-tabs-product .nav-item{
        -ms-flex: 0 0 33.33333%;
        flex: 0 0 33.33333%;
        max-width: 33.33333%;
        align-items: stretch!important;
    }
    .nav-tabs-product .nav-item .nav-link{
        padding: 0.5rem;
        height: 100%;
    }
    [x-init*="bind,bindSliderCategory()"] .col-md-3.pr-0 .nav-catgory .nav-link{
        padding: 8px 13px !important;
    }
    .company-img + .card-body .card-text {
        position: relative !important;
    }
    .company-img + .card-body {
        min-height: auto !important;
    }
    .company-img.d-flex.align-items-cente{
        margin-left: 0 !important;
    }
    .company-social-media i{
        font-size: 30px;
    }
    .company-website{
        display: block;
    }
    .product-contact-info{
        font-size: 14px;
    }
    .btn-add-product{
        font-size: 14px;
    }
    .contacts-list-header{
        display: none;
    }
    .contacts-list-label{
        display: inline !important;
    }
    .row.contacts-list .col{
        width: 100% !important;
        flex-basis: initial;
    }
  }
  @media only screen and (min-width: 992px) {
    .card-directory .company-img {
      height: 120px;
      overflow: hidden;
    }
    .card-directory .company-img .card-img-top {
      object-fit: contain;
      max-height: 110px;
    }
    .sustainability-card .card-img{
        max-height: 190px;
        object-fit: cover;
    }
    a.nav-menu{
        width: 110px;
    }
  }
  
  @media (min-width: 1200px){
    .container.container-header {
        max-width: 1110px;
        border-left: 69px solid #8F2A23;
    }
    .sustainability-card .card-img{
        max-height: 190px;
        object-fit: cover;
    }
    a.nav-menu{
        width: 130px;
    }
  }

  /*# sourceMappingURL=bobile.css.map */
  


  @media
	  only screen 
    and (max-width: 760px), (min-device-width: 768px) 
    and (max-device-width: 1024px)  {

		/* Force table to not be like tables anymore */
		table.table-add-contacts, table.table-add-contacts thead, table.table-add-contacts tbody, table.table-add-contacts th, table.table-add-contacts td, table.table-add-contacts tr {
			display: block;
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		table.table-add-contacts thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

        table.table-add-contacts tr {
      margin: 0 0 1rem 0;
    }
      
    table.table-add-contacts tr:nth-child(odd) {
      /* background: #ccc; */
    }
    
    table.table-add-contacts td {
			/* Behave  like a "row" */
			border: none;
			border-bottom: 0;
			position: relative;
			padding-left: 5px;
			padding-top: 20px;
            width: 100%;
		}

		table.table-add-contacts td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 0;
			left: 6px;
			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
		}

		/*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/
		table.table-add-contacts td:nth-of-type(1):before { content: "Contact Name (Local) :"; }
		table.table-add-contacts td:nth-of-type(2):before { content: "Contact Name (EN) :"; }
		table.table-add-contacts td:nth-of-type(3):before { content: "Position :"; }
		table.table-add-contacts td:nth-of-type(4):before { content: "Telephone :"; }
		table.table-add-contacts td:nth-of-type(5):before { content: "Email :"; }
		table.table-add-contacts td:nth-of-type(6):before { content: ""; }
	}


    @media (min-width: 992px){
        #TermAndPolicyModal .modal-lg {
            max-width: 900px;
        }
    }